@jobber/components 4.92.0 → 5.0.1

package/dist/DataListActions-CIGEBlZS.js

@@ -0,0 +1,45 @@
+'use strict';
+
+var React = require('react');
+var Tooltip = require('./Tooltip-CJL2w6Tj.js');
+var Button = require('./Button-noDSqvxX.js');
+var DataListOverflowFade = require('./DataListOverflowFade-DMC17Az8.js');
+var DataList_utils = require('./DataList.utils-CMa3suIh.js');
+var DataListLayoutContext = require('./DataListLayoutContext-CRwE525R.js');
+var DataListItemActionsOverflow = require('./DataListItemActionsOverflow-Ca2DLUFZ.js');
+
+function DataListActions({ children, itemsToExpose = 2, }) {
+    const { activeItem } = DataListLayoutContext.useDataListLayoutActionsContext();
+    const childrenArray = React.Children.toArray(children).filter(React.isValidElement);
+    const exposedActions = DataList_utils.getExposedActions(childrenArray, itemsToExpose);
+    childrenArray.splice(0, exposedActions.length);
+    return (React.createElement(DataListOverflowFade.DataListOverflowFade, null,
+        exposedActions.map(({ props }) => {
+            if (props.visible && !props.visible(activeItem))
+                return null;
+            if (!props.icon)
+                return null;
+            function getActionLabel() {
+                if (typeof props.label === "string") {
+                    return props.label;
+                }
+                if (activeItem) {
+                    return props.label(activeItem);
+                }
+            }
+            const actionLabel = getActionLabel();
+            return (React.createElement(Tooltip.Tooltip, { key: actionLabel, message: actionLabel },
+                React.createElement(Button.Button, { icon: props.icon, ariaLabel: actionLabel, onClick: () => {
+                        var _a, _b;
+                        if (activeItem) {
+                            (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, activeItem);
+                        }
+                        else {
+                            (_b = props.onClick) === null || _b === void 0 ? void 0 : _b.call(props);
+                        }
+                    }, type: "secondary", variation: "subtle" })));
+        }),
+        React.createElement(DataListItemActionsOverflow.DataListItemActionsOverflow, { actions: childrenArray })));
+}
+
+exports.DataListActions = DataListActions;

package/dist/DataListActionsMenu-CcPO6xu6.js

@@ -0,0 +1,57 @@
+'use strict';
+
+var React = require('react');
+var framerMotion = require('framer-motion');
+var useFocusTrap = require('./useFocusTrap-pmlWfXLc.js');
+var useRefocusOnActivator = require('./useRefocusOnActivator-DK92YmNB.js');
+var useOnKeyDown = require('./useOnKeyDown-C61caZ1f.js');
+var ReactDOM = require('react-dom');
+var design = require('@jobber/design');
+var useIsMounted = require('./useIsMounted-Ci9Knigd.js');
+var DataList_const = require('./DataList.const-CxX7Gjfz.js');
+
+var styles = {"menu":"aokwZU8jbWU-","overlay":"XtVRP97TVSE-"};
+
+const variants = {
+    hidden: { opacity: 0, y: -10 },
+    visible: { opacity: 1, y: 0 },
+};
+function DataListActionsMenu({ visible = false, position, onRequestClose, children, }) {
+    const [ref, setRef] = React.useState();
+    const mounted = useIsMounted.useIsMounted_2();
+    useRefocusOnActivator.useRefocusOnActivator_2(visible);
+    const focusTrapRef = useFocusTrap.useFocusTrap_2(visible);
+    useOnKeyDown.useOnKeyDown_2(onRequestClose, "Escape");
+    const actionsMenu = (React.createElement(framerMotion.AnimatePresence, null, visible && (React.createElement("div", { ref: focusTrapRef, onClick: handleClick },
+        React.createElement(framerMotion.motion.div, { role: "menu", ref: setRef, variants: variants, initial: "hidden", animate: "visible", exit: "hidden", transition: { duration: DataList_const.TRANSITION_DELAY_IN_SECONDS }, className: styles.menu, style: getPositionCssVars(), onClick: onRequestClose }, children),
+        React.createElement("button", { type: "button", className: styles.overlay, onClick: onRequestClose, "aria-label": "Close menu" })))));
+    return mounted.current
+        ? ReactDOM.createPortal(actionsMenu, document.body)
+        : actionsMenu;
+    function handleClick(event) {
+        // Prevent menu from firing the parent's onClick event when it is nested
+        // within a clickable list item
+        event.stopPropagation();
+    }
+    function getPositionCssVars() {
+        const { posX, posY } = getPosition();
+        return {
+            "--actions-menu-x": `${posX}px`,
+            "--actions-menu-y": `${posY}px`,
+        };
+    }
+    function getPosition() {
+        const rect = ref === null || ref === void 0 ? void 0 : ref.getBoundingClientRect();
+        const { width = 0, height = 0 } = rect || {};
+        const { x, y } = position;
+        const xIsOffScreen = x + width > window.innerWidth;
+        const yIsOffScreen = y + height > window.innerHeight;
+        const xOffSet = x + width - window.innerWidth + design.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 };
+    }
+}
+
+exports.DataListActionsMenu = DataListActionsMenu;

