@jobber/components 4.42.0 → 4.43.0

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

@@ -1,5 +1,6 @@
 import { ReactElement, ReactNode } from "react";
 import { IconNames } from "@jobber/design";
+import { XOR } from "ts-xor";
 import { Breakpoints } from "./DataList.const";
 import { ButtonProps } from "../Button";
 export { Breakpoints } from "./DataList.const";
@@ -148,9 +149,8 @@ export interface DataListContextProps<T extends DataListObject> extends DataList
     readonly layoutComponents?: ReactElement<DataListLayoutProps<T>>[];
     readonly itemActionComponent?: ReactElement<DataListItemActionsProps<T>>;
 }
-export interface DataListLayoutContextProps<T extends DataListObject> {
+export interface DataListLayoutContextProps {
     readonly isInLayoutProvider: boolean;
-    readonly activeItem?: T;
     /**
      * 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
@@ -159,14 +159,36 @@ export interface DataListLayoutContextProps<T extends DataListObject> {
     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> {
+interface BaseDataListItemActionsProps<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>>>;
+    /**
+     * Callback when an item is clicked.
+     */
+    readonly onClick?: (item: T) => void;
+}
+interface DataListItemActionsPropsWithURL<T extends DataListObject> extends BaseDataListItemActionsProps<T> {
+    /**
+     * If a normal page navigation is needed, use this prop to change the element
+     * to an `a` tag with an `href`.
+     */
+    readonly url?: string | ((item: T) => string);
+}
+interface DataListItemActionsPropsWithTo<T extends DataListObject> extends BaseDataListItemActionsProps<T> {
+    /**
+     * If a React Navigation is needed, use this prop to use the `Link` component
+     * that comes with React Router.
+     */
+    readonly to?: string | ((item: T) => string);
 }
+export type DataListItemActionsProps<T extends DataListObject> = XOR<DataListItemActionsPropsWithURL<T>, DataListItemActionsPropsWithTo<T>>;
 export interface DataListActionProps<T extends DataListObject> {
     /**
      * The label of the action

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/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/components/DataListItemClickable/DataListItemClickable.d.ts

@@ -0,0 +1,2 @@
+import { PropsWithChildren } from "react";
+export declare function DataListItemClickable({ children }: PropsWithChildren<object>): JSX.Element;

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

@@ -0,0 +1,3 @@
+import { PropsWithChildren } from "react";
+import { DataListItemActionsProps, DataListObject } from "@jobber/components/DataList/DataList.types";
+export declare function DataListItemClickableInternal<T extends DataListObject>({ onClick, url, to, children, }: PropsWithChildren<Pick<DataListItemActionsProps<T>, "onClick" | "url" | "to">>): JSX.Element;

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

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

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

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

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

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

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<T extends DataListObject>(): DataListLayoutActionsContextProps<T>;

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

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

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/DataListLayoutContext/DataListLayoutContext.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { DataListLayoutContextProps, DataListObject } from "../../DataList.types";
-export declare const defaultValues: DataListLayoutContextProps<DataListObject>;
-export declare const DataListLayoutContext: import("react").Context<DataListLayoutContextProps<DataListObject>>;
-export declare function useDataListLayoutContext(): DataListLayoutContextProps<DataListObject>;
+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/index.js

@@ -9,17 +9,11 @@ var Text = require('../Text-e7ed0974.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-fd8413b2.js');
 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');
-require('react-router-dom');
-var Button = require('../Button-fd8413b2.js');
 var ReactDOM = require('react-dom');
 var Tooltip = require('../Tooltip-bf67fe6e.js');
 require('react-popper');
@@ -27,7 +21,14 @@ 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 noop = require('lodash/noop');
+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');
@@ -50,12 +51,13 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
-var isEmpty__default = /*#__PURE__*/_interopDefaultLegacy(isEmpty);
 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$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-"};
+var css_248z$e = ".TkdrExYnvcY-,\n.TkdrExYnvcY- * {\n  box-sizing: border-box;\n}\n\n.TkdrExYnvcY- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n      flex-direction: column;\n  position: relative;\n  z-index: 0;\n  z-index: var(--elevation-default);\n  -ms-flex: 1;\n      flex: 1;\n}\n\n/*\n * Header\n */\n\n.IcAlZHoB4LI- {\n  display: -ms-flexbox;\n  display: flex;\n  position: relative;\n  z-index: 1;\n  z-index: var(--elevation-base);\n  margin-bottom: calc(16px / 2);\n  margin-bottom: var(--space-small);\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n.TFO76ysivmg- {\n  display: grid;\n  padding: calc(16px / 2) 0;\n  padding: var(--space-small) 0;\n  gap: calc(16px / 2);\n  grid-gap: calc(16px / 2);\n  grid-gap: var(--space-small);\n  gap: var(--space-small);\n  grid-template-columns: auto -webkit-max-content;\n  grid-template-columns: auto max-content;\n}\n\n.jGHZZYZm1ZY- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n      flex-direction: column;\n  -ms-flex-pack: center;\n      justify-content: center;\n  min-height: calc(16px * 3);\n  min-height: var(--space-largest);\n  padding: calc(16px / 2);\n  padding: var(--space-small);\n  border-bottom: calc(16px / 8) solid rgb(225, 225, 225);\n  border-bottom: var(--border-thick) solid var(--color-border);\n}\n\n.jMSVGIAr5tk- > p {\n  font-weight: 500;\n}\n\n.jMSVGIAr5tk- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n      align-items: center;\n  gap: calc(16px / 4);\n  gap: var(--space-smaller);\n  margin: calc((16px / 2) * -1) 0;\n  margin: calc(calc(16px / 2) * -1) 0;\n  margin: calc(var(--space-small) * -1) 0;\n}\n\n/*\n * List Item\n */\n\n.ise8kHCfhCY- {\n  position: relative;\n  padding: calc(16px / 2);\n  padding: var(--space-small);\n  border-bottom: calc(16px / 16) solid rgb(225, 225, 225);\n  border-bottom: var(--border-base) solid var(--color-border);\n  transition: all 200ms;\n  transition: all var(--timing-base);\n}\n\n.ise8kHCfhCY-.Pc0JGX6jCD4-,\n.ise8kHCfhCY-:hover,\n.ise8kHCfhCY-:focus-within {\n  --data-list-item-active-color: var(--color-surface--background);\n  background-color: rgb(244, 244, 244);\n  background-color: var(--data-list-item-active-color);\n}\n\n.Tq6e0BGwcSM- {\n  display: block;\n  margin: calc((16px / 2) * -1) 0;\n  margin: calc(calc(16px / 2) * -1) 0;\n  margin: calc(var(--space-small) * -1) 0;\n  padding: calc(16px / 2) 0;\n  padding: var(--space-small) 0;\n  border: none;\n  text-align: left;\n  -webkit-text-decoration: none;\n  text-decoration: none;\n  background-color: transparent;\n  cursor: pointer;\n}\n\n/**\n * Enable a better hover and focus experience when :has() is supported.\n * This is a workaround for Firefox where the :has() selector is not supported.\n */\n\n@supports selector(*:has(*)) {\n  .ise8kHCfhCY-:hover,\n  .ise8kHCfhCY-:focus-within {\n    background-color: transparent;\n  }\n\n  .ise8kHCfhCY-:has(.Tq6e0BGwcSM-:hover, .Tq6e0BGwcSM-:focus) {\n    background-color: var(--data-list-item-active-color);\n  }\n}\n\n/*\n * List Item Selection\n */\n\n.d-79rkMqufg- {\n  display: grid;\n  -ms-flex-align: start;\n      align-items: flex-start;\n}\n\n@media (min-width: 768px) {\n\n.d-79rkMqufg- {\n    -ms-flex-align: center;\n        align-items: center;\n}\n  }\n\n@media (--medium-screens-and-up) {\n\n.d-79rkMqufg- {\n    -ms-flex-align: center;\n        align-items: center;\n}\n  }\n\n.d-79rkMqufg-,\n.jGHZZYZm1ZY- .d-79rkMqufg- {\n  grid-template-columns: -webkit-max-content minmax(0px, auto);\n  grid-template-columns: max-content minmax(0px, auto);\n  -webkit-column-gap: calc(16px / 2);\n  -webkit-column-gap: var(--space-small);\n     -moz-column-gap: calc(16px / 2);\n     -moz-column-gap: var(--space-small);\n          column-gap: calc(16px / 2);\n          column-gap: var(--space-small);\n}\n\n.jGHZZYZm1ZY- .d-79rkMqufg- {\n  display: grid;\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n.qm-SSuWTXkI- {\n  display: -ms-flexbox;\n  display: flex;\n  visibility: hidden;\n}\n\n.qm-SSuWTXkI-.VA9RnQp6nbI- {\n  visibility: visible;\n}\n\n.ise8kHCfhCY- .d-79rkMqufg- > :first-child {\n  -ms-flex-order: 2;\n      order: 2;\n}\n\n.ise8kHCfhCY- .d-79rkMqufg- > :last-child {\n  -ms-flex-order: 1;\n      order: 1;\n  padding-top: calc(16px / 4);\n  padding-top: var(--space-smaller);\n  opacity: 1;\n  transition: opacity 100ms ease-in-out;\n  transition: opacity var(--transition-properties);\n  --transition-properties: var(--timing-quick) ease-in-out;\n}\n\n@media (min-width: 768px) {\n\n.ise8kHCfhCY- .d-79rkMqufg- > :last-child {\n    padding-top: 0;\n    opacity: 0;\n}\n  }\n\n@media (--medium-screens-and-up) {\n\n.ise8kHCfhCY- .d-79rkMqufg- > :last-child {\n    padding-top: 0;\n    opacity: 0;\n}\n  }\n\n.ise8kHCfhCY-:hover .d-79rkMqufg- > :last-child,\n.ise8kHCfhCY-:focus-within .d-79rkMqufg- > :last-child,\n.ise8kHCfhCY- .d-79rkMqufg-._4L7iXXzLr5k- > :last-child {\n  opacity: 1;\n}\n\n/*\n * Filters\n */\n\n.Kkp-IYmwq-s- {\n  display: -ms-flexbox;\n  display: flex;\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background-color: rgba(255, 255, 255, 0.6);\n  background-color: var(--color-overlay--dimmed);\n  -ms-flex-align: start;\n      align-items: flex-start;\n  -ms-flex-pack: center;\n      justify-content: center;\n}\n\n.m-eCShL7TU4- {\n  position: sticky;\n  top: 50vh;\n}\n";
+var styles$e = {"wrapper":"TkdrExYnvcY-","titleContainer":"IcAlZHoB4LI-","headerFilters":"TFO76ysivmg-","headerTitles":"jGHZZYZm1ZY-","headerBatchSelect":"jMSVGIAr5tk-","listItem":"ise8kHCfhCY-","active":"Pc0JGX6jCD4-","listItemClickable":"Tq6e0BGwcSM-","selectable":"d-79rkMqufg-","selectAllCheckbox":"qm-SSuWTXkI-","visible":"VA9RnQp6nbI-","selected":"_4L7iXXzLr5k-","filtering":"Kkp-IYmwq-s-","filteringSpinner":"m-eCShL7TU4-"};
 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";
@@ -83,6 +85,53 @@ var css_248z$c = ".Rh--6fVpkm4- {\n  padding: calc(16px / 2);\n  padding: var(--
 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 = ".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: 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$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";
@@ -104,9 +153,166 @@ 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$b = ".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$b = {"tags":"WRV-UmQmPzo-","tagCount":"liQeWCMenD0-"};
-styleInject_es.styleInject(css_248z$b);
+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$9.menu, style: getPositionCssVars(), onClick: onRequestClose }, children),
+        React__default["default"].createElement("button", { className: styles$9.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 = 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,
+            }) },
+            children,
+            React__default["default"].createElement(Checkbox.Checkbox, { checked: selected === null || selected === void 0 ? void 0 : selected.includes(item.id), onChange: handleChange })));
+    }
+    return children;
+    function handleChange() {
+        if (selected === null || selected === void 0 ? void 0 : selected.includes(item.id)) {
+            onSelect === null || onSelect === void 0 ? void 0 : onSelect(selected === null || selected === void 0 ? void 0 : selected.filter(id => id !== item.id));
+        }
+        else if (selected) {
+            onSelect === null || onSelect === void 0 ? void 0 : onSelect([...selected, item.id]);
+        }
+    }
+}
+
+function DataListItemClickableInternal({ onClick, url, to, children, }) {
+    const { activeItem } = useDataListLayoutActionsContext();
+    if (!activeItem)
+        return React__default["default"].createElement(React__default["default"].Fragment, null, children);
+    if (to) {
+        const computedTo = typeof to === "string" ? to : to(activeItem);
+        return (React__default["default"].createElement(reactRouterDom.Link, { className: styles__default["default"].listItemClickable, to: computedTo, onClick: handleClick }, children));
+    }
+    if (url) {
+        const href = typeof url === "string" ? url : url(activeItem);
+        return (React__default["default"].createElement("a", { className: styles__default["default"].listItemClickable, href: href, onClick: handleClick }, children));
+    }
+    if (onClick) {
+        return (React__default["default"].createElement("button", { className: styles__default["default"].listItemClickable, onClick: handleClick }, children));
+    }
+    return React__default["default"].createElement(React__default["default"].Fragment, null, children);
+    function handleClick() {
+        activeItem && (onClick === null || onClick === void 0 ? void 0 : onClick(activeItem));
+    }
+}
+
+function DataListItemClickable({ children }) {
+    const { itemActionComponent } = useDataListContext();
+    if (itemActionComponent) {
+        const props = itemActionComponent.props;
+        return (React__default["default"].createElement(DataListItemClickableInternal, Object.assign({}, props), children));
+    }
+    return React__default["default"].createElement(React__default["default"].Fragment, null, children);
+}
+
+var css_248z$8 = ".WRV-UmQmPzo- {\n  display: -ms-flexbox;\n  display: flex;\n  position: relative;\n  z-index: 0;\n  z-index: var(--elevation-default);\n  overflow: hidden;\n  gap: calc(16px / 2);\n  gap: var(--space-small);\n}\n\n.liQeWCMenD0- {\n  --overflow-bg: var(--data-list-item-active-color, var(--color-surface));\n\n  display: -ms-flexbox;\n\n  display: flex;\n  position: absolute;\n  top: 0;\n  right: 0;\n  height: 100%;\n  padding-left: calc(16px * 1);\n  padding-left: var(--space-base);\n  background-image: linear-gradient(\n    90deg,\n    transparent 0,\n    rgba(255, 255, 255, 1) calc(16px * 1),\n    rgba(255, 255, 255, 1) 100%\n  );\n  background-image: linear-gradient(\n    90deg,\n    transparent 0,\n    var(--overflow-bg) var(--space-base),\n    var(--overflow-bg) 100%\n  );\n  -ms-flex-align: center;\n      align-items: center;\n  transition: all 200ms;\n  transition: all var(--timing-base);\n}\n";
+var styles$8 = {"tags":"WRV-UmQmPzo-","tagCount":"liQeWCMenD0-"};
+styleInject_es.styleInject(css_248z$8);
 
 function DataListTags({ items }) {
     const ref = React.useRef(null);
@@ -126,10 +332,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$b.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$b.tagCount },
+        Boolean(visibleItems) && (React__default["default"].createElement("div", { className: styles$8.tagCount },
             React__default["default"].createElement(Text.Text, null,
                 "+",
                 visibleItems)))));
