@jobber/components 4.45.1 → 4.45.3

package/dist/DataList/DataList.d.ts

@@ -8,7 +8,7 @@ import { DataListAction } from "./components/DataListAction";
 import { DataListLayoutActions } from "./components/DataListLayoutActions";
 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 function DataList<T extends DataListObject>({ selected, sorting, ...props }: DataListProps<T>): JSX.Element;
 export declare namespace DataList {
     var Layout: typeof DataListLayout;
     var LayoutActions: typeof DataListLayoutActions;

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

@@ -102,8 +102,9 @@ export interface DataListProps<T extends DataListObject> {
     readonly selected?: T["id"][];
     readonly onSelectAll?: () => void;
 }
+export type LayoutRenderer<T extends DataListObject> = (item: DataListItemType<T[]>) => JSX.Element;
 export interface DataListLayoutProps<T extends DataListObject> {
-    readonly children: (item: DataListItemType<T[]>) => JSX.Element;
+    readonly children: LayoutRenderer<T>;
     /**
      * The breakpoint at which the layout should be displayed. It will be rendered until a layout with a larger breakpoint is found.
      * @default "xs"
@@ -149,6 +150,12 @@ export interface DataListContextProps<T extends DataListObject> extends DataList
     readonly layoutComponents?: ReactElement<DataListLayoutProps<T>>[];
     readonly itemActionComponent?: ReactElement<DataListItemActionsProps<T>>;
     readonly bulkActionsComponent?: ReactElement<DataListItemActionsProps<T>>;
+    readonly layoutBreakpoints: Breakpoints[];
+    readonly registerLayoutBreakpoints: (breakpoint: Breakpoints) => void;
+    readonly layouts: {
+        readonly [Breakpoint in Breakpoints]?: LayoutRenderer<T>;
+    };
+    readonly registerLayout: (size: Breakpoints, layout: LayoutRenderer<T>) => void;
 }
 export interface DataListLayoutContextProps {
     readonly isInLayoutProvider: boolean;
@@ -215,6 +222,18 @@ export interface DataListActionProps<T extends DataListObject> {
      */
     readonly onClick?: (data: T) => void;
 }
+export interface DataListActionsProps<T extends DataListObject> {
+    /**
+     * The actions to render for each item in the DataList. This only accepts the
+     * DataList.Action component.
+     */
+    readonly children?: Fragment<ReactElement<DataListActionProps<T>>>;
+    /**
+     * The number of items to expose before the "More" button is shown.
+     * @default 2
+     */
+    readonly itemsToExpose?: number;
+}
 export interface DataListBulkActionProps extends DataListActionProps<DataListObject> {
     /**
      * The callback function when the action is clicked.

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

@@ -17,5 +17,5 @@ export declare function generateListItemElement<T extends DataListObject>(item:
  * Generate the header elements with the default styling
  */
 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 sortBreakpoints(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/DataListActions/DataListActions.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { DataListActionsProps, DataListObject } from "../../DataList.types";
+export declare function DataListActions<T extends DataListObject>({ children, itemsToExpose, }: DataListActionsProps<T>): JSX.Element;

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

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

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function DataListHeader(): JSX.Element | null;

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

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

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

@@ -1,9 +1,9 @@
-import { ReactElement } from "react";
+/// <reference types="react" />
 import { DataListLayoutProps, DataListObject } from "@jobber/components/DataList/DataList.types";
 interface DataListItem<T extends DataListObject> {
     readonly item: T;
     readonly index: number;
-    readonly layout: ReactElement<DataListLayoutProps<T>>;
+    readonly layout: DataListLayoutProps<T>["children"];
 }
 export declare function DataListItem<T extends DataListObject>({ item, layout, }: DataListItem<T>): JSX.Element;
 export {};

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

@@ -1,8 +1,4 @@
 /// <reference types="react" />
 import { DataListItemActionsProps, DataListObject } from "../../DataList.types";
 export declare function DataListItemActions<T extends DataListObject>(_: DataListItemActionsProps<T>): null;
-interface InternalDataListItemActionsProps<T extends DataListObject> {
-    readonly item: T;
-}
-export declare function InternalDataListItemActions<T extends DataListObject>({ item, }: InternalDataListItemActionsProps<T>): JSX.Element | null;
-export {};
+export declare function InternalDataListItemActions(): JSX.Element | null;

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

@@ -1,2 +1 @@
 export * from "./DataListItemActions";
-export * from "./DataListItemActionsOverflow";

package/dist/DataList/components/{DataListItemActions → DataListItemActionsOverflow}/DataListItemActionsOverflow.d.ts

@@ -3,5 +3,5 @@ import { DataListActionProps, DataListObject } from "../../DataList.types";
 interface DataListItemActionsOverflowProps<T extends DataListObject> {
     readonly actions: ReactElement<DataListActionProps<T>>[];
 }
-export declare function DataListItemActionsOverflow<T extends DataListObject>({ actions, }: DataListItemActionsOverflowProps<T>): JSX.Element;
+export declare function DataListItemActionsOverflow<T extends DataListObject>({ actions, }: DataListItemActionsOverflowProps<T>): JSX.Element | null;
 export {};

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

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

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { Breakpoints, DataListObject } from "@jobber/components/DataList/DataList.types";
+interface DataListItemsProps {
+    readonly size?: Breakpoints;
+}
+export declare function DataListItems<T extends DataListObject>({ size, }: DataListItemsProps): JSX.Element | null;
+export {};

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

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

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

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-import { DataListLayoutProps, DataListObject } from "../../DataList.types";
-export declare function DataListLayout<T extends DataListObject>(_: DataListLayoutProps<T>): JSX.Element;
+import { DataListLayoutProps, DataListObject } from "@jobber/components/DataList/DataList.types";
+export declare function DataListLayout<T extends DataListObject>({ children, size, }: DataListLayoutProps<T>): JSX.Element | null;

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

@@ -1,11 +1,4 @@
-import React from "react";
-import { Breakpoints, DataListHeader, DataListLayoutProps, DataListObject } from "../../DataList.types";
-interface DataListLoadingStateProps<T extends DataListObject> {
-    readonly headers: DataListHeader<T>;
-    readonly layouts: React.ReactElement<DataListLayoutProps<T>>[] | undefined;
-    readonly mediaMatches?: Record<Breakpoints, boolean>;
-}
+/// <reference types="react" />
 export declare const LOADING_STATE_LIMIT_ITEMS = 10;
 export declare const DATALIST_LOADINGSTATE_ROW_TEST_ID = "ATL-DataList-LoadingState-Row";
-export declare function DataListLoadingState<T extends DataListObject>({ headers, layouts, mediaMatches, }: DataListLoadingStateProps<T>): JSX.Element;
-export {};
+export declare function DataListLoadingState(): JSX.Element | null;

package/dist/DataList/context/DataListContext/DataListContext.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
+import React from "react";
 import { DataListContextProps, DataListObject } from "../../DataList.types";
 export declare const defaultValues: DataListContextProps<DataListObject>;
-export declare const DataListContext: import("react").Context<DataListContextProps<DataListObject>>;
-export declare function useDataListContext(): DataListContextProps<DataListObject>;
+export declare const DataListContext: React.Context<DataListContextProps<DataListObject>>;
+export declare function useDataListContext<T extends DataListObject>(): DataListContextProps<T>;

package/dist/DataList/hooks/useActiveLayout.d.ts

@@ -0,0 +1,4 @@
+export declare function useActiveLayout(): {
+    layout: import("../DataList.types").LayoutRenderer<import("../DataList.types").DataListObject> | undefined;
+    activeBreakpoint: "xs" | "sm" | "md" | "lg" | "xl";
+};

package/dist/DataList/index.js

@@ -7,40 +7,39 @@ var React = require('react');
 var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
 var Text = require('../Text-59bde58c.js');
 var Glimmer = require('../Glimmer-cfa92a88.js');
-var framerMotion = require('framer-motion');
-var classnames = require('classnames');
 var noop = require('lodash/noop');
-var reactRouterDom = require('react-router-dom');
-var Button = require('../Button-d89f2271.js');
 var design = require('@jobber/design');
-var Typography = require('../Typography-9bff9c91.js');
-var ReactDOM = require('react-dom');
+var framerMotion = require('framer-motion');
+var classnames = require('classnames');
 var Tooltip = require('../Tooltip-59dbab5b.js');
-require('react-popper');
+var Button = require('../Button-d89f2271.js');
+var useInView = require('@jobber/hooks/useInView');
+var isEmpty = require('lodash/isEmpty');
+var InlineLabel = require('../InlineLabel-3d461632.js');
+var FormatDate = require('../FormatDate-70ea5b43.js');
+var Heading = require('../Heading-4562900a.js');
 var useFocusTrap = require('@jobber/hooks/useFocusTrap');
 var useRefocusOnActivator = require('@jobber/hooks/useRefocusOnActivator');
 var useOnKeyDown = require('@jobber/hooks/useOnKeyDown');
+var ReactDOM = require('react-dom');
 var foundation = require('@jobber/design/foundation');
-var isEmpty = require('lodash/isEmpty');
-var InlineLabel = require('../InlineLabel-3d461632.js');
-var styles$f = require('@jobber/components/DataList/DataList.css');
-require('uuid');
-require('react-hook-form');
 var Checkbox = require('../Checkbox-eac63b7f.js');
-var FormatDate = require('../FormatDate-70ea5b43.js');
-var Heading = require('../Heading-4562900a.js');
+var reactRouterDom = require('react-router-dom');
 var AnimatedSwitcher = require('../AnimatedSwitcher-d1e1ddcf.js');
-var useInView = require('@jobber/hooks/useInView');
 var Popover = require('../Popover-d401fb54.js');
 var Content = require('../Content-2ca1ffe1.js');
 var Chip = require('../Chip-4d8e6370.js');
 require('@jobber/hooks/useAssert');
 require('../Avatar-1aa30ee1.js');
 require('color');
+var Typography = require('../Typography-9bff9c91.js');
+require('react-popper');
 var debounce = require('lodash/debounce');
 var InputText = require('../InputText-5ac5cfe0.js');
 var Spinner = require('../Spinner-9d8fc7ff.js');
 var Icon = require('../Icon-405a216c.js');
+require('uuid');
+require('react-hook-form');
 require('../ButtonDismiss-250840a4.js');
 require('lodash/sortBy');
 require('@jobber/hooks/useLiveAnnounce');
@@ -50,14 +49,13 @@ require('../InputValidation-4e809bdd.js');
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 var noop__default = /*#__PURE__*/_interopDefaultLegacy(noop);
+var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 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  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-"};
+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.GiD7MjZJbcw- {\n  display: -ms-flexbox;\n  display: flex;\n}\n\n@media (max-width: 489.98px) {\n\n.GiD7MjZJbcw- {\n    -ms-flex-pack: justify;\n        justify-content: space-between;\n    width: 100%;\n}\n  }\n\n@media (--small-screens-and-below) {\n\n.GiD7MjZJbcw- {\n    -ms-flex-pack: justify;\n        justify-content: space-between;\n    width: 100%;\n}\n  }\n\n.jMSVGIAr5tk- > p {\n  font-weight: 500;\n  white-space: nowrap;\n}\n\n.jMSVGIAr5tk- {\n  display: -ms-flexbox;\n  display: flex;\n  margin: calc((16px / 2) * -1) 0;\n  margin: calc(calc(16px / 2) * -1) 0;\n  margin: calc(var(--space-small) * -1) 0;\n  -ms-flex-align: center;\n      align-items: center;\n  gap: 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/* This hides the text from the UI but not from the screen readers */\n\n.esUiRgWabYw- {\n  position: absolute;\n  top: auto;\n  left: -10000px;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  text-indent: -10000px;\n}\n";
+var styles$e = {"wrapper":"TkdrExYnvcY-","titleContainer":"IcAlZHoB4LI-","headerFilters":"TFO76ysivmg-","headerTitles":"jGHZZYZm1ZY-","batchSelectContainer":"GiD7MjZJbcw-","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";
@@ -81,40 +79,42 @@ function DataListTotalCount({ totalCount, loading, }) {
     return (React__default["default"].createElement("div", { className: styles$d.results, "data-testid": DATALIST_TOTALCOUNT_TEST_ID }, output));
 }
 
-var css_248z$c = ".Rh--6fVpkm4- {\n  padding: calc(16px / 2);\n  padding: var(--space-small);\n}\n\n.zbS7UvpVoWI- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n      flex-direction: column;\n  -ms-flex-pack: justify;\n      justify-content: space-between;\n  height: calc(16px * 3);\n  height: var(--space-largest);\n  padding: calc(16px * 1) 0;\n  padding: var(--space-base) 0;\n}\n";
-var styles$c = {"loadingItem":"Rh--6fVpkm4-","mobileLoadingState":"zbS7UvpVoWI-"};
-styleInject_es.styleInject(css_248z$c);
-
 const defaultValues$1 = {
     title: "",
     data: [],
     headers: {},
     children: [],
     selected: [],
+    layoutBreakpoints: [],
+    registerLayoutBreakpoints: noop__default["default"],
+    layouts: {
+        xs: children => React__default["default"].createElement(React__default["default"].Fragment, null, children),
+        sm: children => React__default["default"].createElement(React__default["default"].Fragment, null, children),
+        md: children => React__default["default"].createElement(React__default["default"].Fragment, null, children),
+        lg: children => React__default["default"].createElement(React__default["default"].Fragment, null, children),
+        xl: children => React__default["default"].createElement(React__default["default"].Fragment, null, children),
+    },
+    registerLayout: noop__default["default"],
 };
 const DataListContext = React.createContext(defaultValues$1);
 function useDataListContext() {
     return React.useContext(DataListContext);
 }
 
-const defaultValues = {
-    isInLayoutProvider: false,
-    hasInLayoutActions: false,
-    setHasInLayoutActions: noop__default["default"],
-};
-const DataListLayoutContext = React.createContext(defaultValues);
-function useDataListLayoutContext() {
-    return React.useContext(DataListLayoutContext);
+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;
 }
 
-var css_248z$b = ".jHcHGQ-HDbk- {\n  display: -ms-flexbox;\n  display: flex;\n  position: absolute;\n  top: calc((16px / 2) * -1);\n  top: calc(calc(16px / 2) * -1);\n  top: calc(var(--space-small) * -1);\n  right: 0;\n  z-index: 6;\n  z-index: var(--elevation-menu);\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  gap: calc(16px / 4);\n  gap: var(--space-smaller);\n}\n";
-var styles$b = {"menu":"jHcHGQ-HDbk-"};
-styleInject_es.styleInject(css_248z$b);
-
-var css_248z$a = ".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";
-var styles$a = {"menu":"aokwZU8jbWU-","overlay":"XtVRP97TVSE-"};
-styleInject_es.styleInject(css_248z$a);
-
 const EMPTY_RESULTS_MESSAGE = "List is looking empty";
 const EMPTY_FILTER_RESULTS_MESSAGE = "No results for selected filters";
 const EMPTY_STATE_ACTION_BUTTON_ONLY_ERROR = "DataListEmptyState action prop must be a Button component";
@@ -136,56 +136,74 @@ const DATA_LOAD_MORE_TEST_ID = "ATL-DataList-LoadMore-trigger";
 const TRANSITION_DURATION_IN_SECONDS = design.tokens["timing-base"] / 1000;
 const TRANSITION_DELAY_IN_SECONDS = design.tokens["timing-quick"] / 1000;
 
-const variants$1 = {
-    hidden: { opacity: 0, y: -10 },
-    visible: { opacity: 1, y: 0 },
+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 useActiveLayout() {
+    const { layoutBreakpoints, layouts } = useDataListContext();
+    const breakpoints = useResponsiveSizing();
+    const reversedLayoutBreakpoints = [...layoutBreakpoints].reverse();
+    const activeBreakpoint = reversedLayoutBreakpoints.find(key => breakpoints[key]) ||
+        layoutBreakpoints[0];
+    const layout = layouts[activeBreakpoint];
+    return { layout, activeBreakpoint };
+}
+
+var css_248z$c = "._8cMzUF8XEwY- {\n  position: relative;\n}\n\n._8cMzUF8XEwY-::after {\n  content: \"\";\n  display: block;\n  position: absolute;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  height: 100px;\n  background-image: linear-gradient(\n    to top,\n    rgba(255, 255, 255, 1) 0%,\n    rgba(255, 255, 255, 0) 100%\n  );\n  background-image: linear-gradient(\n    to top,\n    var(--color-surface) 0%,\n    rgba(var(--color-white--rgb), 0) 100%\n  );\n}\n\n.Rh--6fVpkm4- {\n  padding: calc(16px / 2);\n  padding: var(--space-small);\n}\n\n.NFaWWvmxtkw- {\n  width: 100%;\n  min-width: calc(16px * 3);\n  min-width: var(--space-largest);\n}\n";
+var styles$c = {"wrapper":"_8cMzUF8XEwY-","loadingItem":"Rh--6fVpkm4-","glimmer":"NFaWWvmxtkw-"};
+styleInject_es.styleInject(css_248z$c);
+
+const LOADING_STATE_LIMIT_ITEMS = 10;
+const DATALIST_LOADINGSTATE_ROW_TEST_ID = "ATL-DataList-LoadingState-Row";
+function DataListLoadingState() {
+    const { headers } = useDataListContext();
+    const { layout, activeBreakpoint } = useActiveLayout();
+    if (!layout)
+        return null;
+    const glimmerSize = activeBreakpoint === "xs" ? "small" : "base";
+    const glimmersFromHeader = Object.keys(headers).reduce((data, key) => (Object.assign(Object.assign({}, data), { [key]: (React__default["default"].createElement("div", { className: styles$c.glimmer },
+            React__default["default"].createElement(Glimmer.Glimmer, { size: glimmerSize }))) })), {});
+    const loadingData = new Array(LOADING_STATE_LIMIT_ITEMS).fill(glimmersFromHeader);
+    return (React__default["default"].createElement("div", { className: styles$c.wrapper }, loadingData.map((child, i) => (React__default["default"].createElement("div", { key: i, className: styles$c.loadingItem, "data-testid": DATALIST_LOADINGSTATE_ROW_TEST_ID }, layout(child))))));
+}
+
+const defaultValues = {
+    isInLayoutProvider: false,
+    hasInLayoutActions: false,
+    setHasInLayoutActions: noop__default["default"],
 };
-function DataListActionsMenu({ visible = false, position, onRequestClose, children, }) {
-    const [ref, setRef] = React.useState();
-    useRefocusOnActivator.useRefocusOnActivator(visible);
-    const focusTrapRef = useFocusTrap.useFocusTrap(visible);
-    useOnKeyDown.useOnKeyDown(onRequestClose, "Escape");
-    return ReactDOM.createPortal(React__default["default"].createElement(framerMotion.AnimatePresence, null, visible && (React__default["default"].createElement("div", { ref: focusTrapRef },
-        React__default["default"].createElement(framerMotion.motion.div, { role: "menu", ref: setRef, variants: variants$1, initial: "hidden", animate: "visible", exit: "hidden", transition: { duration: TRANSITION_DELAY_IN_SECONDS }, className: styles$a.menu, style: getPositionCssVars(), onClick: onRequestClose }, children),
-        React__default["default"].createElement("button", { className: styles$a.overlay, onClick: onRequestClose, "aria-label": "Close menu" })))), document.body);
-    function getPositionCssVars() {
-        const { posX, posY } = getPosition();
-        return {
-            "--actions-menu-x": `${posX}px`,
-            "--actions-menu-y": `${posY}px`,
-        };
-    }
-    function getPosition() {
-        const rect = ref === null || ref === void 0 ? void 0 : ref.getBoundingClientRect();
-        const { width = 0, height = 0 } = rect || {};
-        const { x, y } = position;
-        const xIsOffScreen = x + width > window.innerWidth;
-        const yIsOffScreen = y + height > window.innerHeight;
-        const xOffSet = x + width - window.innerWidth + foundation.tokens["space-base"];
-        const yOffSet = y + height - window.innerHeight;
-        const newPosX = Math.floor(xIsOffScreen ? x - xOffSet : x);
-        const newPosY = Math.floor(yIsOffScreen ? y - yOffSet : y);
-        return { posX: newPosX, posY: newPosY };
-    }
+const DataListLayoutContext = React.createContext(defaultValues);
+function useDataListLayoutContext() {
+    return React.useContext(DataListLayoutContext);
 }
 
-function DataListItemActionsOverflow({ actions, }) {
-    const [menuPosition, setMenuPosition] = React.useState({ x: 0, y: 0 });
-    const [showMenu, setShowMenu] = React.useState(false);
-    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 })),
-        actions && (React__default["default"].createElement(DataListActionsMenu, { visible: showMenu, position: menuPosition, onRequestClose: handleClose }, actions))));
-    function handleMoreClick(event) {
-        setShowMenu(true);
-        const rect = event.currentTarget.getBoundingClientRect();
-        const posX = rect.x;
-        const posY = rect.y + rect.height;
-        setMenuPosition({ x: posX, y: posY });
-    }
-    function handleClose() {
-        setShowMenu(false);
-    }
+var css_248z$b = ".jHcHGQ-HDbk- {\n  display: -ms-flexbox;\n  display: flex;\n  position: absolute;\n  top: calc((16px / 2) * -1);\n  top: calc(calc(16px / 2) * -1);\n  top: calc(var(--space-small) * -1);\n  right: 0;\n  z-index: 6;\n  z-index: var(--elevation-menu);\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  gap: calc(16px / 4);\n  gap: var(--space-smaller);\n}\n";
+var styles$b = {"menu":"jHcHGQ-HDbk-"};
+styleInject_es.styleInject(css_248z$b);
+
+const CONTAINER_TEST_ID = "ATL-DataListFilters-Container";
+
+var css_248z$a = ".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$a = {"fadeContainer":"jbBRoxlZlNI-","overflowGrid":"MnN8qbS4hw4-","overflowTrigger":"b-5P7Z8eGO8-","overflowLeft":"xzaCS4slLpI-","overflowRight":"Jf227kC8Nu0-"};
+styleInject_es.styleInject(css_248z$a);
+
+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$a.fadeContainer, {
+            [styles$a.overflowLeft]: !isLeftVisible,
+            [styles$a.overflowRight]: !isRightVisible,
+        }) },
+        React__default["default"].createElement("div", { className: styles$a.overflowGrid },
+            React__default["default"].createElement("span", { ref: leftRef, className: styles$a.overflowTrigger }),
+            children,
+            React__default["default"].createElement("span", { ref: rightRef, className: styles$a.overflowTrigger }))));
 }
 
 var css_248z$9 = ".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";
