@jobber/components 4.40.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 +212 -101
- 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
|
@@ -8,10 +8,10 @@ var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
|
|
|
8
8
|
var Text = require('../Text-e7ed0974.js');
|
|
9
9
|
var Glimmer = require('../Glimmer-cfa92a88.js');
|
|
10
10
|
var framerMotion = require('framer-motion');
|
|
11
|
+
var classnames = require('classnames');
|
|
11
12
|
var design = require('@jobber/design');
|
|
12
13
|
var isEmpty = require('lodash/isEmpty');
|
|
13
14
|
var InlineLabel = require('../InlineLabel-afd5fc6f.js');
|
|
14
|
-
var classnames = require('classnames');
|
|
15
15
|
var FormatDate = require('../FormatDate-70ea5b43.js');
|
|
16
16
|
var Heading = require('../Heading-a1191b15.js');
|
|
17
17
|
require('uuid');
|
|
@@ -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');
|
|
@@ -47,17 +49,18 @@ require('../InputValidation-b5a3d92c.js');
|
|
|
47
49
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
48
50
|
|
|
49
51
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
50
|
-
var isEmpty__default = /*#__PURE__*/_interopDefaultLegacy(isEmpty);
|
|
51
52
|
var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
|
|
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, { 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;
|
|
@@ -428,6 +432,9 @@ function InternalDataListItemActions({ item, }) {
|
|
|
428
432
|
}),
|
|
429
433
|
React__default["default"].createElement(DataListItemActionsOverflow, { actions: childrenArray, item: item })));
|
|
430
434
|
}
|
|
435
|
+
function handleContextMenu(event) {
|
|
436
|
+
event.stopPropagation();
|
|
437
|
+
}
|
|
431
438
|
function getExposedActions(childrenArray) {
|
|
432
439
|
const firstTwoChildren = childrenArray.slice(0, 2);
|
|
433
440
|
return firstTwoChildren.reduce((result, child, i) => {
|
|
@@ -445,29 +452,80 @@ function getExposedActions(childrenArray) {
|
|
|
445
452
|
}, []);
|
|
446
453
|
}
|
|
447
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
|
+
|
|
448
465
|
function DataListItems({ layouts, mediaMatches, data, }) {
|
|
449
|
-
const
|
|
450
|
-
const
|
|
451
|
-
|
|
452
|
-
|
|
466
|
+
const { itemActionComponent } = useDataListContext();
|
|
467
|
+
const elementData = React.useMemo(() => generateListItemElements(data), [data]);
|
|
468
|
+
const [hasInLayoutActions, setHasInLayoutActions] = React.useState(false);
|
|
469
|
+
const [activeID, setActiveID] = React.useState();
|
|
470
|
+
const [activeItem, setActiveItem] = React.useState();
|
|
471
|
+
const [contextPosition, setContextPosition] = React.useState();
|
|
472
|
+
const contextMenuActions = itemActionComponent === null || itemActionComponent === void 0 ? void 0 : itemActionComponent.props.children;
|
|
473
|
+
const isContextMenuVisible = Boolean(contextPosition);
|
|
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) => {
|
|
453
481
|
const item = data[i];
|
|
454
|
-
|
|
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 },
|
|
455
490
|
React__default["default"].createElement(DataListItemInternal, { item: data[i] }, layout.props.children(child)),
|
|
456
|
-
React__default["default"].createElement(framerMotion.AnimatePresence, null,
|
|
457
|
-
|
|
458
|
-
|
|
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
|
+
};
|
|
501
|
+
}
|
|
502
|
+
function handleUnsetActiveItem() {
|
|
503
|
+
if (isContextMenuVisible)
|
|
504
|
+
return;
|
|
505
|
+
setActiveID(undefined);
|
|
506
|
+
setActiveItem(undefined);
|
|
507
|
+
}
|
|
508
|
+
function handleContextMenu(event) {
|
|
509
|
+
if (!contextMenuActions || isContextMenuVisible)
|
|
510
|
+
return;
|
|
511
|
+
event.preventDefault();
|
|
512
|
+
setContextPosition({
|
|
513
|
+
x: event.clientX,
|
|
514
|
+
y: event.clientY,
|
|
515
|
+
});
|
|
516
|
+
}
|
|
459
517
|
}
|
|
460
518
|
|
|
461
519
|
function DataListHeaderCheckbox({ children }) {
|
|
462
520
|
const { data, totalCount, selected = [], onSelectAll, onSelect, } = useDataListContext();
|
|
463
521
|
if (!onSelectAll && !onSelect)
|
|
464
522
|
return children;
|
|
465
|
-
return (React__default["default"].createElement("div", { className: classnames__default["default"](styles$
|
|
466
|
-
React__default["default"].createElement("div", { className: classnames__default["default"](styles$
|
|
467
|
-
[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),
|
|
468
526
|
}) },
|
|
469
527
|
React__default["default"].createElement(Checkbox.Checkbox, { checked: isAllSelected(), indeterminate: selected.length > 0 && !isAllSelected(), onChange: onSelectAll })),
|
|
470
|
-
React__default["default"].createElement(AnimatedSwitcher.AnimatedSwitcher, { switched: Boolean(selected.length), initialChild: children, switchTo: React__default["default"].createElement("div", { className: styles$
|
|
528
|
+
React__default["default"].createElement(AnimatedSwitcher.AnimatedSwitcher, { switched: Boolean(selected.length), initialChild: children, switchTo: React__default["default"].createElement("div", { className: styles$e.headerBatchSelect },
|
|
471
529
|
React__default["default"].createElement(Text.Text, null,
|
|
472
530
|
React__default["default"].createElement("b", null,
|
|
473
531
|
selected.length,
|
|
@@ -528,7 +586,7 @@ function DataListHeader({ layouts, mediaMatches, headerData, }) {
|
|
|
528
586
|
const showHeader = useShowHeader();
|
|
529
587
|
if (!showHeader || !headerData)
|
|
530
588
|
return null;
|
|
531
|
-
return (React__default["default"].createElement(DataListLayoutInternal, { layouts: layouts, mediaMatches: mediaMatches, renderLayout: layout => (React__default["default"].createElement("div", { className: classnames__default["default"](styles$
|
|
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) },
|
|
532
590
|
React__default["default"].createElement(DataListHeaderCheckbox, null, layout.props.children(headerData)))) }));
|
|
533
591
|
}
|
|
534
592
|
|
|
@@ -544,13 +602,13 @@ function DataListLoadingState({ headers, layouts, mediaMatches, }) {
|
|
|
544
602
|
if (layout.props.size === "xs") {
|
|
545
603
|
return React__default["default"].createElement(LoadingStateXSBreakpoint, null);
|
|
546
604
|
}
|
|
547
|
-
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))))));
|
|
548
606
|
} }));
|
|
549
607
|
}
|
|
550
608
|
function LoadingStateXSBreakpoint() {
|
|
551
609
|
const loadingData = new Array(LOADING_STATE_LIMIT_ITEMS).fill(0);
|
|
552
610
|
return (React__default["default"].createElement(React__default["default"].Fragment, null, loadingData.map((_, i) => {
|
|
553
|
-
return (React__default["default"].createElement("div", { className: styles$
|
|
611
|
+
return (React__default["default"].createElement("div", { className: styles$c.mobileLoadingState, key: i },
|
|
554
612
|
React__default["default"].createElement(Glimmer.Glimmer.Text, null)));
|
|
555
613
|
})));
|
|
556
614
|
}
|
|
@@ -561,9 +619,9 @@ _) {
|
|
|
561
619
|
return React__default["default"].createElement(React__default["default"].Fragment, null);
|
|
562
620
|
}
|
|
563
621
|
|
|
564
|
-
var css_248z$
|
|
565
|
-
var styles$
|
|
566
|
-
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);
|
|
567
625
|
|
|
568
626
|
const CONTAINER_TEST_ID = "ATL-DataListFilters-Container";
|
|
569
627
|
|
|
@@ -638,20 +696,20 @@ function InternalDataListFilters() {
|
|
|
638
696
|
if (!showSortButton && !component)
|
|
639
697
|
return null;
|
|
640
698
|
const children = component === null || component === void 0 ? void 0 : component.props.children;
|
|
641
|
-
return (React__default["default"].createElement("div", { "data-testid": CONTAINER_TEST_ID, className: classnames__default["default"](styles$
|
|
642
|
-
[styles$
|
|
643
|
-
[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,
|
|
644
702
|
}) },
|
|
645
|
-
React__default["default"].createElement("div", { className: styles$
|
|
646
|
-
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 }),
|
|
647
705
|
children && children,
|
|
648
706
|
showSortButton && React__default["default"].createElement(DataListSort, null),
|
|
649
|
-
React__default["default"].createElement("span", { ref: rightRef, className: styles$
|
|
707
|
+
React__default["default"].createElement("span", { ref: rightRef, className: styles$5.overflowTrigger }))));
|
|
650
708
|
}
|
|
651
709
|
|
|
652
|
-
var css_248z$
|
|
653
|
-
var styles$
|
|
654
|
-
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);
|
|
655
713
|
|
|
656
714
|
function DataListStickyHeader({ children }) {
|
|
657
715
|
const [isStuck, setIsStuck] = React.useState(false);
|
|
@@ -666,12 +724,12 @@ function DataListStickyHeader({ children }) {
|
|
|
666
724
|
ref.current && observer.unobserve(ref.current);
|
|
667
725
|
};
|
|
668
726
|
}, [handleObserver, ref.current]);
|
|
669
|
-
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));
|
|
670
728
|
}
|
|
671
729
|
|
|
672
|
-
var css_248z$
|
|
673
|
-
var styles$
|
|
674
|
-
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);
|
|
675
733
|
|
|
676
734
|
const DATA_LIST_SEARCH_TEST_ID = "ATL-DataList-Search-input-wrapper";
|
|
677
735
|
// This component is meant to capture the props of the DataList.Search
|
|
@@ -691,13 +749,13 @@ function InternalDataListSearch() {
|
|
|
691
749
|
return null;
|
|
692
750
|
const { placeholder } = searchComponent.props;
|
|
693
751
|
return (React__default["default"].createElement("div", { className: classnames__default["default"]({
|
|
694
|
-
[styles$
|
|
752
|
+
[styles$3.withNoFilters]: !filterComponent && !sorting,
|
|
695
753
|
}) },
|
|
696
|
-
React__default["default"].createElement("div", { "data-testid": DATA_LIST_SEARCH_TEST_ID, className: classnames__default["default"](styles$
|
|
697
|
-
[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,
|
|
698
756
|
}) },
|
|
699
757
|
React__default["default"].createElement(InputText.InputText, { ref: inputRef, placeholder: getPlaceholder(), onChange: debouncedSearch, prefix: { icon: "search" }, size: "small" })),
|
|
700
|
-
React__default["default"].createElement("div", { className: styles$
|
|
758
|
+
React__default["default"].createElement("div", { className: styles$3.searchButton },
|
|
701
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 }) }))));
|
|
702
760
|
function getPlaceholder() {
|
|
703
761
|
if (placeholder)
|
|
@@ -715,9 +773,9 @@ function InternalDataListSearch() {
|
|
|
715
773
|
}
|
|
716
774
|
}
|
|
717
775
|
|
|
718
|
-
var css_248z$
|
|
719
|
-
var styles$
|
|
720
|
-
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);
|
|
721
779
|
|
|
722
780
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
723
781
|
function DataListEmptyState(_) {
|
|
@@ -726,7 +784,7 @@ function DataListEmptyState(_) {
|
|
|
726
784
|
function InternalDataListEmptyState() {
|
|
727
785
|
const { emptyStateComponents: components, filtered } = React.useContext(DataListContext);
|
|
728
786
|
const { message, action } = getMessages();
|
|
729
|
-
return (React__default["default"].createElement("div", { className: styles$
|
|
787
|
+
return (React__default["default"].createElement("div", { className: styles$2.emptyStateWrapper },
|
|
730
788
|
React__default["default"].createElement(Text.Text, { align: "center" }, message),
|
|
731
789
|
renderButton(action)));
|
|
732
790
|
function getMessages() {
|
|
@@ -760,9 +818,9 @@ function getEmptyStates(components) {
|
|
|
760
818
|
return { defaultEmptyState, filteredEmptyState };
|
|
761
819
|
}
|
|
762
820
|
|
|
763
|
-
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";
|
|
764
|
-
var styles = {"trigger":"IC-Y9bTIVFo-","loadingMore":"PbZLGpbI6ZM-","backToTop":"_6zA6B-jmz6o-","fadeIn":"gZ4DUv82g5I-"};
|
|
765
|
-
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);
|
|
766
824
|
|
|
767
825
|
function DataListLoadMoreTrigger() {
|
|
768
826
|
const { onLoadMore } = useDataListContext();
|
|
@@ -770,7 +828,7 @@ function DataListLoadMoreTrigger() {
|
|
|
770
828
|
React.useEffect(() => {
|
|
771
829
|
isInView && (onLoadMore === null || onLoadMore === void 0 ? void 0 : onLoadMore());
|
|
772
830
|
}, [isInView]);
|
|
773
|
-
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 }));
|
|
774
832
|
}
|
|
775
833
|
|
|
776
834
|
const MAX_DATA_COUNT = 50;
|
|
@@ -779,12 +837,40 @@ function DataListLoadMore({ onBackToTop }) {
|
|
|
779
837
|
const showBackToTop = data.length > MAX_DATA_COUNT && loadingState !== "loadingMore";
|
|
780
838
|
return (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
781
839
|
React__default["default"].createElement(DataListLoadMoreTrigger, { key: data.length }),
|
|
782
|
-
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 },
|
|
783
841
|
React__default["default"].createElement(Spinner.Spinner, { size: "small" }))),
|
|
784
|
-
showBackToTop && (React__default["default"].createElement("div", { className: styles.backToTop },
|
|
842
|
+
showBackToTop && (React__default["default"].createElement("div", { className: styles$1.backToTop },
|
|
785
843
|
React__default["default"].createElement(Button.Button, { label: "Back to top", onClick: onBackToTop, size: "small", variation: "subtle" })))));
|
|
786
844
|
}
|
|
787
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
|
+
|
|
788
874
|
function useLayoutMediaQueries() {
|
|
789
875
|
const mediaQueries = BREAKPOINTS.reduce((previous, breakpoint) => (Object.assign(Object.assign({}, previous), { [breakpoint]: window.matchMedia(breakpointToMediaQuery(breakpoint)) })), {});
|
|
790
876
|
const initialMatches = BREAKPOINTS.reduce((previous, breakpoint) => (Object.assign(Object.assign({}, previous), { [breakpoint]: mediaQueries[breakpoint].matches })), {});
|
|
@@ -835,21 +921,21 @@ function InternalDataList() {
|
|
|
835
921
|
const initialLoading = loadingState === "initial";
|
|
836
922
|
const showEmptyState = !initialLoading && data.length === 0;
|
|
837
923
|
const shouldRenderLoadMoreTrigger = !initialLoading && !showEmptyState;
|
|
838
|
-
return (React__default["default"].createElement("div", { className: styles$
|
|
839
|
-
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 },
|
|
840
926
|
title && React__default["default"].createElement(Heading.Heading, { level: 3 }, title),
|
|
841
927
|
React__default["default"].createElement(DataListTotalCount, { totalCount: totalCount, loading: initialLoading })),
|
|
842
928
|
React__default["default"].createElement("div", { ref: backToTopRef }),
|
|
843
929
|
React__default["default"].createElement(DataListStickyHeader, null,
|
|
844
|
-
React__default["default"].createElement("div", { className: styles$
|
|
930
|
+
React__default["default"].createElement("div", { className: styles$e.headerFilters },
|
|
845
931
|
React__default["default"].createElement(InternalDataListFilters, null),
|
|
846
932
|
React__default["default"].createElement(InternalDataListSearch, null)),
|
|
847
933
|
headerData && (React__default["default"].createElement(DataListHeader, { layouts: layoutComponents, headerData: headerData, headerVisibility: headerVisibility, mediaMatches: mediaMatches }))),
|
|
848
934
|
initialLoading && (React__default["default"].createElement(DataListLoadingState, { headers: headers, layouts: layoutComponents, mediaMatches: mediaMatches })),
|
|
849
935
|
showEmptyState && React__default["default"].createElement(InternalDataListEmptyState, null),
|
|
850
936
|
!initialLoading && (React__default["default"].createElement(DataListItems, { data: data, layouts: layoutComponents, mediaMatches: mediaMatches })),
|
|
851
|
-
loadingState === "filtering" && (React__default["default"].createElement("div", { "data-testid": DATA_LIST_FILTERING_SPINNER_TEST_ID, className: styles$
|
|
852
|
-
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 },
|
|
853
939
|
React__default["default"].createElement(Spinner.Spinner, { size: "small" })))),
|
|
854
940
|
shouldRenderLoadMoreTrigger && (React__default["default"].createElement(DataListLoadMore, { onBackToTop: handleBackToTop }))));
|
|
855
941
|
function handleBackToTop() {
|
|
@@ -865,11 +951,36 @@ function InternalDataList() {
|
|
|
865
951
|
});
|
|
866
952
|
}
|
|
867
953
|
}
|
|
954
|
+
/**
|
|
955
|
+
* Sets the layout that the DataList item and header will use.
|
|
956
|
+
*/
|
|
868
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
|
+
*/
|
|
869
967
|
DataList.EmptyState = DataListEmptyState;
|
|
968
|
+
/**
|
|
969
|
+
* Adds the filter components of your choosing to the DataList.
|
|
970
|
+
*/
|
|
870
971
|
DataList.Filters = DataListFilters;
|
|
972
|
+
/**
|
|
973
|
+
* Enables the search functionality of the DataList.
|
|
974
|
+
*/
|
|
871
975
|
DataList.Search = DataListSearch;
|
|
976
|
+
/**
|
|
977
|
+
* Defines the group actions you could do on a single DataList item.
|
|
978
|
+
*/
|
|
872
979
|
DataList.ItemActions = DataListItemActions;
|
|
980
|
+
/**
|
|
981
|
+
* Defines the action in a DataList. This should be used inside the
|
|
982
|
+
* DataListItemActions component.
|
|
983
|
+
*/
|
|
873
984
|
DataList.Action = DataListAction;
|
|
874
985
|
|
|
875
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
|
}
|