@payloadcms/ui 3.0.0-alpha.9 → 3.0.0-beta.0

package/dist/fields/Tabs/provider.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export declare const TabsProvider: React.FC<{
+    children?: React.ReactNode;
+    withinTab?: boolean;
+}>;
+export declare const useTabs: () => boolean;
+//# sourceMappingURL=provider.d.ts.map

package/dist/fields/Tabs/provider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"provider.d.ts","sourceRoot":"","sources":["../../../src/fields/Tabs/provider.tsx"],"names":[],"mappings":"AACA,OAAO,KAAoC,MAAM,OAAO,CAAA;AAIxD,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAAC,SAAS,CAAC,EAAE,OAAO,CAAA;CAAE,CAKtF,CAAA;AAED,eAAO,MAAM,OAAO,QAAO,OAA8B,CAAA"}

package/dist/fields/Tabs/provider.js

@@ -0,0 +1,11 @@
+'use client';
+import React, { createContext, useContext } from 'react';
+const Context = /*#__PURE__*/ createContext(false);
+export const TabsProvider = ({ children, withinTab = true })=>{
+    return /*#__PURE__*/ React.createElement(Context.Provider, {
+        value: withinTab
+    }, children);
+};
+export const useTabs = ()=>useContext(Context);
+
+//# sourceMappingURL=provider.js.map

package/dist/fields/Tabs/provider.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/fields/Tabs/provider.tsx"],"sourcesContent":["'use client'\nimport React, { createContext, useContext } from 'react'\n\nconst Context = createContext(false)\n\nexport const TabsProvider: React.FC<{ children?: React.ReactNode; withinTab?: boolean }> = ({\n  children,\n  withinTab = true,\n}) => {\n  return <Context.Provider value={withinTab}>{children}</Context.Provider>\n}\n\nexport const useTabs = (): boolean => useContext(Context)\n"],"names":["React","createContext","useContext","Context","TabsProvider","children","withinTab","Provider","value","useTabs"],"rangeMappings":";;;;;;;;","mappings":"AAAA;AACA,OAAOA,SAASC,aAAa,EAAEC,UAAU,QAAQ,QAAO;AAExD,MAAMC,wBAAUF,cAAc;AAE9B,OAAO,MAAMG,eAA8E,CAAC,EAC1FC,QAAQ,EACRC,YAAY,IAAI,EACjB;IACC,qBAAO,oBAACH,QAAQI,QAAQ;QAACC,OAAOF;OAAYD;AAC9C,EAAC;AAED,OAAO,MAAMI,UAAU,IAAeP,WAAWC,SAAQ"}

package/dist/fields/Text/Input.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { TextInputProps } from './types.js';
+import './index.scss';
+export declare const TextInput: React.FC<TextInputProps>;
+//# sourceMappingURL=Input.d.ts.map

package/dist/fields/Text/Input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/fields/Text/Input.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAA;AAKhD,OAAO,cAAc,CAAA;AAErB,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAyG9C,CAAA"}

package/dist/fields/Text/Input.js

@@ -0,0 +1,73 @@
+'use client';
+import { getTranslation } from '@payloadcms/translations';
+import { FieldDescription } from '@payloadcms/ui/forms/FieldDescription';
+import { FieldError } from '@payloadcms/ui/forms/FieldError';
+import { FieldLabel } from '@payloadcms/ui/forms/FieldLabel';
+import React from 'react';
+import { ReactSelect } from '../../elements/ReactSelect/index.js';
+import { useTranslation } from '../../providers/Translation/index.js';
+import { fieldBaseClass } from '../shared/index.js';
+export const TextInput = (props)=>{
+    const { AfterInput, BeforeInput, CustomDescription, CustomError, CustomLabel, className, descriptionProps, errorProps, hasMany, inputRef, label, labelProps, maxRows, onChange, onKeyDown, path, placeholder, readOnly, required, rtl, showError, style, value, valueToRender, width } = props;
+    const { i18n, t } = useTranslation();
+    return /*#__PURE__*/ React.createElement("div", {
+        className: [
+            fieldBaseClass,
+            'text',
+            className,
+            showError && 'error',
+            readOnly && 'read-only',
+            hasMany && 'has-many'
+        ].filter(Boolean).join(' '),
+        style: {
+            ...style,
+            width
+        }
+    }, /*#__PURE__*/ React.createElement(FieldError, {
+        CustomError: CustomError,
+        path: path,
+        ...errorProps || {}
+    }), /*#__PURE__*/ React.createElement(FieldLabel, {
+        CustomLabel: CustomLabel,
+        label: label,
+        required: required,
+        ...labelProps || {}
+    }), hasMany ? /*#__PURE__*/ React.createElement(ReactSelect, {
+        className: `field-${path.replace(/\./g, '__')}`,
+        disabled: readOnly,
+        // prevent adding additional options if maxRows is reached
+        filterOption: ()=>!maxRows ? true : !(Array.isArray(value) && maxRows && value.length >= maxRows),
+        isClearable: true,
+        isCreatable: true,
+        isMulti: true,
+        isSortable: true,
+        noOptionsMessage: ()=>{
+            const isOverHasMany = Array.isArray(value) && value.length >= maxRows;
+            if (isOverHasMany) {
+                return t('validation:limitReached', {
+                    max: maxRows,
+                    value: value.length + 1
+                });
+            }
+            return null;
+        },
+        onChange: onChange,
+        options: [],
+        placeholder: t('general:enterAValue'),
+        showError: showError,
+        value: valueToRender
+    }) : /*#__PURE__*/ React.createElement("div", null, BeforeInput, /*#__PURE__*/ React.createElement("input", {
+        "data-rtl": rtl,
+        disabled: readOnly,
+        id: `field-${path?.replace(/\./g, '__')}`,
+        name: path,
+        onChange: onChange,
+        onKeyDown: onKeyDown,
+        placeholder: getTranslation(placeholder, i18n),
+        ref: inputRef,
+        type: "text",
+        value: value || ''
+    }), AfterInput), CustomDescription !== undefined ? CustomDescription : /*#__PURE__*/ React.createElement(FieldDescription, descriptionProps || {}));
+};
+
+//# sourceMappingURL=Input.js.map

