@jobber/components 5.20.8-SCOTTTHd.47 → 5.20.8-SCOTTTHs-a30bcbb.35

package/dist/{DataListAction-D4U_FYxT.js → DataListAction-CP-l_rqo.js}

@@ -1,11 +1,11 @@
 'use strict';
 
 var React = require('react');
-var Typography = require('./Typography-BbeLF-cH.js');
-var Icon = require('./Icon-COz3twBh.js');
-var DataListLayoutContext = require('./DataListLayoutContext-D02swPeQ.js');
+var Typography = require('./Typography-DYUPEo3A.js');
+var Icon = require('./Icon-DMURv2lZ.js');
+var DataListLayoutContext = require('./DataListLayoutContext-Cbo2cMSj.js');
 
-var styles = {"action":"iyg43v-S9yU-","actionUrl":"_1Su7ISzHA8o-","label":"AUJNqz93ZDA-","spinning":"wpr2ZImyox8-"};
+var styles = {"action":"zfAZTjk0VNE-","actionUrl":"iiHzJY7IVi0-","label":"R0mZNYJjNCg-","spinning":"rP-C67Ex-6M-"};
 
 function DataListAction({ label, icon, destructive, visible = () => true, onClick, actionUrl, }) {
     const { activeItem } = DataListLayoutContext.useDataListLayoutActionsContext();
@@ -13,7 +13,7 @@ function DataListAction({ label, icon, destructive, visible = () => true, onClic
     if (activeItem && !visible(activeItem)) {
         return null;
     }
-    const color = destructive ? "critical" : "heading";
+    const color = destructive ? "destructive" : "heading";
     function getActionLabel() {
         if (typeof label === "string") {
             return label;

package/dist/{DataListActions-B4IWR5tf.js → DataListActions-CHtKbrmO.js}

@@ -1,19 +1,18 @@
 'use strict';
 
 var React = require('react');
-var Tooltip = require('./Tooltip-RH0OxkfB.js');
-var Button = require('./Button-BJQ6Ejjr.js');
-var DataListOverflowFade = require('./DataListOverflowFade-DWQereGo.js');
-var DataList_utils = require('./DataList.utils-BDFmppBo.js');
-var DataListLayoutContext = require('./DataListLayoutContext-D02swPeQ.js');
-var DataListItemActionsOverflow = require('./DataListItemActionsOverflow-BBpkbgAS.js');
+var Tooltip = require('./Tooltip-BoY5a6uJ.js');
+var Button = require('./Button-X03o-OsV.js');
+var DataList_utils = require('./DataList.utils-CL18qiqW.js');
+var DataListLayoutContext = require('./DataListLayoutContext-Cbo2cMSj.js');
+var DataListItemActionsOverflow = require('./DataListItemActionsOverflow-8mIsG7TE.js');
 
 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.createElement(DataListOverflowFade.DataListOverflowFade, null,
+    return (React.createElement(React.Fragment, null,
         exposedActions.map(({ props }) => {
             if (props.visible && !props.visible(activeItem))
                 return null;
@@ -37,7 +36,7 @@ function DataListActions({ children, itemsToExpose = 2, }) {
                         else {
                             (_b = props.onClick) === null || _b === void 0 ? void 0 : _b.call(props);
                         }
-                    }, type: "secondary", variation: "subtle" })));
+                    }, type: "tertiary", variation: "subtle" })));
         }),
         React.createElement(DataListItemActionsOverflow.DataListItemActionsOverflow, { actions: childrenArray })));
 }

package/dist/{DataListActions-Gu9Uih95.js → DataListActions-DCJa_1gZ.js}

@@ -1,17 +1,16 @@
 import React, { Children, isValidElement } from 'react';
-import { T as Tooltip } from './Tooltip-C86S21LH.js';
-import { B as Button } from './Button-DNnlnxie.js';
-import { D as DataListOverflowFade } from './DataListOverflowFade-D7Po9LC5.js';
-import { b as getExposedActions } from './DataList.utils-D1bfZwFM.js';
-import { u as useDataListLayoutActionsContext } from './DataListLayoutContext-DQ_x9-Ss.js';
-import { D as DataListItemActionsOverflow } from './DataListItemActionsOverflow-ymQbtOAT.js';
+import { T as Tooltip } from './Tooltip-BcPn1-6w.js';
+import { B as Button } from './Button-B_S7hCDq.js';
+import { b as getExposedActions } from './DataList.utils-B2oGWkP7.js';
+import { u as useDataListLayoutActionsContext } from './DataListLayoutContext-DddNXBVd.js';
+import { D as DataListItemActionsOverflow } from './DataListItemActionsOverflow-CFdANFqT.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,
+    return (React.createElement(React.Fragment, null,
         exposedActions.map(({ props }) => {
             if (props.visible && !props.visible(activeItem))
                 return null;
@@ -35,7 +34,7 @@ function DataListActions({ children, itemsToExpose = 2, }) {
                         else {
                             (_b = props.onClick) === null || _b === void 0 ? void 0 : _b.call(props);
                         }
-                    }, type: "secondary", variation: "subtle" })));
+                    }, type: "tertiary", variation: "subtle" })));
         }),
         React.createElement(DataListItemActionsOverflow, { actions: childrenArray })));
 }

