@doist/reactist 28.6.0 → 28.7.2

package/lib/components/time/time-utils.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("dayjs"),t=require("dayjs/plugin/localizedFormat");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=r(e);a.default.extend(r(t).default),exports.TimeUtils={SHORT_FORMAT_CURRENT_YEAR:"L",SHORT_FORMAT_PAST_YEAR:"LL",LONG_FORMAT:"LL, LT",timeAgo(e,t={}){const{locale:r="en",shortFormatCurrentYear:o=this.SHORT_FORMAT_CURRENT_YEAR,shortFormatPastYear:f=this.SHORT_FORMAT_PAST_YEAR,daysSuffix:s="d",hoursSuffix:u="h",minutesSuffix:i="m",momentsAgo:l="moments ago"}=t,m=a.default(),R=a.default(1e3*e);R.locale(r);const n=m.diff(R,"minute"),T=m.diff(R,"hour"),_=m.diff(R,"day");return _>1?R.isSame(m,"year")?R.format(o):R.format(f):1===_?""+_+s:T>0&&T<=23?""+T+u:n>0&&n<=59?""+n+i:l},formatTime(e,t={}){const{locale:r="en",shortFormatCurrentYear:o=this.SHORT_FORMAT_CURRENT_YEAR,shortFormatPastYear:f=this.SHORT_FORMAT_PAST_YEAR}=t,s=a.default(1e3*e);return s.locale(r),s.isSame(a.default(),"year")?s.format(o):s.format(f)},formatTimeLong(e,t={}){const{locale:r="en",longFormat:o=this.LONG_FORMAT}=t,f=a.default(1e3*e);return f.locale(r),f.format(o)}};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("dayjs"),t=require("dayjs/plugin/localizedFormat");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=r(e);a.default.extend(r(t).default),exports.TimeUtils={SHORT_FORMAT_CURRENT_YEAR:"L",SHORT_FORMAT_PAST_YEAR:"LL",LONG_FORMAT:"LL, LT",timeAgo(e,t={}){const{locale:r="en",shortFormatCurrentYear:o=this.SHORT_FORMAT_CURRENT_YEAR,shortFormatPastYear:f=this.SHORT_FORMAT_PAST_YEAR,daysSuffix:s="d",hoursSuffix:u="h",minutesSuffix:i="m",momentsAgo:l="moments ago"}=t,m=a.default(),R=a.default(1e3*e);R.locale(r);const n=m.diff(R,"minute"),T=m.diff(R,"hour"),_=m.diff(R,"day");return _>1?R.isSame(m,"year")?R.format(o):R.format(f):1===_?`${_}${s}`:T>0&&T<=23?`${T}${u}`:n>0&&n<=59?`${n}${i}`:l},formatTime(e,t={}){const{locale:r="en",shortFormatCurrentYear:o=this.SHORT_FORMAT_CURRENT_YEAR,shortFormatPastYear:f=this.SHORT_FORMAT_PAST_YEAR}=t,s=a.default(1e3*e);return s.locale(r),s.isSame(a.default(),"year")?s.format(o):s.format(f)},formatTimeLong(e,t={}){const{locale:r="en",longFormat:o=this.LONG_FORMAT}=t,f=a.default(1e3*e);return f.locale(r),f.format(o)}};
 //# sourceMappingURL=time-utils.js.map

package/lib/components/time/time-utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"time-utils.js","sources":["../../../src/components/time/time-utils.ts"],"sourcesContent":["import dayjs from 'dayjs'\n/**\n * There's a problem with our setup where the default export from\n * localizedFormat (and likely every other dayjs plugin) isn't properly\n * recognized. The proposed workarounds (importing with `.js` ending, or adding\n * `allowSyntheticDefaultImports` to the tsconfig) either broke linting or type\n * checking. After spending some time on this it was decided that further\n * investigations are not worth it, the code works and the eslint ignore is fine.\n * ref: https://github.com/iamkun/dayjs/issues/593\n * ref: https://day.js.org/docs/en/installation/typescript\n */\n// eslint-disable-next-line import/default\nimport LocalizedFormat from 'dayjs/plugin/localizedFormat'\n\ndayjs.extend(LocalizedFormat)\n\ntype TimeConfig = {\n    locale?: string\n    longFormat?: string\n    shortFormatCurrentYear?: string\n    shortFormatPastYear?: string\n    daysSuffix?: string\n    hoursSuffix?: string\n    minutesSuffix?: string\n    momentsAgo?: string\n}\n\nconst TimeUtils = {\n    SHORT_FORMAT_CURRENT_YEAR: 'L',\n    SHORT_FORMAT_PAST_YEAR: 'LL',\n    LONG_FORMAT: 'LL, LT',\n\n    timeAgo(timestamp: number, config: TimeConfig = {}) {\n        const {\n            locale = 'en',\n            shortFormatCurrentYear = this.SHORT_FORMAT_CURRENT_YEAR,\n            shortFormatPastYear = this.SHORT_FORMAT_PAST_YEAR,\n            daysSuffix = 'd',\n            hoursSuffix = 'h',\n            minutesSuffix = 'm',\n            momentsAgo = 'moments ago',\n        } = config\n        const now = dayjs()\n        const date = dayjs(timestamp * 1000)\n        date.locale(locale)\n        const diffMinutes = now.diff(date, 'minute')\n        const diffHours = now.diff(date, 'hour')\n        const diffDays = now.diff(date, 'day')\n\n        if (diffDays > 1) {\n            if (date.isSame(now, 'year')) {\n                return date.format(shortFormatCurrentYear)\n            } else {\n                return date.format(shortFormatPastYear)\n            }\n        } else if (diffDays === 1) {\n            return `${diffDays}${daysSuffix}`\n        } else if (diffHours > 0 && diffHours <= 23) {\n            return `${diffHours}${hoursSuffix}`\n        } else if (diffMinutes > 0 && diffMinutes <= 59) {\n            return `${diffMinutes}${minutesSuffix}`\n        } else {\n            return momentsAgo\n        }\n    },\n\n    formatTime(timestamp: number, config: TimeConfig = {}) {\n        const {\n            locale = 'en',\n            shortFormatCurrentYear = this.SHORT_FORMAT_CURRENT_YEAR,\n            shortFormatPastYear = this.SHORT_FORMAT_PAST_YEAR,\n        } = config\n        const date = dayjs(timestamp * 1000)\n        date.locale(locale)\n        if (date.isSame(dayjs(), 'year')) {\n            return date.format(shortFormatCurrentYear)\n        } else {\n            return date.format(shortFormatPastYear)\n        }\n    },\n\n    formatTimeLong(timestamp: number, config: TimeConfig = {}) {\n        const { locale = 'en', longFormat = this.LONG_FORMAT } = config\n        const date = dayjs(timestamp * 1000)\n        date.locale(locale)\n        return date.format(longFormat)\n    },\n}\n\nexport { TimeUtils, TimeConfig }\n"],"names":["dayjs","extend","LocalizedFormat","SHORT_FORMAT_CURRENT_YEAR","SHORT_FORMAT_PAST_YEAR","LONG_FORMAT","timeAgo","timestamp","config","locale","shortFormatCurrentYear","this","shortFormatPastYear","daysSuffix","hoursSuffix","minutesSuffix","momentsAgo","now","date","diffMinutes","diff","diffHours","diffDays","isSame","format","formatTime","formatTimeLong","longFormat"],"mappings":"wNAcAA,EAAAA,QAAMC,YAAOC,2BAaK,CACdC,0BAA2B,IAC3BC,uBAAwB,KACxBC,YAAa,SAEbC,QAAQC,EAAmBC,EAAqB,IAC5C,MAAMC,OACFA,EAAS,KADPC,uBAEFA,EAAyBC,KAAKR,0BAF5BS,oBAGFA,EAAsBD,KAAKP,uBAHzBS,WAIFA,EAAa,IAJXC,YAKFA,EAAc,IALZC,cAMFA,EAAgB,IANdC,WAOFA,EAAa,eACbR,EACES,EAAMjB,EAAAA,UACNkB,EAAOlB,EAAAA,QAAkB,IAAZO,GACnBW,EAAKT,OAAOA,GACZ,MAAMU,EAAcF,EAAIG,KAAKF,EAAM,UAC7BG,EAAYJ,EAAIG,KAAKF,EAAM,QAC3BI,EAAWL,EAAIG,KAAKF,EAAM,OAEhC,OAAII,EAAW,EACPJ,EAAKK,OAAON,EAAK,QACVC,EAAKM,OAAOd,GAEZQ,EAAKM,OAAOZ,GAEH,IAAbU,EACGA,GAAAA,EAAWT,EACdQ,EAAY,GAAKA,GAAa,GAC3BA,GAAAA,EAAYP,EACfK,EAAc,GAAKA,GAAe,GAC/BA,GAAAA,EAAcJ,EAEjBC,GAIfS,WAAWlB,EAAmBC,EAAqB,IAC/C,MAAMC,OACFA,EAAS,KADPC,uBAEFA,EAAyBC,KAAKR,0BAF5BS,oBAGFA,EAAsBD,KAAKP,wBAC3BI,EACEU,EAAOlB,EAAAA,QAAkB,IAAZO,GAEnB,OADAW,EAAKT,OAAOA,GACRS,EAAKK,OAAOvB,YAAS,QACdkB,EAAKM,OAAOd,GAEZQ,EAAKM,OAAOZ,IAI3Bc,eAAenB,EAAmBC,EAAqB,IACnD,MAAMC,OAAEA,EAAS,KAAXkB,WAAiBA,EAAahB,KAAKN,aAAgBG,EACnDU,EAAOlB,EAAAA,QAAkB,IAAZO,GAEnB,OADAW,EAAKT,OAAOA,GACLS,EAAKM,OAAOG"}
+{"version":3,"file":"time-utils.js","sources":["../../../src/components/time/time-utils.ts"],"sourcesContent":["import dayjs from 'dayjs'\n/**\n * There's a problem with our setup where the default export from\n * localizedFormat (and likely every other dayjs plugin) isn't properly\n * recognized. The proposed workarounds (importing with `.js` ending, or adding\n * `allowSyntheticDefaultImports` to the tsconfig) either broke linting or type\n * checking. After spending some time on this it was decided that further\n * investigations are not worth it, the code works and the eslint ignore is fine.\n * ref: https://github.com/iamkun/dayjs/issues/593\n * ref: https://day.js.org/docs/en/installation/typescript\n */\n// eslint-disable-next-line import/default\nimport LocalizedFormat from 'dayjs/plugin/localizedFormat'\n\ndayjs.extend(LocalizedFormat)\n\ntype TimeConfig = {\n    locale?: string\n    longFormat?: string\n    shortFormatCurrentYear?: string\n    shortFormatPastYear?: string\n    daysSuffix?: string\n    hoursSuffix?: string\n    minutesSuffix?: string\n    momentsAgo?: string\n}\n\nconst TimeUtils = {\n    SHORT_FORMAT_CURRENT_YEAR: 'L',\n    SHORT_FORMAT_PAST_YEAR: 'LL',\n    LONG_FORMAT: 'LL, LT',\n\n    timeAgo(timestamp: number, config: TimeConfig = {}) {\n        const {\n            locale = 'en',\n            shortFormatCurrentYear = this.SHORT_FORMAT_CURRENT_YEAR,\n            shortFormatPastYear = this.SHORT_FORMAT_PAST_YEAR,\n            daysSuffix = 'd',\n            hoursSuffix = 'h',\n            minutesSuffix = 'm',\n            momentsAgo = 'moments ago',\n        } = config\n        const now = dayjs()\n        const date = dayjs(timestamp * 1000)\n        date.locale(locale)\n        const diffMinutes = now.diff(date, 'minute')\n        const diffHours = now.diff(date, 'hour')\n        const diffDays = now.diff(date, 'day')\n\n        if (diffDays > 1) {\n            if (date.isSame(now, 'year')) {\n                return date.format(shortFormatCurrentYear)\n            } else {\n                return date.format(shortFormatPastYear)\n            }\n        } else if (diffDays === 1) {\n            return `${diffDays}${daysSuffix}`\n        } else if (diffHours > 0 && diffHours <= 23) {\n            return `${diffHours}${hoursSuffix}`\n        } else if (diffMinutes > 0 && diffMinutes <= 59) {\n            return `${diffMinutes}${minutesSuffix}`\n        } else {\n            return momentsAgo\n        }\n    },\n\n    formatTime(timestamp: number, config: TimeConfig = {}) {\n        const {\n            locale = 'en',\n            shortFormatCurrentYear = this.SHORT_FORMAT_CURRENT_YEAR,\n            shortFormatPastYear = this.SHORT_FORMAT_PAST_YEAR,\n        } = config\n        const date = dayjs(timestamp * 1000)\n        date.locale(locale)\n        if (date.isSame(dayjs(), 'year')) {\n            return date.format(shortFormatCurrentYear)\n        } else {\n            return date.format(shortFormatPastYear)\n        }\n    },\n\n    formatTimeLong(timestamp: number, config: TimeConfig = {}) {\n        const { locale = 'en', longFormat = this.LONG_FORMAT } = config\n        const date = dayjs(timestamp * 1000)\n        date.locale(locale)\n        return date.format(longFormat)\n    },\n}\n\nexport { TimeUtils, TimeConfig }\n"],"names":["dayjs","extend","LocalizedFormat","SHORT_FORMAT_CURRENT_YEAR","SHORT_FORMAT_PAST_YEAR","LONG_FORMAT","timeAgo","timestamp","config","locale","shortFormatCurrentYear","this","shortFormatPastYear","daysSuffix","hoursSuffix","minutesSuffix","momentsAgo","now","date","diffMinutes","diff","diffHours","diffDays","isSame","format","formatTime","formatTimeLong","longFormat"],"mappings":"wNAcAA,EAAAA,QAAMC,YAAOC,2BAaK,CACdC,0BAA2B,IAC3BC,uBAAwB,KACxBC,YAAa,SAEbC,QAAQC,EAAmBC,EAAqB,IAC5C,MAAMC,OACFA,EAAS,KADPC,uBAEFA,EAAyBC,KAAKR,0BAF5BS,oBAGFA,EAAsBD,KAAKP,uBAHzBS,WAIFA,EAAa,IAJXC,YAKFA,EAAc,IALZC,cAMFA,EAAgB,IANdC,WAOFA,EAAa,eACbR,EACES,EAAMjB,EAAAA,UACNkB,EAAOlB,EAAAA,QAAkB,IAAZO,GACnBW,EAAKT,OAAOA,GACZ,MAAMU,EAAcF,EAAIG,KAAKF,EAAM,UAC7BG,EAAYJ,EAAIG,KAAKF,EAAM,QAC3BI,EAAWL,EAAIG,KAAKF,EAAM,OAEhC,OAAII,EAAW,EACPJ,EAAKK,OAAON,EAAK,QACVC,EAAKM,OAAOd,GAEZQ,EAAKM,OAAOZ,GAEH,IAAbU,EACG,GAAAA,IAAWT,IACdQ,EAAY,GAAKA,GAAa,GAC3B,GAAAA,IAAYP,IACfK,EAAc,GAAKA,GAAe,GAC/B,GAAAA,IAAcJ,IAEjBC,GAIfS,WAAWlB,EAAmBC,EAAqB,IAC/C,MAAMC,OACFA,EAAS,KADPC,uBAEFA,EAAyBC,KAAKR,0BAF5BS,oBAGFA,EAAsBD,KAAKP,wBAC3BI,EACEU,EAAOlB,EAAAA,QAAkB,IAAZO,GAEnB,OADAW,EAAKT,OAAOA,GACRS,EAAKK,OAAOvB,YAAS,QACdkB,EAAKM,OAAOd,GAEZQ,EAAKM,OAAOZ,IAI3Bc,eAAenB,EAAmBC,EAAqB,IACnD,MAAMC,OAAEA,EAAS,KAAXkB,WAAiBA,EAAahB,KAAKN,aAAgBG,EACnDU,EAAOlB,EAAAA,QAAkB,IAAZO,GAEnB,OADAW,EAAKT,OAAOA,GACLS,EAAKM,OAAOG"}

