@jobber/components 4.85.4-CJS-to-ESM.2 → 4.85.4-CJS-to-ESM.4

package/dist/DataListItemClickable-abe0242c.js

@@ -0,0 +1,51 @@
+'use strict';
+
+var React = require('react');
+var DataListContext = require('./DataListContext-f40570a7.js');
+var reactRouterDom = require('react-router-dom');
+var DataList = require('./DataList-b5f0a522.js');
+var DataListLayoutContext = require('./DataListLayoutContext-39a0d016.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+function DataListItemClickableInternal({ onClick, url, to, children, }) {
+    const { activeItem } = DataListLayoutContext.useDataListLayoutActionsContext();
+    if (!activeItem)
+        return React__default["default"].createElement(React__default["default"].Fragment, null, children);
+    if (to) {
+        const computedTo = typeof to === "string" ? to : to(activeItem);
+        return (React__default["default"].createElement(reactRouterDom.Link, { className: DataList.styles.listItemClickable, to: computedTo, onClick: handleClick }, children));
+    }
+    if (url) {
+        const href = typeof url === "string" ? url : url(activeItem);
+        return (React__default["default"].createElement("a", { className: DataList.styles.listItemClickable, href: href, onClick: handleClick }, children));
+    }
+    if (onClick) {
+        return (
+        // A button can be nested within the list item. To prevent a button inside
+        // button error, we need to manually declare a div to be a button
+        React__default["default"].createElement("div", { role: "button", tabIndex: 0, className: DataList.styles.listItemClickable, onClick: handleClick, onKeyDown: e => {
+                if (e.key === "Enter" || e.key === " ") {
+                    e.preventDefault();
+                    handleClick();
+                }
+            } }, children));
+    }
+    return React__default["default"].createElement(React__default["default"].Fragment, null, children);
+    function handleClick() {
+        activeItem && (onClick === null || onClick === void 0 ? void 0 : onClick(activeItem));
+    }
+}
+
+function DataListItemClickable({ children }) {
+    const { itemActionComponent } = DataListContext.useDataListContext();
+    if (itemActionComponent) {
+        const props = itemActionComponent.props;
+        return (React__default["default"].createElement(DataListItemClickableInternal, Object.assign({}, props), children));
+    }
+    return React__default["default"].createElement(React__default["default"].Fragment, null, children);
+}
+
+exports.DataListItemClickable = DataListItemClickable;

package/dist/DataListItems-00dd20c1.js

@@ -0,0 +1,19 @@
+import React, { useState } from 'react';
+import { u as useDataListContext } from './DataListContext-736a42a2.js';
+import { D as DataListLayoutContext } from './DataListLayoutContext-7daf863d.js';
+import { D as DataListItem } from './DataListItem-5cbf5f14.js';
+
+function DataListItems({ size = "xs", }) {
+    const { data, layouts } = useDataListContext();
+    const [hasInLayoutActions, setHasInLayoutActions] = useState(false);
+    const layout = layouts[size];
+    if (!layout)
+        return null;
+    return (React.createElement(DataListLayoutContext.Provider, { value: {
+            isInLayoutProvider: true,
+            hasInLayoutActions,
+            setHasInLayoutActions,
+        } }, data.map((child, i) => (React.createElement(DataListItem, { key: data[i].id, index: i, item: child, layout: layout })))));
+}
+
+export { DataListItems as D };

package/dist/DataListItems-09c65d2c.js

@@ -0,0 +1,25 @@
+'use strict';
+
+var React = require('react');
+var DataListContext = require('./DataListContext-f40570a7.js');
+var DataListLayoutContext = require('./DataListLayoutContext-83df2a23.js');
+var DataListItem = require('./DataListItem-3d39e2eb.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+function DataListItems({ size = "xs", }) {
+    const { data, layouts } = DataListContext.useDataListContext();
+    const [hasInLayoutActions, setHasInLayoutActions] = React.useState(false);
+    const layout = layouts[size];
+    if (!layout)
+        return null;
+    return (React__default["default"].createElement(DataListLayoutContext.DataListLayoutContext.Provider, { value: {
+            isInLayoutProvider: true,
+            hasInLayoutActions,
+            setHasInLayoutActions,
+        } }, data.map((child, i) => (React__default["default"].createElement(DataListItem.DataListItem, { key: data[i].id, index: i, item: child, layout: layout })))));
+}
+
+exports.DataListItems = DataListItems;

