@lumx/react 4.4.1-alpha.0 → 4.4.1-alpha.2

package/_internal/{DpdvhbTO.js → BfgxEBp6.js}

@@ -1,6 +1,5 @@
 import React__default, { useContext, useEffect, useMemo, useRef, createContext } from 'react';
 import { jsx, Fragment } from 'react/jsx-runtime';
-import isEmpty from 'lodash/isEmpty.js';
 import { createPortal } from 'react-dom';
 
 const DisabledStateContext = /*#__PURE__*/React__default.createContext({
@@ -27,11 +26,57 @@ function useDisabledStateContext() {
   return useContext(DisabledStateContext);
 }
 
-const EVENT_TYPES = ['mousedown', 'touchstart'];
-function isClickAway(targets, refs) {
-  // The targets elements are not contained in any of the listed element references.
-  return !refs.some(ref => targets.some(target => ref?.current?.contains(target)));
+/**
+ * Shared types and logic for ClickAway detection.
+ *
+ * ClickAway detects clicks outside a set of elements and triggers a callback.
+ * The core logic (event listening + target checking) is framework-agnostic.
+ * Framework-specific wrappers (React hook, Vue composable) and context providers
+ * (React context, Vue provide/inject) are implemented in each framework package.
+ */
+
+/** Event types that trigger click away detection. */
+const CLICK_AWAY_EVENT_TYPES = ['mousedown', 'touchstart'];
+
+/** Callback triggered when a click away is detected. */
+
+/**
+ * Check if the click event targets are outside all the given elements.
+ *
+ * @param targets - The event target elements (from `event.target` and `event.composedPath()`).
+ * @param elements - The elements considered "inside" the click away context.
+ * @returns `true` if the click is outside all elements (i.e. a click away).
+ */
+function isClickAway(targets, elements) {
+  return !elements.some(element => targets.some(target => element?.contains(target)));
+}
+
+/**
+ * Imperative setup for click away detection.
+ * Adds mousedown/touchstart listeners on `document` and calls the callback when a click
+ * occurs outside the elements returned by `getElements`.
+ *
+ * @param getElements - Getter returning the current list of elements considered "inside".
+ * @param callback - Callback to invoke on click away.
+ * @returns A teardown function that removes the event listeners.
+ */
+function setupClickAway(getElements, callback) {
+  if (!callback) {
+    return undefined;
+  }
+  const listener = evt => {
+    const targets = [evt.composedPath?.()[0], evt.target];
+    const elements = getElements();
+    if (elements.length > 0 && isClickAway(targets, elements)) {
+      callback(evt);
+    }
+  };
+  CLICK_AWAY_EVENT_TYPES.forEach(evtType => document.addEventListener(evtType, listener));
+  return () => {
+    CLICK_AWAY_EVENT_TYPES.forEach(evtType => document.removeEventListener(evtType, listener));
+  };
 }
+
 /**
  * Listen to clicks away from the given elements and callback the passed in function.
  *
@@ -42,22 +87,12 @@ function useClickAway({
   childrenRefs
 }) {
   useEffect(() => {
-    const {
-      current: currentRefs
-    } = childrenRefs;
-    if (!callback || !currentRefs || isEmpty(currentRefs)) {
-      return undefined;
-    }
-    const listener = evt => {
-      const targets = [evt.composedPath?.()[0], evt.target];
-      if (isClickAway(targets, currentRefs)) {
-        callback(evt);
-      }
-    };
-    EVENT_TYPES.forEach(evtType => document.addEventListener(evtType, listener));
-    return () => {
-      EVENT_TYPES.forEach(evtType => document.removeEventListener(evtType, listener));
+    const getElements = () => {
+      const refs = childrenRefs.current;
+      if (!refs) return [];
+      return refs.map(ref => ref?.current).filter(Boolean);
     };
+    return setupClickAway(getElements, callback);
   }, [callback, childrenRefs]);
 }
 
@@ -116,11 +151,6 @@ const ClickAwayProvider = ({
 };
 ClickAwayProvider.displayName = 'ClickAwayProvider';
 
-/**
- * Portal initializing function.
- * If it does not provide a container, the Portal children will render in classic React tree and not in a portal.
- */
-
 const PortalContext = /*#__PURE__*/React__default.createContext(() => ({
   container: document.body
 }));
@@ -147,13 +177,16 @@ const Portal = ({
   React__default.useLayoutEffect(() => {
     return context?.teardown;
   }, [context?.teardown, enabled]);
-  if (!context?.container) {
+  const {
+    container
+  } = context ?? {};
+  if (!container || typeof container === 'string') {
     return /*#__PURE__*/jsx(Fragment, {
       children: children
     });
   }
-  return /*#__PURE__*/createPortal(children, context.container);
+  return /*#__PURE__*/createPortal(children, container);
 };
 
 export { ClickAwayProvider as C, DisabledStateProvider as D, Portal as P, PortalProvider as a, useDisabledStateContext as u };
-//# sourceMappingURL=DpdvhbTO.js.map
+//# sourceMappingURL=BfgxEBp6.js.map

package/_internal/BfgxEBp6.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BfgxEBp6.js","sources":["../../src/utils/disabled/DisabledStateContext.tsx","../../../lumx-core/src/js/utils/ClickAway/index.ts","../../src/hooks/useClickAway.tsx","../../src/utils/ClickAwayProvider/ClickAwayProvider.tsx","../../src/utils/Portal/PortalProvider.tsx","../../src/utils/Portal/Portal.tsx"],"sourcesContent":["import React, { useContext } from 'react';\n\nimport { DisabledStateContextValue } from '@lumx/core/js/utils/disabledState';\n\nexport const DisabledStateContext = React.createContext<DisabledStateContextValue>({ state: null });\n\nexport type DisabledStateProviderProps = DisabledStateContextValue & {\n    children: React.ReactNode;\n};\n\n/**\n * Disabled state provider.\n * All nested LumX Design System components inherit this disabled state.\n */\nexport function DisabledStateProvider({ children, ...value }: DisabledStateProviderProps) {\n    return <DisabledStateContext.Provider value={value}>{children}</DisabledStateContext.Provider>;\n}\n\n/**\n * Get DisabledState context value\n */\nexport function useDisabledStateContext(): DisabledStateContextValue {\n    return useContext(DisabledStateContext);\n}\n","/**\n * Shared types and logic for ClickAway detection.\n *\n * ClickAway detects clicks outside a set of elements and triggers a callback.\n * The core logic (event listening + target checking) is framework-agnostic.\n * Framework-specific wrappers (React hook, Vue composable) and context providers\n * (React context, Vue provide/inject) are implemented in each framework package.\n */\n\nimport type { Falsy } from '@lumx/core/js/types';\n\n/** Event types that trigger click away detection. */\nexport const CLICK_AWAY_EVENT_TYPES = ['mousedown', 'touchstart'] as const;\n\n/** Callback triggered when a click away is detected. */\nexport type ClickAwayCallback = EventListener | Falsy;\n\n/**\n * Check if the click event targets are outside all the given elements.\n *\n * @param targets - The event target elements (from `event.target` and `event.composedPath()`).\n * @param elements - The elements considered \"inside\" the click away context.\n * @returns `true` if the click is outside all elements (i.e. a click away).\n */\nexport function isClickAway(targets: HTMLElement[], elements: HTMLElement[]): boolean {\n    return !elements.some((element) => targets.some((target) => element?.contains(target)));\n}\n\n/**\n * Imperative setup for click away detection.\n * Adds mousedown/touchstart listeners on `document` and calls the callback when a click\n * occurs outside the elements returned by `getElements`.\n *\n * @param getElements - Getter returning the current list of elements considered \"inside\".\n * @param callback - Callback to invoke on click away.\n * @returns A teardown function that removes the event listeners.\n */\nexport function setupClickAway(\n    getElements: () => HTMLElement[],\n    callback: ClickAwayCallback,\n): (() => void) | undefined {\n    if (!callback) {\n        return undefined;\n    }\n\n    const listener: EventListener = (evt) => {\n        const targets = [evt.composedPath?.()[0], evt.target] as HTMLElement[];\n        const elements = getElements();\n        if (elements.length > 0 && isClickAway(targets, elements)) {\n            callback(evt);\n        }\n    };\n\n    CLICK_AWAY_EVENT_TYPES.forEach((evtType) => document.addEventListener(evtType, listener));\n    return () => {\n        CLICK_AWAY_EVENT_TYPES.forEach((evtType) => document.removeEventListener(evtType, listener));\n    };\n}\n","import { RefObject, useEffect } from 'react';\n\nimport { Falsy } from '@lumx/react/utils/type';\nimport { setupClickAway } from '@lumx/core/js/utils/ClickAway';\n\nexport interface ClickAwayParameters {\n    /**\n     * A callback function to call when the user clicks away from the elements.\n     */\n    callback: EventListener | Falsy;\n    /**\n     * Elements considered within the click away context (clicking outside them will trigger the click away callback).\n     */\n    childrenRefs: RefObject<Array<RefObject<HTMLElement>>>;\n}\n\n/**\n * Listen to clicks away from the given elements and callback the passed in function.\n *\n * Warning: If you need to detect click away on nested React portals, please use the `ClickAwayProvider` component.\n */\nexport function useClickAway({ callback, childrenRefs }: ClickAwayParameters): void {\n    useEffect(() => {\n        const getElements = () => {\n            const refs = childrenRefs.current;\n            if (!refs) return [];\n            return refs.map((ref) => ref?.current).filter(Boolean) as HTMLElement[];\n        };\n        return setupClickAway(getElements, callback);\n    }, [callback, childrenRefs]);\n}\n","import { createContext, RefObject, useContext, useEffect, useMemo, useRef } from 'react';\nimport { ClickAwayParameters, useClickAway } from '@lumx/react/hooks/useClickAway';\n\ninterface ContextValue {\n    childrenRefs: Array<RefObject<HTMLElement>>;\n    addRefs(...newChildrenRefs: Array<RefObject<HTMLElement>>): void;\n}\n\nconst ClickAwayAncestorContext = createContext<ContextValue | null>(null);\n\ninterface ClickAwayProviderProps extends ClickAwayParameters {\n    /**\n     * (Optional) Element that should be considered as part of the parent\n     */\n    parentRef?: RefObject<HTMLElement>;\n    /**\n     * Children\n     */\n    children?: React.ReactNode;\n}\n\n/**\n * Component combining the `useClickAway` hook with a React context to hook into the React component tree and make sure\n * we take into account both the DOM tree and the React tree to detect click away.\n *\n * @return the react component.\n */\nexport const ClickAwayProvider: React.FC<ClickAwayProviderProps> = ({\n    children,\n    callback,\n    childrenRefs,\n    parentRef,\n}) => {\n    const parentContext = useContext(ClickAwayAncestorContext);\n    const currentContext = useMemo(() => {\n        const context: ContextValue = {\n            childrenRefs: [],\n            /**\n             * Add element refs to the current context and propagate to the parent context.\n             */\n            addRefs(...newChildrenRefs) {\n                // Add element refs that should be considered as inside the click away context.\n                context.childrenRefs.push(...newChildrenRefs);\n\n                if (parentContext) {\n                    // Also add then to the parent context\n                    parentContext.addRefs(...newChildrenRefs);\n                    if (parentRef) {\n                        // The parent element is also considered as inside the parent click away context but not inside the current context\n                        parentContext.addRefs(parentRef);\n                    }\n                }\n            },\n        };\n        return context;\n    }, [parentContext, parentRef]);\n\n    useEffect(() => {\n        const { current: currentRefs } = childrenRefs;\n        if (!currentRefs) {\n            return;\n        }\n        currentContext.addRefs(...currentRefs);\n    }, [currentContext, childrenRefs]);\n\n    useClickAway({ callback, childrenRefs: useRef(currentContext.childrenRefs) });\n    return <ClickAwayAncestorContext.Provider value={currentContext}>{children}</ClickAwayAncestorContext.Provider>;\n};\nClickAwayProvider.displayName = 'ClickAwayProvider';\n","import React from 'react';\nimport type { PortalInit } from '@lumx/core/js/utils/Portal';\n\nexport type { PortalInit, PortalProviderProps } from '@lumx/core/js/utils/Portal';\n\nexport const PortalContext = React.createContext<PortalInit>(() => ({ container: document.body }));\n\nexport interface ReactPortalProviderProps {\n    children?: React.ReactNode;\n    value: PortalInit;\n}\n\n/**\n * Customize where <Portal> wrapped elements render (tooltip, popover, dialog, etc.)\n */\nexport const PortalProvider: React.FC<ReactPortalProviderProps> = PortalContext.Provider;\n","import React from 'react';\nimport { createPortal } from 'react-dom';\nimport { PortalContext } from './PortalProvider';\n\nexport type { PortalProps } from '@lumx/core/js/utils/Portal';\n\nexport interface ReactPortalProps {\n    enabled?: boolean;\n    children: React.ReactNode;\n}\n\n/**\n * Render children in a portal outside the current DOM position\n * (defaults to `document.body` but can be customized with the PortalContextProvider)\n */\nexport const Portal: React.FC<ReactPortalProps> = ({ children, enabled = true }) => {\n    const init = React.useContext(PortalContext);\n    const context = React.useMemo(\n        () => {\n            return enabled ? init() : null;\n        },\n        // Only update on 'enabled'\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n        [enabled],\n    );\n\n    React.useLayoutEffect(() => {\n        return context?.teardown;\n    }, [context?.teardown, enabled]);\n\n    const { container } = context ?? {};\n    if (!container || typeof container === 'string') {\n        return <>{children}</>;\n    }\n    return createPortal(children, container);\n};\n"],"names":["DisabledStateContext","React","createContext","state","DisabledStateProvider","children","value","_jsx","Provider","useDisabledStateContext","useContext","CLICK_AWAY_EVENT_TYPES","isClickAway","targets","elements","some","element","target","contains","setupClickAway","getElements","callback","undefined","listener","evt","composedPath","length","forEach","evtType","document","addEventListener","removeEventListener","useClickAway","childrenRefs","useEffect","refs","current","map","ref","filter","Boolean","ClickAwayAncestorContext","ClickAwayProvider","parentRef","parentContext","currentContext","useMemo","context","addRefs","newChildrenRefs","push","currentRefs","useRef","displayName","PortalContext","container","body","PortalProvider","Portal","enabled","init","useLayoutEffect","teardown","_Fragment","createPortal"],"mappings":"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"}

package/index.d.ts

@@ -1,7 +1,7 @@
-import { Kind as Kind$1, HorizontalAlignment as HorizontalAlignment$1, Size as Size$1, ColorPalette as ColorPalette$1, Theme as Theme$1, Orientation as Orientation$1, Alignment as Alignment$1, AspectRatio as AspectRatio$1, ColorWithVariants as ColorWithVariants$1, ColorVariant as ColorVariant$1, Typography as Typography$1, Emphasis as Emphasis$1 } from '@lumx/core/js/constants';
+import { Kind as Kind$1, HorizontalAlignment as HorizontalAlignment$1, ColorPalette as ColorPalette$1, Size as Size$1, Theme as Theme$1, Orientation as Orientation$1, Alignment as Alignment$1, AspectRatio as AspectRatio$1, ColorWithVariants as ColorWithVariants$1, ColorVariant as ColorVariant$1, Typography as Typography$1, Emphasis as Emphasis$1 } from '@lumx/core/js/constants';
 export * from '@lumx/core/js/constants';
 import * as _lumx_core_js_types from '@lumx/core/js/types';
-import { GenericProps as GenericProps$1, HasTheme as HasTheme$1, ValueOf as ValueOf$1, PropsToOverride, HasAriaDisabled as HasAriaDisabled$1, HasCloseMode, HasClassName as HasClassName$1, JSXElement as JSXElement$1, CommonRef as CommonRef$1, Falsy, HeadingElement as HeadingElement$1, HasRequiredLinkHref, HasAriaLabelOrLabelledBy } from '@lumx/core/js/types';
+import { GenericProps as GenericProps$1, HasTheme as HasTheme$1, ValueOf as ValueOf$1, PropsToOverride, HasAriaDisabled as HasAriaDisabled$1, HasCloseMode as HasCloseMode$1, HasClassName as HasClassName$1, JSXElement as JSXElement$1, CommonRef as CommonRef$1, Falsy, HeadingElement as HeadingElement$1, HasRequiredLinkHref, HasAriaLabelOrLabelledBy } from '@lumx/core/js/types';
 export * from '@lumx/core/js/types';
 import * as React$1 from 'react';
 import React__default, { Ref, ReactElement, ReactNode, SyntheticEvent, MouseEventHandler, KeyboardEventHandler, RefObject, CSSProperties, ImgHTMLAttributes, AriaAttributes as AriaAttributes$1, SetStateAction, Key, ElementType, ComponentProps } from 'react';
@@ -253,43 +253,20 @@ interface AutocompleteMultipleProps extends AutocompleteProps {
  */
 declare const AutocompleteMultiple: Comp<AutocompleteMultipleProps, HTMLDivElement>;
 
-/**
- * Avatar sizes.
- */
-type AvatarSize = Extract<Size$1, 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl'>;
-/**
- * Defines the props of the component.
- */
-interface AvatarProps extends GenericProps$1, HasTheme$1 {
-    /** Action toolbar content. */
-    actions?: ReactNode;
-    /** Image alternative text. */
-    alt: string;
-    /** Badge. */
-    badge?: ReactElement;
-    /** Image URL. */
-    image: string;
-    /** Props to pass to the link wrapping the thumbnail. */
-    linkProps?: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;
-    /** Custom react component for the link (can be used to inject react router Link). */
-    linkAs?: 'a' | any;
-    /** On click callback. */
-    onClick?: MouseEventHandler<HTMLDivElement>;
-    /** On key press callback. */
-    onKeyPress?: KeyboardEventHandler<HTMLDivElement>;
-    /** Size variant. */
-    size?: AvatarSize;
-    /** Props to pass to the thumbnail (minus those already set by the Avatar props). */
-    thumbnailProps?: Omit<ThumbnailProps, 'image' | 'alt' | 'size' | 'theme' | 'align' | 'fillHeight' | 'variant' | 'aspectRatio'>;
+interface HasClassName {
+    /**
+     * Class name forwarded to the root element of the component.
+     */
+    className?: string;
+}
+
+interface HasCloseMode {
+    /**
+     * Choose how the children are hidden when closed
+     * ('hide' keeps the children in DOM but hide them, 'unmount' remove the children from the DOM).
+     */
+    closeMode?: 'hide' | 'unmount';
 }
-/**
- * Avatar component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-declare const Avatar: Comp<AvatarProps, HTMLDivElement>;
 
 /**
  * Alignments.
@@ -478,13 +455,6 @@ type ColorVariant = ValueOf$1<typeof ColorVariant>;
 /** ColorPalette with all possible color variant combination */
 type ColorWithVariants = ColorPalette | Exclude<`${ColorPalette}-${ColorVariant}`, `light-D${number}` | `dark-D${number}`>;
 
-interface HasClassName {
-    /**
-     * Class name forwarded to the root element of the component.
-     */
-    className?: string;
-}
-
 interface HasTheme {
     /**
      * Theme adapting the component to light or dark background.
@@ -589,15 +559,23 @@ type FieldSelector<TObject, TValue> = keyof {
  */
 type Selector<TObject, TValue = string> = FieldSelector<TObject, TValue> | FunctionSelector<TObject, TValue>;
 
+/**
+ * Avatar sizes.
+ */
+type AvatarSize = Extract<Size, 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl'>;
 /**
  * Defines the props of the component.
  */
-interface BadgeProps$1 extends HasClassName {
-    /** Badge content. */
-    children?: JSXElement;
-    /** Color variant. */
-    color?: ColorPalette;
-    /** reference to the root element */
+interface AvatarProps$1 extends HasTheme, HasClassName {
+    /** Action toolbar content. */
+    actions?: JSXElement;
+    /** Badge. */
+    badge?: JSXElement;
+    /** Image URL. */
+    image: JSXElement;
+    /** Size variant. */
+    size?: AvatarSize;
+    /** Props to pass to the thumbnail (minus those already set by the Avatar props). */
     ref?: CommonRef;
 }
 
@@ -610,6 +588,46 @@ interface BadgeProps$1 extends HasClassName {
  */
 type ReactToJSX<Props, OmitProps extends keyof Props = never> = Omit<Props, PropsToOverride | OmitProps>;
 
+/**
+ * Defines the props of the component.
+ */
+interface AvatarProps extends GenericProps$1, ReactToJSX<AvatarProps$1, 'actions' | 'badge' | 'image'> {
+    /** Action toolbar content. */
+    actions?: ReactNode;
+    /** Props to pass to the link wrapping the thumbnail. */
+    linkProps?: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;
+    /** Custom react component for the link (can be used to inject react router Link). */
+    linkAs?: 'a' | any;
+    /** On click callback. */
+    onClick?: MouseEventHandler<HTMLDivElement>;
+    /** On key press callback. */
+    onKeyPress?: KeyboardEventHandler<HTMLDivElement>;
+    /** Image alternative text. */
+    alt: string;
+    /** Props to pass to the thumbnail (minus those already set by the Avatar props). */
+    thumbnailProps?: Omit<ThumbnailProps, 'image' | 'alt' | 'size' | 'theme' | 'align' | 'fillHeight' | 'variant' | 'aspectRatio'>;
+}
+/**
+ * Avatar component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+declare const Avatar: Comp<AvatarProps, HTMLDivElement>;
+
+/**
+ * Defines the props of the component.
+ */
+interface BadgeProps$1 extends HasClassName {
+    /** Badge content. */
+    children?: JSXElement;
+    /** Color variant. */
+    color?: ColorPalette;
+    /** reference to the root element */
+    ref?: CommonRef;
+}
+
 /**
  * Defines the props of the component.
  */
@@ -1390,7 +1408,7 @@ declare const Dropdown: Comp<DropdownProps, HTMLDivElement>;
 /**
  * Defines the props of the component.
  */
-interface ExpansionPanelProps extends GenericProps$1, HasCloseMode, HasTheme$1 {
+interface ExpansionPanelProps extends GenericProps$1, HasCloseMode$1, HasTheme$1 {
     /** Whether the expansion panel has a background. */
     hasBackground?: boolean;
     /** Whether the header has a divider. */
@@ -1556,7 +1574,7 @@ declare const GenericBlockGapSize: Pick<{
     readonly medium: "medium";
     readonly big: "big";
     readonly huge: "huge";
-}, "medium" | "tiny" | "regular" | "big" | "huge">;
+}, "tiny" | "regular" | "medium" | "big" | "huge">;
 type GenericBlockGapSize = ValueOf$1<typeof GenericBlockGapSize>;
 
 interface GenericBlockProps extends FlexBoxProps {
@@ -2917,7 +2935,7 @@ declare const SideNavigation: Comp<SideNavigationProps, HTMLUListElement>;
 /**
  * Defines the props of the component.
  */
-interface SideNavigationItemProps extends GenericProps$1, HasCloseMode {
+interface SideNavigationItemProps extends GenericProps$1, HasCloseMode$1 {
     /** SideNavigationItem elements. */
     children?: ReactNode;
     /** Emphasis variant. */
@@ -3754,13 +3772,11 @@ declare const Toolbar: Comp<ToolbarProps, HTMLDivElement>;
 declare const ARIA_LINK_MODES: readonly ["aria-describedby", "aria-labelledby"];
 
 /** Position of the tooltip relative to the anchor element. */
-type TooltipPlacement = Extract<Placement, 'top' | 'right' | 'bottom' | 'left'>;
+type TooltipPlacement = 'top' | 'right' | 'bottom' | 'left';
 /**
- * Defines the props of the component.
+ * Framework-agnostic tooltip props (shared between React and Vue wrappers).
  */
-interface TooltipProps extends GenericProps$1, HasCloseMode {
-    /** Anchor (element on which we activate the tooltip). */
-    children: ReactNode;
+interface TooltipProps$1 extends HasCloseMode {
     /** Delay (in ms) before closing the tooltip. */
     delay?: number;
     /** Whether the tooltip is displayed even without the mouse hovering the anchor. */
@@ -3771,6 +3787,16 @@ interface TooltipProps extends GenericProps$1, HasCloseMode {
     placement?: TooltipPlacement;
     /** Choose how the tooltip text should link to the anchor */
     ariaLinkMode?: (typeof ARIA_LINK_MODES)[number];
+    /** Z-index for the tooltip */
+    zIndex?: number;
+}
+
+/**
+ * Defines the props of the component.
+ */
+interface TooltipProps extends GenericProps$1, TooltipProps$1 {
+    /** Anchor (element on which we activate the tooltip). */
+    children: ReactNode;
 }
 /**
  * Tooltip component.