@jobber/components 4.81.4-JOB-89342.4 → 4.81.5-fix-inline.3

package/dist/DataListItem-CWwAew8z.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-Ti26phw5.js';
+import { I as InternalDataListItemActions } from './DataListItemActions-DXeN3VTU.js';
+import { D as DataListActionsMenu } from './DataListActionsMenu-BVvrJ6q3.js';
+import { D as DataListLayoutActionsContext } from './DataListLayoutContext-CC9P8YTb.js';
+import { d as generateListItemElement } from './DataList.utils-CkgX75FO.js';
+import { C as Checkbox } from './Checkbox-Bo9-Klft.js';
+import { u as useBatchSelect } from './useBatchSelect-BQIoIQXn.js';
+import { s as styles } from './DataList-CVjGnLX2.js';
+import { D as DataListItemClickable } from './DataListItemClickable-CfEORqjt.js';
+import { u as useDataListContext } from './DataListContext-cZFUQ9hu.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-DXeN3VTU.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { T as TRANSITION_DURATION_IN_SECONDS, d as TRANSITION_DELAY_IN_SECONDS } from './DataList.const-CAON2bry.js';
+import { D as DataListActions } from './DataListActions-DLUdMYv6.js';
+
+var styles = {"menu":"jHcHGQ-HDbk-"};
+
+// 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/DataListItemActions-aCJDL65P.js

@@ -0,0 +1,32 @@
+'use strict';
+
+var React = require('react');
+var framerMotion = require('framer-motion');
+var DataList_const = require('./DataList.const-yd84L97p.js');
+var DataListActions = require('./DataListActions-Dkxc6Wg1.js');
+
+var styles = {"menu":"jHcHGQ-HDbk-"};
+
+// 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(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.createElement(DataListActions.DataListActions, null, actions)));
+}
+function handleContextMenu(event) {
+    event.stopPropagation();
+}
+
+exports.DataListItemActions = DataListItemActions;
+exports.InternalDataListItemActions = InternalDataListItemActions;

package/dist/DataListItemActionsOverflow-BJzsTvmM.js

@@ -0,0 +1,33 @@
+import React, { useState } from 'react';
+import { B as Button } from './Button-Dxm4_rfk.js';
+import { T as Tooltip } from './Tooltip-EwYyGS7b.js';
+import { D as DataListActionsMenu } from './DataListActionsMenu-BVvrJ6q3.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-Cu_tXS-R.js