@@ -340,7 +358,7 @@ function generateHeaderElements(headers) {
     const headerElements = Object.keys(headers).reduce((acc, key) => (Object.assign(Object.assign({}, acc), { [key]: React__default["default"].createElement(DataListHeaderTile, { headers: headers, headerKey: key }) })), {});
     return isEmpty__default["default"](headerElements) ? undefined : headerElements;
 }
-function sortSizeProp(sizeProp) {
+function sortBreakpoints(sizeProp) {
     return sizeProp.sort((a, b) => BREAKPOINTS.indexOf(a) - BREAKPOINTS.indexOf(b));
 }
 function getExposedActions(childrenArray, childCount = 2) {
@@ -358,6 +376,92 @@ function getExposedActions(childrenArray, childCount = 2) {
     }, []);
 }
 
+const DataListLayoutActionsContext = React.createContext({ activeItem: undefined });
+function useDataListLayoutActionsContext() {
+    return React.useContext(DataListLayoutActionsContext);
+}
+
+var css_248z$6 = ".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";
+var styles$6 = {"menu":"aokwZU8jbWU-","overlay":"XtVRP97TVSE-"};
+styleInject_es.styleInject(css_248z$6);
+
+const variants$1 = {
+    hidden: { opacity: 0, y: -10 },
+    visible: { opacity: 1, y: 0 },
+};
+function DataListActionsMenu({ visible = false, position, onRequestClose, children, }) {
+    const [ref, setRef] = React.useState();
+    useRefocusOnActivator.useRefocusOnActivator(visible);
+    const focusTrapRef = useFocusTrap.useFocusTrap(visible);
+    useOnKeyDown.useOnKeyDown(onRequestClose, "Escape");
+    return ReactDOM.createPortal(React__default["default"].createElement(framerMotion.AnimatePresence, null, visible && (React__default["default"].createElement("div", { ref: focusTrapRef },
+        React__default["default"].createElement(framerMotion.motion.div, { role: "menu", ref: setRef, variants: variants$1, initial: "hidden", animate: "visible", exit: "hidden", transition: { duration: TRANSITION_DELAY_IN_SECONDS }, className: styles$6.menu, style: getPositionCssVars(), onClick: onRequestClose }, children),
+        React__default["default"].createElement("button", { className: styles$6.overlay, onClick: onRequestClose, "aria-label": "Close menu" })))), document.body);
+    function getPositionCssVars() {
+        const { posX, posY } = getPosition();
+        return {
+            "--actions-menu-x": `${posX}px`,
+            "--actions-menu-y": `${posY}px`,
+        };
+    }
+    function getPosition() {
+        const rect = ref === null || ref === void 0 ? void 0 : ref.getBoundingClientRect();
+        const { width = 0, height = 0 } = rect || {};
+        const { x, y } = position;
+        const xIsOffScreen = x + width > window.innerWidth;
+        const yIsOffScreen = y + height > window.innerHeight;
+        const xOffSet = x + width - window.innerWidth + foundation.tokens["space-base"];
+        const yOffSet = y + height - window.innerHeight;
+        const newPosX = Math.floor(xIsOffScreen ? x - xOffSet : x);
+        const newPosY = Math.floor(yIsOffScreen ? y - yOffSet : y);
+        return { posX: newPosX, posY: newPosY };
+    }
+}
+
+function DataListItemActionsOverflow({ actions, }) {
+    const [menuPosition, setMenuPosition] = React.useState({ x: 0, y: 0 });
+    const [showMenu, setShowMenu] = React.useState(false);
+    if (actions.length === 0)
+        return null;
+    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 })),
+        React__default["default"].createElement(DataListActionsMenu, { visible: showMenu, position: menuPosition, onRequestClose: handleClose }, actions)));
+    function handleMoreClick(event) {
+        setShowMenu(true);
+        const rect = event.currentTarget.getBoundingClientRect();
+        const posX = rect.x;
+        const posY = rect.y + rect.height;
+        setMenuPosition({ x: posX, y: posY });
+    }
+    function handleClose() {
+        setShowMenu(false);
+    }
+}
+
+function DataListActions({ children, itemsToExpose = 2, }) {
+    const { activeItem } = useDataListLayoutActionsContext();
+    const childrenArray = React.Children.toArray(children).filter(React.isValidElement);
+    const exposedActions = getExposedActions(childrenArray, itemsToExpose);
+    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, _b;
+                        if (activeItem) {
+                            (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, activeItem);
+                        }
+                        else {
+                            (_b = props.onClick) === null || _b === void 0 ? void 0 : _b.call(props);
+                        }
+                    }, type: "secondary", variation: "subtle" })));
+        }),
+        React__default["default"].createElement(DataListItemActionsOverflow, { actions: childrenArray })));
+}
+
 // This component is meant to capture the props of the DataList.ItemActions
 function DataListItemActions(
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -368,40 +472,26 @@ const variants = {
     hidden: { opacity: 0, y: 10 },
     visible: { opacity: 1, y: 0 },
 };
-function InternalDataListItemActions({ item, }) {
+function InternalDataListItemActions() {
     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" })));
-        }),
-        Boolean(childrenArray.length) && (React__default["default"].createElement(DataListItemActionsOverflow, { actions: childrenArray }))));
+        React__default["default"].createElement(DataListActions, null, children)));
 }
 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,
