@hazelcast/ui 1.3.2-next.7 → 1.3.2-next.71

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 (255) hide show
  1. package/lib/Alert.d.ts +6 -5
  2. package/lib/Alert.js +2 -2
  3. package/lib/Alert.js.map +1 -1
  4. package/lib/Alert.module.scss +15 -11
  5. package/lib/AutocompleteField.d.ts +9 -6
  6. package/lib/AutocompleteField.js +6 -7
  7. package/lib/AutocompleteField.js.map +1 -1
  8. package/lib/AutocompleteField.module.scss +16 -0
  9. package/lib/AutocompleteFieldFormik.d.ts +1 -1
  10. package/lib/Badge.d.ts +4 -4
  11. package/lib/Button.d.ts +17 -16
  12. package/lib/Button.js +8 -6
  13. package/lib/Button.js.map +1 -1
  14. package/lib/Button.module.scss +54 -1
  15. package/lib/Calendar/Calendar.d.ts +8 -4
  16. package/lib/Calendar/Calendar.js +32 -22
  17. package/lib/Calendar/Calendar.js.map +1 -1
  18. package/lib/Calendar/Calendar.module.scss +2 -1
  19. package/lib/Calendar/CalendarRange.d.ts +4 -4
  20. package/lib/Calendar/CalendarRange.js +5 -5
  21. package/lib/Calendar/CalendarRange.js.map +1 -1
  22. package/lib/Calendar/CalendarRange.module.scss +5 -0
  23. package/lib/Calendar/components/CalendarHeader.d.ts +2 -2
  24. package/lib/Calendar/components/CalendarInput.d.ts +8 -6
  25. package/lib/Calendar/components/CalendarInput.js +3 -3
  26. package/lib/Calendar/components/CalendarInput.js.map +1 -1
  27. package/lib/Calendar/components/CalendarTime.d.ts +2 -2
  28. package/lib/Calendar/components/CalendarTime.js +15 -10
  29. package/lib/Calendar/components/CalendarTime.js.map +1 -1
  30. package/lib/Calendar/components/CalendarTime.module.scss +4 -0
  31. package/lib/Calendar/helpers/consts.js +97 -97
  32. package/lib/Calendar/helpers/consts.js.map +1 -1
  33. package/lib/Card.d.ts +1 -1
  34. package/lib/Card.js +2 -2
  35. package/lib/Card.js.map +1 -1
  36. package/lib/Card.module.scss +1 -1
  37. package/lib/Carousel.d.ts +26 -0
  38. package/lib/Carousel.js +28 -0
  39. package/lib/Carousel.js.map +1 -0
  40. package/lib/Carousel.module.scss +43 -0
  41. package/lib/Checkbox.d.ts +4 -3
  42. package/lib/Checkbox.js +2 -2
  43. package/lib/Checkbox.js.map +1 -1
  44. package/lib/Checkbox.module.scss +2 -2
  45. package/lib/CheckboxFormik.d.ts +1 -1
  46. package/lib/CircularProgressBar.d.ts +1 -1
  47. package/lib/CircularProgressBar.module.scss +1 -1
  48. package/lib/ContextMenu.d.ts +15 -0
  49. package/lib/ContextMenu.js +58 -0
  50. package/lib/ContextMenu.js.map +1 -0
  51. package/lib/ContextMenu.module.scss +37 -0
  52. package/lib/Dialog.d.ts +2 -2
  53. package/lib/EmptyState.d.ts +5 -5
  54. package/lib/FieldHeader.d.ts +10 -6
  55. package/lib/FieldHeader.js +3 -3
  56. package/lib/FieldHeader.js.map +1 -1
  57. package/lib/Help.d.ts +2 -1
  58. package/lib/Help.js +2 -2
  59. package/lib/Help.js.map +1 -1
  60. package/lib/Icon.d.ts +5 -5
  61. package/lib/Icon.js +1 -1
  62. package/lib/Icon.js.map +1 -1
  63. package/lib/IconButton.d.ts +6 -6
  64. package/lib/InteractiveList.d.ts +5 -5
  65. package/lib/InteractiveList.js +4 -2
  66. package/lib/InteractiveList.js.map +1 -1
  67. package/lib/InteractiveList.module.scss +1 -0
  68. package/lib/InteractiveListFormik.d.ts +1 -1
  69. package/lib/Label.d.ts +2 -1
  70. package/lib/Label.js +1 -1
  71. package/lib/Label.js.map +1 -1
  72. package/lib/Label.module.scss +4 -0
  73. package/lib/Link.d.ts +7 -7
  74. package/lib/Link.js +3 -3
  75. package/lib/Link.js.map +1 -1
  76. package/lib/Loader.d.ts +1 -1
  77. package/lib/Modal.d.ts +4 -2
  78. package/lib/Modal.js.map +1 -1
  79. package/lib/Notification.d.ts +4 -4
  80. package/lib/Notification.module.scss +10 -10
  81. package/lib/NumberBadge.d.ts +2 -1
  82. package/lib/NumberBadge.js +3 -2
  83. package/lib/NumberBadge.js.map +1 -1
  84. package/lib/NumberField.d.ts +5 -7
  85. package/lib/NumberField.js.map +1 -1
  86. package/lib/NumberFieldFormik.d.ts +1 -1
  87. package/lib/Overlay.d.ts +7 -2
  88. package/lib/Overlay.js +5 -5
  89. package/lib/Overlay.js.map +1 -1
  90. package/lib/Overlay.module.scss +1 -1
  91. package/lib/Pagination.d.ts +7 -6
  92. package/lib/Pagination.js +7 -7
  93. package/lib/Pagination.js.map +1 -1
  94. package/lib/PasswordField.d.ts +6 -4
  95. package/lib/PasswordField.js +7 -3
  96. package/lib/PasswordField.js.map +1 -1
  97. package/lib/PasswordField.module.scss +6 -0
  98. package/lib/PasswordFieldFormik.d.ts +1 -1
  99. package/lib/Popover.d.ts +2 -0
  100. package/lib/Popover.js +12 -6
  101. package/lib/Popover.js.map +1 -1
  102. package/lib/Radio.d.ts +3 -3
  103. package/lib/Radio.module.scss +2 -2
  104. package/lib/RadioFormik.d.ts +1 -1
  105. package/lib/RadioGroup.d.ts +3 -3
  106. package/lib/RadioGroupFormik.d.ts +1 -1
  107. package/lib/SegmentedControl.d.ts +7 -6
  108. package/lib/SegmentedControl.js +4 -4
  109. package/lib/SegmentedControl.js.map +1 -1
  110. package/lib/SegmentedControl.module.scss +1 -1
  111. package/lib/SegmentedControlFormik.d.ts +1 -1
  112. package/lib/Select/CheckableSelectField.d.ts +3 -3
  113. package/lib/Select/CheckableSelectField.module.scss +3 -3
  114. package/lib/Select/CheckableSelectFieldFormik.d.ts +1 -1
  115. package/lib/Select/Common.d.ts +6 -6
  116. package/lib/Select/MultiSelectField.d.ts +7 -7
  117. package/lib/Select/MultiSelectField.js +3 -1
  118. package/lib/Select/MultiSelectField.js.map +1 -1
  119. package/lib/Select/MultiSelectFieldFormik.d.ts +1 -1
  120. package/lib/Select/SelectField.d.ts +6 -7
  121. package/lib/Select/SelectField.js +5 -3
  122. package/lib/Select/SelectField.js.map +1 -1
  123. package/lib/Select/SelectField.module.scss +6 -4
  124. package/lib/Select/SelectFieldFormik.d.ts +1 -1
  125. package/lib/Select/helpers.d.ts +2 -2
  126. package/lib/SimpleTable.d.ts +1 -1
  127. package/lib/Slider.d.ts +8 -8
  128. package/lib/Slider.module.scss +1 -1
  129. package/lib/SliderFormik.d.ts +1 -1
  130. package/lib/Table/Cell.d.ts +11 -3
  131. package/lib/Table/Cell.js +44 -9
  132. package/lib/Table/Cell.js.map +1 -1
  133. package/lib/Table/Cell.module.scss +8 -0
  134. package/lib/Table/CellWrapper.d.ts +11 -0
  135. package/lib/Table/CellWrapper.js +29 -0
  136. package/lib/Table/CellWrapper.js.map +1 -0
  137. package/lib/Table/EnhancedRenderers.d.ts +2 -2
  138. package/lib/Table/Header.d.ts +1 -2
  139. package/lib/Table/Header.js +2 -2
  140. package/lib/Table/Header.js.map +1 -1
  141. package/lib/Table/Header.module.scss +35 -27
  142. package/lib/Table/Row.d.ts +4 -4
  143. package/lib/Table/Row.js +6 -2
  144. package/lib/Table/Row.js.map +1 -1
  145. package/lib/Table/Table.d.ts +14 -18
  146. package/lib/Table/Table.js +108 -161
  147. package/lib/Table/Table.js.map +1 -1
  148. package/lib/Table/Table.module.scss +4 -16
  149. package/lib/Table/TableContent.d.ts +25 -0
  150. package/lib/Table/TableContent.js +49 -0
  151. package/lib/Table/TableContent.js.map +1 -0
  152. package/lib/Table/TableContent.module.scss +21 -0
  153. package/lib/Table/constants.d.ts +2 -0
  154. package/lib/Table/constants.js +3 -0
  155. package/lib/Table/constants.js.map +1 -0
  156. package/lib/Table/features/columnsSelection/CellCopyablePopover.d.ts +8 -0
  157. package/lib/Table/features/columnsSelection/CellCopyablePopover.js +13 -0
  158. package/lib/Table/features/columnsSelection/CellCopyablePopover.js.map +1 -0
  159. package/lib/Table/features/columnsSelection/CellCopyablePopover.module.scss +12 -0
  160. package/lib/Table/features/columnsSelection/ContextMenu/ContextMenu.d.ts +6 -0
  161. package/lib/Table/features/columnsSelection/ContextMenu/ContextMenu.js +17 -0
  162. package/lib/Table/features/columnsSelection/ContextMenu/ContextMenu.js.map +1 -0
  163. package/lib/Table/features/columnsSelection/ContextMenu/ContextMenu.module.scss +6 -0
  164. package/lib/Table/features/columnsSelection/ContextMenu/index.d.ts +1 -0
  165. package/lib/Table/features/columnsSelection/ContextMenu/index.js +2 -0
  166. package/lib/Table/features/columnsSelection/ContextMenu/index.js.map +1 -0
  167. package/lib/Table/features/columnsSelection/columnsSelection.d.ts +19 -0
  168. package/lib/Table/features/columnsSelection/columnsSelection.js +71 -0
  169. package/lib/Table/features/columnsSelection/columnsSelection.js.map +1 -0
  170. package/lib/Table/features/columnsSelection/helpers.d.ts +7 -0
  171. package/lib/Table/features/columnsSelection/helpers.js +26 -0
  172. package/lib/Table/features/columnsSelection/helpers.js.map +1 -0
  173. package/lib/Table/features/columnsSelection/index.d.ts +4 -0
  174. package/lib/Table/features/columnsSelection/index.js +5 -0
  175. package/lib/Table/features/columnsSelection/index.js.map +1 -0
  176. package/lib/Tabs/Tab.d.ts +22 -8
  177. package/lib/Tabs/Tab.js +15 -4
  178. package/lib/Tabs/Tab.js.map +1 -1
  179. package/lib/Tabs/TabContext.d.ts +3 -3
  180. package/lib/Tabs/TabList.d.ts +1 -1
  181. package/lib/Tabs/TabPanel.d.ts +1 -1
  182. package/lib/Terminal.d.ts +1 -1
  183. package/lib/TextArea.d.ts +4 -4
  184. package/lib/TextArea.module.scss +5 -1
  185. package/lib/TextAreaFormik.d.ts +1 -1
  186. package/lib/TextField.d.ts +9 -6
  187. package/lib/TextField.js +4 -4
  188. package/lib/TextField.js.map +1 -1
  189. package/lib/TextField.module.scss +12 -1
  190. package/lib/TextFieldFormik.d.ts +1 -1
  191. package/lib/TimeField.d.ts +3 -3
  192. package/lib/TimeField.js +4 -12
  193. package/lib/TimeField.js.map +1 -1
  194. package/lib/TimeField.module.scss +0 -87
  195. package/lib/TimeFieldFormik.d.ts +1 -1
  196. package/lib/Toast.d.ts +3 -3
  197. package/lib/Toast.module.scss +6 -6
  198. package/lib/Toggle.d.ts +4 -4
  199. package/lib/Toggle.js +1 -1
  200. package/lib/Toggle.js.map +1 -1
  201. package/lib/Toggle.module.scss +1 -1
  202. package/lib/ToggleFormik.d.ts +1 -1
  203. package/lib/Tooltip.d.ts +6 -5
  204. package/lib/Tooltip.js +4 -14
  205. package/lib/Tooltip.js.map +1 -1
  206. package/lib/hooks/index.d.ts +0 -1
  207. package/lib/hooks/index.js +0 -1
  208. package/lib/hooks/index.js.map +1 -1
  209. package/lib/hooks/useCloseOnResize.d.ts +8 -0
  210. package/lib/hooks/useCloseOnResize.js +16 -0
  211. package/lib/hooks/useCloseOnResize.js.map +1 -0
  212. package/lib/hooks/useDimensions.d.ts +1 -1
  213. package/lib/hooks/useOnClickOutside.d.ts +1 -1
  214. package/lib/hooks/usePagination.d.ts +2 -2
  215. package/lib/index.d.ts +3 -4
  216. package/lib/index.js +3 -4
  217. package/lib/index.js.map +1 -1
  218. package/lib/utils/formik.d.ts +2 -2
  219. package/lib/utils/portal.d.ts +2 -0
  220. package/lib/utils/portal.js +15 -0
  221. package/lib/utils/portal.js.map +1 -0
  222. package/lib/utils/test.d.ts +3 -1
  223. package/lib/utils/test.js.map +1 -1
  224. package/lib/utils/types.d.ts +1 -1
  225. package/package.json +60 -56
  226. package/styles/constants/_colors.scss +18 -15
  227. package/styles/constants/_sizes.scss +2 -1
  228. package/styles/constants/_typography.scss +34 -24
  229. package/styles/helpers/_gradients.scss +11 -0
  230. package/styles/helpers/_index.scss +1 -0
  231. package/styles/typography/fonts/LICENSE.txt +202 -0
  232. package/styles/typography/fonts/OpenSans-Italic.woff2 +0 -0
  233. package/styles/typography/fonts/OpenSans-Regular.woff2 +0 -0
  234. package/styles/typography/fonts/OpenSans-SemiBold.woff2 +0 -0
  235. package/styles/typography/fonts/OpenSans-SemiBoldItalic.woff2 +0 -0
  236. package/styles/typography/fonts/PPTelegraf-Light.woff2 +0 -0
  237. package/styles/typography/fonts/PPTelegraf-Medium.woff2 +0 -0
  238. package/styles/typography/fonts/PPTelegraf-RegularSlanted.woff2 +0 -0
  239. package/styles/typography/fonts/PPTelegraf-UltralightSlanted.woff2 +0 -0
  240. package/styles/typography/open-sans.css +35 -0
  241. package/styles/typography/pp-telegraf.css +31 -0
  242. package/lib/Code.d.ts +0 -8
  243. package/lib/Code.js +0 -16
  244. package/lib/Code.js.map +0 -1
  245. package/lib/CodeEditor.d.ts +0 -28
  246. package/lib/CodeEditor.js +0 -180
  247. package/lib/CodeEditor.js.map +0 -1
  248. package/lib/CodeEditor.module.scss +0 -32
  249. package/lib/CodeEditorFormik.d.ts +0 -9
  250. package/lib/CodeEditorFormik.js +0 -14
  251. package/lib/CodeEditorFormik.js.map +0 -1
  252. package/lib/hooks/useTableCustomizableColumns.d.ts +0 -10
  253. package/lib/hooks/useTableCustomizableColumns.js +0 -21
  254. package/lib/hooks/useTableCustomizableColumns.js.map +0 -1
  255. package/styles/fonts.css +0 -26
