@jobber/components 4.41.0 → 4.42.1

package/dist/DataList/DataList.d.ts

@@ -3,12 +3,14 @@ import { DataListLayout } from "./components/DataListLayout";
 import { DataListFilters } from "./components/DataListFilters";
 import { DataListSearch } from "./components/DataListSearch";
 import { DataListEmptyState } from "./components/DataListEmptyState";
-import { DataListObject, DataListProps } from "./DataList.types";
 import { DataListItemActions } from "./components/DataListItemActions";
 import { DataListAction } from "./components/DataListAction";
+import { DataListLayoutActions } from "./components/DataListLayoutActions";
+import { DataListObject, DataListProps } from "./DataList.types";
 export declare function DataList<T extends DataListObject>({ sorting, ...props }: DataListProps<T>): JSX.Element;
 export declare namespace DataList {
     var Layout: typeof DataListLayout;
+    var LayoutActions: typeof DataListLayoutActions;
     var EmptyState: typeof DataListEmptyState;
     var Filters: typeof DataListFilters;
     var Search: typeof DataListSearch;

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

@@ -148,6 +148,19 @@ export interface DataListContextProps<T extends DataListObject> extends DataList
     readonly layoutComponents?: ReactElement<DataListLayoutProps<T>>[];
     readonly itemActionComponent?: ReactElement<DataListItemActionsProps<T>>;
 }
+export interface DataListLayoutContextProps {
+    readonly isInLayoutProvider: boolean;
+    /**
+     * Determine if the consumer of the DataList manually added an action to the
+     * layout. This is used to determine if the DataList should render the
+     * action column.
+     */
+    readonly hasInLayoutActions: boolean;
+    readonly setHasInLayoutActions: (state: boolean) => void;
+}
+export interface DataListLayoutActionsContextProps<T extends DataListObject> {
+    readonly activeItem?: T;
+}
 type Fragment<T> = T | T[];
 export interface DataListItemActionsProps<T extends DataListObject> {
     /**

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

@@ -10,9 +10,9 @@ export declare function getCompoundComponent<T>(children: ReactElement | ReactEl
  */
 export declare function getCompoundComponents<T>(children: ReactElement | ReactElement[], type: ReactElement<T>["type"]): ReactElement<T>[];
 /**
- * Generate the default elements the DataList would use on the data provided.
+ * Generate the default element the DataList would use on the data provided.
  */
-export declare function generateListItemElements<T extends DataListObject>(data: T[]): DataListItemType<T[]>[];
+export declare function generateListItemElement<T extends DataListObject>(item: T): DataListItemType<T[]>;
 /**
  * Generate the header elements with the default styling
  */

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

@@ -1,4 +1,4 @@
-import { PropsWithChildren } from "react";
+import React, { PropsWithChildren } from "react";
 interface DataListActionsMenuProps {
     readonly visible: boolean;
     readonly position: {
@@ -7,5 +7,5 @@ interface DataListActionsMenuProps {
     };
     readonly onRequestClose: () => void;
 }
-export declare function DataListActionsMenu({ visible, position, onRequestClose, children, }: PropsWithChildren<DataListActionsMenuProps>): JSX.Element;
+export declare function DataListActionsMenu({ visible, position, onRequestClose, children, }: PropsWithChildren<DataListActionsMenuProps>): React.ReactPortal;
 export {};

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

@@ -0,0 +1,9 @@
+import { ReactElement } from "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>>;
+}
+export declare function DataListItem<T extends DataListObject>({ item, layout, }: DataListItem<T>): JSX.Element;
+export {};

package/dist/DataList/components/{DataListLayoutInternal → DataListItem}/DataListItemInternal.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { DataListObject } from "../../DataList.types";
+import { DataListObject } from "@jobber/components/DataList/DataList.types";
 interface ListItemInternalProps<T extends DataListObject> {
     readonly children: JSX.Element;
     readonly item: T;

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

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

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

@@ -1,6 +1,6 @@
 import { ReactElement } from "react";
 import { DataListActionProps, DataListObject, InternalDataListActionProps } from "../../DataList.types";
-interface DataListItemActionsOverflowProps<T extends DataListObject> extends Pick<InternalDataListActionProps<T>, "item"> {
+interface DataListItemActionsOverflowProps<T extends DataListObject> extends Partial<Pick<InternalDataListActionProps<T>, "item">> {
     readonly actions: ReactElement<DataListActionProps<T>>[];
 }
 export declare function DataListItemActionsOverflow<T extends DataListObject>({ item, actions, }: DataListItemActionsOverflowProps<T>): JSX.Element;

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

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

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

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

package/dist/DataList/components/DataListLayoutActions/DataListLayoutContext/DataListLayoutContext.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { DataListLayoutActionsContextProps, DataListObject } from "@jobber/components/DataList/DataList.types";
+export declare const DataListLayoutActionsContext: import("react").Context<DataListLayoutActionsContextProps<DataListObject>>;
+export declare function useDataListLayoutActionsContext(): DataListLayoutActionsContextProps<DataListObject>;

package/dist/DataList/components/DataListLayoutActions/DataListLayoutContext/index.d.ts

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

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

@@ -0,0 +1 @@
+export { DataListLayoutActions } from "./DataListLayoutActions";

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

@@ -1,6 +1,6 @@
 import React from "react";
-import { Breakpoints } from "../../DataList.const";
-import { DataListLayoutProps, DataListObject } from "../../DataList.types";
+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>;

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

@@ -1,11 +1,5 @@
 /// <reference types="react" />
 import { DataListContextProps, DataListObject } from "../../DataList.types";
-export declare const defaultValues: {
-    title: string;
-    data: never[];
-    headers: {};
-    children: never[];
-    selected: never[];
-};
+export declare const defaultValues: DataListContextProps<DataListObject>;
 export declare const DataListContext: import("react").Context<DataListContextProps<DataListObject>>;
 export declare function useDataListContext(): DataListContextProps<DataListObject>;

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { DataListLayoutContextProps } from "@jobber/components/DataList/DataList.types";
+export declare const defaultValues: DataListLayoutContextProps;
+export declare const DataListLayoutContext: import("react").Context<DataListLayoutContextProps>;
+export declare function useDataListLayoutContext(): DataListLayoutContextProps;

package/dist/DataList/context/DataListLayoutContext/index.d.ts

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

package/dist/DataList/index.js

@@ -9,23 +9,26 @@ var Text = require('../Text-e7ed0974.js');
 var Glimmer = require('../Glimmer-cfa92a88.js');
 var framerMotion = require('framer-motion');
 var classnames = require('classnames');
-var design = require('@jobber/design');
-var isEmpty = require('lodash/isEmpty');
-var InlineLabel = require('../InlineLabel-afd5fc6f.js');
-var FormatDate = require('../FormatDate-70ea5b43.js');
-var Heading = require('../Heading-a1191b15.js');
-require('uuid');
-require('react-hook-form');
-var Checkbox = require('../Checkbox-3bccf65c.js');
-var Typography = require('../Typography-fd6f932a.js');
+var noop = require('lodash/noop');
 require('react-router-dom');
 var Button = require('../Button-fd8413b2.js');
-require('react-dom');
+var design = require('@jobber/design');
+var Typography = require('../Typography-fd6f932a.js');
+var ReactDOM = require('react-dom');
 var Tooltip = require('../Tooltip-bf67fe6e.js');
 require('react-popper');
 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 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');
@@ -48,16 +51,18 @@ 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 debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
 
-var css_248z$d = ".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.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.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  --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.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  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- > :first-child {\n    padding-top: 0;\n    opacity: 0;\n}\n  }\n\n@media (--medium-screens-and-up) {\n\n.ise8kHCfhCY- .d-79rkMqufg- > :first-child {\n    padding-top: 0;\n    opacity: 0;\n}\n  }\n\n.ise8kHCfhCY-:hover .d-79rkMqufg- > :first-child,\n.ise8kHCfhCY-:focus-within .d-79rkMqufg- > :first-child,\n.ise8kHCfhCY- .d-79rkMqufg-._4L7iXXzLr5k- > :first-child {\n  opacity: 1;\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$d = {"wrapper":"TkdrExYnvcY-","titleContainer":"IcAlZHoB4LI-","headerFilters":"TFO76ysivmg-","headerTitles":"jGHZZYZm1ZY-","headerBatchSelect":"jMSVGIAr5tk-","listItem":"ise8kHCfhCY-","active":"Pc0JGX6jCD4-","selectable":"d-79rkMqufg-","selectAllCheckbox":"qm-SSuWTXkI-","visible":"VA9RnQp6nbI-","selected":"_4L7iXXzLr5k-","filtering":"Kkp-IYmwq-s-","filteringSpinner":"m-eCShL7TU4-"};
-styleInject_es.styleInject(css_248z$d);
+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.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.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  --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.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  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- > :first-child {\n    padding-top: 0;\n    opacity: 0;\n}\n  }\n\n@media (--medium-screens-and-up) {\n\n.ise8kHCfhCY- .d-79rkMqufg- > :first-child {\n    padding-top: 0;\n    opacity: 0;\n}\n  }\n\n.ise8kHCfhCY-:hover .d-79rkMqufg- > :first-child,\n.ise8kHCfhCY-:focus-within .d-79rkMqufg- > :first-child,\n.ise8kHCfhCY- .d-79rkMqufg-._4L7iXXzLr5k- > :first-child {\n  opacity: 1;\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-","selectable":"d-79rkMqufg-","selectAllCheckbox":"qm-SSuWTXkI-","visible":"VA9RnQp6nbI-","selected":"_4L7iXXzLr5k-","filtering":"Kkp-IYmwq-s-","filteringSpinner":"m-eCShL7TU4-"};
+styleInject_es.styleInject(css_248z$e);
 
-var css_248z$c = ".F56prQsXm3A- {\n  min-width: 80px;\n  margin-left: calc(16px / 2);\n  margin-left: var(--space-small);\n}\n";
-var styles$c = {"results":"F56prQsXm3A-"};
-styleInject_es.styleInject(css_248z$c);
+var css_248z$d = ".F56prQsXm3A- {\n  min-width: 80px;\n  margin-left: calc(16px / 2);\n  margin-left: var(--space-small);\n}\n";
+var styles$d = {"results":"F56prQsXm3A-"};
+styleInject_es.styleInject(css_248z$d);
 
 const DATALIST_TOTALCOUNT_TEST_ID = "ATL-DataList-TotalCount";
 function DataListTotalCount({ totalCount, loading, }) {
@@ -73,13 +78,60 @@ function DataListTotalCount({ totalCount, loading, }) {
             totalCount.toLocaleString(),
             " results)"));
     }
-    return (React__default["default"].createElement("div", { className: styles$c.results, "data-testid": DATALIST_TOTALCOUNT_TEST_ID }, output));
+    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: [],
+};
+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);
 }
 
