@hazelcast/ui 1.1.1 → 1.2.0

package/lib/Tooltip.js

@@ -1,7 +1,20 @@
-import React, { useCallback, useEffect, useState, useImperativeHandle } from 'react';
+import React, { useCallback, useState, useImperativeHandle, useLayoutEffect } from 'react';
+import ReactDOM from 'react-dom';
 import { usePopper } from 'react-popper';
+import useEvent from 'react-use/lib/useEvent';
 import cn from 'classnames';
+import { canUseDOM } from './utils/ssr';
 import styles from './Tooltip.module.scss';
+const getTooltipPortalContainer = (tooltipContainer, referenceElement) => {
+    if (tooltipContainer === 'body') {
+        // There is no document is SSR environment
+        return canUseDOM ? document.body : null;
+    }
+    if (tooltipContainer === 'referenceElement') {
+        return referenceElement !== null && referenceElement !== void 0 ? referenceElement : null;
+    }
+    return tooltipContainer;
+};
 /**
  * ### Purpose
  * Useful when you need to display additional information/actionable content.
@@ -12,11 +25,13 @@ import styles from './Tooltip.module.scss';
  * - Offset (space between a target and tooltip elements) can be also configured via "offset" property.
  * - If "content" property is undefined, tooltip element will be removed from DOM entirely.
  * - It's required to set the "id" property which will be assigned to the tooltip. This id parameter can be then used as a value of "aria-labelledby" attribute.
+ * - Use `updateToken` prop to update the tooltip position.
+ * - Use `tooltipContainer` prop to change the tooltip portal container. Defaults to `body`.
  *
  * ### Usage
  * Wrap the target element with Tooltip component and use the "content" property to define what should be displayed inside the tooltip.
  */
