@jobber/components 8.14.0 → 8.14.1

package/dist/docs/DataList/DataList.md

@@ -221,7 +221,7 @@ children and inserts it above the list of items.
 ```tsx
 <DataList>
   <DataList.Filters>
-    <Combobox />
+    <FilterPicker />
     <Button />
     <Select />
   </DataList.Filters>
@@ -233,7 +233,7 @@ children and inserts it above the list of items.
 ##### In all filter groups (e.g. with the "Clear Filters" button)
 
 You can add a button that will clear all the filters by using the combination of
-the `Combobox` and `Button` components (check out the `Code` tab in the
+the `FilterPicker` and `Button` components (check out the `Code` tab in the
 ["Clear All Filters" story](/storybook/web/?path=/story/components-lists-and-tables-datalist--clear-all-filters)
 for a more elaborate example).
 
@@ -247,27 +247,27 @@ function removeAllFilters() {
 }
 
 <DataList.Filters>
-  <Combobox
+  <FilterPicker
     label="Filter Group 1"
     selected={groupOneSelectedFilters}
     onSelect={handleSelectGroupOneFilters}
     multiSelect
   >
     {groupOneSelectedFilters.map(filter => (
-      <Combobox.Option key={filter} id={filter} label={filter} />
+      <FilterPicker.Option key={filter} id={filter} label={filter} />
     ))}
-  </Combobox>
+  </FilterPicker>
 
-  <Combobox
+  <FilterPicker
     label="Filter Group 2"
     selected={groupTwoSelectedFilters}
     multiSelect
     onSelect={handleSelectGroupOneFilters}
   >
     {groupTwoSelectedFilters.map(filter => (
-      <Combobox.Option key={filter} id={filter} label={filter} />
+      <FilterPicker.Option key={filter} id={filter} label={filter} />
     ))}
-  </Combobox>
+  </FilterPicker>
 
   <Button
     label="Clear filters"
@@ -281,8 +281,9 @@ function removeAllFilters() {
 ##### Within one filter group (e.g. Suffix on the Chip)
 
 If you'd like to to implement a filter mechanism to clear all filters within one
-group without opening the `Combobox` "dropdown", you could achieve this by using
-`<Combobox.Activator>` and `<Chip>` components (check out the `Code` tab in the
+group without opening the `FilterPicker` "dropdown", you could achieve this by
+using `<FilterPicker.Activator>` and `<Chip>` components (check out the `Code`
+tab in the
 ["Clear All Filters" story](/storybook/web/?path=/story/components-lists-and-tables-datalist--clear-all-filters))
 for a more elaborate example).
 
@@ -293,13 +294,13 @@ standard `DataList` with filters.
 ```tsx
 const [selectedFilters, setSelectedFilters] = useState([]);
 
-<Combobox
+<FilterPicker
   label=""
   selected={selectedFilters}
   onSelect={setSelectedFilters}
   multiSelect
 >
