@doist/reactist 25.1.1 → 26.0.0

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

@@ -6,28 +6,12 @@ import { Text } from '../text/text.js';
 import modules_540a88ff from './base-field.module.css.js';
 import { Stack } from '../stack/stack.js';
 import { Spinner } from '../spinner/spinner.js';
+import { Columns, Column } from '../columns/columns.js';
 
-function FieldHint(props) {
-  return /*#__PURE__*/React.createElement(Text, _objectSpread2({
-    as: "p",
-    tone: "secondary",
-    size: "copy"
-  }, props));
-}
+const MAX_LENGTH_THRESHOLD = 10;
 
-function MessageIcon(props) {
-  return /*#__PURE__*/React.createElement("svg", _objectSpread2({
-    width: "16",
-    height: "16",
-    viewBox: "0 0 16 16",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, props), /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M8 2.5C4.96243 2.5 2.5 4.96243 2.5 8C2.5 11.0376 4.96243 13.5 8 13.5C11.0376 13.5 13.5 11.0376 13.5 8C13.5 4.96243 11.0376 2.5 8 2.5ZM1.5 8C1.5 4.41015 4.41015 1.5 8 1.5C11.5899 1.5 14.5 4.41015 14.5 8C14.5 11.5899 11.5899 14.5 8 14.5C4.41015 14.5 1.5 11.5899 1.5 8ZM8.66667 10.3333C8.66667 10.7015 8.36819 11 8 11C7.63181 11 7.33333 10.7015 7.33333 10.3333C7.33333 9.96514 7.63181 9.66667 8 9.66667C8.36819 9.66667 8.66667 9.96514 8.66667 10.3333ZM8.65766 5.65766C8.65766 5.29445 8.36322 5 8 5C7.99087 5.00008 7.98631 5.00013 7.98175 5.00025C7.97719 5.00038 7.97263 5.00059 7.96352 5.00101C7.60086 5.02116 7.3232 5.33149 7.34335 5.69415L7.50077 8.52774C7.53575 9.15742 8.46425 9.15742 8.49923 8.52774L8.65665 5.69415C8.65707 5.68503 8.65728 5.68047 8.65741 5.67591C8.65754 5.67135 8.65758 5.66679 8.65766 5.65766Z",
-    fill: "currentColor"
-  }));
+function fieldToneToTextTone(tone) {
+  return tone === 'error' ? 'danger' : tone === 'success' ? 'positive' : 'secondary';
 }
 
 function FieldMessage({
@@ -35,55 +19,117 @@ function FieldMessage({
   children,
   tone
 }) {
-  const textTone = tone === 'error' ? 'danger' : tone === 'success' ? 'positive' : 'normal';
   return /*#__PURE__*/React.createElement(Text, {
     as: "p",
-    tone: textTone,
+    tone: fieldToneToTextTone(tone),
     size: "copy",
     id: id
-  }, /*#__PURE__*/React.createElement(Box, {
+  }, tone === 'loading' ? /*#__PURE__*/React.createElement(Box, {
     as: "span",
     marginRight: "xsmall",
     display: "inlineFlex",
-    className: modules_540a88ff.messageIcon
-  }, tone === 'loading' ? /*#__PURE__*/React.createElement(Spinner, {
+    className: modules_540a88ff.loadingIcon
+  }, /*#__PURE__*/React.createElement(Spinner, {
     size: 16
-  }) : /*#__PURE__*/React.createElement(MessageIcon, {
-    "aria-hidden": true
-  })), children);
+  })) : null, children);
+}
+
+function FieldCharacterCount({
+  children,
+  tone
+}) {
+  return /*#__PURE__*/React.createElement(Text, {
+    tone: fieldToneToTextTone(tone),
+    size: "copy"
+  }, children);
+}
+
+function validateInputLength({
+  value,
+  maxLength
+}) {
+  if (!maxLength) {
+    return {
+      count: null,
+      tone: 'neutral'
+    };
+  }
+
+  const currentLength = String(value || '').length;
+  const isNearMaxLength = maxLength - currentLength <= MAX_LENGTH_THRESHOLD;
+  return {
+    count: currentLength + "/" + maxLength,
+    tone: isNearMaxLength ? 'error' : 'neutral'
+  };
 }
 
 function BaseField({
   variant = 'default',
   label,
-  secondaryLabel,
+  value,
   auxiliaryLabel,
-  hint,
   message,
   tone = 'neutral',
   className,
   children,
   maxWidth,
+  maxLength,
   hidden,
   'aria-describedby': originalAriaDescribedBy,
   id: originalId
 }) {
   const id = useId(originalId);
-  const hintId = useId();
   const messageId = useId();
-  const ariaDescribedBy = originalAriaDescribedBy != null ? originalAriaDescribedBy : [message ? messageId : null, hintId].filter(Boolean).join(' ');
-  const childrenProps = {
+  const inputLength = validateInputLength({
+    value,
+    maxLength
+  });
+  const [characterCount, setCharacterCount] = React.useState(inputLength.count);
+  const [characterCountTone, setCharacterCountTone] = React.useState(inputLength.tone);
+  const ariaDescribedBy = originalAriaDescribedBy != null ? originalAriaDescribedBy : message ? messageId : null;
+
+  const childrenProps = _objectSpread2(_objectSpread2({
     id,
-    'aria-describedby': ariaDescribedBy,
-    'aria-invalid': tone === 'error' ? true : undefined
-  };
+    value
+  }, ariaDescribedBy ? {
+    'aria-describedby': ariaDescribedBy
+  } : {}), {}, {
+    'aria-invalid': tone === 'error' ? true : undefined,
+
+    onChange(event) {
+      if (!maxLength) {
+        return;
+      }
+
+      const inputLength = validateInputLength({
+        value: event.currentTarget.value,
+        maxLength
+      });
+      setCharacterCount(inputLength.count);
+      setCharacterCountTone(inputLength.tone);
+    }
+
+  });
+
+  React.useEffect(function updateCharacterCountOnPropChange() {
+    if (!maxLength) {
+      return;
+    }
+
+    const inputLength = validateInputLength({
+      value,
+      maxLength
+    });
+    setCharacterCount(inputLength.count);
+    setCharacterCountTone(inputLength.tone);
+  }, [maxLength, value]);
   return /*#__PURE__*/React.createElement(Stack, {
-    space: "small",
+    space: "xsmall",
     hidden: hidden
   }, /*#__PURE__*/React.createElement(Box, {
     className: [className, modules_540a88ff.container, tone === 'error' ? modules_540a88ff.error : null, variant === 'bordered' ? modules_540a88ff.bordered : null],
     maxWidth: maxWidth
-  }, label || secondaryLabel || auxiliaryLabel ? /*#__PURE__*/React.createElement(Box, {
+  }, label || auxiliaryLabel ? /*#__PURE__*/React.createElement(Box, {
     as: "span",
     display: "flex",
     justifyContent: "spaceBetween",
@@ -94,18 +140,24 @@ function BaseField({
     htmlFor: id
   }, label ? /*#__PURE__*/React.createElement("span", {
     className: modules_540a88ff.primaryLabel
-  }, label) : null, secondaryLabel ? /*#__PURE__*/React.createElement("span", {
-    className: modules_540a88ff.secondaryLabel
-  }, "\u00A0(", secondaryLabel, ")") : null), auxiliaryLabel ? /*#__PURE__*/React.createElement(Box, {
+  }, label) : null), auxiliaryLabel ? /*#__PURE__*/React.createElement(Box, {
     className: modules_540a88ff.auxiliaryLabel,
     paddingLeft: "small"
-  }, auxiliaryLabel) : null) : null, children(childrenProps)), message ? /*#__PURE__*/React.createElement(FieldMessage, {
+  }, auxiliaryLabel) : null) : null, children(childrenProps)), message || characterCount ? /*#__PURE__*/React.createElement(Columns, {
+    align: "right",
+    space: "small",
+    maxWidth: maxWidth
+  }, message ? /*#__PURE__*/React.createElement(Column, {
+    width: "auto"
+  }, /*#__PURE__*/React.createElement(FieldMessage, {
     id: messageId,
     tone: tone
-  }, message) : null, hint ? /*#__PURE__*/React.createElement(FieldHint, {
-    id: hintId
-  }, hint) : null);
+  }, message)) : null, characterCount ? /*#__PURE__*/React.createElement(Column, {
+    width: "content"
+  }, /*#__PURE__*/React.createElement(FieldCharacterCount, {
+    tone: characterCountTone
+  }, characterCount)) : null) : null);
 }
 