@@ -0,0 +1,17 @@
1
+ import React, { useMemo } from 'react';
2
+ import { Copy } from 'react-feather';
3
+ import { ContextMenu as OriginalContextMenu } from '../../../../ContextMenu';
4
+ import styles from './ContextMenu.module.scss';
5
+ export const ContextMenu = ({ anchorElement, onCopy }) => {
6
+ const items = useMemo(() => [
7
+ {
8
+ content: (React.createElement(React.Fragment, null,
9
+ "Copy ",
10
+ React.createElement(Copy, null))),
11
+ className: styles.item,
12
+ onClick: onCopy,
13
+ },
14
+ ], [onCopy]);
15
+ return React.createElement(OriginalContextMenu, { anchorElement: anchorElement, items: items });
16
+ };
17
+ //# sourceMappingURL=ContextMenu.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ContextMenu.js","sourceRoot":"","sources":["../../../../../src/Table/features/columnsSelection/ContextMenu/ContextMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AAEpC,OAAO,EAAmB,WAAW,IAAI,mBAAmB,EAAE,MAAM,yBAAyB,CAAA;AAE7F,OAAO,MAAM,MAAM,2BAA2B,CAAA;AAO9C,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAAE,aAAa,EAAE,MAAM,EAAoB,EAAE,EAAE;IACzE,MAAM,KAAK,GAAG,OAAO,CACnB,GAAG,EAAE,CAAC;QACJ;YACE,OAAO,EAAE,CACP;;gBACO,oBAAC,IAAI,OAAG,CACZ,CACJ;YACD,SAAS,EAAE,MAAM,CAAC,IAAI;YACtB,OAAO,EAAE,MAAM;SAChB;KACF,EACD,CAAC,MAAM,CAAC,CACT,CAAA;IACD,OAAO,oBAAC,mBAAmB,IAAC,aAAa,EAAE,aAAa,EAAE,KAAK,EAAE,KAAK,GAAI,CAAA;AAC5E,CAAC,CAAA"}
@@ -0,0 +1,6 @@
1
+ .item {
2
+ display: flex;
3
+ justify-content: space-between;
4
+ width: 160px;
5
+ align-items: center;
6
+ }
@@ -0,0 +1 @@
1
+ export * from './ContextMenu';
@@ -0,0 +1,2 @@
1
+ export * from './ContextMenu';
2
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/Table/features/columnsSelection/ContextMenu/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAA"}
@@ -0,0 +1,19 @@
1
+ /// <reference types="react" />
2
+ import { SelectedColumnsState } from './helpers';
3
+ export type ColumnsSelectionProps = {
4
+ rowsPerPage: number;
5
+ columnsPerRow: number;
6
+ };
7
+ export declare const useColumnsSelection: (props: ColumnsSelectionProps) => {
8
+ onEndSelection: () => void;
9
+ selectedColumns: SelectedColumnsState;
10
+ onClickSelection: (id: string, modifiers: {
11
+ ctrl: boolean;
12
+ shift: boolean;
13
+ }) => void;
14
+ setSelectedColumns: import("react").Dispatch<import("react").SetStateAction<SelectedColumnsState>>;
15
+ getSelectedColumns: () => SelectedColumnsState;
16
+ selectionStartedRef: import("react").MutableRefObject<boolean>;
17
+ onMouseEnterSelection: (id: string) => void;
18
+ selectedColumnValuesRef: import("react").MutableRefObject<(string | undefined)[][]>;
19
+ };
@@ -0,0 +1,71 @@
1
+ import { useCallback, useRef, useState } from 'react';
2
+ import { useRefValue } from '../../../hooks';
3
+ const initialSelectedColumnsState = {
4
+ columns: new Set(),
5
+ range: [undefined, undefined],
6
+ };
7
+ export const useColumnsSelection = (props) => {
8
+ const { columnsPerRow, rowsPerPage } = props;
9
+ const [selectedColumns, setSelectedColumns] = useState(initialSelectedColumnsState);
10
+ const selectionStartedRef = useRef(false);
11
+ const selectedColumnValuesRef = useRef([]);
12
+ const getColumnsPerRow = useRefValue(columnsPerRow);
13
+ const getRowsPerPage = useRefValue(rowsPerPage);
14
+ const getSelectedColumns = useRefValue(selectedColumns);
15
+ const clearSelectedColumnsValue = useCallback(() => {
16
+ selectedColumnValuesRef.current = Array.from(Array(getRowsPerPage()), () => new Array(getColumnsPerRow()));
17
+ }, [selectedColumnValuesRef, getRowsPerPage, getColumnsPerRow]);
18
+ const onEndSelection = useCallback(() => {
19
+ document.body.removeEventListener('mouseup', onEndSelection);
20
+ document.body.removeEventListener('contextmenu', onEndSelection);
21
+ selectionStartedRef.current = false;
22
+ }, []);
23
+ const onClickSelection = useCallback((id, modifiers) => {
24
+ setSelectedColumns((currentValue) => {
25
+ if (modifiers.ctrl) {
26
+ return {
27
+ ...currentValue,
28
+ columns: new Set(currentValue.columns.add(id)),
29
+ };
30
+ }
31
+ if (modifiers.shift && currentValue.columns.size === 1) {
32
+ const firstItem = currentValue.columns.values().next();
33
+ return {
34
+ columns: new Set(),
35
+ range: [firstItem.value, id],
36
+ };
37
+ }
38
+ clearSelectedColumnsValue();
39
+ return {
40
+ range: [undefined, undefined],
41
+ columns: new Set([id]),
42
+ };
43
+ });
44
+ }, [clearSelectedColumnsValue]);
45
+ const onMouseEnterSelection = useCallback((id) => {
46
+ setSelectedColumns((currentValue) => {
47
+ if (currentValue.columns.size === 1 && currentValue.range[0] === undefined) {
48
+ const firstItem = currentValue.columns.values().next();
49
+ return {
50
+ columns: new Set(),
51
+ range: [firstItem.value, id],
52
+ };
53
+ }
54
+ return {
55
+ ...currentValue,
56
+ range: [currentValue.range[0], id],
57
+ };
58
+ });
59
+ }, []);
60
+ return {
61
+ onEndSelection,
62
+ selectedColumns,
63
+ onClickSelection,
64
+ setSelectedColumns,
65
+ getSelectedColumns,
66
+ selectionStartedRef,
67
+ onMouseEnterSelection,
68
+ selectedColumnValuesRef,
69
+ };
70
+ };
71
+ //# sourceMappingURL=columnsSelection.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"columnsSelection.js","sourceRoot":"","sources":["../../../../src/Table/features/columnsSelection/columnsSelection.ts"],"names":[],"mappings":"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"}
@@ -0,0 +1,7 @@
1
+ export type SelectedColumnsState = {
2
+ range: [string | undefined, string | undefined];
3
+ columns: Set<string>;
4
+ };
5
+ export declare const cellIdToNumbersArray: (cellId: string) => [number, number];
6
+ export declare const inRange: (cellId: string, range: [string | undefined, string | undefined]) => boolean;
7
+ export declare const isCellSelected: (cellId: string, selectedColumns: SelectedColumnsState) => boolean;
@@ -0,0 +1,26 @@
1
+ export const cellIdToNumbersArray = (cellId) => {
2
+ const values = cellId.split(':');
3
+ return [Number(values[0]), Number(values[1])];
4
+ };
5
+ export const inRange = (cellId, range) => {
6
+ const start = range[0];
7
+ const end = range[1];
8
+ if (start) {
9
+ if (end) {
10
+ const cellValues = cellIdToNumbersArray(cellId);
11
+ const startValues = cellIdToNumbersArray(start);
12
+ const endValues = cellIdToNumbersArray(end);
13
+ const minRowIndex = Math.min(startValues[0], endValues[0]);
14
+ const maxRowIndex = Math.max(startValues[0], endValues[0]);
15
+ const minCellIndex = Math.min(startValues[1], endValues[1]);
16
+ const maxCellIndex = Math.max(startValues[1], endValues[1]);
17
+ return cellValues[0] >= minRowIndex && cellValues[0] <= maxRowIndex && cellValues[1] >= minCellIndex && cellValues[1] <= maxCellIndex;
18
+ }
19
+ return cellId === start;
20
+ }
21
+ return false;
22
+ };
23
+ export const isCellSelected = (cellId, selectedColumns) => {
24
+ return selectedColumns.columns.has(cellId) || inRange(cellId, selectedColumns.range);
25
+ };
26
+ //# sourceMappingURL=helpers.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"helpers.js","sourceRoot":"","sources":["../../../../src/Table/features/columnsSelection/helpers.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,MAAc,EAAoB,EAAE;IACvE,MAAM,MAAM,GAAG,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,CAAA;IAEhC,OAAO,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;AAC/C,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,MAAc,EAAE,KAA+C,EAAW,EAAE;IAClG,MAAM,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC,CAAA;IACtB,MAAM,GAAG,GAAG,KAAK,CAAC,CAAC,CAAC,CAAA;IAEpB,IAAI,KAAK,EAAE;QACT,IAAI,GAAG,EAAE;YACP,MAAM,UAAU,GAAG,oBAAoB,CAAC,MAAM,CAAC,CAAA;YAC/C,MAAM,WAAW,GAAG,oBAAoB,CAAC,KAAK,CAAC,CAAA;YAC/C,MAAM,SAAS,GAAG,oBAAoB,CAAC,GAAG,CAAC,CAAA;YAC3C,MAAM,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,CAAA;YAC1D,MAAM,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,CAAA;YAC1D,MAAM,YAAY,GAAG,IAAI,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,CAAA;YAC3D,MAAM,YAAY,GAAG,IAAI,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,CAAA;YAE3D,OAAO,UAAU,CAAC,CAAC,CAAC,IAAI,WAAW,IAAI,UAAU,CAAC,CAAC,CAAC,IAAI,WAAW,IAAI,UAAU,CAAC,CAAC,CAAC,IAAI,YAAY,IAAI,UAAU,CAAC,CAAC,CAAC,IAAI,YAAY,CAAA;SACtI;QAED,OAAO,MAAM,KAAK,KAAK,CAAA;KACxB;IAED,OAAO,KAAK,CAAA;AACd,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,MAAc,EAAE,eAAqC,EAAW,EAAE;IAC/F,OAAO,eAAe,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,OAAO,CAAC,MAAM,EAAE,eAAe,CAAC,KAAK,CAAC,CAAA;AACtF,CAAC,CAAA"}
@@ -0,0 +1,4 @@
1
+ export * from './columnsSelection';
2
+ export * from './helpers';
3
+ export * from './CellCopyablePopover';
4
+ export * from './ContextMenu';
@@ -0,0 +1,5 @@
1
+ export * from './columnsSelection';
2
+ export * from './helpers';
3
+ export * from './CellCopyablePopover';
4
+ export * from './ContextMenu';
5
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/Table/features/columnsSelection/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAA;AAClC,cAAc,WAAW,CAAA;AACzB,cAAc,uBAAuB,CAAA;AACrC,cAAc,eAAe,CAAA"}
package/lib/Tabs/Tab.d.ts CHANGED
@@ -1,27 +1,41 @@
1
- import { FC, MouseEvent, KeyboardEvent } from 'react';
1
+ import { FC, MouseEvent, KeyboardEvent, ReactNode } from 'react';
2
2
  import { IconProps } from '../Icon';