-var css_248z$b = ".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$b = {"loadingItem":"Rh--6fVpkm4-","mobileLoadingState":"zbS7UvpVoWI-"};
+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 = ".iyg43v-S9yU- {\n  display: -ms-flexbox;\n  display: flex;\n  width: 100%;\n  min-height: 44px;\n  padding: calc(16px / 2);\n  padding: var(--space-small);\n  border: none;\n  border-radius: 0;\n  font-size: calc((16px * 1) * 0.875);\n  font-size: calc(calc(16px * 1) * 0.875);\n  font-size: var(--typography--fontSize-base);\n  text-align: left;\n  background: none;\n  cursor: pointer;\n  transition: background 200ms ease;\n  transition: background var(--timing-base) ease;\n  -webkit-appearance: none;\n          appearance: none;\n  -ms-flex-align: center;\n      align-items: center;\n  gap: calc(16px / 2);\n  gap: var(--space-small);\n}\n\n.iyg43v-S9yU-:hover,\n.iyg43v-S9yU-:focus {\n  background-color: rgb(250, 246, 219);\n  background-color: var(--color-surface--hover);\n}\n\n.AUJNqz93ZDA- {\n  font-weight: 500;\n}\n";
+var styles$a = {"action":"iyg43v-S9yU-","label":"AUJNqz93ZDA-"};
+styleInject_es.styleInject(css_248z$a);
+
+function DataListAction(
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+_) {
+    return null;
+}
+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) },
+        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))));
+}
+
+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: 6;\n  z-index: var(--elevation-menu);\n  width: 100%;\n  height: 100%;\n}\n";
+var styles$9 = {"menu":"aokwZU8jbWU-","overlay":"XtVRP97TVSE-"};
+styleInject_es.styleInject(css_248z$9);
+
 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";
@@ -101,9 +153,137 @@ 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;
 
