@razorpay/blade 12.68.0 → 12.89.0

package/build/lib/web/development/components/ListView/ListViewContext.js

@@ -0,0 +1,12 @@
+import React__default from 'react';
+
+var ListViewContext = /*#__PURE__*/React__default.createContext({
+  isInsideListView: false
+});
+var ListViewProvider = ListViewContext.Provider;
+var useListViewContext = function useListViewContext() {
+  return React__default.useContext(ListViewContext);
+};
+
+export { ListViewProvider, useListViewContext };
+//# sourceMappingURL=ListViewContext.js.map

package/build/lib/web/development/components/ListView/ListViewContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListViewContext.js","sources":["../../../../../../src/components/ListView/ListViewContext.tsx"],"sourcesContent":["import React from 'react';\n\ntype ListViewContextType = {\n  isInsideListView: boolean;\n};\n\nconst ListViewContext = React.createContext<ListViewContextType>({\n  isInsideListView: false,\n});\nconst ListViewProvider = ListViewContext.Provider;\n\nconst useListViewContext = (): ListViewContextType => {\n  return React.useContext(ListViewContext);\n};\n\nexport { useListViewContext, ListViewProvider };\nexport type { ListViewContextType };\n"],"names":["ListViewContext","React","createContext","isInsideListView","ListViewProvider","Provider","useListViewContext","useContext"],"mappings":";;AAMA,IAAMA,eAAe,gBAAGC,cAAK,CAACC,aAAa,CAAsB;AAC/DC,EAAAA,gBAAgB,EAAE,KAAA;AACpB,CAAC,CAAC,CAAA;AACF,IAAMC,gBAAgB,GAAGJ,eAAe,CAACK,SAAQ;AAEjD,IAAMC,kBAAkB,GAAG,SAArBA,kBAAkBA,GAA8B;AACpD,EAAA,OAAOL,cAAK,CAACM,UAAU,CAACP,eAAe,CAAC,CAAA;AAC1C;;;;"}

package/build/lib/web/development/components/ListView/ListViewFilters.web.js

@@ -12,7 +12,7 @@ import '../Input/SearchInput/index.js';
 import { useId } from '../../utils/useId.js';
 import { useIsMobile } from '../../utils/useIsMobile.js';
 import '../../utils/isValidAllowedChildren/index.js';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
 import { getComponentId } from '../../utils/isValidAllowedChildren/isValidAllowedChildren.js';
 import { SearchInput } from '../Input/SearchInput/SearchInput.js';