3
- export declare type AnchorTabProps = {
3
+ export type AnchorTabProps = {
4
4
  component: 'a';
5
5
  href: string;
6
6
  };
7
- export declare type ButtonTabProps = {
7
+ export type ButtonTabProps = {
8
8
  component?: 'button';
9
9
  href?: never;
10
10
  };
11
- declare type TabTypeProps = AnchorTabProps | ButtonTabProps;
12
- declare type TabIconProps = {
11
+ type TabTypeProps = AnchorTabProps | ButtonTabProps;
12
+ type TabLabelProps = {
13
+ /** @deprecated The property should not be used */
14
+ label: string;
13
15
  icon: IconProps['icon'];
14
16
  iconAriaLabel: string;
17
+ children?: never;
18
+ ariaLabel?: never;
19
+ } | {
20
+ /** @deprecated The property should not be used */
21
+ label: string;
22
+ icon?: never;
23
+ iconAriaLabel?: never;
24
+ children?: never;
25
+ ariaLabel?: never;
15
26
  } | {
27
+ label?: never;
16
28
  icon?: never;
17
29
  iconAriaLabel?: never;
30
+ children: ReactNode;
31
+ ariaLabel: string;
18
32
  };
19
- export declare type TabCommonProps = {
20
- label: string;
33
+ export type TabCommonProps = {
21
34
  value: number;
22
35
  onClick?: (event: MouseEvent<HTMLButtonElement | HTMLAnchorElement> | KeyboardEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
36
+ className?: string;
23
37
  };
24
- export declare type TabProps<T = TabTypeProps> = TabCommonProps & T & TabIconProps;
38
+ export type TabProps<T = TabTypeProps> = TabCommonProps & T & TabLabelProps;
25
39
  /**
26
40
  * ### Purpose
27
41
  * A single tab implementation that works together with TabContext and TabList components.
package/lib/Tabs/Tab.js CHANGED
@@ -15,7 +15,16 @@ import styles from './Tab.module.scss';
15
15
  * More info - https://www.w3.org/TR/wai-aria-practices/#kbd_selection_follows_focus
16
16
  *
17
17
  */
18
- export const Tab = ({ component: Component = 'button', label, value, href, onClick, icon, iconAriaLabel }) => {
18
+ export const Tab = ({ component: Component = 'button',
19
+ /**
20
+ * @deprecated The property should not be used
21
+ */
22
+ label, value, href, onClick,
23
+ /** @deprecated The property should not be used */
24
+ icon,
25
+ /** @deprecated The property should not be used */
26
+ iconAriaLabel, children, ariaLabel, className, }) => {
27
+ var _a;
19
28
  const { onChange, value: activeValue, idPrefix, fullWidth } = useTabContext();
20
29
  const selected = value === activeValue;
21
30
  const handleClick = useCallback((event) => {
@@ -35,8 +44,10 @@ export const Tab = ({ component: Component = 'button', label, value, href, onCli
35
44
  handleClick(event);
36
45
  }
37
46
  }, [handleClick]);
38
- return (React.createElement(Component, { className: cn(styles.tab, { [styles.selected]: selected, [styles.fullWidth]: fullWidth }), role: "tab", id: getTabId(idPrefix, value.toString()), "aria-controls": getPanelId(idPrefix, value.toString()), "aria-selected": selected, tabIndex: selected ? 0 : -1, onKeyPress: onKeyPress, onClick: handleClick, href: selected ? undefined : href },
39
- icon && iconAriaLabel && React.createElement(Icon, { icon: icon, ariaLabel: iconAriaLabel, className: styles.icon }),
40
- label));
47
+ return (React.createElement(Component, { className: cn(styles.tab, { [styles.selected]: selected, [styles.fullWidth]: fullWidth }, className), role: "tab", id: getTabId(idPrefix, value.toString()), "aria-controls": getPanelId(idPrefix, value.toString()), "aria-selected": selected, tabIndex: selected ? 0 : -1, onKeyPress: onKeyPress, onClick: handleClick, ...(Component === 'a' && !selected && { href }), "aria-label": label !== null && label !== void 0 ? label : ariaLabel }, children
48
+ ? children
49
+ : (_a = (icon && iconAriaLabel && (React.createElement("span", null,
50
+ React.createElement(Icon, { icon: icon, ariaLabel: iconAriaLabel, className: styles.icon }),
51
+ label)))) !== null && _a !== void 0 ? _a : label));
41
52
  };
42
53
  //# sourceMappingURL=Tab.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Tab.js","sourceRoot":"","sources":["../../src/Tabs/Tab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAM,WAAW,EAA6B,MAAM,OAAO,CAAA;AACzE,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,OAAO,EAAE,IAAI,EAAa,MAAM,SAAS,CAAA;AACzC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAClE,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAA;AAE9C,OAAO,MAAM,MAAM,mBAAmB,CAAA;AA+BtC;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,GAAG,GAAiB,CAAC,EAAE,SAAS,EAAE,SAAS,GAAG,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,aAAa,EAAE,EAAE,EAAE;IACzH,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,aAAa,EAAE,CAAA;IAC7E,MAAM,QAAQ,GAAG,KAAK,KAAK,WAAW,CAAA;IAEtC,MAAM,WAAW,GAAG,WAAW,CAC7B,CAAC,KAA+G,EAAE,EAAE;QAClH,IAAI,QAAQ,EAAE;YACZ,OAAM;SACP;QAED,IAAI,OAAO,EAAE;YACX,OAAO,CAAC,KAAK,CAAC,CAAA;SACf;QAED,QAAQ,CAAC,KAAK,CAAC,CAAA;IACjB,CAAC,EACD,CAAC,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,CAAC,CACrC,CAAA;IAED,wDAAwD;IACxD,+DAA+D;IAC/D,MAAM,UAAU,GAAG,WAAW,CAC5B,CAAC,KAA2D,EAAE,EAAE;QAC9D,KAAK,CAAC,cAAc,EAAE,CAAA;QAEtB,IAAI,UAAU,CAAC,KAAK,EAAE,OAAO,EAAE,OAAO,CAAC,EAAE;YACvC,WAAW,CAAC,KAAK,CAAC,CAAA;SACnB;IACH,CAAC,EACD,CAAC,WAAW,CAAC,CACd,CAAA;IAED,OAAO,CACL,oBAAC,SAAS,IACR,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,GAAG,EAAE,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,QAAQ,EAAE,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE,SAAS,EAAE,CAAC,EACzF,IAAI,EAAC,KAAK,EACV,EAAE,EAAE,QAAQ,CAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,CAAC,mBACzB,UAAU,CAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,CAAC,mBACtC,QAAQ,EACvB,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAC3B,UAAU,EAAE,UAAU,EACtB,OAAO,EAAE,WAAW,EACpB,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI;QAEhC,IAAI,IAAI,aAAa,IAAI,oBAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,CAAC,IAAI,GAAI;QAC/F,KAAK,CACI,CACb,CAAA;AACH,CAAC,CAAA"}
1
+ {"version":3,"file":"Tab.js","sourceRoot":"","sources":["../../src/Tabs/Tab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAM,WAAW,EAAwC,MAAM,OAAO,CAAA;AACpF,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,OAAO,EAAE,IAAI,EAAa,MAAM,SAAS,CAAA;AACzC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAClE,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAA;AAE9C,OAAO,MAAM,MAAM,mBAAmB,CAAA;AA8CtC;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,GAAG,GAAiB,CAAC,EAChC,SAAS,EAAE,SAAS,GAAG,QAAQ;AAC/B;;GAEG;AACH,KAAK,EACL,KAAK,EACL,IAAI,EACJ,OAAO;AACP,kDAAkD;AAClD,IAAI;AACJ,kDAAkD;AAClD,aAAa,EACb,QAAQ,EACR,SAAS,EACT,SAAS,GACV,EAAE,EAAE;;IACH,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,aAAa,EAAE,CAAA;IAC7E,MAAM,QAAQ,GAAG,KAAK,KAAK,WAAW,CAAA;IAEtC,MAAM,WAAW,GAAG,WAAW,CAC7B,CAAC,KAA+G,EAAE,EAAE;QAClH,IAAI,QAAQ,EAAE;YACZ,OAAM;SACP;QAED,IAAI,OAAO,EAAE;YACX,OAAO,CAAC,KAAK,CAAC,CAAA;SACf;QAED,QAAQ,CAAC,KAAK,CAAC,CAAA;IACjB,CAAC,EACD,CAAC,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,CAAC,CACrC,CAAA;IAED,wDAAwD;IACxD,+DAA+D;IAC/D,MAAM,UAAU,GAAG,WAAW,CAC5B,CAAC,KAA2D,EAAE,EAAE;QAC9D,KAAK,CAAC,cAAc,EAAE,CAAA;QAEtB,IAAI,UAAU,CAAC,KAAK,EAAE,OAAO,EAAE,OAAO,CAAC,EAAE;YACvC,WAAW,CAAC,KAAK,CAAC,CAAA;SACnB;IACH,CAAC,EACD,CAAC,WAAW,CAAC,CACd,CAAA;IAED,OAAO,CACL,oBAAC,SAAS,IACR,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,GAAG,EAAE,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,QAAQ,EAAE,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE,SAAS,EAAE,EAAE,SAAS,CAAC,EACpG,IAAI,EAAC,KAAK,EACV,EAAE,EAAE,QAAQ,CAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,CAAC,mBACzB,UAAU,CAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,CAAC,mBACtC,QAAQ,EACvB,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAC3B,UAAU,EAAE,UAAU,EACtB,OAAO,EAAE,WAAW,KAChB,CAAC,SAAS,KAAK,GAAG,IAAI,CAAC,QAAQ,IAAI,EAAE,IAAI,EAAE,CAAC,gBACpC,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,SAAS,IAE7B,QAAQ;QACP,CAAC,CAAC,QAAQ;QACV,CAAC,CAAC,MAAA,CAAC,IAAI,IAAI,aAAa,IAAI,CACxB;YACE,oBAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,CAAC,IAAI,GAAI;YACrE,KAAK,CACD,CACR,CAAC,mCACF,KAAK,CACC,CACb,CAAA;AACH,CAAC,CAAA"}
@@ -1,5 +1,5 @@
1
1
  import React, { FC, ReactNode } from 'react';
2
- export declare type TabContextValue = {
2
+ export type TabContextValue = {
3
3
  onChange: (value: number) => void;
4
4
  value: number;
5
5
  idPrefix: string;
@@ -14,7 +14,7 @@ export declare const TabContext: React.Context<TabContextValue>;
14
14
  * A custom hook utilizing context for easy usage.
15
15
  */
16
16
  export declare const useTabContext: () => TabContextValue;
17
- export declare type TabContextProviderProps = Pick<TabContextValue, 'fullWidth'> & {
17
+ export type TabContextProviderProps = Pick<TabContextValue, 'fullWidth'> & {
18
18
  children: ReactNode;
19
19
  };
20
20
  /**
@@ -22,7 +22,7 @@ export declare type TabContextProviderProps = Pick<TabContextValue, 'fullWidth'>
22
22
  * If you want more control over the value state (active tab) you can use TabContextProviderControlled.
23
23
  */
24
24
  export declare const TabContextProvider: FC<TabContextProviderProps>;
25
- export declare type TabContextProviderControlledProps = Omit<TabContextValue, 'idPrefix'> & {
25
+ export type TabContextProviderControlledProps = Omit<TabContextValue, 'idPrefix'> & {
26
26
  children: ReactNode;
27
27
  };
28
28
  /**
@@ -1,5 +1,5 @@
1
1
  import { FC, ReactNode } from 'react';
2
- export declare type TabListProps = {
2
+ export type TabListProps = {
3
3
  ariaLabel: string;
4
4
  className?: string;
5
5
  children: ReactNode;
@@ -1,5 +1,5 @@
1
1
  import { FC, ReactNode } from 'react';
2
- export declare type TabPanelProps = {
2
+ export type TabPanelProps = {
3
3
  value: number;
4
4
  children: ReactNode;
5
5
  };
package/lib/Terminal.d.ts CHANGED
@@ -3,7 +3,7 @@ import { DataTestProp } from '@hazelcast/helpers';
3
3
  export declare class CommandTimeoutError extends Error {
4
4
  name: string;
5
5
  }
6
- export declare type TerminalProps = {
6
+ export type TerminalProps = {
7
7
  onExecute: (command: string, args: string[]) => Promise<string[]>;
8
8
  commandTimeout?: number;
9
9
  historyLimit?: number;
package/lib/TextArea.d.ts CHANGED
@@ -1,19 +1,19 @@
1
1
  import { ChangeEvent, FC, FocusEvent } from 'react';
2
2
  import { DataTestProp } from '@hazelcast/helpers';
3
3
  import { FieldHeaderProps } from './FieldHeader';
4
- export declare type TextAreaSize = 'medium' | 'small';
5
- export declare type TextAreaCoreProps = {
4
+ export type TextAreaSize = 'medium' | 'small';
5
+ export type TextAreaCoreProps = {
6
6
  name: string;
7
7
  value?: string;
8
8
  onBlur?: (e: FocusEvent<HTMLTextAreaElement>) => void;
9
9
  onChange: (e: ChangeEvent<HTMLTextAreaElement>) => void;
10
10
  error?: string;
11
11
  };
12
- export declare type TextAreaExtraProps = {
12
+ export type TextAreaExtraProps = {
13
13
  textareaClassName?: string;
14
14
  errorClassName?: string;
15
15
  resizable?: boolean;
16
16
  size?: TextAreaSize;
17
17
  } & Partial<Pick<HTMLTextAreaElement, 'className' | 'disabled' | 'placeholder' | 'required' | 'rows'>> & Omit<FieldHeaderProps, 'id'>;
18
- export declare type TextAreaProps = TextAreaCoreProps & TextAreaExtraProps & DataTestProp;
18
+ export type TextAreaProps = TextAreaCoreProps & TextAreaExtraProps & DataTestProp;
19
19
  export declare const TextArea: FC<TextAreaProps>;
@@ -84,7 +84,7 @@
84
84
  line-height: inherit;
85
85
  letter-spacing: inherit;
86
86
  color: inherit;
87
- background-color: c.$colorNeutralLighter;
87
+ background-color: c.$colorOverlayBackground;
88
88
  /* doiuse-disable css-resize */
89
89
  resize: vertical;
90
90
  /* doiuse-enable css-resize */
@@ -123,6 +123,10 @@
123
123
  .textAreaWrapper .borderOverlay {
124
124
  border-color: c.$colorError;
125
125
  }
126
+
127
+ label {
128
+ color: c.$colorError;
129
+ }
126
130
  }
127
131
 
128
132
  textarea:focus {
@@ -2,7 +2,7 @@ import { ReactElement } from 'react';
2
2
  import { FieldValidator } from 'formik';
3
3
  import { TextAreaExtraProps } from './TextArea';
4
4
  import { ExtractKeysOfValueType } from './utils/types';
5
- export declare type TextAreaFormikProps<V extends object> = TextAreaExtraProps & {
5
+ export type TextAreaFormikProps<V extends object> = TextAreaExtraProps & {
6
6
  name: ExtractKeysOfValueType<V, string | undefined>;
7
7
  validate?: FieldValidator;
8
8
  };
@@ -4,16 +4,17 @@ import { Icon as IconType } from 'react-feather';
4
4
  import { FieldHeaderProps } from './FieldHeader';
5
5
  import { IconSize } from './Icon';
6
6
  import { TooltipProps } from './Tooltip';
7
- export declare type TextFieldSize = 'medium' | 'small';
8
- declare type TextFieldTrailingIcon = {
7
+ export type TextFieldSize = 'medium' | 'small' | 'large';
8
+ export type TextFieldVariant = 'primary' | 'secondary';
9
+ type TextFieldTrailingIcon = {
9
10
  inputTrailingIcon: IconType;
10
11
  inputTrailingIconLabel: string;
11
12
  } | {
12
13
  inputTrailingIcon?: never;
13
14
  inputTrailingIconLabel?: never;
14
15
  };
15
- export declare type TextFieldTypes = 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'url' | undefined;
16
- declare type TextFieldCoreProps<T extends TextFieldTypes> = {
16
+ export type TextFieldTypes = 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'url' | undefined;
17
+ type TextFieldCoreProps<T extends TextFieldTypes> = {
17
18
  name: string;
18
19
  value?: T extends 'number' ? number : string;
19
20
  onBlur?: (e: FocusEvent<HTMLInputElement>) => void;
@@ -21,8 +22,10 @@ declare type TextFieldCoreProps<T extends TextFieldTypes> = {
21
22
  onClick?: (e: MouseEvent<HTMLInputElement>) => void;
22
23
  error?: string;
23
24
  };
24
- export declare type TextFieldExtraProps<T extends TextFieldTypes> = {
25
+ export type TextFieldExtraProps<T extends TextFieldTypes> = {
26
+ ariaLabel?: string;
25
27
  size?: TextFieldSize;
28
+ variant?: TextFieldVariant;
26
29
  iconSize?: IconSize;
27
30
  className?: string;
28
31
  inputContainerClassName?: string;
@@ -36,7 +39,7 @@ export declare type TextFieldExtraProps<T extends TextFieldTypes> = {
36
39
  clearable?: boolean;
37
40
  errorTooltipPlacement?: TooltipProps['placement'];
38
41
  } & DataTestProp & Pick<InputHTMLAttributes<HTMLInputElement>, 'id' | 'autoFocus' | 'disabled' | 'autoComplete' | 'required' | 'placeholder'> & TextFieldTrailingIcon & Omit<FieldHeaderProps, 'id'>;
39
- export declare type TextFieldProps<T extends TextFieldTypes> = TextFieldCoreProps<T> & TextFieldExtraProps<T>;
42
+ export type TextFieldProps<T extends TextFieldTypes> = TextFieldCoreProps<T> & TextFieldExtraProps<T>;
40
43
  export declare const TextField: <T extends TextFieldTypes>({ mRef, ...props }: TextFieldProps<T> & {
41
44
  mRef?: React.Ref<HTMLInputElement> | undefined;
42
45
  }) => JSX.Element;
package/lib/TextField.js CHANGED
@@ -20,14 +20,13 @@ import styles from './TextField.module.scss';
20
20
  * - Text Field is available in 2 variations: `small` (height of 30 px) and `medium` (height of 40 px). The use depends mainly on the space in UI.
21
21
  * - All of the variations can be either with the label, or without label.
22
22
  * - Standard label alignment is left-aligned with the field underneath.
23
- * - Mostly all of the fields are required. If some of them are not, use text "Optional" behind the label.
24
23
  * - If needed, you can use icon on the left side or on the right side inside the Text Input (e.g. Eye icon to show / hide password).
25
24
  *
26
25
  * ### Usage
27
26
  * Use a text input when the expected user input is a single line of text.
28
27
  */
29
28
  const TextFieldInternal = (props, ref) => {
30
- const { 'data-test': dataTest, className, disabled, error, errorClassName, helperText, id: explicitId, inputClassName, inputContainerChild, inputContainerClassName, inputIcon, inputTrailingIcon, inputTrailingIconLabel, label, labelClassName, showAriaLabel = false, name, size = 'medium', onBlur, onChange, onKeyPress, placeholder, required, type = 'text', value, readOnly, onClick, clearable, iconSize = size, errorTooltipPlacement = 'top', ...htmlAttrs } = props;
29
+ const { 'data-test': dataTest, ariaLabel, className, disabled, error, errorClassName, helperText, helperTextTooltipWordBreak, id: explicitId, inputClassName, inputContainerChild, inputContainerClassName, inputIcon, inputTrailingIcon, inputTrailingIconLabel, label, labelClassName, showAriaLabel = false, name, size = 'medium', variant = 'primary', onBlur, onChange, onKeyPress, placeholder, required, type = 'text', value, readOnly, onClick, clearable, iconSize = size, errorTooltipPlacement = 'top', ...htmlAttrs } = props;
31
30
  const autoId = useUID();
32
31
  const id = explicitId !== null && explicitId !== void 0 ? explicitId : autoId;
33
32
  const inputRef = useRef(null);
@@ -41,15 +40,16 @@ const TextFieldInternal = (props, ref) => {
41
40
  return (React.createElement("div", { "data-test": dataTest, className: cn(styles.container, {
42
41
  [styles.withError]: 'error' in props,
43
42
  [styles.small]: size === 'small',
43
+ [styles.large]: size === 'large',
44
44
  [styles.disabled]: disabled,
45
45
  [styles.hasError]: error,
46
46
  [styles.withIcon]: inputIcon,
47
47
  [styles.empty]: value === undefined,
48
48
  }, className) },
49
- React.createElement(FieldHeader, { id: id, size: size, label: label, helperText: helperText, showAriaLabel: showAriaLabel, labelClassName: labelClassName }),
49
+ React.createElement(FieldHeader, { id: id, size: size, label: label, variant: variant, helperText: helperText, showAriaLabel: showAriaLabel, labelClassName: labelClassName, helperTextTooltipWordBreak: helperTextTooltipWordBreak }),
50
50
  React.createElement("div", { className: styles.inputBlock },
51
51
  React.createElement("div", { className: cn(styles.inputContainer, inputContainerClassName) },
52
- React.createElement("input", { type: type, id: id, ref: mergedRef, value: value !== null && value !== void 0 ? value : '', name: name, onChange: onChange, onBlur: onBlur, readOnly: readOnly, onKeyPress: onKeyPress, onClick: onClick, "aria-label": showAriaLabel ? label : undefined, "aria-invalid": !!error, "aria-required": required, "aria-describedby": helperText && helpTooltipId(id), "aria-errormessage": error && errorId(id), disabled: disabled, placeholder: placeholder, className: cn(inputClassName, {
52
+ React.createElement("input", { type: type, id: id, ref: mergedRef, value: value !== null && value !== void 0 ? value : '', name: name, onChange: onChange, onBlur: onBlur, readOnly: readOnly, onKeyPress: onKeyPress, onClick: onClick, "aria-label": showAriaLabel ? ariaLabel : undefined, "aria-invalid": !!error, "aria-required": required, "aria-describedby": helperText && helpTooltipId(id), "aria-errormessage": error && errorId(id), disabled: disabled, placeholder: placeholder, className: cn(inputClassName, {
53
53
  [styles.trailingIcon]: inputTrailingIcon,
54
54
  }), ...htmlAttrs }),
55
55
  React.createElement("div", { className: styles.borderOverlay }),
@@ -1 +1 @@
1
- {"version":3,"file":"TextField.js","sourceRoot":"","sources":["../src/TextField.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"TextField.js","sourceRoot":"","sources":["../src/TextField.tsx"],"names":[],"mappings":"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"}
@@ -21,9 +21,10 @@ $marginLeftWithIcon: c.$grid * 5;
21
21
  flex: 1 1 auto;
22
22
  display: flex;
23
23
  flex-direction: row;
24
+ overflow: hidden;
24
25
  box-sizing: border-box;
25
26
  height: c.$inputHeight;
26
- background-color: c.$colorNeutralLighter;
27
+ background-color: c.$colorOverlayBackground;
27
28
  border-radius: c.$borderRadius;
28
29
  }
29
30
 
@@ -115,6 +116,12 @@ $marginLeftWithIcon: c.$grid * 5;
115
116
  }
116
117
  }
117
118
 
119
+ &.large {
120
+ .inputContainer {
121
+ height: c.$inputHeightLarge;
122
+ }
123
+ }
124
+
118
125
  &.mockAutofill {
119
126
  input {
120
127
  @include h.mockChromeAutofill;
@@ -148,6 +155,10 @@ $marginLeftWithIcon: c.$grid * 5;
148
155
  }
149
156
  }
150
157
 
158
+ &.hasError label {
159
+ color: c.$colorError;
160
+ }
161
+
151
162
  input:focus,
152
163
  input.focus {
153
164
  // Do not remove outline for high-contrast modes
@@ -2,7 +2,7 @@ import React, { ReactElement } from 'react';
2
2
  import { TextFieldExtraProps, TextFieldTypes } from './TextField';
3
3
  import { FieldValidatorGeneric } from './utils/formik';
4
4
  import { ExtractKeysOfValueType } from './utils/types';
5
- export declare type TextFieldFormikProps<V extends object> = TextFieldExtraProps<Exclude<TextFieldTypes, 'number' | 'password'>> & {
5
+ export type TextFieldFormikProps<V extends object> = TextFieldExtraProps<Exclude<TextFieldTypes, 'number' | 'password'>> & {
6
6
  name: ExtractKeysOfValueType<V, string | undefined>;
7
7
  validate?: FieldValidatorGeneric<string | undefined>;
8
8
  onChange?: (value: string) => void;
@@ -1,17 +1,17 @@
1
1
  import { FocusEvent, ChangeEvent, FC, InputHTMLAttributes } from 'react';
2
2
  import { DataTestProp } from '@hazelcast/helpers';
3
3
  import { FieldHeaderProps } from './FieldHeader';
4
- export declare type TimeFieldCoreProps = {
4
+ export type TimeFieldCoreProps = {
5
5
  name: string;
6
6
  value?: string;
7
7
  onBlur?: (e: FocusEvent<HTMLInputElement>) => void;
8
8
  onChange: (e: ChangeEvent<HTMLInputElement>) => void;
9
9
  error?: string;
10
10
  };
11
- export declare type TimeFieldExtraProps = {
11
+ export type TimeFieldExtraProps = {
12
12
  inputClassName?: string;
13
13
  errorClassName?: string;
14
14
  seconds?: boolean;
15
15
  } & Pick<InputHTMLAttributes<HTMLInputElement>, 'id' | 'className' | 'autoFocus' | 'disabled' | 'required'> & Omit<FieldHeaderProps, 'id'>;
16
- export declare type TypeFieldProps = TimeFieldCoreProps & TimeFieldExtraProps & DataTestProp;
16
+ export type TypeFieldProps = TimeFieldCoreProps & TimeFieldExtraProps & DataTestProp;
17
17
  export declare const TimeField: FC<TypeFieldProps>;
package/lib/TimeField.js CHANGED
@@ -1,23 +1,15 @@
1
1
  import React from 'react';
2
2
  import cn from 'classnames';
3
3
  import { useUID } from 'react-uid';
4
- import { Error, errorId } from './Error';
5
- import { FieldHeader } from './FieldHeader';
4
+ import SimpleTimeField from 'react-simple-timefield';
6
5
  import styles from './TimeField.module.scss';
6
+ import { TextField } from './TextField';
7
7
  export const TimeField = (props) => {
8
8
  const { 'data-test': dataTest, className, disabled, error, errorClassName, id: explicitId, inputClassName, label, labelClassName, name, onBlur, onChange, required, seconds = false, value, helperText, size, showAriaLabel, ...rest } = props;
9
9
  // Use an auto generated id if it's not set explicitly
10
10
  const autoId = useUID();
11
11
  const id = explicitId !== null && explicitId !== void 0 ? explicitId : autoId;
12
- return (React.createElement("div", { "data-test": dataTest, className: cn(styles.container, className, { [styles.withError]: 'error' in props }) },
13
- React.createElement(FieldHeader, { id: id, size: size, label: label, helperText: helperText, showAriaLabel: showAriaLabel, labelClassName: labelClassName }),
14
- React.createElement("div", { className: styles.inputBlock },
15
- React.createElement("div", { className: styles.inputContainer },
16
- React.createElement("input", { type: "time", step: seconds ? '1' : undefined, id: id, name: name, className: cn(styles.input, inputClassName, {
17
- [styles.disabled]: disabled,
18
- [styles.error]: error,
19
- }), onChange: onChange, onBlur: onBlur, value: value, required: required, disabled: disabled, "aria-invalid": !!error, "aria-label": showAriaLabel ? label : undefined, "aria-required": required, "aria-errormessage": error && errorId(id), ...rest }),
20
- React.createElement("div", { className: styles.borderOverlay }))),
21
- React.createElement(Error, { truncated: true, error: error, className: cn(styles.errorContainer, errorClassName), inputId: id })));
12
+ return (React.createElement("div", { "data-test": dataTest, className: cn(styles.container, className) },
13
+ React.createElement(SimpleTimeField, { showSeconds: seconds, input: React.createElement(TextField, { name: name, id: id, label: label, error: error, onChange: onChange, errorClassName: errorClassName, inputClassName: inputClassName, labelClassName: labelClassName, onBlur: onBlur, size: size, required: required, disabled: disabled, showAriaLabel: showAriaLabel, helperText: helperText, ...rest }), onChange: onChange, value: value })));
22
14
  };
23
15
  //# sourceMappingURL=TimeField.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"TimeField.js","sourceRoot":"","sources":["../src/TimeField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2D,MAAM,OAAO,CAAA;AAC/E,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAGlC,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,SAAS,CAAA;AACxC,OAAO,EAAE,WAAW,EAAoB,MAAM,eAAe,CAAA;AAE7D,OAAO,MAAM,MAAM,yBAAyB,CAAA;AAmB5C,MAAM,CAAC,MAAM,SAAS,GAAuB,CAAC,KAAK,EAAE,EAAE;IACrD,MAAM,EACJ,WAAW,EAAE,QAAQ,EACrB,SAAS,EACT,QAAQ,EACR,KAAK,EACL,cAAc,EACd,EAAE,EAAE,UAAU,EACd,cAAc,EACd,KAAK,EACL,cAAc,EACd,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,OAAO,GAAG,KAAK,EACf,KAAK,EACL,UAAU,EACV,IAAI,EACJ,aAAa,EACb,GAAG,IAAI,EACR,GAAG,KAAK,CAAA;IACT,sDAAsD;IACtD,MAAM,MAAM,GAAG,MAAM,EAAE,CAAA;IACvB,MAAM,EAAE,GAAG,UAAU,aAAV,UAAU,cAAV,UAAU,GAAI,MAAM,CAAA;IAE/B,OAAO,CACL,0CAAgB,QAAQ,EAAE,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE,OAAO,IAAI,KAAK,EAAE,CAAC;QAC5G,oBAAC,WAAW,IACV,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,UAAU,EACtB,aAAa,EAAE,aAAa,EAC5B,cAAc,EAAE,cAAc,GAC9B;QAEF,6BAAK,SAAS,EAAE,MAAM,CAAC,UAAU;YAC/B,6BAAK,SAAS,EAAE,MAAM,CAAC,cAAc;gBACnC,+BACE,IAAI,EAAC,MAAM,EACX,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS,EAC/B,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,cAAc,EAAE;wBAC1C,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,QAAQ;wBAC3B,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,KAAK;qBACtB,CAAC,EACF,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,kBAEJ,CAAC,CAAC,KAAK,gBACT,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,mBAC9B,QAAQ,uBACJ,KAAK,IAAI,OAAO,CAAC,EAAE,CAAC,KACnC,IAAI,GACR;gBACF,6BAAK,SAAS,EAAE,MAAM,CAAC,aAAa,GAAI,CACpC,CACF;QACN,oBAAC,KAAK,IAAC,SAAS,QAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,cAAc,EAAE,cAAc,CAAC,EAAE,OAAO,EAAE,EAAE,GAAI,CAChG,CACP,CAAA;AACH,CAAC,CAAA"}
1
+ {"version":3,"file":"TimeField.js","sourceRoot":"","sources":["../src/TimeField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2D,MAAM,OAAO,CAAA;AAC/E,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAClC,OAAO,eAAe,MAAM,wBAAwB,CAAA;AAKpD,OAAO,MAAM,MAAM,yBAAyB,CAAA;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AAmBvC,MAAM,CAAC,MAAM,SAAS,GAAuB,CAAC,KAAK,EAAE,EAAE;IACrD,MAAM,EACJ,WAAW,EAAE,QAAQ,EACrB,SAAS,EACT,QAAQ,EACR,KAAK,EACL,cAAc,EACd,EAAE,EAAE,UAAU,EACd,cAAc,EACd,KAAK,EACL,cAAc,EACd,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,OAAO,GAAG,KAAK,EACf,KAAK,EACL,UAAU,EACV,IAAI,EACJ,aAAa,EACb,GAAG,IAAI,EACR,GAAG,KAAK,CAAA;IACT,sDAAsD;IACtD,MAAM,MAAM,GAAG,MAAM,EAAE,CAAA;IACvB,MAAM,EAAE,GAAG,UAAU,aAAV,UAAU,cAAV,UAAU,GAAI,MAAM,CAAA;IAE/B,OAAO,CACL,0CAAgB,QAAQ,EAAE,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,SAAS,CAAC;QAClE,oBAAC,eAAe,IACd,WAAW,EAAE,OAAO,EACpB,KAAK,EACH,oBAAC,SAAS,IACR,IAAI,EAAE,IAAI,EACV,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,cAAc,EAAE,cAAc,EAC9B,cAAc,EAAE,cAAc,EAC9B,cAAc,EAAE,cAAc,EAC9B,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,aAAa,EAAE,aAAa,EAC5B,UAAU,EAAE,UAAU,KAClB,IAAI,GACR,EAEJ,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,GACZ,CACE,CACP,CAAA;AACH,CAAC,CAAA"}