package/dist/DataListLayout-4cdcaa1f.js

@@ -0,0 +1,25 @@
+'use strict';
+
+var React = require('react');
+var DataListItems = require('./DataListItems-09c65d2c.js');
+var DataListContext = require('./DataListContext-f40570a7.js');
+var useActiveLayout = require('./useActiveLayout-adbf2bc3.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+function DataListLayout({ children, size = "xs", }) {
+    const { registerLayout, loadingState } = DataListContext.useDataListContext();
+    const { activeBreakpoint } = useActiveLayout.useActiveLayout();
+    React.useEffect(() => {
+        registerLayout(size, children);
+    }, [size, children]);
+    const shouldRenderList = size === activeBreakpoint;
+    if (loadingState !== "initial" && shouldRenderList) {
+        return React__default["default"].createElement(DataListItems.DataListItems, { size: size });
+    }
+    return null;
+}
+
+exports.DataListLayout = DataListLayout;

package/dist/DataListLayout-99863988.js

@@ -0,0 +1,19 @@
+import React, { useEffect } from 'react';
+import { D as DataListItems } from './DataListItems-00dd20c1.js';
+import { u as useDataListContext } from './DataListContext-736a42a2.js';
+import { u as useActiveLayout } from './useActiveLayout-101129a8.js';
+
+function DataListLayout({ children, size = "xs", }) {
+    const { registerLayout, loadingState } = useDataListContext();
+    const { activeBreakpoint } = useActiveLayout();
+    useEffect(() => {
+        registerLayout(size, children);
+    }, [size, children]);
+    const shouldRenderList = size === activeBreakpoint;
+    if (loadingState !== "initial" && shouldRenderList) {
+        return React.createElement(DataListItems, { size: size });
+    }
+    return null;
+}
+
+export { DataListLayout as D };

package/dist/DataListLayoutActions-43cc8589.js

@@ -0,0 +1,39 @@
+import React, { Children, useEffect } from 'react';
+import { u as useDataListContext } from './DataListContext-736a42a2.js';
+import { u as useDataListLayoutContext } from './DataListLayoutContext-7daf863d.js';
+import { D as DataListItemActionsOverflow } from './DataListItemActionsOverflow-6004ba59.js';
+import { G as Glimmer } from './Glimmer-aea7f8ae.js';
+import { s as styleInject } from './style-inject.es-a0e1a0ba.js';
+
+var css_248z = "._0m75bgCVBhk- {\n  visibility: hidden;\n}\n";
+var styles = {"hidden":"_0m75bgCVBhk-"};
+styleInject(css_248z);
+
+function DataListLayoutActions() {
+    const { itemActionComponent, loadingState } = useDataListContext();
+    const { setHasInLayoutActions } = useDataListLayoutContext();
+    const { children: actionsChildren } = (itemActionComponent === null || itemActionComponent === void 0 ? void 0 : itemActionComponent.props) || {};
+    const actions = Children.toArray(actionsChildren);
+    const hasActions = actions.length > 0;
+    useEffect(() => {
+        setHasInLayoutActions(hasActions);
+        return () => {
+            setHasInLayoutActions(false);
+        };
+    }, []);
+    if (loadingState === "initial") {
+        return React.createElement(Glimmer, { shape: "square", size: "large" });
+    }
+    if (!hasActions)
+        return null;
+    return (React.createElement(DataListLayoutActionsWrapper, null,
+        React.createElement(DataListItemActionsOverflow, { actions: actions })));
+}
+function DataListLayoutActionsWrapper({ children }) {
+    const { isInLayoutProvider } = useDataListLayoutContext();
+    if (isInLayoutProvider)
+        return React.createElement(React.Fragment, null, children);
+    return React.createElement("div", { className: styles.hidden }, children);
+}
+
+export { DataListLayoutActions as D };

