@jobber/components 4.43.1 → 4.44.0

package/dist/DataList/DataList.d.ts

@@ -6,7 +6,8 @@ import { DataListEmptyState } from "./components/DataListEmptyState";
 import { DataListItemActions } from "./components/DataListItemActions";
 import { DataListAction } from "./components/DataListAction";
 import { DataListLayoutActions } from "./components/DataListLayoutActions";
-import { DataListObject, DataListProps } from "./DataList.types";
+import { DataListBulkActionProps, DataListObject, DataListProps } from "./DataList.types";
+import { DataListBulkActions } from "./components/DataListBulkActions";
 export declare function DataList<T extends DataListObject>({ sorting, ...props }: DataListProps<T>): JSX.Element;
 export declare namespace DataList {
     var Layout: typeof DataListLayout;
@@ -15,5 +16,7 @@ export declare namespace DataList {
     var Filters: typeof DataListFilters;
     var Search: typeof DataListSearch;
     var ItemActions: typeof DataListItemActions;
-    var Action: typeof DataListAction;
+    var BulkActions: typeof DataListBulkActions;
+    var ItemAction: typeof DataListAction;
+    var BatchAction: (props: DataListBulkActionProps) => JSX.Element;
 }

package/dist/DataList/DataList.types.d.ts

@@ -148,6 +148,7 @@ export interface DataListContextProps<T extends DataListObject> extends DataList
     readonly emptyStateComponents?: ReactElement<DataListEmptyStateProps>[];
     readonly layoutComponents?: ReactElement<DataListLayoutProps<T>>[];
     readonly itemActionComponent?: ReactElement<DataListItemActionsProps<T>>;
+    readonly bulkActionsComponent?: ReactElement<DataListItemActionsProps<T>>;
 }
 export interface DataListLayoutContextProps {
     readonly isInLayoutProvider: boolean;
@@ -174,6 +175,13 @@ interface BaseDataListItemActionsProps<T extends DataListObject> {
      */
     readonly onClick?: (item: T) => void;
 }
+export interface DataListBulkActionsProps {
+    /**
+     * The actions to render on the top of the DataList to make actions to multiple items.
+     * This only accepts the DataList.BatchAction component.
+     */
+    readonly children?: Fragment<ReactElement<DataListBulkActionProps>>;
+}
 interface DataListItemActionsPropsWithURL<T extends DataListObject> extends BaseDataListItemActionsProps<T> {
     /**
      * If a normal page navigation is needed, use this prop to change the element
@@ -207,6 +215,13 @@ export interface DataListActionProps<T extends DataListObject> {
      */
     readonly onClick?: (data: T) => void;
 }
+export interface DataListBulkActionProps extends DataListActionProps<DataListObject> {
+    /**
+     * The callback function when the action is clicked.
+     */
+    readonly onClick?: () => void;
+}
 export interface InternalDataListActionProps<T extends DataListObject> extends DataListActionProps<T> {
-    readonly item: T;
+    readonly item?: T;
+    readonly onClick?: ((data: T) => void) | (() => void);
 }

package/dist/DataList/DataList.utils.d.ts

@@ -1,4 +1,4 @@
-import { ReactElement } from "react";
+import React, { ReactElement } from "react";
 import { DataListHeader, DataListItemType, DataListItemTypeFromHeader, DataListObject } from "./DataList.types";
 import { Breakpoints } from "./DataList.const";
 /**
@@ -18,3 +18,4 @@ export declare function generateListItemElement<T extends DataListObject>(item:
  */
 export declare function generateHeaderElements<T extends DataListObject>(headers: DataListHeader<T>): DataListItemTypeFromHeader<T, DataListHeader<T>> | undefined;
 export declare function sortSizeProp(sizeProp: Breakpoints[]): ("xs" | "sm" | "md" | "lg" | "xl")[];
+export declare function getExposedActions(childrenArray: ReactElement[], childCount?: number): React.ReactElement<any, string | React.JSXElementConstructor<any>>[];

package/dist/DataList/components/DataListBulkActions/DataListBulkActions.const.d.ts

@@ -0,0 +1 @@
+export declare const BULK_ACTIONS_CONTAINER_TEST_ID = "ATL-DataListBulkActions-Container";

package/dist/DataList/components/DataListBulkActions/DataListBulkActions.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { DataListBulkActionsProps } from "../../DataList.types";
+export declare function DataListBulkActions(_: DataListBulkActionsProps): null;
+export declare function InternalDataListBulkActions(): JSX.Element | null;

package/dist/DataList/components/DataListBulkActions/index.d.ts

@@ -0,0 +1 @@
+export * from "./DataListBulkActions";

package/dist/DataList/components/DataListOverflowFade/DataListOverflowFade.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+interface DataListOverflowFadeProps {
+    readonly children: React.ReactNode;
+}
+export declare function DataListOverflowFade({ children }: DataListOverflowFadeProps): JSX.Element;
+export {};

package/dist/DataList/components/DataListOverflowFade/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./DataListOverflowFade";
+export * from "./DataListOverflowFade.const";

package/dist/DataList/index.js

@@ -21,17 +21,17 @@ var useFocusTrap = require('@jobber/hooks/useFocusTrap');
 var useRefocusOnActivator = require('@jobber/hooks/useRefocusOnActivator');
 var useOnKeyDown = require('@jobber/hooks/useOnKeyDown');
 var foundation = require('@jobber/design/foundation');
+var isEmpty = require('lodash/isEmpty');
+var InlineLabel = require('../InlineLabel-afd5fc6f.js');
 var styles$f = require('@jobber/components/DataList/DataList.css');
 require('uuid');
 require('react-hook-form');
 var Checkbox = require('../Checkbox-3bccf65c.js');
-var isEmpty = require('lodash/isEmpty');
-var InlineLabel = require('../InlineLabel-afd5fc6f.js');
 var FormatDate = require('../FormatDate-70ea5b43.js');
 var Heading = require('../Heading-a1191b15.js');
 var AnimatedSwitcher = require('../AnimatedSwitcher-d1e1ddcf.js');
-var Icon = require('../Icon-405a216c.js');
 var useInView = require('@jobber/hooks/useInView');
+var Icon = require('../Icon-405a216c.js');
 var Popover = require('../Popover-bbfc6aa1.js');
 var Content = require('../Content-2ca1ffe1.js');
 var Chip = require('../Chip-4916a642.js');
@@ -52,12 +52,12 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 var noop__default = /*#__PURE__*/_interopDefaultLegacy(noop);
-var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles$f);
 var isEmpty__default = /*#__PURE__*/_interopDefaultLegacy(isEmpty);
