@jobber/components 4.66.0 → 4.66.1-fix-hide-h.6

package/dist/FeatureSwitch/index.cjs

@@ -0,0 +1,24 @@
+'use strict';
+
+var FeatureSwitch = require('../FeatureSwitch-DYxOce4T.js');
+require('react');
+require('framer-motion');
+require('classnames');
+require('../Heading-BhyZ43jQ.js');
+require('../Typography-Dcec2MjG.js');
+require('../Text-CuGgzpie.js');
+require('../Content-DQHuNmbK.js');
+require('../Switch-DRNOFDRD.js');
+require('../Button-CvQJyw1M.js');
+require('react-router-dom');
+require('../Icon-fa-Ii8qc.js');
+require('@jobber/design');
+require('../Emphasis-CKaYb2Cx.js');
+require('../Markdown-DtkyHOef.js');
+require('../index-CUhw1yl4.js');
+require('../_commonjsHelpers-BZy5LDD5.js');
+require('../_polyfill-node.process-CrU1R5tX.js');
+
+
+
+exports.FeatureSwitch = FeatureSwitch.FeatureSwitch;

package/dist/FeatureSwitch/index.mjs

@@ -0,0 +1,18 @@
+export { F as FeatureSwitch } from '../FeatureSwitch-Dz4Lpg14.js';
+import 'react';
+import 'framer-motion';
+import 'classnames';
+import '../Heading-qH5QZFoM.js';
+import '../Typography-BD0mo9T9.js';
+import '../Text-C3-8gHkD.js';
+import '../Content-D7e26CKa.js';
+import '../Switch-BQZyTTVy.js';
+import '../Button-DjFrVgPj.js';
+import 'react-router-dom';
+import '../Icon-GaU33tZU.js';
+import '@jobber/design';
+import '../Emphasis-oLbhQdCV.js';
+import '../Markdown-Dfdw64jl.js';
+import '../index-CL-RNE5C.js';
+import '../_commonjsHelpers-Dy2IPW0w.js';
+import '../_polyfill-node.process-DcZ1HNOw.js';

package/dist/FeatureSwitch-DYxOce4T.js

@@ -0,0 +1,54 @@
+'use strict';
+
+var React = require('react');
+var framerMotion = require('framer-motion');
+var classnames = require('classnames');
+var Heading = require('./Heading-BhyZ43jQ.js');
+var Text = require('./Text-CuGgzpie.js');
+var Content = require('./Content-DQHuNmbK.js');
+var Switch = require('./Switch-DRNOFDRD.js');
+var Button = require('./Button-CvQJyw1M.js');
+var Emphasis = require('./Emphasis-CKaYb2Cx.js');
+var Markdown = require('./Markdown-DtkyHOef.js');
+
+var styles = {"container":"-sVnhIK4hZw-","content":"ZJaXf-cIFgU-","action":"OA-s1YYLMMM-","savedIndicator":"lN90IIewHq8-","featureContent":"mW56hvBHqPM-","enabled":"QfZjM5S-Ls0-"};
+
+function FeatureSwitch({ children, description, disabled = false, enabled, externalLink = false, onEdit, onSwitch, hasSaveIndicator = false, title, }) {
+    const [savedIndicator, setSavedIndicator] = React.useState(false);
+    const featureContentClassnames = classnames(styles.featureContent, styles.content, enabled && styles.enabled);
+    shouldShowSavedIndicator();
+    return (React.createElement(Content.Content, null,
+        React.createElement("div", { className: styles.container },
+            React.createElement("div", { className: styles.content },
+                React.createElement(Content.Content, null,
+                    title && React.createElement(Heading.Heading, { level: 4 }, title),
+                    description && (React.createElement(Text.Text, null,
+                        React.createElement(Markdown.Markdown, { content: description, basicUsage: true, externalLink: externalLink }))))),
+            onSwitch && (React.createElement("div", { className: styles.action },
+                React.createElement(Switch.Switch, { value: enabled, onChange: onSwitch, ariaLabel: description, disabled: disabled }),
+                React.createElement(framerMotion.AnimatePresence, null, hasSaveIndicator && savedIndicator && (React.createElement(framerMotion.motion.div, { className: styles.savedIndicator, initial: { y: -4, opacity: 0 }, animate: { y: 0, opacity: 1 }, exit: { y: -4, opacity: 0 }, transition: {
+                        delay: 0.2,
+                        type: "spring",
+                        damping: 20,
+                        stiffness: 300,
+                    }, onAnimationComplete: handleAnimationComplete },
+                    React.createElement(Text.Text, { variation: "success" },
+                        React.createElement(Emphasis.Emphasis, { variation: "italic" }, "Saved")))))))),
+        (children || onEdit) && (React.createElement("div", { className: styles.container },
+            children && (React.createElement("div", { className: featureContentClassnames }, children)),
+            onEdit && (React.createElement("div", { className: styles.action },
+                React.createElement(Button.Button, { label: "Edit", type: "tertiary", onClick: onEdit })))))));
+    function shouldShowSavedIndicator() {
+        // Check if the component is mounted
+        const [didMount, setDidMount] = React.useState(false);
+        React.useEffect(() => setDidMount(true), []);
+        React.useEffect(() => {
+            didMount && hasSaveIndicator && setSavedIndicator(true);
+        }, [enabled]);
+    }
+    function handleAnimationComplete() {
+        setSavedIndicator(false);
+    }
+}
+
+exports.FeatureSwitch = FeatureSwitch;