package/dist/fields/Text/Input.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/fields/Text/Input.tsx"],"sourcesContent":["'use client'\nimport { getTranslation } from '@payloadcms/translations'\nimport { FieldDescription } from '@payloadcms/ui/forms/FieldDescription'\nimport { FieldError } from '@payloadcms/ui/forms/FieldError'\nimport { FieldLabel } from '@payloadcms/ui/forms/FieldLabel'\nimport React from 'react'\n\nimport type { TextInputProps } from './types.js'\n\nimport { ReactSelect } from '../../elements/ReactSelect/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { fieldBaseClass } from '../shared/index.js'\nimport './index.scss'\n\nexport const TextInput: React.FC<TextInputProps> = (props) => {\n  const {\n    AfterInput,\n    BeforeInput,\n    CustomDescription,\n    CustomError,\n    CustomLabel,\n    className,\n    descriptionProps,\n    errorProps,\n    hasMany,\n    inputRef,\n    label,\n    labelProps,\n    maxRows,\n    onChange,\n    onKeyDown,\n    path,\n    placeholder,\n    readOnly,\n    required,\n    rtl,\n    showError,\n    style,\n    value,\n    valueToRender,\n    width,\n  } = props\n\n  const { i18n, t } = useTranslation()\n\n  return (\n    <div\n      className={[\n        fieldBaseClass,\n        'text',\n        className,\n        showError && 'error',\n        readOnly && 'read-only',\n        hasMany && 'has-many',\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      style={{\n        ...style,\n        width,\n      }}\n    >\n      <FieldError CustomError={CustomError} path={path} {...(errorProps || {})} />\n      <FieldLabel\n        CustomLabel={CustomLabel}\n        label={label}\n        required={required}\n        {...(labelProps || {})}\n      />\n      {hasMany ? (\n        <ReactSelect\n          className={`field-${path.replace(/\\./g, '__')}`}\n          disabled={readOnly}\n          // prevent adding additional options if maxRows is reached\n          filterOption={() =>\n            !maxRows ? true : !(Array.isArray(value) && maxRows && value.length >= maxRows)\n          }\n          isClearable\n          isCreatable\n          isMulti\n          isSortable\n          noOptionsMessage={() => {\n            const isOverHasMany = Array.isArray(value) && value.length >= maxRows\n            if (isOverHasMany) {\n              return t('validation:limitReached', { max: maxRows, value: value.length + 1 })\n            }\n            return null\n          }}\n          onChange={onChange}\n          options={[]}\n          placeholder={t('general:enterAValue')}\n          showError={showError}\n          value={valueToRender}\n        />\n      ) : (\n        <div>\n          {BeforeInput}\n          <input\n            data-rtl={rtl}\n            disabled={readOnly}\n            id={`field-${path?.replace(/\\./g, '__')}`}\n            name={path}\n            onChange={onChange}\n            onKeyDown={onKeyDown}\n            placeholder={getTranslation(placeholder, i18n)}\n            ref={inputRef}\n            type=\"text\"\n            value={value || ''}\n          />\n          {AfterInput}\n        </div>\n      )}\n      {CustomDescription !== undefined ? (\n        CustomDescription\n      ) : (\n        <FieldDescription {...(descriptionProps || {})} />\n      )}\n    </div>\n  )\n}\n"],"names":["getTranslation","FieldDescription","FieldError","FieldLabel","React","ReactSelect","useTranslation","fieldBaseClass","TextInput","props","AfterInput","BeforeInput","CustomDescription","CustomError","CustomLabel","className","descriptionProps","errorProps","hasMany","inputRef","label","labelProps","maxRows","onChange","onKeyDown","path","placeholder","readOnly","required","rtl","showError","style","value","valueToRender","width","i18n","t","div","filter","Boolean","join","replace","disabled","filterOption","Array","isArray","length","isClearable","isCreatable","isMulti","isSortable","noOptionsMessage","isOverHasMany","max","options","input","data-rtl","id","name","ref","type","undefined"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AACA,SAASA,cAAc,QAAQ,2BAA0B;AACzD,SAASC,gBAAgB,QAAQ,wCAAuC;AACxE,SAASC,UAAU,QAAQ,kCAAiC;AAC5D,SAASC,UAAU,QAAQ,kCAAiC;AAC5D,OAAOC,WAAW,QAAO;AAIzB,SAASC,WAAW,QAAQ,sCAAqC;AACjE,SAASC,cAAc,QAAQ,uCAAsC;AACrE,SAASC,cAAc,QAAQ,qBAAoB;AAGnD,OAAO,MAAMC,YAAsC,CAACC;IAClD,MAAM,EACJC,UAAU,EACVC,WAAW,EACXC,iBAAiB,EACjBC,WAAW,EACXC,WAAW,EACXC,SAAS,EACTC,gBAAgB,EAChBC,UAAU,EACVC,OAAO,EACPC,QAAQ,EACRC,KAAK,EACLC,UAAU,EACVC,OAAO,EACPC,QAAQ,EACRC,SAAS,EACTC,IAAI,EACJC,WAAW,EACXC,QAAQ,EACRC,QAAQ,EACRC,GAAG,EACHC,SAAS,EACTC,KAAK,EACLC,KAAK,EACLC,aAAa,EACbC,KAAK,EACN,GAAGzB;IAEJ,MAAM,EAAE0B,IAAI,EAAEC,CAAC,EAAE,GAAG9B;IAEpB,qBACE,oBAAC+B;QACCtB,WAAW;YACTR;YACA;YACAQ;YACAe,aAAa;YACbH,YAAY;YACZT,WAAW;SACZ,CACEoB,MAAM,CAACC,SACPC,IAAI,CAAC;QACRT,OAAO;YACL,GAAGA,KAAK;YACRG;QACF;qBAEA,oBAAChC;QAAWW,aAAaA;QAAaY,MAAMA;QAAO,GAAIR,cAAc,CAAC,CAAC;sBACvE,oBAACd;QACCW,aAAaA;QACbM,OAAOA;QACPQ,UAAUA;QACT,GAAIP,cAAc,CAAC,CAAC;QAEtBH,wBACC,oBAACb;QACCU,WAAW,CAAC,MAAM,EAAEU,KAAKgB,OAAO,CAAC,OAAO,MAAM,CAAC;QAC/CC,UAAUf;QACV,0DAA0D;QAC1DgB,cAAc,IACZ,CAACrB,UAAU,OAAO,CAAEsB,CAAAA,MAAMC,OAAO,CAACb,UAAUV,WAAWU,MAAMc,MAAM,IAAIxB,OAAM;QAE/EyB,aAAAA;QACAC,aAAAA;QACAC,SAAAA;QACAC,YAAAA;QACAC,kBAAkB;YAChB,MAAMC,gBAAgBR,MAAMC,OAAO,CAACb,UAAUA,MAAMc,MAAM,IAAIxB;YAC9D,IAAI8B,eAAe;gBACjB,OAAOhB,EAAE,2BAA2B;oBAAEiB,KAAK/B;oBAASU,OAAOA,MAAMc,MAAM,GAAG;gBAAE;YAC9E;YACA,OAAO;QACT;QACAvB,UAAUA;QACV+B,SAAS,EAAE;QACX5B,aAAaU,EAAE;QACfN,WAAWA;QACXE,OAAOC;uBAGT,oBAACI,aACE1B,2BACD,oBAAC4C;QACCC,YAAU3B;QACVa,UAAUf;QACV8B,IAAI,CAAC,MAAM,EAAEhC,MAAMgB,QAAQ,OAAO,MAAM,CAAC;QACzCiB,MAAMjC;QACNF,UAAUA;QACVC,WAAWA;QACXE,aAAa1B,eAAe0B,aAAaS;QACzCwB,KAAKxC;QACLyC,MAAK;QACL5B,OAAOA,SAAS;QAEjBtB,aAGJE,sBAAsBiD,YACrBjD,kCAEA,oBAACX,kBAAsBe,oBAAoB,CAAC;AAIpD,EAAC"}

