npm - @doist/reactist - Versions diffs - 25.0.0-beta.3 → 25.1.0 - Mend

@doist/reactist 25.0.0-beta.3 → 25.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (15) hide show

package/dist/reactist.cjs.development.js +1 -1
package/dist/reactist.cjs.development.js.map +1 -1
package/dist/reactist.cjs.production.min.js +1 -1
package/dist/reactist.cjs.production.min.js.map +1 -1
package/es/modal/modal.js.map +1 -1
package/es/modal/modal.module.css.js +1 -1
package/lib/modal/modal.d.ts +1 -1
package/lib/modal/modal.js.map +1 -1
package/lib/modal/modal.module.css.js +1 -1
package/package.json +1 -1
package/styles/modal.css +1 -1
package/styles/modal.module.css.css +1 -1
package/styles/reactist.css +1 -1
/package/styles/{box.css → inline.css} +0 -0
/package/styles/{divider.css → stack.css} +0 -0

package/es/modal/modal.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"modal.js","sources":["../../src/modal/modal.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport FocusLock from 'react-focus-lock'\nimport { hideOthers } from 'aria-hidden'\n\nimport { Dialog, DialogOptions, useDialogStore, Portal, PortalOptions } from '@ariakit/react'\n\nimport { CloseIcon } from '../icons/close-icon'\nimport { Column, Columns } from '../columns'\nimport { Inline } from '../inline'\nimport { Divider } from '../divider'\nimport { Box } from '../box'\nimport { IconButtonProps, IconButton } from '../button'\n\nimport styles from './modal.module.css'\nimport type { ObfuscatedClassName } from '../utils/common-types'\n\ntype ModalWidth = 'small' \| 'medium' \| 'large' \| 'xlarge' \| 'full'\ntype ModalHeightMode = 'expand' \| 'fitContent'\n\n//\n// ModalContext\n//\n\ntype ModalContextValue = {\n onDismiss?(this: void): void\n height: ModalHeightMode\n}\n\nconst ModalContext = React.createContext<ModalContextValue>({\n onDismiss: undefined,\n height: 'fitContent',\n})\n\n//\n// Modal container\n//\n\ntype DivProps = Omit<\n React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLDivElement>, HTMLDivElement>,\n 'className' \| 'children' \| `aria-label` \| `aria-labelledby`\n>\n\nexport interface ModalProps extends DivProps, ObfuscatedClassName {\n /*\n The content of the modal.\n /\n children: React.ReactNode\n\n /\n Whether the modal is open and visible or not.\n /\n isOpen: boolean\n\n /\n Called when the user triggers closing the modal.\n /\n onDismiss?(): void\n\n /\n A descriptive setting for how wide the modal should aim to be, depending on how much space\n * it has on screen.\n * @default 'medium'\n /\n width?: ModalWidth\n\n /\n A descriptive setting for how tall the modal should aim to be.\n \n - 'expand': the modal aims to fill most of the available screen height, leaving only a small\n * padding above and below.\n * - 'fitContent': the modal shrinks to the smallest size that allow it to fit its content.\n \n In either case, if content does not fit, the content of the main body is set to scroll\n * (provided you use `ModalBody`) so that the modal never has to strech vertically beyond the\n * viewport boundaries.\n \n If you do not use `ModalBody`, the modal still prevents overflow, and you are in charge of\n * the inner layout to ensure scroll, or whatever other strategy you may want.\n /\n height?: ModalHeightMode\n\n /\n Whether to set or not the focus initially to the first focusable element inside the modal.\n /\n autoFocus?: boolean\n\n /\n Controls if the modal is dismissed when pressing \"Escape\".\n /\n hideOnEscape?: DialogOptions['hideOnEscape']\n\n /\n Controls if the modal is dismissed when clicking outside the modal body, on the overlay.\n /\n hideOnInteractOutside?: DialogOptions['hideOnInteractOutside']\n\n /\n An escape hatch in case you need to provide a custom class name to the overlay element.\n /\n exceptionallySetOverlayClassName?: string\n\n /\n Defines a string value that labels the current modal for assistive technologies.\n /\n 'aria-label'?: string\n\n /\n Identifies the element (or elements) that labels the current modal for assistive technologies.\n /\n 'aria-labelledby'?: string\n\n /\n An HTML element or a memoized callback function that returns an HTML element to be used as\n * the portal element. By default, the portal element will be a `div` element appended to the\n * `document.body`.\n \n @default HTMLDivElement\n \n @example\n * const [portal, setPortal] = useState(null);\n * <Portal portalElement={portal} />;\n * <div ref={setPortal} />;\n \n @example\n * const getPortalElement = useCallback(() => {\n * const div = document.createElement(\"div\");\n * const portalRoot = document.getElementById(\"portal-root\");\n * portalRoot.appendChild(div);\n * return div;\n * }, []);\n * <Portal portalElement={getPortalElement} />;\n /\n portalElement?: PortalOptions['portalElement']\n}\n\nfunction isNotInternalFrame(element: HTMLElement) {\n return !(element.ownerDocument === document && element.tagName.toLowerCase() === 'iframe')\n}\n\n/\n Renders a modal that sits on top of the rest of the content in the entire page.\n \n Follows the WAI-ARIA Dialog (Modal) Pattern.\n \n @see ModalHeader\n * @see ModalFooter\n * @see ModalBody\n /\nexport function Modal({\n isOpen,\n onDismiss,\n height = 'fitContent',\n width = 'medium',\n exceptionallySetClassName,\n exceptionallySetOverlayClassName,\n autoFocus = true,\n hideOnEscape = true,\n hideOnInteractOutside = true,\n children,\n portalElement,\n onKeyDown,\n // @ts-expect-error we want to make sure to not pass it to the Dialog component\n className,\n ...props\n}: ModalProps) {\n const setOpen = React.useCallback(\n (visible: boolean) => {\n if (!visible) {\n onDismiss?.()\n }\n },\n [onDismiss],\n )\n const store = useDialogStore({ open: isOpen, setOpen })\n\n const contextValue: ModalContextValue = React.useMemo(() => ({ onDismiss, height }), [\n onDismiss,\n height,\n ])\n\n const portalRef = React.useRef<HTMLElement \| null>(null)\n const dialogRef = React.useRef<HTMLDivElement \| null>(null)\n const backdropRef = React.useRef<HTMLDivElement \| null>(null)\n const handleBackdropClick = React.useCallback(\n (event: React.MouseEvent) => {\n if (\n // The focus lock element takes up the same space as the backdrop and is where the event bubbles up from,\n // so instead of checking the backdrop as the event target, we need to make sure it's just above the dialog\n !dialogRef.current?.contains(event.target as Node) &&\n // Events fired from other portals will bubble up to the backdrop, even if it isn't a child in the DOM\n backdropRef.current?.contains(event.target as Node)\n ) {\n event.stopPropagation()\n onDismiss?.()\n }\n },\n [onDismiss],\n )\n\n React.useLayoutEffect(\n function disableAccessibilityTreeOutside() {\n if (!isOpen \|\| !portalRef.current) {\n return\n }\n\n return hideOthers(portalRef.current)\n },\n [isOpen],\n )\n\n const handleKeyDown = React.useCallback(\n function handleKeyDown(event: React.KeyboardEvent<HTMLDivElement>) {\n if (\n hideOnEscape &&\n onDismiss != null &&\n event.key === 'Escape' &&\n !event.defaultPrevented\n ) {\n event.stopPropagation()\n onDismiss()\n }\n onKeyDown?.(event)\n },\n [onDismiss, hideOnEscape, onKeyDown],\n )\n\n if (!isOpen) {\n return null\n }\n\n return (\n <Portal portalRef={portalRef} portalElement={portalElement}>\n <Box\n data-testid=\"modal-overlay\"\n data-overlay\n className={classNames(\n styles.overlay,\n styles[height],\n styles[width],\n exceptionallySetOverlayClassName,\n )}\n /\n We're using `onPointerDown` instead of `onClick` to prevent the modal from\n * closing when the click starts inside the modal and ends on the backdrop.\n /\n onPointerDown={hideOnInteractOutside ? handleBackdropClick : undefined}\n ref={backdropRef}\n >\n <FocusLock autoFocus={autoFocus} whiteList={isNotInternalFrame} returnFocus={true}>\n <Dialog\n {...props}\n ref={dialogRef}\n render={\n <Box\n borderRadius=\"full\"\n background=\"default\"\n display=\"flex\"\n flexDirection=\"column\"\n overflow=\"hidden\"\n height={height === 'expand' ? 'full' : undefined}\n flexGrow={height === 'expand' ? 1 : 0}\n />\n }\n className={classNames(exceptionallySetClassName, styles.container)}\n store={store}\n preventBodyScroll\n // Disable focus lock as we set up our own using ReactFocusLock\n modal={false}\n autoFocus={false}\n autoFocusOnShow={false}\n autoFocusOnHide={false}\n // Disable portal and backdrop as we control their markup\n portal={false}\n backdrop={false}\n hideOnInteractOutside={false}\n hideOnEscape={false}\n onKeyDown={handleKeyDown}\n >\n <ModalContext.Provider value={contextValue}>\n {children}\n </ModalContext.Provider>\n </Dialog>\n </FocusLock>\n </Box>\n </Portal>\n )\n}\n\n//\n// ModalCloseButton\n//\n\nexport interface ModalCloseButtonProps\n extends Omit<\n IconButtonProps,\n 'type' \| 'variant' \| 'icon' \| 'disabled' \| 'loading' \| 'tabIndex' \| 'ref'\n > {\n /\n The descriptive label of the button.\n /\n 'aria-label': string\n}\n\n/\n The close button rendered by ModalHeader. Provided independently so that consumers can customize\n * the button's label.\n \n @see ModalHeader\n /\nexport function ModalCloseButton(props: ModalCloseButtonProps) {\n const { onDismiss } = React.useContext(ModalContext)\n const [includeInTabOrder, setIncludeInTabOrder] = React.useState(false)\n const [isMounted, setIsMounted] = React.useState(false)\n\n React.useEffect(\n function skipAutoFocus() {\n if (isMounted) {\n setIncludeInTabOrder(true)\n } else {\n setIsMounted(true)\n }\n },\n [isMounted],\n )\n\n return (\n <IconButton\n {...props}\n variant=\"quaternary\"\n onClick={onDismiss}\n icon={<CloseIcon />}\n tabIndex={includeInTabOrder ? 0 : -1}\n />\n )\n}\n\n//\n// ModalHeader\n//\n\nexport interface ModalHeaderProps extends DivProps, ObfuscatedClassName {\n /\n The content of the header.\n /\n children: React.ReactNode\n\n /\n Allows to provide a custom button element, or to omit the close button if set to false.\n * @see ModalCloseButton\n /\n button?: React.ReactNode \| boolean\n\n /\n Whether to render a divider line below the header.\n * @default false\n /\n withDivider?: boolean\n}\n\n/\n Renders a standard modal header area with an optional close button.\n \n @see Modal\n * @see ModalFooter\n * @see ModalBody\n /\nexport function ModalHeader({\n children,\n button = true,\n withDivider = false,\n exceptionallySetClassName,\n ...props\n}: ModalHeaderProps) {\n return (\n <>\n <Box\n {...props}\n as=\"header\"\n paddingLeft=\"large\"\n paddingRight={button === false \|\| button === null ? 'large' : 'small'}\n paddingY=\"small\"\n className={exceptionallySetClassName}\n >\n <Columns space=\"large\" alignY=\"center\">\n <Column width=\"auto\">{children}</Column>\n {button === false \|\| button === null ? (\n <div className={styles.headerContent} />\n ) : (\n <Column\n width=\"content\"\n exceptionallySetClassName={styles.buttonContainer}\n data-testid=\"button-container\"\n >\n {typeof button === 'boolean' ? (\n <ModalCloseButton aria-label=\"Close modal\" autoFocus={false} />\n ) : (\n button\n )}\n </Column>\n )}\n </Columns>\n </Box>\n {withDivider ? <Divider /> : null}\n </>\n )\n}\n\n//\n// ModalBody\n//\n\nexport interface ModalBodyProps extends DivProps, ObfuscatedClassName {\n /\n The content of the modal body.\n /\n children: React.ReactNode\n}\n\n/\n Renders the body of a modal.\n \n Convenient to use alongside ModalHeader and/or ModalFooter as needed. It ensures, among other\n * things, that the contet of the modal body expands or contracts depending on the modal height\n * setting or the size of the content. The body content also automatically scrolls when it's too\n * large to fit the available space.\n \n @see Modal\n * @see ModalHeader\n * @see ModalFooter\n /\nexport function ModalBody({ exceptionallySetClassName, children, ...props }: ModalBodyProps) {\n const { height } = React.useContext(ModalContext)\n return (\n <Box\n {...props}\n className={exceptionallySetClassName}\n flexGrow={height === 'expand' ? 1 : 0}\n height={height === 'expand' ? 'full' : undefined}\n overflow=\"auto\"\n >\n <Box padding=\"large\" paddingBottom=\"xxlarge\">\n {children}\n </Box>\n </Box>\n )\n}\n\n//\n// ModalFooter\n//\n\nexport interface ModalFooterProps extends DivProps, ObfuscatedClassName {\n /\n The contant of the modal footer.\n /\n children: React.ReactNode\n /\n Whether to render a divider line below the footer.\n * @default false\n /\n withDivider?: boolean\n}\n\n/\n Renders a standard modal footer area.\n \n @see Modal\n * @see ModalHeader\n * @see ModalBody\n /\nexport function ModalFooter({\n exceptionallySetClassName,\n withDivider = false,\n ...props\n}: ModalFooterProps) {\n return (\n <>\n {withDivider ? <Divider /> : null}\n <Box as=\"footer\" {...props} className={exceptionallySetClassName} padding=\"large\" />\n </>\n )\n}\n\n//\n// ModalActions\n//\n\nexport type ModalActionsProps = ModalFooterProps\n\n/\n A specific version of the ModalFooter, tailored to showing an inline list of actions (buttons).\n * @see ModalFooter\n */\nexport function ModalActions({ children, ...props }: ModalActionsProps) {\n return (\n <ModalFooter {...props}>\n <Inline align=\"right\" space=\"large\">\n {children}\n </Inline>\n </ModalFooter>\n )\n}\n"],"names":["ModalContext","React","createContext","onDismiss","undefined","height","isNotInternalFrame","element","ownerDocument","document","tagName","toLowerCase","Modal","isOpen","width","exceptionallySetClassName","exceptionallySetOverlayClassName","autoFocus","hideOnEscape","hideOnInteractOutside","children","portalElement","onKeyDown","className","props","setOpen","useCallback","visible","store","useDialogStore","open","contextValue","useMemo","portalRef","useRef","dialogRef","backdropRef","handleBackdropClick","event","current","contains","target","stopPropagation","useLayoutEffect","disableAccessibilityTreeOutside","hideOthers","handleKeyDown","key","defaultPrevented","createElement","Portal","Box","classNames","styles","overlay","onPointerDown","ref","FocusLock","whiteList","returnFocus","Dialog","render","borderRadius","background","display","flexDirection","overflow","flexGrow","container","preventBodyScroll","modal","autoFocusOnShow","autoFocusOnHide","portal","backdrop","Provider","value","ModalCloseButton","useContext","includeInTabOrder","setIncludeInTabOrder","useState","isMounted","setIsMounted","useEffect","skipAutoFocus","IconButton","variant","onClick","icon","CloseIcon","tabIndex","ModalHeader","button","withDivider","Fragment","as","paddingLeft","paddingRight","paddingY","Columns","space","alignY","Column","headerContent","buttonContainer","Divider","ModalBody","padding","paddingBottom","ModalFooter","_objectSpread","ModalActions","Inline","align"],"mappings":"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"}
1	+ {"version":3,"file":"modal.js","sources":["../../src/modal/modal.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport FocusLock from 'react-focus-lock'\nimport { hideOthers } from 'aria-hidden'\n\nimport { Dialog, DialogOptions, useDialogStore, Portal, PortalOptions } from '@ariakit/react'\n\nimport { CloseIcon } from '../icons/close-icon'\nimport { Column, Columns } from '../columns'\nimport { Inline } from '../inline'\nimport { Divider } from '../divider'\nimport { Box } from '../box'\nimport { IconButtonProps, IconButton } from '../button'\n\nimport styles from './modal.module.css'\nimport type { ObfuscatedClassName } from '../utils/common-types'\n\ntype ModalWidth = 'xsmall' \| 'small' \| 'medium' \| 'large' \| 'xlarge' \| 'full'\ntype ModalHeightMode = 'expand' \| 'fitContent'\n\n//\n// ModalContext\n//\n\ntype ModalContextValue = {\n onDismiss?(this: void): void\n height: ModalHeightMode\n}\n\nconst ModalContext = React.createContext<ModalContextValue>({\n onDismiss: undefined,\n height: 'fitContent',\n})\n\n//\n// Modal container\n//\n\ntype DivProps = Omit<\n React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLDivElement>, HTMLDivElement>,\n 'className' \| 'children' \| `aria-label` \| `aria-labelledby`\n>\n\nexport interface ModalProps extends DivProps, ObfuscatedClassName {\n /*\n The content of the modal.\n /\n children: React.ReactNode\n\n /\n Whether the modal is open and visible or not.\n /\n isOpen: boolean\n\n /\n Called when the user triggers closing the modal.\n /\n onDismiss?(): void\n\n /\n A descriptive setting for how wide the modal should aim to be, depending on how much space\n * it has on screen.\n * @default 'medium'\n /\n width?: ModalWidth\n\n /\n A descriptive setting for how tall the modal should aim to be.\n \n - 'expand': the modal aims to fill most of the available screen height, leaving only a small\n * padding above and below.\n * - 'fitContent': the modal shrinks to the smallest size that allow it to fit its content.\n \n In either case, if content does not fit, the content of the main body is set to scroll\n * (provided you use `ModalBody`) so that the modal never has to strech vertically beyond the\n * viewport boundaries.\n \n If you do not use `ModalBody`, the modal still prevents overflow, and you are in charge of\n * the inner layout to ensure scroll, or whatever other strategy you may want.\n /\n height?: ModalHeightMode\n\n /\n Whether to set or not the focus initially to the first focusable element inside the modal.\n /\n autoFocus?: boolean\n\n /\n Controls if the modal is dismissed when pressing \"Escape\".\n /\n hideOnEscape?: DialogOptions['hideOnEscape']\n\n /\n Controls if the modal is dismissed when clicking outside the modal body, on the overlay.\n /\n hideOnInteractOutside?: DialogOptions['hideOnInteractOutside']\n\n /\n An escape hatch in case you need to provide a custom class name to the overlay element.\n /\n exceptionallySetOverlayClassName?: string\n\n /\n Defines a string value that labels the current modal for assistive technologies.\n /\n 'aria-label'?: string\n\n /\n Identifies the element (or elements) that labels the current modal for assistive technologies.\n /\n 'aria-labelledby'?: string\n\n /\n An HTML element or a memoized callback function that returns an HTML element to be used as\n * the portal element. By default, the portal element will be a `div` element appended to the\n * `document.body`.\n \n @default HTMLDivElement\n \n @example\n * const [portal, setPortal] = useState(null);\n * <Portal portalElement={portal} />;\n * <div ref={setPortal} />;\n \n @example\n * const getPortalElement = useCallback(() => {\n * const div = document.createElement(\"div\");\n * const portalRoot = document.getElementById(\"portal-root\");\n * portalRoot.appendChild(div);\n * return div;\n * }, []);\n * <Portal portalElement={getPortalElement} />;\n /\n portalElement?: PortalOptions['portalElement']\n}\n\nfunction isNotInternalFrame(element: HTMLElement) {\n return !(element.ownerDocument === document && element.tagName.toLowerCase() === 'iframe')\n}\n\n/\n Renders a modal that sits on top of the rest of the content in the entire page.\n \n Follows the WAI-ARIA Dialog (Modal) Pattern.\n \n @see ModalHeader\n * @see ModalFooter\n * @see ModalBody\n /\nexport function Modal({\n isOpen,\n onDismiss,\n height = 'fitContent',\n width = 'medium',\n exceptionallySetClassName,\n exceptionallySetOverlayClassName,\n autoFocus = true,\n hideOnEscape = true,\n hideOnInteractOutside = true,\n children,\n portalElement,\n onKeyDown,\n // @ts-expect-error we want to make sure to not pass it to the Dialog component\n className,\n ...props\n}: ModalProps) {\n const setOpen = React.useCallback(\n (visible: boolean) => {\n if (!visible) {\n onDismiss?.()\n }\n },\n [onDismiss],\n )\n const store = useDialogStore({ open: isOpen, setOpen })\n\n const contextValue: ModalContextValue = React.useMemo(() => ({ onDismiss, height }), [\n onDismiss,\n height,\n ])\n\n const portalRef = React.useRef<HTMLElement \| null>(null)\n const dialogRef = React.useRef<HTMLDivElement \| null>(null)\n const backdropRef = React.useRef<HTMLDivElement \| null>(null)\n const handleBackdropClick = React.useCallback(\n (event: React.MouseEvent) => {\n if (\n // The focus lock element takes up the same space as the backdrop and is where the event bubbles up from,\n // so instead of checking the backdrop as the event target, we need to make sure it's just above the dialog\n !dialogRef.current?.contains(event.target as Node) &&\n // Events fired from other portals will bubble up to the backdrop, even if it isn't a child in the DOM\n backdropRef.current?.contains(event.target as Node)\n ) {\n event.stopPropagation()\n onDismiss?.()\n }\n },\n [onDismiss],\n )\n\n React.useLayoutEffect(\n function disableAccessibilityTreeOutside() {\n if (!isOpen \|\| !portalRef.current) {\n return\n }\n\n return hideOthers(portalRef.current)\n },\n [isOpen],\n )\n\n const handleKeyDown = React.useCallback(\n function handleKeyDown(event: React.KeyboardEvent<HTMLDivElement>) {\n if (\n hideOnEscape &&\n onDismiss != null &&\n event.key === 'Escape' &&\n !event.defaultPrevented\n ) {\n event.stopPropagation()\n onDismiss()\n }\n onKeyDown?.(event)\n },\n [onDismiss, hideOnEscape, onKeyDown],\n )\n\n if (!isOpen) {\n return null\n }\n\n return (\n <Portal portalRef={portalRef} portalElement={portalElement}>\n <Box\n data-testid=\"modal-overlay\"\n data-overlay\n className={classNames(\n styles.overlay,\n styles[height],\n styles[width],\n exceptionallySetOverlayClassName,\n )}\n /\n We're using `onPointerDown` instead of `onClick` to prevent the modal from\n * closing when the click starts inside the modal and ends on the backdrop.\n /\n onPointerDown={hideOnInteractOutside ? handleBackdropClick : undefined}\n ref={backdropRef}\n >\n <FocusLock autoFocus={autoFocus} whiteList={isNotInternalFrame} returnFocus={true}>\n <Dialog\n {...props}\n ref={dialogRef}\n render={\n <Box\n borderRadius=\"full\"\n background=\"default\"\n display=\"flex\"\n flexDirection=\"column\"\n overflow=\"hidden\"\n height={height === 'expand' ? 'full' : undefined}\n flexGrow={height === 'expand' ? 1 : 0}\n />\n }\n className={classNames(exceptionallySetClassName, styles.container)}\n store={store}\n preventBodyScroll\n // Disable focus lock as we set up our own using ReactFocusLock\n modal={false}\n autoFocus={false}\n autoFocusOnShow={false}\n autoFocusOnHide={false}\n // Disable portal and backdrop as we control their markup\n portal={false}\n backdrop={false}\n hideOnInteractOutside={false}\n hideOnEscape={false}\n onKeyDown={handleKeyDown}\n >\n <ModalContext.Provider value={contextValue}>\n {children}\n </ModalContext.Provider>\n </Dialog>\n </FocusLock>\n </Box>\n </Portal>\n )\n}\n\n//\n// ModalCloseButton\n//\n\nexport interface ModalCloseButtonProps\n extends Omit<\n IconButtonProps,\n 'type' \| 'variant' \| 'icon' \| 'disabled' \| 'loading' \| 'tabIndex' \| 'ref'\n > {\n /\n The descriptive label of the button.\n /\n 'aria-label': string\n}\n\n/\n The close button rendered by ModalHeader. Provided independently so that consumers can customize\n * the button's label.\n \n @see ModalHeader\n /\nexport function ModalCloseButton(props: ModalCloseButtonProps) {\n const { onDismiss } = React.useContext(ModalContext)\n const [includeInTabOrder, setIncludeInTabOrder] = React.useState(false)\n const [isMounted, setIsMounted] = React.useState(false)\n\n React.useEffect(\n function skipAutoFocus() {\n if (isMounted) {\n setIncludeInTabOrder(true)\n } else {\n setIsMounted(true)\n }\n },\n [isMounted],\n )\n\n return (\n <IconButton\n {...props}\n variant=\"quaternary\"\n onClick={onDismiss}\n icon={<CloseIcon />}\n tabIndex={includeInTabOrder ? 0 : -1}\n />\n )\n}\n\n//\n// ModalHeader\n//\n\nexport interface ModalHeaderProps extends DivProps, ObfuscatedClassName {\n /\n The content of the header.\n /\n children: React.ReactNode\n\n /\n Allows to provide a custom button element, or to omit the close button if set to false.\n * @see ModalCloseButton\n /\n button?: React.ReactNode \| boolean\n\n /\n Whether to render a divider line below the header.\n * @default false\n /\n withDivider?: boolean\n}\n\n/\n Renders a standard modal header area with an optional close button.\n \n @see Modal\n * @see ModalFooter\n * @see ModalBody\n /\nexport function ModalHeader({\n children,\n button = true,\n withDivider = false,\n exceptionallySetClassName,\n ...props\n}: ModalHeaderProps) {\n return (\n <>\n <Box\n {...props}\n as=\"header\"\n paddingLeft=\"large\"\n paddingRight={button === false \|\| button === null ? 'large' : 'small'}\n paddingY=\"small\"\n className={exceptionallySetClassName}\n >\n <Columns space=\"large\" alignY=\"center\">\n <Column width=\"auto\">{children}</Column>\n {button === false \|\| button === null ? (\n <div className={styles.headerContent} />\n ) : (\n <Column\n width=\"content\"\n exceptionallySetClassName={styles.buttonContainer}\n data-testid=\"button-container\"\n >\n {typeof button === 'boolean' ? (\n <ModalCloseButton aria-label=\"Close modal\" autoFocus={false} />\n ) : (\n button\n )}\n </Column>\n )}\n </Columns>\n </Box>\n {withDivider ? <Divider /> : null}\n </>\n )\n}\n\n//\n// ModalBody\n//\n\nexport interface ModalBodyProps extends DivProps, ObfuscatedClassName {\n /\n The content of the modal body.\n /\n children: React.ReactNode\n}\n\n/\n Renders the body of a modal.\n \n Convenient to use alongside ModalHeader and/or ModalFooter as needed. It ensures, among other\n * things, that the contet of the modal body expands or contracts depending on the modal height\n * setting or the size of the content. The body content also automatically scrolls when it's too\n * large to fit the available space.\n \n @see Modal\n * @see ModalHeader\n * @see ModalFooter\n /\nexport function ModalBody({ exceptionallySetClassName, children, ...props }: ModalBodyProps) {\n const { height } = React.useContext(ModalContext)\n return (\n <Box\n {...props}\n className={exceptionallySetClassName}\n flexGrow={height === 'expand' ? 1 : 0}\n height={height === 'expand' ? 'full' : undefined}\n overflow=\"auto\"\n >\n <Box padding=\"large\" paddingBottom=\"xxlarge\">\n {children}\n </Box>\n </Box>\n )\n}\n\n//\n// ModalFooter\n//\n\nexport interface ModalFooterProps extends DivProps, ObfuscatedClassName {\n /\n The contant of the modal footer.\n /\n children: React.ReactNode\n /\n Whether to render a divider line below the footer.\n * @default false\n /\n withDivider?: boolean\n}\n\n/\n Renders a standard modal footer area.\n \n @see Modal\n * @see ModalHeader\n * @see ModalBody\n /\nexport function ModalFooter({\n exceptionallySetClassName,\n withDivider = false,\n ...props\n}: ModalFooterProps) {\n return (\n <>\n {withDivider ? <Divider /> : null}\n <Box as=\"footer\" {...props} className={exceptionallySetClassName} padding=\"large\" />\n </>\n )\n}\n\n//\n// ModalActions\n//\n\nexport type ModalActionsProps = ModalFooterProps\n\n/\n A specific version of the ModalFooter, tailored to showing an inline list of actions (buttons).\n * @see ModalFooter\n */\nexport function ModalActions({ children, ...props }: ModalActionsProps) {\n return (\n <ModalFooter {...props}>\n <Inline align=\"right\" space=\"large\">\n {children}\n </Inline>\n </ModalFooter>\n )\n}\n"],"names":["ModalContext","React","createContext","onDismiss","undefined","height","isNotInternalFrame","element","ownerDocument","document","tagName","toLowerCase","Modal","isOpen","width","exceptionallySetClassName","exceptionallySetOverlayClassName","autoFocus","hideOnEscape","hideOnInteractOutside","children","portalElement","onKeyDown","className","props","setOpen","useCallback","visible","store","useDialogStore","open","contextValue","useMemo","portalRef","useRef","dialogRef","backdropRef","handleBackdropClick","event","current","contains","target","stopPropagation","useLayoutEffect","disableAccessibilityTreeOutside","hideOthers","handleKeyDown","key","defaultPrevented","createElement","Portal","Box","classNames","styles","overlay","onPointerDown","ref","FocusLock","whiteList","returnFocus","Dialog","render","borderRadius","background","display","flexDirection","overflow","flexGrow","container","preventBodyScroll","modal","autoFocusOnShow","autoFocusOnHide","portal","backdrop","Provider","value","ModalCloseButton","useContext","includeInTabOrder","setIncludeInTabOrder","useState","isMounted","setIsMounted","useEffect","skipAutoFocus","IconButton","variant","onClick","icon","CloseIcon","tabIndex","ModalHeader","button","withDivider","Fragment","as","paddingLeft","paddingRight","paddingY","Columns","space","alignY","Column","headerContent","buttonContainer","Divider","ModalBody","padding","paddingBottom","ModalFooter","_objectSpread","ModalActions","Inline","align"],"mappings":"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"}

