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

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;

package/dist/DataList.utils-d51eb44e.js

@@ -0,0 +1,80 @@
+import React, { Children, isValidElement } from 'react';
+import isEmpty from 'lodash/isEmpty';
+import { B as BREAKPOINTS } from './DataList.const-3ae7ceef.js';
+import { D as DataListTags } from './DataListTags-68b3a874.js';
+import { D as DataListHeaderTile } from './DataListHeaderTile-8854e4d8.js';
+import { F as FormatDate } from './FormatDate-720b39cf.js';
+import { T as Text } from './Text-c9162504.js';
+import { H as Heading } from './Heading-93e755cb.js';
+
+/**
+ * Return the child component that matches the `type` provided
+ */
+function getCompoundComponent(children, type) {
+    const childrenArray = Children.toArray(children);
+    const element = childrenArray.find(child => isValidElement(child) && child.type === type);
+    // Comply with the return type without casting it
+    return isValidElement(element) ? element : undefined;
+}
+/**
+ * Return all instances child component that matches the `type` provided
+ */
+function getCompoundComponents(children, type) {
+    const childrenArray = Children.toArray(children);
+    const elements = childrenArray.filter((child) => 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.createElement(DataListTags, { items: currentItem });
+        }
+        else if (key === "label" && typeof currentItem === "string") {
+            acc[key] = React.createElement(Heading, { level: 5 }, currentItem);
+        }
+        else if (isValidElement(currentItem)) {
+            acc[key] = currentItem;
+        }
+        else if (currentItem instanceof Date) {
+            acc[key] = (React.createElement(Text, { variation: "subdued" },
+                React.createElement(FormatDate, { date: currentItem })));
+        }
+        else {
+            acc[key] = React.createElement(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.createElement(DataListHeaderTile, { headers: headers, headerKey: key, visible: true }) })), {});
+    return isEmpty(headerElements) ? undefined : headerElements;
+}
+function sortBreakpoints(sizeProp) {
+    return sizeProp.sort((a, b) => BREAKPOINTS.indexOf(a) - 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;
+    }, []);
+}
+
+export { getCompoundComponents as a, generateHeaderElements as b, getExposedActions as c, generateListItemElement as d, getCompoundComponent as g, sortBreakpoints as s };

package/dist/DataListAction-9d8a33e0.js

