@jobber/components 4.85.5 → 4.85.6-CJS-to-ESM.1

package/dist/DataListBulkActions-OLJ1EzI6.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { s as styleInject } from './style-inject.es-tgCJW-Cu.js';
+import { u as useDataListContext } from './DataListContext-DHdRjGCC.js';
+import { D as DataListActions } from './DataListActions-DYrocbl7.js';
+import { u as useResponsiveSizing } from './useResponsiveSizing-DRjeJos_.js';
+
+var css_248z = ".v-GrdlFpBLk- {\n  /* Offset the button's padding so the height of the header bar doesn't change */\n  margin: calc(var(--space-small) * -1) 0;\n}\n";
+var styles = {"bulkActions":"v-GrdlFpBLk-"};
+styleInject(css_248z);
+
+// This component is meant to capture the props of the DataList.BulkActions
+function DataListBulkActions(
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+_) {
+    return null;
+}
+function InternalDataListBulkActions() {
+    const { bulkActionsComponent } = useDataListContext();
+    if (!bulkActionsComponent)
+        return null;
+    const { children } = bulkActionsComponent.props;
+    const { sm } = useResponsiveSizing();
+    // Collapse all actions under "More actions" when breakpoint is smaller than sm
+    const itemsToExpose = sm ? 3 : 0;
+    return (React.createElement("div", { className: styles.bulkActions },
+        React.createElement(DataListActions, { itemsToExpose: itemsToExpose }, children)));
+}
+
+export { DataListBulkActions as D, InternalDataListBulkActions as I };

package/dist/DataListContext-CWEeA357.js

@@ -0,0 +1,29 @@
+'use strict';
+
+var React = require('react');
+var noop = require('./noop-DXH2P2oE.js');
+
+const defaultValues = {
+    title: "",
+    data: [],
+    headers: {},
+    children: [],
+    selected: [],
+    layoutBreakpoints: [],
+    layouts: {
+        xs: children => React.createElement(React.Fragment, null, children),
+        sm: children => React.createElement(React.Fragment, null, children),
+        md: children => React.createElement(React.Fragment, null, children),
+        lg: children => React.createElement(React.Fragment, null, children),
+        xl: children => React.createElement(React.Fragment, null, children),
+    },
+    registerLayout: noop.noop,
+};
+const DataListContext = React.createContext(defaultValues);
+function useDataListContext() {
+    return React.useContext(DataListContext);
+}
+
+exports.DataListContext = DataListContext;
+exports.defaultValues = defaultValues;
+exports.useDataListContext = useDataListContext;

package/dist/DataListContext-DHdRjGCC.js

@@ -0,0 +1,25 @@
+import React, { createContext, useContext } from 'react';
+import { n as noop } from './noop-D_wzwwIq.js';
+
+const defaultValues = {
+    title: "",
+    data: [],
+    headers: {},
+    children: [],
+    selected: [],
+    layoutBreakpoints: [],
+    layouts: {
+        xs: children => React.createElement(React.Fragment, null, children),
+        sm: children => React.createElement(React.Fragment, null, children),
+        md: children => React.createElement(React.Fragment, null, children),
+        lg: children => React.createElement(React.Fragment, null, children),
+        xl: children => React.createElement(React.Fragment, null, children),
+    },
+    registerLayout: noop,
+};
+const DataListContext = createContext(defaultValues);
+function useDataListContext() {
+    return useContext(DataListContext);
+}
+
+export { DataListContext as D, defaultValues as d, useDataListContext as u };

package/dist/DataListEmptyState-CvRFHlYt.js

