@jobber/components 4.85.4-CJS-to-ESM.2 → 4.85.4

package/dist/InputPassword.cjs

@@ -1,25 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var InputPassword = require('./InputPassword-08d2dfa1.js');
-require('react');
-require('./FormField-fc30bb1a.js');
-require('./tslib.es6-754e2961.js');
-require('react-hook-form');
-require('./style-inject.es-9d2f5f4e.js');
-require('classnames');
-require('@jobber/hooks/useShowClear');
-require('./Button-ec64869e.js');
-require('react-router-dom');
-require('./Icon-405a216c.js');
-require('@jobber/design');
-require('./Typography-fd88fcce.js');
-require('./Text-714f7d14.js');
-require('./InputValidation-4a61254d.js');
-require('framer-motion');
-require('./Spinner-3480bc34.js');
-
-
-
-exports.InputPassword = InputPassword.InputPassword;

package/dist/InputPassword.js

@@ -1,17 +0,0 @@
-export { I as InputPassword } from './InputPassword-6b937a91.js';
-import 'react';
-import './FormField-f1f405d2.js';
-import './tslib.es6-c563c1dd.js';
-import 'react-hook-form';
-import './style-inject.es-a0e1a0ba.js';
-import 'classnames';
-import '@jobber/hooks/useShowClear';
-import './Button-30154871.js';
-import 'react-router-dom';
-import './Icon-22723fe6.js';
-import '@jobber/design';
-import './Typography-52ed1386.js';
-import './Text-c92ddeb3.js';
-import './InputValidation-fe42fc3f.js';
-import 'framer-motion';
-import './Spinner-90081e20.js';

package/dist/InputPhoneNumber-947bdb49.js

@@ -1,97 +0,0 @@
-import { _ as __rest } from './tslib.es6-c563c1dd.js';
-import React, { useState, cloneElement } from 'react';
-import { useFormContext, useForm } from 'react-hook-form';
-import { s as styleInject } from './style-inject.es-a0e1a0ba.js';
-import { F as FormField } from './FormField-f1f405d2.js';
-
-var css_248z = ".L7WK-i5uaOk- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n      align-items: center;\n  position: absolute;\n  top: 0;\n  right: 0;\n  left: 0;\n  z-index: var(--elevation-base);\n  height: var(--field--height);\n  padding-top: var(--field--padding-top);\n  padding-bottom: var(--field--padding-bottom);\n  padding-left: var(--field--padding-left);\n  padding-right: var(--field--padding-right);\n  color: var(--color-grey);\n  font-family: inherit;\n  font-size: inherit;\n  line-height: var(--field--value-lineHeight);\n  pointer-events: none;\n}\n\n.q1wXBupm5Xc- {\n  visibility: hidden;\n  opacity: 0;\n}\n";
-var styles = {"mask":"L7WK-i5uaOk-","hiddenValue":"q1wXBupm5Xc-"};
-styleInject(css_248z);
-
-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.createElement("div", { className: styles.mask, "aria-hidden": "true" },
-        React.createElement("span", { className: styles.hiddenValue }, stringifiedValue),
-        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.createElement(InputMask, { pattern: pattern, strict: false },
-        React.createElement(FormField, Object.assign({}, props, { type: "tel", 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 };

package/dist/InputPhoneNumber.cjs

@@ -1,25 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var InputPhoneNumber = require('./InputPhoneNumber-cbb2ca7d.js');
-require('./tslib.es6-754e2961.js');
-require('react');
-require('react-hook-form');
-require('./style-inject.es-9d2f5f4e.js');
-require('./FormField-fc30bb1a.js');
-require('classnames');
-require('@jobber/hooks/useShowClear');
-require('./Button-ec64869e.js');
-require('react-router-dom');
-require('./Icon-405a216c.js');
-require('@jobber/design');
-require('./Typography-fd88fcce.js');
-require('./Text-714f7d14.js');
-require('./InputValidation-4a61254d.js');
-require('framer-motion');
-require('./Spinner-3480bc34.js');
-
-
-
-exports.InputPhoneNumber = InputPhoneNumber.InputPhoneNumber;

package/dist/InputPhoneNumber.js

@@ -1,17 +0,0 @@
-export { I as InputPhoneNumber } from './InputPhoneNumber-947bdb49.js';
-import './tslib.es6-c563c1dd.js';
-import 'react';
-import 'react-hook-form';
-import './style-inject.es-a0e1a0ba.js';
-import './FormField-f1f405d2.js';
-import 'classnames';
-import '@jobber/hooks/useShowClear';
-import './Button-30154871.js';
-import 'react-router-dom';
-import './Icon-22723fe6.js';
-import '@jobber/design';
-import './Typography-52ed1386.js';
-import './Text-c92ddeb3.js';
-import './InputValidation-fe42fc3f.js';
-import 'framer-motion';
-import './Spinner-90081e20.js';

package/dist/InputText-2fd8f942.js

@@ -1,96 +0,0 @@
-import React, { forwardRef, useRef, useImperativeHandle } from 'react';
-import { useSafeLayoutEffect } from '@jobber/hooks/useSafeLayoutEffect';
-import { F as FormField } from './FormField-f1f405d2.js';
-
-function InputTextInternal(props, ref) {
-    const inputRef = useRef(null);
-    const actionsRef = useRef(null);
-    const rowRange = getRowRange();
-    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);
-            }
-        },
-    }));
-    useSafeLayoutEffect(() => {
-        if (inputRef && inputRef.current instanceof HTMLTextAreaElement) {
-            resize(inputRef.current);
-        }
-    }, [inputRef.current]);
-    return (React.createElement(FormField, Object.assign({}, props, { type: props.multiline ? "textarea" : "text", inputRef: inputRef, actionsRef: actionsRef, onChange: handleChange, rows: rowRange.min })));
-    function handleChange(newValue) {
-        props.onChange && props.onChange(newValue);
-        if (inputRef && inputRef.current instanceof HTMLTextAreaElement) {
-            resize(inputRef.current);
-        }
-    }
-    function getRowRange() {
-        if (props.rows === undefined) {
-            return { min: 3, max: 3 };
-        }
-        else if (typeof props.rows === "object") {
-            return { min: props.rows.min, max: props.rows.max };
-        }
-        else {
-            return { min: props.rows, max: props.rows };
-        }
-    }
-    function resize(textArea) {
-        if (rowRange.min === rowRange.max)
-            return;
-        textArea.style.height = "auto";
-        textArea.style.height = textAreaHeight(textArea) + "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);
-    }
-    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 = 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();
-}
-
-export { InputText as I };

