@jobber/components 4.7.3-create-npm.18 → 4.7.3-pre.18
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 +1 -1
- package/dist/Banner/index.js +1 -1
- package/dist/Card/index.js +3 -3
- package/dist/{Card-140ec4c2.js → Card-459a48b7.js} +1 -1
- package/dist/Chips/index.js +5 -6
- package/dist/ConfirmationModal/index.js +3 -5
- package/dist/{ConfirmationModal-522a9311.js → ConfirmationModal-3f9a3524.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-5ead9469.js → DatePicker-b704c15b.js} +2 -2
- package/dist/Disclosure/index.js +1 -1
- package/dist/FormatFile/index.js +4 -6
- package/dist/{FormatFile-01a00e98.js → FormatFile-d2c30cbc.js} +1 -1
- package/dist/Gallery/index.js +5 -7
- package/dist/InputDate/index.js +2 -2
- package/dist/LightBox/index.js +2 -4
- package/dist/{LightBox-e147a5bc.js → LightBox-c637c684.js} +6 -8
- package/dist/Menu/index.js +2 -2
- package/dist/{Menu-2528a30a.js → Menu-aa9c73d2.js} +2 -2
- package/dist/Modal/index.js +2 -4
- package/dist/{Modal-4a620c9f.js → Modal-c5f9040f.js} +4 -6
- package/dist/MultiSelect/index.js +3 -3
- package/dist/Page/index.js +2 -3
- package/dist/Popover/index.js +2 -2
- package/package.json +3 -3
|
@@ -72,7 +72,7 @@ function Menu({ visible, options, selectedOption, onOptionSelect, attachTo, }) {
|
|
|
72
72
|
function setupKeyListeners() {
|
|
73
73
|
React.useEffect(() => {
|
|
74
74
|
var _a, _b;
|
|
75
|
-
(_b =
|
|
75
|
+
(_b = menuRef === null || menuRef === void 0 ? void 0 : (_a = menuRef.children[highlightedIndex]).scrollIntoView) === null || _b === void 0 ? void 0 : _b.call(_a, {
|
|
76
76
|
behavior: "smooth",
|
|
77
77
|
block: "nearest",
|
|
78
78
|
inline: "start",
|
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');
|
|
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-459a48b7.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-aa9c73d2.js');
|
|
16
16
|
require('uuid');
|
|
17
17
|
require('framer-motion');
|
|
18
|
-
require('@jobber/hooks
|
|
18
|
+
require('@jobber/hooks');
|
|
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-aa9c73d2.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,14 +5,13 @@ 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 jobberHooks = require('@jobber/hooks');
|
|
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');
|
|
16
15
|
var reactPopper = require('react-popper');
|
|
17
16
|
var Text = require('../Text-e7ed0974.js');
|
|
18
17
|
var Button = require('../Button-69409e46.js');
|
|
@@ -91,7 +90,7 @@ function InternalChipAffix({ affix, active, invalid, disabled, }) {
|
|
|
91
90
|
const isAvatar = (affix === null || affix === void 0 ? void 0 : affix.type) === Avatar.Avatar || false;
|
|
92
91
|
const isIcon = (affix === null || affix === void 0 ? void 0 : affix.type) === Icon.Icon || false;
|
|
93
92
|
const isChipButton = (affix === null || affix === void 0 ? void 0 : affix.type) === InternalChipButton || false;
|
|
94
|
-
|
|
93
|
+
jobberHooks.useAssert(!!affix && !(isAvatar || isIcon || isChipButton), `Prefix prop only accepts "<Avatar />" or "<Icon />" component. You have "${affix === null || affix === void 0 ? void 0 : affix.type}".`);
|
|
95
94
|
}
|
|
96
95
|
}
|
|
97
96
|
|
|
@@ -211,7 +210,7 @@ function useInternalChipDismissible({ children, selected, onChange, onClick, onC
|
|
|
211
210
|
const visibleChipOptions = chipOptions.filter(chip => selected.includes(chip.value));
|
|
212
211
|
const sortedVisibleChipOptions = lodash.sortBy(visibleChipOptions, chip => selected.indexOf(chip.value));
|
|
213
212
|
const availableChipOptions = chipOptions.filter(chip => !selected.includes(chip.value));
|
|
214
|
-
const { liveAnnounce } =
|
|
213
|
+
const { liveAnnounce } = jobberHooks.useLiveAnnounce();
|
|
215
214
|
const actions = {
|
|
216
215
|
handleChipRemove: (value) => {
|
|
217
216
|
return () => {
|
|
@@ -277,7 +276,7 @@ function useInternalChipDismissibleInput({ options, isLoadingMore = false, onCus
|
|
|
277
276
|
const [shouldCancelEnter, setShouldCancelEnter] = React.useState(false);
|
|
278
277
|
const canAddCustomOption = onCustomOptionSelect !== undefined && !isLoadingMore;
|
|
279
278
|
const maxOptionIndex = allOptions.length - 1;
|
|
280
|
-
const { liveAnnounce } =
|
|
279
|
+
const { liveAnnounce } = jobberHooks.useLiveAnnounce();
|
|
281
280
|
React.useEffect(() => {
|
|
282
281
|
setAllOptions(generateOptions(options, searchValue, canAddCustomOption));
|
|
283
282
|
}, [options]);
|
|
@@ -512,7 +511,7 @@ function Chips(props) {
|
|
|
512
511
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
513
512
|
function Chip(props) {
|
|
514
513
|
// Throw error when <Chip /> gets used outside of the <Chips />
|
|
515
|
-
|
|
514
|
+
jobberHooks.useAssert(true, "`<Chip>` component can only be used inside `<Chips>`");
|
|
516
515
|
return React__default["default"].createElement(React__default["default"].Fragment, null);
|
|
517
516
|
}
|
|
518
517
|
|
|
@@ -2,15 +2,13 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var ConfirmationModal = require('../ConfirmationModal-
|
|
5
|
+
var ConfirmationModal = require('../ConfirmationModal-3f9a3524.js');
|
|
6
6
|
require('react');
|
|
7
|
-
require('@jobber/hooks
|
|
8
|
-
require('../Modal-
|
|
7
|
+
require('@jobber/hooks');
|
|
8
|
+
require('../Modal-c5f9040f.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');
|
|
14
12
|
require('../style-inject.es-9d2f5f4e.js');
|
|
15
13
|
require('../Heading-a1191b15.js');
|
|
16
14
|
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 jobberHooks = require('@jobber/hooks');
|
|
5
|
+
var Modal = require('./Modal-c5f9040f.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
|
+
jobberHooks.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-459a48b7.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-aa9c73d2.js');
|
|
18
18
|
require('uuid');
|
|
19
19
|
require('framer-motion');
|
|
20
|
-
require('@jobber/hooks
|
|
20
|
+
require('@jobber/hooks');
|
|
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');
|
|
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-b704c15b.js');
|
|
6
6
|
require('react');
|
|
7
7
|
require('classnames');
|
|
8
8
|
require('react-datepicker');
|
|
9
|
-
require('@jobber/hooks
|
|
9
|
+
require('@jobber/hooks');
|
|
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 jobberHooks = require('@jobber/hooks');
|
|
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
|
+
jobberHooks.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');
|
|
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-d2c30cbc.js');
|
|
6
6
|
require('react');
|
|
7
7
|
require('classnames');
|
|
8
8
|
require('filesize');
|
|
@@ -12,13 +12,11 @@ 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-3f9a3524.js');
|
|
16
|
+
require('@jobber/hooks');
|
|
17
|
+
require('../Modal-c5f9040f.js');
|
|
18
18
|
require('react-dom');
|
|
19
19
|
require('framer-motion');
|
|
20
|
-
require('@jobber/hooks/useRefocusOnActivator');
|
|
21
|
-
require('@jobber/hooks/useFocusTrap');
|
|
22
20
|
require('../Heading-a1191b15.js');
|
|
23
21
|
require('../ButtonDismiss-7d9deeab.js');
|
|
24
22
|
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-3f9a3524.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,19 +5,17 @@ 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-c637c684.js');
|
|
9
|
+
var FormatFile = require('../FormatFile-d2c30cbc.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
|
|
15
|
-
require('@jobber/hooks/useOnKeyDown');
|
|
16
|
-
require('@jobber/hooks/useFocusTrap');
|
|
14
|
+
require('@jobber/hooks');
|
|
17
15
|
require('../ButtonDismiss-7d9deeab.js');
|
|
18
16
|
require('filesize');
|
|
19
|
-
require('../ConfirmationModal-
|
|
20
|
-
require('../Modal-
|
|
17
|
+
require('../ConfirmationModal-3f9a3524.js');
|
|
18
|
+
require('../Modal-c5f9040f.js');
|
|
21
19
|
require('../Heading-a1191b15.js');
|
|
22
20
|
require('../Typography-fd6f932a.js');
|
|
23
21
|
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-b704c15b.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');
|
|
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,14 +2,12 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var LightBox = require('../LightBox-
|
|
5
|
+
var LightBox = require('../LightBox-c637c684.js');
|
|
6
6
|
require('react');
|
|
7
7
|
require('framer-motion');
|
|
8
8
|
require('react-dom');
|
|
9
9
|
require('lodash/debounce');
|
|
10
|
-
require('@jobber/hooks
|
|
11
|
-
require('@jobber/hooks/useOnKeyDown');
|
|
12
|
-
require('@jobber/hooks/useFocusTrap');
|
|
10
|
+
require('@jobber/hooks');
|
|
13
11
|
require('../style-inject.es-9d2f5f4e.js');
|
|
14
12
|
require('../ButtonDismiss-7d9deeab.js');
|
|
15
13
|
require('../Button-69409e46.js');
|
|
@@ -4,9 +4,7 @@ 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
|
|
8
|
-
var useOnKeyDown = require('@jobber/hooks/useOnKeyDown');
|
|
9
|
-
var useFocusTrap = require('@jobber/hooks/useFocusTrap');
|
|
7
|
+
var jobberHooks = require('@jobber/hooks');
|
|
10
8
|
var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
|
|
11
9
|
var ButtonDismiss = require('./ButtonDismiss-7d9deeab.js');
|
|
12
10
|
var Button = require('./Button-69409e46.js');
|
|
@@ -57,15 +55,15 @@ const debounceDuration = 250;
|
|
|
57
55
|
function LightBox({ open, images, imageIndex = 0, onRequestClose, }) {
|
|
58
56
|
const [currentImageIndex, setCurrentImageIndex] = React.useState(imageIndex);
|
|
59
57
|
const [direction, setDirection] = React.useState(0);
|
|
60
|
-
const lightboxRef =
|
|
58
|
+
const lightboxRef = jobberHooks.useFocusTrap(open);
|
|
61
59
|
const debouncedHandleNext = debounce__default["default"](handleMoveNext, debounceDuration);
|
|
62
60
|
const debouncedHandlePrevious = debounce__default["default"](handleMovePrevious, debounceDuration);
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
61
|
+
jobberHooks.useRefocusOnActivator(open);
|
|
62
|
+
jobberHooks.useOnKeyDown(handleRequestClose, "Escape");
|
|
63
|
+
jobberHooks.useOnKeyDown(debouncedHandlePrevious, {
|
|
66
64
|
key: "ArrowLeft",
|
|
67
65
|
});
|
|
68
|
-
|
|
66
|
+
jobberHooks.useOnKeyDown(debouncedHandleNext, {
|
|
69
67
|
key: "ArrowRight",
|
|
70
68
|
});
|
|
71
69
|
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-aa9c73d2.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');
|
|
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 jobberHooks = require('@jobber/hooks');
|
|
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
|
+
jobberHooks.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,14 +2,12 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var Modal = require('../Modal-
|
|
5
|
+
var Modal = require('../Modal-c5f9040f.js');
|
|
6
6
|
require('react');
|
|
7
7
|
require('react-dom');
|
|
8
8
|
require('classnames');
|
|
9
9
|
require('framer-motion');
|
|
10
|
-
require('@jobber/hooks
|
|
11
|
-
require('@jobber/hooks/useOnKeyDown');
|
|
12
|
-
require('@jobber/hooks/useFocusTrap');
|
|
10
|
+
require('@jobber/hooks');
|
|
13
11
|
require('../style-inject.es-9d2f5f4e.js');
|
|
14
12
|
require('../Heading-a1191b15.js');
|
|
15
13
|
require('../Typography-fd6f932a.js');
|
|
@@ -4,9 +4,7 @@ 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
|
|
8
|
-
var useOnKeyDown = require('@jobber/hooks/useOnKeyDown');
|
|
9
|
-
var useFocusTrap = require('@jobber/hooks/useFocusTrap');
|
|
7
|
+
var jobberHooks = require('@jobber/hooks');
|
|
10
8
|
var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
|
|
11
9
|
var Heading = require('./Heading-a1191b15.js');
|
|
12
10
|
var Button = require('./Button-69409e46.js');
|
|
@@ -28,9 +26,9 @@ styleInject_es.styleInject(css_248z);
|
|
|
28
26
|
|
|
29
27
|
function Modal({ open = false, title, size, dismissible = true, children, primaryAction, secondaryAction, tertiaryAction, onRequestClose, }) {
|
|
30
28
|
const modalClassName = classnames__default["default"](styles.modal, size && sizes[size]);
|
|
31
|
-
|
|
32
|
-
const modalRef =
|
|
33
|
-
|
|
29
|
+
jobberHooks.useRefocusOnActivator(open);
|
|
30
|
+
const modalRef = jobberHooks.useFocusTrap(open);
|
|
31
|
+
jobberHooks.useOnKeyDown(handleRequestClose, "Escape");
|
|
34
32
|
const template = (React__default["default"].createElement(framerMotion.AnimatePresence, null, open && (React__default["default"].createElement("div", { ref: modalRef, className: styles.container, tabIndex: 0 },
|
|
35
33
|
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 } }),
|
|
36
34
|
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 jobberHooks = require('@jobber/hooks');
|
|
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
|
+
jobberHooks.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
|
+
jobberHooks.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');
|
|
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-aa9c73d2.js');
|
|
15
15
|
var Emphasis = require('../Emphasis-76a10790.js');
|
|
16
16
|
require('../Typography-fd6f932a.js');
|
|
17
17
|
require('react-markdown');
|
|
@@ -20,7 +20,6 @@ require('../Icon-405a216c.js');
|
|
|
20
20
|
require('@jobber/design');
|
|
21
21
|
require('uuid');
|
|
22
22
|
require('framer-motion');
|
|
23
|
-
require('@jobber/hooks/useOnKeyDown');
|
|
24
23
|
|
|
25
24
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
26
25
|
|
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 jobberHooks = require('@jobber/hooks');
|
|
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
|
+
jobberHooks.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,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@jobber/components",
|
|
3
|
-
"version": "4.7.3-
|
|
3
|
+
"version": "4.7.3-pre.18+463c2eca",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -17,9 +17,9 @@
|
|
|
17
17
|
"dist/*"
|
|
18
18
|
],
|
|
19
19
|
"dependencies": {
|
|
20
|
-
"@jobber/design": "^0.32.1-
|
|
20
|
+
"@jobber/design": "^0.32.1-pre.27+463c2eca",
|
|
21
21
|
"@jobber/formatters": "^0.2.2",
|
|
22
|
-
"@jobber/hooks": "^2.0.3-
|
|
22
|
+
"@jobber/hooks": "^2.0.3-pre.74+463c2eca",
|
|
23
23
|
"@popperjs/core": "^2.0.6",
|
|
24
24
|
"@std-proposal/temporal": "0.0.1",
|
|
25
25
|
"@tanstack/react-table": "8.5.13",
|