@oracle/oraclejet-preact 14.0.0

package/es/UNSAFE_TextField.js

@@ -0,0 +1,488 @@
+/* @oracle/oraclejet-preact: 14.0.0 */
+import { _ as __rest } from './tslib.es6-8b94ba02.js';
+import { jsx, jsxs } from 'preact/jsx-runtime';
+import { useFormContext } from './hooks/UNSAFE_useFormContext.js';
+import { useTabbableMode } from './hooks/UNSAFE_useTabbableMode.js';
+import "./UNSAFE_TextField.css";
+import { classNames } from './utils/UNSAFE_classNames.js';
+import { textInterpolations } from './utils/UNSAFE_interpolations/text.js';
+import { mergeInterpolations } from './utils/UNSAFE_mergeInterpolations.js';
+import { useFormFieldContext } from './hooks/UNSAFE_useFormFieldContext.js';
+import { useTranslationBundle } from './hooks/UNSAFE_useTranslationBundle.js';
+import { LabelValueLayout } from './UNSAFE_LabelValueLayout.js';
+import { Fragment } from 'preact';
+import { Flex } from './UNSAFE_Flex.js';
+import { useTextFieldInputHandlers } from './hooks/UNSAFE_useTextFieldInputHandlers.js';
+import { useDebounce } from './hooks/UNSAFE_useDebounce.js';
+import { LiveRegion } from './UNSAFE_LiveRegion.js';
+import 'preact/hooks';
+import './keys-fed67954.js';
+import './_curry1-d822c6e1.js';
+import './_has-c4aaaf43.js';
+import './_curry3-ddab9fe1.js';
+import './_curry2-50442f66.js';
+import './UNSAFE_Environment.js';
+import './UNSAFE_Layer.js';
+import 'preact/compat';
+import './utils/UNSAFE_size.js';
+import './utils/UNSAFE_interpolations/dimensions.js';
+import './utils/UNSAFE_arrayUtils.js';
+import './utils/UNSAFE_interpolations/boxalignment.js';
+import './utils/UNSAFE_interpolations/flexbox.js';
+import './utils/UNSAFE_interpolations/flexitem.js';
+import './utils/PRIVATE_clientHints.js';
+
+const rootStyles$1 = {
+  base: "_5a00qs",
+  labelInside: "_34ehp3"
+};
+const getFormControlClasses = hasInsideLabel => {
+  return classNames([rootStyles$1.base, hasInsideLabel && rootStyles$1.labelInside]);
+};
+const getLoadingAriaLabel = () => {
+  const translations = useTranslationBundle('@oracle/oraclejet-preact');
+  return translations.formControl_loading();
+};
+
+// and the textarea, so the the textarea's focus outline doesn't get truncated.
+// The 0.25rem is an aesthetically pleasing amount of margin to make the readonly
+// focus ring visible.
+
+const borderToTextAreaContentMargin = '0.25rem';
+const readOnlyTextFieldStyles = {
+  base: "rdmqal",
+  textareaBase: "_1fok269",
+  inEnabledFormBase: "_1gu5ze7",
+  textareaInEnabledFormBase: "_1dnwxag",
+  inEnabledFormLabelInside: "sz7707",
+  textareaInEnabledFormLabelInside: "z718av",
+  inEnabledFormNoLabelInside: "_1ifsi4m",
+  // don't apply this for textarea
+  inEnabledFormNoStartContent: "_14ohdw3"
+};
+function ReadonlyTextFieldInput(_a) {
+  var {
+    ariaDescribedBy,
+    ariaLabel,
+    ariaLabelledBy,
+    autoFocus,
+    as = 'div',
+    elementRef,
+    hasInsideLabel = false,
+    inlineUserAssistance,
+    innerReadonlyField,
+    rows,
+    type,
+    value = '',
+    variant
+  } = _a,
+      props = __rest(_a, ["ariaDescribedBy", "ariaLabel", "ariaLabelledBy", "autoFocus", "as", "elementRef", "hasInsideLabel", "inlineUserAssistance", "innerReadonlyField", "rows", "type", "value", "variant"]);
+
+  const {
+    isFormLayout,
+    isReadonly: isReadonlyForm
+  } = useFormContext();
+  const {
+    isLoading
+  } = useFormFieldContext();
+  const ariaLabelForReadonly = isLoading ? getLoadingAriaLabel() : ariaLabel; // get classes for text align
+
+  const interpolations = [...Object.values(textInterpolations)];
+  const styleInterpolations = mergeInterpolations(interpolations);
+  const {
+    class: styleInterpolationClasses
+  } = styleInterpolations(props);
+  const readonlyDivClasses = classNames([as !== 'textarea' && 'oj-c-hide-scrollbar', readOnlyTextFieldStyles.base, as === 'textarea' && readOnlyTextFieldStyles.textareaBase, isFormLayout && !isReadonlyForm && readOnlyTextFieldStyles.inEnabledFormBase, variant === 'textarea' && isFormLayout && !isReadonlyForm && readOnlyTextFieldStyles.textareaInEnabledFormBase, isFormLayout && !isReadonlyForm && (hasInsideLabel ? readOnlyTextFieldStyles.inEnabledFormLabelInside : readOnlyTextFieldStyles.inEnabledFormNoLabelInside), variant === 'textarea' && isFormLayout && !isReadonlyForm && hasInsideLabel && readOnlyTextFieldStyles.textareaInEnabledFormLabelInside, variant !== 'textarea' && // not for textarea
+  isFormLayout && !isReadonlyForm && readOnlyTextFieldStyles.inEnabledFormNoStartContent, styleInterpolationClasses]); // JET-52914 - Implement Tabbable mode API contract in InputText
+  // spread tabbableModeProps on component
+
+  const {
+    isTabbable,
+    tabbableModeProps
+  } = useTabbableMode();
+
+  if (as === 'input') {
+    return jsx("input", Object.assign({
+      "aria-describedby": ariaDescribedBy,
+      "aria-label": ariaLabelForReadonly,
+      "aria-labelledby": ariaLabelledBy,
+      autofocus: autoFocus,
+      class: readonlyDivClasses,
+      readonly: true,
+      // @ts-ignore
+      ref: elementRef,
+      type: type,
+      value: value
+    }, !isTabbable && tabbableModeProps));
+  }
+
+  if (as === 'textarea') {
+    return jsx("textarea", Object.assign({
+      "aria-describedby": ariaDescribedBy,
+      "aria-label": ariaLabelForReadonly,
+      "aria-labelledby": ariaLabelledBy,
+      autofocus: autoFocus,
+      class: readonlyDivClasses,
+      readonly: true,
+      // @ts-ignore
+      ref: elementRef,
+      rows: rows
+    }, !isTabbable && tabbableModeProps, {
+      children: value
+    }));
+  }
+
+  return jsx("div", Object.assign({
+    "aria-describedby": ariaDescribedBy,
+    "aria-label": ariaLabelForReadonly,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-readonly": true,
+    autofocus: autoFocus,
+    class: readonlyDivClasses,
+    // @ts-ignore
+    ref: elementRef,
+    role: "textbox"
+  }, tabbableModeProps, {
+    children: value
+  }));
+}
+
+const textFieldStyles = {
+  base: "_26oagt",
+  embedded: "_1rdb3dy",
+  nonReadonly: "_18gyuii"
+};
+const readonlyStyles = {
+  base: "vqexrv",
+  insideEnabledForm: "_1uu5gwf",
+  textarea: "_13ing0z",
+  insideEnabledFormLabelInside: "_1x1qb40",
+  notInsideEnabledForm: "_5xm0pk",
+  textareaNotInsideEnabledForm: "hwou6m"
+}; //Consolidating all loading styles on form elements here
+
+const loadingStyles = "_1ersoug";
+const getTextFieldClasses = (readonly, variant) => {
+  return classNames([textFieldStyles.base, variant === 'embedded' && textFieldStyles.embedded, !readonly && textFieldStyles.nonReadonly]);
+};
+const getReadonlyClasses = (isInsideNonReadonlyForm, hasInsideLabel, variant) => {
+  const classes = classNames([readonlyStyles.base, variant === 'textarea' && readonlyStyles.textarea, isInsideNonReadonlyForm ? readonlyStyles.insideEnabledForm : readonlyStyles.notInsideEnabledForm, variant === 'textarea' && !isInsideNonReadonlyForm && readonlyStyles.textareaNotInsideEnabledForm, isInsideNonReadonlyForm && hasInsideLabel && readonlyStyles.insideEnabledFormLabelInside]);
+  return classes;
+};
+const getInputId = id => {
+  return (id !== null && id !== void 0 ? id : '') + '|input';
+};
+const isInputPlaceholderShown = (hasInsideLabel, hasValue, isFocused) => {
+  return !(hasInsideLabel && !hasValue && !isFocused);
+};
+
+const StartTopLabelReadonlyTextField = (_a) => {
+    var { outerClassNames, innerClassNames, label, labelEdge, labelStartWidth, inlineUserAssistance, children } = _a, props = __rest(_a, ["outerClassNames", "innerClassNames", "label", "labelEdge", "labelStartWidth", "inlineUserAssistance", "children"]);
+    return (jsxs("div", Object.assign({}, props, { class: outerClassNames }, { children: [jsx(LabelValueLayout, Object.assign({ label: label, labelEdge: labelEdge, labelStartWidth: labelStartWidth }, { children: jsx("div", Object.assign({ class: innerClassNames }, { children: children })) })), inlineUserAssistance] })));
+};
+const InsideLabelReadonlyTextField = (_a) => {
+    var { outerClassNames, innerClassNames, inlineUserAssistance, children } = _a, props = __rest(_a, ["outerClassNames", "innerClassNames", "inlineUserAssistance", "children"]);
+    return (jsxs("div", Object.assign({}, props, { class: outerClassNames }, { children: [jsx("div", Object.assign({ class: innerClassNames }, { children: children })), inlineUserAssistance] })));
+};
+const ReadonlyTextField = (_a) => {
+    var { label, labelEdge, children, variant } = _a, props = __rest(_a, ["label", "labelEdge", "children", "variant"]);
+    const { isFormLayout, isReadonly: isReadonlyForm } = useFormContext();
+    const { isLoading } = useFormFieldContext();
+    const hasInsideLabel = label !== undefined && labelEdge === 'inside';
+    // TODO: We need to re-evaluate how we use CSS multi-classing to our VDOM components
+    const formControlClassNames = getFormControlClasses(hasInsideLabel);
+    const textFieldClassNames = getTextFieldClasses(true);
+    const readonlyClassNames = getReadonlyClasses(isFormLayout && !isReadonlyForm, hasInsideLabel, variant);
+    const outerClassNames = classNames([formControlClassNames, textFieldClassNames]);
+    const innerClassNames = classNames([readonlyClassNames, isLoading && loadingStyles]);
+    if (label !== undefined && (labelEdge === 'start' || labelEdge === 'top')) {
+        return (jsx(StartTopLabelReadonlyTextField, Object.assign({ outerClassNames: outerClassNames, innerClassNames: innerClassNames, label: label, labelEdge: labelEdge }, props, { children: children })));
+    }
+    return (jsxs(InsideLabelReadonlyTextField, Object.assign({ outerClassNames: outerClassNames, innerClassNames: innerClassNames }, props, { children: [label, children] })));
+};
+
+const ojButtonHeight = '2.75rem'; // TODO: replace this with var(--oj-button-sm-height) once it is available
+
+const ojButtonSmHeight = '2.25rem'; // TODO: replace this with var(--oj-button-icon-size) once it is available
+
+const ojButtonIconSize = 'var(--oj-c-PRIVATE-DO-NOT-USE-core-icon-size-lg)'; // TODO: replace this with var(--oj-button-sm-icon-size) once it is available
+
+const ojButtonSmIconSize = '1.25rem';
+const textFieldContainerStyles = {
+  base: "det9ub",
+  defaultStyles: "_10l45p8",
+  embeddedStyles: "_81yn28",
+  showBorder: "pyffk3",
+  textarea: "_1egpftc",
+  labelInside: "qn5u5i",
+  focused: "q9tjek",
+  resize: {
+    both: "_1ah0dki",
+    horizontal: "_17wpxs9",
+    vertical: "_3ow5tv"
+  },
+  disabled: "_15erq37",
+  error: "_2oxd7i",
+  warning: "_1dw1ebd"
+};
+const textFieldStartContentStyles = {
+  base: "omi59k",
+  labelInside: "_1xr8wym",
+  disabled: "_8fnkz1"
+};
+const textFieldMiddleStyles = {
+  base: "_5lp408",
+  textarea: "_18vu5w9"
+};
+const textFieldEndContentStyles = {
+  base: "ncw71a",
+  labelInside: "_1u46a75"
+}; // Renders the oj-text-field-container dom which includes the
+// start, middle (where the inside label and inputElem goes),
+// and end pieces of the form component.
+// This does not include user assistance because that is rendered outside the
+// oj-text-field-container; that is rendered in the TextField component.
+
+const TextFieldContent = ({
+  contentVariant = 'input',
+  insideLabel,
+  mainContent,
+  startContent,
+  statusVariant = 'none',
+  styleVariant = 'default',
+  endContent,
+  resize,
+  rootRef
+}) => {
+  const {
+    isDisabled,
+    isFocused,
+    isLoading
+  } = useFormFieldContext();
+  const rootStyles = classNames([textFieldContainerStyles.base, styleVariant === 'embedded' ? classNames([textFieldContainerStyles.embeddedStyles, statusVariant !== 'none' && textFieldContainerStyles.showBorder]) : classNames([textFieldContainerStyles.defaultStyles, textFieldContainerStyles.showBorder, insideLabel !== undefined && textFieldContainerStyles.labelInside, isFocused && textFieldContainerStyles.focused, contentVariant === 'textarea' && textFieldContainerStyles.textarea]), resize && textFieldContainerStyles.resize[resize], isDisabled ? textFieldContainerStyles.disabled : classNames([statusVariant === 'error' && textFieldContainerStyles.error, statusVariant === 'warning' && textFieldContainerStyles.warning, // TODO: don't use class names: https://jira.oraclecorp.com/jira/browse/JET-50572
+  statusVariant !== 'none' && `oj-c-text-field-${statusVariant}`]), isLoading && loadingStyles]);
+  const startContentStyles = classNames([textFieldStartContentStyles.base, insideLabel != undefined && textFieldStartContentStyles.labelInside, isDisabled && textFieldStartContentStyles.disabled]);
+  const middleStyles = classNames([textFieldMiddleStyles.base, contentVariant === 'textarea' && textFieldMiddleStyles.textarea // getMiddleContentVariantStyles(variant)
+  ]);
+  const endContentStyles = classNames([textFieldEndContentStyles.base, insideLabel != undefined && textFieldEndContentStyles.labelInside]);
+  return jsxs("div", Object.assign({
+    role: "presentation",
+    class: rootStyles,
+    ref: rootRef
+  }, {
+    children: [startContent && jsx("span", Object.assign({
+      class: startContentStyles
+    }, {
+      children: jsx(Flex, Object.assign({
+        justify: "center",
+        align: "center",
+        hasZeroMargins: true
+      }, {
+        children: startContent
+      }))
+    })), jsxs("div", Object.assign({
+      class: middleStyles
+    }, {
+      children: [insideLabel, mainContent]
+    })), endContent && jsx("span", Object.assign({
+      class: endContentStyles
+    }, {
+      children: jsx(Flex, Object.assign({
+        justify: "center",
+        align: "center",
+        hasZeroMargins: true
+      }, {
+        children: endContent
+      }))
+    }))]
+  }));
+};
+
+const StyledTextField = (_a) => {
+    var { hasInsideLabel = false, variant = 'default' } = _a, props = __rest(_a, ["hasInsideLabel", "variant"]);
+    const { isReadonly } = useFormFieldContext();
+    // TODO: We need to re-evaluate how we use CSS multi-classing to our VDOM components
+    const formControlClassNames = getFormControlClasses(hasInsideLabel);
+    const textFieldClassNames = getTextFieldClasses(isReadonly, variant);
+    const cssClassNames = classNames([formControlClassNames, textFieldClassNames]);
+    return jsx("div", Object.assign({}, props, { class: cssClassNames }));
+};
+
+// TODO: Do we need named props for start/endContent, or could they just be children that get
+// wrapped in a flex layout?  (from review on 3/8/22)
+// TODO: Instead of passing the inputElem, label, and userAssistance as named props here, should we
+// have a separate layout component that lays them out, which could just be passed as a child
+// to the TextField?  (from review on 3/8/22)
+const TextField = ({ contentVariant, id, endContent, mainContent, startContent, inlineUserAssistance, label, labelEdge, labelStartWidth, mainFieldRef, resize, statusVariant, styleVariant, onFocus, onBlur, onKeyDown, onMouseDown, onMouseEnter, onMouseLeave }) => {
+    // TODO: What are the implications for interoperability between new preact-based form components
+    // and the existing JET oj-form-layout?  The preact form components create their own start/top
+    // labels, while oj-form-layout expects to create those itself and wire them to the existing form
+    // components through attributes like labelled-by.  (from review on 3/8/22)
+    // TODO: How should a parent form component render component-specific content within TextField,
+    // for example an aria live region?  Instead of a children prop on TextField, could the parent
+    // component pass comp-specific content through other props, like inputElem?   The parent could
+    // have its own component that composes inputElem with additional DOM.  (from review on 3/8/22)
+    const styledTextFieldChildren = label !== undefined && (labelEdge === 'start' || labelEdge === 'top') ? (jsx(LabelValueLayout, Object.assign({ label: label, labelEdge: labelEdge, labelStartWidth: labelStartWidth }, { children: jsxs(Fragment, { children: [jsx(TextFieldContent, { contentVariant: contentVariant, endContent: endContent, mainContent: mainContent, resize: resize, rootRef: mainFieldRef, startContent: startContent, statusVariant: statusVariant, styleVariant: styleVariant }), inlineUserAssistance] }) }))) : (jsxs(Fragment, { children: [jsx(TextFieldContent, { contentVariant: contentVariant, endContent: endContent, insideLabel: label, mainContent: mainContent, resize: resize, rootRef: mainFieldRef, startContent: startContent, statusVariant: statusVariant, styleVariant: styleVariant }), inlineUserAssistance] }));
+    return (jsx(StyledTextField, Object.assign({ id: id, hasInsideLabel: label !== undefined && labelEdge === 'inside', onfocusin: onFocus, onfocusout: onBlur, onKeyDown: onKeyDown, onMouseDown: onMouseDown, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, variant: styleVariant }, { children: styledTextFieldChildren })));
+};
+
+const rootStyles = {
+  base: "bhevm3",
+  // removes margin that Safari adds to the input element
+  input: "uu0f32",
+  textarea: "_1t19egz",
+  password: "b1zw3f",
+  labelDefaultPadding: "_1044jte",
+  labelInsideBase: "_159prr2",
+  textareaLabelInsideBase: "_1ro83mz",
+  labelInsideNoValueAndHasFocus: "_1h707rr",
+  hasStartContent: "_18tgpv1",
+  hasEndContent: "qkdz89",
+  defaultColor: "j33b9e",
+  disabledColor: "_78ya9k",
+  // The 0.25em is the space between the prefix and the input. This is equivalent to ' '.
+  hasPrefix: "eauwz",
+  hasSuffix: "_1vuxiib",
+  default: "ozk4fw",
+  defaultPaddingStart: "_1nan9oo",
+  defaultPaddingEnd: "_16z8r7",
+  embedded: "_1dhjix1"
+};
+const interpolations = [...Object.values(textInterpolations)];
+const styleInterpolations = mergeInterpolations(interpolations);
+const TextFieldInput = _a => {
+  var {
+    as = 'input',
+    ariaAutoComplete,
+    ariaControls,
+    ariaDescribedBy,
+    ariaExpanded,
+    ariaInvalid,
+    ariaLabel,
+    ariaLabelledBy,
+    ariaValueMax,
+    ariaValueMin,
+    ariaValueNow,
+    ariaValueText,
+    autoComplete,
+    autoFocus,
+    currentCommitValue,
+    hasEndContent = false,
+    hasInsideLabel = false,
+    hasPrefix = false,
+    hasStartContent = false,
+    hasSuffix = false,
+    id,
+    inputRef,
+    placeholder,
+    isRequired,
+    role,
+    rows,
+    spellcheck,
+    type,
+    value = '',
+    variant = 'default',
+    onInput,
+    onCommit,
+    onKeyDown,
+    onKeyUp
+  } = _a,
+      props = __rest(_a, ["as", "ariaAutoComplete", "ariaControls", "ariaDescribedBy", "ariaExpanded", "ariaInvalid", "ariaLabel", "ariaLabelledBy", "ariaValueMax", "ariaValueMin", "ariaValueNow", "ariaValueText", "autoComplete", "autoFocus", "currentCommitValue", "hasEndContent", "hasInsideLabel", "hasPrefix", "hasStartContent", "hasSuffix", "id", "inputRef", "placeholder", "isRequired", "role", "rows", "spellcheck", "type", "value", "variant", "onInput", "onCommit", "onKeyDown", "onKeyUp"]);
+
+  const hasValue = value !== '';
+  const {
+    isDisabled,
+    isFocused,
+    isLoading,
+    isReadonly
+  } = useFormFieldContext();
+  const myPlaceholder = isInputPlaceholderShown(hasInsideLabel, hasValue, isFocused) ? placeholder : undefined;
+  const {
+    class: styleInterpolationClasses
+  } = styleInterpolations(props);
+  const renderPrefix = !isDisabled && hasPrefix;
+  const renderSuffix = !isDisabled && hasSuffix;
+  const inputClasses = classNames(['oj-c-text-field-input', rootStyles.base, variant === 'default' ? classNames([rootStyles.default, as === 'textarea' && rootStyles.textarea, as === 'input' && rootStyles.input, type === 'password' && rootStyles.password, !hasStartContent && !renderPrefix && rootStyles.defaultPaddingStart, !hasEndContent && !renderSuffix && rootStyles.defaultPaddingEnd]) : rootStyles.embedded, hasInsideLabel && classNames([rootStyles.labelInsideBase, as === 'textarea' && rootStyles.textareaLabelInsideBase, !hasValue && isFocused && rootStyles.labelInsideNoValueAndHasFocus]), !hasInsideLabel && as !== 'textarea' && rootStyles.labelDefaultPadding, // We want the input to have padding on itself. This gives the user more space to click on to set focus to the input.
+  // The padding between the input and the icon is different than the padding between the input and prefix/suffix (since they are both text)
+  // startcontentpadding+input+endcontentpadding
+  hasStartContent && !hasPrefix && rootStyles.hasStartContent, hasEndContent && !hasSuffix && rootStyles.hasEndContent, isDisabled ? rootStyles.disabledColor : rootStyles.defaultColor, // prefix+prefixpadding+input+suffixpadding+suffix
+  // if there is also a startcontent or end content,
+  // the prefix/suffix will have that padding on it (see PrefixSuffix)
+  renderPrefix && rootStyles.hasPrefix, renderSuffix && rootStyles.hasSuffix, styleInterpolationClasses]);
+  const Comp = as || 'input';
+  const handlers = useTextFieldInputHandlers({
+    currentCommitValue,
+    value,
+    onInput,
+    onCommit,
+    onKeyDown
+  }); // the implicit default for tabindex on an input is 0, so do not explicitly set it.
+  // JET-52914 - Implement Tabbable mode API contract in InputText
+  // if not tabbable, spread tabbableModeProps on component
+
+  const {
+    isTabbable,
+    tabbableModeProps
+  } = useTabbableMode(); // TODO: for autoComplete='off', need to configure attrs appropriately to make sure it
+  // works across browsers and versions  (from review on 3/11/22)
+
+  return jsx(Comp, Object.assign({
+    "aria-autocomplete": ariaAutoComplete,
+    "aria-controls": ariaControls,
+    "aria-describedby": ariaDescribedBy,
+    "aria-expanded": ariaExpanded,
+    "aria-invalid": ariaInvalid,
+    "aria-label": isLoading ? getLoadingAriaLabel() : ariaLabel ? ariaLabel : undefined,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-required": isRequired ? true : undefined,
+    "aria-valuemax": ariaValueMax,
+    "aria-valuemin": ariaValueMin,
+    "aria-valuenow": ariaValueNow,
+    "aria-valuetext": ariaValueText,
+    autocomplete: autoComplete,
+    autofocus: autoFocus,
+    class: inputClasses,
+    disabled: isDisabled,
+    id: id,
+    onKeyUp: onKeyUp,
+    placeholder: myPlaceholder,
+    readonly: isReadonly,
+    // @ts-ignore
+    ref: inputRef,
+    role: role,
+    rows: rows,
+    spellcheck: spellcheck,
+    type: type,
+    value: value
+  }, handlers, !isTabbable && tabbableModeProps));
+};
+
+const MAX_LENGTH_UPDATE_DELAY = 500;
+function MaxLengthLiveRegion({ isMaxLengthExceeded, maxLength, valueLength = 0 }) {
+    // Comment copied from InputBase.js in Big JET:
+    // Only update the aria-live div when the user has paused for more than
+    // 500 milliseconds. That way, we avoid queued up aria-live messages which
+    // would be annoying and not helpful. The 500ms was agreed upon in the
+    // accessibility review meeting.
+    const debouncedRemainingChars = useDebounce(maxLength - valueLength, MAX_LENGTH_UPDATE_DELAY);
+    const translations = useTranslationBundle('@oracle/oraclejet-preact');
+    const maxLengthExceededTranslatedString = translations.formControl_maxLengthExceeded({
+        MAX_LENGTH: `${maxLength}`
+    });
+    const remainingCharsTranslatedString = translations.formControl_maxLengthRemaining({
+        CHARACTER_COUNT: `${debouncedRemainingChars}`
+    });
+    return (jsxs(Fragment, { children: [jsx(LiveRegion, { children: remainingCharsTranslatedString }), isMaxLengthExceeded && (jsx(LiveRegion, Object.assign({ type: "assertive" }, { children: maxLengthExceededTranslatedString })))] }));
+}
+
+/**
+ * @license
+ * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.
+ * The Universal Permissive License (UPL), Version 1.0
+ * as shown at https://oss.oracle.com/licenses/upl/
+ * @ignore
+ */
+
+export { MaxLengthLiveRegion, ReadonlyTextField, ReadonlyTextFieldInput, TextField, TextFieldInput, getInputId };
+/*  */
+//# sourceMappingURL=UNSAFE_TextField.js.map