+var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles$f);
 var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
 
-var css_248z$e = ".TkdrExYnvcY-,\n.TkdrExYnvcY- * {\n  box-sizing: border-box;\n}\n\n.TkdrExYnvcY- {\n  display: -ms-flexbox;\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) 0;\n  padding: var(--space-small) 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 -webkit-max-content;\n  grid-template-columns: auto max-content;\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(225, 225, 225);\n  border-bottom: var(--border-thick) solid var(--color-border);\n}\n\n.jMSVGIAr5tk- > p {\n  font-weight: 500;\n}\n\n.jMSVGIAr5tk- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n      align-items: center;\n  gap: calc(16px / 4);\n  gap: var(--space-smaller);\n  margin: calc((16px / 2) * -1) 0;\n  margin: calc(calc(16px / 2) * -1) 0;\n  margin: calc(var(--space-small) * -1) 0;\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(225, 225, 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-.Pc0JGX6jCD4-,\n.ise8kHCfhCY-:hover,\n.ise8kHCfhCY-:focus-within {\n  --data-list-item-active-color: var(--color-surface--background);\n  background-color: rgb(244, 244, 244);\n  background-color: var(--data-list-item-active-color);\n}\n\n.Tq6e0BGwcSM- {\n  display: block;\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 * 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\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";
-var styles$e = {"wrapper":"TkdrExYnvcY-","titleContainer":"IcAlZHoB4LI-","headerFilters":"TFO76ysivmg-","headerTitles":"jGHZZYZm1ZY-","headerBatchSelect":"jMSVGIAr5tk-","listItem":"ise8kHCfhCY-","active":"Pc0JGX6jCD4-","listItemClickable":"Tq6e0BGwcSM-","selectable":"d-79rkMqufg-","selectAllCheckbox":"qm-SSuWTXkI-","visible":"VA9RnQp6nbI-","selected":"_4L7iXXzLr5k-","filtering":"Kkp-IYmwq-s-","filteringSpinner":"m-eCShL7TU4-"};
+var css_248z$e = ".TkdrExYnvcY-,\n.TkdrExYnvcY- * {\n  box-sizing: border-box;\n}\n\n.TkdrExYnvcY- {\n  display: -ms-flexbox;\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) 0;\n  padding: var(--space-small) 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 -webkit-max-content;\n  grid-template-columns: auto max-content;\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(225, 225, 225);\n  border-bottom: var(--border-thick) solid var(--color-border);\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  width: 100%;\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: calc(16px / 4);\n  gap: var(--space-smaller);\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(225, 225, 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-.Pc0JGX6jCD4-,\n.ise8kHCfhCY-:hover,\n.ise8kHCfhCY-:focus-within {\n  --data-list-item-active-color: var(--color-surface--background);\n  background-color: rgb(244, 244, 244);\n  background-color: var(--data-list-item-active-color);\n}\n\n.Tq6e0BGwcSM- {\n  display: block;\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 * 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.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$e = {"wrapper":"TkdrExYnvcY-","titleContainer":"IcAlZHoB4LI-","headerFilters":"TFO76ysivmg-","headerTitles":"jGHZZYZm1ZY-","headerBatchSelect":"jMSVGIAr5tk-","listItem":"ise8kHCfhCY-","active":"Pc0JGX6jCD4-","listItemClickable":"Tq6e0BGwcSM-","selectable":"d-79rkMqufg-","selectAllCheckbox":"qm-SSuWTXkI-","visible":"VA9RnQp6nbI-","selected":"_4L7iXXzLr5k-","filtering":"Kkp-IYmwq-s-","filteringSpinner":"m-eCShL7TU4-","srOnly":"esUiRgWabYw-"};
 styleInject_es.styleInject(css_248z$e);
 
 var css_248z$d = ".F56prQsXm3A- {\n  min-width: 80px;\n  margin-left: calc(16px / 2);\n  margin-left: var(--space-small);\n}\n";
