@jobber/components 8.14.0 → 8.15.0

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 };

package/dist/{ComboboxContent-cjs.js → FilterPickerContent-cjs.js}

@@ -3,18 +3,18 @@
 var React = require('react');
 var classnames = require('classnames');
 var floatingUi_react = require('./floating-ui.react-cjs.js');
-var ComboboxContentSearch = require('./ComboboxContentSearch-cjs.js');
-var ComboboxContentList = require('./ComboboxContentList-cjs.js');
-var ComboboxContentHeader = require('./ComboboxContentHeader-cjs.js');
-var ComboboxProvider = require('./ComboboxProvider-cjs.js');
+var FilterPickerContentSearch = require('./FilterPickerContentSearch-cjs.js');
+var FilterPickerContentList = require('./FilterPickerContentList-cjs.js');
+var FilterPickerContentHeader = require('./FilterPickerContentHeader-cjs.js');
+var FilterPickerProvider = require('./FilterPickerProvider-cjs.js');
 var jobberHooks = require('@jobber/hooks');
 var floatingUi_reactDom = require('./floating-ui.react-dom-cjs.js');
 var constants = require('./constants-cjs.js');
 
-var styles = {"content":"QsRc49DHSgA-","hidden":"_7Fd5XGsPpUA-","actions":"yV8-0Hs43J0-","actionPadding":"g3Gdt8jXvFk-","spinning":"dJVYYOaf04E-"};
+var styles = {"content":"bog6pntD050-","hidden":"CLGExWp0HOc-","actions":"Tuw6ng4mYhg-","actionPadding":"uC0PW9BRcl4-","spinning":"TWLS2ZoEtnQ-"};
 