+        return (React__default["default"].createElement("div", { className: classnames__default["default"](styles$e.selectable, {
+                [styles$e.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 })));
@@ -423,14 +513,14 @@ function DataListItemClickableInternal({ onClick, url, to, children, }) {
         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));
+        return (React__default["default"].createElement(reactRouterDom.Link, { className: styles$e.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));
+        return (React__default["default"].createElement("a", { className: styles$e.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("button", { className: styles$e.listItemClickable, onClick: handleClick }, children));
     }
     return React__default["default"].createElement(React__default["default"].Fragment, null, children);
     function handleClick() {
@@ -457,13 +547,13 @@ function DataListItem({ item, layout, }) {
     const isContextMenuVisible = Boolean(contextPosition);
     const shouldShowContextMenu = showMenu && isContextMenuVisible && Boolean(contextMenuActions);
     return (React__default["default"].createElement(DataListLayoutActionsContext.Provider, { value: { activeItem: item } },
-        React__default["default"].createElement("div", { onMouseEnter: handleShowMenu, onMouseLeave: handleHideMenu, onFocus: handleShowMenu, onBlur: handleHideMenu, onContextMenu: handleContextMenu, className: classnames__default["default"](styles__default["default"].listItem, {
-                [styles__default["default"].active]: showMenu && isContextMenuVisible,
+        React__default["default"].createElement("div", { onMouseEnter: handleShowMenu, onMouseLeave: handleHideMenu, onFocus: handleShowMenu, onBlur: handleHideMenu, onContextMenu: handleContextMenu, className: classnames__default["default"](styles$e.listItem, {
+                [styles$e.active]: showMenu && isContextMenuVisible,
             }), key: item.id },
             React__default["default"].createElement(DataListItemInternal, { item: item },
-                React__default["default"].createElement(DataListItemClickable, null, layout.props.children(generatedItem))),
+                React__default["default"].createElement(DataListItemClickable, null, layout(generatedItem))),
             React__default["default"].createElement(framerMotion.AnimatePresence, null,
-                showMenu && !hasInLayoutActions && (React__default["default"].createElement(InternalDataListItemActions, { item: item })),
+                showMenu && !hasInLayoutActions && React__default["default"].createElement(InternalDataListItemActions, null),
                 React__default["default"].createElement(DataListActionsMenu, { key: item.id, visible: shouldShowContextMenu, position: contextPosition || { x: 0, y: 0 }, onRequestClose: () => setContextPosition(undefined) }, contextMenuActions)))));
     function handleShowMenu() {
         setShowMenu(true);
@@ -482,65 +572,35 @@ function DataListItem({ item, layout, }) {
     }
 }
 
-function DataListLayoutInternal({ layouts, renderLayout, mediaMatches, }) {
-    const sizePropsOfLayouts = layouts === null || layouts === void 0 ? void 0 : layouts.map(layout => layout.props.size || "xs");
-    const layoutToRender = layouts === null || layouts === void 0 ? void 0 : layouts.find(layout => {
-        const layoutSize = layout.props.size || "xs";
-        const isVisible = isLayoutVisible({
-            layoutSize,
-            mediaMatches,
-            sizePropsOfLayouts,
-        });
-        return isVisible;
-    });
-    return (layoutToRender && renderLayout(layoutToRender)) || React__default["default"].createElement(React__default["default"].Fragment, null);
-}
-/**
- * Determine is layout is visible by checking a media query matches for the
- * visible sizes of the layout and there isn't a larger layout that should be rendered
- */
-function isLayoutVisible({ layoutSize, mediaMatches, sizePropsOfLayouts, }) {
-    const largerBreakpointsToHide = sizePropsOfLayouts === null || sizePropsOfLayouts === void 0 ? void 0 : sizePropsOfLayouts.filter(size => BREAKPOINTS.indexOf(size) > BREAKPOINTS.indexOf(layoutSize));
-    const sortedLargerBreakpoints = sortSizeProp(largerBreakpointsToHide || []);
-    const visibleBreakpoints = BREAKPOINTS.slice(BREAKPOINTS.indexOf(layoutSize), sortedLargerBreakpoints[0]
-        ? BREAKPOINTS.indexOf(sortedLargerBreakpoints[0])
-        : undefined);
-    const isVisibleBreakpoint = visibleBreakpoints.some(breakpoint => {
-        return Boolean(mediaMatches === null || mediaMatches === void 0 ? void 0 : mediaMatches[breakpoint]);
-    });
-    const largerLayoutIsNotVisible = largerBreakpointsToHide === null || largerBreakpointsToHide === void 0 ? void 0 : largerBreakpointsToHide.reduce((acc, breakpoint) => {
-        return acc && !(mediaMatches === null || mediaMatches === void 0 ? void 0 : mediaMatches[breakpoint]);
-    }, true);
-    return isVisibleBreakpoint && largerLayoutIsNotVisible;
-}
-
-function DataListItems({ layouts, mediaMatches, data, }) {
+function DataListItems({ size = "xs", }) {
+    const { data, layouts } = useDataListContext();
     const [hasInLayoutActions, setHasInLayoutActions] = React.useState(false);
+    const layout = layouts[size];
+    if (!layout)
+        return null;
     return (React__default["default"].createElement(DataListLayoutContext.Provider, { value: {
             isInLayoutProvider: true,
             hasInLayoutActions,
             setHasInLayoutActions,
-        } },
-        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 }))))) })));
+        } }, 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$6 = ".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$6 = {"fadeContainer":"jbBRoxlZlNI-","overflowGrid":"MnN8qbS4hw4-","overflowTrigger":"b-5P7Z8eGO8-","overflowLeft":"xzaCS4slLpI-","overflowRight":"Jf227kC8Nu0-"};
-styleInject_es.styleInject(css_248z$6);
-
-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$6.fadeContainer, {
-            [styles$6.overflowLeft]: !isLeftVisible,
-            [styles$6.overflowRight]: !isRightVisible,
-        }) },
-        React__default["default"].createElement("div", { className: styles$6.overflowGrid },
-            React__default["default"].createElement("span", { ref: leftRef, className: styles$6.overflowTrigger }),
-            children,
-            React__default["default"].createElement("span", { ref: rightRef, className: styles$6.overflowTrigger }))));
+function DataListLayout({ children, size = "xs", }) {
+    const { layoutBreakpoints, registerLayout, registerLayoutBreakpoints, loadingState, } = useDataListContext();
+    const breakpoints = useResponsiveSizing();
+    React.useEffect(() => {
+        registerLayoutBreakpoints(size);
+    }, [size]);
+    React.useEffect(() => {
+        registerLayout(size, children);
+    }, [size, children]);
+    const sizeIndex = layoutBreakpoints.indexOf(size);
+    const nextAvailableSize = layoutBreakpoints[sizeIndex + 1];
+    const shouldRenderList = breakpoints[size] && !breakpoints[nextAvailableSize];
+    if (loadingState !== "initial" && shouldRenderList) {
+        return React__default["default"].createElement(DataListItems, { size: size });
+    }
+    return null;
 }
 
 // This component is meant to capture the props of the DataList.BulkActions
