fix(downshift): spread dropdownProps last (#17089)

tay1orjones · web-flow · commit 0ddee0536d2f · 2024-08-01T15:55:42.000-05:00
diff --git a/packages/react/src/components/ComboBox/ComboBox.mdx b/packages/react/src/components/ComboBox/ComboBox.mdx
@@ -54,6 +54,11 @@ next element.
 Our `Combobox` component utilizes [Downshift](https://www.downshift-js.com/)
 under the hood to help provide complex yet accessible custom dropdown
 components. We provide access to the built in Downshift features with this prop.
+
+Use with caution: anything you define here overrides the components' internal
+handling of that prop. Downshift internals are subject to change, and in some
+cases they can not be shimmed to shield you from potentially breaking changes.
+
 For more information, checkout the Downshift prop
 [documentation](https://www.downshift-js.com/downshift#props-used-in-examples)
 
diff --git a/packages/react/src/components/ComboBox/ComboBox.tsx b/packages/react/src/components/ComboBox/ComboBox.tsx
@@ -188,7 +188,10 @@ export interface ComboBoxProps<ItemType>
   disabled?: boolean;
 
   /**
-   * Additional props passed to Downshift
+   * Additional props passed to Downshift. Use with caution: anything you define
+   * here overrides the components' internal handling of that prop. Downshift
+   * internals are subject to change, and in some cases they can not be shimmed
+   * to shield you from potentially breaking changes.
    */
   downshiftProps?: Partial<UseComboboxProps<ItemType>>;
 
@@ -598,7 +601,6 @@ const ComboBox = forwardRef(
       toggleMenu,
       setHighlightedIndex,
     } = useCombobox({
-      ...downshiftProps,
       items: filterItems(items, itemToString, inputValue),
       inputValue: inputValue,
       itemToString: (item) => {
@@ -631,6 +633,7 @@ const ComboBox = forwardRef(
       isItemDisabled(item, _index) {
         return (item as any).disabled;
       },
+      ...downshiftProps,
     });
 
     const buttonProps = getToggleButtonProps({
@@ -934,7 +937,10 @@ ComboBox.propTypes = {
   disabled: PropTypes.bool,
 
   /**
-   * Additional props passed to Downshift
+   * Additional props passed to Downshift. Use with caution: anything you define
+   * here overrides the components' internal handling of that prop. Downshift
+   * internals are subject to change, and in some cases they can not be shimmed
+   * to shield you from potentially breaking changes.
    */
   downshiftProps: PropTypes.object as React.Validator<
     UseComboboxProps<unknown>
diff --git a/packages/react/src/components/Dropdown/Dropdown.mdx b/packages/react/src/components/Dropdown/Dropdown.mdx
@@ -98,6 +98,11 @@ to the top of the screen. To do this, specify `direction="top"`
 Our `Dropdown` component utilizes [Downshift](https://www.downshift-js.com/)
 under the hood to help provide complex yet accessible custom dropdown
 components. We provide access to the built in Downshift features with this prop.
+
+Use with caution: anything you define here overrides the components' internal
+handling of that prop. Downshift internals are subject to change, and in some
+cases they can not be shimmed to shield you from potentially breaking changes.
+
 For more information, checkout the Downshift prop
 [documentation](https://www.downshift-js.com/downshift#props-used-in-examples)
 
diff --git a/packages/react/src/components/Dropdown/Dropdown.tsx b/packages/react/src/components/Dropdown/Dropdown.tsx
@@ -109,7 +109,10 @@ export interface DropdownProps<ItemType>
   disabled?: boolean;
 
   /**
-   * Additional props passed to Downshift
+   * Additional props passed to Downshift. Use with caution: anything you define
+   * here overrides the components' internal handling of that prop. Downshift
+   * internals are subject to change, and in some cases they can not be shimmed
+   * to shield you from potentially breaking changes.
    */
   downshiftProps?: Partial<UseSelectProps<ItemType>>;
 
@@ -310,7 +313,6 @@ const Dropdown = React.forwardRef(
     const { isFluid } = useContext(FormContext);
 
     const selectProps: UseSelectProps<ItemType> = {
-      ...downshiftProps,
       items,
       itemToString,
       initialSelectedItem,
@@ -334,6 +336,7 @@ const Dropdown = React.forwardRef(
           }
         }
       },
+      ...downshiftProps,
     };
     const dropdownInstanceId = useId();
 
@@ -659,7 +662,10 @@ Dropdown.propTypes = {
   disabled: PropTypes.bool,
 
   /**
-   * Additional props passed to Downshift
+   * Additional props passed to Downshift. Use with caution: anything you define
+   * here overrides the components' internal handling of that prop. Downshift
+   * internals are subject to change, and in some cases they can not be shimmed
+   * to shield you from potentially breaking changes.
    */
   downshiftProps: PropTypes.object as React.Validator<UseSelectProps<unknown>>,
 
diff --git a/packages/react/src/components/FluidMultiSelect/FluidMultiSelect.js b/packages/react/src/components/FluidMultiSelect/FluidMultiSelect.js
@@ -69,7 +69,10 @@ FluidMultiSelect.propTypes = {
   disabled: PropTypes.bool,
 
   /**
-   * Additional props passed to Downshift
+   * Additional props passed to Downshift. Use with caution: anything you define
+   * here overrides the components' internal handling of that prop. Downshift
+   * internals are subject to change, and in some cases they can not be shimmed
+   * to shield you from potentially breaking changes.
    */
   downshiftProps: PropTypes.object,
 
diff --git a/packages/react/src/components/MultiSelect/FilterableMultiSelect.tsx b/packages/react/src/components/MultiSelect/FilterableMultiSelect.tsx
@@ -139,7 +139,10 @@ export interface FilterableMultiSelectProps<ItemType>
   disabled?: boolean;
 
   /**
-   * Additional props passed to Downshift
+   * Additional props passed to Downshift. Use with caution: anything you define
+   * here overrides the components' internal handling of that prop. Downshift
+   * internals are subject to change, and in some cases they can not be shimmed
+   * to shield you from potentially breaking changes.
    */
   downshiftProps?: UseMultipleSelectionProps<ItemType>;
 
@@ -599,7 +602,6 @@ const FilterableMultiSelect = React.forwardRef(function FilterableMultiSelect<
   }
 
   const { getDropdownProps } = useMultipleSelection<ItemType>({
-    ...downshiftProps,
     activeIndex: highlightedIndex,
     initialSelectedItems,
     selectedItems: controlledSelectedItems,
@@ -615,6 +617,7 @@ const FilterableMultiSelect = React.forwardRef(function FilterableMultiSelect<
         }
       }
     },
+    ...downshiftProps,
   });
 
   useEffect(() => {
@@ -965,7 +968,10 @@ FilterableMultiSelect.propTypes = {
   disabled: PropTypes.bool,
 
   /**
-   * Additional props passed to Downshift
+   * Additional props passed to Downshift. Use with caution: anything you define
+   * here overrides the components' internal handling of that prop. Downshift
+   * internals are subject to change, and in some cases they can not be shimmed
+   * to shield you from potentially breaking changes.
    */
   // @ts-ignore
   downshiftProps: PropTypes.shape(Downshift.propTypes),
diff --git a/packages/react/src/components/MultiSelect/MultiSelect.mdx b/packages/react/src/components/MultiSelect/MultiSelect.mdx
@@ -12,6 +12,7 @@ import * as MultiSelect from './MultiSelect.stories';
 
 {/* <!-- START doctoc generated TOC please keep comment here to allow auto update --> */}
 {/* <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --> */}
+
 ## Table of Contents
 
 - [Overview](#overview)
@@ -25,11 +26,10 @@ import * as MultiSelect from './MultiSelect.stories';
 
 ## Overview
 
-The `MultiSelect` component is a variant of the `Dropdown` component that allows for
-multiple items to be selected. `MultiSelect` stays open while items are
+The `MultiSelect` component is a variant of the `Dropdown` component that allows
+for multiple items to be selected. `MultiSelect` stays open while items are
 being selected.
 
-
 <Canvas>
   <Story of={MultiSelect.Default} />
 </Canvas>
@@ -44,8 +44,8 @@ By passing items into the `initialSelectedItems` prop, they can be pre-selected.
 
 ### Filtering
 
-The `FilterableMultiSelect` component allows for filtering the list of selectable
-items to a subset.
+The `FilterableMultiSelect` component allows for filtering the list of
+selectable items to a subset.
 
 <Canvas>
   <Story of={MultiSelect.Filterable} />
@@ -59,6 +59,19 @@ items to a subset.
 
 ## Component API
 
+### `downshiftProps`
+
+This component utilizes [Downshift](https://www.downshift-js.com/) under the
+hood to help provide complex yet accessible custom dropdown components. We
+provide access to the built in Downshift features with this prop.
+
+Use with caution: anything you define here overrides the components' internal
+handling of that prop. Downshift internals are subject to change, and in some
+cases they can not be shimmed to shield you from potentially breaking changes.
+
+For more information, checkout the Downshift prop
+[documentation](https://www.downshift-js.com/downshift#props-used-in-examples)
+
 <ArgsTable />
 
 ## Feedback
diff --git a/packages/react/src/components/MultiSelect/MultiSelect.tsx b/packages/react/src/components/MultiSelect/MultiSelect.tsx
@@ -136,7 +136,10 @@ export interface MultiSelectProps<ItemType>
   disabled?: ListBoxProps['disabled'];
 
   /**
-   * Additional props passed to Downshift
+   * Additional props passed to Downshift. Use with caution: anything you define
+   * here overrides the components' internal handling of that prop. Downshift
+   * internals are subject to change, and in some cases they can not be shimmed
+   * to shield you from potentially breaking changes.
    */
   downshiftProps?: Partial<UseSelectProps<ItemType>>;
 
@@ -397,7 +400,6 @@ const MultiSelect = React.forwardRef(
     }, [items]);
 
     const selectProps: UseSelectProps<ItemType> = {
-      ...downshiftProps,
       stateReducer,
       isOpen,
       itemToString: (filteredItems) => {
@@ -416,6 +418,7 @@ const MultiSelect = React.forwardRef(
       isItemDisabled(item, _index) {
         return (item as any).disabled;
       },
+      ...downshiftProps,
     };
 
     const {
@@ -847,7 +850,10 @@ MultiSelect.propTypes = {
   disabled: PropTypes.bool,
 
   /**
-   * Additional props passed to Downshift
+   * Additional props passed to Downshift. Use with caution: anything you define
+   * here overrides the components' internal handling of that prop. Downshift
+   * internals are subject to change, and in some cases they can not be shimmed
+   * to shield you from potentially breaking changes.
    */
   downshiftProps: PropTypes.object as React.Validator<UseSelectProps<unknown>>,
 