package/dist/DataListActionsMenu-DUzcRsjU.js

@@ -0,0 +1,55 @@
+import React, { useState } from 'react';
+import { AnimatePresence, motion } from 'framer-motion';
+import { u as useFocusTrap_2 } from './useFocusTrap-DIF2JjIO.js';
+import { u as useRefocusOnActivator_2 } from './useRefocusOnActivator-0eNF7eV7.js';
+import { u as useOnKeyDown_2 } from './useOnKeyDown-DmmUp3io.js';
+import { createPortal } from 'react-dom';
+import { tokens } from '@jobber/design';
+import { u as useIsMounted_2 } from './useIsMounted-BFh5dqlo.js';
+import { d as TRANSITION_DELAY_IN_SECONDS } from './DataList.const-DZaKGZRx.js';
+
+var styles = {"menu":"aokwZU8jbWU-","overlay":"XtVRP97TVSE-"};
+
+const variants = {
+    hidden: { opacity: 0, y: -10 },
+    visible: { opacity: 1, y: 0 },
+};
+function DataListActionsMenu({ visible = false, position, onRequestClose, children, }) {
+    const [ref, setRef] = useState();
+    const mounted = useIsMounted_2();
+    useRefocusOnActivator_2(visible);
+    const focusTrapRef = useFocusTrap_2(visible);
+    useOnKeyDown_2(onRequestClose, "Escape");
+    const actionsMenu = (React.createElement(AnimatePresence, null, visible && (React.createElement("div", { ref: focusTrapRef, onClick: handleClick },
+        React.createElement(motion.div, { role: "menu", ref: setRef, variants: variants, initial: "hidden", animate: "visible", exit: "hidden", transition: { duration: TRANSITION_DELAY_IN_SECONDS }, className: styles.menu, style: getPositionCssVars(), onClick: onRequestClose }, children),
+        React.createElement("button", { type: "button", className: styles.overlay, onClick: onRequestClose, "aria-label": "Close menu" })))));
+    return mounted.current
+        ? createPortal(actionsMenu, document.body)
+        : actionsMenu;
+    function handleClick(event) {
+        // Prevent menu from firing the parent's onClick event when it is nested
+        // within a clickable list item
+        event.stopPropagation();
+    }
+    function getPositionCssVars() {
+        const { posX, posY } = getPosition();
+        return {
+            "--actions-menu-x": `${posX}px`,
+            "--actions-menu-y": `${posY}px`,
+        };
+    }
+    function getPosition() {
+        const rect = ref === null || ref === void 0 ? void 0 : ref.getBoundingClientRect();
+        const { width = 0, height = 0 } = rect || {};
+        const { x, y } = position;
+        const xIsOffScreen = x + width > window.innerWidth;
+        const yIsOffScreen = y + height > window.innerHeight;
+        const xOffSet = x + width - window.innerWidth + 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 };
+    }
+}
+
+export { DataListActionsMenu as D };

