@jobber/components 6.52.0 → 6.53.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "6.52.0",
+  "version": "6.53.0",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -534,5 +534,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "1c4f2ed7ace9383853157cf1bc29aabdd65a74ea"
+  "gitHead": "4c1a525d9fcbe458181296b921a52fd3cacea52e"
 }

package/dist/InputPhoneNumber-cjs.js

@@ -1,100 +0,0 @@
-'use strict';
-
-var tslib_es6 = require('./tslib.es6-cjs.js');
-var React = require('react');
-var reactHookForm = require('react-hook-form');
-var FormField = require('./FormField-cjs.js');
-require('classnames');
-require('framer-motion');
-require('@jobber/design');
-require('./Button-cjs.js');
-
-var styles = {"mask":"_78-Lxj78xPg-","hiddenValue":"GoiXVXaU1Qs-","spinning":"T3VvmDmzs-4-"};
-
-function InputMask({ children, delimiter = "*", pattern, strict = true, }) {
-    const { value: inputValue, onChange } = children.props;
-    const [isMasking, setIsMasking] = React.useState(!inputValue);
-    const stringifiedValue = String(inputValue || "");
-    const placeholderValue = pattern
-        .replace(new RegExp(`\\${delimiter}`, "g"), "_")
-        .slice(stringifiedValue.length);
-    const inputMask = (React.createElement("div", { className: styles.mask, "aria-hidden": "true" },
-        React.createElement("span", { className: styles.hiddenValue }, stringifiedValue),
-        React.createElement("span", null, placeholderValue)));
-    return React.cloneElement(children, {
-        onChange: handleChange,
-        children: isMasking && inputMask,
-    });
-    function handleChange(value) {
-        onChange === null || onChange === void 0 ? void 0 : onChange(formatValue(value));
-    }
-    function formatValue(value) {
-        const { cleanValueChars, patternChars, specialChars, isOverCharLimit } = getMaskingInfo(value);
-        if (!strict && isOverCharLimit) {
-            setIsMasking(false);
-            return cleanValueChars.join("");
-        }
-        else {
-            setIsMasking(true);
-            return patternChars.reduce(getMaskedValue(cleanValueChars, specialChars), "");
-        }
-    }
-    function getMaskingInfo(value) {
-        const patternChars = pattern.split("");
-        const specialChars = patternChars.filter(char => char !== delimiter);
-        const cleanValueChars = value
-            .split("")
-            .filter(char => !specialChars.includes(char))
-            // Since this is only used in InputPhoneNumber, we can restrict it to
-            // just numbers for now.
-            .map(Number)
-            .filter(num => !isNaN(num));
-        const isOverCharLimit = cleanValueChars.length > patternChars.length - specialChars.length;
-        return { cleanValueChars, patternChars, specialChars, isOverCharLimit };
-    }
-}
-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;
-    };
-}
-
-function InputPhoneNumber(_a) {
-    var { required } = _a, props = tslib_es6.__rest(_a, ["required"]);
-    const { placeholder, validations, 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;
-    }
-}
-
-exports.InputPhoneNumber = InputPhoneNumber;

package/dist/InputPhoneNumber-es.js

@@ -1,98 +0,0 @@
-import { _ as __rest } from './tslib.es6-es.js';
-import React__default, { useState, cloneElement } from 'react';
-import { useFormContext, useForm } from 'react-hook-form';
-import { k as FormField } from './FormField-es.js';
-import 'classnames';
-import 'framer-motion';
-import '@jobber/design';
-import './Button-es.js';
-
-var styles = {"mask":"_78-Lxj78xPg-","hiddenValue":"GoiXVXaU1Qs-","spinning":"T3VvmDmzs-4-"};
-
-function InputMask({ children, delimiter = "*", pattern, strict = true, }) {
-    const { value: inputValue, onChange } = children.props;
-    const [isMasking, setIsMasking] = useState(!inputValue);
-    const stringifiedValue = String(inputValue || "");
-    const placeholderValue = pattern
-        .replace(new RegExp(`\\${delimiter}`, "g"), "_")
-        .slice(stringifiedValue.length);
-    const inputMask = (React__default.createElement("div", { className: styles.mask, "aria-hidden": "true" },
-        React__default.createElement("span", { className: styles.hiddenValue }, stringifiedValue),
-        React__default.createElement("span", null, placeholderValue)));
-    return cloneElement(children, {
-        onChange: handleChange,
-        children: isMasking && inputMask,
-    });
-    function handleChange(value) {
-        onChange === null || onChange === void 0 ? void 0 : onChange(formatValue(value));
-    }
-    function formatValue(value) {
-        const { cleanValueChars, patternChars, specialChars, isOverCharLimit } = getMaskingInfo(value);
-        if (!strict && isOverCharLimit) {
-            setIsMasking(false);
-            return cleanValueChars.join("");
-        }
-        else {
-            setIsMasking(true);
-            return patternChars.reduce(getMaskedValue(cleanValueChars, specialChars), "");
-        }
-    }
-    function getMaskingInfo(value) {
-        const patternChars = pattern.split("");
-        const specialChars = patternChars.filter(char => char !== delimiter);
-        const cleanValueChars = value
-            .split("")
-            .filter(char => !specialChars.includes(char))
-            // Since this is only used in InputPhoneNumber, we can restrict it to
-            // just numbers for now.
-            .map(Number)
-            .filter(num => !isNaN(num));
-        const isOverCharLimit = cleanValueChars.length > patternChars.length - specialChars.length;
-        return { cleanValueChars, patternChars, specialChars, isOverCharLimit };
-    }
-}
-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;
-    };
-}
-
-function InputPhoneNumber(_a) {
-    var { required } = _a, props = __rest(_a, ["required"]);
-    const { placeholder, validations, 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;
-    }
-}
-
-export { InputPhoneNumber as I };