@hazelcast/ui 3.0.13 → 4.0.1-canary.10

package/lib/components/Tooltip.d.ts

@@ -1,34 +1,47 @@
-import { FC, ReactNode, CSSProperties, ReactElement } from 'react';
-import { Placement, ReferenceType } from '@floating-ui/react';
+import React, { CSSProperties, ReactElement, ReactNode } from 'react';
+export type TooltipSide = 'top' | 'right' | 'bottom' | 'left';
+export type TooltipAlign = 'start' | 'center' | 'end';
 export type TooltipProps = {
+    /** The trigger element */
+    children: ReactElement;
+    /** Content displayed inside the tooltip */
     content: ReactNode;
-    id?: string;
-    offset?: number;
+    /** Preferred side relative to the trigger */
+    side?: TooltipSide;
+    /** Alignment along the side axis */
+    align?: TooltipAlign;
+    /** Distance in pixels between trigger and tooltip */
+    sideOffset?: number;
+    /** Automatically shift to avoid viewport overflow */
+    avoidCollisions?: boolean;
+    /** Controlled open state */
+    open?: boolean;
+    /** Delay in ms before the tooltip opens (default: 300) */
+    delayDuration?: number;
+    /** Show the arrow pointer */
     arrow?: boolean;
+    /** Color variant */
     color?: 'dark' | 'secondary';
-    padding?: number;
-    placement?: Placement;
-    visible?: boolean;
-    className?: string;
-    children: (ref: (node: ReferenceType | null) => void) => ReactElement;
+    /** CSS word-break override */
     wordBreak?: CSSProperties['wordBreak'];
+    /** z-index for the tooltip portal */
     zIndex?: number;
-    autoPlacement?: boolean;
+    /** Additional className on the tooltip content */
+    className?: string;
+    /** ID for aria-labelledby */
+    id?: string;
 };
 /**
  * ### Purpose
- * Useful when you need to display additional information/actionable content.
- * A tooltip with this content is displayed when user hovers over a target element.
- *
- * ### General info
- * - Tooltip automatically detects viewport overflow and changes placement to prevent it.
- * - 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`.
+ * Displays additional information when hovering over a trigger element.
  *
  * ### Usage
- * Wrap the target element with Tooltip component and use the "content" property to define what should be displayed inside the tooltip.
+ * Pass the trigger element as `children` and the tooltip text/content via `content`.
+ *
+ * ```tsx
+ * <Tooltip content="Save changes">
+ *   <button>Save</button>
+ * </Tooltip>
+ * ```
  */
-export declare const Tooltip: FC<TooltipProps>;
+export declare const Tooltip: ({ children, content, side, align, sideOffset, avoidCollisions, open, delayDuration, arrow: showArrow, color, wordBreak, zIndex, className, id, }: TooltipProps) => React.JSX.Element;

package/lib/components/Tooltip.js

@@ -1,56 +1,31 @@
-import React, { useRef, cloneElement, useState } from 'react';
-import { FloatingArrow, offset, useFloating, arrow, useHover, useInteractions, autoUpdate, autoPlacement as autoPlacementMiddleware, FloatingPortal, safePolygon, } from '@floating-ui/react';
+import React from 'react';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import cn from 'classnames';
-import styles from './Tooltip.module.scss';
-import { canUseDOM } from '../utils/ssr';
+import styles from './Tooltip.module.css';
 /**
  * ### Purpose
- * Useful when you need to display additional information/actionable content.
- * A tooltip with this content is displayed when user hovers over a target element.
- *
- * ### General info
- * - Tooltip automatically detects viewport overflow and changes placement to prevent it.
- * - 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`.
+ * Displays additional information when hovering over a trigger element.
  *
  * ### Usage
- * Wrap the target element with Tooltip component and use the "content" property to define what should be displayed inside the tooltip.
+ * Pass the trigger element as `children` and the tooltip text/content via `content`.
+ *
+ * ```tsx
+ * <Tooltip content="Save changes">
+ *   <button>Save</button>
+ * </Tooltip>
+ * ```
  */
