@jobber/components 6.5.3 → 6.5.4-MIKEpull--7b61b13.30

package/dist/Autocomplete/index.cjs

@@ -16,13 +16,13 @@ require('@jobber/design');
 require('../Heading-cjs.js');
 require('../InputText-cjs.js');
 require('../FormField-cjs.js');
-require('react-hook-form');
 require('framer-motion');
 require('../Button-cjs.js');
 require('react-router-dom');
 require('../useFormFieldFocus-cjs.js');
 require('../InputValidation-cjs.js');
 require('../Spinner-cjs.js');
+require('react-hook-form');
 require('../debounce-cjs.js');
 require('../_commonjsHelpers-cjs.js');
 require('../isObjectLike-cjs.js');

package/dist/Autocomplete/index.mjs

@@ -14,13 +14,13 @@ import '@jobber/design';
 import '../Heading-es.js';
 import '../InputText-es.js';
 import '../FormField-es.js';
-import 'react-hook-form';
 import 'framer-motion';
 import '../Button-es.js';
 import 'react-router-dom';
 import '../useFormFieldFocus-es.js';
 import '../InputValidation-es.js';
 import '../Spinner-es.js';
+import 'react-hook-form';
 import '../debounce-es.js';
 import '../_commonjsHelpers-es.js';
 import '../isObjectLike-es.js';

package/dist/DataList/components/DataListSearch/index.cjs

@@ -11,8 +11,6 @@ require('@jobber/design');
 require('../../../InputText-cjs.js');
 require('../../../useSafeLayoutEffect-cjs.js');
 require('../../../FormField-cjs.js');
-require('../../../tslib.es6-cjs.js');
-require('react-hook-form');
 require('framer-motion');
 require('../../../Button-cjs.js');
 require('react-router-dom');
@@ -22,6 +20,8 @@ require('../../../Text-cjs.js');
 require('../../../useFormFieldFocus-cjs.js');
 require('../../../InputValidation-cjs.js');
 require('../../../Spinner-cjs.js');
+require('../../../tslib.es6-cjs.js');
+require('react-hook-form');
 require('../../../DataListContext-cjs.js');
 require('../../../noop-cjs.js');
 require('../../../DataList.const-cjs.js');

package/dist/DataList/components/DataListSearch/index.mjs

@@ -9,8 +9,6 @@ import '@jobber/design';
 import '../../../InputText-es.js';
 import '../../../useSafeLayoutEffect-es.js';
 import '../../../FormField-es.js';
-import '../../../tslib.es6-es.js';
-import 'react-hook-form';
 import 'framer-motion';
 import '../../../Button-es.js';
 import 'react-router-dom';
@@ -20,6 +18,8 @@ import '../../../Text-es.js';
 import '../../../useFormFieldFocus-es.js';
 import '../../../InputValidation-es.js';
 import '../../../Spinner-es.js';
+import '../../../tslib.es6-es.js';
+import 'react-hook-form';
 import '../../../DataListContext-es.js';
 import '../../../noop-es.js';
 import '../../../DataList.const-es.js';

package/dist/DataTable/index.cjs

@@ -16,7 +16,6 @@ require('../tslib.es6-cjs.js');
 require('../Content-cjs.js');
 require('../Option-cjs.js');
 require('../FormField-cjs.js');
-require('react-hook-form');
 require('framer-motion');
 require('@jobber/design');
 require('../Button-cjs.js');
@@ -27,6 +26,7 @@ require('../Text-cjs.js');
 require('../useFormFieldFocus-cjs.js');
 require('../InputValidation-cjs.js');
 require('../Spinner-cjs.js');
+require('react-hook-form');
 
 
 

package/dist/DataTable/index.mjs

@@ -14,7 +14,6 @@ import '../tslib.es6-es.js';
 import '../Content-es.js';
 import '../Option-es.js';
 import '../FormField-es.js';
-import 'react-hook-form';
 import 'framer-motion';
 import '@jobber/design';
 import '../Button-es.js';
@@ -25,3 +24,4 @@ import '../Text-es.js';
 import '../useFormFieldFocus-es.js';
 import '../InputValidation-es.js';
 import '../Spinner-es.js';
+import 'react-hook-form';

package/dist/FormField/FormFieldAffix.d.ts

@@ -5,9 +5,9 @@ interface AffixLabelProps extends Affix {
     readonly labelRef: RefObject<HTMLDivElement>;
     readonly variation?: "prefix" | "suffix";
 }
-export declare function AffixLabel({ label, variation, labelRef, }: AffixLabelProps): JSX.Element;
+export declare function AffixLabel({ label, variation, labelRef, }: AffixLabelProps): JSX.Element | null;
 interface AffixIconProps extends Pick<FormFieldProps, "size"> {
     readonly variation?: "prefix" | "suffix";
 }
