@jobber/components 4.77.5 → 4.77.6-JOB-84042.2

package/AnimatedPresence.d.ts

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

package/AnimatedPresence.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true,
+});
+
+var AnimatedPresence = require("./dist/AnimatedPresence");
+
+Object.keys(AnimatedPresence).forEach(function(key) {
+  if (key === "default" || key === "__esModule") return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return AnimatedPresence[key];
+    },
+  });
+});

package/dist/AnimatedPresence/AnimatedPresence.d.ts

@@ -0,0 +1,24 @@
+import { PropsWithChildren } from "react";
+declare const transitions: {
+    fromBottom: import("framer-motion").Variants;
+    fromTop: import("framer-motion").Variants;
+    fromLeft: import("framer-motion").Variants;
+    fromRight: import("framer-motion").Variants;
+    popIn: import("framer-motion").Variants;
+    fromLeftToRight: import("framer-motion").Variants;
+    fromRightToLeft: import("framer-motion").Variants;
+    fade: import("framer-motion").Variants;
+};
+export type AnimatedPresenceTransitions = keyof typeof transitions;
+interface AnimatedPresenceProps extends Required<PropsWithChildren> {
+    /**
+     * The type of transition you can use.
+     */
+    readonly transition?: AnimatedPresenceTransitions;
+    /**
+     * Whether or not to animate the children on mount. By default it's set to false.
+     */
+    readonly initial?: boolean;
+}
+export declare function AnimatedPresence(props: AnimatedPresenceProps): JSX.Element;
+export {};

package/dist/AnimatedPresence/AnimatedPresence.transitions.d.ts

@@ -0,0 +1,11 @@
+import { Variants } from "framer-motion";
+export declare const TIMING_QUICK: number;
+export declare const TIMING_BASE: number;
+export declare const fade: Variants;
+export declare const popIn: Variants;
+export declare const fromTop: Variants;
+export declare const fromBottom: Variants;
+export declare const fromLeft: Variants;
+export declare const fromRight: Variants;
+export declare const fromLeftToRight: Variants;
+export declare const fromRightToLeft: Variants;

package/dist/AnimatedPresence/hooks/usePreviousValue.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function usePreviousValue<T>(value: T): readonly [T, import("react").Dispatch<import("react").SetStateAction<T>>];

package/dist/AnimatedPresence/index.d.ts

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

package/dist/AnimatedPresence/index.js

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var AnimatedPresence = require('../AnimatedPresence-20a02aaa.js');
+require('react');
+require('framer-motion');
+require('@jobber/design');
+
+
+
+exports.AnimatedPresence = AnimatedPresence.AnimatedPresence;

package/dist/AnimatedPresence-20a02aaa.js

@@ -0,0 +1,104 @@
+'use strict';
+
+var React = require('react');
+var framerMotion = require('framer-motion');
+var design = require('@jobber/design');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const TIMING_QUICK = toSeconds(design.tokens["timing-quick"]);
+const TIMING_BASE = toSeconds(design.tokens["timing-base"]);
+const baseTransition = {
+    visible: { opacity: 1 },
+    hidden: { opacity: 0 },
+};
+const fade = {
+    visible: { opacity: 1 },
+    hidden: { opacity: 0 },
+};
+const popIn = {
+    visible: Object.assign({ scale: 1 }, baseTransition.visible),
+    hidden: Object.assign({ scale: 0.95 }, baseTransition.hidden),
+};
+const fromTop = {
+    visible: Object.assign({ y: 0 }, baseTransition.visible),
+    hidden: Object.assign({ y: -design.tokens["space-base"] }, baseTransition.hidden),
+};
+const fromBottom = {
+    visible: Object.assign({ y: 0 }, baseTransition.visible),
+    hidden: Object.assign({ y: design.tokens["space-base"] }, baseTransition.hidden),
+};
+const fromLeft = {
+    visible: Object.assign({ x: 0 }, baseTransition.visible),
+    hidden: Object.assign({ x: -design.tokens["space-base"] }, baseTransition.hidden),
+};
+const fromRight = {
+    visible: Object.assign({ x: 0 }, baseTransition.visible),
+    hidden: Object.assign({ x: design.tokens["space-base"] }, baseTransition.hidden),
+};
+const fromLeftToRight = {
+    initial: Object.assign({ x: -design.tokens["space-base"] }, baseTransition.hidden),
+    visible: Object.assign({ x: 0 }, baseTransition.visible),
+    hidden: Object.assign({ x: design.tokens["space-base"] }, baseTransition.hidden),
+};
+const fromRightToLeft = {
+    initial: Object.assign({ x: design.tokens["space-base"] }, baseTransition.hidden),
+    visible: Object.assign({ x: 0 }, baseTransition.visible),
+    hidden: Object.assign({ x: -design.tokens["space-base"] }, baseTransition.hidden),
+};
+function toSeconds(ms) {
+    return ms / 1000;
+}
+
+function usePreviousValue(value) {
+    const [previousValue, setPreviousValue] = React.useState(value);
+    React.useEffect(() => {
+        setPreviousValue(value);
+    }, [value]);
+    return [previousValue, setPreviousValue];
+}
+
+const transitions = {
+    fromBottom,
+    fromTop,
+    fromLeft,
+    fromRight,
+    popIn,
+    fromLeftToRight,
+    fromRightToLeft,
+    fade,
+};
+function AnimatedPresence(props) {
+    const shouldReduceMotion = framerMotion.useReducedMotion();
+    if (shouldReduceMotion) {
+        return React__default["default"].createElement(React__default["default"].Fragment, null, props.children);
+    }
+    return React__default["default"].createElement(InternalAnimatedPresence, Object.assign({}, props));
+}
+function InternalAnimatedPresence({ transition = "fromTop", initial = false, children, }) {
+    const transitionVariation = transitions[transition];
+    const hasInitialTransition = "initial" in transitionVariation;
+    const childCount = React.Children.count(children);
+    // Set the initial value to 0 so it staggers the animation on mount when
+    // initial is true.
+    const [lastChildIndex, setLastChildIndex] = usePreviousValue(0);
+    // Whenever the children count changes, update the last index.
+    React.useEffect(() => {
+        setLastChildIndex(childCount - 1);
+    }, [childCount]);
+    return (React__default["default"].createElement(framerMotion.AnimatePresence, { initial: initial, mode: "popLayout" }, React.Children.map(children, (child, i) => child && (React__default["default"].createElement(framerMotion.motion.div, { layout: true, variants: transitionVariation, initial: hasInitialTransition ? "initial" : "hidden", animate: "visible", exit: "hidden", transition: {
+            duration: TIMING_BASE,
+            delay: generateDelayTime(i),
+        } }, child)))));
+    function generateDelayTime(index) {
+        // Don't add a delay if it's already rendered.
+        if (lastChildIndex > index)
+            return 0;
+        // Stagger the animation starting after the previous last child index.
+        return (index - lastChildIndex) * TIMING_QUICK;
+    }
+}
+
+exports.AnimatedPresence = AnimatedPresence;

package/dist/Autocomplete/index.js

@@ -10,10 +10,11 @@ var classnames = require('classnames');
 var ReactDOM = require('react-dom');
 var reactPopper = require('react-popper');
 var useOnKeyDown = require('@jobber/hooks/useOnKeyDown');
+var useSafeLayoutEffect = require('@jobber/hooks/useSafeLayoutEffect');
 var Text = require('../Text-259af966.js');
 var Icon = require('../Icon-405a216c.js');
 var Heading = require('../Heading-1e8e4bd3.js');
-var InputText = require('../InputText-6e356985.js');
+var InputText = require('../InputText-6c71361e.js');
 require('../Typography-c45bf216.js');
 require('@jobber/design');
 require('../getAtlantisConfig-0f3e8af2.js');
@@ -127,7 +128,7 @@ function useRepositionMenu(attachTo, visible = false) {
             { name: "flip", options: { fallbackPlacements: ["top"] } },
         ],
     });