@@ -122,10 +122,18 @@ _) {
 }
 function InternalDataListAction({ label, icon, destructive, onClick, item, }) {
     const color = destructive ? "critical" : "blue";
-    return (React__default["default"].createElement("button", { className: styles$a.action, onClick: () => onClick === null || onClick === void 0 ? void 0 : onClick(item) },
+    return (React__default["default"].createElement("button", { className: styles$a.action, onClick: handleClick },
         icon && React__default["default"].createElement(Icon.Icon, { name: icon, color: color }),
         React__default["default"].createElement(Typography.Typography, { textColor: color },
             React__default["default"].createElement("span", { className: styles$a.label }, label))));
+    function handleClick() {
+        if (item) {
+            onClick === null || onClick === void 0 ? void 0 : onClick(item);
+        }
+        else {
+            onClick === null || onClick === void 0 ? void 0 : onClick();
+        }
+    }
 }
 
 var css_248z$9 = ".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(225, 225, 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.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";
@@ -192,7 +200,7 @@ function DataListItemActionsOverflow({ item, actions, }) {
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
         React__default["default"].createElement(Tooltip.Tooltip, { message: "More actions" },
             React__default["default"].createElement(Button.Button, { icon: "more", ariaLabel: "More actions", type: "secondary", variation: "subtle", onClick: handleMoreClick })),
-        item && (React__default["default"].createElement(DataListActionsMenu, { visible: showMenu, position: menuPosition, onRequestClose: handleClose }, React.Children.map(actions, action => (React__default["default"].createElement(InternalDataListAction, Object.assign({}, action.props, { item: item }))))))));
+        actions && (React__default["default"].createElement(DataListActionsMenu, { visible: showMenu, position: menuPosition, onRequestClose: handleClose }, React.Children.map(actions, action => (React__default["default"].createElement(InternalDataListAction, Object.assign({}, action.props, { item: item }))))))));
     function handleMoreClick(event) {
         setShowMenu(true);
         const rect = event.currentTarget.getBoundingClientRect();
@@ -205,111 +213,6 @@ function DataListItemActionsOverflow({ item, actions, }) {
     }
 }
 
