@jobber/components 8.14.0 → 8.14.1

package/dist/{Combobox/components/ComboboxOption → FilterPicker/components/FilterPickerOption}/index.mjs

@@ -1,8 +1,8 @@
-export { C as ComboboxOption } from '../../../ComboboxOption-es.js';
+export { F as FilterPickerOption } from '../../../FilterPickerOption-es.js';
 import '../../../tslib.es6-es.js';
 import 'react';
 import 'classnames';
 import '../../../Icon-es.js';
 import '@jobber/design';
 import '../../../Flex-es.js';
-import '../../../ComboboxProvider-es.js';
+import '../../../FilterPickerProvider-es.js';

package/dist/FilterPicker/components/FilterPickerTrigger/FilterPickerTrigger.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import type { FilterPickerTriggerProps } from "../../FilterPicker.types";
+export declare function FilterPickerTrigger({ label, selected, activatorRef, }: FilterPickerTriggerProps): React.JSX.Element;

package/dist/{Combobox/components/ComboboxTrigger → FilterPicker/components/FilterPickerTrigger}/index.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var ComboboxTrigger = require('../../../ComboboxTrigger-cjs.js');
+var FilterPickerTrigger = require('../../../FilterPickerTrigger-cjs.js');
 require('react');
 require('../../../Chip-cjs.js');
 require('../../../tslib.es6-cjs.js');
@@ -20,8 +20,8 @@ require('react/jsx-runtime');
 require('react-dom');
 require('../../../floating-ui.react-dom-cjs.js');
 require('framer-motion');
-require('../../../ComboboxProvider-cjs.js');
+require('../../../FilterPickerProvider-cjs.js');
 
 
 
-exports.ComboboxTrigger = ComboboxTrigger.ComboboxTrigger;
+exports.FilterPickerTrigger = FilterPickerTrigger.FilterPickerTrigger;

package/dist/FilterPicker/components/FilterPickerTrigger/index.d.ts

@@ -0,0 +1 @@
+export { FilterPickerTrigger } from "./FilterPickerTrigger";

package/dist/{Combobox/components/ComboboxTrigger → FilterPicker/components/FilterPickerTrigger}/index.mjs

@@ -1,4 +1,4 @@
-export { C as ComboboxTrigger } from '../../../ComboboxTrigger-es.js';
+export { F as FilterPickerTrigger } from '../../../FilterPickerTrigger-es.js';
 import 'react';
 import '../../../Chip-es.js';
 import '../../../tslib.es6-es.js';
@@ -18,4 +18,4 @@ import 'react/jsx-runtime';
 import 'react-dom';
 import '../../../floating-ui.react-dom-es.js';
 import 'framer-motion';
-import '../../../ComboboxProvider-es.js';
+import '../../../FilterPickerProvider-es.js';

package/dist/FilterPicker/constants.d.ts

@@ -0,0 +1 @@
+export declare const FILTER_PICKER_MENU_ID = "ATL-FilterPicker-Content";

package/dist/FilterPicker/hooks/useFilterPicker.d.ts

@@ -0,0 +1,17 @@
+import type { Dispatch, MutableRefObject } from "react";
+import type React from "react";
+import type { UseMakeFilterPickerHandlersReturn } from "./useMakeFilterPickerHandlers";
+import { type FilterPickerOption } from "../FilterPicker.types";
+type UseFilterPickerReturn = {
+    wrapperRef: React.RefObject<HTMLDivElement | null>;
+    searchValue: string;
+    setSearchValue: Dispatch<React.SetStateAction<string>>;
+    open: boolean;
+    selectedOptions: FilterPickerOption[];
+    selectedStateSetter: (selection: FilterPickerOption[]) => void;
+    shouldScroll: MutableRefObject<boolean>;
+    internalFilteredOptions: FilterPickerOption[];
+    handleSearchChange: (value: string) => void;
+} & UseMakeFilterPickerHandlersReturn;
+export declare function useFilterPicker(selected: FilterPickerOption[], onSelect: (selection: FilterPickerOption[]) => void, options: FilterPickerOption[], onClose?: () => void, multiSelect?: boolean, onSearch?: (searchValue: string) => void, debounceTime?: number): UseFilterPickerReturn;
+export {};

package/dist/FilterPicker/hooks/useFilterPickerAccessibility.d.ts

