@jobber/components 8.13.1 → 8.14.1

package/FilterPicker.d.ts

@@ -0,0 +1 @@
+export * from "./dist/FilterPicker";

package/{Combobox.js → FilterPicker.js}

@@ -4,14 +4,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true,
 });
 
-var Combobox = require("./dist/Combobox");
+var FilterPicker = require("./dist/FilterPicker");
 
-Object.keys(Combobox).forEach(function(key) {
+Object.keys(FilterPicker).forEach(function(key) {
   if (key === "default" || key === "__esModule") return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return Combobox[key];
+      return FilterPicker[key];
     },
   });
 });

package/dist/Checkbox/Checkbox.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-export declare const Checkbox: React.ForwardRefExoticComponent<import("./Checkbox.types").CheckboxCoreProps & import("../sharedHelpers/types").AriaInputProps & import("../sharedHelpers/types").FocusEvents<HTMLInputElement> & import("../sharedHelpers/types").MouseEvents<HTMLInputElement> & Pick<import("../sharedHelpers/types").HTMLInputBaseProps, "id" | "name" | "disabled"> & {
+export declare const Checkbox: React.ForwardRefExoticComponent<import("./Checkbox.types").CheckboxCoreProps & import("../sharedHelpers/types").AriaInputProps & import("../sharedHelpers/types").FocusEvents<HTMLInputElement> & import("../sharedHelpers/types").MouseEvents<HTMLInputElement> & Pick<import("../sharedHelpers/types").HTMLInputBaseProps, "disabled" | "name" | "id"> & {
     label?: string | React.ReactElement;
     description?: React.ReactNode;
     invalid?: boolean;

package/dist/DataList/components/DataListFilters/components/DataListSort/index.cjs

@@ -5,8 +5,8 @@ require('react');
 require('../../../../../DataListContext-cjs.js');
 require('../../../../../noop-cjs.js');
 require('../../../../../_commonjsHelpers-cjs.js');
-require('../../../../../Combobox-cjs.js');
-require('../../../../../ComboboxContent-cjs.js');
+require('../../../../../FilterPicker-cjs.js');
+require('../../../../../FilterPickerContent-cjs.js');
 require('classnames');
 require('../../../../../floating-ui.react-cjs.js');
 require('../../../../../floating-ui.utils.dom-cjs.js');
@@ -14,10 +14,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');
@@ -34,23 +34,23 @@ 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('../../../../../ComboboxProvider-cjs.js');
-require('../../../../../ComboboxLoadMore-cjs.js');
+require('../../../../../FilterPickerProvider-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('../../../../../ComboboxActivator-cjs.js');
+require('../../../../../FilterPickerActivator-cjs.js');
 
 
 

package/dist/DataList/components/DataListFilters/components/DataListSort/index.mjs

@@ -3,8 +3,8 @@ import 'react';
 import '../../../../../DataListContext-es.js';
 import '../../../../../noop-es.js';
 import '../../../../../_commonjsHelpers-es.js';
-import '../../../../../Combobox-es.js';
-import '../../../../../ComboboxContent-es.js';
+import '../../../../../FilterPicker-es.js';
+import '../../../../../FilterPickerContent-es.js';
 import 'classnames';
 import '../../../../../floating-ui.react-es.js';
 import '../../../../../floating-ui.utils.dom-es.js';
@@ -12,10 +12,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';
@@ -32,20 +32,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 '../../../../../ComboboxProvider-es.js';
-import '../../../../../ComboboxLoadMore-es.js';
+import '../../../../../FilterPickerProvider-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 '../../../../../ComboboxActivator-es.js';
+import '../../../../../FilterPickerActivator-es.js';

package/dist/DataList/components/DataListFilters/index.cjs

@@ -6,8 +6,8 @@ require('../../../DataListSort-cjs.js');
 require('../../../DataListContext-cjs.js');
 require('../../../noop-cjs.js');
 require('../../../_commonjsHelpers-cjs.js');
-require('../../../Combobox-cjs.js');
-require('../../../ComboboxContent-cjs.js');
+require('../../../FilterPicker-cjs.js');
+require('../../../FilterPickerContent-cjs.js');
 require('classnames');
 require('../../../floating-ui.react-cjs.js');
 require('../../../floating-ui.utils.dom-cjs.js');
@@ -15,10 +15,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');
@@ -35,23 +35,23 @@ 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('../../../ComboboxProvider-cjs.js');
-require('../../../ComboboxLoadMore-cjs.js');
+require('../../../FilterPickerProvider-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('../../../ComboboxActivator-cjs.js');
+require('../../../FilterPickerActivator-cjs.js');
 require('../../../DataListOverflowFade-cjs.js');
 require('../../../DataList.utils-cjs.js');
 require('../../../_getTag-cjs.js');

package/dist/DataList/components/DataListFilters/index.mjs

@@ -4,8 +4,8 @@ import '../../../DataListSort-es.js';
 import '../../../DataListContext-es.js';
 import '../../../noop-es.js';
 import '../../../_commonjsHelpers-es.js';
-import '../../../Combobox-es.js';
-import '../../../ComboboxContent-es.js';
+import '../../../FilterPicker-es.js';
+import '../../../FilterPickerContent-es.js';
 import 'classnames';
 import '../../../floating-ui.react-es.js';
 import '../../../floating-ui.utils.dom-es.js';
@@ -13,10 +13,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';
@@ -33,23 +33,23 @@ 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 '../../../ComboboxProvider-es.js';
-import '../../../ComboboxLoadMore-es.js';
+import '../../../FilterPickerProvider-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 '../../../ComboboxActivator-es.js';
+import '../../../FilterPickerActivator-es.js';
 import '../../../DataListOverflowFade-es.js';
 import '../../../DataList.utils-es.js';
 import '../../../_getTag-es.js';

package/dist/DataList/components/DataListHeader/index.cjs

@@ -22,7 +22,6 @@ require('../../../DataListSortingOptions-cjs.js');
 require('../../../Icon-cjs.js');
 require('../../../Heading-cjs.js');
 require('../../../useResponsiveSizing-cjs.js');
-require('../../../AnimatedSwitcher-cjs.js');
 require('framer-motion');
 require('../../../Button-cjs.js');
 require('../../../tslib.es6-cjs.js');

package/dist/DataList/components/DataListHeader/index.mjs

@@ -20,7 +20,6 @@ import '../../../DataListSortingOptions-es.js';
 import '../../../Icon-es.js';
 import '../../../Heading-es.js';
 import '../../../useResponsiveSizing-es.js';
-import '../../../AnimatedSwitcher-es.js';
 import 'framer-motion';
 import '../../../Button-es.js';
 import '../../../tslib.es6-es.js';

package/dist/DataList/components/DataListSearch/index.cjs

@@ -3,12 +3,12 @@
 var DataListSearch = require('../../../DataListSearch-cjs.js');
 require('react');
 require('classnames');
+require('framer-motion');
 require('@jobber/design');
 require('@jobber/hooks');
 require('../../../InputText-cjs.js');
 require('../../../useAtlantisFormFieldName-cjs.js');
 require('../../../FormFieldWrapper-cjs.js');
-require('framer-motion');
 require('../../../Button-cjs.js');
 require('../../../tslib.es6-cjs.js');
 require('react-router-dom');
@@ -25,7 +25,6 @@ require('../../../DataListContext-cjs.js');
 require('../../../noop-cjs.js');
 require('../../../_commonjsHelpers-cjs.js');
 require('../../../DataList.const-cjs.js');
-require('../../../AnimatedSwitcher-cjs.js');
 
 
 

package/dist/DataList/components/DataListSearch/index.mjs

@@ -1,12 +1,12 @@
 export { D as DATA_LIST_SEARCH_TEST_ID, a as DataListSearch, I as InternalDataListSearch } from '../../../DataListSearch-es.js';
 import 'react';
 import 'classnames';
+import 'framer-motion';
 import '@jobber/design';
 import '@jobber/hooks';
 import '../../../InputText-es.js';
 import '../../../useAtlantisFormFieldName-es.js';
 import '../../../FormFieldWrapper-es.js';
-import 'framer-motion';
 import '../../../Button-es.js';
 import '../../../tslib.es6-es.js';
 import 'react-router-dom';
@@ -23,4 +23,3 @@ import '../../../DataListContext-es.js';
 import '../../../noop-es.js';
 import '../../../_commonjsHelpers-es.js';
 import '../../../DataList.const-es.js';
-import '../../../AnimatedSwitcher-es.js';

package/dist/DataList/index.cjs

@@ -53,14 +53,13 @@ require('../filterDataAttributes-cjs.js');
 require('../useBatchSelect-cjs.js');
 require('../DataListItemClickable-cjs.js');
 require('../DataListHeader-cjs.js');
-require('../AnimatedSwitcher-cjs.js');
 require('../DataListBulkActions-cjs.js');
 require('../DataListFilters-cjs.js');
 require('../DataListSort-cjs.js');
-require('../Combobox-cjs.js');
-require('../ComboboxContent-cjs.js');
-require('../ComboboxContentSearch-cjs.js');
-require('../ComboboxContentList-cjs.js');
+require('../FilterPicker-cjs.js');
+require('../FilterPickerContent-cjs.js');
+require('../FilterPickerContentSearch-cjs.js');
+require('../FilterPickerContentList-cjs.js');
 require('../Spinner-cjs.js');
 require('../AtlantisThemeContext-cjs.js');
 require('../identity-cjs.js');
@@ -69,19 +68,19 @@ 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('../ComboboxProvider-cjs.js');
-require('../ComboboxLoadMore-cjs.js');
-require('../ComboboxContentHeader-cjs.js');
+require('../FilterPickerProvider-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('../Chip-cjs.js');
 require('../Avatar-cjs.js');
 require('color');
 require('../useChildComponent-cjs.js');
-require('../ComboboxActivator-cjs.js');
+require('../FilterPickerActivator-cjs.js');
 require('../DataListOverflowFade-cjs.js');
 require('../DataListStickyHeader-cjs.js');
 require('../DataListSearch-cjs.js');

package/dist/DataList/index.mjs

@@ -51,14 +51,13 @@ import '../filterDataAttributes-es.js';
 import '../useBatchSelect-es.js';
 import '../DataListItemClickable-es.js';
 import '../DataListHeader-es.js';
-import '../AnimatedSwitcher-es.js';
 import '../DataListBulkActions-es.js';
 import '../DataListFilters-es.js';
 import '../DataListSort-es.js';
-import '../Combobox-es.js';
-import '../ComboboxContent-es.js';
-import '../ComboboxContentSearch-es.js';
-import '../ComboboxContentList-es.js';
+import '../FilterPicker-es.js';
+import '../FilterPickerContent-es.js';
+import '../FilterPickerContentSearch-es.js';
+import '../FilterPickerContentList-es.js';
 import '../Spinner-es.js';
 import '../AtlantisThemeContext-es.js';
 import '../identity-es.js';
@@ -67,19 +66,19 @@ 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 '../ComboboxProvider-es.js';
-import '../ComboboxLoadMore-es.js';
-import '../ComboboxContentHeader-es.js';
+import '../FilterPickerProvider-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 '../Chip-es.js';
 import '../Avatar-es.js';
 import 'color';
 import '../useChildComponent-es.js';
-import '../ComboboxActivator-es.js';
+import '../FilterPickerActivator-es.js';
 import '../DataListOverflowFade-es.js';
 import '../DataListStickyHeader-es.js';
 import '../DataListSearch-es.js';

package/dist/DataListHeader-cjs.js

@@ -5,7 +5,7 @@ var DataListContext = require('./DataListContext-cjs.js');
 var DataList_utils = require('./DataList.utils-cjs.js');
 var useResponsiveSizing = require('./useResponsiveSizing-cjs.js');
 var classnames = require('classnames');
-var AnimatedSwitcher = require('./AnimatedSwitcher-cjs.js');
+var framerMotion = require('framer-motion');
 var Text = require('./Text-cjs.js');
 var Button = require('./Button-cjs.js');
 var Checkbox = require('./Checkbox-cjs.js');
@@ -14,6 +14,22 @@ var DataListBulkActions = require('./DataListBulkActions-cjs.js');
 var useBatchSelect = require('./useBatchSelect-cjs.js');
 var useActiveLayout = require('./useActiveLayout-cjs.js');
 
+const SWAP_DURATION = 0.1;
+const SLIDE_IN_DOWN = {
+    visible: { y: 0, opacity: 1 },
+    hidden: { y: "-10%", opacity: 0 },
+};
+const SLIDE_IN_UP = {
+    visible: { y: 0, opacity: 1 },
+    hidden: { y: "10%", opacity: 0 },
+};
+// Match the wrapper's display to its child so the animation wrapper does not
+// shift surrounding inline layout.
+function applyChildDisplay(node) {
+    if (node === null || node === void 0 ? void 0 : node.firstElementChild) {
+        node.style.display = window.getComputedStyle(node.firstElementChild).display;
+    }
+}
 const DATA_LIST_HEADER_CHECKBOX_TEST_ID = "ATL-DataList-header-checkbox";
 const DATA_LIST_HEADER_BATCH_SELECT_TEST_ID = "ATL-DataList-header-batch-select";
 function DataListHeaderCheckbox({ children }) {
@@ -67,13 +83,14 @@ function DataListHeaderCheckbox({ children }) {
 }
 function ColumnHeaderContent({ canSelectAll, children, hasAtLeastOneSelected, selectedCount, deselectText, onSelect, }) {
     if (canSelectAll) {
-        return (React.createElement(AnimatedSwitcher.AnimatedSwitcher, { switched: hasAtLeastOneSelected, initialChild: children, switchTo: React.createElement("div", { "data-testid": DATA_LIST_HEADER_BATCH_SELECT_TEST_ID, className: DataList_module.styles.batchSelectContainer },
+        return (React.createElement(framerMotion.AnimatePresence, { mode: "wait", initial: false },
+            React.createElement(framerMotion.motion.div, { ref: applyChildDisplay, key: hasAtLeastOneSelected ? "batch-select" : "header", variants: hasAtLeastOneSelected ? SLIDE_IN_UP : SLIDE_IN_DOWN, initial: "hidden", animate: "visible", exit: "hidden", transition: { duration: SWAP_DURATION } }, hasAtLeastOneSelected ? (React.createElement("div", { "data-testid": DATA_LIST_HEADER_BATCH_SELECT_TEST_ID, className: DataList_module.styles.batchSelectContainer },
                 React.createElement("div", { className: DataList_module.styles.headerBatchSelect },
-                    Boolean(selectedCount) && React.createElement(Text.Text, null,
+                    Boolean(selectedCount) && (React.createElement(Text.Text, null,
                         selectedCount,
-                        " selected"),
+                        " selected")),
                     React.createElement(Button.Button, { label: deselectText, onClick: () => onSelect === null || onSelect === void 0 ? void 0 : onSelect([]), type: "tertiary" })),
-                React.createElement(DataListBulkActions.InternalDataListBulkActions, null)) }));
+                React.createElement(DataListBulkActions.InternalDataListBulkActions, null))) : (children))));
     }
     else {
         return children;

package/dist/DataListHeader-es.js

@@ -3,7 +3,7 @@ import { u as useDataListContext } from './DataListContext-es.js';
 import { c as generateHeaderElements, s as sortBreakpoints } from './DataList.utils-es.js';
 import { u as useResponsiveSizing } from './useResponsiveSizing-es.js';
 import classnames from 'classnames';
-import { A as AnimatedSwitcher } from './AnimatedSwitcher-es.js';
+import { AnimatePresence, motion } from 'framer-motion';
 import { T as Text } from './Text-es.js';
 import { B as Button } from './Button-es.js';
 import { C as Checkbox } from './Checkbox-es.js';
@@ -12,6 +12,22 @@ import { I as InternalDataListBulkActions } from './DataListBulkActions-es.js';
 import { u as useBatchSelect } from './useBatchSelect-es.js';
 import { u as useActiveLayout } from './useActiveLayout-es.js';
 
+const SWAP_DURATION = 0.1;
+const SLIDE_IN_DOWN = {
+    visible: { y: 0, opacity: 1 },
+    hidden: { y: "-10%", opacity: 0 },
+};
+const SLIDE_IN_UP = {
+    visible: { y: 0, opacity: 1 },
+    hidden: { y: "10%", opacity: 0 },
+};
+// Match the wrapper's display to its child so the animation wrapper does not
+// shift surrounding inline layout.
+function applyChildDisplay(node) {
+    if (node === null || node === void 0 ? void 0 : node.firstElementChild) {
+        node.style.display = window.getComputedStyle(node.firstElementChild).display;
+    }
+}
 const DATA_LIST_HEADER_CHECKBOX_TEST_ID = "ATL-DataList-header-checkbox";
 const DATA_LIST_HEADER_BATCH_SELECT_TEST_ID = "ATL-DataList-header-batch-select";
 function DataListHeaderCheckbox({ children }) {
@@ -65,13 +81,14 @@ function DataListHeaderCheckbox({ children }) {
 }
 function ColumnHeaderContent({ canSelectAll, children, hasAtLeastOneSelected, selectedCount, deselectText, onSelect, }) {
     if (canSelectAll) {
-        return (React__default.createElement(AnimatedSwitcher, { switched: hasAtLeastOneSelected, initialChild: children, switchTo: React__default.createElement("div", { "data-testid": DATA_LIST_HEADER_BATCH_SELECT_TEST_ID, className: styles.batchSelectContainer },
+        return (React__default.createElement(AnimatePresence, { mode: "wait", initial: false },
+            React__default.createElement(motion.div, { ref: applyChildDisplay, key: hasAtLeastOneSelected ? "batch-select" : "header", variants: hasAtLeastOneSelected ? SLIDE_IN_UP : SLIDE_IN_DOWN, initial: "hidden", animate: "visible", exit: "hidden", transition: { duration: SWAP_DURATION } }, hasAtLeastOneSelected ? (React__default.createElement("div", { "data-testid": DATA_LIST_HEADER_BATCH_SELECT_TEST_ID, className: styles.batchSelectContainer },
                 React__default.createElement("div", { className: styles.headerBatchSelect },
-                    Boolean(selectedCount) && React__default.createElement(Text, null,
+                    Boolean(selectedCount) && (React__default.createElement(Text, null,
                         selectedCount,
-                        " selected"),
+                        " selected")),
                     React__default.createElement(Button, { label: deselectText, onClick: () => onSelect === null || onSelect === void 0 ? void 0 : onSelect([]), type: "tertiary" })),
-                React__default.createElement(InternalDataListBulkActions, null)) }));
+                React__default.createElement(InternalDataListBulkActions, null))) : (children))));
     }
     else {
         return children;

package/dist/DataListSearch-cjs.js

@@ -2,17 +2,33 @@
 
 var React = require('react');
 var classnames = require('classnames');
+var framerMotion = require('framer-motion');
 var design = require('@jobber/design');
 var jobberHooks = require('@jobber/hooks');
 var InputText = require('./InputText-cjs.js');
 var DataListContext = require('./DataListContext-cjs.js');
 var DataList_const = require('./DataList.const-cjs.js');
 var Button = require('./Button-cjs.js');
-var AnimatedSwitcher = require('./AnimatedSwitcher-cjs.js');
 
 var styles = {"wrapper":"S2Bu0Rv4w-E-","searchInput":"N8dyu-defmc-","searchInputVisible":"UhMQC1SZUns-","searchButton":"zQPIm20aF50-","withNoFilters":"oOqZupWkemo-","spinning":"Wq63M3dVuYs-"};
 
 const DATA_LIST_SEARCH_TEST_ID = "ATL-DataList-Search-input-wrapper";
+const SWAP_DURATION = 0.1;
+const SLIDE_IN_DOWN = {
+    visible: { y: 0, opacity: 1 },
+    hidden: { y: "-10%", opacity: 0 },
+};
+const SLIDE_IN_UP = {
+    visible: { y: 0, opacity: 1 },
+    hidden: { y: "10%", opacity: 0 },
+};
+// Match the wrapper's display to its child so the animation wrapper does not
+// shift surrounding inline layout.
+function applyChildDisplay(node) {
+    if (node === null || node === void 0 ? void 0 : node.firstElementChild) {
+        node.style.display = window.getComputedStyle(node.firstElementChild).display;
+    }
+}
 // This component is meant to capture the props of the DataList.Search
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 function DataListSearch(_) {
@@ -45,7 +61,8 @@ function InternalDataListSearch() {
                     ? (val) => searchComponent.props.onSearch(val)
                     : handleUncontrolledChange, prefix: { icon: "search" }, clearable: "always" })),
         React.createElement("div", { className: styles.searchButton },
-            React.createElement(AnimatedSwitcher.AnimatedSwitcher, { switched: visible, initialChild: React.createElement(Button.Button, { variation: "subtle", icon: "search", ariaLabel: "Search", onClick: toggleSearch }), switchTo: React.createElement(Button.Button, { variation: "subtle", icon: "remove", ariaLabel: "Close search bar", onClick: toggleSearch }) }))));
+            React.createElement(framerMotion.AnimatePresence, { mode: "wait", initial: false },
+                React.createElement(framerMotion.motion.div, { ref: applyChildDisplay, key: visible ? "close" : "search", variants: visible ? SLIDE_IN_UP : SLIDE_IN_DOWN, initial: "hidden", animate: "visible", exit: "hidden", transition: { duration: SWAP_DURATION } }, visible ? (React.createElement(Button.Button, { variation: "subtle", icon: "remove", ariaLabel: "Close search bar", onClick: toggleSearch })) : (React.createElement(Button.Button, { variation: "subtle", icon: "search", ariaLabel: "Search", onClick: toggleSearch })))))));
     function getPlaceholder() {
         if (placeholder)
             return placeholder;

package/dist/DataListSearch-es.js

@@ -1,16 +1,32 @@
 import React__default, { useRef, useState } from 'react';
 import classnames from 'classnames';
+import { AnimatePresence, motion } from 'framer-motion';
 import { tokens } from '@jobber/design';
 import { useDebounce } from '@jobber/hooks';
 import { I as InputText } from './InputText-es.js';
 import { u as useDataListContext } from './DataListContext-es.js';
 import { S as SEARCH_DEBOUNCE_DELAY } from './DataList.const-es.js';
 import { B as Button } from './Button-es.js';
-import { A as AnimatedSwitcher } from './AnimatedSwitcher-es.js';
 
 var styles = {"wrapper":"S2Bu0Rv4w-E-","searchInput":"N8dyu-defmc-","searchInputVisible":"UhMQC1SZUns-","searchButton":"zQPIm20aF50-","withNoFilters":"oOqZupWkemo-","spinning":"Wq63M3dVuYs-"};
 
 const DATA_LIST_SEARCH_TEST_ID = "ATL-DataList-Search-input-wrapper";
+const SWAP_DURATION = 0.1;
+const SLIDE_IN_DOWN = {
+    visible: { y: 0, opacity: 1 },
+    hidden: { y: "-10%", opacity: 0 },
+};
+const SLIDE_IN_UP = {
+    visible: { y: 0, opacity: 1 },
+    hidden: { y: "10%", opacity: 0 },
+};
+// Match the wrapper's display to its child so the animation wrapper does not
+// shift surrounding inline layout.
+function applyChildDisplay(node) {
+    if (node === null || node === void 0 ? void 0 : node.firstElementChild) {
+        node.style.display = window.getComputedStyle(node.firstElementChild).display;
+    }
+}
 // This component is meant to capture the props of the DataList.Search
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 function DataListSearch(_) {
@@ -43,7 +59,8 @@ function InternalDataListSearch() {
                     ? (val) => searchComponent.props.onSearch(val)
                     : handleUncontrolledChange, prefix: { icon: "search" }, clearable: "always" })),
         React__default.createElement("div", { className: styles.searchButton },
-            React__default.createElement(AnimatedSwitcher, { switched: visible, initialChild: React__default.createElement(Button, { variation: "subtle", icon: "search", ariaLabel: "Search", onClick: toggleSearch }), switchTo: React__default.createElement(Button, { variation: "subtle", icon: "remove", ariaLabel: "Close search bar", onClick: toggleSearch }) }))));
+            React__default.createElement(AnimatePresence, { mode: "wait", initial: false },
+                React__default.createElement(motion.div, { ref: applyChildDisplay, key: visible ? "close" : "search", variants: visible ? SLIDE_IN_UP : SLIDE_IN_DOWN, initial: "hidden", animate: "visible", exit: "hidden", transition: { duration: SWAP_DURATION } }, visible ? (React__default.createElement(Button, { variation: "subtle", icon: "remove", ariaLabel: "Close search bar", onClick: toggleSearch })) : (React__default.createElement(Button, { variation: "subtle", icon: "search", ariaLabel: "Search", onClick: toggleSearch })))))));
     function getPlaceholder() {
         if (placeholder)
             return placeholder;

package/dist/DataListSort-cjs.js

@@ -2,8 +2,8 @@
 
 var React = require('react');
 var DataListContext = require('./DataListContext-cjs.js');
-var Combobox = require('./Combobox-cjs.js');
-require('./ComboboxProvider-cjs.js');
+var FilterPicker = require('./FilterPicker-cjs.js');
+require('./FilterPickerProvider-cjs.js');
 var Chip = require('./Chip-cjs.js');
 require('./tslib.es6-cjs.js');
 var Icon = require('./Icon-cjs.js');
@@ -14,16 +14,16 @@ function DataListSort() {
         return null;
     const { sortable, state, onSort } = sorting;
     const sortByOptions = getSortByOptions();
-    return (React.createElement(Combobox.Combobox, { onSelect: selection => handleKeyChange(selection[0].id.toString()), selected: [
+    return (React.createElement(FilterPicker.FilterPicker, { onSelect: selection => handleKeyChange(selection[0].id.toString()), selected: [
             {
                 id: getSelectedSortID(),
                 label: (state === null || state === void 0 ? void 0 : state.order) || "",
             },
         ] },
-        React.createElement(Combobox.Combobox.Activator, null,
+        React.createElement(FilterPicker.FilterPicker.Activator, null,
             React.createElement(Chip.Chip, { heading: "Sort", label: getButtonLabel(), variation: state ? "base" : "subtle" }, !state && (React.createElement(Chip.Chip.Suffix, null,
                 React.createElement(Icon.Icon, { name: "arrowDown", size: "small" }))))),
-        sortByOptions.map(({ label, value }) => (React.createElement(Combobox.Combobox.Option, { key: value, id: value, label: label })))));
+        sortByOptions.map(({ label, value }) => (React.createElement(FilterPicker.FilterPicker.Option, { key: value, id: value, label: label })))));
     function getSortByOptions() {
         const options = sortable.reduce((acc, sort) => {
             const label = headers[sort.key];