@os-design/core 1.0.204 → 1.0.205
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/Drawer/index.js
CHANGED
|
@@ -23,7 +23,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
|
|
|
23
23
|
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
24
24
|
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
25
25
|
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
26
|
-
var DRAWER_CONTAINER_Z_INDEX =
|
|
26
|
+
var DRAWER_CONTAINER_Z_INDEX = 1000;
|
|
27
27
|
var DRAWER_BOX_SHADOW_SIZE_EM = 1;
|
|
28
28
|
var DrawerMask = (0, _styled["default"])(_Modal.ModalMask)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n z-index: ", ";\n"])), DRAWER_CONTAINER_Z_INDEX);
|
|
29
29
|
var Container = _styled["default"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n height: 100%;\n z-index: ", ";\n"])), DRAWER_CONTAINER_Z_INDEX);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["_react","require","_styled","_interopRequireDefault","_portal","_styles","_theming","_utils","_react2","_interopRequireWildcard","_reactFocusLock","_Modal","_excluded","_templateObject","_templateObject2","_templateObject3","_templateObject4","_templateObject5","_templateObject6","_templateObject7","_templateObject8","_templateObject9","_templateObject10","_templateObject11","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","_typeof","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","_taggedTemplateLiteral","strings","raw","slice","freeze","defineProperties","value","DRAWER_CONTAINER_Z_INDEX","DRAWER_BOX_SHADOW_SIZE_EM","DrawerMask","styled","ModalMask","Container","div","placementLeftFadeIn","keyframes","placementLeftFadeOut","placementRightFadeIn","placementRightFadeOut","placementLeftVisibleStyles","p","placement","visible","css","theme","transitionDelay","placementLeftInvisibleStyles","placementRightVisibleStyles","placementRightInvisibleStyles","Content","omitEmotionProps","resetFocusStyles","width","clr","colorBg","colorText","drawerColorBoxShadow","enableScrollingStyles","sizeStyles","CloseDrawerContext","React","createContext","useCloseDrawer","useContext","exports","Drawer","forwardRef","_ref","ref","_ref$placement","_ref$width","_ref$visible","_ref$onClose","onClose","size","children","_ref$onClick","onClick","rest","_useTheme","useTheme","mounted","useClosable","useBodyScroll","clickHandler","useCallback","e","stopPropagation","keyDownHandler","createElement","autoFocus","Provider","tabIndex","onKeyDown","role","displayName","_default"],"sources":["../../../src/Drawer/index.tsx"],"sourcesContent":["import { css, keyframes } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport Portal from '@os-design/portal';\nimport {\n WithSize,\n enableScrollingStyles,\n resetFocusStyles,\n sizeStyles,\n} from '@os-design/styles';\nimport { clr, useTheme } from '@os-design/theming';\nimport { omitEmotionProps, useBodyScroll, useClosable } from '@os-design/utils';\nimport React, { forwardRef, useCallback, useContext } from 'react';\nimport FocusLock from 'react-focus-lock';\nimport { ModalMask } from '../Modal';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface DrawerProps extends JsxDivProps, WithSize {\n /**\n * The placement of the drawer.\n * @default right\n */\n placement?: 'left' | 'right';\n /**\n * The width of the drawer.\n * @default 15em\n */\n width?: string;\n /**\n * Whether the drawer is visible.\n * @default false\n */\n visible?: boolean;\n /**\n * Specifies a callback that will be called when a user clicks the mask.\n * The callback should set the visible state to false.\n * @default undefined\n */\n onClose?: () => void;\n}\n\nconst DRAWER_CONTAINER_Z_INDEX = 900;\nconst DRAWER_BOX_SHADOW_SIZE_EM = 1;\n\nconst DrawerMask = styled(ModalMask)`\n z-index: ${DRAWER_CONTAINER_Z_INDEX};\n`;\n\nconst Container = styled.div`\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n height: 100%;\n z-index: ${DRAWER_CONTAINER_Z_INDEX};\n`;\n\nconst placementLeftFadeIn = keyframes`\n from { transform: translateX(calc(-100% - ${DRAWER_BOX_SHADOW_SIZE_EM}em)); }\n to { transform: translateX(0); }\n`;\n\nconst placementLeftFadeOut = keyframes`\n from { transform: translateX(0); }\n to { transform: translateX(calc(-100% - ${DRAWER_BOX_SHADOW_SIZE_EM}em)); }\n`;\n\nconst placementRightFadeIn = keyframes`\n from { transform: translateX(calc(100vw + ${DRAWER_BOX_SHADOW_SIZE_EM}em)); }\n to { transform: translateX(calc(100vw - 100%)); }\n`;\n\nconst placementRightFadeOut = keyframes`\n from { transform: translateX(calc(100vw - 100%)); }\n to { transform: translateX(calc(100vw + ${DRAWER_BOX_SHADOW_SIZE_EM}em)); }\n`;\n\nconst placementLeftVisibleStyles = (p) =>\n p.placement === 'left' &&\n p.visible &&\n css`\n animation: ${placementLeftFadeIn} ${p.theme.transitionDelay}ms forwards;\n `;\n\nconst placementLeftInvisibleStyles = (p) =>\n p.placement === 'left' &&\n !p.visible &&\n css`\n animation: ${placementLeftFadeOut} ${p.theme.transitionDelay}ms forwards;\n `;\n\nconst placementRightVisibleStyles = (p) =>\n p.placement === 'right' &&\n p.visible &&\n css`\n animation: ${placementRightFadeIn} ${p.theme.transitionDelay}ms forwards;\n `;\n\nconst placementRightInvisibleStyles = (p) =>\n p.placement === 'right' &&\n !p.visible &&\n css`\n animation: ${placementRightFadeOut} ${p.theme.transitionDelay}ms forwards;\n `;\n\ntype ContentProps = Pick<\n DrawerProps,\n 'placement' | 'width' | 'visible' | 'size'\n>;\nconst Content = styled(\n 'div',\n omitEmotionProps('placement', 'width', 'visible', 'size')\n)<ContentProps>`\n ${resetFocusStyles};\n\n position: absolute;\n top: 0;\n bottom: 0;\n width: ${(p) => p.width};\n padding-bottom: env(safe-area-inset-bottom);\n\n background-color: ${(p) => clr(p.theme.colorBg)};\n color: ${(p) => clr(p.theme.colorText)};\n box-shadow: 0 0 ${DRAWER_BOX_SHADOW_SIZE_EM}em\n ${(p) => clr(p.theme.drawerColorBoxShadow)};\n\n ${placementLeftVisibleStyles};\n ${placementLeftInvisibleStyles};\n ${placementRightVisibleStyles};\n ${placementRightInvisibleStyles};\n\n ${enableScrollingStyles('y')};\n ${sizeStyles};\n`;\n\nconst CloseDrawerContext = React.createContext<() => void>(() => {});\n\nexport const useCloseDrawer = () => useContext(CloseDrawerContext);\n\n/**\n * The side panel that appears from the edge of the screen.\n */\nconst Drawer = forwardRef<HTMLDivElement, DrawerProps>(\n (\n {\n placement = 'right',\n width = '15em',\n visible = false,\n onClose = () => {},\n size,\n children,\n onClick = () => {},\n ...rest\n },\n ref\n ) => {\n const { theme } = useTheme();\n const mounted = useClosable(visible, theme.transitionDelay);\n\n useBodyScroll(!visible);\n\n const clickHandler = useCallback(\n (e) => {\n e.stopPropagation();\n onClick(e);\n },\n [onClick]\n );\n\n const keyDownHandler = useCallback(\n (e) => {\n if (e.key === 'Escape') {\n e.stopPropagation();\n onClose();\n }\n },\n [onClose]\n );\n\n if (!mounted) return null;\n\n return (\n <Portal>\n <DrawerMask visible={visible} />\n <Container onClick={onClose}>\n <FocusLock autoFocus>\n <CloseDrawerContext.Provider value={onClose}>\n <Content\n placement={placement}\n width={width}\n visible={visible}\n size={size}\n tabIndex={-1}\n onKeyDown={keyDownHandler}\n onClick={clickHandler}\n role='dialog'\n aria-modal\n {...rest}\n ref={ref}\n >\n {children}\n </Content>\n </CloseDrawerContext.Provider>\n </FocusLock>\n </Container>\n </Portal>\n );\n }\n);\n\nDrawer.displayName = 'Drawer';\n\nexport default Drawer;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","names":["_react","require","_styled","_interopRequireDefault","_portal","_styles","_theming","_utils","_react2","_interopRequireWildcard","_reactFocusLock","_Modal","_excluded","_templateObject","_templateObject2","_templateObject3","_templateObject4","_templateObject5","_templateObject6","_templateObject7","_templateObject8","_templateObject9","_templateObject10","_templateObject11","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","_typeof","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","_taggedTemplateLiteral","strings","raw","slice","freeze","defineProperties","value","DRAWER_CONTAINER_Z_INDEX","DRAWER_BOX_SHADOW_SIZE_EM","DrawerMask","styled","ModalMask","Container","div","placementLeftFadeIn","keyframes","placementLeftFadeOut","placementRightFadeIn","placementRightFadeOut","placementLeftVisibleStyles","p","placement","visible","css","theme","transitionDelay","placementLeftInvisibleStyles","placementRightVisibleStyles","placementRightInvisibleStyles","Content","omitEmotionProps","resetFocusStyles","width","clr","colorBg","colorText","drawerColorBoxShadow","enableScrollingStyles","sizeStyles","CloseDrawerContext","React","createContext","useCloseDrawer","useContext","exports","Drawer","forwardRef","_ref","ref","_ref$placement","_ref$width","_ref$visible","_ref$onClose","onClose","size","children","_ref$onClick","onClick","rest","_useTheme","useTheme","mounted","useClosable","useBodyScroll","clickHandler","useCallback","e","stopPropagation","keyDownHandler","createElement","autoFocus","Provider","tabIndex","onKeyDown","role","displayName","_default"],"sources":["../../../src/Drawer/index.tsx"],"sourcesContent":["import { css, keyframes } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport Portal from '@os-design/portal';\nimport {\n WithSize,\n enableScrollingStyles,\n resetFocusStyles,\n sizeStyles,\n} from '@os-design/styles';\nimport { clr, useTheme } from '@os-design/theming';\nimport { omitEmotionProps, useBodyScroll, useClosable } from '@os-design/utils';\nimport React, { forwardRef, useCallback, useContext } from 'react';\nimport FocusLock from 'react-focus-lock';\nimport { ModalMask } from '../Modal';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface DrawerProps extends JsxDivProps, WithSize {\n /**\n * The placement of the drawer.\n * @default right\n */\n placement?: 'left' | 'right';\n /**\n * The width of the drawer.\n * @default 15em\n */\n width?: string;\n /**\n * Whether the drawer is visible.\n * @default false\n */\n visible?: boolean;\n /**\n * Specifies a callback that will be called when a user clicks the mask.\n * The callback should set the visible state to false.\n * @default undefined\n */\n onClose?: () => void;\n}\n\nconst DRAWER_CONTAINER_Z_INDEX = 1000;\nconst DRAWER_BOX_SHADOW_SIZE_EM = 1;\n\nconst DrawerMask = styled(ModalMask)`\n z-index: ${DRAWER_CONTAINER_Z_INDEX};\n`;\n\nconst Container = styled.div`\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n height: 100%;\n z-index: ${DRAWER_CONTAINER_Z_INDEX};\n`;\n\nconst placementLeftFadeIn = keyframes`\n from { transform: translateX(calc(-100% - ${DRAWER_BOX_SHADOW_SIZE_EM}em)); }\n to { transform: translateX(0); }\n`;\n\nconst placementLeftFadeOut = keyframes`\n from { transform: translateX(0); }\n to { transform: translateX(calc(-100% - ${DRAWER_BOX_SHADOW_SIZE_EM}em)); }\n`;\n\nconst placementRightFadeIn = keyframes`\n from { transform: translateX(calc(100vw + ${DRAWER_BOX_SHADOW_SIZE_EM}em)); }\n to { transform: translateX(calc(100vw - 100%)); }\n`;\n\nconst placementRightFadeOut = keyframes`\n from { transform: translateX(calc(100vw - 100%)); }\n to { transform: translateX(calc(100vw + ${DRAWER_BOX_SHADOW_SIZE_EM}em)); }\n`;\n\nconst placementLeftVisibleStyles = (p) =>\n p.placement === 'left' &&\n p.visible &&\n css`\n animation: ${placementLeftFadeIn} ${p.theme.transitionDelay}ms forwards;\n `;\n\nconst placementLeftInvisibleStyles = (p) =>\n p.placement === 'left' &&\n !p.visible &&\n css`\n animation: ${placementLeftFadeOut} ${p.theme.transitionDelay}ms forwards;\n `;\n\nconst placementRightVisibleStyles = (p) =>\n p.placement === 'right' &&\n p.visible &&\n css`\n animation: ${placementRightFadeIn} ${p.theme.transitionDelay}ms forwards;\n `;\n\nconst placementRightInvisibleStyles = (p) =>\n p.placement === 'right' &&\n !p.visible &&\n css`\n animation: ${placementRightFadeOut} ${p.theme.transitionDelay}ms forwards;\n `;\n\ntype ContentProps = Pick<\n DrawerProps,\n 'placement' | 'width' | 'visible' | 'size'\n>;\nconst Content = styled(\n 'div',\n omitEmotionProps('placement', 'width', 'visible', 'size')\n)<ContentProps>`\n ${resetFocusStyles};\n\n position: absolute;\n top: 0;\n bottom: 0;\n width: ${(p) => p.width};\n padding-bottom: env(safe-area-inset-bottom);\n\n background-color: ${(p) => clr(p.theme.colorBg)};\n color: ${(p) => clr(p.theme.colorText)};\n box-shadow: 0 0 ${DRAWER_BOX_SHADOW_SIZE_EM}em\n ${(p) => clr(p.theme.drawerColorBoxShadow)};\n\n ${placementLeftVisibleStyles};\n ${placementLeftInvisibleStyles};\n ${placementRightVisibleStyles};\n ${placementRightInvisibleStyles};\n\n ${enableScrollingStyles('y')};\n ${sizeStyles};\n`;\n\nconst CloseDrawerContext = React.createContext<() => void>(() => {});\n\nexport const useCloseDrawer = () => useContext(CloseDrawerContext);\n\n/**\n * The side panel that appears from the edge of the screen.\n */\nconst Drawer = forwardRef<HTMLDivElement, DrawerProps>(\n (\n {\n placement = 'right',\n width = '15em',\n visible = false,\n onClose = () => {},\n size,\n children,\n onClick = () => {},\n ...rest\n },\n ref\n ) => {\n const { theme } = useTheme();\n const mounted = useClosable(visible, theme.transitionDelay);\n\n useBodyScroll(!visible);\n\n const clickHandler = useCallback(\n (e) => {\n e.stopPropagation();\n onClick(e);\n },\n [onClick]\n );\n\n const keyDownHandler = useCallback(\n (e) => {\n if (e.key === 'Escape') {\n e.stopPropagation();\n onClose();\n }\n },\n [onClose]\n );\n\n if (!mounted) return null;\n\n return (\n <Portal>\n <DrawerMask visible={visible} />\n <Container onClick={onClose}>\n <FocusLock autoFocus>\n <CloseDrawerContext.Provider value={onClose}>\n <Content\n placement={placement}\n width={width}\n visible={visible}\n size={size}\n tabIndex={-1}\n onKeyDown={keyDownHandler}\n onClick={clickHandler}\n role='dialog'\n aria-modal\n {...rest}\n ref={ref}\n >\n {children}\n </Content>\n </CloseDrawerContext.Provider>\n </FocusLock>\n </Container>\n </Portal>\n );\n }\n);\n\nDrawer.displayName = 'Drawer';\n\nexport default Drawer;\n"],"mappings":"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"}
|
package/dist/esm/Drawer/index.js
CHANGED
|
@@ -8,7 +8,7 @@ import { omitEmotionProps, useBodyScroll, useClosable } from '@os-design/utils';
|
|
|
8
8
|
import React, { forwardRef, useCallback, useContext } from 'react';
|
|
9
9
|
import FocusLock from 'react-focus-lock';
|
|
10
10
|
import { ModalMask } from '../Modal';
|
|
11
|
-
const DRAWER_CONTAINER_Z_INDEX =
|
|
11
|
+
const DRAWER_CONTAINER_Z_INDEX = 1000;
|
|
12
12
|
const DRAWER_BOX_SHADOW_SIZE_EM = 1;
|
|
13
13
|
const DrawerMask = styled(ModalMask)`
|
|
14
14
|
z-index: ${DRAWER_CONTAINER_Z_INDEX};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["css","keyframes","styled","Portal","enableScrollingStyles","resetFocusStyles","sizeStyles","clr","useTheme","omitEmotionProps","useBodyScroll","useClosable","React","forwardRef","useCallback","useContext","FocusLock","ModalMask","DRAWER_CONTAINER_Z_INDEX","DRAWER_BOX_SHADOW_SIZE_EM","DrawerMask","Container","div","placementLeftFadeIn","placementLeftFadeOut","placementRightFadeIn","placementRightFadeOut","placementLeftVisibleStyles","p","placement","visible","theme","transitionDelay","placementLeftInvisibleStyles","placementRightVisibleStyles","placementRightInvisibleStyles","Content","width","colorBg","colorText","drawerColorBoxShadow","CloseDrawerContext","createContext","useCloseDrawer","Drawer","onClose","size","children","onClick","rest","ref","mounted","clickHandler","e","stopPropagation","keyDownHandler","key","createElement","autoFocus","Provider","value","_extends","tabIndex","onKeyDown","role","displayName"],"sources":["../../../src/Drawer/index.tsx"],"sourcesContent":["import { css, keyframes } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport Portal from '@os-design/portal';\nimport {\n WithSize,\n enableScrollingStyles,\n resetFocusStyles,\n sizeStyles,\n} from '@os-design/styles';\nimport { clr, useTheme } from '@os-design/theming';\nimport { omitEmotionProps, useBodyScroll, useClosable } from '@os-design/utils';\nimport React, { forwardRef, useCallback, useContext } from 'react';\nimport FocusLock from 'react-focus-lock';\nimport { ModalMask } from '../Modal';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface DrawerProps extends JsxDivProps, WithSize {\n /**\n * The placement of the drawer.\n * @default right\n */\n placement?: 'left' | 'right';\n /**\n * The width of the drawer.\n * @default 15em\n */\n width?: string;\n /**\n * Whether the drawer is visible.\n * @default false\n */\n visible?: boolean;\n /**\n * Specifies a callback that will be called when a user clicks the mask.\n * The callback should set the visible state to false.\n * @default undefined\n */\n onClose?: () => void;\n}\n\nconst DRAWER_CONTAINER_Z_INDEX = 900;\nconst DRAWER_BOX_SHADOW_SIZE_EM = 1;\n\nconst DrawerMask = styled(ModalMask)`\n z-index: ${DRAWER_CONTAINER_Z_INDEX};\n`;\n\nconst Container = styled.div`\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n height: 100%;\n z-index: ${DRAWER_CONTAINER_Z_INDEX};\n`;\n\nconst placementLeftFadeIn = keyframes`\n from { transform: translateX(calc(-100% - ${DRAWER_BOX_SHADOW_SIZE_EM}em)); }\n to { transform: translateX(0); }\n`;\n\nconst placementLeftFadeOut = keyframes`\n from { transform: translateX(0); }\n to { transform: translateX(calc(-100% - ${DRAWER_BOX_SHADOW_SIZE_EM}em)); }\n`;\n\nconst placementRightFadeIn = keyframes`\n from { transform: translateX(calc(100vw + ${DRAWER_BOX_SHADOW_SIZE_EM}em)); }\n to { transform: translateX(calc(100vw - 100%)); }\n`;\n\nconst placementRightFadeOut = keyframes`\n from { transform: translateX(calc(100vw - 100%)); }\n to { transform: translateX(calc(100vw + ${DRAWER_BOX_SHADOW_SIZE_EM}em)); }\n`;\n\nconst placementLeftVisibleStyles = (p) =>\n p.placement === 'left' &&\n p.visible &&\n css`\n animation: ${placementLeftFadeIn} ${p.theme.transitionDelay}ms forwards;\n `;\n\nconst placementLeftInvisibleStyles = (p) =>\n p.placement === 'left' &&\n !p.visible &&\n css`\n animation: ${placementLeftFadeOut} ${p.theme.transitionDelay}ms forwards;\n `;\n\nconst placementRightVisibleStyles = (p) =>\n p.placement === 'right' &&\n p.visible &&\n css`\n animation: ${placementRightFadeIn} ${p.theme.transitionDelay}ms forwards;\n `;\n\nconst placementRightInvisibleStyles = (p) =>\n p.placement === 'right' &&\n !p.visible &&\n css`\n animation: ${placementRightFadeOut} ${p.theme.transitionDelay}ms forwards;\n `;\n\ntype ContentProps = Pick<\n DrawerProps,\n 'placement' | 'width' | 'visible' | 'size'\n>;\nconst Content = styled(\n 'div',\n omitEmotionProps('placement', 'width', 'visible', 'size')\n)<ContentProps>`\n ${resetFocusStyles};\n\n position: absolute;\n top: 0;\n bottom: 0;\n width: ${(p) => p.width};\n padding-bottom: env(safe-area-inset-bottom);\n\n background-color: ${(p) => clr(p.theme.colorBg)};\n color: ${(p) => clr(p.theme.colorText)};\n box-shadow: 0 0 ${DRAWER_BOX_SHADOW_SIZE_EM}em\n ${(p) => clr(p.theme.drawerColorBoxShadow)};\n\n ${placementLeftVisibleStyles};\n ${placementLeftInvisibleStyles};\n ${placementRightVisibleStyles};\n ${placementRightInvisibleStyles};\n\n ${enableScrollingStyles('y')};\n ${sizeStyles};\n`;\n\nconst CloseDrawerContext = React.createContext<() => void>(() => {});\n\nexport const useCloseDrawer = () => useContext(CloseDrawerContext);\n\n/**\n * The side panel that appears from the edge of the screen.\n */\nconst Drawer = forwardRef<HTMLDivElement, DrawerProps>(\n (\n {\n placement = 'right',\n width = '15em',\n visible = false,\n onClose = () => {},\n size,\n children,\n onClick = () => {},\n ...rest\n },\n ref\n ) => {\n const { theme } = useTheme();\n const mounted = useClosable(visible, theme.transitionDelay);\n\n useBodyScroll(!visible);\n\n const clickHandler = useCallback(\n (e) => {\n e.stopPropagation();\n onClick(e);\n },\n [onClick]\n );\n\n const keyDownHandler = useCallback(\n (e) => {\n if (e.key === 'Escape') {\n e.stopPropagation();\n onClose();\n }\n },\n [onClose]\n );\n\n if (!mounted) return null;\n\n return (\n <Portal>\n <DrawerMask visible={visible} />\n <Container onClick={onClose}>\n <FocusLock autoFocus>\n <CloseDrawerContext.Provider value={onClose}>\n <Content\n placement={placement}\n width={width}\n visible={visible}\n size={size}\n tabIndex={-1}\n onKeyDown={keyDownHandler}\n onClick={clickHandler}\n role='dialog'\n aria-modal\n {...rest}\n ref={ref}\n >\n {children}\n </Content>\n </CloseDrawerContext.Provider>\n </FocusLock>\n </Container>\n </Portal>\n );\n }\n);\n\nDrawer.displayName = 'Drawer';\n\nexport default Drawer;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","names":["css","keyframes","styled","Portal","enableScrollingStyles","resetFocusStyles","sizeStyles","clr","useTheme","omitEmotionProps","useBodyScroll","useClosable","React","forwardRef","useCallback","useContext","FocusLock","ModalMask","DRAWER_CONTAINER_Z_INDEX","DRAWER_BOX_SHADOW_SIZE_EM","DrawerMask","Container","div","placementLeftFadeIn","placementLeftFadeOut","placementRightFadeIn","placementRightFadeOut","placementLeftVisibleStyles","p","placement","visible","theme","transitionDelay","placementLeftInvisibleStyles","placementRightVisibleStyles","placementRightInvisibleStyles","Content","width","colorBg","colorText","drawerColorBoxShadow","CloseDrawerContext","createContext","useCloseDrawer","Drawer","onClose","size","children","onClick","rest","ref","mounted","clickHandler","e","stopPropagation","keyDownHandler","key","createElement","autoFocus","Provider","value","_extends","tabIndex","onKeyDown","role","displayName"],"sources":["../../../src/Drawer/index.tsx"],"sourcesContent":["import { css, keyframes } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport Portal from '@os-design/portal';\nimport {\n WithSize,\n enableScrollingStyles,\n resetFocusStyles,\n sizeStyles,\n} from '@os-design/styles';\nimport { clr, useTheme } from '@os-design/theming';\nimport { omitEmotionProps, useBodyScroll, useClosable } from '@os-design/utils';\nimport React, { forwardRef, useCallback, useContext } from 'react';\nimport FocusLock from 'react-focus-lock';\nimport { ModalMask } from '../Modal';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface DrawerProps extends JsxDivProps, WithSize {\n /**\n * The placement of the drawer.\n * @default right\n */\n placement?: 'left' | 'right';\n /**\n * The width of the drawer.\n * @default 15em\n */\n width?: string;\n /**\n * Whether the drawer is visible.\n * @default false\n */\n visible?: boolean;\n /**\n * Specifies a callback that will be called when a user clicks the mask.\n * The callback should set the visible state to false.\n * @default undefined\n */\n onClose?: () => void;\n}\n\nconst DRAWER_CONTAINER_Z_INDEX = 1000;\nconst DRAWER_BOX_SHADOW_SIZE_EM = 1;\n\nconst DrawerMask = styled(ModalMask)`\n z-index: ${DRAWER_CONTAINER_Z_INDEX};\n`;\n\nconst Container = styled.div`\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n height: 100%;\n z-index: ${DRAWER_CONTAINER_Z_INDEX};\n`;\n\nconst placementLeftFadeIn = keyframes`\n from { transform: translateX(calc(-100% - ${DRAWER_BOX_SHADOW_SIZE_EM}em)); }\n to { transform: translateX(0); }\n`;\n\nconst placementLeftFadeOut = keyframes`\n from { transform: translateX(0); }\n to { transform: translateX(calc(-100% - ${DRAWER_BOX_SHADOW_SIZE_EM}em)); }\n`;\n\nconst placementRightFadeIn = keyframes`\n from { transform: translateX(calc(100vw + ${DRAWER_BOX_SHADOW_SIZE_EM}em)); }\n to { transform: translateX(calc(100vw - 100%)); }\n`;\n\nconst placementRightFadeOut = keyframes`\n from { transform: translateX(calc(100vw - 100%)); }\n to { transform: translateX(calc(100vw + ${DRAWER_BOX_SHADOW_SIZE_EM}em)); }\n`;\n\nconst placementLeftVisibleStyles = (p) =>\n p.placement === 'left' &&\n p.visible &&\n css`\n animation: ${placementLeftFadeIn} ${p.theme.transitionDelay}ms forwards;\n `;\n\nconst placementLeftInvisibleStyles = (p) =>\n p.placement === 'left' &&\n !p.visible &&\n css`\n animation: ${placementLeftFadeOut} ${p.theme.transitionDelay}ms forwards;\n `;\n\nconst placementRightVisibleStyles = (p) =>\n p.placement === 'right' &&\n p.visible &&\n css`\n animation: ${placementRightFadeIn} ${p.theme.transitionDelay}ms forwards;\n `;\n\nconst placementRightInvisibleStyles = (p) =>\n p.placement === 'right' &&\n !p.visible &&\n css`\n animation: ${placementRightFadeOut} ${p.theme.transitionDelay}ms forwards;\n `;\n\ntype ContentProps = Pick<\n DrawerProps,\n 'placement' | 'width' | 'visible' | 'size'\n>;\nconst Content = styled(\n 'div',\n omitEmotionProps('placement', 'width', 'visible', 'size')\n)<ContentProps>`\n ${resetFocusStyles};\n\n position: absolute;\n top: 0;\n bottom: 0;\n width: ${(p) => p.width};\n padding-bottom: env(safe-area-inset-bottom);\n\n background-color: ${(p) => clr(p.theme.colorBg)};\n color: ${(p) => clr(p.theme.colorText)};\n box-shadow: 0 0 ${DRAWER_BOX_SHADOW_SIZE_EM}em\n ${(p) => clr(p.theme.drawerColorBoxShadow)};\n\n ${placementLeftVisibleStyles};\n ${placementLeftInvisibleStyles};\n ${placementRightVisibleStyles};\n ${placementRightInvisibleStyles};\n\n ${enableScrollingStyles('y')};\n ${sizeStyles};\n`;\n\nconst CloseDrawerContext = React.createContext<() => void>(() => {});\n\nexport const useCloseDrawer = () => useContext(CloseDrawerContext);\n\n/**\n * The side panel that appears from the edge of the screen.\n */\nconst Drawer = forwardRef<HTMLDivElement, DrawerProps>(\n (\n {\n placement = 'right',\n width = '15em',\n visible = false,\n onClose = () => {},\n size,\n children,\n onClick = () => {},\n ...rest\n },\n ref\n ) => {\n const { theme } = useTheme();\n const mounted = useClosable(visible, theme.transitionDelay);\n\n useBodyScroll(!visible);\n\n const clickHandler = useCallback(\n (e) => {\n e.stopPropagation();\n onClick(e);\n },\n [onClick]\n );\n\n const keyDownHandler = useCallback(\n (e) => {\n if (e.key === 'Escape') {\n e.stopPropagation();\n onClose();\n }\n },\n [onClose]\n );\n\n if (!mounted) return null;\n\n return (\n <Portal>\n <DrawerMask visible={visible} />\n <Container onClick={onClose}>\n <FocusLock autoFocus>\n <CloseDrawerContext.Provider value={onClose}>\n <Content\n placement={placement}\n width={width}\n visible={visible}\n size={size}\n tabIndex={-1}\n onKeyDown={keyDownHandler}\n onClick={clickHandler}\n role='dialog'\n aria-modal\n {...rest}\n ref={ref}\n >\n {children}\n </Content>\n </CloseDrawerContext.Provider>\n </FocusLock>\n </Container>\n </Portal>\n );\n }\n);\n\nDrawer.displayName = 'Drawer';\n\nexport default Drawer;\n"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@os-design/core",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.205",
|
|
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": "4f905e38d078d355257c7555ce3b4c86b388b9f3"
|
|
63
63
|
}
|
package/src/Drawer/index.tsx
CHANGED
|
@@ -38,7 +38,7 @@ export interface DrawerProps extends JsxDivProps, WithSize {
|
|
|
38
38
|
onClose?: () => void;
|
|
39
39
|
}
|
|
40
40
|
|
|
41
|
-
const DRAWER_CONTAINER_Z_INDEX =
|
|
41
|
+
const DRAWER_CONTAINER_Z_INDEX = 1000;
|
|
42
42
|
const DRAWER_BOX_SHADOW_SIZE_EM = 1;
|
|
43
43
|
|
|
44
44
|
const DrawerMask = styled(ModalMask)`
|