@@ -554,40 +614,10 @@ function InternalDataListBulkActions() {
     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 };
+    const { sm } = useResponsiveSizing();
+    // Collapse all actions under "More actions" when breakpoint is smaller than sm
+    const itemsToExpose = sm ? 3 : 0;
+    return (React__default["default"].createElement(DataListActions, { itemsToExpose: itemsToExpose }, children));
 }
 
 function DataListHeaderCheckbox({ children }) {
@@ -604,12 +634,12 @@ function DataListHeaderCheckbox({ children }) {
             }) },
             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,
+        React__default["default"].createElement(AnimatedSwitcher.AnimatedSwitcher, { switched: Boolean(selected.length), initialChild: children, switchTo: React__default["default"].createElement("div", { className: styles$e.batchSelectContainer },
+                React__default["default"].createElement("div", { className: styles$e.headerBatchSelect },
+                    React__default["default"].createElement(Text.Text, null,
                         selected.length,
-                        " selected")),
-                React__default["default"].createElement(Button.Button, { label: deselectText, onClick: () => onSelect === null || onSelect === void 0 ? void 0 : onSelect([]), type: "tertiary" }),
+                        " selected"),
+                    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
@@ -625,57 +655,26 @@ function DataListHeaderCheckbox({ children }) {
     }
 }
 
-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;
-}
-
-function DataListHeader({ layouts, mediaMatches, headerData, }) {
-    const showHeader = useShowHeader();
-    const { selected } = useDataListContext();
+function DataListHeader() {
+    const breakpoints = useResponsiveSizing();
+    const { headerVisibility = { xs: true, sm: true, md: true, lg: true, xl: true }, headers, selected, layoutBreakpoints, } = useDataListContext();
+    const size = getVisibleSize();
+    const { layout } = useActiveLayout();
+    const visible = headerVisibility[size];
     const noItemsSelected = (selected === null || selected === void 0 ? void 0 : selected.length) === 0;
-    if ((!showHeader && noItemsSelected) || !headerData)
+    if ((!visible && noItemsSelected) || !layout)
         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)))) }));