package/dist/DataListLayoutActions-9f8cc2a2.js

@@ -0,0 +1,45 @@
+'use strict';
+
+var React = require('react');
+var DataListContext = require('./DataListContext-f40570a7.js');
+var DataListLayoutContext = require('./DataListLayoutContext-83df2a23.js');
+var DataListItemActionsOverflow = require('./DataListItemActionsOverflow-9c491ed9.js');
+var Glimmer = require('./Glimmer-84dee1ed.js');
+var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var css_248z = "._0m75bgCVBhk- {\n  visibility: hidden;\n}\n";
+var styles = {"hidden":"_0m75bgCVBhk-"};
+styleInject_es.styleInject(css_248z);
+
+function DataListLayoutActions() {
+    const { itemActionComponent, loadingState } = DataListContext.useDataListContext();
+    const { setHasInLayoutActions } = DataListLayoutContext.useDataListLayoutContext();
+    const { children: actionsChildren } = (itemActionComponent === null || itemActionComponent === void 0 ? void 0 : itemActionComponent.props) || {};
+    const actions = React.Children.toArray(actionsChildren);
+    const hasActions = actions.length > 0;
+    React.useEffect(() => {
+        setHasInLayoutActions(hasActions);
+        return () => {
+            setHasInLayoutActions(false);
+        };
+    }, []);
+    if (loadingState === "initial") {
+        return React__default["default"].createElement(Glimmer.Glimmer, { shape: "square", size: "large" });
+    }
+    if (!hasActions)
+        return null;
+    return (React__default["default"].createElement(DataListLayoutActionsWrapper, null,
+        React__default["default"].createElement(DataListItemActionsOverflow.DataListItemActionsOverflow, { actions: actions })));
+}
+function DataListLayoutActionsWrapper({ children }) {
+    const { isInLayoutProvider } = DataListLayoutContext.useDataListLayoutContext();
+    if (isInLayoutProvider)
+        return React__default["default"].createElement(React__default["default"].Fragment, null, children);
+    return React__default["default"].createElement("div", { className: styles.hidden }, children);
+}
+
+exports.DataListLayoutActions = DataListLayoutActions;

package/dist/DataListLayoutContext-39a0d016.js

@@ -0,0 +1,11 @@
+'use strict';
+
+var React = require('react');
+
+const DataListLayoutActionsContext = React.createContext({ activeItem: undefined });
+function useDataListLayoutActionsContext() {
+    return React.useContext(DataListLayoutActionsContext);
+}
+
+exports.DataListLayoutActionsContext = DataListLayoutActionsContext;
+exports.useDataListLayoutActionsContext = useDataListLayoutActionsContext;

package/dist/DataListLayoutContext-7daf863d.js

@@ -0,0 +1,14 @@
+import noop from 'lodash/noop';
+import { createContext, useContext } from 'react';
+
+const defaultValues = {
+    isInLayoutProvider: false,
+    hasInLayoutActions: false,
+    setHasInLayoutActions: noop,
+};
+const DataListLayoutContext = createContext(defaultValues);
+function useDataListLayoutContext() {
+    return useContext(DataListLayoutContext);
+}
+
+export { DataListLayoutContext as D, defaultValues as d, useDataListLayoutContext as u };

package/dist/DataListLayoutContext-83df2a23.js

@@ -0,0 +1,22 @@
+'use strict';
+
+var noop = require('lodash/noop');
+var React = require('react');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var noop__default = /*#__PURE__*/_interopDefaultLegacy(noop);
+
+const defaultValues = {
+    isInLayoutProvider: false,
+    hasInLayoutActions: false,
+    setHasInLayoutActions: noop__default["default"],
+};
+const DataListLayoutContext = React.createContext(defaultValues);
+function useDataListLayoutContext() {
+    return React.useContext(DataListLayoutContext);
+}
+
+exports.DataListLayoutContext = DataListLayoutContext;
+exports.defaultValues = defaultValues;
+exports.useDataListLayoutContext = useDataListLayoutContext;

package/dist/DataListLayoutContext-9237afd1.js