package/dist/fields/Text/index.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { TextFieldProps, TextInputProps } from './types.js';
+import { TextInput } from './Input.js';
+import './index.scss';
+export { TextFieldProps, TextInput, TextInputProps };
+export declare const Text: React.FC<TextFieldProps>;
+//# sourceMappingURL=index.d.ts.map

package/dist/fields/Text/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/Text/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAA2C,MAAM,OAAO,CAAA;AAG/D,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,YAAY,CAAA;AAOhE,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAA;AACtC,OAAO,cAAc,CAAA;AAErB,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,cAAc,EAAE,CAAA;AAuIpD,eAAO,MAAM,IAAI,0BAA2B,CAAA"}

package/dist/fields/Text/index.js

@@ -0,0 +1,110 @@
+'use client';
+import { useFieldProps } from '@payloadcms/ui/forms/FieldPropsProvider';
+import React, { useCallback, useEffect, useState } from 'react';
+import { useField } from '../../forms/useField/index.js';
+import { withCondition } from '../../forms/withCondition/index.js';
+import { useConfig } from '../../providers/Config/index.js';
+import { useLocale } from '../../providers/Locale/index.js';
+import { isFieldRTL } from '../shared/index.js';
+import { TextInput } from './Input.js';
+export { TextInput };
+const TextField = (props)=>{
+    const { name, AfterInput, BeforeInput, CustomDescription, CustomError, CustomLabel, className, descriptionProps, errorProps, hasMany, inputRef, labelProps, localized, maxLength, maxRows, minLength, minRows, path: pathFromProps, placeholder, readOnly: readOnlyFromProps, required, rtl, style, validate, width } = props;
+    const locale = useLocale();
+    const { localization: localizationConfig } = useConfig();
+    const memoizedValidate = useCallback((value, options)=>{
+        if (typeof validate === 'function') return validate(value, {
+            ...options,
+            maxLength,
+            minLength,
+            required
+        });
+    }, [
+        validate,
+        minLength,
+        maxLength,
+        required
+    ]);
+    const { path: pathFromContext, readOnly: readOnlyFromContext } = useFieldProps();
+    const readOnly = readOnlyFromProps || readOnlyFromContext;
+    const { formProcessing, path, setValue, showError, value } = useField({
+        path: pathFromContext || pathFromProps || name,
+        validate: memoizedValidate
+    });
+    const renderRTL = isFieldRTL({
+        fieldLocalized: localized,
+        fieldRTL: rtl,
+        locale,
+        localizationConfig: localizationConfig || undefined
+    });
+    const [valueToRender, setValueToRender] = useState([]) // Only for hasMany
+    ;
+    const handleHasManyChange = useCallback((selectedOption)=>{
+        if (!readOnly) {
+            let newValue;
+            if (!selectedOption) {
+                newValue = [];
+            } else if (Array.isArray(selectedOption)) {
+                newValue = selectedOption.map((option)=>option.value?.value || option.value);
+            } else {
+                newValue = [
+                    selectedOption.value?.value || selectedOption.value
+                ];
+            }
+            setValue(newValue);
+        }
+    }, [
+        readOnly,
+        setValue
+    ]);
+    // useEffect update valueToRender:
+    useEffect(()=>{
+        if (hasMany && Array.isArray(value)) {
+            setValueToRender(value.map((val, index)=>{
+                return {
+                    id: `${val}${index}`,
+                    label: `${val}`,
+                    value: {
+                        // React-select automatically uses "label-value" as a key, so we will get that react duplicate key warning if we just pass in the value as multiple values can be the same. So we need to append the index to the toString() of the value to avoid that warning, as it uses that as the key.
+                        toString: ()=>`${val}${index}`,
+                        value: val?.value || val
+                    }
+                };
+            }));
+        }
+    }, [
+        value,
+        hasMany
+    ]);
+    return /*#__PURE__*/ React.createElement(TextInput, {
+        AfterInput: AfterInput,
+        BeforeInput: BeforeInput,
+        CustomDescription: CustomDescription,
+        CustomError: CustomError,
+        CustomLabel: CustomLabel,
+        className: className,
+        descriptionProps: descriptionProps,
+        errorProps: errorProps,
+        hasMany: hasMany,
+        inputRef: inputRef,
+        labelProps: labelProps,
+        maxRows: maxRows,
+        minRows: minRows,
+        onChange: hasMany ? handleHasManyChange : (e)=>{
+            setValue(e.target.value);
+        },
+        path: path,
+        placeholder: placeholder,
+        readOnly: formProcessing || readOnly,
+        required: required,
+        rtl: renderRTL,
+        showError: showError,
+        style: style,
+        value: value || '',
+        valueToRender: valueToRender,
+        width: width
+    });
+};
+export const Text = withCondition(TextField);
+
+//# sourceMappingURL=index.js.map

