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

package/dist/DataList/index.mjs

@@ -0,0 +1,89 @@
+export { D as DataList } from '../DataList-ae2efe9b.js';
+import '../tslib.es6-c563c1dd.js';
+import 'react';
+import '../DataList-1e0e9426.js';
+import '../style-inject.es-a0e1a0ba.js';
+import '../DataListTotalCount-cce98cf6.js';
+import '../Text-c9162504.js';
+import '../Typography-7cc5daf5.js';
+import 'classnames';
+import '../Glimmer-aea7f8ae.js';
+import '../Content-c4ea919f.js';
+import '../DataListLoadingState-c175094e.js';
+import '../DataListContext-736a42a2.js';
+import 'lodash/noop';
+import '../useActiveLayout-101129a8.js';
+import '../useResponsiveSizing-c1e28e54.js';
+import '../DataList.const-3ae7ceef.js';
+import '@jobber/design';
+import '../DataListLayout-99863988.js';
+import '../DataListItems-00dd20c1.js';
+import '../DataListLayoutContext-7daf863d.js';
+import '../DataListItem-5cbf5f14.js';
+import 'framer-motion';
+import '../DataListItemActions-c5749fdc.js';
+import '../DataListActions-c5ad9b23.js';
+import '../Tooltip-d1fc7e74.js';
+import 'react-dom';
+import '@jobber/hooks/useSafeLayoutEffect';
+import 'react-popper';
+import '../Button-9ae092b3.js';
+import 'react-router-dom';
+import '../Icon-22723fe6.js';
+import '../DataListOverflowFade-a640f51f.js';
+import '@jobber/hooks/useInView';
+import '../DataList.utils-d51eb44e.js';
+import 'lodash/isEmpty';
+import '../DataListTags-68b3a874.js';
+import '../InlineLabel-b7d9e402.js';
+import '../DataListHeaderTile-8854e4d8.js';
+import '@jobber/hooks/useFocusTrap';
+import '@jobber/hooks/useRefocusOnActivator';
+import '../DataListSortingOptions-8a64205a.js';
+import '@jobber/hooks/useOnKeyDown';
+import '../FormatDate-720b39cf.js';
+import '../Heading-93e755cb.js';
+import '../getAtlantisConfig-5b50057c.js';
+import '../DataListLayoutContext-9237afd1.js';
+import '../DataListItemActionsOverflow-6004ba59.js';
+import '../DataListActionsMenu-cce1bd30.js';
+import '../Checkbox-3ff9f47a.js';
+import 'react-hook-form';
+import '../useBatchSelect-33acc2fc.js';
+import '../DataListItemClickable-127bfc7f.js';
+import '../DataListHeader-bf256a20.js';
+import '../AnimatedSwitcher-3aff3d12.js';
+import '../DataListBulkActions-a750f601.js';
+import '../DataListFilters-aaff643e.js';
+import '../DataListSort-a684067a.js';
+import '../Combobox-f781cae2.js';
+import '../ComboboxContent-0e67a7f3.js';
+import '../ComboboxContentSearch-196e638a.js';
+import '../ComboboxContentList-7f7ef48c.js';
+import '../Spinner-5d8359b8.js';
+import '../AnimatedPresence-bbccdaf7.js';
+import '../ComboboxOption-cf324e9d.js';
+import '../Flex-d565495d.js';
+import '../ComboboxProvider-32666af1.js';
+import '../ComboboxLoadMore-21f09a37.js';
+import '../ComboboxContentHeader-97ea6800.js';
+import '../ComboboxAction-c21dc02b.js';
+import '../ComboboxTrigger-b41954f5.js';
+import '../Chip-0e37aa92.js';
+import '../Avatar-6ffee4bd.js';
+import 'color';
+import '../useChildComponent-13989d0a.js';
+import 'lodash/debounce';
+import '../ComboboxActivator-757941db.js';
+import '@jobber/hooks/useAssert';
+import '../DataListStickyHeader-ce11cbd9.js';
+import '../DataListSearch-614b959b.js';
+import '../InputText-8dbcfe70.js';
+import '../FormField-8118cfc8.js';
+import '@jobber/hooks/useShowClear';
+import '../InputValidation-d68fb034.js';
+import '../DataListEmptyState-fcc112ac.js';
+import '../DataListLoadMore-1b519950.js';
+import '../DataListAction-d570e8bf.js';
+import '../DataListLayoutActions-43cc8589.js';
+import '../DataListStatusBar-4f692790.js';