package/dist/DataListBulkActions-BSzm2WNu.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { u as useDataListContext } from './DataListContext-tYtmL4Rx.js';
+import { D as DataListActions } from './DataListActions-C6kLL6bk.js';
+import { u as useResponsiveSizing } from './useResponsiveSizing-CyY5WpAE.js';
+
+var styles = {"bulkActions":"v-GrdlFpBLk-"};
+
+// This component is meant to capture the props of the DataList.BulkActions
+function DataListBulkActions(
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+_) {
+    return null;
+}
+function InternalDataListBulkActions() {
+    const { bulkActionsComponent } = useDataListContext();
+    if (!bulkActionsComponent)
+        return null;
+    const { children } = bulkActionsComponent.props;
+    const { sm } = useResponsiveSizing();
+    // Collapse all actions under "More actions" when breakpoint is smaller than sm
+    const itemsToExpose = sm ? 3 : 0;
+    return (React.createElement("div", { className: styles.bulkActions },
+        React.createElement(DataListActions, { itemsToExpose: itemsToExpose }, children)));
+}
+
+export { DataListBulkActions as D, InternalDataListBulkActions as I };

package/dist/DataListBulkActions-CD9jB0pD.js

@@ -0,0 +1,29 @@
+'use strict';
+
+var React = require('react');
+var DataListContext = require('./DataListContext-CjeCQOQO.js');
+var DataListActions = require('./DataListActions-CIGEBlZS.js');
+var useResponsiveSizing = require('./useResponsiveSizing-5owE3VI9.js');
+
+var styles = {"bulkActions":"v-GrdlFpBLk-"};
+
+// This component is meant to capture the props of the DataList.BulkActions
+function DataListBulkActions(
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+_) {
+    return null;
+}
+function InternalDataListBulkActions() {
+    const { bulkActionsComponent } = DataListContext.useDataListContext();
+    if (!bulkActionsComponent)
+        return null;
+    const { children } = bulkActionsComponent.props;
+    const { sm } = useResponsiveSizing.useResponsiveSizing();
+    // Collapse all actions under "More actions" when breakpoint is smaller than sm
+    const itemsToExpose = sm ? 3 : 0;
+    return (React.createElement("div", { className: styles.bulkActions },
+        React.createElement(DataListActions.DataListActions, { itemsToExpose: itemsToExpose }, children)));
+}
+
+exports.DataListBulkActions = DataListBulkActions;
+exports.InternalDataListBulkActions = InternalDataListBulkActions;

package/dist/DataListContext-CjeCQOQO.js

@@ -0,0 +1,29 @@
+'use strict';
+
+var React = require('react');
+var noop = require('./noop-C_195KLH.js');
+
+const defaultValues = {
+    title: "",
+    data: [],
+    headers: {},
+    children: [],
+    selected: [],
+    layoutBreakpoints: [],
+    layouts: {
+        xs: children => React.createElement(React.Fragment, null, children),
+        sm: children => React.createElement(React.Fragment, null, children),
+        md: children => React.createElement(React.Fragment, null, children),
+        lg: children => React.createElement(React.Fragment, null, children),
+        xl: children => React.createElement(React.Fragment, null, children),
+    },
+    registerLayout: noop.noop,
+};
+const DataListContext = React.createContext(defaultValues);
+function useDataListContext() {
+    return React.useContext(DataListContext);
+}
+
+exports.DataListContext = DataListContext;
+exports.defaultValues = defaultValues;
+exports.useDataListContext = useDataListContext;

package/dist/DataListContext-tYtmL4Rx.js