@@ -0,0 +1,8 @@
+import { createContext, useContext } from 'react';
+
+const DataListLayoutActionsContext = createContext({ activeItem: undefined });
+function useDataListLayoutActionsContext() {
+    return useContext(DataListLayoutActionsContext);
+}
+
+export { DataListLayoutActionsContext as D, useDataListLayoutActionsContext as u };

package/dist/DataListLoadMore-1b519950.js

@@ -0,0 +1,34 @@
+import React, { useEffect } from 'react';
+import { s as styleInject } from './style-inject.es-a0e1a0ba.js';
+import { useInView } from '@jobber/hooks/useInView';
+import { u as useDataListContext } from './DataListContext-736a42a2.js';
+import { d as DATA_LOAD_MORE_TEST_ID, e as DATA_LIST_LOADING_MORE_SPINNER_TEST_ID } from './DataList.const-3ae7ceef.js';
+import { S as Spinner } from './Spinner-5d8359b8.js';
+import { B as Button } from './Button-9ae092b3.js';
+
+var css_248z = ".IC-Y9bTIVFo- {\n  position: relative;\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\n.PbZLGpbI6ZM-,\n._6zA6B-jmz6o- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-pack: center;\n      justify-content: center;\n  padding: calc(16px / 2);\n  padding: var(--space-small);\n}\n\n._6zA6B-jmz6o- {\n  opacity: 0;\n  -webkit-animation: gZ4DUv82g5I- 200ms ease 200ms forwards;\n  -webkit-animation: gZ4DUv82g5I- var(--timing-base) ease var(--timing-base) forwards;\n          animation: gZ4DUv82g5I- 200ms ease 200ms forwards;\n          animation: gZ4DUv82g5I- var(--timing-base) ease var(--timing-base) forwards;\n}\n\n@-webkit-keyframes gZ4DUv82g5I- {\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes gZ4DUv82g5I- {\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n}\n";
+var styles = {"trigger":"IC-Y9bTIVFo-","loadingMore":"PbZLGpbI6ZM-","backToTop":"_6zA6B-jmz6o-","fadeIn":"gZ4DUv82g5I-"};
+styleInject(css_248z);
+
+function DataListLoadMoreTrigger() {
+    const { onLoadMore } = useDataListContext();
+    const [inViewRef, isInView] = useInView();
+    useEffect(() => {
+        isInView && (onLoadMore === null || onLoadMore === void 0 ? void 0 : onLoadMore());
+    }, [isInView]);
+    return (React.createElement("div", { ref: inViewRef, className: styles.trigger, "data-testid": DATA_LOAD_MORE_TEST_ID }));
+}
+
+const MAX_DATA_COUNT = 50;
+function DataListLoadMore({ onBackToTop }) {
+    const { loadingState, data } = useDataListContext();
+    const showBackToTop = data.length > MAX_DATA_COUNT && loadingState !== "loadingMore";
+    return (React.createElement(React.Fragment, null,
+        React.createElement(DataListLoadMoreTrigger, { key: data.length }),
+        loadingState === "loadingMore" && (React.createElement("div", { "data-testid": DATA_LIST_LOADING_MORE_SPINNER_TEST_ID, className: styles.loadingMore },
+            React.createElement(Spinner, { size: "small" }))),
+        showBackToTop && (React.createElement("div", { className: styles.backToTop },
+            React.createElement(Button, { label: "Back to top", onClick: onBackToTop, size: "small", variation: "subtle" })))));
+}
+
+export { DataListLoadMore as D, MAX_DATA_COUNT as M };

package/dist/DataListLoadMore-20d2d817.js

