@jobber/components 4.18.2 → 4.18.3

package/dist/Autocomplete/index.js

@@ -13,10 +13,10 @@ var reactPopper = require('react-popper');
 var Text = require('../Text-e7ed0974.js');
 var Icon = require('../Icon-405a216c.js');
 var Heading = require('../Heading-a1191b15.js');
-var InputText = require('../InputText-fce3bd3e.js');
+var InputText = require('../InputText-a8a571c1.js');
 require('../Typography-fd6f932a.js');
 require('@jobber/design');
-require('../FormField-1a3bafd6.js');
+require('../FormField-c2bc7144.js');
 require('uuid');
 require('react-hook-form');
 require('../Button-7698424c.js');

package/dist/DataTable/index.js

@@ -8,10 +8,10 @@ var React = require('react');
 var jobberHooks = require('@jobber/hooks/useResizeObserver');
 var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
 var tslib_es6 = require('../tslib.es6-5b8768b7.js');
-var Option = require('../Option-7ac3893b.js');
+var Option = require('../Option-2ce89a73.js');
 var Button = require('../Button-7698424c.js');
 var Text = require('../Text-e7ed0974.js');
-require('../FormField-1a3bafd6.js');
+require('../FormField-c2bc7144.js');
 require('uuid');
 require('react-hook-form');
 require('../Icon-405a216c.js');

package/dist/Form/index.js