-var css_248z$a = ".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$a = {"tags":"WRV-UmQmPzo-","tagCount":"liQeWCMenD0-"};
-styleInject_es.styleInject(css_248z$a);
+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(React__default["default"].Fragment, null,
+        React__default["default"].createElement("div", { className: styles$9.overlay, onClick: onRequestClose }),
+        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$9.menu, style: getPositionCssVars(), onClick: onRequestClose },
+            React__default["default"].createElement("div", { tabIndex: 0, ref: focusTrapRef }, children))))), 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 = 0, y = 0 } = 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({ item, 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 })),
+        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 }))))))));
+    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);
+    }
+}
+
+// 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,
+            }) },
+            React__default["default"].createElement(Checkbox.Checkbox, { checked: selected === null || selected === void 0 ? void 0 : selected.includes(item.id), onChange: handleChange }),
+            children));
+    }
+    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]);
+        }
+    }
+}
+
+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);
 
 function DataListTags({ items }) {
     const ref = React.useRef(null);
@@ -123,10 +303,10 @@ function DataListTags({ items }) {
             elements === null || elements === void 0 ? void 0 : elements.forEach(element => observer.unobserve(element));
         };
     }, [items]);
-    return (React__default["default"].createElement("div", { className: styles$a.tags, ref: ref },
+    return (React__default["default"].createElement("div", { className: styles$8.tags, ref: ref },
         items.filter(Boolean).map((tag, index) => (React__default["default"].createElement("div", { key: tag, "data-tag-element": index },
             React__default["default"].createElement(InlineLabel.InlineLabel, null, tag)))),
-        Boolean(visibleItems) && (React__default["default"].createElement("div", { className: styles$a.tagCount },
+        Boolean(visibleItems) && (React__default["default"].createElement("div", { className: styles$8.tagCount },
             React__default["default"].createElement(Text.Text, null,
                 "+",
                 visibleItems)))));
@@ -155,44 +335,32 @@ function buildIntersectionThreshold(items) {
     return thresholds;
 }
 
-var css_248z$9 = ".fLmJZJJqMcE- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n      align-items: center;\n  padding: 0;\n  border: none;\n  background-color: transparent;\n}\n\n.UG8cHUT3Hds- {\n  cursor: pointer;\n}\n";
-var styles$9 = {"headerLabel":"fLmJZJJqMcE-","sortable":"UG8cHUT3Hds-"};
-styleInject_es.styleInject(css_248z$9);
+var css_248z$7 = ".fLmJZJJqMcE- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n      align-items: center;\n  padding: 0;\n  border: none;\n  background-color: transparent;\n}\n\n.UG8cHUT3Hds- {\n  cursor: pointer;\n}\n";
+var styles$7 = {"headerLabel":"fLmJZJJqMcE-","sortable":"UG8cHUT3Hds-"};
+styleInject_es.styleInject(css_248z$7);
 
-var css_248z$8 = ".AN5egORYy-0- {\n  padding-right: calc(16px / 2);\n  padding-right: var(--space-small);\n}\n\n.AN5egORYy-0- path {\n  fill: rgba(101, 120, 132, 1);\n  fill: var(--color-greyBlue);\n  transition: all 200ms ease;\n  transition: all var(--timing-base) ease;\n}\n\n.AN5egORYy-0- path.F1uTDCK0Sb0- {\n  fill: rgb(1, 41, 57);\n  fill: var(--color-blue);\n}\n\n.AN5egORYy-0- path._6KYeQXWXLQ8- {\n  fill: rgb(193, 201, 206);\n  fill: var(--color-greyBlue--lighter);\n}\n";
-var styles$8 = {"sortIcon":"AN5egORYy-0-","active":"F1uTDCK0Sb0-","inactive":"_6KYeQXWXLQ8-"};
-styleInject_es.styleInject(css_248z$8);
+var css_248z$6 = ".AN5egORYy-0- {\n  padding-right: calc(16px / 2);\n  padding-right: var(--space-small);\n}\n\n.AN5egORYy-0- path {\n  fill: rgba(101, 120, 132, 1);\n  fill: var(--color-greyBlue);\n  transition: all 200ms ease;\n  transition: all var(--timing-base) ease;\n}\n\n.AN5egORYy-0- path.F1uTDCK0Sb0- {\n  fill: rgb(1, 41, 57);\n  fill: var(--color-blue);\n}\n\n.AN5egORYy-0- path._6KYeQXWXLQ8- {\n  fill: rgb(193, 201, 206);\n  fill: var(--color-greyBlue--lighter);\n}\n";
+var styles$6 = {"sortIcon":"AN5egORYy-0-","active":"F1uTDCK0Sb0-","inactive":"_6KYeQXWXLQ8-"};
+styleInject_es.styleInject(css_248z$6);
 
 const SORTING_ICON_TEST_ID = "ATL-DataList-Sorting-Icon";
 function DataListSortingArrows({ order }) {
-    return (React__default["default"].createElement("div", { className: styles$8.sortIcon, "data-testid": SORTING_ICON_TEST_ID },
+    return (React__default["default"].createElement("div", { className: styles$6.sortIcon, "data-testid": SORTING_ICON_TEST_ID },
         React__default["default"].createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
             React__default["default"].createElement("path", { className: getActiveClassName("asc"), d: "M16.2929 10.6661C15.9024 11.0566 15.2692 11.0566 14.8787 10.6661L12.2891 8.14263L9.70711 10.6661C9.31658 11.0566 8.68342 11.0566 8.29289 10.6661C7.90237 10.2756 7.90237 9.64239 8.29289 9.25186L11.5858 5.95897C11.9763 5.56845 12.6095 5.56845 13 5.95897L16.2929 9.25186C16.6834 9.64239 16.6834 10.2756 16.2929 10.6661Z" }),
             React__default["default"].createElement("path", { className: getActiveClassName("desc"), d: "M8.29292 13.3339C8.68345 12.9434 9.31661 12.9434 9.70714 13.3339L12.2968 15.8573L14.8787 13.3339C15.2692 12.9434 15.9024 12.9434 16.2929 13.3339C16.6834 13.7244 16.6834 14.3576 16.2929 14.7481L13 18.041C12.6095 18.4315 11.9763 18.4315 11.5858 18.041L8.29292 14.7481C7.9024 14.3576 7.9024 13.7244 8.29292 13.3339Z" }))));
     function getActiveClassName(targetOrder) {
-        return order === targetOrder ? styles$8.active : styles$8.inactive;
+        return order === targetOrder ? styles$6.active : styles$6.inactive;
     }
 }
 
-const defaultValues = {
-    title: "",
-    data: [],
-    headers: {},
-    children: [],
-    selected: [],
-};
-const DataListContext = React.createContext(defaultValues);
-function useDataListContext() {
-    return React.useContext(DataListContext);
-}
-
 function DataListHeaderTile({ headers, headerKey, }) {
     const { sorting } = useDataListContext();
     const isSortable = sorting === null || sorting === void 0 ? void 0 : sorting.sortable.includes(headerKey);
     const sortingState = sorting === null || sorting === void 0 ? void 0 : sorting.state;
     const Tag = isSortable ? "button" : "div";
-    return (React__default["default"].createElement(Tag, { className: classnames__default["default"](styles$9.headerLabel, {
-            [styles$9.sortable]: isSortable,
+    return (React__default["default"].createElement(Tag, { className: classnames__default["default"](styles$7.headerLabel, {
+            [styles$7.sortable]: isSortable,
         }), onClick: handleOnClick },
         React__default["default"].createElement(Text.Text, { maxLines: "single" }, headers[headerKey]),
         (sortingState === null || sortingState === void 0 ? void 0 : sortingState.key) === headerKey && (React__default["default"].createElement(DataListSortingArrows, { order: sortingState.order }))));
@@ -231,10 +399,10 @@ function getCompoundComponents(children, type) {
     return elements;
 }
 /**
- * Generate the default elements the DataList would use on the data provided.
+ * Generate the default element the DataList would use on the data provided.
  */
-function generateListItemElements(data) {
-    return data.map(item => Object.keys(item).reduce((acc, key) => {
+function generateListItemElement(item) {
+    return Object.keys(item).reduce((acc, key) => {
         const currentItem = item[key];
         if (!currentItem) {
             return acc;
@@ -256,7 +424,7 @@ function generateListItemElements(data) {
             acc[key] = React__default["default"].createElement(Text.Text, { variation: "subdued" }, currentItem);
         }
         return acc;
-    }, {}));
+    }, {});
 }
 /**
  * Generate the header elements with the default styling
@@ -269,6 +437,41 @@ function sortSizeProp(sizeProp) {
     return sizeProp.sort((a, b) => BREAKPOINTS.indexOf(a) - BREAKPOINTS.indexOf(b));
 }
 
+function DataListItem({ item, layout, }) {
+    const { itemActionComponent } = useDataListContext();
+    const { hasInLayoutActions } = useDataListLayoutContext();
+    const [showMenu, setShowMenu] = React.useState(false);
+    const [contextPosition, setContextPosition] = React.useState();
+    const generatedItem = React.useMemo(() => generateListItemElement(item), [item]);
+    const contextMenuActions = itemActionComponent === null || itemActionComponent === void 0 ? void 0 : itemActionComponent.props.children;
+    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, onContextMenu: handleContextMenu, className: classnames__default["default"](styles__default["default"].listItem, {
+                [styles__default["default"].active]: showMenu && isContextMenuVisible,
+            }), key: item.id },
+            React__default["default"].createElement(DataListItemInternal, { item: item }, layout.props.children(generatedItem)),
+            React__default["default"].createElement(framerMotion.AnimatePresence, null,
+                showMenu && !hasInLayoutActions && (React__default["default"].createElement(InternalDataListItemActions, { item: item })),
+                React__default["default"].createElement(DataListActionsMenu, { key: item.id, visible: shouldShowContextMenu, position: contextPosition || { x: 0, y: 0 }, onRequestClose: () => setContextPosition(undefined) }, contextMenuActions &&
+                    React.Children.map(contextMenuActions, action => (React__default["default"].createElement(InternalDataListAction, Object.assign({ key: item.id }, action.props, { item: item })))))))));
+    function handleShowMenu() {
+        setShowMenu(true);
+    }
+    function handleHideMenu() {
+        setShowMenu(false);
+    }
+    function handleContextMenu(event) {
+        if (!contextMenuActions || isContextMenuVisible)
+            return;
+        event.preventDefault();
+        setContextPosition({
+            x: event.clientX,
+            y: event.clientY,
+        });
+    }
+}
+
 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 => {
@@ -301,200 +504,26 @@ function isLayoutVisible({ layoutSize, mediaMatches, sizePropsOfLayouts, }) {
     return isVisibleBreakpoint && largerLayoutIsNotVisible;
 }
 
-function DataListItemInternal({ children, item, }) {
-    const { selected, onSelect } = useDataListContext();
-    if (selected !== undefined && onSelect) {
-        return (React__default["default"].createElement("div", { className: classnames__default["default"](styles$d.selectable, {
-                [styles$d.selected]: selected === null || selected === void 0 ? void 0 : selected.length,
-            }) },
-            React__default["default"].createElement(Checkbox.Checkbox, { checked: selected === null || selected === void 0 ? void 0 : selected.includes(item.id), onChange: handleChange }),
-            children));
-    }
-    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]);
-        }
-    }
-}
-
-var css_248z$7 = ".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$7 = {"menu":"jHcHGQ-HDbk-"};
-styleInject_es.styleInject(css_248z$7);
-
-var css_248z$6 = ".iyg43v-S9yU- {\n  display: -ms-flexbox;\n  display: flex;\n  width: 100%;\n  min-height: 44px;\n  padding: calc(16px / 2);\n  padding: var(--space-small);\n  border: none;\n  border-radius: 0;\n  text-align: left;\n  background: none;\n  cursor: pointer;\n  transition: background 200ms ease;\n  transition: background var(--timing-base) ease;\n  -webkit-appearance: none;\n          appearance: none;\n  -ms-flex-align: center;\n      align-items: center;\n  gap: calc(16px / 2);\n  gap: var(--space-small);\n}\n\n.iyg43v-S9yU-:hover,\n.iyg43v-S9yU-:focus {\n  background-color: rgb(250, 246, 219);\n  background-color: var(--color-surface--hover);\n}\n\n.AUJNqz93ZDA- {\n  font-weight: 500;\n}\n";
-var styles$6 = {"action":"iyg43v-S9yU-","label":"AUJNqz93ZDA-"};
-styleInject_es.styleInject(css_248z$6);
-
-function DataListAction(
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-_) {
-    return null;
-}
-function InternalDataListAction({ label, icon, destructive, onClick, item, }) {
-    const color = destructive ? "critical" : "blue";
-    return (React__default["default"].createElement("button", { className: styles$6.action, onClick: () => onClick === null || onClick === void 0 ? void 0 : onClick(item) },
-        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$6.label }, label))));
-}
-
-var css_248z$5 = ".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: 6;\n  z-index: var(--elevation-menu);\n  width: 100%;\n  height: 100%;\n}\n";
-var styles$5 = {"menu":"aokwZU8jbWU-","overlay":"XtVRP97TVSE-"};
-styleInject_es.styleInject(css_248z$5);
-
-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 (React__default["default"].createElement(framerMotion.AnimatePresence, null, visible && (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement("div", { className: styles$5.overlay, onClick: onRequestClose }),
-        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$5.menu, style: getPositionCssVars() },
-            React__default["default"].createElement("div", { tabIndex: 0, ref: focusTrapRef }, children))))));
-    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 = 0, y = 0 } = position;
-        const xIsOffScreen = x + width > window.innerWidth;
-        const yIsOffScreen = y + height > window.innerHeight;
-        const yOffSet = y + height - window.innerHeight;
-        const newPosX = Math.floor(xIsOffScreen ? x - width : x);
-        const newPosY = Math.floor(yIsOffScreen ? y - yOffSet : y);
-        return { posX: newPosX, posY: newPosY };
-    }
-}
-
-function DataListItemActionsOverflow({ item, 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 })),
-        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();
-        const posX = rect.x + rect.width;
-        const posY = rect.y + rect.height;
-        setMenuPosition({ x: posX, y: posY });
-    }
-    function handleClose() {
-        setShowMenu(false);
-    }
-}
-
-// 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$7.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;
-    }, []);
-}
-
 function DataListItems({ layouts, mediaMatches, data, }) {
-    const { itemActionComponent } = useDataListContext();
-    const elementData = React.useMemo(() => generateListItemElements(data), [data]);
-    const [activeID, setActiveID] = React.useState();
-    const [contextPosition, setContextPosition] = React.useState();
-    const contextMenuActions = itemActionComponent === null || itemActionComponent === void 0 ? void 0 : itemActionComponent.props.children;
-    const isContextMenuVisible = Boolean(contextPosition);
-    return (React__default["default"].createElement(DataListLayoutInternal, { layouts: layouts, mediaMatches: mediaMatches, renderLayout: layout => (React__default["default"].createElement(React__default["default"].Fragment, null, elementData.map((child, i) => {
-            const item = data[i];
-            const isActive = activeID === item.id;
-            const shouldShowContextMenu = isActive && isContextMenuVisible && Boolean(contextMenuActions);
-            return (React__default["default"].createElement("div", { onMouseEnter: handleMouseEnter(item), onMouseLeave: handleMouseLeave, onContextMenu: handleContextMenu, className: classnames__default["default"](styles$d.listItem, {
-                    [styles$d.active]: isActive && isContextMenuVisible,
-                }), key: item.id },
-                React__default["default"].createElement(DataListItemInternal, { item: data[i] }, layout.props.children(child)),
-                React__default["default"].createElement(framerMotion.AnimatePresence, null,
-                    isActive && React__default["default"].createElement(InternalDataListItemActions, { item: item }),
-                    React__default["default"].createElement(DataListActionsMenu, { key: item.id, visible: shouldShowContextMenu, position: contextPosition || { x: 0, y: 0 }, onRequestClose: () => setContextPosition(undefined) }, contextMenuActions &&
-                        React.Children.map(contextMenuActions, action => (React__default["default"].createElement(InternalDataListAction, Object.assign({ key: item.id }, action.props, { item: item }))))))));
-        }))) }));
-    function handleMouseEnter(item) {
-        return () => setActiveID(item.id);
-    }
-    function handleMouseLeave() {
-        !isContextMenuVisible && setActiveID(undefined);
-    }
-    function handleContextMenu(event) {
-        if (!contextMenuActions || isContextMenuVisible)
-            return;
-        event.preventDefault();
-        setContextPosition({
-            x: event.clientX,
-            y: event.clientY,
-        });
-    }
+    const [hasInLayoutActions, setHasInLayoutActions] = React.useState(false);
+    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 }))))) })));
 }
 
 function DataListHeaderCheckbox({ children }) {
     const { data, totalCount, selected = [], onSelectAll, onSelect, } = useDataListContext();
     if (!onSelectAll && !onSelect)
         return children;
-    return (React__default["default"].createElement("div", { className: classnames__default["default"](styles$d.selectable) },
-        React__default["default"].createElement("div", { className: classnames__default["default"](styles$d.selectAllCheckbox, {
-                [styles$d.visible]: Boolean(onSelectAll),
+    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(AnimatedSwitcher.AnimatedSwitcher, { switched: Boolean(selected.length), initialChild: children, switchTo: React__default["default"].createElement("div", { className: styles$d.headerBatchSelect },
+        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,
@@ -555,7 +584,7 @@ function DataListHeader({ layouts, mediaMatches, headerData, }) {
     const showHeader = useShowHeader();
     if (!showHeader || !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$d.headerTitles) },
+    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)))) }));
 }
 
@@ -571,13 +600,13 @@ function DataListLoadingState({ headers, layouts, mediaMatches, }) {
             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$b.loadingItem, key: i, "data-testid": DATALIST_LOADINGSTATE_ROW_TEST_ID }, layout.props.children(child))))));
+            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$b.mobileLoadingState, key: i },
+        return (React__default["default"].createElement("div", { className: styles$c.mobileLoadingState, key: i },
             React__default["default"].createElement(Glimmer.Glimmer.Text, null)));
     })));
 }
@@ -588,9 +617,9 @@ _) {
     return React__default["default"].createElement(React__default["default"].Fragment, null);
 }
 
-var css_248z$4 = ".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$4 = {"filters":"E-mG3prPSN8-","filterActions":"_0LGNoZxtqSE-","overflowTrigger":"LA3-gtgehrE-","overflowLeft":"fSPvawYWzZ8-","overflowRight":"ChfEJMPPVTk-"};
-styleInject_es.styleInject(css_248z$4);
+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";
 
@@ -665,20 +694,20 @@ function InternalDataListFilters() {
     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$4.filters, {
-            [styles$4.overflowLeft]: !isLeftVisible,
-            [styles$4.overflowRight]: !isRightVisible,
+    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$4.filterActions },
-            React__default["default"].createElement("span", { ref: leftRef, className: styles$4.overflowTrigger }),
+        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$4.overflowTrigger }))));
+            React__default["default"].createElement("span", { ref: rightRef, className: styles$5.overflowTrigger }))));
 }
 
-var css_248z$3 = ".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";
-var styles$3 = {"header":"PGOHzrMh374-","stuck":"PGjWc5ocjpI-"};
-styleInject_es.styleInject(css_248z$3);
+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";
+var styles$4 = {"header":"PGOHzrMh374-","stuck":"PGjWc5ocjpI-"};
+styleInject_es.styleInject(css_248z$4);
 
 function DataListStickyHeader({ children }) {
     const [isStuck, setIsStuck] = React.useState(false);
@@ -693,12 +722,12 @@ function DataListStickyHeader({ children }) {
             ref.current && observer.unobserve(ref.current);
         };
     }, [handleObserver, ref.current]);
-    return (React__default["default"].createElement("div", { ref: ref, className: classnames__default["default"](styles$3.header, { [styles$3.stuck]: isStuck }) }, children));
+    return (React__default["default"].createElement("div", { ref: ref, className: classnames__default["default"](styles$4.header, { [styles$4.stuck]: isStuck }) }, children));
 }
 
-var css_248z$2 = ".SaPMOnvw-3c- {\n  --transition-properties: var(--timing-base) ease-in-out;\n  --button-offset: calc(var(--space-largest) - var(--space-smallest));\n\n  position: absolute;\n  /* Inputs are off by 1 when put beside a button */\n  top: calc((16px / 2) + 1px);\n  top: calc(calc(16px / 2) + 1px);\n  top: calc(var(--space-small) + 1px);\n  right: calc((16px * 3) - (16px / 8));\n  right: calc(calc(16px * 3) - calc(16px / 8));\n  right: var(--button-offset);\n  visibility: hidden;\n  width: 0;\n  opacity: 0;\n  transition: opacity 200ms ease-in-out,\n    width 200ms ease-in-out, visibility 200ms ease-in-out;\n  transition: opacity var(--transition-properties),\n    width var(--transition-properties), visibility var(--transition-properties);\n}\n\n._3S1-91v2SYI- {\n  visibility: visible;\n  width: calc(100% - var(--button-offset));\n  opacity: 1;\n}\n\n@media (min-width: 768px) {\n\n.SaPMOnvw-3c-,\n._3S1-91v2SYI- {\n    position: static;\n    visibility: visible;\n    width: auto;\n    opacity: 1;\n    transition: none;\n}\n  }\n\n@media (--medium-screens-and-up) {\n\n.SaPMOnvw-3c-,\n._3S1-91v2SYI- {\n    position: static;\n    visibility: visible;\n    width: auto;\n    opacity: 1;\n    transition: none;\n}\n  }\n\n._9GlBktsUALw- {\n  display: block;\n}\n\n@media (min-width: 768px) {\n\n._9GlBktsUALw- {\n    display: none;\n}\n  }\n\n@media (--medium-screens-and-up) {\n\n._9GlBktsUALw- {\n    display: none;\n}\n  }\n\n/*\n * No Filters Styling\n *\n * When there are no filters, the search input is always visible.\n * ------------------------------------------------------------------------- */\n\n._3Pjrt42x454- .SaPMOnvw-3c- {\n  position: static;\n  visibility: visible;\n  width: auto;\n  opacity: 1;\n  transition: none;\n}\n\n@media (min-width: 768px) {\n\n._3Pjrt42x454- .SaPMOnvw-3c- {\n    max-width: 30%;\n}\n  }\n\n@media (--medium-screens-and-up) {\n\n._3Pjrt42x454- .SaPMOnvw-3c- {\n    max-width: 30%;\n}\n  }\n\n._3Pjrt42x454- ._9GlBktsUALw- {\n  display: none;\n}\n";
-var styles$2 = {"searchInput":"SaPMOnvw-3c-","searchInputVisible":"_3S1-91v2SYI-","searchButton":"_9GlBktsUALw-","withNoFilters":"_3Pjrt42x454-"};
-styleInject_es.styleInject(css_248z$2);
+var css_248z$3 = ".SaPMOnvw-3c- {\n  --transition-properties: var(--timing-base) ease-in-out;\n  --button-offset: calc(var(--space-largest) - var(--space-smallest));\n\n  position: absolute;\n  /* Inputs are off by 1 when put beside a button */\n  top: calc((16px / 2) + 1px);\n  top: calc(calc(16px / 2) + 1px);\n  top: calc(var(--space-small) + 1px);\n  right: calc((16px * 3) - (16px / 8));\n  right: calc(calc(16px * 3) - calc(16px / 8));\n  right: var(--button-offset);\n  visibility: hidden;\n  width: 0;\n  opacity: 0;\n  transition: opacity 200ms ease-in-out,\n    width 200ms ease-in-out, visibility 200ms ease-in-out;\n  transition: opacity var(--transition-properties),\n    width var(--transition-properties), visibility var(--transition-properties);\n}\n\n._3S1-91v2SYI- {\n  visibility: visible;\n  width: calc(100% - var(--button-offset));\n  opacity: 1;\n}\n\n@media (min-width: 768px) {\n\n.SaPMOnvw-3c-,\n._3S1-91v2SYI- {\n    position: static;\n    visibility: visible;\n    width: auto;\n    opacity: 1;\n    transition: none;\n}\n  }\n\n@media (--medium-screens-and-up) {\n\n.SaPMOnvw-3c-,\n._3S1-91v2SYI- {\n    position: static;\n    visibility: visible;\n    width: auto;\n    opacity: 1;\n    transition: none;\n}\n  }\n\n._9GlBktsUALw- {\n  display: block;\n}\n\n@media (min-width: 768px) {\n\n._9GlBktsUALw- {\n    display: none;\n}\n  }\n\n@media (--medium-screens-and-up) {\n\n._9GlBktsUALw- {\n    display: none;\n}\n  }\n\n/*\n * No Filters Styling\n *\n * When there are no filters, the search input is always visible.\n * ------------------------------------------------------------------------- */\n\n._3Pjrt42x454- .SaPMOnvw-3c- {\n  position: static;\n  visibility: visible;\n  width: auto;\n  opacity: 1;\n  transition: none;\n}\n\n@media (min-width: 768px) {\n\n._3Pjrt42x454- .SaPMOnvw-3c- {\n    max-width: 30%;\n}\n  }\n\n@media (--medium-screens-and-up) {\n\n._3Pjrt42x454- .SaPMOnvw-3c- {\n    max-width: 30%;\n}\n  }\n\n._3Pjrt42x454- ._9GlBktsUALw- {\n  display: none;\n}\n";
+var styles$3 = {"searchInput":"SaPMOnvw-3c-","searchInputVisible":"_3S1-91v2SYI-","searchButton":"_9GlBktsUALw-","withNoFilters":"_3Pjrt42x454-"};
+styleInject_es.styleInject(css_248z$3);
 
 const DATA_LIST_SEARCH_TEST_ID = "ATL-DataList-Search-input-wrapper";
 // This component is meant to capture the props of the DataList.Search
@@ -718,13 +747,13 @@ function InternalDataListSearch() {
         return null;
     const { placeholder } = searchComponent.props;
     return (React__default["default"].createElement("div", { className: classnames__default["default"]({
-            [styles$2.withNoFilters]: !filterComponent && !sorting,
+            [styles$3.withNoFilters]: !filterComponent && !sorting,
         }) },
-        React__default["default"].createElement("div", { "data-testid": DATA_LIST_SEARCH_TEST_ID, className: classnames__default["default"](styles$2.searchInput, {
-                [styles$2.searchInputVisible]: visible,
+        React__default["default"].createElement("div", { "data-testid": DATA_LIST_SEARCH_TEST_ID, className: classnames__default["default"](styles$3.searchInput, {
+                [styles$3.searchInputVisible]: visible,
             }) },
             React__default["default"].createElement(InputText.InputText, { ref: inputRef, placeholder: getPlaceholder(), onChange: debouncedSearch, prefix: { icon: "search" }, size: "small" })),
-        React__default["default"].createElement("div", { className: styles$2.searchButton },
+        React__default["default"].createElement("div", { className: styles$3.searchButton },
             React__default["default"].createElement(AnimatedSwitcher.AnimatedSwitcher, { switched: visible, initialChild: React__default["default"].createElement(Button.Button, { variation: "subtle", icon: "search", ariaLabel: "Search", onClick: toggleSearch }), switchTo: React__default["default"].createElement(Button.Button, { variation: "subtle", icon: "remove", ariaLabel: "Close search bar", onClick: toggleSearch }) }))));
     function getPlaceholder() {
         if (placeholder)
@@ -742,9 +771,9 @@ function InternalDataListSearch() {
     }
 }
 
-var css_248z$1 = ".zg3w9nQga-M- {\n  display: -ms-flexbox;\n  display: flex;\n  box-sizing: border-box;\n  padding: calc(16px * 1);\n  padding: var(--space-base);\n  -ms-flex-pack: center;\n      justify-content: center;\n  -ms-flex-direction: column;\n      flex-direction: column;\n  row-gap: calc(16px * 1);\n  row-gap: var(--space-base);\n  -ms-flex-align: center;\n      align-items: center;\n  -ms-flex: 1;\n      flex: 1;\n}\n";
-var styles$1 = {"emptyStateWrapper":"zg3w9nQga-M-"};
-styleInject_es.styleInject(css_248z$1);
+var css_248z$2 = ".zg3w9nQga-M- {\n  display: -ms-flexbox;\n  display: flex;\n  box-sizing: border-box;\n  padding: calc(16px * 1);\n  padding: var(--space-base);\n  -ms-flex-pack: center;\n      justify-content: center;\n  -ms-flex-direction: column;\n      flex-direction: column;\n  row-gap: calc(16px * 1);\n  row-gap: var(--space-base);\n  -ms-flex-align: center;\n      align-items: center;\n  -ms-flex: 1;\n      flex: 1;\n}\n";
+var styles$2 = {"emptyStateWrapper":"zg3w9nQga-M-"};
+styleInject_es.styleInject(css_248z$2);
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 function DataListEmptyState(_) {
@@ -753,7 +782,7 @@ function DataListEmptyState(_) {
 function InternalDataListEmptyState() {
     const { emptyStateComponents: components, filtered } = React.useContext(DataListContext);
     const { message, action } = getMessages();
-    return (React__default["default"].createElement("div", { className: styles$1.emptyStateWrapper },
+    return (React__default["default"].createElement("div", { className: styles$2.emptyStateWrapper },
         React__default["default"].createElement(Text.Text, { align: "center" }, message),
         renderButton(action)));
     function getMessages() {
@@ -787,9 +816,9 @@ function getEmptyStates(components) {
     return { defaultEmptyState, filteredEmptyState };
 }
 
-var css_248z = ".IC-Y9bTIVFo- {\n  position: relative;\n  -webkit-transform: translateY(calc((16px * 3) * -1));\n  -webkit-transform: translateY(calc(calc(16px * 3) * -1));\n  -webkit-transform: translateY(calc(var(--space-largest) * -1));\n          transform: translateY(calc((16px * 3) * -1));\n          transform: translateY(calc(calc(16px * 3) * -1));\n          transform: translateY(calc(var(--space-largest) * -1));\n}\n\n.PbZLGpbI6ZM-,\n._6zA6B-jmz6o- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-pack: center;\n      justify-content: center;\n  padding: calc(16px / 2);\n  padding: var(--space-small);\n}\n\n._6zA6B-jmz6o- {\n  opacity: 0;\n  -webkit-animation: gZ4DUv82g5I- 200ms ease 200ms forwards;\n  -webkit-animation: gZ4DUv82g5I- var(--timing-base) ease var(--timing-base) forwards;\n          animation: gZ4DUv82g5I- 200ms ease 200ms forwards;\n          animation: gZ4DUv82g5I- var(--timing-base) ease var(--timing-base) forwards;\n}\n\n@-webkit-keyframes gZ4DUv82g5I- {\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes gZ4DUv82g5I- {\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n}\n";
-var styles = {"trigger":"IC-Y9bTIVFo-","loadingMore":"PbZLGpbI6ZM-","backToTop":"_6zA6B-jmz6o-","fadeIn":"gZ4DUv82g5I-"};
-styleInject_es.styleInject(css_248z);
+var css_248z$1 = ".IC-Y9bTIVFo- {\n  position: relative;\n  -webkit-transform: translateY(calc((16px * 3) * -1));\n  -webkit-transform: translateY(calc(calc(16px * 3) * -1));\n  -webkit-transform: translateY(calc(var(--space-largest) * -1));\n          transform: translateY(calc((16px * 3) * -1));\n          transform: translateY(calc(calc(16px * 3) * -1));\n          transform: translateY(calc(var(--space-largest) * -1));\n}\n\n.PbZLGpbI6ZM-,\n._6zA6B-jmz6o- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-pack: center;\n      justify-content: center;\n  padding: calc(16px / 2);\n  padding: var(--space-small);\n}\n\n._6zA6B-jmz6o- {\n  opacity: 0;\n  -webkit-animation: gZ4DUv82g5I- 200ms ease 200ms forwards;\n  -webkit-animation: gZ4DUv82g5I- var(--timing-base) ease var(--timing-base) forwards;\n          animation: gZ4DUv82g5I- 200ms ease 200ms forwards;\n          animation: gZ4DUv82g5I- var(--timing-base) ease var(--timing-base) forwards;\n}\n\n@-webkit-keyframes gZ4DUv82g5I- {\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes gZ4DUv82g5I- {\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n}\n";
+var styles$1 = {"trigger":"IC-Y9bTIVFo-","loadingMore":"PbZLGpbI6ZM-","backToTop":"_6zA6B-jmz6o-","fadeIn":"gZ4DUv82g5I-"};
+styleInject_es.styleInject(css_248z$1);
 
 function DataListLoadMoreTrigger() {
     const { onLoadMore } = useDataListContext();
@@ -797,7 +826,7 @@ function DataListLoadMoreTrigger() {
     React.useEffect(() => {
         isInView && (onLoadMore === null || onLoadMore === void 0 ? void 0 : onLoadMore());
     }, [isInView]);
-    return (React__default["default"].createElement("div", { ref: inViewRef, className: styles.trigger, "data-testid": DATA_LOAD_MORE_TEST_ID }));
+    return (React__default["default"].createElement("div", { ref: inViewRef, className: styles$1.trigger, "data-testid": DATA_LOAD_MORE_TEST_ID }));
 }
 
 const MAX_DATA_COUNT = 50;
@@ -806,12 +835,41 @@ function DataListLoadMore({ onBackToTop }) {
     const showBackToTop = data.length > MAX_DATA_COUNT && loadingState !== "loadingMore";
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
         React__default["default"].createElement(DataListLoadMoreTrigger, { key: data.length }),
-        loadingState === "loadingMore" && (React__default["default"].createElement("div", { "data-testid": DATA_LIST_LOADING_MORE_SPINNER_TEST_ID, className: styles.loadingMore },
+        loadingState === "loadingMore" && (React__default["default"].createElement("div", { "data-testid": DATA_LIST_LOADING_MORE_SPINNER_TEST_ID, className: styles$1.loadingMore },
             React__default["default"].createElement(Spinner.Spinner, { size: "small" }))),
-        showBackToTop && (React__default["default"].createElement("div", { className: styles.backToTop },
+        showBackToTop && (React__default["default"].createElement("div", { className: styles$1.backToTop },
             React__default["default"].createElement(Button.Button, { label: "Back to top", onClick: onBackToTop, size: "small", variation: "subtle" })))));
 }
 
+var css_248z = "._0m75bgCVBhk- {\n  visibility: hidden;\n}\n";
+var styles = {"hidden":"_0m75bgCVBhk-"};
+styleInject_es.styleInject(css_248z);
+
+function DataListLayoutActions() {
+    const { itemActionComponent } = useDataListContext();
+    const { setHasInLayoutActions } = useDataListLayoutContext();
+    const { activeItem } = useDataListLayoutActionsContext();
+    const { children: actionsChildren } = (itemActionComponent === null || itemActionComponent === void 0 ? void 0 : itemActionComponent.props) || {};
+    const actions = React.Children.toArray(actionsChildren);
+    const hasActions = actions.length > 0;
+    React.useEffect(() => {
+        setHasInLayoutActions(hasActions);
+        return () => {
+            setHasInLayoutActions(false);
+        };
+    }, []);
+    if (!hasActions)
+        return null;
+    return (React__default["default"].createElement(DataListLayoutActionsWrapper, null,
+        React__default["default"].createElement(DataListItemActionsOverflow, { actions: actions, item: activeItem })));
+}
+function DataListLayoutActionsWrapper({ children }) {
+    const { isInLayoutProvider } = useDataListLayoutContext();
+    if (isInLayoutProvider)
+        return React__default["default"].createElement(React__default["default"].Fragment, null, 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 })), {});
@@ -862,21 +920,21 @@ function InternalDataList() {
     const initialLoading = loadingState === "initial";
     const showEmptyState = !initialLoading && data.length === 0;
     const shouldRenderLoadMoreTrigger = !initialLoading && !showEmptyState;
-    return (React__default["default"].createElement("div", { className: styles$d.wrapper },
-        React__default["default"].createElement("div", { className: styles$d.titleContainer },
+    return (React__default["default"].createElement("div", { className: styles$e.wrapper },
+        React__default["default"].createElement("div", { className: styles$e.titleContainer },
             title && React__default["default"].createElement(Heading.Heading, { level: 3 }, title),
             React__default["default"].createElement(DataListTotalCount, { totalCount: totalCount, loading: initialLoading })),
         React__default["default"].createElement("div", { ref: backToTopRef }),
         React__default["default"].createElement(DataListStickyHeader, null,
-            React__default["default"].createElement("div", { className: styles$d.headerFilters },
+            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 })),
         showEmptyState && React__default["default"].createElement(InternalDataListEmptyState, null),
         !initialLoading && (React__default["default"].createElement(DataListItems, { data: data, layouts: layoutComponents, mediaMatches: mediaMatches })),
-        loadingState === "filtering" && (React__default["default"].createElement("div", { "data-testid": DATA_LIST_FILTERING_SPINNER_TEST_ID, className: styles$d.filtering },
-            React__default["default"].createElement("div", { className: styles$d.filteringSpinner },
+        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" })))),
         shouldRenderLoadMoreTrigger && (React__default["default"].createElement(DataListLoadMore, { onBackToTop: handleBackToTop }))));
     function handleBackToTop() {
@@ -892,11 +950,36 @@ function InternalDataList() {
         });
     }
 }
+/**
+ * Sets the layout that the DataList item and header will use.
+ */
 DataList.Layout = DataListLayout;
+/**
+ * By using this component, we can render the actions anywhere in the layout
+ * instead of being added automatically on hover.
+ */
+DataList.LayoutActions = DataListLayoutActions;
+/**
+ * When the DataList is either empty and/or filtered, this component will be
+ * rendered.
+ */
 DataList.EmptyState = DataListEmptyState;
+/**
+ * Adds the filter components of your choosing to the DataList.
+ */
 DataList.Filters = DataListFilters;
+/**
+ * Enables the search functionality of the DataList.
+ */
 DataList.Search = DataListSearch;
+/**
+ * Defines the group actions you could do on a single DataList item.
+ */
 DataList.ItemActions = DataListItemActions;
+/**
+ * Defines the action in a DataList. This should be used inside the
+ * DataListItemActions component.
+ */
 DataList.Action = DataListAction;
 
 exports.DataList = DataList;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "4.41.0",
+  "version": "4.42.1",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -84,5 +84,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "43230912b7cb5c6e144d2d44331dfcc904f6e4ec"
+  "gitHead": "e46abe091488d7bacf653ac8fd7ffb73b575e8aa"
 }