@@ -0,0 +1,41 @@
+'use strict';
+
+var React = require('react');
+var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
+var useInView = require('@jobber/hooks/useInView');
+var DataListContext = require('./DataListContext-f40570a7.js');
+var DataList_const = require('./DataList.const-c05b47de.js');
+var Spinner = require('./Spinner-9d8fc7ff.js');
+var Button = require('./Button-b73a5e01.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var css_248z = ".IC-Y9bTIVFo- {\n  position: relative;\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\n.PbZLGpbI6ZM-,\n._6zA6B-jmz6o- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-pack: center;\n      justify-content: center;\n  padding: calc(16px / 2);\n  padding: var(--space-small);\n}\n\n._6zA6B-jmz6o- {\n  opacity: 0;\n  -webkit-animation: gZ4DUv82g5I- 200ms ease 200ms forwards;\n  -webkit-animation: gZ4DUv82g5I- var(--timing-base) ease var(--timing-base) forwards;\n          animation: gZ4DUv82g5I- 200ms ease 200ms forwards;\n          animation: gZ4DUv82g5I- var(--timing-base) ease var(--timing-base) forwards;\n}\n\n@-webkit-keyframes gZ4DUv82g5I- {\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes gZ4DUv82g5I- {\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n}\n";
+var styles = {"trigger":"IC-Y9bTIVFo-","loadingMore":"PbZLGpbI6ZM-","backToTop":"_6zA6B-jmz6o-","fadeIn":"gZ4DUv82g5I-"};
+styleInject_es.styleInject(css_248z);
+
+function DataListLoadMoreTrigger() {
+    const { onLoadMore } = DataListContext.useDataListContext();
+    const [inViewRef, isInView] = useInView.useInView();
+    React.useEffect(() => {
+        isInView && (onLoadMore === null || onLoadMore === void 0 ? void 0 : onLoadMore());
+    }, [isInView]);
+    return (React__default["default"].createElement("div", { ref: inViewRef, className: styles.trigger, "data-testid": DataList_const.DATA_LOAD_MORE_TEST_ID }));
+}
+
+const MAX_DATA_COUNT = 50;
+function DataListLoadMore({ onBackToTop }) {
+    const { loadingState, data } = DataListContext.useDataListContext();
+    const showBackToTop = data.length > MAX_DATA_COUNT && loadingState !== "loadingMore";
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement(DataListLoadMoreTrigger, { key: data.length }),
+        loadingState === "loadingMore" && (React__default["default"].createElement("div", { "data-testid": DataList_const.DATA_LIST_LOADING_MORE_SPINNER_TEST_ID, className: styles.loadingMore },
+            React__default["default"].createElement(Spinner.Spinner, { size: "small" }))),
+        showBackToTop && (React__default["default"].createElement("div", { className: styles.backToTop },
+            React__default["default"].createElement(Button.Button, { label: "Back to top", onClick: onBackToTop, size: "small", variation: "subtle" })))));
+}
+
+exports.DataListLoadMore = DataListLoadMore;
+exports.MAX_DATA_COUNT = MAX_DATA_COUNT;

package/dist/DataListLoadingState-9de965f6.js

