@jobber/components 4.18.9 → 4.18.10-add-contro.3

package/dist/Checkbox/index.js

@@ -2,9 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Checkbox = require('../Checkbox-36f63689.js');
+var Checkbox = require('../Checkbox-3bccf65c.js');
+require('../tslib.es6-5b8768b7.js');
 require('react');
+require('uuid');
 require('classnames');
+require('react-hook-form');
 require('../style-inject.es-9d2f5f4e.js');
 require('../Icon-405a216c.js');
 require('@jobber/design');

package/dist/{Checkbox-36f63689.js → Checkbox-3bccf65c.js}

@@ -1,7 +1,10 @@
 'use strict';
 
+var tslib_es6 = require('./tslib.es6-5b8768b7.js');
 var React = require('react');
+var uuid = require('uuid');
 var classnames = require('classnames');
+var reactHookForm = require('react-hook-form');
 var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
 var Icon = require('./Icon-405a216c.js');
 var Text = require('./Text-e7ed0974.js');
@@ -16,25 +19,46 @@ var styles = {"checkbox":"d-2MyyzKGN0-","wrapper":"OFHQaLxY8zI-","disabled":"HRr
 styleInject_es.styleInject(css_248z);
 
 function Checkbox({ checked, defaultChecked, disabled, label, name, value, indeterminate = false, description, children, onChange, onFocus, }) {
+    const { control, 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" });
+    const [identifier] = React.useState(uuid.v1());
+    /**
+     * Generate a name if one is not supplied, this is the name
+     * that will be used for react-hook-form and not neccessarily
+     * attached to the DOM
+     */
+    const [controlledName] = React.useState(name ? name : `generatedName--${identifier}`);
+    React.useEffect(() => {
+        if (value != undefined) {
+            setValue(controlledName, value);
+        }
+    }, [value, watch(controlledName)]);
     const wrapperClassName = classnames__default["default"](styles.wrapper, disabled && styles.disabled);
     const inputClassName = classnames__default["default"](styles.input, {
         [styles.indeterminate]: indeterminate,
     });
     const iconName = indeterminate ? "minus2" : "checkmark";
     const labelText = label ? React__default["default"].createElement(Text.Text, null, label) : children;
-    return (React__default["default"].createElement("div", { className: styles.checkbox },
-        React__default["default"].createElement("label", { className: wrapperClassName },
-            React__default["default"].createElement("span", { className: styles.checkHolder },
-                React__default["default"].createElement("input", { type: "checkbox", checked: checked, defaultChecked: defaultChecked, className: inputClassName, "aria-label": label, onChange: handleChange, value: value, name: name, disabled: disabled, onFocus: onFocus }),
-                React__default["default"].createElement("span", { className: styles.checkBox },
-                    React__default["default"].createElement(Icon.Icon, { name: iconName, size: "small", color: "white" }))),
-            labelText && React__default["default"].createElement("span", { className: styles.label }, labelText)),
-        description && (React__default["default"].createElement("div", { className: styles.description },
-            React__default["default"].createElement(Text.Text, { variation: "subdued", size: "small" }, description)))));
-    function handleChange(event) {
-        const newChecked = event.currentTarget.checked;
-        onChange && onChange(newChecked);
-    }
+    return (React__default["default"].createElement(reactHookForm.Controller, { control: control, name: controlledName, defaultValue: defaultChecked, render: (_a) => {
+            var _b = _a.field, { onChange: onControllerChange, name: controllerName } = _b, rest = tslib_es6.__rest(_b, ["onChange", "name"]);
+            const fieldProps = Object.assign(Object.assign({}, rest), { id: identifier, className: inputClassName, name: name && controllerName, onChange: handleChange, disabled: disabled });
+            return (React__default["default"].createElement("div", { className: styles.checkbox },
+                React__default["default"].createElement("label", { className: wrapperClassName },
+                    React__default["default"].createElement("span", { className: styles.checkHolder },
+                        React__default["default"].createElement("input", Object.assign({}, fieldProps, { type: "checkbox", checked: checked, defaultChecked: defaultChecked, "aria-label": label, onChange: handleChange, onFocus: onFocus })),
+                        React__default["default"].createElement("span", { className: styles.checkBox },
+                            React__default["default"].createElement(Icon.Icon, { name: iconName, size: "small", color: "white" }))),
+                    labelText && React__default["default"].createElement("span", { className: styles.label }, labelText)),
+                description && (React__default["default"].createElement("div", { className: styles.description },
+                    React__default["default"].createElement(Text.Text, { variation: "subdued", size: "small" }, description)))));
+            function handleChange(event) {
+                const newChecked = event.currentTarget.checked;
+                onChange && onChange(newChecked);
+                onControllerChange(event);
+            }
+        } }));
 }
 
 exports.Checkbox = Checkbox;

package/dist/MultiSelect/index.js

@@ -6,9 +6,12 @@ var React = require('react');
 var classnames = require('classnames');
 var useOnKeyDown = require('@jobber/hooks/useOnKeyDown');
 var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
-var Checkbox = require('../Checkbox-36f63689.js');
+var Checkbox = require('../Checkbox-3bccf65c.js');
 var Text = require('../Text-e7ed0974.js');
 var Icon = require('../Icon-405a216c.js');
+require('../tslib.es6-5b8768b7.js');
+require('uuid');
+require('react-hook-form');
 require('../Typography-fd6f932a.js');
 require('@jobber/design');
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "4.18.9",
+  "version": "4.18.10-add-contro.3+54ff1f01",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -20,7 +20,7 @@
   ],
   "dependencies": {
     "@jobber/design": "^0.41.2",
-    "@jobber/formatters": "*",
+    "@jobber/formatters": "^0.2.2",
     "@jobber/hooks": "^2.1.3",
     "@popperjs/core": "^2.0.6",
     "@std-proposal/temporal": "0.0.1",
@@ -83,5 +83,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "ed9912142f08e166558e87260035e1164701809b"
+  "gitHead": "54ff1f018b21f93e885c1c90b475b09437e035f2"
 }