npm - @os-design/core - Versions diffs - 1.0.176 → 1.0.177 - Mend

@os-design/core 1.0.176 → 1.0.177

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/dist/cjs/Modal/index.js +35 -32
package/dist/cjs/Modal/index.js.map +1 -1
package/dist/esm/Modal/index.js +11 -8
package/dist/esm/Modal/index.js.map +1 -1
package/dist/types/Modal/index.d.ts +1 -1
package/dist/types/Modal/index.d.ts.map +1 -1
package/package.json +2 -2

package/dist/cjs/Modal/index.js CHANGED Viewed

@@ -5,51 +5,51 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = exports.ModalMask = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _reactFocusLock = _interopRequireDefault(require("react-focus-lock"));
+var _react = require("@emotion/react");
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-var _utils = require("@os-design/utils");
-var _styles = require("@os-design/styles");
-var _media = require("@os-design/media");
-var _react2 = require("@emotion/react");
 var _icons = require("@os-design/icons");
-var _theming = require("@os-design/theming");
+var _media = require("@os-design/media");
 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 _Button = _interopRequireDefault(require("../Button"));
 var _defaultLocale = _interopRequireDefault(require("./utils/defaultLocale"));
 var _excluded = ["title", "okText", "okDanger", "okLoading", "okDisabled", "header", "footer", "visible", "locale", "onClose", "onOk", "size", "id", "onClick", "children"];
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17;
-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; }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 var MODAL_CONTAINER_Z_INDEX = 1000;
 var MODAL_BOX_SHADOW_SIZE_EM = 1;