-export const Tooltip = ({ id, content, hideTimeoutDuration = 100, offset = 10, placement = 'top', visible: visibilityOverride, children, popperRef, }) => {
+export const Tooltip = ({ id, content, hideTimeoutDuration = 100, offset = 10, padding = 10, placement = 'top', visible: visibilityOverride, children, popperRef, updateToken, tooltipContainer = 'body', }) => {
     const [isShown, setShown] = useState(false);
     const [hideTimeout, setHideTimeout] = useState(null);
     /*
@@ -33,6 +48,7 @@ export const Tooltip = ({ id, content, hideTimeoutDuration = 100, offset = 10, p
                 name: 'arrow',
                 options: {
                     element: arrowElement,
+                    padding,
                 },
             },
             {
@@ -53,32 +69,31 @@ export const Tooltip = ({ id, content, hideTimeoutDuration = 100, offset = 10, p
     const onMouseLeave = useCallback(() => {
         setHideTimeout(setTimeout(() => setShown(false), hideTimeoutDuration));
     }, [hideTimeoutDuration]);
-    useEffect(() => {
-        referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.addEventListener('mouseenter', onMouseEnter);
-        popperElement === null || popperElement === void 0 ? void 0 : popperElement.addEventListener('mouseenter', onMouseEnter);
-        return () => {
-            referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.removeEventListener('mouseenter', onMouseEnter);
-            popperElement === null || popperElement === void 0 ? void 0 : popperElement.removeEventListener('mouseenter', onMouseEnter);
-        };
-    }, [referenceElement, popperElement, onMouseEnter]);
-    useEffect(() => {
-        referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.addEventListener('mouseleave', onMouseLeave);
-        popperElement === null || popperElement === void 0 ? void 0 : popperElement.addEventListener('mouseleave', onMouseLeave);
-        return () => {
-            referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.removeEventListener('mouseleave', onMouseLeave);
-            popperElement === null || popperElement === void 0 ? void 0 : popperElement.removeEventListener('mouseleave', onMouseLeave);
-        };
-    }, [referenceElement, popperElement, onMouseLeave]);
+    useEvent('mouseenter', onMouseEnter, referenceElement);
+    useEvent('mouseleave', onMouseLeave, referenceElement);
+    useEvent('mouseenter', onMouseEnter, popperElement);
+    useEvent('mouseleave', onMouseLeave, popperElement);
     // Makes sure "visible" prop can override local "isShown" state
     const isTooltipVisible = visibilityOverride !== null && visibilityOverride !== void 0 ? visibilityOverride : isShown;
+    // Update the tooltip's position (useful when resizing table columns)
+    useLayoutEffect(() => {
+        var _a;
+        if (content) {
+            void ((_a = popper === null || popper === void 0 ? void 0 : popper.update) === null || _a === void 0 ? void 0 : _a.call(popper));
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isTooltipVisible, updateToken]);
+    const tooltipPortalContainer = getTooltipPortalContainer(tooltipContainer, referenceElement);
     return (React.createElement(React.Fragment, null,
         children(setReferenceElement),
         content !== undefined && (React.createElement(React.Fragment, null,
             React.createElement("span", { id: id, className: styles.tooltipSr, role: "tooltip", "data-test": "tooltip-sr" }, content),
-            React.createElement("span", Object.assign({ ref: setPopperElement, className: cn(styles.overlay, {
-                    [styles.hidden]: !isTooltipVisible,
-                }), style: popper.styles.popper, "data-test": "tooltip-overlay", "aria-hidden": true }, popper.attributes.popper),
-                content,
-                React.createElement("span", Object.assign({ ref: setArrowElement, className: styles.arrow, style: popper.styles.arrow, "data-test": "tooltip-arrow" }, popper.attributes.arrow)))))));
+            tooltipPortalContainer &&
+                ReactDOM.createPortal(React.createElement(React.Fragment, null,
+                    React.createElement("span", Object.assign({ ref: setPopperElement, className: cn(styles.overlay, {
+                            [styles.hidden]: !isTooltipVisible,
+                        }), style: popper.styles.popper, "data-test": "tooltip-overlay", "aria-hidden": true }, popper.attributes.popper),
+                        content,
+                        React.createElement("span", Object.assign({ ref: setArrowElement, className: styles.arrow, style: popper.styles.arrow, "data-test": "tooltip-arrow" }, popper.attributes.arrow)))), tooltipPortalContainer)))));
 };
 //# sourceMappingURL=Tooltip.js.map

package/lib/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../src/Tooltip.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../src/Tooltip.tsx"],"names":[],"mappings":"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"}

package/lib/Tooltip.module.scss

@@ -1,3 +1,5 @@
+@use "sass:math";
+
 @use '../styles/constants' as c;
 @use '../styles/helpers' as h;
 
@@ -5,23 +7,26 @@
   @include h.visuallyHidden;
 }
 
-$tooltipArrowSize1-3: c.$tooltipArrowSize / 3;
-$tooltipArrowSize2-3: c.$tooltipArrowSize / 3 * 2;
+$tooltipArrowSize1-3: math.div(c.$tooltipArrowSize, 3);
+$tooltipArrowSize2-3: math.div(c.$tooltipArrowSize, 3) * 2;
 
 .overlay {
   @include c.typographyBodySmall;
 
   position: relative;
   max-width: c.$tooltipMaxWidth;
-  padding: c.$grid * 5;
+  padding: c.$grid * 3;
   background: c.$colorNeutralLighter;
   border: c.$borderWidth solid c.$colorNeutralLight;
   border-radius: c.$borderRadius;
   color: c.$colorText;
-  z-index: c.$zIndex200;
+  z-index: c.$zIndex2000;
 
   &.hidden {
     visibility: hidden;
+    // important is needed to override inline style
+    top: -99999px !important;
+    left: -99999px !important;
   }
 
   > .arrow {
@@ -71,7 +76,7 @@ $tooltipArrowSize2-3: c.$tooltipArrowSize / 3 * 2;
         border-top: c.$tooltipArrowSize solid transparent;
         border-bottom: c.$tooltipArrowSize solid transparent;
         top: 50%;
-        left: 0%;
+        left: 0;
         margin-top: -(c.$tooltipArrowSize);
       }
 

package/lib/TruncatedText.d.ts

@@ -1,7 +1,7 @@
 import { FC, ReactText } from 'react';
 interface TruncatedTextProps {
     text: ReactText | ((...arg: unknown[]) => string);
-    forceUpdateToken?: ReactText;
+    forceUpdateToken?: ReactText | boolean;
     className?: string;
     tooltipVisible?: boolean;
 }

package/lib/TruncatedText.js

@@ -17,7 +17,7 @@ export const TruncatedText = ({ text, forceUpdateToken, className, tooltipVisibl
         // https://codepen.io/triple-j/pen/wadKQB
         setTooltip(span.offsetWidth < span.scrollWidth ? text : undefined);
     }, [text, forceUpdateToken]);
-    return (React.createElement(Tooltip, { id: idTooltip, placement: "top", content: tooltip, visible: tooltipVisible }, (ref) => (React.createElement("div", { ref: mergeRefs([textRef, ref]), className: cn(styles.truncatedText, className) },
+    return (React.createElement(Tooltip, { id: idTooltip, placement: "top", content: tooltip, visible: tooltipVisible, updateToken: forceUpdateToken }, (ref) => (React.createElement("div", { ref: mergeRefs([textRef, ref]), className: cn(styles.truncatedText, className) },
         React.createElement("span", { "aria-labelledby": tooltip ? idTooltip : undefined }, text)))));
 };
 //# sourceMappingURL=TruncatedText.js.map

package/lib/TruncatedText.js.map

@@ -1 +1 @@
-{"version":3,"file":"TruncatedText.js","sourceRoot":"","sources":["../src/TruncatedText.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAM,MAAM,EAAE,QAAQ,EAAyB,MAAM,OAAO,CAAA;AAC1E,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,EAAE,MAAM,WAAW,CAAA;AAEnC,OAAO,MAAM,MAAM,6BAA6B,CAAA;AAUhD,MAAM,CAAC,MAAM,aAAa,GAA2B,CAAC,EAAE,IAAI,EAAE,gBAAgB,EAAE,SAAS,EAAE,cAAc,EAAE,EAAE,EAAE;IAC7G,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,IAAC,EAAE,EAAE,SAAS,EAAE,SAAS,EAAC,KAAK,EAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,cAAc,IAC9E,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"}
+{"version":3,"file":"TruncatedText.js","sourceRoot":"","sources":["../src/TruncatedText.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAM,MAAM,EAAE,QAAQ,EAAyB,MAAM,OAAO,CAAA;AAC1E,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,EAAE,MAAM,WAAW,CAAA;AAEnC,OAAO,MAAM,MAAM,6BAA6B,CAAA;AAUhD,MAAM,CAAC,MAAM,aAAa,GAA2B,CAAC,EAAE,IAAI,EAAE,gBAAgB,EAAE,SAAS,EAAE,cAAc,EAAE,EAAE,EAAE;IAC7G,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,IAAC,EAAE,EAAE,SAAS,EAAE,SAAS,EAAC,KAAK,EAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,WAAW,EAAE,gBAAgB,IAC7G,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/lib/hooks/index.d.ts

@@ -0,0 +1 @@
+export * from './useTableCustomizableColumns';

package/lib/hooks/index.js

@@ -0,0 +1,3 @@
+/* export only hooks for external usage */
+export * from './useTableCustomizableColumns';
+//# sourceMappingURL=index.js.map

package/lib/hooks/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,0CAA0C;AAC1C,cAAc,+BAA+B,CAAA"}

package/lib/hooks/usePrevious.d.ts

@@ -0,0 +1 @@
+export declare const usePrevious: <T extends unknown>(value: T) => T;

package/lib/hooks/usePrevious.js

@@ -0,0 +1,9 @@
+import { useRef, useEffect } from 'react';
+export const usePrevious = (value) => {
+    const ref = useRef(value);
+    useEffect(() => {
+        ref.current = value;
+    }, [value]);
+    return ref.current;
+};
+//# sourceMappingURL=usePrevious.js.map

package/lib/hooks/usePrevious.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePrevious.js","sourceRoot":"","sources":["../../src/hooks/usePrevious.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEzC,MAAM,CAAC,MAAM,WAAW,GAAG,CAAoB,KAAQ,EAAE,EAAE;IACzD,MAAM,GAAG,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;IAEzB,SAAS,CAAC,GAAG,EAAE;QACb,GAAG,CAAC,OAAO,GAAG,KAAK,CAAA;IACrB,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IAEX,OAAO,GAAG,CAAC,OAAO,CAAA;AACpB,CAAC,CAAA"}

package/lib/hooks/useTableCustomizableColumns.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { CheckableSelectProps } from '../Select';
+export declare function useTableCustomizableColumns<T>(columns: T, opts?: {
+    'data-test'?: string;
+    size: CheckableSelectProps<T>['size'];
+}): {
+    tableColumns: T;
+    control: JSX.Element;
+};

package/lib/hooks/useTableCustomizableColumns.js

@@ -0,0 +1,23 @@
+import React, { useMemo, useState } from 'react';
+import { CheckableSelectField } from '../Select';
+export function useTableCustomizableColumns(columns, opts) {
+    const untypedColumns = columns;
+    const { size = 'medium', 'data-test': dataTest = 'table-custom-columns' } = opts || {};
+    // Header is used as a label
+    const toggleableColumns = useMemo(() => untypedColumns.filter(({ Header }) => !!Header), [untypedColumns]);
+    const options = useMemo(() => toggleableColumns.map(({ Header }) => ({
+        value: String(Header),
+        label: String(Header),
+    })), [toggleableColumns]);
+    const [value, setValue] = useState(toggleableColumns.map(({ Header }) => String(Header)));
+    const valueSet = useMemo(() => new Set(value), [value]);
+    const toggleableColumnsSet = useMemo(() => new Set(toggleableColumns.map(({ Header }) => String(Header))), [toggleableColumns]);
+    const tableColumns = useMemo(() => {
+        return untypedColumns.filter(({ Header }) => (toggleableColumnsSet.has(String(Header)) ? valueSet.has(String(Header)) : true));
+    }, [untypedColumns, valueSet, toggleableColumnsSet]);
+    return {
+        tableColumns: tableColumns,
+        control: (React.createElement(CheckableSelectField, { name: "custom-columns", options: options, value: value, "data-test": dataTest, label: "Columns", onChange: setValue, size: size })),
+    };
+}
+//# sourceMappingURL=useTableCustomizableColumns.js.map

package/lib/hooks/useTableCustomizableColumns.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTableCustomizableColumns.js","sourceRoot":"","sources":["../../src/hooks/useTableCustomizableColumns.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAGhD,OAAO,EAAE,oBAAoB,EAA2C,MAAM,WAAW,CAAA;AAEzF,MAAM,UAAU,2BAA2B,CACzC,OAAU,EACV,IAGC;IAED,MAAM,cAAc,GAAI,OAA2C,CAAA;IACnE,MAAM,EAAE,IAAI,GAAG,QAAQ,EAAE,WAAW,EAAE,QAAQ,GAAG,sBAAsB,EAAE,GAAG,IAAI,IAAI,EAAE,CAAA;IACtF,4BAA4B;IAC5B,MAAM,iBAAiB,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC,CAAA;IAC1G,MAAM,OAAO,GAAG,OAAO,CACrB,GAAG,EAAE,CACH,iBAAiB,CAAC,GAAG,CAAC,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC;QACrC,KAAK,EAAE,MAAM,CAAC,MAAM,CAAC;QACrB,KAAK,EAAE,MAAM,CAAC,MAAM,CAAC;KACtB,CAAC,CAAC,EACL,CAAC,iBAAiB,CAAC,CACpB,CAAA;IACD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAW,iBAAiB,CAAC,GAAG,CAAC,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,CAAA;IACnG,MAAM,QAAQ,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,IAAI,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IACvD,MAAM,oBAAoB,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,IAAI,GAAG,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,iBAAiB,CAAC,CAAC,CAAA;IAC/H,MAAM,YAAY,GAAG,OAAO,CAAC,GAAG,EAAE;QAChC,OAAO,cAAc,CAAC,MAAM,CAAC,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC,oBAAoB,CAAC,GAAG,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAA;IAChI,CAAC,EAAE,CAAC,cAAc,EAAE,QAAQ,EAAE,oBAAoB,CAAC,CAAC,CAAA;IAEpD,OAAO;QACL,YAAY,EAAG,YAA6B;QAC5C,OAAO,EAAE,CACP,oBAAC,oBAAoB,IACnB,IAAI,EAAC,gBAAgB,EACrB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,eACD,QAAQ,EACnB,KAAK,EAAC,SAAS,EACf,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,GACV,CACH;KACF,CAAA;AACH,CAAC"}

package/lib/index.d.ts

@@ -29,6 +29,7 @@ export * from './NumberFieldFormik';
 export * from './Overlay';
 export * from './PasswordField';
 export * from './PasswordFieldFormik';
+export * from './Popover';
 export * from './Radio';
 export * from './RadioFormik';
 export * from './RadioGroup';
@@ -51,3 +52,4 @@ export * from './Toggle';
 export * from './ToggleFormik';
 export * from './Tooltip';
 export * from './TruncatedText';
+export * from './hooks';

package/lib/index.js

@@ -29,6 +29,7 @@ export * from './NumberFieldFormik';
 export * from './Overlay';
 export * from './PasswordField';
 export * from './PasswordFieldFormik';
+export * from './Popover';
 export * from './Radio';
 export * from './RadioFormik';
 export * from './RadioGroup';
@@ -51,4 +52,5 @@ export * from './Toggle';
 export * from './ToggleFormik';
 export * from './Tooltip';
 export * from './TruncatedText';
+export * from './hooks';
 //# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,qBAAqB,CAAA;AACnC,cAAc,0BAA0B,CAAA;AACxC,cAAc,QAAQ,CAAA;AACtB,cAAc,YAAY,CAAA;AAC1B,cAAc,kBAAkB,CAAA;AAChC,cAAc,uBAAuB,CAAA;AACrC,cAAc,QAAQ,CAAA;AACtB,cAAc,cAAc,CAAA;AAC5B,cAAc,oBAAoB,CAAA;AAClC,cAAc,UAAU,CAAA;AACxB,cAAc,cAAc,CAAA;AAC5B,cAAc,SAAS,CAAA;AACvB,cAAc,QAAQ,CAAA;AACtB,cAAc,QAAQ,CAAA;AACtB,cAAc,cAAc,CAAA;AAC5B,cAAc,mBAAmB,CAAA;AACjC,cAAc,yBAAyB,CAAA;AACvC,cAAc,SAAS,CAAA;AACvB,cAAc,QAAQ,CAAA;AACtB,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,eAAe,CAAA;AAC7B,cAAc,eAAe,CAAA;AAC7B,cAAc,qBAAqB,CAAA;AACnC,cAAc,WAAW,CAAA;AACzB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,uBAAuB,CAAA;AACrC,cAAc,SAAS,CAAA;AACvB,cAAc,eAAe,CAAA;AAC7B,cAAc,cAAc,CAAA;AAC5B,cAAc,oBAAoB,CAAA;AAClC,cAAc,oBAAoB,CAAA;AAClC,cAAc,0BAA0B,CAAA;AACxC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,eAAe,CAAA;AAC7B,cAAc,UAAU,CAAA;AACxB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,eAAe,CAAA;AAC7B,cAAc,cAAc,CAAA;AAC5B,cAAc,YAAY,CAAA;AAC1B,cAAc,YAAY,CAAA;AAC1B,cAAc,kBAAkB,CAAA;AAChC,cAAc,aAAa,CAAA;AAC3B,cAAc,mBAAmB,CAAA;AACjC,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,WAAW,CAAA;AACzB,cAAc,iBAAiB,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,qBAAqB,CAAA;AACnC,cAAc,0BAA0B,CAAA;AACxC,cAAc,QAAQ,CAAA;AACtB,cAAc,YAAY,CAAA;AAC1B,cAAc,kBAAkB,CAAA;AAChC,cAAc,uBAAuB,CAAA;AACrC,cAAc,QAAQ,CAAA;AACtB,cAAc,cAAc,CAAA;AAC5B,cAAc,oBAAoB,CAAA;AAClC,cAAc,UAAU,CAAA;AACxB,cAAc,cAAc,CAAA;AAC5B,cAAc,SAAS,CAAA;AACvB,cAAc,QAAQ,CAAA;AACtB,cAAc,QAAQ,CAAA;AACtB,cAAc,cAAc,CAAA;AAC5B,cAAc,mBAAmB,CAAA;AACjC,cAAc,yBAAyB,CAAA;AACvC,cAAc,SAAS,CAAA;AACvB,cAAc,QAAQ,CAAA;AACtB,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,eAAe,CAAA;AAC7B,cAAc,eAAe,CAAA;AAC7B,cAAc,qBAAqB,CAAA;AACnC,cAAc,WAAW,CAAA;AACzB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,uBAAuB,CAAA;AACrC,cAAc,WAAW,CAAA;AACzB,cAAc,SAAS,CAAA;AACvB,cAAc,eAAe,CAAA;AAC7B,cAAc,cAAc,CAAA;AAC5B,cAAc,oBAAoB,CAAA;AAClC,cAAc,oBAAoB,CAAA;AAClC,cAAc,0BAA0B,CAAA;AACxC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,eAAe,CAAA;AAC7B,cAAc,UAAU,CAAA;AACxB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,eAAe,CAAA;AAC7B,cAAc,cAAc,CAAA;AAC5B,cAAc,YAAY,CAAA;AAC1B,cAAc,YAAY,CAAA;AAC1B,cAAc,kBAAkB,CAAA;AAChC,cAAc,aAAa,CAAA;AAC3B,cAAc,mBAAmB,CAAA;AACjC,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,WAAW,CAAA;AACzB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,SAAS,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hazelcast/ui",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "Hazelcast design system components",
   "author": "",
   "homepage": "https://github.com/hazelcast/frontend-shared#readme",
@@ -43,15 +43,15 @@
     "url": "https://github.com/hazelcast/frontend-shared/issues"
   },
   "dependencies": {
-    "@codemirror/basic-setup": "0.18.0",
-    "@codemirror/legacy-modes": "0.18.0",
-    "@codemirror/stream-parser": "0.18.2",
-    "@codemirror/view": "0.18.8",
-    "@hazelcast/helpers": "^1.1.1",
-    "@hazelcast/services": "^1.1.1",
+    "@codemirror/basic-setup": "0.19.0",
+    "@codemirror/stream-parser": "0.19.2",
+    "@codemirror/view": "0.19.9",
+    "@hazelcast/helpers": "1.0.1-next.46",
+    "@hazelcast/services": "^1.2.0",
     "@headlessui/react": "^1.2.0",
     "@icons-pack/react-simple-icons": "^3.13.0",
     "@popperjs/core": "^2.5.3",
+    "@types/react-modal": "3.12.1",
     "@types/react-select": "3.0.26",
     "@types/react-table": "^7.0.28",
     "classnames": "^2.2.6",
@@ -72,10 +72,11 @@
     "use-deep-compare": "^1.1.0"
   },
   "devDependencies": {
-    "@hazelcast/test-helpers": "^1.1.1",
+    "@codemirror/legacy-modes": "0.19.0",
+    "@hazelcast/test-helpers": "^1.2.0",
     "@storybook/addon-docs": "6.1.21",
     "@storybook/addons": "6.1.21",
-    "@storybook/preset-scss": "^1.0.2",
+    "@storybook/preset-scss": "^1.0.3",
     "@storybook/react": "6.1.21",
     "@storybook/theming": "6.1.21",
     "@types/classnames": "^2.2.10",
@@ -84,7 +85,6 @@
     "@types/react": "^16.14.4",
     "@types/react-datepicker": "^3.1.3",
     "@types/react-dom": "^16.9.11",
-    "@types/react-modal": "^3.10.6",
     "doiuse": "^4.2.0",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.5",
@@ -92,19 +92,19 @@
     "postcss": "^8.1.1",
     "postcss-cli": "^8.1.0",
     "postcss-reporter": "^7.0.1",
-    "postcss-scss": "^3.0.2",
+    "postcss-scss": "^3.0.5",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
     "storybook-addon-designs": "5.4.2",
     "stylelint": "^13.7.2",
     "stylelint-config-prettier": "^8.0.2",
     "stylelint-config-standard": "^20.0.0",
-    "stylelint-scss": "^3.18.0",
+    "stylelint-scss": "^3.19.0",
     "yup": "^0.32.9"
   },
   "peerDependencies": {
     "react": "^16.14.0",
     "react-dom": "^16.14.0"
   },
-  "gitHead": "5a0535dc082f67640534d78d666ccc9e720828b4"
+  "gitHead": "46315e51c611ac84d5b786d497c6d03e12a73333"
 }

