@jobber/components 4.24.4 → 4.25.0

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 (8) hide show
  1. package/dist/DatePicker/index.js +1 -1
  2. package/dist/{DatePicker-38b0c40b.js → DatePicker-f54f9982.js} +1 -1
  3. package/dist/InputDate/index.js +11 -8
  4. package/dist/RadioGroup/RadioOption.d.ts +29 -16
  5. package/dist/RadioGroup/index.js +1 -1
  6. package/dist/{RadioGroup-67a5f560.js → RadioGroup-8e76d20b.js} +5 -3
  7. package/dist/RecurringSelect/index.js +1 -1
  8. package/package.json +2 -2
package/dist/DatePicker/index.js CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var DatePicker = require('../DatePicker-38b0c40b.js');
5
+ var DatePicker = require('../DatePicker-f54f9982.js');
6
6
  require('react');
7
7
  require('classnames');
8
8
  require('react-datepicker');
package/dist/{DatePicker-38b0c40b.js → DatePicker-f54f9982.js} RENAMED
@@ -87,7 +87,7 @@ function DatePicker({ onChange, onMonthChange, activator, inline, selected, read
87
87
  React.useEffect(focusOnSelectedDate, [open]);
88
88
  }
89
89
  return (React__default["default"].createElement("div", { className: wrapperClassName, ref: ref },
90
- React__default["default"].createElement(ReactDatePicker__default["default"], { calendarClassName: datePickerClassNames, showPopperArrow: false, selected: selected, inline: inline, disabled: disabled, readOnly: readonly, onChange: handleChange, maxDate: maxDate, minDate: minDate, useWeekdaysShort: true, customInput: React__default["default"].createElement(DatePickerActivator, { activator: activator, fullWidth: fullWidth }), renderCustomHeader: props => React__default["default"].createElement(DatePickerCustomHeader, Object.assign({}, props)), onCalendarOpen: handleCalendarOpen, onCalendarClose: handleCalendarClose, dateFormat: ["P", "PP", "PPP", "MMM dd yyyy", "MMMM dd yyyy"], highlightDates: highlightDates, onMonthChange: onMonthChange })));
90
+ React__default["default"].createElement(ReactDatePicker__default["default"], { calendarClassName: datePickerClassNames, showPopperArrow: false, selected: selected, inline: inline, disabled: disabled, readOnly: readonly, onChange: handleChange, maxDate: maxDate, preventOpenOnFocus: true, minDate: minDate, useWeekdaysShort: true, customInput: React__default["default"].createElement(DatePickerActivator, { activator: activator, fullWidth: fullWidth }), renderCustomHeader: props => React__default["default"].createElement(DatePickerCustomHeader, Object.assign({}, props)), onCalendarOpen: handleCalendarOpen, onCalendarClose: handleCalendarClose, dateFormat: ["P", "PP", "PPP", "MMM dd yyyy", "MMMM dd yyyy"], highlightDates: highlightDates, onMonthChange: onMonthChange })));
91
91
  /**
92
92
  * The onChange callback on ReactDatePicker returns a Date and an Event, but
93
93
  * the onChange in our interface only provides the Date. Simplifying the code
package/dist/InputDate/index.js CHANGED
@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
5
5
  var omit = require('lodash/omit');
6
6
  var React = require('react');
7
7
  var FormField = require('../FormField-0f880b07.js');
8
- var DatePicker = require('../DatePicker-38b0c40b.js');
8
+ var DatePicker = require('../DatePicker-f54f9982.js');
9
9
  require('../tslib.es6-5b8768b7.js');
10
10
  require('uuid');
11
11
  require('react-hook-form');
@@ -41,13 +41,16 @@ function InputDate(inputProps) {
41
41
  // Set form field to formatted date string immediately, to avoid validations
42
42
  // triggering incorrectly when it blurs (to handle the datepicker UI click)
43
43
  value && ((_a = formFieldActionsRef.current) === null || _a === void 0 ? void 0 : _a.setValue(value));
44
- return (React__default["default"].createElement(FormField.FormField, Object.assign({}, newActivatorProps, inputProps, { value: value, onChange: (_, event) => onChange && onChange(event), onBlur: () => {
45
- inputProps.onBlur && inputProps.onBlur();
46
- activatorProps.onBlur && activatorProps.onBlur();
47
- }, onFocus: () => {
48
- inputProps.onFocus && inputProps.onFocus();
49
- activatorProps.onFocus && activatorProps.onFocus();
50
- }, actionsRef: formFieldActionsRef, suffix: suffix })));
44
+ return (
45
+ // We prevent the picker from opening on focus for keyboard navigation, so to maintain a good UX for mouse users we want to open the picker on click
46
+ React__default["default"].createElement("div", { onClick: onClick },
47
+ React__default["default"].createElement(FormField.FormField, Object.assign({}, newActivatorProps, inputProps, { value: value, onChange: (_, event) => onChange && onChange(event), onBlur: () => {
48
+ inputProps.onBlur && inputProps.onBlur();
49
+ activatorProps.onBlur && activatorProps.onBlur();
50
+ }, onFocus: () => {
51
+ inputProps.onFocus && inputProps.onFocus();
52
+ activatorProps.onFocus && activatorProps.onFocus();
53
+ }, actionsRef: formFieldActionsRef, suffix: suffix }))));
51
54
  } }));
52
55
  }
53
56
 
package/dist/RadioGroup/RadioOption.d.ts CHANGED
@@ -1,34 +1,47 @@
1
- import { PropsWithChildren } from "react";
1
+ import { ReactNode } from "react";
2
2
  import { XOR } from "ts-xor";
3
- interface BaseRadioOptions {
3
+ interface BaseRadioOptionProps {
4
+ /**
5
+ * The value of the radio button.
6
+ */
4
7
  readonly value: string | number;
