@doist/reactist 25.2.0 → 26.1.0

package/lib/base-field/base-field.d.ts

@@ -1,20 +1,19 @@
 import * as React from 'react';
 import { BoxProps } from '../box';
 import type { WithEnhancedClassName } from '../utils/common-types';
-type FieldHintProps = {
+type FieldTone = 'neutral' | 'success' | 'error' | 'loading';
+type FieldMessageProps = {
     id: string;
     children: React.ReactNode;
-};
-declare function FieldHint(props: FieldHintProps): React.JSX.Element;
-type FieldTone = 'neutral' | 'success' | 'error' | 'loading';
-type FieldMessageProps = FieldHintProps & {
     tone: FieldTone;
 };
 declare function FieldMessage({ id, children, tone }: FieldMessageProps): React.JSX.Element;
 type ChildrenRenderProps = {
     id: string;
+    value?: React.InputHTMLAttributes<unknown>['value'];
     'aria-describedby'?: string;
     'aria-invalid'?: true;
+    onChange?: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>;
 };
 type HtmlInputProps<T extends HTMLElement> = React.DetailedHTMLProps<React.InputHTMLAttributes<T>, T>;
 type BaseFieldVariant = 'default' | 'bordered';
@@ -33,7 +32,7 @@ type BaseFieldVariantProps = {
      */
     variant?: BaseFieldVariant;
 };
-type BaseFieldProps = WithEnhancedClassName & Pick<HtmlInputProps<HTMLInputElement>, 'id' | 'hidden' | 'aria-describedby'> & {
+type BaseFieldProps = WithEnhancedClassName & Pick<HtmlInputProps<HTMLInputElement>, 'id' | 'hidden' | 'maxLength' | 'aria-describedby'> & {
     /**
      * The main label for this field element.
      *
@@ -44,29 +43,26 @@ type BaseFieldProps = WithEnhancedClassName & Pick<HtmlInputProps<HTMLInputEleme
      *
      * Avoid providing interactive elements in the label. Prefer `auxiliaryLabel` for that.
      *
-     * @see BaseFieldProps['secondaryLabel']
      * @see BaseFieldProps['auxiliaryLabel']
      */
     label: React.ReactNode;
     /**
-     * An optional secondary label for this field element. It is combined with the `label` to
-     * form the field's entire accessible name (unless the field label is overriden by using
-     * `aria-label` or `aria-labelledby`).
+     * The initial value for this field element.
      *
-     * Avoid providing interactive elements in the label. Prefer `auxiliaryLabel` for that.
-     *
-     * @see BaseFieldProps['label']
-     * @see BaseFieldProps['auxiliaryLabel']
+     * This prop is used to calculate the character count for the initial value, and is then
+     * passed to the underlying child element.
      */
-    secondaryLabel?: React.ReactNode;
+    value?: React.InputHTMLAttributes<unknown>['value'];
     /**
-     * An optional extra element to be placed to the right of the main and secondary labels.
+     * An optional extra element to be placed to the right of the main label.
      *
      * This extra element is not included in the accessible name of the field element. Its only
      * purpose is either visual, or functional (if you include interactive elements in it).
      *
      * @see BaseFieldProps['label']
-     * @see BaseFieldProps['secondaryLabel']
+     *
+     * @deprecated The usage of this element is discouraged given that it was removed from the
+     * latest form field spec revision.
      */
     auxiliaryLabel?: React.ReactNode;
     /**
@@ -74,9 +70,7 @@ type BaseFieldProps = WithEnhancedClassName & Pick<HtmlInputProps<HTMLInputEleme
      * appearance that conveys the tone of the field (e.g. coloured red for errors, green for
      * success, etc).
      *
-     * The message element is associated to the field via the `aria-describedby` attribute. If a
-     * `hint` is provided, both the hint and the message are associated as the field accessible
-     * description.
+     * The message element is associated to the field via the `aria-describedby` attribute.
      *
      * In the future, when `aria-errormessage` gets better user agent support, we should use it
      * to associate the filed with a message when tone is `"error"`.
@@ -99,17 +93,6 @@ type BaseFieldProps = WithEnhancedClassName & Pick<HtmlInputProps<HTMLInputEleme
      * @see BaseFieldProps['hint']
      */
     tone?: FieldTone;
-    /**
-     * A hint or help-like content associated as the accessible description of the field. It is
-     * generally rendered below it, and with a visual style that reduces its prominence (i.e.
-     * as secondary text).
-     *
-     * It sets the `aria-describedby` attribute pointing to the element that holds the hint
-     * content.
-     *
-     * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby
-     */
-    hint?: React.ReactNode;
     /**
      * The maximum width that the input field can expand to.
      */
@@ -120,7 +103,7 @@ type BaseFieldProps = WithEnhancedClassName & Pick<HtmlInputProps<HTMLInputEleme
      */
     children: (props: ChildrenRenderProps) => React.ReactNode;
 };
-type FieldComponentProps<T extends HTMLElement> = Omit<BaseFieldProps, 'children' | 'className' | 'variant'> & Omit<HtmlInputProps<T>, 'className' | 'style'>;
-declare function BaseField({ variant, label, secondaryLabel, auxiliaryLabel, hint, message, tone, className, children, maxWidth, hidden, 'aria-describedby': originalAriaDescribedBy, id: originalId, }: BaseFieldProps & BaseFieldVariantProps & WithEnhancedClassName): React.JSX.Element;
-export { BaseField, FieldHint, FieldMessage };
+type FieldComponentProps<T extends HTMLElement> = Omit<BaseFieldProps, 'children' | 'className' | 'fieldRef' | 'variant'> & Omit<HtmlInputProps<T>, 'className' | 'style'>;
+declare function BaseField({ variant, label, value, auxiliaryLabel, message, tone, className, children, maxWidth, maxLength, hidden, 'aria-describedby': originalAriaDescribedBy, id: originalId, }: BaseFieldProps & BaseFieldVariantProps & WithEnhancedClassName): React.JSX.Element;
+export { BaseField, FieldMessage };
 export type { BaseFieldVariant, BaseFieldVariantProps, FieldComponentProps };

package/lib/base-field/base-field.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"),l=require("../utils/common-helpers.js"),a=require("../text/text.js"),n=require("./base-field.module.css.js"),i=require("../stack/stack.js"),s=require("../spinner/spinner.js");function d(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var l=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,l.get?l:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,r}var o=d(r);function c(r){return o.createElement(a.Text,e.objectSpread2({as:"p",tone:"secondary",size:"copy"},r))}function u(r){return o.createElement("svg",e.objectSpread2({width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg"},r),o.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M8 2.5C4.96243 2.5 2.5 4.96243 2.5 8C2.5 11.0376 4.96243 13.5 8 13.5C11.0376 13.5 13.5 11.0376 13.5 8C13.5 4.96243 11.0376 2.5 8 2.5ZM1.5 8C1.5 4.41015 4.41015 1.5 8 1.5C11.5899 1.5 14.5 4.41015 14.5 8C14.5 11.5899 11.5899 14.5 8 14.5C4.41015 14.5 1.5 11.5899 1.5 8ZM8.66667 10.3333C8.66667 10.7015 8.36819 11 8 11C7.63181 11 7.33333 10.7015 7.33333 10.3333C7.33333 9.96514 7.63181 9.66667 8 9.66667C8.36819 9.66667 8.66667 9.96514 8.66667 10.3333ZM8.65766 5.65766C8.65766 5.29445 8.36322 5 8 5C7.99087 5.00008 7.98631 5.00013 7.98175 5.00025C7.97719 5.00038 7.97263 5.00059 7.96352 5.00101C7.60086 5.02116 7.3232 5.33149 7.34335 5.69415L7.50077 8.52774C7.53575 9.15742 8.46425 9.15742 8.49923 8.52774L8.65665 5.69415C8.65707 5.68503 8.65728 5.68047 8.65741 5.67591C8.65754 5.67135 8.65758 5.66679 8.65766 5.65766Z",fill:"currentColor"}))}function m({id:e,children:r,tone:l}){return o.createElement(a.Text,{as:"p",tone:"error"===l?"danger":"success"===l?"positive":"normal",size:"copy",id:e},o.createElement(t.Box,{as:"span",marginRight:"xsmall",display:"inlineFlex",className:n.default.messageIcon},"loading"===l?o.createElement(s.Spinner,{size:16}):o.createElement(u,{"aria-hidden":!0})),r)}exports.BaseField=function({variant:e="default",label:r,secondaryLabel:s,auxiliaryLabel:d,hint:u,message:p,tone:f="neutral",className:b,children:x,maxWidth:C,hidden:y,"aria-describedby":E,id:g}){const h=l.useId(g),j=l.useId(),v=l.useId(),B={id:h,"aria-describedby":null!=E?E:[p?v:null,j].filter(Boolean).join(" "),"aria-invalid":"error"===f||void 0};return o.createElement(i.Stack,{space:"small",hidden:y},o.createElement(t.Box,{className:[b,n.default.container,"error"===f?n.default.error:null,"bordered"===e?n.default.bordered:null],maxWidth:C},r||s||d?o.createElement(t.Box,{as:"span",display:"flex",justifyContent:"spaceBetween",alignItems:"flexEnd"},o.createElement(a.Text,{size:"bordered"===e?"caption":"body",as:"label",htmlFor:h},r?o.createElement("span",{className:n.default.primaryLabel},r):null,s?o.createElement("span",{className:n.default.secondaryLabel}," (",s,")"):null),d?o.createElement(t.Box,{className:n.default.auxiliaryLabel,paddingLeft:"small"},d):null):null,x(B)),p?o.createElement(m,{id:v,tone:f},p):null,u?o.createElement(c,{id:j},u):null)},exports.FieldHint=c,exports.FieldMessage=m;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_rollupPluginBabelHelpers.js"),t=require("react"),n=require("../box/box.js"),r=require("../utils/common-helpers.js"),a=require("../text/text.js"),l=require("./base-field.module.css.js"),u=require("../stack/stack.js"),i=require("../spinner/spinner.js"),s=require("../columns/columns.js");function o(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var r=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,r.get?r:{enumerable:!0,get:function(){return e[n]}})}})),t.default=e,t}var c=o(t);function d(e){return"error"===e?"danger":"success"===e?"positive":"secondary"}function m({id:e,children:t,tone:r}){return c.createElement(a.Text,{as:"p",tone:d(r),size:"copy",id:e},"loading"===r?c.createElement(n.Box,{as:"span",marginRight:"xsmall",display:"inlineFlex",className:l.default.loadingIcon},c.createElement(i.Spinner,{size:16})):null,t)}function f({children:e,tone:t}){return c.createElement(a.Text,{tone:d(t),size:"copy"},e)}function p({value:e,maxLength:t}){if(!t)return{count:null,tone:"neutral"};const n=String(e||"").length;return{count:n+"/"+t,tone:t-n<=10?"error":"neutral"}}exports.BaseField=function({variant:t="default",label:i,value:o,auxiliaryLabel:d,message:x,tone:b="neutral",className:g,children:h,maxWidth:E,maxLength:v,hidden:j,"aria-describedby":y,id:q}){const L=r.useId(q),B=r.useId(),S=p({value:o,maxLength:v}),[O,_]=c.useState(S.count),[C,N]=c.useState(S.tone),k=null!=y?y:x?B:null,w=e.objectSpread2(e.objectSpread2({id:L,value:o},k?{"aria-describedby":k}:{}),{},{"aria-invalid":"error"===b||void 0,onChange(e){if(!v)return;const t=p({value:e.currentTarget.value,maxLength:v});_(t.count),N(t.tone)}});return c.useEffect((function(){if(!v)return;const e=p({value:o,maxLength:v});_(e.count),N(e.tone)}),[v,o]),c.createElement(u.Stack,{space:"xsmall",hidden:j},c.createElement(n.Box,{className:[g,l.default.container,"error"===b?l.default.error:null,"bordered"===t?l.default.bordered:null],maxWidth:E},i||d?c.createElement(n.Box,{as:"span",display:"flex",justifyContent:"spaceBetween",alignItems:"flexEnd"},c.createElement(a.Text,{size:"bordered"===t?"caption":"body",as:"label",htmlFor:L},i?c.createElement("span",{className:l.default.primaryLabel},i):null),d?c.createElement(n.Box,{className:l.default.auxiliaryLabel,paddingLeft:"small"},d):null):null,h(w)),x||O?c.createElement(s.Columns,{align:"right",space:"small",maxWidth:E},x?c.createElement(s.Column,{width:"auto"},c.createElement(m,{id:B,tone:b},x)):null,O?c.createElement(s.Column,{width:"content"},c.createElement(f,{tone:C},O)):null):null)},exports.FieldMessage=m;
 //# sourceMappingURL=base-field.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"base-field.js","sources":["../../src/base-field/base-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Box, BoxProps } from '../box'\nimport { useId } from '../utils/common-helpers'\nimport { Text } from '../text'\nimport styles from './base-field.module.css'\nimport { Stack } from '../stack'\n\nimport type { WithEnhancedClassName } from '../utils/common-types'\nimport { Spinner } from '../spinner'\n\ntype FieldHintProps = {\n    id: string\n    children: React.ReactNode\n}\n\nfunction FieldHint(props: FieldHintProps) {\n    return <Text as=\"p\" tone=\"secondary\" size=\"copy\" {...props} />\n}\n\nfunction MessageIcon(props: React.SVGProps<SVGSVGElement>) {\n    return (\n        <svg\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 16 16\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            {...props}\n        >\n            <path\n                fillRule=\"evenodd\"\n                clipRule=\"evenodd\"\n                d=\"M8 2.5C4.96243 2.5 2.5 4.96243 2.5 8C2.5 11.0376 4.96243 13.5 8 13.5C11.0376 13.5 13.5 11.0376 13.5 8C13.5 4.96243 11.0376 2.5 8 2.5ZM1.5 8C1.5 4.41015 4.41015 1.5 8 1.5C11.5899 1.5 14.5 4.41015 14.5 8C14.5 11.5899 11.5899 14.5 8 14.5C4.41015 14.5 1.5 11.5899 1.5 8ZM8.66667 10.3333C8.66667 10.7015 8.36819 11 8 11C7.63181 11 7.33333 10.7015 7.33333 10.3333C7.33333 9.96514 7.63181 9.66667 8 9.66667C8.36819 9.66667 8.66667 9.96514 8.66667 10.3333ZM8.65766 5.65766C8.65766 5.29445 8.36322 5 8 5C7.99087 5.00008 7.98631 5.00013 7.98175 5.00025C7.97719 5.00038 7.97263 5.00059 7.96352 5.00101C7.60086 5.02116 7.3232 5.33149 7.34335 5.69415L7.50077 8.52774C7.53575 9.15742 8.46425 9.15742 8.49923 8.52774L8.65665 5.69415C8.65707 5.68503 8.65728 5.68047 8.65741 5.67591C8.65754 5.67135 8.65758 5.66679 8.65766 5.65766Z\"\n                fill=\"currentColor\"\n            />\n        </svg>\n    )\n}\n\ntype FieldTone = 'neutral' | 'success' | 'error' | 'loading'\n\ntype FieldMessageProps = FieldHintProps & {\n    tone: FieldTone\n}\n\nfunction FieldMessage({ id, children, tone }: FieldMessageProps) {\n    const textTone = tone === 'error' ? 'danger' : tone === 'success' ? 'positive' : 'normal'\n    return (\n        <Text as=\"p\" tone={textTone} size=\"copy\" id={id}>\n            <Box as=\"span\" marginRight=\"xsmall\" display=\"inlineFlex\" className={styles.messageIcon}>\n                {tone === 'loading' ? <Spinner size={16} /> : <MessageIcon aria-hidden />}\n            </Box>\n            {children}\n        </Text>\n    )\n}\n\n//\n// BaseField\n//\n\ntype ChildrenRenderProps = {\n    id: string\n    'aria-describedby'?: string\n    'aria-invalid'?: true\n}\n\ntype HtmlInputProps<T extends HTMLElement> = React.DetailedHTMLProps<\n    React.InputHTMLAttributes<T>,\n    T\n>\n\ntype BaseFieldVariant = 'default' | 'bordered'\ntype BaseFieldVariantProps = {\n    /**\n     * Provides alternative visual layouts or modes that the field can be rendered in.\n     *\n     * Namely, there are two variants supported:\n     *\n     * - the default one\n     * - a \"bordered\" variant, where the border of the field surrounds also the labels, instead\n     *   of just surrounding the actual field element\n     *\n     * In both cases, the message and description texts for the field lie outside the bordered\n     * area.\n     */\n    variant?: BaseFieldVariant\n}\n\ntype BaseFieldProps = WithEnhancedClassName &\n    Pick<HtmlInputProps<HTMLInputElement>, 'id' | 'hidden' | 'aria-describedby'> & {\n        /**\n         * The main label for this field element.\n         *\n         * This prop is not optional. Consumers of field components must be explicit about not\n         * wanting a label by passing `label=\"\"` or `label={null}`. In those situations, consumers\n         * should make sure that fields are properly labelled semantically by other means (e.g using\n         * `aria-labelledby`, or rendering a `<label />` element referencing the field by id).\n         *\n         * Avoid providing interactive elements in the label. Prefer `auxiliaryLabel` for that.\n         *\n         * @see BaseFieldProps['secondaryLabel']\n         * @see BaseFieldProps['auxiliaryLabel']\n         */\n        label: React.ReactNode\n\n        /**\n         * An optional secondary label for this field element. It is combined with the `label` to\n         * form the field's entire accessible name (unless the field label is overriden by using\n         * `aria-label` or `aria-labelledby`).\n         *\n         * Avoid providing interactive elements in the label. Prefer `auxiliaryLabel` for that.\n         *\n         * @see BaseFieldProps['label']\n         * @see BaseFieldProps['auxiliaryLabel']\n         */\n        secondaryLabel?: React.ReactNode\n\n        /**\n         * An optional extra element to be placed to the right of the main and secondary labels.\n         *\n         * This extra element is not included in the accessible name of the field element. Its only\n         * purpose is either visual, or functional (if you include interactive elements in it).\n         *\n         * @see BaseFieldProps['label']\n         * @see BaseFieldProps['secondaryLabel']\n         */\n        auxiliaryLabel?: React.ReactNode\n\n        /**\n         * A message associated with the field. It is rendered below the field, and with an\n         * appearance that conveys the tone of the field (e.g. coloured red for errors, green for\n         * success, etc).\n         *\n         * The message element is associated to the field via the `aria-describedby` attribute. If a\n         * `hint` is provided, both the hint and the message are associated as the field accessible\n         * description.\n         *\n         * In the future, when `aria-errormessage` gets better user agent support, we should use it\n         * to associate the filed with a message when tone is `\"error\"`.\n         *\n         * @see BaseFieldProps['tone']\n         * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-errormessage\n         * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-invalid\n         */\n        message?: React.ReactNode\n\n        /**\n         * The tone with which the message, if any, is presented.\n         *\n         * If the tone is `\"error\"`, the field border turns red, and the message, if any, is also\n         * red.\n         *\n         * When the tone is `\"loading\"`, it is recommended that you also disable the field. However,\n         * this is not enforced by the component. It is only a recommendation.\n         *\n         * @see BaseFieldProps['message']\n         * @see BaseFieldProps['hint']\n         */\n        tone?: FieldTone\n\n        /**\n         * A hint or help-like content associated as the accessible description of the field. It is\n         * generally rendered below it, and with a visual style that reduces its prominence (i.e.\n         * as secondary text).\n         *\n         * It sets the `aria-describedby` attribute pointing to the element that holds the hint\n         * content.\n         *\n         * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby\n         */\n        hint?: React.ReactNode\n\n        /**\n         * The maximum width that the input field can expand to.\n         */\n        maxWidth?: BoxProps['maxWidth']\n\n        /**\n         * Used internally by components composed using `BaseField`. It is not exposed as part of\n         * the public props of such components.\n         */\n        children: (props: ChildrenRenderProps) => React.ReactNode\n    }\n\ntype FieldComponentProps<T extends HTMLElement> = Omit<\n    BaseFieldProps,\n    'children' | 'className' | 'variant'\n> &\n    Omit<HtmlInputProps<T>, 'className' | 'style'>\n\nfunction BaseField({\n    variant = 'default',\n    label,\n    secondaryLabel,\n    auxiliaryLabel,\n    hint,\n    message,\n    tone = 'neutral',\n    className,\n    children,\n    maxWidth,\n    hidden,\n    'aria-describedby': originalAriaDescribedBy,\n    id: originalId,\n}: BaseFieldProps & BaseFieldVariantProps & WithEnhancedClassName) {\n    const id = useId(originalId)\n    const hintId = useId()\n    const messageId = useId()\n\n    const ariaDescribedBy =\n        originalAriaDescribedBy ?? [message ? messageId : null, hintId].filter(Boolean).join(' ')\n\n    const childrenProps: ChildrenRenderProps = {\n        id,\n        'aria-describedby': ariaDescribedBy,\n        'aria-invalid': tone === 'error' ? true : undefined,\n    }\n\n    return (\n        <Stack space=\"small\" hidden={hidden}>\n            <Box\n                className={[\n                    className,\n                    styles.container,\n                    tone === 'error' ? styles.error : null,\n                    variant === 'bordered' ? styles.bordered : null,\n                ]}\n                maxWidth={maxWidth}\n            >\n                {label || secondaryLabel || auxiliaryLabel ? (\n                    <Box\n                        as=\"span\"\n                        display=\"flex\"\n                        justifyContent=\"spaceBetween\"\n                        alignItems=\"flexEnd\"\n                    >\n                        <Text\n                            size={variant === 'bordered' ? 'caption' : 'body'}\n                            as=\"label\"\n                            htmlFor={id}\n                        >\n                            {label ? <span className={styles.primaryLabel}>{label}</span> : null}\n                            {secondaryLabel ? (\n                                <span className={styles.secondaryLabel}>\n                                    &nbsp;({secondaryLabel})\n                                </span>\n                            ) : null}\n                        </Text>\n                        {auxiliaryLabel ? (\n                            <Box className={styles.auxiliaryLabel} paddingLeft=\"small\">\n                                {auxiliaryLabel}\n                            </Box>\n                        ) : null}\n                    </Box>\n                ) : null}\n                {children(childrenProps)}\n            </Box>\n            {message ? (\n                <FieldMessage id={messageId} tone={tone}>\n                    {message}\n                </FieldMessage>\n            ) : null}\n            {hint ? <FieldHint id={hintId}>{hint}</FieldHint> : null}\n        </Stack>\n    )\n}\n\nexport { BaseField, FieldHint, FieldMessage }\nexport type { BaseFieldVariant, BaseFieldVariantProps, FieldComponentProps }\n"],"names":["FieldHint","props","React","Text","_objectSpread","as","tone","size","MessageIcon","width","height","viewBox","fill","xmlns","createElement","fillRule","clipRule","d","FieldMessage","id","children","Box","marginRight","display","className","styles","messageIcon","Spinner","variant","label","secondaryLabel","auxiliaryLabel","hint","message","maxWidth","hidden","aria-describedby","originalAriaDescribedBy","originalId","useId","hintId","messageId","childrenProps","filter","Boolean","join","aria-invalid","undefined","Stack","space","container","error","bordered","justifyContent","alignItems","htmlFor","primaryLabel","paddingLeft"],"mappings":"snBAeA,SAASA,EAAUC,GACf,OAAOC,gBAACC,EAADA,KAAAC,gBAAA,CAAMC,GAAG,IAAIC,KAAK,YAAYC,KAAK,QAAWN,IAGzD,SAASO,EAAYP,GACjB,OACIC,sBAAAE,gBAAA,CACIK,MAAM,KACNC,OAAO,KACPC,QAAQ,YACRC,KAAK,OACLC,MAAM,8BACFZ,GAEJC,EAAAY,cAAA,OAAA,CACIC,SAAS,UACTC,SAAS,UACTC,EAAE,izBACFL,KAAK,kBAYrB,SAASM,GAAaC,GAAEA,EAAFC,SAAMA,EAANd,KAAgBA,IAElC,OACIJ,EAACY,cAAAX,QAAKE,GAAG,IAAIC,KAFS,UAATA,EAAmB,SAAoB,YAATA,EAAqB,WAAa,SAEhDC,KAAK,OAAOY,GAAIA,GACzCjB,EAAAY,cAACO,MAAI,CAAAhB,GAAG,OAAOiB,YAAY,SAASC,QAAQ,aAAaC,UAAWC,EAAM,QAACC,aAC7D,YAATpB,EAAqBJ,EAAAY,cAACa,EAAAA,QAAQ,CAAApB,KAAM,KAASL,EAACY,cAAAN,uBAElDY,qBA2Ib,UAAmBQ,QACfA,EAAU,UADKC,MAEfA,EAFeC,eAGfA,EAHeC,eAIfA,EAJeC,KAKfA,EALeC,QAMfA,EANe3B,KAOfA,EAAO,UAPQkB,UAQfA,EAReJ,SASfA,EATec,SAUfA,EAVeC,OAWfA,EACAC,mBAAoBC,EACpBlB,GAAImB,IAEJ,MAAMnB,EAAKoB,QAAMD,GACXE,EAASD,EAAAA,QACTE,EAAYF,EAAAA,QAKZG,EAAqC,CACvCvB,GAAAA,EACAiB,mBALiB,MACjBC,EAAAA,EAA2B,CAACJ,EAAUQ,EAAY,KAAMD,GAAQG,OAAOC,SAASC,KAAK,KAKrFC,eAAyB,UAATxC,QAA0ByC,GAG9C,OACI7C,EAACY,cAAAkC,QAAM,CAAAC,MAAM,QAAQd,OAAQA,GACzBjC,EAACY,cAAAO,MACG,CAAAG,UAAW,CACPA,EACAC,EAAAA,QAAOyB,UACE,UAAT5C,EAAmBmB,EAAAA,QAAO0B,MAAQ,KACtB,aAAZvB,EAAyBH,EAAAA,QAAO2B,SAAW,MAE/ClB,SAAUA,GAETL,GAASC,GAAkBC,EACxB7B,EAACY,cAAAO,EAAAA,IACG,CAAAhB,GAAG,OACHkB,QAAQ,OACR8B,eAAe,eACfC,WAAW,WAEXpD,EAACY,cAAAX,QACGI,KAAkB,aAAZqB,EAAyB,UAAY,OAC3CvB,GAAG,QACHkD,QAASpC,GAERU,EAAQ3B,EAAAY,cAAA,OAAA,CAAMU,UAAWC,EAAM,QAAC+B,cAAe3B,GAAgB,KAC/DC,EACG5B,wBAAMsB,UAAWC,EAAM,QAACK,qBACZA,EACL,KACP,MAEPC,EACG7B,EAACY,cAAAO,MAAI,CAAAG,UAAWC,EAAM,QAACM,eAAgB0B,YAAY,SAC9C1B,GAEL,MAER,KACHX,EAASsB,IAEbT,EACG/B,gBAACgB,EAAY,CAACC,GAAIsB,EAAWnC,KAAMA,GAC9B2B,GAEL,KACHD,EAAO9B,gBAACF,EAAS,CAACmB,GAAIqB,GAASR,GAAoB"}
