@react-spectrum/s2 0.11.1 → 0.12.0

package/dist/TextField.css

@@ -1,224 +1,228 @@
 @layer _.a {
-  .Fd11 {
+  .Fd12 {
     height: auto;
   }
 
-  .se11 {
+  .se12 {
     display: grid;
   }
 
-  .z2mU11 {
+  .z2mU12 {
     grid-column-start: 1;
   }
 
-  .yvoofG11 {
+  .yvoofG12 {
     grid-column-end: span 2;
   }
 
-  .DM8Mfn11 {
+  .DM8Mfn12 {
     grid-template-columns: 1fr;
   }
 
-  .DPlN5qb11 {
+  .DPlN5qb12 {
     grid-template-columns: auto 1fr;
   }
 
-  .DLwlgod11 {
+  .DLwlgod12 {
     grid-template-columns: subgrid;
   }
 
-  .E4w1sLc11 {
+  .E4w1sLc12 {
     grid-template-rows: auto 1fr auto;
   }
 
-  .EPlN5qb11 {
+  .EPlN5qb12 {
     grid-template-rows: auto 1fr;
   }
 
-  .Cxaocre11 {
+  .Cxaocre12 {
     grid-template-areas: "label"
                          "input"
                          "helptext";
   }
 
-  .CbRM95c11 {
+  .CbRM95c12 {
     grid-template-areas: "label input"
                          "label helptext";
   }
 
-  .-_6BNtrc-c11 {
+  .-_6BNtrc-c12 {
     --fs: pow(1.125, 0);
   }
 
-  .-_6BNtrc-a11 {
+  .-_6BNtrc-a12 {
     --fs: pow(1.125, -2);
   }
 
-  .-_6BNtrc-b11 {
+  .-_6BNtrc-b12 {
     --fs: pow(1.125, -1);
   }
 
-  .-_6BNtrc-d11 {
+  .-_6BNtrc-d12 {
     --fs: pow(1.125, 1);
   }
 
-  .-_6BNtrc-e11 {
+  .-_6BNtrc-e12 {
     --fs: pow(1.125, 2);
   }
 
-  .ea11 {
+  .ea12 {
     align-items: baseline;
   }
 
-  ._Fd11 {
+  ._Fd12 {
     line-height: round(1em * (1.15 + (1 - ((min(32, var(--s2-font-size-base, 14) * var(--fs))  - 10)) / 22) * .15), 2px);
   }
 
-  .-BhX7R-Fx11 {
+  .-BhX7R-Fx12 {
     --field-height: calc(2rem * var(--s2-scale));
   }
 
-  .-BhX7R-Fn11 {
+  .-BhX7R-Fn12 {
     --field-height: calc(1.25rem * var(--s2-scale));
   }
 
-  .-BhX7R-Fp11 {
+  .-BhX7R-Fp12 {
     --field-height: calc(1.5rem * var(--s2-scale));
   }
 
-  .-BhX7R-Fv11 {
+  .-BhX7R-Fv12 {
     --field-height: calc(2.5rem * var(--s2-scale));
   }
 
-  .-BhX7R-Fz11 {
+  .-BhX7R-Fz12 {
     --field-height: calc(3rem * var(--s2-scale));
   }
 
-  .-AJjOLd-UVkF0Db11 {
+  .-AJjOLd-UVkF0Db12 {
     --field-gap: calc((var(--field-height)  - var(--_k, 0px)  - var(--h, 0px)  - 1lh) / 2);
   }
 
-  .qg11 {
+  .qg12 {
     column-gap: .75rem;
   }
 
-  .__ca11 {
+  .__ca12 {
     -webkit-tap-highlight-color: #0000;
   }
 
-  .Sd11 {
+  .Sd12 {
     padding-inline-start: 0;
   }
 
-  .Rd11 {
+  .Rd12 {
     padding-inline-end: 0;
   }
 
-  .Tu7Fubd11 {
+  .Tu7Fubd12 {
     padding-top: calc((var(--M)  - var(--_k, 0px)  - var(--h, 0px)  - 1lh) / 2);
   }
 
-  .Qu7Fubd11 {
+  .Qu7Fubd12 {
     padding-bottom: calc((var(--M)  - var(--_k, 0px)  - var(--h, 0px)  - 1lh) / 2);
   }
 
-  .MAyFGYc11 {
+  .MAyFGYc12 {
     min-height: var(--M);
   }
 
-  ._oa11 {
+  ._oa12 {
     box-sizing: border-box;
   }
 
-  .g911 {
+  .g912 {
     background-color: #0000;
   }
 
-  .p40ub4c11 {
+  .p40ub4c12 {
     color: inherit;
   }
 
-  .u40ub4c11 {
+  .u40ub4c12 {
     font-family: inherit;
   }
 
-  .-_6BNtrc-cWI5gc11 {
+  .-_6BNtrc-cWI5gc12 {
     --fs: pow(1.125, inherit);
   }
 
-  .vx11 {
+  .vx12 {
     font-size: round(var(--s2-font-size-base, 14) * var(--fs) / 16 * 1rem, 1px);
   }
 
-  .w40ub4c11 {
+  .w40ub4c12 {
     font-variation-settings: inherit;
   }
 
-  .x40ub4c11 {
+  .x40ub4c12 {
     font-weight: inherit;
   }
 
-  ._xa11 {
+  ._xa12 {
     font-synthesis-weight: none;
   }
 
-  ._F40ub4c11 {
+  ._F40ub4c12 {
     line-height: inherit;
   }
 
-  ._ub11 {
+  ._ub12 {
     flex-grow: 1;
   }
 
-  .Na11 {
+  .Na12 {
     min-width: 0;
   }
 
-  ._Le11 {
+  ._Le12 {
     outline-style: none;
   }
 
-  ._je11 {
+  ._je12 {
     border-style: none;
   }
 
-  ._Qc11 {
+  ._Qc12 {
     resize: none;
   }
 
-  ._Nc11 {
+  ._Nc12 {
     overflow-x: hidden;
   }
 
-  .-M_-Mi11 {
+  .-M_-Mi12 {
     --M: calc(2rem * var(--s2-scale));
   }
 
-  .-M_-Mf11 {
+  .-M_-Mf12 {
     --M: calc(1.25rem * var(--s2-scale));
   }
 
-  .-M_-Mg11 {
+  .-M_-Mg12 {
     --M: calc(1.5rem * var(--s2-scale));
   }
 
-  .-M_-Mh11 {
+  .-M_-Mh12 {
     --M: calc(2.5rem * var(--s2-scale));
   }
 
-  .-M_-Mk11 {
+  .-M_-Mk12 {
     --M: calc(3rem * var(--s2-scale));
   }
 }
 
 @layer _.b {
-  ._FezxGHba11:is(:lang(ar), :lang(he)) {
+  ._FezxGHba12:is(:lang(ar), :lang(he)) {
     line-height: 1.3;
   }
+
+  .pYFIK2bn12::placeholder {
+    color: var(--lightningcss-light, #717171) var(--lightningcss-dark, #8a8a8a);
+  }
 }
 
 @layer _.c {
-  ._FnuYUweb11:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
+  ._FnuYUweb12:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
     line-height: 1.5;
   }
 }

package/dist/TextField.css.map

@@ -1 +1 @@
-{"mappings":"AC4EqB;EAAA;;;;EA6Ce;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAoEnB;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AApEmB;EAAA;;;;;AAAA;EAAA","sources":["b5f6eedb906c59d7","packages/@react-spectrum/s2/src/TextField.tsx"],"sourcesContent":["@import \"ab36e6acf2667a8b\";\n@import \"67d58da798418a3e\";\n@import \"83cde29013713f83\";\n","/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n  TextArea as AriaTextArea,\n  TextAreaContext as AriaTextAreaContext,\n  TextField as AriaTextField,\n  TextFieldProps as AriaTextFieldProps,\n  composeRenderProps,\n  ContextValue,\n  InputContext,\n  useSlottedContext\n} from 'react-aria-components';\nimport {centerPadding, controlSize, field, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {createContext, forwardRef, ReactNode, Ref, useContext, useImperativeHandle, useRef} from 'react';\nimport {createFocusableRef} from '@react-spectrum/utils';\nimport {FieldErrorIcon, FieldGroup, FieldLabel, HelpText, Input} from './Field';\nimport {FormContext, useFormProps} from './Form';\nimport {GlobalDOMAttributes, HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';\nimport {mergeRefs} from '@react-aria/utils';\nimport {style} from '../style' with {type: 'macro'};\nimport {StyleString} from '../style/types';\nimport {TextFieldRef} from '@react-types/textfield';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface TextFieldProps extends Omit<AriaTextFieldProps, 'children' | 'className' | 'style' | keyof GlobalDOMAttributes>, StyleProps, SpectrumLabelableProps, HelpTextProps {\n  /**\n   * The size of the text field.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL'\n}\n\nexport const TextFieldContext = createContext<ContextValue<Partial<TextFieldProps>, TextFieldRef>>(null);\n\n/**\n * TextFields are text inputs that allow users to input custom text entries\n * with a keyboard. Various decorations can be displayed around the field to\n * communicate the entry requirements.\n */\nexport const TextField = forwardRef(function TextField(props: TextFieldProps, ref: Ref<TextFieldRef>) {\n  [props, ref] = useSpectrumContextProps(props, ref, TextFieldContext);\n  return (\n    <TextFieldBase\n      {...props}\n      ref={ref}>\n      <Input />\n    </TextFieldBase>\n  );\n});\n\nexport interface TextAreaProps extends Omit<TextFieldProps, 'type' | 'pattern'> {}\n\nexport const TextAreaContext = createContext<ContextValue<Partial<TextAreaProps>, TextFieldRef<HTMLTextAreaElement>>>(null);\n\n/**\n * TextAreas are multiline text inputs, useful for cases where users have\n * a sizable amount of text to enter. They allow for all customizations that\n * are available to text fields.\n */\nexport const TextArea = forwardRef(function TextArea(props: TextAreaProps, ref: Ref<TextFieldRef<HTMLTextAreaElement>>) {\n  [props, ref] = useSpectrumContextProps(props, ref, TextAreaContext);\n  return (\n    <TextFieldBase\n      {...props}\n      ref={ref}\n      fieldGroupCss={style({\n        alignItems: 'baseline',\n        height: 'auto'\n      })}>\n      <TextAreaInput />\n    </TextFieldBase>\n  );\n});\n\nexport const TextFieldBase = forwardRef(function TextFieldBase(props: TextFieldProps & {children: ReactNode, fieldGroupCss?: StyleString}, ref: Ref<TextFieldRef<HTMLInputElement | HTMLTextAreaElement>>) {\n  let inputRef = useRef<HTMLInputElement>(null);\n  let domRef = useRef<HTMLDivElement>(null);\n  let formContext = useContext(FormContext);\n  props = useFormProps(props);\n  let {\n    label,\n    description,\n    errorMessage,\n    necessityIndicator,\n    labelPosition = 'top',\n    labelAlign = 'start',\n    fieldGroupCss,\n    UNSAFE_style,\n    UNSAFE_className = '',\n    ...textFieldProps\n  } = props;\n\n  // Expose imperative interface for ref\n  useImperativeHandle(ref, () => ({\n    ...createFocusableRef(domRef, inputRef),\n    select() {\n      if (inputRef.current) {\n        inputRef.current.select();\n      }\n    },\n    getInputElement() {\n      return inputRef.current;\n    }\n  }));\n\n  return (\n    <AriaTextField\n      {...textFieldProps}\n      ref={domRef}\n      style={UNSAFE_style}\n      className={UNSAFE_className + style(field(), getAllowedOverrides())({\n        size: props.size,\n        labelPosition,\n        isInForm: !!formContext\n      }, props.styles)}>\n      {composeRenderProps(props.children, (children, {isDisabled, isInvalid}) => (<>\n        <FieldLabel\n          isDisabled={isDisabled}\n          isRequired={props.isRequired}\n          size={props.size}\n          labelPosition={labelPosition}\n          labelAlign={labelAlign}\n          necessityIndicator={necessityIndicator}\n          contextualHelp={props.contextualHelp}>\n          {label}\n        </FieldLabel>\n        <FieldGroup size={props.size} styles={fieldGroupCss}>\n          <InputContext.Consumer>\n            {ctx => (\n              <InputContext.Provider value={{...ctx, ref: mergeRefs((ctx as any)?.ref, inputRef)}}>\n                {children}\n              </InputContext.Provider>\n            )}\n          </InputContext.Consumer>\n          {isInvalid && <FieldErrorIcon isDisabled={isDisabled} />}\n        </FieldGroup>\n        <HelpText\n          size={props.size}\n          isDisabled={isDisabled}\n          isInvalid={isInvalid}\n          description={description}>\n          {errorMessage}\n        </HelpText>\n      </>))}\n    </AriaTextField>\n  );\n});\n\nfunction TextAreaInput() {\n  // Force re-render when value changes so we update the height.\n  useSlottedContext(AriaTextAreaContext) ?? {};\n  let onHeightChange = (input: HTMLTextAreaElement) => {\n    // TODO: only do this if an explicit height is not given?\n    if (input) {\n      let prevAlignment = input.style.alignSelf;\n      let prevOverflow = input.style.overflow;\n      // Firefox scroll position is lost when overflow: 'hidden' is applied so we skip applying it.\n      // The measure/applied height is also incorrect/reset if we turn on and off\n      // overflow: hidden in Firefox https://bugzilla.mozilla.org/show_bug.cgi?id=1787062\n      let isFirefox = 'MozAppearance' in input.style;\n      if (!isFirefox) {\n        input.style.overflow = 'hidden';\n      }\n      input.style.alignSelf = 'start';\n      input.style.height = 'auto';\n      // offsetHeight - clientHeight accounts for the border/padding.\n      input.style.height = `${input.scrollHeight + (input.offsetHeight - input.clientHeight)}px`;\n      input.style.overflow = prevOverflow;\n      input.style.alignSelf = prevAlignment;\n    }\n  };\n\n  return (\n    <AriaTextArea\n      ref={onHeightChange}\n      // Workaround for baseline alignment bug in Safari.\n      // https://bugs.webkit.org/show_bug.cgi?id=142968\n      placeholder=\" \"\n      className={style({\n        paddingX: 0,\n        paddingY: centerPadding(),\n        minHeight: controlSize(),\n        boxSizing: 'border-box',\n        backgroundColor: 'transparent',\n        color: 'inherit',\n        fontFamily: 'inherit',\n        fontSize: 'inherit',\n        fontWeight: 'inherit',\n        lineHeight: 'inherit',\n        flexGrow: 1,\n        minWidth: 0,\n        outlineStyle: 'none',\n        borderStyle: 'none',\n        resize: 'none',\n        overflowX: 'hidden'\n      })} />\n  );\n}\n"],"names":[],"version":3,"file":"TextField.css.map"}
+{"mappings":"AC6EqB;EAAA;;;;EA6Ce;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAqEnB;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AArEmB;EAAA;;;;EAqEnB;;;;;AArEmB;EAAA","sources":["b5f6eedb906c59d7","packages/@react-spectrum/s2/src/TextField.tsx"],"sourcesContent":["@import \"ab36e6acf2667a8b\";\n@import \"67d58da798418a3e\";\n@import \"83cde29013713f83\";\n","/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n  TextArea as AriaTextArea,\n  TextAreaContext as AriaTextAreaContext,\n  TextField as AriaTextField,\n  TextFieldProps as AriaTextFieldProps,\n  composeRenderProps,\n  ContextValue,\n  InputContext,\n  InputProps,\n  useSlottedContext\n} from 'react-aria-components';\nimport {centerPadding, controlSize, field, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {createContext, forwardRef, ReactNode, Ref, useContext, useImperativeHandle, useRef} from 'react';\nimport {createFocusableRef} from '@react-spectrum/utils';\nimport {FieldErrorIcon, FieldGroup, FieldLabel, HelpText, Input} from './Field';\nimport {FormContext, useFormProps} from './Form';\nimport {GlobalDOMAttributes, HelpTextProps, RefObject, SpectrumLabelableProps} from '@react-types/shared';\nimport {mergeRefs} from '@react-aria/utils';\nimport {style} from '../style' with {type: 'macro'};\nimport {StyleString} from '../style/types';\nimport {TextFieldRef} from '@react-types/textfield';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface TextFieldProps extends Omit<AriaTextFieldProps, 'children' | 'className' | 'style' | keyof GlobalDOMAttributes>, StyleProps, SpectrumLabelableProps, HelpTextProps, Pick<InputProps, 'placeholder'> {\n  /**\n   * The size of the text field.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL'\n}\n\nexport const TextFieldContext = createContext<ContextValue<Partial<TextFieldProps>, TextFieldRef>>(null);\n\n/**\n * TextFields are text inputs that allow users to input custom text entries\n * with a keyboard. Various decorations can be displayed around the field to\n * communicate the entry requirements.\n */\nexport const TextField = forwardRef(function TextField(props: TextFieldProps, ref: Ref<TextFieldRef>) {\n  [props, ref] = useSpectrumContextProps(props, ref, TextFieldContext);\n  return (\n    <TextFieldBase\n      {...props}\n      ref={ref}>\n      <Input />\n    </TextFieldBase>\n  );\n});\n\nexport interface TextAreaProps extends Omit<TextFieldProps, 'type' | 'pattern'> {}\n\nexport const TextAreaContext = createContext<ContextValue<Partial<TextAreaProps>, TextFieldRef<HTMLTextAreaElement>>>(null);\n\n/**\n * TextAreas are multiline text inputs, useful for cases where users have\n * a sizable amount of text to enter. They allow for all customizations that\n * are available to text fields.\n */\nexport const TextArea = forwardRef(function TextArea(props: TextAreaProps, ref: Ref<TextFieldRef<HTMLTextAreaElement>>) {\n  [props, ref] = useSpectrumContextProps(props, ref, TextAreaContext);\n  return (\n    <TextFieldBase\n      {...props}\n      ref={ref}\n      fieldGroupCss={style({\n        alignItems: 'baseline',\n        height: 'auto'\n      })}>\n      <TextAreaInput />\n    </TextFieldBase>\n  );\n});\n\nexport const TextFieldBase = forwardRef(function TextFieldBase(props: TextFieldProps & {children: ReactNode, fieldGroupCss?: StyleString}, ref: Ref<TextFieldRef<HTMLInputElement | HTMLTextAreaElement>>) {\n  let inputRef = useRef<HTMLInputElement>(null);\n  let domRef = useRef<HTMLDivElement>(null);\n  let formContext = useContext(FormContext);\n  props = useFormProps(props);\n  let {\n    label,\n    description,\n    errorMessage,\n    necessityIndicator,\n    labelPosition = 'top',\n    labelAlign = 'start',\n    fieldGroupCss,\n    UNSAFE_style,\n    UNSAFE_className = '',\n    ...textFieldProps\n  } = props;\n\n  // Expose imperative interface for ref\n  useImperativeHandle(ref, () => ({\n    ...createFocusableRef(domRef, inputRef),\n    select() {\n      if (inputRef.current) {\n        inputRef.current.select();\n      }\n    },\n    getInputElement() {\n      return inputRef.current;\n    }\n  }));\n\n  return (\n    <AriaTextField\n      {...textFieldProps}\n      ref={domRef}\n      style={UNSAFE_style}\n      className={UNSAFE_className + style(field(), getAllowedOverrides())({\n        size: props.size,\n        labelPosition,\n        isInForm: !!formContext\n      }, props.styles)}>\n      {composeRenderProps(props.children, (children, {isDisabled, isInvalid}) => (<>\n        <FieldLabel\n          isDisabled={isDisabled}\n          isRequired={props.isRequired}\n          size={props.size}\n          labelPosition={labelPosition}\n          labelAlign={labelAlign}\n          necessityIndicator={necessityIndicator}\n          contextualHelp={props.contextualHelp}>\n          {label}\n        </FieldLabel>\n        <FieldGroup size={props.size} styles={fieldGroupCss}>\n          <InputContext.Consumer>\n            {ctx => (\n              <InputContext.Provider value={{...ctx, ref: mergeRefs((ctx as any)?.ref, inputRef)}}>\n                {children}\n              </InputContext.Provider>\n            )}\n          </InputContext.Consumer>\n          {isInvalid && <FieldErrorIcon isDisabled={isDisabled} />}\n        </FieldGroup>\n        <HelpText\n          size={props.size}\n          isDisabled={isDisabled}\n          isInvalid={isInvalid}\n          description={description}>\n          {errorMessage}\n        </HelpText>\n      </>))}\n    </AriaTextField>\n  );\n});\n\nfunction TextAreaInput() {\n  // Force re-render when value changes so we update the height.\n  let {placeholder} = useSlottedContext(AriaTextAreaContext) ?? {};\n  let onHeightChange = (input: HTMLTextAreaElement) => {\n    // TODO: only do this if an explicit height is not given?\n    if (input) {\n      let prevAlignment = input.style.alignSelf;\n      let prevOverflow = input.style.overflow;\n      // Firefox scroll position is lost when overflow: 'hidden' is applied so we skip applying it.\n      // The measure/applied height is also incorrect/reset if we turn on and off\n      // overflow: hidden in Firefox https://bugzilla.mozilla.org/show_bug.cgi?id=1787062\n      let isFirefox = 'MozAppearance' in input.style;\n      if (!isFirefox) {\n        input.style.overflow = 'hidden';\n      }\n      input.style.alignSelf = 'start';\n      input.style.height = 'auto';\n      // offsetHeight - clientHeight accounts for the border/padding.\n      input.style.height = `${input.scrollHeight + (input.offsetHeight - input.clientHeight)}px`;\n      input.style.overflow = prevOverflow;\n      input.style.alignSelf = prevAlignment;\n    }\n  };\n  let {ref} = useSlottedContext(InputContext) ?? {};\n\n  return (\n    <AriaTextArea\n      ref={mergeRefs(onHeightChange, ref as RefObject<HTMLTextAreaElement | null>)}\n      // Workaround for baseline alignment bug in Safari.\n      // https://bugs.webkit.org/show_bug.cgi?id=142968\n      placeholder={placeholder ?? ' '}\n      className={style({\n        paddingX: 0,\n        paddingY: centerPadding(),\n        minHeight: controlSize(),\n        boxSizing: 'border-box',\n        backgroundColor: 'transparent',\n        color: {\n          default: 'inherit',\n          '::placeholder': 'gray-600'\n        },\n        fontFamily: 'inherit',\n        fontSize: 'inherit',\n        fontWeight: 'inherit',\n        lineHeight: 'inherit',\n        flexGrow: 1,\n        minWidth: 0,\n        outlineStyle: 'none',\n        borderStyle: 'none',\n        resize: 'none',\n        overflowX: 'hidden'\n      })} />\n  );\n}\n"],"names":[],"version":3,"file":"TextField.css.map"}

package/dist/TextField.mjs

@@ -41,7 +41,7 @@ const $d946f50010ba937f$export$f5c9f3c2c4054eec = /*#__PURE__*/ (0, $fsr8S$forwa
     return /*#__PURE__*/ (0, $fsr8S$jsx)($d946f50010ba937f$export$d22444a338b6e3c2, {
         ...props,
         ref: ref,
-        fieldGroupCss: " ea11 Fd11",
+        fieldGroupCss: " ea12 Fd12",
         children: /*#__PURE__*/ (0, $fsr8S$jsx)($d946f50010ba937f$var$TextAreaInput, {})
     });
 });
@@ -69,58 +69,58 @@ const $d946f50010ba937f$export$d22444a338b6e3c2 = /*#__PURE__*/ (0, $fsr8S$forwa
             let rules = " ";
             let gridColumnStart = false;
             let gridColumnEnd = false;
-            let matches = (overrides || '').matchAll(/(?:^|\s)(J|G|I|H|_u|_v|_s|__A|_d|_J|z|y|B|A|_P|_9|W|_l|_A|_z|Z|N|L)[^\s]+/g);
+            let matches = (overrides || '').matchAll(/(?:^|\s)(J|G|I|H|_u|_v|_s|__A|_d|_J|z|y|B|A|_P|_9|W|_l|_A|_z|_6|Z|N|L)[^\s]+/g);
             for (let p of matches){
                 if (p[1] === "z") gridColumnStart = true;
                 if (p[1] === "y") gridColumnEnd = true;
                 rules += p[0];
             }
-            rules += ' se11';
+            rules += ' se12';
             if (props.isInForm) {
-                if (!gridColumnStart) rules += ' z2mU11';
+                if (!gridColumnStart) rules += ' z2mU12';
             }
             if (props.isInForm) {
                 if (props.labelPosition === "side") {
-                    if (!gridColumnEnd) rules += ' yvoofG11';
+                    if (!gridColumnEnd) rules += ' yvoofG12';
                 }
             }
-            if (props.isInForm) rules += ' DLwlgod11';
+            if (props.isInForm) rules += ' DLwlgod12';
             else {
-                if (props.labelPosition === "side") rules += ' DPlN5qb11';
-                else if (props.labelPosition === "top") rules += ' DM8Mfn11';
+                if (props.labelPosition === "side") rules += ' DPlN5qb12';
+                else if (props.labelPosition === "top") rules += ' DM8Mfn12';
             }
-            if (props.labelPosition === "side") rules += ' EPlN5qb11';
-            else if (props.labelPosition === "top") rules += ' E4w1sLc11';
-            if (props.labelPosition === "side") rules += ' CbRM95c11';
-            else if (props.labelPosition === "top") rules += ' Cxaocre11';
+            if (props.labelPosition === "side") rules += ' EPlN5qb12';
+            else if (props.labelPosition === "top") rules += ' E4w1sLc12';
+            if (props.labelPosition === "side") rules += ' CbRM95c12';
+            else if (props.labelPosition === "top") rules += ' Cxaocre12';
             if (props.size === "XL") {
-                rules += ' -_6BNtrc-e11';
-                rules += ' vx11';
+                rules += ' -_6BNtrc-e12';
+                rules += ' vx12';
             } else if (props.size === "L") {
-                rules += ' -_6BNtrc-d11';
-                rules += ' vx11';
+                rules += ' -_6BNtrc-d12';
+                rules += ' vx12';
             } else if (props.size === "S") {
-                rules += ' -_6BNtrc-b11';
-                rules += ' vx11';
+                rules += ' -_6BNtrc-b12';
+                rules += ' vx12';
             } else if (props.size === "XS") {
-                rules += ' -_6BNtrc-a11';
-                rules += ' vx11';
+                rules += ' -_6BNtrc-a12';
+                rules += ' vx12';
             } else {
-                rules += ' -_6BNtrc-c11';
-                rules += ' vx11';
+                rules += ' -_6BNtrc-c12';
+                rules += ' vx12';
             }
-            rules += ' ea11';
-            rules += ' _Fd11';
-            rules += ' _FezxGHba11';
-            rules += ' _FnuYUweb11';
-            if (props.size === "XL") rules += ' -BhX7R-Fz11';
-            else if (props.size === "L") rules += ' -BhX7R-Fv11';
-            else if (props.size === "S") rules += ' -BhX7R-Fp11';
-            else if (props.size === "XS") rules += ' -BhX7R-Fn11';
-            else rules += ' -BhX7R-Fx11';
-            rules += ' -AJjOLd-UVkF0Db11';
-            rules += ' qg11';
-            rules += ' __ca11';
+            rules += ' ea12';
+            rules += ' _Fd12';
+            rules += ' _FezxGHba12';
+            rules += ' _FnuYUweb12';
+            if (props.size === "XL") rules += ' -BhX7R-Fz12';
+            else if (props.size === "L") rules += ' -BhX7R-Fv12';
+            else if (props.size === "S") rules += ' -BhX7R-Fp12';
+            else if (props.size === "XS") rules += ' -BhX7R-Fn12';
+            else rules += ' -BhX7R-Fx12';
+            rules += ' -AJjOLd-UVkF0Db12';
+            rules += ' qg12';
+            rules += ' __ca12';
             return rules;
         }({
             size: props.size,
@@ -170,7 +170,7 @@ const $d946f50010ba937f$export$d22444a338b6e3c2 = /*#__PURE__*/ (0, $fsr8S$forwa
 });
 function $d946f50010ba937f$var$TextAreaInput() {
     // Force re-render when value changes so we update the height.
-    (0, $fsr8S$useSlottedContext)((0, $fsr8S$TextAreaContext));
+    let { placeholder: placeholder } = (0, $fsr8S$useSlottedContext)((0, $fsr8S$TextAreaContext)) ?? {};
     let onHeightChange = (input)=>{
         // TODO: only do this if an explicit height is not given?
         if (input) {
@@ -189,39 +189,41 @@ function $d946f50010ba937f$var$TextAreaInput() {
             input.style.alignSelf = prevAlignment;
         }
     };
+    let { ref: ref } = (0, $fsr8S$useSlottedContext)((0, $fsr8S$InputContext)) ?? {};
     return /*#__PURE__*/ (0, $fsr8S$jsx)((0, $fsr8S$TextArea), {
-        ref: onHeightChange,
+        ref: (0, $fsr8S$mergeRefs)(onHeightChange, ref),
         // Workaround for baseline alignment bug in Safari.
         // https://bugs.webkit.org/show_bug.cgi?id=142968
-        placeholder: " ",
+        placeholder: placeholder ?? ' ',
         className: function anonymous(props) {
             let rules = " ";
-            rules += ' Sd11';
-            rules += ' Rd11';
-            rules += ' Tu7Fubd11';
-            rules += ' Qu7Fubd11';
-            rules += ' MAyFGYc11';
-            rules += ' _oa11';
-            rules += ' g911';
-            rules += ' p40ub4c11';
-            rules += ' u40ub4c11';
-            rules += ' -_6BNtrc-cWI5gc11';
-            rules += ' vx11';
-            rules += ' w40ub4c11';
-            rules += ' x40ub4c11';
-            rules += ' _xa11';
-            rules += ' _F40ub4c11';
-            rules += ' _ub11';
-            rules += ' Na11';
-            rules += ' _Le11';
-            rules += ' _je11';
-            rules += ' _Qc11';
-            rules += ' _Nc11';
-            if (props.size === "XL") rules += ' -M_-Mk11';
-            else if (props.size === "L") rules += ' -M_-Mh11';
-            else if (props.size === "S") rules += ' -M_-Mg11';
-            else if (props.size === "XS") rules += ' -M_-Mf11';
-            else rules += ' -M_-Mi11';
+            rules += ' Sd12';
+            rules += ' Rd12';
+            rules += ' Tu7Fubd12';
+            rules += ' Qu7Fubd12';
+            rules += ' MAyFGYc12';
+            rules += ' _oa12';
+            rules += ' g912';
+            rules += ' p40ub4c12';
+            rules += ' pYFIK2bn12';
+            rules += ' u40ub4c12';
+            rules += ' -_6BNtrc-cWI5gc12';
+            rules += ' vx12';
+            rules += ' w40ub4c12';
+            rules += ' x40ub4c12';
+            rules += ' _xa12';
+            rules += ' _F40ub4c12';
+            rules += ' _ub12';
+            rules += ' Na12';
+            rules += ' _Le12';
+            rules += ' _je12';
+            rules += ' _Qc12';
+            rules += ' _Nc12';
+            if (props.size === "XL") rules += ' -M_-Mk12';
+            else if (props.size === "L") rules += ' -M_-Mh12';
+            else if (props.size === "S") rules += ' -M_-Mg12';
+            else if (props.size === "XS") rules += ' -M_-Mf12';
+            else rules += ' -M_-Mi12';
             return rules;
         }
     });

package/dist/TextField.mjs.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-spectrum/s2/src/TextField.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n  TextArea as AriaTextArea,\n  TextAreaContext as AriaTextAreaContext,\n  TextField as AriaTextField,\n  TextFieldProps as AriaTextFieldProps,\n  composeRenderProps,\n  ContextValue,\n  InputContext,\n  useSlottedContext\n} from 'react-aria-components';\nimport {centerPadding, controlSize, field, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {createContext, forwardRef, ReactNode, Ref, useContext, useImperativeHandle, useRef} from 'react';\nimport {createFocusableRef} from '@react-spectrum/utils';\nimport {FieldErrorIcon, FieldGroup, FieldLabel, HelpText, Input} from './Field';\nimport {FormContext, useFormProps} from './Form';\nimport {GlobalDOMAttributes, HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';\nimport {mergeRefs} from '@react-aria/utils';\nimport {style} from '../style' with {type: 'macro'};\nimport {StyleString} from '../style/types';\nimport {TextFieldRef} from '@react-types/textfield';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface TextFieldProps extends Omit<AriaTextFieldProps, 'children' | 'className' | 'style' | keyof GlobalDOMAttributes>, StyleProps, SpectrumLabelableProps, HelpTextProps {\n  /**\n   * The size of the text field.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL'\n}\n\nexport const TextFieldContext = createContext<ContextValue<Partial<TextFieldProps>, TextFieldRef>>(null);\n\n/**\n * TextFields are text inputs that allow users to input custom text entries\n * with a keyboard. Various decorations can be displayed around the field to\n * communicate the entry requirements.\n */\nexport const TextField = forwardRef(function TextField(props: TextFieldProps, ref: Ref<TextFieldRef>) {\n  [props, ref] = useSpectrumContextProps(props, ref, TextFieldContext);\n  return (\n    <TextFieldBase\n      {...props}\n      ref={ref}>\n      <Input />\n    </TextFieldBase>\n  );\n});\n\nexport interface TextAreaProps extends Omit<TextFieldProps, 'type' | 'pattern'> {}\n\nexport const TextAreaContext = createContext<ContextValue<Partial<TextAreaProps>, TextFieldRef<HTMLTextAreaElement>>>(null);\n\n/**\n * TextAreas are multiline text inputs, useful for cases where users have\n * a sizable amount of text to enter. They allow for all customizations that\n * are available to text fields.\n */\nexport const TextArea = forwardRef(function TextArea(props: TextAreaProps, ref: Ref<TextFieldRef<HTMLTextAreaElement>>) {\n  [props, ref] = useSpectrumContextProps(props, ref, TextAreaContext);\n  return (\n    <TextFieldBase\n      {...props}\n      ref={ref}\n      fieldGroupCss={style({\n        alignItems: 'baseline',\n        height: 'auto'\n      })}>\n      <TextAreaInput />\n    </TextFieldBase>\n  );\n});\n\nexport const TextFieldBase = forwardRef(function TextFieldBase(props: TextFieldProps & {children: ReactNode, fieldGroupCss?: StyleString}, ref: Ref<TextFieldRef<HTMLInputElement | HTMLTextAreaElement>>) {\n  let inputRef = useRef<HTMLInputElement>(null);\n  let domRef = useRef<HTMLDivElement>(null);\n  let formContext = useContext(FormContext);\n  props = useFormProps(props);\n  let {\n    label,\n    description,\n    errorMessage,\n    necessityIndicator,\n    labelPosition = 'top',\n    labelAlign = 'start',\n    fieldGroupCss,\n    UNSAFE_style,\n    UNSAFE_className = '',\n    ...textFieldProps\n  } = props;\n\n  // Expose imperative interface for ref\n  useImperativeHandle(ref, () => ({\n    ...createFocusableRef(domRef, inputRef),\n    select() {\n      if (inputRef.current) {\n        inputRef.current.select();\n      }\n    },\n    getInputElement() {\n      return inputRef.current;\n    }\n  }));\n\n  return (\n    <AriaTextField\n      {...textFieldProps}\n      ref={domRef}\n      style={UNSAFE_style}\n      className={UNSAFE_className + style(field(), getAllowedOverrides())({\n        size: props.size,\n        labelPosition,\n        isInForm: !!formContext\n      }, props.styles)}>\n      {composeRenderProps(props.children, (children, {isDisabled, isInvalid}) => (<>\n        <FieldLabel\n          isDisabled={isDisabled}\n          isRequired={props.isRequired}\n          size={props.size}\n          labelPosition={labelPosition}\n          labelAlign={labelAlign}\n          necessityIndicator={necessityIndicator}\n          contextualHelp={props.contextualHelp}>\n          {label}\n        </FieldLabel>\n        <FieldGroup size={props.size} styles={fieldGroupCss}>\n          <InputContext.Consumer>\n            {ctx => (\n              <InputContext.Provider value={{...ctx, ref: mergeRefs((ctx as any)?.ref, inputRef)}}>\n                {children}\n              </InputContext.Provider>\n            )}\n          </InputContext.Consumer>\n          {isInvalid && <FieldErrorIcon isDisabled={isDisabled} />}\n        </FieldGroup>\n        <HelpText\n          size={props.size}\n          isDisabled={isDisabled}\n          isInvalid={isInvalid}\n          description={description}>\n          {errorMessage}\n        </HelpText>\n      </>))}\n    </AriaTextField>\n  );\n});\n\nfunction TextAreaInput() {\n  // Force re-render when value changes so we update the height.\n  useSlottedContext(AriaTextAreaContext) ?? {};\n  let onHeightChange = (input: HTMLTextAreaElement) => {\n    // TODO: only do this if an explicit height is not given?\n    if (input) {\n      let prevAlignment = input.style.alignSelf;\n      let prevOverflow = input.style.overflow;\n      // Firefox scroll position is lost when overflow: 'hidden' is applied so we skip applying it.\n      // The measure/applied height is also incorrect/reset if we turn on and off\n      // overflow: hidden in Firefox https://bugzilla.mozilla.org/show_bug.cgi?id=1787062\n      let isFirefox = 'MozAppearance' in input.style;\n      if (!isFirefox) {\n        input.style.overflow = 'hidden';\n      }\n      input.style.alignSelf = 'start';\n      input.style.height = 'auto';\n      // offsetHeight - clientHeight accounts for the border/padding.\n      input.style.height = `${input.scrollHeight + (input.offsetHeight - input.clientHeight)}px`;\n      input.style.overflow = prevOverflow;\n      input.style.alignSelf = prevAlignment;\n    }\n  };\n\n  return (\n    <AriaTextArea\n      ref={onHeightChange}\n      // Workaround for baseline alignment bug in Safari.\n      // https://bugs.webkit.org/show_bug.cgi?id=142968\n      placeholder=\" \"\n      className={style({\n        paddingX: 0,\n        paddingY: centerPadding(),\n        minHeight: controlSize(),\n        boxSizing: 'border-box',\n        backgroundColor: 'transparent',\n        color: 'inherit',\n        fontFamily: 'inherit',\n        fontSize: 'inherit',\n        fontWeight: 'inherit',\n        lineHeight: 'inherit',\n        flexGrow: 1,\n        minWidth: 0,\n        outlineStyle: 'none',\n        borderStyle: 'none',\n        resize: 'none',\n        overflowX: 'hidden'\n      })} />\n  );\n}\n"],"names":[],"version":3,"file":"TextField.mjs.map"}
+{"mappings":"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","sources":["packages/@react-spectrum/s2/src/TextField.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n  TextArea as AriaTextArea,\n  TextAreaContext as AriaTextAreaContext,\n  TextField as AriaTextField,\n  TextFieldProps as AriaTextFieldProps,\n  composeRenderProps,\n  ContextValue,\n  InputContext,\n  InputProps,\n  useSlottedContext\n} from 'react-aria-components';\nimport {centerPadding, controlSize, field, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {createContext, forwardRef, ReactNode, Ref, useContext, useImperativeHandle, useRef} from 'react';\nimport {createFocusableRef} from '@react-spectrum/utils';\nimport {FieldErrorIcon, FieldGroup, FieldLabel, HelpText, Input} from './Field';\nimport {FormContext, useFormProps} from './Form';\nimport {GlobalDOMAttributes, HelpTextProps, RefObject, SpectrumLabelableProps} from '@react-types/shared';\nimport {mergeRefs} from '@react-aria/utils';\nimport {style} from '../style' with {type: 'macro'};\nimport {StyleString} from '../style/types';\nimport {TextFieldRef} from '@react-types/textfield';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface TextFieldProps extends Omit<AriaTextFieldProps, 'children' | 'className' | 'style' | keyof GlobalDOMAttributes>, StyleProps, SpectrumLabelableProps, HelpTextProps, Pick<InputProps, 'placeholder'> {\n  /**\n   * The size of the text field.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL'\n}\n\nexport const TextFieldContext = createContext<ContextValue<Partial<TextFieldProps>, TextFieldRef>>(null);\n\n/**\n * TextFields are text inputs that allow users to input custom text entries\n * with a keyboard. Various decorations can be displayed around the field to\n * communicate the entry requirements.\n */\nexport const TextField = forwardRef(function TextField(props: TextFieldProps, ref: Ref<TextFieldRef>) {\n  [props, ref] = useSpectrumContextProps(props, ref, TextFieldContext);\n  return (\n    <TextFieldBase\n      {...props}\n      ref={ref}>\n      <Input />\n    </TextFieldBase>\n  );\n});\n\nexport interface TextAreaProps extends Omit<TextFieldProps, 'type' | 'pattern'> {}\n\nexport const TextAreaContext = createContext<ContextValue<Partial<TextAreaProps>, TextFieldRef<HTMLTextAreaElement>>>(null);\n\n/**\n * TextAreas are multiline text inputs, useful for cases where users have\n * a sizable amount of text to enter. They allow for all customizations that\n * are available to text fields.\n */\nexport const TextArea = forwardRef(function TextArea(props: TextAreaProps, ref: Ref<TextFieldRef<HTMLTextAreaElement>>) {\n  [props, ref] = useSpectrumContextProps(props, ref, TextAreaContext);\n  return (\n    <TextFieldBase\n      {...props}\n      ref={ref}\n      fieldGroupCss={style({\n        alignItems: 'baseline',\n        height: 'auto'\n      })}>\n      <TextAreaInput />\n    </TextFieldBase>\n  );\n});\n\nexport const TextFieldBase = forwardRef(function TextFieldBase(props: TextFieldProps & {children: ReactNode, fieldGroupCss?: StyleString}, ref: Ref<TextFieldRef<HTMLInputElement | HTMLTextAreaElement>>) {\n  let inputRef = useRef<HTMLInputElement>(null);\n  let domRef = useRef<HTMLDivElement>(null);\n  let formContext = useContext(FormContext);\n  props = useFormProps(props);\n  let {\n    label,\n    description,\n    errorMessage,\n    necessityIndicator,\n    labelPosition = 'top',\n    labelAlign = 'start',\n    fieldGroupCss,\n    UNSAFE_style,\n    UNSAFE_className = '',\n    ...textFieldProps\n  } = props;\n\n  // Expose imperative interface for ref\n  useImperativeHandle(ref, () => ({\n    ...createFocusableRef(domRef, inputRef),\n    select() {\n      if (inputRef.current) {\n        inputRef.current.select();\n      }\n    },\n    getInputElement() {\n      return inputRef.current;\n    }\n  }));\n\n  return (\n    <AriaTextField\n      {...textFieldProps}\n      ref={domRef}\n      style={UNSAFE_style}\n      className={UNSAFE_className + style(field(), getAllowedOverrides())({\n        size: props.size,\n        labelPosition,\n        isInForm: !!formContext\n      }, props.styles)}>\n      {composeRenderProps(props.children, (children, {isDisabled, isInvalid}) => (<>\n        <FieldLabel\n          isDisabled={isDisabled}\n          isRequired={props.isRequired}\n          size={props.size}\n          labelPosition={labelPosition}\n          labelAlign={labelAlign}\n          necessityIndicator={necessityIndicator}\n          contextualHelp={props.contextualHelp}>\n          {label}\n        </FieldLabel>\n        <FieldGroup size={props.size} styles={fieldGroupCss}>\n          <InputContext.Consumer>\n            {ctx => (\n              <InputContext.Provider value={{...ctx, ref: mergeRefs((ctx as any)?.ref, inputRef)}}>\n                {children}\n              </InputContext.Provider>\n            )}\n          </InputContext.Consumer>\n          {isInvalid && <FieldErrorIcon isDisabled={isDisabled} />}\n        </FieldGroup>\n        <HelpText\n          size={props.size}\n          isDisabled={isDisabled}\n          isInvalid={isInvalid}\n          description={description}>\n          {errorMessage}\n        </HelpText>\n      </>))}\n    </AriaTextField>\n  );\n});\n\nfunction TextAreaInput() {\n  // Force re-render when value changes so we update the height.\n  let {placeholder} = useSlottedContext(AriaTextAreaContext) ?? {};\n  let onHeightChange = (input: HTMLTextAreaElement) => {\n    // TODO: only do this if an explicit height is not given?\n    if (input) {\n      let prevAlignment = input.style.alignSelf;\n      let prevOverflow = input.style.overflow;\n      // Firefox scroll position is lost when overflow: 'hidden' is applied so we skip applying it.\n      // The measure/applied height is also incorrect/reset if we turn on and off\n      // overflow: hidden in Firefox https://bugzilla.mozilla.org/show_bug.cgi?id=1787062\n      let isFirefox = 'MozAppearance' in input.style;\n      if (!isFirefox) {\n        input.style.overflow = 'hidden';\n      }\n      input.style.alignSelf = 'start';\n      input.style.height = 'auto';\n      // offsetHeight - clientHeight accounts for the border/padding.\n      input.style.height = `${input.scrollHeight + (input.offsetHeight - input.clientHeight)}px`;\n      input.style.overflow = prevOverflow;\n      input.style.alignSelf = prevAlignment;\n    }\n  };\n  let {ref} = useSlottedContext(InputContext) ?? {};\n\n  return (\n    <AriaTextArea\n      ref={mergeRefs(onHeightChange, ref as RefObject<HTMLTextAreaElement | null>)}\n      // Workaround for baseline alignment bug in Safari.\n      // https://bugs.webkit.org/show_bug.cgi?id=142968\n      placeholder={placeholder ?? ' '}\n      className={style({\n        paddingX: 0,\n        paddingY: centerPadding(),\n        minHeight: controlSize(),\n        boxSizing: 'border-box',\n        backgroundColor: 'transparent',\n        color: {\n          default: 'inherit',\n          '::placeholder': 'gray-600'\n        },\n        fontFamily: 'inherit',\n        fontSize: 'inherit',\n        fontWeight: 'inherit',\n        lineHeight: 'inherit',\n        flexGrow: 1,\n        minWidth: 0,\n        outlineStyle: 'none',\n        borderStyle: 'none',\n        resize: 'none',\n        overflowX: 'hidden'\n      })} />\n  );\n}\n"],"names":[],"version":3,"file":"TextField.mjs.map"}