-export const Tooltip = ({ id, content, offset: offsetY = 10, padding = 10, placement = 'top', visible: visibilityOverride, children, wordBreak, zIndex = 20, arrow: showArrow = true, color, autoPlacement = true, className, }) => {
-    const [isOpen, setIsOpen] = useState(false);
-    const arrowRef = useRef(null);
-    const { refs, floatingStyles, context } = useFloating({
-        strategy: 'absolute',
-        placement,
-        whileElementsMounted: autoUpdate,
-        open: isOpen,
-        onOpenChange: setIsOpen,
-        middleware: [
-            ...(autoPlacement ? [autoPlacementMiddleware()] : []),
-            offset(offsetY),
-            ...(showArrow
-                ? [
-                    arrow({
-                        element: arrowRef,
-                        padding,
-                    }),
-                ]
-                : []),
-        ],
-    });
-    const hover = useHover(context, { handleClose: safePolygon() });
-    const { getReferenceProps, getFloatingProps } = useInteractions([hover]);
-    const isTooltipVisible = typeof visibilityOverride === 'boolean' ? visibilityOverride : isOpen;
-    return (React.createElement(React.Fragment, null,
-        cloneElement(children(refs.setReference), { ...getReferenceProps() }),
-        content !== undefined && isTooltipVisible && (React.createElement(React.Fragment, null,
-            React.createElement("span", { ...(id && { id }), className: cn(styles.tooltipSr, className), role: "tooltip", "data-test": "tooltip-sr" }, content),
-            React.createElement(FloatingPortal, { root: canUseDOM ? document.body : null },
-                React.createElement("span", { ref: refs.setFloating, className: cn(styles.overlay, color && [styles[color]], className), style: { ...floatingStyles, ...{ zIndex: context ? zIndex + 1 : zIndex }, wordBreak }, "data-test": "tooltip-overlay", ...getFloatingProps() },
+export const Tooltip = ({ children, content, side = 'top', align = 'center', sideOffset = 10, avoidCollisions = true, open, delayDuration = 300, arrow: showArrow = true, color, wordBreak, zIndex = 20, className, id, }) => {
+    if (content === undefined) {
+        return React.createElement(React.Fragment, null, children);
+    }
+    const rootProps = typeof open === 'boolean' ? { open } : {};
+    return (React.createElement(TooltipPrimitive.Provider, { delayDuration: delayDuration },
+        React.createElement(TooltipPrimitive.Root, { ...rootProps },
+            React.createElement(TooltipPrimitive.Trigger, { asChild: true }, children),
+            React.createElement(TooltipPrimitive.Portal, null,
+                React.createElement(TooltipPrimitive.Content, { id: id, side: side, align: align, sideOffset: sideOffset, avoidCollisions: avoidCollisions, className: cn(styles.content, color && styles[color], className), style: { zIndex, wordBreak }, "data-test": "tooltip-overlay" },
                     content,
-                    showArrow && React.createElement(FloatingArrow, { ref: arrowRef, context: context, className: styles.arrow })))))));
+                    showArrow && React.createElement(TooltipPrimitive.Arrow, { className: styles.arrow }))))));
 };
 //# sourceMappingURL=Tooltip.js.map

package/lib/components/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../src/components/Tooltip.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../src/components/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiD,MAAM,OAAO,CAAA;AACrE,OAAO,KAAK,gBAAgB,MAAM,yBAAyB,CAAA;AAC3D,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,OAAO,MAAM,MAAM,sBAAsB,CAAA;AAoCzC;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,EACtB,QAAQ,EACR,OAAO,EACP,IAAI,GAAG,KAAK,EACZ,KAAK,GAAG,QAAQ,EAChB,UAAU,GAAG,EAAE,EACf,eAAe,GAAG,IAAI,EACtB,IAAI,EACJ,aAAa,GAAG,GAAG,EACnB,KAAK,EAAE,SAAS,GAAG,IAAI,EACvB,KAAK,EACL,SAAS,EACT,MAAM,GAAG,EAAE,EACX,SAAS,EACT,EAAE,GACW,EAAE,EAAE;IACjB,IAAI,OAAO,KAAK,SAAS,EAAE,CAAC;QAC1B,OAAO,0CAAG,QAAQ,CAAI,CAAA;IACxB,CAAC;IAED,MAAM,SAAS,GAAG,OAAO,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,CAAA;IAE3D,OAAO,CACL,oBAAC,gBAAgB,CAAC,QAAQ,IAAC,aAAa,EAAE,aAAa;QACrD,oBAAC,gBAAgB,CAAC,IAAI,OAAK,SAAS;YAClC,oBAAC,gBAAgB,CAAC,OAAO,IAAC,OAAO,UAAE,QAAQ,CAA4B;YACvE,oBAAC,gBAAgB,CAAC,MAAM;gBACtB,oBAAC,gBAAgB,CAAC,OAAO,IACvB,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,UAAU,EACtB,eAAe,EAAE,eAAe,EAChC,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,KAAK,IAAI,MAAM,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC,EAChE,KAAK,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,eAClB,iBAAiB;oBAE1B,OAAO;oBACP,SAAS,IAAI,oBAAC,gBAAgB,CAAC,KAAK,IAAC,SAAS,EAAE,MAAM,CAAC,KAAK,GAAI,CACxC,CACH,CACJ,CACE,CAC7B,CAAA;AACH,CAAC,CAAA"}

package/lib/components/Tooltip.module.css

@@ -0,0 +1,128 @@
+/* ── Keyframes ───────────────────────────────────────────────────── */
+
+@keyframes hive-tooltip-fade-in-down {
+  from {
+    opacity: 0;
+    transform: translateY(-6px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes hive-tooltip-fade-in-up {
+  from {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes hive-tooltip-fade-in-right {
+  from {
+    opacity: 0;
+    transform: translateX(-6px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes hive-tooltip-fade-in-left {
+  from {
+    opacity: 0;
+    transform: translateX(6px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes hive-tooltip-fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+/* ── Base ────────────────────────────────────────────────────────── */
+
+.content {
+  font-family: var(--hive-font-family-text);
+  font-size: var(--hive-font-size-body-small);
+  font-weight: var(--hive-font-weight-text-regular);
+  letter-spacing: var(--hive-letter-spacing-body-small);
+  line-height: var(--hive-line-height-body-small);
+
+  position: relative;
+  max-width: var(--hive-tooltip-max-width);
+  padding: calc(var(--hive-grid) * 3);
+  background: var(--hive-color-neutral-lighter);
+  border: var(--hive-border-width) solid var(--hive-color-neutral-light);
+  border-radius: var(--hive-border-radius);
+  color: var(--hive-color-text);
+  word-break: break-word;
+  text-align: center;
+
+  /* Arrow color — overridden per variant */
+  --tooltip-arrow-fill: var(--hive-color-neutral-light);
+
+  /* Smooth in */
+  will-change: transform, opacity;
+}
+
+/* ── Enter animations (per side) ─────────────────────────────────── */
+
+.content[data-state='delayed-open'][data-side='bottom'],
+.content[data-state='instant-open'][data-side='bottom'] {
+  animation: hive-tooltip-fade-in-down 180ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.content[data-state='delayed-open'][data-side='top'],
+.content[data-state='instant-open'][data-side='top'] {
+  animation: hive-tooltip-fade-in-up 180ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.content[data-state='delayed-open'][data-side='right'],
+.content[data-state='instant-open'][data-side='right'] {
+  animation: hive-tooltip-fade-in-right 180ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.content[data-state='delayed-open'][data-side='left'],
+.content[data-state='instant-open'][data-side='left'] {
+  animation: hive-tooltip-fade-in-left 180ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+/* ── Exit animation ──────────────────────────────────────────────── */
+
+.content[data-state='closed'] {
+  animation: hive-tooltip-fade-out 120ms ease-out;
+}
+
+/* ── Color variants ──────────────────────────────────────────────── */
+
+.content.secondary {
+  border: none;
+  color: var(--hive-color-neutral-white);
+  background-color: var(--hive-color-text-subdued);
+  --tooltip-arrow-fill: var(--hive-color-text-subdued);
+}
+
+.content.dark {
+  border: none;
+  color: var(--hive-color-brand-text);
+  background-color: var(--hive-color-brand-accent);
+  --tooltip-arrow-fill: var(--hive-color-brand-accent);
+}
+
+.arrow {
+  fill: var(--tooltip-arrow-fill);
+}

package/lib/components/TruncatedText.d.ts

@@ -1,6 +1,6 @@
 import { FC, ReactNode } from 'react';
 import { DataTestProp } from '../helpers/types';
-import { TooltipProps } from './Tooltip';
+import { TooltipSide } from './Tooltip';
 interface TruncatedTextProps extends DataTestProp {
     text: ReactNode;
     forceUpdateToken?: string | number | boolean;
@@ -8,7 +8,7 @@ interface TruncatedTextProps extends DataTestProp {
     multiline?: boolean;
     tooltipVisible?: boolean;
     tooltipClassName?: string;
-    tooltipPlacement?: TooltipProps['placement'];
+    tooltipPlacement?: TooltipSide;
 }
 export declare const TruncatedText: FC<TruncatedTextProps>;
 export {};

package/lib/components/TruncatedText.js

@@ -1,5 +1,4 @@
 import React, { useRef, useState } from 'react';
-import mergeRefs from 'react-merge-refs';
 import cn from 'classnames';
 import useIsomorphicLayoutEffect from 'react-use/lib/useIsomorphicLayoutEffect';
 import { useUID } from 'react-uid';
@@ -17,7 +16,8 @@ export const TruncatedText = ({ text, forceUpdateToken, className, tooltipVisibl
         // https://codepen.io/triple-j/pen/wadKQB
         setTooltip(span.offsetWidth < span.scrollWidth || span.offsetHeight < span.scrollHeight ? text : undefined);
     }, [text, forceUpdateToken]);
-    return (React.createElement(Tooltip, { id: idTooltip, content: tooltip, visible: tooltipVisible, className: tooltipClassName, placement: tooltipPlacement }, (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)))));
+    return (React.createElement(Tooltip, { id: idTooltip, content: tooltip, open: tooltipVisible, className: tooltipClassName, side: tooltipPlacement },
+        React.createElement("div", { ref: textRef, 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/components/TruncatedText.js.map

@@ -1 +1 @@
-{"version":3,"file":"TruncatedText.js","sourceRoot":"","sources":["../../src/components/TruncatedText.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAM,MAAM,EAAE,QAAQ,EAAa,MAAM,OAAO,CAAA;AAC9D,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;AAahD,MAAM,CAAC,MAAM,aAAa,GAA2B,CAAC,EACpD,IAAI,EACJ,gBAAgB,EAChB,SAAS,EACT,cAAc,EACd,gBAAgB,GAAG,KAAK,EACxB,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,EAAyB,CAAA;IAC/D,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,CAAC;YAClB,OAAM;QACR,CAAC;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,IAAC,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,gBAAgB,EAAE,SAAS,EAAE,gBAAgB,IACxH,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"}
+{"version":3,"file":"TruncatedText.js","sourceRoot":"","sources":["../../src/components/TruncatedText.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAM,MAAM,EAAE,QAAQ,EAAa,MAAM,OAAO,CAAA;AAC9D,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,yBAAyB,MAAM,yCAAyC,CAAA;AAC/E,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAGlC,OAAO,EAAE,OAAO,EAAe,MAAM,WAAW,CAAA;AAEhD,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,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,EAAyB,CAAA;IAC/D,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,CAAC;YAClB,OAAM;QACR,CAAC;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,IAAC,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,cAAc,EAAE,SAAS,EAAE,gBAAgB,EAAE,IAAI,EAAE,gBAAgB;QACjH,6BAAK,GAAG,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,aAAa,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE,SAAS,EAAE,EAAE,SAAS,CAAC;YAClG,2CAAiB,QAAQ,qBAAmB,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,IACxE,IAAI,CACA,CACH,CACE,CACX,CAAA;AACH,CAAC,CAAA"}

package/lib/index.d.ts

@@ -47,6 +47,7 @@ export { TextAreaFormik } from './components/TextAreaFormik';
 export { TextField } from './components/TextField';
 export { TextFieldFormik } from './components/TextFieldFormik';
 export { Toast } from './components/Toast';
+export type { ToastProps, ToastVariant } from './components/Toast';
 export { Toggle } from './components/Toggle';
 export { ToggleFormik } from './components/ToggleFormik';
 export { Tooltip } from './components/Tooltip';

package/lib/index.js.map

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

package/lib/old/AutocompleteField.d.ts

@@ -0,0 +1,49 @@
+import React, { FocusEvent, ReactNode } from 'react';
+import { FormatOptionLabelMeta } from 'react-select';
+import { HelpProps } from '../components/Help';
+import { SelectFieldSize } from './Select/SelectField';
+import { FieldHeaderProps } from '../components/FieldHeader';
+export type AutocompleteFieldOption = {
+    label: string;
+    value: string;
+};
+export type RenderOptionFunction<O = AutocompleteFieldOption> = (highlightedLabelText: ReactNode, option: O extends AutocompleteFieldOption ? O : never, labelMeta: FormatOptionLabelMeta<AutocompleteFieldOption>) => ReactNode;
+export type AutocompleteFieldProps = {
+    'data-test'?: string;
+    size?: SelectFieldSize;
+    className?: string;
+    disabled?: boolean;
+    error?: string;
+    errorClassName?: string;
+    isClearable?: boolean;
+    label?: string;
+    labelClassName?: string;
+    menuPortalTarget?: 'body' | 'self' | HTMLElement | null;
+    onChange?: (newValue: string) => void;
+    onInputChange?: (newInputValue: string) => void;
+    onBlur?: (e: FocusEvent<HTMLElement>) => void;
+    onFocus?: (e: FocusEvent<HTMLElement>) => void;
+    required?: boolean;
+    helperText?: HelpProps['helperText'];
+    renderOption?: RenderOptionFunction;
+    name: string;
+    options: AutocompleteFieldOption[];
+    value?: string | null;
+    placeholder?: string;
+    openMenuOnClick?: boolean;
+} & Omit<FieldHeaderProps, 'id'>;
+type GetSelectedOptionFromValueProps = {
+    value?: string | null;
+    optionsMap: {
+        [key: string]: AutocompleteFieldOption;
+    };
+};
+/**
+ * Transforms the value passed to the Autocomplete component so that it's in a format as underlying react-select expects
+ * @param value - single value or an array of values
+ * @param optionsMap - an object where option values are mapped to react-select expected objects
+ */
+export declare function getSelectedOptionFromValue({ value, optionsMap }: GetSelectedOptionFromValueProps): AutocompleteFieldOption | null;
+export declare const highlightOptionText: (labelText: string, inputValue: string | undefined) => ReactNode;
+export declare const AutocompleteField: React.FC<AutocompleteFieldProps>;
+export {};

package/lib/old/AutocompleteField.js

@@ -0,0 +1,166 @@
+import React, { useMemo, useState } from 'react';
+import ReactSelect, { components } from 'react-select';
+import { useUID } from 'react-uid';
+import cn from 'classnames';
+import { Search, X } from 'react-feather';
+import useIsomorphicLayoutEffect from 'react-use/lib/useIsomorphicLayoutEffect';
+import styles from './AutocompleteFieldLegacy.module.scss';
+import { Error, errorId } from '../components/Error';
+import { canUseDOM } from '../utils/ssr';
+import { IconButton } from './IconButton';
+import { FieldHeader } from '../components/FieldHeader';
+/**
+ * Transforms the value passed to the Autocomplete component so that it's in a format as underlying react-select expects
+ * @param value - single value or an array of values
+ * @param optionsMap - an object where option values are mapped to react-select expected objects
+ */
+export function getSelectedOptionFromValue({ value, optionsMap }) {
+    var _a;
+    let option = null;
+    if (value) {
+        option = (_a = optionsMap[value]) !== null && _a !== void 0 ? _a : { value: value, label: value };
+    }
+    return option;
+}
+const Input = (innerProps) => {
+    // autoComplete='off' is hard-coded inside SelectField, but doesn't work in Chrome.
+    // Having an invalid value hard-coded disabled it in all browsers.
+    const props = {
+        ...innerProps,
+        autoComplete: 'chrome-off',
+    };
+    return React.createElement(components.Input, { ...props });
+};
+const DropdownIndicator = (props) => {
+    return (React.createElement(components.DropdownIndicator, { ...props },
+        React.createElement(Search, { size: 20 })));
+};
+// innerProps set event handling
+const ClearIndicator = ({ innerProps }) => {
+    // Visually impaired people will use the keyboard (backspace) to remove the value. We do not want to confuse them by allowing to focus this button.
+    // @ts-ignore
+    return React.createElement(IconButton, { ...innerProps, icon: X, ariaHidden: true, variant: "ghost", className: styles.clear, tabIndex: -1 });
+};
+export const highlightOptionText = (labelText, inputValue) => {
+    const separator = '<%>';
+    const query = inputValue || '';
+    return query
+        ? labelText
+            .replace(new RegExp(query, 'ig'), `${separator}$&${separator}`)
+            .split(separator)
+            .filter((val) => val)
+            .map((val, i) => (React.createElement("span", { className: cn({
+                'hz-autocomplete-field__matched-option-text': val.toLowerCase() === query.toLowerCase(),
+            }), key: val + `${i}` }, val)))
+        : labelText;
+};
+export const AutocompleteField = ({ 'data-test': dataTest = 'autocomplete-field', className, disabled, error, errorClassName, isClearable, label, labelClassName, helperText, size = 'medium', menuPortalTarget = 'body', name, onChange, onFocus, onBlur, onInputChange, options, required, value, placeholder = 'Search...', showAriaLabel = false, renderOption, openMenuOnClick = true, ...rest }) => {
+    // when the user clicks on an input with the value, the value should disappear,
+    // but then it should appear after the user selects something or blurs the input
+    const [isValueHidden, setValueHidden] = useState(false);
+    const id = useUID();
+    useIsomorphicLayoutEffect(() => {
+        const menuContainer = getMenuContainer(menuPortalTarget);
+        if (menuContainer && !menuContainer.className.includes(styles.menuContainer)) {
+            menuContainer.className = `${menuContainer.className} ${styles.menuContainer}`;
+        }
+    }, [menuPortalTarget]);
+    const optionsMap = React.useMemo(() => options.reduce((acc, option) => {
+        acc[`${option.value}`] = option;
+        return acc;
+    }, {}), [options]);
+    const selectedOption = useMemo(() => getSelectedOptionFromValue({ value, optionsMap }), [optionsMap, value]);
+    const onChangeFn = React.useCallback((option) => {
+        setValueHidden(false);
+        onChange(option === null ? null : option.value);
+    }, [onChange]);
+    const onFocusFn = React.useCallback((e) => {
+        if (onFocus) {
+            onFocus(e);
+        }
+        if (!openMenuOnClick) {
+            setValueHidden(true);
+        }
+    }, [onFocus, openMenuOnClick]);
+    const onBlurFn = React.useCallback((e) => {
+        if (onBlur) {
+            onBlur(e);
+        }
+        setValueHidden(false);
+    }, [onBlur]);
+    const formatOptionLabelFn = React.useCallback((option, labelMeta) => {
+        const { inputValue } = labelMeta;
+        let optionText = option.label;
+        if (inputValue) {
+            optionText = highlightOptionText(option.label, inputValue);
+        }
+        return renderOption ? renderOption(optionText, option, labelMeta) : optionText;
+    }, [renderOption]);
+    const getMenuContainer = (menuPortalTarget) => {
+        if (menuPortalTarget == 'body') {
+            // There is no document is SSR environment
+            return canUseDOM ? document.body : undefined;
+        }
+        if (menuPortalTarget == 'self') {
+            return undefined;
+        }
+        return menuPortalTarget;
+    };
+    const props = {
+        inputId: id,
+        className: 'hz-autocomplete-field',
+        classNamePrefix: 'hz-autocomplete-field',
+        // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-invalid_attribute
+        'aria-errormessage': error && errorId(id),
+        'aria-invalid': !!error,
+        // @ts-ignore
+        'aria-required': required,
+        error,
+        isClearable: isClearable !== null && isClearable !== void 0 ? isClearable : false,
+        isDisabled: disabled,
+        isSearchable: true,
+        isMulti: false,
+        name: name,
+        value: selectedOption,
+        placeholder,
+        options,
+        onChange: onChangeFn,
+        onFocus: onFocusFn,
+        onBlur: onBlurFn,
+        menuPortalTarget: getMenuContainer(menuPortalTarget),
+        components: {
+            DropdownIndicator,
+            ClearIndicator,
+            Input,
+        },
+        openMenuOnClick,
+        ...rest,
+    };
+    return (React.createElement("div", { "data-test": dataTest, className: cn(styles.container, {
+            [styles.withError]: 'error' in props,
+            [styles.disabled]: disabled,
+            [styles.hasError]: error,
+            [styles.small]: size === 'small',
+            [styles.empty]: !value,
+        }, 
+        // Menu container is either this select itself or any other element
+        // We can always add this class to the select itself because even if the menu container is any parent it won't break it
+        // However, if it is the select itself, it will properly add necessary specificity level to the menu styles.
+        styles.menuContainer, className) },
+        React.createElement(FieldHeader, { label: label, id: id, size: size, "data-test": dataTest, helperText: helperText, showAriaLabel: showAriaLabel, labelClassName: labelClassName }),
+        React.createElement("div", { className: styles.selectBlock },
+            React.createElement(ReactSelect, { onInputChange: onInputChange, formatOptionLabel: formatOptionLabelFn, styles: {
+                    ...props.styles,
+                    // @ts-ignore
+                    singleValue: (base) => {
+                        var _a;
+                        return ({
+                            ...base,
+                            ...(_a = props.styles) === null || _a === void 0 ? void 0 : _a.singleValue,
+                            visibility: isValueHidden ? 'hidden' : 'visible',
+                        });
+                    },
+                }, ...props })),
+        React.createElement(Error, { "data-test": `${dataTest}-error`, truncated: true, error: error, className: cn(styles.errorContainer, errorClassName), inputId: id })));
+};
+//# sourceMappingURL=AutocompleteField.js.map

package/lib/old/AutocompleteField.js.map

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

package/lib/old/AutocompleteFieldFormik.d.ts

@@ -0,0 +1,9 @@
+import { ReactElement } from 'react';
+import { AutocompleteFieldProps } from './AutocompleteField';
+import { FieldValidatorGeneric } from '../utils/formik';
+type AutocompleteFieldFormikProps = AutocompleteFieldProps & {
+    validate?: FieldValidatorGeneric<string | null>;
+    onChange?: (value: string | null) => void;
+};
+export declare const AutocompleteFieldFormik: ({ name, validate, onChange, ...props }: AutocompleteFieldFormikProps) => ReactElement;
+export {};

package/lib/old/AutocompleteFieldFormik.js

@@ -0,0 +1,19 @@
+import React, { useCallback, useMemo } from 'react';
+import { useField } from 'formik';
+import { AutocompleteField } from './AutocompleteField';
+import { formikTouchAndUpdate, getFieldError } from '../utils/formik';
+export const AutocompleteFieldFormik = ({ name, validate, onChange, ...props }) => {
+    const [{ value, onBlur }, meta, { setValue, setTouched }] = useField({
+        name,
+        validate,
+    });
+    const setFormikValue = useMemo(() => formikTouchAndUpdate(setValue, setTouched), [setValue, setTouched]);
+    const handleChange = useCallback((newValue) => {
+        if (onChange) {
+            onChange(newValue);
+        }
+        setFormikValue(newValue);
+    }, [setFormikValue, onChange]);
+    return React.createElement(AutocompleteField, { ...props, value: value, onChange: handleChange, name: name, onBlur: onBlur, error: getFieldError(meta) });
+};
+//# sourceMappingURL=AutocompleteFieldFormik.js.map

package/lib/old/AutocompleteFieldFormik.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AutocompleteFieldFormik.js","sourceRoot":"","sources":["../../src/old/AutocompleteFieldFormik.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAgB,WAAW,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAA;AAEjC,OAAO,EAAE,iBAAiB,EAA0B,MAAM,qBAAqB,CAAA;AAC/E,OAAO,EAAyB,oBAAoB,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAO5F,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAgC,EAAgB,EAAE;IAC5H,MAAM,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,IAAI,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,CAAC,GAAG,QAAQ,CAAgB;QAClF,IAAI;QACJ,QAAQ;KACT,CAAC,CAAA;IAEF,MAAM,cAAc,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,oBAAoB,CAAgB,QAAQ,EAAE,UAAU,CAAC,EAAE,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC,CAAA;IACvH,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,QAAgB,EAAE,EAAE;QACnB,IAAI,QAAQ,EAAE,CAAC;YACb,QAAQ,CAAC,QAAQ,CAAC,CAAA;QACpB,CAAC;QAED,cAAc,CAAC,QAAQ,CAAC,CAAA;IAC1B,CAAC,EACD,CAAC,cAAc,EAAE,QAAQ,CAAC,CAC3B,CAAA;IAED,OAAO,oBAAC,iBAAiB,OAAK,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,YAAY,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,aAAa,CAAC,IAAI,CAAC,GAAI,CAAA;AACvI,CAAC,CAAA"}