@jobber/components 4.85.4-CJS-to-ESM.2 → 4.85.4-CJS-to-ESM.5

package/dist/DataListHeaderTile-4b93f949.js

@@ -0,0 +1,91 @@
+'use strict';
+
+var React = require('react');
+var classnames = require('classnames');
+var useFocusTrap = require('@jobber/hooks/useFocusTrap');
+var useRefocusOnActivator = require('@jobber/hooks/useRefocusOnActivator');
+var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
+var DataListSortingOptions = require('./DataListSortingOptions-4694941c.js');
+var Text = require('./Text-259af966.js');
+var DataListContext = require('./DataListContext-f40570a7.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
+
+var css_248z$1 = ".fLmJZJJqMcE- {\n  display: -ms-flexbox;\n  display: flex;\n  position: relative;\n  -ms-flex-align: center;\n      align-items: center;\n  padding: 0;\n  border: none;\n  background-color: transparent;\n}\n\n.fLmJZJJqMcE-:focus,\n.fLmJZJJqMcE-:focus-visible {\n  outline: none;\n}\n\n.fLmJZJJqMcE-:focus-visible {\n  box-shadow: 0px 0px 0px calc(16px / 8) rgba(255, 255, 255, 1),\n    0px 0px 0px calc(16px / 4) rgb(147, 161, 169);\n  box-shadow: var(--shadow-focus);\n}\n\n.UG8cHUT3Hds- {\n  cursor: pointer;\n}\n";
+var styles$1 = {"headerLabel":"fLmJZJJqMcE-","sortable":"UG8cHUT3Hds-"};
+styleInject_es.styleInject(css_248z$1);
+
+var css_248z = ".AN5egORYy-0- {\n  width: calc(16px * 1.5);\n  width: var(--space-large);\n  height: calc(16px * 1.5);\n  height: var(--space-large);\n  margin-right: calc(16px / 2);\n  margin-right: var(--space-small);\n}\n\n.AN5egORYy-0- path {\n  fill: rgba(101, 120, 132, 1);\n  fill: var(--color-interactive--subtle);\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-heading);\n}\n\n.AN5egORYy-0- path._6KYeQXWXLQ8- {\n  fill: rgb(217, 223, 225);\n  fill: var(--color-inactive--surface);\n}\n\n.AN5egORYy-0-:hover path {\n  fill: rgba(101, 120, 132, 1);\n  fill: var(--color-interactive--subtle);\n  transition: all 200ms ease;\n  transition: all var(--timing-base) ease;\n}\n";
+var styles = {"sortIcon":"AN5egORYy-0-","active":"F1uTDCK0Sb0-","inactive":"_6KYeQXWXLQ8-"};
+styleInject_es.styleInject(css_248z);
+
+const SORTING_ICON_TEST_ID = "ATL-DataList-Sorting-Icon";
+function DataListSortingArrows({ order }) {
+    return (React__default["default"].createElement("div", { className: styles.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.active : styles.inactive;
+    }
+}
+
+/* eslint-disable max-statements */
+function DataListHeaderTile({ headers, headerKey, visible = false, }) {
+    useRefocusOnActivator.useRefocusOnActivator(visible);
+    const { sorting } = DataListContext.useDataListContext();
+    const [isDropDownOpen, setIsDropDownOpen] = React.useState(false);
+    const optionsListRef = useFocusTrap.useFocusTrap(isDropDownOpen);
+    const dataListHeaderTileRef = React.useRef(null);
+    const sortableItem = sorting === null || sorting === void 0 ? void 0 : sorting.sortable.find(item => item.key === headerKey);
+    const isSortable = Boolean(sortableItem);
+    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$1.headerLabel, {
+            [styles$1.sortable]: isSortable,
+        }), onClick: handleOnClick, ref: dataListHeaderTileRef },
+        React__default["default"].createElement(Text.Text, { maxLines: "single" }, headers[headerKey]),
+        isSortable && (sortableItem === null || sortableItem === void 0 ? void 0 : sortableItem.options) && isDropDownOpen && (React__default["default"].createElement(DataListSortingOptions.DataListSortingOptions, { options: sortableItem.options, selectedOption: (sorting === null || sorting === void 0 ? void 0 : sorting.state) || null, onSelectChange: handleSelectChange, onClose: () => setIsDropDownOpen(false), optionsListRef: optionsListRef, dataListHeaderTileRef: dataListHeaderTileRef })),
+        isSortable && (React__default["default"].createElement(DataListSortingArrows, { order: (sortingState === null || sortingState === void 0 ? void 0 : sortingState.key) === headerKey ? sortingState.order : "none" }))));
+    function toggleSorting(newSortingKey, newId, newLabel) {
+        const isSameKey = newSortingKey === (sortingState === null || sortingState === void 0 ? void 0 : sortingState.key);
+        const isDescending = (sortingState === null || sortingState === void 0 ? void 0 : sortingState.order) === "desc";
+        if (isSameKey && isDescending) {
+            sorting === null || sorting === void 0 ? void 0 : sorting.onSort(undefined);
+            return;
+        }
+        const sortingOrder = isSameKey ? "desc" : "asc";
+        setSorting(newSortingKey, newId, newLabel, sortingOrder);
+    }
+    function setSorting(newSortingKey, newId, newLabel, newOrder) {
+        sorting === null || sorting === void 0 ? void 0 : sorting.onSort({
+            key: newSortingKey,
+            id: newId,
+            label: newLabel,
+            order: newOrder,
+        });
+    }
+    function handleOnClick() {
+        var _a, _b;
+        if (!isSortable)
+            return;
+        if (sortableItem === null || sortableItem === void 0 ? void 0 : sortableItem.options) {
+            setIsDropDownOpen(!isDropDownOpen);
+        }
+        else {
+            const id = ((_b = (_a = sortableItem === null || sortableItem === void 0 ? void 0 : sortableItem.options) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.id) || headerKey;
+            toggleSorting(id, headerKey, headers[headerKey]);
+        }
+    }
+    function handleSelectChange(newSortOption) {
+        if (sortableItem) {
+            setSorting(sortableItem.key, newSortOption.id, newSortOption.label, newSortOption.order);
+        }
+        setIsDropDownOpen(true);
+    }
+}
+
+exports.DataListHeaderTile = DataListHeaderTile;