@@ -0,0 +1,25 @@
+import React, { createContext, useContext } from 'react';
+import { n as noop } from './noop-DGEx0ZLF.js';
+
+const defaultValues = {
+    title: "",
+    data: [],
+    headers: {},
+    children: [],
+    selected: [],
+    layoutBreakpoints: [],
+    layouts: {
+        xs: children => React.createElement(React.Fragment, null, children),
+        sm: children => React.createElement(React.Fragment, null, children),
+        md: children => React.createElement(React.Fragment, null, children),
+        lg: children => React.createElement(React.Fragment, null, children),
+        xl: children => React.createElement(React.Fragment, null, children),
+    },
+    registerLayout: noop,
+};
+const DataListContext = createContext(defaultValues);
+function useDataListContext() {
+    return useContext(DataListContext);
+}
+
+export { DataListContext as D, defaultValues as d, useDataListContext as u };

package/dist/DataListEmptyState-65ibxPBY.js

@@ -0,0 +1,50 @@
+import React, { useContext, cloneElement } from 'react';
+import { D as DataListContext } from './DataListContext-tYtmL4Rx.js';
+import { T as Text } from './Text-B1bIoWYr.js';
+import { B as Button } from './Button-DK1Px9LS.js';
+import { E as EMPTY_FILTER_RESULTS_MESSAGE, b as EMPTY_RESULTS_MESSAGE, c as EMPTY_STATE_ACTION_BUTTON_ONLY_ERROR } from './DataList.const-DZaKGZRx.js';
+
+var styles = {"emptyStateWrapper":"zg3w9nQga-M-"};
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function DataListEmptyState(_) {
+    return null;
+}
+function InternalDataListEmptyState() {
+    const { emptyStateComponents: components, filtered } = useContext(DataListContext);
+    const { message, action } = getMessages();
+    return (React.createElement("div", { className: styles.emptyStateWrapper },
+        React.createElement(Text, { align: "center" }, message),
+        renderButton(action)));
+    function getMessages() {
+        const { defaultEmptyState, filteredEmptyState } = getEmptyStates(components);
+        if (filtered) {
+            return {
+                message: (filteredEmptyState === null || filteredEmptyState === void 0 ? void 0 : filteredEmptyState.props.message) || EMPTY_FILTER_RESULTS_MESSAGE,
+                action: filteredEmptyState === null || filteredEmptyState === void 0 ? void 0 : filteredEmptyState.props.action,
+            };
+        }
+        return {
+            message: (defaultEmptyState === null || defaultEmptyState === void 0 ? void 0 : defaultEmptyState.props.message) || EMPTY_RESULTS_MESSAGE,
+            action: defaultEmptyState === null || defaultEmptyState === void 0 ? void 0 : defaultEmptyState.props.action,
+        };
+    }
+}
+function renderButton(action) {
+    if (action) {
+        if (action.type === Button) {
+            return cloneElement(action, {
+                variation: action.props.variation || "subtle",
+            });
+        }
+        throw new Error(EMPTY_STATE_ACTION_BUTTON_ONLY_ERROR);
+    }
+    return;
+}
+function getEmptyStates(components) {
+    const defaultEmptyState = components === null || components === void 0 ? void 0 : components.find(es => es.props.type === "empty" || es.props.type === undefined);
+    const filteredEmptyState = components === null || components === void 0 ? void 0 : components.find(es => es.props.type === "filtered");
+    return { defaultEmptyState, filteredEmptyState };
+}
+
+export { DataListEmptyState as D, InternalDataListEmptyState as I };

package/dist/DataListEmptyState-DK-7wiyT.js