-function useComboboxContent(open, selected) {
-    const { onClear, onSelectAll, shouldScroll } = React.useContext(ComboboxProvider.ComboboxContext);
+function useFilterPickerContent(open, selected) {
+    const { onClear, onSelectAll, shouldScroll } = React.useContext(FilterPickerProvider.FilterPickerContext);
     const optionsListRef = React.useRef(null);
     React.useEffect(() => {
         var _a;
@@ -42,10 +42,10 @@ function scrollToFirstSelected(firstSelected, shouldScroll) {
     }
 }
 
-const COMBOBOX_OFFSET = 8;
+const FILTER_PICKER_OFFSET = 8;
 // eslint-disable-next-line max-statements
-function useComboboxAccessibility(selectionCallback, filteredOptions, optionsListRef, open, wrapperRef) {
-    const { handleClose } = React.useContext(ComboboxProvider.ComboboxContext);
+function useFilterPickerAccessibility(selectionCallback, filteredOptions, optionsListRef, open, wrapperRef) {
+    const { handleClose } = React.useContext(FilterPickerProvider.FilterPickerContext);
     const hasOptionsVisible = open && filteredOptions.length > 0;
     const focusedIndex = React.useRef(null);
     const parentNodeId = floatingUi_react.useFloatingParentNodeId();
@@ -65,7 +65,7 @@ function useComboboxAccessibility(selectionCallback, filteredOptions, optionsLis
                 handleClose();
         },
         middleware: [
-            floatingUi_reactDom.offset(COMBOBOX_OFFSET),
+            floatingUi_reactDom.offset(FILTER_PICKER_OFFSET),
             floatingUi_reactDom.flip({ fallbackPlacements: ["top-start", "bottom-end", "top-end"] }),
         ],
     });
@@ -139,10 +139,10 @@ function useComboboxAccessibility(selectionCallback, filteredOptions, optionsLis
     };
 }
 
-function ComboboxContent(props) {
+function FilterPickerContent(props) {
     const optionsExist = props.options.length > 0;
-    const { onClear, onSelectAll, optionsListRef } = useComboboxContent(props.open, props.selected);
-    const { floatingRef, floatingStyles, floatingProps, nodeId, parentNodeId } = useComboboxAccessibility(props.handleSelection, props.options, optionsListRef, props.open, props.wrapperRef);
+    const { onClear, onSelectAll, optionsListRef } = useFilterPickerContent(props.open, props.selected);
+    const { floatingRef, floatingStyles, floatingProps, nodeId, parentNodeId } = useFilterPickerAccessibility(props.handleSelection, props.options, optionsListRef, props.open, props.wrapperRef);
     // options that are passed back to consumers via onSelectAll callback
     // should only contain id and label
     const optionsData = React.useMemo(() => {
@@ -151,18 +151,18 @@ function ComboboxContent(props) {
             label: option.label,
         }));
     }, [props.options]);
-    const content = (React.createElement("div", Object.assign({ ref: floatingRef, id: constants.COMBOBOX_MENU_ID, "data-testid": constants.COMBOBOX_MENU_ID, "data-elevation": "elevated", tabIndex: 0, className: classnames(styles.content, {
+    const content = (React.createElement("div", Object.assign({ ref: floatingRef, id: constants.FILTER_PICKER_MENU_ID, "data-testid": constants.FILTER_PICKER_MENU_ID, "data-elevation": "elevated", tabIndex: 0, className: classnames(styles.content, {
             [styles.hidden]: !props.open,
         }), style: floatingStyles }, floatingProps),
-        React.createElement(ComboboxContentSearch.ComboboxContentSearch, { open: props.open, placeholder: props.subjectNoun, searchValue: props.searchValue, setSearchValue: props.setSearchValue, handleSearchChange: props.handleSearchChange }),
-        props.multiselect && (optionsExist || props.selected.length > 0) && (React.createElement(ComboboxContentHeader.ComboboxContentHeader, { hasOptionsVisible: optionsExist, subjectNoun: props.subjectNoun, selectedCount: props.selected.length, onClearAll: () => {
+        React.createElement(FilterPickerContentSearch.FilterPickerContentSearch, { open: props.open, placeholder: props.subjectNoun, searchValue: props.searchValue, setSearchValue: props.setSearchValue, handleSearchChange: props.handleSearchChange }),
+        props.multiselect && (optionsExist || props.selected.length > 0) && (React.createElement(FilterPickerContentHeader.FilterPickerContentHeader, { hasOptionsVisible: optionsExist, subjectNoun: props.subjectNoun, selectedCount: props.selected.length, onClearAll: () => {
                 props.selectedStateSetter([]);
                 onClear === null || onClear === void 0 ? void 0 : onClear();
             }, onSelectAll: () => {
                 props.selectedStateSetter(props.options);
                 onSelectAll === null || onSelectAll === void 0 ? void 0 : onSelectAll(optionsData);
             } })),
-        React.createElement(ComboboxContentList.ComboboxContentList, { multiselect: props.multiselect, options: props.options, selected: props.selected, optionsListRef: optionsListRef, searchValue: props.searchValue, subjectNoun: props.subjectNoun, loading: props.loading, onLoadMore: props.onLoadMore }),
+        React.createElement(FilterPickerContentList.FilterPickerContentList, { multiselect: props.multiselect, options: props.options, selected: props.selected, optionsListRef: optionsListRef, searchValue: props.searchValue, subjectNoun: props.subjectNoun, loading: props.loading, onLoadMore: props.onLoadMore }),
         props.actionElements && (React.createElement("div", { className: styles.actions, role: "group" }, props.actionElements.map((child, index, childrenArray) => (React.createElement("div", { key: index, className: classnames({
                 [styles.actionPadding]: index === childrenArray.length - 1,
             }) }, child)))))));
@@ -174,4 +174,4 @@ function ComboboxContent(props) {
     return (globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) ? (React.createElement(floatingUi_react.FloatingPortal, null, content)) : (content);
 }
 
-exports.ComboboxContent = ComboboxContent;
+exports.FilterPickerContent = FilterPickerContent;

package/dist/{ComboboxContent-es.js → FilterPickerContent-es.js}

@@ -1,18 +1,18 @@
 import React__default, { useContext, useRef, useEffect, useMemo } from 'react';
 import classnames from 'classnames';
 import { a as useFloatingParentNodeId, b as useFloatingNodeId, u as useFloating, c as useDismiss, d as useInteractions, e as FloatingTree, f as FloatingNode, F as FloatingPortal } from './floating-ui.react-es.js';
-import { C as ComboboxContentSearch } from './ComboboxContentSearch-es.js';
-import { C as ComboboxContentList } from './ComboboxContentList-es.js';
-import { C as ComboboxContentHeader } from './ComboboxContentHeader-es.js';
-import { a as ComboboxContext } from './ComboboxProvider-es.js';
+import { F as FilterPickerContentSearch } from './FilterPickerContentSearch-es.js';
+import { F as FilterPickerContentList } from './FilterPickerContentList-es.js';
+import { F as FilterPickerContentHeader } from './FilterPickerContentHeader-es.js';
+import { a as FilterPickerContext } from './FilterPickerProvider-es.js';
 import { useRefocusOnActivator, useFocusTrap } from '@jobber/hooks';
 import { o as offset, f as flip, b as autoUpdate } from './floating-ui.react-dom-es.js';
-import { C as COMBOBOX_MENU_ID } from './constants-es.js';
+import { F as FILTER_PICKER_MENU_ID } from './constants-es.js';
 
-var styles = {"content":"QsRc49DHSgA-","hidden":"_7Fd5XGsPpUA-","actions":"yV8-0Hs43J0-","actionPadding":"g3Gdt8jXvFk-","spinning":"dJVYYOaf04E-"};
+var styles = {"content":"bog6pntD050-","hidden":"CLGExWp0HOc-","actions":"Tuw6ng4mYhg-","actionPadding":"uC0PW9BRcl4-","spinning":"TWLS2ZoEtnQ-"};
 
-function useComboboxContent(open, selected) {
-    const { onClear, onSelectAll, shouldScroll } = useContext(ComboboxContext);
+function useFilterPickerContent(open, selected) {
+    const { onClear, onSelectAll, shouldScroll } = useContext(FilterPickerContext);
     const optionsListRef = useRef(null);
     useEffect(() => {
         var _a;
@@ -40,10 +40,10 @@ function scrollToFirstSelected(firstSelected, shouldScroll) {
     }
 }
 
-const COMBOBOX_OFFSET = 8;
+const FILTER_PICKER_OFFSET = 8;
 // eslint-disable-next-line max-statements
-function useComboboxAccessibility(selectionCallback, filteredOptions, optionsListRef, open, wrapperRef) {
-    const { handleClose } = useContext(ComboboxContext);
+function useFilterPickerAccessibility(selectionCallback, filteredOptions, optionsListRef, open, wrapperRef) {
+    const { handleClose } = useContext(FilterPickerContext);
     const hasOptionsVisible = open && filteredOptions.length > 0;
     const focusedIndex = useRef(null);
     const parentNodeId = useFloatingParentNodeId();
@@ -63,7 +63,7 @@ function useComboboxAccessibility(selectionCallback, filteredOptions, optionsLis
                 handleClose();
         },
         middleware: [
-            offset(COMBOBOX_OFFSET),
+            offset(FILTER_PICKER_OFFSET),
             flip({ fallbackPlacements: ["top-start", "bottom-end", "top-end"] }),
         ],
     });
@@ -137,10 +137,10 @@ function useComboboxAccessibility(selectionCallback, filteredOptions, optionsLis
     };
 }
 
-function ComboboxContent(props) {
+function FilterPickerContent(props) {
     const optionsExist = props.options.length > 0;
-    const { onClear, onSelectAll, optionsListRef } = useComboboxContent(props.open, props.selected);
-    const { floatingRef, floatingStyles, floatingProps, nodeId, parentNodeId } = useComboboxAccessibility(props.handleSelection, props.options, optionsListRef, props.open, props.wrapperRef);
+    const { onClear, onSelectAll, optionsListRef } = useFilterPickerContent(props.open, props.selected);
+    const { floatingRef, floatingStyles, floatingProps, nodeId, parentNodeId } = useFilterPickerAccessibility(props.handleSelection, props.options, optionsListRef, props.open, props.wrapperRef);
     // options that are passed back to consumers via onSelectAll callback
     // should only contain id and label
     const optionsData = useMemo(() => {
@@ -149,18 +149,18 @@ function ComboboxContent(props) {
             label: option.label,
         }));
     }, [props.options]);
-    const content = (React__default.createElement("div", Object.assign({ ref: floatingRef, id: COMBOBOX_MENU_ID, "data-testid": COMBOBOX_MENU_ID, "data-elevation": "elevated", tabIndex: 0, className: classnames(styles.content, {
+    const content = (React__default.createElement("div", Object.assign({ ref: floatingRef, id: FILTER_PICKER_MENU_ID, "data-testid": FILTER_PICKER_MENU_ID, "data-elevation": "elevated", tabIndex: 0, className: classnames(styles.content, {
             [styles.hidden]: !props.open,
         }), style: floatingStyles }, floatingProps),
-        React__default.createElement(ComboboxContentSearch, { open: props.open, placeholder: props.subjectNoun, searchValue: props.searchValue, setSearchValue: props.setSearchValue, handleSearchChange: props.handleSearchChange }),
-        props.multiselect && (optionsExist || props.selected.length > 0) && (React__default.createElement(ComboboxContentHeader, { hasOptionsVisible: optionsExist, subjectNoun: props.subjectNoun, selectedCount: props.selected.length, onClearAll: () => {
+        React__default.createElement(FilterPickerContentSearch, { open: props.open, placeholder: props.subjectNoun, searchValue: props.searchValue, setSearchValue: props.setSearchValue, handleSearchChange: props.handleSearchChange }),
+        props.multiselect && (optionsExist || props.selected.length > 0) && (React__default.createElement(FilterPickerContentHeader, { hasOptionsVisible: optionsExist, subjectNoun: props.subjectNoun, selectedCount: props.selected.length, onClearAll: () => {
                 props.selectedStateSetter([]);
                 onClear === null || onClear === void 0 ? void 0 : onClear();
             }, onSelectAll: () => {
                 props.selectedStateSetter(props.options);
                 onSelectAll === null || onSelectAll === void 0 ? void 0 : onSelectAll(optionsData);
             } })),
-        React__default.createElement(ComboboxContentList, { multiselect: props.multiselect, options: props.options, selected: props.selected, optionsListRef: optionsListRef, searchValue: props.searchValue, subjectNoun: props.subjectNoun, loading: props.loading, onLoadMore: props.onLoadMore }),
+        React__default.createElement(FilterPickerContentList, { multiselect: props.multiselect, options: props.options, selected: props.selected, optionsListRef: optionsListRef, searchValue: props.searchValue, subjectNoun: props.subjectNoun, loading: props.loading, onLoadMore: props.onLoadMore }),
         props.actionElements && (React__default.createElement("div", { className: styles.actions, role: "group" }, props.actionElements.map((child, index, childrenArray) => (React__default.createElement("div", { key: index, className: classnames({
                 [styles.actionPadding]: index === childrenArray.length - 1,
             }) }, child)))))));
@@ -172,4 +172,4 @@ function ComboboxContent(props) {
     return (globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) ? (React__default.createElement(FloatingPortal, null, content)) : (content);
 }
 
-export { ComboboxContent as C };
+export { FilterPickerContent as F };

package/dist/{ComboboxContentHeader-cjs.js → FilterPickerContentHeader-cjs.js}

@@ -5,15 +5,15 @@ var Typography = require('./Typography-cjs.js');
 var Button = require('./Button-cjs.js');
 require('classnames');
 
-var styles = {"header":"nrNh3feibg8-","spinning":"rcoGBsZN55M-"};
+var styles = {"header":"qsCrV9XnUYQ-","spinning":"cDKMYcrIogE-"};
 
-function ComboboxContentHeader(props) {
+function FilterPickerContentHeader(props) {
     const hasSelected = props.selectedCount > 0;
     const actionLabel = hasSelected ? "Clear" : "Select all";
     const label = getLabel(hasSelected, props.selectedCount, props.subjectNoun);
     const handleSelectAll = hasSelected ? props.onClearAll : props.onSelectAll;
     const showAction = hasSelected || props.hasOptionsVisible;
-    return (React.createElement("div", { className: styles.header, "data-testid": "ATL-Combobox-Header" },
+    return (React.createElement("div", { className: styles.header, "data-testid": "ATL-FilterPicker-Header" },
         React.createElement(Typography.Typography, { textColor: "heading", fontWeight: "semiBold" }, label),
         showAction && (React.createElement(Button.Button, { size: "small", label: actionLabel, type: "tertiary", onClick: handleSelectAll }))));
 }
@@ -27,4 +27,4 @@ function getLabel(hasSelected, count, subjectNoun) {
     return "Select";
 }
 
-exports.ComboboxContentHeader = ComboboxContentHeader;
+exports.FilterPickerContentHeader = FilterPickerContentHeader;

package/dist/{ComboboxContentHeader-es.js → FilterPickerContentHeader-es.js}

@@ -3,15 +3,15 @@ import { T as Typography } from './Typography-es.js';
 import { B as Button } from './Button-es.js';
 import 'classnames';
 
-var styles = {"header":"nrNh3feibg8-","spinning":"rcoGBsZN55M-"};
+var styles = {"header":"qsCrV9XnUYQ-","spinning":"cDKMYcrIogE-"};
 
-function ComboboxContentHeader(props) {
+function FilterPickerContentHeader(props) {
     const hasSelected = props.selectedCount > 0;
     const actionLabel = hasSelected ? "Clear" : "Select all";
     const label = getLabel(hasSelected, props.selectedCount, props.subjectNoun);
     const handleSelectAll = hasSelected ? props.onClearAll : props.onSelectAll;
     const showAction = hasSelected || props.hasOptionsVisible;
-    return (React__default.createElement("div", { className: styles.header, "data-testid": "ATL-Combobox-Header" },
+    return (React__default.createElement("div", { className: styles.header, "data-testid": "ATL-FilterPicker-Header" },
         React__default.createElement(Typography, { textColor: "heading", fontWeight: "semiBold" }, label),
         showAction && (React__default.createElement(Button, { size: "small", label: actionLabel, type: "tertiary", onClick: handleSelectAll }))));
 }
@@ -25,4 +25,4 @@ function getLabel(hasSelected, count, subjectNoun) {
     return "Select";
 }
 
-export { ComboboxContentHeader as C };
+export { FilterPickerContentHeader as F };

package/dist/{ComboboxContentList-cjs.js → FilterPickerContentList-cjs.js}

@@ -7,12 +7,12 @@ var Text = require('./Text-cjs.js');
 var Glimmer = require('./Glimmer-cjs.js');
 var Spinner = require('./Spinner-cjs.js');
 var AtlantisThemeContext = require('./AtlantisThemeContext-cjs.js');
-var ComboboxOption = require('./ComboboxOption-cjs.js');
-var ComboboxLoadMore = require('./ComboboxLoadMore-cjs.js');
+var FilterPickerOption = require('./FilterPickerOption-cjs.js');
+var FilterPickerLoadMore = require('./FilterPickerLoadMore-cjs.js');
 
-var styles = {"container":"wFxd-3vJyKo-","optionsList":"PzwV5qiIgV4-","filterMessage":"c6TosVipkmw-","emptyStateMessage":"ZYrg-J4-v2Y-","scrollTop":"FLu6FtihsLo-","scrollNone":"-o-v1zjzb48-","scrollBottom":"_2iW5DZ16G2U-","loadingContainer":"PqwPrWjdB-A-","hasOptions":"v3cabuEY4Xk-","spinning":"NyvSj4UKYJM-"};
+var styles = {"container":"d-JzbXbz3vI-","optionsList":"_9sPZShzetbo-","filterMessage":"_7iUzJFaZYDs-","emptyStateMessage":"I3lJfMgm-Io-","scrollTop":"VNhhUhatkmw-","scrollNone":"w8LsXerWI7I-","scrollBottom":"-Bk1T-RD-tA-","loadingContainer":"czPVeCUK2Zc-","hasOptions":"_9IwiWJBxJxQ-","spinning":"BrOPnXbFiHU-"};
 
-function ComboboxContentList(props) {
+function FilterPickerContentList(props) {
     const { tokens } = AtlantisThemeContext.useAtlantisTheme();
     const optionsExist = props.options.length > 0;
     const hasSearchTerm = props.searchValue.length > 0;
@@ -20,12 +20,12 @@ function ComboboxContentList(props) {
     return (React.createElement("div", { className: classnames(styles.container, styles[listScrollState]) },
         optionsExist && (React.createElement("ul", { className: styles.optionsList, role: "listbox", "aria-multiselectable": props.multiselect, ref: props.optionsListRef },
             props.options.map(option => {
-                return (React.createElement(ComboboxOption.ComboboxOption, { key: option.id, id: option.id, label: option.label, prefix: option.prefix, customRender: option.customRender, onClick: option.onClick }));
+                return (React.createElement(FilterPickerOption.FilterPickerOption, { key: option.id, id: option.id, label: option.label, prefix: option.prefix, customRender: option.customRender, onClick: option.onClick }));
             }),
             React.createElement("div", { className: classnames([styles.loadingContainer, styles.hasOptions]) },
                 React.createElement(framerMotion.AnimatePresence, { initial: false }, Boolean(props.loading && optionsExist) && (React.createElement(framerMotion.motion.div, { initial: { opacity: 0, y: tokens["space-base"] }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: tokens["space-base"] }, transition: { duration: tokens["timing-base"] / 1000 } },
                     React.createElement(Spinner.Spinner, { size: "small" }))))),
-            props.onLoadMore && (React.createElement(ComboboxLoadMore.ComboboxLoadMore, { onLoadMore: props.onLoadMore })))),
+            props.onLoadMore && (React.createElement(FilterPickerLoadMore.FilterPickerLoadMore, { onLoadMore: props.onLoadMore })))),
         props.loading && !optionsExist && (React.createElement(React.Fragment, null, Array.from({ length: 5 }).map((_, index) => (React.createElement("div", { className: styles.loadingContainer, key: index },
             React.createElement(Glimmer.Glimmer, { shape: "rectangle", size: "small" })))))),
         hasSearchTerm && !props.loading && !optionsExist && (React.createElement("div", { className: styles.filterMessage },
@@ -77,4 +77,4 @@ function useScrollState(optionsListRef, options) {
     return { listScrollState };
 }
 
-exports.ComboboxContentList = ComboboxContentList;
+exports.FilterPickerContentList = FilterPickerContentList;

package/dist/{ComboboxContentList-es.js → FilterPickerContentList-es.js}

@@ -5,12 +5,12 @@ import { T as Text } from './Text-es.js';
 import { G as Glimmer } from './Glimmer-es.js';
 import { S as Spinner } from './Spinner-es.js';
 import { u as useAtlantisTheme } from './AtlantisThemeContext-es.js';
-import { C as ComboboxOption } from './ComboboxOption-es.js';
-import { C as ComboboxLoadMore } from './ComboboxLoadMore-es.js';
+import { F as FilterPickerOption } from './FilterPickerOption-es.js';
+import { F as FilterPickerLoadMore } from './FilterPickerLoadMore-es.js';
 
-var styles = {"container":"wFxd-3vJyKo-","optionsList":"PzwV5qiIgV4-","filterMessage":"c6TosVipkmw-","emptyStateMessage":"ZYrg-J4-v2Y-","scrollTop":"FLu6FtihsLo-","scrollNone":"-o-v1zjzb48-","scrollBottom":"_2iW5DZ16G2U-","loadingContainer":"PqwPrWjdB-A-","hasOptions":"v3cabuEY4Xk-","spinning":"NyvSj4UKYJM-"};
+var styles = {"container":"d-JzbXbz3vI-","optionsList":"_9sPZShzetbo-","filterMessage":"_7iUzJFaZYDs-","emptyStateMessage":"I3lJfMgm-Io-","scrollTop":"VNhhUhatkmw-","scrollNone":"w8LsXerWI7I-","scrollBottom":"-Bk1T-RD-tA-","loadingContainer":"czPVeCUK2Zc-","hasOptions":"_9IwiWJBxJxQ-","spinning":"BrOPnXbFiHU-"};
 
-function ComboboxContentList(props) {
+function FilterPickerContentList(props) {
     const { tokens } = useAtlantisTheme();
     const optionsExist = props.options.length > 0;
     const hasSearchTerm = props.searchValue.length > 0;
@@ -18,12 +18,12 @@ function ComboboxContentList(props) {
     return (React__default.createElement("div", { className: classnames(styles.container, styles[listScrollState]) },
         optionsExist && (React__default.createElement("ul", { className: styles.optionsList, role: "listbox", "aria-multiselectable": props.multiselect, ref: props.optionsListRef },
             props.options.map(option => {
-                return (React__default.createElement(ComboboxOption, { key: option.id, id: option.id, label: option.label, prefix: option.prefix, customRender: option.customRender, onClick: option.onClick }));
+                return (React__default.createElement(FilterPickerOption, { key: option.id, id: option.id, label: option.label, prefix: option.prefix, customRender: option.customRender, onClick: option.onClick }));
             }),
             React__default.createElement("div", { className: classnames([styles.loadingContainer, styles.hasOptions]) },
                 React__default.createElement(AnimatePresence, { initial: false }, Boolean(props.loading && optionsExist) && (React__default.createElement(motion.div, { initial: { opacity: 0, y: tokens["space-base"] }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: tokens["space-base"] }, transition: { duration: tokens["timing-base"] / 1000 } },
                     React__default.createElement(Spinner, { size: "small" }))))),
-            props.onLoadMore && (React__default.createElement(ComboboxLoadMore, { onLoadMore: props.onLoadMore })))),
+            props.onLoadMore && (React__default.createElement(FilterPickerLoadMore, { onLoadMore: props.onLoadMore })))),
         props.loading && !optionsExist && (React__default.createElement(React__default.Fragment, null, Array.from({ length: 5 }).map((_, index) => (React__default.createElement("div", { className: styles.loadingContainer, key: index },
             React__default.createElement(Glimmer, { shape: "rectangle", size: "small" })))))),
         hasSearchTerm && !props.loading && !optionsExist && (React__default.createElement("div", { className: styles.filterMessage },
@@ -75,4 +75,4 @@ function useScrollState(optionsListRef, options) {
     return { listScrollState };
 }
 
-export { ComboboxContentList as C };
+export { FilterPickerContentList as F };

package/dist/{ComboboxContentSearch-cjs.js → FilterPickerContentSearch-cjs.js}

@@ -3,9 +3,9 @@
 var React = require('react');
 var Icon = require('./Icon-cjs.js');
 
-var styles = {"search":"c4B0WFX6K0o-","searchInput":"AH9-zRHXfpo-","clearSearch":"mymN3p8sKRw-","spinning":"hMjmTEgj6WU-"};
+var styles = {"search":"_74R4ICUNw-M-","searchInput":"icUzhma-GJs-","clearSearch":"ePmiDYZ2boo-","spinning":"_-2bwJZqt-do-"};
 
-function ComboboxContentSearch(props) {
+function FilterPickerContentSearch(props) {
     const searchRef = React.useRef(null);
     React.useEffect(() => {
         if (props.open) {
@@ -17,7 +17,7 @@ function ComboboxContentSearch(props) {
     }, [props.open]);
     return (React.createElement("div", { className: styles.search },
         React.createElement("input", { type: "search", ref: searchRef, className: styles.searchInput, placeholder: props.placeholder ? `Search ${props.placeholder}` : "Search", onChange: (event) => handleSearch(event), value: props.searchValue }),
-        props.searchValue && (React.createElement("button", { className: styles.clearSearch, onClick: clearSearch, type: "button", "data-testid": "ATL-Combobox-Content-Search-Clear", "aria-label": "Clear search" },
+        props.searchValue && (React.createElement("button", { className: styles.clearSearch, onClick: clearSearch, type: "button", "data-testid": "ATL-FilterPicker-Content-Search-Clear", "aria-label": "Clear search" },
             React.createElement(Icon.Icon, { name: "remove", size: "small" })))));
     function clearSearch() {
         var _a;
@@ -31,4 +31,4 @@ function ComboboxContentSearch(props) {
     }
 }
 
-exports.ComboboxContentSearch = ComboboxContentSearch;
+exports.FilterPickerContentSearch = FilterPickerContentSearch;

package/dist/{ComboboxContentSearch-es.js → FilterPickerContentSearch-es.js}

@@ -1,9 +1,9 @@
 import React__default, { useRef, useEffect } from 'react';
 import { I as Icon } from './Icon-es.js';
 
-var styles = {"search":"c4B0WFX6K0o-","searchInput":"AH9-zRHXfpo-","clearSearch":"mymN3p8sKRw-","spinning":"hMjmTEgj6WU-"};
+var styles = {"search":"_74R4ICUNw-M-","searchInput":"icUzhma-GJs-","clearSearch":"ePmiDYZ2boo-","spinning":"_-2bwJZqt-do-"};
 
-function ComboboxContentSearch(props) {
+function FilterPickerContentSearch(props) {
     const searchRef = useRef(null);
     useEffect(() => {
         if (props.open) {
@@ -15,7 +15,7 @@ function ComboboxContentSearch(props) {
     }, [props.open]);
     return (React__default.createElement("div", { className: styles.search },
         React__default.createElement("input", { type: "search", ref: searchRef, className: styles.searchInput, placeholder: props.placeholder ? `Search ${props.placeholder}` : "Search", onChange: (event) => handleSearch(event), value: props.searchValue }),
-        props.searchValue && (React__default.createElement("button", { className: styles.clearSearch, onClick: clearSearch, type: "button", "data-testid": "ATL-Combobox-Content-Search-Clear", "aria-label": "Clear search" },
+        props.searchValue && (React__default.createElement("button", { className: styles.clearSearch, onClick: clearSearch, type: "button", "data-testid": "ATL-FilterPicker-Content-Search-Clear", "aria-label": "Clear search" },
             React__default.createElement(Icon, { name: "remove", size: "small" })))));
     function clearSearch() {
         var _a;
@@ -29,4 +29,4 @@ function ComboboxContentSearch(props) {
     }
 }
 
-export { ComboboxContentSearch as C };
+export { FilterPickerContentSearch as F };

package/dist/FilterPickerLoadMore-cjs.js

@@ -0,0 +1,16 @@
+'use strict';
+
+var React = require('react');
+var jobberHooks = require('@jobber/hooks');
+
+var styles = {"trigger":"_8SCmS4wfKOQ-","spinning":"coGWl7tznJU-"};
+
+function FilterPickerLoadMore({ onLoadMore, }) {
+    const [inViewRef, isInView] = jobberHooks.useInView();
+    React.useEffect(() => {
+        isInView && onLoadMore();
+    }, [isInView]);
+    return (React.createElement("div", { "data-testid": "ATL-FilterPicker-Loadmore-Trigger", ref: inViewRef, className: styles.trigger }));
+}
+
+exports.FilterPickerLoadMore = FilterPickerLoadMore;