@jobber/components 4.18.8 → 4.18.10-add-contro.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/Checkbox/Checkbox.d.ts +7 -1
  2. package/dist/Checkbox/index.js +4 -1
  3. package/dist/{Checkbox-36f63689.js → Checkbox-d00c2a00.js} +38 -14
  4. package/dist/Grid/index.js +1 -1
  5. package/dist/MultiSelect/index.js +4 -1
  6. package/dist/Page/index.js +1 -1
  7. package/package.json +3 -3
package/dist/Checkbox/Checkbox.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import { ReactElement } from "react";
2
2
  import { XOR } from "ts-xor";
3
+ import { RegisterOptions } from "react-hook-form";
3
4
  interface BaseCheckboxProps {
4
5
  /**
5
6
  * Determines if the checkbox is checked or not.
@@ -35,6 +36,11 @@ interface BaseCheckboxProps {
35
36
  readonly description?: string;
36
37
  onChange?(newValue: boolean): void;
37
38
  onFocus?(): void;
39
+ /**
40
+ * Show an error message above the field. This also
41
+ * highlights the the field red if an error message shows up.
42
+ */
43
+ readonly validations?: RegisterOptions;
38
44
  }
39
45
  interface CheckboxLabelProps extends BaseCheckboxProps {
40
46
  /**
@@ -49,5 +55,5 @@ interface CheckboxChildrenProps extends BaseCheckboxProps {
49
55
  readonly children?: ReactElement;
50
56
  }
51
57
  type CheckboxProps = XOR<CheckboxLabelProps, CheckboxChildrenProps>;
52
- export declare function Checkbox({ checked, defaultChecked, disabled, label, name, value, indeterminate, description, children, onChange, onFocus, }: CheckboxProps): JSX.Element;
58
+ export declare function Checkbox({ checked, defaultChecked, disabled, label, name, value, indeterminate, description, children, validations, onChange, onFocus, }: CheckboxProps): JSX.Element;
53
59
  export {};
package/dist/Checkbox/index.js CHANGED
@@ -2,9 +2,12 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var Checkbox = require('../Checkbox-36f63689.js');
5
+ var Checkbox = require('../Checkbox-d00c2a00.js');
6
+ require('../tslib.es6-5b8768b7.js');
6
7
  require('react');
8
+ require('uuid');
7
9
  require('classnames');
10
+ require('react-hook-form');
8
11
  require('../style-inject.es-9d2f5f4e.js');
9
12
  require('../Icon-405a216c.js');
10
13
  require('@jobber/design');
package/dist/{Checkbox-36f63689.js → Checkbox-d00c2a00.js} RENAMED
@@ -1,7 +1,10 @@
1
1
  'use strict';
2
2
 
3
+ var tslib_es6 = require('./tslib.es6-5b8768b7.js');
3
4
  var React = require('react');
5
+ var uuid = require('uuid');
4
6
  var classnames = require('classnames');
7
+ var reactHookForm = require('react-hook-form');
5
8
  var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
6
9
  var Icon = require('./Icon-405a216c.js');
7
10
  var Text = require('./Text-e7ed0974.js');
@@ -15,26 +18,47 @@ var css_248z = ".d-2MyyzKGN0- {\n display: inline-block;\n}\n\n.OFHQaLxY8zI- {\
15
18
  var styles = {"checkbox":"d-2MyyzKGN0-","wrapper":"OFHQaLxY8zI-","disabled":"HRrf3AZlpHc-","checkHolder":"kMH5B1jwh-Y-","input":"rup0RBe4DNU-","checkBox":"lOQVnJA7zPM-","indeterminate":"Njn2CQDXwVA-","label":"eHENKCs5umc-","description":"fSEH0cAO9cI-"};
16
19
  styleInject_es.styleInject(css_248z);
17
20
 
18
- function Checkbox({ checked, defaultChecked, disabled, label, name, value, indeterminate = false, description, children, onChange, onFocus, }) {
21
+ function Checkbox({ checked, defaultChecked, disabled, label, name, value, indeterminate = false, description, children, validations, onChange, onFocus, }) {
22
+ const { control, setValue, watch } = reactHookForm.useFormContext() != undefined
23
+ ? reactHookForm.useFormContext()
24
+ : // If there isn't a Form Context being provided, get a form for this field.
25
+ reactHookForm.useForm({ mode: "onTouched" });
26
+ const [identifier] = React.useState(uuid.v1());
27
+ /**
28
+ * Generate a name if one is not supplied, this is the name
29
+ * that will be used for react-hook-form and not neccessarily
30
+ * attached to the DOM
31
+ */
32
+ const [controlledName] = React.useState(name ? name : `generatedName--${identifier}`);
33
+ React.useEffect(() => {
34
+ if (value != undefined) {
35
+ setValue(controlledName, value);
36
+ }
37
+ }, [value, watch(controlledName)]);
19
38
  const wrapperClassName = classnames__default["default"](styles.wrapper, disabled && styles.disabled);
20
39
  const inputClassName = classnames__default["default"](styles.input, {
21
40
  [styles.indeterminate]: indeterminate,
22
41
  });
23
42
  const iconName = indeterminate ? "minus2" : "checkmark";
24
43
  const labelText = label ? React__default["default"].createElement(Text.Text, null, label) : children;
25
- return (React__default["default"].createElement("div", { className: styles.checkbox },
26
- React__default["default"].createElement("label", { className: wrapperClassName },
27
- React__default["default"].createElement("span", { className: styles.checkHolder },
28
- 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 }),
29
- React__default["default"].createElement("span", { className: styles.checkBox },
30
- React__default["default"].createElement(Icon.Icon, { name: iconName, size: "small", color: "white" }))),
31
- labelText && React__default["default"].createElement("span", { className: styles.label }, labelText)),
32
- description && (React__default["default"].createElement("div", { className: styles.description },
33
- React__default["default"].createElement(Text.Text, { variation: "subdued", size: "small" }, description)))));
34
- function handleChange(event) {
35
- const newChecked = event.currentTarget.checked;
36
- onChange && onChange(newChecked);
37
- }
44
+ return (React__default["default"].createElement(reactHookForm.Controller, { control: control, name: controlledName, rules: Object.assign({}, validations), defaultValue: defaultChecked, render: (_a) => {
45
+ var _b = _a.field, { onChange: onControllerChange, name: controllerName } = _b, rest = tslib_es6.__rest(_b, ["onChange", "name"]);
46
+ const fieldProps = Object.assign(Object.assign({}, rest), { id: identifier, className: inputClassName, name: (validations || name) && controllerName, onChange: handleChange, disabled: disabled });
47
+ return (React__default["default"].createElement("div", { className: styles.checkbox },
48
+ React__default["default"].createElement("label", { className: wrapperClassName },
49
+ React__default["default"].createElement("span", { className: styles.checkHolder },
50
+ React__default["default"].createElement("input", Object.assign({}, fieldProps, { type: "checkbox", checked: checked, defaultChecked: defaultChecked, "aria-label": label, onChange: handleChange, onFocus: onFocus })),
51
+ React__default["default"].createElement("span", { className: styles.checkBox },
52
+ React__default["default"].createElement(Icon.Icon, { name: iconName, size: "small", color: "white" }))),
53
+ labelText && React__default["default"].createElement("span", { className: styles.label }, labelText)),
54
+ description && (React__default["default"].createElement("div", { className: styles.description },
55
+ React__default["default"].createElement(Text.Text, { variation: "subdued", size: "small" }, description)))));
56
+ function handleChange(event) {
57
+ const newChecked = event.currentTarget.checked;
58
+ onChange && onChange(newChecked);
59
+ onControllerChange(event);
60
+ }
61
+ } }));
38
62
  }