+{"version":3,"file":"base-field.js","sources":["../../src/base-field/base-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Box, BoxProps } from '../box'\nimport { useId } from '../utils/common-helpers'\nimport { Text } from '../text'\nimport styles from './base-field.module.css'\nimport { Stack } from '../stack'\n\nimport type { WithEnhancedClassName } from '../utils/common-types'\nimport { Spinner } from '../spinner'\nimport { Column, Columns } from '../columns'\n\nconst MAX_LENGTH_THRESHOLD = 10\n\ntype FieldTone = 'neutral' | 'success' | 'error' | 'loading'\n\ntype FieldMessageProps = {\n    id: string\n    children: React.ReactNode\n    tone: FieldTone\n}\n\nfunction fieldToneToTextTone(tone: FieldTone) {\n    return tone === 'error' ? 'danger' : tone === 'success' ? 'positive' : 'secondary'\n}\n\nfunction FieldMessage({ id, children, tone }: FieldMessageProps) {\n    return (\n        <Text as=\"p\" tone={fieldToneToTextTone(tone)} size=\"copy\" id={id}>\n            {tone === 'loading' ? (\n                <Box\n                    as=\"span\"\n                    marginRight=\"xsmall\"\n                    display=\"inlineFlex\"\n                    className={styles.loadingIcon}\n                >\n                    <Spinner size={16} />\n                </Box>\n            ) : null}\n            {children}\n        </Text>\n    )\n}\n\ntype FieldCharacterCountProps = {\n    children: React.ReactNode\n    tone: FieldTone\n}\n\nfunction FieldCharacterCount({ children, tone }: FieldCharacterCountProps) {\n    return (\n        <Text tone={fieldToneToTextTone(tone)} size=\"copy\">\n            {children}\n        </Text>\n    )\n}\n\ntype ValidateInputLengthProps = {\n    value?: React.InputHTMLAttributes<unknown>['value']\n    maxLength?: number\n}\n\ntype ValidateInputLengthResult = {\n    count: string | null\n    tone: FieldTone\n}\n\nfunction validateInputLength({\n    value,\n    maxLength,\n}: ValidateInputLengthProps): ValidateInputLengthResult {\n    if (!maxLength) {\n        return {\n            count: null,\n            tone: 'neutral',\n        }\n    }\n\n    const currentLength = String(value || '').length\n    const isNearMaxLength = maxLength - currentLength <= MAX_LENGTH_THRESHOLD\n\n    return {\n        count: `${currentLength}/${maxLength}`,\n        tone: isNearMaxLength ? 'error' : 'neutral',\n    }\n}\n\n//\n// BaseField\n//\n\ntype ChildrenRenderProps = {\n    id: string\n    value?: React.InputHTMLAttributes<unknown>['value']\n    'aria-describedby'?: string\n    'aria-invalid'?: true\n    onChange?: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>\n}\n\ntype HtmlInputProps<T extends HTMLElement> = React.DetailedHTMLProps<\n    React.InputHTMLAttributes<T>,\n    T\n>\n\ntype BaseFieldVariant = 'default' | 'bordered'\ntype BaseFieldVariantProps = {\n    /**\n     * Provides alternative visual layouts or modes that the field can be rendered in.\n     *\n     * Namely, there are two variants supported:\n     *\n     * - the default one\n     * - a \"bordered\" variant, where the border of the field surrounds also the labels, instead\n     *   of just surrounding the actual field element\n     *\n     * In both cases, the message and description texts for the field lie outside the bordered\n     * area.\n     */\n    variant?: BaseFieldVariant\n}\n\ntype BaseFieldProps = WithEnhancedClassName &\n    Pick<HtmlInputProps<HTMLInputElement>, 'id' | 'hidden' | 'maxLength' | 'aria-describedby'> & {\n        /**\n         * The main label for this field element.\n         *\n         * This prop is not optional. Consumers of field components must be explicit about not\n         * wanting a label by passing `label=\"\"` or `label={null}`. In those situations, consumers\n         * should make sure that fields are properly labelled semantically by other means (e.g using\n         * `aria-labelledby`, or rendering a `<label />` element referencing the field by id).\n         *\n         * Avoid providing interactive elements in the label. Prefer `auxiliaryLabel` for that.\n         *\n         * @see BaseFieldProps['auxiliaryLabel']\n         */\n        label: React.ReactNode\n\n        /**\n         * The initial value for this field element.\n         *\n         * This prop is used to calculate the character count for the initial value, and is then\n         * passed to the underlying child element.\n         */\n        value?: React.InputHTMLAttributes<unknown>['value']\n\n        /**\n         * An optional extra element to be placed to the right of the main label.\n         *\n         * This extra element is not included in the accessible name of the field element. Its only\n         * purpose is either visual, or functional (if you include interactive elements in it).\n         *\n         * @see BaseFieldProps['label']\n         *\n         * @deprecated The usage of this element is discouraged given that it was removed from the\n         * latest form field spec revision.\n         */\n        auxiliaryLabel?: React.ReactNode\n\n        /**\n         * A message associated with the field. It is rendered below the field, and with an\n         * appearance that conveys the tone of the field (e.g. coloured red for errors, green for\n         * success, etc).\n         *\n         * The message element is associated to the field via the `aria-describedby` attribute.\n         *\n         * In the future, when `aria-errormessage` gets better user agent support, we should use it\n         * to associate the filed with a message when tone is `\"error\"`.\n         *\n         * @see BaseFieldProps['tone']\n         * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-errormessage\n         * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-invalid\n         */\n        message?: React.ReactNode\n\n        /**\n         * The tone with which the message, if any, is presented.\n         *\n         * If the tone is `\"error\"`, the field border turns red, and the message, if any, is also\n         * red.\n         *\n         * When the tone is `\"loading\"`, it is recommended that you also disable the field. However,\n         * this is not enforced by the component. It is only a recommendation.\n         *\n         * @see BaseFieldProps['message']\n         * @see BaseFieldProps['hint']\n         */\n        tone?: FieldTone\n\n        /**\n         * The maximum width that the input field can expand to.\n         */\n        maxWidth?: BoxProps['maxWidth']\n\n        /**\n         * Used internally by components composed using `BaseField`. It is not exposed as part of\n         * the public props of such components.\n         */\n        children: (props: ChildrenRenderProps) => React.ReactNode\n    }\n\ntype FieldComponentProps<T extends HTMLElement> = Omit<\n    BaseFieldProps,\n    'children' | 'className' | 'fieldRef' | 'variant'\n> &\n    Omit<HtmlInputProps<T>, 'className' | 'style'>\n\nfunction BaseField({\n    variant = 'default',\n    label,\n    value,\n    auxiliaryLabel,\n    message,\n    tone = 'neutral',\n    className,\n    children,\n    maxWidth,\n    maxLength,\n    hidden,\n    'aria-describedby': originalAriaDescribedBy,\n    id: originalId,\n}: BaseFieldProps & BaseFieldVariantProps & WithEnhancedClassName) {\n    const id = useId(originalId)\n    const messageId = useId()\n\n    const inputLength = validateInputLength({ value, maxLength })\n\n    const [characterCount, setCharacterCount] = React.useState<string | null>(inputLength.count)\n    const [characterCountTone, setCharacterCountTone] = React.useState<FieldTone>(inputLength.tone)\n\n    const ariaDescribedBy = originalAriaDescribedBy ?? (message ? messageId : null)\n\n    const childrenProps: ChildrenRenderProps = {\n        id,\n        value,\n        ...(ariaDescribedBy ? { 'aria-describedby': ariaDescribedBy } : {}),\n        'aria-invalid': tone === 'error' ? true : undefined,\n        onChange(event) {\n            if (!maxLength) {\n                return\n            }\n\n            const inputLength = validateInputLength({\n                value: event.currentTarget.value,\n                maxLength,\n            })\n\n            setCharacterCount(inputLength.count)\n            setCharacterCountTone(inputLength.tone)\n        },\n    }\n\n    React.useEffect(\n        function updateCharacterCountOnPropChange() {\n            if (!maxLength) {\n                return\n            }\n\n            const inputLength = validateInputLength({\n                value,\n                maxLength,\n            })\n\n            setCharacterCount(inputLength.count)\n            setCharacterCountTone(inputLength.tone)\n        },\n        [maxLength, value],\n    )\n\n    return (\n        <Stack space=\"xsmall\" hidden={hidden}>\n            <Box\n                className={[\n                    className,\n                    styles.container,\n                    tone === 'error' ? styles.error : null,\n                    variant === 'bordered' ? styles.bordered : null,\n                ]}\n                maxWidth={maxWidth}\n            >\n                {label || auxiliaryLabel ? (\n                    <Box\n                        as=\"span\"\n                        display=\"flex\"\n                        justifyContent=\"spaceBetween\"\n                        alignItems=\"flexEnd\"\n                    >\n                        <Text\n                            size={variant === 'bordered' ? 'caption' : 'body'}\n                            as=\"label\"\n                            htmlFor={id}\n                        >\n                            {label ? <span className={styles.primaryLabel}>{label}</span> : null}\n                        </Text>\n                        {auxiliaryLabel ? (\n                            <Box className={styles.auxiliaryLabel} paddingLeft=\"small\">\n                                {auxiliaryLabel}\n                            </Box>\n                        ) : null}\n                    </Box>\n                ) : null}\n                {children(childrenProps)}\n            </Box>\n            {message || characterCount ? (\n                <Columns align=\"right\" space=\"small\" maxWidth={maxWidth}>\n                    {message ? (\n                        <Column width=\"auto\">\n                            <FieldMessage id={messageId} tone={tone}>\n                                {message}\n                            </FieldMessage>\n                        </Column>\n                    ) : null}\n                    {characterCount ? (\n                        <Column width=\"content\">\n                            <FieldCharacterCount tone={characterCountTone}>\n                                {characterCount}\n                            </FieldCharacterCount>\n                        </Column>\n                    ) : null}\n                </Columns>\n            ) : null}\n        </Stack>\n    )\n}\n\nexport { BaseField, FieldMessage }\nexport type { BaseFieldVariant, BaseFieldVariantProps, FieldComponentProps }\n"],"names":["fieldToneToTextTone","tone","FieldMessage","id","children","React","Text","as","size","createElement","Box","marginRight","display","className","styles","loadingIcon","Spinner","FieldCharacterCount","validateInputLength","value","maxLength","count","currentLength","String","length","variant","label","auxiliaryLabel","message","maxWidth","hidden","aria-describedby","originalAriaDescribedBy","originalId","useId","messageId","inputLength","characterCount","setCharacterCount","useState","characterCountTone","setCharacterCountTone","ariaDescribedBy","childrenProps","_objectSpread","objectSpread2","aria-invalid","undefined","onChange","event","currentTarget","useEffect","Stack","space","container","error","bordered","justifyContent","alignItems","htmlFor","primaryLabel","paddingLeft","Columns","align","Column","width"],"mappings":"ypBAqBA,SAASA,EAAoBC,GACzB,MAAgB,UAATA,EAAmB,SAAoB,YAATA,EAAqB,WAAa,YAG3E,SAASC,GAAaC,GAAEA,EAAFC,SAAMA,EAANH,KAAgBA,IAClC,OACII,gBAACC,OAAI,CAACC,GAAG,IAAIN,KAAMD,EAAoBC,GAAOO,KAAK,OAAOL,GAAIA,GAChD,YAATF,EACGI,EAACI,cAAAC,EAAAA,IACG,CAAAH,GAAG,OACHI,YAAY,SACZC,QAAQ,aACRC,UAAWC,EAAM,QAACC,aAElBV,EAACI,cAAAO,UAAQ,CAAAR,KAAM,MAEnB,KACHJ,GAUb,SAASa,GAAoBb,SAAEA,EAAFH,KAAYA,IACrC,OACII,EAACI,cAAAH,QAAKL,KAAMD,EAAoBC,GAAOO,KAAK,QACvCJ,GAeb,SAASc,GAAoBC,MACzBA,EADyBC,UAEzBA,IAEA,IAAKA,EACD,MAAO,CACHC,MAAO,KACPpB,KAAM,WAId,MAAMqB,EAAgBC,OAAOJ,GAAS,IAAIK,OAG1C,MAAO,CACHH,MAAUC,EAAL,IAAsBF,EAC3BnB,KAJoBmB,EAAYE,GAnEX,GAuEG,QAAU,6BA2H1C,UAAmBG,QACfA,EAAU,UADKC,MAEfA,EAFeP,MAGfA,EAHeQ,eAIfA,EAJeC,QAKfA,EALe3B,KAMfA,EAAO,UANQY,UAOfA,EAPeT,SAQfA,EAReyB,SASfA,EATeT,UAUfA,EAVeU,OAWfA,EACAC,mBAAoBC,EACpB7B,GAAI8B,IAEJ,MAAM9B,EAAK+B,QAAMD,GACXE,EAAYD,EAAAA,QAEZE,EAAclB,EAAoB,CAAEC,MAAAA,EAAOC,UAAAA,KAE1CiB,EAAgBC,GAAqBjC,EAAMkC,SAAwBH,EAAYf,QAC/EmB,EAAoBC,GAAyBpC,EAAMkC,SAAoBH,EAAYnC,MAEpFyC,EAAkBV,MAAAA,EAAAA,EAA4BJ,EAAUO,EAAY,KAEpEQ,EAAaC,EAAAC,cAAAD,gBAAA,CACfzC,GAAAA,EACAgB,MAAAA,GACIuB,EAAkB,CAAEX,mBAAoBW,GAAoB,IAHjD,GAAA,CAIfI,eAAyB,UAAT7C,QAA0B8C,EAC1CC,SAASC,GACL,IAAK7B,EACD,OAGJ,MAAMgB,EAAclB,EAAoB,CACpCC,MAAO8B,EAAMC,cAAc/B,MAC3BC,UAAAA,IAGJkB,EAAkBF,EAAYf,OAC9BoB,EAAsBL,EAAYnC,SAqB1C,OAjBAI,EAAM8C,WACF,WACI,IAAK/B,EACD,OAGJ,MAAMgB,EAAclB,EAAoB,CACpCC,MAAAA,EACAC,UAAAA,IAGJkB,EAAkBF,EAAYf,OAC9BoB,EAAsBL,EAAYnC,QAEtC,CAACmB,EAAWD,IAIZd,EAACI,cAAA2C,QAAM,CAAAC,MAAM,SAASvB,OAAQA,GAC1BzB,EAACI,cAAAC,MACG,CAAAG,UAAW,CACPA,EACAC,EAAAA,QAAOwC,UACE,UAATrD,EAAmBa,EAAAA,QAAOyC,MAAQ,KACtB,aAAZ9B,EAAyBX,EAAAA,QAAO0C,SAAW,MAE/C3B,SAAUA,GAETH,GAASC,EACNtB,EAAAI,cAACC,EAAAA,IAAG,CACAH,GAAG,OACHK,QAAQ,OACR6C,eAAe,eACfC,WAAW,WAEXrD,EAAAI,cAACH,OACG,CAAAE,KAAkB,aAAZiB,EAAyB,UAAY,OAC3ClB,GAAG,QACHoD,QAASxD,GAERuB,EAAQrB,wBAAMQ,UAAWC,EAAM,QAAC8C,cAAelC,GAAgB,MAEnEC,EACGtB,EAACI,cAAAC,MAAI,CAAAG,UAAWC,EAAM,QAACa,eAAgBkC,YAAY,SAC9ClC,GAEL,MAER,KACHvB,EAASuC,IAEbf,GAAWS,EACRhC,gBAACyD,EAAAA,QAAO,CAACC,MAAM,QAAQV,MAAM,QAAQxB,SAAUA,GAC1CD,EACGvB,gBAAC2D,SAAM,CAACC,MAAM,QACV5D,EAAAI,cAACP,EAAa,CAAAC,GAAIgC,EAAWlC,KAAMA,GAC9B2B,IAGT,KACHS,EACGhC,gBAAC2D,SAAM,CAACC,MAAM,WACV5D,EAACI,cAAAQ,GAAoBhB,KAAMuC,GACtBH,IAGT,MAER"}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={container:"_7acdc928",auxiliaryLabel:"_815bad88",bordered:"e35886fe",error:"_6c7b5dc8",primaryLabel:"ec74af87",secondaryLabel:"_6db0ec44",messageIcon:"_05c35af8"};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={container:"d5ff04da",auxiliaryLabel:"_8d2b52f1",bordered:"_49c37b27",error:"_922ff337",primaryLabel:"af23c791",loadingIcon:"_75edcef6"};
 //# sourceMappingURL=base-field.module.css.js.map

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"],p=["value","children","onSelect","hideOnSelect","onClick","exceptionallySetClassName"],m=["label","children","exceptionallySetClassName"],f=u.createContext({menuStore:null,handleItemSelect:()=>{},getAnchorRect:null,setAnchorRect:()=>{}});function S(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 b=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)}))})),h=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}))})),M=u.forwardRef((function(t,r){let{exceptionallySetClassName:o,modal:l=!0}=t,a=e.objectWithoutProperties(t,d);const{menuStore:s,getAnchorRect:i}=u.useContext(f);if(!s)throw new Error("MenuList must be wrapped in <Menu/>");return s.useState("open")?u.createElement(n.Portal,{preserveTabOrder:!0},u.createElement(n.Menu,e.objectSpread2(e.objectSpread2({},a),{},{store:s,gutter:8,shift:4,ref:r,className:c.default("reactist_menulist",o),getAnchorRect:null!=i?i:void 0,modal:l}))):null})),x=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)})),C=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);return u.createElement(S,{onItemSelect:a},u.createElement(n.MenuItem,{store:l,ref:r,hideOnClick:!1,render:s},s.props.children),i)})),w=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=h,exports.Menu=S,exports.MenuButton=b,exports.MenuGroup=w,exports.MenuItem=x,exports.MenuList=M,exports.SubMenu=C;
+"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?"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\n//\n// Menu\n//\n\ninterface MenuProps extends Omit<MenuStoreProps, 'visible'> {\n    /**\n     * The `Menu` must contain a `MenuList` that defines the menu options. It must also contain a\n     * `MenuButton` that triggers the menu to be opened or closed.\n     */\n    children: React.ReactNode\n\n    /**\n     * An optional callback that will be called back whenever a menu item is selected. It receives\n     * the `value` of the selected `MenuItem`.\n     *\n     * If you pass down this callback, it is recommended that you properly memoize it so it does not\n     * change on every render.\n     */\n    onItemSelect?: (value: string | null | undefined) => void\n}\n\n/**\n * Wrapper component to control a menu. It does not render anything, only providing the state\n * management for the menu components inside it.\n */\nfunction Menu({ children, onItemSelect, ...props }: MenuProps) {\n    const [anchorRect, setAnchorRect] = React.useState<{ x: number; y: number } | null>(null)\n    const getAnchorRect = React.useMemo(() => (anchorRect ? () => anchorRect : null), [anchorRect])\n    const menuStore = useMenuStore({ focusLoop: true, ...props })\n\n    const value: MenuContextState = React.useMemo(\n        () => ({ menuStore, handleItemSelect: onItemSelect, getAnchorRect, setAnchorRect }),\n        [menuStore, onItemSelect, getAnchorRect, setAnchorRect],\n    )\n\n    return <MenuContext.Provider value={value}>{children}</MenuContext.Provider>\n}\n\n//\n// MenuButton\n//\n\ninterface MenuButtonProps\n    extends Omit<AriakitMenuButtonProps, 'store' | 'className' | 'as'>,\n        ObfuscatedClassName {}\n\n/**\n * A button to toggle a dropdown menu open or closed.\n */\nconst MenuButton = React.forwardRef<HTMLButtonElement, MenuButtonProps>(function MenuButton(\n    { exceptionallySetClassName, ...props },\n    ref,\n) {\n    const { menuStore } = React.useContext(MenuContext)\n    if (!menuStore) {\n        throw new Error('MenuButton must be wrapped in <Menu/>')\n    }\n    return (\n        <AriakitMenuButton\n            {...props}\n            store={menuStore}\n            ref={ref}\n            className={classNames('reactist_menubutton', exceptionallySetClassName)}\n        />\n    )\n})\n\n//\n// ContextMenuTrigger\n//\n\ninterface ContextMenuTriggerProps\n    extends ObfuscatedClassName,\n        React.HTMLAttributes<HTMLDivElement>,\n        Pick<RoleProps, 'render'> {}\n\nconst ContextMenuTrigger = React.forwardRef<HTMLDivElement, ContextMenuTriggerProps>(\n    function ContextMenuTrigger({ render, ...props }, ref) {\n        const { setAnchorRect, menuStore } = React.useContext(MenuContext)\n        if (!menuStore) {\n            throw new Error('ContextMenuTrigger must be wrapped in <Menu/>')\n        }\n\n        const handleContextMenu = React.useCallback(\n            function handleContextMenu(event: React.MouseEvent) {\n                event.preventDefault()\n                setAnchorRect({ x: event.clientX, y: event.clientY })\n                menuStore.show()\n            },\n            [setAnchorRect, menuStore],\n        )\n\n        const isOpen = menuStore.useState('open')\n        React.useEffect(() => {\n            if (!isOpen) setAnchorRect(null)\n        }, [isOpen, setAnchorRect])\n\n        return <Role.div {...props} onContextMenu={handleContextMenu} ref={ref} render={render} />\n    },\n)\n\n//\n// MenuList\n//\n\ninterface MenuListProps\n    extends Omit<AriakitMenuProps, 'store' | 'className'>,\n        ObfuscatedClassName {}\n\n/**\n * The dropdown menu itself, containing a list of menu items.\n */\nconst MenuList = React.forwardRef<HTMLDivElement, MenuListProps>(function MenuList(\n    { exceptionallySetClassName, modal = true, ...props },\n    ref,\n) {\n    const { menuStore, getAnchorRect } = React.useContext(MenuContext)\n    if (!menuStore) {\n        throw new Error('MenuList must be wrapped in <Menu/>')\n    }\n\n    const isOpen = menuStore.useState('open')\n\n    return isOpen ? (\n        <Portal preserveTabOrder>\n            <AriakitMenu\n                {...props}\n                store={menuStore}\n                gutter={8}\n                shift={4}\n                ref={ref}\n                className={classNames('reactist_menulist', exceptionallySetClassName)}\n                getAnchorRect={getAnchorRect ?? undefined}\n                modal={modal}\n            />\n        </Portal>\n    ) : null\n})\n\n//\n// MenuItem\n//\n\ninterface MenuItemProps extends AriakitMenuItemProps, ObfuscatedClassName {\n    /**\n     * An optional value given to this menu item. It is passed on to the parent `Menu`'s\n     * `onItemSelect` when you provide that instead of (or alongside) providing individual\n     * `onSelect` callbacks to each menu item.\n     */\n    value?: string\n\n    /**\n     * When `true` the menu item is disabled and won't be selectable or be part of the keyboard\n     * navigation across the menu options.\n     *\n     * @default true\n     */\n    disabled?: boolean\n\n    /**\n     * When `true` the menu will close when the menu item is selected, in addition to performing the\n     * action that the menu item is set out to do.\n     *\n     * Set this to `false` to make sure that a given menu item does not auto-closes the menu when\n     * selected. This should be the exception and not the norm, as the default is to auto-close.\n     *\n     * @default true\n     */\n    hideOnSelect?: boolean\n\n    /**\n     * The action to perform when the menu item is selected.\n     *\n     * If you return `false` from this function, the menu will not auto-close when this menu item\n     * is selected. Though you should use `hideOnSelect` for this purpose, this allows you to\n     * achieve the same effect conditionally and dynamically deciding at run time.\n     */\n    onSelect?: () => unknown\n\n    /**\n     * The event handler called when the menu item is clicked.\n     *\n     * This is similar to `onSelect`, but a bit different. You can certainly use it to trigger the\n     * action that the menu item represents. But in general you should prefer `onSelect` for that.\n     *\n     * The main use for this handler is to get access to the click event. This can be used, for\n     * example, to call `event.preventDefault()`, which will effectively prevent the rest of the\n     * consequences of the click, including preventing `onSelect` from being called. In particular,\n     * this is useful in menu items that are links, and you want the click to not trigger navigation\n     * under some circumstances.\n     */\n    onClick?: (event: React.MouseEvent) => void\n}\n\n/**\n * A menu item inside a menu list. It can be selected by the user, triggering the `onSelect`\n * callback.\n */\nconst MenuItem = React.forwardRef<HTMLDivElement, MenuItemProps>(function MenuItem(\n    {\n        value,\n        children,\n        onSelect,\n        hideOnSelect = true,\n        onClick,\n        exceptionallySetClassName,\n        ...props\n    },\n    ref,\n) {\n    const { handleItemSelect, menuStore } = React.useContext(MenuContext)\n    if (!menuStore) {\n        throw new Error('MenuItem must be wrapped in <Menu/>')\n    }\n\n    const { hide } = menuStore\n    const handleClick = React.useCallback(\n        function handleClick(event: React.MouseEvent) {\n            onClick?.(event)\n            const onSelectResult: unknown =\n                onSelect && !event.defaultPrevented ? onSelect() : undefined\n            const shouldClose = onSelectResult !== false && hideOnSelect\n            handleItemSelect?.(value)\n            if (shouldClose) hide()\n        },\n        [onSelect, onClick, handleItemSelect, hideOnSelect, hide, value],\n    )\n\n    return (\n        <AriakitMenuItem\n            {...props}\n            store={menuStore}\n            ref={ref}\n            onClick={handleClick}\n            className={exceptionallySetClassName}\n            hideOnClick={false}\n        >\n            {children}\n        </AriakitMenuItem>\n    )\n})\n\n//\n// SubMenu\n//\n\ntype SubMenuProps = Pick<MenuProps, 'children' | 'onItemSelect'>\n\n/**\n * This component can be rendered alongside other `MenuItem` inside a `MenuList` in order to have\n * a sub-menu.\n *\n * Its children are expected to have the structure of a first level menu (a `MenuButton` and a\n * `MenuList`).\n *\n * ```jsx\n * <MenuItem label=\"Edit profile\" />\n * <SubMenu>\n *   <MenuButton>More options</MenuButton>\n *   <MenuList>\n *     <MenuItem label=\"Preferences\" />\n *     <MenuItem label=\"Sign out\" />\n *   </MenuList>\n * </SubMenu>\n * ```\n *\n * The `MenuButton` will become a menu item in the current menu items list, and it will lead to\n * opening a sub-menu with the menu items list below it.\n */\nconst SubMenu = React.forwardRef<HTMLDivElement, SubMenuProps>(function SubMenu(\n    { children, onItemSelect },\n    ref,\n) {\n    const { handleItemSelect: parentMenuItemSelect, menuStore } = React.useContext(MenuContext)\n    if (!menuStore) {\n        throw new Error('SubMenu must be wrapped in <Menu/>')\n    }\n\n    const { hide: parentMenuHide } = menuStore\n    const handleSubItemSelect = React.useCallback(\n        function handleSubItemSelect(value: string | null | undefined) {\n            onItemSelect?.(value)\n            parentMenuItemSelect?.(value)\n            parentMenuHide()\n        },\n        [parentMenuHide, parentMenuItemSelect, onItemSelect],\n    )\n\n    const [button, list] = React.Children.toArray(children)\n    const buttonElement = button as React.ReactElement<MenuButtonProps>\n\n    return (\n        <Menu onItemSelect={handleSubItemSelect}>\n            <AriakitMenuItem store={menuStore} ref={ref} hideOnClick={false} render={buttonElement}>\n                {buttonElement.props.children}\n            </AriakitMenuItem>\n            {list}\n        </Menu>\n    )\n})\n\n//\n// MenuGroup\n//\n\ninterface MenuGroupProps\n    extends Omit<React.HTMLAttributes<HTMLDivElement>, 'className'>,\n        ObfuscatedClassName {\n    /**\n     * A label to be shown visually and also used to semantically label the group.\n     */\n    label: string\n}\n\n/**\n * A way to semantically group some menu items.\n *\n * This group does not add any visual separator. You can do that yourself adding `<hr />` elements\n * before and/or after the group if you so wish.\n */\nconst MenuGroup = React.forwardRef<HTMLDivElement, MenuGroupProps>(function MenuGroup(\n    { label, children, exceptionallySetClassName, ...props },\n    ref,\n) {\n    const { menuStore } = React.useContext(MenuContext)\n    if (!menuStore) {\n        throw new Error('MenuGroup must be wrapped in <Menu/>')\n    }\n\n    return (\n        <AriakitMenuGroup\n            {...props}\n            ref={ref}\n            store={menuStore}\n            className={exceptionallySetClassName}\n        >\n            {label ? (\n                <div role=\"presentation\" className=\"reactist_menugroup__label\">\n                    {label}\n                </div>\n            ) : null}\n            {children}\n        </AriakitMenuGroup>\n    )\n})\n\nexport { ContextMenuTrigger, Menu, MenuButton, MenuList, MenuItem, SubMenu, MenuGroup }\nexport type { MenuButtonProps, MenuListProps, MenuItemProps, MenuGroupProps }\n"],"names":["MenuContext","React","createContext","menuStore","handleItemSelect","getAnchorRect","setAnchorRect","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","_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","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 ? '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/password-field/password-field.d.ts

