@jobber/components 4.38.0 → 4.40.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.
- package/dist/Chip-4916a642.js +514 -0
- package/dist/Chips/index.js +19 -505
- package/dist/DataList/DataList.types.d.ts +2 -1
- package/dist/DataList/components/DataListFilters/components/DataListSort/DataListSort.d.ts +2 -0
- package/dist/DataList/components/DataListFilters/components/DataListSort/index.d.ts +1 -0
- package/dist/DataList/components/DataListHeaderTile/DataListSortingArrows.d.ts +7 -0
- package/dist/DataList/components/DataListLayoutInternal/DataListHeader.d.ts +1 -1
- package/dist/DataList/components/DataListLayoutInternal/DataListHeaderCheckbox.d.ts +7 -0
- package/dist/DataList/hooks/useMediaQuery.d.ts +1 -0
- package/dist/DataList/hooks/useResponsiveSizing.d.ts +2 -0
- package/dist/DataList/hooks/useShowHeader.d.ts +1 -0
- package/dist/DataList/index.js +163 -37
- package/dist/Popover/index.js +7 -48
- package/dist/Popover-bbfc6aa1.js +53 -0
- package/package.json +2 -2
- package/dist/DataList/components/DataListHeaderTile/SortingArrows.d.ts +0 -4
package/dist/DataList/index.js
CHANGED
|
@@ -12,7 +12,6 @@ var design = require('@jobber/design');
|
|
|
12
12
|
var isEmpty = require('lodash/isEmpty');
|
|
13
13
|
var InlineLabel = require('../InlineLabel-afd5fc6f.js');
|
|
14
14
|
var classnames = require('classnames');
|
|
15
|
-
var Icon = require('../Icon-405a216c.js');
|
|
16
15
|
var FormatDate = require('../FormatDate-70ea5b43.js');
|
|
17
16
|
var Heading = require('../Heading-a1191b15.js');
|
|
18
17
|
require('uuid');
|
|
@@ -27,12 +26,21 @@ require('react-popper');
|
|
|
27
26
|
var useFocusTrap = require('@jobber/hooks/useFocusTrap');
|
|
28
27
|
var useRefocusOnActivator = require('@jobber/hooks/useRefocusOnActivator');
|
|
29
28
|
var useOnKeyDown = require('@jobber/hooks/useOnKeyDown');
|
|
29
|
+
var AnimatedSwitcher = require('../AnimatedSwitcher-d1e1ddcf.js');
|
|
30
|
+
var Icon = require('../Icon-405a216c.js');
|
|
30
31
|
var useInView = require('@jobber/hooks/useInView');
|
|
32
|
+
var Popover = require('../Popover-bbfc6aa1.js');
|
|
33
|
+
var Content = require('../Content-2ca1ffe1.js');
|
|
34
|
+
var Chip = require('../Chip-4916a642.js');
|
|
35
|
+
require('@jobber/hooks/useAssert');
|
|
36
|
+
require('../Avatar-1aa30ee1.js');
|
|
37
|
+
require('color');
|
|
31
38
|
var debounce = require('lodash/debounce');
|
|
32
39
|
var InputText = require('../InputText-d1a52550.js');
|
|
33
|
-
var AnimatedSwitcher = require('../AnimatedSwitcher-d1e1ddcf.js');
|
|
34
40
|
var Spinner = require('../Spinner-9d8fc7ff.js');
|
|
35
|
-
require('../
|
|
41
|
+
require('../ButtonDismiss-82680c7d.js');
|
|
42
|
+
require('lodash/sortBy');
|
|
43
|
+
require('@jobber/hooks/useLiveAnnounce');
|
|
36
44
|
require('../FormField-d6138b7f.js');
|
|
37
45
|
require('../InputValidation-b5a3d92c.js');
|
|
38
46
|
|
|
@@ -43,8 +51,8 @@ var isEmpty__default = /*#__PURE__*/_interopDefaultLegacy(isEmpty);
|
|
|
43
51
|
var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
|
|
44
52
|
var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
|
|
45
53
|
|
|
46
|
-
var css_248z$d = ".TkdrExYnvcY- {\n display: -ms-flexbox;\n display: flex;\n -ms-flex-direction: column;\n flex-direction: column;\n position: relative;\n z-index: 0;\n z-index: var(--elevation-default);\n -ms-flex: 1;\n flex: 1;\n}\n\n.IcAlZHoB4LI- {\n display: -ms-flexbox;\n display: flex;\n position: relative;\n z-index: 1;\n z-index: var(--elevation-base);\n margin-bottom: calc(16px / 2);\n margin-bottom: var(--space-small);\n -ms-flex-align: center;\n align-items: center;\n}\n\n.TFO76ysivmg- {\n display: grid;\n padding: calc(16px / 2) 0;\n padding: var(--space-small) 0;\n gap: calc(16px / 2);\n grid-gap: calc(16px / 2);\n grid-gap: var(--space-small);\n gap: var(--space-small);\n grid-template-columns: auto -webkit-max-content;\n grid-template-columns: auto max-content;\n}\n\n.jGHZZYZm1ZY- {\n padding: calc(16px / 2);\n padding: var(--space-small);\n border-bottom: calc(16px / 8) solid rgb(225, 225, 225);\n border-bottom: var(--border-thick) solid var(--color-border);\n}\n\n.ise8kHCfhCY- {\n position: relative;\n padding: calc(16px / 2);\n padding: var(--space-small);\n border-bottom: calc(16px / 16) solid rgb(225, 225, 225);\n border-bottom: var(--border-base) solid var(--color-border);\n}\n\n.d-79rkMqufg- {\n display: grid;\n -
|
|
47
|
-
var styles$d = {"wrapper":"TkdrExYnvcY-","titleContainer":"IcAlZHoB4LI-","headerFilters":"TFO76ysivmg-","headerTitles":"jGHZZYZm1ZY-","listItem":"ise8kHCfhCY-","selectable":"d-79rkMqufg-","selected":"_4L7iXXzLr5k-","filtering":"Kkp-IYmwq-s-","filteringSpinner":"m-eCShL7TU4-"};
|
|
54
|
+
var css_248z$d = ".TkdrExYnvcY-,\n.TkdrExYnvcY- * {\n box-sizing: border-box;\n}\n\n.TkdrExYnvcY- {\n display: -ms-flexbox;\n display: flex;\n -ms-flex-direction: column;\n flex-direction: column;\n position: relative;\n z-index: 0;\n z-index: var(--elevation-default);\n -ms-flex: 1;\n flex: 1;\n}\n\n.IcAlZHoB4LI- {\n display: -ms-flexbox;\n display: flex;\n position: relative;\n z-index: 1;\n z-index: var(--elevation-base);\n margin-bottom: calc(16px / 2);\n margin-bottom: var(--space-small);\n -ms-flex-align: center;\n align-items: center;\n}\n\n.TFO76ysivmg- {\n display: grid;\n padding: calc(16px / 2) 0;\n padding: var(--space-small) 0;\n gap: calc(16px / 2);\n grid-gap: calc(16px / 2);\n grid-gap: var(--space-small);\n gap: var(--space-small);\n grid-template-columns: auto -webkit-max-content;\n grid-template-columns: auto max-content;\n}\n\n.jGHZZYZm1ZY- {\n display: -ms-flexbox;\n display: flex;\n -ms-flex-direction: column;\n flex-direction: column;\n -ms-flex-pack: center;\n justify-content: center;\n min-height: calc(16px * 3);\n min-height: var(--space-largest);\n padding: calc(16px / 2);\n padding: var(--space-small);\n border-bottom: calc(16px / 8) solid rgb(225, 225, 225);\n border-bottom: var(--border-thick) solid var(--color-border);\n}\n\n.jMSVGIAr5tk- > p {\n font-weight: 500;\n}\n\n.jMSVGIAr5tk- {\n display: -ms-flexbox;\n display: flex;\n -ms-flex-align: center;\n align-items: center;\n gap: calc(16px / 4);\n gap: var(--space-smaller);\n margin: calc((16px / 2) * -1) 0;\n margin: calc(calc(16px / 2) * -1) 0;\n margin: calc(var(--space-small) * -1) 0;\n}\n\n.ise8kHCfhCY- {\n position: relative;\n padding: calc(16px / 2);\n padding: var(--space-small);\n border-bottom: calc(16px / 16) solid rgb(225, 225, 225);\n border-bottom: var(--border-base) solid var(--color-border);\n}\n\n.d-79rkMqufg- {\n display: grid;\n -ms-flex-align: start;\n align-items: flex-start;\n}\n\n@media (min-width: 768px) {\n\n.d-79rkMqufg- {\n -ms-flex-align: center;\n align-items: center;\n}\n }\n\n@media (--medium-screens-and-up) {\n\n.d-79rkMqufg- {\n -ms-flex-align: center;\n align-items: center;\n}\n }\n\n.d-79rkMqufg-,\n.jGHZZYZm1ZY- .d-79rkMqufg- {\n grid-template-columns: -webkit-max-content minmax(0px, auto);\n grid-template-columns: max-content minmax(0px, auto);\n -webkit-column-gap: calc(16px / 2);\n -webkit-column-gap: var(--space-small);\n -moz-column-gap: calc(16px / 2);\n -moz-column-gap: var(--space-small);\n column-gap: calc(16px / 2);\n column-gap: var(--space-small);\n}\n\n.jGHZZYZm1ZY- .d-79rkMqufg- {\n display: grid;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.qm-SSuWTXkI- {\n display: -ms-flexbox;\n display: flex;\n visibility: hidden;\n}\n\n.qm-SSuWTXkI-.VA9RnQp6nbI- {\n visibility: visible;\n}\n\n.ise8kHCfhCY- .d-79rkMqufg- > :first-child {\n padding-top: calc(16px / 4);\n padding-top: var(--space-smaller);\n opacity: 1;\n transition: opacity 100ms ease-in-out;\n transition: opacity var(--transition-properties);\n --transition-properties: var(--timing-quick) ease-in-out;\n}\n\n@media (min-width: 768px) {\n\n.ise8kHCfhCY- .d-79rkMqufg- > :first-child {\n padding-top: 0;\n opacity: 0;\n}\n }\n\n@media (--medium-screens-and-up) {\n\n.ise8kHCfhCY- .d-79rkMqufg- > :first-child {\n padding-top: 0;\n opacity: 0;\n}\n }\n\n.ise8kHCfhCY-:hover .d-79rkMqufg- > :first-child,\n.ise8kHCfhCY-:focus-within .d-79rkMqufg- > :first-child,\n.ise8kHCfhCY- .d-79rkMqufg-._4L7iXXzLr5k- > :first-child {\n opacity: 1;\n}\n\n.Kkp-IYmwq-s- {\n display: -ms-flexbox;\n display: flex;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n background-color: rgba(255, 255, 255, 0.6);\n background-color: var(--color-overlay--dimmed);\n -ms-flex-align: start;\n align-items: flex-start;\n -ms-flex-pack: center;\n justify-content: center;\n}\n\n.m-eCShL7TU4- {\n position: sticky;\n top: 50vh;\n}\n";
|
|
55
|
+
var styles$d = {"wrapper":"TkdrExYnvcY-","titleContainer":"IcAlZHoB4LI-","headerFilters":"TFO76ysivmg-","headerTitles":"jGHZZYZm1ZY-","headerBatchSelect":"jMSVGIAr5tk-","listItem":"ise8kHCfhCY-","selectable":"d-79rkMqufg-","selectAllCheckbox":"qm-SSuWTXkI-","visible":"VA9RnQp6nbI-","selected":"_4L7iXXzLr5k-","filtering":"Kkp-IYmwq-s-","filteringSpinner":"m-eCShL7TU4-"};
|
|
48
56
|
styleInject_es.styleInject(css_248z$d);
|
|
49
57
|
|
|
50
58
|
var css_248z$c = ".F56prQsXm3A- {\n min-width: 80px;\n margin-left: calc(16px / 2);\n margin-left: var(--space-small);\n}\n";
|
|
@@ -147,22 +155,23 @@ function buildIntersectionThreshold(items) {
|
|
|
147
155
|
return thresholds;
|
|
148
156
|
}
|
|
149
157
|
|
|
150
|
-
var css_248z$9 = ".fLmJZJJqMcE- {\n display: -ms-flexbox;\n display: flex;\n -ms-flex-align: center;\n align-items: center;\n padding: 0;\n border: none;\n background-color: transparent;\n}\n\n.UG8cHUT3Hds- {\n cursor: pointer;\n}\n
|
|
158
|
+
var css_248z$9 = ".fLmJZJJqMcE- {\n display: -ms-flexbox;\n display: flex;\n -ms-flex-align: center;\n align-items: center;\n padding: 0;\n border: none;\n background-color: transparent;\n}\n\n.UG8cHUT3Hds- {\n cursor: pointer;\n}\n";
|
|
151
159
|
var styles$9 = {"headerLabel":"fLmJZJJqMcE-","sortable":"UG8cHUT3Hds-"};
|
|
152
160
|
styleInject_es.styleInject(css_248z$9);
|
|
153
161
|
|
|
154
|
-
var css_248z$8 = ".
|
|
155
|
-
var styles$8 = {"
|
|
162
|
+
var css_248z$8 = ".AN5egORYy-0- {\n padding-right: calc(16px / 2);\n padding-right: var(--space-small);\n}\n\n.AN5egORYy-0- path {\n fill: rgba(101, 120, 132, 1);\n fill: var(--color-greyBlue);\n transition: all 200ms ease;\n transition: all var(--timing-base) ease;\n}\n\n.AN5egORYy-0- path.F1uTDCK0Sb0- {\n fill: rgb(1, 41, 57);\n fill: var(--color-blue);\n}\n\n.AN5egORYy-0- path._6KYeQXWXLQ8- {\n fill: rgb(193, 201, 206);\n fill: var(--color-greyBlue--lighter);\n}\n";
|
|
163
|
+
var styles$8 = {"sortIcon":"AN5egORYy-0-","active":"F1uTDCK0Sb0-","inactive":"_6KYeQXWXLQ8-"};
|
|
156
164
|
styleInject_es.styleInject(css_248z$8);
|
|
157
165
|
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
React__default["default"].createElement(
|
|
164
|
-
|
|
165
|
-
|
|
166
|
+
const SORTING_ICON_TEST_ID = "ATL-DataList-Sorting-Icon";
|
|
167
|
+
function DataListSortingArrows({ order }) {
|
|
168
|
+
return (React__default["default"].createElement("div", { className: styles$8.sortIcon, "data-testid": SORTING_ICON_TEST_ID },
|
|
169
|
+
React__default["default"].createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
|
|
170
|
+
React__default["default"].createElement("path", { className: getActiveClassName("asc"), d: "M16.2929 10.6661C15.9024 11.0566 15.2692 11.0566 14.8787 10.6661L12.2891 8.14263L9.70711 10.6661C9.31658 11.0566 8.68342 11.0566 8.29289 10.6661C7.90237 10.2756 7.90237 9.64239 8.29289 9.25186L11.5858 5.95897C11.9763 5.56845 12.6095 5.56845 13 5.95897L16.2929 9.25186C16.6834 9.64239 16.6834 10.2756 16.2929 10.6661Z" }),
|
|
171
|
+
React__default["default"].createElement("path", { className: getActiveClassName("desc"), d: "M8.29292 13.3339C8.68345 12.9434 9.31661 12.9434 9.70714 13.3339L12.2968 15.8573L14.8787 13.3339C15.2692 12.9434 15.9024 12.9434 16.2929 13.3339C16.6834 13.7244 16.6834 14.3576 16.2929 14.7481L13 18.041C12.6095 18.4315 11.9763 18.4315 11.5858 18.041L8.29292 14.7481C7.9024 14.3576 7.9024 13.7244 8.29292 13.3339Z" }))));
|
|
172
|
+
function getActiveClassName(targetOrder) {
|
|
173
|
+
return order === targetOrder ? styles$8.active : styles$8.inactive;
|
|
174
|
+
}
|
|
166
175
|
}
|
|
167
176
|
|
|
168
177
|
const defaultValues = {
|
|
@@ -186,14 +195,14 @@ function DataListHeaderTile({ headers, headerKey, }) {
|
|
|
186
195
|
[styles$9.sortable]: isSortable,
|
|
187
196
|
}), onClick: handleOnClick },
|
|
188
197
|
React__default["default"].createElement(Text.Text, { maxLines: "single" }, headers[headerKey]),
|
|
189
|
-
(sortingState === null || sortingState === void 0 ? void 0 : sortingState.key) === headerKey && (React__default["default"].createElement(
|
|
198
|
+
(sortingState === null || sortingState === void 0 ? void 0 : sortingState.key) === headerKey && (React__default["default"].createElement(DataListSortingArrows, { order: sortingState.order }))));
|
|
190
199
|
function toggleSorting(sortingKey) {
|
|
191
|
-
if ((sortingState === null || sortingState === void 0 ? void 0 : sortingState.
|
|
200
|
+
if ((sortingState === null || sortingState === void 0 ? void 0 : sortingState.order) === "desc") {
|
|
192
201
|
sorting === null || sorting === void 0 ? void 0 : sorting.onSort(undefined);
|
|
193
202
|
return;
|
|
194
203
|
}
|
|
195
204
|
sorting === null || sorting === void 0 ? void 0 : sorting.onSort({
|
|
196
|
-
|
|
205
|
+
order: (sortingState === null || sortingState === void 0 ? void 0 : sortingState.order) === "asc" ? "desc" : "asc",
|
|
197
206
|
key: sortingKey,
|
|
198
207
|
});
|
|
199
208
|
}
|
|
@@ -449,19 +458,78 @@ function DataListItems({ layouts, mediaMatches, data, }) {
|
|
|
449
458
|
} }));
|
|
450
459
|
}
|
|
451
460
|
|
|
452
|
-
function
|
|
453
|
-
const
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
461
|
+
function DataListHeaderCheckbox({ children }) {
|
|
462
|
+
const { data, totalCount, selected = [], onSelectAll, onSelect, } = useDataListContext();
|
|
463
|
+
if (!onSelectAll && !onSelect)
|
|
464
|
+
return children;
|
|
465
|
+
return (React__default["default"].createElement("div", { className: classnames__default["default"](styles$d.selectable) },
|
|
466
|
+
React__default["default"].createElement("div", { className: classnames__default["default"](styles$d.selectAllCheckbox, {
|
|
467
|
+
[styles$d.visible]: Boolean(onSelectAll),
|
|
468
|
+
}) },
|
|
469
|
+
React__default["default"].createElement(Checkbox.Checkbox, { checked: isAllSelected(), indeterminate: selected.length > 0 && !isAllSelected(), onChange: onSelectAll })),
|
|
470
|
+
React__default["default"].createElement(AnimatedSwitcher.AnimatedSwitcher, { switched: Boolean(selected.length), initialChild: children, switchTo: React__default["default"].createElement("div", { className: styles$d.headerBatchSelect },
|
|
471
|
+
React__default["default"].createElement(Text.Text, null,
|
|
472
|
+
React__default["default"].createElement("b", null,
|
|
473
|
+
selected.length,
|
|
474
|
+
" selected")),
|
|
475
|
+
React__default["default"].createElement(Button.Button, { label: "Deselect All", onClick: () => onSelect === null || onSelect === void 0 ? void 0 : onSelect([]), type: "tertiary" })) })));
|
|
476
|
+
function isAllSelected() {
|
|
477
|
+
// If there's a totalCount, we can use that to accurately determine if the
|
|
478
|
+
// user have "selected all".
|
|
479
|
+
if (totalCount) {
|
|
480
|
+
return totalCount === selected.length;
|
|
481
|
+
}
|
|
482
|
+
// Otherwise, we'll use the total count of data. This is not as reliable, as
|
|
483
|
+
// it's possible that the would select all loaded data while we're
|
|
484
|
+
// loading more. It's still hard to get to that state as the load more
|
|
485
|
+
// triggers before you see the last item.
|
|
486
|
+
return data.length > 0 && selected.length >= data.length;
|
|
487
|
+
}
|
|
488
|
+
}
|
|
489
|
+
|
|
490
|
+
function useMediaQuery(CSSMediaQuery) {
|
|
491
|
+
const [matches, setMatches] = React.useState(window.matchMedia(CSSMediaQuery).matches);
|
|
492
|
+
React.useEffect(() => {
|
|
493
|
+
const media = window.matchMedia(CSSMediaQuery);
|
|
494
|
+
if (media.matches !== matches) {
|
|
495
|
+
setMatches(media.matches);
|
|
496
|
+
}
|
|
497
|
+
const listener = () => setMatches(media.matches);
|
|
498
|
+
media.addEventListener("change", listener);
|
|
499
|
+
return () => media.removeEventListener("change", listener);
|
|
500
|
+
}, [CSSMediaQuery]);
|
|
501
|
+
return matches;
|
|
502
|
+
}
|
|
503
|
+
|
|
504
|
+
function useResponsiveSizing() {
|
|
505
|
+
const xs = useMediaQuery(`(width > ${BREAKPOINT_SIZES.xs}px)`);
|
|
506
|
+
const sm = useMediaQuery(`(width >= ${BREAKPOINT_SIZES.sm}px)`);
|
|
507
|
+
const md = useMediaQuery(`(width >= ${BREAKPOINT_SIZES.md}px)`);
|
|
508
|
+
const lg = useMediaQuery(`(width >= ${BREAKPOINT_SIZES.lg}px)`);
|
|
509
|
+
const xl = useMediaQuery(`(width >= ${BREAKPOINT_SIZES.xl}px)`);
|
|
510
|
+
return { xs, sm, md, lg, xl };
|
|
511
|
+
}
|
|
512
|
+
|
|
513
|
+
function useShowHeader() {
|
|
514
|
+
const { headerVisibility } = useDataListContext();
|
|
515
|
+
if (headerVisibility === undefined)
|
|
516
|
+
return true;
|
|
517
|
+
const sizes = useResponsiveSizing();
|
|
518
|
+
const sizeKeys = Object.keys(sizes);
|
|
519
|
+
const showHeader = sizeKeys.reduce((previous, breakpoint) => {
|
|
520
|
+
const isHeaderVisible = headerVisibility[breakpoint] || false;
|
|
521
|
+
const isBreakpointTriggered = sizes[breakpoint];
|
|
522
|
+
return previous || (isBreakpointTriggered && isHeaderVisible);
|
|
523
|
+
}, false);
|
|
524
|
+
return showHeader;
|
|
525
|
+
}
|
|
526
|
+
|
|
527
|
+
function DataListHeader({ layouts, mediaMatches, headerData, }) {
|
|
528
|
+
const showHeader = useShowHeader();
|
|
460
529
|
if (!showHeader || !headerData)
|
|
461
|
-
return
|
|
462
|
-
return (React__default["default"].createElement(DataListLayoutInternal, { layouts: layouts, renderLayout: layout => {
|
|
463
|
-
|
|
464
|
-
}, mediaMatches: mediaMatches }));
|
|
530
|
+
return null;
|
|
531
|
+
return (React__default["default"].createElement(DataListLayoutInternal, { layouts: layouts, mediaMatches: mediaMatches, renderLayout: layout => (React__default["default"].createElement("div", { className: classnames__default["default"](styles$d.headerTitles) },
|
|
532
|
+
React__default["default"].createElement(DataListHeaderCheckbox, null, layout.props.children(headerData)))) }));
|
|
465
533
|
}
|
|
466
534
|
|
|
467
535
|
const LOADING_STATE_LIMIT_ITEMS = 10;
|
|
@@ -499,6 +567,59 @@ styleInject_es.styleInject(css_248z$4);
|
|
|
499
567
|
|
|
500
568
|
const CONTAINER_TEST_ID = "ATL-DataListFilters-Container";
|
|
501
569
|
|
|
570
|
+
function DataListSort() {
|
|
571
|
+
const { sorting, headers } = useDataListContext();
|
|
572
|
+
const divRef = React.useRef(null);
|
|
573
|
+
const [showPopover, setShowPopover] = React.useState(false);
|
|
574
|
+
if (!sorting)
|
|
575
|
+
return null;
|
|
576
|
+
const { sortable, state, onSort } = sorting;
|
|
577
|
+
const sortByOptions = getSortByOptions();
|
|
578
|
+
const canChangeOrder = !(state === null || state === void 0 ? void 0 : state.key);
|
|
579
|
+
return (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
580
|
+
React__default["default"].createElement("span", { ref: divRef },
|
|
581
|
+
React__default["default"].createElement(Button.Button, Object.assign({}, (!state && { icon: "add", iconOnRight: true }), { label: getButtonLabel(), variation: "subtle", onClick: () => setShowPopover(!showPopover) }))),
|
|
582
|
+
React__default["default"].createElement(Popover.Popover, { attachTo: divRef, open: showPopover, onRequestClose: () => setShowPopover(false) },
|
|
583
|
+
React__default["default"].createElement(Content.Content, null,
|
|
584
|
+
React__default["default"].createElement(Heading.Heading, { level: 5 }, "Sort by"),
|
|
585
|
+
React__default["default"].createElement(Chip.Chips, { selected: (state === null || state === void 0 ? void 0 : state.key) || "none", onChange: handleKeyChange }, sortByOptions.map(({ label, value }) => (React__default["default"].createElement(Chip.Chip, { key: label, label: label, value: value })))),
|
|
586
|
+
React__default["default"].createElement(Heading.Heading, { level: 5 }, "Ordered by"),
|
|
587
|
+
React__default["default"].createElement(Chip.Chips, { selected: state === null || state === void 0 ? void 0 : state.order, onChange: handleSortingChange },
|
|
588
|
+
React__default["default"].createElement(Chip.Chip, { label: "Ascending", value: "asc", disabled: canChangeOrder }),
|
|
589
|
+
React__default["default"].createElement(Chip.Chip, { label: "Descending", value: "desc", disabled: canChangeOrder }))))));
|
|
590
|
+
function getSortByOptions() {
|
|
591
|
+
const options = sortable.reduce((acc, sort) => {
|
|
592
|
+
const label = headers[sort];
|
|
593
|
+
if (!label)
|
|
594
|
+
return acc;
|
|
595
|
+
acc.push({ label, value: sort.toString() });
|
|
596
|
+
return acc;
|
|
597
|
+
}, []);
|
|
598
|
+
// Inject a none option as the first option
|
|
599
|
+
options.unshift({ label: "None", value: "none" });
|
|
600
|
+
return options;
|
|
601
|
+
}
|
|
602
|
+
function getButtonLabel() {
|
|
603
|
+
const label = state && headers[state.key];
|
|
604
|
+
if (!label)
|
|
605
|
+
return "Sort by";
|
|
606
|
+
return `Sort by: ${label}, ${state.order}`;
|
|
607
|
+
}
|
|
608
|
+
function handleKeyChange(value) {
|
|
609
|
+
if (value && value !== "none") {
|
|
610
|
+
onSort({ key: value, order: (state === null || state === void 0 ? void 0 : state.order) || "asc" });
|
|
611
|
+
return;
|
|
612
|
+
}
|
|
613
|
+
onSort(undefined);
|
|
614
|
+
}
|
|
615
|
+
function handleSortingChange(value) {
|
|
616
|
+
if ((state === null || state === void 0 ? void 0 : state.key) && value) {
|
|
617
|
+
onSort({ key: state.key, order: value });
|
|
618
|
+
return;
|
|
619
|
+
}
|
|
620
|
+
}
|
|
621
|
+
}
|
|
622
|
+
|
|
502
623
|
// This component is meant to capture the props of the DataList.Filters
|
|
503
624
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
504
625
|
function DataListFilters(_) {
|
|
@@ -509,19 +630,22 @@ function DataListFilters(_) {
|
|
|
509
630
|
*/
|
|
510
631
|
function InternalDataListFilters() {
|
|
511
632
|
const { children: parentChildren } = useDataListContext();
|
|
633
|
+
const showHeader = useShowHeader();
|
|
634
|
+
const showSortButton = !showHeader;
|
|
512
635
|
const component = getCompoundComponent(parentChildren, DataListFilters);
|
|
513
636
|
const [leftRef, isLeftVisible] = useInView.useInView();
|
|
514
637
|
const [rightRef, isRightVisible] = useInView.useInView();
|
|
515
|
-
if (!component)
|
|
638
|
+
if (!showSortButton && !component)
|
|
516
639
|
return null;
|
|
517
|
-
const
|
|
640
|
+
const children = component === null || component === void 0 ? void 0 : component.props.children;
|
|
518
641
|
return (React__default["default"].createElement("div", { "data-testid": CONTAINER_TEST_ID, className: classnames__default["default"](styles$4.filters, {
|
|
519
642
|
[styles$4.overflowLeft]: !isLeftVisible,
|
|
520
643
|
[styles$4.overflowRight]: !isRightVisible,
|
|
521
644
|
}) },
|
|
522
645
|
React__default["default"].createElement("div", { className: styles$4.filterActions },
|
|
523
646
|
React__default["default"].createElement("span", { ref: leftRef, className: styles$4.overflowTrigger }),
|
|
524
|
-
children,
|
|
647
|
+
children && children,
|
|
648
|
+
showSortButton && React__default["default"].createElement(DataListSort, null),
|
|
525
649
|
React__default["default"].createElement("span", { ref: rightRef, className: styles$4.overflowTrigger }))));
|
|
526
650
|
}
|
|
527
651
|
|
|
@@ -545,7 +669,7 @@ function DataListStickyHeader({ children }) {
|
|
|
545
669
|
return (React__default["default"].createElement("div", { ref: ref, className: classnames__default["default"](styles$3.header, { [styles$3.stuck]: isStuck }) }, children));
|
|
546
670
|
}
|
|
547
671
|
|
|
548
|
-
var css_248z$2 = ".SaPMOnvw-3c- {\n --transition-properties: var(--timing-base) ease-in-out;\n --button-offset: calc(var(--space-largest) - var(--space-smallest));\n\n position: absolute;\n /* Inputs are off by 1 when put beside a button */\n top: calc((16px / 2)
|
|
672
|
+
var css_248z$2 = ".SaPMOnvw-3c- {\n --transition-properties: var(--timing-base) ease-in-out;\n --button-offset: calc(var(--space-largest) - var(--space-smallest));\n\n position: absolute;\n /* Inputs are off by 1 when put beside a button */\n top: calc((16px / 2) + 1px);\n top: calc(calc(16px / 2) + 1px);\n top: calc(var(--space-small) + 1px);\n right: calc((16px * 3) - (16px / 8));\n right: calc(calc(16px * 3) - calc(16px / 8));\n right: var(--button-offset);\n visibility: hidden;\n width: 0;\n opacity: 0;\n transition: opacity 200ms ease-in-out,\n width 200ms ease-in-out, visibility 200ms ease-in-out;\n transition: opacity var(--transition-properties),\n width var(--transition-properties), visibility var(--transition-properties);\n}\n\n._3S1-91v2SYI- {\n visibility: visible;\n width: calc(100% - var(--button-offset));\n opacity: 1;\n}\n\n@media (min-width: 768px) {\n\n.SaPMOnvw-3c-,\n._3S1-91v2SYI- {\n position: static;\n visibility: visible;\n width: auto;\n opacity: 1;\n transition: none;\n}\n }\n\n@media (--medium-screens-and-up) {\n\n.SaPMOnvw-3c-,\n._3S1-91v2SYI- {\n position: static;\n visibility: visible;\n width: auto;\n opacity: 1;\n transition: none;\n}\n }\n\n._9GlBktsUALw- {\n display: block;\n}\n\n@media (min-width: 768px) {\n\n._9GlBktsUALw- {\n display: none;\n}\n }\n\n@media (--medium-screens-and-up) {\n\n._9GlBktsUALw- {\n display: none;\n}\n }\n\n/*\n * No Filters Styling\n *\n * When there are no filters, the search input is always visible.\n * ------------------------------------------------------------------------- */\n\n._3Pjrt42x454- .SaPMOnvw-3c- {\n position: static;\n visibility: visible;\n width: auto;\n opacity: 1;\n transition: none;\n}\n\n@media (min-width: 768px) {\n\n._3Pjrt42x454- .SaPMOnvw-3c- {\n max-width: 30%;\n}\n }\n\n@media (--medium-screens-and-up) {\n\n._3Pjrt42x454- .SaPMOnvw-3c- {\n max-width: 30%;\n}\n }\n\n._3Pjrt42x454- ._9GlBktsUALw- {\n display: none;\n}\n";
|
|
549
673
|
var styles$2 = {"searchInput":"SaPMOnvw-3c-","searchInputVisible":"_3S1-91v2SYI-","searchButton":"_9GlBktsUALw-","withNoFilters":"_3Pjrt42x454-"};
|
|
550
674
|
styleInject_es.styleInject(css_248z$2);
|
|
551
675
|
|
|
@@ -561,12 +685,14 @@ function DataListSearch(_) {
|
|
|
561
685
|
function InternalDataListSearch() {
|
|
562
686
|
const inputRef = React.useRef(null);
|
|
563
687
|
const [visible, setVisible] = React.useState(false);
|
|
564
|
-
const { searchComponent, filterComponent, title } = useDataListContext();
|
|
688
|
+
const { searchComponent, filterComponent, sorting, title } = useDataListContext();
|
|
565
689
|
const debouncedSearch = React.useCallback(debounce__default["default"]((value) => { var _a; return (_a = searchComponent === null || searchComponent === void 0 ? void 0 : searchComponent.props) === null || _a === void 0 ? void 0 : _a.onSearch(value); }, SEARCH_DEBOUNCE_DELAY), [searchComponent === null || searchComponent === void 0 ? void 0 : searchComponent.props.onSearch]);
|
|
566
690
|
if (!searchComponent)
|
|
567
691
|
return null;
|
|
568
692
|
const { placeholder } = searchComponent.props;
|
|
569
|
-
return (React__default["default"].createElement("div", { className: classnames__default["default"]({
|
|
693
|
+
return (React__default["default"].createElement("div", { className: classnames__default["default"]({
|
|
694
|
+
[styles$2.withNoFilters]: !filterComponent && !sorting,
|
|
695
|
+
}) },
|
|
570
696
|
React__default["default"].createElement("div", { "data-testid": DATA_LIST_SEARCH_TEST_ID, className: classnames__default["default"](styles$2.searchInput, {
|
|
571
697
|
[styles$2.searchInputVisible]: visible,
|
|
572
698
|
}) },
|
package/dist/Popover/index.js
CHANGED
|
@@ -2,11 +2,12 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
5
|
+
var Popover = require('../Popover-bbfc6aa1.js');
|
|
6
|
+
require('react');
|
|
7
|
+
require('react-popper');
|
|
8
|
+
require('@jobber/hooks/useRefocusOnActivator');
|
|
9
|
+
require('../style-inject.es-9d2f5f4e.js');
|
|
10
|
+
require('../ButtonDismiss-82680c7d.js');
|
|
10
11
|
require('../Button-fd8413b2.js');
|
|
11
12
|
require('classnames');
|
|
12
13
|
require('react-router-dom');
|
|
@@ -14,48 +15,6 @@ require('../Icon-405a216c.js');
|
|
|
14
15
|
require('@jobber/design');
|
|
15
16
|
require('../Typography-fd6f932a.js');
|
|
16
17
|
|
|
17
|
-
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
18
18
|
|
|
19
|
-
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
20
19
|
|
|
21
|
-
|
|
22
|
-
var classes = {"header":"oSlK4rLUvzE-","dismissButton":"XVPpPb-7e30-","popover":"TDuYbqXaLW0-","arrow":"LJCpn0zf1e8-"};
|
|
23
|
-
styleInject_es.styleInject(css_248z);
|
|
24
|
-
|
|
25
|
-
function Popover({ onRequestClose, children, attachTo, open, preferredPlacement = "auto", }) {
|
|
26
|
-
const [popperElement, setPopperElement] = React.useState();
|
|
27
|
-
const [arrowElement, setArrowElement] = React.useState();
|
|
28
|
-
const { styles: popperStyles, attributes } = reactPopper.usePopper(attachTo instanceof Element ? attachTo : attachTo.current, popperElement, {
|
|
29
|
-
modifiers: buildModifiers(arrowElement),
|
|
30
|
-
placement: preferredPlacement,
|
|
31
|
-
});
|
|
32
|
-
useRefocusOnActivator.useRefocusOnActivator(open);
|
|
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
|
-
React__default["default"].createElement("div", { className: classes.dismissButton },
|
|
35
|
-
React__default["default"].createElement(ButtonDismiss.ButtonDismiss, { onClick: onRequestClose, ariaLabel: "Close dialog" })),
|
|
36
|
-
children,
|
|
37
|
-
React__default["default"].createElement("div", { ref: setArrowElement, className: classes.arrow, style: popperStyles.arrow })))));
|
|
38
|
-
}
|
|
39
|
-
function buildModifiers(arrowElement) {
|
|
40
|
-
const modifiers = [
|
|
41
|
-
{
|
|
42
|
-
name: "arrow",
|
|
43
|
-
options: { element: arrowElement, padding: 10 },
|
|
44
|
-
},
|
|
45
|
-
{
|
|
46
|
-
name: "offset",
|
|
47
|
-
options: {
|
|
48
|
-
offset: [0, 10],
|
|
49
|
-
},
|
|
50
|
-
},
|
|
51
|
-
{
|
|
52
|
-
name: "flip",
|
|
53
|
-
options: {
|
|
54
|
-
fallbackPlacements: ["auto"],
|
|
55
|
-
},
|
|
56
|
-
},
|
|
57
|
-
];
|
|
58
|
-
return modifiers;
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
exports.Popover = Popover;
|
|
20
|
+
exports.Popover = Popover.Popover;
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var React = require('react');
|
|
4
|
+
var reactPopper = require('react-popper');
|
|
5
|
+
var useRefocusOnActivator = require('@jobber/hooks/useRefocusOnActivator');
|
|
6
|
+
var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
|
|
7
|
+
var ButtonDismiss = require('./ButtonDismiss-82680c7d.js');
|
|
8
|
+
|
|
9
|
+
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
10
|
+
|
|
11
|
+
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
12
|
+
|
|
13
|
+
var css_248z = ":root {\n --card--base-padding: var(--space-base);\n --popover--padding: var(--space-base);\n --popover--width: calc(var(--base-unit) * 21.875);\n --dismiss--button-padding: calc(var(--base-unit) / 4);\n}\n\n.oSlK4rLUvzE- {\n display: -ms-flexbox;\n display: flex;\n position: \"relative\";\n padding: calc(16px * 1);\n padding: var(--popover--padding);\n -ms-flex-pack: justify;\n justify-content: space-between;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.XVPpPb-7e30- {\n float: right;\n padding: calc(16px / 4);\n padding: var(--dismiss--button-padding);\n text-align: right;\n}\n\n.TDuYbqXaLW0- {\n z-index: 1002;\n z-index: var(--elevation-tooltip);\n width: -webkit-max-content;\n width: max-content;\n max-width: calc(16px * 21.875);\n max-width: var(--popover--width);\n box-shadow: 0px calc(16px / 16) calc(16px / 4) 0px\n rgba(0, 0, 0, 0.1),\n 0px calc(16px / 4) 12px 0px rgba(0, 0, 0, 0.05);\n box-shadow: var(--shadow-base);\n border: calc(16px / 16) solid rgb(225, 225, 225);\n border: var(--border-base) solid var(--color-border);\n border-radius: calc(16px / 8);\n border-radius: var(--radius-base);\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 line-height: normal;\n background: rgba(255, 255, 255, 1);\n background: var(--color-surface);\n}\n\n.TDuYbqXaLW0- > * {\n --public-content--padding: var(--card--base-padding);\n}\n\n.LJCpn0zf1e8- {\n visibility: hidden;\n}\n\n.LJCpn0zf1e8-,\n.LJCpn0zf1e8-::before {\n position: absolute;\n width: 16px;\n width: var(--base-unit);\n height: 16px;\n height: var(--base-unit);\n background: inherit;\n}\n\n.LJCpn0zf1e8-::before {\n content: \"\";\n visibility: visible;\n border: calc(16px / 16) solid rgb(225, 225, 225);\n border: var(--border-base) solid var(--color-border);\n -webkit-transform: rotate(45deg);\n transform: rotate(45deg);\n -webkit-transform-origin: center;\n transform-origin: center;\n -webkit-clip-path: polygon(-4px -4px, 15.3px 0, 0 15.3px);\n clip-path: polygon(-4px -4px, 15.3px 0, 0 15.3px);\n}\n\n.TDuYbqXaLW0-[data-popper-placement^=\"top\"] > .LJCpn0zf1e8- {\n bottom: -5px;\n}\n\n.TDuYbqXaLW0-[data-popper-placement^=\"top\"] > .LJCpn0zf1e8-::before {\n -webkit-transform: rotate(-135deg);\n transform: rotate(-135deg);\n}\n\n.TDuYbqXaLW0-[data-popper-placement^=\"bottom\"] > .LJCpn0zf1e8- {\n top: -7px;\n}\n\n.TDuYbqXaLW0-[data-popper-placement^=\"left\"] > .LJCpn0zf1e8- {\n right: -5px;\n}\n\n.TDuYbqXaLW0-[data-popper-placement^=\"left\"] > .LJCpn0zf1e8-::before {\n -webkit-transform: rotate(135deg);\n transform: rotate(135deg);\n}\n\n.TDuYbqXaLW0-[data-popper-placement^=\"right\"] > .LJCpn0zf1e8- {\n left: -7px;\n}\n\n.TDuYbqXaLW0-[data-popper-placement^=\"right\"] > .LJCpn0zf1e8-::before {\n -webkit-transform: rotate(-45deg);\n transform: rotate(-45deg);\n}\n";
|
|
14
|
+
var classes = {"header":"oSlK4rLUvzE-","dismissButton":"XVPpPb-7e30-","popover":"TDuYbqXaLW0-","arrow":"LJCpn0zf1e8-"};
|
|
15
|
+
styleInject_es.styleInject(css_248z);
|
|
16
|
+
|
|
17
|
+
function Popover({ onRequestClose, children, attachTo, open, preferredPlacement = "auto", }) {
|
|
18
|
+
const [popperElement, setPopperElement] = React.useState();
|
|
19
|
+
const [arrowElement, setArrowElement] = React.useState();
|
|
20
|
+
const { styles: popperStyles, attributes } = reactPopper.usePopper(attachTo instanceof Element ? attachTo : attachTo.current, popperElement, {
|
|
21
|
+
modifiers: buildModifiers(arrowElement),
|
|
22
|
+
placement: preferredPlacement,
|
|
23
|
+
});
|
|
24
|
+
useRefocusOnActivator.useRefocusOnActivator(open);
|
|
25
|
+
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),
|
|
26
|
+
React__default["default"].createElement("div", { className: classes.dismissButton },
|
|
27
|
+
React__default["default"].createElement(ButtonDismiss.ButtonDismiss, { onClick: onRequestClose, ariaLabel: "Close dialog" })),
|
|
28
|
+
children,
|
|
29
|
+
React__default["default"].createElement("div", { ref: setArrowElement, className: classes.arrow, style: popperStyles.arrow })))));
|
|
30
|
+
}
|
|
31
|
+
function buildModifiers(arrowElement) {
|
|
32
|
+
const modifiers = [
|
|
33
|
+
{
|
|
34
|
+
name: "arrow",
|
|
35
|
+
options: { element: arrowElement, padding: 10 },
|
|
36
|
+
},
|
|
37
|
+
{
|
|
38
|
+
name: "offset",
|
|
39
|
+
options: {
|
|
40
|
+
offset: [0, 10],
|
|
41
|
+
},
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
name: "flip",
|
|
45
|
+
options: {
|
|
46
|
+
fallbackPlacements: ["auto"],
|
|
47
|
+
},
|
|
48
|
+
},
|
|
49
|
+
];
|
|
50
|
+
return modifiers;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
exports.Popover = Popover;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@jobber/components",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.40.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -84,5 +84,5 @@
|
|
|
84
84
|
"> 1%",
|
|
85
85
|
"IE 10"
|
|
86
86
|
],
|
|
87
|
-
"gitHead": "
|
|
87
|
+
"gitHead": "621f279e8f27d74e69fd76f63b763e38196cd000"
|
|
88
88
|
}
|