@hazelcast/ui 1.3.3-next.0 → 1.3.3-next.10

package/lib/Tooltip.d.ts

@@ -8,6 +8,8 @@ export type TooltipProps = {
     id?: string;
     hideTimeoutDuration?: number;
     offset?: number;
+    arrow?: boolean;
+    color?: 'dark';
     padding?: number;
     placement?: Placement;
     visible?: boolean;

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, }) => {
     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(() => {
@@ -83,7 +89,7 @@ export const Tooltip = ({ id, content, hideTimeoutDuration = 100, offset = 10, p
         clearHideTimeout,
     }), [onMouseLeave, clearHideTimeout, popperElement, referenceElement]);
     // Makes sure "visible" prop can override local "isShown" state
-    const isTooltipVisible = !disabled && (visibilityOverride || isShown);
+    const isTooltipVisible = typeof visibilityOverride === 'boolean' ? visibilityOverride : !disabled && isShown;
     // Update the tooltip's position (useful when resizing table columns)
     useLayoutEffect(() => {
         var _a;
@@ -125,9 +131,10 @@ export const Tooltip = ({ id, content, hideTimeoutDuration = 100, offset = 10, p
             tooltipPortalContainer &&
                 ReactDOM.createPortal(React.createElement(React.Fragment, null,
                     React.createElement("span", { ref: setPopperElement, className: cn(styles.overlay, {
+                            [styles.dark]: color === 'dark',
                             [styles.hidden]: !isTooltipVisible,
                         }), 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,121 @@ $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;
+  }
+
+  &.dark {
+    border: none;
+    color: c.$brandColorText;
+    background-color: c.$brandAccent;
+
+    @include arrowPlacements(c.$brandAccent, 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

@@ -4,6 +4,7 @@ interface TruncatedTextProps {
     text: ReactText | ((...arg: unknown[]) => string) | ReactElement;
     forceUpdateToken?: ReactText | boolean;
     className?: string;
+    multiline?: boolean;
     tooltipVisible?: boolean;
     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, }) => {
     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) },
+    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, { [styles.multiline]: multiline }, 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,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;AAElC,OAAO,EAAE,OAAO,EAAgB,MAAM,WAAW,CAAA;AAEjD,OAAO,MAAM,MAAM,6BAA6B,CAAA;AAahD,MAAM,CAAC,MAAM,aAAa,GAA2B,CAAC,EACpD,IAAI,EACJ,gBAAgB,EAChB,SAAS,EACT,cAAc,EACd,gBAAgB,GAAG,KAAK,EACxB,gBAAgB,EAChB,SAAS,GACV,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,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,iDAAuB,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,IAAG,IAAI,CAAQ,CACjE,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hazelcast/ui",
-  "version": "1.3.3-next.0+d13eb58",
+  "version": "1.3.3-next.10+6ad2c91",
   "description": "Hazelcast design system components",
   "author": "",
   "homepage": "https://github.com/hazelcast/frontend-shared#readme",
@@ -51,6 +51,10 @@
     "@headlessui/react": "^1.4.2",
     "@icons-pack/react-simple-icons": "^9.3.0",
     "@popperjs/core": "^2.11.7",
+    "@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/react-modal": "3.16.0",
     "@types/react-table": "^7.7.14",
     "classnames": "^2.3.2",
@@ -71,7 +75,8 @@
     "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",
@@ -88,6 +93,7 @@
     "@types/react": "^17.0.45",
     "@types/react-datepicker": "^4.3.2",
     "@types/react-dom": "^17.0.17",
+    "@types/use-persisted-state": "^0.3.4",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
     "babel-loader": "^9.1.2",
     "doiuse": "^4.4.1",
@@ -115,5 +121,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "d13eb5846b094111b893385b63291b35a78b7439"
+  "gitHead": "6ad2c91c89244818645b530927b4bfb51a57ebd7"
 }

package/styles/constants/_colors.scss

@@ -21,10 +21,14 @@ $colorErrorDark: darken($colorError, 10%) !default;
 $colorText: #061827 !default;
 $colorTextSecondary: #707482 !default;
 $colorTextSubdued: #69707d !default;
+$brandColorText: #10a4b3 !default;
 $colorOverlayBackground: #f0f6ff !default;
 $colorAccessibilityOutline: #74f !default;
 $colorBrand: #00bac6 !default;
 $colorShadow: rgb(53 61 73 / 20%) !default;
 $colorMenuDark: #333 !default;
-$authPrimary: #c6ff3a !default;
+$brandPrimary: #c6ff3a !default;
+$authPrimary: $brandPrimary !default;
 $authSecondary: #0b2b39 !default;
+$brandSecondary: #061727 !default;
+$brandAccent: #122d45 !default;

package/styles/helpers/_a11y.scss

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

package/styles/helpers/_text.scss

@@ -3,3 +3,12 @@
   overflow: hidden;
   text-overflow: ellipsis;
 }
+
+@mixin multilineOverflowEllipsis {
+  @supports (-webkit-line-clamp: 2) {
+    white-space: normal;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+  }
+}