@os-design/core 1.0.177 → 1.0.178

package/dist/cjs/Drawer/index.js

@@ -4,21 +4,21 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _reactFocusLock = _interopRequireDefault(require("react-focus-lock"));
-var _utils = require("@os-design/utils");
-var _styles = require("@os-design/styles");
-var _theming = require("@os-design/theming");
+exports.useCloseDrawer = exports["default"] = void 0;
+var _react = require("@emotion/react");
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-var _react2 = require("@emotion/react");
 var _portal = _interopRequireDefault(require("@os-design/portal"));
+var _styles = require("@os-design/styles");
+var _theming = require("@os-design/theming");
+var _utils = require("@os-design/utils");
+var _react2 = _interopRequireWildcard(require("react"));
+var _reactFocusLock = _interopRequireDefault(require("react-focus-lock"));
 var _Modal = require("../Modal");
 var _excluded = ["placement", "width", "visible", "onClose", "size", "children", "onClick"];
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
-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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 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; }
@@ -27,23 +27,23 @@ var DRAWER_CONTAINER_Z_INDEX = 900;
 var DRAWER_BOX_SHADOW_SIZE_EM = 1;
 var DrawerMask = (0, _styled["default"])(_Modal.ModalMask)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  z-index: ", ";\n"])), DRAWER_CONTAINER_Z_INDEX);
 var Container = _styled["default"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 100%;\n  z-index: ", ";\n"])), DRAWER_CONTAINER_Z_INDEX);
-var placementLeftFadeIn = (0, _react2.keyframes)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  from { transform: translateX(calc(-100% - ", "em)); }\n  to { transform: translateX(0); }\n"])), DRAWER_BOX_SHADOW_SIZE_EM);
-var placementLeftFadeOut = (0, _react2.keyframes)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  from { transform: translateX(0); }\n  to { transform: translateX(calc(-100% - ", "em)); }\n"])), DRAWER_BOX_SHADOW_SIZE_EM);
-var placementRightFadeIn = (0, _react2.keyframes)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  from { transform: translateX(calc(100vw + ", "em)); }\n  to { transform: translateX(calc(100vw - 100%)); }\n"])), DRAWER_BOX_SHADOW_SIZE_EM);
-var placementRightFadeOut = (0, _react2.keyframes)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  from { transform: translateX(calc(100vw - 100%)); }\n  to { transform: translateX(calc(100vw + ", "em)); }\n"])), DRAWER_BOX_SHADOW_SIZE_EM);
+var placementLeftFadeIn = (0, _react.keyframes)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  from { transform: translateX(calc(-100% - ", "em)); }\n  to { transform: translateX(0); }\n"])), DRAWER_BOX_SHADOW_SIZE_EM);
+var placementLeftFadeOut = (0, _react.keyframes)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  from { transform: translateX(0); }\n  to { transform: translateX(calc(-100% - ", "em)); }\n"])), DRAWER_BOX_SHADOW_SIZE_EM);
+var placementRightFadeIn = (0, _react.keyframes)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  from { transform: translateX(calc(100vw + ", "em)); }\n  to { transform: translateX(calc(100vw - 100%)); }\n"])), DRAWER_BOX_SHADOW_SIZE_EM);
+var placementRightFadeOut = (0, _react.keyframes)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  from { transform: translateX(calc(100vw - 100%)); }\n  to { transform: translateX(calc(100vw + ", "em)); }\n"])), DRAWER_BOX_SHADOW_SIZE_EM);
 var placementLeftVisibleStyles = function placementLeftVisibleStyles(p) {
-  return p.placement === 'left' && p.visible && (0, _react2.css)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    animation: ", " ", "ms forwards;\n  "])), placementLeftFadeIn, p.theme.transitionDelay);
+  return p.placement === 'left' && p.visible && (0, _react.css)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    animation: ", " ", "ms forwards;\n  "])), placementLeftFadeIn, p.theme.transitionDelay);
 };
 var placementLeftInvisibleStyles = function placementLeftInvisibleStyles(p) {
-  return p.placement === 'left' && !p.visible && (0, _react2.css)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    animation: ", " ", "ms forwards;\n  "])), placementLeftFadeOut, p.theme.transitionDelay);
+  return p.placement === 'left' && !p.visible && (0, _react.css)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    animation: ", " ", "ms forwards;\n  "])), placementLeftFadeOut, p.theme.transitionDelay);
 };
 var placementRightVisibleStyles = function placementRightVisibleStyles(p) {
-  return p.placement === 'right' && p.visible && (0, _react2.css)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n    animation: ", " ", "ms forwards;\n  "])), placementRightFadeIn, p.theme.transitionDelay);
+  return p.placement === 'right' && p.visible && (0, _react.css)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n    animation: ", " ", "ms forwards;\n  "])), placementRightFadeIn, p.theme.transitionDelay);
 };
 var placementRightInvisibleStyles = function placementRightInvisibleStyles(p) {
-  return p.placement === 'right' && !p.visible && (0, _react2.css)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n    animation: ", " ", "ms forwards;\n  "])), placementRightFadeOut, p.theme.transitionDelay);
+  return p.placement === 'right' && !p.visible && (0, _react.css)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n    animation: ", " ", "ms forwards;\n  "])), placementRightFadeOut, p.theme.transitionDelay);
 };
-var Content = (0, _styled["default"])('div', (0, _utils.omitEmotionProps)('placement', 'width', 'visible', 'size'))(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  width: ", ";\n  padding-bottom: env(safe-area-inset-bottom);\n\n  background-color: ", ";\n  color: ", ";\n  box-shadow: 0 0 ", "em\n    ", ";\n\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n\n  ", ";\n  ", ";\n"])), function (p) {
+var Content = (0, _styled["default"])('div', (0, _utils.omitEmotionProps)('placement', 'width', 'visible', 'size'))(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  ", ";\n\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  width: ", ";\n  padding-bottom: env(safe-area-inset-bottom);\n\n  background-color: ", ";\n  color: ", ";\n  box-shadow: 0 0 ", "em\n    ", ";\n\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n\n  ", ";\n  ", ";\n"])), _styles.resetFocusStyles, function (p) {
   return p.width;
 }, function (p) {
   return (0, _theming.clr)(p.theme.colorBg);
@@ -52,11 +52,16 @@ var Content = (0, _styled["default"])('div', (0, _utils.omitEmotionProps)('place
 }, DRAWER_BOX_SHADOW_SIZE_EM, function (p) {
   return (0, _theming.clr)(p.theme.drawerColorBoxShadow);
 }, placementLeftVisibleStyles, placementLeftInvisibleStyles, placementRightVisibleStyles, placementRightInvisibleStyles, (0, _styles.enableScrollingStyles)('y'), _styles.sizeStyles);
+var CloseDrawerContext = /*#__PURE__*/_react2["default"].createContext(function () {});
+var useCloseDrawer = function useCloseDrawer() {
+  return (0, _react2.useContext)(CloseDrawerContext);
+};
 
 /**
  * The side panel that appears from the edge of the screen.
  */
-var Drawer = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+exports.useCloseDrawer = useCloseDrawer;
+var Drawer = /*#__PURE__*/(0, _react2.forwardRef)(function (_ref, ref) {
   var _ref$placement = _ref.placement,
     placement = _ref$placement === void 0 ? 'right' : _ref$placement,
     _ref$width = _ref.width,
@@ -68,34 +73,41 @@ var Drawer = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     size = _ref.size,
     children = _ref.children,
     _ref$onClick = _ref.onClick,
-    _onClick = _ref$onClick === void 0 ? function () {} : _ref$onClick,
+    onClick = _ref$onClick === void 0 ? function () {} : _ref$onClick,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useTheme = (0, _theming.useTheme)(),
     theme = _useTheme.theme;
   var mounted = (0, _utils.useClosable)(visible, theme.transitionDelay);
   (0, _utils.useBodyScroll)(!visible);
-  (0, _utils.useKeyPress)(typeof window !== 'undefined' ? window : undefined, 'Escape', onClose);
+  var clickHandler = (0, _react2.useCallback)(function (e) {
+    e.stopPropagation();
+    onClick(e);
+  }, [onClick]);
+  var keyDownHandler = (0, _react2.useCallback)(function (e) {
+    if (e.key === 'Escape') onClose();
+  }, [onClose]);
   if (!mounted) return null;
-  return /*#__PURE__*/_react["default"].createElement(_portal["default"], null, /*#__PURE__*/_react["default"].createElement(DrawerMask, {
+  return /*#__PURE__*/_react2["default"].createElement(_portal["default"], null, /*#__PURE__*/_react2["default"].createElement(DrawerMask, {
     visible: visible
-  }), /*#__PURE__*/_react["default"].createElement(Container, {
+  }), /*#__PURE__*/_react2["default"].createElement(Container, {
     onClick: onClose
-  }, /*#__PURE__*/_react["default"].createElement(_reactFocusLock["default"], {
-    autoFocus: false
-  }, /*#__PURE__*/_react["default"].createElement(Content, _extends({
+  }, /*#__PURE__*/_react2["default"].createElement(_reactFocusLock["default"], {
+    autoFocus: true
+  }, /*#__PURE__*/_react2["default"].createElement(CloseDrawerContext.Provider, {
+    value: onClose
+  }, /*#__PURE__*/_react2["default"].createElement(Content, _extends({
     placement: placement,
     width: width,
     visible: visible,
     size: size,
-    onClick: function onClick(e) {
-      e.stopPropagation();
-      _onClick(e);
-    },
+    tabIndex: -1,
+    onKeyDown: keyDownHandler,
+    onClick: clickHandler,
     role: "dialog",
     "aria-modal": true
   }, rest, {
     ref: ref
-  }), children))));
+  }), children)))));
 });
 Drawer.displayName = 'Drawer';
 var _default = Drawer;

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["DRAWER_CONTAINER_Z_INDEX","DRAWER_BOX_SHADOW_SIZE_EM","DrawerMask","styled","ModalMask","Container","div","placementLeftFadeIn","keyframes","placementLeftFadeOut","placementRightFadeIn","placementRightFadeOut","placementLeftVisibleStyles","p","placement","visible","css","theme","transitionDelay","placementLeftInvisibleStyles","placementRightVisibleStyles","placementRightInvisibleStyles","Content","omitEmotionProps","width","clr","colorBg","colorText","drawerColorBoxShadow","enableScrollingStyles","sizeStyles","Drawer","forwardRef","ref","onClose","size","children","onClick","rest","useTheme","mounted","useClosable","useBodyScroll","useKeyPress","window","undefined","e","stopPropagation","displayName"],"sources":["../../../src/Drawer/index.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport FocusLock from 'react-focus-lock';\nimport {\n  useBodyScroll,\n  useClosable,\n  useKeyPress,\n  omitEmotionProps,\n} from '@os-design/utils';\nimport { enableScrollingStyles, sizeStyles, WithSize } from '@os-design/styles';\nimport { clr, useTheme } from '@os-design/theming';\nimport styled from '@emotion/styled';\nimport { css, keyframes } from '@emotion/react';\nimport Portal from '@os-design/portal';\nimport { ModalMask } from '../Modal';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface DrawerProps extends JsxDivProps, WithSize {\n  /**\n   * The placement of the drawer.\n   * @default right\n   */\n  placement?: 'left' | 'right';\n  /**\n   * The width of the drawer.\n   * @default 15em\n   */\n  width?: string;\n  /**\n   * Whether the drawer is visible.\n   * @default false\n   */\n  visible?: boolean;\n  /**\n   * Specifies a callback that will be called when a user clicks the mask.\n   * The callback should set the visible state to false.\n   * @default undefined\n   */\n  onClose?: () => void;\n}\n\nconst DRAWER_CONTAINER_Z_INDEX = 900;\nconst DRAWER_BOX_SHADOW_SIZE_EM = 1;\n\nconst DrawerMask = styled(ModalMask)`\n  z-index: ${DRAWER_CONTAINER_Z_INDEX};\n`;\n\nconst Container = styled.div`\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 100%;\n  z-index: ${DRAWER_CONTAINER_Z_INDEX};\n`;\n\nconst placementLeftFadeIn = keyframes`\n  from { transform: translateX(calc(-100% - ${DRAWER_BOX_SHADOW_SIZE_EM}em)); }\n  to { transform: translateX(0); }\n`;\n\nconst placementLeftFadeOut = keyframes`\n  from { transform: translateX(0); }\n  to { transform: translateX(calc(-100% - ${DRAWER_BOX_SHADOW_SIZE_EM}em)); }\n`;\n\nconst placementRightFadeIn = keyframes`\n  from { transform: translateX(calc(100vw + ${DRAWER_BOX_SHADOW_SIZE_EM}em)); }\n  to { transform: translateX(calc(100vw - 100%)); }\n`;\n\nconst placementRightFadeOut = keyframes`\n  from { transform: translateX(calc(100vw - 100%)); }\n  to { transform: translateX(calc(100vw + ${DRAWER_BOX_SHADOW_SIZE_EM}em)); }\n`;\n\nconst placementLeftVisibleStyles = (p) =>\n  p.placement === 'left' &&\n  p.visible &&\n  css`\n    animation: ${placementLeftFadeIn} ${p.theme.transitionDelay}ms forwards;\n  `;\n\nconst placementLeftInvisibleStyles = (p) =>\n  p.placement === 'left' &&\n  !p.visible &&\n  css`\n    animation: ${placementLeftFadeOut} ${p.theme.transitionDelay}ms forwards;\n  `;\n\nconst placementRightVisibleStyles = (p) =>\n  p.placement === 'right' &&\n  p.visible &&\n  css`\n    animation: ${placementRightFadeIn} ${p.theme.transitionDelay}ms forwards;\n  `;\n\nconst placementRightInvisibleStyles = (p) =>\n  p.placement === 'right' &&\n  !p.visible &&\n  css`\n    animation: ${placementRightFadeOut} ${p.theme.transitionDelay}ms forwards;\n  `;\n\ntype ContentProps = Pick<\n  DrawerProps,\n  'placement' | 'width' | 'visible' | 'size'\n>;\nconst Content = styled(\n  'div',\n  omitEmotionProps('placement', 'width', 'visible', 'size')\n)<ContentProps>`\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  width: ${(p) => p.width};\n  padding-bottom: env(safe-area-inset-bottom);\n\n  background-color: ${(p) => clr(p.theme.colorBg)};\n  color: ${(p) => clr(p.theme.colorText)};\n  box-shadow: 0 0 ${DRAWER_BOX_SHADOW_SIZE_EM}em\n    ${(p) => clr(p.theme.drawerColorBoxShadow)};\n\n  ${placementLeftVisibleStyles};\n  ${placementLeftInvisibleStyles};\n  ${placementRightVisibleStyles};\n  ${placementRightInvisibleStyles};\n\n  ${enableScrollingStyles('y')};\n  ${sizeStyles};\n`;\n\n/**\n * The side panel that appears from the edge of the screen.\n */\nconst Drawer = forwardRef<HTMLDivElement, DrawerProps>(\n  (\n    {\n      placement = 'right',\n      width = '15em',\n      visible = false,\n      onClose = () => {},\n      size,\n      children,\n      onClick = () => {},\n      ...rest\n    },\n    ref\n  ) => {\n    const { theme } = useTheme();\n    const mounted = useClosable(visible, theme.transitionDelay);\n    useBodyScroll(!visible);\n    useKeyPress(\n      (typeof window !== 'undefined' ? window : undefined) as EventTarget,\n      'Escape',\n      onClose\n    );\n\n    if (!mounted) return null;\n\n    return (\n      <Portal>\n        <DrawerMask visible={visible} />\n        <Container onClick={onClose}>\n          <FocusLock autoFocus={false}>\n            <Content\n              placement={placement}\n              width={width}\n              visible={visible}\n              size={size}\n              onClick={(e) => {\n                e.stopPropagation();\n                onClick(e);\n              }}\n              role='dialog'\n              aria-modal\n              {...rest}\n              ref={ref}\n            >\n              {children}\n            </Content>\n          </FocusLock>\n        </Container>\n      </Portal>\n    );\n  }\n);\n\nDrawer.displayName = 'Drawer';\n\nexport default Drawer;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["DRAWER_CONTAINER_Z_INDEX","DRAWER_BOX_SHADOW_SIZE_EM","DrawerMask","styled","ModalMask","Container","div","placementLeftFadeIn","keyframes","placementLeftFadeOut","placementRightFadeIn","placementRightFadeOut","placementLeftVisibleStyles","p","placement","visible","css","theme","transitionDelay","placementLeftInvisibleStyles","placementRightVisibleStyles","placementRightInvisibleStyles","Content","omitEmotionProps","resetFocusStyles","width","clr","colorBg","colorText","drawerColorBoxShadow","enableScrollingStyles","sizeStyles","CloseDrawerContext","React","createContext","useCloseDrawer","useContext","Drawer","forwardRef","ref","onClose","size","children","onClick","rest","useTheme","mounted","useClosable","useBodyScroll","clickHandler","useCallback","e","stopPropagation","keyDownHandler","key","displayName"],"sources":["../../../src/Drawer/index.tsx"],"sourcesContent":["import { css, keyframes } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport Portal from '@os-design/portal';\nimport {\n  enableScrollingStyles,\n  resetFocusStyles,\n  sizeStyles,\n  WithSize,\n} from '@os-design/styles';\nimport { clr, useTheme } from '@os-design/theming';\nimport { omitEmotionProps, useBodyScroll, useClosable } from '@os-design/utils';\nimport React, { forwardRef, useCallback, useContext } from 'react';\nimport FocusLock from 'react-focus-lock';\nimport { ModalMask } from '../Modal';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface DrawerProps extends JsxDivProps, WithSize {\n  /**\n   * The placement of the drawer.\n   * @default right\n   */\n  placement?: 'left' | 'right';\n  /**\n   * The width of the drawer.\n   * @default 15em\n   */\n  width?: string;\n  /**\n   * Whether the drawer is visible.\n   * @default false\n   */\n  visible?: boolean;\n  /**\n   * Specifies a callback that will be called when a user clicks the mask.\n   * The callback should set the visible state to false.\n   * @default undefined\n   */\n  onClose?: () => void;\n}\n\nconst DRAWER_CONTAINER_Z_INDEX = 900;\nconst DRAWER_BOX_SHADOW_SIZE_EM = 1;\n\nconst DrawerMask = styled(ModalMask)`\n  z-index: ${DRAWER_CONTAINER_Z_INDEX};\n`;\n\nconst Container = styled.div`\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 100%;\n  z-index: ${DRAWER_CONTAINER_Z_INDEX};\n`;\n\nconst placementLeftFadeIn = keyframes`\n  from { transform: translateX(calc(-100% - ${DRAWER_BOX_SHADOW_SIZE_EM}em)); }\n  to { transform: translateX(0); }\n`;\n\nconst placementLeftFadeOut = keyframes`\n  from { transform: translateX(0); }\n  to { transform: translateX(calc(-100% - ${DRAWER_BOX_SHADOW_SIZE_EM}em)); }\n`;\n\nconst placementRightFadeIn = keyframes`\n  from { transform: translateX(calc(100vw + ${DRAWER_BOX_SHADOW_SIZE_EM}em)); }\n  to { transform: translateX(calc(100vw - 100%)); }\n`;\n\nconst placementRightFadeOut = keyframes`\n  from { transform: translateX(calc(100vw - 100%)); }\n  to { transform: translateX(calc(100vw + ${DRAWER_BOX_SHADOW_SIZE_EM}em)); }\n`;\n\nconst placementLeftVisibleStyles = (p) =>\n  p.placement === 'left' &&\n  p.visible &&\n  css`\n    animation: ${placementLeftFadeIn} ${p.theme.transitionDelay}ms forwards;\n  `;\n\nconst placementLeftInvisibleStyles = (p) =>\n  p.placement === 'left' &&\n  !p.visible &&\n  css`\n    animation: ${placementLeftFadeOut} ${p.theme.transitionDelay}ms forwards;\n  `;\n\nconst placementRightVisibleStyles = (p) =>\n  p.placement === 'right' &&\n  p.visible &&\n  css`\n    animation: ${placementRightFadeIn} ${p.theme.transitionDelay}ms forwards;\n  `;\n\nconst placementRightInvisibleStyles = (p) =>\n  p.placement === 'right' &&\n  !p.visible &&\n  css`\n    animation: ${placementRightFadeOut} ${p.theme.transitionDelay}ms forwards;\n  `;\n\ntype ContentProps = Pick<\n  DrawerProps,\n  'placement' | 'width' | 'visible' | 'size'\n>;\nconst Content = styled(\n  'div',\n  omitEmotionProps('placement', 'width', 'visible', 'size')\n)<ContentProps>`\n  ${resetFocusStyles};\n\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  width: ${(p) => p.width};\n  padding-bottom: env(safe-area-inset-bottom);\n\n  background-color: ${(p) => clr(p.theme.colorBg)};\n  color: ${(p) => clr(p.theme.colorText)};\n  box-shadow: 0 0 ${DRAWER_BOX_SHADOW_SIZE_EM}em\n    ${(p) => clr(p.theme.drawerColorBoxShadow)};\n\n  ${placementLeftVisibleStyles};\n  ${placementLeftInvisibleStyles};\n  ${placementRightVisibleStyles};\n  ${placementRightInvisibleStyles};\n\n  ${enableScrollingStyles('y')};\n  ${sizeStyles};\n`;\n\nconst CloseDrawerContext = React.createContext<() => void>(() => {});\n\nexport const useCloseDrawer = () => useContext(CloseDrawerContext);\n\n/**\n * The side panel that appears from the edge of the screen.\n */\nconst Drawer = forwardRef<HTMLDivElement, DrawerProps>(\n  (\n    {\n      placement = 'right',\n      width = '15em',\n      visible = false,\n      onClose = () => {},\n      size,\n      children,\n      onClick = () => {},\n      ...rest\n    },\n    ref\n  ) => {\n    const { theme } = useTheme();\n    const mounted = useClosable(visible, theme.transitionDelay);\n\n    useBodyScroll(!visible);\n\n    const clickHandler = useCallback(\n      (e) => {\n        e.stopPropagation();\n        onClick(e);\n      },\n      [onClick]\n    );\n\n    const keyDownHandler = useCallback(\n      (e) => {\n        if (e.key === 'Escape') onClose();\n      },\n      [onClose]\n    );\n\n    if (!mounted) return null;\n\n    return (\n      <Portal>\n        <DrawerMask visible={visible} />\n        <Container onClick={onClose}>\n          <FocusLock autoFocus>\n            <CloseDrawerContext.Provider value={onClose}>\n              <Content\n                placement={placement}\n                width={width}\n                visible={visible}\n                size={size}\n                tabIndex={-1}\n                onKeyDown={keyDownHandler}\n                onClick={clickHandler}\n                role='dialog'\n                aria-modal\n                {...rest}\n                ref={ref}\n              >\n                {children}\n              </Content>\n            </CloseDrawerContext.Provider>\n          </FocusLock>\n        </Container>\n      </Portal>\n    );\n  }\n);\n\nDrawer.displayName = 'Drawer';\n\nexport default Drawer;\n"],"mappings":"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"}

package/dist/cjs/Modal/index.js

@@ -4,7 +4,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.ModalMask = void 0;
+exports.useCloseModal = exports["default"] = exports.ModalMask = void 0;
 var _react = require("@emotion/react");
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _icons = require("@os-design/icons");
@@ -102,10 +102,15 @@ var Footer = _styled["default"].div(_templateObject17 || (_templateObject17 = _t
 }, function (p) {
   return p.theme.modalBodyPaddingVertical[1];
 });
+var CloseModalContext = /*#__PURE__*/_react2["default"].createContext(function () {});
+var useCloseModal = function useCloseModal() {
+  return (0, _react2.useContext)(CloseModalContext);
+};
 
 /**
  * The base pop-up window.
  */
+exports.useCloseModal = useCloseModal;
 var Modal = /*#__PURE__*/(0, _react2.forwardRef)(function (_ref, ref) {
   var title = _ref.title,
     _ref$okText = _ref.okText,
@@ -128,7 +133,7 @@ var Modal = /*#__PURE__*/(0, _react2.forwardRef)(function (_ref, ref) {
     size = _ref.size,
     id = _ref.id,
     _ref$onClick = _ref.onClick,
-    _onClick = _ref$onClick === void 0 ? function () {} : _ref$onClick,
+    onClick = _ref$onClick === void 0 ? function () {} : _ref$onClick,
     children = _ref.children,
     rest = _objectWithoutProperties(_ref, _excluded);
   var contentRef = (0, _react2.useRef)(null);
@@ -136,33 +141,40 @@ var Modal = /*#__PURE__*/(0, _react2.forwardRef)(function (_ref, ref) {
     theme = _useTheme.theme;
   var mounted = (0, _utils.useClosable)(visible, theme.transitionDelay);
   (0, _utils.useBodyScroll)(!visible);
-  (0, _utils.useKeyPress)(typeof window !== 'undefined' ? window : undefined, 'Escape', onClose);
   var titleId = (0, _react2.useMemo)(function () {
     return "modal-title-".concat(Math.random().toString(36).slice(2, 11));
   }, []);
   var bodyId = (0, _react2.useMemo)(function () {
     return id || "modal-body-".concat(Math.random().toString(36).slice(2, 11));
   }, [id]);
+  var clickHandler = (0, _react2.useCallback)(function (e) {
+    e.stopPropagation();
+    onClick(e);
+  }, [onClick]);
+  var keyDownHandler = (0, _react2.useCallback)(function (e) {
+    if (e.key === 'Escape') onClose();
+  }, [onClose]);
+  var ariaLabelledBy = (0, _react2.useMemo)(function () {
+    return header === undefined ? titleId : undefined;
+  }, [header, titleId]);
   if (!mounted) return null;
   return /*#__PURE__*/_react2["default"].createElement(_portal["default"], null, /*#__PURE__*/_react2["default"].createElement(ModalMask, {
     visible: visible
   }), /*#__PURE__*/_react2["default"].createElement(Container, {
-    onClick: function onClick(e) {
-      e.stopPropagation();
-      onClose();
-    }
+    onClick: clickHandler
   }, /*#__PURE__*/_react2["default"].createElement(_reactFocusLock["default"], {
-    autoFocus: false
+    autoFocus: true
+  }, /*#__PURE__*/_react2["default"].createElement(CloseModalContext.Provider, {
+    value: onClose
   }, /*#__PURE__*/_react2["default"].createElement(Content, {
     visible: visible,
     size: size,
-    onClick: function onClick(e) {
-      e.stopPropagation();
-      _onClick(e);
-    },
+    tabIndex: -1,
+    onKeyDown: keyDownHandler,
+    onClick: clickHandler,
     role: "dialog",
     "aria-modal": true,
-    "aria-labelledby": header === undefined ? titleId : undefined,
+    "aria-labelledby": ariaLabelledBy,
     "aria-describedby": bodyId,
     ref: contentRef
   }, header === undefined ? /*#__PURE__*/_react2["default"].createElement(_theming.ThemeOverrider, {
@@ -187,7 +199,7 @@ var Modal = /*#__PURE__*/(0, _react2.forwardRef)(function (_ref, ref) {
     loading: okLoading,
     disabled: okDisabled,
     onClick: onOk
-  }, okText)) : footer))));
+  }, okText)) : footer)))));
 });
 Modal.displayName = 'Modal';
 var _default = Modal;

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["MODAL_CONTAINER_Z_INDEX","MODAL_BOX_SHADOW_SIZE_EM","maskFadeIn","keyframes","maskFadeOut","maskVisibleStyles","p","visible","css","theme","transitionDelay","maskInvisibleStyles","ModalMask","styled","omitEmotionProps","clr","modalMaskColorBg","Container","div","m","min","xs","enableScrollingStyles","contentFadeIn","contentFadeOut","contentFadeInXs","contentFadeOutXs","contentVisibleStyles","contentInvisibleStyles","Content","colorBg","colorText","modalColorBoxShadow","borderRadius","modalWidth","sizeStyles","Header","modalHeaderHeight","modalHeaderColorBorderBottom","modalBodyPaddingHorizontal","Math","max","buttonPaddingHorizontal","Title","sizes","large","ellipsisStyles","Body","modalBodyPaddingVertical","Footer","Modal","forwardRef","ref","title","okText","okDanger","okLoading","okDisabled","header","footer","locale","defaultLocale","onClose","onOk","size","id","onClick","children","rest","contentRef","useRef","useTheme","mounted","useClosable","useBodyScroll","useKeyPress","window","undefined","titleId","useMemo","random","toString","slice","bodyId","e","stopPropagation","t","modalCloseButtonPaddingHorizontal","closeLabel","displayName"],"sources":["../../../src/Modal/index.tsx"],"sourcesContent":["import { css, keyframes } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport { Close } from '@os-design/icons';\nimport { m } from '@os-design/media';\nimport Portal from '@os-design/portal';\nimport {\n  ellipsisStyles,\n  enableScrollingStyles,\n  sizeStyles,\n  WithSize,\n} from '@os-design/styles';\nimport { clr, ThemeOverrider, useTheme } from '@os-design/theming';\nimport {\n  omitEmotionProps,\n  useBodyScroll,\n  useClosable,\n  useKeyPress,\n} from '@os-design/utils';\nimport React, { forwardRef, useMemo, useRef } from 'react';\nimport FocusLock from 'react-focus-lock';\nimport Button from '../Button';\nimport defaultLocale, { ModalLocale } from './utils/defaultLocale';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface ModalProps extends JsxDivProps, WithSize {\n  /**\n   * The title of the modal.\n   * @default undefined\n   */\n  title?: string;\n  /**\n   * The text of the OK button.\n   * @default OK\n   */\n  okText?: string;\n  /**\n   * Sets the danger styles to the OK button.\n   * @default false\n   */\n  okDanger?: boolean;\n  /**\n   * Whether the OK button is loading.\n   * @default false\n   */\n  okLoading?: boolean;\n  /**\n   * Whether the OK button is disabled.\n   * @default false\n   */\n  okDisabled?: boolean;\n  /**\n   * The header component.\n   * Set as null if you don't need the default header.\n   * @default undefined\n   */\n  header?: React.ReactNode;\n  /**\n   * The footer component.\n   * Set as null if you don't need the default footer.\n   * @default undefined\n   */\n  footer?: React.ReactNode;\n  /**\n   * Whether the modal is visible.\n   * @default false\n   */\n  visible?: boolean;\n  /**\n   * The locale of the modal.\n   * @default undefined\n   */\n  locale?: ModalLocale;\n  /**\n   * Specifies a callback that will be called when a user clicks the mask or\n   * the close button. The callback should set the visible state to false.\n   * @default undefined\n   */\n  onClose?: () => void;\n  /**\n   * Specifies a callback that will be called when a user clicks the OK button.\n   * @default undefined\n   */\n  onOk?: () => void;\n}\n\nconst MODAL_CONTAINER_Z_INDEX = 1000;\nconst MODAL_BOX_SHADOW_SIZE_EM = 1;\n\nconst maskFadeIn = keyframes`\n  from { opacity: 0; }\n  to { opacity: 1; }\n`;\n\nconst maskFadeOut = keyframes`\n  from { opacity: 1; }\n  to { opacity: 0; }\n`;\n\nconst maskVisibleStyles = (p) =>\n  p.visible &&\n  css`\n    animation: ${maskFadeIn} ${p.theme.transitionDelay}ms forwards;\n  `;\n\nconst maskInvisibleStyles = (p) =>\n  !p.visible &&\n  css`\n    animation: ${maskFadeOut} ${p.theme.transitionDelay}ms forwards;\n  `;\n\ntype MaskProps = Pick<ModalProps, 'visible'>;\nexport const ModalMask = styled('div', omitEmotionProps('visible'))<MaskProps>`\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 100%;\n  background-color: ${(p) => clr(p.theme.modalMaskColorBg)};\n  z-index: ${MODAL_CONTAINER_Z_INDEX};\n  ${maskVisibleStyles};\n  ${maskInvisibleStyles};\n`;\n\nconst Container = styled.div`\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 100%;\n  z-index: ${MODAL_CONTAINER_Z_INDEX};\n\n  ${m.min.xs} {\n    ${enableScrollingStyles('y')};\n  }\n`;\n\nconst contentFadeIn = keyframes`\n  from { transform: translateY(calc(var(--vh, 1vh) * 100 + ${MODAL_BOX_SHADOW_SIZE_EM}em)); }\n  to { transform: translateY(calc(var(--vh, 1vh) * 100 - 100%)); }\n`;\n\nconst contentFadeOut = keyframes`\n  from { transform: translateY(calc(var(--vh, 1vh) * 100 - 100%)); }\n  to { transform: translateY(calc(var(--vh, 1vh) * 100 + ${MODAL_BOX_SHADOW_SIZE_EM}em)); }\n`;\n\nconst contentFadeInXs = keyframes`\n  from { transform: translateY(calc(-100% - ${MODAL_BOX_SHADOW_SIZE_EM}em)); }\n  to { transform: translateY(6em); }\n`;\n\nconst contentFadeOutXs = keyframes`\n  from { transform: translateY(6em); }\n  to { transform: translateY(calc(-100% - ${MODAL_BOX_SHADOW_SIZE_EM}em)); }\n`;\n\nconst contentVisibleStyles = (p) =>\n  p.visible &&\n  css`\n    animation: ${contentFadeIn} ${p.theme.transitionDelay}ms forwards;\n    ${m.min.xs} {\n      animation: ${contentFadeInXs} ${p.theme.transitionDelay}ms forwards;\n    }\n  `;\n\nconst contentInvisibleStyles = (p) =>\n  !p.visible &&\n  css`\n    animation: ${contentFadeOut} ${p.theme.transitionDelay}ms forwards;\n    ${m.min.xs} {\n      animation: ${contentFadeOutXs} ${p.theme.transitionDelay}ms forwards;\n    }\n  `;\n\ntype ContentProps = Pick<ModalProps, 'visible' | 'size'>;\nconst Content = styled(\n  'div',\n  omitEmotionProps('visible', 'size')\n)<ContentProps>`\n  position: absolute;\n  display: flex;\n  flex-direction: column;\n  padding-bottom: env(safe-area-inset-bottom);\n\n  background-color: ${(p) => clr(p.theme.colorBg)};\n  color: ${(p) => clr(p.theme.colorText)};\n  box-shadow: 0 0 ${MODAL_BOX_SHADOW_SIZE_EM}em\n    ${(p) => clr(p.theme.modalColorBoxShadow)};\n\n  width: 100%;\n  max-height: 100%;\n  border-radius: ${(p) => p.theme.borderRadius}em\n    ${(p) => p.theme.borderRadius}em 0 0;\n\n  ${m.min.xs} {\n    width: ${(p) => p.theme.modalWidth}em;\n    max-height: unset;\n    border-radius: ${(p) => p.theme.borderRadius}em;\n\n    left: 50%;\n    margin-left: ${(p) => -p.theme.modalWidth / 2}em;\n  }\n\n  ${contentVisibleStyles};\n  ${contentInvisibleStyles}\n  ${sizeStyles};\n`;\n\nconst Header = styled.div`\n  flex-shrink: 0;\n  height: ${(p) => p.theme.modalHeaderHeight}em;\n  border-bottom: 1px solid ${(p) => clr(p.theme.modalHeaderColorBorderBottom)};\n  box-sizing: border-box;\n\n  display: flex;\n  align-items: center;\n\n  padding-left: ${(p) => p.theme.modalBodyPaddingHorizontal[0]}em;\n  padding-right: ${(p) =>\n    Math.max(\n      p.theme.modalBodyPaddingHorizontal[1] - p.theme.buttonPaddingHorizontal,\n      0\n    )}em;\n\n  ${m.min.xs} {\n    padding-left: ${(p) => p.theme.modalBodyPaddingHorizontal[1]}em;\n    padding-right: ${(p) =>\n      Math.max(\n        p.theme.modalBodyPaddingHorizontal[1] - p.theme.buttonPaddingHorizontal,\n        0\n      )}em;\n  }\n`;\n\nconst Title = styled.div`\n  flex: 1;\n  font-size: ${(p) => p.theme.sizes.large}em;\n  font-weight: 500;\n  ${ellipsisStyles};\n`;\n\nconst Body = styled.div`\n  flex-grow: 1;\n\n  padding: ${(p) => p.theme.modalBodyPaddingVertical[0]}em\n    ${(p) => p.theme.modalBodyPaddingHorizontal[0]}em;\n\n  ${m.min.xs} {\n    padding: ${(p) => p.theme.modalBodyPaddingVertical[1]}em\n      ${(p) => p.theme.modalBodyPaddingHorizontal[1]}em;\n  }\n\n  ${enableScrollingStyles('y')};\n`;\n\nconst Footer = styled.div`\n  padding: 0 ${(p) => p.theme.modalBodyPaddingHorizontal[0]}em\n    ${(p) => p.theme.modalBodyPaddingVertical[0]}em;\n\n  ${m.min.xs} {\n    display: flex;\n    justify-content: flex-end;\n    align-items: center;\n\n    padding: 0 ${(p) => p.theme.modalBodyPaddingHorizontal[1]}em\n      ${(p) => p.theme.modalBodyPaddingVertical[1]}em;\n  }\n`;\n\n/**\n * The base pop-up window.\n */\nconst Modal = forwardRef<HTMLDivElement, ModalProps>(\n  (\n    {\n      title,\n      okText = 'OK',\n      okDanger = false,\n      okLoading = false,\n      okDisabled = false,\n      header,\n      footer,\n      visible = false,\n      locale = defaultLocale,\n      onClose = () => {},\n      onOk,\n      size,\n      id,\n      onClick = () => {},\n      children,\n      ...rest\n    },\n    ref\n  ) => {\n    const contentRef = useRef<HTMLDivElement>(null);\n    const { theme } = useTheme();\n    const mounted = useClosable(visible, theme.transitionDelay);\n    useBodyScroll(!visible);\n    useKeyPress(\n      (typeof window !== 'undefined' ? window : undefined) as EventTarget,\n      'Escape',\n      onClose\n    );\n\n    const titleId = useMemo(\n      () => `modal-title-${Math.random().toString(36).slice(2, 11)}`,\n      []\n    );\n    const bodyId = useMemo(\n      () => id || `modal-body-${Math.random().toString(36).slice(2, 11)}`,\n      [id]\n    );\n\n    if (!mounted) return null;\n\n    return (\n      <Portal>\n        <ModalMask visible={visible} />\n        <Container\n          onClick={(e) => {\n            e.stopPropagation();\n            onClose();\n          }}\n        >\n          <FocusLock autoFocus={false}>\n            <Content\n              visible={visible}\n              size={size}\n              onClick={(e) => {\n                e.stopPropagation();\n                onClick(e);\n              }}\n              role='dialog'\n              aria-modal\n              aria-labelledby={header === undefined ? titleId : undefined}\n              aria-describedby={bodyId}\n              ref={contentRef}\n            >\n              {header === undefined ? (\n                <ThemeOverrider\n                  overrides={(t) => ({\n                    buttonPaddingHorizontal:\n                      t.modalCloseButtonPaddingHorizontal,\n                  })}\n                >\n                  <Header>\n                    <Title id={titleId}>{title}</Title>\n                    <Button\n                      type='ghost'\n                      wide='never'\n                      onClick={onClose}\n                      aria-label={locale.closeLabel}\n                    >\n                      <Close />\n                    </Button>\n                  </Header>\n                </ThemeOverrider>\n              ) : (\n                header\n              )}\n\n              <Body id={bodyId} {...rest} ref={ref}>\n                {children}\n              </Body>\n\n              {footer === undefined ? (\n                <Footer>\n                  <Button\n                    danger={okDanger}\n                    loading={okLoading}\n                    disabled={okDisabled}\n                    onClick={onOk}\n                  >\n                    {okText}\n                  </Button>\n                </Footer>\n              ) : (\n                footer\n              )}\n            </Content>\n          </FocusLock>\n        </Container>\n      </Portal>\n    );\n  }\n);\n\nModal.displayName = 'Modal';\n\nexport default Modal;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["MODAL_CONTAINER_Z_INDEX","MODAL_BOX_SHADOW_SIZE_EM","maskFadeIn","keyframes","maskFadeOut","maskVisibleStyles","p","visible","css","theme","transitionDelay","maskInvisibleStyles","ModalMask","styled","omitEmotionProps","clr","modalMaskColorBg","Container","div","m","min","xs","enableScrollingStyles","contentFadeIn","contentFadeOut","contentFadeInXs","contentFadeOutXs","contentVisibleStyles","contentInvisibleStyles","Content","colorBg","colorText","modalColorBoxShadow","borderRadius","modalWidth","sizeStyles","Header","modalHeaderHeight","modalHeaderColorBorderBottom","modalBodyPaddingHorizontal","Math","max","buttonPaddingHorizontal","Title","sizes","large","ellipsisStyles","Body","modalBodyPaddingVertical","Footer","CloseModalContext","React","createContext","useCloseModal","useContext","Modal","forwardRef","ref","title","okText","okDanger","okLoading","okDisabled","header","footer","locale","defaultLocale","onClose","onOk","size","id","onClick","children","rest","contentRef","useRef","useTheme","mounted","useClosable","useBodyScroll","titleId","useMemo","random","toString","slice","bodyId","clickHandler","useCallback","e","stopPropagation","keyDownHandler","key","ariaLabelledBy","undefined","t","modalCloseButtonPaddingHorizontal","closeLabel","displayName"],"sources":["../../../src/Modal/index.tsx"],"sourcesContent":["import { css, keyframes } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport { Close } from '@os-design/icons';\nimport { m } from '@os-design/media';\nimport Portal from '@os-design/portal';\nimport {\n  ellipsisStyles,\n  enableScrollingStyles,\n  sizeStyles,\n  WithSize,\n} from '@os-design/styles';\nimport { clr, ThemeOverrider, useTheme } from '@os-design/theming';\nimport { omitEmotionProps, useBodyScroll, useClosable } from '@os-design/utils';\nimport React, {\n  forwardRef,\n  useCallback,\n  useContext,\n  useMemo,\n  useRef,\n} from 'react';\nimport FocusLock from 'react-focus-lock';\nimport Button from '../Button';\nimport defaultLocale, { ModalLocale } from './utils/defaultLocale';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface ModalProps extends JsxDivProps, WithSize {\n  /**\n   * The title of the modal.\n   * @default undefined\n   */\n  title?: string;\n  /**\n   * The text of the OK button.\n   * @default OK\n   */\n  okText?: string;\n  /**\n   * Sets the danger styles to the OK button.\n   * @default false\n   */\n  okDanger?: boolean;\n  /**\n   * Whether the OK button is loading.\n   * @default false\n   */\n  okLoading?: boolean;\n  /**\n   * Whether the OK button is disabled.\n   * @default false\n   */\n  okDisabled?: boolean;\n  /**\n   * The header component.\n   * Set as null if you don't need the default header.\n   * @default undefined\n   */\n  header?: React.ReactNode;\n  /**\n   * The footer component.\n   * Set as null if you don't need the default footer.\n   * @default undefined\n   */\n  footer?: React.ReactNode;\n  /**\n   * Whether the modal is visible.\n   * @default false\n   */\n  visible?: boolean;\n  /**\n   * The locale of the modal.\n   * @default undefined\n   */\n  locale?: ModalLocale;\n  /**\n   * Specifies a callback that will be called when a user clicks the mask or\n   * the close button. The callback should set the visible state to false.\n   * @default undefined\n   */\n  onClose?: () => void;\n  /**\n   * Specifies a callback that will be called when a user clicks the OK button.\n   * @default undefined\n   */\n  onOk?: () => void;\n}\n\nconst MODAL_CONTAINER_Z_INDEX = 1000;\nconst MODAL_BOX_SHADOW_SIZE_EM = 1;\n\nconst maskFadeIn = keyframes`\n  from { opacity: 0; }\n  to { opacity: 1; }\n`;\n\nconst maskFadeOut = keyframes`\n  from { opacity: 1; }\n  to { opacity: 0; }\n`;\n\nconst maskVisibleStyles = (p) =>\n  p.visible &&\n  css`\n    animation: ${maskFadeIn} ${p.theme.transitionDelay}ms forwards;\n  `;\n\nconst maskInvisibleStyles = (p) =>\n  !p.visible &&\n  css`\n    animation: ${maskFadeOut} ${p.theme.transitionDelay}ms forwards;\n  `;\n\ntype MaskProps = Pick<ModalProps, 'visible'>;\nexport const ModalMask = styled('div', omitEmotionProps('visible'))<MaskProps>`\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 100%;\n  background-color: ${(p) => clr(p.theme.modalMaskColorBg)};\n  z-index: ${MODAL_CONTAINER_Z_INDEX};\n  ${maskVisibleStyles};\n  ${maskInvisibleStyles};\n`;\n\nconst Container = styled.div`\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 100%;\n  z-index: ${MODAL_CONTAINER_Z_INDEX};\n\n  ${m.min.xs} {\n    ${enableScrollingStyles('y')};\n  }\n`;\n\nconst contentFadeIn = keyframes`\n  from { transform: translateY(calc(var(--vh, 1vh) * 100 + ${MODAL_BOX_SHADOW_SIZE_EM}em)); }\n  to { transform: translateY(calc(var(--vh, 1vh) * 100 - 100%)); }\n`;\n\nconst contentFadeOut = keyframes`\n  from { transform: translateY(calc(var(--vh, 1vh) * 100 - 100%)); }\n  to { transform: translateY(calc(var(--vh, 1vh) * 100 + ${MODAL_BOX_SHADOW_SIZE_EM}em)); }\n`;\n\nconst contentFadeInXs = keyframes`\n  from { transform: translateY(calc(-100% - ${MODAL_BOX_SHADOW_SIZE_EM}em)); }\n  to { transform: translateY(6em); }\n`;\n\nconst contentFadeOutXs = keyframes`\n  from { transform: translateY(6em); }\n  to { transform: translateY(calc(-100% - ${MODAL_BOX_SHADOW_SIZE_EM}em)); }\n`;\n\nconst contentVisibleStyles = (p) =>\n  p.visible &&\n  css`\n    animation: ${contentFadeIn} ${p.theme.transitionDelay}ms forwards;\n    ${m.min.xs} {\n      animation: ${contentFadeInXs} ${p.theme.transitionDelay}ms forwards;\n    }\n  `;\n\nconst contentInvisibleStyles = (p) =>\n  !p.visible &&\n  css`\n    animation: ${contentFadeOut} ${p.theme.transitionDelay}ms forwards;\n    ${m.min.xs} {\n      animation: ${contentFadeOutXs} ${p.theme.transitionDelay}ms forwards;\n    }\n  `;\n\ntype ContentProps = Pick<ModalProps, 'visible' | 'size'>;\nconst Content = styled(\n  'div',\n  omitEmotionProps('visible', 'size')\n)<ContentProps>`\n  position: absolute;\n  display: flex;\n  flex-direction: column;\n  padding-bottom: env(safe-area-inset-bottom);\n\n  background-color: ${(p) => clr(p.theme.colorBg)};\n  color: ${(p) => clr(p.theme.colorText)};\n  box-shadow: 0 0 ${MODAL_BOX_SHADOW_SIZE_EM}em\n    ${(p) => clr(p.theme.modalColorBoxShadow)};\n\n  width: 100%;\n  max-height: 100%;\n  border-radius: ${(p) => p.theme.borderRadius}em\n    ${(p) => p.theme.borderRadius}em 0 0;\n\n  ${m.min.xs} {\n    width: ${(p) => p.theme.modalWidth}em;\n    max-height: unset;\n    border-radius: ${(p) => p.theme.borderRadius}em;\n\n    left: 50%;\n    margin-left: ${(p) => -p.theme.modalWidth / 2}em;\n  }\n\n  ${contentVisibleStyles};\n  ${contentInvisibleStyles}\n  ${sizeStyles};\n`;\n\nconst Header = styled.div`\n  flex-shrink: 0;\n  height: ${(p) => p.theme.modalHeaderHeight}em;\n  border-bottom: 1px solid ${(p) => clr(p.theme.modalHeaderColorBorderBottom)};\n  box-sizing: border-box;\n\n  display: flex;\n  align-items: center;\n\n  padding-left: ${(p) => p.theme.modalBodyPaddingHorizontal[0]}em;\n  padding-right: ${(p) =>\n    Math.max(\n      p.theme.modalBodyPaddingHorizontal[1] - p.theme.buttonPaddingHorizontal,\n      0\n    )}em;\n\n  ${m.min.xs} {\n    padding-left: ${(p) => p.theme.modalBodyPaddingHorizontal[1]}em;\n    padding-right: ${(p) =>\n      Math.max(\n        p.theme.modalBodyPaddingHorizontal[1] - p.theme.buttonPaddingHorizontal,\n        0\n      )}em;\n  }\n`;\n\nconst Title = styled.div`\n  flex: 1;\n  font-size: ${(p) => p.theme.sizes.large}em;\n  font-weight: 500;\n  ${ellipsisStyles};\n`;\n\nconst Body = styled.div`\n  flex-grow: 1;\n\n  padding: ${(p) => p.theme.modalBodyPaddingVertical[0]}em\n    ${(p) => p.theme.modalBodyPaddingHorizontal[0]}em;\n\n  ${m.min.xs} {\n    padding: ${(p) => p.theme.modalBodyPaddingVertical[1]}em\n      ${(p) => p.theme.modalBodyPaddingHorizontal[1]}em;\n  }\n\n  ${enableScrollingStyles('y')};\n`;\n\nconst Footer = styled.div`\n  padding: 0 ${(p) => p.theme.modalBodyPaddingHorizontal[0]}em\n    ${(p) => p.theme.modalBodyPaddingVertical[0]}em;\n\n  ${m.min.xs} {\n    display: flex;\n    justify-content: flex-end;\n    align-items: center;\n\n    padding: 0 ${(p) => p.theme.modalBodyPaddingHorizontal[1]}em\n      ${(p) => p.theme.modalBodyPaddingVertical[1]}em;\n  }\n`;\n\nconst CloseModalContext = React.createContext<() => void>(() => {});\n\nexport const useCloseModal = () => useContext(CloseModalContext);\n\n/**\n * The base pop-up window.\n */\nconst Modal = forwardRef<HTMLDivElement, ModalProps>(\n  (\n    {\n      title,\n      okText = 'OK',\n      okDanger = false,\n      okLoading = false,\n      okDisabled = false,\n      header,\n      footer,\n      visible = false,\n      locale = defaultLocale,\n      onClose = () => {},\n      onOk,\n      size,\n      id,\n      onClick = () => {},\n      children,\n      ...rest\n    },\n    ref\n  ) => {\n    const contentRef = useRef<HTMLDivElement>(null);\n    const { theme } = useTheme();\n    const mounted = useClosable(visible, theme.transitionDelay);\n\n    useBodyScroll(!visible);\n\n    const titleId = useMemo(\n      () => `modal-title-${Math.random().toString(36).slice(2, 11)}`,\n      []\n    );\n    const bodyId = useMemo(\n      () => id || `modal-body-${Math.random().toString(36).slice(2, 11)}`,\n      [id]\n    );\n\n    const clickHandler = useCallback(\n      (e) => {\n        e.stopPropagation();\n        onClick(e);\n      },\n      [onClick]\n    );\n\n    const keyDownHandler = useCallback(\n      (e) => {\n        if (e.key === 'Escape') onClose();\n      },\n      [onClose]\n    );\n\n    const ariaLabelledBy = useMemo(\n      () => (header === undefined ? titleId : undefined),\n      [header, titleId]\n    );\n\n    if (!mounted) return null;\n\n    return (\n      <Portal>\n        <ModalMask visible={visible} />\n        <Container onClick={clickHandler}>\n          <FocusLock autoFocus>\n            <CloseModalContext.Provider value={onClose}>\n              <Content\n                visible={visible}\n                size={size}\n                tabIndex={-1}\n                onKeyDown={keyDownHandler}\n                onClick={clickHandler}\n                role='dialog'\n                aria-modal\n                aria-labelledby={ariaLabelledBy}\n                aria-describedby={bodyId}\n                ref={contentRef}\n              >\n                {header === undefined ? (\n                  <ThemeOverrider\n                    overrides={(t) => ({\n                      buttonPaddingHorizontal:\n                        t.modalCloseButtonPaddingHorizontal,\n                    })}\n                  >\n                    <Header>\n                      <Title id={titleId}>{title}</Title>\n                      <Button\n                        type='ghost'\n                        wide='never'\n                        onClick={onClose}\n                        aria-label={locale.closeLabel}\n                      >\n                        <Close />\n                      </Button>\n                    </Header>\n                  </ThemeOverrider>\n                ) : (\n                  header\n                )}\n\n                <Body id={bodyId} {...rest} ref={ref}>\n                  {children}\n                </Body>\n\n                {footer === undefined ? (\n                  <Footer>\n                    <Button\n                      danger={okDanger}\n                      loading={okLoading}\n                      disabled={okDisabled}\n                      onClick={onOk}\n                    >\n                      {okText}\n                    </Button>\n                  </Footer>\n                ) : (\n                  footer\n                )}\n              </Content>\n            </CloseModalContext.Provider>\n          </FocusLock>\n        </Container>\n      </Portal>\n    );\n  }\n);\n\nModal.displayName = 'Modal';\n\nexport default Modal;\n"],"mappings":"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"}

package/dist/esm/Drawer/index.js

@@ -1,12 +1,12 @@
 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); }
-import React, { forwardRef } from 'react';
-import FocusLock from 'react-focus-lock';
-import { useBodyScroll, useClosable, useKeyPress, omitEmotionProps } from '@os-design/utils';
-import { enableScrollingStyles, sizeStyles } from '@os-design/styles';
-import { clr, useTheme } from '@os-design/theming';
-import styled from '@emotion/styled';
 import { css, keyframes } from '@emotion/react';
+import styled from '@emotion/styled';
 import Portal from '@os-design/portal';
+import { enableScrollingStyles, resetFocusStyles, sizeStyles } from '@os-design/styles';
+import { clr, useTheme } from '@os-design/theming';
+import { omitEmotionProps, useBodyScroll, useClosable } from '@os-design/utils';
+import React, { forwardRef, useCallback, useContext } from 'react';
+import FocusLock from 'react-focus-lock';
 import { ModalMask } from '../Modal';
 const DRAWER_CONTAINER_Z_INDEX = 900;
 const DRAWER_BOX_SHADOW_SIZE_EM = 1;
@@ -50,6 +50,8 @@ const placementRightInvisibleStyles = p => p.placement === 'right' && !p.visible
     animation: ${placementRightFadeOut} ${p.theme.transitionDelay}ms forwards;
   `;
 const Content = styled('div', omitEmotionProps('placement', 'width', 'visible', 'size'))`
+  ${resetFocusStyles};
+
   position: absolute;
   top: 0;
   bottom: 0;
@@ -69,6 +71,8 @@ const Content = styled('div', omitEmotionProps('placement', 'width', 'visible',
   ${enableScrollingStyles('y')};
   ${sizeStyles};
 `;
+const CloseDrawerContext = /*#__PURE__*/React.createContext(() => {});
+export const useCloseDrawer = () => useContext(CloseDrawerContext);
 
 /**
  * The side panel that appears from the edge of the screen.
@@ -88,28 +92,35 @@ const Drawer = /*#__PURE__*/forwardRef(({
   } = useTheme();
   const mounted = useClosable(visible, theme.transitionDelay);
   useBodyScroll(!visible);
-  useKeyPress(typeof window !== 'undefined' ? window : undefined, 'Escape', onClose);
+  const clickHandler = useCallback(e => {
+    e.stopPropagation();
+    onClick(e);
+  }, [onClick]);
+  const keyDownHandler = useCallback(e => {
+    if (e.key === 'Escape') onClose();
+  }, [onClose]);
   if (!mounted) return null;
   return /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(DrawerMask, {
     visible: visible
   }), /*#__PURE__*/React.createElement(Container, {
     onClick: onClose
   }, /*#__PURE__*/React.createElement(FocusLock, {
-    autoFocus: false
+    autoFocus: true
+  }, /*#__PURE__*/React.createElement(CloseDrawerContext.Provider, {
+    value: onClose
   }, /*#__PURE__*/React.createElement(Content, _extends({
     placement: placement,
     width: width,
     visible: visible,
     size: size,
-    onClick: e => {
-      e.stopPropagation();
-      onClick(e);
-    },
+    tabIndex: -1,
+    onKeyDown: keyDownHandler,
+    onClick: clickHandler,
     role: "dialog",
     "aria-modal": true
   }, rest, {
     ref: ref
-  }), children))));
+  }), children)))));
 });
 Drawer.displayName = 'Drawer';
 export default Drawer;

package/dist/esm/Drawer/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","forwardRef","FocusLock","useBodyScroll","useClosable","useKeyPress","omitEmotionProps","enableScrollingStyles","sizeStyles","clr","useTheme","styled","css","keyframes","Portal","ModalMask","DRAWER_CONTAINER_Z_INDEX","DRAWER_BOX_SHADOW_SIZE_EM","DrawerMask","Container","div","placementLeftFadeIn","placementLeftFadeOut","placementRightFadeIn","placementRightFadeOut","placementLeftVisibleStyles","p","placement","visible","theme","transitionDelay","placementLeftInvisibleStyles","placementRightVisibleStyles","placementRightInvisibleStyles","Content","width","colorBg","colorText","drawerColorBoxShadow","Drawer","onClose","size","children","onClick","rest","ref","mounted","window","undefined","e","stopPropagation","displayName"],"sources":["../../../src/Drawer/index.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport FocusLock from 'react-focus-lock';\nimport {\n  useBodyScroll,\n  useClosable,\n  useKeyPress,\n  omitEmotionProps,\n} from '@os-design/utils';\nimport { enableScrollingStyles, sizeStyles, WithSize } from '@os-design/styles';\nimport { clr, useTheme } from '@os-design/theming';\nimport styled from '@emotion/styled';\nimport { css, keyframes } from '@emotion/react';\nimport Portal from '@os-design/portal';\nimport { ModalMask } from '../Modal';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface DrawerProps extends JsxDivProps, WithSize {\n  /**\n   * The placement of the drawer.\n   * @default right\n   */\n  placement?: 'left' | 'right';\n  /**\n   * The width of the drawer.\n   * @default 15em\n   */\n  width?: string;\n  /**\n   * Whether the drawer is visible.\n   * @default false\n   */\n  visible?: boolean;\n  /**\n   * Specifies a callback that will be called when a user clicks the mask.\n   * The callback should set the visible state to false.\n   * @default undefined\n   */\n  onClose?: () => void;\n}\n\nconst DRAWER_CONTAINER_Z_INDEX = 900;\nconst DRAWER_BOX_SHADOW_SIZE_EM = 1;\n\nconst DrawerMask = styled(ModalMask)`\n  z-index: ${DRAWER_CONTAINER_Z_INDEX};\n`;\n\nconst Container = styled.div`\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 100%;\n  z-index: ${DRAWER_CONTAINER_Z_INDEX};\n`;\n\nconst placementLeftFadeIn = keyframes`\n  from { transform: translateX(calc(-100% - ${DRAWER_BOX_SHADOW_SIZE_EM}em)); }\n  to { transform: translateX(0); }\n`;\n\nconst placementLeftFadeOut = keyframes`\n  from { transform: translateX(0); }\n  to { transform: translateX(calc(-100% - ${DRAWER_BOX_SHADOW_SIZE_EM}em)); }\n`;\n\nconst placementRightFadeIn = keyframes`\n  from { transform: translateX(calc(100vw + ${DRAWER_BOX_SHADOW_SIZE_EM}em)); }\n  to { transform: translateX(calc(100vw - 100%)); }\n`;\n\nconst placementRightFadeOut = keyframes`\n  from { transform: translateX(calc(100vw - 100%)); }\n  to { transform: translateX(calc(100vw + ${DRAWER_BOX_SHADOW_SIZE_EM}em)); }\n`;\n\nconst placementLeftVisibleStyles = (p) =>\n  p.placement === 'left' &&\n  p.visible &&\n  css`\n    animation: ${placementLeftFadeIn} ${p.theme.transitionDelay}ms forwards;\n  `;\n\nconst placementLeftInvisibleStyles = (p) =>\n  p.placement === 'left' &&\n  !p.visible &&\n  css`\n    animation: ${placementLeftFadeOut} ${p.theme.transitionDelay}ms forwards;\n  `;\n\nconst placementRightVisibleStyles = (p) =>\n  p.placement === 'right' &&\n  p.visible &&\n  css`\n    animation: ${placementRightFadeIn} ${p.theme.transitionDelay}ms forwards;\n  `;\n\nconst placementRightInvisibleStyles = (p) =>\n  p.placement === 'right' &&\n  !p.visible &&\n  css`\n    animation: ${placementRightFadeOut} ${p.theme.transitionDelay}ms forwards;\n  `;\n\ntype ContentProps = Pick<\n  DrawerProps,\n  'placement' | 'width' | 'visible' | 'size'\n>;\nconst Content = styled(\n  'div',\n  omitEmotionProps('placement', 'width', 'visible', 'size')\n)<ContentProps>`\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  width: ${(p) => p.width};\n  padding-bottom: env(safe-area-inset-bottom);\n\n  background-color: ${(p) => clr(p.theme.colorBg)};\n  color: ${(p) => clr(p.theme.colorText)};\n  box-shadow: 0 0 ${DRAWER_BOX_SHADOW_SIZE_EM}em\n    ${(p) => clr(p.theme.drawerColorBoxShadow)};\n\n  ${placementLeftVisibleStyles};\n  ${placementLeftInvisibleStyles};\n  ${placementRightVisibleStyles};\n  ${placementRightInvisibleStyles};\n\n  ${enableScrollingStyles('y')};\n  ${sizeStyles};\n`;\n\n/**\n * The side panel that appears from the edge of the screen.\n */\nconst Drawer = forwardRef<HTMLDivElement, DrawerProps>(\n  (\n    {\n      placement = 'right',\n      width = '15em',\n      visible = false,\n      onClose = () => {},\n      size,\n      children,\n      onClick = () => {},\n      ...rest\n    },\n    ref\n  ) => {\n    const { theme } = useTheme();\n    const mounted = useClosable(visible, theme.transitionDelay);\n    useBodyScroll(!visible);\n    useKeyPress(\n      (typeof window !== 'undefined' ? window : undefined) as EventTarget,\n      'Escape',\n      onClose\n    );\n\n    if (!mounted) return null;\n\n    return (\n      <Portal>\n        <DrawerMask visible={visible} />\n        <Container onClick={onClose}>\n          <FocusLock autoFocus={false}>\n            <Content\n              placement={placement}\n              width={width}\n              visible={visible}\n              size={size}\n              onClick={(e) => {\n                e.stopPropagation();\n                onClick(e);\n              }}\n              role='dialog'\n              aria-modal\n              {...rest}\n              ref={ref}\n            >\n              {children}\n            </Content>\n          </FocusLock>\n        </Container>\n      </Portal>\n    );\n  }\n);\n\nDrawer.displayName = 'Drawer';\n\nexport default Drawer;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["css","keyframes","styled","Portal","enableScrollingStyles","resetFocusStyles","sizeStyles","clr","useTheme","omitEmotionProps","useBodyScroll","useClosable","React","forwardRef","useCallback","useContext","FocusLock","ModalMask","DRAWER_CONTAINER_Z_INDEX","DRAWER_BOX_SHADOW_SIZE_EM","DrawerMask","Container","div","placementLeftFadeIn","placementLeftFadeOut","placementRightFadeIn","placementRightFadeOut","placementLeftVisibleStyles","p","placement","visible","theme","transitionDelay","placementLeftInvisibleStyles","placementRightVisibleStyles","placementRightInvisibleStyles","Content","width","colorBg","colorText","drawerColorBoxShadow","CloseDrawerContext","createContext","useCloseDrawer","Drawer","onClose","size","children","onClick","rest","ref","mounted","clickHandler","e","stopPropagation","keyDownHandler","key","displayName"],"sources":["../../../src/Drawer/index.tsx"],"sourcesContent":["import { css, keyframes } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport Portal from '@os-design/portal';\nimport {\n  enableScrollingStyles,\n  resetFocusStyles,\n  sizeStyles,\n  WithSize,\n} from '@os-design/styles';\nimport { clr, useTheme } from '@os-design/theming';\nimport { omitEmotionProps, useBodyScroll, useClosable } from '@os-design/utils';\nimport React, { forwardRef, useCallback, useContext } from 'react';\nimport FocusLock from 'react-focus-lock';\nimport { ModalMask } from '../Modal';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface DrawerProps extends JsxDivProps, WithSize {\n  /**\n   * The placement of the drawer.\n   * @default right\n   */\n  placement?: 'left' | 'right';\n  /**\n   * The width of the drawer.\n   * @default 15em\n   */\n  width?: string;\n  /**\n   * Whether the drawer is visible.\n   * @default false\n   */\n  visible?: boolean;\n  /**\n   * Specifies a callback that will be called when a user clicks the mask.\n   * The callback should set the visible state to false.\n   * @default undefined\n   */\n  onClose?: () => void;\n}\n\nconst DRAWER_CONTAINER_Z_INDEX = 900;\nconst DRAWER_BOX_SHADOW_SIZE_EM = 1;\n\nconst DrawerMask = styled(ModalMask)`\n  z-index: ${DRAWER_CONTAINER_Z_INDEX};\n`;\n\nconst Container = styled.div`\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 100%;\n  z-index: ${DRAWER_CONTAINER_Z_INDEX};\n`;\n\nconst placementLeftFadeIn = keyframes`\n  from { transform: translateX(calc(-100% - ${DRAWER_BOX_SHADOW_SIZE_EM}em)); }\n  to { transform: translateX(0); }\n`;\n\nconst placementLeftFadeOut = keyframes`\n  from { transform: translateX(0); }\n  to { transform: translateX(calc(-100% - ${DRAWER_BOX_SHADOW_SIZE_EM}em)); }\n`;\n\nconst placementRightFadeIn = keyframes`\n  from { transform: translateX(calc(100vw + ${DRAWER_BOX_SHADOW_SIZE_EM}em)); }\n  to { transform: translateX(calc(100vw - 100%)); }\n`;\n\nconst placementRightFadeOut = keyframes`\n  from { transform: translateX(calc(100vw - 100%)); }\n  to { transform: translateX(calc(100vw + ${DRAWER_BOX_SHADOW_SIZE_EM}em)); }\n`;\n\nconst placementLeftVisibleStyles = (p) =>\n  p.placement === 'left' &&\n  p.visible &&\n  css`\n    animation: ${placementLeftFadeIn} ${p.theme.transitionDelay}ms forwards;\n  `;\n\nconst placementLeftInvisibleStyles = (p) =>\n  p.placement === 'left' &&\n  !p.visible &&\n  css`\n    animation: ${placementLeftFadeOut} ${p.theme.transitionDelay}ms forwards;\n  `;\n\nconst placementRightVisibleStyles = (p) =>\n  p.placement === 'right' &&\n  p.visible &&\n  css`\n    animation: ${placementRightFadeIn} ${p.theme.transitionDelay}ms forwards;\n  `;\n\nconst placementRightInvisibleStyles = (p) =>\n  p.placement === 'right' &&\n  !p.visible &&\n  css`\n    animation: ${placementRightFadeOut} ${p.theme.transitionDelay}ms forwards;\n  `;\n\ntype ContentProps = Pick<\n  DrawerProps,\n  'placement' | 'width' | 'visible' | 'size'\n>;\nconst Content = styled(\n  'div',\n  omitEmotionProps('placement', 'width', 'visible', 'size')\n)<ContentProps>`\n  ${resetFocusStyles};\n\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  width: ${(p) => p.width};\n  padding-bottom: env(safe-area-inset-bottom);\n\n  background-color: ${(p) => clr(p.theme.colorBg)};\n  color: ${(p) => clr(p.theme.colorText)};\n  box-shadow: 0 0 ${DRAWER_BOX_SHADOW_SIZE_EM}em\n    ${(p) => clr(p.theme.drawerColorBoxShadow)};\n\n  ${placementLeftVisibleStyles};\n  ${placementLeftInvisibleStyles};\n  ${placementRightVisibleStyles};\n  ${placementRightInvisibleStyles};\n\n  ${enableScrollingStyles('y')};\n  ${sizeStyles};\n`;\n\nconst CloseDrawerContext = React.createContext<() => void>(() => {});\n\nexport const useCloseDrawer = () => useContext(CloseDrawerContext);\n\n/**\n * The side panel that appears from the edge of the screen.\n */\nconst Drawer = forwardRef<HTMLDivElement, DrawerProps>(\n  (\n    {\n      placement = 'right',\n      width = '15em',\n      visible = false,\n      onClose = () => {},\n      size,\n      children,\n      onClick = () => {},\n      ...rest\n    },\n    ref\n  ) => {\n    const { theme } = useTheme();\n    const mounted = useClosable(visible, theme.transitionDelay);\n\n    useBodyScroll(!visible);\n\n    const clickHandler = useCallback(\n      (e) => {\n        e.stopPropagation();\n        onClick(e);\n      },\n      [onClick]\n    );\n\n    const keyDownHandler = useCallback(\n      (e) => {\n        if (e.key === 'Escape') onClose();\n      },\n      [onClose]\n    );\n\n    if (!mounted) return null;\n\n    return (\n      <Portal>\n        <DrawerMask visible={visible} />\n        <Container onClick={onClose}>\n          <FocusLock autoFocus>\n            <CloseDrawerContext.Provider value={onClose}>\n              <Content\n                placement={placement}\n                width={width}\n                visible={visible}\n                size={size}\n                tabIndex={-1}\n                onKeyDown={keyDownHandler}\n                onClick={clickHandler}\n                role='dialog'\n                aria-modal\n                {...rest}\n                ref={ref}\n              >\n                {children}\n              </Content>\n            </CloseDrawerContext.Provider>\n          </FocusLock>\n        </Container>\n      </Portal>\n    );\n  }\n);\n\nDrawer.displayName = 'Drawer';\n\nexport default Drawer;\n"],"mappings":"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"}

package/dist/esm/Modal/index.js

@@ -6,8 +6,8 @@ import { m } from '@os-design/media';
 import Portal from '@os-design/portal';
 import { ellipsisStyles, enableScrollingStyles, sizeStyles } from '@os-design/styles';
 import { clr, ThemeOverrider, useTheme } from '@os-design/theming';
-import { omitEmotionProps, useBodyScroll, useClosable, useKeyPress } from '@os-design/utils';
-import React, { forwardRef, useMemo, useRef } from 'react';
+import { omitEmotionProps, useBodyScroll, useClosable } from '@os-design/utils';
+import React, { forwardRef, useCallback, useContext, useMemo, useRef } from 'react';
 import FocusLock from 'react-focus-lock';
 import Button from '../Button';
 import defaultLocale from './utils/defaultLocale';
@@ -156,6 +156,8 @@ const Footer = styled.div`
       ${p => p.theme.modalBodyPaddingVertical[1]}em;
   }
 `;
+const CloseModalContext = /*#__PURE__*/React.createContext(() => {});
+export const useCloseModal = () => useContext(CloseModalContext);
 
 /**
  * The base pop-up window.
@@ -184,29 +186,34 @@ const Modal = /*#__PURE__*/forwardRef(({
   } = useTheme();
   const mounted = useClosable(visible, theme.transitionDelay);
   useBodyScroll(!visible);
-  useKeyPress(typeof window !== 'undefined' ? window : undefined, 'Escape', onClose);
   const titleId = useMemo(() => `modal-title-${Math.random().toString(36).slice(2, 11)}`, []);
   const bodyId = useMemo(() => id || `modal-body-${Math.random().toString(36).slice(2, 11)}`, [id]);
+  const clickHandler = useCallback(e => {
+    e.stopPropagation();
+    onClick(e);
+  }, [onClick]);
+  const keyDownHandler = useCallback(e => {
+    if (e.key === 'Escape') onClose();
+  }, [onClose]);
+  const ariaLabelledBy = useMemo(() => header === undefined ? titleId : undefined, [header, titleId]);
   if (!mounted) return null;
   return /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(ModalMask, {
     visible: visible
   }), /*#__PURE__*/React.createElement(Container, {
-    onClick: e => {
-      e.stopPropagation();
-      onClose();
-    }
+    onClick: clickHandler
   }, /*#__PURE__*/React.createElement(FocusLock, {
-    autoFocus: false
+    autoFocus: true
+  }, /*#__PURE__*/React.createElement(CloseModalContext.Provider, {
+    value: onClose
   }, /*#__PURE__*/React.createElement(Content, {
     visible: visible,
     size: size,
-    onClick: e => {
-      e.stopPropagation();
-      onClick(e);
-    },
+    tabIndex: -1,
+    onKeyDown: keyDownHandler,
+    onClick: clickHandler,
     role: "dialog",
     "aria-modal": true,
-    "aria-labelledby": header === undefined ? titleId : undefined,
+    "aria-labelledby": ariaLabelledBy,
     "aria-describedby": bodyId,
     ref: contentRef
   }, header === undefined ? /*#__PURE__*/React.createElement(ThemeOverrider, {
@@ -229,7 +236,7 @@ const Modal = /*#__PURE__*/forwardRef(({
     loading: okLoading,
     disabled: okDisabled,
     onClick: onOk
-  }, okText)) : footer))));
+  }, okText)) : footer)))));
 });
 Modal.displayName = 'Modal';
 export default Modal;

package/dist/esm/Modal/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["css","keyframes","styled","Close","m","Portal","ellipsisStyles","enableScrollingStyles","sizeStyles","clr","ThemeOverrider","useTheme","omitEmotionProps","useBodyScroll","useClosable","useKeyPress","React","forwardRef","useMemo","useRef","FocusLock","Button","defaultLocale","MODAL_CONTAINER_Z_INDEX","MODAL_BOX_SHADOW_SIZE_EM","maskFadeIn","maskFadeOut","maskVisibleStyles","p","visible","theme","transitionDelay","maskInvisibleStyles","ModalMask","modalMaskColorBg","Container","div","min","xs","contentFadeIn","contentFadeOut","contentFadeInXs","contentFadeOutXs","contentVisibleStyles","contentInvisibleStyles","Content","colorBg","colorText","modalColorBoxShadow","borderRadius","modalWidth","Header","modalHeaderHeight","modalHeaderColorBorderBottom","modalBodyPaddingHorizontal","Math","max","buttonPaddingHorizontal","Title","sizes","large","Body","modalBodyPaddingVertical","Footer","Modal","title","okText","okDanger","okLoading","okDisabled","header","footer","locale","onClose","onOk","size","id","onClick","children","rest","ref","contentRef","mounted","window","undefined","titleId","random","toString","slice","bodyId","e","stopPropagation","t","modalCloseButtonPaddingHorizontal","closeLabel","displayName"],"sources":["../../../src/Modal/index.tsx"],"sourcesContent":["import { css, keyframes } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport { Close } from '@os-design/icons';\nimport { m } from '@os-design/media';\nimport Portal from '@os-design/portal';\nimport {\n  ellipsisStyles,\n  enableScrollingStyles,\n  sizeStyles,\n  WithSize,\n} from '@os-design/styles';\nimport { clr, ThemeOverrider, useTheme } from '@os-design/theming';\nimport {\n  omitEmotionProps,\n  useBodyScroll,\n  useClosable,\n  useKeyPress,\n} from '@os-design/utils';\nimport React, { forwardRef, useMemo, useRef } from 'react';\nimport FocusLock from 'react-focus-lock';\nimport Button from '../Button';\nimport defaultLocale, { ModalLocale } from './utils/defaultLocale';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface ModalProps extends JsxDivProps, WithSize {\n  /**\n   * The title of the modal.\n   * @default undefined\n   */\n  title?: string;\n  /**\n   * The text of the OK button.\n   * @default OK\n   */\n  okText?: string;\n  /**\n   * Sets the danger styles to the OK button.\n   * @default false\n   */\n  okDanger?: boolean;\n  /**\n   * Whether the OK button is loading.\n   * @default false\n   */\n  okLoading?: boolean;\n  /**\n   * Whether the OK button is disabled.\n   * @default false\n   */\n  okDisabled?: boolean;\n  /**\n   * The header component.\n   * Set as null if you don't need the default header.\n   * @default undefined\n   */\n  header?: React.ReactNode;\n  /**\n   * The footer component.\n   * Set as null if you don't need the default footer.\n   * @default undefined\n   */\n  footer?: React.ReactNode;\n  /**\n   * Whether the modal is visible.\n   * @default false\n   */\n  visible?: boolean;\n  /**\n   * The locale of the modal.\n   * @default undefined\n   */\n  locale?: ModalLocale;\n  /**\n   * Specifies a callback that will be called when a user clicks the mask or\n   * the close button. The callback should set the visible state to false.\n   * @default undefined\n   */\n  onClose?: () => void;\n  /**\n   * Specifies a callback that will be called when a user clicks the OK button.\n   * @default undefined\n   */\n  onOk?: () => void;\n}\n\nconst MODAL_CONTAINER_Z_INDEX = 1000;\nconst MODAL_BOX_SHADOW_SIZE_EM = 1;\n\nconst maskFadeIn = keyframes`\n  from { opacity: 0; }\n  to { opacity: 1; }\n`;\n\nconst maskFadeOut = keyframes`\n  from { opacity: 1; }\n  to { opacity: 0; }\n`;\n\nconst maskVisibleStyles = (p) =>\n  p.visible &&\n  css`\n    animation: ${maskFadeIn} ${p.theme.transitionDelay}ms forwards;\n  `;\n\nconst maskInvisibleStyles = (p) =>\n  !p.visible &&\n  css`\n    animation: ${maskFadeOut} ${p.theme.transitionDelay}ms forwards;\n  `;\n\ntype MaskProps = Pick<ModalProps, 'visible'>;\nexport const ModalMask = styled('div', omitEmotionProps('visible'))<MaskProps>`\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 100%;\n  background-color: ${(p) => clr(p.theme.modalMaskColorBg)};\n  z-index: ${MODAL_CONTAINER_Z_INDEX};\n  ${maskVisibleStyles};\n  ${maskInvisibleStyles};\n`;\n\nconst Container = styled.div`\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 100%;\n  z-index: ${MODAL_CONTAINER_Z_INDEX};\n\n  ${m.min.xs} {\n    ${enableScrollingStyles('y')};\n  }\n`;\n\nconst contentFadeIn = keyframes`\n  from { transform: translateY(calc(var(--vh, 1vh) * 100 + ${MODAL_BOX_SHADOW_SIZE_EM}em)); }\n  to { transform: translateY(calc(var(--vh, 1vh) * 100 - 100%)); }\n`;\n\nconst contentFadeOut = keyframes`\n  from { transform: translateY(calc(var(--vh, 1vh) * 100 - 100%)); }\n  to { transform: translateY(calc(var(--vh, 1vh) * 100 + ${MODAL_BOX_SHADOW_SIZE_EM}em)); }\n`;\n\nconst contentFadeInXs = keyframes`\n  from { transform: translateY(calc(-100% - ${MODAL_BOX_SHADOW_SIZE_EM}em)); }\n  to { transform: translateY(6em); }\n`;\n\nconst contentFadeOutXs = keyframes`\n  from { transform: translateY(6em); }\n  to { transform: translateY(calc(-100% - ${MODAL_BOX_SHADOW_SIZE_EM}em)); }\n`;\n\nconst contentVisibleStyles = (p) =>\n  p.visible &&\n  css`\n    animation: ${contentFadeIn} ${p.theme.transitionDelay}ms forwards;\n    ${m.min.xs} {\n      animation: ${contentFadeInXs} ${p.theme.transitionDelay}ms forwards;\n    }\n  `;\n\nconst contentInvisibleStyles = (p) =>\n  !p.visible &&\n  css`\n    animation: ${contentFadeOut} ${p.theme.transitionDelay}ms forwards;\n    ${m.min.xs} {\n      animation: ${contentFadeOutXs} ${p.theme.transitionDelay}ms forwards;\n    }\n  `;\n\ntype ContentProps = Pick<ModalProps, 'visible' | 'size'>;\nconst Content = styled(\n  'div',\n  omitEmotionProps('visible', 'size')\n)<ContentProps>`\n  position: absolute;\n  display: flex;\n  flex-direction: column;\n  padding-bottom: env(safe-area-inset-bottom);\n\n  background-color: ${(p) => clr(p.theme.colorBg)};\n  color: ${(p) => clr(p.theme.colorText)};\n  box-shadow: 0 0 ${MODAL_BOX_SHADOW_SIZE_EM}em\n    ${(p) => clr(p.theme.modalColorBoxShadow)};\n\n  width: 100%;\n  max-height: 100%;\n  border-radius: ${(p) => p.theme.borderRadius}em\n    ${(p) => p.theme.borderRadius}em 0 0;\n\n  ${m.min.xs} {\n    width: ${(p) => p.theme.modalWidth}em;\n    max-height: unset;\n    border-radius: ${(p) => p.theme.borderRadius}em;\n\n    left: 50%;\n    margin-left: ${(p) => -p.theme.modalWidth / 2}em;\n  }\n\n  ${contentVisibleStyles};\n  ${contentInvisibleStyles}\n  ${sizeStyles};\n`;\n\nconst Header = styled.div`\n  flex-shrink: 0;\n  height: ${(p) => p.theme.modalHeaderHeight}em;\n  border-bottom: 1px solid ${(p) => clr(p.theme.modalHeaderColorBorderBottom)};\n  box-sizing: border-box;\n\n  display: flex;\n  align-items: center;\n\n  padding-left: ${(p) => p.theme.modalBodyPaddingHorizontal[0]}em;\n  padding-right: ${(p) =>\n    Math.max(\n      p.theme.modalBodyPaddingHorizontal[1] - p.theme.buttonPaddingHorizontal,\n      0\n    )}em;\n\n  ${m.min.xs} {\n    padding-left: ${(p) => p.theme.modalBodyPaddingHorizontal[1]}em;\n    padding-right: ${(p) =>\n      Math.max(\n        p.theme.modalBodyPaddingHorizontal[1] - p.theme.buttonPaddingHorizontal,\n        0\n      )}em;\n  }\n`;\n\nconst Title = styled.div`\n  flex: 1;\n  font-size: ${(p) => p.theme.sizes.large}em;\n  font-weight: 500;\n  ${ellipsisStyles};\n`;\n\nconst Body = styled.div`\n  flex-grow: 1;\n\n  padding: ${(p) => p.theme.modalBodyPaddingVertical[0]}em\n    ${(p) => p.theme.modalBodyPaddingHorizontal[0]}em;\n\n  ${m.min.xs} {\n    padding: ${(p) => p.theme.modalBodyPaddingVertical[1]}em\n      ${(p) => p.theme.modalBodyPaddingHorizontal[1]}em;\n  }\n\n  ${enableScrollingStyles('y')};\n`;\n\nconst Footer = styled.div`\n  padding: 0 ${(p) => p.theme.modalBodyPaddingHorizontal[0]}em\n    ${(p) => p.theme.modalBodyPaddingVertical[0]}em;\n\n  ${m.min.xs} {\n    display: flex;\n    justify-content: flex-end;\n    align-items: center;\n\n    padding: 0 ${(p) => p.theme.modalBodyPaddingHorizontal[1]}em\n      ${(p) => p.theme.modalBodyPaddingVertical[1]}em;\n  }\n`;\n\n/**\n * The base pop-up window.\n */\nconst Modal = forwardRef<HTMLDivElement, ModalProps>(\n  (\n    {\n      title,\n      okText = 'OK',\n      okDanger = false,\n      okLoading = false,\n      okDisabled = false,\n      header,\n      footer,\n      visible = false,\n      locale = defaultLocale,\n      onClose = () => {},\n      onOk,\n      size,\n      id,\n      onClick = () => {},\n      children,\n      ...rest\n    },\n    ref\n  ) => {\n    const contentRef = useRef<HTMLDivElement>(null);\n    const { theme } = useTheme();\n    const mounted = useClosable(visible, theme.transitionDelay);\n    useBodyScroll(!visible);\n    useKeyPress(\n      (typeof window !== 'undefined' ? window : undefined) as EventTarget,\n      'Escape',\n      onClose\n    );\n\n    const titleId = useMemo(\n      () => `modal-title-${Math.random().toString(36).slice(2, 11)}`,\n      []\n    );\n    const bodyId = useMemo(\n      () => id || `modal-body-${Math.random().toString(36).slice(2, 11)}`,\n      [id]\n    );\n\n    if (!mounted) return null;\n\n    return (\n      <Portal>\n        <ModalMask visible={visible} />\n        <Container\n          onClick={(e) => {\n            e.stopPropagation();\n            onClose();\n          }}\n        >\n          <FocusLock autoFocus={false}>\n            <Content\n              visible={visible}\n              size={size}\n              onClick={(e) => {\n                e.stopPropagation();\n                onClick(e);\n              }}\n              role='dialog'\n              aria-modal\n              aria-labelledby={header === undefined ? titleId : undefined}\n              aria-describedby={bodyId}\n              ref={contentRef}\n            >\n              {header === undefined ? (\n                <ThemeOverrider\n                  overrides={(t) => ({\n                    buttonPaddingHorizontal:\n                      t.modalCloseButtonPaddingHorizontal,\n                  })}\n                >\n                  <Header>\n                    <Title id={titleId}>{title}</Title>\n                    <Button\n                      type='ghost'\n                      wide='never'\n                      onClick={onClose}\n                      aria-label={locale.closeLabel}\n                    >\n                      <Close />\n                    </Button>\n                  </Header>\n                </ThemeOverrider>\n              ) : (\n                header\n              )}\n\n              <Body id={bodyId} {...rest} ref={ref}>\n                {children}\n              </Body>\n\n              {footer === undefined ? (\n                <Footer>\n                  <Button\n                    danger={okDanger}\n                    loading={okLoading}\n                    disabled={okDisabled}\n                    onClick={onOk}\n                  >\n                    {okText}\n                  </Button>\n                </Footer>\n              ) : (\n                footer\n              )}\n            </Content>\n          </FocusLock>\n        </Container>\n      </Portal>\n    );\n  }\n);\n\nModal.displayName = 'Modal';\n\nexport default Modal;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["css","keyframes","styled","Close","m","Portal","ellipsisStyles","enableScrollingStyles","sizeStyles","clr","ThemeOverrider","useTheme","omitEmotionProps","useBodyScroll","useClosable","React","forwardRef","useCallback","useContext","useMemo","useRef","FocusLock","Button","defaultLocale","MODAL_CONTAINER_Z_INDEX","MODAL_BOX_SHADOW_SIZE_EM","maskFadeIn","maskFadeOut","maskVisibleStyles","p","visible","theme","transitionDelay","maskInvisibleStyles","ModalMask","modalMaskColorBg","Container","div","min","xs","contentFadeIn","contentFadeOut","contentFadeInXs","contentFadeOutXs","contentVisibleStyles","contentInvisibleStyles","Content","colorBg","colorText","modalColorBoxShadow","borderRadius","modalWidth","Header","modalHeaderHeight","modalHeaderColorBorderBottom","modalBodyPaddingHorizontal","Math","max","buttonPaddingHorizontal","Title","sizes","large","Body","modalBodyPaddingVertical","Footer","CloseModalContext","createContext","useCloseModal","Modal","title","okText","okDanger","okLoading","okDisabled","header","footer","locale","onClose","onOk","size","id","onClick","children","rest","ref","contentRef","mounted","titleId","random","toString","slice","bodyId","clickHandler","e","stopPropagation","keyDownHandler","key","ariaLabelledBy","undefined","t","modalCloseButtonPaddingHorizontal","closeLabel","displayName"],"sources":["../../../src/Modal/index.tsx"],"sourcesContent":["import { css, keyframes } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport { Close } from '@os-design/icons';\nimport { m } from '@os-design/media';\nimport Portal from '@os-design/portal';\nimport {\n  ellipsisStyles,\n  enableScrollingStyles,\n  sizeStyles,\n  WithSize,\n} from '@os-design/styles';\nimport { clr, ThemeOverrider, useTheme } from '@os-design/theming';\nimport { omitEmotionProps, useBodyScroll, useClosable } from '@os-design/utils';\nimport React, {\n  forwardRef,\n  useCallback,\n  useContext,\n  useMemo,\n  useRef,\n} from 'react';\nimport FocusLock from 'react-focus-lock';\nimport Button from '../Button';\nimport defaultLocale, { ModalLocale } from './utils/defaultLocale';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface ModalProps extends JsxDivProps, WithSize {\n  /**\n   * The title of the modal.\n   * @default undefined\n   */\n  title?: string;\n  /**\n   * The text of the OK button.\n   * @default OK\n   */\n  okText?: string;\n  /**\n   * Sets the danger styles to the OK button.\n   * @default false\n   */\n  okDanger?: boolean;\n  /**\n   * Whether the OK button is loading.\n   * @default false\n   */\n  okLoading?: boolean;\n  /**\n   * Whether the OK button is disabled.\n   * @default false\n   */\n  okDisabled?: boolean;\n  /**\n   * The header component.\n   * Set as null if you don't need the default header.\n   * @default undefined\n   */\n  header?: React.ReactNode;\n  /**\n   * The footer component.\n   * Set as null if you don't need the default footer.\n   * @default undefined\n   */\n  footer?: React.ReactNode;\n  /**\n   * Whether the modal is visible.\n   * @default false\n   */\n  visible?: boolean;\n  /**\n   * The locale of the modal.\n   * @default undefined\n   */\n  locale?: ModalLocale;\n  /**\n   * Specifies a callback that will be called when a user clicks the mask or\n   * the close button. The callback should set the visible state to false.\n   * @default undefined\n   */\n  onClose?: () => void;\n  /**\n   * Specifies a callback that will be called when a user clicks the OK button.\n   * @default undefined\n   */\n  onOk?: () => void;\n}\n\nconst MODAL_CONTAINER_Z_INDEX = 1000;\nconst MODAL_BOX_SHADOW_SIZE_EM = 1;\n\nconst maskFadeIn = keyframes`\n  from { opacity: 0; }\n  to { opacity: 1; }\n`;\n\nconst maskFadeOut = keyframes`\n  from { opacity: 1; }\n  to { opacity: 0; }\n`;\n\nconst maskVisibleStyles = (p) =>\n  p.visible &&\n  css`\n    animation: ${maskFadeIn} ${p.theme.transitionDelay}ms forwards;\n  `;\n\nconst maskInvisibleStyles = (p) =>\n  !p.visible &&\n  css`\n    animation: ${maskFadeOut} ${p.theme.transitionDelay}ms forwards;\n  `;\n\ntype MaskProps = Pick<ModalProps, 'visible'>;\nexport const ModalMask = styled('div', omitEmotionProps('visible'))<MaskProps>`\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 100%;\n  background-color: ${(p) => clr(p.theme.modalMaskColorBg)};\n  z-index: ${MODAL_CONTAINER_Z_INDEX};\n  ${maskVisibleStyles};\n  ${maskInvisibleStyles};\n`;\n\nconst Container = styled.div`\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 100%;\n  z-index: ${MODAL_CONTAINER_Z_INDEX};\n\n  ${m.min.xs} {\n    ${enableScrollingStyles('y')};\n  }\n`;\n\nconst contentFadeIn = keyframes`\n  from { transform: translateY(calc(var(--vh, 1vh) * 100 + ${MODAL_BOX_SHADOW_SIZE_EM}em)); }\n  to { transform: translateY(calc(var(--vh, 1vh) * 100 - 100%)); }\n`;\n\nconst contentFadeOut = keyframes`\n  from { transform: translateY(calc(var(--vh, 1vh) * 100 - 100%)); }\n  to { transform: translateY(calc(var(--vh, 1vh) * 100 + ${MODAL_BOX_SHADOW_SIZE_EM}em)); }\n`;\n\nconst contentFadeInXs = keyframes`\n  from { transform: translateY(calc(-100% - ${MODAL_BOX_SHADOW_SIZE_EM}em)); }\n  to { transform: translateY(6em); }\n`;\n\nconst contentFadeOutXs = keyframes`\n  from { transform: translateY(6em); }\n  to { transform: translateY(calc(-100% - ${MODAL_BOX_SHADOW_SIZE_EM}em)); }\n`;\n\nconst contentVisibleStyles = (p) =>\n  p.visible &&\n  css`\n    animation: ${contentFadeIn} ${p.theme.transitionDelay}ms forwards;\n    ${m.min.xs} {\n      animation: ${contentFadeInXs} ${p.theme.transitionDelay}ms forwards;\n    }\n  `;\n\nconst contentInvisibleStyles = (p) =>\n  !p.visible &&\n  css`\n    animation: ${contentFadeOut} ${p.theme.transitionDelay}ms forwards;\n    ${m.min.xs} {\n      animation: ${contentFadeOutXs} ${p.theme.transitionDelay}ms forwards;\n    }\n  `;\n\ntype ContentProps = Pick<ModalProps, 'visible' | 'size'>;\nconst Content = styled(\n  'div',\n  omitEmotionProps('visible', 'size')\n)<ContentProps>`\n  position: absolute;\n  display: flex;\n  flex-direction: column;\n  padding-bottom: env(safe-area-inset-bottom);\n\n  background-color: ${(p) => clr(p.theme.colorBg)};\n  color: ${(p) => clr(p.theme.colorText)};\n  box-shadow: 0 0 ${MODAL_BOX_SHADOW_SIZE_EM}em\n    ${(p) => clr(p.theme.modalColorBoxShadow)};\n\n  width: 100%;\n  max-height: 100%;\n  border-radius: ${(p) => p.theme.borderRadius}em\n    ${(p) => p.theme.borderRadius}em 0 0;\n\n  ${m.min.xs} {\n    width: ${(p) => p.theme.modalWidth}em;\n    max-height: unset;\n    border-radius: ${(p) => p.theme.borderRadius}em;\n\n    left: 50%;\n    margin-left: ${(p) => -p.theme.modalWidth / 2}em;\n  }\n\n  ${contentVisibleStyles};\n  ${contentInvisibleStyles}\n  ${sizeStyles};\n`;\n\nconst Header = styled.div`\n  flex-shrink: 0;\n  height: ${(p) => p.theme.modalHeaderHeight}em;\n  border-bottom: 1px solid ${(p) => clr(p.theme.modalHeaderColorBorderBottom)};\n  box-sizing: border-box;\n\n  display: flex;\n  align-items: center;\n\n  padding-left: ${(p) => p.theme.modalBodyPaddingHorizontal[0]}em;\n  padding-right: ${(p) =>\n    Math.max(\n      p.theme.modalBodyPaddingHorizontal[1] - p.theme.buttonPaddingHorizontal,\n      0\n    )}em;\n\n  ${m.min.xs} {\n    padding-left: ${(p) => p.theme.modalBodyPaddingHorizontal[1]}em;\n    padding-right: ${(p) =>\n      Math.max(\n        p.theme.modalBodyPaddingHorizontal[1] - p.theme.buttonPaddingHorizontal,\n        0\n      )}em;\n  }\n`;\n\nconst Title = styled.div`\n  flex: 1;\n  font-size: ${(p) => p.theme.sizes.large}em;\n  font-weight: 500;\n  ${ellipsisStyles};\n`;\n\nconst Body = styled.div`\n  flex-grow: 1;\n\n  padding: ${(p) => p.theme.modalBodyPaddingVertical[0]}em\n    ${(p) => p.theme.modalBodyPaddingHorizontal[0]}em;\n\n  ${m.min.xs} {\n    padding: ${(p) => p.theme.modalBodyPaddingVertical[1]}em\n      ${(p) => p.theme.modalBodyPaddingHorizontal[1]}em;\n  }\n\n  ${enableScrollingStyles('y')};\n`;\n\nconst Footer = styled.div`\n  padding: 0 ${(p) => p.theme.modalBodyPaddingHorizontal[0]}em\n    ${(p) => p.theme.modalBodyPaddingVertical[0]}em;\n\n  ${m.min.xs} {\n    display: flex;\n    justify-content: flex-end;\n    align-items: center;\n\n    padding: 0 ${(p) => p.theme.modalBodyPaddingHorizontal[1]}em\n      ${(p) => p.theme.modalBodyPaddingVertical[1]}em;\n  }\n`;\n\nconst CloseModalContext = React.createContext<() => void>(() => {});\n\nexport const useCloseModal = () => useContext(CloseModalContext);\n\n/**\n * The base pop-up window.\n */\nconst Modal = forwardRef<HTMLDivElement, ModalProps>(\n  (\n    {\n      title,\n      okText = 'OK',\n      okDanger = false,\n      okLoading = false,\n      okDisabled = false,\n      header,\n      footer,\n      visible = false,\n      locale = defaultLocale,\n      onClose = () => {},\n      onOk,\n      size,\n      id,\n      onClick = () => {},\n      children,\n      ...rest\n    },\n    ref\n  ) => {\n    const contentRef = useRef<HTMLDivElement>(null);\n    const { theme } = useTheme();\n    const mounted = useClosable(visible, theme.transitionDelay);\n\n    useBodyScroll(!visible);\n\n    const titleId = useMemo(\n      () => `modal-title-${Math.random().toString(36).slice(2, 11)}`,\n      []\n    );\n    const bodyId = useMemo(\n      () => id || `modal-body-${Math.random().toString(36).slice(2, 11)}`,\n      [id]\n    );\n\n    const clickHandler = useCallback(\n      (e) => {\n        e.stopPropagation();\n        onClick(e);\n      },\n      [onClick]\n    );\n\n    const keyDownHandler = useCallback(\n      (e) => {\n        if (e.key === 'Escape') onClose();\n      },\n      [onClose]\n    );\n\n    const ariaLabelledBy = useMemo(\n      () => (header === undefined ? titleId : undefined),\n      [header, titleId]\n    );\n\n    if (!mounted) return null;\n\n    return (\n      <Portal>\n        <ModalMask visible={visible} />\n        <Container onClick={clickHandler}>\n          <FocusLock autoFocus>\n            <CloseModalContext.Provider value={onClose}>\n              <Content\n                visible={visible}\n                size={size}\n                tabIndex={-1}\n                onKeyDown={keyDownHandler}\n                onClick={clickHandler}\n                role='dialog'\n                aria-modal\n                aria-labelledby={ariaLabelledBy}\n                aria-describedby={bodyId}\n                ref={contentRef}\n              >\n                {header === undefined ? (\n                  <ThemeOverrider\n                    overrides={(t) => ({\n                      buttonPaddingHorizontal:\n                        t.modalCloseButtonPaddingHorizontal,\n                    })}\n                  >\n                    <Header>\n                      <Title id={titleId}>{title}</Title>\n                      <Button\n                        type='ghost'\n                        wide='never'\n                        onClick={onClose}\n                        aria-label={locale.closeLabel}\n                      >\n                        <Close />\n                      </Button>\n                    </Header>\n                  </ThemeOverrider>\n                ) : (\n                  header\n                )}\n\n                <Body id={bodyId} {...rest} ref={ref}>\n                  {children}\n                </Body>\n\n                {footer === undefined ? (\n                  <Footer>\n                    <Button\n                      danger={okDanger}\n                      loading={okLoading}\n                      disabled={okDisabled}\n                      onClick={onOk}\n                    >\n                      {okText}\n                    </Button>\n                  </Footer>\n                ) : (\n                  footer\n                )}\n              </Content>\n            </CloseModalContext.Provider>\n          </FocusLock>\n        </Container>\n      </Portal>\n    );\n  }\n);\n\nModal.displayName = 'Modal';\n\nexport default Modal;\n"],"mappings":"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"}

package/dist/types/Drawer/index.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
 import { WithSize } from '@os-design/styles';
+import React from 'react';
 declare type JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;
 export interface DrawerProps extends JsxDivProps, WithSize {
     placement?: 'left' | 'right';
@@ -7,6 +7,7 @@ export interface DrawerProps extends JsxDivProps, WithSize {
     visible?: boolean;
     onClose?: () => void;
 }
+export declare const useCloseDrawer: () => () => void;
 declare const Drawer: React.ForwardRefExoticComponent<DrawerProps & React.RefAttributes<HTMLDivElement>>;
 export default Drawer;
 //# sourceMappingURL=index.d.ts.map

package/dist/types/Drawer/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Drawer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAQ1C,OAAO,EAAqC,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAOhF,aAAK,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,CAAC;AAC7D,MAAM,WAAW,WAAY,SAAQ,WAAW,EAAE,QAAQ;IAKxD,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAK7B,KAAK,CAAC,EAAE,MAAM,CAAC;IAKf,OAAO,CAAC,EAAE,OAAO,CAAC;IAMlB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAiGD,QAAA,MAAM,MAAM,oFAmDX,CAAC;AAIF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Drawer/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAIL,QAAQ,EACT,MAAM,mBAAmB,CAAC;AAG3B,OAAO,KAA8C,MAAM,OAAO,CAAC;AAInE,aAAK,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,CAAC;AAC7D,MAAM,WAAW,WAAY,SAAQ,WAAW,EAAE,QAAQ;IAKxD,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAK7B,KAAK,CAAC,EAAE,MAAM,CAAC;IAKf,OAAO,CAAC,EAAE,OAAO,CAAC;IAMlB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAkGD,eAAO,MAAM,cAAc,cAF0B,IAEa,CAAC;AAKnE,QAAA,MAAM,MAAM,oFA+DX,CAAC;AAIF,eAAe,MAAM,CAAC"}

package/dist/types/Modal/index.d.ts

@@ -20,6 +20,7 @@ export declare const ModalMask: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: React.ElementType<any> | undefined;
 } & MaskProps, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const useCloseModal: () => () => void;
 declare const Modal: React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<HTMLDivElement>>;
 export default Modal;
 //# sourceMappingURL=index.d.ts.map

package/dist/types/Modal/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Modal/index.tsx"],"names":[],"mappings":"AAKA,OAAO,EAIL,QAAQ,EACT,MAAM,mBAAmB,CAAC;AAQ3B,OAAO,KAAsC,MAAM,OAAO,CAAC;AAG3D,OAAsB,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAEnE,aAAK,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,CAAC;AAC7D,MAAM,WAAW,UAAW,SAAQ,WAAW,EAAE,QAAQ;IAKvD,KAAK,CAAC,EAAE,MAAM,CAAC;IAKf,MAAM,CAAC,EAAE,MAAM,CAAC;IAKhB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAKnB,SAAS,CAAC,EAAE,OAAO,CAAC;IAKpB,UAAU,CAAC,EAAE,OAAO,CAAC;IAMrB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAMzB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAKzB,OAAO,CAAC,EAAE,OAAO,CAAC;IAKlB,MAAM,CAAC,EAAE,WAAW,CAAC;IAMrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAKrB,IAAI,CAAC,EAAE,MAAM,IAAI,CAAC;CACnB;AA2BD,aAAK,SAAS,GAAG,IAAI,CAAC,UAAU,EAAE,SAAS,CAAC,CAAC;AAC7C,eAAO,MAAM,SAAS;;;iGAUrB,CAAC;AAuJF,QAAA,MAAM,KAAK,mFAiHV,CAAC;AAIF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Modal/index.tsx"],"names":[],"mappings":"AAKA,OAAO,EAIL,QAAQ,EACT,MAAM,mBAAmB,CAAC;AAG3B,OAAO,KAMN,MAAM,OAAO,CAAC;AAGf,OAAsB,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAEnE,aAAK,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,CAAC;AAC7D,MAAM,WAAW,UAAW,SAAQ,WAAW,EAAE,QAAQ;IAKvD,KAAK,CAAC,EAAE,MAAM,CAAC;IAKf,MAAM,CAAC,EAAE,MAAM,CAAC;IAKhB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAKnB,SAAS,CAAC,EAAE,OAAO,CAAC;IAKpB,UAAU,CAAC,EAAE,OAAO,CAAC;IAMrB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAMzB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAKzB,OAAO,CAAC,EAAE,OAAO,CAAC;IAKlB,MAAM,CAAC,EAAE,WAAW,CAAC;IAMrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAKrB,IAAI,CAAC,EAAE,MAAM,IAAI,CAAC;CACnB;AA2BD,aAAK,SAAS,GAAG,IAAI,CAAC,UAAU,EAAE,SAAS,CAAC,CAAC;AAC7C,eAAO,MAAM,SAAS;;;iGAUrB,CAAC;AAsJF,eAAO,MAAM,aAAa,cAF0B,IAEY,CAAC;AAKjE,QAAA,MAAM,KAAK,mFA6HV,CAAC;AAIF,eAAe,KAAK,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@os-design/core",
-  "version": "1.0.177",
+  "version": "1.0.178",
   "license": "UNLICENSED",
   "repository": "git@gitlab.com:os-team/libs/os-design.git",
   "main": "dist/cjs/index.js",
@@ -58,5 +58,5 @@
     "react": ">=18",
     "react-dom": ">=18"
   },
-  "gitHead": "050f234718c73502f13347623abe8c243ac1a79f"
+  "gitHead": "784006b6b4a3c36fe8976d23907c0a69a84f8bc8"
 }