@hazelcast/ui 1.3.2-next.21 → 1.3.2-next.24
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/Calendar/components/CalendarInput.d.ts +4 -2
- package/lib/Calendar/components/CalendarInput.js +3 -3
- package/lib/Calendar/components/CalendarInput.js.map +1 -1
- package/lib/Calendar/components/CalendarTime.js +11 -3
- package/lib/Calendar/components/CalendarTime.js.map +1 -1
- package/lib/Select/MultiSelectField.js +3 -1
- package/lib/Select/MultiSelectField.js.map +1 -1
- package/lib/Select/SelectField.js +4 -2
- package/lib/Select/SelectField.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/package.json +2 -2
|
@@ -1,9 +1,11 @@
|
|
|
1
|
-
import { FC, ChangeEvent, InputHTMLAttributes } from 'react';
|
|
1
|
+
import React, { FC, ChangeEvent, InputHTMLAttributes } from 'react';
|
|
2
2
|
import { CalendarSize } from '../Calendar';
|
|
3
3
|
export declare type CalendarInputInternalProps = {
|
|
4
4
|
onChange: (e: ChangeEvent<HTMLInputElement>) => void;
|
|
5
5
|
} & CalendarInputExtraProps & Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'>;
|
|
6
|
-
export declare const CalendarInputInternal:
|
|
6
|
+
export declare const CalendarInputInternal: React.ForwardRefExoticComponent<{
|
|
7
|
+
onChange: (e: ChangeEvent<HTMLInputElement>) => void;
|
|
8
|
+
} & CalendarInputExtraProps & Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange"> & React.RefAttributes<HTMLInputElement>>;
|
|
7
9
|
export declare type CalendarInputExtraProps = {
|
|
8
10
|
label: string;
|
|
9
11
|
textFieldSize?: CalendarSize;
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import React, { forwardRef } from 'react';
|
|
2
2
|
import { Calendar } from 'react-feather';
|
|
3
3
|
import { TextField } from '../../TextField';
|
|
4
|
-
export const CalendarInputInternal = ({ className, value, onChange, label, textFieldSize, ...props }) => (React.createElement(TextField, { ...props, size: textFieldSize, "data-test": "calendar-input", value: value === null || value === void 0 ? void 0 : value.toString(), onChange: onChange, inputContainerClassName: className, type: "text", name: "calendar-input", label: label, inputTrailingIcon: Calendar, inputTrailingIconLabel: "Calendar Icon" }));
|
|
5
|
-
|
|
4
|
+
export const CalendarInputInternal = forwardRef(({ className, value, onChange, label, textFieldSize, ...props }, ref) => (React.createElement(TextField, { ...props, mRef: ref, size: textFieldSize, "data-test": "calendar-input", value: value === null || value === void 0 ? void 0 : value.toString(), onChange: onChange, inputContainerClassName: className, type: "text", name: "calendar-input", label: label, inputTrailingIcon: Calendar, inputTrailingIconLabel: "Calendar Icon" })));
|
|
5
|
+
CalendarInputInternal.displayName = 'CalendarInputInternal';
|
|
6
6
|
export const CalendarInput = forwardRef((props, ref) => {
|
|
7
7
|
// Note: Cast the "unknown" props to the actual type
|
|
8
8
|
const propsTyped = props;
|
|
9
|
-
return React.createElement(CalendarInputInternal, { ...propsTyped });
|
|
9
|
+
return React.createElement(CalendarInputInternal, { ref: ref, ...propsTyped });
|
|
10
10
|
});
|
|
11
11
|
CalendarInput.displayName = 'CalendarInput';
|
|
12
12
|
//# sourceMappingURL=CalendarInput.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CalendarInput.js","sourceRoot":"","sources":["../../../src/Calendar/components/CalendarInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAwC,UAAU,EAAE,MAAM,OAAO,CAAA;AAC/E,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAExC,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAQ3C,MAAM,CAAC,MAAM,qBAAqB,
|
|
1
|
+
{"version":3,"file":"CalendarInput.js","sourceRoot":"","sources":["../../../src/Calendar/components/CalendarInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAwC,UAAU,EAAE,MAAM,OAAO,CAAA;AAC/E,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAExC,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAQ3C,MAAM,CAAC,MAAM,qBAAqB,GAAG,UAAU,CAC7C,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,aAAa,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CACvE,oBAAC,SAAS,OACJ,KAAK,EACT,IAAI,EAAE,GAAG,EACT,IAAI,EAAE,aAAa,eACT,gBAAgB,EAC1B,KAAK,EAAE,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,QAAQ,EAAE,EACxB,QAAQ,EAAE,QAAQ,EAClB,uBAAuB,EAAE,SAAS,EAClC,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,gBAAgB,EACrB,KAAK,EAAE,KAAK,EACZ,iBAAiB,EAAE,QAAQ,EAC3B,sBAAsB,EAAC,eAAe,GACtC,CACH,CACF,CAAA;AACD,qBAAqB,CAAC,WAAW,GAAG,uBAAuB,CAAA;AAgB3D,MAAM,CAAC,MAAM,aAAa,GAA2B,UAAU,CAAuC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACnH,oDAAoD;IACpD,MAAM,UAAU,GAAG,KAAmC,CAAA;IAEtD,OAAO,oBAAC,qBAAqB,IAAC,GAAG,EAAE,GAAG,KAAM,UAAU,GAAI,CAAA;AAC5D,CAAC,CAAC,CAAA;AAEF,aAAa,CAAC,WAAW,GAAG,eAAe,CAAA"}
|
|
@@ -4,6 +4,7 @@ import { Button } from '../../Button';
|
|
|
4
4
|
import { timePoints } from '../helpers/consts';
|
|
5
5
|
import { TimeField } from '../../TimeField';
|
|
6
6
|
import styles from './CalendarTime.module.scss';
|
|
7
|
+
import { useRefValue } from '../../hooks';
|
|
7
8
|
// Note: AM/PM 1-12 hours time
|
|
8
9
|
const DATE_FORMAT = 'hh:mm a';
|
|
9
10
|
// Note: 0-23 hours time
|
|
@@ -11,6 +12,7 @@ const DATE_FORMAT_NO_MERIDIEM = 'HH:mm';
|
|
|
11
12
|
export const CalendarTimeInternal = ({ date, value, onChange }) => {
|
|
12
13
|
const [time, setTime] = useState(value);
|
|
13
14
|
const [timeInputError, setTimeInputError] = useState();
|
|
15
|
+
const getValue = useRefValue(value);
|
|
14
16
|
/*
|
|
15
17
|
* Note:
|
|
16
18
|
* We cannot override how react-datepicker handles time values.
|
|
@@ -22,7 +24,7 @@ export const CalendarTimeInternal = ({ date, value, onChange }) => {
|
|
|
22
24
|
* Furthermore, the package even does not handle potential thrown error by date-fns' parse.
|
|
23
25
|
* Even the live demos do crash on an input like "10:10q" (See source 1. link below).
|
|
24
26
|
*
|
|
25
|
-
* For
|
|
27
|
+
* For these reasons we need to provide our own wrapper around the functionality to achieve 2 things:
|
|
26
28
|
* - Provide IE11 with a proper fallback
|
|
27
29
|
* - Prevent the invalid input value crash
|
|
28
30
|
* - Provide the user with an input error in case the value is invalid
|
|
@@ -50,11 +52,17 @@ export const CalendarTimeInternal = ({ date, value, onChange }) => {
|
|
|
50
52
|
// Note: Output time, that we feed back to 'react-datetime' is in 'DATE_FORMAT_NO_MERIDIEM' format
|
|
51
53
|
const timeStringWithoutAm = format(parsedDate, DATE_FORMAT_NO_MERIDIEM);
|
|
52
54
|
onChange(timeStringWithoutAm);
|
|
53
|
-
|
|
55
|
+
// remove error because time from the list can not be invalid
|
|
56
|
+
setTimeInputError(undefined);
|
|
57
|
+
// restores input field value when we select the same time from the list
|
|
58
|
+
if (getValue() === timeStringWithoutAm) {
|
|
59
|
+
setTime(timeStringWithoutAm);
|
|
60
|
+
}
|
|
61
|
+
}, [onChange, getValue, date]);
|
|
54
62
|
return (React.createElement("div", { "data-test": "calendar-time", className: styles.container },
|
|
55
63
|
React.createElement("div", { "data-test": "calendar-time-header", className: styles.header },
|
|
56
64
|
React.createElement(TimeField, { showAriaLabel: true, label: "Time Input", error: timeInputError, name: "time", value: time.toString(), onChange: handleTimeInputChange })),
|
|
57
|
-
React.createElement("div", { "data-test": "calendar-time-timePoints", className: styles.timePoints }, timePoints.map((tP) => (React.createElement(Button, { className: styles.timePoint, bodyClassName: styles.timePointBody, key: tP,
|
|
65
|
+
React.createElement("div", { "data-test": "calendar-time-timePoints", className: styles.timePoints }, timePoints.map((tP) => (React.createElement(Button, { className: styles.timePoint, bodyClassName: styles.timePointBody, key: tP, variant: "text", onClick: handleDateClick(tP) }, tP))))));
|
|
58
66
|
};
|
|
59
67
|
export const CalendarTime = (props) => {
|
|
60
68
|
// Note: Cast the "unknown" props to the actual type
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CalendarTime.js","sourceRoot":"","sources":["../../../src/Calendar/components/CalendarTime.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAmB,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAChF,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAExC,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAA;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAA;AAC9C,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAE3C,OAAO,MAAM,MAAM,4BAA4B,CAAA;
|
|
1
|
+
{"version":3,"file":"CalendarTime.js","sourceRoot":"","sources":["../../../src/Calendar/components/CalendarTime.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAmB,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAChF,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAExC,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAA;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAA;AAC9C,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAE3C,OAAO,MAAM,MAAM,4BAA4B,CAAA;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AAEzC,8BAA8B;AAC9B,MAAM,WAAW,GAAG,SAAS,CAAA;AAC7B,wBAAwB;AACxB,MAAM,uBAAuB,GAAG,OAAO,CAAA;AAQvC,MAAM,CAAC,MAAM,oBAAoB,GAAkC,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE;IAC/F,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IACvC,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,EAAsB,CAAA;IAE1E,MAAM,QAAQ,GAAG,WAAW,CAAC,KAAK,CAAC,CAAA;IAEnC;;;;;;;;;;;;;;;;;;OAkBG;IACH,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,CAAC,KAAK,CAAC,CAAA;IAChB,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IAEX,MAAM,qBAAqB,GAAG,WAAW,CACvC,CAAC,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,EAAiC,EAAE,EAAE;QACvD,OAAO,CAAC,KAAK,CAAC,CAAA;QACd,MAAM,UAAU,GAAG,KAAK,CAAC,KAAK,EAAE,uBAAuB,EAAE,IAAI,CAAC,CAAA;QAE9D,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,OAAO,EAAE,CAAC,EAAE;YAChC,iBAAiB,CAAC,SAAS,CAAC,CAAA;YAC5B,QAAQ,CAAC,KAAK,CAAC,CAAA;SAChB;aAAM;YACL,iBAAiB,CAAC,cAAc,CAAC,CAAA;SAClC;IACH,CAAC,EACD,CAAC,QAAQ,EAAE,IAAI,CAAC,CACjB,CAAA;IAED,MAAM,eAAe,GAAG,WAAW,CACjC,CAAC,EAAU,EAAE,EAAE,CAAC,GAAG,EAAE;QACnB,iEAAiE;QACjE,MAAM,UAAU,GAAG,KAAK,CAAC,EAAE,EAAE,WAAW,EAAE,IAAI,CAAC,CAAA;QAC/C,kGAAkG;QAClG,MAAM,mBAAmB,GAAG,MAAM,CAAC,UAAU,EAAE,uBAAuB,CAAC,CAAA;QACvE,QAAQ,CAAC,mBAAmB,CAAC,CAAA;QAE7B,6DAA6D;QAC7D,iBAAiB,CAAC,SAAS,CAAC,CAAA;QAE5B,wEAAwE;QACxE,IAAI,QAAQ,EAAE,KAAK,mBAAmB,EAAE;YACtC,OAAO,CAAC,mBAAmB,CAAC,CAAA;SAC7B;IACH,CAAC,EACD,CAAC,QAAQ,EAAE,QAAQ,EAAE,IAAI,CAAC,CAC3B,CAAA;IAED,OAAO,CACL,0CAAe,eAAe,EAAC,SAAS,EAAE,MAAM,CAAC,SAAS;QACxD,0CAAe,sBAAsB,EAAC,SAAS,EAAE,MAAM,CAAC,MAAM;YAC5D,oBAAC,SAAS,IACR,aAAa,QACb,KAAK,EAAC,YAAY,EAClB,KAAK,EAAE,cAAc,EACrB,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,EACtB,QAAQ,EAAE,qBAAqB,GAC/B,CACE;QACN,0CAAe,0BAA0B,EAAC,SAAS,EAAE,MAAM,CAAC,UAAU,IACnE,UAAU,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,CACtB,oBAAC,MAAM,IAAC,SAAS,EAAE,MAAM,CAAC,SAAS,EAAE,aAAa,EAAE,MAAM,CAAC,aAAa,EAAE,GAAG,EAAE,EAAE,EAAE,OAAO,EAAC,MAAM,EAAC,OAAO,EAAE,eAAe,CAAC,EAAE,CAAC,IAC3H,EAAE,CACI,CACV,CAAC,CACE,CACF,CACP,CAAA;AACH,CAAC,CAAA;AAUD,MAAM,CAAC,MAAM,YAAY,GAA0B,CAAC,KAAK,EAAE,EAAE;IAC3D,oDAAoD;IACpD,MAAM,UAAU,GAAG,KAAkC,CAAA;IAErD,OAAO,oBAAC,oBAAoB,OAAK,UAAU,GAAI,CAAA;AACjD,CAAC,CAAA"}
|
|
@@ -10,6 +10,7 @@ import { Icon } from '../Icon';
|
|
|
10
10
|
import { getMenuContainer, getOptionsMap } from './helpers';
|
|
11
11
|
import { components } from './Common';
|
|
12
12
|
import { FieldHeader } from '../FieldHeader';
|
|
13
|
+
import { useCloseOnResize } from '../hooks/useCloseOnResize';
|
|
13
14
|
import styles from './SelectField.module.scss';
|
|
14
15
|
import multiStyles from './MultiSelectField.module.scss';
|
|
15
16
|
// Self styled version of the MultiValue/Label
|
|
@@ -52,9 +53,10 @@ export const MultiSelectField = (props) => {
|
|
|
52
53
|
const selectRef = useRef();
|
|
53
54
|
useEffect(() => {
|
|
54
55
|
if (selectRef.current) {
|
|
55
|
-
menuIsOpen ? selectRef.current.
|
|
56
|
+
menuIsOpen ? selectRef.current.onMenuOpen() : selectRef.current.onMenuClose();
|
|
56
57
|
}
|
|
57
58
|
}, [menuIsOpen]);
|
|
59
|
+
useCloseOnResize(selectRef);
|
|
58
60
|
const selectProps = {
|
|
59
61
|
ref: selectRef,
|
|
60
62
|
inputId: id,
|
|
@@ -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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"}
|
|
@@ -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,6 +47,7 @@ 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,
|
|
@@ -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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"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { MutableRefObject } from 'react';
|
|
2
|
+
import ReactSelect from 'react-select';
|
|
3
|
+
declare type RefElement = MutableRefObject<ReactSelect | undefined>;
|
|
4
|
+
/** If the size of screen is changed we close dropdown menu to aviod the dropdown menu bug in react-select library.
|
|
5
|
+
* For more information visit: https://github.com/JedWatson/react-select/issues/3533
|
|
6
|
+
*/
|
|
7
|
+
export declare const useCloseOnResize: (target: RefElement) => void;
|
|
8
|
+
export {};
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { useEffect } from 'react';
|
|
2
|
+
/** If the size of screen is changed we close dropdown menu to aviod the dropdown menu bug in react-select library.
|
|
3
|
+
* For more information visit: https://github.com/JedWatson/react-select/issues/3533
|
|
4
|
+
*/
|
|
5
|
+
export const useCloseOnResize = (target) => {
|
|
6
|
+
const handleResize = () => {
|
|
7
|
+
if (target.current) {
|
|
8
|
+
target.current.onMenuClose();
|
|
9
|
+
}
|
|
10
|
+
};
|
|
11
|
+
useEffect(() => {
|
|
12
|
+
window.addEventListener('resize', handleResize);
|
|
13
|
+
return () => window.removeEventListener('resize', handleResize);
|
|
14
|
+
});
|
|
15
|
+
};
|
|
16
|
+
//# sourceMappingURL=useCloseOnResize.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useCloseOnResize.js","sourceRoot":"","sources":["../../src/hooks/useCloseOnResize.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,SAAS,EAAE,MAAM,OAAO,CAAA;AAKnD;;GAEG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,MAAkB,EAAE,EAAE;IACrD,MAAM,YAAY,GAAG,GAAG,EAAE;QACxB,IAAI,MAAM,CAAC,OAAO,EAAE;YAClB,MAAM,CAAC,OAAO,CAAC,WAAW,EAAE,CAAA;SAC7B;IACH,CAAC,CAAA;IAED,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAA;QAE/C,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAA;IACjE,CAAC,CAAC,CAAA;AACJ,CAAC,CAAA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hazelcast/ui",
|
|
3
|
-
"version": "1.3.2-next.
|
|
3
|
+
"version": "1.3.2-next.24+5dd3dec",
|
|
4
4
|
"description": "Hazelcast design system components",
|
|
5
5
|
"author": "",
|
|
6
6
|
"homepage": "https://github.com/hazelcast/frontend-shared#readme",
|
|
@@ -109,5 +109,5 @@
|
|
|
109
109
|
"webpack": "^5.65.0",
|
|
110
110
|
"yup": "^0.32.11"
|
|
111
111
|
},
|
|
112
|
-
"gitHead": "
|
|
112
|
+
"gitHead": "5dd3dec76869d90c8a812d0e166a6f7af0e84e23"
|
|
113
113
|
}
|