@doist/reactist 22.0.2-beta → 22.2.0

package/es/alert/alert.js

@@ -18,15 +18,16 @@ function Alert({
     id: id,
     role: "alert",
     "aria-live": "polite",
-    borderRadius: "standard",
+    borderRadius: "full",
     className: [styles.container, getClassNames(styles, 'tone', tone)]
   }, /*#__PURE__*/createElement(Columns, {
     space: "small",
-    alignY: "top"
+    alignY: "center"
   }, /*#__PURE__*/createElement(Column, {
     width: "content"
   }, /*#__PURE__*/createElement(AlertIcon, {
-    tone: tone
+    tone: tone,
+    className: styles.icon
   })), /*#__PURE__*/createElement(Column, null, /*#__PURE__*/createElement(Box, {
     paddingY: "xsmall",
     paddingRight: onClose != null && closeLabel != null ? undefined : 'small'

package/es/alert/alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"alert.js","sources":["../../src/alert/alert.tsx"],"sourcesContent":["import * as React from 'react'\nimport { getClassNames } from '../utils/responsive-props'\nimport { Box } from '../box'\nimport { Button } from '../button'\nimport { Columns, Column } from '../columns'\n\nimport { AlertIcon } from '../icons/alert-icon'\nimport { CloseIcon } from '../icons/close-icon'\n\nimport styles from './alert.module.css'\n\nimport type { AlertTone } from '../utils/common-types'\n\ntype AllOrNone<T> = T | { [K in keyof T]?: never }\n\ntype AlertCloseProps = AllOrNone<{\n    closeLabel: string\n    onClose: () => void\n}>\n\ntype AlertProps = {\n    id?: string\n    children: React.ReactNode\n    tone: AlertTone\n} & AlertCloseProps\n\nfunction Alert({ id, children, tone, closeLabel, onClose }: AlertProps) {\n    return (\n        <Box\n            id={id}\n            role=\"alert\"\n            aria-live=\"polite\"\n            borderRadius=\"standard\"\n            className={[styles.container, getClassNames(styles, 'tone', tone)]}\n        >\n            <Columns space=\"small\" alignY=\"top\">\n                <Column width=\"content\">\n                    <AlertIcon tone={tone} />\n                </Column>\n                <Column>\n                    <Box\n                        paddingY=\"xsmall\"\n                        paddingRight={onClose != null && closeLabel != null ? undefined : 'small'}\n                    >\n                        {children}\n                    </Box>\n                </Column>\n                {onClose != null && closeLabel != null ? (\n                    <Column width=\"content\">\n                        <Button\n                            variant=\"quaternary\"\n                            size=\"small\"\n                            onClick={onClose}\n                            aria-label={closeLabel}\n                            icon={<CloseIcon />}\n                            style={{\n                                // @ts-expect-error not sure how to make TypeScript understand custom CSS properties\n                                '--reactist-btn-hover-fill': 'transparent',\n                            }}\n                        />\n                    </Column>\n                ) : null}\n            </Columns>\n        </Box>\n    )\n}\n\nexport { Alert }\nexport type { AlertProps }\n"],"names":["Alert","id","children","tone","closeLabel","onClose","React","Box","role","borderRadius","className","styles","container","getClassNames","Columns","space","alignY","Column","width","AlertIcon","paddingY","paddingRight","undefined","Button","variant","size","onClick","icon","CloseIcon","style"],"mappings":";;;;;;;;;AA0BA,SAASA,KAAT,CAAe;EAAEC,EAAF;EAAMC,QAAN;EAAgBC,IAAhB;EAAsBC,UAAtB;EAAkCC;AAAlC,CAAf;EACI,oBACIC,aAAA,CAACC,GAAD;IACIN,EAAE,EAAEA;IACJO,IAAI,EAAC;iBACK;IACVC,YAAY,EAAC;IACbC,SAAS,EAAE,CAACC,MAAM,CAACC,SAAR,EAAmBC,aAAa,CAACF,MAAD,EAAS,MAAT,EAAiBR,IAAjB,CAAhC;GALf,eAOIG,aAAA,CAACQ,OAAD;IAASC,KAAK,EAAC;IAAQC,MAAM,EAAC;GAA9B,eACIV,aAAA,CAACW,MAAD;IAAQC,KAAK,EAAC;GAAd,eACIZ,aAAA,CAACa,SAAD;IAAWhB,IAAI,EAAEA;GAAjB,CADJ,CADJ,eAIIG,aAAA,CAACW,MAAD,MAAA,eACIX,aAAA,CAACC,GAAD;IACIa,QAAQ,EAAC;IACTC,YAAY,EAAEhB,OAAO,IAAI,IAAX,IAAmBD,UAAU,IAAI,IAAjC,GAAwCkB,SAAxC,GAAoD;GAFtE,EAIKpB,QAJL,CADJ,CAJJ,EAYKG,OAAO,IAAI,IAAX,IAAmBD,UAAU,IAAI,IAAjC,gBACGE,aAAA,CAACW,MAAD;IAAQC,KAAK,EAAC;GAAd,eACIZ,aAAA,CAACiB,MAAD;IACIC,OAAO,EAAC;IACRC,IAAI,EAAC;IACLC,OAAO,EAAErB;kBACGD;IACZuB,IAAI,eAAErB,aAAA,CAACsB,SAAD,MAAA;IACNC,KAAK,EAAE;;MAEH,6BAA6B;;GARrC,CADJ,CADH,GAcG,IA1BR,CAPJ,CADJ;AAsCH;;;;"}
+{"version":3,"file":"alert.js","sources":["../../src/alert/alert.tsx"],"sourcesContent":["import * as React from 'react'\nimport { getClassNames } from '../utils/responsive-props'\nimport { Box } from '../box'\nimport { Button } from '../button'\nimport { Columns, Column } from '../columns'\n\nimport { AlertIcon } from '../icons/alert-icon'\nimport { CloseIcon } from '../icons/close-icon'\n\nimport styles from './alert.module.css'\n\nimport type { AlertTone } from '../utils/common-types'\n\ntype AllOrNone<T> = T | { [K in keyof T]?: never }\n\ntype AlertCloseProps = AllOrNone<{\n    closeLabel: string\n    onClose: () => void\n}>\n\ntype AlertProps = {\n    id?: string\n    children: React.ReactNode\n    tone: AlertTone\n} & AlertCloseProps\n\nfunction Alert({ id, children, tone, closeLabel, onClose }: AlertProps) {\n    return (\n        <Box\n            id={id}\n            role=\"alert\"\n            aria-live=\"polite\"\n            borderRadius=\"full\"\n            className={[styles.container, getClassNames(styles, 'tone', tone)]}\n        >\n            <Columns space=\"small\" alignY=\"center\">\n                <Column width=\"content\">\n                    <AlertIcon tone={tone} className={styles.icon} />\n                </Column>\n                <Column>\n                    <Box\n                        paddingY=\"xsmall\"\n                        paddingRight={onClose != null && closeLabel != null ? undefined : 'small'}\n                    >\n                        {children}\n                    </Box>\n                </Column>\n                {onClose != null && closeLabel != null ? (\n                    <Column width=\"content\">\n                        <Button\n                            variant=\"quaternary\"\n                            size=\"small\"\n                            onClick={onClose}\n                            aria-label={closeLabel}\n                            icon={<CloseIcon />}\n                            style={{\n                                // @ts-expect-error not sure how to make TypeScript understand custom CSS properties\n                                '--reactist-btn-hover-fill': 'transparent',\n                            }}\n                        />\n                    </Column>\n                ) : null}\n            </Columns>\n        </Box>\n    )\n}\n\nexport { Alert }\nexport type { AlertProps }\n"],"names":["Alert","id","children","tone","closeLabel","onClose","React","Box","role","borderRadius","className","styles","container","getClassNames","Columns","space","alignY","Column","width","AlertIcon","icon","paddingY","paddingRight","undefined","Button","variant","size","onClick","CloseIcon","style"],"mappings":";;;;;;;;;AA0BA,SAASA,KAAT,CAAe;EAAEC,EAAF;EAAMC,QAAN;EAAgBC,IAAhB;EAAsBC,UAAtB;EAAkCC;AAAlC,CAAf;EACI,oBACIC,aAAA,CAACC,GAAD;IACIN,EAAE,EAAEA;IACJO,IAAI,EAAC;iBACK;IACVC,YAAY,EAAC;IACbC,SAAS,EAAE,CAACC,MAAM,CAACC,SAAR,EAAmBC,aAAa,CAACF,MAAD,EAAS,MAAT,EAAiBR,IAAjB,CAAhC;GALf,eAOIG,aAAA,CAACQ,OAAD;IAASC,KAAK,EAAC;IAAQC,MAAM,EAAC;GAA9B,eACIV,aAAA,CAACW,MAAD;IAAQC,KAAK,EAAC;GAAd,eACIZ,aAAA,CAACa,SAAD;IAAWhB,IAAI,EAAEA;IAAMO,SAAS,EAAEC,MAAM,CAACS;GAAzC,CADJ,CADJ,eAIId,aAAA,CAACW,MAAD,MAAA,eACIX,aAAA,CAACC,GAAD;IACIc,QAAQ,EAAC;IACTC,YAAY,EAAEjB,OAAO,IAAI,IAAX,IAAmBD,UAAU,IAAI,IAAjC,GAAwCmB,SAAxC,GAAoD;GAFtE,EAIKrB,QAJL,CADJ,CAJJ,EAYKG,OAAO,IAAI,IAAX,IAAmBD,UAAU,IAAI,IAAjC,gBACGE,aAAA,CAACW,MAAD;IAAQC,KAAK,EAAC;GAAd,eACIZ,aAAA,CAACkB,MAAD;IACIC,OAAO,EAAC;IACRC,IAAI,EAAC;IACLC,OAAO,EAAEtB;kBACGD;IACZgB,IAAI,eAAEd,aAAA,CAACsB,SAAD,MAAA;IACNC,KAAK,EAAE;;MAEH,6BAA6B;;GARrC,CADJ,CADH,GAcG,IA1BR,CAPJ,CADJ;AAsCH;;;;"}

package/es/alert/alert.module.css.js

@@ -1,4 +1,4 @@
-var modules_6205a58e = {"container":"eb665121","tone-info":"d0373ff9","tone-positive":"bb18dcab","tone-caution":"_0af02331","tone-critical":"f76146f9"};
+var modules_6205a58e = {"container":"_51a84fb3","tone-info":"_5649104a","icon":"_79fa06e2","tone-positive":"c67632e4","tone-caution":"_654ff216","tone-critical":"b1ee4ff1"};
 
 export default modules_6205a58e;
 //# sourceMappingURL=alert.module.css.js.map

package/es/base-field/base-field.module.css.js

@@ -1,4 +1,4 @@
-var modules_540a88ff = {"container":"_616a033e","auxiliaryLabel":"_0b88d85e","bordered":"c466cda3","error":"_4156d9cb","primaryLabel":"_274ef80a","secondaryLabel":"_2c4a8aed","messageIcon":"cd105f69"};
+var modules_540a88ff = {"container":"_7acdc928","auxiliaryLabel":"_815bad88","bordered":"e35886fe","error":"_6c7b5dc8","primaryLabel":"ec74af87","secondaryLabel":"_6db0ec44","messageIcon":"_05c35af8"};
 
 export default modules_540a88ff;
 //# sourceMappingURL=base-field.module.css.js.map

package/es/checkbox-field/checkbox-field.js

@@ -2,9 +2,9 @@ import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _
 import { forwardRef, useState, useRef, useEffect, createElement } from 'react';
 import { Box } from '../box/box.js';
 import { Text } from '../text/text.js';
+import { useForkRef } from 'ariakit-react-utils';
 import { CheckboxIcon } from './checkbox-icon.js';
 import styles from './checkbox-field.module.css.js';
-import { useForkRef } from './use-fork-ref.js';
 
 const _excluded = ["label", "icon", "disabled", "indeterminate", "defaultChecked", "onChange"];
 const CheckboxField = /*#__PURE__*/forwardRef(function CheckboxField(_ref, ref) {

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

@@ -1 +1 @@
-{"version":3,"file":"checkbox-field.js","sources":["../../src/checkbox-field/checkbox-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Box } from '../box'\nimport { Text } from '../text'\nimport { CheckboxIcon } from './checkbox-icon'\n\nimport styles from './checkbox-field.module.css'\nimport { useForkRef } from './use-fork-ref'\n\ntype CheckboxFieldProps = Omit<\n    JSX.IntrinsicElements['input'],\n    | 'type'\n    | 'className'\n    | 'disabled'\n    | 'aria-controls'\n    | 'aria-describedby'\n    | 'aria-label'\n    | 'aria-labelledby'\n> & {\n    'aria-checked'?: never\n    /** Identifies the set of checkboxes controlled by the mixed checkbox for assistive technologies. */\n    'aria-controls'?: string\n    /** Identifies the element (or elements) that describes the checkbox for assistive technologies. */\n    'aria-describedby'?: string\n    /** Defines a string value that labels the current checkbox for assistive technologies. */\n    'aria-label'?: string\n    /** Identifies the element (or elements) that labels the current checkbox for assistive technologies. */\n    'aria-labelledby'?: string\n    /** Defines whether or not the checkbox is disabled. */\n    disabled?: boolean\n    /** The label for the checkbox element. */\n    label?: React.ReactNode\n    /** The icon that should be added to the checkbox label. */\n    icon?: React.ReactChild\n    /** Defines whether or not the checkbox can be of a `mixed` state. */\n    indeterminate?: boolean\n}\n\nconst CheckboxField = React.forwardRef<HTMLInputElement, CheckboxFieldProps>(function CheckboxField(\n    { label, icon, disabled, indeterminate, defaultChecked, onChange, ...props },\n    ref,\n) {\n    const isControlledComponent = typeof props.checked === 'boolean'\n    if (typeof indeterminate === 'boolean' && !isControlledComponent) {\n        // eslint-disable-next-line no-console\n        console.warn('Cannot use indeterminate on an uncontrolled checkbox')\n        indeterminate = undefined\n    }\n\n    if (!label && !props['aria-label'] && !props['aria-labelledby']) {\n        // eslint-disable-next-line no-console\n        console.warn('A Checkbox needs a label')\n    }\n\n    const [keyFocused, setKeyFocused] = React.useState(false)\n    const [checkedState, setChecked] = React.useState(props.checked ?? defaultChecked ?? false)\n    const isChecked = props.checked ?? checkedState\n\n    const internalRef = React.useRef<HTMLInputElement>(null)\n    const combinedRef = useForkRef(internalRef, ref)\n    React.useEffect(\n        function setIndeterminate() {\n            if (internalRef.current && typeof indeterminate === 'boolean') {\n                internalRef.current.indeterminate = indeterminate\n            }\n        },\n        [indeterminate],\n    )\n\n    return (\n        <Box\n            as=\"label\"\n            display=\"flex\"\n            alignItems=\"center\"\n            className={[\n                styles.container,\n                disabled ? styles.disabled : null,\n                isChecked ? styles.checked : null,\n                keyFocused ? styles.keyFocused : null,\n            ]}\n        >\n            <input\n                {...props}\n                ref={combinedRef}\n                type=\"checkbox\"\n                aria-checked={indeterminate ? 'mixed' : isChecked}\n                checked={isChecked}\n                disabled={disabled}\n                onChange={(event) => {\n                    onChange?.(event)\n                    if (!event.defaultPrevented) {\n                        setChecked(event.currentTarget.checked)\n                    }\n                }}\n                onBlur={(event) => {\n                    setKeyFocused(false)\n                    props?.onBlur?.(event)\n                }}\n                onKeyUp={(event) => {\n                    setKeyFocused(true)\n                    props?.onKeyUp?.(event)\n                }}\n            />\n            <CheckboxIcon\n                checked={isChecked}\n                disabled={disabled}\n                indeterminate={indeterminate}\n                aria-hidden\n            />\n            {icon ? (\n                <Box display=\"flex\" className={styles.icon} aria-hidden>\n                    {icon}\n                </Box>\n            ) : null}\n            {label ? (\n                <Box display=\"flex\" className={styles.label}>\n                    <Text>{label}</Text>\n                </Box>\n            ) : null}\n        </Box>\n    )\n})\n\nexport { CheckboxField }\nexport type { CheckboxFieldProps }\n"],"names":["CheckboxField","React","ref","label","icon","disabled","indeterminate","defaultChecked","onChange","props","isControlledComponent","checked","console","warn","undefined","keyFocused","setKeyFocused","checkedState","setChecked","isChecked","internalRef","combinedRef","useForkRef","setIndeterminate","current","Box","as","display","alignItems","className","styles","container","type","event","defaultPrevented","currentTarget","onBlur","onKeyUp","CheckboxIcon","Text"],"mappings":"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"}
+{"version":3,"file":"checkbox-field.js","sources":["../../src/checkbox-field/checkbox-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useForkRef } from 'ariakit-react-utils'\nimport { Box } from '../box'\nimport { Text } from '../text'\nimport { CheckboxIcon } from './checkbox-icon'\n\nimport styles from './checkbox-field.module.css'\n\ntype CheckboxFieldProps = Omit<\n    JSX.IntrinsicElements['input'],\n    | 'type'\n    | 'className'\n    | 'disabled'\n    | 'aria-controls'\n    | 'aria-describedby'\n    | 'aria-label'\n    | 'aria-labelledby'\n> & {\n    'aria-checked'?: never\n    /** Identifies the set of checkboxes controlled by the mixed checkbox for assistive technologies. */\n    'aria-controls'?: string\n    /** Identifies the element (or elements) that describes the checkbox for assistive technologies. */\n    'aria-describedby'?: string\n    /** Defines a string value that labels the current checkbox for assistive technologies. */\n    'aria-label'?: string\n    /** Identifies the element (or elements) that labels the current checkbox for assistive technologies. */\n    'aria-labelledby'?: string\n    /** Defines whether or not the checkbox is disabled. */\n    disabled?: boolean\n    /** The label for the checkbox element. */\n    label?: React.ReactNode\n    /** The icon that should be added to the checkbox label. */\n    icon?: React.ReactChild\n    /** Defines whether or not the checkbox can be of a `mixed` state. */\n    indeterminate?: boolean\n}\n\nconst CheckboxField = React.forwardRef<HTMLInputElement, CheckboxFieldProps>(function CheckboxField(\n    { label, icon, disabled, indeterminate, defaultChecked, onChange, ...props },\n    ref,\n) {\n    const isControlledComponent = typeof props.checked === 'boolean'\n    if (typeof indeterminate === 'boolean' && !isControlledComponent) {\n        // eslint-disable-next-line no-console\n        console.warn('Cannot use indeterminate on an uncontrolled checkbox')\n        indeterminate = undefined\n    }\n\n    if (!label && !props['aria-label'] && !props['aria-labelledby']) {\n        // eslint-disable-next-line no-console\n        console.warn('A Checkbox needs a label')\n    }\n\n    const [keyFocused, setKeyFocused] = React.useState(false)\n    const [checkedState, setChecked] = React.useState(props.checked ?? defaultChecked ?? false)\n    const isChecked = props.checked ?? checkedState\n\n    const internalRef = React.useRef<HTMLInputElement>(null)\n    const combinedRef = useForkRef(internalRef, ref)\n    React.useEffect(\n        function setIndeterminate() {\n            if (internalRef.current && typeof indeterminate === 'boolean') {\n                internalRef.current.indeterminate = indeterminate\n            }\n        },\n        [indeterminate],\n    )\n\n    return (\n        <Box\n            as=\"label\"\n            display=\"flex\"\n            alignItems=\"center\"\n            className={[\n                styles.container,\n                disabled ? styles.disabled : null,\n                isChecked ? styles.checked : null,\n                keyFocused ? styles.keyFocused : null,\n            ]}\n        >\n            <input\n                {...props}\n                ref={combinedRef}\n                type=\"checkbox\"\n                aria-checked={indeterminate ? 'mixed' : isChecked}\n                checked={isChecked}\n                disabled={disabled}\n                onChange={(event) => {\n                    onChange?.(event)\n                    if (!event.defaultPrevented) {\n                        setChecked(event.currentTarget.checked)\n                    }\n                }}\n                onBlur={(event) => {\n                    setKeyFocused(false)\n                    props?.onBlur?.(event)\n                }}\n                onKeyUp={(event) => {\n                    setKeyFocused(true)\n                    props?.onKeyUp?.(event)\n                }}\n            />\n            <CheckboxIcon\n                checked={isChecked}\n                disabled={disabled}\n                indeterminate={indeterminate}\n                aria-hidden\n            />\n            {icon ? (\n                <Box display=\"flex\" className={styles.icon} aria-hidden>\n                    {icon}\n                </Box>\n            ) : null}\n            {label ? (\n                <Box display=\"flex\" className={styles.label}>\n                    <Text>{label}</Text>\n                </Box>\n            ) : null}\n        </Box>\n    )\n})\n\nexport { CheckboxField }\nexport type { CheckboxFieldProps }\n"],"names":["CheckboxField","React","ref","label","icon","disabled","indeterminate","defaultChecked","onChange","props","isControlledComponent","checked","console","warn","undefined","keyFocused","setKeyFocused","checkedState","setChecked","isChecked","internalRef","combinedRef","useForkRef","setIndeterminate","current","Box","as","display","alignItems","className","styles","container","type","event","defaultPrevented","currentTarget","onBlur","onKeyUp","CheckboxIcon","Text"],"mappings":"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"}

package/es/hooks/use-previous/use-previous.js

@@ -0,0 +1,26 @@
+import { useRef, useEffect } from 'react';
+
+/**
+ * usePrevious tracks the change of the given value -
+ * when a given value has been changed from a previous call,
+ * it will return the value prior to the change.
+ *
+ * Example:
+ *
+ * const [x, setX] = useState(1)
+ * const prevX = usePrevious(x)
+ *
+ * Suppose `setX(2)` is called, then in the next component render
+ * x = 2 and prevX = 1
+ */
+
+function usePrevious(value) {
+  const ref = useRef(null);
+  useEffect(() => {
+    ref.current = value;
+  }, [value]);
+  return ref.current;
+}
+
+export { usePrevious };
+//# sourceMappingURL=use-previous.js.map

package/es/hooks/use-previous/use-previous.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-previous.js","sources":["../../../src/hooks/use-previous/use-previous.ts"],"sourcesContent":["import * as React from 'react'\n\n/**\n * usePrevious tracks the change of the given value -\n * when a given value has been changed from a previous call,\n * it will return the value prior to the change.\n *\n * Example:\n *\n * const [x, setX] = useState(1)\n * const prevX = usePrevious(x)\n *\n * Suppose `setX(2)` is called, then in the next component render\n * x = 2 and prevX = 1\n */\nfunction usePrevious<T>(value: T): T | null {\n    const ref = React.useRef<T | null>(null)\n\n    React.useEffect(() => {\n        ref.current = value\n    }, [value])\n\n    return ref.current\n}\n\nexport { usePrevious }\n"],"names":["usePrevious","value","ref","React","current"],"mappings":";;AAEA;;;;;;;;;;;;;;AAaA,SAASA,WAAT,CAAwBC,KAAxB;EACI,MAAMC,GAAG,GAAGC,MAAA,CAAuB,IAAvB,CAAZ;EAEAA,SAAA,CAAgB;IACZD,GAAG,CAACE,OAAJ,GAAcH,KAAd;GADJ,EAEG,CAACA,KAAD,CAFH;EAIA,OAAOC,GAAG,CAACE,OAAX;AACH;;;;"}

package/es/icons/alert-icon.js

@@ -21,56 +21,56 @@ function AlertIcon(_ref) {
 
 function AlertInfoIcon(props) {
   return /*#__PURE__*/createElement("svg", _objectSpread2({
+    xmlns: "http://www.w3.org/2000/svg",
     width: "24",
     height: "24",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
+    viewBox: "0 0 24 24"
   }, props), /*#__PURE__*/createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
-    d: "M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18zm0-1a8 8 0 1 1 0-16 8 8 0 0 1 0 16zm1.18-11.84a.84.84 0 1 1-1.68 0 .84.84 0 0 1 1.68 0zM12.5 10a.5.5 0 0 1 .5.5V15h1a.5.5 0 0 1 0 1h-3a.5.5 0 0 1 0-1h1v-4h-1a.5.5 0 0 1 0-1h1.5z",
+    d: "M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-8-3.94a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM10.25 10a.75.75 0 0 0 0 1.5h1.25V15h-1.25a.75.75 0 0 0 0 1.5h3.5a.75.75 0 0 0 0-1.5H13v-4.25a.75.75 0 0 0-.75-.75h-2Z",
     fill: "currentColor"
   }));
 }
 
 function AlertPositiveIcon(props) {
   return /*#__PURE__*/createElement("svg", _objectSpread2({
+    xmlns: "http://www.w3.org/2000/svg",
     width: "24",
     height: "24",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
+    viewBox: "0 0 24 24"
   }, props), /*#__PURE__*/createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
-    d: "M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18zm0-1a8 8 0 1 1 0-16 8 8 0 0 1 0 16zm-4.354-8.104a.5.5 0 0 1 .708 0l2.146 2.147 5.146-5.147a.5.5 0 0 1 .708.708l-5.5 5.5a.5.5 0 0 1-.708 0l-2.5-2.5a.5.5 0 0 1 0-.708z",
+    d: "M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-5.555-2.99a.75.75 0 0 1 1.06 1.06l-5.303 5.304a.748.748 0 0 1-1.061 0l-2.475-2.475a.75.75 0 0 1 1.06-1.06l1.945 1.944 4.774-4.773Z",
     fill: "currentColor"
   }));
 }
 
 function AlertCautionIcon(props) {
   return /*#__PURE__*/createElement("svg", _objectSpread2({
+    xmlns: "http://www.w3.org/2000/svg",
     width: "24",
     height: "24",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
+    viewBox: "0 0 24 24"
   }, props), /*#__PURE__*/createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
-    d: "m3.254 16.992 7.018-12.03a2 2 0 0 1 3.455 0l7.018 12.03A2 2 0 0 1 19.018 20H4.982a2 2 0 0 1-1.728-3.008zm8.242-11.887a1 1 0 0 0-.36.36l-7.018 12.03A1 1 0 0 0 4.982 19h14.036a1 1 0 0 0 .864-1.504l-7.018-12.03a1 1 0 0 0-1.368-.36zM13 16.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm-.014-7.014a.987.987 0 1 0-1.971.055l.236 4.25c.053.945 1.445.945 1.498 0l.236-4.25.001-.027v-.028z",
+    d: "m10.272 4.962-7.018 12.03A2 2 0 0 0 4.982 20h14.036a2 2 0 0 0 1.727-3.008l-7.018-12.03a2 2 0 0 0-3.455 0ZM13 16.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm-.014-7.013A.987.987 0 0 0 12 8.5h-.028l-.027.002a.987.987 0 0 0-.93 1.04l.236 4.25c.052.944 1.445.944 1.498 0l.236-4.25a1.925 1.925 0 0 0 .001-.055Z",
     fill: "currentColor"
   }));
 }
 
 function AlertCriticalIcon(props) {
   return /*#__PURE__*/createElement("svg", _objectSpread2({
+    xmlns: "http://www.w3.org/2000/svg",
     width: "24",
     height: "24",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
+    viewBox: "0 0 24 24"
   }, props), /*#__PURE__*/createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
-    d: "M12 3.5a8.5 8.5 0 1 0 0 17 8.5 8.5 0 0 0 0-17zM2.5 12a9.5 9.5 0 1 1 19 0 9.5 9.5 0 0 1-19 0zM13 15.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm-.014-7.014A.987.987 0 0 0 12 7.5h-.027l-.028.002a.987.987 0 0 0-.93 1.04l.236 4.25c.053.944 1.445.944 1.498 0l.236-4.25.001-.028v-.027z",
+    d: "M12.9866 2.25049C12.3729 1.91683 11.6271 1.91683 11.0134 2.25049L4.04793 6.03744C3.40122 6.38904 2.99999 7.05702 2.99999 7.78208V15.2184C2.99999 15.9435 3.40122 16.6115 4.04793 16.963L11.0134 20.75C11.6271 21.0837 12.3729 21.0837 12.9866 20.75L19.9521 16.963C20.5988 16.6114 21 15.9435 21 15.2184V7.78208C21 7.05701 20.5988 6.38904 19.9521 6.03744L12.9866 2.25049ZM12 7.00024C12.5448 7.00024 12.9865 7.44191 12.9865 7.98674C12.9864 8.00043 12.9863 8.00727 12.9861 8.01411C12.9859 8.02095 12.9856 8.02779 12.985 8.04146L12.7489 12.2918C12.6964 13.2364 11.3036 13.2364 11.2512 12.2918L11.015 8.04146C10.9848 7.49747 11.4013 7.03198 11.9453 7.00176L11.9726 7.00062L12 7.00024ZM13 15.0002C13 15.5525 12.5523 16.0002 12 16.0002C11.4477 16.0002 11 15.5525 11 15.0002C11 14.448 11.4477 14.0002 12 14.0002C12.5523 14.0002 13 14.448 13 15.0002Z",
     fill: "currentColor"
   }));
 }

