@jobber/components 4.41.0 → 4.42.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/DataList/DataList.d.ts +3 -1
- package/dist/DataList/DataList.types.d.ts +11 -0
- package/dist/DataList/components/DataListActionsMenu/DataListActionsMenu.d.ts +2 -2
- package/dist/DataList/components/DataListItemActions/DataListItemActionsOverflow.d.ts +1 -1
- package/dist/DataList/components/DataListLayoutActions/DataListLayoutActions.d.ts +2 -0
- package/dist/DataList/components/DataListLayoutActions/index.d.ts +1 -0
- package/dist/DataList/context/DataListContext/DataListContext.d.ts +1 -7
- package/dist/DataList/context/DataListLayoutContext/DataListLayoutContext.d.ts +5 -0
- package/dist/DataList/context/DataListLayoutContext/index.d.ts +1 -0
- package/dist/DataList/index.js +192 -108
- package/package.json +2 -2
|
@@ -3,12 +3,14 @@ import { DataListLayout } from "./components/DataListLayout";
|
|
|
3
3
|
import { DataListFilters } from "./components/DataListFilters";
|
|
4
4
|
import { DataListSearch } from "./components/DataListSearch";
|
|
5
5
|
import { DataListEmptyState } from "./components/DataListEmptyState";
|
|
6
|
-
import { DataListObject, DataListProps } from "./DataList.types";
|
|
7
6
|
import { DataListItemActions } from "./components/DataListItemActions";
|
|
8
7
|
import { DataListAction } from "./components/DataListAction";
|
|
8
|
+
import { DataListLayoutActions } from "./components/DataListLayoutActions";
|
|
9
|
+
import { DataListObject, DataListProps } from "./DataList.types";
|
|
9
10
|
export declare function DataList<T extends DataListObject>({ sorting, ...props }: DataListProps<T>): JSX.Element;
|
|
10
11
|
export declare namespace DataList {
|
|
11
12
|
var Layout: typeof DataListLayout;
|
|
13
|
+
var LayoutActions: typeof DataListLayoutActions;
|
|
12
14
|
var EmptyState: typeof DataListEmptyState;
|
|
13
15
|
var Filters: typeof DataListFilters;
|
|
14
16
|
var Search: typeof DataListSearch;
|
|
@@ -148,6 +148,17 @@ export interface DataListContextProps<T extends DataListObject> extends DataList
|
|
|
148
148
|
readonly layoutComponents?: ReactElement<DataListLayoutProps<T>>[];
|
|
149
149
|
readonly itemActionComponent?: ReactElement<DataListItemActionsProps<T>>;
|
|
150
150
|
}
|
|
151
|
+
export interface DataListLayoutContextProps<T extends DataListObject> {
|
|
152
|
+
readonly isInLayoutProvider: boolean;
|
|
153
|
+
readonly activeItem?: T;
|
|
154
|
+
/**
|
|
155
|
+
* Determine if the consumer of the DataList manually added an action to the
|
|
156
|
+
* layout. This is used to determine if the DataList should render the
|
|
157
|
+
* action column.
|
|
158
|
+
*/
|
|
159
|
+
readonly hasInLayoutActions: boolean;
|
|
160
|
+
readonly setHasInLayoutActions: (state: boolean) => void;
|
|
161
|
+
}
|
|
151
162
|
type Fragment<T> = T | T[];
|
|
152
163
|
export interface DataListItemActionsProps<T extends DataListObject> {
|
|
153
164
|
/**
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { PropsWithChildren } from "react";
|
|
1
|
+
import React, { PropsWithChildren } from "react";
|
|
2
2
|
interface DataListActionsMenuProps {
|
|
3
3
|
readonly visible: boolean;
|
|
4
4
|
readonly position: {
|
|
@@ -7,5 +7,5 @@ interface DataListActionsMenuProps {
|
|
|
7
7
|
};
|
|
8
8
|
readonly onRequestClose: () => void;
|
|
9
9
|
}
|
|
10
|
-
export declare function DataListActionsMenu({ visible, position, onRequestClose, children, }: PropsWithChildren<DataListActionsMenuProps>):
|
|
10
|
+
export declare function DataListActionsMenu({ visible, position, onRequestClose, children, }: PropsWithChildren<DataListActionsMenuProps>): React.ReactPortal;
|
|
11
11
|
export {};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { ReactElement } from "react";
|
|
2
2
|
import { DataListActionProps, DataListObject, InternalDataListActionProps } from "../../DataList.types";
|
|
3
|
-
interface DataListItemActionsOverflowProps<T extends DataListObject> extends Pick<InternalDataListActionProps<T>, "item"
|
|
3
|
+
interface DataListItemActionsOverflowProps<T extends DataListObject> extends Partial<Pick<InternalDataListActionProps<T>, "item">> {
|
|
4
4
|
readonly actions: ReactElement<DataListActionProps<T>>[];
|
|
5
5
|
}
|
|
6
6
|
export declare function DataListItemActionsOverflow<T extends DataListObject>({ item, actions, }: DataListItemActionsOverflowProps<T>): JSX.Element;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { DataListLayoutActions } from "./DataListLayoutActions";
|
|
@@ -1,11 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { DataListContextProps, DataListObject } from "../../DataList.types";
|
|
3
|
-
export declare const defaultValues:
|
|
4
|
-
title: string;
|
|
5
|
-
data: never[];
|
|
6
|
-
headers: {};
|
|
7
|
-
children: never[];
|
|
8
|
-
selected: never[];
|
|
9
|
-
};
|
|
3
|
+
export declare const defaultValues: DataListContextProps<DataListObject>;
|
|
10
4
|
export declare const DataListContext: import("react").Context<DataListContextProps<DataListObject>>;
|
|
11
5
|
export declare function useDataListContext(): DataListContextProps<DataListObject>;
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { DataListLayoutContextProps, DataListObject } from "../../DataList.types";
|
|
3
|
+
export declare const defaultValues: DataListLayoutContextProps<DataListObject>;
|
|
4
|
+
export declare const DataListLayoutContext: import("react").Context<DataListLayoutContextProps<DataListObject>>;
|
|
5
|
+
export declare function useDataListLayoutContext(): DataListLayoutContextProps<DataListObject>;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from "./DataListLayoutContext";
|
package/dist/DataList/index.js
CHANGED
|
@@ -20,12 +20,14 @@ var Checkbox = require('../Checkbox-3bccf65c.js');
|
|
|
20
20
|
var Typography = require('../Typography-fd6f932a.js');
|
|
21
21
|
require('react-router-dom');
|
|
22
22
|
var Button = require('../Button-fd8413b2.js');
|
|
23
|
-
require('react-dom');
|
|
23
|
+
var ReactDOM = require('react-dom');
|
|
24
24
|
var Tooltip = require('../Tooltip-bf67fe6e.js');
|
|
25
25
|
require('react-popper');
|
|
26
26
|
var useFocusTrap = require('@jobber/hooks/useFocusTrap');
|
|
27
27
|
var useRefocusOnActivator = require('@jobber/hooks/useRefocusOnActivator');
|
|
28
28
|
var useOnKeyDown = require('@jobber/hooks/useOnKeyDown');
|
|
29
|
+
var foundation = require('@jobber/design/foundation');
|
|
30
|
+
var noop = require('lodash/noop');
|
|
29
31
|
var AnimatedSwitcher = require('../AnimatedSwitcher-d1e1ddcf.js');
|
|
30
32
|
var Icon = require('../Icon-405a216c.js');
|
|
31
33
|
var useInView = require('@jobber/hooks/useInView');
|
|
@@ -49,15 +51,16 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
49
51
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
50
52
|
var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
|
|
51
53
|
var isEmpty__default = /*#__PURE__*/_interopDefaultLegacy(isEmpty);
|
|
54
|
+
var noop__default = /*#__PURE__*/_interopDefaultLegacy(noop);
|
|
52
55
|
var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
|
|
53
56
|
|
|
54
|
-
var css_248z$
|
|
55
|
-
var styles$
|
|
56
|
-
styleInject_es.styleInject(css_248z$
|
|
57
|
+
var css_248z$e = ".TkdrExYnvcY-,\n.TkdrExYnvcY- * {\n box-sizing: border-box;\n}\n\n.TkdrExYnvcY- {\n display: -ms-flexbox;\n display: flex;\n -ms-flex-direction: column;\n flex-direction: column;\n position: relative;\n z-index: 0;\n z-index: var(--elevation-default);\n -ms-flex: 1;\n flex: 1;\n}\n\n.IcAlZHoB4LI- {\n display: -ms-flexbox;\n display: flex;\n position: relative;\n z-index: 1;\n z-index: var(--elevation-base);\n margin-bottom: calc(16px / 2);\n margin-bottom: var(--space-small);\n -ms-flex-align: center;\n align-items: center;\n}\n\n.TFO76ysivmg- {\n display: grid;\n padding: calc(16px / 2) 0;\n padding: var(--space-small) 0;\n gap: calc(16px / 2);\n grid-gap: calc(16px / 2);\n grid-gap: var(--space-small);\n gap: var(--space-small);\n grid-template-columns: auto -webkit-max-content;\n grid-template-columns: auto max-content;\n}\n\n.jGHZZYZm1ZY- {\n display: -ms-flexbox;\n display: flex;\n -ms-flex-direction: column;\n flex-direction: column;\n -ms-flex-pack: center;\n justify-content: center;\n min-height: calc(16px * 3);\n min-height: var(--space-largest);\n padding: calc(16px / 2);\n padding: var(--space-small);\n border-bottom: calc(16px / 8) solid rgb(225, 225, 225);\n border-bottom: var(--border-thick) solid var(--color-border);\n}\n\n.jMSVGIAr5tk- > p {\n font-weight: 500;\n}\n\n.jMSVGIAr5tk- {\n display: -ms-flexbox;\n display: flex;\n -ms-flex-align: center;\n align-items: center;\n gap: calc(16px / 4);\n gap: var(--space-smaller);\n margin: calc((16px / 2) * -1) 0;\n margin: calc(calc(16px / 2) * -1) 0;\n margin: calc(var(--space-small) * -1) 0;\n}\n\n.ise8kHCfhCY- {\n position: relative;\n padding: calc(16px / 2);\n padding: var(--space-small);\n border-bottom: calc(16px / 16) solid rgb(225, 225, 225);\n border-bottom: var(--border-base) solid var(--color-border);\n transition: all 200ms;\n transition: all var(--timing-base);\n}\n\n.ise8kHCfhCY-.Pc0JGX6jCD4- {\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.d-79rkMqufg- {\n display: grid;\n -ms-flex-align: start;\n align-items: flex-start;\n}\n\n@media (min-width: 768px) {\n\n.d-79rkMqufg- {\n -ms-flex-align: center;\n align-items: center;\n}\n }\n\n@media (--medium-screens-and-up) {\n\n.d-79rkMqufg- {\n -ms-flex-align: center;\n align-items: center;\n}\n }\n\n.d-79rkMqufg-,\n.jGHZZYZm1ZY- .d-79rkMqufg- {\n grid-template-columns: -webkit-max-content minmax(0px, auto);\n grid-template-columns: max-content minmax(0px, auto);\n -webkit-column-gap: calc(16px / 2);\n -webkit-column-gap: var(--space-small);\n -moz-column-gap: calc(16px / 2);\n -moz-column-gap: var(--space-small);\n column-gap: calc(16px / 2);\n column-gap: var(--space-small);\n}\n\n.jGHZZYZm1ZY- .d-79rkMqufg- {\n display: grid;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.qm-SSuWTXkI- {\n display: -ms-flexbox;\n display: flex;\n visibility: hidden;\n}\n\n.qm-SSuWTXkI-.VA9RnQp6nbI- {\n visibility: visible;\n}\n\n.ise8kHCfhCY- .d-79rkMqufg- > :first-child {\n padding-top: calc(16px / 4);\n padding-top: var(--space-smaller);\n opacity: 1;\n transition: opacity 100ms ease-in-out;\n transition: opacity var(--transition-properties);\n --transition-properties: var(--timing-quick) ease-in-out;\n}\n\n@media (min-width: 768px) {\n\n.ise8kHCfhCY- .d-79rkMqufg- > :first-child {\n padding-top: 0;\n opacity: 0;\n}\n }\n\n@media (--medium-screens-and-up) {\n\n.ise8kHCfhCY- .d-79rkMqufg- > :first-child {\n padding-top: 0;\n opacity: 0;\n}\n }\n\n.ise8kHCfhCY-:hover .d-79rkMqufg- > :first-child,\n.ise8kHCfhCY-:focus-within .d-79rkMqufg- > :first-child,\n.ise8kHCfhCY- .d-79rkMqufg-._4L7iXXzLr5k- > :first-child {\n opacity: 1;\n}\n\n.Kkp-IYmwq-s- {\n display: -ms-flexbox;\n display: flex;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n background-color: rgba(255, 255, 255, 0.6);\n background-color: var(--color-overlay--dimmed);\n -ms-flex-align: start;\n align-items: flex-start;\n -ms-flex-pack: center;\n justify-content: center;\n}\n\n.m-eCShL7TU4- {\n position: sticky;\n top: 50vh;\n}\n";
|
|
58
|
+
var styles$e = {"wrapper":"TkdrExYnvcY-","titleContainer":"IcAlZHoB4LI-","headerFilters":"TFO76ysivmg-","headerTitles":"jGHZZYZm1ZY-","headerBatchSelect":"jMSVGIAr5tk-","listItem":"ise8kHCfhCY-","active":"Pc0JGX6jCD4-","selectable":"d-79rkMqufg-","selectAllCheckbox":"qm-SSuWTXkI-","visible":"VA9RnQp6nbI-","selected":"_4L7iXXzLr5k-","filtering":"Kkp-IYmwq-s-","filteringSpinner":"m-eCShL7TU4-"};
|
|
59
|
+
styleInject_es.styleInject(css_248z$e);
|
|
57
60
|
|
|
58
|
-
var css_248z$
|
|
59
|
-
var styles$
|
|
60
|
-
styleInject_es.styleInject(css_248z$
|
|
61
|
+
var css_248z$d = ".F56prQsXm3A- {\n min-width: 80px;\n margin-left: calc(16px / 2);\n margin-left: var(--space-small);\n}\n";
|
|
62
|
+
var styles$d = {"results":"F56prQsXm3A-"};
|
|
63
|
+
styleInject_es.styleInject(css_248z$d);
|
|
61
64
|
|
|
62
65
|
const DATALIST_TOTALCOUNT_TEST_ID = "ATL-DataList-TotalCount";
|
|
63
66
|
function DataListTotalCount({ totalCount, loading, }) {
|
|
@@ -73,12 +76,12 @@ function DataListTotalCount({ totalCount, loading, }) {
|
|
|
73
76
|
totalCount.toLocaleString(),
|
|
74
77
|
" results)"));
|
|
75
78
|
}
|
|
76
|
-
return (React__default["default"].createElement("div", { className: styles$
|
|
79
|
+
return (React__default["default"].createElement("div", { className: styles$d.results, "data-testid": DATALIST_TOTALCOUNT_TEST_ID }, output));
|
|
77
80
|
}
|
|
78
81
|
|
|
79
|
-
var css_248z$
|
|
80
|
-
var styles$
|
|
81
|
-
styleInject_es.styleInject(css_248z$
|
|
82
|
+
var css_248z$c = ".Rh--6fVpkm4- {\n padding: calc(16px / 2);\n padding: var(--space-small);\n}\n\n.zbS7UvpVoWI- {\n display: -ms-flexbox;\n display: flex;\n -ms-flex-direction: column;\n flex-direction: column;\n -ms-flex-pack: justify;\n justify-content: space-between;\n height: calc(16px * 3);\n height: var(--space-largest);\n padding: calc(16px * 1) 0;\n padding: var(--space-base) 0;\n}\n";
|
|
83
|
+
var styles$c = {"loadingItem":"Rh--6fVpkm4-","mobileLoadingState":"zbS7UvpVoWI-"};
|
|
84
|
+
styleInject_es.styleInject(css_248z$c);
|
|
82
85
|
|
|
83
86
|
const EMPTY_RESULTS_MESSAGE = "List is looking empty";
|
|
84
87
|
const EMPTY_FILTER_RESULTS_MESSAGE = "No results for selected filters";
|
|
@@ -101,9 +104,9 @@ const DATA_LOAD_MORE_TEST_ID = "ATL-DataList-LoadMore-trigger";
|
|
|
101
104
|
const TRANSITION_DURATION_IN_SECONDS = design.tokens["timing-base"] / 1000;
|
|
102
105
|
const TRANSITION_DELAY_IN_SECONDS = design.tokens["timing-quick"] / 1000;
|
|
103
106
|
|
|
104
|
-
var css_248z$
|
|
105
|
-
var styles$
|
|
106
|
-
styleInject_es.styleInject(css_248z$
|
|
107
|
+
var css_248z$b = ".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}\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";
|
|
108
|
+
var styles$b = {"tags":"WRV-UmQmPzo-","tagCount":"liQeWCMenD0-"};
|
|
109
|
+
styleInject_es.styleInject(css_248z$b);
|
|
107
110
|
|
|
108
111
|
function DataListTags({ items }) {
|
|
109
112
|
const ref = React.useRef(null);
|
|
@@ -123,10 +126,10 @@ function DataListTags({ items }) {
|
|
|
123
126
|
elements === null || elements === void 0 ? void 0 : elements.forEach(element => observer.unobserve(element));
|
|
124
127
|
};
|
|
125
128
|
}, [items]);
|
|
126
|
-
return (React__default["default"].createElement("div", { className: styles$
|
|
129
|
+
return (React__default["default"].createElement("div", { className: styles$b.tags, ref: ref },
|
|
127
130
|
items.filter(Boolean).map((tag, index) => (React__default["default"].createElement("div", { key: tag, "data-tag-element": index },
|
|
128
131
|
React__default["default"].createElement(InlineLabel.InlineLabel, null, tag)))),
|
|
129
|
-
Boolean(visibleItems) && (React__default["default"].createElement("div", { className: styles$
|
|
132
|
+
Boolean(visibleItems) && (React__default["default"].createElement("div", { className: styles$b.tagCount },
|
|
130
133
|
React__default["default"].createElement(Text.Text, null,
|
|
131
134
|
"+",
|
|
132
135
|
visibleItems)))));
|
|
@@ -155,33 +158,33 @@ function buildIntersectionThreshold(items) {
|
|
|
155
158
|
return thresholds;
|
|
156
159
|
}
|
|
157
160
|
|
|
158
|
-
var css_248z$
|
|
159
|
-
var styles$
|
|
160
|
-
styleInject_es.styleInject(css_248z$
|
|
161
|
+
var css_248z$a = ".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";
|
|
162
|
+
var styles$a = {"headerLabel":"fLmJZJJqMcE-","sortable":"UG8cHUT3Hds-"};
|
|
163
|
+
styleInject_es.styleInject(css_248z$a);
|
|
161
164
|
|
|
162
|
-
var css_248z$
|
|
163
|
-
var styles$
|
|
164
|
-
styleInject_es.styleInject(css_248z$
|
|
165
|
+
var css_248z$9 = ".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";
|
|
166
|
+
var styles$9 = {"sortIcon":"AN5egORYy-0-","active":"F1uTDCK0Sb0-","inactive":"_6KYeQXWXLQ8-"};
|
|
167
|
+
styleInject_es.styleInject(css_248z$9);
|
|
165
168
|
|
|
166
169
|
const SORTING_ICON_TEST_ID = "ATL-DataList-Sorting-Icon";
|
|
167
170
|
function DataListSortingArrows({ order }) {
|
|
168
|
-
return (React__default["default"].createElement("div", { className: styles$
|
|
171
|
+
return (React__default["default"].createElement("div", { className: styles$9.sortIcon, "data-testid": SORTING_ICON_TEST_ID },
|
|
169
172
|
React__default["default"].createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
|
|
170
173
|
React__default["default"].createElement("path", { className: getActiveClassName("asc"), d: "M16.2929 10.6661C15.9024 11.0566 15.2692 11.0566 14.8787 10.6661L12.2891 8.14263L9.70711 10.6661C9.31658 11.0566 8.68342 11.0566 8.29289 10.6661C7.90237 10.2756 7.90237 9.64239 8.29289 9.25186L11.5858 5.95897C11.9763 5.56845 12.6095 5.56845 13 5.95897L16.2929 9.25186C16.6834 9.64239 16.6834 10.2756 16.2929 10.6661Z" }),
|
|
171
174
|
React__default["default"].createElement("path", { className: getActiveClassName("desc"), d: "M8.29292 13.3339C8.68345 12.9434 9.31661 12.9434 9.70714 13.3339L12.2968 15.8573L14.8787 13.3339C15.2692 12.9434 15.9024 12.9434 16.2929 13.3339C16.6834 13.7244 16.6834 14.3576 16.2929 14.7481L13 18.041C12.6095 18.4315 11.9763 18.4315 11.5858 18.041L8.29292 14.7481C7.9024 14.3576 7.9024 13.7244 8.29292 13.3339Z" }))));
|
|
172
175
|
function getActiveClassName(targetOrder) {
|
|
173
|
-
return order === targetOrder ? styles$
|
|
176
|
+
return order === targetOrder ? styles$9.active : styles$9.inactive;
|
|
174
177
|
}
|
|
175
178
|
}
|
|
176
179
|
|
|
177
|
-
const defaultValues = {
|
|
180
|
+
const defaultValues$1 = {
|
|
178
181
|
title: "",
|
|
179
182
|
data: [],
|
|
180
183
|
headers: {},
|
|
181
184
|
children: [],
|
|
182
185
|
selected: [],
|
|
183
186
|
};
|
|
184
|
-
const DataListContext = React.createContext(defaultValues);
|
|
187
|
+
const DataListContext = React.createContext(defaultValues$1);
|
|
185
188
|
function useDataListContext() {
|
|
186
189
|
return React.useContext(DataListContext);
|
|
187
190
|
}
|
|
@@ -191,8 +194,8 @@ function DataListHeaderTile({ headers, headerKey, }) {
|
|
|
191
194
|
const isSortable = sorting === null || sorting === void 0 ? void 0 : sorting.sortable.includes(headerKey);
|
|
192
195
|
const sortingState = sorting === null || sorting === void 0 ? void 0 : sorting.state;
|
|
193
196
|
const Tag = isSortable ? "button" : "div";
|
|
194
|
-
return (React__default["default"].createElement(Tag, { className: classnames__default["default"](styles$
|
|
195
|
-
[styles$
|
|
197
|
+
return (React__default["default"].createElement(Tag, { className: classnames__default["default"](styles$a.headerLabel, {
|
|
198
|
+
[styles$a.sortable]: isSortable,
|
|
196
199
|
}), onClick: handleOnClick },
|
|
197
200
|
React__default["default"].createElement(Text.Text, { maxLines: "single" }, headers[headerKey]),
|
|
198
201
|
(sortingState === null || sortingState === void 0 ? void 0 : sortingState.key) === headerKey && (React__default["default"].createElement(DataListSortingArrows, { order: sortingState.order }))));
|
|
@@ -304,8 +307,8 @@ function isLayoutVisible({ layoutSize, mediaMatches, sizePropsOfLayouts, }) {
|
|
|
304
307
|
function DataListItemInternal({ children, item, }) {
|
|
305
308
|
const { selected, onSelect } = useDataListContext();
|
|
306
309
|
if (selected !== undefined && onSelect) {
|
|
307
|
-
return (React__default["default"].createElement("div", { className: classnames__default["default"](styles$
|
|
308
|
-
[styles$
|
|
310
|
+
return (React__default["default"].createElement("div", { className: classnames__default["default"](styles$e.selectable, {
|
|
311
|
+
[styles$e.selected]: selected === null || selected === void 0 ? void 0 : selected.length,
|
|
309
312
|
}) },
|
|
310
313
|
React__default["default"].createElement(Checkbox.Checkbox, { checked: selected === null || selected === void 0 ? void 0 : selected.includes(item.id), onChange: handleChange }),
|
|
311
314
|
children));
|
|
@@ -321,13 +324,13 @@ function DataListItemInternal({ children, item, }) {
|
|
|
321
324
|
}
|
|
322
325
|
}
|
|
323
326
|
|
|
324
|
-
var css_248z$
|
|
325
|
-
var styles$
|
|
326
|
-
styleInject_es.styleInject(css_248z$
|
|
327
|
+
var css_248z$8 = ".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";
|
|
328
|
+
var styles$8 = {"menu":"jHcHGQ-HDbk-"};
|
|
329
|
+
styleInject_es.styleInject(css_248z$8);
|
|
327
330
|
|
|
328
|
-
var css_248z$
|
|
329
|
-
var styles$
|
|
330
|
-
styleInject_es.styleInject(css_248z$
|
|
331
|
+
var css_248z$7 = ".iyg43v-S9yU- {\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n min-height: 44px;\n padding: calc(16px / 2);\n padding: var(--space-small);\n border: none;\n border-radius: 0;\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 text-align: left;\n background: none;\n cursor: pointer;\n transition: background 200ms ease;\n transition: background var(--timing-base) ease;\n -webkit-appearance: none;\n appearance: none;\n -ms-flex-align: center;\n align-items: center;\n gap: calc(16px / 2);\n gap: var(--space-small);\n}\n\n.iyg43v-S9yU-:hover,\n.iyg43v-S9yU-:focus {\n background-color: rgb(250, 246, 219);\n background-color: var(--color-surface--hover);\n}\n\n.AUJNqz93ZDA- {\n font-weight: 500;\n}\n";
|
|
332
|
+
var styles$7 = {"action":"iyg43v-S9yU-","label":"AUJNqz93ZDA-"};
|
|
333
|
+
styleInject_es.styleInject(css_248z$7);
|
|
331
334
|
|
|
332
335
|
function DataListAction(
|
|
333
336
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
@@ -336,15 +339,15 @@ _) {
|
|
|
336
339
|
}
|
|
337
340
|
function InternalDataListAction({ label, icon, destructive, onClick, item, }) {
|
|
338
341
|
const color = destructive ? "critical" : "blue";
|
|
339
|
-
return (React__default["default"].createElement("button", { className: styles$
|
|
342
|
+
return (React__default["default"].createElement("button", { className: styles$7.action, onClick: () => onClick === null || onClick === void 0 ? void 0 : onClick(item) },
|
|
340
343
|
icon && React__default["default"].createElement(Icon.Icon, { name: icon, color: color }),
|
|
341
344
|
React__default["default"].createElement(Typography.Typography, { textColor: color },
|
|
342
|
-
React__default["default"].createElement("span", { className: styles$
|
|
345
|
+
React__default["default"].createElement("span", { className: styles$7.label }, label))));
|
|
343
346
|
}
|
|
344
347
|
|
|
345
|
-
var css_248z$
|
|
346
|
-
var styles$
|
|
347
|
-
styleInject_es.styleInject(css_248z$
|
|
348
|
+
var css_248z$6 = ".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: 6;\n z-index: var(--elevation-menu);\n width: 100%;\n height: 100%;\n}\n";
|
|
349
|
+
var styles$6 = {"menu":"aokwZU8jbWU-","overlay":"XtVRP97TVSE-"};
|
|
350
|
+
styleInject_es.styleInject(css_248z$6);
|
|
348
351
|
|
|
349
352
|
const variants$1 = {
|
|
350
353
|
hidden: { opacity: 0, y: -10 },
|
|
@@ -355,10 +358,10 @@ function DataListActionsMenu({ visible = false, position, onRequestClose, childr
|
|
|
355
358
|
useRefocusOnActivator.useRefocusOnActivator(visible);
|
|
356
359
|
const focusTrapRef = useFocusTrap.useFocusTrap(visible);
|
|
357
360
|
useOnKeyDown.useOnKeyDown(onRequestClose, "Escape");
|
|
358
|
-
return (React__default["default"].createElement(framerMotion.AnimatePresence, null, visible && (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
359
|
-
React__default["default"].createElement("div", { className: styles$
|
|
360
|
-
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$
|
|
361
|
-
React__default["default"].createElement("div", { tabIndex: 0, ref: focusTrapRef }, children))))));
|
|
361
|
+
return ReactDOM.createPortal(React__default["default"].createElement(framerMotion.AnimatePresence, null, visible && (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
362
|
+
React__default["default"].createElement("div", { className: styles$6.overlay, onClick: onRequestClose }),
|
|
363
|
+
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$6.menu, style: getPositionCssVars(), onClick: onRequestClose },
|
|
364
|
+
React__default["default"].createElement("div", { tabIndex: 0, ref: focusTrapRef }, children))))), document.body);
|
|
362
365
|
function getPositionCssVars() {
|
|
363
366
|
const { posX, posY } = getPosition();
|
|
364
367
|
return {
|
|
@@ -372,8 +375,9 @@ function DataListActionsMenu({ visible = false, position, onRequestClose, childr
|
|
|
372
375
|
const { x = 0, y = 0 } = position;
|
|
373
376
|
const xIsOffScreen = x + width > window.innerWidth;
|
|
374
377
|
const yIsOffScreen = y + height > window.innerHeight;
|
|
378
|
+
const xOffSet = x + width - window.innerWidth + foundation.tokens["space-base"];
|
|
375
379
|
const yOffSet = y + height - window.innerHeight;
|
|
376
|
-
const newPosX = Math.floor(xIsOffScreen ? x -
|
|
380
|
+
const newPosX = Math.floor(xIsOffScreen ? x - xOffSet : x);
|
|
377
381
|
const newPosY = Math.floor(yIsOffScreen ? y - yOffSet : y);
|
|
378
382
|
return { posX: newPosX, posY: newPosY };
|
|
379
383
|
}
|
|
@@ -385,11 +389,11 @@ function DataListItemActionsOverflow({ item, actions, }) {
|
|
|
385
389
|
return (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
386
390
|
React__default["default"].createElement(Tooltip.Tooltip, { message: "More actions" },
|
|
387
391
|
React__default["default"].createElement(Button.Button, { icon: "more", ariaLabel: "More actions", type: "secondary", variation: "subtle", onClick: handleMoreClick })),
|
|
388
|
-
React__default["default"].createElement(DataListActionsMenu, { visible: showMenu, position: menuPosition, onRequestClose: handleClose }, React.Children.map(actions, action => (React__default["default"].createElement(InternalDataListAction, Object.assign({}, action.props, { item: item })))))));
|
|
392
|
+
item && (React__default["default"].createElement(DataListActionsMenu, { visible: showMenu, position: menuPosition, onRequestClose: handleClose }, React.Children.map(actions, action => (React__default["default"].createElement(InternalDataListAction, Object.assign({}, action.props, { item: item }))))))));
|
|
389
393
|
function handleMoreClick(event) {
|
|
390
394
|
setShowMenu(true);
|
|
391
395
|
const rect = event.currentTarget.getBoundingClientRect();
|
|
392
|
-
const posX = rect.x
|
|
396
|
+
const posX = rect.x;
|
|
393
397
|
const posY = rect.y + rect.height;
|
|
394
398
|
setMenuPosition({ x: posX, y: posY });
|
|
395
399
|
}
|
|
@@ -419,7 +423,7 @@ function InternalDataListItemActions({ item, }) {
|
|
|
419
423
|
return (React__default["default"].createElement(framerMotion.motion.div, { variants: variants, initial: "hidden", animate: "visible", exit: "hidden", transition: {
|
|
420
424
|
duration: TRANSITION_DURATION_IN_SECONDS,
|
|
421
425
|
delay: TRANSITION_DELAY_IN_SECONDS,
|
|
422
|
-
}, className: styles$
|
|
426
|
+
}, className: styles$8.menu, onContextMenu: handleContextMenu },
|
|
423
427
|
exposedActions.map(({ props }) => {
|
|
424
428
|
if (!props.icon)
|
|
425
429
|
return null;
|
|
@@ -448,31 +452,58 @@ function getExposedActions(childrenArray) {
|
|
|
448
452
|
}, []);
|
|
449
453
|
}
|
|
450
454
|
|
|
455
|
+
const defaultValues = {
|
|
456
|
+
isInLayoutProvider: false,
|
|
457
|
+
hasInLayoutActions: false,
|
|
458
|
+
setHasInLayoutActions: noop__default["default"],
|
|
459
|
+
};
|
|
460
|
+
const DataListLayoutContext = React.createContext(defaultValues);
|
|
461
|
+
function useDataListLayoutContext() {
|
|
462
|
+
return React.useContext(DataListLayoutContext);
|
|
463
|
+
}
|
|
464
|
+
|
|
451
465
|
function DataListItems({ layouts, mediaMatches, data, }) {
|
|
452
466
|
const { itemActionComponent } = useDataListContext();
|
|
453
467
|
const elementData = React.useMemo(() => generateListItemElements(data), [data]);
|
|
468
|
+
const [hasInLayoutActions, setHasInLayoutActions] = React.useState(false);
|
|
454
469
|
const [activeID, setActiveID] = React.useState();
|
|
470
|
+
const [activeItem, setActiveItem] = React.useState();
|
|
455
471
|
const [contextPosition, setContextPosition] = React.useState();
|
|
456
472
|
const contextMenuActions = itemActionComponent === null || itemActionComponent === void 0 ? void 0 : itemActionComponent.props.children;
|
|
457
473
|
const isContextMenuVisible = Boolean(contextPosition);
|
|
458
|
-
return (React__default["default"].createElement(
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
474
|
+
return (React__default["default"].createElement(DataListLayoutContext.Provider, { value: {
|
|
475
|
+
isInLayoutProvider: true,
|
|
476
|
+
hasInLayoutActions,
|
|
477
|
+
setHasInLayoutActions,
|
|
478
|
+
activeItem,
|
|
479
|
+
} },
|
|
480
|
+
React__default["default"].createElement(DataListLayoutInternal, { layouts: layouts, mediaMatches: mediaMatches, renderLayout: layout => (React__default["default"].createElement(React__default["default"].Fragment, null, elementData.map((child, i) => {
|
|
481
|
+
const item = data[i];
|
|
482
|
+
const isActive = activeID === item.id;
|
|
483
|
+
const shouldShowContextMenu = isActive && isContextMenuVisible && Boolean(contextMenuActions);
|
|
484
|
+
return (React__default["default"].createElement("div", {
|
|
485
|
+
// Set the active item whenever the element or any of its
|
|
486
|
+
// children are clicked
|
|
487
|
+
onClick: handleSetActiveItem(item), onMouseEnter: handleSetActiveItem(item), onMouseLeave: handleUnsetActiveItem, onContextMenu: handleContextMenu, className: classnames__default["default"](styles$e.listItem, {
|
|
488
|
+
[styles$e.active]: isActive && isContextMenuVisible,
|
|
489
|
+
}), key: item.id },
|
|
490
|
+
React__default["default"].createElement(DataListItemInternal, { item: data[i] }, layout.props.children(child)),
|
|
491
|
+
React__default["default"].createElement(framerMotion.AnimatePresence, null,
|
|
492
|
+
activeID === item.id && !hasInLayoutActions && (React__default["default"].createElement(InternalDataListItemActions, { item: item })),
|
|
493
|
+
React__default["default"].createElement(DataListActionsMenu, { key: item.id, visible: shouldShowContextMenu, position: contextPosition || { x: 0, y: 0 }, onRequestClose: () => setContextPosition(undefined) }, contextMenuActions &&
|
|
494
|
+
React.Children.map(contextMenuActions, action => (React__default["default"].createElement(InternalDataListAction, Object.assign({ key: item.id }, action.props, { item: item }))))))));
|
|
495
|
+
}))) })));
|
|
496
|
+
function handleSetActiveItem(item) {
|
|
497
|
+
return () => {
|
|
498
|
+
setActiveID(item.id);
|
|
499
|
+
setActiveItem(item);
|
|
500
|
+
};
|
|
473
501
|
}
|
|
474
|
-
function
|
|
475
|
-
|
|
502
|
+
function handleUnsetActiveItem() {
|
|
503
|
+
if (isContextMenuVisible)
|
|
504
|
+
return;
|
|
505
|
+
setActiveID(undefined);
|
|
506
|
+
setActiveItem(undefined);
|
|
476
507
|
}
|
|
477
508
|
function handleContextMenu(event) {
|
|
478
509
|
if (!contextMenuActions || isContextMenuVisible)
|
|
@@ -489,12 +520,12 @@ function DataListHeaderCheckbox({ children }) {
|
|
|
489
520
|
const { data, totalCount, selected = [], onSelectAll, onSelect, } = useDataListContext();
|
|
490
521
|
if (!onSelectAll && !onSelect)
|
|
491
522
|
return children;
|
|
492
|
-
return (React__default["default"].createElement("div", { className: classnames__default["default"](styles$
|
|
493
|
-
React__default["default"].createElement("div", { className: classnames__default["default"](styles$
|
|
494
|
-
[styles$
|
|
523
|
+
return (React__default["default"].createElement("div", { className: classnames__default["default"](styles$e.selectable) },
|
|
524
|
+
React__default["default"].createElement("div", { className: classnames__default["default"](styles$e.selectAllCheckbox, {
|
|
525
|
+
[styles$e.visible]: Boolean(onSelectAll),
|
|
495
526
|
}) },
|
|
496
527
|
React__default["default"].createElement(Checkbox.Checkbox, { checked: isAllSelected(), indeterminate: selected.length > 0 && !isAllSelected(), onChange: onSelectAll })),
|
|
497
|
-
React__default["default"].createElement(AnimatedSwitcher.AnimatedSwitcher, { switched: Boolean(selected.length), initialChild: children, switchTo: React__default["default"].createElement("div", { className: styles$
|
|
528
|
+
React__default["default"].createElement(AnimatedSwitcher.AnimatedSwitcher, { switched: Boolean(selected.length), initialChild: children, switchTo: React__default["default"].createElement("div", { className: styles$e.headerBatchSelect },
|
|
498
529
|
React__default["default"].createElement(Text.Text, null,
|
|
499
530
|
React__default["default"].createElement("b", null,
|
|
500
531
|
selected.length,
|
|
@@ -555,7 +586,7 @@ function DataListHeader({ layouts, mediaMatches, headerData, }) {
|
|
|
555
586
|
const showHeader = useShowHeader();
|
|
556
587
|
if (!showHeader || !headerData)
|
|
557
588
|
return null;
|
|
558
|
-
return (React__default["default"].createElement(DataListLayoutInternal, { layouts: layouts, mediaMatches: mediaMatches, renderLayout: layout => (React__default["default"].createElement("div", { className: classnames__default["default"](styles$
|
|
589
|
+
return (React__default["default"].createElement(DataListLayoutInternal, { layouts: layouts, mediaMatches: mediaMatches, renderLayout: layout => (React__default["default"].createElement("div", { className: classnames__default["default"](styles$e.headerTitles) },
|
|
559
590
|
React__default["default"].createElement(DataListHeaderCheckbox, null, layout.props.children(headerData)))) }));
|
|
560
591
|
}
|
|
561
592
|
|
|
@@ -571,13 +602,13 @@ function DataListLoadingState({ headers, layouts, mediaMatches, }) {
|
|
|
571
602
|
if (layout.props.size === "xs") {
|
|
572
603
|
return React__default["default"].createElement(LoadingStateXSBreakpoint, null);
|
|
573
604
|
}
|
|
574
|
-
return (React__default["default"].createElement(React__default["default"].Fragment, null, loadingElements.map((child, i) => (React__default["default"].createElement("div", { className: styles$
|
|
605
|
+
return (React__default["default"].createElement(React__default["default"].Fragment, null, loadingElements.map((child, i) => (React__default["default"].createElement("div", { className: styles$c.loadingItem, key: i, "data-testid": DATALIST_LOADINGSTATE_ROW_TEST_ID }, layout.props.children(child))))));
|
|
575
606
|
} }));
|
|
576
607
|
}
|
|
577
608
|
function LoadingStateXSBreakpoint() {
|
|
578
609
|
const loadingData = new Array(LOADING_STATE_LIMIT_ITEMS).fill(0);
|
|
579
610
|
return (React__default["default"].createElement(React__default["default"].Fragment, null, loadingData.map((_, i) => {
|
|
580
|
-
return (React__default["default"].createElement("div", { className: styles$
|
|
611
|
+
return (React__default["default"].createElement("div", { className: styles$c.mobileLoadingState, key: i },
|
|
581
612
|
React__default["default"].createElement(Glimmer.Glimmer.Text, null)));
|
|
582
613
|
})));
|
|
583
614
|
}
|
|
@@ -588,9 +619,9 @@ _) {
|
|
|
588
619
|
return React__default["default"].createElement(React__default["default"].Fragment, null);
|
|
589
620
|
}
|
|
590
621
|
|
|
591
|
-
var css_248z$
|
|
592
|
-
var styles$
|
|
593
|
-
styleInject_es.styleInject(css_248z$
|
|
622
|
+
var css_248z$5 = ".E-mG3prPSN8- {\n -ms-flex-item-align: center;\n align-self: center;\n position: relative;\n min-width: 0;\n}\n\n._0LGNoZxtqSE- {\n display: grid;\n overflow-x: auto;\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._0LGNoZxtqSE- > :nth-child(n + 3):not(:last-child) {\n margin-left: calc(16px / 2);\n margin-left: var(--space-small);\n}\n\n.LA3-gtgehrE- {\n visibility: hidden;\n}\n\n.fSPvawYWzZ8-::before,\n.ChfEJMPPVTk-::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-filters-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.fSPvawYWzZ8-::before {\n left: 0;\n}\n\n.ChfEJMPPVTk-::after {\n --data-list-filters-overflow-shadow-angle: to left;\n right: 0;\n}\n";
|
|
623
|
+
var styles$5 = {"filters":"E-mG3prPSN8-","filterActions":"_0LGNoZxtqSE-","overflowTrigger":"LA3-gtgehrE-","overflowLeft":"fSPvawYWzZ8-","overflowRight":"ChfEJMPPVTk-"};
|
|
624
|
+
styleInject_es.styleInject(css_248z$5);
|
|
594
625
|
|
|
595
626
|
const CONTAINER_TEST_ID = "ATL-DataListFilters-Container";
|
|
596
627
|
|
|
@@ -665,20 +696,20 @@ function InternalDataListFilters() {
|
|
|
665
696
|
if (!showSortButton && !component)
|
|
666
697
|
return null;
|
|
667
698
|
const children = component === null || component === void 0 ? void 0 : component.props.children;
|
|
668
|
-
return (React__default["default"].createElement("div", { "data-testid": CONTAINER_TEST_ID, className: classnames__default["default"](styles$
|
|
669
|
-
[styles$
|
|
670
|
-
[styles$
|
|
699
|
+
return (React__default["default"].createElement("div", { "data-testid": CONTAINER_TEST_ID, className: classnames__default["default"](styles$5.filters, {
|
|
700
|
+
[styles$5.overflowLeft]: !isLeftVisible,
|
|
701
|
+
[styles$5.overflowRight]: !isRightVisible,
|
|
671
702
|
}) },
|
|
672
|
-
React__default["default"].createElement("div", { className: styles$
|
|
673
|
-
React__default["default"].createElement("span", { ref: leftRef, className: styles$
|
|
703
|
+
React__default["default"].createElement("div", { className: styles$5.filterActions },
|
|
704
|
+
React__default["default"].createElement("span", { ref: leftRef, className: styles$5.overflowTrigger }),
|
|
674
705
|
children && children,
|
|
675
706
|
showSortButton && React__default["default"].createElement(DataListSort, null),
|
|
676
|
-
React__default["default"].createElement("span", { ref: rightRef, className: styles$
|
|
707
|
+
React__default["default"].createElement("span", { ref: rightRef, className: styles$5.overflowTrigger }))));
|
|
677
708
|
}
|
|
678
709
|
|
|
679
|
-
var css_248z$
|
|
680
|
-
var styles$
|
|
681
|
-
styleInject_es.styleInject(css_248z$
|
|
710
|
+
var css_248z$4 = ".PGOHzrMh374- {\n --offset: 1px;\n --sticky-header-transition-properties: var(--timing-base) ease-in-out;\n\n position: sticky;\n top: calc(1px * -1);\n top: calc(var(--offset) * -1);\n z-index: 1;\n z-index: var(--elevation-base);\n padding-top: 1px;\n padding-top: var(--offset);\n background-color: rgba(255, 255, 255, 1);\n background-color: var(--color-surface);\n}\n\n/**\n * Draw a border that gets covered by the column headers border when it shows up.\n *\n * Mostly to prevent us from writing some complex JS to remove the border when\n * the column headers show up.\n */\n\n.PGOHzrMh374-::before {\n content: \"\";\n display: block;\n position: absolute;\n bottom: 0;\n left: 50%;\n z-index: -1;\n width: 0;\n height: 0;\n background-color: rgb(225, 225, 225);\n background-color: var(--color-border);\n -webkit-transform: translateX(-50%);\n transform: translateX(-50%);\n transition: height var(--sticky-header-transition-properties)\n 100ms,\n width var(--sticky-header-transition-properties);\n transition: height var(--sticky-header-transition-properties)\n var(--timing-quick),\n width var(--sticky-header-transition-properties);\n}\n\n.PGjWc5ocjpI-::before {\n width: 100%;\n height: calc(16px / 8);\n height: var(--border-thick);\n transition: height var(--sticky-header-transition-properties),\n width var(--sticky-header-transition-properties) 100ms;\n transition: height var(--sticky-header-transition-properties),\n width var(--sticky-header-transition-properties) var(--timing-quick);\n}\n";
|
|
711
|
+
var styles$4 = {"header":"PGOHzrMh374-","stuck":"PGjWc5ocjpI-"};
|
|
712
|
+
styleInject_es.styleInject(css_248z$4);
|
|
682
713
|
|
|
683
714
|
function DataListStickyHeader({ children }) {
|
|
684
715
|
const [isStuck, setIsStuck] = React.useState(false);
|
|
@@ -693,12 +724,12 @@ function DataListStickyHeader({ children }) {
|
|
|
693
724
|
ref.current && observer.unobserve(ref.current);
|
|
694
725
|
};
|
|
695
726
|
}, [handleObserver, ref.current]);
|
|
696
|
-
return (React__default["default"].createElement("div", { ref: ref, className: classnames__default["default"](styles$
|
|
727
|
+
return (React__default["default"].createElement("div", { ref: ref, className: classnames__default["default"](styles$4.header, { [styles$4.stuck]: isStuck }) }, children));
|
|
697
728
|
}
|
|
698
729
|
|
|
699
|
-
var css_248z$
|
|
700
|
-
var styles$
|
|
701
|
-
styleInject_es.styleInject(css_248z$
|
|
730
|
+
var css_248z$3 = ".SaPMOnvw-3c- {\n --transition-properties: var(--timing-base) ease-in-out;\n --button-offset: calc(var(--space-largest) - var(--space-smallest));\n\n position: absolute;\n /* Inputs are off by 1 when put beside a button */\n top: calc((16px / 2) + 1px);\n top: calc(calc(16px / 2) + 1px);\n top: calc(var(--space-small) + 1px);\n right: calc((16px * 3) - (16px / 8));\n right: calc(calc(16px * 3) - calc(16px / 8));\n right: var(--button-offset);\n visibility: hidden;\n width: 0;\n opacity: 0;\n transition: opacity 200ms ease-in-out,\n width 200ms ease-in-out, visibility 200ms ease-in-out;\n transition: opacity var(--transition-properties),\n width var(--transition-properties), visibility var(--transition-properties);\n}\n\n._3S1-91v2SYI- {\n visibility: visible;\n width: calc(100% - var(--button-offset));\n opacity: 1;\n}\n\n@media (min-width: 768px) {\n\n.SaPMOnvw-3c-,\n._3S1-91v2SYI- {\n position: static;\n visibility: visible;\n width: auto;\n opacity: 1;\n transition: none;\n}\n }\n\n@media (--medium-screens-and-up) {\n\n.SaPMOnvw-3c-,\n._3S1-91v2SYI- {\n position: static;\n visibility: visible;\n width: auto;\n opacity: 1;\n transition: none;\n}\n }\n\n._9GlBktsUALw- {\n display: block;\n}\n\n@media (min-width: 768px) {\n\n._9GlBktsUALw- {\n display: none;\n}\n }\n\n@media (--medium-screens-and-up) {\n\n._9GlBktsUALw- {\n display: none;\n}\n }\n\n/*\n * No Filters Styling\n *\n * When there are no filters, the search input is always visible.\n * ------------------------------------------------------------------------- */\n\n._3Pjrt42x454- .SaPMOnvw-3c- {\n position: static;\n visibility: visible;\n width: auto;\n opacity: 1;\n transition: none;\n}\n\n@media (min-width: 768px) {\n\n._3Pjrt42x454- .SaPMOnvw-3c- {\n max-width: 30%;\n}\n }\n\n@media (--medium-screens-and-up) {\n\n._3Pjrt42x454- .SaPMOnvw-3c- {\n max-width: 30%;\n}\n }\n\n._3Pjrt42x454- ._9GlBktsUALw- {\n display: none;\n}\n";
|
|
731
|
+
var styles$3 = {"searchInput":"SaPMOnvw-3c-","searchInputVisible":"_3S1-91v2SYI-","searchButton":"_9GlBktsUALw-","withNoFilters":"_3Pjrt42x454-"};
|
|
732
|
+
styleInject_es.styleInject(css_248z$3);
|
|
702
733
|
|
|
703
734
|
const DATA_LIST_SEARCH_TEST_ID = "ATL-DataList-Search-input-wrapper";
|
|
704
735
|
// This component is meant to capture the props of the DataList.Search
|
|
@@ -718,13 +749,13 @@ function InternalDataListSearch() {
|
|
|
718
749
|
return null;
|
|
719
750
|
const { placeholder } = searchComponent.props;
|
|
720
751
|
return (React__default["default"].createElement("div", { className: classnames__default["default"]({
|
|
721
|
-
[styles$
|
|
752
|
+
[styles$3.withNoFilters]: !filterComponent && !sorting,
|
|
722
753
|
}) },
|
|
723
|
-
React__default["default"].createElement("div", { "data-testid": DATA_LIST_SEARCH_TEST_ID, className: classnames__default["default"](styles$
|
|
724
|
-
[styles$
|
|
754
|
+
React__default["default"].createElement("div", { "data-testid": DATA_LIST_SEARCH_TEST_ID, className: classnames__default["default"](styles$3.searchInput, {
|
|
755
|
+
[styles$3.searchInputVisible]: visible,
|
|
725
756
|
}) },
|
|
726
757
|
React__default["default"].createElement(InputText.InputText, { ref: inputRef, placeholder: getPlaceholder(), onChange: debouncedSearch, prefix: { icon: "search" }, size: "small" })),
|
|
727
|
-
React__default["default"].createElement("div", { className: styles$
|
|
758
|
+
React__default["default"].createElement("div", { className: styles$3.searchButton },
|
|
728
759
|
React__default["default"].createElement(AnimatedSwitcher.AnimatedSwitcher, { switched: visible, initialChild: React__default["default"].createElement(Button.Button, { variation: "subtle", icon: "search", ariaLabel: "Search", onClick: toggleSearch }), switchTo: React__default["default"].createElement(Button.Button, { variation: "subtle", icon: "remove", ariaLabel: "Close search bar", onClick: toggleSearch }) }))));
|
|
729
760
|
function getPlaceholder() {
|
|
730
761
|
if (placeholder)
|
|
@@ -742,9 +773,9 @@ function InternalDataListSearch() {
|
|
|
742
773
|
}
|
|
743
774
|
}
|
|
744
775
|
|
|
745
|
-
var css_248z$
|
|
746
|
-
var styles$
|
|
747
|
-
styleInject_es.styleInject(css_248z$
|
|
776
|
+
var css_248z$2 = ".zg3w9nQga-M- {\n display: -ms-flexbox;\n display: flex;\n box-sizing: border-box;\n padding: calc(16px * 1);\n padding: var(--space-base);\n -ms-flex-pack: center;\n justify-content: center;\n -ms-flex-direction: column;\n flex-direction: column;\n row-gap: calc(16px * 1);\n row-gap: var(--space-base);\n -ms-flex-align: center;\n align-items: center;\n -ms-flex: 1;\n flex: 1;\n}\n";
|
|
777
|
+
var styles$2 = {"emptyStateWrapper":"zg3w9nQga-M-"};
|
|
778
|
+
styleInject_es.styleInject(css_248z$2);
|
|
748
779
|
|
|
749
780
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
750
781
|
function DataListEmptyState(_) {
|
|
@@ -753,7 +784,7 @@ function DataListEmptyState(_) {
|
|
|
753
784
|
function InternalDataListEmptyState() {
|
|
754
785
|
const { emptyStateComponents: components, filtered } = React.useContext(DataListContext);
|
|
755
786
|
const { message, action } = getMessages();
|
|
756
|
-
return (React__default["default"].createElement("div", { className: styles$
|
|
787
|
+
return (React__default["default"].createElement("div", { className: styles$2.emptyStateWrapper },
|
|
757
788
|
React__default["default"].createElement(Text.Text, { align: "center" }, message),
|
|
758
789
|
renderButton(action)));
|
|
759
790
|
function getMessages() {
|
|
@@ -787,9 +818,9 @@ function getEmptyStates(components) {
|
|
|
787
818
|
return { defaultEmptyState, filteredEmptyState };
|
|
788
819
|
}
|
|
789
820
|
|
|
790
|
-
var css_248z = ".IC-Y9bTIVFo- {\n position: relative;\n -webkit-transform: translateY(calc((16px * 3) * -1));\n -webkit-transform: translateY(calc(calc(16px * 3) * -1));\n -webkit-transform: translateY(calc(var(--space-largest) * -1));\n transform: translateY(calc((16px * 3) * -1));\n transform: translateY(calc(calc(16px * 3) * -1));\n transform: translateY(calc(var(--space-largest) * -1));\n}\n\n.PbZLGpbI6ZM-,\n._6zA6B-jmz6o- {\n display: -ms-flexbox;\n display: flex;\n -ms-flex-pack: center;\n justify-content: center;\n padding: calc(16px / 2);\n padding: var(--space-small);\n}\n\n._6zA6B-jmz6o- {\n opacity: 0;\n -webkit-animation: gZ4DUv82g5I- 200ms ease 200ms forwards;\n -webkit-animation: gZ4DUv82g5I- var(--timing-base) ease var(--timing-base) forwards;\n animation: gZ4DUv82g5I- 200ms ease 200ms forwards;\n animation: gZ4DUv82g5I- var(--timing-base) ease var(--timing-base) forwards;\n}\n\n@-webkit-keyframes gZ4DUv82g5I- {\n from {\n opacity: 0;\n }\n\n to {\n opacity: 1;\n }\n}\n\n@keyframes gZ4DUv82g5I- {\n from {\n opacity: 0;\n }\n\n to {\n opacity: 1;\n }\n}\n";
|
|
791
|
-
var styles = {"trigger":"IC-Y9bTIVFo-","loadingMore":"PbZLGpbI6ZM-","backToTop":"_6zA6B-jmz6o-","fadeIn":"gZ4DUv82g5I-"};
|
|
792
|
-
styleInject_es.styleInject(css_248z);
|
|
821
|
+
var css_248z$1 = ".IC-Y9bTIVFo- {\n position: relative;\n -webkit-transform: translateY(calc((16px * 3) * -1));\n -webkit-transform: translateY(calc(calc(16px * 3) * -1));\n -webkit-transform: translateY(calc(var(--space-largest) * -1));\n transform: translateY(calc((16px * 3) * -1));\n transform: translateY(calc(calc(16px * 3) * -1));\n transform: translateY(calc(var(--space-largest) * -1));\n}\n\n.PbZLGpbI6ZM-,\n._6zA6B-jmz6o- {\n display: -ms-flexbox;\n display: flex;\n -ms-flex-pack: center;\n justify-content: center;\n padding: calc(16px / 2);\n padding: var(--space-small);\n}\n\n._6zA6B-jmz6o- {\n opacity: 0;\n -webkit-animation: gZ4DUv82g5I- 200ms ease 200ms forwards;\n -webkit-animation: gZ4DUv82g5I- var(--timing-base) ease var(--timing-base) forwards;\n animation: gZ4DUv82g5I- 200ms ease 200ms forwards;\n animation: gZ4DUv82g5I- var(--timing-base) ease var(--timing-base) forwards;\n}\n\n@-webkit-keyframes gZ4DUv82g5I- {\n from {\n opacity: 0;\n }\n\n to {\n opacity: 1;\n }\n}\n\n@keyframes gZ4DUv82g5I- {\n from {\n opacity: 0;\n }\n\n to {\n opacity: 1;\n }\n}\n";
|
|
822
|
+
var styles$1 = {"trigger":"IC-Y9bTIVFo-","loadingMore":"PbZLGpbI6ZM-","backToTop":"_6zA6B-jmz6o-","fadeIn":"gZ4DUv82g5I-"};
|
|
823
|
+
styleInject_es.styleInject(css_248z$1);
|
|
793
824
|
|
|
794
825
|
function DataListLoadMoreTrigger() {
|
|
795
826
|
const { onLoadMore } = useDataListContext();
|
|
@@ -797,7 +828,7 @@ function DataListLoadMoreTrigger() {
|
|
|
797
828
|
React.useEffect(() => {
|
|
798
829
|
isInView && (onLoadMore === null || onLoadMore === void 0 ? void 0 : onLoadMore());
|
|
799
830
|
}, [isInView]);
|
|
800
|
-
return (React__default["default"].createElement("div", { ref: inViewRef, className: styles.trigger, "data-testid": DATA_LOAD_MORE_TEST_ID }));
|
|
831
|
+
return (React__default["default"].createElement("div", { ref: inViewRef, className: styles$1.trigger, "data-testid": DATA_LOAD_MORE_TEST_ID }));
|
|
801
832
|
}
|
|
802
833
|
|
|
803
834
|
const MAX_DATA_COUNT = 50;
|
|
@@ -806,12 +837,40 @@ function DataListLoadMore({ onBackToTop }) {
|
|
|
806
837
|
const showBackToTop = data.length > MAX_DATA_COUNT && loadingState !== "loadingMore";
|
|
807
838
|
return (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
808
839
|
React__default["default"].createElement(DataListLoadMoreTrigger, { key: data.length }),
|
|
809
|
-
loadingState === "loadingMore" && (React__default["default"].createElement("div", { "data-testid": DATA_LIST_LOADING_MORE_SPINNER_TEST_ID, className: styles.loadingMore },
|
|
840
|
+
loadingState === "loadingMore" && (React__default["default"].createElement("div", { "data-testid": DATA_LIST_LOADING_MORE_SPINNER_TEST_ID, className: styles$1.loadingMore },
|
|
810
841
|
React__default["default"].createElement(Spinner.Spinner, { size: "small" }))),
|
|
811
|
-
showBackToTop && (React__default["default"].createElement("div", { className: styles.backToTop },
|
|
842
|
+
showBackToTop && (React__default["default"].createElement("div", { className: styles$1.backToTop },
|
|
812
843
|
React__default["default"].createElement(Button.Button, { label: "Back to top", onClick: onBackToTop, size: "small", variation: "subtle" })))));
|
|
813
844
|
}
|
|
814
845
|
|
|
846
|
+
var css_248z = "._0m75bgCVBhk- {\n visibility: hidden;\n}\n";
|
|
847
|
+
var styles = {"hidden":"_0m75bgCVBhk-"};
|
|
848
|
+
styleInject_es.styleInject(css_248z);
|
|
849
|
+
|
|
850
|
+
function DataListLayoutActions() {
|
|
851
|
+
const { itemActionComponent } = useDataListContext();
|
|
852
|
+
const { setHasInLayoutActions, activeItem } = useDataListLayoutContext();
|
|
853
|
+
const { children: actionsChildren } = (itemActionComponent === null || itemActionComponent === void 0 ? void 0 : itemActionComponent.props) || {};
|
|
854
|
+
const actions = React.Children.toArray(actionsChildren);
|
|
855
|
+
const hasActions = actions.length > 0;
|
|
856
|
+
React.useEffect(() => {
|
|
857
|
+
setHasInLayoutActions(hasActions);
|
|
858
|
+
return () => {
|
|
859
|
+
setHasInLayoutActions(false);
|
|
860
|
+
};
|
|
861
|
+
}, []);
|
|
862
|
+
if (!hasActions)
|
|
863
|
+
return null;
|
|
864
|
+
return (React__default["default"].createElement(DataListLayoutActionsWrapper, null,
|
|
865
|
+
React__default["default"].createElement(DataListItemActionsOverflow, { actions: actions, item: activeItem })));
|
|
866
|
+
}
|
|
867
|
+
function DataListLayoutActionsWrapper({ children }) {
|
|
868
|
+
const { isInLayoutProvider } = useDataListLayoutContext();
|
|
869
|
+
if (isInLayoutProvider)
|
|
870
|
+
return React__default["default"].createElement(React__default["default"].Fragment, null, children);
|
|
871
|
+
return React__default["default"].createElement("div", { className: styles.hidden }, children);
|
|
872
|
+
}
|
|
873
|
+
|
|
815
874
|
function useLayoutMediaQueries() {
|
|
816
875
|
const mediaQueries = BREAKPOINTS.reduce((previous, breakpoint) => (Object.assign(Object.assign({}, previous), { [breakpoint]: window.matchMedia(breakpointToMediaQuery(breakpoint)) })), {});
|
|
817
876
|
const initialMatches = BREAKPOINTS.reduce((previous, breakpoint) => (Object.assign(Object.assign({}, previous), { [breakpoint]: mediaQueries[breakpoint].matches })), {});
|
|
@@ -862,21 +921,21 @@ function InternalDataList() {
|
|
|
862
921
|
const initialLoading = loadingState === "initial";
|
|
863
922
|
const showEmptyState = !initialLoading && data.length === 0;
|
|
864
923
|
const shouldRenderLoadMoreTrigger = !initialLoading && !showEmptyState;
|
|
865
|
-
return (React__default["default"].createElement("div", { className: styles$
|
|
866
|
-
React__default["default"].createElement("div", { className: styles$
|
|
924
|
+
return (React__default["default"].createElement("div", { className: styles$e.wrapper },
|
|
925
|
+
React__default["default"].createElement("div", { className: styles$e.titleContainer },
|
|
867
926
|
title && React__default["default"].createElement(Heading.Heading, { level: 3 }, title),
|
|
868
927
|
React__default["default"].createElement(DataListTotalCount, { totalCount: totalCount, loading: initialLoading })),
|
|
869
928
|
React__default["default"].createElement("div", { ref: backToTopRef }),
|
|
870
929
|
React__default["default"].createElement(DataListStickyHeader, null,
|
|
871
|
-
React__default["default"].createElement("div", { className: styles$
|
|
930
|
+
React__default["default"].createElement("div", { className: styles$e.headerFilters },
|
|
872
931
|
React__default["default"].createElement(InternalDataListFilters, null),
|
|
873
932
|
React__default["default"].createElement(InternalDataListSearch, null)),
|
|
874
933
|
headerData && (React__default["default"].createElement(DataListHeader, { layouts: layoutComponents, headerData: headerData, headerVisibility: headerVisibility, mediaMatches: mediaMatches }))),
|
|
875
934
|
initialLoading && (React__default["default"].createElement(DataListLoadingState, { headers: headers, layouts: layoutComponents, mediaMatches: mediaMatches })),
|
|
876
935
|
showEmptyState && React__default["default"].createElement(InternalDataListEmptyState, null),
|
|
877
936
|
!initialLoading && (React__default["default"].createElement(DataListItems, { data: data, layouts: layoutComponents, mediaMatches: mediaMatches })),
|
|
878
|
-
loadingState === "filtering" && (React__default["default"].createElement("div", { "data-testid": DATA_LIST_FILTERING_SPINNER_TEST_ID, className: styles$
|
|
879
|
-
React__default["default"].createElement("div", { className: styles$
|
|
937
|
+
loadingState === "filtering" && (React__default["default"].createElement("div", { "data-testid": DATA_LIST_FILTERING_SPINNER_TEST_ID, className: styles$e.filtering },
|
|
938
|
+
React__default["default"].createElement("div", { className: styles$e.filteringSpinner },
|
|
880
939
|
React__default["default"].createElement(Spinner.Spinner, { size: "small" })))),
|
|
881
940
|
shouldRenderLoadMoreTrigger && (React__default["default"].createElement(DataListLoadMore, { onBackToTop: handleBackToTop }))));
|
|
882
941
|
function handleBackToTop() {
|
|
@@ -892,11 +951,36 @@ function InternalDataList() {
|
|
|
892
951
|
});
|
|
893
952
|
}
|
|
894
953
|
}
|
|
954
|
+
/**
|
|
955
|
+
* Sets the layout that the DataList item and header will use.
|
|
956
|
+
*/
|
|
895
957
|
DataList.Layout = DataListLayout;
|
|
958
|
+
/**
|
|
959
|
+
* By using this component, we can render the actions anywhere in the layout
|
|
960
|
+
* instead of being added automatically on hover.
|
|
961
|
+
*/
|
|
962
|
+
DataList.LayoutActions = DataListLayoutActions;
|
|
963
|
+
/**
|
|
964
|
+
* When the DataList is either empty and/or filtered, this component will be
|
|
965
|
+
* rendered.
|
|
966
|
+
*/
|
|
896
967
|
DataList.EmptyState = DataListEmptyState;
|
|
968
|
+
/**
|
|
969
|
+
* Adds the filter components of your choosing to the DataList.
|
|
970
|
+
*/
|
|
897
971
|
DataList.Filters = DataListFilters;
|
|
972
|
+
/**
|
|
973
|
+
* Enables the search functionality of the DataList.
|
|
974
|
+
*/
|
|
898
975
|
DataList.Search = DataListSearch;
|
|
976
|
+
/**
|
|
977
|
+
* Defines the group actions you could do on a single DataList item.
|
|
978
|
+
*/
|
|
899
979
|
DataList.ItemActions = DataListItemActions;
|
|
980
|
+
/**
|
|
981
|
+
* Defines the action in a DataList. This should be used inside the
|
|
982
|
+
* DataListItemActions component.
|
|
983
|
+
*/
|
|
900
984
|
DataList.Action = DataListAction;
|
|
901
985
|
|
|
902
986
|
exports.DataList = DataList;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@jobber/components",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.42.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -84,5 +84,5 @@
|
|
|
84
84
|
"> 1%",
|
|
85
85
|
"IE 10"
|
|
86
86
|
],
|
|
87
|
-
"gitHead": "
|
|
87
|
+
"gitHead": "685c933bb0a179c249ae5207070afe579efe55b5"
|
|
88
88
|
}
|