@@ -0,0 +1,56 @@
+'use strict';
+
+var React = require('react');
+var styleInject_es = require('./style-inject.es-XZHJH68X.js');
+var DataListContext = require('./DataListContext-CWEeA357.js');
+var Text = require('./Text-D9gsHxbp.js');
+var Button = require('./Button-D3mW3Hcg.js');
+var DataList_const = require('./DataList.const-YbvF2-QB.js');
+
+var css_248z = ".zg3w9nQga-M- {\n  display: -ms-flexbox;\n  display: flex;\n  box-sizing: border-box;\n  padding: var(--space-base);\n  -ms-flex-pack: center;\n      justify-content: center;\n  -ms-flex-direction: column;\n      flex-direction: column;\n  row-gap: var(--space-base);\n  -ms-flex-align: center;\n      align-items: center;\n  -ms-flex: 1;\n      flex: 1;\n}\n";
+var styles = {"emptyStateWrapper":"zg3w9nQga-M-"};
+styleInject_es.styleInject(css_248z);
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function DataListEmptyState(_) {
+    return null;
+}
+function InternalDataListEmptyState() {
+    const { emptyStateComponents: components, filtered } = React.useContext(DataListContext.DataListContext);
+    const { message, action } = getMessages();
+    return (React.createElement("div", { className: styles.emptyStateWrapper },
+        React.createElement(Text.Text, { align: "center" }, message),
+        renderButton(action)));
+    function getMessages() {
+        const { defaultEmptyState, filteredEmptyState } = getEmptyStates(components);
+        if (filtered) {
+            return {
+                message: (filteredEmptyState === null || filteredEmptyState === void 0 ? void 0 : filteredEmptyState.props.message) || DataList_const.EMPTY_FILTER_RESULTS_MESSAGE,
+                action: filteredEmptyState === null || filteredEmptyState === void 0 ? void 0 : filteredEmptyState.props.action,
+            };
+        }
+        return {
+            message: (defaultEmptyState === null || defaultEmptyState === void 0 ? void 0 : defaultEmptyState.props.message) || DataList_const.EMPTY_RESULTS_MESSAGE,
+            action: defaultEmptyState === null || defaultEmptyState === void 0 ? void 0 : defaultEmptyState.props.action,
+        };
+    }
+}
+function renderButton(action) {
+    if (action) {
+        if (action.type === Button.Button) {
+            return React.cloneElement(action, {
+                variation: action.props.variation || "subtle",
+            });
+        }
+        throw new Error(DataList_const.EMPTY_STATE_ACTION_BUTTON_ONLY_ERROR);
+    }
+    return;
+}
+function getEmptyStates(components) {
+    const defaultEmptyState = components === null || components === void 0 ? void 0 : components.find(es => es.props.type === "empty" || es.props.type === undefined);
+    const filteredEmptyState = components === null || components === void 0 ? void 0 : components.find(es => es.props.type === "filtered");
+    return { defaultEmptyState, filteredEmptyState };
+}
+
+exports.DataListEmptyState = DataListEmptyState;
+exports.InternalDataListEmptyState = InternalDataListEmptyState;

package/dist/DataListEmptyState-Rk1OowmR.js

@@ -0,0 +1,53 @@
+import React, { useContext, cloneElement } from 'react';
+import { s as styleInject } from './style-inject.es-tgCJW-Cu.js';
+import { D as DataListContext } from './DataListContext-DHdRjGCC.js';
+import { T as Text } from './Text-DEviM1Tv.js';
+import { B as Button } from './Button-CWVwgwhn.js';
+import { E as EMPTY_FILTER_RESULTS_MESSAGE, b as EMPTY_RESULTS_MESSAGE, c as EMPTY_STATE_ACTION_BUTTON_ONLY_ERROR } from './DataList.const-Wz370ukq.js';
+
+var css_248z = ".zg3w9nQga-M- {\n  display: -ms-flexbox;\n  display: flex;\n  box-sizing: border-box;\n  padding: var(--space-base);\n  -ms-flex-pack: center;\n      justify-content: center;\n  -ms-flex-direction: column;\n      flex-direction: column;\n  row-gap: var(--space-base);\n  -ms-flex-align: center;\n      align-items: center;\n  -ms-flex: 1;\n      flex: 1;\n}\n";
+var styles = {"emptyStateWrapper":"zg3w9nQga-M-"};
+styleInject(css_248z);
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function DataListEmptyState(_) {
+    return null;
+}
+function InternalDataListEmptyState() {
+    const { emptyStateComponents: components, filtered } = useContext(DataListContext);
+    const { message, action } = getMessages();
+    return (React.createElement("div", { className: styles.emptyStateWrapper },
+        React.createElement(Text, { align: "center" }, message),
+        renderButton(action)));
+    function getMessages() {
+        const { defaultEmptyState, filteredEmptyState } = getEmptyStates(components);
+        if (filtered) {
+            return {
+                message: (filteredEmptyState === null || filteredEmptyState === void 0 ? void 0 : filteredEmptyState.props.message) || EMPTY_FILTER_RESULTS_MESSAGE,
+                action: filteredEmptyState === null || filteredEmptyState === void 0 ? void 0 : filteredEmptyState.props.action,
+            };
+        }
+        return {
+            message: (defaultEmptyState === null || defaultEmptyState === void 0 ? void 0 : defaultEmptyState.props.message) || EMPTY_RESULTS_MESSAGE,
+            action: defaultEmptyState === null || defaultEmptyState === void 0 ? void 0 : defaultEmptyState.props.action,
+        };
+    }
+}
+function renderButton(action) {
+    if (action) {
+        if (action.type === Button) {
+            return cloneElement(action, {
+                variation: action.props.variation || "subtle",
+            });
+        }
+        throw new Error(EMPTY_STATE_ACTION_BUTTON_ONLY_ERROR);
+    }
+    return;
+}
+function getEmptyStates(components) {
+    const defaultEmptyState = components === null || components === void 0 ? void 0 : components.find(es => es.props.type === "empty" || es.props.type === undefined);
+    const filteredEmptyState = components === null || components === void 0 ? void 0 : components.find(es => es.props.type === "filtered");
+    return { defaultEmptyState, filteredEmptyState };
+}
+
+export { DataListEmptyState as D, InternalDataListEmptyState as I };

