refactor: cleanup

Author: yordan-st

packages/pluggableWidgets/combobox-web/src/components/MultiSelection/MultiSelection.tsx

@@ -16,7 +16,11 @@ export function MultiSelection({
     a11yConfig,
     menuFooterContent,
     ariaRequired,
-    ...options
+    labelId,
+    inputId,
+    ariaLabel,
+    readOnlyStyle,
+    noOptionsText
 }: SelectionBaseProps<MultiSelector>): ReactElement {
     const {
         isOpen,
@@ -33,11 +37,11 @@ export function MultiSelection({
         items,
         setSelectedItems,
         toggleSelectedItem
-    } = useDownshiftMultiSelectProps(selector, { ...options }, a11yConfig.a11yStatusMessage);
+    } = useDownshiftMultiSelectProps(selector, { inputId, labelId }, a11yConfig.a11yStatusMessage);
     const inputRef = useRef<HTMLInputElement>(null);
     const isSelectedItemsBoxStyle = selector.selectedItemsStyle === "boxes";
     const isOptionsSelected = selector.isOptionsSelected();
-    const inputLabel = getInputLabel(options.inputId);
+    const inputLabel = getInputLabel(inputId);
     const hasLabel = useMemo(() => Boolean(inputLabel), [inputLabel]);
     const inputProps = getInputProps({
         ...getDropdownProps(
@@ -65,7 +69,7 @@ export function MultiSelection({
         disabled: selector.readOnly,
         readOnly: selector.options.filterType === "none",
         "aria-required": ariaRequired.value,
-        "aria-label": !hasLabel && options.ariaLabel ? options.ariaLabel : undefined
+        "aria-label": !hasLabel && ariaLabel ? ariaLabel : undefined
     });
 
     const memoizedselectedCaptions = useMemo(
@@ -91,7 +95,7 @@ export function MultiSelection({
             <ComboboxWrapper
                 isOpen={isOpen}
                 readOnly={selector.readOnly}
-                readOnlyStyle={options.readOnlyStyle}
+                readOnlyStyle={readOnlyStyle}
                 getToggleButtonProps={getToggleButtonProps}
                 validation={selector.validation}
                 isLoading={lazyLoading && selector.options.isLoading}
@@ -168,7 +172,7 @@ export function MultiSelection({
                         <SelectAllButton
                             disabled={items.length === 0}
                             value={isOptionsSelected}
-                            id={`${options.inputId}-select-all-button`}
+                            id={`${inputId}-select-all-button`}
                             ariaLabel={a11yConfig.ariaLabels.selectAll}
                             onChange={() => {
                                 if (isOptionsSelected === "all") {
@@ -181,15 +185,15 @@ export function MultiSelection({
                     ) : undefined
                 }
                 menuFooterContent={menuFooterContent}
-                inputId={options.inputId}
+                inputId={inputId}
                 selector={selector}
                 isOpen={isOpen}
                 highlightedIndex={highlightedIndex}
                 selectableItems={items}
                 getItemProps={getItemProps}
                 getMenuProps={getMenuProps}
                 selectedItems={selectedItems}
-                noOptionsText={options.noOptionsText}
+                noOptionsText={noOptionsText}
                 onOptionClick={() => {
                     inputRef.current?.focus();
                 }}

packages/pluggableWidgets/combobox-web/src/hooks/useDownshiftMultiSelectProps.ts

@@ -153,12 +153,11 @@ function useComboboxProps(
 
                 if (
                     selector.onFilterInputChange &&
-                    type &&
-                    (type === "__input_change__" || type.includes("input_change")) &&
+                    type?.includes("input_change") &&
                     inputValue &&
-                    inputValue.trim().length > 0
+                    inputValue.trim()?.length > 0
                 ) {
-                    selector.onFilterInputChange(inputValue!);
+                    selector.onFilterInputChange(inputValue);
                 }
             },
             getA11yStatusMessage(options) {

packages/pluggableWidgets/combobox-web/src/hooks/useGetSelector.ts

@@ -38,18 +38,9 @@ export function useGetSelector(props: ComboboxContainerProps): Selector {
     if (!selectorRef.current) {
         selectorRef.current = getSelector(props);
         selectorRef.current.options.onAfterSearchTermChange(() => setInput({}));
-
-        if (props.onChangeFilterInputEvent) {
-            selectorRef.current.onFilterInputChange = onFilterInputChange;
-        }
     }
     selectorRef.current.updateProps(props);
-
-    if (props.onChangeFilterInputEvent) {
-        selectorRef.current.onFilterInputChange = onFilterInputChange;
-    } else {
-        selectorRef.current.onFilterInputChange = undefined;
-    }
+    selectorRef.current.onFilterInputChange = onFilterInputChange;
 
     return selectorRef.current;
 }