@digigov/ui 0.32.2 → 0.33.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.
Files changed (46) hide show
  1. package/CHANGELOG.md +12 -1
  2. package/admin/Drawer/__stories__/Default.js +3 -0
  3. package/admin/Dropdown/index.d.ts +1 -1
  4. package/admin/Dropdown/index.js +14 -3
  5. package/core/CaretContainer/index.d.ts +3 -0
  6. package/core/CaretContainer/index.js +30 -0
  7. package/core/Table/Table.stories.d.ts +1 -0
  8. package/core/Table/Table.stories.js +14 -0
  9. package/core/Table/Table.stories.playwright.json +16 -0
  10. package/core/Table/__stories__/WithSortFilters.d.ts +2 -0
  11. package/core/Table/__stories__/WithSortFilters.js +141 -0
  12. package/core/Table/index.d.ts +22 -1
  13. package/core/Table/index.js +210 -24
  14. package/core/index.d.ts +1 -0
  15. package/core/index.js +13 -0
  16. package/es/admin/Drawer/__stories__/Default.js +3 -0
  17. package/es/admin/Dropdown/index.js +14 -3
  18. package/es/core/CaretContainer/index.js +3 -0
  19. package/es/core/Table/Table.stories.js +1 -0
  20. package/es/core/Table/Table.stories.playwright.json +16 -0
  21. package/es/core/Table/__stories__/WithSortFilters.js +126 -0
  22. package/es/core/Table/index.js +170 -1
  23. package/es/core/index.js +1 -0
  24. package/es/registry.js +2 -0
  25. package/esm/admin/Drawer/__stories__/Default.js +3 -0
  26. package/esm/admin/Dropdown/index.js +14 -3
  27. package/esm/core/CaretContainer/index.js +3 -0
  28. package/esm/core/Table/Table.stories.js +1 -0
  29. package/esm/core/Table/Table.stories.playwright.json +16 -0
  30. package/esm/core/Table/__stories__/WithSortFilters.js +126 -0
  31. package/esm/core/Table/index.js +170 -1
  32. package/esm/core/index.js +1 -0
  33. package/esm/index.js +1 -1
  34. package/esm/registry.js +2 -0
  35. package/package.json +3 -3
  36. package/registry.d.ts +1 -0
  37. package/registry.js +3 -0
  38. package/src/admin/Drawer/__stories__/Default.tsx +3 -1
  39. package/src/admin/Dropdown/index.tsx +16 -7
  40. package/src/core/CaretContainer/index.tsx +3 -0
  41. package/src/core/Table/Table.stories.js +1 -0
  42. package/src/core/Table/Table.stories.playwright.json +16 -0
  43. package/src/core/Table/__stories__/WithSortFilters.tsx +189 -0
  44. package/src/core/Table/index.tsx +195 -2
  45. package/src/core/index.ts +1 -0
  46. package/src/registry.js +2 -0