-export declare function AffixIcon({ icon, onClick, ariaLabel, variation, size, }: AffixIconProps & XOR<Affix, Suffix>): JSX.Element;
+export declare function AffixIcon({ icon, onClick, ariaLabel, variation, size, }: AffixIconProps & XOR<Affix, Suffix>): JSX.Element | null;
 export {};

package/dist/FormField/FormFieldDescription.d.ts

@@ -1,6 +1,7 @@
 interface FormFieldDescriptionProps {
     readonly id: string;
-    readonly description: string;
+    readonly description?: string;
+    readonly visible?: boolean;
 }
-export declare function FormFieldDescription({ id, description, }: FormFieldDescriptionProps): JSX.Element;
+export declare function FormFieldDescription({ id, description, visible, }: FormFieldDescriptionProps): JSX.Element | null;
 export {};

package/dist/FormField/FormFieldPostFix.d.ts

@@ -1,5 +1,6 @@
 interface FormFieldPostFixProps {
     readonly variation: "select" | "spinner";
+    readonly visible?: boolean;
 }
-export declare function FormFieldPostFix({ variation }: FormFieldPostFixProps): JSX.Element;
+export declare function FormFieldPostFix({ variation, visible, }: FormFieldPostFixProps): JSX.Element | null;
 export {};

package/dist/FormField/FormFieldTypes.d.ts