@@ -0,0 +1,35 @@
+'use strict';
+
+var React = require('react');
+var Button = require('./Button-C6Zzqf6w.js');
+var Tooltip = require('./Tooltip-UhApn9wM.js');
+var DataListActionsMenu = require('./DataListActionsMenu-xGEIIP2E.js');
+
+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.createElement(React.Fragment, null,
+        React.createElement(Tooltip.Tooltip, { message: "More actions" },
+            React.createElement(Button.Button, { icon: "more", ariaLabel: "More actions", type: "secondary", variation: "subtle", onClick: handleMoreClick })),
+        React.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-CfEORqjt.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import { u as useDataListContext } from './DataListContext-cZFUQ9hu.js';
+import { Link } from 'react-router-dom';
+import { s as styles } from './DataList-CVjGnLX2.js';
+import { u as useDataListLayoutActionsContext } from './DataListLayoutContext-CC9P8YTb.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 };

package/dist/DataListItemClickable-gWB3ChQy.js

@@ -0,0 +1,47 @@
+'use strict';
+
+var React = require('react');
+var DataListContext = require('./DataListContext-DH11MdN5.js');
+var reactRouterDom = require('react-router-dom');
+var DataList = require('./DataList-CoOOTugq.js');
+var DataListLayoutContext = require('./DataListLayoutContext-Bt7v2Jib.js');
+
+function DataListItemClickableInternal({ onClick, url, to, children, }) {
+    const { activeItem } = DataListLayoutContext.useDataListLayoutActionsContext();
+    if (!activeItem)
+        return React.createElement(React.Fragment, null, children);
+    if (to) {
+        const computedTo = typeof to === "string" ? to : to(activeItem);
+        return (React.createElement(reactRouterDom.Link, { className: DataList.styles.listItemClickable, to: computedTo, onClick: handleClick }, children));
+    }
+    if (url) {
+        const href = typeof url === "string" ? url : url(activeItem);
+        return (React.createElement("a", { className: DataList.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: DataList.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 } = DataListContext.useDataListContext();
+    if (itemActionComponent) {
+        const props = itemActionComponent.props;
+        return (React.createElement(DataListItemClickableInternal, Object.assign({}, props), children));
+    }
+    return React.createElement(React.Fragment, null, children);
+}
+
+exports.DataListItemClickable = DataListItemClickable;

package/dist/DataListItems-BCLL51K_.js

@@ -0,0 +1,19 @@
+import React, { useState } from 'react';
+import { u as useDataListContext } from './DataListContext-cZFUQ9hu.js';
+import { D as DataListLayoutContext } from './DataListLayoutContext-Ti26phw5.js';
+import { D as DataListItem } from './DataListItem-CWwAew8z.js';
+
+function DataListItems({ size = "xs", }) {
+    const { data, layouts } = useDataListContext();
+    const [hasInLayoutActions, setHasInLayoutActions] = useState(false);
+    const layout = layouts[size];
+    if (!layout)
+        return null;
+    return (React.createElement(DataListLayoutContext.Provider, { value: {
+            isInLayoutProvider: true,
+            hasInLayoutActions,
+            setHasInLayoutActions,
+        } }, data.map((child, i) => (React.createElement(DataListItem, { key: data[i].id, index: i, item: child, layout: layout })))));
+}
+
+export { DataListItems as D };

package/dist/DataListItems-CBbXv-ER.js

@@ -0,0 +1,21 @@
+'use strict';
+
+var React = require('react');
+var DataListContext = require('./DataListContext-DH11MdN5.js');
+var DataListLayoutContext = require('./DataListLayoutContext-DwABbM0Y.js');
+var DataListItem = require('./DataListItem-CLTmyQ98.js');
+
+function DataListItems({ size = "xs", }) {
+    const { data, layouts } = DataListContext.useDataListContext();
+    const [hasInLayoutActions, setHasInLayoutActions] = React.useState(false);
+    const layout = layouts[size];
+    if (!layout)
+        return null;
+    return (React.createElement(DataListLayoutContext.DataListLayoutContext.Provider, { value: {
+            isInLayoutProvider: true,
+            hasInLayoutActions,
+            setHasInLayoutActions,
+        } }, data.map((child, i) => (React.createElement(DataListItem.DataListItem, { key: data[i].id, index: i, item: child, layout: layout })))));
+}
+
+exports.DataListItems = DataListItems;

package/dist/DataListLayout-8rwhmWlC.js

@@ -0,0 +1,19 @@
+import React, { useEffect } from 'react';
+import { D as DataListItems } from './DataListItems-BCLL51K_.js';
+import { u as useDataListContext } from './DataListContext-cZFUQ9hu.js';
+import { u as useActiveLayout } from './useActiveLayout-B3BnH69M.js';
+
+function DataListLayout({ children, size = "xs", }) {
+    const { registerLayout, loadingState } = useDataListContext();
+    const { activeBreakpoint } = useActiveLayout();
+    useEffect(() => {
+        registerLayout(size, children);
+    }, [size, children]);
+    const shouldRenderList = size === activeBreakpoint;
+    if (loadingState !== "initial" && shouldRenderList) {
+        return React.createElement(DataListItems, { size: size });
+    }
+    return null;
+}
+
+export { DataListLayout as D };

package/dist/DataListLayout-zwuYUYi3.js

@@ -0,0 +1,21 @@
+'use strict';
+
+var React = require('react');
+var DataListItems = require('./DataListItems-CBbXv-ER.js');
+var DataListContext = require('./DataListContext-DH11MdN5.js');
+var useActiveLayout = require('./useActiveLayout-BJRFoKql.js');
+
+function DataListLayout({ children, size = "xs", }) {
+    const { registerLayout, loadingState } = DataListContext.useDataListContext();
+    const { activeBreakpoint } = useActiveLayout.useActiveLayout();
+    React.useEffect(() => {
+        registerLayout(size, children);
+    }, [size, children]);
+    const shouldRenderList = size === activeBreakpoint;
+    if (loadingState !== "initial" && shouldRenderList) {
+        return React.createElement(DataListItems.DataListItems, { size: size });
+    }
+    return null;
+}
+
+exports.DataListLayout = DataListLayout;

package/dist/DataListLayoutActions-CuLPSB2-.js

@@ -0,0 +1,36 @@
+import React, { Children, useEffect } from 'react';
+import { u as useDataListContext } from './DataListContext-cZFUQ9hu.js';
+import { u as useDataListLayoutContext } from './DataListLayoutContext-Ti26phw5.js';
+import { D as DataListItemActionsOverflow } from './DataListItemActionsOverflow-BJzsTvmM.js';
+import { G as Glimmer } from './Glimmer-CeX3FIgK.js';
+
+var styles = {"hidden":"_0m75bgCVBhk-"};
+
+function DataListLayoutActions() {
+    const { itemActionComponent, loadingState } = useDataListContext();
+    const { setHasInLayoutActions } = useDataListLayoutContext();
+    const { children: actionsChildren } = (itemActionComponent === null || itemActionComponent === void 0 ? void 0 : itemActionComponent.props) || {};
+    const actions = Children.toArray(actionsChildren);
+    const hasActions = actions.length > 0;
+    useEffect(() => {
+        setHasInLayoutActions(hasActions);
+        return () => {
+            setHasInLayoutActions(false);
+        };
+    }, []);
+    if (loadingState === "initial") {
+        return React.createElement(Glimmer, { shape: "square", size: "large" });
+    }
+    if (!hasActions)
+        return null;
+    return (React.createElement(DataListLayoutActionsWrapper, null,
+        React.createElement(DataListItemActionsOverflow, { actions: actions })));
+}
+function DataListLayoutActionsWrapper({ children }) {
+    const { isInLayoutProvider } = useDataListLayoutContext();
+    if (isInLayoutProvider)
+        return React.createElement(React.Fragment, null, children);
+    return React.createElement("div", { className: styles.hidden }, children);
+}
+
+export { DataListLayoutActions as D };

package/dist/DataListLayoutActions-ksnl2z1p.js

@@ -0,0 +1,38 @@
+'use strict';
+
+var React = require('react');
+var DataListContext = require('./DataListContext-DH11MdN5.js');
+var DataListLayoutContext = require('./DataListLayoutContext-DwABbM0Y.js');
+var DataListItemActionsOverflow = require('./DataListItemActionsOverflow-Cu_tXS-R.js');
+var Glimmer = require('./Glimmer-DbEO_TNS.js');
+
+var styles = {"hidden":"_0m75bgCVBhk-"};
+
+function DataListLayoutActions() {
+    const { itemActionComponent, loadingState } = DataListContext.useDataListContext();
+    const { setHasInLayoutActions } = DataListLayoutContext.useDataListLayoutContext();
+    const { children: actionsChildren } = (itemActionComponent === null || itemActionComponent === void 0 ? void 0 : itemActionComponent.props) || {};
+    const actions = React.Children.toArray(actionsChildren);
+    const hasActions = actions.length > 0;
+    React.useEffect(() => {
+        setHasInLayoutActions(hasActions);
+        return () => {
+            setHasInLayoutActions(false);
+        };
+    }, []);
+    if (loadingState === "initial") {
+        return React.createElement(Glimmer.Glimmer, { shape: "square", size: "large" });
+    }
+    if (!hasActions)
+        return null;
+    return (React.createElement(DataListLayoutActionsWrapper, null,
+        React.createElement(DataListItemActionsOverflow.DataListItemActionsOverflow, { actions: actions })));
+}
+function DataListLayoutActionsWrapper({ children }) {
+    const { isInLayoutProvider } = DataListLayoutContext.useDataListLayoutContext();
+    if (isInLayoutProvider)
+        return React.createElement(React.Fragment, null, children);
+    return React.createElement("div", { className: styles.hidden }, children);
+}
+
+exports.DataListLayoutActions = DataListLayoutActions;

package/dist/DataListLayoutContext-Bt7v2Jib.js

@@ -0,0 +1,11 @@
+'use strict';
+
+var React = require('react');
+
+const DataListLayoutActionsContext = React.createContext({ activeItem: undefined });
+function useDataListLayoutActionsContext() {
+    return React.useContext(DataListLayoutActionsContext);
+}
+
+exports.DataListLayoutActionsContext = DataListLayoutActionsContext;
+exports.useDataListLayoutActionsContext = useDataListLayoutActionsContext;

package/dist/DataListLayoutContext-CC9P8YTb.js

@@ -0,0 +1,8 @@
+import { createContext, useContext } from 'react';
+
+const DataListLayoutActionsContext = createContext({ activeItem: undefined });
+function useDataListLayoutActionsContext() {
+    return useContext(DataListLayoutActionsContext);
+}
+
+export { DataListLayoutActionsContext as D, useDataListLayoutActionsContext as u };

package/dist/DataListLayoutContext-DwABbM0Y.js

@@ -0,0 +1,18 @@
+'use strict';
+
+var noop = require('./noop-KjN6iR4U.js');
+var React = require('react');
+
+const defaultValues = {
+    isInLayoutProvider: false,
+    hasInLayoutActions: false,
+    setHasInLayoutActions: noop.noop,
+};
+const DataListLayoutContext = React.createContext(defaultValues);
+function useDataListLayoutContext() {
+    return React.useContext(DataListLayoutContext);
+}
+
+exports.DataListLayoutContext = DataListLayoutContext;
+exports.defaultValues = defaultValues;
+exports.useDataListLayoutContext = useDataListLayoutContext;

package/dist/DataListLayoutContext-Ti26phw5.js

@@ -0,0 +1,14 @@
+import { n as noop } from './noop-D2YYfaCd.js';
+import { createContext, useContext } from 'react';
+
+const defaultValues = {
+    isInLayoutProvider: false,
+    hasInLayoutActions: false,
+    setHasInLayoutActions: noop,
+};
+const DataListLayoutContext = createContext(defaultValues);
+function useDataListLayoutContext() {
+    return useContext(DataListLayoutContext);
+}
+
+export { DataListLayoutContext as D, defaultValues as d, useDataListLayoutContext as u };

package/dist/DataListLoadMore-3bdPuc4p.js

@@ -0,0 +1,34 @@
+'use strict';
+
+var React = require('react');
+var useInView = require('./useInView-CD_vZuKv.js');
+var DataListContext = require('./DataListContext-DH11MdN5.js');
+var DataList_const = require('./DataList.const-yd84L97p.js');
+var Spinner = require('./Spinner-GF_syaE-.js');
+var Button = require('./Button-C6Zzqf6w.js');
+
+var styles = {"trigger":"IC-Y9bTIVFo-","loadingMore":"PbZLGpbI6ZM-","backToTop":"_6zA6B-jmz6o-","fadeIn":"gZ4DUv82g5I-"};
+
+function DataListLoadMoreTrigger() {
+    const { onLoadMore } = DataListContext.useDataListContext();
+    const [inViewRef, isInView] = useInView.useInView_2();
+    React.useEffect(() => {
+        isInView && (onLoadMore === null || onLoadMore === void 0 ? void 0 : onLoadMore());
+    }, [isInView]);
+    return (React.createElement("div", { ref: inViewRef, className: styles.trigger, "data-testid": DataList_const.DATA_LOAD_MORE_TEST_ID }));
+}
+
+const MAX_DATA_COUNT = 50;
+function DataListLoadMore({ onBackToTop }) {
+    const { loadingState, data } = DataListContext.useDataListContext();
+    const showBackToTop = data.length > MAX_DATA_COUNT && loadingState !== "loadingMore";
+    return (React.createElement(React.Fragment, null,
+        React.createElement(DataListLoadMoreTrigger, { key: data.length }),
+        loadingState === "loadingMore" && (React.createElement("div", { "data-testid": DataList_const.DATA_LIST_LOADING_MORE_SPINNER_TEST_ID, className: styles.loadingMore },
+            React.createElement(Spinner.Spinner, { size: "small" }))),
+        showBackToTop && (React.createElement("div", { className: styles.backToTop },
+            React.createElement(Button.Button, { label: "Back to top", onClick: onBackToTop, size: "small", variation: "subtle" })))));
+}
+
+exports.DataListLoadMore = DataListLoadMore;
+exports.MAX_DATA_COUNT = MAX_DATA_COUNT;

package/dist/DataListLoadMore-CQk7MV7K.js

@@ -0,0 +1,31 @@
+import React, { useEffect } from 'react';
+import { u as useInView_2 } from './useInView-C0ASbX-M.js';
+import { u as useDataListContext } from './DataListContext-cZFUQ9hu.js';
+import { f as DATA_LOAD_MORE_TEST_ID, g as DATA_LIST_LOADING_MORE_SPINNER_TEST_ID } from './DataList.const-CAON2bry.js';
+import { S as Spinner } from './Spinner-D6YspR2V.js';
+import { B as Button } from './Button-Dxm4_rfk.js';
+
+var styles = {"trigger":"IC-Y9bTIVFo-","loadingMore":"PbZLGpbI6ZM-","backToTop":"_6zA6B-jmz6o-","fadeIn":"gZ4DUv82g5I-"};
+
+function DataListLoadMoreTrigger() {
+    const { onLoadMore } = useDataListContext();
+    const [inViewRef, isInView] = useInView_2();
+    useEffect(() => {
+        isInView && (onLoadMore === null || onLoadMore === void 0 ? void 0 : onLoadMore());
+    }, [isInView]);
+    return (React.createElement("div", { ref: inViewRef, className: styles.trigger, "data-testid": DATA_LOAD_MORE_TEST_ID }));
+}
+
+const MAX_DATA_COUNT = 50;
+function DataListLoadMore({ onBackToTop }) {
+    const { loadingState, data } = useDataListContext();
+    const showBackToTop = data.length > MAX_DATA_COUNT && loadingState !== "loadingMore";
+    return (React.createElement(React.Fragment, null,
+        React.createElement(DataListLoadMoreTrigger, { key: data.length }),
+        loadingState === "loadingMore" && (React.createElement("div", { "data-testid": DATA_LIST_LOADING_MORE_SPINNER_TEST_ID, className: styles.loadingMore },
+            React.createElement(Spinner, { size: "small" }))),
+        showBackToTop && (React.createElement("div", { className: styles.backToTop },
+            React.createElement(Button, { label: "Back to top", onClick: onBackToTop, size: "small", variation: "subtle" })))));
+}
+
+export { DataListLoadMore as D, MAX_DATA_COUNT as M };

package/dist/DataListLoadingState-BBjge6b6.js

@@ -0,0 +1,26 @@
+'use strict';
+
+var React = require('react');
+var Glimmer = require('./Glimmer-DbEO_TNS.js');
+var DataListContext = require('./DataListContext-DH11MdN5.js');
+var useActiveLayout = require('./useActiveLayout-BJRFoKql.js');
+
+var styles = {"wrapper":"_8cMzUF8XEwY-","loadingItem":"Rh--6fVpkm4-","glimmer":"NFaWWvmxtkw-"};
+
+const LOADING_STATE_LIMIT_ITEMS = 10;
+const DATALIST_LOADINGSTATE_ROW_TEST_ID = "ATL-DataList-LoadingState-Row";
+function DataListLoadingState() {
+    const { headers } = DataListContext.useDataListContext();
+    const { layout, activeBreakpoint } = useActiveLayout.useActiveLayout();
+    if (!layout)
+        return null;
+    const glimmerSize = activeBreakpoint === "xs" ? "small" : "large";
+    const glimmersFromHeader = Object.keys(headers).reduce((data, key) => (Object.assign(Object.assign({}, data), { [key]: (React.createElement("div", { className: styles.glimmer },
+            React.createElement(Glimmer.Glimmer, { size: glimmerSize }))) })), {});
+    const loadingData = new Array(LOADING_STATE_LIMIT_ITEMS).fill(glimmersFromHeader);
+    return (React.createElement("div", { className: styles.wrapper }, loadingData.map((child, i) => (React.createElement("div", { key: i, className: styles.loadingItem, "data-testid": DATALIST_LOADINGSTATE_ROW_TEST_ID }, layout(child))))));
+}
+
+exports.DATALIST_LOADINGSTATE_ROW_TEST_ID = DATALIST_LOADINGSTATE_ROW_TEST_ID;
+exports.DataListLoadingState = DataListLoadingState;
+exports.LOADING_STATE_LIMIT_ITEMS = LOADING_STATE_LIMIT_ITEMS;