@jobber/components 4.29.0 → 4.31.0

package/dist/AnimatedSwitcher/index.js

@@ -2,98 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var React = require('react');
-var framerMotion = require('framer-motion');
-var Icon = require('../Icon-405a216c.js');
+var AnimatedSwitcher = require('../AnimatedSwitcher-d1e1ddcf.js');
+require('react');
+require('framer-motion');
+require('../Icon-405a216c.js');
 require('@jobber/design');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const DURATION_SIMPLE = 0.1;
-const DURATION_AVERAGE = 0.2;
-const FADE = {
-    visible: { opacity: 1 },
-    hidden: { opacity: 0 },
-};
-const SLIDE_IN_UP = {
-    visible: { y: 0, opacity: 1 },
-    hidden: { y: "10%", opacity: 0 },
-};
-const SLIDE_IN_DOWN = {
-    visible: { y: 0, opacity: 1 },
-    hidden: { y: "-10%", opacity: 0 },
-};
-const SPIN_COUNTER_CLOCK_WISE = {
-    visible: {
-        rotate: 0,
-        scale: 1,
-        transition: { duration: DURATION_AVERAGE, ease: "easeOut" },
-    },
-    hidden: {
-        rotate: 180,
-        scale: 0.6,
-        transition: { duration: DURATION_AVERAGE, ease: "easeIn" },
-    },
-};
-const SPIN_CLOCK_WISE = {
-    visible: {
-        rotate: 0,
-        scale: 1,
-        transition: { duration: DURATION_AVERAGE, ease: "easeOut" },
-    },
-    hidden: {
-        rotate: -180,
-        scale: 0.6,
-        transition: { duration: DURATION_AVERAGE, ease: "easeIn" },
-    },
-};
-
-function AnimatedSwitcher({ initialChild, switched, switchTo, type = "slideFromBottom", }) {
-    const [ref, setRef] = React.useState(null);
-    const isSwitchingBetweenIcons = initialChild.type === Icon.Icon && switchTo.type === Icon.Icon;
-    const { key, transition, child, duration } = getChildData();
-    return (React__default["default"].createElement(framerMotion.AnimatePresence, { exitBeforeEnter: true, initial: false },
-        React__default["default"].createElement(framerMotion.motion.div, { ref: setRef, key: key, variants: transition, initial: "hidden", animate: "visible", exit: "hidden", transition: { duration }, style: { display: getDisplayValue() } }, child)));
-    function getDisplayValue() {
-        if (ref === null || ref === void 0 ? void 0 : ref.firstElementChild) {
-            return window.getComputedStyle(ref.firstElementChild).display;
-        }
-    }
-    function getChildData() {
-        let data = { key: `${initialChild.type}_1`, child: initialChild };
-        if (switched) {
-            data = { key: `${switchTo.type}_2`, child: switchTo };
-        }
-        return Object.assign(Object.assign({}, data), { transition: getTransitionType(), duration: getTransitionDuration() });
-    }
-    function getTransitionType() {
-        if (isSwitchingBetweenIcons) {
-            if (switched)
-                return SPIN_COUNTER_CLOCK_WISE;
-            return SPIN_CLOCK_WISE;
-        }
-        else if (type === "fade") {
-            return FADE;
-        }
-        else {
-            if (switched)
-                return SLIDE_IN_UP;
-            return SLIDE_IN_DOWN;
-        }
-    }
-    function getTransitionDuration() {
-        switch (type) {
-            case "fade":
-                return DURATION_AVERAGE;
-            default:
-                return DURATION_SIMPLE;
-        }
-    }
-}
-AnimatedSwitcher.Icon = function AnimatedSwitcherIcon({ switchToIcon, switched, initialIcon, }) {
-    return (React__default["default"].createElement(AnimatedSwitcher, { switched: switched, initialChild: React__default["default"].createElement(Icon.Icon, { name: initialIcon }), switchTo: React__default["default"].createElement(Icon.Icon, { name: switchToIcon }) }));
-};
-
-exports.AnimatedSwitcher = AnimatedSwitcher;
+exports.AnimatedSwitcher = AnimatedSwitcher.AnimatedSwitcher;

package/dist/AnimatedSwitcher-d1e1ddcf.js

