@doist/reactist 24.2.0-beta → 25.0.0-beta.1

package/es/heading/heading.js.map

@@ -1 +1 @@
-{"version":3,"file":"heading.js","sources":["../../src/heading/heading.tsx"],"sourcesContent":["import * as React from 'react'\nimport { getClassNames } from '../utils/responsive-props'\nimport { Box } from '../box'\nimport styles from './heading.module.css'\nimport type { ObfuscatedClassName } from '../utils/polymorphism'\nimport type { Tone } from '../utils/common-types'\nimport type { BoxProps } from '../box'\n\ntype HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6 | '1' | '2' | '3' | '4' | '5' | '6'\ntype HeadingElement = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'\n\n/**\n * FIXME: This is a workaround for consumers that are using newer versions of React types that no longer have these props.\n * Once we upgrade Reactist to the newest React types, we should be able to remove these.\n */\ntype DeprecatedProps = 'placeholder' | 'onPointerEnterCapture' | 'onPointerLeaveCapture'\n\ntype SupportedHeadingElementProps = Omit<\n    JSX.IntrinsicElements[HeadingElement],\n    'className' | 'children' | DeprecatedProps\n>\n\ntype HeadingProps = SupportedHeadingElementProps & {\n    children: React.ReactNode\n    /**\n     * The semantic level of the heading.\n     */\n    level: HeadingLevel\n    /**\n     * The weight of the heading. Used to de-emphasize the heading visually when using 'medium' or 'light'.\n     *\n     * @default 'regular'\n     */\n    weight?: 'regular' | 'medium' | 'light'\n    /**\n     * Shifts the default heading visual text size up or down, depending on the original size\n     * imposed by the `level`. The heading continues to be semantically at the given level.\n     *\n     * By default, no value is applied, and the default size from the level is applied. The values\n     * have the following effect:\n     *\n     * - 'smaller' shifts the default level size down in the font-size scale (it tends to make the\n     * level look visually as if it were of the immediately lower level).\n     * - 'larger' has the opposite effect than 'smaller' shifting the visual font size up in the\n     * scale.\n     * - 'largest' can be thought of as applying 'larger' twice.\n     *\n     * @see level\n     * @default undefined\n     */\n    size?: 'smaller' | 'larger' | 'largest'\n    /**\n     * The tone (semantic color) of the heading.\n     *\n     * @default 'normal'\n     */\n    tone?: Tone\n    /**\n     * Used to truncate the heading to a given number of lines.\n     *\n     * It will add an ellipsis (`…`) to the text at the end of the last line, only if the text was\n     * truncated. If the text fits without it being truncated, no ellipsis is added.\n     *\n     * By default, the text is not truncated at all, no matter how many lines it takes to render it.\n     *\n     * @default undefined\n     */\n    lineClamp?: 1 | 2 | 3 | 4 | 5 | '1' | '2' | '3' | '4' | '5'\n    /**\n     * How to align the heading text horizontally.\n     *\n     * @default 'start'\n     */\n    align?: BoxProps['textAlign']\n}\n\nconst Heading = React.forwardRef<HTMLHeadingElement, HeadingProps & ObfuscatedClassName>(\n    function Heading(\n        {\n            level,\n            weight = 'regular',\n            size,\n            tone = 'normal',\n            children,\n            lineClamp,\n            align,\n            exceptionallySetClassName,\n            ...props\n        },\n        ref,\n    ) {\n        // In TypeScript v4.1, this would be properly recognized without needing the type assertion\n        // https://devblogs.microsoft.com/typescript/announcing-typescript-4-1-beta/#template-literal-types\n        const headingElementName = `h${level}` as HeadingElement\n        const lineClampMultipleLines =\n            typeof lineClamp === 'string' ? parseInt(lineClamp, 10) > 1 : (lineClamp || 0) > 1\n\n        return (\n            <Box\n                {...props}\n                className={[\n                    exceptionallySetClassName,\n                    styles.heading,\n                    weight !== 'regular' ? getClassNames(styles, 'weight', weight) : null,\n                    tone !== 'normal' ? getClassNames(styles, 'tone', tone) : null,\n                    getClassNames(styles, 'size', size),\n                    lineClampMultipleLines ? styles.lineClampMultipleLines : null,\n                    lineClamp ? getClassNames(styles, 'lineClamp', lineClamp.toString()) : null,\n                ]}\n                textAlign={align}\n                // Prevents emojis from being cut-off\n                // See https://github.com/Doist/reactist/pull/528\n                paddingRight={lineClamp ? 'xsmall' : undefined}\n                as={headingElementName}\n                ref={ref}\n            >\n                {children}\n            </Box>\n        )\n    },\n)\n\nexport type { HeadingProps, HeadingLevel }\nexport { Heading }\n"],"names":["Heading","React","ref","level","weight","size","tone","children","lineClamp","align","exceptionallySetClassName","props","headingElementName","lineClampMultipleLines","parseInt","Box","className","styles","heading","getClassNames","toString","textAlign","paddingRight","undefined","as"],"mappings":";;;;;;;MA4EMA,OAAO,gBAAGC,UAAA,CACZ,SAASD,OAAT,OAYIE,GAZJ;MACI;IACIC,KADJ;IAEIC,MAAM,GAAG,SAFb;IAGIC,IAHJ;IAIIC,IAAI,GAAG,QAJX;IAKIC,QALJ;IAMIC,SANJ;IAOIC,KAPJ;IAQIC;;MACGC;;;;EAMP,MAAMC,kBAAkB,SAAOT,KAA/B;EACA,MAAMU,sBAAsB,GACxB,OAAOL,SAAP,KAAqB,QAArB,GAAgCM,QAAQ,CAACN,SAAD,EAAY,EAAZ,CAAR,GAA0B,CAA1D,GAA8D,CAACA,SAAS,IAAI,CAAd,IAAmB,CADrF;EAGA,oBACIP,aAAA,CAACc,GAAD,oCACQJ,KADR;IAEIK,SAAS,EAAE,CACPN,yBADO,EAEPO,MAAM,CAACC,OAFA,EAGPd,MAAM,KAAK,SAAX,GAAuBe,aAAa,CAACF,MAAD,EAAS,QAAT,EAAmBb,MAAnB,CAApC,GAAiE,IAH1D,EAIPE,IAAI,KAAK,QAAT,GAAoBa,aAAa,CAACF,MAAD,EAAS,MAAT,EAAiBX,IAAjB,CAAjC,GAA0D,IAJnD,EAKPa,aAAa,CAACF,MAAD,EAAS,MAAT,EAAiBZ,IAAjB,CALN,EAMPQ,sBAAsB,GAAGI,MAAM,CAACJ,sBAAV,GAAmC,IANlD,EAOPL,SAAS,GAAGW,aAAa,CAACF,MAAD,EAAS,WAAT,EAAsBT,SAAS,CAACY,QAAV,EAAtB,CAAhB,GAA8D,IAPhE,CAFf;IAWIC,SAAS,EAAEZ,KAXf;;;IAcIa,YAAY,EAAEd,SAAS,GAAG,QAAH,GAAce,SAdzC;IAeIC,EAAE,EAAEZ,kBAfR;IAgBIV,GAAG,EAAEA;MAEJK,QAlBL,CADJ;AAsBH,CA3CW;;;;"}
+{"version":3,"file":"heading.js","sources":["../../src/heading/heading.tsx"],"sourcesContent":["import * as React from 'react'\nimport { getClassNames } from '../utils/responsive-props'\nimport { Box } from '../box'\nimport styles from './heading.module.css'\nimport type { ObfuscatedClassName, Tone } from '../utils/common-types'\nimport type { BoxProps } from '../box'\n\ntype HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6 | '1' | '2' | '3' | '4' | '5' | '6'\ntype HeadingElement = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'\n\ntype HeadingProps = Omit<React.HTMLAttributes<HTMLHeadingElement>, 'className' | 'children'> & {\n    children: React.ReactNode\n    /**\n     * The semantic level of the heading.\n     */\n    level: HeadingLevel\n\n    /**\n     * The weight of the heading. Used to de-emphasize the heading visually when using 'medium' or 'light'.\n     *\n     * @default 'regular'\n     */\n    weight?: 'regular' | 'medium' | 'light'\n\n    /**\n     * Shifts the default heading visual text size up or down, depending on the original size\n     * imposed by the `level`. The heading continues to be semantically at the given level.\n     *\n     * By default, no value is applied, and the default size from the level is applied. The values\n     * have the following effect:\n     *\n     * - 'smaller' shifts the default level size down in the font-size scale (it tends to make the\n     * level look visually as if it were of the immediately lower level).\n     * - 'larger' has the opposite effect than 'smaller' shifting the visual font size up in the\n     * scale.\n     * - 'largest' can be thought of as applying 'larger' twice.\n     *\n     * @see level\n     * @default undefined\n     */\n    size?: 'smaller' | 'larger' | 'largest'\n\n    /**\n     * The tone (semantic color) of the heading.\n     *\n     * @default 'normal'\n     */\n    tone?: Tone\n\n    /**\n     * Used to truncate the heading to a given number of lines.\n     *\n     * It will add an ellipsis (`…`) to the text at the end of the last line, only if the text was\n     * truncated. If the text fits without it being truncated, no ellipsis is added.\n     *\n     * By default, the text is not truncated at all, no matter how many lines it takes to render it.\n     *\n     * @default undefined\n     */\n    lineClamp?: 1 | 2 | 3 | 4 | 5 | '1' | '2' | '3' | '4' | '5'\n\n    /**\n     * How to align the heading text horizontally.\n     *\n     * @default 'start'\n     */\n    align?: BoxProps['textAlign']\n}\n\nconst Heading = React.forwardRef<HTMLHeadingElement, HeadingProps & ObfuscatedClassName>(\n    function Heading(\n        {\n            level,\n            weight = 'regular',\n            size,\n            tone = 'normal',\n            children,\n            lineClamp,\n            align,\n            exceptionallySetClassName,\n            ...props\n        },\n        ref,\n    ) {\n        // In TypeScript v4.1, this would be properly recognized without needing the type assertion\n        // https://devblogs.microsoft.com/typescript/announcing-typescript-4-1-beta/#template-literal-types\n        const headingElementName = `h${level}` as HeadingElement\n        const lineClampMultipleLines =\n            typeof lineClamp === 'string' ? parseInt(lineClamp, 10) > 1 : (lineClamp || 0) > 1\n\n        return (\n            <Box\n                {...props}\n                className={[\n                    exceptionallySetClassName,\n                    styles.heading,\n                    weight !== 'regular' ? getClassNames(styles, 'weight', weight) : null,\n                    tone !== 'normal' ? getClassNames(styles, 'tone', tone) : null,\n                    getClassNames(styles, 'size', size),\n                    lineClampMultipleLines ? styles.lineClampMultipleLines : null,\n                    lineClamp ? getClassNames(styles, 'lineClamp', lineClamp.toString()) : null,\n                ]}\n                textAlign={align}\n                // Prevents emojis from being cut-off\n                // See https://github.com/Doist/reactist/pull/528\n                paddingRight={lineClamp ? 'xsmall' : undefined}\n                as={headingElementName}\n                ref={ref}\n            >\n                {children}\n            </Box>\n        )\n    },\n)\n\nexport type { HeadingProps, HeadingLevel }\nexport { Heading }\n"],"names":["Heading","React","ref","level","weight","size","tone","children","lineClamp","align","exceptionallySetClassName","props","headingElementName","lineClampMultipleLines","parseInt","Box","className","styles","heading","getClassNames","toString","textAlign","paddingRight","undefined","as"],"mappings":";;;;;;;MAqEMA,OAAO,gBAAGC,UAAA,CACZ,SAASD,OAAT,OAYIE,GAZJ;MACI;IACIC,KADJ;IAEIC,MAAM,GAAG,SAFb;IAGIC,IAHJ;IAIIC,IAAI,GAAG,QAJX;IAKIC,QALJ;IAMIC,SANJ;IAOIC,KAPJ;IAQIC;;MACGC;;;;EAMP,MAAMC,kBAAkB,SAAOT,KAA/B;EACA,MAAMU,sBAAsB,GACxB,OAAOL,SAAP,KAAqB,QAArB,GAAgCM,QAAQ,CAACN,SAAD,EAAY,EAAZ,CAAR,GAA0B,CAA1D,GAA8D,CAACA,SAAS,IAAI,CAAd,IAAmB,CADrF;EAGA,oBACIP,aAAA,CAACc,GAAD,oCACQJ,KADR;IAEIK,SAAS,EAAE,CACPN,yBADO,EAEPO,MAAM,CAACC,OAFA,EAGPd,MAAM,KAAK,SAAX,GAAuBe,aAAa,CAACF,MAAD,EAAS,QAAT,EAAmBb,MAAnB,CAApC,GAAiE,IAH1D,EAIPE,IAAI,KAAK,QAAT,GAAoBa,aAAa,CAACF,MAAD,EAAS,MAAT,EAAiBX,IAAjB,CAAjC,GAA0D,IAJnD,EAKPa,aAAa,CAACF,MAAD,EAAS,MAAT,EAAiBZ,IAAjB,CALN,EAMPQ,sBAAsB,GAAGI,MAAM,CAACJ,sBAAV,GAAmC,IANlD,EAOPL,SAAS,GAAGW,aAAa,CAACF,MAAD,EAAS,WAAT,EAAsBT,SAAS,CAACY,QAAV,EAAtB,CAAhB,GAA8D,IAPhE,CAFf;IAWIC,SAAS,EAAEZ,KAXf;;;IAcIa,YAAY,EAAEd,SAAS,GAAG,QAAH,GAAce,SAdzC;IAeIC,EAAE,EAAEZ,kBAfR;IAgBIV,GAAG,EAAEA;MAEJK,QAlBL,CADJ;AAsBH,CA3CW;;;;"}

