Merge branch 'main' into feat/create-variantsConfig

SAP · Oct 24, 2024 · 817f48c · 817f48c
2 parents 2ff39d1 + f9ffbe0
commit 817f48c
Show file tree

Hide file tree

Showing 9 changed files with 143 additions and 5 deletions.
diff --git a/examples/ui-prompting-examples/CHANGELOG.md b/examples/ui-prompting-examples/CHANGELOG.md
@@ -1,5 +1,13 @@
 # @sap-ux-private/ui-prompting-examples
 
+## 0.2.10
+
+### Patch Changes
+
+-   Updated dependencies [ae2a993]
+    -   @sap-ux/ui-components@1.20.0
+    -   @sap-ux/ui-prompting@0.2.10
+
 ## 0.2.9
 
 ### Patch Changes

diff --git a/examples/ui-prompting-examples/package.json b/examples/ui-prompting-examples/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@sap-ux-private/ui-prompting-examples",
-    "version": "0.2.9",
+    "version": "0.2.10",
     "description": "This project contains UI storybook stories with exampleS with prompt ui and FPM based building blocks.",
     "license": "Apache-2.0",
     "private": true,

diff --git a/packages/ui-components/CHANGELOG.md b/packages/ui-components/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @sap-ux/ui-components
 
+## 1.20.0
+
+### Minor Changes
+
+-   ae2a993: UICombobox: Added new property 'searchByKeyEnabled' to allow searching by the option's "key" in addition to "text".
+
 ## 1.19.0
 
 ### Minor Changes