-// This component is meant to capture the props of the DataList.ItemActions
-function DataListItemActions(
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-_) {
-    return null;
-}
-const variants = {
-    hidden: { opacity: 0, y: 10 },
-    visible: { opacity: 1, y: 0 },
-};
-function InternalDataListItemActions({ item, }) {
-    const { itemActionComponent } = useDataListContext();
-    if (!itemActionComponent)
-        return null;
-    const { children } = itemActionComponent.props;
-    const childrenArray = React.Children.toArray(children).filter(React.isValidElement);
-    const exposedActions = getExposedActions(childrenArray);
-    childrenArray.splice(0, exposedActions.length);
-    return (React__default["default"].createElement(framerMotion.motion.div, { variants: variants, initial: "hidden", animate: "visible", exit: "hidden", transition: {
-            duration: TRANSITION_DURATION_IN_SECONDS,
-            delay: TRANSITION_DELAY_IN_SECONDS,
-        }, className: styles$b.menu, onContextMenu: handleContextMenu },
-        exposedActions.map(({ props }) => {
-            if (!props.icon)
-                return null;
-            return (React__default["default"].createElement(Tooltip.Tooltip, { key: props.label, message: props.label },
-                React__default["default"].createElement(Button.Button, { icon: props.icon, ariaLabel: props.label, onClick: () => { var _a; return (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, item); }, type: "secondary", variation: "subtle" })));
-        }),
-        React__default["default"].createElement(DataListItemActionsOverflow, { actions: childrenArray, item: item })));
-}
-function handleContextMenu(event) {
-    event.stopPropagation();
-}
-function getExposedActions(childrenArray) {
-    const firstTwoChildren = childrenArray.slice(0, 2);
-    return firstTwoChildren.reduce((result, child, i) => {
-        const hasIcon = Boolean(child.props.icon);
-        const isFirstChild = i === 0;
-        if (isFirstChild && hasIcon) {
-            return [...result, child];
-        }
-        const isSecondChild = i === 1;
-        const hasFirstChild = result.length === 1;
-        if (isSecondChild && hasIcon && hasFirstChild) {
-            return [...result, child];
-        }
-        return result;
-    }, []);
-}
-
-const DataListLayoutActionsContext = React.createContext({ activeItem: undefined });
-function useDataListLayoutActionsContext() {
-    return React.useContext(DataListLayoutActionsContext);
-}
-
-function DataListItemInternal({ children, item, }) {
-    const { selected, onSelect } = useDataListContext();
-    if (selected !== undefined && onSelect) {
-        return (React__default["default"].createElement("div", { className: classnames__default["default"](styles__default["default"].selectable, {
-                [styles__default["default"].selected]: selected === null || selected === void 0 ? void 0 : selected.length,
-            }) },
-            children,
-            React__default["default"].createElement(Checkbox.Checkbox, { checked: selected === null || selected === void 0 ? void 0 : selected.includes(item.id), onChange: handleChange })));
-    }
-    return children;
-    function handleChange() {
-        if (selected === null || selected === void 0 ? void 0 : selected.includes(item.id)) {
-            onSelect === null || onSelect === void 0 ? void 0 : onSelect(selected === null || selected === void 0 ? void 0 : selected.filter(id => id !== item.id));
-        }
-        else if (selected) {
-            onSelect === null || onSelect === void 0 ? void 0 : onSelect([...selected, item.id]);
-        }
-    }
-}
-
-function DataListItemClickableInternal({ onClick, url, to, children, }) {
-    const { activeItem } = useDataListLayoutActionsContext();
-    if (!activeItem)
-        return React__default["default"].createElement(React__default["default"].Fragment, null, children);
-    if (to) {
-        const computedTo = typeof to === "string" ? to : to(activeItem);
-        return (React__default["default"].createElement(reactRouterDom.Link, { className: styles__default["default"].listItemClickable, to: computedTo, onClick: handleClick }, children));
-    }
-    if (url) {
-        const href = typeof url === "string" ? url : url(activeItem);
-        return (React__default["default"].createElement("a", { className: styles__default["default"].listItemClickable, href: href, onClick: handleClick }, children));
-    }
-    if (onClick) {
-        return (React__default["default"].createElement("button", { className: styles__default["default"].listItemClickable, onClick: handleClick }, children));
-    }
-    return React__default["default"].createElement(React__default["default"].Fragment, null, children);
-    function handleClick() {
-        activeItem && (onClick === null || onClick === void 0 ? void 0 : onClick(activeItem));
-    }
-}
-
-function DataListItemClickable({ children }) {
-    const { itemActionComponent } = useDataListContext();
-    if (itemActionComponent) {
-        const props = itemActionComponent.props;
-        return (React__default["default"].createElement(DataListItemClickableInternal, Object.assign({}, props), children));
-    }
-    return React__default["default"].createElement(React__default["default"].Fragment, null, children);
-}
-
 var css_248z$8 = ".WRV-UmQmPzo- {\n  display: -ms-flexbox;\n  display: flex;\n  position: relative;\n  z-index: 0;\n  z-index: var(--elevation-default);\n  overflow: hidden;\n  gap: calc(16px / 2);\n  gap: var(--space-small);\n}\n\n.liQeWCMenD0- {\n  --overflow-bg: var(--data-list-item-active-color, var(--color-surface));\n\n  display: -ms-flexbox;\n\n  display: flex;\n  position: absolute;\n  top: 0;\n  right: 0;\n  height: 100%;\n  padding-left: calc(16px * 1);\n  padding-left: var(--space-base);\n  background-image: linear-gradient(\n    90deg,\n    transparent 0,\n    rgba(255, 255, 255, 1) calc(16px * 1),\n    rgba(255, 255, 255, 1) 100%\n  );\n  background-image: linear-gradient(\n    90deg,\n    transparent 0,\n    var(--overflow-bg) var(--space-base),\n    var(--overflow-bg) 100%\n  );\n  -ms-flex-align: center;\n      align-items: center;\n  transition: all 200ms;\n  transition: all var(--timing-base);\n}\n";
 var styles$8 = {"tags":"WRV-UmQmPzo-","tagCount":"liQeWCMenD0-"};
 styleInject_es.styleInject(css_248z$8);