@@ -0,0 +1,96 @@
+'use strict';
+
+var React = require('react');
+var framerMotion = require('framer-motion');
+var Icon = require('./Icon-405a216c.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const DURATION_SIMPLE = 0.1;
+const DURATION_AVERAGE = 0.2;
+const FADE = {
+    visible: { opacity: 1 },
+    hidden: { opacity: 0 },
+};
+const SLIDE_IN_UP = {
+    visible: { y: 0, opacity: 1 },
+    hidden: { y: "10%", opacity: 0 },
+};
+const SLIDE_IN_DOWN = {
+    visible: { y: 0, opacity: 1 },
+    hidden: { y: "-10%", opacity: 0 },
+};
+const SPIN_COUNTER_CLOCK_WISE = {
+    visible: {
+        rotate: 0,
+        scale: 1,
+        transition: { duration: DURATION_AVERAGE, ease: "easeOut" },
+    },
+    hidden: {
+        rotate: 180,
+        scale: 0.6,
+        transition: { duration: DURATION_AVERAGE, ease: "easeIn" },
+    },
+};
+const SPIN_CLOCK_WISE = {
+    visible: {
+        rotate: 0,
+        scale: 1,
+        transition: { duration: DURATION_AVERAGE, ease: "easeOut" },
+    },
+    hidden: {
+        rotate: -180,
+        scale: 0.6,
+        transition: { duration: DURATION_AVERAGE, ease: "easeIn" },
+    },
+};
+
+function AnimatedSwitcher({ initialChild, switched, switchTo, type = "slideFromBottom", }) {
+    const [ref, setRef] = React.useState(null);
+    const isSwitchingBetweenIcons = initialChild.type === Icon.Icon && switchTo.type === Icon.Icon;
+    const { key, transition, child, duration } = getChildData();
+    return (React__default["default"].createElement(framerMotion.AnimatePresence, { exitBeforeEnter: true, initial: false },
+        React__default["default"].createElement(framerMotion.motion.div, { ref: setRef, key: key, variants: transition, initial: "hidden", animate: "visible", exit: "hidden", transition: { duration }, style: { display: getDisplayValue() } }, child)));
+    function getDisplayValue() {
+        if (ref === null || ref === void 0 ? void 0 : ref.firstElementChild) {
+            return window.getComputedStyle(ref.firstElementChild).display;
+        }
+    }
+    function getChildData() {
+        let data = { key: `${initialChild.type}_1`, child: initialChild };
+        if (switched) {
+            data = { key: `${switchTo.type}_2`, child: switchTo };
+        }
+        return Object.assign(Object.assign({}, data), { transition: getTransitionType(), duration: getTransitionDuration() });
+    }
+    function getTransitionType() {
+        if (isSwitchingBetweenIcons) {
+            if (switched)
+                return SPIN_COUNTER_CLOCK_WISE;
+            return SPIN_CLOCK_WISE;
+        }
+        else if (type === "fade") {
+            return FADE;
+        }
+        else {
+            if (switched)
+                return SLIDE_IN_UP;
+            return SLIDE_IN_DOWN;
+        }
+    }
+    function getTransitionDuration() {
+        switch (type) {
+            case "fade":
+                return DURATION_AVERAGE;
+            default:
+                return DURATION_SIMPLE;
+        }
+    }
+}
+AnimatedSwitcher.Icon = function AnimatedSwitcherIcon({ switchToIcon, switched, initialIcon, }) {
+    return (React__default["default"].createElement(AnimatedSwitcher, { switched: switched, initialChild: React__default["default"].createElement(Icon.Icon, { name: initialIcon }), switchTo: React__default["default"].createElement(Icon.Icon, { name: switchToIcon }) }));
+};
+
+exports.AnimatedSwitcher = AnimatedSwitcher;

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

@@ -10,4 +10,5 @@ export declare const EMPTY_FILTER_RESULTS_ACTION_LABEL = "Clear Filters";
  */
 export declare const BREAKPOINTS: readonly ["xs", "sm", "md", "lg", "xl"];
 export declare const BREAKPOINT_SIZES: Record<Breakpoints, number>;
+export declare const SEARCH_DEBOUNCE_DELAY: number;
 export {};

package/dist/DataList/DataList.d.ts

@@ -1,8 +1,12 @@
 /// <reference types="react" />
 import { DataListLayout } from "./components/DataListLayout";
 import { DataListObject, DataListProps } from "./DataList.types";
-export declare function DataList<T extends DataListObject>({ data, headers, loading, filterApplied, children, title, totalCount, headerVisibility, }: DataListProps<T>): JSX.Element;
+import { DataListFilters } from "./components/DataListFilters";
+import { DataListSearch } from "./components/DataListSearch";
+export declare function DataList<T extends DataListObject>(props: DataListProps<T>): JSX.Element;
 export declare namespace DataList {
     var Layout: typeof DataListLayout;
     var EmptyState: typeof import("./components/EmptyState").EmptyState;
+    var Filters: typeof DataListFilters;
+    var Search: typeof DataListSearch;
 }

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

@@ -65,3 +65,14 @@ export interface DataListProps<T extends DataListObject> {
         [Breakpoint in Breakpoints]?: boolean;
     };
 }
+export interface DataListSearchProps {
+    readonly placeholder?: string;
+    readonly onSearch: (search: string) => void;
+}
+export interface DataListFiltersProps {
+    readonly children: ReactElement | ReactElement[];
+}
+export interface DataListContextProps<T extends DataListObject> extends DataListProps<T> {
+    readonly filterComponent?: ReactElement<DataListFiltersProps>;
+    readonly searchComponent?: ReactElement<DataListSearchProps>;
+}

package/dist/DataList/components/DataListFilters/DataListFilter.const.d.ts

@@ -0,0 +1 @@
+export declare const CONTAINER_TEST_ID = "ATL-DataListFilters-Container";

package/dist/DataList/components/DataListFilters/DataListFilters.d.ts