package/dist/InputText.cjs

@@ -1,26 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var InputText = require('./InputText-125769fd.js');
-require('react');
-require('@jobber/hooks/useSafeLayoutEffect');
-require('./FormField-fc30bb1a.js');
-require('./tslib.es6-754e2961.js');
-require('react-hook-form');
-require('./style-inject.es-9d2f5f4e.js');
-require('classnames');
-require('@jobber/hooks/useShowClear');
-require('./Button-ec64869e.js');
-require('react-router-dom');
-require('./Icon-405a216c.js');
-require('@jobber/design');
-require('./Typography-fd88fcce.js');
-require('./Text-714f7d14.js');
-require('./InputValidation-4a61254d.js');
-require('framer-motion');
-require('./Spinner-3480bc34.js');
-
-
-
-exports.InputText = InputText.InputText;

package/dist/InputText.js

@@ -1,18 +0,0 @@
-export { I as InputText } from './InputText-2fd8f942.js';
-import 'react';
-import '@jobber/hooks/useSafeLayoutEffect';
-import './FormField-f1f405d2.js';
-import './tslib.es6-c563c1dd.js';
-import 'react-hook-form';
-import './style-inject.es-a0e1a0ba.js';
-import 'classnames';
-import '@jobber/hooks/useShowClear';
-import './Button-30154871.js';
-import 'react-router-dom';
-import './Icon-22723fe6.js';
-import '@jobber/design';
-import './Typography-52ed1386.js';
-import './Text-c92ddeb3.js';
-import './InputValidation-fe42fc3f.js';
-import 'framer-motion';
-import './Spinner-90081e20.js';

package/dist/InputTime-ef8af2d9.js

