@jobber/components 4.7.1-pre.2 → 4.7.1-pre.7
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.
- package/dist/Autocomplete/index.js +2 -2
- package/dist/Banner/index.js +2 -2
- package/dist/Card/index.js +3 -3
- package/dist/{Card-459a48b7.js → Card-140ec4c2.js} +1 -1
- package/dist/Chips/index.js +10 -9
- package/dist/ConfirmationModal/index.js +5 -3
- package/dist/{ConfirmationModal-3f9a3524.js → ConfirmationModal-522a9311.js} +3 -3
- package/dist/DataDump/index.js +3 -3
- package/dist/DataTable/index.js +682 -23
- package/dist/DatePicker/index.js +2 -2
- package/dist/{DatePicker-b704c15b.js → DatePicker-066d4499.js} +4 -4
- package/dist/Disclosure/index.js +3 -3
- package/dist/FormField/index.js +1 -1
- package/dist/{FormField-771f6e12.js → FormField-03e36a98.js} +2 -2
- package/dist/FormatFile/index.js +6 -4
- package/dist/{FormatFile-d2c30cbc.js → FormatFile-01a00e98.js} +1 -1
- package/dist/Gallery/index.js +7 -5
- package/dist/InputDate/index.js +5 -5
- package/dist/InputEmail/index.js +1 -1
- package/dist/InputNumber/index.js +1 -1
- package/dist/InputPassword/index.js +1 -1
- package/dist/InputText/index.js +2 -2
- package/dist/{InputText-32cbc583.js → InputText-0a76a9f9.js} +1 -1
- package/dist/InputTime/index.js +1 -1
- package/dist/LightBox/index.js +4 -2
- package/dist/{LightBox-c637c684.js → LightBox-e147a5bc.js} +8 -6
- package/dist/List/index.js +2 -2
- package/dist/Menu/index.js +2 -2
- package/dist/{Menu-aa9c73d2.js → Menu-2528a30a.js} +2 -2
- package/dist/Modal/index.js +4 -2
- package/dist/{Modal-c5f9040f.js → Modal-4a620c9f.js} +6 -4
- package/dist/MultiSelect/index.js +3 -3
- package/dist/{Option-ee917602.js → Option-1447547b.js} +1 -1
- package/dist/Page/index.js +7 -6
- package/dist/Popover/index.js +2 -2
- package/dist/Select/index.js +2 -2
- package/dist/Table/index.js +2 -2
- package/package.json +5 -6
- package/rollup.config.js +4 -1
package/dist/DatePicker/index.js
CHANGED
|
@@ -2,11 +2,11 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var DatePicker = require('../DatePicker-
|
|
5
|
+
var DatePicker = require('../DatePicker-066d4499.js');
|
|
6
6
|
require('react');
|
|
7
7
|
require('classnames');
|
|
8
8
|
require('react-datepicker');
|
|
9
|
-
require('@jobber/hooks');
|
|
9
|
+
require('@jobber/hooks/useRefocusOnActivator');
|
|
10
10
|
require('../style-inject.es-9d2f5f4e.js');
|
|
11
11
|
require('../Typography-fd6f932a.js');
|
|
12
12
|
require('../Button-69409e46.js');
|
|
@@ -3,11 +3,11 @@
|
|
|
3
3
|
var React = require('react');
|
|
4
4
|
var classnames = require('classnames');
|
|
5
5
|
var ReactDatePicker = require('react-datepicker');
|
|
6
|
-
var
|
|
6
|
+
var useRefocusOnActivator = require('@jobber/hooks/useRefocusOnActivator');
|
|
7
7
|
var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
|
|
8
8
|
var Typography = require('./Typography-fd6f932a.js');
|
|
9
9
|
var Button = require('./Button-69409e46.js');
|
|
10
|
-
var
|
|
10
|
+
var require$$1 = require('lodash');
|
|
11
11
|
|
|
12
12
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
13
13
|
|
|
@@ -33,7 +33,7 @@ function DatePickerCustomHeader({ monthDate, decreaseMonth, increaseMonth, prevM
|
|
|
33
33
|
const DatePickerActivator = React.forwardRef(InternalActivator);
|
|
34
34
|
function InternalActivator(props, ref) {
|
|
35
35
|
const { activator, fullWidth } = props;
|
|
36
|
-
const newActivatorProps =
|
|
36
|
+
const newActivatorProps = require$$1.omit(props, ["activator", "fullWidth"]);
|
|
37
37
|
if (activator) {
|
|
38
38
|
if (React.isValidElement(activator)) {
|
|
39
39
|
const isAComponent = typeof activator.type === "function";
|
|
@@ -82,7 +82,7 @@ function DatePicker({ onChange, onMonthChange, activator, inline, selected, read
|
|
|
82
82
|
[styles.inline]: inline,
|
|
83
83
|
});
|
|
84
84
|
if (smartAutofocus) {
|
|
85
|
-
|
|
85
|
+
useRefocusOnActivator.useRefocusOnActivator(open);
|
|
86
86
|
React.useEffect(focusOnSelectedDate, [open]);
|
|
87
87
|
}
|
|
88
88
|
return (React__default["default"].createElement("div", { className: wrapperClassName, ref: ref },
|
package/dist/Disclosure/index.js
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
var React = require('react');
|
|
6
|
-
var
|
|
6
|
+
var useResizeObserver = require('@jobber/hooks/useResizeObserver');
|
|
7
7
|
var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
|
|
8
8
|
var Icon = require('../Icon-405a216c.js');
|
|
9
9
|
var Typography = require('../Typography-fd6f932a.js');
|
|
@@ -21,8 +21,8 @@ styleInject_es.styleInject(css_248z);
|
|
|
21
21
|
function Disclosure({ children, title, defaultOpen = false, }) {
|
|
22
22
|
const [isOpen, setOpen] = React.useState(defaultOpen);
|
|
23
23
|
const [isMounted, setMount] = React.useState(false);
|
|
24
|
-
const [titleRef, { exactWidth }] =
|
|
25
|
-
const isBelowBreakpoint = exactWidth && exactWidth <
|
|
24
|
+
const [titleRef, { exactWidth }] = useResizeObserver.useResizeObserver();
|
|
25
|
+
const isBelowBreakpoint = exactWidth && exactWidth < useResizeObserver.Breakpoints.small;
|
|
26
26
|
React.useEffect(() => {
|
|
27
27
|
setMount(true);
|
|
28
28
|
}, []);
|
package/dist/FormField/index.js
CHANGED
|
@@ -129,8 +129,8 @@ function FormField(props) {
|
|
|
129
129
|
*/
|
|
130
130
|
const [controlledName] = React.useState(name ? name : `generatedName--${identifier}`);
|
|
131
131
|
React.useEffect(() => {
|
|
132
|
-
if (value != undefined
|
|
133
|
-
setValue(controlledName, value);
|
|
132
|
+
if (value != undefined) {
|
|
133
|
+
setValue(controlledName, value, { shouldValidate: true });
|
|
134
134
|
}
|
|
135
135
|
}, [value, watch(controlledName)]);
|
|
136
136
|
React.useImperativeHandle(actionsRef, () => ({
|
package/dist/FormatFile/index.js
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var FormatFile = require('../FormatFile-
|
|
5
|
+
var FormatFile = require('../FormatFile-01a00e98.js');
|
|
6
6
|
require('react');
|
|
7
7
|
require('classnames');
|
|
8
8
|
require('filesize');
|
|
@@ -12,11 +12,13 @@ require('react-router-dom');
|
|
|
12
12
|
require('../Icon-405a216c.js');
|
|
13
13
|
require('@jobber/design');
|
|
14
14
|
require('../Typography-fd6f932a.js');
|
|
15
|
-
require('../ConfirmationModal-
|
|
16
|
-
require('@jobber/hooks');
|
|
17
|
-
require('../Modal-
|
|
15
|
+
require('../ConfirmationModal-522a9311.js');
|
|
16
|
+
require('@jobber/hooks/useOnKeyDown');
|
|
17
|
+
require('../Modal-4a620c9f.js');
|
|
18
18
|
require('react-dom');
|
|
19
19
|
require('framer-motion');
|
|
20
|
+
require('@jobber/hooks/useRefocusOnActivator');
|
|
21
|
+
require('@jobber/hooks/useFocusTrap');
|
|
20
22
|
require('../Heading-a1191b15.js');
|
|
21
23
|
require('../ButtonDismiss-7d9deeab.js');
|
|
22
24
|
require('../Content-a6590328.js');
|
|
@@ -5,7 +5,7 @@ var classnames = require('classnames');
|
|
|
5
5
|
var getHumanReadableFileSize = require('filesize');
|
|
6
6
|
var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
|
|
7
7
|
var Button = require('./Button-69409e46.js');
|
|
8
|
-
var ConfirmationModal = require('./ConfirmationModal-
|
|
8
|
+
var ConfirmationModal = require('./ConfirmationModal-522a9311.js');
|
|
9
9
|
var Glimmer = require('./Glimmer-f670c24e.js');
|
|
10
10
|
var Icon = require('./Icon-405a216c.js');
|
|
11
11
|
var Typography = require('./Typography-fd6f932a.js');
|
package/dist/Gallery/index.js
CHANGED
|
@@ -5,17 +5,19 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
var React = require('react');
|
|
6
6
|
var classnames = require('classnames');
|
|
7
7
|
var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
|
|
8
|
-
var LightBox = require('../LightBox-
|
|
9
|
-
var FormatFile = require('../FormatFile-
|
|
8
|
+
var LightBox = require('../LightBox-e147a5bc.js');
|
|
9
|
+
var FormatFile = require('../FormatFile-01a00e98.js');
|
|
10
10
|
var Button = require('../Button-69409e46.js');
|
|
11
11
|
require('framer-motion');
|
|
12
12
|
require('react-dom');
|
|
13
13
|
require('lodash/debounce');
|
|
14
|
-
require('@jobber/hooks');
|
|
14
|
+
require('@jobber/hooks/useRefocusOnActivator');
|
|
15
|
+
require('@jobber/hooks/useOnKeyDown');
|
|
16
|
+
require('@jobber/hooks/useFocusTrap');
|
|
15
17
|
require('../ButtonDismiss-7d9deeab.js');
|
|
16
18
|
require('filesize');
|
|
17
|
-
require('../ConfirmationModal-
|
|
18
|
-
require('../Modal-
|
|
19
|
+
require('../ConfirmationModal-522a9311.js');
|
|
20
|
+
require('../Modal-4a620c9f.js');
|
|
19
21
|
require('../Heading-a1191b15.js');
|
|
20
22
|
require('../Typography-fd6f932a.js');
|
|
21
23
|
require('../Content-a6590328.js');
|
package/dist/InputDate/index.js
CHANGED
|
@@ -2,10 +2,10 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var
|
|
5
|
+
var require$$1 = require('lodash');
|
|
6
6
|
var React = require('react');
|
|
7
|
-
var FormField = require('../FormField-
|
|
8
|
-
var DatePicker = require('../DatePicker-
|
|
7
|
+
var FormField = require('../FormField-03e36a98.js');
|
|
8
|
+
var DatePicker = require('../DatePicker-066d4499.js');
|
|
9
9
|
require('../tslib.es6-5b8768b7.js');
|
|
10
10
|
require('uuid');
|
|
11
11
|
require('react-hook-form');
|
|
@@ -21,7 +21,7 @@ require('../InputValidation-bf743417.js');
|
|
|
21
21
|
require('framer-motion');
|
|
22
22
|
require('../Spinner-9d8fc7ff.js');
|
|
23
23
|
require('react-datepicker');
|
|
24
|
-
require('@jobber/hooks');
|
|
24
|
+
require('@jobber/hooks/useRefocusOnActivator');
|
|
25
25
|
|
|
26
26
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
27
27
|
|
|
@@ -32,7 +32,7 @@ function InputDate(inputProps) {
|
|
|
32
32
|
return (React__default["default"].createElement(DatePicker.DatePicker, { selected: inputProps.value, onChange: inputProps.onChange, disabled: inputProps.disabled, readonly: inputProps.readonly, fullWidth: !inputProps.inline, minDate: inputProps.minDate, maxDate: inputProps.maxDate, smartAutofocus: false, activator: activatorProps => {
|
|
33
33
|
var _a;
|
|
34
34
|
const { onChange, onClick, value } = activatorProps;
|
|
35
|
-
const newActivatorProps =
|
|
35
|
+
const newActivatorProps = require$$1.omit(activatorProps, ["activator"]);
|
|
36
36
|
const suffix = Object.assign({ icon: "calendar" }, (onClick && {
|
|
37
37
|
onClick: onClick,
|
|
38
38
|
ariaLabel: "Show calendar",
|
package/dist/InputEmail/index.js
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
var React = require('react');
|
|
6
|
-
var FormField = require('../FormField-
|
|
6
|
+
var FormField = require('../FormField-03e36a98.js');
|
|
7
7
|
require('../tslib.es6-5b8768b7.js');
|
|
8
8
|
require('uuid');
|
|
9
9
|
require('react-hook-form');
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
var React = require('react');
|
|
6
|
-
var FormField = require('../FormField-
|
|
6
|
+
var FormField = require('../FormField-03e36a98.js');
|
|
7
7
|
require('../tslib.es6-5b8768b7.js');
|
|
8
8
|
require('uuid');
|
|
9
9
|
require('react-hook-form');
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
var React = require('react');
|
|
6
|
-
var FormField = require('../FormField-
|
|
6
|
+
var FormField = require('../FormField-03e36a98.js');
|
|
7
7
|
require('../tslib.es6-5b8768b7.js');
|
|
8
8
|
require('uuid');
|
|
9
9
|
require('react-hook-form');
|
package/dist/InputText/index.js
CHANGED
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var InputText = require('../InputText-
|
|
5
|
+
var InputText = require('../InputText-0a76a9f9.js');
|
|
6
6
|
require('react');
|
|
7
|
-
require('../FormField-
|
|
7
|
+
require('../FormField-03e36a98.js');
|
|
8
8
|
require('../tslib.es6-5b8768b7.js');
|
|
9
9
|
require('uuid');
|
|
10
10
|
require('react-hook-form');
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var React = require('react');
|
|
4
|
-
var FormField = require('./FormField-
|
|
4
|
+
var FormField = require('./FormField-03e36a98.js');
|
|
5
5
|
|
|
6
6
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
7
7
|
|
package/dist/InputTime/index.js
CHANGED
|
@@ -6,7 +6,7 @@ var tslib_es6 = require('../tslib.es6-5b8768b7.js');
|
|
|
6
6
|
var React = require('react');
|
|
7
7
|
var debounce = require('lodash/debounce');
|
|
8
8
|
var temporal = require('@std-proposal/temporal');
|
|
9
|
-
var FormField = require('../FormField-
|
|
9
|
+
var FormField = require('../FormField-03e36a98.js');
|
|
10
10
|
require('uuid');
|
|
11
11
|
require('react-hook-form');
|
|
12
12
|
require('../style-inject.es-9d2f5f4e.js');
|
package/dist/LightBox/index.js
CHANGED
|
@@ -2,12 +2,14 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var LightBox = require('../LightBox-
|
|
5
|
+
var LightBox = require('../LightBox-e147a5bc.js');
|
|
6
6
|
require('react');
|
|
7
7
|
require('framer-motion');
|
|
8
8
|
require('react-dom');
|
|
9
9
|
require('lodash/debounce');
|
|
10
|
-
require('@jobber/hooks');
|
|
10
|
+
require('@jobber/hooks/useRefocusOnActivator');
|
|
11
|
+
require('@jobber/hooks/useOnKeyDown');
|
|
12
|
+
require('@jobber/hooks/useFocusTrap');
|
|
11
13
|
require('../style-inject.es-9d2f5f4e.js');
|
|
12
14
|
require('../ButtonDismiss-7d9deeab.js');
|
|
13
15
|
require('../Button-69409e46.js');
|
|
@@ -4,7 +4,9 @@ var React = require('react');
|
|
|
4
4
|
var framerMotion = require('framer-motion');
|
|
5
5
|
var ReactDOM = require('react-dom');
|
|
6
6
|
var debounce = require('lodash/debounce');
|
|
7
|
-
var
|
|
7
|
+
var useRefocusOnActivator = require('@jobber/hooks/useRefocusOnActivator');
|
|
8
|
+
var useOnKeyDown = require('@jobber/hooks/useOnKeyDown');
|
|
9
|
+
var useFocusTrap = require('@jobber/hooks/useFocusTrap');
|
|
8
10
|
var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
|
|
9
11
|
var ButtonDismiss = require('./ButtonDismiss-7d9deeab.js');
|
|
10
12
|
var Button = require('./Button-69409e46.js');
|
|
@@ -55,15 +57,15 @@ const debounceDuration = 250;
|
|
|
55
57
|
function LightBox({ open, images, imageIndex = 0, onRequestClose, }) {
|
|
56
58
|
const [currentImageIndex, setCurrentImageIndex] = React.useState(imageIndex);
|
|
57
59
|
const [direction, setDirection] = React.useState(0);
|
|
58
|
-
const lightboxRef =
|
|
60
|
+
const lightboxRef = useFocusTrap.useFocusTrap(open);
|
|
59
61
|
const debouncedHandleNext = debounce__default["default"](handleMoveNext, debounceDuration);
|
|
60
62
|
const debouncedHandlePrevious = debounce__default["default"](handleMovePrevious, debounceDuration);
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
63
|
+
useRefocusOnActivator.useRefocusOnActivator(open);
|
|
64
|
+
useOnKeyDown.useOnKeyDown(handleRequestClose, "Escape");
|
|
65
|
+
useOnKeyDown.useOnKeyDown(debouncedHandlePrevious, {
|
|
64
66
|
key: "ArrowLeft",
|
|
65
67
|
});
|
|
66
|
-
|
|
68
|
+
useOnKeyDown.useOnKeyDown(debouncedHandleNext, {
|
|
67
69
|
key: "ArrowRight",
|
|
68
70
|
});
|
|
69
71
|
React.useEffect(() => {
|
package/dist/List/index.js
CHANGED
|
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
var React = require('react');
|
|
6
6
|
var classnames = require('classnames');
|
|
7
|
-
var
|
|
7
|
+
var require$$1 = require('lodash');
|
|
8
8
|
var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
|
|
9
9
|
var Icon = require('../Icon-405a216c.js');
|
|
10
10
|
var Text = require('../Text-e7ed0974.js');
|
|
@@ -76,7 +76,7 @@ function DisplayList({ items }) {
|
|
|
76
76
|
React__default["default"].createElement(ListItem, Object.assign({}, item)))))));
|
|
77
77
|
}
|
|
78
78
|
function SectionedList({ items }) {
|
|
79
|
-
const sectionedItems =
|
|
79
|
+
const sectionedItems = require$$1.groupBy(items, item => require$$1.get(item, "section", "Other"));
|
|
80
80
|
const sectionHeaderClassNames = classnames__default["default"](sectionStyles.sectionHeader);
|
|
81
81
|
return (React__default["default"].createElement("ul", { className: styles$1.list }, Object.keys(sectionedItems).map(sectionName => (React__default["default"].createElement("li", { key: sectionName, className: styles$1.section },
|
|
82
82
|
React__default["default"].createElement("div", { className: sectionHeaderClassNames },
|
package/dist/Menu/index.js
CHANGED
|
@@ -2,12 +2,12 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var Menu = require('../Menu-
|
|
5
|
+
var Menu = require('../Menu-2528a30a.js');
|
|
6
6
|
require('react');
|
|
7
7
|
require('uuid');
|
|
8
8
|
require('classnames');
|
|
9
9
|
require('framer-motion');
|
|
10
|
-
require('@jobber/hooks');
|
|
10
|
+
require('@jobber/hooks/useOnKeyDown');
|
|
11
11
|
require('../style-inject.es-9d2f5f4e.js');
|
|
12
12
|
require('../Button-69409e46.js');
|
|
13
13
|
require('react-router-dom');
|
|
@@ -4,7 +4,7 @@ var React = require('react');
|
|
|
4
4
|
var uuid = require('uuid');
|
|
5
5
|
var classnames = require('classnames');
|
|
6
6
|
var framerMotion = require('framer-motion');
|
|
7
|
-
var
|
|
7
|
+
var useOnKeyDown = require('@jobber/hooks/useOnKeyDown');
|
|
8
8
|
var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
|
|
9
9
|
var Button = require('./Button-69409e46.js');
|
|
10
10
|
var Typography = require('./Typography-fd6f932a.js');
|
|
@@ -43,7 +43,7 @@ function Menu({ activator, items }) {
|
|
|
43
43
|
const wrapperRef = React.createRef();
|
|
44
44
|
const buttonID = uuid.v1();
|
|
45
45
|
const menuID = uuid.v1();
|
|
46
|
-
|
|
46
|
+
useOnKeyDown.useOnKeyDown(handleKeyboardShortcut, ["Escape"]);
|
|
47
47
|
React.useLayoutEffect(() => {
|
|
48
48
|
if (wrapperRef.current) {
|
|
49
49
|
const bounds = wrapperRef.current.getBoundingClientRect();
|
package/dist/Modal/index.js
CHANGED
|
@@ -2,12 +2,14 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var Modal = require('../Modal-
|
|
5
|
+
var Modal = require('../Modal-4a620c9f.js');
|
|
6
6
|
require('react');
|
|
7
7
|
require('react-dom');
|
|
8
8
|
require('classnames');
|
|
9
9
|
require('framer-motion');
|
|
10
|
-
require('@jobber/hooks');
|
|
10
|
+
require('@jobber/hooks/useRefocusOnActivator');
|
|
11
|
+
require('@jobber/hooks/useOnKeyDown');
|
|
12
|
+
require('@jobber/hooks/useFocusTrap');
|
|
11
13
|
require('../style-inject.es-9d2f5f4e.js');
|
|
12
14
|
require('../Heading-a1191b15.js');
|
|
13
15
|
require('../Typography-fd6f932a.js');
|
|
@@ -4,7 +4,9 @@ var React = require('react');
|
|
|
4
4
|
var ReactDOM = require('react-dom');
|
|
5
5
|
var classnames = require('classnames');
|
|
6
6
|
var framerMotion = require('framer-motion');
|
|
7
|
-
var
|
|
7
|
+
var useRefocusOnActivator = require('@jobber/hooks/useRefocusOnActivator');
|
|
8
|
+
var useOnKeyDown = require('@jobber/hooks/useOnKeyDown');
|
|
9
|
+
var useFocusTrap = require('@jobber/hooks/useFocusTrap');
|
|
8
10
|
var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
|
|
9
11
|
var Heading = require('./Heading-a1191b15.js');
|
|
10
12
|
var Button = require('./Button-69409e46.js');
|
|
@@ -26,9 +28,9 @@ styleInject_es.styleInject(css_248z);
|
|
|
26
28
|
|
|
27
29
|
function Modal({ open = false, title, size, dismissible = true, children, primaryAction, secondaryAction, tertiaryAction, onRequestClose, }) {
|
|
28
30
|
const modalClassName = classnames__default["default"](styles.modal, size && sizes[size]);
|
|
29
|
-
|
|
30
|
-
const modalRef =
|
|
31
|
-
|
|
31
|
+
useRefocusOnActivator.useRefocusOnActivator(open);
|
|
32
|
+
const modalRef = useFocusTrap.useFocusTrap(open);
|
|
33
|
+
useOnKeyDown.useOnKeyDown(handleRequestClose, "Escape");
|
|
32
34
|
const template = (React__default["default"].createElement(framerMotion.AnimatePresence, null, open && (React__default["default"].createElement("div", { ref: modalRef, className: styles.container, tabIndex: 0 },
|
|
33
35
|
React__default["default"].createElement(framerMotion.motion.div, { key: styles.overlay, className: styles.overlay, onClick: onRequestClose, initial: { opacity: 0 }, animate: { opacity: 0.8 }, exit: { opacity: 0 }, transition: { duration: 0.2 } }),
|
|
34
36
|
React__default["default"].createElement(framerMotion.motion.div, { key: styles.modal, className: modalClassName, initial: { scale: 0.9, opacity: 0 }, animate: { scale: 1, opacity: 1 }, exit: { scale: 0.9, opacity: 0 }, transition: {
|
|
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
var React = require('react');
|
|
6
6
|
var classnames = require('classnames');
|
|
7
|
-
var
|
|
7
|
+
var useOnKeyDown = require('@jobber/hooks/useOnKeyDown');
|
|
8
8
|
var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
|
|
9
9
|
var Checkbox = require('../Checkbox-36f63689.js');
|
|
10
10
|
var Text = require('../Text-e7ed0974.js');
|
|
@@ -98,7 +98,7 @@ function DropDownMenu({ options, setOptions }) {
|
|
|
98
98
|
}
|
|
99
99
|
}
|
|
100
100
|
}
|
|
101
|
-
|
|
101
|
+
useOnKeyDown.useOnKeyDown(handleKeyboardShortcut(setupKeyListeners).callback, [
|
|
102
102
|
"Enter",
|
|
103
103
|
" ",
|
|
104
104
|
"ArrowDown",
|
|
@@ -159,7 +159,7 @@ function MultiSelect({ defaultLabel, allSelectedLabel, options, onOptionsChange,
|
|
|
159
159
|
}
|
|
160
160
|
}
|
|
161
161
|
}
|
|
162
|
-
|
|
162
|
+
useOnKeyDown.useOnKeyDown(handleKeyboardShortcut(setupKeyListeners).callback, [
|
|
163
163
|
"Enter",
|
|
164
164
|
" ",
|
|
165
165
|
"Escape",
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var React = require('react');
|
|
4
|
-
var FormField = require('./FormField-
|
|
4
|
+
var FormField = require('./FormField-03e36a98.js');
|
|
5
5
|
|
|
6
6
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
7
7
|
|
package/dist/Page/index.js
CHANGED
|
@@ -4,14 +4,14 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
var React = require('react');
|
|
6
6
|
var classnames = require('classnames');
|
|
7
|
-
var
|
|
7
|
+
var useResizeObserver = require('@jobber/hooks/useResizeObserver');
|
|
8
8
|
var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
|
|
9
9
|
var Heading = require('../Heading-a1191b15.js');
|
|
10
10
|
var Text = require('../Text-e7ed0974.js');
|
|
11
11
|
var Content = require('../Content-a6590328.js');
|
|
12
12
|
var Markdown = require('../Markdown-53a0bfda.js');
|
|
13
13
|
var Button = require('../Button-69409e46.js');
|
|
14
|
-
var Menu = require('../Menu-
|
|
14
|
+
var Menu = require('../Menu-2528a30a.js');
|
|
15
15
|
var Emphasis = require('../Emphasis-76a10790.js');
|
|
16
16
|
require('../Typography-fd6f932a.js');
|
|
17
17
|
require('react-markdown');
|
|
@@ -20,6 +20,7 @@ require('../Icon-405a216c.js');
|
|
|
20
20
|
require('@jobber/design');
|
|
21
21
|
require('uuid');
|
|
22
22
|
require('framer-motion');
|
|
23
|
+
require('@jobber/hooks/useOnKeyDown');
|
|
23
24
|
|
|
24
25
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
25
26
|
|
|
@@ -33,11 +34,11 @@ styleInject_es.styleInject(css_248z);
|
|
|
33
34
|
// eslint-disable-next-line max-statements
|
|
34
35
|
function Page({ title, intro, externalIntroLinks, subtitle, children, width = "standard", primaryAction, secondaryAction, moreActionsMenu = [], }) {
|
|
35
36
|
const pageStyles = classnames__default["default"](styles.page, styles[width]);
|
|
36
|
-
const [titleBarRef, { width: titleBarWidth =
|
|
37
|
+
const [titleBarRef, { width: titleBarWidth = useResizeObserver.Breakpoints.large }] = useResizeObserver.useResizeObserver();
|
|
37
38
|
const titleBarClasses = classnames__default["default"](styles.titleBar, {
|
|
38
|
-
[styles.small]: titleBarWidth >
|
|
39
|
-
[styles.medium]: titleBarWidth >
|
|
40
|
-
[styles.large]: titleBarWidth >
|
|
39
|
+
[styles.small]: titleBarWidth > useResizeObserver.Breakpoints.smaller,
|
|
40
|
+
[styles.medium]: titleBarWidth > useResizeObserver.Breakpoints.small,
|
|
41
|
+
[styles.large]: titleBarWidth > useResizeObserver.Breakpoints.base,
|
|
41
42
|
});
|
|
42
43
|
const showMenu = moreActionsMenu.length > 0;
|
|
43
44
|
const showActionGroup = showMenu || primaryAction;
|
package/dist/Popover/index.js
CHANGED
|
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
var React = require('react');
|
|
6
6
|
var reactPopper = require('react-popper');
|
|
7
|
-
var
|
|
7
|
+
var useRefocusOnActivator = require('@jobber/hooks/useRefocusOnActivator');
|
|
8
8
|
var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
|
|
9
9
|
var ButtonDismiss = require('../ButtonDismiss-7d9deeab.js');
|
|
10
10
|
require('../Button-69409e46.js');
|
|
@@ -29,7 +29,7 @@ function Popover({ onRequestClose, children, attachTo, open, preferredPlacement
|
|
|
29
29
|
modifiers: buildModifiers(arrowElement),
|
|
30
30
|
placement: preferredPlacement,
|
|
31
31
|
});
|
|
32
|
-
|
|
32
|
+
useRefocusOnActivator.useRefocusOnActivator(open);
|
|
33
33
|
return (React__default["default"].createElement(React__default["default"].Fragment, null, open && (React__default["default"].createElement("div", Object.assign({ role: "dialog", ref: setPopperElement, style: popperStyles.popper, className: classes.popover }, attributes.popper),
|
|
34
34
|
React__default["default"].createElement("div", { className: classes.dismissButton },
|
|
35
35
|
React__default["default"].createElement(ButtonDismiss.ButtonDismiss, { onClick: onRequestClose, ariaLabel: "Close dialog" })),
|
package/dist/Select/index.js
CHANGED
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var Option = require('../Option-
|
|
5
|
+
var Option = require('../Option-1447547b.js');
|
|
6
6
|
require('react');
|
|
7
|
-
require('../FormField-
|
|
7
|
+
require('../FormField-03e36a98.js');
|
|
8
8
|
require('../tslib.es6-5b8768b7.js');
|
|
9
9
|
require('uuid');
|
|
10
10
|
require('react-hook-form');
|
package/dist/Table/index.js
CHANGED
|
@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
var React = require('react');
|
|
6
6
|
var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
|
|
7
7
|
var classnames = require('classnames');
|
|
8
|
-
var
|
|
8
|
+
var require$$3 = require('@jobber/formatters');
|
|
9
9
|
|
|
10
10
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
11
11
|
|
|
@@ -39,7 +39,7 @@ function CellNumeric({ value }) {
|
|
|
39
39
|
}
|
|
40
40
|
|
|
41
41
|
function CellCurrency({ value, currency = undefined, }) {
|
|
42
|
-
return React__default["default"].createElement(CellNumeric, { value:
|
|
42
|
+
return React__default["default"].createElement(CellNumeric, { value: require$$3.formatCurrency(value, currency) });
|
|
43
43
|
}
|
|
44
44
|
|
|
45
45
|
function Header({ children }) {
|
package/package.json
CHANGED
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@jobber/components",
|
|
3
|
-
"version": "4.7.1-pre.
|
|
3
|
+
"version": "4.7.1-pre.7+2cbb553b",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
7
7
|
"scripts": {
|
|
8
8
|
"build": "rollup --config",
|
|
9
9
|
"clean": "rm -rf dist/* tsconfig.tsbuildinfo",
|
|
10
|
-
"prepublishOnly": "ts-node --project ../../tsconfig.bin.json scripts/entryPoints.ts",
|
|
10
|
+
"prepublishOnly": "ts-node --project ../../tsconfig.bin.json ../../scripts/entryPoints.ts",
|
|
11
11
|
"bootstrap": "npm run clean; npm run build",
|
|
12
|
-
"postpublish": "ts-node --project ../../tsconfig.bin.json scripts/entryPoints.ts clean"
|
|
12
|
+
"postpublish": "ts-node --project ../../tsconfig.bin.json ../../scripts/entryPoints.ts clean"
|
|
13
13
|
},
|
|
14
14
|
"files": [
|
|
15
15
|
"*.js",
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
"dependencies": {
|
|
20
20
|
"@jobber/design": "^0.32.0",
|
|
21
21
|
"@jobber/formatters": "^0.2.2",
|
|
22
|
-
"@jobber/hooks": "^2.0.
|
|
22
|
+
"@jobber/hooks": "^2.0.3-pre.57+2cbb553b",
|
|
23
23
|
"@popperjs/core": "^2.0.6",
|
|
24
24
|
"@std-proposal/temporal": "0.0.1",
|
|
25
25
|
"@tanstack/react-table": "8.5.13",
|
|
@@ -68,7 +68,6 @@
|
|
|
68
68
|
"rollup": "^2.79.1",
|
|
69
69
|
"rollup-plugin-multi-input": "^1.4.1",
|
|
70
70
|
"rollup-plugin-postcss": "^4.0.2",
|
|
71
|
-
"ts-node": "^8.1.0",
|
|
72
71
|
"typed-css-modules": "^0.7.0",
|
|
73
72
|
"typescript": "^4.9.5",
|
|
74
73
|
"uuid": "^8.3.2"
|
|
@@ -82,5 +81,5 @@
|
|
|
82
81
|
"> 1%",
|
|
83
82
|
"IE 10"
|
|
84
83
|
],
|
|
85
|
-
"gitHead": "
|
|
84
|
+
"gitHead": "2cbb553b3a64b78df971bde8c0b857d543a9aa68"
|
|
86
85
|
}
|
package/rollup.config.js
CHANGED
|
@@ -67,7 +67,10 @@ export default {
|
|
|
67
67
|
"@use-it/event-listener",
|
|
68
68
|
"@jobber/design",
|
|
69
69
|
"@jobber/formatters",
|
|
70
|
-
"@jobber/hooks",
|
|
70
|
+
new RegExp("@jobber/hooks/.*"),
|
|
71
|
+
"zxcvbn",
|
|
72
|
+
"use-resize-observer/polyfilled",
|
|
73
|
+
"@apollo/client",
|
|
71
74
|
"@tanstack/react-table",
|
|
72
75
|
],
|
|
73
76
|
};
|