package/lib/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, 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":["React","forwardRef","ref","level","weight","size","tone","children","lineClamp","align","exceptionallySetClassName","_ref","props","_objectWithoutProperties","objectWithoutProperties","_excluded","headingElementName","lineClampMultipleLines","parseInt","createElement","Box","className","styles","heading","getClassNames","toString","textAlign","paddingRight","undefined","as"],"mappings":"0oBAqEgBA,EAAMC,YAClB,SAYIC,EAAAA,GAAG,IAXHC,MACIA,EADJC,OAEIA,EAAS,UAFbC,KAGIA,EAHJC,KAIIA,EAAO,SAJXC,SAKIA,EALJC,UAMIA,EANJC,MAOIA,EAPJC,0BAQIA,GAGDC,EAFIC,EAEJC,EAAAC,wBAAAH,EAAAI,GAIH,MAAMC,MAAyBb,EACzBc,EACmB,iBAAdT,EAAyBU,SAASV,EAAW,IAAM,GAAKA,GAAa,GAAK,EAErF,OACIR,EAACmB,cAAAC,yCACOR,GADR,GAAA,CAEIS,UAAW,CACPX,EACAY,EAAM,QAACC,QACI,YAAXnB,EAAuBoB,gBAAcF,EAAAA,QAAQ,SAAUlB,GAAU,KACxD,WAATE,EAAoBkB,EAAaA,cAACF,EAAD,QAAS,OAAQhB,GAAQ,KAC1DkB,EAAaA,cAACF,UAAQ,OAAQjB,GAC9BY,EAAyBK,EAAAA,QAAOL,uBAAyB,KACzDT,EAAYgB,EAAaA,cAACF,UAAQ,YAAad,EAAUiB,YAAc,MAE3EC,UAAWjB,EAGXkB,aAAcnB,EAAY,cAAWoB,EACrCC,GAAIb,EACJd,IAAKA,IAEJK"}
+{"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":["React","forwardRef","ref","level","weight","size","tone","children","lineClamp","align","exceptionallySetClassName","_ref","props","_objectWithoutProperties","objectWithoutProperties","_excluded","headingElementName","lineClampMultipleLines","parseInt","createElement","Box","className","styles","heading","getClassNames","toString","textAlign","paddingRight","undefined","as"],"mappings":"0oBAqEgBA,EAAMC,YAClB,SAYIC,EAAAA,GAAG,IAXHC,MACIA,EADJC,OAEIA,EAAS,UAFbC,KAGIA,EAHJC,KAIIA,EAAO,SAJXC,SAKIA,EALJC,UAMIA,EANJC,MAOIA,EAPJC,0BAQIA,GAGDC,EAFIC,EAEJC,EAAAC,wBAAAH,EAAAI,GAIH,MAAMC,EAAyB,IAAAb,EACzBc,EACmB,iBAAdT,EAAyBU,SAASV,EAAW,IAAM,GAAKA,GAAa,GAAK,EAErF,OACIR,EAACmB,cAAAC,yCACOR,GADR,GAAA,CAEIS,UAAW,CACPX,EACAY,EAAM,QAACC,QACI,YAAXnB,EAAuBoB,gBAAcF,EAAAA,QAAQ,SAAUlB,GAAU,KACxD,WAATE,EAAoBkB,EAAaA,cAACF,EAAD,QAAS,OAAQhB,GAAQ,KAC1DkB,EAAaA,cAACF,UAAQ,OAAQjB,GAC9BY,EAAyBK,EAAAA,QAAOL,uBAAyB,KACzDT,EAAYgB,EAAaA,cAACF,UAAQ,YAAad,EAAUiB,YAAc,MAE3EC,UAAWjB,EAGXkB,aAAcnB,EAAY,cAAWoB,EACrCC,GAAIb,EACJd,IAAKA,IAEJK"}

package/lib/loading/loading.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_rollupPluginBabelHelpers.js"),r=require("react"),t=require("../box/box.js"),a=require("../spinner/spinner.js");function l(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var a=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,a.get?a:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,r}var i=l(r);const n=["size","exceptionallySetClassName"],s={xsmall:16,small:24,medium:36,large:48};exports.Loading=function(r){var l;let{size:o="small",exceptionallySetClassName:u}=r,c=e.objectWithoutProperties(r,n);const b=null!=(l=s[o])?l:s.small,p=c["aria-label"]?c["aria-label"]:c["aria-labelledby"]?void 0:"Loading…";return i.createElement(t.Box,e.objectSpread2(e.objectSpread2({},c),{},{"aria-label":p,className:u,display:"flex",alignItems:"center",justifyContent:"center",role:"progressbar"}),i.createElement(a.Spinner,{size:b,"aria-hidden":!0}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_rollupPluginBabelHelpers.js"),r=require("react"),t=require("../box/box.js"),a=require("../spinner/spinner.js");function l(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var a=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,a.get?a:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,r}var i=l(r);const n=["size","exceptionallySetClassName"],s={xsmall:16,small:24,medium:36,large:48};exports.Loading=function(r){let{size:l="small",exceptionallySetClassName:o}=r,c=e.objectWithoutProperties(r,n);const u=s[l]??s.small,b=c["aria-label"]?c["aria-label"]:c["aria-labelledby"]?void 0:"Loading…";return i.createElement(t.Box,e.objectSpread2(e.objectSpread2({},c),{},{"aria-label":b,className:o,display:"flex",alignItems:"center",justifyContent:"center",role:"progressbar"}),i.createElement(a.Spinner,{size:u,"aria-hidden":!0}))};
 //# sourceMappingURL=loading.js.map

package/lib/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'\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","_ref","_sizeMapping$size","size","exceptionallySetClassName","props","_objectWithoutProperties","objectWithoutProperties","_excluded","numericSize","ariaLabel","undefined","React","createElement","Box","aria-label","className","display","alignItems","justifyContent","role","Spinner","aria-hidden"],"mappings":"uhBAqCMA,EAAoC,CACtCC,OAAQ,GACRC,MAAO,GACPC,OAAQ,GACRC,MAAO,oBAGX,SAAsFC,GAAA,IAAAC,EAAA,IAArEC,KAAEA,EAAO,QAATC,0BAAkBA,GAAmDH,EAArBI,EAAqBC,EAAAC,wBAAAN,EAAAO,GAClF,MAAMC,EAAW,SAAGb,EAAYO,IAAfD,EAAwBN,EAAYE,MAC/CY,EAAYL,EAAM,cAClBA,EAAM,cACLA,EAAM,wBAEPM,EADA,WAGN,OACIC,EAACC,cAAAC,yCACOT,GADR,GAAA,CAEgBU,aAAAL,EACZM,UAAWZ,EACXa,QAAQ,OACRC,WAAW,SACXC,eAAe,SACfC,KAAK,gBAELR,EAACC,cAAAQ,WAAQlB,KAAMM,EAA2Ba,eAAA"}
+{"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","_ref","size","exceptionallySetClassName","props","_objectWithoutProperties","objectWithoutProperties","_excluded","numericSize","ariaLabel","undefined","React","createElement","Box","aria-label","className","display","alignItems","justifyContent","role","Spinner","aria-hidden"],"mappings":"uhBAqCMA,EAAoC,CACtCC,OAAQ,GACRC,MAAO,GACPC,OAAQ,GACRC,MAAO,oBAGX,SAAsFC,GAAA,IAArEC,KAAEA,EAAO,QAATC,0BAAkBA,GAAmDF,EAArBG,EAAqBC,EAAAC,wBAAAL,EAAAM,GAClF,MAAMC,EAAcZ,EAAYM,IAASN,EAAYE,MAC/CW,EAAYL,EAAM,cAClBA,EAAM,cACLA,EAAM,wBAEPM,EADA,WAGN,OACIC,EAACC,cAAAC,yCACOT,GADR,GAAA,CAEgBU,aAAAL,EACZM,UAAWZ,EACXa,QAAQ,OACRC,WAAW,SACXC,eAAe,SACfC,KAAK,gBAELR,EAACC,cAAAQ,WAAQlB,KAAMM,EAA2Ba,eAAA"}

package/lib/menu/menu.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_rollupPluginBabelHelpers.js"),t=require("react"),r=require("classnames"),n=require("@ariakit/react");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function l(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,t}var u=l(t),c=o(r);const a=["children","onItemSelect"],s=["exceptionallySetClassName"],i=["render"],d=["exceptionallySetClassName","modal","flip"],p=["value","children","onSelect","hideOnSelect","onClick","exceptionallySetClassName"],m=["label","children","exceptionallySetClassName"],f=u.createContext({menuStore:null,handleItemSelect:()=>{},getAnchorRect:null,setAnchorRect:()=>{}}),S=u.createContext({isSubMenu:!1});function b(t){let{children:r,onItemSelect:o}=t,l=e.objectWithoutProperties(t,a);const[c,s]=u.useState(null),i=u.useMemo(()=>c?()=>c:null,[c]),d=n.useMenuStore(e.objectSpread2({focusLoop:!0},l)),p=u.useMemo(()=>({menuStore:d,handleItemSelect:o,getAnchorRect:i,setAnchorRect:s}),[d,o,i,s]);return u.createElement(f.Provider,{value:p},r)}const h=u.forwardRef((function(t,r){let{exceptionallySetClassName:o}=t,l=e.objectWithoutProperties(t,s);const{menuStore:a}=u.useContext(f);if(!a)throw new Error("MenuButton must be wrapped in <Menu/>");return u.createElement(n.MenuButton,e.objectSpread2(e.objectSpread2({},l),{},{store:a,ref:r,className:c.default("reactist_menubutton",o)}))})),M=u.forwardRef((function(t,r){let{render:o}=t,l=e.objectWithoutProperties(t,i);const{setAnchorRect:c,menuStore:a}=u.useContext(f);if(!a)throw new Error("ContextMenuTrigger must be wrapped in <Menu/>");const s=u.useCallback((function(e){e.preventDefault(),c({x:e.clientX,y:e.clientY}),a.show()}),[c,a]),d=a.useState("open");return u.useEffect(()=>{d||c(null)},[d,c]),u.createElement(n.Role.div,e.objectSpread2(e.objectSpread2({},l),{},{onContextMenu:s,ref:r,render:o}))})),x=u.forwardRef((function(t,r){let{exceptionallySetClassName:o,modal:l=!0,flip:a}=t,s=e.objectWithoutProperties(t,d);const{menuStore:i,getAnchorRect:p}=u.useContext(f);if(!i)throw new Error("MenuList must be wrapped in <Menu/>");const{isSubMenu:m}=u.useContext(S);return i.useState("open")?u.createElement(n.Portal,{preserveTabOrder:!0},u.createElement(n.Menu,e.objectSpread2(e.objectSpread2({},s),{},{store:i,gutter:8,shift:4,ref:r,className:c.default("reactist_menulist",o),getAnchorRect:null!=p?p:void 0,modal:l,flip:null!=a?a:m?"left bottom":void 0}))):null})),C=u.forwardRef((function(t,r){let{value:o,children:l,onSelect:c,hideOnSelect:a=!0,onClick:s,exceptionallySetClassName:i}=t,d=e.objectWithoutProperties(t,p);const{handleItemSelect:m,menuStore:S}=u.useContext(f);if(!S)throw new Error("MenuItem must be wrapped in <Menu/>");const{hide:b}=S,h=u.useCallback((function(e){null==s||s(e);const t=!1!==(c&&!e.defaultPrevented?c():void 0)&&a;null==m||m(o),t&&b()}),[c,s,m,a,b,o]);return u.createElement(n.MenuItem,e.objectSpread2(e.objectSpread2({},d),{},{store:S,ref:r,onClick:h,className:i,hideOnClick:!1}),l)})),w=u.forwardRef((function({children:e,onItemSelect:t},r){const{handleItemSelect:o,menuStore:l}=u.useContext(f);if(!l)throw new Error("SubMenu must be wrapped in <Menu/>");const{hide:c}=l,a=u.useCallback((function(e){null==t||t(e),null==o||o(e),c()}),[c,o,t]),[s,i]=u.Children.toArray(e),d=s,p=u.useMemo(()=>({isSubMenu:!0}),[]);return u.createElement(b,{onItemSelect:a},u.createElement(n.MenuItem,{store:l,ref:r,hideOnClick:!1,render:d},d.props.children),u.createElement(S.Provider,{value:p},i))})),j=u.forwardRef((function(t,r){let{label:o,children:l,exceptionallySetClassName:c}=t,a=e.objectWithoutProperties(t,m);const{menuStore:s}=u.useContext(f);if(!s)throw new Error("MenuGroup must be wrapped in <Menu/>");return u.createElement(n.MenuGroup,e.objectSpread2(e.objectSpread2({},a),{},{ref:r,store:s,className:c}),o?u.createElement("div",{role:"presentation",className:"reactist_menugroup__label"},o):null,l)}));exports.ContextMenuTrigger=M,exports.Menu=b,exports.MenuButton=h,exports.MenuGroup=j,exports.MenuItem=C,exports.MenuList=x,exports.SubMenu=w;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_rollupPluginBabelHelpers.js"),t=require("react"),r=require("classnames"),n=require("@ariakit/react");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function l(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,t}var u=l(t),c=o(r);const a=["children","onItemSelect"],s=["exceptionallySetClassName"],i=["render"],d=["exceptionallySetClassName","modal","flip"],p=["value","children","onSelect","hideOnSelect","onClick","exceptionallySetClassName"],m=["label","children","exceptionallySetClassName"],f=u.createContext({menuStore:null,handleItemSelect:()=>{},getAnchorRect:null,setAnchorRect:()=>{}}),S=u.createContext({isSubMenu:!1});function b(t){let{children:r,onItemSelect:o}=t,l=e.objectWithoutProperties(t,a);const[c,s]=u.useState(null),i=u.useMemo(()=>c?()=>c:null,[c]),d=n.useMenuStore(e.objectSpread2({focusLoop:!0},l)),p=u.useMemo(()=>({menuStore:d,handleItemSelect:o,getAnchorRect:i,setAnchorRect:s}),[d,o,i,s]);return u.createElement(f.Provider,{value:p},r)}const h=u.forwardRef((function(t,r){let{exceptionallySetClassName:o}=t,l=e.objectWithoutProperties(t,s);const{menuStore:a}=u.useContext(f);if(!a)throw new Error("MenuButton must be wrapped in <Menu/>");return u.createElement(n.MenuButton,e.objectSpread2(e.objectSpread2({},l),{},{store:a,ref:r,className:c.default("reactist_menubutton",o)}))})),M=u.forwardRef((function(t,r){let{render:o}=t,l=e.objectWithoutProperties(t,i);const{setAnchorRect:c,menuStore:a}=u.useContext(f);if(!a)throw new Error("ContextMenuTrigger must be wrapped in <Menu/>");const s=u.useCallback((function(e){e.preventDefault(),c({x:e.clientX,y:e.clientY}),a.show()}),[c,a]),d=a.useState("open");return u.useEffect(()=>{d||c(null)},[d,c]),u.createElement(n.Role.div,e.objectSpread2(e.objectSpread2({},l),{},{onContextMenu:s,ref:r,render:o}))})),x=u.forwardRef((function(t,r){let{exceptionallySetClassName:o,modal:l=!0,flip:a}=t,s=e.objectWithoutProperties(t,d);const{menuStore:i,getAnchorRect:p}=u.useContext(f);if(!i)throw new Error("MenuList must be wrapped in <Menu/>");const{isSubMenu:m}=u.useContext(S);return i.useState("open")?u.createElement(n.Portal,{preserveTabOrder:!0},u.createElement(n.Menu,e.objectSpread2(e.objectSpread2({},s),{},{store:i,gutter:8,shift:4,ref:r,className:c.default("reactist_menulist",o),getAnchorRect:p??void 0,modal:l,flip:a??(m?"left bottom":void 0)}))):null})),C=u.forwardRef((function(t,r){let{value:o,children:l,onSelect:c,hideOnSelect:a=!0,onClick:s,exceptionallySetClassName:i}=t,d=e.objectWithoutProperties(t,p);const{handleItemSelect:m,menuStore:S}=u.useContext(f);if(!S)throw new Error("MenuItem must be wrapped in <Menu/>");const{hide:b}=S,h=u.useCallback((function(e){null==s||s(e);const t=!1!==(c&&!e.defaultPrevented?c():void 0)&&a;null==m||m(o),t&&b()}),[c,s,m,a,b,o]);return u.createElement(n.MenuItem,e.objectSpread2(e.objectSpread2({},d),{},{store:S,ref:r,onClick:h,className:i,hideOnClick:!1}),l)})),w=u.forwardRef((function({children:e,onItemSelect:t},r){const{handleItemSelect:o,menuStore:l}=u.useContext(f);if(!l)throw new Error("SubMenu must be wrapped in <Menu/>");const{hide:c}=l,a=u.useCallback((function(e){null==t||t(e),null==o||o(e),c()}),[c,o,t]),[s,i]=u.Children.toArray(e),d=s,p=u.useMemo(()=>({isSubMenu:!0}),[]);return u.createElement(b,{onItemSelect:a},u.createElement(n.MenuItem,{store:l,ref:r,hideOnClick:!1,render:d},d.props.children),u.createElement(S.Provider,{value:p},i))})),j=u.forwardRef((function(t,r){let{label:o,children:l,exceptionallySetClassName:c}=t,a=e.objectWithoutProperties(t,m);const{menuStore:s}=u.useContext(f);if(!s)throw new Error("MenuGroup must be wrapped in <Menu/>");return u.createElement(n.MenuGroup,e.objectSpread2(e.objectSpread2({},a),{},{ref:r,store:s,className:c}),o?u.createElement("div",{role:"presentation",className:"reactist_menugroup__label"},o):null,l)}));exports.ContextMenuTrigger=M,exports.Menu=b,exports.MenuButton=h,exports.MenuGroup=j,exports.MenuItem=C,exports.MenuList=x,exports.SubMenu=w;
 //# sourceMappingURL=menu.js.map