package/dist/DataListHeaderTile-8854e4d8.js

@@ -0,0 +1,84 @@
+import React, { useState, useRef } from 'react';
+import classnames from 'classnames';
+import { useFocusTrap } from '@jobber/hooks/useFocusTrap';
+import { useRefocusOnActivator } from '@jobber/hooks/useRefocusOnActivator';
+import { s as styleInject } from './style-inject.es-a0e1a0ba.js';
+import { D as DataListSortingOptions } from './DataListSortingOptions-8a64205a.js';
+import { T as Text } from './Text-c9162504.js';
+import { u as useDataListContext } from './DataListContext-736a42a2.js';
+
+var css_248z$1 = ".fLmJZJJqMcE- {\n  display: -ms-flexbox;\n  display: flex;\n  position: relative;\n  -ms-flex-align: center;\n      align-items: center;\n  padding: 0;\n  border: none;\n  background-color: transparent;\n}\n\n.fLmJZJJqMcE-:focus,\n.fLmJZJJqMcE-:focus-visible {\n  outline: none;\n}\n\n.fLmJZJJqMcE-:focus-visible {\n  box-shadow: 0px 0px 0px calc(16px / 8) rgba(255, 255, 255, 1),\n    0px 0px 0px calc(16px / 4) rgb(147, 161, 169);\n  box-shadow: var(--shadow-focus);\n}\n\n.UG8cHUT3Hds- {\n  cursor: pointer;\n}\n";
+var styles$1 = {"headerLabel":"fLmJZJJqMcE-","sortable":"UG8cHUT3Hds-"};
+styleInject(css_248z$1);
+
+var css_248z = ".AN5egORYy-0- {\n  width: calc(16px * 1.5);\n  width: var(--space-large);\n  height: calc(16px * 1.5);\n  height: var(--space-large);\n  margin-right: calc(16px / 2);\n  margin-right: var(--space-small);\n}\n\n.AN5egORYy-0- path {\n  fill: rgba(101, 120, 132, 1);\n  fill: var(--color-interactive--subtle);\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-heading);\n}\n\n.AN5egORYy-0- path._6KYeQXWXLQ8- {\n  fill: rgb(217, 223, 225);\n  fill: var(--color-inactive--surface);\n}\n\n.AN5egORYy-0-:hover path {\n  fill: rgba(101, 120, 132, 1);\n  fill: var(--color-interactive--subtle);\n  transition: all 200ms ease;\n  transition: all var(--timing-base) ease;\n}\n";
+var styles = {"sortIcon":"AN5egORYy-0-","active":"F1uTDCK0Sb0-","inactive":"_6KYeQXWXLQ8-"};
+styleInject(css_248z);
+
+const SORTING_ICON_TEST_ID = "ATL-DataList-Sorting-Icon";
+function DataListSortingArrows({ order }) {
+    return (React.createElement("div", { className: styles.sortIcon, "data-testid": SORTING_ICON_TEST_ID },
+        React.createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+            React.createElement("path", { className: getActiveClassName("asc"), d: "M16.2929 10.6661C15.9024 11.0566 15.2692 11.0566 14.8787 10.6661L12.2891 8.14263L9.70711 10.6661C9.31658 11.0566 8.68342 11.0566 8.29289 10.6661C7.90237 10.2756 7.90237 9.64239 8.29289 9.25186L11.5858 5.95897C11.9763 5.56845 12.6095 5.56845 13 5.95897L16.2929 9.25186C16.6834 9.64239 16.6834 10.2756 16.2929 10.6661Z" }),
+            React.createElement("path", { className: getActiveClassName("desc"), d: "M8.29292 13.3339C8.68345 12.9434 9.31661 12.9434 9.70714 13.3339L12.2968 15.8573L14.8787 13.3339C15.2692 12.9434 15.9024 12.9434 16.2929 13.3339C16.6834 13.7244 16.6834 14.3576 16.2929 14.7481L13 18.041C12.6095 18.4315 11.9763 18.4315 11.5858 18.041L8.29292 14.7481C7.9024 14.3576 7.9024 13.7244 8.29292 13.3339Z" }))));
+    function getActiveClassName(targetOrder) {
+        return order === targetOrder ? styles.active : styles.inactive;
+    }
+}
+
+/* eslint-disable max-statements */
+function DataListHeaderTile({ headers, headerKey, visible = false, }) {
+    useRefocusOnActivator(visible);
+    const { sorting } = useDataListContext();
+    const [isDropDownOpen, setIsDropDownOpen] = useState(false);
+    const optionsListRef = useFocusTrap(isDropDownOpen);
+    const dataListHeaderTileRef = useRef(null);
+    const sortableItem = sorting === null || sorting === void 0 ? void 0 : sorting.sortable.find(item => item.key === headerKey);
+    const isSortable = Boolean(sortableItem);
+    const sortingState = sorting === null || sorting === void 0 ? void 0 : sorting.state;
+    const Tag = isSortable ? "button" : "div";
+    return (React.createElement(Tag, { className: classnames(styles$1.headerLabel, {
+            [styles$1.sortable]: isSortable,
+        }), onClick: handleOnClick, ref: dataListHeaderTileRef },
+        React.createElement(Text, { maxLines: "single" }, headers[headerKey]),
+        isSortable && (sortableItem === null || sortableItem === void 0 ? void 0 : sortableItem.options) && isDropDownOpen && (React.createElement(DataListSortingOptions, { options: sortableItem.options, selectedOption: (sorting === null || sorting === void 0 ? void 0 : sorting.state) || null, onSelectChange: handleSelectChange, onClose: () => setIsDropDownOpen(false), optionsListRef: optionsListRef, dataListHeaderTileRef: dataListHeaderTileRef })),
+        isSortable && (React.createElement(DataListSortingArrows, { order: (sortingState === null || sortingState === void 0 ? void 0 : sortingState.key) === headerKey ? sortingState.order : "none" }))));
+    function toggleSorting(newSortingKey, newId, newLabel) {
+        const isSameKey = newSortingKey === (sortingState === null || sortingState === void 0 ? void 0 : sortingState.key);
+        const isDescending = (sortingState === null || sortingState === void 0 ? void 0 : sortingState.order) === "desc";
+        if (isSameKey && isDescending) {
+            sorting === null || sorting === void 0 ? void 0 : sorting.onSort(undefined);
+            return;
+        }
+        const sortingOrder = isSameKey ? "desc" : "asc";
+        setSorting(newSortingKey, newId, newLabel, sortingOrder);
+    }
+    function setSorting(newSortingKey, newId, newLabel, newOrder) {
+        sorting === null || sorting === void 0 ? void 0 : sorting.onSort({
+            key: newSortingKey,
+            id: newId,
+            label: newLabel,
+            order: newOrder,
+        });
+    }
+    function handleOnClick() {
+        var _a, _b;
+        if (!isSortable)
+            return;
+        if (sortableItem === null || sortableItem === void 0 ? void 0 : sortableItem.options) {
+            setIsDropDownOpen(!isDropDownOpen);
+        }
+        else {
+            const id = ((_b = (_a = sortableItem === null || sortableItem === void 0 ? void 0 : sortableItem.options) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.id) || headerKey;
+            toggleSorting(id, headerKey, headers[headerKey]);
+        }
+    }
+    function handleSelectChange(newSortOption) {
+        if (sortableItem) {
+            setSorting(sortableItem.key, newSortOption.id, newSortOption.label, newSortOption.order);
+        }
+        setIsDropDownOpen(true);
+    }
+}
+
+export { DataListHeaderTile as D };

package/dist/DataListItem-3d39e2eb.js

@@ -0,0 +1,119 @@
+'use strict';
+
+var React = require('react');
+var framerMotion = require('framer-motion');
+var classnames = require('classnames');
+var DataListLayoutContext = require('./DataListLayoutContext-83df2a23.js');
+var DataListItemActions = require('./DataListItemActions-122d8972.js');
+var DataListActionsMenu = require('./DataListActionsMenu-cfcd5d21.js');
+var DataListLayoutContext$1 = require('./DataListLayoutContext-39a0d016.js');
+var DataList_utils = require('./DataList.utils-b72b8d0d.js');
+var Checkbox = require('./Checkbox-787e2e47.js');
+var useBatchSelect = require('./useBatchSelect-ac66c1cb.js');
+var DataList = require('./DataList-b5f0a522.js');
+var DataListItemClickable = require('./DataListItemClickable-abe0242c.js');
+var DataListContext = require('./DataListContext-f40570a7.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
+
+function DataListItemInternal({ children, item, }) {
+    const { canSelect, hasAtLeastOneSelected, isSelectAll, selectedIDs, selected, onSelect, } = useBatchSelect.useBatchSelect();
+    if (!canSelect)
+        return children;
+    return (React__default["default"].createElement("div", { className: classnames__default["default"](DataList.styles.selectable, {
+            [DataList.styles.selected]: hasAtLeastOneSelected,
+        }) },
+        children,
+        React__default["default"].createElement(Checkbox.Checkbox, { checked: getIsChecked(), onChange: handleChange })));
+    function getIsChecked() {
+        const isItemInSelectedIDs = selectedIDs.includes(item.id);
+        // If we're in a "select all" state, the selectedID's becomes a list of
+        // unchecked ID's.
+        if (isSelectAll)
+            return !isItemInSelectedIDs;
+        // Otherwise, we're in a "select some" state, so we can just check if the
+        // item is in the selectedIDs list.
+        return isItemInSelectedIDs;
+    }
+    function handleChange() {
+        if (isSelectAll)
+            return handleSelectAllChange();
+        return handleSelectSomeChange();
+    }
+    function handleSelectAllChange() {
+        if (!selected || Array.isArray(selected))
+            return;
+        if (selectedIDs === null || selectedIDs === void 0 ? void 0 : selectedIDs.includes(item.id)) {
+            onSelect === null || onSelect === void 0 ? void 0 : onSelect(Object.assign(Object.assign({}, selected), { unselected: selectedIDs === null || selectedIDs === void 0 ? void 0 : selectedIDs.filter(id => id !== item.id) }));
+        }
+        else if (selectedIDs) {
+            onSelect === null || onSelect === void 0 ? void 0 : onSelect(Object.assign(Object.assign({}, selected), { unselected: [...selectedIDs, item.id] }));
+        }
+    }
+    function handleSelectSomeChange() {
+        if (selectedIDs === null || selectedIDs === void 0 ? void 0 : selectedIDs.includes(item.id)) {
+            onSelect === null || onSelect === void 0 ? void 0 : onSelect(selectedIDs === null || selectedIDs === void 0 ? void 0 : selectedIDs.filter(id => id !== item.id));
+        }
+        else if (selectedIDs) {
+            onSelect === null || onSelect === void 0 ? void 0 : onSelect([...selectedIDs, item.id]);
+        }
+    }
+}
+
+function useGetItemActions(item) {
+    const { itemActionComponent } = DataListContext.useDataListContext();
+    const itemActions = (itemActionComponent === null || itemActionComponent === void 0 ? void 0 : itemActionComponent.props.children) || [];
+    const actionsArray = React.Children.toArray(itemActions);
+    const actions = React.useMemo(() => {
+        return actionsArray.filter(action => {
+            if (React.isValidElement(action) && action.props.visible) {
+                return action.props.visible(item);
+            }
+            return true;
+        });
+    }, [itemActionComponent === null || itemActionComponent === void 0 ? void 0 : itemActionComponent.props.children, item]);
+    return {
+        actions: actions,
+        hasActions: Boolean(actions.length),
+    };
+}
+
+// eslint-disable-next-line max-statements
+function DataListItem({ item, layout, }) {
+    const { hasInLayoutActions } = DataListLayoutContext.useDataListLayoutContext();
+    const [showMenu, setShowMenu] = React.useState(false);
+    const [contextPosition, setContextPosition] = React.useState();
+    const generatedItem = React.useMemo(() => DataList_utils.generateListItemElement(item), [item]);
+    const { actions, hasActions } = useGetItemActions(item);
+    const isContextMenuVisible = Boolean(contextPosition);
+    const shouldShowContextMenu = showMenu && isContextMenuVisible && hasActions;
+    return (React__default["default"].createElement(DataListLayoutContext$1.DataListLayoutActionsContext.Provider, { value: { activeItem: item } },
+        React__default["default"].createElement("div", { onMouseEnter: handleShowMenu, onMouseLeave: handleHideMenu, onFocus: handleShowMenu, onBlur: handleHideMenu, onContextMenu: handleContextMenu, className: classnames__default["default"](DataList.styles.listItem, {
+                [DataList.styles.active]: showMenu && isContextMenuVisible,
+            }), key: item.id },
+            React__default["default"].createElement(DataListItemInternal, { item: item },
+                React__default["default"].createElement(DataListItemClickable.DataListItemClickable, null, layout(generatedItem))),
+            React__default["default"].createElement(framerMotion.AnimatePresence, null,
+                showMenu && hasActions && !hasInLayoutActions && (React__default["default"].createElement(DataListItemActions.InternalDataListItemActions, { actions: actions })),
+                React__default["default"].createElement(DataListActionsMenu.DataListActionsMenu, { key: item.id, visible: shouldShowContextMenu, position: contextPosition || { x: 0, y: 0 }, onRequestClose: () => setContextPosition(undefined) }, actions)))));
+    function handleShowMenu() {
+        setShowMenu(true);
+    }
+    function handleHideMenu() {
+        setShowMenu(false);
+    }
+    function handleContextMenu(event) {
+        if (!hasActions || isContextMenuVisible)
+            return;
+        event.preventDefault();
+        setContextPosition({
+            x: event.clientX,
+            y: event.clientY,
+        });
+    }
+}
+
+exports.DataListItem = DataListItem;

package/dist/DataListItem-5cbf5f14.js

@@ -0,0 +1,112 @@
+import React, { Children, useMemo, isValidElement, useState } from 'react';
+import { AnimatePresence } from 'framer-motion';
+import classnames from 'classnames';
+import { u as useDataListLayoutContext } from './DataListLayoutContext-7daf863d.js';
+import { I as InternalDataListItemActions } from './DataListItemActions-c5749fdc.js';
+import { D as DataListActionsMenu } from './DataListActionsMenu-cce1bd30.js';
+import { D as DataListLayoutActionsContext } from './DataListLayoutContext-9237afd1.js';
+import { d as generateListItemElement } from './DataList.utils-d51eb44e.js';
+import { C as Checkbox } from './Checkbox-3ff9f47a.js';
+import { u as useBatchSelect } from './useBatchSelect-33acc2fc.js';
+import { s as styles } from './DataList-1e0e9426.js';
+import { D as DataListItemClickable } from './DataListItemClickable-127bfc7f.js';
+import { u as useDataListContext } from './DataListContext-736a42a2.js';
+
+function DataListItemInternal({ children, item, }) {
+    const { canSelect, hasAtLeastOneSelected, isSelectAll, selectedIDs, selected, onSelect, } = useBatchSelect();
+    if (!canSelect)
+        return children;
+    return (React.createElement("div", { className: classnames(styles.selectable, {
+            [styles.selected]: hasAtLeastOneSelected,
+        }) },
+        children,
+        React.createElement(Checkbox, { checked: getIsChecked(), onChange: handleChange })));
+    function getIsChecked() {
+        const isItemInSelectedIDs = selectedIDs.includes(item.id);
+        // If we're in a "select all" state, the selectedID's becomes a list of
+        // unchecked ID's.
+        if (isSelectAll)
+            return !isItemInSelectedIDs;
+        // Otherwise, we're in a "select some" state, so we can just check if the
+        // item is in the selectedIDs list.
+        return isItemInSelectedIDs;
+    }
+    function handleChange() {
+        if (isSelectAll)
+            return handleSelectAllChange();
+        return handleSelectSomeChange();
+    }
+    function handleSelectAllChange() {
+        if (!selected || Array.isArray(selected))
+            return;
+        if (selectedIDs === null || selectedIDs === void 0 ? void 0 : selectedIDs.includes(item.id)) {
+            onSelect === null || onSelect === void 0 ? void 0 : onSelect(Object.assign(Object.assign({}, selected), { unselected: selectedIDs === null || selectedIDs === void 0 ? void 0 : selectedIDs.filter(id => id !== item.id) }));
+        }
+        else if (selectedIDs) {
+            onSelect === null || onSelect === void 0 ? void 0 : onSelect(Object.assign(Object.assign({}, selected), { unselected: [...selectedIDs, item.id] }));
+        }
+    }
+    function handleSelectSomeChange() {
+        if (selectedIDs === null || selectedIDs === void 0 ? void 0 : selectedIDs.includes(item.id)) {
+            onSelect === null || onSelect === void 0 ? void 0 : onSelect(selectedIDs === null || selectedIDs === void 0 ? void 0 : selectedIDs.filter(id => id !== item.id));
+        }
+        else if (selectedIDs) {
+            onSelect === null || onSelect === void 0 ? void 0 : onSelect([...selectedIDs, item.id]);
+        }
+    }
+}
+
+function useGetItemActions(item) {
+    const { itemActionComponent } = useDataListContext();
+    const itemActions = (itemActionComponent === null || itemActionComponent === void 0 ? void 0 : itemActionComponent.props.children) || [];
+    const actionsArray = Children.toArray(itemActions);
+    const actions = useMemo(() => {
+        return actionsArray.filter(action => {
+            if (isValidElement(action) && action.props.visible) {
+                return action.props.visible(item);
+            }
+            return true;
+        });
+    }, [itemActionComponent === null || itemActionComponent === void 0 ? void 0 : itemActionComponent.props.children, item]);
+    return {
+        actions: actions,
+        hasActions: Boolean(actions.length),
+    };
+}
+
+// eslint-disable-next-line max-statements
+function DataListItem({ item, layout, }) {
+    const { hasInLayoutActions } = useDataListLayoutContext();
+    const [showMenu, setShowMenu] = useState(false);
+    const [contextPosition, setContextPosition] = useState();
+    const generatedItem = useMemo(() => generateListItemElement(item), [item]);
+    const { actions, hasActions } = useGetItemActions(item);
+    const isContextMenuVisible = Boolean(contextPosition);
+    const shouldShowContextMenu = showMenu && isContextMenuVisible && hasActions;
+    return (React.createElement(DataListLayoutActionsContext.Provider, { value: { activeItem: item } },
+        React.createElement("div", { onMouseEnter: handleShowMenu, onMouseLeave: handleHideMenu, onFocus: handleShowMenu, onBlur: handleHideMenu, onContextMenu: handleContextMenu, className: classnames(styles.listItem, {
+                [styles.active]: showMenu && isContextMenuVisible,
+            }), key: item.id },
+            React.createElement(DataListItemInternal, { item: item },
+                React.createElement(DataListItemClickable, null, layout(generatedItem))),
+            React.createElement(AnimatePresence, null,
+                showMenu && hasActions && !hasInLayoutActions && (React.createElement(InternalDataListItemActions, { actions: actions })),
+                React.createElement(DataListActionsMenu, { key: item.id, visible: shouldShowContextMenu, position: contextPosition || { x: 0, y: 0 }, onRequestClose: () => setContextPosition(undefined) }, actions)))));
+    function handleShowMenu() {
+        setShowMenu(true);
+    }
+    function handleHideMenu() {
+        setShowMenu(false);
+    }
+    function handleContextMenu(event) {
+        if (!hasActions || isContextMenuVisible)
+            return;
+        event.preventDefault();
+        setContextPosition({
+            x: event.clientX,
+            y: event.clientY,
+        });
+    }
+}
+
+export { DataListItem as D };

package/dist/DataListItemActions-122d8972.js

@@ -0,0 +1,39 @@
+'use strict';
+
+var React = require('react');
+var framerMotion = require('framer-motion');
+var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
+var DataList_const = require('./DataList.const-c05b47de.js');
+var DataListActions = require('./DataListActions-f8367eda.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var css_248z = ".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(217, 223, 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\n.jobber-retheme .jHcHGQ-HDbk- {\n  border-radius: calc(16px / 8);\n  border-radius: var(--radius-base);\n}\n";
+var styles = {"menu":"jHcHGQ-HDbk-"};
+styleInject_es.styleInject(css_248z);
+
+// 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({ actions, }) {
+    return (React__default["default"].createElement(framerMotion.motion.div, { variants: variants, initial: "hidden", animate: "visible", exit: "hidden", transition: {
+            duration: DataList_const.TRANSITION_DURATION_IN_SECONDS,
+            delay: DataList_const.TRANSITION_DELAY_IN_SECONDS,
+        }, className: styles.menu, onContextMenu: handleContextMenu },
+        React__default["default"].createElement(DataListActions.DataListActions, null, actions)));
+}
+function handleContextMenu(event) {
+    event.stopPropagation();
+}
+
+exports.DataListItemActions = DataListItemActions;
+exports.InternalDataListItemActions = InternalDataListItemActions;

package/dist/DataListItemActions-c5749fdc.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { s as styleInject } from './style-inject.es-a0e1a0ba.js';
+import { T as TRANSITION_DURATION_IN_SECONDS, f as TRANSITION_DELAY_IN_SECONDS } from './DataList.const-3ae7ceef.js';
+import { D as DataListActions } from './DataListActions-c5ad9b23.js';
+
+var css_248z = ".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(217, 223, 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\n.jobber-retheme .jHcHGQ-HDbk- {\n  border-radius: calc(16px / 8);\n  border-radius: var(--radius-base);\n}\n";
+var styles = {"menu":"jHcHGQ-HDbk-"};
+styleInject(css_248z);
+
+// 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({ actions, }) {
+    return (React.createElement(motion.div, { variants: variants, initial: "hidden", animate: "visible", exit: "hidden", transition: {
+            duration: TRANSITION_DURATION_IN_SECONDS,
+            delay: TRANSITION_DELAY_IN_SECONDS,
+        }, className: styles.menu, onContextMenu: handleContextMenu },
+        React.createElement(DataListActions, null, actions)));
+}
+function handleContextMenu(event) {
+    event.stopPropagation();
+}
+
+export { DataListItemActions as D, InternalDataListItemActions as I };

package/dist/DataListItemActionsOverflow-6004ba59.js

@@ -0,0 +1,33 @@
+import React, { useState } from 'react';
+import { B as Button } from './Button-9ae092b3.js';
+import { T as Tooltip } from './Tooltip-d1fc7e74.js';
+import { D as DataListActionsMenu } from './DataListActionsMenu-cce1bd30.js';
+
+function DataListItemActionsOverflow({ actions, }) {
+    const [menuPosition, setMenuPosition] = useState({ x: 0, y: 0 });
+    const [showMenu, setShowMenu] = useState(false);
+    if (actions.length === 0)
+        return null;
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Tooltip, { message: "More actions" },
+            React.createElement(Button, { icon: "more", ariaLabel: "More actions", type: "secondary", variation: "subtle", onClick: handleMoreClick })),
+        React.createElement(DataListActionsMenu, { visible: showMenu, position: menuPosition, onRequestClose: handleClose }, actions)));
+    function handleMoreClick(event) {
+        // Prevent firing the parent's onClick event when it is nested
+        // within a clickable list item
+        event.stopPropagation();
+        // Prevent navigating to the parent's href event when it is nested within a
+        // linked list item
+        event.preventDefault();
+        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);
+    }
+}
+
+export { DataListItemActionsOverflow as D };