@@ -1,3 +1,172 @@
1
+ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
2
+ import _extends from "@babel/runtime/helpers/extends";
3
+ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
4
+ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
5
+ var _excluded = ["sortedAscDesc", "sortedField", "sortedDirectionValue", "headerItems", "sortedData", "children"];
6
+ import React, { useCallback, useState, useRef } from 'react';
7
+ import Table from '@digigov/react-core/Table';
8
+ import { useMemo } from 'react';
9
+ import { Dropdown, DropdownButton, DropdownContent } from '@digigov/ui/admin/Dropdown';
10
+ import { NavVertical } from '@digigov/ui/core/NavList/NavVertical';
11
+ import { NavVerticalItem } from '@digigov/ui/core/NavList/NavVerticalItem';
12
+ import { CaretIcon } from '@digigov/ui/core/SvgIcon';
13
+ import TableHeadCellBase from '@digigov/react-core/TableHeadCell';
14
+ import CaretContainer from '@digigov/ui/core/CaretContainer';
15
+
16
+ var useSortableData = function useSortableData(items) {
17
+ var _useState = useState(''),
18
+ _useState2 = _slicedToArray(_useState, 2),
19
+ field = _useState2[0],
20
+ setField = _useState2[1];
21
+
22
+ var _useState3 = useState(0),
23
+ _useState4 = _slicedToArray(_useState3, 2),
24
+ directionValue = _useState4[0],
25
+ setDirectionValue = _useState4[1];
26
+
27
+ var sortedItems = useMemo(function () {
28
+ var sortableItems = _toConsumableArray(items);
29
+
30
+ if (sortableItems.length === 0) {
31
+ return;
32
+ }
33
+
34
+ if (field) {
35
+ sortableItems.sort(function (a, b) {
36
+ if (a[field] === null) return 1;
37
+ if (b[field] === null) return -1;
38
+ if (a[field] === null && b[field] === null) return 0;
39
+ return a[field].toString().localeCompare(b[field].toString(), undefined, {
40
+ numeric: true
41
+ }) * (directionValue > 0 ? 1 : -1);
42
+ });
43
+ }
44
+
45
+ return sortableItems;
46
+ }, [items, directionValue, field]);
47
+
48
+ var sortAscDesc = function sortAscDesc(item, value) {
49
+ setDirectionValue(value);
50
+ setField(item);
51
+ };
52
+
53
+ return {
54
+ sortedData: sortedItems,
55
+ sortedProps: {
56
+ sortedData: sortedItems,
57
+ sortedDirectionValue: directionValue,
58
+ sortedField: field,
59
+ sortedAscDesc: sortAscDesc
60
+ }
61
+ };
62
+ };
63
+
64
+ var TableHeadCellSort = /*#__PURE__*/React.forwardRef(function TableHeadCellSort(_ref, ref) {
65
+ var props = _extends({}, _ref);
66
+
67
+ return /*#__PURE__*/React.createElement(TableHeadCellSortBase, _extends({
68
+ ref: ref
69
+ }, props));
70
+ });
71
+ export var TableHeadCellSortBase = /*#__PURE__*/React.forwardRef(function TableHeadCellSortBase(_ref2, ref) {
72
+ var sortedAscDesc = _ref2.sortedAscDesc,
73
+ sortedField = _ref2.sortedField,
74
+ sortedDirectionValue = _ref2.sortedDirectionValue,
75
+ headerItems = _ref2.headerItems,
76
+ sortedData = _ref2.sortedData,
77
+ children = _ref2.children,
78
+ props = _objectWithoutProperties(_ref2, _excluded);
79
+
80
+ var innerRef = useRef();
81
+
82
+ var _ref3 = headerItems || {},
83
+ name = _ref3.name,
84
+ sortLabels = _ref3.sortLabels;
85
+
86
+ var _useState5 = useState(0),
87
+ _useState6 = _slicedToArray(_useState5, 2),
88
+ sortDirection = _useState6[0],
89
+ setSortDirection = _useState6[1];
90
+
91
+ var setSortAscDesc = useCallback(function (name, value) {
92
+ if (sortedAscDesc) {
93
+ if (sortedField !== name) {
94
+ sortedAscDesc('', 0);
95
+ setSortDirection(value);
96
+ sortedAscDesc(name, value);
97
+ } else {
98
+ if (value !== sortDirection) {
99
+ setSortDirection(value);
100
+ sortedAscDesc(name, value);
101
+ } else {
102
+ setSortDirection(0);
103
+ sortedAscDesc('', 0);
104
+ }
105
+ }
106
+ }
107
+ }, [sortedField, sortedDirectionValue, sortDirection]);
108
+
109
+ var _onKeyDown = useCallback(function (e, name, value) {
110
+ if (e.key === 'Enter' && innerRef.current.contains(e.target)) {
111
+ if (innerRef.current.open) {
112
+ setSortAscDesc(name, value);
113
+ innerRef.current.open = false;
114
+ }
115
+ }
116
+ }, [name, sortDirection]);
117
+
118
+ var setDisabled = useCallback(function (sortedData) {
119
+ return sortedData === undefined || sortedData.length === 0 ? true : false;
120
+ }, [sortedData]);
121
+ var setCaretColor = useCallback(function (value) {
122
+ if (sortedField === name) {
123
+ return sortedDirectionValue === value ? 'dark' : 'gray';
124
+ } else {
125
+ return 'gray';
126
+ }
127
+ }, [sortedDirectionValue, sortedField]);
128
+ return /*#__PURE__*/React.createElement(TableHeadCellBase, _extends({}, props, {
129
+ ref: ref
130
+ }), /*#__PURE__*/React.createElement(Dropdown, {
131
+ tabIndex: 0,
132
+ disabled: setDisabled(sortedData),
133
+ ref: innerRef
134
+ }, /*#__PURE__*/React.createElement(DropdownButton, {
135
+ variant: "link",
136
+ underline: sortedField === name ? true : false
137
+ }, children, /*#__PURE__*/React.createElement(CaretContainer, {
138
+ marginLeft: 1
139
+ }, sortLabels && sortLabels.length > 0 && sortLabels.map(function (obj, index) {
140
+ return /*#__PURE__*/React.createElement(CaretIcon, {
141
+ key: index,
142
+ direction: obj.value == 1 ? 'up' : 'down',
143
+ size: "m",
144
+ variant: setCaretColor(obj.value)
145
+ });
146
+ }))), /*#__PURE__*/React.createElement(DropdownContent, null, sortLabels && sortLabels.length > 0 && sortLabels.map(function (obj, index) {
147
+ return /*#__PURE__*/React.createElement(NavVertical, {
148
+ key: index
149
+ }, /*#__PURE__*/React.createElement(NavVerticalItem, _extends({}, sortedField === name && sortedDirectionValue === obj.value && {
150
+ active: true
151
+ }, {
152
+ tabIndex: 0,
153
+ onClick: function onClick() {
154
+ if (setSortAscDesc) {
155
+ setSortAscDesc(name, obj.value);
156
+ innerRef.current.open = false;
157
+ }
158
+ },
159
+ onKeyDown: function onKeyDown(e) {
160
+ _onKeyDown(e, name, obj.value);
161
+ }
162
+ }), /*#__PURE__*/React.createElement(CaretIcon, {
163
+ direction: obj.value == 1 ? 'up' : 'down',
164
+ marginRight: 1,
165
+ marginTop: 1,
166
+ size: "m"
167
+ }), obj.label));
168
+ }))));
169
+ });
1
170
  export * from '@digigov/react-core/TableContainer';