package/lib/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 {\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\nconst SubMenuContext = React.createContext<{ isSubMenu: boolean }>({ isSubMenu: false })\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, flip, ...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 { isSubMenu } = React.useContext(SubMenuContext)\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                flip={flip ?? (isSubMenu ? 'left bottom' : undefined)}\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    const subMenuContextValue = React.useMemo(() => ({ isSubMenu: true }), [])\n\n    return (\n        <Menu onItemSelect={handleSubItemSelect}>\n            <AriakitMenuItem store={menuStore} ref={ref} hideOnClick={false} render={buttonElement}>\n                {buttonElement.props.children}\n            </AriakitMenuItem>\n            <SubMenuContext.Provider value={subMenuContextValue}>{list}</SubMenuContext.Provider>\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","createContext","menuStore","handleItemSelect","getAnchorRect","setAnchorRect","SubMenuContext","isSubMenu","Menu","_ref","children","onItemSelect","props","_objectWithoutProperties","objectWithoutProperties","_excluded","anchorRect","useState","useMemo","useMenuStore","_objectSpread","focusLoop","value","createElement","Provider","MenuButton","forwardRef","ref","exceptionallySetClassName","_ref2","_excluded2","useContext","Error","AriakitMenuButton","store","className","classNames","ContextMenuTrigger","render","_ref3","_excluded3","handleContextMenu","useCallback","event","preventDefault","x","clientX","y","clientY","show","isOpen","useEffect","Role","div","onContextMenu","MenuList","modal","flip","_ref4","_excluded4","Portal","preserveTabOrder","AriakitMenu","gutter","shift","undefined","MenuItem","onSelect","hideOnSelect","onClick","_ref5","_excluded5","hide","handleClick","shouldClose","defaultPrevented","AriakitMenuItem","hideOnClick","SubMenu","parentMenuItemSelect","parentMenuHide","handleSubItemSelect","button","list","Children","toArray","buttonElement","subMenuContextValue","MenuGroup","label","_ref6","_excluded6","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\nconst SubMenuContext = React.createContext<{ isSubMenu: boolean }>({ isSubMenu: false })\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, flip, ...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 { isSubMenu } = React.useContext(SubMenuContext)\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                flip={flip ?? (isSubMenu ? 'left bottom' : undefined)}\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    const subMenuContextValue = React.useMemo(() => ({ isSubMenu: true }), [])\n\n    return (\n        <Menu onItemSelect={handleSubItemSelect}>\n            <AriakitMenuItem store={menuStore} ref={ref} hideOnClick={false} render={buttonElement}>\n                {buttonElement.props.children}\n            </AriakitMenuItem>\n            <SubMenuContext.Provider value={subMenuContextValue}>{list}</SubMenuContext.Provider>\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","createContext","menuStore","handleItemSelect","getAnchorRect","setAnchorRect","SubMenuContext","isSubMenu","Menu","_ref","children","onItemSelect","props","_objectWithoutProperties","objectWithoutProperties","_excluded","anchorRect","useState","useMemo","useMenuStore","_objectSpread","focusLoop","value","createElement","Provider","MenuButton","forwardRef","ref","exceptionallySetClassName","_ref2","_excluded2","useContext","Error","AriakitMenuButton","store","className","classNames","ContextMenuTrigger","render","_ref3","_excluded3","handleContextMenu","useCallback","event","preventDefault","x","clientX","y","clientY","show","isOpen","useEffect","Role","div","onContextMenu","MenuList","modal","flip","_ref4","_excluded4","Portal","preserveTabOrder","AriakitMenu","gutter","shift","undefined","MenuItem","onSelect","hideOnSelect","onClick","_ref5","_excluded5","hide","handleClick","shouldClose","defaultPrevented","AriakitMenuItem","hideOnClick","SubMenu","parentMenuItemSelect","parentMenuHide","handleSubItemSelect","button","list","Children","toArray","buttonElement","subMenuContextValue","MenuGroup","label","_ref6","_excluded6","AriakitMenuGroup","role"],"mappings":"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"}

package/lib/switch-field/switch-field.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_rollupPluginBabelHelpers.js"),l=require("react"),a=require("../box/box.js"),t=require("../stack/stack.js"),r=require("../text/text.js"),n=require("../hidden-visually/hidden-visually.js"),i=require("../base-field/base-field.js"),d=require("../utils/common-helpers.js"),u=require("./switch-field.module.css.js");function s(e){if(e&&e.__esModule)return e;var l=Object.create(null);return e&&Object.keys(e).forEach((function(a){if("default"!==a){var t=Object.getOwnPropertyDescriptor(e,a);Object.defineProperty(l,a,t.get?t:{enumerable:!0,get:function(){return e[a]}})}})),l.default=e,l}var c=s(l);const o=["label","message","tone","disabled","hidden","defaultChecked","id","aria-describedby","aria-label","aria-labelledby","onChange"];exports.SwitchField=c.forwardRef((function(l,s){var b,f,h;let{label:p,message:m,tone:y="neutral",disabled:g=!1,hidden:j,defaultChecked:v,id:k,"aria-describedby":x,"aria-label":q,"aria-labelledby":E,onChange:S}=l,B=e.objectWithoutProperties(l,o);const C=d.useId(k),O=d.useId(),P=null!=x?x:m?O:void 0,_=null!=q?q:void 0,w=null!=E?E:void 0,[N,F]=c.useState(!1),[I,K]=c.useState(null!=(b=null!=(f=B.checked)?f:v)&&b),M=null!=(h=B.checked)?h:I;return c.createElement(t.Stack,{space:"small",hidden:j},c.createElement(a.Box,{className:[u.default.container,g?u.default.disabled:null,M?u.default.checked:null,N?u.default.keyFocused:null],as:"label",display:"flex",alignItems:"center"},c.createElement(a.Box,{position:"relative",display:"inlineBlock",overflow:"visible",marginRight:"small",flexShrink:0,className:u.default.toggle},c.createElement(n.HiddenVisually,null,c.createElement("input",e.objectSpread2(e.objectSpread2({},B),{},{id:C,type:"checkbox",disabled:g,"aria-describedby":P,"aria-label":_,"aria-labelledby":w,ref:s,checked:M,onChange:e=>{null==S||S(e),e.defaultPrevented||K(e.currentTarget.checked)},onBlur:e=>{F(!1),null==B||null==B.onBlur||B.onBlur(e)},onKeyUp:e=>{F(!0),null==B||null==B.onKeyUp||B.onKeyUp(e)}}))),c.createElement("span",{className:u.default.handle})),c.createElement(r.Text,{exceptionallySetClassName:u.default.label},p)),m?c.createElement(i.FieldMessage,{id:O,tone:y},m):null)}));
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_rollupPluginBabelHelpers.js"),l=require("react"),a=require("../box/box.js"),t=require("../stack/stack.js"),r=require("../text/text.js"),i=require("../hidden-visually/hidden-visually.js"),n=require("../base-field/base-field.js"),d=require("../utils/common-helpers.js"),s=require("./switch-field.module.css.js");function u(e){if(e&&e.__esModule)return e;var l=Object.create(null);return e&&Object.keys(e).forEach((function(a){if("default"!==a){var t=Object.getOwnPropertyDescriptor(e,a);Object.defineProperty(l,a,t.get?t:{enumerable:!0,get:function(){return e[a]}})}})),l.default=e,l}var c=u(l);const o=["label","message","tone","disabled","hidden","defaultChecked","id","aria-describedby","aria-label","aria-labelledby","onChange"];exports.SwitchField=c.forwardRef((function(l,u){let{label:b,message:f,tone:h="neutral",disabled:p=!1,hidden:m,defaultChecked:y,id:g,"aria-describedby":j,"aria-label":k,"aria-labelledby":v,onChange:x}=l,q=e.objectWithoutProperties(l,o);const E=d.useId(g),S=d.useId(),B=j??(f?S:void 0),C=k??void 0,O=v??void 0,[P,_]=c.useState(!1),[w,N]=c.useState(q.checked??y??!1),F=q.checked??w;return c.createElement(t.Stack,{space:"small",hidden:m},c.createElement(a.Box,{className:[s.default.container,p?s.default.disabled:null,F?s.default.checked:null,P?s.default.keyFocused:null],as:"label",display:"flex",alignItems:"center"},c.createElement(a.Box,{position:"relative",display:"inlineBlock",overflow:"visible",marginRight:"small",flexShrink:0,className:s.default.toggle},c.createElement(i.HiddenVisually,null,c.createElement("input",e.objectSpread2(e.objectSpread2({},q),{},{id:E,type:"checkbox",disabled:p,"aria-describedby":B,"aria-label":C,"aria-labelledby":O,ref:u,checked:F,onChange:e=>{null==x||x(e),e.defaultPrevented||N(e.currentTarget.checked)},onBlur:e=>{_(!1),null==q||null==q.onBlur||q.onBlur(e)},onKeyUp:e=>{_(!0),null==q||null==q.onKeyUp||q.onKeyUp(e)}}))),c.createElement("span",{className:s.default.handle})),c.createElement(r.Text,{exceptionallySetClassName:s.default.label},b)),f?c.createElement(n.FieldMessage,{id:S,tone:h},f):null)}));
 //# sourceMappingURL=switch-field.js.map

package/lib/switch-field/switch-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"switch-field.js","sources":["../../src/switch-field/switch-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Box } from '../box'\nimport { Stack } from '../stack'\nimport { Text } from '../text'\nimport { HiddenVisually } from '../hidden-visually'\nimport { FieldComponentProps, FieldMessage } from '../base-field'\nimport { useId } from '../utils/common-helpers'\nimport styles from './switch-field.module.css'\n\ninterface SwitchFieldProps\n    extends Omit<\n        FieldComponentProps<HTMLInputElement>,\n        | 'type'\n        | 'auxiliaryLabel'\n        | 'maxWidth'\n        | 'aria-describedby'\n        | 'aria-label'\n        | 'aria-labelledby'\n    > {\n    /**\n     * Identifies the element (or elements) that describes the switch for assistive technologies.\n     */\n    'aria-describedby'?: string\n\n    /**\n     * Defines a string value that labels the current switch for assistive technologies.\n     */\n    'aria-label'?: string\n\n    /**\n     * Identifies the element (or elements) that labels the current switch for assistive technologies.\n     */\n    'aria-labelledby'?: string\n}\n\nconst SwitchField = React.forwardRef<HTMLInputElement, SwitchFieldProps>(function SwitchField(\n    {\n        label,\n        message,\n        tone = 'neutral',\n        disabled = false,\n        hidden,\n        defaultChecked,\n        id: originalId,\n        'aria-describedby': originalAriaDescribedBy,\n        'aria-label': originalAriaLabel,\n        'aria-labelledby': originalAriaLabelledby,\n        onChange,\n        ...props\n    },\n    ref,\n) {\n    const id = useId(originalId)\n    const messageId = useId()\n\n    const ariaDescribedBy = originalAriaDescribedBy ?? (message ? messageId : undefined)\n    const ariaLabel = originalAriaLabel ?? undefined\n    const ariaLabelledBy = originalAriaLabelledby ?? undefined\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    return (\n        <Stack space=\"small\" hidden={hidden}>\n            <Box\n                className={[\n                    styles.container,\n                    disabled ? styles.disabled : null,\n                    isChecked ? styles.checked : null,\n                    keyFocused ? styles.keyFocused : null,\n                ]}\n                as=\"label\"\n                display=\"flex\"\n                alignItems=\"center\"\n            >\n                <Box\n                    position=\"relative\"\n                    display=\"inlineBlock\"\n                    overflow=\"visible\"\n                    marginRight=\"small\"\n                    flexShrink={0}\n                    className={styles.toggle}\n                >\n                    <HiddenVisually>\n                        <input\n                            {...props}\n                            id={id}\n                            type=\"checkbox\"\n                            disabled={disabled}\n                            aria-describedby={ariaDescribedBy}\n                            aria-label={ariaLabel}\n                            aria-labelledby={ariaLabelledBy}\n                            ref={ref}\n                            checked={isChecked}\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                    </HiddenVisually>\n                    <span className={styles.handle} />\n                </Box>\n                <Text exceptionallySetClassName={styles.label}>{label}</Text>\n            </Box>\n            {message ? (\n                <FieldMessage id={messageId} tone={tone}>\n                    {message}\n                </FieldMessage>\n            ) : null}\n        </Stack>\n    )\n})\n\nexport { SwitchField }\nexport type { SwitchFieldProps }\n"],"names":["React","forwardRef","ref","_ref2","_props$checked","_props$checked2","label","message","tone","disabled","hidden","defaultChecked","id","originalId","aria-describedby","originalAriaDescribedBy","aria-label","originalAriaLabel","aria-labelledby","originalAriaLabelledby","onChange","_ref","props","_objectWithoutProperties","objectWithoutProperties","_excluded","useId","messageId","ariaDescribedBy","undefined","ariaLabel","ariaLabelledBy","keyFocused","setKeyFocused","useState","checkedState","setChecked","checked","isChecked","createElement","Stack","space","Box","className","styles","container","as","display","alignItems","position","overflow","marginRight","flexShrink","toggle","HiddenVisually","type","event","defaultPrevented","currentTarget","onBlur","onKeyUp","handle","Text","exceptionallySetClassName","FieldMessage"],"mappings":"+0BAmCoBA,EAAMC,YAA+C,SAerEC,EAAAA,GAAG,IAAAC,EAAAC,EAAAC,EAAA,IAdHC,MACIA,EADJC,QAEIA,EAFJC,KAGIA,EAAO,UAHXC,SAIIA,GAAW,EAJfC,OAKIA,EALJC,eAMIA,EACAC,GAAIC,EACJC,mBAAoBC,EACpBC,aAAcC,EACdC,kBAAmBC,EAVvBC,SAWIA,GAGDC,EAFIC,EAEJC,EAAAC,wBAAAH,EAAAI,GAEH,MAAMb,EAAKc,QAAMb,GACXc,EAAYD,EAAAA,QAEZE,EAAkBb,MAAAA,EAAAA,EAA4BR,EAAUoB,OAAYE,EACpEC,EAAYb,MAAAA,EAAAA,OAAqBY,EACjCE,EAAiBZ,MAAAA,EAAAA,OAA0BU,GAE1CG,EAAYC,GAAiBjC,EAAMkC,UAAS,IAC5CC,EAAcC,GAAcpC,EAAMkC,SAAN,OAAeZ,EAAf,OAAeA,EAAAA,EAAMe,SAArBjC,EAAgCO,IAAhCR,GAC7BmC,SAAYhB,EAAAA,EAAMe,WAAWF,EAEnC,OACInC,EAACuC,cAAAC,QAAM,CAAAC,MAAM,QAAQ/B,OAAQA,GACzBV,EAACuC,cAAAG,MACG,CAAAC,UAAW,CACPC,EAAAA,QAAOC,UACPpC,EAAWmC,EAAAA,QAAOnC,SAAW,KAC7B6B,EAAYM,EAAM,QAACP,QAAU,KAC7BL,EAAaY,EAAM,QAACZ,WAAa,MAErCc,GAAG,QACHC,QAAQ,OACRC,WAAW,UAEXhD,EAACuC,cAAAG,MACG,CAAAO,SAAS,WACTF,QAAQ,cACRG,SAAS,UACTC,YAAY,QACZC,WAAY,EACZT,UAAWC,EAAM,QAACS,QAElBrD,EAAAuC,cAACe,iBAAc,KACXtD,EAAAuC,cAAA,2CACQjB,GADR,GAAA,CAEIV,GAAIA,EACJ2C,KAAK,WACL9C,SAAUA,qBACQmB,EAAeZ,aACrBc,EAASZ,kBACJa,EACjB7B,IAAKA,EACLmC,QAASC,EACTlB,SAAWoC,IACP,MAAApC,GAAAA,EAAWoC,GACNA,EAAMC,kBACPrB,EAAWoB,EAAME,cAAcrB,UAGvCsB,OAASH,IACLvB,GAAc,GACT,MAALX,SAAAA,EAAOqC,QAAPrC,EAAOqC,OAASH,IAEpBI,QAAUJ,IACNvB,GAAc,GACT,MAALX,SAAAA,EAAOsC,SAAPtC,EAAOsC,QAAUJ,QAI7BxD,EAAAuC,cAAA,OAAA,CAAMI,UAAWC,EAAM,QAACiB,UAE5B7D,EAACuC,cAAAuB,OAAK,CAAAC,0BAA2BnB,EAAM,QAACtC,OAAQA,IAEnDC,EACGP,EAAAuC,cAACyB,EAAAA,aAAa,CAAApD,GAAIe,EAAWnB,KAAMA,GAC9BD,GAEL"}
+{"version":3,"file":"switch-field.js","sources":["../../src/switch-field/switch-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Box } from '../box'\nimport { Stack } from '../stack'\nimport { Text } from '../text'\nimport { HiddenVisually } from '../hidden-visually'\nimport { FieldComponentProps, FieldMessage } from '../base-field'\nimport { useId } from '../utils/common-helpers'\nimport styles from './switch-field.module.css'\n\ninterface SwitchFieldProps\n    extends Omit<\n        FieldComponentProps<HTMLInputElement>,\n        | 'type'\n        | 'auxiliaryLabel'\n        | 'maxWidth'\n        | 'aria-describedby'\n        | 'aria-label'\n        | 'aria-labelledby'\n    > {\n    /**\n     * Identifies the element (or elements) that describes the switch for assistive technologies.\n     */\n    'aria-describedby'?: string\n\n    /**\n     * Defines a string value that labels the current switch for assistive technologies.\n     */\n    'aria-label'?: string\n\n    /**\n     * Identifies the element (or elements) that labels the current switch for assistive technologies.\n     */\n    'aria-labelledby'?: string\n}\n\nconst SwitchField = React.forwardRef<HTMLInputElement, SwitchFieldProps>(function SwitchField(\n    {\n        label,\n        message,\n        tone = 'neutral',\n        disabled = false,\n        hidden,\n        defaultChecked,\n        id: originalId,\n        'aria-describedby': originalAriaDescribedBy,\n        'aria-label': originalAriaLabel,\n        'aria-labelledby': originalAriaLabelledby,\n        onChange,\n        ...props\n    },\n    ref,\n) {\n    const id = useId(originalId)\n    const messageId = useId()\n\n    const ariaDescribedBy = originalAriaDescribedBy ?? (message ? messageId : undefined)\n    const ariaLabel = originalAriaLabel ?? undefined\n    const ariaLabelledBy = originalAriaLabelledby ?? undefined\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    return (\n        <Stack space=\"small\" hidden={hidden}>\n            <Box\n                className={[\n                    styles.container,\n                    disabled ? styles.disabled : null,\n                    isChecked ? styles.checked : null,\n                    keyFocused ? styles.keyFocused : null,\n                ]}\n                as=\"label\"\n                display=\"flex\"\n                alignItems=\"center\"\n            >\n                <Box\n                    position=\"relative\"\n                    display=\"inlineBlock\"\n                    overflow=\"visible\"\n                    marginRight=\"small\"\n                    flexShrink={0}\n                    className={styles.toggle}\n                >\n                    <HiddenVisually>\n                        <input\n                            {...props}\n                            id={id}\n                            type=\"checkbox\"\n                            disabled={disabled}\n                            aria-describedby={ariaDescribedBy}\n                            aria-label={ariaLabel}\n                            aria-labelledby={ariaLabelledBy}\n                            ref={ref}\n                            checked={isChecked}\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                    </HiddenVisually>\n                    <span className={styles.handle} />\n                </Box>\n                <Text exceptionallySetClassName={styles.label}>{label}</Text>\n            </Box>\n            {message ? (\n                <FieldMessage id={messageId} tone={tone}>\n                    {message}\n                </FieldMessage>\n            ) : null}\n        </Stack>\n    )\n})\n\nexport { SwitchField }\nexport type { SwitchFieldProps }\n"],"names":["React","forwardRef","ref","label","message","tone","disabled","hidden","defaultChecked","id","originalId","aria-describedby","originalAriaDescribedBy","aria-label","originalAriaLabel","aria-labelledby","originalAriaLabelledby","onChange","_ref","props","_objectWithoutProperties","objectWithoutProperties","_excluded","useId","messageId","ariaDescribedBy","undefined","ariaLabel","ariaLabelledBy","keyFocused","setKeyFocused","useState","checkedState","setChecked","checked","isChecked","createElement","Stack","space","Box","className","styles","container","as","display","alignItems","position","overflow","marginRight","flexShrink","toggle","HiddenVisually","type","event","defaultPrevented","currentTarget","onBlur","onKeyUp","handle","Text","exceptionallySetClassName","FieldMessage"],"mappings":"+0BAmCoBA,EAAMC,YAA+C,SAerEC,EAAAA,GAAG,IAdHC,MACIA,EADJC,QAEIA,EAFJC,KAGIA,EAAO,UAHXC,SAIIA,GAAW,EAJfC,OAKIA,EALJC,eAMIA,EACAC,GAAIC,EACJC,mBAAoBC,EACpBC,aAAcC,EACdC,kBAAmBC,EAVvBC,SAWIA,GAGDC,EAFIC,EAEJC,EAAAC,wBAAAH,EAAAI,GAEH,MAAMb,EAAKc,QAAMb,GACXc,EAAYD,EAAAA,QAEZE,EAAkBb,IAA4BR,EAAUoB,OAAYE,GACpEC,EAAYb,QAAqBY,EACjCE,EAAiBZ,QAA0BU,GAE1CG,EAAYC,GAAiB9B,EAAM+B,UAAS,IAC5CC,EAAcC,GAAcjC,EAAM+B,SAASZ,EAAMe,SAAW1B,IAAkB,GAC/E2B,EAAYhB,EAAMe,SAAWF,EAEnC,OACIhC,EAACoC,cAAAC,QAAM,CAAAC,MAAM,QAAQ/B,OAAQA,GACzBP,EAACoC,cAAAG,MACG,CAAAC,UAAW,CACPC,EAAAA,QAAOC,UACPpC,EAAWmC,EAAAA,QAAOnC,SAAW,KAC7B6B,EAAYM,EAAM,QAACP,QAAU,KAC7BL,EAAaY,EAAM,QAACZ,WAAa,MAErCc,GAAG,QACHC,QAAQ,OACRC,WAAW,UAEX7C,EAACoC,cAAAG,MACG,CAAAO,SAAS,WACTF,QAAQ,cACRG,SAAS,UACTC,YAAY,QACZC,WAAY,EACZT,UAAWC,EAAM,QAACS,QAElBlD,EAAAoC,cAACe,iBAAc,KACXnD,EAAAoC,cAAA,2CACQjB,GADR,GAAA,CAEIV,GAAIA,EACJ2C,KAAK,WACL9C,SAAUA,qBACQmB,EAAeZ,aACrBc,EAASZ,kBACJa,EACjB1B,IAAKA,EACLgC,QAASC,EACTlB,SAAWoC,IACP,MAAApC,GAAAA,EAAWoC,GACNA,EAAMC,kBACPrB,EAAWoB,EAAME,cAAcrB,UAGvCsB,OAASH,IACLvB,GAAc,GACT,MAALX,SAAAA,EAAOqC,QAAPrC,EAAOqC,OAASH,IAEpBI,QAAUJ,IACNvB,GAAc,GACT,MAALX,SAAAA,EAAOsC,SAAPtC,EAAOsC,QAAUJ,QAI7BrD,EAAAoC,cAAA,OAAA,CAAMI,UAAWC,EAAM,QAACiB,UAE5B1D,EAACoC,cAAAuB,OAAK,CAAAC,0BAA2BnB,EAAM,QAACtC,OAAQA,IAEnDC,EACGJ,EAAAoC,cAACyB,EAAAA,aAAa,CAAApD,GAAIe,EAAWnB,KAAMA,GAC9BD,GAEL"}

package/lib/tabs/tabs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_rollupPluginBabelHelpers.js"),t=require("react"),r=require("classnames"),n=require("@ariakit/react"),l=require("../box/box.js"),a=require("../inline/inline.js"),u=require("./tabs.module.css.js");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function s(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,t}var o=s(t),i=c(r);const d=["children","space","width","align","exceptionallySetClassName"],f=["children","id","renderMode"],b=o.createContext(null),m=o.forwardRef((function({children:e,id:t,disabled:r,exceptionallySetClassName:l,render:a,onClick:c},s){const d=o.useContext(b);if(!d)return null;const{variant:f,tabStore:m}=d,p=i.default(l,u.default.tab,u.default["tab-"+f]);return o.createElement(n.Tab,{id:t,ref:s,disabled:r,store:m,render:a,className:p,onClick:c},e)})),p=o.forwardRef((function(t,r){let{children:l,id:a,renderMode:u="always"}=t,c=e.objectWithoutProperties(t,f);const s=o.useContext(b),[i,d]=o.useState(!1),m=(null==s?void 0:s.tabStore.useState("selectedId"))===a;if(o.useEffect((function(){!i&&m&&d(!0)}),[i,m]),!s)return null;const{tabStore:p}=s;return"always"===u||"active"===u&&m||"lazy"===u&&(m||i)?o.createElement(n.TabPanel,e.objectSpread2(e.objectSpread2({},c),{},{tabId:a,store:p,ref:r}),l):null}));exports.Tab=m,exports.TabAwareSlot=function({children:e}){const t=o.useContext(b),r=null==t?void 0:t.tabStore.useState("selectedId");return t?e({selectedId:r}):null},exports.TabList=function(t){let{children:r,space:c,width:s="maxContent",align:f="start",exceptionallySetClassName:m}=t,p=e.objectWithoutProperties(t,d);const S=o.useRef(null),x=o.useRef(0),v=o.useContext(b),[h,y]=o.useState(null),[j,C]=o.useState({}),E=null==v?void 0:v.tabStore.useState("selectedId"),I=o.useCallback((function(){if(!E||!S.current)return;const e=S.current.querySelectorAll('[role="tab"]'),t=Array.from(e).find(e=>e.getAttribute("id")===E);t&&(y(t),C({left:t.offsetLeft+"px",width:t.offsetWidth+"px"}))}),[E]);if(o.useEffect((function(){I()}),[E,I]),o.useEffect((function(){let e=null;const t=new ResizeObserver(([t])=>{const r=null==t?void 0:t.contentRect.width;r&&x.current!==r&&(x.current=r,null!==e&&cancelAnimationFrame(e),e=requestAnimationFrame(()=>{I(),e=null}))});return S.current&&t.observe(S.current),function(){e&&cancelAnimationFrame(e),t.disconnect()}}),[I]),!v)return null;const{tabStore:w,variant:T}=v;return o.createElement(l.Box,{display:"flex",justifyContent:"full"===s?"center":{start:"flexStart",end:"flexEnd",center:"center"}[f]},o.createElement(n.TabList,e.objectSpread2({store:w,render:o.createElement(l.Box,{position:"relative",width:s,className:m}),ref:S},p),o.createElement(l.Box,{className:[u.default.track,u.default["track-"+T]]}),h?o.createElement(l.Box,{className:[u.default.selected,u.default["selected-"+T]],style:j}):null,o.createElement(a.Inline,{space:c,exceptionallySetClassName:i.default("full"===s?u.default.fullTabList:null)},r)))},exports.TabPanel=p,exports.Tabs=function({children:e,selectedId:t,defaultSelectedId:r,variant:l="neutral",onSelectedIdChange:a}){const u=n.useTabStore({defaultSelectedId:r,selectedId:t,setSelectedId:a}),c=u.useState("selectedId"),s=o.useMemo(()=>{var e;return{tabStore:u,variant:l,selectedId:null!=(e=null!=t?t:c)?e:null}},[l,u,t,c]);return o.createElement(b.Provider,{value:s},e)};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_rollupPluginBabelHelpers.js"),t=require("react"),r=require("classnames"),n=require("@ariakit/react"),l=require("../box/box.js"),a=require("../inline/inline.js"),c=require("./tabs.module.css.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function s(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,t}var o=s(t),i=u(r);const d=["children","space","width","align","exceptionallySetClassName"],f=["children","id","renderMode"],b=o.createContext(null),m=o.forwardRef((function({children:e,id:t,disabled:r,exceptionallySetClassName:l,render:a,onClick:u},s){const d=o.useContext(b);if(!d)return null;const{variant:f,tabStore:m}=d,p=i.default(l,c.default.tab,c.default["tab-"+f]);return o.createElement(n.Tab,{id:t,ref:s,disabled:r,store:m,render:a,className:p,onClick:u},e)})),p=o.forwardRef((function(t,r){let{children:l,id:a,renderMode:c="always"}=t,u=e.objectWithoutProperties(t,f);const s=o.useContext(b),[i,d]=o.useState(!1),m=(null==s?void 0:s.tabStore.useState("selectedId"))===a;if(o.useEffect((function(){!i&&m&&d(!0)}),[i,m]),!s)return null;const{tabStore:p}=s;return"always"===c||"active"===c&&m||"lazy"===c&&(m||i)?o.createElement(n.TabPanel,e.objectSpread2(e.objectSpread2({},u),{},{tabId:a,store:p,ref:r}),l):null}));exports.Tab=m,exports.TabAwareSlot=function({children:e}){const t=o.useContext(b),r=null==t?void 0:t.tabStore.useState("selectedId");return t?e({selectedId:r}):null},exports.TabList=function(t){let{children:r,space:u,width:s="maxContent",align:f="start",exceptionallySetClassName:m}=t,p=e.objectWithoutProperties(t,d);const S=o.useRef(null),x=o.useRef(0),v=o.useContext(b),[h,y]=o.useState(null),[j,C]=o.useState({}),E=null==v?void 0:v.tabStore.useState("selectedId"),I=o.useCallback((function(){if(!E||!S.current)return;const e=S.current.querySelectorAll('[role="tab"]'),t=Array.from(e).find(e=>e.getAttribute("id")===E);t&&(y(t),C({left:t.offsetLeft+"px",width:t.offsetWidth+"px"}))}),[E]);if(o.useEffect((function(){I()}),[E,I]),o.useEffect((function(){let e=null;const t=new ResizeObserver(([t])=>{const r=null==t?void 0:t.contentRect.width;r&&x.current!==r&&(x.current=r,null!==e&&cancelAnimationFrame(e),e=requestAnimationFrame(()=>{I(),e=null}))});return S.current&&t.observe(S.current),function(){e&&cancelAnimationFrame(e),t.disconnect()}}),[I]),!v)return null;const{tabStore:w,variant:T}=v;return o.createElement(l.Box,{display:"flex",justifyContent:"full"===s?"center":{start:"flexStart",end:"flexEnd",center:"center"}[f]},o.createElement(n.TabList,e.objectSpread2({store:w,render:o.createElement(l.Box,{position:"relative",width:s,className:m}),ref:S},p),o.createElement(l.Box,{className:[c.default.track,c.default["track-"+T]]}),h?o.createElement(l.Box,{className:[c.default.selected,c.default["selected-"+T]],style:j}):null,o.createElement(a.Inline,{space:u,exceptionallySetClassName:i.default("full"===s?c.default.fullTabList:null)},r)))},exports.TabPanel=p,exports.Tabs=function({children:e,selectedId:t,defaultSelectedId:r,variant:l="neutral",onSelectedIdChange:a}){const c=n.useTabStore({defaultSelectedId:r,selectedId:t,setSelectedId:a}),u=c.useState("selectedId"),s=o.useMemo(()=>({tabStore:c,variant:l,selectedId:t??u??null}),[l,c,t,u]);return o.createElement(b.Provider,{value:s},e)};
 //# sourceMappingURL=tabs.js.map

package/lib/tabs/tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.js","sources":["../../src/tabs/tabs.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport {\n    useTabStore,\n    Tab as BaseTab,\n    TabProps as BaseTabProps,\n    TabList as BaseTabList,\n    TabPanel as BaseTabPanel,\n    TabPanelProps as BaseTabPanelProps,\n    TabStore,\n} from '@ariakit/react'\nimport { Box, BoxJustifyContent } from '../box'\nimport { Inline } from '../inline'\n\nimport type { ObfuscatedClassName, Space } from '../utils/common-types'\n\nimport styles from './tabs.module.css'\n\ntype TabsContextValue = Required<Pick<TabsProps, 'variant'>> & {\n    tabStore: TabStore\n}\n\nconst TabsContext = React.createContext<TabsContextValue | null>(null)\n\ninterface TabsProps {\n    /**\n     * The `<Tabs>` component must be composed from a `<TabList>` and corresponding `<TabPanel>`\n     * components\n     */\n    children: React.ReactNode\n\n    /**\n     * Determines the look and feel of the tabs\n     */\n    variant?: 'themed' | 'neutral'\n\n    /**\n     * The id of the selected tab. Assigning a value makes this a controlled component\n     */\n    selectedId?: string | null\n\n    /**\n     * The tab to initially select. This can be used if the component should not\n     * be a controlled component but needs to have a tab selected\n     */\n    defaultSelectedId?: string | null\n\n    /**\n     * Called with the tab id when a tab is selected\n     */\n    onSelectedIdChange?: (selectedId: string | null | undefined) => void\n}\n\n/**\n * Used to group components that compose a set of tabs. There can only be one active tab within the same `<Tabs>` group.\n */\nfunction Tabs({\n    children,\n    selectedId,\n    defaultSelectedId,\n    variant = 'neutral',\n    onSelectedIdChange,\n}: TabsProps): React.ReactElement {\n    const tabStore = useTabStore({\n        defaultSelectedId,\n        selectedId,\n        setSelectedId: onSelectedIdChange,\n    })\n    const actualSelectedId = tabStore.useState('selectedId')\n\n    const memoizedTabState = React.useMemo(\n        () => ({ tabStore, variant, selectedId: selectedId ?? actualSelectedId ?? null }),\n        [variant, tabStore, selectedId, actualSelectedId],\n    )\n    return <TabsContext.Provider value={memoizedTabState}>{children}</TabsContext.Provider>\n}\n\ninterface TabProps\n    extends ObfuscatedClassName,\n        Omit<BaseTabProps, 'store' | 'className' | 'children' | 'id'> {\n    /**\n     * The content to render inside of the tab button\n     */\n    children: React.ReactNode\n\n    /**\n     * The tab's identifier. This must match its corresponding `<TabPanel>`'s id\n     */\n    id: string\n\n    /**\n     * Defines wether or not the tab is disabled.\n     */\n    disabled?: boolean\n}\n\n/**\n * Represents the individual tab elements within the group. Each `<Tab>` must have a corresponding `<TabPanel>` component.\n */\nconst Tab = React.forwardRef<HTMLButtonElement, TabProps>(function Tab(\n    { children, id, disabled, exceptionallySetClassName, render, onClick },\n    ref,\n): React.ReactElement | null {\n    const tabContextValue = React.useContext(TabsContext)\n    if (!tabContextValue) return null\n\n    const { variant, tabStore } = tabContextValue\n    const className = classNames(exceptionallySetClassName, styles.tab, styles[`tab-${variant}`])\n\n    return (\n        <BaseTab\n            id={id}\n            ref={ref}\n            disabled={disabled}\n            store={tabStore}\n            render={render}\n            className={className}\n            onClick={onClick}\n        >\n            {children}\n        </BaseTab>\n    )\n})\n\ntype TabListProps = (\n    | {\n          /** Labels the tab list for assistive technologies. This must be provided if `aria-labelledby` is omitted. */\n          'aria-label': string\n      }\n    | {\n          /**\n           * One or more element IDs used to label the tab list for assistive technologies. Required if\n           * `aria-label` is omitted.\n           */\n          'aria-labelledby': string\n      }\n    | {\n          /**\n           * For cases where multiple instances of the tab list exists, the duplicates may be marked as aria-hidden\n           */\n          'aria-hidden': boolean\n      }\n) & {\n    /**\n     * A list of `<Tab>` elements\n     */\n    children: React.ReactNode\n\n    /**\n     * Controls the spacing between tabs\n     */\n    space?: Space\n\n    /**\n     * The width of the tab list.\n     *\n     * - `'maxContent'`: Each tab will be as wide as its content.\n     * - `'full'`: Each tab will be as wide as the tab list.\n     *\n     * @default 'maxContent'\n     */\n    width?: 'maxContent' | 'full'\n\n    /**\n     * How to align the tabs within the tab list.\n     *\n     * @default 'start'\n     */\n    align?: 'start' | 'center' | 'end'\n} & ObfuscatedClassName\n\n/**\n * A component used to group `<Tab>` elements together.\n */\nfunction TabList({\n    children,\n    space,\n    width = 'maxContent',\n    align = 'start',\n    exceptionallySetClassName,\n    ...props\n}: TabListProps): React.ReactElement | null {\n    const tabListRef = React.useRef<HTMLDivElement | null>(null)\n    const tabListPrevWidthRef = React.useRef(0)\n\n    const tabContextValue = React.useContext(TabsContext)\n\n    const [selectedTabElement, setSelectedTabElement] = React.useState<HTMLElement | null>(null)\n    const [selectedTabStyle, setSelectedTabStyle] = React.useState<React.CSSProperties>({})\n\n    const selectedId = tabContextValue?.tabStore.useState('selectedId')\n\n    const updateSelectedTabPosition = React.useCallback(\n        function updateSelectedTabPositionCallback() {\n            if (!selectedId || !tabListRef.current) {\n                return\n            }\n\n            const tabs = tabListRef.current.querySelectorAll('[role=\"tab\"]')\n\n            const selectedTab = Array.from(tabs).find(\n                (tab) => tab.getAttribute('id') === selectedId,\n            ) as HTMLElement | undefined\n\n            if (selectedTab) {\n                setSelectedTabElement(selectedTab)\n                setSelectedTabStyle({\n                    left: `${selectedTab.offsetLeft}px`,\n                    width: `${selectedTab.offsetWidth}px`,\n                })\n            }\n        },\n        [selectedId],\n    )\n\n    React.useEffect(\n        function updateSelectedTabPositionOnTabChange() {\n            updateSelectedTabPosition()\n        },\n        // `selectedId` is a dependency to ensure the effect runs when the selected tab changes\n        [selectedId, updateSelectedTabPosition],\n    )\n\n    React.useEffect(\n        function observeTabListWidthChange() {\n            let animationFrameId: number | null = null\n\n            const tabListObserver = new ResizeObserver(([entry]) => {\n                const width = entry?.contentRect.width\n\n                if (width && tabListPrevWidthRef.current !== width) {\n                    tabListPrevWidthRef.current = width\n\n                    if (animationFrameId !== null) {\n                        cancelAnimationFrame(animationFrameId)\n                    }\n\n                    animationFrameId = requestAnimationFrame(() => {\n                        updateSelectedTabPosition()\n                        animationFrameId = null\n                    })\n                }\n            })\n\n            if (tabListRef.current) {\n                tabListObserver.observe(tabListRef.current)\n            }\n\n            return function cleanupResizeObserver() {\n                if (animationFrameId) {\n                    cancelAnimationFrame(animationFrameId)\n                }\n\n                tabListObserver.disconnect()\n            }\n        },\n        [updateSelectedTabPosition],\n    )\n\n    if (!tabContextValue) {\n        return null\n    }\n\n    const { tabStore, variant } = tabContextValue\n\n    const justifyContentAlignMap: Record<typeof align, BoxJustifyContent> = {\n        start: 'flexStart',\n        end: 'flexEnd',\n        center: 'center',\n    }\n\n    return (\n        // This extra <Box> not only provides alignment for the tabs, but also prevents <Inline>'s\n        // negative margins from collapsing when used in a flex container which will render the\n        // track with the wrong height\n        <Box\n            display=\"flex\"\n            justifyContent={width === 'full' ? 'center' : justifyContentAlignMap[align]}\n        >\n            <BaseTabList\n                store={tabStore}\n                render={\n                    <Box position=\"relative\" width={width} className={exceptionallySetClassName} />\n                }\n                ref={tabListRef}\n                {...props}\n            >\n                <Box className={[styles.track, styles[`track-${variant}`]]} />\n                {selectedTabElement ? (\n                    <Box\n                        className={[styles.selected, styles[`selected-${variant}`]]}\n                        style={selectedTabStyle}\n                    />\n                ) : null}\n                <Inline\n                    space={space}\n                    exceptionallySetClassName={classNames(\n                        width === 'full' ? styles.fullTabList : null,\n                    )}\n                >\n                    {children}\n                </Inline>\n            </BaseTabList>\n        </Box>\n    )\n}\n\ninterface TabPanelProps\n    extends React.HTMLAttributes<HTMLDivElement>,\n        Pick<BaseTabPanelProps, 'render'> {\n    /** The content to be rendered inside the tab */\n    children?: React.ReactNode\n\n    /** The tabPanel's identifier. This must match its corresponding `<Tab>`'s id */\n    id: string\n\n    /**\n     * By default, the tab panel's content is always rendered even when they are not active. This\n     * behaviour can be changed to 'active', which renders only when the tab is active, and 'lazy',\n     * meaning while inactive tab panels will not be rendered initially, they will remain mounted\n     * once they are active until the entire Tabs tree is unmounted.\n     */\n    renderMode?: 'always' | 'active' | 'lazy'\n}\n\n/**\n * Used to define the content to be rendered when a tab is active. Each `<TabPanel>` must have a\n * corresponding `<Tab>` component.\n */\nconst TabPanel = React.forwardRef<HTMLDivElement, TabPanelProps>(function TabPanel(\n    { children, id, renderMode = 'always', ...props },\n    ref,\n): React.ReactElement | null {\n    const tabContextValue = React.useContext(TabsContext)\n    const [tabRendered, setTabRendered] = React.useState(false)\n    const selectedId = tabContextValue?.tabStore.useState('selectedId')\n    const tabIsActive = selectedId === id\n\n    React.useEffect(\n        function trackTabRenderedState() {\n            if (!tabRendered && tabIsActive) {\n                setTabRendered(true)\n            }\n        },\n        [tabRendered, tabIsActive],\n    )\n\n    if (!tabContextValue) {\n        return null\n    }\n\n    const { tabStore } = tabContextValue\n    const shouldRender =\n        renderMode === 'always' ||\n        (renderMode === 'active' && tabIsActive) ||\n        (renderMode === 'lazy' && (tabIsActive || tabRendered))\n\n    return shouldRender ? (\n        <BaseTabPanel {...props} tabId={id} store={tabStore} ref={ref}>\n            {children}\n        </BaseTabPanel>\n    ) : null\n})\n\ntype TabAwareSlotProps = {\n    /**\n     * Render prop used to provide the content to be rendered inside the slot. The render prop will\n     * be called with the current `selectedId`\n     */\n    children: (provided: { selectedId?: string | null }) => React.ReactElement | null\n}\n\n/**\n * Allows content to be rendered based on the current tab being selected while outside of the\n * TabPanel component. Can be placed freely within the main `<Tabs>` component.\n */\nfunction TabAwareSlot({ children }: TabAwareSlotProps): React.ReactElement | null {\n    const tabContextValue = React.useContext(TabsContext)\n    const selectedId = tabContextValue?.tabStore.useState('selectedId')\n    return tabContextValue ? children({ selectedId }) : null\n}\n\nexport { Tab, Tabs, TabList, TabPanel, TabAwareSlot }\n"],"names":["TabsContext","React","createContext","Tab","forwardRef","children","id","disabled","exceptionallySetClassName","render","onClick","ref","tabContextValue","useContext","variant","tabStore","className","classNames","styles","tab","createElement","BaseTab","store","TabPanel","renderMode","_ref3","props","_objectWithoutProperties","objectWithoutProperties","_excluded2","tabRendered","setTabRendered","useState","tabIsActive","useEffect","BaseTabPanel","tabId","selectedId","_ref2","space","width","align","_excluded","tabListRef","useRef","tabListPrevWidthRef","selectedTabElement","setSelectedTabElement","selectedTabStyle","setSelectedTabStyle","updateSelectedTabPosition","useCallback","current","tabs","querySelectorAll","selectedTab","Array","from","find","getAttribute","left","offsetLeft","offsetWidth","animationFrameId","tabListObserver","ResizeObserver","entry","contentRect","cancelAnimationFrame","requestAnimationFrame","observe","disconnect","Box","display","justifyContent","start","end","center","BaseTabList","TabList","_objectSpread","position","track","selected","style","Inline","fullTabList","defaultSelectedId","onSelectedIdChange","useTabStore","setSelectedId","actualSelectedId","memoizedTabState","useMemo","_ref","Provider","value"],"mappings":"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"}
+{"version":3,"file":"tabs.js","sources":["../../src/tabs/tabs.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport {\n    useTabStore,\n    Tab as BaseTab,\n    TabProps as BaseTabProps,\n    TabList as BaseTabList,\n    TabPanel as BaseTabPanel,\n    TabPanelProps as BaseTabPanelProps,\n    TabStore,\n} from '@ariakit/react'\nimport { Box, BoxJustifyContent } from '../box'\nimport { Inline } from '../inline'\n\nimport type { ObfuscatedClassName, Space } from '../utils/common-types'\n\nimport styles from './tabs.module.css'\n\ntype TabsContextValue = Required<Pick<TabsProps, 'variant'>> & {\n    tabStore: TabStore\n}\n\nconst TabsContext = React.createContext<TabsContextValue | null>(null)\n\ninterface TabsProps {\n    /**\n     * The `<Tabs>` component must be composed from a `<TabList>` and corresponding `<TabPanel>`\n     * components\n     */\n    children: React.ReactNode\n\n    /**\n     * Determines the look and feel of the tabs\n     */\n    variant?: 'themed' | 'neutral'\n\n    /**\n     * The id of the selected tab. Assigning a value makes this a controlled component\n     */\n    selectedId?: string | null\n\n    /**\n     * The tab to initially select. This can be used if the component should not\n     * be a controlled component but needs to have a tab selected\n     */\n    defaultSelectedId?: string | null\n\n    /**\n     * Called with the tab id when a tab is selected\n     */\n    onSelectedIdChange?: (selectedId: string | null | undefined) => void\n}\n\n/**\n * Used to group components that compose a set of tabs. There can only be one active tab within the same `<Tabs>` group.\n */\nfunction Tabs({\n    children,\n    selectedId,\n    defaultSelectedId,\n    variant = 'neutral',\n    onSelectedIdChange,\n}: TabsProps): React.ReactElement {\n    const tabStore = useTabStore({\n        defaultSelectedId,\n        selectedId,\n        setSelectedId: onSelectedIdChange,\n    })\n    const actualSelectedId = tabStore.useState('selectedId')\n\n    const memoizedTabState = React.useMemo(\n        () => ({ tabStore, variant, selectedId: selectedId ?? actualSelectedId ?? null }),\n        [variant, tabStore, selectedId, actualSelectedId],\n    )\n    return <TabsContext.Provider value={memoizedTabState}>{children}</TabsContext.Provider>\n}\n\ninterface TabProps\n    extends ObfuscatedClassName,\n        Omit<BaseTabProps, 'store' | 'className' | 'children' | 'id'> {\n    /**\n     * The content to render inside of the tab button\n     */\n    children: React.ReactNode\n\n    /**\n     * The tab's identifier. This must match its corresponding `<TabPanel>`'s id\n     */\n    id: string\n\n    /**\n     * Defines wether or not the tab is disabled.\n     */\n    disabled?: boolean\n}\n\n/**\n * Represents the individual tab elements within the group. Each `<Tab>` must have a corresponding `<TabPanel>` component.\n */\nconst Tab = React.forwardRef<HTMLButtonElement, TabProps>(function Tab(\n    { children, id, disabled, exceptionallySetClassName, render, onClick },\n    ref,\n): React.ReactElement | null {\n    const tabContextValue = React.useContext(TabsContext)\n    if (!tabContextValue) return null\n\n    const { variant, tabStore } = tabContextValue\n    const className = classNames(exceptionallySetClassName, styles.tab, styles[`tab-${variant}`])\n\n    return (\n        <BaseTab\n            id={id}\n            ref={ref}\n            disabled={disabled}\n            store={tabStore}\n            render={render}\n            className={className}\n            onClick={onClick}\n        >\n            {children}\n        </BaseTab>\n    )\n})\n\ntype TabListProps = (\n    | {\n          /** Labels the tab list for assistive technologies. This must be provided if `aria-labelledby` is omitted. */\n          'aria-label': string\n      }\n    | {\n          /**\n           * One or more element IDs used to label the tab list for assistive technologies. Required if\n           * `aria-label` is omitted.\n           */\n          'aria-labelledby': string\n      }\n    | {\n          /**\n           * For cases where multiple instances of the tab list exists, the duplicates may be marked as aria-hidden\n           */\n          'aria-hidden': boolean\n      }\n) & {\n    /**\n     * A list of `<Tab>` elements\n     */\n    children: React.ReactNode\n\n    /**\n     * Controls the spacing between tabs\n     */\n    space?: Space\n\n    /**\n     * The width of the tab list.\n     *\n     * - `'maxContent'`: Each tab will be as wide as its content.\n     * - `'full'`: Each tab will be as wide as the tab list.\n     *\n     * @default 'maxContent'\n     */\n    width?: 'maxContent' | 'full'\n\n    /**\n     * How to align the tabs within the tab list.\n     *\n     * @default 'start'\n     */\n    align?: 'start' | 'center' | 'end'\n} & ObfuscatedClassName\n\n/**\n * A component used to group `<Tab>` elements together.\n */\nfunction TabList({\n    children,\n    space,\n    width = 'maxContent',\n    align = 'start',\n    exceptionallySetClassName,\n    ...props\n}: TabListProps): React.ReactElement | null {\n    const tabListRef = React.useRef<HTMLDivElement | null>(null)\n    const tabListPrevWidthRef = React.useRef(0)\n\n    const tabContextValue = React.useContext(TabsContext)\n\n    const [selectedTabElement, setSelectedTabElement] = React.useState<HTMLElement | null>(null)\n    const [selectedTabStyle, setSelectedTabStyle] = React.useState<React.CSSProperties>({})\n\n    const selectedId = tabContextValue?.tabStore.useState('selectedId')\n\n    const updateSelectedTabPosition = React.useCallback(\n        function updateSelectedTabPositionCallback() {\n            if (!selectedId || !tabListRef.current) {\n                return\n            }\n\n            const tabs = tabListRef.current.querySelectorAll('[role=\"tab\"]')\n\n            const selectedTab = Array.from(tabs).find(\n                (tab) => tab.getAttribute('id') === selectedId,\n            ) as HTMLElement | undefined\n\n            if (selectedTab) {\n                setSelectedTabElement(selectedTab)\n                setSelectedTabStyle({\n                    left: `${selectedTab.offsetLeft}px`,\n                    width: `${selectedTab.offsetWidth}px`,\n                })\n            }\n        },\n        [selectedId],\n    )\n\n    React.useEffect(\n        function updateSelectedTabPositionOnTabChange() {\n            updateSelectedTabPosition()\n        },\n        // `selectedId` is a dependency to ensure the effect runs when the selected tab changes\n        [selectedId, updateSelectedTabPosition],\n    )\n\n    React.useEffect(\n        function observeTabListWidthChange() {\n            let animationFrameId: number | null = null\n\n            const tabListObserver = new ResizeObserver(([entry]) => {\n                const width = entry?.contentRect.width\n\n                if (width && tabListPrevWidthRef.current !== width) {\n                    tabListPrevWidthRef.current = width\n\n                    if (animationFrameId !== null) {\n                        cancelAnimationFrame(animationFrameId)\n                    }\n\n                    animationFrameId = requestAnimationFrame(() => {\n                        updateSelectedTabPosition()\n                        animationFrameId = null\n                    })\n                }\n            })\n\n            if (tabListRef.current) {\n                tabListObserver.observe(tabListRef.current)\n            }\n\n            return function cleanupResizeObserver() {\n                if (animationFrameId) {\n                    cancelAnimationFrame(animationFrameId)\n                }\n\n                tabListObserver.disconnect()\n            }\n        },\n        [updateSelectedTabPosition],\n    )\n\n    if (!tabContextValue) {\n        return null\n    }\n\n    const { tabStore, variant } = tabContextValue\n\n    const justifyContentAlignMap: Record<typeof align, BoxJustifyContent> = {\n        start: 'flexStart',\n        end: 'flexEnd',\n        center: 'center',\n    }\n\n    return (\n        // This extra <Box> not only provides alignment for the tabs, but also prevents <Inline>'s\n        // negative margins from collapsing when used in a flex container which will render the\n        // track with the wrong height\n        <Box\n            display=\"flex\"\n            justifyContent={width === 'full' ? 'center' : justifyContentAlignMap[align]}\n        >\n            <BaseTabList\n                store={tabStore}\n                render={\n                    <Box position=\"relative\" width={width} className={exceptionallySetClassName} />\n                }\n                ref={tabListRef}\n                {...props}\n            >\n                <Box className={[styles.track, styles[`track-${variant}`]]} />\n                {selectedTabElement ? (\n                    <Box\n                        className={[styles.selected, styles[`selected-${variant}`]]}\n                        style={selectedTabStyle}\n                    />\n                ) : null}\n                <Inline\n                    space={space}\n                    exceptionallySetClassName={classNames(\n                        width === 'full' ? styles.fullTabList : null,\n                    )}\n                >\n                    {children}\n                </Inline>\n            </BaseTabList>\n        </Box>\n    )\n}\n\ninterface TabPanelProps\n    extends React.HTMLAttributes<HTMLDivElement>,\n        Pick<BaseTabPanelProps, 'render'> {\n    /** The content to be rendered inside the tab */\n    children?: React.ReactNode\n\n    /** The tabPanel's identifier. This must match its corresponding `<Tab>`'s id */\n    id: string\n\n    /**\n     * By default, the tab panel's content is always rendered even when they are not active. This\n     * behaviour can be changed to 'active', which renders only when the tab is active, and 'lazy',\n     * meaning while inactive tab panels will not be rendered initially, they will remain mounted\n     * once they are active until the entire Tabs tree is unmounted.\n     */\n    renderMode?: 'always' | 'active' | 'lazy'\n}\n\n/**\n * Used to define the content to be rendered when a tab is active. Each `<TabPanel>` must have a\n * corresponding `<Tab>` component.\n */\nconst TabPanel = React.forwardRef<HTMLDivElement, TabPanelProps>(function TabPanel(\n    { children, id, renderMode = 'always', ...props },\n    ref,\n): React.ReactElement | null {\n    const tabContextValue = React.useContext(TabsContext)\n    const [tabRendered, setTabRendered] = React.useState(false)\n    const selectedId = tabContextValue?.tabStore.useState('selectedId')\n    const tabIsActive = selectedId === id\n\n    React.useEffect(\n        function trackTabRenderedState() {\n            if (!tabRendered && tabIsActive) {\n                setTabRendered(true)\n            }\n        },\n        [tabRendered, tabIsActive],\n    )\n\n    if (!tabContextValue) {\n        return null\n    }\n\n    const { tabStore } = tabContextValue\n    const shouldRender =\n        renderMode === 'always' ||\n        (renderMode === 'active' && tabIsActive) ||\n        (renderMode === 'lazy' && (tabIsActive || tabRendered))\n\n    return shouldRender ? (\n        <BaseTabPanel {...props} tabId={id} store={tabStore} ref={ref}>\n            {children}\n        </BaseTabPanel>\n    ) : null\n})\n\ntype TabAwareSlotProps = {\n    /**\n     * Render prop used to provide the content to be rendered inside the slot. The render prop will\n     * be called with the current `selectedId`\n     */\n    children: (provided: { selectedId?: string | null }) => React.ReactElement | null\n}\n\n/**\n * Allows content to be rendered based on the current tab being selected while outside of the\n * TabPanel component. Can be placed freely within the main `<Tabs>` component.\n */\nfunction TabAwareSlot({ children }: TabAwareSlotProps): React.ReactElement | null {\n    const tabContextValue = React.useContext(TabsContext)\n    const selectedId = tabContextValue?.tabStore.useState('selectedId')\n    return tabContextValue ? children({ selectedId }) : null\n}\n\nexport { Tab, Tabs, TabList, TabPanel, TabAwareSlot }\n"],"names":["TabsContext","React","createContext","Tab","forwardRef","children","id","disabled","exceptionallySetClassName","render","onClick","ref","tabContextValue","useContext","variant","tabStore","className","classNames","styles","tab","createElement","BaseTab","store","TabPanel","renderMode","_ref2","props","_objectWithoutProperties","objectWithoutProperties","_excluded2","tabRendered","setTabRendered","useState","tabIsActive","useEffect","BaseTabPanel","tabId","selectedId","_ref","space","width","align","_excluded","tabListRef","useRef","tabListPrevWidthRef","selectedTabElement","setSelectedTabElement","selectedTabStyle","setSelectedTabStyle","updateSelectedTabPosition","useCallback","current","tabs","querySelectorAll","selectedTab","Array","from","find","getAttribute","left","offsetLeft","offsetWidth","animationFrameId","tabListObserver","ResizeObserver","entry","contentRect","cancelAnimationFrame","requestAnimationFrame","observe","disconnect","Box","display","justifyContent","start","end","center","BaseTabList","TabList","_objectSpread","position","track","selected","style","Inline","fullTabList","defaultSelectedId","onSelectedIdChange","useTabStore","setSelectedId","actualSelectedId","memoizedTabState","useMemo","Provider","value"],"mappings":"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"}

package/lib/text/text.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_rollupPluginBabelHelpers.js"),t=require("react"),l=require("../utils/responsive-props.js"),r=require("../box/box.js"),a=require("../utils/polymorphism.js"),s=require("./text.module.css.js");function n(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(l){if("default"!==l){var r=Object.getOwnPropertyDescriptor(e,l);Object.defineProperty(t,l,r.get?r:{enumerable:!0,get:function(){return e[l]}})}})),t.default=e,t}var i=n(t);const o=["as","size","weight","tone","align","children","lineClamp","exceptionallySetClassName"];exports.Text=a.polymorphicComponent((function(t,a){let{as:n,size:u="body",weight:p="regular",tone:c="normal",align:d,children:m,lineClamp:g,exceptionallySetClassName:f}=t,b=e.objectWithoutProperties(t,o);const j="string"==typeof g?Number(g)>1:(null!=g?g:1)>1;return i.createElement(r.Box,e.objectSpread2(e.objectSpread2({},b),{},{as:n,className:[f,s.default.text,"body"!==u?l.getClassNames(s.default,"size",u):null,"regular"!==p?l.getClassNames(s.default,"weight",p):null,"normal"!==c?l.getClassNames(s.default,"tone",c):null,j?s.default.lineClampMultipleLines:null,g?l.getClassNames(s.default,"lineClamp",g.toString()):null],textAlign:d,paddingRight:g?"xsmall":void 0,ref:a}),m)}));
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_rollupPluginBabelHelpers.js"),t=require("react"),l=require("../utils/responsive-props.js"),r=require("../box/box.js"),a=require("../utils/polymorphism.js"),s=require("./text.module.css.js");function i(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(l){if("default"!==l){var r=Object.getOwnPropertyDescriptor(e,l);Object.defineProperty(t,l,r.get?r:{enumerable:!0,get:function(){return e[l]}})}})),t.default=e,t}var n=i(t);const o=["as","size","weight","tone","align","children","lineClamp","exceptionallySetClassName"];exports.Text=a.polymorphicComponent((function(t,a){let{as:i,size:u="body",weight:p="regular",tone:c="normal",align:d,children:m,lineClamp:g,exceptionallySetClassName:f}=t,b=e.objectWithoutProperties(t,o);const j="string"==typeof g?Number(g)>1:(g??1)>1;return n.createElement(r.Box,e.objectSpread2(e.objectSpread2({},b),{},{as:i,className:[f,s.default.text,"body"!==u?l.getClassNames(s.default,"size",u):null,"regular"!==p?l.getClassNames(s.default,"weight",p):null,"normal"!==c?l.getClassNames(s.default,"tone",c):null,j?s.default.lineClampMultipleLines:null,g?l.getClassNames(s.default,"lineClamp",g.toString()):null],textAlign:d,paddingRight:g?"xsmall":void 0,ref:a}),m)}));
 //# sourceMappingURL=text.js.map

package/lib/text/text.js.map

@@ -1 +1 @@
-{"version":3,"file":"text.js","sources":["../../src/text/text.tsx"],"sourcesContent":["import * as React from 'react'\nimport { getClassNames } from '../utils/responsive-props'\nimport { Box } from '../box'\nimport { polymorphicComponent } from '../utils/polymorphism'\n\nimport type { Tone } from '../utils/common-types'\nimport type { BoxProps } from '../box'\n\nimport styles from './text.module.css'\n\ntype TextProps = {\n    children: React.ReactNode\n    /**\n     * The size of the text.\n     *\n     * The supported values, from smaller size to larger size, are:\n     * 'caption', 'copy', 'body', and 'subtitle'\n     *\n     * @default 'body'\n     */\n    size?: 'caption' | 'copy' | 'body' | 'subtitle'\n    /**\n     * The weight of the text font.\n     *\n     * @default 'regular'\n     */\n    weight?: 'regular' | 'semibold' | 'bold'\n    /**\n     * The tone (semantic color) of the text.\n     *\n     * @default 'normal'\n     */\n    tone?: Tone\n    /**\n     * Used to truncate the text 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 text horizontally.\n     *\n     * @default 'start'\n     */\n    align?: BoxProps['textAlign']\n}\n\nconst Text = polymorphicComponent<'div', TextProps>(function Text(\n    {\n        as,\n        size = 'body',\n        weight = 'regular',\n        tone = 'normal',\n        align,\n        children,\n        lineClamp,\n        exceptionallySetClassName,\n        ...props\n    },\n    ref,\n) {\n    const lineClampMultipleLines =\n        typeof lineClamp === 'string' ? Number(lineClamp) > 1 : (lineClamp ?? 1) > 1\n\n    return (\n        <Box\n            {...props}\n            as={as}\n            className={[\n                exceptionallySetClassName,\n                styles.text,\n                size !== 'body' ? getClassNames(styles, 'size', size) : null,\n                weight !== 'regular' ? getClassNames(styles, 'weight', weight) : null,\n                tone !== 'normal' ? getClassNames(styles, 'tone', tone) : null,\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            ref={ref}\n        >\n            {children}\n        </Box>\n    )\n})\n\nexport type { TextProps }\nexport { Text }\n"],"names":["polymorphicComponent","_ref","ref","as","size","weight","tone","align","children","lineClamp","exceptionallySetClassName","props","_objectWithoutProperties","objectWithoutProperties","_excluded","lineClampMultipleLines","Number","React","createElement","Box","className","styles","text","getClassNames","toString","textAlign","paddingRight","undefined"],"mappings":"uqBAoDaA,EAAAA,sBAAuC,SAAAC,EAYhDC,GAAG,IAXHC,GACIA,EADJC,KAEIA,EAAO,OAFXC,OAGIA,EAAS,UAHbC,KAIIA,EAAO,SAJXC,MAKIA,EALJC,SAMIA,EANJC,UAOIA,EAPJC,0BAQIA,GAGDT,EAFIU,EAEJC,EAAAC,wBAAAZ,EAAAa,GAEH,MAAMC,EACmB,iBAAdN,EAAyBO,OAAOP,GAAa,SAAKA,EAAAA,EAAa,GAAK,EAE/E,OACIQ,EAACC,cAAAC,yCACOR,GADR,GAAA,CAEIR,GAAIA,EACJiB,UAAW,CACPV,EACAW,UAAOC,KACE,SAATlB,EAAkBmB,EAAaA,cAACF,UAAQ,OAAQjB,GAAQ,KAC7C,YAAXC,EAAuBkB,EAAaA,cAACF,UAAQ,SAAUhB,GAAU,KACxD,WAATC,EAAoBiB,EAAaA,cAACF,UAAQ,OAAQf,GAAQ,KAC1DS,EAAyBM,EAAM,QAACN,uBAAyB,KACzDN,EAAYc,EAAAA,cAAcF,EAAD,QAAS,YAAaZ,EAAUe,YAAc,MAE3EC,UAAWlB,EAGXmB,aAAcjB,EAAY,cAAWkB,EACrCzB,IAAKA,IAEJM"}
+{"version":3,"file":"text.js","sources":["../../src/text/text.tsx"],"sourcesContent":["import * as React from 'react'\nimport { getClassNames } from '../utils/responsive-props'\nimport { Box } from '../box'\nimport { polymorphicComponent } from '../utils/polymorphism'\n\nimport type { Tone } from '../utils/common-types'\nimport type { BoxProps } from '../box'\n\nimport styles from './text.module.css'\n\ntype TextProps = {\n    children: React.ReactNode\n    /**\n     * The size of the text.\n     *\n     * The supported values, from smaller size to larger size, are:\n     * 'caption', 'copy', 'body', and 'subtitle'\n     *\n     * @default 'body'\n     */\n    size?: 'caption' | 'copy' | 'body' | 'subtitle'\n    /**\n     * The weight of the text font.\n     *\n     * @default 'regular'\n     */\n    weight?: 'regular' | 'semibold' | 'bold'\n    /**\n     * The tone (semantic color) of the text.\n     *\n     * @default 'normal'\n     */\n    tone?: Tone\n    /**\n     * Used to truncate the text 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 text horizontally.\n     *\n     * @default 'start'\n     */\n    align?: BoxProps['textAlign']\n}\n\nconst Text = polymorphicComponent<'div', TextProps>(function Text(\n    {\n        as,\n        size = 'body',\n        weight = 'regular',\n        tone = 'normal',\n        align,\n        children,\n        lineClamp,\n        exceptionallySetClassName,\n        ...props\n    },\n    ref,\n) {\n    const lineClampMultipleLines =\n        typeof lineClamp === 'string' ? Number(lineClamp) > 1 : (lineClamp ?? 1) > 1\n\n    return (\n        <Box\n            {...props}\n            as={as}\n            className={[\n                exceptionallySetClassName,\n                styles.text,\n                size !== 'body' ? getClassNames(styles, 'size', size) : null,\n                weight !== 'regular' ? getClassNames(styles, 'weight', weight) : null,\n                tone !== 'normal' ? getClassNames(styles, 'tone', tone) : null,\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            ref={ref}\n        >\n            {children}\n        </Box>\n    )\n})\n\nexport type { TextProps }\nexport { Text }\n"],"names":["polymorphicComponent","_ref","ref","as","size","weight","tone","align","children","lineClamp","exceptionallySetClassName","props","_objectWithoutProperties","objectWithoutProperties","_excluded","lineClampMultipleLines","Number","React","createElement","Box","className","styles","text","getClassNames","toString","textAlign","paddingRight","undefined"],"mappings":"uqBAoDaA,EAAAA,sBAAuC,SAAAC,EAYhDC,GAAG,IAXHC,GACIA,EADJC,KAEIA,EAAO,OAFXC,OAGIA,EAAS,UAHbC,KAIIA,EAAO,SAJXC,MAKIA,EALJC,SAMIA,EANJC,UAOIA,EAPJC,0BAQIA,GAGDT,EAFIU,EAEJC,EAAAC,wBAAAZ,EAAAa,GAEH,MAAMC,EACmB,iBAAdN,EAAyBO,OAAOP,GAAa,GAAKA,GAAa,GAAK,EAE/E,OACIQ,EAACC,cAAAC,yCACOR,GADR,GAAA,CAEIR,GAAIA,EACJiB,UAAW,CACPV,EACAW,UAAOC,KACE,SAATlB,EAAkBmB,EAAaA,cAACF,UAAQ,OAAQjB,GAAQ,KAC7C,YAAXC,EAAuBkB,EAAaA,cAACF,UAAQ,SAAUhB,GAAU,KACxD,WAATC,EAAoBiB,EAAaA,cAACF,UAAQ,OAAQf,GAAQ,KAC1DS,EAAyBM,EAAM,QAACN,uBAAyB,KACzDN,EAAYc,EAAAA,cAAcF,EAAD,QAAS,YAAaZ,EAAUe,YAAc,MAE3EC,UAAWlB,EAGXmB,aAAcjB,EAAY,cAAWkB,EACrCzB,IAAKA,IAEJM"}

package/lib/toast/toast-animation.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react");function t({element:e,transforms:t,transition:r,done:n}){const o=setTimeout(()=>{null==n||n()},400);t.forEach(({property:t,from:r=""})=>{e.style.setProperty(t,r)}),e.style.setProperty("transition",""),e.addEventListener("transitionend",(function t(r){r.target===e&&(e.style.setProperty("transition",""),null==n||n(),e.removeEventListener("transitionend",t),clearTimeout(o))})),window.requestAnimationFrame(()=>{window.requestAnimationFrame(()=>{e.style.setProperty("transition",r),t.forEach(({property:t,to:r=""})=>{e.style.setProperty(t,r)})})})}exports.ANIMATION_TIMEOUT=400,exports.useToastsAnimation=function(){const r=e.useMemo(()=>new Map,[]),n=e.useMemo(()=>new Map,[]);e.useLayoutEffect(()=>{const e=[];Array.from(r.entries()).forEach(([t,o])=>{if(!o)return void r.delete(t);const s=n.get(t),{top:a,height:i}=o.getBoundingClientRect();"number"==typeof s&&s!==a?e.push({element:o,transition:"transform 0.3s ease, opacity 0.3s ease",transforms:[{property:"transform",from:"translateY("+(s-a)+"px)"}]}):"number"!=typeof s&&e.push({element:o,transition:"transform 0.3s ease, opacity 0.3s ease",transforms:[{property:"transform",from:"translateY("+i+"px)"},{property:"opacity",from:"0"}]}),n.set(t,o.getBoundingClientRect().top)}),e.forEach(({element:e,transforms:r,transition:n})=>{t({element:e,transforms:r,transition:n})})});const o=e.useCallback((function(e,n){const o=r.get(e);o&&t({element:o,transforms:[{property:"opacity",to:"0"}],transition:"opacity 0.2s ease",done:n})}),[r]);return{mappedRef:e.useCallback(e=>t=>{r.set(e,t)},[r]),animateRemove:o}};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react");function t({element:e,transforms:t,transition:r,done:n}){const o=setTimeout(()=>{null==n||n()},400);t.forEach(({property:t,from:r=""})=>{e.style.setProperty(t,r)}),e.style.setProperty("transition",""),e.addEventListener("transitionend",(function t(r){r.target===e&&(e.style.setProperty("transition",""),null==n||n(),e.removeEventListener("transitionend",t),clearTimeout(o))})),window.requestAnimationFrame(()=>{window.requestAnimationFrame(()=>{e.style.setProperty("transition",r),t.forEach(({property:t,to:r=""})=>{e.style.setProperty(t,r)})})})}exports.ANIMATION_TIMEOUT=400,exports.useToastsAnimation=function(){const r=e.useMemo(()=>new Map,[]),n=e.useMemo(()=>new Map,[]);e.useLayoutEffect(()=>{const e=[];Array.from(r.entries()).forEach(([t,o])=>{if(!o)return void r.delete(t);const s=n.get(t),{top:a,height:i}=o.getBoundingClientRect();"number"==typeof s&&s!==a?e.push({element:o,transition:"transform 0.3s ease, opacity 0.3s ease",transforms:[{property:"transform",from:`translateY(${s-a}px)`}]}):"number"!=typeof s&&e.push({element:o,transition:"transform 0.3s ease, opacity 0.3s ease",transforms:[{property:"transform",from:`translateY(${i}px)`},{property:"opacity",from:"0"}]}),n.set(t,o.getBoundingClientRect().top)}),e.forEach(({element:e,transforms:r,transition:n})=>{t({element:e,transforms:r,transition:n})})});const o=e.useCallback((function(e,n){const o=r.get(e);o&&t({element:o,transforms:[{property:"opacity",to:"0"}],transition:"opacity 0.2s ease",done:n})}),[r]);return{mappedRef:e.useCallback(e=>t=>{r.set(e,t)},[r]),animateRemove:o}};
 //# sourceMappingURL=toast-animation.js.map

package/lib/toast/toast-animation.js.map

@@ -1 +1 @@
-{"version":3,"file":"toast-animation.js","sources":["../../src/toast/toast-animation.ts"],"sourcesContent":["/**\n * Adapted with minor changes from https://github.com/seek-oss/braid-design-system/blob/7a5ebccb/packages/braid-design-system/lib/components/useToast/useFlipList.ts\n *\n * MIT License\n *\n * Copyright (c) 2018 SEEK\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in all\n * copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n */\n\nimport { useMemo, useCallback, useLayoutEffect } from 'react'\n\nconst ANIMATION_TIMEOUT = 400\nconst ENTRANCE_TRANSITION = 'transform 0.3s ease, opacity 0.3s ease'\nconst EXIT_TRANSITION = 'opacity 0.2s ease'\n\ntype Transform = {\n    property: 'opacity' | 'transform' | 'scale'\n    from?: string\n    to?: string\n}\n\n/**\n * Applies the \"from\" value of given CSS properties, and also sets a transition CSS property. Then\n * it waits an animation frame before setting the same CSS properties to the target \"to\" value. This\n * triggers the browser to perform the CSS transition on them.\n *\n * At the end of the animation, it cleans up, unsetting all the CSS properties (including the\n * transition), and calls the \"done\" callback, if given.\n */\nfunction animate({\n    element,\n    transforms,\n    transition,\n    done,\n}: {\n    element: HTMLElement\n    transforms: Transform[]\n    transition: string\n    done?: () => void\n}) {\n    const fallbackTimeout = setTimeout(() => {\n        done?.()\n    }, ANIMATION_TIMEOUT)\n\n    transforms.forEach(({ property, from = '' }) => {\n        element.style.setProperty(property, from)\n    })\n    element.style.setProperty('transition', '')\n\n    function transitionEndHandler(event: TransitionEvent) {\n        if (event.target !== element) {\n            return\n        }\n        element.style.setProperty('transition', '')\n        done?.()\n        element.removeEventListener('transitionend', transitionEndHandler)\n        clearTimeout(fallbackTimeout)\n    }\n\n    element.addEventListener('transitionend', transitionEndHandler)\n\n    // Call requestAnimationFrame twice to make sure we have a full animation frame at our disposal\n    window.requestAnimationFrame(() => {\n        window.requestAnimationFrame(() => {\n            element.style.setProperty('transition', transition)\n            transforms.forEach(({ property, to = '' }) => {\n                element.style.setProperty(property, to)\n            })\n        })\n    })\n}\n\ntype ToastsAnimationToolkit = {\n    /**\n     * Used for gathering all the active stacked toast elements. Should be used by passing\n     * `ref={mappedRef(toastId)}` to the stacked toasts.\n     */\n    mappedRef: (toastId: string) => (ref: HTMLElement | null) => void\n\n    /**\n     * The stacked toasts view should use this callback when it needs to remove a toast, instead of\n     * removing it right away. The actual removal from the state (and consequently, from the DOM)\n     * should happen in the `onAnimationDone` instead.\n     */\n    animateRemove: (toastId: string, onAnimationDone: () => void) => void\n}\n\n/**\n * Provides the functionality of animating the stacked toasts when they appear and before they\n * disappear.\n *\n * It works by keeping a mapping from toast IDs to the toast elements, and keeping a mapping from\n * toast IDs to their top position. Then, on every single re-render, it compares the new DOM\n * situation with the previously stored one in these mappings. With this information, it applies\n * animations that smoothly transitions between both states.\n */\nfunction useToastsAnimation(): ToastsAnimationToolkit {\n    const refs = useMemo(() => new Map<string, HTMLElement | null>(), [])\n    const positions = useMemo(() => new Map<string, number>(), [])\n\n    useLayoutEffect(() => {\n        const animations: Array<{\n            element: HTMLElement\n            transforms: Transform[]\n            transition: string\n        }> = []\n\n        Array.from(refs.entries()).forEach(([id, element]) => {\n            if (!element) {\n                refs.delete(id)\n                return\n            }\n\n            const prevTop = positions.get(id)\n            const { top, height } = element.getBoundingClientRect()\n\n            if (typeof prevTop === 'number' && prevTop !== top) {\n                // Move animation\n                animations.push({\n                    element,\n                    transition: ENTRANCE_TRANSITION,\n                    transforms: [{ property: 'transform', from: `translateY(${prevTop - top}px)` }],\n                })\n            } else if (typeof prevTop !== 'number') {\n                // Enter animation\n                animations.push({\n                    element,\n                    transition: ENTRANCE_TRANSITION,\n                    transforms: [\n                        { property: 'transform', from: `translateY(${height}px)` },\n                        { property: 'opacity', from: '0' },\n                    ],\n                })\n            }\n\n            positions.set(id, element.getBoundingClientRect().top)\n        })\n\n        animations.forEach(({ element, transforms, transition }) => {\n            animate({ element, transforms, transition })\n        })\n    })\n\n    const animateRemove = useCallback(\n        function animateRemove(id: string, onAnimationDone: () => void) {\n            const element = refs.get(id)\n            if (element) {\n                // Removal animation\n                animate({\n                    element,\n                    transforms: [{ property: 'opacity', to: '0' }],\n                    transition: EXIT_TRANSITION,\n                    done: onAnimationDone,\n                })\n            }\n        },\n        [refs],\n    )\n\n    const mappedRef = useCallback(\n        (id: string) => (ref: HTMLElement | null) => {\n            refs.set(id, ref)\n        },\n        [refs],\n    )\n\n    return { mappedRef, animateRemove }\n}\n\nexport { ANIMATION_TIMEOUT, useToastsAnimation }\n"],"names":["animate","element","transforms","transition","done","fallbackTimeout","setTimeout","forEach","property","from","style","setProperty","addEventListener","transitionEndHandler","event","target","removeEventListener","clearTimeout","window","requestAnimationFrame","to","refs","useMemo","Map","positions","useLayoutEffect","animations","Array","entries","id","delete","prevTop","get","top","height","getBoundingClientRect","push","set","animateRemove","useCallback","onAnimationDone","mappedRef","ref"],"mappings":"2FA8CA,SAASA,GAAQC,QACbA,EADaC,WAEbA,EAFaC,WAGbA,EAHaC,KAIbA,IAOA,MAAMC,EAAkBC,WAAW,KAC3B,MAAJF,GAAAA,KA9BkB,KAiCtBF,EAAWK,QAAQ,EAAGC,SAAAA,EAAUC,KAAAA,EAAO,OACnCR,EAAQS,MAAMC,YAAYH,EAAUC,KAExCR,EAAQS,MAAMC,YAAY,aAAc,IAYxCV,EAAQW,iBAAiB,iBAVzB,SAASC,EAAqBC,GACtBA,EAAMC,SAAWd,IAGrBA,EAAQS,MAAMC,YAAY,aAAc,IACpC,MAAJP,GAAAA,IACAH,EAAQe,oBAAoB,gBAAiBH,GAC7CI,aAAaZ,OAMjBa,OAAOC,sBAAsB,KACzBD,OAAOC,sBAAsB,KACzBlB,EAAQS,MAAMC,YAAY,aAAcR,GACxCD,EAAWK,QAAQ,EAAGC,SAAAA,EAAUY,GAAAA,EAAK,OACjCnB,EAAQS,MAAMC,YAAYH,EAAUY,mCAvD1B,+BAqF1B,WACI,MAAMC,EAAOC,EAAAA,QAAQ,IAAM,IAAIC,IAAmC,IAC5DC,EAAYF,EAAAA,QAAQ,IAAM,IAAIC,IAAuB,IAE3DE,EAAAA,gBAAgB,KACZ,MAAMC,EAID,GAELC,MAAMlB,KAAKY,EAAKO,WAAWrB,QAAQ,EAAEsB,EAAI5B,MACrC,IAAKA,EAED,YADAoB,EAAKS,OAAOD,GAIhB,MAAME,EAAUP,EAAUQ,IAAIH,IACxBI,IAAEA,EAAFC,OAAOA,GAAWjC,EAAQkC,wBAET,iBAAZJ,GAAwBA,IAAYE,EAE3CP,EAAWU,KAAK,CACZnC,QAAAA,EACAE,WA5GQ,yCA6GRD,WAAY,CAAC,CAAEM,SAAU,YAAaC,KAAI,eAAgBsB,EAAUE,GAA1B,UAEpB,iBAAZF,GAEdL,EAAWU,KAAK,CACZnC,QAAAA,EACAE,WAnHQ,yCAoHRD,WAAY,CACR,CAAEM,SAAU,YAAaC,mBAAoByB,EAAhB,OAC7B,CAAE1B,SAAU,UAAWC,KAAM,QAKzCe,EAAUa,IAAIR,EAAI5B,EAAQkC,wBAAwBF,OAGtDP,EAAWnB,QAAQ,EAAGN,QAAAA,EAASC,WAAAA,EAAYC,WAAAA,MACvCH,EAAQ,CAAEC,QAAAA,EAASC,WAAAA,EAAYC,WAAAA,QAIvC,MAAMmC,EAAgBC,EAAWA,aAC7B,SAAuBV,EAAYW,GAC/B,MAAMvC,EAAUoB,EAAKW,IAAIH,GACrB5B,GAEAD,EAAQ,CACJC,QAAAA,EACAC,WAAY,CAAC,CAAEM,SAAU,UAAWY,GAAI,MACxCjB,WA1II,oBA2IJC,KAAMoC,MAIlB,CAACnB,IAUL,MAAO,CAAEoB,UAPSF,EAAAA,YACbV,GAAgBa,IACbrB,EAAKgB,IAAIR,EAAIa,IAEjB,CAACrB,IAGeiB,cAAAA"}
+{"version":3,"file":"toast-animation.js","sources":["../../src/toast/toast-animation.ts"],"sourcesContent":["/**\n * Adapted with minor changes from https://github.com/seek-oss/braid-design-system/blob/7a5ebccb/packages/braid-design-system/lib/components/useToast/useFlipList.ts\n *\n * MIT License\n *\n * Copyright (c) 2018 SEEK\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in all\n * copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n */\n\nimport { useMemo, useCallback, useLayoutEffect } from 'react'\n\nconst ANIMATION_TIMEOUT = 400\nconst ENTRANCE_TRANSITION = 'transform 0.3s ease, opacity 0.3s ease'\nconst EXIT_TRANSITION = 'opacity 0.2s ease'\n\ntype Transform = {\n    property: 'opacity' | 'transform' | 'scale'\n    from?: string\n    to?: string\n}\n\n/**\n * Applies the \"from\" value of given CSS properties, and also sets a transition CSS property. Then\n * it waits an animation frame before setting the same CSS properties to the target \"to\" value. This\n * triggers the browser to perform the CSS transition on them.\n *\n * At the end of the animation, it cleans up, unsetting all the CSS properties (including the\n * transition), and calls the \"done\" callback, if given.\n */\nfunction animate({\n    element,\n    transforms,\n    transition,\n    done,\n}: {\n    element: HTMLElement\n    transforms: Transform[]\n    transition: string\n    done?: () => void\n}) {\n    const fallbackTimeout = setTimeout(() => {\n        done?.()\n    }, ANIMATION_TIMEOUT)\n\n    transforms.forEach(({ property, from = '' }) => {\n        element.style.setProperty(property, from)\n    })\n    element.style.setProperty('transition', '')\n\n    function transitionEndHandler(event: TransitionEvent) {\n        if (event.target !== element) {\n            return\n        }\n        element.style.setProperty('transition', '')\n        done?.()\n        element.removeEventListener('transitionend', transitionEndHandler)\n        clearTimeout(fallbackTimeout)\n    }\n\n    element.addEventListener('transitionend', transitionEndHandler)\n\n    // Call requestAnimationFrame twice to make sure we have a full animation frame at our disposal\n    window.requestAnimationFrame(() => {\n        window.requestAnimationFrame(() => {\n            element.style.setProperty('transition', transition)\n            transforms.forEach(({ property, to = '' }) => {\n                element.style.setProperty(property, to)\n            })\n        })\n    })\n}\n\ntype ToastsAnimationToolkit = {\n    /**\n     * Used for gathering all the active stacked toast elements. Should be used by passing\n     * `ref={mappedRef(toastId)}` to the stacked toasts.\n     */\n    mappedRef: (toastId: string) => (ref: HTMLElement | null) => void\n\n    /**\n     * The stacked toasts view should use this callback when it needs to remove a toast, instead of\n     * removing it right away. The actual removal from the state (and consequently, from the DOM)\n     * should happen in the `onAnimationDone` instead.\n     */\n    animateRemove: (toastId: string, onAnimationDone: () => void) => void\n}\n\n/**\n * Provides the functionality of animating the stacked toasts when they appear and before they\n * disappear.\n *\n * It works by keeping a mapping from toast IDs to the toast elements, and keeping a mapping from\n * toast IDs to their top position. Then, on every single re-render, it compares the new DOM\n * situation with the previously stored one in these mappings. With this information, it applies\n * animations that smoothly transitions between both states.\n */\nfunction useToastsAnimation(): ToastsAnimationToolkit {\n    const refs = useMemo(() => new Map<string, HTMLElement | null>(), [])\n    const positions = useMemo(() => new Map<string, number>(), [])\n\n    useLayoutEffect(() => {\n        const animations: Array<{\n            element: HTMLElement\n            transforms: Transform[]\n            transition: string\n        }> = []\n\n        Array.from(refs.entries()).forEach(([id, element]) => {\n            if (!element) {\n                refs.delete(id)\n                return\n            }\n\n            const prevTop = positions.get(id)\n            const { top, height } = element.getBoundingClientRect()\n\n            if (typeof prevTop === 'number' && prevTop !== top) {\n                // Move animation\n                animations.push({\n                    element,\n                    transition: ENTRANCE_TRANSITION,\n                    transforms: [{ property: 'transform', from: `translateY(${prevTop - top}px)` }],\n                })\n            } else if (typeof prevTop !== 'number') {\n                // Enter animation\n                animations.push({\n                    element,\n                    transition: ENTRANCE_TRANSITION,\n                    transforms: [\n                        { property: 'transform', from: `translateY(${height}px)` },\n                        { property: 'opacity', from: '0' },\n                    ],\n                })\n            }\n\n            positions.set(id, element.getBoundingClientRect().top)\n        })\n\n        animations.forEach(({ element, transforms, transition }) => {\n            animate({ element, transforms, transition })\n        })\n    })\n\n    const animateRemove = useCallback(\n        function animateRemove(id: string, onAnimationDone: () => void) {\n            const element = refs.get(id)\n            if (element) {\n                // Removal animation\n                animate({\n                    element,\n                    transforms: [{ property: 'opacity', to: '0' }],\n                    transition: EXIT_TRANSITION,\n                    done: onAnimationDone,\n                })\n            }\n        },\n        [refs],\n    )\n\n    const mappedRef = useCallback(\n        (id: string) => (ref: HTMLElement | null) => {\n            refs.set(id, ref)\n        },\n        [refs],\n    )\n\n    return { mappedRef, animateRemove }\n}\n\nexport { ANIMATION_TIMEOUT, useToastsAnimation }\n"],"names":["animate","element","transforms","transition","done","fallbackTimeout","setTimeout","forEach","property","from","style","setProperty","addEventListener","transitionEndHandler","event","target","removeEventListener","clearTimeout","window","requestAnimationFrame","to","refs","useMemo","Map","positions","useLayoutEffect","animations","Array","entries","id","delete","prevTop","get","top","height","getBoundingClientRect","push","set","animateRemove","useCallback","onAnimationDone","mappedRef","ref"],"mappings":"2FA8CA,SAASA,GAAQC,QACbA,EADaC,WAEbA,EAFaC,WAGbA,EAHaC,KAIbA,IAOA,MAAMC,EAAkBC,WAAW,KAC3B,MAAJF,GAAAA,KA9BkB,KAiCtBF,EAAWK,QAAQ,EAAGC,SAAAA,EAAUC,KAAAA,EAAO,OACnCR,EAAQS,MAAMC,YAAYH,EAAUC,KAExCR,EAAQS,MAAMC,YAAY,aAAc,IAYxCV,EAAQW,iBAAiB,iBAVzB,SAASC,EAAqBC,GACtBA,EAAMC,SAAWd,IAGrBA,EAAQS,MAAMC,YAAY,aAAc,IACpC,MAAJP,GAAAA,IACAH,EAAQe,oBAAoB,gBAAiBH,GAC7CI,aAAaZ,OAMjBa,OAAOC,sBAAsB,KACzBD,OAAOC,sBAAsB,KACzBlB,EAAQS,MAAMC,YAAY,aAAcR,GACxCD,EAAWK,QAAQ,EAAGC,SAAAA,EAAUY,GAAAA,EAAK,OACjCnB,EAAQS,MAAMC,YAAYH,EAAUY,mCAvD1B,+BAqF1B,WACI,MAAMC,EAAOC,EAAAA,QAAQ,IAAM,IAAIC,IAAmC,IAC5DC,EAAYF,EAAAA,QAAQ,IAAM,IAAIC,IAAuB,IAE3DE,EAAAA,gBAAgB,KACZ,MAAMC,EAID,GAELC,MAAMlB,KAAKY,EAAKO,WAAWrB,QAAQ,EAAEsB,EAAI5B,MACrC,IAAKA,EAED,YADAoB,EAAKS,OAAOD,GAIhB,MAAME,EAAUP,EAAUQ,IAAIH,IACxBI,IAAEA,EAAFC,OAAOA,GAAWjC,EAAQkC,wBAET,iBAAZJ,GAAwBA,IAAYE,EAE3CP,EAAWU,KAAK,CACZnC,QAAAA,EACAE,WA5GQ,yCA6GRD,WAAY,CAAC,CAAEM,SAAU,YAAaC,mBAAoBsB,EAAUE,WAE9C,iBAAZF,GAEdL,EAAWU,KAAK,CACZnC,QAAAA,EACAE,WAnHQ,yCAoHRD,WAAY,CACR,CAAEM,SAAU,YAAaC,KAAM,cAAcyB,QAC7C,CAAE1B,SAAU,UAAWC,KAAM,QAKzCe,EAAUa,IAAIR,EAAI5B,EAAQkC,wBAAwBF,OAGtDP,EAAWnB,QAAQ,EAAGN,QAAAA,EAASC,WAAAA,EAAYC,WAAAA,MACvCH,EAAQ,CAAEC,QAAAA,EAASC,WAAAA,EAAYC,WAAAA,QAIvC,MAAMmC,EAAgBC,EAAWA,aAC7B,SAAuBV,EAAYW,GAC/B,MAAMvC,EAAUoB,EAAKW,IAAIH,GACrB5B,GAEAD,EAAQ,CACJC,QAAAA,EACAC,WAAY,CAAC,CAAEM,SAAU,UAAWY,GAAI,MACxCjB,WA1II,oBA2IJC,KAAMoC,MAIlB,CAACnB,IAUL,MAAO,CAAEoB,UAPSF,EAAAA,YACbV,GAAgBa,IACbrB,EAAKgB,IAAIR,EAAIa,IAEjB,CAACrB,IAGeiB,cAAAA"}

package/lib/toast/use-toasts.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_rollupPluginBabelHelpers.js"),t=require("react"),a=require("@ariakit/react"),s=require("../utils/common-helpers.js"),o=require("../box/box.js"),n=require("../stack/stack.js"),u=require("./static-toast.js"),r=require("./toast.module.css.js"),i=require("./toast-animation.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=l(t);const d=["toastId"],f=c.default.forwardRef((function({message:t,description:a,icon:s,action:o,autoDismissDelay:n,dismissLabel:r,showDismissButton:i=!0,toastId:l,onDismiss:d,onRemoveToast:f},m){const p=c.default.useRef(),b=c.default.useCallback((function(){f(l),null==d||d()}),[d,f,l]),j=c.default.useCallback((function(){n&&(p.current=window.setTimeout(b,1e3*n))}),[n,b]),v=c.default.useCallback((function(){clearTimeout(p.current),p.current=void 0}),[]);c.default.useEffect((function(){return v(),j(),v}),[j,v]);const k=c.default.useMemo(()=>{var t;return u.isActionObject(o)?e.objectSpread2(e.objectSpread2({},o),{},{closeToast:null==(t=o.closeToast)||t,onClick:function(){var e;o&&(o.onClick(),(null==(e=o.closeToast)||e)&&b())}}):o},[o,b]);return c.default.createElement(u.StaticToast,{ref:m,message:t,description:a,icon:s,action:k,onDismiss:i?b:void 0,dismissLabel:r,onMouseEnter:v,onMouseLeave:j})})),m=c.default.createContext(()=>()=>{});function p(){return c.default.useContext(m)}exports.Toast=function(e){const t=p(),a=c.default.useRef(e);return c.default.useEffect(()=>t(a.current),[t]),null},exports.ToastsProvider=function({children:t,padding:u="large",defaultAutoDismissDelay:l=10,defaultDismissLabel:p="Close",containerClassName:b}){const[j,v]=c.default.useState([]),{mappedRef:k,animateRemove:T}=i.useToastsAnimation(),x=c.default.useCallback((function(e){T(e,()=>{v(t=>{const a=t.findIndex(t=>t.toastId===e);if(a<0)return t;const s=[...t];return s.splice(a,1),s})})}),[T]),C=c.default.useCallback((function(t){const a=s.generateElementId("toast"),o=e.objectSpread2(e.objectSpread2({autoDismissDelay:l,dismissLabel:p},t),{},{toastId:a});return v(e=>[...e,o]),()=>x(a)}),[l,p,x]);return c.default.createElement(m.Provider,{value:C},t,c.default.createElement(a.Portal,null,0===j.length?null:c.default.createElement(o.Box,{className:[r.default.stackedToastsView,b],position:"fixed",width:"full",paddingX:u,paddingBottom:u,"data-testid":"toasts-container"},c.default.createElement(n.Stack,{space:"medium"},j.map(t=>{let{toastId:a}=t,s=e.objectWithoutProperties(t,d);return c.default.createElement(f,e.objectSpread2({key:a,ref:k(a),toastId:a,onRemoveToast:x},s))})))))},exports.useToasts=p;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_rollupPluginBabelHelpers.js"),t=require("react"),s=require("@ariakit/react"),a=require("../utils/common-helpers.js"),o=require("../box/box.js"),n=require("../stack/stack.js"),u=require("./static-toast.js"),r=require("./toast.module.css.js"),i=require("./toast-animation.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=l(t);const d=["toastId"],f=c.default.forwardRef((function({message:t,description:s,icon:a,action:o,autoDismissDelay:n,dismissLabel:r,showDismissButton:i=!0,toastId:l,onDismiss:d,onRemoveToast:f},m){const p=c.default.useRef(),b=c.default.useCallback((function(){f(l),null==d||d()}),[d,f,l]),j=c.default.useCallback((function(){n&&(p.current=window.setTimeout(b,1e3*n))}),[n,b]),k=c.default.useCallback((function(){clearTimeout(p.current),p.current=void 0}),[]);c.default.useEffect((function(){return k(),j(),k}),[j,k]);const v=c.default.useMemo(()=>u.isActionObject(o)?e.objectSpread2(e.objectSpread2({},o),{},{closeToast:o.closeToast??!0,onClick:function(){o&&(o.onClick(),(o.closeToast??1)&&b())}}):o,[o,b]);return c.default.createElement(u.StaticToast,{ref:m,message:t,description:s,icon:a,action:v,onDismiss:i?b:void 0,dismissLabel:r,onMouseEnter:k,onMouseLeave:j})})),m=c.default.createContext(()=>()=>{});function p(){return c.default.useContext(m)}exports.Toast=function(e){const t=p(),s=c.default.useRef(e);return c.default.useEffect(()=>t(s.current),[t]),null},exports.ToastsProvider=function({children:t,padding:u="large",defaultAutoDismissDelay:l=10,defaultDismissLabel:p="Close",containerClassName:b}){const[j,k]=c.default.useState([]),{mappedRef:v,animateRemove:T}=i.useToastsAnimation(),x=c.default.useCallback((function(e){T(e,()=>{k(t=>{const s=t.findIndex(t=>t.toastId===e);if(s<0)return t;const a=[...t];return a.splice(s,1),a})})}),[T]),C=c.default.useCallback((function(t){const s=a.generateElementId("toast"),o=e.objectSpread2(e.objectSpread2({autoDismissDelay:l,dismissLabel:p},t),{},{toastId:s});return k(e=>[...e,o]),()=>x(s)}),[l,p,x]);return c.default.createElement(m.Provider,{value:C},t,c.default.createElement(s.Portal,null,0===j.length?null:c.default.createElement(o.Box,{className:[r.default.stackedToastsView,b],position:"fixed",width:"full",paddingX:u,paddingBottom:u,"data-testid":"toasts-container"},c.default.createElement(n.Stack,{space:"medium"},j.map(t=>{let{toastId:s}=t,a=e.objectWithoutProperties(t,d);return c.default.createElement(f,e.objectSpread2({key:s,ref:v(s),toastId:s,onRemoveToast:x},a))})))))},exports.useToasts=p;
 //# sourceMappingURL=use-toasts.js.map