@@ -0,0 +1,46 @@
+'use strict';
+
+var React = require('react');
+var Typography = require('./Typography-c45bf216.js');
+var Icon = require('./Icon-405a216c.js');
+var DataListLayoutContext = require('./DataListLayoutContext-39a0d016.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 = ".iyg43v-S9yU- {\n  display: -ms-flexbox;\n  display: flex;\n  width: 100%;\n  min-height: 44px;\n  padding: calc(16px / 2);\n  padding: var(--space-small);\n  border: none;\n  border-radius: 0;\n  border-radius: calc(16px / 8);\n  border-radius: var(--radius-base);\n  font-size: calc((16px * 1) * 0.875);\n  font-size: calc(calc(16px * 1) * 0.875);\n  font-size: var(--typography--fontSize-base);\n  text-align: left;\n  background: none;\n  cursor: pointer;\n  transition: background 200ms ease;\n  transition: background var(--timing-base) ease;\n  -webkit-appearance: none;\n          appearance: none;\n  -ms-flex-align: center;\n      align-items: center;\n  -ms-flex-pack: justify;\n      justify-content: space-between;\n  gap: calc(16px / 2);\n  gap: var(--space-small);\n}\n\n.iyg43v-S9yU-:hover,\n.iyg43v-S9yU-:focus {\n  background-color: rgb(244, 246, 250);\n  background-color: var(--color-surface--hover);\n}\n\n.iyg43v-S9yU-:focus,\n.iyg43v-S9yU-:focus-visible {\n  outline: none;\n}\n\n.iyg43v-S9yU-:focus-visible {\n  box-shadow: 0px 0px 0px calc(16px / 8) rgba(255, 255, 255, 1),\n    0px 0px 0px calc(16px / 4) rgb(147, 161, 169);\n  box-shadow: var(--shadow-focus);\n}\n\n.AUJNqz93ZDA- {\n  font-weight: 500;\n}\n";
+var styles = {"action":"iyg43v-S9yU-","label":"AUJNqz93ZDA-"};
+styleInject_es.styleInject(css_248z);
+
+function DataListAction({ label, icon, destructive, visible = () => true, onClick, }) {
+    const { activeItem } = DataListLayoutContext.useDataListLayoutActionsContext();
+    // Don't render if the item is not visible
+    if (activeItem && !visible(activeItem)) {
+        return null;
+    }
+    const color = destructive ? "critical" : "heading";
+    function getActionLabel() {
+        if (typeof label === "string") {
+            return label;
+        }
+        if (activeItem) {
+            return label(activeItem);
+        }
+    }
+    return (React__default["default"].createElement("button", { type: "button", className: styles.action, onClick: handleClick },
+        React__default["default"].createElement(Typography.Typography, { textColor: color },
+            React__default["default"].createElement("span", { className: styles.label }, getActionLabel())),
+        icon && React__default["default"].createElement(Icon.Icon, { name: icon, color: color })));
+    function handleClick() {
+        if (activeItem) {
+            onClick === null || onClick === void 0 ? void 0 : onClick(activeItem);
+        }
+        else {
+            onClick === null || onClick === void 0 ? void 0 : onClick();
+        }
+    }
+}
+
+exports.DataListAction = DataListAction;

package/dist/DataListAction-d570e8bf.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import { T as Typography } from './Typography-7cc5daf5.js';
+import { I as Icon } from './Icon-22723fe6.js';
+import { u as useDataListLayoutActionsContext } from './DataListLayoutContext-9237afd1.js';
+import { s as styleInject } from './style-inject.es-a0e1a0ba.js';
+
+var css_248z = ".iyg43v-S9yU- {\n  display: -ms-flexbox;\n  display: flex;\n  width: 100%;\n  min-height: 44px;\n  padding: calc(16px / 2);\n  padding: var(--space-small);\n  border: none;\n  border-radius: 0;\n  border-radius: calc(16px / 8);\n  border-radius: var(--radius-base);\n  font-size: calc((16px * 1) * 0.875);\n  font-size: calc(calc(16px * 1) * 0.875);\n  font-size: var(--typography--fontSize-base);\n  text-align: left;\n  background: none;\n  cursor: pointer;\n  transition: background 200ms ease;\n  transition: background var(--timing-base) ease;\n  -webkit-appearance: none;\n          appearance: none;\n  -ms-flex-align: center;\n      align-items: center;\n  -ms-flex-pack: justify;\n      justify-content: space-between;\n  gap: calc(16px / 2);\n  gap: var(--space-small);\n}\n\n.iyg43v-S9yU-:hover,\n.iyg43v-S9yU-:focus {\n  background-color: rgb(244, 246, 250);\n  background-color: var(--color-surface--hover);\n}\n\n.iyg43v-S9yU-:focus,\n.iyg43v-S9yU-:focus-visible {\n  outline: none;\n}\n\n.iyg43v-S9yU-:focus-visible {\n  box-shadow: 0px 0px 0px calc(16px / 8) rgba(255, 255, 255, 1),\n    0px 0px 0px calc(16px / 4) rgb(147, 161, 169);\n  box-shadow: var(--shadow-focus);\n}\n\n.AUJNqz93ZDA- {\n  font-weight: 500;\n}\n";
+var styles = {"action":"iyg43v-S9yU-","label":"AUJNqz93ZDA-"};
+styleInject(css_248z);
+
+function DataListAction({ label, icon, destructive, visible = () => true, onClick, }) {
+    const { activeItem } = useDataListLayoutActionsContext();
+    // Don't render if the item is not visible
+    if (activeItem && !visible(activeItem)) {
+        return null;
+    }
+    const color = destructive ? "critical" : "heading";
+    function getActionLabel() {
+        if (typeof label === "string") {
+            return label;
+        }
+        if (activeItem) {
+            return label(activeItem);
+        }
+    }
+    return (React.createElement("button", { type: "button", className: styles.action, onClick: handleClick },
+        React.createElement(Typography, { textColor: color },
+            React.createElement("span", { className: styles.label }, getActionLabel())),
+        icon && React.createElement(Icon, { name: icon, color: color })));
+    function handleClick() {
+        if (activeItem) {
+            onClick === null || onClick === void 0 ? void 0 : onClick(activeItem);
+        }
+        else {
+            onClick === null || onClick === void 0 ? void 0 : onClick();
+        }
+    }
+}
+
+export { DataListAction as D };

package/dist/DataListActions-c5ad9b23.js

@@ -0,0 +1,43 @@
+import React, { Children, isValidElement } from 'react';
+import { T as Tooltip } from './Tooltip-d1fc7e74.js';
+import { B as Button } from './Button-9ae092b3.js';
+import { D as DataListOverflowFade } from './DataListOverflowFade-a640f51f.js';
+import { c as getExposedActions } from './DataList.utils-d51eb44e.js';
+import { u as useDataListLayoutActionsContext } from './DataListLayoutContext-9237afd1.js';
+import { D as DataListItemActionsOverflow } from './DataListItemActionsOverflow-6004ba59.js';
+
+function DataListActions({ children, itemsToExpose = 2, }) {
+    const { activeItem } = useDataListLayoutActionsContext();
+    const childrenArray = Children.toArray(children).filter(isValidElement);
+    const exposedActions = getExposedActions(childrenArray, itemsToExpose);
+    childrenArray.splice(0, exposedActions.length);
+    return (React.createElement(DataListOverflowFade, null,
+        exposedActions.map(({ props }) => {
+            if (props.visible && !props.visible(activeItem))
+                return null;
+            if (!props.icon)
+                return null;
+            function getActionLabel() {
+                if (typeof props.label === "string") {
+                    return props.label;
+                }
+                if (activeItem) {
+                    return props.label(activeItem);
+                }
+            }
+            const actionLabel = getActionLabel();
+            return (React.createElement(Tooltip, { key: actionLabel, message: actionLabel },
+                React.createElement(Button, { icon: props.icon, ariaLabel: actionLabel, onClick: () => {
+                        var _a, _b;
+                        if (activeItem) {
+                            (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, activeItem);
+                        }
+                        else {
+                            (_b = props.onClick) === null || _b === void 0 ? void 0 : _b.call(props);
+                        }
+                    }, type: "secondary", variation: "subtle" })));
+        }),
+        React.createElement(DataListItemActionsOverflow, { actions: childrenArray })));
+}
+
+export { DataListActions as D };

package/dist/DataListActions-f8367eda.js

@@ -0,0 +1,49 @@
+'use strict';
+
+var React = require('react');
+var Tooltip = require('./Tooltip-ef3d6ef4.js');
+var Button = require('./Button-b73a5e01.js');
+var DataListOverflowFade = require('./DataListOverflowFade-85c826e0.js');
+var DataList_utils = require('./DataList.utils-b72b8d0d.js');
+var DataListLayoutContext = require('./DataListLayoutContext-39a0d016.js');
+var DataListItemActionsOverflow = require('./DataListItemActionsOverflow-9c491ed9.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+function DataListActions({ children, itemsToExpose = 2, }) {
+    const { activeItem } = DataListLayoutContext.useDataListLayoutActionsContext();
+    const childrenArray = React.Children.toArray(children).filter(React.isValidElement);
+    const exposedActions = DataList_utils.getExposedActions(childrenArray, itemsToExpose);
+    childrenArray.splice(0, exposedActions.length);
+    return (React__default["default"].createElement(DataListOverflowFade.DataListOverflowFade, null,
+        exposedActions.map(({ props }) => {
+            if (props.visible && !props.visible(activeItem))
+                return null;
+            if (!props.icon)
+                return null;
+            function getActionLabel() {
+                if (typeof props.label === "string") {
+                    return props.label;
+                }
+                if (activeItem) {
+                    return props.label(activeItem);
+                }
+            }
+            const actionLabel = getActionLabel();
+            return (React__default["default"].createElement(Tooltip.Tooltip, { key: actionLabel, message: actionLabel },
+                React__default["default"].createElement(Button.Button, { icon: props.icon, ariaLabel: actionLabel, onClick: () => {
+                        var _a, _b;
+                        if (activeItem) {
+                            (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, activeItem);
+                        }
+                        else {
+                            (_b = props.onClick) === null || _b === void 0 ? void 0 : _b.call(props);
+                        }
+                    }, type: "secondary", variation: "subtle" })));
+        }),
+        React__default["default"].createElement(DataListItemActionsOverflow.DataListItemActionsOverflow, { actions: childrenArray })));
+}
+
+exports.DataListActions = DataListActions;

package/dist/DataListActionsMenu-cce1bd30.js

@@ -0,0 +1,53 @@
+import React, { useState } from 'react';
+import { AnimatePresence, motion } from 'framer-motion';
+import { useFocusTrap } from '@jobber/hooks/useFocusTrap';
+import { useRefocusOnActivator } from '@jobber/hooks/useRefocusOnActivator';
+import { useOnKeyDown } from '@jobber/hooks/useOnKeyDown';
+import { createPortal } from 'react-dom';
+import { tokens } from '@jobber/design';
+import { s as styleInject } from './style-inject.es-a0e1a0ba.js';
+import { f as TRANSITION_DELAY_IN_SECONDS } from './DataList.const-3ae7ceef.js';
+
+var css_248z = ".aokwZU8jbWU- {\n  position: fixed;\n  top: 0;\n  top: var(--actions-menu-y, 0);\n  left: 0;\n  left: var(--actions-menu-x, 0);\n  z-index: 6;\n  z-index: var(--elevation-menu);\n  min-width: 150px;\n  box-shadow: 0px calc(16px / 16) calc(16px / 4) 0px\n      rgba(0, 0, 0, 0.1),\n    0px calc(16px / 4) 12px 0px rgba(0, 0, 0, 0.05);\n  box-shadow: var(--shadow-base);\n  padding: calc(16px / 4);\n  padding: var(--space-smaller);\n  border: calc(16px / 16) solid rgb(217, 223, 225);\n  border: var(--border-base) solid var(--color-border);\n  border-radius: calc(16px / 2);\n  border-radius: var(--radius-larger);\n  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--color-surface);\n}\n\n.jobber-retheme .aokwZU8jbWU- {\n  border-radius: calc(16px / 8);\n  border-radius: var(--radius-base);\n}\n\n.XtVRP97TVSE- {\n  position: fixed;\n  top: 0;\n  left: 0;\n  z-index: calc(6 - 1);\n  z-index: calc(var(--elevation-menu) - 1);\n  width: 100%;\n  height: 100%;\n  padding: 0;\n  border: none;\n  background-color: transparent;\n}\n";
+var styles = {"menu":"aokwZU8jbWU-","overlay":"XtVRP97TVSE-"};
+styleInject(css_248z);
+
+const variants = {
+    hidden: { opacity: 0, y: -10 },
+    visible: { opacity: 1, y: 0 },
+};
+function DataListActionsMenu({ visible = false, position, onRequestClose, children, }) {
+    const [ref, setRef] = useState();
+    useRefocusOnActivator(visible);
+    const focusTrapRef = useFocusTrap(visible);
+    useOnKeyDown(onRequestClose, "Escape");
+    return createPortal(React.createElement(AnimatePresence, null, visible && (React.createElement("div", { ref: focusTrapRef, onClick: handleClick },
+        React.createElement(motion.div, { role: "menu", ref: setRef, variants: variants, initial: "hidden", animate: "visible", exit: "hidden", transition: { duration: TRANSITION_DELAY_IN_SECONDS }, className: styles.menu, style: getPositionCssVars(), onClick: onRequestClose }, children),
+        React.createElement("button", { type: "button", className: styles.overlay, onClick: onRequestClose, "aria-label": "Close menu" })))), document.body);
+    function handleClick(event) {
+        // Prevent menu from firing the parent's onClick event when it is nested
+        // within a clickable list item
+        event.stopPropagation();
+    }
+    function getPositionCssVars() {
+        const { posX, posY } = getPosition();
+        return {
+            "--actions-menu-x": `${posX}px`,
+            "--actions-menu-y": `${posY}px`,
+        };
+    }
+    function getPosition() {
+        const rect = ref === null || ref === void 0 ? void 0 : ref.getBoundingClientRect();
+        const { width = 0, height = 0 } = rect || {};
+        const { x, y } = position;
+        const xIsOffScreen = x + width > window.innerWidth;
+        const yIsOffScreen = y + height > window.innerHeight;
+        const xOffSet = x + width - window.innerWidth + tokens["space-base"];
+        const yOffSet = y + height - window.innerHeight;
+        const newPosX = Math.floor(xIsOffScreen ? x - xOffSet : x);
+        const newPosY = Math.floor(yIsOffScreen ? y - yOffSet : y);
+        return { posX: newPosX, posY: newPosY };
+    }
+}
+
+export { DataListActionsMenu as D };