@hazelcast/ui 1.3.3-next.3 → 1.3.3-next.31

package/lib/Toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toggle.js","sourceRoot":"","sources":["../src/Toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAA;AAC1D,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAGlC,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,SAAS,CAAA;AACxC,OAAO,EAAE,IAAI,EAAa,aAAa,EAAE,MAAM,QAAQ,CAAA;AAEvD,OAAO,MAAM,MAAM,sBAAsB,CAAA;AAqBzC,MAAM,CAAC,MAAM,MAAM,GAAoB,CAAC,KAAK,EAAE,EAAE;IAC/C,MAAM,EACJ,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,MAAM,EACN,KAAK,EACL,OAAO,EACP,KAAK,EACL,UAAU,EACV,QAAQ,EACR,SAAS,EACT,cAAc,EACd,WAAW,EAAE,QAAQ,GACtB,GAAG,KAAK,CAAA;IACT,MAAM,EAAE,GAAG,MAAM,EAAE,CAAA;IAEnB,OAAO,CACL,6BAAK,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE,OAAO,IAAI,KAAK,EAAE,CAAC,eAAa,QAAQ;QAE1G,+BACE,IAAI,EAAC,UAAU,EACf,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,CAAC,CAAC,OAAO,EAClB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,kBACJ,CAAC,CAAC,KAAK,sBACH,UAAU,IAAI,aAAa,CAAC,EAAE,CAAC,uBAC9B,KAAK,IAAI,OAAO,CAAC,EAAE,CAAC,GACvC;QAGF,+BACE,SAAS,EAAE,EAAE,CACX;gBACE,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,KAAK;gBACvB,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,QAAQ;aAC5B,EACD,cAAc,CACf,EACD,OAAO,EAAE,EAAE;YAEV,KAAK,IAAI,8BAAM,SAAS,EAAE,MAAM,CAAC,SAAS,IAAG,KAAK,CAAQ;YAE3D,8BAAM,SAAS,EAAE,MAAM,CAAC,WAAW;gBACjC,8BAAM,SAAS,EAAE,MAAM,CAAC,eAAe,IAAG,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAQ,CACnE,CACD;QAEP,UAAU,IAAI,oBAAC,IAAI,IAAC,QAAQ,EAAE,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,CAAC,UAAU,GAAI;QAE3F,oBAAC,KAAK,IAAC,SAAS,QAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,CAAC,cAAc,EAAE,OAAO,EAAE,EAAE,GAAI,CAC5E,CACP,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"Toggle.js","sourceRoot":"","sources":["../src/Toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAA;AAC1D,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAGlC,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,SAAS,CAAA;AACxC,OAAO,EAAE,IAAI,EAAa,aAAa,EAAE,MAAM,QAAQ,CAAA;AAEvD,OAAO,MAAM,MAAM,sBAAsB,CAAA;AAqBzC,MAAM,CAAC,MAAM,MAAM,GAAoB,CAAC,KAAK,EAAE,EAAE;IAC/C,MAAM,EACJ,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,MAAM,EACN,KAAK,EACL,OAAO,EACP,KAAK,EACL,UAAU,EACV,QAAQ,EACR,SAAS,EACT,cAAc,EACd,WAAW,EAAE,QAAQ,GAAG,QAAQ,GACjC,GAAG,KAAK,CAAA;IACT,MAAM,EAAE,GAAG,MAAM,EAAE,CAAA;IAEnB,OAAO,CACL,6BAAK,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE,OAAO,IAAI,KAAK,EAAE,CAAC,eAAa,QAAQ;QAE1G,+BACE,IAAI,EAAC,UAAU,EACf,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,CAAC,CAAC,OAAO,EAClB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,kBACJ,CAAC,CAAC,KAAK,sBACH,UAAU,IAAI,aAAa,CAAC,EAAE,CAAC,uBAC9B,KAAK,IAAI,OAAO,CAAC,EAAE,CAAC,GACvC;QAGF,+BACE,SAAS,EAAE,EAAE,CACX;gBACE,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,KAAK;gBACvB,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,QAAQ;aAC5B,EACD,cAAc,CACf,EACD,OAAO,EAAE,EAAE;YAEV,KAAK,IAAI,CACR,8BAAM,SAAS,EAAE,MAAM,CAAC,SAAS,eAAa,GAAG,QAAQ,QAAQ,IAC9D,KAAK,CACD,CACR;YAED,8BAAM,SAAS,EAAE,MAAM,CAAC,WAAW;gBACjC,8BAAM,SAAS,EAAE,MAAM,CAAC,eAAe,eAAa,GAAG,QAAQ,QAAQ,IACpE,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAClB,CACF,CACD;QAEP,UAAU,IAAI,oBAAC,IAAI,IAAC,QAAQ,EAAE,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,CAAC,UAAU,eAAa,GAAG,QAAQ,aAAa,GAAI;QAEhI,oBAAC,KAAK,iBAAY,GAAG,QAAQ,QAAQ,EAAE,SAAS,QAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,CAAC,cAAc,EAAE,OAAO,EAAE,EAAE,GAAI,CAC5G,CACP,CAAA;AACH,CAAC,CAAA"}