@@ -0,0 +1,9 @@
+import type { UseInteractionsReturn } from "@floating-ui/react";
+import { type FilterPickerOption } from "../FilterPicker.types";
+export declare function useFilterPickerAccessibility(selectionCallback: (selection: FilterPickerOption) => void, filteredOptions: FilterPickerOption[], optionsListRef: React.RefObject<HTMLUListElement | null>, open: boolean, wrapperRef: React.RefObject<HTMLDivElement | null>): {
+    floatingRef: React.RefObject<HTMLDivElement | null>;
+    floatingStyles: React.CSSProperties;
+    floatingProps: ReturnType<UseInteractionsReturn["getFloatingProps"]>;
+    nodeId?: string;
+    parentNodeId: string | null;
+};

package/dist/FilterPicker/hooks/useFilterPickerActivatorAccessibility.d.ts

@@ -0,0 +1,2 @@
+import type { FilterPickerActivatorAccessibility } from "../FilterPicker.types";
+export declare function useFilterPickerActivatorAccessibility(): FilterPickerActivatorAccessibility;

package/dist/FilterPicker/hooks/useFilterPickerContent.d.ts

@@ -0,0 +1,9 @@
+import type { RefObject } from "react";
+import { type FilterPickerOption } from "../FilterPicker.types";
+interface useFilterPickerContent {
+    optionsListRef: RefObject<HTMLUListElement | null>;
+    onClear?: () => void;
+    onSelectAll?: (selection: FilterPickerOption[]) => void;
+}
+export declare function useFilterPickerContent(open: boolean, selected: FilterPickerOption[]): useFilterPickerContent;
+export {};

package/dist/FilterPicker/hooks/useFilterPickerValidation.d.ts

@@ -0,0 +1,12 @@
+import type { ReactElement } from "react";
+import { type FilterPickerActionProps, type FilterPickerActivatorProps, type FilterPickerOptionProps, type FilterPickerProps } from "../FilterPicker.types";
+export declare const FILTER_PICKER_ACTIVATOR_COUNT_ERROR_MESSAGE = "FilterPicker must have exactly one Activator element";
+export declare function useFilterPickerValidation(children?: FilterPickerProps["children"]): {
+    triggerElement?: ReactElement<FilterPickerActivatorProps>;
+    optionElements?: ReactElement<FilterPickerOptionProps>[];
+    actionElements?: ReactElement<FilterPickerActionProps>[];
+};
+/**
+ * Return all instances child component that matches the `type` provided
+ */
+export declare function getCompoundComponents<T>(type: ReactElement<T>["type"], children?: FilterPickerProps["children"]): ReactElement<T>[];

package/dist/FilterPicker/hooks/useMakeFilterPickerHandlers.d.ts

@@ -0,0 +1,8 @@
+import type React from "react";
+import { type FilterPickerOption } from "../FilterPicker.types";
+export interface UseMakeFilterPickerHandlersReturn {
+    handleClose: () => void;
+    handleSelection: (selection: FilterPickerOption) => void;
+    handleOpen: () => void;
+}
+export declare function useMakeFilterPickerHandlers(setOpen: (open: boolean) => void, open: boolean, setSearchValue: (searchValue: string) => void, selectedOptions: FilterPickerOption[], shouldScroll: React.RefObject<boolean>, selectedStateSetter: (selected: FilterPickerOption[]) => void, multiSelect?: boolean, onClose?: () => void, onSearch?: (searchValue: string) => void): UseMakeFilterPickerHandlersReturn;

package/dist/{Combobox → FilterPicker}/index.cjs

@@ -1,9 +1,9 @@
 'use strict';
 
-var Combobox = require('../Combobox-cjs.js');
-var ComboboxProvider = require('../ComboboxProvider-cjs.js');
+var FilterPicker = require('../FilterPicker-cjs.js');
+var FilterPickerProvider = require('../FilterPickerProvider-cjs.js');
 require('react');
-require('../ComboboxContent-cjs.js');
+require('../FilterPickerContent-cjs.js');
 require('classnames');
 require('../floating-ui.react-cjs.js');
 require('../floating-ui.utils.dom-cjs.js');
@@ -11,10 +11,10 @@ require('../index.esm-cjs.js');
 require('react/jsx-runtime');
 require('react-dom');
 require('../floating-ui.react-dom-cjs.js');
-require('../ComboboxContentSearch-cjs.js');
+require('../FilterPickerContentSearch-cjs.js');
 require('../Icon-cjs.js');
 require('@jobber/design');