@@ -0,0 +1,53 @@
+'use strict';
+
+var React = require('react');
+var DataListContext = require('./DataListContext-CjeCQOQO.js');
+var Text = require('./Text-B2v3VC_B.js');
+var Button = require('./Button-noDSqvxX.js');
+var DataList_const = require('./DataList.const-CxX7Gjfz.js');
+
+var styles = {"emptyStateWrapper":"zg3w9nQga-M-"};
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function DataListEmptyState(_) {
+    return null;
+}
+function InternalDataListEmptyState() {
+    const { emptyStateComponents: components, filtered } = React.useContext(DataListContext.DataListContext);
+    const { message, action } = getMessages();
+    return (React.createElement("div", { className: styles.emptyStateWrapper },
+        React.createElement(Text.Text, { align: "center" }, message),
+        renderButton(action)));
+    function getMessages() {
+        const { defaultEmptyState, filteredEmptyState } = getEmptyStates(components);
+        if (filtered) {
+            return {
+                message: (filteredEmptyState === null || filteredEmptyState === void 0 ? void 0 : filteredEmptyState.props.message) || DataList_const.EMPTY_FILTER_RESULTS_MESSAGE,
+                action: filteredEmptyState === null || filteredEmptyState === void 0 ? void 0 : filteredEmptyState.props.action,
+            };
+        }
+        return {
+            message: (defaultEmptyState === null || defaultEmptyState === void 0 ? void 0 : defaultEmptyState.props.message) || DataList_const.EMPTY_RESULTS_MESSAGE,
+            action: defaultEmptyState === null || defaultEmptyState === void 0 ? void 0 : defaultEmptyState.props.action,
+        };
+    }
+}
+function renderButton(action) {
+    if (action) {
+        if (action.type === Button.Button) {
+            return React.cloneElement(action, {
+                variation: action.props.variation || "subtle",
+            });
+        }
+        throw new Error(DataList_const.EMPTY_STATE_ACTION_BUTTON_ONLY_ERROR);
+    }
+    return;
+}
+function getEmptyStates(components) {
+    const defaultEmptyState = components === null || components === void 0 ? void 0 : components.find(es => es.props.type === "empty" || es.props.type === undefined);
+    const filteredEmptyState = components === null || components === void 0 ? void 0 : components.find(es => es.props.type === "filtered");
+    return { defaultEmptyState, filteredEmptyState };
+}
+
+exports.DataListEmptyState = DataListEmptyState;
+exports.InternalDataListEmptyState = InternalDataListEmptyState;

package/dist/DataListFilters-CZ5qHZbs.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import { D as DataListSort } from './DataListSort-D-WfgWZm.js';
+import { D as DataListOverflowFade } from './DataListOverflowFade-n0EBeGj9.js';
+import { u as useDataListContext } from './DataListContext-tYtmL4Rx.js';
+import { g as getCompoundComponent } from './DataList.utils-9ehaD0Qv.js';
+import { u as useResponsiveSizing } from './useResponsiveSizing-CyY5WpAE.js';
+
+function useShowHeader() {
+    const { headerVisibility } = useDataListContext();
+    if (headerVisibility === undefined)
+        return true;
+    const sizes = useResponsiveSizing();
+    const sizeKeys = Object.keys(sizes);
+    const showHeader = sizeKeys.reduce((previous, breakpoint) => {
+        const isHeaderVisible = headerVisibility[breakpoint] || false;
+        const isBreakpointTriggered = sizes[breakpoint];
+        return previous || (isBreakpointTriggered && isHeaderVisible);
+    }, false);
+    return showHeader;
+}
+
+// This component is meant to capture the props of the DataList.Filters
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function DataListFilters(_) {
+    return null;
+}
+/**
+ * Renders the DataList.Filters component
+ */
+function InternalDataListFilters() {
+    const { children: parentChildren } = useDataListContext();
+    const showHeader = useShowHeader();
+    const showSortButton = !showHeader;
+    const component = getCompoundComponent(parentChildren, DataListFilters);
+    if (!showSortButton && !component)
+        return null;
+    const children = component === null || component === void 0 ? void 0 : component.props.children;
+    return (React.createElement(DataListOverflowFade, null,
+        children && children,
+        showSortButton && React.createElement(DataListSort, null)));
+}
+
+export { DataListFilters as D, InternalDataListFilters as I };

package/dist/DataListFilters-DFqOeGe-.js