package/dist/DataList-1e0e9426.js

@@ -0,0 +1,7 @@
+import { s as styleInject } from './style-inject.es-a0e1a0ba.js';
+
+var css_248z = ".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 = {"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(css_248z);
+
+export { styles as s };

package/dist/DataList-ae2efe9b.js

@@ -0,0 +1,139 @@
+import { _ as __rest } from './tslib.es6-c563c1dd.js';
+import React, { useState, useMemo, useRef } from 'react';
+import { s as styles } from './DataList-1e0e9426.js';
+import { D as DataListTotalCount } from './DataListTotalCount-cce98cf6.js';
+import { D as DataListLoadingState } from './DataListLoadingState-c175094e.js';
+import { D as DataListLayout } from './DataListLayout-99863988.js';
+import { D as DataListHeader } from './DataListHeader-bf256a20.js';
+import { I as InternalDataListFilters, D as DataListFilters } from './DataListFilters-aaff643e.js';
+import { D as DataListStickyHeader } from './DataListStickyHeader-ce11cbd9.js';
+import { I as InternalDataListSearch, D as DataListSearch } from './DataListSearch-614b959b.js';
+import { I as InternalDataListEmptyState, D as DataListEmptyState } from './DataListEmptyState-fcc112ac.js';
+import { D as DataListLoadMore } from './DataListLoadMore-1b519950.js';
+import { D as DataListItemActions } from './DataListItemActions-c5749fdc.js';
+import { D as DataListAction } from './DataListAction-d570e8bf.js';
+import { D as DataListLayoutActions } from './DataListLayoutActions-43cc8589.js';
+import { D as DataListContext, u as useDataListContext } from './DataListContext-736a42a2.js';
+import { s as sortBreakpoints, g as getCompoundComponent, a as getCompoundComponents } from './DataList.utils-d51eb44e.js';
+import { D as DATA_LIST_FILTERING_SPINNER_TEST_ID } from './DataList.const-3ae7ceef.js';
+import { D as DataListBulkActions } from './DataListBulkActions-a750f601.js';
+import { I as InternalDataListStatusBar, D as DataListStatusBar } from './DataListStatusBar-4f692790.js';
+import { H as Heading } from './Heading-93e755cb.js';
+import { S as Spinner } from './Spinner-5d8359b8.js';
+
+function DataList(_a) {
+    var { selected = [], sorting } = _a, props = __rest(_a, ["selected", "sorting"]);
+    const [layouts, setLayouts] = useState({});
+    const layoutBreakpoints = useMemo(() => sortBreakpoints(Object.keys(layouts)), [layouts]);
+    const searchComponent = getCompoundComponent(props.children, DataListSearch);
+    const filterComponent = getCompoundComponent(props.children, DataListFilters);
+    const layoutComponents = getCompoundComponents(props.children, DataListLayout);
+    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.createElement(DataListContext.Provider, { value: Object.assign(Object.assign({ searchComponent,
+            filterComponent,
+            layoutComponents,
+            emptyStateComponents,
+            itemActionComponent,
+            bulkActionsComponent,
+            layoutBreakpoints,
+            layouts,
+            registerLayout }, props), { selected, 
+            // T !== DataListObject
+            sorting: sorting }) },
+        React.createElement(InternalDataList, { shouldRenderStickyHeader: shouldRenderStickyHeader })));
+    function registerLayout(size, children) {
+        setLayouts(prev => (Object.assign(Object.assign({}, prev), { [size]: children })));
+    }
+}
+function InternalDataList({ shouldRenderStickyHeader, }) {
+    const { data, title, totalCount, loadingState = "none", layoutComponents, } = useDataListContext();
+    const backToTopRef = useRef(null);
+    const initialLoading = loadingState === "initial";
+    const showEmptyState = !initialLoading && data.length === 0;
+    const shouldRenderLoadMoreTrigger = !initialLoading && !showEmptyState;
+    return (React.createElement("div", { className: styles.wrapper },
+        React.createElement("div", { className: styles.titleContainer },
+            title && React.createElement(Heading, { level: 3 }, title),
+            React.createElement(DataListTotalCount, { totalCount: totalCount, loading: initialLoading })),
+        React.createElement("div", { ref: backToTopRef }),
+        shouldRenderStickyHeader && (React.createElement(DataListStickyHeader, null,
+            React.createElement("div", { className: styles.headerFilters },
+                React.createElement(InternalDataListFilters, null),
+                React.createElement(InternalDataListSearch, null)),
+            React.createElement(InternalDataListStatusBar, null),
+            React.createElement(DataListHeader, null))),
+        initialLoading && React.createElement(DataListLoadingState, null),
+        showEmptyState && React.createElement(InternalDataListEmptyState, null),
+        layoutComponents,
+        loadingState === "filtering" && (React.createElement("div", { "data-testid": DATA_LIST_FILTERING_SPINNER_TEST_ID, className: styles.filtering },
+            React.createElement("div", { className: styles.filteringSpinner },
+                React.createElement(Spinner, { size: "small" })))),
+        shouldRenderLoadMoreTrigger && (React.createElement(DataListLoadMore, { onBackToTop: handleBackToTop }))));
+    function handleBackToTop() {
+        var _a;
+        // For testing purposes since jest doesn't know scrollIntoView.
+        // This prevents consumer's tests from needing to mock scrollIntoView.
+        if (!window.HTMLElement.prototype.scrollIntoView)
+            return;
+        (_a = backToTopRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
+            behavior: "smooth",
+            block: "nearest",
+            inline: "start",
+        });
+    }
+}
+/**
+ * Sets the layout that the DataList item and header will use.
+ */
+DataList.Layout = DataListLayout;
+/**
+ * By using this component, we can render the actions anywhere in the layout
+ * instead of being added automatically on hover.
+ */
+DataList.LayoutActions = DataListLayoutActions;
+/**
+ * When the DataList is either empty and/or filtered, this component will be
+ * rendered.
+ */
+DataList.EmptyState = DataListEmptyState;
+/**
+ * Adds the filter components of your choosing to the DataList.
+ */
+DataList.Filters = DataListFilters;
+/**
+ * Enables the search functionality of the DataList.
+ *
+ * Since the debounce is implemented within the component, it can only be an
+ * uncontrolled component. Thus the lack of a `value` prop.
+ */
+DataList.Search = DataListSearch;
+/**
+ * Defines the group actions you could do on a single DataList item.
+ */
+DataList.ItemActions = DataListItemActions;
+/**
+ * Defines the action in a DataList. This should be used inside the
+ * DataListItemActions component.
+ */
+DataList.ItemAction = DataListAction;
+/**
+ * Defines the group actions you could do on multiple DataList items.
+ */
+DataList.BatchActions = DataListBulkActions;
+/**
+ * Defines the batch action in a DataList. This should be used inside the
+ * DataListBatchActions component.
+ */
+DataList.BatchAction = function DataListBatchAction(props) {
+    return React.createElement(DataListAction, Object.assign({}, props));
+};
+/**
+ * Defines a status bar that is rendered between the filters and the header.
+ */
+DataList.StatusBar = DataListStatusBar;
+
+export { DataList as D };