package/dist/DataListFilters-Dfw7ptNa.js

@@ -0,0 +1,46 @@
+'use strict';
+
+var React = require('react');
+var DataListSort = require('./DataListSort-CQ62ewRY.js');
+var DataListOverflowFade = require('./DataListOverflowFade-DxUdWrD0.js');
+var DataListContext = require('./DataListContext-CWEeA357.js');
+var DataList_utils = require('./DataList.utils-B0hOFZaX.js');
+var useResponsiveSizing = require('./useResponsiveSizing-CMuS7Or1.js');
+
+function useShowHeader() {
+    const { headerVisibility } = DataListContext.useDataListContext();
+    if (headerVisibility === undefined)
+        return true;
+    const sizes = useResponsiveSizing.useResponsiveSizing();
+    const sizeKeys = Object.keys(sizes);
+    const showHeader = sizeKeys.reduce((previous, breakpoint) => {
+        const isHeaderVisible = headerVisibility[breakpoint] || false;
+        const isBreakpointTriggered = sizes[breakpoint];
+        return previous || (isBreakpointTriggered && isHeaderVisible);
+    }, false);
+    return showHeader;
+}
+
+// This component is meant to capture the props of the DataList.Filters
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function DataListFilters(_) {
+    return null;
+}
+/**
+ * Renders the DataList.Filters component
+ */
+function InternalDataListFilters() {
+    const { children: parentChildren } = DataListContext.useDataListContext();
+    const showHeader = useShowHeader();
+    const showSortButton = !showHeader;
+    const component = DataList_utils.getCompoundComponent(parentChildren, DataListFilters);
+    if (!showSortButton && !component)
+        return null;
+    const children = component === null || component === void 0 ? void 0 : component.props.children;
+    return (React.createElement(DataListOverflowFade.DataListOverflowFade, null,
+        children && children,
+        showSortButton && React.createElement(DataListSort.DataListSort, null)));
+}
+
+exports.DataListFilters = DataListFilters;
+exports.InternalDataListFilters = InternalDataListFilters;

package/dist/DataListFilters-y0CrJgWe.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import { D as DataListSort } from './DataListSort-CW4v1psG.js';
+import { D as DataListOverflowFade } from './DataListOverflowFade-DUocP0Jz.js';
+import { u as useDataListContext } from './DataListContext-DHdRjGCC.js';
+import { g as getCompoundComponent } from './DataList.utils-C931OWj0.js';
+import { u as useResponsiveSizing } from './useResponsiveSizing-DRjeJos_.js';
+
+function useShowHeader() {
+    const { headerVisibility } = useDataListContext();
+    if (headerVisibility === undefined)
+        return true;
+    const sizes = useResponsiveSizing();
+    const sizeKeys = Object.keys(sizes);
+    const showHeader = sizeKeys.reduce((previous, breakpoint) => {
+        const isHeaderVisible = headerVisibility[breakpoint] || false;
+        const isBreakpointTriggered = sizes[breakpoint];
+        return previous || (isBreakpointTriggered && isHeaderVisible);
+    }, false);
+    return showHeader;
+}
+
+// This component is meant to capture the props of the DataList.Filters
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function DataListFilters(_) {
+    return null;
+}
+/**
+ * Renders the DataList.Filters component
+ */
+function InternalDataListFilters() {
+    const { children: parentChildren } = useDataListContext();
+    const showHeader = useShowHeader();
+    const showSortButton = !showHeader;
+    const component = getCompoundComponent(parentChildren, DataListFilters);
+    if (!showSortButton && !component)
+        return null;
+    const children = component === null || component === void 0 ? void 0 : component.props.children;
+    return (React.createElement(DataListOverflowFade, null,
+        children && children,
+        showSortButton && React.createElement(DataListSort, null)));
+}
+
+export { DataListFilters as D, InternalDataListFilters as I };

package/dist/DataListHeader-BFg0X9Jz.js