diff --git a/packages/ui-components/package.json b/packages/ui-components/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@sap-ux/ui-components",
-    "version": "1.19.0",
+    "version": "1.20.0",
     "license": "Apache-2.0",
     "description": "SAP UI Components Library",
     "repository": {

diff --git a/packages/ui-components/src/components/UIComboBox/UIComboBox.tsx b/packages/ui-components/src/components/UIComboBox/UIComboBox.tsx
@@ -66,6 +66,13 @@ export interface UIComboBoxProps extends IComboBoxProps, UIMessagesExtendedProps
     isForceEnabled?: boolean;
     readOnly?: boolean;
     calloutCollisionTransformation?: boolean;
+    /**
+     * Determines whether the `key` property should be considered during search.
+     * By default, only the `text` property of an option is considered.
+     *
+     * @default false
+     */
+    searchByKeyEnabled?: boolean;
 }
 export interface UIComboBoxState {
     minWidth?: number;
@@ -174,7 +181,11 @@ export class UIComboBox extends React.Component<UIComboBoxProps, UIComboBoxState
                 isGroupVisible = false;
             } else {
                 // Handle selectable item
-                const isHidden = option.text.toLowerCase().indexOf(this.query) === -1;
+                let isHidden = !option.text.toLowerCase().includes(this.query);
+                // Consider 'key' of option if property 'searchByKeyEnabled' is enabled
+                if (this.props.searchByKeyEnabled && isHidden) {
+                    isHidden = !option.key.toString().toLowerCase().includes(this.query);
+                }
                 option.hidden = isHidden;
                 if (this.isListHidden && !option.hidden) {
                     this.isListHidden = false;

diff --git a/packages/ui-components/stories/UICombobox.story.tsx b/packages/ui-components/stories/UICombobox.story.tsx
@@ -427,3 +427,50 @@ export const customRender = () => {
         />
     );
 };
+
+const searchKeysData = [
+    { 'key': 'test1', 'text': 'test1' },
+    { 'key': 'dummy', 'text': 'dummy' },
+    { 'key': 'customer', 'text': 'customer' },
+    { 'key': 'name', 'text': 'name' },
+    { 'key': 'employee', 'text': 'employee' },
+    { 'key': 'ID', 'text': 'ID' },
+    { 'key': 'tripEndDate', 'text': 'tripEndDate' },
+    { 'key': 'bookings', 'text': 'bookings', 'itemType': UISelectableOptionMenuItemType.Divider },
+    { 'key': 'bookings', 'text': 'bookings', 'itemType': UISelectableOptionMenuItemType.Header },
+    { 'key': 'bookings/airlines', 'text': 'airlines' },
+    { 'key': 'bookings/bookingDate', 'text': 'bookingDate' },
+    { 'key': 'bookings/DateOnBookings', 'text': 'DateOnBookings' },
+    { 'key': 'bookings/employee', 'text': 'employee' },
+    { 'key': 'bookings/flightDate', 'text': 'flightDate' },
+    { 'key': 'bookings/ID', 'text': 'ID' },
+    { 'key': 'bookings/priceUSD', 'text': 'priceUSD' },
+    { 'key': 'bookings/travel_ID', 'text': 'travel_ID' },
+    { 'key': 'bookings/usedString5', 'text': 'usedString5' },
+    { 'key': 'notes', 'text': 'notes', 'itemType': UISelectableOptionMenuItemType.Divider },
+    { 'key': 'notes', 'text': 'notes', 'itemType': UISelectableOptionMenuItemType.Header },
+    { 'key': 'notes/comment', 'text': 'comment' },
+    { 'key': 'notes/description', 'text': 'description' }
+];
+
+export const SearchIncludeKeys = (): JSX.Element => (
+    <div style={{ width: '300px' }}>
+        <UIComboBox
+            options={searchKeysData}
+            highlight={true}
+            allowFreeform={true}
+            useComboBoxAsMenuMinWidth={true}
+            autoComplete="on"
+            searchByKeyEnabled={true}
+        />
+        <UIComboBox
+            options={searchKeysData}
+            highlight={true}
+            allowFreeform={true}
+            useComboBoxAsMenuMinWidth={true}
+            autoComplete="on"
+            disabled={true}
+            searchByKeyEnabled={true}
+        />
+    </div>
+);
diff --git a/packages/ui-components/test/unit/components/UICombobox.test.tsx b/packages/ui-components/test/unit/components/UICombobox.test.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as Enzyme from 'enzyme';
 import type { UIComboBoxOption, UIComboBoxProps, UIComboBoxState } from '../../../src/components/UIComboBox';
-import { UIComboBox, UIComboBoxLoaderType } from '../../../src/components/UIComboBox';
+import { UIComboBox, UIComboBoxLoaderType, UISelectableOptionMenuItemType } from '../../../src/components/UIComboBox';
 import { data as originalData, groupsData as originalGroupsData } from '../../__mock__/select-data';
 import { initIcons } from '../../../src/components/Icons';
 import type { IComboBox, IComboBoxOption } from '@fluentui/react';
@@ -873,4 +873,63 @@ describe('<UIComboBox />', () => {
         openDropdown();
         expect(wrapper.find('div.dummy').length).toEqual(1);
     });
+
+    describe('Test "searchByKeyEnabled" property', () => {
+        const searchKeysData = [
+            { 'key': 'test1', 'text': 'test1' },
+            { 'key': 'dummy', 'text': 'dummy' },
+            { 'key': 'customer', 'text': 'customer' },
+            { 'key': 'name', 'text': 'name' },
+            { 'key': 'employee', 'text': 'employee' },
+            { 'key': 'ID', 'text': 'ID' },
+            { 'key': 'tripEndDate', 'text': 'tripEndDate' },
+            { 'key': 'bookings', 'text': 'bookings', 'itemType': UISelectableOptionMenuItemType.Divider },
+            { 'key': 'bookings', 'text': 'bookings', 'itemType': UISelectableOptionMenuItemType.Header },
+            { 'key': 'bookings/airlines', 'text': 'airlines' },
+            { 'key': 'bookings/bookingDate', 'text': 'bookingDate' },
+            { 'key': 'bookings/DateOnBookings', 'text': 'DateOnBookings' },
+            { 'key': 'bookings/employee', 'text': 'employee' },
+            { 'key': 'bookings/flightDate', 'text': 'flightDate' },
+            { 'key': 'bookings/ID', 'text': 'ID' },
+            { 'key': 'bookings/priceUSD', 'text': 'priceUSD' },
+            { 'key': 'bookings/travel_ID', 'text': 'travel_ID' },
+            { 'key': 'bookings/usedString5', 'text': 'usedString5' },
+            { 'key': 'notes', 'text': 'notes', 'itemType': UISelectableOptionMenuItemType.Divider },
+            { 'key': 'notes', 'text': 'notes', 'itemType': UISelectableOptionMenuItemType.Header },
+            { 'key': 'notes/comment', 'text': 'comment' },
+            { 'key': 'notes/description', 'text': 'description' }
+        ];
+        const testCases = [
+            {
+                name: '"searchByKeyEnabled" is undefined',
+                searchByKeyEnabled: undefined,
+                expectedCount: 2
+            },
+            {
+                name: '"searchByKeyEnabled" is false',
+                searchByKeyEnabled: false,
+                expectedCount: 2
+            },
+            {
+                name: '"searchByKeyEnabled" is true',
+                searchByKeyEnabled: true,
+                expectedCount: 10
+            }
+        ];
+        for (const testCase of testCases) {
+            const { name, searchByKeyEnabled, expectedCount } = testCase;
+            it(name, () => {
+                const query = 'bookings';
+                wrapper.setProps({
+                    highlight: true,
+                    options: searchKeysData,
+                    searchByKeyEnabled
+                });
+                openDropdown();
+                wrapper.find('input').simulate('keyDown', {});
+                triggerSearch(query);
+                expect(wrapper.find('.ms-Button').length).toEqual(expectedCount);
+            });
+        }
+    });
 });
diff --git a/packages/ui-prompting/CHANGELOG.md b/packages/ui-prompting/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @sap-ux/ui-prompting
 
+## 0.2.10
+
+### Patch Changes
+
+-   Updated dependencies [ae2a993]
+    -   @sap-ux/ui-components@1.20.0
+
 ## 0.2.9
 
 ### Patch Changes

diff --git a/packages/ui-prompting/package.json b/packages/ui-prompting/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@sap-ux/ui-prompting",
-    "version": "0.2.9",
+    "version": "0.2.10",
     "license": "Apache-2.0",
     "description": "SAP UI Components Library",
     "repository": {