@jobber/components 4.55.2 → 4.55.3
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/DataList/index.js +71 -66
- package/package.json +2 -2
package/dist/DataList/index.js
CHANGED
|
@@ -53,13 +53,13 @@ var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
|
|
|
53
53
|
var isEmpty__default = /*#__PURE__*/_interopDefaultLegacy(isEmpty);
|
|
54
54
|
var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
|
|
55
55
|
|
|
56
|
-
var css_248z$
|
|
57
|
-
var styles$
|
|
58
|
-
styleInject_es.styleInject(css_248z$
|
|
56
|
+
var css_248z$f = ".TkdrExYnvcY-,\n.TkdrExYnvcY- * {\n box-sizing: border-box;\n}\n\n.TkdrExYnvcY- {\n --data-list--minimum-item-height: calc(var(--base-unit) * 3.5);\n\n display: -ms-flexbox;\n\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/*\n * Header\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.GiD7MjZJbcw- {\n display: -ms-flexbox;\n display: flex;\n}\n\n@media (max-width: 489.98px) {\n\n.GiD7MjZJbcw- {\n -ms-flex-pack: justify;\n justify-content: space-between;\n width: 100%;\n}\n }\n\n@media (--small-screens-and-below) {\n\n.GiD7MjZJbcw- {\n -ms-flex-pack: justify;\n justify-content: space-between;\n width: 100%;\n}\n }\n\n.jMSVGIAr5tk- > p {\n font-weight: 500;\n white-space: nowrap;\n}\n\n.jMSVGIAr5tk- {\n display: -ms-flexbox;\n display: flex;\n margin: calc((16px / 2) * -1) 0;\n margin: calc(calc(16px / 2) * -1) 0;\n margin: calc(var(--space-small) * -1) 0;\n -ms-flex-align: center;\n align-items: center;\n gap: calc(16px / 4);\n gap: var(--space-smaller);\n}\n\n/*\n * List Item\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 transition: all 200ms;\n transition: all var(--timing-base);\n}\n\n.ise8kHCfhCY-,\n.Tq6e0BGwcSM- {\n display: grid;\n grid-template-columns: minmax(0px, auto);\n min-height: var(--data-list--minimum-item-height);\n -ms-flex-align: center;\n align-items: center;\n}\n\n.ise8kHCfhCY-.Pc0JGX6jCD4-,\n.ise8kHCfhCY-:hover,\n.ise8kHCfhCY-:focus-within {\n --data-list-item-active-color: var(--color-surface--background);\n background-color: rgb(244, 244, 244);\n background-color: var(--data-list-item-active-color);\n}\n\n.Tq6e0BGwcSM- {\n margin: calc((16px / 2) * -1) 0;\n margin: calc(calc(16px / 2) * -1) 0;\n margin: calc(var(--space-small) * -1) 0;\n padding: calc(16px / 2) 0;\n padding: var(--space-small) 0;\n border: none;\n text-align: left;\n -webkit-text-decoration: none;\n text-decoration: none;\n background-color: transparent;\n cursor: pointer;\n}\n\n/**\n * Reset CSS properties on focus to ensure we only have the focus state on the\n * parent .listItem\n */\n\n.Tq6e0BGwcSM-:focus {\n outline: none;\n background-color: transparent;\n}\n\n/**\n * Enable a better hover and focus experience when :has() is supported.\n * This is a workaround for Firefox where the :has() selector is not supported.\n */\n\n@supports selector(*:has(*)) {\n .ise8kHCfhCY-:hover,\n .ise8kHCfhCY-:focus-within {\n background-color: transparent;\n }\n\n .ise8kHCfhCY-:has(.Tq6e0BGwcSM-:hover, .Tq6e0BGwcSM-:focus) {\n background-color: var(--data-list-item-active-color);\n }\n}\n\n/*\n * List Item Selection\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 /* To compensate the Checkbox's label margin that we are using for screen-readers */\n margin-right: calc((16px * 1) * -1);\n margin-right: calc(calc(16px * 1) * -1);\n margin-right: calc(var(--space-base) * -1);\n}\n\n.qm-SSuWTXkI-.VA9RnQp6nbI- {\n visibility: visible;\n}\n\n.ise8kHCfhCY- .d-79rkMqufg- > :first-child {\n -ms-flex-order: 2;\n order: 2;\n}\n\n.ise8kHCfhCY- .d-79rkMqufg- > :last-child {\n -ms-flex-order: 1;\n order: 1;\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- > :last-child {\n padding-top: 0;\n opacity: 0;\n}\n }\n\n@media (--medium-screens-and-up) {\n\n.ise8kHCfhCY- .d-79rkMqufg- > :last-child {\n padding-top: 0;\n opacity: 0;\n}\n }\n\n.ise8kHCfhCY-:hover .d-79rkMqufg- > :last-child,\n.ise8kHCfhCY-:focus-within .d-79rkMqufg- > :last-child,\n.ise8kHCfhCY- .d-79rkMqufg-._4L7iXXzLr5k- > :last-child {\n opacity: 1;\n}\n\n/*\n * Filters\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\n/* This hides the text from the UI but not from the screen readers */\n\n.esUiRgWabYw- {\n position: absolute;\n top: auto;\n left: -10000px;\n width: 1px;\n height: 1px;\n overflow: hidden;\n text-indent: -10000px;\n}\n";
|
|
57
|
+
var styles$f = {"wrapper":"TkdrExYnvcY-","titleContainer":"IcAlZHoB4LI-","headerFilters":"TFO76ysivmg-","headerTitles":"jGHZZYZm1ZY-","batchSelectContainer":"GiD7MjZJbcw-","headerBatchSelect":"jMSVGIAr5tk-","listItem":"ise8kHCfhCY-","listItemClickable":"Tq6e0BGwcSM-","active":"Pc0JGX6jCD4-","selectable":"d-79rkMqufg-","selectAllCheckbox":"qm-SSuWTXkI-","visible":"VA9RnQp6nbI-","selected":"_4L7iXXzLr5k-","filtering":"Kkp-IYmwq-s-","filteringSpinner":"m-eCShL7TU4-","srOnly":"esUiRgWabYw-"};
|
|
58
|
+
styleInject_es.styleInject(css_248z$f);
|
|
59
59
|
|
|
60
|
-
var css_248z$
|
|
61
|
-
var styles$
|
|
62
|
-
styleInject_es.styleInject(css_248z$
|
|
60
|
+
var css_248z$e = ".F56prQsXm3A- {\n min-width: 80px;\n margin-left: calc(16px / 2);\n margin-left: var(--space-small);\n}\n";
|
|
61
|
+
var styles$e = {"results":"F56prQsXm3A-"};
|
|
62
|
+
styleInject_es.styleInject(css_248z$e);
|
|
63
63
|
|
|
64
64
|
const DATALIST_TOTALCOUNT_TEST_ID = "ATL-DataList-TotalCount";
|
|
65
65
|
function DataListTotalCount({ totalCount, loading, }) {
|
|
@@ -75,7 +75,7 @@ function DataListTotalCount({ totalCount, loading, }) {
|
|
|
75
75
|
totalCount.toLocaleString(),
|
|
76
76
|
" results)"));
|
|
77
77
|
}
|
|
78
|
-
return (React__default["default"].createElement("div", { className: styles$
|
|
78
|
+
return (React__default["default"].createElement("div", { className: styles$e.results, "data-testid": DATALIST_TOTALCOUNT_TEST_ID }, output));
|
|
79
79
|
}
|
|
80
80
|
|
|
81
81
|
const defaultValues$1 = {
|
|
@@ -167,9 +167,9 @@ function useActiveLayout() {
|
|
|
167
167
|
return { layout, activeBreakpoint };
|
|
168
168
|
}
|
|
169
169
|
|
|
170
|
-
var css_248z$
|
|
171
|
-
var styles$
|
|
172
|
-
styleInject_es.styleInject(css_248z$
|
|
170
|
+
var css_248z$d = "._8cMzUF8XEwY- {\n position: relative;\n}\n\n._8cMzUF8XEwY-::after {\n content: \"\";\n display: block;\n position: absolute;\n right: 0;\n bottom: 0;\n left: 0;\n height: 100px;\n background-image: linear-gradient(\n to top,\n rgba(255, 255, 255, 1) 0%,\n rgba(255, 255, 255, 0) 100%\n );\n background-image: linear-gradient(\n to top,\n var(--color-surface) 0%,\n rgba(var(--color-white--rgb), 0) 100%\n );\n}\n\n.Rh--6fVpkm4- {\n padding: calc(16px * 1) calc(16px / 2);\n padding: var(--space-base) var(--space-small);\n}\n\n.NFaWWvmxtkw- {\n width: 100%;\n min-width: calc(16px * 3);\n min-width: var(--space-largest);\n}\n";
|
|
171
|
+
var styles$d = {"wrapper":"_8cMzUF8XEwY-","loadingItem":"Rh--6fVpkm4-","glimmer":"NFaWWvmxtkw-"};
|
|
172
|
+
styleInject_es.styleInject(css_248z$d);
|
|
173
173
|
|
|
174
174
|
const LOADING_STATE_LIMIT_ITEMS = 10;
|
|
175
175
|
const DATALIST_LOADINGSTATE_ROW_TEST_ID = "ATL-DataList-LoadingState-Row";
|
|
@@ -178,11 +178,11 @@ function DataListLoadingState() {
|
|
|
178
178
|
const { layout, activeBreakpoint } = useActiveLayout();
|
|
179
179
|
if (!layout)
|
|
180
180
|
return null;
|
|
181
|
-
const glimmerSize = activeBreakpoint === "xs" ? "small" : "
|
|
182
|
-
const glimmersFromHeader = Object.keys(headers).reduce((data, key) => (Object.assign(Object.assign({}, data), { [key]: (React__default["default"].createElement("div", { className: styles$
|
|
181
|
+
const glimmerSize = activeBreakpoint === "xs" ? "small" : "large";
|
|
182
|
+
const glimmersFromHeader = Object.keys(headers).reduce((data, key) => (Object.assign(Object.assign({}, data), { [key]: (React__default["default"].createElement("div", { className: styles$d.glimmer },
|
|
183
183
|
React__default["default"].createElement(Glimmer.Glimmer, { size: glimmerSize }))) })), {});
|
|
184
184
|
const loadingData = new Array(LOADING_STATE_LIMIT_ITEMS).fill(glimmersFromHeader);
|
|
185
|
-
return (React__default["default"].createElement("div", { className: styles$
|
|
185
|
+
return (React__default["default"].createElement("div", { className: styles$d.wrapper }, loadingData.map((child, i) => (React__default["default"].createElement("div", { key: i, className: styles$d.loadingItem, "data-testid": DATALIST_LOADINGSTATE_ROW_TEST_ID }, layout(child))))));
|
|
186
186
|
}
|
|
187
187
|
|
|
188
188
|
const defaultValues = {
|
|
@@ -195,32 +195,32 @@ function useDataListLayoutContext() {
|
|
|
195
195
|
return React.useContext(DataListLayoutContext);
|
|
196
196
|
}
|
|
197
197
|
|
|
198
|
-
var css_248z$
|
|
199
|
-
var styles$
|
|
200
|
-
styleInject_es.styleInject(css_248z$
|
|
198
|
+
var css_248z$c = ".jHcHGQ-HDbk- {\n display: -ms-flexbox;\n display: flex;\n position: absolute;\n top: calc((16px / 2) * -1);\n top: calc(calc(16px / 2) * -1);\n top: calc(var(--space-small) * -1);\n right: 0;\n z-index: 6;\n z-index: var(--elevation-menu);\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 padding: calc(16px / 4);\n padding: var(--space-smaller);\n border: calc(16px / 16) solid rgb(225, 225, 225);\n border: var(--border-base) solid var(--color-border);\n border-radius: calc(16px / 2);\n border-radius: var(--radius-larger);\n background-color: rgba(255, 255, 255, 1);\n background-color: var(--color-surface);\n gap: calc(16px / 4);\n gap: var(--space-smaller);\n}\n";
|
|
199
|
+
var styles$c = {"menu":"jHcHGQ-HDbk-"};
|
|
200
|
+
styleInject_es.styleInject(css_248z$c);
|
|
201
201
|
|
|
202
202
|
const CONTAINER_TEST_ID = "ATL-DataListFilters-Container";
|
|
203
203
|
|
|
204
|
-
var css_248z$
|
|
205
|
-
var styles$
|
|
206
|
-
styleInject_es.styleInject(css_248z$
|
|
204
|
+
var css_248z$b = ".jbBRoxlZlNI- {\n --overflow-fade--offset: var(--space-smaller);\n --overflow-fade--negative-offset: calc(var(--overflow-fade--offset) * -1);\n\n -ms-flex-item-align: center;\n\n align-self: center;\n position: relative;\n min-width: 0;\n}\n\n.MnN8qbS4hw4- {\n display: grid;\n margin: var(--overflow-fade--negative-offset);\n padding: var(--overflow-fade--offset);\n overflow-x: auto;\n overflow-y: visible;\n grid-auto-flow: column;\n grid-auto-columns: -webkit-max-content;\n grid-auto-columns: max-content;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.MnN8qbS4hw4- > :not(:nth-last-child(2)):not(.b-5P7Z8eGO8-) {\n margin-right: calc(16px / 2);\n margin-right: var(--space-small);\n}\n\n.b-5P7Z8eGO8- {\n visibility: hidden;\n}\n\n.xzaCS4slLpI-::before,\n.Jf227kC8Nu0-::after {\n content: \"\";\n position: absolute;\n top: 0;\n width: calc(16px * 1.5);\n width: var(--space-large);\n height: 100%;\n background-image: linear-gradient(\n to right,\n rgba(255, 255, 255, 1) 0%,\n rgba(255, 255, 255, 0) 100%\n );\n background-image: linear-gradient(\n var(--data-list-overflow-shadow-angle, to right),\n var(--color-surface) 0%,\n rgba(var(--color-white--rgb), 0) 100%\n );\n pointer-events: none;\n}\n\n.xzaCS4slLpI-::before {\n left: var(--overflow-fade--negative-offset);\n}\n\n.Jf227kC8Nu0-::after {\n --data-list-overflow-shadow-angle: to left;\n right: var(--overflow-fade--negative-offset);\n}\n";
|
|
205
|
+
var styles$b = {"fadeContainer":"jbBRoxlZlNI-","overflowGrid":"MnN8qbS4hw4-","overflowTrigger":"b-5P7Z8eGO8-","overflowLeft":"xzaCS4slLpI-","overflowRight":"Jf227kC8Nu0-"};
|
|
206
|
+
styleInject_es.styleInject(css_248z$b);
|
|
207
207
|
|
|
208
208
|
function DataListOverflowFade({ children }) {
|
|
209
209
|
const [leftRef, isLeftVisible] = useInView.useInView();
|
|
210
210
|
const [rightRef, isRightVisible] = useInView.useInView();
|
|
211
|
-
return (React__default["default"].createElement("div", { "data-testid": CONTAINER_TEST_ID, className: classnames__default["default"](styles$
|
|
212
|
-
[styles$
|
|
213
|
-
[styles$
|
|
211
|
+
return (React__default["default"].createElement("div", { "data-testid": CONTAINER_TEST_ID, className: classnames__default["default"](styles$b.fadeContainer, {
|
|
212
|
+
[styles$b.overflowLeft]: !isLeftVisible,
|
|
213
|
+
[styles$b.overflowRight]: !isRightVisible,
|
|
214
214
|
}) },
|
|
215
|
-
React__default["default"].createElement("div", { className: styles$
|
|
216
|
-
React__default["default"].createElement("span", { ref: leftRef, className: styles$
|
|
215
|
+
React__default["default"].createElement("div", { className: styles$b.overflowGrid },
|
|
216
|
+
React__default["default"].createElement("span", { ref: leftRef, className: styles$b.overflowTrigger }),
|
|
217
217
|
children,
|
|
218
|
-
React__default["default"].createElement("span", { ref: rightRef, className: styles$
|
|
218
|
+
React__default["default"].createElement("span", { ref: rightRef, className: styles$b.overflowTrigger }))));
|
|
219
219
|
}
|
|
220
220
|
|
|
221
|
-
var css_248z$
|
|
222
|
-
var styles$
|
|
223
|
-
styleInject_es.styleInject(css_248z$
|
|
221
|
+
var css_248z$a = ".WRV-UmQmPzo- {\n display: -ms-flexbox;\n display: flex;\n position: relative;\n z-index: 0;\n z-index: var(--elevation-default);\n overflow: hidden;\n gap: calc(16px / 2);\n gap: var(--space-small);\n white-space: nowrap;\n}\n\n.liQeWCMenD0- {\n --overflow-bg: var(--data-list-item-active-color, var(--color-surface));\n\n display: -ms-flexbox;\n\n display: flex;\n position: absolute;\n top: 0;\n right: 0;\n height: 100%;\n padding-left: calc(16px * 1);\n padding-left: var(--space-base);\n background-image: linear-gradient(\n 90deg,\n transparent 0,\n rgba(255, 255, 255, 1) calc(16px * 1),\n rgba(255, 255, 255, 1) 100%\n );\n background-image: linear-gradient(\n 90deg,\n transparent 0,\n var(--overflow-bg) var(--space-base),\n var(--overflow-bg) 100%\n );\n -ms-flex-align: center;\n align-items: center;\n transition: all 200ms;\n transition: all var(--timing-base);\n}\n";
|
|
222
|
+
var styles$a = {"tags":"WRV-UmQmPzo-","tagCount":"liQeWCMenD0-"};
|
|
223
|
+
styleInject_es.styleInject(css_248z$a);
|
|
224
224
|
|
|
225
225
|
function DataListTags({ items }) {
|
|
226
226
|
const ref = React.useRef(null);
|
|
@@ -240,10 +240,10 @@ function DataListTags({ items }) {
|
|
|
240
240
|
elements === null || elements === void 0 ? void 0 : elements.forEach(element => observer.unobserve(element));
|
|
241
241
|
};
|
|
242
242
|
}, [items]);
|
|
243
|
-
return (React__default["default"].createElement("div", { className: styles$
|
|
243
|
+
return (React__default["default"].createElement("div", { className: styles$a.tags, ref: ref },
|
|
244
244
|
items.filter(Boolean).map((tag, index) => (React__default["default"].createElement("div", { key: tag, "data-tag-element": index },
|
|
245
245
|
React__default["default"].createElement(InlineLabel.InlineLabel, null, tag)))),
|
|
246
|
-
Boolean(visibleItems) && (React__default["default"].createElement("div", { className: styles$
|
|
246
|
+
Boolean(visibleItems) && (React__default["default"].createElement("div", { className: styles$a.tagCount },
|
|
247
247
|
React__default["default"].createElement(Text.Text, null,
|
|
248
248
|
"+",
|
|
249
249
|
visibleItems)))));
|
|
@@ -272,22 +272,22 @@ function buildIntersectionThreshold(items) {
|
|
|
272
272
|
return thresholds;
|
|
273
273
|
}
|
|
274
274
|
|
|
275
|
-
var css_248z$
|
|
276
|
-
var styles$
|
|
277
|
-
styleInject_es.styleInject(css_248z$
|
|
275
|
+
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";
|
|
276
|
+
var styles$9 = {"headerLabel":"fLmJZJJqMcE-","sortable":"UG8cHUT3Hds-"};
|
|
277
|
+
styleInject_es.styleInject(css_248z$9);
|
|
278
278
|
|
|
279
|
-
var css_248z$
|
|
280
|
-
var styles$
|
|
281
|
-
styleInject_es.styleInject(css_248z$
|
|
279
|
+
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";
|
|
280
|
+
var styles$8 = {"sortIcon":"AN5egORYy-0-","active":"F1uTDCK0Sb0-","inactive":"_6KYeQXWXLQ8-"};
|
|
281
|
+
styleInject_es.styleInject(css_248z$8);
|
|
282
282
|
|
|
283
283
|
const SORTING_ICON_TEST_ID = "ATL-DataList-Sorting-Icon";
|
|
284
284
|
function DataListSortingArrows({ order }) {
|
|
285
|
-
return (React__default["default"].createElement("div", { className: styles$
|
|
285
|
+
return (React__default["default"].createElement("div", { className: styles$8.sortIcon, "data-testid": SORTING_ICON_TEST_ID },
|
|
286
286
|
React__default["default"].createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
|
|
287
287
|
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" }),
|
|
288
288
|
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" }))));
|
|
289
289
|
function getActiveClassName(targetOrder) {
|
|
290
|
-
return order === targetOrder ? styles$
|
|
290
|
+
return order === targetOrder ? styles$8.active : styles$8.inactive;
|
|
291
291
|
}
|
|
292
292
|
}
|
|
293
293
|
|
|
@@ -296,8 +296,8 @@ function DataListHeaderTile({ headers, headerKey, }) {
|
|
|
296
296
|
const isSortable = sorting === null || sorting === void 0 ? void 0 : sorting.sortable.includes(headerKey);
|
|
297
297
|
const sortingState = sorting === null || sorting === void 0 ? void 0 : sorting.state;
|
|
298
298
|
const Tag = isSortable ? "button" : "div";
|
|
299
|
-
return (React__default["default"].createElement(Tag, { className: classnames__default["default"](styles$
|
|
300
|
-
[styles$
|
|
299
|
+
return (React__default["default"].createElement(Tag, { className: classnames__default["default"](styles$9.headerLabel, {
|
|
300
|
+
[styles$9.sortable]: isSortable,
|
|
301
301
|
}), onClick: handleOnClick },
|
|
302
302
|
React__default["default"].createElement(Text.Text, { maxLines: "single" }, headers[headerKey]),
|
|
303
303
|
(sortingState === null || sortingState === void 0 ? void 0 : sortingState.key) === headerKey && (React__default["default"].createElement(DataListSortingArrows, { order: sortingState.order }))));
|
|
@@ -393,9 +393,9 @@ function useDataListLayoutActionsContext() {
|
|
|
393
393
|
return React.useContext(DataListLayoutActionsContext);
|
|
394
394
|
}
|
|
395
395
|
|
|
396
|
-
var css_248z$
|
|
397
|
-
var styles$
|
|
398
|
-
styleInject_es.styleInject(css_248z$
|
|
396
|
+
var css_248z$7 = ".aokwZU8jbWU- {\n position: fixed;\n top: 0;\n top: var(--actions-menu-y, 0);\n left: 0;\n left: var(--actions-menu-x, 0);\n z-index: 6;\n z-index: var(--elevation-menu);\n min-width: 150px;\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 padding: calc(16px / 4);\n padding: var(--space-smaller);\n border: calc(16px / 16) solid rgb(225, 225, 225);\n border: var(--border-base) solid var(--color-border);\n border-radius: calc(16px / 2);\n border-radius: var(--radius-larger);\n background-color: rgba(255, 255, 255, 1);\n background-color: var(--color-surface);\n}\n\n.XtVRP97TVSE- {\n position: fixed;\n top: 0;\n left: 0;\n z-index: calc(6 - 1);\n z-index: calc(var(--elevation-menu) - 1);\n width: 100%;\n height: 100%;\n padding: 0;\n border: none;\n background-color: transparent;\n}\n";
|
|
397
|
+
var styles$7 = {"menu":"aokwZU8jbWU-","overlay":"XtVRP97TVSE-"};
|
|
398
|
+
styleInject_es.styleInject(css_248z$7);
|
|
399
399
|
|
|
400
400
|
const variants$1 = {
|
|
401
401
|
hidden: { opacity: 0, y: -10 },
|
|
@@ -407,8 +407,8 @@ function DataListActionsMenu({ visible = false, position, onRequestClose, childr
|
|
|
407
407
|
const focusTrapRef = useFocusTrap.useFocusTrap(visible);
|
|
408
408
|
useOnKeyDown.useOnKeyDown(onRequestClose, "Escape");
|
|
409
409
|
return ReactDOM.createPortal(React__default["default"].createElement(framerMotion.AnimatePresence, null, visible && (React__default["default"].createElement("div", { ref: focusTrapRef, onClick: handleClick },
|
|
410
|
-
React__default["default"].createElement(framerMotion.motion.div, { role: "menu", ref: setRef, variants: variants$1, initial: "hidden", animate: "visible", exit: "hidden", transition: { duration: TRANSITION_DELAY_IN_SECONDS }, className: styles$
|
|
411
|
-
React__default["default"].createElement("button", { className: styles$
|
|
410
|
+
React__default["default"].createElement(framerMotion.motion.div, { role: "menu", ref: setRef, variants: variants$1, initial: "hidden", animate: "visible", exit: "hidden", transition: { duration: TRANSITION_DELAY_IN_SECONDS }, className: styles$7.menu, style: getPositionCssVars(), onClick: onRequestClose }, children),
|
|
411
|
+
React__default["default"].createElement("button", { className: styles$7.overlay, onClick: onRequestClose, "aria-label": "Close menu" })))), document.body);
|
|
412
412
|
function handleClick(event) {
|
|
413
413
|
// Prevent menu from firing the parent's onClick event when it is nested
|
|
414
414
|
// within a clickable list item
|
|
@@ -502,7 +502,7 @@ function InternalDataListItemActions() {
|
|
|
502
502
|
return (React__default["default"].createElement(framerMotion.motion.div, { variants: variants, initial: "hidden", animate: "visible", exit: "hidden", transition: {
|
|
503
503
|
duration: TRANSITION_DURATION_IN_SECONDS,
|
|
504
504
|
delay: TRANSITION_DELAY_IN_SECONDS,
|
|
505
|
-
}, className: styles$
|
|
505
|
+
}, className: styles$c.menu, onContextMenu: handleContextMenu },
|
|
506
506
|
React__default["default"].createElement(DataListActions, null, children)));
|
|
507
507
|
}
|
|
508
508
|
function handleContextMenu(event) {
|
|
@@ -512,8 +512,8 @@ function handleContextMenu(event) {
|
|
|
512
512
|
function DataListItemInternal({ children, item, }) {
|
|
513
513
|
const { selected, onSelect } = useDataListContext();
|
|
514
514
|
if (selected !== undefined && onSelect) {
|
|
515
|
-
return (React__default["default"].createElement("div", { className: classnames__default["default"](styles$
|
|
516
|
-
[styles$
|
|
515
|
+
return (React__default["default"].createElement("div", { className: classnames__default["default"](styles$f.selectable, {
|
|
516
|
+
[styles$f.selected]: selected === null || selected === void 0 ? void 0 : selected.length,
|
|
517
517
|
}) },
|
|
518
518
|
children,
|
|
519
519
|
React__default["default"].createElement(Checkbox.Checkbox, { checked: selected === null || selected === void 0 ? void 0 : selected.includes(item.id), onChange: handleChange })));
|
|
@@ -535,17 +535,17 @@ function DataListItemClickableInternal({ onClick, url, to, children, }) {
|
|
|
535
535
|
return React__default["default"].createElement(React__default["default"].Fragment, null, children);
|
|
536
536
|
if (to) {
|
|
537
537
|
const computedTo = typeof to === "string" ? to : to(activeItem);
|
|
538
|
-
return (React__default["default"].createElement(reactRouterDom.Link, { className: styles$
|
|
538
|
+
return (React__default["default"].createElement(reactRouterDom.Link, { className: styles$f.listItemClickable, to: computedTo, onClick: handleClick }, children));
|
|
539
539
|
}
|
|
540
540
|
if (url) {
|
|
541
541
|
const href = typeof url === "string" ? url : url(activeItem);
|
|
542
|
-
return (React__default["default"].createElement("a", { className: styles$
|
|
542
|
+
return (React__default["default"].createElement("a", { className: styles$f.listItemClickable, href: href, onClick: handleClick }, children));
|
|
543
543
|
}
|
|
544
544
|
if (onClick) {
|
|
545
545
|
return (
|
|
546
546
|
// A button can be nested within the list item. To prevent a button inside
|
|
547
547
|
// button error, we need to manually declare a div to be a button
|
|
548
|
-
React__default["default"].createElement("div", { role: "button", tabIndex: 0, className: styles$
|
|
548
|
+
React__default["default"].createElement("div", { role: "button", tabIndex: 0, className: styles$f.listItemClickable, onClick: handleClick, onKeyDown: e => {
|
|
549
549
|
if (e.key === "Enter" || e.key === " ") {
|
|
550
550
|
e.preventDefault();
|
|
551
551
|
handleClick();
|
|
@@ -577,8 +577,8 @@ function DataListItem({ item, layout, }) {
|
|
|
577
577
|
const isContextMenuVisible = Boolean(contextPosition);
|
|
578
578
|
const shouldShowContextMenu = showMenu && isContextMenuVisible && Boolean(contextMenuActions);
|
|
579
579
|
return (React__default["default"].createElement(DataListLayoutActionsContext.Provider, { value: { activeItem: item } },
|
|
580
|
-
React__default["default"].createElement("div", { onMouseEnter: handleShowMenu, onMouseLeave: handleHideMenu, onFocus: handleShowMenu, onBlur: handleHideMenu, onContextMenu: handleContextMenu, className: classnames__default["default"](styles$
|
|
581
|
-
[styles$
|
|
580
|
+
React__default["default"].createElement("div", { onMouseEnter: handleShowMenu, onMouseLeave: handleHideMenu, onFocus: handleShowMenu, onBlur: handleHideMenu, onContextMenu: handleContextMenu, className: classnames__default["default"](styles$f.listItem, {
|
|
581
|
+
[styles$f.active]: showMenu && isContextMenuVisible,
|
|
582
582
|
}), key: item.id },
|
|
583
583
|
React__default["default"].createElement(DataListItemInternal, { item: item },
|
|
584
584
|
React__default["default"].createElement(DataListItemClickable, null, layout(generatedItem))),
|
|
@@ -633,6 +633,10 @@ function DataListLayout({ children, size = "xs", }) {
|
|
|
633
633
|
return null;
|
|
634
634
|
}
|
|
635
635
|
|
|
636
|
+
var css_248z$6 = ".v-GrdlFpBLk- {\n /* Offset the button's padding so the height of the header bar doesn't change */\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";
|
|
637
|
+
var styles$6 = {"bulkActions":"v-GrdlFpBLk-"};
|
|
638
|
+
styleInject_es.styleInject(css_248z$6);
|
|
639
|
+
|
|
636
640
|
// This component is meant to capture the props of the DataList.BulkActions
|
|
637
641
|
function DataListBulkActions(
|
|
638
642
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
@@ -647,7 +651,8 @@ function InternalDataListBulkActions() {
|
|
|
647
651
|
const { sm } = useResponsiveSizing();
|
|
648
652
|
// Collapse all actions under "More actions" when breakpoint is smaller than sm
|
|
649
653
|
const itemsToExpose = sm ? 3 : 0;
|
|
650
|
-
return (React__default["default"].createElement(
|
|
654
|
+
return (React__default["default"].createElement("div", { className: styles$6.bulkActions },
|
|
655
|
+
React__default["default"].createElement(DataListActions, { itemsToExpose: itemsToExpose }, children)));
|
|
651
656
|
}
|
|
652
657
|
|
|
653
658
|
function DataListHeaderCheckbox({ children }) {
|
|
@@ -658,14 +663,14 @@ function DataListHeaderCheckbox({ children }) {
|
|
|
658
663
|
// Show "Deselect All" if breakpoint is sm or higher
|
|
659
664
|
const deselectText = sm ? "Deselect All" : "Deselect";
|
|
660
665
|
const selectedLabel = selected.length ? `${selected.length} selected` : "";
|
|
661
|
-
return (React__default["default"].createElement("div", { className: classnames__default["default"](styles$
|
|
662
|
-
React__default["default"].createElement("div", { className: classnames__default["default"](styles$
|
|
663
|
-
[styles$
|
|
666
|
+
return (React__default["default"].createElement("div", { className: classnames__default["default"](styles$f.selectable) },
|
|
667
|
+
React__default["default"].createElement("div", { className: classnames__default["default"](styles$f.selectAllCheckbox, {
|
|
668
|
+
[styles$f.visible]: Boolean(onSelectAll),
|
|
664
669
|
}) },
|
|
665
670
|
React__default["default"].createElement(Checkbox.Checkbox, { checked: isAllSelected(), indeterminate: selected.length > 0 && !isAllSelected(), onChange: onSelectAll },
|
|
666
|
-
React__default["default"].createElement("div", { className: styles$
|
|
667
|
-
React__default["default"].createElement(AnimatedSwitcher.AnimatedSwitcher, { switched: Boolean(selected.length), initialChild: children, switchTo: React__default["default"].createElement("div", { className: styles$
|
|
668
|
-
React__default["default"].createElement("div", { className: styles$
|
|
671
|
+
React__default["default"].createElement("div", { className: styles$f.srOnly }, selectedLabel))),
|
|
672
|
+
React__default["default"].createElement(AnimatedSwitcher.AnimatedSwitcher, { switched: Boolean(selected.length), initialChild: children, switchTo: React__default["default"].createElement("div", { className: styles$f.batchSelectContainer },
|
|
673
|
+
React__default["default"].createElement("div", { className: styles$f.headerBatchSelect },
|
|
669
674
|
React__default["default"].createElement(Text.Text, null,
|
|
670
675
|
selected.length,
|
|
671
676
|
" selected"),
|
|
@@ -697,7 +702,7 @@ function DataListHeader() {
|
|
|
697
702
|
const headerData = generateHeaderElements(headers);
|
|
698
703
|
if (!headerData)
|
|
699
704
|
return null;
|
|
700
|
-
return (React__default["default"].createElement("div", { className: styles$
|
|
705
|
+
return (React__default["default"].createElement("div", { className: styles$f.headerTitles },
|
|
701
706
|
React__default["default"].createElement(DataListHeaderCheckbox, null, layout(headerData))));
|
|
702
707
|
function getVisibleSize() {
|
|
703
708
|
const visibilityKeys = Object.keys(headerVisibility);
|
|
@@ -1040,13 +1045,13 @@ function InternalDataList() {
|
|
|
1040
1045
|
const initialLoading = loadingState === "initial";
|
|
1041
1046
|
const showEmptyState = !initialLoading && data.length === 0;
|
|
1042
1047
|
const shouldRenderLoadMoreTrigger = !initialLoading && !showEmptyState;
|
|
1043
|
-
return (React__default["default"].createElement("div", { className: styles$
|
|
1044
|
-
React__default["default"].createElement("div", { className: styles$
|
|
1048
|
+
return (React__default["default"].createElement("div", { className: styles$f.wrapper },
|
|
1049
|
+
React__default["default"].createElement("div", { className: styles$f.titleContainer },
|
|
1045
1050
|
title && React__default["default"].createElement(Heading.Heading, { level: 3 }, title),
|
|
1046
1051
|
React__default["default"].createElement(DataListTotalCount, { totalCount: totalCount, loading: initialLoading })),
|
|
1047
1052
|
React__default["default"].createElement("div", { ref: backToTopRef }),
|
|
1048
1053
|
React__default["default"].createElement(DataListStickyHeader, null,
|
|
1049
|
-
React__default["default"].createElement("div", { className: styles$
|
|
1054
|
+
React__default["default"].createElement("div", { className: styles$f.headerFilters },
|
|
1050
1055
|
React__default["default"].createElement(InternalDataListFilters, null),
|
|
1051
1056
|
React__default["default"].createElement(InternalDataListSearch, null)),
|
|
1052
1057
|
React__default["default"].createElement(InternalDataListStatusBar, null),
|
|
@@ -1054,8 +1059,8 @@ function InternalDataList() {
|
|
|
1054
1059
|
initialLoading && React__default["default"].createElement(DataListLoadingState, null),
|
|
1055
1060
|
showEmptyState && React__default["default"].createElement(InternalDataListEmptyState, null),
|
|
1056
1061
|
layoutComponents,
|
|
1057
|
-
loadingState === "filtering" && (React__default["default"].createElement("div", { "data-testid": DATA_LIST_FILTERING_SPINNER_TEST_ID, className: styles$
|
|
1058
|
-
React__default["default"].createElement("div", { className: styles$
|
|
1062
|
+
loadingState === "filtering" && (React__default["default"].createElement("div", { "data-testid": DATA_LIST_FILTERING_SPINNER_TEST_ID, className: styles$f.filtering },
|
|
1063
|
+
React__default["default"].createElement("div", { className: styles$f.filteringSpinner },
|
|
1059
1064
|
React__default["default"].createElement(Spinner.Spinner, { size: "small" })))),
|
|
1060
1065
|
shouldRenderLoadMoreTrigger && (React__default["default"].createElement(DataListLoadMore, { onBackToTop: handleBackToTop }))));
|
|
1061
1066
|
function handleBackToTop() {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@jobber/components",
|
|
3
|
-
"version": "4.55.
|
|
3
|
+
"version": "4.55.3",
|
|
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": "5355058cff5745ab107bf2791c1f4d272c943c60"
|
|
88
88
|
}
|