package/es/index.js

@@ -1,4 +1,4 @@
-export { Box } from './box/box.js';
+export { Box, getBoxClassNames } from './box/box.js';
 export { Column, Columns } from './columns/columns.js';
 export { Divider } from './divider/divider.js';
 export { Inline } from './inline/inline.js';
@@ -6,7 +6,7 @@ export { Stack } from './stack/stack.js';
 export { Hidden } from './hidden/hidden.js';
 export { HiddenVisually } from './hidden-visually/hidden-visually.js';
 export { Tooltip } from './tooltip/tooltip.js';
-export { Button } from './button/button.js';
+export { Button, IconButton } from './button/button.js';
 export { Alert } from './alert/alert.js';
 export { Banner } from './banner/banner.js';
 export { Loading } from './loading/loading.js';
@@ -16,7 +16,6 @@ export { StaticToast } from './toast/static-toast.js';
 export { Toast, ToastsProvider, useToasts } from './toast/use-toasts.js';
 export { Heading } from './heading/heading.js';
 export { Prose } from './prose/prose.js';
-export { ButtonLink } from './button-link/button-link.js';
 export { TextLink } from './text-link/text-link.js';
 export { CheckboxField } from './checkbox-field/checkbox-field.js';
 export { TextField } from './text-field/text-field.js';

package/es/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/es/loading/loading.js.map

@@ -1 +1 @@
-{"version":3,"file":"loading.js","sources":["../../src/loading/loading.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Box } from '../box'\nimport { Spinner } from '../spinner'\n\ntype Size = 'xsmall' | 'small' | 'medium' | 'large'\n\ntype NativeProps = Omit<\n    JSX.IntrinsicElements['div'],\n    'className' | 'aria-describedby' | 'aria-label' | 'aria-labelledby' | 'role' | 'size'\n>\n\ntype LoadingProps = NativeProps & {\n    /**\n     * The size of the loading spinner.\n     * @default 'small'\n     */\n    size?: Size\n    /**\n     * A escape hatch in case you need to provide a custom class name to the container element.\n     */\n    exceptionallySetClassName?: string\n    /** Identifies the element (or elements) that describes the loading component for assistive technologies. */\n    'aria-describedby'?: string\n} & (\n        | {\n              /** Defines a string value that labels the current loading component for assistive technologies. */\n              'aria-label': string\n              'aria-labelledby'?: never\n          }\n        | {\n              /** Identifies the element (or elements) that labels the current loading component for assistive technologies. */\n              'aria-labelledby': string\n              'aria-label'?: never\n          }\n    )\n\nconst sizeMapping: Record<Size, number> = {\n    xsmall: 16,\n    small: 24,\n    medium: 36,\n    large: 48,\n}\n\nfunction Loading({ size = 'small', exceptionallySetClassName, ...props }: LoadingProps) {\n    const numericSize = sizeMapping[size] ?? sizeMapping.small\n    const ariaLabel = props['aria-label']\n        ? props['aria-label']\n        : !props['aria-labelledby']\n        ? 'Loading…'\n        : undefined\n\n    return (\n        <Box\n            {...props}\n            aria-label={ariaLabel}\n            className={exceptionallySetClassName}\n            display=\"flex\"\n            alignItems=\"center\"\n            justifyContent=\"center\"\n            role=\"progressbar\"\n        >\n            <Spinner size={numericSize} aria-hidden />\n        </Box>\n    )\n}\n\nexport { Loading }\nexport type { LoadingProps }\n"],"names":["sizeMapping","xsmall","small","medium","large","Loading","size","exceptionallySetClassName","props","numericSize","ariaLabel","undefined","React","Box","className","display","alignItems","justifyContent","role","Spinner"],"mappings":";;;;;;AAoCA,MAAMA,WAAW,GAAyB;EACtCC,MAAM,EAAE,EAD8B;EAEtCC,KAAK,EAAE,EAF+B;EAGtCC,MAAM,EAAE,EAH8B;EAItCC,KAAK,EAAE;AAJ+B,CAA1C;;AAOA,SAASC,OAAT;;;MAAiB;IAAEC,IAAI,GAAG,OAAT;IAAkBC;;MAA8BC;;EAC7D,MAAMC,WAAW,wBAAGT,WAAW,CAACM,IAAD,CAAd,gCAAwBN,WAAW,CAACE,KAArD;EACA,MAAMQ,SAAS,GAAGF,KAAK,CAAC,YAAD,CAAL,GACZA,KAAK,CAAC,YAAD,CADO,GAEZ,CAACA,KAAK,CAAC,iBAAD,CAAN,GACA,UADA,GAEAG,SAJN;EAMA,oBACIC,aAAA,CAACC,GAAD,oCACQL,KADR;kBAEgBE,SAFhB;IAGII,SAAS,EAAEP,yBAHf;IAIIQ,OAAO,EAAC,MAJZ;IAKIC,UAAU,EAAC,QALf;IAMIC,cAAc,EAAC,QANnB;IAOIC,IAAI,EAAC;mBAELN,aAAA,CAACO,OAAD;IAASb,IAAI,EAAEG;;GAAf,CATJ,CADJ;AAaH;;;;"}
+{"version":3,"file":"loading.js","sources":["../../src/loading/loading.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Box } from '../box'\nimport { Spinner } from '../spinner'\nimport type { ObfuscatedClassName } from '../utils/common-types'\n\ntype Size = 'xsmall' | 'small' | 'medium' | 'large'\n\ntype NativeProps = Omit<\n    React.HTMLAttributes<HTMLDivElement>,\n    'className' | 'aria-describedby' | 'aria-label' | 'aria-labelledby' | 'role' | 'size'\n>\n\ntype LoadingProps = NativeProps &\n    ObfuscatedClassName & {\n        /**\n         * The size of the loading spinner.\n         * @default 'small'\n         */\n        size?: Size\n\n        /**\n         * Identifies the element (or elements) that describes the loading component for assistive technologies.\n         */\n        'aria-describedby'?: string\n    } & (\n        | {\n              /** Defines a string value that labels the current loading component for assistive technologies. */\n              'aria-label': string\n              'aria-labelledby'?: never\n          }\n        | {\n              /** Identifies the element (or elements) that labels the current loading component for assistive technologies. */\n              'aria-labelledby': string\n              'aria-label'?: never\n          }\n    )\n\nconst sizeMapping: Record<Size, number> = {\n    xsmall: 16,\n    small: 24,\n    medium: 36,\n    large: 48,\n}\n\nfunction Loading({ size = 'small', exceptionallySetClassName, ...props }: LoadingProps) {\n    const numericSize = sizeMapping[size] ?? sizeMapping.small\n    const ariaLabel = props['aria-label']\n        ? props['aria-label']\n        : !props['aria-labelledby']\n        ? 'Loading…'\n        : undefined\n\n    return (\n        <Box\n            {...props}\n            aria-label={ariaLabel}\n            className={exceptionallySetClassName}\n            display=\"flex\"\n            alignItems=\"center\"\n            justifyContent=\"center\"\n            role=\"progressbar\"\n        >\n            <Spinner size={numericSize} aria-hidden />\n        </Box>\n    )\n}\n\nexport { Loading }\nexport type { LoadingProps }\n"],"names":["sizeMapping","xsmall","small","medium","large","Loading","size","exceptionallySetClassName","props","numericSize","ariaLabel","undefined","React","Box","className","display","alignItems","justifyContent","role","Spinner"],"mappings":";;;;;;AAqCA,MAAMA,WAAW,GAAyB;EACtCC,MAAM,EAAE,EAD8B;EAEtCC,KAAK,EAAE,EAF+B;EAGtCC,MAAM,EAAE,EAH8B;EAItCC,KAAK,EAAE;AAJ+B,CAA1C;;AAOA,SAASC,OAAT;;;MAAiB;IAAEC,IAAI,GAAG,OAAT;IAAkBC;;MAA8BC;;EAC7D,MAAMC,WAAW,wBAAGT,WAAW,CAACM,IAAD,CAAd,gCAAwBN,WAAW,CAACE,KAArD;EACA,MAAMQ,SAAS,GAAGF,KAAK,CAAC,YAAD,CAAL,GACZA,KAAK,CAAC,YAAD,CADO,GAEZ,CAACA,KAAK,CAAC,iBAAD,CAAN,GACA,UADA,GAEAG,SAJN;EAMA,oBACIC,aAAA,CAACC,GAAD,oCACQL,KADR;kBAEgBE,SAFhB;IAGII,SAAS,EAAEP,yBAHf;IAIIQ,OAAO,EAAC,MAJZ;IAKIC,UAAU,EAAC,QALf;IAMIC,cAAc,EAAC,QANnB;IAOIC,IAAI,EAAC;mBAELN,aAAA,CAACO,OAAD;IAASb,IAAI,EAAEG;;GAAf,CATJ,CADJ;AAaH;;;;"}