package/es/modal/modal.module.css.js CHANGED Viewed

@@ -1,4 +1,4 @@
-var modules_8f59d13b = {"overlay":"_8aa86dd3","fadein":"_20c07ee6","fitContent":"_713bc08f","container":"_45139719","full":"ec8619a2","large":"_86a1d5a4","medium":"_11d61de3","small":"aee19643","xlarge":"fe449c81","expand":"_61ffb38f","buttonContainer":"_49ffdac0","headerContent":"ee92ccb3"};
+var modules_8f59d13b = {"overlay":"_756b318e","fadein":"_21966801","fitContent":"_52bde55e","container":"_46152754","full":"bf469f5d","large":"_3208ba07","medium":"_29f86ad4","small":"_64c0762d","xsmall":"_3196b4d0","xlarge":"_3517025e","expand":"_8d20cc11","buttonContainer":"_37ed43a6","headerContent":"_7df92d5c"};
 export { modules_8f59d13b as default };
 //# sourceMappingURL=modal.module.css.js.map

package/lib/modal/modal.d.ts CHANGED Viewed

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { DialogOptions, PortalOptions } from '@ariakit/react';
 import { IconButtonProps } from '../button';
 import type { ObfuscatedClassName } from '../utils/common-types';
-type ModalWidth = 'small' | 'medium' | 'large' | 'xlarge' | 'full';
+type ModalWidth = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'full';
 type ModalHeightMode = 'expand' | 'fitContent';
 type DivProps = Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'className' | 'children' | `aria-label` | `aria-labelledby`>;
 export interface ModalProps extends DivProps, ObfuscatedClassName {

package/lib/modal/modal.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"modal.js","sources":["../../src/modal/modal.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport FocusLock from 'react-focus-lock'\nimport { hideOthers } from 'aria-hidden'\n\nimport { Dialog, DialogOptions, useDialogStore, Portal, PortalOptions } from '@ariakit/react'\n\nimport { CloseIcon } from '../icons/close-icon'\nimport { Column, Columns } from '../columns'\nimport { Inline } from '../inline'\nimport { Divider } from '../divider'\nimport { Box } from '../box'\nimport { IconButtonProps, IconButton } from '../button'\n\nimport styles from './modal.module.css'\nimport type { ObfuscatedClassName } from '../utils/common-types'\n\ntype ModalWidth = 'small' \| 'medium' \| 'large' \| 'xlarge' \| 'full'\ntype ModalHeightMode = 'expand' \| 'fitContent'\n\n//\n// ModalContext\n//\n\ntype ModalContextValue = {\n onDismiss?(this: void): void\n height: ModalHeightMode\n}\n\nconst ModalContext = React.createContext<ModalContextValue>({\n onDismiss: undefined,\n height: 'fitContent',\n})\n\n//\n// Modal container\n//\n\ntype DivProps = Omit<\n React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLDivElement>, HTMLDivElement>,\n 'className' \| 'children' \| `aria-label` \| `aria-labelledby`\n>\n\nexport interface ModalProps extends DivProps, ObfuscatedClassName {\n /*\n The content of the modal.\n /\n children: React.ReactNode\n\n /\n Whether the modal is open and visible or not.\n /\n isOpen: boolean\n\n /\n Called when the user triggers closing the modal.\n /\n onDismiss?(): void\n\n /\n A descriptive setting for how wide the modal should aim to be, depending on how much space\n * it has on screen.\n * @default 'medium'\n /\n width?: ModalWidth\n\n /\n A descriptive setting for how tall the modal should aim to be.\n \n - 'expand': the modal aims to fill most of the available screen height, leaving only a small\n * padding above and below.\n * - 'fitContent': the modal shrinks to the smallest size that allow it to fit its content.\n \n In either case, if content does not fit, the content of the main body is set to scroll\n * (provided you use `ModalBody`) so that the modal never has to strech vertically beyond the\n * viewport boundaries.\n \n If you do not use `ModalBody`, the modal still prevents overflow, and you are in charge of\n * the inner layout to ensure scroll, or whatever other strategy you may want.\n /\n height?: ModalHeightMode\n\n /\n Whether to set or not the focus initially to the first focusable element inside the modal.\n /\n autoFocus?: boolean\n\n /\n Controls if the modal is dismissed when pressing \"Escape\".\n /\n hideOnEscape?: DialogOptions['hideOnEscape']\n\n /\n Controls if the modal is dismissed when clicking outside the modal body, on the overlay.\n /\n hideOnInteractOutside?: DialogOptions['hideOnInteractOutside']\n\n /\n An escape hatch in case you need to provide a custom class name to the overlay element.\n /\n exceptionallySetOverlayClassName?: string\n\n /\n Defines a string value that labels the current modal for assistive technologies.\n /\n 'aria-label'?: string\n\n /\n Identifies the element (or elements) that labels the current modal for assistive technologies.\n /\n 'aria-labelledby'?: string\n\n /\n An HTML element or a memoized callback function that returns an HTML element to be used as\n * the portal element. By default, the portal element will be a `div` element appended to the\n * `document.body`.\n \n @default HTMLDivElement\n \n @example\n * const [portal, setPortal] = useState(null);\n * <Portal portalElement={portal} />;\n * <div ref={setPortal} />;\n \n @example\n * const getPortalElement = useCallback(() => {\n * const div = document.createElement(\"div\");\n * const portalRoot = document.getElementById(\"portal-root\");\n * portalRoot.appendChild(div);\n * return div;\n * }, []);\n * <Portal portalElement={getPortalElement} />;\n /\n portalElement?: PortalOptions['portalElement']\n}\n\nfunction isNotInternalFrame(element: HTMLElement) {\n return !(element.ownerDocument === document && element.tagName.toLowerCase() === 'iframe')\n}\n\n/\n Renders a modal that sits on top of the rest of the content in the entire page.\n \n Follows the WAI-ARIA Dialog (Modal) Pattern.\n \n @see ModalHeader\n * @see ModalFooter\n * @see ModalBody\n /\nexport function Modal({\n isOpen,\n onDismiss,\n height = 'fitContent',\n width = 'medium',\n exceptionallySetClassName,\n exceptionallySetOverlayClassName,\n autoFocus = true,\n hideOnEscape = true,\n hideOnInteractOutside = true,\n children,\n portalElement,\n onKeyDown,\n // @ts-expect-error we want to make sure to not pass it to the Dialog component\n className,\n ...props\n}: ModalProps) {\n const setOpen = React.useCallback(\n (visible: boolean) => {\n if (!visible) {\n onDismiss?.()\n }\n },\n [onDismiss],\n )\n const store = useDialogStore({ open: isOpen, setOpen })\n\n const contextValue: ModalContextValue = React.useMemo(() => ({ onDismiss, height }), [\n onDismiss,\n height,\n ])\n\n const portalRef = React.useRef<HTMLElement \| null>(null)\n const dialogRef = React.useRef<HTMLDivElement \| null>(null)\n const backdropRef = React.useRef<HTMLDivElement \| null>(null)\n const handleBackdropClick = React.useCallback(\n (event: React.MouseEvent) => {\n if (\n // The focus lock element takes up the same space as the backdrop and is where the event bubbles up from,\n // so instead of checking the backdrop as the event target, we need to make sure it's just above the dialog\n !dialogRef.current?.contains(event.target as Node) &&\n // Events fired from other portals will bubble up to the backdrop, even if it isn't a child in the DOM\n backdropRef.current?.contains(event.target as Node)\n ) {\n event.stopPropagation()\n onDismiss?.()\n }\n },\n [onDismiss],\n )\n\n React.useLayoutEffect(\n function disableAccessibilityTreeOutside() {\n if (!isOpen \|\| !portalRef.current) {\n return\n }\n\n return hideOthers(portalRef.current)\n },\n [isOpen],\n )\n\n const handleKeyDown = React.useCallback(\n function handleKeyDown(event: React.KeyboardEvent<HTMLDivElement>) {\n if (\n hideOnEscape &&\n onDismiss != null &&\n event.key === 'Escape' &&\n !event.defaultPrevented\n ) {\n event.stopPropagation()\n onDismiss()\n }\n onKeyDown?.(event)\n },\n [onDismiss, hideOnEscape, onKeyDown],\n )\n\n if (!isOpen) {\n return null\n }\n\n return (\n <Portal portalRef={portalRef} portalElement={portalElement}>\n <Box\n data-testid=\"modal-overlay\"\n data-overlay\n className={classNames(\n styles.overlay,\n styles[height],\n styles[width],\n exceptionallySetOverlayClassName,\n )}\n /\n We're using `onPointerDown` instead of `onClick` to prevent the modal from\n * closing when the click starts inside the modal and ends on the backdrop.\n /\n onPointerDown={hideOnInteractOutside ? handleBackdropClick : undefined}\n ref={backdropRef}\n >\n <FocusLock autoFocus={autoFocus} whiteList={isNotInternalFrame} returnFocus={true}>\n <Dialog\n {...props}\n ref={dialogRef}\n render={\n <Box\n borderRadius=\"full\"\n background=\"default\"\n display=\"flex\"\n flexDirection=\"column\"\n overflow=\"hidden\"\n height={height === 'expand' ? 'full' : undefined}\n flexGrow={height === 'expand' ? 1 : 0}\n />\n }\n className={classNames(exceptionallySetClassName, styles.container)}\n store={store}\n preventBodyScroll\n // Disable focus lock as we set up our own using ReactFocusLock\n modal={false}\n autoFocus={false}\n autoFocusOnShow={false}\n autoFocusOnHide={false}\n // Disable portal and backdrop as we control their markup\n portal={false}\n backdrop={false}\n hideOnInteractOutside={false}\n hideOnEscape={false}\n onKeyDown={handleKeyDown}\n >\n <ModalContext.Provider value={contextValue}>\n {children}\n </ModalContext.Provider>\n </Dialog>\n </FocusLock>\n </Box>\n </Portal>\n )\n}\n\n//\n// ModalCloseButton\n//\n\nexport interface ModalCloseButtonProps\n extends Omit<\n IconButtonProps,\n 'type' \| 'variant' \| 'icon' \| 'disabled' \| 'loading' \| 'tabIndex' \| 'ref'\n > {\n /\n The descriptive label of the button.\n /\n 'aria-label': string\n}\n\n/\n The close button rendered by ModalHeader. Provided independently so that consumers can customize\n * the button's label.\n \n @see ModalHeader\n /\nexport function ModalCloseButton(props: ModalCloseButtonProps) {\n const { onDismiss } = React.useContext(ModalContext)\n const [includeInTabOrder, setIncludeInTabOrder] = React.useState(false)\n const [isMounted, setIsMounted] = React.useState(false)\n\n React.useEffect(\n function skipAutoFocus() {\n if (isMounted) {\n setIncludeInTabOrder(true)\n } else {\n setIsMounted(true)\n }\n },\n [isMounted],\n )\n\n return (\n <IconButton\n {...props}\n variant=\"quaternary\"\n onClick={onDismiss}\n icon={<CloseIcon />}\n tabIndex={includeInTabOrder ? 0 : -1}\n />\n )\n}\n\n//\n// ModalHeader\n//\n\nexport interface ModalHeaderProps extends DivProps, ObfuscatedClassName {\n /\n The content of the header.\n /\n children: React.ReactNode\n\n /\n Allows to provide a custom button element, or to omit the close button if set to false.\n * @see ModalCloseButton\n /\n button?: React.ReactNode \| boolean\n\n /\n Whether to render a divider line below the header.\n * @default false\n /\n withDivider?: boolean\n}\n\n/\n Renders a standard modal header area with an optional close button.\n \n @see Modal\n * @see ModalFooter\n * @see ModalBody\n /\nexport function ModalHeader({\n children,\n button = true,\n withDivider = false,\n exceptionallySetClassName,\n ...props\n}: ModalHeaderProps) {\n return (\n <>\n <Box\n {...props}\n as=\"header\"\n paddingLeft=\"large\"\n paddingRight={button === false \|\| button === null ? 'large' : 'small'}\n paddingY=\"small\"\n className={exceptionallySetClassName}\n >\n <Columns space=\"large\" alignY=\"center\">\n <Column width=\"auto\">{children}</Column>\n {button === false \|\| button === null ? (\n <div className={styles.headerContent} />\n ) : (\n <Column\n width=\"content\"\n exceptionallySetClassName={styles.buttonContainer}\n data-testid=\"button-container\"\n >\n {typeof button === 'boolean' ? (\n <ModalCloseButton aria-label=\"Close modal\" autoFocus={false} />\n ) : (\n button\n )}\n </Column>\n )}\n </Columns>\n </Box>\n {withDivider ? <Divider /> : null}\n </>\n )\n}\n\n//\n// ModalBody\n//\n\nexport interface ModalBodyProps extends DivProps, ObfuscatedClassName {\n /\n The content of the modal body.\n /\n children: React.ReactNode\n}\n\n/\n Renders the body of a modal.\n \n Convenient to use alongside ModalHeader and/or ModalFooter as needed. It ensures, among other\n * things, that the contet of the modal body expands or contracts depending on the modal height\n * setting or the size of the content. The body content also automatically scrolls when it's too\n * large to fit the available space.\n \n @see Modal\n * @see ModalHeader\n * @see ModalFooter\n /\nexport function ModalBody({ exceptionallySetClassName, children, ...props }: ModalBodyProps) {\n const { height } = React.useContext(ModalContext)\n return (\n <Box\n {...props}\n className={exceptionallySetClassName}\n flexGrow={height === 'expand' ? 1 : 0}\n height={height === 'expand' ? 'full' : undefined}\n overflow=\"auto\"\n >\n <Box padding=\"large\" paddingBottom=\"xxlarge\">\n {children}\n </Box>\n </Box>\n )\n}\n\n//\n// ModalFooter\n//\n\nexport interface ModalFooterProps extends DivProps, ObfuscatedClassName {\n /\n The contant of the modal footer.\n /\n children: React.ReactNode\n /\n Whether to render a divider line below the footer.\n * @default false\n /\n withDivider?: boolean\n}\n\n/\n Renders a standard modal footer area.\n \n @see Modal\n * @see ModalHeader\n * @see ModalBody\n /\nexport function ModalFooter({\n exceptionallySetClassName,\n withDivider = false,\n ...props\n}: ModalFooterProps) {\n return (\n <>\n {withDivider ? <Divider /> : null}\n <Box as=\"footer\" {...props} className={exceptionallySetClassName} padding=\"large\" />\n </>\n )\n}\n\n//\n// ModalActions\n//\n\nexport type ModalActionsProps = ModalFooterProps\n\n/\n A specific version of the ModalFooter, tailored to showing an inline list of actions (buttons).\n * @see ModalFooter\n */\nexport function ModalActions({ children, ...props }: ModalActionsProps) {\n return (\n <ModalFooter {...props}>\n <Inline align=\"right\" space=\"large\">\n {children}\n </Inline>\n </ModalFooter>\n )\n}\n"],"names":["ModalContext","React","createContext","onDismiss","undefined","height","isNotInternalFrame","element","ownerDocument","document","tagName","toLowerCase","ModalCloseButton","props","useContext","includeInTabOrder","setIncludeInTabOrder","useState","isMounted","setIsMounted","useEffect","createElement","IconButton","variant","onClick","icon","CloseIcon","tabIndex","ModalFooter","_ref4","exceptionallySetClassName","withDivider","_objectWithoutProperties","objectWithoutProperties","_excluded4","Fragment","Divider","Box","_objectSpread","objectSpread2","as","className","padding","_ref","isOpen","width","exceptionallySetOverlayClassName","autoFocus","hideOnEscape","hideOnInteractOutside","children","portalElement","onKeyDown","_excluded","setOpen","useCallback","visible","store","useDialogStore","open","contextValue","useMemo","portalRef","useRef","dialogRef","backdropRef","handleBackdropClick","event","_dialogRef$current","_backdropRef$current","current","contains","target","stopPropagation","useLayoutEffect","hideOthers","handleKeyDown","key","defaultPrevented","Portal","data-overlay","classNames","styles","overlay","onPointerDown","ref","FocusLock","whiteList","returnFocus","Dialog","render","borderRadius","background","display","flexDirection","overflow","flexGrow","container","preventBodyScroll","modal","autoFocusOnShow","autoFocusOnHide","portal","backdrop","Provider","value","_ref5","_excluded5","Inline","align","space","_ref3","_excluded3","paddingBottom","_ref2","button","_excluded2","paddingLeft","paddingRight","paddingY","Columns","alignY","Column","headerContent","buttonContainer","data-testid","aria-label"],"mappings":"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"}
1	+ {"version":3,"file":"modal.js","sources":["../../src/modal/modal.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport FocusLock from 'react-focus-lock'\nimport { hideOthers } from 'aria-hidden'\n\nimport { Dialog, DialogOptions, useDialogStore, Portal, PortalOptions } from '@ariakit/react'\n\nimport { CloseIcon } from '../icons/close-icon'\nimport { Column, Columns } from '../columns'\nimport { Inline } from '../inline'\nimport { Divider } from '../divider'\nimport { Box } from '../box'\nimport { IconButtonProps, IconButton } from '../button'\n\nimport styles from './modal.module.css'\nimport type { ObfuscatedClassName } from '../utils/common-types'\n\ntype ModalWidth = 'xsmall' \| 'small' \| 'medium' \| 'large' \| 'xlarge' \| 'full'\ntype ModalHeightMode = 'expand' \| 'fitContent'\n\n//\n// ModalContext\n//\n\ntype ModalContextValue = {\n onDismiss?(this: void): void\n height: ModalHeightMode\n}\n\nconst ModalContext = React.createContext<ModalContextValue>({\n onDismiss: undefined,\n height: 'fitContent',\n})\n\n//\n// Modal container\n//\n\ntype DivProps = Omit<\n React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLDivElement>, HTMLDivElement>,\n 'className' \| 'children' \| `aria-label` \| `aria-labelledby`\n>\n\nexport interface ModalProps extends DivProps, ObfuscatedClassName {\n /*\n The content of the modal.\n /\n children: React.ReactNode\n\n /\n Whether the modal is open and visible or not.\n /\n isOpen: boolean\n\n /\n Called when the user triggers closing the modal.\n /\n onDismiss?(): void\n\n /\n A descriptive setting for how wide the modal should aim to be, depending on how much space\n * it has on screen.\n * @default 'medium'\n /\n width?: ModalWidth\n\n /\n A descriptive setting for how tall the modal should aim to be.\n \n - 'expand': the modal aims to fill most of the available screen height, leaving only a small\n * padding above and below.\n * - 'fitContent': the modal shrinks to the smallest size that allow it to fit its content.\n \n In either case, if content does not fit, the content of the main body is set to scroll\n * (provided you use `ModalBody`) so that the modal never has to strech vertically beyond the\n * viewport boundaries.\n \n If you do not use `ModalBody`, the modal still prevents overflow, and you are in charge of\n * the inner layout to ensure scroll, or whatever other strategy you may want.\n /\n height?: ModalHeightMode\n\n /\n Whether to set or not the focus initially to the first focusable element inside the modal.\n /\n autoFocus?: boolean\n\n /\n Controls if the modal is dismissed when pressing \"Escape\".\n /\n hideOnEscape?: DialogOptions['hideOnEscape']\n\n /\n Controls if the modal is dismissed when clicking outside the modal body, on the overlay.\n /\n hideOnInteractOutside?: DialogOptions['hideOnInteractOutside']\n\n /\n An escape hatch in case you need to provide a custom class name to the overlay element.\n /\n exceptionallySetOverlayClassName?: string\n\n /\n Defines a string value that labels the current modal for assistive technologies.\n /\n 'aria-label'?: string\n\n /\n Identifies the element (or elements) that labels the current modal for assistive technologies.\n /\n 'aria-labelledby'?: string\n\n /\n An HTML element or a memoized callback function that returns an HTML element to be used as\n * the portal element. By default, the portal element will be a `div` element appended to the\n * `document.body`.\n \n @default HTMLDivElement\n \n @example\n * const [portal, setPortal] = useState(null);\n * <Portal portalElement={portal} />;\n * <div ref={setPortal} />;\n \n @example\n * const getPortalElement = useCallback(() => {\n * const div = document.createElement(\"div\");\n * const portalRoot = document.getElementById(\"portal-root\");\n * portalRoot.appendChild(div);\n * return div;\n * }, []);\n * <Portal portalElement={getPortalElement} />;\n /\n portalElement?: PortalOptions['portalElement']\n}\n\nfunction isNotInternalFrame(element: HTMLElement) {\n return !(element.ownerDocument === document && element.tagName.toLowerCase() === 'iframe')\n}\n\n/\n Renders a modal that sits on top of the rest of the content in the entire page.\n \n Follows the WAI-ARIA Dialog (Modal) Pattern.\n \n @see ModalHeader\n * @see ModalFooter\n * @see ModalBody\n /\nexport function Modal({\n isOpen,\n onDismiss,\n height = 'fitContent',\n width = 'medium',\n exceptionallySetClassName,\n exceptionallySetOverlayClassName,\n autoFocus = true,\n hideOnEscape = true,\n hideOnInteractOutside = true,\n children,\n portalElement,\n onKeyDown,\n // @ts-expect-error we want to make sure to not pass it to the Dialog component\n className,\n ...props\n}: ModalProps) {\n const setOpen = React.useCallback(\n (visible: boolean) => {\n if (!visible) {\n onDismiss?.()\n }\n },\n [onDismiss],\n )\n const store = useDialogStore({ open: isOpen, setOpen })\n\n const contextValue: ModalContextValue = React.useMemo(() => ({ onDismiss, height }), [\n onDismiss,\n height,\n ])\n\n const portalRef = React.useRef<HTMLElement \| null>(null)\n const dialogRef = React.useRef<HTMLDivElement \| null>(null)\n const backdropRef = React.useRef<HTMLDivElement \| null>(null)\n const handleBackdropClick = React.useCallback(\n (event: React.MouseEvent) => {\n if (\n // The focus lock element takes up the same space as the backdrop and is where the event bubbles up from,\n // so instead of checking the backdrop as the event target, we need to make sure it's just above the dialog\n !dialogRef.current?.contains(event.target as Node) &&\n // Events fired from other portals will bubble up to the backdrop, even if it isn't a child in the DOM\n backdropRef.current?.contains(event.target as Node)\n ) {\n event.stopPropagation()\n onDismiss?.()\n }\n },\n [onDismiss],\n )\n\n React.useLayoutEffect(\n function disableAccessibilityTreeOutside() {\n if (!isOpen \|\| !portalRef.current) {\n return\n }\n\n return hideOthers(portalRef.current)\n },\n [isOpen],\n )\n\n const handleKeyDown = React.useCallback(\n function handleKeyDown(event: React.KeyboardEvent<HTMLDivElement>) {\n if (\n hideOnEscape &&\n onDismiss != null &&\n event.key === 'Escape' &&\n !event.defaultPrevented\n ) {\n event.stopPropagation()\n onDismiss()\n }\n onKeyDown?.(event)\n },\n [onDismiss, hideOnEscape, onKeyDown],\n )\n\n if (!isOpen) {\n return null\n }\n\n return (\n <Portal portalRef={portalRef} portalElement={portalElement}>\n <Box\n data-testid=\"modal-overlay\"\n data-overlay\n className={classNames(\n styles.overlay,\n styles[height],\n styles[width],\n exceptionallySetOverlayClassName,\n )}\n /\n We're using `onPointerDown` instead of `onClick` to prevent the modal from\n * closing when the click starts inside the modal and ends on the backdrop.\n /\n onPointerDown={hideOnInteractOutside ? handleBackdropClick : undefined}\n ref={backdropRef}\n >\n <FocusLock autoFocus={autoFocus} whiteList={isNotInternalFrame} returnFocus={true}>\n <Dialog\n {...props}\n ref={dialogRef}\n render={\n <Box\n borderRadius=\"full\"\n background=\"default\"\n display=\"flex\"\n flexDirection=\"column\"\n overflow=\"hidden\"\n height={height === 'expand' ? 'full' : undefined}\n flexGrow={height === 'expand' ? 1 : 0}\n />\n }\n className={classNames(exceptionallySetClassName, styles.container)}\n store={store}\n preventBodyScroll\n // Disable focus lock as we set up our own using ReactFocusLock\n modal={false}\n autoFocus={false}\n autoFocusOnShow={false}\n autoFocusOnHide={false}\n // Disable portal and backdrop as we control their markup\n portal={false}\n backdrop={false}\n hideOnInteractOutside={false}\n hideOnEscape={false}\n onKeyDown={handleKeyDown}\n >\n <ModalContext.Provider value={contextValue}>\n {children}\n </ModalContext.Provider>\n </Dialog>\n </FocusLock>\n </Box>\n </Portal>\n )\n}\n\n//\n// ModalCloseButton\n//\n\nexport interface ModalCloseButtonProps\n extends Omit<\n IconButtonProps,\n 'type' \| 'variant' \| 'icon' \| 'disabled' \| 'loading' \| 'tabIndex' \| 'ref'\n > {\n /\n The descriptive label of the button.\n /\n 'aria-label': string\n}\n\n/\n The close button rendered by ModalHeader. Provided independently so that consumers can customize\n * the button's label.\n \n @see ModalHeader\n /\nexport function ModalCloseButton(props: ModalCloseButtonProps) {\n const { onDismiss } = React.useContext(ModalContext)\n const [includeInTabOrder, setIncludeInTabOrder] = React.useState(false)\n const [isMounted, setIsMounted] = React.useState(false)\n\n React.useEffect(\n function skipAutoFocus() {\n if (isMounted) {\n setIncludeInTabOrder(true)\n } else {\n setIsMounted(true)\n }\n },\n [isMounted],\n )\n\n return (\n <IconButton\n {...props}\n variant=\"quaternary\"\n onClick={onDismiss}\n icon={<CloseIcon />}\n tabIndex={includeInTabOrder ? 0 : -1}\n />\n )\n}\n\n//\n// ModalHeader\n//\n\nexport interface ModalHeaderProps extends DivProps, ObfuscatedClassName {\n /\n The content of the header.\n /\n children: React.ReactNode\n\n /\n Allows to provide a custom button element, or to omit the close button if set to false.\n * @see ModalCloseButton\n /\n button?: React.ReactNode \| boolean\n\n /\n Whether to render a divider line below the header.\n * @default false\n /\n withDivider?: boolean\n}\n\n/\n Renders a standard modal header area with an optional close button.\n \n @see Modal\n * @see ModalFooter\n * @see ModalBody\n /\nexport function ModalHeader({\n children,\n button = true,\n withDivider = false,\n exceptionallySetClassName,\n ...props\n}: ModalHeaderProps) {\n return (\n <>\n <Box\n {...props}\n as=\"header\"\n paddingLeft=\"large\"\n paddingRight={button === false \|\| button === null ? 'large' : 'small'}\n paddingY=\"small\"\n className={exceptionallySetClassName}\n >\n <Columns space=\"large\" alignY=\"center\">\n <Column width=\"auto\">{children}</Column>\n {button === false \|\| button === null ? (\n <div className={styles.headerContent} />\n ) : (\n <Column\n width=\"content\"\n exceptionallySetClassName={styles.buttonContainer}\n data-testid=\"button-container\"\n >\n {typeof button === 'boolean' ? (\n <ModalCloseButton aria-label=\"Close modal\" autoFocus={false} />\n ) : (\n button\n )}\n </Column>\n )}\n </Columns>\n </Box>\n {withDivider ? <Divider /> : null}\n </>\n )\n}\n\n//\n// ModalBody\n//\n\nexport interface ModalBodyProps extends DivProps, ObfuscatedClassName {\n /\n The content of the modal body.\n /\n children: React.ReactNode\n}\n\n/\n Renders the body of a modal.\n \n Convenient to use alongside ModalHeader and/or ModalFooter as needed. It ensures, among other\n * things, that the contet of the modal body expands or contracts depending on the modal height\n * setting or the size of the content. The body content also automatically scrolls when it's too\n * large to fit the available space.\n \n @see Modal\n * @see ModalHeader\n * @see ModalFooter\n /\nexport function ModalBody({ exceptionallySetClassName, children, ...props }: ModalBodyProps) {\n const { height } = React.useContext(ModalContext)\n return (\n <Box\n {...props}\n className={exceptionallySetClassName}\n flexGrow={height === 'expand' ? 1 : 0}\n height={height === 'expand' ? 'full' : undefined}\n overflow=\"auto\"\n >\n <Box padding=\"large\" paddingBottom=\"xxlarge\">\n {children}\n </Box>\n </Box>\n )\n}\n\n//\n// ModalFooter\n//\n\nexport interface ModalFooterProps extends DivProps, ObfuscatedClassName {\n /\n The contant of the modal footer.\n /\n children: React.ReactNode\n /\n Whether to render a divider line below the footer.\n * @default false\n /\n withDivider?: boolean\n}\n\n/\n Renders a standard modal footer area.\n \n @see Modal\n * @see ModalHeader\n * @see ModalBody\n /\nexport function ModalFooter({\n exceptionallySetClassName,\n withDivider = false,\n ...props\n}: ModalFooterProps) {\n return (\n <>\n {withDivider ? <Divider /> : null}\n <Box as=\"footer\" {...props} className={exceptionallySetClassName} padding=\"large\" />\n </>\n )\n}\n\n//\n// ModalActions\n//\n\nexport type ModalActionsProps = ModalFooterProps\n\n/\n A specific version of the ModalFooter, tailored to showing an inline list of actions (buttons).\n * @see ModalFooter\n */\nexport function ModalActions({ children, ...props }: ModalActionsProps) {\n return (\n <ModalFooter {...props}>\n <Inline align=\"right\" space=\"large\">\n {children}\n </Inline>\n </ModalFooter>\n )\n}\n"],"names":["ModalContext","React","createContext","onDismiss","undefined","height","isNotInternalFrame","element","ownerDocument","document","tagName","toLowerCase","ModalCloseButton","props","useContext","includeInTabOrder","setIncludeInTabOrder","useState","isMounted","setIsMounted","useEffect","createElement","IconButton","variant","onClick","icon","CloseIcon","tabIndex","ModalFooter","_ref4","exceptionallySetClassName","withDivider","_objectWithoutProperties","objectWithoutProperties","_excluded4","Fragment","Divider","Box","_objectSpread","objectSpread2","as","className","padding","_ref","isOpen","width","exceptionallySetOverlayClassName","autoFocus","hideOnEscape","hideOnInteractOutside","children","portalElement","onKeyDown","_excluded","setOpen","useCallback","visible","store","useDialogStore","open","contextValue","useMemo","portalRef","useRef","dialogRef","backdropRef","handleBackdropClick","event","_dialogRef$current","_backdropRef$current","current","contains","target","stopPropagation","useLayoutEffect","hideOthers","handleKeyDown","key","defaultPrevented","Portal","data-overlay","classNames","styles","overlay","onPointerDown","ref","FocusLock","whiteList","returnFocus","Dialog","render","borderRadius","background","display","flexDirection","overflow","flexGrow","container","preventBodyScroll","modal","autoFocusOnShow","autoFocusOnHide","portal","backdrop","Provider","value","_ref5","_excluded5","Inline","align","space","_ref3","_excluded3","paddingBottom","_ref2","button","_excluded2","paddingLeft","paddingRight","paddingY","Columns","alignY","Column","headerContent","buttonContainer","data-testid","aria-label"],"mappings":"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"}