@@ -3,6 +3,7 @@ import { TextFieldProps } from '../text-field';
 import type { BaseFieldVariantProps } from '../base-field';
 interface PasswordFieldProps extends Omit<TextFieldProps, 'type' | 'startSlot' | 'endSlot'>, BaseFieldVariantProps {
     togglePasswordLabel?: string;
+    endSlot?: React.ReactElement | string | number;
 }
 declare const PasswordField: React.ForwardRefExoticComponent<Omit<PasswordFieldProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
 export { PasswordField };

package/lib/password-field/password-field.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_rollupPluginBabelHelpers.js"),r=require("react"),t=require("../icons/password-visible-icon.js"),o=require("../icons/password-hidden-icon.js"),i=require("../text-field/text-field.js"),n=require("../button/button.js");function s(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var o=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,o.get?o:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,r}var a=s(r);const l=["togglePasswordLabel"];exports.PasswordField=a.forwardRef((function(r,s){let{togglePasswordLabel:c="Toggle password visibility"}=r,u=e.objectWithoutProperties(r,l);const[d,b]=a.useState(!1),f=d?t.PasswordVisibleIcon:o.PasswordHiddenIcon;return a.createElement(i.TextField,e.objectSpread2(e.objectSpread2({},u),{},{ref:s,type:d?"text":"password",endSlot:a.createElement(n.IconButton,{variant:"quaternary",icon:a.createElement(f,{"aria-hidden":!0}),"aria-label":c,onClick:()=>b(e=>!e)})}))}));
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_rollupPluginBabelHelpers.js"),t=require("react"),r=require("../icons/password-visible-icon.js"),o=require("../icons/password-hidden-icon.js"),n=require("../text-field/text-field.js"),i=require("../button/button.js");function a(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var o=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,o.get?o:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,t}var s=a(t);const l=["togglePasswordLabel","endSlot"];exports.PasswordField=s.forwardRef((function(t,a){let{togglePasswordLabel:c="Toggle password visibility",endSlot:u}=t,d=e.objectWithoutProperties(t,l);const[b,f]=s.useState(!1),p=b?r.PasswordVisibleIcon:o.PasswordHiddenIcon;return s.createElement(n.TextField,e.objectSpread2(e.objectSpread2({},d),{},{ref:a,type:b?"text":"password",endSlot:s.createElement(s.Fragment,null,u,s.createElement(i.IconButton,{variant:"quaternary",icon:s.createElement(p,{"aria-hidden":!0}),"aria-label":c,onClick:()=>f(e=>!e)}))}))}));
 //# sourceMappingURL=password-field.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"password-field.js","sources":["../../src/password-field/password-field.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { PasswordVisibleIcon } from '../icons/password-visible-icon'\nimport { PasswordHiddenIcon } from '../icons/password-hidden-icon'\n\nimport { TextField, TextFieldProps } from '../text-field'\nimport { IconButton } from '../button'\n\nimport type { BaseFieldVariantProps } from '../base-field'\n\ninterface PasswordFieldProps\n    extends Omit<TextFieldProps, 'type' | 'startSlot' | 'endSlot'>,\n        BaseFieldVariantProps {\n    togglePasswordLabel?: string\n}\n\nconst PasswordField = React.forwardRef<HTMLInputElement, PasswordFieldProps>(function PasswordField(\n    { togglePasswordLabel = 'Toggle password visibility', ...props },\n    ref,\n) {\n    const [isPasswordVisible, setPasswordVisible] = React.useState(false)\n    const Icon = isPasswordVisible ? PasswordVisibleIcon : PasswordHiddenIcon\n    return (\n        <TextField\n            {...props}\n            ref={ref}\n            // @ts-expect-error TextField does not support type=\"password\", so we override the type check here\n            type={isPasswordVisible ? 'text' : 'password'}\n            endSlot={\n                <IconButton\n                    variant=\"quaternary\"\n                    icon={<Icon aria-hidden />}\n                    aria-label={togglePasswordLabel}\n                    onClick={() => setPasswordVisible((v) => !v)}\n                />\n            }\n        />\n    )\n})\n\nexport { PasswordField }\nexport type { PasswordFieldProps }\n"],"names":["React","forwardRef","ref","togglePasswordLabel","_ref","props","_objectWithoutProperties","objectWithoutProperties","_excluded","isPasswordVisible","setPasswordVisible","useState","Icon","PasswordVisibleIcon","PasswordHiddenIcon","TextField","type","endSlot","IconButton","variant","icon","createElement","aria-hidden","aria-label","onClick","v"],"mappings":"yoBAgBsBA,EAAMC,YAAiD,SAEzEC,EAAAA,GAAG,IADHC,oBAAEA,EAAsB,8BACrBC,EADsDC,EACtDC,EAAAC,wBAAAH,EAAAI,GAEH,MAAOC,EAAmBC,GAAsBV,EAAMW,UAAS,GACzDC,EAAOH,EAAoBI,EAAHA,oBAAyBC,qBACvD,OACId,gBAACe,+CACOV,GADR,GAAA,CAEIH,IAAKA,EAELc,KAAMP,EAAoB,OAAS,WACnCQ,QACIjB,gBAACkB,aAAU,CACPC,QAAQ,aACRC,KAAMpB,EAAAqB,cAACT,EAAmB,CAAAU,eAAA,IAAAC,aACdpB,EACZqB,QAAS,IAAMd,EAAoBe,IAAOA"}
