@jobber/components 6.52.0 → 6.53.0

package/dist/InputPhoneNumber/InputMask.d.ts

@@ -1,5 +1,11 @@
 import React, { ReactElement } from "react";
 import { FormFieldProps } from "../FormField";
+interface MaskElementProps {
+    readonly isMasking: boolean;
+    readonly formattedValue: string;
+    readonly placeholderMask: string;
+}
+export declare function MaskElement({ isMasking, formattedValue, placeholderMask, }: MaskElementProps): JSX.Element | null;
 export interface InputMaskProps {
     /**
      * A string pattern to mask the value. For example:
@@ -36,3 +42,4 @@ export interface InputMaskProps {
     readonly children: ReactElement<FormFieldProps>;
 }
 export declare function InputMask({ children, delimiter, pattern, strict, }: InputMaskProps): React.ReactElement<FormFieldProps, string | React.JSXElementConstructor<any>>;
+export {};

package/dist/InputPhoneNumber/InputPhoneNumber.d.ts

@@ -1,19 +1,2 @@
-import { InputMaskProps } from "./InputMask";
-import { CommonFormFieldProps, FormFieldProps } from "../FormField";
-interface InputPhoneNumberProps extends Omit<CommonFormFieldProps, "align">, Pick<FormFieldProps, "autocomplete" | "onEnter" | "onFocus" | "onBlur" | "validations" | "readonly" | "prefix" | "suffix"> {
-    readonly value: string;
-    readonly onChange: (value: string) => void;
-    /**
-     * A pattern to specify the format to display the phone number in.
-     * For example if you want to display the format for [Denmark](https://en.wikipedia.org/wiki/National_conventions_for_writing_telephone_numbers#Denmark)
-     * you could set it to `** ** ** **`
-     * @default "(***) ***-****"
-     */
-    readonly pattern?: InputMaskProps["pattern"];
-    /**
-     * Shows a "required" validation message when the component is left empty.
-     */
-    readonly required?: boolean;
-}
-export declare function InputPhoneNumber({ required, ...props }: InputPhoneNumberProps): JSX.Element;
-export {};
+import { InputPhoneNumberLegacyProps } from "./InputPhoneNumber.types";
+export declare function InputPhoneNumber({ required, ...props }: InputPhoneNumberLegacyProps): JSX.Element;

package/dist/InputPhoneNumber/InputPhoneNumber.rebuilt.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { InputPhoneNumberRebuiltProps } from "./InputPhoneNumber.types";
+export declare const InputPhoneNumberRebuilt: React.ForwardRefExoticComponent<InputPhoneNumberRebuiltProps & React.RefAttributes<HTMLInputElement>>;

package/dist/InputPhoneNumber/InputPhoneNumber.types.d.ts

@@ -0,0 +1,56 @@
+import { Clearable } from "@jobber/hooks/useShowClear";
+import { InputMaskProps } from "./InputMask";
+import { CommonFormFieldProps, FormFieldProps } from "../FormField";
+export interface InputPhoneNumberLegacyProps extends Omit<CommonFormFieldProps, "align">, Pick<FormFieldProps, "autocomplete" | "onEnter" | "onFocus" | "onBlur" | "validations" | "readonly" | "prefix" | "suffix"> {
+    readonly value: string;
+    readonly onChange: (value: string) => void;
+    /**
+     * A pattern to specify the format to display the phone number in.
+     * For example if you want to display the format for [Denmark](https://en.wikipedia.org/wiki/National_conventions_for_writing_telephone_numbers#Denmark)
+     * you could set it to `** ** ** **`
+     * @default "(***) ***-****"
+     */
+    readonly pattern?: InputMaskProps["pattern"];
+    /**
+     * Shows a "required" validation message when the component is left empty.
+     */
+    readonly required?: boolean;
+}
+export interface InputPhoneNumberRebuiltProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange" | "onBlur" | "size" | "suffix" | "prefix" | "value" | "max" | "min" | "defaultValue" | "readOnly" | "type" | "maxLength" | "minLength"> {
+    readonly error?: string;
+    readonly invalid?: boolean;
+    readonly identifier?: string;
+    readonly autocomplete?: boolean | string;
+    readonly loading?: boolean;
+    readonly onKeyUp?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+    readonly children?: React.ReactNode;
+    readonly clearable?: Clearable;
+    readonly value: string;
+    readonly onChange: (value: string, event?: React.ChangeEvent<HTMLInputElement>) => void;
+    readonly onBlur?: (event?: React.FocusEvent<HTMLInputElement>) => void;
+    readonly onEnter?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+    readonly onFocus?: (event?: React.FocusEvent<HTMLInputElement>) => void;
+    /**
+     * A pattern to specify the format to display the phone number in.
+     * For example if you want to display the format for [Denmark](https://en.wikipedia.org/wiki/National_conventions_for_writing_telephone_numbers#Denmark)
+     * you could set it to `** ** ** **`
+     * @default "(***) ***-****"
+     */
+    readonly pattern?: InputMaskProps["pattern"];
+    /**
+     * Shows a "required" validation message when the component is left empty.
+     */
+    readonly required?: boolean;
+    /**
+     * Version 2 is highly experimental, avoid using it unless you have talked with Atlantis first.
+     */
+    readonly version: 2;
+    readonly size?: FormFieldProps["size"];
+    readonly inline?: FormFieldProps["inline"];
+    readonly align?: FormFieldProps["align"];
+    readonly prefix?: FormFieldProps["prefix"];
+    readonly suffix?: FormFieldProps["suffix"];
+    readonly description?: FormFieldProps["description"];
+    readonly readonly?: boolean;
+}
+export declare const DEFAULT_PATTERN = "(***) ***-****";