-}
-
-const LOADING_STATE_LIMIT_ITEMS = 10;
-const DATALIST_LOADINGSTATE_ROW_TEST_ID = "ATL-DataList-LoadingState-Row";
-function DataListLoadingState({ headers, layouts, mediaMatches, }) {
-    const loadingData = new Array(LOADING_STATE_LIMIT_ITEMS).fill(headers);
-    const loadingElements = loadingData.map(item => Object.keys(item).reduce((acc, key) => {
-        acc[key] = React__default["default"].createElement(Glimmer.Glimmer, null);
-        return acc;
-    }, {}));
-    return (React__default["default"].createElement(DataListLayoutInternal, { layouts: layouts, mediaMatches: mediaMatches, renderLayout: layout => {
-            if (layout.props.size === "xs") {
-                return React__default["default"].createElement(LoadingStateXSBreakpoint, null);
-            }
-            return (React__default["default"].createElement(React__default["default"].Fragment, null, loadingElements.map((child, i) => (React__default["default"].createElement("div", { className: styles$c.loadingItem, key: i, "data-testid": DATALIST_LOADINGSTATE_ROW_TEST_ID }, layout.props.children(child))))));
-        } }));
-}
-function LoadingStateXSBreakpoint() {
-    const loadingData = new Array(LOADING_STATE_LIMIT_ITEMS).fill(0);
-    return (React__default["default"].createElement(React__default["default"].Fragment, null, loadingData.map((_, i) => {
-        return (React__default["default"].createElement("div", { className: styles$c.mobileLoadingState, key: i },
-            React__default["default"].createElement(Glimmer.Glimmer.Text, null)));
-    })));
-}
-
-function DataListLayout(
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-_) {
-    return React__default["default"].createElement(React__default["default"].Fragment, null);
+    const headerData = generateHeaderElements(headers);
+    if (!headerData)
+        return null;
+    return (React__default["default"].createElement("div", { className: styles$e.headerTitles },
+        React__default["default"].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];
+    }
 }
 
 function DataListSort() {
@@ -731,6 +730,20 @@ function DataListSort() {
     }
 }
 