package/styles/constants/_sizes.scss

@@ -74,13 +74,14 @@ $sliderThumbShadowSize: 1px;
 $sliderThumbShadowBlur: $grid;
 $sliderFillBorderSize: 1px;
 
-$emptyStateMaxWidth: 960px !important;
 $emptyStateButtonMinWidthNormal: 120px !default;
 $emptyStateButtonMinWidthLarge: 140px !default;
 
 $borderRadiusNotification: 3px;
 
 // Table column widths
-$tableColumnMinWidth: 30;
-$tableColumnWidth: 150;
-$tableColumnMaxWidth: 200;
+$tableColumnMinWidth: 60;
+$tableColumnWidth: 170;
+$tableColumnMaxWidth: 600;
+
+$errorHeight: $grid * 4.75;

package/styles/constants/_typography.scss

@@ -1,12 +1,12 @@
-$fontFamilyHeading: 'Ubuntu', sans-serif !default;
+$fontFamilyHeading: 'Roboto', 'Helvetica', 'Arial', sans-serif !default;
 $fontWeightHeadingLight: 300 !default;
 $fontWeightHeadingRegular: 400 !default;
 $fontWeightHeadingBold: 500 !default;
 
-$fontFamilyText: 'Open Sans', sans-serif !default;
+$fontFamilyText: 'Roboto', 'Helvetica', 'Arial', sans-serif !default;
 $fontWeightTextLight: 300 !default;
 $fontWeightTextRegular: 400 !default;