@@ -12,7 +12,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 const Form = React.forwardRef(function InternalForm({ onSubmit, children, onStateChange }, ref) {
     const methods = reactHookForm.useForm({ mode: "onTouched" });
-    const { errors, trigger, handleSubmit, formState: { isDirty, isValid }, } = methods;
+    const { trigger, handleSubmit, formState: { isDirty, isValid, errors }, } = methods;
     React.useEffect(() => onStateChange && onStateChange({ isDirty, isValid }), [isDirty, isValid]);
     React.useImperativeHandle(ref, () => ({
         /**

package/dist/FormField/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var FormField = require('../FormField-1a3bafd6.js');
+var FormField = require('../FormField-c2bc7144.js');
 require('../tslib.es6-5b8768b7.js');
 require('react');
 require('uuid');

package/dist/{FormField-1a3bafd6.js → FormField-c2bc7144.js}

@@ -118,10 +118,12 @@ function FormFieldPostFix({ variation }) {
     return (React__default["default"].createElement("span", { className: styles.postfix }, variation === "select" ? (React__default["default"].createElement(Icon.Icon, { name: "arrowDown" })) : (React__default["default"].createElement(Spinner.Spinner, { size: "small" }))));
 }
 
+// Added 13th statement to accommodate getErrorMessage function
+/*eslint max-statements: ["error", 13]*/
 function FormField(props) {
-    var _a;
+    var _a, _b;
     const { actionsRef, autocomplete = true, children, defaultValue, description, disabled, inputRef, inline, keyboard, max, maxLength, min, name, readonly, rows, loading, type = "text", validations, value, onChange, onEnter, onFocus, onBlur, onValidation, } = props;
-    const { control, errors, setValue, watch } = reactHookForm.useFormContext() != undefined
+    const { control, formState: { errors }, setValue, watch, } = reactHookForm.useFormContext() != undefined
         ? reactHookForm.useFormContext()
         : // If there isn't a Form Context being provided, get a form for this field.
             reactHookForm.useForm({ mode: "onTouched" });
@@ -143,10 +145,11 @@ function FormField(props) {
             setValue(controlledName, newValue, { shouldValidate: true });
         },
     }));
-    const error = errors[controlledName] && errors[controlledName].message;
+    const message = (_a = errors[controlledName]) === null || _a === void 0 ? void 0 : _a.message;
+    const error = getErrorMessage();
     React.useEffect(() => handleValidation(), [error]);
-    return (React__default["default"].createElement(reactHookForm.Controller, { control: control, name: controlledName, rules: Object.assign({}, validations), defaultValue: (_a = value !== null && value !== void 0 ? value : defaultValue) !== null && _a !== void 0 ? _a : "", render: (_a) => {
-            var { onChange: onControllerChange, onBlur: onControllerBlur, name: controllerName } = _a, rest = tslib_es6.__rest(_a, ["onChange", "onBlur", "name"]);
+    return (React__default["default"].createElement(reactHookForm.Controller, { control: control, name: controlledName, rules: Object.assign({}, validations), defaultValue: (_b = value !== null && value !== void 0 ? value : defaultValue) !== null && _b !== void 0 ? _b : "", render: (_a) => {
+            var _b = _a.field, { onChange: onControllerChange, onBlur: onControllerBlur, name: controllerName } = _b, rest = tslib_es6.__rest(_b, ["onChange", "onBlur", "name"]);
             const fieldProps = Object.assign(Object.assign(Object.assign({}, rest), { id: identifier, className: styles.input, name: (validations || name) && controllerName, disabled: disabled, readOnly: readonly, inputMode: keyboard, onChange: handleChange }), (description &&
                 !inline && { "aria-describedby": descriptionIdentifier }));
             const textFieldProps = Object.assign(Object.assign({}, fieldProps), { onBlur: handleBlur, onFocus: handleFocus, onKeyDown: handleKeyDown });
@@ -195,6 +198,12 @@ function FormField(props) {
                 onControllerBlur();
             }
         } }));
+    function getErrorMessage() {
+        if (typeof message === "string") {
+            return message;
+        }
+        return "";
+    }
     function handleValidation() {
         onValidation && onValidation(error);
     }

package/dist/InputDate/index.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var lodash = require('lodash');
 var React = require('react');
-var FormField = require('../FormField-1a3bafd6.js');
+var FormField = require('../FormField-c2bc7144.js');
 var DatePicker = require('../DatePicker-98f03314.js');
 require('../tslib.es6-5b8768b7.js');
 require('uuid');

package/dist/InputEmail/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var FormField = require('../FormField-1a3bafd6.js');
+var FormField = require('../FormField-c2bc7144.js');
 require('../tslib.es6-5b8768b7.js');
 require('uuid');
 require('react-hook-form');

package/dist/InputNumber/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var FormField = require('../FormField-1a3bafd6.js');
+var FormField = require('../FormField-c2bc7144.js');
 require('../tslib.es6-5b8768b7.js');
 require('uuid');
 require('react-hook-form');

package/dist/InputPassword/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var FormField = require('../FormField-1a3bafd6.js');
+var FormField = require('../FormField-c2bc7144.js');
 require('../tslib.es6-5b8768b7.js');
 require('uuid');
 require('react-hook-form');

package/dist/InputPhoneNumber/index.js

@@ -4,10 +4,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib_es6 = require('../tslib.es6-5b8768b7.js');
 var React = require('react');
+var reactHookForm = require('react-hook-form');
 var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
-var FormField = require('../FormField-1a3bafd6.js');
+var FormField = require('../FormField-c2bc7144.js');
 require('uuid');
-require('react-hook-form');
 require('classnames');
 require('../Button-7698424c.js');
 require('react-router-dom');
@@ -84,6 +84,10 @@ 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__default["default"].createElement(InputMask, { pattern: pattern, strict: false },
         React__default["default"].createElement(FormField.FormField, Object.assign({}, props, { type: "tel", validations: Object.assign(Object.assign({ required: {
                     value: Boolean(required),
@@ -103,7 +107,7 @@ function InputPhoneNumber(_a) {
             return `${errorSubject} must contain ${cleanValueRequiredLength} or more digits`;
         }
         if (typeof (validations === null || validations === void 0 ? void 0 : validations.validate) === "function") {
-            return validations.validate(value);
+            return validations.validate(value, getValues);
         }
         return true;
     }

package/dist/InputText/InputText.d.ts

@@ -44,18 +44,7 @@ export declare const InputText: React.ForwardRefExoticComponent<({
     } | undefined;
     onEnter?: ((event: React.KeyboardEvent<Element>) => void) | undefined;
     readonly readonly?: boolean | undefined;
-    readonly validations?: Partial<{
-        required: string | import("react-hook-form").ValidationRule<boolean>;
-        min: import("react-hook-form").ValidationRule<string | number>;
-        max: import("react-hook-form").ValidationRule<string | number>;
-        maxLength: import("react-hook-form").ValidationRule<string | number>;
-        minLength: import("react-hook-form").ValidationRule<string | number>;
-        pattern: import("react-hook-form").ValidationRule<RegExp>;
-        validate: import("react-hook-form").Validate | Record<string, import("react-hook-form").Validate>;
-        valueAsNumber: boolean;
-        valueAsDate: boolean;
-        setValueAs: (value: any) => any;
-    }> | undefined;
+    readonly validations?: import("react-hook-form").RegisterOptions<import("react-hook-form").FieldValues, string> | undefined;
 } | {
     rows?: undefined;
     multiline?: boolean | undefined;
@@ -92,17 +81,6 @@ export declare const InputText: React.ForwardRefExoticComponent<({
     } | undefined;
     onEnter?: ((event: React.KeyboardEvent<Element>) => void) | undefined;
     readonly readonly?: boolean | undefined;
-    readonly validations?: Partial<{
-        required: string | import("react-hook-form").ValidationRule<boolean>;
-        min: import("react-hook-form").ValidationRule<string | number>;
-        max: import("react-hook-form").ValidationRule<string | number>;
-        maxLength: import("react-hook-form").ValidationRule<string | number>;
-        minLength: import("react-hook-form").ValidationRule<string | number>;
-        pattern: import("react-hook-form").ValidationRule<RegExp>;
-        validate: import("react-hook-form").Validate | Record<string, import("react-hook-form").Validate>;
-        valueAsNumber: boolean;
-        valueAsDate: boolean;
-        setValueAs: (value: any) => any;
-    }> | undefined;
+    readonly validations?: import("react-hook-form").RegisterOptions<import("react-hook-form").FieldValues, string> | undefined;
 }) & React.RefAttributes<InputTextRef>>;
 export {};

package/dist/InputText/index.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var InputText = require('../InputText-fce3bd3e.js');
+var InputText = require('../InputText-a8a571c1.js');
 require('react');
-require('../FormField-1a3bafd6.js');
+require('../FormField-c2bc7144.js');
 require('../tslib.es6-5b8768b7.js');
 require('uuid');
 require('react-hook-form');

package/dist/{InputText-fce3bd3e.js → InputText-a8a571c1.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 var React = require('react');
-var FormField = require('./FormField-1a3bafd6.js');
+var FormField = require('./FormField-c2bc7144.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/dist/InputTime/index.js

@@ -6,7 +6,7 @@ var tslib_es6 = require('../tslib.es6-5b8768b7.js');
 var React = require('react');
 var debounce = require('lodash/debounce');
 var temporal = require('@std-proposal/temporal');
-var FormField = require('../FormField-1a3bafd6.js');
+var FormField = require('../FormField-c2bc7144.js');
 require('uuid');
 require('react-hook-form');
 require('../style-inject.es-9d2f5f4e.js');

package/dist/{Option-7ac3893b.js → Option-2ce89a73.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 var React = require('react');
-var FormField = require('./FormField-1a3bafd6.js');
+var FormField = require('./FormField-c2bc7144.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/dist/Select/index.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Option = require('../Option-7ac3893b.js');
+var Option = require('../Option-2ce89a73.js');
 require('react');
-require('../FormField-1a3bafd6.js');
+require('../FormField-c2bc7144.js');
 require('../tslib.es6-5b8768b7.js');
 require('uuid');
 require('react-hook-form');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "4.18.2",
+  "version": "4.18.3",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -21,7 +21,7 @@
   "dependencies": {
     "@jobber/design": "^0.41.0",
     "@jobber/formatters": "*",
-    "@jobber/hooks": "^2.1.2",
+    "@jobber/hooks": "^2.1.3",
     "@popperjs/core": "^2.0.6",
     "@std-proposal/temporal": "0.0.1",
     "@tanstack/react-table": "8.5.13",
@@ -41,7 +41,7 @@
     "react-countdown": "^2.3.2",
     "react-datepicker": "^4.10.0",
     "react-dropzone": "^11.0.2",
-    "react-hook-form": "^6.15.8",
+    "react-hook-form": "^7.43.7",
     "react-markdown": "^8.0.3",
     "react-popper": "^2.2.5",
     "react-router-dom": "^5.3.4",
@@ -83,5 +83,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "e112ab079fb049e3ef003bb4c27ccae64cd75991"
+  "gitHead": "cffc83c1ccd41849fa2e2ce859aed98a9c587972"
 }