@jobber/components 4.8.0 → 4.8.1
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/Banner/index.js +1 -1
- package/dist/Card/index.js +3 -3
- package/dist/{Card-459a48b7.js → Card-140ec4c2.js} +1 -1
- package/dist/Chips/index.js +6 -5
- 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 +1 -1
- package/dist/DatePicker/index.js +2 -2
- package/dist/{DatePicker-b704c15b.js → DatePicker-5ead9469.js} +2 -2
- package/dist/Disclosure/index.js +1 -1
- 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 +2 -2
- package/dist/LightBox/index.js +4 -2
- package/dist/{LightBox-c637c684.js → LightBox-e147a5bc.js} +8 -6
- 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/Page/index.js +3 -2
- package/dist/Popover/index.js +2 -2
- package/package.json +5 -6
- package/rollup.config.js +4 -1
package/dist/Banner/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 jobberHooks = require('@jobber/hooks');
|
|
7
|
+
var jobberHooks = require('@jobber/hooks/useResizeObserver');
|
|
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');
|
package/dist/Card/index.js
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var Card = require('../Card-
|
|
5
|
+
var Card = require('../Card-140ec4c2.js');
|
|
6
6
|
require('react');
|
|
7
7
|
require('classnames');
|
|
8
8
|
require('../style-inject.es-9d2f5f4e.js');
|
|
@@ -12,10 +12,10 @@ require('../Button-69409e46.js');
|
|
|
12
12
|
require('react-router-dom');
|
|
13
13
|
require('../Icon-405a216c.js');
|
|
14
14
|
require('@jobber/design');
|
|
15
|
-
require('../Menu-
|
|
15
|
+
require('../Menu-2528a30a.js');
|
|
16
16
|
require('uuid');
|
|
17
17
|
require('framer-motion');
|
|
18
|
-
require('@jobber/hooks');
|
|
18
|
+
require('@jobber/hooks/useOnKeyDown');
|
|
19
19
|
|
|
20
20
|
|
|
21
21
|
|
|
@@ -5,7 +5,7 @@ var classnames = require('classnames');
|
|
|
5
5
|
var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
|
|
6
6
|
var Heading = require('./Heading-a1191b15.js');
|
|
7
7
|
var Button = require('./Button-69409e46.js');
|
|
8
|
-
var Menu = require('./Menu-
|
|
8
|
+
var Menu = require('./Menu-2528a30a.js');
|
|
9
9
|
|
|
10
10
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
11
11
|
|
package/dist/Chips/index.js
CHANGED
|
@@ -5,13 +5,14 @@ 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
|
|
8
|
+
var useAssert = require('@jobber/hooks/useAssert');
|
|
9
9
|
var Icon = require('../Icon-405a216c.js');
|
|
10
10
|
var Avatar = require('../Avatar-1aa30ee1.js');
|
|
11
11
|
var Typography = require('../Typography-fd6f932a.js');
|
|
12
12
|
var Tooltip = require('../Tooltip-bf67fe6e.js');
|
|
13
13
|
var uuid = require('uuid');
|
|
14
14
|
var lodash = require('lodash');
|
|
15
|
+
var useLiveAnnounce = require('@jobber/hooks/useLiveAnnounce');
|
|
15
16
|
var reactPopper = require('react-popper');
|
|
16
17
|
var Text = require('../Text-e7ed0974.js');
|
|
17
18
|
var Button = require('../Button-69409e46.js');
|
|
@@ -90,7 +91,7 @@ function InternalChipAffix({ affix, active, invalid, disabled, }) {
|
|
|
90
91
|
const isAvatar = (affix === null || affix === void 0 ? void 0 : affix.type) === Avatar.Avatar || false;
|
|
91
92
|
const isIcon = (affix === null || affix === void 0 ? void 0 : affix.type) === Icon.Icon || false;
|
|
92
93
|
const isChipButton = (affix === null || affix === void 0 ? void 0 : affix.type) === InternalChipButton || false;
|
|
93
|
-
|
|
94
|
+
useAssert.useAssert(!!affix && !(isAvatar || isIcon || isChipButton), `Prefix prop only accepts "<Avatar />" or "<Icon />" component. You have "${affix === null || affix === void 0 ? void 0 : affix.type}".`);
|
|
94
95
|
}
|
|
95
96
|
}
|
|
96
97
|
|
|
@@ -210,7 +211,7 @@ function useInternalChipDismissible({ children, selected, onChange, onClick, onC
|
|
|
210
211
|
const visibleChipOptions = chipOptions.filter(chip => selected.includes(chip.value));
|
|
211
212
|
const sortedVisibleChipOptions = lodash.sortBy(visibleChipOptions, chip => selected.indexOf(chip.value));
|
|
212
213
|
const availableChipOptions = chipOptions.filter(chip => !selected.includes(chip.value));
|
|
213
|
-
const { liveAnnounce } =
|
|
214
|
+
const { liveAnnounce } = useLiveAnnounce.useLiveAnnounce();
|
|
214
215
|
const actions = {
|
|
215
216
|
handleChipRemove: (value) => {
|
|
216
217
|
return () => {
|
|
@@ -276,7 +277,7 @@ function useInternalChipDismissibleInput({ options, isLoadingMore = false, onCus
|
|
|
276
277
|
const [shouldCancelEnter, setShouldCancelEnter] = React.useState(false);
|
|
277
278
|
const canAddCustomOption = onCustomOptionSelect !== undefined && !isLoadingMore;
|
|
278
279
|
const maxOptionIndex = allOptions.length - 1;
|
|
279
|
-
const { liveAnnounce } =
|
|
280
|
+
const { liveAnnounce } = useLiveAnnounce.useLiveAnnounce();
|
|
280
281
|
React.useEffect(() => {
|
|
281
282
|
setAllOptions(generateOptions(options, searchValue, canAddCustomOption));
|
|
282
283
|
}, [options]);
|
|
@@ -511,7 +512,7 @@ function Chips(props) {
|
|
|
511
512
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
512
513
|
function Chip(props) {
|
|
513
514
|
// Throw error when <Chip /> gets used outside of the <Chips />
|
|
514
|
-
|
|
515
|
+
useAssert.useAssert(true, "`<Chip>` component can only be used inside `<Chips>`");
|
|
515
516
|
return React__default["default"].createElement(React__default["default"].Fragment, null);
|
|
516
517
|
}
|
|
517
518
|
|
|
@@ -2,13 +2,15 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var ConfirmationModal = require('../ConfirmationModal-
|
|
5
|
+
var ConfirmationModal = require('../ConfirmationModal-522a9311.js');
|
|
6
6
|
require('react');
|
|
7
|
-
require('@jobber/hooks');
|
|
8
|
-
require('../Modal-
|
|
7
|
+
require('@jobber/hooks/useOnKeyDown');
|
|
8
|
+
require('../Modal-4a620c9f.js');
|
|
9
9
|
require('react-dom');
|
|
10
10
|
require('classnames');
|
|
11
11
|
require('framer-motion');
|
|
12
|
+
require('@jobber/hooks/useRefocusOnActivator');
|
|
13
|
+
require('@jobber/hooks/useFocusTrap');
|
|
12
14
|
require('../style-inject.es-9d2f5f4e.js');
|
|
13
15
|
require('../Heading-a1191b15.js');
|
|
14
16
|
require('../Typography-fd6f932a.js');
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var React = require('react');
|
|
4
|
-
var
|
|
5
|
-
var Modal = require('./Modal-
|
|
4
|
+
var useOnKeyDown = require('@jobber/hooks/useOnKeyDown');
|
|
5
|
+
var Modal = require('./Modal-4a620c9f.js');
|
|
6
6
|
var Content = require('./Content-a6590328.js');
|
|
7
7
|
var Markdown = require('./Markdown-53a0bfda.js');
|
|
8
8
|
|
|
@@ -59,7 +59,7 @@ const ConfirmationModal = React.forwardRef(function ConfirmationModalInternal({
|
|
|
59
59
|
onCancel }),
|
|
60
60
|
});
|
|
61
61
|
}, [title, message, confirmLabel, cancelLabel, onConfirm, onCancel]);
|
|
62
|
-
|
|
62
|
+
useOnKeyDown.useOnKeyDown(handleKeyboardShortcut, ["Escape", "Enter"]);
|
|
63
63
|
return (React__default["default"].createElement(Modal.Modal, { title: state.title, open: open || state.open, size: size, dismissible: false, primaryAction: {
|
|
64
64
|
label: state.confirmLabel,
|
|
65
65
|
onClick: handleAction("confirm"),
|
package/dist/DataDump/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 Card = require('../Card-
|
|
6
|
+
var Card = require('../Card-140ec4c2.js');
|
|
7
7
|
var Content = require('../Content-a6590328.js');
|
|
8
8
|
var Emphasis = require('../Emphasis-76a10790.js');
|
|
9
9
|
require('classnames');
|
|
@@ -14,10 +14,10 @@ require('../Button-69409e46.js');
|
|
|
14
14
|
require('react-router-dom');
|
|
15
15
|
require('../Icon-405a216c.js');
|
|
16
16
|
require('@jobber/design');
|
|
17
|
-
require('../Menu-
|
|
17
|
+
require('../Menu-2528a30a.js');
|
|
18
18
|
require('uuid');
|
|
19
19
|
require('framer-motion');
|
|
20
|
-
require('@jobber/hooks');
|
|
20
|
+
require('@jobber/hooks/useOnKeyDown');
|
|
21
21
|
|
|
22
22
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
23
23
|
|
package/dist/DataTable/index.js
CHANGED
|
@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
var reactTable = require('@tanstack/react-table');
|
|
6
6
|
var classnames = require('classnames');
|
|
7
7
|
var React = require('react');
|
|
8
|
-
var jobberHooks = require('@jobber/hooks');
|
|
8
|
+
var jobberHooks = require('@jobber/hooks/useResizeObserver');
|
|
9
9
|
var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
|
|
10
10
|
var tslib_es6 = require('../tslib.es6-5b8768b7.js');
|
|
11
11
|
var Option = require('../Option-26e09990.js');
|
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-5ead9469.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,7 +3,7 @@
|
|
|
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');
|
|
@@ -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 jobberHooks = require('@jobber/hooks');
|
|
6
|
+
var jobberHooks = 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');
|
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
|
@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
var lodash = require('lodash');
|
|
6
6
|
var React = require('react');
|
|
7
7
|
var FormField = require('../FormField-76853659.js');
|
|
8
|
-
var DatePicker = require('../DatePicker-
|
|
8
|
+
var DatePicker = require('../DatePicker-5ead9469.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
|
|
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/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",
|
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 jobberHooks = require('@jobber/hooks');
|
|
7
|
+
var jobberHooks = 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
|
|
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/package.json
CHANGED
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@jobber/components",
|
|
3
|
-
"version": "4.8.
|
|
3
|
+
"version": "4.8.1",
|
|
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.34.0",
|
|
21
21
|
"@jobber/formatters": "*",
|
|
22
|
-
"@jobber/hooks": "
|
|
22
|
+
"@jobber/hooks": "^2.1.0",
|
|
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": "5995c5850ac2807af4fcb0165cbc3a33cf325dab"
|
|
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
|
};
|