+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(_) {
@@ -914,7 +927,7 @@ var styles = {"hidden":"_0m75bgCVBhk-"};
 styleInject_es.styleInject(css_248z);
 
 function DataListLayoutActions() {
-    const { itemActionComponent } = useDataListContext();
+    const { itemActionComponent, loadingState } = useDataListContext();
     const { setHasInLayoutActions } = useDataListLayoutContext();
     const { children: actionsChildren } = (itemActionComponent === null || itemActionComponent === void 0 ? void 0 : itemActionComponent.props) || {};
     const actions = React.Children.toArray(actionsChildren);
@@ -925,6 +938,9 @@ function DataListLayoutActions() {
             setHasInLayoutActions(false);
         };
     }, []);
+    if (loadingState === "initial") {
+        return React__default["default"].createElement(Glimmer.Glimmer, { shape: "square", size: "large" });
+    }
     if (!hasActions)
         return null;
     return (React__default["default"].createElement(DataListLayoutActionsWrapper, null,
@@ -937,34 +953,10 @@ function DataListLayoutActionsWrapper({ children }) {
     return React__default["default"].createElement("div", { className: styles.hidden }, children);
 }
 
-function useLayoutMediaQueries() {
-    const mediaQueries = BREAKPOINTS.reduce((previous, breakpoint) => (Object.assign(Object.assign({}, previous), { [breakpoint]: window.matchMedia(breakpointToMediaQuery(breakpoint)) })), {});
-    const initialMatches = BREAKPOINTS.reduce((previous, breakpoint) => (Object.assign(Object.assign({}, previous), { [breakpoint]: mediaQueries[breakpoint].matches })), {});
-    const [matches, setMatches] = React.useState(initialMatches);
-    const handlers = BREAKPOINTS.reduce((previous, breakpoint) => {
-        const handler = (e) => setMatches(previousMatches => (Object.assign(Object.assign({}, previousMatches), { [breakpoint]: e.matches })));
-        return Object.assign(Object.assign({}, previous), { [breakpoint]: handler });
-    }, {});
-    // Set up mediaQuery event handlers
-    React.useEffect(() => {
-        BREAKPOINTS.forEach(breakpoint => {
-            mediaQueries[breakpoint].addEventListener("change", handlers[breakpoint]);
-        });
-        return () => {
-            BREAKPOINTS.forEach(breakpoint => {
-                mediaQueries[breakpoint].removeEventListener("change", handlers[breakpoint]);
-            });
-        };
-    }, [mediaQueries]);
-    return matches;
-}
-function breakpointToMediaQuery(breakpoint) {
-    return `(min-width: ${BREAKPOINT_SIZES[breakpoint]}px)`;
-}
-
 function DataList(_a) {
-    var _b;
-    var { sorting } = _a, props = tslib_es6.__rest(_a, ["sorting"]);
+    var { selected = [], sorting } = _a, props = tslib_es6.__rest(_a, ["selected", "sorting"]);
+    const [layoutBreakpoints, setLayoutBreakpoints] = React.useState([]);
+    const [layouts, setLayouts] = React.useState({});
     const searchComponent = getCompoundComponent(props.children, DataListSearch);
     const filterComponent = getCompoundComponent(props.children, DataListFilters);
     const layoutComponents = getCompoundComponents(props.children, DataListLayout);
@@ -976,16 +968,24 @@ function DataList(_a) {
             layoutComponents,
             emptyStateComponents,
             itemActionComponent,
-            bulkActionsComponent }, props), { selected: (_b = props.selected) !== null && _b !== void 0 ? _b : [], 
+            bulkActionsComponent,
+            layoutBreakpoints,
+            registerLayoutBreakpoints,
+            layouts,
+            registerLayout }, props), { selected, 
             // T !== DataListObject
             sorting: sorting }) },
         React__default["default"].createElement(InternalDataList, null)));