package/dist/fields/Text/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/fields/Text/index.tsx"],"sourcesContent":["'use client'\nimport type { ClientValidate } from 'payload/types'\nimport type {} from 'payload/types'\n\nimport { useFieldProps } from '@payloadcms/ui/forms/FieldPropsProvider'\nimport React, { useCallback, useEffect, useState } from 'react'\n\nimport type { Option } from '../../elements/ReactSelect/types.js'\nimport type { TextFieldProps, TextInputProps } from './types.js'\n\nimport { useField } from '../../forms/useField/index.js'\nimport { withCondition } from '../../forms/withCondition/index.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useLocale } from '../../providers/Locale/index.js'\nimport { isFieldRTL } from '../shared/index.js'\nimport { TextInput } from './Input.js'\nimport './index.scss'\n\nexport { TextFieldProps, TextInput, TextInputProps }\n\nconst TextField: React.FC<TextFieldProps> = (props) => {\n  const {\n    name,\n    AfterInput,\n    BeforeInput,\n    CustomDescription,\n    CustomError,\n    CustomLabel,\n    className,\n    descriptionProps,\n    errorProps,\n    hasMany,\n    inputRef,\n    labelProps,\n    localized,\n    maxLength,\n    maxRows,\n    minLength,\n    minRows,\n    path: pathFromProps,\n    placeholder,\n    readOnly: readOnlyFromProps,\n    required,\n    rtl,\n    style,\n    validate,\n    width,\n  } = props\n\n  const locale = useLocale()\n\n  const { localization: localizationConfig } = useConfig()\n\n  const memoizedValidate: ClientValidate = useCallback(\n    (value, options) => {\n      if (typeof validate === 'function')\n        return validate(value, { ...options, maxLength, minLength, required })\n    },\n    [validate, minLength, maxLength, required],\n  )\n\n  const { path: pathFromContext, readOnly: readOnlyFromContext } = useFieldProps()\n  const readOnly = readOnlyFromProps || readOnlyFromContext\n\n  const { formProcessing, path, setValue, showError, value } = useField({\n    path: pathFromContext || pathFromProps || name,\n    validate: memoizedValidate,\n  })\n\n  const renderRTL = isFieldRTL({\n    fieldLocalized: localized,\n    fieldRTL: rtl,\n    locale,\n    localizationConfig: localizationConfig || undefined,\n  })\n\n  const [valueToRender, setValueToRender] = useState<\n    { id: string; label: string; value: { value: number } }[]\n  >([]) // Only for hasMany\n\n  const handleHasManyChange = useCallback(\n    (selectedOption) => {\n      if (!readOnly) {\n        let newValue\n        if (!selectedOption) {\n          newValue = []\n        } else if (Array.isArray(selectedOption)) {\n          newValue = selectedOption.map((option) => option.value?.value || option.value)\n        } else {\n          newValue = [selectedOption.value?.value || selectedOption.value]\n        }\n\n        setValue(newValue)\n      }\n    },\n    [readOnly, setValue],\n  )\n\n  // useEffect update valueToRender:\n  useEffect(() => {\n    if (hasMany && Array.isArray(value)) {\n      setValueToRender(\n        value.map((val, index) => {\n          return {\n            id: `${val}${index}`, // append index to avoid duplicate keys but allow duplicate numbers\n            label: `${val}`,\n            value: {\n              // React-select automatically uses \"label-value\" as a key, so we will get that react duplicate key warning if we just pass in the value as multiple values can be the same. So we need to append the index to the toString() of the value to avoid that warning, as it uses that as the key.\n              toString: () => `${val}${index}`,\n              value: val?.value || val,\n            },\n          }\n        }),\n      )\n    }\n  }, [value, hasMany])\n\n  return (\n    <TextInput\n      AfterInput={AfterInput}\n      BeforeInput={BeforeInput}\n      CustomDescription={CustomDescription}\n      CustomError={CustomError}\n      CustomLabel={CustomLabel}\n      className={className}\n      descriptionProps={descriptionProps}\n      errorProps={errorProps}\n      hasMany={hasMany}\n      inputRef={inputRef}\n      labelProps={labelProps}\n      maxRows={maxRows}\n      minRows={minRows}\n      onChange={\n        hasMany\n          ? handleHasManyChange\n          : (e) => {\n              setValue(e.target.value)\n            }\n      }\n      path={path}\n      placeholder={placeholder}\n      readOnly={formProcessing || readOnly}\n      required={required}\n      rtl={renderRTL}\n      showError={showError}\n      style={style}\n      value={(value as string) || ''}\n      valueToRender={valueToRender as Option[]}\n      width={width}\n    />\n  )\n}\n\nexport const Text = withCondition(TextField)\n"],"names":["useFieldProps","React","useCallback","useEffect","useState","useField","withCondition","useConfig","useLocale","isFieldRTL","TextInput","TextField","props","name","AfterInput","BeforeInput","CustomDescription","CustomError","CustomLabel","className","descriptionProps","errorProps","hasMany","inputRef","labelProps","localized","maxLength","maxRows","minLength","minRows","path","pathFromProps","placeholder","readOnly","readOnlyFromProps","required","rtl","style","validate","width","locale","localization","localizationConfig","memoizedValidate","value","options","pathFromContext","readOnlyFromContext","formProcessing","setValue","showError","renderRTL","fieldLocalized","fieldRTL","undefined","valueToRender","setValueToRender","handleHasManyChange","selectedOption","newValue","Array","isArray","map","option","val","index","id","label","toString","onChange","e","target","Text"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/dist/fields/Text/index.scss

@@ -0,0 +1,31 @@
+@import '../../scss/styles.scss';
+
+.field-type.text {
+  position: relative;
+
+  &:not(.has-many) {
+    input {
+      @include formInput;
+    }
+  }
+}
+
+html[data-theme='light'] {
+  .field-type.text {
+    &.error {
+      input {
+        @include lightInputError;
+      }
+    }
+  }
+}
+
+html[data-theme='dark'] {
+  .field-type.text {
+    &.error {
+      input {
+        @include darkInputError;
+      }
+    }
+  }
+}

package/dist/fields/Text/types.d.ts