@@ -465,6 +368,109 @@ function generateHeaderElements(headers) {
 function sortSizeProp(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;
+    }, []);
+}
+
+// This component is meant to capture the props of the DataList.ItemActions
+function DataListItemActions(
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+_) {
+    return null;
+}
+const variants = {
+    hidden: { opacity: 0, y: 10 },
+    visible: { opacity: 1, y: 0 },
+};
+function InternalDataListItemActions({ item, }) {
+    const { itemActionComponent } = useDataListContext();
+    if (!itemActionComponent)
+        return null;
+    const { children } = itemActionComponent.props;
+    const childrenArray = React.Children.toArray(children).filter(React.isValidElement);
+    const exposedActions = getExposedActions(childrenArray);
+    childrenArray.splice(0, exposedActions.length);
+    return (React__default["default"].createElement(framerMotion.motion.div, { variants: variants, initial: "hidden", animate: "visible", exit: "hidden", transition: {
+            duration: TRANSITION_DURATION_IN_SECONDS,
+            delay: TRANSITION_DELAY_IN_SECONDS,
+        }, className: styles$b.menu, onContextMenu: handleContextMenu },
+        exposedActions.map(({ props }) => {
+            if (!props.icon)
+                return null;
+            return (React__default["default"].createElement(Tooltip.Tooltip, { key: props.label, message: props.label },
+                React__default["default"].createElement(Button.Button, { icon: props.icon, ariaLabel: props.label, onClick: () => { var _a; return (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, item); }, type: "secondary", variation: "subtle" })));
+        }),
+        React__default["default"].createElement(DataListItemActionsOverflow, { actions: childrenArray, item: item })));
+}
+function handleContextMenu(event) {
+    event.stopPropagation();
+}
+
+const DataListLayoutActionsContext = React.createContext({ activeItem: undefined });
+function useDataListLayoutActionsContext() {
+    return React.useContext(DataListLayoutActionsContext);
+}
+
+function DataListItemInternal({ children, item, }) {
+    const { selected, onSelect } = useDataListContext();
+    if (selected !== undefined && onSelect) {
+        return (React__default["default"].createElement("div", { className: classnames__default["default"](styles__default["default"].selectable, {
+                [styles__default["default"].selected]: selected === null || selected === void 0 ? void 0 : selected.length,
+            }) },
+            children,
+            React__default["default"].createElement(Checkbox.Checkbox, { checked: selected === null || selected === void 0 ? void 0 : selected.includes(item.id), onChange: handleChange })));
+    }
+    return children;
+    function handleChange() {
+        if (selected === null || selected === void 0 ? void 0 : selected.includes(item.id)) {
+            onSelect === null || onSelect === void 0 ? void 0 : onSelect(selected === null || selected === void 0 ? void 0 : selected.filter(id => id !== item.id));
+        }
+        else if (selected) {
+            onSelect === null || onSelect === void 0 ? void 0 : onSelect([...selected, item.id]);
+        }
+    }
+}
+
+function DataListItemClickableInternal({ onClick, url, to, children, }) {
+    const { activeItem } = useDataListLayoutActionsContext();
+    if (!activeItem)
+        return React__default["default"].createElement(React__default["default"].Fragment, null, children);
+    if (to) {
+        const computedTo = typeof to === "string" ? to : to(activeItem);
+        return (React__default["default"].createElement(reactRouterDom.Link, { className: styles__default["default"].listItemClickable, to: computedTo, onClick: handleClick }, children));
+    }
+    if (url) {
+        const href = typeof url === "string" ? url : url(activeItem);
+        return (React__default["default"].createElement("a", { className: styles__default["default"].listItemClickable, href: href, onClick: handleClick }, children));
+    }
+    if (onClick) {
+        return (React__default["default"].createElement("button", { className: styles__default["default"].listItemClickable, onClick: handleClick }, children));
+    }
+    return React__default["default"].createElement(React__default["default"].Fragment, null, children);
+    function handleClick() {
+        activeItem && (onClick === null || onClick === void 0 ? void 0 : onClick(activeItem));
+    }
+}
+
+function DataListItemClickable({ children }) {
+    const { itemActionComponent } = useDataListContext();
+    if (itemActionComponent) {
+        const props = itemActionComponent.props;
+        return (React__default["default"].createElement(DataListItemClickableInternal, Object.assign({}, props), children));
+    }
+    return React__default["default"].createElement(React__default["default"].Fragment, null, children);
+}
 
 function DataListItem({ item, layout, }) {
     const { itemActionComponent } = useDataListContext();
@@ -544,21 +550,93 @@ function DataListItems({ layouts, mediaMatches, data, }) {
         React__default["default"].createElement(DataListLayoutInternal, { layouts: layouts, mediaMatches: mediaMatches, renderLayout: layout => (React__default["default"].createElement(React__default["default"].Fragment, null, data.map((child, i) => (React__default["default"].createElement(DataListItem, { key: data[i].id, index: i, item: child, layout: layout }))))) })));
 }
 