+    function registerLayoutBreakpoints(size) {
+        setLayoutBreakpoints(prev => sortBreakpoints([...prev, size]));
+    }
+    function registerLayout(size, children) {
+        setLayouts(prev => (Object.assign(Object.assign({}, prev), { [size]: children })));
+    }
 }
 function InternalDataList() {
-    const { data, headers, title, totalCount, headerVisibility = { xs: true, sm: true, md: true, lg: true, xl: true }, loadingState = "none", layoutComponents, } = useDataListContext();
+    const { data, title, totalCount, loadingState = "none", layoutComponents, } = useDataListContext();
     const backToTopRef = React.useRef(null);
-    const headerData = generateHeaderElements(headers);
-    const mediaMatches = useLayoutMediaQueries();
     const initialLoading = loadingState === "initial";
     const showEmptyState = !initialLoading && data.length === 0;
     const shouldRenderLoadMoreTrigger = !initialLoading && !showEmptyState;
@@ -998,10 +998,10 @@ function InternalDataList() {
             React__default["default"].createElement("div", { className: styles$e.headerFilters },
                 React__default["default"].createElement(InternalDataListFilters, null),
                 React__default["default"].createElement(InternalDataListSearch, null)),
-            headerData && (React__default["default"].createElement(DataListHeader, { layouts: layoutComponents, headerData: headerData, headerVisibility: headerVisibility, mediaMatches: mediaMatches }))),
-        initialLoading && (React__default["default"].createElement(DataListLoadingState, { headers: headers, layouts: layoutComponents, mediaMatches: mediaMatches })),
+            React__default["default"].createElement(DataListHeader, null)),
+        initialLoading && React__default["default"].createElement(DataListLoadingState, null),
         showEmptyState && React__default["default"].createElement(InternalDataListEmptyState, null),
