@jobber/components 5.4.0 → 5.4.1

package/dist/{isObjectLike-C70Y3lqi.js → isObjectLike-BO8lA4wb.js}

@@ -1,4 +1,4 @@
-import { c as commonjsGlobal } from './_commonjsHelpers-9Wob29NB.js';
+import { c as commonjsGlobal } from './_commonjsHelpers-yArcpwK5.js';
 
 /**
  * Checks if `value` is the

package/dist/{isObjectLike-C9V4KzkX.js → isObjectLike-C1q80ak2.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var _commonjsHelpers = require('./_commonjsHelpers-DpQMrXb6.js');
+var _commonjsHelpers = require('./_commonjsHelpers-DM1uXIwd.js');
 
 /**
  * Checks if `value` is the

package/dist/{isSymbol-BmmjkP5A.js → isSymbol-BVPFaUw8.js}

@@ -1,4 +1,4 @@
-import { _ as _baseGetTag, i as isObjectLike_1 } from './isObjectLike-C70Y3lqi.js';
+import { _ as _baseGetTag, i as isObjectLike_1 } from './isObjectLike-BO8lA4wb.js';
 
 var baseGetTag = _baseGetTag,
     isObjectLike = isObjectLike_1;

package/dist/{isSymbol-Bz1FN_iT.js → isSymbol-BhKcMs_1.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var isObjectLike$1 = require('./isObjectLike-C9V4KzkX.js');
+var isObjectLike$1 = require('./isObjectLike-C1q80ak2.js');
 
 var baseGetTag = isObjectLike$1._baseGetTag,
     isObjectLike = isObjectLike$1.isObjectLike_1;

package/dist/{noop-BdoNLeqy.js → noop-Abw9dXST.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var _commonjsHelpers = require('./_commonjsHelpers-DpQMrXb6.js');
+var _commonjsHelpers = require('./_commonjsHelpers-DM1uXIwd.js');
 
 /**
  * This method returns `undefined`.

package/dist/{noop-DSe3gT3M.js → noop-lAzuHCiu.js}

@@ -1,4 +1,4 @@
-import { g as getDefaultExportFromCjs } from './_commonjsHelpers-9Wob29NB.js';
+import { g as getDefaultExportFromCjs } from './_commonjsHelpers-yArcpwK5.js';
 
 /**
  * This method returns `undefined`.

package/dist/styles.css

@@ -2106,25 +2106,32 @@ a.U9VsquOtk2I-.bg-l22drjd0-:hover {
 }
 
 .dT6M9tp1sZc- {
-  --menu-space: var(--space-small);
-  --menu-offset: var(--space-smallest);
-  display: inline-block;
   position: relative;
 }
 
+._9pvjsJS6vsg- {
+  z-index: 6;
+  z-index: var(--elevation-menu);
+}
+
+.G7Nzd9sctos- {
+  display: none;
+}
+
 .Qmxlsj0D3qM- {
-  position: fixed;
-  bottom: 0;
-  left: 0;
+  --menu-space: var(--space-small);
+  --menu-offset: var(--space-smallest);
   z-index: 6;
   z-index: var(--elevation-menu);
-  width: 100%;
   max-height: 72vh;
   box-shadow: 0px calc(16px / 16) calc(16px / 4) 0px
       rgba(0, 0, 0, 0.1),
     0px calc(16px / 4) 12px 0px rgba(0, 0, 0, 0.05);
   box-shadow: var(--shadow-base);
+  padding: calc(16px / 2);
   padding: var(--menu-space);
+  padding-bottom: calc(env(safe-area-inset-bottom) + (16px / 2));
+  padding-bottom: calc(env(safe-area-inset-bottom) + calc(16px / 2));
   padding-bottom: calc(env(safe-area-inset-bottom) + var(--menu-space));
   border-radius: 8px 8px 0 0;
   border-radius: var(--radius-base) var(--radius-base) 0 0;
@@ -2134,11 +2141,29 @@ a.U9VsquOtk2I-.bg-l22drjd0-:hover {
   background-color: var(--color-surface);
 }
 
+@media (max-width: 489px) {
+
+.Qmxlsj0D3qM- {
+    position: fixed;
+    right: 0;
+    bottom: 0;
+    left: 0;
+}
+  }
+
+@media (--small-screens-and-below) {
+
+.Qmxlsj0D3qM- {
+    position: fixed;
+    right: 0;
+    bottom: 0;
+    left: 0;
+}
+  }
+
 @media (min-width: 490px) {
 
 .Qmxlsj0D3qM- {
-    position: absolute;
-    left: auto;
     width: calc(16px * 12.5);
     width: calc(var(--base-unit) * 12.5);
     padding: var(--menu-space);
@@ -2153,8 +2178,6 @@ a.U9VsquOtk2I-.bg-l22drjd0-:hover {
 @media (--small-screens-and-up) {
 
 .Qmxlsj0D3qM- {
-    position: absolute;
-    left: auto;
     width: calc(16px * 12.5);
     width: calc(var(--base-unit) * 12.5);
     padding: var(--menu-space);
@@ -2166,72 +2189,6 @@ a.U9VsquOtk2I-.bg-l22drjd0-:hover {
 }
   }
 
-@media (min-width: 490px) {
-
-.QTisUfiHwL4- {
-    bottom: 100%;
-    margin-bottom: var(--menu-offset);
-}
-  }
-
-@media (--small-screens-and-up) {
-
-.QTisUfiHwL4- {
-    bottom: 100%;
-    margin-bottom: var(--menu-offset);
-}
-  }
-
-@media (min-width: 490px) {
-
-.qsch1dlpOHc- {
-    top: 100%;
-    bottom: auto;
-    margin-top: var(--menu-offset);
-}
-  }
-
-@media (--small-screens-and-up) {
-
-.qsch1dlpOHc- {
-    top: 100%;
-    bottom: auto;
-    margin-top: var(--menu-offset);
-}
-  }
-
-@media (min-width: 490px) {
-
-._0xR9-oxWMOU- {
-    right: 0;
-    left: auto;
-}
-  }
-
-@media (--small-screens-and-up) {
-
-._0xR9-oxWMOU- {
-    right: 0;
-    left: auto;
-}
-  }
-
-@media (min-width: 490px) {
-
-.gaZwsdyoG0k- {
-    right: auto;
-    left: 0;
-}
-  }
-
-@media (--small-screens-and-up) {
-
-.gaZwsdyoG0k- {
-    right: auto;
-    left: 0;
-}
-  }
-
 .LaKFjYCLHZc- {
   padding: var(--menu-space) 0;
   border-bottom: calc(16px / 16) solid hsl(200, 13%, 87%);
@@ -2271,9 +2228,12 @@ a.U9VsquOtk2I-.bg-l22drjd0-:hover {
 }
 
 .ZuceCiefKqw-:hover,
-.ZuceCiefKqw-:focus-visible {
+.ZuceCiefKqw-:focus {
   background-color: hsl(53, 21%, 93%);
   background-color: var(--color-surface--hover);
+}
+
+.ZuceCiefKqw-:focus-visible {
   outline-color: hsl(198, 12%, 57%);
   outline-color: var(--color-focus);
 }

package/dist/{useActiveLayout-1gRkOhr6.js → useActiveLayout-BFBibeZs.js}

@@ -1,5 +1,5 @@
-import { u as useResponsiveSizing } from './useResponsiveSizing-Dx52Oo_c.js';
-import { u as useDataListContext } from './DataListContext-Cs3vwPfq.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-1FtiTns8.js → useActiveLayout-DS9qSPFV.js}

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

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

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

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

@@ -1,5 +1,5 @@
-import { a as getAugmentedNamespace, c as commonjsGlobal } from './_commonjsHelpers-9Wob29NB.js';
-import { _ as _polyfillNode_process } from './_polyfill-node.process-DULs9xqc.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-DYRo1dhX.js → useBatchSelect-Byh2XLLU.js}

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

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var DataListContext = require('./DataListContext-D2URYpb7.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-COoUpDnC.js → useIsMounted-Bd33slsf.js}

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

package/dist/{useIsMounted-Bdw2VPX8.js → useIsMounted-D8XAjhll.js}

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

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

@@ -1,7 +1,7 @@
-import { a as getAugmentedNamespace, c as commonjsGlobal, g as getDefaultExportFromCjs } from './_commonjsHelpers-9Wob29NB.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-b7aZ0VC8.js';
-import { b as isObject_1 } from './isObjectLike-C70Y3lqi.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-BmzaLCvR.js → useResizeObserver-DyfGKgyY.js}

@@ -1,9 +1,9 @@
 'use strict';
 
-var _commonjsHelpers = require('./_commonjsHelpers-DpQMrXb6.js');
+var _commonjsHelpers = require('./_commonjsHelpers-DM1uXIwd.js');
 var React = require('react');
-var debounce$1 = require('./debounce-BSjzQc1s.js');
-var isObjectLike = require('./isObjectLike-C9V4KzkX.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-BIZWcRtV.js → useResponsiveSizing-DiCANbq8.js}

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

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

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

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

@@ -1,15 +1,15 @@
 'use strict';
 
 var React = require('react');
-var _commonjsHelpers = require('./_commonjsHelpers-DpQMrXb6.js');
-var _setToString = require('./_setToString-DyA8KZOp.js');
-var _defineProperty = require('./_defineProperty-BMeQrPqa.js');
-var _baseEach = require('./_baseEach-D5uvbQ79.js');
-var _getTag = require('./_getTag-D1xoTWwg.js');
-var isSymbol$1 = require('./isSymbol-Bz1FN_iT.js');
-var isObjectLike = require('./isObjectLike-C9V4KzkX.js');
-var debounce = require('./debounce-BSjzQc1s.js');
-var Icon = require('./Icon-BQSAXqG3.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-CY1pEFyl.js → useScrollToActive-CSczp0XZ.js}

@@ -1,13 +1,13 @@
 import React, { useRef, useId, useState, useEffect } from 'react';
-import { g as getDefaultExportFromCjs } from './_commonjsHelpers-9Wob29NB.js';
-import { _ as _overRest, a as _setToString, b as _baseFlatten } from './_setToString-Brdzo74S.js';
-import { b as _arrayMap, c as _baseGet, i as identity_1, e as eq_1, d as _isIndex } from './_defineProperty-10dMDdQL.js';
-import { _ as _baseEach, a as _baseIteratee } from './_baseEach-B1tAerUv.js';
-import { c as isArrayLike_1, g as _baseUnary, b as isArray_1 } from './_getTag-D98Jxkb6.js';
-import { i as isSymbol_1 } from './isSymbol-BmmjkP5A.js';
-import { b as isObject_1 } from './isObjectLike-C70Y3lqi.js';
-import { d as debounce } from './debounce-b7aZ0VC8.js';
-import { I as Icon } from './Icon-CNr_esQY.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.4.0",
+  "version": "5.4.1",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -404,7 +404,7 @@
   "dependencies": {
     "@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": "dc84fb83c993bf0e03e707a7958afbb57500b791"
+  "gitHead": "c2a1e8367d831e492cbf7f194ccb05cdc7f705fa"
 }

package/dist/Menu-BEgisbQN.js

@@ -1,130 +0,0 @@
-'use strict';
-
-var React = require('react');
-var classnames = require('classnames');
-var framerMotion = require('framer-motion');
-var useOnKeyDown = require('./useOnKeyDown-Nnmik5m5.js');
-var useRefocusOnActivator = require('./useRefocusOnActivator-CgtKXdkc.js');
-var useSafeLayoutEffect = require('./useSafeLayoutEffect-Bd3MCH4w.js');
-var Button = require('./Button-DLrOpvFH.js');
-var Typography = require('./Typography-DycaKhYB.js');
-var Icon = require('./Icon-BQSAXqG3.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", textCase: "none" }, 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;