@jobber/components 6.103.2-JOB-140609-9051081.26 → 6.103.2-JOB-141426-1b49367.0

package/dist/InputText/index.cjs

@@ -4,11 +4,12 @@ var React = require('react');
 var jobberHooks = require('@jobber/hooks');
 var FormField = require('../FormField-cjs.js');
 require('classnames');
-require('../tslib.es6-cjs.js');
+var tslib_es6 = require('../tslib.es6-cjs.js');
 require('react-hook-form');
 require('framer-motion');
 require('@jobber/design');
 require('../Button-cjs.js');
+var omit = require('../omit-cjs.js');
 require('../Icon-cjs.js');
 require('../Text-cjs.js');
 require('../Typography-cjs.js');
@@ -16,6 +17,17 @@ require('../useFormFieldFocus-cjs.js');
 require('../InputValidation-cjs.js');
 require('../Spinner-cjs.js');
 require('react-router-dom');
+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.
@@ -150,7 +162,7 @@ function insertAtCursor(input, newText) {
 function useInputTextActions({ onChange, inputRef, onEnter, onFocus, onBlur, onKeyDown, }) {
     function handleClear() {
         var _a;
-        // Don't call blur handler when programmatically clearing
+        handleBlur();
         onChange && onChange("");
         (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     }
@@ -184,10 +196,23 @@ function useInputTextActions({ onChange, inputRef, onEnter, onFocus, onBlur, onK
     };
 }
 
+/**
+ * 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(Object.assign({}, rest), { 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 });
+    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 = useInputTextId(props);
     const { rowRange } = useTextAreaResize({
         rows: props.rows,
@@ -195,19 +220,8 @@ const InputTextSPAR = React.forwardRef(function InputTextInternal(props, inputRe
         inputRef: inputTextRef,
         wrapperRef: wrapperRef,
     });
-    const { inputStyle } = FormField.useFormFieldWrapperStyles({
-        size: props.size,
-        align: props.align,
-        placeholder: props.placeholder,
-        value: props.value,
-        invalid: props.invalid,
-        error: props.error,
-        max: typeof props.max === "string" ? parseFloat(props.max) : props.max,
-        maxLength: undefined, // v2: maxLength is for HTML validation only, not for width styling
-        type: props.multiline ? "textarea" : "text",
-        disabled: props.disabled,
-        inline: props.inline,
-    });
+    const type = props.multiline ? "textarea" : "text";
+    const { inputStyle } = FormField.useFormFieldWrapperStyles(legacyPropHelper);
     const { name } = FormField.useAtlantisFormFieldName({
         nameProp: props.name,
         id: id,
@@ -220,25 +234,40 @@ const InputTextSPAR = React.forwardRef(function InputTextInternal(props, inputRe
         onEnter: props.onEnter,
         inputRef: inputTextRef,
     });
-    const descriptionIdentifier = `descriptionUUID--${id}`;
-    const hasDescription = props.description && !props.inline;
-    const isInvalid = Boolean(props.ariaInvalid || props.error || props.invalid);
+    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,
-            props.multiline ? (React.createElement(TextArea, { id: id, name: name, className: inputStyle, value: props.value, rows: rowRange.min, disabled: props.disabled, readOnly: props.readOnly, required: props.required, autoFocus: props.autoFocus, autoComplete: props.autoComplete, maxLength: props.maxLength, minLength: props.minLength, inputMode: props.inputMode, tabIndex: props.tabIndex, role: props.role, "aria-label": props.ariaLabel, "aria-describedby": hasDescription ? descriptionIdentifier : props.ariaDescribedBy, "aria-invalid": isInvalid ? true : undefined, "aria-controls": props.ariaControls, "aria-expanded": props.ariaExpanded, "aria-activedescendant": props.ariaActiveDescendant, "aria-autocomplete": props.ariaAutocomplete, "aria-required": props.ariaRequired, invalid: isInvalid ? "true" : undefined, onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, onKeyDown: handleKeyDown, onKeyUp: props.onKeyUp, ref: FormField.mergeRefs([inputRefs, inputTextRef]) })) : (React.createElement(TextInput, { id: id, name: name, className: inputStyle, value: props.value, disabled: props.disabled, readOnly: props.readOnly, required: props.required, autoFocus: props.autoFocus, autoComplete: props.autoComplete, maxLength: props.maxLength, minLength: props.minLength, max: props.max, min: props.min, pattern: props.pattern, inputMode: props.inputMode, tabIndex: props.tabIndex, role: props.role, "aria-label": props.ariaLabel, "aria-describedby": hasDescription ? descriptionIdentifier : props.ariaDescribedBy, "aria-invalid": isInvalid ? true : undefined, "aria-controls": props.ariaControls, "aria-expanded": props.ariaExpanded, "aria-activedescendant": props.ariaActiveDescendant, "aria-autocomplete": props.ariaAutocomplete, "aria-required": props.ariaRequired, invalid: isInvalid ? "true" : undefined, onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, onKeyDown: handleKeyDown, onKeyUp: props.onKeyUp, ref: FormField.mergeRefs([inputRefs, inputTextRef]) })),
+            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 useInputTextId(props) {
     const generatedId = React.useId();
-    return props.identifier || props.id || generatedId;
+    return props.id || generatedId;
+}
+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 })));
 }
-const TextArea = React.forwardRef(function TextArea(props, ref) {
-    return React.createElement("textarea", Object.assign({}, props, { ref: ref }));
-});
-const TextInput = React.forwardRef(function TextInput(props, ref) {
-    return React.createElement("input", Object.assign({}, props, { ref: ref }));
-});
 
 function isNewInputTextProps(props) {
     return props.version === 2;

package/dist/InputText/index.mjs

@@ -1,12 +1,13 @@
 import React__default, { forwardRef, useRef, useImperativeHandle, useId } from 'react';
 import { useSafeLayoutEffect } from '@jobber/hooks';
-import { k as FormField, j as useFormFieldWrapperStyles, b as useAtlantisFormFieldName, f as FormFieldWrapper, m as mergeRefs, l as FormFieldPostFix } from '../FormField-es.js';
+import { k as FormField, s as styles, j as useFormFieldWrapperStyles, b as useAtlantisFormFieldName, f as FormFieldWrapper, l as FormFieldPostFix, m as mergeRefs } from '../FormField-es.js';
 import 'classnames';
-import '../tslib.es6-es.js';
+import { _ as __rest } from '../tslib.es6-es.js';
 import 'react-hook-form';
 import 'framer-motion';
 import '@jobber/design';
 import '../Button-es.js';
+import { o as omit } from '../omit-es.js';
 import '../Icon-es.js';
 import '../Text-es.js';
 import '../Typography-es.js';
@@ -14,6 +15,17 @@ import '../useFormFieldFocus-es.js';
 import '../InputValidation-es.js';
 import '../Spinner-es.js';
 import 'react-router-dom';
+import '../_commonjsHelpers-es.js';
+import '../_baseGet-es.js';
+import '../isTypedArray-es.js';
+import '../isObjectLike-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';
 
 /**
  * Hook for resizing a textarea based on its content. The textarea will grow up to the max number of rows specified.
@@ -148,7 +160,7 @@ function insertAtCursor(input, newText) {
 function useInputTextActions({ onChange, inputRef, onEnter, onFocus, onBlur, onKeyDown, }) {
     function handleClear() {
         var _a;
-        // Don't call blur handler when programmatically clearing
+        handleBlur();
         onChange && onChange("");
         (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     }
@@ -182,10 +194,23 @@ function useInputTextActions({ onChange, inputRef, onEnter, onFocus, onBlur, onK
     };
 }
 
+/**
+ * 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 = __rest(_a, ["id", "name", "description", "inline", "handleChange", "handleBlur", "handleFocus", "handleKeyDown", "error"]);
+    const descriptionIdentifier = `descriptionUUID--${id}`;
+    const fieldProps = Object.assign(Object.assign(Object.assign(Object.assign({}, rest), { id, className: 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 });
+    return { fieldProps, descriptionIdentifier };
+}
+
 const InputTextSPAR = forwardRef(function InputTextInternal(props, inputRefs) {
     var _a, _b, _c;
     const inputTextRef = React__default.useRef(null);
     const wrapperRef = React__default.useRef(null);
+    const legacyPropHelper = Object.assign(Object.assign({}, props), { version: 1 });
     const id = useInputTextId(props);
     const { rowRange } = useTextAreaResize({
         rows: props.rows,
@@ -193,19 +218,8 @@ const InputTextSPAR = forwardRef(function InputTextInternal(props, inputRefs) {
         inputRef: inputTextRef,
         wrapperRef: wrapperRef,
     });
-    const { inputStyle } = useFormFieldWrapperStyles({
-        size: props.size,
-        align: props.align,
-        placeholder: props.placeholder,
-        value: props.value,
-        invalid: props.invalid,
-        error: props.error,
-        max: typeof props.max === "string" ? parseFloat(props.max) : props.max,
-        maxLength: undefined, // v2: maxLength is for HTML validation only, not for width styling
-        type: props.multiline ? "textarea" : "text",
-        disabled: props.disabled,
-        inline: props.inline,
-    });
+    const type = props.multiline ? "textarea" : "text";
+    const { inputStyle } = useFormFieldWrapperStyles(legacyPropHelper);
     const { name } = useAtlantisFormFieldName({
         nameProp: props.name,
         id: id,
@@ -218,25 +232,40 @@ const InputTextSPAR = forwardRef(function InputTextInternal(props, inputRefs) {
         onEnter: props.onEnter,
         inputRef: inputTextRef,
     });
-    const descriptionIdentifier = `descriptionUUID--${id}`;
-    const hasDescription = props.description && !props.inline;
-    const isInvalid = Boolean(props.ariaInvalid || props.error || props.invalid);
+    const inputProps = 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__default.createElement(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__default.createElement(React__default.Fragment, null,
-            props.multiline ? (React__default.createElement(TextArea, { id: id, name: name, className: inputStyle, value: props.value, rows: rowRange.min, disabled: props.disabled, readOnly: props.readOnly, required: props.required, autoFocus: props.autoFocus, autoComplete: props.autoComplete, maxLength: props.maxLength, minLength: props.minLength, inputMode: props.inputMode, tabIndex: props.tabIndex, role: props.role, "aria-label": props.ariaLabel, "aria-describedby": hasDescription ? descriptionIdentifier : props.ariaDescribedBy, "aria-invalid": isInvalid ? true : undefined, "aria-controls": props.ariaControls, "aria-expanded": props.ariaExpanded, "aria-activedescendant": props.ariaActiveDescendant, "aria-autocomplete": props.ariaAutocomplete, "aria-required": props.ariaRequired, invalid: isInvalid ? "true" : undefined, onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, onKeyDown: handleKeyDown, onKeyUp: props.onKeyUp, ref: mergeRefs([inputRefs, inputTextRef]) })) : (React__default.createElement(TextInput, { id: id, name: name, className: inputStyle, value: props.value, disabled: props.disabled, readOnly: props.readOnly, required: props.required, autoFocus: props.autoFocus, autoComplete: props.autoComplete, maxLength: props.maxLength, minLength: props.minLength, max: props.max, min: props.min, pattern: props.pattern, inputMode: props.inputMode, tabIndex: props.tabIndex, role: props.role, "aria-label": props.ariaLabel, "aria-describedby": hasDescription ? descriptionIdentifier : props.ariaDescribedBy, "aria-invalid": isInvalid ? true : undefined, "aria-controls": props.ariaControls, "aria-expanded": props.ariaExpanded, "aria-activedescendant": props.ariaActiveDescendant, "aria-autocomplete": props.ariaAutocomplete, "aria-required": props.ariaRequired, invalid: isInvalid ? "true" : undefined, onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, onKeyDown: handleKeyDown, onKeyUp: props.onKeyUp, ref: mergeRefs([inputRefs, inputTextRef]) })),
+            type === "textarea" ? (React__default.createElement(TextArea, { fieldProps: fieldProps, rowRange: rowRange, inputRefs: [inputRefs, inputTextRef], value: props.value, inputStyle: inputStyle })) : (React__default.createElement(TextInput, { fieldProps: fieldProps, inputRefs: [inputRefs, inputTextRef], value: props.value, inputStyle: inputStyle })),
             React__default.createElement(FormFieldPostFix, { variation: "spinner", visible: (_c = props.loading) !== null && _c !== void 0 ? _c : false }),
             props.children)));
 });
 function useInputTextId(props) {
     const generatedId = useId();
-    return props.identifier || props.id || generatedId;
+    return props.id || generatedId;
+}
+function TextArea({ fieldProps, rowRange, inputRefs, value, inputStyle, }) {
+    return (React__default.createElement("textarea", Object.assign({}, fieldProps, { rows: rowRange.min, ref: mergeRefs(inputRefs), className: inputStyle, value: value })));
+}
+function TextInput({ fieldProps, inputRefs, value, inputStyle, }) {
+    return (React__default.createElement("input", Object.assign({}, fieldProps, { ref: mergeRefs(inputRefs), className: inputStyle, value: value })));
 }
-const TextArea = forwardRef(function TextArea(props, ref) {
-    return React__default.createElement("textarea", Object.assign({}, props, { ref: ref }));
-});
-const TextInput = forwardRef(function TextInput(props, ref) {
-    return React__default.createElement("input", Object.assign({}, props, { ref: ref }));
-});
 
 function isNewInputTextProps(props) {
     return props.version === 2;

package/dist/InputText/useInputTextActions.d.ts

@@ -12,5 +12,5 @@ export declare function useInputTextActions({ onChange, inputRef, onEnter, onFoc
     handleChange: (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
     handleKeyDown: (event: KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
     handleFocus: (event: FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
-    handleBlur: (event: FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    handleBlur: (event?: FocusEvent) => void;
 };