-        !initialLoading && (React__default["default"].createElement(DataListItems, { data: data, layouts: layoutComponents, mediaMatches: mediaMatches })),
+        layoutComponents,
         loadingState === "filtering" && (React__default["default"].createElement("div", { "data-testid": DATA_LIST_FILTERING_SPINNER_TEST_ID, className: styles$e.filtering },
             React__default["default"].createElement("div", { className: styles$e.filteringSpinner },
                 React__default["default"].createElement(Spinner.Spinner, { size: "small" })))),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "4.45.1",
+  "version": "4.45.3",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -84,5 +84,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "78ec7dc1183f541c32af84cf398ec63777d637aa"
+  "gitHead": "4673b6c87c0e95f84b2bb9b837272c546cc2f5d7"
 }

package/dist/DataList/components/DataListLayoutInternal/DataListHeader.d.ts

@@ -1,11 +0,0 @@
-import React from "react";
-import { Breakpoints } from "../../DataList.const";
-import { DataListHeader as DataListHeaderType, DataListItemTypeFromHeader, DataListLayoutProps, DataListObject, DataListProps } from "../../DataList.types";
-interface DataListHeaderProps<T extends DataListObject> {
-    readonly layouts: React.ReactElement<DataListLayoutProps<T>>[] | undefined;
-    readonly mediaMatches?: Record<Breakpoints, boolean>;
-    readonly headerData?: DataListItemTypeFromHeader<T, DataListHeaderType<T>>;
-    readonly headerVisibility: NonNullable<DataListProps<T>["headerVisibility"]>;
-}
-export declare function DataListHeader<T extends DataListObject>({ layouts, mediaMatches, headerData, }: DataListHeaderProps<T>): JSX.Element | null;
-export {};

package/dist/DataList/components/DataListLayoutInternal/DataListItems.d.ts

@@ -1,10 +0,0 @@
-import React from "react";
-import { Breakpoints } from "@jobber/components/DataList/DataList.const";
-import { DataListLayoutProps, DataListObject } from "@jobber/components/DataList/DataList.types";
-interface DataListItemsProps<T extends DataListObject> {
-    readonly layouts: React.ReactElement<DataListLayoutProps<T>>[] | undefined;
-    readonly mediaMatches?: Record<Breakpoints, boolean>;
-    readonly data: T[];
-}
-export declare function DataListItems<T extends DataListObject>({ layouts, mediaMatches, data, }: DataListItemsProps<T>): JSX.Element;
-export {};

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

@@ -1,10 +0,0 @@
-import React from "react";
-import { Breakpoints } from "../../DataList.const";
-import { DataListLayoutProps, DataListObject } from "../../DataList.types";
-interface DataListLayoutInternalProps<T extends DataListObject> {
-    readonly layouts: React.ReactElement<DataListLayoutProps<T>>[] | undefined;
-    readonly renderLayout: (layout: React.ReactElement<DataListLayoutProps<T>>) => JSX.Element;
-    readonly mediaMatches?: Record<Breakpoints, boolean>;
-}
-export declare function DataListLayoutInternal<T extends DataListObject>({ layouts, renderLayout, mediaMatches, }: DataListLayoutInternalProps<T>): JSX.Element;
-export {};

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

@@ -1,3 +0,0 @@
-export { DataListItems } from "./DataListItems";
-export { DataListHeader } from "./DataListHeader";
-export { DataListLayoutInternal } from "./DataListLayoutInternal";

package/dist/DataList/hooks/useLayoutMediaQueries.d.ts

@@ -1 +0,0 @@
-export declare function useLayoutMediaQueries(): Record<"xs" | "sm" | "md" | "lg" | "xl", boolean>;