8
+ /**
9
+ * Disables the radio button.
10
+ */
5
11
  readonly disabled?: boolean;
6
- }
7
- interface RadioOptionsWithDescription extends BaseRadioOptions {
12
+ /**
13
+ * Further description of the label.
14
+ */
15
+ readonly description?: string;
8
16
  /**
9
17
  * The label to appear beside the radio button.
10
18
  */
11
- label: string;
19
+ readonly label?: string;
12
20
  /**
13
- * Further description of the label.
21
+ * Render a custom label or additional content below the `label`
22
+ * and `description`.
23
+ *
24
+ * Prefer using `label` and `description` over adding child elements if the
25
+ * content of either would be a string.
14
26
  */
15
- description?: string;
27
+ readonly children?: ReactNode;
16
28
  }
17
- type RadioOptionProps = XOR<RadioOptionsWithDescription, PropsWithChildren<BaseRadioOptions>>;
29
+ interface WithRequiredChildren extends BaseRadioOptionProps {
30
+ readonly children: ReactNode;
31
+ }
32
+ interface WithRequiredLabel extends BaseRadioOptionProps {
33
+ readonly label: string;
34
+ }
35
+ type RadioOptionProps = XOR<WithRequiredChildren, WithRequiredLabel>;
18
36
  /**
19
37
  * For rendering props only. To make updates to
20
38
  * the real RadioOption, look at InternalRadioOption
21
39
  */