39
63
 
40
64
  exports.Checkbox = Checkbox;
package/dist/Grid/index.js CHANGED
@@ -45,7 +45,7 @@ function getSizeCSSVariables(size) {
45
45
  };
46
46
  }
47
47
 
48
- var css_248z$1 = ".NqFGJV-UF3Q- {\n display: grid;\n grid-template-columns: repeat(12, minmax(0, 1fr));\n}\n\n.IZLiiSquUTM- {\n gap: calc(16px / 2);\n gap: var(--space-small);\n}\n\n@media (min-width:768px) {\n .IZLiiSquUTM- {\n gap: calc(16px * 1);\n gap: var(--space-base);\n }\n}\n\n@media (--medium-screens-and-up) {\n .IZLiiSquUTM- {\n gap: calc(16px * 1);\n gap: var(--space-base);\n }\n}\n";
48
+ var css_248z$1 = ".NqFGJV-UF3Q- {\n display: grid;\n grid-template-columns: repeat(12, minmax(0, 1fr));\n}\n\n.IZLiiSquUTM- {\n gap: calc(16px * 1);\n gap: var(--space-base);\n}\n\n@media (min-width:768px) {\n .IZLiiSquUTM- {\n gap: calc(16px * 1.5);\n gap: var(--space-large);\n }\n}\n\n@media (--medium-screens-and-up) {\n .IZLiiSquUTM- {\n gap: calc(16px * 1.5);\n gap: var(--space-large);\n }\n}\n";
49
49
  var styles = {"grid":"NqFGJV-UF3Q-","gap":"IZLiiSquUTM-"};