package/es/menu/menu.js

@@ -1,21 +1,20 @@
 import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
-import { useState, useMemo, createElement, useContext, useCallback, useEffect, forwardRef, Children, cloneElement, createContext } from 'react';
+import { useState, useMemo, createElement, forwardRef, useContext, useCallback, useEffect, Children, createContext } from 'react';
 import classNames from 'classnames';
-import { polymorphicComponent } from '../utils/polymorphism.js';
-import { useMenuStore, MenuButton as MenuButton$1, Portal, Menu as Menu$1, MenuItem as MenuItem$1, MenuGroup as MenuGroup$1 } from '@ariakit/react';
+import { useMenuStore, MenuButton as MenuButton$1, Role, Portal, Menu as Menu$1, MenuItem as MenuItem$1, MenuGroup as MenuGroup$1 } from '@ariakit/react';
 
 const _excluded = ["children", "onItemSelect"],
       _excluded2 = ["exceptionallySetClassName"],
-      _excluded3 = ["as"],
+      _excluded3 = ["render"],
       _excluded4 = ["exceptionallySetClassName", "modal"],
-      _excluded5 = ["value", "children", "onSelect", "hideOnSelect", "onClick", "exceptionallySetClassName", "as"],
+      _excluded5 = ["value", "children", "onSelect", "hideOnSelect", "onClick", "exceptionallySetClassName"],
       _excluded6 = ["label", "children", "exceptionallySetClassName"];
-const MenuContext = /*#__PURE__*/createContext( // Ariakit gives us no means to obtain a valid initial/default value of type MenuStateReturn
-// (it is normally obtained by calling useMenuState but we can't call hooks outside components).
-// This is however of little consequence since this value is only used if some of the components
-// are used outside Menu, something that should not happen and we do not support.
-// @ts-expect-error
-{});
+const MenuContext = /*#__PURE__*/createContext({
+  menuStore: null,
+  handleItemSelect: () => undefined,
+  getAnchorRect: null,
+  setAnchorRect: () => undefined
+});
 /**
  * Wrapper component to control a menu. It does not render anything, only providing the state
  * management for the menu components inside it.
@@ -48,7 +47,7 @@ function Menu(_ref) {
  */
 
 
