diff --git a/packages/blueprint-component-mapper/src/dual-list-select/dual-list-select.d.ts b/packages/blueprint-component-mapper/src/dual-list-select/dual-list-select.d.ts index 74d62074b..106f63553 100644 --- a/packages/blueprint-component-mapper/src/dual-list-select/dual-list-select.d.ts +++ b/packages/blueprint-component-mapper/src/dual-list-select/dual-list-select.d.ts @@ -26,6 +26,7 @@ interface InternalDualListSelectProps { filterOptionsText?: ReactNode; leftValues?: DualListSelectValue[]; rightValues?: DualListSelectValue[]; + isFilterCaseInSensitive?: boolean; WrapperProps?: React.HTMLProps; LeftWrapperProps?: React.HTMLProps; RightWrapperProps?: React.HTMLProps; diff --git a/packages/blueprint-component-mapper/src/dual-list-select/dual-list-select.js b/packages/blueprint-component-mapper/src/dual-list-select/dual-list-select.js index d9036552d..d916a9e86 100644 --- a/packages/blueprint-component-mapper/src/dual-list-select/dual-list-select.js +++ b/packages/blueprint-component-mapper/src/dual-list-select/dual-list-select.js @@ -263,6 +263,7 @@ DualListInternal.propTypes = { filterValues: PropTypes.func, rightValues: PropTypes.array, handleValuesClick: PropTypes.func, + isFilterCaseInSensitive: PropTypes.bool, WrapperProps: PropTypes.object, LeftWrapperProps: PropTypes.object, RightWrapperProps: PropTypes.object, diff --git a/packages/carbon-component-mapper/src/dual-list-select/dual-list-select.d.ts b/packages/carbon-component-mapper/src/dual-list-select/dual-list-select.d.ts index 2044c68bb..b3b4832e1 100644 --- a/packages/carbon-component-mapper/src/dual-list-select/dual-list-select.d.ts +++ b/packages/carbon-component-mapper/src/dual-list-select/dual-list-select.d.ts @@ -44,6 +44,7 @@ interface InternalDualListSelectProps { sortValuesTitle?: string; filterOptionsText?: ReactNode; filterValueText?: ReactNode; + isFilterCaseInSensitive?: boolean; FormGroupProps?: CarbonFormGroups; GridProps?: GridDefaultProps; RowProps?: RowDefaultProps; diff --git a/packages/carbon-component-mapper/src/dual-list-select/dual-list-select.js b/packages/carbon-component-mapper/src/dual-list-select/dual-list-select.js index ae1ac410c..f40b9ec63 100644 --- a/packages/carbon-component-mapper/src/dual-list-select/dual-list-select.js +++ b/packages/carbon-component-mapper/src/dual-list-select/dual-list-select.js @@ -304,6 +304,7 @@ DualListSelectInner.propTypes = { sortValuesTitle: PropTypes.string, filterOptionsText: PropTypes.node, filterValueText: PropTypes.node, + isFilterCaseInSensitive: PropTypes.bool, FormGroupProps: PropTypes.object, GridProps: PropTypes.object, RowProps: PropTypes.object, diff --git a/packages/common/src/dual-list-select/dual-list-select.js b/packages/common/src/dual-list-select/dual-list-select.js index 4c82e188b..6955fb48a 100644 --- a/packages/common/src/dual-list-select/dual-list-select.js +++ b/packages/common/src/dual-list-select/dual-list-select.js @@ -39,10 +39,22 @@ const DualListSelectCommon = (props) => { }); const leftValues = rest.options - .filter((option) => !rest.input.value.includes(option.value) && option.label.includes(state.filterOptions)) + .filter((option) => { + if (!props.isFilterCaseInSensitive) { + return !rest.input.value.includes(option.value) && option.label.includes(state.filterOptions); + } else { + return !rest.input.value.includes(option.value) && option.label.toLowerCase().includes(state.filterOptions.toLowerCase()); + } + }) .sort((a, b) => (state.sortLeftDesc ? a.label.localeCompare(b.label) : b.label.localeCompare(a.label))); const rightValues = rest.options - .filter((option) => rest.input.value.includes(option.value) && option.label.includes(state.filterValue)) + .filter((option) => { + if (!props.isFilterCaseInSensitive) { + return rest.input.value.includes(option.value) && option.label.includes(state.filterValue); + } else { + return rest.input.value.includes(option.value) && option.label.toLowerCase().includes(state.filterValue.toLowerCase()); + } + }) .sort((a, b) => (state.sortRightDesc ? a.label.localeCompare(b.label) : b.label.localeCompare(a.label))); const handleOptionsClick = (event, value) => handleOptionClick(event, value, leftValues, true, dispatch, state); diff --git a/packages/mui-component-mapper/src/dual-list-select/dual-list-select.d.ts b/packages/mui-component-mapper/src/dual-list-select/dual-list-select.d.ts index e695b05e0..52a1c3ae7 100644 --- a/packages/mui-component-mapper/src/dual-list-select/dual-list-select.d.ts +++ b/packages/mui-component-mapper/src/dual-list-select/dual-list-select.d.ts @@ -48,6 +48,7 @@ interface InternalDualListSelectProps { id?: string; leftValues?: DualListOption[]; rightValues?: DualListOption[]; + isFilterCaseInSensitive?: boolean; FormFieldGridProps?: GridProps; InternalGridProps?: GridProps; ListGridProps?: GridProps; diff --git a/packages/mui-component-mapper/src/dual-list-select/dual-list-select.js b/packages/mui-component-mapper/src/dual-list-select/dual-list-select.js index 0f6ae2ae8..fb0d00bbe 100644 --- a/packages/mui-component-mapper/src/dual-list-select/dual-list-select.js +++ b/packages/mui-component-mapper/src/dual-list-select/dual-list-select.js @@ -555,6 +555,7 @@ DualListSelect.propTypes = { rightValues: PropTypes.array, handleValuesClick: PropTypes.func, isFilterable: PropTypes.bool, + isFilterCaseInSensitive: PropTypes.bool, // props FormFieldGridProps: PropTypes.object, InternalGridProps: PropTypes.object, diff --git a/packages/react-renderer-demo/src/doc-components/examples-texts/blueprint/dual-list-select.md b/packages/react-renderer-demo/src/doc-components/examples-texts/blueprint/dual-list-select.md index 0c25514a6..c3bb15cac 100644 --- a/packages/react-renderer-demo/src/doc-components/examples-texts/blueprint/dual-list-select.md +++ b/packages/react-renderer-demo/src/doc-components/examples-texts/blueprint/dual-list-select.md @@ -23,6 +23,7 @@ Dual list select is wrapped in a form group, so it accepts all [form group props |filterOptionsText|String|'Remove your filter to see all options'|Placeholder for options when there is no filtered option| |leftSortTitle|String|'Sort options'|Accessible title for left sort button.| |rightSortTitle|String|'Sort value'|Accessible title for right sort button.| +|isFilterCaseInSensitive|bool|true|Toolbar filter is case insensitive| ### Options diff --git a/packages/react-renderer-demo/src/doc-components/examples-texts/carbon/dual-list-select.md b/packages/react-renderer-demo/src/doc-components/examples-texts/carbon/dual-list-select.md index 514590a4d..eb753f6e4 100644 --- a/packages/react-renderer-demo/src/doc-components/examples-texts/carbon/dual-list-select.md +++ b/packages/react-renderer-demo/src/doc-components/examples-texts/carbon/dual-list-select.md @@ -19,6 +19,7 @@ Dual list select is wrapped in a form group, so it accepts all [form group props |filterValueTitle|String|'Filter selected value'|Placeholder for value filter input| |filterValueText|String|'Remove your filter to see all selected'|Placeholder for value when there is no filtered value| |filterOptionsText|String|'Remove your filter to see all options'|Placeholder for options when there is no filtered option| +|isFilterCaseInSensitive|bool|true|Toolbar filter is case insensitive| ### Options diff --git a/packages/react-renderer-demo/src/doc-components/examples-texts/mui/dual-list-select.md b/packages/react-renderer-demo/src/doc-components/examples-texts/mui/dual-list-select.md index 196804875..26af7f57b 100644 --- a/packages/react-renderer-demo/src/doc-components/examples-texts/mui/dual-list-select.md +++ b/packages/react-renderer-demo/src/doc-components/examples-texts/mui/dual-list-select.md @@ -23,6 +23,7 @@ Dual list select is wrapped in a form group, so it accepts all [form group props |filterOptionsText|String|'Remove your filter to see all options'|Placeholder for options when there is no filtered option| |checkboxVariant|bool|false|Change list item to checkboxes| |isFilterable|bool|true|Shows toolbar for both lists| +|isFilterCaseInSensitive|bool|true|Toolbar filter is case insensitive| ### Options diff --git a/packages/suir-component-mapper/src/dual-list-select/dual-list-select.d.ts b/packages/suir-component-mapper/src/dual-list-select/dual-list-select.d.ts index f3c8be300..7a21ffb9f 100644 --- a/packages/suir-component-mapper/src/dual-list-select/dual-list-select.d.ts +++ b/packages/suir-component-mapper/src/dual-list-select/dual-list-select.d.ts @@ -29,6 +29,7 @@ interface InternalDualListSelectProps { filterOptionsText?: ReactNode; leftValues?: DualListSelectOption[]; rightValues?: DualListSelectOption[]; + isFilterCaseInSensitive?: boolean; /** Sub components customization API */ OptionsListProps?: SegmentProps; OptionProps?: DualListSelectOptionProps; diff --git a/packages/suir-component-mapper/src/dual-list-select/dual-list-select.js b/packages/suir-component-mapper/src/dual-list-select/dual-list-select.js index b25b53381..bbe83a1d9 100644 --- a/packages/suir-component-mapper/src/dual-list-select/dual-list-select.js +++ b/packages/suir-component-mapper/src/dual-list-select/dual-list-select.js @@ -362,6 +362,7 @@ DualList.propTypes = { validateOnMount: PropTypes.bool, leftSortTitle: PropTypes.node, rightSortTitle: PropTypes.node, + isFilterCaseInSensitive: PropTypes.bool, /** Sub components customization API */ OptionsListProps: PropTypes.object, OptionProps: PropTypes.object,