@hazelcast/ui 1.0.1-next.86 → 1.0.1-next.87
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/Error.d.ts +2 -0
- package/lib/Error.js +2 -2
- package/lib/Error.js.map +1 -1
- package/lib/TextField.d.ts +4 -0
- package/lib/TextField.js +2 -2
- package/lib/TextField.js.map +1 -1
- package/lib/Tooltip.d.ts +1 -0
- package/lib/Tooltip.js +19 -6
- package/lib/Tooltip.js.map +1 -1
- package/lib/TruncatedText.d.ts +3 -0
- package/lib/TruncatedText.js +2 -2
- package/lib/TruncatedText.js.map +1 -1
- package/package.json +2 -2
package/lib/Error.d.ts
CHANGED
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
import { FC } from 'react';
|
|
2
|
+
import { TooltipProps } from './Tooltip';
|
|
2
3
|
export declare const errorId: (inputId: string) => string;
|
|
3
4
|
interface ErrorProps {
|
|
4
5
|
error?: string;
|
|
5
6
|
className?: string;
|
|
6
7
|
inputId: string;
|
|
7
8
|
truncated?: boolean;
|
|
9
|
+
tooltipPlacement?: TooltipProps['placement'];
|
|
8
10
|
}
|
|
9
11
|
export declare const Error: FC<ErrorProps>;
|
|
10
12
|
export {};
|
package/lib/Error.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import cn from 'classnames';
|
|
3
|
-
import styles from './Error.module.scss';
|
|
4
3
|
import { TruncatedText } from './TruncatedText';
|
|
4
|
+
import styles from './Error.module.scss';
|
|
5
5
|
export const errorId = (inputId) => `${inputId}-error`;
|
|
6
6
|
/* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alert_role */
|
|
7
|
-
export const Error = ({ error, className, inputId, truncated }) => (React.createElement("div", { className: cn(styles.container, error && styles.hasError, className), role: "alert", id: errorId(inputId) }, truncated ? React.createElement(TruncatedText, { text: error || '' }) : error));
|
|
7
|
+
export const Error = ({ error, className, inputId, truncated, tooltipPlacement }) => (React.createElement("div", { className: cn(styles.container, error && styles.hasError, className), role: "alert", id: errorId(inputId) }, truncated ? React.createElement(TruncatedText, { text: error || '', tooltipPlacement: tooltipPlacement, hoverAbleTooltip: false }) : error));
|
|
8
8
|
//# sourceMappingURL=Error.js.map
|
package/lib/Error.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Error.js","sourceRoot":"","sources":["../src/Error.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,OAAO,
|
|
1
|
+
{"version":3,"file":"Error.js","sourceRoot":"","sources":["../src/Error.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAG/C,OAAO,MAAM,MAAM,qBAAqB,CAAA;AAExC,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,OAAe,EAAU,EAAE,CAAC,GAAG,OAAO,QAAQ,CAAA;AAUtE,0GAA0G;AAC1G,MAAM,CAAC,MAAM,KAAK,GAAmB,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,EAAE,EAAE,CAAC,CACnG,6BAAK,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,KAAK,IAAI,MAAM,CAAC,QAAQ,EAAE,SAAS,CAAC,EAAE,IAAI,EAAC,OAAO,EAAC,EAAE,EAAE,OAAO,CAAC,OAAO,CAAC,IACzG,SAAS,CAAC,CAAC,CAAC,oBAAC,aAAa,IAAC,IAAI,EAAE,KAAK,IAAI,EAAE,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,KAAK,GAAI,CAAC,CAAC,CAAC,KAAK,CAClH,CACP,CAAA"}
|
package/lib/TextField.d.ts
CHANGED
|
@@ -3,6 +3,7 @@ import { DataTestProp } from '@hazelcast/helpers';
|
|
|
3
3
|
import { Icon as IconType } from 'react-feather';
|
|
4
4
|
import { FieldHeaderProps } from './FieldHeader';
|
|
5
5
|
import { IconSize } from './Icon';
|
|
6
|
+
import { TooltipProps } from './Tooltip';
|
|
6
7
|
export declare type TextFieldSize = 'medium' | 'small';
|
|
7
8
|
declare type TextFieldTrailingIcon = {
|
|
8
9
|
inputTrailingIcon: IconType;
|
|
@@ -33,6 +34,7 @@ export declare type TextFieldExtraProps<T extends TextFieldTypes> = {
|
|
|
33
34
|
type?: T;
|
|
34
35
|
readOnly?: boolean;
|
|
35
36
|
clearable?: boolean;
|
|
37
|
+
errorTooltipPlacement?: TooltipProps['placement'];
|
|
36
38
|
} & DataTestProp & Pick<InputHTMLAttributes<HTMLInputElement>, 'id' | 'autoFocus' | 'disabled' | 'autoComplete' | 'required' | 'placeholder'> & TextFieldTrailingIcon & Omit<FieldHeaderProps, 'id'>;
|
|
37
39
|
export declare type TextFieldProps<T extends TextFieldTypes> = TextFieldCoreProps<T> & TextFieldExtraProps<T>;
|
|
38
40
|
export declare const TextField: <T extends TextFieldTypes>({ mRef, ...props }: (TextFieldCoreProps<T> & {
|
|
@@ -48,6 +50,7 @@ export declare const TextField: <T extends TextFieldTypes>({ mRef, ...props }: (
|
|
|
48
50
|
type?: T | undefined;
|
|
49
51
|
readOnly?: boolean | undefined;
|
|
50
52
|
clearable?: boolean | undefined;
|
|
53
|
+
errorTooltipPlacement?: TooltipProps['placement'];
|
|
51
54
|
} & DataTestProp & Pick<React.InputHTMLAttributes<HTMLInputElement>, "disabled" | "id" | "placeholder" | "autoFocus" | "required" | "autoComplete"> & {
|
|
52
55
|
inputTrailingIcon: IconType;
|
|
53
56
|
inputTrailingIconLabel: string;
|
|
@@ -66,6 +69,7 @@ export declare const TextField: <T extends TextFieldTypes>({ mRef, ...props }: (
|
|
|
66
69
|
type?: T | undefined;
|
|
67
70
|
readOnly?: boolean | undefined;
|
|
68
71
|
clearable?: boolean | undefined;
|
|
72
|
+
errorTooltipPlacement?: TooltipProps['placement'];
|
|
69
73
|
} & DataTestProp & Pick<React.InputHTMLAttributes<HTMLInputElement>, "disabled" | "id" | "placeholder" | "autoFocus" | "required" | "autoComplete"> & {
|
|
70
74
|
inputTrailingIcon?: undefined;
|
|
71
75
|
inputTrailingIconLabel?: undefined;
|
package/lib/TextField.js
CHANGED
|
@@ -27,7 +27,7 @@ import styles from './TextField.module.scss';
|
|
|
27
27
|
* Use a text input when the expected user input is a single line of text.
|
|
28
28
|
*/
|
|
29
29
|
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, ...htmlAttrs } = props;
|
|
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;
|
|
31
31
|
const autoId = useUID();
|
|
32
32
|
const id = explicitId !== null && explicitId !== void 0 ? explicitId : autoId;
|
|
33
33
|
const inputRef = useRef(null);
|
|
@@ -57,7 +57,7 @@ const TextFieldInternal = (props, ref) => {
|
|
|
57
57
|
clearable && !disabled && isNotEmpty && (React.createElement(IconButton, { icon: X, size: size, ariaLabel: "Clear field", onClick: handleClear, className: styles.clearButton, "data-test": dataTest ? `${dataTest}-clear` : undefined })),
|
|
58
58
|
inputContainerChild,
|
|
59
59
|
inputTrailingIcon && inputTrailingIconLabel && (React.createElement(Icon, { icon: inputTrailingIcon, ariaLabel: inputTrailingIconLabel, containerClassName: cn(styles.inputIconContainer, styles.inputTrailingIconContainer), className: styles.inputIconTrailing, size: iconSize })))),
|
|
60
|
-
React.createElement(Error, { truncated: true, error: error, className: cn(styles.errorContainer, errorClassName)
|
|
60
|
+
React.createElement(Error, { truncated: true, inputId: id, error: error, tooltipPlacement: errorTooltipPlacement, className: cn(styles.errorContainer, errorClassName) })));
|
|
61
61
|
};
|
|
62
62
|
const TextFieldWithRef = forwardRef(TextFieldInternal);
|
|
63
63
|
export const TextField = ({ mRef, ...props }) => (React.createElement(TextFieldWithRef, Object.assign({ ref: mRef }, props)));
|
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;
|
|
1
|
+
{"version":3,"file":"TextField.js","sourceRoot":"","sources":["../src/TextField.tsx"],"names":[],"mappings":"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"}
|
package/lib/Tooltip.d.ts
CHANGED
|
@@ -11,6 +11,7 @@ export declare type TooltipProps = {
|
|
|
11
11
|
padding?: number;
|
|
12
12
|
placement?: Placement;
|
|
13
13
|
visible?: boolean;
|
|
14
|
+
hoverAbleTooltip?: boolean;
|
|
14
15
|
children: (ref: React.Dispatch<React.SetStateAction<HTMLElement | null>>, onMouseEnter?: MouseEventHandler<Element>, onMouseLeave?: MouseEventHandler<Element>) => ReactNode;
|
|
15
16
|
popperRef?: MutableRefObject<PopperRef | undefined>;
|
|
16
17
|
updateToken?: ReactText | boolean;
|
package/lib/Tooltip.js
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import React, { useCallback, useState, useImperativeHandle, useLayoutEffect, createContext, useContext, useMemo, useRef, useEffect, } from 'react';
|
|
2
2
|
import ReactDOM from 'react-dom';
|
|
3
3
|
import { usePopper } from 'react-popper';
|
|
4
|
-
import useEvent from 'react-use/lib/useEvent';
|
|
5
4
|
import cn from 'classnames';
|
|
6
5
|
import { containsElement } from './hooks';
|
|
7
6
|
import { canUseDOM } from './utils/ssr';
|
|
@@ -34,7 +33,7 @@ const getTooltipPortalContainer = (tooltipContainer, referenceElement) => {
|
|
|
34
33
|
* ### Usage
|
|
35
34
|
* Wrap the target element with Tooltip component and use the "content" property to define what should be displayed inside the tooltip.
|
|
36
35
|
*/
|
|
37
|
-
export const Tooltip = ({ id, content, hideTimeoutDuration = 100, offset = 10, padding = 10, placement = 'top', visible: visibilityOverride, children, popperRef, updateToken, tooltipContainer = 'body', }) => {
|
|
36
|
+
export const Tooltip = ({ id, content, hideTimeoutDuration = 100, offset = 10, padding = 10, placement = 'top', visible: visibilityOverride, children, popperRef, updateToken, tooltipContainer = 'body', hoverAbleTooltip = true, }) => {
|
|
38
37
|
const [isShown, setShown] = useState(false);
|
|
39
38
|
const timeoutRef = useRef(null);
|
|
40
39
|
const context = useContext(TooltipContext);
|
|
@@ -88,10 +87,6 @@ export const Tooltip = ({ id, content, hideTimeoutDuration = 100, offset = 10, p
|
|
|
88
87
|
setShown(false);
|
|
89
88
|
}, hideTimeoutDuration);
|
|
90
89
|
}, [hideTimeoutDuration, context]);
|
|
91
|
-
useEvent('mouseenter', onMouseEnter, referenceElement);
|
|
92
|
-
useEvent('mouseleave', onMouseLeave, referenceElement);
|
|
93
|
-
useEvent('mouseenter', onMouseEnter, popperElement);
|
|
94
|
-
useEvent('mouseleave', onMouseLeave, popperElement);
|
|
95
90
|
const contextValue = useMemo(() => ({
|
|
96
91
|
popperElement,
|
|
97
92
|
referenceElement,
|
|
@@ -113,6 +108,24 @@ export const Tooltip = ({ id, content, hideTimeoutDuration = 100, offset = 10, p
|
|
|
113
108
|
clearHideTimeout();
|
|
114
109
|
};
|
|
115
110
|
}, [clearHideTimeout]);
|
|
111
|
+
useEffect(() => {
|
|
112
|
+
referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.addEventListener('mouseenter', onMouseEnter, false);
|
|
113
|
+
referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.addEventListener('mouseleave', onMouseLeave, false);
|
|
114
|
+
return () => {
|
|
115
|
+
referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.removeEventListener('mouseenter', onMouseEnter);
|
|
116
|
+
referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.removeEventListener('mouseleave', onMouseLeave);
|
|
117
|
+
};
|
|
118
|
+
}, [referenceElement, onMouseEnter, onMouseLeave]);
|
|
119
|
+
useEffect(() => {
|
|
120
|
+
if (hoverAbleTooltip) {
|
|
121
|
+
popperElement === null || popperElement === void 0 ? void 0 : popperElement.addEventListener('mouseenter', onMouseEnter, false);
|
|
122
|
+
popperElement === null || popperElement === void 0 ? void 0 : popperElement.addEventListener('mouseleave', onMouseLeave, false);
|
|
123
|
+
}
|
|
124
|
+
return () => {
|
|
125
|
+
popperElement === null || popperElement === void 0 ? void 0 : popperElement.removeEventListener('mouseenter', onMouseEnter);
|
|
126
|
+
popperElement === null || popperElement === void 0 ? void 0 : popperElement.removeEventListener('mouseleave', onMouseLeave);
|
|
127
|
+
};
|
|
128
|
+
}, [popperElement, onMouseEnter, onMouseLeave, hoverAbleTooltip]);
|
|
116
129
|
const tooltipPortalContainer = getTooltipPortalContainer(tooltipContainer, referenceElement);
|
|
117
130
|
return (React.createElement(TooltipContext.Provider, { value: contextValue },
|
|
118
131
|
children(setReferenceElement, onMouseEnter, (e) => {
|
package/lib/Tooltip.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../src/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAGZ,WAAW,EACX,QAAQ,EACR,mBAAmB,EAGnB,eAAe,EACf,aAAa,EACb,UAAU,EACV,OAAO,EACP,MAAM,EACN,SAAS,
|
|
1
|
+
{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../src/Tooltip.tsx"],"names":[],"mappings":"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"}
|
package/lib/TruncatedText.d.ts
CHANGED
|
@@ -1,9 +1,12 @@
|
|
|
1
1
|
import { FC, ReactText, ReactElement } from 'react';
|
|
2
|
+
import { TooltipProps } from './Tooltip';
|
|
2
3
|
interface TruncatedTextProps {
|
|
3
4
|
text: ReactText | ((...arg: unknown[]) => string) | ReactElement;
|
|
4
5
|
forceUpdateToken?: ReactText | boolean;
|
|
5
6
|
className?: string;
|
|
6
7
|
tooltipVisible?: boolean;
|
|
8
|
+
hoverAbleTooltip?: boolean;
|
|
9
|
+
tooltipPlacement?: TooltipProps['placement'];
|
|
7
10
|
}
|
|
8
11
|
export declare const TruncatedText: FC<TruncatedTextProps>;
|
|
9
12
|
export {};
|
package/lib/TruncatedText.js
CHANGED
|
@@ -5,7 +5,7 @@ import useIsomorphicLayoutEffect from 'react-use/lib/useIsomorphicLayoutEffect';
|
|
|
5
5
|
import { useUID } from 'react-uid';
|
|
6
6
|
import { Tooltip } from './Tooltip';
|
|
7
7
|
import styles from './TruncatedText.module.scss';
|
|
8
|
-
export const TruncatedText = ({ text, forceUpdateToken, className, tooltipVisible }) => {
|
|
8
|
+
export const TruncatedText = ({ text, forceUpdateToken, className, tooltipVisible, tooltipPlacement = 'top', hoverAbleTooltip, }) => {
|
|
9
9
|
const textRef = useRef(null);
|
|
10
10
|
const [tooltip, setTooltip] = useState();
|
|
11
11
|
const idTooltip = useUID();
|
|
@@ -17,7 +17,7 @@ export const TruncatedText = ({ text, forceUpdateToken, className, tooltipVisibl
|
|
|
17
17
|
// https://codepen.io/triple-j/pen/wadKQB
|
|
18
18
|
setTooltip(span.offsetWidth < span.scrollWidth ? text : undefined);
|
|
19
19
|
}, [text, forceUpdateToken]);
|
|
20
|
-
return (React.createElement(Tooltip, { id: idTooltip,
|
|
20
|
+
return (React.createElement(Tooltip, { id: idTooltip, content: tooltip, visible: tooltipVisible, placement: tooltipPlacement, updateToken: forceUpdateToken, hoverAbleTooltip: hoverAbleTooltip }, (ref) => (React.createElement("div", { ref: mergeRefs([textRef, ref]), className: cn(styles.truncatedText, className) },
|
|
21
21
|
React.createElement("span", { "aria-labelledby": tooltip ? idTooltip : undefined }, text)))));
|
|
22
22
|
};
|
|
23
23
|
//# sourceMappingURL=TruncatedText.js.map
|
package/lib/TruncatedText.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TruncatedText.js","sourceRoot":"","sources":["../src/TruncatedText.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAM,MAAM,EAAE,QAAQ,EAAuC,MAAM,OAAO,CAAA;AACxF,OAAO,SAAS,MAAM,kBAAkB,CAAA;AACxC,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,yBAAyB,MAAM,yCAAyC,CAAA;AAC/E,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAElC,OAAO,EAAE,OAAO,
|
|
1
|
+
{"version":3,"file":"TruncatedText.js","sourceRoot":"","sources":["../src/TruncatedText.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAM,MAAM,EAAE,QAAQ,EAAuC,MAAM,OAAO,CAAA;AACxF,OAAO,SAAS,MAAM,kBAAkB,CAAA;AACxC,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,yBAAyB,MAAM,yCAAyC,CAAA;AAC/E,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAElC,OAAO,EAAE,OAAO,EAAgB,MAAM,WAAW,CAAA;AAEjD,OAAO,MAAM,MAAM,6BAA6B,CAAA;AAYhD,MAAM,CAAC,MAAM,aAAa,GAA2B,CAAC,EACpD,IAAI,EACJ,gBAAgB,EAChB,SAAS,EACT,cAAc,EACd,gBAAgB,GAAG,KAAK,EACxB,gBAAgB,GACjB,EAAE,EAAE;IACH,MAAM,OAAO,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IAC5C,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,EAA0B,CAAA;IAChE,MAAM,SAAS,GAAG,MAAM,EAAE,CAAA;IAE1B,yBAAyB,CAAC,GAAG,EAAE;QAC7B,MAAM,IAAI,GAAG,OAAO,CAAC,OAAO,CAAA;QAE5B,IAAI,IAAI,KAAK,IAAI,EAAE;YACjB,OAAM;SACP;QAED,yCAAyC;QACzC,UAAU,CAAC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAA;IACpE,CAAC,EAAE,CAAC,IAAI,EAAE,gBAAgB,CAAC,CAAC,CAAA;IAE5B,OAAO,CACL,oBAAC,OAAO,IACN,EAAE,EAAE,SAAS,EACb,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,cAAc,EACvB,SAAS,EAAE,gBAAgB,EAC3B,WAAW,EAAE,gBAAgB,EAC7B,gBAAgB,EAAE,gBAAgB,IAEjC,CAAC,GAAG,EAAE,EAAE,CAAC,CACR,6BAAK,GAAG,EAAE,SAAS,CAAC,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,EAAE,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,aAAa,EAAE,SAAS,CAAC;QACjF,iDAAuB,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,IAAG,IAAI,CAAQ,CACjE,CACP,CACO,CACX,CAAA;AACH,CAAC,CAAA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hazelcast/ui",
|
|
3
|
-
"version": "1.0.1-next.
|
|
3
|
+
"version": "1.0.1-next.87+50c909f",
|
|
4
4
|
"description": "Hazelcast design system components",
|
|
5
5
|
"author": "",
|
|
6
6
|
"homepage": "https://github.com/hazelcast/frontend-shared#readme",
|
|
@@ -107,5 +107,5 @@
|
|
|
107
107
|
"react": "^16.14.0 || ^17.0.0",
|
|
108
108
|
"react-dom": "^16.14.0 || ^17.0.0"
|
|
109
109
|
},
|
|
110
|
-
"gitHead": "
|
|
110
|
+
"gitHead": "50c909fbd070fa08471b7f7c7fb7e743b0bae82a"
|
|
111
111
|
}
|