package/dist/FeatureSwitch-Dz4Lpg14.js

@@ -0,0 +1,52 @@
+import React, { useState, useEffect } from 'react';
+import { AnimatePresence, motion } from 'framer-motion';
+import classnames from 'classnames';
+import { H as Heading } from './Heading-qH5QZFoM.js';
+import { T as Text } from './Text-C3-8gHkD.js';
+import { C as Content } from './Content-D7e26CKa.js';
+import { S as Switch } from './Switch-BQZyTTVy.js';
+import { B as Button } from './Button-DjFrVgPj.js';
+import { E as Emphasis } from './Emphasis-oLbhQdCV.js';
+import { M as Markdown } from './Markdown-Dfdw64jl.js';
+
+var styles = {"container":"-sVnhIK4hZw-","content":"ZJaXf-cIFgU-","action":"OA-s1YYLMMM-","savedIndicator":"lN90IIewHq8-","featureContent":"mW56hvBHqPM-","enabled":"QfZjM5S-Ls0-"};
+
+function FeatureSwitch({ children, description, disabled = false, enabled, externalLink = false, onEdit, onSwitch, hasSaveIndicator = false, title, }) {
+    const [savedIndicator, setSavedIndicator] = useState(false);
+    const featureContentClassnames = classnames(styles.featureContent, styles.content, enabled && styles.enabled);
+    shouldShowSavedIndicator();
+    return (React.createElement(Content, null,
+        React.createElement("div", { className: styles.container },
+            React.createElement("div", { className: styles.content },
+                React.createElement(Content, null,
+                    title && React.createElement(Heading, { level: 4 }, title),
+                    description && (React.createElement(Text, null,
+                        React.createElement(Markdown, { content: description, basicUsage: true, externalLink: externalLink }))))),
+            onSwitch && (React.createElement("div", { className: styles.action },
+                React.createElement(Switch, { value: enabled, onChange: onSwitch, ariaLabel: description, disabled: disabled }),
+                React.createElement(AnimatePresence, null, hasSaveIndicator && savedIndicator && (React.createElement(motion.div, { className: styles.savedIndicator, initial: { y: -4, opacity: 0 }, animate: { y: 0, opacity: 1 }, exit: { y: -4, opacity: 0 }, transition: {
+                        delay: 0.2,
+                        type: "spring",
+                        damping: 20,
+                        stiffness: 300,
+                    }, onAnimationComplete: handleAnimationComplete },
+                    React.createElement(Text, { variation: "success" },
+                        React.createElement(Emphasis, { variation: "italic" }, "Saved")))))))),
+        (children || onEdit) && (React.createElement("div", { className: styles.container },
+            children && (React.createElement("div", { className: featureContentClassnames }, children)),
+            onEdit && (React.createElement("div", { className: styles.action },
+                React.createElement(Button, { label: "Edit", type: "tertiary", onClick: onEdit })))))));
+    function shouldShowSavedIndicator() {
+        // Check if the component is mounted
+        const [didMount, setDidMount] = useState(false);
+        useEffect(() => setDidMount(true), []);
+        useEffect(() => {
+            didMount && hasSaveIndicator && setSavedIndicator(true);
+        }, [enabled]);
+    }
+    function handleAnimationComplete() {
+        setSavedIndicator(false);
+    }
+}
+
+export { FeatureSwitch as F };

