@doist/reactist 27.4.0 → 28.0.0

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

@@ -83,7 +83,9 @@ function BaseField({
   hidden,
   'aria-describedby': originalAriaDescribedBy,
   id: originalId,
-  characterCountPosition = 'below'
+  characterCountPosition = 'below',
+  endSlot,
+  endSlotPosition = 'bottom'
 }) {
   const id = useId(originalId);
   const messageId = useId();
@@ -146,8 +148,13 @@ function BaseField({
     space: "xsmall",
     hidden: hidden
   }, /*#__PURE__*/React.createElement(Box, {
+    display: "flex",
+    flexDirection: "row",
     className: [className, modules_540a88ff.container, tone === 'error' ? modules_540a88ff.error : null, variant === 'bordered' ? modules_540a88ff.bordered : null],
-    maxWidth: maxWidth
+    maxWidth: maxWidth,
+    alignItems: "center"
+  }, /*#__PURE__*/React.createElement(Box, {
+    flexGrow: 1
   }, label || auxiliaryLabel ? /*#__PURE__*/React.createElement(Box, {
     as: "span",
     display: "flex",
@@ -162,7 +169,7 @@ function BaseField({
   }, label) : null), auxiliaryLabel ? /*#__PURE__*/React.createElement(Box, {
     className: modules_540a88ff.auxiliaryLabel,
     paddingLeft: "small"
-  }, auxiliaryLabel) : null) : null, children(childrenProps)), message || characterCount ? /*#__PURE__*/React.createElement(Columns, {
+  }, auxiliaryLabel) : null) : null, children(childrenProps)), endSlot && endSlotPosition === 'fullHeight' ? endSlot : null), message || characterCount ? /*#__PURE__*/React.createElement(Columns, {
     align: "right",
     space: "small",
     maxWidth: maxWidth

package/es/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'\nimport { Column, Columns } from '../columns'\n\n// Define the remaining characters before the character count turns red\n// See: https://twist.com/a/1585/ch/765851/t/6664583/c/93631846 for latest spec\nconst MAX_LENGTH_THRESHOLD = 0\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    characterCountElement?: React.ReactNode | null\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\nexport type 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         * The maximum number of characters that the input field can accept.\n         * When this limit is reached, the input field will not accept any more characters.\n         * The counter element will turn red when the number of characters is within 10 of the maximum limit.\n         */\n        maxLength?: number\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        /**\n         * The position of the character count element.\n         * It can be shown below the field or inline with the field.\n         *\n         * @default 'below'\n         */\n        characterCountPosition?: 'below' | 'inline' | 'hidden'\n    }\n\ntype FieldComponentProps<T extends HTMLElement> = Omit<\n    BaseFieldProps,\n    'children' | 'className' | 'fieldRef' | 'variant'\n> &\n    Omit<HtmlInputProps<T>, 'className' | 'style'>\n\n/**\n * BaseField is a base component that provides a consistent structure for form fields.\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    characterCountPosition = 'below',\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    /**\n     * Renders the character count element.\n     * If the characterCountPosition value is 'hidden', it returns null.\n     */\n    function renderCharacterCount() {\n        return characterCountPosition !== 'hidden' ? (\n            <FieldCharacterCount tone={characterCountTone}>{characterCount}</FieldCharacterCount>\n        ) : null\n    }\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        // If the character count is inline, we pass it as a prop to the children element so it can be rendered inline\n        characterCountElement: characterCountPosition === 'inline' ? renderCharacterCount() : null,\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\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\n                    {/* If the character count is below the field, we render it, if it's inline,\n                        we pass it as a prop to the children element so it can be rendered inline */}\n                    {characterCountPosition === 'below' ? (\n                        <Column width=\"content\">{renderCharacterCount()}</Column>\n                    ) : null}\n                </Columns>\n            ) : null}\n        </Stack>\n    )\n}\n\nexport { BaseField, FieldMessage }\nexport type { BaseFieldVariant, BaseFieldVariantProps, FieldComponentProps }\n"],"names":["MAX_LENGTH_THRESHOLD","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","isNearMaxLength","BaseField","variant","label","auxiliaryLabel","message","maxWidth","hidden","originalAriaDescribedBy","originalId","characterCountPosition","useId","messageId","inputLength","characterCount","setCharacterCount","useState","characterCountTone","setCharacterCountTone","ariaDescribedBy","renderCharacterCount","childrenProps","_objectSpread","undefined","onChange","event","currentTarget","characterCountElement","useEffect","updateCharacterCountOnPropChange","Stack","space","container","error","bordered","justifyContent","alignItems","htmlFor","primaryLabel","paddingLeft","Columns","align","Column","width"],"mappings":"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"}
+{"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\n// Define the remaining characters before the character count turns red\n// See: https://twist.com/a/1585/ch/765851/t/6664583/c/93631846 for latest spec\nconst MAX_LENGTH_THRESHOLD = 0\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    characterCountElement?: React.ReactNode | null\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\nexport type 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         * The maximum number of characters that the input field can accept.\n         * When this limit is reached, the input field will not accept any more characters.\n         * The counter element will turn red when the number of characters is within 10 of the maximum limit.\n         */\n        maxLength?: number\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        /**\n         * The position of the character count element.\n         * It can be shown below the field or inline with the field.\n         *\n         * @default 'below'\n         */\n        characterCountPosition?: 'below' | 'inline' | 'hidden'\n    } & (\n        | {\n              supportsStartAndEndSlots?: false\n              endSlot?: never\n              endSlotPosition?: never\n          }\n        | {\n              supportsStartAndEndSlots: true\n              endSlot?: React.ReactElement | string | number\n              /**\n               * This is solely for `bordered` variants of TextField. When set to `bottom` (the default),\n               * the endSlot will be placed inline with the input field. When set to `fullHeight`, the endSlot\n               * will be placed to the side of both the input field and the label.\n               */\n              endSlotPosition?: 'bottom' | 'fullHeight'\n          }\n    )\n\ntype FieldComponentProps<T extends HTMLElement> = Omit<\n    BaseFieldProps,\n    'children' | 'className' | 'fieldRef' | 'variant'\n> &\n    Omit<HtmlInputProps<T>, 'className' | 'style'>\n\n/**\n * BaseField is a base component that provides a consistent structure for form fields.\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    characterCountPosition = 'below',\n    endSlot,\n    endSlotPosition = 'bottom',\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    /**\n     * Renders the character count element.\n     * If the characterCountPosition value is 'hidden', it returns null.\n     */\n    function renderCharacterCount() {\n        return characterCountPosition !== 'hidden' ? (\n            <FieldCharacterCount tone={characterCountTone}>{characterCount}</FieldCharacterCount>\n        ) : null\n    }\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        // If the character count is inline, we pass it as a prop to the children element so it can be rendered inline\n        characterCountElement: characterCountPosition === 'inline' ? renderCharacterCount() : null,\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                display=\"flex\"\n                flexDirection=\"row\"\n                className={[\n                    className,\n                    styles.container,\n                    tone === 'error' ? styles.error : null,\n                    variant === 'bordered' ? styles.bordered : null,\n                ]}\n                maxWidth={maxWidth}\n                alignItems=\"center\"\n            >\n                <Box flexGrow={1}>\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 ? (\n                                    <span className={styles.primaryLabel}>{label}</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                {endSlot && endSlotPosition === 'fullHeight' ? endSlot : null}\n            </Box>\n\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\n                    {/* If the character count is below the field, we render it, if it's inline,\n                        we pass it as a prop to the children element so it can be rendered inline */}\n                    {characterCountPosition === 'below' ? (\n                        <Column width=\"content\">{renderCharacterCount()}</Column>\n                    ) : null}\n                </Columns>\n            ) : null}\n        </Stack>\n    )\n}\n\nexport { BaseField, FieldMessage }\nexport type { BaseFieldVariant, BaseFieldVariantProps, FieldComponentProps }\n"],"names":["MAX_LENGTH_THRESHOLD","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","isNearMaxLength","BaseField","variant","label","auxiliaryLabel","message","maxWidth","hidden","originalAriaDescribedBy","originalId","characterCountPosition","endSlot","endSlotPosition","useId","messageId","inputLength","characterCount","setCharacterCount","useState","characterCountTone","setCharacterCountTone","ariaDescribedBy","renderCharacterCount","childrenProps","_objectSpread","undefined","onChange","event","currentTarget","characterCountElement","useEffect","updateCharacterCountOnPropChange","Stack","space","flexDirection","container","error","bordered","alignItems","flexGrow","justifyContent","htmlFor","primaryLabel","paddingLeft","Columns","align","Column","width"],"mappings":"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"}

