@react-spectrum/s2 1.3.0 → 1.4.0

package/dist/private/TextField.css

@@ -1,218 +1,218 @@
 @layer _.a {
-  .Fd13 {
+  .Fd131 {
     height: auto;
   }
 
-  .se13 {
+  .se131 {
     display: grid;
   }
 
-  .z2mU13 {
+  .z2mU131 {
     grid-column-start: 1;
   }
 
-  .yvoofG13 {
+  .yvoofG131 {
     grid-column-end: span 2;
   }
 
-  .DM8Mfn13 {
+  .DM8Mfn131 {
     grid-template-columns: 1fr;
   }
 
-  .DPlN5qb13 {
+  .DPlN5qb131 {
     grid-template-columns: auto 1fr;
   }
 
-  .DLwlgod13 {
+  .DLwlgod131 {
     grid-template-columns: subgrid;
   }
 
-  .E4w1sLc13 {
+  .E4w1sLc131 {
     grid-template-rows: auto 1fr auto;
   }
 
-  .EPlN5qb13 {
+  .EPlN5qb131 {
     grid-template-rows: auto 1fr;
   }
 
-  .Cxaocre13 {
+  .Cxaocre131 {
     grid-template-areas: "label"
                          "input"
                          "helptext";
   }
 
-  .CbRM95c13 {
+  .CbRM95c131 {
     grid-template-areas: "label input"
                          "label helptext";
   }
 
-  .-_6BNtrc-c13 {
+  .-_6BNtrc-c131 {
     --fs: pow(1.125, 0);
   }
 
-  .-_6BNtrc-a13 {
+  .-_6BNtrc-a131 {
     --fs: pow(1.125, -2);
   }
 
-  .-_6BNtrc-b13 {
+  .-_6BNtrc-b131 {
     --fs: pow(1.125, -1);
   }
 
-  .-_6BNtrc-d13 {
+  .-_6BNtrc-d131 {
     --fs: pow(1.125, 1);
   }
 
-  .-_6BNtrc-e13 {
+  .-_6BNtrc-e131 {
     --fs: pow(1.125, 2);
   }
 
-  .vx13 {
+  .vx131 {
     font-size: round(var(--s2-font-size-base, 14) * var(--fs) / 16 * 1rem, 1px);
   }
 
-  .ea13 {
+  .ea131 {
     align-items: baseline;
   }
 
-  ._Fd13 {
+  ._Fd131 {
     line-height: round(1em * (1.15 + (1 - ((min(32, var(--s2-font-size-base, 14) * var(--fs)) - 10)) / 22) * .15), 2px);
   }
 
-  .-BhX7R-Fx13 {
+  .-BhX7R-Fx131 {
     --field-height: calc(2rem * var(--s2-scale));
   }
 
-  .-BhX7R-Fn13 {
+  .-BhX7R-Fn131 {
     --field-height: calc(1.25rem * var(--s2-scale));
   }
 
-  .-BhX7R-Fp13 {
+  .-BhX7R-Fp131 {
     --field-height: calc(1.5rem * var(--s2-scale));
   }
 
-  .-BhX7R-Fv13 {
+  .-BhX7R-Fv131 {
     --field-height: calc(2.5rem * var(--s2-scale));
   }
 
-  .-BhX7R-Fz13 {
+  .-BhX7R-Fz131 {
     --field-height: calc(3rem * var(--s2-scale));
   }
 
-  .-AJjOLd-UVkF0Db13 {
+  .-AJjOLd-UVkF0Db131 {
     --field-gap: calc((var(--field-height) - var(--_k, 0px) - var(--h, 0px) - 1lh) / 2);
   }
 
-  .qg13 {
+  .qg131 {
     column-gap: .75rem;
   }
 
-  .__ca13 {
+  .__ca131 {
     -webkit-tap-highlight-color: #0000;
   }
 
-  .Sd13 {
+  .Sd131 {
     padding-inline-start: 0;
   }
 
-  .Rd13 {
+  .Rd131 {
     padding-inline-end: 0;
   }
 
-  .Tu7Fubd13 {
+  .Tu7Fubd131 {
     padding-top: calc((var(--M) - var(--_k, 0px) - var(--h, 0px) - 1lh) / 2);
   }
 
-  .Qu7Fubd13 {
+  .Qu7Fubd131 {
     padding-bottom: calc((var(--M) - var(--_k, 0px) - var(--h, 0px) - 1lh) / 2);
   }
 
-  .MAyFGYc13 {
+  .MAyFGYc131 {
     min-height: var(--M);
   }
 
-  ._oa13 {
+  ._oa131 {
     box-sizing: border-box;
   }
 
-  .g913 {
+  .g9131 {
     background-color: #0000;
   }
 
-  .p40ub4c13 {
+  .p40ub4c131 {
     color: inherit;
   }
 
-  .u40ub4c13 {
+  .u40ub4c131 {
     font-family: inherit;
   }
 
-  .v40ub4c13 {
+  .v40ub4c131 {
     font-size: inherit;
   }
 
-  .x40ub4c13 {
+  .x40ub4c131 {
     font-weight: inherit;
   }
 
-  ._xa13 {
+  ._xa131 {
     font-synthesis-weight: none;
   }
 
-  ._F40ub4c13 {
+  ._F40ub4c131 {
     line-height: inherit;
   }
 
-  ._ub13 {
+  ._ub131 {
     flex-grow: 1;
   }
 
-  .Na13 {
+  .Na131 {
     min-width: 0;
   }
 
-  ._Le13 {
+  ._Le131 {
     outline-style: none;
   }
 
-  ._je13 {
+  ._je131 {
     border-style: none;
   }
 
-  ._Qc13 {
+  ._Qc131 {
     resize: none;
   }
 
-  ._Nc13 {
+  ._Nc131 {
     overflow-x: hidden;
   }
 
-  .-M_-Mi13 {
+  .-M_-Mi131 {
     --M: calc(2rem * var(--s2-scale));
   }
 
-  .-M_-Mf13 {
+  .-M_-Mf131 {
     --M: calc(1.25rem * var(--s2-scale));
   }
 
-  .-M_-Mg13 {
+  .-M_-Mg131 {
     --M: calc(1.5rem * var(--s2-scale));
   }
 
-  .-M_-Mh13 {
+  .-M_-Mh131 {
     --M: calc(2.5rem * var(--s2-scale));
   }
 
-  .-M_-Mk13 {
+  .-M_-Mk131 {
     --M: calc(3rem * var(--s2-scale));
   }
 }
 
 @layer _.b {
-  ._FnuYUweb13:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
+  ._FnuYUweb131:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
     line-height: 1.5;
   }
 
-  .pYFIK2bn13::placeholder {
+  .pYFIK2bn131::placeholder {
     color: light-dark(#717171, #8a8a8a);
   }
 }
@@ -221,7 +221,7 @@
 
 @layer _.c.l {
   @media (forced-colors: active) {
-    .pYFIK2blc13::placeholder {
+    .pYFIK2blc131::placeholder {
       color: graytext;
     }
   }

package/dist/private/TextField.css.map

@@ -1 +1 @@
-{"mappings":"AC2EqB;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;;;;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;;;;;AArEmB;EAAA;;;;EAqEnB;;;;;AAAA;;AAAA;EAAA;IAAA","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 {TextArea as AriaTextArea, TextAreaContext as AriaTextAreaContext} from 'react-aria-components/TextArea';\nimport {TextField as AriaTextField, TextFieldProps as AriaTextFieldProps} from 'react-aria-components/TextField';\nimport {centerPadding, style} from '../style' with {type: 'macro'};\nimport {composeRenderProps} from 'react-aria-components/composeRenderProps';\nimport {ContextValue, useSlottedContext} from 'react-aria-components/slots';\nimport {controlSize, field, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {createContext, forwardRef, ReactNode, Ref, useContext, useImperativeHandle, useRef} from 'react';\nimport {createFocusableRef} from './useDOMRef';\nimport {FieldErrorIcon, FieldGroup, FieldLabel, HelpText, Input} from './Field';\nimport {FocusableRefValue, GlobalDOMAttributes, HelpTextProps, RefObject, SpectrumLabelableProps} from '@react-types/shared';\nimport {FormContext, useFormProps} from './Form';\nimport {InputContext, InputProps} from 'react-aria-components/Input';\nimport {mergeRefs} from 'react-aria/mergeRefs';\nimport {StyleString} from '../style/types';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface TextFieldRef<T extends HTMLInputElement | HTMLTextAreaElement = HTMLInputElement> extends FocusableRefValue<T, HTMLDivElement> {\n  select(): void,\n  getInputElement(): T | null\n}\n\nexport interface TextFieldProps extends Omit<AriaTextFieldProps, 'children' | 'className' | 'style' | 'render' | 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': {\n            default: 'gray-600',\n            forcedColors: 'GrayText'\n          }\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"}
+{"mappings":"AC2HqB;EAAA;;;;EAkDb;;;;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;;;;EAiFS;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAjFT;EAAA;;;;EAiFS;;;;;AAAA;;AAAA;EAAA;IAAA","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} from 'react-aria-components/TextArea';\nimport {\n  TextField as AriaTextField,\n  TextFieldProps as AriaTextFieldProps\n} from 'react-aria-components/TextField';\nimport {centerPadding, style} from '../style' with {type: 'macro'};\nimport {composeRenderProps} from 'react-aria-components/composeRenderProps';\nimport {ContextValue, Provider, useSlottedContext} from 'react-aria-components/slots';\nimport {\n  controlSize,\n  field,\n  getAllowedOverrides,\n  StyleProps\n} from './style-utils' with {type: 'macro'};\nimport {\n  createContext,\n  forwardRef,\n  ReactNode,\n  Ref,\n  useContext,\n  useImperativeHandle,\n  useRef\n} from 'react';\nimport {createFocusableRef} from './useDOMRef';\nimport {FieldErrorIcon, FieldGroup, FieldLabel, HelpText, Input} from './Field';\nimport {\n  FocusableRefValue,\n  GlobalDOMAttributes,\n  HelpTextProps,\n  RefObject,\n  SpectrumLabelableProps\n} from '@react-types/shared';\nimport {FormContext, useFormProps} from './Form';\nimport {InputContext, InputProps} from 'react-aria-components/Input';\nimport {mergeRefs} from 'react-aria/mergeRefs';\nimport {StyleString} from '../style/types';\nimport {TextContext} from './Content';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface TextFieldRef<\n  T extends HTMLInputElement | HTMLTextAreaElement = HTMLInputElement\n> extends FocusableRefValue<T, HTMLDivElement> {\n  select(): void;\n  getInputElement(): T | null;\n}\n\nexport interface TextFieldProps\n  extends\n    Omit<\n      AriaTextFieldProps,\n      'children' | 'className' | 'style' | 'render' | keyof GlobalDOMAttributes\n    >,\n    StyleProps,\n    SpectrumLabelableProps,\n    HelpTextProps,\n    Pick<InputProps, 'placeholder'> {\n  /**\n   * The size of the text field.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL';\n  /**\n   * The prefix to display in the text field.\n   * A non-interactive element that appears before the input.\n   */\n  prefix?: ReactNode;\n}\n\nexport const TextFieldContext =\n  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(\n  props: TextFieldProps,\n  ref: Ref<TextFieldRef>\n) {\n  [props, ref] = useSpectrumContextProps(props, ref, TextFieldContext);\n  return (\n    <TextFieldBase {...props} ref={ref}>\n      <Input />\n    </TextFieldBase>\n  );\n});\n\nexport interface TextAreaProps extends Omit<TextFieldProps, 'type' | 'pattern'> {}\n\nexport const TextAreaContext =\n  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(\n  props: TextAreaProps,\n  ref: Ref<TextFieldRef<HTMLTextAreaElement>>\n) {\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(\n  props: TextFieldProps & {children: ReactNode; fieldGroupCss?: StyleString},\n  ref: Ref<TextFieldRef<HTMLInputElement | HTMLTextAreaElement>>\n) {\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={\n        UNSAFE_className +\n        style(field(), getAllowedOverrides())(\n          {\n            size: props.size,\n            labelPosition,\n            isInForm: !!formContext\n          },\n          props.styles\n        )\n      }>\n      {composeRenderProps(props.children, (children, {isDisabled, isInvalid}) => (\n        <>\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 prefix={props.prefix} size={props.size} styles={fieldGroupCss}>\n            <Provider values={[[TextContext, {}]]}>\n              <InputContext.Consumer>\n                {ctx => (\n                  <InputContext.Provider\n                    value={{\n                      ...ctx,\n                      ref: mergeRefs((ctx as any)?.ref, inputRef)\n                    }}>\n                    {children}\n                  </InputContext.Provider>\n                )}\n              </InputContext.Consumer>\n              {isInvalid && <FieldErrorIcon isDisabled={isDisabled} />}\n            </Provider>\n          </FieldGroup>\n          <HelpText\n            size={props.size}\n            isDisabled={isDisabled}\n            isInvalid={isInvalid}\n            description={description}>\n            {errorMessage}\n          </HelpText>\n        </>\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': {\n            default: 'gray-600',\n            forcedColors: 'GrayText'\n          }\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}\n"],"names":[],"version":3,"file":"TextField.css.map"}

package/dist/private/TextField.mjs

@@ -2,12 +2,13 @@ import "./TextField.css";
 import {createFocusableRef as $80ecb974df713a30$export$79d69eee6ae4b329} from "./useDOMRef.mjs";
 import {FieldErrorIcon as $9afd80978c252040$export$bda0d075e0e342c9, FieldGroup as $9afd80978c252040$export$f0fe469072bc6950, FieldLabel as $9afd80978c252040$export$1acdcf5a973a8414, HelpText as $9afd80978c252040$export$a67c0bc59081311a, Input as $9afd80978c252040$export$f5b8910cec6cf069} from "./Field.mjs";
 import {FormContext as $9b916426527cebe7$export$c24727297075ec6a, useFormProps as $9b916426527cebe7$export$a6b5be5c6b451665} from "./Form.mjs";
+import {TextContext as $8e847109a6ab556d$export$9afb8bc826b033ea} from "./Content.mjs";
 import {useSpectrumContextProps as $5ce63c423902f47d$export$764f6146fadd77f7} from "../../icons/useSpectrumContextProps.mjs";
 import {jsx as $fsr8S$jsx, jsxs as $fsr8S$jsxs, Fragment as $fsr8S$Fragment} from "react/jsx-runtime";
 import {TextAreaContext as $fsr8S$TextAreaContext, TextArea as $fsr8S$TextArea} from "react-aria-components/TextArea";
 import {TextField as $fsr8S$TextField} from "react-aria-components/TextField";
 import {composeRenderProps as $fsr8S$composeRenderProps} from "react-aria-components/composeRenderProps";
-import {useSlottedContext as $fsr8S$useSlottedContext} from "react-aria-components/slots";
+import {Provider as $fsr8S$Provider, useSlottedContext as $fsr8S$useSlottedContext} from "react-aria-components/slots";
 import {createContext as $fsr8S$createContext, forwardRef as $fsr8S$forwardRef, useRef as $fsr8S$useRef, useContext as $fsr8S$useContext, useImperativeHandle as $fsr8S$useImperativeHandle} from "react";
 import {InputContext as $fsr8S$InputContext} from "react-aria-components/Input";
 import {mergeRefs as $fsr8S$mergeRefs} from "react-aria/mergeRefs";
@@ -34,6 +35,7 @@ import {mergeRefs as $fsr8S$mergeRefs} from "react-aria/mergeRefs";
 
 
 
+
 const $d946f50010ba937f$export$2129e27b3ef0d483 = /*#__PURE__*/ (0, $fsr8S$createContext)(null);
 const $d946f50010ba937f$export$2c73285ae9390cec = /*#__PURE__*/ (0, $fsr8S$forwardRef)(function TextField(props, ref) {
     [props, ref] = (0, $5ce63c423902f47d$export$764f6146fadd77f7)(props, ref, $d946f50010ba937f$export$2129e27b3ef0d483);
@@ -49,7 +51,7 @@ const $d946f50010ba937f$export$f5c9f3c2c4054eec = /*#__PURE__*/ (0, $fsr8S$forwa
     return /*#__PURE__*/ (0, $fsr8S$jsx)($d946f50010ba937f$export$d22444a338b6e3c2, {
         ...props,
         ref: ref,
-        fieldGroupCss: " ea13 Fd13",
+        fieldGroupCss: " ea131 Fd131",
         children: /*#__PURE__*/ (0, $fsr8S$jsx)($d946f50010ba937f$var$TextAreaInput, {})
     });
 });
@@ -83,51 +85,51 @@ const $d946f50010ba937f$export$d22444a338b6e3c2 = /*#__PURE__*/ (0, $fsr8S$forwa
                 if (p[1] === "y") gridColumnEnd = true;
                 rules += p[0];
             }
-            rules += ' se13';
+            rules += ' se131';
             if (props.isInForm) {
-                if (!gridColumnStart) rules += ' z2mU13';
+                if (!gridColumnStart) rules += ' z2mU131';
             }
             if (props.isInForm) {
                 if (props.labelPosition === "side") {
-                    if (!gridColumnEnd) rules += ' yvoofG13';
+                    if (!gridColumnEnd) rules += ' yvoofG131';
                 }
             }
-            if (props.isInForm) rules += ' DLwlgod13';
+            if (props.isInForm) rules += ' DLwlgod131';
             else {
-                if (props.labelPosition === "side") rules += ' DPlN5qb13';
-                else if (props.labelPosition === "top") rules += ' DM8Mfn13';
+                if (props.labelPosition === "side") rules += ' DPlN5qb131';
+                else if (props.labelPosition === "top") rules += ' DM8Mfn131';
             }
-            if (props.labelPosition === "side") rules += ' EPlN5qb13';
-            else if (props.labelPosition === "top") rules += ' E4w1sLc13';
-            if (props.labelPosition === "side") rules += ' CbRM95c13';
-            else if (props.labelPosition === "top") rules += ' Cxaocre13';
+            if (props.labelPosition === "side") rules += ' EPlN5qb131';
+            else if (props.labelPosition === "top") rules += ' E4w1sLc131';
+            if (props.labelPosition === "side") rules += ' CbRM95c131';
+            else if (props.labelPosition === "top") rules += ' Cxaocre131';
             if (props.size === "XL") {
-                rules += ' -_6BNtrc-e13';
-                rules += ' vx13';
+                rules += ' -_6BNtrc-e131';
+                rules += ' vx131';
             } else if (props.size === "L") {
-                rules += ' -_6BNtrc-d13';
-                rules += ' vx13';
+                rules += ' -_6BNtrc-d131';
+                rules += ' vx131';
             } else if (props.size === "S") {
-                rules += ' -_6BNtrc-b13';
-                rules += ' vx13';
+                rules += ' -_6BNtrc-b131';
+                rules += ' vx131';
             } else if (props.size === "XS") {
-                rules += ' -_6BNtrc-a13';
-                rules += ' vx13';
+                rules += ' -_6BNtrc-a131';
+                rules += ' vx131';
             } else {
-                rules += ' -_6BNtrc-c13';
-                rules += ' vx13';
+                rules += ' -_6BNtrc-c131';
+                rules += ' vx131';
             }
-            rules += ' ea13';
-            rules += ' _Fd13';
-            rules += ' _FnuYUweb13';
-            if (props.size === "XL") rules += ' -BhX7R-Fz13';
-            else if (props.size === "L") rules += ' -BhX7R-Fv13';
-            else if (props.size === "S") rules += ' -BhX7R-Fp13';
-            else if (props.size === "XS") rules += ' -BhX7R-Fn13';
-            else rules += ' -BhX7R-Fx13';
-            rules += ' -AJjOLd-UVkF0Db13';
-            rules += ' qg13';
-            rules += ' __ca13';
+            rules += ' ea131';
+            rules += ' _Fd131';
+            rules += ' _FnuYUweb131';
+            if (props.size === "XL") rules += ' -BhX7R-Fz131';
+            else if (props.size === "L") rules += ' -BhX7R-Fv131';
+            else if (props.size === "S") rules += ' -BhX7R-Fp131';
+            else if (props.size === "XS") rules += ' -BhX7R-Fn131';
+            else rules += ' -BhX7R-Fx131';
+            rules += ' -AJjOLd-UVkF0Db131';
+            rules += ' qg131';
+            rules += ' __ca131';
             return rules;
         }({
             size: props.size,
@@ -146,23 +148,32 @@ const $d946f50010ba937f$export$d22444a338b6e3c2 = /*#__PURE__*/ (0, $fsr8S$forwa
                         contextualHelp: props.contextualHelp,
                         children: label
                     }),
-                    /*#__PURE__*/ (0, $fsr8S$jsxs)((0, $9afd80978c252040$export$f0fe469072bc6950), {
+                    /*#__PURE__*/ (0, $fsr8S$jsx)((0, $9afd80978c252040$export$f0fe469072bc6950), {
+                        prefix: props.prefix,
                         size: props.size,
                         styles: fieldGroupCss,
-                        children: [
-                            /*#__PURE__*/ (0, $fsr8S$jsx)((0, $fsr8S$InputContext).Consumer, {
-                                children: (ctx)=>/*#__PURE__*/ (0, $fsr8S$jsx)((0, $fsr8S$InputContext).Provider, {
-                                        value: {
-                                            ...ctx,
-                                            ref: (0, $fsr8S$mergeRefs)(ctx?.ref, inputRef)
-                                        },
-                                        children: children
-                                    })
-                            }),
-                            isInvalid && /*#__PURE__*/ (0, $fsr8S$jsx)((0, $9afd80978c252040$export$bda0d075e0e342c9), {
-                                isDisabled: isDisabled
-                            })
-                        ]
+                        children: /*#__PURE__*/ (0, $fsr8S$jsxs)((0, $fsr8S$Provider), {
+                            values: [
+                                [
+                                    (0, $8e847109a6ab556d$export$9afb8bc826b033ea),
+                                    {}
+                                ]
+                            ],
+                            children: [
+                                /*#__PURE__*/ (0, $fsr8S$jsx)((0, $fsr8S$InputContext).Consumer, {
+                                    children: (ctx)=>/*#__PURE__*/ (0, $fsr8S$jsx)((0, $fsr8S$InputContext).Provider, {
+                                            value: {
+                                                ...ctx,
+                                                ref: (0, $fsr8S$mergeRefs)(ctx?.ref, inputRef)
+                                            },
+                                            children: children
+                                        })
+                                }),
+                                isInvalid && /*#__PURE__*/ (0, $fsr8S$jsx)((0, $9afd80978c252040$export$bda0d075e0e342c9), {
+                                    isDisabled: isDisabled
+                                })
+                            ]
+                        })
                     }),
                     /*#__PURE__*/ (0, $fsr8S$jsx)((0, $9afd80978c252040$export$a67c0bc59081311a), {
                         size: props.size,
@@ -204,32 +215,32 @@ function $d946f50010ba937f$var$TextAreaInput() {
         placeholder: placeholder ?? ' ',
         className: function anonymous(props) {
             let rules = " ";
-            rules += ' Sd13';
-            rules += ' Rd13';
-            rules += ' Tu7Fubd13';
-            rules += ' Qu7Fubd13';
-            rules += ' MAyFGYc13';
-            rules += ' _oa13';
-            rules += ' g913';
-            rules += ' p40ub4c13';
-            rules += ' pYFIK2bn13';
-            rules += ' pYFIK2blc13';
-            rules += ' u40ub4c13';
-            rules += ' v40ub4c13';
-            rules += ' x40ub4c13';
-            rules += ' _xa13';
-            rules += ' _F40ub4c13';
-            rules += ' _ub13';
-            rules += ' Na13';
-            rules += ' _Le13';
-            rules += ' _je13';
-            rules += ' _Qc13';
-            rules += ' _Nc13';
-            if (props.size === "XL") rules += ' -M_-Mk13';
-            else if (props.size === "L") rules += ' -M_-Mh13';
-            else if (props.size === "S") rules += ' -M_-Mg13';
-            else if (props.size === "XS") rules += ' -M_-Mf13';
-            else rules += ' -M_-Mi13';
+            rules += ' Sd131';
+            rules += ' Rd131';
+            rules += ' Tu7Fubd131';
+            rules += ' Qu7Fubd131';
+            rules += ' MAyFGYc131';
+            rules += ' _oa131';
+            rules += ' g9131';
+            rules += ' p40ub4c131';
+            rules += ' pYFIK2bn131';
+            rules += ' pYFIK2blc131';
+            rules += ' u40ub4c131';
+            rules += ' v40ub4c131';
+            rules += ' x40ub4c131';
+            rules += ' _xa131';
+            rules += ' _F40ub4c131';
+            rules += ' _ub131';
+            rules += ' Na131';
+            rules += ' _Le131';
+            rules += ' _je131';
+            rules += ' _Qc131';
+            rules += ' _Nc131';
+            if (props.size === "XL") rules += ' -M_-Mk131';
+            else if (props.size === "L") rules += ' -M_-Mh131';
+            else if (props.size === "S") rules += ' -M_-Mg131';
+            else if (props.size === "XS") rules += ' -M_-Mf131';
+            else rules += ' -M_-Mi131';
             return rules;
         }
     });

package/dist/private/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 {TextArea as AriaTextArea, TextAreaContext as AriaTextAreaContext} from 'react-aria-components/TextArea';\nimport {TextField as AriaTextField, TextFieldProps as AriaTextFieldProps} from 'react-aria-components/TextField';\nimport {centerPadding, style} from '../style' with {type: 'macro'};\nimport {composeRenderProps} from 'react-aria-components/composeRenderProps';\nimport {ContextValue, useSlottedContext} from 'react-aria-components/slots';\nimport {controlSize, field, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {createContext, forwardRef, ReactNode, Ref, useContext, useImperativeHandle, useRef} from 'react';\nimport {createFocusableRef} from './useDOMRef';\nimport {FieldErrorIcon, FieldGroup, FieldLabel, HelpText, Input} from './Field';\nimport {FocusableRefValue, GlobalDOMAttributes, HelpTextProps, RefObject, SpectrumLabelableProps} from '@react-types/shared';\nimport {FormContext, useFormProps} from './Form';\nimport {InputContext, InputProps} from 'react-aria-components/Input';\nimport {mergeRefs} from 'react-aria/mergeRefs';\nimport {StyleString} from '../style/types';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface TextFieldRef<T extends HTMLInputElement | HTMLTextAreaElement = HTMLInputElement> extends FocusableRefValue<T, HTMLDivElement> {\n  select(): void,\n  getInputElement(): T | null\n}\n\nexport interface TextFieldProps extends Omit<AriaTextFieldProps, 'children' | 'className' | 'style' | 'render' | 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': {\n            default: 'gray-600',\n            forcedColors: 'GrayText'\n          }\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"}
+{"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} from 'react-aria-components/TextArea';\nimport {\n  TextField as AriaTextField,\n  TextFieldProps as AriaTextFieldProps\n} from 'react-aria-components/TextField';\nimport {centerPadding, style} from '../style' with {type: 'macro'};\nimport {composeRenderProps} from 'react-aria-components/composeRenderProps';\nimport {ContextValue, Provider, useSlottedContext} from 'react-aria-components/slots';\nimport {\n  controlSize,\n  field,\n  getAllowedOverrides,\n  StyleProps\n} from './style-utils' with {type: 'macro'};\nimport {\n  createContext,\n  forwardRef,\n  ReactNode,\n  Ref,\n  useContext,\n  useImperativeHandle,\n  useRef\n} from 'react';\nimport {createFocusableRef} from './useDOMRef';\nimport {FieldErrorIcon, FieldGroup, FieldLabel, HelpText, Input} from './Field';\nimport {\n  FocusableRefValue,\n  GlobalDOMAttributes,\n  HelpTextProps,\n  RefObject,\n  SpectrumLabelableProps\n} from '@react-types/shared';\nimport {FormContext, useFormProps} from './Form';\nimport {InputContext, InputProps} from 'react-aria-components/Input';\nimport {mergeRefs} from 'react-aria/mergeRefs';\nimport {StyleString} from '../style/types';\nimport {TextContext} from './Content';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface TextFieldRef<\n  T extends HTMLInputElement | HTMLTextAreaElement = HTMLInputElement\n> extends FocusableRefValue<T, HTMLDivElement> {\n  select(): void;\n  getInputElement(): T | null;\n}\n\nexport interface TextFieldProps\n  extends\n    Omit<\n      AriaTextFieldProps,\n      'children' | 'className' | 'style' | 'render' | keyof GlobalDOMAttributes\n    >,\n    StyleProps,\n    SpectrumLabelableProps,\n    HelpTextProps,\n    Pick<InputProps, 'placeholder'> {\n  /**\n   * The size of the text field.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL';\n  /**\n   * The prefix to display in the text field.\n   * A non-interactive element that appears before the input.\n   */\n  prefix?: ReactNode;\n}\n\nexport const TextFieldContext =\n  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(\n  props: TextFieldProps,\n  ref: Ref<TextFieldRef>\n) {\n  [props, ref] = useSpectrumContextProps(props, ref, TextFieldContext);\n  return (\n    <TextFieldBase {...props} ref={ref}>\n      <Input />\n    </TextFieldBase>\n  );\n});\n\nexport interface TextAreaProps extends Omit<TextFieldProps, 'type' | 'pattern'> {}\n\nexport const TextAreaContext =\n  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(\n  props: TextAreaProps,\n  ref: Ref<TextFieldRef<HTMLTextAreaElement>>\n) {\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(\n  props: TextFieldProps & {children: ReactNode; fieldGroupCss?: StyleString},\n  ref: Ref<TextFieldRef<HTMLInputElement | HTMLTextAreaElement>>\n) {\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={\n        UNSAFE_className +\n        style(field(), getAllowedOverrides())(\n          {\n            size: props.size,\n            labelPosition,\n            isInForm: !!formContext\n          },\n          props.styles\n        )\n      }>\n      {composeRenderProps(props.children, (children, {isDisabled, isInvalid}) => (\n        <>\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 prefix={props.prefix} size={props.size} styles={fieldGroupCss}>\n            <Provider values={[[TextContext, {}]]}>\n              <InputContext.Consumer>\n                {ctx => (\n                  <InputContext.Provider\n                    value={{\n                      ...ctx,\n                      ref: mergeRefs((ctx as any)?.ref, inputRef)\n                    }}>\n                    {children}\n                  </InputContext.Provider>\n                )}\n              </InputContext.Consumer>\n              {isInvalid && <FieldErrorIcon isDisabled={isDisabled} />}\n            </Provider>\n          </FieldGroup>\n          <HelpText\n            size={props.size}\n            isDisabled={isDisabled}\n            isInvalid={isInvalid}\n            description={description}>\n            {errorMessage}\n          </HelpText>\n        </>\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': {\n            default: 'gray-600',\n            forcedColors: 'GrayText'\n          }\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}\n"],"names":[],"version":3,"file":"TextField.mjs.map"}