@jobber/components 6.50.0 → 6.51.0

package/dist/InputEmail/InputEmail.d.ts

@@ -1,5 +1,2 @@
-import { CommonFormFieldProps, FormFieldProps } from "../FormField";
-type InputEmailProps = CommonFormFieldProps & Pick<FormFieldProps, "maxLength" | "readonly" | "validations" | "defaultValue">;
-export declare const validationMessage = "Please enter a valid email";
-export declare function InputEmail(props: InputEmailProps): JSX.Element;
-export {};
+import { InputEmailLegacyProps } from "./InputEmail.types";
+export declare function InputEmail(props: InputEmailLegacyProps): JSX.Element;

package/dist/InputEmail/InputEmail.rebuilt.d.ts

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

package/dist/InputEmail/InputEmail.types.d.ts

@@ -0,0 +1,33 @@
+import { Clearable } from "@jobber/hooks";
+import { CommonFormFieldProps, FormFieldProps } from "../FormField";
+export type InputEmailLegacyProps = CommonFormFieldProps & Pick<FormFieldProps, "maxLength" | "readonly" | "validations" | "defaultValue">;
+export declare const validationMessage = "Please enter a valid email";
+export type InputEmailVersion = 1 | 2 | undefined;
+/**
+ * Experimental version 2 of the InputEmail component.
+ * Do not use unless you have talked with Atlantis first.
+ */
+export interface InputEmailRebuiltProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange" | "onBlur" | "size" | "suffix" | "prefix" | "value" | "max" | "min" | "defaultValue"> {
+    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;
+    /**
+     * Version 2 is highly experimental. Avoid using it unless you have talked with Atlantis first.
+     */
+    readonly version: 2;
+    readonly onChange?: (newValue: string, event?: React.ChangeEvent<HTMLInputElement>) => void;
+    readonly onEnter?: FormFieldProps["onEnter"];
+    readonly onBlur?: FormFieldProps["onBlur"];
+    readonly value?: string;
+    readonly size?: FormFieldProps["size"];
+    readonly inline?: FormFieldProps["inline"];
+    readonly align?: FormFieldProps["align"];
+    readonly prefix?: FormFieldProps["prefix"];
+    readonly suffix?: FormFieldProps["suffix"];
+    readonly description?: FormFieldProps["description"];
+}

package/dist/InputEmail/hooks/useInputEmailActions.d.ts

@@ -0,0 +1,12 @@
+import { ChangeEvent, FocusEvent, KeyboardEvent } from "react";
+import { InputEmailRebuiltProps } from "../InputEmail.types";
+export interface UseInputEmailActionsProps extends Pick<InputEmailRebuiltProps, "onChange" | "onEnter" | "onFocus" | "onBlur" | "onKeyDown"> {
+    inputRef?: React.RefObject<HTMLInputElement>;
+}
+export declare function useInputEmailActions({ onChange, inputRef, onEnter, onFocus, onBlur, onKeyDown, }: UseInputEmailActionsProps): {
+    handleClear: () => void;
+    handleChange: (event: ChangeEvent<HTMLInputElement>) => void;
+    handleKeyDown: (event: KeyboardEvent<HTMLInputElement>) => void;
+    handleFocus: (event: FocusEvent<HTMLInputElement>) => void;
+    handleBlur: (event?: FocusEvent) => void;
+};

package/dist/InputEmail/hooks/useInputEmailFormField.d.ts

@@ -0,0 +1,32 @@
+import { ChangeEvent, FocusEvent, KeyboardEvent } from "react";
+export interface UseInputEmailFormFieldProps {
+    readonly id: string;
+    readonly name: string;
+    readonly disabled?: boolean;
+    readonly autofocus?: boolean;
+    readonly error?: string;
+    readonly inline?: boolean;
+    readonly description?: string;
+    readonly invalid?: boolean;
+    readonly value?: string;
+    readonly handleChange: (event: ChangeEvent<HTMLInputElement>) => void;
+    readonly handleBlur: (event?: FocusEvent<HTMLInputElement>) => void;
+    readonly handleFocus: (event: FocusEvent<HTMLInputElement>) => void;
+    readonly handleKeyDown: (event: KeyboardEvent<HTMLInputElement>) => void;
+}
+export interface UseInputEmailFormFieldReturn {
+    readonly fieldProps: {
+        readonly id: string;
+        readonly name: string;
+        readonly disabled?: boolean;
+        readonly autofocus?: boolean;
+        readonly onChange: (event: ChangeEvent<HTMLInputElement>) => void;
+        readonly onBlur: (event?: FocusEvent<HTMLInputElement>) => void;
+        readonly onFocus: (event: FocusEvent<HTMLInputElement>) => void;
+        readonly onKeyDown: (event: KeyboardEvent<HTMLInputElement>) => void;
+        readonly value?: string;
+        readonly "aria-describedby"?: string;
+    };
+    readonly descriptionIdentifier: string;
+}
+export declare function useInputEmailFormField({ id, name, disabled, autofocus, description, inline, value, handleChange, handleBlur, handleFocus, handleKeyDown, error, ...rest }: UseInputEmailFormFieldProps): UseInputEmailFormFieldReturn;