package/es/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\n    extends Omit<FieldComponentProps<HTMLSelectElement>, 'maxLength' | 'characterCountPosition'>,\n        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":["SelectField","React","forwardRef","ref","variant","id","label","value","auxiliaryLabel","message","tone","maxWidth","children","hidden","ariaDescribedBy","onChange","originalOnChange","props","createElement","BaseField","extraProps","Box","className","styles","selectWrapper","error","bordered","_objectSpread","event","SelectChevron","width","height","fill","xmlns","d"],"mappings":";;;;;;;AASMA,MAAAA,WAAW,gBAAGC,KAAK,CAACC,UAAN,CAAsD,SAASF,WAAT,CAgBtEG,IAAAA,EAAAA,GAhBsE,EAgBnE;EAAA,IAfH;AACIC,IAAAA,OAAO,GAAG,SADd;IAEIC,EAFJ;IAGIC,KAHJ;IAIIC,KAJJ;IAKIC,cALJ;IAMIC,OANJ;IAOIC,IAPJ;IAQIC,QARJ;IASIC,QATJ;IAUIC,MAVJ;AAWI,IAAA,kBAAA,EAAoBC,eAXxB;AAYIC,IAAAA,QAAQ,EAAEC,gBAAAA;GAGX,GAAA,IAAA;AAAA,MAFIC,KAEJ,GAAA,wBAAA,CAAA,IAAA,EAAA,SAAA,CAAA,CAAA;;AAEH,EAAA,oBACIhB,KAAC,CAAAiB,aAAD,CAACC,SAAD,EACI;AAAAf,IAAAA,OAAO,EAAEA,OAAT;AACAC,IAAAA,EAAE,EAAEA,EADJ;AAEAC,IAAAA,KAAK,EAAEA,KAFP;AAGAC,IAAAA,KAAK,EAAEA,KAHP;AAIAC,IAAAA,cAAc,EAAEA,cAJhB;AAKAC,IAAAA,OAAO,EAAEA,OALT;AAMAC,IAAAA,IAAI,EAAEA,IANN;AAOAC,IAAAA,QAAQ,EAAEA,QAPV;AAQAE,IAAAA,MAAM,EAAEA,MARR;IASkB,kBAAAC,EAAAA,eAAAA;GAVtB,EAYMM,UAAD,iBACGnB,KAAC,CAAAiB,aAAD,CAACG,GAAD,EACgB;AAAA,IAAA,aAAA,EAAA,gBAAA;IACZC,SAAS,EAAE,CACPC,gBAAM,CAACC,aADA,EAEPd,IAAI,KAAK,OAAT,GAAmBa,gBAAM,CAACE,KAA1B,GAAkC,IAF3B,EAGPrB,OAAO,KAAK,UAAZ,GAAyBmB,gBAAM,CAACG,QAAhC,GAA2C,IAHpC,CAAA;GAFf,eAQIzB,KAAA,CAAAiB,aAAA,CAAA,QAAA,EAAAS,cAAA,CAAAA,cAAA,CAAAA,cAAA,CAAA,EAAA,EACQV,KADR,CAAA,EAEQG,UAFR,CAAA,EAAA,EAAA,EAAA;AAGIjB,IAAAA,GAAG,EAAEA,GAHT;IAIIY,QAAQ,EAAGa,KAAD,IAAU;AAChBZ,MAAAA,gBAAgB,IAAhB,IAAA,GAAA,KAAA,CAAA,GAAAA,gBAAgB,CAAGY,KAAH,CAAhB,CAAA;AACH,KAAA;GAEAhB,CAAAA,EAAAA,QARL,CARJ,eAkBIX,KAAA,CAAAiB,aAAA,CAACW,aAAD,EAA6B;IAAA,aAAA,EAAA,IAAA;GAA7B,CAlBJ,CAbR,CADJ,CAAA;AAqCH,CAvDmB,EAApB;;AAyDA,SAASA,aAAT,CAAuBZ,KAAvB,EAA0D;AACtD,EAAA,oBACIhB,KAAK,CAAAiB,aAAL,CAAK,KAAL,EAAAS,cAAA,CAAA;AAAKG,IAAAA,KAAK,EAAC,IAAX;AAAgBC,IAAAA,MAAM,EAAC,IAAvB;AAA4BC,IAAAA,IAAI,EAAC,MAAjC;AAAwCC,IAAAA,KAAK,EAAC,4BAAA;AAA9C,GAAA,EAA+EhB,KAA/E,CACIhB,eAAAA,KACI,CAAAiB,aADJ,CACI,MADJ,EACI;AAAAgB,IAAAA,CAAC,EAAC,yGAAF;AACAF,IAAAA,IAAI,EAAC,cAAA;AADL,GADJ,CADJ,CADJ,CAAA;AAQH;;;;"}
+{"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\n    extends Omit<\n            FieldComponentProps<HTMLSelectElement>,\n            | 'maxLength'\n            | 'characterCountPosition'\n            | 'endSlot'\n            | 'supportsStartAndEndSlots'\n            | 'endSlotPosition'\n        >,\n        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":["SelectField","React","forwardRef","ref","variant","id","label","value","auxiliaryLabel","message","tone","maxWidth","children","hidden","ariaDescribedBy","onChange","originalOnChange","props","createElement","BaseField","extraProps","Box","className","styles","selectWrapper","error","bordered","_objectSpread","event","SelectChevron","width","height","fill","xmlns","d"],"mappings":";;;;;;;AAgBMA,MAAAA,WAAW,gBAAGC,KAAK,CAACC,UAAN,CAAsD,SAASF,WAAT,CAgBtEG,IAAAA,EAAAA,GAhBsE,EAgBnE;EAAA,IAfH;AACIC,IAAAA,OAAO,GAAG,SADd;IAEIC,EAFJ;IAGIC,KAHJ;IAIIC,KAJJ;IAKIC,cALJ;IAMIC,OANJ;IAOIC,IAPJ;IAQIC,QARJ;IASIC,QATJ;IAUIC,MAVJ;AAWI,IAAA,kBAAA,EAAoBC,eAXxB;AAYIC,IAAAA,QAAQ,EAAEC,gBAAAA;GAGX,GAAA,IAAA;AAAA,MAFIC,KAEJ,GAAA,wBAAA,CAAA,IAAA,EAAA,SAAA,CAAA,CAAA;;AAEH,EAAA,oBACIhB,KAAC,CAAAiB,aAAD,CAACC,SAAD,EACI;AAAAf,IAAAA,OAAO,EAAEA,OAAT;AACAC,IAAAA,EAAE,EAAEA,EADJ;AAEAC,IAAAA,KAAK,EAAEA,KAFP;AAGAC,IAAAA,KAAK,EAAEA,KAHP;AAIAC,IAAAA,cAAc,EAAEA,cAJhB;AAKAC,IAAAA,OAAO,EAAEA,OALT;AAMAC,IAAAA,IAAI,EAAEA,IANN;AAOAC,IAAAA,QAAQ,EAAEA,QAPV;AAQAE,IAAAA,MAAM,EAAEA,MARR;IASkB,kBAAAC,EAAAA,eAAAA;GAVtB,EAYMM,UAAD,iBACGnB,KAAC,CAAAiB,aAAD,CAACG,GAAD,EACgB;AAAA,IAAA,aAAA,EAAA,gBAAA;IACZC,SAAS,EAAE,CACPC,gBAAM,CAACC,aADA,EAEPd,IAAI,KAAK,OAAT,GAAmBa,gBAAM,CAACE,KAA1B,GAAkC,IAF3B,EAGPrB,OAAO,KAAK,UAAZ,GAAyBmB,gBAAM,CAACG,QAAhC,GAA2C,IAHpC,CAAA;GAFf,eAQIzB,KAAA,CAAAiB,aAAA,CAAA,QAAA,EAAAS,cAAA,CAAAA,cAAA,CAAAA,cAAA,CAAA,EAAA,EACQV,KADR,CAAA,EAEQG,UAFR,CAAA,EAAA,EAAA,EAAA;AAGIjB,IAAAA,GAAG,EAAEA,GAHT;IAIIY,QAAQ,EAAGa,KAAD,IAAU;AAChBZ,MAAAA,gBAAgB,IAAhB,IAAA,GAAA,KAAA,CAAA,GAAAA,gBAAgB,CAAGY,KAAH,CAAhB,CAAA;AACH,KAAA;GAEAhB,CAAAA,EAAAA,QARL,CARJ,eAkBIX,KAAA,CAAAiB,aAAA,CAACW,aAAD,EAA6B;IAAA,aAAA,EAAA,IAAA;GAA7B,CAlBJ,CAbR,CADJ,CAAA;AAqCH,CAvDmB,EAApB;;AAyDA,SAASA,aAAT,CAAuBZ,KAAvB,EAA0D;AACtD,EAAA,oBACIhB,KAAK,CAAAiB,aAAL,CAAK,KAAL,EAAAS,cAAA,CAAA;AAAKG,IAAAA,KAAK,EAAC,IAAX;AAAgBC,IAAAA,MAAM,EAAC,IAAvB;AAA4BC,IAAAA,IAAI,EAAC,MAAjC;AAAwCC,IAAAA,KAAK,EAAC,4BAAA;AAA9C,GAAA,EAA+EhB,KAA/E,CACIhB,eAAAA,KACI,CAAAiB,aADJ,CACI,MADJ,EACI;AAAAgB,IAAAA,CAAC,EAAC,yGAAF;AACAF,IAAAA,IAAI,EAAC,cAAA;AADL,GADJ,CADJ,CADJ,CAAA;AAQH;;;;"}

