@os-design/core 1.0.156 → 1.0.158

package/dist/cjs/Menu/index.js

@@ -1,60 +1,34 @@
 "use strict";
 
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var _utils = require("@os-design/utils");
-
 var _media = require("@os-design/media");
-
 var _styles = require("@os-design/styles");
-
 var _menuUtils = require("@os-design/menu-utils");
-
 var _Popover = _interopRequireDefault(require("../Popover"));
-
 var _Modal = _interopRequireDefault(require("../Modal"));
-
 var _useFocusWithArrows = _interopRequireDefault(require("./utils/useFocusWithArrows"));
-
 var _excluded = ["closeOnSelect", "modalTitle", "trigger", "placement", "visible", "onClose", "size", "className", "id", "children"];
-
 var _templateObject, _templateObject2;
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
 function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
 var StyledPopover = (0, _styled["default"])(_Popover["default"])(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding: ", "em 0;\n  min-width: ", "em;\n  max-height: ", "em;\n  overflow: hidden;\n  ", ";\n"])), function (p) {
   return p.theme.menuPaddingVertical;
 }, function (p) {
@@ -63,42 +37,41 @@ var StyledPopover = (0, _styled["default"])(_Popover["default"])(_templateObject
   return p.theme.menuMaxHeight;
 }, (0, _styles.enableScrollingStyles)('y'));
 var StyledModal = (0, _styled["default"])(_Modal["default"])(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  padding-left: 0;\n  padding-right: 0;\n"])));
+
 /**
  * The dropdown menu.
  */
-
 var Menu = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var _ref$closeOnSelect = _ref.closeOnSelect,
-      closeOnSelect = _ref$closeOnSelect === void 0 ? true : _ref$closeOnSelect,
-      modalTitle = _ref.modalTitle,
-      trigger = _ref.trigger,
-      _ref$placement = _ref.placement,
-      placement = _ref$placement === void 0 ? 'bottom-start' : _ref$placement,
-      visible = _ref.visible,
-      _ref$onClose = _ref.onClose,
-      onClose = _ref$onClose === void 0 ? function () {} : _ref$onClose,
-      size = _ref.size,
-      className = _ref.className,
-      id = _ref.id,
-      children = _ref.children,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
+    closeOnSelect = _ref$closeOnSelect === void 0 ? true : _ref$closeOnSelect,
+    modalTitle = _ref.modalTitle,
+    trigger = _ref.trigger,
+    _ref$placement = _ref.placement,
+    placement = _ref$placement === void 0 ? 'bottom-start' : _ref$placement,
+    visible = _ref.visible,
+    _ref$onClose = _ref.onClose,
+    onClose = _ref$onClose === void 0 ? function () {} : _ref$onClose,
+    size = _ref.size,
+    className = _ref.className,
+    id = _ref.id,
+    children = _ref.children,
+    rest = _objectWithoutProperties(_ref, _excluded);
   var _useForwardedRef = (0, _utils.useForwardedRef)(ref),
-      _useForwardedRef2 = _slicedToArray(_useForwardedRef, 2),
-      containerRef = _useForwardedRef2[0],
-      mergedContainerRef = _useForwardedRef2[1];
-
+    _useForwardedRef2 = _slicedToArray(_useForwardedRef, 2),
+    containerRef = _useForwardedRef2[0],
+    mergedContainerRef = _useForwardedRef2[1];
   (0, _useFocusWithArrows["default"])(containerRef);
   (0, _utils.useKeyPress)(typeof window !== 'undefined' ? window : undefined, 'Escape', onClose);
   var isMinXs = (0, _media.useIsMinWidth)('xs');
   var menuId = (0, _react.useMemo)(function () {
     return id || "menu-".concat(Math.random().toString(36).slice(2, 11));
-  }, [id]); // Replace the aria-haspopup attribute from true to menu
+  }, [id]);
 
