@doist/reactist 27.2.1 → 27.3.0

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

@@ -8,7 +8,9 @@ import { Stack } from '../stack/stack.js';
 import { Spinner } from '../spinner/spinner.js';
 import { Columns, Column } from '../columns/columns.js';
 
-const MAX_LENGTH_THRESHOLD = 10;
+// See: https://twist.com/a/1585/ch/765851/t/6664583/c/93631846 for latest spec
+
+const MAX_LENGTH_THRESHOLD = 0;
 
 function fieldToneToTextTone(tone) {
   return tone === 'error' ? 'danger' : tone === 'success' ? 'positive' : 'secondary';
@@ -62,6 +64,10 @@ function validateInputLength({
     tone: isNearMaxLength ? 'error' : 'neutral'
   };
 }
+/**
+ * BaseField is a base component that provides a consistent structure for form fields.
+ */
+
 
 function BaseField({
   variant = 'default',
@@ -76,7 +82,8 @@ function BaseField({
   maxLength,
   hidden,
   'aria-describedby': originalAriaDescribedBy,
-  id: originalId
+  id: originalId,
+  characterCountPosition = 'below'
 }) {
   const id = useId(originalId);
   const messageId = useId();
@@ -87,6 +94,16 @@ function BaseField({
   const [characterCount, setCharacterCount] = React.useState(inputLength.count);
   const [characterCountTone, setCharacterCountTone] = React.useState(inputLength.tone);
   const ariaDescribedBy = originalAriaDescribedBy != null ? originalAriaDescribedBy : message ? messageId : null;
+  /**
+   * Renders the character count element.
+   * If the characterCountPosition value is 'hidden', it returns null.
+   */
+
+  function renderCharacterCount() {
+    return characterCountPosition !== 'hidden' ? /*#__PURE__*/React.createElement(FieldCharacterCount, {
+      tone: characterCountTone
+    }, characterCount) : null;
+  }
 
   const childrenProps = _objectSpread2(_objectSpread2({
     id,
@@ -107,8 +124,10 @@ function BaseField({
       });
       setCharacterCount(inputLength.count);
       setCharacterCountTone(inputLength.tone);
-    }
+    },
 
+    // If the character count is inline, we pass it as a prop to the children element so it can be rendered inline
+    characterCountElement: characterCountPosition === 'inline' ? renderCharacterCount() : null
   });
 
   React.useEffect(function updateCharacterCountOnPropChange() {
@@ -152,11 +171,9 @@ function BaseField({
   }, /*#__PURE__*/React.createElement(FieldMessage, {
     id: messageId,
     tone: tone
-  }, message)) : null, characterCount ? /*#__PURE__*/React.createElement(Column, {
+  }, message)) : null, characterCountPosition === 'below' ? /*#__PURE__*/React.createElement(Column, {
     width: "content"
-  }, /*#__PURE__*/React.createElement(FieldCharacterCount, {
-    tone: characterCountTone
-  }, characterCount)) : null) : null);
+  }, renderCharacterCount()) : null) : null);
 }
 
 export { BaseField, FieldMessage };

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\nconst MAX_LENGTH_THRESHOLD = 10\n\ntype FieldTone = 'neutral' | 'success' | 'error' | 'loading'\n\ntype FieldMessageProps = {\n    id: string\n    children: React.ReactNode\n    tone: FieldTone\n}\n\nfunction fieldToneToTextTone(tone: FieldTone) {\n    return tone === 'error' ? 'danger' : tone === 'success' ? 'positive' : 'secondary'\n}\n\nfunction FieldMessage({ id, children, tone }: FieldMessageProps) {\n    return (\n        <Text as=\"p\" tone={fieldToneToTextTone(tone)} size=\"copy\" id={id}>\n            {tone === 'loading' ? (\n                <Box\n                    as=\"span\"\n                    marginRight=\"xsmall\"\n                    display=\"inlineFlex\"\n                    className={styles.loadingIcon}\n                >\n                    <Spinner size={16} />\n                </Box>\n            ) : null}\n            {children}\n        </Text>\n    )\n}\n\ntype FieldCharacterCountProps = {\n    children: React.ReactNode\n    tone: FieldTone\n}\n\nfunction FieldCharacterCount({ children, tone }: FieldCharacterCountProps) {\n    return (\n        <Text tone={fieldToneToTextTone(tone)} size=\"copy\">\n            {children}\n        </Text>\n    )\n}\n\ntype ValidateInputLengthProps = {\n    value?: React.InputHTMLAttributes<unknown>['value']\n    maxLength?: number\n}\n\ntype ValidateInputLengthResult = {\n    count: string | null\n    tone: FieldTone\n}\n\nfunction validateInputLength({\n    value,\n    maxLength,\n}: ValidateInputLengthProps): ValidateInputLengthResult {\n    if (!maxLength) {\n        return {\n            count: null,\n            tone: 'neutral',\n        }\n    }\n\n    const currentLength = String(value || '').length\n    const isNearMaxLength = maxLength - currentLength <= MAX_LENGTH_THRESHOLD\n\n    return {\n        count: `${currentLength}/${maxLength}`,\n        tone: isNearMaxLength ? 'error' : 'neutral',\n    }\n}\n\n//\n// BaseField\n//\n\ntype ChildrenRenderProps = {\n    id: string\n    value?: React.InputHTMLAttributes<unknown>['value']\n    'aria-describedby'?: string\n    'aria-invalid'?: true\n    onChange?: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>\n}\n\ntype HtmlInputProps<T extends HTMLElement> = React.DetailedHTMLProps<\n    React.InputHTMLAttributes<T>,\n    T\n>\n\ntype BaseFieldVariant = 'default' | 'bordered'\ntype BaseFieldVariantProps = {\n    /**\n     * Provides alternative visual layouts or modes that the field can be rendered in.\n     *\n     * Namely, there are two variants supported:\n     *\n     * - the default one\n     * - a \"bordered\" variant, where the border of the field surrounds also the labels, instead\n     *   of just surrounding the actual field element\n     *\n     * In both cases, the message and description texts for the field lie outside the bordered\n     * area.\n     */\n    variant?: BaseFieldVariant\n}\n\ntype BaseFieldProps = WithEnhancedClassName &\n    Pick<HtmlInputProps<HTMLInputElement>, 'id' | 'hidden' | 'maxLength' | 'aria-describedby'> & {\n        /**\n         * The main label for this field element.\n         *\n         * This prop is not optional. Consumers of field components must be explicit about not\n         * wanting a label by passing `label=\"\"` or `label={null}`. In those situations, consumers\n         * should make sure that fields are properly labelled semantically by other means (e.g using\n         * `aria-labelledby`, or rendering a `<label />` element referencing the field by id).\n         *\n         * Avoid providing interactive elements in the label. Prefer `auxiliaryLabel` for that.\n         *\n         * @see BaseFieldProps['auxiliaryLabel']\n         */\n        label: React.ReactNode\n\n        /**\n         * The initial value for this field element.\n         *\n         * This prop is used to calculate the character count for the initial value, and is then\n         * passed to the underlying child element.\n         */\n        value?: React.InputHTMLAttributes<unknown>['value']\n\n        /**\n         * An optional extra element to be placed to the right of the main label.\n         *\n         * This extra element is not included in the accessible name of the field element. Its only\n         * purpose is either visual, or functional (if you include interactive elements in it).\n         *\n         * @see BaseFieldProps['label']\n         *\n         * @deprecated The usage of this element is discouraged given that it was removed from the\n         * latest form field spec revision.\n         */\n        auxiliaryLabel?: React.ReactNode\n\n        /**\n         * A message associated with the field. It is rendered below the field, and with an\n         * appearance that conveys the tone of the field (e.g. coloured red for errors, green for\n         * success, etc).\n         *\n         * The message element is associated to the field via the `aria-describedby` attribute.\n         *\n         * In the future, when `aria-errormessage` gets better user agent support, we should use it\n         * to associate the filed with a message when tone is `\"error\"`.\n         *\n         * @see BaseFieldProps['tone']\n         * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-errormessage\n         * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-invalid\n         */\n        message?: React.ReactNode\n\n        /**\n         * The tone with which the message, if any, is presented.\n         *\n         * If the tone is `\"error\"`, the field border turns red, and the message, if any, is also\n         * red.\n         *\n         * When the tone is `\"loading\"`, it is recommended that you also disable the field. However,\n         * this is not enforced by the component. It is only a recommendation.\n         *\n         * @see BaseFieldProps['message']\n         * @see BaseFieldProps['hint']\n         */\n        tone?: FieldTone\n\n        /**\n         * The maximum width that the input field can expand to.\n         */\n        maxWidth?: BoxProps['maxWidth']\n\n        /**\n         * 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\ntype FieldComponentProps<T extends HTMLElement> = Omit<\n    BaseFieldProps,\n    'children' | 'className' | 'fieldRef' | 'variant'\n> &\n    Omit<HtmlInputProps<T>, 'className' | 'style'>\n\nfunction BaseField({\n    variant = 'default',\n    label,\n    value,\n    auxiliaryLabel,\n    message,\n    tone = 'neutral',\n    className,\n    children,\n    maxWidth,\n    maxLength,\n    hidden,\n    'aria-describedby': originalAriaDescribedBy,\n    id: originalId,\n}: BaseFieldProps & BaseFieldVariantProps & WithEnhancedClassName) {\n    const id = useId(originalId)\n    const messageId = useId()\n\n    const inputLength = validateInputLength({ value, maxLength })\n\n    const [characterCount, setCharacterCount] = React.useState<string | null>(inputLength.count)\n    const [characterCountTone, setCharacterCountTone] = React.useState<FieldTone>(inputLength.tone)\n\n    const ariaDescribedBy = originalAriaDescribedBy ?? (message ? messageId : null)\n\n    const childrenProps: ChildrenRenderProps = {\n        id,\n        value,\n        ...(ariaDescribedBy ? { 'aria-describedby': ariaDescribedBy } : {}),\n        'aria-invalid': tone === 'error' ? true : undefined,\n        onChange(event) {\n            if (!maxLength) {\n                return\n            }\n\n            const inputLength = validateInputLength({\n                value: event.currentTarget.value,\n                maxLength,\n            })\n\n            setCharacterCount(inputLength.count)\n            setCharacterCountTone(inputLength.tone)\n        },\n    }\n\n    React.useEffect(\n        function updateCharacterCountOnPropChange() {\n            if (!maxLength) {\n                return\n            }\n\n            const inputLength = validateInputLength({\n                value,\n                maxLength,\n            })\n\n            setCharacterCount(inputLength.count)\n            setCharacterCountTone(inputLength.tone)\n        },\n        [maxLength, value],\n    )\n\n    return (\n        <Stack space=\"xsmall\" hidden={hidden}>\n            <Box\n                className={[\n                    className,\n                    styles.container,\n                    tone === 'error' ? styles.error : null,\n                    variant === 'bordered' ? styles.bordered : null,\n                ]}\n                maxWidth={maxWidth}\n            >\n                {label || auxiliaryLabel ? (\n                    <Box\n                        as=\"span\"\n                        display=\"flex\"\n                        justifyContent=\"spaceBetween\"\n                        alignItems=\"flexEnd\"\n                    >\n                        <Text\n                            size={variant === 'bordered' ? 'caption' : 'body'}\n                            as=\"label\"\n                            htmlFor={id}\n                        >\n                            {label ? <span className={styles.primaryLabel}>{label}</span> : null}\n                        </Text>\n                        {auxiliaryLabel ? (\n                            <Box className={styles.auxiliaryLabel} paddingLeft=\"small\">\n                                {auxiliaryLabel}\n                            </Box>\n                        ) : null}\n                    </Box>\n                ) : null}\n                {children(childrenProps)}\n            </Box>\n            {message || characterCount ? (\n                <Columns align=\"right\" space=\"small\" maxWidth={maxWidth}>\n                    {message ? (\n                        <Column width=\"auto\">\n                            <FieldMessage id={messageId} tone={tone}>\n                                {message}\n                            </FieldMessage>\n                        </Column>\n                    ) : null}\n                    {characterCount ? (\n                        <Column width=\"content\">\n                            <FieldCharacterCount tone={characterCountTone}>\n                                {characterCount}\n                            </FieldCharacterCount>\n                        </Column>\n                    ) : null}\n                </Columns>\n            ) : null}\n        </Stack>\n    )\n}\n\nexport { BaseField, FieldMessage }\nexport type { BaseFieldVariant, BaseFieldVariantProps, FieldComponentProps }\n"],"names":["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","useId","messageId","inputLength","characterCount","setCharacterCount","useState","characterCountTone","setCharacterCountTone","ariaDescribedBy","childrenProps","_objectSpread","undefined","onChange","event","currentTarget","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\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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"}

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 extends FieldComponentProps<HTMLSelectElement>, BaseFieldVariantProps {}\n\nconst SelectField = React.forwardRef<HTMLSelectElement, SelectFieldProps>(function SelectField(\n    {\n        variant = 'default',\n        id,\n        label,\n        value,\n        auxiliaryLabel,\n        message,\n        tone,\n        maxWidth,\n        children,\n        hidden,\n        'aria-describedby': ariaDescribedBy,\n        onChange: originalOnChange,\n        ...props\n    },\n    ref,\n) {\n    return (\n        <BaseField\n            variant={variant}\n            id={id}\n            label={label}\n            value={value}\n            auxiliaryLabel={auxiliaryLabel}\n            message={message}\n            tone={tone}\n            maxWidth={maxWidth}\n            hidden={hidden}\n            aria-describedby={ariaDescribedBy}\n        >\n            {(extraProps) => (\n                <Box\n                    data-testid=\"select-wrapper\"\n                    className={[\n                        styles.selectWrapper,\n                        tone === 'error' ? styles.error : null,\n                        variant === 'bordered' ? styles.bordered : null,\n                    ]}\n                >\n                    <select\n                        {...props}\n                        {...extraProps}\n                        ref={ref}\n                        onChange={(event) => {\n                            originalOnChange?.(event)\n                        }}\n                    >\n                        {children}\n                    </select>\n                    <SelectChevron aria-hidden />\n                </Box>\n            )}\n        </BaseField>\n    )\n})\n\nfunction SelectChevron(props: JSX.IntrinsicElements['svg']) {\n    return (\n        <svg width=\"16\" height=\"16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n            <path\n                d=\"M11.646 5.646a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 1 1 .708-.708L8 9.293l3.646-3.647z\"\n                fill=\"currentColor\"\n            />\n        </svg>\n    )\n}\n\nexport { SelectField }\nexport type { SelectFieldProps }\n"],"names":["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":";;;;;;;AAOMA,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<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;;;;"}

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

@@ -5,8 +5,8 @@ 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"],
-      _excluded2 = ["onChange"];
+const _excluded = ["variant", "id", "label", "value", "auxiliaryLabel", "message", "tone", "type", "maxWidth", "maxLength", "hidden", "aria-describedby", "startSlot", "endSlot", "onChange", "characterCountPosition"],
+      _excluded2 = ["onChange", "characterCountElement"];
 const TextField = /*#__PURE__*/React.forwardRef(function TextField(_ref, ref) {
   let {
     variant = 'default',
@@ -23,7 +23,8 @@ const TextField = /*#__PURE__*/React.forwardRef(function TextField(_ref, ref) {
     'aria-describedby': ariaDescribedBy,
     startSlot,
     endSlot,
-    onChange: originalOnChange
+    onChange: originalOnChange,
+    characterCountPosition = 'below'
   } = _ref,
       props = _objectWithoutProperties(_ref, _excluded);
 
@@ -48,10 +49,12 @@ const TextField = /*#__PURE__*/React.forwardRef(function TextField(_ref, ref) {
     maxWidth: maxWidth,
     maxLength: maxLength,
     hidden: hidden,
-    "aria-describedby": ariaDescribedBy
+    "aria-describedby": ariaDescribedBy,
+    characterCountPosition: characterCountPosition
   }, _ref2 => {
     let {
-      onChange
+      onChange,
+      characterCountElement
     } = _ref2,
         extraProps = _objectWithoutProperties(_ref2, _excluded2);
 
@@ -73,12 +76,12 @@ const TextField = /*#__PURE__*/React.forwardRef(function TextField(_ref, ref) {
         originalOnChange == null ? void 0 : originalOnChange(event);
         onChange == null ? void 0 : onChange(event);
       }
-    })), endSlot ? /*#__PURE__*/React.createElement(Box, {
+    })), endSlot || characterCountElement ? /*#__PURE__*/React.createElement(Box, {
       className: modules_aaf25250.slot,
       display: "flex",
       marginRight: variant === 'bordered' ? '-xsmall' : 'xsmall',
       marginLeft: variant === 'bordered' ? 'xsmall' : '-xsmall'
-    }, endSlot) : null);
+    }, characterCountElement, endSlot) : 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 { 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    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        ...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        >\n            {({ onChange, ...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 ? (\n                        <Box\n                            className={styles.slot}\n                            display=\"flex\"\n                            marginRight={variant === 'bordered' ? '-xsmall' : 'xsmall'}\n                            marginLeft={variant === 'bordered' ? 'xsmall' : '-xsmall'}\n                        >\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","props","internalRef","useRef","combinedRef","useMergeRefs","handleClick","event","currentTarget","current","focus","createElement","BaseField","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'>,\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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"}

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

@@ -1,4 +1,4 @@
-var modules_aaf25250 = {"inputWrapper":"f2de4e8d","readOnly":"ee26e40c","bordered":"_3afb1a56","error":"f3ff9f57","slot":"_3eb7b0ef"};
+var modules_aaf25250 = {"inputWrapper":"c8f65b3b","readOnly":"_326f2644","bordered":"_5252fd3d","error":"_0141b7ac","slot":"b79b851f"};
 
 export { modules_aaf25250 as default };
 //# sourceMappingURL=text-field.module.css.js.map

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

@@ -14,6 +14,7 @@ type ChildrenRenderProps = {
     'aria-describedby'?: string;
     'aria-invalid'?: true;
     onChange?: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>;
+    characterCountElement?: React.ReactNode | null;
 };
 type HtmlInputProps<T extends HTMLElement> = React.DetailedHTMLProps<React.InputHTMLAttributes<T>, T>;
 type BaseFieldVariant = 'default' | 'bordered';
@@ -32,7 +33,7 @@ type BaseFieldVariantProps = {
      */
     variant?: BaseFieldVariant;
 };
-type BaseFieldProps = WithEnhancedClassName & Pick<HtmlInputProps<HTMLInputElement>, 'id' | 'hidden' | 'maxLength' | 'aria-describedby'> & {
+export type BaseFieldProps = WithEnhancedClassName & Pick<HtmlInputProps<HTMLInputElement>, 'id' | 'hidden' | 'maxLength' | 'aria-describedby'> & {
     /**
      * The main label for this field element.
      *
@@ -108,8 +109,18 @@ type BaseFieldProps = WithEnhancedClassName & Pick<HtmlInputProps<HTMLInputEleme
      * the public props of such components.
      */
     children: (props: ChildrenRenderProps) => React.ReactNode;
+    /**
+     * The position of the character count element.
+     * It can be shown below the field or inline with the field.
+     *
+     * @default 'below'
+     */
+    characterCountPosition?: 'below' | 'inline' | 'hidden';
 };
 type FieldComponentProps<T extends HTMLElement> = Omit<BaseFieldProps, 'children' | 'className' | 'fieldRef' | 'variant'> & Omit<HtmlInputProps<T>, 'className' | 'style'>;
-declare function BaseField({ variant, label, value, auxiliaryLabel, message, tone, className, children, maxWidth, maxLength, hidden, 'aria-describedby': originalAriaDescribedBy, id: originalId, }: BaseFieldProps & BaseFieldVariantProps & WithEnhancedClassName): React.JSX.Element;
+/**
+ * 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;
 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"),a=require("../text/text.js"),l=require("./base-field.module.css.js"),u=require("../stack/stack.js"),i=require("../spinner/spinner.js"),s=require("../columns/columns.js");function o(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var r=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,r.get?r:{enumerable:!0,get:function(){return e[n]}})}})),t.default=e,t}var c=o(t);function d(e){return"error"===e?"danger":"success"===e?"positive":"secondary"}function m({id:e,children:t,tone:r}){return c.createElement(a.Text,{as:"p",tone:d(r),size:"copy",id:e},"loading"===r?c.createElement(n.Box,{as:"span",marginRight:"xsmall",display:"inlineFlex",className:l.default.loadingIcon},c.createElement(i.Spinner,{size:16})):null,t)}function f({children:e,tone:t}){return c.createElement(a.Text,{tone:d(t),size:"copy"},e)}function p({value:e,maxLength:t}){if(!t)return{count:null,tone:"neutral"};const n=String(e||"").length;return{count:n+"/"+t,tone:t-n<=10?"error":"neutral"}}exports.BaseField=function({variant:t="default",label:i,value:o,auxiliaryLabel:d,message:x,tone:b="neutral",className:g,children:h,maxWidth:E,maxLength:v,hidden:j,"aria-describedby":y,id:q}){const L=r.useId(q),B=r.useId(),S=p({value:o,maxLength:v}),[O,_]=c.useState(S.count),[C,N]=c.useState(S.tone),k=null!=y?y:x?B:null,w=e.objectSpread2(e.objectSpread2({id:L,value:o},k?{"aria-describedby":k}:{}),{},{"aria-invalid":"error"===b||void 0,onChange(e){if(!v)return;const t=p({value:e.currentTarget.value,maxLength:v});_(t.count),N(t.tone)}});return c.useEffect((function(){if(!v)return;const e=p({value:o,maxLength:v});_(e.count),N(e.tone)}),[v,o]),c.createElement(u.Stack,{space:"xsmall",hidden:j},c.createElement(n.Box,{className:[g,l.default.container,"error"===b?l.default.error:null,"bordered"===t?l.default.bordered:null],maxWidth:E},i||d?c.createElement(n.Box,{as:"span",display:"flex",justifyContent:"spaceBetween",alignItems:"flexEnd"},c.createElement(a.Text,{size:"bordered"===t?"caption":"body",as:"label",htmlFor:L},i?c.createElement("span",{className:l.default.primaryLabel},i):null),d?c.createElement(n.Box,{className:l.default.auxiliaryLabel,paddingLeft:"small"},d):null):null,h(w)),x||O?c.createElement(s.Columns,{align:"right",space:"small",maxWidth:E},x?c.createElement(s.Column,{width:"auto"},c.createElement(m,{id:B,tone:b},x)):null,O?c.createElement(s.Column,{width:"content"},c.createElement(f,{tone:C},O)):null):null)},exports.FieldMessage=m;
+"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;
 //# sourceMappingURL=base-field.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"base-field.js","sources":["../../src/base-field/base-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Box, BoxProps } from '../box'\nimport { useId } from '../utils/common-helpers'\nimport { Text } from '../text'\nimport styles from './base-field.module.css'\nimport { Stack } from '../stack'\n\nimport type { WithEnhancedClassName } from '../utils/common-types'\nimport { Spinner } from '../spinner'\nimport { Column, Columns } from '../columns'\n\nconst MAX_LENGTH_THRESHOLD = 10\n\ntype FieldTone = 'neutral' | 'success' | 'error' | 'loading'\n\ntype FieldMessageProps = {\n    id: string\n    children: React.ReactNode\n    tone: FieldTone\n}\n\nfunction fieldToneToTextTone(tone: FieldTone) {\n    return tone === 'error' ? 'danger' : tone === 'success' ? 'positive' : 'secondary'\n}\n\nfunction FieldMessage({ id, children, tone }: FieldMessageProps) {\n    return (\n        <Text as=\"p\" tone={fieldToneToTextTone(tone)} size=\"copy\" id={id}>\n            {tone === 'loading' ? (\n                <Box\n                    as=\"span\"\n                    marginRight=\"xsmall\"\n                    display=\"inlineFlex\"\n                    className={styles.loadingIcon}\n                >\n                    <Spinner size={16} />\n                </Box>\n            ) : null}\n            {children}\n        </Text>\n    )\n}\n\ntype FieldCharacterCountProps = {\n    children: React.ReactNode\n    tone: FieldTone\n}\n\nfunction FieldCharacterCount({ children, tone }: FieldCharacterCountProps) {\n    return (\n        <Text tone={fieldToneToTextTone(tone)} size=\"copy\">\n            {children}\n        </Text>\n    )\n}\n\ntype ValidateInputLengthProps = {\n    value?: React.InputHTMLAttributes<unknown>['value']\n    maxLength?: number\n}\n\ntype ValidateInputLengthResult = {\n    count: string | null\n    tone: FieldTone\n}\n\nfunction validateInputLength({\n    value,\n    maxLength,\n}: ValidateInputLengthProps): ValidateInputLengthResult {\n    if (!maxLength) {\n        return {\n            count: null,\n            tone: 'neutral',\n        }\n    }\n\n    const currentLength = String(value || '').length\n    const isNearMaxLength = maxLength - currentLength <= MAX_LENGTH_THRESHOLD\n\n    return {\n        count: `${currentLength}/${maxLength}`,\n        tone: isNearMaxLength ? 'error' : 'neutral',\n    }\n}\n\n//\n// BaseField\n//\n\ntype ChildrenRenderProps = {\n    id: string\n    value?: React.InputHTMLAttributes<unknown>['value']\n    'aria-describedby'?: string\n    'aria-invalid'?: true\n    onChange?: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>\n}\n\ntype HtmlInputProps<T extends HTMLElement> = React.DetailedHTMLProps<\n    React.InputHTMLAttributes<T>,\n    T\n>\n\ntype BaseFieldVariant = 'default' | 'bordered'\ntype BaseFieldVariantProps = {\n    /**\n     * Provides alternative visual layouts or modes that the field can be rendered in.\n     *\n     * Namely, there are two variants supported:\n     *\n     * - the default one\n     * - a \"bordered\" variant, where the border of the field surrounds also the labels, instead\n     *   of just surrounding the actual field element\n     *\n     * In both cases, the message and description texts for the field lie outside the bordered\n     * area.\n     */\n    variant?: BaseFieldVariant\n}\n\ntype BaseFieldProps = WithEnhancedClassName &\n    Pick<HtmlInputProps<HTMLInputElement>, 'id' | 'hidden' | 'maxLength' | 'aria-describedby'> & {\n        /**\n         * The main label for this field element.\n         *\n         * This prop is not optional. Consumers of field components must be explicit about not\n         * wanting a label by passing `label=\"\"` or `label={null}`. In those situations, consumers\n         * should make sure that fields are properly labelled semantically by other means (e.g using\n         * `aria-labelledby`, or rendering a `<label />` element referencing the field by id).\n         *\n         * Avoid providing interactive elements in the label. Prefer `auxiliaryLabel` for that.\n         *\n         * @see BaseFieldProps['auxiliaryLabel']\n         */\n        label: React.ReactNode\n\n        /**\n         * The initial value for this field element.\n         *\n         * This prop is used to calculate the character count for the initial value, and is then\n         * passed to the underlying child element.\n         */\n        value?: React.InputHTMLAttributes<unknown>['value']\n\n        /**\n         * An optional extra element to be placed to the right of the main label.\n         *\n         * This extra element is not included in the accessible name of the field element. Its only\n         * purpose is either visual, or functional (if you include interactive elements in it).\n         *\n         * @see BaseFieldProps['label']\n         *\n         * @deprecated The usage of this element is discouraged given that it was removed from the\n         * latest form field spec revision.\n         */\n        auxiliaryLabel?: React.ReactNode\n\n        /**\n         * A message associated with the field. It is rendered below the field, and with an\n         * appearance that conveys the tone of the field (e.g. coloured red for errors, green for\n         * success, etc).\n         *\n         * The message element is associated to the field via the `aria-describedby` attribute.\n         *\n         * In the future, when `aria-errormessage` gets better user agent support, we should use it\n         * to associate the filed with a message when tone is `\"error\"`.\n         *\n         * @see BaseFieldProps['tone']\n         * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-errormessage\n         * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-invalid\n         */\n        message?: React.ReactNode\n\n        /**\n         * The tone with which the message, if any, is presented.\n         *\n         * If the tone is `\"error\"`, the field border turns red, and the message, if any, is also\n         * red.\n         *\n         * When the tone is `\"loading\"`, it is recommended that you also disable the field. However,\n         * this is not enforced by the component. It is only a recommendation.\n         *\n         * @see BaseFieldProps['message']\n         * @see BaseFieldProps['hint']\n         */\n        tone?: FieldTone\n\n        /**\n         * The maximum width that the input field can expand to.\n         */\n        maxWidth?: BoxProps['maxWidth']\n\n        /**\n         * 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\ntype FieldComponentProps<T extends HTMLElement> = Omit<\n    BaseFieldProps,\n    'children' | 'className' | 'fieldRef' | 'variant'\n> &\n    Omit<HtmlInputProps<T>, 'className' | 'style'>\n\nfunction BaseField({\n    variant = 'default',\n    label,\n    value,\n    auxiliaryLabel,\n    message,\n    tone = 'neutral',\n    className,\n    children,\n    maxWidth,\n    maxLength,\n    hidden,\n    'aria-describedby': originalAriaDescribedBy,\n    id: originalId,\n}: BaseFieldProps & BaseFieldVariantProps & WithEnhancedClassName) {\n    const id = useId(originalId)\n    const messageId = useId()\n\n    const inputLength = validateInputLength({ value, maxLength })\n\n    const [characterCount, setCharacterCount] = React.useState<string | null>(inputLength.count)\n    const [characterCountTone, setCharacterCountTone] = React.useState<FieldTone>(inputLength.tone)\n\n    const ariaDescribedBy = originalAriaDescribedBy ?? (message ? messageId : null)\n\n    const childrenProps: ChildrenRenderProps = {\n        id,\n        value,\n        ...(ariaDescribedBy ? { 'aria-describedby': ariaDescribedBy } : {}),\n        'aria-invalid': tone === 'error' ? true : undefined,\n        onChange(event) {\n            if (!maxLength) {\n                return\n            }\n\n            const inputLength = validateInputLength({\n                value: event.currentTarget.value,\n                maxLength,\n            })\n\n            setCharacterCount(inputLength.count)\n            setCharacterCountTone(inputLength.tone)\n        },\n    }\n\n    React.useEffect(\n        function updateCharacterCountOnPropChange() {\n            if (!maxLength) {\n                return\n            }\n\n            const inputLength = validateInputLength({\n                value,\n                maxLength,\n            })\n\n            setCharacterCount(inputLength.count)\n            setCharacterCountTone(inputLength.tone)\n        },\n        [maxLength, value],\n    )\n\n    return (\n        <Stack space=\"xsmall\" hidden={hidden}>\n            <Box\n                className={[\n                    className,\n                    styles.container,\n                    tone === 'error' ? styles.error : null,\n                    variant === 'bordered' ? styles.bordered : null,\n                ]}\n                maxWidth={maxWidth}\n            >\n                {label || auxiliaryLabel ? (\n                    <Box\n                        as=\"span\"\n                        display=\"flex\"\n                        justifyContent=\"spaceBetween\"\n                        alignItems=\"flexEnd\"\n                    >\n                        <Text\n                            size={variant === 'bordered' ? 'caption' : 'body'}\n                            as=\"label\"\n                            htmlFor={id}\n                        >\n                            {label ? <span className={styles.primaryLabel}>{label}</span> : null}\n                        </Text>\n                        {auxiliaryLabel ? (\n                            <Box className={styles.auxiliaryLabel} paddingLeft=\"small\">\n                                {auxiliaryLabel}\n                            </Box>\n                        ) : null}\n                    </Box>\n                ) : null}\n                {children(childrenProps)}\n            </Box>\n            {message || characterCount ? (\n                <Columns align=\"right\" space=\"small\" maxWidth={maxWidth}>\n                    {message ? (\n                        <Column width=\"auto\">\n                            <FieldMessage id={messageId} tone={tone}>\n                                {message}\n                            </FieldMessage>\n                        </Column>\n                    ) : null}\n                    {characterCount ? (\n                        <Column width=\"content\">\n                            <FieldCharacterCount tone={characterCountTone}>\n                                {characterCount}\n                            </FieldCharacterCount>\n                        </Column>\n                    ) : null}\n                </Columns>\n            ) : null}\n        </Stack>\n    )\n}\n\nexport { BaseField, FieldMessage }\nexport type { BaseFieldVariant, BaseFieldVariantProps, FieldComponentProps }\n"],"names":["fieldToneToTextTone","tone","FieldMessage","id","children","React","Text","as","size","createElement","Box","marginRight","display","className","styles","loadingIcon","Spinner","FieldCharacterCount","validateInputLength","value","maxLength","count","currentLength","String","length","variant","label","auxiliaryLabel","message","maxWidth","hidden","aria-describedby","originalAriaDescribedBy","originalId","useId","messageId","inputLength","characterCount","setCharacterCount","useState","characterCountTone","setCharacterCountTone","ariaDescribedBy","childrenProps","_objectSpread","objectSpread2","aria-invalid","undefined","onChange","event","currentTarget","useEffect","Stack","space","container","error","bordered","justifyContent","alignItems","htmlFor","primaryLabel","paddingLeft","Columns","align","Column","width"],"mappings":"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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\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":["fieldToneToTextTone","tone","FieldMessage","id","children","React","Text","as","size","createElement","Box","marginRight","display","className","styles","loadingIcon","Spinner","FieldCharacterCount","validateInputLength","value","maxLength","count","currentLength","String","length","variant","label","auxiliaryLabel","message","maxWidth","hidden","aria-describedby","originalAriaDescribedBy","originalId","characterCountPosition","useId","messageId","inputLength","characterCount","setCharacterCount","useState","characterCountTone","setCharacterCountTone","ariaDescribedBy","renderCharacterCount","childrenProps","_objectSpread","objectSpread2","aria-invalid","undefined","onChange","event","currentTarget","characterCountElement","useEffect","Stack","space","container","error","bordered","justifyContent","alignItems","htmlFor","primaryLabel","paddingLeft","Columns","align","Column","width"],"mappings":"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"}

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { BaseFieldVariantProps, FieldComponentProps } from '../base-field';
-interface SelectFieldProps extends FieldComponentProps<HTMLSelectElement>, BaseFieldVariantProps {
+interface SelectFieldProps extends Omit<FieldComponentProps<HTMLSelectElement>, 'maxLength' | 'characterCountPosition'>, BaseFieldVariantProps {
 }
 declare const SelectField: React.ForwardRefExoticComponent<Omit<SelectFieldProps, "ref"> & React.RefAttributes<HTMLSelectElement>>;
 export { SelectField };

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

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

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

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { BaseFieldVariantProps } from '../base-field';
-import type { FieldComponentProps } from '../base-field';
+import type { BaseFieldProps, FieldComponentProps } from '../base-field';
 type TextFieldType = 'email' | 'search' | 'tel' | 'text' | 'url';
-interface TextFieldProps extends Omit<FieldComponentProps<HTMLInputElement>, 'type'>, BaseFieldVariantProps {
+interface TextFieldProps extends Omit<FieldComponentProps<HTMLInputElement>, 'type'>, BaseFieldVariantProps, Pick<BaseFieldProps, 'characterCountPosition'> {
     type?: TextFieldType;
     startSlot?: React.ReactElement | string | number;
     endSlot?: React.ReactElement | string | number;

package/lib/text-field/text-field.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_rollupPluginBabelHelpers.js"),r=require("react"),t=require("../base-field/base-field.js"),a=require("../box/box.js"),l=require("./text-field.module.css.js"),n=require("use-callback-ref");function i(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var a=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,a.get?a:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,r}var u=i(r);const d=["variant","id","label","value","auxiliaryLabel","message","tone","type","maxWidth","maxLength","hidden","aria-describedby","startSlot","endSlot","onChange"],s=["onChange"];exports.TextField=u.forwardRef((function(r,i){let{variant:o="default",id:c,label:b,value:f,auxiliaryLabel:m,message:x,tone:g,type:p="text",maxWidth:h,maxLength:y,hidden:j,"aria-describedby":v,startSlot:L,endSlot:O,onChange:S}=r,q=e.objectWithoutProperties(r,d);const C=u.useRef(null),E=n.useMergeRefs([i,C]);function P(e){var r;e.currentTarget!==E.current&&(null==(r=C.current)||r.focus())}return u.createElement(t.BaseField,{variant:o,id:c,label:b,value:f,auxiliaryLabel:m,message:x,tone:g,maxWidth:h,maxLength:y,hidden:j,"aria-describedby":v},r=>{let{onChange:t}=r,n=e.objectWithoutProperties(r,s);return u.createElement(a.Box,{display:"flex",alignItems:"center",className:[l.default.inputWrapper,"error"===g?l.default.error:null,"bordered"===o?l.default.bordered:null,q.readOnly?l.default.readOnly:null],onClick:P},L?u.createElement(a.Box,{className:l.default.slot,display:"flex",marginRight:"bordered"===o?"xsmall":"-xsmall",marginLeft:"bordered"===o?"-xsmall":"xsmall"},L):null,u.createElement("input",e.objectSpread2(e.objectSpread2(e.objectSpread2({},q),n),{},{type:p,ref:E,maxLength:y,onChange:e=>{null==S||S(e),null==t||t(e)}})),O?u.createElement(a.Box,{className:l.default.slot,display:"flex",marginRight:"bordered"===o?"-xsmall":"xsmall",marginLeft:"bordered"===o?"xsmall":"-xsmall"},O):null)})}));
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_rollupPluginBabelHelpers.js"),t=require("react"),r=require("../base-field/base-field.js"),a=require("../box/box.js"),l=require("./text-field.module.css.js"),n=require("use-callback-ref");function i(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var a=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,a.get?a:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,t}var o=i(t);const u=["variant","id","label","value","auxiliaryLabel","message","tone","type","maxWidth","maxLength","hidden","aria-describedby","startSlot","endSlot","onChange","characterCountPosition"],s=["onChange","characterCountElement"];exports.TextField=o.forwardRef((function(t,i){let{variant:d="default",id:c,label:b,value:m,auxiliaryLabel:f,message:x,tone:g,type:h="text",maxWidth:p,maxLength:y,hidden:j,"aria-describedby":v,startSlot:C,endSlot:L,onChange:P,characterCountPosition:E="below"}=t,O=e.objectWithoutProperties(t,u);const S=o.useRef(null),q=n.useMergeRefs([i,S]);function W(e){var t;e.currentTarget!==q.current&&(null==(t=S.current)||t.focus())}return o.createElement(r.BaseField,{variant:d,id:c,label:b,value:m,auxiliaryLabel:f,message:x,tone:g,maxWidth:p,maxLength:y,hidden:j,"aria-describedby":v,characterCountPosition:E},t=>{let{onChange:r,characterCountElement:n}=t,i=e.objectWithoutProperties(t,s);return o.createElement(a.Box,{display:"flex",alignItems:"center",className:[l.default.inputWrapper,"error"===g?l.default.error:null,"bordered"===d?l.default.bordered:null,O.readOnly?l.default.readOnly:null],onClick:W},C?o.createElement(a.Box,{className:l.default.slot,display:"flex",marginRight:"bordered"===d?"xsmall":"-xsmall",marginLeft:"bordered"===d?"-xsmall":"xsmall"},C):null,o.createElement("input",e.objectSpread2(e.objectSpread2(e.objectSpread2({},O),i),{},{type:h,ref:q,maxLength:y,onChange:e=>{null==P||P(e),null==r||r(e)}})),L||n?o.createElement(a.Box,{className:l.default.slot,display:"flex",marginRight:"bordered"===d?"-xsmall":"xsmall",marginLeft:"bordered"===d?"xsmall":"-xsmall"},n,L):null)})}));
 //# sourceMappingURL=text-field.js.map

package/lib/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 { 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    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        ...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        >\n            {({ onChange, ...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 ? (\n                        <Box\n                            className={styles.slot}\n                            display=\"flex\"\n                            marginRight={variant === 'bordered' ? '-xsmall' : 'xsmall'}\n                            marginLeft={variant === 'bordered' ? 'xsmall' : '-xsmall'}\n                        >\n                            {endSlot}\n                        </Box>\n                    ) : null}\n                </Box>\n            )}\n        </BaseField>\n    )\n})\n\nexport { TextField }\nexport type { TextFieldProps, TextFieldType }\n"],"names":["React","forwardRef","ref","variant","id","label","value","auxiliaryLabel","message","tone","type","maxWidth","maxLength","hidden","aria-describedby","ariaDescribedBy","startSlot","endSlot","onChange","originalOnChange","_ref","props","_objectWithoutProperties","objectWithoutProperties","_excluded","internalRef","useRef","combinedRef","useMergeRefs","handleClick","event","_internalRef$current","currentTarget","current","focus","createElement","BaseField","_ref2","extraProps","_excluded2","Box","display","alignItems","className","styles","inputWrapper","error","bordered","readOnly","onClick","slot","marginRight","marginLeft"],"mappings":"6vBAuBkBA,EAAMC,YAA6C,SAmBjEC,EAAAA,GAAG,IAlBHC,QACIA,EAAU,UADdC,GAEIA,EAFJC,MAGIA,EAHJC,MAIIA,EAJJC,eAKIA,EALJC,QAMIA,EANJC,KAOIA,EAPJC,KAQIA,EAAO,OARXC,SASIA,EATJC,UAUIA,EAVJC,OAWIA,EACAC,mBAAoBC,EAZxBC,UAaIA,EAbJC,QAcIA,EACAC,SAAUC,GAGXC,EAFIC,EAEJC,EAAAC,wBAAAH,EAAAI,GAEH,MAAMC,EAAczB,EAAM0B,OAAyB,MAC7CC,EAAcC,EAAYA,aAAC,CAAC1B,EAAKuB,IAEvC,SAASI,EAAYC,GAAuB,IAAAC,EACpCD,EAAME,gBAAkBL,EAAYM,UACxC,OAAAF,EAAAN,EAAYQ,UAAZF,EAAqBG,SAGzB,OACIlC,EAAAmC,cAACC,YAAS,CACNjC,QAASA,EACTC,GAAIA,EACJC,MAAOA,EACPC,MAAOA,EACPC,eAAgBA,EAChBC,QAASA,EACTC,KAAMA,EACNE,SAAUA,EACVC,UAAWA,EACXC,OAAQA,EACUC,mBAAAC,GAEjBsB,IAAA,IAACnB,SAAEA,GAAHmB,EAAgBC,EAAhBhB,EAAAC,wBAAAc,EAAAE,GAAA,OACGvC,EAAAmC,cAACK,MACG,CAAAC,QAAQ,OACRC,WAAW,SACXC,UAAW,CACPC,EAAM,QAACC,aACE,UAATpC,EAAmBmC,EAAM,QAACE,MAAQ,KACtB,aAAZ3C,EAAyByC,EAAM,QAACG,SAAW,KAC3C1B,EAAM2B,SAAWJ,EAAM,QAACI,SAAW,MAEvCC,QAASpB,GAERb,EACGhB,gBAACwC,MAAG,CACAG,UAAWC,EAAM,QAACM,KAClBT,QAAQ,OACRU,YAAyB,aAAZhD,EAAyB,SAAW,UACjDiD,WAAwB,aAAZjD,EAAyB,UAAY,UAEhDa,GAEL,KACJhB,EACQmC,cAAA,QAAAd,EAAAA,cAAAA,EAAAA,cAAAA,EAAAA,cAAAA,GAAAA,GACAiB,GAFR,GAAA,CAGI5B,KAAMA,EACNR,IAAKyB,EACLf,UAAWA,EACXM,SAAWY,IACP,MAAAX,GAAAA,EAAmBW,GACnB,MAAAZ,GAAAA,EAAWY,OAGlBb,EACGjB,EAAAmC,cAACK,EAAAA,IAAG,CACAG,UAAWC,EAAM,QAACM,KAClBT,QAAQ,OACRU,YAAyB,aAAZhD,EAAyB,UAAY,SAClDiD,WAAwB,aAAZjD,EAAyB,SAAW,WAE/Cc,GAEL"}
+{"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":["React","forwardRef","ref","variant","id","label","value","auxiliaryLabel","message","tone","type","maxWidth","maxLength","hidden","aria-describedby","ariaDescribedBy","startSlot","endSlot","onChange","originalOnChange","characterCountPosition","_ref","props","_objectWithoutProperties","objectWithoutProperties","_excluded","internalRef","useRef","combinedRef","useMergeRefs","handleClick","event","_internalRef$current","currentTarget","current","focus","createElement","BaseField","_ref2","characterCountElement","extraProps","_excluded2","Box","display","alignItems","className","styles","inputWrapper","error","bordered","readOnly","onClick","slot","marginRight","marginLeft"],"mappings":"8yBAwBkBA,EAAMC,YAA6C,SAoBjEC,EAAAA,GAAG,IAnBHC,QACIA,EAAU,UADdC,GAEIA,EAFJC,MAGIA,EAHJC,MAIIA,EAJJC,eAKIA,EALJC,QAMIA,EANJC,KAOIA,EAPJC,KAQIA,EAAO,OARXC,SASIA,EATJC,UAUIA,EAVJC,OAWIA,EACAC,mBAAoBC,EAZxBC,UAaIA,EAbJC,QAcIA,EACAC,SAAUC,EAfdC,uBAgBIA,EAAyB,SAG1BC,EAFIC,EAEJC,EAAAC,wBAAAH,EAAAI,GAEH,MAAMC,EAAc1B,EAAM2B,OAAyB,MAC7CC,EAAcC,EAAYA,aAAC,CAAC3B,EAAKwB,IAEvC,SAASI,EAAYC,GAAuB,IAAAC,EACpCD,EAAME,gBAAkBL,EAAYM,UACxC,OAAAF,EAAAN,EAAYQ,UAAZF,EAAqBG,SAGzB,OACInC,EAAAoC,cAACC,YAAS,CACNlC,QAASA,EACTC,GAAIA,EACJC,MAAOA,EACPC,MAAOA,EACPC,eAAgBA,EAChBC,QAASA,EACTC,KAAMA,EACNE,SAAUA,EACVC,UAAWA,EACXC,OAAQA,EAAMC,mBACIC,EAClBK,uBAAwBA,GAEvBkB,IAAA,IAACpB,SAAEA,EAAFqB,sBAAYA,GAAbD,EAAuCE,EAAvCjB,EAAAC,wBAAAc,EAAAG,GAAA,OACGzC,EAAAoC,cAACM,MACG,CAAAC,QAAQ,OACRC,WAAW,SACXC,UAAW,CACPC,EAAM,QAACC,aACE,UAATtC,EAAmBqC,EAAM,QAACE,MAAQ,KACtB,aAAZ7C,EAAyB2C,EAAM,QAACG,SAAW,KAC3C3B,EAAM4B,SAAWJ,EAAM,QAACI,SAAW,MAEvCC,QAASrB,GAERd,EACGhB,gBAAC0C,MAAG,CACAG,UAAWC,EAAM,QAACM,KAClBT,QAAQ,OACRU,YAAyB,aAAZlD,EAAyB,SAAW,UACjDmD,WAAwB,aAAZnD,EAAyB,UAAY,UAEhDa,GAEL,KACJhB,EACQoC,cAAA,QAAAd,EAAAA,cAAAA,EAAAA,cAAAA,EAAAA,cAAAA,GAAAA,GACAkB,GAFR,GAAA,CAGI9B,KAAMA,EACNR,IAAK0B,EACLhB,UAAWA,EACXM,SAAWa,IACP,MAAAZ,GAAAA,EAAmBY,GACnB,MAAAb,GAAAA,EAAWa,OAGlBd,GAAWsB,EACRvC,EAAAoC,cAACM,EAAAA,IACG,CAAAG,UAAWC,EAAM,QAACM,KAClBT,QAAQ,OACRU,YAAyB,aAAZlD,EAAyB,UAAY,SAClDmD,WAAwB,aAAZnD,EAAyB,SAAW,WAE/CoC,EACAtB,GAEL"}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={inputWrapper:"f2de4e8d",readOnly:"ee26e40c",bordered:"_3afb1a56",error:"f3ff9f57",slot:"_3eb7b0ef"};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={inputWrapper:"c8f65b3b",readOnly:"_326f2644",bordered:"_5252fd3d",error:"_0141b7ac",slot:"b79b851f"};
 //# sourceMappingURL=text-field.module.css.js.map

package/package.json

@@ -6,7 +6,7 @@
         "email": "henning@doist.com",
         "url": "http://doist.com"
     },
-    "version": "27.2.1",
+    "version": "27.3.0",
     "license": "MIT",
     "homepage": "https://github.com/Doist/reactist#readme",
     "repository": {