@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.
- package/lib/Alert.d.ts +6 -5
- package/lib/Alert.js +2 -2
- package/lib/Alert.js.map +1 -1
- package/lib/Alert.module.scss +15 -11
- package/lib/AutocompleteField.d.ts +9 -6
- package/lib/AutocompleteField.js +6 -7
- package/lib/AutocompleteField.js.map +1 -1
- package/lib/AutocompleteField.module.scss +16 -0
- package/lib/AutocompleteFieldFormik.d.ts +1 -1
- package/lib/Badge.d.ts +4 -4
- package/lib/Button.d.ts +17 -16
- package/lib/Button.js +8 -6
- package/lib/Button.js.map +1 -1
- package/lib/Button.module.scss +54 -1
- package/lib/Calendar/Calendar.d.ts +8 -4
- package/lib/Calendar/Calendar.js +32 -22
- package/lib/Calendar/Calendar.js.map +1 -1
- package/lib/Calendar/Calendar.module.scss +2 -1
- package/lib/Calendar/CalendarRange.d.ts +4 -4
- package/lib/Calendar/CalendarRange.js +5 -5
- package/lib/Calendar/CalendarRange.js.map +1 -1
- package/lib/Calendar/CalendarRange.module.scss +5 -0
- package/lib/Calendar/components/CalendarHeader.d.ts +2 -2
- package/lib/Calendar/components/CalendarInput.d.ts +8 -6
- package/lib/Calendar/components/CalendarInput.js +3 -3
- package/lib/Calendar/components/CalendarInput.js.map +1 -1
- package/lib/Calendar/components/CalendarTime.d.ts +2 -2
- package/lib/Calendar/components/CalendarTime.js +15 -10
- package/lib/Calendar/components/CalendarTime.js.map +1 -1
- package/lib/Calendar/components/CalendarTime.module.scss +4 -0
- package/lib/Calendar/helpers/consts.js +97 -97
- package/lib/Calendar/helpers/consts.js.map +1 -1
- package/lib/Card.d.ts +1 -1
- package/lib/Card.js +2 -2
- package/lib/Card.js.map +1 -1
- package/lib/Card.module.scss +1 -1
- package/lib/Carousel.d.ts +26 -0
- package/lib/Carousel.js +28 -0
- package/lib/Carousel.js.map +1 -0
- package/lib/Carousel.module.scss +43 -0
- package/lib/Checkbox.d.ts +4 -3
- package/lib/Checkbox.js +2 -2
- package/lib/Checkbox.js.map +1 -1
- package/lib/Checkbox.module.scss +2 -2
- package/lib/CheckboxFormik.d.ts +1 -1
- package/lib/CircularProgressBar.d.ts +1 -1
- package/lib/CircularProgressBar.module.scss +1 -1
- package/lib/ContextMenu.d.ts +15 -0
- package/lib/ContextMenu.js +58 -0
- package/lib/ContextMenu.js.map +1 -0
- package/lib/ContextMenu.module.scss +37 -0
- package/lib/Dialog.d.ts +2 -2
- package/lib/EmptyState.d.ts +5 -5
- package/lib/FieldHeader.d.ts +10 -6
- package/lib/FieldHeader.js +3 -3
- package/lib/FieldHeader.js.map +1 -1
- package/lib/Help.d.ts +2 -1
- package/lib/Help.js +2 -2
- package/lib/Help.js.map +1 -1
- package/lib/Icon.d.ts +5 -5
- package/lib/Icon.js +1 -1
- package/lib/Icon.js.map +1 -1
- package/lib/IconButton.d.ts +6 -6
- package/lib/InteractiveList.d.ts +5 -5
- package/lib/InteractiveList.js +4 -2
- package/lib/InteractiveList.js.map +1 -1
- package/lib/InteractiveList.module.scss +1 -0
- package/lib/InteractiveListFormik.d.ts +1 -1
- package/lib/Label.d.ts +2 -1
- package/lib/Label.js +1 -1
- package/lib/Label.js.map +1 -1
- package/lib/Label.module.scss +4 -0
- package/lib/Link.d.ts +7 -7
- package/lib/Link.js +3 -3
- package/lib/Link.js.map +1 -1
- package/lib/Loader.d.ts +1 -1
- package/lib/Modal.d.ts +4 -2
- package/lib/Modal.js.map +1 -1
- package/lib/Notification.d.ts +4 -4
- package/lib/Notification.module.scss +10 -10
- package/lib/NumberBadge.d.ts +2 -1
- package/lib/NumberBadge.js +3 -2
- package/lib/NumberBadge.js.map +1 -1
- package/lib/NumberField.d.ts +5 -7
- package/lib/NumberField.js.map +1 -1
- package/lib/NumberFieldFormik.d.ts +1 -1
- package/lib/Overlay.d.ts +7 -2
- package/lib/Overlay.js +5 -5
- package/lib/Overlay.js.map +1 -1
- package/lib/Overlay.module.scss +1 -1
- package/lib/Pagination.d.ts +7 -6
- package/lib/Pagination.js +7 -7
- package/lib/Pagination.js.map +1 -1
- package/lib/PasswordField.d.ts +6 -4
- package/lib/PasswordField.js +7 -3
- package/lib/PasswordField.js.map +1 -1
- package/lib/PasswordField.module.scss +6 -0
- package/lib/PasswordFieldFormik.d.ts +1 -1
- package/lib/Popover.d.ts +2 -0
- package/lib/Popover.js +12 -6
- package/lib/Popover.js.map +1 -1
- package/lib/Radio.d.ts +3 -3
- package/lib/Radio.module.scss +2 -2
- package/lib/RadioFormik.d.ts +1 -1
- package/lib/RadioGroup.d.ts +3 -3
- package/lib/RadioGroupFormik.d.ts +1 -1
- package/lib/SegmentedControl.d.ts +7 -6
- package/lib/SegmentedControl.js +4 -4
- package/lib/SegmentedControl.js.map +1 -1
- package/lib/SegmentedControl.module.scss +1 -1
- package/lib/SegmentedControlFormik.d.ts +1 -1
- package/lib/Select/CheckableSelectField.d.ts +3 -3
- package/lib/Select/CheckableSelectField.module.scss +3 -3
- package/lib/Select/CheckableSelectFieldFormik.d.ts +1 -1
- package/lib/Select/Common.d.ts +6 -6
- package/lib/Select/MultiSelectField.d.ts +7 -7
- package/lib/Select/MultiSelectField.js +3 -1
- package/lib/Select/MultiSelectField.js.map +1 -1
- package/lib/Select/MultiSelectFieldFormik.d.ts +1 -1
- package/lib/Select/SelectField.d.ts +6 -7
- package/lib/Select/SelectField.js +5 -3
- package/lib/Select/SelectField.js.map +1 -1
- package/lib/Select/SelectField.module.scss +6 -4
- package/lib/Select/SelectFieldFormik.d.ts +1 -1
- package/lib/Select/helpers.d.ts +2 -2
- package/lib/SimpleTable.d.ts +1 -1
- package/lib/Slider.d.ts +8 -8
- package/lib/Slider.module.scss +1 -1
- package/lib/SliderFormik.d.ts +1 -1
- package/lib/Table/Cell.d.ts +11 -3
- package/lib/Table/Cell.js +44 -9
- package/lib/Table/Cell.js.map +1 -1
- package/lib/Table/Cell.module.scss +8 -0
- package/lib/Table/CellWrapper.d.ts +11 -0
- package/lib/Table/CellWrapper.js +29 -0
- package/lib/Table/CellWrapper.js.map +1 -0
- package/lib/Table/EnhancedRenderers.d.ts +2 -2
- package/lib/Table/Header.d.ts +1 -2
- package/lib/Table/Header.js +2 -2
- package/lib/Table/Header.js.map +1 -1
- package/lib/Table/Header.module.scss +35 -27
- package/lib/Table/Row.d.ts +4 -4
- package/lib/Table/Row.js +6 -2
- package/lib/Table/Row.js.map +1 -1
- package/lib/Table/Table.d.ts +14 -18
- package/lib/Table/Table.js +108 -161
- package/lib/Table/Table.js.map +1 -1
- package/lib/Table/Table.module.scss +4 -16
- package/lib/Table/TableContent.d.ts +25 -0
- package/lib/Table/TableContent.js +49 -0
- package/lib/Table/TableContent.js.map +1 -0
- package/lib/Table/TableContent.module.scss +21 -0
- package/lib/Table/constants.d.ts +2 -0
- package/lib/Table/constants.js +3 -0
- package/lib/Table/constants.js.map +1 -0
- package/lib/Table/features/columnsSelection/CellCopyablePopover.d.ts +8 -0
- package/lib/Table/features/columnsSelection/CellCopyablePopover.js +13 -0
- package/lib/Table/features/columnsSelection/CellCopyablePopover.js.map +1 -0
- package/lib/Table/features/columnsSelection/CellCopyablePopover.module.scss +12 -0
- package/lib/Table/features/columnsSelection/ContextMenu/ContextMenu.d.ts +6 -0
- package/lib/Table/features/columnsSelection/ContextMenu/ContextMenu.js +17 -0
- package/lib/Table/features/columnsSelection/ContextMenu/ContextMenu.js.map +1 -0
- package/lib/Table/features/columnsSelection/ContextMenu/ContextMenu.module.scss +6 -0
- package/lib/Table/features/columnsSelection/ContextMenu/index.d.ts +1 -0
- package/lib/Table/features/columnsSelection/ContextMenu/index.js +2 -0
- package/lib/Table/features/columnsSelection/ContextMenu/index.js.map +1 -0
- package/lib/Table/features/columnsSelection/columnsSelection.d.ts +19 -0
- package/lib/Table/features/columnsSelection/columnsSelection.js +71 -0
- package/lib/Table/features/columnsSelection/columnsSelection.js.map +1 -0
- package/lib/Table/features/columnsSelection/helpers.d.ts +7 -0
- package/lib/Table/features/columnsSelection/helpers.js +26 -0
- package/lib/Table/features/columnsSelection/helpers.js.map +1 -0
- package/lib/Table/features/columnsSelection/index.d.ts +4 -0
- package/lib/Table/features/columnsSelection/index.js +5 -0
- package/lib/Table/features/columnsSelection/index.js.map +1 -0
- package/lib/Tabs/Tab.d.ts +22 -8
- package/lib/Tabs/Tab.js +15 -4
- package/lib/Tabs/Tab.js.map +1 -1
- package/lib/Tabs/TabContext.d.ts +3 -3
- package/lib/Tabs/TabList.d.ts +1 -1
- package/lib/Tabs/TabPanel.d.ts +1 -1
- package/lib/Terminal.d.ts +1 -1
- package/lib/TextArea.d.ts +4 -4
- package/lib/TextArea.module.scss +5 -1
- package/lib/TextAreaFormik.d.ts +1 -1
- package/lib/TextField.d.ts +9 -6
- package/lib/TextField.js +4 -4
- package/lib/TextField.js.map +1 -1
- package/lib/TextField.module.scss +12 -1
- package/lib/TextFieldFormik.d.ts +1 -1
- package/lib/TimeField.d.ts +3 -3
- package/lib/TimeField.js +4 -12
- package/lib/TimeField.js.map +1 -1
- package/lib/TimeField.module.scss +0 -87
- package/lib/TimeFieldFormik.d.ts +1 -1
- package/lib/Toast.d.ts +3 -3
- package/lib/Toast.module.scss +6 -6
- package/lib/Toggle.d.ts +4 -4
- package/lib/Toggle.js +1 -1
- package/lib/Toggle.js.map +1 -1
- package/lib/Toggle.module.scss +1 -1
- package/lib/ToggleFormik.d.ts +1 -1
- package/lib/Tooltip.d.ts +6 -5
- package/lib/Tooltip.js +4 -14
- package/lib/Tooltip.js.map +1 -1
- package/lib/hooks/index.d.ts +0 -1
- package/lib/hooks/index.js +0 -1
- package/lib/hooks/index.js.map +1 -1
- package/lib/hooks/useCloseOnResize.d.ts +8 -0
- package/lib/hooks/useCloseOnResize.js +16 -0
- package/lib/hooks/useCloseOnResize.js.map +1 -0
- package/lib/hooks/useDimensions.d.ts +1 -1
- package/lib/hooks/useOnClickOutside.d.ts +1 -1
- package/lib/hooks/usePagination.d.ts +2 -2
- package/lib/index.d.ts +3 -4
- package/lib/index.js +3 -4
- package/lib/index.js.map +1 -1
- package/lib/utils/formik.d.ts +2 -2
- package/lib/utils/portal.d.ts +2 -0
- package/lib/utils/portal.js +15 -0
- package/lib/utils/portal.js.map +1 -0
- package/lib/utils/test.d.ts +3 -1
- package/lib/utils/test.js.map +1 -1
- package/lib/utils/types.d.ts +1 -1
- package/package.json +60 -56
- package/styles/constants/_colors.scss +18 -15
- package/styles/constants/_sizes.scss +2 -1
- package/styles/constants/_typography.scss +34 -24
- package/styles/helpers/_gradients.scss +11 -0
- package/styles/helpers/_index.scss +1 -0
- package/styles/typography/fonts/LICENSE.txt +202 -0
- package/styles/typography/fonts/OpenSans-Italic.woff2 +0 -0
- package/styles/typography/fonts/OpenSans-Regular.woff2 +0 -0
- package/styles/typography/fonts/OpenSans-SemiBold.woff2 +0 -0
- package/styles/typography/fonts/OpenSans-SemiBoldItalic.woff2 +0 -0
- package/styles/typography/fonts/PPTelegraf-Light.woff2 +0 -0
- package/styles/typography/fonts/PPTelegraf-Medium.woff2 +0 -0
- package/styles/typography/fonts/PPTelegraf-RegularSlanted.woff2 +0 -0
- package/styles/typography/fonts/PPTelegraf-UltralightSlanted.woff2 +0 -0
- package/styles/typography/open-sans.css +35 -0
- package/styles/typography/pp-telegraf.css +31 -0
- package/lib/Code.d.ts +0 -8
- package/lib/Code.js +0 -16
- package/lib/Code.js.map +0 -1
- package/lib/CodeEditor.d.ts +0 -28
- package/lib/CodeEditor.js +0 -180
- package/lib/CodeEditor.js.map +0 -1
- package/lib/CodeEditor.module.scss +0 -32
- package/lib/CodeEditorFormik.d.ts +0 -9
- package/lib/CodeEditorFormik.js +0 -14
- package/lib/CodeEditorFormik.js.map +0 -1
- package/lib/hooks/useTableCustomizableColumns.d.ts +0 -10
- package/lib/hooks/useTableCustomizableColumns.js +0 -21
- package/lib/hooks/useTableCustomizableColumns.js.map +0 -1
- 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 @@
|
|
|
1
|
+
export * from './ContextMenu';
|
|
@@ -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 @@
|
|
|
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
|
|
3
|
+
export type AnchorTabProps = {
|
|
4
4
|
component: 'a';
|
|
5
5
|
href: string;
|
|
6
6
|
};
|
|
7
|
-
export
|
|
7
|
+
export type ButtonTabProps = {
|
|
8
8
|
component?: 'button';
|
|
9
9
|
href?: never;
|
|
10
10
|
};
|
|
11
|
-
|
|
12
|
-
|
|
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
|
|
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
|
|
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',
|
|
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:
|
|
39
|
-
|
|
40
|
-
|
|
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
|
package/lib/Tabs/Tab.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tab.js","sourceRoot":"","sources":["../../src/Tabs/Tab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAM,WAAW,
|
|
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"}
|
package/lib/Tabs/TabContext.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React, { FC, ReactNode } from 'react';
|
|
2
|
-
export
|
|
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
|
|
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
|
|
25
|
+
export type TabContextProviderControlledProps = Omit<TabContextValue, 'idPrefix'> & {
|
|
26
26
|
children: ReactNode;
|
|
27
27
|
};
|
|
28
28
|
/**
|
package/lib/Tabs/TabList.d.ts
CHANGED
package/lib/Tabs/TabPanel.d.ts
CHANGED
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
|
|
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
|
|
5
|
-
export
|
|
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
|
|
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
|
|
18
|
+
export type TextAreaProps = TextAreaCoreProps & TextAreaExtraProps & DataTestProp;
|
|
19
19
|
export declare const TextArea: FC<TextAreaProps>;
|
package/lib/TextArea.module.scss
CHANGED
|
@@ -84,7 +84,7 @@
|
|
|
84
84
|
line-height: inherit;
|
|
85
85
|
letter-spacing: inherit;
|
|
86
86
|
color: inherit;
|
|
87
|
-
background-color: c.$
|
|
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 {
|
package/lib/TextAreaFormik.d.ts
CHANGED
|
@@ -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
|
|
5
|
+
export type TextAreaFormikProps<V extends object> = TextAreaExtraProps & {
|
|
6
6
|
name: ExtractKeysOfValueType<V, string | undefined>;
|
|
7
7
|
validate?: FieldValidator;
|
|
8
8
|
};
|
package/lib/TextField.d.ts
CHANGED
|
@@ -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
|
|
8
|
-
|
|
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
|
|
16
|
-
|
|
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
|
|
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
|
|
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 ?
|
|
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 }),
|
package/lib/TextField.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextField.js","sourceRoot":"","sources":["../src/TextField.tsx"],"names":[],"mappings":"AAAA,uDAAuD;AACvD,OAAO,KAAK,EAAE,EAQZ,UAAU,EACV,MAAM,GACP,MAAM,OAAO,CAAA;AACd,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,EAAgB,wBAAwB,EAAE,MAAM,oBAAoB,CAAA;AAC3E,OAAO,EAAoB,CAAC,EAAE,MAAM,eAAe,CAAA;AACnD,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAClC,OAAO,SAAS,MAAM,kBAAkB,CAAA;AAExC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAC7B,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,SAAS,CAAA;AACxC,OAAO,EAAE,WAAW,EAAoB,MAAM,eAAe,CAAA;AAC7D,OAAO,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAA;AACtC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAIzC,OAAO,MAAM,MAAM,yBAAyB,CAAA;
|
|
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.$
|
|
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
|
package/lib/TextFieldFormik.d.ts
CHANGED
|
@@ -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
|
|
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;
|
package/lib/TimeField.d.ts
CHANGED
|
@@ -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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
13
|
-
React.createElement(
|
|
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
|
package/lib/TimeField.js.map
CHANGED
|
@@ -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;
|
|
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"}
|