package/dist/InputPhoneNumber/hooks/useInputPhoneActions.d.ts

@@ -0,0 +1,16 @@
+import { ChangeEvent, FocusEvent, KeyboardEvent } from "react";
+import { InputPhoneNumberRebuiltProps } from "../InputPhoneNumber.types";
+export interface useInputPhoneActionsProps extends Pick<InputPhoneNumberRebuiltProps, "onChange" | "onEnter" | "onFocus" | "onBlur" | "onKeyDown"> {
+    inputRef?: React.RefObject<HTMLInputElement>;
+}
+/**
+ * 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.
+ */
+export declare function useInputPhoneActions({ onChange, inputRef, onFocus, onBlur, onKeyDown, onEnter, }: useInputPhoneActionsProps): {
+    handleClear: () => void;
+    handleChange: (event: ChangeEvent<HTMLInputElement>) => void;
+    handleFocus: (event: FocusEvent<HTMLInputElement>) => void;
+    handleBlur: (event?: FocusEvent<HTMLInputElement>) => void;
+    handleKeyDown: (event: KeyboardEvent<HTMLInputElement>) => void;
+};

package/dist/InputPhoneNumber/hooks/useInputPhoneFormField.d.ts

@@ -0,0 +1,71 @@
+import { ChangeEvent, FocusEvent, KeyboardEvent } from "react";
+export interface useInputPhoneFormFieldProps {
+    /**
+     * The html id for the field
+     */
+    readonly id: string;
+    /**
+     * The auto-generated name for the html input field if a nameProp is not provided
+     */
+    readonly name: string;
+    /**
+     * The error message for the field
+     */
+    readonly error?: string;
+    /**
+     * Adjusts the form field to go inline with a content. This also silences the
+     * given `validations` prop. You'd have to used the `onValidate` prop to
+     * capture the message and render it somewhere else using the
+     * `InputValidation` component.
+     */
+    readonly inline?: boolean;
+    /**
+     * Further description of the input, can be used for a hint.
+     */
+    readonly description?: string;
+    /**
+     * Callback for when the field value changes
+     */
+    handleChange: (event: ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Callback for when the field loses focus
+     */
+    handleBlur: () => void;
+    /**
+     * Callback for when the field gains focus
+     */
+    handleFocus: (event: FocusEvent<HTMLInputElement>) => void;
+    /**
+     * Callback for when keydown event is triggered on the field
+     */
+    handleKeyDown: (event: KeyboardEvent<HTMLInputElement>) => void;
+    readonly invalid?: boolean;
+    readonly disabled?: boolean;
+    readonly autofocus?: boolean;
+    readonly value?: string;
+    readonly readonly?: boolean;
+}
+export interface UseInputPhoneFormFieldReturn {
+    fieldProps: React.InputHTMLAttributes<HTMLInputElement>;
+}
+/**
+ * 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.
+ */
+export declare function useInputPhoneFormField({ id, name, description, inline, handleChange, handleBlur, handleFocus, handleKeyDown, error, disabled, autofocus, value, readonly, ...rest }: useInputPhoneFormFieldProps): {
+    fieldProps: {
+        readOnly: boolean | undefined;
+        "aria-describedby"?: string | undefined;
+        id: string;
+        name: string;
+        disabled: boolean | undefined;
+        autoFocus: boolean | undefined;
+        onChange: (event: ChangeEvent<HTMLInputElement>) => void;
+        onBlur: () => void;
+        onFocus: (event: FocusEvent<HTMLInputElement>) => void;
+        onKeyDown: (event: KeyboardEvent<HTMLInputElement>) => void;
+        value: string | undefined;
+        invalid: string | undefined;
+    };
+    descriptionIdentifier: string;
+};

package/dist/InputPhoneNumber/index.cjs

@@ -1,22 +1,258 @@
 'use strict';
 
-var InputPhoneNumber = require('../InputPhoneNumber-cjs.js');
-require('../tslib.es6-cjs.js');
-require('react');
-require('react-hook-form');
-require('../FormField-cjs.js');
-require('framer-motion');
-require('@jobber/design');
-require('classnames');
+var React = require('react');
+var tslib_es6 = require('../tslib.es6-cjs.js');
+var classnames = require('classnames');
+var FormField = require('../FormField-cjs.js');
+var reactHookForm = require('react-hook-form');
 require('../Button-cjs.js');
-require('react-router-dom');
+require('@jobber/design');
+require('framer-motion');
 require('../Icon-cjs.js');
-require('../Typography-cjs.js');
 require('../Text-cjs.js');
+require('../Typography-cjs.js');
 require('../useFormFieldFocus-cjs.js');
 require('../InputValidation-cjs.js');
 require('../Spinner-cjs.js');
+require('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] = React.useState(!value);
+    const patternInfo = React.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 = React.useMemo(() => {
+        return value
+            .split("")
+            .filter(char => !patternInfo.specialChars.includes(char))
+            .join("");
+    }, [value, patternInfo.specialChars]);
+    const formatValue = React.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 = React.useCallback((newValue, event) => {
+        const formatted = formatValue(newValue);
+        onChange === null || onChange === void 0 ? void 0 : onChange(formatted, event);
+    }, [formatValue, onChange]);
+    const formattedValue = React.useMemo(() => formatValue(value), [formatValue, value]);
+    React.useEffect(() => {
+        const shouldMask = strict || inputValue.length < patternInfo.maxCleanChars;
+        setIsMasking(shouldMask);
+    }, [inputValue, patternInfo.maxCleanChars, strict]);
+    const placeholderMask = React.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.createElement("div", { className: styles.mask, "aria-hidden": "true" },
+        React.createElement("span", { className: styles.hiddenValue }, formattedValue),
+        React.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.createElement(MaskElement, { isMasking: isMasking, formattedValue: formattedValue, placeholderMask: placeholderMask }));
+    return React.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 = tslib_es6.__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 = React.forwardRef(function InputPhoneNumberInternal(_a, ref) {
+    var _b, _c, _d, _e;
+    var { pattern = DEFAULT_PATTERN } = _a, props = tslib_es6.__rest(_a, ["pattern"]);
+    const inputPhoneNumberRef = (_b = ref) !== null && _b !== void 0 ? _b : React.useRef(null);
+    const wrapperRef = React.useRef(null);
+    const { inputStyle } = FormField.useFormFieldWrapperStyles(Object.assign(Object.assign({}, props), { type: "tel" }));
+    const generatedId = React.useId();
+    const id = props.id || generatedId;
+    const { name } = FormField.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.createElement(FormField.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.createElement("input", Object.assign({ type: "tel" }, fieldProps, { ref: inputPhoneNumberRef, className: classnames(inputStyle, {
+                [styles.emptyValue]: inputValue.length === 0 && pattern[0] === "(",
+            }), value: formattedValue })),
+        React.createElement(MaskElement, { isMasking: isMasking, formattedValue: formattedValue, placeholderMask: placeholderMask }),
+        React.createElement(FormField.FormFieldPostFix, { variation: "spinner", visible: (_e = props.loading) !== null && _e !== void 0 ? _e : false })));
+});
 
+function InputPhoneNumber$1(_a) {
+    var { required } = _a, props = tslib_es6.__rest(_a, ["required"]);
+    const { placeholder, validations, pattern = DEFAULT_PATTERN } = props;
+    const errorSubject = placeholder || "Phone number";
+    const { getValues } = reactHookForm.useFormContext() != undefined
+        ? reactHookForm.useFormContext()
+        : // If there isn't a Form Context being provided, get a form for this field.
+            reactHookForm.useForm({ mode: "onTouched" });
+    return (React.createElement(InputMask, { pattern: pattern, strict: false },
+        React.createElement(FormField.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 = React.forwardRef(function InputPhoneNumberShim(props, ref) {
+    if (isNewInputPhoneNumberProps(props)) {
+        return React.createElement(InputPhoneNumberRebuilt, Object.assign({}, props, { ref: ref }));
+    }
+    else {
+        return React.createElement(InputPhoneNumber$1, Object.assign({}, props));
+    }
+});
 
-exports.InputPhoneNumber = InputPhoneNumber.InputPhoneNumber;
+exports.InputPhoneNumber = InputPhoneNumber;

package/dist/InputPhoneNumber/index.d.ts

@@ -1 +1,5 @@
-export * from "./InputPhoneNumber";
+import React from "react";
+import { InputPhoneNumberLegacyProps, InputPhoneNumberRebuiltProps } from "./InputPhoneNumber.types";
+export type InputPhoneNumberShimProps = InputPhoneNumberLegacyProps | InputPhoneNumberRebuiltProps;
+export declare const InputPhoneNumber: React.ForwardRefExoticComponent<InputPhoneNumberShimProps & React.RefAttributes<HTMLInputElement>>;
+export { InputPhoneNumberLegacyProps, InputPhoneNumberRebuiltProps };