+{"version":3,"file":"password-field.js","sources":["../../src/password-field/password-field.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { PasswordVisibleIcon } from '../icons/password-visible-icon'\nimport { PasswordHiddenIcon } from '../icons/password-hidden-icon'\n\nimport { TextField, TextFieldProps } from '../text-field'\nimport { IconButton } from '../button'\n\nimport type { BaseFieldVariantProps } from '../base-field'\n\ninterface PasswordFieldProps\n    extends Omit<TextFieldProps, 'type' | 'startSlot' | 'endSlot'>,\n        BaseFieldVariantProps {\n    togglePasswordLabel?: string\n    endSlot?: React.ReactElement | string | number\n}\n\nconst PasswordField = React.forwardRef<HTMLInputElement, PasswordFieldProps>(function PasswordField(\n    { togglePasswordLabel = 'Toggle password visibility', endSlot, ...props },\n    ref,\n) {\n    const [isPasswordVisible, setPasswordVisible] = React.useState(false)\n    const Icon = isPasswordVisible ? PasswordVisibleIcon : PasswordHiddenIcon\n    return (\n        <TextField\n            {...props}\n            ref={ref}\n            // @ts-expect-error TextField does not support type=\"password\", so we override the type check here\n            type={isPasswordVisible ? 'text' : 'password'}\n            endSlot={\n                <>\n                    {endSlot}\n                    <IconButton\n                        variant=\"quaternary\"\n                        icon={<Icon aria-hidden />}\n                        aria-label={togglePasswordLabel}\n                        onClick={() => setPasswordVisible((v) => !v)}\n                    />\n                </>\n            }\n        />\n    )\n})\n\nexport { PasswordField }\nexport type { PasswordFieldProps }\n"],"names":["React","forwardRef","ref","togglePasswordLabel","endSlot","_ref","props","_objectWithoutProperties","objectWithoutProperties","_excluded","isPasswordVisible","setPasswordVisible","useState","Icon","PasswordVisibleIcon","PasswordHiddenIcon","TextField","type","createElement","Fragment","IconButton","variant","icon","aria-hidden","aria-label","onClick","v"],"mappings":"mpBAiBsBA,EAAMC,YAAiD,SAEzEC,EAAAA,GAAG,IADHC,oBAAEA,EAAsB,6BAAxBC,QAAsDA,GACnDC,EAD+DC,EAC/DC,EAAAC,wBAAAH,EAAAI,GAEH,MAAOC,EAAmBC,GAAsBX,EAAMY,UAAS,GACzDC,EAAOH,EAAoBI,EAAHA,oBAAyBC,qBACvD,OACIf,gBAACgB,+CACOV,GADR,GAAA,CAEIJ,IAAKA,EAELe,KAAMP,EAAoB,OAAS,WACnCN,QACIJ,EAAAkB,cAAAlB,EAAAmB,SAAA,KACKf,EACDJ,EAAAkB,cAACE,aAAU,CACPC,QAAQ,aACRC,KAAMtB,EAAAkB,cAACL,EAAI,CAAAU,eAAA,IACCC,aAAArB,EACZsB,QAAS,IAAMd,EAAoBe,IAAOA"}