-require('../ComboboxContentList-cjs.js');
+require('../FilterPickerContentList-cjs.js');
 require('framer-motion');
 require('../Text-cjs.js');
 require('../Typography-cjs.js');
@@ -32,25 +32,25 @@ require('../_baseFor-cjs.js');
 require('../keysIn-cjs.js');
 require('../_isIterateeCall-cjs.js');
 require('../_setToString-cjs.js');
-require('../ComboboxOption-cjs.js');
+require('../FilterPickerOption-cjs.js');
 require('../Flex-cjs.js');
-require('../ComboboxLoadMore-cjs.js');
+require('../FilterPickerLoadMore-cjs.js');
 require('@jobber/hooks');
-require('../ComboboxContentHeader-cjs.js');
+require('../FilterPickerContentHeader-cjs.js');
 require('../Button-cjs.js');
 require('react-router-dom');
 require('../constants-cjs.js');
-require('../ComboboxAction-cjs.js');
-require('../ComboboxTrigger-cjs.js');
+require('../FilterPickerAction-cjs.js');
+require('../FilterPickerTrigger-cjs.js');
 require('../Chip-cjs.js');
 require('../Avatar-cjs.js');
 require('color');
 require('../useChildComponent-cjs.js');
 require('../Tooltip-cjs.js');
 require('../noop-cjs.js');
-require('../ComboboxActivator-cjs.js');
+require('../FilterPickerActivator-cjs.js');
 
 
 
-exports.Combobox = Combobox.Combobox;
-exports.ComboboxContextProvider = ComboboxProvider.ComboboxContextProvider;
+exports.FilterPicker = FilterPicker.FilterPicker;
+exports.FilterPickerContextProvider = FilterPickerProvider.FilterPickerContextProvider;

package/dist/FilterPicker/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./FilterPicker";
+export { FilterPickerContextProvider } from "./FilterPickerProvider";
+export { type FilterPickerCustomActivatorProps, type FilterPickerOption, } from "./FilterPicker.types";

package/dist/{Combobox → FilterPicker}/index.mjs

@@ -1,7 +1,7 @@
-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';
 import 'react';
-import '../ComboboxContent-es.js';
+import '../FilterPickerContent-es.js';
 import 'classnames';
 import '../floating-ui.react-es.js';
 import '../floating-ui.utils.dom-es.js';
@@ -9,10 +9,10 @@ import '../index.esm-es.js';
 import 'react/jsx-runtime';
 import 'react-dom';
 import '../floating-ui.react-dom-es.js';
-import '../ComboboxContentSearch-es.js';
+import '../FilterPickerContentSearch-es.js';
 import '../Icon-es.js';
 import '@jobber/design';
-import '../ComboboxContentList-es.js';
+import '../FilterPickerContentList-es.js';
 import 'framer-motion';
 import '../Text-es.js';
 import '../Typography-es.js';
@@ -30,20 +30,20 @@ import '../_baseFor-es.js';
 import '../keysIn-es.js';
 import '../_isIterateeCall-es.js';
 import '../_setToString-es.js';
-import '../ComboboxOption-es.js';
+import '../FilterPickerOption-es.js';
 import '../Flex-es.js';
-import '../ComboboxLoadMore-es.js';
+import '../FilterPickerLoadMore-es.js';
 import '@jobber/hooks';
-import '../ComboboxContentHeader-es.js';
+import '../FilterPickerContentHeader-es.js';
 import '../Button-es.js';
 import 'react-router-dom';
 import '../constants-es.js';
-import '../ComboboxAction-es.js';
-import '../ComboboxTrigger-es.js';
+import '../FilterPickerAction-es.js';
+import '../FilterPickerTrigger-es.js';
 import '../Chip-es.js';
 import '../Avatar-es.js';
 import 'color';
 import '../useChildComponent-es.js';
 import '../Tooltip-es.js';
 import '../noop-es.js';
-import '../ComboboxActivator-es.js';
+import '../FilterPickerActivator-es.js';

package/dist/{Combobox-cjs.js → FilterPicker-cjs.js}

@@ -1,18 +1,18 @@
 'use strict';
 
 var React = require('react');