+  // Replace the aria-haspopup attribute from true to menu
   (0, _utils.useBrowserLayoutEffect)(function () {
     if (!trigger) return;
     var _ref2 = trigger,
-        current = _ref2.current;
+      current = _ref2.current;
     if (!current) return;
     current.setAttribute('aria-haspopup', 'menu');
     current.setAttribute('aria-controls', menuId);

package/dist/cjs/Menu/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["StyledPopover","styled","Popover","p","theme","menuPaddingVertical","menuMinWidth","menuMaxHeight","enableScrollingStyles","StyledModal","Modal","Menu","forwardRef","ref","closeOnSelect","modalTitle","trigger","placement","visible","onClose","size","className","id","children","rest","useForwardedRef","containerRef","mergedContainerRef","useFocusWithArrows","useKeyPress","window","undefined","isMinXs","useIsMinWidth","menuId","useMemo","Math","random","toString","slice","useBrowserLayoutEffect","current","setAttribute","contextValue","displayName"],"sources":["../../../src/Menu/index.tsx"],"sourcesContent":["import React, { forwardRef, RefObject, useMemo } from 'react';\nimport styled from '@emotion/styled';\nimport {\n  useBrowserLayoutEffect,\n  useForwardedRef,\n  useKeyPress,\n} from '@os-design/utils';\nimport { useIsMinWidth } from '@os-design/media';\nimport { enableScrollingStyles } from '@os-design/styles';\nimport { MenuContext } from '@os-design/menu-utils';\nimport Popover, { PopoverProps } from '../Popover';\nimport Modal from '../Modal';\nimport useFocusWithArrows from './utils/useFocusWithArrows';\n\nexport interface MenuProps extends PopoverProps {\n  /**\n   * Whether the menu closes when the user selects a menu item.\n   * @default true\n   */\n  closeOnSelect?: boolean;\n  /**\n   * The title of the modal.\n   * @default undefined\n   */\n  modalTitle?: string;\n}\n\nconst StyledPopover = styled(Popover)`\n  padding: ${(p) => p.theme.menuPaddingVertical}em 0;\n  min-width: ${(p) => p.theme.menuMinWidth}em;\n  max-height: ${(p) => p.theme.menuMaxHeight}em;\n  overflow: hidden;\n  ${enableScrollingStyles('y')};\n`;\n\nconst StyledModal = styled(Modal)`\n  padding-left: 0;\n  padding-right: 0;\n`;\n\n/**\n * The dropdown menu.\n */\nconst Menu = forwardRef<HTMLDivElement, MenuProps>(\n  (\n    {\n      closeOnSelect = true,\n      modalTitle,\n      trigger,\n      placement = 'bottom-start',\n      visible,\n      onClose = () => {},\n      size,\n      className,\n      id,\n      children,\n      ...rest\n    },\n    ref\n  ) => {\n    const [containerRef, mergedContainerRef] = useForwardedRef(ref);\n    useFocusWithArrows(containerRef);\n    useKeyPress(\n      (typeof window !== 'undefined' ? window : undefined) as EventTarget,\n      'Escape',\n      onClose\n    );\n    const isMinXs = useIsMinWidth('xs');\n\n    const menuId = useMemo(\n      () => id || `menu-${Math.random().toString(36).slice(2, 11)}`,\n      [id]\n    );\n\n    // Replace the aria-haspopup attribute from true to menu\n    useBrowserLayoutEffect(() => {\n      if (!trigger) return;\n      const { current } = trigger as RefObject<Element>;\n      if (!current) return;\n      current.setAttribute('aria-haspopup', 'menu');\n      current.setAttribute('aria-controls', menuId);\n    }, [menuId]);\n\n    const contextValue = useMemo(\n      () => ({ closeOnSelect, onClose }),\n      [closeOnSelect, onClose]\n    );\n\n    return (\n      <MenuContext.Provider value={contextValue}>\n        {isMinXs ? (\n          <StyledPopover\n            trigger={trigger}\n            placement={placement}\n            visible={visible}\n            onClose={onClose}\n            size={size}\n            className={className}\n            id={menuId}\n            role='menu'\n            {...rest}\n            ref={mergedContainerRef}\n          >\n            {children}\n          </StyledPopover>\n        ) : (\n          <StyledModal\n            title={modalTitle}\n            footer={null}\n            visible={visible}\n            onClose={onClose}\n            size={size}\n            className={className}\n            id={menuId}\n            role='menu'\n            ref={mergedContainerRef}\n          >\n            {children}\n          </StyledModal>\n        )}\n      </MenuContext.Provider>\n    );\n  }\n);\n\nMenu.displayName = 'Menu';\n\nexport default Menu;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["StyledPopover","styled","Popover","p","theme","menuPaddingVertical","menuMinWidth","menuMaxHeight","enableScrollingStyles","StyledModal","Modal","Menu","forwardRef","ref","closeOnSelect","modalTitle","trigger","placement","visible","onClose","size","className","id","children","rest","useForwardedRef","containerRef","mergedContainerRef","useFocusWithArrows","useKeyPress","window","undefined","isMinXs","useIsMinWidth","menuId","useMemo","Math","random","toString","slice","useBrowserLayoutEffect","current","setAttribute","contextValue","displayName"],"sources":["../../../src/Menu/index.tsx"],"sourcesContent":["import React, { forwardRef, RefObject, useMemo } from 'react';\nimport styled from '@emotion/styled';\nimport {\n  useBrowserLayoutEffect,\n  useForwardedRef,\n  useKeyPress,\n} from '@os-design/utils';\nimport { useIsMinWidth } from '@os-design/media';\nimport { enableScrollingStyles } from '@os-design/styles';\nimport { MenuContext } from '@os-design/menu-utils';\nimport Popover, { PopoverProps } from '../Popover';\nimport Modal from '../Modal';\nimport useFocusWithArrows from './utils/useFocusWithArrows';\n\nexport interface MenuProps extends PopoverProps {\n  /**\n   * Whether the menu closes when the user selects a menu item.\n   * @default true\n   */\n  closeOnSelect?: boolean;\n  /**\n   * The title of the modal.\n   * @default undefined\n   */\n  modalTitle?: string;\n}\n\nconst StyledPopover = styled(Popover)`\n  padding: ${(p) => p.theme.menuPaddingVertical}em 0;\n  min-width: ${(p) => p.theme.menuMinWidth}em;\n  max-height: ${(p) => p.theme.menuMaxHeight}em;\n  overflow: hidden;\n  ${enableScrollingStyles('y')};\n`;\n\nconst StyledModal = styled(Modal)`\n  padding-left: 0;\n  padding-right: 0;\n`;\n\n/**\n * The dropdown menu.\n */\nconst Menu = forwardRef<HTMLDivElement, MenuProps>(\n  (\n    {\n      closeOnSelect = true,\n      modalTitle,\n      trigger,\n      placement = 'bottom-start',\n      visible,\n      onClose = () => {},\n      size,\n      className,\n      id,\n      children,\n      ...rest\n    },\n    ref\n  ) => {\n    const [containerRef, mergedContainerRef] = useForwardedRef(ref);\n    useFocusWithArrows(containerRef);\n    useKeyPress(\n      (typeof window !== 'undefined' ? window : undefined) as EventTarget,\n      'Escape',\n      onClose\n    );\n    const isMinXs = useIsMinWidth('xs');\n\n    const menuId = useMemo(\n      () => id || `menu-${Math.random().toString(36).slice(2, 11)}`,\n      [id]\n    );\n\n    // Replace the aria-haspopup attribute from true to menu\n    useBrowserLayoutEffect(() => {\n      if (!trigger) return;\n      const { current } = trigger as RefObject<Element>;\n      if (!current) return;\n      current.setAttribute('aria-haspopup', 'menu');\n      current.setAttribute('aria-controls', menuId);\n    }, [menuId]);\n\n    const contextValue = useMemo(\n      () => ({ closeOnSelect, onClose }),\n      [closeOnSelect, onClose]\n    );\n\n    return (\n      <MenuContext.Provider value={contextValue}>\n        {isMinXs ? (\n          <StyledPopover\n            trigger={trigger}\n            placement={placement}\n            visible={visible}\n            onClose={onClose}\n            size={size}\n            className={className}\n            id={menuId}\n            role='menu'\n            {...rest}\n            ref={mergedContainerRef}\n          >\n            {children}\n          </StyledPopover>\n        ) : (\n          <StyledModal\n            title={modalTitle}\n            footer={null}\n            visible={visible}\n            onClose={onClose}\n            size={size}\n            className={className}\n            id={menuId}\n            role='menu'\n            ref={mergedContainerRef}\n          >\n            {children}\n          </StyledModal>\n        )}\n      </MenuContext.Provider>\n    );\n  }\n);\n\nMenu.displayName = 'Menu';\n\nexport default Menu;\n"],"mappings":"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"}

package/dist/cjs/Menu/utils/useFocusWithArrows.js

@@ -4,32 +4,22 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-
 var _react = require("react");
-
 var _utils = require("@os-design/utils");
-
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
-
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
 function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
-
 function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
-
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
 var useFocusWithArrows = function useFocusWithArrows(ref) {
   var arrowKeyPressListener = (0, _react.useCallback)(function (e) {
     if (!ref.current) return;
     var focusableListItems = ref.current.querySelectorAll('button:not([disabled])');
     var _document = document,
-        activeElement = _document.activeElement;
+      activeElement = _document.activeElement;
     var curFocusedIndex = activeElement ? _toConsumableArray(focusableListItems).indexOf(activeElement) : -1;
     var nextFocusedIndex;
-
     if (curFocusedIndex === -1 && e.key === 'ArrowUp') {
       nextFocusedIndex = focusableListItems.length - 1;
     } else if (curFocusedIndex === -1 && e.key === 'ArrowDown') {
@@ -39,7 +29,6 @@ var useFocusWithArrows = function useFocusWithArrows(ref) {
     } else if (curFocusedIndex > -1 && e.key === 'ArrowDown') {
       nextFocusedIndex = curFocusedIndex < focusableListItems.length - 1 ? curFocusedIndex + 1 : 0;
     }
-
     if (nextFocusedIndex === undefined) return;
     var nextFocusedListItem = focusableListItems.item(nextFocusedIndex);
     if (!nextFocusedListItem) return;
@@ -48,7 +37,6 @@ var useFocusWithArrows = function useFocusWithArrows(ref) {
   }, [ref]);
   (0, _utils.useKeyPress)(typeof window !== 'undefined' ? window : undefined, ['ArrowUp', 'ArrowDown'], arrowKeyPressListener);
 };
-
 var _default = useFocusWithArrows;
 exports["default"] = _default;
 //# sourceMappingURL=useFocusWithArrows.js.map

package/dist/cjs/Menu/utils/useFocusWithArrows.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFocusWithArrows.js","names":["useFocusWithArrows","ref","arrowKeyPressListener","useCallback","e","current","focusableListItems","querySelectorAll","document","activeElement","curFocusedIndex","indexOf","nextFocusedIndex","key","length","undefined","nextFocusedListItem","item","focus","preventDefault","useKeyPress","window"],"sources":["../../../../src/Menu/utils/useFocusWithArrows.ts"],"sourcesContent":["import { RefObject, useCallback } from 'react';\nimport { KeyPressListener, useKeyPress } from '@os-design/utils';\n\nconst useFocusWithArrows = (ref: RefObject<Element>): void => {\n  const arrowKeyPressListener = useCallback<KeyPressListener>(\n    (e) => {\n      if (!ref.current) return;\n      const focusableListItems = ref.current.querySelectorAll<HTMLElement>(\n        'button:not([disabled])'\n      );\n      const { activeElement } = document;\n      const curFocusedIndex = activeElement\n        ? ([...focusableListItems] as Element[]).indexOf(activeElement)\n        : -1;\n\n      let nextFocusedIndex;\n      if (curFocusedIndex === -1 && e.key === 'ArrowUp') {\n        nextFocusedIndex = focusableListItems.length - 1;\n      } else if (curFocusedIndex === -1 && e.key === 'ArrowDown') {\n        nextFocusedIndex = 0;\n      } else if (curFocusedIndex > -1 && e.key === 'ArrowUp') {\n        nextFocusedIndex =\n          curFocusedIndex > 0\n            ? curFocusedIndex - 1\n            : focusableListItems.length - 1;\n      } else if (curFocusedIndex > -1 && e.key === 'ArrowDown') {\n        nextFocusedIndex =\n          curFocusedIndex < focusableListItems.length - 1\n            ? curFocusedIndex + 1\n            : 0;\n      }\n\n      if (nextFocusedIndex === undefined) return;\n      const nextFocusedListItem = focusableListItems.item(nextFocusedIndex);\n      if (!nextFocusedListItem) return;\n\n      nextFocusedListItem.focus();\n      e.preventDefault();\n    },\n    [ref]\n  );\n\n  useKeyPress(\n    (typeof window !== 'undefined' ? window : undefined) as EventTarget,\n    ['ArrowUp', 'ArrowDown'],\n    arrowKeyPressListener\n  );\n};\n\nexport default useFocusWithArrows;\n"],"mappings":";;;;;;;AAAA;;AACA;;;;;;;;;;;;;;AAEA,IAAMA,kBAAkB,GAAG,SAArBA,kBAAqB,CAACC,GAAD,EAAmC;EAC5D,IAAMC,qBAAqB,GAAG,IAAAC,kBAAA,EAC5B,UAACC,CAAD,EAAO;IACL,IAAI,CAACH,GAAG,CAACI,OAAT,EAAkB;IAClB,IAAMC,kBAAkB,GAAGL,GAAG,CAACI,OAAJ,CAAYE,gBAAZ,CACzB,wBADyB,CAA3B;IAGA,gBAA0BC,QAA1B;IAAA,IAAQC,aAAR,aAAQA,aAAR;IACA,IAAMC,eAAe,GAAGD,aAAa,GACjC,mBAAKH,kBAAL,EAAuCK,OAAvC,CAA+CF,aAA/C,CADiC,GAEjC,CAAC,CAFL;IAIA,IAAIG,gBAAJ;;IACA,IAAIF,eAAe,KAAK,CAAC,CAArB,IAA0BN,CAAC,CAACS,GAAF,KAAU,SAAxC,EAAmD;MACjDD,gBAAgB,GAAGN,kBAAkB,CAACQ,MAAnB,GAA4B,CAA/C;IACD,CAFD,MAEO,IAAIJ,eAAe,KAAK,CAAC,CAArB,IAA0BN,CAAC,CAACS,GAAF,KAAU,WAAxC,EAAqD;MAC1DD,gBAAgB,GAAG,CAAnB;IACD,CAFM,MAEA,IAAIF,eAAe,GAAG,CAAC,CAAnB,IAAwBN,CAAC,CAACS,GAAF,KAAU,SAAtC,EAAiD;MACtDD,gBAAgB,GACdF,eAAe,GAAG,CAAlB,GACIA,eAAe,GAAG,CADtB,GAEIJ,kBAAkB,CAACQ,MAAnB,GAA4B,CAHlC;IAID,CALM,MAKA,IAAIJ,eAAe,GAAG,CAAC,CAAnB,IAAwBN,CAAC,CAACS,GAAF,KAAU,WAAtC,EAAmD;MACxDD,gBAAgB,GACdF,eAAe,GAAGJ,kBAAkB,CAACQ,MAAnB,GAA4B,CAA9C,GACIJ,eAAe,GAAG,CADtB,GAEI,CAHN;IAID;;IAED,IAAIE,gBAAgB,KAAKG,SAAzB,EAAoC;IACpC,IAAMC,mBAAmB,GAAGV,kBAAkB,CAACW,IAAnB,CAAwBL,gBAAxB,CAA5B;IACA,IAAI,CAACI,mBAAL,EAA0B;IAE1BA,mBAAmB,CAACE,KAApB;IACAd,CAAC,CAACe,cAAF;EACD,CAlC2B,EAmC5B,CAAClB,GAAD,CAnC4B,CAA9B;EAsCA,IAAAmB,kBAAA,EACG,OAAOC,MAAP,KAAkB,WAAlB,GAAgCA,MAAhC,GAAyCN,SAD5C,EAEE,CAAC,SAAD,EAAY,WAAZ,CAFF,EAGEb,qBAHF;AAKD,CA5CD;;eA8CeF,kB"}
+{"version":3,"file":"useFocusWithArrows.js","names":["useFocusWithArrows","ref","arrowKeyPressListener","useCallback","e","current","focusableListItems","querySelectorAll","document","activeElement","curFocusedIndex","indexOf","nextFocusedIndex","key","length","undefined","nextFocusedListItem","item","focus","preventDefault","useKeyPress","window"],"sources":["../../../../src/Menu/utils/useFocusWithArrows.ts"],"sourcesContent":["import { RefObject, useCallback } from 'react';\nimport { KeyPressListener, useKeyPress } from '@os-design/utils';\n\nconst useFocusWithArrows = (ref: RefObject<Element>): void => {\n  const arrowKeyPressListener = useCallback<KeyPressListener>(\n    (e) => {\n      if (!ref.current) return;\n      const focusableListItems = ref.current.querySelectorAll<HTMLElement>(\n        'button:not([disabled])'\n      );\n      const { activeElement } = document;\n      const curFocusedIndex = activeElement\n        ? ([...focusableListItems] as Element[]).indexOf(activeElement)\n        : -1;\n\n      let nextFocusedIndex;\n      if (curFocusedIndex === -1 && e.key === 'ArrowUp') {\n        nextFocusedIndex = focusableListItems.length - 1;\n      } else if (curFocusedIndex === -1 && e.key === 'ArrowDown') {\n        nextFocusedIndex = 0;\n      } else if (curFocusedIndex > -1 && e.key === 'ArrowUp') {\n        nextFocusedIndex =\n          curFocusedIndex > 0\n            ? curFocusedIndex - 1\n            : focusableListItems.length - 1;\n      } else if (curFocusedIndex > -1 && e.key === 'ArrowDown') {\n        nextFocusedIndex =\n          curFocusedIndex < focusableListItems.length - 1\n            ? curFocusedIndex + 1\n            : 0;\n      }\n\n      if (nextFocusedIndex === undefined) return;\n      const nextFocusedListItem = focusableListItems.item(nextFocusedIndex);\n      if (!nextFocusedListItem) return;\n\n      nextFocusedListItem.focus();\n      e.preventDefault();\n    },\n    [ref]\n  );\n\n  useKeyPress(\n    (typeof window !== 'undefined' ? window : undefined) as EventTarget,\n    ['ArrowUp', 'ArrowDown'],\n    arrowKeyPressListener\n  );\n};\n\nexport default useFocusWithArrows;\n"],"mappings":";;;;;;AAAA;AACA;AAAiE;AAAA;AAAA;AAAA;AAAA;AAAA;AAEjE,IAAMA,kBAAkB,GAAG,SAArBA,kBAAkB,CAAIC,GAAuB,EAAW;EAC5D,IAAMC,qBAAqB,GAAG,IAAAC,kBAAW,EACvC,UAACC,CAAC,EAAK;IACL,IAAI,CAACH,GAAG,CAACI,OAAO,EAAE;IAClB,IAAMC,kBAAkB,GAAGL,GAAG,CAACI,OAAO,CAACE,gBAAgB,CACrD,wBAAwB,CACzB;IACD,gBAA0BC,QAAQ;MAA1BC,aAAa,aAAbA,aAAa;IACrB,IAAMC,eAAe,GAAGD,aAAa,GACjC,mBAAKH,kBAAkB,EAAgBK,OAAO,CAACF,aAAa,CAAC,GAC7D,CAAC,CAAC;IAEN,IAAIG,gBAAgB;IACpB,IAAIF,eAAe,KAAK,CAAC,CAAC,IAAIN,CAAC,CAACS,GAAG,KAAK,SAAS,EAAE;MACjDD,gBAAgB,GAAGN,kBAAkB,CAACQ,MAAM,GAAG,CAAC;IAClD,CAAC,MAAM,IAAIJ,eAAe,KAAK,CAAC,CAAC,IAAIN,CAAC,CAACS,GAAG,KAAK,WAAW,EAAE;MAC1DD,gBAAgB,GAAG,CAAC;IACtB,CAAC,MAAM,IAAIF,eAAe,GAAG,CAAC,CAAC,IAAIN,CAAC,CAACS,GAAG,KAAK,SAAS,EAAE;MACtDD,gBAAgB,GACdF,eAAe,GAAG,CAAC,GACfA,eAAe,GAAG,CAAC,GACnBJ,kBAAkB,CAACQ,MAAM,GAAG,CAAC;IACrC,CAAC,MAAM,IAAIJ,eAAe,GAAG,CAAC,CAAC,IAAIN,CAAC,CAACS,GAAG,KAAK,WAAW,EAAE;MACxDD,gBAAgB,GACdF,eAAe,GAAGJ,kBAAkB,CAACQ,MAAM,GAAG,CAAC,GAC3CJ,eAAe,GAAG,CAAC,GACnB,CAAC;IACT;IAEA,IAAIE,gBAAgB,KAAKG,SAAS,EAAE;IACpC,IAAMC,mBAAmB,GAAGV,kBAAkB,CAACW,IAAI,CAACL,gBAAgB,CAAC;IACrE,IAAI,CAACI,mBAAmB,EAAE;IAE1BA,mBAAmB,CAACE,KAAK,EAAE;IAC3Bd,CAAC,CAACe,cAAc,EAAE;EACpB,CAAC,EACD,CAAClB,GAAG,CAAC,CACN;EAED,IAAAmB,kBAAW,EACR,OAAOC,MAAM,KAAK,WAAW,GAAGA,MAAM,GAAGN,SAAS,EACnD,CAAC,SAAS,EAAE,WAAW,CAAC,EACxBb,qBAAqB,CACtB;AACH,CAAC;AAAC,eAEaF,kBAAkB;AAAA"}

package/dist/cjs/MenuDivider/index.js

@@ -1,38 +1,26 @@
 "use strict";
 
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var _theming = require("@os-design/theming");
-
 var _templateObject;
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
 var Container = _styled["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding-top: 0.4em;\n  border-bottom: 1px solid ", ";\n  margin-bottom: 0.4em;\n"])), function (p) {
   return (0, _theming.clr)(p.theme.menuDividerColor);
 });
+
 /**
  * The divider of menu items.
  */
-
-
 var MenuDivider = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   return /*#__PURE__*/_react["default"].createElement(Container, _extends({
     role: "separator"

package/dist/cjs/MenuDivider/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Container","styled","div","p","clr","theme","menuDividerColor","MenuDivider","forwardRef","props","ref","displayName"],"sources":["../../../src/MenuDivider/index.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport styled from '@emotion/styled';\nimport { clr } from '@os-design/theming';\n\nexport type MenuDividerProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\n\nconst Container = styled.div`\n  padding-top: 0.4em;\n  border-bottom: 1px solid ${(p) => clr(p.theme.menuDividerColor)};\n  margin-bottom: 0.4em;\n`;\n\n/**\n * The divider of menu items.\n */\nconst MenuDivider = forwardRef<HTMLDivElement, MenuDividerProps>(\n  (props, ref) => <Container role='separator' {...props} ref={ref} />\n);\n\nMenuDivider.displayName = 'MenuDivider';\n\nexport default MenuDivider;\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;;;;;;;;;;;;;AAIA,IAAMA,SAAS,GAAGC,kBAAA,CAAOC,GAAV,0JAEc,UAACC,CAAD;EAAA,OAAO,IAAAC,YAAA,EAAID,CAAC,CAACE,KAAF,CAAQC,gBAAZ,CAAP;AAAA,CAFd,CAAf;AAMA;AACA;AACA;;;AACA,IAAMC,WAAW,gBAAG,IAAAC,iBAAA,EAClB,UAACC,KAAD,EAAQC,GAAR;EAAA,oBAAgB,gCAAC,SAAD;IAAW,IAAI,EAAC;EAAhB,GAAgCD,KAAhC;IAAuC,GAAG,EAAEC;EAA5C,GAAhB;AAAA,CADkB,CAApB;AAIAH,WAAW,CAACI,WAAZ,GAA0B,aAA1B;eAEeJ,W"}
+{"version":3,"file":"index.js","names":["Container","styled","div","p","clr","theme","menuDividerColor","MenuDivider","forwardRef","props","ref","displayName"],"sources":["../../../src/MenuDivider/index.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport styled from '@emotion/styled';\nimport { clr } from '@os-design/theming';\n\nexport type MenuDividerProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\n\nconst Container = styled.div`\n  padding-top: 0.4em;\n  border-bottom: 1px solid ${(p) => clr(p.theme.menuDividerColor)};\n  margin-bottom: 0.4em;\n`;\n\n/**\n * The divider of menu items.\n */\nconst MenuDivider = forwardRef<HTMLDivElement, MenuDividerProps>(\n  (props, ref) => <Container role='separator' {...props} ref={ref} />\n);\n\nMenuDivider.displayName = 'MenuDivider';\n\nexport default MenuDivider;\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AAAyC;AAAA;AAAA;AAAA;AAAA;AAAA;AAIzC,IAAMA,SAAS,GAAGC,kBAAM,CAACC,GAAG,0JAEC,UAACC,CAAC;EAAA,OAAK,IAAAC,YAAG,EAACD,CAAC,CAACE,KAAK,CAACC,gBAAgB,CAAC;AAAA,EAEhE;;AAED;AACA;AACA;AACA,IAAMC,WAAW,gBAAG,IAAAC,iBAAU,EAC5B,UAACC,KAAK,EAAEC,GAAG;EAAA,oBAAK,gCAAC,SAAS;IAAC,IAAI,EAAC;EAAW,GAAKD,KAAK;IAAE,GAAG,EAAEC;EAAI,GAAG;AAAA,EACpE;AAEDH,WAAW,CAACI,WAAW,GAAG,aAAa;AAAC,eAEzBJ,WAAW;AAAA"}

package/dist/cjs/MenuGroup/index.js

@@ -1,64 +1,36 @@
 "use strict";
 
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var _theming = require("@os-design/theming");
-
 var _styles = require("@os-design/styles");
-
 var _utils = require("@os-design/utils");
-
 var _media = require("@os-design/media");
-
 var _menuUtils = require("@os-design/menu-utils");
-
 var _MenuItem = _interopRequireDefault(require("../MenuItem"));
-
 var _excluded = ["title", "maxSelectedItems", "value", "defaultValue", "onChange", "children"];
-
 var _templateObject, _templateObject2;
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
 function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
 var Title = _styled["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  font-weight: 500;\n  font-size: ", "em;\n  color: ", ";\n  margin-bottom: 0.4em;\n\n  padding: 0 ", "em;\n  ", " {\n    padding: 0 0.8em;\n  }\n\n  ", ";\n"])), function (p) {
   return p.theme.sizes.small;
 }, function (p) {
@@ -66,40 +38,35 @@ var Title = _styled["default"].div(_templateObject || (_templateObject = _tagged
 }, function (p) {
   return p.theme.modalBodyPaddingHorizontal[0];
 }, _media.m.min.xs, _styles.ellipsisStyles);
-
 var Container = _styled["default"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  &:not(:last-of-type) {\n    padding-bottom: 0.4em;\n    border-bottom: 1px solid ", ";\n  }\n  &:not(:first-of-type) {\n    margin-top: ", "em;\n    ", " {\n      margin-top: 0.4em;\n    }\n  }\n"])), function (p) {
   return (0, _theming.clr)(p.theme.menuGroupColorDivider);
 }, function (p) {
   return p.theme.modalBodyPaddingVertical[0];
 }, _media.m.min.xs);
+
 /**
  * The group of menu items.
  */
-
-
 var MenuGroup = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var title = _ref.title,
-      _ref$maxSelectedItems = _ref.maxSelectedItems,
-      maxSelectedItems = _ref$maxSelectedItems === void 0 ? 1 : _ref$maxSelectedItems,
-      value = _ref.value,
-      defaultValue = _ref.defaultValue,
-      _ref$onChange = _ref.onChange,
-      onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
-      children = _ref.children,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
+    _ref$maxSelectedItems = _ref.maxSelectedItems,
+    maxSelectedItems = _ref$maxSelectedItems === void 0 ? 1 : _ref$maxSelectedItems,
+    value = _ref.value,
+    defaultValue = _ref.defaultValue,
+    _ref$onChange = _ref.onChange,
+    onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
+    children = _ref.children,
+    rest = _objectWithoutProperties(_ref, _excluded);
   var _useContext = (0, _react.useContext)(_menuUtils.MenuContext),
-      closeOnSelect = _useContext.closeOnSelect;
-
+    closeOnSelect = _useContext.closeOnSelect;
   var _useForwardedState = (0, _utils.useForwardedState)({
-    value: value,
-    defaultValue: defaultValue,
-    onChange: onChange
-  }),
-      _useForwardedState2 = _slicedToArray(_useForwardedState, 2),
-      forwardedValue = _useForwardedState2[0],
-      setForwardedValue = _useForwardedState2[1];
-
+      value: value,
+      defaultValue: defaultValue,
+      onChange: onChange
+    }),
+    _useForwardedState2 = _slicedToArray(_useForwardedState, 2),
+    forwardedValue = _useForwardedState2[0],
+    setForwardedValue = _useForwardedState2[1];
   var onSelect = (0, _menuUtils.useSelectHandler)({
     value: forwardedValue || [],
     onChange: setForwardedValue,
@@ -110,8 +77,8 @@ var MenuGroup = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     return _react["default"].Children.map(children, function (child) {
       if (! /*#__PURE__*/_react["default"].isValidElement(child) || child.type !== _MenuItem["default"]) return child;
       var _child$props = child.props,
-          childValue = _child$props.value,
-          childOnClick = _child$props.onClick;
+        childValue = _child$props.value,
+        childOnClick = _child$props.onClick;
       return /*#__PURE__*/_react["default"].cloneElement(child, _objectSpread({
         key: childValue,
         selected: selectedItems.includes(childValue),

package/dist/cjs/MenuGroup/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Title","styled","div","p","theme","sizes","small","clr","menuGroupColorTitle","modalBodyPaddingHorizontal","m","min","xs","ellipsisStyles","Container","menuGroupColorDivider","modalBodyPaddingVertical","MenuGroup","forwardRef","ref","title","maxSelectedItems","value","defaultValue","onChange","children","rest","useContext","MenuContext","closeOnSelect","useForwardedState","forwardedValue","setForwardedValue","onSelect","useSelectHandler","menuItems","useMemo","selectedItems","React","Children","map","child","isValidElement","type","MenuItem","props","childValue","childOnClick","onClick","cloneElement","key","selected","includes","e","role","displayName"],"sources":["../../../src/MenuGroup/index.tsx"],"sourcesContent":["import React, { forwardRef, useContext, useMemo } from 'react';\nimport styled from '@emotion/styled';\nimport { clr } from '@os-design/theming';\nimport { ellipsisStyles } from '@os-design/styles';\nimport { useForwardedState } from '@os-design/utils';\nimport { m } from '@os-design/media';\nimport { useSelectHandler, MenuContext } from '@os-design/menu-utils';\nimport MenuItem from '../MenuItem';\n\ntype JsxDivProps = Omit<\n  JSX.IntrinsicElements['div'],\n  'value' | 'onChange' | 'ref'\n>;\nexport interface MenuGroupProps extends JsxDivProps {\n  /**\n   * The title of the menu group.\n   * @default undefined\n   */\n  title?: string;\n  /**\n   * The max number of menu items that the user can select.\n   * @default 1\n   */\n  maxSelectedItems?: number | 'all';\n  /**\n   * Selected menu items.\n   * @default undefined\n   */\n  value?: string[];\n  /**\n   * The default value.\n   * @default undefined\n   */\n  defaultValue?: string[];\n  /**\n   * The change event handler.\n   * @default undefined\n   */\n  onChange?: (value: string[]) => void;\n}\n\nconst Title = styled.div`\n  font-weight: 500;\n  font-size: ${(p) => p.theme.sizes.small}em;\n  color: ${(p) => clr(p.theme.menuGroupColorTitle)};\n  margin-bottom: 0.4em;\n\n  padding: 0 ${(p) => p.theme.modalBodyPaddingHorizontal[0]}em;\n  ${m.min.xs} {\n    padding: 0 0.8em;\n  }\n\n  ${ellipsisStyles};\n`;\n\nconst Container = styled.div`\n  &:not(:last-of-type) {\n    padding-bottom: 0.4em;\n    border-bottom: 1px solid ${(p) => clr(p.theme.menuGroupColorDivider)};\n  }\n  &:not(:first-of-type) {\n    margin-top: ${(p) => p.theme.modalBodyPaddingVertical[0]}em;\n    ${m.min.xs} {\n      margin-top: 0.4em;\n    }\n  }\n`;\n\n/**\n * The group of menu items.\n */\nconst MenuGroup = forwardRef<HTMLDivElement, MenuGroupProps>(\n  (\n    {\n      title,\n      maxSelectedItems = 1,\n      value,\n      defaultValue,\n      onChange = () => {},\n      children,\n      ...rest\n    },\n    ref\n  ) => {\n    const { closeOnSelect } = useContext(MenuContext);\n    const [forwardedValue, setForwardedValue] = useForwardedState({\n      value,\n      defaultValue,\n      onChange,\n    });\n\n    const onSelect = useSelectHandler({\n      value: forwardedValue || [],\n      onChange: setForwardedValue,\n      maxSelectedItems,\n    });\n\n    const menuItems = useMemo(() => {\n      const selectedItems = forwardedValue || [];\n      return React.Children.map(children, (child) => {\n        if (!React.isValidElement(child) || child.type !== MenuItem)\n          return child;\n        const { value: childValue, onClick: childOnClick } = child.props;\n        return React.cloneElement<any>(child, {\n          key: childValue,\n          selected: selectedItems.includes(childValue),\n          onClick: (e) => {\n            if (!childValue) return;\n            onSelect(childValue);\n            if (childOnClick) childOnClick(e);\n          },\n          ...(!closeOnSelect\n            ? {\n                role:\n                  maxSelectedItems === 1 ? 'menuitemradio' : 'menuitemcheckbox',\n                'aria-checked': selectedItems.includes(childValue),\n              }\n            : {}),\n        });\n      });\n    }, [children, closeOnSelect, forwardedValue, maxSelectedItems, onSelect]);\n\n    return (\n      <Container\n        role={maxSelectedItems === 1 ? 'radiogroup' : 'group'}\n        {...rest}\n        ref={ref}\n      >\n        {title && <Title>{title}</Title>}\n        {menuItems}\n      </Container>\n    );\n  }\n);\n\nMenuGroup.displayName = 'MenuGroup';\n\nexport default MenuGroup;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["Title","styled","div","p","theme","sizes","small","clr","menuGroupColorTitle","modalBodyPaddingHorizontal","m","min","xs","ellipsisStyles","Container","menuGroupColorDivider","modalBodyPaddingVertical","MenuGroup","forwardRef","ref","title","maxSelectedItems","value","defaultValue","onChange","children","rest","useContext","MenuContext","closeOnSelect","useForwardedState","forwardedValue","setForwardedValue","onSelect","useSelectHandler","menuItems","useMemo","selectedItems","React","Children","map","child","isValidElement","type","MenuItem","props","childValue","childOnClick","onClick","cloneElement","key","selected","includes","e","role","displayName"],"sources":["../../../src/MenuGroup/index.tsx"],"sourcesContent":["import React, { forwardRef, useContext, useMemo } from 'react';\nimport styled from '@emotion/styled';\nimport { clr } from '@os-design/theming';\nimport { ellipsisStyles } from '@os-design/styles';\nimport { useForwardedState } from '@os-design/utils';\nimport { m } from '@os-design/media';\nimport { useSelectHandler, MenuContext } from '@os-design/menu-utils';\nimport MenuItem from '../MenuItem';\n\ntype JsxDivProps = Omit<\n  JSX.IntrinsicElements['div'],\n  'value' | 'onChange' | 'ref'\n>;\nexport interface MenuGroupProps extends JsxDivProps {\n  /**\n   * The title of the menu group.\n   * @default undefined\n   */\n  title?: string;\n  /**\n   * The max number of menu items that the user can select.\n   * @default 1\n   */\n  maxSelectedItems?: number | 'all';\n  /**\n   * Selected menu items.\n   * @default undefined\n   */\n  value?: string[];\n  /**\n   * The default value.\n   * @default undefined\n   */\n  defaultValue?: string[];\n  /**\n   * The change event handler.\n   * @default undefined\n   */\n  onChange?: (value: string[]) => void;\n}\n\nconst Title = styled.div`\n  font-weight: 500;\n  font-size: ${(p) => p.theme.sizes.small}em;\n  color: ${(p) => clr(p.theme.menuGroupColorTitle)};\n  margin-bottom: 0.4em;\n\n  padding: 0 ${(p) => p.theme.modalBodyPaddingHorizontal[0]}em;\n  ${m.min.xs} {\n    padding: 0 0.8em;\n  }\n\n  ${ellipsisStyles};\n`;\n\nconst Container = styled.div`\n  &:not(:last-of-type) {\n    padding-bottom: 0.4em;\n    border-bottom: 1px solid ${(p) => clr(p.theme.menuGroupColorDivider)};\n  }\n  &:not(:first-of-type) {\n    margin-top: ${(p) => p.theme.modalBodyPaddingVertical[0]}em;\n    ${m.min.xs} {\n      margin-top: 0.4em;\n    }\n  }\n`;\n\n/**\n * The group of menu items.\n */\nconst MenuGroup = forwardRef<HTMLDivElement, MenuGroupProps>(\n  (\n    {\n      title,\n      maxSelectedItems = 1,\n      value,\n      defaultValue,\n      onChange = () => {},\n      children,\n      ...rest\n    },\n    ref\n  ) => {\n    const { closeOnSelect } = useContext(MenuContext);\n    const [forwardedValue, setForwardedValue] = useForwardedState({\n      value,\n      defaultValue,\n      onChange,\n    });\n\n    const onSelect = useSelectHandler({\n      value: forwardedValue || [],\n      onChange: setForwardedValue,\n      maxSelectedItems,\n    });\n\n    const menuItems = useMemo(() => {\n      const selectedItems = forwardedValue || [];\n      return React.Children.map(children, (child) => {\n        if (!React.isValidElement(child) || child.type !== MenuItem)\n          return child;\n        const { value: childValue, onClick: childOnClick } = child.props;\n        return React.cloneElement<any>(child, {\n          key: childValue,\n          selected: selectedItems.includes(childValue),\n          onClick: (e) => {\n            if (!childValue) return;\n            onSelect(childValue);\n            if (childOnClick) childOnClick(e);\n          },\n          ...(!closeOnSelect\n            ? {\n                role:\n                  maxSelectedItems === 1 ? 'menuitemradio' : 'menuitemcheckbox',\n                'aria-checked': selectedItems.includes(childValue),\n              }\n            : {}),\n        });\n      });\n    }, [children, closeOnSelect, forwardedValue, maxSelectedItems, onSelect]);\n\n    return (\n      <Container\n        role={maxSelectedItems === 1 ? 'radiogroup' : 'group'}\n        {...rest}\n        ref={ref}\n      >\n        {title && <Title>{title}</Title>}\n        {menuItems}\n      </Container>\n    );\n  }\n);\n\nMenuGroup.displayName = 'MenuGroup';\n\nexport default MenuGroup;\n"],"mappings":"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"}

package/dist/cjs/MenuItem/index.js

@@ -1,52 +1,31 @@
 "use strict";
 
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var _media = require("@os-design/media");
-
 var _theming = require("@os-design/theming");
-
 var _icons = require("@os-design/icons");
-
 var _utils = require("@os-design/utils");
-
 var _react2 = require("@emotion/react");
-
 var _menuUtils = require("@os-design/menu-utils");
-
 var _Button = _interopRequireDefault(require("../Button"));
-
 var _excluded = ["selected", "value", "right", "onClick"];
-
 var _templateObject, _templateObject2, _templateObject3;
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
 var selectedStyles = function selectedStyles(p) {
   return p.selected && (0, _react2.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    background-color: ", ";\n  "])), (0, _theming.clr)(p.theme.menuItemSelectedColorBg));
 };
-
 var StyledButton = (0, _styled["default"])(_Button["default"], (0, _utils.omitEmotionProps)('selected'))(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  font-weight: normal;\n  border-radius: 0;\n  height: ", "em;\n\n  & > span {\n    flex: 1;\n    text-align: left;\n    overflow: hidden;\n    line-height: 1.5;\n  }\n\n  padding: 0 ", "em;\n  ", " {\n    padding: 0 ", "em;\n  }\n\n  ", ";\n"])), function (p) {
   return p.theme.menuItemHeight;
 }, function (p) {
@@ -57,23 +36,21 @@ var StyledButton = (0, _styled["default"])(_Button["default"], (0, _utils.omitEm
 var SelectedIcon = (0, _styled["default"])(_icons.Check)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  color: ", ";\n"])), function (p) {
   return (0, _theming.clr)(p.theme.menuItemSelectedColorIcon);
 });
+
 /**
  * The base menu item.
  */
-
 var MenuItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var _ref$selected = _ref.selected,
-      selected = _ref$selected === void 0 ? false : _ref$selected,
-      value = _ref.value,
-      right = _ref.right,
-      _ref$onClick = _ref.onClick,
-      onClick = _ref$onClick === void 0 ? function () {} : _ref$onClick,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
+    selected = _ref$selected === void 0 ? false : _ref$selected,
+    value = _ref.value,
+    right = _ref.right,
+    _ref$onClick = _ref.onClick,
+    onClick = _ref$onClick === void 0 ? function () {} : _ref$onClick,
+    rest = _objectWithoutProperties(_ref, _excluded);
   var _useContext = (0, _react.useContext)(_menuUtils.MenuContext),
-      closeOnSelect = _useContext.closeOnSelect,
-      onClose = _useContext.onClose;
-
+    closeOnSelect = _useContext.closeOnSelect,
+    onClose = _useContext.onClose;
   var onClickRef = (0, _react.useRef)();
   (0, _react.useEffect)(function () {
     onClickRef.current = onClick;