@@ -0,0 +1,10 @@
+import { ReactElement } from "react";
+interface DataListFiltersProps {
+    readonly children: ReactElement | ReactElement[];
+}
+export declare function DataListFilters(_: DataListFiltersProps): null;
+/**
+ * Renders the DataList.Filters component
+ */
+export declare function InternalDataListFilters(): JSX.Element | null;
+export {};

package/dist/DataList/components/DataListFilters/index.d.ts

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

package/dist/DataList/components/DataListSearch/DataListSearch.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { DataListSearchProps } from "../../DataList.types";
+export declare const DATA_LIST_SEARCH_TEST_ID = "ATL-DataList-Search-input-wrapper";
+export declare function DataListSearch(_: DataListSearchProps): null;
+/**
+ * Renders the DataList.Search component
+ */
+export declare function InternalDataListSearch(): JSX.Element | null;

package/dist/DataList/components/DataListSearch/index.d.ts

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

package/dist/DataList/components/DataListStickyHeader/DataListStickyHeader.d.ts

@@ -0,0 +1,2 @@
+import { PropsWithChildren } from "react";
+export declare function DataListStickyHeader({ children }: PropsWithChildren<object>): JSX.Element;

package/dist/DataList/context/DataListContext/DataListContext.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { DataListContextProps, DataListObject } from "../../DataList.types";
+export declare const defaultValues: {
+    title: string;
+    data: never[];
+    headers: {};
+    children: never[];
+};
+export declare const DataListContext: import("react").Context<DataListContextProps<DataListObject>>;
+export declare function useDataListContext(): DataListContextProps<DataListObject>;

package/dist/DataList/context/DataListContext/index.d.ts

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

package/dist/DataList/index.js

@@ -7,33 +7,45 @@ var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
 var Button = require('../Button-7698424c.js');
 var Text = require('../Text-e7ed0974.js');
 var isEmpty = require('lodash/isEmpty');
+var design = require('@jobber/design');
 var InlineLabel = require('../InlineLabel-afd5fc6f.js');
 var FormatDate = require('../FormatDate-70ea5b43.js');
 var Heading = require('../Heading-a1191b15.js');
 var Glimmer = require('../Glimmer-cfa92a88.js');
-require('classnames');
+var classnames = require('classnames');
 require('react-router-dom');
-require('@jobber/design');
 require('../Typography-fd6f932a.js');
+var useInView = require('@jobber/hooks/useInView');
+var debounce = require('lodash/debounce');
+var InputText = require('../InputText-bb03f6d1.js');
+var AnimatedSwitcher = require('../AnimatedSwitcher-d1e1ddcf.js');
 require('../Icon-405a216c.js');
 require('../tslib.es6-5b8768b7.js');
 require('../Content-2ca1ffe1.js');