2
171
  export * from '@digigov/react-core/Table';
3
172
  export * from '@digigov/react-core/TableBody';
@@ -8,5 +177,5 @@ export * from '@digigov/react-core/TableHeadCell';
8
177
  export * from '@digigov/react-core/TableRow';
9
178
  export * from '@digigov/react-core/TableNoDataRow';
10
179
  export * from '@digigov/ui/core/Table/TableFloatingScroll';
11
- import Table from '@digigov/react-core/Table';
180
+ export { TableHeadCellSort, useSortableData };
12
181
  export default Table;
package/es/core/index.js CHANGED
@@ -6,6 +6,7 @@ export * from '@digigov/ui/core/Accordion';
6
6
  export * from '@digigov/ui/core/Blockquote';
7
7
  export * from '@digigov/ui/core/Breadcrumbs';
8
8
  export * from '@digigov/ui/core/Card';
9
+ export * from '@digigov/ui/core/CaretContainer';
9
10
  export * from '@digigov/ui/core/Checkbox';
10
11
  export * from '@digigov/ui/core/DateInputContainer';
11
12
  export * from '@digigov/ui/core/Details';
package/es/registry.js CHANGED
@@ -71,6 +71,7 @@ import * as _digigov_ui_core_Button_Icon from '@digigov/ui/core/Button/Icon';
71
71
  import * as _digigov_ui_core_Button from '@digigov/ui/core/Button';
72
72
  import * as _digigov_ui_core_Button_ThemeToggleButton from '@digigov/ui/core/Button/ThemeToggleButton';
73
73
  import * as _digigov_ui_core_Card from '@digigov/ui/core/Card';
74
+ import * as _digigov_ui_core_CaretContainer from '@digigov/ui/core/CaretContainer';
74
75
  import * as _digigov_ui_core_Checkbox from '@digigov/ui/core/Checkbox';
75
76
  import * as _digigov_ui_core_DateInputContainer from '@digigov/ui/core/DateInputContainer';
76
77
  import * as _digigov_ui_core_Details from '@digigov/ui/core/Details';