50
50
  styleInject_es.styleInject(css_248z$1);
51
51
 
package/dist/MultiSelect/index.js CHANGED
@@ -6,9 +6,12 @@ var React = require('react');
6
6
  var classnames = require('classnames');
7
7
  var useOnKeyDown = require('@jobber/hooks/useOnKeyDown');
8
8
  var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
9
- var Checkbox = require('../Checkbox-36f63689.js');
9
+ var Checkbox = require('../Checkbox-d00c2a00.js');
10
10
  var Text = require('../Text-e7ed0974.js');
11
11
  var Icon = require('../Icon-405a216c.js');
12
+ require('../tslib.es6-5b8768b7.js');
13
+ require('uuid');
14
+ require('react-hook-form');
12
15
  require('../Typography-fd6f932a.js');
13
16
  require('@jobber/design');
14
17
 
package/dist/Page/index.js CHANGED
@@ -27,7 +27,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
27
27
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
28
28
  var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
29
29
 
30
- var css_248z = ".pVEdXlwstrc- {\n width: 100%;\n box-sizing: border-box;\n padding: calc(16px * 1.5);\n padding: var(--space-large);\n}\n\n._9r84iz--C5M- {\n max-width: none;\n}\n\n._0LO26JFXU9g- {\n max-width: calc(16px * 80);\n max-width: calc(var(--base-unit) * 80);\n}\n\n.KiMIF8eFbuE- {\n max-width: calc(16px * 64);\n max-width: calc(var(--base-unit) * 64);\n}\n\n.GCeQrLFyml4- h1 {\n -ms-flex: 0 1 auto;\n flex: 0 1 auto;\n margin-bottom: calc(16px * 1);\n margin-bottom: var(--space-base);\n}\n\n.GCeQrLFyml4- > .KP-BTjB82iQ- {\n -ms-flex: 1 0 auto;\n flex: 1 0 auto;\n}\n\n.GCeQrLFyml4-.GuFU-PgC1j4-,\n.GCeQrLFyml4-.qiwlkB5pxkA- {\n display: -ms-flexbox;\n display: flex;\n -ms-flex-wrap: wrap;\n flex-wrap: wrap;\n -ms-flex-pack: justify;\n justify-content: space-between;\n}\n\n.GCeQrLFyml4-.CbPnpIk7-EE- .KP-BTjB82iQ- {\n display: -ms-flexbox;\n display: flex;\n -ms-flex-wrap: wrap;\n flex-wrap: wrap;\n -ms-flex-pack: justify;\n justify-content: space-between;\n}\n\n.GCeQrLFyml4-.qiwlkB5pxkA- .KP-BTjB82iQ-,\n.GCeQrLFyml4-.GuFU-PgC1j4- .KP-BTjB82iQ- {\n -ms-flex-wrap: nowrap;\n flex-wrap: nowrap;\n}\n\n.GCeQrLFyml4-.qiwlkB5pxkA- .KP-BTjB82iQ- {\n -ms-flex-pack: end;\n justify-content: flex-end;\n}\n\n.E5FEsck9zwg- {\n -ms-flex: 0 0 100%;\n flex: 0 0 100%;\n margin-bottom: calc(16px / 2);\n margin-bottom: var(--space-small);\n}\n\n.Sn3-wJuNCqk- {\n margin-top: calc(16px / 2);\n margin-top: var(--space-small);\n -ms-flex: 1;\n flex: 1;\n}\n\n.Sn3-wJuNCqk- > div {\n width: 100%;\n}\n\n.GCeQrLFyml4-.CbPnpIk7-EE- .Sn3-wJuNCqk- {\n margin-top: 0;\n}\n\n.GCeQrLFyml4-.qiwlkB5pxkA- .E5FEsck9zwg-,\n.GCeQrLFyml4-.qiwlkB5pxkA- .Sn3-wJuNCqk- {\n margin: 0;\n -ms-flex: 0 auto;\n flex: 0 auto;\n}\n\n.GCeQrLFyml4-.qiwlkB5pxkA- .Sn3-wJuNCqk- {\n margin-left: calc(16px / 2);\n margin-left: var(--space-small);\n}\n\n.GCeQrLFyml4-.CbPnpIk7-EE- .Sn3-wJuNCqk- + .Sn3-wJuNCqk- {\n margin-left: calc(16px / 2);\n margin-left: var(--space-small);\n}\n\n.GCeQrLFyml4- ._9ZKFDK2jL80- {\n margin-bottom: calc(16px * 1);\n margin-bottom: var(--space-base);\n}\n";
30
+ var css_248z = ".pVEdXlwstrc- {\n width: 100%;\n box-sizing: border-box;\n padding: calc(16px * 1);\n padding: var(--space-base);\n}\n\n@media (min-width:768px) {\n\n.pVEdXlwstrc- {\n padding: calc(16px * 1.5);\n padding: var(--space-large);\n}\n }\n\n@media (--medium-screens-and-up) {\n\n.pVEdXlwstrc- {\n padding: calc(16px * 1.5);\n padding: var(--space-large);\n}\n }\n\n._9r84iz--C5M- {\n max-width: none;\n}\n\n._0LO26JFXU9g- {\n max-width: calc(16px * 80);\n max-width: calc(var(--base-unit) * 80);\n}\n\n.KiMIF8eFbuE- {\n max-width: calc(16px * 64);\n max-width: calc(var(--base-unit) * 64);\n}\n\n.GCeQrLFyml4- h1 {\n -ms-flex: 0 1 auto;\n flex: 0 1 auto;\n margin-bottom: calc(16px * 1);\n margin-bottom: var(--space-base);\n}\n\n.GCeQrLFyml4- > .KP-BTjB82iQ- {\n -ms-flex: 1 0 auto;\n flex: 1 0 auto;\n}\n\n.GCeQrLFyml4-.GuFU-PgC1j4-,\n.GCeQrLFyml4-.qiwlkB5pxkA- {\n display: -ms-flexbox;\n display: flex;\n -ms-flex-wrap: wrap;\n flex-wrap: wrap;\n -ms-flex-pack: justify;\n justify-content: space-between;\n}\n\n.GCeQrLFyml4-.CbPnpIk7-EE- .KP-BTjB82iQ- {\n display: -ms-flexbox;\n display: flex;\n -ms-flex-wrap: wrap;\n flex-wrap: wrap;\n -ms-flex-pack: justify;\n justify-content: space-between;\n}\n\n.GCeQrLFyml4-.qiwlkB5pxkA- .KP-BTjB82iQ-,\n.GCeQrLFyml4-.GuFU-PgC1j4- .KP-BTjB82iQ- {\n -ms-flex-wrap: nowrap;\n flex-wrap: nowrap;\n}\n\n.GCeQrLFyml4-.qiwlkB5pxkA- .KP-BTjB82iQ- {\n -ms-flex-pack: end;\n justify-content: flex-end;\n}\n\n.E5FEsck9zwg- {\n -ms-flex: 0 0 100%;\n flex: 0 0 100%;\n margin-bottom: calc(16px / 2);\n margin-bottom: var(--space-small);\n}\n\n.Sn3-wJuNCqk- {\n margin-top: calc(16px / 2);\n margin-top: var(--space-small);\n -ms-flex: 1;\n flex: 1;\n}\n\n.Sn3-wJuNCqk- > div {\n width: 100%;\n}\n\n.GCeQrLFyml4-.CbPnpIk7-EE- .Sn3-wJuNCqk- {\n margin-top: 0;\n}\n\n.GCeQrLFyml4-.qiwlkB5pxkA- .E5FEsck9zwg-,\n.GCeQrLFyml4-.qiwlkB5pxkA- .Sn3-wJuNCqk- {\n margin: 0;\n -ms-flex: 0 auto;\n flex: 0 auto;\n}\n\n.GCeQrLFyml4-.qiwlkB5pxkA- .Sn3-wJuNCqk- {\n margin-left: calc(16px / 2);\n margin-left: var(--space-small);\n}\n\n.GCeQrLFyml4-.CbPnpIk7-EE- .Sn3-wJuNCqk- + .Sn3-wJuNCqk- {\n margin-left: calc(16px / 2);\n margin-left: var(--space-small);\n}\n\n.GCeQrLFyml4- ._9ZKFDK2jL80- {\n margin-bottom: calc(16px * 1);\n margin-bottom: var(--space-base);\n}\n";
31
31
  var styles = {"page":"pVEdXlwstrc-","fill":"_9r84iz--C5M-","standard":"_0LO26JFXU9g-","narrow":"KiMIF8eFbuE-","titleBar":"GCeQrLFyml4-","actionGroup":"KP-BTjB82iQ-","large":"GuFU-PgC1j4-","medium":"qiwlkB5pxkA-","small":"CbPnpIk7-EE-","primaryAction":"E5FEsck9zwg-","actionButton":"Sn3-wJuNCqk-","subtitle":"_9ZKFDK2jL80-"};
32
32
  styleInject_es.styleInject(css_248z);
33
33
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jobber/components",
3
- "version": "4.18.8",
3
+ "version": "4.18.10-add-contro.2+d8d58bf1",
4
4
  "license": "MIT",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
@@ -20,7 +20,7 @@
20
20
  ],
21
21
  "dependencies": {
22
22
  "@jobber/design": "^0.41.2",
23
- "@jobber/formatters": "*",
23
+ "@jobber/formatters": "^0.2.2",
24
24
  "@jobber/hooks": "^2.1.3",
25
25
  "@popperjs/core": "^2.0.6",
26
26
  "@std-proposal/temporal": "0.0.1",
@@ -83,5 +83,5 @@
83
83
  "> 1%",
84
84
  "IE 10"
85
85
  ],
86
- "gitHead": "b983e8889a634678e467f4d1e8b66513dc1eb1d2"
86
+ "gitHead": "d8d58bf10aa8dda47b3d475284c18764555516f7"
87
87
  }