@os-design/core 1.0.130 → 1.0.131

package/dist/cjs/Modal/index.js

@@ -31,7 +31,7 @@ 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", "children"];
+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;
 
@@ -163,6 +163,8 @@ var Modal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       onOk = _ref.onOk,
       size = _ref.size,
       id = _ref.id,
+      _ref$onClick = _ref.onClick,
+      _onClick = _ref$onClick === void 0 ? function () {} : _ref$onClick,
       children = _ref.children,
       rest = _objectWithoutProperties(_ref, _excluded);
 
@@ -173,7 +175,6 @@ var Modal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
 
   var mounted = (0, _utils.useClosable)(visible, theme.transitionDelay);
   (0, _utils.useBodyScroll)(!visible);
-  (0, _utils.useClickOutside)(contentRef, onClose);
   (0, _utils.useKeyPress)(typeof window !== 'undefined' ? window : undefined, 'Escape', onClose);
   var titleId = (0, _react.useMemo)(function () {
     return "modal-title-".concat(Math.random().toString(36).slice(2, 11));
@@ -184,11 +185,18 @@ var Modal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   if (!mounted) return null;
   return /*#__PURE__*/_react["default"].createElement(_portal["default"], null, /*#__PURE__*/_react["default"].createElement(ModalMask, {
     visible: visible
-  }), /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement(_reactFocusLock["default"], {
+  }), /*#__PURE__*/_react["default"].createElement(Container, {
+    onClick: onClose
+  }, /*#__PURE__*/_react["default"].createElement(_reactFocusLock["default"], {
     autoFocus: false
   }, /*#__PURE__*/_react["default"].createElement(Content, {
     visible: visible,
     size: size,
+    onClick: function onClick(e) {
+      e.stopPropagation();
+
+      _onClick(e);
+    },
     role: "dialog",
     "aria-modal": true,
     "aria-labelledby": header === undefined ? titleId : undefined,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Modal/index.tsx"],"names":["MODAL_CONTAINER_Z_INDEX","MODAL_BOX_SHADOW_SIZE_EM","maskFadeIn","keyframes","maskFadeOut","maskVisibleStyles","p","visible","css","theme","transitionDelay","maskInvisibleStyles","ModalMask","modalMaskColorBg","Container","styled","div","m","min","xs","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","ref","title","okText","okDanger","okLoading","okDisabled","header","footer","locale","defaultLocale","onClose","onOk","size","id","children","rest","contentRef","mounted","window","undefined","titleId","random","toString","slice","bodyId","t","modalCloseButtonPaddingHorizontal","closeLabel","displayName"],"mappings":"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","sourcesContent":["import React, { forwardRef, useMemo, useRef } from 'react';\nimport FocusLock from 'react-focus-lock';\nimport styled from '@emotion/styled';\nimport {\n  useBodyScroll,\n  useClickOutside,\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      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    useClickOutside(contentRef, onClose);\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          <FocusLock autoFocus={false}>\n            <Content\n              visible={visible}\n              size={size}\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"],"file":"index.js"}
+{"version":3,"sources":["../../../src/Modal/index.tsx"],"names":["MODAL_CONTAINER_Z_INDEX","MODAL_BOX_SHADOW_SIZE_EM","maskFadeIn","keyframes","maskFadeOut","maskVisibleStyles","p","visible","css","theme","transitionDelay","maskInvisibleStyles","ModalMask","modalMaskColorBg","Container","styled","div","m","min","xs","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","ref","title","okText","okDanger","okLoading","okDisabled","header","footer","locale","defaultLocale","onClose","onOk","size","id","onClick","children","rest","contentRef","mounted","window","undefined","titleId","random","toString","slice","bodyId","e","stopPropagation","t","modalCloseButtonPaddingHorizontal","closeLabel","displayName"],"mappings":"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","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"],"file":"index.js"}

package/dist/esm/Modal/index.js

@@ -3,7 +3,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 import React, { forwardRef, useMemo, useRef } from 'react';
 import FocusLock from 'react-focus-lock';
 import styled from '@emotion/styled';
-import { useBodyScroll, useClickOutside, useKeyPress, useClosable, omitEmotionProps } from '@os-design/utils';
+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';
@@ -181,6 +181,7 @@ const Modal = /*#__PURE__*/forwardRef(({
   onOk,
   size,
   id,
+  onClick = () => {},
   children,
   ...rest
 }, ref) => {
@@ -190,18 +191,23 @@ const Modal = /*#__PURE__*/forwardRef(({
   } = useTheme();
   const mounted = useClosable(visible, theme.transitionDelay);
   useBodyScroll(!visible);
-  useClickOutside(contentRef, onClose);
   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]);
   if (!mounted) return null;
   return /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(ModalMask, {
     visible: visible
-  }), /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(FocusLock, {
+  }), /*#__PURE__*/React.createElement(Container, {
+    onClick: onClose
+  }, /*#__PURE__*/React.createElement(FocusLock, {
     autoFocus: false
   }, /*#__PURE__*/React.createElement(Content, {
     visible: visible,
     size: size,
+    onClick: e => {
+      e.stopPropagation();
+      onClick(e);
+    },
     role: "dialog",
     "aria-modal": true,
     "aria-labelledby": header === undefined ? titleId : undefined,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Modal/index.tsx"],"names":["React","forwardRef","useMemo","useRef","FocusLock","styled","useBodyScroll","useClickOutside","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","children","rest","ref","contentRef","mounted","window","undefined","titleId","random","toString","slice","bodyId","t","modalCloseButtonPaddingHorizontal","closeLabel","displayName"],"mappings":"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","sourcesContent":["import React, { forwardRef, useMemo, useRef } from 'react';\nimport FocusLock from 'react-focus-lock';\nimport styled from '@emotion/styled';\nimport {\n  useBodyScroll,\n  useClickOutside,\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      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    useClickOutside(contentRef, onClose);\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          <FocusLock autoFocus={false}>\n            <Content\n              visible={visible}\n              size={size}\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"],"file":"index.js"}
+{"version":3,"sources":["../../../src/Modal/index.tsx"],"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"],"mappings":";;AAAA,OAAOA,KAAP,IAAgBC,UAAhB,EAA4BC,OAA5B,EAAqCC,MAArC,QAAmD,OAAnD;AACA,OAAOC,SAAP,MAAsB,kBAAtB;AACA,OAAOC,MAAP,MAAmB,iBAAnB;AACA,SACEC,aADF,EAEEC,WAFF,EAGEC,WAHF,EAIEC,gBAJF,QAKO,kBALP;AAMA,SACEC,cADF,EAEEC,qBAFF,EAGEC,UAHF,QAKO,mBALP;AAMA,SAASC,CAAT,QAAkB,kBAAlB;AACA,SAASC,GAAT,EAAcC,SAAd,QAA+B,gBAA/B;AACA,SAASC,KAAT,QAAsB,kBAAtB;AACA,SAASC,GAAT,EAAcC,cAAd,EAA8BC,QAA9B,QAA8C,oBAA9C;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,OAAOC,MAAP,MAAmB,WAAnB;AACA,OAAOC,aAAP,MAA2C,uBAA3C;AAgEA,MAAMC,uBAAuB,GAAG,IAAhC;AACA,MAAMC,wBAAwB,GAAG,CAAjC;AAEA,MAAMC,UAAU,GAAGV,SAAU;AAC7B;AACA;AACA,CAHA;AAKA,MAAMW,WAAW,GAAGX,SAAU;AAC9B;AACA;AACA,CAHA;;AAKA,MAAMY,iBAAiB,GAAIC,CAAD,IACxBA,CAAC,CAACC,OAAF,IACAf,GAAI;AACN,iBAAiBW,UAAW,IAAGG,CAAC,CAACE,KAAF,CAAQC,eAAgB;AACvD,GAJA;;AAMA,MAAMC,mBAAmB,GAAIJ,CAAD,IAC1B,CAACA,CAAC,CAACC,OAAH,IACAf,GAAI;AACN,iBAAiBY,WAAY,IAAGE,CAAC,CAACE,KAAF,CAAQC,eAAgB;AACxD,GAJA;;AAOA,OAAO,MAAME,SAAS,GAAG5B,MAAM,CAAC,KAAD,EAAQI,gBAAgB,CAAC,SAAD,CAAxB,CAAgD;AAC/E;AACA;AACA;AACA;AACA;AACA,sBAAuBmB,CAAD,IAAOX,GAAG,CAACW,CAAC,CAACE,KAAF,CAAQI,gBAAT,CAA2B;AAC3D,aAAaX,uBAAwB;AACrC,IAAII,iBAAkB;AACtB,IAAIK,mBAAoB;AACxB,CAVO;AAYP,MAAMG,SAAS,GAAG9B,MAAM,CAAC+B,GAAI;AAC7B;AACA;AACA;AACA;AACA;AACA,aAAab,uBAAwB;AACrC;AACA,IAAIV,CAAC,CAACwB,GAAF,CAAMC,EAAG;AACb,MAAM3B,qBAAqB,CAAC,GAAD,CAAM;AACjC;AACA,CAXA;AAaA,MAAM4B,aAAa,GAAGxB,SAAU;AAChC,6DAA6DS,wBAAyB;AACtF;AACA,CAHA;AAKA,MAAMgB,cAAc,GAAGzB,SAAU;AACjC;AACA,2DAA2DS,wBAAyB;AACpF,CAHA;AAKA,MAAMiB,eAAe,GAAG1B,SAAU;AAClC,8CAA8CS,wBAAyB;AACvE;AACA,CAHA;AAKA,MAAMkB,gBAAgB,GAAG3B,SAAU;AACnC;AACA,4CAA4CS,wBAAyB;AACrE,CAHA;;AAKA,MAAMmB,oBAAoB,GAAIf,CAAD,IAC3BA,CAAC,CAACC,OAAF,IACAf,GAAI;AACN,iBAAiByB,aAAc,IAAGX,CAAC,CAACE,KAAF,CAAQC,eAAgB;AAC1D,MAAMlB,CAAC,CAACwB,GAAF,CAAMC,EAAG;AACf,mBAAmBG,eAAgB,IAAGb,CAAC,CAACE,KAAF,CAAQC,eAAgB;AAC9D;AACA,GAPA;;AASA,MAAMa,sBAAsB,GAAIhB,CAAD,IAC7B,CAACA,CAAC,CAACC,OAAH,IACAf,GAAI;AACN,iBAAiB0B,cAAe,IAAGZ,CAAC,CAACE,KAAF,CAAQC,eAAgB;AAC3D,MAAMlB,CAAC,CAACwB,GAAF,CAAMC,EAAG;AACf,mBAAmBI,gBAAiB,IAAGd,CAAC,CAACE,KAAF,CAAQC,eAAgB;AAC/D;AACA,GAPA;;AAUA,MAAMc,OAAO,GAAGxC,MAAM,CACpB,KADoB,EAEpBI,gBAAgB,CAAC,SAAD,EAAY,MAAZ,CAFI,CAGN;AAChB;AACA;AACA;AACA;AACA;AACA,sBAAuBmB,CAAD,IAAOX,GAAG,CAACW,CAAC,CAACE,KAAF,CAAQgB,OAAT,CAAkB;AAClD,WAAYlB,CAAD,IAAOX,GAAG,CAACW,CAAC,CAACE,KAAF,CAAQiB,SAAT,CAAoB;AACzC,oBAAoBvB,wBAAyB;AAC7C,MAAOI,CAAD,IAAOX,GAAG,CAACW,CAAC,CAACE,KAAF,CAAQkB,mBAAT,CAA8B;AAC9C;AACA;AACA;AACA,mBAAoBpB,CAAD,IAAOA,CAAC,CAACE,KAAF,CAAQmB,YAAa;AAC/C,MAAOrB,CAAD,IAAOA,CAAC,CAACE,KAAF,CAAQmB,YAAa;AAClC;AACA,IAAIpC,CAAC,CAACwB,GAAF,CAAMC,EAAG;AACb,aAAcV,CAAD,IAAOA,CAAC,CAACE,KAAF,CAAQoB,UAAW;AACvC;AACA,qBAAsBtB,CAAD,IAAOA,CAAC,CAACE,KAAF,CAAQmB,YAAa;AACjD;AACA;AACA,mBAAoBrB,CAAD,IAAO,CAACA,CAAC,CAACE,KAAF,CAAQoB,UAAT,GAAsB,CAAE;AAClD;AACA;AACA,IAAIP,oBAAqB;AACzB,IAAIC,sBAAuB;AAC3B,IAAIhC,UAAW;AACf,CA/BA;AAiCA,MAAMuC,MAAM,GAAG9C,MAAM,CAAC+B,GAAI;AAC1B;AACA,YAAaR,CAAD,IAAOA,CAAC,CAACE,KAAF,CAAQsB,iBAAkB;AAC7C,6BAA8BxB,CAAD,IAAOX,GAAG,CAACW,CAAC,CAACE,KAAF,CAAQuB,4BAAT,CAAuC;AAC9E;AACA;AACA;AACA;AACA;AACA,kBAAmBzB,CAAD,IAAOA,CAAC,CAACE,KAAF,CAAQwB,0BAAR,CAAmC,CAAnC,CAAsC;AAC/D,mBAAoB1B,CAAD,IACf2B,IAAI,CAACC,GAAL,CACE5B,CAAC,CAACE,KAAF,CAAQwB,0BAAR,CAAmC,CAAnC,IAAwC1B,CAAC,CAACE,KAAF,CAAQ2B,uBADlD,EAEE,CAFF,CAGE;AACN;AACA,IAAI5C,CAAC,CAACwB,GAAF,CAAMC,EAAG;AACb,oBAAqBV,CAAD,IAAOA,CAAC,CAACE,KAAF,CAAQwB,0BAAR,CAAmC,CAAnC,CAAsC;AACjE,qBAAsB1B,CAAD,IACf2B,IAAI,CAACC,GAAL,CACE5B,CAAC,CAACE,KAAF,CAAQwB,0BAAR,CAAmC,CAAnC,IAAwC1B,CAAC,CAACE,KAAF,CAAQ2B,uBADlD,EAEE,CAFF,CAGE;AACR;AACA,CAxBA;AA0BA,MAAMC,KAAK,GAAGrD,MAAM,CAAC+B,GAAI;AACzB;AACA,eAAgBR,CAAD,IAAOA,CAAC,CAACE,KAAF,CAAQ6B,KAAR,CAAcC,KAAM;AAC1C;AACA,IAAIlD,cAAe;AACnB,CALA;AAOA,MAAMmD,IAAI,GAAGxD,MAAM,CAAC+B,GAAI;AACxB;AACA;AACA,aAAcR,CAAD,IAAOA,CAAC,CAACE,KAAF,CAAQgC,wBAAR,CAAiC,CAAjC,CAAoC;AACxD,MAAOlC,CAAD,IAAOA,CAAC,CAACE,KAAF,CAAQwB,0BAAR,CAAmC,CAAnC,CAAsC;AACnD;AACA,IAAIzC,CAAC,CAACwB,GAAF,CAAMC,EAAG;AACb,eAAgBV,CAAD,IAAOA,CAAC,CAACE,KAAF,CAAQgC,wBAAR,CAAiC,CAAjC,CAAoC;AAC1D,QAASlC,CAAD,IAAOA,CAAC,CAACE,KAAF,CAAQwB,0BAAR,CAAmC,CAAnC,CAAsC;AACrD;AACA;AACA,IAAI3C,qBAAqB,CAAC,GAAD,CAAM;AAC/B,CAZA;AAcA,MAAMoD,MAAM,GAAG1D,MAAM,CAAC+B,GAAI;AAC1B,eAAgBR,CAAD,IAAOA,CAAC,CAACE,KAAF,CAAQwB,0BAAR,CAAmC,CAAnC,CAAsC;AAC5D,MAAO1B,CAAD,IAAOA,CAAC,CAACE,KAAF,CAAQgC,wBAAR,CAAiC,CAAjC,CAAoC;AACjD;AACA,IAAIjD,CAAC,CAACwB,GAAF,CAAMC,EAAG;AACb;AACA;AACA;AACA;AACA,iBAAkBV,CAAD,IAAOA,CAAC,CAACE,KAAF,CAAQwB,0BAAR,CAAmC,CAAnC,CAAsC;AAC9D,QAAS1B,CAAD,IAAOA,CAAC,CAACE,KAAF,CAAQgC,wBAAR,CAAiC,CAAjC,CAAoC;AACnD;AACA,CAZA;AAcA;AACA;AACA;;AACA,MAAME,KAAK,gBAAG/D,UAAU,CACtB,CACE;AACEgE,EAAAA,KADF;AAEEC,EAAAA,MAAM,GAAG,IAFX;AAGEC,EAAAA,QAAQ,GAAG,KAHb;AAIEC,EAAAA,SAAS,GAAG,KAJd;AAKEC,EAAAA,UAAU,GAAG,KALf;AAMEC,EAAAA,MANF;AAOEC,EAAAA,MAPF;AAQE1C,EAAAA,OAAO,GAAG,KARZ;AASE2C,EAAAA,MAAM,GAAGlD,aATX;AAUEmD,EAAAA,OAAO,GAAG,MAAM,CAAE,CAVpB;AAWEC,EAAAA,IAXF;AAYEC,EAAAA,IAZF;AAaEC,EAAAA,EAbF;AAcEC,EAAAA,OAAO,GAAG,MAAM,CAAE,CAdpB;AAeEC,EAAAA,QAfF;AAgBE,KAAGC;AAhBL,CADF,EAmBEC,GAnBF,KAoBK;AACH,QAAMC,UAAU,GAAG9E,MAAM,CAAiB,IAAjB,CAAzB;AACA,QAAM;AAAE2B,IAAAA;AAAF,MAAYX,QAAQ,EAA1B;AACA,QAAM+D,OAAO,GAAG1E,WAAW,CAACqB,OAAD,EAAUC,KAAK,CAACC,eAAhB,CAA3B;AACAzB,EAAAA,aAAa,CAAC,CAACuB,OAAF,CAAb;AACAtB,EAAAA,WAAW,CACR,OAAO4E,MAAP,KAAkB,WAAlB,GAAgCA,MAAhC,GAAyCC,SADjC,EAET,QAFS,EAGTX,OAHS,CAAX;AAMA,QAAMY,OAAO,GAAGnF,OAAO,CACrB,MAAO,eAAcqD,IAAI,CAAC+B,MAAL,GAAcC,QAAd,CAAuB,EAAvB,EAA2BC,KAA3B,CAAiC,CAAjC,EAAoC,EAApC,CAAwC,EADxC,EAErB,EAFqB,CAAvB;AAIA,QAAMC,MAAM,GAAGvF,OAAO,CACpB,MAAM0E,EAAE,IAAK,cAAarB,IAAI,CAAC+B,MAAL,GAAcC,QAAd,CAAuB,EAAvB,EAA2BC,KAA3B,CAAiC,CAAjC,EAAoC,EAApC,CAAwC,EAD9C,EAEpB,CAACZ,EAAD,CAFoB,CAAtB;AAKA,MAAI,CAACM,OAAL,EAAc,OAAO,IAAP;AAEd,sBACE,oBAAC,MAAD,qBACE,oBAAC,SAAD;AAAW,IAAA,OAAO,EAAErD;AAApB,IADF,eAEE,oBAAC,SAAD;AAAW,IAAA,OAAO,EAAE4C;AAApB,kBACE,oBAAC,SAAD;AAAW,IAAA,SAAS,EAAE;AAAtB,kBACE,oBAAC,OAAD;AACE,IAAA,OAAO,EAAE5C,OADX;AAEE,IAAA,IAAI,EAAE8C,IAFR;AAGE,IAAA,OAAO,EAAGe,CAAD,IAAO;AACdA,MAAAA,CAAC,CAACC,eAAF;AACAd,MAAAA,OAAO,CAACa,CAAD,CAAP;AACD,KANH;AAOE,IAAA,IAAI,EAAC,QAPP;AAQE,sBARF;AASE,uBAAiBpB,MAAM,KAAKc,SAAX,GAAuBC,OAAvB,GAAiCD,SATpD;AAUE,wBAAkBK,MAVpB;AAWE,IAAA,GAAG,EAAER;AAXP,KAaGX,MAAM,KAAKc,SAAX,gBACC,oBAAC,cAAD;AACE,IAAA,SAAS,EAAGQ,CAAD,KAAQ;AACjBnC,MAAAA,uBAAuB,EACrBmC,CAAC,CAACC;AAFa,KAAR;AADb,kBAME,oBAAC,MAAD,qBACE,oBAAC,KAAD;AAAO,IAAA,EAAE,EAAER;AAAX,KAAqBpB,KAArB,CADF,eAEE,oBAAC,MAAD;AACE,IAAA,IAAI,EAAC,OADP;AAEE,IAAA,IAAI,EAAC,OAFP;AAGE,IAAA,OAAO,EAAEQ,OAHX;AAIE,kBAAYD,MAAM,CAACsB;AAJrB,kBAME,oBAAC,KAAD,OANF,CAFF,CANF,CADD,GAoBCxB,MAjCJ,eAoCE,oBAAC,IAAD;AAAM,IAAA,EAAE,EAAEmB;AAAV,KAAsBV,IAAtB;AAA4B,IAAA,GAAG,EAAEC;AAAjC,MACGF,QADH,CApCF,EAwCGP,MAAM,KAAKa,SAAX,gBACC,oBAAC,MAAD,qBACE,oBAAC,MAAD;AACE,IAAA,MAAM,EAAEjB,QADV;AAEE,IAAA,OAAO,EAAEC,SAFX;AAGE,IAAA,QAAQ,EAAEC,UAHZ;AAIE,IAAA,OAAO,EAAEK;AAJX,KAMGR,MANH,CADF,CADD,GAYCK,MApDJ,CADF,CADF,CAFF,CADF;AAgED,CA3GqB,CAAxB;AA8GAP,KAAK,CAAC+B,WAAN,GAAoB,OAApB;AAEA,eAAe/B,KAAf","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"],"file":"index.js"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Modal/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAU3D,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;AA4BD,eAAO,MAAM,SAAS;;;mHAUrB,CAAC;AAuJF,QAAA,MAAM,KAAK,mFAwGV,CAAC;AAIF,eAAe,KAAK,CAAC"}
+{"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;AA4BD,eAAO,MAAM,SAAS;;;mHAUrB,CAAC;AAuJF,QAAA,MAAM,KAAK,mFA4GV,CAAC;AAIF,eAAe,KAAK,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@os-design/core",
-  "version": "1.0.130",
+  "version": "1.0.131",
   "license": "UNLICENSED",
   "repository": "git@gitlab.com:os-team/libs/os-design.git",
   "main": "dist/cjs/index.js",
@@ -56,5 +56,5 @@
     "react": ">=18",
     "react-dom": ">=18"
   },
-  "gitHead": "2f0238329a10d513d707d0eb95b8547dca3f6502"
+  "gitHead": "afbec2e0a1f78f54c4e4adf75a30ed93e758665c"
 }