@@ -0,0 +1,33 @@
+'use strict';
+
+var React = require('react');
+var Glimmer = require('./Glimmer-84dee1ed.js');
+var DataListContext = require('./DataListContext-f40570a7.js');
+var useActiveLayout = require('./useActiveLayout-adbf2bc3.js');
+var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var css_248z = "._8cMzUF8XEwY- {\n  position: relative;\n}\n\n._8cMzUF8XEwY-::after {\n  content: \"\";\n  display: block;\n  position: absolute;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  height: 100px;\n  background-image: linear-gradient(\n    to top,\n    rgba(255, 255, 255, 1) 0%,\n    rgba(255, 255, 255, 0) 100%\n  );\n  background-image: linear-gradient(\n    to top,\n    var(--color-surface) 0%,\n    rgba(var(--color-white--rgb), 0) 100%\n  );\n}\n\n.Rh--6fVpkm4- {\n  padding: calc(16px * 1) calc(16px / 2);\n  padding: var(--space-base) var(--space-small);\n}\n\n.NFaWWvmxtkw- {\n  width: 100%;\n  min-width: calc(16px * 3);\n  min-width: var(--space-largest);\n}\n";
+var styles = {"wrapper":"_8cMzUF8XEwY-","loadingItem":"Rh--6fVpkm4-","glimmer":"NFaWWvmxtkw-"};
+styleInject_es.styleInject(css_248z);
+
+const LOADING_STATE_LIMIT_ITEMS = 10;
+const DATALIST_LOADINGSTATE_ROW_TEST_ID = "ATL-DataList-LoadingState-Row";
+function DataListLoadingState() {
+    const { headers } = DataListContext.useDataListContext();
+    const { layout, activeBreakpoint } = useActiveLayout.useActiveLayout();
+    if (!layout)
+        return null;
+    const glimmerSize = activeBreakpoint === "xs" ? "small" : "large";
+    const glimmersFromHeader = Object.keys(headers).reduce((data, key) => (Object.assign(Object.assign({}, data), { [key]: (React__default["default"].createElement("div", { className: styles.glimmer },
+            React__default["default"].createElement(Glimmer.Glimmer, { size: glimmerSize }))) })), {});
+    const loadingData = new Array(LOADING_STATE_LIMIT_ITEMS).fill(glimmersFromHeader);
+    return (React__default["default"].createElement("div", { className: styles.wrapper }, loadingData.map((child, i) => (React__default["default"].createElement("div", { key: i, className: styles.loadingItem, "data-testid": DATALIST_LOADINGSTATE_ROW_TEST_ID }, layout(child))))));
+}
+
+exports.DATALIST_LOADINGSTATE_ROW_TEST_ID = DATALIST_LOADINGSTATE_ROW_TEST_ID;
+exports.DataListLoadingState = DataListLoadingState;
+exports.LOADING_STATE_LIMIT_ITEMS = LOADING_STATE_LIMIT_ITEMS;

package/dist/DataListLoadingState-c175094e.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { G as Glimmer } from './Glimmer-aea7f8ae.js';
+import { u as useDataListContext } from './DataListContext-736a42a2.js';
+import { u as useActiveLayout } from './useActiveLayout-101129a8.js';
+import { s as styleInject } from './style-inject.es-a0e1a0ba.js';
+
+var css_248z = "._8cMzUF8XEwY- {\n  position: relative;\n}\n\n._8cMzUF8XEwY-::after {\n  content: \"\";\n  display: block;\n  position: absolute;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  height: 100px;\n  background-image: linear-gradient(\n    to top,\n    rgba(255, 255, 255, 1) 0%,\n    rgba(255, 255, 255, 0) 100%\n  );\n  background-image: linear-gradient(\n    to top,\n    var(--color-surface) 0%,\n    rgba(var(--color-white--rgb), 0) 100%\n  );\n}\n\n.Rh--6fVpkm4- {\n  padding: calc(16px * 1) calc(16px / 2);\n  padding: var(--space-base) var(--space-small);\n}\n\n.NFaWWvmxtkw- {\n  width: 100%;\n  min-width: calc(16px * 3);\n  min-width: var(--space-largest);\n}\n";
+var styles = {"wrapper":"_8cMzUF8XEwY-","loadingItem":"Rh--6fVpkm4-","glimmer":"NFaWWvmxtkw-"};
+styleInject(css_248z);
+
+const LOADING_STATE_LIMIT_ITEMS = 10;
+const DATALIST_LOADINGSTATE_ROW_TEST_ID = "ATL-DataList-LoadingState-Row";
+function DataListLoadingState() {
+    const { headers } = useDataListContext();
+    const { layout, activeBreakpoint } = useActiveLayout();
+    if (!layout)
+        return null;
+    const glimmerSize = activeBreakpoint === "xs" ? "small" : "large";
+    const glimmersFromHeader = Object.keys(headers).reduce((data, key) => (Object.assign(Object.assign({}, data), { [key]: (React.createElement("div", { className: styles.glimmer },
+            React.createElement(Glimmer, { size: glimmerSize }))) })), {});
+    const loadingData = new Array(LOADING_STATE_LIMIT_ITEMS).fill(glimmersFromHeader);
+    return (React.createElement("div", { className: styles.wrapper }, loadingData.map((child, i) => (React.createElement("div", { key: i, className: styles.loadingItem, "data-testid": DATALIST_LOADINGSTATE_ROW_TEST_ID }, layout(child))))));
+}
+
+export { DataListLoadingState as D, LOADING_STATE_LIMIT_ITEMS as L, DATALIST_LOADINGSTATE_ROW_TEST_ID as a };