-var ComboboxContent = require('./ComboboxContent-cjs.js');
-var ComboboxAction = require('./ComboboxAction-cjs.js');
-var ComboboxProvider = require('./ComboboxProvider-cjs.js');
-var ComboboxTrigger = require('./ComboboxTrigger-cjs.js');
-var ComboboxOption = require('./ComboboxOption-cjs.js');
+var FilterPickerContent = require('./FilterPickerContent-cjs.js');
+var FilterPickerAction = require('./FilterPickerAction-cjs.js');
+var FilterPickerProvider = require('./FilterPickerProvider-cjs.js');
+var FilterPickerTrigger = require('./FilterPickerTrigger-cjs.js');
+var FilterPickerOption = require('./FilterPickerOption-cjs.js');
 var noop = require('./noop-cjs.js');
 var jobberHooks = require('@jobber/hooks');
-var ComboboxActivator = require('./ComboboxActivator-cjs.js');
+var FilterPickerActivator = require('./FilterPickerActivator-cjs.js');
 
-var styles = {"overlay":"xxU2WqkpXZU-","wrapper":"W-9SMjhEMpI-","spinning":"mqMvu8yxz2w-"};
+var styles = {"overlay":"pWccl-Pw3hY-","wrapper":"CGh3PQqBZ1c-","spinning":"Cf-fmDM7clM-"};
 