22
- export declare function RadioOption({ children }: PropsWithChildren<RadioOptionProps>): JSX.Element;
23
- interface BaseInternalRadioOptions extends BaseRadioOptions {
40
+ export declare function RadioOption({ children }: RadioOptionProps): JSX.Element;
41
+ interface InternalRadioOptionProps extends BaseRadioOptionProps {
24
42
  readonly name: string;
25
43
  readonly checked: boolean;
26
44
  onChange(newValue: string | number): void;
27
45
  }
28
- interface InternalRadioOptionsWithDescription extends BaseInternalRadioOptions {
29
- label: string;
30
- description?: string;
31
- }
32
- type InternalRadioOptionProps = XOR<InternalRadioOptionsWithDescription, PropsWithChildren<BaseInternalRadioOptions>>;
33
- export declare function InternalRadioOption({ value, name, label, description, disabled, checked, children, onChange, }: PropsWithChildren<InternalRadioOptionProps>): JSX.Element;
46
+ export declare function InternalRadioOption({ value, name, label, description, disabled, checked, children, onChange, }: InternalRadioOptionProps): JSX.Element;
34
47
  export {};
package/dist/RadioGroup/index.js CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var RadioGroup = require('../RadioGroup-67a5f560.js');
5
+ var RadioGroup = require('../RadioGroup-8e76d20b.js');
6
6
  require('react');
7
7
  require('uuid');
8
8
  require('../style-inject.es-9d2f5f4e.js');
package/dist/{RadioGroup-67a5f560.js → RadioGroup-8e76d20b.js} RENAMED
@@ -9,8 +9,8 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
9
9
 
10
10
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
11
11
 
12
- var css_248z = "._5P8wEHDUdKY- {\n display: -ms-inline-flexbox;\n display: inline-flex;\n -ms-flex-direction: column;\n flex-direction: column;\n}\n\n._08ZPdlE98Ko- {\n /* Hide checkbox on UI but not screen readers and still allow focus state */\n position: absolute;\n left: -999vw;\n}\n\n.-PUoLXltVlQ- {\n display: -ms-inline-flexbox;\n display: inline-flex;\n font-size: calc((16px * 1) * 0.875);\n font-size: calc(calc(16px * 1) * 0.875);\n font-size: var(--typography--fontSize-base);\n cursor: pointer;\n -ms-flex-align: start;\n align-items: flex-start;\n}\n\n._08ZPdlE98Ko- + .-PUoLXltVlQ-::before {\n content: \"\";\n display: block;\n width: calc(16px * 1);\n width: var(--space-base);\n height: calc(16px * 1);\n height: var(--space-base);\n box-sizing: border-box;\n margin: calc(16px / 8) calc(16px / 2) 0 0;\n margin: var(--space-smallest) var(--space-small) 0 0;\n border: calc(16px / 8) solid rgb(125, 176, 14);\n border: var(--border-thick) solid var(--color-interactive);\n border-radius: 100%;\n background-color: rgba(255, 255, 255, 1);\n background-color: var(--color-surface);\n transition: all 200ms;\n transition: all var(--timing-base);\n -ms-flex-negative: 0;\n flex-shrink: 0;\n}\n\n._08ZPdlE98Ko-:focus + .-PUoLXltVlQ-:before {\n box-shadow: 0px 0px calc(16px / 4) calc(16px / 8)\n rgb(231, 213, 87);\n box-shadow: var(--shadow-focus);\n}\n\n._08ZPdlE98Ko-:focus:checked + .-PUoLXltVlQ-:before {\n box-shadow: 0px 0px 0px calc(16px / 16) rgb(81, 114, 9),\n 0px 0px calc(16px / 4) calc(16px / 8)\n rgb(231, 213, 87);\n box-shadow: 0px 0px 0px var(--space-minuscule) var(--color-interactive--hover),\n var(--shadow-focus);\n}\n\n._08ZPdlE98Ko-:checked + .-PUoLXltVlQ-::before {\n box-shadow: 0px 0px 0px calc(16px / 16) rgb(81, 114, 9);\n box-shadow: 0px 0px 0px var(--space-minuscule) var(--color-interactive--hover);\n border-color: rgb(81, 114, 9);\n border-color: var(--color-interactive--hover);\n border-width: calc(16px / 4);\n border-width: var(--border-thicker);\n background-color: rgb(125, 176, 14);\n background-color: var(--color-interactive);\n}\n\n._08ZPdlE98Ko-[disabled] + .-PUoLXltVlQ- {\n color: rgb(181, 181, 181);\n color: var(--color-disabled);\n cursor: not-allowed;\n}\n\n._08ZPdlE98Ko-[disabled] + .-PUoLXltVlQ-::before {\n border-color: rgb(225, 225, 225);\n border-color: var(--color-disabled--secondary);\n}\n\n._08ZPdlE98Ko-[disabled]:checked + .-PUoLXltVlQ-::before {\n box-shadow: 0px 0px 0px calc(16px / 16) rgb(181, 181, 181);\n box-shadow: 0px 0px 0px var(--space-minuscule) var(--color-disabled);\n border-color: rgb(181, 181, 181);\n border-color: var(--color-grey);\n background-color: rgb(225, 225, 225);\n background-color: var(--color-disabled--secondary);\n}\n\n._8r6qT-6S9EI- {\n margin-bottom: calc(16px / 2);\n margin-bottom: var(--space-small);\n padding-left: calc(16px * 1.5);\n padding-left: var(--space-large);\n}\n\n._08ZPdlE98Ko-[disabled] + .-PUoLXltVlQ- + ._8r6qT-6S9EI- > p {\n color: rgb(181, 181, 181);\n color: var(--color-disabled);\n}\n";
13
- var styles = {"radioGroup":"_5P8wEHDUdKY-","input":"_08ZPdlE98Ko-","label":"-PUoLXltVlQ-","description":"_8r6qT-6S9EI-"};
12
+ var css_248z = "._5P8wEHDUdKY- {\n display: -ms-inline-flexbox;\n display: inline-flex;\n -ms-flex-direction: column;\n flex-direction: column;\n}\n\n._08ZPdlE98Ko- {\n /* Hide checkbox on UI but not screen readers and still allow focus state */\n position: absolute;\n left: -999vw;\n}\n\n.-PUoLXltVlQ- {\n display: -ms-inline-flexbox;\n display: inline-flex;\n font-size: calc((16px * 1) * 0.875);\n font-size: calc(calc(16px * 1) * 0.875);\n font-size: var(--typography--fontSize-base);\n cursor: pointer;\n -ms-flex-align: start;\n align-items: flex-start;\n}\n\n._08ZPdlE98Ko- + .-PUoLXltVlQ-::before {\n content: \"\";\n display: block;\n width: calc(16px * 1);\n width: var(--space-base);\n height: calc(16px * 1);\n height: var(--space-base);\n box-sizing: border-box;\n margin: calc(16px / 8) calc(16px / 2) 0 0;\n margin: var(--space-smallest) var(--space-small) 0 0;\n border: calc(16px / 8) solid rgb(125, 176, 14);\n border: var(--border-thick) solid var(--color-interactive);\n border-radius: 100%;\n background-color: rgba(255, 255, 255, 1);\n background-color: var(--color-surface);\n transition: all 200ms;\n transition: all var(--timing-base);\n -ms-flex-negative: 0;\n flex-shrink: 0;\n}\n\n._08ZPdlE98Ko-:focus + .-PUoLXltVlQ-:before {\n box-shadow: 0px 0px calc(16px / 4) calc(16px / 8)\n rgb(231, 213, 87);\n box-shadow: var(--shadow-focus);\n}\n\n._08ZPdlE98Ko-:focus:checked + .-PUoLXltVlQ-:before {\n box-shadow: 0px 0px 0px calc(16px / 16) rgb(81, 114, 9),\n 0px 0px calc(16px / 4) calc(16px / 8)\n rgb(231, 213, 87);\n box-shadow: 0px 0px 0px var(--space-minuscule) var(--color-interactive--hover),\n var(--shadow-focus);\n}\n\n._08ZPdlE98Ko-:checked + .-PUoLXltVlQ-::before {\n box-shadow: 0px 0px 0px calc(16px / 16) rgb(81, 114, 9);\n box-shadow: 0px 0px 0px var(--space-minuscule) var(--color-interactive--hover);\n border-color: rgb(81, 114, 9);\n border-color: var(--color-interactive--hover);\n border-width: calc(16px / 4);\n border-width: var(--border-thicker);\n background-color: rgb(125, 176, 14);\n background-color: var(--color-interactive);\n}\n\n._08ZPdlE98Ko-[disabled] + .-PUoLXltVlQ- {\n color: rgb(181, 181, 181);\n color: var(--color-disabled);\n cursor: not-allowed;\n}\n\n._08ZPdlE98Ko-[disabled] + .-PUoLXltVlQ-::before {\n border-color: rgb(225, 225, 225);\n border-color: var(--color-disabled--secondary);\n}\n\n._08ZPdlE98Ko-[disabled]:checked + .-PUoLXltVlQ-::before {\n box-shadow: 0px 0px 0px calc(16px / 16) rgb(181, 181, 181);\n box-shadow: 0px 0px 0px var(--space-minuscule) var(--color-disabled);\n border-color: rgb(181, 181, 181);\n border-color: var(--color-grey);\n background-color: rgb(225, 225, 225);\n background-color: var(--color-disabled--secondary);\n}\n\n._8r6qT-6S9EI-,\n.C5SzbO1epLk- {\n margin-bottom: calc(16px / 2);\n margin-bottom: var(--space-small);\n padding-left: calc(16px * 1.5);\n padding-left: var(--space-large);\n}\n\n._08ZPdlE98Ko-[disabled] + .-PUoLXltVlQ- + ._8r6qT-6S9EI- > p {\n color: rgb(181, 181, 181);\n color: var(--color-disabled);\n}\n";
13
+ var styles = {"radioGroup":"_5P8wEHDUdKY-","input":"_08ZPdlE98Ko-","label":"-PUoLXltVlQ-","description":"_8r6qT-6S9EI-","children":"C5SzbO1epLk-"};
14
14
  styleInject_es.styleInject(css_248z);
15
15
 
16
16
  /**
@@ -22,11 +22,13 @@ function RadioOption({ children }) {
22
22
  }
23
23
  function InternalRadioOption({ value, name, label, description, disabled, checked, children, onChange, }) {
24
24
  const inputId = `${value.toString()}_${uuid.v1()}`;
25
+ const shouldRenderIndependentChildren = label && children;
25
26
  return (React__default["default"].createElement("div", null,
26
27
  React__default["default"].createElement("input", { onChange: handleChange, type: "radio", name: name, value: value, disabled: disabled, checked: checked, id: inputId, className: styles.input, "aria-describedby": description ? `${inputId}_description` : undefined }),
27
28
  React__default["default"].createElement("label", { className: styles.label, htmlFor: inputId }, label ? label : children),
28
29
  description && (React__default["default"].createElement("div", { className: styles.description, id: `${inputId}_description` },
29
- React__default["default"].createElement(Text.Text, { variation: "subdued", size: "small" }, description)))));
30
+ React__default["default"].createElement(Text.Text, { variation: "subdued", size: "small" }, description))),
31
+ shouldRenderIndependentChildren && (React__default["default"].createElement("div", { className: styles.children, id: `${inputId}_children` }, children))));
30
32
  function handleChange() {
31
33
  onChange(value);
32
34
  }
package/dist/RecurringSelect/index.js CHANGED
@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
5
5
  var React = require('react');
6
6
  var uuid = require('uuid');
7
7
  var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
8
- var RadioGroup = require('../RadioGroup-67a5f560.js');
8
+ var RadioGroup = require('../RadioGroup-8e76d20b.js');
9
9
  var Text = require('../Text-e7ed0974.js');
10
10
  require('classnames');
11
11
  require('../Typography-fd6f932a.js');
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jobber/components",
3
- "version": "4.24.4",
3
+ "version": "4.25.0",
4
4
  "license": "MIT",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
@@ -83,5 +83,5 @@
83
83
  "> 1%",
84
84
  "IE 10"
85
85
  ],
86
- "gitHead": "4da1716d6977ab813a6fef96cc48ffb94743ed21"
86
+ "gitHead": "3d7aaaca66c9b265d9d81f1d7718e05b54da7b9b"
87
87
  }