package/dist/DataListOverflowFade-85c826e0.js

@@ -0,0 +1,33 @@
+'use strict';
+
+var React = require('react');
+var useInView = require('@jobber/hooks/useInView');
+var classnames = require('classnames');
+var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
+
+const CONTAINER_TEST_ID = "ATL-DataListFilters-Container";
+
+var css_248z = ".jbBRoxlZlNI- {\n  --overflow-fade--offset: var(--space-smaller);\n  --overflow-fade--negative-offset: calc(var(--overflow-fade--offset) * -1);\n\n  -ms-flex-item-align: center;\n\n      align-self: center;\n  position: relative;\n  min-width: 0;\n}\n\n.P6uJ-vHfKrM-,\n.MnN8qbS4hw4- {\n  display: grid;\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.P6uJ-vHfKrM- {\n  gap: calc(16px / 2);\n  gap: var(--space-small);\n}\n\n.MnN8qbS4hw4- {\n  margin: var(--overflow-fade--negative-offset);\n  padding: var(--overflow-fade--offset);\n  overflow-x: auto;\n  overflow-y: visible;\n}\n\n.b-5P7Z8eGO8- {\n  visibility: hidden;\n}\n\n.xzaCS4slLpI-::before,\n.Jf227kC8Nu0-::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-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.xzaCS4slLpI-::before {\n  left: var(--overflow-fade--negative-offset);\n}\n\n.Jf227kC8Nu0-::after {\n  --data-list-overflow-shadow-angle: to left;\n  right: var(--overflow-fade--negative-offset);\n}\n";
+var styles = {"fadeContainer":"jbBRoxlZlNI-","overflowItems":"P6uJ-vHfKrM-","overflowGrid":"MnN8qbS4hw4-","overflowTrigger":"b-5P7Z8eGO8-","overflowLeft":"xzaCS4slLpI-","overflowRight":"Jf227kC8Nu0-"};
+styleInject_es.styleInject(css_248z);
+
+function DataListOverflowFade({ children }) {
+    const [leftRef, isLeftVisible] = useInView.useInView();
+    const [rightRef, isRightVisible] = useInView.useInView();
+    return (React__default["default"].createElement("div", { "data-testid": CONTAINER_TEST_ID, className: classnames__default["default"](styles.fadeContainer, {
+            [styles.overflowLeft]: !isLeftVisible,
+            [styles.overflowRight]: !isRightVisible,
+        }) },
+        React__default["default"].createElement("div", { className: styles.overflowGrid },
+            React__default["default"].createElement("span", { ref: leftRef, className: styles.overflowTrigger }),
+            React__default["default"].createElement("div", { className: styles.overflowItems }, children),
+            React__default["default"].createElement("span", { ref: rightRef, className: styles.overflowTrigger }))));
+}
+
+exports.CONTAINER_TEST_ID = CONTAINER_TEST_ID;
+exports.DataListOverflowFade = DataListOverflowFade;