package/es/icons/alert-icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"alert-icon.js","sources":["../../src/icons/alert-icon.tsx"],"sourcesContent":["import * as React from 'react'\nimport type { AlertTone } from '../utils/common-types'\n\nconst alertIconForTone: Record<AlertTone, typeof AlertInfoIcon> = {\n    info: AlertInfoIcon,\n    positive: AlertPositiveIcon,\n    caution: AlertCautionIcon,\n    critical: AlertCriticalIcon,\n}\n\nfunction AlertIcon({ tone, ...props }: JSX.IntrinsicElements['svg'] & { tone: AlertTone }) {\n    const Icon = alertIconForTone[tone]\n    return Icon ? <Icon {...props} /> : null\n}\n\nfunction AlertInfoIcon(props: JSX.IntrinsicElements['svg']) {\n    return (\n        <svg width=\"24\" height=\"24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n            <path\n                fillRule=\"evenodd\"\n                clipRule=\"evenodd\"\n                d=\"M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18zm0-1a8 8 0 1 1 0-16 8 8 0 0 1 0 16zm1.18-11.84a.84.84 0 1 1-1.68 0 .84.84 0 0 1 1.68 0zM12.5 10a.5.5 0 0 1 .5.5V15h1a.5.5 0 0 1 0 1h-3a.5.5 0 0 1 0-1h1v-4h-1a.5.5 0 0 1 0-1h1.5z\"\n                fill=\"currentColor\"\n            />\n        </svg>\n    )\n}\n\nfunction AlertPositiveIcon(props: JSX.IntrinsicElements['svg']) {\n    return (\n        <svg width=\"24\" height=\"24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n            <path\n                fillRule=\"evenodd\"\n                clipRule=\"evenodd\"\n                d=\"M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18zm0-1a8 8 0 1 1 0-16 8 8 0 0 1 0 16zm-4.354-8.104a.5.5 0 0 1 .708 0l2.146 2.147 5.146-5.147a.5.5 0 0 1 .708.708l-5.5 5.5a.5.5 0 0 1-.708 0l-2.5-2.5a.5.5 0 0 1 0-.708z\"\n                fill=\"currentColor\"\n            />\n        </svg>\n    )\n}\n\nfunction AlertCautionIcon(props: JSX.IntrinsicElements['svg']) {\n    return (\n        <svg width=\"24\" height=\"24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n            <path\n                fillRule=\"evenodd\"\n                clipRule=\"evenodd\"\n                d=\"m3.254 16.992 7.018-12.03a2 2 0 0 1 3.455 0l7.018 12.03A2 2 0 0 1 19.018 20H4.982a2 2 0 0 1-1.728-3.008zm8.242-11.887a1 1 0 0 0-.36.36l-7.018 12.03A1 1 0 0 0 4.982 19h14.036a1 1 0 0 0 .864-1.504l-7.018-12.03a1 1 0 0 0-1.368-.36zM13 16.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm-.014-7.014a.987.987 0 1 0-1.971.055l.236 4.25c.053.945 1.445.945 1.498 0l.236-4.25.001-.027v-.028z\"\n                fill=\"currentColor\"\n            />\n        </svg>\n    )\n}\n\nfunction AlertCriticalIcon(props: JSX.IntrinsicElements['svg']) {\n    return (\n        <svg width=\"24\" height=\"24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n            <path\n                fillRule=\"evenodd\"\n                clipRule=\"evenodd\"\n                d=\"M12 3.5a8.5 8.5 0 1 0 0 17 8.5 8.5 0 0 0 0-17zM2.5 12a9.5 9.5 0 1 1 19 0 9.5 9.5 0 0 1-19 0zM13 15.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm-.014-7.014A.987.987 0 0 0 12 7.5h-.027l-.028.002a.987.987 0 0 0-.93 1.04l.236 4.25c.053.944 1.445.944 1.498 0l.236-4.25.001-.028v-.027z\"\n                fill=\"currentColor\"\n            />\n        </svg>\n    )\n}\n\nexport { AlertIcon }\n"],"names":["alertIconForTone","info","AlertInfoIcon","positive","AlertPositiveIcon","caution","AlertCautionIcon","critical","AlertCriticalIcon","AlertIcon","tone","props","Icon","React","width","height","fill","xmlns","fillRule","clipRule","d"],"mappings":";;;;AAGA,MAAMA,gBAAgB,GAA4C;EAC9DC,IAAI,EAAEC,aADwD;EAE9DC,QAAQ,EAAEC,iBAFoD;EAG9DC,OAAO,EAAEC,gBAHqD;EAI9DC,QAAQ,EAAEC;AAJoD,CAAlE;;AAOA,SAASC,SAAT;MAAmB;IAAEC;;MAASC;;EAC1B,MAAMC,IAAI,GAAGZ,gBAAgB,CAACU,IAAD,CAA7B;EACA,OAAOE,IAAI,gBAAGC,aAAA,CAACD,IAAD,qBAAUD,KAAV,EAAH,GAAyB,IAApC;AACH;;AAED,SAAST,aAAT,CAAuBS,KAAvB;EACI,oBACIE,aAAA,MAAA;IAAKC,KAAK,EAAC,IAAX;IAAgBC,MAAM,EAAC,IAAvB;IAA4BC,IAAI,EAAC,MAAjC;IAAwCC,KAAK,EAAC;KAAiCN,KAA/E,gBACIE,aAAA,OAAA;IACIK,QAAQ,EAAC;IACTC,QAAQ,EAAC;IACTC,CAAC,EAAC;IACFJ,IAAI,EAAC;GAJT,CADJ,CADJ;AAUH;;AAED,SAASZ,iBAAT,CAA2BO,KAA3B;EACI,oBACIE,aAAA,MAAA;IAAKC,KAAK,EAAC,IAAX;IAAgBC,MAAM,EAAC,IAAvB;IAA4BC,IAAI,EAAC,MAAjC;IAAwCC,KAAK,EAAC;KAAiCN,KAA/E,gBACIE,aAAA,OAAA;IACIK,QAAQ,EAAC;IACTC,QAAQ,EAAC;IACTC,CAAC,EAAC;IACFJ,IAAI,EAAC;GAJT,CADJ,CADJ;AAUH;;AAED,SAASV,gBAAT,CAA0BK,KAA1B;EACI,oBACIE,aAAA,MAAA;IAAKC,KAAK,EAAC,IAAX;IAAgBC,MAAM,EAAC,IAAvB;IAA4BC,IAAI,EAAC,MAAjC;IAAwCC,KAAK,EAAC;KAAiCN,KAA/E,gBACIE,aAAA,OAAA;IACIK,QAAQ,EAAC;IACTC,QAAQ,EAAC;IACTC,CAAC,EAAC;IACFJ,IAAI,EAAC;GAJT,CADJ,CADJ;AAUH;;AAED,SAASR,iBAAT,CAA2BG,KAA3B;EACI,oBACIE,aAAA,MAAA;IAAKC,KAAK,EAAC,IAAX;IAAgBC,MAAM,EAAC,IAAvB;IAA4BC,IAAI,EAAC,MAAjC;IAAwCC,KAAK,EAAC;KAAiCN,KAA/E,gBACIE,aAAA,OAAA;IACIK,QAAQ,EAAC;IACTC,QAAQ,EAAC;IACTC,CAAC,EAAC;IACFJ,IAAI,EAAC;GAJT,CADJ,CADJ;AAUH;;;;"}
+{"version":3,"file":"alert-icon.js","sources":["../../src/icons/alert-icon.tsx"],"sourcesContent":["import * as React from 'react'\nimport type { AlertTone } from '../utils/common-types'\n\nconst alertIconForTone: Record<AlertTone, typeof AlertInfoIcon> = {\n    info: AlertInfoIcon,\n    positive: AlertPositiveIcon,\n    caution: AlertCautionIcon,\n    critical: AlertCriticalIcon,\n}\n\nfunction AlertIcon({ tone, ...props }: JSX.IntrinsicElements['svg'] & { tone: AlertTone }) {\n    const Icon = alertIconForTone[tone]\n    return Icon ? <Icon {...props} /> : null\n}\n\nfunction AlertInfoIcon(props: JSX.IntrinsicElements['svg']) {\n    return (\n        <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            {...props}\n        >\n            <path\n                fillRule=\"evenodd\"\n                clipRule=\"evenodd\"\n                d=\"M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-8-3.94a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM10.25 10a.75.75 0 0 0 0 1.5h1.25V15h-1.25a.75.75 0 0 0 0 1.5h3.5a.75.75 0 0 0 0-1.5H13v-4.25a.75.75 0 0 0-.75-.75h-2Z\"\n                fill=\"currentColor\"\n            />\n        </svg>\n    )\n}\n\nfunction AlertPositiveIcon(props: JSX.IntrinsicElements['svg']) {\n    return (\n        <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            {...props}\n        >\n            <path\n                fillRule=\"evenodd\"\n                clipRule=\"evenodd\"\n                d=\"M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-5.555-2.99a.75.75 0 0 1 1.06 1.06l-5.303 5.304a.748.748 0 0 1-1.061 0l-2.475-2.475a.75.75 0 0 1 1.06-1.06l1.945 1.944 4.774-4.773Z\"\n                fill=\"currentColor\"\n            />\n        </svg>\n    )\n}\n\nfunction AlertCautionIcon(props: JSX.IntrinsicElements['svg']) {\n    return (\n        <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            {...props}\n        >\n            <path\n                fillRule=\"evenodd\"\n                clipRule=\"evenodd\"\n                d=\"m10.272 4.962-7.018 12.03A2 2 0 0 0 4.982 20h14.036a2 2 0 0 0 1.727-3.008l-7.018-12.03a2 2 0 0 0-3.455 0ZM13 16.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm-.014-7.013A.987.987 0 0 0 12 8.5h-.028l-.027.002a.987.987 0 0 0-.93 1.04l.236 4.25c.052.944 1.445.944 1.498 0l.236-4.25a1.925 1.925 0 0 0 .001-.055Z\"\n                fill=\"currentColor\"\n            />\n        </svg>\n    )\n}\n\nfunction AlertCriticalIcon(props: JSX.IntrinsicElements['svg']) {\n    return (\n        <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            {...props}\n        >\n            <path\n                fillRule=\"evenodd\"\n                clipRule=\"evenodd\"\n                d=\"M12.9866 2.25049C12.3729 1.91683 11.6271 1.91683 11.0134 2.25049L4.04793 6.03744C3.40122 6.38904 2.99999 7.05702 2.99999 7.78208V15.2184C2.99999 15.9435 3.40122 16.6115 4.04793 16.963L11.0134 20.75C11.6271 21.0837 12.3729 21.0837 12.9866 20.75L19.9521 16.963C20.5988 16.6114 21 15.9435 21 15.2184V7.78208C21 7.05701 20.5988 6.38904 19.9521 6.03744L12.9866 2.25049ZM12 7.00024C12.5448 7.00024 12.9865 7.44191 12.9865 7.98674C12.9864 8.00043 12.9863 8.00727 12.9861 8.01411C12.9859 8.02095 12.9856 8.02779 12.985 8.04146L12.7489 12.2918C12.6964 13.2364 11.3036 13.2364 11.2512 12.2918L11.015 8.04146C10.9848 7.49747 11.4013 7.03198 11.9453 7.00176L11.9726 7.00062L12 7.00024ZM13 15.0002C13 15.5525 12.5523 16.0002 12 16.0002C11.4477 16.0002 11 15.5525 11 15.0002C11 14.448 11.4477 14.0002 12 14.0002C12.5523 14.0002 13 14.448 13 15.0002Z\"\n                fill=\"currentColor\"\n            />\n        </svg>\n    )\n}\n\nexport { AlertIcon }\n"],"names":["alertIconForTone","info","AlertInfoIcon","positive","AlertPositiveIcon","caution","AlertCautionIcon","critical","AlertCriticalIcon","AlertIcon","tone","props","Icon","React","xmlns","width","height","viewBox","fillRule","clipRule","d","fill"],"mappings":";;;;AAGA,MAAMA,gBAAgB,GAA4C;EAC9DC,IAAI,EAAEC,aADwD;EAE9DC,QAAQ,EAAEC,iBAFoD;EAG9DC,OAAO,EAAEC,gBAHqD;EAI9DC,QAAQ,EAAEC;AAJoD,CAAlE;;AAOA,SAASC,SAAT;MAAmB;IAAEC;;MAASC;;EAC1B,MAAMC,IAAI,GAAGZ,gBAAgB,CAACU,IAAD,CAA7B;EACA,OAAOE,IAAI,gBAAGC,aAAA,CAACD,IAAD,qBAAUD,KAAV,EAAH,GAAyB,IAApC;AACH;;AAED,SAAST,aAAT,CAAuBS,KAAvB;EACI,oBACIE,aAAA,MAAA;IACIC,KAAK,EAAC,4BADV;IAEIC,KAAK,EAAC,IAFV;IAGIC,MAAM,EAAC,IAHX;IAIIC,OAAO,EAAC;KACJN,KALR,gBAOIE,aAAA,OAAA;IACIK,QAAQ,EAAC;IACTC,QAAQ,EAAC;IACTC,CAAC,EAAC;IACFC,IAAI,EAAC;GAJT,CAPJ,CADJ;AAgBH;;AAED,SAASjB,iBAAT,CAA2BO,KAA3B;EACI,oBACIE,aAAA,MAAA;IACIC,KAAK,EAAC,4BADV;IAEIC,KAAK,EAAC,IAFV;IAGIC,MAAM,EAAC,IAHX;IAIIC,OAAO,EAAC;KACJN,KALR,gBAOIE,aAAA,OAAA;IACIK,QAAQ,EAAC;IACTC,QAAQ,EAAC;IACTC,CAAC,EAAC;IACFC,IAAI,EAAC;GAJT,CAPJ,CADJ;AAgBH;;AAED,SAASf,gBAAT,CAA0BK,KAA1B;EACI,oBACIE,aAAA,MAAA;IACIC,KAAK,EAAC,4BADV;IAEIC,KAAK,EAAC,IAFV;IAGIC,MAAM,EAAC,IAHX;IAIIC,OAAO,EAAC;KACJN,KALR,gBAOIE,aAAA,OAAA;IACIK,QAAQ,EAAC;IACTC,QAAQ,EAAC;IACTC,CAAC,EAAC;IACFC,IAAI,EAAC;GAJT,CAPJ,CADJ;AAgBH;;AAED,SAASb,iBAAT,CAA2BG,KAA3B;EACI,oBACIE,aAAA,MAAA;IACIC,KAAK,EAAC,4BADV;IAEIC,KAAK,EAAC,IAFV;IAGIC,MAAM,EAAC,IAHX;IAIIC,OAAO,EAAC;KACJN,KALR,gBAOIE,aAAA,OAAA;IACIK,QAAQ,EAAC;IACTC,QAAQ,EAAC;IACTC,CAAC,EAAC;IACFC,IAAI,EAAC;GAJT,CAPJ,CADJ;AAgBH;;;;"}

