@jobber/components 6.52.0 → 6.53.0

package/dist/InputPhoneNumber/index.mjs

@@ -1,16 +1,256 @@
-export { I as InputPhoneNumber } from '../InputPhoneNumber-es.js';
-import '../tslib.es6-es.js';
-import 'react';
-import 'react-hook-form';
-import '../FormField-es.js';
-import 'framer-motion';
-import '@jobber/design';
-import 'classnames';
+import React__default, { useState, useMemo, useCallback, useEffect, cloneElement, forwardRef, useId } from 'react';
+import { _ as __rest } from '../tslib.es6-es.js';
+import classnames from 'classnames';
+import { j as useFormFieldWrapperStyles, b as useAtlantisFormFieldName, f as FormFieldWrapper, l as FormFieldPostFix, k as FormField } from '../FormField-es.js';
+import { useFormContext, useForm } from 'react-hook-form';
 import '../Button-es.js';
-import 'react-router-dom';
+import '@jobber/design';
+import 'framer-motion';
 import '../Icon-es.js';
-import '../Typography-es.js';
 import '../Text-es.js';
+import '../Typography-es.js';
 import '../useFormFieldFocus-es.js';
 import '../InputValidation-es.js';
 import '../Spinner-es.js';
+import 'react-router-dom';
+
+var styles = {"mask":"_78-Lxj78xPg-","hiddenValue":"GoiXVXaU1Qs-","emptyValue":"oOrjwubmsVA-","spinning":"T3VvmDmzs-4-"};
+
+function useInputMask({ value = "", pattern, delimiter = "*", strict = true, onChange, }) {
+    const [isMasking, setIsMasking] = useState(!value);
+    const patternInfo = useMemo(() => {
+        const patternChars = pattern.split("");
+        const specialChars = patternChars.filter(char => char !== delimiter);
+        const maxCleanChars = patternChars.filter(char => char === delimiter).length;
+        return {
+            patternChars,
+            specialChars,
+            maxCleanChars,
+        };
+    }, [pattern, delimiter]);
+    const inputValue = useMemo(() => {
+        return value
+            .split("")
+            .filter(char => !patternInfo.specialChars.includes(char))
+            .join("");
+    }, [value, patternInfo.specialChars]);
+    const formatValue = useCallback((unformattedValue) => {
+        const { patternChars, specialChars, maxCleanChars } = patternInfo;
+        const cleanValueChars = unformattedValue
+            .split("")
+            .filter(char => !specialChars.includes(char) && !Number.isNaN(Number(char)));
+        const isOverCharLimit = cleanValueChars.length > maxCleanChars;
+        if (!strict && isOverCharLimit) {
+            return cleanValueChars.join("");
+        }
+        else {
+            const formattedValue = patternChars.reduce(getMaskedValue([...cleanValueChars], specialChars), "");
+            return formattedValue;
+        }
+    }, [patternInfo, strict]);
+    const maskedOnChange = useCallback((newValue, event) => {
+        const formatted = formatValue(newValue);
+        onChange === null || onChange === void 0 ? void 0 : onChange(formatted, event);
+    }, [formatValue, onChange]);
+    const formattedValue = useMemo(() => formatValue(value), [formatValue, value]);
+    useEffect(() => {
+        const shouldMask = strict || inputValue.length < patternInfo.maxCleanChars;
+        setIsMasking(shouldMask);
+    }, [inputValue, patternInfo.maxCleanChars, strict]);
+    const placeholderMask = useMemo(() => pattern
+        .replace(new RegExp(`\\${delimiter}`, "g"), "_")
+        .slice(value.length), [pattern, delimiter, value]);
+    return {
+        formattedValue,
+        placeholderMask,
+        isMasking,
+        maskedOnChange,
+        inputValue,
+    };
+}
+function getMaskedValue(cleanVal, specialChars) {
+    return (result, nextCharacter) => {
+        if (!cleanVal.length)
+            return result;
+        if (specialChars.includes(nextCharacter))
+            return result + nextCharacter;
+        const nextValue = cleanVal.shift();
+        return result + (nextValue !== undefined ? nextValue : "");
+    };
+}
+
+function MaskElement({ isMasking, formattedValue, placeholderMask, }) {
+    if (!isMasking) {
+        return null;
+    }
+    return (React__default.createElement("div", { className: styles.mask, "aria-hidden": "true" },
+        React__default.createElement("span", { className: styles.hiddenValue }, formattedValue),
+        React__default.createElement("span", null, placeholderMask)));
+}
+function InputMask({ children, delimiter = "*", pattern, strict = true, }) {
+    const { value: inputValue, onChange } = children.props;
+    const { placeholderMask, isMasking, formattedValue, maskedOnChange } = useInputMask({
+        value: String(inputValue || ""),
+        pattern,
+        delimiter,
+        strict,
+        onChange: onChange,
+    });
+    const inputMask = (React__default.createElement(MaskElement, { isMasking: isMasking, formattedValue: formattedValue, placeholderMask: placeholderMask }));
+    return cloneElement(children, {
+        onChange: maskedOnChange,
+        children: isMasking && inputMask,
+    });
+}
+
+const DEFAULT_PATTERN = "(***) ***-****";
+
+/**
+ * Combines the actions on the InputPhoneNumber such as onChange, onEnter, onFocus, onBlur, and onClear to forward information to the consumers of the InputPhoneNumber.
+ * 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 useInputPhoneActions({ onChange, inputRef, onFocus, onBlur, onKeyDown, onEnter, }) {
+    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 handleFocus(event) {
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
+    }
+    function handleKeyDown(event) {
+        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
+        if (!onEnter)
+            return;
+        if (event.key !== "Enter")
+            return;
+        if (event.shiftKey || event.ctrlKey)
+            return;
+        event.preventDefault();
+        onEnter === null || onEnter === void 0 ? void 0 : onEnter(event);
+    }
+    function handleBlur(event) {
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+    }
+    return {
+        handleClear,
+        handleChange,
+        handleFocus,
+        handleBlur,
+        handleKeyDown,
+    };
+}
+
+/**
+ * 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 useInputPhoneFormField(_a) {
+    var { id, name, description, inline, handleChange, handleBlur, handleFocus, handleKeyDown, error, disabled, autofocus, value, readonly } = _a, rest = __rest(_a, ["id", "name", "description", "inline", "handleChange", "handleBlur", "handleFocus", "handleKeyDown", "error", "disabled", "autofocus", "value", "readonly"]);
+    const descriptionIdentifier = `descriptionUUID--${id}`;
+    const fieldProps = Object.assign(Object.assign(Object.assign(Object.assign({}, rest), { id,
+        name,
+        disabled, autoFocus: autofocus, onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, onKeyDown: handleKeyDown, value, invalid: error || rest.invalid ? "true" : undefined }), (description &&
+        !inline && { "aria-describedby": descriptionIdentifier })), { readOnly: readonly });
+    return { fieldProps, descriptionIdentifier };
+}
+
+const InputPhoneNumberRebuilt = forwardRef(function InputPhoneNumberInternal(_a, ref) {
+    var _b, _c, _d, _e;
+    var { pattern = DEFAULT_PATTERN } = _a, props = __rest(_a, ["pattern"]);
+    const inputPhoneNumberRef = (_b = ref) !== null && _b !== void 0 ? _b : React__default.useRef(null);
+    const wrapperRef = React__default.useRef(null);
+    const { inputStyle } = useFormFieldWrapperStyles(Object.assign(Object.assign({}, props), { type: "tel" }));
+    const generatedId = useId();
+    const id = props.id || generatedId;
+    const { name } = useAtlantisFormFieldName({
+        nameProp: props.name,
+        id: id,
+    });
+    const { formattedValue, isMasking, placeholderMask, inputValue, maskedOnChange, } = useInputMask({
+        value: props.value,
+        pattern,
+        strict: false,
+        onChange: props.onChange,
+    });
+    const { handleChange, handleBlur, handleFocus, handleClear, handleKeyDown, } = useInputPhoneActions({
+        onChange: maskedOnChange,
+        onBlur: props.onBlur,
+        onFocus: props.onFocus,
+        onEnter: props.onEnter,
+        inputRef: inputPhoneNumberRef,
+    });
+    const { fieldProps, descriptionIdentifier } = useInputPhoneFormField({
+        id,
+        name,
+        handleChange,
+        handleBlur,
+        handleFocus,
+        handleKeyDown,
+        autofocus: props.autoFocus,
+        disabled: props.disabled,
+        readonly: props.readonly,
+        invalid: props.invalid,
+        error: props.error,
+        description: props.description,
+        inline: props.inline,
+    });
+    return (React__default.createElement(FormFieldWrapper, { disabled: props.disabled, size: props.size, inline: props.inline, wrapperRef: wrapperRef, error: (_c = props.error) !== null && _c !== void 0 ? _c : "", invalid: Boolean(props.error || props.invalid), identifier: id, descriptionIdentifier: descriptionIdentifier, description: props.description, clearable: (_d = props.clearable) !== null && _d !== void 0 ? _d : "never", onClear: handleClear, type: "tel", placeholder: props.placeholder, value: formattedValue, prefix: props.prefix, suffix: props.suffix, readonly: props.readonly, loading: props.loading },
+        React__default.createElement("input", Object.assign({ type: "tel" }, fieldProps, { ref: inputPhoneNumberRef, className: classnames(inputStyle, {
+                [styles.emptyValue]: inputValue.length === 0 && pattern[0] === "(",
+            }), value: formattedValue })),
+        React__default.createElement(MaskElement, { isMasking: isMasking, formattedValue: formattedValue, placeholderMask: placeholderMask }),
+        React__default.createElement(FormFieldPostFix, { variation: "spinner", visible: (_e = props.loading) !== null && _e !== void 0 ? _e : false })));
+});
+
+function InputPhoneNumber$1(_a) {
+    var { required } = _a, props = __rest(_a, ["required"]);
+    const { placeholder, validations, pattern = DEFAULT_PATTERN } = props;
+    const errorSubject = placeholder || "Phone number";
+    const { getValues } = useFormContext() != undefined
+        ? useFormContext()
+        : // If there isn't a Form Context being provided, get a form for this field.
+            useForm({ mode: "onTouched" });
+    return (React__default.createElement(InputMask, { pattern: pattern, strict: false },
+        React__default.createElement(FormField, Object.assign({}, props, { type: "tel", pattern: pattern, validations: Object.assign(Object.assign({ required: {
+                    value: Boolean(required),
+                    message: `${errorSubject} is required`,
+                } }, validations), { validate: getPhoneNumberValidation }) }))));
+    function getPhoneNumberValidation(value) {
+        // Get unique characters that aren't * in the pattern
+        const patternNonDelimterCharacters = pattern
+            .split("")
+            .filter(char => char !== "*")
+            .filter((char, index, arr) => arr.indexOf(char) === index);
+        const specialCharacters = patternNonDelimterCharacters.join(" ");
+        // Remove special characters from pattern
+        const cleanValue = value.replace(new RegExp(`[${specialCharacters}]`, "g"), "");
+        const cleanValueRequiredLength = (pattern.match(/\*/g) || []).length;
+        if (cleanValue.length > 0 && cleanValue.length < cleanValueRequiredLength) {
+            return `${errorSubject} must contain ${cleanValueRequiredLength} or more digits`;
+        }
+        if (typeof (validations === null || validations === void 0 ? void 0 : validations.validate) === "function") {
+            return validations.validate(value, getValues);
+        }
+        return true;
+    }
+}
+
+function isNewInputPhoneNumberProps(props) {
+    return props.version === 2;
+}
+const InputPhoneNumber = forwardRef(function InputPhoneNumberShim(props, ref) {
+    if (isNewInputPhoneNumberProps(props)) {
+        return React__default.createElement(InputPhoneNumberRebuilt, Object.assign({}, props, { ref: ref }));
+    }
+    else {
+        return React__default.createElement(InputPhoneNumber$1, Object.assign({}, props));
+    }
+});
+
+export { InputPhoneNumber };