package/dist/DataListOverflowFade-a640f51f.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { useInView } from '@jobber/hooks/useInView';
+import classnames from 'classnames';
+import { s as styleInject } from './style-inject.es-a0e1a0ba.js';
+
+const CONTAINER_TEST_ID = "ATL-DataListFilters-Container";
+
+var css_248z = ".jbBRoxlZlNI- {\n  --overflow-fade--offset: var(--space-smaller);\n  --overflow-fade--negative-offset: calc(var(--overflow-fade--offset) * -1);\n\n  -ms-flex-item-align: center;\n\n      align-self: center;\n  position: relative;\n  min-width: 0;\n}\n\n.P6uJ-vHfKrM-,\n.MnN8qbS4hw4- {\n  display: grid;\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.P6uJ-vHfKrM- {\n  gap: calc(16px / 2);\n  gap: var(--space-small);\n}\n\n.MnN8qbS4hw4- {\n  margin: var(--overflow-fade--negative-offset);\n  padding: var(--overflow-fade--offset);\n  overflow-x: auto;\n  overflow-y: visible;\n}\n\n.b-5P7Z8eGO8- {\n  visibility: hidden;\n}\n\n.xzaCS4slLpI-::before,\n.Jf227kC8Nu0-::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-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.xzaCS4slLpI-::before {\n  left: var(--overflow-fade--negative-offset);\n}\n\n.Jf227kC8Nu0-::after {\n  --data-list-overflow-shadow-angle: to left;\n  right: var(--overflow-fade--negative-offset);\n}\n";
+var styles = {"fadeContainer":"jbBRoxlZlNI-","overflowItems":"P6uJ-vHfKrM-","overflowGrid":"MnN8qbS4hw4-","overflowTrigger":"b-5P7Z8eGO8-","overflowLeft":"xzaCS4slLpI-","overflowRight":"Jf227kC8Nu0-"};
+styleInject(css_248z);
+
+function DataListOverflowFade({ children }) {
+    const [leftRef, isLeftVisible] = useInView();
+    const [rightRef, isRightVisible] = useInView();
+    return (React.createElement("div", { "data-testid": CONTAINER_TEST_ID, className: classnames(styles.fadeContainer, {
+            [styles.overflowLeft]: !isLeftVisible,
+            [styles.overflowRight]: !isRightVisible,
+        }) },
+        React.createElement("div", { className: styles.overflowGrid },
+            React.createElement("span", { ref: leftRef, className: styles.overflowTrigger }),
+            React.createElement("div", { className: styles.overflowItems }, children),
+            React.createElement("span", { ref: rightRef, className: styles.overflowTrigger }))));
+}
+
+export { CONTAINER_TEST_ID as C, DataListOverflowFade as D };

package/dist/DataListSearch-584f4f05.js

@@ -0,0 +1,72 @@
+'use strict';
+
+var React = require('react');
+var debounce = require('lodash/debounce');
+var classnames = require('classnames');
+var design = require('@jobber/design');
+var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
+var InputText = require('./InputText-55b6cb65.js');
+var DataListContext = require('./DataListContext-f40570a7.js');
+var DataList_const = require('./DataList.const-c05b47de.js');
+var Button = require('./Button-b73a5e01.js');
+var AnimatedSwitcher = require('./AnimatedSwitcher-3d45ec5d.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
+var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
+
+var css_248z = ".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";
+var styles = {"wrapper":"tj0MOMhLEEY-","searchInput":"SaPMOnvw-3c-","searchInputVisible":"_3S1-91v2SYI-","searchButton":"_9GlBktsUALw-","withNoFilters":"_3Pjrt42x454-"};
+styleInject_es.styleInject(css_248z);
+
+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, sorting, title } = DataListContext.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); }, DataList_const.SEARCH_DEBOUNCE_DELAY), [searchComponent === null || searchComponent === void 0 ? void 0 : searchComponent.props.onSearch]);
+    if (!searchComponent)
+        return null;
+    const { placeholder, initialValue } = searchComponent.props;
+    return (React__default["default"].createElement("div", { className: classnames__default["default"](styles.wrapper, {
+            [styles.withNoFilters]: !filterComponent && !sorting,
+        }) },
+        React__default["default"].createElement("div", { "data-testid": DATA_LIST_SEARCH_TEST_ID, className: classnames__default["default"](styles.searchInput, {
+                [styles.searchInputVisible]: visible,
+            }) },
+            React__default["default"].createElement(InputText.InputText
+            // If the initial value changes, reset the input.
+            , { 
+                // If the initial value changes, reset the input.
+                key: initialValue, defaultValue: initialValue, ref: inputRef, placeholder: getPlaceholder(), onChange: debouncedSearch, prefix: { icon: "search" }, clearable: "always" })),
+        React__default["default"].createElement("div", { className: styles.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"]);
+        }
+    }
+}
+
+exports.DATA_LIST_SEARCH_TEST_ID = DATA_LIST_SEARCH_TEST_ID;
+exports.DataListSearch = DataListSearch;
+exports.InternalDataListSearch = InternalDataListSearch;