@jobber/components 5.3.8 → 5.4.1

package/dist/{useActiveLayout-B-R2hyQx.js → useActiveLayout-BFBibeZs.js}

@@ -1,5 +1,5 @@
-import { u as useResponsiveSizing } from './useResponsiveSizing-C3dhsInh.js';
-import { u as useDataListContext } from './DataListContext-C7-QxBxQ.js';
+import { u as useResponsiveSizing } from './useResponsiveSizing-Duxqhmht.js';
+import { u as useDataListContext } from './DataListContext-Dqx3K0VG.js';
 
 function useActiveLayout() {
     const { layoutBreakpoints, layouts } = useDataListContext();

package/dist/{useActiveLayout-B09qOgja.js → useActiveLayout-DS9qSPFV.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-var useResponsiveSizing = require('./useResponsiveSizing-Dbpy5JSP.js');
-var DataListContext = require('./DataListContext-DX01M_8T.js');
+var useResponsiveSizing = require('./useResponsiveSizing-DiCANbq8.js');
+var DataListContext = require('./DataListContext-DqC9evnz.js');
 
 function useActiveLayout() {
     const { layoutBreakpoints, layouts } = DataListContext.useDataListContext();

package/dist/{useAssert-BNS5yMaA.js → useAssert-BNi_d0o2.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-var _commonjsHelpers = require('./_commonjsHelpers-5E2fjcAW.js');
-var _polyfillNode_process = require('./_polyfill-node.process-DcolivrE.js');
+var _commonjsHelpers = require('./_commonjsHelpers-DM1uXIwd.js');
+var _polyfillNode_process = require('./_polyfill-node.process-D-U-ZQmd.js');
 
 var useAssert$1 = {};
 

package/dist/{useAssert-D2md9BwL.js → useAssert-c-FoMB7T.js}

@@ -1,5 +1,5 @@
-import { a as getAugmentedNamespace, c as commonjsGlobal } from './_commonjsHelpers-o0eFA8-x.js';
-import { _ as _polyfillNode_process } from './_polyfill-node.process-BQHuaIGb.js';
+import { a as getAugmentedNamespace, c as commonjsGlobal } from './_commonjsHelpers-yArcpwK5.js';
+import { _ as _polyfillNode_process } from './_polyfill-node.process-DFLENVqw.js';
 
 var useAssert$1 = {};
 

package/dist/{useBatchSelect-D3w5302d.js → useBatchSelect-Byh2XLLU.js}

@@ -1,4 +1,4 @@
-import { u as useDataListContext } from './DataListContext-C7-QxBxQ.js';
+import { u as useDataListContext } from './DataListContext-Dqx3K0VG.js';
 
 function useBatchSelect() {
     const { selected, onSelect, onSelectAll } = useDataListContext();

package/dist/{useBatchSelect-Cjx3BO4_.js → useBatchSelect-Z1Rg28ls.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var DataListContext = require('./DataListContext-DX01M_8T.js');
+var DataListContext = require('./DataListContext-DqC9evnz.js');
 
 function useBatchSelect() {
     const { selected, onSelect, onSelectAll } = DataListContext.useDataListContext();

package/dist/useFormFieldFocus-BmPPbO-e.js

@@ -0,0 +1,60 @@
+'use strict';
+
+var React = require('react');
+
+function useActiveElement() {
+    const [active, setActive] = React.useState(document === null || document === void 0 ? void 0 : document.activeElement);
+    const handleFocusIn = () => {
+        setActive(document === null || document === void 0 ? void 0 : document.activeElement);
+    };
+    React.useEffect(() => {
+        document === null || document === void 0 ? void 0 : document.addEventListener("focusin", handleFocusIn);
+        return () => {
+            document === null || document === void 0 ? void 0 : document.removeEventListener("focusin", handleFocusIn);
+        };
+    }, []);
+    return active;
+}
+
+const PORTAL_FOCUS_ATTRIBUTE_NAME = "data-atl-maintain-portal-focus";
+const formFieldFocusAttribute = {
+    [PORTAL_FOCUS_ATTRIBUTE_NAME]: "true",
+};
+function useFormFieldFocus(props) {
+    var _a;
+    const [focused, setFocused] = React.useState(false);
+    const activeElement = useActiveElement();
+    const activeElementRef = React.useRef(activeElement);
+    React.useEffect(() => {
+        activeElementRef.current = activeElement;
+    }, [activeElement]);
+    function handleFocusIn() {
+        setFocused(true);
+    }
+    function handleFocusOut() {
+        setTimeout(() => {
+            var _a, _b, _c;
+            const focusedElementWithinWrapper = (_b = (_a = props.wrapperRef) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.contains(document.activeElement);
+            const focusException = (_c = activeElementRef.current) === null || _c === void 0 ? void 0 : _c.closest(`[${PORTAL_FOCUS_ATTRIBUTE_NAME}='true']`);
+            if (!focusedElementWithinWrapper && !focusException) {
+                setFocused(false);
+            }
+        }, 1);
+    }
+    React.useEffect(() => {
+        var _a, _b, _c, _d;
+        (_b = (_a = props.wrapperRef) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.addEventListener("focusin", handleFocusIn);
+        (_d = (_c = props.wrapperRef) === null || _c === void 0 ? void 0 : _c.current) === null || _d === void 0 ? void 0 : _d.addEventListener("focusout", handleFocusOut);
+        return () => {
+            var _a, _b, _c, _d;
+            (_b = (_a = props.wrapperRef) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.removeEventListener("focusin", handleFocusIn);
+            (_d = (_c = props.wrapperRef) === null || _c === void 0 ? void 0 : _c.current) === null || _d === void 0 ? void 0 : _d.removeEventListener("focusout", handleFocusOut);
+        };
+    }, [(_a = props.wrapperRef) === null || _a === void 0 ? void 0 : _a.current]);
+    return {
+        focused,
+    };
+}
+
+exports.formFieldFocusAttribute = formFieldFocusAttribute;
+exports.useFormFieldFocus = useFormFieldFocus;

package/dist/useFormFieldFocus-Bnt1vsIS.js

@@ -0,0 +1,57 @@
+import { useState, useEffect, useRef } from 'react';
+
+function useActiveElement() {
+    const [active, setActive] = useState(document === null || document === void 0 ? void 0 : document.activeElement);
+    const handleFocusIn = () => {
+        setActive(document === null || document === void 0 ? void 0 : document.activeElement);
+    };
+    useEffect(() => {
+        document === null || document === void 0 ? void 0 : document.addEventListener("focusin", handleFocusIn);
+        return () => {
+            document === null || document === void 0 ? void 0 : document.removeEventListener("focusin", handleFocusIn);
+        };
+    }, []);
+    return active;
+}
+
+const PORTAL_FOCUS_ATTRIBUTE_NAME = "data-atl-maintain-portal-focus";
+const formFieldFocusAttribute = {
+    [PORTAL_FOCUS_ATTRIBUTE_NAME]: "true",
+};
+function useFormFieldFocus(props) {
+    var _a;
+    const [focused, setFocused] = useState(false);
+    const activeElement = useActiveElement();
+    const activeElementRef = useRef(activeElement);
+    useEffect(() => {
+        activeElementRef.current = activeElement;
+    }, [activeElement]);
+    function handleFocusIn() {
+        setFocused(true);
+    }
+    function handleFocusOut() {
+        setTimeout(() => {
+            var _a, _b, _c;
+            const focusedElementWithinWrapper = (_b = (_a = props.wrapperRef) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.contains(document.activeElement);
+            const focusException = (_c = activeElementRef.current) === null || _c === void 0 ? void 0 : _c.closest(`[${PORTAL_FOCUS_ATTRIBUTE_NAME}='true']`);
+            if (!focusedElementWithinWrapper && !focusException) {
+                setFocused(false);
+            }
+        }, 1);
+    }
+    useEffect(() => {
+        var _a, _b, _c, _d;
+        (_b = (_a = props.wrapperRef) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.addEventListener("focusin", handleFocusIn);
+        (_d = (_c = props.wrapperRef) === null || _c === void 0 ? void 0 : _c.current) === null || _d === void 0 ? void 0 : _d.addEventListener("focusout", handleFocusOut);
+        return () => {
+            var _a, _b, _c, _d;
+            (_b = (_a = props.wrapperRef) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.removeEventListener("focusin", handleFocusIn);
+            (_d = (_c = props.wrapperRef) === null || _c === void 0 ? void 0 : _c.current) === null || _d === void 0 ? void 0 : _d.removeEventListener("focusout", handleFocusOut);
+        };
+    }, [(_a = props.wrapperRef) === null || _a === void 0 ? void 0 : _a.current]);
+    return {
+        focused,
+    };
+}
+
+export { formFieldFocusAttribute as f, useFormFieldFocus as u };

package/dist/{useIsMounted-DcXMPOwP.js → useIsMounted-Bd33slsf.js}

@@ -1,5 +1,5 @@
 import React from 'react';
-import { a as useSafeLayoutEffect$1 } from './useSafeLayoutEffect-CaTU1pfk.js';
+import { a as useSafeLayoutEffect$1 } from './useSafeLayoutEffect-ScSrs8an.js';
 
 var useIsMounted$1 = {};
 

package/dist/{useIsMounted-C-iuFBhV.js → useIsMounted-D8XAjhll.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 var React = require('react');
-var useSafeLayoutEffect$1 = require('./useSafeLayoutEffect-C1WkPGoj.js');
+var useSafeLayoutEffect$1 = require('./useSafeLayoutEffect-DzsK4hpN.js');
 
 var useIsMounted$1 = {};
 

package/dist/{useResizeObserver-DGP1QA3C.js → useResizeObserver-DYarBxMp.js}

@@ -1,7 +1,7 @@
-import { a as getAugmentedNamespace, c as commonjsGlobal, g as getDefaultExportFromCjs } from './_commonjsHelpers-o0eFA8-x.js';
+import { a as getAugmentedNamespace, c as commonjsGlobal, g as getDefaultExportFromCjs } from './_commonjsHelpers-yArcpwK5.js';
 import React from 'react';
-import { a as debounce_1 } from './debounce-eVVHkj9V.js';
-import { b as isObject_1 } from './isObjectLike-C2E9dNXw.js';
+import { a as debounce_1 } from './debounce-D9L_NtWb.js';
+import { b as isObject_1 } from './isObjectLike-BO8lA4wb.js';
 
 function _mergeNamespaces(n, m) {
     m.forEach(function (e) {

package/dist/{useResizeObserver-CB-drh-H.js → useResizeObserver-DyfGKgyY.js}

@@ -1,9 +1,9 @@
 'use strict';
 
-var _commonjsHelpers = require('./_commonjsHelpers-5E2fjcAW.js');
+var _commonjsHelpers = require('./_commonjsHelpers-DM1uXIwd.js');
 var React = require('react');
-var debounce$1 = require('./debounce-DpBY6Y74.js');
-var isObjectLike = require('./isObjectLike-CxakUwJW.js');
+var debounce$1 = require('./debounce-CYRZ_34W.js');
+var isObjectLike = require('./isObjectLike-C1q80ak2.js');
 
 function _mergeNamespaces(n, m) {
     m.forEach(function (e) {

package/dist/{useResponsiveSizing-Dbpy5JSP.js → useResponsiveSizing-DiCANbq8.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 var React = require('react');
-var DataList_const = require('./DataList.const-DqBFKF9G.js');
+var DataList_const = require('./DataList.const-CYgulUua.js');
 
 const mediaQueryStore = {
     subscribe(onChange, query) {

package/dist/{useResponsiveSizing-C3dhsInh.js → useResponsiveSizing-Duxqhmht.js}

@@ -1,5 +1,5 @@
 import { useCallback, useSyncExternalStore } from 'react';
-import { e as BREAKPOINT_SIZES } from './DataList.const-9Nw9_DNd.js';
+import { e as BREAKPOINT_SIZES } from './DataList.const-QAh22Cbm.js';
 
 const mediaQueryStore = {
     subscribe(onChange, query) {

package/dist/{useScrollToActive-CeoErJXc.js → useScrollToActive-CPUR5Wvd.js}

@@ -1,15 +1,15 @@
 'use strict';
 
 var React = require('react');
-var _commonjsHelpers = require('./_commonjsHelpers-5E2fjcAW.js');
-var _setToString = require('./_setToString-D5LwlokB.js');
-var _defineProperty = require('./_defineProperty-D5mCEIE3.js');
-var _baseEach = require('./_baseEach-CTtMh650.js');
-var _getTag = require('./_getTag-4OBWTgkR.js');
-var isSymbol$1 = require('./isSymbol-DHxOiQvP.js');
-var isObjectLike = require('./isObjectLike-CxakUwJW.js');
-var debounce = require('./debounce-DpBY6Y74.js');
-var Icon = require('./Icon-DToqNtgb.js');
+var _commonjsHelpers = require('./_commonjsHelpers-DM1uXIwd.js');
+var _setToString = require('./_setToString-COys9Lti.js');
+var _defineProperty = require('./_defineProperty-C0gVyMXO.js');
+var _baseEach = require('./_baseEach-CaGPYt-5.js');
+var _getTag = require('./_getTag-BXNvpAcJ.js');
+var isSymbol$1 = require('./isSymbol-BhKcMs_1.js');
+var isObjectLike = require('./isObjectLike-C1q80ak2.js');
+var debounce = require('./debounce-CYRZ_34W.js');
+var Icon = require('./Icon-ByeN2N4j.js');
 var reactPopper = require('react-popper');
 
 var baseEach = _baseEach._baseEach,

package/dist/{useScrollToActive-BxiFPcUj.js → useScrollToActive-CSczp0XZ.js}

@@ -1,13 +1,13 @@
 import React, { useRef, useId, useState, useEffect } from 'react';
-import { g as getDefaultExportFromCjs } from './_commonjsHelpers-o0eFA8-x.js';
-import { _ as _overRest, a as _setToString, b as _baseFlatten } from './_setToString-D7AUnAYM.js';
-import { b as _arrayMap, c as _baseGet, i as identity_1, e as eq_1, d as _isIndex } from './_defineProperty-B9JS4gwM.js';
-import { _ as _baseEach, a as _baseIteratee } from './_baseEach-GXodrm6u.js';
-import { c as isArrayLike_1, g as _baseUnary, b as isArray_1 } from './_getTag-DqlUEpfw.js';
-import { i as isSymbol_1 } from './isSymbol-VMwfWESs.js';
-import { b as isObject_1 } from './isObjectLike-C2E9dNXw.js';
-import { d as debounce } from './debounce-eVVHkj9V.js';
-import { I as Icon } from './Icon-BABC7GCA.js';
+import { g as getDefaultExportFromCjs } from './_commonjsHelpers-yArcpwK5.js';
+import { _ as _overRest, a as _setToString, b as _baseFlatten } from './_setToString-K1Va1_8m.js';
+import { b as _arrayMap, c as _baseGet, i as identity_1, e as eq_1, d as _isIndex } from './_defineProperty-D4XY5ojv.js';
+import { _ as _baseEach, a as _baseIteratee } from './_baseEach-LJgzfE1B.js';
+import { c as isArrayLike_1, g as _baseUnary, b as isArray_1 } from './_getTag-BhkRtrtL.js';
+import { i as isSymbol_1 } from './isSymbol-BVPFaUw8.js';
+import { b as isObject_1 } from './isObjectLike-BO8lA4wb.js';
+import { d as debounce } from './debounce-D9L_NtWb.js';
+import { I as Icon } from './Icon-CxLh3sV5.js';
 import { usePopper } from 'react-popper';
 
 var baseEach = _baseEach,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "5.3.8",
+  "version": "5.4.1",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -402,9 +402,9 @@
     "dist/*"
   ],
   "dependencies": {
-    "@jobber/design": "^0.58.0",
+    "@jobber/design": "^0.59.0",
     "@jobber/formatters": "^0.3.0",
-    "@jobber/hooks": "^2.9.5",
+    "@jobber/hooks": "^2.9.6",
     "@popperjs/core": "^2.0.6",
     "@std-proposal/temporal": "0.0.1",
     "@tanstack/react-table": "8.5.13",
@@ -482,5 +482,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "91b21a0f61b0fcf0ba3322fd35e8925873871e58"
+  "gitHead": "c2a1e8367d831e492cbf7f194ccb05cdc7f705fa"
 }

package/dist/Menu-AqB-Wq_3.js

@@ -1,130 +0,0 @@
-'use strict';
-
-var React = require('react');
-var classnames = require('classnames');
-var framerMotion = require('framer-motion');
-var useOnKeyDown = require('./useOnKeyDown-DP-n369m.js');
-var useRefocusOnActivator = require('./useRefocusOnActivator-zcoExyQG.js');
-var useSafeLayoutEffect = require('./useSafeLayoutEffect-C1WkPGoj.js');
-var Button = require('./Button-TMPCBi5z.js');
-var Typography = require('./Typography-DU-v_fu-.js');
-var Icon = require('./Icon-DToqNtgb.js');
-
-var styles = {"wrapper":"dT6M9tp1sZc-","menu":"Qmxlsj0D3qM-","above":"QTisUfiHwL4-","below":"qsch1dlpOHc-","left":"_0xR9-oxWMOU-","right":"gaZwsdyoG0k-","section":"LaKFjYCLHZc-","sectionHeader":"_7HB7dWnqCi0-","action":"ZuceCiefKqw-","overlay":"eKnUAucwwWU-","fullWidth":"oaxefr58z-E-","screenReaderOnly":"vz9opIdwHFg-"};
-
-const variation = {
-    overlayStartStop: { opacity: 0 },
-    startOrStop: (position) => {
-        let y = 10;
-        if (position === "below")
-            y *= -1;
-        if (window.innerWidth < 640)
-            y = 150;
-        return { opacity: 0, y };
-    },
-    done: { opacity: 1, y: 0 },
-};
-// eslint-disable-next-line max-statements
-function Menu({ activator, items }) {
-    var _a;
-    const [visible, setVisible] = React.useState(false);
-    const fullWidth = ((_a = activator === null || activator === void 0 ? void 0 : activator.props) === null || _a === void 0 ? void 0 : _a.fullWidth) || false;
-    const [position, setPosition] = React.useState({
-        vertical: "below",
-        horizontal: "right",
-    });
-    const wrapperRef = React.createRef();
-    const buttonID = React.useId();
-    const menuID = React.useId();
-    useOnKeyDown.useOnKeyDown_2(handleKeyboardShortcut, ["Escape"]);
-    useSafeLayoutEffect.useSafeLayoutEffect_1(() => {
-        if (wrapperRef.current) {
-            const bounds = wrapperRef.current.getBoundingClientRect();
-            const newPosition = Object.assign({}, position);
-            if (bounds.top <= window.innerHeight / 2) {
-                newPosition.vertical = "below";
-            }
-            else {
-                newPosition.vertical = "above";
-            }
-            if (bounds.left <= window.innerWidth / 2) {
-                newPosition.horizontal = "right";
-            }
-            else {
-                newPosition.horizontal = "left";
-            }
-            setPosition(newPosition);
-        }
-    }, [visible, fullWidth]);
-    useRefocusOnActivator.useRefocusOnActivator_2(visible);
-    if (!activator) {
-        activator = (React.createElement(Button.Button, { fullWidth: true, label: "More Actions", icon: "more", type: "secondary" }));
-    }
-    const menuClasses = classnames(styles.menu, position.vertical === "above" && styles.above, position.vertical === "below" && styles.below, position.horizontal === "left" && styles.left, position.horizontal === "right" && styles.right);
-    const wrapperClasses = classnames(styles.wrapper, {
-        [styles.fullWidth]: fullWidth,
-    });
-    return (React.createElement("div", { className: wrapperClasses, ref: wrapperRef, onClick: handleParentClick },
-        React.cloneElement(activator, {
-            onClick: toggle(activator.props.onClick),
-            id: buttonID,
-            ariaControls: menuID,
-            ariaExpanded: visible,
-            ariaHaspopup: true,
-        }),
-        React.createElement(framerMotion.AnimatePresence, null, visible && (React.createElement(React.Fragment, null,
-            React.createElement(framerMotion.motion.div, { className: styles.overlay, onClick: toggle(), variants: variation, initial: "overlayStartStop", animate: "done", exit: "overlayStartStop", transition: {
-                    type: "tween",
-                    duration: 0.15,
-                } }),
-            React.createElement(framerMotion.motion.div, { className: menuClasses, role: "menu", "aria-labelledby": buttonID, id: menuID, onClick: hide, variants: variation, initial: "startOrStop", animate: "done", exit: "startOrStop", custom: position, transition: {
-                    type: "tween",
-                    duration: 0.25,
-                } }, items.map((item, key) => (React.createElement("div", { key: key, className: styles.section },
-                item.header && React.createElement(SectionHeader, { text: item.header }),
-                item.actions.map((action, index) => (React.createElement(Action, Object.assign({ sectionLabel: item.header, key: action.label, shouldFocus: key === 0 && index === 0 }, action)))))))))))));
-    function toggle(callbackPassthrough) {
-        return (event) => {
-            setVisible(!visible);
-            callbackPassthrough && callbackPassthrough(event);
-        };
-    }
-    function hide() {
-        setVisible(false);
-    }
-    function handleKeyboardShortcut(event) {
-        const { key } = event;
-        if (!visible)
-            return;
-        event.preventDefault();
-        event.stopPropagation();
-        key === "Escape" && hide();
-    }
-    function handleParentClick(event) {
-        // Since the menu is being rendered within the same parent as the activator,
-        // we need to stop the click event from bubbling up. If the Menu component
-        // gets added within a parent that has a click handler, any click on the
-        // menu will trigger the parent's click handler.
-        event.stopPropagation();
-    }
-}
-function SectionHeader({ text }) {
-    return (React.createElement("div", { className: styles.sectionHeader, "aria-hidden": true },
-        React.createElement(Typography.Typography, { element: "h6", size: "base", textColor: "textSecondary", fontWeight: "regular" }, text)));
-}
-function Action({ label, sectionLabel, icon, onClick, shouldFocus = false, }) {
-    const actionButtonRef = React.useRef();
-    React.useEffect(() => {
-        if (shouldFocus) {
-            // Focus on the next tick to allow useRefocusOnActivator to initialize
-            setTimeout(() => { var _a; return (_a = actionButtonRef.current) === null || _a === void 0 ? void 0 : _a.focus(); }, 0);
-        }
-    }, [shouldFocus]);
-    return (React.createElement("button", { role: "menuitem", type: "button", className: styles.action, key: label, onClick: onClick, ref: actionButtonRef },
-        icon && React.createElement(Icon.Icon, { name: icon }),
-        React.createElement(Typography.Typography, { element: "span", fontWeight: "semiBold", textColor: "textSecondary" },
-            sectionLabel && (React.createElement("span", { className: styles.screenReaderOnly }, sectionLabel)),
-            label)));
-}
-
-exports.Menu = Menu;

package/dist/Menu-bEaZjYl5.js

@@ -1,128 +0,0 @@
-import React, { useState, createRef, useId, useRef, useEffect } from 'react';
-import classnames from 'classnames';
-import { AnimatePresence, motion } from 'framer-motion';
-import { u as useOnKeyDown_2 } from './useOnKeyDown-C18_84hX.js';
-import { u as useRefocusOnActivator_2 } from './useRefocusOnActivator-DglpBGbZ.js';
-import { u as useSafeLayoutEffect_1 } from './useSafeLayoutEffect-CaTU1pfk.js';
-import { B as Button } from './Button-Bjdb1YXG.js';
-import { T as Typography } from './Typography-DprtqbXU.js';
-import { I as Icon } from './Icon-BABC7GCA.js';
-
-var styles = {"wrapper":"dT6M9tp1sZc-","menu":"Qmxlsj0D3qM-","above":"QTisUfiHwL4-","below":"qsch1dlpOHc-","left":"_0xR9-oxWMOU-","right":"gaZwsdyoG0k-","section":"LaKFjYCLHZc-","sectionHeader":"_7HB7dWnqCi0-","action":"ZuceCiefKqw-","overlay":"eKnUAucwwWU-","fullWidth":"oaxefr58z-E-","screenReaderOnly":"vz9opIdwHFg-"};
-
-const variation = {
-    overlayStartStop: { opacity: 0 },
-    startOrStop: (position) => {
-        let y = 10;
-        if (position === "below")
-            y *= -1;
-        if (window.innerWidth < 640)
-            y = 150;
-        return { opacity: 0, y };
-    },
-    done: { opacity: 1, y: 0 },
-};
-// eslint-disable-next-line max-statements
-function Menu({ activator, items }) {
-    var _a;
-    const [visible, setVisible] = useState(false);
-    const fullWidth = ((_a = activator === null || activator === void 0 ? void 0 : activator.props) === null || _a === void 0 ? void 0 : _a.fullWidth) || false;
-    const [position, setPosition] = useState({
-        vertical: "below",
-        horizontal: "right",
-    });
-    const wrapperRef = createRef();
-    const buttonID = useId();
-    const menuID = useId();
-    useOnKeyDown_2(handleKeyboardShortcut, ["Escape"]);
-    useSafeLayoutEffect_1(() => {
-        if (wrapperRef.current) {
-            const bounds = wrapperRef.current.getBoundingClientRect();
-            const newPosition = Object.assign({}, position);
-            if (bounds.top <= window.innerHeight / 2) {
-                newPosition.vertical = "below";
-            }
-            else {
-                newPosition.vertical = "above";
-            }
-            if (bounds.left <= window.innerWidth / 2) {
-                newPosition.horizontal = "right";
-            }
-            else {
-                newPosition.horizontal = "left";
-            }
-            setPosition(newPosition);
-        }
-    }, [visible, fullWidth]);
-    useRefocusOnActivator_2(visible);
-    if (!activator) {
-        activator = (React.createElement(Button, { fullWidth: true, label: "More Actions", icon: "more", type: "secondary" }));
-    }
-    const menuClasses = classnames(styles.menu, position.vertical === "above" && styles.above, position.vertical === "below" && styles.below, position.horizontal === "left" && styles.left, position.horizontal === "right" && styles.right);
-    const wrapperClasses = classnames(styles.wrapper, {
-        [styles.fullWidth]: fullWidth,
-    });
-    return (React.createElement("div", { className: wrapperClasses, ref: wrapperRef, onClick: handleParentClick },
-        React.cloneElement(activator, {
-            onClick: toggle(activator.props.onClick),
-            id: buttonID,
-            ariaControls: menuID,
-            ariaExpanded: visible,
-            ariaHaspopup: true,
-        }),
-        React.createElement(AnimatePresence, null, visible && (React.createElement(React.Fragment, null,
-            React.createElement(motion.div, { className: styles.overlay, onClick: toggle(), variants: variation, initial: "overlayStartStop", animate: "done", exit: "overlayStartStop", transition: {
-                    type: "tween",
-                    duration: 0.15,
-                } }),
-            React.createElement(motion.div, { className: menuClasses, role: "menu", "aria-labelledby": buttonID, id: menuID, onClick: hide, variants: variation, initial: "startOrStop", animate: "done", exit: "startOrStop", custom: position, transition: {
-                    type: "tween",
-                    duration: 0.25,
-                } }, items.map((item, key) => (React.createElement("div", { key: key, className: styles.section },
-                item.header && React.createElement(SectionHeader, { text: item.header }),
-                item.actions.map((action, index) => (React.createElement(Action, Object.assign({ sectionLabel: item.header, key: action.label, shouldFocus: key === 0 && index === 0 }, action)))))))))))));
-    function toggle(callbackPassthrough) {
-        return (event) => {
-            setVisible(!visible);
-            callbackPassthrough && callbackPassthrough(event);
-        };
-    }
-    function hide() {
-        setVisible(false);
-    }
-    function handleKeyboardShortcut(event) {
-        const { key } = event;
-        if (!visible)
-            return;
-        event.preventDefault();
-        event.stopPropagation();
-        key === "Escape" && hide();
-    }
-    function handleParentClick(event) {
-        // Since the menu is being rendered within the same parent as the activator,
-        // we need to stop the click event from bubbling up. If the Menu component
-        // gets added within a parent that has a click handler, any click on the
-        // menu will trigger the parent's click handler.
-        event.stopPropagation();
-    }
-}
-function SectionHeader({ text }) {
-    return (React.createElement("div", { className: styles.sectionHeader, "aria-hidden": true },
-        React.createElement(Typography, { element: "h6", size: "base", textColor: "textSecondary", fontWeight: "regular" }, text)));
-}
-function Action({ label, sectionLabel, icon, onClick, shouldFocus = false, }) {
-    const actionButtonRef = useRef();
-    useEffect(() => {
-        if (shouldFocus) {
-            // Focus on the next tick to allow useRefocusOnActivator to initialize
-            setTimeout(() => { var _a; return (_a = actionButtonRef.current) === null || _a === void 0 ? void 0 : _a.focus(); }, 0);
-        }
-    }, [shouldFocus]);
-    return (React.createElement("button", { role: "menuitem", type: "button", className: styles.action, key: label, onClick: onClick, ref: actionButtonRef },
-        icon && React.createElement(Icon, { name: icon }),
-        React.createElement(Typography, { element: "span", fontWeight: "semiBold", textColor: "textSecondary" },
-            sectionLabel && (React.createElement("span", { className: styles.screenReaderOnly }, sectionLabel)),
-            label)));
-}
-
-export { Menu as M };