package/dist/InputEmail/index.cjs

@@ -1,23 +1,136 @@
 'use strict';
 
-var InputEmail = require('../InputEmail-cjs.js');
-require('react');
-require('../FormField-cjs.js');
+var React = require('react');
+var FormField = require('../FormField-cjs.js');
+require('classnames');
+var tslib_es6 = require('../tslib.es6-cjs.js');
+require('react-hook-form');
 require('framer-motion');
 require('@jobber/design');
-require('classnames');
 require('../Button-cjs.js');
-require('react-router-dom');
-require('../tslib.es6-cjs.js');
 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-hook-form');
+require('react-router-dom');
+
+const validationMessage = "Please enter a valid email";
+
+function InputEmail$1(props) {
+    const { validations } = props;
+    return (React.createElement(FormField.FormField, Object.assign({}, props, { type: "email", validations: Object.assign(Object.assign({}, validations), { validate: checkForValidEmail }) })));
+    function checkForValidEmail(value) {
+        const emailRegex = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+        if (!value) {
+            return true;
+        }
+        if (!value.match(emailRegex)) {
+            return validationMessage;
+        }
+        return true;
+    }
+}
+
+function useInputEmailActions({ onChange, inputRef, onEnter, onFocus, onBlur, onKeyDown, }) {
+    function handleClear() {
+        var _a;
+        handleBlur();
+        onChange === null || onChange === void 0 ? void 0 : 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 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 handleFocus(event) {
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
+    }
+    function handleBlur(event) {
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+    }
+    return {
+        handleClear,
+        handleChange,
+        handleKeyDown,
+        handleFocus,
+        handleBlur,
+    };
+}
+
+function useInputEmailFormField(_a) {
+    var { id, name, disabled, autofocus, description, inline, value, handleChange, handleBlur, handleFocus, handleKeyDown, error } = _a, rest = tslib_es6.__rest(_a, ["id", "name", "disabled", "autofocus", "description", "inline", "value", "handleChange", "handleBlur", "handleFocus", "handleKeyDown", "error"]);
+    const descriptionIdentifier = `descriptionUUID--${id}`;
+    const fieldProps = 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 }));
+    return { fieldProps, descriptionIdentifier };
+}
 
+const InputEmailRebuilt = React.forwardRef(function InputEmailInternal(props, ref) {
+    var _a, _b, _c;
+    const id = React.useId();
+    const inputRef = (_a = ref) !== null && _a !== void 0 ? _a : React.useRef(null);
+    const wrapperRef = React.useRef(null);
+    const { inputStyle } = FormField.useFormFieldWrapperStyles({
+        size: props.size,
+        inline: props.inline,
+        align: props.align,
+        type: "email",
+        value: props.value,
+        invalid: props.invalid,
+        error: props.error,
+        maxLength: props.maxLength,
+        disabled: props.disabled,
+        placeholder: props.placeholder,
+    });
+    const { name } = FormField.useAtlantisFormFieldName({
+        nameProp: props.name,
+        id,
+    });
+    const { handleChange, handleBlur, handleFocus, handleKeyDown, handleClear } = useInputEmailActions({
+        onChange: props.onChange,
+        onBlur: props.onBlur,
+        onFocus: props.onFocus,
+        onKeyDown: props.onKeyDown,
+        onEnter: props.onEnter,
+        inputRef,
+    });
+    const { fieldProps, descriptionIdentifier } = useInputEmailFormField(Object.assign(Object.assign({}, props), { id,
+        name,
+        handleChange,
+        handleBlur,
+        handleFocus,
+        handleKeyDown }));
+    return (React.createElement(FormField.FormFieldWrapper, { error: props.error || "", invalid: props.invalid, identifier: props.identifier || id, descriptionIdentifier: descriptionIdentifier, size: props.size, inline: props.inline, align: props.align, prefix: props.prefix, suffix: props.suffix, description: props.description, clearable: (_b = props.clearable) !== null && _b !== void 0 ? _b : "never", onClear: handleClear, wrapperRef: wrapperRef, maxLength: props.maxLength, disabled: props.disabled, type: "email", value: props.value },
+        React.createElement("input", Object.assign({}, fieldProps, { ref: inputRef, type: "email", className: inputStyle, value: props.value, "data-testid": "ATL-InputEmail-input" })),
+        React.createElement(FormField.FormFieldPostFix, { variation: "spinner", visible: (_c = props.loading) !== null && _c !== void 0 ? _c : false }),
+        props.children));
+});
 