@@ -0,0 +1,95 @@
+'use strict';
+
+var React = require('react');
+var DataListContext = require('./DataListContext-CWEeA357.js');
+var DataList_utils = require('./DataList.utils-B0hOFZaX.js');
+var useResponsiveSizing = require('./useResponsiveSizing-CMuS7Or1.js');
+var classnames = require('classnames');
+var AnimatedSwitcher = require('./AnimatedSwitcher-UmlTf067.js');
+var Text = require('./Text-D9gsHxbp.js');
+var Button = require('./Button-D3mW3Hcg.js');
+var Checkbox = require('./Checkbox-C78HDAVJ.js');
+var DataList = require('./DataList-BL3zeA83.js');
+var DataListBulkActions = require('./DataListBulkActions-BSjCVCSw.js');
+var useBatchSelect = require('./useBatchSelect-B7U15920.js');
+var useActiveLayout = require('./useActiveLayout-BzQghohH.js');
+
+function DataListHeaderCheckbox({ children }) {
+    const { sm } = useResponsiveSizing.useResponsiveSizing();
+    const { data, totalCount } = DataListContext.useDataListContext();
+    const { canSelectAll, hasAtLeastOneSelected, isSelectAll, selectedCount, selectedIDs, selected, onSelectAll, onSelect, } = useBatchSelect.useBatchSelect();
+    // If there's no onSelectAll or onSelect, we don't need to render the checkbox.
+    if (!canSelectAll)
+        return children;
+    const deselectText = sm ? "Deselect All" : "Deselect";
+    const selectedLabel = selectedCount ? `${selectedCount} selected` : "";
+    return (React.createElement("div", { className: DataList.styles.selectable },
+        React.createElement("div", { className: classnames(DataList.styles.selectAllCheckbox, {
+                [DataList.styles.visible]: canSelectAll,
+            }) },
+            React.createElement(Checkbox.Checkbox, { checked: isAllSelected(), indeterminate: isIndeterminate(), onChange: handleSelectAll },
+                React.createElement("div", { className: DataList.styles.srOnly }, selectedLabel))),
+        React.createElement(AnimatedSwitcher.AnimatedSwitcher, { switched: hasAtLeastOneSelected, initialChild: children, switchTo: React.createElement("div", { className: DataList.styles.batchSelectContainer },
+                React.createElement("div", { className: DataList.styles.headerBatchSelect },
+                    Boolean(selectedCount) && React.createElement(Text.Text, null,
+                        selectedCount,
+                        " selected"),
+                    React.createElement(Button.Button, { label: deselectText, onClick: () => onSelect === null || onSelect === void 0 ? void 0 : onSelect([]), type: "tertiary" })),
+                React.createElement(DataListBulkActions.InternalDataListBulkActions, null)) })));
+    function isIndeterminate() {
+        if (isSelectAll)
+            return selectedIDs.length > 0;
+        return selectedCount > 0 && !isAllSelected();
+    }
+    function isAllSelected() {
+        if (isSelectAll)
+            return true;
+        // If there's a totalCount, we can use that to accurately determine if the
+        // user have "selected all".
+        if (totalCount) {
+            return totalCount === selectedCount;
+        }
+        // Otherwise, we'll use the total count of data. This is not as reliable, as
+        // it's possible that the would select all loaded data while we're
+        // loading more. It's still hard to get to that state as the load more
+        // triggers before you see the last item.
+        return data.length > 0 && selectedCount >= data.length;
+    }
+    function handleSelectAll() {
+        if (isAllSelected()) {
+            return onSelectAll === null || onSelectAll === void 0 ? void 0 : onSelectAll([]);
+        }
+        onSelectAll === null || onSelectAll === void 0 ? void 0 : onSelectAll({ totalCount: getTotalCount(), unselected: [] });
+    }
+    function getTotalCount() {
+        if (selected && "totalCount" in selected)
+            return selected.totalCount;
+        if (totalCount)
+            return totalCount;
+        return 0;
+    }
+}
+
+function DataListHeader() {
+    const breakpoints = useResponsiveSizing.useResponsiveSizing();
+    const { headerVisibility = { xs: true, sm: true, md: true, lg: true, xl: true }, headers, layoutBreakpoints, } = DataListContext.useDataListContext();
+    const { hasAtLeastOneSelected } = useBatchSelect.useBatchSelect();
+    const size = getVisibleSize();
+    const { layout } = useActiveLayout.useActiveLayout();
+    const visible = headerVisibility[size];
+    if ((!visible && !hasAtLeastOneSelected) || !layout)
+        return null;
+    const headerData = DataList_utils.generateHeaderElements(headers);
+    if (!headerData)
+        return null;
+    return (React.createElement("div", { className: DataList.styles.headerTitles },
+        React.createElement(DataListHeaderCheckbox, null, layout(headerData))));
+    function getVisibleSize() {
+        const visibilityKeys = Object.keys(headerVisibility);
+        const headerBreakpoints = DataList_utils.sortBreakpoints(visibilityKeys).reverse();
+        const visibleHeaderSize = headerBreakpoints.find(key => breakpoints[key]);
+        return visibleHeaderSize || layoutBreakpoints[0];
+    }
+}
+
+exports.DataListHeader = DataListHeader;

package/dist/DataListHeader-DB1ikJ1G.js