package/dist/DataListItemActionsOverflow-9c491ed9.js

@@ -0,0 +1,39 @@
+'use strict';
+
+var React = require('react');
+var Button = require('./Button-b73a5e01.js');
+var Tooltip = require('./Tooltip-ef3d6ef4.js');
+var DataListActionsMenu = require('./DataListActionsMenu-cfcd5d21.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+function DataListItemActionsOverflow({ actions, }) {
+    const [menuPosition, setMenuPosition] = React.useState({ x: 0, y: 0 });
+    const [showMenu, setShowMenu] = React.useState(false);
+    if (actions.length === 0)
+        return null;
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement(Tooltip.Tooltip, { message: "More actions" },
+            React__default["default"].createElement(Button.Button, { icon: "more", ariaLabel: "More actions", type: "secondary", variation: "subtle", onClick: handleMoreClick })),
+        React__default["default"].createElement(DataListActionsMenu.DataListActionsMenu, { visible: showMenu, position: menuPosition, onRequestClose: handleClose }, actions)));
+    function handleMoreClick(event) {
+        // Prevent firing the parent's onClick event when it is nested
+        // within a clickable list item
+        event.stopPropagation();
+        // Prevent navigating to the parent's href event when it is nested within a
+        // linked list item
+        event.preventDefault();
+        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);
+    }
+}
+
+exports.DataListItemActionsOverflow = DataListItemActionsOverflow;