+function isNewInputEmailProps(props) {
+    return props.version === 2;
+}
+const InputEmail = React.forwardRef(function InputEmailShim(props, ref) {
+    if (isNewInputEmailProps(props)) {
+        return (React.createElement(InputEmailRebuilt, Object.assign({}, props, { ref: ref })));
+    }
+    else {
+        return React.createElement(InputEmail$1, Object.assign({}, props));
+    }
+});
 
-exports.InputEmail = InputEmail.InputEmail;
-exports.validationMessage = InputEmail.validationMessage;
+exports.InputEmail = InputEmail;

package/dist/InputEmail/index.d.ts

@@ -1 +1,5 @@
-export { InputEmail, validationMessage } from "./InputEmail";
+import React from "react";
+import { InputEmailLegacyProps, InputEmailRebuiltProps } from "./InputEmail.types";
+export type InputEmailShimProps = InputEmailRebuiltProps | InputEmailLegacyProps;
+export declare const InputEmail: React.ForwardRefExoticComponent<InputEmailShimProps & React.RefAttributes<HTMLInputElement>>;
+export { InputEmailRebuiltProps, InputEmailLegacyProps };

package/dist/InputEmail/index.mjs

@@ -1,16 +1,134 @@
-export { I as InputEmail, v as validationMessage } from '../InputEmail-es.js';
-import 'react';
-import '../FormField-es.js';
+import React__default, { forwardRef, useId, useRef } from 'react';
+import { k as FormField, j as useFormFieldWrapperStyles, b as useAtlantisFormFieldName, f as FormFieldWrapper, l as FormFieldPostFix } from '../FormField-es.js';
+import 'classnames';
+import { _ as __rest } from '../tslib.es6-es.js';
+import 'react-hook-form';
 import 'framer-motion';
 import '@jobber/design';
-import 'classnames';
 import '../Button-es.js';
-import 'react-router-dom';
-import '../tslib.es6-es.js';
 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-hook-form';