-    React.useLayoutEffect(() => {
+    useSafeLayoutEffect.useSafeLayoutEffect(() => {
         var _a;
         (_a = popper === null || popper === void 0 ? void 0 : popper.update) === null || _a === void 0 ? void 0 : _a.call(popper);
     }, [visible]);

package/dist/Card/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Card = require('../Card-426a68a8.js');
+var Card = require('../Card-0a6f3a28.js');
 require('react');
 require('classnames');
 require('../style-inject.es-9d2f5f4e.js');
@@ -13,11 +13,12 @@ require('../Button-b73a5e01.js');
 require('react-router-dom');
 require('../Icon-405a216c.js');
 require('@jobber/design');
-require('../Menu-81b12936.js');
+require('../Menu-5fc613a1.js');
 require('uuid');
 require('framer-motion');
 require('@jobber/hooks/useOnKeyDown');
 require('@jobber/hooks/useRefocusOnActivator');
+require('@jobber/hooks/useSafeLayoutEffect');
 
 
 

package/dist/{Card-426a68a8.js → Card-0a6f3a28.js}

@@ -5,7 +5,7 @@ var classnames = require('classnames');
 var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
 var Heading = require('./Heading-1e8e4bd3.js');
 var Button = require('./Button-b73a5e01.js');
-var Menu = require('./Menu-81b12936.js');
+var Menu = require('./Menu-5fc613a1.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/dist/Chip/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Chip = require('../Chip-c91fd6c8.js');
+var Chip = require('../Chip-3d1bfddc.js');
 var tslib_es6 = require('../tslib.es6-754e2961.js');
 var React = require('react');
 var Icon = require('../Icon-405a216c.js');
@@ -12,9 +12,10 @@ require('../style-inject.es-9d2f5f4e.js');
 require('../Avatar-76a799fa.js');
 require('color');
 require('../Typography-c45bf216.js');
-require('../Tooltip-27771182.js');
+require('../Tooltip-ef3d6ef4.js');
 require('react-dom');
 require('framer-motion');
+require('@jobber/hooks/useSafeLayoutEffect');
 require('react-popper');
 require('@jobber/design');
 

package/dist/{Chip-c91fd6c8.js → Chip-3d1bfddc.js}

@@ -7,7 +7,7 @@ var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
 var Avatar = require('./Avatar-76a799fa.js');
 var Icon = require('./Icon-405a216c.js');
 var Typography = require('./Typography-c45bf216.js');
-var Tooltip = require('./Tooltip-27771182.js');
+var Tooltip = require('./Tooltip-ef3d6ef4.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/dist/Chips/index.js

@@ -9,7 +9,7 @@ var useAssert = require('@jobber/hooks/useAssert');
 var Icon = require('../Icon-405a216c.js');
 var Avatar = require('../Avatar-76a799fa.js');
 var Typography = require('../Typography-c45bf216.js');
-var Tooltip = require('../Tooltip-27771182.js');
+var Tooltip = require('../Tooltip-ef3d6ef4.js');
 var uuid = require('uuid');
 var sortBy = require('lodash/sortBy');
 var useLiveAnnounce = require('@jobber/hooks/useLiveAnnounce');
@@ -22,6 +22,7 @@ require('@jobber/design');
 require('color');
 require('react-dom');
 require('framer-motion');
+require('@jobber/hooks/useSafeLayoutEffect');
 require('react-router-dom');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

package/dist/Combobox/Combobox.types.d.ts

@@ -34,6 +34,10 @@ export interface ComboboxProps {
      * The amount of time in ms to debounce the onSearch callback. Defaults to 300ms.
      */
     readonly onSearchDebounce?: number;
+    /**
+     * Callback to load more options, this is called when the user scrolls to the bottom of the list.
+     */
+    readonly onLoadMore?: () => void;
     /**
      * The Chip heading for the trigger
      */
@@ -97,6 +101,10 @@ export interface ComboboxContentProps {
      * Function called when search input changes.
      */
     readonly handleSearchChange: (value: string) => void;
+    /**
+     * Callback to load more options, this is called when the user scrolls to the bottom of the list.
+     */
+    readonly onLoadMore?: () => void;
     /**
      * Reference to the wrapping div element of all the Combobox pieces
      */
@@ -191,6 +199,10 @@ export interface ComboboxListProps {
      * Should loading state be shown.
      */
     readonly loading?: boolean;
+    /**
+     * Callback to load more options, this is called when the user scrolls to the bottom of the list.
+     */
+    readonly onLoadMore?: () => void;
 }
 export interface ComboboxActionProps {
     /**

package/dist/Combobox/components/ComboboxContent/ComboboxLoadMore/ComboboxLoadMore.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+interface ComboboxLoadMoreProps {
+    readonly onLoadMore: () => void;
+}
+export declare function ComboboxLoadMore({ onLoadMore }: ComboboxLoadMoreProps): JSX.Element;
+export {};

package/dist/Combobox/components/ComboboxContent/ComboboxLoadMore/index.d.ts

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

package/dist/Combobox/hooks/useMakeComboboxHandlers.d.ts

@@ -4,4 +4,4 @@ export interface UseMakeComboboxHandlersReturn {
     handleClose: () => void;
     handleSelection: (selection: ComboboxOption) => void;
 }
-export declare function useMakeComboboxHandlers(setOpen: (open: boolean) => void, setSearchValue: (searchValue: string) => void, selectedOptions: ComboboxOption[], shouldScroll: React.MutableRefObject<boolean>, selectedStateSetter: (selected: ComboboxOption[]) => void, multiSelect?: boolean, onClose?: () => void): UseMakeComboboxHandlersReturn;
+export declare function useMakeComboboxHandlers(setOpen: (open: boolean) => void, setSearchValue: (searchValue: string) => void, selectedOptions: ComboboxOption[], shouldScroll: React.MutableRefObject<boolean>, selectedStateSetter: (selected: ComboboxOption[]) => void, multiSelect?: boolean, onClose?: () => void, onSearch?: (searchValue: string) => void): UseMakeComboboxHandlersReturn;

package/dist/Combobox/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Combobox = require('../Combobox-237caf42.js');
+var Combobox = require('../Combobox-d24f1fec.js');
 require('react');
 require('classnames');
 require('react-dom');
@@ -14,18 +14,21 @@ require('../Typography-c45bf216.js');
 require('../Glimmer-7c317864.js');
 require('../tslib.es6-754e2961.js');
 require('../Content-e3f7b6fc.js');
+require('../Spinner-9d8fc7ff.js');
+require('../AnimatedPresence-20a02aaa.js');
+require('framer-motion');
+require('@jobber/hooks/useInView');
 require('../Button-b73a5e01.js');
 require('react-router-dom');
 require('@jobber/hooks/useRefocusOnActivator');
 require('@jobber/hooks/useFocusTrap');
 require('react-popper');
 require('@jobber/hooks/useOnKeyDown');
-require('../Chip-c91fd6c8.js');
-require('@jobber/hooks/useInView');
+require('../Chip-3d1bfddc.js');
 require('../Avatar-76a799fa.js');
 require('color');
-require('../Tooltip-27771182.js');
-require('framer-motion');
+require('../Tooltip-ef3d6ef4.js');
+require('@jobber/hooks/useSafeLayoutEffect');
 require('lodash/debounce');
 require('lodash/noop');
 require('@jobber/hooks/useAssert');

package/dist/{Combobox-237caf42.js → Combobox-d24f1fec.js}

@@ -7,14 +7,17 @@ var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
 var Icon = require('./Icon-405a216c.js');
 var Text = require('./Text-259af966.js');
 var Glimmer = require('./Glimmer-7c317864.js');
+var Spinner = require('./Spinner-9d8fc7ff.js');
+var AnimatedPresence = require('./AnimatedPresence-20a02aaa.js');
 var tslib_es6 = require('./tslib.es6-754e2961.js');
+var useInView = require('@jobber/hooks/useInView');
 var Typography = require('./Typography-c45bf216.js');
 var Button = require('./Button-b73a5e01.js');
 var useRefocusOnActivator = require('@jobber/hooks/useRefocusOnActivator');
 var useFocusTrap = require('@jobber/hooks/useFocusTrap');
 var reactPopper = require('react-popper');
 var useOnKeyDown = require('@jobber/hooks/useOnKeyDown');
-var Chip = require('./Chip-c91fd6c8.js');
+var Chip = require('./Chip-3d1bfddc.js');
 var debounce = require('lodash/debounce');
 var noop = require('lodash/noop');
 require('@jobber/design');
@@ -28,13 +31,13 @@ var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
 var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
 var noop__default = /*#__PURE__*/_interopDefaultLegacy(noop);
 
-var css_248z$6 = ".m1w5vdUZ6rQ- {\n  z-index: 1002;\n  z-index: var(--elevation-tooltip);\n  width: calc((16px * 4) * 3.75);\n  width: calc(calc(16px * 4) * 3.75);\n  width: calc(var(--space-extravagant) * 3.75);\n  box-shadow: 0px calc(16px / 16) calc(16px / 4) 0px\n      rgba(0, 0, 0, 0.1),\n    0px calc(16px / 4) 12px 0px rgba(0, 0, 0, 0.05);\n  box-shadow: var(--shadow-base);\n  margin-top: calc(16px / 2);\n  margin-top: var(--space-small);\n  border: calc(16px / 16) solid rgb(217, 223, 225);\n  border: var(--border-base) solid var(--color-border);\n  border-radius: calc(16px / 2);\n  border-radius: var(--radius-larger);\n  overflow: auto;\n  background: rgba(255, 255, 255, 1);\n  background: var(--color-surface);\n}\n\n.jobber-retheme .m1w5vdUZ6rQ- {\n  border-radius: calc(16px / 8);\n  border-radius: var(--radius-base);\n}\n\n/* CAUTION: Tests for content visibility assume this class' presence hides the content\n* so please be careful if you change this class name, or the css rules within.\n*/\n\n.m1w5vdUZ6rQ-.Zlkv2HA096A- {\n  display: none;\n  visibility: hidden;\n}\n\n.m1w5vdUZ6rQ-:focus,\n.m1w5vdUZ6rQ-:focus-visible {\n  outline: none;\n}\n\n.m1w5vdUZ6rQ-:focus-visible {\n  box-shadow: 0px 0px 0px calc(16px / 8) rgba(255, 255, 255, 1),\n    0px 0px 0px calc(16px / 4) rgb(147, 161, 169);\n  box-shadow: var(--shadow-focus);\n}\n\n.YQry-Rd6zfQ- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n      flex-direction: column;\n  position: sticky;\n  gap: calc(16px / 4);\n  gap: var(--space-smaller);\n  bottom: 0;\n  width: 100%;\n  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--color-surface);\n}\n\n.TcpqL34s4lI- {\n  padding-bottom: calc(16px / 2);\n  padding-bottom: var(--space-small);\n}\n";
-var styles$6 = {"content":"m1w5vdUZ6rQ-","hidden":"Zlkv2HA096A-","actions":"YQry-Rd6zfQ-","actionPadding":"TcpqL34s4lI-"};
-styleInject_es.styleInject(css_248z$6);
+var css_248z$7 = ".m1w5vdUZ6rQ- {\n  z-index: 1002;\n  z-index: var(--elevation-tooltip);\n  width: calc((16px * 4) * 3.75);\n  width: calc(calc(16px * 4) * 3.75);\n  width: calc(var(--space-extravagant) * 3.75);\n  box-shadow: 0px calc(16px / 16) calc(16px / 4) 0px\n      rgba(0, 0, 0, 0.1),\n    0px calc(16px / 4) 12px 0px rgba(0, 0, 0, 0.05);\n  box-shadow: var(--shadow-base);\n  margin-top: calc(16px / 2);\n  margin-top: var(--space-small);\n  border: calc(16px / 16) solid rgb(217, 223, 225);\n  border: var(--border-base) solid var(--color-border);\n  border-radius: calc(16px / 2);\n  border-radius: var(--radius-larger);\n  overflow: auto;\n  background: rgba(255, 255, 255, 1);\n  background: var(--color-surface);\n}\n\n.jobber-retheme .m1w5vdUZ6rQ- {\n  border-radius: calc(16px / 8);\n  border-radius: var(--radius-base);\n}\n\n/* CAUTION: Tests for content visibility assume this class' presence hides the content\n* so please be careful if you change this class name, or the css rules within.\n*/\n\n.m1w5vdUZ6rQ-.Zlkv2HA096A- {\n  display: none;\n  visibility: hidden;\n}\n\n.m1w5vdUZ6rQ-:focus,\n.m1w5vdUZ6rQ-:focus-visible {\n  outline: none;\n}\n\n.m1w5vdUZ6rQ-:focus-visible {\n  box-shadow: 0px 0px 0px calc(16px / 8) rgba(255, 255, 255, 1),\n    0px 0px 0px calc(16px / 4) rgb(147, 161, 169);\n  box-shadow: var(--shadow-focus);\n}\n\n.YQry-Rd6zfQ- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n      flex-direction: column;\n  position: sticky;\n  gap: calc(16px / 4);\n  gap: var(--space-smaller);\n  bottom: 0;\n  width: 100%;\n  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--color-surface);\n}\n\n.TcpqL34s4lI- {\n  padding-bottom: calc(16px / 2);\n  padding-bottom: var(--space-small);\n}\n";
+var styles$7 = {"content":"m1w5vdUZ6rQ-","hidden":"Zlkv2HA096A-","actions":"YQry-Rd6zfQ-","actionPadding":"TcpqL34s4lI-"};
+styleInject_es.styleInject(css_248z$7);
 
-var css_248z$5 = ".MIyb-oFZg9w- {\n  position: relative;\n}\n\n.WZPK91I4aJs- {\n  width: 100%;\n  padding: calc(16px * 1);\n  padding: var(--space-base);\n  padding-right: calc((16px * 1.5) * 2.25);\n  padding-right: calc(calc(16px * 1.5) * 2.25);\n  padding-right: calc(var(--space-large) * 2.25);\n  border: none;\n  border-bottom: calc(16px / 16) solid rgb(217, 223, 225);\n  border-bottom: var(--border-base) solid var(--color-border);\n  font-family: \"Inter\", Helvetica, Arial, sans-serif;\n  font-family: var(--typography--fontFamily-normal);\n  font-size: calc((16px * 1) * 0.875);\n  font-size: calc(calc(16px * 1) * 0.875);\n  font-size: var(--typography--fontSize-base);\n}\n\n.WZPK91I4aJs-::-webkit-search-decoration,\n.WZPK91I4aJs-::-webkit-search-cancel-button,\n.WZPK91I4aJs-::-webkit-search-results-button,\n.WZPK91I4aJs-::-webkit-search-results-decoration {\n  -webkit-appearance: none;\n}\n\n.WZPK91I4aJs-:focus {\n  outline: none;\n}\n\n._7loHrVUe-Rk- {\n  display: -ms-flexbox;\n  display: flex;\n  position: absolute;\n  top: 50%;\n  right: calc(16px * 1);\n  right: var(--space-base);\n  z-index: 1002;\n  z-index: var(--elevation-tooltip);\n  width: calc(16px * 1.5);\n  width: var(--space-large);\n  height: calc(16px * 1.5);\n  height: var(--space-large);\n  padding: 0;\n  border: none;\n  border-radius: 100%;\n  border-radius: var(--radius-circle);\n  background-color: rgb(238, 240, 242);\n  background-color: var(--color-surface--background);\n  cursor: pointer;\n  -webkit-transform: translateY(-50%);\n          transform: translateY(-50%);\n  -ms-flex-pack: center;\n      justify-content: center;\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n._7loHrVUe-Rk-:focus {\n  outline: transparent;\n}\n\n._7loHrVUe-Rk-:focus-visible {\n  box-shadow: 0px 0px 0px calc(16px / 8) rgba(255, 255, 255, 1),\n    0px 0px 0px calc(16px / 4) rgb(147, 161, 169);\n  box-shadow: var(--shadow-focus);\n}\n";
-var styles$5 = {"search":"MIyb-oFZg9w-","searchInput":"WZPK91I4aJs-","clearSearch":"_7loHrVUe-Rk-"};
-styleInject_es.styleInject(css_248z$5);
+var css_248z$6 = ".MIyb-oFZg9w- {\n  position: relative;\n}\n\n.WZPK91I4aJs- {\n  width: 100%;\n  padding: calc(16px * 1);\n  padding: var(--space-base);\n  padding-right: calc((16px * 1.5) * 2.25);\n  padding-right: calc(calc(16px * 1.5) * 2.25);\n  padding-right: calc(var(--space-large) * 2.25);\n  border: none;\n  border-bottom: calc(16px / 16) solid rgb(217, 223, 225);\n  border-bottom: var(--border-base) solid var(--color-border);\n  font-family: \"Inter\", Helvetica, Arial, sans-serif;\n  font-family: var(--typography--fontFamily-normal);\n  font-size: calc((16px * 1) * 0.875);\n  font-size: calc(calc(16px * 1) * 0.875);\n  font-size: var(--typography--fontSize-base);\n}\n\n.WZPK91I4aJs-::-webkit-search-decoration,\n.WZPK91I4aJs-::-webkit-search-cancel-button,\n.WZPK91I4aJs-::-webkit-search-results-button,\n.WZPK91I4aJs-::-webkit-search-results-decoration {\n  -webkit-appearance: none;\n}\n\n.WZPK91I4aJs-:focus {\n  outline: none;\n}\n\n._7loHrVUe-Rk- {\n  display: -ms-flexbox;\n  display: flex;\n  position: absolute;\n  top: 50%;\n  right: calc(16px * 1);\n  right: var(--space-base);\n  z-index: 1002;\n  z-index: var(--elevation-tooltip);\n  width: calc(16px * 1.5);\n  width: var(--space-large);\n  height: calc(16px * 1.5);\n  height: var(--space-large);\n  padding: 0;\n  border: none;\n  border-radius: 100%;\n  border-radius: var(--radius-circle);\n  background-color: rgb(238, 240, 242);\n  background-color: var(--color-surface--background);\n  cursor: pointer;\n  -webkit-transform: translateY(-50%);\n          transform: translateY(-50%);\n  -ms-flex-pack: center;\n      justify-content: center;\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n._7loHrVUe-Rk-:focus {\n  outline: transparent;\n}\n\n._7loHrVUe-Rk-:focus-visible {\n  box-shadow: 0px 0px 0px calc(16px / 8) rgba(255, 255, 255, 1),\n    0px 0px 0px calc(16px / 4) rgb(147, 161, 169);\n  box-shadow: var(--shadow-focus);\n}\n";
+var styles$6 = {"search":"MIyb-oFZg9w-","searchInput":"WZPK91I4aJs-","clearSearch":"_7loHrVUe-Rk-"};
+styleInject_es.styleInject(css_248z$6);
 
 function ComboboxContentSearch(props) {
     const searchRef = React.useRef(null);
@@ -46,9 +49,9 @@ function ComboboxContentSearch(props) {
             }, 0);
         }
     }, [props.open]);
-    return (React__default["default"].createElement("div", { className: styles$5.search },
-        React__default["default"].createElement("input", { type: "search", ref: searchRef, className: styles$5.searchInput, placeholder: props.placeholder ? `Search ${props.placeholder}` : "Search", onChange: (event) => handleSearch(event), value: props.searchValue }),
-        props.searchValue && (React__default["default"].createElement("button", { className: styles$5.clearSearch, onClick: clearSearch, type: "button", "data-testid": "ATL-Combobox-Content-Search-Clear", "aria-label": "Clear search" },
+    return (React__default["default"].createElement("div", { className: styles$6.search },
+        React__default["default"].createElement("input", { type: "search", ref: searchRef, className: styles$6.searchInput, placeholder: props.placeholder ? `Search ${props.placeholder}` : "Search", onChange: (event) => handleSearch(event), value: props.searchValue }),
+        props.searchValue && (React__default["default"].createElement("button", { className: styles$6.clearSearch, onClick: clearSearch, type: "button", "data-testid": "ATL-Combobox-Content-Search-Clear", "aria-label": "Clear search" },
             React__default["default"].createElement(Icon.Icon, { name: "remove", size: "small" })))));
     function clearSearch() {
         var _a;
@@ -62,13 +65,13 @@ function ComboboxContentSearch(props) {
     }
 }
 
-var css_248z$4 = ".SgMzjOcdE-E- {\n  position: relative;\n  padding: calc(16px / 2) 0;\n  padding: var(--space-small) 0;\n}\n\n.TwoTCjgcssc- {\n  display: -ms-flexbox;\n  display: flex;\n  max-height: calc((16px / 2) * 33.33);\n  max-height: calc(calc(16px / 2) * 33.33);\n  max-height: calc(var(--space-small) * 33.33);\n  margin: 0;\n  padding: 0;\n  overflow: auto;\n  list-style: none;\n  -ms-flex-direction: column;\n      flex-direction: column;\n  gap: calc(16px / 4);\n  gap: var(--space-smaller);\n}\n\n._8T5M7MGwCRE-,\n._4y5NXkNeIQM- {\n  padding: calc(16px / 2) calc(16px * 1);\n  padding: var(--space-small) var(--space-base);\n}\n\n.SgMzjOcdE-E-::before,\n.SgMzjOcdE-E-::after {\n  content: \"\";\n  display: block;\n  position: absolute;\n  right: 0;\n  left: 0;\n  height: calc(16px * 1);\n  height: var(--space-base);\n  pointer-events: none;\n  transition: opacity 0.3s ease-in-out;\n}\n\n.SgMzjOcdE-E-::after {\n  bottom: calc(16px / 2);\n  bottom: var(--space-small);\n  background: linear-gradient(\n    180deg,\n    rgba(255, 255, 255, 0) 0%,\n    rgb(255, 255, 255) 100%\n  );\n}\n\n.SgMzjOcdE-E-::before {\n  top: calc(16px / 2);\n  top: var(--space-small);\n  background: linear-gradient(\n    to bottom,\n    rgba(255, 255, 255, 1),\n    rgba(255, 255, 255, 0)\n  );\n}\n\n.T6E3VwBGoQM-::before,\n._6HQzxMQkXnE-::before {\n  opacity: 0;\n}\n\n._5YsJZyMDkbA-::after,\n._6HQzxMQkXnE-::after {\n  opacity: 0;\n}\n\n.A6z4OI58xoE- {\n  padding: calc(16px * 1) calc(16px * 1);\n  padding: var(--space-base) var(--space-base);\n}\n";
-var styles$4 = {"container":"SgMzjOcdE-E-","optionsList":"TwoTCjgcssc-","filterMessage":"_8T5M7MGwCRE-","emptyStateMessage":"_4y5NXkNeIQM-","scrollTop":"T6E3VwBGoQM-","scrollNone":"_6HQzxMQkXnE-","scrollBottom":"_5YsJZyMDkbA-","loadingContainer":"A6z4OI58xoE-"};
-styleInject_es.styleInject(css_248z$4);
+var css_248z$5 = ".SgMzjOcdE-E- {\n  position: relative;\n  padding: calc(16px / 2) 0;\n  padding: var(--space-small) 0;\n}\n\n.TwoTCjgcssc- {\n  display: -ms-flexbox;\n  display: flex;\n\n  max-height: calc((16px / 2) * 33.33);\n\n  max-height: calc(calc(16px / 2) * 33.33);\n\n  max-height: calc(var(--space-small) * 33.33);\n  margin: 0;\n  padding: 0;\n  overflow: auto;\n  list-style: none;\n  -ms-flex-direction: column;\n      flex-direction: column;\n  gap: calc(16px / 4);\n  gap: var(--space-smaller);\n}\n\n._8T5M7MGwCRE-,\n._4y5NXkNeIQM- {\n  padding: calc(16px / 2) calc(16px * 1);\n  padding: var(--space-small) var(--space-base);\n}\n\n.SgMzjOcdE-E-::before,\n.SgMzjOcdE-E-::after {\n  content: \"\";\n  display: block;\n  position: absolute;\n  right: 0;\n  left: 0;\n  height: calc(16px * 1);\n  height: var(--space-base);\n  pointer-events: none;\n  transition: opacity 0.3s ease-in-out;\n}\n\n.SgMzjOcdE-E-::after {\n  bottom: calc(16px / 2);\n  bottom: var(--space-small);\n  background: linear-gradient(\n    180deg,\n    rgba(255, 255, 255, 0) 0%,\n    rgb(255, 255, 255) 100%\n  );\n}\n\n.SgMzjOcdE-E-::before {\n  top: calc(16px / 2);\n  top: var(--space-small);\n  background: linear-gradient(\n    to bottom,\n    rgba(255, 255, 255, 1),\n    rgba(255, 255, 255, 0)\n  );\n}\n\n.T6E3VwBGoQM-::before,\n._6HQzxMQkXnE-::before {\n  opacity: 0;\n}\n\n._5YsJZyMDkbA-::after,\n._6HQzxMQkXnE-::after {\n  opacity: 0;\n}\n\n.A6z4OI58xoE- {\n  padding: calc(16px * 1) calc(16px * 1);\n  padding: var(--space-base) var(--space-base);\n}\n\n.A6z4OI58xoE-.QqHBSf52fPk- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-pack: center;\n      justify-content: center;\n  position: sticky;\n  bottom: 0;\n  padding: calc(16px * 1) 0;\n  padding: var(--space-base) 0;\n}\n\n.A6z4OI58xoE-.QqHBSf52fPk-:empty {\n  display: none;\n}\n";
+var styles$5 = {"container":"SgMzjOcdE-E-","optionsList":"TwoTCjgcssc-","filterMessage":"_8T5M7MGwCRE-","emptyStateMessage":"_4y5NXkNeIQM-","scrollTop":"T6E3VwBGoQM-","scrollNone":"_6HQzxMQkXnE-","scrollBottom":"_5YsJZyMDkbA-","loadingContainer":"A6z4OI58xoE-","hasOptions":"QqHBSf52fPk-"};
+styleInject_es.styleInject(css_248z$5);
 
-var css_248z$3 = "._5QdRGmaNHvc- {\n  display: -ms-flexbox;\n  display: flex;\n  min-height: calc((calc(16px * 3) - calc(16px / 4)));\n  min-height: calc((var(--space-largest) - var(--space-smaller)));\n  box-sizing: border-box;\n  margin: 0 calc(16px / 2);\n  margin: 0 var(--space-small);\n  padding: calc(16px / 2);\n  padding: var(--space-small);\n  border-radius: calc(16px / 4);\n  border-radius: var(--radius-large);\n  color: rgb(1, 41, 57);\n  color: var(--color-heading);\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 200ms;\n  transition: all var(--timing-base);\n  -ms-flex-pack: justify;\n      justify-content: space-between;\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n.jobber-retheme ._5QdRGmaNHvc- {\n  border-radius: calc(16px / 8);\n  border-radius: var(--radius-base);\n}\n\n._5QdRGmaNHvc-:hover,\n._5QdRGmaNHvc-:focus-visible {\n  background-color: rgb(244, 246, 250);\n  background-color: var(--color-surface--hover);\n}\n\n._5QdRGmaNHvc-:focus,\n._5QdRGmaNHvc-:focus-visible {\n  outline: none;\n}\n\n._5QdRGmaNHvc-:focus-visible {\n  box-shadow: 0px 0px 0px calc(16px / 8) rgba(255, 255, 255, 1),\n    0px 0px 0px calc(16px / 4) rgb(147, 161, 169);\n  box-shadow: var(--shadow-focus);\n}\n";
-var styles$3 = {"option":"_5QdRGmaNHvc-"};
-styleInject_es.styleInject(css_248z$3);
+var css_248z$4 = "._5QdRGmaNHvc- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-negative: 0;\n      flex-shrink: 0;\n  min-height: calc((calc(16px * 3) - calc(16px / 4)));\n  min-height: calc((var(--space-largest) - var(--space-smaller)));\n  box-sizing: border-box;\n  margin: 0 calc(16px / 2);\n  margin: 0 var(--space-small);\n  padding: calc(16px / 2);\n  padding: var(--space-small);\n  border-radius: calc(16px / 4);\n  border-radius: var(--radius-large);\n  color: rgb(1, 41, 57);\n  color: var(--color-heading);\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 200ms;\n  transition: all var(--timing-base);\n  -ms-flex-pack: justify;\n      justify-content: space-between;\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n.jobber-retheme ._5QdRGmaNHvc- {\n  border-radius: calc(16px / 8);\n  border-radius: var(--radius-base);\n}\n\n._5QdRGmaNHvc-:hover,\n._5QdRGmaNHvc-:focus-visible {\n  background-color: rgb(244, 246, 250);\n  background-color: var(--color-surface--hover);\n}\n\n._5QdRGmaNHvc-:focus,\n._5QdRGmaNHvc-:focus-visible {\n  outline: none;\n}\n\n._5QdRGmaNHvc-:focus-visible {\n  box-shadow: 0px 0px 0px calc(16px / 8) rgba(255, 255, 255, 1),\n    0px 0px 0px calc(16px / 4) rgb(147, 161, 169);\n  box-shadow: var(--shadow-focus);\n}\n";
+var styles$4 = {"option":"_5QdRGmaNHvc-"};
+styleInject_es.styleInject(css_248z$4);
 
 const ComboboxContext = React__default["default"].createContext({});
 function ComboboxContextProvider(_a) {
@@ -80,29 +83,42 @@ function ComboboxOption(props) {
     const { selected, selectionHandler } = React.useContext(ComboboxContext);
     const isSelected = selected.some(selection => selection.id.toString() === props.id.toString());
     return (React__default["default"].createElement("li", { key: props.id, tabIndex: -1, "data-selected": isSelected, role: "option", "aria-selected": isSelected, onClick: () => selectionHandler &&
-            selectionHandler({ id: props.id, label: props.label }), className: classnames__default["default"](styles$3.option) },
+            selectionHandler({ id: props.id, label: props.label }), className: classnames__default["default"](styles$4.option) },
         props.label,
-        isSelected && React__default["default"].createElement(Icon.Icon, { name: "checkmark", color: "blue" })));
+        React__default["default"].createElement("div", null, isSelected && React__default["default"].createElement(Icon.Icon, { name: "checkmark", color: "blue" }))));
+}
+
+var css_248z$3 = "._3s8-RC5Ky3s- {\n  -webkit-transform: translateY(calc((16px * 3) * -1));\n  -webkit-transform: translateY(calc(calc(16px * 3) * -1));\n  -webkit-transform: translateY(calc(var(--space-largest) * -1));\n          transform: translateY(calc((16px * 3) * -1));\n          transform: translateY(calc(calc(16px * 3) * -1));\n          transform: translateY(calc(var(--space-largest) * -1));\n}\n";
+var styles$3 = {"trigger":"_3s8-RC5Ky3s-"};
+styleInject_es.styleInject(css_248z$3);
+
+function ComboboxLoadMore({ onLoadMore }) {
+    const [inViewRef, isInView] = useInView.useInView();
+    React.useEffect(() => {
+        isInView && onLoadMore();
+    }, [isInView]);
+    return (React__default["default"].createElement("div", { "data-testid": "ATL-Combobox-Loadmore-Trigger", ref: inViewRef, className: styles$3.trigger }));
 }
 
 function ComboboxContentList(props) {
     const optionsExist = props.options.length > 0;
-    const showOptions = optionsExist && !props.loading;
     const hasSearchTerm = props.searchValue.length > 0;
     const { listScrollState } = useScrollState(props.optionsListRef, props.options);
-    return (React__default["default"].createElement("div", { className: classnames__default["default"](styles$4.container, styles$4[listScrollState]) },
-        optionsExist && (React__default["default"].createElement("ul", { className: styles$4.optionsList, role: "listbox", "aria-multiselectable": props.multiselect, ref: props.optionsListRef },
-            showOptions &&
-                props.options.map(option => {
-                    return (React__default["default"].createElement(ComboboxOption, { key: option.id, id: option.id, label: option.label }));
-                }),
-            props.loading && (React__default["default"].createElement(React__default["default"].Fragment, null, Array.from({ length: 5 }).map((_, index) => (React__default["default"].createElement("div", { className: styles$4.loadingContainer, key: index },
-                React__default["default"].createElement(Glimmer.Glimmer, { shape: "rectangle", size: "small" })))))))),
-        hasSearchTerm && !optionsExist && (React__default["default"].createElement("div", { className: styles$4.filterMessage },
+    return (React__default["default"].createElement("div", { className: classnames__default["default"](styles$5.container, styles$5[listScrollState]) },
+        optionsExist && (React__default["default"].createElement("ul", { className: styles$5.optionsList, role: "listbox", "aria-multiselectable": props.multiselect, ref: props.optionsListRef },
+            props.options.map(option => {
+                return (React__default["default"].createElement(ComboboxOption, { key: option.id, id: option.id, label: option.label }));
+            }),
+            React__default["default"].createElement("div", { className: classnames__default["default"]([styles$5.loadingContainer, styles$5.hasOptions]) },
+                React__default["default"].createElement(AnimatedPresence.AnimatedPresence, { transition: "fromBottom" }, Boolean(props.loading && optionsExist) && (React__default["default"].createElement(Spinner.Spinner, { size: "small" })))),
+            props.onLoadMore && (React__default["default"].createElement(ComboboxLoadMore, { onLoadMore: props.onLoadMore })))),
+        props.loading && !optionsExist && (React__default["default"].createElement(React__default["default"].Fragment, null, Array.from({ length: 5 }).map((_, index) => (React__default["default"].createElement("div", { className: styles$5.loadingContainer, key: index },
+            React__default["default"].createElement(Glimmer.Glimmer, { shape: "rectangle", size: "small" })))))),
+        hasSearchTerm && !props.loading && !optionsExist && (React__default["default"].createElement("div", { className: styles$5.filterMessage },
             React__default["default"].createElement(Text.Text, { variation: "subdued" },
                 "No results for ",
                 `“${props.searchValue}”`))),
-        !hasSearchTerm && !optionsExist && (React__default["default"].createElement("div", { className: styles$4.emptyStateMessage },
+        !hasSearchTerm && !props.loading && !optionsExist && (React__default["default"].createElement("div", { className: styles$5.emptyStateMessage },
             React__default["default"].createElement(Text.Text, { variation: "subdued" }, getZeroIndexStateText(props.subjectNoun))))));
 }
 function getZeroIndexStateText(subjectNoun) {
@@ -123,7 +139,7 @@ function useScrollState(optionsListRef, options) {
                 else if (scrollTop === 0) {
                     setlistScrollState("scrollTop");
                 }
-                else if (scrollTop + clientHeight === scrollHeight) {
+                else if (scrollTop + clientHeight >= scrollHeight) {
                     setlistScrollState("scrollBottom");
                 }
                 else {
@@ -283,16 +299,16 @@ function ComboboxContent(props) {
     const optionsExist = props.options.length > 0;
     const { optionsListRef } = useComboboxContent(props.open, props.selected);
     const { popperRef, popperStyles, attributes } = useComboboxAccessibility(props.handleSelection, props.options, optionsListRef, props.open, props.wrapperRef);
-    const template = (React__default["default"].createElement("div", Object.assign({ ref: popperRef, id: "ATL-Combobox-Content", "data-testid": "ATL-Combobox-Content", tabIndex: 0, className: classnames__default["default"](styles$6.content, { [styles$6.hidden]: !props.open }), style: popperStyles.popper }, attributes.popper),
+    const template = (React__default["default"].createElement("div", Object.assign({ ref: popperRef, id: "ATL-Combobox-Content", "data-testid": "ATL-Combobox-Content", tabIndex: 0, className: classnames__default["default"](styles$7.content, { [styles$7.hidden]: !props.open }), style: popperStyles.popper }, attributes.popper),
         React__default["default"].createElement(ComboboxContentSearch, { open: props.open, placeholder: props.subjectNoun, searchValue: props.searchValue, setSearchValue: props.setSearchValue, handleSearchChange: props.handleSearchChange }),
-        props.multiselect && optionsExist && (React__default["default"].createElement(ComboboxContentHeader, { hasOptionsVisible: optionsExist, subjectNoun: props.subjectNoun, selectedCount: props.selected.length, onClearAll: () => {
+        props.multiselect && (optionsExist || props.selected.length > 0) && (React__default["default"].createElement(ComboboxContentHeader, { hasOptionsVisible: optionsExist, subjectNoun: props.subjectNoun, selectedCount: props.selected.length, onClearAll: () => {
                 props.selectedStateSetter([]);
             }, onSelectAll: () => {
                 props.selectedStateSetter(props.options);
             } })),
-        React__default["default"].createElement(ComboboxContentList, { multiselect: props.multiselect, options: props.options, selected: props.selected, optionsListRef: optionsListRef, searchValue: props.searchValue, subjectNoun: props.subjectNoun, loading: props.loading }),
-        props.actionElements && (React__default["default"].createElement("div", { className: styles$6.actions, role: "group" }, props.actionElements.map((child, index, childrenArray) => (React__default["default"].createElement("div", { key: index, className: classnames__default["default"]({
-                [styles$6.actionPadding]: index === childrenArray.length - 1,
+        React__default["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 }),
+        props.actionElements && (React__default["default"].createElement("div", { className: styles$7.actions, role: "group" }, props.actionElements.map((child, index, childrenArray) => (React__default["default"].createElement("div", { key: index, className: classnames__default["default"]({
+                [styles$7.actionPadding]: index === childrenArray.length - 1,
             }) }, child)))))));
     return ReactDOM__default["default"].createPortal(template, document.body);
 }
@@ -335,15 +351,16 @@ var css_248z = ".W8qMZnORYxI- {\n  position: fixed;\n  top: 0;\n  right: 0;\n  b
 var styles = {"overlay":"W8qMZnORYxI-","wrapper":"_-0dkolvLF-Y-"};
 styleInject_es.styleInject(css_248z);
 
-function useMakeComboboxHandlers(setOpen, setSearchValue, selectedOptions, shouldScroll, selectedStateSetter, multiSelect, onClose) {
+function useMakeComboboxHandlers(setOpen, setSearchValue, selectedOptions, shouldScroll, selectedStateSetter, multiSelect, onClose, onSearch) {
     const handleClose = React.useCallback(() => {
         setOpen(false);
         setSearchValue("");
+        onSearch && onSearch("");
         onClose && onClose();
         if (selectedOptions.length > 0) {
             shouldScroll.current = true;
         }
-    }, [setOpen, setSearchValue, onClose, selectedOptions.length]);
+    }, [setOpen, setSearchValue, onClose, onSearch, selectedOptions.length]);
     const handleSelection = React.useCallback((selection) => {
         if (multiSelect) {
             handleMultiSelect(selectedStateSetter, selectedOptions, selection);
@@ -376,7 +393,7 @@ function useCombobox(selected, onSelect, options, onClose, multiSelect, onSearch
     const [open, setOpen] = React.useState(false);
     const [searchValue, setSearchValue] = React.useState("");
     const searchCallback = React.useCallback(debounce__default["default"]((value) => onSearch === null || onSearch === void 0 ? void 0 : onSearch(value), debounceTime), [onSearch, debounceTime]);
-    const { handleClose, handleSelection } = useMakeComboboxHandlers(setOpen, setSearchValue, selected, shouldScroll, onSelect, multiSelect, onClose);
+    const { handleClose, handleSelection } = useMakeComboboxHandlers(setOpen, setSearchValue, selected, shouldScroll, onSelect, multiSelect, onClose, onSearch);
     const internalFilteredOptions = options.filter(option => option.label.toLowerCase().includes(searchValue.toLowerCase()));
     return {
         wrapperRef,
@@ -448,7 +465,7 @@ function Combobox(props) {
         React__default["default"].createElement("div", { ref: wrapperRef, className: styles.wrapper },
             open && (React__default["default"].createElement("div", { className: styles.overlay, onClick: () => handleClose(), "data-testid": "ATL-Combobox-Overlay" })),
             triggerElement || (React__default["default"].createElement(ComboboxTrigger, { label: props.label, selected: props.selected })),
-            React__default["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, setOpen: setOpen, options: props.onSearch ? options : internalFilteredOptions, loading: props.loading, handleSearchChange: handleSearchChange }))));
+            React__default["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, setOpen: setOpen, options: props.onSearch ? options : internalFilteredOptions, loading: props.loading, handleSearchChange: handleSearchChange, onLoadMore: props.onLoadMore }))));
 }
 Combobox.Activator = ComboboxActivator;
 Combobox.Action = ComboboxAction;

package/dist/DataDump/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var Card = require('../Card-426a68a8.js');
+var Card = require('../Card-0a6f3a28.js');
 var Content = require('../Content-e3f7b6fc.js');
 var Emphasis = require('../Emphasis-bda56d3b.js');
 require('classnames');
@@ -15,11 +15,12 @@ require('../Button-b73a5e01.js');
 require('react-router-dom');
 require('../Icon-405a216c.js');
 require('@jobber/design');
-require('../Menu-81b12936.js');
+require('../Menu-5fc613a1.js');
 require('uuid');
 require('framer-motion');
 require('@jobber/hooks/useOnKeyDown');
 require('@jobber/hooks/useRefocusOnActivator');
+require('@jobber/hooks/useSafeLayoutEffect');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/dist/DataList/DataList.const.d.ts

@@ -15,6 +15,7 @@ export declare const SEARCH_DEBOUNCE_DELAY: number;
 export declare const DATA_LIST_FILTERING_SPINNER_TEST_ID = "ATL-DataList-filteringSpinner";
 export declare const DATA_LIST_LOADING_MORE_SPINNER_TEST_ID = "ATL-DataList-loadingMoreSpinner";
 export declare const DATA_LOAD_MORE_TEST_ID = "ATL-DataList-LoadMore-trigger";
+export declare const DATA_LIST_STICKY_HEADER_TEST_ID = "ATL-DataList-stickyHeader";
 export declare const TRANSITION_DURATION_IN_SECONDS: number;
 export declare const TRANSITION_DELAY_IN_SECONDS: number;
 export {};

package/dist/DataList/DataList.types.d.ts

@@ -39,6 +39,10 @@ export interface SortableOptions {
     readonly label: string;
     readonly order: "asc" | "desc";
 }
+export interface DataListSortable {
+    readonly key: string;
+    readonly options?: SortableOptions[];
+}
 export interface DataListProps<T extends DataListObject> {
     /**
      * The data to render in the DataList.
@@ -92,10 +96,7 @@ export interface DataListProps<T extends DataListObject> {
      * `onSort`: The callback function when the user sorting a column.
      */
     readonly sorting?: {
-        readonly sortable: {
-            key: string;
-            options?: SortableOptions[];
-        }[];
+        readonly sortable: DataListSortable[];
         readonly state: DataListSorting | undefined;
         readonly onSort: (sorting?: DataListSorting) => void;
     };

package/dist/DataList/index.d.ts

@@ -1,2 +1,2 @@
 export * from "./DataList";
-export { DataListItemType, DataListSorting, DataListSelectedType, DataListSelectedAllType, } from "./DataList.types";
+export { DataListItemType, DataListSorting, DataListSortable, DataListSelectedType, DataListSelectedAllType, } from "./DataList.types";

package/dist/DataList/index.js

@@ -11,7 +11,7 @@ var noop = require('lodash/noop');
 var design = require('@jobber/design');
 var framerMotion = require('framer-motion');
 var classnames = require('classnames');
-var Tooltip = require('../Tooltip-27771182.js');
+var Tooltip = require('../Tooltip-ef3d6ef4.js');
 var Button = require('../Button-b73a5e01.js');
 var useInView = require('@jobber/hooks/useInView');
 var isEmpty = require('lodash/isEmpty');
@@ -26,17 +26,19 @@ var ReactDOM = require('react-dom');
 var Checkbox = require('../Checkbox-99f6297f.js');
 var reactRouterDom = require('react-router-dom');
 var AnimatedSwitcher = require('../AnimatedSwitcher-3d45ec5d.js');
-var Combobox = require('../Combobox-237caf42.js');
-var Chip = require('../Chip-c91fd6c8.js');
+var Combobox = require('../Combobox-d24f1fec.js');
+var Chip = require('../Chip-3d1bfddc.js');
 var debounce = require('lodash/debounce');
-var InputText = require('../InputText-6e356985.js');
+var InputText = require('../InputText-6c71361e.js');
 var Spinner = require('../Spinner-9d8fc7ff.js');
 var Typography = require('../Typography-c45bf216.js');
 require('../Content-e3f7b6fc.js');
+require('@jobber/hooks/useSafeLayoutEffect');
 require('react-popper');
 require('../getAtlantisConfig-0f3e8af2.js');
 require('uuid');
 require('react-hook-form');
+require('../AnimatedPresence-20a02aaa.js');
 require('@jobber/hooks/useAssert');
 require('../Avatar-76a799fa.js');
 require('color');
@@ -52,7 +54,7 @@ var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 var isEmpty__default = /*#__PURE__*/_interopDefaultLegacy(isEmpty);
 var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
 
-var css_248z$g = ".TkdrExYnvcY-,\n.TkdrExYnvcY- * {\n  box-sizing: border-box;\n}\n\n.TkdrExYnvcY- {\n  --data-list--minimum-item-height: calc(var(--base-unit) * 3.5);\n\n  display: -ms-flexbox;\n\n  display: flex;\n  -ms-flex-direction: column;\n      flex-direction: column;\n  position: relative;\n  z-index: 0;\n  z-index: var(--elevation-default);\n  -ms-flex: 1;\n      flex: 1;\n}\n\n/*\n * Header\n */\n\n.IcAlZHoB4LI- {\n  display: -ms-flexbox;\n  display: flex;\n  position: relative;\n  z-index: 1;\n  z-index: var(--elevation-base);\n  margin-bottom: calc(16px / 2);\n  margin-bottom: var(--space-small);\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n.TFO76ysivmg- {\n  display: grid;\n  padding: calc((16px / 2) + (16px / 4)) 0;\n  padding: calc(calc(16px / 2) + calc(16px / 4)) 0;\n  padding: calc(var(--space-small) + var(--space-smaller)) 0;\n  gap: calc(16px / 2);\n  grid-gap: calc(16px / 2);\n  grid-gap: var(--space-small);\n  gap: var(--space-small);\n  grid-template-columns: auto fit-content(calc(16px * 14));\n  grid-template-columns: auto fit-content(calc(var(--base-unit) * 14));\n}\n\n.jGHZZYZm1ZY- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n      flex-direction: column;\n  -ms-flex-pack: center;\n      justify-content: center;\n  min-height: calc(16px * 3);\n  min-height: var(--space-largest);\n  padding: calc(16px / 2);\n  padding: var(--space-small);\n  border-bottom: calc(16px / 8) solid rgb(217, 223, 225);\n  border-bottom: var(--border-thick) solid var(--color-border);\n}\n\n.GiD7MjZJbcw- {\n  --data-list--header-actions-gap: var(--space-small);\n  display: -ms-flexbox;\n  display: flex;\n  gap: calc(16px / 2);\n  gap: var(--data-list--header-actions-gap);\n}\n\n@media (max-width: 489px) {\n\n.GiD7MjZJbcw- {\n    -ms-flex-pack: justify;\n        justify-content: space-between;\n    width: 100%;\n}\n  }\n\n@media (--small-screens-and-below) {\n\n.GiD7MjZJbcw- {\n    -ms-flex-pack: justify;\n        justify-content: space-between;\n    width: 100%;\n}\n  }\n\n.jMSVGIAr5tk- > p {\n  font-weight: 500;\n  white-space: nowrap;\n}\n\n.jMSVGIAr5tk- {\n  display: -ms-flexbox;\n  display: flex;\n  margin: calc((16px / 2) * -1) 0;\n  margin: calc(calc(16px / 2) * -1) 0;\n  margin: calc(var(--space-small) * -1) 0;\n  -ms-flex-align: center;\n      align-items: center;\n  gap: var(--data-list--header-actions-gap);\n}\n\n/*\n * List Item\n */\n\n.ise8kHCfhCY- {\n  position: relative;\n  padding: calc(16px / 2);\n  padding: var(--space-small);\n  border-bottom: calc(16px / 16) solid rgb(217, 223, 225);\n  border-bottom: var(--border-base) solid var(--color-border);\n  transition: all 200ms;\n  transition: all var(--timing-base);\n}\n\n.ise8kHCfhCY-,\n.Tq6e0BGwcSM- {\n  display: grid;\n  grid-template-columns: minmax(0px, auto);\n  min-height: var(--data-list--minimum-item-height);\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n.ise8kHCfhCY-.Pc0JGX6jCD4-,\n.ise8kHCfhCY-:hover,\n.ise8kHCfhCY-:focus-within {\n  --data-list-item-active-color: var(--color-surface--hover);\n  background-color: rgb(244, 246, 250);\n  background-color: var(--data-list-item-active-color);\n}\n\n.Tq6e0BGwcSM- {\n  margin: calc((16px / 2) * -1) 0;\n  margin: calc(calc(16px / 2) * -1) 0;\n  margin: calc(var(--space-small) * -1) 0;\n  padding: calc(16px / 2) 0;\n  padding: var(--space-small) 0;\n  border: none;\n  text-align: left;\n  -webkit-text-decoration: none;\n  text-decoration: none;\n  background-color: transparent;\n  cursor: pointer;\n}\n\n/**\n * Reset CSS properties on focus to ensure we only have the focus state on the\n * parent .listItem\n */\n\n.Tq6e0BGwcSM-:focus {\n  outline: none;\n  background-color: transparent;\n}\n\n/**\n * Enable a better hover and focus experience when :has() is supported.\n * This is a workaround for Firefox where the :has() selector is not supported.\n */\n\n@supports selector(*:has(*)) {\n  .ise8kHCfhCY-:hover,\n  .ise8kHCfhCY-:focus-within {\n    background-color: transparent;\n  }\n\n  .ise8kHCfhCY-:has(.Tq6e0BGwcSM-:hover, .Tq6e0BGwcSM-:focus) {\n    background-color: var(--data-list-item-active-color);\n  }\n}\n\n/*\n * List Item Selection\n */\n\n.d-79rkMqufg- {\n  display: grid;\n  -ms-flex-align: start;\n      align-items: flex-start;\n}\n\n@media (min-width: 768px) {\n\n.d-79rkMqufg- {\n    -ms-flex-align: center;\n        align-items: center;\n}\n  }\n\n@media (--medium-screens-and-up) {\n\n.d-79rkMqufg- {\n    -ms-flex-align: center;\n        align-items: center;\n}\n  }\n\n.d-79rkMqufg-,\n.jGHZZYZm1ZY- .d-79rkMqufg- {\n  grid-template-columns: -webkit-max-content minmax(0px, auto);\n  grid-template-columns: max-content minmax(0px, auto);\n  -webkit-column-gap: calc(16px / 2);\n  -webkit-column-gap: var(--space-small);\n     -moz-column-gap: calc(16px / 2);\n     -moz-column-gap: var(--space-small);\n          column-gap: calc(16px / 2);\n          column-gap: var(--space-small);\n}\n\n.jGHZZYZm1ZY- .d-79rkMqufg- {\n  display: grid;\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n.qm-SSuWTXkI- {\n  display: -ms-flexbox;\n  display: flex;\n  visibility: hidden;\n\n  /* To compensate the Checkbox's label margin that we are using for screen-readers */\n  margin-right: calc((16px * 1) * -1);\n  margin-right: calc(calc(16px * 1) * -1);\n  margin-right: calc(var(--space-base) * -1);\n}\n\n.qm-SSuWTXkI-.VA9RnQp6nbI- {\n  visibility: visible;\n}\n\n.ise8kHCfhCY- .d-79rkMqufg- > :first-child {\n  -ms-flex-order: 2;\n      order: 2;\n}\n\n.ise8kHCfhCY- .d-79rkMqufg- > :last-child {\n  -ms-flex-order: 1;\n      order: 1;\n  padding-top: calc(16px / 4);\n  padding-top: var(--space-smaller);\n  opacity: 1;\n  transition: opacity 100ms ease-in-out;\n  transition: opacity var(--transition-properties);\n  --transition-properties: var(--timing-quick) ease-in-out;\n}\n\n@media (min-width: 768px) {\n\n.ise8kHCfhCY- .d-79rkMqufg- > :last-child {\n    padding-top: 0;\n    opacity: 0;\n}\n  }\n\n@media (--medium-screens-and-up) {\n\n.ise8kHCfhCY- .d-79rkMqufg- > :last-child {\n    padding-top: 0;\n    opacity: 0;\n}\n  }\n\n.ise8kHCfhCY-:hover .d-79rkMqufg- > :last-child,\n.ise8kHCfhCY-:focus-within .d-79rkMqufg- > :last-child,\n.ise8kHCfhCY- .d-79rkMqufg-._4L7iXXzLr5k- > :last-child {\n  opacity: 1;\n}\n\n/*\n * Filters\n */\n\n.Kkp-IYmwq-s- {\n  display: -ms-flexbox;\n  display: flex;\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background-color: rgba(255, 255, 255, 0.6);\n  background-color: var(--color-overlay--dimmed);\n  -ms-flex-align: start;\n      align-items: flex-start;\n  -ms-flex-pack: center;\n      justify-content: center;\n}\n\n.m-eCShL7TU4- {\n  position: sticky;\n  top: 50vh;\n}\n\n/* This hides the text from the UI but not from the screen readers */\n\n.esUiRgWabYw- {\n  position: absolute;\n  top: auto;\n  left: -10000px;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  text-indent: -10000px;\n}\n";
+var css_248z$g = ".TkdrExYnvcY-,\n.TkdrExYnvcY- * {\n  box-sizing: border-box;\n}\n\n.TkdrExYnvcY- {\n  --data-list--minimum-item-height: calc(var(--base-unit) * 3.5);\n\n  display: -ms-flexbox;\n\n  display: flex;\n  -ms-flex-direction: column;\n      flex-direction: column;\n  position: relative;\n  z-index: 0;\n  z-index: var(--elevation-default);\n  -ms-flex: 1;\n      flex: 1;\n}\n\n/*\n * Header\n */\n\n.IcAlZHoB4LI- {\n  display: -ms-flexbox;\n  display: flex;\n  position: relative;\n  z-index: 1;\n  z-index: var(--elevation-base);\n  margin-bottom: calc(16px / 2);\n  margin-bottom: var(--space-small);\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n.TFO76ysivmg- {\n  display: grid;\n  padding: calc((16px / 2) + (16px / 4)) 0;\n  padding: calc(calc(16px / 2) + calc(16px / 4)) 0;\n  padding: calc(var(--space-small) + var(--space-smaller)) 0;\n  gap: calc(16px / 2);\n  grid-gap: calc(16px / 2);\n  grid-gap: var(--space-small);\n  gap: var(--space-small);\n  grid-template-columns: auto fit-content(calc(16px * 14));\n  grid-template-columns: auto fit-content(calc(var(--base-unit) * 14));\n}\n\n.TFO76ysivmg-:empty {\n  display: none;\n}\n\n.jGHZZYZm1ZY- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n      flex-direction: column;\n  -ms-flex-pack: center;\n      justify-content: center;\n  min-height: calc(16px * 3);\n  min-height: var(--space-largest);\n  padding: calc(16px / 2);\n  padding: var(--space-small);\n  border-bottom: calc(16px / 8) solid rgb(217, 223, 225);\n  border-bottom: var(--border-thick) solid var(--color-border);\n}\n\n.GiD7MjZJbcw- {\n  --data-list--header-actions-gap: var(--space-small);\n  display: -ms-flexbox;\n  display: flex;\n  gap: calc(16px / 2);\n  gap: var(--data-list--header-actions-gap);\n}\n\n@media (max-width: 489px) {\n\n.GiD7MjZJbcw- {\n    -ms-flex-pack: justify;\n        justify-content: space-between;\n    width: 100%;\n}\n  }\n\n@media (--small-screens-and-below) {\n\n.GiD7MjZJbcw- {\n    -ms-flex-pack: justify;\n        justify-content: space-between;\n    width: 100%;\n}\n  }\n\n.jMSVGIAr5tk- > p {\n  font-weight: 500;\n  white-space: nowrap;\n}\n\n.jMSVGIAr5tk- {\n  display: -ms-flexbox;\n  display: flex;\n  margin: calc((16px / 2) * -1) 0;\n  margin: calc(calc(16px / 2) * -1) 0;\n  margin: calc(var(--space-small) * -1) 0;\n  -ms-flex-align: center;\n      align-items: center;\n  gap: var(--data-list--header-actions-gap);\n}\n\n/*\n * List Item\n */\n\n.ise8kHCfhCY- {\n  position: relative;\n  padding: calc(16px / 2);\n  padding: var(--space-small);\n  border-bottom: calc(16px / 16) solid rgb(217, 223, 225);\n  border-bottom: var(--border-base) solid var(--color-border);\n  transition: all 200ms;\n  transition: all var(--timing-base);\n}\n\n.ise8kHCfhCY-,\n.Tq6e0BGwcSM- {\n  display: grid;\n  grid-template-columns: minmax(0px, auto);\n  min-height: var(--data-list--minimum-item-height);\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n.ise8kHCfhCY-.Pc0JGX6jCD4-,\n.ise8kHCfhCY-:hover,\n.ise8kHCfhCY-:focus-within {\n  --data-list-item-active-color: var(--color-surface--hover);\n  background-color: rgb(244, 246, 250);\n  background-color: var(--data-list-item-active-color);\n}\n\n.Tq6e0BGwcSM- {\n  margin: calc((16px / 2) * -1) 0;\n  margin: calc(calc(16px / 2) * -1) 0;\n  margin: calc(var(--space-small) * -1) 0;\n  padding: calc(16px / 2) 0;\n  padding: var(--space-small) 0;\n  border: none;\n  text-align: left;\n  -webkit-text-decoration: none;\n  text-decoration: none;\n  background-color: transparent;\n  cursor: pointer;\n}\n\n/**\n * Reset CSS properties on focus to ensure we only have the focus state on the\n * parent .listItem\n */\n\n.Tq6e0BGwcSM-:focus {\n  outline: none;\n  background-color: transparent;\n}\n\n/**\n * Enable a better hover and focus experience when :has() is supported.\n * This is a workaround for Firefox where the :has() selector is not supported.\n */\n\n@supports selector(*:has(*)) {\n  .ise8kHCfhCY-:hover,\n  .ise8kHCfhCY-:focus-within {\n    background-color: transparent;\n  }\n\n  .ise8kHCfhCY-:has(.Tq6e0BGwcSM-:hover, .Tq6e0BGwcSM-:focus) {\n    background-color: var(--data-list-item-active-color);\n  }\n}\n\n/*\n * List Item Selection\n */\n\n.d-79rkMqufg- {\n  display: grid;\n  -ms-flex-align: start;\n      align-items: flex-start;\n}\n\n@media (min-width: 768px) {\n\n.d-79rkMqufg- {\n    -ms-flex-align: center;\n        align-items: center;\n}\n  }\n\n@media (--medium-screens-and-up) {\n\n.d-79rkMqufg- {\n    -ms-flex-align: center;\n        align-items: center;\n}\n  }\n\n.d-79rkMqufg-,\n.jGHZZYZm1ZY- .d-79rkMqufg- {\n  grid-template-columns: -webkit-max-content minmax(0px, auto);\n  grid-template-columns: max-content minmax(0px, auto);\n  -webkit-column-gap: calc(16px / 2);\n  -webkit-column-gap: var(--space-small);\n     -moz-column-gap: calc(16px / 2);\n     -moz-column-gap: var(--space-small);\n          column-gap: calc(16px / 2);\n          column-gap: var(--space-small);\n}\n\n.jGHZZYZm1ZY- .d-79rkMqufg- {\n  display: grid;\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n.qm-SSuWTXkI- {\n  display: -ms-flexbox;\n  display: flex;\n  visibility: hidden;\n\n  /* To compensate the Checkbox's label margin that we are using for screen-readers */\n  margin-right: calc((16px * 1) * -1);\n  margin-right: calc(calc(16px * 1) * -1);\n  margin-right: calc(var(--space-base) * -1);\n}\n\n.qm-SSuWTXkI-.VA9RnQp6nbI- {\n  visibility: visible;\n}\n\n.ise8kHCfhCY- .d-79rkMqufg- > :first-child {\n  -ms-flex-order: 2;\n      order: 2;\n}\n\n.ise8kHCfhCY- .d-79rkMqufg- > :last-child {\n  -ms-flex-order: 1;\n      order: 1;\n  padding-top: calc(16px / 4);\n  padding-top: var(--space-smaller);\n  opacity: 1;\n  transition: opacity 100ms ease-in-out;\n  transition: opacity var(--transition-properties);\n  --transition-properties: var(--timing-quick) ease-in-out;\n}\n\n@media (min-width: 768px) {\n\n.ise8kHCfhCY- .d-79rkMqufg- > :last-child {\n    padding-top: 0;\n    opacity: 0;\n}\n  }\n\n@media (--medium-screens-and-up) {\n\n.ise8kHCfhCY- .d-79rkMqufg- > :last-child {\n    padding-top: 0;\n    opacity: 0;\n}\n  }\n\n.ise8kHCfhCY-:hover .d-79rkMqufg- > :last-child,\n.ise8kHCfhCY-:focus-within .d-79rkMqufg- > :last-child,\n.ise8kHCfhCY- .d-79rkMqufg-._4L7iXXzLr5k- > :last-child {\n  opacity: 1;\n}\n\n/*\n * Filters\n */\n\n.Kkp-IYmwq-s- {\n  display: -ms-flexbox;\n  display: flex;\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background-color: rgba(255, 255, 255, 0.6);\n  background-color: var(--color-overlay--dimmed);\n  -ms-flex-align: start;\n      align-items: flex-start;\n  -ms-flex-pack: center;\n      justify-content: center;\n}\n\n.m-eCShL7TU4- {\n  position: sticky;\n  top: 50vh;\n}\n\n/* This hides the text from the UI but not from the screen readers */\n\n.esUiRgWabYw- {\n  position: absolute;\n  top: auto;\n  left: -10000px;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  text-indent: -10000px;\n}\n";
 var styles$g = {"wrapper":"TkdrExYnvcY-","titleContainer":"IcAlZHoB4LI-","headerFilters":"TFO76ysivmg-","headerTitles":"jGHZZYZm1ZY-","batchSelectContainer":"GiD7MjZJbcw-","headerBatchSelect":"jMSVGIAr5tk-","listItem":"ise8kHCfhCY-","listItemClickable":"Tq6e0BGwcSM-","active":"Pc0JGX6jCD4-","selectable":"d-79rkMqufg-","selectAllCheckbox":"qm-SSuWTXkI-","visible":"VA9RnQp6nbI-","selected":"_4L7iXXzLr5k-","filtering":"Kkp-IYmwq-s-","filteringSpinner":"m-eCShL7TU4-","srOnly":"esUiRgWabYw-"};
 styleInject_es.styleInject(css_248z$g);
 
@@ -144,6 +146,7 @@ const SEARCH_DEBOUNCE_DELAY = design.tokens["timing-slowest"];
 const DATA_LIST_FILTERING_SPINNER_TEST_ID = "ATL-DataList-filteringSpinner";
 const DATA_LIST_LOADING_MORE_SPINNER_TEST_ID = "ATL-DataList-loadingMoreSpinner";
 const DATA_LOAD_MORE_TEST_ID = "ATL-DataList-LoadMore-trigger";
+const DATA_LIST_STICKY_HEADER_TEST_ID = "ATL-DataList-stickyHeader";
 const TRANSITION_DURATION_IN_SECONDS = design.tokens["timing-base"] / 1000;
 const TRANSITION_DELAY_IN_SECONDS = design.tokens["timing-quick"] / 1000;
 
@@ -304,13 +307,13 @@ styleInject_es.styleInject(css_248z$8);
 function DataListSortingOptions({ options, selectedOption, onSelectChange, onClose, optionsListRef, dataListHeaderTileRef, }) {
     useRefocusOnActivator.useRefocusOnActivator(!optionsListRef.current);
     useOnKeyDown.useOnKeyDown(() => onClose(), "Escape");
-    React__default["default"].useEffect(() => {
+    React.useEffect(() => {
         document.addEventListener("mousedown", handleClickOutside);
         return () => {
             document.removeEventListener("mousedown", handleClickOutside);
         };
     }, [optionsListRef, dataListHeaderTileRef, onClose]);
-    return (React__default["default"].createElement("ul", { className: styles$8.optionsList, ref: optionsListRef }, options.map((option, index) => (React__default["default"].createElement("li", { className: styles$8.option, key: index, onClick: () => onSelectChange(option), onKeyDown: event => handleKeyDown(event, option), tabIndex: 0, "data-value": option.id },
+    return (React__default["default"].createElement("ul", { className: styles$8.optionsList, ref: optionsListRef }, options.map(option => (React__default["default"].createElement("li", { className: styles$8.option, key: option.id, onClick: () => onSelectChange(option), onKeyDown: event => handleKeyDown(event, option), tabIndex: 0, "data-value": option.id },
         option.label,
         option.label === (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) && (React__default["default"].createElement(Icon.Icon, { name: "checkmark", color: "blue" })))))));
     function handleKeyDown(event, option) {
@@ -320,9 +323,9 @@ function DataListSortingOptions({ options, selectedOption, onSelectChange, onClo
     }
     function handleClickOutside(event) {
         var _a, _b;
-        const isClickInsideOptions = (_a = optionsListRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target);
-        const isClickInsideHeader = (_b = dataListHeaderTileRef.current) === null || _b === void 0 ? void 0 : _b.contains(event.target);
-        if (!isClickInsideOptions && !isClickInsideHeader) {
+        const isClickInside = ((_a = optionsListRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target)) ||
+            ((_b = dataListHeaderTileRef.current) === null || _b === void 0 ? void 0 : _b.contains(event.target));
+        if (!isClickInside) {
             onClose();
         }
     }
@@ -332,9 +335,9 @@ function DataListSortingOptions({ options, selectedOption, onSelectChange, onClo
 function DataListHeaderTile({ headers, headerKey, visible = false, }) {
     useRefocusOnActivator.useRefocusOnActivator(visible);
     const { sorting } = useDataListContext();
-    const [isDropDownOpen, setIsDropDownOpen] = React__default["default"].useState(false);
+    const [isDropDownOpen, setIsDropDownOpen] = React.useState(false);
     const optionsListRef = useFocusTrap.useFocusTrap(isDropDownOpen);
-    const dataListHeaderTileRef = React__default["default"].useRef(null);
+    const dataListHeaderTileRef = React.useRef(null);
     const sortableItem = sorting === null || sorting === void 0 ? void 0 : sorting.sortable.find(item => item.key === headerKey);
     const isSortable = Boolean(sortableItem);
     const sortingState = sorting === null || sorting === void 0 ? void 0 : sorting.state;
@@ -344,15 +347,15 @@ function DataListHeaderTile({ headers, headerKey, visible = false, }) {
         }), onClick: handleOnClick, ref: dataListHeaderTileRef },
         React__default["default"].createElement(Text.Text, { maxLines: "single" }, headers[headerKey]),
         isSortable && (sortableItem === null || sortableItem === void 0 ? void 0 : sortableItem.options) && isDropDownOpen && (React__default["default"].createElement(DataListSortingOptions, { options: sortableItem.options, selectedOption: (sorting === null || sorting === void 0 ? void 0 : sorting.state) || null, onSelectChange: handleSelectChange, onClose: () => setIsDropDownOpen(false), optionsListRef: optionsListRef, dataListHeaderTileRef: dataListHeaderTileRef })),
-        (sortingState === null || sortingState === void 0 ? void 0 : sortingState.key) === headerKey ? (React__default["default"].createElement(DataListSortingArrows, { order: sortingState.order })) : (sortingState === null || sortingState === void 0 ? void 0 : sortingState.key) !== headerKey && isSortable ? (React__default["default"].createElement(DataListSortingArrows, { order: "none" })) : null));
-    function toggleSorting(newSortingKey, newId, newLabel, newOrder) {
+        isSortable && (React__default["default"].createElement(DataListSortingArrows, { order: (sortingState === null || sortingState === void 0 ? void 0 : sortingState.key) === headerKey ? sortingState.order : "none" }))));
+    function toggleSorting(newSortingKey, newId, newLabel) {
         const isSameKey = newSortingKey === (sortingState === null || sortingState === void 0 ? void 0 : sortingState.key);
         const isDescending = (sortingState === null || sortingState === void 0 ? void 0 : sortingState.order) === "desc";
-        if (isSameKey && isDescending && newOrder === undefined) {
+        if (isSameKey && isDescending) {
             sorting === null || sorting === void 0 ? void 0 : sorting.onSort(undefined);
             return;
         }
-        const sortingOrder = newOrder || (isSameKey && !isDescending ? "desc" : "asc");
+        const sortingOrder = isSameKey ? "desc" : "asc";
         setSorting(newSortingKey, newId, newLabel, sortingOrder);
     }
     function setSorting(newSortingKey, newId, newLabel, newOrder) {
@@ -371,11 +374,8 @@ function DataListHeaderTile({ headers, headerKey, visible = false, }) {
             setIsDropDownOpen(!isDropDownOpen);
         }
         else {
-            const headerValue = headers[headerKey];
             const id = ((_b = (_a = sortableItem === null || sortableItem === void 0 ? void 0 : sortableItem.options) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.id) || headerKey;
-            if (headerValue !== undefined) {
-                toggleSorting(id, headerKey, headerValue);
-            }
+            toggleSorting(id, headerKey, headers[headerKey]);
         }
     }
     function handleSelectChange(newSortOption) {
@@ -1019,7 +1019,7 @@ function DataListStickyHeader({ children }) {
             ref.current && observer.unobserve(ref.current);
         };
     }, [handleObserver, ref.current]);
-    return (React__default["default"].createElement("div", { ref: ref, className: classnames__default["default"](styles$5.header, { [styles$5.stuck]: isStuck }) }, children));
+    return (React__default["default"].createElement("div", { "data-testid": DATA_LIST_STICKY_HEADER_TEST_ID, ref: ref, className: classnames__default["default"](styles$5.header, { [styles$5.stuck]: isStuck }) }, children));
 }
 
 var css_248z$4 = ".tj0MOMhLEEY- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n.SaPMOnvw-3c- {\n  --transition-properties: var(--timing-base) ease-in-out;\n  --button-offset: calc(var(--space-largest) - var(--space-smaller));\n\n  position: absolute;\n  top: 50%;\n  right: calc((16px * 3) - (16px / 4));\n  right: calc(calc(16px * 3) - calc(16px / 4));\n  right: var(--button-offset);\n  visibility: hidden;\n  width: 0;\n  padding: calc(16px / 4) 0;\n  padding: var(--space-smaller) 0;\n  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--color-surface);\n  opacity: 0;\n  -webkit-transform: translateY(-50%);\n          transform: translateY(-50%);\n  transition: opacity 200ms ease-in-out,\n    width 200ms ease-in-out, visibility 200ms ease-in-out;\n  transition: opacity var(--transition-properties),\n    width var(--transition-properties), visibility var(--transition-properties);\n}\n\n._3S1-91v2SYI- {\n  visibility: visible;\n  width: calc(100% - var(--button-offset));\n  opacity: 1;\n}\n\n@media (min-width: 768px) {\n\n.SaPMOnvw-3c-,\n._3S1-91v2SYI- {\n    position: static;\n    visibility: visible;\n    width: auto;\n    padding: 0;\n    background-color: transparent;\n    opacity: 1;\n    -webkit-transform: none;\n            transform: none;\n    transition: none;\n}\n  }\n\n@media (--medium-screens-and-up) {\n\n.SaPMOnvw-3c-,\n._3S1-91v2SYI- {\n    position: static;\n    visibility: visible;\n    width: auto;\n    padding: 0;\n    background-color: transparent;\n    opacity: 1;\n    -webkit-transform: none;\n            transform: none;\n    transition: none;\n}\n  }\n\n._9GlBktsUALw- {\n  display: block;\n}\n\n@media (min-width: 768px) {\n\n._9GlBktsUALw- {\n    display: none;\n}\n  }\n\n@media (--medium-screens-and-up) {\n\n._9GlBktsUALw- {\n    display: none;\n}\n  }\n\n/*\n * No Filters Styling\n *\n * When there are no filters, the search input is always visible.\n * ------------------------------------------------------------------------- */\n\n._3Pjrt42x454- .SaPMOnvw-3c- {\n  position: static;\n  visibility: visible;\n  width: auto;\n  opacity: 1;\n  transition: none;\n}\n\n@media (min-width: 768px) {\n\n._3Pjrt42x454- .SaPMOnvw-3c- {\n    max-width: 30%;\n}\n  }\n\n@media (--medium-screens-and-up) {\n\n._3Pjrt42x454- .SaPMOnvw-3c- {\n    max-width: 30%;\n}\n  }\n\n._3Pjrt42x454- ._9GlBktsUALw- {\n  display: none;\n}\n";
@@ -1233,6 +1233,8 @@ function DataList(_a) {
     const emptyStateComponents = getCompoundComponents(props.children, DataListEmptyState);
     const itemActionComponent = getCompoundComponent(props.children, DataListItemActions);
     const bulkActionsComponent = getCompoundComponent(props.children, DataListBulkActions);
+    const headerCount = Object.keys(props.headers).length;
+    const shouldRenderStickyHeader = !!filterComponent || !!searchComponent || headerCount > 0;
     return (React__default["default"].createElement(DataListContext.Provider, { value: Object.assign(Object.assign({ searchComponent,
             filterComponent,
             layoutComponents,
@@ -1245,7 +1247,7 @@ function DataList(_a) {
             registerLayout }, props), { selected, 
             // T !== DataListObject
             sorting: sorting }) },
-        React__default["default"].createElement(InternalDataList, null)));
+        React__default["default"].createElement(InternalDataList, { shouldRenderStickyHeader: shouldRenderStickyHeader })));
     function registerLayoutBreakpoints(size) {
         setLayoutBreakpoints(prev => sortBreakpoints([...prev, size]));
     }
@@ -1253,7 +1255,7 @@ function DataList(_a) {
         setLayouts(prev => (Object.assign(Object.assign({}, prev), { [size]: children })));
     }
 }
-function InternalDataList() {
+function InternalDataList({ shouldRenderStickyHeader, }) {
     const { data, title, totalCount, loadingState = "none", layoutComponents, } = useDataListContext();
     const backToTopRef = React.useRef(null);
     const initialLoading = loadingState === "initial";
@@ -1264,12 +1266,12 @@ function InternalDataList() {
             title && React__default["default"].createElement(Heading.Heading, { level: 3 }, title),
             React__default["default"].createElement(DataListTotalCount, { totalCount: totalCount, loading: initialLoading })),
         React__default["default"].createElement("div", { ref: backToTopRef }),
-        React__default["default"].createElement(DataListStickyHeader, null,
+        shouldRenderStickyHeader && (React__default["default"].createElement(DataListStickyHeader, null,
             React__default["default"].createElement("div", { className: styles$g.headerFilters },
                 React__default["default"].createElement(InternalDataListFilters, null),
                 React__default["default"].createElement(InternalDataListSearch, null)),
             React__default["default"].createElement(InternalDataListStatusBar, null),
-            React__default["default"].createElement(DataListHeader, null)),
+            React__default["default"].createElement(DataListHeader, null))),
         initialLoading && React__default["default"].createElement(DataListLoadingState, null),
         showEmptyState && React__default["default"].createElement(InternalDataListEmptyState, null),
         layoutComponents,

package/dist/InputText/index.js

@@ -2,8 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var InputText = require('../InputText-6e356985.js');
+var InputText = require('../InputText-6c71361e.js');
 require('react');
+require('@jobber/hooks/useSafeLayoutEffect');
 require('../FormField-b4e6c549.js');
 require('../tslib.es6-754e2961.js');
 require('uuid');

package/dist/{InputText-6e356985.js → InputText-6c71361e.js}

@@ -1,6 +1,7 @@
 'use strict';
 
 var React = require('react');
+var useSafeLayoutEffect = require('@jobber/hooks/useSafeLayoutEffect');
 var FormField = require('./FormField-b4e6c549.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -34,7 +35,7 @@ function InputTextInternal(props, ref) {
             }
         },
     }));
-    React.useLayoutEffect(() => {
+    useSafeLayoutEffect.useSafeLayoutEffect(() => {
         if (inputRef && inputRef.current instanceof HTMLTextAreaElement) {
             resize(inputRef.current);
         }

package/dist/Menu/Menu.d.ts

@@ -25,15 +25,15 @@ export interface ActionProps {
     /**
      * Action label
      */
-    label: string;
+    readonly label: string;
     /**
      * Parent Section Label
      */
-    sectionLabel?: string;
+    readonly sectionLabel?: string;
     /**
      * Visual cue for the action label
      */
-    icon?: IconNames;
+    readonly icon?: IconNames;
     /**
      * Callback when an action gets clicked
      */
@@ -41,5 +41,5 @@ export interface ActionProps {
     /**
      * Focus on the action when rendered
      */
-    shouldFocus?: boolean;
+    readonly shouldFocus?: boolean;
 }

package/dist/Menu/index.js

@@ -2,13 +2,14 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Menu = require('../Menu-81b12936.js');
+var Menu = require('../Menu-5fc613a1.js');
 require('react');
 require('uuid');
 require('classnames');
 require('framer-motion');
 require('@jobber/hooks/useOnKeyDown');
 require('@jobber/hooks/useRefocusOnActivator');
+require('@jobber/hooks/useSafeLayoutEffect');
 require('../style-inject.es-9d2f5f4e.js');
 require('../Button-b73a5e01.js');
 require('react-router-dom');

package/dist/{Menu-81b12936.js → Menu-5fc613a1.js}

@@ -6,6 +6,7 @@ var classnames = require('classnames');
 var framerMotion = require('framer-motion');
 var useOnKeyDown = require('@jobber/hooks/useOnKeyDown');
 var useRefocusOnActivator = require('@jobber/hooks/useRefocusOnActivator');
+var useSafeLayoutEffect = require('@jobber/hooks/useSafeLayoutEffect');
 var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
 var Button = require('./Button-b73a5e01.js');
 var Typography = require('./Typography-c45bf216.js');
@@ -45,7 +46,7 @@ function Menu({ activator, items }) {
     const buttonID = uuid.v1();
     const menuID = uuid.v1();
     useOnKeyDown.useOnKeyDown(handleKeyboardShortcut, ["Escape"]);
-    React.useLayoutEffect(() => {
+    useSafeLayoutEffect.useSafeLayoutEffect(() => {
         if (wrapperRef.current) {
             const bounds = wrapperRef.current.getBoundingClientRect();
             const newPosition = Object.assign({}, position);

package/dist/Page/index.js

@@ -11,7 +11,7 @@ var Text = require('../Text-259af966.js');
 var Content = require('../Content-e3f7b6fc.js');
 var Markdown = require('../Markdown-f7c55304.js');
 var Button = require('../Button-b73a5e01.js');
-var Menu = require('../Menu-81b12936.js');
+var Menu = require('../Menu-5fc613a1.js');
 var Emphasis = require('../Emphasis-bda56d3b.js');
 require('../Typography-c45bf216.js');
 require('../getAtlantisConfig-0f3e8af2.js');
@@ -23,6 +23,7 @@ require('uuid');
 require('framer-motion');
 require('@jobber/hooks/useOnKeyDown');
 require('@jobber/hooks/useRefocusOnActivator');
+require('@jobber/hooks/useSafeLayoutEffect');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/dist/Tooltip/index.js

@@ -2,11 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Tooltip = require('../Tooltip-27771182.js');
+var Tooltip = require('../Tooltip-ef3d6ef4.js');
 require('react');
 require('classnames');
 require('react-dom');
 require('framer-motion');
+require('@jobber/hooks/useSafeLayoutEffect');
 require('../style-inject.es-9d2f5f4e.js');
 require('react-popper');
 

package/dist/{Tooltip-27771182.js → Tooltip-ef3d6ef4.js}

@@ -4,6 +4,7 @@ var React = require('react');
 var classnames = require('classnames');
 var ReactDOM = require('react-dom');
 var framerMotion = require('framer-motion');
+var useSafeLayoutEffect = require('@jobber/hooks/useSafeLayoutEffect');
 var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
 var reactPopper = require('react-popper');
 
@@ -95,7 +96,7 @@ function Tooltip({ message, children }) {
                 activator.removeEventListener("blur", hideTooltip);
             }
         };
-        React.useLayoutEffect(() => {
+        useSafeLayoutEffect.useSafeLayoutEffect(() => {
             injectAttributes();
             addListeners();
             return () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "4.77.5",
+  "version": "4.77.6-JOB-84042.2+a50b038f",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -20,8 +20,8 @@
   ],
   "dependencies": {
     "@jobber/design": "^0.53.0",
-    "@jobber/formatters": "*",
-    "@jobber/hooks": "^2.8.1",
+    "@jobber/formatters": "^0.2.2",
+    "@jobber/hooks": "^2.8.2-JOB-84042.26+a50b038f",
     "@popperjs/core": "^2.0.6",
     "@std-proposal/temporal": "0.0.1",
     "@tanstack/react-table": "8.5.13",
@@ -31,7 +31,7 @@
     "@types/react-router": "5.1.7",
     "@types/react-router-dom": "^5.3.3",
     "@types/uuid": "^8.3.3",
-    "axios": "^0.21.2",
+    "axios": "^1.6.0",
     "classnames": "^2.3.2",
     "color": "^3.1.2",
     "filesize": "^6.1.0",
@@ -84,5 +84,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "3f1d6b70deb0ca76a8d1b818cb857151b371a598"
+  "gitHead": "a50b038fd5abd4f90eec3d8cd47d4cc70dca2c87"
 }