package/dist/{DataListActionsMenu-h1tBbMCR.js → DataListActionsMenu-DjwdEIAJ.js}

@@ -2,15 +2,15 @@
 
 var React = require('react');
 var framerMotion = require('framer-motion');
-var useFocusTrap = require('./useFocusTrap-Dk-GuYjG.js');
-var useRefocusOnActivator = require('./useRefocusOnActivator-BFTtukDp.js');
-var useOnKeyDown = require('./useOnKeyDown-BWr1Uh0c.js');
+var useFocusTrap = require('./useFocusTrap-BcAaMx_N.js');
+var useRefocusOnActivator = require('./useRefocusOnActivator-DWAxYZut.js');
+var useOnKeyDown = require('./useOnKeyDown-Dw5_7B0M.js');
 var ReactDOM = require('react-dom');
 var design = require('@jobber/design');
-var useIsMounted = require('./useIsMounted-BcLpfdxY.js');
-var DataList_const = require('./DataList.const-DPiGv0GD.js');
+var useIsMounted = require('./useIsMounted-B2QNmIn3.js');
+var DataList_const = require('./DataList.const-DrS_5CIC.js');
 
-var styles = {"menu":"aokwZU8jbWU-","overlay":"XtVRP97TVSE-","spinning":"_4NlH1Gk7Izg-"};
+var styles = {"menu":"e1ztw2-YxtM-","overlay":"uMoOb93Pf1Q-","spinning":"_0wS9DWCNuj4-"};
 
 const variants = {
     hidden: { opacity: 0, y: -10 },

package/dist/{DataListActionsMenu-DYcKhvhV.js → DataListActionsMenu-LsNt9fHn.js}

@@ -1,14 +1,14 @@
 import React, { useState } from 'react';
 import { AnimatePresence, motion } from 'framer-motion';
-import { u as useFocusTrap_2 } from './useFocusTrap-Bq1x_TCr.js';
-import { u as useRefocusOnActivator_2 } from './useRefocusOnActivator-DRpjaqxT.js';
-import { u as useOnKeyDown_2 } from './useOnKeyDown-CP-ZHBUl.js';
+import { u as useFocusTrap_2 } from './useFocusTrap-CtkRT0O5.js';
+import { u as useRefocusOnActivator_2 } from './useRefocusOnActivator-pF1A-PEc.js';
+import { u as useOnKeyDown_2 } from './useOnKeyDown-CN4xcllA.js';
 import { createPortal } from 'react-dom';
 import { tokens } from '@jobber/design';
-import { u as useIsMounted_2 } from './useIsMounted-BAI_EWrW.js';
-import { d as TRANSITION_DELAY_IN_SECONDS } from './DataList.const-DocgTf-L.js';
+import { u as useIsMounted_2 } from './useIsMounted-CgSxXL6-.js';
+import { d as TRANSITION_DELAY_IN_SECONDS } from './DataList.const-Dqstiu7B.js';
 
-var styles = {"menu":"aokwZU8jbWU-","overlay":"XtVRP97TVSE-","spinning":"_4NlH1Gk7Izg-"};
+var styles = {"menu":"e1ztw2-YxtM-","overlay":"uMoOb93Pf1Q-","spinning":"_0wS9DWCNuj4-"};
 
 const variants = {
     hidden: { opacity: 0, y: -10 },

package/dist/{DataListBulkActions-4br6rZjV.js → DataListBulkActions-BHCS__wy.js}

@@ -1,11 +1,13 @@
 'use strict';
 
 var React = require('react');
-var DataListContext = require('./DataListContext-AwEVhjUT.js');
-var DataListActions = require('./DataListActions-B4IWR5tf.js');
-var useResponsiveSizing = require('./useResponsiveSizing-DkLOt1NN.js');
+var DataListContext = require('./DataListContext-CuIrm1YO.js');
+var DataListActions = require('./DataListActions-CHtKbrmO.js');
+var useResponsiveSizing = require('./useResponsiveSizing-DE7RC318.js');
 
-var styles = {"bulkActions":"v-GrdlFpBLk-","spinning":"F9PdLb5CNv4-"};
+var styles = {"bulkActions":"BJxca-StHxg-","spinning":"p2-O4fMurTY-"};
+
+const BULK_ACTIONS_CONTAINER_TEST_ID = "ATL-DataListBulkActions-Container";
 
 // This component is meant to capture the props of the DataList.BulkActions
 function DataListBulkActions(
@@ -21,7 +23,7 @@ function InternalDataListBulkActions() {
     const { sm } = useResponsiveSizing.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 },
+    return (React.createElement("div", { "data-testid": BULK_ACTIONS_CONTAINER_TEST_ID, className: styles.bulkActions },
         React.createElement(DataListActions.DataListActions, { itemsToExpose: itemsToExpose }, children)));
 }
 

package/dist/{DataListBulkActions-DEZa61eT.js → DataListBulkActions-C7pi9iPz.js}

@@ -1,9 +1,11 @@
 import React from 'react';
-import { u as useDataListContext } from './DataListContext-DKVwenO-.js';
-import { D as DataListActions } from './DataListActions-Gu9Uih95.js';
-import { u as useResponsiveSizing } from './useResponsiveSizing-XvTBAY2o.js';
+import { u as useDataListContext } from './DataListContext-D9dIXF3x.js';
+import { D as DataListActions } from './DataListActions-DCJa_1gZ.js';
+import { u as useResponsiveSizing } from './useResponsiveSizing-CVonUnvp.js';
 
-var styles = {"bulkActions":"v-GrdlFpBLk-","spinning":"F9PdLb5CNv4-"};
+var styles = {"bulkActions":"BJxca-StHxg-","spinning":"p2-O4fMurTY-"};
+
+const BULK_ACTIONS_CONTAINER_TEST_ID = "ATL-DataListBulkActions-Container";
 
 // This component is meant to capture the props of the DataList.BulkActions
 function DataListBulkActions(
@@ -19,7 +21,7 @@ function InternalDataListBulkActions() {
     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 },
+    return (React.createElement("div", { "data-testid": BULK_ACTIONS_CONTAINER_TEST_ID, className: styles.bulkActions },
         React.createElement(DataListActions, { itemsToExpose: itemsToExpose }, children)));
 }
 

package/dist/{DataListContext-AwEVhjUT.js → DataListContext-CuIrm1YO.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 var React = require('react');
-var noop = require('./noop-CJMBQplB.js');
+var noop = require('./noop-BUBheiOg.js');
 
 const defaultValues = {
     title: "",

package/dist/{DataListContext-DKVwenO-.js → DataListContext-D9dIXF3x.js}

@@ -1,5 +1,5 @@
 import React, { createContext, useContext } from 'react';
-import { n as noop } from './noop-Cik5WVpU.js';
+import { n as noop } from './noop-RKdG5BZD.js';
 
 const defaultValues = {
     title: "",

package/dist/{DataListEmptyState-BJNXk1UV.js → DataListEmptyState-Pao_-eo_.js}

@@ -1,10 +1,10 @@
 import React, { useContext, cloneElement } from 'react';
-import { D as DataListContext } from './DataListContext-DKVwenO-.js';
-import { T as Text } from './Text-CBZYvoLZ.js';
-import { B as Button } from './Button-DNnlnxie.js';
-import { E as EMPTY_FILTER_RESULTS_MESSAGE, b as EMPTY_RESULTS_MESSAGE, c as EMPTY_STATE_ACTION_BUTTON_ONLY_ERROR } from './DataList.const-DocgTf-L.js';
+import { D as DataListContext } from './DataListContext-D9dIXF3x.js';
+import { T as Text } from './Text-DfqZm-hl.js';
+import { B as Button } from './Button-B_S7hCDq.js';
+import { E as EMPTY_FILTER_RESULTS_MESSAGE, b as EMPTY_RESULTS_MESSAGE, c as EMPTY_STATE_ACTION_BUTTON_ONLY_ERROR } from './DataList.const-Dqstiu7B.js';
 
-var styles = {"emptyStateWrapper":"zg3w9nQga-M-","spinning":"HR4CBbZaLEs-"};
+var styles = {"emptyStateWrapper":"R0MWvfTO9vg-","spinning":"hVJ2XoR6bR0-"};
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 function DataListEmptyState(_) {

package/dist/{DataListEmptyState-DpNyPOI0.js → DataListEmptyState-XQHEzkOn.js}

@@ -1,12 +1,12 @@
 'use strict';
 
 var React = require('react');
-var DataListContext = require('./DataListContext-AwEVhjUT.js');
-var Text = require('./Text-B9SvNYhV.js');
-var Button = require('./Button-BJQ6Ejjr.js');
-var DataList_const = require('./DataList.const-DPiGv0GD.js');
+var DataListContext = require('./DataListContext-CuIrm1YO.js');
+var Text = require('./Text-CJWvewR1.js');
+var Button = require('./Button-X03o-OsV.js');
+var DataList_const = require('./DataList.const-DrS_5CIC.js');
 
-var styles = {"emptyStateWrapper":"zg3w9nQga-M-","spinning":"HR4CBbZaLEs-"};
+var styles = {"emptyStateWrapper":"R0MWvfTO9vg-","spinning":"hVJ2XoR6bR0-"};
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 function DataListEmptyState(_) {

package/dist/{DataListFilters-gGFZE6DF.js → DataListFilters-BJRC2bWt.js}

@@ -1,11 +1,11 @@
 'use strict';
 
 var React = require('react');
-var DataListSort = require('./DataListSort-DIlg5xhJ.js');
-var DataListOverflowFade = require('./DataListOverflowFade-DWQereGo.js');
-var DataListContext = require('./DataListContext-AwEVhjUT.js');
-var DataList_utils = require('./DataList.utils-BDFmppBo.js');
-var useResponsiveSizing = require('./useResponsiveSizing-DkLOt1NN.js');
+var DataListSort = require('./DataListSort-BlHKzLmm.js');
+var DataListOverflowFade = require('./DataListOverflowFade-DO8zPJQT.js');
+var DataListContext = require('./DataListContext-CuIrm1YO.js');
+var DataList_utils = require('./DataList.utils-CL18qiqW.js');
+var useResponsiveSizing = require('./useResponsiveSizing-DE7RC318.js');
 
 function useShowHeader() {
     const { headerVisibility } = DataListContext.useDataListContext();

package/dist/{DataListFilters-Bj8VHPxU.js → DataListFilters-Bgnzlsgy.js}

@@ -1,9 +1,9 @@
 import React from 'react';
-import { D as DataListSort } from './DataListSort-C_bEHo6o.js';
-import { D as DataListOverflowFade } from './DataListOverflowFade-D7Po9LC5.js';
-import { u as useDataListContext } from './DataListContext-DKVwenO-.js';
-import { g as getCompoundComponent } from './DataList.utils-D1bfZwFM.js';
-import { u as useResponsiveSizing } from './useResponsiveSizing-XvTBAY2o.js';
+import { D as DataListSort } from './DataListSort-CMwS5ZOU.js';
+import { D as DataListOverflowFade } from './DataListOverflowFade-DHZ17hJm.js';
+import { u as useDataListContext } from './DataListContext-D9dIXF3x.js';
+import { g as getCompoundComponent } from './DataList.utils-B2oGWkP7.js';
+import { u as useResponsiveSizing } from './useResponsiveSizing-CVonUnvp.js';
 
 function useShowHeader() {
     const { headerVisibility } = useDataListContext();

package/dist/{DataListHeader-DteYi2PV.js → DataListHeader-BoDb-Vs_.js}

@@ -1,16 +1,16 @@
 import React from 'react';
-import { u as useDataListContext } from './DataListContext-DKVwenO-.js';
-import { c as generateHeaderElements, s as sortBreakpoints } from './DataList.utils-D1bfZwFM.js';
-import { u as useResponsiveSizing } from './useResponsiveSizing-XvTBAY2o.js';
+import { u as useDataListContext } from './DataListContext-D9dIXF3x.js';
+import { c as generateHeaderElements, s as sortBreakpoints } from './DataList.utils-B2oGWkP7.js';
+import { u as useResponsiveSizing } from './useResponsiveSizing-CVonUnvp.js';
 import classnames from 'classnames';
-import { A as AnimatedSwitcher } from './AnimatedSwitcher-D1s7v7Pj.js';
-import { T as Text } from './Text-CBZYvoLZ.js';
-import { B as Button } from './Button-DNnlnxie.js';
-import { C as Checkbox } from './Checkbox-Du3UpGHa.js';
-import { s as styles } from './DataList-jeNDHtJs.js';
-import { I as InternalDataListBulkActions } from './DataListBulkActions-DEZa61eT.js';
-import { u as useBatchSelect } from './useBatchSelect-DJYgQSH9.js';
-import { u as useActiveLayout } from './useActiveLayout-DqLTs8SC.js';
+import { A as AnimatedSwitcher } from './AnimatedSwitcher-CxE7j2G5.js';
+import { T as Text } from './Text-DfqZm-hl.js';
+import { B as Button } from './Button-B_S7hCDq.js';
+import { C as Checkbox } from './Checkbox-BHKjoG1e.js';
+import { s as styles } from './DataList.module-Q7upEK9h.js';
+import { I as InternalDataListBulkActions } from './DataListBulkActions-C7pi9iPz.js';
+import { u as useBatchSelect } from './useBatchSelect-DjVwGs4a.js';
+import { u as useActiveLayout } from './useActiveLayout-BDqWO57G.js';
 
 function DataListHeaderCheckbox({ children }) {
     const { sm } = useResponsiveSizing();

package/dist/{DataListHeader-C_PKIh5P.js → DataListHeader-O26VfKrB.js}

@@ -1,18 +1,18 @@
 'use strict';
 
 var React = require('react');
-var DataListContext = require('./DataListContext-AwEVhjUT.js');
-var DataList_utils = require('./DataList.utils-BDFmppBo.js');
-var useResponsiveSizing = require('./useResponsiveSizing-DkLOt1NN.js');
+var DataListContext = require('./DataListContext-CuIrm1YO.js');
+var DataList_utils = require('./DataList.utils-CL18qiqW.js');
+var useResponsiveSizing = require('./useResponsiveSizing-DE7RC318.js');
 var classnames = require('classnames');
-var AnimatedSwitcher = require('./AnimatedSwitcher-AsGjitPB.js');
-var Text = require('./Text-B9SvNYhV.js');
-var Button = require('./Button-BJQ6Ejjr.js');
-var Checkbox = require('./Checkbox-CSwkd8kN.js');
-var DataList = require('./DataList-keHLIPwl.js');
-var DataListBulkActions = require('./DataListBulkActions-4br6rZjV.js');
-var useBatchSelect = require('./useBatchSelect-_3-SXW19.js');
-var useActiveLayout = require('./useActiveLayout-Cotya0aL.js');
+var AnimatedSwitcher = require('./AnimatedSwitcher-CBceYyHk.js');
+var Text = require('./Text-CJWvewR1.js');
+var Button = require('./Button-X03o-OsV.js');
+var Checkbox = require('./Checkbox-3WI4brva.js');
+var DataList_module = require('./DataList.module-NXjaDrGs.js');
+var DataListBulkActions = require('./DataListBulkActions-BHCS__wy.js');
+var useBatchSelect = require('./useBatchSelect-BrXQGVm1.js');
+var useActiveLayout = require('./useActiveLayout-KeBUhg6X.js');
 
 function DataListHeaderCheckbox({ children }) {
     const { sm } = useResponsiveSizing.useResponsiveSizing();
@@ -23,14 +23,14 @@ function DataListHeaderCheckbox({ children }) {
         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,
+    return (React.createElement("div", { className: DataList_module.styles.selectable },
+        React.createElement("div", { className: classnames(DataList_module.styles.selectAllCheckbox, {
+                [DataList_module.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 },
+                React.createElement("div", { className: DataList_module.styles.srOnly }, selectedLabel))),
+        React.createElement(AnimatedSwitcher.AnimatedSwitcher, { switched: hasAtLeastOneSelected, initialChild: children, switchTo: React.createElement("div", { className: DataList_module.styles.batchSelectContainer },
+                React.createElement("div", { className: DataList_module.styles.headerBatchSelect },
                     Boolean(selectedCount) && React.createElement(Text.Text, null,
                         selectedCount,
                         " selected"),
@@ -82,7 +82,7 @@ function DataListHeader() {
     const headerData = DataList_utils.generateHeaderElements(headers);
     if (!headerData)
         return null;
-    return (React.createElement("div", { className: DataList.styles.headerTitles },
+    return (React.createElement("div", { className: DataList_module.styles.headerTitles },
         React.createElement(DataListHeaderCheckbox, null, layout(headerData))));
     function getVisibleSize() {
         const visibilityKeys = Object.keys(headerVisibility);

package/dist/{DataListHeaderTile-CDI4rxKs.js → DataListHeaderTile-CXGxVihB.js}

@@ -1,18 +1,23 @@
 import React, { useState, useRef } from 'react';
 import classnames from 'classnames';
-import { u as useFocusTrap_2 } from './useFocusTrap-Bq1x_TCr.js';
-import { u as useRefocusOnActivator_2 } from './useRefocusOnActivator-DRpjaqxT.js';
-import { D as DataListSortingOptions } from './DataListSortingOptions-ChsgR4HN.js';
-import { T as Text } from './Text-CBZYvoLZ.js';
-import { u as useDataListContext } from './DataListContext-DKVwenO-.js';
+import { u as useFocusTrap_2 } from './useFocusTrap-CtkRT0O5.js';
+import { u as useRefocusOnActivator_2 } from './useRefocusOnActivator-pF1A-PEc.js';
+import { D as DataListSortingOptions } from './DataListSortingOptions-DGtLyAlP.js';
+import { T as Text } from './Text-DfqZm-hl.js';
+import { u as useDataListContext } from './DataListContext-D9dIXF3x.js';
 
-var styles$1 = {"headerLabel":"fLmJZJJqMcE-","sortable":"UG8cHUT3Hds-","spinning":"ChqhGpZJ0WQ-"};
+var styles$1 = {"headerLabel":"kXYd0fpUuek-","sortable":"kryUPRHDUcs-","spinning":"CY2nuF56w6Y-"};
 
-var styles = {"sortIcon":"AN5egORYy-0-","inactive":"_6KYeQXWXLQ8-","active":"F1uTDCK0Sb0-","spinning":"_7byFDfcjeak-"};
+var styles = {"sortIcon":"_7-6mnR33fOk-","inactive":"GBbFLBGQDvI-","active":"ADTGMg72Zw4-","spinning":"l5wqDUSULQY-"};
 
 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 },
+const SORT_ORDER_MAP = {
+    asc: "ascending",
+    desc: "descending",
+    none: "none",
+};
+function DataListSortingArrows({ headerKey, order, }) {
+    return (React.createElement("div", { className: styles.sortIcon, "data-testid": SORTING_ICON_TEST_ID, "aria-label": `${headerKey} sort icon`, "aria-sort": order ? SORT_ORDER_MAP[order] : undefined },
         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" }))));
@@ -37,7 +42,7 @@ function DataListHeaderTile({ headers, headerKey, visible = false, }) {
         }), 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" }))));
+        isSortable && (React.createElement(DataListSortingArrows, { order: (sortingState === null || sortingState === void 0 ? void 0 : sortingState.key) === headerKey ? sortingState.order : "none", headerKey: headerKey }))));
     function toggleSorting(newSortingKey, newId, newLabel) {
         var _a, _b;
         const isSameKey = newSortingKey === (sortingState === null || sortingState === void 0 ? void 0 : sortingState.key);
@@ -69,7 +74,7 @@ function DataListHeaderTile({ headers, headerKey, visible = false, }) {
         }
         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]);
+            toggleSorting(headerKey, id, headers[headerKey]);
         }
     }
     function handleSelectChange(newSortOption) {

package/dist/{DataListHeaderTile-BaLkeMzB.js → DataListHeaderTile-n3yXmN7O.js}

@@ -2,19 +2,24 @@
 
 var React = require('react');
 var classnames = require('classnames');
-var useFocusTrap = require('./useFocusTrap-Dk-GuYjG.js');
-var useRefocusOnActivator = require('./useRefocusOnActivator-BFTtukDp.js');
-var DataListSortingOptions = require('./DataListSortingOptions-DVZ3IPmO.js');
-var Text = require('./Text-B9SvNYhV.js');
-var DataListContext = require('./DataListContext-AwEVhjUT.js');
+var useFocusTrap = require('./useFocusTrap-BcAaMx_N.js');
+var useRefocusOnActivator = require('./useRefocusOnActivator-DWAxYZut.js');
+var DataListSortingOptions = require('./DataListSortingOptions-BwvPQi3S.js');
+var Text = require('./Text-CJWvewR1.js');
+var DataListContext = require('./DataListContext-CuIrm1YO.js');
 
-var styles$1 = {"headerLabel":"fLmJZJJqMcE-","sortable":"UG8cHUT3Hds-","spinning":"ChqhGpZJ0WQ-"};
+var styles$1 = {"headerLabel":"kXYd0fpUuek-","sortable":"kryUPRHDUcs-","spinning":"CY2nuF56w6Y-"};
 
-var styles = {"sortIcon":"AN5egORYy-0-","inactive":"_6KYeQXWXLQ8-","active":"F1uTDCK0Sb0-","spinning":"_7byFDfcjeak-"};
+var styles = {"sortIcon":"_7-6mnR33fOk-","inactive":"GBbFLBGQDvI-","active":"ADTGMg72Zw4-","spinning":"l5wqDUSULQY-"};
 
 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 },
+const SORT_ORDER_MAP = {
+    asc: "ascending",
+    desc: "descending",
+    none: "none",
+};
+function DataListSortingArrows({ headerKey, order, }) {
+    return (React.createElement("div", { className: styles.sortIcon, "data-testid": SORTING_ICON_TEST_ID, "aria-label": `${headerKey} sort icon`, "aria-sort": order ? SORT_ORDER_MAP[order] : undefined },
         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" }))));
@@ -39,7 +44,7 @@ function DataListHeaderTile({ headers, headerKey, visible = false, }) {
         }), 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" }))));
+        isSortable && (React.createElement(DataListSortingArrows, { order: (sortingState === null || sortingState === void 0 ? void 0 : sortingState.key) === headerKey ? sortingState.order : "none", headerKey: headerKey }))));
     function toggleSorting(newSortingKey, newId, newLabel) {
         var _a, _b;
         const isSameKey = newSortingKey === (sortingState === null || sortingState === void 0 ? void 0 : sortingState.key);
@@ -71,7 +76,7 @@ function DataListHeaderTile({ headers, headerKey, visible = false, }) {
         }
         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]);
+            toggleSorting(headerKey, id, headers[headerKey]);
         }
     }
     function handleSelectChange(newSortOption) {

package/dist/{DataListItem-DZ7-4jpM.js → DataListItem-3ouu-Rrk.js}

@@ -1,16 +1,16 @@
 import React, { Children, useMemo, isValidElement, useState } from 'react';
 import { AnimatePresence } from 'framer-motion';
 import classnames from 'classnames';
-import { u as useDataListLayoutContext } from './DataListLayoutContext-B3M4u7IY.js';
-import { I as InternalDataListItemActions } from './DataListItemActions-uHedcBqq.js';
-import { D as DataListActionsMenu } from './DataListActionsMenu-DYcKhvhV.js';
-import { D as DataListLayoutActionsContext } from './DataListLayoutContext-DQ_x9-Ss.js';
-import { d as generateListItemElement } from './DataList.utils-D1bfZwFM.js';
-import { C as Checkbox } from './Checkbox-Du3UpGHa.js';
-import { u as useBatchSelect } from './useBatchSelect-DJYgQSH9.js';
-import { s as styles } from './DataList-jeNDHtJs.js';
-import { D as DataListItemClickable } from './DataListItemClickable-DTZC8LBk.js';
-import { u as useDataListContext } from './DataListContext-DKVwenO-.js';
+import { u as useDataListLayoutContext } from './DataListLayoutContext-JpnTKRYv.js';
+import { I as InternalDataListItemActions } from './DataListItemActions-BV5hxVIH.js';
+import { D as DataListActionsMenu } from './DataListActionsMenu-LsNt9fHn.js';
+import { D as DataListLayoutActionsContext } from './DataListLayoutContext-DddNXBVd.js';
+import { d as generateListItemElement } from './DataList.utils-B2oGWkP7.js';
+import { C as Checkbox } from './Checkbox-BHKjoG1e.js';
+import { u as useBatchSelect } from './useBatchSelect-DjVwGs4a.js';
+import { s as styles } from './DataList.module-Q7upEK9h.js';
+import { D as DataListItemClickable } from './DataListItemClickable-DPkNmxTK.js';
+import { u as useDataListContext } from './DataListContext-D9dIXF3x.js';
 
 function DataListItemInternal({ children, item, }) {
     const { canSelect, hasAtLeastOneSelected, isSelectAll, selectedIDs, selected, onSelect, } = useBatchSelect();
@@ -74,7 +74,6 @@ function useGetItemActions(item) {
     };
 }
 
-// eslint-disable-next-line max-statements
 function DataListItem({ item, layout, }) {
     const { hasInLayoutActions } = useDataListLayoutContext();
     const [showMenu, setShowMenu] = useState(false);

package/dist/{DataListItem-DTJKGP_i.js → DataListItem-CHDV6x4P.js}

@@ -3,23 +3,23 @@
 var React = require('react');
 var framerMotion = require('framer-motion');
 var classnames = require('classnames');
-var DataListLayoutContext = require('./DataListLayoutContext-CE6HfDu8.js');
-var DataListItemActions = require('./DataListItemActions-WS4r_fsO.js');
-var DataListActionsMenu = require('./DataListActionsMenu-h1tBbMCR.js');
-var DataListLayoutContext$1 = require('./DataListLayoutContext-D02swPeQ.js');
-var DataList_utils = require('./DataList.utils-BDFmppBo.js');
-var Checkbox = require('./Checkbox-CSwkd8kN.js');
-var useBatchSelect = require('./useBatchSelect-_3-SXW19.js');
-var DataList = require('./DataList-keHLIPwl.js');
-var DataListItemClickable = require('./DataListItemClickable-DTLYmwzb.js');
-var DataListContext = require('./DataListContext-AwEVhjUT.js');
+var DataListLayoutContext = require('./DataListLayoutContext-BarBgPay.js');
+var DataListItemActions = require('./DataListItemActions-Bb2qUFmn.js');
+var DataListActionsMenu = require('./DataListActionsMenu-DjwdEIAJ.js');
+var DataListLayoutContext$1 = require('./DataListLayoutContext-Cbo2cMSj.js');
+var DataList_utils = require('./DataList.utils-CL18qiqW.js');
+var Checkbox = require('./Checkbox-3WI4brva.js');
+var useBatchSelect = require('./useBatchSelect-BrXQGVm1.js');
+var DataList_module = require('./DataList.module-NXjaDrGs.js');
+var DataListItemClickable = require('./DataListItemClickable-Ddfntxxd.js');
+var DataListContext = require('./DataListContext-CuIrm1YO.js');
 
 function DataListItemInternal({ children, item, }) {
     const { canSelect, hasAtLeastOneSelected, isSelectAll, selectedIDs, selected, onSelect, } = useBatchSelect.useBatchSelect();
     if (!canSelect)
         return children;
-    return (React.createElement("div", { className: classnames(DataList.styles.selectable, {
-            [DataList.styles.selected]: hasAtLeastOneSelected,
+    return (React.createElement("div", { className: classnames(DataList_module.styles.selectable, {
+            [DataList_module.styles.selected]: hasAtLeastOneSelected,
         }) },
         children,
         React.createElement(Checkbox.Checkbox, { checked: getIsChecked(), onChange: handleChange })));
@@ -76,7 +76,6 @@ function useGetItemActions(item) {
     };
 }
 
-// eslint-disable-next-line max-statements
 function DataListItem({ item, layout, }) {
     const { hasInLayoutActions } = DataListLayoutContext.useDataListLayoutContext();
     const [showMenu, setShowMenu] = React.useState(false);
@@ -87,8 +86,8 @@ function DataListItem({ item, layout, }) {
     const shouldShowContextMenu = showMenu && isContextMenuVisible && hasActions;
     const shouldShowHoverMenu = showMenu && hasActions && !hasInLayoutActions && !shouldShowContextMenu;
     return (React.createElement(DataListLayoutContext$1.DataListLayoutActionsContext.Provider, { value: { activeItem: item } },
-        React.createElement("div", { onMouseEnter: handleShowMenu, onMouseLeave: handleHideMenu, onFocus: handleShowMenu, onBlur: handleHideMenu, onContextMenu: handleContextMenu, className: classnames(DataList.styles.listItem, {
-                [DataList.styles.active]: showMenu && isContextMenuVisible,
+        React.createElement("div", { onMouseEnter: handleShowMenu, onMouseLeave: handleHideMenu, onFocus: handleShowMenu, onBlur: handleHideMenu, onContextMenu: handleContextMenu, className: classnames(DataList_module.styles.listItem, {
+                [DataList_module.styles.active]: showMenu && isContextMenuVisible,
             }), key: item.id },
             React.createElement(DataListItemInternal, { item: item },
                 React.createElement(DataListItemClickable.DataListItemClickable, null, layout(generatedItem))),

package/dist/{DataListItemActions-uHedcBqq.js → DataListItemActions-BV5hxVIH.js}

@@ -1,9 +1,9 @@
 import React from 'react';
 import { motion } from 'framer-motion';
-import { T as TRANSITION_DURATION_IN_SECONDS, d as TRANSITION_DELAY_IN_SECONDS } from './DataList.const-DocgTf-L.js';
-import { D as DataListActions } from './DataListActions-Gu9Uih95.js';
+import { T as TRANSITION_DURATION_IN_SECONDS, d as TRANSITION_DELAY_IN_SECONDS } from './DataList.const-Dqstiu7B.js';
+import { D as DataListActions } from './DataListActions-DCJa_1gZ.js';
 
-var styles = {"menu":"jHcHGQ-HDbk-","spinning":"FPXSEmAikIo-"};
+var styles = {"menu":"SSm2j6d2kYo-","spinning":"Mpmu6IiBTSI-"};
 
 // This component is meant to capture the props of the DataList.ItemActions
 function DataListItemActions(
@@ -12,14 +12,14 @@ _) {
     return null;
 }
 const variants = {
-    hidden: { opacity: 0, y: 10 },
-    visible: { opacity: 1, y: 0 },
+    hidden: { opacity: 0, y: 0 },
+    visible: { opacity: 1, y: 4 },
 };
 function InternalDataListItemActions({ actions, }) {
     return (React.createElement(motion.div, { variants: variants, initial: "hidden", animate: "visible", exit: "hidden", transition: {
             duration: TRANSITION_DURATION_IN_SECONDS,
             delay: TRANSITION_DELAY_IN_SECONDS,
-        }, className: styles.menu, onContextMenu: handleContextMenu },
+        }, className: styles.menu, "data-elevation": "elevated", onContextMenu: handleContextMenu },
         React.createElement(DataListActions, null, actions)));
 }
 function handleContextMenu(event) {