@@ -0,0 +1,30 @@
+import type { FieldBase, TextField } from 'payload/types';
+import type { ChangeEvent } from 'react';
+import type { Option } from '../../elements/ReactSelect/types.js';
+import type { FormFieldBase } from '../shared/index.js';
+export type TextFieldProps = FormFieldBase & {
+    hasMany?: boolean;
+    inputRef?: React.MutableRefObject<HTMLInputElement>;
+    label?: FieldBase['label'];
+    maxLength?: number;
+    maxRows?: number;
+    minLength?: number;
+    minRows?: number;
+    name?: string;
+    onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;
+    path?: string;
+    placeholder?: TextField['admin']['placeholder'];
+    width?: string;
+};
+export type TextInputProps = Omit<TextFieldProps, 'type'> & {
+    hasMany?: boolean;
+    inputRef?: React.MutableRefObject<HTMLInputElement>;
+    maxRows?: number;
+    minRows?: number;
+    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+    onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;
+    showError?: boolean;
+    value?: string;
+    valueToRender?: Option[];
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/fields/Text/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/fields/Text/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AACzD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AAExC,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,qCAAqC,CAAA;AACjE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAA;AAEvD,MAAM,MAAM,cAAc,GAAG,aAAa,GAAG;IAC3C,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,CAAA;IACnD,KAAK,CAAC,EAAE,SAAS,CAAC,OAAO,CAAC,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,SAAS,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC,gBAAgB,CAAC,CAAA;IACxD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC,aAAa,CAAC,CAAA;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,cAAc,EAAE,MAAM,CAAC,GAAG;IAC1D,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,CAAA;IACnD,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAA;IACrD,SAAS,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC,gBAAgB,CAAC,CAAA;IACxD,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,aAAa,CAAC,EAAE,MAAM,EAAE,CAAA;CACzB,CAAA"}

package/dist/fields/Text/types.js

@@ -0,0 +1,3 @@
+export { };
+
+//# sourceMappingURL=types.js.map

package/dist/fields/Text/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/fields/Text/types.ts"],"sourcesContent":["import type { FieldBase, TextField } from 'payload/types'\nimport type { ChangeEvent } from 'react'\n\nimport type { Option } from '../../elements/ReactSelect/types.js'\nimport type { FormFieldBase } from '../shared/index.js'\n\nexport type TextFieldProps = FormFieldBase & {\n  hasMany?: boolean\n  inputRef?: React.MutableRefObject<HTMLInputElement>\n  label?: FieldBase['label']\n  maxLength?: number\n  maxRows?: number\n  minLength?: number\n  minRows?: number\n  name?: string\n  onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>\n  path?: string\n  placeholder?: TextField['admin']['placeholder']\n  width?: string\n}\n\nexport type TextInputProps = Omit<TextFieldProps, 'type'> & {\n  hasMany?: boolean\n  inputRef?: React.MutableRefObject<HTMLInputElement>\n  maxRows?: number\n  minRows?: number\n  onChange?: (e: ChangeEvent<HTMLInputElement>) => void\n  onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>\n  showError?: boolean\n  value?: string\n  valueToRender?: Option[]\n}\n"],"names":[],"rangeMappings":"","mappings":"AAqBA,WAUC"}

package/dist/fields/Textarea/Input.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { TextAreaInputProps } from './types.js';
+import './index.scss';
+export declare const TextareaInput: React.FC<TextAreaInputProps>;
+//# sourceMappingURL=Input.d.ts.map

package/dist/fields/Textarea/Input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/fields/Textarea/Input.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAA;AAIpD,OAAO,cAAc,CAAA;AAErB,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA2EtD,CAAA"}

package/dist/fields/Textarea/Input.js

@@ -0,0 +1,54 @@
+'use client';
+import { getTranslation } from '@payloadcms/translations';
+import { FieldDescription } from '@payloadcms/ui/forms/FieldDescription';
+import { FieldError } from '@payloadcms/ui/forms/FieldError';
+import { FieldLabel } from '@payloadcms/ui/forms/FieldLabel';
+import React from 'react';
+import { useTranslation } from '../../providers/Translation/index.js';
+import { fieldBaseClass } from '../shared/index.js';
+export const TextareaInput = (props)=>{
+    const { AfterInput, BeforeInput, CustomDescription, CustomError, CustomLabel, className, descriptionProps, errorProps, label, labelProps, onChange, path, placeholder, readOnly, required, rows, rtl, showError, style, value, width } = props;
+    const { i18n } = useTranslation();
+    return /*#__PURE__*/ React.createElement("div", {
+        className: [
+            fieldBaseClass,
+            'textarea',
+            className,
+            showError && 'error',
+            readOnly && 'read-only'
+        ].filter(Boolean).join(' '),
+        style: {
+            ...style,
+            width
+        }
+    }, /*#__PURE__*/ React.createElement(FieldError, {
+        CustomError: CustomError,
+        path: path,
+        ...errorProps || {}
+    }), /*#__PURE__*/ React.createElement(FieldLabel, {
+        CustomLabel: CustomLabel,
+        label: label,
+        required: required,
+        ...labelProps || {}
+    }), BeforeInput, /*#__PURE__*/ React.createElement("label", {
+        className: "textarea-outer",
+        htmlFor: `field-${path.replace(/\./g, '__')}`
+    }, /*#__PURE__*/ React.createElement("div", {
+        className: "textarea-inner"
+    }, /*#__PURE__*/ React.createElement("div", {
+        className: "textarea-clone",
+        "data-value": value || placeholder || ''
+    }), /*#__PURE__*/ React.createElement("textarea", {
+        className: "textarea-element",
+        "data-rtl": rtl,
+        disabled: readOnly,
+        id: `field-${path.replace(/\./g, '__')}`,
+        name: path,
+        onChange: onChange,
+        placeholder: getTranslation(placeholder, i18n),
+        rows: rows,
+        value: value || ''
+    }))), AfterInput, CustomDescription !== undefined ? CustomDescription : /*#__PURE__*/ React.createElement(FieldDescription, descriptionProps || {}));
+};
+
+//# sourceMappingURL=Input.js.map

package/dist/fields/Textarea/Input.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/fields/Textarea/Input.tsx"],"sourcesContent":["'use client'\nimport { getTranslation } from '@payloadcms/translations'\nimport { FieldDescription } from '@payloadcms/ui/forms/FieldDescription'\nimport { FieldError } from '@payloadcms/ui/forms/FieldError'\nimport { FieldLabel } from '@payloadcms/ui/forms/FieldLabel'\nimport React from 'react'\n\nimport type { TextAreaInputProps } from './types.js'\n\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { fieldBaseClass } from '../shared/index.js'\nimport './index.scss'\n\nexport const TextareaInput: React.FC<TextAreaInputProps> = (props) => {\n  const {\n    AfterInput,\n    BeforeInput,\n    CustomDescription,\n    CustomError,\n    CustomLabel,\n    className,\n    descriptionProps,\n    errorProps,\n    label,\n    labelProps,\n    onChange,\n    path,\n    placeholder,\n    readOnly,\n    required,\n    rows,\n    rtl,\n    showError,\n    style,\n    value,\n    width,\n  } = props\n\n  const { i18n } = useTranslation()\n\n  return (\n    <div\n      className={[\n        fieldBaseClass,\n        'textarea',\n        className,\n        showError && 'error',\n        readOnly && 'read-only',\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      style={{\n        ...style,\n        width,\n      }}\n    >\n      <FieldError CustomError={CustomError} path={path} {...(errorProps || {})} />\n      <FieldLabel\n        CustomLabel={CustomLabel}\n        label={label}\n        required={required}\n        {...(labelProps || {})}\n      />\n      {BeforeInput}\n      <label className=\"textarea-outer\" htmlFor={`field-${path.replace(/\\./g, '__')}`}>\n        <div className=\"textarea-inner\">\n          <div className=\"textarea-clone\" data-value={value || placeholder || ''} />\n          <textarea\n            className=\"textarea-element\"\n            data-rtl={rtl}\n            disabled={readOnly}\n            id={`field-${path.replace(/\\./g, '__')}`}\n            name={path}\n            onChange={onChange}\n            placeholder={getTranslation(placeholder, i18n)}\n            rows={rows}\n            value={value || ''}\n          />\n        </div>\n      </label>\n      {AfterInput}\n      {CustomDescription !== undefined ? (\n        CustomDescription\n      ) : (\n        <FieldDescription {...(descriptionProps || {})} />\n      )}\n    </div>\n  )\n}\n"],"names":["getTranslation","FieldDescription","FieldError","FieldLabel","React","useTranslation","fieldBaseClass","TextareaInput","props","AfterInput","BeforeInput","CustomDescription","CustomError","CustomLabel","className","descriptionProps","errorProps","label","labelProps","onChange","path","placeholder","readOnly","required","rows","rtl","showError","style","value","width","i18n","div","filter","Boolean","join","htmlFor","replace","data-value","textarea","data-rtl","disabled","id","name","undefined"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AACA,SAASA,cAAc,QAAQ,2BAA0B;AACzD,SAASC,gBAAgB,QAAQ,wCAAuC;AACxE,SAASC,UAAU,QAAQ,kCAAiC;AAC5D,SAASC,UAAU,QAAQ,kCAAiC;AAC5D,OAAOC,WAAW,QAAO;AAIzB,SAASC,cAAc,QAAQ,uCAAsC;AACrE,SAASC,cAAc,QAAQ,qBAAoB;AAGnD,OAAO,MAAMC,gBAA8C,CAACC;IAC1D,MAAM,EACJC,UAAU,EACVC,WAAW,EACXC,iBAAiB,EACjBC,WAAW,EACXC,WAAW,EACXC,SAAS,EACTC,gBAAgB,EAChBC,UAAU,EACVC,KAAK,EACLC,UAAU,EACVC,QAAQ,EACRC,IAAI,EACJC,WAAW,EACXC,QAAQ,EACRC,QAAQ,EACRC,IAAI,EACJC,GAAG,EACHC,SAAS,EACTC,KAAK,EACLC,KAAK,EACLC,KAAK,EACN,GAAGrB;IAEJ,MAAM,EAAEsB,IAAI,EAAE,GAAGzB;IAEjB,qBACE,oBAAC0B;QACCjB,WAAW;YACTR;YACA;YACAQ;YACAY,aAAa;YACbJ,YAAY;SACb,CACEU,MAAM,CAACC,SACPC,IAAI,CAAC;QACRP,OAAO;YACL,GAAGA,KAAK;YACRE;QACF;qBAEA,oBAAC3B;QAAWU,aAAaA;QAAaQ,MAAMA;QAAO,GAAIJ,cAAc,CAAC,CAAC;sBACvE,oBAACb;QACCU,aAAaA;QACbI,OAAOA;QACPM,UAAUA;QACT,GAAIL,cAAc,CAAC,CAAC;QAEtBR,2BACD,oBAACO;QAAMH,WAAU;QAAiBqB,SAAS,CAAC,MAAM,EAAEf,KAAKgB,OAAO,CAAC,OAAO,MAAM,CAAC;qBAC7E,oBAACL;QAAIjB,WAAU;qBACb,oBAACiB;QAAIjB,WAAU;QAAiBuB,cAAYT,SAASP,eAAe;sBACpE,oBAACiB;QACCxB,WAAU;QACVyB,YAAUd;QACVe,UAAUlB;QACVmB,IAAI,CAAC,MAAM,EAAErB,KAAKgB,OAAO,CAAC,OAAO,MAAM,CAAC;QACxCM,MAAMtB;QACND,UAAUA;QACVE,aAAarB,eAAeqB,aAAaS;QACzCN,MAAMA;QACNI,OAAOA,SAAS;UAIrBnB,YACAE,sBAAsBgC,YACrBhC,kCAEA,oBAACV,kBAAsBc,oBAAoB,CAAC;AAIpD,EAAC"}

package/dist/fields/Textarea/index.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { TextAreaInputProps, TextareaFieldProps } from './types.js';
+import { TextareaInput } from './Input.js';
+import './index.scss';
+export { TextAreaInputProps, TextareaFieldProps, TextareaInput };
+export declare const Textarea: React.FC<TextareaFieldProps>;
+//# sourceMappingURL=index.d.ts.map

package/dist/fields/Textarea/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/Textarea/index.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAsB,MAAM,OAAO,CAAA;AAE1C,OAAO,KAAK,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAA;AAOxE,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA;AAC1C,OAAO,cAAc,CAAA;AAErB,OAAO,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,aAAa,EAAE,CAAA;AAoFhE,eAAO,MAAM,QAAQ,8BAA+B,CAAA"}

package/dist/fields/Textarea/index.js

@@ -0,0 +1,68 @@
+/* eslint-disable react/destructuring-assignment */ 'use client';
+import { getTranslation } from '@payloadcms/translations';
+import { useFieldProps } from '@payloadcms/ui/forms/FieldPropsProvider';
+import React, { useCallback } from 'react';
+import { useField } from '../../forms/useField/index.js';
+import { withCondition } from '../../forms/withCondition/index.js';
+import { useConfig } from '../../providers/Config/index.js';
+import { useTranslation } from '../../providers/Translation/index.js';
+import { isFieldRTL } from '../shared/index.js';
+import { TextareaInput } from './Input.js';
+export { TextareaInput };
+const TextareaField = (props)=>{
+    const { name, AfterInput, BeforeInput, CustomDescription, CustomError, CustomLabel, className, descriptionProps, errorProps, labelProps, locale, localized, maxLength, minLength, path: pathFromProps, placeholder, readOnly: readOnlyFromProps, required, rows, rtl, style, validate, width } = props;
+    const { i18n } = useTranslation();
+    const { localization } = useConfig();
+    const isRTL = isFieldRTL({
+        fieldLocalized: localized,
+        fieldRTL: rtl,
+        locale,
+        localizationConfig: localization || undefined
+    });
+    const memoizedValidate = useCallback((value, options)=>{
+        if (typeof validate === 'function') return validate(value, {
+            ...options,
+            maxLength,
+            minLength,
+            required
+        });
+    }, [
+        validate,
+        required,
+        maxLength,
+        minLength
+    ]);
+    const { path: pathFromContext, readOnly: readOnlyFromContext } = useFieldProps();
+    const readOnly = readOnlyFromProps || readOnlyFromContext;
+    const { path, setValue, showError, value } = useField({
+        path: pathFromContext || pathFromProps || name,
+        validate: memoizedValidate
+    });
+    return /*#__PURE__*/ React.createElement(TextareaInput, {
+        AfterInput: AfterInput,
+        BeforeInput: BeforeInput,
+        CustomDescription: CustomDescription,
+        CustomError: CustomError,
+        CustomLabel: CustomLabel,
+        className: className,
+        descriptionProps: descriptionProps,
+        errorProps: errorProps,
+        labelProps: labelProps,
+        onChange: (e)=>{
+            setValue(e.target.value);
+        },
+        path: path,
+        placeholder: getTranslation(placeholder, i18n),
+        readOnly: readOnly,
+        required: required,
+        rows: rows,
+        rtl: isRTL,
+        showError: showError,
+        style: style,
+        value: value,
+        width: width
+    });
+};
+export const Textarea = withCondition(TextareaField);
+
+//# sourceMappingURL=index.js.map

package/dist/fields/Textarea/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/fields/Textarea/index.tsx"],"sourcesContent":["/* eslint-disable react/destructuring-assignment */\n'use client'\nimport type { ClientValidate } from 'payload/types'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport { useFieldProps } from '@payloadcms/ui/forms/FieldPropsProvider'\nimport React, { useCallback } from 'react'\n\nimport type { TextAreaInputProps, TextareaFieldProps } from './types.js'\n\nimport { useField } from '../../forms/useField/index.js'\nimport { withCondition } from '../../forms/withCondition/index.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { isFieldRTL } from '../shared/index.js'\nimport { TextareaInput } from './Input.js'\nimport './index.scss'\n\nexport { TextAreaInputProps, TextareaFieldProps, TextareaInput }\n\nconst TextareaField: React.FC<TextareaFieldProps> = (props) => {\n  const {\n    name,\n    AfterInput,\n    BeforeInput,\n    CustomDescription,\n    CustomError,\n    CustomLabel,\n    className,\n    descriptionProps,\n    errorProps,\n    labelProps,\n    locale,\n    localized,\n    maxLength,\n    minLength,\n    path: pathFromProps,\n    placeholder,\n    readOnly: readOnlyFromProps,\n    required,\n    rows,\n    rtl,\n    style,\n    validate,\n    width,\n  } = props\n\n  const { i18n } = useTranslation()\n\n  const { localization } = useConfig()\n\n  const isRTL = isFieldRTL({\n    fieldLocalized: localized,\n    fieldRTL: rtl,\n    locale,\n    localizationConfig: localization || undefined,\n  })\n\n  const memoizedValidate: ClientValidate = useCallback(\n    (value, options) => {\n      if (typeof validate === 'function')\n        return validate(value, { ...options, maxLength, minLength, required })\n    },\n    [validate, required, maxLength, minLength],\n  )\n\n  const { path: pathFromContext, readOnly: readOnlyFromContext } = useFieldProps()\n  const readOnly = readOnlyFromProps || readOnlyFromContext\n\n  const { path, setValue, showError, value } = useField<string>({\n    path: pathFromContext || pathFromProps || name,\n    validate: memoizedValidate,\n  })\n\n  return (\n    <TextareaInput\n      AfterInput={AfterInput}\n      BeforeInput={BeforeInput}\n      CustomDescription={CustomDescription}\n      CustomError={CustomError}\n      CustomLabel={CustomLabel}\n      className={className}\n      descriptionProps={descriptionProps}\n      errorProps={errorProps}\n      labelProps={labelProps}\n      onChange={(e) => {\n        setValue(e.target.value)\n      }}\n      path={path}\n      placeholder={getTranslation(placeholder, i18n)}\n      readOnly={readOnly}\n      required={required}\n      rows={rows}\n      rtl={isRTL}\n      showError={showError}\n      style={style}\n      value={value}\n      width={width}\n    />\n  )\n}\n\nexport const Textarea = withCondition(TextareaField)\n"],"names":["getTranslation","useFieldProps","React","useCallback","useField","withCondition","useConfig","useTranslation","isFieldRTL","TextareaInput","TextareaField","props","name","AfterInput","BeforeInput","CustomDescription","CustomError","CustomLabel","className","descriptionProps","errorProps","labelProps","locale","localized","maxLength","minLength","path","pathFromProps","placeholder","readOnly","readOnlyFromProps","required","rows","rtl","style","validate","width","i18n","localization","isRTL","fieldLocalized","fieldRTL","localizationConfig","undefined","memoizedValidate","value","options","pathFromContext","readOnlyFromContext","setValue","showError","onChange","e","target","Textarea"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,iDAAiD,GACjD;AAGA,SAASA,cAAc,QAAQ,2BAA0B;AACzD,SAASC,aAAa,QAAQ,0CAAyC;AACvE,OAAOC,SAASC,WAAW,QAAQ,QAAO;AAI1C,SAASC,QAAQ,QAAQ,gCAA+B;AACxD,SAASC,aAAa,QAAQ,qCAAoC;AAClE,SAASC,SAAS,QAAQ,kCAAiC;AAC3D,SAASC,cAAc,QAAQ,uCAAsC;AACrE,SAASC,UAAU,QAAQ,qBAAoB;AAC/C,SAASC,aAAa,QAAQ,aAAY;AAG1C,SAAiDA,aAAa,GAAE;AAEhE,MAAMC,gBAA8C,CAACC;IACnD,MAAM,EACJC,IAAI,EACJC,UAAU,EACVC,WAAW,EACXC,iBAAiB,EACjBC,WAAW,EACXC,WAAW,EACXC,SAAS,EACTC,gBAAgB,EAChBC,UAAU,EACVC,UAAU,EACVC,MAAM,EACNC,SAAS,EACTC,SAAS,EACTC,SAAS,EACTC,MAAMC,aAAa,EACnBC,WAAW,EACXC,UAAUC,iBAAiB,EAC3BC,QAAQ,EACRC,IAAI,EACJC,GAAG,EACHC,KAAK,EACLC,QAAQ,EACRC,KAAK,EACN,GAAGzB;IAEJ,MAAM,EAAE0B,IAAI,EAAE,GAAG9B;IAEjB,MAAM,EAAE+B,YAAY,EAAE,GAAGhC;IAEzB,MAAMiC,QAAQ/B,WAAW;QACvBgC,gBAAgBjB;QAChBkB,UAAUR;QACVX;QACAoB,oBAAoBJ,gBAAgBK;IACtC;IAEA,MAAMC,mBAAmCzC,YACvC,CAAC0C,OAAOC;QACN,IAAI,OAAOX,aAAa,YACtB,OAAOA,SAASU,OAAO;YAAE,GAAGC,OAAO;YAAEtB;YAAWC;YAAWM;QAAS;IACxE,GACA;QAACI;QAAUJ;QAAUP;QAAWC;KAAU;IAG5C,MAAM,EAAEC,MAAMqB,eAAe,EAAElB,UAAUmB,mBAAmB,EAAE,GAAG/C;IACjE,MAAM4B,WAAWC,qBAAqBkB;IAEtC,MAAM,EAAEtB,IAAI,EAAEuB,QAAQ,EAAEC,SAAS,EAAEL,KAAK,EAAE,GAAGzC,SAAiB;QAC5DsB,MAAMqB,mBAAmBpB,iBAAiBf;QAC1CuB,UAAUS;IACZ;IAEA,qBACE,oBAACnC;QACCI,YAAYA;QACZC,aAAaA;QACbC,mBAAmBA;QACnBC,aAAaA;QACbC,aAAaA;QACbC,WAAWA;QACXC,kBAAkBA;QAClBC,YAAYA;QACZC,YAAYA;QACZ8B,UAAU,CAACC;YACTH,SAASG,EAAEC,MAAM,CAACR,KAAK;QACzB;QACAnB,MAAMA;QACNE,aAAa5B,eAAe4B,aAAaS;QACzCR,UAAUA;QACVE,UAAUA;QACVC,MAAMA;QACNC,KAAKM;QACLW,WAAWA;QACXhB,OAAOA;QACPW,OAAOA;QACPT,OAAOA;;AAGb;AAEA,OAAO,MAAMkB,WAAWjD,cAAcK,eAAc"}

package/dist/fields/Textarea/index.scss

@@ -0,0 +1,118 @@
+@import '../../scss/styles.scss';
+
+.field-type.textarea {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+
+  .textarea-outer {
+    @include formInput();
+    display: flex;
+    resize: vertical;
+    min-height: base(3);
+    height: 100%;
+
+    // Scrollbar for giant content
+    max-height: calc(100vh - $top-header-offset - calc(#{base(5)}));
+    overflow: hidden;
+
+    @include mid-break {
+      max-height: 60vh;
+    }
+  }
+
+  &.read-only {
+    .textarea-outer {
+      background: var(--theme-elevation-200);
+      color: var(--theme-elevation-450);
+      &:hover {
+        border-color: var(--theme-elevation-150);
+        @include shadow-sm;
+      }
+    }
+  }
+
+  // This element takes exactly the same dimensions as the clone
+  .textarea-inner {
+    display: block;
+    position: relative;
+    line-height: inherit;
+    flex-grow: 1;
+    background: none;
+    outline: none;
+  }
+
+  // Unstyle the textarea, the border is rendered on .textarea-outer
+  .textarea-element {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border: inherit;
+    padding: inherit;
+    font: inherit;
+    line-height: inherit;
+    color: inherit;
+    background: none;
+    overflow: auto;
+    resize: none;
+    outline: none;
+    text-transform: inherit;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+    &[data-rtl='true'] {
+      direction: rtl;
+    }
+  }
+
+  // Clone of textarea with same height
+  .textarea-clone {
+    vertical-align: top;
+    display: inline-block;
+    flex-grow: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: pre-wrap;
+    pointer-events: none;
+  }
+
+  .textarea-clone::before {
+    content: attr(data-value) ' ';
+    visibility: hidden;
+    opacity: 0;
+    white-space: pre-wrap;
+    overflow-wrap: break-word;
+  }
+
+  .textarea-clone::after {
+    content: attr(data-after);
+    opacity: 0.5;
+  }
+
+  @include mid-break {
+    padding: 0;
+  }
+}
+
+html[data-theme='light'] {
+  .field-type.textarea {
+    &.error {
+      .textarea-outer {
+        @include lightInputError;
+      }
+    }
+  }
+}
+
+html[data-theme='dark'] {
+  .field-type.textarea {
+    &.error {
+      .textarea-outer {
+        @include darkInputError;
+      }
+    }
+  }
+}