package/dist/DataList-b5f0a522.js

@@ -0,0 +1,9 @@
+'use strict';
+
+var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
+
+var css_248z = ".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 = {"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);
+
+exports.styles = styles;

package/dist/DataList-fc20945e.js

@@ -0,0 +1,145 @@
+'use strict';
+
+var tslib_es6 = require('./tslib.es6-754e2961.js');
+var React = require('react');
+var DataList$1 = require('./DataList-b5f0a522.js');
+var DataListTotalCount = require('./DataListTotalCount-8373c2df.js');
+var DataListLoadingState = require('./DataListLoadingState-9de965f6.js');
+var DataListLayout = require('./DataListLayout-4cdcaa1f.js');
+var DataListHeader = require('./DataListHeader-43a4bb92.js');
+var DataListFilters = require('./DataListFilters-3e5599c6.js');
+var DataListStickyHeader = require('./DataListStickyHeader-0728e21b.js');
+var DataListSearch = require('./DataListSearch-584f4f05.js');
+var DataListEmptyState = require('./DataListEmptyState-25d6c47d.js');
+var DataListLoadMore = require('./DataListLoadMore-20d2d817.js');
+var DataListItemActions = require('./DataListItemActions-122d8972.js');
+var DataListAction = require('./DataListAction-9d8a33e0.js');
+var DataListLayoutActions = require('./DataListLayoutActions-9f8cc2a2.js');
+var DataListContext = require('./DataListContext-f40570a7.js');
+var DataList_utils = require('./DataList.utils-b72b8d0d.js');
+var DataList_const = require('./DataList.const-c05b47de.js');
+var DataListBulkActions = require('./DataListBulkActions-af1fe283.js');
+var DataListStatusBar = require('./DataListStatusBar-e17eff45.js');
+var Heading = require('./Heading-1e8e4bd3.js');
+var Spinner = require('./Spinner-9d8fc7ff.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+function DataList(_a) {
+    var { selected = [], sorting } = _a, props = tslib_es6.__rest(_a, ["selected", "sorting"]);
+    const [layouts, setLayouts] = React.useState({});
+    const layoutBreakpoints = React.useMemo(() => DataList_utils.sortBreakpoints(Object.keys(layouts)), [layouts]);
+    const searchComponent = DataList_utils.getCompoundComponent(props.children, DataListSearch.DataListSearch);
+    const filterComponent = DataList_utils.getCompoundComponent(props.children, DataListFilters.DataListFilters);
+    const layoutComponents = DataList_utils.getCompoundComponents(props.children, DataListLayout.DataListLayout);
+    const emptyStateComponents = DataList_utils.getCompoundComponents(props.children, DataListEmptyState.DataListEmptyState);
+    const itemActionComponent = DataList_utils.getCompoundComponent(props.children, DataListItemActions.DataListItemActions);
+    const bulkActionsComponent = DataList_utils.getCompoundComponent(props.children, DataListBulkActions.DataListBulkActions);
+    const headerCount = Object.keys(props.headers).length;
+    const shouldRenderStickyHeader = !!filterComponent || !!searchComponent || headerCount > 0;
+    return (React__default["default"].createElement(DataListContext.DataListContext.Provider, { value: Object.assign(Object.assign({ searchComponent,
+            filterComponent,
+            layoutComponents,
+            emptyStateComponents,
+            itemActionComponent,
+            bulkActionsComponent,
+            layoutBreakpoints,
+            layouts,
+            registerLayout }, props), { selected, 
+            // T !== DataListObject
+            sorting: sorting }) },
+        React__default["default"].createElement(InternalDataList, { shouldRenderStickyHeader: shouldRenderStickyHeader })));
+    function registerLayout(size, children) {
+        setLayouts(prev => (Object.assign(Object.assign({}, prev), { [size]: children })));
+    }
+}
+function InternalDataList({ shouldRenderStickyHeader, }) {
+    const { data, title, totalCount, loadingState = "none", layoutComponents, } = DataListContext.useDataListContext();
+    const backToTopRef = React.useRef(null);
+    const initialLoading = loadingState === "initial";
+    const showEmptyState = !initialLoading && data.length === 0;
+    const shouldRenderLoadMoreTrigger = !initialLoading && !showEmptyState;
+    return (React__default["default"].createElement("div", { className: DataList$1.styles.wrapper },
+        React__default["default"].createElement("div", { className: DataList$1.styles.titleContainer },
+            title && React__default["default"].createElement(Heading.Heading, { level: 3 }, title),
+            React__default["default"].createElement(DataListTotalCount.DataListTotalCount, { totalCount: totalCount, loading: initialLoading })),
+        React__default["default"].createElement("div", { ref: backToTopRef }),
+        shouldRenderStickyHeader && (React__default["default"].createElement(DataListStickyHeader.DataListStickyHeader, null,
+            React__default["default"].createElement("div", { className: DataList$1.styles.headerFilters },
+                React__default["default"].createElement(DataListFilters.InternalDataListFilters, null),
+                React__default["default"].createElement(DataListSearch.InternalDataListSearch, null)),
+            React__default["default"].createElement(DataListStatusBar.InternalDataListStatusBar, null),
+            React__default["default"].createElement(DataListHeader.DataListHeader, null))),
+        initialLoading && React__default["default"].createElement(DataListLoadingState.DataListLoadingState, null),
+        showEmptyState && React__default["default"].createElement(DataListEmptyState.InternalDataListEmptyState, null),
+        layoutComponents,
+        loadingState === "filtering" && (React__default["default"].createElement("div", { "data-testid": DataList_const.DATA_LIST_FILTERING_SPINNER_TEST_ID, className: DataList$1.styles.filtering },
+            React__default["default"].createElement("div", { className: DataList$1.styles.filteringSpinner },
+                React__default["default"].createElement(Spinner.Spinner, { size: "small" })))),
+        shouldRenderLoadMoreTrigger && (React__default["default"].createElement(DataListLoadMore.DataListLoadMore, { onBackToTop: handleBackToTop }))));
+    function handleBackToTop() {
+        var _a;
+        // For testing purposes since jest doesn't know scrollIntoView.
+        // This prevents consumer's tests from needing to mock scrollIntoView.
+        if (!window.HTMLElement.prototype.scrollIntoView)
+            return;
+        (_a = backToTopRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
+            behavior: "smooth",
+            block: "nearest",
+            inline: "start",
+        });
+    }
+}
+/**
+ * Sets the layout that the DataList item and header will use.
+ */
+DataList.Layout = DataListLayout.DataListLayout;
+/**
+ * By using this component, we can render the actions anywhere in the layout
+ * instead of being added automatically on hover.
+ */
+DataList.LayoutActions = DataListLayoutActions.DataListLayoutActions;
+/**
+ * When the DataList is either empty and/or filtered, this component will be
+ * rendered.
+ */
+DataList.EmptyState = DataListEmptyState.DataListEmptyState;
+/**
+ * Adds the filter components of your choosing to the DataList.
+ */
+DataList.Filters = DataListFilters.DataListFilters;
+/**
+ * Enables the search functionality of the DataList.
+ *
+ * Since the debounce is implemented within the component, it can only be an
+ * uncontrolled component. Thus the lack of a `value` prop.
+ */
+DataList.Search = DataListSearch.DataListSearch;
+/**
+ * Defines the group actions you could do on a single DataList item.
+ */
+DataList.ItemActions = DataListItemActions.DataListItemActions;
+/**
+ * Defines the action in a DataList. This should be used inside the
+ * DataListItemActions component.
+ */
+DataList.ItemAction = DataListAction.DataListAction;
+/**
+ * Defines the group actions you could do on multiple DataList items.
+ */
+DataList.BatchActions = DataListBulkActions.DataListBulkActions;
+/**
+ * Defines the batch action in a DataList. This should be used inside the
+ * DataListBatchActions component.
+ */
+DataList.BatchAction = function DataListBatchAction(props) {
+    return React__default["default"].createElement(DataListAction.DataListAction, Object.assign({}, props));
+};
+/**
+ * Defines a status bar that is rendered between the filters and the header.
+ */
+DataList.StatusBar = DataListStatusBar.DataListStatusBar;
+
+exports.DataList = DataList;