+const CONTAINER_TEST_ID = "ATL-DataListFilters-Container";
+
+var css_248z$5 = ".jbBRoxlZlNI- {\n  -ms-flex-item-align: center;\n      align-self: center;\n  position: relative;\n  min-width: 0;\n}\n\n.MnN8qbS4hw4- {\n  display: grid;\n  overflow-x: auto;\n  grid-auto-flow: column;\n  grid-auto-columns: -webkit-max-content;\n  grid-auto-columns: max-content;\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n.MnN8qbS4hw4- > :nth-child(n + 3):not(:last-child) {\n  margin-left: calc(16px / 2);\n  margin-left: var(--space-small);\n}\n\n.b-5P7Z8eGO8- {\n  visibility: hidden;\n}\n\n.xzaCS4slLpI-::before,\n.Jf227kC8Nu0-::after {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  width: calc(16px * 1.5);\n  width: var(--space-large);\n  height: 100%;\n  background-image: linear-gradient(\n    to right,\n    rgba(255, 255, 255, 1) 0%,\n    rgba(255, 255, 255, 0) 100%\n  );\n  background-image: linear-gradient(\n    var(--data-list-overflow-shadow-angle, to right),\n    var(--color-surface) 0%,\n    rgba(var(--color-white--rgb), 0) 100%\n  );\n  pointer-events: none;\n}\n\n.xzaCS4slLpI-::before {\n  left: 0;\n}\n\n.Jf227kC8Nu0-::after {\n  --data-list-overflow-shadow-angle: to left;\n  right: 0;\n}\n";
+var styles$5 = {"fadeContainer":"jbBRoxlZlNI-","overflowGrid":"MnN8qbS4hw4-","overflowTrigger":"b-5P7Z8eGO8-","overflowLeft":"xzaCS4slLpI-","overflowRight":"Jf227kC8Nu0-"};
+styleInject_es.styleInject(css_248z$5);
+
+function DataListOverflowFade({ children }) {
+    const [leftRef, isLeftVisible] = useInView.useInView();
+    const [rightRef, isRightVisible] = useInView.useInView();
+    return (React__default["default"].createElement("div", { "data-testid": CONTAINER_TEST_ID, className: classnames__default["default"](styles$5.fadeContainer, {
+            [styles$5.overflowLeft]: !isLeftVisible,
+            [styles$5.overflowRight]: !isRightVisible,
+        }) },
+        React__default["default"].createElement("div", { className: styles$5.overflowGrid },
+            React__default["default"].createElement("span", { ref: leftRef, className: styles$5.overflowTrigger }),
+            children,
+            React__default["default"].createElement("span", { ref: rightRef, className: styles$5.overflowTrigger }))));
+}
+
+// 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 childrenArray = React.Children.toArray(children).filter(React.isValidElement);
+    const exposedActions = getExposedActions(childrenArray, 3);
+    childrenArray.splice(0, exposedActions.length);
+    return (React__default["default"].createElement(DataListOverflowFade, null,
+        exposedActions.map(({ props }) => {
+            if (!props.icon)
+                return null;
+            return (React__default["default"].createElement(Tooltip.Tooltip, { key: props.label, message: props.label },
+                React__default["default"].createElement(Button.Button, { icon: props.icon, ariaLabel: props.label, onClick: () => { var _a; return (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props); }, type: "secondary", variation: "subtle" })));
+        }),
+        React__default["default"].createElement(DataListItemActionsOverflow, { actions: childrenArray })));
+}
+
+function useMediaQuery(CSSMediaQuery) {
+    const [matches, setMatches] = React.useState(window.matchMedia(CSSMediaQuery).matches);
+    React.useEffect(() => {
+        const media = window.matchMedia(CSSMediaQuery);
+        if (media.matches !== matches) {
+            setMatches(media.matches);
+        }
+        const listener = () => setMatches(media.matches);
+        media.addEventListener("change", listener);
+        return () => media.removeEventListener("change", listener);
+    }, [CSSMediaQuery]);
+    return matches;
+}
+
+function useResponsiveSizing() {
+    const xs = useMediaQuery(`(width > ${BREAKPOINT_SIZES.xs}px)`);
+    const sm = useMediaQuery(`(width >= ${BREAKPOINT_SIZES.sm}px)`);
+    const md = useMediaQuery(`(width >= ${BREAKPOINT_SIZES.md}px)`);
+    const lg = useMediaQuery(`(width >= ${BREAKPOINT_SIZES.lg}px)`);
+    const xl = useMediaQuery(`(width >= ${BREAKPOINT_SIZES.xl}px)`);
+    return { xs, sm, md, lg, xl };
+}
+
 function DataListHeaderCheckbox({ children }) {
     const { data, totalCount, selected = [], onSelectAll, onSelect, } = useDataListContext();
     if (!onSelectAll && !onSelect)
         return children;
+    const { sm } = useResponsiveSizing();
+    // Show "Deselect All" if breakpoint is sm or higher
+    const deselectText = sm ? "Deselect All" : "Deselect";
+    const selectedLabel = selected.length ? `${selected.length} selected` : "";
     return (React__default["default"].createElement("div", { className: classnames__default["default"](styles$e.selectable) },
         React__default["default"].createElement("div", { className: classnames__default["default"](styles$e.selectAllCheckbox, {
                 [styles$e.visible]: Boolean(onSelectAll),
             }) },
-            React__default["default"].createElement(Checkbox.Checkbox, { checked: isAllSelected(), indeterminate: selected.length > 0 && !isAllSelected(), onChange: onSelectAll })),
+            React__default["default"].createElement(Checkbox.Checkbox, { checked: isAllSelected(), indeterminate: selected.length > 0 && !isAllSelected(), onChange: onSelectAll },
+                React__default["default"].createElement("div", { className: styles$e.srOnly }, selectedLabel))),
         React__default["default"].createElement(AnimatedSwitcher.AnimatedSwitcher, { switched: Boolean(selected.length), initialChild: children, switchTo: React__default["default"].createElement("div", { className: styles$e.headerBatchSelect },
                 React__default["default"].createElement(Text.Text, null,
                     React__default["default"].createElement("b", null,
                         selected.length,
                         " selected")),
-                React__default["default"].createElement(Button.Button, { label: "Deselect All", onClick: () => onSelect === null || onSelect === void 0 ? void 0 : onSelect([]), type: "tertiary" })) })));
+                React__default["default"].createElement(Button.Button, { label: deselectText, onClick: () => onSelect === null || onSelect === void 0 ? void 0 : onSelect([]), type: "tertiary" }),
+                React__default["default"].createElement(InternalDataListBulkActions, null)) })));
     function isAllSelected() {
         // If there's a totalCount, we can use that to accurately determine if the
         // user have "selected all".
@@ -573,29 +651,6 @@ function DataListHeaderCheckbox({ children }) {
     }
 }
 