package/es/menu/menu.js

@@ -1,8 +1,9 @@
 import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
-import { useState, useMemo, useCallback, createElement, useContext, forwardRef, Children, cloneElement, createContext } from 'react';
+import { useState, useMemo, useEffect, useCallback, createElement, useContext, forwardRef, Children, cloneElement, 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 { Portal } from 'ariakit/portal';
+import { useMenuState, MenuButton as MenuButton$1, Menu as Menu$1, MenuItem as MenuItem$1, MenuGroup as MenuGroup$1 } from 'ariakit/menu';
 
 const _excluded = ["children", "onItemSelect"],
       _excluded2 = ["exceptionallySetClassName"],
@@ -28,20 +29,27 @@ function Menu(_ref) {
   } = _ref,
       props = _objectWithoutProperties(_ref, _excluded);
 
-  const [anchorRect, setAnchorRect] = useState(null);
-  const getAnchorRect = useMemo(() => anchorRect ? () => anchorRect : null, [anchorRect]);
-  const menuStore = useMenuStore(_objectSpread2({
-    focusLoop: true
+  const [anchorRect, handleAnchorRectChange] = useState(null);
+  const getAnchorRect = useMemo(() => {
+    return anchorRect ? () => anchorRect : undefined;
+  }, [anchorRect]);
+  const state = useMenuState(_objectSpread2({
+    focusLoop: true,
+    gutter: 8,
+    shift: 4,
+    getAnchorRect
   }, props));
+  useEffect(() => {
+    if (!state.open) handleAnchorRectChange(null);
+  }, [state.open]);
   const handleItemSelect = useCallback(function handleItemSelect(value) {
-    onItemSelect == null ? void 0 : onItemSelect(value);
+    if (onItemSelect) onItemSelect(value);
   }, [onItemSelect]);
   const value = useMemo(() => ({
-    menuStore,
+    state,
     handleItemSelect,
-    getAnchorRect,
-    setAnchorRect
-  }), [menuStore, handleItemSelect, getAnchorRect, setAnchorRect]);
+    handleAnchorRectChange
+  }), [state, handleItemSelect]);
   return /*#__PURE__*/createElement(MenuContext.Provider, {
     value: value
   }, children);
@@ -58,10 +66,10 @@ const MenuButton = /*#__PURE__*/polymorphicComponent(function MenuButton(_ref2,
       props = _objectWithoutProperties(_ref2, _excluded2);
 
   const {
-    menuStore
+    state
   } = useContext(MenuContext);
   return /*#__PURE__*/createElement(MenuButton$1, _objectSpread2(_objectSpread2({}, props), {}, {
-    store: menuStore,
+    state: state,
     ref: ref,
     className: classNames('reactist_menubutton', exceptionallySetClassName)
   }));
@@ -76,17 +84,17 @@ const ContextMenuTrigger = /*#__PURE__*/polymorphicComponent(function ContextMen
       props = _objectWithoutProperties(_ref3, _excluded3);
 
   const {
-    setAnchorRect,
-    menuStore
+    handleAnchorRectChange,
+    state
   } = useContext(MenuContext);
-  const handleContextMenu = useCallback(function handleContextMenu(event) {
+  const handleContextMenu = useCallback(event => {
     event.preventDefault();
-    setAnchorRect({
+    handleAnchorRectChange({
       x: event.clientX,
       y: event.clientY
     });
-    menuStore.show();
-  }, [setAnchorRect, menuStore]);
+    state.show();
+  }, [handleAnchorRectChange, state]);
   return /*#__PURE__*/createElement(component, _objectSpread2(_objectSpread2({}, props), {}, {
     onContextMenu: handleContextMenu,
     ref
@@ -104,19 +112,14 @@ const MenuList = /*#__PURE__*/polymorphicComponent(function MenuList(_ref4, ref)
       props = _objectWithoutProperties(_ref4, _excluded4);
 
   const {
-    menuStore,
-    getAnchorRect
+    state
   } = useContext(MenuContext);
-  const isOpen = menuStore.useState('open');
-  return isOpen ? /*#__PURE__*/createElement(Portal, {
+  return state.open ? /*#__PURE__*/createElement(Portal, {
     preserveTabOrder: true
   }, /*#__PURE__*/createElement(Menu$1, _objectSpread2(_objectSpread2({}, props), {}, {
-    store: menuStore,
-    gutter: 8,
-    shift: 4,
+    state: state,
     ref: ref,
     className: classNames('reactist_menulist', exceptionallySetClassName),
-    getAnchorRect: getAnchorRect != null ? getAnchorRect : undefined,
     modal: modal
   }))) : null;
 });
@@ -139,11 +142,11 @@ const MenuItem = /*#__PURE__*/polymorphicComponent(function MenuItem(_ref5, ref)
 
   const {
     handleItemSelect,
-    menuStore
+    state
   } = useContext(MenuContext);
   const {
     hide
-  } = menuStore;
+  } = state;
   const handleClick = useCallback(function handleClick(event) {
     onClick == null ? void 0 : onClick(event);
     const onSelectResult = onSelect && !event.defaultPrevented ? onSelect() : undefined;
@@ -153,7 +156,7 @@ const MenuItem = /*#__PURE__*/polymorphicComponent(function MenuItem(_ref5, ref)
   }, [onSelect, onClick, handleItemSelect, hideOnSelect, hide, value]);
   return /*#__PURE__*/createElement(MenuItem$1, _objectSpread2(_objectSpread2({}, props), {}, {
     as: as,
-    store: menuStore,
+    state: state,
     ref: ref,
     onClick: handleClick,
     className: exceptionallySetClassName,
@@ -188,11 +191,11 @@ const SubMenu = /*#__PURE__*/forwardRef(function SubMenu({
 }, ref) {
   const {
     handleItemSelect: parentMenuItemSelect,
-    menuStore
+    state
   } = useContext(MenuContext);
   const {
     hide: parentMenuHide
-  } = menuStore;
+  } = state;
   const handleSubItemSelect = useCallback(function handleSubItemSelect(value) {
     if (onItemSelect) onItemSelect(value);
     parentMenuItemSelect(value);
@@ -208,7 +211,7 @@ const SubMenu = /*#__PURE__*/forwardRef(function SubMenu({
     onItemSelect: handleSubItemSelect
   }, /*#__PURE__*/createElement(MenuItem$1, {
     as: "div",
-    store: menuStore,
+    state: state,
     ref: ref,
     hideOnClick: false
   }, renderMenuButton), list);
@@ -229,11 +232,11 @@ const MenuGroup = /*#__PURE__*/polymorphicComponent(function MenuGroup(_ref6, re
       props = _objectWithoutProperties(_ref6, _excluded6);
 
   const {
-    menuStore
+    state
   } = useContext(MenuContext);
   return /*#__PURE__*/createElement(MenuGroup$1, _objectSpread2(_objectSpread2({}, props), {}, {
     ref: ref,
-    store: menuStore,
+    state: state,
     className: exceptionallySetClassName
   }), label ? /*#__PURE__*/createElement("div", {
     role: "presentation",

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 handleItemSelect = React.useCallback(\n        function handleItemSelect(value: string | null | undefined) {\n            onItemSelect?.(value)\n        },\n        [onItemSelect],\n    )\n\n    const value: MenuContextState = React.useMemo(\n        () => ({ menuStore, handleItemSelect, getAnchorRect, setAnchorRect }),\n        [menuStore, handleItemSelect, 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    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     * The content inside the menu item.\n     */\n    children: React.ReactNode\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     * 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     * 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     * 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            if (onItemSelect) 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\n    // 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","handleItemSelect","value","Provider","MenuButton","polymorphicComponent","ref","exceptionallySetClassName","AriakitMenuButton","store","className","classNames","ContextMenuTrigger","as","component","handleContextMenu","event","preventDefault","x","clientX","y","clientY","show","onContextMenu","MenuList","modal","isOpen","useState","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 { 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 * as Ariakit from 'ariakit/menu'\nimport { Portal } from 'ariakit/portal'\n\nimport './menu.less'\n\ntype NativeProps<E extends HTMLElement> = React.DetailedHTMLProps<React.HTMLAttributes<E>, E>\n\ntype MenuContextState = {\n    state: Ariakit.MenuState\n    handleItemSelect: (value: string | null | undefined) => void\n    handleAnchorRectChange: (value: { 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<Ariakit.MenuStateProps, '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, handleAnchorRectChange] = React.useState<{ x: number; y: number } | null>(\n        null,\n    )\n    const getAnchorRect = React.useMemo(() => {\n        return anchorRect ? () => anchorRect : undefined\n    }, [anchorRect])\n\n    const state = Ariakit.useMenuState({\n        focusLoop: true,\n        gutter: 8,\n        shift: 4,\n        getAnchorRect,\n        ...props,\n    })\n\n    React.useEffect(() => {\n        if (!state.open) handleAnchorRectChange(null)\n    }, [state.open])\n\n    const handleItemSelect = React.useCallback(\n        function handleItemSelect(value: string | null | undefined) {\n            if (onItemSelect) onItemSelect(value)\n        },\n        [onItemSelect],\n    )\n\n    const value: MenuContextState = React.useMemo(\n        () => ({\n            state,\n            handleItemSelect,\n            handleAnchorRectChange,\n        }),\n        [state, handleItemSelect],\n    )\n\n    return <MenuContext.Provider value={value}>{children}</MenuContext.Provider>\n}\n\n//\n// MenuButton\n//\n\ntype MenuButtonProps = Omit<Ariakit.MenuButtonProps, 'state' | '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 { state } = React.useContext(MenuContext)\n    return (\n        <Ariakit.MenuButton\n            {...props}\n            state={state}\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 { handleAnchorRectChange, state } = React.useContext(MenuContext)\n    const handleContextMenu = React.useCallback(\n        (event: React.MouseEvent) => {\n            event.preventDefault()\n            handleAnchorRectChange({ x: event.clientX, y: event.clientY })\n            state.show()\n        },\n        [handleAnchorRectChange, state],\n    )\n\n    return React.createElement(component, { ...props, onContextMenu: handleContextMenu, ref })\n})\n\n//\n// MenuList\n//\n\ntype MenuListProps = Omit<Ariakit.MenuProps, 'state' | '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 { state } = React.useContext(MenuContext)\n\n    return state.open ? (\n        <Portal preserveTabOrder>\n            <Ariakit.Menu\n                {...props}\n                state={state}\n                ref={ref}\n                className={classNames('reactist_menulist', exceptionallySetClassName)}\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     * The content inside the menu item.\n     */\n    children: React.ReactNode\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     * 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     * 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     * 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, state } = React.useContext(MenuContext)\n    const { hide } = state\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        <Ariakit.MenuItem\n            {...props}\n            as={as}\n            state={state}\n            ref={ref}\n            onClick={handleClick}\n            className={exceptionallySetClassName}\n            hideOnClick={false}\n        >\n            {children}\n        </Ariakit.MenuItem>\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, state } = React.useContext(MenuContext)\n    const { hide: parentMenuHide } = state\n\n    const handleSubItemSelect = React.useCallback(\n        function handleSubItemSelect(value: string | null | undefined) {\n            if (onItemSelect) 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\n    // 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            <Ariakit.MenuItem as=\"div\" state={state} ref={ref} hideOnClick={false}>\n                {renderMenuButton}\n            </Ariakit.MenuItem>\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 { state } = React.useContext(MenuContext)\n    return (\n        <Ariakit.MenuGroup {...props} ref={ref} state={state} className={exceptionallySetClassName}>\n            {label ? (\n                <div role=\"presentation\" className=\"reactist_menugroup__label\">\n                    {label}\n                </div>\n            ) : null}\n            {children}\n        </Ariakit.MenuGroup>\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","handleAnchorRectChange","getAnchorRect","undefined","state","Ariakit","focusLoop","gutter","shift","open","handleItemSelect","value","Provider","MenuButton","polymorphicComponent","ref","exceptionallySetClassName","className","classNames","ContextMenuTrigger","as","component","handleContextMenu","event","preventDefault","x","clientX","y","clientY","show","onContextMenu","MenuList","modal","Portal","preserveTabOrder","MenuItem","onSelect","hideOnSelect","onClick","hide","handleClick","onSelectResult","defaultPrevented","shouldClose","hideOnClick","SubMenu","parentMenuItemSelect","parentMenuHide","handleSubItemSelect","button","list","toArray","renderMenuButton","MenuGroup","label","role"],"mappings":";;;;;;;;;;;;;AA4BA,MAAMA,WAAW,gBAAGC,aAAA;AAEhB;AACA;AACA;AACA;AACA,EANgB,CAApB;AA8BA;;;;;AAIA,SAASC,IAAT;MAAc;IAAEC,QAAF;IAAYC;;MAAiBC;;EACvC,MAAM,CAACC,UAAD,EAAaC,sBAAb,IAAuCN,QAAA,CACzC,IADyC,CAA7C;EAGA,MAAMO,aAAa,GAAGP,OAAA,CAAc;IAChC,OAAOK,UAAU,GAAG,MAAMA,UAAT,GAAsBG,SAAvC;GADkB,EAEnB,CAACH,UAAD,CAFmB,CAAtB;EAIA,MAAMI,KAAK,GAAGC,YAAA;IACVC,SAAS,EAAE,IADD;IAEVC,MAAM,EAAE,CAFE;IAGVC,KAAK,EAAE,CAHG;IAIVN;KACGH,KALO,EAAd;EAQAJ,SAAA,CAAgB;IACZ,IAAI,CAACS,KAAK,CAACK,IAAX,EAAiBR,sBAAsB,CAAC,IAAD,CAAtB;GADrB,EAEG,CAACG,KAAK,CAACK,IAAP,CAFH;EAIA,MAAMC,gBAAgB,GAAGf,WAAA,CACrB,SAASe,gBAAT,CAA0BC,KAA1B;IACI,IAAIb,YAAJ,EAAkBA,YAAY,CAACa,KAAD,CAAZ;GAFD,EAIrB,CAACb,YAAD,CAJqB,CAAzB;EAOA,MAAMa,KAAK,GAAqBhB,OAAA,CAC5B,OAAO;IACHS,KADG;IAEHM,gBAFG;IAGHT;GAHJ,CAD4B,EAM5B,CAACG,KAAD,EAAQM,gBAAR,CAN4B,CAAhC;EASA,oBAAOf,aAAA,CAACD,WAAW,CAACkB,QAAb;IAAsBD,KAAK,EAAEA;GAA7B,EAAqCd,QAArC,CAAP;AACH;AAQD;;;;;MAGMgB,UAAU,gBAAGC,oBAAoB,CAA4B,SAASD,UAAT,QAE/DE,GAF+D;MAC/D;IAAEC;;MAA8BjB;;EAGhC,MAAM;IAAEK;MAAUT,UAAA,CAAiBD,WAAjB,CAAlB;EACA,oBACIC,aAAA,CAACU,YAAD,oCACQN,KADR;IAEIK,KAAK,EAAEA,KAFX;IAGIW,GAAG,EAAEA,GAHT;IAIIE,SAAS,EAAEC,UAAU,CAAC,qBAAD,EAAwBF,yBAAxB;KAL7B;AAQH,CAbsC;AAgBvC;AACA;;MACMG,kBAAkB,gBAAGL,oBAAoB,CAAiB,SAASK,kBAAT,QAE5DJ,GAF4D;MAC5D;IAAEK,EAAE,EAAEC,SAAS,GAAG;;MAAUtB;;EAG5B,MAAM;IAAEE,sBAAF;IAA0BG;MAAUT,UAAA,CAAiBD,WAAjB,CAA1C;EACA,MAAM4B,iBAAiB,GAAG3B,WAAA,CACrB4B,KAAD;IACIA,KAAK,CAACC,cAAN;IACAvB,sBAAsB,CAAC;MAAEwB,CAAC,EAAEF,KAAK,CAACG,OAAX;MAAoBC,CAAC,EAAEJ,KAAK,CAACK;KAA9B,CAAtB;IACAxB,KAAK,CAACyB,IAAN;GAJkB,EAMtB,CAAC5B,sBAAD,EAAyBG,KAAzB,CANsB,CAA1B;EASA,oBAAOT,aAAA,CAAoB0B,SAApB,oCAAoCtB,KAApC;IAA2C+B,aAAa,EAAER,iBAA1D;IAA6EP;KAApF;AACH,CAf8C;AAuB/C;;;;MAGMgB,QAAQ,gBAAGjB,oBAAoB,CAAuB,SAASiB,QAAT,QAExDhB,GAFwD;MACxD;IAAEC,yBAAF;IAA6BgB,KAAK,GAAG;;MAASjC;;EAG9C,MAAM;IAAEK;MAAUT,UAAA,CAAiBD,WAAjB,CAAlB;EAEA,OAAOU,KAAK,CAACK,IAAN,gBACHd,aAAA,CAACsC,MAAD;IAAQC,gBAAgB;GAAxB,eACIvC,aAAA,CAACU,MAAD,oCACQN,KADR;IAEIK,KAAK,EAAEA,KAFX;IAGIW,GAAG,EAAEA,GAHT;IAIIE,SAAS,EAAEC,UAAU,CAAC,mBAAD,EAAsBF,yBAAtB,CAJzB;IAKIgB,KAAK,EAAEA;KANf,CADG,GAUH,IAVJ;AAWH,CAjBoC;AA0ErC;;;;;MAIMG,QAAQ,gBAAGrB,oBAAoB,CAA0B,SAASqB,QAAT,QAW3DpB,GAX2D;MAC3D;IACIJ,KADJ;IAEId,QAFJ;IAGIuC,QAHJ;IAIIC,YAAY,GAAG,IAJnB;IAKIC,OALJ;IAMItB,yBANJ;IAOII,EAAE,GAAG;;MACFrB;;EAIP,MAAM;IAAEW,gBAAF;IAAoBN;MAAUT,UAAA,CAAiBD,WAAjB,CAApC;EACA,MAAM;IAAE6C;MAASnC,KAAjB;EAEA,MAAMoC,WAAW,GAAG7C,WAAA,CAChB,SAAS6C,WAAT,CAAqBjB,KAArB;IACIe,OAAO,QAAP,YAAAA,OAAO,CAAGf,KAAH,CAAP;IACA,MAAMkB,cAAc,GAChBL,QAAQ,IAAI,CAACb,KAAK,CAACmB,gBAAnB,GAAsCN,QAAQ,EAA9C,GAAmDjC,SADvD;IAEA,MAAMwC,WAAW,GAAGF,cAAc,KAAK,KAAnB,IAA4BJ,YAAhD;IACA3B,gBAAgB,CAACC,KAAD,CAAhB;IACA,IAAIgC,WAAJ,EAAiBJ,IAAI;GAPT,EAShB,CAACH,QAAD,EAAWE,OAAX,EAAoB5B,gBAApB,EAAsC2B,YAAtC,EAAoDE,IAApD,EAA0D5B,KAA1D,CATgB,CAApB;EAYA,oBACIhB,aAAA,CAACU,UAAD,oCACQN,KADR;IAEIqB,EAAE,EAAEA,EAFR;IAGIhB,KAAK,EAAEA,KAHX;IAIIW,GAAG,EAAEA,GAJT;IAKIuB,OAAO,EAAEE,WALb;IAMIvB,SAAS,EAAED,yBANf;IAOI4B,WAAW,EAAE;MAEZ/C,QATL,CADJ;AAaH,CAzCoC;AAiDrC;;;;;;;;;;;;;;;;;;;;;;MAqBMgD,OAAO,gBAAGlD,UAAA,CAA+C,SAASkD,OAAT,CAC3D;EAAEhD,QAAF;EAAYC;AAAZ,CAD2D,EAE3DiB,GAF2D;EAI3D,MAAM;IAAEL,gBAAgB,EAAEoC,oBAApB;IAA0C1C;MAAUT,UAAA,CAAiBD,WAAjB,CAA1D;EACA,MAAM;IAAE6C,IAAI,EAAEQ;MAAmB3C,KAAjC;EAEA,MAAM4C,mBAAmB,GAAGrD,WAAA,CACxB,SAASqD,mBAAT,CAA6BrC,KAA7B;IACI,IAAIb,YAAJ,EAAkBA,YAAY,CAACa,KAAD,CAAZ;IAClBmC,oBAAoB,CAACnC,KAAD,CAApB;IACAoC,cAAc;GAJM,EAMxB,CAACA,cAAD,EAAiBD,oBAAjB,EAAuChD,YAAvC,CANwB,CAA5B;EASA,MAAM,CAACmD,MAAD,EAASC,IAAT,IAAiBvD,QAAA,CAAewD,OAAf,CAAuBtD,QAAvB,CAAvB;;;EAIA,MAAMuD,gBAAgB,GAAGzD,WAAA,CACrB,SAASyD,gBAAT,CAA0BrD,KAA1B;IACI,oBAAOJ,YAAA,CAAmBsD,MAAnB,EAAiDlD,KAAjD,CAAP;GAFiB,EAIrB,CAACkD,MAAD,CAJqB,CAAzB;EAOA,oBACItD,aAAA,CAACC,IAAD;IAAME,YAAY,EAAEkD;GAApB,eACIrD,aAAA,CAACU,UAAD;IAAkBe,EAAE,EAAC;IAAMhB,KAAK,EAAEA;IAAOW,GAAG,EAAEA;IAAK6B,WAAW,EAAE;GAAhE,EACKQ,gBADL,CADJ,EAIKF,IAJL,CADJ;AAQH,CAnCe;AAgDhB;;;;;;;MAMMG,SAAS,gBAAGvC,oBAAoB,CAAwB,SAASuC,SAAT,QAE1DtC,GAF0D;MAC1D;IAAEuC,KAAF;IAASzD,QAAT;IAAmBmB;;MAA8BjB;;EAGjD,MAAM;IAAEK;MAAUT,UAAA,CAAiBD,WAAjB,CAAlB;EACA,oBACIC,aAAA,CAACU,WAAD,oCAAuBN,KAAvB;IAA8BgB,GAAG,EAAEA,GAAnC;IAAwCX,KAAK,EAAEA,KAA/C;IAAsDa,SAAS,EAAED;MAC5DsC,KAAK,gBACF3D,aAAA,MAAA;IAAK4D,IAAI,EAAC;IAAetC,SAAS,EAAC;GAAnC,EACKqC,KADL,CADE,GAIF,IALR,EAMKzD,QANL,CADJ;AAUH,CAfqC;;;;"}

package/es/modal/modal.js

@@ -5,11 +5,12 @@ import { Box } from '../box/box.js';
 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 { CloseIcon } from '../icons/close-icon.js';
+import { Portal } from 'ariakit/portal';
 import FocusLock from 'react-focus-lock';
 import { hideOthers } from 'aria-hidden';
+import { useDialogState, Dialog } from 'ariakit/dialog';
 import styles from './modal.module.css.js';
 
 const _excluded = ["isOpen", "onDismiss", "height", "width", "exceptionallySetClassName", "exceptionallySetOverlayClassName", "autoFocus", "hideOnEscape", "hideOnInteractOutside", "children", "portalElement"],
@@ -57,7 +58,7 @@ function Modal(_ref) {
       onDismiss == null ? void 0 : onDismiss();
     }
   }, [onDismiss]);
-  const store = useDialogStore({
+  const state = useDialogState({
     open: isOpen,
     setOpen
   });
@@ -113,7 +114,7 @@ function Modal(_ref) {
   }, /*#__PURE__*/createElement(Dialog, _objectSpread2(_objectSpread2({}, props), {}, {
     ref: dialogRef,
     as: Box,
-    store: store,
+    state: state,
     hideOnEscape: hideOnEscape,
     preventBodyScroll: true,
     borderRadius: "full",