@hazelcast/ui 1.1.1 → 1.3.1-next.0

package/lib/Toggle.module.scss

@@ -1,34 +1,40 @@
 @use '../styles/constants' as c;
 @use '../styles/helpers' as h;
+@use 'sass:math';
 
-$h: c.$grid * 6;
-$w: c.$grid * 15;
+$height: c.$grid * 6;
+$width: c.$grid * 15;
 $labelMargin: c.$grid * 2.5;
 /* doiuse-disable calc */
-$trackBr: calc(#{$h} - #{c.$borderWidth * 2});
+$trackBr: calc(#{$height} - #{c.$borderWidth * 2});
 /* doiuse-enable calc */
 $trackBgOn: c.$colorSuccessLight;
 $trackBgOff: c.$colorNeutral;
 $knobBgOn: c.$colorNeutralWhite;
 $knobBgOff: c.$colorNeutralLighter;
 $knobRadius: c.$grid * 5;
-$knobHorizontalOffset: c.$outlineWidth;
+/* stylelint-disable  length-zero-no-unit */
+$knobHorizontalOffset: math.max(c.$outlineWidth - c.$borderWidth, 0px);
+/* stylelint-enable */
 
 @keyframes switchOn {
   from {
     opacity: 0;
-    transform: translateY(-50%) translateX(-100%);
+    transform: translateY(-50%) translateX(100%);
   }
+
   to {
     opacity: 1;
     transform: translateY(-50%);
   }
 }
+
 @keyframes switchOff {
   from {
     opacity: 0;
-    transform: translateY(-50%) translateX(100%);
+    transform: translateY(-50%) translateX(-100%);
   }
+
   to {
     opacity: 1;
     transform: translateY(-50%);
@@ -70,8 +76,8 @@ $knobHorizontalOffset: c.$outlineWidth;
   // the `track` (default off state)
   .toggleTrack {
     display: inline-block;
-    height: $h;
-    width: $w;
+    height: $height;
+    width: $width;
     background: $trackBgOff;
     border-radius: $trackBr;
     position: relative;
@@ -117,16 +123,16 @@ $knobHorizontalOffset: c.$outlineWidth;
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
-    right: $knobHorizontalOffset;
+    /* doiuse-disable calc */
+    right: calc(#{$width} - #{c.$borderWidth * 2} - #{$knobRadius} - #{$knobHorizontalOffset});
+    /* doiuse-enable calc */
     transition: right c.$transitionTimeMedium ease-in;
   }
 
   // knob ON state
   input:checked + label .toggleTrack::before {
     background: $knobBgOn;
-    /* doiuse-disable calc */
-    right: calc(#{$w - $knobRadius} - #{2 * $knobHorizontalOffset});
-    /* doiuse-enable calc */
+    right: $knobHorizontalOffset;
   }
 
   .toggleTrackText {
@@ -138,20 +144,18 @@ $knobHorizontalOffset: c.$outlineWidth;
   // the "OFF" text
   input:not(:checked) + label .toggleTrackText {
     animation: switchOff c.$transitionTimeMedium ease-in;
-    right: auto;
-    left: c.$grid * 1.5;
+    right: c.$grid * 2;
+    left: auto;
     color: c.$colorTextSecondary;
   }
 
   // the "ON" text
   input:checked + label .toggleTrackText {
     animation: switchOn c.$transitionTimeMedium ease-in;
-    right: c.$grid * 2;
-    left: auto;
+    right: auto;
+    left: c.$grid * 1.5;
     color: c.$colorNeutralWhite;
   }
 }
 
-.errorContainer {
-  margin-top: c.$grid;
-}
+@include h.withError;

package/lib/ToggleFormik.js

@@ -7,6 +7,6 @@ export const ToggleFormik = ({ name, validate, ...props }) => {
         name,
         validate,
     });
-    return React.createElement(Toggle, Object.assign({}, props, { name: name, checked: field.value, onChange: field.onChange, onBlur: field.onBlur, error: getFieldError(meta) }));
+    return React.createElement(Toggle, { ...props, name: name, checked: field.value, onChange: field.onChange, onBlur: field.onBlur, error: getFieldError(meta) });
 };
 //# sourceMappingURL=ToggleFormik.js.map

package/lib/ToggleFormik.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleFormik.js","sourceRoot":"","sources":["../src/ToggleFormik.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuB,MAAM,OAAO,CAAA;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAA;AACjC,OAAO,EAAyB,aAAa,EAAE,MAAM,gBAAgB,CAAA;AAGrE,OAAO,EAAE,MAAM,EAAoB,MAAM,UAAU,CAAA;AAOnD,MAAM,CAAC,MAAM,YAAY,GAAG,CAAmB,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAwB,EAAgB,EAAE;IACjH,MAAM,CAAC,KAAK,EAAE,IAAI,CAAC,GAAG,QAAQ,CAAU;QACtC,IAAI;QACJ,QAAQ;KACT,CAAC,CAAA;IAEF,OAAO,oBAAC,MAAM,oBAAK,KAAK,IAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,CAAC,KAAK,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,CAAC,MAAM,EAAE,KAAK,EAAE,aAAa,CAAC,IAAI,CAAC,IAAI,CAAA;AAC5I,CAAC,CAAA"}
+{"version":3,"file":"ToggleFormik.js","sourceRoot":"","sources":["../src/ToggleFormik.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuB,MAAM,OAAO,CAAA;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAA;AACjC,OAAO,EAAyB,aAAa,EAAE,MAAM,gBAAgB,CAAA;AAGrE,OAAO,EAAE,MAAM,EAAoB,MAAM,UAAU,CAAA;AAOnD,MAAM,CAAC,MAAM,YAAY,GAAG,CAAmB,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAwB,EAAgB,EAAE;IACjH,MAAM,CAAC,KAAK,EAAE,IAAI,CAAC,GAAG,QAAQ,CAAU;QACtC,IAAI;QACJ,QAAQ;KACT,CAAC,CAAA;IAEF,OAAO,oBAAC,MAAM,OAAK,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,CAAC,KAAK,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,CAAC,MAAM,EAAE,KAAK,EAAE,aAAa,CAAC,IAAI,CAAC,GAAI,CAAA;AAC5I,CAAC,CAAA"}

package/lib/Tooltip.d.ts

@@ -1,16 +1,21 @@
-import React, { FC, ReactNode, MutableRefObject } from 'react';
+import React, { FC, ReactNode, MutableRefObject, ReactText, MouseEventHandler } from 'react';
 import { Placement } from '@popperjs/core';
 import { usePopper } from 'react-popper';
+export declare type TooltipContainer = 'body' | 'referenceElement' | HTMLElement;
 export declare type PopperRef = ReturnType<typeof usePopper>;
 export declare type TooltipProps = {
     content: ReactNode;
     id: string;
     hideTimeoutDuration?: number;
     offset?: number;
+    padding?: number;
     placement?: Placement;
     visible?: boolean;
-    children: (ref: React.Dispatch<React.SetStateAction<HTMLElement | null>>) => ReactNode;
+    hoverAbleTooltip?: boolean;
+    children: (ref: React.Dispatch<React.SetStateAction<HTMLElement | null>>, onMouseEnter?: MouseEventHandler<Element>, onMouseLeave?: MouseEventHandler<Element>) => ReactNode;
     popperRef?: MutableRefObject<PopperRef | undefined>;
+    updateToken?: ReactText | boolean;
+    tooltipContainer?: TooltipContainer;
 };
 /**
  * ### Purpose
@@ -22,6 +27,8 @@ export declare type TooltipProps = {
  * - 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.

package/lib/Tooltip.js

@@ -1,7 +1,22 @@
-import React, { useCallback, useEffect, useState, useImperativeHandle } from 'react';
+import React, { useCallback, useState, useImperativeHandle, useLayoutEffect, createContext, useContext, useMemo, useRef, useEffect, } from 'react';
+import ReactDOM from 'react-dom';
 import { usePopper } from 'react-popper';
 import cn from 'classnames';
+import { containsElement } from './hooks';
+import { canUseDOM } from './utils/ssr';
 import styles from './Tooltip.module.scss';
+const tooltipZIndex = 20;
+const TooltipContext = createContext(null);
+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,13 +27,23 @@ 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', hoverAbleTooltip = true, }) => {
     const [isShown, setShown] = useState(false);
-    const [hideTimeout, setHideTimeout] = useState(null);
+    const timeoutRef = useRef(null);
+    const context = useContext(TooltipContext);
+    const clearHideTimeout = useCallback(() => {
+        const timeoutId = timeoutRef.current;
+        context === null || context === void 0 ? void 0 : context.clearHideTimeout();
+        if (timeoutId !== null) {
+            clearTimeout(timeoutId);
+        }
+    }, [context]);
     /*
      * We're using useState instead of useRef because react-popper package has some issues with useRef:
      * https://github.com/popperjs/react-popper/issues/241#issuecomment-591411605
@@ -33,6 +58,7 @@ export const Tooltip = ({ id, content, hideTimeoutDuration = 100, offset = 10, p
                 name: 'arrow',
                 options: {
                     element: arrowElement,
+                    padding,
                 },
             },
             {
@@ -45,40 +71,74 @@ export const Tooltip = ({ id, content, hideTimeoutDuration = 100, offset = 10, p
     });
     useImperativeHandle(popperRef, () => popper, [popper]);
     const onMouseEnter = useCallback(() => {
-        if (hideTimeout !== null) {
-            clearTimeout(hideTimeout);
-        }
+        clearHideTimeout();
         setShown(true);
-    }, [hideTimeout]);
-    const onMouseLeave = useCallback(() => {
-        setHideTimeout(setTimeout(() => setShown(false), hideTimeoutDuration));
-    }, [hideTimeoutDuration]);
+    }, [clearHideTimeout]);
+    const onMouseLeave = useCallback((event) => {
+        const e = event;
+        const { relatedTarget } = e !== null && e !== void 0 ? e : {};
+        timeoutRef.current = setTimeout(() => {
+            if (relatedTarget) {
+                if (!containsElement(context === null || context === void 0 ? void 0 : context.referenceElement, relatedTarget) &&
+                    !containsElement(context === null || context === void 0 ? void 0 : context.popperElement, relatedTarget)) {
+                    context === null || context === void 0 ? void 0 : context.hide();
+                }
+            }
+            setShown(false);
+        }, hideTimeoutDuration);
+    }, [hideTimeoutDuration, context]);
+    const contextValue = useMemo(() => ({
+        popperElement,
+        referenceElement,
+        hide: onMouseLeave,
+        clearHideTimeout,
+    }), [onMouseLeave, clearHideTimeout, popperElement, referenceElement]);
+    // 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]);
     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);
+            clearHideTimeout();
         };
-    }, [referenceElement, popperElement, onMouseEnter]);
+    }, [clearHideTimeout]);
     useEffect(() => {
-        referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.addEventListener('mouseleave', onMouseLeave);
-        popperElement === null || popperElement === void 0 ? void 0 : popperElement.addEventListener('mouseleave', onMouseLeave);
+        referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.addEventListener('mouseenter', onMouseEnter, false);
+        referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.addEventListener('mouseleave', onMouseLeave, false);
         return () => {
+            referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.removeEventListener('mouseenter', onMouseEnter);
             referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.removeEventListener('mouseleave', onMouseLeave);
+        };
+    }, [referenceElement, onMouseEnter, onMouseLeave]);
+    useEffect(() => {
+        if (hoverAbleTooltip) {
+            popperElement === null || popperElement === void 0 ? void 0 : popperElement.addEventListener('mouseenter', onMouseEnter, false);
+            popperElement === null || popperElement === void 0 ? void 0 : popperElement.addEventListener('mouseleave', onMouseLeave, false);
+        }
+        return () => {
+            popperElement === null || popperElement === void 0 ? void 0 : popperElement.removeEventListener('mouseenter', onMouseEnter);
             popperElement === null || popperElement === void 0 ? void 0 : popperElement.removeEventListener('mouseleave', onMouseLeave);
         };
-    }, [referenceElement, popperElement, onMouseLeave]);
-    // Makes sure "visible" prop can override local "isShown" state
-    const isTooltipVisible = visibilityOverride !== null && visibilityOverride !== void 0 ? visibilityOverride : isShown;
-    return (React.createElement(React.Fragment, null,
-        children(setReferenceElement),
+    }, [popperElement, onMouseEnter, onMouseLeave, hoverAbleTooltip]);
+    const tooltipPortalContainer = getTooltipPortalContainer(tooltipContainer, referenceElement);
+    return (React.createElement(TooltipContext.Provider, { value: contextValue },
+        children(setReferenceElement, onMouseEnter, (e) => {
+            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", 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", { ref: setPopperElement, className: cn(styles.overlay, {
+                            [styles.hidden]: !isTooltipVisible,
+                        }), style: { ...popper.styles.popper, ...{ zIndex: context ? tooltipZIndex + 1 : tooltipZIndex } }, "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)))));
 };
 //# 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,4 @@
+@use 'sass:math';
 @use '../styles/constants' as c;
 @use '../styles/helpers' as h;
 
@@ -5,23 +6,27 @@
   @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;
+  word-break: break-all;
 
   &.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,9 +1,12 @@
-import { FC, ReactText } from 'react';
+import { FC, ReactText, ReactElement } from 'react';
+import { TooltipProps } from './Tooltip';
 interface TruncatedTextProps {
-    text: ReactText | ((...arg: unknown[]) => string);
-    forceUpdateToken?: ReactText;
+    text: ReactText | ((...arg: unknown[]) => string) | ReactElement;
+    forceUpdateToken?: ReactText | boolean;
     className?: string;
     tooltipVisible?: boolean;
+    hoverAbleTooltip?: boolean;
+    tooltipPlacement?: TooltipProps['placement'];
 }
 export declare const TruncatedText: FC<TruncatedTextProps>;
 export {};

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 }) => {
+export const TruncatedText = ({ text, forceUpdateToken, className, tooltipVisible, tooltipPlacement = 'top', hoverAbleTooltip, }) => {
     const textRef = useRef(null);
     const [tooltip, setTooltip] = useState();
     const idTooltip = useUID();
@@ -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, 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)))));
 };
 //# 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,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/lib/hooks/index.d.ts

@@ -0,0 +1,5 @@
+export { useTableCustomizableColumns } from './useTableCustomizableColumns';
+export { useOnClickOutside, containsElement } from './useOnClickOutside';
+export { useIsMounted } from './useIsMounted';
+export { useRefValue } from './useRefValue';
+export { useOpenCloseState } from './useOpenCloseState';

package/lib/hooks/index.js

@@ -0,0 +1,7 @@
+/* export only hooks for external usage */
+export { useTableCustomizableColumns } from './useTableCustomizableColumns';
+export { useOnClickOutside, containsElement } from './useOnClickOutside';
+export { useIsMounted } from './useIsMounted';
+export { useRefValue } from './useRefValue';
+export { useOpenCloseState } from './useOpenCloseState';
+//# 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,OAAO,EAAE,2BAA2B,EAAE,MAAM,+BAA+B,CAAA;AAC3E,OAAO,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAA;AACxE,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA"}

package/lib/hooks/useIsMounted.d.ts

@@ -0,0 +1 @@
+export declare const useIsMounted: () => () => boolean;

package/lib/hooks/useIsMounted.js

@@ -0,0 +1,12 @@
+import { useCallback, useEffect, useRef } from 'react';
+export const useIsMounted = () => {
+    const isMounted = useRef(false);
+    useEffect(() => {
+        isMounted.current = true;
+        return () => {
+            isMounted.current = false;
+        };
+    }, []);
+    return useCallback(() => isMounted.current, []);
+};
+//# sourceMappingURL=useIsMounted.js.map

package/lib/hooks/useIsMounted.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIsMounted.js","sourceRoot":"","sources":["../../src/hooks/useIsMounted.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAEtD,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,EAAE;IAC/B,MAAM,SAAS,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;IAE/B,SAAS,CAAC,GAAG,EAAE;QACb,SAAS,CAAC,OAAO,GAAG,IAAI,CAAA;QAExB,OAAO,GAAG,EAAE;YACV,SAAS,CAAC,OAAO,GAAG,KAAK,CAAA;QAC3B,CAAC,CAAA;IACH,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,OAAO,WAAW,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,OAAO,EAAE,EAAE,CAAC,CAAA;AACjD,CAAC,CAAA"}

package/lib/hooks/useOnClickOutside.d.ts

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

package/lib/hooks/useOnClickOutside.js

@@ -0,0 +1,24 @@
+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 useOnClickOutside = (active, opts) => {
+    const { target, handler, excludeElement } = opts;
+    const getOutsideClickHandler = useRefValue(handler);
+    const listener = useCallback((event) => {
+        const element = event.target;
+        if (!containsElement(target, element) && !containsElement(excludeElement, element)) {
+            getOutsideClickHandler()(event);
+        }
+    }, [target, excludeElement, getOutsideClickHandler]);
+    useEffect(() => {
+        if (active) {
+            document.addEventListener('mousedown', listener);
+            document.addEventListener('touchstart', listener);
+        }
+        return () => {
+            document.removeEventListener('mousedown', listener);
+            document.removeEventListener('touchstart', listener);
+        };
+    }, [listener, active]);
+};
+//# sourceMappingURL=useOnClickOutside.js.map

package/lib/hooks/useOnClickOutside.js.map

@@ -0,0 +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;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/lib/hooks/useOpenCloseState.d.ts

@@ -0,0 +1,6 @@
+export declare const useOpenCloseState: (isOpenByDefault?: boolean) => {
+    isOpen: boolean;
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
+};

package/lib/hooks/useOpenCloseState.js

@@ -0,0 +1,14 @@
+import { useState, useCallback } from 'react';
+export const useOpenCloseState = (isOpenByDefault = false) => {
+    const [isOpen, setIsOpen] = useState(isOpenByDefault);
+    const open = useCallback(() => setIsOpen(true), []);
+    const close = useCallback(() => setIsOpen(false), []);
+    const toggle = useCallback(() => setIsOpen((currentState) => !currentState), []);
+    return {
+        isOpen,
+        open,
+        close,
+        toggle,
+    };
+};
+//# sourceMappingURL=useOpenCloseState.js.map

package/lib/hooks/useOpenCloseState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOpenCloseState.js","sourceRoot":"","sources":["../../src/hooks/useOpenCloseState.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AAE7C,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,eAAe,GAAG,KAAK,EAAE,EAAE;IAC3D,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,eAAe,CAAC,CAAA;IAErD,MAAM,IAAI,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC,CAAA;IACnD,MAAM,KAAK,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,EAAE,CAAC,CAAA;IACrD,MAAM,MAAM,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC,YAAY,EAAE,EAAE,CAAC,CAAC,YAAY,CAAC,EAAE,EAAE,CAAC,CAAA;IAEhF,OAAO;QACL,MAAM;QACN,IAAI;QACJ,KAAK;QACL,MAAM;KACP,CAAA;AACH,CAAC,CAAA"}

package/lib/hooks/usePrevious.d.ts

@@ -0,0 +1 @@
+export declare const usePrevious: <T>(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,CAAI,KAAQ,EAAE,EAAE;IACzC,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/useRefValue.d.ts

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

package/lib/hooks/useRefValue.js

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

package/lib/hooks/useRefValue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRefValue.js","sourceRoot":"","sources":["../../src/hooks/useRefValue.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAEtD,MAAM,CAAC,MAAM,WAAW,GAAG,CAAI,KAAQ,EAAE,EAAE;IACzC,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,WAAW,CAAC,GAAG,EAAE,CAAC,GAAG,CAAC,OAAO,EAAE,EAAE,CAAC,CAAA;AAC3C,CAAC,CAAA"}

package/lib/hooks/useTableCustomizableColumns.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { CheckableSelectProps } from '../Select/CheckableSelectField';
+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,EAAE,MAAM,WAAW,CAAA;AAIhD,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"}