package/lib/Tooltip.d.ts

@@ -8,9 +8,12 @@ export type TooltipProps = {
     id?: string;
     hideTimeoutDuration?: number;
     offset?: number;
+    arrow?: boolean;
+    color?: 'dark' | 'secondary';
     padding?: number;
     placement?: Placement;
     visible?: boolean;
+    className?: string;
     hoverAbleTooltip?: boolean;
     children: (ref: React.Dispatch<React.SetStateAction<HTMLElement | null>>, onMouseEnter?: MouseEventHandler, onMouseLeave?: MouseEventHandler) => ReactNode;
     popperRef?: MutableRefObject<PopperRef | undefined>;

package/lib/Tooltip.js

@@ -22,7 +22,7 @@ const TooltipContext = createContext(null);
  * ### 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, padding = 10, placement = 'top', visible: visibilityOverride, children, popperRef, wordBreak, updateToken, tooltipContainer = 'body', hoverAbleTooltip = true, disabled = false, zIndex = 20, }) => {
+export const Tooltip = ({ id, content, hideTimeoutDuration = 100, offset = 10, padding = 10, placement = 'top', visible: visibilityOverride, children, popperRef, wordBreak, updateToken, tooltipContainer = 'body', hoverAbleTooltip = true, disabled = false, zIndex = 20, arrow = true, color, className, }) => {
     const [isShown, setShown] = useState(false);
     const timeoutRef = useRef(null);
     const context = useContext(TooltipContext);
@@ -40,23 +40,29 @@ export const Tooltip = ({ id, content, hideTimeoutDuration = 100, offset = 10, p
     const [referenceElement, setReferenceElement] = useState(null);
     const [popperElement, setPopperElement] = useState(null);
     const [arrowElement, setArrowElement] = useState(null);
-    const popper = usePopper(referenceElement, popperElement, {
-        placement,
-        modifiers: [
-            {
-                name: 'arrow',
-                options: {
-                    element: arrowElement,
-                    padding,
-                },
-            },
+    const modifiers = useMemo(() => {
+        const result = [
             {
                 name: 'offset',
                 options: {
                     offset: [0, offset],
                 },
             },
-        ],
+        ];
+        if (arrow) {
+            result.push({
+                name: 'arrow',
+                options: {
+                    element: arrowElement,
+                    padding,
+                },
+            });
+        }
+        return result;
+    }, [arrow, padding, offset, arrowElement]);
+    const popper = usePopper(referenceElement, popperElement, {
+        placement,
+        modifiers,
     });
     useImperativeHandle(popperRef, () => popper, [popper]);
     const onMouseEnter = useCallback(() => {
@@ -121,13 +127,13 @@ export const Tooltip = ({ id, content, hideTimeoutDuration = 100, offset = 10, p
             onMouseLeave(e);
         }),
         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", { ...(id && { id }), className: cn(styles.tooltipSr, className), role: "tooltip", "data-test": "tooltip-sr" }, content),
             tooltipPortalContainer &&
                 ReactDOM.createPortal(React.createElement(React.Fragment, null,
                     React.createElement("span", { ref: setPopperElement, className: cn(styles.overlay, {
                             [styles.hidden]: !isTooltipVisible,
-                        }), style: { ...popper.styles.popper, ...{ zIndex: context ? zIndex + 1 : zIndex }, wordBreak }, "data-test": "tooltip-overlay", "aria-hidden": true, ...popper.attributes.popper },
+                        }, color && [styles[color]], className), style: { ...popper.styles.popper, ...{ zIndex: context ? zIndex + 1 : zIndex }, wordBreak }, "data-test": "tooltip-overlay", "aria-hidden": true, ...popper.attributes.popper },
                         content,
-                        React.createElement("span", { ref: setArrowElement, className: styles.arrow, style: popper.styles.arrow, "data-test": "tooltip-arrow", ...popper.attributes.arrow }))), tooltipPortalContainer)))));
+                        arrow && (React.createElement("span", { 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

@@ -9,65 +9,31 @@
 $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 * 3;
-  background: c.$colorNeutralLighter;
-  border: c.$borderWidth solid c.$colorNeutralLight;
-  border-radius: c.$borderRadius;
-  color: c.$colorText;
-  word-break: break-all;
-
-  &.hidden {
-    visibility: hidden;
-
-    // important is needed to override inline style
-    top: -99999px !important;
-    left: -99999px !important;
-  }
-
-  > .arrow {
-    position: absolute;
-    z-index: c.$zIndex100;
-    display: block;
-    width: c.$tooltipArrowSize;
-    height: c.$tooltipArrowSize;
-
-    &::before,
-    &::after {
-      content: '';
-      position: absolute;
-    }
-  }
-
-  &[data-popper-placement^='top'] {
+@mixin arrow($position, $color, $borderColor) {
+  @if $position == bottom {
     > .arrow {
-      bottom: 0;
+      top: 0;
 
       &::before,
       &::after {
         border-left: c.$tooltipArrowSize solid transparent;
         border-right: c.$tooltipArrowSize solid transparent;
-        top: 100%;
+        top: 0;
         left: 50%;
         margin-left: -(c.$tooltipArrowSize);
       }
 
       &::before {
-        border-top: c.$tooltipArrowSize solid c.$colorNeutralLight;
+        border-bottom: c.$tooltipArrowSize solid $color;
+        margin-top: -(c.$tooltipArrowSize);
       }
 
       &::after {
-        border-top: c.$tooltipArrowSize solid c.$colorNeutralLighter;
-        transform: translateY(-($tooltipArrowSize1-3));
+        border-bottom: c.$tooltipArrowSize solid $borderColor;
+        transform: translateY(-($tooltipArrowSize2-3));
       }
     }
-  }
-
-  &[data-popper-placement^='right'] {
+  } @else if $position == right {
     > .arrow {
       left: 0;
 
@@ -81,63 +47,129 @@ $tooltipArrowSize2-3: math.div(c.$tooltipArrowSize, 3) * 2;
       }
 
       &::before {
-        border-right: c.$tooltipArrowSize solid c.$colorNeutralLight;
+        border-right: c.$tooltipArrowSize solid $color;
         margin-left: -(c.$tooltipArrowSize);
       }
 
       &::after {
-        border-right: c.$tooltipArrowSize solid c.$colorNeutralLighter;
+        border-right: c.$tooltipArrowSize solid $borderColor;
         transform: translateX(-($tooltipArrowSize2-3));
       }
     }
-  }
-
-  &[data-popper-placement^='bottom'] {
+  } @else if $position == left {
     > .arrow {
-      top: 0;
+      right: 0;
 
       &::before,
       &::after {
-        border-left: c.$tooltipArrowSize solid transparent;
-        border-right: c.$tooltipArrowSize solid transparent;
-        top: 0;
-        left: 50%;
-        margin-left: -(c.$tooltipArrowSize);
+        border-top: c.$tooltipArrowSize solid transparent;
+        border-bottom: c.$tooltipArrowSize solid transparent;
+        top: 50%;
+        left: 100%;
+        margin-top: -(c.$tooltipArrowSize);
       }
 
       &::before {
-        border-bottom: c.$tooltipArrowSize solid c.$colorNeutralLight;
-        margin-top: -(c.$tooltipArrowSize);
+        border-left: c.$tooltipArrowSize solid $color;
       }
 
       &::after {
-        border-bottom: c.$tooltipArrowSize solid c.$colorNeutralLighter;
-        transform: translateY(-($tooltipArrowSize2-3));
+        border-left: c.$tooltipArrowSize solid $borderColor;
+        transform: translateX(-($tooltipArrowSize1-3));
       }
     }
-  }
-
-  &[data-popper-placement^='left'] {
+  } @else {
     > .arrow {
-      right: 0;
+      bottom: 0;
 
       &::before,
       &::after {
-        border-top: c.$tooltipArrowSize solid transparent;
-        border-bottom: c.$tooltipArrowSize solid transparent;
-        top: 50%;
-        left: 100%;
-        margin-top: -(c.$tooltipArrowSize);
+        border-left: c.$tooltipArrowSize solid transparent;
+        border-right: c.$tooltipArrowSize solid transparent;
+        top: 100%;
+        left: 50%;
+        margin-left: -(c.$tooltipArrowSize);
       }
 
       &::before {
-        border-left: c.$tooltipArrowSize solid c.$colorNeutralLight;
+        border-top: c.$tooltipArrowSize solid $color;
       }
 
       &::after {
-        border-left: c.$tooltipArrowSize solid c.$colorNeutralLighter;
-        transform: translateX(-($tooltipArrowSize1-3));
+        border-top: c.$tooltipArrowSize solid $borderColor;
+        transform: translateY(-($tooltipArrowSize1-3));
       }
     }
   }
 }
+
+@mixin arrowPlacements($color: c.$colorNeutralLight, $borderColor: c.$colorNeutralLighter) {
+  &[data-popper-placement^='top'] {
+    @include arrow(top, $color, $borderColor);
+  }
+
+  &[data-popper-placement^='right'] {
+    @include arrow(right, $color, $borderColor);
+  }
+
+  &[data-popper-placement^='bottom'] {
+    @include arrow(bottom, $color, $borderColor);
+  }
+
+  &[data-popper-placement^='left'] {
+    @include arrow(left, $color, $borderColor);
+  }
+}
+
+.overlay {
+  @include c.typographyBodySmall;
+
+  position: relative;
+  max-width: c.$tooltipMaxWidth;
+  padding: c.$grid * 3;
+  background: c.$colorNeutralLighter;
+  border: c.$borderWidth solid c.$colorNeutralLight;
+  border-radius: c.$borderRadius;
+  color: c.$colorText;
+  word-break: break-all;
+
+  &.hidden {
+    visibility: hidden;
+
+    // important is needed to override inline style
+    top: -99999px !important;
+    left: -99999px !important;
+  }
+
+  &.secondary {
+    border: none;
+    color: c.$colorNeutralWhite;
+    background-color: c.$colorTextSubdued;
+
+    @include arrowPlacements(c.$colorTextSubdued, transparent);
+  }
+
+  &.dark {
+    border: none;
+    color: c.$colorBrandText;
+    background-color: c.$colorBrandAccent;
+
+    @include arrowPlacements(c.$colorBrandAccent, transparent);
+  }
+
+  > .arrow {
+    position: absolute;
+    z-index: c.$zIndex100;
+    display: block;
+    width: c.$tooltipArrowSize;
+    height: c.$tooltipArrowSize;
+
+    &::before,
+    &::after {
+      content: '';
+      position: absolute;
+    }
+  }
+
+  @include arrowPlacements;
+}

package/lib/TruncatedText.d.ts

@@ -1,10 +1,13 @@
 import { FC, ReactText, ReactElement } from 'react';
+import { DataTestProp } from '@hazelcast/helpers';
 import { TooltipProps } from './Tooltip';
-interface TruncatedTextProps {
+interface TruncatedTextProps extends DataTestProp {
     text: ReactText | ((...arg: unknown[]) => string) | ReactElement;
     forceUpdateToken?: ReactText | boolean;
     className?: string;
+    multiline?: boolean;
     tooltipVisible?: boolean;
+    tooltipClassName?: string;
     hoverAbleTooltip?: boolean;
     tooltipPlacement?: TooltipProps['placement'];
 }

package/lib/TruncatedText.js

@@ -5,7 +5,7 @@ import useIsomorphicLayoutEffect from 'react-use/lib/useIsomorphicLayoutEffect';
 import { useUID } from 'react-uid';
 import { Tooltip } from './Tooltip';
 import styles from './TruncatedText.module.scss';
-export const TruncatedText = ({ text, forceUpdateToken, className, tooltipVisible, tooltipPlacement = 'top', hoverAbleTooltip, }) => {
+export const TruncatedText = ({ text, forceUpdateToken, className, tooltipVisible, tooltipPlacement = 'top', hoverAbleTooltip, multiline, tooltipClassName, 'data-test': dataTest, }) => {
     const textRef = useRef(null);
     const [tooltip, setTooltip] = useState();
     const idTooltip = useUID();
@@ -15,9 +15,9 @@ export const TruncatedText = ({ text, forceUpdateToken, className, tooltipVisibl
             return;
         }
         // https://codepen.io/triple-j/pen/wadKQB
-        setTooltip(span.offsetWidth < span.scrollWidth ? text : undefined);
+        setTooltip(span.offsetWidth < span.scrollWidth || span.offsetHeight < span.scrollHeight ? text : undefined);
     }, [text, forceUpdateToken]);
-    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) },
-        React.createElement("span", { "aria-labelledby": tooltip ? idTooltip : undefined }, text)))));
+    return (React.createElement(Tooltip, { id: idTooltip, content: tooltip, visible: tooltipVisible, className: tooltipClassName, placement: tooltipPlacement, updateToken: forceUpdateToken, hoverAbleTooltip: hoverAbleTooltip }, (ref) => (React.createElement("div", { ref: mergeRefs([textRef, ref]), className: cn(styles.truncatedText, { [styles.multiline]: multiline }, className) },
+        React.createElement("span", { "data-test": dataTest, "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,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"}
+{"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;AAGlC,OAAO,EAAE,OAAO,EAAgB,MAAM,WAAW,CAAA;AAEjD,OAAO,MAAM,MAAM,6BAA6B,CAAA;AAchD,MAAM,CAAC,MAAM,aAAa,GAA2B,CAAC,EACpD,IAAI,EACJ,gBAAgB,EAChB,SAAS,EACT,cAAc,EACd,gBAAgB,GAAG,KAAK,EACxB,gBAAgB,EAChB,SAAS,EACT,gBAAgB,EAChB,WAAW,EAAE,QAAQ,GACtB,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,IAAI,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAA;IAC7G,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,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,EAAE,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE,SAAS,EAAE,EAAE,SAAS,CAAC;QACpH,2CAAiB,QAAQ,qBAAmB,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,IACxE,IAAI,CACA,CACH,CACP,CACO,CACX,CAAA;AACH,CAAC,CAAA"}

package/lib/TruncatedText.module.scss

@@ -3,3 +3,7 @@
 .truncatedText {
   @include h.overflowEllipsis;
 }
+
+.multiline {
+  @include h.multilineOverflowEllipsis;
+}

package/lib/hooks/useOnClickOutside.d.ts

@@ -1,5 +1,5 @@
 type RefElement = HTMLElement | null | undefined;
-export declare const containsElement: (target: RefElement, element: Node) => boolean | undefined;
+export declare const containsElement: (target: RefElement, element: EventTarget | HTMLElement | null | undefined) => boolean | undefined;
 export declare const useOnClickOutside: (active: boolean, opts: {
     target: RefElement;
     handler: (event: Event) => void;

package/lib/hooks/useOnClickOutside.js

@@ -1,6 +1,12 @@
 import { useCallback, useEffect } from 'react';
 import { useRefValue } from './useRefValue';
-export const containsElement = (target, element) => target === null || target === void 0 ? void 0 : target.contains(element);
+export const containsElement = (target, element) => {
+    if (isNode(element)) {
+        return target === null || target === void 0 ? void 0 : target.contains(element);
+    }
+    return false;
+};
+const isNode = (element) => element != null && 'nodeType' in element;
 export const useOnClickOutside = (active, opts) => {
     const { target, handler, excludeElement } = opts;
     const getOutsideClickHandler = useRefValue(handler);

package/lib/hooks/useOnClickOutside.js.map

@@ -1 +1 @@
-{"version":3,"file":"useOnClickOutside.js","sourceRoot":"","sources":["../../src/hooks/useOnClickOutside.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAC9C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAI3C,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,MAAkB,EAAE,OAAa,EAAE,EAAE,CAAC,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,QAAQ,CAAC,OAAO,CAAC,CAAA;AAE/F,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAC/B,MAAe,EACf,IAA0F,EAC1F,EAAE;IACF,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,cAAc,EAAE,GAAG,IAAI,CAAA;IAChD,MAAM,sBAAsB,GAAG,WAAW,CAAC,OAAO,CAAC,CAAA;IAEnD,MAAM,QAAQ,GAAG,WAAW,CAC1B,CAAC,KAAY,EAAE,EAAE;QACf,MAAM,OAAO,GAAG,KAAK,CAAC,MAAc,CAAA;QAEpC,IAAI,CAAC,eAAe,CAAC,MAAM,EAAE,OAAO,CAAC,IAAI,CAAC,eAAe,CAAC,cAAc,EAAE,OAAO,CAAC,EAAE;YAClF,sBAAsB,EAAE,CAAC,KAAK,CAAC,CAAA;SAChC;IACH,CAAC,EACD,CAAC,MAAM,EAAE,cAAc,EAAE,sBAAsB,CAAC,CACjD,CAAA;IAED,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,MAAM,EAAE;YACV,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAA;YAChD,QAAQ,CAAC,gBAAgB,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAA;SAClD;aAAM;YACL,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAA;YACnD,QAAQ,CAAC,mBAAmB,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAA;SACrD;QAED,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAA;YACnD,QAAQ,CAAC,mBAAmB,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAA;QACtD,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC,CAAA;AACxB,CAAC,CAAA"}
+{"version":3,"file":"useOnClickOutside.js","sourceRoot":"","sources":["../../src/hooks/useOnClickOutside.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAE9C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAI3C,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,MAAkB,EAAE,OAAqD,EAAE,EAAE;IAC3G,IAAI,MAAM,CAAC,OAAO,CAAC,EAAE;QACnB,OAAO,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,QAAQ,CAAC,OAAO,CAAC,CAAA;KACjC;IAED,OAAO,KAAK,CAAA;AACd,CAAC,CAAA;AAED,MAAM,MAAM,GAAG,CAAC,OAAuC,EAAmB,EAAE,CAAC,OAAO,IAAI,IAAI,IAAI,UAAU,IAAI,OAAO,CAAA;AAErH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAC/B,MAAe,EACf,IAA0F,EAC1F,EAAE;IACF,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,cAAc,EAAE,GAAG,IAAI,CAAA;IAChD,MAAM,sBAAsB,GAAG,WAAW,CAAC,OAAO,CAAC,CAAA;IAEnD,MAAM,QAAQ,GAAG,WAAW,CAC1B,CAAC,KAAY,EAAE,EAAE;QACf,MAAM,OAAO,GAAG,KAAK,CAAC,MAAM,CAAA;QAE5B,IAAI,CAAC,eAAe,CAAC,MAAM,EAAE,OAAO,CAAC,IAAI,CAAC,eAAe,CAAC,cAAc,EAAE,OAAO,CAAC,EAAE;YAClF,sBAAsB,EAAE,CAAC,KAAK,CAAC,CAAA;SAChC;IACH,CAAC,EACD,CAAC,MAAM,EAAE,cAAc,EAAE,sBAAsB,CAAC,CACjD,CAAA;IAED,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,MAAM,EAAE;YACV,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAA;YAChD,QAAQ,CAAC,gBAAgB,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAA;SAClD;aAAM;YACL,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAA;YACnD,QAAQ,CAAC,mBAAmB,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAA;SACrD;QAED,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAA;YACnD,QAAQ,CAAC,mBAAmB,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAA;QACtD,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC,CAAA;AACxB,CAAC,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hazelcast/ui",
-  "version": "1.3.3-next.3+8237d83",
+  "version": "1.3.3-next.31+96f6f92",
   "description": "Hazelcast design system components",
   "author": "",
   "homepage": "https://github.com/hazelcast/frontend-shared#readme",
@@ -51,8 +51,9 @@
     "@headlessui/react": "^1.4.2",
     "@icons-pack/react-simple-icons": "^9.3.0",
     "@popperjs/core": "^2.11.7",
+    "@tanstack/react-table": "^8.20.5",
+    "@testing-library/react-hooks": "8.0.1",
     "@types/react-modal": "3.16.0",
-    "@types/react-table": "^7.7.14",
     "classnames": "^2.3.2",
     "date-fns": "^2.29.3",
     "dequal": "^2.0.3",
@@ -68,13 +69,13 @@
     "react-resize-aware": "3.1.1",
     "react-select": "^5.8.0",
     "react-simple-timefield": "^3.3.1",
-    "react-table": "^7.8.0",
     "react-uid": "^2.3.2",
     "react-use": "^17.4.0",
-    "use-deep-compare": "^1.1.0"
+    "use-deep-compare": "^1.1.0",
+    "use-persisted-state": "^0.3.3"
   },
   "devDependencies": {
-    "@hazelcast/test-helpers": "^1.3.2",
+    "@hazelcast/test-helpers": "1.3.3-next.20",
     "@storybook/addon-docs": "^6.5.16",
     "@storybook/addons": "^6.5.16",
     "@storybook/builder-webpack5": "^6.5.16",
@@ -82,38 +83,43 @@
     "@storybook/preset-scss": "^1.0.3",
     "@storybook/react": "^6.5.16",
     "@storybook/theming": "^6.5.16",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.5.0",
+    "@testing-library/react": "^12.1.5",
+    "@testing-library/user-event": "^14.5.2",
     "@types/classnames": "^2.3.1",
     "@types/enzyme": "^3.10.12",
     "@types/jest-axe": "^3.5.3",
     "@types/react": "^17.0.45",
     "@types/react-datepicker": "^4.3.2",
     "@types/react-dom": "^17.0.17",
-    "@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
+    "@types/use-persisted-state": "^0.3.4",
     "babel-loader": "^9.1.2",
-    "doiuse": "^4.4.1",
-    "enzyme": "^3.11.0",
+    "doiuse": "^6.0.3",
     "jest-axe": "^8.0.0",
-    "loki": "^0.34.0",
-    "postcss": "^8.4.23",
-    "postcss-cli": "^9.1.0",
-    "postcss-reporter": "^7.0.5",
-    "postcss-scss": "^4.0.6",
+    "loki": "^0.35.1",
+    "postcss": "^8.4.47",
+    "postcss-cli": "^11.0.0",
+    "postcss-reporter": "^7.1.0",
+    "postcss-scss": "^4.0.9",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "storybook-addon-designs": "^6.3.1",
-    "stylelint": "^15.6.0",
-    "stylelint-config-standard": "^33.0.0",
-    "stylelint-config-standard-scss": "^9.0.0",
-    "stylelint-prettier": "^3.0.0",
-    "stylelint-scss": "^4.6.0",
-    "webpack": "^5.81.0",
+    "stylelint": "^16.9.0",
+    "stylelint-config-standard": "^36.0.1",
+    "stylelint-config-standard-scss": "^13.1.0",
+    "stylelint-prettier": "^5.0.2",
+    "stylelint-scss": "^6.7.0",
+    "webpack": "^5.95.0",
     "yup": "^0.32.11"
   },
   "peerDependencies": {
+    "@types/lodash": "^4.17.13",
     "@types/react": "^17 || ^18",
     "@types/react-dom": "^17 || ^18",
+    "lodash": "^4.17.21",
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "8237d835b6af6421bcf3e4e6d57403485afac1ff"
+  "gitHead": "96f6f92c42110f2708a0e2cd3e3cee886b13630b"
 }

package/styles/constants/_colors.scss

@@ -1,30 +1,54 @@
-// https://zeroheight.com/11d0e6dac/p/594529--colors
+// https://www.figma.com/design/uGTDLFJEVy4dCNIhlmTPRw/%F0%9F%90%9D-HIVE-3.0?node-id=1061-4605&p=f&t=7sJDCVUY4O5jNXma-0
 $colorPrimaryLight: #2d7de4 !default;
 $colorPrimary: #2160c0 !default;
 $colorPrimaryDark: #003b87 !default;
+
 $colorNeutralWhite: #fff !default;
-$colorNeutralLighter: #fafafa !default;
-$colorNeutralLight: #b7c1cb !default;
+
+$colorNeutralGray: #e9f0f9 !default;
+$colorNeutralGrayDarker: #ccdff5 !default;
+
 $colorNeutral: #dbdbdb !default;
+$colorNeutralLight: #b7c1cb !default;
+$colorNeutralLighter: #fafafa !default;
+
 $colorSuccess: #85da66 !default;
 $colorSuccessLight: #d5f0d1 !default;
-$colorSuccessDark: darken($colorSuccess, 10%) !default;
+$colorSuccessDark: #64d03c !default;
+$colorSuccessDarkest: #3b7044 !default;
+
 $colorInfo: #76e7e7 !default;
 $colorInfoLight: #d0f4f8 !default;
-$colorInfoDark: darken($colorInfo, 10%) !default;
+$colorInfoDark: #4adfdf !default;
+$colorInfoDarkest: #006585 !default;
+
 $colorWarning: #ffec44 !default;
 $colorWarningLight: #f9f6c7 !default;
-$colorWarningDark: darken($colorWarning, 15%) !default;
+$colorWarningDark: #f6dd00 !default;
+$colorWarningDarkest: #8b5d00 !default;
+
 $colorError: #dc084b !default;
 $colorErrorLight: #efb1c9 !default;
-$colorErrorDark: darken($colorError, 10%) !default;
+$colorErrorDark: #8f001d !default;
+
 $colorText: #061827 !default;
 $colorTextSecondary: #707482 !default;
-$colorTextSubdued: #69707d !default;
+$colorTextSubdued: $colorTextSecondary !default;
+
 $colorOverlayBackground: #f0f6ff !default;
 $colorAccessibilityOutline: #74f !default;
+
 $colorBrand: #00bac6 !default;
-$colorShadow: rgb(53 61 73 / 20%) !default;
-$colorMenuDark: #333 !default;
-$authPrimary: #c6ff3a !default;
-$authSecondary: #0b2b39 !default;
+$colorBrandText: #10a4b3 !default;
+$colorShadow: $colorNeutral !default;
+
+$colorMenuDark: $colorText !default;
+$colorAuthSecondary: #0b2b39 !default;
+
+$colorBrandPrimary: #c6ff3a !default;
+$colorBrandSecondary: #061727 !default;
+$colorBrandAccent: #122d45 !default;
+$colorBrandOcean: #0080a9 !default;
+$colorBrandRaspberry: #c91268 !default;
+$colorBrandCarrot: #f5911e !default;
+$colorBrandBlueberry: #0019fe !default;

package/styles/constants/_typography.scss

@@ -44,13 +44,6 @@ $lineHeightBodyTiny: normal !default;
   @return '';
 }
 
-@mixin typographyH1Hero($override: false) {
-  font-weight: $fontWeightHeadingRegular #{override($override)};
-  font-size: $fontSizeH4 #{override($override)};
-  letter-spacing: $letterSpacingH4 #{override($override)};
-  line-height: $lineHeightH4 #{override($override)};
-}
-
 @mixin typographyH1($override: false) {
   font-weight: $fontWeightHeadingRegular #{override($override)};
   font-size: $fontSizeH1 #{override($override)};

package/styles/helpers/_a11y.scss

@@ -36,3 +36,11 @@
   top: 1px;
   left: 1px;
 }
+
+@mixin focusOutlineSimple() {
+  &:focus-within {
+    outline: none;
+
+    @include outlineSimple;
+  }
+}