@neo4j-ndl/react 3.2.5 → 3.2.7

package/lib/esm/spotlight/SpotlightTarget.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  *
  *  Copyright (c) "Neo4j"
@@ -19,34 +19,51 @@ import { jsx as _jsx } from "react/jsx-runtime";
  *  You should have received a copy of the GNU General Public License
  *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import React from 'react';
+import React, { useEffect } from 'react';
 import { useSpotlightContext } from './SpotlightProvider';
 import classNames from 'classnames';
 import ConditionalWrap from '../_common/ConditionalWrap';
-export const SpotlightTarget = React.forwardRef(function SpotlightTarget({ id, hasPulse = true, backgroundColor, borderRadius, children, className, htmlAttributes, }, ref) {
-    const { isActiveSpotlight, isOpen, setIsOpen } = useSpotlightContext();
+import { useIndicator, } from './use-indicator';
+import { FloatingPortal, useMergeRefs } from '@floating-ui/react';
+export const SpotlightTarget = React.forwardRef(function SpotlightTarget({ id, hasPulse = true, indicatorVariant = 'border', indicatorPlacement = 'top-right', backgroundColor, borderRadius, hasAnchorPortal, children, className, htmlAttributes, }, ref) {
+    const { isActiveSpotlight, isOpen, setIsOpen, registerTarget, unregisterTarget, } = useSpotlightContext();
+    const internalRef = React.useRef(null);
+    const mergedRefs = useMergeRefs([ref, internalRef]);
+    useEffect(() => {
+        if (internalRef.current)
+            registerTarget(id, internalRef);
+        return () => unregisterTarget(id);
+    }, [id, registerTarget, unregisterTarget]);
     const classes = classNames('ndl-spotlight-target', {
-        'ndl-spotlight-target-pulse': hasPulse,
         'ndl-spotlight-target-open': isOpen,
     }, className);
     const isActive = isActiveSpotlight(id);
-    return (_jsx("div", { className: isActive ? classes : '', style: { backgroundColor, borderRadius }, children: _jsx("div", Object.assign({ role: isActive ? 'button' : undefined, id: id, ref: ref, className: "ndl-spotlight-target-inner", onClick: (e) => {
-                if (isActive && !isOpen) {
-                    setIsOpen(true);
-                    e.preventDefault();
-                }
-            }, style: { borderRadius }, onKeyDown: (e) => {
-                console.log('e.key', e); // eslint-disable-line
-                if (isActive &&
-                    !isOpen &&
-                    (e.code === 'Enter' || e.code === 'Space')) {
-                    setIsOpen(true);
-                    e.preventDefault();
-                }
-            }, tabIndex: isActive ? 0 : -1, "aria-label": "spotlight target" }, htmlAttributes, { children: _jsx(ConditionalWrap, { shouldWrap: isActive, 
-                // TODO v4: inert should be fixed in react 19? https://github.com/facebook/react/pull/24730#event-12109747640. inert="" is a workaround for now
-                wrap: (children) => (
-                /* @ts-expect-error inert not allowed */
-                _jsx("div", { inert: "", "aria-disabled": true, className: "ndl-spotlight-target-inert", children: children })), children: children }) })) }));
+    const indicator = useIndicator({
+        isOpen: isActive,
+        indicatorVariant,
+        indicatorPlacement,
+        targetRef: internalRef,
+        hasPulse,
+        hasAnchorPortal,
+    });
+    return (_jsxs(_Fragment, { children: [_jsx("div", Object.assign({ role: isActive ? 'button' : undefined, id: id, ref: mergedRefs, className: classes, onClick: (e) => {
+                    if (isActive && !isOpen) {
+                        setIsOpen(true);
+                        e.preventDefault();
+                    }
+                }, style: { backgroundColor, borderRadius }, onKeyDown: (e) => {
+                    if (isActive &&
+                        !isOpen &&
+                        (e.code === 'Enter' || e.code === 'Space')) {
+                        setIsOpen(true);
+                        e.preventDefault();
+                    }
+                }, tabIndex: isActive ? 0 : -1, "aria-label": "spotlight target" }, htmlAttributes, { children: _jsx(ConditionalWrap, { shouldWrap: isActive, 
+                    // TODO v4: inert should be fixed in react 19? https://github.com/facebook/react/pull/24730#event-12109747640. inert="" is a workaround for now
+                    wrap: (children) => (
+                    /* @ts-expect-error inert not allowed */
+                    _jsx("div", { inert: "", "aria-disabled": true, className: "ndl-spotlight-target-inert", children: children })), children: children }) })), _jsx(FloatingPortal, { root: indicator.hasAnchorPortal
+                    ? indicator.context.refs.reference.current
+                    : null, children: indicator.context.open && (_jsx("div", Object.assign({ className: indicator.indicatorClasses, ref: indicator.context.refs.setFloating, style: Object.assign(Object.assign({}, indicator.floatingStyles), indicator.style) }, indicator.getFloatingProps()))) })] }));
 });
 //# sourceMappingURL=SpotlightTarget.js.map

package/lib/esm/spotlight/SpotlightTarget.js.map

@@ -1 +1 @@
-{"version":3,"file":"SpotlightTarget.js","sourceRoot":"","sources":["../../../src/spotlight/SpotlightTarget.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AAC1D,OAAO,UAAU,MAAM,YAAY,CAAC;AAMpC,OAAO,eAAe,MAAM,4BAA4B,CAAC;AAgBzD,MAAM,CAAC,MAAM,eAAe,GAGxB,KAAK,CAAC,UAAU,CAAC,SAAS,eAAe,CAG3C,EACE,EAAE,EACF,QAAQ,GAAG,IAAI,EACf,eAAe,EACf,YAAY,EACZ,QAAQ,EACR,SAAS,EACT,cAAc,GACsC,EACtD,GAAsB;IAEtB,MAAM,EAAE,iBAAiB,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,mBAAmB,EAAE,CAAC;IAEvE,MAAM,OAAO,GAAG,UAAU,CACxB,sBAAsB,EACtB;QACE,4BAA4B,EAAE,QAAQ;QACtC,2BAA2B,EAAE,MAAM;KACpC,EACD,SAAS,CACV,CAAC;IAEF,MAAM,QAAQ,GAAG,iBAAiB,CAAC,EAAE,CAAC,CAAC;IAEvC,OAAO,CACL,cACE,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAClC,KAAK,EAAE,EAAE,eAAe,EAAE,YAAY,EAAE,YAExC,4BACE,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,EACrC,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,GAAG,EACR,SAAS,EAAC,4BAA4B,EACtC,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;gBACb,IAAI,QAAQ,IAAI,CAAC,MAAM,EAAE,CAAC;oBACxB,SAAS,CAAC,IAAI,CAAC,CAAC;oBAChB,CAAC,CAAC,cAAc,EAAE,CAAC;gBACrB,CAAC;YACH,CAAC,EACD,KAAK,EAAE,EAAE,YAAY,EAAE,EACvB,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE;gBACf,OAAO,CAAC,GAAG,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,sBAAsB;gBAC/C,IACE,QAAQ;oBACR,CAAC,MAAM;oBACP,CAAC,CAAC,CAAC,IAAI,KAAK,OAAO,IAAI,CAAC,CAAC,IAAI,KAAK,OAAO,CAAC,EAC1C,CAAC;oBACD,SAAS,CAAC,IAAI,CAAC,CAAC;oBAChB,CAAC,CAAC,cAAc,EAAE,CAAC;gBACrB,CAAC;YACH,CAAC,EACD,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,gBAChB,kBAAkB,IACzB,cAAc,cAElB,KAAC,eAAe,IACd,UAAU,EAAE,QAAQ;gBACpB,+IAA+I;gBAC/I,IAAI,EAAE,CAAC,QAAQ,EAAE,EAAE,CAAC;gBAClB,wCAAwC;gBACxC,cAAK,KAAK,EAAC,EAAE,yBAAe,SAAS,EAAC,4BAA4B,YAC/D,QAAQ,GACL,CACP,YAEA,QAAQ,GACO,IACd,GACF,CACP,CAAC;AACJ,CAAC,CAAsE,CAAC"}
+{"version":3,"file":"SpotlightTarget.js","sourceRoot":"","sources":["../../../src/spotlight/SpotlightTarget.tsx"],"names":[],"mappings":"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"}

package/lib/esm/spotlight/use-indicator.js

@@ -0,0 +1,102 @@
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+import { autoUpdate, offset, useFloating, useInteractions, useRole, } from '@floating-ui/react';
+import classNames from 'classnames';
+import { useMemo } from 'react';
+const crossAxisMult = {
+    left: -1,
+    middle: 0,
+    right: 1,
+};
+const calcOffset = (variant, placement, rects) => {
+    if (variant === 'border') {
+        // Border variant is always centered around the middle point
+        return {
+            mainAxis: -rects.reference.height / 2 - rects.floating.height / 2,
+            crossAxis: 0,
+        };
+    }
+    const [mainAxisPlacement, crossAxisPlacement] = placement.split('-');
+    /** Note for future reference:
+     * Main axis (vertical) is zero at the bottom border of the target.
+     * Cross axis (horizontal) is zero at the middle of the target
+     * */
+    let mainAxis = 0;
+    if (mainAxisPlacement === 'bottom') {
+        // put the indicator one height of the point above the bottom border of the target
+        mainAxis = -2 * rects.floating.height;
+    }
+    else if (mainAxisPlacement === 'middle') {
+        // put the indicator in the middle of the target
+        mainAxis = -rects.reference.height / 2 - rects.floating.height / 2;
+    }
+    else if (mainAxisPlacement === 'top') {
+        // put the indicator one height of the point below the top border of the target
+        mainAxis = -rects.reference.height + rects.floating.height;
+    }
+    return {
+        mainAxis,
+        crossAxis: crossAxisMult[crossAxisPlacement] *
+            (rects.reference.width / 2 - rects.floating.width * 1.5),
+    };
+};
+export function useIndicator({ isOpen, indicatorVariant = 'border', indicatorPlacement = 'top-right', targetRef, hasPulse = true, hasAnchorPortal, }) {
+    const data = useFloating({
+        open: isOpen,
+        placement: 'bottom',
+        middleware: [
+            offset(({ rects }) => calcOffset(indicatorVariant, indicatorPlacement, rects)),
+        ],
+        whileElementsMounted: autoUpdate,
+        elements: {
+            reference: targetRef === null || targetRef === void 0 ? void 0 : targetRef.current,
+        },
+    });
+    const context = data.context;
+    const role = useRole(context);
+    const interactions = useInteractions([role]);
+    return useMemo(() => {
+        var _a, _b, _c;
+        return (Object.assign(Object.assign(Object.assign({}, interactions), data), { style: {
+                width: indicatorVariant === 'border'
+                    ? `${((_a = targetRef === null || targetRef === void 0 ? void 0 : targetRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) || 0}px`
+                    : '8px',
+                height: indicatorVariant === 'border'
+                    ? `${((_b = targetRef === null || targetRef === void 0 ? void 0 : targetRef.current) === null || _b === void 0 ? void 0 : _b.clientHeight) || 0}px`
+                    : '8px',
+                borderRadius: indicatorVariant === 'border'
+                    ? `${((_c = targetRef === null || targetRef === void 0 ? void 0 : targetRef.current) === null || _c === void 0 ? void 0 : _c.style.borderRadius) || 0}`
+                    : '50%',
+            }, indicatorClasses: classNames('ndl-spotlight-target-open', {
+                'ndl-spotlight-target-indicator-border': indicatorVariant === 'border',
+                'ndl-spotlight-target-indicator-point': indicatorVariant === 'point',
+                'ndl-spotlight-target-pulse': hasPulse,
+            }), hasAnchorPortal }));
+    }, [
+        interactions,
+        data,
+        indicatorVariant,
+        targetRef,
+        hasPulse,
+        hasAnchorPortal,
+    ]);
+}
+//# sourceMappingURL=use-indicator.js.map

package/lib/esm/spotlight/use-indicator.js.map

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

package/lib/types/data-grid/Components.d.ts

@@ -116,4 +116,5 @@ export interface DropDownCellProps<T extends RowData> {
     portalTarget?: HTMLElement;
 }
 declare const DropDownCell: <T extends RowData>({ cell, options, portalTarget, }: DropDownCellProps<T>) => import("react/jsx-runtime").JSX.Element | null;
-export { ResizingBar, Header, Body, BodyCell, BodyRow, InlineEditCell, DropDownCell, RowActionCell, HeaderCell, HeaderTitle, Navigation, TableResults, RowsPerPage, Pagination, PaginationNumericButtons, PaginationArrowButton, PaginationNumericButton, NoDataPlaceholder, NoDataIllustration, LoadingPlaceholder, Scrollable, };
+declare const NoDataIcon: import("react").ForwardRefExoticComponent<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export { ResizingBar, Header, Body, BodyCell, BodyRow, InlineEditCell, DropDownCell, RowActionCell, HeaderCell, HeaderTitle, Navigation, TableResults, RowsPerPage, Pagination, PaginationNumericButtons, PaginationArrowButton, PaginationNumericButton, NoDataPlaceholder, NoDataIllustration, NoDataIcon, LoadingPlaceholder, Scrollable, };

package/lib/types/data-grid/DataGrid.d.ts

@@ -44,13 +44,16 @@ export declare const DataGridComponents: {
     PaginationArrowButton: ({ action, children, innerProps, }: import("./Components").PaginationArrowButtonProps) => import("react/jsx-runtime").JSX.Element;
     LoadingPlaceholder: ({ children, innerProps, }: import("./Components").CommonInnerProps<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
     NoDataPlaceholder: ({ children, innerProps, }: import("./Components").CommonInnerProps<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
+    /** @deprecated use NoDataIcon instead */
     NoDataIllustration: (props: import("react").SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+    NoDataIcon: import("react").ForwardRefExoticComponent<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
     NoDataPlaceholderContentWrapper: ({ children, innerProps, }: import("./Components").CommonInnerProps<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
     Scrollable: ({ children, innerProps }: import("./Components").CommonInnerProps) => import("react/jsx-runtime").JSX.Element;
 };
 declare enum BorderStyleEnum {
     AllSides = "all-sides",
     Horizontal = "horizontal",
+    Vertical = "vertical",
     None = "none"
 }
 export type BorderStyle = `${BorderStyleEnum}`;

package/lib/types/icons/generated/custom/DatagridNodata.d.ts

@@ -0,0 +1,23 @@
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+import { type SVGProps } from 'react';
+declare const SvgDatagridNodata: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export default SvgDatagridNodata;

package/lib/types/icons/generated/custom/index.d.ts

@@ -74,3 +74,4 @@ export { default as TextIcon } from './Text';
 export { default as TriangleIcon } from './Triangle';
 export { default as UnderlineIcon } from './Underline';
 export { default as VisualizeBloomIcon } from './VisualizeBloom';
+export { default as DatagridNodataIcon } from './DatagridNodata';

package/lib/types/spotlight/Spotlight.d.ts

@@ -20,6 +20,7 @@
  */
 import React from 'react';
 import { HtmlAttributes, PolymorphicForwardRefExoticComponent, PolymorphicPropsWithRef } from '../_common/types';
+import { PopoverProps } from '../popover';
 import { EventTypeLabelProps } from '../label';
 export type SpotlightActionsProps = {
     label: string;
@@ -61,17 +62,48 @@ export type SpotlightProps = {
     actions?: React.ComponentProps<typeof SpotlightActions>[];
     /** Left bottom corner content */
     beforeActions?: React.ReactNode;
-    /** Which element to initially focus. Either a tabbable index or ref */
-    initialFocus?: number | React.MutableRefObject<HTMLElement | null>;
+    /** Callback function called when Esc is pressed or on mouse click outside of the Spotlight*/
     onClose?: (action: SpotlightCloseAction) => void;
+    /** Use anchorEl for portal's container. Should be used if the spotlight is inside an Dialog or Modal */
+    hasAnchorPortal?: boolean;
     children?: React.ReactNode;
     className?: string;
     style?: React.CSSProperties;
     htmlAttributes?: HtmlAttributes<'div'>;
-};
-declare const Spotlight: Omit<React.ForwardRefExoticComponent<SpotlightProps & {
+} & Pick<PopoverProps, 'placement' | 'initialFocus'>;
+declare const Spotlight: Omit<React.ForwardRefExoticComponent<{
+    /** Id of the SpotlightTarget where the spotlight should be rendered */
+    target: string;
+    /** Action buttons in the footer */
+    actions?: React.ComponentProps<typeof SpotlightActions>[];
+    /** Left bottom corner content */
+    beforeActions?: React.ReactNode;
+    /** Callback function called when Esc is pressed or on mouse click outside of the Spotlight*/
+    onClose?: (action: SpotlightCloseAction) => void;
+    /** Use anchorEl for portal's container. Should be used if the spotlight is inside an Dialog or Modal */
+    hasAnchorPortal?: boolean;
+    children?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+    htmlAttributes?: HtmlAttributes<"div">;
+} & Pick<PopoverProps, "placement" | "initialFocus"> & {
     [key: string]: unknown;
-}>, "$$typeof"> & Omit<React.ExoticComponent<SpotlightProps & {
+}>, "$$typeof"> & Omit<React.ExoticComponent<{
+    /** Id of the SpotlightTarget where the spotlight should be rendered */
+    target: string;
+    /** Action buttons in the footer */
+    actions?: React.ComponentProps<typeof SpotlightActions>[];
+    /** Left bottom corner content */
+    beforeActions?: React.ReactNode;
+    /** Callback function called when Esc is pressed or on mouse click outside of the Spotlight*/
+    onClose?: (action: SpotlightCloseAction) => void;
+    /** Use anchorEl for portal's container. Should be used if the spotlight is inside an Dialog or Modal */
+    hasAnchorPortal?: boolean;
+    children?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+    htmlAttributes?: HtmlAttributes<"div">;
+} & Pick<PopoverProps, "placement" | "initialFocus"> & {
     [key: string]: unknown;
 }>, never> & (<InstanceT extends React.ElementType = "div">(props: PolymorphicPropsWithRef<InstanceT, SpotlightProps>) => React.ReactElement | null) & {
     Actions: PolymorphicForwardRefExoticComponent<"button", SpotlightActionsProps>;

package/lib/types/spotlight/SpotlightProvider.d.ts

@@ -29,6 +29,9 @@ type SpotlightContextType = {
     isActiveSpotlight: (target: string) => boolean;
     /** Sets the active spotlight to the provided target. Use null to clear active target */
     setActiveSpotlight: (target: string | null) => void;
+    registerTarget: (id: string, ref: React.RefObject<HTMLElement>) => void;
+    unregisterTarget: (id: string) => void;
+    registeredTargets: Record<string, React.RefObject<HTMLElement>>;
 };
 export declare const useSpotlightContext: () => SpotlightContextType;
 type SpotlightProviderProps = {

package/lib/types/spotlight/SpotlightTarget.d.ts

@@ -20,16 +20,22 @@
  */
 import React from 'react';
 import { PolymorphicForwardRefExoticComponent } from '../_common/types';
+import { IndicatorPlacement, IndicatorVariant } from './use-indicator';
 type SpotlightTargetProps = {
     /** id of the target. should match with target prop in Spotlight */
     id: string;
     /** if the target should have a pulse animation. default behaviour is true */
     hasPulse?: boolean;
+    /** variant of the target indicator */
+    indicatorVariant?: IndicatorVariant;
+    /** placement of the indicator. only applicable to point variant */
+    indicatorPlacement?: IndicatorPlacement;
     /** background color */
     backgroundColor?: React.CSSProperties['backgroundColor'];
     /** border radius */
     borderRadius?: React.CSSProperties['borderRadius'];
-    /** classnames are only applied when target is active */
+    /** Use anchorEl for portal's container. Should be used if the spotlight target is inside an Dialog */
+    hasAnchorPortal?: boolean;
     className?: string;
     children?: React.ReactNode;
 };

package/lib/types/spotlight/use-indicator.d.ts

@@ -0,0 +1,38 @@
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+import { useFloating, UseInteractionsReturn } from '@floating-ui/react';
+export type IndicatorVariant = 'border' | 'point';
+interface IndicatorOptions {
+    isOpen: boolean;
+    indicatorVariant?: IndicatorVariant;
+    indicatorPlacement?: IndicatorPlacement;
+    targetRef: React.RefObject<HTMLElement>;
+    hasPulse?: boolean;
+    hasAnchorPortal?: boolean;
+}
+interface UseIndicatorReturn extends UseInteractionsReturn, ReturnType<typeof useFloating> {
+    style: React.CSSProperties;
+    indicatorClasses?: string;
+    hasAnchorPortal?: boolean;
+}
+export type IndicatorPlacement = 'top-left' | 'top-middle' | 'top-right' | 'bottom-left' | 'bottom-middle' | 'bottom-right' | 'middle-left' | 'middle-middle' | 'middle-right';
+export declare function useIndicator({ isOpen, indicatorVariant, indicatorPlacement, targetRef, hasPulse, hasAnchorPortal, }: IndicatorOptions): UseIndicatorReturn;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neo4j-ndl/react",
-  "version": "3.2.5",
+  "version": "3.2.7",
   "sideEffects": false,
   "description": "React implementation of Neo4j Design System",
   "keywords": [
@@ -64,7 +64,7 @@
     "@tanstack/react-table": "8.20.5",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0",
-    "@neo4j-ndl/base": "^3.2.0"
+    "@neo4j-ndl/base": "^3.2.2"
   },
   "dependencies": {
     "@dnd-kit/core": "6.1.0",