package/dist/DataList.const-3ae7ceef.js

@@ -0,0 +1,25 @@
+import { tokens } from '@jobber/design';
+
+const EMPTY_RESULTS_MESSAGE = "List is looking empty";
+const EMPTY_FILTER_RESULTS_MESSAGE = "No results for selected filters";
+const EMPTY_STATE_ACTION_BUTTON_ONLY_ERROR = "DataListEmptyState action prop must be a Button component";
+/**
+ * Breakpoints that we support
+ */
+const BREAKPOINTS = ["xs", "sm", "md", "lg", "xl"];
+const BREAKPOINT_SIZES = {
+    xs: 0,
+    sm: 490,
+    md: 768,
+    lg: 1080,
+    xl: 1440,
+};
+const SEARCH_DEBOUNCE_DELAY = 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 = tokens["timing-base"] / 1000;
+const TRANSITION_DELAY_IN_SECONDS = tokens["timing-quick"] / 1000;
+
+export { BREAKPOINTS as B, DATA_LIST_FILTERING_SPINNER_TEST_ID as D, EMPTY_FILTER_RESULTS_MESSAGE as E, SEARCH_DEBOUNCE_DELAY as S, TRANSITION_DURATION_IN_SECONDS as T, DATA_LIST_STICKY_HEADER_TEST_ID as a, EMPTY_RESULTS_MESSAGE as b, EMPTY_STATE_ACTION_BUTTON_ONLY_ERROR as c, DATA_LOAD_MORE_TEST_ID as d, DATA_LIST_LOADING_MORE_SPINNER_TEST_ID as e, TRANSITION_DELAY_IN_SECONDS as f, BREAKPOINT_SIZES as g };