-export { BaseField, FieldHint, FieldMessage };
+export { BaseField, FieldMessage };
 //# sourceMappingURL=base-field.js.map

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'\n\ntype FieldHintProps = {\n    id: string\n    children: React.ReactNode\n}\n\nfunction FieldHint(props: FieldHintProps) {\n    return <Text as=\"p\" tone=\"secondary\" size=\"copy\" {...props} />\n}\n\nfunction MessageIcon(props: React.SVGProps<SVGSVGElement>) {\n    return (\n        <svg\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 16 16\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            {...props}\n        >\n            <path\n                fillRule=\"evenodd\"\n                clipRule=\"evenodd\"\n                d=\"M8 2.5C4.96243 2.5 2.5 4.96243 2.5 8C2.5 11.0376 4.96243 13.5 8 13.5C11.0376 13.5 13.5 11.0376 13.5 8C13.5 4.96243 11.0376 2.5 8 2.5ZM1.5 8C1.5 4.41015 4.41015 1.5 8 1.5C11.5899 1.5 14.5 4.41015 14.5 8C14.5 11.5899 11.5899 14.5 8 14.5C4.41015 14.5 1.5 11.5899 1.5 8ZM8.66667 10.3333C8.66667 10.7015 8.36819 11 8 11C7.63181 11 7.33333 10.7015 7.33333 10.3333C7.33333 9.96514 7.63181 9.66667 8 9.66667C8.36819 9.66667 8.66667 9.96514 8.66667 10.3333ZM8.65766 5.65766C8.65766 5.29445 8.36322 5 8 5C7.99087 5.00008 7.98631 5.00013 7.98175 5.00025C7.97719 5.00038 7.97263 5.00059 7.96352 5.00101C7.60086 5.02116 7.3232 5.33149 7.34335 5.69415L7.50077 8.52774C7.53575 9.15742 8.46425 9.15742 8.49923 8.52774L8.65665 5.69415C8.65707 5.68503 8.65728 5.68047 8.65741 5.67591C8.65754 5.67135 8.65758 5.66679 8.65766 5.65766Z\"\n                fill=\"currentColor\"\n            />\n        </svg>\n    )\n}\n\ntype FieldTone = 'neutral' | 'success' | 'error' | 'loading'\n\ntype FieldMessageProps = FieldHintProps & {\n    tone: FieldTone\n}\n\nfunction FieldMessage({ id, children, tone }: FieldMessageProps) {\n    const textTone = tone === 'error' ? 'danger' : tone === 'success' ? 'positive' : 'normal'\n    return (\n        <Text as=\"p\" tone={textTone} size=\"copy\" id={id}>\n            <Box as=\"span\" marginRight=\"xsmall\" display=\"inlineFlex\" className={styles.messageIcon}>\n                {tone === 'loading' ? <Spinner size={16} /> : <MessageIcon aria-hidden />}\n            </Box>\n            {children}\n        </Text>\n    )\n}\n\n//\n// BaseField\n//\n\ntype ChildrenRenderProps = {\n    id: string\n    'aria-describedby'?: string\n    'aria-invalid'?: true\n}\n\ntype HtmlInputProps<T extends HTMLElement> = React.DetailedHTMLProps<\n    React.InputHTMLAttributes<T>,\n    T\n>\n\ntype BaseFieldVariant = 'default' | 'bordered'\ntype BaseFieldVariantProps = {\n    /**\n     * Provides alternative visual layouts or modes that the field can be rendered in.\n     *\n     * Namely, there are two variants supported:\n     *\n     * - the default one\n     * - a \"bordered\" variant, where the border of the field surrounds also the labels, instead\n     *   of just surrounding the actual field element\n     *\n     * In both cases, the message and description texts for the field lie outside the bordered\n     * area.\n     */\n    variant?: BaseFieldVariant\n}\n\ntype BaseFieldProps = WithEnhancedClassName &\n    Pick<HtmlInputProps<HTMLInputElement>, 'id' | 'hidden' | 'aria-describedby'> & {\n        /**\n         * The main label for this field element.\n         *\n         * This prop is not optional. Consumers of field components must be explicit about not\n         * wanting a label by passing `label=\"\"` or `label={null}`. In those situations, consumers\n         * should make sure that fields are properly labelled semantically by other means (e.g using\n         * `aria-labelledby`, or rendering a `<label />` element referencing the field by id).\n         *\n         * Avoid providing interactive elements in the label. Prefer `auxiliaryLabel` for that.\n         *\n         * @see BaseFieldProps['secondaryLabel']\n         * @see BaseFieldProps['auxiliaryLabel']\n         */\n        label: React.ReactNode\n\n        /**\n         * An optional secondary label for this field element. It is combined with the `label` to\n         * form the field's entire accessible name (unless the field label is overriden by using\n         * `aria-label` or `aria-labelledby`).\n         *\n         * Avoid providing interactive elements in the label. Prefer `auxiliaryLabel` for that.\n         *\n         * @see BaseFieldProps['label']\n         * @see BaseFieldProps['auxiliaryLabel']\n         */\n        secondaryLabel?: React.ReactNode\n\n        /**\n         * An optional extra element to be placed to the right of the main and secondary labels.\n         *\n         * This extra element is not included in the accessible name of the field element. Its only\n         * purpose is either visual, or functional (if you include interactive elements in it).\n         *\n         * @see BaseFieldProps['label']\n         * @see BaseFieldProps['secondaryLabel']\n         */\n        auxiliaryLabel?: React.ReactNode\n\n        /**\n         * A message associated with the field. It is rendered below the field, and with an\n         * appearance that conveys the tone of the field (e.g. coloured red for errors, green for\n         * success, etc).\n         *\n         * The message element is associated to the field via the `aria-describedby` attribute. If a\n         * `hint` is provided, both the hint and the message are associated as the field accessible\n         * description.\n         *\n         * In the future, when `aria-errormessage` gets better user agent support, we should use it\n         * to associate the filed with a message when tone is `\"error\"`.\n         *\n         * @see BaseFieldProps['tone']\n         * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-errormessage\n         * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-invalid\n         */\n        message?: React.ReactNode\n\n        /**\n         * The tone with which the message, if any, is presented.\n         *\n         * If the tone is `\"error\"`, the field border turns red, and the message, if any, is also\n         * red.\n         *\n         * When the tone is `\"loading\"`, it is recommended that you also disable the field. However,\n         * this is not enforced by the component. It is only a recommendation.\n         *\n         * @see BaseFieldProps['message']\n         * @see BaseFieldProps['hint']\n         */\n        tone?: FieldTone\n\n        /**\n         * A hint or help-like content associated as the accessible description of the field. It is\n         * generally rendered below it, and with a visual style that reduces its prominence (i.e.\n         * as secondary text).\n         *\n         * It sets the `aria-describedby` attribute pointing to the element that holds the hint\n         * content.\n         *\n         * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby\n         */\n        hint?: React.ReactNode\n\n        /**\n         * The maximum width that the input field can expand to.\n         */\n        maxWidth?: BoxProps['maxWidth']\n\n        /**\n         * Used internally by components composed using `BaseField`. It is not exposed as part of\n         * the public props of such components.\n         */\n        children: (props: ChildrenRenderProps) => React.ReactNode\n    }\n\ntype FieldComponentProps<T extends HTMLElement> = Omit<\n    BaseFieldProps,\n    'children' | 'className' | 'variant'\n> &\n    Omit<HtmlInputProps<T>, 'className' | 'style'>\n\nfunction BaseField({\n    variant = 'default',\n    label,\n    secondaryLabel,\n    auxiliaryLabel,\n    hint,\n    message,\n    tone = 'neutral',\n    className,\n    children,\n    maxWidth,\n    hidden,\n    'aria-describedby': originalAriaDescribedBy,\n    id: originalId,\n}: BaseFieldProps & BaseFieldVariantProps & WithEnhancedClassName) {\n    const id = useId(originalId)\n    const hintId = useId()\n    const messageId = useId()\n\n    const ariaDescribedBy =\n        originalAriaDescribedBy ?? [message ? messageId : null, hintId].filter(Boolean).join(' ')\n\n    const childrenProps: ChildrenRenderProps = {\n        id,\n        'aria-describedby': ariaDescribedBy,\n        'aria-invalid': tone === 'error' ? true : undefined,\n    }\n\n    return (\n        <Stack space=\"small\" hidden={hidden}>\n            <Box\n                className={[\n                    className,\n                    styles.container,\n                    tone === 'error' ? styles.error : null,\n                    variant === 'bordered' ? styles.bordered : null,\n                ]}\n                maxWidth={maxWidth}\n            >\n                {label || secondaryLabel || auxiliaryLabel ? (\n                    <Box\n                        as=\"span\"\n                        display=\"flex\"\n                        justifyContent=\"spaceBetween\"\n                        alignItems=\"flexEnd\"\n                    >\n                        <Text\n                            size={variant === 'bordered' ? 'caption' : 'body'}\n                            as=\"label\"\n                            htmlFor={id}\n                        >\n                            {label ? <span className={styles.primaryLabel}>{label}</span> : null}\n                            {secondaryLabel ? (\n                                <span className={styles.secondaryLabel}>\n                                    &nbsp;({secondaryLabel})\n                                </span>\n                            ) : null}\n                        </Text>\n                        {auxiliaryLabel ? (\n                            <Box className={styles.auxiliaryLabel} paddingLeft=\"small\">\n                                {auxiliaryLabel}\n                            </Box>\n                        ) : null}\n                    </Box>\n                ) : null}\n                {children(childrenProps)}\n            </Box>\n            {message ? (\n                <FieldMessage id={messageId} tone={tone}>\n                    {message}\n                </FieldMessage>\n            ) : null}\n            {hint ? <FieldHint id={hintId}>{hint}</FieldHint> : null}\n        </Stack>\n    )\n}\n\nexport { BaseField, FieldHint, FieldMessage }\nexport type { BaseFieldVariant, BaseFieldVariantProps, FieldComponentProps }\n"],"names":["FieldHint","props","React","Text","_objectSpread","as","tone","size","MessageIcon","width","height","viewBox","fill","xmlns","createElement","fillRule","clipRule","d","FieldMessage","id","children","textTone","Box","marginRight","display","className","styles","messageIcon","Spinner","BaseField","variant","label","secondaryLabel","auxiliaryLabel","hint","message","maxWidth","hidden","originalAriaDescribedBy","originalId","useId","hintId","messageId","ariaDescribedBy","filter","Boolean","join","childrenProps","undefined","Stack","space","container","error","bordered","justifyContent","alignItems","htmlFor","primaryLabel","paddingLeft"],"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\nconst MAX_LENGTH_THRESHOLD = 10\n\ntype FieldTone = 'neutral' | 'success' | 'error' | 'loading'\n\ntype FieldMessageProps = {\n    id: string\n    children: React.ReactNode\n    tone: FieldTone\n}\n\nfunction fieldToneToTextTone(tone: FieldTone) {\n    return tone === 'error' ? 'danger' : tone === 'success' ? 'positive' : 'secondary'\n}\n\nfunction FieldMessage({ id, children, tone }: FieldMessageProps) {\n    return (\n        <Text as=\"p\" tone={fieldToneToTextTone(tone)} size=\"copy\" id={id}>\n            {tone === 'loading' ? (\n                <Box\n                    as=\"span\"\n                    marginRight=\"xsmall\"\n                    display=\"inlineFlex\"\n                    className={styles.loadingIcon}\n                >\n                    <Spinner size={16} />\n                </Box>\n            ) : null}\n            {children}\n        </Text>\n    )\n}\n\ntype FieldCharacterCountProps = {\n    children: React.ReactNode\n    tone: FieldTone\n}\n\nfunction FieldCharacterCount({ children, tone }: FieldCharacterCountProps) {\n    return (\n        <Text tone={fieldToneToTextTone(tone)} size=\"copy\">\n            {children}\n        </Text>\n    )\n}\n\ntype ValidateInputLengthProps = {\n    value?: React.InputHTMLAttributes<unknown>['value']\n    maxLength?: number\n}\n\ntype ValidateInputLengthResult = {\n    count: string | null\n    tone: FieldTone\n}\n\nfunction validateInputLength({\n    value,\n    maxLength,\n}: ValidateInputLengthProps): ValidateInputLengthResult {\n    if (!maxLength) {\n        return {\n            count: null,\n            tone: 'neutral',\n        }\n    }\n\n    const currentLength = String(value || '').length\n    const isNearMaxLength = maxLength - currentLength <= MAX_LENGTH_THRESHOLD\n\n    return {\n        count: `${currentLength}/${maxLength}`,\n        tone: isNearMaxLength ? 'error' : 'neutral',\n    }\n}\n\n//\n// BaseField\n//\n\ntype ChildrenRenderProps = {\n    id: string\n    value?: React.InputHTMLAttributes<unknown>['value']\n    'aria-describedby'?: string\n    'aria-invalid'?: true\n    onChange?: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>\n}\n\ntype HtmlInputProps<T extends HTMLElement> = React.DetailedHTMLProps<\n    React.InputHTMLAttributes<T>,\n    T\n>\n\ntype BaseFieldVariant = 'default' | 'bordered'\ntype BaseFieldVariantProps = {\n    /**\n     * Provides alternative visual layouts or modes that the field can be rendered in.\n     *\n     * Namely, there are two variants supported:\n     *\n     * - the default one\n     * - a \"bordered\" variant, where the border of the field surrounds also the labels, instead\n     *   of just surrounding the actual field element\n     *\n     * In both cases, the message and description texts for the field lie outside the bordered\n     * area.\n     */\n    variant?: BaseFieldVariant\n}\n\ntype BaseFieldProps = WithEnhancedClassName &\n    Pick<HtmlInputProps<HTMLInputElement>, 'id' | 'hidden' | 'maxLength' | 'aria-describedby'> & {\n        /**\n         * The main label for this field element.\n         *\n         * This prop is not optional. Consumers of field components must be explicit about not\n         * wanting a label by passing `label=\"\"` or `label={null}`. In those situations, consumers\n         * should make sure that fields are properly labelled semantically by other means (e.g using\n         * `aria-labelledby`, or rendering a `<label />` element referencing the field by id).\n         *\n         * Avoid providing interactive elements in the label. Prefer `auxiliaryLabel` for that.\n         *\n         * @see BaseFieldProps['auxiliaryLabel']\n         */\n        label: React.ReactNode\n\n        /**\n         * The initial value for this field element.\n         *\n         * This prop is used to calculate the character count for the initial value, and is then\n         * passed to the underlying child element.\n         */\n        value?: React.InputHTMLAttributes<unknown>['value']\n\n        /**\n         * An optional extra element to be placed to the right of the main label.\n         *\n         * This extra element is not included in the accessible name of the field element. Its only\n         * purpose is either visual, or functional (if you include interactive elements in it).\n         *\n         * @see BaseFieldProps['label']\n         *\n         * @deprecated The usage of this element is discouraged given that it was removed from the\n         * latest form field spec revision.\n         */\n        auxiliaryLabel?: React.ReactNode\n\n        /**\n         * A message associated with the field. It is rendered below the field, and with an\n         * appearance that conveys the tone of the field (e.g. coloured red for errors, green for\n         * success, etc).\n         *\n         * The message element is associated to the field via the `aria-describedby` attribute.\n         *\n         * In the future, when `aria-errormessage` gets better user agent support, we should use it\n         * to associate the filed with a message when tone is `\"error\"`.\n         *\n         * @see BaseFieldProps['tone']\n         * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-errormessage\n         * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-invalid\n         */\n        message?: React.ReactNode\n\n        /**\n         * The tone with which the message, if any, is presented.\n         *\n         * If the tone is `\"error\"`, the field border turns red, and the message, if any, is also\n         * red.\n         *\n         * When the tone is `\"loading\"`, it is recommended that you also disable the field. However,\n         * this is not enforced by the component. It is only a recommendation.\n         *\n         * @see BaseFieldProps['message']\n         * @see BaseFieldProps['hint']\n         */\n        tone?: FieldTone\n\n        /**\n         * The maximum width that the input field can expand to.\n         */\n        maxWidth?: BoxProps['maxWidth']\n\n        /**\n         * Used internally by components composed using `BaseField`. It is not exposed as part of\n         * the public props of such components.\n         */\n        children: (props: ChildrenRenderProps) => React.ReactNode\n    }\n\ntype FieldComponentProps<T extends HTMLElement> = Omit<\n    BaseFieldProps,\n    'children' | 'className' | 'fieldRef' | 'variant'\n> &\n    Omit<HtmlInputProps<T>, 'className' | 'style'>\n\nfunction BaseField({\n    variant = 'default',\n    label,\n    value,\n    auxiliaryLabel,\n    message,\n    tone = 'neutral',\n    className,\n    children,\n    maxWidth,\n    maxLength,\n    hidden,\n    'aria-describedby': originalAriaDescribedBy,\n    id: originalId,\n}: BaseFieldProps & BaseFieldVariantProps & WithEnhancedClassName) {\n    const id = useId(originalId)\n    const messageId = useId()\n\n    const inputLength = validateInputLength({ value, maxLength })\n\n    const [characterCount, setCharacterCount] = React.useState<string | null>(inputLength.count)\n    const [characterCountTone, setCharacterCountTone] = React.useState<FieldTone>(inputLength.tone)\n\n    const ariaDescribedBy = originalAriaDescribedBy ?? (message ? messageId : null)\n\n    const childrenProps: ChildrenRenderProps = {\n        id,\n        value,\n        ...(ariaDescribedBy ? { 'aria-describedby': ariaDescribedBy } : {}),\n        'aria-invalid': tone === 'error' ? true : undefined,\n        onChange(event) {\n            if (!maxLength) {\n                return\n            }\n\n            const inputLength = validateInputLength({\n                value: event.currentTarget.value,\n                maxLength,\n            })\n\n            setCharacterCount(inputLength.count)\n            setCharacterCountTone(inputLength.tone)\n        },\n    }\n\n    React.useEffect(\n        function updateCharacterCountOnPropChange() {\n            if (!maxLength) {\n                return\n            }\n\n            const inputLength = validateInputLength({\n                value,\n                maxLength,\n            })\n\n            setCharacterCount(inputLength.count)\n            setCharacterCountTone(inputLength.tone)\n        },\n        [maxLength, value],\n    )\n\n    return (\n        <Stack space=\"xsmall\" hidden={hidden}>\n            <Box\n                className={[\n                    className,\n                    styles.container,\n                    tone === 'error' ? styles.error : null,\n                    variant === 'bordered' ? styles.bordered : null,\n                ]}\n                maxWidth={maxWidth}\n            >\n                {label || auxiliaryLabel ? (\n                    <Box\n                        as=\"span\"\n                        display=\"flex\"\n                        justifyContent=\"spaceBetween\"\n                        alignItems=\"flexEnd\"\n                    >\n                        <Text\n                            size={variant === 'bordered' ? 'caption' : 'body'}\n                            as=\"label\"\n                            htmlFor={id}\n                        >\n                            {label ? <span className={styles.primaryLabel}>{label}</span> : null}\n                        </Text>\n                        {auxiliaryLabel ? (\n                            <Box className={styles.auxiliaryLabel} paddingLeft=\"small\">\n                                {auxiliaryLabel}\n                            </Box>\n                        ) : null}\n                    </Box>\n                ) : null}\n                {children(childrenProps)}\n            </Box>\n            {message || characterCount ? (\n                <Columns align=\"right\" space=\"small\" maxWidth={maxWidth}>\n                    {message ? (\n                        <Column width=\"auto\">\n                            <FieldMessage id={messageId} tone={tone}>\n                                {message}\n                            </FieldMessage>\n                        </Column>\n                    ) : null}\n                    {characterCount ? (\n                        <Column width=\"content\">\n                            <FieldCharacterCount tone={characterCountTone}>\n                                {characterCount}\n                            </FieldCharacterCount>\n                        </Column>\n                    ) : null}\n                </Columns>\n            ) : null}\n        </Stack>\n    )\n}\n\nexport { BaseField, FieldMessage }\nexport type { BaseFieldVariant, BaseFieldVariantProps, FieldComponentProps }\n"],"names":["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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"}

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