-function useMediaQuery(CSSMediaQuery) {
-    const [matches, setMatches] = React.useState(window.matchMedia(CSSMediaQuery).matches);
-    React.useEffect(() => {
-        const media = window.matchMedia(CSSMediaQuery);
-        if (media.matches !== matches) {
-            setMatches(media.matches);
-        }
-        const listener = () => setMatches(media.matches);
-        media.addEventListener("change", listener);
-        return () => media.removeEventListener("change", listener);
-    }, [CSSMediaQuery]);
-    return matches;
-}
-
-function useResponsiveSizing() {
-    const xs = useMediaQuery(`(width > ${BREAKPOINT_SIZES.xs}px)`);
-    const sm = useMediaQuery(`(width >= ${BREAKPOINT_SIZES.sm}px)`);
-    const md = useMediaQuery(`(width >= ${BREAKPOINT_SIZES.md}px)`);
-    const lg = useMediaQuery(`(width >= ${BREAKPOINT_SIZES.lg}px)`);
-    const xl = useMediaQuery(`(width >= ${BREAKPOINT_SIZES.xl}px)`);
-    return { xs, sm, md, lg, xl };
-}
-
 function useShowHeader() {
     const { headerVisibility } = useDataListContext();
     if (headerVisibility === undefined)
@@ -612,7 +667,9 @@ function useShowHeader() {
 
 function DataListHeader({ layouts, mediaMatches, headerData, }) {
     const showHeader = useShowHeader();
-    if (!showHeader || !headerData)
+    const { selected } = useDataListContext();
+    const noItemsSelected = (selected === null || selected === void 0 ? void 0 : selected.length) === 0;
+    if ((!showHeader && noItemsSelected) || !headerData)
         return null;
     return (React__default["default"].createElement(DataListLayoutInternal, { layouts: layouts, mediaMatches: mediaMatches, renderLayout: layout => (React__default["default"].createElement("div", { className: classnames__default["default"](styles$e.headerTitles) },
             React__default["default"].createElement(DataListHeaderCheckbox, null, layout.props.children(headerData)))) }));
@@ -647,12 +704,6 @@ _) {
     return React__default["default"].createElement(React__default["default"].Fragment, null);
 }
 
-var css_248z$5 = ".E-mG3prPSN8- {\n  -ms-flex-item-align: center;\n      align-self: center;\n  position: relative;\n  min-width: 0;\n}\n\n._0LGNoZxtqSE- {\n  display: grid;\n  overflow-x: auto;\n  grid-auto-flow: column;\n  grid-auto-columns: -webkit-max-content;\n  grid-auto-columns: max-content;\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n._0LGNoZxtqSE- > :nth-child(n + 3):not(:last-child) {\n  margin-left: calc(16px / 2);\n  margin-left: var(--space-small);\n}\n\n.LA3-gtgehrE- {\n  visibility: hidden;\n}\n\n.fSPvawYWzZ8-::before,\n.ChfEJMPPVTk-::after {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  width: calc(16px * 1.5);\n  width: var(--space-large);\n  height: 100%;\n  background-image: linear-gradient(\n    to right,\n    rgba(255, 255, 255, 1) 0%,\n    rgba(255, 255, 255, 0) 100%\n  );\n  background-image: linear-gradient(\n    var(--data-list-filters-overflow-shadow-angle, to right),\n    var(--color-surface) 0%,\n    rgba(var(--color-white--rgb), 0) 100%\n  );\n  pointer-events: none;\n}\n\n.fSPvawYWzZ8-::before {\n  left: 0;\n}\n\n.ChfEJMPPVTk-::after {\n  --data-list-filters-overflow-shadow-angle: to left;\n  right: 0;\n}\n";
-var styles$5 = {"filters":"E-mG3prPSN8-","filterActions":"_0LGNoZxtqSE-","overflowTrigger":"LA3-gtgehrE-","overflowLeft":"fSPvawYWzZ8-","overflowRight":"ChfEJMPPVTk-"};
-styleInject_es.styleInject(css_248z$5);
-
-const CONTAINER_TEST_ID = "ATL-DataListFilters-Container";
-
 function DataListSort() {
     const { sorting, headers } = useDataListContext();
     const divRef = React.useRef(null);
@@ -719,20 +770,12 @@ function InternalDataListFilters() {
     const showHeader = useShowHeader();
     const showSortButton = !showHeader;
     const component = getCompoundComponent(parentChildren, DataListFilters);
-    const [leftRef, isLeftVisible] = useInView.useInView();
-    const [rightRef, isRightVisible] = useInView.useInView();
     if (!showSortButton && !component)
         return null;
     const children = component === null || component === void 0 ? void 0 : component.props.children;
-    return (React__default["default"].createElement("div", { "data-testid": CONTAINER_TEST_ID, className: classnames__default["default"](styles$5.filters, {
-            [styles$5.overflowLeft]: !isLeftVisible,
-            [styles$5.overflowRight]: !isRightVisible,
-        }) },
-        React__default["default"].createElement("div", { className: styles$5.filterActions },
-            React__default["default"].createElement("span", { ref: leftRef, className: styles$5.overflowTrigger }),
-            children && children,
-            showSortButton && React__default["default"].createElement(DataListSort, null),
-            React__default["default"].createElement("span", { ref: rightRef, className: styles$5.overflowTrigger }))));
+    return (React__default["default"].createElement(DataListOverflowFade, null,
+        children && children,
+        showSortButton && React__default["default"].createElement(DataListSort, null)));
 }
 
 var css_248z$4 = ".PGOHzrMh374- {\n  --offset: 1px;\n  --sticky-header-transition-properties: var(--timing-base) ease-in-out;\n\n  position: sticky;\n  top: calc(1px * -1);\n  top: calc(var(--offset) * -1);\n  z-index: 1;\n  z-index: var(--elevation-base);\n  padding-top: 1px;\n  padding-top: var(--offset);\n  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--color-surface);\n}\n\n/**\n * Draw a border that gets covered by the column headers border when it shows up.\n *\n * Mostly to prevent us from writing some complex JS to remove the border when\n * the column headers show up.\n */\n\n.PGOHzrMh374-::before {\n  content: \"\";\n  display: block;\n  position: absolute;\n  bottom: 0;\n  left: 50%;\n  z-index: -1;\n  width: 0;\n  height: 0;\n  background-color: rgb(225, 225, 225);\n  background-color: var(--color-border);\n  -webkit-transform: translateX(-50%);\n          transform: translateX(-50%);\n  transition: height var(--sticky-header-transition-properties)\n      100ms,\n    width var(--sticky-header-transition-properties);\n  transition: height var(--sticky-header-transition-properties)\n      var(--timing-quick),\n    width var(--sticky-header-transition-properties);\n}\n\n.PGjWc5ocjpI-::before {\n  width: 100%;\n  height: calc(16px / 8);\n  height: var(--border-thick);\n  transition: height var(--sticky-header-transition-properties),\n    width var(--sticky-header-transition-properties) 100ms;\n  transition: height var(--sticky-header-transition-properties),\n    width var(--sticky-header-transition-properties) var(--timing-quick);\n}\n";
@@ -933,11 +976,13 @@ function DataList(_a) {
     const layoutComponents = getCompoundComponents(props.children, DataListLayout);
     const emptyStateComponents = getCompoundComponents(props.children, DataListEmptyState);
     const itemActionComponent = getCompoundComponent(props.children, DataListItemActions);
+    const bulkActionsComponent = getCompoundComponent(props.children, DataListBulkActions);
     return (React__default["default"].createElement(DataListContext.Provider, { value: Object.assign(Object.assign({ searchComponent,
             filterComponent,
             layoutComponents,
             emptyStateComponents,
-            itemActionComponent }, props), { selected: (_b = props.selected) !== null && _b !== void 0 ? _b : [], 
+            itemActionComponent,
+            bulkActionsComponent }, props), { selected: (_b = props.selected) !== null && _b !== void 0 ? _b : [], 
             // T !== DataListObject
             sorting: sorting }) },
         React__default["default"].createElement(InternalDataList, null)));
@@ -1006,10 +1051,21 @@ DataList.Search = DataListSearch;
  * Defines the group actions you could do on a single DataList item.
  */
 DataList.ItemActions = DataListItemActions;
+/**
+ * Defines the group actions you could do on multiple DataList items.
+ */
+DataList.BulkActions = DataListBulkActions;
 /**
  * Defines the action in a DataList. This should be used inside the
  * DataListItemActions component.
  */
-DataList.Action = DataListAction;
+DataList.ItemAction = DataListAction;
+/**
+ * Defines the batch action in a DataList. This should be used inside the
+ * DataListBulkActions component.
+ */
+DataList.BatchAction = function DataListBatchAction(props) {
+    return React__default["default"].createElement(DataListAction, Object.assign({}, props));
+};
 
 exports.DataList = DataList;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "4.43.1",
+  "version": "4.44.0",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -84,5 +84,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "9db197ad3e0e72af56eb5afb88b2f9c21ba8ee27"
+  "gitHead": "eeff010b874becc9cbf7ee1a7dc4cef2845251f7"
 }