@@ -64,79 +64,88 @@ var ListViewFilters = function ListViewFilters(_ref) {
   var isMobile = useIsMobile();
   var showSearchInput = onSearchChange || onSearchClear || searchValuePlaceholder || searchName;
   var isSearchTrailingDropDown = /*#__PURE__*/React__default.isValidElement(searchTrailing) && getComponentId(searchTrailing) === 'Dropdown';
-  return /*#__PURE__*/jsxs(ListViewFiltersProvider, {
+  return /*#__PURE__*/jsx(ListViewFiltersProvider, {
     value: {
       listViewSelectedFilters: listViewSelectedFilters,
       setListViewSelectedFilters: setListViewSelectedFilters,
       selectedFiltersCount: selectedFiltersCount
     },
-    children: [isMobile && showSearchInput && /*#__PURE__*/jsx(SearchInput, {
-      label: "",
-      value: searchValue,
-      placeholder: searchValuePlaceholder,
-      name: searchNameValue || searchId,
-      onChange: function onChange(_ref2) {
-        var name = _ref2.name,
-          value = _ref2.value;
-        return onSearchChange === null || onSearchChange === void 0 ? void 0 : onSearchChange({
-          name: name,
-          value: value
-        });
-      },
-      onClearButtonClick: onSearchClear,
-      trailing: searchTrailing
-    }), /*#__PURE__*/jsxs(BaseBox, {
-      children: [/*#__PURE__*/jsxs(BaseBox, _objectSpread(_objectSpread(_objectSpread({}, metaAttribute({
-        name: MetaConstants.ListViewFilter,
-        testID: testID
-      })), makeAnalyticsAttribute(rest)), {}, {
-        display: "flex",
-        justifyContent: "space-between",
-        children: [/*#__PURE__*/jsx(Box, {
-          position: "relative",
+    children: /*#__PURE__*/jsxs(BaseBox, {
+      backgroundColor: "surface.background.gray.intense",
+      paddingX: "spacing.3",
+      paddingTop: "spacing.3",
+      paddingBottom: children ? 'spacing.0' : 'spacing.3',
+      borderBottomWidth: "thin",
+      borderBottomColor: "surface.border.gray.muted",
+      borderBottomStyle: "solid",
+      children: [isMobile && showSearchInput && /*#__PURE__*/jsx(SearchInput, {
+        label: "",
+        value: searchValue,
+        placeholder: searchValuePlaceholder,
+        name: searchNameValue || searchId,
+        onChange: function onChange(_ref2) {
+          var name = _ref2.name,
+            value = _ref2.value;
+          return onSearchChange === null || onSearchChange === void 0 ? void 0 : onSearchChange({
+            name: name,
+            value: value
+          });
+        },
+        onClearButtonClick: onSearchClear,
+        trailing: searchTrailing
+      }), /*#__PURE__*/jsxs(BaseBox, {
+        children: [/*#__PURE__*/jsxs(BaseBox, _objectSpread(_objectSpread(_objectSpread({}, metaAttribute({
+          name: MetaConstants.ListViewFilter,
+          testID: testID
+        })), makeAnalyticsAttribute(rest)), {}, {
           display: "flex",
-          flexDirection: "column",
-          marginRight: "spacing.3",
-          flex: "1",
-          minWidth: "0px",
-          children: /*#__PURE__*/jsx(StyledQuickFilterContainer, {
-            overflow: "scroll",
-            width: "100%",
-            paddingTop: isMobile ? 'spacing.4' : 'spacing.1',
-            paddingBottom: "spacing.1",
-            paddingLeft: "spacing.1",
-            children: quickFilters
-          })
-        }), /*#__PURE__*/jsxs(BaseBox, {
-          display: "flex",
-          alignItems: "center",
-          flexShrink: "0",
-          children: [!isMobile && showSearchInput && /*#__PURE__*/jsx(Box, {
-            width: isSearchTrailingDropDown ? '280px' : '208px',
-            children: /*#__PURE__*/jsx(SearchInput, {
-              label: "",
-              value: searchValue,
-              placeholder: searchValuePlaceholder,
-              name: searchNameValue || searchId,
-              onChange: function onChange(_ref3) {
-                var name = _ref3.name,
-                  value = _ref3.value;
-                return onSearchChange === null || onSearchChange === void 0 ? void 0 : onSearchChange({
-                  name: name,
-                  value: value
-                });
-              },
-              onClearButtonClick: onSearchClear,
-              size: "medium",
-              trailing: searchTrailing
+          justifyContent: "space-between",
+          children: [/*#__PURE__*/jsx(Box, {
+            position: "relative",
+            display: "flex",
+            flexDirection: "column",
+            marginRight: "spacing.3",
+            flex: "1",
+            minWidth: "0px",
+            children: /*#__PURE__*/jsx(StyledQuickFilterContainer, {
+              overflow: "scroll",
+              width: "100%",
+              paddingTop: isMobile ? 'spacing.4' : 'spacing.1',
+              paddingBottom: "spacing.1",
+              paddingLeft: "spacing.1",
+              children: quickFilters
             })
-          }), actions]
+          }), /*#__PURE__*/jsxs(BaseBox, {
+            display: "flex",
+            alignItems: "center",
+            flexShrink: "0",
+            children: [!isMobile && showSearchInput && /*#__PURE__*/jsx(Box, {
+              width: isSearchTrailingDropDown ? '280px' : '208px',
+              children: /*#__PURE__*/jsx(SearchInput, {
+                label: "",
+                value: searchValue,
+                placeholder: searchValuePlaceholder,
+                name: searchNameValue || searchId,
+                onChange: function onChange(_ref3) {
+                  var name = _ref3.name,
+                    value = _ref3.value;
+                  return onSearchChange === null || onSearchChange === void 0 ? void 0 : onSearchChange({
+                    name: name,
+                    value: value
+                  });
+                },
+                onClearButtonClick: onSearchClear,
+                size: "medium",
+                trailing: searchTrailing
+              })
+            }), actions]
+          })]
+        })), /*#__PURE__*/jsx(BaseBox, {
+          display: "flex",
+          children: children
         })]
-      })), /*#__PURE__*/jsx(BaseBox, {
-        display: "flex",
-        children: children
       })]
-    })]
+    })
   });
 };
 

package/build/lib/web/development/components/ListView/ListViewFilters.web.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListViewFilters.web.js","sources":["../../../../../../src/components/ListView/ListViewFilters.web.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport styled from 'styled-components';\nimport type { ListViewFilterProps, ListViewSelectedFiltersType } from './types';\nimport { ListViewFiltersProvider } from './ListViewFiltersContext.web';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\nimport BaseBox from '~components/Box/BaseBox';\nimport { MetaConstants, metaAttribute } from '~utils/metaAttribute';\nimport { Box } from '~components/Box';\nimport { SearchInput } from '~components/Input/SearchInput';\nimport { useId } from '~utils/useId';\nimport { useIsMobile } from '~utils/useIsMobile';\nimport { getComponentId } from '~utils/isValidAllowedChildren';\n\nconst StyledQuickFilterContainer = styled(BaseBox)({\n  /* For Webkit (Chrome, Safari) */\n  '::-webkit-scrollbar': {\n    display: 'none',\n  },\n  /* For Firefox */\n  scrollbarWidth: 'none',\n  /* For Edge */\n  msOverflowStyle: 'none',\n});\n\nconst ListViewFilters = ({\n  testID,\n  children,\n  quickFilters,\n  onSearchChange,\n  searchValue,\n  searchValuePlaceholder,\n  searchName,\n  showQuickFilters,\n  onShowQuickFiltersChange,\n  showFilters: showFiltersProp,\n  onShowFiltersChange,\n  onSearchClear,\n  selectedFiltersCount = 0,\n  searchTrailing,\n  actions,\n  ...rest\n}: ListViewFilterProps): React.ReactElement => {\n  const [\n    listViewSelectedFilters,\n    setListViewSelectedFilters,\n  ] = useState<ListViewSelectedFiltersType>({});\n  const searchId = useId('search-input');\n  const searchNameValue = searchName || searchId;\n  const isMobile = useIsMobile();\n\n  const showSearchInput = onSearchChange || onSearchClear || searchValuePlaceholder || searchName;\n  const isSearchTrailingDropDown =\n    React.isValidElement(searchTrailing) && getComponentId(searchTrailing) === 'Dropdown';\n\n  return (\n    <ListViewFiltersProvider\n      value={{\n        listViewSelectedFilters,\n        setListViewSelectedFilters,\n        selectedFiltersCount,\n      }}\n    >\n      {isMobile && showSearchInput && (\n        <SearchInput\n          label=\"\"\n          value={searchValue}\n          placeholder={searchValuePlaceholder}\n          name={searchNameValue || searchId}\n          onChange={({ name, value }) => onSearchChange?.({ name, value })}\n          onClearButtonClick={onSearchClear}\n          trailing={searchTrailing}\n        />\n      )}\n      <BaseBox>\n        <BaseBox\n          {...metaAttribute({ name: MetaConstants.ListViewFilter, testID })}\n          {...makeAnalyticsAttribute(rest)}\n          display=\"flex\"\n          justifyContent=\"space-between\"\n        >\n          <Box\n            position=\"relative\"\n            display=\"flex\"\n            flexDirection=\"column\"\n            marginRight=\"spacing.3\"\n            flex=\"1\"\n            minWidth=\"0px\"\n          >\n            <StyledQuickFilterContainer\n              overflow=\"scroll\"\n              width=\"100%\"\n              paddingTop={isMobile ? 'spacing.4' : 'spacing.1'}\n              paddingBottom=\"spacing.1\"\n              paddingLeft=\"spacing.1\"\n            >\n              {quickFilters}\n            </StyledQuickFilterContainer>\n          </Box>\n\n          <BaseBox display=\"flex\" alignItems=\"center\" flexShrink=\"0\">\n            {!isMobile && showSearchInput && (\n              <Box width={isSearchTrailingDropDown ? '280px' : '208px'}>\n                <SearchInput\n                  label=\"\"\n                  value={searchValue}\n                  placeholder={searchValuePlaceholder}\n                  name={searchNameValue || searchId}\n                  onChange={({ name, value }) => onSearchChange?.({ name, value })}\n                  onClearButtonClick={onSearchClear}\n                  size=\"medium\"\n                  trailing={searchTrailing}\n                />\n              </Box>\n            )}\n            {actions}\n          </BaseBox>\n        </BaseBox>\n        <BaseBox display=\"flex\">{children}</BaseBox>\n      </BaseBox>\n    </ListViewFiltersProvider>\n  );\n};\n\nexport { ListViewFilters };\n"],"names":["StyledQuickFilterContainer","styled","BaseBox","withConfig","displayName","componentId","display","scrollbarWidth","msOverflowStyle","ListViewFilters","_ref","testID","children","quickFilters","onSearchChange","searchValue","searchValuePlaceholder","searchName","showQuickFilters","onShowQuickFiltersChange","showFiltersProp","showFilters","onShowFiltersChange","onSearchClear","_ref$selectedFiltersC","selectedFiltersCount","searchTrailing","actions","rest","_objectWithoutProperties","_excluded","_useState","useState","_useState2","_slicedToArray","listViewSelectedFilters","setListViewSelectedFilters","searchId","useId","searchNameValue","isMobile","useIsMobile","showSearchInput","isSearchTrailingDropDown","React","isValidElement","getComponentId","_jsxs","ListViewFiltersProvider","value","_jsx","SearchInput","label","placeholder","name","onChange","_ref2","onClearButtonClick","trailing","_objectSpread","metaAttribute","MetaConstants","ListViewFilter","makeAnalyticsAttribute","justifyContent","Box","position","flexDirection","marginRight","flex","minWidth","overflow","width","paddingTop","paddingBottom","paddingLeft","alignItems","flexShrink","_ref3","size"],"mappings":"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"}
+{"version":3,"file":"ListViewFilters.web.js","sources":["../../../../../../src/components/ListView/ListViewFilters.web.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport styled from 'styled-components';\nimport type { ListViewFilterProps, ListViewSelectedFiltersType } from './types';\nimport { ListViewFiltersProvider } from './ListViewFiltersContext.web';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\nimport BaseBox from '~components/Box/BaseBox';\nimport { MetaConstants, metaAttribute } from '~utils/metaAttribute';\nimport { Box } from '~components/Box';\nimport { SearchInput } from '~components/Input/SearchInput';\nimport { useId } from '~utils/useId';\nimport { useIsMobile } from '~utils/useIsMobile';\nimport { getComponentId } from '~utils/isValidAllowedChildren';\n\nconst StyledQuickFilterContainer = styled(BaseBox)({\n  /* For Webkit (Chrome, Safari) */\n  '::-webkit-scrollbar': {\n    display: 'none',\n  },\n  /* For Firefox */\n  scrollbarWidth: 'none',\n  /* For Edge */\n  msOverflowStyle: 'none',\n});\n\nconst ListViewFilters = ({\n  testID,\n  children,\n  quickFilters,\n  onSearchChange,\n  searchValue,\n  searchValuePlaceholder,\n  searchName,\n  showQuickFilters,\n  onShowQuickFiltersChange,\n  showFilters: showFiltersProp,\n  onShowFiltersChange,\n  onSearchClear,\n  selectedFiltersCount = 0,\n  searchTrailing,\n  actions,\n  ...rest\n}: ListViewFilterProps): React.ReactElement => {\n  const [\n    listViewSelectedFilters,\n    setListViewSelectedFilters,\n  ] = useState<ListViewSelectedFiltersType>({});\n  const searchId = useId('search-input');\n  const searchNameValue = searchName || searchId;\n  const isMobile = useIsMobile();\n  const showSearchInput = onSearchChange || onSearchClear || searchValuePlaceholder || searchName;\n  const isSearchTrailingDropDown =\n    React.isValidElement(searchTrailing) && getComponentId(searchTrailing) === 'Dropdown';\n\n  return (\n    <ListViewFiltersProvider\n      value={{\n        listViewSelectedFilters,\n        setListViewSelectedFilters,\n        selectedFiltersCount,\n      }}\n    >\n      <BaseBox\n        backgroundColor=\"surface.background.gray.intense\"\n        paddingX=\"spacing.3\"\n        paddingTop=\"spacing.3\"\n        paddingBottom={children ? 'spacing.0' : 'spacing.3'}\n        borderBottomWidth=\"thin\"\n        borderBottomColor=\"surface.border.gray.muted\"\n        borderBottomStyle=\"solid\"\n      >\n        {isMobile && showSearchInput && (\n          <SearchInput\n            label=\"\"\n            value={searchValue}\n            placeholder={searchValuePlaceholder}\n            name={searchNameValue || searchId}\n            onChange={({ name, value }) => onSearchChange?.({ name, value })}\n            onClearButtonClick={onSearchClear}\n            trailing={searchTrailing}\n          />\n        )}\n        <BaseBox>\n          <BaseBox\n            {...metaAttribute({ name: MetaConstants.ListViewFilter, testID })}\n            {...makeAnalyticsAttribute(rest)}\n            display=\"flex\"\n            justifyContent=\"space-between\"\n          >\n            <Box\n              position=\"relative\"\n              display=\"flex\"\n              flexDirection=\"column\"\n              marginRight=\"spacing.3\"\n              flex=\"1\"\n              minWidth=\"0px\"\n            >\n              <StyledQuickFilterContainer\n                overflow=\"scroll\"\n                width=\"100%\"\n                paddingTop={isMobile ? 'spacing.4' : 'spacing.1'}\n                paddingBottom=\"spacing.1\"\n                paddingLeft=\"spacing.1\"\n              >\n                {quickFilters}\n              </StyledQuickFilterContainer>\n            </Box>\n\n            <BaseBox display=\"flex\" alignItems=\"center\" flexShrink=\"0\">\n              {!isMobile && showSearchInput && (\n                <Box width={isSearchTrailingDropDown ? '280px' : '208px'}>\n                  <SearchInput\n                    label=\"\"\n                    value={searchValue}\n                    placeholder={searchValuePlaceholder}\n                    name={searchNameValue || searchId}\n                    onChange={({ name, value }) => onSearchChange?.({ name, value })}\n                    onClearButtonClick={onSearchClear}\n                    size=\"medium\"\n                    trailing={searchTrailing}\n                  />\n                </Box>\n              )}\n              {actions}\n            </BaseBox>\n          </BaseBox>\n          <BaseBox display=\"flex\">{children}</BaseBox>\n        </BaseBox>\n      </BaseBox>\n    </ListViewFiltersProvider>\n  );\n};\n\nexport { ListViewFilters };\n"],"names":["StyledQuickFilterContainer","styled","BaseBox","withConfig","displayName","componentId","display","scrollbarWidth","msOverflowStyle","ListViewFilters","_ref","testID","children","quickFilters","onSearchChange","searchValue","searchValuePlaceholder","searchName","showQuickFilters","onShowQuickFiltersChange","showFiltersProp","showFilters","onShowFiltersChange","onSearchClear","_ref$selectedFiltersC","selectedFiltersCount","searchTrailing","actions","rest","_objectWithoutProperties","_excluded","_useState","useState","_useState2","_slicedToArray","listViewSelectedFilters","setListViewSelectedFilters","searchId","useId","searchNameValue","isMobile","useIsMobile","showSearchInput","isSearchTrailingDropDown","React","isValidElement","getComponentId","_jsx","ListViewFiltersProvider","value","_jsxs","backgroundColor","paddingX","paddingTop","paddingBottom","borderBottomWidth","borderBottomColor","borderBottomStyle","SearchInput","label","placeholder","name","onChange","_ref2","onClearButtonClick","trailing","_objectSpread","metaAttribute","MetaConstants","ListViewFilter","makeAnalyticsAttribute","justifyContent","Box","position","flexDirection","marginRight","flex","minWidth","overflow","width","paddingLeft","alignItems","flexShrink","_ref3","size"],"mappings":"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"}

package/build/lib/web/development/components/Menu/Menu.web.js

@@ -3,11 +3,13 @@ import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { useMergeRefs, FloatingNode, FloatingList, FloatingPortal, FloatingFocusManager, useFloatingParentNodeId, FloatingTree } from '@floating-ui/react';
 import * as React from 'react';
 import { useMenu, useFloatingMenuSetup, MenuContext } from './useMenu.js';
+import { TopNavOverlayThemeOverride } from '../TopNav/TopNavOverlayThemeOverride.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var MenuTree = function MenuTree(_ref) {
+  var _menuOverlayChild$pro;
   var children = _ref.children,
     _ref$openInteraction = _ref.openInteraction,
     openInteraction = _ref$openInteraction === void 0 ? 'click' : _ref$openInteraction,
@@ -20,11 +22,17 @@ var MenuTree = function MenuTree(_ref) {
   var elementsRef = React.useRef([]);
   var labelsRef = React.useRef([]);
   var parent = useMenu();
+  var _ref2 = React.Children.toArray(children),
+    _ref3 = _slicedToArray(_ref2, 2),
+    menuTriggerChild = _ref3[0],
+    menuOverlayChild = _ref3[1];
+  var overlayOffset = menuOverlayChild === null || menuOverlayChild === void 0 || (_menuOverlayChild$pro = menuOverlayChild.props) === null || _menuOverlayChild$pro === void 0 ? void 0 : _menuOverlayChild$pro.offset;
   var _useFloatingMenuSetup = useFloatingMenuSetup({
       elementsRef: elementsRef,
       openInteraction: openInteraction,
       onOpenChange: onOpenChange,
-      isOpen: isOpenControlled
+      isOpen: isOpenControlled,
+      overlayOffset: overlayOffset
     }),
     getReferenceProps = _useFloatingMenuSetup.getReferenceProps,
     getFloatingProps = _useFloatingMenuSetup.getFloatingProps,
@@ -52,10 +60,6 @@ var MenuTree = function MenuTree(_ref) {
     style: floatingStyles,
     _transitionStyle: floatingTransitionStyles
   }, getFloatingProps());
-  var _ref2 = React.Children.toArray(children),
-    _ref3 = _slicedToArray(_ref2, 2),
-    menuTriggerChild = _ref3[0],
-    menuOverlayChild = _ref3[1];
   var triggerWithReferenceProps = /*#__PURE__*/React.cloneElement(menuTriggerChild, _objectSpread(_objectSpread(_objectSpread({}, menuTriggerChild.props), referenceProps), {}, {
     _hasFocusInside: hasFocusInside,
     _isMenuTrigger: true
@@ -78,7 +82,9 @@ var MenuTree = function MenuTree(_ref) {
             modal: false,
             initialFocus: -1,
             returnFocus: !isNested,
-            children: overlayWithFloatingProps
+            children: /*#__PURE__*/jsx(TopNavOverlayThemeOverride, {
+              children: overlayWithFloatingProps
+            })
           })
         })
       })]

package/build/lib/web/development/components/Menu/Menu.web.js.map

@@ -1 +1 @@
-{"version":3,"file":"Menu.web.js","sources":["../../../../../../src/components/Menu/Menu.web.tsx"],"sourcesContent":["import {\n  FloatingFocusManager,\n  FloatingList,\n  FloatingNode,\n  FloatingPortal,\n  FloatingTree,\n  useFloatingParentNodeId,\n  useMergeRefs,\n} from '@floating-ui/react';\nimport * as React from 'react';\nimport { MenuContext, useFloatingMenuSetup, useMenu } from './useMenu';\nimport type { MenuProps } from './types';\n\nconst MenuTree = ({\n  children,\n  openInteraction = 'click',\n  onOpenChange,\n  isOpen: isOpenControlled,\n}: MenuProps): React.ReactElement => {\n  const [hasFocusInside, setHasFocusInside] = React.useState(false);\n\n  const elementsRef = React.useRef<(HTMLButtonElement | null)[]>([]);\n  const labelsRef = React.useRef<(string | null)[]>([]);\n  const parent = useMenu();\n\n  const {\n    getReferenceProps,\n    getFloatingProps,\n    getItemProps,\n    item,\n    refs,\n    floatingStyles,\n    isOpen,\n    nodeId,\n    isNested,\n    context,\n    isMounted,\n    floatingTransitionStyles,\n  } = useFloatingMenuSetup({\n    elementsRef,\n    openInteraction,\n    onOpenChange,\n    isOpen: isOpenControlled,\n  });\n\n  const referenceProps = {\n    ref: useMergeRefs([refs.setReference, item.ref]),\n    ...getReferenceProps(\n      parent.getItemProps({\n        onFocus() {\n          setHasFocusInside(false);\n          parent.setHasFocusInside(true);\n        },\n      }),\n    ),\n  };\n\n  const floatingProps = {\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    ref: refs.setFloating as any,\n    style: floatingStyles,\n    _transitionStyle: floatingTransitionStyles,\n    ...getFloatingProps(),\n  };\n\n  const [menuTriggerChild, menuOverlayChild] = React.Children.toArray(children) as [\n    React.ReactElement,\n    React.ReactElement,\n  ];\n\n  const triggerWithReferenceProps = React.cloneElement(menuTriggerChild, {\n    ...menuTriggerChild.props,\n    ...referenceProps,\n    _hasFocusInside: hasFocusInside,\n    _isMenuTrigger: true,\n  });\n\n  const overlayWithFloatingProps = React.cloneElement(menuOverlayChild, {\n    ...menuOverlayChild.props,\n    ...floatingProps,\n  });\n\n  return (\n    <FloatingNode id={nodeId}>\n      <MenuContext.Provider\n        value={{\n          getItemProps,\n          setHasFocusInside,\n          isOpen,\n        }}\n      >\n        {triggerWithReferenceProps}\n        <FloatingList elementsRef={elementsRef} labelsRef={labelsRef}>\n          {isMounted && (\n            <FloatingPortal>\n              <FloatingFocusManager\n                context={context}\n                modal={false}\n                initialFocus={-1}\n                returnFocus={!isNested}\n              >\n                {overlayWithFloatingProps}\n              </FloatingFocusManager>\n            </FloatingPortal>\n          )}\n        </FloatingList>\n      </MenuContext.Provider>\n    </FloatingNode>\n  );\n};\n\nconst Menu = (props: MenuProps): React.ReactElement => {\n  const parentId = useFloatingParentNodeId();\n\n  if (parentId === null) {\n    return (\n      <FloatingTree>\n        <MenuTree {...props} />\n      </FloatingTree>\n    );\n  }\n\n  return <MenuTree {...props} />;\n};\n\nexport { Menu };\n"],"names":["MenuTree","_ref","children","_ref$openInteraction","openInteraction","onOpenChange","isOpenControlled","isOpen","_React$useState","React","useState","_React$useState2","_slicedToArray","hasFocusInside","setHasFocusInside","elementsRef","useRef","labelsRef","parent","useMenu","_useFloatingMenuSetup","useFloatingMenuSetup","getReferenceProps","getFloatingProps","getItemProps","item","refs","floatingStyles","nodeId","isNested","context","isMounted","floatingTransitionStyles","referenceProps","_objectSpread","ref","useMergeRefs","setReference","onFocus","floatingProps","setFloating","style","_transitionStyle","_ref2","Children","toArray","_ref3","menuTriggerChild","menuOverlayChild","triggerWithReferenceProps","cloneElement","props","_hasFocusInside","_isMenuTrigger","overlayWithFloatingProps","_jsx","FloatingNode","id","_jsxs","MenuContext","Provider","value","FloatingList","FloatingPortal","FloatingFocusManager","modal","initialFocus","returnFocus","Menu","parentId","useFloatingParentNodeId","FloatingTree"],"mappings":"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"}
+{"version":3,"file":"Menu.web.js","sources":["../../../../../../src/components/Menu/Menu.web.tsx"],"sourcesContent":["import {\n  FloatingFocusManager,\n  FloatingList,\n  FloatingNode,\n  FloatingPortal,\n  FloatingTree,\n  useFloatingParentNodeId,\n  useMergeRefs,\n} from '@floating-ui/react';\nimport * as React from 'react';\nimport { MenuContext, useFloatingMenuSetup, useMenu } from './useMenu';\nimport type { MenuProps } from './types';\nimport { TopNavOverlayThemeOverride } from '~components/TopNav/TopNavOverlayThemeOverride';\n\nconst MenuTree = ({\n  children,\n  openInteraction = 'click',\n  onOpenChange,\n  isOpen: isOpenControlled,\n}: MenuProps): React.ReactElement => {\n  const [hasFocusInside, setHasFocusInside] = React.useState(false);\n\n  const elementsRef = React.useRef<(HTMLButtonElement | null)[]>([]);\n  const labelsRef = React.useRef<(string | null)[]>([]);\n  const parent = useMenu();\n  const [menuTriggerChild, menuOverlayChild] = React.Children.toArray(children) as [\n    React.ReactElement,\n    React.ReactElement,\n  ];\n  const overlayOffset = menuOverlayChild?.props?.offset;\n\n  const {\n    getReferenceProps,\n    getFloatingProps,\n    getItemProps,\n    item,\n    refs,\n    floatingStyles,\n    isOpen,\n    nodeId,\n    isNested,\n    context,\n    isMounted,\n    floatingTransitionStyles,\n  } = useFloatingMenuSetup({\n    elementsRef,\n    openInteraction,\n    onOpenChange,\n    isOpen: isOpenControlled,\n    overlayOffset,\n  });\n\n  const referenceProps = {\n    ref: useMergeRefs([refs.setReference, item.ref]),\n    ...getReferenceProps(\n      parent.getItemProps({\n        onFocus() {\n          setHasFocusInside(false);\n          parent.setHasFocusInside(true);\n        },\n      }),\n    ),\n  };\n\n  const floatingProps = {\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    ref: refs.setFloating as any,\n    style: floatingStyles,\n    _transitionStyle: floatingTransitionStyles,\n    ...getFloatingProps(),\n  };\n\n  const triggerWithReferenceProps = React.cloneElement(menuTriggerChild, {\n    ...menuTriggerChild.props,\n    ...referenceProps,\n    _hasFocusInside: hasFocusInside,\n    _isMenuTrigger: true,\n  });\n\n  const overlayWithFloatingProps = React.cloneElement(menuOverlayChild, {\n    ...menuOverlayChild.props,\n    ...floatingProps,\n  });\n\n  return (\n    <FloatingNode id={nodeId}>\n      <MenuContext.Provider\n        value={{\n          getItemProps,\n          setHasFocusInside,\n          isOpen,\n        }}\n      >\n        {triggerWithReferenceProps}\n        <FloatingList elementsRef={elementsRef} labelsRef={labelsRef}>\n          {isMounted && (\n            <FloatingPortal>\n              <FloatingFocusManager\n                context={context}\n                modal={false}\n                initialFocus={-1}\n                returnFocus={!isNested}\n              >\n                <TopNavOverlayThemeOverride>{overlayWithFloatingProps}</TopNavOverlayThemeOverride>\n              </FloatingFocusManager>\n            </FloatingPortal>\n          )}\n        </FloatingList>\n      </MenuContext.Provider>\n    </FloatingNode>\n  );\n};\n\nconst Menu = (props: MenuProps): React.ReactElement => {\n  const parentId = useFloatingParentNodeId();\n\n  if (parentId === null) {\n    return (\n      <FloatingTree>\n        <MenuTree {...props} />\n      </FloatingTree>\n    );\n  }\n\n  return <MenuTree {...props} />;\n};\n\nexport { Menu };\n"],"names":["MenuTree","_ref","_menuOverlayChild$pro","children","_ref$openInteraction","openInteraction","onOpenChange","isOpenControlled","isOpen","_React$useState","React","useState","_React$useState2","_slicedToArray","hasFocusInside","setHasFocusInside","elementsRef","useRef","labelsRef","parent","useMenu","_ref2","Children","toArray","_ref3","menuTriggerChild","menuOverlayChild","overlayOffset","props","offset","_useFloatingMenuSetup","useFloatingMenuSetup","getReferenceProps","getFloatingProps","getItemProps","item","refs","floatingStyles","nodeId","isNested","context","isMounted","floatingTransitionStyles","referenceProps","_objectSpread","ref","useMergeRefs","setReference","onFocus","floatingProps","setFloating","style","_transitionStyle","triggerWithReferenceProps","cloneElement","_hasFocusInside","_isMenuTrigger","overlayWithFloatingProps","_jsx","FloatingNode","id","_jsxs","MenuContext","Provider","value","FloatingList","FloatingPortal","FloatingFocusManager","modal","initialFocus","returnFocus","TopNavOverlayThemeOverride","Menu","parentId","useFloatingParentNodeId","FloatingTree"],"mappings":"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"}

package/build/lib/web/development/components/Menu/MenuItem.web.js

@@ -37,7 +37,7 @@ var MenuItem = /*#__PURE__*/React__default.forwardRef(function (_ref, forwardedR
     description: description,
     leading: leading,
     trailing: _isMenuTrigger ? /*#__PURE__*/jsx(ChevronRightIcon, {
-      color: "interactive.icon.gray.muted"
+      color: "interactive.icon.gray.normal"
     }) : trailing,
     as: as !== null && as !== void 0 ? as : defaultAs,
     href: href,

package/build/lib/web/development/components/Menu/MenuItem.web.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuItem.web.js","sources":["../../../../../../src/components/Menu/MenuItem.web.tsx"],"sourcesContent":["import { useFloatingTree, useListItem, useMergeRefs } from '@floating-ui/react';\nimport React from 'react';\nimport type { MenuItemProps } from './types';\nimport { useMenu } from './useMenu';\nimport { BaseMenuItem } from '~components/BaseMenu';\nimport { ChevronRightIcon } from '~components/Icons';\n\nconst MenuItem = React.forwardRef<HTMLButtonElement, MenuItemProps>(\n  (\n    {\n      title,\n      isDisabled,\n      description,\n      leading,\n      trailing,\n      _isMenuTrigger,\n      _hasFocusInside,\n      href,\n      target,\n      children,\n      as,\n      ...props\n    },\n    forwardedRef,\n  ) => {\n    const menu = useMenu();\n    const item = useListItem({ label: isDisabled && Boolean(children) ? null : title });\n    const tree = useFloatingTree();\n\n    const isLink = Boolean(href);\n\n    const defaultAs = isLink ? 'a' : 'button';\n\n    return (\n      <BaseMenuItem\n        title={title}\n        description={description}\n        leading={leading}\n        trailing={\n          _isMenuTrigger ? <ChevronRightIcon color=\"interactive.icon.gray.muted\" /> : trailing\n        }\n        as={as ?? defaultAs}\n        href={href}\n        ref={useMergeRefs([item.ref, forwardedRef])}\n        isDisabled={isDisabled}\n        {...props}\n        {...(_isMenuTrigger\n          ? {}\n          : menu.getItemProps({\n              onClick(event: React.MouseEvent<HTMLButtonElement>) {\n                props.onClick?.(event);\n                tree?.events.emit('click');\n              },\n              onFocus(event: React.FocusEvent<HTMLButtonElement>) {\n                props.onFocus?.(event);\n                menu.setHasFocusInside(true);\n              },\n            }))}\n      >\n        {children}\n      </BaseMenuItem>\n    );\n  },\n);\n\nexport { MenuItem };\n"],"names":["MenuItem","React","forwardRef","_ref","forwardedRef","title","isDisabled","description","leading","trailing","_isMenuTrigger","_hasFocusInside","href","target","children","as","props","_objectWithoutProperties","_excluded","menu","useMenu","item","useListItem","label","Boolean","tree","useFloatingTree","isLink","defaultAs","_jsx","BaseMenuItem","_objectSpread","ChevronRightIcon","color","ref","useMergeRefs","getItemProps","onClick","event","_props$onClick","call","events","emit","onFocus","_props$onFocus","setHasFocusInside"],"mappings":"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"}
+{"version":3,"file":"MenuItem.web.js","sources":["../../../../../../src/components/Menu/MenuItem.web.tsx"],"sourcesContent":["import { useFloatingTree, useListItem, useMergeRefs } from '@floating-ui/react';\nimport React from 'react';\nimport type { MenuItemProps } from './types';\nimport { useMenu } from './useMenu';\nimport { BaseMenuItem } from '~components/BaseMenu';\nimport { ChevronRightIcon } from '~components/Icons';\n\nconst MenuItem = React.forwardRef<HTMLButtonElement, MenuItemProps>(\n  (\n    {\n      title,\n      isDisabled,\n      description,\n      leading,\n      trailing,\n      _isMenuTrigger,\n      _hasFocusInside,\n      href,\n      target,\n      children,\n      as,\n      ...props\n    },\n    forwardedRef,\n  ) => {\n    const menu = useMenu();\n    const item = useListItem({ label: isDisabled && Boolean(children) ? null : title });\n    const tree = useFloatingTree();\n\n    const isLink = Boolean(href);\n\n    const defaultAs = isLink ? 'a' : 'button';\n\n    return (\n      <BaseMenuItem\n        title={title}\n        description={description}\n        leading={leading}\n        trailing={\n          _isMenuTrigger ? <ChevronRightIcon color=\"interactive.icon.gray.normal\" /> : trailing\n        }\n        as={as ?? defaultAs}\n        href={href}\n        ref={useMergeRefs([item.ref, forwardedRef])}\n        isDisabled={isDisabled}\n        {...props}\n        {...(_isMenuTrigger\n          ? {}\n          : menu.getItemProps({\n              onClick(event: React.MouseEvent<HTMLButtonElement>) {\n                props.onClick?.(event);\n                tree?.events.emit('click');\n              },\n              onFocus(event: React.FocusEvent<HTMLButtonElement>) {\n                props.onFocus?.(event);\n                menu.setHasFocusInside(true);\n              },\n            }))}\n      >\n        {children}\n      </BaseMenuItem>\n    );\n  },\n);\n\nexport { MenuItem };\n"],"names":["MenuItem","React","forwardRef","_ref","forwardedRef","title","isDisabled","description","leading","trailing","_isMenuTrigger","_hasFocusInside","href","target","children","as","props","_objectWithoutProperties","_excluded","menu","useMenu","item","useListItem","label","Boolean","tree","useFloatingTree","isLink","defaultAs","_jsx","BaseMenuItem","_objectSpread","ChevronRightIcon","color","ref","useMergeRefs","getItemProps","onClick","event","_props$onClick","call","events","emit","onFocus","_props$onFocus","setHasFocusInside"],"mappings":"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"}

package/build/lib/web/development/components/Menu/MenuOverlay.web.js

@@ -2,16 +2,20 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import React__default from 'react';
 import styled from 'styled-components';
-import { MENU_MIN_WIDTH, overlayPaddingX, overlayPaddingY } from './tokens.js';
-import '../Box/BaseBox/index.js';
-import { componentZIndices } from '../../utils/componentZIndices.js';
+import { MENU_MIN_WIDTH, overlayPaddingX, overlayPaddingTop, overlayPaddingBottom } from './tokens.js';
+import '../../utils/index.js';
 import '../../utils/metaAttribute/index.js';
+import { componentZIndices } from '../../utils/componentZIndices.js';
+import '../Box/BaseBox/index.js';
 import { jsx } from 'react/jsx-runtime';
 import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
+import { isReactNative } from '../../utils/platform/isReactNative.js';
+import { getPopupBoxShadowString } from '../../utils/makePopupBoxShadow/makePopupBoxShadow.js';
+import useTheme from '../BladeProvider/useTheme.js';
 import { metaAttribute } from '../../utils/metaAttribute/metaAttribute.web.js';
 import { MetaConstants } from '../../utils/metaAttribute/metaConstants.js';
 
-var _excluded = ["children", "zIndex", "_transitionStyle", "minWidth", "maxWidth", "width", "testID"];
+var _excluded = ["children", "zIndex", "_transitionStyle", "minWidth", "maxWidth", "width", "offset", "testID"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var UnfocussableOverlay = /*#__PURE__*/styled(BaseBox).withConfig({
@@ -24,16 +28,31 @@ var UnfocussableOverlay = /*#__PURE__*/styled(BaseBox).withConfig({
     }
   };
 });
-var _MenuOverlay = function _MenuOverlay(_ref, ref) {
-  var children = _ref.children,
-    _ref$zIndex = _ref.zIndex,
-    zIndex = _ref$zIndex === void 0 ? componentZIndices.dropdownOverlay : _ref$zIndex,
-    _transitionStyle = _ref._transitionStyle,
-    minWidth = _ref.minWidth,
-    maxWidth = _ref.maxWidth,
-    width = _ref.width,
-    testID = _ref.testID,
-    props = _objectWithoutProperties(_ref, _excluded);
+var StyledMenuOverlayContent = /*#__PURE__*/styled(BaseBox).withConfig({
+  displayName: "MenuOverlayweb__StyledMenuOverlayContent",
+  componentId: "sc-1nhzg4x-1"
+})(function (_ref) {
+  var theme = _ref.theme,
+    colorScheme = _ref.colorScheme;
+  return {
+    backdropFilter: "blur(".concat(theme.backdropBlur.medium, "px)"),
+    boxShadow: isReactNative() ? undefined : getPopupBoxShadowString(theme, colorScheme)
+  };
+});
+var _MenuOverlay = function _MenuOverlay(_ref2, ref) {
+  var children = _ref2.children,
+    _ref2$zIndex = _ref2.zIndex,
+    zIndex = _ref2$zIndex === void 0 ? componentZIndices.dropdownOverlay : _ref2$zIndex,
+    _transitionStyle = _ref2._transitionStyle,
+    minWidth = _ref2.minWidth,
+    maxWidth = _ref2.maxWidth,
+    width = _ref2.width,
+    offset = _ref2.offset,
+    testID = _ref2.testID,
+    props = _objectWithoutProperties(_ref2, _excluded);
+  var _useTheme = useTheme(),
+    colorScheme = _useTheme.colorScheme;
+  void offset;
   return /*#__PURE__*/jsx(UnfocussableOverlay, _objectSpread(_objectSpread(_objectSpread({
     ref: ref
   }, props), {}, {
@@ -45,13 +64,13 @@ var _MenuOverlay = function _MenuOverlay(_ref, ref) {
     minWidth: minWidth !== null && minWidth !== void 0 ? minWidth : MENU_MIN_WIDTH,
     width: width,
     maxWidth: maxWidth,
-    children: /*#__PURE__*/jsx(BaseBox, {
-      backgroundColor: "popup.background.subtle",
+    children: /*#__PURE__*/jsx(StyledMenuOverlayContent, {
+      colorScheme: colorScheme,
+      backgroundColor: "popup.background.gray.moderate",
       paddingX: overlayPaddingX,
-      paddingY: overlayPaddingY,
-      elevation: "midRaised",
-      borderWidth: "thin",
-      borderColor: "surface.border.gray.muted",
+      paddingTop: overlayPaddingTop,
+      paddingBottom: overlayPaddingBottom,
+      borderWidth: "none",
       borderRadius: "medium",
       style: _transitionStyle,
       children: children

package/build/lib/web/development/components/Menu/MenuOverlay.web.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuOverlay.web.js","sources":["../../../../../../src/components/Menu/MenuOverlay.web.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport type { MenuOverlayProps } from './types';\nimport { MENU_MIN_WIDTH, overlayPaddingX, overlayPaddingY } from './tokens';\nimport BaseBox from '~components/Box/BaseBox';\nimport { componentZIndices } from '~utils/componentZIndices';\nimport type { BladeElementRef } from '~utils/types';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\n\nconst UnfocussableOverlay = styled(BaseBox)((_props) => {\n  return {\n    '&:focus-visible': {\n      outline: 'none',\n    },\n  };\n});\n\nconst _MenuOverlay: React.ForwardRefRenderFunction<BladeElementRef, MenuOverlayProps> = (\n  {\n    children,\n    zIndex = componentZIndices.dropdownOverlay,\n    _transitionStyle,\n    minWidth,\n    maxWidth,\n    width,\n    testID,\n    ...props\n  },\n  ref,\n): React.ReactElement => {\n  return (\n    <UnfocussableOverlay\n      ref={ref as never}\n      {...props}\n      zIndex={zIndex}\n      {...metaAttribute({ name: MetaConstants.Menu, testID })}\n      minWidth={minWidth ?? MENU_MIN_WIDTH}\n      width={width}\n      maxWidth={maxWidth}\n    >\n      {/* \n        Requires another nested div since floatingStyles clash with floatingTransitionStyles \n\n        https://floating-ui.com/docs/usetransition#usetransitionstyles\n      */}\n      <BaseBox\n        backgroundColor=\"popup.background.subtle\"\n        paddingX={overlayPaddingX}\n        paddingY={overlayPaddingY}\n        elevation=\"midRaised\"\n        borderWidth=\"thin\"\n        borderColor=\"surface.border.gray.muted\"\n        borderRadius=\"medium\"\n        style={_transitionStyle}\n      >\n        {children}\n      </BaseBox>\n    </UnfocussableOverlay>\n  );\n};\n\nconst MenuOverlay = React.forwardRef(_MenuOverlay);\n\nexport { MenuOverlay };\n"],"names":["UnfocussableOverlay","styled","BaseBox","withConfig","displayName","componentId","_props","outline","_MenuOverlay","_ref","ref","children","_ref$zIndex","zIndex","componentZIndices","dropdownOverlay","_transitionStyle","minWidth","maxWidth","width","testID","props","_objectWithoutProperties","_excluded","_jsx","_objectSpread","metaAttribute","name","MetaConstants","Menu","MENU_MIN_WIDTH","backgroundColor","paddingX","overlayPaddingX","paddingY","overlayPaddingY","elevation","borderWidth","borderColor","borderRadius","style","MenuOverlay","React","forwardRef"],"mappings":";;;;;;;;;;;;;;;;AASA,IAAMA,mBAAmB,gBAAGC,MAAM,CAACC,OAAO,CAAC,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,qCAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAAC,CAAA,CAAA,UAACC,MAAM,EAAK;EACtD,OAAO;AACL,IAAA,iBAAiB,EAAE;AACjBC,MAAAA,OAAO,EAAE,MAAA;AACX,KAAA;GACD,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,IAAMC,YAA+E,GAAG,SAAlFA,YAA+EA,CAAAC,IAAA,EAWnFC,GAAG,EACoB;AAAA,EAAA,IAVrBC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;IAAAC,WAAA,GAAAH,IAAA,CACRI,MAAM;AAANA,IAAAA,MAAM,GAAAD,WAAA,KAAA,KAAA,CAAA,GAAGE,iBAAiB,CAACC,eAAe,GAAAH,WAAA;IAC1CI,gBAAgB,GAAAP,IAAA,CAAhBO,gBAAgB;IAChBC,QAAQ,GAAAR,IAAA,CAARQ,QAAQ;IACRC,QAAQ,GAAAT,IAAA,CAARS,QAAQ;IACRC,KAAK,GAAAV,IAAA,CAALU,KAAK;IACLC,MAAM,GAAAX,IAAA,CAANW,MAAM;AACHC,IAAAA,KAAK,GAAAC,wBAAA,CAAAb,IAAA,EAAAc,SAAA,CAAA,CAAA;EAIV,oBACEC,GAAA,CAACxB,mBAAmB,EAAAyB,aAAA,CAAAA,aAAA,CAAAA,aAAA,CAAA;AAClBf,IAAAA,GAAG,EAAEA,GAAAA;AAAa,GAAA,EACdW,KAAK,CAAA,EAAA,EAAA,EAAA;AACTR,IAAAA,MAAM,EAAEA,MAAAA;AAAO,GAAA,EACXa,aAAa,CAAC;IAAEC,IAAI,EAAEC,aAAa,CAACC,IAAI;AAAET,IAAAA,MAAM,EAANA,MAAAA;AAAO,GAAC,CAAC,CAAA,EAAA,EAAA,EAAA;AACvDH,IAAAA,QAAQ,EAAEA,QAAQ,KAAA,IAAA,IAARA,QAAQ,KAARA,KAAAA,CAAAA,GAAAA,QAAQ,GAAIa,cAAe;AACrCX,IAAAA,KAAK,EAAEA,KAAM;AACbD,IAAAA,QAAQ,EAAEA,QAAS;IAAAP,QAAA,eAOnBa,GAAA,CAACtB,OAAO,EAAA;AACN6B,MAAAA,eAAe,EAAC,yBAAyB;AACzCC,MAAAA,QAAQ,EAAEC,eAAgB;AAC1BC,MAAAA,QAAQ,EAAEC,eAAgB;AAC1BC,MAAAA,SAAS,EAAC,WAAW;AACrBC,MAAAA,WAAW,EAAC,MAAM;AAClBC,MAAAA,WAAW,EAAC,2BAA2B;AACvCC,MAAAA,YAAY,EAAC,QAAQ;AACrBC,MAAAA,KAAK,EAAExB,gBAAiB;AAAAL,MAAAA,QAAA,EAEvBA,QAAAA;KACM,CAAA;AAAC,GAAA,CACS,CAAC,CAAA;AAE1B,CAAC,CAAA;AAED,IAAM8B,WAAW,gBAAGC,cAAK,CAACC,UAAU,CAACnC,YAAY;;;;"}
+{"version":3,"file":"MenuOverlay.web.js","sources":["../../../../../../src/components/Menu/MenuOverlay.web.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { MENU_MIN_WIDTH, overlayPaddingX, overlayPaddingTop, overlayPaddingBottom } from './tokens';\nimport type { MenuOverlayProps } from './types';\nimport type { ColorSchemeNames } from '~tokens/theme';\nimport { getPopupBoxShadowString, isReactNative, useTheme } from '~utils';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport type { BladeElementRef } from '~utils/types';\nimport { componentZIndices } from '~utils/componentZIndices';\nimport BaseBox from '~components/Box/BaseBox';\n\nconst UnfocussableOverlay = styled(BaseBox)((_props) => {\n  return {\n    '&:focus-visible': {\n      outline: 'none',\n    },\n  };\n});\n\nconst StyledMenuOverlayContent = styled(BaseBox)<{ colorScheme: ColorSchemeNames }>(\n  ({ theme, colorScheme }) => {\n    return {\n      backdropFilter: `blur(${theme.backdropBlur.medium}px)`,\n      boxShadow: isReactNative() ? undefined : getPopupBoxShadowString(theme, colorScheme),\n    };\n  },\n);\n\nconst _MenuOverlay: React.ForwardRefRenderFunction<BladeElementRef, MenuOverlayProps> = (\n  {\n    children,\n    zIndex = componentZIndices.dropdownOverlay,\n    _transitionStyle,\n    minWidth,\n    maxWidth,\n    width,\n    offset,\n    testID,\n    ...props\n  },\n  ref,\n): React.ReactElement => {\n  const { colorScheme } = useTheme();\n  void offset;\n\n  return (\n    <UnfocussableOverlay\n      ref={ref as never}\n      {...props}\n      zIndex={zIndex}\n      {...metaAttribute({ name: MetaConstants.Menu, testID })}\n      minWidth={minWidth ?? MENU_MIN_WIDTH}\n      width={width}\n      maxWidth={maxWidth}\n    >\n      {/* \n        Requires another nested div since floatingStyles clash with floatingTransitionStyles \n\n        https://floating-ui.com/docs/usetransition#usetransitionstyles\n      */}\n      <StyledMenuOverlayContent\n        colorScheme={colorScheme}\n        backgroundColor=\"popup.background.gray.moderate\"\n        paddingX={overlayPaddingX}\n        paddingTop={overlayPaddingTop}\n        paddingBottom={overlayPaddingBottom}\n        borderWidth=\"none\"\n        borderRadius=\"medium\"\n        style={_transitionStyle}\n      >\n        {children}\n      </StyledMenuOverlayContent>\n    </UnfocussableOverlay>\n  );\n};\n\nconst MenuOverlay = React.forwardRef(_MenuOverlay);\n\nexport { MenuOverlay };\n"],"names":["UnfocussableOverlay","styled","BaseBox","withConfig","displayName","componentId","_props","outline","StyledMenuOverlayContent","_ref","theme","colorScheme","backdropFilter","concat","backdropBlur","medium","boxShadow","isReactNative","undefined","getPopupBoxShadowString","_MenuOverlay","_ref2","ref","children","_ref2$zIndex","zIndex","componentZIndices","dropdownOverlay","_transitionStyle","minWidth","maxWidth","width","offset","testID","props","_objectWithoutProperties","_excluded","_useTheme","useTheme","_jsx","_objectSpread","metaAttribute","name","MetaConstants","Menu","MENU_MIN_WIDTH","backgroundColor","paddingX","overlayPaddingX","paddingTop","overlayPaddingTop","paddingBottom","overlayPaddingBottom","borderWidth","borderRadius","style","MenuOverlay","React","forwardRef"],"mappings":"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"}

package/build/lib/web/development/components/Menu/tokens.js

@@ -6,7 +6,8 @@ import { makeSize } from '../../utils/makeSize/makeSize.js';
 import { size } from '../../tokens/global/size.js';
 
 var overlayPaddingX = 'spacing.3';
-var overlayPaddingY = 'spacing.4';
+var overlayPaddingTop = 'spacing.3';
+var overlayPaddingBottom = 'spacing.4';
 var headerMarginBottom = 'spacing.3';
 var footerPaddingTop = 'spacing.3';
 var getDividerMarginTokens = function getDividerMarginTokens(theme) {
@@ -22,5 +23,5 @@ var MENU_MIN_WIDTH = {
   s: makeSize(size['240'])
 };
 
-export { MENU_MIN_WIDTH, footerPaddingTop, getDividerMarginTokens, headerMarginBottom, overlayPaddingX, overlayPaddingY };
+export { MENU_MIN_WIDTH, footerPaddingTop, getDividerMarginTokens, headerMarginBottom, overlayPaddingBottom, overlayPaddingTop, overlayPaddingX };
 //# sourceMappingURL=tokens.js.map

package/build/lib/web/development/components/Menu/tokens.js.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.js","sources":["../../../../../../src/components/Menu/tokens.ts"],"sourcesContent":["import type { Theme } from '~components/BladeProvider';\nimport type { SpacingValueType } from '~components/Box/BaseBox';\nimport { size } from '~tokens/global';\nimport { makeSize, makeSpace } from '~utils';\nimport getIn from '~utils/lodashButBetter/get';\n\nconst overlayPaddingX = 'spacing.3';\nconst overlayPaddingY = 'spacing.4';\nconst headerMarginBottom = 'spacing.3';\nconst footerPaddingTop = 'spacing.3';\n\ntype GetDividerMarginTokensReturnType = {\n  marginLeft: SpacingValueType;\n  marginRight: SpacingValueType;\n  marginY: SpacingValueType;\n};\n\nconst getDividerMarginTokens = (theme: Theme): GetDividerMarginTokensReturnType => {\n  const overlayPaddingXValue = getIn(theme, overlayPaddingX);\n  return {\n    marginLeft: `-${makeSpace(overlayPaddingXValue)}`,\n    marginRight: `-${makeSpace(overlayPaddingXValue)}`,\n    marginY: 'spacing.1',\n  };\n};\n\nconst MENU_MIN_WIDTH = {\n  base: makeSize(size['200']),\n  s: makeSize(size['240']),\n} as const;\n\nexport {\n  overlayPaddingX,\n  overlayPaddingY,\n  MENU_MIN_WIDTH,\n  getDividerMarginTokens,\n  headerMarginBottom,\n  footerPaddingTop,\n};\n"],"names":["overlayPaddingX","overlayPaddingY","headerMarginBottom","footerPaddingTop","getDividerMarginTokens","theme","overlayPaddingXValue","getIn","marginLeft","concat","makeSpace","marginRight","marginY","MENU_MIN_WIDTH","base","makeSize","size","s"],"mappings":";;;;;;;AAMMA,IAAAA,eAAe,GAAG,YAAW;AAC7BC,IAAAA,eAAe,GAAG,YAAW;AAC7BC,IAAAA,kBAAkB,GAAG,YAAW;AAChCC,IAAAA,gBAAgB,GAAG,YAAW;AAQpC,IAAMC,sBAAsB,GAAG,SAAzBA,sBAAsBA,CAAIC,KAAY,EAAuC;AACjF,EAAA,IAAMC,oBAAoB,GAAGC,KAAK,CAACF,KAAK,EAAEL,eAAe,CAAC,CAAA;EAC1D,OAAO;AACLQ,IAAAA,UAAU,MAAAC,MAAA,CAAMC,SAAS,CAACJ,oBAAoB,CAAC,CAAE;AACjDK,IAAAA,WAAW,MAAAF,MAAA,CAAMC,SAAS,CAACJ,oBAAoB,CAAC,CAAE;AAClDM,IAAAA,OAAO,EAAE,WAAA;GACV,CAAA;AACH,EAAC;AAED,IAAMC,cAAc,GAAG;AACrBC,EAAAA,IAAI,EAAEC,QAAQ,CAACC,IAAI,CAAC,KAAK,CAAC,CAAC;AAC3BC,EAAAA,CAAC,EAAEF,QAAQ,CAACC,IAAI,CAAC,KAAK,CAAC,CAAA;AACzB;;;;"}
+{"version":3,"file":"tokens.js","sources":["../../../../../../src/components/Menu/tokens.ts"],"sourcesContent":["import type { Theme } from '~components/BladeProvider';\nimport type { SpacingValueType } from '~components/Box/BaseBox';\nimport { size } from '~tokens/global';\nimport { makeSize, makeSpace } from '~utils';\nimport getIn from '~utils/lodashButBetter/get';\n\nconst overlayPaddingX = 'spacing.3';\nconst overlayPaddingTop = 'spacing.3';\nconst overlayPaddingBottom = 'spacing.4';\nconst headerMarginBottom = 'spacing.3';\nconst footerPaddingTop = 'spacing.3';\n\ntype GetDividerMarginTokensReturnType = {\n  marginLeft: SpacingValueType;\n  marginRight: SpacingValueType;\n  marginY: SpacingValueType;\n};\n\nconst getDividerMarginTokens = (theme: Theme): GetDividerMarginTokensReturnType => {\n  const overlayPaddingXValue = getIn(theme, overlayPaddingX);\n  return {\n    marginLeft: `-${makeSpace(overlayPaddingXValue)}`,\n    marginRight: `-${makeSpace(overlayPaddingXValue)}`,\n    marginY: 'spacing.1',\n  };\n};\n\nconst MENU_MIN_WIDTH = {\n  base: makeSize(size['200']),\n  s: makeSize(size['240']),\n} as const;\n\nexport {\n  overlayPaddingX,\n  overlayPaddingTop,\n  overlayPaddingBottom,\n  MENU_MIN_WIDTH,\n  getDividerMarginTokens,\n  headerMarginBottom,\n  footerPaddingTop,\n};\n"],"names":["overlayPaddingX","overlayPaddingTop","overlayPaddingBottom","headerMarginBottom","footerPaddingTop","getDividerMarginTokens","theme","overlayPaddingXValue","getIn","marginLeft","concat","makeSpace","marginRight","marginY","MENU_MIN_WIDTH","base","makeSize","size","s"],"mappings":";;;;;;;AAMMA,IAAAA,eAAe,GAAG,YAAW;AAC7BC,IAAAA,iBAAiB,GAAG,YAAW;AAC/BC,IAAAA,oBAAoB,GAAG,YAAW;AAClCC,IAAAA,kBAAkB,GAAG,YAAW;AAChCC,IAAAA,gBAAgB,GAAG,YAAW;AAQpC,IAAMC,sBAAsB,GAAG,SAAzBA,sBAAsBA,CAAIC,KAAY,EAAuC;AACjF,EAAA,IAAMC,oBAAoB,GAAGC,KAAK,CAACF,KAAK,EAAEN,eAAe,CAAC,CAAA;EAC1D,OAAO;AACLS,IAAAA,UAAU,MAAAC,MAAA,CAAMC,SAAS,CAACJ,oBAAoB,CAAC,CAAE;AACjDK,IAAAA,WAAW,MAAAF,MAAA,CAAMC,SAAS,CAACJ,oBAAoB,CAAC,CAAE;AAClDM,IAAAA,OAAO,EAAE,WAAA;GACV,CAAA;AACH,EAAC;AAED,IAAMC,cAAc,GAAG;AACrBC,EAAAA,IAAI,EAAEC,QAAQ,CAACC,IAAI,CAAC,KAAK,CAAC,CAAC;AAC3BC,EAAAA,CAAC,EAAEF,QAAQ,CAACC,IAAI,CAAC,KAAK,CAAC,CAAA;AACzB;;;;"}

package/build/lib/web/development/components/Menu/useMenu.js

@@ -1,9 +1,9 @@
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import React__default from 'react';
 import { useFloatingTree, useFloatingNodeId, useFloatingParentNodeId, useListItem, useFloating, offset, flip, shift, size, autoUpdate, useHover, safePolygon, useClick, useRole, useDismiss, useListNavigation, useInteractions, useTransitionStyles } from '@floating-ui/react';
-import { useControllableState } from '../../utils/useControllable.js';
-import { OVERLAY_OFFSET, OVERLAY_TRANSITION_OFFSET } from '../BaseMenu/tokens.js';
 import '../../utils/index.js';
+import { OVERLAY_OFFSET, OVERLAY_TRANSITION_OFFSET } from '../BaseMenu/tokens.js';
+import { useControllableState } from '../../utils/useControllable.js';
 import useTheme from '../BladeProvider/useTheme.js';
 import { makeSize } from '../../utils/makeSize/makeSize.js';
 
@@ -23,7 +23,8 @@ var useFloatingMenuSetup = function useFloatingMenuSetup(_ref) {
   var elementsRef = _ref.elementsRef,
     openInteraction = _ref.openInteraction,
     onOpenChange = _ref.onOpenChange,
-    isOpen = _ref.isOpen;
+    isOpen = _ref.isOpen,
+    overlayOffset = _ref.overlayOffset;
   var _useControllableState = useControllableState({
       value: isOpen,
       defaultValue: false,
@@ -47,6 +48,10 @@ var useFloatingMenuSetup = function useFloatingMenuSetup(_ref) {
   var _useTheme = useTheme(),
     theme = _useTheme.theme;
   var isNested = parentId != null;
+  var resolvedDefaultOffset = {
+    mainAxis: isNested ? 12 : OVERLAY_OFFSET,
+    alignmentAxis: isNested ? -16 : 0
+  };
   var _useFloating = useFloating({
       nodeId: nodeId,
       open: isControllableOpen,
@@ -56,10 +61,7 @@ var useFloatingMenuSetup = function useFloatingMenuSetup(_ref) {
         });
       },
       placement: isNested ? 'right-start' : 'bottom-start',
-      middleware: [offset({
-        mainAxis: isNested ? 12 : OVERLAY_OFFSET,
-        alignmentAxis: isNested ? -16 : 0
-      }), flip(), shift(), size({
+      middleware: [offset(overlayOffset !== null && overlayOffset !== void 0 ? overlayOffset : resolvedDefaultOffset), flip(), shift(), size({
         apply: function apply(_ref2) {
           var availableHeight = _ref2.availableHeight,
             elements = _ref2.elements;