@@ -0,0 +1,46 @@
+'use strict';
+
+var React = require('react');
+var DataListSort = require('./DataListSort-DPworNPJ.js');
+var DataListOverflowFade = require('./DataListOverflowFade-DMC17Az8.js');
+var DataListContext = require('./DataListContext-CjeCQOQO.js');
+var DataList_utils = require('./DataList.utils-CMa3suIh.js');
+var useResponsiveSizing = require('./useResponsiveSizing-5owE3VI9.js');
+
+function useShowHeader() {
+    const { headerVisibility } = DataListContext.useDataListContext();
+    if (headerVisibility === undefined)
+        return true;
+    const sizes = useResponsiveSizing.useResponsiveSizing();
+    const sizeKeys = Object.keys(sizes);
+    const showHeader = sizeKeys.reduce((previous, breakpoint) => {
+        const isHeaderVisible = headerVisibility[breakpoint] || false;
+        const isBreakpointTriggered = sizes[breakpoint];
+        return previous || (isBreakpointTriggered && isHeaderVisible);
+    }, false);
+    return showHeader;
+}
+
+// This component is meant to capture the props of the DataList.Filters
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function DataListFilters(_) {
+    return null;
+}
+/**
+ * Renders the DataList.Filters component
+ */
+function InternalDataListFilters() {
+    const { children: parentChildren } = DataListContext.useDataListContext();
+    const showHeader = useShowHeader();
+    const showSortButton = !showHeader;
+    const component = DataList_utils.getCompoundComponent(parentChildren, DataListFilters);
+    if (!showSortButton && !component)
+        return null;
+    const children = component === null || component === void 0 ? void 0 : component.props.children;
+    return (React.createElement(DataListOverflowFade.DataListOverflowFade, null,
+        children && children,
+        showSortButton && React.createElement(DataListSort.DataListSort, null)));
+}
+
+exports.DataListFilters = DataListFilters;
+exports.InternalDataListFilters = InternalDataListFilters;

package/dist/DataListHeader-CAy8j3WL.js