-  <Combobox.Activator>
+  <FilterPicker.Activator>
     <Chip
       label={
         selectedFilters.length
@@ -330,12 +331,12 @@ const [selectedFilters, setSelectedFilters] = useState([]);
         />
       </Chip.Suffix>
     </Chip>
-  </Combobox.Activator>
+  </FilterPicker.Activator>
 
   {filterOptions.map((option: string) => (
-    <Combobox.Option key={option} id={option} label={option} />
+    <FilterPicker.Option key={option} id={option} label={option} />
   ))}
-</Combobox>;
+</FilterPicker>;
 ```
 
 You can also combine both "Clear filter" methods (within one group as well as to

package/dist/docs/{Combobox/Combobox.md → FilterPicker/FilterPicker.md}

@@ -1,56 +1,59 @@
-# Combobox
+# FilterPicker
 
-The Combobox is designed to provide a versatile and accessible interface for
-selecting one or more options from a list. Combobox can be used for a variety of
-scenarios, such as selecting items from a predefined list, filtering and
-searching through data.
+> **NOTICE:** This component was previously named `Combobox`. Use `FilterPicker` as the
+> direct replacement.
+
+The FilterPicker is designed to provide a versatile and accessible interface for
+selecting one or more options from a list. FilterPicker can be used for a
+variety of scenarios, such as selecting items from a predefined list, filtering
+and searching through data.
 
 ## Design & usage guidelines
 
-The Combobox component's primary function is to facilitate option selection and
-searching within a list of items.
+The FilterPicker component's primary function is to facilitate option selection
+and searching within a list of items.
 
 It should be used in scenarios where users need to choose from a set of options,
 with the added benefit of filtering.
 
-The Combobox also has the flexibility to allow for custom actions, such as
+The FilterPicker also has the flexibility to allow for custom actions, such as
 adding a new item to the list of options or managing a selection.
 
 ## Content guidelines
 
-Combobox is designed to handle lists of selectable options, so the component is
-text based.
+FilterPicker is designed to handle lists of selectable options, so the component
+is text based.
 
 You may customize the activator and action `label`. Refer to the
 [Product Vocabulary](../product-vocabulary/product-vocabulary.md) for consistency in consistency
 in terminology and naming conventions when setting these values.
 
-You may also set an optional `subjectNoun` for the Combobox content. This will
-be used in the
-[empty state](/storybook/web/?path=/story/components-selections-combobox--empty-state)
-of the Combobox, as well as the noun within the search placeholder.
+You may also set an optional `subjectNoun` for the FilterPicker content. This
+will be used in the
+[empty state](/storybook/web/?path=/story/components-selections-filterpicker--empty-state)
+of the FilterPicker, as well as the noun within the search placeholder.
 
-You may include a prefix element to any ComboBox.Option by setting its `prefix`
-prop. This could be a [StatusIndicator](../StatusIndicator/StatusIndicator.md) or
+You may include a prefix element to any `FilterPicker.Option` by setting its
+`prefix` prop. This could be a [StatusIndicator](../StatusIndicator/StatusIndicator.md) or
 [Icon](../Icon/Icon.md) to provide additional context to the option.
 
 ### Empty states
 
-In cases where the list of options is empty, the Combobox content will display a
-message indicating the absence of options. The default will read, *"No options
-yet"* or *"You don't have any \[subjectNoun] yet"* if you've set the
+In cases where the list of options is empty, the FilterPicker content will
+display a message indicating the absence of options. The default will read, *"No
+options yet"* or *"You don't have any \[subjectNoun] yet"* if you've set the
 `subjectNoun` prop.
 
 If options are available, but the search query does not match any of them, the
-Combobox Content will display a message indicating that no options match the
+FilterPicker Content will display a message indicating that no options match the
 search query.
 
 ## Accessibility
 
 | Shortcut Keys   | Action                                                                                     |
 | --------------- | ------------------------------------------------------------------------------------------ |
-| Space or Return | Open/close the Combobox                                                                    |
-| Escape          | Close the Combobox and return focus to the activator                                       |
+| Space or Return | Open/close the FilterPicker                                                                |
+| Escape          | Close the FilterPicker and return focus to the activator                                   |
 | Tab             | When closed: Move to activatorWhen open: Move from search input to clear button to actions |
 | Up/Down Arrow   | Navigate through options list                                                              |
 | Space or Return | Select focused option                                                                      |
@@ -59,7 +62,8 @@ search query.
 
 * The activator element is given a `role="combobox"` to inform the user of the
   type of content they'll be interacting with
-* Once the user opens the Combobox, the search input is focused and announced
+* Once the user opens the FilterPicker, the search input is focused and
+  announced
 * The title and "selected/unselected" status of each item is announced as the
   user navigates the options
 * The actions (if present) are announced and operable as buttons
@@ -67,28 +71,28 @@ search query.
 
 ## Configuration
 
-Combobox is composed of three main parts: Activator, Content, and Action.
+FilterPicker is composed of three main parts: Activator, Content, and Action.
 
 ### Activator
 
-The activator is the user-facing interface to open and close the Combobox and
-initiate option selection.
+The activator is the user-facing interface to open and close the FilterPicker
+and initiate option selection.
 
 #### Default activator
 
-To use the default activator simply omit any kind of `Combobox.Activator`
+To use the default activator simply omit any kind of `FilterPicker.Activator`
 subcomponent in your instance.
 
 Examples of using a default activator can be found in the
-[single-select](/storybook/web/?path=/story/components-selections-combobox--single-select)
+[single-select](/storybook/web/?path=/story/components-selections-filterpicker--single-select)
 and
-[multi-select](/storybook/web/?path=/story/components-selections-combobox--multi-select)
+[multi-select](/storybook/web/?path=/story/components-selections-filterpicker--multi-select)
 stories. The label of the default activator can be customized by adding the
-optional `label` prop to Combobox, to better reflect the type of data being
+optional `label` prop to FilterPicker, to better reflect the type of data being
 selected. Otherwise, the default activator label will read "Select".
 
-The optional `label` prop on Combobox is only effective when using the default
-activator.
+The optional `label` prop on FilterPicker is only effective when using the
+default activator.
 
 #### Custom activator
 
@@ -96,18 +100,19 @@ The custom activator should be used in any instance where the default activator
 is not suitable.
 
 **Child React Component:** To use a customized `Chip` or `Button` your custom
-activator should be a child of `<Combobox.Activator />`. An example of using a
-custom activator can be found in the
-[custom activator](/storybook/web/?path=/story/components-selections-combobox--custom-activator)
+activator should be a child of `<FilterPicker.Activator />`. An example of using
+a custom activator can be found in the
+[custom activator](/storybook/web/?path=/story/components-selections-filterpicker--custom-activator)
 story.
 
 **Child Render Function:** If neither a Chip nor a Button is sufficient for your
-needs, you may instead provide a function as the child to `Combobox.Activator`.
+needs, you may instead provide a function as the child to
+`FilterPicker.Activator`.
 
-As arguments, the function will receive a method to open the Combobox (closing
-is handled internally), and accessibility attributes required for a Combobox.
-**You must implement these yourself**. See the
-[render function example](/storybook/web/?path=/story/components-selections-combobox--custom-activator)
+As arguments, the function will receive a method to open the FilterPicker
+(closing is handled internally), and accessibility attributes required for a
+FilterPicker. **You must implement these yourself**. See the
+[render function example](/storybook/web/?path=/story/components-selections-filterpicker--custom-activator)
 for reference.
 
 The render function must return a single, valid JSX Element (it can of course
@@ -117,10 +122,11 @@ non traditionally interactive element such as a div is used.
 
 ### Content
 
-The content of the Combobox is responsible for displaying the list of selectable
-options, handling user interactions, and managing search functionality.
+The content of the FilterPicker is responsible for displaying the list of
+selectable options, handling user interactions, and managing search
+functionality.
 
-`<Combobox.Option />` represents an individual option within the list. Each
+`<FilterPicker.Option />` represents an individual option within the list. Each
 option has `id`, `label`, and `prefix` props which are used to identify and
 display the option.
 
@@ -128,12 +134,12 @@ display the option.
 
 You can use the `prefix` option to render content on the left side of the
 provided `label`. An example of this behaviour can be found in the
-[Prefix Options](/storybook/web/?path=/story/components-selections-combobox--prefix-options)
+[Prefix Options](/storybook/web/?path=/story/components-selections-filterpicker--prefix-options)
 story.
 
 If you need more advanced control of the children inside each option, you can
 use the `customRender` prop to supply your own content. Check out the
-[Custom Render Options](/storybook/web/?path=/story/components-selections-combobox--custom-render-options)
+[Custom Render Options](/storybook/web/?path=/story/components-selections-filterpicker--custom-render-options)
 story for an example.
 
 ### Action
@@ -141,25 +147,25 @@ story for an example.
 Actions are an optional way to allow users to perform custom tasks such as
 adding a new item to the list of options.
 
-By default, when an action is clicked, the Combobox will close. If you want the
-Combobox to remain open after an action is clicked, you can use the
+By default, when an action is clicked, the FilterPicker will close. If you want
+the FilterPicker to remain open after an action is clicked, you can use the
 `keepOpenOnClick` prop. An example of this behaviour can be found in the
-[Keep Open on Click](/storybook/web/?path=/story/components-selections-combobox--keep-open-on-click)
+[Keep Open on Click](/storybook/web/?path=/story/components-selections-filterpicker--keep-open-on-click)
 story.
 
 ### Selection behavior
 
 #### Single-select
 
-Single-select is Combobox's default selection mode. When a selection is made,
-the Combobox will close.
+Single-select is FilterPicker's default selection mode. When a selection is
+made, the FilterPicker will close.
 
 #### Multi-select
 
 Add the `multiSelect` prop to allow multiple options to be selected and/or
-un-selected. In multi-select mode, the Combobox will only close when a user
-takes an explicit action to close it such as clicking outside the Combobox or
-pressing the ESC key.
+un-selected. In multi-select mode, the FilterPicker will only close when a user
+takes an explicit action to close it such as clicking outside the FilterPicker
+or pressing the ESC key.
 
 With multiSelect activated, a header appears beneath the search input, providing
 information about the number of selected items. Additionally, a button allows
@@ -181,16 +187,16 @@ not only the most recent.
 
 ### onClose
 
-If it is desirable to wait until the Combobox has been closed, likely indicating
-that all selections have been made, it is recommended to use the optional
-`onClose` callback which will fire when the Combobox is closed by any means.
-This callback provides no arguments.
+If it is desirable to wait until the FilterPicker has been closed, likely
+indicating that all selections have been made, it is recommended to use the
+optional `onClose` callback which will fire when the FilterPicker is closed by
+any means. This callback provides no arguments.
 
 While the selections will still be updated in real time, this callback will
-allow you to call any potentially expensive operations only once the Combobox
-has been closed. As such, it will only have a difference in timing for
-multi-select since a single-select selection will immediately close the
-Combobox.
+allow you to call any potentially expensive operations only once the
+FilterPicker has been closed. As such, it will only have a difference in timing
+for multi-select since a single-select selection will immediately close the
+FilterPicker.
 
 ### Selection display
 
@@ -202,7 +208,7 @@ keeping the choice of how to display the data flexible.
 
 ### Custom onSearch
 
-The `onSearch` prop allows you to hook into the Combobox's search input and
+The `onSearch` prop allows you to hook into the FilterPicker's search input and
 receive what the user has typed. This callback is debounced by 300ms by default
 but can be configured with the `onSearchDebounce` prop.
 
@@ -214,7 +220,7 @@ An example use case here would be using the search term to fire off a request to
 fetch the appropriate data for that term. It is recommended to use the `loading`
 prop while fetching & filtering the new data. The loading state will display a
 static amount of `Glimmer` components. Then updating `loading` once the new data
-has been fetched and the `Combobox.Option`s have been replaced with the new
+has been fetched and the `FilterPicker.Option`s have been replaced with the new
 ones.
 
 Note that the component does not cache the initial options when using
@@ -224,8 +230,8 @@ term, the initial options would need to be restored manually.
 
 ## Testing
 
-When using Jest to test Combobox implementations, you will need to include this
-mock in your test setup:
+When using Jest to test FilterPicker implementations, you will need to include
+this mock in your test setup:
 
 ```js
 const scrollIntoViewMock = jest.fn();
@@ -234,49 +240,49 @@ window.HTMLElement.prototype.scrollIntoView = scrollIntoViewMock;
 
 ## Developer notes
 
-* The Combobox confines tabbing to within itself while it's open using
+* The FilterPicker confines tabbing to within itself while it's open using
   [useFocusTrap](/hooks/useFocusTrap)
-* Pressing `esc` will close the Combobox and return focus to the activator using
-  [useRefocusOnActivator](/hooks/useRefocusOnActivator)
+* Pressing `esc` will close the FilterPicker and return focus to the activator
+  using [useRefocusOnActivator](/hooks/useRefocusOnActivator)
 
 
 ## Props
 
 ### Web
 
-#### Combobox
+#### FilterPicker
 
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
-| `onSelect` | `(selection: ComboboxOptionProps[]) => void` | Yes | — | Callback function invoked upon the selection of an option. Provides the selected option(s) as an argument. |
-| `selected` | `ComboboxOptionProps[]` | Yes | — | The selected options of the Combobox. |
+| `onSelect` | `(selection: FilterPickerOptionProps[]) => void` | Yes | — | Callback function invoked upon the selection of an option. Provides the selected option(s) as an argument. |
+| `selected` | `FilterPickerOptionProps[]` | Yes | — | The selected options of the FilterPicker. |
 | `defaultActivatorRef` | `Ref<HTMLButtonElement>` | No | — | A ref to the default activator button element. |
 | `label` | `string` | No | — | The Chip heading for the trigger |
-| `loading` | `boolean` | No | — | Should the Combobox display the loading state. |
-| `multiSelect` | `boolean` | No | `false` | When `true`, `Combobox` will allow for multiple selections |
+| `loading` | `boolean` | No | — | Should the FilterPicker display the loading state. |
+| `multiSelect` | `boolean` | No | `false` | When `true`, `FilterPicker` will allow for multiple selections |
 | `onClear` | `() => void` | No | — | Callback function invoked upon the clearing of all options. This is only available when `multiSelect` is `true`. |
-| `onClose` | `() => void` | No | — | Callback function invoked upon the Combobox menu closing. |
+| `onClose` | `() => void` | No | — | Callback function invoked upon the FilterPicker menu closing. |
 | `onLoadMore` | `() => void` | No | — | Callback to load more options, this is called when the user scrolls to the bottom of the list. |
-| `onSearch` | `(searchValue: string) => void` | No | — | Debounced callback function invoked on Combobox search input change. Receives the current search value as an argument. |
+| `onSearch` | `(searchValue: string) => void` | No | — | Debounced callback function invoked on FilterPicker search input change. Receives the current search value as an argu... |
 | `onSearchDebounce` | `number` | No | — | The amount of time in ms to debounce the onSearch callback. Defaults to 300ms. |
-| `onSelectAll` | `(selection: ComboboxOptionProps[]) => void` | No | — | Callback function invoked upon the selection of all options. Provides the selected option(s) as an argument. This is ... |
+| `onSelectAll` | `(selection: FilterPickerOptionProps[]) => void` | No | — | Callback function invoked upon the selection of all options. Provides the selected option(s) as an argument. This is ... |
 | `subjectNoun` | `string` | No | — | The encapsulating noun for the content of the combobox. Used in the empty state, and search placeholder. Should be pl... |
 
-#### Combobox.Action
+#### FilterPicker.Action
 
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
-| `label` | `string | ((options: ComboboxActionCallbackOptions) => string)` | Yes | — | The label text of the action. |
-| `onClick` | `(event: MouseEvent<HTMLButtonElement, MouseEvent>, options: ComboboxActionCallbackOptions) => void` | Yes | — | The function to call when the action is clicked. |
-| `keepOpenOnClick` | `boolean` | No | `false` | Keeps the Combobox open when the action is clicked. |
-| `visible` | `boolean | ((options: ComboboxActionCallbackOptions) => boolean)` | No | — | Determine if the action is visible for a given item. |
+| `label` | `string | ((options: FilterPickerActionCallbackOptions) => string)` | Yes | — | The label text of the action. |
+| `onClick` | `(event: MouseEvent<HTMLButtonElement, MouseEvent>, options: FilterPickerActionCallbackOptions) => void` | Yes | — | The function to call when the action is clicked. |
+| `keepOpenOnClick` | `boolean` | No | `false` | Keeps the FilterPicker open when the action is clicked. |
+| `visible` | `boolean | ((options: FilterPickerActionCallbackOptions) => boolean)` | No | — | Determine if the action is visible for a given item. |
 
-#### Combobox.Option
+#### FilterPicker.Option
 
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
 | `id` | `number | string` | Yes | — | A unique identifier for the option. |
-| `label` | `string` | Yes | — | The value to be visually displayed in the Combobox options list. |
-| `customRender` | `(option: Pick<ComboboxOptionProps, "prefix" | "label" | "id"> & { isSelected: boolean; defaultContent: ReactElement<unknown, string | JSXElementConstructor<any>>; }) => ReactNode` | No | — | Advanced: A custom render prop to completely control how this option is rendered. The function receives the option's ... |
-| `onClick` | `(option: ComboboxOptionProps) => void` | No | — | Callback function invoked when the option is clicked. |
+| `label` | `string` | Yes | — | The value to be visually displayed in the FilterPicker options list. |
+| `customRender` | `(option: Pick<FilterPickerOptionProps, "prefix" | "label" | "id"> & { isSelected: boolean; defaultContent: ReactElement<unknown, string | JSXElementConstructor<any>>; }) => ReactNode` | No | — | Advanced: A custom render prop to completely control how this option is rendered. The function receives the option's ... |
+| `onClick` | `(option: FilterPickerOptionProps) => void` | No | — | Callback function invoked when the option is clicked. |
 | `prefix` | `ReactNode` | No | — | An optional component to be displayed before the label. |

package/dist/docs/Menu/Menu.md

@@ -218,7 +218,7 @@ Minimum menu item height:
 * To allow the user to choose a value from a predefined list within a form, use
   a [Select](../Select/Select.md)
 * To allow the user to search and filter through a list of options, use a
-  [Combobox](../Combobox/Combobox.md)
+  [FilterPicker](../FilterPicker/FilterPicker.md)
 
 
 ## Composable Version

package/dist/docs/MultiSelect/MultiSelect.md

@@ -2,7 +2,7 @@
 
 > **WARNING:** This component has been deprecated and no longer supported. Instead, please
 > use [Autocomplete](../Autocomplete/Autocomplete.md) with the "mutliple" prop, or
-> [Combobox](../Combobox/Combobox.md)
+> [FilterPicker](../FilterPicker/FilterPicker.md)
 
 The MultiSelect component gives our users the possibility to select multiple
 options from a menu.

package/dist/docs/Tabs/Tabs.md

@@ -44,8 +44,8 @@ Tabs have known accessibility concerns, including:
 ## Developer notes
 
 We discussed the possibility of sharing arrow key navigation logic between the
-SegmentedControl and Combobox components due to their similarities. However, the
-SegmentedControl does not have specific arrow key logic because arrow key
+SegmentedControl and FilterPicker components due to their similarities. However,
+the SegmentedControl does not have specific arrow key logic because arrow key
 navigation is implicitly set through the SegmentedControl radio button
 structure. The options are a type of `radio` and part of a group (`name`
 attribute) which inherently supports keyboard navigation.

package/dist/docs/index.md

@@ -15,7 +15,6 @@
 [choosing-components](./choosing-components/choosing-components.md)
 [Cluster](./Cluster/Cluster.md)
 [Colors](./Colors/Colors.md)
-[Combobox](./Combobox/Combobox.md)
 [ConfirmationModal](./ConfirmationModal/ConfirmationModal.md)
 [Container](./Container/Container.md)
 [Content](./Content/Content.md)
@@ -38,6 +37,7 @@
 [empty-states](./empty-states/empty-states.md)
 [errors](./errors/errors.md)
 [FeatureSwitch](./FeatureSwitch/FeatureSwitch.md)
+[FilterPicker](./FilterPicker/FilterPicker.md)
 [Flex](./Flex/Flex.md)
 [FormatFile](./FormatFile/FormatFile.md)
 [FormatRelativeDateTime](./FormatRelativeDateTime/FormatRelativeDateTime.md)

package/dist/docs/usage-guidelines/usage-guidelines.md

@@ -17,10 +17,10 @@ deprecated.
 
 ## Deprecated components — do not use
 
-| Deprecated            | Replacement                                        | Notes                                    |
-| --------------------- | -------------------------------------------------- | ---------------------------------------- |
-| `MultiSelect`         | `Autocomplete` with `multiple` prop, or `Combobox` | Fully deprecated, no longer supported.   |
-| `Chips` (dismissible) | `Autocomplete` with `multiple` prop                | Dismissible Chips variant is deprecated. |
+| Deprecated            | Replacement                                            | Notes                                    |
+| --------------------- | ------------------------------------------------------ | ---------------------------------------- |
+| `MultiSelect`         | `Autocomplete` with `multiple` prop, or `FilterPicker` | Fully deprecated, no longer supported.   |
+| `Chips` (dismissible) | `Autocomplete` with `multiple` prop                    | Dismissible Chips variant is deprecated. |
 
 ### Deprecated props on still-supported components
 
@@ -77,7 +77,7 @@ parent reads its compound children to wire up state, accessibility, and styling.
 | `Modal` v2              | `Modal.Provider`, `Modal.Activator`, `Modal.Content`, `Modal.Header`, `Modal.Actions`                                                                                                                                                                                                        | Wrap with `Modal.Provider`. `Modal.Header` and `Modal.Actions` must be **direct children** of `Modal.Content` for sticky behavior to work. Use `Modal.Activator` to control focus return when the trigger element unmounts.                                                                                                  |
 | `Banner`                | `Banner.Provider`, `Banner.Content`, `Banner.Icon`, `Banner.DismissButton`, `Banner.Action`                                                                                                                                                                                                  | Either the simple `<Banner type="...">children</Banner>` form, or the Provider form: `Banner.Provider` > `Banner.Content` (+ optional `Banner.Icon` / `Banner.Action` / `Banner.DismissButton`).                                                                                                                             |
 | `Card`                  | `Card.Header`, `Card.Body`                                                                                                                                                                                                                                                                   | `Card` > `Card.Header` + `Card.Body`. The legacy `header` string/element prop still works for simple cases. Use composition for any header that needs richer markup.                                                                                                                                                         |
-| `Combobox`              | `Combobox.Activator`, `Combobox.Option`, `Combobox.Action`                                                                                                                                                                                                                                   | `Combobox` > optional `Combobox.Activator`, one or more `Combobox.Option`, optional `Combobox.Action`. Omitting `Combobox.Activator` renders the default activator.                                                                                                                                                          |
+| `FilterPicker`          | `FilterPicker.Activator`, `FilterPicker.Option`, `FilterPicker.Action`                                                                                                                                                                                                                       | `FilterPicker` > optional `FilterPicker.Activator`, one or more `FilterPicker.Option`, optional `FilterPicker.Action`. Omitting `FilterPicker.Activator` renders the default activator.                                                                                                                                      |
 | `DataTable`             | `DataTable.Container`, `DataTable.Table`, `DataTable.Header`, `DataTable.HeaderCell`, `DataTable.SortableHeader`, `DataTable.Body`, `DataTable.Row`, `DataTable.Cell`, `DataTable.RowActions`, `DataTable.Actions`, `DataTable.Footer`, `DataTable.Pagination`, `DataTable.PaginationButton` | `DataTable.Footer` is a sibling of `DataTable.Body`, not a child. Place pagination outside the table (not inside the footer). For `layout="fixed"`, pass explicit widths via `style={{ width: "..." }}` on each `HeaderCell`.                                                                                                |
 | `Menu` (web composable) | `Menu.Trigger`, `Menu.Content`, `Menu.Section`, `Menu.Header`, `Menu.HeaderLabel`, `Menu.Item`, `Menu.ItemIcon`, `Menu.ItemLabel`, `Menu.Separator`                                                                                                                                          | `Menu` > `Menu.Trigger` + `Menu.Content` containing `Menu.Item`s (optionally grouped in `Menu.Section`s). Each `Menu.Item` must include `textValue` for type-ahead and screen readers.                                                                                                                                       |
 | `Page`                  | `Page.Header`, `Page.HeaderContent`, `Page.TitleBar`, `Page.Title`, `Page.Subtitle`, `Page.Intro`, `Page.Actions`, `Page.ActionPrimary`, `Page.ActionSecondary`, `Page.ActionMenu`, `Page.PrimaryButton`, `Page.SecondaryButton`, `Page.Menu`, `Page.Body`                                   | Composable `Page` API: `Page` > `Page.Header` (containing `Page.HeaderContent` with `Page.TitleBar` > `Page.Title` / `Page.Subtitle`, and `Page.Actions` with `Page.ActionPrimary` / `Page.ActionSecondary` / `Page.ActionMenu`) + `Page.Body`. The legacy props-based API (`title`, `subtitle`, `intro`, etc.) still works. |

package/dist/index.cjs

@@ -20,8 +20,8 @@ var ChipDismissible = require('./ChipDismissible-cjs.js');
 require('react');
 var Icon = require('./Icon-cjs.js');
 var Chips = require('./Chips-cjs.js');
-var Combobox = require('./Combobox-cjs.js');
-var ComboboxProvider = require('./ComboboxProvider-cjs.js');
+var FilterPicker = require('./FilterPicker-cjs.js');
+var FilterPickerProvider = require('./FilterPickerProvider-cjs.js');
 var ConfirmationModal = require('./ConfirmationModal-cjs.js');
 var Content = require('./Content-cjs.js');
 var ContentBlock = require('./ContentBlock-cjs.js');
@@ -122,18 +122,18 @@ require('./isSymbol-cjs.js');
 require('./_getTag-cjs.js');
 require('./_baseEach-cjs.js');
 require('./debounce-cjs.js');
-require('./ComboboxContent-cjs.js');
-require('./ComboboxContentSearch-cjs.js');
-require('./ComboboxContentList-cjs.js');
+require('./FilterPickerContent-cjs.js');
+require('./FilterPickerContentSearch-cjs.js');
+require('./FilterPickerContentList-cjs.js');
 require('framer-motion');
-require('./ComboboxOption-cjs.js');
-require('./ComboboxLoadMore-cjs.js');
-require('./ComboboxContentHeader-cjs.js');
+require('./FilterPickerOption-cjs.js');
+require('./FilterPickerLoadMore-cjs.js');
+require('./FilterPickerContentHeader-cjs.js');
 require('./constants-cjs.js');
-require('./ComboboxAction-cjs.js');
-require('./ComboboxTrigger-cjs.js');
+require('./FilterPickerAction-cjs.js');
+require('./FilterPickerTrigger-cjs.js');
 require('./noop-cjs.js');
-require('./ComboboxActivator-cjs.js');
+require('./FilterPickerActivator-cjs.js');
 require('./index-cjs.js');
 require('./DataList.module-cjs.js');
 require('./DataListTotalCount-cjs.js');
@@ -227,8 +227,8 @@ exports.ChipDismissible = ChipDismissible.ChipDismissible;
 exports.ChipSelectable = ChipDismissible.ChipSelectable;
 exports.Icon = Icon.Icon;
 exports.Chips = Chips.Chips;
-exports.Combobox = Combobox.Combobox;
-exports.ComboboxContextProvider = ComboboxProvider.ComboboxContextProvider;
+exports.FilterPicker = FilterPicker.FilterPicker;
+exports.FilterPickerContextProvider = FilterPickerProvider.FilterPickerContextProvider;
 exports.ConfirmationModal = ConfirmationModal.ConfirmationModal;
 exports.Content = Content.Content;
 exports.ContentBlock = ContentBlock.ContentBlock;

package/dist/index.d.mts

@@ -14,7 +14,7 @@ export * from "./Cover";
 export * from "./Checkbox";
 export * from "./Chip";
 export { Chips } from "./Chips";
-export * from "./Combobox";
+export * from "./FilterPicker";
 export * from "./ConfirmationModal";
 export * from "./Content";
 export * from "./ContentBlock";

package/dist/index.d.ts

@@ -14,7 +14,7 @@ export * from "./Cover";
 export * from "./Checkbox";
 export * from "./Chip";
 export { Chips } from "./Chips";
-export * from "./Combobox";
+export * from "./FilterPicker";
 export * from "./ConfirmationModal";
 export * from "./Content";
 export * from "./ContentBlock";

package/dist/index.mjs

@@ -18,8 +18,8 @@ export { a as ChipDismissible, C as ChipSelectable } from './ChipDismissible-es.
 import 'react';
 export { I as Icon } from './Icon-es.js';
 export { C as Chips } from './Chips-es.js';
-export { C as Combobox } from './Combobox-es.js';
-export { C as ComboboxContextProvider } from './ComboboxProvider-es.js';
+export { F as FilterPicker } from './FilterPicker-es.js';
+export { F as FilterPickerContextProvider } from './FilterPickerProvider-es.js';
 export { C as ConfirmationModal } from './ConfirmationModal-es.js';
 export { C as Content } from './Content-es.js';
 export { C as ContentBlock } from './ContentBlock-es.js';
@@ -120,18 +120,18 @@ import './isSymbol-es.js';
 import './_getTag-es.js';
 import './_baseEach-es.js';
 import './debounce-es.js';
-import './ComboboxContent-es.js';
-import './ComboboxContentSearch-es.js';
-import './ComboboxContentList-es.js';
+import './FilterPickerContent-es.js';
+import './FilterPickerContentSearch-es.js';
+import './FilterPickerContentList-es.js';
 import 'framer-motion';
-import './ComboboxOption-es.js';
-import './ComboboxLoadMore-es.js';
-import './ComboboxContentHeader-es.js';
+import './FilterPickerOption-es.js';
+import './FilterPickerLoadMore-es.js';
+import './FilterPickerContentHeader-es.js';
 import './constants-es.js';
-import './ComboboxAction-es.js';
-import './ComboboxTrigger-es.js';
+import './FilterPickerAction-es.js';
+import './FilterPickerTrigger-es.js';
 import './noop-es.js';
-import './ComboboxActivator-es.js';
+import './FilterPickerActivator-es.js';
 import './index-es.js';
 import './DataList.module-es.js';
 import './DataListTotalCount-es.js';