package/es/UNSAFE_TextField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UNSAFE_TextField.js","sources":["../../src/UNSAFE_TextField/FormControlUtils.ts","../../src/UNSAFE_TextField/ReadonlyTextFieldInput.tsx","../../src/UNSAFE_TextField/TextFieldUtils.ts","../../src/UNSAFE_TextField/ReadonlyTextField.tsx","../../src/UNSAFE_TextField/TextFieldContent.tsx","../../src/UNSAFE_TextField/StyledTextField.tsx","../../src/UNSAFE_TextField/TextField.tsx","../../src/UNSAFE_TextField/TextFieldInput.tsx","../../src/UNSAFE_TextField/MaxLengthLiveRegion.tsx","../../src/UNSAFE_TextField/index.ts"],"sourcesContent":["import { classNames } from '../utils/UNSAFE_classNames';\nimport { cssProps } from '@oracle/oraclejet-cssprops';\nimport { useTranslationBundle } from '../hooks/UNSAFE_useTranslationBundle';\nimport { BundleType } from '../resources/nls/bundle';\n\nconst rootStyles = {\n  base: cssProps`${{\n    verticalAlign: 'top'\n  }}`,\n\n  labelInside: cssProps`${{\n    maxWidth: '100%'\n  }}`\n};\n\nexport const getFormControlClasses = (hasInsideLabel?: boolean) => {\n  return classNames([rootStyles.base, hasInsideLabel && rootStyles.labelInside]);\n};\n\nexport const getLoadingAriaLabel = () => {\n  const translations = useTranslationBundle<BundleType>('@oracle/oraclejet-preact');\n  return translations.formControl_loading();\n};\n","import { ComponentChildren, Ref } from 'preact';\nimport { useFormContext } from '../hooks/UNSAFE_useFormContext';\nimport { useTabbableMode } from '../hooks/UNSAFE_useTabbableMode';\nimport { cssProps } from '@oracle/oraclejet-cssprops';\nimport { classNames } from '../utils/UNSAFE_classNames';\nimport { textInterpolations } from '../utils/UNSAFE_interpolations/text';\nimport type { TextProps } from '../utils/UNSAFE_interpolations/text';\nimport { mergeInterpolations } from '../utils/UNSAFE_mergeInterpolations';\nimport { useFormFieldContext } from '../hooks/UNSAFE_useFormFieldContext';\nimport { getLoadingAriaLabel } from './FormControlUtils';\nimport { HTMLAttributesSignalExcluded } from '../utils/UNSAFE_attributeUtils';\n\ntype AutoFocusProp = HTMLAttributesSignalExcluded<HTMLInputElement>['autofocus'];\n\ntype ReadonlyAsInputProps = {\n  as: 'input';\n  type: HTMLAttributesSignalExcluded<HTMLInputElement>['type'];\n  elementRef?: Ref<HTMLInputElement>;\n  rows?: never;\n};\n\ntype ReadonlyAsTextAreaProps = {\n  as: 'textarea';\n  elementRef?: Ref<HTMLTextAreaElement | HTMLDivElement>;\n  type?: never;\n  rows?: number;\n};\n\ntype ReadonlyAsDivProps = {\n  as?: 'div';\n  elementRef?: Ref<HTMLTextAreaElement | HTMLDivElement>;\n  type?: never;\n  rows?: never;\n};\n\ntype Props = TextProps &\n  (ReadonlyAsDivProps | ReadonlyAsInputProps | ReadonlyAsTextAreaProps) & {\n    ariaDescribedBy?: string;\n    ariaLabel?: string;\n    ariaLabelledBy?: string;\n    autoFocus?: AutoFocusProp;\n    hasInsideLabel?: boolean;\n    inlineUserAssistance?: ComponentChildren;\n    innerReadonlyField?: ComponentChildren;\n    value?: string;\n    variant?: 'textarea';\n  };\n\n// In readonly textarea, we need some margin between the border container element\n// and the textarea, so the the textarea's focus outline doesn't get truncated.\n// The 0.25rem is an aesthetically pleasing amount of margin to make the readonly\n// focus ring visible.\nconst borderToTextAreaContentMargin = '0.25rem';\n\nconst readOnlyTextFieldStyles = {\n  base: cssProps`${{\n    minHeight:\n      'calc(var(--oj-c-PRIVATE-DO-NOT-USE-typography-body-md-line-height) * var(--oj-c-PRIVATE-DO-NOT-USE-typography-body-md-font-size))',\n    // TODO: Use Text component instead of CSS\n    wordBreak: 'break-word',\n    whiteSpace: 'pre-wrap',\n    // TODO: Cleanup the border and background CSS\n    backgroundColor: 'transparent',\n    borderColor: 'transparent',\n    borderWidth: '0',\n    color: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-text-color-primary)',\n    boxSizing: 'border-box',\n    // TODO: Use the Flex component instead of CSS\n    display: 'flex',\n    flexDirection: 'column',\n    width: '100%',\n    fontFamily: 'inherit',\n    fontSize: '100%',\n    fontWeight: 'inherit',\n    lineHeight: 'inherit',\n    outlineWidth: '0',\n\n    '&:focus': {\n      outlineStyle: 'dotted',\n      outlineWidth: '1px',\n      outlineColor: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-focus-border-color)',\n      outlineOffset: '1px'\n    }\n  }}`,\n  textareaBase: cssProps`${{\n    resize: 'none',\n    paddingBlockStart: '0',\n    paddingInlineStart: '0'\n  }}`,\n  inEnabledFormBase: cssProps`${{\n    whiteSpace: 'nowrap',\n    overflowX: 'scroll',\n    overflowY: 'hidden',\n    scrollbarWidth: 'none'\n  }}`,\n\n  textareaInEnabledFormBase: cssProps`${{\n    marginTop:\n      'calc((var(--oj-c-PRIVATE-DO-NOT-USE-text-field-height) - 1rem * var(--oj-c-PRIVATE-DO-NOT-USE-typography-body-md-line-height))/ 2 - 1px)',\n    marginBottom:\n      'calc((var(--oj-c-PRIVATE-DO-NOT-USE-text-field-height) - 1rem * var(--oj-c-PRIVATE-DO-NOT-USE-typography-body-md-line-height))/ 2 - 1px)',\n    marginLeft: borderToTextAreaContentMargin,\n    marginRight: borderToTextAreaContentMargin,\n    paddingLeft: `calc(var(--oj-c-PRIVATE-DO-NOT-USE-text-field-text-to-edge-padding) - ${borderToTextAreaContentMargin})`,\n    paddingRight: '0',\n    overflowX: 'auto',\n    overflowY: 'auto',\n    whiteSpace: 'pre-wrap'\n  }}`,\n\n  inEnabledFormLabelInside: cssProps`${{\n    // TODO: Look into why we need this hacky CSS\n    marginTop:\n      'calc(var(--oj-c-PRIVATE-DO-NOT-USE-text-field-inside-edge-padding-top) + 0.1875rem)',\n    paddingTop: '0',\n    minHeight:\n      'calc(var(--oj-c-PRIVATE-DO-NOT-USE-typography-body-md-line-height) * var(--oj-c-PRIVATE-DO-NOT-USE-typography-body-md-font-size))'\n  }}`,\n\n  textareaInEnabledFormLabelInside: cssProps`${{\n    paddingTop: 0,\n    paddingBottom: 0,\n    // We are using a transparent border here instead of padding, due to how textarea scrolls the padding off the screen\n    // and the text content will clash with the inside label.\n    borderColor: 'transparent',\n    borderStyle: 'solid',\n    marginTop:\n      'calc(var(--oj-c-PRIVATE-DO-NOT-USE-label-inside-edge-font-size) * var(--oj-c-PRIVATE-DO-NOT-USE-label-inside-edge-line-height) + var(--oj-c-PRIVATE-DO-NOT-USE-label-inside-edge-position-top))',\n    marginBottom: borderToTextAreaContentMargin\n  }}`,\n\n  inEnabledFormNoLabelInside: cssProps`${{\n    // TODO: Remove if this is not needed.\n    justifyContent: 'center'\n  }}`,\n\n  // don't apply this for textarea\n  inEnabledFormNoStartContent: cssProps`${{\n    marginLeft: 'var(--oj-c-PRIVATE-DO-NOT-USE-text-field-text-to-edge-padding)',\n    marginRight: 'var(--oj-c-PRIVATE-DO-NOT-USE-text-field-text-to-edge-padding)',\n    paddingLeft: '0',\n    paddingRight: '0'\n  }}`\n};\n\nexport function ReadonlyTextFieldInput({\n  ariaDescribedBy,\n  ariaLabel,\n  ariaLabelledBy,\n  autoFocus,\n  as = 'div',\n  elementRef,\n  hasInsideLabel = false,\n  inlineUserAssistance,\n  innerReadonlyField,\n  rows,\n  type,\n  value = '',\n  variant,\n  ...props\n}: Props) {\n  const { isFormLayout, isReadonly: isReadonlyForm } = useFormContext();\n  const { isLoading } = useFormFieldContext();\n  const ariaLabelForReadonly = isLoading ? getLoadingAriaLabel() : ariaLabel;\n\n  // get classes for text align\n  const interpolations = [...Object.values(textInterpolations)];\n  const styleInterpolations = mergeInterpolations<Props>(interpolations);\n  const { class: styleInterpolationClasses } = styleInterpolations(props);\n\n  const readonlyDivClasses = classNames([\n    as !== 'textarea' && 'oj-c-hide-scrollbar', // TODO: Temp workaround for using --webkit-scrollbar to hide the scrollbar\n    readOnlyTextFieldStyles.base,\n    as === 'textarea' && readOnlyTextFieldStyles.textareaBase,\n    isFormLayout && !isReadonlyForm && readOnlyTextFieldStyles.inEnabledFormBase,\n    variant === 'textarea' &&\n      isFormLayout &&\n      !isReadonlyForm &&\n      readOnlyTextFieldStyles.textareaInEnabledFormBase,\n    isFormLayout &&\n      !isReadonlyForm &&\n      (hasInsideLabel\n        ? readOnlyTextFieldStyles.inEnabledFormLabelInside\n        : readOnlyTextFieldStyles.inEnabledFormNoLabelInside),\n    variant === 'textarea' &&\n      isFormLayout &&\n      !isReadonlyForm &&\n      hasInsideLabel &&\n      readOnlyTextFieldStyles.textareaInEnabledFormLabelInside,\n    variant !== 'textarea' && // not for textarea\n      isFormLayout &&\n      !isReadonlyForm &&\n      readOnlyTextFieldStyles.inEnabledFormNoStartContent,\n    styleInterpolationClasses\n  ]);\n\n  // JET-52914 - Implement Tabbable mode API contract in InputText\n  // spread tabbableModeProps on component\n  const { isTabbable, tabbableModeProps } = useTabbableMode();\n\n  if (as === 'input') {\n    return (\n      <input\n        aria-describedby={ariaDescribedBy}\n        aria-label={ariaLabelForReadonly}\n        aria-labelledby={ariaLabelledBy}\n        autofocus={autoFocus}\n        class={readonlyDivClasses}\n        readonly={true}\n        // @ts-ignore\n        ref={elementRef}\n        type={type}\n        value={value}\n        {...(!isTabbable && tabbableModeProps)}\n      />\n    );\n  }\n  if (as === 'textarea') {\n    return (\n      <textarea\n        aria-describedby={ariaDescribedBy}\n        aria-label={ariaLabelForReadonly}\n        aria-labelledby={ariaLabelledBy}\n        autofocus={autoFocus}\n        class={readonlyDivClasses}\n        readonly={true}\n        // @ts-ignore\n        ref={elementRef}\n        rows={rows}\n        {...(!isTabbable && tabbableModeProps)}>\n        {value}\n      </textarea>\n    );\n  }\n  return (\n    <div\n      aria-describedby={ariaDescribedBy}\n      aria-label={ariaLabelForReadonly}\n      aria-labelledby={ariaLabelledBy}\n      aria-readonly={true}\n      autofocus={autoFocus}\n      class={readonlyDivClasses}\n      // @ts-ignore\n      ref={elementRef}\n      role=\"textbox\"\n      {...tabbableModeProps}>\n      {value}\n    </div>\n  );\n}\n","import { classNames } from '../utils/UNSAFE_classNames';\nimport { cssProps } from '@oracle/oraclejet-cssprops';\n\nconst textFieldStyles = {\n  base: cssProps`${{\n    display: 'inline-block',\n    lineHeight: 'var(--oj-c-PRIVATE-DO-NOT-USE-typography-body-md-line-height)',\n    maxWidth: '100%',\n    width: '100%',\n    boxSizing: 'border-box'\n  }}`,\n\n  embedded: cssProps`${{\n    height: '100%'\n  }}`,\n\n  nonReadonly: cssProps`${{\n    fontWeight: '400',\n    fontSize: 'var(--oj-c-PRIVATE-DO-NOT-USE-text-field-font-size)'\n  }}`\n};\n\nconst readonlyStyles = {\n  base: cssProps`${{\n    fontWeight: 'var(--oj-form-control-font-weight-read-only)',\n    fontSize: 'var(--oj-c-PRIVATE-DO-NOT-USE-typography-body-md-font-size)',\n    position: 'relative',\n    borderStyle: 'solid',\n    transitionProperty: 'border-color',\n    transitionDuration: '0.1s',\n    transitionTimingFunction: 'linear',\n    borderRadius: 'var(--oj-c-PRIVATE-DO-NOT-USE-text-field-border-radius)',\n    flexDirection: 'row',\n    alignItems: 'center',\n    maxWidth: '100%',\n    width: '100%',\n    boxSizing: 'border-box'\n  }}`,\n\n  insideEnabledForm: cssProps`${{\n    overflowX: 'hidden',\n    overflowY: 'hidden',\n    borderWidth: 'var(--oj-c-PRIVATE-DO-NOT-USE-text-field-border-width)',\n    borderColor: 'var(--oj-c-PRIVATE-DO-NOT-USE-text-field-border-color-disabled)',\n    backgroundColor: 'transparent',\n    height: 'var(--oj-c-PRIVATE-DO-NOT-USE-text-field-height)',\n    minWidth: '1em',\n    display: 'inline-flex',\n    flex: '1'\n  }}`,\n\n  textarea: cssProps`${{\n    height: 'auto'\n  }}`,\n\n  insideEnabledFormLabelInside: cssProps`${{\n    minHeight: 'var(--oj-c-PRIVATE-DO-NOT-USE-text-field-inside-edge-height)'\n  }}`,\n\n  notInsideEnabledForm: cssProps`${{\n    overflowX: 'visible',\n    overflowY: 'visible',\n    borderWidth: '0',\n    backgroundColor: 'transparent',\n    height: 'auto'\n  }}`,\n\n  textareaNotInsideEnabledForm: cssProps`${{\n    paddingTop: '0',\n    paddingBottom: '0'\n  }}`\n};\n\n//Consolidating all loading styles on form elements here\nexport const loadingStyles = cssProps`${{\n  backgroundColor: 'var(--oj-c-PRIVATE-DO-NOT-USE-animation-skeleton-bg-end-color)',\n  backgroundSize: '200% 200%',\n  borderWidth: '0',\n  // need to use a var for the animation name because otherwise linaria will obfuscate it\n  // and make it different from the actual keyframes name\n  animationName: 'var(--oj-c-PRIVATE-DO-NOT-USE-private-preact-text-field-animation-name-skeleton)',\n  animationIterationCount: 'infinite',\n  animationDirection: 'alternate',\n  animationDuration: '1.5s',\n  opacity: '1'\n}}`;\n\nexport const getTextFieldClasses = (readonly?: boolean, variant?: 'default' | 'embedded') => {\n  return classNames([\n    textFieldStyles.base,\n    variant === 'embedded' && textFieldStyles.embedded,\n    !readonly && textFieldStyles.nonReadonly\n  ]);\n};\n\nexport const getReadonlyClasses = (\n  isInsideNonReadonlyForm?: boolean,\n  hasInsideLabel?: boolean,\n  variant?: 'textarea'\n) => {\n  const classes = classNames([\n    readonlyStyles.base,\n    variant === 'textarea' && readonlyStyles.textarea,\n    isInsideNonReadonlyForm\n      ? readonlyStyles.insideEnabledForm\n      : readonlyStyles.notInsideEnabledForm,\n    variant === 'textarea' &&\n      !isInsideNonReadonlyForm &&\n      readonlyStyles.textareaNotInsideEnabledForm,\n    isInsideNonReadonlyForm && hasInsideLabel && readonlyStyles.insideEnabledFormLabelInside\n  ]);\n  return classes;\n};\n\nexport const getInputId = (id?: string) => {\n  return (id ?? '') + '|input';\n};\n\nexport const isInputPlaceholderShown = (\n  hasInsideLabel: boolean,\n  hasValue: boolean,\n  isFocused?: boolean\n) => {\n  return !(hasInsideLabel && !hasValue && !isFocused);\n};\n","import { ComponentChildren } from 'preact';\nimport { useFormContext } from '../hooks/UNSAFE_useFormContext';\nimport { LabelValueLayout } from '../UNSAFE_LabelValueLayout';\nimport { StyledComponentProps } from '../utils/UNSAFE_typeUtils';\nimport { classNames } from '../utils/UNSAFE_classNames';\nimport { getFormControlClasses } from './FormControlUtils';\nimport { getReadonlyClasses, getTextFieldClasses, loadingStyles } from './TextFieldUtils';\nimport { useFormFieldContext } from '../hooks/UNSAFE_useFormFieldContext';\nimport { Size } from '../utils/UNSAFE_size';\nimport { HTMLAttributesSignalExcluded } from '../utils/UNSAFE_attributeUtils';\n\ntype DivProps = HTMLAttributesSignalExcluded<HTMLDivElement>;\ntype UAProps = {\n  inlineUserAssistance?: ComponentChildren;\n};\ntype InnerOuterClassNamesProps = {\n  outerClassNames?: string;\n  innerClassNames?: string;\n};\n\ntype StartTopLabelReadonlyTextFieldProps = Omit<DivProps, 'label'> &\n  UAProps &\n  InnerOuterClassNamesProps & {\n    label?: ComponentChildren;\n    labelEdge?: 'start' | 'top';\n    labelStartWidth?: Size;\n  };\n\nconst StartTopLabelReadonlyTextField = ({\n  outerClassNames,\n  innerClassNames,\n  label,\n  labelEdge,\n  labelStartWidth,\n  inlineUserAssistance,\n  children,\n  ...props\n}: StartTopLabelReadonlyTextFieldProps) => {\n  return (\n    <div {...props} class={outerClassNames}>\n      <LabelValueLayout label={label} labelEdge={labelEdge} labelStartWidth={labelStartWidth}>\n        <div class={innerClassNames}>{children}</div>\n      </LabelValueLayout>\n      {inlineUserAssistance}\n    </div>\n  );\n};\n\ntype InsideLabelReadonlyTextFieldProps = DivProps & UAProps & InnerOuterClassNamesProps;\nconst InsideLabelReadonlyTextField = ({\n  outerClassNames,\n  innerClassNames,\n  inlineUserAssistance,\n  children,\n  ...props\n}: InsideLabelReadonlyTextFieldProps) => {\n  return (\n    <div {...props} class={outerClassNames}>\n      <div class={innerClassNames}>{children}</div>\n      {inlineUserAssistance}\n    </div>\n  );\n};\n\nexport type StyleProps = UAProps & {\n  label?: ComponentChildren;\n  labelEdge?: 'inside' | 'start' | 'top';\n  variant?: 'textarea';\n};\n\ntype Props = StyledComponentProps<'div', StyleProps>;\n\nexport const ReadonlyTextField = ({ label, labelEdge, children, variant, ...props }: Props) => {\n  const { isFormLayout, isReadonly: isReadonlyForm } = useFormContext();\n  const { isLoading } = useFormFieldContext();\n  const hasInsideLabel = label !== undefined && labelEdge === 'inside';\n\n  // TODO: We need to re-evaluate how we use CSS multi-classing to our VDOM components\n  const formControlClassNames = getFormControlClasses(hasInsideLabel);\n  const textFieldClassNames = getTextFieldClasses(true);\n  const readonlyClassNames = getReadonlyClasses(\n    isFormLayout && !isReadonlyForm,\n    hasInsideLabel,\n    variant\n  );\n  const outerClassNames = classNames([formControlClassNames, textFieldClassNames]);\n  const innerClassNames = classNames([readonlyClassNames, isLoading && loadingStyles]);\n\n  if (label !== undefined && (labelEdge === 'start' || labelEdge === 'top')) {\n    return (\n      <StartTopLabelReadonlyTextField\n        outerClassNames={outerClassNames}\n        innerClassNames={innerClassNames}\n        label={label}\n        labelEdge={labelEdge}\n        {...props}>\n        {children}\n      </StartTopLabelReadonlyTextField>\n    );\n  }\n\n  return (\n    <InsideLabelReadonlyTextField\n      outerClassNames={outerClassNames}\n      innerClassNames={innerClassNames}\n      {...props}>\n      {label}\n      {children}\n    </InsideLabelReadonlyTextField>\n  );\n};\n","import { cssProps } from '@oracle/oraclejet-cssprops';\nimport { ComponentChildren, Ref } from 'preact';\nimport { useFormFieldContext } from '../hooks/UNSAFE_useFormFieldContext';\nimport { Flex } from '../UNSAFE_Flex';\nimport { classNames } from '../utils/UNSAFE_classNames';\nimport { loadingStyles } from './TextFieldUtils';\n\ntype VariantProps = {\n  contentVariant?: 'input' | 'textarea';\n  statusVariant?: 'error' | 'none' | 'warning';\n  styleVariant?: 'default' | 'embedded';\n};\n\ntype Props = VariantProps & {\n  mainContent?: ComponentChildren;\n  insideLabel?: ComponentChildren;\n  startContent?: ComponentChildren;\n  endContent?: ComponentChildren;\n  resize?: 'horizontal' | 'vertical' | 'both';\n  rootRef?: Ref<HTMLDivElement>;\n};\n\n// TODO: replace this with var(--oj-button-height) once it is available\nconst ojButtonHeight = '2.75rem';\n// TODO: replace this with var(--oj-button-sm-height) once it is available\nconst ojButtonSmHeight = '2.25rem';\n// TODO: replace this with var(--oj-button-icon-size) once it is available\nconst ojButtonIconSize = 'var(--oj-c-PRIVATE-DO-NOT-USE-core-icon-size-lg)';\n// TODO: replace this with var(--oj-button-sm-icon-size) once it is available\nconst ojButtonSmIconSize = '1.25rem';\n\nconst textFieldContainerStyles = {\n  base: cssProps`${{\n    position: 'relative',\n    boxSizing: 'border-box',\n    // TODO: Use Flex component instead of CSS\n    display: 'flex',\n    alignItems: 'center',\n    overflowX: 'hidden',\n    overflowY: 'hidden',\n    transitionProperty: 'border-color',\n    transitionDuration: '.1s',\n    transitionTimingFunction: 'linear'\n  }}`,\n  defaultStyles: cssProps`${{\n    backgroundColor: 'var(--oj-c-PRIVATE-DO-NOT-USE-text-field-bg-color)',\n    borderColor: 'var(--oj-c-PRIVATE-DO-NOT-USE-text-field-border-color)',\n    borderRadius: 'var(--oj-c-PRIVATE-DO-NOT-USE-text-field-border-radius)',\n    height: 'var(--oj-c-PRIVATE-DO-NOT-USE-text-field-height)'\n  }}`,\n  embeddedStyles: cssProps`${{\n    backgroundColor: 'inherit',\n    height: '100%',\n    width: '100%'\n  }}`,\n  showBorder: cssProps`${{\n    borderStyle: 'solid',\n    borderWidth: 'var(--oj-c-PRIVATE-DO-NOT-USE-text-field-border-width)'\n  }}`,\n  textarea: cssProps`${{\n    height: 'auto'\n  }}`,\n  labelInside: cssProps`${{\n    minHeight: 'var(--oj-c-PRIVATE-DO-NOT-USE-text-field-inside-edge-height)'\n  }}`,\n  focused: cssProps`${{\n    borderColor: 'var(--oj-c-PRIVATE-DO-NOT-USE-text-field-border-color-focus)',\n    boxShadow: 'var(--oj-c-PRIVATE-DO-NOT-USE-text-field-box-shadow-focus)'\n  }}`,\n  resize: {\n    both: cssProps`${{\n      resize: 'both'\n    }}`,\n    horizontal: cssProps`${{\n      resize: 'horizontal'\n    }}`,\n    vertical: cssProps`${{\n      resize: 'vertical'\n    }}`\n  },\n  disabled: cssProps`${{\n    backgroundColor: 'var(--oj-c-PRIVATE-DO-NOT-USE-text-field-bg-color-disabled)',\n    borderColor: 'var(--oj-c-PRIVATE-DO-NOT-USE-text-field-border-color-disabled)'\n  }}`,\n  error: cssProps`${{\n    borderColor: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-danger-3)'\n  }}`,\n  warning: cssProps`${{\n    borderColor: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-warning-3)'\n  }}`\n};\n\nconst textFieldStartContentStyles = {\n  base: cssProps`${{\n    marginInlineStart: 'var(--oj-c-PRIVATE-DO-NOT-USE-text-field-icon-to-edge-padding)',\n    fontSize: ojButtonSmIconSize\n  }}`,\n  labelInside: cssProps`${{\n    fontSize: ojButtonIconSize\n  }}`,\n  disabled: cssProps`${{\n    color: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-text-color-disabled)'\n  }}`\n};\n\nconst textFieldMiddleStyles = {\n  base: cssProps`${{\n    position: 'relative',\n    // TODO: Use Flex component instead of CSS\n    display: 'inline-flex',\n    flex: 1,\n    width: '100%',\n    height: '100%',\n    boxSizing: 'border-box'\n  }}`,\n  textarea: cssProps`${{\n    // The 1px is needed to make sure that the textarea element's scrollbar doesn't overlap the focus drop shadow\n    paddingInlineEnd: '1px',\n    // flexDirection 'column' is used to layout out the remaining counter below the textarea.\n    flexDirection: 'column'\n  }}`\n};\n\nconst textFieldEndContentStyles = {\n  base: cssProps`${{\n    paddingInlineEnd: `calc((var(--oj-c-PRIVATE-DO-NOT-USE-text-field-height) - ${ojButtonSmHeight} - 2px) / 2)`\n  }}`,\n  labelInside: cssProps`${{\n    paddingInlineEnd: `calc((var(--oj-c-PRIVATE-DO-NOT-USE-text-field-inside-edge-height) - ${ojButtonHeight} - 2px) / 2)`\n  }}`\n};\n\n// Renders the oj-text-field-container dom which includes the\n// start, middle (where the inside label and inputElem goes),\n// and end pieces of the form component.\n// This does not include user assistance because that is rendered outside the\n// oj-text-field-container; that is rendered in the TextField component.\nexport const TextFieldContent = ({\n  contentVariant = 'input',\n  insideLabel,\n  mainContent,\n  startContent,\n  statusVariant = 'none',\n  styleVariant = 'default',\n  endContent,\n  resize,\n  rootRef\n}: Props) => {\n  const { isDisabled, isFocused, isLoading } = useFormFieldContext();\n\n  const rootStyles = classNames([\n    textFieldContainerStyles.base,\n    styleVariant === 'embedded'\n      ? classNames([\n          textFieldContainerStyles.embeddedStyles,\n          statusVariant !== 'none' && textFieldContainerStyles.showBorder\n        ])\n      : classNames([\n          textFieldContainerStyles.defaultStyles,\n          textFieldContainerStyles.showBorder,\n          insideLabel !== undefined && textFieldContainerStyles.labelInside,\n          isFocused && textFieldContainerStyles.focused,\n          contentVariant === 'textarea' && textFieldContainerStyles.textarea\n        ]),\n    resize && textFieldContainerStyles.resize[resize],\n    isDisabled\n      ? textFieldContainerStyles.disabled\n      : classNames([\n          statusVariant === 'error' && textFieldContainerStyles.error,\n          statusVariant === 'warning' && textFieldContainerStyles.warning,\n          // TODO: don't use class names: https://jira.oraclecorp.com/jira/browse/JET-50572\n          statusVariant !== 'none' && `oj-c-text-field-${statusVariant}`\n        ]),\n    isLoading && loadingStyles\n  ]);\n  const startContentStyles = classNames([\n    textFieldStartContentStyles.base,\n    insideLabel != undefined && textFieldStartContentStyles.labelInside,\n    isDisabled && textFieldStartContentStyles.disabled\n  ]);\n  const middleStyles = classNames([\n    textFieldMiddleStyles.base,\n    contentVariant === 'textarea' && textFieldMiddleStyles.textarea\n    // getMiddleContentVariantStyles(variant)\n  ]);\n  const endContentStyles = classNames([\n    textFieldEndContentStyles.base,\n    insideLabel != undefined && textFieldEndContentStyles.labelInside\n  ]);\n\n  return (\n    <div role=\"presentation\" class={rootStyles} ref={rootRef}>\n      {startContent && (\n        <span class={startContentStyles}>\n          <Flex justify=\"center\" align=\"center\" hasZeroMargins={true}>\n            {startContent}\n          </Flex>\n        </span>\n      )}\n      <div class={middleStyles}>\n        {insideLabel}\n        {mainContent}\n      </div>\n      {endContent && (\n        <span class={endContentStyles}>\n          <Flex justify=\"center\" align=\"center\" hasZeroMargins={true}>\n            {endContent}\n          </Flex>\n        </span>\n      )}\n    </div>\n  );\n};\n","import { classNames } from '../utils/UNSAFE_classNames';\nimport { StyledComponentProps } from '../utils/UNSAFE_typeUtils';\nimport { getFormControlClasses } from './FormControlUtils';\nimport { getTextFieldClasses } from './TextFieldUtils';\nimport { useFormFieldContext } from '../hooks/UNSAFE_useFormFieldContext';\n\nexport type StyleProps = {\n  hasInsideLabel?: boolean;\n  variant?: 'default' | 'embedded';\n};\ntype Props = StyledComponentProps<'div', StyleProps>;\n\nexport const StyledTextField = ({\n  hasInsideLabel = false,\n  variant = 'default',\n  ...props\n}: Props) => {\n  const { isReadonly } = useFormFieldContext();\n\n  // TODO: We need to re-evaluate how we use CSS multi-classing to our VDOM components\n  const formControlClassNames = getFormControlClasses(hasInsideLabel);\n  const textFieldClassNames = getTextFieldClasses(isReadonly, variant);\n  const cssClassNames = classNames([formControlClassNames, textFieldClassNames]);\n  return <div {...props} class={cssClassNames} />;\n};\n","import { ComponentChildren, ComponentProps, Fragment, Ref } from 'preact';\nimport { LabelValueLayout } from '../UNSAFE_LabelValueLayout';\nimport { TextFieldContent } from './TextFieldContent';\nimport { StyledTextField } from './StyledTextField';\nimport { Size } from '../utils/UNSAFE_size';\nimport { HTMLAttributesSignalExcluded } from '../utils/UNSAFE_attributeUtils';\n\n// TextField takes the inputElem and userAssistanceContainer\n// and renders the form component's root dom, along with the\n// TextFieldContent, and the user assistance container.\n\n// The PickedProps are the ones we pass through to the the TextFieldContent\ntype PickedPropsFromTextFieldContent = Pick<\n  ComponentProps<typeof TextFieldContent>,\n  | 'contentVariant'\n  | 'startContent'\n  | 'statusVariant'\n  | 'styleVariant'\n  | 'mainContent'\n  | 'endContent'\n  | 'resize'\n>;\ntype PickedPropsFromHTMLElement = Pick<HTMLAttributesSignalExcluded<HTMLElement>, 'id'>;\n// TODO: How should a parent component listen to events for the text field?  The recommendation\n// was to remove event listeners from TextField itself and instead configure the TextFieldInput\n// with them, for example, thus keeping TextField a more pure layout component.  The\n// TextFieldInput renders the focusable input element, and may be a more natural place for\n// listeners.  We would potentially have to add similar listeners for the ReadonlyTextField, but\n// that component renders the focusable element itself;  there is no TextFieldInput or analogous\n// component passed in.  (from review on 3/8/22)\ntype FocusEvents = Pick<HTMLAttributesSignalExcluded<HTMLDivElement>, 'onFocus' | 'onBlur'>;\ntype KeyEvents = Pick<HTMLAttributesSignalExcluded<HTMLDivElement>, 'onKeyDown'>;\ntype MouseEvents = Pick<\n  HTMLAttributesSignalExcluded<HTMLDivElement>,\n  'onMouseDown' | 'onMouseEnter' | 'onMouseLeave'\n>;\ntype LabelProps = {\n  label?: ComponentChildren;\n  labelEdge?: 'inside' | 'start' | 'top';\n  labelStartWidth?: Size;\n};\ntype Props = PickedPropsFromTextFieldContent &\n  PickedPropsFromHTMLElement &\n  FocusEvents &\n  KeyEvents &\n  MouseEvents &\n  LabelProps & {\n    inlineUserAssistance?: ComponentChildren;\n    mainFieldRef?: Ref<HTMLDivElement>;\n  };\n\n// TODO: Do we need named props for start/endContent, or could they just be children that get\n// wrapped in a flex layout?  (from review on 3/8/22)\n\n// TODO: Instead of passing the inputElem, label, and userAssistance as named props here, should we\n// have a separate layout component that lays them out, which could just be passed as a child\n// to the TextField?  (from review on 3/8/22)\n\nexport const TextField = ({\n  contentVariant,\n  id,\n  endContent,\n  mainContent,\n  startContent,\n  inlineUserAssistance,\n  label,\n  labelEdge,\n  labelStartWidth,\n  mainFieldRef,\n  resize,\n  statusVariant,\n  styleVariant,\n  onFocus,\n  onBlur,\n  onKeyDown,\n  onMouseDown,\n  onMouseEnter,\n  onMouseLeave\n}: Props) => {\n  // TODO: What are the implications for interoperability between new preact-based form components\n  // and the existing JET oj-form-layout?  The preact form components create their own start/top\n  // labels, while oj-form-layout expects to create those itself and wire them to the existing form\n  // components through attributes like labelled-by.  (from review on 3/8/22)\n\n  // TODO: How should a parent form component render component-specific content within TextField,\n  // for example an aria live region?  Instead of a children prop on TextField, could the parent\n  // component pass comp-specific content through other props, like inputElem?   The parent could\n  // have its own component that composes inputElem with additional DOM.  (from review on 3/8/22)\n\n  const styledTextFieldChildren =\n    label !== undefined && (labelEdge === 'start' || labelEdge === 'top') ? (\n      <LabelValueLayout label={label} labelEdge={labelEdge} labelStartWidth={labelStartWidth}>\n        <Fragment>\n          <TextFieldContent\n            contentVariant={contentVariant}\n            endContent={endContent}\n            mainContent={mainContent}\n            resize={resize}\n            rootRef={mainFieldRef}\n            startContent={startContent}\n            statusVariant={statusVariant}\n            styleVariant={styleVariant}\n          />\n          {inlineUserAssistance}\n        </Fragment>\n      </LabelValueLayout>\n    ) : (\n      <Fragment>\n        <TextFieldContent\n          contentVariant={contentVariant}\n          endContent={endContent}\n          insideLabel={label}\n          mainContent={mainContent}\n          resize={resize}\n          rootRef={mainFieldRef}\n          startContent={startContent}\n          statusVariant={statusVariant}\n          styleVariant={styleVariant}\n        />\n        {inlineUserAssistance}\n      </Fragment>\n    );\n  return (\n    <StyledTextField\n      id={id}\n      hasInsideLabel={label !== undefined && labelEdge === 'inside'}\n      onfocusin={onFocus}\n      onfocusout={onBlur}\n      onKeyDown={onKeyDown}\n      onMouseDown={onMouseDown}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n      variant={styleVariant}>\n      {styledTextFieldChildren}\n    </StyledTextField>\n  );\n};\n","import { cssProps } from '@oracle/oraclejet-cssprops';\nimport { Ref } from 'preact';\nimport { useFormFieldContext } from '../hooks/UNSAFE_useFormFieldContext';\nimport { useTabbableMode } from '../hooks/UNSAFE_useTabbableMode';\nimport { useTextFieldInputHandlers } from '../hooks/UNSAFE_useTextFieldInputHandlers';\nimport { classNames } from '../utils/UNSAFE_classNames';\nimport type { TextProps } from '../utils/UNSAFE_interpolations/text';\nimport { textInterpolations } from '../utils/UNSAFE_interpolations/text';\nimport { mergeInterpolations } from '../utils/UNSAFE_mergeInterpolations';\nimport { ValueUpdateDetail } from '../utils/UNSAFE_valueUpdateDetail';\nimport { getLoadingAriaLabel } from './FormControlUtils';\nimport { isInputPlaceholderShown } from './TextFieldUtils';\nimport { HTMLAttributesSignalExcluded } from '../utils/UNSAFE_attributeUtils';\n\nconst rootStyles = {\n  base: cssProps`${{\n    // normally removing an outline can cause accessibility issues, however\n    // on an input the cursor blinks so an outline is not required for\n    // accessibility. As of 6-11-14 only chrome is putting\n    // an outline on inputs anyway\n    outlineStyle: 'none',\n    outlineWidth: '0',\n    boxSizing: 'border-box',\n    fontFamily: 'inherit',\n    lineHeight: 'inherit',\n    fontWeight: 'inherit',\n    border: '0',\n    backgroundColor: 'transparent',\n    width: '100%',\n\n    '&::selection': {\n      backgroundColor: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-bg-color-selected)'\n    }\n  }}`,\n  // removes margin that Safari adds to the input element\n  input: cssProps`${{\n    margin: '0'\n  }}`,\n  textarea: cssProps`${{\n    paddingTop:\n      'calc((var(--oj-c-PRIVATE-DO-NOT-USE-text-field-height) - 1rem * var(--oj-c-PRIVATE-DO-NOT-USE-typography-body-md-line-height))/ 2 - 1px)',\n    paddingBottom:\n      'calc((var(--oj-c-PRIVATE-DO-NOT-USE-text-field-height) - 1rem * var(--oj-c-PRIVATE-DO-NOT-USE-typography-body-md-line-height))/ 2 - 1px)',\n\n    resize: 'none'\n  }}`,\n  password: cssProps`${{\n    '&::-ms-reveal': {\n      display: 'none'\n    }\n  }}`,\n  labelDefaultPadding: cssProps`${{\n    paddingTop: 0,\n    paddingBottom: 0\n  }}`,\n  labelInsideBase: cssProps`${{\n    minHeight: 'var(--oj-c-PRIVATE-DO-NOT-USE-text-field-inside-edge-height)',\n    paddingTop: 'var(--oj-c-PRIVATE-DO-NOT-USE-text-field-inside-edge-padding-top)',\n    paddingBottom: 0,\n\n    '&:hover': {\n      backgroundColor: 'transparent'\n    }\n  }}`,\n  textareaLabelInsideBase: cssProps`${{\n    paddingTop: 0,\n    paddingBottom: 0,\n    // We are using a transparent border here instead of padding, due to how textarea scrolls the padding off the screen\n    // and the text content will clash with the inside label.\n    borderColor: 'transparent',\n    borderStyle: 'solid',\n    borderBlockStartWidth:\n      'calc(var(--oj-c-PRIVATE-DO-NOT-USE-label-inside-edge-font-size) * var(--oj-c-PRIVATE-DO-NOT-USE-label-inside-edge-line-height) + var(--oj-c-PRIVATE-DO-NOT-USE-label-inside-edge-position-top))',\n    // The 0.25rem is an aesthetically pleasing amount of bottom padding\n    borderBlockEndWidth: '0.25rem'\n  }}`,\n\n  labelInsideNoValueAndHasFocus: cssProps`${{\n    animationName:\n      'var(--oj-c-PRIVATE-DO-NOT-USE-private-preact-text-field-animation-name-placeholder)',\n    animationDuration: 'var(--oj-c-PRIVATE-DO-NOT-USE-animation-duration-xlong)',\n    animationTimingFunction: 'var(--oj-c-PRIVATE-DO-NOT-USE-animation-ease-in)'\n  }}`,\n\n  hasStartContent: cssProps`${{\n    paddingInlineStart: 'var(--oj-c-PRIVATE-DO-NOT-USE-text-field-icon-to-text-padding)'\n  }}`,\n\n  hasEndContent: cssProps`${{\n    paddingInlineEnd: 'var(--oj-c-PRIVATE-DO-NOT-USE-text-field-icon-to-text-padding)'\n  }}`,\n\n  defaultColor: cssProps`${{\n    color: 'var(--oj-c-PRIVATE-DO-NOT-USE-text-field-text-color)'\n  }}`,\n\n  disabledColor: cssProps`${{\n    color: 'var(--oj-c-PRIVATE-DO-NOT-USE-text-field-text-color-disabled)'\n  }}`,\n  // The 0.25em is the space between the prefix and the input. This is equivalent to ' '.\n  hasPrefix: cssProps`${{\n    paddingInlineStart: '.25em'\n  }}`,\n\n  hasSuffix: cssProps`${{\n    paddingInlineEnd: '.25em'\n  }}`,\n\n  default: cssProps`${{\n    fontSize: '100%'\n  }}`,\n\n  defaultPaddingStart: cssProps`${{\n    paddingInlineStart: 'var(--oj-c-PRIVATE-DO-NOT-USE-text-field-text-to-edge-padding)'\n  }}`,\n\n  defaultPaddingEnd: cssProps`${{\n    paddingInlineEnd: 'var(--oj-c-PRIVATE-DO-NOT-USE-text-field-text-to-edge-padding)'\n  }}`,\n\n  embedded: cssProps`${{\n    color: 'inherit',\n    fontSize: 'inherit',\n    height: '100%',\n    margin: 0,\n    paddingBlock: 0,\n    paddingInline:\n      'var(--oj-c-PRIVATE-DO-NOT-USE-text-field-embedded-padding, var(--oj-c-PRIVATE-DO-NOT-USE-text-field-text-to-edge-padding))',\n\n    // textarea styles\n    resize: 'none',\n\n    // input-password styles\n    '&::-ms-reveal': {\n      display: 'none'\n    }\n  }}`\n};\n\nconst interpolations = [...Object.values(textInterpolations)];\n\nconst styleInterpolations = mergeInterpolations<Props>(interpolations);\n\ntype Autocomplete = 'off' | 'on' | string;\n\ntype OrigPickedPropsFromInput = Pick<\n  HTMLAttributesSignalExcluded<HTMLInputElement>,\n  'autofocus' | 'id' | 'placeholder' | 'required' | 'role' | 'spellcheck' | 'type'\n>;\ntype RenamedPropsFromInput = Omit<OrigPickedPropsFromInput, 'autofocus' | 'required'> & {\n  autoFocus?: OrigPickedPropsFromInput['autofocus'];\n  isRequired?: OrigPickedPropsFromInput['required'];\n};\ntype InputProps = {\n  as?: 'input';\n  type?: Pick<HTMLAttributesSignalExcluded<HTMLInputElement>, 'type'>['type'];\n  rows?: never;\n  inputRef?: Ref<HTMLInputElement>;\n  hasPrefix?: boolean;\n  hasSuffix?: boolean;\n};\n\ntype TextAreaProps = {\n  as: 'textarea';\n  type?: never;\n  rows?: number;\n  inputRef?: Ref<HTMLTextAreaElement>;\n  hasPrefix?: never;\n  hasSuffix?: never;\n};\n\ntype UniqueProps = InputProps | TextAreaProps;\n\ntype AriaProps = {\n  ariaAutoComplete?: 'none' | 'inline' | 'list' | 'both';\n  ariaControls?: string;\n  ariaDescribedBy?: string;\n  ariaExpanded?: boolean;\n  ariaInvalid?: string;\n  ariaLabel?: string;\n  ariaLabelledBy?: string;\n  ariaValueMax?: number;\n  ariaValueMin?: number;\n  ariaValueNow?: number;\n  ariaValueText?: string;\n};\n\ntype Props = UniqueProps &\n  TextProps &\n  RenamedPropsFromInput &\n  AriaProps & {\n    autoComplete?: Autocomplete;\n    // TODO: Should we expose has* props like these or should we pass this info\n    // via FormFieldContext?  (from review on 3/8/22)\n    currentCommitValue?: string;\n    hasEndContent?: boolean;\n    hasInsideLabel?: boolean;\n    hasStartContent?: boolean;\n    value?: string;\n    variant?: 'default' | 'embedded';\n    onInput?: (detail: ValueUpdateDetail<string>) => void;\n    onCommit?: (detail: ValueUpdateDetail<string>) => void;\n    onKeyDown?: (event: KeyboardEvent) => void;\n    onKeyUp?: (event: KeyboardEvent) => void;\n  };\n\nexport const TextFieldInput = ({\n  as = 'input',\n  ariaAutoComplete,\n  ariaControls,\n  ariaDescribedBy,\n  ariaExpanded,\n  ariaInvalid,\n  ariaLabel,\n  ariaLabelledBy,\n  ariaValueMax,\n  ariaValueMin,\n  ariaValueNow,\n  ariaValueText,\n  autoComplete,\n  autoFocus,\n  currentCommitValue,\n  hasEndContent = false,\n  hasInsideLabel = false,\n  hasPrefix = false,\n  hasStartContent = false,\n  hasSuffix = false,\n  id,\n  inputRef,\n  placeholder,\n  isRequired,\n  role,\n  rows,\n  spellcheck,\n  type,\n  value = '',\n  variant = 'default',\n  onInput,\n  onCommit,\n  onKeyDown,\n  onKeyUp,\n  ...props\n}: Props) => {\n  const hasValue = value !== '';\n  const { isDisabled, isFocused, isLoading, isReadonly } = useFormFieldContext();\n  const myPlaceholder = isInputPlaceholderShown(hasInsideLabel, hasValue, isFocused)\n    ? placeholder\n    : undefined;\n  const { class: styleInterpolationClasses } = styleInterpolations(props);\n  const renderPrefix = !isDisabled && hasPrefix;\n  const renderSuffix = !isDisabled && hasSuffix;\n  const inputClasses = classNames([\n    'oj-c-text-field-input',\n    rootStyles.base,\n    variant === 'default'\n      ? classNames([\n          rootStyles.default,\n          as === 'textarea' && rootStyles.textarea,\n          as === 'input' && rootStyles.input,\n          type === 'password' && rootStyles.password,\n          !hasStartContent && !renderPrefix && rootStyles.defaultPaddingStart,\n          !hasEndContent && !renderSuffix && rootStyles.defaultPaddingEnd\n        ])\n      : rootStyles.embedded,\n    hasInsideLabel &&\n      classNames([\n        rootStyles.labelInsideBase,\n        as === 'textarea' && rootStyles.textareaLabelInsideBase,\n        !hasValue && isFocused && rootStyles.labelInsideNoValueAndHasFocus\n      ]),\n    !hasInsideLabel && as !== 'textarea' && rootStyles.labelDefaultPadding,\n    // We want the input to have padding on itself. This gives the user more space to click on to set focus to the input.\n    // The padding between the input and the icon is different than the padding between the input and prefix/suffix (since they are both text)\n    // startcontentpadding+input+endcontentpadding\n    hasStartContent && !hasPrefix && rootStyles.hasStartContent,\n    hasEndContent && !hasSuffix && rootStyles.hasEndContent,\n    isDisabled ? rootStyles.disabledColor : rootStyles.defaultColor,\n    // prefix+prefixpadding+input+suffixpadding+suffix\n    // if there is also a startcontent or end content,\n    // the prefix/suffix will have that padding on it (see PrefixSuffix)\n    renderPrefix && rootStyles.hasPrefix,\n    renderSuffix && rootStyles.hasSuffix,\n    styleInterpolationClasses\n  ]);\n  const Comp = as || 'input';\n  const handlers = useTextFieldInputHandlers({\n    currentCommitValue,\n    value,\n    onInput,\n    onCommit,\n    onKeyDown\n  });\n  // the implicit default for tabindex on an input is 0, so do not explicitly set it.\n  // JET-52914 - Implement Tabbable mode API contract in InputText\n  // if not tabbable, spread tabbableModeProps on component\n  const { isTabbable, tabbableModeProps } = useTabbableMode();\n  // TODO: for autoComplete='off', need to configure attrs appropriately to make sure it\n  // works across browsers and versions  (from review on 3/11/22)\n  return (\n    <Comp\n      aria-autocomplete={ariaAutoComplete}\n      aria-controls={ariaControls}\n      aria-describedby={ariaDescribedBy}\n      aria-expanded={ariaExpanded}\n      aria-invalid={ariaInvalid}\n      aria-label={isLoading ? getLoadingAriaLabel() : ariaLabel ? ariaLabel : undefined}\n      aria-labelledby={ariaLabelledBy}\n      aria-required={isRequired ? true : undefined}\n      aria-valuemax={ariaValueMax}\n      aria-valuemin={ariaValueMin}\n      aria-valuenow={ariaValueNow}\n      aria-valuetext={ariaValueText}\n      autocomplete={autoComplete}\n      autofocus={autoFocus}\n      class={inputClasses}\n      disabled={isDisabled}\n      id={id}\n      onKeyUp={onKeyUp}\n      placeholder={myPlaceholder}\n      readonly={isReadonly}\n      // @ts-ignore\n      ref={inputRef}\n      role={role}\n      rows={rows}\n      spellcheck={spellcheck}\n      type={type}\n      value={value}\n      {...handlers}\n      {...(!isTabbable && tabbableModeProps)}\n    />\n  );\n};\n","import { Fragment } from 'preact';\nimport { useDebounce } from '../hooks/UNSAFE_useDebounce';\nimport { useTranslationBundle } from '../hooks/UNSAFE_useTranslationBundle';\nimport { BundleType } from '../resources/nls/bundle';\nimport { LiveRegion } from '../UNSAFE_LiveRegion';\n\ntype Props = {\n  isMaxLengthExceeded?: boolean;\n  maxLength: number;\n  valueLength?: number;\n};\n\nconst MAX_LENGTH_UPDATE_DELAY = 500;\n\nexport function MaxLengthLiveRegion({ isMaxLengthExceeded, maxLength, valueLength = 0 }: Props) {\n  // Comment copied from InputBase.js in Big JET:\n  // Only update the aria-live div when the user has paused for more than\n  // 500 milliseconds. That way, we avoid queued up aria-live messages which\n  // would be annoying and not helpful. The 500ms was agreed upon in the\n  // accessibility review meeting.\n  const debouncedRemainingChars = useDebounce(maxLength - valueLength, MAX_LENGTH_UPDATE_DELAY);\n  const translations = useTranslationBundle<BundleType>('@oracle/oraclejet-preact');\n  const maxLengthExceededTranslatedString = translations.formControl_maxLengthExceeded({\n    MAX_LENGTH: `${maxLength}`\n  });\n  const remainingCharsTranslatedString = translations.formControl_maxLengthRemaining({\n    CHARACTER_COUNT: `${debouncedRemainingChars}`\n  });\n\n  return (\n    <Fragment>\n      <LiveRegion>{remainingCharsTranslatedString}</LiveRegion>\n      {isMaxLengthExceeded && (\n        <LiveRegion type=\"assertive\">{maxLengthExceededTranslatedString}</LiveRegion>\n      )}\n    </Fragment>\n  );\n}\n","/**\n * @license\n * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.\n * The Universal Permissive License (UPL), Version 1.0\n * as shown at https://oss.oracle.com/licenses/upl/\n * @ignore\n */\n\nexport { ReadonlyTextFieldInput } from './ReadonlyTextFieldInput';\nexport { ReadonlyTextField } from './ReadonlyTextField';\nexport { TextField } from './TextField';\nexport { TextFieldInput } from './TextFieldInput';\nexport { getInputId } from './TextFieldUtils';\nexport { MaxLengthLiveRegion } from './MaxLengthLiveRegion';\n"],"names":["rootStyles","getFormControlClasses","hasInsideLabel","classNames","base","labelInside","getLoadingAriaLabel","translations","useTranslationBundle","formControl_loading","borderToTextAreaContentMargin","readOnlyTextFieldStyles","ReadonlyTextFieldInput","_a","ariaDescribedBy","ariaLabel","ariaLabelledBy","autoFocus","as","elementRef","inlineUserAssistance","innerReadonlyField","rows","type","value","variant","props","__rest","isLoading","useFormFieldContext","ariaLabelForReadonly","styleInterpolations","mergeInterpolations","interpolations","textareaBase","isFormLayout","isReadonlyForm","inEnabledFormBase","textareaInEnabledFormBase","inEnabledFormNoLabelInside","textareaInEnabledFormLabelInside","inEnabledFormNoStartContent","_jsx","Object","assign","autofocus","class","readonlyDivClasses","readonly","ref","isTabbable","tabbableModeProps","children","role","textFieldStyles","readonlyStyles","loadingStyles","getTextFieldClasses","embedded","nonReadonly","getReadonlyClasses","isInsideNonReadonlyForm","textarea","textareaNotInsideEnabledForm","insideEnabledFormLabelInside","classes","getInputId","id","isInputPlaceholderShown","hasValue","isFocused","_jsxs","ojButtonHeight","ojButtonSmHeight","ojButtonIconSize","ojButtonSmIconSize","textFieldContainerStyles","resize","textFieldStartContentStyles","textFieldMiddleStyles","textFieldEndContentStyles","TextFieldContent","contentVariant","insideLabel","mainContent","startContent","statusVariant","styleVariant","endContent","rootRef","embeddedStyles","showBorder","defaultStyles","undefined","error","warning","startContentStyles","Flex","justify","align","hasZeroMargins","middleStyles","endContentStyles","values","textInterpolations","TextFieldInput","ariaAutoComplete","ariaControls","ariaExpanded","ariaInvalid","ariaValueMax","ariaValueMin","ariaValueNow","ariaValueText","autoComplete","currentCommitValue","hasEndContent","hasPrefix","hasStartContent","hasSuffix","inputRef","placeholder","isRequired","spellcheck","onInput","onCommit","onKeyDown","onKeyUp","isDisabled","isReadonly","renderPrefix","renderSuffix","default","input","password","defaultPaddingStart","defaultPaddingEnd","labelInsideBase","textareaLabelInsideBase","labelInsideNoValueAndHasFocus","Comp","autocomplete","inputClasses","disabled","myPlaceholder","handlers"],"mappings":"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"}