+require('../FormField-0f880b07.js');
+require('uuid');
+require('react-hook-form');
+require('../InputValidation-b5a3d92c.js');
+require('framer-motion');
+require('../Spinner-9d8fc7ff.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var isEmpty__default = /*#__PURE__*/_interopDefaultLegacy(isEmpty);
+var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
+var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
 
-var css_248z$4 = ".TkdrExYnvcY- {\n  -ms-flex: 1;\n      flex: 1;\n}\n\n.IcAlZHoB4LI- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n      align-items: center;\n  margin-bottom: calc(16px / 2);\n  margin-bottom: var(--space-small);\n}\n\n.Z8C7qJtq5Xc- {\n  position: sticky;\n  top: 0;\n  z-index: 1;\n  z-index: var(--elevation-base);\n  padding: calc(16px / 2);\n  padding: var(--space-small);\n  border-bottom: calc(16px / 8) solid rgb(225, 225, 225);\n  border-bottom: var(--border-thick) solid var(--color-border);\n  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--color-surface);\n}\n\n.Gj9kAGnfKco- > * {\n  font-weight: 500;\n}\n\n.ise8kHCfhCY- {\n  padding: calc(16px / 2);\n  padding: var(--space-small);\n  border-bottom: calc(16px / 16) solid rgb(225, 225, 225);\n  border-bottom: var(--border-base) solid var(--color-border);\n}\n";
-var styles$4 = {"wrapper":"TkdrExYnvcY-","titleContainer":"IcAlZHoB4LI-","header":"Z8C7qJtq5Xc-","headerLabel":"Gj9kAGnfKco-","listItem":"ise8kHCfhCY-"};
-styleInject_es.styleInject(css_248z$4);
+var css_248z$7 = ".TkdrExYnvcY- {\n  -ms-flex: 1;\n      flex: 1;\n}\n\n.IcAlZHoB4LI- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n      align-items: center;\n  margin-bottom: calc(16px / 2);\n  margin-bottom: var(--space-small);\n}\n\n.Z8C7qJtq5Xc- {\n  position: sticky;\n  top: 0;\n  z-index: 1;\n  z-index: var(--elevation-base);\n  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--color-surface);\n}\n\n.Z8C7qJtq5Xc-:empty {\n  display: none;\n}\n\n.TFO76ysivmg- {\n  display: grid;\n  padding: calc(16px / 2) 0;\n  padding: var(--space-small) 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 -webkit-max-content;\n  grid-template-columns: auto max-content;\n}\n\n.jGHZZYZm1ZY- {\n  padding: calc(16px / 2);\n  padding: var(--space-small);\n  border-bottom: calc(16px / 8) solid rgb(225, 225, 225);\n  border-bottom: var(--border-thick) solid var(--color-border);\n}\n\n.Gj9kAGnfKco- > * {\n  font-weight: 500;\n}\n\n.ise8kHCfhCY- {\n  padding: calc(16px / 2);\n  padding: var(--space-small);\n  border-bottom: calc(16px / 16) solid rgb(225, 225, 225);\n  border-bottom: var(--border-base) solid var(--color-border);\n}\n";
+var styles$7 = {"wrapper":"TkdrExYnvcY-","titleContainer":"IcAlZHoB4LI-","header":"Z8C7qJtq5Xc-","headerFilters":"TFO76ysivmg-","headerTitles":"jGHZZYZm1ZY-","headerLabel":"Gj9kAGnfKco-","listItem":"ise8kHCfhCY-"};
+styleInject_es.styleInject(css_248z$7);
 
-var css_248z$3 = "._--dXJma0jX0- {\n  display: -ms-flexbox;\n  display: flex;\n  height: 100%;\n  box-sizing: border-box;\n  padding: calc(16px * 1);\n  padding: var(--space-base);\n  -ms-flex-pack: center;\n      justify-content: center;\n  -ms-flex-direction: column;\n      flex-direction: column;\n  row-gap: calc(16px * 1);\n  row-gap: var(--space-base);\n  -ms-flex-align: center;\n      align-items: center;\n}\n";
-var styles$3 = {"emptyStateWrapper":"_--dXJma0jX0-"};
-styleInject_es.styleInject(css_248z$3);
+var css_248z$6 = "._--dXJma0jX0- {\n  display: -ms-flexbox;\n  display: flex;\n  height: 100%;\n  box-sizing: border-box;\n  padding: calc(16px * 1);\n  padding: var(--space-base);\n  -ms-flex-pack: center;\n      justify-content: center;\n  -ms-flex-direction: column;\n      flex-direction: column;\n  row-gap: calc(16px * 1);\n  row-gap: var(--space-base);\n  -ms-flex-align: center;\n      align-items: center;\n}\n";
+var styles$6 = {"emptyStateWrapper":"_--dXJma0jX0-"};
+styleInject_es.styleInject(css_248z$6);
 
 function DataListEmptyState({ message, action }) {
-    return (React__default["default"].createElement("div", { className: styles$3.emptyStateWrapper },
+    return (React__default["default"].createElement("div", { className: styles$6.emptyStateWrapper },
         React__default["default"].createElement(Text.Text, { align: "center" }, message),
         action && (React__default["default"].createElement(Button.Button, Object.assign({}, Object.assign(Object.assign({}, action), { variation: "subtle" }))))));
 }
@@ -57,10 +69,11 @@ const BREAKPOINT_SIZES = {
     lg: 1080,
     xl: 1440,
 };
+const SEARCH_DEBOUNCE_DELAY = design.tokens["timing-slowest"];
 
-var css_248z$2 = ".WRV-UmQmPzo- {\n  display: -ms-flexbox;\n  display: flex;\n  position: relative;\n  z-index: 0;\n  z-index: var(--elevation-default);\n  overflow: hidden;\n  gap: calc(16px / 2);\n  gap: var(--space-small);\n}\n\n.liQeWCMenD0- {\n  --overflow-bg: var(--color-white);\n\n  display: -ms-flexbox;\n\n  display: flex;\n  position: absolute;\n  top: 0;\n  right: 0;\n  height: 100%;\n  padding-left: calc(16px * 1);\n  padding-left: var(--space-base);\n  background-image: linear-gradient(\n    90deg,\n    transparent 0,\n    rgba(255, 255, 255, 1) calc(16px * 1),\n    rgba(255, 255, 255, 1) 100%\n  );\n  background-image: linear-gradient(\n    90deg,\n    transparent 0,\n    var(--overflow-bg) var(--space-base),\n    var(--overflow-bg) 100%\n  );\n  -ms-flex-align: center;\n      align-items: center;\n}\n";
-var styles$2 = {"tags":"WRV-UmQmPzo-","tagCount":"liQeWCMenD0-"};
-styleInject_es.styleInject(css_248z$2);
+var css_248z$5 = ".WRV-UmQmPzo- {\n  display: -ms-flexbox;\n  display: flex;\n  position: relative;\n  z-index: 0;\n  z-index: var(--elevation-default);\n  overflow: hidden;\n  gap: calc(16px / 2);\n  gap: var(--space-small);\n}\n\n.liQeWCMenD0- {\n  --overflow-bg: var(--color-white);\n\n  display: -ms-flexbox;\n\n  display: flex;\n  position: absolute;\n  top: 0;\n  right: 0;\n  height: 100%;\n  padding-left: calc(16px * 1);\n  padding-left: var(--space-base);\n  background-image: linear-gradient(\n    90deg,\n    transparent 0,\n    rgba(255, 255, 255, 1) calc(16px * 1),\n    rgba(255, 255, 255, 1) 100%\n  );\n  background-image: linear-gradient(\n    90deg,\n    transparent 0,\n    var(--overflow-bg) var(--space-base),\n    var(--overflow-bg) 100%\n  );\n  -ms-flex-align: center;\n      align-items: center;\n}\n";
+var styles$5 = {"tags":"WRV-UmQmPzo-","tagCount":"liQeWCMenD0-"};
+styleInject_es.styleInject(css_248z$5);
 
 function DataListTags({ items }) {
     const ref = React.useRef(null);
@@ -82,10 +95,10 @@ function DataListTags({ items }) {
             elements === null || elements === void 0 ? void 0 : elements.forEach(element => observer.unobserve(element));
         };
     }, [items]);
-    return (React__default["default"].createElement("div", { className: styles$2.tags, ref: ref },
+    return (React__default["default"].createElement("div", { className: styles$5.tags, ref: ref },
         items.filter(Boolean).map((tag, index) => (React__default["default"].createElement("div", { key: tag, "data-tag-element": index },
             React__default["default"].createElement(InlineLabel.InlineLabel, null, tag)))),
-        Boolean(visibleItems) && (React__default["default"].createElement("div", { className: styles$2.tagCount },
+        Boolean(visibleItems) && (React__default["default"].createElement("div", { className: styles$5.tagCount },
             React__default["default"].createElement(Text.Text, null,
                 "+",
                 visibleItems)))));
@@ -163,7 +176,7 @@ function generateListItemElements(data) {
  * Generate the header elements with the default styling
  */
 function generateHeaderElements(headers) {
-    const headerElements = Object.keys(headers).reduce((acc, key) => (Object.assign(Object.assign({}, acc), { [key]: (React__default["default"].createElement("div", { className: styles$4.headerLabel },
+    const headerElements = Object.keys(headers).reduce((acc, key) => (Object.assign(Object.assign({}, acc), { [key]: (React__default["default"].createElement("div", { className: styles$7.headerLabel },
             React__default["default"].createElement(Text.Text, { variation: "subdued", maxLines: "single", size: "small" }, headers[key]))) })), {});
     return isEmpty__default["default"](headerElements) ? undefined : headerElements;
 }
@@ -196,9 +209,9 @@ function sortSizeProp(sizeProp) {
     return sizeProp.sort((a, b) => BREAKPOINTS.indexOf(a) - BREAKPOINTS.indexOf(b));
 }
 
-var css_248z$1 = ".F56prQsXm3A- {\n  min-width: 80px;\n  margin-left: calc(16px / 2);\n  margin-left: var(--space-small);\n}\n";
-var styles$1 = {"results":"F56prQsXm3A-"};
-styleInject_es.styleInject(css_248z$1);
+var css_248z$4 = ".F56prQsXm3A- {\n  min-width: 80px;\n  margin-left: calc(16px / 2);\n  margin-left: var(--space-small);\n}\n";
+var styles$4 = {"results":"F56prQsXm3A-"};
+styleInject_es.styleInject(css_248z$4);
 
 const DATALIST_TOTALCOUNT_TEST_ID = "ATL-DataList-TotalCount";
 function DataListTotalCount({ totalCount, loading, }) {
@@ -214,12 +227,12 @@ function DataListTotalCount({ totalCount, loading, }) {
             totalCount.toLocaleString(),
             " results)"));
     }
-    return (React__default["default"].createElement("div", { className: styles$1.results, "data-testid": DATALIST_TOTALCOUNT_TEST_ID }, output));
+    return (React__default["default"].createElement("div", { className: styles$4.results, "data-testid": DATALIST_TOTALCOUNT_TEST_ID }, output));
 }
 
-var css_248z = ".Rh--6fVpkm4- {\n  padding: calc(16px / 2);\n  padding: var(--space-small);\n}\n\n.zbS7UvpVoWI- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n      flex-direction: column;\n  -ms-flex-pack: justify;\n      justify-content: space-between;\n  height: calc(16px * 3);\n  height: var(--space-largest);\n  padding: calc(16px * 1) 0;\n  padding: var(--space-base) 0;\n}\n";
-var styles = {"loadingItem":"Rh--6fVpkm4-","mobileLoadingState":"zbS7UvpVoWI-"};
-styleInject_es.styleInject(css_248z);
+var css_248z$3 = ".Rh--6fVpkm4- {\n  padding: calc(16px / 2);\n  padding: var(--space-small);\n}\n\n.zbS7UvpVoWI- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n      flex-direction: column;\n  -ms-flex-pack: justify;\n      justify-content: space-between;\n  height: calc(16px * 3);\n  height: var(--space-largest);\n  padding: calc(16px * 1) 0;\n  padding: var(--space-base) 0;\n}\n";
+var styles$3 = {"loadingItem":"Rh--6fVpkm4-","mobileLoadingState":"zbS7UvpVoWI-"};
+styleInject_es.styleInject(css_248z$3);
 
 function DataListLayoutInternal({ layouts, renderLayout, mediaMatches, }) {
     const sizePropsOfLayouts = layouts === null || layouts === void 0 ? void 0 : layouts.map(layout => layout.props.size || "xs");
@@ -257,7 +270,7 @@ function DataListItems({ layouts, mediaMatches, data, }) {
     const elementData = generateListItemElements(data);
     return (React__default["default"].createElement(DataListLayoutInternal, { layouts: layouts, mediaMatches: mediaMatches, renderLayout: layout => {
             return (React__default["default"].createElement(React__default["default"].Fragment, null, elementData.map((child, i) => {
-                return (React__default["default"].createElement("div", { className: styles$4.listItem, key: `${data[i].id}` }, layout.props.children(child)));
+                return (React__default["default"].createElement("div", { className: styles$7.listItem, key: `${data[i].id}` }, layout.props.children(child)));
             })));
         } }));
 }
@@ -273,7 +286,7 @@ function DataListHeader({ layouts, mediaMatches, headerData, headerVisibility, }
     if (!showHeader || !headerData)
         return React__default["default"].createElement(React__default["default"].Fragment, null);
     return (React__default["default"].createElement(DataListLayoutInternal, { layouts: layouts, renderLayout: layout => {
-            return (React__default["default"].createElement("div", { className: styles$4.header }, layout.props.children(headerData)));
+            return (React__default["default"].createElement("div", { className: styles$7.headerTitles }, layout.props.children(headerData)));
         }, mediaMatches: mediaMatches }));
 }
 
@@ -291,13 +304,13 @@ function DataListLoadingState({ loading, headers, layouts, mediaMatches, }) {
             if (layout.props.size === "xs") {
                 return React__default["default"].createElement(LoadingStateXSBreakpoint, null);
             }
-            return (React__default["default"].createElement(React__default["default"].Fragment, null, loadingElements.map((child, i) => (React__default["default"].createElement("div", { className: styles.loadingItem, key: i, "data-testid": DATALIST_LOADINGSTATE_ROW_TEST_ID }, layout.props.children(child))))));
+            return (React__default["default"].createElement(React__default["default"].Fragment, null, loadingElements.map((child, i) => (React__default["default"].createElement("div", { className: styles$3.loadingItem, key: i, "data-testid": DATALIST_LOADINGSTATE_ROW_TEST_ID }, layout.props.children(child))))));
         } }));
 }
 function LoadingStateXSBreakpoint() {
     const loadingData = new Array(LOADING_STATE_LIMIT_ITEMS).fill(0);
     return (React__default["default"].createElement(React__default["default"].Fragment, null, loadingData.map((_, i) => {
-        return (React__default["default"].createElement("div", { className: styles.mobileLoadingState, key: i },
+        return (React__default["default"].createElement("div", { className: styles$3.mobileLoadingState, key: i },
             React__default["default"].createElement(Glimmer.Glimmer.Text, null)));
     })));
 }
@@ -327,7 +340,121 @@ function breakpointToMediaQuery(breakpoint) {
     return `(min-width: ${BREAKPOINT_SIZES[breakpoint]}px)`;
 }
 
-function DataList({ data, headers, loading = false, filterApplied = false, children, title, totalCount, headerVisibility = { xs: true, sm: true, md: true, lg: true, xl: true }, }) {
+const defaultValues = {
+    title: "",
+    data: [],
+    headers: {},
+    children: [],
+};
+const DataListContext = React.createContext(defaultValues);
+function useDataListContext() {
+    return React.useContext(DataListContext);
+}
+
+var css_248z$2 = ".E-mG3prPSN8- {\n  -ms-flex-item-align: center;\n      align-self: center;\n  position: relative;\n  min-width: 0;\n}\n\n._0LGNoZxtqSE- {\n  display: grid;\n  overflow-x: auto;\n  grid-auto-flow: column;\n  grid-auto-columns: -webkit-max-content;\n  grid-auto-columns: max-content;\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n._0LGNoZxtqSE- > :nth-child(n + 3):not(:last-child) {\n  margin-left: calc(16px / 2);\n  margin-left: var(--space-small);\n}\n\n.LA3-gtgehrE- {\n  visibility: hidden;\n}\n\n.fSPvawYWzZ8-::before,\n.ChfEJMPPVTk-::after {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  width: calc(16px * 1.5);\n  width: var(--space-large);\n  height: 100%;\n  background-image: linear-gradient(\n    to right,\n    rgba(255, 255, 255, 1) 0%,\n    rgba(255, 255, 255, 0) 100%\n  );\n  background-image: linear-gradient(\n    var(--data-list-filters-overflow-shadow-angle, to right),\n    var(--color-surface) 0%,\n    rgba(var(--color-white--rgb), 0) 100%\n  );\n  pointer-events: none;\n}\n\n.fSPvawYWzZ8-::before {\n  left: 0;\n}\n\n.ChfEJMPPVTk-::after {\n  --data-list-filters-overflow-shadow-angle: to left;\n  right: 0;\n}\n";
+var styles$2 = {"filters":"E-mG3prPSN8-","filterActions":"_0LGNoZxtqSE-","overflowTrigger":"LA3-gtgehrE-","overflowLeft":"fSPvawYWzZ8-","overflowRight":"ChfEJMPPVTk-"};
+styleInject_es.styleInject(css_248z$2);
+
+const CONTAINER_TEST_ID = "ATL-DataListFilters-Container";
+
+// This component is meant to capture the props of the DataList.Filters
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function DataListFilters(_) {
+    return null;
+}
+/**
+ * Renders the DataList.Filters component
+ */
+function InternalDataListFilters() {
+    const { children: parentChildren } = useDataListContext();
+    const component = getCompoundComponent(parentChildren, DataListFilters);
+    const [leftRef, isLeftVisible] = useInView.useInView();
+    const [rightRef, isRightVisible] = useInView.useInView();
+    if (!component)
+        return null;
+    const { children } = component.props;
+    return (React__default["default"].createElement("div", { "data-testid": CONTAINER_TEST_ID, className: classnames__default["default"](styles$2.filters, {
+            [styles$2.overflowLeft]: !isLeftVisible,
+            [styles$2.overflowRight]: !isRightVisible,
+        }) },
+        React__default["default"].createElement("div", { className: styles$2.filterActions },
+            React__default["default"].createElement("span", { ref: leftRef, className: styles$2.overflowTrigger }),
+            children,
+            React__default["default"].createElement("span", { ref: rightRef, className: styles$2.overflowTrigger }))));
+}
+
+var css_248z$1 = ".SaPMOnvw-3c- {\n  --transition-properties: var(--timing-base) ease-in-out;\n  --button-offset: calc(var(--space-largest) - var(--space-smallest));\n\n  position: absolute;\n  /* Inputs are off by 1 when put beside a button */\n  top: calc((16px / 2) - 1px);\n  top: calc(calc(16px / 2) - 1px);\n  top: calc(var(--space-small) - 1px);\n  right: calc((16px * 3) - (16px / 8));\n  right: calc(calc(16px * 3) - calc(16px / 8));\n  right: var(--button-offset);\n  visibility: hidden;\n  width: 0;\n  opacity: 0;\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    opacity: 1;\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    opacity: 1;\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";
+var styles$1 = {"searchInput":"SaPMOnvw-3c-","searchInputVisible":"_3S1-91v2SYI-","searchButton":"_9GlBktsUALw-","withNoFilters":"_3Pjrt42x454-"};
+styleInject_es.styleInject(css_248z$1);
+
+const DATA_LIST_SEARCH_TEST_ID = "ATL-DataList-Search-input-wrapper";
+// This component is meant to capture the props of the DataList.Search
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function DataListSearch(_) {
+    return null;
+}
+/**
+ * Renders the DataList.Search component
+ */
+function InternalDataListSearch() {
+    const inputRef = React.useRef(null);
+    const [visible, setVisible] = React.useState(false);
+    const { searchComponent, filterComponent, title } = useDataListContext();
+    const debouncedSearch = React.useCallback(debounce__default["default"]((value) => { var _a; return (_a = searchComponent === null || searchComponent === void 0 ? void 0 : searchComponent.props) === null || _a === void 0 ? void 0 : _a.onSearch(value); }, SEARCH_DEBOUNCE_DELAY), [searchComponent === null || searchComponent === void 0 ? void 0 : searchComponent.props.onSearch]);
+    if (!searchComponent)
+        return null;
+    const { placeholder } = searchComponent.props;
+    return (React__default["default"].createElement("div", { className: classnames__default["default"]({ [styles$1.withNoFilters]: !filterComponent }) },
+        React__default["default"].createElement("div", { "data-testid": DATA_LIST_SEARCH_TEST_ID, className: classnames__default["default"](styles$1.searchInput, {
+                [styles$1.searchInputVisible]: visible,
+            }) },
+            React__default["default"].createElement(InputText.InputText, { ref: inputRef, placeholder: getPlaceholder(), onChange: debouncedSearch, prefix: { icon: "search" }, size: "small" })),
+        React__default["default"].createElement("div", { className: styles$1.searchButton },
+            React__default["default"].createElement(AnimatedSwitcher.AnimatedSwitcher, { switched: visible, initialChild: React__default["default"].createElement(Button.Button, { variation: "subtle", icon: "search", ariaLabel: "Search", onClick: toggleSearch }), switchTo: React__default["default"].createElement(Button.Button, { variation: "subtle", icon: "remove", ariaLabel: "Close search bar", onClick: toggleSearch }) }))));
+    function getPlaceholder() {
+        if (placeholder)
+            return placeholder;
+        if (title)
+            return `Search ${title}...`;
+        return `Search...`;
+    }
+    function toggleSearch() {
+        const visibility = !visible;
+        setVisible(visibility);
+        if (visibility && inputRef.current) {
+            setTimeout(inputRef.current.focus, design.tokens["timing-quick"]);
+        }
+    }
+}
+
+var css_248z = ".PGOHzrMh374- {\n  --offset: 1px;\n  --sticky-header-transition-properties: var(--timing-base) ease-in-out;\n\n  position: sticky;\n  top: calc(1px * -1);\n  top: calc(var(--offset) * -1);\n  z-index: 1;\n  z-index: var(--elevation-base);\n  padding-top: 1px;\n  padding-top: var(--offset);\n  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--color-surface);\n}\n\n/**\n * Draw a border that gets covered by the column headers border when it shows up.\n *\n * Mostly to prevent us from writing some complex JS to remove the border when\n * the column headers show up.\n */\n\n.PGOHzrMh374-::before {\n  content: \"\";\n  display: block;\n  position: absolute;\n  bottom: 0;\n  left: 50%;\n  z-index: -1;\n  width: 0;\n  height: 0;\n  background-color: rgb(225, 225, 225);\n  background-color: var(--color-border);\n  -webkit-transform: translateX(-50%);\n          transform: translateX(-50%);\n  transition: height var(--sticky-header-transition-properties)\n      100ms,\n    width var(--sticky-header-transition-properties);\n  transition: height var(--sticky-header-transition-properties)\n      var(--timing-quick),\n    width var(--sticky-header-transition-properties);\n}\n\n.PGjWc5ocjpI-::before {\n  width: 100%;\n  height: calc(16px / 8);\n  height: var(--border-thick);\n  transition: height var(--sticky-header-transition-properties),\n    width var(--sticky-header-transition-properties) 100ms;\n  transition: height var(--sticky-header-transition-properties),\n    width var(--sticky-header-transition-properties) var(--timing-quick);\n}\n";
+var styles = {"header":"PGOHzrMh374-","stuck":"PGjWc5ocjpI-"};
+styleInject_es.styleInject(css_248z);
+
+function DataListStickyHeader({ children }) {
+    const [isStuck, setIsStuck] = React.useState(false);
+    const ref = React.useRef(null);
+    const handleObserver = React.useCallback(([e]) => setIsStuck(e.intersectionRatio < 1), [setIsStuck]);
+    React.useEffect(() => {
+        if (!window.IntersectionObserver)
+            return;
+        const observer = new IntersectionObserver(handleObserver, { threshold: 1 });
+        ref.current && observer.observe(ref.current);
+        return () => {
+            ref.current && observer.unobserve(ref.current);
+        };
+    }, [handleObserver, ref.current]);
+    return (React__default["default"].createElement("div", { ref: ref, className: classnames__default["default"](styles.header, { [styles.stuck]: isStuck }) }, children));
+}
+
+function DataList(props) {
+    const searchComponent = getCompoundComponent(props.children, DataListSearch);
+    const filterComponent = getCompoundComponent(props.children, DataListFilters);
+    return (React__default["default"].createElement(DataListContext.Provider, { value: Object.assign({ searchComponent, filterComponent }, props) },
+        React__default["default"].createElement(InternalDataList, null)));
+}
+function InternalDataList() {
+    const { data, headers, loading = false, filterApplied = false, children, title, totalCount, headerVisibility = { xs: true, sm: true, md: true, lg: true, xl: true }, } = useDataListContext();
     const allLayouts = getCompoundComponents(children, DataListLayout);
     const headerData = generateHeaderElements(headers);
     const mediaMatches = useLayoutMediaQueries();
@@ -338,16 +465,22 @@ function DataList({ data, headers, loading = false, filterApplied = false, child
         isFilterApplied,
         setIsFilterApplied,
     });
-    return (React__default["default"].createElement("div", { className: styles$4.wrapper },
-        React__default["default"].createElement("div", { className: styles$4.titleContainer },
+    return (React__default["default"].createElement("div", { className: styles$7.wrapper },
+        React__default["default"].createElement("div", { className: styles$7.titleContainer },
             title && React__default["default"].createElement(Heading.Heading, { level: 3 }, title),
             React__default["default"].createElement(DataListTotalCount, { totalCount: totalCount, loading: loading })),
-        headerData && (React__default["default"].createElement(DataListHeader, { layouts: allLayouts, headerData: headerData, headerVisibility: headerVisibility, mediaMatches: mediaMatches })),
+        React__default["default"].createElement(DataListStickyHeader, null,
+            React__default["default"].createElement("div", { className: styles$7.headerFilters },
+                React__default["default"].createElement(InternalDataListFilters, null),
+                React__default["default"].createElement(InternalDataListSearch, null)),
+            headerData && (React__default["default"].createElement(DataListHeader, { layouts: allLayouts, headerData: headerData, headerVisibility: headerVisibility, mediaMatches: mediaMatches }))),
         React__default["default"].createElement(DataListLoadingState, { loading: loading, headers: headers, layouts: allLayouts, mediaMatches: mediaMatches }),
         !loading && (React__default["default"].createElement(DataListItems, { data: data, layouts: allLayouts, mediaMatches: mediaMatches })),
         showEmptyState && EmptyStateComponent));
 }
 DataList.Layout = DataListLayout;
 DataList.EmptyState = DataListEmptyState;
+DataList.Filters = DataListFilters;
+DataList.Search = DataListSearch;
 
 exports.DataList = DataList;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "4.29.0",
+  "version": "4.31.0",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -21,7 +21,7 @@
   "dependencies": {
     "@jobber/design": "^0.44.4",
     "@jobber/formatters": "*",
-    "@jobber/hooks": "^2.1.5",
+    "@jobber/hooks": "^2.2.0",
     "@popperjs/core": "^2.0.6",
     "@std-proposal/temporal": "0.0.1",
     "@tanstack/react-table": "8.5.13",
@@ -84,5 +84,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "55ffa8935cb077bc56d52eb7d8a5e060f78224b7"
+  "gitHead": "da7a60fec85ae3efd2451ff0d0e80c1e9b32d84b"
 }