-var maskFadeIn = (0, _react2.keyframes)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  from { opacity: 0; }\n  to { opacity: 1; }\n"])));
-var maskFadeOut = (0, _react2.keyframes)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  from { opacity: 1; }\n  to { opacity: 0; }\n"])));
+var maskFadeIn = (0, _react.keyframes)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  from { opacity: 0; }\n  to { opacity: 1; }\n"])));
+var maskFadeOut = (0, _react.keyframes)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  from { opacity: 1; }\n  to { opacity: 0; }\n"])));
 var maskVisibleStyles = function maskVisibleStyles(p) {
-  return p.visible && (0, _react2.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    animation: ", " ", "ms forwards;\n  "])), maskFadeIn, p.theme.transitionDelay);
+  return p.visible && (0, _react.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    animation: ", " ", "ms forwards;\n  "])), maskFadeIn, p.theme.transitionDelay);
 };
 var maskInvisibleStyles = function maskInvisibleStyles(p) {
-  return !p.visible && (0, _react2.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    animation: ", " ", "ms forwards;\n  "])), maskFadeOut, p.theme.transitionDelay);
+  return !p.visible && (0, _react.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    animation: ", " ", "ms forwards;\n  "])), maskFadeOut, p.theme.transitionDelay);
 };
 var ModalMask = (0, _styled["default"])('div', (0, _utils.omitEmotionProps)('visible'))(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 100%;\n  background-color: ", ";\n  z-index: ", ";\n  ", ";\n  ", ";\n"])), function (p) {
   return (0, _theming.clr)(p.theme.modalMaskColorBg);
 }, MODAL_CONTAINER_Z_INDEX, maskVisibleStyles, maskInvisibleStyles);
 exports.ModalMask = ModalMask;
 var Container = _styled["default"].div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 100%;\n  z-index: ", ";\n\n  ", " {\n    ", ";\n  }\n"])), MODAL_CONTAINER_Z_INDEX, _media.m.min.xs, (0, _styles.enableScrollingStyles)('y'));
-var contentFadeIn = (0, _react2.keyframes)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  from { transform: translateY(calc(var(--vh, 1vh) * 100 + ", "em)); }\n  to { transform: translateY(calc(var(--vh, 1vh) * 100 - 100%)); }\n"])), MODAL_BOX_SHADOW_SIZE_EM);
-var contentFadeOut = (0, _react2.keyframes)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  from { transform: translateY(calc(var(--vh, 1vh) * 100 - 100%)); }\n  to { transform: translateY(calc(var(--vh, 1vh) * 100 + ", "em)); }\n"])), MODAL_BOX_SHADOW_SIZE_EM);
-var contentFadeInXs = (0, _react2.keyframes)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  from { transform: translateY(calc(-100% - ", "em)); }\n  to { transform: translateY(6em); }\n"])), MODAL_BOX_SHADOW_SIZE_EM);
-var contentFadeOutXs = (0, _react2.keyframes)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  from { transform: translateY(6em); }\n  to { transform: translateY(calc(-100% - ", "em)); }\n"])), MODAL_BOX_SHADOW_SIZE_EM);
+var contentFadeIn = (0, _react.keyframes)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  from { transform: translateY(calc(var(--vh, 1vh) * 100 + ", "em)); }\n  to { transform: translateY(calc(var(--vh, 1vh) * 100 - 100%)); }\n"])), MODAL_BOX_SHADOW_SIZE_EM);
+var contentFadeOut = (0, _react.keyframes)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  from { transform: translateY(calc(var(--vh, 1vh) * 100 - 100%)); }\n  to { transform: translateY(calc(var(--vh, 1vh) * 100 + ", "em)); }\n"])), MODAL_BOX_SHADOW_SIZE_EM);
+var contentFadeInXs = (0, _react.keyframes)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  from { transform: translateY(calc(-100% - ", "em)); }\n  to { transform: translateY(6em); }\n"])), MODAL_BOX_SHADOW_SIZE_EM);
+var contentFadeOutXs = (0, _react.keyframes)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  from { transform: translateY(6em); }\n  to { transform: translateY(calc(-100% - ", "em)); }\n"])), MODAL_BOX_SHADOW_SIZE_EM);
 var contentVisibleStyles = function contentVisibleStyles(p) {
-  return p.visible && (0, _react2.css)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n    animation: ", " ", "ms forwards;\n    ", " {\n      animation: ", " ", "ms forwards;\n    }\n  "])), contentFadeIn, p.theme.transitionDelay, _media.m.min.xs, contentFadeInXs, p.theme.transitionDelay);
+  return p.visible && (0, _react.css)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n    animation: ", " ", "ms forwards;\n    ", " {\n      animation: ", " ", "ms forwards;\n    }\n  "])), contentFadeIn, p.theme.transitionDelay, _media.m.min.xs, contentFadeInXs, p.theme.transitionDelay);
 };
 var contentInvisibleStyles = function contentInvisibleStyles(p) {
-  return !p.visible && (0, _react2.css)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n    animation: ", " ", "ms forwards;\n    ", " {\n      animation: ", " ", "ms forwards;\n    }\n  "])), contentFadeOut, p.theme.transitionDelay, _media.m.min.xs, contentFadeOutXs, p.theme.transitionDelay);
+  return !p.visible && (0, _react.css)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n    animation: ", " ", "ms forwards;\n    ", " {\n      animation: ", " ", "ms forwards;\n    }\n  "])), contentFadeOut, p.theme.transitionDelay, _media.m.min.xs, contentFadeOutXs, p.theme.transitionDelay);
 };
 var Content = (0, _styled["default"])('div', (0, _utils.omitEmotionProps)('visible', 'size'))(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  position: absolute;\n  display: flex;\n  flex-direction: column;\n  padding-bottom: env(safe-area-inset-bottom);\n\n  background-color: ", ";\n  color: ", ";\n  box-shadow: 0 0 ", "em\n    ", ";\n\n  width: 100%;\n  max-height: 100%;\n  border-radius: ", "em\n    ", "em 0 0;\n\n  ", " {\n    width: ", "em;\n    max-height: unset;\n    border-radius: ", "em;\n\n    left: 50%;\n    margin-left: ", "em;\n  }\n\n  ", ";\n  ", "\n  ", ";\n"])), function (p) {
   return (0, _theming.clr)(p.theme.colorBg);
@@ -106,7 +106,7 @@ var Footer = _styled["default"].div(_templateObject17 || (_templateObject17 = _t
 /**
  * The base pop-up window.
  */
-var Modal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+var Modal = /*#__PURE__*/(0, _react2.forwardRef)(function (_ref, ref) {
   var title = _ref.title,
     _ref$okText = _ref.okText,
     okText = _ref$okText === void 0 ? 'OK' : _ref$okText,
@@ -131,26 +131,29 @@ var Modal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     _onClick = _ref$onClick === void 0 ? function () {} : _ref$onClick,
     children = _ref.children,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var contentRef = (0, _react.useRef)(null);
+  var contentRef = (0, _react2.useRef)(null);
   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 titleId = (0, _react.useMemo)(function () {
+  var titleId = (0, _react2.useMemo)(function () {
     return "modal-title-".concat(Math.random().toString(36).slice(2, 11));
   }, []);
-  var bodyId = (0, _react.useMemo)(function () {
+  var bodyId = (0, _react2.useMemo)(function () {
     return id || "modal-body-".concat(Math.random().toString(36).slice(2, 11));
   }, [id]);
   if (!mounted) return null;
-  return /*#__PURE__*/_react["default"].createElement(_portal["default"], null, /*#__PURE__*/_react["default"].createElement(ModalMask, {
+  return /*#__PURE__*/_react2["default"].createElement(_portal["default"], null, /*#__PURE__*/_react2["default"].createElement(ModalMask, {
     visible: visible
-  }), /*#__PURE__*/_react["default"].createElement(Container, {
-    onClick: onClose
-  }, /*#__PURE__*/_react["default"].createElement(_reactFocusLock["default"], {
+  }), /*#__PURE__*/_react2["default"].createElement(Container, {
+    onClick: function onClick(e) {
+      e.stopPropagation();
+      onClose();
+    }
+  }, /*#__PURE__*/_react2["default"].createElement(_reactFocusLock["default"], {
     autoFocus: false
-  }, /*#__PURE__*/_react["default"].createElement(Content, {
+  }, /*#__PURE__*/_react2["default"].createElement(Content, {
     visible: visible,
     size: size,
     onClick: function onClick(e) {
@@ -162,24 +165,24 @@ var Modal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     "aria-labelledby": header === undefined ? titleId : undefined,
     "aria-describedby": bodyId,
     ref: contentRef
-  }, header === undefined ? /*#__PURE__*/_react["default"].createElement(_theming.ThemeOverrider, {
+  }, header === undefined ? /*#__PURE__*/_react2["default"].createElement(_theming.ThemeOverrider, {
     overrides: function overrides(t) {
       return {
         buttonPaddingHorizontal: t.modalCloseButtonPaddingHorizontal
       };
     }
-  }, /*#__PURE__*/_react["default"].createElement(Header, null, /*#__PURE__*/_react["default"].createElement(Title, {
+  }, /*#__PURE__*/_react2["default"].createElement(Header, null, /*#__PURE__*/_react2["default"].createElement(Title, {
     id: titleId
-  }, title), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+  }, title), /*#__PURE__*/_react2["default"].createElement(_Button["default"], {
     type: "ghost",
     wide: "never",
     onClick: onClose,
     "aria-label": locale.closeLabel
-  }, /*#__PURE__*/_react["default"].createElement(_icons.Close, null)))) : header, /*#__PURE__*/_react["default"].createElement(Body, _extends({
+  }, /*#__PURE__*/_react2["default"].createElement(_icons.Close, null)))) : header, /*#__PURE__*/_react2["default"].createElement(Body, _extends({
     id: bodyId
   }, rest, {
     ref: ref
-  }), children), footer === undefined ? /*#__PURE__*/_react["default"].createElement(Footer, null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+  }), children), footer === undefined ? /*#__PURE__*/_react2["default"].createElement(Footer, null, /*#__PURE__*/_react2["default"].createElement(_Button["default"], {
     danger: okDanger,
     loading: okLoading,
     disabled: okDisabled,

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

	@@ -1 +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 React, { forwardRef, useMemo, useRef } from 'react';\nimport FocusLock from 'react-focus-lock';\nimport styled from '@emotion/styled';\nimport {\n useBodyScroll,\n useKeyPress,\n useClosable,\n omitEmotionProps,\n} from '@os-design/utils';\nimport {\n ellipsisStyles,\n enableScrollingStyles,\n sizeStyles,\n WithSize,\n} from '@os-design/styles';\nimport { m } from '@os-design/media';\nimport { css, keyframes } from '@emotion/react';\nimport { Close } from '@os-design/icons';\nimport { clr, ThemeOverrider, useTheme } from '@os-design/theming';\nimport Portal from '@os-design/portal';\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 onClick={onClose}>\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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"}
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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"}

package/dist/esm/Modal/index.js CHANGED Viewed

@@ -1,14 +1,14 @@
 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, useMemo, useRef } from 'react';
-import FocusLock from 'react-focus-lock';
-import styled from '@emotion/styled';
-import { useBodyScroll, useKeyPress, useClosable, omitEmotionProps } from '@os-design/utils';
-import { ellipsisStyles, enableScrollingStyles, sizeStyles } from '@os-design/styles';
-import { m } from '@os-design/media';
 import { css, keyframes } from '@emotion/react';
+import styled from '@emotion/styled';
 import { Close } from '@os-design/icons';
-import { clr, ThemeOverrider, useTheme } from '@os-design/theming';
+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 FocusLock from 'react-focus-lock';
 import Button from '../Button';
 import defaultLocale from './utils/defaultLocale';
 const MODAL_CONTAINER_Z_INDEX = 1000;
@@ -191,7 +191,10 @@ const Modal = /*#__PURE__*/forwardRef(({
   return /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(ModalMask, {
     visible: visible
   }), /*#__PURE__*/React.createElement(Container, {
-    onClick: onClose
+    onClick: e => {
+      e.stopPropagation();
+      onClose();
+    }
   }, /*#__PURE__*/React.createElement(FocusLock, {
     autoFocus: false
   }, /*#__PURE__*/React.createElement(Content, {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","names":["React","forwardRef","useMemo","useRef","FocusLock","styled","useBodyScroll","useKeyPress","useClosable","omitEmotionProps","ellipsisStyles","enableScrollingStyles","sizeStyles","m","css","keyframes","Close","clr","ThemeOverrider","useTheme","Portal","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 React, { forwardRef, useMemo, useRef } from 'react';\nimport FocusLock from 'react-focus-lock';\nimport styled from '@emotion/styled';\nimport {\n useBodyScroll,\n useKeyPress,\n useClosable,\n omitEmotionProps,\n} from '@os-design/utils';\nimport {\n ellipsisStyles,\n enableScrollingStyles,\n sizeStyles,\n WithSize,\n} from '@os-design/styles';\nimport { m } from '@os-design/media';\nimport { css, keyframes } from '@emotion/react';\nimport { Close } from '@os-design/icons';\nimport { clr, ThemeOverrider, useTheme } from '@os-design/theming';\nimport Portal from '@os-design/portal';\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 onClick={onClose}>\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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"}
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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"}

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

@@ -1,5 +1,5 @@
-import React from 'react';
 import { WithSize } from '@os-design/styles';
+import React from 'react';
 import { ModalLocale } from './utils/defaultLocale';
 declare type JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;
 export interface ModalProps extends JsxDivProps, WithSize {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Modal/index.tsx"],"names":[],"mappings":"~~AAAA~~,OAAO,~~KAAsC~~,MAAM,~~OAAO~~,CAAC;~~AAS3D~~,OAAO,~~EAIL~~,~~QAAQ,EACT,~~MAAM,~~mBAAmB~~,CAAC;~~AAO3B~~,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,~~mFA4GV~~,CAAC;AAIF,eAAe,KAAK,CAAC"}
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"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@os-design/core",
-  "version": "1.0.176",
+  "version": "1.0.177",
   "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": "681678f84141ce5da04e8559a0b9b224e1d50aa7"
+  "gitHead": "050f234718c73502f13347623abe8c243ac1a79f"
 }