package/lib/modal/modal.module.css.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={overlay:"_8aa86dd3",fadein:"_20c07ee6",fitContent:"_713bc08f",container:"_45139719",full:"ec8619a2",large:"_86a1d5a4",medium:"_11d61de3",small:"aee19643",xlarge:"fe449c81",expand:"_61ffb38f",buttonContainer:"_49ffdac0",headerContent:"ee92ccb3"};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={overlay:"_756b318e",fadein:"_21966801",fitContent:"_52bde55e",container:"_46152754",full:"bf469f5d",large:"_3208ba07",medium:"_29f86ad4",small:"_64c0762d",xsmall:"_3196b4d0",xlarge:"_3517025e",expand:"_8d20cc11",buttonContainer:"_37ed43a6",headerContent:"_7df92d5c"};
 //# sourceMappingURL=modal.module.css.js.map

package/package.json CHANGED Viewed

@@ -6,7 +6,7 @@
         "email": "henning@doist.com",
         "url": "http://doist.com"
     },
-    "version": "25.0.0-beta.3",
+    "version": "25.1.0",
     "license": "MIT",
     "homepage": "https://github.com/Doist/reactist#readme",
     "repository": {

package/styles/modal.css CHANGED Viewed

@@ -8,4 +8,4 @@
 :root{--reactist-spinner-tint:var(--reactist-bg-brand);--reactist-spinner-fill:var(--reactist-framework-fill-crest)}@-webkit-keyframes _54fbe2b3{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes _54fbe2b3{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}._51539197{-webkit-animation-name:_54fbe2b3;animation-name:_54fbe2b3;-webkit-animation-duration:1.2s;animation-duration:1.2s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-timing-function:linear;animation-timing-function:linear}.a0c466ed{fill:var(--reactist-spinner-tint)}._745b73d3{fill:var(--reactist-spinner-fill)}
 ._487c82cd{text-overflow:ellipsis;max-width:300px;z-index:var(--reactist-stacking-order-tooltip)}
 :root{--reactist-button-small-font-size:var(--reactist-font-size-caption);--reactist-button-small-spacing:var(--reactist-spacing-small);--reactist-button-small-height:28px;--reactist-button-normal-font-size:var(--reactist-font-size-copy);--reactist-button-normal-spacing:var(--reactist-spacing-medium);--reactist-button-normal-height:32px;--reactist-button-large-font-size:var(--reactist-font-size-body);--reactist-button-large-spacing:var(--reactist-spacing-large);--reactist-button-large-height:36px;--reactist-actionable-primary-idle-tint:#fff;--reactist-actionable-primary-idle-fill:#008aa6;--reactist-actionable-primary-hover-tint:#fff;--reactist-actionable-primary-hover-fill:#007992;--reactist-actionable-primary-disabled-tint:#fff;--reactist-actionable-primary-disabled-fill:#99d0db;--reactist-actionable-secondary-idle-tint:#282f30;--reactist-actionable-secondary-idle-fill:#f2f6f7;--reactist-actionable-secondary-hover-tint:#282f30;--reactist-actionable-secondary-hover-fill:#e3e7e8;--reactist-actionable-secondary-disabled-tint:#a9acac;--reactist-actionable-secondary-disabled-fill:#f2f6f7;--reactist-actionable-tertiary-idle-tint:#006f85;--reactist-actionable-tertiary-hover-tint:#006f85;--reactist-actionable-tertiary-hover-fill:#f2f6f7;--reactist-actionable-tertiary-disabled-tint:#99c5ce;--reactist-actionable-quaternary-idle-tint:#6c777a;--reactist-actionable-quaternary-hover-tint:#282f30;--reactist-actionable-quaternary-hover-fill:#e0e7e8;--reactist-actionable-quaternary-disabled-tint:#c4c9ca;--reactist-actionable-primary-destructive-idle-tint:#fff;--reactist-actionable-primary-destructive-idle-fill:#dc4c3e;--reactist-actionable-primary-destructive-hover-tint:#fff;--reactist-actionable-primary-destructive-hover-fill:#b03d32;--reactist-actionable-primary-destructive-disabled-tint:#fff;--reactist-actionable-primary-destructive-disabled-fill:#f1b7b2;--reactist-actionable-secondary-destructive-idle-tint:#dc4c3e;--reactist-actionable-secondary-destructive-hover-tint:#b03d32;--reactist-actionable-secondary-destructive-hover-fill:transparent;--reactist-actionable-secondary-destructive-disabled-tint:#f1b7b2}._3930afa0{max-width:100%;display:flex;flex-direction:row;justify-content:center;align-items:center;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:inherit;background-color:transparent;border-radius:var(--reactist-border-radius-small);white-space:nowrap;font-family:var(--reactist-font-family);font-weight:var(--reactist-font-weight-medium);text-decoration:none;border:1px solid transparent;transition-duration:.3s;transition-property:color,background-color;transition-timing-function:cubic-bezier(.4,0,.2,1)}._90654824{text-overflow:ellipsis;white-space:nowrap;font-size:inherit}._3930afa0:active:not([aria-disabled=true]){transform:scale(.97);transition:transform .2s cubic-bezier(.02,1.505,.745,1.235)}._3930afa0{padding:0 var(--reactist-btn-spacing);font-size:var(--reactist-btn-font-size);height:var(--reactist-btn-height);line-height:var(--reactist-btn-height);--reactist-spinner-tint:var(--reactist-btn-idle-tint);--reactist-spinner-fill:var(--reactist-btn-idle-fill)}._3930afa0.c05d17c2{border-radius:1000px}._3930afa0._1e29d236{--reactist-btn-height:var(--reactist-button-small-height);--reactist-btn-spacing:var(--reactist-button-small-spacing);--reactist-btn-font-size:var(--reactist-button-small-font-size)}._3930afa0._7246d092{--reactist-btn-height:var(--reactist-button-normal-height);--reactist-btn-spacing:var(--reactist-button-normal-spacing);--reactist-btn-font-size:var(--reactist-button-normal-font-size)}._3930afa0._2d084671{--reactist-btn-height:var(--reactist-button-large-height);--reactist-btn-spacing:var(--reactist-button-large-spacing);--reactist-btn-font-size:var(--reactist-button-large-font-size)}._3930afa0:not(._2b0b9d95){color:var(--reactist-btn-idle-tint);background-color:var(--reactist-btn-idle-fill)}._3930afa0:focus-visible:not([aria-disabled=true]),._3930afa0:hover:not([aria-disabled=true]),._3930afa0[aria-expanded=true]{color:var(--reactist-btn-hover-tint);background-color:var(--reactist-btn-hover-fill)}._3930afa0._2b0b9d95{cursor:not-allowed;color:var(--reactist-btn-disabled-tint);background-color:var(--reactist-btn-disabled-fill)}._3930afa0:not(.abd5766f){min-width:68px}._3930afa0.abd5766f{width:var(--reactist-btn-height);height:var(--reactist-btn-height);padding:0}._3930afa0 ._380e7c73{margin-right:calc(var(--reactist-btn-spacing) - 6px);margin-left:-6px}._3930afa0 ._20fe4105{margin-left:calc(var(--reactist-btn-spacing) - 6px);margin-right:-6px}._3930afa0>*{pointer-events:none}._7ea1378e{--reactist-btn-idle-tint:var(--reactist-actionable-primary-idle-tint);--reactist-btn-idle-fill:var(--reactist-actionable-primary-idle-fill);--reactist-btn-hover-tint:var(--reactist-actionable-primary-hover-tint);--reactist-btn-hover-fill:var(--reactist-actionable-primary-hover-fill);--reactist-btn-disabled-tint:var(--reactist-actionable-primary-disabled-tint);--reactist-btn-disabled-fill:var(--reactist-actionable-primary-disabled-fill)}._64ee8afd{--reactist-btn-idle-tint:var(--reactist-actionable-secondary-idle-tint);--reactist-btn-idle-fill:var(--reactist-actionable-secondary-idle-fill);--reactist-btn-hover-tint:var(--reactist-actionable-secondary-hover-tint);--reactist-btn-hover-fill:var(--reactist-actionable-secondary-hover-fill);--reactist-btn-disabled-tint:var(--reactist-actionable-secondary-disabled-tint);--reactist-btn-disabled-fill:var(--reactist-actionable-secondary-disabled-fill)}._650176bf{--reactist-btn-idle-tint:var(--reactist-actionable-tertiary-idle-tint);--reactist-btn-hover-tint:var(--reactist-actionable-tertiary-hover-tint);--reactist-btn-hover-fill:var(--reactist-actionable-tertiary-hover-fill);--reactist-btn-disabled-tint:var(--reactist-actionable-tertiary-disabled-tint)}.aa19cb97,._650176bf{--reactist-btn-idle-fill:transparent;--reactist-btn-disabled-fill:transparent}.aa19cb97{--reactist-btn-idle-tint:var(--reactist-actionable-quaternary-idle-tint);--reactist-btn-hover-tint:var(--reactist-actionable-quaternary-hover-tint);--reactist-btn-hover-fill:var(--reactist-actionable-quaternary-hover-fill);--reactist-btn-disabled-tint:var(--reactist-actionable-quaternary-disabled-tint)}._7ea1378e._7a2d9a8c{--reactist-btn-idle-tint:var(--reactist-actionable-primary-destructive-idle-tint);--reactist-btn-idle-fill:var(--reactist-actionable-primary-destructive-idle-fill);--reactist-btn-hover-tint:var(--reactist-actionable-primary-destructive-hover-tint);--reactist-btn-hover-fill:var(--reactist-actionable-primary-destructive-hover-fill);--reactist-btn-disabled-tint:var(--reactist-actionable-primary-destructive-disabled-tint);--reactist-btn-disabled-fill:var(--reactist-actionable-primary-destructive-disabled-fill)}._64ee8afd._7a2d9a8c{--reactist-btn-idle-tint:var(--reactist-actionable-secondary-destructive-idle-tint);--reactist-btn-idle-fill:transparent;--reactist-btn-hover-tint:var(--reactist-actionable-secondary-destructive-hover-tint);--reactist-btn-hover-fill:var(--reactist-actionable-secondary-destructive-hover-fill);--reactist-btn-disabled-tint:var(--reactist-actionable-secondary-destructive-disabled-tint);--reactist-btn-disabled-fill:transparent;border-color:var(--reactist-btn-idle-tint)}._64ee8afd._7a2d9a8c:hover{border-color:var(--reactist-btn-hover-tint)}._64ee8afd._7a2d9a8c._2b0b9d95{border-color:var(--reactist-btn-disabled-tint)}.aa19cb97._7a2d9a8c,._650176bf._7a2d9a8c{--reactist-btn-idle-tint:var(--reactist-actionable-secondary-destructive-idle-tint);--reactist-btn-hover-tint:var(--reactist-actionable-secondary-destructive-hover-tint);--reactist-btn-disabled-tint:var(--reactist-actionable-secondary-destructive-disabled-tint)}
-@-webkit-keyframes _20c07ee6{0%{opacity:0}to{opacity:1}}@keyframes _20c07ee6{0%{opacity:0}to{opacity:1}}:root{--reactist-modal-overlay-fill:rgba(0,0,0,0.5);--reactist-modal-padding-top:13vh}._8aa86dd3{isolation:isolate;position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden;background-color:var(--reactist-modal-overlay-fill);-webkit-animation:_20c07ee6 .2s;animation:_20c07ee6 .2s;-webkit-animation-timing-function:cubic-bezier(.4,0,.2,1);animation-timing-function:cubic-bezier(.4,0,.2,1);transition:background-color .5s;display:flex;align-items:center;justify-content:center;z-index:var(--reactist-stacking-order-modal)}._8aa86dd3>[data-focus-lock-disabled]{display:flex;flex-direction:column;align-items:center;width:100%;height:100%;box-sizing:border-box;padding:var(--reactist-spacing-xxlarge)}._8aa86dd3._713bc08f>[data-focus-lock-disabled]{padding-top:var(--reactist-modal-padding-top)}._8aa86dd3._713bc08f>[data-focus-lock-disabled] ._45139719{max-height:calc(100vh - 2*var(--reactist-modal-padding-top))}._45139719{box-shadow:0 2px 8px 0 rgba(0,0,0,.16);transition:width .2s ease-in-out,box-shadow .5s;max-width:100%}.ec8619a2 ._45139719{width:100%}._86a1d5a4 ._45139719{width:768px}._11d61de3 ._45139719{width:580px}.aee19643 ._45139719{width:450px}@media (min-width:992px){.fe449c81 ._45139719{width:960px}}@media (min-width:1200px){.fe449c81 ._45139719{width:1060px}}@media (max-width:1000px){.fe449c81 ._45139719{width:768px}}@media (max-width:580px){._8aa86dd3:not(.aee19643) ._45139719{width:100%!important;max-height:none}._8aa86dd3._61ffb38f:not(.aee19643)>[data-focus-lock-disabled]{padding-left:0;padding-right:0;padding-bottom:0}._8aa86dd3._61ffb38f:not(.aee19643) ._45139719{border-bottom-left-radius:0;border-bottom-right-radius:0}}@media (max-width:400px){._45139719{width:100%!important;max-height:none}._8aa86dd3._61ffb38f>[data-focus-lock-disabled]{padding-left:0;padding-right:0;padding-bottom:0}._8aa86dd3._61ffb38f ._45139719{border-bottom-left-radius:0;border-bottom-right-radius:0}}._49ffdac0{display:flex;align-items:center;height:32px}.ee92ccb3{min-height:32px}
+@-webkit-keyframes _21966801{0%{opacity:0}to{opacity:1}}@keyframes _21966801{0%{opacity:0}to{opacity:1}}:root{--reactist-modal-overlay-fill:rgba(0,0,0,0.5);--reactist-modal-padding-top:13vh}._756b318e{isolation:isolate;position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden;background-color:var(--reactist-modal-overlay-fill);-webkit-animation:_21966801 .2s;animation:_21966801 .2s;-webkit-animation-timing-function:cubic-bezier(.4,0,.2,1);animation-timing-function:cubic-bezier(.4,0,.2,1);transition:background-color .5s;display:flex;align-items:center;justify-content:center;z-index:var(--reactist-stacking-order-modal)}._756b318e>[data-focus-lock-disabled]{display:flex;flex-direction:column;align-items:center;width:100%;height:100%;box-sizing:border-box;padding:var(--reactist-spacing-xxlarge)}._756b318e._52bde55e>[data-focus-lock-disabled]{padding-top:var(--reactist-modal-padding-top)}._756b318e._52bde55e>[data-focus-lock-disabled] ._46152754{max-height:calc(100vh - 2*var(--reactist-modal-padding-top))}._46152754{box-shadow:0 2px 8px 0 rgba(0,0,0,.16);transition:width .2s ease-in-out,box-shadow .5s;max-width:100%}.bf469f5d ._46152754{width:100%}._3208ba07 ._46152754{width:768px}._29f86ad4 ._46152754{width:580px}._64c0762d ._46152754{width:480px}._3196b4d0 ._46152754{width:448px}@media (min-width:992px){._3517025e ._46152754{width:960px}}@media (min-width:1200px){._3517025e ._46152754{width:1060px}}@media (max-width:1000px){._3517025e ._46152754{width:768px}}@media (max-width:580px){._756b318e:not(._3196b4d0):not(._64c0762d) ._46152754{width:100%!important;max-height:none}._756b318e._8d20cc11:not(._3196b4d0):not(._64c0762d)>[data-focus-lock-disabled]{padding-left:0;padding-right:0;padding-bottom:0}._756b318e._8d20cc11:not(._3196b4d0):not(._64c0762d) ._46152754{border-bottom-left-radius:0;border-bottom-right-radius:0}}@media (max-width:400px){._46152754{width:100%!important;max-height:none}._756b318e._8d20cc11>[data-focus-lock-disabled]{padding-left:0;padding-right:0;padding-bottom:0}._756b318e._8d20cc11 ._46152754{border-bottom-left-radius:0;border-bottom-right-radius:0}}._37ed43a6{display:flex;align-items:center;height:32px}._7df92d5c{min-height:32px}

package/styles/modal.module.css.css CHANGED Viewed

	@@ -1 +1 @@
1	- @-webkit-keyframes ~~_20c07ee6~~{0%{opacity:0}to{opacity:1}}@keyframes ~~_20c07ee6~~{0%{opacity:0}to{opacity:1}}:root{--reactist-modal-overlay-fill:rgba(0,0,0,0.5);--reactist-modal-padding-top:13vh}.~~_8aa86dd3~~{isolation:isolate;position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden;background-color:var(--reactist-modal-overlay-fill);-webkit-animation:~~_20c07ee6~~ .2s;animation:~~_20c07ee6~~ .2s;-webkit-animation-timing-function:cubic-bezier(.4,0,.2,1);animation-timing-function:cubic-bezier(.4,0,.2,1);transition:background-color .5s;display:flex;align-items:center;justify-content:center;z-index:var(--reactist-stacking-order-modal)}.~~_8aa86dd3~~>[data-focus-lock-disabled]{display:flex;flex-direction:column;align-items:center;width:100%;height:100%;box-sizing:border-box;padding:var(--reactist-spacing-xxlarge)}.~~_8aa86dd3~~.~~_713bc08f~~>[data-focus-lock-disabled]{padding-top:var(--reactist-modal-padding-top)}.~~_8aa86dd3~~.~~_713bc08f~~>[data-focus-lock-disabled] .~~_45139719~~{max-height:calc(100vh - 2*var(--reactist-modal-padding-top))}.~~_45139719~~{box-shadow:0 2px 8px 0 rgba(0,0,0,.16);transition:width .2s ease-in-out,box-shadow .5s;max-width:100%}.~~ec8619a2~~ .~~_45139719~~{width:100%}.~~_86a1d5a4~~ .~~_45139719~~{width:768px}.~~_11d61de3~~ .~~_45139719~~{width:580px}.~~aee19643~~ .~~_45139719~~{width:~~450px~~}@media (min-width:992px){.~~fe449c81~~ .~~_45139719~~{width:960px}}@media (min-width:1200px){.~~fe449c81~~ .~~_45139719~~{width:1060px}}@media (max-width:1000px){.~~fe449c81~~ .~~_45139719~~{width:768px}}@media (max-width:580px){.~~_8aa86dd3~~:not(.~~aee19643~~) .~~_45139719~~{width:100%!important;max-height:none}.~~_8aa86dd3~~.~~_61ffb38f~~:not(.~~aee19643~~)>[data-focus-lock-disabled]{padding-left:0;padding-right:0;padding-bottom:0}.~~_8aa86dd3~~.~~_61ffb38f~~:not(.~~aee19643~~) .~~_45139719~~{border-bottom-left-radius:0;border-bottom-right-radius:0}}@media (max-width:400px){.~~_45139719~~{width:100%!important;max-height:none}.~~_8aa86dd3~~.~~_61ffb38f~~>[data-focus-lock-disabled]{padding-left:0;padding-right:0;padding-bottom:0}.~~_8aa86dd3~~.~~_61ffb38f~~ .~~_45139719~~{border-bottom-left-radius:0;border-bottom-right-radius:0}}.~~_49ffdac0~~{display:flex;align-items:center;height:32px}.~~ee92ccb3~~{min-height:32px}
1	+ @-webkit-keyframes _21966801{0%{opacity:0}to{opacity:1}}@keyframes _21966801{0%{opacity:0}to{opacity:1}}:root{--reactist-modal-overlay-fill:rgba(0,0,0,0.5);--reactist-modal-padding-top:13vh}._756b318e{isolation:isolate;position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden;background-color:var(--reactist-modal-overlay-fill);-webkit-animation:_21966801 .2s;animation:_21966801 .2s;-webkit-animation-timing-function:cubic-bezier(.4,0,.2,1);animation-timing-function:cubic-bezier(.4,0,.2,1);transition:background-color .5s;display:flex;align-items:center;justify-content:center;z-index:var(--reactist-stacking-order-modal)}._756b318e>[data-focus-lock-disabled]{display:flex;flex-direction:column;align-items:center;width:100%;height:100%;box-sizing:border-box;padding:var(--reactist-spacing-xxlarge)}._756b318e._52bde55e>[data-focus-lock-disabled]{padding-top:var(--reactist-modal-padding-top)}._756b318e._52bde55e>[data-focus-lock-disabled] ._46152754{max-height:calc(100vh - 2*var(--reactist-modal-padding-top))}._46152754{box-shadow:0 2px 8px 0 rgba(0,0,0,.16);transition:width .2s ease-in-out,box-shadow .5s;max-width:100%}.bf469f5d ._46152754{width:100%}._3208ba07 ._46152754{width:768px}._29f86ad4 ._46152754{width:580px}._64c0762d ._46152754{width:480px}._3196b4d0 ._46152754{width:448px}@media (min-width:992px){._3517025e ._46152754{width:960px}}@media (min-width:1200px){._3517025e ._46152754{width:1060px}}@media (max-width:1000px){._3517025e ._46152754{width:768px}}@media (max-width:580px){._756b318e:not(._3196b4d0):not(._64c0762d) ._46152754{width:100%!important;max-height:none}._756b318e._8d20cc11:not(._3196b4d0):not(._64c0762d)>[data-focus-lock-disabled]{padding-left:0;padding-right:0;padding-bottom:0}._756b318e._8d20cc11:not(._3196b4d0):not(._64c0762d) ._46152754{border-bottom-left-radius:0;border-bottom-right-radius:0}}@media (max-width:400px){._46152754{width:100%!important;max-height:none}._756b318e._8d20cc11>[data-focus-lock-disabled]{padding-left:0;padding-right:0;padding-bottom:0}._756b318e._8d20cc11 ._46152754{border-bottom-left-radius:0;border-bottom-right-radius:0}}._37ed43a6{display:flex;align-items:center;height:32px}._7df92d5c{min-height:32px}

package/styles/reactist.css CHANGED Viewed

@@ -26,7 +26,7 @@
 .dea25485{cursor:text;height:var(--reactist-input-wrapper-height)}.dea25485:not(._80b6b376){--reactist-input-wrapper-height:32px;border-radius:var(--reactist-border-radius-small);border:1px solid var(--reactist-inputs-idle);overflow:clip}.dea25485._80b6b376{--reactist-input-wrapper-height:24px}.dea25485._80b6b376 input{padding:0;height:var(--reactist-input-wrapper-height)}.dea25485:not(._80b6b376):focus-within{border-color:var(--reactist-inputs-focus)}.dea25485:not(._80b6b376)._1a32867a{border-color:var(--reactist-inputs-alert)!important}.dea25485 input{color:var(--reactist-content-primary);flex:1;outline:none;box-sizing:border-box;width:100%;background:transparent;border:none;--tmp-desired-height:30px;--tmp-line-height-increase:4px;--tmp-vertical-padding:calc((var(--tmp-desired-height) - var(--reactist-font-size-body) - var(--tmp-line-height-increase))/2);font-size:var(--reactist-font-size-body);line-height:calc(var(--reactist-font-size-body) + 4px);margin:0}.dea25485:not(._80b6b376) input{padding:var(--tmp-vertical-padding) var(--reactist-spacing-small)}.dbbd207e button{--reactist-btn-height:24px!important}
 :root{--reactist-avatar-size-xxsmall:16px;--reactist-avatar-size-xsmall:20px;--reactist-avatar-size-small:30px;--reactist-avatar-size-medium:32px;--reactist-avatar-size-large:34px;--reactist-avatar-size-xlarge:48px;--reactist-avatar-size-xxlarge:70px;--reactist-avatar-size-xxxlarge:100px;--reactist-avatar-size:var(--reactist-avatar-size-large)}._38a1be89{flex-shrink:0;background-position:50%;color:#fff;text-align:center;border-radius:50%;width:var(--reactist-avatar-size);height:var(--reactist-avatar-size);line-height:var(--reactist-avatar-size);background-size:var(--reactist-avatar-size);font-size:calc(var(--reactist-avatar-size)/2)}.d32e92ae{--reactist-avatar-size:var(--reactist-avatar-size-xxsmall)}._0667d719{--reactist-avatar-size:var(--reactist-avatar-size-xsmall)}.cf529fcf{--reactist-avatar-size:var(--reactist-avatar-size-small)}._6e268eab{--reactist-avatar-size:var(--reactist-avatar-size-medium)}.d64c62cf{--reactist-avatar-size:var(--reactist-avatar-size-large)}._44fb77de{--reactist-avatar-size:var(--reactist-avatar-size-xlarge)}._01f85e0e{--reactist-avatar-size:var(--reactist-avatar-size-xxlarge)}._41a5fe19{--reactist-avatar-size:var(--reactist-avatar-size-xxxlarge)}@media (min-width:768px){._6ab1577d{--reactist-avatar-size:var(--reactist-avatar-size-xxsmall)}.b52a4963{--reactist-avatar-size:var(--reactist-avatar-size-xsmall)}._714a8419{--reactist-avatar-size:var(--reactist-avatar-size-small)}._81cd4d51{--reactist-avatar-size:var(--reactist-avatar-size-medium)}.bf0a4edb{--reactist-avatar-size:var(--reactist-avatar-size-large)}.e4f0dabd{--reactist-avatar-size:var(--reactist-avatar-size-xlarge)}._67ea065d{--reactist-avatar-size:var(--reactist-avatar-size-xxlarge)}._2af7f76f{--reactist-avatar-size:var(--reactist-avatar-size-xxxlarge)}}@media (min-width:992px){._759081dc{--reactist-avatar-size:var(--reactist-avatar-size-xxsmall)}._8290d1c1{--reactist-avatar-size:var(--reactist-avatar-size-xsmall)}._48ea172d{--reactist-avatar-size:var(--reactist-avatar-size-small)}._758f6641{--reactist-avatar-size:var(--reactist-avatar-size-medium)}.f9ada088{--reactist-avatar-size:var(--reactist-avatar-size-large)}.d3bb7470{--reactist-avatar-size:var(--reactist-avatar-size-xlarge)}._9a312ee3{--reactist-avatar-size:var(--reactist-avatar-size-xxlarge)}.a1d30c23{--reactist-avatar-size:var(--reactist-avatar-size-xxxlarge)}}
 :root{--reactist-badge-font-size:10px;--reactist-badge-info-tint:#666;--reactist-badge-info-fill:#eee;--reactist-badge-positive-tint:#058527;--reactist-badge-positive-fill:#e0f0e3;--reactist-badge-promote-tint:#8f4700;--reactist-badge-promote-fill:#faead1;--reactist-badge-attention-tint:#cf473a;--reactist-badge-attention-fill:#f9e3e2;--reactist-badge-warning-tint:#fff;--reactist-badge-warning-fill:#eb8909}.c6ba5977{font-family:var(--reactist-font-family);font-weight:var(--reactist-font-weight-strong);font-size:var(--reactist-badge-font-size);text-transform:uppercase;letter-spacing:.1em;border-radius:3px;padding:1px var(--reactist-spacing-xsmall);color:var(--reactist-badge-tint);background-color:var(--reactist-badge-fill);line-height:calc(var(--reactist-badge-font-size) + 3px);white-space:nowrap}.cf731337{--reactist-badge-tint:var(--reactist-badge-info-tint);--reactist-badge-fill:var(--reactist-badge-info-fill)}._7cfc5738{--reactist-badge-tint:var(--reactist-badge-positive-tint);--reactist-badge-fill:var(--reactist-badge-positive-fill)}._63691069{--reactist-badge-tint:var(--reactist-badge-promote-tint);--reactist-badge-fill:var(--reactist-badge-promote-fill)}._28ffb572{--reactist-badge-tint:var(--reactist-badge-attention-tint);--reactist-badge-fill:var(--reactist-badge-attention-fill)}._89e77f92{--reactist-badge-tint:var(--reactist-badge-warning-tint);--reactist-badge-fill:var(--reactist-badge-warning-fill)}
-@-webkit-keyframes _20c07ee6{0%{opacity:0}to{opacity:1}}@keyframes _20c07ee6{0%{opacity:0}to{opacity:1}}:root{--reactist-modal-overlay-fill:rgba(0,0,0,0.5);--reactist-modal-padding-top:13vh}._8aa86dd3{isolation:isolate;position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden;background-color:var(--reactist-modal-overlay-fill);-webkit-animation:_20c07ee6 .2s;animation:_20c07ee6 .2s;-webkit-animation-timing-function:cubic-bezier(.4,0,.2,1);animation-timing-function:cubic-bezier(.4,0,.2,1);transition:background-color .5s;display:flex;align-items:center;justify-content:center;z-index:var(--reactist-stacking-order-modal)}._8aa86dd3>[data-focus-lock-disabled]{display:flex;flex-direction:column;align-items:center;width:100%;height:100%;box-sizing:border-box;padding:var(--reactist-spacing-xxlarge)}._8aa86dd3._713bc08f>[data-focus-lock-disabled]{padding-top:var(--reactist-modal-padding-top)}._8aa86dd3._713bc08f>[data-focus-lock-disabled] ._45139719{max-height:calc(100vh - 2*var(--reactist-modal-padding-top))}._45139719{box-shadow:0 2px 8px 0 rgba(0,0,0,.16);transition:width .2s ease-in-out,box-shadow .5s;max-width:100%}.ec8619a2 ._45139719{width:100%}._86a1d5a4 ._45139719{width:768px}._11d61de3 ._45139719{width:580px}.aee19643 ._45139719{width:450px}@media (min-width:992px){.fe449c81 ._45139719{width:960px}}@media (min-width:1200px){.fe449c81 ._45139719{width:1060px}}@media (max-width:1000px){.fe449c81 ._45139719{width:768px}}@media (max-width:580px){._8aa86dd3:not(.aee19643) ._45139719{width:100%!important;max-height:none}._8aa86dd3._61ffb38f:not(.aee19643)>[data-focus-lock-disabled]{padding-left:0;padding-right:0;padding-bottom:0}._8aa86dd3._61ffb38f:not(.aee19643) ._45139719{border-bottom-left-radius:0;border-bottom-right-radius:0}}@media (max-width:400px){._45139719{width:100%!important;max-height:none}._8aa86dd3._61ffb38f>[data-focus-lock-disabled]{padding-left:0;padding-right:0;padding-bottom:0}._8aa86dd3._61ffb38f ._45139719{border-bottom-left-radius:0;border-bottom-right-radius:0}}._49ffdac0{display:flex;align-items:center;height:32px}.ee92ccb3{min-height:32px}
+@-webkit-keyframes _21966801{0%{opacity:0}to{opacity:1}}@keyframes _21966801{0%{opacity:0}to{opacity:1}}:root{--reactist-modal-overlay-fill:rgba(0,0,0,0.5);--reactist-modal-padding-top:13vh}._756b318e{isolation:isolate;position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden;background-color:var(--reactist-modal-overlay-fill);-webkit-animation:_21966801 .2s;animation:_21966801 .2s;-webkit-animation-timing-function:cubic-bezier(.4,0,.2,1);animation-timing-function:cubic-bezier(.4,0,.2,1);transition:background-color .5s;display:flex;align-items:center;justify-content:center;z-index:var(--reactist-stacking-order-modal)}._756b318e>[data-focus-lock-disabled]{display:flex;flex-direction:column;align-items:center;width:100%;height:100%;box-sizing:border-box;padding:var(--reactist-spacing-xxlarge)}._756b318e._52bde55e>[data-focus-lock-disabled]{padding-top:var(--reactist-modal-padding-top)}._756b318e._52bde55e>[data-focus-lock-disabled] ._46152754{max-height:calc(100vh - 2*var(--reactist-modal-padding-top))}._46152754{box-shadow:0 2px 8px 0 rgba(0,0,0,.16);transition:width .2s ease-in-out,box-shadow .5s;max-width:100%}.bf469f5d ._46152754{width:100%}._3208ba07 ._46152754{width:768px}._29f86ad4 ._46152754{width:580px}._64c0762d ._46152754{width:480px}._3196b4d0 ._46152754{width:448px}@media (min-width:992px){._3517025e ._46152754{width:960px}}@media (min-width:1200px){._3517025e ._46152754{width:1060px}}@media (max-width:1000px){._3517025e ._46152754{width:768px}}@media (max-width:580px){._756b318e:not(._3196b4d0):not(._64c0762d) ._46152754{width:100%!important;max-height:none}._756b318e._8d20cc11:not(._3196b4d0):not(._64c0762d)>[data-focus-lock-disabled]{padding-left:0;padding-right:0;padding-bottom:0}._756b318e._8d20cc11:not(._3196b4d0):not(._64c0762d) ._46152754{border-bottom-left-radius:0;border-bottom-right-radius:0}}@media (max-width:400px){._46152754{width:100%!important;max-height:none}._756b318e._8d20cc11>[data-focus-lock-disabled]{padding-left:0;padding-right:0;padding-bottom:0}._756b318e._8d20cc11 ._46152754{border-bottom-left-radius:0;border-bottom-right-radius:0}}._37ed43a6{display:flex;align-items:center;height:32px}._7df92d5c{min-height:32px}
 :root{--reactist-tab-themed-background:var(--reactist-bg-default);--reactist-tab-themed-foreground:#006f85;--reactist-tab-themed-unselected:#006f85;--reactist-tab-themed-track:#f2f6f7;--reactist-tab-themed-border:var(--reactist-divider-secondary);--reactist-tab-neutral-background:var(--reactist-bg-default);--reactist-tab-neutral-foreground:var(--reactist-content-primary);--reactist-tab-neutral-unselected:var(--reactist-content-tertiary);--reactist-tab-neutral-track:var(--reactist-framework-fill-selected);--reactist-tab-neutral-border:var(--reactist-divider-primary);--reactist-tab-track-border-width:2px;--reactist-tab-border-radius:20px;--reactist-tab-border-width:1px;--reactist-tab-height:30px}.e96bf360{box-sizing:border-box;padding:0 var(--reactist-spacing-medium);border:none;background:none;cursor:pointer;font-size:var(--reactist-font-size-body);font-weight:var(--reactist-font-weight-medium);line-height:var(--reactist-tab-height);z-index:1;text-decoration:none;border:var(--reactist-tab-border-width) solid transparent;border-radius:var(--reactist-tab-border-radius)}._430e252d{position:absolute;top:calc(-1*var(--reactist-tab-track-border-width));right:calc(-1*var(--reactist-tab-track-border-width));bottom:calc(-1*var(--reactist-tab-track-border-width));left:calc(-1*var(--reactist-tab-track-border-width));border-radius:var(--reactist-tab-border-radius);border-width:var(--reactist-tab-track-border-width);border-style:solid}.e96bf360,.f631ccbe{color:var(--reactist-tab-neutral-unselected)}.f631ccbe[aria-selected=true],.e96bf360[aria-selected=true]{background-color:var(--reactist-tab-neutral-background);color:var(--reactist-tab-neutral-foreground);border-color:var(--reactist-tab-neutral-border)}._6ba96acc{color:var(--reactist-tab-themed-unselected)}._6ba96acc[aria-selected=true]{background-color:var(--reactist-tab-themed-background);color:var(--reactist-tab-themed-foreground);border-color:var(--reactist-tab-themed-border)}._430e252d,.ef4cd8d3{background:var(--reactist-tab-neutral-track);border-color:var(--reactist-tab-neutral-track)}._344b3b10{background:var(--reactist-tab-themed-track);border-color:var(--reactist-tab-themed-track)}
 ._487c82cd{text-overflow:ellipsis;max-width:300px;z-index:var(--reactist-stacking-order-tooltip)}
 .reactist_menulist[role=menu]{min-height:44px;max-height:var(--popover-available-height);overflow:auto;display:block;white-space:nowrap;background:hsla(0,0%,100%,.99);outline:none;font-size:var(--reactist-font-size-copy);padding:4px 0;min-width:180px;border:1px solid var(--reactist-divider-secondary);border-radius:3px;margin:-4px;z-index:var(--reactist-stacking-order-menu)}.reactist_menulist[role=menu] .reactist_menugroup__label,.reactist_menulist[role=menu] [role=menuitem]{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;outline:none;text-align:left;display:flex;align-items:center;padding:5px 10px;color:inherit;border:none;background-color:transparent;font-family:var(--reactist-font-family);font-size:var(--reactist-font-size-copy)}.reactist_menulist[role=menu] .reactist_menugroup__label{color:var(--reactist-content-secondary);font-size:var(--reactist-font-size-copy)}.reactist_menulist[role=menu] [role=menuitem]{width:100%;box-sizing:border-box}.reactist_menulist[role=menu] [role=menuitem]:focus,.reactist_menulist[role=menu] [role=menuitem]:hover,.reactist_menulist[role=menu] [role=menuitem][aria-expanded=true]{color:var(--reactist-content-primary);background-color:var(--reactist-bg-selected)}.reactist_menulist[role=menu] [role=menuitem]:disabled,.reactist_menulist[role=menu] [role=menuitem][aria-disabled=true]{color:var(--reactist-content-secondary);pointer-events:none}.reactist_menulist[role=menu] a[role=menuitem]{cursor:default;text-decoration:none}.reactist_menulist[role=menu] a[role=menuitem]:hover{text-decoration:none}.reactist_menulist[role=menu] [role=menu]{margin-top:-5px}.reactist_menulist[role=menu] hr{border:none;height:1px;background-color:var(--reactist-bg-selected);margin:4px 0}

/package/styles/{box.css → inline.css} RENAMED Viewed

File without changes

/package/styles/{divider.css → stack.css} RENAMED Viewed

File without changes