+import 'react-router-dom';
+
+const validationMessage = "Please enter a valid email";
+
+function InputEmail$1(props) {
+    const { validations } = props;
+    return (React__default.createElement(FormField, Object.assign({}, props, { type: "email", validations: Object.assign(Object.assign({}, validations), { validate: checkForValidEmail }) })));
+    function checkForValidEmail(value) {
+        const emailRegex = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+        if (!value) {
+            return true;
+        }
+        if (!value.match(emailRegex)) {
+            return validationMessage;
+        }
+        return true;
+    }
+}
+
+function useInputEmailActions({ onChange, inputRef, onEnter, onFocus, onBlur, onKeyDown, }) {
+    function handleClear() {
+        var _a;
+        handleBlur();
+        onChange === null || onChange === void 0 ? void 0 : 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 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 handleFocus(event) {
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
+    }
+    function handleBlur(event) {
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+    }
+    return {
+        handleClear,
+        handleChange,
+        handleKeyDown,
+        handleFocus,
+        handleBlur,
+    };
+}
+
+function useInputEmailFormField(_a) {
+    var { id, name, disabled, autofocus, description, inline, value, handleChange, handleBlur, handleFocus, handleKeyDown, error } = _a, rest = __rest(_a, ["id", "name", "disabled", "autofocus", "description", "inline", "value", "handleChange", "handleBlur", "handleFocus", "handleKeyDown", "error"]);
+    const descriptionIdentifier = `descriptionUUID--${id}`;
+    const fieldProps = 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 }));
+    return { fieldProps, descriptionIdentifier };
+}
+
+const InputEmailRebuilt = forwardRef(function InputEmailInternal(props, ref) {
+    var _a, _b, _c;
+    const id = useId();
+    const inputRef = (_a = ref) !== null && _a !== void 0 ? _a : useRef(null);
+    const wrapperRef = useRef(null);
+    const { inputStyle } = useFormFieldWrapperStyles({
+        size: props.size,
+        inline: props.inline,
+        align: props.align,
+        type: "email",
+        value: props.value,
+        invalid: props.invalid,
+        error: props.error,
+        maxLength: props.maxLength,
+        disabled: props.disabled,
+        placeholder: props.placeholder,
+    });
+    const { name } = useAtlantisFormFieldName({
+        nameProp: props.name,
+        id,
+    });
+    const { handleChange, handleBlur, handleFocus, handleKeyDown, handleClear } = useInputEmailActions({
+        onChange: props.onChange,
+        onBlur: props.onBlur,
+        onFocus: props.onFocus,
+        onKeyDown: props.onKeyDown,
+        onEnter: props.onEnter,
+        inputRef,
+    });
+    const { fieldProps, descriptionIdentifier } = useInputEmailFormField(Object.assign(Object.assign({}, props), { id,
+        name,
+        handleChange,
+        handleBlur,
+        handleFocus,
+        handleKeyDown }));
+    return (React__default.createElement(FormFieldWrapper, { error: props.error || "", invalid: props.invalid, identifier: props.identifier || id, descriptionIdentifier: descriptionIdentifier, size: props.size, inline: props.inline, align: props.align, prefix: props.prefix, suffix: props.suffix, description: props.description, clearable: (_b = props.clearable) !== null && _b !== void 0 ? _b : "never", onClear: handleClear, wrapperRef: wrapperRef, maxLength: props.maxLength, disabled: props.disabled, type: "email", value: props.value },
+        React__default.createElement("input", Object.assign({}, fieldProps, { ref: inputRef, type: "email", className: inputStyle, value: props.value, "data-testid": "ATL-InputEmail-input" })),
+        React__default.createElement(FormFieldPostFix, { variation: "spinner", visible: (_c = props.loading) !== null && _c !== void 0 ? _c : false }),
+        props.children));
+});
+
+function isNewInputEmailProps(props) {
+    return props.version === 2;
+}
+const InputEmail = forwardRef(function InputEmailShim(props, ref) {
+    if (isNewInputEmailProps(props)) {
+        return (React__default.createElement(InputEmailRebuilt, Object.assign({}, props, { ref: ref })));
+    }
+    else {
+        return React__default.createElement(InputEmail$1, Object.assign({}, props));
+    }
+});
+
+export { InputEmail };

package/dist/index.cjs

@@ -61,7 +61,7 @@ var Grid = require('./Grid-cjs.js');
 var InlineLabel = require('./InlineLabel-cjs.js');
 var InputAvatar = require('./InputAvatar-cjs.js');
 var InputDate_index = require('./InputDate/index.cjs');
-var InputEmail = require('./InputEmail-cjs.js');
+var InputEmail_index = require('./InputEmail/index.cjs');
 var InputFile = require('./InputFile-cjs.js');
 var InputGroup = require('./InputGroup-cjs.js');
 var InputNumber = require('./InputNumber-cjs.js');
@@ -282,8 +282,7 @@ exports.Grid = Grid.Grid;
 exports.InlineLabel = InlineLabel.InlineLabel;
 exports.InputAvatar = InputAvatar.InputAvatar;
 exports.InputDate = InputDate_index.InputDate;
-exports.InputEmail = InputEmail.InputEmail;
-exports.validationMessage = InputEmail.validationMessage;
+exports.InputEmail = InputEmail_index.InputEmail;
 exports.InputFile = InputFile.InputFile;
 exports.InputFileContentContext = InputFile.InputFileContentContext;
 exports.updateFiles = InputFile.updateFiles;

package/dist/index.mjs

@@ -59,7 +59,7 @@ export { G as GRID_TEST_ID, a as Grid } from './Grid-es.js';
 export { I as InlineLabel } from './InlineLabel-es.js';
 export { I as InputAvatar } from './InputAvatar-es.js';
 export { InputDate } from './InputDate/index.mjs';
-export { I as InputEmail, v as validationMessage } from './InputEmail-es.js';
+export { InputEmail } from './InputEmail/index.mjs';
 export { I as InputFile, a as InputFileContentContext, u as updateFiles, b as useInputFileContentContext } from './InputFile-es.js';
 export { I as InputGroup } from './InputGroup-es.js';
 export { I as InputNumber } from './InputNumber-es.js';