@hitachivantara/uikit-react-lab 3.49.6 → 3.50.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/Controls/Controls.d.ts +5 -5
- package/dist/Table/hooks/index.d.ts +7 -1
- package/dist/Table/hooks/index.js +22 -6
- package/dist/Table/hooks/index.js.map +1 -1
- package/dist/Table/hooks/useFilters.d.ts +5 -0
- package/dist/Table/hooks/useFilters.js +12 -0
- package/dist/Table/hooks/useFilters.js.map +1 -0
- package/dist/Table/hooks/useGlobalFilter.d.ts +5 -0
- package/dist/Table/hooks/useGlobalFilter.js +12 -0
- package/dist/Table/hooks/useGlobalFilter.js.map +1 -0
- package/dist/Table/stories/TableHooks.stories.mdx +8 -8
- package/dist/legacy/Controls/Controls.d.ts +5 -5
- package/dist/legacy/Table/hooks/index.d.ts +7 -1
- package/dist/legacy/Table/hooks/index.js +3 -1
- package/dist/legacy/Table/hooks/index.js.map +1 -1
- package/dist/legacy/Table/hooks/useFilters.d.ts +5 -0
- package/dist/legacy/Table/hooks/useFilters.js +3 -0
- package/dist/legacy/Table/hooks/useFilters.js.map +1 -0
- package/dist/legacy/Table/hooks/useGlobalFilter.d.ts +5 -0
- package/dist/legacy/Table/hooks/useGlobalFilter.js +3 -0
- package/dist/legacy/Table/hooks/useGlobalFilter.js.map +1 -0
- package/dist/legacy/Table/stories/TableHooks.stories.mdx +8 -8
- package/dist/modern/Controls/Controls.d.ts +5 -5
- package/dist/modern/Table/hooks/index.d.ts +7 -1
- package/dist/modern/Table/hooks/index.js +3 -1
- package/dist/modern/Table/hooks/index.js.map +1 -1
- package/dist/modern/Table/hooks/useFilters.d.ts +5 -0
- package/dist/modern/Table/hooks/useFilters.js +3 -0
- package/dist/modern/Table/hooks/useFilters.js.map +1 -0
- package/dist/modern/Table/hooks/useGlobalFilter.d.ts +5 -0
- package/dist/modern/Table/hooks/useGlobalFilter.js +3 -0
- package/dist/modern/Table/hooks/useGlobalFilter.js.map +1 -0
- package/dist/modern/Table/stories/TableHooks.stories.mdx +8 -8
- package/package.json +10 -24
|
@@ -7,16 +7,16 @@ export interface HvControlsSortValue {
|
|
|
7
7
|
desc: string;
|
|
8
8
|
}
|
|
9
9
|
export interface HvControlsViewConfiguration extends Record<string, unknown> {
|
|
10
|
-
setSortBy?: (v: HvControlsSortValue[]) => void;
|
|
11
|
-
setGlobalFilter?: (v: string) => void;
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
export interface HvControlsCallbacks extends Record<string, unknown> {
|
|
15
10
|
id: string;
|
|
16
11
|
label: string;
|
|
17
12
|
icon: React.ReactNode;
|
|
18
13
|
}
|
|
19
14
|
|
|
15
|
+
export interface HvControlsCallbacks extends Record<string, unknown> {
|
|
16
|
+
setSortBy?: (v: HvControlsSortValue[]) => void;
|
|
17
|
+
setGlobalFilter?: (v: string) => void;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
20
|
export interface HvControlsProps
|
|
21
21
|
extends StandardProps<React.HTMLAttributes<HTMLDivElement>, HvControlsClassKey> {
|
|
22
22
|
/** Children to be rendered. */
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { default as
|
|
1
|
+
export { default as useHvData } from "./useTable";
|
|
2
2
|
export * from "./useTable";
|
|
3
3
|
|
|
4
4
|
export { default as useHvTableStyles } from "./useTableStyles";
|
|
@@ -27,3 +27,9 @@ export * from "./useHeaderGroups";
|
|
|
27
27
|
|
|
28
28
|
export { default as useHvResizeColumns } from "./useResizeColumns";
|
|
29
29
|
export * from "./useResizeColumns";
|
|
30
|
+
|
|
31
|
+
export { default as useHvGlobalFilter } from "./useGlobalFilter";
|
|
32
|
+
export * from "./useGlobalFilter";
|
|
33
|
+
|
|
34
|
+
export { default as useHvFilters } from "./useFilters";
|
|
35
|
+
export * from "./useFilters";
|
|
@@ -11,6 +11,24 @@ Object.defineProperty(exports, "useHvBulkActions", {
|
|
|
11
11
|
return _useBulkActions.default;
|
|
12
12
|
}
|
|
13
13
|
});
|
|
14
|
+
Object.defineProperty(exports, "useHvData", {
|
|
15
|
+
enumerable: true,
|
|
16
|
+
get: function get() {
|
|
17
|
+
return _useTable.default;
|
|
18
|
+
}
|
|
19
|
+
});
|
|
20
|
+
Object.defineProperty(exports, "useHvFilters", {
|
|
21
|
+
enumerable: true,
|
|
22
|
+
get: function get() {
|
|
23
|
+
return _useFilters.default;
|
|
24
|
+
}
|
|
25
|
+
});
|
|
26
|
+
Object.defineProperty(exports, "useHvGlobalFilter", {
|
|
27
|
+
enumerable: true,
|
|
28
|
+
get: function get() {
|
|
29
|
+
return _useGlobalFilter.default;
|
|
30
|
+
}
|
|
31
|
+
});
|
|
14
32
|
Object.defineProperty(exports, "useHvHeaderGroups", {
|
|
15
33
|
enumerable: true,
|
|
16
34
|
get: function get() {
|
|
@@ -47,12 +65,6 @@ Object.defineProperty(exports, "useHvSortBy", {
|
|
|
47
65
|
return _useSortBy.default;
|
|
48
66
|
}
|
|
49
67
|
});
|
|
50
|
-
Object.defineProperty(exports, "useHvTable", {
|
|
51
|
-
enumerable: true,
|
|
52
|
-
get: function get() {
|
|
53
|
-
return _useTable.default;
|
|
54
|
-
}
|
|
55
|
-
});
|
|
56
68
|
Object.defineProperty(exports, "useHvTableSticky", {
|
|
57
69
|
enumerable: true,
|
|
58
70
|
get: function get() {
|
|
@@ -85,4 +97,8 @@ var _useRowExpand = _interopRequireDefault(require("./useRowExpand"));
|
|
|
85
97
|
var _useHeaderGroups = _interopRequireDefault(require("./useHeaderGroups"));
|
|
86
98
|
|
|
87
99
|
var _useResizeColumns = _interopRequireDefault(require("./useResizeColumns"));
|
|
100
|
+
|
|
101
|
+
var _useGlobalFilter = _interopRequireDefault(require("./useGlobalFilter"));
|
|
102
|
+
|
|
103
|
+
var _useFilters = _interopRequireDefault(require("./useFilters"));
|
|
88
104
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../../src/Table/hooks/index.js"],"sourcesContent":["export { default as
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../../src/Table/hooks/index.js"],"sourcesContent":["export { default as useHvData } from \"./useTable\";\nexport { default as useHvTableStyles } from \"./useTableStyles\";\nexport { default as useHvSortBy } from \"./useSortBy\";\nexport { default as useHvTableSticky } from \"./useSticky\";\nexport { default as useHvPagination } from \"./usePagination\";\nexport { default as useHvRowSelection } from \"./useRowSelection\";\nexport { default as useHvBulkActions } from \"./useBulkActions\";\nexport { default as useHvRowExpand } from \"./useRowExpand\";\nexport { default as useHvHeaderGroups } from \"./useHeaderGroups\";\nexport { default as useHvResizeColumns } from \"./useResizeColumns\";\nexport { default as useHvGlobalFilter } from \"./useGlobalFilter\";\nexport { default as useHvFilters } from \"./useFilters\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
|
|
8
|
+
var _reactTable = require("react-table");
|
|
9
|
+
|
|
10
|
+
var _default = _reactTable.useFilters;
|
|
11
|
+
exports.default = _default;
|
|
12
|
+
//# sourceMappingURL=useFilters.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useFilters.js","names":["useHvFilters"],"sources":["../../../src/Table/hooks/useFilters.js"],"sourcesContent":["import { useFilters as useHvFilters } from \"react-table\";\n\nexport default useHvFilters;\n"],"mappings":";;;;;;;AAAA;;eAEeA,sB"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
|
|
8
|
+
var _reactTable = require("react-table");
|
|
9
|
+
|
|
10
|
+
var _default = _reactTable.useGlobalFilter;
|
|
11
|
+
exports.default = _default;
|
|
12
|
+
//# sourceMappingURL=useGlobalFilter.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useGlobalFilter.js","names":["useHvGlobalFilter"],"sources":["../../../src/Table/hooks/useGlobalFilter.js"],"sourcesContent":["import { useGlobalFilter as useHvGlobalFilter } from \"react-table\";\n\nexport default useHvGlobalFilter;\n"],"mappings":";;;;;;;AAAA;;eAEeA,2B"}
|
|
@@ -18,7 +18,7 @@ Our custom hooks are built on top of [React Table](https://react-table.tanstack.
|
|
|
18
18
|
|
|
19
19
|
## `useHv*` hooks
|
|
20
20
|
|
|
21
|
-
For further ease, you can use the provided `
|
|
21
|
+
For further ease, you can use the provided `useHvData` hook that wraps the [React Table's `useTable` hook](https://react-table.tanstack.com/docs/api/useTable) and
|
|
22
22
|
provides the following functionality:
|
|
23
23
|
|
|
24
24
|
- Ensures the use of the needed core and layout plugins when using any of the UI Kit custom hooks (e.g. adding `useHvPagination` implies the instalation of React Table's `usePagination` hook).
|
|
@@ -26,10 +26,10 @@ provides the following functionality:
|
|
|
26
26
|
- Generates default column metadata from the data fields, if the `columns` option is missing.
|
|
27
27
|
- Defaults to an empty array if no `data` is provided.
|
|
28
28
|
|
|
29
|
-
<Usage>{'import {
|
|
29
|
+
<Usage>{'import { useHvData } from "@hitachivantara/uikit-react-lab";'}</Usage>
|
|
30
30
|
|
|
31
31
|
<Preview withToolbar>
|
|
32
|
-
<Story inline story={stories.
|
|
32
|
+
<Story inline story={stories.UseHvData} />
|
|
33
33
|
</Preview>
|
|
34
34
|
|
|
35
35
|
The following plugin hooks are available:
|
|
@@ -62,7 +62,7 @@ Check [React Table's `usePagination` documentation](https://react-table.tanstack
|
|
|
62
62
|
|
|
63
63
|
The `useHvPagination` hook makes the `getHvPaginationProps` function available on the table instance returned that can be used to setup a `HvPagination` component.
|
|
64
64
|
|
|
65
|
-
_Note: This hook depends on the `usePagination` hook from `react-table`, but when using `
|
|
65
|
+
_Note: This hook depends on the `usePagination` hook from `react-table`, but when using `useHvData` only `useHvPagination` needs to be installed._
|
|
66
66
|
|
|
67
67
|
<Preview withToolbar>
|
|
68
68
|
<Story inline story={stories.Pagination} />
|
|
@@ -96,7 +96,7 @@ Rows can also be selected in bulk and actions can be performed on the current se
|
|
|
96
96
|
|
|
97
97
|
The `useHvBulkActions` hook makes the `getHvBulkActionsProps` function available on the table instance returned that can be used to setup a `HvBulkActions` component.
|
|
98
98
|
|
|
99
|
-
_Note: This hook depends on the `useRowSelect` hook from `react-table`, but when using `
|
|
99
|
+
_Note: This hook depends on the `useRowSelect` hook from `react-table`, but when using `useHvData` only `useHvBulkActions` needs to be installed._
|
|
100
100
|
|
|
101
101
|
<Preview withToolbar>
|
|
102
102
|
<Story inline story={stories.BulkActions} />
|
|
@@ -111,7 +111,7 @@ Check [React Table's `useSortBy` documentation](https://react-table.tanstack.com
|
|
|
111
111
|
|
|
112
112
|
The `useHvSortBy` hook ensures that the proper properties are injected in the `HvTableHeader` (including the on click sorting trigger) and `HvTableCell` (for styling).
|
|
113
113
|
|
|
114
|
-
_Note: This hook depends on the `useSortBy` hook from `react-table`, but when using `
|
|
114
|
+
_Note: This hook depends on the `useSortBy` hook from `react-table`, but when using `useHvData` only `useHvSortBy` needs to be installed._
|
|
115
115
|
|
|
116
116
|
<Preview withToolbar>
|
|
117
117
|
<Story inline story={stories.Sortable} />
|
|
@@ -125,7 +125,7 @@ Check [React Table's `useExpanded` documentation](https://react-table.tanstack.c
|
|
|
125
125
|
|
|
126
126
|
The `useHvRowExpand` hook injects a `HvButton` into the first data column that toggles each row expansion. If the column has a custom renderer, an extra column is created instead.
|
|
127
127
|
|
|
128
|
-
_Note: This hook depends on the `useExpanded` hook from `react-table`, but when using `
|
|
128
|
+
_Note: This hook depends on the `useExpanded` hook from `react-table`, but when using `useHvData` only `useHvRowExpand` needs to be installed._
|
|
129
129
|
|
|
130
130
|
<Preview withToolbar>
|
|
131
131
|
<Story inline story={stories.Expandable} />
|
|
@@ -270,7 +270,7 @@ doing the drag/drop operation via `SPACE + ARROW` Keys.
|
|
|
270
270
|
|
|
271
271
|
## Column Resize
|
|
272
272
|
|
|
273
|
-
Columns can be resized using the useHvResizeColumn hook, which leverages the react-table capabilities.
|
|
273
|
+
Columns can be resized using the useHvResizeColumn hook, which leverages the react-table capabilities.
|
|
274
274
|
Resize, although not an accessible functionality, it allows columns to be resizable via dragging column right border.
|
|
275
275
|
|
|
276
276
|
<Preview withToolbar>
|
|
@@ -7,16 +7,16 @@ export interface HvControlsSortValue {
|
|
|
7
7
|
desc: string;
|
|
8
8
|
}
|
|
9
9
|
export interface HvControlsViewConfiguration extends Record<string, unknown> {
|
|
10
|
-
setSortBy?: (v: HvControlsSortValue[]) => void;
|
|
11
|
-
setGlobalFilter?: (v: string) => void;
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
export interface HvControlsCallbacks extends Record<string, unknown> {
|
|
15
10
|
id: string;
|
|
16
11
|
label: string;
|
|
17
12
|
icon: React.ReactNode;
|
|
18
13
|
}
|
|
19
14
|
|
|
15
|
+
export interface HvControlsCallbacks extends Record<string, unknown> {
|
|
16
|
+
setSortBy?: (v: HvControlsSortValue[]) => void;
|
|
17
|
+
setGlobalFilter?: (v: string) => void;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
20
|
export interface HvControlsProps
|
|
21
21
|
extends StandardProps<React.HTMLAttributes<HTMLDivElement>, HvControlsClassKey> {
|
|
22
22
|
/** Children to be rendered. */
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { default as
|
|
1
|
+
export { default as useHvData } from "./useTable";
|
|
2
2
|
export * from "./useTable";
|
|
3
3
|
|
|
4
4
|
export { default as useHvTableStyles } from "./useTableStyles";
|
|
@@ -27,3 +27,9 @@ export * from "./useHeaderGroups";
|
|
|
27
27
|
|
|
28
28
|
export { default as useHvResizeColumns } from "./useResizeColumns";
|
|
29
29
|
export * from "./useResizeColumns";
|
|
30
|
+
|
|
31
|
+
export { default as useHvGlobalFilter } from "./useGlobalFilter";
|
|
32
|
+
export * from "./useGlobalFilter";
|
|
33
|
+
|
|
34
|
+
export { default as useHvFilters } from "./useFilters";
|
|
35
|
+
export * from "./useFilters";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { default as
|
|
1
|
+
export { default as useHvData } from "./useTable";
|
|
2
2
|
export { default as useHvTableStyles } from "./useTableStyles";
|
|
3
3
|
export { default as useHvSortBy } from "./useSortBy";
|
|
4
4
|
export { default as useHvTableSticky } from "./useSticky";
|
|
@@ -8,4 +8,6 @@ export { default as useHvBulkActions } from "./useBulkActions";
|
|
|
8
8
|
export { default as useHvRowExpand } from "./useRowExpand";
|
|
9
9
|
export { default as useHvHeaderGroups } from "./useHeaderGroups";
|
|
10
10
|
export { default as useHvResizeColumns } from "./useResizeColumns";
|
|
11
|
+
export { default as useHvGlobalFilter } from "./useGlobalFilter";
|
|
12
|
+
export { default as useHvFilters } from "./useFilters";
|
|
11
13
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["default","
|
|
1
|
+
{"version":3,"file":"index.js","names":["default","useHvData","useHvTableStyles","useHvSortBy","useHvTableSticky","useHvPagination","useHvRowSelection","useHvBulkActions","useHvRowExpand","useHvHeaderGroups","useHvResizeColumns","useHvGlobalFilter","useHvFilters"],"sources":["../../../../src/Table/hooks/index.js"],"sourcesContent":["export { default as useHvData } from \"./useTable\";\nexport { default as useHvTableStyles } from \"./useTableStyles\";\nexport { default as useHvSortBy } from \"./useSortBy\";\nexport { default as useHvTableSticky } from \"./useSticky\";\nexport { default as useHvPagination } from \"./usePagination\";\nexport { default as useHvRowSelection } from \"./useRowSelection\";\nexport { default as useHvBulkActions } from \"./useBulkActions\";\nexport { default as useHvRowExpand } from \"./useRowExpand\";\nexport { default as useHvHeaderGroups } from \"./useHeaderGroups\";\nexport { default as useHvResizeColumns } from \"./useResizeColumns\";\nexport { default as useHvGlobalFilter } from \"./useGlobalFilter\";\nexport { default as useHvFilters } from \"./useFilters\";\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,SAApB,QAAqC,YAArC;AACA,SAASD,OAAO,IAAIE,gBAApB,QAA4C,kBAA5C;AACA,SAASF,OAAO,IAAIG,WAApB,QAAuC,aAAvC;AACA,SAASH,OAAO,IAAII,gBAApB,QAA4C,aAA5C;AACA,SAASJ,OAAO,IAAIK,eAApB,QAA2C,iBAA3C;AACA,SAASL,OAAO,IAAIM,iBAApB,QAA6C,mBAA7C;AACA,SAASN,OAAO,IAAIO,gBAApB,QAA4C,kBAA5C;AACA,SAASP,OAAO,IAAIQ,cAApB,QAA0C,gBAA1C;AACA,SAASR,OAAO,IAAIS,iBAApB,QAA6C,mBAA7C;AACA,SAAST,OAAO,IAAIU,kBAApB,QAA8C,oBAA9C;AACA,SAASV,OAAO,IAAIW,iBAApB,QAA6C,mBAA7C;AACA,SAASX,OAAO,IAAIY,YAApB,QAAwC,cAAxC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useFilters.js","names":["useFilters","useHvFilters"],"sources":["../../../../src/Table/hooks/useFilters.js"],"sourcesContent":["import { useFilters as useHvFilters } from \"react-table\";\n\nexport default useHvFilters;\n"],"mappings":"AAAA,SAASA,UAAU,IAAIC,YAAvB,QAA2C,aAA3C;AAEA,eAAeA,YAAf"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useGlobalFilter.js","names":["useGlobalFilter","useHvGlobalFilter"],"sources":["../../../../src/Table/hooks/useGlobalFilter.js"],"sourcesContent":["import { useGlobalFilter as useHvGlobalFilter } from \"react-table\";\n\nexport default useHvGlobalFilter;\n"],"mappings":"AAAA,SAASA,eAAe,IAAIC,iBAA5B,QAAqD,aAArD;AAEA,eAAeA,iBAAf"}
|
|
@@ -18,7 +18,7 @@ Our custom hooks are built on top of [React Table](https://react-table.tanstack.
|
|
|
18
18
|
|
|
19
19
|
## `useHv*` hooks
|
|
20
20
|
|
|
21
|
-
For further ease, you can use the provided `
|
|
21
|
+
For further ease, you can use the provided `useHvData` hook that wraps the [React Table's `useTable` hook](https://react-table.tanstack.com/docs/api/useTable) and
|
|
22
22
|
provides the following functionality:
|
|
23
23
|
|
|
24
24
|
- Ensures the use of the needed core and layout plugins when using any of the UI Kit custom hooks (e.g. adding `useHvPagination` implies the instalation of React Table's `usePagination` hook).
|
|
@@ -26,10 +26,10 @@ provides the following functionality:
|
|
|
26
26
|
- Generates default column metadata from the data fields, if the `columns` option is missing.
|
|
27
27
|
- Defaults to an empty array if no `data` is provided.
|
|
28
28
|
|
|
29
|
-
<Usage>{'import {
|
|
29
|
+
<Usage>{'import { useHvData } from "@hitachivantara/uikit-react-lab";'}</Usage>
|
|
30
30
|
|
|
31
31
|
<Preview withToolbar>
|
|
32
|
-
<Story inline story={stories.
|
|
32
|
+
<Story inline story={stories.UseHvData} />
|
|
33
33
|
</Preview>
|
|
34
34
|
|
|
35
35
|
The following plugin hooks are available:
|
|
@@ -62,7 +62,7 @@ Check [React Table's `usePagination` documentation](https://react-table.tanstack
|
|
|
62
62
|
|
|
63
63
|
The `useHvPagination` hook makes the `getHvPaginationProps` function available on the table instance returned that can be used to setup a `HvPagination` component.
|
|
64
64
|
|
|
65
|
-
_Note: This hook depends on the `usePagination` hook from `react-table`, but when using `
|
|
65
|
+
_Note: This hook depends on the `usePagination` hook from `react-table`, but when using `useHvData` only `useHvPagination` needs to be installed._
|
|
66
66
|
|
|
67
67
|
<Preview withToolbar>
|
|
68
68
|
<Story inline story={stories.Pagination} />
|
|
@@ -96,7 +96,7 @@ Rows can also be selected in bulk and actions can be performed on the current se
|
|
|
96
96
|
|
|
97
97
|
The `useHvBulkActions` hook makes the `getHvBulkActionsProps` function available on the table instance returned that can be used to setup a `HvBulkActions` component.
|
|
98
98
|
|
|
99
|
-
_Note: This hook depends on the `useRowSelect` hook from `react-table`, but when using `
|
|
99
|
+
_Note: This hook depends on the `useRowSelect` hook from `react-table`, but when using `useHvData` only `useHvBulkActions` needs to be installed._
|
|
100
100
|
|
|
101
101
|
<Preview withToolbar>
|
|
102
102
|
<Story inline story={stories.BulkActions} />
|
|
@@ -111,7 +111,7 @@ Check [React Table's `useSortBy` documentation](https://react-table.tanstack.com
|
|
|
111
111
|
|
|
112
112
|
The `useHvSortBy` hook ensures that the proper properties are injected in the `HvTableHeader` (including the on click sorting trigger) and `HvTableCell` (for styling).
|
|
113
113
|
|
|
114
|
-
_Note: This hook depends on the `useSortBy` hook from `react-table`, but when using `
|
|
114
|
+
_Note: This hook depends on the `useSortBy` hook from `react-table`, but when using `useHvData` only `useHvSortBy` needs to be installed._
|
|
115
115
|
|
|
116
116
|
<Preview withToolbar>
|
|
117
117
|
<Story inline story={stories.Sortable} />
|
|
@@ -125,7 +125,7 @@ Check [React Table's `useExpanded` documentation](https://react-table.tanstack.c
|
|
|
125
125
|
|
|
126
126
|
The `useHvRowExpand` hook injects a `HvButton` into the first data column that toggles each row expansion. If the column has a custom renderer, an extra column is created instead.
|
|
127
127
|
|
|
128
|
-
_Note: This hook depends on the `useExpanded` hook from `react-table`, but when using `
|
|
128
|
+
_Note: This hook depends on the `useExpanded` hook from `react-table`, but when using `useHvData` only `useHvRowExpand` needs to be installed._
|
|
129
129
|
|
|
130
130
|
<Preview withToolbar>
|
|
131
131
|
<Story inline story={stories.Expandable} />
|
|
@@ -270,7 +270,7 @@ doing the drag/drop operation via `SPACE + ARROW` Keys.
|
|
|
270
270
|
|
|
271
271
|
## Column Resize
|
|
272
272
|
|
|
273
|
-
Columns can be resized using the useHvResizeColumn hook, which leverages the react-table capabilities.
|
|
273
|
+
Columns can be resized using the useHvResizeColumn hook, which leverages the react-table capabilities.
|
|
274
274
|
Resize, although not an accessible functionality, it allows columns to be resizable via dragging column right border.
|
|
275
275
|
|
|
276
276
|
<Preview withToolbar>
|
|
@@ -7,16 +7,16 @@ export interface HvControlsSortValue {
|
|
|
7
7
|
desc: string;
|
|
8
8
|
}
|
|
9
9
|
export interface HvControlsViewConfiguration extends Record<string, unknown> {
|
|
10
|
-
setSortBy?: (v: HvControlsSortValue[]) => void;
|
|
11
|
-
setGlobalFilter?: (v: string) => void;
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
export interface HvControlsCallbacks extends Record<string, unknown> {
|
|
15
10
|
id: string;
|
|
16
11
|
label: string;
|
|
17
12
|
icon: React.ReactNode;
|
|
18
13
|
}
|
|
19
14
|
|
|
15
|
+
export interface HvControlsCallbacks extends Record<string, unknown> {
|
|
16
|
+
setSortBy?: (v: HvControlsSortValue[]) => void;
|
|
17
|
+
setGlobalFilter?: (v: string) => void;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
20
|
export interface HvControlsProps
|
|
21
21
|
extends StandardProps<React.HTMLAttributes<HTMLDivElement>, HvControlsClassKey> {
|
|
22
22
|
/** Children to be rendered. */
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { default as
|
|
1
|
+
export { default as useHvData } from "./useTable";
|
|
2
2
|
export * from "./useTable";
|
|
3
3
|
|
|
4
4
|
export { default as useHvTableStyles } from "./useTableStyles";
|
|
@@ -27,3 +27,9 @@ export * from "./useHeaderGroups";
|
|
|
27
27
|
|
|
28
28
|
export { default as useHvResizeColumns } from "./useResizeColumns";
|
|
29
29
|
export * from "./useResizeColumns";
|
|
30
|
+
|
|
31
|
+
export { default as useHvGlobalFilter } from "./useGlobalFilter";
|
|
32
|
+
export * from "./useGlobalFilter";
|
|
33
|
+
|
|
34
|
+
export { default as useHvFilters } from "./useFilters";
|
|
35
|
+
export * from "./useFilters";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { default as
|
|
1
|
+
export { default as useHvData } from "./useTable";
|
|
2
2
|
export { default as useHvTableStyles } from "./useTableStyles";
|
|
3
3
|
export { default as useHvSortBy } from "./useSortBy";
|
|
4
4
|
export { default as useHvTableSticky } from "./useSticky";
|
|
@@ -8,4 +8,6 @@ export { default as useHvBulkActions } from "./useBulkActions";
|
|
|
8
8
|
export { default as useHvRowExpand } from "./useRowExpand";
|
|
9
9
|
export { default as useHvHeaderGroups } from "./useHeaderGroups";
|
|
10
10
|
export { default as useHvResizeColumns } from "./useResizeColumns";
|
|
11
|
+
export { default as useHvGlobalFilter } from "./useGlobalFilter";
|
|
12
|
+
export { default as useHvFilters } from "./useFilters";
|
|
11
13
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["default","
|
|
1
|
+
{"version":3,"file":"index.js","names":["default","useHvData","useHvTableStyles","useHvSortBy","useHvTableSticky","useHvPagination","useHvRowSelection","useHvBulkActions","useHvRowExpand","useHvHeaderGroups","useHvResizeColumns","useHvGlobalFilter","useHvFilters"],"sources":["../../../../src/Table/hooks/index.js"],"sourcesContent":["export { default as useHvData } from \"./useTable\";\nexport { default as useHvTableStyles } from \"./useTableStyles\";\nexport { default as useHvSortBy } from \"./useSortBy\";\nexport { default as useHvTableSticky } from \"./useSticky\";\nexport { default as useHvPagination } from \"./usePagination\";\nexport { default as useHvRowSelection } from \"./useRowSelection\";\nexport { default as useHvBulkActions } from \"./useBulkActions\";\nexport { default as useHvRowExpand } from \"./useRowExpand\";\nexport { default as useHvHeaderGroups } from \"./useHeaderGroups\";\nexport { default as useHvResizeColumns } from \"./useResizeColumns\";\nexport { default as useHvGlobalFilter } from \"./useGlobalFilter\";\nexport { default as useHvFilters } from \"./useFilters\";\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,SAApB,QAAqC,YAArC;AACA,SAASD,OAAO,IAAIE,gBAApB,QAA4C,kBAA5C;AACA,SAASF,OAAO,IAAIG,WAApB,QAAuC,aAAvC;AACA,SAASH,OAAO,IAAII,gBAApB,QAA4C,aAA5C;AACA,SAASJ,OAAO,IAAIK,eAApB,QAA2C,iBAA3C;AACA,SAASL,OAAO,IAAIM,iBAApB,QAA6C,mBAA7C;AACA,SAASN,OAAO,IAAIO,gBAApB,QAA4C,kBAA5C;AACA,SAASP,OAAO,IAAIQ,cAApB,QAA0C,gBAA1C;AACA,SAASR,OAAO,IAAIS,iBAApB,QAA6C,mBAA7C;AACA,SAAST,OAAO,IAAIU,kBAApB,QAA8C,oBAA9C;AACA,SAASV,OAAO,IAAIW,iBAApB,QAA6C,mBAA7C;AACA,SAASX,OAAO,IAAIY,YAApB,QAAwC,cAAxC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useFilters.js","names":["useFilters","useHvFilters"],"sources":["../../../../src/Table/hooks/useFilters.js"],"sourcesContent":["import { useFilters as useHvFilters } from \"react-table\";\n\nexport default useHvFilters;\n"],"mappings":"AAAA,SAASA,UAAU,IAAIC,YAAvB,QAA2C,aAA3C;AAEA,eAAeA,YAAf"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useGlobalFilter.js","names":["useGlobalFilter","useHvGlobalFilter"],"sources":["../../../../src/Table/hooks/useGlobalFilter.js"],"sourcesContent":["import { useGlobalFilter as useHvGlobalFilter } from \"react-table\";\n\nexport default useHvGlobalFilter;\n"],"mappings":"AAAA,SAASA,eAAe,IAAIC,iBAA5B,QAAqD,aAArD;AAEA,eAAeA,iBAAf"}
|
|
@@ -18,7 +18,7 @@ Our custom hooks are built on top of [React Table](https://react-table.tanstack.
|
|
|
18
18
|
|
|
19
19
|
## `useHv*` hooks
|
|
20
20
|
|
|
21
|
-
For further ease, you can use the provided `
|
|
21
|
+
For further ease, you can use the provided `useHvData` hook that wraps the [React Table's `useTable` hook](https://react-table.tanstack.com/docs/api/useTable) and
|
|
22
22
|
provides the following functionality:
|
|
23
23
|
|
|
24
24
|
- Ensures the use of the needed core and layout plugins when using any of the UI Kit custom hooks (e.g. adding `useHvPagination` implies the instalation of React Table's `usePagination` hook).
|
|
@@ -26,10 +26,10 @@ provides the following functionality:
|
|
|
26
26
|
- Generates default column metadata from the data fields, if the `columns` option is missing.
|
|
27
27
|
- Defaults to an empty array if no `data` is provided.
|
|
28
28
|
|
|
29
|
-
<Usage>{'import {
|
|
29
|
+
<Usage>{'import { useHvData } from "@hitachivantara/uikit-react-lab";'}</Usage>
|
|
30
30
|
|
|
31
31
|
<Preview withToolbar>
|
|
32
|
-
<Story inline story={stories.
|
|
32
|
+
<Story inline story={stories.UseHvData} />
|
|
33
33
|
</Preview>
|
|
34
34
|
|
|
35
35
|
The following plugin hooks are available:
|
|
@@ -62,7 +62,7 @@ Check [React Table's `usePagination` documentation](https://react-table.tanstack
|
|
|
62
62
|
|
|
63
63
|
The `useHvPagination` hook makes the `getHvPaginationProps` function available on the table instance returned that can be used to setup a `HvPagination` component.
|
|
64
64
|
|
|
65
|
-
_Note: This hook depends on the `usePagination` hook from `react-table`, but when using `
|
|
65
|
+
_Note: This hook depends on the `usePagination` hook from `react-table`, but when using `useHvData` only `useHvPagination` needs to be installed._
|
|
66
66
|
|
|
67
67
|
<Preview withToolbar>
|
|
68
68
|
<Story inline story={stories.Pagination} />
|
|
@@ -96,7 +96,7 @@ Rows can also be selected in bulk and actions can be performed on the current se
|
|
|
96
96
|
|
|
97
97
|
The `useHvBulkActions` hook makes the `getHvBulkActionsProps` function available on the table instance returned that can be used to setup a `HvBulkActions` component.
|
|
98
98
|
|
|
99
|
-
_Note: This hook depends on the `useRowSelect` hook from `react-table`, but when using `
|
|
99
|
+
_Note: This hook depends on the `useRowSelect` hook from `react-table`, but when using `useHvData` only `useHvBulkActions` needs to be installed._
|
|
100
100
|
|
|
101
101
|
<Preview withToolbar>
|
|
102
102
|
<Story inline story={stories.BulkActions} />
|
|
@@ -111,7 +111,7 @@ Check [React Table's `useSortBy` documentation](https://react-table.tanstack.com
|
|
|
111
111
|
|
|
112
112
|
The `useHvSortBy` hook ensures that the proper properties are injected in the `HvTableHeader` (including the on click sorting trigger) and `HvTableCell` (for styling).
|
|
113
113
|
|
|
114
|
-
_Note: This hook depends on the `useSortBy` hook from `react-table`, but when using `
|
|
114
|
+
_Note: This hook depends on the `useSortBy` hook from `react-table`, but when using `useHvData` only `useHvSortBy` needs to be installed._
|
|
115
115
|
|
|
116
116
|
<Preview withToolbar>
|
|
117
117
|
<Story inline story={stories.Sortable} />
|
|
@@ -125,7 +125,7 @@ Check [React Table's `useExpanded` documentation](https://react-table.tanstack.c
|
|
|
125
125
|
|
|
126
126
|
The `useHvRowExpand` hook injects a `HvButton` into the first data column that toggles each row expansion. If the column has a custom renderer, an extra column is created instead.
|
|
127
127
|
|
|
128
|
-
_Note: This hook depends on the `useExpanded` hook from `react-table`, but when using `
|
|
128
|
+
_Note: This hook depends on the `useExpanded` hook from `react-table`, but when using `useHvData` only `useHvRowExpand` needs to be installed._
|
|
129
129
|
|
|
130
130
|
<Preview withToolbar>
|
|
131
131
|
<Story inline story={stories.Expandable} />
|
|
@@ -270,7 +270,7 @@ doing the drag/drop operation via `SPACE + ARROW` Keys.
|
|
|
270
270
|
|
|
271
271
|
## Column Resize
|
|
272
272
|
|
|
273
|
-
Columns can be resized using the useHvResizeColumn hook, which leverages the react-table capabilities.
|
|
273
|
+
Columns can be resized using the useHvResizeColumn hook, which leverages the react-table capabilities.
|
|
274
274
|
Resize, although not an accessible functionality, it allows columns to be resizable via dragging column right border.
|
|
275
275
|
|
|
276
276
|
<Preview withToolbar>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hitachivantara/uikit-react-lab",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.50.0",
|
|
4
4
|
"description": "A collection of contributed React components for the Hitachi Vantara's Design System.",
|
|
5
5
|
"homepage": "https://github.com/lumada-design/hv-uikit-react",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -21,13 +21,13 @@
|
|
|
21
21
|
"build:babel:node": "cross-env BABEL_ENV=commonjs npx babel --root-mode upward src -d dist --extensions '.js,.jsx' --source-maps --ignore '**/tests','**/stories' --copy-files --no-copy-ignored",
|
|
22
22
|
"build:babel:legacy": "cross-env BABEL_ENV=legacy npx babel --root-mode upward src -d dist/legacy --extensions '.js,.jsx' --source-maps --ignore '**/tests','**/stories' --copy-files --no-copy-ignored",
|
|
23
23
|
"build:babel:modern": "cross-env BABEL_ENV=modern npx babel --root-mode upward src -d dist/modern --extensions '.js,.jsx' --source-maps --ignore '**/tests','**/stories' --copy-files --no-copy-ignored",
|
|
24
|
-
"build:post:clean-snapshots": "npx
|
|
24
|
+
"build:post:clean-snapshots": "npx rimraf **/dist/**/tests",
|
|
25
25
|
"dev": "npx npm-run-all --npm-path npm clean dev:babel:watch",
|
|
26
26
|
"dev:babel:watch": "npx babel --root-mode upward src -d dist --extensions '.js,.jsx' --source-maps --ignore '**/tests','**/stories' --copy-files --no-copy-ignored --watch",
|
|
27
|
-
"clean": "npx
|
|
28
|
-
"test": "jest
|
|
29
|
-
"test:watch": "jest
|
|
30
|
-
"test:update": "jest
|
|
27
|
+
"clean": "npx rimraf dist",
|
|
28
|
+
"test": "jest --coverage",
|
|
29
|
+
"test:watch": "jest --watch",
|
|
30
|
+
"test:update": "jest --u",
|
|
31
31
|
"prepublishOnly": "npm run build",
|
|
32
32
|
"link": "npm link",
|
|
33
33
|
"yalc-publish": "npx yalc publish --no-scripts",
|
|
@@ -41,12 +41,10 @@
|
|
|
41
41
|
"react-dom": "^16.13.1 || ^17.0.2"
|
|
42
42
|
},
|
|
43
43
|
"dependencies": {
|
|
44
|
-
"@
|
|
45
|
-
"@hitachivantara/uikit-react-
|
|
46
|
-
"@hitachivantara/uikit-react-icons": "^3.9.4",
|
|
44
|
+
"@hitachivantara/uikit-react-core": "^3.68.7",
|
|
45
|
+
"@hitachivantara/uikit-react-icons": "^3.9.5",
|
|
47
46
|
"@types/react-table": "^7.7.12",
|
|
48
47
|
"clsx": "^1.2.1",
|
|
49
|
-
"core-js": "^3.23.3",
|
|
50
48
|
"dayjs": "^1.11.3",
|
|
51
49
|
"lodash": "^4.17.21",
|
|
52
50
|
"prop-types": "^15.8.1",
|
|
@@ -56,19 +54,7 @@
|
|
|
56
54
|
"react-table": "^7.8.0"
|
|
57
55
|
},
|
|
58
56
|
"devDependencies": {
|
|
59
|
-
"@
|
|
60
|
-
"@testing-library/react": "^12.1.2",
|
|
61
|
-
"@testing-library/react-hooks": "^8.0.1",
|
|
62
|
-
"@testing-library/user-event": "^12.8.3",
|
|
63
|
-
"@wojtekmaj/enzyme-adapter-react-17": "^0.6.7",
|
|
64
|
-
"del-cli": "^4.0.1",
|
|
65
|
-
"enzyme": "^3.11.0",
|
|
66
|
-
"enzyme-to-json": "^3.6.2",
|
|
67
|
-
"jest": "^28.1.2",
|
|
68
|
-
"jest-environment-jsdom": "^28.1.2",
|
|
69
|
-
"jest-fail-on-console": "^2.4.2",
|
|
70
|
-
"jest-junit": "^14.0.0",
|
|
71
|
-
"npm-run-all": "^4.1.5"
|
|
57
|
+
"@types/react": "^17.0.47"
|
|
72
58
|
},
|
|
73
59
|
"files": [
|
|
74
60
|
"dist"
|
|
@@ -76,5 +62,5 @@
|
|
|
76
62
|
"publishConfig": {
|
|
77
63
|
"access": "public"
|
|
78
64
|
},
|
|
79
|
-
"gitHead": "
|
|
65
|
+
"gitHead": "9b80593cd4b2f54784eae36a4ce3e4c3e9b6e403"
|
|
80
66
|
}
|