@jobber/components 4.69.2 → 4.69.3-JOB-84091.16
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Autocomplete/index.js +2 -2
- package/dist/Banner/index.js +11 -11
- package/dist/Button/Button.d.ts +3 -2
- package/dist/Card/index.js +2 -2
- package/dist/{Card-644dd256.js → Card-426a68a8.js} +2 -2
- package/dist/DataDump/index.js +2 -2
- package/dist/DataList/DataList.types.d.ts +8 -1
- package/dist/DataList/components/DataListHeaderTile/DataListHeaderTile.d.ts +2 -1
- package/dist/DataList/components/DataListHeaderTile/components/DataListSortingOptions.d.ts +12 -0
- package/dist/DataList/components/DataListHeaderTile/components/index.d.ts +1 -0
- package/dist/DataList/index.js +145 -83
- package/dist/DataTable/index.js +6 -5
- package/dist/FormField/FormFieldTypes.d.ts +1 -0
- package/dist/FormField/index.js +1 -1
- package/dist/{FormField-a332b2a6.js → FormField-b0e74d32.js} +2 -2
- package/dist/FormatFile/index.js +1 -1
- package/dist/{FormatFile-aae6c6e2.js → FormatFile-cc949eaf.js} +43 -2
- package/dist/Gallery/index.js +1 -1
- package/dist/InputAvatar/index.js +5 -2
- package/dist/InputDate/index.js +1 -1
- package/dist/InputEmail/index.js +1 -1
- package/dist/InputFile/InputFile.d.ts +12 -2
- package/dist/InputFile/index.js +7 -4
- package/dist/{InputFile-65bfbd78.js → InputFile-8767b7fd.js} +39 -13
- package/dist/InputNumber/index.js +2 -2
- package/dist/{InputNumber-3f5d3f8d.js → InputNumber-79da1cdc.js} +1 -1
- package/dist/InputPassword/index.js +1 -1
- package/dist/InputPhoneNumber/index.js +1 -1
- package/dist/InputText/index.js +2 -2
- package/dist/{InputText-e2d4ac19.js → InputText-9e61365c.js} +1 -1
- package/dist/InputTime/hooks/useTimePredict.d.ts +8 -0
- package/dist/InputTime/index.js +160 -5
- package/dist/Menu/index.js +1 -1
- package/dist/{Menu-da5d8217.js → Menu-81b12936.js} +1 -1
- package/dist/{Option-e5274cd8.js → Option-b715f6b4.js} +1 -1
- package/dist/Page/index.js +1 -1
- package/dist/RecurringSelect/index.js +3 -3
- package/dist/Select/index.js +2 -2
- package/dist/Toast/index.js +1 -1
- package/dist/utils/getClientBrowser.d.ts +7 -0
- package/package.json +3 -3
package/dist/DataList/index.js
CHANGED
|
@@ -16,20 +16,20 @@ var Button = require('../Button-b73a5e01.js');
|
|
|
16
16
|
var useInView = require('@jobber/hooks/useInView');
|
|
17
17
|
var isEmpty = require('lodash/isEmpty');
|
|
18
18
|
var InlineLabel = require('../InlineLabel-a6557829.js');
|
|
19
|
-
var FormatDate = require('../FormatDate-70ea5b43.js');
|
|
20
|
-
var Heading = require('../Heading-1e8e4bd3.js');
|
|
21
19
|
var useFocusTrap = require('@jobber/hooks/useFocusTrap');
|
|
22
20
|
var useRefocusOnActivator = require('@jobber/hooks/useRefocusOnActivator');
|
|
23
21
|
var useOnKeyDown = require('@jobber/hooks/useOnKeyDown');
|
|
22
|
+
var Icon = require('../Icon-405a216c.js');
|
|
23
|
+
var FormatDate = require('../FormatDate-70ea5b43.js');
|
|
24
|
+
var Heading = require('../Heading-1e8e4bd3.js');
|
|
24
25
|
var ReactDOM = require('react-dom');
|
|
25
26
|
var Checkbox = require('../Checkbox-1cdd5cf6.js');
|
|
26
27
|
var reactRouterDom = require('react-router-dom');
|
|
27
28
|
var AnimatedSwitcher = require('../AnimatedSwitcher-d1e1ddcf.js');
|
|
28
29
|
var Combobox = require('../Combobox-95b3c413.js');
|
|
29
30
|
var Chip = require('../Chip-c91fd6c8.js');
|
|
30
|
-
var Icon = require('../Icon-405a216c.js');
|
|
31
31
|
var debounce = require('lodash/debounce');
|
|
32
|
-
var InputText = require('../InputText-
|
|
32
|
+
var InputText = require('../InputText-9e61365c.js');
|
|
33
33
|
var Spinner = require('../Spinner-9d8fc7ff.js');
|
|
34
34
|
var Typography = require('../Typography-c45bf216.js');
|
|
35
35
|
require('../Content-2ca1ffe1.js');
|
|
@@ -40,7 +40,7 @@ require('react-hook-form');
|
|
|
40
40
|
require('@jobber/hooks/useAssert');
|
|
41
41
|
require('../Avatar-76a799fa.js');
|
|
42
42
|
require('color');
|
|
43
|
-
require('../FormField-
|
|
43
|
+
require('../FormField-b0e74d32.js');
|
|
44
44
|
require('@jobber/hooks/useShowClear');
|
|
45
45
|
require('../InputValidation-a7a737f9.js');
|
|
46
46
|
|
|
@@ -52,13 +52,13 @@ var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
|
|
|
52
52
|
var isEmpty__default = /*#__PURE__*/_interopDefaultLegacy(isEmpty);
|
|
53
53
|
var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
|
|
54
54
|
|
|
55
|
-
var css_248z$
|
|
56
|
-
var styles$
|
|
57
|
-
styleInject_es.styleInject(css_248z$
|
|
55
|
+
var css_248z$g = ".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) + (16px / 4)) 0;\n padding: calc(calc(16px / 2) + calc(16px / 4)) 0;\n padding: calc(var(--space-small) + var(--space-smaller)) 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 fit-content(calc(16px * 14));\n grid-template-columns: auto fit-content(calc(var(--base-unit) * 14));\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(217, 223, 225);\n border-bottom: var(--border-thick) solid var(--color-border);\n}\n\n.GiD7MjZJbcw- {\n --data-list--header-actions-gap: var(--space-small);\n display: -ms-flexbox;\n display: flex;\n gap: calc(16px / 2);\n gap: var(--data-list--header-actions-gap);\n}\n\n@media (max-width: 489px) {\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: var(--data-list--header-actions-gap);\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(217, 223, 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--hover);\n background-color: rgb(244, 246, 250);\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";
|
|
56
|
+
var styles$g = {"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-"};
|
|
57
|
+
styleInject_es.styleInject(css_248z$g);
|
|
58
58
|
|
|
59
|
-
var css_248z$
|
|
60
|
-
var styles$
|
|
61
|
-
styleInject_es.styleInject(css_248z$
|
|
59
|
+
var css_248z$f = ".F56prQsXm3A- {\n min-width: 80px;\n margin-left: calc(16px / 2);\n margin-left: var(--space-small);\n}\n";
|
|
60
|
+
var styles$f = {"results":"F56prQsXm3A-"};
|
|
61
|
+
styleInject_es.styleInject(css_248z$f);
|
|
62
62
|
|
|
63
63
|
const DATALIST_TOTALCOUNT_TEST_ID = "ATL-DataList-TotalCount";
|
|
64
64
|
function DataListTotalCount({ totalCount, loading, }) {
|
|
@@ -74,7 +74,7 @@ function DataListTotalCount({ totalCount, loading, }) {
|
|
|
74
74
|
totalCount.toLocaleString(),
|
|
75
75
|
" results)"));
|
|
76
76
|
}
|
|
77
|
-
return (React__default["default"].createElement("div", { className: styles$
|
|
77
|
+
return (React__default["default"].createElement("div", { className: styles$f.results, "data-testid": DATALIST_TOTALCOUNT_TEST_ID }, output));
|
|
78
78
|
}
|
|
79
79
|
|
|
80
80
|
const defaultValues$1 = {
|
|
@@ -169,9 +169,9 @@ function useActiveLayout() {
|
|
|
169
169
|
return { layout, activeBreakpoint };
|
|
170
170
|
}
|
|
171
171
|
|
|
172
|
-
var css_248z$
|
|
173
|
-
var styles$
|
|
174
|
-
styleInject_es.styleInject(css_248z$
|
|
172
|
+
var css_248z$e = "._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";
|
|
173
|
+
var styles$e = {"wrapper":"_8cMzUF8XEwY-","loadingItem":"Rh--6fVpkm4-","glimmer":"NFaWWvmxtkw-"};
|
|
174
|
+
styleInject_es.styleInject(css_248z$e);
|
|
175
175
|
|
|
176
176
|
const LOADING_STATE_LIMIT_ITEMS = 10;
|
|
177
177
|
const DATALIST_LOADINGSTATE_ROW_TEST_ID = "ATL-DataList-LoadingState-Row";
|
|
@@ -181,10 +181,10 @@ function DataListLoadingState() {
|
|
|
181
181
|
if (!layout)
|
|
182
182
|
return null;
|
|
183
183
|
const glimmerSize = activeBreakpoint === "xs" ? "small" : "large";
|
|
184
|
-
const glimmersFromHeader = Object.keys(headers).reduce((data, key) => (Object.assign(Object.assign({}, data), { [key]: (React__default["default"].createElement("div", { className: styles$
|
|
184
|
+
const glimmersFromHeader = Object.keys(headers).reduce((data, key) => (Object.assign(Object.assign({}, data), { [key]: (React__default["default"].createElement("div", { className: styles$e.glimmer },
|
|
185
185
|
React__default["default"].createElement(Glimmer.Glimmer, { size: glimmerSize }))) })), {});
|
|
186
186
|
const loadingData = new Array(LOADING_STATE_LIMIT_ITEMS).fill(glimmersFromHeader);
|
|
187
|
-
return (React__default["default"].createElement("div", { className: styles$
|
|
187
|
+
return (React__default["default"].createElement("div", { className: styles$e.wrapper }, loadingData.map((child, i) => (React__default["default"].createElement("div", { key: i, className: styles$e.loadingItem, "data-testid": DATALIST_LOADINGSTATE_ROW_TEST_ID }, layout(child))))));
|
|
188
188
|
}
|
|
189
189
|
|
|
190
190
|
const defaultValues = {
|
|
@@ -197,32 +197,32 @@ function useDataListLayoutContext() {
|
|
|
197
197
|
return React.useContext(DataListLayoutContext);
|
|
198
198
|
}
|
|
199
199
|
|
|
200
|
-
var css_248z$
|
|
201
|
-
var styles$
|
|
202
|
-
styleInject_es.styleInject(css_248z$
|
|
200
|
+
var css_248z$d = ".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(217, 223, 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\n.jobber-retheme .jHcHGQ-HDbk- {\n border-radius: calc(16px / 8);\n border-radius: var(--radius-base);\n}\n";
|
|
201
|
+
var styles$d = {"menu":"jHcHGQ-HDbk-"};
|
|
202
|
+
styleInject_es.styleInject(css_248z$d);
|
|
203
203
|
|
|
204
204
|
const CONTAINER_TEST_ID = "ATL-DataListFilters-Container";
|
|
205
205
|
|
|
206
|
-
var css_248z$
|
|
207
|
-
var styles$
|
|
208
|
-
styleInject_es.styleInject(css_248z$
|
|
206
|
+
var css_248z$c = ".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.P6uJ-vHfKrM-,\n.MnN8qbS4hw4- {\n display: grid;\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.P6uJ-vHfKrM- {\n gap: calc(16px / 2);\n gap: var(--space-small);\n}\n\n.MnN8qbS4hw4- {\n margin: var(--overflow-fade--negative-offset);\n padding: var(--overflow-fade--offset);\n overflow-x: auto;\n overflow-y: visible;\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";
|
|
207
|
+
var styles$c = {"fadeContainer":"jbBRoxlZlNI-","overflowItems":"P6uJ-vHfKrM-","overflowGrid":"MnN8qbS4hw4-","overflowTrigger":"b-5P7Z8eGO8-","overflowLeft":"xzaCS4slLpI-","overflowRight":"Jf227kC8Nu0-"};
|
|
208
|
+
styleInject_es.styleInject(css_248z$c);
|
|
209
209
|
|
|
210
210
|
function DataListOverflowFade({ children }) {
|
|
211
211
|
const [leftRef, isLeftVisible] = useInView.useInView();
|
|
212
212
|
const [rightRef, isRightVisible] = useInView.useInView();
|
|
213
|
-
return (React__default["default"].createElement("div", { "data-testid": CONTAINER_TEST_ID, className: classnames__default["default"](styles$
|
|
214
|
-
[styles$
|
|
215
|
-
[styles$
|
|
213
|
+
return (React__default["default"].createElement("div", { "data-testid": CONTAINER_TEST_ID, className: classnames__default["default"](styles$c.fadeContainer, {
|
|
214
|
+
[styles$c.overflowLeft]: !isLeftVisible,
|
|
215
|
+
[styles$c.overflowRight]: !isRightVisible,
|
|
216
216
|
}) },
|
|
217
|
-
React__default["default"].createElement("div", { className: styles$
|
|
218
|
-
React__default["default"].createElement("span", { ref: leftRef, className: styles$
|
|
219
|
-
React__default["default"].createElement("div", { className: styles$
|
|
220
|
-
React__default["default"].createElement("span", { ref: rightRef, className: styles$
|
|
217
|
+
React__default["default"].createElement("div", { className: styles$c.overflowGrid },
|
|
218
|
+
React__default["default"].createElement("span", { ref: leftRef, className: styles$c.overflowTrigger }),
|
|
219
|
+
React__default["default"].createElement("div", { className: styles$c.overflowItems }, children),
|
|
220
|
+
React__default["default"].createElement("span", { ref: rightRef, className: styles$c.overflowTrigger }))));
|
|
221
221
|
}
|
|
222
222
|
|
|
223
|
-
var css_248z$
|
|
224
|
-
var styles$
|
|
225
|
-
styleInject_es.styleInject(css_248z$
|
|
223
|
+
var css_248z$b = "._8MYxAQYdZzM- {\n position: relative;\n}\n\n.WRV-UmQmPzo- {\n --inline-label-height: calc(\n var(--typography--fontSize-small) * 1.5 + calc(var(--space-smaller) * 1.25) *\n 2\n );\n\n display: -ms-flexbox;\n\n display: flex;\n z-index: 0;\n z-index: var(--elevation-default);\n max-height: calc((\n ((16px * 1) * 0.75) * 1.5 + ((16px / 4) * 1.25) *\n 2\n ) * 2);\n max-height: calc(calc(\n calc(calc(16px * 1) * 0.75) * 1.5 + calc(calc(16px / 4) * 1.25) *\n 2\n ) * 2);\n max-height: calc(var(--inline-label-height) * 2);\n overflow: hidden;\n white-space: nowrap;\n -ms-flex-wrap: wrap;\n flex-wrap: wrap;\n gap: calc(16px / 4);\n gap: var(--space-smaller);\n}\n\n.ND-cN-mX5-c- {\n -webkit-mask-image: linear-gradient(\n to left,\n transparent,\n transparent calc(16px * 1.5),\n rgba(0, 0, 0, 1) calc(16px * 3),\n rgba(0, 0, 0, 1)\n );\n -webkit-mask-image: linear-gradient(\n to left,\n transparent,\n transparent var(--space-large),\n rgba(0, 0, 0, 1) var(--space-largest),\n rgba(0, 0, 0, 1)\n );\n mask-image: linear-gradient(\n to left,\n transparent,\n transparent calc(16px * 1.5),\n rgba(0, 0, 0, 1) calc(16px * 3),\n rgba(0, 0, 0, 1)\n );\n mask-image: linear-gradient(\n to left,\n transparent,\n transparent var(--space-large),\n rgba(0, 0, 0, 1) var(--space-largest),\n rgba(0, 0, 0, 1)\n );\n}\n\n.liQeWCMenD0- {\n display: -ms-flexbox;\n display: flex;\n position: absolute;\n top: 0;\n right: 0;\n height: 100%;\n -ms-flex-align: center;\n align-items: center;\n}\n";
|
|
224
|
+
var styles$b = {"tagWrapper":"_8MYxAQYdZzM-","tags":"WRV-UmQmPzo-","tagsMask":"ND-cN-mX5-c-","tagCount":"liQeWCMenD0-"};
|
|
225
|
+
styleInject_es.styleInject(css_248z$b);
|
|
226
226
|
|
|
227
227
|
function DataListTags({ items }) {
|
|
228
228
|
const ref = React.useRef(null);
|
|
@@ -244,12 +244,12 @@ function DataListTags({ items }) {
|
|
|
244
244
|
elements === null || elements === void 0 ? void 0 : elements.forEach(element => observer.unobserve(element));
|
|
245
245
|
};
|
|
246
246
|
}, [items]);
|
|
247
|
-
return (React__default["default"].createElement("div", { className: styles$
|
|
248
|
-
React__default["default"].createElement("div", { className: classnames__default["default"](styles$
|
|
249
|
-
[styles$
|
|
247
|
+
return (React__default["default"].createElement("div", { className: styles$b.tagWrapper, ref: ref },
|
|
248
|
+
React__default["default"].createElement("div", { className: classnames__default["default"](styles$b.tags, {
|
|
249
|
+
[styles$b.tagsMask]: shouldShowTagCount,
|
|
250
250
|
}) }, items.filter(Boolean).map((tag, index) => (React__default["default"].createElement("div", { key: tag, "data-tag-element": index },
|
|
251
251
|
React__default["default"].createElement(InlineLabel.InlineLabel, null, tag))))),
|
|
252
|
-
shouldShowTagCount && (React__default["default"].createElement("div", { className: styles$
|
|
252
|
+
shouldShowTagCount && (React__default["default"].createElement("div", { className: styles$b.tagCount },
|
|
253
253
|
React__default["default"].createElement(Text.Text, null,
|
|
254
254
|
"+",
|
|
255
255
|
visibleItems)))));
|
|
@@ -278,50 +278,107 @@ function buildIntersectionThreshold(items) {
|
|
|
278
278
|
return thresholds;
|
|
279
279
|
}
|
|
280
280
|
|
|
281
|
-
var css_248z$
|
|
282
|
-
var styles$
|
|
283
|
-
styleInject_es.styleInject(css_248z$
|
|
281
|
+
var css_248z$a = ".fLmJZJJqMcE- {\n display: -ms-flexbox;\n display: flex;\n position: relative;\n -ms-flex-align: center;\n align-items: center;\n padding: 0;\n border: none;\n background-color: transparent;\n}\n\n.fLmJZJJqMcE-:focus,\n.fLmJZJJqMcE-:focus-visible {\n outline: none;\n}\n\n.fLmJZJJqMcE-:focus-visible {\n box-shadow: 0px 0px 0px calc(16px / 8) rgba(255, 255, 255, 1),\n 0px 0px 0px calc(16px / 4) rgb(147, 161, 169);\n box-shadow: var(--shadow-focus);\n}\n\n.UG8cHUT3Hds- {\n cursor: pointer;\n}\n";
|
|
282
|
+
var styles$a = {"headerLabel":"fLmJZJJqMcE-","sortable":"UG8cHUT3Hds-"};
|
|
283
|
+
styleInject_es.styleInject(css_248z$a);
|
|
284
284
|
|
|
285
|
-
var css_248z$
|
|
286
|
-
var styles$
|
|
287
|
-
styleInject_es.styleInject(css_248z$
|
|
285
|
+
var css_248z$9 = ".AN5egORYy-0- {\n width: calc(16px * 1.5);\n width: var(--space-large);\n height: calc(16px * 1.5);\n height: var(--space-large);\n margin-right: calc(16px / 2);\n margin-right: var(--space-small);\n}\n\n.AN5egORYy-0- path {\n fill: rgba(101, 120, 132, 1);\n fill: var(--color-interactive--subtle);\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-heading);\n}\n\n.AN5egORYy-0- path._6KYeQXWXLQ8- {\n fill: rgb(217, 223, 225);\n fill: var(--color-inactive--surface);\n}\n\n.AN5egORYy-0-:hover path {\n fill: rgba(101, 120, 132, 1);\n fill: var(--color-interactive--subtle);\n transition: all 200ms ease;\n transition: all var(--timing-base) ease;\n}\n";
|
|
286
|
+
var styles$9 = {"sortIcon":"AN5egORYy-0-","active":"F1uTDCK0Sb0-","inactive":"_6KYeQXWXLQ8-"};
|
|
287
|
+
styleInject_es.styleInject(css_248z$9);
|
|
288
288
|
|
|
289
289
|
const SORTING_ICON_TEST_ID = "ATL-DataList-Sorting-Icon";
|
|
290
290
|
function DataListSortingArrows({ order }) {
|
|
291
|
-
return (React__default["default"].createElement("div", { className: styles$
|
|
291
|
+
return (React__default["default"].createElement("div", { className: styles$9.sortIcon, "data-testid": SORTING_ICON_TEST_ID },
|
|
292
292
|
React__default["default"].createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
|
|
293
293
|
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" }),
|
|
294
294
|
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" }))));
|
|
295
295
|
function getActiveClassName(targetOrder) {
|
|
296
|
-
return order === targetOrder ? styles$
|
|
296
|
+
return order === targetOrder ? styles$9.active : styles$9.inactive;
|
|
297
297
|
}
|
|
298
298
|
}
|
|
299
299
|
|
|
300
|
-
|
|
300
|
+
var css_248z$8 = ".thBUfVNaigs- {\n position: absolute;\n top: 100%;\n left: 0;\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 margin-top: calc(16px / 4);\n margin-top: var(--space-smaller);\n padding: calc(16px / 2) 0;\n padding: var(--space-small) 0;\n border: calc(16px / 16) solid rgb(217, 223, 225);\n border: var(--border-base) solid var(--color-border);\n border-radius: calc(16px / 2);\n border-radius: var(--radius-larger);\n background: rgba(255, 255, 255, 1);\n background: var(--color-surface);\n -ms-flex-align: start;\n align-items: flex-start;\n}\n\n.QaXuqbVjG04- {\n display: -ms-flexbox;\n display: flex;\n min-width: calc((16px * 3) * 3.5);\n min-width: calc(calc(16px * 3) * 3.5);\n min-width: calc(var(--space-largest) * 3.5);\n min-height: calc((calc(16px * 3) - calc(16px / 4)));\n min-height: calc((var(--space-largest) - var(--space-smaller)));\n box-sizing: border-box;\n margin: 0 calc(16px / 2);\n margin: 0 var(--space-small);\n padding: calc(16px / 2);\n padding: var(--space-small);\n font-family: \"Inter\", Helvetica, Arial, sans-serif;\n font-family: var(--typography--fontFamily-normal);\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 font-weight: 500;\n white-space: nowrap;\n list-style: none;\n cursor: pointer;\n -ms-flex-align: center;\n align-items: center;\n -ms-flex-pack: justify;\n justify-content: space-between;\n}\n\n.QaXuqbVjG04-:hover,\n.QaXuqbVjG04-:focus {\n border-radius: calc(16px / 4);\n border-radius: var(--radius-large);\n background-color: rgb(244, 246, 250);\n background-color: var(--color-surface--hover);\n}\n\n.QaXuqbVjG04-:focus-visible {\n box-shadow: 0px 0px 0px calc(16px / 8) rgba(255, 255, 255, 1),\n 0px 0px 0px calc(16px / 4) rgb(147, 161, 169);\n box-shadow: var(--shadow-focus);\n}\n\n._6kMgjgYeCwY- {\n gap: calc(16px / 4);\n gap: var(--space-smaller);\n}\n";
|
|
301
|
+
var styles$8 = {"optionsList":"thBUfVNaigs-","option":"QaXuqbVjG04-","optionSelected":"_6kMgjgYeCwY-"};
|
|
302
|
+
styleInject_es.styleInject(css_248z$8);
|
|
303
|
+
|
|
304
|
+
function DataListSortingOptions({ options, selectedOption, onSelectChange, onClose, optionsListRef, dataListHeaderTileRef, }) {
|
|
305
|
+
useRefocusOnActivator.useRefocusOnActivator(!optionsListRef.current);
|
|
306
|
+
useOnKeyDown.useOnKeyDown(() => onClose(), "Escape");
|
|
307
|
+
React__default["default"].useEffect(() => {
|
|
308
|
+
document.addEventListener("mousedown", handleClickOutside);
|
|
309
|
+
return () => {
|
|
310
|
+
document.removeEventListener("mousedown", handleClickOutside);
|
|
311
|
+
};
|
|
312
|
+
}, [optionsListRef, dataListHeaderTileRef, onClose]);
|
|
313
|
+
return (React__default["default"].createElement("ul", { className: styles$8.optionsList, ref: optionsListRef }, options.map((option, index) => (React__default["default"].createElement("li", { className: option.label === (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label)
|
|
314
|
+
? `${styles$8.option} ${styles$8.optionSelected}`
|
|
315
|
+
: styles$8.option, key: index, onClick: () => onSelectChange(option), onKeyDown: event => handleKeyDown(event, option), tabIndex: 0 },
|
|
316
|
+
option.label,
|
|
317
|
+
option.label === (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) && (React__default["default"].createElement(Icon.Icon, { name: "checkmark", color: "blue" })))))));
|
|
318
|
+
function handleKeyDown(event, option) {
|
|
319
|
+
if (event.key === "Enter") {
|
|
320
|
+
onSelectChange(option);
|
|
321
|
+
}
|
|
322
|
+
}
|
|
323
|
+
function handleClickOutside(event) {
|
|
324
|
+
var _a, _b;
|
|
325
|
+
const isClickInsideOptions = (_a = optionsListRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target);
|
|
326
|
+
const isClickInsideHeader = (_b = dataListHeaderTileRef.current) === null || _b === void 0 ? void 0 : _b.contains(event.target);
|
|
327
|
+
if (!isClickInsideOptions && !isClickInsideHeader) {
|
|
328
|
+
onClose();
|
|
329
|
+
}
|
|
330
|
+
}
|
|
331
|
+
}
|
|
332
|
+
|
|
333
|
+
/* eslint-disable max-statements */
|
|
334
|
+
function DataListHeaderTile({ headers, headerKey, visible = false, }) {
|
|
335
|
+
useRefocusOnActivator.useRefocusOnActivator(visible);
|
|
301
336
|
const { sorting } = useDataListContext();
|
|
302
|
-
const
|
|
337
|
+
const [isDropDownOpen, setIsDropDownOpen] = React__default["default"].useState(false);
|
|
338
|
+
const [selectedSortOption, setSelectedSortOption] = React__default["default"].useState(null);
|
|
339
|
+
const optionsListRef = useFocusTrap.useFocusTrap(isDropDownOpen);
|
|
340
|
+
const dataListHeaderTileRef = React__default["default"].useRef(null);
|
|
341
|
+
const sortableItem = sorting === null || sorting === void 0 ? void 0 : sorting.sortable.find(item => item.key === headerKey);
|
|
342
|
+
const isSortable = Boolean(sortableItem);
|
|
303
343
|
const sortingState = sorting === null || sorting === void 0 ? void 0 : sorting.state;
|
|
304
344
|
const Tag = isSortable ? "button" : "div";
|
|
305
|
-
return (React__default["default"].createElement(Tag, { className: classnames__default["default"](styles$
|
|
306
|
-
[styles$
|
|
307
|
-
}), onClick: handleOnClick },
|
|
345
|
+
return (React__default["default"].createElement(Tag, { className: classnames__default["default"](styles$a.headerLabel, {
|
|
346
|
+
[styles$a.sortable]: isSortable,
|
|
347
|
+
}), onClick: handleOnClick, ref: dataListHeaderTileRef },
|
|
308
348
|
React__default["default"].createElement(Text.Text, { maxLines: "single" }, headers[headerKey]),
|
|
349
|
+
isSortable && (sortableItem === null || sortableItem === void 0 ? void 0 : sortableItem.options) && isDropDownOpen && (React__default["default"].createElement(DataListSortingOptions, { options: sortableItem.options, selectedOption: selectedSortOption, onSelectChange: handleSelectChange, onClose: () => setIsDropDownOpen(false), optionsListRef: optionsListRef, dataListHeaderTileRef: dataListHeaderTileRef })),
|
|
309
350
|
(sortingState === null || sortingState === void 0 ? void 0 : sortingState.key) === headerKey ? (React__default["default"].createElement(DataListSortingArrows, { order: sortingState.order })) : (sortingState === null || sortingState === void 0 ? void 0 : sortingState.key) !== headerKey && isSortable ? (React__default["default"].createElement(DataListSortingArrows, { order: "none" })) : null));
|
|
310
|
-
function toggleSorting(sortingKey) {
|
|
351
|
+
function toggleSorting(sortingKey, order) {
|
|
311
352
|
const isSameKey = sortingKey === (sortingState === null || sortingState === void 0 ? void 0 : sortingState.key);
|
|
312
|
-
|
|
353
|
+
const isDescending = (sortingState === null || sortingState === void 0 ? void 0 : sortingState.order) === "desc";
|
|
354
|
+
if (isSameKey && isDescending && order !== "asc") {
|
|
355
|
+
if (order === "desc")
|
|
356
|
+
return;
|
|
313
357
|
sorting === null || sorting === void 0 ? void 0 : sorting.onSort(undefined);
|
|
314
358
|
return;
|
|
315
359
|
}
|
|
360
|
+
const sortingOrder = order || (isSameKey && !isDescending ? "desc" : "asc");
|
|
316
361
|
sorting === null || sorting === void 0 ? void 0 : sorting.onSort({
|
|
317
|
-
order: isSameKey && (sortingState === null || sortingState === void 0 ? void 0 : sortingState.order) === "asc" ? "desc" : "asc",
|
|
318
362
|
key: sortingKey,
|
|
363
|
+
order: sortingOrder,
|
|
319
364
|
});
|
|
320
365
|
}
|
|
321
366
|
function handleOnClick() {
|
|
322
367
|
if (!isSortable)
|
|
323
368
|
return;
|
|
324
|
-
|
|
369
|
+
if (sortableItem === null || sortableItem === void 0 ? void 0 : sortableItem.options) {
|
|
370
|
+
setIsDropDownOpen(!isDropDownOpen);
|
|
371
|
+
}
|
|
372
|
+
else {
|
|
373
|
+
toggleSorting(headerKey);
|
|
374
|
+
}
|
|
375
|
+
}
|
|
376
|
+
function handleSelectChange(selectedOption) {
|
|
377
|
+
if (sortableItem) {
|
|
378
|
+
toggleSorting(sortableItem.key, selectedOption.order);
|
|
379
|
+
}
|
|
380
|
+
setSelectedSortOption(selectedOption);
|
|
381
|
+
setIsDropDownOpen(true);
|
|
325
382
|
}
|
|
326
383
|
}
|
|
327
384
|
|
|
@@ -374,7 +431,7 @@ function generateListItemElement(item) {
|
|
|
374
431
|
* Generate the header elements with the default styling
|
|
375
432
|
*/
|
|
376
433
|
function generateHeaderElements(headers) {
|
|
377
|
-
const headerElements = Object.keys(headers).reduce((acc, key) => (Object.assign(Object.assign({}, acc), { [key]: React__default["default"].createElement(DataListHeaderTile, { headers: headers, headerKey: key }) })), {});
|
|
434
|
+
const headerElements = Object.keys(headers).reduce((acc, key) => (Object.assign(Object.assign({}, acc), { [key]: React__default["default"].createElement(DataListHeaderTile, { headers: headers, headerKey: key, visible: true }) })), {});
|
|
378
435
|
return isEmpty__default["default"](headerElements) ? undefined : headerElements;
|
|
379
436
|
}
|
|
380
437
|
function sortBreakpoints(sizeProp) {
|
|
@@ -517,7 +574,7 @@ function InternalDataListItemActions({ actions, }) {
|
|
|
517
574
|
return (React__default["default"].createElement(framerMotion.motion.div, { variants: variants, initial: "hidden", animate: "visible", exit: "hidden", transition: {
|
|
518
575
|
duration: TRANSITION_DURATION_IN_SECONDS,
|
|
519
576
|
delay: TRANSITION_DELAY_IN_SECONDS,
|
|
520
|
-
}, className: styles$
|
|
577
|
+
}, className: styles$d.menu, onContextMenu: handleContextMenu },
|
|
521
578
|
React__default["default"].createElement(DataListActions, null, actions)));
|
|
522
579
|
}
|
|
523
580
|
function handleContextMenu(event) {
|
|
@@ -561,8 +618,8 @@ function DataListItemInternal({ children, item, }) {
|
|
|
561
618
|
const { canSelect, hasAtLeastOneSelected, isSelectAll, selectedIDs, selected, onSelect, } = useBatchSelect();
|
|
562
619
|
if (!canSelect)
|
|
563
620
|
return children;
|
|
564
|
-
return (React__default["default"].createElement("div", { className: classnames__default["default"](styles$
|
|
565
|
-
[styles$
|
|
621
|
+
return (React__default["default"].createElement("div", { className: classnames__default["default"](styles$g.selectable, {
|
|
622
|
+
[styles$g.selected]: hasAtLeastOneSelected,
|
|
566
623
|
}) },
|
|
567
624
|
children,
|
|
568
625
|
React__default["default"].createElement(Checkbox.Checkbox, { checked: getIsChecked(), onChange: handleChange })));
|
|
@@ -607,17 +664,17 @@ function DataListItemClickableInternal({ onClick, url, to, children, }) {
|
|
|
607
664
|
return React__default["default"].createElement(React__default["default"].Fragment, null, children);
|
|
608
665
|
if (to) {
|
|
609
666
|
const computedTo = typeof to === "string" ? to : to(activeItem);
|
|
610
|
-
return (React__default["default"].createElement(reactRouterDom.Link, { className: styles$
|
|
667
|
+
return (React__default["default"].createElement(reactRouterDom.Link, { className: styles$g.listItemClickable, to: computedTo, onClick: handleClick }, children));
|
|
611
668
|
}
|
|
612
669
|
if (url) {
|
|
613
670
|
const href = typeof url === "string" ? url : url(activeItem);
|
|
614
|
-
return (React__default["default"].createElement("a", { className: styles$
|
|
671
|
+
return (React__default["default"].createElement("a", { className: styles$g.listItemClickable, href: href, onClick: handleClick }, children));
|
|
615
672
|
}
|
|
616
673
|
if (onClick) {
|
|
617
674
|
return (
|
|
618
675
|
// A button can be nested within the list item. To prevent a button inside
|
|
619
676
|
// button error, we need to manually declare a div to be a button
|
|
620
|
-
React__default["default"].createElement("div", { role: "button", tabIndex: 0, className: styles$
|
|
677
|
+
React__default["default"].createElement("div", { role: "button", tabIndex: 0, className: styles$g.listItemClickable, onClick: handleClick, onKeyDown: e => {
|
|
621
678
|
if (e.key === "Enter" || e.key === " ") {
|
|
622
679
|
e.preventDefault();
|
|
623
680
|
handleClick();
|
|
@@ -667,8 +724,8 @@ function DataListItem({ item, layout, }) {
|
|
|
667
724
|
const isContextMenuVisible = Boolean(contextPosition);
|
|
668
725
|
const shouldShowContextMenu = showMenu && isContextMenuVisible && hasActions;
|
|
669
726
|
return (React__default["default"].createElement(DataListLayoutActionsContext.Provider, { value: { activeItem: item } },
|
|
670
|
-
React__default["default"].createElement("div", { onMouseEnter: handleShowMenu, onMouseLeave: handleHideMenu, onFocus: handleShowMenu, onBlur: handleHideMenu, onContextMenu: handleContextMenu, className: classnames__default["default"](styles$
|
|
671
|
-
[styles$
|
|
727
|
+
React__default["default"].createElement("div", { onMouseEnter: handleShowMenu, onMouseLeave: handleHideMenu, onFocus: handleShowMenu, onBlur: handleHideMenu, onContextMenu: handleContextMenu, className: classnames__default["default"](styles$g.listItem, {
|
|
728
|
+
[styles$g.active]: showMenu && isContextMenuVisible,
|
|
672
729
|
}), key: item.id },
|
|
673
730
|
React__default["default"].createElement(DataListItemInternal, { item: item },
|
|
674
731
|
React__default["default"].createElement(DataListItemClickable, null, layout(generatedItem))),
|
|
@@ -754,14 +811,14 @@ function DataListHeaderCheckbox({ children }) {
|
|
|
754
811
|
return children;
|
|
755
812
|
const deselectText = sm ? "Deselect All" : "Deselect";
|
|
756
813
|
const selectedLabel = selectedCount ? `${selectedCount} selected` : "";
|
|
757
|
-
return (React__default["default"].createElement("div", { className: styles$
|
|
758
|
-
React__default["default"].createElement("div", { className: classnames__default["default"](styles$
|
|
759
|
-
[styles$
|
|
814
|
+
return (React__default["default"].createElement("div", { className: styles$g.selectable },
|
|
815
|
+
React__default["default"].createElement("div", { className: classnames__default["default"](styles$g.selectAllCheckbox, {
|
|
816
|
+
[styles$g.visible]: canSelectAll,
|
|
760
817
|
}) },
|
|
761
818
|
React__default["default"].createElement(Checkbox.Checkbox, { checked: isAllSelected(), indeterminate: isIndeterminate(), onChange: handleSelectAll },
|
|
762
|
-
React__default["default"].createElement("div", { className: styles$
|
|
763
|
-
React__default["default"].createElement(AnimatedSwitcher.AnimatedSwitcher, { switched: hasAtLeastOneSelected, initialChild: children, switchTo: React__default["default"].createElement("div", { className: styles$
|
|
764
|
-
React__default["default"].createElement("div", { className: styles$
|
|
819
|
+
React__default["default"].createElement("div", { className: styles$g.srOnly }, selectedLabel))),
|
|
820
|
+
React__default["default"].createElement(AnimatedSwitcher.AnimatedSwitcher, { switched: hasAtLeastOneSelected, initialChild: children, switchTo: React__default["default"].createElement("div", { className: styles$g.batchSelectContainer },
|
|
821
|
+
React__default["default"].createElement("div", { className: styles$g.headerBatchSelect },
|
|
765
822
|
Boolean(selectedCount) && React__default["default"].createElement(Text.Text, null,
|
|
766
823
|
selectedCount,
|
|
767
824
|
" selected"),
|
|
@@ -804,17 +861,16 @@ function DataListHeaderCheckbox({ children }) {
|
|
|
804
861
|
function DataListHeader() {
|
|
805
862
|
const breakpoints = useResponsiveSizing();
|
|
806
863
|
const { headerVisibility = { xs: true, sm: true, md: true, lg: true, xl: true }, headers, layoutBreakpoints, } = useDataListContext();
|
|
807
|
-
const {
|
|
864
|
+
const { hasAtLeastOneSelected } = useBatchSelect();
|
|
808
865
|
const size = getVisibleSize();
|
|
809
866
|
const { layout } = useActiveLayout();
|
|
810
867
|
const visible = headerVisibility[size];
|
|
811
|
-
|
|
812
|
-
if ((!visible && noItemsSelected) || !layout)
|
|
868
|
+
if ((!visible && !hasAtLeastOneSelected) || !layout)
|
|
813
869
|
return null;
|
|
814
870
|
const headerData = generateHeaderElements(headers);
|
|
815
871
|
if (!headerData)
|
|
816
872
|
return null;
|
|
817
|
-
return (React__default["default"].createElement("div", { className: styles$
|
|
873
|
+
return (React__default["default"].createElement("div", { className: styles$g.headerTitles },
|
|
818
874
|
React__default["default"].createElement(DataListHeaderCheckbox, null, layout(headerData))));
|
|
819
875
|
function getVisibleSize() {
|
|
820
876
|
const visibilityKeys = Object.keys(headerVisibility);
|
|
@@ -842,16 +898,22 @@ function DataListSort() {
|
|
|
842
898
|
sortByOptions.map(({ label, value }) => (React__default["default"].createElement(Combobox.Combobox.Option, { key: value, id: value, label: label })))));
|
|
843
899
|
function getSortByOptions() {
|
|
844
900
|
const options = sortable.reduce((acc, sort) => {
|
|
845
|
-
const label = headers[sort];
|
|
901
|
+
const label = headers[sort.key];
|
|
846
902
|
if (!label)
|
|
847
903
|
return acc;
|
|
848
904
|
if (label === "Last activity") {
|
|
849
|
-
acc.push({
|
|
850
|
-
|
|
905
|
+
acc.push({
|
|
906
|
+
label: "Last Activity (Newest)",
|
|
907
|
+
value: `${sort.key},desc`,
|
|
908
|
+
});
|
|
909
|
+
acc.push({
|
|
910
|
+
label: "Last Activity (Oldest)",
|
|
911
|
+
value: `${sort.key},asc`,
|
|
912
|
+
});
|
|
851
913
|
}
|
|
852
914
|
else {
|
|
853
|
-
acc.push({ label: `${label} (A-Z)`, value: `${sort},asc` });
|
|
854
|
-
acc.push({ label: `${label} (Z-A)`, value: `${sort},desc` });
|
|
915
|
+
acc.push({ label: `${label} (A-Z)`, value: `${sort.key},asc` });
|
|
916
|
+
acc.push({ label: `${label} (Z-A)`, value: `${sort.key},desc` });
|
|
855
917
|
}
|
|
856
918
|
return acc;
|
|
857
919
|
}, []);
|
|
@@ -1165,13 +1227,13 @@ function InternalDataList() {
|
|
|
1165
1227
|
const initialLoading = loadingState === "initial";
|
|
1166
1228
|
const showEmptyState = !initialLoading && data.length === 0;
|
|
1167
1229
|
const shouldRenderLoadMoreTrigger = !initialLoading && !showEmptyState;
|
|
1168
|
-
return (React__default["default"].createElement("div", { className: styles$
|
|
1169
|
-
React__default["default"].createElement("div", { className: styles$
|
|
1230
|
+
return (React__default["default"].createElement("div", { className: styles$g.wrapper },
|
|
1231
|
+
React__default["default"].createElement("div", { className: styles$g.titleContainer },
|
|
1170
1232
|
title && React__default["default"].createElement(Heading.Heading, { level: 3 }, title),
|
|
1171
1233
|
React__default["default"].createElement(DataListTotalCount, { totalCount: totalCount, loading: initialLoading })),
|
|
1172
1234
|
React__default["default"].createElement("div", { ref: backToTopRef }),
|
|
1173
1235
|
React__default["default"].createElement(DataListStickyHeader, null,
|
|
1174
|
-
React__default["default"].createElement("div", { className: styles$
|
|
1236
|
+
React__default["default"].createElement("div", { className: styles$g.headerFilters },
|
|
1175
1237
|
React__default["default"].createElement(InternalDataListFilters, null),
|
|
1176
1238
|
React__default["default"].createElement(InternalDataListSearch, null)),
|
|
1177
1239
|
React__default["default"].createElement(InternalDataListStatusBar, null),
|
|
@@ -1179,8 +1241,8 @@ function InternalDataList() {
|
|
|
1179
1241
|
initialLoading && React__default["default"].createElement(DataListLoadingState, null),
|
|
1180
1242
|
showEmptyState && React__default["default"].createElement(InternalDataListEmptyState, null),
|
|
1181
1243
|
layoutComponents,
|
|
1182
|
-
loadingState === "filtering" && (React__default["default"].createElement("div", { "data-testid": DATA_LIST_FILTERING_SPINNER_TEST_ID, className: styles$
|
|
1183
|
-
React__default["default"].createElement("div", { className: styles$
|
|
1244
|
+
loadingState === "filtering" && (React__default["default"].createElement("div", { "data-testid": DATA_LIST_FILTERING_SPINNER_TEST_ID, className: styles$g.filtering },
|
|
1245
|
+
React__default["default"].createElement("div", { className: styles$g.filteringSpinner },
|
|
1184
1246
|
React__default["default"].createElement(Spinner.Spinner, { size: "small" })))),
|
|
1185
1247
|
shouldRenderLoadMoreTrigger && (React__default["default"].createElement(DataListLoadMore, { onBackToTop: handleBackToTop }))));
|
|
1186
1248
|
function handleBackToTop() {
|
package/dist/DataTable/index.js
CHANGED
|
@@ -9,11 +9,11 @@ var jobberHooks = require('@jobber/hooks/useResizeObserver');
|
|
|
9
9
|
var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
|
|
10
10
|
var Glimmer = require('../Glimmer-cfa92a88.js');
|
|
11
11
|
var tslib_es6 = require('../tslib.es6-5b8768b7.js');
|
|
12
|
-
var Option = require('../Option-
|
|
12
|
+
var Option = require('../Option-b715f6b4.js');
|
|
13
13
|
var Button = require('../Button-b73a5e01.js');
|
|
14
14
|
var Text = require('../Text-259af966.js');
|
|
15
15
|
require('../Content-2ca1ffe1.js');
|
|
16
|
-
require('../FormField-
|
|
16
|
+
require('../FormField-b0e74d32.js');
|
|
17
17
|
require('uuid');
|
|
18
18
|
require('react-hook-form');
|
|
19
19
|
require('@jobber/hooks/useShowClear');
|
|
@@ -49,8 +49,8 @@ var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
|
|
|
49
49
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
50
50
|
var jobberHooks__namespace = /*#__PURE__*/_interopNamespace(jobberHooks);
|
|
51
51
|
|
|
52
|
-
var css_248z$3 = ".m5A5oeRFaMs- {\n position: relative;\n border: calc(16px / 16) solid rgb(217, 223, 225);\n border: var(--border-base) solid var(--color-border);\n border-radius: calc(16px / 8);\n border-radius: var(--radius-base);\n}\n\n.cY-5BrIIUg8- {\n overflow: auto;\n}\n\n.y8xnHe7fwrI- {\n width: 100%;\n border-collapse: collapse;\n text-align: left;\n}\n\n.y8xnHe7fwrI- thead tr th {\n padding: calc(16px * 1);\n padding: var(--space-base);\n border-bottom: calc(16px / 16) solid rgb(217, 223, 225);\n border-bottom: var(--border-base) solid var(--color-border);\n color: rgb(1, 41, 57);\n color: var(--color-heading);\n white-space: nowrap;\n}\n\n.y8xnHe7fwrI- thead tr th :first-child {\n display: -ms-flexbox;\n display: flex;\n}\n\n.y8xnHe7fwrI- tbody tr {\n border-bottom: calc(16px / 16) solid rgb(217, 223, 225);\n border-bottom: var(--border-base) solid var(--color-border);\n}\n\n.y8xnHe7fwrI- tbody tr:last-child {\n border-bottom: none;\n}\n\n.y8xnHe7fwrI- tbody tr td {\n padding: calc(16px * 1);\n padding: var(--space-base);\n}\n\n.y8xnHe7fwrI- tfoot {\n position: sticky;\n z-index: 1;\n width: 100%;\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-top: calc(16px / 8) solid rgb(217, 223, 225);\n border-top: var(--border-thick) solid var(--color-border);\n background-color: rgba(255, 255, 255, 1);\n background-color: var(--color-surface);\n bottom: 0;\n}\n\n.y8xnHe7fwrI- tfoot tr th {\n padding: calc(16px * 1);\n padding: var(--space-base);\n}\n\n.t8QYvdtkQXQ- thead tr th:first-child,\n.t8QYvdtkQXQ- tbody tr td:first-child {\n position: sticky;\n left: 0;\n z-index: 1;\n height: calc((16px * 3) + (16px / 4));\n height: calc(calc(16px * 3) + calc(16px / 4));\n height: calc(var(--space-largest) + var(--space-smaller));\n background-color: rgba(255, 255, 255, 1);\n background-color: var(--color-surface);\n}\n\n.t8QYvdtkQXQ- th:first-child::after,\n.t8QYvdtkQXQ- td:first-child::after {\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: calc(-1 * (16px / 2));\n right: calc(-1 * calc(16px / 2));\n right: calc(-1 * var(--space-small));\n width: calc(16px / 2);\n width: var(--space-small);\n height: 100%;\n background: linear-gradient(\n 90deg,\n rgba(0, 0, 0, 0.1) 0%,\n rgba(0, 0, 0, 0) 80%\n );\n background: linear-gradient(\n 90deg,\n rgba(var(--color-black--rgb), 0.1) 0%,\n rgba(var(--color-black--rgb), 0) 80%\n );\n}\n\n.Y21JuHX6fhk- {\n position: sticky;\n top: 0;\n right: 0;\n left: 0;\n z-index: 2;\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 background-color: rgba(255, 255, 255, 1);\n background-color: var(--color-surface);\n}\n\n.PJEX8dlqCMA-:first-child:hover {\n background: rgb(244, 246, 250);\n background: var(--color-surface--hover);\n cursor: pointer;\n}\n\n._9ps4aWGs8W0-:hover {\n background: rgb(244, 246, 250);\n background: var(--color-surface--hover);\n cursor: pointer;\n}\n\n._59XEEB8l5pI-:hover,\n._59XEEB8l5pI-:hover :first-child {\n background: rgb(238, 240, 242);\n background: var(--color-surface--background);\n cursor: pointer;\n}\n\n.a2BGGBkY5J8- {\n display: -ms-flexbox;\n display: flex;\n position: absolute;\n -ms-flex-direction: column;\n flex-direction: column;\n top: calc(16px * 3);\n top: var(--space-largest);\n right: 0;\n bottom: calc(16px * 3);\n bottom: var(--space-largest);\n left: 0;\n width: 100%;\n -ms-flex-pack: center;\n justify-content: center;\n -ms-flex-align: center;\n align-items: center;\n}\n";
|
|
53
|
-
var styles$3 = {"dataTableContainer":"m5A5oeRFaMs-","tableContainer":"cY-5BrIIUg8-","table":"y8xnHe7fwrI-","pinFirstColumn":"t8QYvdtkQXQ-","stickyHeader":"Y21JuHX6fhk-","pinFirstHeaderSortable":"PJEX8dlqCMA-","sortableColumn":"_9ps4aWGs8W0-","clickableRow":"_59XEEB8l5pI-","emptyState":"a2BGGBkY5J8-"};
|
|
52
|
+
var css_248z$3 = ".m5A5oeRFaMs- {\n position: relative;\n border: calc(16px / 16) solid rgb(217, 223, 225);\n border: var(--border-base) solid var(--color-border);\n border-radius: calc(16px / 8);\n border-radius: var(--radius-base);\n overflow: hidden;\n}\n\n.cY-5BrIIUg8- {\n overflow: auto;\n}\n\n.y8xnHe7fwrI- {\n width: 100%;\n border-collapse: collapse;\n text-align: left;\n}\n\n.y8xnHe7fwrI- thead tr th {\n padding: calc(16px * 1);\n padding: var(--space-base);\n border-bottom: calc(16px / 16) solid rgb(217, 223, 225);\n border-bottom: var(--border-base) solid var(--color-border);\n color: rgb(1, 41, 57);\n color: var(--color-heading);\n white-space: nowrap;\n}\n\n.y8xnHe7fwrI- thead tr th :first-child {\n display: -ms-flexbox;\n display: flex;\n}\n\n.y8xnHe7fwrI- tbody tr {\n border-bottom: calc(16px / 16) solid rgb(217, 223, 225);\n border-bottom: var(--border-base) solid var(--color-border);\n}\n\n.y8xnHe7fwrI- tbody tr:last-child {\n border-bottom: none;\n}\n\n.y8xnHe7fwrI- tbody tr td {\n padding: calc(16px * 1);\n padding: var(--space-base);\n}\n\n.y8xnHe7fwrI- tfoot {\n position: sticky;\n z-index: 1;\n width: 100%;\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-top: calc(16px / 8) solid rgb(217, 223, 225);\n border-top: var(--border-thick) solid var(--color-border);\n background-color: rgba(255, 255, 255, 1);\n background-color: var(--color-surface);\n bottom: 0;\n}\n\n.y8xnHe7fwrI- tfoot tr th {\n padding: calc(16px * 1);\n padding: var(--space-base);\n}\n\n.t8QYvdtkQXQ- thead tr th:first-child,\n.t8QYvdtkQXQ- tbody tr td:first-child {\n position: sticky;\n left: 0;\n z-index: 1;\n height: calc((16px * 3) + (16px / 4));\n height: calc(calc(16px * 3) + calc(16px / 4));\n height: calc(var(--space-largest) + var(--space-smaller));\n background-color: rgba(255, 255, 255, 1);\n background-color: var(--color-surface);\n}\n\n.t8QYvdtkQXQ- tbody tr td.UGku9HGjQn0- {\n display: table-cell;\n position: static;\n}\n\n.t8QYvdtkQXQ- th:first-child::after,\n.t8QYvdtkQXQ- td:first-child::after {\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: calc(-1 * (16px / 2));\n right: calc(-1 * calc(16px / 2));\n right: calc(-1 * var(--space-small));\n width: calc(16px / 2);\n width: var(--space-small);\n height: 100%;\n background: linear-gradient(\n 90deg,\n rgba(0, 0, 0, 0.1) 0%,\n rgba(0, 0, 0, 0) 80%\n );\n background: linear-gradient(\n 90deg,\n rgba(var(--color-black--rgb), 0.1) 0%,\n rgba(var(--color-black--rgb), 0) 80%\n );\n}\n\n.Y21JuHX6fhk- {\n position: sticky;\n top: 0;\n right: 0;\n left: 0;\n z-index: 2;\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 background-color: rgba(255, 255, 255, 1);\n background-color: var(--color-surface);\n}\n\n.PJEX8dlqCMA-:first-child:hover {\n background: rgb(244, 246, 250);\n background: var(--color-surface--hover);\n cursor: pointer;\n}\n\n._9ps4aWGs8W0-:hover {\n background: rgb(244, 246, 250);\n background: var(--color-surface--hover);\n cursor: pointer;\n}\n\n._59XEEB8l5pI-:hover,\n._59XEEB8l5pI-:hover :first-child {\n background: rgb(238, 240, 242);\n background: var(--color-surface--background);\n cursor: pointer;\n}\n\n.a2BGGBkY5J8- {\n display: -ms-flexbox;\n display: flex;\n position: absolute;\n -ms-flex-direction: column;\n flex-direction: column;\n top: calc(16px * 3);\n top: var(--space-largest);\n right: 0;\n bottom: calc(16px * 3);\n bottom: var(--space-largest);\n left: 0;\n width: 100%;\n -ms-flex-pack: center;\n justify-content: center;\n -ms-flex-align: center;\n align-items: center;\n}\n";
|
|
53
|
+
var styles$3 = {"dataTableContainer":"m5A5oeRFaMs-","tableContainer":"cY-5BrIIUg8-","table":"y8xnHe7fwrI-","pinFirstColumn":"t8QYvdtkQXQ-","emptyStateCell":"UGku9HGjQn0-","stickyHeader":"Y21JuHX6fhk-","pinFirstHeaderSortable":"PJEX8dlqCMA-","sortableColumn":"_9ps4aWGs8W0-","clickableRow":"_59XEEB8l5pI-","emptyState":"a2BGGBkY5J8-"};
|
|
54
54
|
styleInject_es.styleInject(css_248z$3);
|
|
55
55
|
|
|
56
56
|
function BodyLoading({ table }) {
|
|
@@ -80,7 +80,8 @@ function Body({ table, onRowClick, emptyState, loading, }) {
|
|
|
80
80
|
})));
|
|
81
81
|
}))) : (React__default["default"].createElement("tbody", null,
|
|
82
82
|
React__default["default"].createElement("tr", { className: bodyRowClasses },
|
|
83
|
-
React__default["default"].createElement("td", { colSpan: table.getAllColumns().length, className:
|
|
83
|
+
React__default["default"].createElement("td", { colSpan: table.getAllColumns().length, className: styles$3.emptyStateCell },
|
|
84
|
+
React__default["default"].createElement("div", { className: styles$3.emptyState }, emptyState)))))));
|
|
84
85
|
}
|
|
85
86
|
|
|
86
87
|
function createTableSettings(data, columns, options) {
|
|
@@ -147,6 +147,7 @@ export interface FormFieldProps extends CommonFormFieldProps {
|
|
|
147
147
|
* Blur callback.
|
|
148
148
|
*/
|
|
149
149
|
onBlur?(): void;
|
|
150
|
+
onKeyUp?(event: React.KeyboardEvent<HTMLInputElement>): void;
|
|
150
151
|
/**
|
|
151
152
|
* Exclusively for textareas. Specifies the visible height of a textarea.
|
|
152
153
|
*/
|
package/dist/FormField/index.js
CHANGED
|
@@ -146,7 +146,7 @@ function FormFieldPostFix({ variation }) {
|
|
|
146
146
|
/*eslint max-statements: ["error", 13]*/
|
|
147
147
|
function FormField(props) {
|
|
148
148
|
var _a, _b;
|
|
149
|
-
const { actionsRef, autocomplete = true, children, defaultValue, description, disabled, inputRef, inline, keyboard, max, maxLength, min, name, readonly, rows, loading, type = "text", validations, value, onChange, onEnter, onFocus, onBlur, onValidation, clearable = "never", } = props;
|
|
149
|
+
const { actionsRef, autocomplete = true, children, defaultValue, description, disabled, inputRef, inline, keyboard, max, maxLength, min, name, readonly, rows, loading, type = "text", validations, value, onChange, onEnter, onFocus, onBlur, onValidation, onKeyUp, clearable = "never", } = props;
|
|
150
150
|
const { control, formState: { errors }, setValue, watch, } = reactHookForm.useFormContext() != undefined
|
|
151
151
|
? reactHookForm.useFormContext()
|
|
152
152
|
: // If there isn't a Form Context being provided, get a form for this field.
|
|
@@ -188,7 +188,7 @@ function FormField(props) {
|
|
|
188
188
|
return (React__default["default"].createElement("textarea", Object.assign({}, textFieldProps, { rows: rows, ref: inputRef })));
|
|
189
189
|
default:
|
|
190
190
|
return (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
191
|
-
React__default["default"].createElement("input", Object.assign({}, textFieldProps, { autoComplete: setAutocomplete(autocomplete), type: type, maxLength: maxLength, max: max, min: min, ref: inputRef })),
|
|
191
|
+
React__default["default"].createElement("input", Object.assign({}, textFieldProps, { autoComplete: setAutocomplete(autocomplete), type: type, maxLength: maxLength, max: max, min: min, ref: inputRef, onKeyUp: onKeyUp })),
|
|
192
192
|
loading && React__default["default"].createElement(FormFieldPostFix, { variation: "spinner" }),
|
|
193
193
|
children));
|
|
194
194
|
}
|
package/dist/FormatFile/index.js
CHANGED