@os-design/core 1.0.252 → 1.0.253
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.
package/dist/cjs/Modal/index.js
CHANGED
|
@@ -168,7 +168,7 @@ var Modal = /*#__PURE__*/(0, _react2.forwardRef)(function (_ref, ref) {
|
|
|
168
168
|
}), /*#__PURE__*/_react2["default"].createElement(Container, {
|
|
169
169
|
onClick: containerClickHandler
|
|
170
170
|
}, /*#__PURE__*/_react2["default"].createElement(_reactFocusLock["default"], {
|
|
171
|
-
autoFocus:
|
|
171
|
+
autoFocus: false
|
|
172
172
|
}, /*#__PURE__*/_react2["default"].createElement(CloseModalContext.Provider, {
|
|
173
173
|
value: onClose
|
|
174
174
|
}, /*#__PURE__*/_react2["default"].createElement(Content, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["_react","require","_styled","_interopRequireDefault","_icons","_media","_portal","_styles","_theming","_utils","_react2","_interopRequireWildcard","_reactFocusLock","_Button","_defaultLocale","_excluded","_templateObject","_templateObject2","_templateObject3","_templateObject4","_templateObject5","_templateObject6","_templateObject7","_templateObject8","_templateObject9","_templateObject10","_templateObject11","_templateObject12","_templateObject13","_templateObject14","_templateObject15","_templateObject16","_templateObject17","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","_typeof","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","obj","_extends","assign","bind","target","arguments","length","source","key","prototype","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","_taggedTemplateLiteral","strings","raw","slice","freeze","defineProperties","value","MODAL_CONTAINER_Z_INDEX","MODAL_BOX_SHADOW_SIZE_EM","maskFadeIn","keyframes","maskFadeOut","maskVisibleStyles","p","visible","css","theme","transitionDelay","maskInvisibleStyles","ModalMask","exports","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","ref","title","_ref$okText","okText","_ref$okDanger","okDanger","_ref$okLoading","okLoading","_ref$okDisabled","okDisabled","header","footer","_ref$visible","_ref$locale","locale","defaultLocale","_ref$onClose","onClose","onOk","size","id","_ref$onClick","onClick","children","rest","contentRef","useRef","_useTheme","useTheme","mounted","useClosable","useBodyScroll","titleId","useMemo","concat","random","toString","bodyId","containerClickHandler","useCallback","stopPropagation","contentClickHandler","contentKeyDownHandler","ariaLabelledBy","undefined","createElement","autoFocus","Provider","tabIndex","onKeyDown","role","ThemeOverrider","overrides","modalCloseButtonPaddingHorizontal","type","wide","closeLabel","Close","danger","loading","disabled","displayName","_default"],"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 WithSize,\n ellipsisStyles,\n enableScrollingStyles,\n sizeStyles,\n} from '@os-design/styles';\nimport { ThemeOverrider, clr, useTheme } from '@os-design/theming';\nimport { omitEmotionProps, useBodyScroll, useClosable } from '@os-design/utils';\nimport React, {\n KeyboardEvent,\n MouseEvent,\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 containerClickHandler = useCallback(\n (e: MouseEvent<HTMLDivElement>) => {\n e.stopPropagation();\n onClose();\n },\n [onClose]\n );\n\n const contentClickHandler = useCallback(\n (e: MouseEvent<HTMLDivElement>) => {\n e.stopPropagation();\n onClick(e);\n },\n [onClick]\n );\n\n const contentKeyDownHandler = useCallback(\n (e: KeyboardEvent<HTMLDivElement>) => {\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={containerClickHandler}>\n <FocusLock autoFocus>\n <CloseModalContext.Provider value={onClose}>\n <Content\n visible={visible}\n size={size}\n tabIndex={-1}\n onKeyDown={contentKeyDownHandler}\n onClick={contentClickHandler}\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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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"index.js","names":["_react","require","_styled","_interopRequireDefault","_icons","_media","_portal","_styles","_theming","_utils","_react2","_interopRequireWildcard","_reactFocusLock","_Button","_defaultLocale","_excluded","_templateObject","_templateObject2","_templateObject3","_templateObject4","_templateObject5","_templateObject6","_templateObject7","_templateObject8","_templateObject9","_templateObject10","_templateObject11","_templateObject12","_templateObject13","_templateObject14","_templateObject15","_templateObject16","_templateObject17","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","_typeof","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","obj","_extends","assign","bind","target","arguments","length","source","key","prototype","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","_taggedTemplateLiteral","strings","raw","slice","freeze","defineProperties","value","MODAL_CONTAINER_Z_INDEX","MODAL_BOX_SHADOW_SIZE_EM","maskFadeIn","keyframes","maskFadeOut","maskVisibleStyles","p","visible","css","theme","transitionDelay","maskInvisibleStyles","ModalMask","exports","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","ref","title","_ref$okText","okText","_ref$okDanger","okDanger","_ref$okLoading","okLoading","_ref$okDisabled","okDisabled","header","footer","_ref$visible","_ref$locale","locale","defaultLocale","_ref$onClose","onClose","onOk","size","id","_ref$onClick","onClick","children","rest","contentRef","useRef","_useTheme","useTheme","mounted","useClosable","useBodyScroll","titleId","useMemo","concat","random","toString","bodyId","containerClickHandler","useCallback","stopPropagation","contentClickHandler","contentKeyDownHandler","ariaLabelledBy","undefined","createElement","autoFocus","Provider","tabIndex","onKeyDown","role","ThemeOverrider","overrides","modalCloseButtonPaddingHorizontal","type","wide","closeLabel","Close","danger","loading","disabled","displayName","_default"],"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 WithSize,\n ellipsisStyles,\n enableScrollingStyles,\n sizeStyles,\n} from '@os-design/styles';\nimport { ThemeOverrider, clr, useTheme } from '@os-design/theming';\nimport { omitEmotionProps, useBodyScroll, useClosable } from '@os-design/utils';\nimport React, {\n KeyboardEvent,\n MouseEvent,\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 containerClickHandler = useCallback(\n (e: MouseEvent<HTMLDivElement>) => {\n e.stopPropagation();\n onClose();\n },\n [onClose]\n );\n\n const contentClickHandler = useCallback(\n (e: MouseEvent<HTMLDivElement>) => {\n e.stopPropagation();\n onClick(e);\n },\n [onClick]\n );\n\n const contentKeyDownHandler = useCallback(\n (e: KeyboardEvent<HTMLDivElement>) => {\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={containerClickHandler}>\n <FocusLock autoFocus={false}>\n <CloseModalContext.Provider value={onClose}>\n <Content\n visible={visible}\n size={size}\n tabIndex={-1}\n onKeyDown={contentKeyDownHandler}\n onClick={contentClickHandler}\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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","ignoreList":[]}
|
package/dist/esm/Modal/index.js
CHANGED
|
@@ -209,7 +209,7 @@ const Modal = /*#__PURE__*/forwardRef(({
|
|
|
209
209
|
}), /*#__PURE__*/React.createElement(Container, {
|
|
210
210
|
onClick: containerClickHandler
|
|
211
211
|
}, /*#__PURE__*/React.createElement(FocusLock, {
|
|
212
|
-
autoFocus:
|
|
212
|
+
autoFocus: false
|
|
213
213
|
}, /*#__PURE__*/React.createElement(CloseModalContext.Provider, {
|
|
214
214
|
value: onClose
|
|
215
215
|
}, /*#__PURE__*/React.createElement(Content, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["css","keyframes","styled","Close","m","Portal","ellipsisStyles","enableScrollingStyles","sizeStyles","ThemeOverrider","clr","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","containerClickHandler","e","stopPropagation","contentClickHandler","contentKeyDownHandler","key","ariaLabelledBy","undefined","createElement","autoFocus","Provider","value","tabIndex","onKeyDown","role","overrides","t","modalCloseButtonPaddingHorizontal","type","wide","closeLabel","_extends","danger","loading","disabled","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 WithSize,\n ellipsisStyles,\n enableScrollingStyles,\n sizeStyles,\n} from '@os-design/styles';\nimport { ThemeOverrider, clr, useTheme } from '@os-design/theming';\nimport { omitEmotionProps, useBodyScroll, useClosable } from '@os-design/utils';\nimport React, {\n KeyboardEvent,\n MouseEvent,\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 containerClickHandler = useCallback(\n (e: MouseEvent<HTMLDivElement>) => {\n e.stopPropagation();\n onClose();\n },\n [onClose]\n );\n\n const contentClickHandler = useCallback(\n (e: MouseEvent<HTMLDivElement>) => {\n e.stopPropagation();\n onClick(e);\n },\n [onClick]\n );\n\n const contentKeyDownHandler = useCallback(\n (e: KeyboardEvent<HTMLDivElement>) => {\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={containerClickHandler}>\n <FocusLock autoFocus>\n <CloseModalContext.Provider value={onClose}>\n <Content\n visible={visible}\n size={size}\n tabIndex={-1}\n onKeyDown={contentKeyDownHandler}\n onClick={contentClickHandler}\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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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"index.js","names":["css","keyframes","styled","Close","m","Portal","ellipsisStyles","enableScrollingStyles","sizeStyles","ThemeOverrider","clr","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","containerClickHandler","e","stopPropagation","contentClickHandler","contentKeyDownHandler","key","ariaLabelledBy","undefined","createElement","autoFocus","Provider","value","tabIndex","onKeyDown","role","overrides","t","modalCloseButtonPaddingHorizontal","type","wide","closeLabel","_extends","danger","loading","disabled","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 WithSize,\n ellipsisStyles,\n enableScrollingStyles,\n sizeStyles,\n} from '@os-design/styles';\nimport { ThemeOverrider, clr, useTheme } from '@os-design/theming';\nimport { omitEmotionProps, useBodyScroll, useClosable } from '@os-design/utils';\nimport React, {\n KeyboardEvent,\n MouseEvent,\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 containerClickHandler = useCallback(\n (e: MouseEvent<HTMLDivElement>) => {\n e.stopPropagation();\n onClose();\n },\n [onClose]\n );\n\n const contentClickHandler = useCallback(\n (e: MouseEvent<HTMLDivElement>) => {\n e.stopPropagation();\n onClick(e);\n },\n [onClick]\n );\n\n const contentKeyDownHandler = useCallback(\n (e: KeyboardEvent<HTMLDivElement>) => {\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={containerClickHandler}>\n <FocusLock autoFocus={false}>\n <CloseModalContext.Provider value={onClose}>\n <Content\n visible={visible}\n size={size}\n tabIndex={-1}\n onKeyDown={contentKeyDownHandler}\n onClick={contentClickHandler}\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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","ignoreList":[]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@os-design/core",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.253",
|
|
4
4
|
"license": "UNLICENSED",
|
|
5
5
|
"repository": "git@gitlab.com:os-team/libs/os-design.git",
|
|
6
6
|
"main": "dist/cjs/index.js",
|
|
@@ -59,5 +59,5 @@
|
|
|
59
59
|
"react": ">=18",
|
|
60
60
|
"react-dom": ">=18"
|
|
61
61
|
},
|
|
62
|
-
"gitHead": "
|
|
62
|
+
"gitHead": "1ead821d3a115d3d625e11fc2e5898e1017bd458"
|
|
63
63
|
}
|
package/src/Modal/index.tsx
CHANGED
|
@@ -351,7 +351,7 @@ const Modal = forwardRef<HTMLDivElement, ModalProps>(
|
|
|
351
351
|
<Portal>
|
|
352
352
|
<ModalMask visible={visible} />
|
|
353
353
|
<Container onClick={containerClickHandler}>
|
|
354
|
-
<FocusLock autoFocus>
|
|
354
|
+
<FocusLock autoFocus={false}>
|
|
355
355
|
<CloseModalContext.Provider value={onClose}>
|
|
356
356
|
<Content
|
|
357
357
|
visible={visible}
|