package/lib/select-field/select-field.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_rollupPluginBabelHelpers.js"),r=require("react"),t=require("../base-field/base-field.js"),a=require("../box/box.js"),l=require("./select-field.module.css.js");function i(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 d=i(r);const n=["variant","id","label","secondaryLabel","auxiliaryLabel","hint","message","tone","maxWidth","children","hidden","aria-describedby"];function c(r){return d.createElement("svg",e.objectSpread2({width:"16",height:"16",fill:"none",xmlns:"http://www.w3.org/2000/svg"},r),d.createElement("path",{d:"M11.646 5.646a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 1 1 .708-.708L8 9.293l3.646-3.647z",fill:"currentColor"}))}exports.SelectField=d.forwardRef((function(r,i){let{variant:o="default",id:s,label:u,secondaryLabel:b,auxiliaryLabel:f,hint:h,message:p,tone:m,maxWidth:j,children:y,hidden:x,"aria-describedby":g}=r,v=e.objectWithoutProperties(r,n);return d.createElement(t.BaseField,{variant:o,id:s,label:u,secondaryLabel:b,auxiliaryLabel:f,hint:h,message:p,tone:m,maxWidth:j,hidden:x,"aria-describedby":g},r=>d.createElement(a.Box,{"data-testid":"select-wrapper",className:[l.default.selectWrapper,"error"===m?l.default.error:null,"bordered"===o?l.default.bordered:null]},d.createElement("select",e.objectSpread2(e.objectSpread2(e.objectSpread2({},v),r),{},{ref:i}),y),d.createElement(c,{"aria-hidden":!0})))}));
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_rollupPluginBabelHelpers.js"),r=require("react"),t=require("../base-field/base-field.js"),a=require("../box/box.js"),l=require("./select-field.module.css.js");function i(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 n=i(r);const d=["variant","id","label","value","auxiliaryLabel","message","tone","maxWidth","children","hidden","aria-describedby","onChange"];function o(r){return n.createElement("svg",e.objectSpread2({width:"16",height:"16",fill:"none",xmlns:"http://www.w3.org/2000/svg"},r),n.createElement("path",{d:"M11.646 5.646a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 1 1 .708-.708L8 9.293l3.646-3.647z",fill:"currentColor"}))}exports.SelectField=n.forwardRef((function(r,i){let{variant:u="default",id:c,label:s,value:b,auxiliaryLabel:f,message:h,tone:p,maxWidth:m,children:g,hidden:j,"aria-describedby":v,onChange:x}=r,y=e.objectWithoutProperties(r,d);return n.createElement(t.BaseField,{variant:u,id:c,label:s,value:b,auxiliaryLabel:f,message:h,tone:p,maxWidth:m,hidden:j,"aria-describedby":v},r=>n.createElement(a.Box,{"data-testid":"select-wrapper",className:[l.default.selectWrapper,"error"===p?l.default.error:null,"bordered"===u?l.default.bordered:null]},n.createElement("select",e.objectSpread2(e.objectSpread2(e.objectSpread2({},y),r),{},{ref:i,onChange:e=>{null==x||x(e)}}),g),n.createElement(o,{"aria-hidden":!0})))}));
 //# sourceMappingURL=select-field.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"select-field.js","sources":["../../src/select-field/select-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { BaseField, BaseFieldVariantProps, FieldComponentProps } from '../base-field'\nimport { Box } from '../box'\nimport styles from './select-field.module.css'\n\ninterface SelectFieldProps extends FieldComponentProps<HTMLSelectElement>, BaseFieldVariantProps {}\n\nconst SelectField = React.forwardRef<HTMLSelectElement, SelectFieldProps>(function SelectField(\n    {\n        variant = 'default',\n        id,\n        label,\n        secondaryLabel,\n        auxiliaryLabel,\n        hint,\n        message,\n        tone,\n        maxWidth,\n        children,\n        hidden,\n        'aria-describedby': ariaDescribedBy,\n        ...props\n    },\n    ref,\n) {\n    return (\n        <BaseField\n            variant={variant}\n            id={id}\n            label={label}\n            secondaryLabel={secondaryLabel}\n            auxiliaryLabel={auxiliaryLabel}\n            hint={hint}\n            message={message}\n            tone={tone}\n            maxWidth={maxWidth}\n            hidden={hidden}\n            aria-describedby={ariaDescribedBy}\n        >\n            {(extraProps) => (\n                <Box\n                    data-testid=\"select-wrapper\"\n                    className={[\n                        styles.selectWrapper,\n                        tone === 'error' ? styles.error : null,\n                        variant === 'bordered' ? styles.bordered : null,\n                    ]}\n                >\n                    <select {...props} {...extraProps} ref={ref}>\n                        {children}\n                    </select>\n                    <SelectChevron aria-hidden />\n                </Box>\n            )}\n        </BaseField>\n    )\n})\n\nfunction SelectChevron(props: JSX.IntrinsicElements['svg']) {\n    return (\n        <svg width=\"16\" height=\"16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n            <path\n                d=\"M11.646 5.646a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 1 1 .708-.708L8 9.293l3.646-3.647z\"\n                fill=\"currentColor\"\n            />\n        </svg>\n    )\n}\n\nexport { SelectField }\nexport type { SelectFieldProps }\n"],"names":["SelectChevron","props","React","createElement","_objectSpread","width","height","fill","xmlns","d","forwardRef","ref","variant","id","label","secondaryLabel","auxiliaryLabel","hint","message","tone","maxWidth","children","hidden","aria-describedby","ariaDescribedBy","_ref","_objectWithoutProperties","objectWithoutProperties","_excluded","BaseField","extraProps","Box","data-testid","className","styles","selectWrapper","error","bordered","objectSpread2","aria-hidden"],"mappings":"uqBA0DA,SAASA,EAAcC,GACnB,OACIC,EAAKC,cAAA,MAALC,gBAAA,CAAKC,MAAM,KAAKC,OAAO,KAAKC,KAAK,OAAOC,MAAM,8BAAiCP,GAC3EC,EACIC,cAAA,OAAA,CAAAM,EAAE,0GACFF,KAAK,sCAxDDL,EAAMQ,YAAgD,SAgBtEC,EAAAA,GAAG,IAfHC,QACIA,EAAU,UADdC,GAEIA,EAFJC,MAGIA,EAHJC,eAIIA,EAJJC,eAKIA,EALJC,KAMIA,EANJC,QAOIA,EAPJC,KAQIA,EARJC,SASIA,EATJC,SAUIA,EAVJC,OAWIA,EACAC,mBAAoBC,GAGrBC,EAFIxB,EAEJyB,EAAAC,wBAAAF,EAAAG,GAEH,OACI1B,EAACC,cAAA0B,YACG,CAAAjB,QAASA,EACTC,GAAIA,EACJC,MAAOA,EACPC,eAAgBA,EAChBC,eAAgBA,EAChBC,KAAMA,EACNC,QAASA,EACTC,KAAMA,EACNC,SAAUA,EACVE,OAAQA,EAAMC,mBACIC,GAEhBM,GACE5B,EAACC,cAAA4B,MACe,CAAAC,cAAA,iBACZC,UAAW,CACPC,EAAM,QAACC,cACE,UAAThB,EAAmBe,EAAM,QAACE,MAAQ,KACtB,aAAZxB,EAAyBsB,EAAAA,QAAOG,SAAW,OAG/CnC,EAAYC,cAAA,SAAZC,EAAAkC,cAAAlC,EAAAkC,cAAAlC,gBAAA,GAAYH,GAAW6B,GAAvB,GAAA,CAAmCnB,IAAKA,IACnCU,GAELnB,EAAAC,cAACH,EAA4B,CAAAuC,eAAA"}