@@ -0,0 +1,93 @@
+import React from 'react';
+import { u as useDataListContext } from './DataListContext-tYtmL4Rx.js';
+import { c as generateHeaderElements, s as sortBreakpoints } from './DataList.utils-9ehaD0Qv.js';
+import { u as useResponsiveSizing } from './useResponsiveSizing-CyY5WpAE.js';
+import classnames from 'classnames';
+import { A as AnimatedSwitcher } from './AnimatedSwitcher-CblJS560.js';
+import { T as Text } from './Text-B1bIoWYr.js';
+import { B as Button } from './Button-DK1Px9LS.js';
+import { C as Checkbox } from './Checkbox-BcFHMjuY.js';
+import { s as styles } from './DataList-Cc_fUM76.js';
+import { I as InternalDataListBulkActions } from './DataListBulkActions-BSzm2WNu.js';
+import { u as useBatchSelect } from './useBatchSelect-C5xEMqrD.js';
+import { u as useActiveLayout } from './useActiveLayout-B08loXfY.js';
+
+function DataListHeaderCheckbox({ children }) {
+    const { sm } = useResponsiveSizing();
+    const { data, totalCount } = useDataListContext();
+    const { canSelectAll, hasAtLeastOneSelected, isSelectAll, selectedCount, selectedIDs, selected, onSelectAll, onSelect, } = useBatchSelect();
+    // If there's no onSelectAll or onSelect, we don't need to render the checkbox.
+    if (!canSelectAll)
+        return children;
+    const deselectText = sm ? "Deselect All" : "Deselect";
+    const selectedLabel = selectedCount ? `${selectedCount} selected` : "";
+    return (React.createElement("div", { className: styles.selectable },
+        React.createElement("div", { className: classnames(styles.selectAllCheckbox, {
+                [styles.visible]: canSelectAll,
+            }) },
+            React.createElement(Checkbox, { checked: isAllSelected(), indeterminate: isIndeterminate(), onChange: handleSelectAll },
+                React.createElement("div", { className: styles.srOnly }, selectedLabel))),
+        React.createElement(AnimatedSwitcher, { switched: hasAtLeastOneSelected, initialChild: children, switchTo: React.createElement("div", { className: styles.batchSelectContainer },
+                React.createElement("div", { className: styles.headerBatchSelect },
+                    Boolean(selectedCount) && React.createElement(Text, null,
+                        selectedCount,
+                        " selected"),
+                    React.createElement(Button, { label: deselectText, onClick: () => onSelect === null || onSelect === void 0 ? void 0 : onSelect([]), type: "tertiary" })),
+                React.createElement(InternalDataListBulkActions, null)) })));
+    function isIndeterminate() {
+        if (isSelectAll)
+            return selectedIDs.length > 0;
+        return selectedCount > 0 && !isAllSelected();
+    }
+    function isAllSelected() {
+        if (isSelectAll)
+            return true;
+        // If there's a totalCount, we can use that to accurately determine if the
+        // user have "selected all".
+        if (totalCount) {
+            return totalCount === selectedCount;
+        }
+        // Otherwise, we'll use the total count of data. This is not as reliable, as
+        // it's possible that the would select all loaded data while we're
+        // loading more. It's still hard to get to that state as the load more
+        // triggers before you see the last item.
+        return data.length > 0 && selectedCount >= data.length;
+    }
+    function handleSelectAll() {
+        if (isAllSelected()) {
+            return onSelectAll === null || onSelectAll === void 0 ? void 0 : onSelectAll([]);
+        }
+        onSelectAll === null || onSelectAll === void 0 ? void 0 : onSelectAll({ totalCount: getTotalCount(), unselected: [] });
+    }
+    function getTotalCount() {
+        if (selected && "totalCount" in selected)
+            return selected.totalCount;
+        if (totalCount)
+            return totalCount;
+        return 0;
+    }
+}
+
+function DataListHeader() {
+    const breakpoints = useResponsiveSizing();
+    const { headerVisibility = { xs: true, sm: true, md: true, lg: true, xl: true }, headers, layoutBreakpoints, } = useDataListContext();
+    const { hasAtLeastOneSelected } = useBatchSelect();
+    const size = getVisibleSize();
+    const { layout } = useActiveLayout();
+    const visible = headerVisibility[size];
+    if ((!visible && !hasAtLeastOneSelected) || !layout)
+        return null;
+    const headerData = generateHeaderElements(headers);
+    if (!headerData)
+        return null;
+    return (React.createElement("div", { className: styles.headerTitles },
+        React.createElement(DataListHeaderCheckbox, null, layout(headerData))));
+    function getVisibleSize() {
+        const visibilityKeys = Object.keys(headerVisibility);
+        const headerBreakpoints = sortBreakpoints(visibilityKeys).reverse();
+        const visibleHeaderSize = headerBreakpoints.find(key => breakpoints[key]);
+        return visibleHeaderSize || layoutBreakpoints[0];
+    }
+}
+
+export { DataListHeader as D };

package/dist/DataListHeader-D-wLVtiQ.js