@@ -158,44 +364,32 @@ function buildIntersectionThreshold(items) {
     return thresholds;
 }
 
-var css_248z$a = ".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$a = {"headerLabel":"fLmJZJJqMcE-","sortable":"UG8cHUT3Hds-"};
-styleInject_es.styleInject(css_248z$a);
+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$9 = ".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$9 = {"sortIcon":"AN5egORYy-0-","active":"F1uTDCK0Sb0-","inactive":"_6KYeQXWXLQ8-"};
-styleInject_es.styleInject(css_248z$9);
+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$9.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$9.active : styles$9.inactive;
+        return order === targetOrder ? styles$6.active : styles$6.inactive;
     }
 }
 
-const defaultValues$1 = {
-    title: "",
-    data: [],
-    headers: {},
-    children: [],
-    selected: [],
-};
-const DataListContext = React.createContext(defaultValues$1);
-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$a.headerLabel, {
-            [styles$a.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 }))));
@@ -234,10 +428,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;
@@ -259,7 +453,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
@@ -272,6 +466,42 @@ 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, onFocus: handleShowMenu, onBlur: 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 },
+                React__default["default"].createElement(DataListItemClickable, null, 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 => {
@@ -304,216 +534,14 @@ 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$e.selectable, {
-                [styles$e.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 = ".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$8 = {"menu":"jHcHGQ-HDbk-"};
-styleInject_es.styleInject(css_248z$8);
-
-var css_248z$7 = ".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$7 = {"action":"iyg43v-S9yU-","label":"AUJNqz93ZDA-"};
-styleInject_es.styleInject(css_248z$7);
-
-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$7.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$7.label }, label))));
-}
-
-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: 6;\n  z-index: var(--elevation-menu);\n  width: 100%;\n  height: 100%;\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(React__default["default"].Fragment, null,
-        React__default["default"].createElement("div", { className: styles$6.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$6.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$8.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 defaultValues = {
-    isInLayoutProvider: false,
-    hasInLayoutActions: false,
-    setHasInLayoutActions: noop__default["default"],
-};
-const DataListLayoutContext = React.createContext(defaultValues);
-function useDataListLayoutContext() {
-    return React.useContext(DataListLayoutContext);
-}
-
 function DataListItems({ layouts, mediaMatches, data, }) {
-    const { itemActionComponent } = useDataListContext();
-    const elementData = React.useMemo(() => generateListItemElements(data), [data]);
     const [hasInLayoutActions, setHasInLayoutActions] = React.useState(false);
-    const [activeID, setActiveID] = React.useState();
-    const [activeItem, setActiveItem] = 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(DataListLayoutContext.Provider, { value: {
             isInLayoutProvider: true,
             hasInLayoutActions,
             setHasInLayoutActions,
-            activeItem,
         } },
-        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", { 
-                    // Set the active item whenever the element or any of its
-                    // children are clicked
-                    onClick: handleSetActiveItem(item), onMouseEnter: handleSetActiveItem(item), onMouseLeave: handleUnsetActiveItem, onContextMenu: handleContextMenu, className: classnames__default["default"](styles$e.listItem, {
-                        [styles$e.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,
-                        activeID === item.id && !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 handleSetActiveItem(item) {
-        return () => {
-            setActiveID(item.id);
-            setActiveItem(item);
-        };
-    }
-    function handleUnsetActiveItem() {
-        if (isContextMenuVisible)
-            return;
-        setActiveID(undefined);
-        setActiveItem(undefined);
-    }
-    function handleContextMenu(event) {
-        if (!contextMenuActions || isContextMenuVisible)
-            return;
-        event.preventDefault();
-        setContextPosition({
-            x: event.clientX,
-            y: event.clientY,
-        });
-    }
+        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 }) {
@@ -849,7 +877,8 @@ styleInject_es.styleInject(css_248z);
 
 function DataListLayoutActions() {
     const { itemActionComponent } = useDataListContext();
-    const { setHasInLayoutActions, activeItem } = useDataListLayoutContext();
+    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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "4.42.0",
+  "version": "4.43.0",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -21,7 +21,7 @@
   "dependencies": {
     "@jobber/design": "^0.45.0",
     "@jobber/formatters": "*",
-    "@jobber/hooks": "^2.3.0",
+    "@jobber/hooks": "^2.4.0",
     "@popperjs/core": "^2.0.6",
     "@std-proposal/temporal": "0.0.1",
     "@tanstack/react-table": "8.5.13",
@@ -84,5 +84,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "685c933bb0a179c249ae5207070afe579efe55b5"
+  "gitHead": "f9530a9ef052c5a914c9c9270260b372b720ecf4"
 }