package/dist/DataList.const-c05b47de.js

@@ -0,0 +1,38 @@
+'use strict';
+
+var design = require('@jobber/design');
+
+const EMPTY_RESULTS_MESSAGE = "List is looking empty";
+const EMPTY_FILTER_RESULTS_MESSAGE = "No results for selected filters";
+const EMPTY_STATE_ACTION_BUTTON_ONLY_ERROR = "DataListEmptyState action prop must be a Button component";
+/**
+ * Breakpoints that we support
+ */
+const BREAKPOINTS = ["xs", "sm", "md", "lg", "xl"];
+const BREAKPOINT_SIZES = {
+    xs: 0,
+    sm: 490,
+    md: 768,
+    lg: 1080,
+    xl: 1440,
+};
+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;
+
+exports.BREAKPOINTS = BREAKPOINTS;
+exports.BREAKPOINT_SIZES = BREAKPOINT_SIZES;
+exports.DATA_LIST_FILTERING_SPINNER_TEST_ID = DATA_LIST_FILTERING_SPINNER_TEST_ID;
+exports.DATA_LIST_LOADING_MORE_SPINNER_TEST_ID = DATA_LIST_LOADING_MORE_SPINNER_TEST_ID;
+exports.DATA_LIST_STICKY_HEADER_TEST_ID = DATA_LIST_STICKY_HEADER_TEST_ID;
+exports.DATA_LOAD_MORE_TEST_ID = DATA_LOAD_MORE_TEST_ID;
+exports.EMPTY_FILTER_RESULTS_MESSAGE = EMPTY_FILTER_RESULTS_MESSAGE;
+exports.EMPTY_RESULTS_MESSAGE = EMPTY_RESULTS_MESSAGE;
+exports.EMPTY_STATE_ACTION_BUTTON_ONLY_ERROR = EMPTY_STATE_ACTION_BUTTON_ONLY_ERROR;
+exports.SEARCH_DEBOUNCE_DELAY = SEARCH_DEBOUNCE_DELAY;
+exports.TRANSITION_DELAY_IN_SECONDS = TRANSITION_DELAY_IN_SECONDS;
+exports.TRANSITION_DURATION_IN_SECONDS = TRANSITION_DURATION_IN_SECONDS;

