diff --git a/examples/ui-prompting-examples/CHANGELOG.md b/examples/ui-prompting-examples/CHANGELOG.md index 22d2a0e98b..e7e7d309f9 100644 --- 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 index 5064507b54..de4912a0a7 100644 --- 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 index 6f59a0557c..d74c73a8ce 100644 --- 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 index c7ca059203..be4dba52e5 100644 --- 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 index 1d59b3e300..5b5abd8c01 100644 --- 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 { /> ); }; + +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 => ( +
+ + +
+); diff --git a/packages/ui-components/test/unit/components/UICombobox.test.tsx b/packages/ui-components/test/unit/components/UICombobox.test.tsx index 53bc72faf8..fb80bb1b7d 100644 --- 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('', () => { 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 index af44d87608..229fd87e4a 100644 --- 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 index 2dfe04b4ea..1d1cd7ebbf 100644 --- 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": {