package/dist/Flex/index.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+var Flex = require('../Flex-Xe7j4ihO.js');
+require('react');
+require('classnames');
+
+
+
+exports.Flex = Flex.Flex;

package/dist/Flex/index.mjs

@@ -0,0 +1,3 @@
+export { F as Flex } from '../Flex-DteCYe_w.js';
+import 'react';
+import 'classnames';

package/dist/Flex-DteCYe_w.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import classnames from 'classnames';
+
+var styles = {"flexible":"_8VpnrMKmsqQ-","smallestGap":"ooF1YfV4Usc-","smallerGap":"ppCZfXq-Kqc-","smallGap":"tElkBalXH3g-","baseGap":"_4u3OwUKxxbg-","largeGap":"RL7CJla0AAI-","noneGap":"fV4cvFYkhgo-","startAlign":"_04xVVjZgr-0-","centerAlign":"Nc3zrqHHYSg-","endAlign":"qA-v50wBX1U-"};
+
+function Flex({ align = "center", children, direction = "row", gap = "base", template, }) {
+    return (React.createElement("div", { className: classnames(styles.flexible, {
+            [styles[`${gap}Gap`]]: Boolean(gap),
+            [styles[`${align}Align`]]: Boolean(align),
+        }), style: generateGridStylesFromTemplate(direction, template) }, children));
+}
+function generateGridStylesFromTemplate(direction, layoutTemplate) {
+    const containerStyles = {};
+    const templateKeys = {
+        row: "gridTemplateColumns",
+        column: "gridTemplateRows",
+    };
+    const templateValues = {
+        grow: "1fr",
+        shrink: "max-content",
+    };
+    containerStyles[templateKeys[direction]] = layoutTemplate
+        .map(key => templateValues[key])
+        .join(" ");
+    return containerStyles;
+}
+
+export { Flex as F };

package/dist/Flex-Xe7j4ihO.js

@@ -0,0 +1,30 @@
+'use strict';
+
+var React = require('react');
+var classnames = require('classnames');
+
+var styles = {"flexible":"_8VpnrMKmsqQ-","smallestGap":"ooF1YfV4Usc-","smallerGap":"ppCZfXq-Kqc-","smallGap":"tElkBalXH3g-","baseGap":"_4u3OwUKxxbg-","largeGap":"RL7CJla0AAI-","noneGap":"fV4cvFYkhgo-","startAlign":"_04xVVjZgr-0-","centerAlign":"Nc3zrqHHYSg-","endAlign":"qA-v50wBX1U-"};
+
+function Flex({ align = "center", children, direction = "row", gap = "base", template, }) {
+    return (React.createElement("div", { className: classnames(styles.flexible, {
+            [styles[`${gap}Gap`]]: Boolean(gap),
+            [styles[`${align}Align`]]: Boolean(align),
+        }), style: generateGridStylesFromTemplate(direction, template) }, children));
+}
+function generateGridStylesFromTemplate(direction, layoutTemplate) {
+    const containerStyles = {};
+    const templateKeys = {
+        row: "gridTemplateColumns",
+        column: "gridTemplateRows",
+    };
+    const templateValues = {
+        grow: "1fr",
+        shrink: "max-content",
+    };
+    containerStyles[templateKeys[direction]] = layoutTemplate
+        .map(key => templateValues[key])
+        .join(" ");
+    return containerStyles;
+}
+
+exports.Flex = Flex;