package/dist/InputPhoneNumber/useInputMask.d.ts

@@ -0,0 +1,48 @@
+interface UseInputMaskParams {
+    /**
+     * The current value of the input
+     */
+    value: string;
+    /**
+     * A pattern to specify the format (e.g. "(***) ***-****")
+     */
+    pattern: string;
+    /**
+     * Character in the pattern that will be replaced with input values
+     * @default "*"
+     */
+    delimiter?: string;
+    /**
+     * Whether to restrict input to the pattern length
+     * @default true
+     */
+    strict?: boolean;
+    /**
+     * Callback function to be called with the masked value on change.
+     */
+    onChange?: (maskedValue: string, event?: React.ChangeEvent<HTMLInputElement>) => void;
+}
+interface UseInputMaskResult {
+    /**
+     * The formatted value according to the pattern
+     */
+    formattedValue: string;
+    /**
+     * The masked placeholder text (portion of pattern not yet filled)
+     */
+    placeholderMask: string;
+    /**
+     * Whether masking is currently active
+     */
+    isMasking: boolean;
+    /**
+     * Handler for input change events that formats the input and calls the onChange prop
+     */
+    maskedOnChange: (newValue: string, event?: React.ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Raw input value from the user without formatting characters
+     */
+    inputValue: string;
+}
+export declare function useInputMask({ value, pattern, delimiter, strict, onChange, }: UseInputMaskParams): UseInputMaskResult;
+export {};

package/dist/index.cjs

@@ -66,7 +66,7 @@ var InputFile = require('./InputFile-cjs.js');
 var InputGroup = require('./InputGroup-cjs.js');
 var InputNumber = require('./InputNumber-cjs.js');
 var InputPassword = require('./InputPassword-cjs.js');
-var InputPhoneNumber = require('./InputPhoneNumber-cjs.js');
+var InputPhoneNumber_index = require('./InputPhoneNumber/index.cjs');
 var InputText_index = require('./InputText/index.cjs');
 var InputTime_index = require('./InputTime/index.cjs');
 var InputValidation = require('./InputValidation-cjs.js');
@@ -290,7 +290,7 @@ exports.useInputFileContentContext = InputFile.useInputFileContentContext;
 exports.InputGroup = InputGroup.InputGroup;
 exports.InputNumber = InputNumber.InputNumber;
 exports.InputPassword = InputPassword.InputPassword;
-exports.InputPhoneNumber = InputPhoneNumber.InputPhoneNumber;
+exports.InputPhoneNumber = InputPhoneNumber_index.InputPhoneNumber;
 exports.InputText = InputText_index.InputText;
 exports.InputTime = InputTime_index.InputTime;
 exports.InputValidation = InputValidation.InputValidation;

package/dist/index.mjs

@@ -64,7 +64,7 @@ export { I as InputFile, a as InputFileContentContext, u as updateFiles, b as us
 export { I as InputGroup } from './InputGroup-es.js';
 export { I as InputNumber } from './InputNumber-es.js';
 export { I as InputPassword } from './InputPassword-es.js';
-export { I as InputPhoneNumber } from './InputPhoneNumber-es.js';
+export { InputPhoneNumber } from './InputPhoneNumber/index.mjs';
 export { InputText } from './InputText/index.mjs';
 export { InputTime } from './InputTime/index.mjs';
 export { I as InputValidation } from './InputValidation-es.js';