@@ -0,0 +1,95 @@
+'use strict';
+
+var React = require('react');
+var DataListContext = require('./DataListContext-CjeCQOQO.js');
+var DataList_utils = require('./DataList.utils-CMa3suIh.js');
+var useResponsiveSizing = require('./useResponsiveSizing-5owE3VI9.js');
+var classnames = require('classnames');
+var AnimatedSwitcher = require('./AnimatedSwitcher-C5f61KU3.js');
+var Text = require('./Text-B2v3VC_B.js');
+var Button = require('./Button-noDSqvxX.js');
+var Checkbox = require('./Checkbox-BshHYo-R.js');
+var DataList = require('./DataList-Bmcmjt1A.js');
+var DataListBulkActions = require('./DataListBulkActions-CD9jB0pD.js');
+var useBatchSelect = require('./useBatchSelect-HwBA03k3.js');
+var useActiveLayout = require('./useActiveLayout-B7Dms4v-.js');
+
+function DataListHeaderCheckbox({ children }) {
+    const { sm } = useResponsiveSizing.useResponsiveSizing();
+    const { data, totalCount } = DataListContext.useDataListContext();
+    const { canSelectAll, hasAtLeastOneSelected, isSelectAll, selectedCount, selectedIDs, selected, onSelectAll, onSelect, } = useBatchSelect.useBatchSelect();
+    // If there's no onSelectAll or onSelect, we don't need to render the checkbox.
+    if (!canSelectAll)
+        return children;
+    const deselectText = sm ? "Deselect All" : "Deselect";
+    const selectedLabel = selectedCount ? `${selectedCount} selected` : "";
+    return (React.createElement("div", { className: DataList.styles.selectable },
+        React.createElement("div", { className: classnames(DataList.styles.selectAllCheckbox, {
+                [DataList.styles.visible]: canSelectAll,
+            }) },
+            React.createElement(Checkbox.Checkbox, { checked: isAllSelected(), indeterminate: isIndeterminate(), onChange: handleSelectAll },
+                React.createElement("div", { className: DataList.styles.srOnly }, selectedLabel))),
+        React.createElement(AnimatedSwitcher.AnimatedSwitcher, { switched: hasAtLeastOneSelected, initialChild: children, switchTo: React.createElement("div", { className: DataList.styles.batchSelectContainer },
+                React.createElement("div", { className: DataList.styles.headerBatchSelect },
+                    Boolean(selectedCount) && React.createElement(Text.Text, null,
+                        selectedCount,
+                        " selected"),
+                    React.createElement(Button.Button, { label: deselectText, onClick: () => onSelect === null || onSelect === void 0 ? void 0 : onSelect([]), type: "tertiary" })),
+                React.createElement(DataListBulkActions.InternalDataListBulkActions, null)) })));
+    function isIndeterminate() {
+        if (isSelectAll)
+            return selectedIDs.length > 0;
+        return selectedCount > 0 && !isAllSelected();
+    }
+    function isAllSelected() {
+        if (isSelectAll)
+            return true;
+        // If there's a totalCount, we can use that to accurately determine if the
+        // user have "selected all".
+        if (totalCount) {
+            return totalCount === selectedCount;
+        }
+        // Otherwise, we'll use the total count of data. This is not as reliable, as
+        // it's possible that the would select all loaded data while we're
+        // loading more. It's still hard to get to that state as the load more
+        // triggers before you see the last item.
+        return data.length > 0 && selectedCount >= data.length;
+    }
+    function handleSelectAll() {
+        if (isAllSelected()) {
+            return onSelectAll === null || onSelectAll === void 0 ? void 0 : onSelectAll([]);
+        }
+        onSelectAll === null || onSelectAll === void 0 ? void 0 : onSelectAll({ totalCount: getTotalCount(), unselected: [] });
+    }
+    function getTotalCount() {
+        if (selected && "totalCount" in selected)
+            return selected.totalCount;
+        if (totalCount)
+            return totalCount;
+        return 0;
+    }
+}
+
+function DataListHeader() {
+    const breakpoints = useResponsiveSizing.useResponsiveSizing();
+    const { headerVisibility = { xs: true, sm: true, md: true, lg: true, xl: true }, headers, layoutBreakpoints, } = DataListContext.useDataListContext();
+    const { hasAtLeastOneSelected } = useBatchSelect.useBatchSelect();
+    const size = getVisibleSize();
+    const { layout } = useActiveLayout.useActiveLayout();
+    const visible = headerVisibility[size];
+    if ((!visible && !hasAtLeastOneSelected) || !layout)
+        return null;
+    const headerData = DataList_utils.generateHeaderElements(headers);
+    if (!headerData)
+        return null;
+    return (React.createElement("div", { className: DataList.styles.headerTitles },
+        React.createElement(DataListHeaderCheckbox, null, layout(headerData))));
+    function getVisibleSize() {
+        const visibilityKeys = Object.keys(headerVisibility);
+        const headerBreakpoints = DataList_utils.sortBreakpoints(visibilityKeys).reverse();
+        const visibleHeaderSize = headerBreakpoints.find(key => breakpoints[key]);
+        return visibleHeaderSize || layoutBreakpoints[0];
+    }
+}
+
+exports.DataListHeader = DataListHeader;