@@ -1,187 +0,0 @@
-import { _ as __rest } from './tslib.es6-c563c1dd.js';
-import React, { useRef, useState, useCallback, useEffect } from 'react';
-import { CivilTime } from '@std-proposal/temporal';
-import debounce from 'lodash/debounce';
-import { F as FormField } from './FormField-f1f405d2.js';
-
-function civilTimeToHTMLTime(civilTime) {
-    if (civilTime == undefined) {
-        return "";
-    }
-    const timeString = civilTime.toString();
-    return timeString.slice(0, 5);
-}
-function htmlTimeToCivilTime(timeString) {
-    try {
-        return CivilTime.fromString(timeString + ":00.000000000");
-    }
-    catch (_a) {
-        return undefined;
-    }
-}
-
-const DEBOUNCE_TIME = 300;
-function useTimePredict({ value, handleChange }) {
-    const IS_12_HOUR_FORMAT = useRef(Intl.DateTimeFormat(navigator.language, {
-        hour: "numeric",
-    }).resolvedOptions().hour12);
-    const [typedTime, setTypedTime] = useState("");
-    const predictTime = useCallback(debounce(() => {
-        if (value)
-            return;
-        handleChange(predictHours(typedTime, IS_12_HOUR_FORMAT.current));
-    }, DEBOUNCE_TIME), [typedTime, value, handleChange]);
-    /**
-     * Predict the hour when user types a number
-     */
-    useEffect(() => {
-        /**
-         * Don't try to predict if the user types 0 as the user would almost always
-         * type another number after 0.
-         */
-        if (typedTime && typedTime !== "0") {
-            predictTime();
-            if ((IS_12_HOUR_FORMAT && typedTime !== "1") || typedTime.length === 2) {
-                // Immediately predict the hour
-                predictTime.flush();
-            }
-        }
-        return predictTime.cancel;
-    }, [typedTime]);
-    /**
-     * Reset typed time when the value changed
-     */
-    useEffect(() => {
-        setTypedTime("");
-    }, [value]);
-    return {
-        setTypedTime,
-    };
-}
-function predictHours(time, is12HourFormat = false) {
-    const today = new Date();
-    const currentHour = today.getHours();
-    const parsedTime = parseInt(time, 10);
-    let predictedTime;
-    if (is12HourFormat) {
-        predictedTime = predict12Hours(parsedTime, currentHour);
-    }
-    else {
-        predictedTime = predict24Hours(time, parsedTime, currentHour);
-    }
-    return formatHour(predictedTime);
-}
-function predict12Hours(parsedTime, currentHour) {
-    /**
-     * We need to predict what the user wants when they type 1 since it could be
-     * 10, 11, 12, or 1.
-     *
-     * If the current hour is over 12PM, we can skip this and go to the next logic.
-     */
-    if (parsedTime === 1 && currentHour < 12) {
-        if (currentHour < 10) {
-            return 10;
-        }
-        else {
-            return currentHour + 1;
-        }
-    }
-    /**
-     * Typing 1-5 predicts that the user want that exact hour on the afternoon.
-     */
-    if (parsedTime <= 5) {
-        return parsedTime + 12;
-    }
-    /**
-     * Typing 13-15 predicts that the user want the 2nd number as the minute interval.
-     */
-    if (parsedTime > 12 && parsedTime <= 15) {
-        const timeArray = parsedTime.toString().split("").map(Number); // 13 -> [1, 3]
-        const convertToHoursAndMinutes = timeArray.map((time, i) => {
-            if (i === 0)
-                return time + 12; // 1 -> 13 as 1PM
-            if (i === 1)
-                return time * 10; // 3 -> 30 as 30 minutes
-        });
-        return Number(convertToHoursAndMinutes.join("")); // [13, 30] -> 1330
-    }
-    /**
-     * Anything after 5 will be predicted to be set as AM.
-     */
-    return parsedTime;
-}
-function predict24Hours(time, parsedTime, currentHour) {
-    /**
-     * Typing 1 could be predicted from 10 to 19.
-     * Typing 01 skips this logic and sets the time to 01:00.
-     */
-    if (parsedTime === 1 && time !== "01") {
-        if (currentHour < 10 || currentHour > 19) {
-            return 10;
-        }
-        else {
-            return currentHour + 1;
-        }
-    }
-    /**
-     * Typing 2 could be predicted from 20 to 24.
-     * Typing 02 skips this logic and sets the time to 02:00.
-     */
-    if (parsedTime === 2 && time !== "02") {
-        if (currentHour < 20) {
-            return 20;
-        }
-        else {
-            return currentHour + 1;
-        }
-    }
-    /**
-     * Typing 24 or 00 is set to midnight. This ensures the time doesn't get set
-     * to 24 as that would be invalid.
-     */
-    if (parsedTime === 24 || time === "00") {
-        return 0;
-    }
-    return parsedTime;
-}
-function formatHour(time) {
-    if (time > 99) {
-        const splitTime = time.toString().split("");
-        if (splitTime.length === 3)
-            splitTime.unshift("0"); // 130 -> 0130
-        splitTime.splice(2, 0, ":"); // 0130 -> 01:30
-        return splitTime.join("");
-    }
-    if (time < 10) {
-        return `0${time}:00`;
-    }
-    return `${time}:00`;
-}
-
-function InputTime(_a) {
-    var { defaultValue, value, onChange } = _a, params = __rest(_a, ["defaultValue", "value", "onChange"]);
-    const ref = useRef(null);
-    const { setTypedTime } = useTimePredict({ value, handleChange });
-    const fieldProps = Object.assign(Object.assign(Object.assign({ onChange: handleChange }, (defaultValue && { defaultValue: civilTimeToHTMLTime(defaultValue) })), (!defaultValue && { value: civilTimeToHTMLTime(value) })), params);
-    return (React.createElement(FormField, Object.assign({ inputRef: ref, type: "time" }, fieldProps, { onBlur: handleBlur, onKeyUp: e => {
-            var _a;
-            (_a = fieldProps.onKeyUp) === null || _a === void 0 ? void 0 : _a.call(fieldProps, e);
-            !isNaN(parseInt(e.key, 10)) && setTypedTime(prev => prev + e.key);
-        } })));
-    function handleChange(newValue) {
-        onChange === null || onChange === void 0 ? void 0 : onChange(htmlTimeToCivilTime(newValue));
-    }
-    function handleBlur() {
-        var _a;
-        (_a = params.onBlur) === null || _a === void 0 ? void 0 : _a.call(params);
-        // Time inputs doesn't clear the typed value when it's invalid. This should
-        // force it to reset the input value when the typed value is invalid.
-        if (ref.current) {
-            if (!ref.current.checkValidity()) {
-                ref.current.value = "";
-            }
-        }
-    }
-}
-
-export { InputTime as I };