package/es/tabs/tabs.js

@@ -2,11 +2,11 @@ import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _
 import * as React from 'react';
 import classNames from 'classnames';
 import { useTabStore, Tab as Tab$1, TabList as TabList$1, TabPanel as TabPanel$1 } from '@ariakit/react';
+import { Box } from '../box/box.js';
 import { Inline } from '../inline/inline.js';
 import modules_40c67f5b from './tabs.module.css.js';
-import { Box } from '../box/box.js';
 
-const _excluded = ["children", "space"],
+const _excluded = ["children", "space", "width", "align", "exceptionallySetClassName"],
       _excluded2 = ["children", "id", "renderMode"];
 const TabsContext = /*#__PURE__*/React.createContext(null);
 /**
@@ -47,6 +47,7 @@ function Tabs({
 const Tab = /*#__PURE__*/React.forwardRef(function Tab({
   children,
   id,
+  disabled,
   exceptionallySetClassName,
   render,
   onClick
@@ -61,6 +62,7 @@ const Tab = /*#__PURE__*/React.forwardRef(function Tab({
   return /*#__PURE__*/React.createElement(Tab$1, {
     id: id,
     ref: ref,
+    disabled: disabled,
     store: tabStore,
     render: render,
     className: className,
@@ -74,11 +76,42 @@ const Tab = /*#__PURE__*/React.forwardRef(function Tab({
 function TabList(_ref2) {
   let {
     children,
-    space
+    space,
+    width = 'maxContent',
+    align = 'start',
+    exceptionallySetClassName
   } = _ref2,
       props = _objectWithoutProperties(_ref2, _excluded);
 
   const tabContextValue = React.useContext(TabsContext);
+  const [selectedTabElement, setSelectedTabElement] = React.useState(null);
+  const [selectedTabStyle, setSelectedTabStyle] = React.useState({});
+  const tabListRef = React.useRef(null);
+  const selectedId = tabContextValue == null ? void 0 : tabContextValue.tabStore.useState('selectedId');
+  React.useLayoutEffect(() => {
+    function updateSelectedTabStyle() {
+      if (!selectedId || !tabListRef.current) {
+        return;
+      }
+
+      const tabs = tabListRef.current.querySelectorAll('[role="tab"]');
+      const selectedTab = Array.from(tabs).find(tab => tab.getAttribute('id') === selectedId);
+
+      if (selectedTab) {
+        setSelectedTabElement(selectedTab);
+        setSelectedTabStyle({
+          left: selectedTab.offsetLeft + "px",
+          width: selectedTab.offsetWidth + "px"
+        });
+      }
+    }
+
+    updateSelectedTabStyle();
+    window.addEventListener('resize', updateSelectedTabStyle);
+    return function cleanupEventListener() {
+      window.removeEventListener('resize', updateSelectedTabStyle);
+    };
+  }, [selectedId]);
 
   if (!tabContextValue) {
     return null;
@@ -88,20 +121,35 @@ function TabList(_ref2) {
     tabStore,
     variant
   } = tabContextValue;
+  const justifyContentAlignMap = {
+    start: 'flexStart',
+    end: 'flexEnd',
+    center: 'center'
+  };
   return (
     /*#__PURE__*/
-    // The extra <div> prevents <Inline>'s negative margins from collapsing when used in a flex container
-    // which will render the track with the wrong height
-    React.createElement("div", null, /*#__PURE__*/React.createElement(TabList$1, _objectSpread2({
+    // This extra <Box> not only provides alignment for the tabs, but also prevents <Inline>'s
+    // negative margins from collapsing when used in a flex container which will render the
+    // track with the wrong height
+    React.createElement(Box, {
+      display: "flex",
+      justifyContent: width === 'full' ? 'center' : justifyContentAlignMap[align]
+    }, /*#__PURE__*/React.createElement(TabList$1, _objectSpread2({
       store: tabStore,
       render: /*#__PURE__*/React.createElement(Box, {
         position: "relative",
-        width: "maxContent"
-      })
+        width: width,
+        className: exceptionallySetClassName
+      }),
+      ref: tabListRef
     }, props), /*#__PURE__*/React.createElement(Box, {
       className: [modules_40c67f5b.track, modules_40c67f5b["track-" + variant]]
-    }), /*#__PURE__*/React.createElement(Inline, {
-      space: space
+    }), selectedTabElement ? /*#__PURE__*/React.createElement(Box, {
+      className: [modules_40c67f5b.selected, modules_40c67f5b["selected-" + variant]],
+      style: selectedTabStyle
+    }) : null, /*#__PURE__*/React.createElement(Inline, {
+      space: space,
+      exceptionallySetClassName: classNames(width === 'full' ? modules_40c67f5b.fullTabList : null)
     }, children)))
   );
 }

package/es/tabs/tabs.js.map

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

package/es/tabs/tabs.module.css.js

@@ -1,4 +1,4 @@
-var modules_40c67f5b = {"tab":"faa5b46e","track":"_93de0ded","tab-neutral":"_82a91995","tab-themed":"f150e9da","track-neutral":"_10f229b4","track-themed":"_54f03992"};
+var modules_40c67f5b = {"tab":"_9f64e89a","fullTabList":"_49fe8e5a","track":"_1f449e3a","selected":"a8ac92b1","tab-neutral":"_6c6b8a2b","tab-themed":"_0eddd76d","track-neutral":"be66f12e","track-themed":"d21ccd50","selected-neutral":"_33211e81","selected-themed":"_4d1cbd10"};
 
 export { modules_40c67f5b as default };
 //# sourceMappingURL=tabs.module.css.js.map

package/es/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 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":["TextArea","React","forwardRef","ref","variant","id","label","value","auxiliaryLabel","message","tone","maxWidth","maxLength","hidden","ariaDescribedBy","rows","autoExpand","disableResize","onChange","originalOnChange","props","containerRef","useRef","internalRef","combinedRef","useMergeRefs","textAreaClassName","classNames","styles","useEffect","setupAutoExpand","containerElement","current","handleAutoExpand","dataset","replicatedValue","handleInput","event","currentTarget","textAreaElement","undefined","addEventListener","removeEventListener","createElement","BaseField","className","textAreaContainer","error","bordered","extraProps","Box","width","display","innerContainer","_objectSpread"],"mappings":";;;;;;;;;;AAqCMA,MAAAA,QAAQ,gBAAGC,KAAK,CAACC,UAAN,CAAqD,SAASF,QAAT,CAmBlEG,IAAAA,EAAAA,GAnBkE,EAmB/D;EAAA,IAlBH;AACIC,IAAAA,OAAO,GAAG,SADd;IAEIC,EAFJ;IAGIC,KAHJ;IAIIC,KAJJ;IAKIC,cALJ;IAMIC,OANJ;IAOIC,IAPJ;IAQIC,QARJ;IASIC,SATJ;IAUIC,MAVJ;AAWI,IAAA,kBAAA,EAAoBC,eAXxB;IAYIC,IAZJ;AAaIC,IAAAA,UAAU,GAAG,KAbjB;AAcIC,IAAAA,aAAa,GAAG,KAdpB;AAeIC,IAAAA,QAAQ,EAAEC,gBAAAA;GAGX,GAAA,IAAA;AAAA,MAFIC,KAEJ,GAAA,wBAAA,CAAA,IAAA,EAAA,SAAA,CAAA,CAAA;;AAEH,EAAA,MAAMC,YAAY,GAAGpB,KAAK,CAACqB,MAAN,CAA6B,IAA7B,CAArB,CAAA;AACA,EAAA,MAAMC,WAAW,GAAGtB,KAAK,CAACqB,MAAN,CAAkC,IAAlC,CAApB,CAAA;EACA,MAAME,WAAW,GAAGC,YAAY,CAAC,CAACtB,GAAD,EAAMoB,WAAN,CAAD,CAAhC,CAAA;EAEA,MAAMG,iBAAiB,GAAGC,UAAU,CAAC,CACjCX,UAAU,GAAGY,gBAAM,CAACX,aAAV,GAA0B,IADH,EAEjCA,aAAa,GAAGW,gBAAM,CAACX,aAAV,GAA0B,IAFN,CAAD,CAApC,CAAA;AAKAhB,EAAAA,KAAK,CAAC4B,SAAN,CACI,SAASC,eAAT,GAAwB;AACpB,IAAA,MAAMC,gBAAgB,GAAGV,YAAY,CAACW,OAAtC,CAAA;;IAEA,SAASC,gBAAT,CAA0B1B,KAA1B,EAAuC;AACnC,MAAA,IAAIwB,gBAAJ,EAAsB;AAClBA,QAAAA,gBAAgB,CAACG,OAAjB,CAAyBC,eAAzB,GAA2C5B,KAA3C,CAAA;AACH,OAAA;AACJ,KAAA;;IAED,SAAS6B,WAAT,CAAqBC,KAArB,EAAiC;AAC7BJ,MAAAA,gBAAgB,CAAEI,KAAK,CAACC,aAAN,CAA4C/B,KAA9C,CAAhB,CAAA;AACH,KAAA;;AAED,IAAA,MAAMgC,eAAe,GAAGhB,WAAW,CAACS,OAApC,CAAA;;AACA,IAAA,IAAI,CAACO,eAAD,IAAoB,CAACvB,UAAzB,EAAqC;AACjC,MAAA,OAAOwB,SAAP,CAAA;AACH,KAhBmB;;;AAmBpBP,IAAAA,gBAAgB,CAACM,eAAe,CAAChC,KAAjB,CAAhB,CAAA;AAEAgC,IAAAA,eAAe,CAACE,gBAAhB,CAAiC,OAAjC,EAA0CL,WAA1C,CAAA,CAAA;IACA,OAAO,MAAMG,eAAe,CAACG,mBAAhB,CAAoC,OAApC,EAA6CN,WAA7C,CAAb,CAAA;GAvBR,EAyBI,CAACpB,UAAD,CAzBJ,CAAA,CAAA;AA4BA,EAAA,oBACIf,KAAC,CAAA0C,aAAD,CAACC,SAAD,EACI;AAAAxC,IAAAA,OAAO,EAAEA,OAAT;AACAC,IAAAA,EAAE,EAAEA,EADJ;AAEAC,IAAAA,KAAK,EAAEA,KAFP;AAGAC,IAAAA,KAAK,EAAEA,KAHP;AAIAC,IAAAA,cAAc,EAAEA,cAJhB;AAKAC,IAAAA,OAAO,EAAEA,OALT;AAMAC,IAAAA,IAAI,EAAEA,IANN;AAOAG,IAAAA,MAAM,EAAEA,MAPR;wBAQkBC,eARlB;IASA+B,SAAS,EAAE,CACPjB,gBAAM,CAACkB,iBADA,EAEPpC,IAAI,KAAK,OAAT,GAAmBkB,gBAAM,CAACmB,KAA1B,GAAkC,IAF3B,EAGP3C,OAAO,KAAK,UAAZ,GAAyBwB,gBAAM,CAACoB,QAAhC,GAA2C,IAHpC,CATX;AAcArC,IAAAA,QAAQ,EAAEA,QAdV;AAeAC,IAAAA,SAAS,EAAEA,SAAAA;AAfX,GADJ,EAkBK,KAAA,IAAA;IAAA,IAAC;AAAEM,MAAAA,QAAAA;KAAH,GAAA,KAAA;AAAA,QAAgB+B,UAAhB,GAAA,wBAAA,CAAA,KAAA,EAAA,UAAA,CAAA,CAAA;;AAAA,IAAA,oBACGhD,KAAC,CAAA0C,aAAD,CAACO,GAAD;AACIC,MAAAA,KAAK,EAAC;AACNC,MAAAA,OAAO,EAAC;MACRP,SAAS,EAAEjB,gBAAM,CAACyB;AAClBlD,MAAAA,GAAG,EAAEkB,YAAAA;KAJT,eAMIpB,KACQ,CAAA0C,aADR,CACQ,UADR,EAAAW,cAAA,CAAAA,cAAA,CAAAA,cAAA,CAAA,EAAA,EACQlC,KADR,CAAA,EAEQ6B,UAFR,CAAA,EAAA,EAAA,EAAA;AAGI9C,MAAAA,GAAG,EAAEqB,WAHT;AAIIT,MAAAA,IAAI,EAAEA,IAJV;AAKI8B,MAAAA,SAAS,EAAEnB,iBALf;AAMId,MAAAA,SAAS,EAAEA,SANf;MAOIM,QAAQ,EAAGmB,KAAD,IAAU;AAChBlB,QAAAA,gBAAgB,IAAhB,IAAA,GAAA,KAAA,CAAA,GAAAA,gBAAgB,CAAGkB,KAAH,CAAhB,CAAA;AACAnB,QAAAA,QAAQ,IAAR,IAAA,GAAA,KAAA,CAAA,GAAAA,QAAQ,CAAGmB,KAAH,CAAR,CAAA;AACH,OAAA;AAVL,KAAA,CAAA,CANJ,CADH,CAAA;AAAA,GAlBL,CADJ,CAAA;AA0CH,CApGgB;;;;"}
+{"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\n    extends Omit<FieldComponentProps<HTMLTextAreaElement>, 'characterCountPosition'>,\n        Omit<BaseFieldVariantProps, 'supportsStartAndEndSlots' | 'endSlot' | 'endSlotPosition'> {\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":["TextArea","React","forwardRef","ref","variant","id","label","value","auxiliaryLabel","message","tone","maxWidth","maxLength","hidden","ariaDescribedBy","rows","autoExpand","disableResize","onChange","originalOnChange","props","containerRef","useRef","internalRef","combinedRef","useMergeRefs","textAreaClassName","classNames","styles","useEffect","setupAutoExpand","containerElement","current","handleAutoExpand","dataset","replicatedValue","handleInput","event","currentTarget","textAreaElement","undefined","addEventListener","removeEventListener","createElement","BaseField","className","textAreaContainer","error","bordered","extraProps","Box","width","display","innerContainer","_objectSpread"],"mappings":"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"}

package/es/text-field/text-field.js

@@ -5,7 +5,7 @@ import { Box } from '../box/box.js';
 import modules_aaf25250 from './text-field.module.css.js';
 import { useMergeRefs } from 'use-callback-ref';
 
-const _excluded = ["variant", "id", "label", "value", "auxiliaryLabel", "message", "tone", "type", "maxWidth", "maxLength", "hidden", "aria-describedby", "startSlot", "endSlot", "onChange", "characterCountPosition"],
+const _excluded = ["variant", "id", "label", "value", "auxiliaryLabel", "message", "tone", "type", "maxWidth", "maxLength", "hidden", "aria-describedby", "startSlot", "endSlot", "onChange", "characterCountPosition", "endSlotPosition"],
       _excluded2 = ["onChange", "characterCountElement"];
 const TextField = /*#__PURE__*/React.forwardRef(function TextField(_ref, ref) {
   let {
@@ -24,7 +24,8 @@ const TextField = /*#__PURE__*/React.forwardRef(function TextField(_ref, ref) {
     startSlot,
     endSlot,
     onChange: originalOnChange,
-    characterCountPosition = 'below'
+    characterCountPosition = 'below',
+    endSlotPosition = 'bottom'
   } = _ref,
       props = _objectWithoutProperties(_ref, _excluded);
 
@@ -38,6 +39,7 @@ const TextField = /*#__PURE__*/React.forwardRef(function TextField(_ref, ref) {
     (_internalRef$current = internalRef.current) == null ? void 0 : _internalRef$current.focus();
   }
 
+  const displayEndSlot = endSlot && (variant === 'default' || variant === 'bordered' && endSlotPosition === 'bottom');
   return /*#__PURE__*/React.createElement(BaseField, {
     variant: variant,
     id: id,
@@ -50,7 +52,10 @@ const TextField = /*#__PURE__*/React.forwardRef(function TextField(_ref, ref) {
     maxLength: maxLength,
     hidden: hidden,
     "aria-describedby": ariaDescribedBy,
-    characterCountPosition: characterCountPosition
+    characterCountPosition: characterCountPosition,
+    supportsStartAndEndSlots: true,
+    endSlot: endSlot,
+    endSlotPosition: variant === 'bordered' ? endSlotPosition : undefined
   }, _ref2 => {
     let {
       onChange,
@@ -76,12 +81,12 @@ const TextField = /*#__PURE__*/React.forwardRef(function TextField(_ref, ref) {
         originalOnChange == null ? void 0 : originalOnChange(event);
         onChange == null ? void 0 : onChange(event);
       }
-    })), endSlot || characterCountElement ? /*#__PURE__*/React.createElement(Box, {
+    })), displayEndSlot || characterCountElement ? /*#__PURE__*/React.createElement(Box, {
       className: modules_aaf25250.slot,
       display: "flex",
       marginRight: variant === 'bordered' ? '-xsmall' : 'xsmall',
       marginLeft: variant === 'bordered' ? 'xsmall' : '-xsmall'
-    }, characterCountElement, endSlot) : null);
+    }, characterCountElement, displayEndSlot ? endSlot : null) : null);
   });
 });
 

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

@@ -1 +1 @@
-{"version":3,"file":"text-field.js","sources":["../../src/text-field/text-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { BaseField, BaseFieldVariantProps } from '../base-field'\nimport { Box } from '../box'\nimport styles from './text-field.module.css'\nimport type { BaseFieldProps, FieldComponentProps } from '../base-field'\nimport { useMergeRefs } from 'use-callback-ref'\n\ntype TextFieldType = 'email' | 'search' | 'tel' | 'text' | 'url'\n\ninterface TextFieldProps\n    extends Omit<FieldComponentProps<HTMLInputElement>, 'type'>,\n        BaseFieldVariantProps,\n        Pick<BaseFieldProps, 'characterCountPosition'> {\n    type?: TextFieldType\n    startSlot?: React.ReactElement | string | number\n    endSlot?: React.ReactElement | string | number\n    /**\n     * The maximum number of characters that the input field can accept.\n     * When this limit is reached, the input field will not accept any more characters.\n     * The counter element will turn red when the number of characters is within 10 of the maximum limit.\n     */\n    maxLength?: number\n}\n\nconst TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(function TextField(\n    {\n        variant = 'default',\n        id,\n        label,\n        value,\n        auxiliaryLabel,\n        message,\n        tone,\n        type = 'text',\n        maxWidth,\n        maxLength,\n        hidden,\n        'aria-describedby': ariaDescribedBy,\n        startSlot,\n        endSlot,\n        onChange: originalOnChange,\n        characterCountPosition = 'below',\n        ...props\n    },\n    ref,\n) {\n    const internalRef = React.useRef<HTMLInputElement>(null)\n    const combinedRef = useMergeRefs([ref, internalRef])\n\n    function handleClick(event: React.MouseEvent) {\n        if (event.currentTarget === combinedRef.current) return\n        internalRef.current?.focus()\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            maxWidth={maxWidth}\n            maxLength={maxLength}\n            hidden={hidden}\n            aria-describedby={ariaDescribedBy}\n            characterCountPosition={characterCountPosition}\n        >\n            {({ onChange, characterCountElement, ...extraProps }) => (\n                <Box\n                    display=\"flex\"\n                    alignItems=\"center\"\n                    className={[\n                        styles.inputWrapper,\n                        tone === 'error' ? styles.error : null,\n                        variant === 'bordered' ? styles.bordered : null,\n                        props.readOnly ? styles.readOnly : null,\n                    ]}\n                    onClick={handleClick}\n                >\n                    {startSlot ? (\n                        <Box\n                            className={styles.slot}\n                            display=\"flex\"\n                            marginRight={variant === 'bordered' ? 'xsmall' : '-xsmall'}\n                            marginLeft={variant === 'bordered' ? '-xsmall' : 'xsmall'}\n                        >\n                            {startSlot}\n                        </Box>\n                    ) : null}\n                    <input\n                        {...props}\n                        {...extraProps}\n                        type={type}\n                        ref={combinedRef}\n                        maxLength={maxLength}\n                        onChange={(event) => {\n                            originalOnChange?.(event)\n                            onChange?.(event)\n                        }}\n                    />\n                    {endSlot || characterCountElement ? (\n                        <Box\n                            className={styles.slot}\n                            display=\"flex\"\n                            marginRight={variant === 'bordered' ? '-xsmall' : 'xsmall'}\n                            marginLeft={variant === 'bordered' ? 'xsmall' : '-xsmall'}\n                        >\n                            {characterCountElement}\n                            {endSlot}\n                        </Box>\n                    ) : null}\n                </Box>\n            )}\n        </BaseField>\n    )\n})\n\nexport { TextField }\nexport type { TextFieldProps, TextFieldType }\n"],"names":["TextField","React","forwardRef","ref","variant","id","label","value","auxiliaryLabel","message","tone","type","maxWidth","maxLength","hidden","ariaDescribedBy","startSlot","endSlot","onChange","originalOnChange","characterCountPosition","props","internalRef","useRef","combinedRef","useMergeRefs","handleClick","event","currentTarget","current","focus","createElement","BaseField","characterCountElement","extraProps","Box","display","alignItems","className","styles","inputWrapper","error","bordered","readOnly","onClick","slot","marginRight","marginLeft"],"mappings":"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"}
+{"version":3,"file":"text-field.js","sources":["../../src/text-field/text-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { BaseField, BaseFieldVariantProps } from '../base-field'\nimport { Box } from '../box'\nimport styles from './text-field.module.css'\nimport type { BaseFieldProps, FieldComponentProps } from '../base-field'\nimport { useMergeRefs } from 'use-callback-ref'\n\ntype TextFieldType = 'email' | 'search' | 'tel' | 'text' | 'url'\n\ninterface TextFieldProps\n    extends Omit<FieldComponentProps<HTMLInputElement>, 'type' | 'supportsStartAndEndSlots'>,\n        BaseFieldVariantProps,\n        Pick<BaseFieldProps, 'characterCountPosition'> {\n    type?: TextFieldType\n    startSlot?: React.ReactElement | string | number\n    endSlot?: React.ReactElement | string | number\n    /**\n     * The maximum number of characters that the input field can accept.\n     * When this limit is reached, the input field will not accept any more characters.\n     * The counter element will turn red when the number of characters is within 10 of the maximum limit.\n     */\n    maxLength?: number\n}\n\nconst TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(function TextField(\n    {\n        variant = 'default',\n        id,\n        label,\n        value,\n        auxiliaryLabel,\n        message,\n        tone,\n        type = 'text',\n        maxWidth,\n        maxLength,\n        hidden,\n        'aria-describedby': ariaDescribedBy,\n        startSlot,\n        endSlot,\n        onChange: originalOnChange,\n        characterCountPosition = 'below',\n        endSlotPosition = 'bottom',\n        ...props\n    },\n    ref,\n) {\n    const internalRef = React.useRef<HTMLInputElement>(null)\n    const combinedRef = useMergeRefs([ref, internalRef])\n\n    function handleClick(event: React.MouseEvent) {\n        if (event.currentTarget === combinedRef.current) return\n        internalRef.current?.focus()\n    }\n\n    const displayEndSlot =\n        endSlot &&\n        (variant === 'default' || (variant === 'bordered' && endSlotPosition === 'bottom'))\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            maxLength={maxLength}\n            hidden={hidden}\n            aria-describedby={ariaDescribedBy}\n            characterCountPosition={characterCountPosition}\n            supportsStartAndEndSlots\n            endSlot={endSlot}\n            endSlotPosition={variant === 'bordered' ? endSlotPosition : undefined}\n        >\n            {({ onChange, characterCountElement, ...extraProps }) => (\n                <Box\n                    display=\"flex\"\n                    alignItems=\"center\"\n                    className={[\n                        styles.inputWrapper,\n                        tone === 'error' ? styles.error : null,\n                        variant === 'bordered' ? styles.bordered : null,\n                        props.readOnly ? styles.readOnly : null,\n                    ]}\n                    onClick={handleClick}\n                >\n                    {startSlot ? (\n                        <Box\n                            className={styles.slot}\n                            display=\"flex\"\n                            marginRight={variant === 'bordered' ? 'xsmall' : '-xsmall'}\n                            marginLeft={variant === 'bordered' ? '-xsmall' : 'xsmall'}\n                        >\n                            {startSlot}\n                        </Box>\n                    ) : null}\n                    <input\n                        {...props}\n                        {...extraProps}\n                        type={type}\n                        ref={combinedRef}\n                        maxLength={maxLength}\n                        onChange={(event) => {\n                            originalOnChange?.(event)\n                            onChange?.(event)\n                        }}\n                    />\n                    {displayEndSlot || characterCountElement ? (\n                        <Box\n                            className={styles.slot}\n                            display=\"flex\"\n                            marginRight={variant === 'bordered' ? '-xsmall' : 'xsmall'}\n                            marginLeft={variant === 'bordered' ? 'xsmall' : '-xsmall'}\n                        >\n                            {characterCountElement}\n                            {displayEndSlot ? endSlot : null}\n                        </Box>\n                    ) : null}\n                </Box>\n            )}\n        </BaseField>\n    )\n})\n\nexport { TextField }\nexport type { TextFieldProps, TextFieldType }\n"],"names":["TextField","React","forwardRef","ref","variant","id","label","value","auxiliaryLabel","message","tone","type","maxWidth","maxLength","hidden","ariaDescribedBy","startSlot","endSlot","onChange","originalOnChange","characterCountPosition","endSlotPosition","props","internalRef","useRef","combinedRef","useMergeRefs","handleClick","event","currentTarget","current","focus","displayEndSlot","BaseField","supportsStartAndEndSlots","undefined","characterCountElement","extraProps","createElement","Box","display","alignItems","className","styles","inputWrapper","error","bordered","readOnly","onClick","slot","marginRight","marginLeft"],"mappings":"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"}

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

@@ -116,11 +116,24 @@ export type BaseFieldProps = WithEnhancedClassName & Pick<HtmlInputProps<HTMLInp
      * @default 'below'
      */
     characterCountPosition?: 'below' | 'inline' | 'hidden';
-};
+} & ({
+    supportsStartAndEndSlots?: false;
+    endSlot?: never;
+    endSlotPosition?: never;
+} | {
+    supportsStartAndEndSlots: true;
+    endSlot?: React.ReactElement | string | number;
+    /**
+     * This is solely for `bordered` variants of TextField. When set to `bottom` (the default),
+     * the endSlot will be placed inline with the input field. When set to `fullHeight`, the endSlot
+     * will be placed to the side of both the input field and the label.
+     */
+    endSlotPosition?: 'bottom' | 'fullHeight';
+});
 type FieldComponentProps<T extends HTMLElement> = Omit<BaseFieldProps, 'children' | 'className' | 'fieldRef' | 'variant'> & Omit<HtmlInputProps<T>, 'className' | 'style'>;
 /**
  * BaseField is a base component that provides a consistent structure for form fields.
  */
-declare function BaseField({ variant, label, value, auxiliaryLabel, message, tone, className, children, maxWidth, maxLength, hidden, 'aria-describedby': originalAriaDescribedBy, id: originalId, characterCountPosition, }: BaseFieldProps & BaseFieldVariantProps & WithEnhancedClassName): React.JSX.Element;
+declare function BaseField({ variant, label, value, auxiliaryLabel, message, tone, className, children, maxWidth, maxLength, hidden, 'aria-describedby': originalAriaDescribedBy, id: originalId, characterCountPosition, endSlot, endSlotPosition, }: 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"),t=require("react"),n=require("../box/box.js"),r=require("../utils/common-helpers.js"),l=require("../text/text.js"),a=require("./base-field.module.css.js"),u=require("../stack/stack.js"),i=require("../spinner/spinner.js"),o=require("../columns/columns.js");function s(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=s(t);function d(e){return"error"===e?"danger":"success"===e?"positive":"secondary"}function m({id:e,children:t,tone:r}){return c.createElement(l.Text,{as:"p",tone:d(r),size:"copy",id:e},"loading"===r?c.createElement(n.Box,{as:"span",marginRight:"xsmall",display:"inlineFlex",className:a.default.loadingIcon},c.createElement(i.Spinner,{size:16})):null,t)}function f({children:e,tone:t}){return c.createElement(l.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<=0?"error":"neutral"}}exports.BaseField=function({variant:t="default",label:i,value:s,auxiliaryLabel:d,message:x,tone:b="neutral",className:h,children:g,maxWidth:E,maxLength:v,hidden:j,"aria-describedby":y,id:q,characterCountPosition:L="below"}){const B=r.useId(q),C=r.useId(),S=p({value:s,maxLength:v}),[w,O]=c.useState(S.count),[_,N]=c.useState(S.tone),P=null!=y?y:x?C:null;function k(){return"hidden"!==L?c.createElement(f,{tone:_},w):null}const z=e.objectSpread2(e.objectSpread2({id:B,value:s},P?{"aria-describedby":P}:{}),{},{"aria-invalid":"error"===b||void 0,onChange(e){if(!v)return;const t=p({value:e.currentTarget.value,maxLength:v});O(t.count),N(t.tone)},characterCountElement:"inline"===L?k():null});return c.useEffect((function(){if(!v)return;const e=p({value:s,maxLength:v});O(e.count),N(e.tone)}),[v,s]),c.createElement(u.Stack,{space:"xsmall",hidden:j},c.createElement(n.Box,{className:[h,a.default.container,"error"===b?a.default.error:null,"bordered"===t?a.default.bordered:null],maxWidth:E},i||d?c.createElement(n.Box,{as:"span",display:"flex",justifyContent:"spaceBetween",alignItems:"flexEnd"},c.createElement(l.Text,{size:"bordered"===t?"caption":"body",as:"label",htmlFor:B},i?c.createElement("span",{className:a.default.primaryLabel},i):null),d?c.createElement(n.Box,{className:a.default.auxiliaryLabel,paddingLeft:"small"},d):null):null,g(z)),x||w?c.createElement(o.Columns,{align:"right",space:"small",maxWidth:E},x?c.createElement(o.Column,{width:"auto"},c.createElement(m,{id:C,tone:b},x)):null,"below"===L?c.createElement(o.Column,{width:"content"},k()):null):null)},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"),l=require("../text/text.js"),a=require("./base-field.module.css.js"),i=require("../stack/stack.js"),u=require("../spinner/spinner.js"),o=require("../columns/columns.js");function s(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=s(t);function d(e){return"error"===e?"danger":"success"===e?"positive":"secondary"}function m({id:e,children:t,tone:r}){return c.createElement(l.Text,{as:"p",tone:d(r),size:"copy",id:e},"loading"===r?c.createElement(n.Box,{as:"span",marginRight:"xsmall",display:"inlineFlex",className:a.default.loadingIcon},c.createElement(u.Spinner,{size:16})):null,t)}function f({children:e,tone:t}){return c.createElement(l.Text,{tone:d(t),size:"copy"},e)}function x({value:e,maxLength:t}){if(!t)return{count:null,tone:"neutral"};const n=String(e||"").length;return{count:n+"/"+t,tone:t-n<=0?"error":"neutral"}}exports.BaseField=function({variant:t="default",label:u,value:s,auxiliaryLabel:d,message:p,tone:b="neutral",className:g,children:h,maxWidth:E,maxLength:v,hidden:y,"aria-describedby":j,id:q,characterCountPosition:L="below",endSlot:S,endSlotPosition:w="bottom"}){const B=r.useId(q),C=r.useId(),O=x({value:s,maxLength:v}),[P,_]=c.useState(O.count),[I,N]=c.useState(O.tone),k=null!=j?j:p?C:null;function z(){return"hidden"!==L?c.createElement(f,{tone:I},P):null}const F=e.objectSpread2(e.objectSpread2({id:B,value:s},k?{"aria-describedby":k}:{}),{},{"aria-invalid":"error"===b||void 0,onChange(e){if(!v)return;const t=x({value:e.currentTarget.value,maxLength:v});_(t.count),N(t.tone)},characterCountElement:"inline"===L?z():null});return c.useEffect((function(){if(!v)return;const e=x({value:s,maxLength:v});_(e.count),N(e.tone)}),[v,s]),c.createElement(i.Stack,{space:"xsmall",hidden:y},c.createElement(n.Box,{display:"flex",flexDirection:"row",className:[g,a.default.container,"error"===b?a.default.error:null,"bordered"===t?a.default.bordered:null],maxWidth:E,alignItems:"center"},c.createElement(n.Box,{flexGrow:1},u||d?c.createElement(n.Box,{as:"span",display:"flex",justifyContent:"spaceBetween",alignItems:"flexEnd"},c.createElement(l.Text,{size:"bordered"===t?"caption":"body",as:"label",htmlFor:B},u?c.createElement("span",{className:a.default.primaryLabel},u):null),d?c.createElement(n.Box,{className:a.default.auxiliaryLabel,paddingLeft:"small"},d):null):null,h(F)),S&&"fullHeight"===w?S:null),p||P?c.createElement(o.Columns,{align:"right",space:"small",maxWidth:E},p?c.createElement(o.Column,{width:"auto"},c.createElement(m,{id:C,tone:b},p)):null,"below"===L?c.createElement(o.Column,{width:"content"},z()):null):null)},exports.FieldMessage=m;
 //# sourceMappingURL=base-field.js.map