@@ -0,0 +1,93 @@
+import React from 'react';
+import { u as useDataListContext } from './DataListContext-DHdRjGCC.js';
+import { c as generateHeaderElements, s as sortBreakpoints } from './DataList.utils-C931OWj0.js';
+import { u as useResponsiveSizing } from './useResponsiveSizing-DRjeJos_.js';
+import classnames from 'classnames';
+import { A as AnimatedSwitcher } from './AnimatedSwitcher-B4fUExeN.js';
+import { T as Text } from './Text-DEviM1Tv.js';
+import { B as Button } from './Button-CWVwgwhn.js';
+import { C as Checkbox } from './Checkbox-qsepteuE.js';
+import { s as styles } from './DataList-D8rsiB6p.js';
+import { I as InternalDataListBulkActions } from './DataListBulkActions-OLJ1EzI6.js';
+import { u as useBatchSelect } from './useBatchSelect-DMD3JH4P.js';
+import { u as useActiveLayout } from './useActiveLayout-DazMYwxf.js';
+
+function DataListHeaderCheckbox({ children }) {
+    const { sm } = useResponsiveSizing();
+    const { data, totalCount } = useDataListContext();
+    const { canSelectAll, hasAtLeastOneSelected, isSelectAll, selectedCount, selectedIDs, selected, onSelectAll, onSelect, } = useBatchSelect();
+    // If there's no onSelectAll or onSelect, we don't need to render the checkbox.
+    if (!canSelectAll)
+        return children;
+    const deselectText = sm ? "Deselect All" : "Deselect";
+    const selectedLabel = selectedCount ? `${selectedCount} selected` : "";
+    return (React.createElement("div", { className: styles.selectable },
+        React.createElement("div", { className: classnames(styles.selectAllCheckbox, {
+                [styles.visible]: canSelectAll,
+            }) },
+            React.createElement(Checkbox, { checked: isAllSelected(), indeterminate: isIndeterminate(), onChange: handleSelectAll },
+                React.createElement("div", { className: styles.srOnly }, selectedLabel))),
+        React.createElement(AnimatedSwitcher, { switched: hasAtLeastOneSelected, initialChild: children, switchTo: React.createElement("div", { className: styles.batchSelectContainer },
+                React.createElement("div", { className: styles.headerBatchSelect },
+                    Boolean(selectedCount) && React.createElement(Text, null,
+                        selectedCount,
+                        " selected"),
+                    React.createElement(Button, { label: deselectText, onClick: () => onSelect === null || onSelect === void 0 ? void 0 : onSelect([]), type: "tertiary" })),
+                React.createElement(InternalDataListBulkActions, null)) })));
+    function isIndeterminate() {
+        if (isSelectAll)
+            return selectedIDs.length > 0;
+        return selectedCount > 0 && !isAllSelected();
+    }
+    function isAllSelected() {
+        if (isSelectAll)
+            return true;
+        // If there's a totalCount, we can use that to accurately determine if the
+        // user have "selected all".
+        if (totalCount) {
+            return totalCount === selectedCount;
+        }
+        // Otherwise, we'll use the total count of data. This is not as reliable, as
+        // it's possible that the would select all loaded data while we're
+        // loading more. It's still hard to get to that state as the load more
+        // triggers before you see the last item.
+        return data.length > 0 && selectedCount >= data.length;
+    }
+    function handleSelectAll() {
+        if (isAllSelected()) {
+            return onSelectAll === null || onSelectAll === void 0 ? void 0 : onSelectAll([]);
+        }
+        onSelectAll === null || onSelectAll === void 0 ? void 0 : onSelectAll({ totalCount: getTotalCount(), unselected: [] });
+    }
+    function getTotalCount() {
+        if (selected && "totalCount" in selected)
+            return selected.totalCount;
+        if (totalCount)
+            return totalCount;
+        return 0;
+    }
+}
+
+function DataListHeader() {
+    const breakpoints = useResponsiveSizing();
+    const { headerVisibility = { xs: true, sm: true, md: true, lg: true, xl: true }, headers, layoutBreakpoints, } = useDataListContext();
+    const { hasAtLeastOneSelected } = useBatchSelect();
+    const size = getVisibleSize();
+    const { layout } = useActiveLayout();
+    const visible = headerVisibility[size];
+    if ((!visible && !hasAtLeastOneSelected) || !layout)
+        return null;
+    const headerData = generateHeaderElements(headers);
+    if (!headerData)
+        return null;
+    return (React.createElement("div", { className: styles.headerTitles },
+        React.createElement(DataListHeaderCheckbox, null, layout(headerData))));
+    function getVisibleSize() {
+        const visibilityKeys = Object.keys(headerVisibility);
+        const headerBreakpoints = sortBreakpoints(visibilityKeys).reverse();
+        const visibleHeaderSize = headerBreakpoints.find(key => breakpoints[key]);
+        return visibleHeaderSize || layoutBreakpoints[0];
+    }
+}
+
+export { DataListHeader as D };

package/dist/DataListHeaderTile-BcvpRQqc.js

