@hazelcast/ui 1.3.2-next.8 → 1.3.2-next.80
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 +20 -19
- 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 +61 -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 +6 -5
- package/lib/Icon.js +3 -3
- package/lib/Icon.js.map +1 -1
- package/lib/IconButton.d.ts +8 -6
- package/lib/IconButton.js +3 -3
- package/lib/IconButton.js.map +1 -1
- 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 +3 -1
- package/lib/Loader.js +3 -3
- package/lib/Loader.js.map +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 +37 -21
- 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 +4 -3
- package/lib/Select/CheckableSelectField.js +7 -2
- package/lib/Select/CheckableSelectField.js.map +1 -1
- package/lib/Select/CheckableSelectField.module.scss +9 -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 +26 -0
- package/lib/Table/TableContent.js +52 -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 +7 -6
- package/lib/Tabs/Tab.js +2 -2
- 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 +10 -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 +7 -6
- package/lib/Tooltip.js +5 -15
- 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/useOnClickOutside.js +4 -0
- package/lib/hooks/useOnClickOutside.js.map +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 +59 -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
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MultiSelectField.js","sourceRoot":"","sources":["../../src/Select/MultiSelectField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAiD,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AACrH,OAAO,WAAW,EAAE,EAElB,UAAU,IAAI,YAAY,GAM3B,MAAM,cAAc,CAAA;AACrB,OAAO,oBAAoB,MAAM,wBAAwB,CAAA;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAClC,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAA;AACjC,OAAO,yBAAyB,MAAM,yCAAyC,CAAA;AAC/E,OAAO,EAAE,MAAM,YAAY,CAAA;AAG3B,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,UAAU,CAAA;AACzC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAqB,gBAAgB,EAAE,aAAa,EAAyB,MAAM,WAAW,CAAA;AACrG,OAAO,EAAE,UAAU,EAA4B,MAAM,UAAU,CAAA;AAC/D,OAAO,EAAE,WAAW,EAAoB,MAAM,gBAAgB,CAAA;
|
|
1
|
+
{"version":3,"file":"MultiSelectField.js","sourceRoot":"","sources":["../../src/Select/MultiSelectField.tsx"],"names":[],"mappings":"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"}
|
|
@@ -2,7 +2,7 @@ import { ReactElement } from 'react';
|
|
|
2
2
|
import { MultiSelectFieldExtraProps } from './MultiSelectField';
|
|
3
3
|
import { FieldValidatorGeneric } from '../utils/formik';
|
|
4
4
|
import { ExtractKeysOfValueType } from '../utils/types';
|
|
5
|
-
export
|
|
5
|
+
export type MultiSelectFieldFormikProps<V extends object, OV = string> = MultiSelectFieldExtraProps<OV> & {
|
|
6
6
|
name: ExtractKeysOfValueType<V, OV[]>;
|
|
7
7
|
validate?: FieldValidatorGeneric<OV[]>;
|
|
8
8
|
onChange?: (value: OV[]) => void;
|
|
@@ -5,14 +5,14 @@ import { FieldHeaderProps } from '../FieldHeader';
|
|
|
5
5
|
import { IconProps } from '../Icon';
|
|
6
6
|
import { SelectFieldOption } from './helpers';
|
|
7
7
|
import { RenderMenuFooterFunction } from './Common';
|
|
8
|
-
export
|
|
8
|
+
export type SelectFieldCoreStaticProps<V> = {
|
|
9
9
|
name: string;
|
|
10
10
|
onBlur?: (e: FocusEvent<HTMLElement>) => void;
|
|
11
11
|
error?: string;
|
|
12
12
|
value: V | null;
|
|
13
13
|
onChange: (value: V | null) => void;
|
|
14
14
|
};
|
|
15
|
-
export
|
|
15
|
+
export type SelectFieldIconLeftProps = {
|
|
16
16
|
iconLeft: IconProps['icon'];
|
|
17
17
|
iconLeftAriaLabel: string;
|
|
18
18
|
iconLeftClassName?: string;
|
|
@@ -23,8 +23,8 @@ export declare type SelectFieldIconLeftProps = {
|
|
|
23
23
|
iconLeftClassName?: never;
|
|
24
24
|
iconLeftContainerClassName?: never;
|
|
25
25
|
};
|
|
26
|
-
|
|
27
|
-
export
|
|
26
|
+
export type SelectFieldSize = 'small' | 'medium';
|
|
27
|
+
export type SelectFieldExtraProps<V> = {
|
|
28
28
|
options: GroupedOptionsType<SelectFieldOption<V>> | OptionsType<SelectFieldOption<V>>;
|
|
29
29
|
size?: SelectFieldSize;
|
|
30
30
|
isCreatable?: V extends string ? boolean : false;
|
|
@@ -37,7 +37,6 @@ export declare type SelectFieldExtraProps<V> = {
|
|
|
37
37
|
renderMenuFooter?: RenderMenuFooterFunction;
|
|
38
38
|
styles?: ReactSelectProps<SelectFieldOption<V>>['styles'];
|
|
39
39
|
singleValueTooltipVisible?: boolean;
|
|
40
|
-
} & DataTestProp & Pick<InputHTMLAttributes<HTMLElement>, 'autoFocus' | 'disabled' | 'required' | 'placeholder'> & Pick<ReactSelectProps, 'isSearchable' | 'isClearable' | 'menuIsOpen' | 'menuPlacement' | 'noOptionsMessage' | 'inputValue'> & SelectFieldIconLeftProps & Omit<FieldHeaderProps, 'id'>;
|
|
41
|
-
export
|
|
40
|
+
} & DataTestProp & Pick<InputHTMLAttributes<HTMLElement>, 'autoFocus' | 'disabled' | 'required' | 'placeholder'> & Pick<ReactSelectProps, 'isSearchable' | 'isClearable' | 'menuIsOpen' | 'menuPlacement' | 'closeMenuOnScroll' | 'noOptionsMessage' | 'inputValue'> & SelectFieldIconLeftProps & Omit<FieldHeaderProps, 'id'>;
|
|
41
|
+
export type SelectFieldProps<V> = SelectFieldCoreStaticProps<V> & SelectFieldExtraProps<V>;
|
|
42
42
|
export declare const SelectField: <V extends string | number = string>(props: SelectFieldProps<V>) => React.ReactElement<SelectFieldProps<V>, string | React.JSXElementConstructor<any>>;
|
|
43
|
-
export {};
|
|
@@ -9,8 +9,9 @@ import { FieldHeader } from '../FieldHeader';
|
|
|
9
9
|
import { Icon } from '../Icon';
|
|
10
10
|
import { getMenuContainer, getOptionsMap } from './helpers';
|
|
11
11
|
import { components } from './Common';
|
|
12
|
-
import styles from './SelectField.module.scss';
|
|
13
12
|
import { components as rsComponents } from 'react-select';
|
|
13
|
+
import { useCloseOnResize } from '../hooks/useCloseOnResize';
|
|
14
|
+
import styles from './SelectField.module.scss';
|
|
14
15
|
export const SelectField = (props) => {
|
|
15
16
|
const { 'data-test': dataTest, className, disabled, error, errorClassName, helperText, isClearable = false, isCreatable, isSearchable = true, label, labelClassName, showAriaLabel = false, size = 'medium', menuIsOpen, menuPortalTarget = 'body', menuPlacement = 'auto', name, onChange, options, placeholder, required, value, formatGroupLabel, formatOptionLabel, renderMenuFooter, singleValueTooltipVisible = true, ...iconAndRest } = props;
|
|
16
17
|
const id = useUID();
|
|
@@ -37,7 +38,7 @@ export const SelectField = (props) => {
|
|
|
37
38
|
const selectRef = useRef();
|
|
38
39
|
useEffect(() => {
|
|
39
40
|
if (selectRef.current) {
|
|
40
|
-
menuIsOpen ? selectRef.current.
|
|
41
|
+
menuIsOpen ? selectRef.current.onMenuOpen() : selectRef.current.onMenuClose();
|
|
41
42
|
}
|
|
42
43
|
}, [menuIsOpen]);
|
|
43
44
|
const innerComponents = useMemo(() => singleValueTooltipVisible
|
|
@@ -46,12 +47,13 @@ export const SelectField = (props) => {
|
|
|
46
47
|
...components,
|
|
47
48
|
SingleValue: rsComponents.SingleValue,
|
|
48
49
|
}, [singleValueTooltipVisible]);
|
|
50
|
+
useCloseOnResize(selectRef);
|
|
49
51
|
const selectProps = {
|
|
50
52
|
ref: selectRef,
|
|
51
53
|
inputId: id,
|
|
52
54
|
className: 'hz-select-field',
|
|
53
55
|
classNamePrefix: 'hz-select-field',
|
|
54
|
-
'aria-label': showAriaLabel ? label :
|
|
56
|
+
'aria-label': showAriaLabel ? label : 'select',
|
|
55
57
|
// https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-invalid_attribute
|
|
56
58
|
'aria-errormessage': error && errorId(id),
|
|
57
59
|
'aria-invalid': !!error,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectField.js","sourceRoot":"","sources":["../../src/Select/SelectField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAiD,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AACrH,OAAO,WAAkG,MAAM,cAAc,CAAA;AAC7H,OAAO,oBAAoB,MAAM,wBAAwB,CAAA;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAClC,OAAO,yBAAyB,MAAM,yCAAyC,CAAA;AAC/E,OAAO,EAAE,MAAM,YAAY,CAAA;AAG3B,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,UAAU,CAAA;AACzC,OAAO,EAAE,WAAW,EAAoB,MAAM,gBAAgB,CAAA;AAC9D,OAAO,EAAE,IAAI,EAAa,MAAM,SAAS,CAAA;AACzC,OAAO,EAAE,gBAAgB,EAAE,aAAa,EAA4C,MAAM,WAAW,CAAA;AACrG,OAAO,EAAE,UAAU,EAA4B,MAAM,UAAU,CAAA;
|
|
1
|
+
{"version":3,"file":"SelectField.js","sourceRoot":"","sources":["../../src/Select/SelectField.tsx"],"names":[],"mappings":"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"}
|
|
@@ -31,7 +31,6 @@ $selectGroupHeading: ':global .hz-select-field__group-heading';
|
|
|
31
31
|
|
|
32
32
|
#{$selectContainer} {
|
|
33
33
|
flex: 1 1 auto;
|
|
34
|
-
overflow: hidden;
|
|
35
34
|
|
|
36
35
|
@include c.typographyBodySmall;
|
|
37
36
|
}
|
|
@@ -49,7 +48,7 @@ $selectGroupHeading: ':global .hz-select-field__group-heading';
|
|
|
49
48
|
box-sizing: border-box;
|
|
50
49
|
border: c.$borderWidth solid c.$colorNeutralLight;
|
|
51
50
|
border-radius: c.$borderRadius;
|
|
52
|
-
background-color: c.$
|
|
51
|
+
background-color: c.$colorOverlayBackground;
|
|
53
52
|
transition: none;
|
|
54
53
|
}
|
|
55
54
|
|
|
@@ -75,6 +74,10 @@ $selectGroupHeading: ':global .hz-select-field__group-heading';
|
|
|
75
74
|
#{$selectControl} {
|
|
76
75
|
border-color: c.$colorError;
|
|
77
76
|
}
|
|
77
|
+
|
|
78
|
+
label {
|
|
79
|
+
color: c.$colorError;
|
|
80
|
+
}
|
|
78
81
|
}
|
|
79
82
|
|
|
80
83
|
// We target select control specifically to avoid applying hover styles when hovering helper icon
|
|
@@ -94,7 +97,6 @@ $selectGroupHeading: ':global .hz-select-field__group-heading';
|
|
|
94
97
|
flex-direction: row;
|
|
95
98
|
align-items: center;
|
|
96
99
|
position: relative;
|
|
97
|
-
overflow: hidden;
|
|
98
100
|
|
|
99
101
|
.iconLeftContainer {
|
|
100
102
|
.iconLeft {
|
|
@@ -134,7 +136,7 @@ $selectGroupHeading: ':global .hz-select-field__group-heading';
|
|
|
134
136
|
margin-bottom: $menuMargin;
|
|
135
137
|
border: c.$borderWidth solid c.$colorNeutralLight;
|
|
136
138
|
border-radius: c.$borderRadius;
|
|
137
|
-
background-color: c.$
|
|
139
|
+
background-color: c.$colorOverlayBackground;
|
|
138
140
|
overflow: hidden;
|
|
139
141
|
box-shadow: 0 c.$selectMenuShadowSize c.$selectMenuShadowBlur 0 c.$colorShadow;
|
|
140
142
|
z-index: c.$zIndex1000;
|
|
@@ -2,7 +2,7 @@ import { ReactElement } from 'react';
|
|
|
2
2
|
import { SelectFieldExtraProps } from './SelectField';
|
|
3
3
|
import { FieldValidatorGeneric } from '../utils/formik';
|
|
4
4
|
import { ExtractKeysOfValueType } from '../utils/types';
|
|
5
|
-
export
|
|
5
|
+
export type SelectFieldFormikProps<V extends object, OV = string> = SelectFieldExtraProps<OV> & {
|
|
6
6
|
name: ExtractKeysOfValueType<V, OV | null>;
|
|
7
7
|
validate?: FieldValidatorGeneric<OV | null>;
|
|
8
8
|
onChange?: (value: OV | null) => void;
|
package/lib/Select/helpers.d.ts
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { GroupedOptionsType, OptionsType } from 'react-select';
|
|
2
|
-
export
|
|
2
|
+
export type SelectFieldOption<V> = {
|
|
3
3
|
label: string;
|
|
4
4
|
value: V;
|
|
5
5
|
};
|
|
6
|
-
export
|
|
6
|
+
export type SelectFieldOptionsMap<V> = {
|
|
7
7
|
[key: string]: SelectFieldOption<V>;
|
|
8
8
|
};
|
|
9
9
|
export declare const getOptionsMap: <V extends string | number>(options: OptionsType<SelectFieldOption<V>> | GroupedOptionsType<SelectFieldOption<V>>) => SelectFieldOptionsMap<V>;
|
package/lib/SimpleTable.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { HTMLAttributes, TdHTMLAttributes, ThHTMLAttributes } from 'react';
|
|
2
|
-
export
|
|
2
|
+
export type SimpleTableProps = HTMLAttributes<HTMLTableElement>;
|
|
3
3
|
export declare const SimpleTable: {
|
|
4
4
|
(props: SimpleTableProps): JSX.Element;
|
|
5
5
|
Body(props: HTMLAttributes<HTMLTableSectionElement>): JSX.Element;
|
package/lib/Slider.d.ts
CHANGED
|
@@ -1,20 +1,20 @@
|
|
|
1
1
|
import { ChangeEvent, ReactNode } from 'react';
|
|
2
2
|
import { DataTestProp } from '@hazelcast/helpers';
|
|
3
|
-
export
|
|
4
|
-
|
|
3
|
+
export type SliderValue = number | [number, number];
|
|
4
|
+
type SliderMark = {
|
|
5
5
|
value: number;
|
|
6
6
|
label: ReactNode;
|
|
7
7
|
};
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
export
|
|
8
|
+
type ChangeEventType = ChangeEvent<HTMLInputElement> | MouseEvent;
|
|
9
|
+
type SingleValueChangeFn = (val: number, e?: ChangeEventType) => void;
|
|
10
|
+
type MultiValueChangeFn = (val: [number, number], e?: ChangeEventType) => void;
|
|
11
|
+
export type SliderCoreProps<T extends SliderValue> = {
|
|
12
12
|
value: T;
|
|
13
13
|
onChange: T extends number ? SingleValueChangeFn : MultiValueChangeFn;
|
|
14
14
|
name: string;
|
|
15
15
|
error?: string;
|
|
16
16
|
};
|
|
17
|
-
export
|
|
17
|
+
export type SliderExtraProps = {
|
|
18
18
|
step?: number;
|
|
19
19
|
min: number;
|
|
20
20
|
max: number;
|
|
@@ -26,7 +26,7 @@ export declare type SliderExtraProps = {
|
|
|
26
26
|
hideValueIndicators?: boolean;
|
|
27
27
|
formatCurrentValue?: (val: number) => ReactNode;
|
|
28
28
|
};
|
|
29
|
-
|
|
29
|
+
type SliderProps<T extends SliderValue = number> = SliderExtraProps & SliderCoreProps<T> & Partial<Pick<HTMLInputElement, 'disabled'>> & DataTestProp;
|
|
30
30
|
/**
|
|
31
31
|
* Determines the absolute left position of the mark given the markValue
|
|
32
32
|
* @param markValue - value of the mark
|
package/lib/Slider.module.scss
CHANGED
|
@@ -23,7 +23,7 @@ $currentValueIndicatorHeight: c.$grid * 6;
|
|
|
23
23
|
|
|
24
24
|
@mixin thumb() {
|
|
25
25
|
box-shadow: 0 c.$sliderThumbShadowSize c.$sliderThumbShadowBlur c.$colorShadow;
|
|
26
|
-
background: c.$
|
|
26
|
+
background: c.$colorSuccess; // background will represent the dot inside
|
|
27
27
|
border: c.$sliderThumbBorderSize solid c.$colorNeutralWhite; // the white part will be done by the border
|
|
28
28
|
box-sizing: content-box; /* and because of all of this, we need content-box */
|
|
29
29
|
border-radius: 50%;
|
package/lib/SliderFormik.d.ts
CHANGED
|
@@ -2,7 +2,7 @@ import { ReactElement } from 'react';
|
|
|
2
2
|
import { FieldValidator } from 'formik';
|
|
3
3
|
import { SliderExtraProps, SliderValue } from './Slider';
|
|
4
4
|
import { ExtractKeysOfValueType } from './utils/types';
|
|
5
|
-
export
|
|
5
|
+
export type SliderFormikProps<V extends object> = SliderExtraProps & Partial<Pick<HTMLInputElement, 'disabled'>> & {
|
|
6
6
|
name: ExtractKeysOfValueType<V, SliderValue>;
|
|
7
7
|
validate?: FieldValidator;
|
|
8
8
|
};
|
package/lib/Table/Cell.d.ts
CHANGED
|
@@ -1,17 +1,25 @@
|
|
|
1
|
-
import { FC } from 'react';
|
|
1
|
+
import { FC, RefObject } from 'react';
|
|
2
2
|
import { TableCellProps } from 'react-table';
|
|
3
|
-
export
|
|
3
|
+
export type CellWarningProps = {
|
|
4
4
|
align: 'left' | 'right';
|
|
5
5
|
warning: string;
|
|
6
6
|
};
|
|
7
7
|
export declare const CellWarning: FC<CellWarningProps>;
|
|
8
|
-
export
|
|
8
|
+
export type CellProps = {
|
|
9
9
|
/**
|
|
10
10
|
* Number fields should be right aligned as that allows
|
|
11
11
|
* you to compare them or add them up quickly in your head.
|
|
12
12
|
*/
|
|
13
13
|
align?: 'left' | 'right' | 'center';
|
|
14
|
+
selected?: boolean;
|
|
14
15
|
warning?: string;
|
|
15
16
|
colSpan?: number;
|
|
17
|
+
cellId?: string;
|
|
18
|
+
selectionStartedRef?: RefObject<boolean>;
|
|
19
|
+
onMouseEnterSelection?: (id: string) => void;
|
|
20
|
+
onClickSelection?: (id: string, modifiers: {
|
|
21
|
+
ctrl: boolean;
|
|
22
|
+
shift: boolean;
|
|
23
|
+
}) => void;
|
|
16
24
|
} & Omit<TableCellProps, 'key'>;
|
|
17
25
|
export declare const Cell: FC<CellProps>;
|
package/lib/Table/Cell.js
CHANGED
|
@@ -1,9 +1,11 @@
|
|
|
1
|
-
import React from 'react';
|
|
1
|
+
import React, { useEffect, useRef } from 'react';
|
|
2
2
|
import { AlertTriangle } from 'react-feather';
|
|
3
3
|
import { useUID } from 'react-uid';
|
|
4
4
|
import cn from 'classnames';
|
|
5
5
|
import { Icon } from '../Icon';
|
|
6
6
|
import { Tooltip } from '../Tooltip';
|
|
7
|
+
import { useOpenCloseState } from '../hooks';
|
|
8
|
+
import { CellCopyablePopover } from './features/columnsSelection';
|
|
7
9
|
import styles from './Cell.module.scss';
|
|
8
10
|
export const CellWarning = ({ align, warning }) => {
|
|
9
11
|
const id = useUID();
|
|
@@ -13,12 +15,45 @@ export const CellWarning = ({ align, warning }) => {
|
|
|
13
15
|
}) },
|
|
14
16
|
React.createElement(Icon, { icon: AlertTriangle, ariaLabelledBy: id, size: "small" })))));
|
|
15
17
|
};
|
|
16
|
-
export const Cell = ({ align = 'left', warning, colSpan, children, style, className, role
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
18
|
+
export const Cell = ({ align = 'left', warning, colSpan, children, style, className, role, cellId, onClickSelection, selected, onMouseEnterSelection, selectionStartedRef, }) => {
|
|
19
|
+
const rootRef = useRef(null);
|
|
20
|
+
const { isOpen, open, close } = useOpenCloseState();
|
|
21
|
+
const handleClick = (e) => {
|
|
22
|
+
if (onClickSelection && cellId) {
|
|
23
|
+
if (e.button === 2 && selected) {
|
|
24
|
+
return;
|
|
25
|
+
}
|
|
26
|
+
onClickSelection(cellId, {
|
|
27
|
+
shift: e.shiftKey,
|
|
28
|
+
ctrl: e.ctrlKey || e.metaKey,
|
|
29
|
+
});
|
|
30
|
+
}
|
|
31
|
+
};
|
|
32
|
+
const handleMouseEnter = () => {
|
|
33
|
+
if (cellId && onMouseEnterSelection && (selectionStartedRef === null || selectionStartedRef === void 0 ? void 0 : selectionStartedRef.current)) {
|
|
34
|
+
onMouseEnterSelection(cellId);
|
|
35
|
+
}
|
|
36
|
+
};
|
|
37
|
+
useEffect(() => {
|
|
38
|
+
if (!selected) {
|
|
39
|
+
close();
|
|
40
|
+
}
|
|
41
|
+
}, [close, selected]);
|
|
42
|
+
return (React.createElement(React.Fragment, null,
|
|
43
|
+
React.createElement("div", { ref: rootRef, "data-test": "table-cell", className: cn(styles.td, {
|
|
44
|
+
[styles.alignLeft]: align === 'left',
|
|
45
|
+
[styles.alignRight]: align === 'right',
|
|
46
|
+
[styles.alignCenter]: align === 'center',
|
|
47
|
+
[styles.selectable]: onClickSelection,
|
|
48
|
+
[styles.selected]: selected,
|
|
49
|
+
}, className), "aria-colspan": colSpan, style: style, role: role, onDoubleClick: selected ? open : undefined, onMouseEnter: onClickSelection ? handleMouseEnter : undefined, onMouseDown: onClickSelection ? handleClick : undefined },
|
|
50
|
+
warning && align === 'right' && React.createElement(CellWarning, { warning: warning, align: "right" }),
|
|
51
|
+
children,
|
|
52
|
+
warning && (align === 'left' || align === 'center') && React.createElement(CellWarning, { warning: warning, align: "left" })),
|
|
53
|
+
selected && (React.createElement(CellCopyablePopover, { anchorElement: rootRef.current, isOpen: isOpen, onClose: close, contentClassName: cn(styles.td, {
|
|
54
|
+
[styles.alignLeft]: align === 'left',
|
|
55
|
+
[styles.alignRight]: align === 'right',
|
|
56
|
+
[styles.alignCenter]: align === 'center',
|
|
57
|
+
}) }, children))));
|
|
58
|
+
};
|
|
24
59
|
//# sourceMappingURL=Cell.js.map
|
package/lib/Table/Cell.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Cell.js","sourceRoot":"","sources":["../../src/Table/Cell.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"Cell.js","sourceRoot":"","sources":["../../src/Table/Cell.tsx"],"names":[],"mappings":"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"}
|
|
@@ -26,6 +26,10 @@
|
|
|
26
26
|
justify-content: center;
|
|
27
27
|
}
|
|
28
28
|
|
|
29
|
+
&.selected {
|
|
30
|
+
background: lighten((c.$colorPrimary), 30) !important;
|
|
31
|
+
}
|
|
32
|
+
|
|
29
33
|
&:not(:last-of-type) {
|
|
30
34
|
border-right: c.$borderWidth solid c.$colorNeutral;
|
|
31
35
|
}
|
|
@@ -42,3 +46,7 @@
|
|
|
42
46
|
margin-right: c.$grid * 2;
|
|
43
47
|
}
|
|
44
48
|
}
|
|
49
|
+
|
|
50
|
+
.selectable {
|
|
51
|
+
user-select: none;
|
|
52
|
+
}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { RefObject } from 'react';
|
|
2
|
+
import { ColumnInterface, ColumnInterfaceBasedOnValue, Cell, UseResizeColumnsState } from 'react-table';
|
|
3
|
+
import { CellProps } from './Cell';
|
|
4
|
+
export type CellWrapperProps<D extends object> = CellProps & {
|
|
5
|
+
cell: Cell<D>;
|
|
6
|
+
selectable?: boolean;
|
|
7
|
+
column?: ColumnInterface<D> & ColumnInterfaceBasedOnValue;
|
|
8
|
+
selectedColumnValuesRef?: RefObject<(string | undefined)[][]>;
|
|
9
|
+
columnResizing: UseResizeColumnsState<D>['columnResizing'];
|
|
10
|
+
};
|
|
11
|
+
export declare const CellWrapper: <D extends object>(props: CellWrapperProps<D>) => JSX.Element;
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import React, { useEffect } from 'react';
|
|
2
|
+
import { ROW_EXPANDER_COLUMN_ID } from './constants';
|
|
3
|
+
import { Cell as TableCell } from './Cell';
|
|
4
|
+
import { EnhancedCellRenderer } from './EnhancedRenderers';
|
|
5
|
+
export const CellWrapper = (props) => {
|
|
6
|
+
const { selectable, column, cell, columnResizing, selectedColumnValuesRef, onClickSelection, onMouseEnterSelection, selectionStartedRef, ...rest } = props;
|
|
7
|
+
const isSelectable = selectable && (column === null || column === void 0 ? void 0 : column.id) !== ROW_EXPANDER_COLUMN_ID;
|
|
8
|
+
useEffect(() => {
|
|
9
|
+
if (rest.cellId) {
|
|
10
|
+
const [rowIndex, cellIndex] = rest.cellId.split(':');
|
|
11
|
+
if (selectedColumnValuesRef === null || selectedColumnValuesRef === void 0 ? void 0 : selectedColumnValuesRef.current) {
|
|
12
|
+
if (rest.selected) {
|
|
13
|
+
const row = selectedColumnValuesRef.current[Number(rowIndex)];
|
|
14
|
+
if (row) {
|
|
15
|
+
row[Number(cellIndex)] = typeof cell.value !== 'object' ? String(cell.value) : '';
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
else {
|
|
19
|
+
if (selectedColumnValuesRef.current[Number(rowIndex)] && selectedColumnValuesRef.current[Number(rowIndex)][Number(cellIndex)]) {
|
|
20
|
+
selectedColumnValuesRef.current[Number(rowIndex)][Number(cellIndex)] = undefined;
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
}, [rest, cell, selectedColumnValuesRef]);
|
|
26
|
+
const content = column ? (React.createElement(EnhancedCellRenderer, { cell: cell, hasCellRenderer: !!column.Cell, columnResizing: columnResizing })) : (cell.render('Cell'));
|
|
27
|
+
return (React.createElement(TableCell, { onClickSelection: isSelectable ? onClickSelection : undefined, selectionStartedRef: isSelectable ? selectionStartedRef : undefined, onMouseEnterSelection: isSelectable ? onMouseEnterSelection : undefined, ...rest }, content));
|
|
28
|
+
};
|
|
29
|
+
//# sourceMappingURL=CellWrapper.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CellWrapper.js","sourceRoot":"","sources":["../../src/Table/CellWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAa,SAAS,EAAE,MAAM,OAAO,CAAA;AAGnD,OAAO,EAAE,sBAAsB,EAAE,MAAM,aAAa,CAAA;AACpD,OAAO,EAAa,IAAI,IAAI,SAAS,EAAE,MAAM,QAAQ,CAAA;AACrD,OAAO,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAA;AAU1D,MAAM,CAAC,MAAM,WAAW,GAAG,CAAmB,KAA0B,EAAE,EAAE;IAC1E,MAAM,EACJ,UAAU,EACV,MAAM,EACN,IAAI,EACJ,cAAc,EACd,uBAAuB,EACvB,gBAAgB,EAChB,qBAAqB,EACrB,mBAAmB,EACnB,GAAG,IAAI,EACR,GAAG,KAAK,CAAA;IAET,MAAM,YAAY,GAAG,UAAU,IAAI,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,EAAE,MAAK,sBAAsB,CAAA;IAExE,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,MAAM,CAAC,QAAQ,EAAE,SAAS,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,CAAqB,CAAA;YAExE,IAAI,uBAAuB,aAAvB,uBAAuB,uBAAvB,uBAAuB,CAAE,OAAO,EAAE;gBACpC,IAAI,IAAI,CAAC,QAAQ,EAAE;oBACjB,MAAM,GAAG,GAAG,uBAAuB,CAAC,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAA;oBAC7D,IAAI,GAAG,EAAE;wBACP,GAAG,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,GAAG,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAA;qBAClF;iBACF;qBAAM;oBACL,IAAI,uBAAuB,CAAC,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,IAAI,uBAAuB,CAAC,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,EAAE;wBAC7H,uBAAuB,CAAC,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,GAAG,SAAS,CAAA;qBACjF;iBACF;aACF;SACF;IACH,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,uBAAuB,CAAC,CAAC,CAAA;IAEzC,MAAM,OAAO,GAAG,MAAM,CAAC,CAAC,CAAC,CACvB,oBAAC,oBAAoB,IAAC,IAAI,EAAE,IAAI,EAAE,eAAe,EAAE,CAAC,CAAC,MAAM,CAAC,IAAI,EAAE,cAAc,EAAE,cAAc,GAAI,CACrG,CAAC,CAAC,CAAC,CACF,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,CACpB,CAAA;IAED,OAAO,CACL,oBAAC,SAAS,IACR,gBAAgB,EAAE,YAAY,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,SAAS,EAC7D,mBAAmB,EAAE,YAAY,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,SAAS,EACnE,qBAAqB,EAAE,YAAY,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,SAAS,KACnE,IAAI,IAEP,OAAO,CACE,CACb,CAAA;AACH,CAAC,CAAA"}
|
|
@@ -9,13 +9,13 @@ import { Cell as CellType, HeaderGroup, UseResizeColumnsState } from 'react-tabl
|
|
|
9
9
|
* The above also applies to simple functions returning string - react-table transforms them into react components.
|
|
10
10
|
* Here's how react-table renderers are made: https://github.com/tannerlinsley/react-table/blob/6e2fe31ac028e543ce0f9d56168d5f922389fbbc/src/publicUtils.js#L199
|
|
11
11
|
*/
|
|
12
|
-
export
|
|
12
|
+
export type EnhancedHeaderFooterRendererProps<D extends object> = {
|
|
13
13
|
column: HeaderGroup<D>;
|
|
14
14
|
columnResizing: UseResizeColumnsState<D>['columnResizing'];
|
|
15
15
|
type: 'Header' | 'Footer';
|
|
16
16
|
};
|
|
17
17
|
export declare const EnhancedHeaderFooterRenderer: <D extends object>({ column, columnResizing, type }: EnhancedHeaderFooterRendererProps<D>) => JSX.Element;
|
|
18
|
-
export
|
|
18
|
+
export type EnhancedCellRendererProps<D extends object> = {
|
|
19
19
|
cell: CellType<D, ReactText>;
|
|
20
20
|
hasCellRenderer: boolean;
|
|
21
21
|
columnResizing: UseResizeColumnsState<D>['columnResizing'];
|
package/lib/Table/Header.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { FC, MouseEvent, KeyboardEvent, DragEvent } from 'react';
|
|
2
2
|
import { TableHeaderProps, TableResizerProps } from 'react-table';
|
|
3
|
-
export
|
|
3
|
+
export type HeaderProps = {
|
|
4
4
|
/**
|
|
5
5
|
* Number fields should be right aligned as that allows
|
|
6
6
|
* you to compare them or add them up quickly in your head.
|
|
@@ -14,7 +14,6 @@ export declare type HeaderProps = {
|
|
|
14
14
|
canResize: boolean;
|
|
15
15
|
isResizing: boolean;
|
|
16
16
|
getResizerProps: (props?: Partial<TableResizerProps>) => TableResizerProps;
|
|
17
|
-
isLastHeader: boolean;
|
|
18
17
|
index: number;
|
|
19
18
|
onDragStart?: (e: DragEvent) => void;
|
|
20
19
|
onDrop?: (e: DragEvent, index: number) => void;
|
package/lib/Table/Header.js
CHANGED
|
@@ -4,7 +4,7 @@ import cn from 'classnames';
|
|
|
4
4
|
import { Icon } from '../Icon';
|
|
5
5
|
import { keyIsOneOf } from '../utils/keyboard';
|
|
6
6
|
import styles from './Header.module.scss';
|
|
7
|
-
export const Header = ({ align = 'left', colSpan, children, canSort, isSorted, isSortedDesc, canResize, isResizing, getResizerProps,
|
|
7
|
+
export const Header = ({ align = 'left', colSpan, children, canSort, isSorted, isSortedDesc, canResize, isResizing, getResizerProps, onClick, style, className, role, index, onDragStart, onDrop, }) => {
|
|
8
8
|
const rootRef = useRef(null);
|
|
9
9
|
const isDragStarterRef = useRef(false);
|
|
10
10
|
const counterRef = useRef(0);
|
|
@@ -74,7 +74,7 @@ export const Header = ({ align = 'left', colSpan, children, canSort, isSorted, i
|
|
|
74
74
|
children,
|
|
75
75
|
canSort && (align === 'left' || align === 'center') && Chevron,
|
|
76
76
|
draggable && (align === 'left' || align === 'center') && DraggableIcon),
|
|
77
|
-
canResize &&
|
|
77
|
+
canResize && (React.createElement("div", { "data-test": "table-header-column-resizer-container", className: styles.resizer, ...getResizerProps() },
|
|
78
78
|
React.createElement("div", { "data-test": "table-header-column-resizer", className: cn(styles.separator, {
|
|
79
79
|
[styles.resizing]: isResizing,
|
|
80
80
|
}) })))));
|
package/lib/Table/Header.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Header.js","sourceRoot":"","sources":["../../src/Table/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAM,OAAO,EAAE,WAAW,EAAwD,MAAM,EAAE,MAAM,OAAO,CAAA;AACrH,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AAE5D,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAA;AAE9C,OAAO,MAAM,MAAM,sBAAsB,CAAA;
|
|
1
|
+
{"version":3,"file":"Header.js","sourceRoot":"","sources":["../../src/Table/Header.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,6 +1,36 @@
|
|
|
1
1
|
@use '../../styles/constants' as c;
|
|
2
2
|
@use '../../styles/helpers' as h;
|
|
3
3
|
|
|
4
|
+
.resizer {
|
|
5
|
+
position: absolute;
|
|
6
|
+
display: flex;
|
|
7
|
+
justify-content: center;
|
|
8
|
+
align-items: center;
|
|
9
|
+
width: c.$grid * 5;
|
|
10
|
+
height: 100%;
|
|
11
|
+
top: 0;
|
|
12
|
+
right: -(c.$grid * 2.5);
|
|
13
|
+
z-index: c.$zIndex100;
|
|
14
|
+
cursor: col-resize;
|
|
15
|
+
user-select: none;
|
|
16
|
+
|
|
17
|
+
// Prevents from scrolling while dragging on touch devices
|
|
18
|
+
/* doiuse-disable css-touch-action */
|
|
19
|
+
touch-action: none;
|
|
20
|
+
/* doiuse-enable css-touch-action */
|
|
21
|
+
|
|
22
|
+
.separator {
|
|
23
|
+
width: 2px;
|
|
24
|
+
height: 50%;
|
|
25
|
+
background: c.$colorNeutral;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.resizing,
|
|
29
|
+
&:hover .separator {
|
|
30
|
+
background-color: c.$colorPrimary;
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
|
|
4
34
|
.container {
|
|
5
35
|
position: relative;
|
|
6
36
|
|
|
@@ -66,34 +96,12 @@
|
|
|
66
96
|
/* doiuse-enable css3-cursors-newer */
|
|
67
97
|
}
|
|
68
98
|
}
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
.resizer {
|
|
72
|
-
position: absolute;
|
|
73
|
-
display: flex;
|
|
74
|
-
justify-content: center;
|
|
75
|
-
align-items: center;
|
|
76
|
-
width: c.$grid * 5;
|
|
77
|
-
height: 100%;
|
|
78
|
-
top: 0;
|
|
79
|
-
right: -(c.$grid * 2.5);
|
|
80
|
-
z-index: c.$zIndex100;
|
|
81
|
-
cursor: col-resize;
|
|
82
|
-
|
|
83
|
-
// Prevents from scrolling while dragging on touch devices
|
|
84
|
-
/* doiuse-disable css-touch-action */
|
|
85
|
-
touch-action: none;
|
|
86
|
-
/* doiuse-enable css-touch-action */
|
|
87
|
-
|
|
88
|
-
.separator {
|
|
89
|
-
width: 2px;
|
|
90
|
-
height: 50%;
|
|
91
|
-
background: c.$colorNeutral;
|
|
92
|
-
}
|
|
93
99
|
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
100
|
+
&:last-child {
|
|
101
|
+
.resizer {
|
|
102
|
+
width: c.$grid;
|
|
103
|
+
right: 0;
|
|
104
|
+
}
|
|
97
105
|
}
|
|
98
106
|
}
|
|
99
107
|
|
package/lib/Table/Row.d.ts
CHANGED
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
import { FC, AnchorHTMLAttributes } from 'react';
|
|
2
2
|
import { TableHeaderGroupProps } from 'react-table';
|
|
3
|
-
|
|
3
|
+
type RowBase = Omit<TableHeaderGroupProps, 'key'> & {
|
|
4
4
|
ariaRowIndex?: number;
|
|
5
5
|
};
|
|
6
|
-
export
|
|
6
|
+
export type RowProps = RowBase & {
|
|
7
7
|
onClick?: () => void;
|
|
8
8
|
};
|
|
9
|
-
export
|
|
9
|
+
export type LinkRowProps = RowBase & {
|
|
10
10
|
href: string;
|
|
11
11
|
AnchorComponent?: FC<AnchorHTMLAttributes<HTMLAnchorElement>>;
|
|
12
12
|
};
|
|
13
|
-
export
|
|
13
|
+
export type HeaderRowProps = RowBase;
|
|
14
14
|
export declare const Row: FC<RowProps>;
|
|
15
15
|
export declare const LinkRow: FC<LinkRowProps>;
|
|
16
16
|
export declare const HeaderRow: FC<HeaderRowProps>;
|