package/dist/DataListItemClickable-127bfc7f.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import { u as useDataListContext } from './DataListContext-736a42a2.js';
+import { Link } from 'react-router-dom';
+import { s as styles } from './DataList-1e0e9426.js';
+import { u as useDataListLayoutActionsContext } from './DataListLayoutContext-9237afd1.js';
+
+function DataListItemClickableInternal({ onClick, url, to, children, }) {
+    const { activeItem } = useDataListLayoutActionsContext();
+    if (!activeItem)
+        return React.createElement(React.Fragment, null, children);
+    if (to) {
+        const computedTo = typeof to === "string" ? to : to(activeItem);
+        return (React.createElement(Link, { className: styles.listItemClickable, to: computedTo, onClick: handleClick }, children));
+    }
+    if (url) {
+        const href = typeof url === "string" ? url : url(activeItem);
+        return (React.createElement("a", { className: styles.listItemClickable, href: href, onClick: handleClick }, children));
+    }
+    if (onClick) {
+        return (
+        // A button can be nested within the list item. To prevent a button inside
+        // button error, we need to manually declare a div to be a button
+        React.createElement("div", { role: "button", tabIndex: 0, className: styles.listItemClickable, onClick: handleClick, onKeyDown: e => {
+                if (e.key === "Enter" || e.key === " ") {
+                    e.preventDefault();
+                    handleClick();
+                }
+            } }, children));
+    }
+    return React.createElement(React.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.createElement(DataListItemClickableInternal, Object.assign({}, props), children));
+    }
+    return React.createElement(React.Fragment, null, children);
+}
+
+export { DataListItemClickable as D };