@@ -0,0 +1,86 @@
+'use strict';
+
+var React = require('react');
+var classnames = require('classnames');
+var useFocusTrap = require('@jobber/hooks/useFocusTrap');
+var useRefocusOnActivator = require('@jobber/hooks/useRefocusOnActivator');
+var styleInject_es = require('./style-inject.es-XZHJH68X.js');
+var DataListSortingOptions = require('./DataListSortingOptions-ZiARzP5b.js');
+var Text = require('./Text-D9gsHxbp.js');
+var DataListContext = require('./DataListContext-CWEeA357.js');
+
+var css_248z$1 = ".fLmJZJJqMcE- {\n  display: -ms-flexbox;\n  display: flex;\n  position: relative;\n  -ms-flex-align: center;\n      align-items: center;\n  padding: 0;\n  border: none;\n  background-color: transparent;\n}\n\n.fLmJZJJqMcE-:focus,\n.fLmJZJJqMcE-:focus-visible {\n  outline: none;\n}\n\n.fLmJZJJqMcE-:focus-visible {\n  box-shadow: var(--shadow-focus);\n}\n\n.UG8cHUT3Hds- {\n  cursor: pointer;\n}\n";
+var styles$1 = {"headerLabel":"fLmJZJJqMcE-","sortable":"UG8cHUT3Hds-"};
+styleInject_es.styleInject(css_248z$1);
+
+var css_248z = ".AN5egORYy-0- {\n  width: var(--space-large);\n  height: var(--space-large);\n  margin-right: var(--space-small);\n}\n\n.AN5egORYy-0- path {\n  fill: var(--color-interactive--subtle);\n  transition: all var(--timing-base) ease;\n}\n\n.AN5egORYy-0- path.F1uTDCK0Sb0- {\n  fill: var(--color-heading);\n}\n\n.AN5egORYy-0- path._6KYeQXWXLQ8- {\n  fill: var(--color-inactive--surface);\n}\n\n.AN5egORYy-0-:hover path {\n  fill: var(--color-interactive--subtle);\n  transition: all var(--timing-base) ease;\n}\n";
+var styles = {"sortIcon":"AN5egORYy-0-","active":"F1uTDCK0Sb0-","inactive":"_6KYeQXWXLQ8-"};
+styleInject_es.styleInject(css_248z);
+
+const SORTING_ICON_TEST_ID = "ATL-DataList-Sorting-Icon";
+function DataListSortingArrows({ order }) {
+    return (React.createElement("div", { className: styles.sortIcon, "data-testid": SORTING_ICON_TEST_ID },
+        React.createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+            React.createElement("path", { className: getActiveClassName("asc"), d: "M16.2929 10.6661C15.9024 11.0566 15.2692 11.0566 14.8787 10.6661L12.2891 8.14263L9.70711 10.6661C9.31658 11.0566 8.68342 11.0566 8.29289 10.6661C7.90237 10.2756 7.90237 9.64239 8.29289 9.25186L11.5858 5.95897C11.9763 5.56845 12.6095 5.56845 13 5.95897L16.2929 9.25186C16.6834 9.64239 16.6834 10.2756 16.2929 10.6661Z" }),
+            React.createElement("path", { className: getActiveClassName("desc"), d: "M8.29292 13.3339C8.68345 12.9434 9.31661 12.9434 9.70714 13.3339L12.2968 15.8573L14.8787 13.3339C15.2692 12.9434 15.9024 12.9434 16.2929 13.3339C16.6834 13.7244 16.6834 14.3576 16.2929 14.7481L13 18.041C12.6095 18.4315 11.9763 18.4315 11.5858 18.041L8.29292 14.7481C7.9024 14.3576 7.9024 13.7244 8.29292 13.3339Z" }))));
+    function getActiveClassName(targetOrder) {
+        return order === targetOrder ? styles.active : styles.inactive;
+    }
+}
+
+/* eslint-disable max-statements */
+function DataListHeaderTile({ headers, headerKey, visible = false, }) {
+    useRefocusOnActivator.useRefocusOnActivator(visible);
+    const { sorting } = DataListContext.useDataListContext();
+    const [isDropDownOpen, setIsDropDownOpen] = React.useState(false);
+    const optionsListRef = useFocusTrap.useFocusTrap(isDropDownOpen);
+    const dataListHeaderTileRef = React.useRef(null);
+    const sortableItem = sorting === null || sorting === void 0 ? void 0 : sorting.sortable.find(item => item.key === headerKey);
+    const isSortable = Boolean(sortableItem);
+    const sortingState = sorting === null || sorting === void 0 ? void 0 : sorting.state;
+    const Tag = isSortable ? "button" : "div";
+    return (React.createElement(Tag, { className: classnames(styles$1.headerLabel, {
+            [styles$1.sortable]: isSortable,
+        }), onClick: handleOnClick, ref: dataListHeaderTileRef },
+        React.createElement(Text.Text, { maxLines: "single" }, headers[headerKey]),
+        isSortable && (sortableItem === null || sortableItem === void 0 ? void 0 : sortableItem.options) && isDropDownOpen && (React.createElement(DataListSortingOptions.DataListSortingOptions, { options: sortableItem.options, selectedOption: (sorting === null || sorting === void 0 ? void 0 : sorting.state) || null, onSelectChange: handleSelectChange, onClose: () => setIsDropDownOpen(false), optionsListRef: optionsListRef, dataListHeaderTileRef: dataListHeaderTileRef })),
+        isSortable && (React.createElement(DataListSortingArrows, { order: (sortingState === null || sortingState === void 0 ? void 0 : sortingState.key) === headerKey ? sortingState.order : "none" }))));
+    function toggleSorting(newSortingKey, newId, newLabel) {
+        const isSameKey = newSortingKey === (sortingState === null || sortingState === void 0 ? void 0 : sortingState.key);
+        const isDescending = (sortingState === null || sortingState === void 0 ? void 0 : sortingState.order) === "desc";
+        if (isSameKey && isDescending) {
+            sorting === null || sorting === void 0 ? void 0 : sorting.onSort(undefined);
+            return;
+        }
+        const sortingOrder = isSameKey ? "desc" : "asc";
+        setSorting(newSortingKey, newId, newLabel, sortingOrder);
+    }
+    function setSorting(newSortingKey, newId, newLabel, newOrder) {
+        sorting === null || sorting === void 0 ? void 0 : sorting.onSort({
+            key: newSortingKey,
+            id: newId,
+            label: newLabel,
+            order: newOrder,
+        });
+    }
+    function handleOnClick() {
+        var _a, _b;
+        if (!isSortable)
+            return;
+        if (sortableItem === null || sortableItem === void 0 ? void 0 : sortableItem.options) {
+            setIsDropDownOpen(!isDropDownOpen);
+        }
+        else {
+            const id = ((_b = (_a = sortableItem === null || sortableItem === void 0 ? void 0 : sortableItem.options) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.id) || headerKey;
+            toggleSorting(id, headerKey, headers[headerKey]);
+        }
+    }
+    function handleSelectChange(newSortOption) {
+        if (sortableItem) {
+            setSorting(sortableItem.key, newSortOption.id, newSortOption.label, newSortOption.order);
+        }
+        setIsDropDownOpen(true);
+    }
+}
+
+exports.DataListHeaderTile = DataListHeaderTile;

package/dist/DataListHeaderTile-CUaHgFkG.js

@@ -0,0 +1,84 @@
+import React, { useState, useRef } from 'react';
+import classnames from 'classnames';
+import { useFocusTrap } from '@jobber/hooks/useFocusTrap';
+import { useRefocusOnActivator } from '@jobber/hooks/useRefocusOnActivator';
+import { s as styleInject } from './style-inject.es-tgCJW-Cu.js';
+import { D as DataListSortingOptions } from './DataListSortingOptions-BGNu0KOG.js';
+import { T as Text } from './Text-DEviM1Tv.js';
+import { u as useDataListContext } from './DataListContext-DHdRjGCC.js';
+
+var css_248z$1 = ".fLmJZJJqMcE- {\n  display: -ms-flexbox;\n  display: flex;\n  position: relative;\n  -ms-flex-align: center;\n      align-items: center;\n  padding: 0;\n  border: none;\n  background-color: transparent;\n}\n\n.fLmJZJJqMcE-:focus,\n.fLmJZJJqMcE-:focus-visible {\n  outline: none;\n}\n\n.fLmJZJJqMcE-:focus-visible {\n  box-shadow: var(--shadow-focus);\n}\n\n.UG8cHUT3Hds- {\n  cursor: pointer;\n}\n";
+var styles$1 = {"headerLabel":"fLmJZJJqMcE-","sortable":"UG8cHUT3Hds-"};
+styleInject(css_248z$1);
+
+var css_248z = ".AN5egORYy-0- {\n  width: var(--space-large);\n  height: var(--space-large);\n  margin-right: var(--space-small);\n}\n\n.AN5egORYy-0- path {\n  fill: var(--color-interactive--subtle);\n  transition: all var(--timing-base) ease;\n}\n\n.AN5egORYy-0- path.F1uTDCK0Sb0- {\n  fill: var(--color-heading);\n}\n\n.AN5egORYy-0- path._6KYeQXWXLQ8- {\n  fill: var(--color-inactive--surface);\n}\n\n.AN5egORYy-0-:hover path {\n  fill: var(--color-interactive--subtle);\n  transition: all var(--timing-base) ease;\n}\n";
+var styles = {"sortIcon":"AN5egORYy-0-","active":"F1uTDCK0Sb0-","inactive":"_6KYeQXWXLQ8-"};
+styleInject(css_248z);
+
+const SORTING_ICON_TEST_ID = "ATL-DataList-Sorting-Icon";
+function DataListSortingArrows({ order }) {
+    return (React.createElement("div", { className: styles.sortIcon, "data-testid": SORTING_ICON_TEST_ID },
+        React.createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+            React.createElement("path", { className: getActiveClassName("asc"), d: "M16.2929 10.6661C15.9024 11.0566 15.2692 11.0566 14.8787 10.6661L12.2891 8.14263L9.70711 10.6661C9.31658 11.0566 8.68342 11.0566 8.29289 10.6661C7.90237 10.2756 7.90237 9.64239 8.29289 9.25186L11.5858 5.95897C11.9763 5.56845 12.6095 5.56845 13 5.95897L16.2929 9.25186C16.6834 9.64239 16.6834 10.2756 16.2929 10.6661Z" }),
+            React.createElement("path", { className: getActiveClassName("desc"), d: "M8.29292 13.3339C8.68345 12.9434 9.31661 12.9434 9.70714 13.3339L12.2968 15.8573L14.8787 13.3339C15.2692 12.9434 15.9024 12.9434 16.2929 13.3339C16.6834 13.7244 16.6834 14.3576 16.2929 14.7481L13 18.041C12.6095 18.4315 11.9763 18.4315 11.5858 18.041L8.29292 14.7481C7.9024 14.3576 7.9024 13.7244 8.29292 13.3339Z" }))));
+    function getActiveClassName(targetOrder) {
+        return order === targetOrder ? styles.active : styles.inactive;
+    }
+}
+
+/* eslint-disable max-statements */
+function DataListHeaderTile({ headers, headerKey, visible = false, }) {
+    useRefocusOnActivator(visible);
+    const { sorting } = useDataListContext();
+    const [isDropDownOpen, setIsDropDownOpen] = useState(false);
+    const optionsListRef = useFocusTrap(isDropDownOpen);
+    const dataListHeaderTileRef = useRef(null);
+    const sortableItem = sorting === null || sorting === void 0 ? void 0 : sorting.sortable.find(item => item.key === headerKey);
+    const isSortable = Boolean(sortableItem);
+    const sortingState = sorting === null || sorting === void 0 ? void 0 : sorting.state;
+    const Tag = isSortable ? "button" : "div";
+    return (React.createElement(Tag, { className: classnames(styles$1.headerLabel, {
+            [styles$1.sortable]: isSortable,
+        }), onClick: handleOnClick, ref: dataListHeaderTileRef },
+        React.createElement(Text, { maxLines: "single" }, headers[headerKey]),
+        isSortable && (sortableItem === null || sortableItem === void 0 ? void 0 : sortableItem.options) && isDropDownOpen && (React.createElement(DataListSortingOptions, { options: sortableItem.options, selectedOption: (sorting === null || sorting === void 0 ? void 0 : sorting.state) || null, onSelectChange: handleSelectChange, onClose: () => setIsDropDownOpen(false), optionsListRef: optionsListRef, dataListHeaderTileRef: dataListHeaderTileRef })),
+        isSortable && (React.createElement(DataListSortingArrows, { order: (sortingState === null || sortingState === void 0 ? void 0 : sortingState.key) === headerKey ? sortingState.order : "none" }))));
+    function toggleSorting(newSortingKey, newId, newLabel) {
+        const isSameKey = newSortingKey === (sortingState === null || sortingState === void 0 ? void 0 : sortingState.key);
+        const isDescending = (sortingState === null || sortingState === void 0 ? void 0 : sortingState.order) === "desc";
+        if (isSameKey && isDescending) {
+            sorting === null || sorting === void 0 ? void 0 : sorting.onSort(undefined);
+            return;
+        }
+        const sortingOrder = isSameKey ? "desc" : "asc";
+        setSorting(newSortingKey, newId, newLabel, sortingOrder);
+    }
+    function setSorting(newSortingKey, newId, newLabel, newOrder) {
+        sorting === null || sorting === void 0 ? void 0 : sorting.onSort({
+            key: newSortingKey,
+            id: newId,
+            label: newLabel,
+            order: newOrder,
+        });
+    }
+    function handleOnClick() {
+        var _a, _b;
+        if (!isSortable)
+            return;
+        if (sortableItem === null || sortableItem === void 0 ? void 0 : sortableItem.options) {
+            setIsDropDownOpen(!isDropDownOpen);
+        }
+        else {
+            const id = ((_b = (_a = sortableItem === null || sortableItem === void 0 ? void 0 : sortableItem.options) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.id) || headerKey;
+            toggleSorting(id, headerKey, headers[headerKey]);
+        }
+    }
+    function handleSelectChange(newSortOption) {
+        if (sortableItem) {
+            setSorting(sortableItem.key, newSortOption.id, newSortOption.label, newSortOption.order);
+        }
+        setIsDropDownOpen(true);
+    }
+}
+
+export { DataListHeaderTile as D };