package/dist/InputTime.cjs

@@ -1,27 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var InputTime = require('./InputTime-3c4bdff0.js');
-require('./tslib.es6-754e2961.js');
-require('react');
-require('@std-proposal/temporal');
-require('lodash/debounce');
-require('./FormField-fc30bb1a.js');
-require('react-hook-form');
-require('./style-inject.es-9d2f5f4e.js');
-require('classnames');
-require('@jobber/hooks/useShowClear');
-require('./Button-ec64869e.js');
-require('react-router-dom');
-require('./Icon-405a216c.js');
-require('@jobber/design');
-require('./Typography-fd88fcce.js');
-require('./Text-714f7d14.js');
-require('./InputValidation-4a61254d.js');
-require('framer-motion');
-require('./Spinner-3480bc34.js');
-
-
-
-exports.InputTime = InputTime.InputTime;

package/dist/InputTime.js

@@ -1,19 +0,0 @@
-export { I as InputTime } from './InputTime-ef8af2d9.js';
-import './tslib.es6-c563c1dd.js';
-import 'react';
-import '@std-proposal/temporal';
-import 'lodash/debounce';
-import './FormField-f1f405d2.js';
-import 'react-hook-form';
-import './style-inject.es-a0e1a0ba.js';
-import 'classnames';
-import '@jobber/hooks/useShowClear';
-import './Button-30154871.js';
-import 'react-router-dom';
-import './Icon-22723fe6.js';
-import '@jobber/design';
-import './Typography-52ed1386.js';
-import './Text-c92ddeb3.js';
-import './InputValidation-fe42fc3f.js';
-import 'framer-motion';
-import './Spinner-90081e20.js';

package/dist/InputValidation-fe42fc3f.js

@@ -1,23 +0,0 @@
-import React from 'react';
-import { AnimatePresence, motion } from 'framer-motion';
-import { s as styleInject } from './style-inject.es-a0e1a0ba.js';
-import { T as Text } from './Text-c92ddeb3.js';
-import { I as Icon } from './Icon-22723fe6.js';
-
-var css_248z = ".sc-bFJieXBA- {\n  margin-top: var(--space-smaller);\n}\n\n.xybhC5Y6mk4- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n      align-items: center;\n  padding: var(--space-smaller);\n  padding-left: 0;\n}\n\n.xybhC5Y6mk4- > svg {\n  margin-right: var(--space-smaller);\n  -ms-flex-negative: 0;\n      flex-shrink: 0;\n  -ms-flex-item-align: start;\n      align-self: flex-start;\n}\n\n.xybhC5Y6mk4-:focus {\n  box-shadow: var(--shadow-focus);\n  outline: none;\n}\n";
-var styles = {"hasValidationMessage":"sc-bFJieXBA-","message":"xybhC5Y6mk4-"};
-styleInject(css_248z);
-
-function InputValidation({ message }) {
-    const messages = [message];
-    const variants = {
-        slideOut: { y: "5%", opacity: 0 },
-        slideIn: { y: 0, opacity: 1 },
-    };
-    return (React.createElement(React.Fragment, null, messages && messages.length > 0 && (React.createElement(AnimatePresence, { mode: "wait" }, messages.map(msg => (React.createElement(motion.div, { key: `validation-${msg}`, variants: variants, initial: "slideOut", animate: "slideIn", exit: "slideOut", transition: { duration: 0.2 } },
-        React.createElement("div", { className: styles.message, "aria-live": "assertive", role: "alert", tabIndex: 0 },
-            React.createElement(Icon, { name: "alert", size: "small", color: "critical" }),
-            React.createElement(Text, { size: "small", variation: "error" }, msg)))))))));
-}
-
-export { InputValidation as I };

package/dist/InputValidation.js

@@ -1,9 +0,0 @@
-export { I as InputValidation } from './InputValidation-fe42fc3f.js';
-import 'react';
-import 'framer-motion';
-import './style-inject.es-a0e1a0ba.js';
-import './Text-c92ddeb3.js';
-import './Typography-52ed1386.js';
-import 'classnames';
-import './Icon-22723fe6.js';
-import '@jobber/design';