package/dist/DataList.utils-b72b8d0d.js

@@ -0,0 +1,92 @@
+'use strict';
+
+var React = require('react');
+var isEmpty = require('lodash/isEmpty');
+var DataList_const = require('./DataList.const-c05b47de.js');
+var DataListTags = require('./DataListTags-f4038ea1.js');
+var DataListHeaderTile = require('./DataListHeaderTile-4b93f949.js');
+var FormatDate = require('./FormatDate-70ea5b43.js');
+var Text = require('./Text-259af966.js');
+var Heading = require('./Heading-1e8e4bd3.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);
+
+/**
+ * Return the child component that matches the `type` provided
+ */
+function getCompoundComponent(children, type) {
+    const childrenArray = React.Children.toArray(children);
+    const element = childrenArray.find(child => React.isValidElement(child) && child.type === type);
+    // Comply with the return type without casting it
+    return React.isValidElement(element) ? element : undefined;
+}
+/**
+ * Return all instances child component that matches the `type` provided
+ */
+function getCompoundComponents(children, type) {
+    const childrenArray = React.Children.toArray(children);
+    const elements = childrenArray.filter((child) => React.isValidElement(child) && child.type === type);
+    return elements;
+}
+/**
+ * Generate the default element the DataList would use on the data provided.
+ */
+function generateListItemElement(item) {
+    return Object.keys(item).reduce((acc, key) => {
+        const currentItem = item[key];
+        if (!currentItem) {
+            return acc;
+        }
+        if (key === "tags" && Array.isArray(currentItem)) {
+            acc[key] = React__default["default"].createElement(DataListTags.DataListTags, { items: currentItem });
+        }
+        else if (key === "label" && typeof currentItem === "string") {
+            acc[key] = React__default["default"].createElement(Heading.Heading, { level: 5 }, currentItem);
+        }
+        else if (React.isValidElement(currentItem)) {
+            acc[key] = currentItem;
+        }
+        else if (currentItem instanceof Date) {
+            acc[key] = (React__default["default"].createElement(Text.Text, { variation: "subdued" },
+                React__default["default"].createElement(FormatDate.FormatDate, { date: currentItem })));
+        }
+        else {
+            acc[key] = React__default["default"].createElement(Text.Text, { variation: "subdued" }, currentItem);
+        }
+        return acc;
+    }, {});
+}
+/**
+ * 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(DataListHeaderTile.DataListHeaderTile, { headers: headers, headerKey: key, visible: true }) })), {});
+    return isEmpty__default["default"](headerElements) ? undefined : headerElements;
+}
+function sortBreakpoints(sizeProp) {
+    return sizeProp.sort((a, b) => DataList_const.BREAKPOINTS.indexOf(a) - DataList_const.BREAKPOINTS.indexOf(b));
+}
+function getExposedActions(childrenArray, childCount = 2) {
+    const firstNChildren = childrenArray.slice(0, childCount);
+    return firstNChildren.reduce((result, child, i) => {
+        const hasIcon = Boolean(child.props.icon);
+        if (!hasIcon)
+            return result; // If the child does not have an icon, continue.
+        const isLastChildAdded = result.length === i;
+        // If it's the first child or if the previous child was added, then add this child.
+        if (i === 0 || (i < childCount && isLastChildAdded)) {
+            return [...result, child];
+        }
+        return result;
+    }, []);
+}
+
+exports.generateHeaderElements = generateHeaderElements;
+exports.generateListItemElement = generateListItemElement;
+exports.getCompoundComponent = getCompoundComponent;
+exports.getCompoundComponents = getCompoundComponents;
+exports.getExposedActions = getExposedActions;
+exports.sortBreakpoints = sortBreakpoints;