@@ -1,4 +1,4 @@
-var modules_540a88ff = {"container":"_7acdc928","auxiliaryLabel":"_815bad88","bordered":"e35886fe","error":"_6c7b5dc8","primaryLabel":"ec74af87","secondaryLabel":"_6db0ec44","messageIcon":"_05c35af8"};
+var modules_540a88ff = {"container":"d5ff04da","auxiliaryLabel":"_8d2b52f1","bordered":"_49c37b27","error":"_922ff337","primaryLabel":"af23c791","loadingIcon":"_75edcef6"};
 
 export { modules_540a88ff as default };
 //# sourceMappingURL=base-field.module.css.js.map

package/es/modal/modal.js

@@ -1,5 +1,6 @@
 import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
 import * as React from 'react';
+import { forwardRef } from 'react';
 import classNames from 'classnames';
 import FocusLock from 'react-focus-lock';
 import { hideOthers } from 'aria-hidden';
@@ -220,7 +221,7 @@ function ModalHeader(_ref2) {
  * Renders the body of a modal.
  *
  * Convenient to use alongside ModalHeader and/or ModalFooter as needed. It ensures, among other
- * things, that the contet of the modal body expands or contracts depending on the modal height
+ * things, that the content of the modal body expands or contracts depending on the modal height
  * setting or the size of the content. The body content also automatically scrolls when it's too
  * large to fit the available space.
  *
@@ -229,7 +230,7 @@ function ModalHeader(_ref2) {
  * @see ModalFooter
  */
 
-function ModalBody(_ref3) {
+const ModalBody = /*#__PURE__*/forwardRef(function ModalBody(_ref3, ref) {
   let {
     exceptionallySetClassName,
     children
@@ -240,6 +241,7 @@ function ModalBody(_ref3) {
     height
   } = React.useContext(ModalContext);
   return /*#__PURE__*/React.createElement(Box, _objectSpread2(_objectSpread2({}, props), {}, {
+    ref: ref,
     className: exceptionallySetClassName,
     flexGrow: height === 'expand' ? 1 : 0,
     height: height === 'expand' ? 'full' : undefined,
@@ -248,7 +250,7 @@ function ModalBody(_ref3) {
     padding: "large",
     paddingBottom: "xxlarge"
   }, children));
-}
+});
 /**
  * Renders a standard modal footer area.
  *

package/es/modal/modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal.js","sources":["../../src/modal/modal.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport FocusLock from 'react-focus-lock'\nimport { hideOthers } from 'aria-hidden'\n\nimport { Dialog, DialogOptions, useDialogStore, Portal, PortalOptions } from '@ariakit/react'\n\nimport { CloseIcon } from '../icons/close-icon'\nimport { Column, Columns } from '../columns'\nimport { Inline } from '../inline'\nimport { Divider } from '../divider'\nimport { Box } from '../box'\nimport { IconButtonProps, IconButton } from '../button'\n\nimport styles from './modal.module.css'\nimport type { ObfuscatedClassName } from '../utils/common-types'\n\ntype ModalWidth = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'full'\ntype ModalHeightMode = 'expand' | 'fitContent'\n\n//\n// ModalContext\n//\n\ntype ModalContextValue = {\n    onDismiss?(this: void): void\n    height: ModalHeightMode\n}\n\nconst ModalContext = React.createContext<ModalContextValue>({\n    onDismiss: undefined,\n    height: 'fitContent',\n})\n\n//\n// Modal container\n//\n\ntype DivProps = Omit<\n    React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLDivElement>, HTMLDivElement>,\n    'className' | 'children' | `aria-label` | `aria-labelledby`\n>\n\nexport interface ModalProps extends DivProps, ObfuscatedClassName {\n    /**\n     * The content of the modal.\n     */\n    children: React.ReactNode\n\n    /**\n     * Whether the modal is open and visible or not.\n     */\n    isOpen: boolean\n\n    /**\n     * Called when the user triggers closing the modal.\n     */\n    onDismiss?(): void\n\n    /**\n     * A descriptive setting for how wide the modal should aim to be, depending on how much space\n     * it has on screen.\n     * @default 'medium'\n     */\n    width?: ModalWidth\n\n    /**\n     * A descriptive setting for how tall the modal should aim to be.\n     *\n     * - 'expand': the modal aims to fill most of the available screen height, leaving only a small\n     *   padding above and below.\n     * - 'fitContent': the modal shrinks to the smallest size that allow it to fit its content.\n     *\n     * In either case, if content does not fit, the content of the main body is set to scroll\n     * (provided you use `ModalBody`) so that the modal never has to strech vertically beyond the\n     * viewport boundaries.\n     *\n     * If you do not use `ModalBody`, the modal still prevents overflow, and you are in charge of\n     * the inner layout to ensure scroll, or whatever other strategy you may want.\n     */\n    height?: ModalHeightMode\n\n    /**\n     * Whether to set or not the focus initially to the first focusable element inside the modal.\n     */\n    autoFocus?: boolean\n\n    /**\n     * Controls if the modal is dismissed when pressing \"Escape\".\n     */\n    hideOnEscape?: DialogOptions['hideOnEscape']\n\n    /**\n     * Controls if the modal is dismissed when clicking outside the modal body, on the overlay.\n     */\n    hideOnInteractOutside?: DialogOptions['hideOnInteractOutside']\n\n    /**\n     * An escape hatch in case you need to provide a custom class name to the overlay element.\n     */\n    exceptionallySetOverlayClassName?: string\n\n    /**\n     * Defines a string value that labels the current modal for assistive technologies.\n     */\n    'aria-label'?: string\n\n    /**\n     * Identifies the element (or elements) that labels the current modal for assistive technologies.\n     */\n    'aria-labelledby'?: string\n\n    /**\n     * An HTML element or a memoized callback function that returns an HTML element to be used as\n     * the portal element. By default, the portal element will be a `div` element appended to the\n     * `document.body`.\n     *\n     * @default HTMLDivElement\n     *\n     * @example\n     * const [portal, setPortal] = useState(null);\n     * <Portal portalElement={portal} />;\n     * <div ref={setPortal} />;\n     *\n     * @example\n     * const getPortalElement = useCallback(() => {\n     *   const div = document.createElement(\"div\");\n     *   const portalRoot = document.getElementById(\"portal-root\");\n     *   portalRoot.appendChild(div);\n     *   return div;\n     * }, []);\n     * <Portal portalElement={getPortalElement} />;\n     */\n    portalElement?: PortalOptions['portalElement']\n}\n\nfunction isNotInternalFrame(element: HTMLElement) {\n    return !(element.ownerDocument === document && element.tagName.toLowerCase() === 'iframe')\n}\n\n/**\n * Renders a modal that sits on top of the rest of the content in the entire page.\n *\n * Follows the WAI-ARIA Dialog (Modal) Pattern.\n *\n * @see ModalHeader\n * @see ModalFooter\n * @see ModalBody\n */\nexport function Modal({\n    isOpen,\n    onDismiss,\n    height = 'fitContent',\n    width = 'medium',\n    exceptionallySetClassName,\n    exceptionallySetOverlayClassName,\n    autoFocus = true,\n    hideOnEscape = true,\n    hideOnInteractOutside = true,\n    children,\n    portalElement,\n    onKeyDown,\n    // @ts-expect-error we want to make sure to not pass it to the Dialog component\n    className,\n    ...props\n}: ModalProps) {\n    const setOpen = React.useCallback(\n        (visible: boolean) => {\n            if (!visible) {\n                onDismiss?.()\n            }\n        },\n        [onDismiss],\n    )\n    const store = useDialogStore({ open: isOpen, setOpen })\n\n    const contextValue: ModalContextValue = React.useMemo(() => ({ onDismiss, height }), [\n        onDismiss,\n        height,\n    ])\n\n    const portalRef = React.useRef<HTMLElement | null>(null)\n    const dialogRef = React.useRef<HTMLDivElement | null>(null)\n    const backdropRef = React.useRef<HTMLDivElement | null>(null)\n    const handleBackdropClick = React.useCallback(\n        (event: React.MouseEvent) => {\n            if (\n                // The focus lock element takes up the same space as the backdrop and is where the event bubbles up from,\n                // so instead of checking the backdrop as the event target, we need to make sure it's just above the dialog\n                !dialogRef.current?.contains(event.target as Node) &&\n                // Events fired from other portals will bubble up to the backdrop, even if it isn't a child in the DOM\n                backdropRef.current?.contains(event.target as Node)\n            ) {\n                event.stopPropagation()\n                onDismiss?.()\n            }\n        },\n        [onDismiss],\n    )\n\n    React.useLayoutEffect(\n        function disableAccessibilityTreeOutside() {\n            if (!isOpen || !portalRef.current) {\n                return\n            }\n\n            return hideOthers(portalRef.current)\n        },\n        [isOpen],\n    )\n\n    const handleKeyDown = React.useCallback(\n        function handleKeyDown(event: React.KeyboardEvent<HTMLDivElement>) {\n            if (\n                hideOnEscape &&\n                onDismiss != null &&\n                event.key === 'Escape' &&\n                !event.defaultPrevented\n            ) {\n                event.stopPropagation()\n                onDismiss()\n            }\n            onKeyDown?.(event)\n        },\n        [onDismiss, hideOnEscape, onKeyDown],\n    )\n\n    if (!isOpen) {\n        return null\n    }\n\n    return (\n        <Portal portalRef={portalRef} portalElement={portalElement}>\n            <Box\n                data-testid=\"modal-overlay\"\n                data-overlay\n                className={classNames(\n                    styles.overlay,\n                    styles[height],\n                    styles[width],\n                    exceptionallySetOverlayClassName,\n                )}\n                /**\n                 * We're using `onPointerDown` instead of `onClick` to prevent the modal from\n                 * closing when the click starts inside the modal and ends on the backdrop.\n                 */\n                onPointerDown={hideOnInteractOutside ? handleBackdropClick : undefined}\n                ref={backdropRef}\n            >\n                <FocusLock\n                    autoFocus={autoFocus}\n                    whiteList={isNotInternalFrame}\n                    returnFocus={true}\n                    crossFrame={false}\n                >\n                    <Dialog\n                        {...props}\n                        ref={dialogRef}\n                        render={\n                            <Box\n                                borderRadius=\"full\"\n                                background=\"default\"\n                                display=\"flex\"\n                                flexDirection=\"column\"\n                                overflow=\"hidden\"\n                                height={height === 'expand' ? 'full' : undefined}\n                                flexGrow={height === 'expand' ? 1 : 0}\n                            />\n                        }\n                        className={classNames(exceptionallySetClassName, styles.container)}\n                        store={store}\n                        preventBodyScroll\n                        // Disable focus lock as we set up our own using ReactFocusLock\n                        modal={false}\n                        autoFocus={false}\n                        autoFocusOnShow={false}\n                        autoFocusOnHide={false}\n                        // Disable portal and backdrop as we control their markup\n                        portal={false}\n                        backdrop={false}\n                        hideOnInteractOutside={false}\n                        hideOnEscape={false}\n                        onKeyDown={handleKeyDown}\n                    >\n                        <ModalContext.Provider value={contextValue}>\n                            {children}\n                        </ModalContext.Provider>\n                    </Dialog>\n                </FocusLock>\n            </Box>\n        </Portal>\n    )\n}\n\n//\n// ModalCloseButton\n//\n\nexport interface ModalCloseButtonProps\n    extends Omit<\n        IconButtonProps,\n        'type' | 'variant' | 'icon' | 'disabled' | 'loading' | 'tabIndex' | 'ref'\n    > {\n    /**\n     * The descriptive label of the button.\n     */\n    'aria-label': string\n}\n\n/**\n * The close button rendered by ModalHeader. Provided independently so that consumers can customize\n * the button's label.\n *\n * @see ModalHeader\n */\nexport function ModalCloseButton(props: ModalCloseButtonProps) {\n    const { onDismiss } = React.useContext(ModalContext)\n    const [includeInTabOrder, setIncludeInTabOrder] = React.useState(false)\n    const [isMounted, setIsMounted] = React.useState(false)\n\n    React.useEffect(\n        function skipAutoFocus() {\n            if (isMounted) {\n                setIncludeInTabOrder(true)\n            } else {\n                setIsMounted(true)\n            }\n        },\n        [isMounted],\n    )\n\n    return (\n        <IconButton\n            {...props}\n            variant=\"quaternary\"\n            onClick={onDismiss}\n            icon={<CloseIcon />}\n            tabIndex={includeInTabOrder ? 0 : -1}\n        />\n    )\n}\n\n//\n// ModalHeader\n//\n\nexport interface ModalHeaderProps extends DivProps, ObfuscatedClassName {\n    /**\n     * The content of the header.\n     */\n    children: React.ReactNode\n\n    /**\n     * Allows to provide a custom button element, or to omit the close button if set to false.\n     * @see ModalCloseButton\n     */\n    button?: React.ReactNode | boolean\n\n    /**\n     * Whether to render a divider line below the header.\n     * @default false\n     */\n    withDivider?: boolean\n}\n\n/**\n * Renders a standard modal header area with an optional close button.\n *\n * @see Modal\n * @see ModalFooter\n * @see ModalBody\n */\nexport function ModalHeader({\n    children,\n    button = true,\n    withDivider = false,\n    exceptionallySetClassName,\n    ...props\n}: ModalHeaderProps) {\n    return (\n        <>\n            <Box\n                {...props}\n                as=\"header\"\n                paddingLeft=\"large\"\n                paddingRight={button === false || button === null ? 'large' : 'small'}\n                paddingY=\"small\"\n                className={exceptionallySetClassName}\n            >\n                <Columns space=\"large\" alignY=\"center\">\n                    <Column width=\"auto\">{children}</Column>\n                    {button === false || button === null ? (\n                        <div className={styles.headerContent} />\n                    ) : (\n                        <Column\n                            width=\"content\"\n                            exceptionallySetClassName={styles.buttonContainer}\n                            data-testid=\"button-container\"\n                        >\n                            {typeof button === 'boolean' ? (\n                                <ModalCloseButton aria-label=\"Close modal\" autoFocus={false} />\n                            ) : (\n                                button\n                            )}\n                        </Column>\n                    )}\n                </Columns>\n            </Box>\n            {withDivider ? <Divider /> : null}\n        </>\n    )\n}\n\n//\n// ModalBody\n//\n\nexport interface ModalBodyProps extends DivProps, ObfuscatedClassName {\n    /**\n     * The content of the modal body.\n     */\n    children: React.ReactNode\n}\n\n/**\n * Renders the body of a modal.\n *\n * Convenient to use alongside ModalHeader and/or ModalFooter as needed. It ensures, among other\n * things, that the contet of the modal body expands or contracts depending on the modal height\n * setting or the size of the content. The body content also automatically scrolls when it's too\n * large to fit the available space.\n *\n * @see Modal\n * @see ModalHeader\n * @see ModalFooter\n */\nexport function ModalBody({ exceptionallySetClassName, children, ...props }: ModalBodyProps) {\n    const { height } = React.useContext(ModalContext)\n    return (\n        <Box\n            {...props}\n            className={exceptionallySetClassName}\n            flexGrow={height === 'expand' ? 1 : 0}\n            height={height === 'expand' ? 'full' : undefined}\n            overflow=\"auto\"\n        >\n            <Box padding=\"large\" paddingBottom=\"xxlarge\">\n                {children}\n            </Box>\n        </Box>\n    )\n}\n\n//\n// ModalFooter\n//\n\nexport interface ModalFooterProps extends DivProps, ObfuscatedClassName {\n    /**\n     * The contant of the modal footer.\n     */\n    children: React.ReactNode\n    /**\n     * Whether to render a divider line below the footer.\n     * @default false\n     */\n    withDivider?: boolean\n}\n\n/**\n * Renders a standard modal footer area.\n *\n * @see Modal\n * @see ModalHeader\n * @see ModalBody\n */\nexport function ModalFooter({\n    exceptionallySetClassName,\n    withDivider = false,\n    ...props\n}: ModalFooterProps) {\n    return (\n        <>\n            {withDivider ? <Divider /> : null}\n            <Box as=\"footer\" {...props} className={exceptionallySetClassName} padding=\"large\" />\n        </>\n    )\n}\n\n//\n// ModalActions\n//\n\nexport type ModalActionsProps = ModalFooterProps\n\n/**\n * A specific version of the ModalFooter, tailored to showing an inline list of actions (buttons).\n * @see ModalFooter\n */\nexport function ModalActions({ children, ...props }: ModalActionsProps) {\n    return (\n        <ModalFooter {...props}>\n            <Inline align=\"right\" space=\"large\">\n                {children}\n            </Inline>\n        </ModalFooter>\n    )\n}\n"],"names":["ModalContext","React","createContext","onDismiss","undefined","height","isNotInternalFrame","element","ownerDocument","document","tagName","toLowerCase","Modal","isOpen","width","exceptionallySetClassName","exceptionallySetOverlayClassName","autoFocus","hideOnEscape","hideOnInteractOutside","children","portalElement","onKeyDown","className","props","setOpen","useCallback","visible","store","useDialogStore","open","contextValue","useMemo","portalRef","useRef","dialogRef","backdropRef","handleBackdropClick","event","current","contains","target","stopPropagation","useLayoutEffect","disableAccessibilityTreeOutside","hideOthers","handleKeyDown","key","defaultPrevented","createElement","Portal","Box","classNames","styles","overlay","onPointerDown","ref","FocusLock","whiteList","returnFocus","crossFrame","Dialog","render","borderRadius","background","display","flexDirection","overflow","flexGrow","container","preventBodyScroll","modal","autoFocusOnShow","autoFocusOnHide","portal","backdrop","Provider","value","ModalCloseButton","useContext","includeInTabOrder","setIncludeInTabOrder","useState","isMounted","setIsMounted","useEffect","skipAutoFocus","IconButton","variant","onClick","icon","CloseIcon","tabIndex","ModalHeader","button","withDivider","Fragment","as","paddingLeft","paddingRight","paddingY","Columns","space","alignY","Column","headerContent","buttonContainer","Divider","ModalBody","padding","paddingBottom","ModalFooter","_objectSpread","ModalActions","Inline","align"],"mappings":"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"}
+{"version":3,"file":"modal.js","sources":["../../src/modal/modal.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport FocusLock from 'react-focus-lock'\nimport { hideOthers } from 'aria-hidden'\n\nimport { Dialog, DialogOptions, useDialogStore, Portal, PortalOptions } from '@ariakit/react'\n\nimport { CloseIcon } from '../icons/close-icon'\nimport { Column, Columns } from '../columns'\nimport { Inline } from '../inline'\nimport { Divider } from '../divider'\nimport { Box } from '../box'\nimport { IconButtonProps, IconButton } from '../button'\n\nimport styles from './modal.module.css'\nimport type { ObfuscatedClassName } from '../utils/common-types'\nimport { forwardRef } from 'react'\n\ntype ModalWidth = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'full'\ntype ModalHeightMode = 'expand' | 'fitContent'\n\n//\n// ModalContext\n//\n\ntype ModalContextValue = {\n    onDismiss?(this: void): void\n    height: ModalHeightMode\n}\n\nconst ModalContext = React.createContext<ModalContextValue>({\n    onDismiss: undefined,\n    height: 'fitContent',\n})\n\n//\n// Modal container\n//\n\ntype DivProps = Omit<\n    React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLDivElement>, HTMLDivElement>,\n    'className' | 'children' | `aria-label` | `aria-labelledby`\n>\n\nexport interface ModalProps extends DivProps, ObfuscatedClassName {\n    /**\n     * The content of the modal.\n     */\n    children: React.ReactNode\n\n    /**\n     * Whether the modal is open and visible or not.\n     */\n    isOpen: boolean\n\n    /**\n     * Called when the user triggers closing the modal.\n     */\n    onDismiss?(): void\n\n    /**\n     * A descriptive setting for how wide the modal should aim to be, depending on how much space\n     * it has on screen.\n     * @default 'medium'\n     */\n    width?: ModalWidth\n\n    /**\n     * A descriptive setting for how tall the modal should aim to be.\n     *\n     * - 'expand': the modal aims to fill most of the available screen height, leaving only a small\n     *   padding above and below.\n     * - 'fitContent': the modal shrinks to the smallest size that allow it to fit its content.\n     *\n     * In either case, if content does not fit, the content of the main body is set to scroll\n     * (provided you use `ModalBody`) so that the modal never has to strech vertically beyond the\n     * viewport boundaries.\n     *\n     * If you do not use `ModalBody`, the modal still prevents overflow, and you are in charge of\n     * the inner layout to ensure scroll, or whatever other strategy you may want.\n     */\n    height?: ModalHeightMode\n\n    /**\n     * Whether to set or not the focus initially to the first focusable element inside the modal.\n     */\n    autoFocus?: boolean\n\n    /**\n     * Controls if the modal is dismissed when pressing \"Escape\".\n     */\n    hideOnEscape?: DialogOptions['hideOnEscape']\n\n    /**\n     * Controls if the modal is dismissed when clicking outside the modal body, on the overlay.\n     */\n    hideOnInteractOutside?: DialogOptions['hideOnInteractOutside']\n\n    /**\n     * An escape hatch in case you need to provide a custom class name to the overlay element.\n     */\n    exceptionallySetOverlayClassName?: string\n\n    /**\n     * Defines a string value that labels the current modal for assistive technologies.\n     */\n    'aria-label'?: string\n\n    /**\n     * Identifies the element (or elements) that labels the current modal for assistive technologies.\n     */\n    'aria-labelledby'?: string\n\n    /**\n     * An HTML element or a memoized callback function that returns an HTML element to be used as\n     * the portal element. By default, the portal element will be a `div` element appended to the\n     * `document.body`.\n     *\n     * @default HTMLDivElement\n     *\n     * @example\n     * const [portal, setPortal] = useState(null);\n     * <Portal portalElement={portal} />;\n     * <div ref={setPortal} />;\n     *\n     * @example\n     * const getPortalElement = useCallback(() => {\n     *   const div = document.createElement(\"div\");\n     *   const portalRoot = document.getElementById(\"portal-root\");\n     *   portalRoot.appendChild(div);\n     *   return div;\n     * }, []);\n     * <Portal portalElement={getPortalElement} />;\n     */\n    portalElement?: PortalOptions['portalElement']\n}\n\nfunction isNotInternalFrame(element: HTMLElement) {\n    return !(element.ownerDocument === document && element.tagName.toLowerCase() === 'iframe')\n}\n\n/**\n * Renders a modal that sits on top of the rest of the content in the entire page.\n *\n * Follows the WAI-ARIA Dialog (Modal) Pattern.\n *\n * @see ModalHeader\n * @see ModalFooter\n * @see ModalBody\n */\nexport function Modal({\n    isOpen,\n    onDismiss,\n    height = 'fitContent',\n    width = 'medium',\n    exceptionallySetClassName,\n    exceptionallySetOverlayClassName,\n    autoFocus = true,\n    hideOnEscape = true,\n    hideOnInteractOutside = true,\n    children,\n    portalElement,\n    onKeyDown,\n    // @ts-expect-error we want to make sure to not pass it to the Dialog component\n    className,\n    ...props\n}: ModalProps) {\n    const setOpen = React.useCallback(\n        (visible: boolean) => {\n            if (!visible) {\n                onDismiss?.()\n            }\n        },\n        [onDismiss],\n    )\n    const store = useDialogStore({ open: isOpen, setOpen })\n\n    const contextValue: ModalContextValue = React.useMemo(() => ({ onDismiss, height }), [\n        onDismiss,\n        height,\n    ])\n\n    const portalRef = React.useRef<HTMLElement | null>(null)\n    const dialogRef = React.useRef<HTMLDivElement | null>(null)\n    const backdropRef = React.useRef<HTMLDivElement | null>(null)\n    const handleBackdropClick = React.useCallback(\n        (event: React.MouseEvent) => {\n            if (\n                // The focus lock element takes up the same space as the backdrop and is where the event bubbles up from,\n                // so instead of checking the backdrop as the event target, we need to make sure it's just above the dialog\n                !dialogRef.current?.contains(event.target as Node) &&\n                // Events fired from other portals will bubble up to the backdrop, even if it isn't a child in the DOM\n                backdropRef.current?.contains(event.target as Node)\n            ) {\n                event.stopPropagation()\n                onDismiss?.()\n            }\n        },\n        [onDismiss],\n    )\n\n    React.useLayoutEffect(\n        function disableAccessibilityTreeOutside() {\n            if (!isOpen || !portalRef.current) {\n                return\n            }\n\n            return hideOthers(portalRef.current)\n        },\n        [isOpen],\n    )\n\n    const handleKeyDown = React.useCallback(\n        function handleKeyDown(event: React.KeyboardEvent<HTMLDivElement>) {\n            if (\n                hideOnEscape &&\n                onDismiss != null &&\n                event.key === 'Escape' &&\n                !event.defaultPrevented\n            ) {\n                event.stopPropagation()\n                onDismiss()\n            }\n            onKeyDown?.(event)\n        },\n        [onDismiss, hideOnEscape, onKeyDown],\n    )\n\n    if (!isOpen) {\n        return null\n    }\n\n    return (\n        <Portal portalRef={portalRef} portalElement={portalElement}>\n            <Box\n                data-testid=\"modal-overlay\"\n                data-overlay\n                className={classNames(\n                    styles.overlay,\n                    styles[height],\n                    styles[width],\n                    exceptionallySetOverlayClassName,\n                )}\n                /**\n                 * We're using `onPointerDown` instead of `onClick` to prevent the modal from\n                 * closing when the click starts inside the modal and ends on the backdrop.\n                 */\n                onPointerDown={hideOnInteractOutside ? handleBackdropClick : undefined}\n                ref={backdropRef}\n            >\n                <FocusLock\n                    autoFocus={autoFocus}\n                    whiteList={isNotInternalFrame}\n                    returnFocus={true}\n                    crossFrame={false}\n                >\n                    <Dialog\n                        {...props}\n                        ref={dialogRef}\n                        render={\n                            <Box\n                                borderRadius=\"full\"\n                                background=\"default\"\n                                display=\"flex\"\n                                flexDirection=\"column\"\n                                overflow=\"hidden\"\n                                height={height === 'expand' ? 'full' : undefined}\n                                flexGrow={height === 'expand' ? 1 : 0}\n                            />\n                        }\n                        className={classNames(exceptionallySetClassName, styles.container)}\n                        store={store}\n                        preventBodyScroll\n                        // Disable focus lock as we set up our own using ReactFocusLock\n                        modal={false}\n                        autoFocus={false}\n                        autoFocusOnShow={false}\n                        autoFocusOnHide={false}\n                        // Disable portal and backdrop as we control their markup\n                        portal={false}\n                        backdrop={false}\n                        hideOnInteractOutside={false}\n                        hideOnEscape={false}\n                        onKeyDown={handleKeyDown}\n                    >\n                        <ModalContext.Provider value={contextValue}>\n                            {children}\n                        </ModalContext.Provider>\n                    </Dialog>\n                </FocusLock>\n            </Box>\n        </Portal>\n    )\n}\n\n//\n// ModalCloseButton\n//\n\nexport interface ModalCloseButtonProps\n    extends Omit<\n        IconButtonProps,\n        'type' | 'variant' | 'icon' | 'disabled' | 'loading' | 'tabIndex' | 'ref'\n    > {\n    /**\n     * The descriptive label of the button.\n     */\n    'aria-label': string\n}\n\n/**\n * The close button rendered by ModalHeader. Provided independently so that consumers can customize\n * the button's label.\n *\n * @see ModalHeader\n */\nexport function ModalCloseButton(props: ModalCloseButtonProps) {\n    const { onDismiss } = React.useContext(ModalContext)\n    const [includeInTabOrder, setIncludeInTabOrder] = React.useState(false)\n    const [isMounted, setIsMounted] = React.useState(false)\n\n    React.useEffect(\n        function skipAutoFocus() {\n            if (isMounted) {\n                setIncludeInTabOrder(true)\n            } else {\n                setIsMounted(true)\n            }\n        },\n        [isMounted],\n    )\n\n    return (\n        <IconButton\n            {...props}\n            variant=\"quaternary\"\n            onClick={onDismiss}\n            icon={<CloseIcon />}\n            tabIndex={includeInTabOrder ? 0 : -1}\n        />\n    )\n}\n\n//\n// ModalHeader\n//\n\nexport interface ModalHeaderProps extends DivProps, ObfuscatedClassName {\n    /**\n     * The content of the header.\n     */\n    children: React.ReactNode\n\n    /**\n     * Allows to provide a custom button element, or to omit the close button if set to false.\n     * @see ModalCloseButton\n     */\n    button?: React.ReactNode | boolean\n\n    /**\n     * Whether to render a divider line below the header.\n     * @default false\n     */\n    withDivider?: boolean\n}\n\n/**\n * Renders a standard modal header area with an optional close button.\n *\n * @see Modal\n * @see ModalFooter\n * @see ModalBody\n */\nexport function ModalHeader({\n    children,\n    button = true,\n    withDivider = false,\n    exceptionallySetClassName,\n    ...props\n}: ModalHeaderProps) {\n    return (\n        <>\n            <Box\n                {...props}\n                as=\"header\"\n                paddingLeft=\"large\"\n                paddingRight={button === false || button === null ? 'large' : 'small'}\n                paddingY=\"small\"\n                className={exceptionallySetClassName}\n            >\n                <Columns space=\"large\" alignY=\"center\">\n                    <Column width=\"auto\">{children}</Column>\n                    {button === false || button === null ? (\n                        <div className={styles.headerContent} />\n                    ) : (\n                        <Column\n                            width=\"content\"\n                            exceptionallySetClassName={styles.buttonContainer}\n                            data-testid=\"button-container\"\n                        >\n                            {typeof button === 'boolean' ? (\n                                <ModalCloseButton aria-label=\"Close modal\" autoFocus={false} />\n                            ) : (\n                                button\n                            )}\n                        </Column>\n                    )}\n                </Columns>\n            </Box>\n            {withDivider ? <Divider /> : null}\n        </>\n    )\n}\n\n//\n// ModalBody\n//\n\nexport interface ModalBodyProps extends DivProps, ObfuscatedClassName {\n    /**\n     * The content of the modal body.\n     */\n    children: React.ReactNode\n}\n\n/**\n * Renders the body of a modal.\n *\n * Convenient to use alongside ModalHeader and/or ModalFooter as needed. It ensures, among other\n * things, that the content of the modal body expands or contracts depending on the modal height\n * setting or the size of the content. The body content also automatically scrolls when it's too\n * large to fit the available space.\n *\n * @see Modal\n * @see ModalHeader\n * @see ModalFooter\n */\nexport const ModalBody = forwardRef<HTMLDivElement, ModalBodyProps>(function ModalBody(\n    { exceptionallySetClassName, children, ...props },\n    ref,\n) {\n    const { height } = React.useContext(ModalContext)\n    return (\n        <Box\n            {...props}\n            ref={ref}\n            className={exceptionallySetClassName}\n            flexGrow={height === 'expand' ? 1 : 0}\n            height={height === 'expand' ? 'full' : undefined}\n            overflow=\"auto\"\n        >\n            <Box padding=\"large\" paddingBottom=\"xxlarge\">\n                {children}\n            </Box>\n        </Box>\n    )\n})\n\n//\n// ModalFooter\n//\n\nexport interface ModalFooterProps extends DivProps, ObfuscatedClassName {\n    /**\n     * The contant of the modal footer.\n     */\n    children: React.ReactNode\n    /**\n     * Whether to render a divider line below the footer.\n     * @default false\n     */\n    withDivider?: boolean\n}\n\n/**\n * Renders a standard modal footer area.\n *\n * @see Modal\n * @see ModalHeader\n * @see ModalBody\n */\nexport function ModalFooter({\n    exceptionallySetClassName,\n    withDivider = false,\n    ...props\n}: ModalFooterProps) {\n    return (\n        <>\n            {withDivider ? <Divider /> : null}\n            <Box as=\"footer\" {...props} className={exceptionallySetClassName} padding=\"large\" />\n        </>\n    )\n}\n\n//\n// ModalActions\n//\n\nexport type ModalActionsProps = ModalFooterProps\n\n/**\n * A specific version of the ModalFooter, tailored to showing an inline list of actions (buttons).\n * @see ModalFooter\n */\nexport function ModalActions({ children, ...props }: ModalActionsProps) {\n    return (\n        <ModalFooter {...props}>\n            <Inline align=\"right\" space=\"large\">\n                {children}\n            </Inline>\n        </ModalFooter>\n    )\n}\n"],"names":["ModalContext","React","createContext","onDismiss","undefined","height","isNotInternalFrame","element","ownerDocument","document","tagName","toLowerCase","Modal","isOpen","width","exceptionallySetClassName","exceptionallySetOverlayClassName","autoFocus","hideOnEscape","hideOnInteractOutside","children","portalElement","onKeyDown","className","props","setOpen","useCallback","visible","store","useDialogStore","open","contextValue","useMemo","portalRef","useRef","dialogRef","backdropRef","handleBackdropClick","event","current","contains","target","stopPropagation","useLayoutEffect","disableAccessibilityTreeOutside","hideOthers","handleKeyDown","key","defaultPrevented","createElement","Portal","Box","classNames","styles","overlay","onPointerDown","ref","FocusLock","whiteList","returnFocus","crossFrame","Dialog","render","borderRadius","background","display","flexDirection","overflow","flexGrow","container","preventBodyScroll","modal","autoFocusOnShow","autoFocusOnHide","portal","backdrop","Provider","value","ModalCloseButton","useContext","includeInTabOrder","setIncludeInTabOrder","useState","isMounted","setIsMounted","useEffect","skipAutoFocus","IconButton","variant","onClick","icon","CloseIcon","tabIndex","ModalHeader","button","withDivider","Fragment","as","paddingLeft","paddingRight","paddingY","Columns","space","alignY","Column","headerContent","buttonContainer","Divider","ModalBody","forwardRef","padding","paddingBottom","ModalFooter","_objectSpread","ModalActions","Inline","align"],"mappings":"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"}

package/es/password-field/password-field.js

@@ -5,10 +5,11 @@ import { PasswordHiddenIcon } from '../icons/password-hidden-icon.js';
 import { TextField } from '../text-field/text-field.js';
 import { IconButton } from '../button/button.js';
 
-const _excluded = ["togglePasswordLabel"];
+const _excluded = ["togglePasswordLabel", "endSlot"];
 const PasswordField = /*#__PURE__*/React.forwardRef(function PasswordField(_ref, ref) {
   let {
-    togglePasswordLabel = 'Toggle password visibility'
+    togglePasswordLabel = 'Toggle password visibility',
+    endSlot
   } = _ref,
       props = _objectWithoutProperties(_ref, _excluded);
 
@@ -18,14 +19,14 @@ const PasswordField = /*#__PURE__*/React.forwardRef(function PasswordField(_ref,
     ref: ref,
     // @ts-expect-error TextField does not support type="password", so we override the type check here
     type: isPasswordVisible ? 'text' : 'password',
-    endSlot: /*#__PURE__*/React.createElement(IconButton, {
+    endSlot: /*#__PURE__*/React.createElement(React.Fragment, null, endSlot, /*#__PURE__*/React.createElement(IconButton, {
       variant: "quaternary",
       icon: /*#__PURE__*/React.createElement(Icon, {
         "aria-hidden": true
       }),
       "aria-label": togglePasswordLabel,
       onClick: () => setPasswordVisible(v => !v)
-    })
+    }))
   }));
 });
 

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

@@ -1 +1 @@
-{"version":3,"file":"password-field.js","sources":["../../src/password-field/password-field.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { PasswordVisibleIcon } from '../icons/password-visible-icon'\nimport { PasswordHiddenIcon } from '../icons/password-hidden-icon'\n\nimport { TextField, TextFieldProps } from '../text-field'\nimport { IconButton } from '../button'\n\nimport type { BaseFieldVariantProps } from '../base-field'\n\ninterface PasswordFieldProps\n    extends Omit<TextFieldProps, 'type' | 'startSlot' | 'endSlot'>,\n        BaseFieldVariantProps {\n    togglePasswordLabel?: string\n}\n\nconst PasswordField = React.forwardRef<HTMLInputElement, PasswordFieldProps>(function PasswordField(\n    { togglePasswordLabel = 'Toggle password visibility', ...props },\n    ref,\n) {\n    const [isPasswordVisible, setPasswordVisible] = React.useState(false)\n    const Icon = isPasswordVisible ? PasswordVisibleIcon : PasswordHiddenIcon\n    return (\n        <TextField\n            {...props}\n            ref={ref}\n            // @ts-expect-error TextField does not support type=\"password\", so we override the type check here\n            type={isPasswordVisible ? 'text' : 'password'}\n            endSlot={\n                <IconButton\n                    variant=\"quaternary\"\n                    icon={<Icon aria-hidden />}\n                    aria-label={togglePasswordLabel}\n                    onClick={() => setPasswordVisible((v) => !v)}\n                />\n            }\n        />\n    )\n})\n\nexport { PasswordField }\nexport type { PasswordFieldProps }\n"],"names":["PasswordField","React","forwardRef","ref","togglePasswordLabel","props","isPasswordVisible","setPasswordVisible","useState","Icon","PasswordVisibleIcon","PasswordHiddenIcon","TextField","type","endSlot","IconButton","variant","icon","createElement","onClick","v"],"mappings":";;;;;;;;AAgBMA,MAAAA,aAAa,gBAAGC,KAAK,CAACC,UAAN,CAAuD,SAASF,aAAT,CAEzEG,IAAAA,EAAAA,GAFyE,EAEtE;EAAA,IADH;AAAEC,IAAAA,mBAAmB,GAAG,4BAAA;GACrB,GAAA,IAAA;AAAA,MADsDC,KACtD,GAAA,wBAAA,CAAA,IAAA,EAAA,SAAA,CAAA,CAAA;;EAEH,MAAM,CAACC,iBAAD,EAAoBC,kBAApB,CAAA,GAA0CN,KAAK,CAACO,QAAN,CAAe,KAAf,CAAhD,CAAA;AACA,EAAA,MAAMC,IAAI,GAAGH,iBAAiB,GAAGI,mBAAH,GAAyBC,kBAAvD,CAAA;AACA,EAAA,oBACIV,mBAAA,CAACW,SAAD,oCACQP,KADR,CAAA,EAAA,EAAA,EAAA;AAEIF,IAAAA,GAAG,EAAEA,GAFT;AAGI;AACAU,IAAAA,IAAI,EAAEP,iBAAiB,GAAG,MAAH,GAAY,UAJvC;AAKIQ,IAAAA,OAAO,eACHb,mBAAA,CAACc,UAAD,EAAW;AACPC,MAAAA,OAAO,EAAC,YADD;AAEPC,MAAAA,IAAI,eAAEhB,KAAA,CAAAiB,aAAA,CAACT,IAAD,EAAoB;QAAA,aAAA,EAAA,IAAA;AAAA,OAApB,CAFC;AAEmB,MAAA,YAAA,EACdL,mBAHL;AAIPe,MAAAA,OAAO,EAAE,MAAMZ,kBAAkB,CAAEa,CAAD,IAAO,CAACA,CAAT,CAAA;KAJrC,CAAA;GAPZ,CAAA,CAAA,CAAA;AAgBH,CAtBqB;;;;"}
+{"version":3,"file":"password-field.js","sources":["../../src/password-field/password-field.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { PasswordVisibleIcon } from '../icons/password-visible-icon'\nimport { PasswordHiddenIcon } from '../icons/password-hidden-icon'\n\nimport { TextField, TextFieldProps } from '../text-field'\nimport { IconButton } from '../button'\n\nimport type { BaseFieldVariantProps } from '../base-field'\n\ninterface PasswordFieldProps\n    extends Omit<TextFieldProps, 'type' | 'startSlot' | 'endSlot'>,\n        BaseFieldVariantProps {\n    togglePasswordLabel?: string\n    endSlot?: React.ReactElement | string | number\n}\n\nconst PasswordField = React.forwardRef<HTMLInputElement, PasswordFieldProps>(function PasswordField(\n    { togglePasswordLabel = 'Toggle password visibility', endSlot, ...props },\n    ref,\n) {\n    const [isPasswordVisible, setPasswordVisible] = React.useState(false)\n    const Icon = isPasswordVisible ? PasswordVisibleIcon : PasswordHiddenIcon\n    return (\n        <TextField\n            {...props}\n            ref={ref}\n            // @ts-expect-error TextField does not support type=\"password\", so we override the type check here\n            type={isPasswordVisible ? 'text' : 'password'}\n            endSlot={\n                <>\n                    {endSlot}\n                    <IconButton\n                        variant=\"quaternary\"\n                        icon={<Icon aria-hidden />}\n                        aria-label={togglePasswordLabel}\n                        onClick={() => setPasswordVisible((v) => !v)}\n                    />\n                </>\n            }\n        />\n    )\n})\n\nexport { PasswordField }\nexport type { PasswordFieldProps }\n"],"names":["PasswordField","React","forwardRef","ref","togglePasswordLabel","endSlot","props","isPasswordVisible","setPasswordVisible","useState","Icon","PasswordVisibleIcon","PasswordHiddenIcon","TextField","type","createElement","Fragment","IconButton","variant","icon","onClick","v"],"mappings":";;;;;;;;AAiBMA,MAAAA,aAAa,gBAAGC,KAAK,CAACC,UAAN,CAAuD,SAASF,aAAT,CAEzEG,IAAAA,EAAAA,GAFyE,EAEtE;EAAA,IADH;AAAEC,IAAAA,mBAAmB,GAAG,4BAAxB;AAAsDC,IAAAA,OAAAA;GACnD,GAAA,IAAA;AAAA,MAD+DC,KAC/D,GAAA,wBAAA,CAAA,IAAA,EAAA,SAAA,CAAA,CAAA;;EAEH,MAAM,CAACC,iBAAD,EAAoBC,kBAApB,CAAA,GAA0CP,KAAK,CAACQ,QAAN,CAAe,KAAf,CAAhD,CAAA;AACA,EAAA,MAAMC,IAAI,GAAGH,iBAAiB,GAAGI,mBAAH,GAAyBC,kBAAvD,CAAA;AACA,EAAA,oBACIX,mBAAA,CAACY,SAAD,oCACQP,KADR,CAAA,EAAA,EAAA,EAAA;AAEIH,IAAAA,GAAG,EAAEA,GAFT;AAGI;AACAW,IAAAA,IAAI,EAAEP,iBAAiB,GAAG,MAAH,GAAY,UAJvC;AAKIF,IAAAA,OAAO,eACHJ,KAAA,CAAAc,aAAA,CAAAd,KAAA,CAAAe,QAAA,EAAA,IAAA,EACKX,OADL,eAEIJ,KAAA,CAAAc,aAAA,CAACE,UAAD,EAAW;AACPC,MAAAA,OAAO,EAAC,YADD;AAEPC,MAAAA,IAAI,eAAElB,KAAA,CAAAc,aAAA,CAACL,IAAD,EAAK;QAAA,aAAA,EAAA,IAAA;AAAA,OAAL,CAFC;AAGK,MAAA,YAAA,EAAAN,mBAHL;AAIPgB,MAAAA,OAAO,EAAE,MAAMZ,kBAAkB,CAAEa,CAAD,IAAO,CAACA,CAAT,CAAA;AAJ1B,KAAX,CAFJ,CAAA;GAPZ,CAAA,CAAA,CAAA;AAmBH,CAzBqB;;;;"}

package/es/select-field/select-field.js

@@ -4,21 +4,21 @@ import { BaseField } from '../base-field/base-field.js';
 import { Box } from '../box/box.js';
 import modules_1fa9b208 from './select-field.module.css.js';
 
-const _excluded = ["variant", "id", "label", "secondaryLabel", "auxiliaryLabel", "hint", "message", "tone", "maxWidth", "children", "hidden", "aria-describedby"];
+const _excluded = ["variant", "id", "label", "value", "auxiliaryLabel", "message", "tone", "maxWidth", "children", "hidden", "aria-describedby", "onChange"];
 const SelectField = /*#__PURE__*/React.forwardRef(function SelectField(_ref, ref) {
   let {
     variant = 'default',
     id,
     label,
-    secondaryLabel,
+    value,
     auxiliaryLabel,
-    hint,
     message,
     tone,
     maxWidth,
     children,
     hidden,
-    'aria-describedby': ariaDescribedBy
+    'aria-describedby': ariaDescribedBy,
+    onChange: originalOnChange
   } = _ref,
       props = _objectWithoutProperties(_ref, _excluded);
 
@@ -26,9 +26,8 @@ const SelectField = /*#__PURE__*/React.forwardRef(function SelectField(_ref, ref
     variant: variant,
     id: id,
     label: label,
-    secondaryLabel: secondaryLabel,
+    value: value,
     auxiliaryLabel: auxiliaryLabel,
-    hint: hint,
     message: message,
     tone: tone,
     maxWidth: maxWidth,
@@ -38,7 +37,10 @@ const SelectField = /*#__PURE__*/React.forwardRef(function SelectField(_ref, ref
     "data-testid": "select-wrapper",
     className: [modules_1fa9b208.selectWrapper, tone === 'error' ? modules_1fa9b208.error : null, variant === 'bordered' ? modules_1fa9b208.bordered : null]
   }, /*#__PURE__*/React.createElement("select", _objectSpread2(_objectSpread2(_objectSpread2({}, props), extraProps), {}, {
-    ref: ref
+    ref: ref,
+    onChange: event => {
+      originalOnChange == null ? void 0 : originalOnChange(event);
+    }
   }), children), /*#__PURE__*/React.createElement(SelectChevron, {
     "aria-hidden": true
   })));

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        secondaryLabel,\n        auxiliaryLabel,\n        hint,\n        message,\n        tone,\n        maxWidth,\n        children,\n        hidden,\n        'aria-describedby': ariaDescribedBy,\n        ...props\n    },\n    ref,\n) {\n    return (\n        <BaseField\n            variant={variant}\n            id={id}\n            label={label}\n            secondaryLabel={secondaryLabel}\n            auxiliaryLabel={auxiliaryLabel}\n            hint={hint}\n            message={message}\n            tone={tone}\n            maxWidth={maxWidth}\n            hidden={hidden}\n            aria-describedby={ariaDescribedBy}\n        >\n            {(extraProps) => (\n                <Box\n                    data-testid=\"select-wrapper\"\n                    className={[\n                        styles.selectWrapper,\n                        tone === 'error' ? styles.error : null,\n                        variant === 'bordered' ? styles.bordered : null,\n                    ]}\n                >\n                    <select {...props} {...extraProps} ref={ref}>\n                        {children}\n                    </select>\n                    <SelectChevron aria-hidden />\n                </Box>\n            )}\n        </BaseField>\n    )\n})\n\nfunction SelectChevron(props: JSX.IntrinsicElements['svg']) {\n    return (\n        <svg width=\"16\" height=\"16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n            <path\n                d=\"M11.646 5.646a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 1 1 .708-.708L8 9.293l3.646-3.647z\"\n                fill=\"currentColor\"\n            />\n        </svg>\n    )\n}\n\nexport { SelectField }\nexport type { SelectFieldProps }\n"],"names":["SelectField","React","forwardRef","ref","variant","id","label","secondaryLabel","auxiliaryLabel","hint","message","tone","maxWidth","children","hidden","ariaDescribedBy","props","createElement","BaseField","extraProps","Box","className","styles","selectWrapper","error","bordered","_objectSpread","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,cAJJ;IAKIC,cALJ;IAMIC,IANJ;IAOIC,OAPJ;IAQIC,IARJ;IASIC,QATJ;IAUIC,QAVJ;IAWIC,MAXJ;IAYI,kBAAoBC,EAAAA,eAAAA;GAGrB,GAAA,IAAA;AAAA,MAFIC,KAEJ,GAAA,wBAAA,CAAA,IAAA,EAAA,SAAA,CAAA,CAAA;;AAEH,EAAA,oBACIf,KAAC,CAAAgB,aAAD,CAACC,SAAD,EACI;AAAAd,IAAAA,OAAO,EAAEA,OAAT;AACAC,IAAAA,EAAE,EAAEA,EADJ;AAEAC,IAAAA,KAAK,EAAEA,KAFP;AAGAC,IAAAA,cAAc,EAAEA,cAHhB;AAIAC,IAAAA,cAAc,EAAEA,cAJhB;AAKAC,IAAAA,IAAI,EAAEA,IALN;AAMAC,IAAAA,OAAO,EAAEA,OANT;AAOAC,IAAAA,IAAI,EAAEA,IAPN;AAQAC,IAAAA,QAAQ,EAAEA,QARV;AASAE,IAAAA,MAAM,EAAEA,MATR;IASc,kBACIC,EAAAA,eAAAA;GAXtB,EAaMI,UAAD,iBACGlB,KAAC,CAAAgB,aAAD,CAACG,GAAD,EACgB;AAAA,IAAA,aAAA,EAAA,gBAAA;IACZC,SAAS,EAAE,CACPC,gBAAM,CAACC,aADA,EAEPZ,IAAI,KAAK,OAAT,GAAmBW,gBAAM,CAACE,KAA1B,GAAkC,IAF3B,EAGPpB,OAAO,KAAK,UAAZ,GAAyBkB,gBAAM,CAACG,QAAhC,GAA2C,IAHpC,CAAA;GAFf,eAQIxB,KAAY,CAAAgB,aAAZ,CAAY,QAAZ,EAAAS,cAAA,CAAAA,cAAA,CAAAA,cAAA,CAAA,EAAA,EAAYV,KAAZ,CAAA,EAAuBG,UAAvB,CAAA,EAAA,EAAA,EAAA;AAAmChB,IAAAA,GAAG,EAAEA,GAAAA;GACnCU,CAAAA,EAAAA,QADL,CARJ,eAWIZ,KAAA,CAAAgB,aAAA,CAACU,aAAD,EAA6B;IAAA,aAAA,EAAA,IAAA;GAA7B,CAXJ,CAdR,CADJ,CAAA;AA+BH,CAjDmB,EAApB;;AAmDA,SAASA,aAAT,CAAuBX,KAAvB,EAA0D;AACtD,EAAA,oBACIf,KAAK,CAAAgB,aAAL,CAAK,KAAL,EAAAS,cAAA,CAAA;AAAKE,IAAAA,KAAK,EAAC,IAAX;AAAgBC,IAAAA,MAAM,EAAC,IAAvB;AAA4BC,IAAAA,IAAI,EAAC,MAAjC;AAAwCC,IAAAA,KAAK,EAAC,4BAAA;AAA9C,GAAA,EAA+Ef,KAA/E,CACIf,eAAAA,KACI,CAAAgB,aADJ,CACI,MADJ,EACI;AAAAe,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 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;;;;"}