-const MenuButton = /*#__PURE__*/polymorphicComponent(function MenuButton(_ref2, ref) {
+const MenuButton = /*#__PURE__*/forwardRef(function MenuButton(_ref2, ref) {
   let {
     exceptionallySetClassName
   } = _ref2,
@@ -57,18 +56,20 @@ const MenuButton = /*#__PURE__*/polymorphicComponent(function MenuButton(_ref2,
   const {
     menuStore
   } = useContext(MenuContext);
+
+  if (!menuStore) {
+    throw new Error('MenuButton must be wrapped in <Menu/>');
+  }
+
   return /*#__PURE__*/createElement(MenuButton$1, _objectSpread2(_objectSpread2({}, props), {}, {
     store: menuStore,
     ref: ref,
     className: classNames('reactist_menubutton', exceptionallySetClassName)
   }));
-}); //
-// ContextMenuTrigger
-//
-
-const ContextMenuTrigger = /*#__PURE__*/polymorphicComponent(function ContextMenuTrigger(_ref3, ref) {
+});
+const ContextMenuTrigger = /*#__PURE__*/forwardRef(function ContextMenuTrigger(_ref3, ref) {
   let {
-    as: component = 'div'
+    render
   } = _ref3,
       props = _objectWithoutProperties(_ref3, _excluded3);
 
@@ -76,6 +77,11 @@ const ContextMenuTrigger = /*#__PURE__*/polymorphicComponent(function ContextMen
     setAnchorRect,
     menuStore
   } = useContext(MenuContext);
+
+  if (!menuStore) {
+    throw new Error('ContextMenuTrigger must be wrapped in <Menu/>');
+  }
+
   const handleContextMenu = useCallback(function handleContextMenu(event) {
     event.preventDefault();
     setAnchorRect({
@@ -88,16 +94,17 @@ const ContextMenuTrigger = /*#__PURE__*/polymorphicComponent(function ContextMen
   useEffect(() => {
     if (!isOpen) setAnchorRect(null);
   }, [isOpen, setAnchorRect]);
-  return /*#__PURE__*/createElement(component, _objectSpread2(_objectSpread2({}, props), {}, {
+  return /*#__PURE__*/createElement(Role.div, _objectSpread2(_objectSpread2({}, props), {}, {
     onContextMenu: handleContextMenu,
-    ref
+    ref: ref,
+    render: render
   }));
 });
 /**
  * The dropdown menu itself, containing a list of menu items.
  */
 
-const MenuList = /*#__PURE__*/polymorphicComponent(function MenuList(_ref4, ref) {
+const MenuList = /*#__PURE__*/forwardRef(function MenuList(_ref4, ref) {
   let {
     exceptionallySetClassName,
     modal = true
@@ -108,6 +115,11 @@ const MenuList = /*#__PURE__*/polymorphicComponent(function MenuList(_ref4, ref)
     menuStore,
     getAnchorRect
   } = useContext(MenuContext);
+
+  if (!menuStore) {
+    throw new Error('MenuList must be wrapped in <Menu/>');
+  }
+
   const isOpen = menuStore.useState('open');
   return isOpen ? /*#__PURE__*/createElement(Portal, {
     preserveTabOrder: true
@@ -126,15 +138,14 @@ const MenuList = /*#__PURE__*/polymorphicComponent(function MenuList(_ref4, ref)
  * callback.
  */
 
-const MenuItem = /*#__PURE__*/polymorphicComponent(function MenuItem(_ref5, ref) {
+const MenuItem = /*#__PURE__*/forwardRef(function MenuItem(_ref5, ref) {
   let {
     value,
     children,
     onSelect,
     hideOnSelect = true,
     onClick,
-    exceptionallySetClassName,
-    as = 'button'
+    exceptionallySetClassName
   } = _ref5,
       props = _objectWithoutProperties(_ref5, _excluded5);
 
@@ -142,6 +153,11 @@ const MenuItem = /*#__PURE__*/polymorphicComponent(function MenuItem(_ref5, ref)
     handleItemSelect,
     menuStore
   } = useContext(MenuContext);
+
+  if (!menuStore) {
+    throw new Error('MenuItem must be wrapped in <Menu/>');
+  }
+
   const {
     hide
   } = menuStore;
@@ -153,7 +169,6 @@ const MenuItem = /*#__PURE__*/polymorphicComponent(function MenuItem(_ref5, ref)
     if (shouldClose) hide();
   }, [onSelect, onClick, handleItemSelect, hideOnSelect, hide, value]);
   return /*#__PURE__*/createElement(MenuItem$1, _objectSpread2(_objectSpread2({}, props), {}, {
-    as: as,
     store: menuStore,
     ref: ref,
     onClick: handleClick,
@@ -191,6 +206,11 @@ const SubMenu = /*#__PURE__*/forwardRef(function SubMenu({
     handleItemSelect: parentMenuItemSelect,
     menuStore
   } = useContext(MenuContext);
+
+  if (!menuStore) {
+    throw new Error('SubMenu must be wrapped in <Menu/>');
+  }
+
   const {
     hide: parentMenuHide
   } = menuStore;
@@ -199,19 +219,16 @@ const SubMenu = /*#__PURE__*/forwardRef(function SubMenu({
     parentMenuItemSelect == null ? void 0 : parentMenuItemSelect(value);
     parentMenuHide();
   }, [parentMenuHide, parentMenuItemSelect, onItemSelect]);
-  const [button, list] = Children.toArray(children); // Ariakit needs to be able to pass props to the MenuButton and combine it with the MenuItem component
-
-  const renderMenuButton = useCallback(function renderMenuButton(props) {
-    return /*#__PURE__*/cloneElement(button, props);
-  }, [button]);
+  const [button, list] = Children.toArray(children);
+  const buttonElement = button;
   return /*#__PURE__*/createElement(Menu, {
     onItemSelect: handleSubItemSelect
   }, /*#__PURE__*/createElement(MenuItem$1, {
-    as: "div",
     store: menuStore,
     ref: ref,
-    hideOnClick: false
-  }, renderMenuButton), list);
+    hideOnClick: false,
+    render: buttonElement
+  }, buttonElement.props.children), list);
 });
 /**
  * A way to semantically group some menu items.
@@ -220,7 +237,7 @@ const SubMenu = /*#__PURE__*/forwardRef(function SubMenu({
  * before and/or after the group if you so wish.
  */
 
-const MenuGroup = /*#__PURE__*/polymorphicComponent(function MenuGroup(_ref6, ref) {
+const MenuGroup = /*#__PURE__*/forwardRef(function MenuGroup(_ref6, ref) {
   let {
     label,
     children,
@@ -231,6 +248,11 @@ const MenuGroup = /*#__PURE__*/polymorphicComponent(function MenuGroup(_ref6, re
   const {
     menuStore
   } = useContext(MenuContext);
+
+  if (!menuStore) {
+    throw new Error('MenuGroup must be wrapped in <Menu/>');
+  }
+
   return /*#__PURE__*/createElement(MenuGroup$1, _objectSpread2(_objectSpread2({}, props), {}, {
     ref: ref,
     store: menuStore,

package/es/menu/menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu.js","sources":["../../src/menu/menu.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\n\nimport { polymorphicComponent } from '../utils/polymorphism'\n\n//\n// Reactist menu is a thin wrapper around Ariakit's menu components. This may or may not be\n// temporary. Our goal is to make it transparent for the users of Reactist of this implementation\n// detail. We may change in the future the external lib we use, or even implement it all internally,\n// as long as we keep the same outer interface as intact as possible.\n//\n// Around the heavy lifting of the external lib we just add some features to better integrate the\n// menu to Reactist's more opinionated approach (e.g. using our button with its custom variants and\n// other features, easily show keyboard shortcuts in menu items, etc.)\n//\nimport {\n    Portal,\n    MenuStore,\n    MenuStoreProps,\n    useMenuStore,\n    MenuProps as AriakitMenuProps,\n    Menu as AriakitMenu,\n    MenuGroup as AriakitMenuGroup,\n    MenuItem as AriakitMenuItem,\n    MenuButton as AriakitMenuButton,\n    MenuButtonProps as AriakitMenuButtonProps,\n} from '@ariakit/react'\n\nimport './menu.less'\n\ntype NativeProps<E extends HTMLElement> = React.DetailedHTMLProps<React.HTMLAttributes<E>, E>\n\ntype MenuContextState = {\n    menuStore: MenuStore\n    handleItemSelect?: (value: string | null | undefined) => void\n    getAnchorRect: (() => { x: number; y: number }) | null\n    setAnchorRect: (rect: { x: number; y: number } | null) => void\n}\n\nconst MenuContext = React.createContext<MenuContextState>(\n    // Ariakit gives us no means to obtain a valid initial/default value of type MenuStateReturn\n    // (it is normally obtained by calling useMenuState but we can't call hooks outside components).\n    // This is however of little consequence since this value is only used if some of the components\n    // are used outside Menu, something that should not happen and we do not support.\n    // @ts-expect-error\n    {},\n)\n\n//\n// Menu\n//\n\ntype MenuProps = Omit<MenuStoreProps, 'visible'> & {\n    /**\n     * The `Menu` must contain a `MenuList` that defines the menu options. It must also contain a\n     * `MenuButton` that triggers the menu to be opened or closed.\n     */\n    children: React.ReactNode\n\n    /**\n     * An optional callback that will be called back whenever a menu item is selected. It receives\n     * the `value` of the selected `MenuItem`.\n     *\n     * If you pass down this callback, it is recommended that you properly memoize it so it does not\n     * change on every render.\n     */\n    onItemSelect?: (value: string | null | undefined) => void\n}\n\n/**\n * Wrapper component to control a menu. It does not render anything, only providing the state\n * management for the menu components inside it.\n */\nfunction Menu({ children, onItemSelect, ...props }: MenuProps) {\n    const [anchorRect, setAnchorRect] = React.useState<{ x: number; y: number } | null>(null)\n    const getAnchorRect = React.useMemo(() => (anchorRect ? () => anchorRect : null), [anchorRect])\n    const menuStore = useMenuStore({ focusLoop: true, ...props })\n\n    const value: MenuContextState = React.useMemo(\n        () => ({ menuStore, handleItemSelect: onItemSelect, getAnchorRect, setAnchorRect }),\n        [menuStore, onItemSelect, getAnchorRect, setAnchorRect],\n    )\n\n    return <MenuContext.Provider value={value}>{children}</MenuContext.Provider>\n}\n\n//\n// MenuButton\n//\n\ntype MenuButtonProps = Omit<AriakitMenuButtonProps, 'store' | 'className' | 'as'>\n\n/**\n * A button to toggle a dropdown menu open or closed.\n */\nconst MenuButton = polymorphicComponent<'button', MenuButtonProps>(function MenuButton(\n    { exceptionallySetClassName, ...props },\n    ref,\n) {\n    const { menuStore } = React.useContext(MenuContext)\n    return (\n        <AriakitMenuButton\n            {...props}\n            store={menuStore}\n            ref={ref}\n            className={classNames('reactist_menubutton', exceptionallySetClassName)}\n        />\n    )\n})\n\n//\n// ContextMenuTrigger\n//\nconst ContextMenuTrigger = polymorphicComponent<'div', unknown>(function ContextMenuTrigger(\n    { as: component = 'div', ...props },\n    ref,\n) {\n    const { setAnchorRect, menuStore } = React.useContext(MenuContext)\n\n    const handleContextMenu = React.useCallback(\n        function handleContextMenu(event: React.MouseEvent) {\n            event.preventDefault()\n            setAnchorRect({ x: event.clientX, y: event.clientY })\n            menuStore.show()\n        },\n        [setAnchorRect, menuStore],\n    )\n\n    const isOpen = menuStore.useState('open')\n    React.useEffect(() => {\n        if (!isOpen) setAnchorRect(null)\n    }, [isOpen, setAnchorRect])\n\n    return React.createElement(component, { ...props, onContextMenu: handleContextMenu, ref })\n})\n\n//\n// MenuList\n//\n\ntype MenuListProps = Omit<AriakitMenuProps, 'store' | 'className'>\n\n/**\n * The dropdown menu itself, containing a list of menu items.\n */\nconst MenuList = polymorphicComponent<'div', MenuListProps>(function MenuList(\n    { exceptionallySetClassName, modal = true, ...props },\n    ref,\n) {\n    const { menuStore, getAnchorRect } = React.useContext(MenuContext)\n    const isOpen = menuStore.useState('open')\n\n    return isOpen ? (\n        <Portal preserveTabOrder>\n            <AriakitMenu\n                {...props}\n                store={menuStore}\n                gutter={8}\n                shift={4}\n                ref={ref}\n                className={classNames('reactist_menulist', exceptionallySetClassName)}\n                getAnchorRect={getAnchorRect ?? undefined}\n                modal={modal}\n            />\n        </Portal>\n    ) : null\n})\n\n//\n// MenuItem\n//\n\ntype MenuItemProps = {\n    /**\n     * An optional value given to this menu item. It is passed on to the parent `Menu`'s\n     * `onItemSelect` when you provide that instead of (or alongside) providing individual\n     * `onSelect` callbacks to each menu item.\n     */\n    value?: string\n\n    /**\n     * The content inside the menu item.\n     */\n    children: React.ReactNode\n\n    /**\n     * When `true` the menu item is disabled and won't be selectable or be part of the keyboard\n     * navigation across the menu options.\n     *\n     * @default true\n     */\n    disabled?: boolean\n\n    /**\n     * When `true` the menu will close when the menu item is selected, in addition to performing the\n     * action that the menu item is set out to do.\n     *\n     * Set this to `false` to make sure that a given menu item does not auto-closes the menu when\n     * selected. This should be the exception and not the norm, as the default is to auto-close.\n     *\n     * @default true\n     */\n    hideOnSelect?: boolean\n\n    /**\n     * The action to perform when the menu item is selected.\n     *\n     * If you return `false` from this function, the menu will not auto-close when this menu item\n     * is selected. Though you should use `hideOnSelect` for this purpose, this allows you to\n     * achieve the same effect conditionally and dynamically deciding at run time.\n     */\n    onSelect?: () => unknown\n\n    /**\n     * The event handler called when the menu item is clicked.\n     *\n     * This is similar to `onSelect`, but a bit different. You can certainly use it to trigger the\n     * action that the menu item represents. But in general you should prefer `onSelect` for that.\n     *\n     * The main use for this handler is to get access to the click event. This can be used, for\n     * example, to call `event.preventDefault()`, which will effectively prevent the rest of the\n     * consequences of the click, including preventing `onSelect` from being called. In particular,\n     * this is useful in menu items that are links, and you want the click to not trigger navigation\n     * under some circumstances.\n     */\n    onClick?: (event: React.MouseEvent) => void\n}\n\n/**\n * A menu item inside a menu list. It can be selected by the user, triggering the `onSelect`\n * callback.\n */\nconst MenuItem = polymorphicComponent<'button', MenuItemProps>(function MenuItem(\n    {\n        value,\n        children,\n        onSelect,\n        hideOnSelect = true,\n        onClick,\n        exceptionallySetClassName,\n        as = 'button',\n        ...props\n    },\n    ref,\n) {\n    const { handleItemSelect, menuStore } = React.useContext(MenuContext)\n    const { hide } = menuStore\n\n    const handleClick = React.useCallback(\n        function handleClick(event: React.MouseEvent<HTMLButtonElement>) {\n            onClick?.(event)\n            const onSelectResult: unknown =\n                onSelect && !event.defaultPrevented ? onSelect() : undefined\n            const shouldClose = onSelectResult !== false && hideOnSelect\n            handleItemSelect?.(value)\n            if (shouldClose) hide()\n        },\n        [onSelect, onClick, handleItemSelect, hideOnSelect, hide, value],\n    )\n\n    return (\n        <AriakitMenuItem\n            {...props}\n            as={as}\n            store={menuStore}\n            ref={ref}\n            onClick={handleClick}\n            className={exceptionallySetClassName}\n            hideOnClick={false}\n        >\n            {children}\n        </AriakitMenuItem>\n    )\n})\n\n//\n// SubMenu\n//\n\ntype SubMenuProps = Pick<MenuProps, 'children' | 'onItemSelect'>\n\n/**\n * This component can be rendered alongside other `MenuItem` inside a `MenuList` in order to have\n * a sub-menu.\n *\n * Its children are expected to have the structure of a first level menu (a `MenuButton` and a\n * `MenuList`).\n *\n * ```jsx\n * <MenuItem label=\"Edit profile\" />\n * <SubMenu>\n *   <MenuButton>More options</MenuButton>\n *   <MenuList>\n *     <MenuItem label=\"Preferences\" />\n *     <MenuItem label=\"Sign out\" />\n *   </MenuList>\n * </SubMenu>\n * ```\n *\n * The `MenuButton` will become a menu item in the current menu items list, and it will lead to\n * opening a sub-menu with the menu items list below it.\n */\nconst SubMenu = React.forwardRef<HTMLDivElement, SubMenuProps>(function SubMenu(\n    { children, onItemSelect },\n    ref,\n) {\n    const { handleItemSelect: parentMenuItemSelect, menuStore } = React.useContext(MenuContext)\n    const { hide: parentMenuHide } = menuStore\n\n    const handleSubItemSelect = React.useCallback(\n        function handleSubItemSelect(value: string | null | undefined) {\n            onItemSelect?.(value)\n            parentMenuItemSelect?.(value)\n            parentMenuHide()\n        },\n        [parentMenuHide, parentMenuItemSelect, onItemSelect],\n    )\n\n    const [button, list] = React.Children.toArray(children)\n\n    // Ariakit needs to be able to pass props to the MenuButton and combine it with the MenuItem component\n    const renderMenuButton = React.useCallback(\n        function renderMenuButton(props: MenuButtonProps) {\n            return React.cloneElement(button as React.ReactElement, props)\n        },\n        [button],\n    )\n\n    return (\n        <Menu onItemSelect={handleSubItemSelect}>\n            <AriakitMenuItem as=\"div\" store={menuStore} ref={ref} hideOnClick={false}>\n                {renderMenuButton}\n            </AriakitMenuItem>\n            {list}\n        </Menu>\n    )\n})\n\n//\n// MenuGroup\n//\n\ntype MenuGroupProps = Omit<NativeProps<HTMLDivElement>, 'className'> & {\n    /**\n     * A label to be shown visually and also used to semantically label the group.\n     */\n    label: string\n}\n\n/**\n * A way to semantically group some menu items.\n *\n * This group does not add any visual separator. You can do that yourself adding `<hr />` elements\n * before and/or after the group if you so wish.\n */\nconst MenuGroup = polymorphicComponent<'div', MenuGroupProps>(function MenuGroup(\n    { label, children, exceptionallySetClassName, ...props },\n    ref,\n) {\n    const { menuStore } = React.useContext(MenuContext)\n    return (\n        <AriakitMenuGroup\n            {...props}\n            ref={ref}\n            store={menuStore}\n            className={exceptionallySetClassName}\n        >\n            {label ? (\n                <div role=\"presentation\" className=\"reactist_menugroup__label\">\n                    {label}\n                </div>\n            ) : null}\n            {children}\n        </AriakitMenuGroup>\n    )\n})\n\nexport { ContextMenuTrigger, Menu, MenuButton, MenuList, MenuItem, SubMenu, MenuGroup }\nexport type { MenuButtonProps, MenuListProps, MenuItemProps, MenuGroupProps }\n"],"names":["MenuContext","React","Menu","children","onItemSelect","props","anchorRect","setAnchorRect","getAnchorRect","menuStore","useMenuStore","focusLoop","value","handleItemSelect","Provider","MenuButton","polymorphicComponent","ref","exceptionallySetClassName","AriakitMenuButton","store","className","classNames","ContextMenuTrigger","as","component","handleContextMenu","event","preventDefault","x","clientX","y","clientY","show","isOpen","useState","onContextMenu","MenuList","modal","Portal","preserveTabOrder","AriakitMenu","gutter","shift","undefined","MenuItem","onSelect","hideOnSelect","onClick","hide","handleClick","onSelectResult","defaultPrevented","shouldClose","AriakitMenuItem","hideOnClick","SubMenu","parentMenuItemSelect","parentMenuHide","handleSubItemSelect","button","list","toArray","renderMenuButton","MenuGroup","label","AriakitMenuGroup","role"],"mappings":"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"}
+{"version":3,"file":"menu.js","sources":["../../src/menu/menu.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\n\nimport {\n    Portal,\n    MenuStore,\n    MenuStoreProps,\n    useMenuStore,\n    MenuProps as AriakitMenuProps,\n    Menu as AriakitMenu,\n    MenuGroup as AriakitMenuGroup,\n    MenuItem as AriakitMenuItem,\n    MenuItemProps as AriakitMenuItemProps,\n    MenuButton as AriakitMenuButton,\n    MenuButtonProps as AriakitMenuButtonProps,\n    Role,\n    RoleProps,\n} from '@ariakit/react'\n\nimport './menu.less'\nimport type { ObfuscatedClassName } from '../utils/common-types'\n\ntype MenuContextState = {\n    menuStore: MenuStore | null\n    handleItemSelect?: (value: string | null | undefined) => void\n    getAnchorRect: (() => { x: number; y: number }) | null\n    setAnchorRect: (rect: { x: number; y: number } | null) => void\n}\n\nconst MenuContext = React.createContext<MenuContextState>({\n    menuStore: null,\n    handleItemSelect: () => undefined,\n    getAnchorRect: null,\n    setAnchorRect: () => undefined,\n})\n\n//\n// Menu\n//\n\ninterface MenuProps extends Omit<MenuStoreProps, 'visible'> {\n    /**\n     * The `Menu` must contain a `MenuList` that defines the menu options. It must also contain a\n     * `MenuButton` that triggers the menu to be opened or closed.\n     */\n    children: React.ReactNode\n\n    /**\n     * An optional callback that will be called back whenever a menu item is selected. It receives\n     * the `value` of the selected `MenuItem`.\n     *\n     * If you pass down this callback, it is recommended that you properly memoize it so it does not\n     * change on every render.\n     */\n    onItemSelect?: (value: string | null | undefined) => void\n}\n\n/**\n * Wrapper component to control a menu. It does not render anything, only providing the state\n * management for the menu components inside it.\n */\nfunction Menu({ children, onItemSelect, ...props }: MenuProps) {\n    const [anchorRect, setAnchorRect] = React.useState<{ x: number; y: number } | null>(null)\n    const getAnchorRect = React.useMemo(() => (anchorRect ? () => anchorRect : null), [anchorRect])\n    const menuStore = useMenuStore({ focusLoop: true, ...props })\n\n    const value: MenuContextState = React.useMemo(\n        () => ({ menuStore, handleItemSelect: onItemSelect, getAnchorRect, setAnchorRect }),\n        [menuStore, onItemSelect, getAnchorRect, setAnchorRect],\n    )\n\n    return <MenuContext.Provider value={value}>{children}</MenuContext.Provider>\n}\n\n//\n// MenuButton\n//\n\ninterface MenuButtonProps\n    extends Omit<AriakitMenuButtonProps, 'store' | 'className' | 'as'>,\n        ObfuscatedClassName {}\n\n/**\n * A button to toggle a dropdown menu open or closed.\n */\nconst MenuButton = React.forwardRef<HTMLButtonElement, MenuButtonProps>(function MenuButton(\n    { exceptionallySetClassName, ...props },\n    ref,\n) {\n    const { menuStore } = React.useContext(MenuContext)\n    if (!menuStore) {\n        throw new Error('MenuButton must be wrapped in <Menu/>')\n    }\n    return (\n        <AriakitMenuButton\n            {...props}\n            store={menuStore}\n            ref={ref}\n            className={classNames('reactist_menubutton', exceptionallySetClassName)}\n        />\n    )\n})\n\n//\n// ContextMenuTrigger\n//\n\ninterface ContextMenuTriggerProps\n    extends ObfuscatedClassName,\n        React.HTMLAttributes<HTMLDivElement>,\n        Pick<RoleProps, 'render'> {}\n\nconst ContextMenuTrigger = React.forwardRef<HTMLDivElement, ContextMenuTriggerProps>(\n    function ContextMenuTrigger({ render, ...props }, ref) {\n        const { setAnchorRect, menuStore } = React.useContext(MenuContext)\n        if (!menuStore) {\n            throw new Error('ContextMenuTrigger must be wrapped in <Menu/>')\n        }\n\n        const handleContextMenu = React.useCallback(\n            function handleContextMenu(event: React.MouseEvent) {\n                event.preventDefault()\n                setAnchorRect({ x: event.clientX, y: event.clientY })\n                menuStore.show()\n            },\n            [setAnchorRect, menuStore],\n        )\n\n        const isOpen = menuStore.useState('open')\n        React.useEffect(() => {\n            if (!isOpen) setAnchorRect(null)\n        }, [isOpen, setAnchorRect])\n\n        return <Role.div {...props} onContextMenu={handleContextMenu} ref={ref} render={render} />\n    },\n)\n\n//\n// MenuList\n//\n\ninterface MenuListProps\n    extends Omit<AriakitMenuProps, 'store' | 'className'>,\n        ObfuscatedClassName {}\n\n/**\n * The dropdown menu itself, containing a list of menu items.\n */\nconst MenuList = React.forwardRef<HTMLDivElement, MenuListProps>(function MenuList(\n    { exceptionallySetClassName, modal = true, ...props },\n    ref,\n) {\n    const { menuStore, getAnchorRect } = React.useContext(MenuContext)\n    if (!menuStore) {\n        throw new Error('MenuList must be wrapped in <Menu/>')\n    }\n\n    const isOpen = menuStore.useState('open')\n\n    return isOpen ? (\n        <Portal preserveTabOrder>\n            <AriakitMenu\n                {...props}\n                store={menuStore}\n                gutter={8}\n                shift={4}\n                ref={ref}\n                className={classNames('reactist_menulist', exceptionallySetClassName)}\n                getAnchorRect={getAnchorRect ?? undefined}\n                modal={modal}\n            />\n        </Portal>\n    ) : null\n})\n\n//\n// MenuItem\n//\n\ninterface MenuItemProps extends AriakitMenuItemProps, ObfuscatedClassName {\n    /**\n     * An optional value given to this menu item. It is passed on to the parent `Menu`'s\n     * `onItemSelect` when you provide that instead of (or alongside) providing individual\n     * `onSelect` callbacks to each menu item.\n     */\n    value?: string\n\n    /**\n     * When `true` the menu item is disabled and won't be selectable or be part of the keyboard\n     * navigation across the menu options.\n     *\n     * @default true\n     */\n    disabled?: boolean\n\n    /**\n     * When `true` the menu will close when the menu item is selected, in addition to performing the\n     * action that the menu item is set out to do.\n     *\n     * Set this to `false` to make sure that a given menu item does not auto-closes the menu when\n     * selected. This should be the exception and not the norm, as the default is to auto-close.\n     *\n     * @default true\n     */\n    hideOnSelect?: boolean\n\n    /**\n     * The action to perform when the menu item is selected.\n     *\n     * If you return `false` from this function, the menu will not auto-close when this menu item\n     * is selected. Though you should use `hideOnSelect` for this purpose, this allows you to\n     * achieve the same effect conditionally and dynamically deciding at run time.\n     */\n    onSelect?: () => unknown\n\n    /**\n     * The event handler called when the menu item is clicked.\n     *\n     * This is similar to `onSelect`, but a bit different. You can certainly use it to trigger the\n     * action that the menu item represents. But in general you should prefer `onSelect` for that.\n     *\n     * The main use for this handler is to get access to the click event. This can be used, for\n     * example, to call `event.preventDefault()`, which will effectively prevent the rest of the\n     * consequences of the click, including preventing `onSelect` from being called. In particular,\n     * this is useful in menu items that are links, and you want the click to not trigger navigation\n     * under some circumstances.\n     */\n    onClick?: (event: React.MouseEvent) => void\n}\n\n/**\n * A menu item inside a menu list. It can be selected by the user, triggering the `onSelect`\n * callback.\n */\nconst MenuItem = React.forwardRef<HTMLDivElement, MenuItemProps>(function MenuItem(\n    {\n        value,\n        children,\n        onSelect,\n        hideOnSelect = true,\n        onClick,\n        exceptionallySetClassName,\n        ...props\n    },\n    ref,\n) {\n    const { handleItemSelect, menuStore } = React.useContext(MenuContext)\n    if (!menuStore) {\n        throw new Error('MenuItem must be wrapped in <Menu/>')\n    }\n\n    const { hide } = menuStore\n    const handleClick = React.useCallback(\n        function handleClick(event: React.MouseEvent) {\n            onClick?.(event)\n            const onSelectResult: unknown =\n                onSelect && !event.defaultPrevented ? onSelect() : undefined\n            const shouldClose = onSelectResult !== false && hideOnSelect\n            handleItemSelect?.(value)\n            if (shouldClose) hide()\n        },\n        [onSelect, onClick, handleItemSelect, hideOnSelect, hide, value],\n    )\n\n    return (\n        <AriakitMenuItem\n            {...props}\n            store={menuStore}\n            ref={ref}\n            onClick={handleClick}\n            className={exceptionallySetClassName}\n            hideOnClick={false}\n        >\n            {children}\n        </AriakitMenuItem>\n    )\n})\n\n//\n// SubMenu\n//\n\ntype SubMenuProps = Pick<MenuProps, 'children' | 'onItemSelect'>\n\n/**\n * This component can be rendered alongside other `MenuItem` inside a `MenuList` in order to have\n * a sub-menu.\n *\n * Its children are expected to have the structure of a first level menu (a `MenuButton` and a\n * `MenuList`).\n *\n * ```jsx\n * <MenuItem label=\"Edit profile\" />\n * <SubMenu>\n *   <MenuButton>More options</MenuButton>\n *   <MenuList>\n *     <MenuItem label=\"Preferences\" />\n *     <MenuItem label=\"Sign out\" />\n *   </MenuList>\n * </SubMenu>\n * ```\n *\n * The `MenuButton` will become a menu item in the current menu items list, and it will lead to\n * opening a sub-menu with the menu items list below it.\n */\nconst SubMenu = React.forwardRef<HTMLDivElement, SubMenuProps>(function SubMenu(\n    { children, onItemSelect },\n    ref,\n) {\n    const { handleItemSelect: parentMenuItemSelect, menuStore } = React.useContext(MenuContext)\n    if (!menuStore) {\n        throw new Error('SubMenu must be wrapped in <Menu/>')\n    }\n\n    const { hide: parentMenuHide } = menuStore\n    const handleSubItemSelect = React.useCallback(\n        function handleSubItemSelect(value: string | null | undefined) {\n            onItemSelect?.(value)\n            parentMenuItemSelect?.(value)\n            parentMenuHide()\n        },\n        [parentMenuHide, parentMenuItemSelect, onItemSelect],\n    )\n\n    const [button, list] = React.Children.toArray(children)\n    const buttonElement = button as React.ReactElement<MenuButtonProps>\n\n    return (\n        <Menu onItemSelect={handleSubItemSelect}>\n            <AriakitMenuItem store={menuStore} ref={ref} hideOnClick={false} render={buttonElement}>\n                {buttonElement.props.children}\n            </AriakitMenuItem>\n            {list}\n        </Menu>\n    )\n})\n\n//\n// MenuGroup\n//\n\ninterface MenuGroupProps\n    extends Omit<React.HTMLAttributes<HTMLDivElement>, 'className'>,\n        ObfuscatedClassName {\n    /**\n     * A label to be shown visually and also used to semantically label the group.\n     */\n    label: string\n}\n\n/**\n * A way to semantically group some menu items.\n *\n * This group does not add any visual separator. You can do that yourself adding `<hr />` elements\n * before and/or after the group if you so wish.\n */\nconst MenuGroup = React.forwardRef<HTMLDivElement, MenuGroupProps>(function MenuGroup(\n    { label, children, exceptionallySetClassName, ...props },\n    ref,\n) {\n    const { menuStore } = React.useContext(MenuContext)\n    if (!menuStore) {\n        throw new Error('MenuGroup must be wrapped in <Menu/>')\n    }\n\n    return (\n        <AriakitMenuGroup\n            {...props}\n            ref={ref}\n            store={menuStore}\n            className={exceptionallySetClassName}\n        >\n            {label ? (\n                <div role=\"presentation\" className=\"reactist_menugroup__label\">\n                    {label}\n                </div>\n            ) : null}\n            {children}\n        </AriakitMenuGroup>\n    )\n})\n\nexport { ContextMenuTrigger, Menu, MenuButton, MenuList, MenuItem, SubMenu, MenuGroup }\nexport type { MenuButtonProps, MenuListProps, MenuItemProps, MenuGroupProps }\n"],"names":["MenuContext","React","menuStore","handleItemSelect","undefined","getAnchorRect","setAnchorRect","Menu","children","onItemSelect","props","anchorRect","useMenuStore","focusLoop","value","Provider","MenuButton","ref","exceptionallySetClassName","Error","AriakitMenuButton","store","className","classNames","ContextMenuTrigger","render","handleContextMenu","event","preventDefault","x","clientX","y","clientY","show","isOpen","useState","Role","div","onContextMenu","MenuList","modal","Portal","preserveTabOrder","AriakitMenu","gutter","shift","MenuItem","onSelect","hideOnSelect","onClick","hide","handleClick","onSelectResult","defaultPrevented","shouldClose","AriakitMenuItem","hideOnClick","SubMenu","parentMenuItemSelect","parentMenuHide","handleSubItemSelect","button","list","toArray","buttonElement","MenuGroup","label","AriakitMenuGroup","role"],"mappings":"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"}

package/es/modal/modal.js

@@ -6,13 +6,13 @@ import { Columns, Column } from '../columns/columns.js';
 import { Divider } from '../divider/divider.js';
 import { Inline } from '../inline/inline.js';
 import { useDialogStore, Portal, Dialog } from '@ariakit/react';
-import { Button } from '../button/button.js';
+import { IconButton } from '../button/button.js';
 import { CloseIcon } from '../icons/close-icon.js';
 import FocusLock from 'react-focus-lock';
 import { hideOthers } from 'aria-hidden';
 import styles from './modal.module.css.js';
 
-const _excluded = ["isOpen", "onDismiss", "height", "width", "exceptionallySetClassName", "exceptionallySetOverlayClassName", "autoFocus", "hideOnEscape", "hideOnInteractOutside", "children", "portalElement", "onKeyDown"],
+const _excluded = ["isOpen", "onDismiss", "height", "width", "exceptionallySetClassName", "exceptionallySetOverlayClassName", "autoFocus", "hideOnEscape", "hideOnInteractOutside", "children", "portalElement", "onKeyDown", "className"],
       _excluded2 = ["children", "button", "withDivider", "exceptionallySetClassName"],
       _excluded3 = ["exceptionallySetClassName", "children"],
       _excluded4 = ["exceptionallySetClassName", "withDivider"],
@@ -49,7 +49,9 @@ function Modal(_ref) {
     hideOnInteractOutside = true,
     children,
     portalElement,
-    onKeyDown
+    onKeyDown,
+    // @ts-expect-error we want to make sure to not pass it to the Dialog component
+    className
   } = _ref,
       props = _objectWithoutProperties(_ref, _excluded);
 
@@ -109,9 +111,8 @@ function Modal(_ref) {
     className: classNames(styles.overlay, styles[height], styles[width], exceptionallySetOverlayClassName),
 
     /**
-     * We're using `onPointerDown` instead of `onClick` to prevent
-     * the modal from closing when the click starts inside the modal
-     * and ends on the backdrop.
+     * We're using `onPointerDown` instead of `onClick` to prevent the modal from
+     * closing when the click starts inside the modal and ends on the backdrop.
      */
     onPointerDown: hideOnInteractOutside ? handleBackdropClick : undefined,
     ref: backdropRef
@@ -121,17 +122,18 @@ function Modal(_ref) {
     returnFocus: true
   }, /*#__PURE__*/createElement(Dialog, _objectSpread2(_objectSpread2({}, props), {}, {
     ref: dialogRef,
-    as: Box,
+    render: /*#__PURE__*/createElement(Box, {
+      borderRadius: "full",
+      background: "default",
+      display: "flex",
+      flexDirection: "column",
+      overflow: "hidden",
+      height: height === 'expand' ? 'full' : undefined,
+      flexGrow: height === 'expand' ? 1 : 0
+    }),
+    className: classNames(exceptionallySetClassName, styles.container),
     store: store,
     preventBodyScroll: true,
-    borderRadius: "full",
-    background: "default",
-    display: "flex",
-    flexDirection: "column",
-    overflow: "hidden",
-    height: height === 'expand' ? 'full' : undefined,
-    flexGrow: height === 'expand' ? 1 : 0,
-    className: [exceptionallySetClassName, styles.container],
     // Disable focus lock as we set up our own using ReactFocusLock
     modal: false,
     autoFocus: false,
@@ -167,7 +169,7 @@ function ModalCloseButton(props) {
       setIsMounted(true);
     }
   }, [isMounted]);
-  return /*#__PURE__*/createElement(Button, _objectSpread2(_objectSpread2({}, props), {}, {
+  return /*#__PURE__*/createElement(IconButton, _objectSpread2(_objectSpread2({}, props), {}, {
     variant: "quaternary",
     onClick: onDismiss,
     icon: /*#__PURE__*/createElement(CloseIcon, null),

package/es/modal/modal.js.map

@@ -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 { Button, ButtonProps } from '../button'\n\nimport styles from './modal.module.css'\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 type ModalProps = DivProps & {\n    /**\n     * The content of the modal.\n     */\n    children: React.ReactNode\n    /**\n     * Whether the modal is open and visible or not.\n     */\n    isOpen: boolean\n    /**\n     * Called when the user triggers closing the modal.\n     */\n    onDismiss?(): void\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     * 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     * Whether to set or not the focus initially to the first focusable element inside the modal.\n     */\n    autoFocus?: boolean\n    /**\n     * Controls if the modal is dismissed when pressing \"Escape\".\n     */\n    hideOnEscape?: DialogOptions['hideOnEscape']\n    /**\n     * Controls if the modal is dismissed when clicking outside the modal body, on the overlay.\n     */\n    hideOnInteractOutside?: DialogOptions['hideOnInteractOutside']\n    /**\n     * An escape hatch in case you need to provide a custom class name to the container element.\n     */\n    exceptionallySetClassName?: string\n    /**\n     * An escape hatch in case you need to provide a custom class name to the overlay element.\n     */\n    exceptionallySetOverlayClassName?: string\n    /** Defines a string value that labels the current modal for assistive technologies. */\n    'aria-label'?: string\n    /** Identifies the element (or elements) that labels the current modal for assistive technologies. */\n    'aria-labelledby'?: string\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    ...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\n                 * the modal from closing when the click starts inside the modal\n                 * 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                        as={Box}\n                        store={store}\n                        preventBodyScroll\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                        className={[exceptionallySetClassName, styles.container]}\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 type ModalCloseButtonProps = Omit<\n    ButtonProps,\n    | 'type'\n    | 'children'\n    | 'variant'\n    | 'icon'\n    | 'startIcon'\n    | 'endIcon'\n    | 'disabled'\n    | 'loading'\n    | 'tabIndex'\n    | 'width'\n    | 'align'\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        <Button\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 type ModalHeaderProps = DivProps & {\n    /**\n     * The content of the header.\n     */\n    children: React.ReactNode\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     * Whether to render a divider line below the header.\n     * @default false\n     */\n    withDivider?: boolean\n    /**\n     * A escape hatch in case you need to provide a custom class name to the container element.\n     */\n    exceptionallySetClassName?: string\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 type ModalBodyProps = DivProps & {\n    /**\n     * The content of the modal body.\n     */\n    children: React.ReactNode\n    /**\n     * A escape hatch in case you need to provide a custom class name to the container element.\n     */\n    exceptionallySetClassName?: string\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 type ModalFooterProps = DivProps & {\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     * A escape hatch in case you need to provide a custom class name to the container element.\n     */\n    exceptionallySetClassName?: string\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","onDismiss","undefined","height","isNotInternalFrame","element","ownerDocument","document","tagName","toLowerCase","Modal","isOpen","width","exceptionallySetClassName","exceptionallySetOverlayClassName","autoFocus","hideOnEscape","hideOnInteractOutside","children","portalElement","onKeyDown","props","setOpen","visible","store","useDialogStore","open","contextValue","portalRef","dialogRef","backdropRef","handleBackdropClick","event","current","contains","target","stopPropagation","disableAccessibilityTreeOutside","hideOthers","handleKeyDown","key","defaultPrevented","Portal","Box","className","classNames","styles","overlay","onPointerDown","ref","FocusLock","whiteList","returnFocus","Dialog","as","preventBodyScroll","borderRadius","background","display","flexDirection","overflow","flexGrow","container","modal","autoFocusOnShow","autoFocusOnHide","portal","backdrop","Provider","value","ModalCloseButton","includeInTabOrder","setIncludeInTabOrder","isMounted","setIsMounted","skipAutoFocus","Button","variant","onClick","icon","CloseIcon","tabIndex","ModalHeader","button","withDivider","paddingLeft","paddingRight","paddingY","Columns","space","alignY","Column","headerContent","buttonContainer","Divider","ModalBody","padding","paddingBottom","ModalFooter","ModalActions","Inline","align"],"mappings":";;;;;;;;;;;;;;;;;;;AA4BA,MAAMA,YAAY,gBAAGC,aAAA,CAAuC;EACxDC,SAAS,EAAEC,SAD6C;EAExDC,MAAM,EAAE;AAFgD,CAAvC,CAArB;;AAgGA,SAASC,kBAAT,CAA4BC,OAA5B;EACI,OAAO,EAAEA,OAAO,CAACC,aAAR,KAA0BC,QAA1B,IAAsCF,OAAO,CAACG,OAAR,CAAgBC,WAAhB,OAAkC,QAA1E,CAAP;AACH;AAED;;;;;;;;;;;SASgBC;MAAM;IAClBC,MADkB;IAElBV,SAFkB;IAGlBE,MAAM,GAAG,YAHS;IAIlBS,KAAK,GAAG,QAJU;IAKlBC,yBALkB;IAMlBC,gCANkB;IAOlBC,SAAS,GAAG,IAPM;IAQlBC,YAAY,GAAG,IARG;IASlBC,qBAAqB,GAAG,IATN;IAUlBC,QAVkB;IAWlBC,aAXkB;IAYlBC;;MACGC;;EAEH,MAAMC,OAAO,GAAGtB,WAAA,CACXuB,OAAD;IACI,IAAI,CAACA,OAAL,EAAc;MACVtB,SAAS,QAAT,YAAAA,SAAS;;GAHL,EAMZ,CAACA,SAAD,CANY,CAAhB;EAQA,MAAMuB,KAAK,GAAGC,cAAc,CAAC;IAAEC,IAAI,EAAEf,MAAR;IAAgBW;GAAjB,CAA5B;EAEA,MAAMK,YAAY,GAAsB3B,OAAA,CAAc,OAAO;IAAEC,SAAF;IAAaE;GAApB,CAAd,EAA6C,CACjFF,SADiF,EAEjFE,MAFiF,CAA7C,CAAxC;EAKA,MAAMyB,SAAS,GAAG5B,MAAA,CAAiC,IAAjC,CAAlB;EACA,MAAM6B,SAAS,GAAG7B,MAAA,CAAoC,IAApC,CAAlB;EACA,MAAM8B,WAAW,GAAG9B,MAAA,CAAoC,IAApC,CAApB;EACA,MAAM+B,mBAAmB,GAAG/B,WAAA,CACvBgC,KAAD;;;IACI;;IAGI,wBAACH,SAAS,CAACI,OAAX,aAAC,mBAAmBC,QAAnB,CAA4BF,KAAK,CAACG,MAAlC,CAAD;IAAA,wBAEAL,WAAW,CAACG,OAFZ,aAEA,qBAAqBC,QAArB,CAA8BF,KAAK,CAACG,MAApC,CALJ,EAME;MACEH,KAAK,CAACI,eAAN;MACAnC,SAAS,QAAT,YAAAA,SAAS;;GAVO,EAaxB,CAACA,SAAD,CAbwB,CAA5B;EAgBAD,eAAA,CACI,SAASqC,+BAAT;IACI,IAAI,CAAC1B,MAAD,IAAW,CAACiB,SAAS,CAACK,OAA1B,EAAmC;MAC/B;;;IAGJ,OAAOK,UAAU,CAACV,SAAS,CAACK,OAAX,CAAjB;GANR,EAQI,CAACtB,MAAD,CARJ;EAWA,MAAM4B,aAAa,GAAGvC,WAAA,CAClB,SAASuC,aAAT,CAAuBP,KAAvB;IACI,IACIhB,YAAY,IACZf,SAAS,IAAI,IADb,IAEA+B,KAAK,CAACQ,GAAN,KAAc,QAFd,IAGA,CAACR,KAAK,CAACS,gBAJX,EAKE;MACET,KAAK,CAACI,eAAN;MACAnC,SAAS;;;IAEbmB,SAAS,QAAT,YAAAA,SAAS,CAAGY,KAAH,CAAT;GAXc,EAalB,CAAC/B,SAAD,EAAYe,YAAZ,EAA0BI,SAA1B,CAbkB,CAAtB;;EAgBA,IAAI,CAACT,MAAL,EAAa;IACT,OAAO,IAAP;;;EAGJ,oBACIX,aAAA,CAAC0C,MAAD;IAAQd,SAAS,EAAEA;IAAWT,aAAa,EAAEA;GAA7C,eACInB,aAAA,CAAC2C,GAAD;mBACgB;;IAEZC,SAAS,EAAEC,UAAU,CACjBC,MAAM,CAACC,OADU,EAEjBD,MAAM,CAAC3C,MAAD,CAFW,EAGjB2C,MAAM,CAAClC,KAAD,CAHW,EAIjBE,gCAJiB;;;;;;;IAWrBkC,aAAa,EAAE/B,qBAAqB,GAAGc,mBAAH,GAAyB7B;IAC7D+C,GAAG,EAAEnB;GAfT,eAiBI9B,aAAA,CAACkD,SAAD;IAAWnC,SAAS,EAAEA;IAAWoC,SAAS,EAAE/C;IAAoBgD,WAAW,EAAE;GAA7E,eACIpD,aAAA,CAACqD,MAAD,oCACQhC,KADR;IAEI4B,GAAG,EAAEpB,SAFT;IAGIyB,EAAE,EAAEX,GAHR;IAIInB,KAAK,EAAEA,KAJX;IAKI+B,iBAAiB,MALrB;IAMIC,YAAY,EAAC,MANjB;IAOIC,UAAU,EAAC,SAPf;IAQIC,OAAO,EAAC,MARZ;IASIC,aAAa,EAAC,QATlB;IAUIC,QAAQ,EAAC,QAVb;IAWIzD,MAAM,EAAEA,MAAM,KAAK,QAAX,GAAsB,MAAtB,GAA+BD,SAX3C;IAYI2D,QAAQ,EAAE1D,MAAM,KAAK,QAAX,GAAsB,CAAtB,GAA0B,CAZxC;IAaIyC,SAAS,EAAE,CAAC/B,yBAAD,EAA4BiC,MAAM,CAACgB,SAAnC,CAbf;;IAeIC,KAAK,EAAE,KAfX;IAgBIhD,SAAS,EAAE,KAhBf;IAiBIiD,eAAe,EAAE,KAjBrB;IAkBIC,eAAe,EAAE,KAlBrB;;IAoBIC,MAAM,EAAE,KApBZ;IAqBIC,QAAQ,EAAE,KArBd;IAsBIlD,qBAAqB,EAAE,KAtB3B;IAuBID,YAAY,EAAE,KAvBlB;IAwBII,SAAS,EAAEmB;mBAEXvC,aAAA,CAACD,YAAY,CAACqE,QAAd;IAAuBC,KAAK,EAAE1C;GAA9B,EACKT,QADL,CA1BJ,CADJ,CAjBJ,CADJ,CADJ;AAsDH;AA0BD;;;;;;;SAMgBoD,iBAAiBjD;EAC7B,MAAM;IAAEpB;MAAcD,UAAA,CAAiBD,YAAjB,CAAtB;EACA,MAAM,CAACwE,iBAAD,EAAoBC,oBAApB,IAA4CxE,QAAA,CAAe,KAAf,CAAlD;EACA,MAAM,CAACyE,SAAD,EAAYC,YAAZ,IAA4B1E,QAAA,CAAe,KAAf,CAAlC;EAEAA,SAAA,CACI,SAAS2E,aAAT;IACI,IAAIF,SAAJ,EAAe;MACXD,oBAAoB,CAAC,IAAD,CAApB;KADJ,MAEO;MACHE,YAAY,CAAC,IAAD,CAAZ;;GALZ,EAQI,CAACD,SAAD,CARJ;EAWA,oBACIzE,aAAA,CAAC4E,MAAD,oCACQvD,KADR;IAEIwD,OAAO,EAAC,YAFZ;IAGIC,OAAO,EAAE7E,SAHb;IAII8E,IAAI,eAAE/E,aAAA,CAACgF,SAAD,MAAA,CAJV;IAKIC,QAAQ,EAAEV,iBAAiB,GAAG,CAAH,GAAO,CAAC;KAN3C;AASH;AA2BD;;;;;;;;SAOgBW;MAAY;IACxBhE,QADwB;IAExBiE,MAAM,GAAG,IAFe;IAGxBC,WAAW,GAAG,KAHU;IAIxBvE;;MACGQ;;EAEH,oBACIrB,aAAA,SAAA,MAAA,eACIA,aAAA,CAAC2C,GAAD,oCACQtB,KADR;IAEIiC,EAAE,EAAC,QAFP;IAGI+B,WAAW,EAAC,OAHhB;IAIIC,YAAY,EAAEH,MAAM,KAAK,KAAX,IAAoBA,MAAM,KAAK,IAA/B,GAAsC,OAAtC,GAAgD,OAJlE;IAKII,QAAQ,EAAC,OALb;IAMI3C,SAAS,EAAE/B;mBAEXb,aAAA,CAACwF,OAAD;IAASC,KAAK,EAAC;IAAQC,MAAM,EAAC;GAA9B,eACI1F,aAAA,CAAC2F,MAAD;IAAQ/E,KAAK,EAAC;GAAd,EAAsBM,QAAtB,CADJ,EAEKiE,MAAM,KAAK,KAAX,IAAoBA,MAAM,KAAK,IAA/B,gBACGnF,aAAA,MAAA;IAAK4C,SAAS,EAAEE,MAAM,CAAC8C;GAAvB,CADH,gBAGG5F,aAAA,CAAC2F,MAAD;IACI/E,KAAK,EAAC;IACNC,yBAAyB,EAAEiC,MAAM,CAAC+C;mBACtB;GAHhB,EAKK,OAAOV,MAAP,KAAkB,SAAlB,gBACGnF,aAAA,CAACsE,gBAAD;kBAA6B;IAAcvD,SAAS,EAAE;GAAtD,CADH,GAGGoE,MARR,CALR,CARJ,CADJ,EA4BKC,WAAW,gBAAGpF,aAAA,CAAC8F,OAAD,MAAA,CAAH,GAAiB,IA5BjC,CADJ;AAgCH;AAiBD;;;;;;;;;;;;;SAYgBC;MAAU;IAAElF,yBAAF;IAA6BK;;MAAaG;;EAChE,MAAM;IAAElB;MAAWH,UAAA,CAAiBD,YAAjB,CAAnB;EACA,oBACIC,aAAA,CAAC2C,GAAD,oCACQtB,KADR;IAEIuB,SAAS,EAAE/B,yBAFf;IAGIgD,QAAQ,EAAE1D,MAAM,KAAK,QAAX,GAAsB,CAAtB,GAA0B,CAHxC;IAIIA,MAAM,EAAEA,MAAM,KAAK,QAAX,GAAsB,MAAtB,GAA+BD,SAJ3C;IAKI0D,QAAQ,EAAC;mBAET5D,aAAA,CAAC2C,GAAD;IAAKqD,OAAO,EAAC;IAAQC,aAAa,EAAC;GAAnC,EACK/E,QADL,CAPJ,CADJ;AAaH;AAsBD;;;;;;;;SAOgBgF;MAAY;IACxBrF,yBADwB;IAExBuE,WAAW,GAAG;;MACX/D;;EAEH,oBACIrB,aAAA,SAAA,MAAA,EACKoF,WAAW,gBAAGpF,aAAA,CAAC8F,OAAD,MAAA,CAAH,GAAiB,IADjC,eAEI9F,aAAA,CAAC2C,GAAD;IAAKW,EAAE,EAAC;KAAajC,KAArB;IAA4BuB,SAAS,EAAE/B,yBAAvC;IAAkEmF,OAAO,EAAC;KAF9E,CADJ;AAMH;AAQD;;;;;SAIgBG;MAAa;IAAEjF;;MAAaG;;EACxC,oBACIrB,aAAA,CAACkG,WAAD,qBAAiB7E,KAAjB,gBACIrB,aAAA,CAACoG,MAAD;IAAQC,KAAK,EAAC;IAAQZ,KAAK,EAAC;GAA5B,EACKvE,QADL,CADJ,CADJ;AAOH;;;;"}
+{"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","onDismiss","undefined","height","isNotInternalFrame","element","ownerDocument","document","tagName","toLowerCase","Modal","isOpen","width","exceptionallySetClassName","exceptionallySetOverlayClassName","autoFocus","hideOnEscape","hideOnInteractOutside","children","portalElement","onKeyDown","className","props","setOpen","visible","store","useDialogStore","open","contextValue","portalRef","dialogRef","backdropRef","handleBackdropClick","event","current","contains","target","stopPropagation","disableAccessibilityTreeOutside","hideOthers","handleKeyDown","key","defaultPrevented","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","includeInTabOrder","setIncludeInTabOrder","isMounted","setIsMounted","skipAutoFocus","IconButton","variant","onClick","icon","CloseIcon","tabIndex","ModalHeader","button","withDivider","as","paddingLeft","paddingRight","paddingY","Columns","space","alignY","Column","headerContent","buttonContainer","Divider","ModalBody","padding","paddingBottom","ModalFooter","ModalActions","Inline","align"],"mappings":"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"}

package/es/password-field/password-field.js

@@ -1,6 +1,6 @@
 import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
 import { forwardRef, useState, createElement } from 'react';
-import { Button } from '../button/button.js';
+import { IconButton } from '../button/button.js';
 import { PasswordVisibleIcon } from '../icons/password-visible-icon.js';
 import { PasswordHiddenIcon } from '../icons/password-hidden-icon.js';
 import { TextField } from '../text-field/text-field.js';
@@ -18,7 +18,7 @@ const PasswordField = /*#__PURE__*/forwardRef(function PasswordField(_ref, ref)
     ref: ref,
     // @ts-expect-error TextField does not support type="password", so we override the type check here
     type: isPasswordVisible ? 'text' : 'password',
-    endSlot: /*#__PURE__*/createElement(Button, {
+    endSlot: /*#__PURE__*/createElement(IconButton, {
       variant: "quaternary",
       icon: /*#__PURE__*/createElement(Icon, {
         "aria-hidden": true

package/es/password-field/password-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"password-field.js","sources":["../../src/password-field/password-field.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { PasswordVisibleIcon } from '../icons/password-visible-icon'\nimport { PasswordHiddenIcon } from '../icons/password-hidden-icon'\n\nimport { TextField, TextFieldProps } from '../text-field'\nimport { Button } from '../button'\n\nimport type { BaseFieldVariantProps } from '../base-field'\n\n/**\n * FIXME: This is a workaround for consumers that are using newer versions of React types that no longer have these props.\n * Once we upgrade Reactist to the newest React types, we should be able to remove these.\n */\ntype DeprecatedProps = 'crossOrigin' | 'onPointerEnterCapture' | 'onPointerLeaveCapture'\n\ntype PasswordFieldProps = Omit<TextFieldProps, 'type' | 'startSlot' | 'endSlot' | DeprecatedProps> &\n    BaseFieldVariantProps & {\n        togglePasswordLabel?: string\n    }\n\nconst PasswordField = React.forwardRef<HTMLInputElement, PasswordFieldProps>(function PasswordField(\n    { togglePasswordLabel = 'Toggle password visibility', ...props },\n    ref,\n) {\n    const [isPasswordVisible, setPasswordVisible] = React.useState(false)\n    const Icon = isPasswordVisible ? PasswordVisibleIcon : PasswordHiddenIcon\n    return (\n        <TextField\n            {...props}\n            ref={ref}\n            // @ts-expect-error TextField does not support type=\"password\", so we override the type check here\n            type={isPasswordVisible ? 'text' : 'password'}\n            endSlot={\n                <Button\n                    variant=\"quaternary\"\n                    icon={<Icon aria-hidden />}\n                    aria-label={togglePasswordLabel}\n                    onClick={() => setPasswordVisible((v) => !v)}\n                />\n            }\n        />\n    )\n})\n\nexport { PasswordField }\nexport type { PasswordFieldProps }\n"],"names":["PasswordField","React","ref","togglePasswordLabel","props","isPasswordVisible","setPasswordVisible","Icon","PasswordVisibleIcon","PasswordHiddenIcon","TextField","type","endSlot","Button","variant","icon","onClick","v"],"mappings":";;;;;;;;MAqBMA,aAAa,gBAAGC,UAAA,CAAuD,SAASD,aAAT,OAEzEE,GAFyE;MACzE;IAAEC,mBAAmB,GAAG;;MAAiCC;;EAGzD,MAAM,CAACC,iBAAD,EAAoBC,kBAApB,IAA0CL,QAAA,CAAe,KAAf,CAAhD;EACA,MAAMM,IAAI,GAAGF,iBAAiB,GAAGG,mBAAH,GAAyBC,kBAAvD;EACA,oBACIR,aAAA,CAACS,SAAD,oCACQN,KADR;IAEIF,GAAG,EAAEA,GAFT;;IAIIS,IAAI,EAAEN,iBAAiB,GAAG,MAAH,GAAY,UAJvC;IAKIO,OAAO,eACHX,aAAA,CAACY,MAAD;MACIC,OAAO,EAAC;MACRC,IAAI,eAAEd,aAAA,CAACM,IAAD;;OAAA;oBACMJ;MACZa,OAAO,EAAE,MAAMV,kBAAkB,CAAEW,CAAD,IAAO,CAACA,CAAT;KAJrC;KAPZ;AAgBH,CAtBqB;;;;"}
+{"version":3,"file":"password-field.js","sources":["../../src/password-field/password-field.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { PasswordVisibleIcon } from '../icons/password-visible-icon'\nimport { PasswordHiddenIcon } from '../icons/password-hidden-icon'\n\nimport { TextField, TextFieldProps } from '../text-field'\nimport { IconButton } from '../button'\n\nimport type { BaseFieldVariantProps } from '../base-field'\n\ninterface PasswordFieldProps\n    extends Omit<TextFieldProps, 'type' | 'startSlot' | 'endSlot'>,\n        BaseFieldVariantProps {\n    togglePasswordLabel?: string\n}\n\nconst PasswordField = React.forwardRef<HTMLInputElement, PasswordFieldProps>(function PasswordField(\n    { togglePasswordLabel = 'Toggle password visibility', ...props },\n    ref,\n) {\n    const [isPasswordVisible, setPasswordVisible] = React.useState(false)\n    const Icon = isPasswordVisible ? PasswordVisibleIcon : PasswordHiddenIcon\n    return (\n        <TextField\n            {...props}\n            ref={ref}\n            // @ts-expect-error TextField does not support type=\"password\", so we override the type check here\n            type={isPasswordVisible ? 'text' : 'password'}\n            endSlot={\n                <IconButton\n                    variant=\"quaternary\"\n                    icon={<Icon aria-hidden />}\n                    aria-label={togglePasswordLabel}\n                    onClick={() => setPasswordVisible((v) => !v)}\n                />\n            }\n        />\n    )\n})\n\nexport { PasswordField }\nexport type { PasswordFieldProps }\n"],"names":["PasswordField","React","ref","togglePasswordLabel","props","isPasswordVisible","setPasswordVisible","Icon","PasswordVisibleIcon","PasswordHiddenIcon","TextField","type","endSlot","IconButton","variant","icon","onClick","v"],"mappings":";;;;;;;;MAgBMA,aAAa,gBAAGC,UAAA,CAAuD,SAASD,aAAT,OAEzEE,GAFyE;MACzE;IAAEC,mBAAmB,GAAG;;MAAiCC;;EAGzD,MAAM,CAACC,iBAAD,EAAoBC,kBAApB,IAA0CL,QAAA,CAAe,KAAf,CAAhD;EACA,MAAMM,IAAI,GAAGF,iBAAiB,GAAGG,mBAAH,GAAyBC,kBAAvD;EACA,oBACIR,aAAA,CAACS,SAAD,oCACQN,KADR;IAEIF,GAAG,EAAEA,GAFT;;IAIIS,IAAI,EAAEN,iBAAiB,GAAG,MAAH,GAAY,UAJvC;IAKIO,OAAO,eACHX,aAAA,CAACY,UAAD;MACIC,OAAO,EAAC;MACRC,IAAI,eAAEd,aAAA,CAACM,IAAD;;OAAA;oBACMJ;MACZa,OAAO,EAAE,MAAMV,kBAAkB,CAAEW,CAAD,IAAO,CAACA,CAAT;KAJrC;KAPZ;AAgBH,CAtBqB;;;;"}