@jobber/components 6.11.4 → 6.11.5

package/dist/FormField/FormFieldTypes.d.ts

@@ -1,4 +1,4 @@
-import { ChangeEvent, ReactNode, RefObject } from "react";
+import React, { ChangeEvent, ReactNode, RefObject } from "react";
 import { RegisterOptions } from "react-hook-form";
 import { XOR } from "ts-xor";
 import { Clearable } from "@jobber/hooks/src/useShowClear";
@@ -156,11 +156,11 @@ export interface FormFieldProps extends CommonFormFieldProps {
     /**
      * Focus callback.
      */
-    onFocus?(): void;
+    onFocus?(event?: React.FocusEvent): void;
     /**
      * Blur callback.
      */
-    onBlur?(): void;
+    onBlur?(event?: React.FocusEvent): void;
     onKeyUp?(event: React.KeyboardEvent<HTMLInputElement>): void;
     /**
      * Exclusively for textareas. Specifies the visible height of a textarea.

package/dist/FormField/hooks/useFormFieldWrapperStyles.d.ts

@@ -1,9 +1,9 @@
 import { RefObject } from "react";
 import { FormFieldProps } from "../FormFieldTypes";
 export interface useFormFieldWrapperStylesProps extends Pick<FormFieldProps, "size" | "align" | "placeholder" | "value" | "invalid" | "max" | "maxLength" | "type" | "disabled" | "inline"> {
-    readonly error: string;
-    suffixRef: RefObject<HTMLDivElement>;
-    prefixRef: RefObject<HTMLDivElement>;
+    readonly error?: string;
+    suffixRef?: RefObject<HTMLDivElement>;
+    prefixRef?: RefObject<HTMLDivElement>;
 }
 export interface LabelPadding {
     paddingLeft: number | string | undefined;

package/dist/FormField-cjs.js

@@ -132,8 +132,8 @@ function useFormFieldWrapperStyles({ size, align, placeholder, value, invalid, e
         setLabelStyle(getAffixPaddding({
             value,
             type,
-            prefixWidth: ((_a = prefixRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 0,
-            suffixWidth: ((_b = suffixRef.current) === null || _b === void 0 ? void 0 : _b.offsetWidth) || 0,
+            prefixWidth: ((_a = prefixRef === null || prefixRef === void 0 ? void 0 : prefixRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 0,
+            suffixWidth: ((_b = suffixRef === null || suffixRef === void 0 ? void 0 : suffixRef.current) === null || _b === void 0 ? void 0 : _b.offsetWidth) || 0,
         }));
     }, [value]);
     return {
@@ -451,7 +451,10 @@ function setAutocomplete(autocompleteSetting) {
 }
 
 exports.FormField = FormField;
+exports.FormFieldPostFix = FormFieldPostFix;
 exports.FormFieldWrapper = FormFieldWrapper;
+exports.mergeRefs = mergeRefs;
+exports.styles = styles$1;
 exports.useAtlantisFormField = useAtlantisFormField;
 exports.useAtlantisFormFieldActions = useAtlantisFormFieldActions;
 exports.useAtlantisFormFieldName = useAtlantisFormFieldName;

package/dist/FormField-es.js

@@ -130,8 +130,8 @@ function useFormFieldWrapperStyles({ size, align, placeholder, value, invalid, e
         setLabelStyle(getAffixPaddding({
             value,
             type,
-            prefixWidth: ((_a = prefixRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 0,
-            suffixWidth: ((_b = suffixRef.current) === null || _b === void 0 ? void 0 : _b.offsetWidth) || 0,
+            prefixWidth: ((_a = prefixRef === null || prefixRef === void 0 ? void 0 : prefixRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 0,
+            suffixWidth: ((_b = suffixRef === null || suffixRef === void 0 ? void 0 : suffixRef.current) === null || _b === void 0 ? void 0 : _b.offsetWidth) || 0,
         }));
     }, [value]);
     return {
@@ -448,4 +448,4 @@ function setAutocomplete(autocompleteSetting) {
     return autocompleteSetting;
 }
 
-export { FormFieldWrapper as F, useAtlantisFormFieldActions as a, useAtlantisFormFieldName as b, useAtlantisReactHookForm as c, useFormFieldWrapperStyles as d, FormField as e, useAtlantisFormField as u };
+export { FormFieldWrapper as F, useAtlantisFormFieldActions as a, useAtlantisFormFieldName as b, useAtlantisReactHookForm as c, useFormFieldWrapperStyles as d, FormField as e, FormFieldPostFix as f, mergeRefs as m, styles$1 as s, useAtlantisFormField as u };

package/dist/InputDate/index.cjs

@@ -1,38 +1,39 @@
 'use strict';
 
 var InputDate = require('../InputDate-cjs.js');
-require('../DatePicker-cjs.js');
-require('react');
-require('classnames');
-require('../index-cjs.js');
+require('../omit-cjs.js');
 require('../_commonjsHelpers-cjs.js');
-require('react-dom');
-require('react-popper');
-require('../useRefocusOnActivator-cjs.js');
-require('../Typography-cjs.js');
-require('../Button-cjs.js');
-require('react-router-dom');
-require('../Icon-cjs.js');
-require('@jobber/design');
-require('../_getAllKeys-cjs.js');
+require('../_baseGet-cjs.js');
 require('../isTypedArray-cjs.js');
 require('../isObjectLike-cjs.js');
-require('../isSymbol-cjs.js');
 require('../identity-cjs.js');
 require('../_getTag-cjs.js');
+require('../isSymbol-cjs.js');
 require('../keysIn-cjs.js');
 require('../_baseAssignValue-cjs.js');
 require('../_baseFlatten-cjs.js');
 require('../_setToString-cjs.js');
-require('../AtlantisContext-cjs.js');
+require('react');
 require('../FormField-cjs.js');
 require('framer-motion');
+require('@jobber/design');
+require('classnames');
+require('../Button-cjs.js');
+require('react-router-dom');
+require('../Icon-cjs.js');
+require('../Typography-cjs.js');
 require('../Text-cjs.js');
 require('../useFormFieldFocus-cjs.js');
 require('../InputValidation-cjs.js');
 require('../Spinner-cjs.js');
 require('../tslib.es6-cjs.js');
 require('react-hook-form');
+require('../DatePicker-cjs.js');
+require('../index-cjs.js');
+require('react-dom');
+require('react-popper');
+require('../useRefocusOnActivator-cjs.js');
+require('../AtlantisContext-cjs.js');
 
 
 

package/dist/InputDate/index.mjs

@@ -1,33 +1,34 @@
 export { I as InputDate } from '../InputDate-es.js';
-import '../DatePicker-es.js';
-import 'react';
-import 'classnames';
-import '../index-es.js';
+import '../omit-es.js';
 import '../_commonjsHelpers-es.js';
-import 'react-dom';
-import 'react-popper';
-import '../useRefocusOnActivator-es.js';
-import '../Typography-es.js';
-import '../Button-es.js';
-import 'react-router-dom';
-import '../Icon-es.js';
-import '@jobber/design';
-import '../_getAllKeys-es.js';
+import '../_baseGet-es.js';
 import '../isTypedArray-es.js';
 import '../isObjectLike-es.js';
-import '../isSymbol-es.js';
 import '../identity-es.js';
 import '../_getTag-es.js';
+import '../isSymbol-es.js';
 import '../keysIn-es.js';
 import '../_baseAssignValue-es.js';
 import '../_baseFlatten-es.js';
 import '../_setToString-es.js';
-import '../AtlantisContext-es.js';
+import 'react';
 import '../FormField-es.js';
 import 'framer-motion';
+import '@jobber/design';
+import 'classnames';
+import '../Button-es.js';
+import 'react-router-dom';
+import '../Icon-es.js';
+import '../Typography-es.js';
 import '../Text-es.js';
 import '../useFormFieldFocus-es.js';
 import '../InputValidation-es.js';
 import '../Spinner-es.js';
 import '../tslib.es6-es.js';
 import 'react-hook-form';
+import '../DatePicker-es.js';
+import '../index-es.js';
+import 'react-dom';
+import 'react-popper';
+import '../useRefocusOnActivator-es.js';
+import '../AtlantisContext-es.js';

package/dist/InputDate-cjs.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var DatePicker = require('./DatePicker-cjs.js');
+var omit = require('./omit-cjs.js');
 var React = require('react');
 var FormField = require('./FormField-cjs.js');
 require('./tslib.es6-cjs.js');
@@ -9,12 +9,13 @@ require('framer-motion');
 require('@jobber/design');
 require('classnames');
 require('react-router-dom');
+var DatePicker = require('./DatePicker-cjs.js');
 
 function InputDate(inputProps) {
     const formFieldActionsRef = React.useRef(null);
     return (React.createElement(DatePicker.DatePicker, { selected: inputProps.value, onChange: inputProps.onChange, disabled: inputProps.disabled, readonly: inputProps.readonly, fullWidth: !inputProps.inline, minDate: inputProps.minDate, maxDate: inputProps.maxDate, smartAutofocus: false, activator: activatorProps => {
             const { onChange, onClick, value } = activatorProps;
-            const newActivatorProps = DatePicker.omit(activatorProps, ["activator"]);
+            const newActivatorProps = omit.omit(activatorProps, ["activator"]);
             const [isFocused, setIsFocused] = React.useState(false);
             const suffix = inputProps.showIcon !== false
                 ? {

package/dist/InputDate-es.js

@@ -1,4 +1,4 @@
-import { D as DatePicker, o as omit } from './DatePicker-es.js';
+import { o as omit } from './omit-es.js';
 import React, { useRef, useState, useEffect } from 'react';
 import { e as FormField } from './FormField-es.js';
 import './tslib.es6-es.js';
@@ -7,6 +7,7 @@ import 'framer-motion';
 import '@jobber/design';
 import 'classnames';
 import 'react-router-dom';
+import { D as DatePicker } from './DatePicker-es.js';
 
 function InputDate(inputProps) {
     const formFieldActionsRef = useRef(null);

package/dist/InputText/InputText.d.ts

@@ -1,18 +1,8 @@
 import React from "react";
-import { XOR } from "ts-xor";
-export interface RowRange {
-    min: number;
-    max: number;
-}
-export interface InputTextRef {
-    insert(text: string): void;
-    blur(): void;
-    focus(): void;
-    scrollIntoView(arg?: boolean | ScrollIntoViewOptions): void;
-}
+import { InputTextRef } from "./InputText.types";
 export declare const InputText: React.ForwardRefExoticComponent<({
     readonly multiline: true;
-    readonly rows?: (number | RowRange) | undefined;
+    readonly rows?: (number | import("./InputText.types").RowRange) | undefined;
     readonly align?: ("center" | "right") | undefined;
     readonly description?: string | undefined;
     readonly disabled?: boolean | undefined;
@@ -25,10 +15,10 @@ export declare const InputText: React.ForwardRefExoticComponent<({
     readonly placeholder?: string | undefined;
     readonly size?: ("small" | "large") | undefined;
     readonly value?: (string | number | Date) | undefined;
-    readonly clearable?: import("@jobber/hooks/src/useShowClear").Clearable | undefined;
+    readonly clearable?: import("@jobber/hooks/dist").Clearable | undefined;
     version?: 1 | undefined;
-    onFocus?: (() => void) | undefined;
-    onBlur?: (() => void) | undefined;
+    onFocus?: ((event?: React.FocusEvent) => void) | undefined;
+    onBlur?: ((event?: React.FocusEvent) => void) | undefined;
     readonly toolbar?: React.ReactNode;
     readonly defaultValue?: (string | Date) | undefined;
     readonly prefix?: import("../FormField").Affix | undefined;
@@ -37,7 +27,7 @@ export declare const InputText: React.ForwardRefExoticComponent<({
     inputRef?: React.RefObject<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement> | undefined;
     readonly keyboard?: ("numeric" | "decimal") | undefined;
     readonly maxLength?: number | undefined;
-    readonly suffix?: XOR<import("../FormField").Affix, import("../FormField").Suffix> | undefined;
+    readonly suffix?: import("ts-xor").XOR<import("../FormField").Affix, import("../FormField").Suffix> | undefined;
     onEnter?: ((event: React.KeyboardEvent) => void) | undefined;
     readonly readonly?: boolean | undefined;
     readonly validations?: import("react-hook-form").RegisterOptions | undefined;
@@ -57,10 +47,10 @@ export declare const InputText: React.ForwardRefExoticComponent<({
     readonly placeholder?: string | undefined;
     readonly size?: ("small" | "large") | undefined;
     readonly value?: (string | number | Date) | undefined;
-    readonly clearable?: import("@jobber/hooks/src/useShowClear").Clearable | undefined;
+    readonly clearable?: import("@jobber/hooks/dist").Clearable | undefined;
     version?: 1 | undefined;
-    onFocus?: (() => void) | undefined;
-    onBlur?: (() => void) | undefined;
+    onFocus?: ((event?: React.FocusEvent) => void) | undefined;
+    onBlur?: ((event?: React.FocusEvent) => void) | undefined;
     readonly toolbar?: React.ReactNode;
     readonly defaultValue?: (string | Date) | undefined;
     readonly prefix?: import("../FormField").Affix | undefined;
@@ -69,7 +59,7 @@ export declare const InputText: React.ForwardRefExoticComponent<({
     inputRef?: React.RefObject<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement> | undefined;
     readonly keyboard?: ("numeric" | "decimal") | undefined;
     readonly maxLength?: number | undefined;
-    readonly suffix?: XOR<import("../FormField").Affix, import("../FormField").Suffix> | undefined;
+    readonly suffix?: import("ts-xor").XOR<import("../FormField").Affix, import("../FormField").Suffix> | undefined;
     onEnter?: ((event: React.KeyboardEvent) => void) | undefined;
     readonly readonly?: boolean | undefined;
     readonly validations?: import("react-hook-form").RegisterOptions | undefined;

package/dist/InputText/InputText.rebuilt.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { InputTextRebuiltProps } from "./InputText.types";
+export declare const InputTextSPAR: React.ForwardRefExoticComponent<InputTextRebuiltProps & React.RefAttributes<HTMLInputElement | HTMLTextAreaElement>>;

package/dist/InputText/InputText.types.d.ts

@@ -0,0 +1,78 @@
+import { Clearable } from "@jobber/hooks";
+import { XOR } from "ts-xor";
+import { AutocompleteTypes, CommonFormFieldProps, FormFieldProps, FormFieldTypes } from "../FormField";
+export interface RowRange {
+    min: number;
+    max: number;
+}
+export type InputTextVersion = 1 | 2 | undefined;
+/**
+ * Experimental version 2 of the InputText component.
+ * Do not use unless you have talked with Atlantis first.
+ */
+export interface InputTextRebuiltProps extends Omit<React.InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement>, "onChange" | "onBlur" | "maxLength" | "rows" | "size" | "suffix" | "prefix" | "value" | "max" | "min" | "defaultValue"> {
+    readonly error?: string;
+    readonly invalid?: boolean;
+    readonly identifier?: string;
+    readonly autocomplete?: boolean | AutocompleteTypes;
+    readonly loading?: boolean;
+    readonly onKeyUp?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+    readonly children?: React.ReactNode;
+    readonly clearable?: Clearable;
+    /**
+     * Use this when you're expecting a long answer.
+     */
+    readonly multiline?: boolean;
+    /**
+     * Specifies the visible height of a long answer form field. Can be in the
+     * form of a single number to set a static height, or an object with a min
+     * and max keys indicating the minimum number of visible rows, and the
+     * maximum number of visible rows.
+     */
+    readonly rows?: number | RowRange;
+    readonly type?: FormFieldTypes;
+    /**
+     * Version 2 is highly experimental. Avoid using it unless you have talked with Atlantis first.
+     */
+    readonly version: 2;
+    readonly onChange?: (newValue: string, event?: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    readonly onEnter?: FormFieldProps["onEnter"];
+    readonly onBlur?: FormFieldProps["onBlur"];
+    readonly value: string;
+    readonly maxLength?: number;
+    readonly size?: FormFieldProps["size"];
+    readonly inline?: FormFieldProps["inline"];
+    readonly align?: FormFieldProps["align"];
+    readonly toolbar?: FormFieldProps["toolbar"];
+    readonly toolbarVisibility?: FormFieldProps["toolbarVisibility"];
+    readonly prefix?: FormFieldProps["prefix"];
+    readonly suffix?: FormFieldProps["suffix"];
+    readonly description?: FormFieldProps["description"];
+}
+interface BaseProps extends CommonFormFieldProps, Pick<FormFieldProps, "autofocus" | "maxLength" | "readonly" | "autocomplete" | "keyboard" | "onEnter" | "onFocus" | "onBlur" | "onChange" | "inputRef" | "validations" | "defaultValue" | "prefix" | "suffix" | "toolbar" | "toolbarVisibility" | "version"> {
+    multiline?: boolean;
+}
+export interface InputTextRef {
+    insert(text: string): void;
+    blur(): void;
+    focus(): void;
+    scrollIntoView(arg?: boolean | ScrollIntoViewOptions): void;
+}
+interface MultilineProps extends BaseProps {
+    /**
+     * Use this when you're expecting a long answer.
+     */
+    readonly multiline: true;
+    /**
+     * Specifies the visible height of a long answer form field. Can be in the
+     * form of a single number to set a static height, or an object with a min
+     * and max keys indicating the minimum number of visible rows, and the
+     * maximum number of visible rows.
+     */
+    readonly rows?: number | RowRange;
+}
+/**
+ * InputText props for the existing version of InputText
+ */
+export type InputTextLegacyProps = XOR<BaseProps, MultilineProps>;
+export {};

package/dist/InputText/index.cjs

@@ -1,23 +1,278 @@
 'use strict';
 
-var InputText = require('../InputText-cjs.js');
-require('react');
-require('../useSafeLayoutEffect-cjs.js');
-require('../FormField-cjs.js');
+var React = require('react');
+var useSafeLayoutEffect = require('../useSafeLayoutEffect-cjs.js');
+var FormField = require('../FormField-cjs.js');
+var tslib_es6 = require('../tslib.es6-cjs.js');
+require('react-hook-form');
 require('framer-motion');
 require('@jobber/design');
 require('classnames');
-require('../Button-cjs.js');
 require('react-router-dom');
+var omit = require('../omit-cjs.js');
+require('../Button-cjs.js');
 require('../Icon-cjs.js');
 require('../Typography-cjs.js');
 require('../Text-cjs.js');
 require('../useFormFieldFocus-cjs.js');
 require('../InputValidation-cjs.js');
 require('../Spinner-cjs.js');
-require('../tslib.es6-cjs.js');
-require('react-hook-form');
+require('../_commonjsHelpers-cjs.js');
+require('../_baseGet-cjs.js');
+require('../isTypedArray-cjs.js');
+require('../isObjectLike-cjs.js');
+require('../identity-cjs.js');
+require('../_getTag-cjs.js');
+require('../isSymbol-cjs.js');
+require('../keysIn-cjs.js');
+require('../_baseAssignValue-cjs.js');
+require('../_baseFlatten-cjs.js');
+require('../_setToString-cjs.js');
+
+/**
+ * Hook for resizing a textarea based on its content. The textarea will grow up to the max number of rows specified.
+ */
+function useTextAreaResize({ rows, value, inputRef, wrapperRef, }) {
+    const rowRange = getRowRange(rows);
+    useSafeLayoutEffect.useSafeLayoutEffect_1(() => {
+        if (inputRef &&
+            inputRef.current instanceof HTMLTextAreaElement &&
+            wrapperRef &&
+            wrapperRef.current instanceof HTMLDivElement) {
+            resize();
+        }
+    }, [inputRef.current, wrapperRef.current]);
+    // When the consumer passes a new controlled value, we need to recheck the size.
+    // The timeout ensures the DOM has a enough time to render the new text before
+    // we access the height.
+    useSafeLayoutEffect.useSafeLayoutEffect_1(() => {
+        setTimeout(() => {
+            if (inputRef &&
+                inputRef.current instanceof HTMLTextAreaElement &&
+                wrapperRef &&
+                wrapperRef.current instanceof HTMLDivElement) {
+                resize();
+            }
+        }, 0);
+    }, [value]);
+    function resize() {
+        if (inputRef &&
+            inputRef.current instanceof HTMLTextAreaElement &&
+            wrapperRef &&
+            (wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current) instanceof HTMLDivElement) {
+            if (rowRange.min === rowRange.max)
+                return;
+            inputRef.current.style.flexBasis = "auto";
+            wrapperRef.current.style.height = "auto";
+            inputRef.current.style.flexBasis =
+                textAreaHeight(inputRef.current) + "px";
+        }
+    }
+    function textAreaHeight(textArea) {
+        const { lineHeight, borderBottomWidth, borderTopWidth, paddingBottom, paddingTop, } = window.getComputedStyle(textArea);
+        const maxHeight = rowRange.max * parseFloat(lineHeight) +
+            parseFloat(borderTopWidth) +
+            parseFloat(borderBottomWidth) +
+            parseFloat(paddingTop) +
+            parseFloat(paddingBottom);
+        const scrollHeight = textArea.scrollHeight +
+            parseFloat(borderTopWidth) +
+            parseFloat(borderBottomWidth);
+        return Math.min(scrollHeight, maxHeight);
+    }
+    return { resize, rowRange };
+}
+function getRowRange(rows) {
+    if (rows === undefined) {
+        return { min: 3, max: 3 };
+    }
+    else if (typeof rows === "object") {
+        return { min: rows.min, max: rows.max };
+    }
+    else {
+        return { min: rows, max: rows };
+    }
+}
+
+function InputTextInternal(props, ref) {
+    const inputRef = React.useRef(null);
+    const actionsRef = React.useRef(null);
+    const wrapperRef = React.useRef(null);
+    const { resize, rowRange } = useTextAreaResize({
+        rows: props.rows,
+        value: props.value,
+        inputRef,
+        wrapperRef,
+    });
+    React.useImperativeHandle(ref, () => ({
+        insert: (text) => {
+            insertText(text);
+        },
+        blur: () => {
+            const input = inputRef.current;
+            if (input) {
+                input.blur();
+            }
+        },
+        focus: () => {
+            const input = inputRef.current;
+            if (input) {
+                input.focus();
+            }
+        },
+        scrollIntoView: arg => {
+            const input = inputRef.current;
+            if (input) {
+                input.scrollIntoView(arg);
+            }
+        },
+    }));
+    return (React.createElement(FormField.FormField, Object.assign({}, props, { type: props.multiline ? "textarea" : "text", inputRef: inputRef, actionsRef: actionsRef, wrapperRef: wrapperRef, onChange: handleChange, rows: rowRange.min })));
+    function handleChange(newValue) {
+        props.onChange && props.onChange(newValue);
+        resize();
+    }
+    function insertText(text) {
+        var _a;
+        const input = inputRef.current;
+        if (input) {
+            insertAtCursor(input, text);
+            const newValue = input.value;
+            (_a = actionsRef.current) === null || _a === void 0 ? void 0 : _a.setValue(newValue);
+            props.onChange && props.onChange(newValue);
+        }
+    }
+}
+const InputText$1 = React.forwardRef(InputTextInternal);
+function insertAtCursor(input, newText) {
+    const start = input.selectionStart || 0;
+    const end = input.selectionEnd || 0;
+    const text = input.value;
+    const before = text.substring(0, start);
+    const after = text.substring(end, text.length);
+    input.value = before + newText + after;
+    input.selectionStart = input.selectionEnd = start + newText.length;
+    input.focus();
+}
+
+/**
+ * Combines the actions on the InputText such as onChange, onEnter, onFocus, onBlur, and onClear to forward information to the consumers of the InputText.
+ * DO not repeat this pattern. We are doing this as a proof of concept relating to the refactoring of Form inputs to see what can be removed.
+ */
+function useInputTextActions({ onChange, inputRef, onEnter, onFocus, onBlur, }) {
+    function handleClear() {
+        var _a;
+        handleBlur();
+        onChange && onChange("");
+        (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    function handleChange(event) {
+        const newValue = event.currentTarget.value;
+        onChange === null || onChange === void 0 ? void 0 : onChange(newValue, event);
+    }
+    function handleKeyDown(event) {
+        if (!onEnter)
+            return;
+        if (event.key !== "Enter")
+            return;
+        if (event.shiftKey || event.ctrlKey)
+            return;
+        event.preventDefault();
+        onEnter && onEnter(event);
+    }
+    function handleFocus(event) {
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
+    }
+    function handleBlur(event) {
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+    }
+    return {
+        handleClear,
+        handleChange,
+        handleKeyDown,
+        handleFocus,
+        handleBlur,
+    };
+}
+
+/**
+ * Provides the props for the html fields rendered by the html input.
+ *  DO not repeat this pattern. We are doing this as a proof of concept relating to the refactoring of Form inputs to see what can be removed.
+ */
+function useInputTextFormField(_a) {
+    var { id, name, description, inline, handleChange, handleBlur, handleFocus, handleKeyDown, error } = _a, rest = tslib_es6.__rest(_a, ["id", "name", "description", "inline", "handleChange", "handleBlur", "handleFocus", "handleKeyDown", "error"]);
+    const descriptionIdentifier = `descriptionUUID--${id}`;
+    const fieldProps = Object.assign(Object.assign(Object.assign({ id, className: FormField.styles.input, name, disabled: rest.disabled, inputMode: rest.inputMode, onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus }, (description &&
+        !inline && { "aria-describedby": descriptionIdentifier })), { "aria-invalid": rest["aria-invalid"] || error || rest.invalid ? true : undefined, autoFocus: rest.autoFocus, invalid: error || rest.invalid ? "true" : undefined, onKeyDown: handleKeyDown }), rest);
+    return { fieldProps, descriptionIdentifier };
+}
 
+const InputTextSPAR = React.forwardRef(function InputTextInternal(props, inputRefs) {
+    var _a, _b, _c;
+    const inputTextRef = React.useRef(null);
+    const wrapperRef = React.useRef(null);
+    const legacyPropHelper = Object.assign(Object.assign({}, props), { version: 1 });
+    const id = React.useId();
+    const { rowRange } = useTextAreaResize({
+        rows: props.rows,
+        value: props.value,
+        inputRef: inputTextRef,
+        wrapperRef: wrapperRef,
+    });
+    const type = props.multiline ? "textarea" : "text";
+    const { inputStyle } = FormField.useFormFieldWrapperStyles(legacyPropHelper);
+    const { name } = FormField.useAtlantisFormFieldName({
+        nameProp: props.name,
+        id: props.id || id,
+    });
+    const { handleChange, handleBlur, handleFocus, handleKeyDown, handleClear } = useInputTextActions({
+        onChange: props.onChange,
+        onBlur: props.onBlur,
+        onFocus: props.onFocus,
+        onEnter: props.onEnter,
+        inputRef: inputTextRef,
+    });
+    const inputProps = omit.omit(props, [
+        "onChange",
+        "onBlur",
+        "onFocus",
+        "onEnter",
+        "size",
+        "placeholder",
+        "multiline",
+        "prefix",
+        "suffix",
+        "version",
+    ]);
+    const { fieldProps, descriptionIdentifier } = useInputTextFormField(Object.assign(Object.assign({}, inputProps), { id,
+        name,
+        handleChange,
+        handleBlur,
+        handleFocus,
+        handleKeyDown }));
+    return (React.createElement(FormField.FormFieldWrapper, { disabled: props.disabled, size: props.size, align: props.align, inline: props.inline, autofocus: props.autoFocus, name: name, wrapperRef: wrapperRef, error: (_a = props.error) !== null && _a !== void 0 ? _a : "", invalid: Boolean(props.error || props.invalid), identifier: id, descriptionIdentifier: descriptionIdentifier, description: props.description, clearable: (_b = props.clearable) !== null && _b !== void 0 ? _b : "never", onClear: handleClear, type: props.multiline ? "textarea" : "text", placeholder: props.placeholder, value: props.value, prefix: props.prefix, suffix: props.suffix, rows: rowRange.min, toolbar: props.toolbar, toolbarVisibility: props.toolbarVisibility },
+        React.createElement(React.Fragment, null,
+            type === "textarea" ? (React.createElement(TextArea, { fieldProps: fieldProps, rowRange: rowRange, inputRefs: [inputRefs, inputTextRef], value: props.value, inputStyle: inputStyle })) : (React.createElement(TextInput, { fieldProps: fieldProps, inputRefs: [inputRefs, inputTextRef], value: props.value, inputStyle: inputStyle })),
+            React.createElement(FormField.FormFieldPostFix, { variation: "spinner", visible: (_c = props.loading) !== null && _c !== void 0 ? _c : false }),
+            props.children)));
+});
+function TextArea({ fieldProps, rowRange, inputRefs, value, inputStyle, }) {
+    return (React.createElement("textarea", Object.assign({}, fieldProps, { rows: rowRange.min, ref: FormField.mergeRefs(inputRefs), className: inputStyle, value: value })));
+}
+function TextInput({ fieldProps, inputRefs, value, inputStyle, }) {
+    return (React.createElement("input", Object.assign({}, fieldProps, { ref: FormField.mergeRefs(inputRefs), className: inputStyle, value: value })));
+}
 
+function isNewInputTextProps(props) {
+    return props.version === 2;
+}
+const InputText = React.forwardRef(function InputTextShim(props, ref) {
+    if (isNewInputTextProps(props)) {
+        return (React.createElement(InputTextSPAR, Object.assign({}, props, { ref: ref })));
+    }
+    else {
+        return (React.createElement(InputText$1, Object.assign({}, props, { ref: ref })));
+    }
+});
 
-exports.InputText = InputText.InputText;
+exports.InputText = InputText;

package/dist/InputText/index.d.ts

@@ -1 +1,5 @@
-export { InputText, InputTextRef } from "./InputText";
+import React from "react";
+import { InputTextLegacyProps, InputTextRebuiltProps, InputTextRef } from "./InputText.types";
+export type InputTextShimProps = InputTextLegacyProps | InputTextRebuiltProps;
+export declare const InputText: React.ForwardRefExoticComponent<InputTextShimProps & React.RefAttributes<HTMLInputElement | HTMLTextAreaElement | InputTextRef>>;
+export { InputTextRef, InputTextRebuiltProps, InputTextLegacyProps };