-function useMakeComboboxHandlers(setOpen, open, setSearchValue, selectedOptions, shouldScroll, selectedStateSetter, multiSelect, onClose, onSearch) {
+function useMakeFilterPickerHandlers(setOpen, open, setSearchValue, selectedOptions, shouldScroll, selectedStateSetter, multiSelect, onClose, onSearch) {
     const handleClose = React.useCallback(() => {
         setOpen(false);
         setSearchValue("");
@@ -52,13 +52,13 @@ function handleMultiSelect(selectCallback, selected, selection) {
     }
 }
 
-function useCombobox(selected, onSelect, options, onClose, multiSelect, onSearch, debounceTime = 300) {
+function useFilterPicker(selected, onSelect, options, onClose, multiSelect, onSearch, debounceTime = 300) {
     const wrapperRef = React.useRef(null);
     const shouldScroll = React.useRef(false);
     const [open, setOpen] = React.useState(false);
     const [searchValue, setSearchValue] = React.useState("");
     const searchCallback = jobberHooks.useDebounce((value) => onSearch === null || onSearch === void 0 ? void 0 : onSearch(value), debounceTime);
-    const { handleClose, handleSelection, handleOpen } = useMakeComboboxHandlers(setOpen, open, setSearchValue, selected, shouldScroll, onSelect, multiSelect, onClose, onSearch);
+    const { handleClose, handleSelection, handleOpen } = useMakeFilterPickerHandlers(setOpen, open, setSearchValue, selected, shouldScroll, onSelect, multiSelect, onClose, onSearch);
     const internalFilteredOptions = options.filter(option => option.label.toLowerCase().includes(searchValue.toLowerCase()));
     return {
         wrapperRef,
@@ -76,10 +76,10 @@ function useCombobox(selected, onSelect, options, onClose, multiSelect, onSearch
     };
 }
 
-function useComboboxValidation(children) {
-    const optionElements = getCompoundComponents(ComboboxOption.ComboboxOption, children);
-    const actionElements = getCompoundComponents(ComboboxAction.ComboboxAction, children);
-    const activatorElements = getCompoundComponents(ComboboxActivator.ComboboxActivator, children);
+function useFilterPickerValidation(children) {
+    const optionElements = getCompoundComponents(FilterPickerOption.FilterPickerOption, children);
+    const actionElements = getCompoundComponents(FilterPickerAction.FilterPickerAction, children);
+    const activatorElements = getCompoundComponents(FilterPickerActivator.FilterPickerActivator, children);
     return {
         optionElements,
         triggerElement: activatorElements[0],
@@ -95,18 +95,18 @@ function getCompoundComponents(type, children) {
     return elements;
 }
 
-function Combobox(props) {
-    const { optionElements, triggerElement, actionElements } = useComboboxValidation(props.children);
+function FilterPicker(props) {
+    const { optionElements, triggerElement, actionElements } = useFilterPickerValidation(props.children);
     const options = React.useMemo(() => (optionElements === null || optionElements === void 0 ? void 0 : optionElements.map(option => (Object.assign({}, option.props)))) || [], [optionElements]);
-    const { selectedOptions, selectedStateSetter, shouldScroll, wrapperRef, searchValue, setSearchValue, open, handleClose, handleSelection, handleOpen, internalFilteredOptions, handleSearchChange, } = useCombobox(props.selected, props.onSelect, options, props.onClose, props.multiSelect, props.onSearch, props.onSearchDebounce);
-    return (React.createElement(ComboboxProvider.ComboboxContextProvider, { selected: selectedOptions, selectionHandler: handleSelection, open: open, handleOpen: handleOpen, handleClose: handleClose, shouldScroll: shouldScroll, searchValue: searchValue, label: props.label, onClear: props.onClear, onSelectAll: props.onSelectAll },
+    const { selectedOptions, selectedStateSetter, shouldScroll, wrapperRef, searchValue, setSearchValue, open, handleClose, handleSelection, handleOpen, internalFilteredOptions, handleSearchChange, } = useFilterPicker(props.selected, props.onSelect, options, props.onClose, props.multiSelect, props.onSearch, props.onSearchDebounce);
+    return (React.createElement(FilterPickerProvider.FilterPickerContextProvider, { selected: selectedOptions, selectionHandler: handleSelection, open: open, handleOpen: handleOpen, handleClose: handleClose, shouldScroll: shouldScroll, searchValue: searchValue, label: props.label, onClear: props.onClear, onSelectAll: props.onSelectAll },
         React.createElement("div", { ref: wrapperRef, className: styles.wrapper },
-            open && (React.createElement("div", { className: styles.overlay, onClick: handleClose, "data-testid": "ATL-Combobox-Overlay" })),
-            triggerElement || (React.createElement(ComboboxTrigger.ComboboxTrigger, { label: props.label, selected: props.selected, activatorRef: props.defaultActivatorRef })),
-            React.createElement(ComboboxContent.ComboboxContent, { multiselect: props.multiSelect, subjectNoun: props.subjectNoun, selected: selectedOptions, actionElements: actionElements, selectedStateSetter: selectedStateSetter, handleSelection: handleSelection, searchValue: searchValue, setSearchValue: setSearchValue, wrapperRef: wrapperRef, open: open, options: props.onSearch ? options : internalFilteredOptions, loading: props.loading, handleSearchChange: handleSearchChange, onLoadMore: props.onLoadMore }))));
+            open && (React.createElement("div", { className: styles.overlay, onClick: handleClose, "data-testid": "ATL-FilterPicker-Overlay" })),
+            triggerElement || (React.createElement(FilterPickerTrigger.FilterPickerTrigger, { label: props.label, selected: props.selected, activatorRef: props.defaultActivatorRef })),
+            React.createElement(FilterPickerContent.FilterPickerContent, { multiselect: props.multiSelect, subjectNoun: props.subjectNoun, selected: selectedOptions, actionElements: actionElements, selectedStateSetter: selectedStateSetter, handleSelection: handleSelection, searchValue: searchValue, setSearchValue: setSearchValue, wrapperRef: wrapperRef, open: open, options: props.onSearch ? options : internalFilteredOptions, loading: props.loading, handleSearchChange: handleSearchChange, onLoadMore: props.onLoadMore }))));
 }
-Combobox.Activator = ComboboxActivator.ComboboxActivator;
-Combobox.Action = ComboboxAction.ComboboxAction;
-Combobox.Option = ComboboxOption.ComboboxOption;
+FilterPicker.Activator = FilterPickerActivator.FilterPickerActivator;
+FilterPicker.Action = FilterPickerAction.FilterPickerAction;
+FilterPicker.Option = FilterPickerOption.FilterPickerOption;
 
-exports.Combobox = Combobox;
+exports.FilterPicker = FilterPicker;

package/dist/{Combobox-es.js → FilterPicker-es.js}

@@ -1,16 +1,16 @@
 import React__default, { useCallback, useRef, useState, Children, isValidElement, useMemo } from 'react';
-import { C as ComboboxContent } from './ComboboxContent-es.js';
-import { C as ComboboxAction } from './ComboboxAction-es.js';
-import { C as ComboboxContextProvider } from './ComboboxProvider-es.js';
-import { C as ComboboxTrigger } from './ComboboxTrigger-es.js';
-import { C as ComboboxOption } from './ComboboxOption-es.js';
+import { F as FilterPickerContent } from './FilterPickerContent-es.js';
+import { F as FilterPickerAction } from './FilterPickerAction-es.js';
+import { F as FilterPickerContextProvider } from './FilterPickerProvider-es.js';
+import { F as FilterPickerTrigger } from './FilterPickerTrigger-es.js';
+import { F as FilterPickerOption } from './FilterPickerOption-es.js';
 import { n as noop } from './noop-es.js';
 import { useDebounce } from '@jobber/hooks';
-import { C as ComboboxActivator } from './ComboboxActivator-es.js';
+import { F as FilterPickerActivator } from './FilterPickerActivator-es.js';
 
-var styles = {"overlay":"xxU2WqkpXZU-","wrapper":"W-9SMjhEMpI-","spinning":"mqMvu8yxz2w-"};
+var styles = {"overlay":"pWccl-Pw3hY-","wrapper":"CGh3PQqBZ1c-","spinning":"Cf-fmDM7clM-"};
 
-function useMakeComboboxHandlers(setOpen, open, setSearchValue, selectedOptions, shouldScroll, selectedStateSetter, multiSelect, onClose, onSearch) {
+function useMakeFilterPickerHandlers(setOpen, open, setSearchValue, selectedOptions, shouldScroll, selectedStateSetter, multiSelect, onClose, onSearch) {
     const handleClose = useCallback(() => {
         setOpen(false);
         setSearchValue("");
@@ -50,13 +50,13 @@ function handleMultiSelect(selectCallback, selected, selection) {
     }
 }
 
-function useCombobox(selected, onSelect, options, onClose, multiSelect, onSearch, debounceTime = 300) {
+function useFilterPicker(selected, onSelect, options, onClose, multiSelect, onSearch, debounceTime = 300) {
     const wrapperRef = useRef(null);
     const shouldScroll = useRef(false);
     const [open, setOpen] = useState(false);
     const [searchValue, setSearchValue] = useState("");
     const searchCallback = useDebounce((value) => onSearch === null || onSearch === void 0 ? void 0 : onSearch(value), debounceTime);
-    const { handleClose, handleSelection, handleOpen } = useMakeComboboxHandlers(setOpen, open, setSearchValue, selected, shouldScroll, onSelect, multiSelect, onClose, onSearch);
+    const { handleClose, handleSelection, handleOpen } = useMakeFilterPickerHandlers(setOpen, open, setSearchValue, selected, shouldScroll, onSelect, multiSelect, onClose, onSearch);
     const internalFilteredOptions = options.filter(option => option.label.toLowerCase().includes(searchValue.toLowerCase()));
     return {
         wrapperRef,
@@ -74,10 +74,10 @@ function useCombobox(selected, onSelect, options, onClose, multiSelect, onSearch
     };
 }
 
-function useComboboxValidation(children) {
-    const optionElements = getCompoundComponents(ComboboxOption, children);
-    const actionElements = getCompoundComponents(ComboboxAction, children);
-    const activatorElements = getCompoundComponents(ComboboxActivator, children);
+function useFilterPickerValidation(children) {
+    const optionElements = getCompoundComponents(FilterPickerOption, children);
+    const actionElements = getCompoundComponents(FilterPickerAction, children);
+    const activatorElements = getCompoundComponents(FilterPickerActivator, children);
     return {
         optionElements,
         triggerElement: activatorElements[0],
@@ -93,18 +93,18 @@ function getCompoundComponents(type, children) {
     return elements;
 }
 
-function Combobox(props) {
-    const { optionElements, triggerElement, actionElements } = useComboboxValidation(props.children);
+function FilterPicker(props) {
+    const { optionElements, triggerElement, actionElements } = useFilterPickerValidation(props.children);
     const options = useMemo(() => (optionElements === null || optionElements === void 0 ? void 0 : optionElements.map(option => (Object.assign({}, option.props)))) || [], [optionElements]);
-    const { selectedOptions, selectedStateSetter, shouldScroll, wrapperRef, searchValue, setSearchValue, open, handleClose, handleSelection, handleOpen, internalFilteredOptions, handleSearchChange, } = useCombobox(props.selected, props.onSelect, options, props.onClose, props.multiSelect, props.onSearch, props.onSearchDebounce);
-    return (React__default.createElement(ComboboxContextProvider, { selected: selectedOptions, selectionHandler: handleSelection, open: open, handleOpen: handleOpen, handleClose: handleClose, shouldScroll: shouldScroll, searchValue: searchValue, label: props.label, onClear: props.onClear, onSelectAll: props.onSelectAll },
+    const { selectedOptions, selectedStateSetter, shouldScroll, wrapperRef, searchValue, setSearchValue, open, handleClose, handleSelection, handleOpen, internalFilteredOptions, handleSearchChange, } = useFilterPicker(props.selected, props.onSelect, options, props.onClose, props.multiSelect, props.onSearch, props.onSearchDebounce);
+    return (React__default.createElement(FilterPickerContextProvider, { selected: selectedOptions, selectionHandler: handleSelection, open: open, handleOpen: handleOpen, handleClose: handleClose, shouldScroll: shouldScroll, searchValue: searchValue, label: props.label, onClear: props.onClear, onSelectAll: props.onSelectAll },
         React__default.createElement("div", { ref: wrapperRef, className: styles.wrapper },
-            open && (React__default.createElement("div", { className: styles.overlay, onClick: handleClose, "data-testid": "ATL-Combobox-Overlay" })),
-            triggerElement || (React__default.createElement(ComboboxTrigger, { label: props.label, selected: props.selected, activatorRef: props.defaultActivatorRef })),
-            React__default.createElement(ComboboxContent, { multiselect: props.multiSelect, subjectNoun: props.subjectNoun, selected: selectedOptions, actionElements: actionElements, selectedStateSetter: selectedStateSetter, handleSelection: handleSelection, searchValue: searchValue, setSearchValue: setSearchValue, wrapperRef: wrapperRef, open: open, options: props.onSearch ? options : internalFilteredOptions, loading: props.loading, handleSearchChange: handleSearchChange, onLoadMore: props.onLoadMore }))));
+            open && (React__default.createElement("div", { className: styles.overlay, onClick: handleClose, "data-testid": "ATL-FilterPicker-Overlay" })),
+            triggerElement || (React__default.createElement(FilterPickerTrigger, { label: props.label, selected: props.selected, activatorRef: props.defaultActivatorRef })),
+            React__default.createElement(FilterPickerContent, { multiselect: props.multiSelect, subjectNoun: props.subjectNoun, selected: selectedOptions, actionElements: actionElements, selectedStateSetter: selectedStateSetter, handleSelection: handleSelection, searchValue: searchValue, setSearchValue: setSearchValue, wrapperRef: wrapperRef, open: open, options: props.onSearch ? options : internalFilteredOptions, loading: props.loading, handleSearchChange: handleSearchChange, onLoadMore: props.onLoadMore }))));
 }
-Combobox.Activator = ComboboxActivator;
-Combobox.Action = ComboboxAction;
-Combobox.Option = ComboboxOption;
+FilterPicker.Activator = FilterPickerActivator;
+FilterPicker.Action = FilterPickerAction;
+FilterPicker.Option = FilterPickerOption;
 
-export { Combobox as C };
+export { FilterPicker as F };

package/dist/{ComboboxAction-cjs.js → FilterPickerAction-cjs.js}

@@ -2,12 +2,12 @@
 
 var React = require('react');
 var Typography = require('./Typography-cjs.js');
-var ComboboxProvider = require('./ComboboxProvider-cjs.js');
+var FilterPickerProvider = require('./FilterPickerProvider-cjs.js');
 
-var styles = {"actionContainer":"NWf8JR3TBoo-","actionButton":"PoMXFVYVY5A-","spinning":"lP2oDQm9j88-"};
+var styles = {"actionContainer":"wnyB0d1ZE70-","actionButton":"mljM3ouZmbM-","spinning":"uMfMpnitRs0-"};
 
-function ComboboxAction(props) {
-    const { searchValue, handleClose } = React.useContext(ComboboxProvider.ComboboxContext);
+function FilterPickerAction(props) {
+    const { searchValue, handleClose } = React.useContext(FilterPickerProvider.FilterPickerContext);
     if (props.visible !== undefined) {
         const isVisible = typeof props.visible === "function"
             ? props.visible({ searchValue })
@@ -29,4 +29,4 @@ function ComboboxAction(props) {
             React.createElement(Typography.Typography, { element: "span", size: "base", textColor: "interactive", fontWeight: "semiBold" }, computedLabel))));
 }
 
-exports.ComboboxAction = ComboboxAction;
+exports.FilterPickerAction = FilterPickerAction;

package/dist/{ComboboxAction-es.js → FilterPickerAction-es.js}

@@ -1,11 +1,11 @@
 import React__default, { useContext } from 'react';
 import { T as Typography } from './Typography-es.js';
-import { a as ComboboxContext } from './ComboboxProvider-es.js';
+import { a as FilterPickerContext } from './FilterPickerProvider-es.js';
 
-var styles = {"actionContainer":"NWf8JR3TBoo-","actionButton":"PoMXFVYVY5A-","spinning":"lP2oDQm9j88-"};
+var styles = {"actionContainer":"wnyB0d1ZE70-","actionButton":"mljM3ouZmbM-","spinning":"uMfMpnitRs0-"};
 
-function ComboboxAction(props) {
-    const { searchValue, handleClose } = useContext(ComboboxContext);
+function FilterPickerAction(props) {
+    const { searchValue, handleClose } = useContext(FilterPickerContext);
     if (props.visible !== undefined) {
         const isVisible = typeof props.visible === "function"
             ? props.visible({ searchValue })
@@ -27,4 +27,4 @@ function ComboboxAction(props) {
             React__default.createElement(Typography, { element: "span", size: "base", textColor: "interactive", fontWeight: "semiBold" }, computedLabel))));
 }
 
-export { ComboboxAction as C };
+export { FilterPickerAction as F };

package/dist/{ComboboxActivator-cjs.js → FilterPickerActivator-cjs.js}

@@ -6,22 +6,22 @@ require('classnames');
 var Chip = require('./Chip-cjs.js');
 require('./tslib.es6-cjs.js');
 require('@jobber/design');
-var ComboboxProvider = require('./ComboboxProvider-cjs.js');
+var FilterPickerProvider = require('./FilterPickerProvider-cjs.js');
 var constants = require('./constants-cjs.js');
 
-function useComboboxActivatorAccessibility() {
-    const { label, open } = React.useContext(ComboboxProvider.ComboboxContext);
+function useFilterPickerActivatorAccessibility() {
+    const { label, open } = React.useContext(FilterPickerProvider.FilterPickerContext);
     return {
         ariaLabel: label,
         ariaExpanded: open,
-        ariaControls: constants.COMBOBOX_MENU_ID,
+        ariaControls: constants.FILTER_PICKER_MENU_ID,
         role: "combobox",
     };
 }
 
-function ComboboxActivator(props) {
-    const { handleOpen } = React.useContext(ComboboxProvider.ComboboxContext);
-    const accessibilityAttributes = useComboboxActivatorAccessibility();
+function FilterPickerActivator(props) {
+    const { handleOpen } = React.useContext(FilterPickerProvider.FilterPickerContext);
+    const accessibilityAttributes = useFilterPickerActivatorAccessibility();
     if (React.isValidElement(props.children) &&
         (props.children.type === Button.Button || props.children.type === Chip.Chip)) {
         return React.cloneElement(props.children, {
@@ -35,4 +35,4 @@ function ComboboxActivator(props) {
     return null;
 }
 
-exports.ComboboxActivator = ComboboxActivator;
+exports.FilterPickerActivator = FilterPickerActivator;

package/dist/{ComboboxActivator-es.js → FilterPickerActivator-es.js}

@@ -4,22 +4,22 @@ import 'classnames';
 import { C as Chip } from './Chip-es.js';
 import './tslib.es6-es.js';
 import '@jobber/design';
-import { a as ComboboxContext } from './ComboboxProvider-es.js';
-import { C as COMBOBOX_MENU_ID } from './constants-es.js';
+import { a as FilterPickerContext } from './FilterPickerProvider-es.js';
+import { F as FILTER_PICKER_MENU_ID } from './constants-es.js';
 
-function useComboboxActivatorAccessibility() {
-    const { label, open } = useContext(ComboboxContext);
+function useFilterPickerActivatorAccessibility() {
+    const { label, open } = useContext(FilterPickerContext);
     return {
         ariaLabel: label,
         ariaExpanded: open,
-        ariaControls: COMBOBOX_MENU_ID,
+        ariaControls: FILTER_PICKER_MENU_ID,
         role: "combobox",
     };
 }
 
-function ComboboxActivator(props) {
-    const { handleOpen } = React__default.useContext(ComboboxContext);
-    const accessibilityAttributes = useComboboxActivatorAccessibility();
+function FilterPickerActivator(props) {
+    const { handleOpen } = React__default.useContext(FilterPickerContext);
+    const accessibilityAttributes = useFilterPickerActivatorAccessibility();
     if (React__default.isValidElement(props.children) &&
         (props.children.type === Button || props.children.type === Chip)) {
         return React__default.cloneElement(props.children, {
@@ -33,4 +33,4 @@ function ComboboxActivator(props) {
     return null;
 }
 
-export { ComboboxActivator as C };
+export { FilterPickerActivator as F };