@@ -4,6 +4,7 @@ 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 KeyBoardTypes = "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal";
 export type AutocompleteTypes = "one-time-code" | "address-line1" | "address-line2";
 export interface FieldActionsRef {
     setValue(value: string | number): void;
@@ -83,6 +84,10 @@ export interface CommonFormFieldProps {
      * set it to `always`.
      */
     readonly clearable?: Clearable;
+    /**
+     * Which version of the Field to use
+     */
+    version?: 1;
 }
 export interface FormFieldProps extends CommonFormFieldProps {
     actionsRef?: RefObject<FieldActionsRef>;

package/dist/FormField/FormFieldWrapper.d.ts

@@ -1,7 +1,7 @@
-import { PropsWithChildren } from "react";
+import React, { PropsWithChildren, ReactNode } from "react";
 import { Clearable } from "@jobber/hooks/useShowClear";
 import { FormFieldProps } from "./FormFieldTypes";
-interface FormFieldWrapperProps extends FormFieldProps {
+export interface FormFieldWrapperProps extends FormFieldProps {
     readonly error: string;
     readonly identifier: string;
     readonly descriptionIdentifier: string;
@@ -9,4 +9,29 @@ interface FormFieldWrapperProps extends FormFieldProps {
     readonly onClear: () => void;
 }
 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 {};
+export declare function FormFieldInputHorizontalWrapper({ children, }: PropsWithChildren): JSX.Element;
+export declare function FormFieldInputWrapperStyles({ children, }: {
+    readonly children: React.ReactNode;
+}): JSX.Element;
+export declare function FormFieldWrapperMain({ children, tabIndex, }: {
+    readonly children: React.ReactNode;
+    readonly tabIndex?: number;
+}): JSX.Element;
+export declare function FormFieldLabel({ placeholder, identifier, style, }: {
+    readonly placeholder?: string;
+    readonly identifier?: string;
+    readonly style?: React.CSSProperties;
+}): JSX.Element | null;
+export declare function FormFieldWrapperToolbar({ toolbar, isToolbarVisible, toolbarAnimationEnd, toolbarAnimationStart, toolbarVisibility, }: {
+    readonly toolbarVisibility: string;
+    readonly isToolbarVisible: boolean;
+    readonly toolbarAnimationEnd: {
+        opacity: number;
+        height: number;
+    };
+    readonly toolbarAnimationStart: {
+        opacity: number;
+        height: string | number;
+    };
+    readonly toolbar: ReactNode;
+}): JSX.Element;

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

@@ -1,8 +1,10 @@
+import React from "react";
 interface ClearActionProps {
     /**
      * Click handler
      */
     readonly onClick: () => void;
+    readonly visible?: boolean;
 }
-export declare function ClearAction({ onClick }: ClearActionProps): JSX.Element;
+export declare function ClearAction({ onClick, visible, }: ClearActionProps): React.ReactElement | null;
 export {};

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

@@ -0,0 +1,91 @@
+import { ChangeEvent, FocusEvent, KeyboardEvent } from "react";
+import { UseControllerReturn } from "react-hook-form";
+import type { FormFieldProps, KeyBoardTypes } from "../FormFieldTypes";
+export interface useAtlantisFormFieldProps extends Pick<FormFieldProps, "description" | "disabled" | "readonly" | "inline" | "autofocus"> {
+    /**
+     * The html id for the field
+     */
+    readonly id: string;
+    /**
+     * The name for the html input field if one if provided by consumers of the component
+     */
+    readonly nameProp?: string;
+    /**
+     * The auto-generated name for the html input field if a nameProp is not provided
+     */
+    readonly name: string;
+    /**
+     * The ref used to access the FieldActions of the field
+     */
+    /**
+     * The field returned from react-hook-form's useController
+     */
+    readonly useControllerField: Omit<UseControllerReturn["field"], "ref" | "onChange" | "onBlur">;
+    /**
+     * The keyboard type for the field. This is used to provide hints to the browser about the type of keyboard to display on mobile devices
+     */
+    readonly keyboard?: KeyBoardTypes;
+    /**
+     * The error message for the field
+     */
+    readonly errorMessage: string;
+    /**
+     * Determines if the field has validations
+     */
+    readonly validations: boolean;
+    /**
+     * Callback for when the field value changes
+     */
+    handleChange: (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => void;
+    /**
+     * Callback for when the field loses focus
+     */
+    handleBlur: () => void;
+    /**
+     * Callback for when the field gains focus
+     */
+    handleFocus: (event: FocusEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => void;
+    /**
+     * Callback for when keydown event is triggered on the field
+     */
+    handleKeyDown: (event: KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    /**
+     * Callback that exposes the error message when the field is validated
+     */
+    handleValidation: (message: string) => void;
+}
+/**
+ * Provides the props for the html fields rendered by the FormField component
+ */
+export declare function useAtlantisFormField({ id, nameProp, name, useControllerField: useControllerField, description, disabled, readonly, keyboard, autofocus, handleChange, handleBlur, handleFocus, inline, validations, handleKeyDown, handleValidation, errorMessage, }: useAtlantisFormFieldProps): {
+    textFieldProps: {
+        autoFocus: boolean | undefined;
+        onKeyDown: (event: KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+        "aria-describedby"?: string | undefined;
+        id: string;
+        className: string;
+        name: string | undefined;
+        disabled: boolean | undefined;
+        readOnly: boolean | undefined;
+        inputMode: KeyBoardTypes | undefined;
+        onChange: (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => void;
+        onBlur: () => void;
+        onFocus: (event: FocusEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => void;
+        value: any;
+    };
+    fieldProps: {
+        "aria-describedby"?: string | undefined;
+        id: string;
+        className: string;
+        name: string | undefined;
+        disabled: boolean | undefined;
+        readOnly: boolean | undefined;
+        inputMode: KeyBoardTypes | undefined;
+        onChange: (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => void;
+        onBlur: () => void;
+        onFocus: (event: FocusEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => void;
+        autoFocus: boolean | undefined;
+        value: any;
+    };
+    descriptionIdentifier: string;
+};

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

@@ -0,0 +1,22 @@
+import { ChangeEvent, FocusEvent, KeyboardEvent } from "react";
+import { FieldValues, UseFormSetValue } from "react-hook-form";
+import { FormFieldProps, FormFieldTypes } from "../FormFieldTypes";
+export interface useAtlantisFormFieldActionsProps extends Pick<FormFieldProps, "onChange" | "inputRef" | "onEnter" | "readonly" | "onFocus" | "onBlur" | "onValidation" | "onEnter"> {
+    readonly name: string;
+    readonly onControllerChange: (...event: unknown[]) => void;
+    readonly onControllerBlur: () => void;
+    readonly type: FormFieldTypes;
+    readonly setValue: UseFormSetValue<FieldValues>;
+}
+/**
+ * Combines the actions from the props of the FormField with the actions from react-hook-form. This is used to
+ * manage the form state of a field through react-hook-form while providing support for additional callbacks
+ */
+export declare function useAtlantisFormFieldActions({ name, onChange, inputRef, onControllerChange, onControllerBlur, onEnter, readonly, type, setValue, onFocus, onBlur, onValidation, }: useAtlantisFormFieldActionsProps): {
+    handleClear: () => void;
+    handleChange: (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => void;
+    handleKeyDown: (event: KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    handleFocus: (event: FocusEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => void;
+    handleBlur: () => void;
+    handleValidation: (message: string) => void;
+};

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

@@ -0,0 +1,6 @@
+export declare function useAtlantisFormFieldName({ id, nameProp, }: {
+    id: string;
+    nameProp?: string;
+}): {
+    name: string;
+};

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

@@ -0,0 +1,19 @@
+import { FormFieldProps } from "../FormFieldTypes";
+interface useAtlantisReactFormProps extends Pick<FormFieldProps, "actionsRef" | "defaultValue" | "value" | "validations" | "inputRef"> {
+    name: string;
+}
+/**
+ * Hook used to manage the form state of a field through react-hook-form
+ */
+export declare function useAtlantisReactForm({ actionsRef, name, defaultValue, value, validations, inputRef, }: useAtlantisReactFormProps): {
+    inputRefs: import("react").RefCallback<any>;
+    useControllerField: {
+        value: any;
+        name: string;
+    };
+    setValue: import("react-hook-form").UseFormSetValue<import("react-hook-form").FieldValues>;
+    errorMessage: string;
+    onControllerChange: (...event: any[]) => void;
+    onControllerBlur: import("react-hook-form").Noop;
+};
+export {};

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

@@ -0,0 +1,29 @@
+import { RefObject } from "react";
+import { FormFieldProps } from "../FormFieldTypes";
+export interface useFormFieldWrapperStylesProps extends Pick<FormFieldProps, "size" | "align" | "placeholder" | "value" | "invalid" | "max" | "maxLength" | "type" | "disabled" | "inline"> {
+    readonly error: string;
+    suffixRef: RefObject<HTMLDivElement>;
+    prefixRef: RefObject<HTMLDivElement>;
+}
+export interface LabelPadding {
+    paddingLeft: number | string | undefined;
+    paddingRight: number | string | undefined;
+}
+/**
+ * Hook for getting the correct styles for the FormField and its children
+ */
+export declare function useFormFieldWrapperStyles({ size, align, placeholder, value, invalid, error, max, prefixRef, suffixRef, maxLength, type, disabled, inline, }: useFormFieldWrapperStylesProps): {
+    inputStyle: string;
+    wrapperClasses: string;
+    containerClasses: string;
+    wrapperInlineStyle: {
+        [x: string]: number | undefined;
+    };
+    labelStyle: LabelPadding;
+    setLabelStyle: import("react").Dispatch<import("react").SetStateAction<LabelPadding>>;
+};
+export interface GetAffixProps extends FormFieldProps {
+    prefixWidth: number;
+    suffixWidth: number;
+}
+export declare function getAffixPaddding({ value, type, prefixWidth, suffixWidth, }: GetAffixProps): LabelPadding;

package/dist/FormField/index.cjs

@@ -1,12 +1,10 @@
 'use strict';
 
 var FormField = require('../FormField-cjs.js');
-require('../tslib.es6-cjs.js');
 require('react');
-require('react-hook-form');
-require('classnames');
 require('framer-motion');
 require('@jobber/design');
+require('classnames');
 require('../Button-cjs.js');
 require('react-router-dom');
 require('../Icon-cjs.js');
@@ -15,7 +13,15 @@ require('../Text-cjs.js');
 require('../useFormFieldFocus-cjs.js');
 require('../InputValidation-cjs.js');
 require('../Spinner-cjs.js');
+require('../tslib.es6-cjs.js');
+require('react-hook-form');
 
 
 
 exports.FormField = FormField.FormField;
+exports.FormFieldWrapper = FormField.FormFieldWrapper;
+exports.useAtlantisFormField = FormField.useAtlantisFormField;
+exports.useAtlantisFormFieldActions = FormField.useAtlantisFormFieldActions;
+exports.useAtlantisFormFieldName = FormField.useAtlantisFormFieldName;
+exports.useAtlantisReactForm = FormField.useAtlantisReactForm;
+exports.useFormFieldWrapperStyles = FormField.useFormFieldWrapperStyles;

package/dist/FormField/index.d.ts

@@ -1,2 +1,8 @@
 export * from "./FormField";
 export * from "./FormFieldTypes";
+export { useAtlantisFormField } from "./hooks/useAtlantisFormField";
+export { useAtlantisFormFieldActions } from "./hooks/useAtlantisFormFieldActions";
+export { useAtlantisFormFieldName } from "./hooks/useAtlantisFormFieldName";
+export { useAtlantisReactForm } from "./hooks/useAtlantisReactHookForm";
+export { FormFieldWrapper } from "./FormFieldWrapper";
+export { useFormFieldWrapperStyles, useFormFieldWrapperStylesProps, } from "./hooks/useFormFieldWrapperStyles";

package/dist/FormField/index.mjs

@@ -1,10 +1,8 @@
-export { F as FormField } from '../FormField-es.js';
-import '../tslib.es6-es.js';
+export { e as FormField, F as FormFieldWrapper, u as useAtlantisFormField, a as useAtlantisFormFieldActions, b as useAtlantisFormFieldName, c as useAtlantisReactForm, d as useFormFieldWrapperStyles } from '../FormField-es.js';
 import 'react';
-import 'react-hook-form';
-import 'classnames';
 import 'framer-motion';
 import '@jobber/design';
+import 'classnames';
 import '../Button-es.js';
 import 'react-router-dom';
 import '../Icon-es.js';
@@ -13,3 +11,5 @@ import '../Text-es.js';
 import '../useFormFieldFocus-es.js';
 import '../InputValidation-es.js';
 import '../Spinner-es.js';
+import '../tslib.es6-es.js';
+import 'react-hook-form';