+{"version":3,"file":"select-field.js","sources":["../../src/select-field/select-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { BaseField, BaseFieldVariantProps, FieldComponentProps } from '../base-field'\nimport { Box } from '../box'\nimport styles from './select-field.module.css'\n\ninterface SelectFieldProps extends FieldComponentProps<HTMLSelectElement>, BaseFieldVariantProps {}\n\nconst SelectField = React.forwardRef<HTMLSelectElement, SelectFieldProps>(function SelectField(\n    {\n        variant = 'default',\n        id,\n        label,\n        value,\n        auxiliaryLabel,\n        message,\n        tone,\n        maxWidth,\n        children,\n        hidden,\n        'aria-describedby': ariaDescribedBy,\n        onChange: originalOnChange,\n        ...props\n    },\n    ref,\n) {\n    return (\n        <BaseField\n            variant={variant}\n            id={id}\n            label={label}\n            value={value}\n            auxiliaryLabel={auxiliaryLabel}\n            message={message}\n            tone={tone}\n            maxWidth={maxWidth}\n            hidden={hidden}\n            aria-describedby={ariaDescribedBy}\n        >\n            {(extraProps) => (\n                <Box\n                    data-testid=\"select-wrapper\"\n                    className={[\n                        styles.selectWrapper,\n                        tone === 'error' ? styles.error : null,\n                        variant === 'bordered' ? styles.bordered : null,\n                    ]}\n                >\n                    <select\n                        {...props}\n                        {...extraProps}\n                        ref={ref}\n                        onChange={(event) => {\n                            originalOnChange?.(event)\n                        }}\n                    >\n                        {children}\n                    </select>\n                    <SelectChevron aria-hidden />\n                </Box>\n            )}\n        </BaseField>\n    )\n})\n\nfunction SelectChevron(props: JSX.IntrinsicElements['svg']) {\n    return (\n        <svg width=\"16\" height=\"16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n            <path\n                d=\"M11.646 5.646a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 1 1 .708-.708L8 9.293l3.646-3.647z\"\n                fill=\"currentColor\"\n            />\n        </svg>\n    )\n}\n\nexport { SelectField }\nexport type { SelectFieldProps }\n"],"names":["SelectChevron","props","React","createElement","_objectSpread","width","height","fill","xmlns","d","forwardRef","ref","variant","id","label","value","auxiliaryLabel","message","tone","maxWidth","children","hidden","aria-describedby","ariaDescribedBy","onChange","originalOnChange","_ref","_objectWithoutProperties","objectWithoutProperties","_excluded","BaseField","extraProps","Box","data-testid","className","styles","selectWrapper","error","bordered","objectSpread2","event","aria-hidden"],"mappings":"kqBAgEA,SAASA,EAAcC,GACnB,OACIC,EAAKC,cAAA,MAALC,gBAAA,CAAKC,MAAM,KAAKC,OAAO,KAAKC,KAAK,OAAOC,MAAM,8BAAiCP,GAC3EC,EACIC,cAAA,OAAA,CAAAM,EAAE,0GACFF,KAAK,sCA9DDL,EAAMQ,YAAgD,SAgBtEC,EAAAA,GAAG,IAfHC,QACIA,EAAU,UADdC,GAEIA,EAFJC,MAGIA,EAHJC,MAIIA,EAJJC,eAKIA,EALJC,QAMIA,EANJC,KAOIA,EAPJC,SAQIA,EARJC,SASIA,EATJC,OAUIA,EACAC,mBAAoBC,EACpBC,SAAUC,GAGXC,EAFIzB,EAEJ0B,EAAAC,wBAAAF,EAAAG,GAEH,OACI3B,EAACC,cAAA2B,YACG,CAAAlB,QAASA,EACTC,GAAIA,EACJC,MAAOA,EACPC,MAAOA,EACPC,eAAgBA,EAChBC,QAASA,EACTC,KAAMA,EACNC,SAAUA,EACVE,OAAQA,EACUC,mBAAAC,GAEhBQ,GACE7B,EAACC,cAAA6B,MACe,CAAAC,cAAA,iBACZC,UAAW,CACPC,EAAM,QAACC,cACE,UAATlB,EAAmBiB,EAAM,QAACE,MAAQ,KACtB,aAAZzB,EAAyBuB,EAAAA,QAAOG,SAAW,OAG/CpC,EAAAC,cAAA,SAAAC,EAAAmC,cAAAnC,EAAAmC,cAAAnC,gBAAA,GACQH,GACA8B,GAFR,GAAA,CAGIpB,IAAKA,EACLa,SAAWgB,IACP,MAAAf,GAAAA,EAAmBe,MAGtBpB,GAELlB,EAAAC,cAACH,EAA4B,CAAAyC,eAAA"}

