@mattermost/compass-ui 0.1.0-alpha.29 → 0.1.0-alpha.30
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/compass-ui.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ModalOverlay.cjs","sources":["../../../src/components/modal/ModalOverlay.tsx"],"sourcesContent":["import {\n useEffect,\n useRef,\n type HTMLAttributes,\n type MouseEvent,\n type ReactNode,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { usePopoverTransition } from '@/hooks/use-popover-transition';\nimport { mergeClassNames } from '@/utils/props';\nimport { lockBodyScroll } from '@/utils/scrollLock';\nimport { useOnExited } from '@/utils/useOnExited';\nimport styles from './ModalOverlay.module.scss';\n\nexport interface ModalOverlayProps extends HTMLAttributes<HTMLDivElement> {\n /** Whether the overlay is shown. Setting it to `false` plays the exit and then unmounts. */\n open: boolean;\n /** Called when the backdrop is pressed. Presses that start inside the dialog do not call it. */\n onClose?: () => void;\n /**\n * Called once the exit finishes and the overlay has unmounted. Not called if\n * the overlay itself is unmounted before the exit finishes, so do any\n * cleanup on unmount as well.\n */\n onExited?: () => void;\n /**\n * Portal node. Defaults to `document.body`; pass another element so a modal\n * inside another top layer can join it. `null` renders nothing until the node\n * exists (e.g. a ref held in state). Override `position` through `style`\n * when the container is a positioned stage. Scroll lock applies to that\n * node's document.\n */\n container?: HTMLElement | null;\n /**\n * Lock `document.body` scroll while the overlay is mounted. Turn off for an\n * overlay staged inside a frame (docs, Storybook) so it doesn't freeze the page.\n */\n lockScroll?: boolean;\n /**\n * Stacking order. Defaults to `--z-modal` (1050, the webapp's modal layer)
|
|
1
|
+
{"version":3,"file":"ModalOverlay.cjs","sources":["../../../src/components/modal/ModalOverlay.tsx"],"sourcesContent":["import {\n useEffect,\n useRef,\n type HTMLAttributes,\n type MouseEvent,\n type ReactNode,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { usePopoverTransition } from '@/hooks/use-popover-transition';\nimport { mergeClassNames } from '@/utils/props';\nimport { lockBodyScroll } from '@/utils/scrollLock';\nimport { useOnExited } from '@/utils/useOnExited';\nimport styles from './ModalOverlay.module.scss';\n\nexport interface ModalOverlayProps extends HTMLAttributes<HTMLDivElement> {\n /** Whether the overlay is shown. Setting it to `false` plays the exit and then unmounts. */\n open: boolean;\n /** Called when the backdrop is pressed. Presses that start inside the dialog do not call it. */\n onClose?: () => void;\n /**\n * Called once the exit finishes and the overlay has unmounted. Not called if\n * the overlay itself is unmounted before the exit finishes, so do any\n * cleanup on unmount as well.\n */\n onExited?: () => void;\n /**\n * Portal node. Defaults to `document.body`; pass another element so a modal\n * inside another top layer can join it. `null` renders nothing until the node\n * exists (e.g. a ref held in state). Override `position` through `style`\n * when the container is a positioned stage. Scroll lock applies to that\n * node's document.\n */\n container?: HTMLElement | null;\n /**\n * Lock `document.body` scroll while the overlay is mounted. Turn off for an\n * overlay staged inside a frame (docs, Storybook) so it doesn't freeze the page.\n */\n lockScroll?: boolean;\n /**\n * Stacking order. Defaults to `--z-modal` (1050, the webapp's modal layer).\n * A confirm opened over another modal should pass `var(--z-confirm-modal)`\n * (1060); other host chrome that sits higher passes a value or redefines\n * `--z-modal`. Applied before `style`, so `style.zIndex` wins.\n */\n zIndex?: number | string;\n /** Usually a `Modal`. */\n children?: ReactNode;\n}\n\n/**\n * Modal scrim: portals to `document.body` (or `container`), locks body scroll\n * while shown (opt out with `lockScroll={false}`), closes on backdrop press, and stays mounted for\n * `--duration-quick` after `open` becomes false so the fade-out can play.\n * Escape and focus stay on `Modal`. Hosts that already position their own\n * node can use `modalOverlayStyles` instead.\n */\nexport default function ModalOverlay({\n open,\n onClose,\n onExited,\n container,\n lockScroll = true,\n zIndex,\n className,\n style,\n children,\n onMouseDown,\n onClick,\n ...rest\n}: ModalOverlayProps) {\n const { mounted } = usePopoverTransition(open);\n useOnExited(mounted, onExited);\n const pressStartedInside = useRef(false);\n\n const target =\n container === undefined\n ? typeof document === 'undefined'\n ? null\n : document.body\n : container;\n\n useEffect(() => {\n if (!mounted || !target || !lockScroll) return undefined;\n return lockBodyScroll(target.ownerDocument);\n }, [mounted, target, lockScroll]);\n\n if (!mounted || !target) return null;\n\n const handleMouseDown = (e: MouseEvent<HTMLDivElement>) => {\n pressStartedInside.current = e.target !== e.currentTarget;\n onMouseDown?.(e);\n };\n\n const handleClick = (e: MouseEvent<HTMLDivElement>) => {\n const startedInside = pressStartedInside.current;\n pressStartedInside.current = false;\n onClick?.(e);\n if (open && !startedInside && e.target === e.currentTarget) onClose?.();\n };\n\n return createPortal(\n // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions -- backdrop click is a pointer shortcut; keyboard users close with Escape (handled by Modal)\n <div\n {...rest}\n className={mergeClassNames(\n styles['modal-overlay'],\n !open && styles['modal-overlay--exiting'],\n className,\n )}\n style={{ ...(zIndex !== undefined && { zIndex }), ...style }}\n onMouseDown={handleMouseDown}\n onClick={handleClick}\n >\n {children}\n </div>,\n target,\n );\n}\n"],"names":["ModalOverlay","open","onClose","onExited","container","lockScroll","zIndex","className","style","children","onMouseDown","onClick","rest","mounted","usePopoverTransition","useOnExited","pressStartedInside","useRef","target","useEffect","lockBodyScroll","handleMouseDown","handleClick","startedInside","createPortal","jsx","mergeClassNames","styles"],"mappings":"6YAwDA,SAAwBA,EAAa,CACnC,KAAAC,EACA,QAAAC,EACA,SAAAC,EACA,UAAAC,EACA,WAAAC,EAAa,GACb,OAAAC,EACA,UAAAC,EACA,MAAAC,EACA,SAAAC,EACA,YAAAC,EACA,QAAAC,EACA,GAAGC,CACL,EAAsB,CACpB,KAAM,CAAE,QAAAC,CAAA,EAAYC,EAAAA,qBAAqBb,CAAI,EAC7Cc,EAAAA,YAAYF,EAASV,CAAQ,EAC7B,MAAMa,EAAqBC,EAAAA,OAAO,EAAK,EAEjCC,EACJd,IAAc,OACV,OAAO,SAAa,IAClB,KACA,SAAS,KACXA,EAON,GALAe,EAAAA,UAAU,IAAM,CACd,GAAI,GAACN,GAAW,CAACK,GAAU,CAACb,GAC5B,OAAOe,EAAAA,eAAeF,EAAO,aAAa,CAC5C,EAAG,CAACL,EAASK,EAAQb,CAAU,CAAC,EAE5B,CAACQ,GAAW,CAACK,EAAQ,OAAO,KAEhC,MAAMG,EAAmB,GAAkC,CACzDL,EAAmB,QAAU,EAAE,SAAW,EAAE,cAC5CN,GAAA,MAAAA,EAAc,EAChB,EAEMY,EAAe,GAAkC,CACrD,MAAMC,EAAgBP,EAAmB,QACzCA,EAAmB,QAAU,GAC7BL,GAAA,MAAAA,EAAU,GACNV,GAAQ,CAACsB,GAAiB,EAAE,SAAW,EAAE,gBAAerB,GAAA,MAAAA,IAC9D,EAEA,OAAOsB,EAAAA,aAELC,EAAAA,IAAC,MAAA,CACE,GAAGb,EACJ,UAAWc,EAAAA,gBACTC,EAAAA,QAAO,eAAe,EACtB,CAAC1B,GAAQ0B,EAAAA,QAAO,wBAAwB,EACxCpB,CAAA,EAEF,MAAO,CAAE,GAAID,IAAW,QAAa,CAAE,OAAAA,CAAA,EAAW,GAAGE,CAAA,EACrD,YAAaa,EACb,QAASC,EAER,SAAAb,CAAA,CAAA,EAEHS,CAAA,CAEJ"}
|
|
@@ -24,11 +24,12 @@ export interface ModalOverlayProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
24
24
|
*/
|
|
25
25
|
lockScroll?: boolean;
|
|
26
26
|
/**
|
|
27
|
-
* Stacking order. Defaults to `--z-modal` (1050, the webapp's modal layer)
|
|
28
|
-
*
|
|
29
|
-
*
|
|
27
|
+
* Stacking order. Defaults to `--z-modal` (1050, the webapp's modal layer).
|
|
28
|
+
* A confirm opened over another modal should pass `var(--z-confirm-modal)`
|
|
29
|
+
* (1060); other host chrome that sits higher passes a value or redefines
|
|
30
|
+
* `--z-modal`. Applied before `style`, so `style.zIndex` wins.
|
|
30
31
|
*/
|
|
31
|
-
zIndex?: number;
|
|
32
|
+
zIndex?: number | string;
|
|
32
33
|
/** Usually a `Modal`. */
|
|
33
34
|
children?: ReactNode;
|
|
34
35
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ModalOverlay.d.ts","sourceRoot":"","sources":["../../../src/components/modal/ModalOverlay.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,cAAc,EAEnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAQf,MAAM,WAAW,iBAAkB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACvE,4FAA4F;IAC5F,IAAI,EAAE,OAAO,CAAC;IACd,gGAAgG;IAChG,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC/B;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB
|
|
1
|
+
{"version":3,"file":"ModalOverlay.d.ts","sourceRoot":"","sources":["../../../src/components/modal/ModalOverlay.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,cAAc,EAEnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAQf,MAAM,WAAW,iBAAkB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACvE,4FAA4F;IAC5F,IAAI,EAAE,OAAO,CAAC;IACd,gGAAgG;IAChG,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC/B;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,yBAAyB;IACzB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,SAAS,EACT,UAAiB,EACjB,MAAM,EACN,SAAS,EACT,KAAK,EACL,QAAQ,EACR,WAAW,EACX,OAAO,EACP,GAAG,IAAI,EACR,EAAE,iBAAiB,sCAgDnB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ModalOverlay.js","sources":["../../../src/components/modal/ModalOverlay.tsx"],"sourcesContent":["import {\n useEffect,\n useRef,\n type HTMLAttributes,\n type MouseEvent,\n type ReactNode,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { usePopoverTransition } from '@/hooks/use-popover-transition';\nimport { mergeClassNames } from '@/utils/props';\nimport { lockBodyScroll } from '@/utils/scrollLock';\nimport { useOnExited } from '@/utils/useOnExited';\nimport styles from './ModalOverlay.module.scss';\n\nexport interface ModalOverlayProps extends HTMLAttributes<HTMLDivElement> {\n /** Whether the overlay is shown. Setting it to `false` plays the exit and then unmounts. */\n open: boolean;\n /** Called when the backdrop is pressed. Presses that start inside the dialog do not call it. */\n onClose?: () => void;\n /**\n * Called once the exit finishes and the overlay has unmounted. Not called if\n * the overlay itself is unmounted before the exit finishes, so do any\n * cleanup on unmount as well.\n */\n onExited?: () => void;\n /**\n * Portal node. Defaults to `document.body`; pass another element so a modal\n * inside another top layer can join it. `null` renders nothing until the node\n * exists (e.g. a ref held in state). Override `position` through `style`\n * when the container is a positioned stage. Scroll lock applies to that\n * node's document.\n */\n container?: HTMLElement | null;\n /**\n * Lock `document.body` scroll while the overlay is mounted. Turn off for an\n * overlay staged inside a frame (docs, Storybook) so it doesn't freeze the page.\n */\n lockScroll?: boolean;\n /**\n * Stacking order. Defaults to `--z-modal` (1050, the webapp's modal layer)
|
|
1
|
+
{"version":3,"file":"ModalOverlay.js","sources":["../../../src/components/modal/ModalOverlay.tsx"],"sourcesContent":["import {\n useEffect,\n useRef,\n type HTMLAttributes,\n type MouseEvent,\n type ReactNode,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { usePopoverTransition } from '@/hooks/use-popover-transition';\nimport { mergeClassNames } from '@/utils/props';\nimport { lockBodyScroll } from '@/utils/scrollLock';\nimport { useOnExited } from '@/utils/useOnExited';\nimport styles from './ModalOverlay.module.scss';\n\nexport interface ModalOverlayProps extends HTMLAttributes<HTMLDivElement> {\n /** Whether the overlay is shown. Setting it to `false` plays the exit and then unmounts. */\n open: boolean;\n /** Called when the backdrop is pressed. Presses that start inside the dialog do not call it. */\n onClose?: () => void;\n /**\n * Called once the exit finishes and the overlay has unmounted. Not called if\n * the overlay itself is unmounted before the exit finishes, so do any\n * cleanup on unmount as well.\n */\n onExited?: () => void;\n /**\n * Portal node. Defaults to `document.body`; pass another element so a modal\n * inside another top layer can join it. `null` renders nothing until the node\n * exists (e.g. a ref held in state). Override `position` through `style`\n * when the container is a positioned stage. Scroll lock applies to that\n * node's document.\n */\n container?: HTMLElement | null;\n /**\n * Lock `document.body` scroll while the overlay is mounted. Turn off for an\n * overlay staged inside a frame (docs, Storybook) so it doesn't freeze the page.\n */\n lockScroll?: boolean;\n /**\n * Stacking order. Defaults to `--z-modal` (1050, the webapp's modal layer).\n * A confirm opened over another modal should pass `var(--z-confirm-modal)`\n * (1060); other host chrome that sits higher passes a value or redefines\n * `--z-modal`. Applied before `style`, so `style.zIndex` wins.\n */\n zIndex?: number | string;\n /** Usually a `Modal`. */\n children?: ReactNode;\n}\n\n/**\n * Modal scrim: portals to `document.body` (or `container`), locks body scroll\n * while shown (opt out with `lockScroll={false}`), closes on backdrop press, and stays mounted for\n * `--duration-quick` after `open` becomes false so the fade-out can play.\n * Escape and focus stay on `Modal`. Hosts that already position their own\n * node can use `modalOverlayStyles` instead.\n */\nexport default function ModalOverlay({\n open,\n onClose,\n onExited,\n container,\n lockScroll = true,\n zIndex,\n className,\n style,\n children,\n onMouseDown,\n onClick,\n ...rest\n}: ModalOverlayProps) {\n const { mounted } = usePopoverTransition(open);\n useOnExited(mounted, onExited);\n const pressStartedInside = useRef(false);\n\n const target =\n container === undefined\n ? typeof document === 'undefined'\n ? null\n : document.body\n : container;\n\n useEffect(() => {\n if (!mounted || !target || !lockScroll) return undefined;\n return lockBodyScroll(target.ownerDocument);\n }, [mounted, target, lockScroll]);\n\n if (!mounted || !target) return null;\n\n const handleMouseDown = (e: MouseEvent<HTMLDivElement>) => {\n pressStartedInside.current = e.target !== e.currentTarget;\n onMouseDown?.(e);\n };\n\n const handleClick = (e: MouseEvent<HTMLDivElement>) => {\n const startedInside = pressStartedInside.current;\n pressStartedInside.current = false;\n onClick?.(e);\n if (open && !startedInside && e.target === e.currentTarget) onClose?.();\n };\n\n return createPortal(\n // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions -- backdrop click is a pointer shortcut; keyboard users close with Escape (handled by Modal)\n <div\n {...rest}\n className={mergeClassNames(\n styles['modal-overlay'],\n !open && styles['modal-overlay--exiting'],\n className,\n )}\n style={{ ...(zIndex !== undefined && { zIndex }), ...style }}\n onMouseDown={handleMouseDown}\n onClick={handleClick}\n >\n {children}\n </div>,\n target,\n );\n}\n"],"names":["ModalOverlay","open","onClose","onExited","container","lockScroll","zIndex","className","style","children","onMouseDown","onClick","rest","mounted","usePopoverTransition","useOnExited","pressStartedInside","useRef","target","useEffect","lockBodyScroll","handleMouseDown","e","handleClick","startedInside","createPortal","jsx","mergeClassNames","styles"],"mappings":";;;;;;;;AAwDA,SAAwBA,EAAa;AAAA,EACnC,MAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,aAAAC;AAAA,EACA,SAAAC;AAAA,EACA,GAAGC;AACL,GAAsB;AACpB,QAAM,EAAE,SAAAC,EAAA,IAAYC,EAAqBb,CAAI;AAC7C,EAAAc,EAAYF,GAASV,CAAQ;AAC7B,QAAMa,IAAqBC,EAAO,EAAK,GAEjCC,IACJd,MAAc,SACV,OAAO,WAAa,MAClB,OACA,SAAS,OACXA;AAON,MALAe,EAAU,MAAM;AACd,QAAI,GAACN,KAAW,CAACK,KAAU,CAACb;AAC5B,aAAOe,EAAeF,EAAO,aAAa;AAAA,EAC5C,GAAG,CAACL,GAASK,GAAQb,CAAU,CAAC,GAE5B,CAACQ,KAAW,CAACK,EAAQ,QAAO;AAEhC,QAAMG,IAAkB,CAACC,MAAkC;AACzD,IAAAN,EAAmB,UAAUM,EAAE,WAAWA,EAAE,eAC5CZ,KAAA,QAAAA,EAAcY;AAAA,EAChB,GAEMC,IAAc,CAACD,MAAkC;AACrD,UAAME,IAAgBR,EAAmB;AACzC,IAAAA,EAAmB,UAAU,IAC7BL,KAAA,QAAAA,EAAUW,IACNrB,KAAQ,CAACuB,KAAiBF,EAAE,WAAWA,EAAE,kBAAepB,KAAA,QAAAA;AAAA,EAC9D;AAEA,SAAOuB;AAAA;AAAA,IAEL,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAGd;AAAA,QACJ,WAAWe;AAAA,UACTC,EAAO,eAAe;AAAA,UACtB,CAAC3B,KAAQ2B,EAAO,wBAAwB;AAAA,UACxCrB;AAAA,QAAA;AAAA,QAEF,OAAO,EAAE,GAAID,MAAW,UAAa,EAAE,QAAAA,EAAA,GAAW,GAAGE,EAAA;AAAA,QACrD,aAAaa;AAAA,QACb,SAASE;AAAA,QAER,UAAAd;AAAA,MAAA;AAAA,IAAA;AAAA,IAEHS;AAAA,EAAA;AAEJ;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mattermost/compass-ui",
|
|
3
|
-
"version": "0.1.0-alpha.
|
|
3
|
+
"version": "0.1.0-alpha.30",
|
|
4
4
|
"description": "Compass design system UI components for Mattermost products",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -62,7 +62,7 @@
|
|
|
62
62
|
"build-storybook": "storybook build"
|
|
63
63
|
},
|
|
64
64
|
"peerDependencies": {
|
|
65
|
-
"@mattermost/compass-icons": "^0.1.
|
|
65
|
+
"@mattermost/compass-icons": "^0.1.65",
|
|
66
66
|
"react": "^18.2.0 || ^19.0.0",
|
|
67
67
|
"react-dom": "^18.2.0 || ^19.0.0",
|
|
68
68
|
"simplebar-react": "^3.3.2"
|
|
@@ -70,7 +70,7 @@
|
|
|
70
70
|
"devDependencies": {
|
|
71
71
|
"@fontsource/metropolis": "^5.2.5",
|
|
72
72
|
"@fontsource/open-sans": "^5.2.7",
|
|
73
|
-
"@mattermost/compass-icons": "^0.1.
|
|
73
|
+
"@mattermost/compass-icons": "^0.1.65",
|
|
74
74
|
"@storybook/addon-essentials": "^8.6.14",
|
|
75
75
|
"@storybook/addon-interactions": "^8.6.14",
|
|
76
76
|
"@storybook/react": "^8.6.14",
|