package/dist/Form/index.cjs

@@ -0,0 +1,10 @@
+'use strict';
+
+var Form = require('../Form-DFHfJGo1.js');
+require('../tslib.es6-6AwvlbWV.js');
+require('react');
+require('react-hook-form');
+
+
+
+exports.Form = Form.Form;

package/dist/Form/index.mjs

@@ -0,0 +1,4 @@
+export { F as Form } from '../Form-tQ94FVa0.js';
+import '../tslib.es6-Bu_PBg9i.js';
+import 'react';
+import 'react-hook-form';

package/dist/{Form/index.js → Form-DFHfJGo1.js}

@@ -1,15 +1,9 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var tslib_es6 = require('../tslib.es6-5b8768b7.js');
+var tslib_es6 = require('./tslib.es6-6AwvlbWV.js');
 var React = require('react');
 var reactHookForm = require('react-hook-form');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
 const Form = React.forwardRef(function InternalForm({ onSubmit, children, onStateChange }, ref) {
     const methods = reactHookForm.useForm({ mode: "onTouched" });
     const { trigger, handleSubmit, formState: { isDirty, isValid, errors }, } = methods;
@@ -41,8 +35,8 @@ const Form = React.forwardRef(function InternalForm({ onSubmit, children, onStat
     const formProps = {
         onSubmit: onSubmit && handleSubmit(submitHandler, errorHandler),
     };
-    return (React__default["default"].createElement(reactHookForm.FormProvider, Object.assign({}, methods),
-        React__default["default"].createElement(Wrapper, Object.assign({}, formProps, { "data-testid": "atlantis-form" }), children)));
+    return (React.createElement(reactHookForm.FormProvider, Object.assign({}, methods),
+        React.createElement(Wrapper, Object.assign({}, formProps, { "data-testid": "atlantis-form" }), children)));
     function submitHandler() {
         onSubmit && onSubmit();
     }

package/dist/Form-tQ94FVa0.js

@@ -0,0 +1,48 @@
+import { a as __awaiter } from './tslib.es6-Bu_PBg9i.js';
+import React, { forwardRef, useEffect, useImperativeHandle } from 'react';
+import { useForm, FormProvider } from 'react-hook-form';
+
+const Form = forwardRef(function InternalForm({ onSubmit, children, onStateChange }, ref) {
+    const methods = useForm({ mode: "onTouched" });
+    const { trigger, handleSubmit, formState: { isDirty, isValid, errors }, } = methods;
+    useEffect(() => onStateChange && onStateChange({ isDirty, isValid }), [isDirty, isValid]);
+    useImperativeHandle(ref, () => ({
+        /**
+         * The `trigger()` method can also accept an array
+         * of fields to validate. We may at some point want
+         * to consider adding a `validate()` method to the
+         * `Form` component.
+         */
+        submit: () => __awaiter(this, void 0, void 0, function* () {
+            const valid = yield trigger();
+            if (valid) {
+                submitHandler();
+            }
+            else {
+                trigger();
+                errorHandler(errors);
+            }
+        }),
+    }));
+    /**
+     * If an onSubmit is not passed into a form, it will only be used
+     * for validation. For that, we do not need to wrap it in a <form>
+     * tag. This allows the <Form> component to be used in legacy code.
+     */
+    const Wrapper = onSubmit ? "form" : "div";
+    const formProps = {
+        onSubmit: onSubmit && handleSubmit(submitHandler, errorHandler),
+    };
+    return (React.createElement(FormProvider, Object.assign({}, methods),
+        React.createElement(Wrapper, Object.assign({}, formProps, { "data-testid": "atlantis-form" }), children)));
+    function submitHandler() {
+        onSubmit && onSubmit();
+    }
+    function errorHandler(errs) {
+        const firstErrName = Object.keys(errs)[0];
+        const element = document.querySelector(`[name="${firstErrName}"]`);
+        element === null || element === void 0 ? void 0 : element.focus();
+    }
+});
+
+export { Form as F };

package/dist/FormField/FormFieldAffix.d.ts

@@ -2,8 +2,8 @@ import { RefObject } from "react";
 import { XOR } from "ts-xor";
 import { Affix, FormFieldProps, Suffix } from "./FormFieldTypes";
 interface AffixLabelProps extends Affix {
-    labelRef: RefObject<HTMLDivElement>;
-    variation?: "prefix" | "suffix";
+    readonly labelRef: RefObject<HTMLDivElement>;
+    readonly variation?: "prefix" | "suffix";
 }
 export declare function AffixLabel({ label, variation, labelRef, }: AffixLabelProps): JSX.Element;
 interface AffixIconProps extends Pick<FormFieldProps, "size"> {

package/dist/FormField/FormFieldTypes.d.ts

@@ -1,6 +1,7 @@
 import { ChangeEvent, ReactNode, RefObject } from "react";
 import { RegisterOptions } from "react-hook-form";
 import { XOR } from "ts-xor";
+import { Clearable } from "@jobber/hooks/src/useShowClear";
 import { IconNames } from "../Icon";
 export type FormFieldTypes = "text" | "password" | "number" | "time" | "textarea" | "select" | "tel" | "email";
 export type AutocompleteTypes = "one-time-code" | "address-line1" | "address-line2";
@@ -74,9 +75,21 @@ export interface CommonFormFieldProps {
      * Set the component to the given value.
      */
     readonly value?: string | number | Date;
+    /**
+     * Add a clear action on the input that clears the value.
+     *
+     * You should always use `while-editing` if you want the input to be
+     * clearable. if the input value isn't editable (i.e. `InputTime`) you can
+     * set it to `always`.
+     */
+    readonly clearable?: Clearable;
 }
 export interface FormFieldProps extends CommonFormFieldProps {
     actionsRef?: RefObject<FieldActionsRef>;
+    /**
+     * Determines if the input should be auto-focused, using the HTML attribute
+     */
+    readonly autofocus?: boolean;
     /**
      * Determines if browser form autocomplete is enabled.
      * Note that "one-time-code" is experimental and should not be used without
@@ -90,6 +103,7 @@ export interface FormFieldProps extends CommonFormFieldProps {
      */
     readonly children?: ReactNode;
     inputRef?: RefObject<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>;
+    wrapperRef?: RefObject<HTMLDivElement>;
     /**
      * Initial value of the input. Only use this when you need to pre-populate
      * the field with a data that is not controlled by the components state. If a
@@ -139,6 +153,7 @@ export interface FormFieldProps extends CommonFormFieldProps {
      * Blur callback.
      */
     onBlur?(): void;
+    onKeyUp?(event: React.KeyboardEvent<HTMLInputElement>): void;
     /**
      * Exclusively for textareas. Specifies the visible height of a textarea.
      */
@@ -156,5 +171,13 @@ export interface FormFieldProps extends CommonFormFieldProps {
      * highlights the the field red if an error message shows up.
      */
     readonly validations?: RegisterOptions;
+    /**
+     * Toolbar to render content below the input.
+     */
+    readonly toolbar?: React.ReactNode;
+    /**
+     * Determines the visibility of the toolbar.
+     */
+    readonly toolbarVisibility?: "always" | "while-editing";
 }
 export {};

package/dist/FormField/FormFieldWrapper.d.ts

@@ -1,9 +1,12 @@
 import { PropsWithChildren } from "react";
+import { Clearable } from "@jobber/hooks/useShowClear";
 import { FormFieldProps } from "./FormFieldTypes";
 interface FormFieldWrapperProps extends FormFieldProps {
     readonly error: string;
     readonly identifier: string;
     readonly descriptionIdentifier: string;
+    readonly clearable: Clearable;
+    readonly onClear: () => void;
 }
-export declare function FormFieldWrapper({ align, description, descriptionIdentifier, placeholder, value, children, invalid, error, size, prefix, suffix, max, maxLength, type, disabled, inline, identifier, }: PropsWithChildren<FormFieldWrapperProps>): JSX.Element;
+export declare function FormFieldWrapper({ align, description, descriptionIdentifier, placeholder, value, children, invalid, error, size, prefix, suffix, max, maxLength, type, disabled, inline, identifier, clearable, onClear, toolbar, toolbarVisibility, wrapperRef, }: PropsWithChildren<FormFieldWrapperProps>): JSX.Element;
 export {};

package/dist/FormField/components/ClearAction.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+interface ClearActionProps {
+    /**
+     * Click handler
+     */
+    readonly onClick: () => void;
+}
+export declare function ClearAction({ onClick }: ClearActionProps): JSX.Element;
+export {};

package/dist/FormField/hooks/useFormFieldFocus.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+interface UseFormFieldFocus {
+    focused: boolean;
+}
+interface UseFormFieldFocusProps {
+    wrapperRef?: React.RefObject<HTMLDivElement>;
+}
+export declare const formFieldFocusAttribute: {
+    "data-atl-maintain-portal-focus": string;
+};
+export declare function useFormFieldFocus(props: UseFormFieldFocusProps): UseFormFieldFocus;
+export {};

package/dist/FormField/hooks/useIsSafari.d.ts

@@ -0,0 +1 @@
+export declare function useIsSafari(): boolean;

package/dist/FormField/hooks/useToolbar.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+import { FormFieldProps } from "../FormFieldTypes";
+interface UseToolBarProps {
+    focused: boolean;
+    toolbar: React.ReactNode;
+    toolbarVisibility: FormFieldProps["toolbarVisibility"];
+}
+interface UseToolbar {
+    isToolbarVisible: boolean;
+    toolbarAnimationEnd: {
+        opacity: number;
+        height: number;
+    };
+    toolbarAnimationStart: {
+        opacity: number;
+        height: string | number;
+    };
+}
+export declare function useToolbar(props: UseToolBarProps): UseToolbar;
+export {};

package/dist/FormField/index.cjs

@@ -0,0 +1,21 @@
+'use strict';
+
+var FormField = require('../FormField-CEojfV6Q.js');
+require('../tslib.es6-6AwvlbWV.js');
+require('react');
+require('react-hook-form');
+require('classnames');
+require('framer-motion');
+require('@jobber/design');
+require('../Button-CvQJyw1M.js');
+require('react-router-dom');
+require('../Icon-fa-Ii8qc.js');
+require('../Typography-Dcec2MjG.js');
+require('../Text-CuGgzpie.js');
+require('../useFormFieldFocus-vUhlDUFH.js');
+require('../InputValidation-BjitowrV.js');
+require('../Spinner-b5Q8KXRQ.js');
+
+
+
+exports.FormField = FormField.FormField;

package/dist/FormField/index.mjs

@@ -0,0 +1,15 @@
+export { F as FormField } from '../FormField-BTV2b0gy.js';
+import '../tslib.es6-Bu_PBg9i.js';
+import 'react';
+import 'react-hook-form';
+import 'classnames';
+import 'framer-motion';
+import '@jobber/design';
+import '../Button-DjFrVgPj.js';
+import 'react-router-dom';
+import '../Icon-GaU33tZU.js';
+import '../Typography-BD0mo9T9.js';
+import '../Text-C3-8gHkD.js';
+import '../useFormFieldFocus-CjqwY0nh.js';
+import '../InputValidation-CM_L0IJg.js';
+import '../Spinner-Bg1QOlTK.js';