package/lib/switch-field/switch-field.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { FieldComponentProps } from '../base-field';
-interface SwitchFieldProps extends Omit<FieldComponentProps<HTMLInputElement>, 'type' | 'secondaryLabel' | 'auxiliaryLabel' | 'maxWidth' | 'aria-describedby' | 'aria-label' | 'aria-labelledby'> {
+interface SwitchFieldProps extends Omit<FieldComponentProps<HTMLInputElement>, 'type' | 'auxiliaryLabel' | 'maxWidth' | 'aria-describedby' | 'aria-label' | 'aria-labelledby'> {
     /**
      * Identifies the element (or elements) that describes the switch for assistive technologies.
      */

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"),i=require("../hidden-visually/hidden-visually.js"),n=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","hint","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,hint:y,disabled:m=!1,hidden:j,defaultChecked:v,id:k,"aria-describedby":g,"aria-label":x,"aria-labelledby":q,onChange:E}=l,S=e.objectWithoutProperties(l,o);const B=d.useId(k),C=d.useId(),O=null!=g?g:y?C:void 0,P=null!=x?x:void 0,_=null!=q?q:void 0,[w,N]=c.useState(!1),[F,H]=c.useState(null!=(b=null!=(f=S.checked)?f:v)&&b),I=null!=(h=S.checked)?h:F;return c.createElement(t.Stack,{space:"small",hidden:j},c.createElement(a.Box,{className:[u.default.container,m?u.default.disabled:null,I?u.default.checked:null,w?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(i.HiddenVisually,null,c.createElement("input",e.objectSpread2(e.objectSpread2({},S),{},{id:B,type:"checkbox",disabled:m,"aria-describedby":O,"aria-label":P,"aria-labelledby":_,ref:s,checked:I,onChange:e=>{null==E||E(e),e.defaultPrevented||H(e.currentTarget.checked)},onBlur:e=>{N(!1),null==S||null==S.onBlur||S.onBlur(e)},onKeyUp:e=>{N(!0),null==S||null==S.onKeyUp||S.onKeyUp(e)}}))),c.createElement("span",{className:u.default.handle})),c.createElement(r.Text,{exceptionallySetClassName:u.default.label},p)),y?c.createElement(n.FieldHint,{id:C},y):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"),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)}));
 //# 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, FieldHint } 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        | 'secondaryLabel'\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        hint,\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 hintId = useId()\n\n    const ariaDescribedBy = originalAriaDescribedBy ?? (hint ? hintId : 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            {hint ? <FieldHint id={hintId}>{hint}</FieldHint> : null}\n        </Stack>\n    )\n})\n\nexport { SwitchField }\nexport type { SwitchFieldProps }\n"],"names":["React","forwardRef","ref","_ref2","_props$checked","_props$checked2","label","hint","disabled","hidden","defaultChecked","id","originalId","aria-describedby","originalAriaDescribedBy","aria-label","originalAriaLabel","aria-labelledby","originalAriaLabelledby","onChange","_ref","props","_objectWithoutProperties","objectWithoutProperties","_excluded","useId","hintId","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","FieldHint"],"mappings":"q0BAoCoBA,EAAMC,YAA+C,SAcrEC,EAAAA,GAAG,IAAAC,EAAAC,EAAAC,EAAA,IAbHC,MACIA,EADJC,KAEIA,EAFJC,SAGIA,GAAW,EAHfC,OAIIA,EAJJC,eAKIA,EACAC,GAAIC,EACJC,mBAAoBC,EACpBC,aAAcC,EACdC,kBAAmBC,EATvBC,SAUIA,GAGDC,EAFIC,EAEJC,EAAAC,wBAAAH,EAAAI,GAEH,MAAMb,EAAKc,QAAMb,GACXc,EAASD,EAAAA,QAETE,EAAkBb,MAAAA,EAAAA,EAA4BP,EAAOmB,OAASE,EAC9DC,EAAYb,MAAAA,EAAAA,OAAqBY,EACjCE,EAAiBZ,MAAAA,EAAAA,OAA0BU,GAE1CG,EAAYC,GAAiBhC,EAAMiC,UAAS,IAC5CC,EAAcC,GAAcnC,EAAMiC,SAAN,OAAeZ,EAAf,OAAeA,EAAAA,EAAMe,SAArBhC,EAAgCM,IAAhCP,GAC7BkC,SAAYhB,EAAAA,EAAMe,WAAWF,EAEnC,OACIlC,EAACsC,cAAAC,QAAM,CAAAC,MAAM,QAAQ/B,OAAQA,GACzBT,EAACsC,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,UAEX/C,EAACsC,cAAAG,MACG,CAAAO,SAAS,WACTF,QAAQ,cACRG,SAAS,UACTC,YAAY,QACZC,WAAY,EACZT,UAAWC,EAAM,QAACS,QAElBpD,EAAAsC,cAACe,iBAAc,KACXrD,EAAAsC,cAAA,2CACQjB,GADR,GAAA,CAEIV,GAAIA,EACJ2C,KAAK,WACL9C,SAAUA,qBACQmB,EAAeZ,aACrBc,EAASZ,kBACJa,EACjB5B,IAAKA,EACLkC,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,QAI7BvD,EAAAsC,cAAA,OAAA,CAAMI,UAAWC,EAAM,QAACiB,UAE5B5D,EAACsC,cAAAuB,OAAK,CAAAC,0BAA2BnB,EAAM,QAACrC,OAAQA,IAEnDC,EAAOP,gBAAC+D,EAAAA,UAAS,CAACpD,GAAIe,GAASnB,GAAoB"}
+{"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"}

package/lib/text-area/text-area.d.ts

@@ -15,9 +15,17 @@ interface TextAreaProps extends FieldComponentProps<HTMLTextAreaElement>, BaseFi
      */
     rows?: number;
     /**
-     * If `true`, the textarea will auto-expand or shrink vertically to fit the content.
+     * If `true`, the textarea will be automatically resized to fit the content, and the ability to
+     * manually resize the textarea will be disabled.
      */
     autoExpand?: boolean;
+    /**
+     * If `true`, the ability to manually resize the textarea will be disabled.
+     *
+     * When `autoExpand` is true, this property serves no purpose, because the ability to manually
+     * resize the textarea is always disabled when `autoExpand` is true.
+     */
+    disableResize?: boolean;
 }
 declare const TextArea: React.ForwardRefExoticComponent<Omit<TextAreaProps, "ref"> & React.RefAttributes<HTMLTextAreaElement>>;
 export { TextArea };

package/lib/text-area/text-area.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_rollupPluginBabelHelpers.js"),r=require("react"),a=require("use-callback-ref"),t=require("../base-field/base-field.js"),n=require("../box/box.js"),i=require("./text-area.module.css.js");function l(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(a){if("default"!==a){var t=Object.getOwnPropertyDescriptor(e,a);Object.defineProperty(r,a,t.get?t:{enumerable:!0,get:function(){return e[a]}})}})),r.default=e,r}var u=l(r);const d=["variant","id","label","secondaryLabel","auxiliaryLabel","hint","message","tone","maxWidth","hidden","aria-describedby","rows","autoExpand"];exports.TextArea=u.forwardRef((function(r,l){let{variant:s="default",id:o,label:c,secondaryLabel:f,auxiliaryLabel:b,hint:p,message:x,tone:m,maxWidth:v,hidden:y,"aria-describedby":j,rows:h,autoExpand:E=!1}=r,g=e.objectWithoutProperties(r,d);const L=u.useRef(null),q=u.useRef(null),w=a.useMergeRefs([l,q]);return u.useEffect((function(){const e=L.current;function r(r){e&&(e.dataset.replicatedValue=r)}function a(e){r(e.currentTarget.value)}const t=q.current;if(t&&E)return r(t.value),t.addEventListener("input",a),()=>t.removeEventListener("input",a)}),[E]),u.createElement(t.BaseField,{variant:s,id:o,label:c,secondaryLabel:f,auxiliaryLabel:b,hint:p,message:x,tone:m,hidden:y,"aria-describedby":j,className:[i.default.textAreaContainer,"error"===m?i.default.error:null,"bordered"===s?i.default.bordered:null],maxWidth:v},r=>u.createElement(n.Box,{width:"full",display:"flex",className:i.default.innerContainer,ref:L},u.createElement("textarea",e.objectSpread2(e.objectSpread2(e.objectSpread2({},g),r),{},{ref:w,rows:h,className:E?i.default.autoExpand:void 0}))))}));
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_rollupPluginBabelHelpers.js"),a=require("react"),t=require("classnames"),r=require("use-callback-ref"),n=require("../base-field/base-field.js"),l=require("../box/box.js"),u=require("./text-area.module.css.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function s(e){if(e&&e.__esModule)return e;var a=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var r=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(a,t,r.get?r:{enumerable:!0,get:function(){return e[t]}})}})),a.default=e,a}var d=s(a),o=i(t);const c=["variant","id","label","value","auxiliaryLabel","message","tone","maxWidth","maxLength","hidden","aria-describedby","rows","autoExpand","disableResize","onChange"],f=["onChange"];exports.TextArea=d.forwardRef((function(a,t){let{variant:i="default",id:s,label:b,value:x,auxiliaryLabel:m,message:p,tone:h,maxWidth:g,maxLength:v,hidden:j,"aria-describedby":y,rows:E,autoExpand:L=!1,disableResize:R=!1,onChange:q}=a,C=e.objectWithoutProperties(a,c);const w=d.useRef(null),O=d.useRef(null),P=r.useMergeRefs([t,O]),_=o.default([L?u.default.disableResize:null,R?u.default.disableResize:null]);return d.useEffect((function(){const e=w.current;function a(a){e&&(e.dataset.replicatedValue=a)}function t(e){a(e.currentTarget.value)}const r=O.current;if(r&&L)return a(r.value),r.addEventListener("input",t),()=>r.removeEventListener("input",t)}),[L]),d.createElement(n.BaseField,{variant:i,id:s,label:b,value:x,auxiliaryLabel:m,message:p,tone:h,hidden:j,"aria-describedby":y,className:[u.default.textAreaContainer,"error"===h?u.default.error:null,"bordered"===i?u.default.bordered:null],maxWidth:g,maxLength:v},a=>{let{onChange:t}=a,r=e.objectWithoutProperties(a,f);return d.createElement(l.Box,{width:"full",display:"flex",className:u.default.innerContainer,ref:w},d.createElement("textarea",e.objectSpread2(e.objectSpread2(e.objectSpread2({},C),r),{},{ref:P,rows:E,className:_,maxLength:v,onChange:e=>{null==q||q(e),null==t||t(e)}})))})}));
 //# sourceMappingURL=text-area.js.map

package/lib/text-area/text-area.js.map

