@ncds/ui-admin 1.8.12 → 1.8.13
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/cjs/src/components/data-display/data-grid/DataGrid.js +6 -4
- package/dist/esm/src/components/data-display/data-grid/DataGrid.js +6 -4
- package/dist/temp/src/components/data-display/data-grid/DataGrid.d.ts +1 -0
- package/dist/temp/src/components/data-display/data-grid/DataGrid.js +7 -6
- package/dist/temp/src/components/data-display/data-grid/DataGrid.types.d.ts +1 -0
- package/dist/types/src/components/data-display/data-grid/DataGrid.d.ts +1 -0
- package/dist/types/src/components/data-display/data-grid/DataGrid.types.d.ts +1 -0
- package/dist/ui-admin/assets/styles/style.css +11 -0
- package/package.json +1 -1
|
@@ -148,7 +148,7 @@ const sortChildren = children => {
|
|
|
148
148
|
});
|
|
149
149
|
return result;
|
|
150
150
|
};
|
|
151
|
-
const hasTableWrapperContent = sorted => sorted.filterBar.length > 0 || sorted.topActionBar.length > 0 || sorted.dataTable.length > 0 || sorted.bottomActionBar.length > 0;
|
|
151
|
+
const hasTableWrapperContent = (sorted, actionBarVisible) => sorted.filterBar.length > 0 || actionBarVisible && sorted.topActionBar.length > 0 || sorted.dataTable.length > 0 || actionBarVisible && sorted.bottomActionBar.length > 0;
|
|
152
152
|
const isTableSelectable = dataTable => dataTable.some(child => /*#__PURE__*/(0, _react.isValidElement)(child) && child.props.selectable === true);
|
|
153
153
|
// ──────────────────────────────────────────────
|
|
154
154
|
// Main DataGrid component
|
|
@@ -158,17 +158,19 @@ const DataGridComponent = /*#__PURE__*/(0, _react.forwardRef)((_ref7, ref) => {
|
|
|
158
158
|
variant = 'search-result',
|
|
159
159
|
children,
|
|
160
160
|
className,
|
|
161
|
+
showActionBar,
|
|
161
162
|
...rest
|
|
162
163
|
} = _ref7;
|
|
163
164
|
const sorted = sortChildren(children);
|
|
164
|
-
const
|
|
165
|
+
const actionBarVisible = showActionBar !== false;
|
|
166
|
+
const needsEmptyBottomBar = actionBarVisible && sorted.bottomActionBar.length === 0 && isTableSelectable(sorted.dataTable);
|
|
165
167
|
return (0, _jsxRuntime.jsxs)("div", {
|
|
166
168
|
ref: ref,
|
|
167
169
|
className: (0, _classnames.default)('ncua-data-grid', className, `ncua-data-grid--${variant}`),
|
|
168
170
|
...rest,
|
|
169
|
-
children: [sorted.searchFilter, sorted.summary, hasTableWrapperContent(sorted) && (0, _jsxRuntime.jsxs)("div", {
|
|
171
|
+
children: [sorted.searchFilter, sorted.summary, hasTableWrapperContent(sorted, actionBarVisible) && (0, _jsxRuntime.jsxs)("div", {
|
|
170
172
|
className: "ncua-data-grid__table-wrapper",
|
|
171
|
-
children: [sorted.filterBar, sorted.topActionBar, sorted.dataTable, sorted.bottomActionBar, needsEmptyBottomBar && (0, _jsxRuntime.jsx)("div", {
|
|
173
|
+
children: [sorted.filterBar, actionBarVisible && sorted.topActionBar, sorted.dataTable, actionBarVisible && sorted.bottomActionBar, needsEmptyBottomBar && (0, _jsxRuntime.jsx)("div", {
|
|
172
174
|
className: "ncua-data-grid__action-bar ncua-data-grid__action-bar--bottom"
|
|
173
175
|
})]
|
|
174
176
|
}), sorted.pagination]
|
|
@@ -141,7 +141,7 @@ const sortChildren = children => {
|
|
|
141
141
|
});
|
|
142
142
|
return result;
|
|
143
143
|
};
|
|
144
|
-
const hasTableWrapperContent = sorted => sorted.filterBar.length > 0 || sorted.topActionBar.length > 0 || sorted.dataTable.length > 0 || sorted.bottomActionBar.length > 0;
|
|
144
|
+
const hasTableWrapperContent = (sorted, actionBarVisible) => sorted.filterBar.length > 0 || actionBarVisible && sorted.topActionBar.length > 0 || sorted.dataTable.length > 0 || actionBarVisible && sorted.bottomActionBar.length > 0;
|
|
145
145
|
const isTableSelectable = dataTable => dataTable.some(child => /*#__PURE__*/isValidElement(child) && child.props.selectable === true);
|
|
146
146
|
// ──────────────────────────────────────────────
|
|
147
147
|
// Main DataGrid component
|
|
@@ -151,17 +151,19 @@ const DataGridComponent = /*#__PURE__*/forwardRef((_ref7, ref) => {
|
|
|
151
151
|
variant = 'search-result',
|
|
152
152
|
children,
|
|
153
153
|
className,
|
|
154
|
+
showActionBar,
|
|
154
155
|
...rest
|
|
155
156
|
} = _ref7;
|
|
156
157
|
const sorted = sortChildren(children);
|
|
157
|
-
const
|
|
158
|
+
const actionBarVisible = showActionBar !== false;
|
|
159
|
+
const needsEmptyBottomBar = actionBarVisible && sorted.bottomActionBar.length === 0 && isTableSelectable(sorted.dataTable);
|
|
158
160
|
return _jsxs("div", {
|
|
159
161
|
ref: ref,
|
|
160
162
|
className: classNames('ncua-data-grid', className, `ncua-data-grid--${variant}`),
|
|
161
163
|
...rest,
|
|
162
|
-
children: [sorted.searchFilter, sorted.summary, hasTableWrapperContent(sorted) && _jsxs("div", {
|
|
164
|
+
children: [sorted.searchFilter, sorted.summary, hasTableWrapperContent(sorted, actionBarVisible) && _jsxs("div", {
|
|
163
165
|
className: "ncua-data-grid__table-wrapper",
|
|
164
|
-
children: [sorted.filterBar, sorted.topActionBar, sorted.dataTable, sorted.bottomActionBar, needsEmptyBottomBar && _jsx("div", {
|
|
166
|
+
children: [sorted.filterBar, actionBarVisible && sorted.topActionBar, sorted.dataTable, actionBarVisible && sorted.bottomActionBar, needsEmptyBottomBar && _jsx("div", {
|
|
165
167
|
className: "ncua-data-grid__action-bar ncua-data-grid__action-bar--bottom"
|
|
166
168
|
})]
|
|
167
169
|
}), sorted.pagination]
|
|
@@ -3,6 +3,7 @@ import type { DataGridActionBarProps, DataGridFilterBarProps, DataGridPagination
|
|
|
3
3
|
export declare const DataGrid: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
4
4
|
variant?: import("./DataGrid.types").DataGridVariant | undefined;
|
|
5
5
|
children: ReactNode;
|
|
6
|
+
showActionBar?: boolean | undefined;
|
|
6
7
|
} & import("react").RefAttributes<HTMLDivElement>> & {
|
|
7
8
|
SearchFilter: {
|
|
8
9
|
({ children, className, ...rest }: DataGridSearchFilterProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -61,18 +61,19 @@ const sortChildren = (children) => {
|
|
|
61
61
|
});
|
|
62
62
|
return result;
|
|
63
63
|
};
|
|
64
|
-
const hasTableWrapperContent = (sorted) => sorted.filterBar.length > 0 ||
|
|
65
|
-
sorted.topActionBar.length > 0 ||
|
|
64
|
+
const hasTableWrapperContent = (sorted, actionBarVisible) => sorted.filterBar.length > 0 ||
|
|
65
|
+
(actionBarVisible && sorted.topActionBar.length > 0) ||
|
|
66
66
|
sorted.dataTable.length > 0 ||
|
|
67
|
-
sorted.bottomActionBar.length > 0;
|
|
67
|
+
(actionBarVisible && sorted.bottomActionBar.length > 0);
|
|
68
68
|
const isTableSelectable = (dataTable) => dataTable.some((child) => isValidElement(child) && child.props.selectable === true);
|
|
69
69
|
// ──────────────────────────────────────────────
|
|
70
70
|
// Main DataGrid component
|
|
71
71
|
// ──────────────────────────────────────────────
|
|
72
|
-
const DataGridComponent = forwardRef(({ variant = 'search-result', children, className, ...rest }, ref) => {
|
|
72
|
+
const DataGridComponent = forwardRef(({ variant = 'search-result', children, className, showActionBar, ...rest }, ref) => {
|
|
73
73
|
const sorted = sortChildren(children);
|
|
74
|
-
const
|
|
75
|
-
|
|
74
|
+
const actionBarVisible = showActionBar !== false;
|
|
75
|
+
const needsEmptyBottomBar = actionBarVisible && sorted.bottomActionBar.length === 0 && isTableSelectable(sorted.dataTable);
|
|
76
|
+
return (_jsxs("div", { ref: ref, className: classNames('ncua-data-grid', className, `ncua-data-grid--${variant}`), ...rest, children: [sorted.searchFilter, sorted.summary, hasTableWrapperContent(sorted, actionBarVisible) && (_jsxs("div", { className: "ncua-data-grid__table-wrapper", children: [sorted.filterBar, actionBarVisible && sorted.topActionBar, sorted.dataTable, actionBarVisible && sorted.bottomActionBar, needsEmptyBottomBar && _jsx("div", { className: "ncua-data-grid__action-bar ncua-data-grid__action-bar--bottom" })] })), sorted.pagination] }));
|
|
76
77
|
});
|
|
77
78
|
DataGridComponent.displayName = 'DataGrid';
|
|
78
79
|
// ──────────────────────────────────────────────
|
|
@@ -6,6 +6,7 @@ export type ActionBarAlign = 'left' | 'right' | 'space-between';
|
|
|
6
6
|
export type DataGridProps = Omit<ComponentProps<'div'>, 'ref'> & {
|
|
7
7
|
variant?: DataGridVariant;
|
|
8
8
|
children: ReactNode;
|
|
9
|
+
showActionBar?: boolean;
|
|
9
10
|
};
|
|
10
11
|
export type DataGridSearchFilterProps = ComponentProps<'div'> & {
|
|
11
12
|
children: ReactNode;
|
|
@@ -3,6 +3,7 @@ import type { DataGridActionBarProps, DataGridFilterBarProps, DataGridPagination
|
|
|
3
3
|
export declare const DataGrid: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
4
4
|
variant?: import("./DataGrid.types").DataGridVariant | undefined;
|
|
5
5
|
children: ReactNode;
|
|
6
|
+
showActionBar?: boolean | undefined;
|
|
6
7
|
} & import("react").RefAttributes<HTMLDivElement>> & {
|
|
7
8
|
SearchFilter: {
|
|
8
9
|
({ children, className, ...rest }: DataGridSearchFilterProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -6,6 +6,7 @@ export type ActionBarAlign = 'left' | 'right' | 'space-between';
|
|
|
6
6
|
export type DataGridProps = Omit<ComponentProps<'div'>, 'ref'> & {
|
|
7
7
|
variant?: DataGridVariant;
|
|
8
8
|
children: ReactNode;
|
|
9
|
+
showActionBar?: boolean;
|
|
9
10
|
};
|
|
10
11
|
export type DataGridSearchFilterProps = ComponentProps<'div'> & {
|
|
11
12
|
children: ReactNode;
|
|
@@ -6818,12 +6818,23 @@ button {
|
|
|
6818
6818
|
.ncua-data-grid__table:first-child {
|
|
6819
6819
|
border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
|
|
6820
6820
|
}
|
|
6821
|
+
.ncua-data-grid__table:first-child .ncua-table {
|
|
6822
|
+
border-top-left-radius: var(--border-radius-md);
|
|
6823
|
+
border-top-right-radius: var(--border-radius-md);
|
|
6824
|
+
}
|
|
6821
6825
|
.ncua-data-grid__table:last-child {
|
|
6822
6826
|
border-radius: 0 0 var(--border-radius-md) var(--border-radius-md);
|
|
6823
6827
|
}
|
|
6828
|
+
.ncua-data-grid__table:last-child .ncua-table {
|
|
6829
|
+
border-bottom-left-radius: var(--border-radius-md);
|
|
6830
|
+
border-bottom-right-radius: var(--border-radius-md);
|
|
6831
|
+
}
|
|
6824
6832
|
.ncua-data-grid__table:first-child:last-child {
|
|
6825
6833
|
border-radius: var(--border-radius-md);
|
|
6826
6834
|
}
|
|
6835
|
+
.ncua-data-grid__table:first-child:last-child .ncua-table {
|
|
6836
|
+
border-radius: var(--border-radius-md);
|
|
6837
|
+
}
|
|
6827
6838
|
.ncua-data-grid__table .ncua-table-wrapper {
|
|
6828
6839
|
border: none;
|
|
6829
6840
|
box-shadow: none;
|