npm - @os-design/core - Versions diffs - 1.0.181 → 1.0.182 - Mend

@os-design/core 1.0.181 → 1.0.182

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 (5) hide show

package/dist/cjs/Modal/index.js +1 -1
package/dist/cjs/Modal/index.js.map +1 -1
package/dist/esm/Modal/index.js +1 -1
package/dist/esm/Modal/index.js.map +1 -1
package/package.json +2 -2

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

@@ -164,7 +164,7 @@ var Modal = /*#__PURE__*/(0, _react2.forwardRef)(function (_ref, ref) {
   return /*#__PURE__*/_react2["default"].createElement(_portal["default"], null, /*#__PURE__*/_react2["default"].createElement(ModalMask, {
     visible: visible
   }), /*#__PURE__*/_react2["default"].createElement(Container, {
-    onClick: clickHandler
+    onClick: onClose
   }, /*#__PURE__*/_react2["default"].createElement(_reactFocusLock["default"], {
     autoFocus: true
   }, /*#__PURE__*/_react2["default"].createElement(CloseModalContext.Provider, {

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

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

@@ -203,7 +203,7 @@ const Modal = /*#__PURE__*/forwardRef(({
   return /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(ModalMask, {
     visible: visible
   }), /*#__PURE__*/React.createElement(Container, {
-    onClick: clickHandler
+    onClick: onClose
   }, /*#__PURE__*/React.createElement(FocusLock, {
     autoFocus: true
   }, /*#__PURE__*/React.createElement(CloseModalContext.Provider, {

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

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

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@os-design/core",
-  "version": "1.0.181",
+  "version": "1.0.182",
   "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": "54d934347e3bc64add50d5ab4021a94791f9f9dc"
+  "gitHead": "f474412e5f97b03b0768772e10a841a1d646f399"
 }