@@ -1 +1 @@
-{"version":3,"file":"text-area.js","sources":["../../src/text-area/text-area.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useMergeRefs } from 'use-callback-ref'\nimport { BaseField, BaseFieldVariantProps, FieldComponentProps } from '../base-field'\nimport { Box } from '../box'\nimport styles from './text-area.module.css'\n\ninterface TextAreaProps extends FieldComponentProps<HTMLTextAreaElement>, BaseFieldVariantProps {\n    /**\n     * The number of visible text lines for the text area.\n     *\n     * If it is specified, it must be a positive integer. If it is not specified, the default\n     * value is 2 (set by the browser).\n     *\n     * When `autoExpand` is true, this value serves the purpose of specifying the minimum number\n     * of rows that the textarea will shrink to when the content is not large enough to make it\n     * expand.\n     *\n     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-rows\n     */\n    rows?: number\n\n    /**\n     * If `true`, the textarea will auto-expand or shrink vertically to fit the content.\n     */\n    autoExpand?: boolean\n}\n\nconst TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(function TextArea(\n    {\n        variant = 'default',\n        id,\n        label,\n        secondaryLabel,\n        auxiliaryLabel,\n        hint,\n        message,\n        tone,\n        maxWidth,\n        hidden,\n        'aria-describedby': ariaDescribedBy,\n        rows,\n        autoExpand = false,\n        ...props\n    },\n    ref,\n) {\n    const containerRef = React.useRef<HTMLDivElement>(null)\n    const internalRef = React.useRef<HTMLTextAreaElement>(null)\n    const combinedRef = useMergeRefs([ref, internalRef])\n\n    React.useEffect(\n        function setupAutoExpand() {\n            const containerElement = containerRef.current\n\n            function handleAutoExpand(value: string) {\n                if (containerElement) {\n                    containerElement.dataset.replicatedValue = value\n                }\n            }\n\n            function handleInput(event: Event) {\n                handleAutoExpand((event.currentTarget as HTMLTextAreaElement).value)\n            }\n\n            const textAreaElement = internalRef.current\n            if (!textAreaElement || !autoExpand) {\n                return undefined\n            }\n\n            // Apply change initially, in case the text area has a non-empty initial value\n            handleAutoExpand(textAreaElement.value)\n\n            textAreaElement.addEventListener('input', handleInput)\n            return () => textAreaElement.removeEventListener('input', handleInput)\n        },\n        [autoExpand],\n    )\n\n    return (\n        <BaseField\n            variant={variant}\n            id={id}\n            label={label}\n            secondaryLabel={secondaryLabel}\n            auxiliaryLabel={auxiliaryLabel}\n            hint={hint}\n            message={message}\n            tone={tone}\n            hidden={hidden}\n            aria-describedby={ariaDescribedBy}\n            className={[\n                styles.textAreaContainer,\n                tone === 'error' ? styles.error : null,\n                variant === 'bordered' ? styles.bordered : null,\n            ]}\n            maxWidth={maxWidth}\n        >\n            {(extraProps) => (\n                <Box\n                    width=\"full\"\n                    display=\"flex\"\n                    className={styles.innerContainer}\n                    ref={containerRef}\n                >\n                    <textarea\n                        {...props}\n                        {...extraProps}\n                        ref={combinedRef}\n                        rows={rows}\n                        className={autoExpand ? styles.autoExpand : undefined}\n                    />\n                </Box>\n            )}\n        </BaseField>\n    )\n})\n\nexport { TextArea }\nexport type { TextAreaProps }\n"],"names":["React","forwardRef","ref","variant","id","label","secondaryLabel","auxiliaryLabel","hint","message","tone","maxWidth","hidden","aria-describedby","ariaDescribedBy","rows","autoExpand","_ref","props","_objectWithoutProperties","objectWithoutProperties","_excluded","containerRef","useRef","internalRef","combinedRef","useMergeRefs","useEffect","containerElement","current","handleAutoExpand","value","dataset","replicatedValue","handleInput","event","currentTarget","textAreaElement","addEventListener","removeEventListener","createElement","BaseField","className","styles","textAreaContainer","error","bordered","extraProps","Box","width","display","innerContainer","_objectSpread","objectSpread2","undefined"],"mappings":"4tBA2BiBA,EAAMC,YAA+C,SAiBlEC,EAAAA,GAAG,IAhBHC,QACIA,EAAU,UADdC,GAEIA,EAFJC,MAGIA,EAHJC,eAIIA,EAJJC,eAKIA,EALJC,KAMIA,EANJC,QAOIA,EAPJC,KAQIA,EARJC,SASIA,EATJC,OAUIA,EACAC,mBAAoBC,EAXxBC,KAYIA,EAZJC,WAaIA,GAAa,GAGdC,EAFIC,EAEJC,EAAAC,wBAAAH,EAAAI,GAEH,MAAMC,EAAetB,EAAMuB,OAAuB,MAC5CC,EAAcxB,EAAMuB,OAA4B,MAChDE,EAAcC,EAAYA,aAAC,CAACxB,EAAKsB,IA8BvC,OA5BAxB,EAAM2B,WACF,WACI,MAAMC,EAAmBN,EAAaO,QAEtC,SAASC,EAAiBC,GAClBH,IACAA,EAAiBI,QAAQC,gBAAkBF,GAInD,SAASG,EAAYC,GACjBL,EAAkBK,EAAMC,cAAsCL,OAGlE,MAAMM,EAAkBb,EAAYK,QACpC,GAAKQ,GAAoBrB,EAQzB,OAHAc,EAAiBO,EAAgBN,OAEjCM,EAAgBC,iBAAiB,QAASJ,GACnC,IAAMG,EAAgBE,oBAAoB,QAASL,KAE9D,CAAClB,IAIDhB,EAACwC,cAAAC,aACGtC,QAASA,EACTC,GAAIA,EACJC,MAAOA,EACPC,eAAgBA,EAChBC,eAAgBA,EAChBC,KAAMA,EACNC,QAASA,EACTC,KAAMA,EACNE,OAAQA,qBACUE,EAClB4B,UAAW,CACPC,EAAM,QAACC,kBACE,UAATlC,EAAmBiC,EAAM,QAACE,MAAQ,KACtB,aAAZ1C,EAAyBwC,EAAAA,QAAOG,SAAW,MAE/CnC,SAAUA,GAERoC,GACE/C,EAACwC,cAAAQ,MACG,CAAAC,MAAM,OACNC,QAAQ,OACRR,UAAWC,EAAM,QAACQ,eAClBjD,IAAKoB,GAELtB,EAAAwC,cAAA,WAAAY,EAAAC,cAAAD,EAAAC,cAAAD,gBAAA,GACQlC,GACA6B,GAFR,GAAA,CAGI7C,IAAKuB,EACLV,KAAMA,EACN2B,UAAW1B,EAAa2B,UAAO3B,gBAAasC"}
+{"version":3,"file":"text-area.js","sources":["../../src/text-area/text-area.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport { useMergeRefs } from 'use-callback-ref'\nimport { BaseField, BaseFieldVariantProps, FieldComponentProps } from '../base-field'\nimport { Box } from '../box'\nimport styles from './text-area.module.css'\n\ninterface TextAreaProps extends FieldComponentProps<HTMLTextAreaElement>, BaseFieldVariantProps {\n    /**\n     * The number of visible text lines for the text area.\n     *\n     * If it is specified, it must be a positive integer. If it is not specified, the default\n     * value is 2 (set by the browser).\n     *\n     * When `autoExpand` is true, this value serves the purpose of specifying the minimum number\n     * of rows that the textarea will shrink to when the content is not large enough to make it\n     * expand.\n     *\n     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-rows\n     */\n    rows?: number\n\n    /**\n     * If `true`, the textarea will be automatically resized to fit the content, and the ability to\n     * manually resize the textarea will be disabled.\n     */\n    autoExpand?: boolean\n\n    /**\n     * If `true`, the ability to manually resize the textarea will be disabled.\n     *\n     * When `autoExpand` is true, this property serves no purpose, because the ability to manually\n     * resize the textarea is always disabled when `autoExpand` is true.\n     */\n    disableResize?: boolean\n}\n\nconst TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(function TextArea(\n    {\n        variant = 'default',\n        id,\n        label,\n        value,\n        auxiliaryLabel,\n        message,\n        tone,\n        maxWidth,\n        maxLength,\n        hidden,\n        'aria-describedby': ariaDescribedBy,\n        rows,\n        autoExpand = false,\n        disableResize = false,\n        onChange: originalOnChange,\n        ...props\n    },\n    ref,\n) {\n    const containerRef = React.useRef<HTMLDivElement>(null)\n    const internalRef = React.useRef<HTMLTextAreaElement>(null)\n    const combinedRef = useMergeRefs([ref, internalRef])\n\n    const textAreaClassName = classNames([\n        autoExpand ? styles.disableResize : null,\n        disableResize ? styles.disableResize : null,\n    ])\n\n    React.useEffect(\n        function setupAutoExpand() {\n            const containerElement = containerRef.current\n\n            function handleAutoExpand(value: string) {\n                if (containerElement) {\n                    containerElement.dataset.replicatedValue = value\n                }\n            }\n\n            function handleInput(event: Event) {\n                handleAutoExpand((event.currentTarget as HTMLTextAreaElement).value)\n            }\n\n            const textAreaElement = internalRef.current\n            if (!textAreaElement || !autoExpand) {\n                return undefined\n            }\n\n            // Apply change initially, in case the text area has a non-empty initial value\n            handleAutoExpand(textAreaElement.value)\n\n            textAreaElement.addEventListener('input', handleInput)\n            return () => textAreaElement.removeEventListener('input', handleInput)\n        },\n        [autoExpand],\n    )\n\n    return (\n        <BaseField\n            variant={variant}\n            id={id}\n            label={label}\n            value={value}\n            auxiliaryLabel={auxiliaryLabel}\n            message={message}\n            tone={tone}\n            hidden={hidden}\n            aria-describedby={ariaDescribedBy}\n            className={[\n                styles.textAreaContainer,\n                tone === 'error' ? styles.error : null,\n                variant === 'bordered' ? styles.bordered : null,\n            ]}\n            maxWidth={maxWidth}\n            maxLength={maxLength}\n        >\n            {({ onChange, ...extraProps }) => (\n                <Box\n                    width=\"full\"\n                    display=\"flex\"\n                    className={styles.innerContainer}\n                    ref={containerRef}\n                >\n                    <textarea\n                        {...props}\n                        {...extraProps}\n                        ref={combinedRef}\n                        rows={rows}\n                        className={textAreaClassName}\n                        maxLength={maxLength}\n                        onChange={(event) => {\n                            originalOnChange?.(event)\n                            onChange?.(event)\n                        }}\n                    />\n                </Box>\n            )}\n        </BaseField>\n    )\n})\n\nexport { TextArea }\nexport type { TextAreaProps }\n"],"names":["React","forwardRef","ref","variant","id","label","value","auxiliaryLabel","message","tone","maxWidth","maxLength","hidden","aria-describedby","ariaDescribedBy","rows","autoExpand","disableResize","onChange","originalOnChange","_ref","props","_objectWithoutProperties","objectWithoutProperties","_excluded","containerRef","useRef","internalRef","combinedRef","useMergeRefs","textAreaClassName","classNames","styles","useEffect","containerElement","current","handleAutoExpand","dataset","replicatedValue","handleInput","event","currentTarget","textAreaElement","addEventListener","removeEventListener","createElement","BaseField","className","textAreaContainer","error","bordered","_ref2","extraProps","_excluded2","Box","width","display","innerContainer","_objectSpread","objectSpread2"],"mappings":"y2BAqCiBA,EAAMC,YAA+C,SAmBlEC,EAAAA,GAAG,IAlBHC,QACIA,EAAU,UADdC,GAEIA,EAFJC,MAGIA,EAHJC,MAIIA,EAJJC,eAKIA,EALJC,QAMIA,EANJC,KAOIA,EAPJC,SAQIA,EARJC,UASIA,EATJC,OAUIA,EACAC,mBAAoBC,EAXxBC,KAYIA,EAZJC,WAaIA,GAAa,EAbjBC,cAcIA,GAAgB,EAChBC,SAAUC,GAGXC,EAFIC,EAEJC,EAAAC,wBAAAH,EAAAI,GAEH,MAAMC,EAAezB,EAAM0B,OAAuB,MAC5CC,EAAc3B,EAAM0B,OAA4B,MAChDE,EAAcC,EAAYA,aAAC,CAAC3B,EAAKyB,IAEjCG,EAAoBC,EAAAA,QAAW,CACjCf,EAAagB,EAAAA,QAAOf,cAAgB,KACpCA,EAAgBe,EAAM,QAACf,cAAgB,OA+B3C,OA5BAjB,EAAMiC,WACF,WACI,MAAMC,EAAmBT,EAAaU,QAEtC,SAASC,EAAiB9B,GAClB4B,IACAA,EAAiBG,QAAQC,gBAAkBhC,GAInD,SAASiC,EAAYC,GACjBJ,EAAkBI,EAAMC,cAAsCnC,OAGlE,MAAMoC,EAAkBf,EAAYQ,QACpC,GAAKO,GAAoB1B,EAQzB,OAHAoB,EAAiBM,EAAgBpC,OAEjCoC,EAAgBC,iBAAiB,QAASJ,GACnC,IAAMG,EAAgBE,oBAAoB,QAASL,KAE9D,CAACvB,IAIDhB,EAAC6C,cAAAC,YACG,CAAA3C,QAASA,EACTC,GAAIA,EACJC,MAAOA,EACPC,MAAOA,EACPC,eAAgBA,EAChBC,QAASA,EACTC,KAAMA,EACNG,OAAQA,qBACUE,EAClBiC,UAAW,CACPf,EAAM,QAACgB,kBACE,UAATvC,EAAmBuB,EAAM,QAACiB,MAAQ,KACtB,aAAZ9C,EAAyB6B,EAAAA,QAAOkB,SAAW,MAE/CxC,SAAUA,EACVC,UAAWA,GAEVwC,IAAA,IAACjC,SAAEA,GAAHiC,EAAgBC,EAAhB9B,EAAAC,wBAAA4B,EAAAE,GAAA,OACGrD,EAAC6C,cAAAS,OACGC,MAAM,OACNC,QAAQ,OACRT,UAAWf,EAAM,QAACyB,eAClBvD,IAAKuB,GAELzB,EACQ6C,cAAA,WADRa,EAAAC,cAAAD,EAAAC,cAAAD,gBAAA,GACQrC,GACA+B,GAFR,GAAA,CAGIlD,IAAK0B,EACLb,KAAMA,EACNgC,UAAWjB,EACXnB,UAAWA,EACXO,SAAWsB,IACP,MAAArB,GAAAA,EAAmBqB,GACnB,MAAAtB,GAAAA,EAAWsB"}

package/lib/text-area/text-area.module.css.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={textAreaContainer:"_55ccf266",innerContainer:"_89bb7098",bordered:"_02a47358",error:"_704ff540",autoExpand:"_145ca8f0"};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={textAreaContainer:"a95cb864",innerContainer:"ab9873f7",bordered:"de380efd",error:"_29a9d12f",disableResize:"_44f7147e"};
 //# sourceMappingURL=text-area.module.css.js.map