@@ -283,6 +284,7 @@ export default {
283
284
  '@digigov/ui/core/Button': lazyImport(_digigov_ui_core_Button),
284
285
  '@digigov/ui/core/Button/ThemeToggleButton': lazyImport(_digigov_ui_core_Button_ThemeToggleButton),
285
286
  '@digigov/ui/core/Card': lazyImport(_digigov_ui_core_Card),
287
+ '@digigov/ui/core/CaretContainer': lazyImport(_digigov_ui_core_CaretContainer),
286
288
  '@digigov/ui/core/Checkbox': lazyImport(_digigov_ui_core_Checkbox),
287
289
  '@digigov/ui/core/DateInputContainer': lazyImport(_digigov_ui_core_DateInputContainer),
288
290
  '@digigov/ui/core/Details': lazyImport(_digigov_ui_core_Details),
@@ -77,7 +77,9 @@ export var Default = function Default() {
77
77
 
78
78
  var layout = 'vertical';
79
79
  var border = false;
80
+ var fixed = false;
80
81
  return /*#__PURE__*/React.createElement(Drawer, {
82
+ upRelative: "m",
81
83
  direction: "left",
82
84
  open: open
83
85
  }, /*#__PURE__*/React.createElement(DrawerHeading, {
@@ -88,6 +90,7 @@ export var Default = function Default() {
88
90
  layout: layout,
89
91
  links: links,
90
92
  border: border,
93
+ fixed: fixed,
91
94
  "aria-label": "Nav list"
92
95
  }, links.map(function (item, key) {
93
96
  var _item$subMenu;
@@ -9,15 +9,22 @@ export * from '@digigov/react-extensions/admin/DropdownContent';
9
9
  /**
10
10
  * Dropdown component is used for showing more options with a button.
11
11
  */
12
- export var Dropdown = function Dropdown(_ref) {
12
+ export var Dropdown = /*#__PURE__*/React.forwardRef(function Dropdown(_ref, ref) {
13
13
  var _ref$closeBehaviour = _ref.closeBehaviour,
14
14
  closeBehaviour = _ref$closeBehaviour === void 0 ? 'clickOutside' : _ref$closeBehaviour,
15
15
  _ref$float = _ref["float"],
16
16
  _float = _ref$float === void 0 ? false : _ref$float,
17
17
  props = _objectWithoutProperties(_ref, _excluded);
18
18
 
19
- var innerRef = useRef();
19
+ var innerRef = ref || useRef();
20
20
  useEffect(function () {
21
+ var keyDownHandler = function keyDownHandler(event) {
22
+ if (event.key === 'Escape') {
23
+ innerRef.current.open = false;
24
+ event.preventDefault();
25
+ }
26
+ };
27
+
21
28
  var handleClickOutside = function handleClickOutside(event) {
22
29
  if (innerRef.current && !innerRef.current.contains(event.target)) {
23
30
  innerRef.current.open = false;
@@ -28,6 +35,8 @@ export var Dropdown = function Dropdown(_ref) {
28
35
  document.addEventListener('click', handleClickOutside, true);
29
36
  }
30
37
 
38
+ document.addEventListener('keydown', keyDownHandler);
39
+
31
40
  var toggleFloat = function toggleFloat() {
32
41
  var _innerRef$current;
33
42
 
@@ -75,6 +84,8 @@ export var Dropdown = function Dropdown(_ref) {
75
84
  if (_float) {
76
85
  innerRef.current.removeEventListener('toggle', toggleFloat);
77
86
  }
87
+
88
+ document.removeEventListener('keydown', keyDownHandler);
78
89
  };
79
90
  }, []); // eslint-disable-next-line @typescript-eslint/ban-ts-comment
80
91
  // @ts-ignore
@@ -82,6 +93,6 @@ export var Dropdown = function Dropdown(_ref) {
82
93
  return /*#__PURE__*/React.createElement(DropdownBase, _extends({
83
94
  ref: innerRef
84
95
  }, props));
85
- };
96
+ });
86
97
  export { DropdownBase };
87
98
  export default Dropdown;
@@ -0,0 +1,3 @@
1
+ import CaretContainer from '@digigov/react-core/CaretContainer';
2
+ export * from '@digigov/react-core/CaretContainer';
3
+ export default CaretContainer;
@@ -20,5 +20,6 @@ export * from './__stories__/WithLoader';
20
20
  export * from './__stories__/DefinedWidth';
21
21
  export * from './__stories__/Densed';
22
22
  export * from './__stories__/MultipleProps';
23
+ export * from './__stories__/WithSortFilters';
23
24
  export * from './__stories__/WithFloatingScroll';
24
25
  export * from './__stories__/Full';
@@ -16,6 +16,22 @@
16
16
  "title": "Toggle Loading"
17
17
  }
18
18
  ]
19
+ },
20
+ "digigov-ui-core-table--with-sort-filters": {
21
+ "actionSets": [
22
+ {
23
+ "actions": [
24
+ {
25
+ "name": "click",
26
+ "args": {
27
+ "selector": "html>body>div:nth-child(5)>div>div>table>thead>tr>th:nth-child(2)>details>summary"
28
+ }
29
+ }
30
+ ],
31
+ "id": "Gdm_Fpollj7d",
32
+ "title": "Table with filter action"
33
+ }
34
+ ]
19
35
  }
20
36
  }
21
37
  }
@@ -0,0 +1,126 @@
1
+ import _extends from "@babel/runtime/helpers/extends";
2
+ import React from 'react';
3
+ import { TableContainer, Table, TableCaption, TableHead, TableRow, TableBody, TableHeadCellSort, TableDataCell, TableNoDataRow, useSortableData } from '@digigov/ui/core/Table';
4
+ var headerItems = [{
5
+ name: 'product',
6
+ label: 'Προϊόν',
7
+ sortLabels: [{
8
+ label: 'Αλφαβητική σειρά (Α -> Ω)',
9
+ direction: 'asc',
10
+ value: 1
11
+ }, {
12
+ label: 'Αλφαβητική σειρά (Ω -> Α)',
13
+ direction: 'desc',
14
+ value: -1
15
+ }]
16
+ }, {
17
+ name: 'price',
18
+ label: 'Τιμή',
19
+ sortLabels: [{
20
+ label: 'Αύξουσα σειρά',
21
+ direction: 'ascending',
22
+ value: 1
23
+ }, {
24
+ label: 'Φθίνουσα σειρά',
25
+ direction: 'descending',
26
+ value: -1
27
+ }]
28
+ }, {
29
+ name: 'stock',
30
+ label: 'Στοκ',
31
+ sortLabels: [{
32
+ label: 'Αύξουσα σειρά',
33
+ direction: 'ascending',
34
+ value: 1
35
+ }, {
36
+ label: 'Φθίνουσα σειρά',
37
+ direction: 'descending',
38
+ value: -1
39
+ }]
40
+ }, {
41
+ name: 'date',
42
+ label: 'Ημερομηνία',
43
+ sortLabels: [{
44
+ label: 'Αύξουσα σειρά',
45
+ direction: 'ascending',
46
+ value: 1
47
+ }, {
48
+ label: 'Φθίνουσα σειρά',
49
+ direction: 'descending',
50
+ value: -1
51
+ }]
52
+ }];
53
+ var data = [{
54
+ id: 1,
55
+ product: 'Τυρί',
56
+ price: '4.9€',
57
+ stock: 20,
58
+ date: '2013-04-01'
59
+ }, {
60
+ id: 2,
61
+ product: 'Γάλα',
62
+ price: '1.9€',
63
+ stock: 32,
64
+ date: '2013-01-01'
65
+ }, {
66
+ id: 3,
67
+ product: 'Γιαούρτι',
68
+ price: '2.4€',
69
+ stock: 12,
70
+ date: '2002-04-12'
71
+ }, {
72
+ id: 4,
73
+ product: 'Κρέμα',
74
+ price: '3.9€',
75
+ stock: 8,
76
+ date: '2011-12-12'
77
+ }, {
78
+ id: 5,
79
+ product: 'Βούτυρο',
80
+ price: '0.9€',
81
+ stock: 99,
82
+ date: '2019-06-01'
83
+ }, {
84
+ id: 6,
85
+ product: 'Καφές',
86
+ price: '2.9€',
87
+ stock: 86,
88
+ date: '2023-02-11'
89
+ }, {
90
+ id: 7,
91
+ product: 'Ψωμί',
92
+ price: '99€',
93
+ stock: 12,
94
+ date: '2000-12-12'
95
+ }];
96
+
97
+ var _ref = /*#__PURE__*/React.createElement(TableCaption, null, "Table of products");
98
+
99
+ var _ref2 = /*#__PURE__*/React.createElement(TableNoDataRow, null, "No data");
100
+
101
+ export var WithSortFilters = function WithSortFilters() {
102
+ var _useSortableData = useSortableData(data),
103
+ sortedData = _useSortableData.sortedData,
104
+ sortedProps = _useSortableData.sortedProps;
105
+
106
+ return /*#__PURE__*/React.createElement("div", {
107
+ className: "example"
108
+ }, /*#__PURE__*/React.createElement(TableContainer
109
+ /* Possible style solution in order to display dropdown properly when we have only one table row
110
+ * style={{
111
+ * overflow: 'inherit',
112
+ * }}
113
+ */
114
+ , null, /*#__PURE__*/React.createElement(Table, null, _ref, /*#__PURE__*/React.createElement(TableHead, null, /*#__PURE__*/React.createElement(TableRow, null, headerItems && headerItems.length > 0 && headerItems.map(function (header, index) {
115
+ return /*#__PURE__*/React.createElement(TableHeadCellSort, _extends({
116
+ key: index
117
+ }, sortedProps, {
118
+ headerItems: header
119
+ }), header.label);
120
+ }))), /*#__PURE__*/React.createElement(TableBody, null, sortedData && sortedData.length > 0 ? sortedData.map(function (d, index) {
121
+ return /*#__PURE__*/React.createElement(TableRow, {
122
+ key: index
123
+ }, /*#__PURE__*/React.createElement(TableDataCell, null, d.product), /*#__PURE__*/React.createElement(TableDataCell, null, d.price), /*#__PURE__*/React.createElement(TableDataCell, null, d.stock), /*#__PURE__*/React.createElement(TableDataCell, null, new Date(d.date).toLocaleDateString('en-GB')));
124
+ }) : _ref2))));
125
+ };
126
+ export default WithSortFilters;
@@ -1,3 +1,172 @@
1
+ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
2
+ import _extends from "@babel/runtime/helpers/extends";
3
+ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
4
+ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
5
+ var _excluded = ["sortedAscDesc", "sortedField", "sortedDirectionValue", "headerItems", "sortedData", "children"];
6
+ import React, { useCallback, useState, useRef } from 'react';
7
+ import Table from '@digigov/react-core/Table';
8
+ import { useMemo } from 'react';
9
+ import { Dropdown, DropdownButton, DropdownContent } from '@digigov/ui/admin/Dropdown';
10
+ import { NavVertical } from '@digigov/ui/core/NavList/NavVertical';
11
+ import { NavVerticalItem } from '@digigov/ui/core/NavList/NavVerticalItem';
12
+ import { CaretIcon } from '@digigov/ui/core/SvgIcon';
13
+ import TableHeadCellBase from '@digigov/react-core/TableHeadCell';
14
+ import CaretContainer from '@digigov/ui/core/CaretContainer';
15
+
16
+ var useSortableData = function useSortableData(items) {
17
+ var _useState = useState(''),
18
+ _useState2 = _slicedToArray(_useState, 2),
19
+ field = _useState2[0],
20
+ setField = _useState2[1];
21
+
22
+ var _useState3 = useState(0),
23
+ _useState4 = _slicedToArray(_useState3, 2),
24
+ directionValue = _useState4[0],
25
+ setDirectionValue = _useState4[1];
26
+
27
+ var sortedItems = useMemo(function () {
28
+ var sortableItems = _toConsumableArray(items);
29
+
30
+ if (sortableItems.length === 0) {
31
+ return;
32
+ }
33
+
34
+ if (field) {
35
+ sortableItems.sort(function (a, b) {
36
+ if (a[field] === null) return 1;
37
+ if (b[field] === null) return -1;
38
+ if (a[field] === null && b[field] === null) return 0;
39
+ return a[field].toString().localeCompare(b[field].toString(), undefined, {
40
+ numeric: true
41
+ }) * (directionValue > 0 ? 1 : -1);
42
+ });
43
+ }
44
+
45
+ return sortableItems;
46
+ }, [items, directionValue, field]);
47
+
48
+ var sortAscDesc = function sortAscDesc(item, value) {
49
+ setDirectionValue(value);
50
+ setField(item);
51
+ };
52
+
53
+ return {
54
+ sortedData: sortedItems,
55
+ sortedProps: {
56
+ sortedData: sortedItems,
57
+ sortedDirectionValue: directionValue,
58
+ sortedField: field,
59
+ sortedAscDesc: sortAscDesc
60
+ }
61
+ };
62
+ };
63
+
64
+ var TableHeadCellSort = /*#__PURE__*/React.forwardRef(function TableHeadCellSort(_ref, ref) {
65
+ var props = _extends({}, _ref);
66
+
67
+ return /*#__PURE__*/React.createElement(TableHeadCellSortBase, _extends({
68
+ ref: ref
69
+ }, props));
70
+ });
71
+ export var TableHeadCellSortBase = /*#__PURE__*/React.forwardRef(function TableHeadCellSortBase(_ref2, ref) {
72
+ var sortedAscDesc = _ref2.sortedAscDesc,
73
+ sortedField = _ref2.sortedField,
74
+ sortedDirectionValue = _ref2.sortedDirectionValue,
75
+ headerItems = _ref2.headerItems,
76
+ sortedData = _ref2.sortedData,
77
+ children = _ref2.children,
78
+ props = _objectWithoutProperties(_ref2, _excluded);
79
+
80
+ var innerRef = useRef();
81
+
82
+ var _ref3 = headerItems || {},
83
+ name = _ref3.name,
84
+ sortLabels = _ref3.sortLabels;
85
+
86
+ var _useState5 = useState(0),
87
+ _useState6 = _slicedToArray(_useState5, 2),
88
+ sortDirection = _useState6[0],
89
+ setSortDirection = _useState6[1];
90
+
91
+ var setSortAscDesc = useCallback(function (name, value) {
92
+ if (sortedAscDesc) {
93
+ if (sortedField !== name) {
94
+ sortedAscDesc('', 0);
95
+ setSortDirection(value);
96
+ sortedAscDesc(name, value);
97
+ } else {
98
+ if (value !== sortDirection) {
99
+ setSortDirection(value);
100
+ sortedAscDesc(name, value);
101
+ } else {
102
+ setSortDirection(0);
103
+ sortedAscDesc('', 0);
104
+ }
105
+ }
106
+ }
107
+ }, [sortedField, sortedDirectionValue, sortDirection]);
108
+
109
+ var _onKeyDown = useCallback(function (e, name, value) {
110
+ if (e.key === 'Enter' && innerRef.current.contains(e.target)) {
111
+ if (innerRef.current.open) {
112
+ setSortAscDesc(name, value);
113
+ innerRef.current.open = false;
114
+ }
115
+ }
116
+ }, [name, sortDirection]);
117
+
118
+ var setDisabled = useCallback(function (sortedData) {
119
+ return sortedData === undefined || sortedData.length === 0 ? true : false;
120
+ }, [sortedData]);
121
+ var setCaretColor = useCallback(function (value) {
122
+ if (sortedField === name) {
123
+ return sortedDirectionValue === value ? 'dark' : 'gray';
124
+ } else {
125
+ return 'gray';
126
+ }
127
+ }, [sortedDirectionValue, sortedField]);
128
+ return /*#__PURE__*/React.createElement(TableHeadCellBase, _extends({}, props, {
129
+ ref: ref
130
+ }), /*#__PURE__*/React.createElement(Dropdown, {
131
+ tabIndex: 0,
132
+ disabled: setDisabled(sortedData),
133
+ ref: innerRef
134
+ }, /*#__PURE__*/React.createElement(DropdownButton, {
135
+ variant: "link",
136
+ underline: sortedField === name ? true : false
137
+ }, children, /*#__PURE__*/React.createElement(CaretContainer, {
138
+ marginLeft: 1
139
+ }, sortLabels && sortLabels.length > 0 && sortLabels.map(function (obj, index) {
140
+ return /*#__PURE__*/React.createElement(CaretIcon, {
141
+ key: index,
142
+ direction: obj.value == 1 ? 'up' : 'down',
143
+ size: "m",
144
+ variant: setCaretColor(obj.value)
145
+ });
146
+ }))), /*#__PURE__*/React.createElement(DropdownContent, null, sortLabels && sortLabels.length > 0 && sortLabels.map(function (obj, index) {
147
+ return /*#__PURE__*/React.createElement(NavVertical, {
148
+ key: index
149
+ }, /*#__PURE__*/React.createElement(NavVerticalItem, _extends({}, sortedField === name && sortedDirectionValue === obj.value && {
150
+ active: true
151
+ }, {
152
+ tabIndex: 0,
153
+ onClick: function onClick() {
154
+ if (setSortAscDesc) {
155
+ setSortAscDesc(name, obj.value);
156
+ innerRef.current.open = false;
157
+ }
158
+ },
159
+ onKeyDown: function onKeyDown(e) {
160
+ _onKeyDown(e, name, obj.value);
161
+ }
162
+ }), /*#__PURE__*/React.createElement(CaretIcon, {
163
+ direction: obj.value == 1 ? 'up' : 'down',
164
+ marginRight: 1,
165
+ marginTop: 1,
166
+ size: "m"
167
+ }), obj.label));
168
+ }))));
169
+ });
1
170
  export * from '@digigov/react-core/TableContainer';
2
171
  export * from '@digigov/react-core/Table';
3
172
  export * from '@digigov/react-core/TableBody';
@@ -8,5 +177,5 @@ export * from '@digigov/react-core/TableHeadCell';
8
177
  export * from '@digigov/react-core/TableRow';
9
178
  export * from '@digigov/react-core/TableNoDataRow';
10
179
  export * from '@digigov/ui/core/Table/TableFloatingScroll';
11
- import Table from '@digigov/react-core/Table';
180
+ export { TableHeadCellSort, useSortableData };
12
181
  export default Table;
package/esm/core/index.js CHANGED
@@ -6,6 +6,7 @@ export * from '@digigov/ui/core/Accordion';
6
6
  export * from '@digigov/ui/core/Blockquote';
7
7
  export * from '@digigov/ui/core/Breadcrumbs';
8
8
  export * from '@digigov/ui/core/Card';
9
+ export * from '@digigov/ui/core/CaretContainer';
9
10
  export * from '@digigov/ui/core/Checkbox';
10
11
  export * from '@digigov/ui/core/DateInputContainer';
11
12
  export * from '@digigov/ui/core/Details';
package/esm/index.js CHANGED
@@ -1,4 +1,4 @@
1
- /** @license Digigov v0.32.2
1
+ /** @license Digigov v0.33.0
2
2
  *
3
3
  * This source code is licensed under the BSD-2-Clause license found in the
4
4
  * LICENSE file in the root directory of this source tree.
package/esm/registry.js CHANGED
@@ -71,6 +71,7 @@ import * as _digigov_ui_core_Button_Icon from '@digigov/ui/core/Button/Icon';
71
71
  import * as _digigov_ui_core_Button from '@digigov/ui/core/Button';
72
72
  import * as _digigov_ui_core_Button_ThemeToggleButton from '@digigov/ui/core/Button/ThemeToggleButton';
73
73
  import * as _digigov_ui_core_Card from '@digigov/ui/core/Card';
74
+ import * as _digigov_ui_core_CaretContainer from '@digigov/ui/core/CaretContainer';
74
75
  import * as _digigov_ui_core_Checkbox from '@digigov/ui/core/Checkbox';
75
76
  import * as _digigov_ui_core_DateInputContainer from '@digigov/ui/core/DateInputContainer';
76
77
  import * as _digigov_ui_core_Details from '@digigov/ui/core/Details';
@@ -283,6 +284,7 @@ export default {
283
284
  '@digigov/ui/core/Button': lazyImport(_digigov_ui_core_Button),
284
285
  '@digigov/ui/core/Button/ThemeToggleButton': lazyImport(_digigov_ui_core_Button_ThemeToggleButton),
285
286
  '@digigov/ui/core/Card': lazyImport(_digigov_ui_core_Card),
287
+ '@digigov/ui/core/CaretContainer': lazyImport(_digigov_ui_core_CaretContainer),
286
288
  '@digigov/ui/core/Checkbox': lazyImport(_digigov_ui_core_Checkbox),
287
289
  '@digigov/ui/core/DateInputContainer': lazyImport(_digigov_ui_core_DateInputContainer),
288
290
  '@digigov/ui/core/Details': lazyImport(_digigov_ui_core_Details),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@digigov/ui",
3
- "version": "0.32.2",
3
+ "version": "0.33.0",
4
4
  "description": "@digigov reusable components toolkit",
5
5
  "main": "./index.js",
6
6
  "module": "./esm/index.js",
@@ -20,8 +20,8 @@
20
20
  "clsx": "1.1.1",
21
21
  "react": "^16.8.0 || ^17.0.0",
22
22
  "react-dom": "^16.8.0 || ^17.0.0",
23
- "@digigov/react-core": "0.23.1",
24
- "@digigov/react-extensions": "0.21.3"
23
+ "@digigov/react-core": "0.24.0",
24
+ "@digigov/react-extensions": "0.22.0"
25
25
  },
26
26
  "gitHead": "c903a46306f77f55ad7fc4d2e274006f39a6c871",
27
27
  "private": false,
package/registry.d.ts CHANGED
@@ -72,6 +72,7 @@ declare var _default: {
72
72
  '@digigov/ui/core/Button': {};
73
73
  '@digigov/ui/core/Button/ThemeToggleButton': {};
74
74
  '@digigov/ui/core/Card': {};
75
+ '@digigov/ui/core/CaretContainer': {};
75
76
  '@digigov/ui/core/Checkbox': {};
76
77
  '@digigov/ui/core/DateInputContainer': {};
77
78
  '@digigov/ui/core/Details': {};