@payfit/unity-components 2.18.3 → 2.19.1
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/esm/components/data-table/DataTable.d.ts +30 -2
- package/dist/esm/components/data-table/DataTable.js +87 -74
- package/dist/esm/components/empty-state/parts/EmptyStateContent.d.ts +3 -2
- package/dist/esm/components/table/parts/TableEmptyState.d.ts +44 -6
- package/dist/esm/components/table/parts/TableEmptyState.js +127 -60
- package/dist/esm/index.js +188 -187
- package/i18n/en-GB.json +3 -1
- package/i18n/es-ES.json +3 -1
- package/i18n/fr-FR.json +3 -1
- package/package.json +7 -7
- package/dist/esm/components/table/assets/EmptyStateError.svg.js +0 -5
- package/dist/esm/components/table/assets/EmptyStateNoData.svg.js +0 -5
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { default as React } from 'react';
|
|
1
|
+
import { default as React, ReactNode } from 'react';
|
|
2
2
|
import { Row, RowData, Table as TableType } from '@tanstack/react-table';
|
|
3
3
|
import { TablePaginationProps } from '../table/parts/TablePagination.js';
|
|
4
4
|
import { TableProps, TableRootProps } from '../table/Table.js';
|
|
@@ -167,6 +167,30 @@ export interface DataTableProps<TData> extends Omit<TableRootProps, 'children'>,
|
|
|
167
167
|
* @param row - The row data of a given row in the table
|
|
168
168
|
*/
|
|
169
169
|
children: (row: Row<TData>) => React.ReactNode;
|
|
170
|
+
/**
|
|
171
|
+
* Optional callback fired when the button is clicked in the error state.
|
|
172
|
+
* Used to navigate away or retry when data loading fails.
|
|
173
|
+
* If not provided, the button won't be rendered.
|
|
174
|
+
*/
|
|
175
|
+
onErrorButtonPress?: () => void;
|
|
176
|
+
/**
|
|
177
|
+
* Optional callback fired when the button is clicked in the no data state.
|
|
178
|
+
* Typically used to help users configure settings when no data is available.
|
|
179
|
+
* If not provided, the button won't be rendered.
|
|
180
|
+
*/
|
|
181
|
+
onNoDataButtonPress?: () => void;
|
|
182
|
+
/**
|
|
183
|
+
* Optional description text displayed in the no data empty state.
|
|
184
|
+
* This should explain to users why there is no data and what they can do about it.
|
|
185
|
+
* If not provided, a default empty state will be shown.
|
|
186
|
+
*/
|
|
187
|
+
noDataDescription?: ReactNode;
|
|
188
|
+
/**
|
|
189
|
+
* Optional callback fired when the button is clicked in the no search results state.
|
|
190
|
+
* Typically used to reset filters when a search returns no results.
|
|
191
|
+
* If provided and filters are active with 0 results, TableNoSearchResults will be shown instead of the default empty state.
|
|
192
|
+
*/
|
|
193
|
+
onNoSearchResultsButtonPress?: () => void;
|
|
170
194
|
}
|
|
171
195
|
/**
|
|
172
196
|
* A powerful and flexible data table component that integrates Unity's Table with @tanstack/react-table
|
|
@@ -195,6 +219,10 @@ export interface DataTableProps<TData> extends Omit<TableRootProps, 'children'>,
|
|
|
195
219
|
* @param props.enableVirtualization - Enable internal scroll virtualization for large datasets
|
|
196
220
|
* @param props.estimatedRowHeight - Estimated row height in pixels for the virtualizer
|
|
197
221
|
* @param props.overscan - Number of extra rows rendered above/below viewport for virtualization
|
|
222
|
+
* @param props.onErrorButtonPress - Callback for the button in error state
|
|
223
|
+
* @param props.onNoDataButtonPress - Callback for the button in no data state
|
|
224
|
+
* @param props.noDataDescription - Description text shown in the no data empty state
|
|
225
|
+
* @param props.onNoSearchResultsButtonPress - Callback for the button in no search results state
|
|
198
226
|
* @param props.children - Render function that takes care of rendering the table rows
|
|
199
227
|
* @see {@link DataTableProps} for all available props
|
|
200
228
|
* @example
|
|
@@ -274,7 +302,7 @@ export interface DataTableProps<TData> extends Omit<TableRootProps, 'children'>,
|
|
|
274
302
|
* - **Fixed layout best practices**: Set explicit widths on column headers and use truncation for overflow content
|
|
275
303
|
* - [API](https://unity-components.payfit.io/?path=/docs/data-datatable--docs) • [Demo](https://unity-components.payfit.io/?path=/docs/data-datatable--docs)
|
|
276
304
|
*/
|
|
277
|
-
declare function DataTable<TData extends object>({ table, isLoading, error, emptyState, loadingState, errorState, pagination, minRows, maxRows, onPageChange: onPaginationChange, onPageHover: onPaginationPageHover, onPageSizeChange: onPaginationSizeChange, children, enableVirtualization, estimatedRowHeight, overscan, ...rest }: DataTableProps<TData>): import("react/jsx-runtime").JSX.Element;
|
|
305
|
+
declare function DataTable<TData extends object>({ table, isLoading, error, emptyState, loadingState, errorState, pagination, minRows, maxRows, onPageChange: onPaginationChange, onPageHover: onPaginationPageHover, onPageSizeChange: onPaginationSizeChange, children, enableVirtualization, estimatedRowHeight, overscan, onErrorButtonPress, onNoDataButtonPress, noDataDescription, onNoSearchResultsButtonPress, ...rest }: DataTableProps<TData>): import("react/jsx-runtime").JSX.Element;
|
|
278
306
|
declare namespace DataTable {
|
|
279
307
|
var displayName: string;
|
|
280
308
|
}
|
|
@@ -1,89 +1,102 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { useRef as
|
|
3
|
-
import { flexRender as
|
|
4
|
-
import { useId as
|
|
5
|
-
import { CircularIconButton as
|
|
6
|
-
import { TableBody as
|
|
7
|
-
import { TableColumnHeader as
|
|
8
|
-
import { TableEmptyStateLoading as
|
|
9
|
-
import { TableHeader as
|
|
10
|
-
import { TablePagination as
|
|
11
|
-
import { TableRoot as
|
|
12
|
-
import { ColumnSortHeader as
|
|
1
|
+
import { jsxs as m, jsx as o, Fragment as O } from "react/jsx-runtime";
|
|
2
|
+
import { useRef as j, useEffect as G } from "react";
|
|
3
|
+
import { flexRender as b } from "@tanstack/react-table";
|
|
4
|
+
import { useId as $ } from "react-aria";
|
|
5
|
+
import { CircularIconButton as A } from "../icon-button/CircularIconButton.js";
|
|
6
|
+
import { TableBody as L } from "../table/parts/TableBody.js";
|
|
7
|
+
import { TableColumnHeader as Q } from "../table/parts/TableColumnHeader.js";
|
|
8
|
+
import { TableEmptyStateLoading as W, TableEmptyStateError as k, TableNoSearchResults as q, TableEmptyStateNoData as J } from "../table/parts/TableEmptyState.js";
|
|
9
|
+
import { TableHeader as K } from "../table/parts/TableHeader.js";
|
|
10
|
+
import { TablePagination as U } from "../table/parts/TablePagination.js";
|
|
11
|
+
import { TableRoot as V, Table as X } from "../table/Table.js";
|
|
12
|
+
import { ColumnSortHeader as Y } from "./parts/ColumnSortHeader.js";
|
|
13
13
|
const C = ({
|
|
14
14
|
children: t,
|
|
15
15
|
columnNameId: a,
|
|
16
|
-
helperText:
|
|
17
|
-
}) =>
|
|
16
|
+
helperText: l
|
|
17
|
+
}) => l !== void 0 ? /* @__PURE__ */ m("div", { className: "uy:flex uy:gap-50 uy:items-center", children: [
|
|
18
18
|
t,
|
|
19
19
|
/* @__PURE__ */ o(
|
|
20
|
-
|
|
20
|
+
A,
|
|
21
21
|
{
|
|
22
22
|
"aria-labelledby": a,
|
|
23
23
|
icon: "QuestionOutlined",
|
|
24
|
-
title:
|
|
24
|
+
title: l,
|
|
25
25
|
color: "content.neutral.lowest"
|
|
26
26
|
}
|
|
27
27
|
)
|
|
28
|
-
] }) : /* @__PURE__ */ o(
|
|
29
|
-
function
|
|
28
|
+
] }) : /* @__PURE__ */ o(O, { children: t });
|
|
29
|
+
function Z({
|
|
30
30
|
table: t,
|
|
31
31
|
isLoading: a,
|
|
32
|
-
error:
|
|
33
|
-
emptyState:
|
|
34
|
-
loadingState:
|
|
32
|
+
error: l,
|
|
33
|
+
emptyState: c,
|
|
34
|
+
loadingState: P,
|
|
35
35
|
errorState: T,
|
|
36
|
-
pagination:
|
|
37
|
-
minRows:
|
|
36
|
+
pagination: u,
|
|
37
|
+
minRows: h,
|
|
38
38
|
maxRows: S,
|
|
39
|
-
onPageChange:
|
|
40
|
-
onPageHover:
|
|
41
|
-
onPageSizeChange:
|
|
42
|
-
children:
|
|
43
|
-
enableVirtualization:
|
|
39
|
+
onPageChange: x,
|
|
40
|
+
onPageHover: y,
|
|
41
|
+
onPageSizeChange: D,
|
|
42
|
+
children: w,
|
|
43
|
+
enableVirtualization: F,
|
|
44
44
|
estimatedRowHeight: H,
|
|
45
|
-
overscan:
|
|
46
|
-
|
|
45
|
+
overscan: v,
|
|
46
|
+
onErrorButtonPress: E,
|
|
47
|
+
onNoDataButtonPress: R,
|
|
48
|
+
noDataDescription: z,
|
|
49
|
+
onNoSearchResultsButtonPress: s,
|
|
50
|
+
...i
|
|
47
51
|
}) {
|
|
48
|
-
const
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
}, [
|
|
52
|
-
const
|
|
53
|
-
label:
|
|
54
|
-
description:
|
|
55
|
-
isHorizontalScrollEnabled:
|
|
56
|
-
layout:
|
|
57
|
-
},
|
|
52
|
+
const p = j(null), I = $(), { pageIndex: g, pageSize: d } = t.getState().pagination;
|
|
53
|
+
G(() => {
|
|
54
|
+
p.current?.scrollToTop();
|
|
55
|
+
}, [g, d]);
|
|
56
|
+
const N = {
|
|
57
|
+
label: i.label,
|
|
58
|
+
description: i.description,
|
|
59
|
+
isHorizontalScrollEnabled: i.isHorizontalScrollEnabled,
|
|
60
|
+
layout: i.layout
|
|
61
|
+
}, f = () => {
|
|
58
62
|
if (a)
|
|
59
|
-
return
|
|
60
|
-
if (
|
|
61
|
-
return T ?? /* @__PURE__ */ o(
|
|
62
|
-
},
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
63
|
+
return P ?? /* @__PURE__ */ o(W, {});
|
|
64
|
+
if (l)
|
|
65
|
+
return T ?? /* @__PURE__ */ o(k, { onButtonPress: E });
|
|
66
|
+
}, B = () => {
|
|
67
|
+
const n = t.getState(), e = n.globalFilter !== void 0 && n.globalFilter !== "", r = n.columnFilters !== void 0 && n.columnFilters.length > 0;
|
|
68
|
+
return e || r;
|
|
69
|
+
}, M = () => a || l ? f() : t.getRowModel().rows.length === 0 ? B() && s ? /* @__PURE__ */ o(q, { onButtonPress: s }) : c ?? /* @__PURE__ */ o(
|
|
70
|
+
J,
|
|
71
|
+
{
|
|
72
|
+
onButtonPress: R,
|
|
73
|
+
description: z
|
|
74
|
+
}
|
|
75
|
+
) : c;
|
|
76
|
+
return /* @__PURE__ */ m(V, { minRows: h, maxRows: S, children: [
|
|
77
|
+
/* @__PURE__ */ m(
|
|
78
|
+
X,
|
|
66
79
|
{
|
|
67
|
-
ref:
|
|
68
|
-
...
|
|
69
|
-
enableVirtualization:
|
|
80
|
+
ref: p,
|
|
81
|
+
...N,
|
|
82
|
+
enableVirtualization: F,
|
|
70
83
|
estimatedRowHeight: H,
|
|
71
|
-
overscan:
|
|
84
|
+
overscan: v,
|
|
72
85
|
children: [
|
|
73
|
-
/* @__PURE__ */ o(
|
|
86
|
+
/* @__PURE__ */ o(K, { children: t.getHeaderGroups().map(
|
|
74
87
|
(n) => n.headers.map((e) => {
|
|
75
|
-
const
|
|
88
|
+
const r = `${I}-column-name-${e.column.columnDef.id}`;
|
|
76
89
|
return /* @__PURE__ */ o(
|
|
77
|
-
|
|
90
|
+
Q,
|
|
78
91
|
{
|
|
79
92
|
isFocusable: e.column.columnDef.meta?.isFocusable,
|
|
80
93
|
className: e.column.columnDef.meta?.headerClassName,
|
|
81
|
-
children: t.getRowModel().rows.length > 0 && e.column.getCanSort() ? /* @__PURE__ */ o(
|
|
94
|
+
children: t.getRowModel().rows.length > 0 && e.column.getCanSort() ? /* @__PURE__ */ o(Y, { header: e, children: /* @__PURE__ */ o(
|
|
82
95
|
C,
|
|
83
96
|
{
|
|
84
|
-
columnNameId:
|
|
97
|
+
columnNameId: r,
|
|
85
98
|
helperText: e.column.columnDef.meta?.helperText,
|
|
86
|
-
children: /* @__PURE__ */ o("span", { id:
|
|
99
|
+
children: /* @__PURE__ */ o("span", { id: r, children: b(
|
|
87
100
|
e.column.columnDef.header,
|
|
88
101
|
e.getContext()
|
|
89
102
|
) })
|
|
@@ -91,9 +104,9 @@ function J({
|
|
|
91
104
|
) }) : /* @__PURE__ */ o(
|
|
92
105
|
C,
|
|
93
106
|
{
|
|
94
|
-
columnNameId:
|
|
107
|
+
columnNameId: r,
|
|
95
108
|
helperText: e.column.columnDef.meta?.helperText,
|
|
96
|
-
children: /* @__PURE__ */ o("span", { id:
|
|
109
|
+
children: /* @__PURE__ */ o("span", { id: r, children: b(
|
|
97
110
|
e.column.columnDef.header,
|
|
98
111
|
e.getContext()
|
|
99
112
|
) })
|
|
@@ -105,39 +118,39 @@ function J({
|
|
|
105
118
|
})
|
|
106
119
|
) }),
|
|
107
120
|
/* @__PURE__ */ o(
|
|
108
|
-
|
|
121
|
+
L,
|
|
109
122
|
{
|
|
110
|
-
renderEmptyState:
|
|
111
|
-
renderDataState:
|
|
112
|
-
children: !a && !
|
|
123
|
+
renderEmptyState: M,
|
|
124
|
+
renderDataState: f,
|
|
125
|
+
children: !a && !l && t.getRowModel().rows.map(w)
|
|
113
126
|
}
|
|
114
127
|
)
|
|
115
128
|
]
|
|
116
129
|
}
|
|
117
130
|
),
|
|
118
131
|
t.getPageCount() > 0 && /* @__PURE__ */ o(
|
|
119
|
-
|
|
132
|
+
U,
|
|
120
133
|
{
|
|
121
134
|
pageCount: t.getPageCount(),
|
|
122
135
|
rowCount: t.getRowCount(),
|
|
123
|
-
currentPage:
|
|
124
|
-
rowsPerPage:
|
|
125
|
-
pageSizeOptions:
|
|
126
|
-
onPageChange: (n, e,
|
|
127
|
-
t.setPageIndex(n - 1),
|
|
136
|
+
currentPage: g + 1,
|
|
137
|
+
rowsPerPage: d,
|
|
138
|
+
pageSizeOptions: u?.pageSizeOptions,
|
|
139
|
+
onPageChange: (n, e, r) => {
|
|
140
|
+
t.setPageIndex(n - 1), x?.(n - 1, e, r);
|
|
128
141
|
},
|
|
129
142
|
onPageHover: (n) => {
|
|
130
|
-
|
|
143
|
+
y?.(n);
|
|
131
144
|
},
|
|
132
145
|
onPageSizeChange: (n) => {
|
|
133
|
-
t.setPageSize(n),
|
|
146
|
+
t.setPageSize(n), D?.(n);
|
|
134
147
|
},
|
|
135
|
-
itemLabel:
|
|
148
|
+
itemLabel: u?.labels?.itemLabel
|
|
136
149
|
}
|
|
137
150
|
)
|
|
138
151
|
] });
|
|
139
152
|
}
|
|
140
|
-
|
|
153
|
+
Z.displayName = "DataTable";
|
|
141
154
|
export {
|
|
142
|
-
|
|
155
|
+
Z as DataTable
|
|
143
156
|
};
|
|
@@ -1,12 +1,13 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
1
2
|
export interface EmptyStateContentProps {
|
|
2
3
|
/**
|
|
3
4
|
* The main title text for the empty state.
|
|
4
5
|
*/
|
|
5
|
-
title?:
|
|
6
|
+
title?: ReactNode;
|
|
6
7
|
/**
|
|
7
8
|
* Additional descriptive text providing context about the empty state.
|
|
8
9
|
*/
|
|
9
|
-
description?:
|
|
10
|
+
description?: ReactNode;
|
|
10
11
|
}
|
|
11
12
|
/**
|
|
12
13
|
* EmptyStateContent communicates the reason for the empty state through a title and optional description.
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { VariantProps } from '@payfit/unity-themes';
|
|
2
|
-
import { PropsWithChildren } from 'react';
|
|
2
|
+
import { PropsWithChildren, ReactNode } from 'react';
|
|
3
3
|
export declare const tableEmptyState: import('tailwind-variants').TVReturnType<{
|
|
4
4
|
[key: string]: {
|
|
5
5
|
[key: string]: import('tailwind-merge').ClassNameValue | {
|
|
@@ -106,7 +106,7 @@ declare const TableEmptyState: import('react').ForwardRefExoticComponent<Variant
|
|
|
106
106
|
base: string;
|
|
107
107
|
wrapper: string;
|
|
108
108
|
}, undefined, unknown, unknown, undefined>>> & {
|
|
109
|
-
children?:
|
|
109
|
+
children?: ReactNode | undefined;
|
|
110
110
|
} & {
|
|
111
111
|
className?: string;
|
|
112
112
|
} & import('react').RefAttributes<HTMLDivElement>>;
|
|
@@ -125,25 +125,63 @@ declare const TableEmptyStateLoading: () => import("react/jsx-runtime").JSX.Elem
|
|
|
125
125
|
/**
|
|
126
126
|
* A pre-configured empty state for tables with no data.
|
|
127
127
|
* Use this component to indicate that no results were found and provide guidance on how to adjust search or filters.
|
|
128
|
+
* @param props - The component props
|
|
129
|
+
* @param props.description - The description text to display explaining why there's no data
|
|
130
|
+
* @param props.onButtonPress - Optional callback fired when the "Enable settings" button is clicked. If not provided, the button won't be rendered.
|
|
128
131
|
* @see {TableEmptyState}
|
|
129
132
|
* @example
|
|
130
133
|
* ```tsx
|
|
131
134
|
* import { TableEmptyStateNoData } from '@payfit/unity-components'
|
|
132
135
|
*
|
|
133
|
-
*
|
|
136
|
+
* // Without button
|
|
137
|
+
* <TableBody renderEmptyState={() => <TableEmptyStateNoData description="No data available" />}>{[]}</TableBody>
|
|
138
|
+
*
|
|
139
|
+
* // With "Enable settings" button
|
|
140
|
+
* <TableBody renderEmptyState={() => <TableEmptyStateNoData description="No data available" onButtonPress={() => console.log('Enable settings')} />}>{[]}</TableBody>
|
|
134
141
|
* ```
|
|
135
142
|
*/
|
|
136
|
-
declare const TableEmptyStateNoData: (
|
|
143
|
+
declare const TableEmptyStateNoData: ({ description, onButtonPress, }: {
|
|
144
|
+
description: ReactNode;
|
|
145
|
+
onButtonPress?: () => void;
|
|
146
|
+
}) => import("react/jsx-runtime").JSX.Element;
|
|
137
147
|
/**
|
|
138
148
|
* A pre-configured error state for tables.
|
|
139
149
|
* Use this component to indicate that an error occurred while loading data and provide guidance on how to resolve it.
|
|
150
|
+
* @param props - The component props
|
|
151
|
+
* @param props.onButtonPress - Optional callback fired when the "Go to dashboard" button is clicked. If not provided, the button won't be rendered.
|
|
140
152
|
* @see {TableEmptyState}
|
|
141
153
|
* @example
|
|
142
154
|
* ```tsx
|
|
143
155
|
* import { TableEmptyStateError } from '@payfit/unity-components'
|
|
144
156
|
*
|
|
157
|
+
* // Without button
|
|
145
158
|
* <TableBody renderEmptyState={() => <TableEmptyStateError />}>{[]}</TableBody>
|
|
159
|
+
*
|
|
160
|
+
* // With "Go to dashboard" button
|
|
161
|
+
* <TableBody renderEmptyState={() => <TableEmptyStateError onButtonPress={() => navigate('/dashboard')} />}>{[]}</TableBody>
|
|
162
|
+
* ```
|
|
163
|
+
*/
|
|
164
|
+
declare const TableEmptyStateError: ({ onButtonPress, }: {
|
|
165
|
+
onButtonPress?: () => void;
|
|
166
|
+
}) => import("react/jsx-runtime").JSX.Element;
|
|
167
|
+
/**
|
|
168
|
+
* A pre-configured empty state for tables when no search results are found.
|
|
169
|
+
* Use this component to indicate that the current filters or search didn't return any results.
|
|
170
|
+
* @param props - The component props
|
|
171
|
+
* @param props.onButtonPress - Optional callback fired when the "Reset filters" button is clicked. If not provided, the button won't be rendered.
|
|
172
|
+
* @see {TableEmptyState}
|
|
173
|
+
* @example
|
|
174
|
+
* ```tsx
|
|
175
|
+
* import { TableNoSearchResults } from '@payfit/unity-components'
|
|
176
|
+
*
|
|
177
|
+
* // Without button
|
|
178
|
+
* <TableBody renderEmptyState={() => <TableNoSearchResults />}>{[]}</TableBody>
|
|
179
|
+
*
|
|
180
|
+
* // With "Reset filters" button
|
|
181
|
+
* <TableBody renderEmptyState={() => <TableNoSearchResults onButtonPress={() => clearFilters()} />}>{[]}</TableBody>
|
|
146
182
|
* ```
|
|
147
183
|
*/
|
|
148
|
-
declare const
|
|
149
|
-
|
|
184
|
+
declare const TableNoSearchResults: ({ onButtonPress, }: {
|
|
185
|
+
onButtonPress?: () => void;
|
|
186
|
+
}) => import("react/jsx-runtime").JSX.Element;
|
|
187
|
+
export { TableEmptyState, TableEmptyStateText, TableEmptyStateLoading, TableEmptyStateNoData, TableEmptyStateError, TableNoSearchResults, };
|
|
@@ -1,94 +1,161 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { forwardRef as
|
|
3
|
-
import { uyTv as
|
|
4
|
-
import { useIntl as
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
7
|
-
import
|
|
8
|
-
import
|
|
9
|
-
|
|
1
|
+
import { jsx as t, jsxs as l } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef as f, useMemo as d } from "react";
|
|
3
|
+
import { uyTv as g } from "@payfit/unity-themes";
|
|
4
|
+
import { useIntl as b, FormattedMessage as a } from "react-intl";
|
|
5
|
+
import { Button as c } from "../../button/Button.js";
|
|
6
|
+
import { EmptyState as m } from "../../empty-state/EmptyState.js";
|
|
7
|
+
import { EmptyStateActions as u } from "../../empty-state/parts/EmptyStateActions.js";
|
|
8
|
+
import { EmptyStateContent as p } from "../../empty-state/parts/EmptyStateContent.js";
|
|
9
|
+
import { EmptyStateIcon as y } from "../../empty-state/parts/EmptyStateIcon.js";
|
|
10
|
+
import { Spinner as x } from "../../spinner/Spinner.js";
|
|
11
|
+
import { Text as v } from "../../text/Text.js";
|
|
12
|
+
const w = g({
|
|
10
13
|
slots: {
|
|
11
14
|
base: "uy:flex uy:flex-col uy:items-center uy:justify-center",
|
|
12
15
|
wrapper: "uy:max-w-[300px] uy:flex uy:flex-col uy:items-center uy:py-800"
|
|
13
16
|
}
|
|
14
|
-
}),
|
|
15
|
-
(
|
|
16
|
-
const { variant:
|
|
17
|
-
switch (
|
|
17
|
+
}), E = f(
|
|
18
|
+
(e, n) => {
|
|
19
|
+
const { variant: r, children: i } = e, s = d(() => {
|
|
20
|
+
switch (r) {
|
|
18
21
|
case "title":
|
|
19
22
|
return "bodyStrong";
|
|
20
23
|
case "description":
|
|
21
24
|
default:
|
|
22
25
|
return "body";
|
|
23
26
|
}
|
|
24
|
-
}, [
|
|
25
|
-
switch (
|
|
27
|
+
}, [r]), o = d(() => {
|
|
28
|
+
switch (r) {
|
|
26
29
|
case "title":
|
|
27
30
|
return "h6";
|
|
28
31
|
case "description":
|
|
29
32
|
default:
|
|
30
33
|
return "p";
|
|
31
34
|
}
|
|
32
|
-
}, [
|
|
33
|
-
return /* @__PURE__ */
|
|
34
|
-
|
|
35
|
+
}, [r]);
|
|
36
|
+
return /* @__PURE__ */ t(
|
|
37
|
+
v,
|
|
35
38
|
{
|
|
36
39
|
variant: s,
|
|
37
|
-
asElement:
|
|
38
|
-
ref:
|
|
40
|
+
asElement: o,
|
|
41
|
+
ref: n,
|
|
39
42
|
className: "uy:text-center",
|
|
40
|
-
children:
|
|
43
|
+
children: i
|
|
41
44
|
}
|
|
42
45
|
);
|
|
43
46
|
}
|
|
44
47
|
);
|
|
45
|
-
|
|
46
|
-
const
|
|
47
|
-
({ children:
|
|
48
|
-
const { base: s, wrapper:
|
|
49
|
-
return /* @__PURE__ */
|
|
48
|
+
E.displayName = "TableEmptyStateText";
|
|
49
|
+
const h = f(
|
|
50
|
+
({ children: e, className: n, ...r }, i) => {
|
|
51
|
+
const { base: s, wrapper: o } = w();
|
|
52
|
+
return /* @__PURE__ */ t("div", { "data-dd-privacy": "allow", ...r, ref: i, className: s(), children: /* @__PURE__ */ t("div", { className: o({ className: n }), children: e }) });
|
|
50
53
|
}
|
|
51
54
|
);
|
|
52
|
-
|
|
53
|
-
const
|
|
54
|
-
const
|
|
55
|
-
return /* @__PURE__ */
|
|
56
|
-
|
|
55
|
+
h.displayName = "TableEmptyState";
|
|
56
|
+
const G = () => {
|
|
57
|
+
const e = b();
|
|
58
|
+
return /* @__PURE__ */ t(h, { children: /* @__PURE__ */ t(
|
|
59
|
+
x,
|
|
57
60
|
{
|
|
58
61
|
size: "medium",
|
|
59
|
-
label:
|
|
62
|
+
label: e.formatMessage({
|
|
60
63
|
id: "unity:component:table:empty-state:loading:title"
|
|
61
64
|
})
|
|
62
65
|
}
|
|
63
66
|
) });
|
|
64
|
-
},
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
67
|
+
}, q = ({
|
|
68
|
+
description: e,
|
|
69
|
+
onButtonPress: n
|
|
70
|
+
}) => /* @__PURE__ */ l(m, { className: "uy:max-w-[524px] uy:h-[400px] uy:justify-self-center uy:p-300", children: [
|
|
71
|
+
/* @__PURE__ */ t(y, { icon: "InfoOutlined", variant: "neutral" }),
|
|
72
|
+
/* @__PURE__ */ t(
|
|
73
|
+
p,
|
|
74
|
+
{
|
|
75
|
+
title: /* @__PURE__ */ t(
|
|
76
|
+
a,
|
|
77
|
+
{
|
|
78
|
+
id: "unity:component:empty-state:waiting-for-data:title",
|
|
79
|
+
defaultMessage: "No available results yet"
|
|
80
|
+
}
|
|
81
|
+
),
|
|
82
|
+
description: e
|
|
83
|
+
}
|
|
84
|
+
),
|
|
85
|
+
n && /* @__PURE__ */ t(u, { children: /* @__PURE__ */ t(c, { variant: "ghost", onPress: n, children: /* @__PURE__ */ t(
|
|
86
|
+
a,
|
|
87
|
+
{
|
|
88
|
+
id: "unity:component:empty-state:waiting-for-data:button-label",
|
|
89
|
+
defaultMessage: "Enable settings"
|
|
90
|
+
}
|
|
91
|
+
) }) })
|
|
92
|
+
] }), z = ({
|
|
93
|
+
onButtonPress: e
|
|
94
|
+
}) => /* @__PURE__ */ l(m, { className: "uy:max-w-[524px] uy:h-[400px] uy:justify-self-center uy:p-300", children: [
|
|
95
|
+
/* @__PURE__ */ t(y, { icon: "WarningCircleOutlined", variant: "neutral" }),
|
|
96
|
+
/* @__PURE__ */ t(
|
|
97
|
+
p,
|
|
98
|
+
{
|
|
99
|
+
title: /* @__PURE__ */ t(
|
|
100
|
+
a,
|
|
101
|
+
{
|
|
102
|
+
id: "unity:component:error-state:common:main-title",
|
|
103
|
+
defaultMessage: "Something went wrong"
|
|
104
|
+
}
|
|
105
|
+
),
|
|
106
|
+
description: /* @__PURE__ */ t(
|
|
107
|
+
a,
|
|
108
|
+
{
|
|
109
|
+
id: "unity:component:error-state:common:main-description-component",
|
|
110
|
+
defaultMessage: "Please refresh the page or check your connection. We’ve been notified of the issue and are working to resolve it as quickly as possible."
|
|
111
|
+
}
|
|
112
|
+
)
|
|
113
|
+
}
|
|
114
|
+
),
|
|
115
|
+
e && /* @__PURE__ */ t(u, { children: /* @__PURE__ */ t(c, { variant: "ghost", onPress: e, children: /* @__PURE__ */ t(
|
|
116
|
+
a,
|
|
117
|
+
{
|
|
118
|
+
id: "unity:component:error-state:button:label",
|
|
119
|
+
defaultMessage: "Go to dashboard"
|
|
120
|
+
}
|
|
121
|
+
) }) })
|
|
122
|
+
] }), A = ({
|
|
123
|
+
onButtonPress: e
|
|
124
|
+
}) => /* @__PURE__ */ l(m, { className: "uy:max-w-[524px] uy:h-[400px] uy:justify-self-center uy:p-300", children: [
|
|
125
|
+
/* @__PURE__ */ t(y, { icon: "MagnifyingGlassOutlined", variant: "neutral" }),
|
|
126
|
+
/* @__PURE__ */ t(
|
|
127
|
+
p,
|
|
128
|
+
{
|
|
129
|
+
title: /* @__PURE__ */ t(
|
|
130
|
+
a,
|
|
131
|
+
{
|
|
132
|
+
id: "unity:component:empty-state:no-search-results:title",
|
|
133
|
+
defaultMessage: "We didn't find any results"
|
|
134
|
+
}
|
|
135
|
+
),
|
|
136
|
+
description: /* @__PURE__ */ t(
|
|
137
|
+
a,
|
|
138
|
+
{
|
|
139
|
+
id: "unity:component:empty-state:no-search-results:description",
|
|
140
|
+
defaultMessage: "Try adjusting your search or filters to find what you're looking for."
|
|
141
|
+
}
|
|
142
|
+
)
|
|
143
|
+
}
|
|
144
|
+
),
|
|
145
|
+
e && /* @__PURE__ */ t(u, { children: /* @__PURE__ */ t(c, { variant: "ghost", onPress: e, children: /* @__PURE__ */ t(
|
|
146
|
+
a,
|
|
147
|
+
{
|
|
148
|
+
id: "unity:component:empty-state:no-search-results:button-label",
|
|
149
|
+
defaultMessage: "Reset filters"
|
|
150
|
+
}
|
|
151
|
+
) }) })
|
|
152
|
+
] });
|
|
87
153
|
export {
|
|
88
|
-
|
|
154
|
+
h as TableEmptyState,
|
|
89
155
|
z as TableEmptyStateError,
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
156
|
+
G as TableEmptyStateLoading,
|
|
157
|
+
q as TableEmptyStateNoData,
|
|
158
|
+
E as TableEmptyStateText,
|
|
159
|
+
A as TableNoSearchResults,
|
|
160
|
+
w as tableEmptyState
|
|
94
161
|
};
|