-$fontWeightTextBold: 600 !default;
+$fontWeightTextBold: 500 !default;
 
 // https://www.figma.com/file/8mVm6LTbp2Z0RaWWjTZoft/%F0%9F%90%9DHIVE?node-id=0%3A136
 $fontSizeH1: 2rem !default;

package/styles/fonts.css

@@ -1,77 +1,41 @@
-/* Generated with https://google-webfonts-helper.herokuapp.com/fonts */
-
-/* ubuntu-300 - latin */
+/* roboto-300 - latin */
 @font-face {
-  font-family: 'Ubuntu';
+  font-family: 'Roboto';
   font-style: normal;
   font-weight: 300;
-  src: url('../assets/ubuntu-v15-latin-300.eot'); /* IE9 Compat Modes */
-  src: local('Ubuntu Light'), local('Ubuntu-Light'), url('../assets/ubuntu-v15-latin-300.eot?#iefix') format('embedded-opentype'),
-    /* IE6-IE8 */ url('../assets/ubuntu-v15-latin-300.woff2') format('woff2'),
-    /* Super Modern Browsers */ url('../assets/ubuntu-v15-latin-300.woff') format('woff'),
-    /* Modern Browsers */ url('../assets/ubuntu-v15-latin-300.ttf') format('truetype'),
-    /* Safari, Android, iOS */ url('../assets/ubuntu-v15-latin-300.svg#Ubuntu') format('svg'); /* Legacy iOS */
-}
-/* ubuntu-regular - latin */
-@font-face {
-  font-family: 'Ubuntu';
-  font-style: normal;
-  font-weight: 400;
-  src: url('../assets/ubuntu-v15-latin-regular.eot'); /* IE9 Compat Modes */
-  src: local('Ubuntu Regular'), local('Ubuntu-Regular'), url('../assets/ubuntu-v15-latin-regular.eot?#iefix') format('embedded-opentype'),
-    /* IE6-IE8 */ url('../assets/ubuntu-v15-latin-regular.woff2') format('woff2'),
-    /* Super Modern Browsers */ url('../assets/ubuntu-v15-latin-regular.woff') format('woff'),
-    /* Modern Browsers */ url('../assets/ubuntu-v15-latin-regular.ttf') format('truetype'),
-    /* Safari, Android, iOS */ url('../assets/ubuntu-v15-latin-regular.svg#Ubuntu') format('svg'); /* Legacy iOS */
-}
-/* ubuntu-500 - latin */
-@font-face {
-  font-family: 'Ubuntu';
-  font-style: normal;
-  font-weight: 500;
-  src: url('../assets/ubuntu-v15-latin-500.eot'); /* IE9 Compat Modes */
-  src: local('Ubuntu Medium'), local('Ubuntu-Medium'), url('../assets/ubuntu-v15-latin-500.eot?#iefix') format('embedded-opentype'),
-    /* IE6-IE8 */ url('../assets/ubuntu-v15-latin-500.woff2') format('woff2'),
-    /* Super Modern Browsers */ url('../assets/ubuntu-v15-latin-500.woff') format('woff'),
-    /* Modern Browsers */ url('../assets/ubuntu-v15-latin-500.ttf') format('truetype'),
-    /* Safari, Android, iOS */ url('../assets/ubuntu-v15-latin-500.svg#Ubuntu') format('svg'); /* Legacy iOS */
+  src: url('../fonts/roboto-v27-latin-300.eot'); /* IE9 Compat Modes */
+  src: local(''),
+  url('../fonts/roboto-v27-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url('../fonts/roboto-v27-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
+  url('../fonts/roboto-v27-latin-300.woff') format('woff'), /* Modern Browsers */
+  url('../fonts/roboto-v27-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
+  url('../fonts/roboto-v27-latin-300.svg#Roboto') format('svg'); /* Legacy iOS */
 }
 
-/* open-sans-300 - latin */
+/* roboto-regular - latin */
 @font-face {
-  font-family: 'Open Sans';
-  font-style: normal;
-  font-weight: 300;
-  src: url('../assets/open-sans-v18-latin-300.eot'); /* IE9 Compat Modes */
-  src: local('Open Sans Light'), local('OpenSans-Light'), url('../assets/open-sans-v18-latin-300.eot?#iefix') format('embedded-opentype'),
-    /* IE6-IE8 */ url('../assets/open-sans-v18-latin-300.woff2') format('woff2'),
-    /* Super Modern Browsers */ url('../assets/open-sans-v18-latin-300.woff') format('woff'),
-    /* Modern Browsers */ url('../assets/open-sans-v18-latin-300.ttf') format('truetype'),
-    /* Safari, Android, iOS */ url('../assets/open-sans-v18-latin-300.svg#OpenSans') format('svg'); /* Legacy iOS */
-}
-/* open-sans-regular - latin */
-@font-face {
-  font-family: 'Open Sans';
+  font-family: 'Roboto';
   font-style: normal;
   font-weight: 400;
-  src: url('../assets/open-sans-v18-latin-regular.eot'); /* IE9 Compat Modes */
-  src: local('Open Sans Regular'), local('OpenSans-Regular'),
-    url('../assets/open-sans-v18-latin-regular.eot?#iefix') format('embedded-opentype'),
-    /* IE6-IE8 */ url('../assets/open-sans-v18-latin-regular.woff2') format('woff2'),
-    /* Super Modern Browsers */ url('../assets/open-sans-v18-latin-regular.woff') format('woff'),
-    /* Modern Browsers */ url('../assets/open-sans-v18-latin-regular.ttf') format('truetype'),
-    /* Safari, Android, iOS */ url('../assets/open-sans-v18-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
+  src: url('../fonts/roboto-v27-latin-regular.eot'); /* IE9 Compat Modes */
+  src: local(''),
+  url('../fonts/roboto-v27-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url('../fonts/roboto-v27-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
+  url('../fonts/roboto-v27-latin-regular.woff') format('woff'), /* Modern Browsers */
+  url('../fonts/roboto-v27-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
+  url('../fonts/roboto-v27-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
 }
-/* open-sans-600 - latin */
+
+/* roboto-500 - latin */
 @font-face {
-  font-family: 'Open Sans';
+  font-family: 'Roboto';
   font-style: normal;
-  font-weight: 600;
-  src: url('../assets/open-sans-v18-latin-600.eot'); /* IE9 Compat Modes */
-  src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'),
-    url('../assets/open-sans-v18-latin-600.eot?#iefix') format('embedded-opentype'),
-    /* IE6-IE8 */ url('../assets/open-sans-v18-latin-600.woff2') format('woff2'),
-    /* Super Modern Browsers */ url('../assets/open-sans-v18-latin-600.woff') format('woff'),
-    /* Modern Browsers */ url('../assets/open-sans-v18-latin-600.ttf') format('truetype'),
-    /* Safari, Android, iOS */ url('../assets/open-sans-v18-latin-600.svg#OpenSans') format('svg'); /* Legacy iOS */
+  font-weight: 500;
+  src: url('../fonts/roboto-v27-latin-500.eot'); /* IE9 Compat Modes */
+  src: local(''),
+  url('../fonts/roboto-v27-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url('../fonts/roboto-v27-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
+  url('../fonts/roboto-v27-latin-500.woff') format('woff'), /* Modern Browsers */
+  url('../fonts/roboto-v27-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
+  url('../fonts/roboto-v27-latin-500.svg#Roboto') format('svg'); /* Legacy iOS */
 }

package/styles/helpers/_a11y.scss

@@ -4,6 +4,10 @@
   box-shadow: inset 0 0 0 c.$outlineWidth c.$colorAccessibilityOutline;
 }
 
+@mixin outlineAround {
+  box-shadow: 0 0 0 c.$outlineWidth c.$colorAccessibilityOutline;
+}
+
 @mixin outlineFormField {
   border-color: c.$colorAccessibilityOutline;
   // Border is also colored with the a11y color. We need to make the total visible outline width c.$outlineWidth, including the border

package/styles/helpers/_error.scss

@@ -0,0 +1,17 @@
+@use '../constants' as c;
+
+@mixin withError {
+  .withError {
+    position: relative;
+    padding-bottom: c.$errorHeight;
+
+    .errorContainer {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      overflow: hidden;
+      height: c.$errorHeight;
+      width: 100%;
+    }
+  }
+}

package/styles/helpers/_index.scss

@@ -1,3 +1,4 @@
 @forward './a11y';
 @forward './input';
 @forward './text';
+@forward './error';