@neo4j-ndl/react 3.8.9 → 3.8.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/cjs/graph-visualization/{graph-viz-buttons.js → graph-visualization-buttons.js} +12 -12
- package/lib/cjs/graph-visualization/graph-visualization-buttons.js.map +1 -0
- package/lib/cjs/graph-visualization/{graph-viz-context.js → graph-visualization-context.js} +10 -10
- package/lib/cjs/graph-visualization/graph-visualization-context.js.map +1 -0
- package/lib/cjs/graph-visualization/{graph-viz-sidepanel.js → graph-visualization-sidepanel.js} +8 -8
- package/lib/cjs/graph-visualization/graph-visualization-sidepanel.js.map +1 -0
- package/lib/cjs/graph-visualization/{graph-viz.js → graph-visualization.js} +35 -35
- package/lib/cjs/graph-visualization/graph-visualization.js.map +1 -0
- package/lib/cjs/graph-visualization/index.js +19 -9
- package/lib/cjs/graph-visualization/index.js.map +1 -1
- package/lib/cjs/graph-visualization/sidepanel-components/details-panel.js +13 -14
- package/lib/cjs/graph-visualization/sidepanel-components/details-panel.js.map +1 -1
- package/lib/cjs/graph-visualization/sidepanel-components/overview-panel.js +4 -4
- package/lib/cjs/graph-visualization/sidepanel-components/overview-panel.js.map +1 -1
- package/lib/cjs/graph-visualization/sidepanel-components/properties-table.js +1 -1
- package/lib/cjs/graph-visualization/sidepanel-components/properties-table.js.map +1 -1
- package/lib/cjs/graph-visualization/sidepanel-components/single-selection-sidepanel-contents.js +2 -2
- package/lib/cjs/graph-visualization/sidepanel-components/single-selection-sidepanel-contents.js.map +1 -1
- package/lib/cjs/graph-visualization/stories/{graph-viz-barebones.story.js → graph-visualization-barebones.story.js} +3 -3
- package/lib/cjs/graph-visualization/stories/graph-visualization-barebones.story.js.map +1 -0
- package/lib/cjs/graph-visualization/stories/{graph-viz-custom.story.js → graph-visualization-custom.story.js} +3 -3
- package/lib/cjs/graph-visualization/stories/graph-visualization-custom.story.js.map +1 -0
- package/lib/cjs/graph-visualization/stories/{graph-viz-default.story.js → graph-visualization-default.story.js} +3 -3
- package/lib/cjs/graph-visualization/stories/graph-visualization-default.story.js.map +1 -0
- package/lib/cjs/graph-visualization/stories/{graph-viz-maximalist.story.js → graph-visualization-maximalist.story.js} +4 -4
- package/lib/cjs/graph-visualization/stories/graph-visualization-maximalist.story.js.map +1 -0
- package/lib/cjs/graph-visualization/stories/{graph-viz.stories.js → graph-visualization.stories.js} +9 -9
- package/lib/cjs/graph-visualization/stories/graph-visualization.stories.js.map +1 -0
- package/lib/cjs/graph-visualization/stories/index.js +17 -17
- package/lib/cjs/graph-visualization/stories/index.js.map +1 -1
- package/lib/cjs/spotlight/Spotlight.js +56 -26
- package/lib/cjs/spotlight/Spotlight.js.map +1 -1
- package/lib/cjs/spotlight/SpotlightProvider.js +21 -18
- package/lib/cjs/spotlight/SpotlightProvider.js.map +1 -1
- package/lib/cjs/spotlight/SpotlightTarget.js +16 -10
- package/lib/cjs/spotlight/SpotlightTarget.js.map +1 -1
- package/lib/cjs/spotlight/use-indicator.js +3 -10
- package/lib/cjs/spotlight/use-indicator.js.map +1 -1
- package/lib/cjs/spotlight/use-spotlight.js +89 -0
- package/lib/cjs/spotlight/use-spotlight.js.map +1 -0
- package/lib/esm/graph-visualization/{graph-viz-buttons.js → graph-visualization-buttons.js} +12 -12
- package/lib/esm/graph-visualization/graph-visualization-buttons.js.map +1 -0
- package/lib/esm/graph-visualization/{graph-viz-context.js → graph-visualization-context.js} +8 -8
- package/lib/esm/graph-visualization/graph-visualization-context.js.map +1 -0
- package/lib/esm/graph-visualization/{graph-viz-sidepanel.js → graph-visualization-sidepanel.js} +6 -6
- package/lib/esm/graph-visualization/graph-visualization-sidepanel.js.map +1 -0
- package/lib/esm/graph-visualization/{graph-viz.js → graph-visualization.js} +33 -33
- package/lib/esm/graph-visualization/graph-visualization.js.map +1 -0
- package/lib/esm/graph-visualization/index.js +5 -4
- package/lib/esm/graph-visualization/index.js.map +1 -1
- package/lib/esm/graph-visualization/sidepanel-components/details-panel.js +6 -7
- package/lib/esm/graph-visualization/sidepanel-components/details-panel.js.map +1 -1
- package/lib/esm/graph-visualization/sidepanel-components/overview-panel.js +4 -4
- package/lib/esm/graph-visualization/sidepanel-components/overview-panel.js.map +1 -1
- package/lib/esm/graph-visualization/sidepanel-components/properties-table.js +1 -1
- package/lib/esm/graph-visualization/sidepanel-components/properties-table.js.map +1 -1
- package/lib/esm/graph-visualization/sidepanel-components/single-selection-sidepanel-contents.js +2 -2
- package/lib/esm/graph-visualization/sidepanel-components/single-selection-sidepanel-contents.js.map +1 -1
- package/lib/esm/graph-visualization/stories/{graph-viz-barebones.story.js → graph-visualization-barebones.story.js} +3 -3
- package/lib/esm/graph-visualization/stories/graph-visualization-barebones.story.js.map +1 -0
- package/lib/esm/graph-visualization/stories/{graph-viz-custom.story.js → graph-visualization-custom.story.js} +3 -3
- package/lib/esm/graph-visualization/stories/graph-visualization-custom.story.js.map +1 -0
- package/lib/esm/graph-visualization/stories/{graph-viz-default.story.js → graph-visualization-default.story.js} +3 -3
- package/lib/esm/graph-visualization/stories/graph-visualization-default.story.js.map +1 -0
- package/lib/esm/graph-visualization/stories/{graph-viz-maximalist.story.js → graph-visualization-maximalist.story.js} +4 -4
- package/lib/esm/graph-visualization/stories/graph-visualization-maximalist.story.js.map +1 -0
- package/lib/esm/graph-visualization/stories/{graph-viz.stories.js → graph-visualization.stories.js} +10 -10
- package/lib/esm/graph-visualization/stories/graph-visualization.stories.js.map +1 -0
- package/lib/esm/graph-visualization/stories/index.js +12 -12
- package/lib/esm/graph-visualization/stories/index.js.map +1 -1
- package/lib/esm/spotlight/Spotlight.js +48 -18
- package/lib/esm/spotlight/Spotlight.js.map +1 -1
- package/lib/esm/spotlight/SpotlightProvider.js +12 -9
- package/lib/esm/spotlight/SpotlightProvider.js.map +1 -1
- package/lib/esm/spotlight/SpotlightTarget.js +16 -10
- package/lib/esm/spotlight/SpotlightTarget.js.map +1 -1
- package/lib/esm/spotlight/use-indicator.js +3 -10
- package/lib/esm/spotlight/use-indicator.js.map +1 -1
- package/lib/esm/spotlight/use-spotlight.js +86 -0
- package/lib/esm/spotlight/use-spotlight.js.map +1 -0
- package/lib/types/graph-visualization/{graph-viz-buttons.d.ts → graph-visualization-buttons.d.ts} +12 -12
- package/lib/types/graph-visualization/{graph-viz-context.d.ts → graph-visualization-context.d.ts} +7 -7
- package/lib/types/graph-visualization/{graph-viz-sidepanel.d.ts → graph-visualization-sidepanel.d.ts} +3 -3
- package/lib/types/graph-visualization/{graph-viz.d.ts → graph-visualization.d.ts} +7 -7
- package/lib/types/graph-visualization/index.d.ts +5 -4
- package/lib/types/graph-visualization/map-to-nvl-graph.d.ts +1 -1
- package/lib/types/graph-visualization/sidepanel-components/properties-table.d.ts +1 -1
- package/lib/types/graph-visualization/stories/index.d.ts +8 -8
- package/lib/types/graph-visualization/stories/story-data.d.ts +1 -1
- package/lib/types/graph-visualization/use-managed-selection-state.d.ts +1 -1
- package/lib/types/spotlight/SpotlightProvider.d.ts +2 -0
- package/lib/types/spotlight/SpotlightTarget.d.ts +2 -0
- package/lib/types/spotlight/use-indicator.d.ts +1 -1
- package/lib/types/spotlight/use-spotlight.d.ts +41 -0
- package/package.json +5 -4
- package/lib/cjs/graph-visualization/graph-viz-buttons.js.map +0 -1
- package/lib/cjs/graph-visualization/graph-viz-context.js.map +0 -1
- package/lib/cjs/graph-visualization/graph-viz-sidepanel.js.map +0 -1
- package/lib/cjs/graph-visualization/graph-viz.js.map +0 -1
- package/lib/cjs/graph-visualization/stories/graph-viz-barebones.story.js.map +0 -1
- package/lib/cjs/graph-visualization/stories/graph-viz-custom.story.js.map +0 -1
- package/lib/cjs/graph-visualization/stories/graph-viz-default.story.js.map +0 -1
- package/lib/cjs/graph-visualization/stories/graph-viz-maximalist.story.js.map +0 -1
- package/lib/cjs/graph-visualization/stories/graph-viz.stories.js.map +0 -1
- package/lib/esm/graph-visualization/graph-viz-buttons.js.map +0 -1
- package/lib/esm/graph-visualization/graph-viz-context.js.map +0 -1
- package/lib/esm/graph-visualization/graph-viz-sidepanel.js.map +0 -1
- package/lib/esm/graph-visualization/graph-viz.js.map +0 -1
- package/lib/esm/graph-visualization/stories/graph-viz-barebones.story.js.map +0 -1
- package/lib/esm/graph-visualization/stories/graph-viz-custom.story.js.map +0 -1
- package/lib/esm/graph-visualization/stories/graph-viz-default.story.js.map +0 -1
- package/lib/esm/graph-visualization/stories/graph-viz-maximalist.story.js.map +0 -1
- package/lib/esm/graph-visualization/stories/graph-viz.stories.js.map +0 -1
- /package/lib/types/graph-visualization/stories/{graph-viz-barebones.story.d.ts → graph-visualization-barebones.story.d.ts} +0 -0
- /package/lib/types/graph-visualization/stories/{graph-viz-custom.story.d.ts → graph-visualization-custom.story.d.ts} +0 -0
- /package/lib/types/graph-visualization/stories/{graph-viz-default.story.d.ts → graph-visualization-default.story.d.ts} +0 -0
- /package/lib/types/graph-visualization/stories/{graph-viz-maximalist.story.d.ts → graph-visualization-maximalist.story.d.ts} +0 -0
- /package/lib/types/graph-visualization/stories/{graph-viz.stories.d.ts → graph-visualization.stories.d.ts} +0 -0
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { jsx as _jsx,
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
/**
|
|
3
3
|
*
|
|
4
4
|
* Copyright (c) "Neo4j"
|
|
@@ -19,8 +19,9 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
|
|
|
19
19
|
* You should have received a copy of the GNU General Public License
|
|
20
20
|
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|
21
21
|
*/
|
|
22
|
+
import { FloatingOverlay, FloatingPortal } from '@floating-ui/react';
|
|
22
23
|
import classNames from 'classnames';
|
|
23
|
-
import { createContext, useCallback, useContext, useState } from 'react';
|
|
24
|
+
import { createContext, useCallback, useContext, useEffect, useRef, useState, } from 'react';
|
|
24
25
|
const SpotlightContext = createContext(null);
|
|
25
26
|
export const useSpotlightContext = () => {
|
|
26
27
|
const context = useContext(SpotlightContext);
|
|
@@ -44,6 +45,7 @@ export const SpotlightProvider = ({ children, hasOverlay = true, isOverlayTransp
|
|
|
44
45
|
});
|
|
45
46
|
}, []);
|
|
46
47
|
const contextValue = {
|
|
48
|
+
hasOverlay,
|
|
47
49
|
isActiveSpotlight: useCallback((target) => target === active, [active]),
|
|
48
50
|
isOpen,
|
|
49
51
|
registerTarget,
|
|
@@ -53,14 +55,15 @@ export const SpotlightProvider = ({ children, hasOverlay = true, isOverlayTransp
|
|
|
53
55
|
unregisterTarget,
|
|
54
56
|
};
|
|
55
57
|
const overlayClasses = classNames('ndl-spotlight-overlay', {
|
|
58
|
+
'ndl-spotlight-overlay-opaque': !isOverlayTransparent,
|
|
56
59
|
'ndl-spotlight-overlay-open': isOpen && active !== null,
|
|
57
|
-
'ndl-spotlight-overlay-transparent': isOverlayTransparent,
|
|
58
60
|
});
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
61
|
+
const overlayRootRef = useRef(null);
|
|
62
|
+
useEffect(() => {
|
|
63
|
+
if (active !== null) {
|
|
64
|
+
overlayRootRef.current = document.getElementById(active);
|
|
65
|
+
}
|
|
66
|
+
}, [active]);
|
|
67
|
+
return (_jsxs(SpotlightContext.Provider, { value: contextValue, children: [hasOverlay && active !== null && isOpen && (_jsx(FloatingPortal, { root: overlayRootRef.current, children: _jsx(FloatingOverlay, { lockScroll: true, className: overlayClasses, "data-testid": "ndl-spotlight-overlay" }) })), children] }));
|
|
65
68
|
};
|
|
66
69
|
//# sourceMappingURL=SpotlightProvider.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SpotlightProvider.js","sourceRoot":"","sources":["../../../src/spotlight/SpotlightProvider.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,OAAO,
|
|
1
|
+
{"version":3,"file":"SpotlightProvider.js","sourceRoot":"","sources":["../../../src/spotlight/SpotlightProvider.tsx"],"names":[],"mappings":"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"}
|
|
@@ -25,9 +25,9 @@ import React, { useEffect } from 'react';
|
|
|
25
25
|
import { ConditionalWrap } from '../conditional-wrap';
|
|
26
26
|
import { useSpotlightContext } from './SpotlightProvider';
|
|
27
27
|
import { useIndicator, } from './use-indicator';
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
const { isActiveSpotlight, isOpen, setIsOpen, registerTarget, unregisterTarget, } = useSpotlightContext();
|
|
28
|
+
export const SpotlightTarget = React.forwardRef(function SpotlightTarget({ id, hasPulse = true, indicatorVariant = 'border', indicatorPlacement = 'top-right', backgroundColor, borderRadius, children, className, htmlAttributes, as, shouldFitToChildren = false, }, ref) {
|
|
29
|
+
const Component = as !== null && as !== void 0 ? as : 'div';
|
|
30
|
+
const { isActiveSpotlight, isOpen, setIsOpen, registerTarget, unregisterTarget, setActiveSpotlight, } = useSpotlightContext();
|
|
31
31
|
const internalRef = React.useRef(null);
|
|
32
32
|
const mergedRefs = useMergeRefs([ref, internalRef]);
|
|
33
33
|
useEffect(() => {
|
|
@@ -37,7 +37,6 @@ export const SpotlightTarget = React.forwardRef(function SpotlightTarget({ id, h
|
|
|
37
37
|
}, [id, registerTarget, unregisterTarget]);
|
|
38
38
|
const isActive = isActiveSpotlight(id);
|
|
39
39
|
const indicator = useIndicator({
|
|
40
|
-
hasAnchorPortal,
|
|
41
40
|
hasPulse,
|
|
42
41
|
indicatorPlacement,
|
|
43
42
|
indicatorVariant,
|
|
@@ -45,9 +44,13 @@ export const SpotlightTarget = React.forwardRef(function SpotlightTarget({ id, h
|
|
|
45
44
|
targetRef: internalRef,
|
|
46
45
|
});
|
|
47
46
|
const classes = classNames('ndl-spotlight-target', {
|
|
47
|
+
'ndl-spotlight-target-fit-to-children': shouldFitToChildren,
|
|
48
48
|
'ndl-spotlight-target-open': isOpen && isActive,
|
|
49
49
|
}, className);
|
|
50
|
-
|
|
50
|
+
const inertClasses = classNames('ndl-spotlight-target-inert', {
|
|
51
|
+
'ndl-spotlight-target-inert-fit-to-children': shouldFitToChildren,
|
|
52
|
+
}, className);
|
|
53
|
+
return (_jsxs(_Fragment, { children: [_jsx(Component, Object.assign({ role: isActive ? 'button' : undefined, id: id, ref: mergedRefs, className: classes, onClick: (e) => {
|
|
51
54
|
if (isActive && !isOpen) {
|
|
52
55
|
setIsOpen(true);
|
|
53
56
|
e.preventDefault();
|
|
@@ -59,12 +62,15 @@ export const SpotlightTarget = React.forwardRef(function SpotlightTarget({ id, h
|
|
|
59
62
|
setIsOpen(true);
|
|
60
63
|
e.preventDefault();
|
|
61
64
|
}
|
|
65
|
+
else if (e.code === 'Escape' && isActive) {
|
|
66
|
+
setActiveSpotlight(null);
|
|
67
|
+
}
|
|
62
68
|
}, tabIndex: isActive ? 0 : -1, "aria-label": "spotlight target" }, htmlAttributes, { children: _jsx(ConditionalWrap, { shouldWrap: isActive,
|
|
63
69
|
// TODO v4: inert should be fixed in react 19? https://github.com/facebook/react/pull/24730#event-12109747640. inert="" is a workaround for now
|
|
64
|
-
wrap: (children) => (
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
70
|
+
wrap: (children) => (_jsx("div", {
|
|
71
|
+
/* @ts-expect-error inert not allowed */
|
|
72
|
+
inert: "", "aria-disabled": true, className: inertClasses, children: children })), children: children }) })), _jsxs(FloatingPortal, { root: indicator.context.refs.reference.current, children: [isActive && isOpen && (_jsx("div", { className: classNames(classes, 'ndl-spotlight-target-overlay'),
|
|
73
|
+
// @ts-expect-error inert not allowed
|
|
74
|
+
inert: "", children: children })), indicator.context.open && (_jsx(_Fragment, { children: _jsx("div", Object.assign({ className: indicator.indicatorClasses, ref: indicator.context.refs.setFloating, style: Object.assign(Object.assign({}, indicator.floatingStyles), indicator.style) }, indicator.getFloatingProps())) }))] })] }));
|
|
69
75
|
});
|
|
70
76
|
//# sourceMappingURL=SpotlightTarget.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SpotlightTarget.js","sourceRoot":"","sources":["../../../src/spotlight/SpotlightTarget.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClE,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAOzC,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AAC1D,OAAO,EAGL,YAAY,GACb,MAAM,iBAAiB,CAAC;
|
|
1
|
+
{"version":3,"file":"SpotlightTarget.js","sourceRoot":"","sources":["../../../src/spotlight/SpotlightTarget.tsx"],"names":[],"mappings":"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"}
|
|
@@ -58,7 +58,7 @@ const calcOffset = (variant, placement, rects) => {
|
|
|
58
58
|
mainAxis,
|
|
59
59
|
};
|
|
60
60
|
};
|
|
61
|
-
export function useIndicator({ isOpen, indicatorVariant = 'border', indicatorPlacement = 'top-right', targetRef, hasPulse = true,
|
|
61
|
+
export function useIndicator({ isOpen, indicatorVariant = 'border', indicatorPlacement = 'top-right', targetRef, hasPulse = true, }) {
|
|
62
62
|
const data = useFloating({
|
|
63
63
|
elements: {
|
|
64
64
|
reference: targetRef === null || targetRef === void 0 ? void 0 : targetRef.current,
|
|
@@ -75,7 +75,7 @@ export function useIndicator({ isOpen, indicatorVariant = 'border', indicatorPla
|
|
|
75
75
|
const interactions = useInteractions([role]);
|
|
76
76
|
return useMemo(() => {
|
|
77
77
|
var _a, _b, _c, _d, _e, _f;
|
|
78
|
-
return (Object.assign(Object.assign(Object.assign({}, interactions), data), {
|
|
78
|
+
return (Object.assign(Object.assign(Object.assign({}, interactions), data), { indicatorClasses: classNames('ndl-spotlight-target-indicator', {
|
|
79
79
|
'ndl-spotlight-target-indicator-border': indicatorVariant === 'border',
|
|
80
80
|
'ndl-spotlight-target-indicator-point': indicatorVariant === 'point',
|
|
81
81
|
'ndl-spotlight-target-pulse': hasPulse,
|
|
@@ -90,13 +90,6 @@ export function useIndicator({ isOpen, indicatorVariant = 'border', indicatorPla
|
|
|
90
90
|
? `${(_f = (_e = targetRef === null || targetRef === void 0 ? void 0 : targetRef.current) === null || _e === void 0 ? void 0 : _e.clientWidth) !== null && _f !== void 0 ? _f : 0}px`
|
|
91
91
|
: '8px',
|
|
92
92
|
} }));
|
|
93
|
-
}, [
|
|
94
|
-
interactions,
|
|
95
|
-
data,
|
|
96
|
-
indicatorVariant,
|
|
97
|
-
targetRef,
|
|
98
|
-
hasPulse,
|
|
99
|
-
hasAnchorPortal,
|
|
100
|
-
]);
|
|
93
|
+
}, [interactions, data, indicatorVariant, targetRef, hasPulse]);
|
|
101
94
|
}
|
|
102
95
|
//# sourceMappingURL=use-indicator.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-indicator.js","sourceRoot":"","sources":["../../../src/spotlight/use-indicator.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,EACL,UAAU,EAEV,MAAM,EACN,WAAW,EACX,eAAe,EAEf,OAAO,GACR,MAAM,oBAAoB,CAAC;AAC5B,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAgChC,MAAM,aAAa,GAA2B;IAC5C,IAAI,EAAE,CAAC,CAAC;IACR,MAAM,EAAE,CAAC;IACT,KAAK,EAAE,CAAC;CACT,CAAC;AAEF,MAAM,UAAU,GAAG,CACjB,OAAyB,EACzB,SAA6B,EAC7B,KAAmB,EACnB,EAAE;IACF,IAAI,OAAO,KAAK,QAAQ,EAAE,CAAC;QACzB,4DAA4D;QAC5D,OAAO;YACL,SAAS,EAAE,CAAC;YACZ,QAAQ,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC;SAClE,CAAC;IACJ,CAAC;IAED,MAAM,CAAC,iBAAiB,EAAE,kBAAkB,CAAC,GAAG,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IACrE;;;SAGK;IAEL,IAAI,QAAQ,GAAG,CAAC,CAAC;IACjB,IAAI,iBAAiB,KAAK,QAAQ,EAAE,CAAC;QACnC,kFAAkF;QAClF,QAAQ,GAAG,CAAC,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAC;IACxC,CAAC;SAAM,IAAI,iBAAiB,KAAK,QAAQ,EAAE,CAAC;QAC1C,gDAAgD;QAChD,QAAQ,GAAG,CAAC,KAAK,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC;IACrE,CAAC;SAAM,IAAI,iBAAiB,KAAK,KAAK,EAAE,CAAC;QACvC,+EAA+E;QAC/E,QAAQ,GAAG,CAAC,KAAK,CAAC,SAAS,CAAC,MAAM,GAAG,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAC;IAC7D,CAAC;IAED,OAAO;QACL,SAAS,EACP,aAAa,CAAC,kBAAkB,CAAC;YACjC,CAAC,KAAK,CAAC,SAAS,CAAC,KAAK,GAAG,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,GAAG,GAAG,CAAC;QAC1D,QAAQ;KACT,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,UAAU,YAAY,CAAC,EAC3B,MAAM,EACN,gBAAgB,GAAG,QAAQ,EAC3B,kBAAkB,GAAG,WAAW,EAChC,SAAS,EACT,QAAQ,GAAG,IAAI,
|
|
1
|
+
{"version":3,"file":"use-indicator.js","sourceRoot":"","sources":["../../../src/spotlight/use-indicator.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
/**
|
|
2
|
+
*
|
|
3
|
+
* Copyright (c) "Neo4j"
|
|
4
|
+
* Neo4j Sweden AB [http://neo4j.com]
|
|
5
|
+
*
|
|
6
|
+
* This file is part of Neo4j.
|
|
7
|
+
*
|
|
8
|
+
* Neo4j is free software: you can redistribute it and/or modify
|
|
9
|
+
* it under the terms of the GNU General Public License as published by
|
|
10
|
+
* the Free Software Foundation, either version 3 of the License, or
|
|
11
|
+
* (at your option) any later version.
|
|
12
|
+
*
|
|
13
|
+
* This program is distributed in the hope that it will be useful,
|
|
14
|
+
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
15
|
+
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
16
|
+
* GNU General Public License for more details.
|
|
17
|
+
*
|
|
18
|
+
* You should have received a copy of the GNU General Public License
|
|
19
|
+
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|
20
|
+
*/
|
|
21
|
+
import { autoUpdate, flip, offset, shift, useClick, useDismiss, useFloating, useInteractions, useRole, useTransitionStyles, } from '@floating-ui/react';
|
|
22
|
+
import { tokens } from '@neo4j-ndl/base';
|
|
23
|
+
import { useMemo, useState } from 'react';
|
|
24
|
+
export function useSpotlight({ isInitialOpen = false, placement = 'bottom', isOpen: controlledOpen, onOpenChange: setControlledOpen, anchorElement, anchorElementAsPortalAnchor, initialFocus, closeOnClickOutside, strategy = 'absolute', } = {}) {
|
|
25
|
+
var _a;
|
|
26
|
+
const [isOpenUncontrolled, setIsOpenUncontrolled] = useState(isInitialOpen);
|
|
27
|
+
const [labelId, setLabelId] = useState();
|
|
28
|
+
const [descriptionId, setDescriptionId] = useState();
|
|
29
|
+
const isOpen = controlledOpen !== null && controlledOpen !== void 0 ? controlledOpen : isOpenUncontrolled;
|
|
30
|
+
const setIsOpen = setControlledOpen !== null && setControlledOpen !== void 0 ? setControlledOpen : setIsOpenUncontrolled;
|
|
31
|
+
const data = useFloating({
|
|
32
|
+
elements: {
|
|
33
|
+
reference: anchorElement,
|
|
34
|
+
},
|
|
35
|
+
middleware: [
|
|
36
|
+
offset(10),
|
|
37
|
+
flip({
|
|
38
|
+
crossAxis: placement.includes('-'),
|
|
39
|
+
fallbackAxisSideDirection: 'end',
|
|
40
|
+
padding: 5,
|
|
41
|
+
}),
|
|
42
|
+
shift({ padding: 5 }),
|
|
43
|
+
],
|
|
44
|
+
onOpenChange: (open, event) => {
|
|
45
|
+
setIsOpen(open);
|
|
46
|
+
setControlledOpen === null || setControlledOpen === void 0 ? void 0 : setControlledOpen(open, event);
|
|
47
|
+
},
|
|
48
|
+
open: isOpen,
|
|
49
|
+
placement: placement,
|
|
50
|
+
strategy,
|
|
51
|
+
whileElementsMounted: autoUpdate,
|
|
52
|
+
});
|
|
53
|
+
const context = data.context;
|
|
54
|
+
const click = useClick(context, {
|
|
55
|
+
enabled: controlledOpen === undefined,
|
|
56
|
+
});
|
|
57
|
+
const dismiss = useDismiss(context, {
|
|
58
|
+
outsidePress: closeOnClickOutside,
|
|
59
|
+
});
|
|
60
|
+
const role = useRole(context, {
|
|
61
|
+
role: 'dialog',
|
|
62
|
+
});
|
|
63
|
+
const interactions = useInteractions([click, dismiss, role]);
|
|
64
|
+
const { styles: transitionStyles } = useTransitionStyles(context, {
|
|
65
|
+
duration: (_a = Number.parseInt(tokens.transitions.values.duration.quick, 10)) !== null && _a !== void 0 ? _a : 0,
|
|
66
|
+
});
|
|
67
|
+
return useMemo(() => (Object.assign(Object.assign(Object.assign({ isOpen,
|
|
68
|
+
setIsOpen }, interactions), data), { transitionStyles,
|
|
69
|
+
labelId,
|
|
70
|
+
descriptionId,
|
|
71
|
+
setLabelId,
|
|
72
|
+
setDescriptionId,
|
|
73
|
+
anchorElementAsPortalAnchor,
|
|
74
|
+
initialFocus })), [
|
|
75
|
+
isOpen,
|
|
76
|
+
setIsOpen,
|
|
77
|
+
interactions,
|
|
78
|
+
data,
|
|
79
|
+
transitionStyles,
|
|
80
|
+
labelId,
|
|
81
|
+
descriptionId,
|
|
82
|
+
anchorElementAsPortalAnchor,
|
|
83
|
+
initialFocus,
|
|
84
|
+
]);
|
|
85
|
+
}
|
|
86
|
+
//# sourceMappingURL=use-spotlight.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-spotlight.js","sourceRoot":"","sources":["../../../src/spotlight/use-spotlight.tsx"],"names":[],"mappings":"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"}
|
package/lib/types/graph-visualization/{graph-viz-buttons.d.ts → graph-visualization-buttons.d.ts}
RENAMED
|
@@ -21,13 +21,13 @@
|
|
|
21
21
|
import { type TooltipProps } from '@neo4j-ndl/react';
|
|
22
22
|
import { type CSSProperties, type PropsWithChildren } from 'react';
|
|
23
23
|
import { type HtmlAttributes } from '../_common/types';
|
|
24
|
-
type
|
|
24
|
+
type GraphVisualizationButtonProps = {
|
|
25
25
|
className?: string;
|
|
26
26
|
style?: CSSProperties;
|
|
27
27
|
htmlAttributes?: HtmlAttributes<'button'>;
|
|
28
28
|
tooltipPlacement?: TooltipProps['placement'];
|
|
29
29
|
};
|
|
30
|
-
type BaseProperties =
|
|
30
|
+
type BaseProperties = GraphVisualizationButtonProps & {
|
|
31
31
|
tipContent: string;
|
|
32
32
|
testid?: string;
|
|
33
33
|
ariaLabel?: string;
|
|
@@ -36,14 +36,14 @@ type BaseProperties = GraphVizButtonProps & {
|
|
|
36
36
|
onClick?: () => void;
|
|
37
37
|
onMouseDown?: () => void;
|
|
38
38
|
};
|
|
39
|
-
export type
|
|
40
|
-
export declare const GroupButton: (props:
|
|
41
|
-
export declare const SingleSelectButton: ({ className, style, htmlAttributes, tooltipPlacement, }:
|
|
42
|
-
export declare const BoxSelectButton: ({ className, style, htmlAttributes, tooltipPlacement, }:
|
|
43
|
-
export declare const LassoSelectButton: ({ className, style, htmlAttributes, tooltipPlacement, }:
|
|
44
|
-
export declare const ZoomInButton: ({ className, style, htmlAttributes, tooltipPlacement, }:
|
|
45
|
-
export declare const ZoomOutButton: ({ className, style, htmlAttributes, tooltipPlacement, }:
|
|
46
|
-
export declare const ZoomToFitButton: ({ className, style, htmlAttributes, tooltipPlacement, }:
|
|
47
|
-
export declare const ToggleSidePanelButton: ({ className, htmlAttributes, style, tooltipPlacement, }:
|
|
48
|
-
export declare const DownloadButton: ({ className, style, htmlAttributes, tooltipPlacement, }:
|
|
39
|
+
export type GraphVisualizationGroupButton = PropsWithChildren<BaseProperties>;
|
|
40
|
+
export declare const GroupButton: (props: GraphVisualizationGroupButton) => import("react/jsx-runtime").JSX.Element;
|
|
41
|
+
export declare const SingleSelectButton: ({ className, style, htmlAttributes, tooltipPlacement, }: GraphVisualizationButtonProps) => import("react/jsx-runtime").JSX.Element;
|
|
42
|
+
export declare const BoxSelectButton: ({ className, style, htmlAttributes, tooltipPlacement, }: GraphVisualizationButtonProps) => import("react/jsx-runtime").JSX.Element;
|
|
43
|
+
export declare const LassoSelectButton: ({ className, style, htmlAttributes, tooltipPlacement, }: GraphVisualizationButtonProps) => import("react/jsx-runtime").JSX.Element;
|
|
44
|
+
export declare const ZoomInButton: ({ className, style, htmlAttributes, tooltipPlacement, }: GraphVisualizationButtonProps) => import("react/jsx-runtime").JSX.Element;
|
|
45
|
+
export declare const ZoomOutButton: ({ className, style, htmlAttributes, tooltipPlacement, }: GraphVisualizationButtonProps) => import("react/jsx-runtime").JSX.Element;
|
|
46
|
+
export declare const ZoomToFitButton: ({ className, style, htmlAttributes, tooltipPlacement, }: GraphVisualizationButtonProps) => import("react/jsx-runtime").JSX.Element;
|
|
47
|
+
export declare const ToggleSidePanelButton: ({ className, htmlAttributes, style, tooltipPlacement, }: GraphVisualizationButtonProps) => import("react/jsx-runtime").JSX.Element;
|
|
48
|
+
export declare const DownloadButton: ({ className, style, htmlAttributes, tooltipPlacement, }: GraphVisualizationButtonProps) => import("react/jsx-runtime").JSX.Element;
|
|
49
49
|
export {};
|
package/lib/types/graph-visualization/{graph-viz-context.d.ts → graph-visualization-context.d.ts}
RENAMED
|
@@ -76,10 +76,10 @@ export type NeoRel = Relationship & {
|
|
|
76
76
|
/**
|
|
77
77
|
* Data that is shared across the graph visualization component.
|
|
78
78
|
*
|
|
79
|
-
* @see {@link
|
|
79
|
+
* @see {@link useGraphVisualizationContext}
|
|
80
80
|
* @alpha
|
|
81
81
|
*/
|
|
82
|
-
export type
|
|
82
|
+
export type GraphVisualizationContextData = {
|
|
83
83
|
nvlInstance: React.MutableRefObject<NVL | null>;
|
|
84
84
|
sidepanel: Sidepanel | null;
|
|
85
85
|
gesture: Gesture;
|
|
@@ -88,21 +88,21 @@ export type GraphVizContextData = {
|
|
|
88
88
|
nvlGraph: NvlGraph;
|
|
89
89
|
selected: GraphSelection;
|
|
90
90
|
};
|
|
91
|
-
export declare const
|
|
91
|
+
export declare const GraphVisualizationContext: import("react").Context<GraphVisualizationContextData | undefined>;
|
|
92
92
|
/**
|
|
93
93
|
* Hook to access the graph visualization context.
|
|
94
94
|
*
|
|
95
95
|
* This hook is used to implement custom UI components like buttons, panels, and controls
|
|
96
96
|
* that need access to data and functionality from the graph visualization component.
|
|
97
|
-
* @see {@link
|
|
97
|
+
* @see {@link GraphVisualizationContextData}
|
|
98
98
|
*
|
|
99
99
|
* @returns The graph visualization context containing NVL instance, sidepanel, gestures, and graph data
|
|
100
|
-
* @throws Error if used outside of a
|
|
100
|
+
* @throws Error if used outside of a GraphVisualizationContext provider
|
|
101
101
|
*
|
|
102
102
|
* @example
|
|
103
103
|
* ```tsx
|
|
104
104
|
* const NodeLoggerButton = () => {
|
|
105
|
-
* const { selected } =
|
|
105
|
+
* const { selected } = useGraphVisualizationContext();
|
|
106
106
|
*
|
|
107
107
|
* const handleClick = () => {
|
|
108
108
|
* console.log('Selected nodes:', selected.nodeIds);
|
|
@@ -117,6 +117,6 @@ export declare const GraphVizContext: import("react").Context<GraphVizContextDat
|
|
|
117
117
|
* ```
|
|
118
118
|
* @alpha
|
|
119
119
|
*/
|
|
120
|
-
export declare const
|
|
120
|
+
export declare const useGraphVisualizationContext: () => GraphVisualizationContextData;
|
|
121
121
|
export type Gesture = 'single' | 'box' | 'lasso';
|
|
122
122
|
export type InteractionMode = 'select' | 'draw' | 'edit-text' | 'pan' | 'drag' | 'none';
|
|
@@ -18,9 +18,9 @@
|
|
|
18
18
|
* You should have received a copy of the GNU General Public License
|
|
19
19
|
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|
20
20
|
*/
|
|
21
|
-
import { type Sidepanel } from './graph-
|
|
22
|
-
export declare const
|
|
23
|
-
({ sidepanel }: {
|
|
21
|
+
import { type Sidepanel } from './graph-visualization-context';
|
|
22
|
+
export declare const GraphVisualizationSidepanel: {
|
|
23
|
+
({ sidepanel, }: {
|
|
24
24
|
sidepanel: Sidepanel;
|
|
25
25
|
}): import("react/jsx-runtime").JSX.Element | null;
|
|
26
26
|
Title: ({ children }: {
|
|
@@ -22,7 +22,7 @@ import type NVL from '@neo4j-nvl/base';
|
|
|
22
22
|
import { type InteractiveNvlWrapperProps } from '@neo4j-nvl/react';
|
|
23
23
|
import React from 'react';
|
|
24
24
|
import { type PolymorphicRef } from '../_common/types';
|
|
25
|
-
import { type Gesture, type GraphSelection, type InteractionMode, type NeoNode, type NeoRel, type Sidepanel } from './graph-
|
|
25
|
+
import { type Gesture, type GraphSelection, type InteractionMode, type NeoNode, type NeoRel, type Sidepanel } from './graph-visualization-context';
|
|
26
26
|
export declare const DEFAULT_NVL_OPTIONS: {
|
|
27
27
|
disableTelemetry: boolean;
|
|
28
28
|
disableWebGL: boolean;
|
|
@@ -31,7 +31,7 @@ export declare const DEFAULT_NVL_OPTIONS: {
|
|
|
31
31
|
relationshipThreshold: number;
|
|
32
32
|
useWebGL: boolean;
|
|
33
33
|
};
|
|
34
|
-
export type
|
|
34
|
+
export type GraphVisualizationProps<T extends React.ElementType> = {
|
|
35
35
|
nvlRef?: React.RefObject<NVL>;
|
|
36
36
|
sidepanel?: Sidepanel | null;
|
|
37
37
|
topRightIsland?: React.ReactNode;
|
|
@@ -66,7 +66,7 @@ export type GraphVizProps<T extends React.ElementType> = {
|
|
|
66
66
|
* @example
|
|
67
67
|
* Basic usage:
|
|
68
68
|
* ```tsx
|
|
69
|
-
* <
|
|
69
|
+
* <GraphVisualization
|
|
70
70
|
* nodes={nodes}
|
|
71
71
|
* rels={relationships}
|
|
72
72
|
* selected={selection}
|
|
@@ -77,7 +77,7 @@ export type GraphVizProps<T extends React.ElementType> = {
|
|
|
77
77
|
* @example
|
|
78
78
|
* With custom controls:
|
|
79
79
|
* ```tsx
|
|
80
|
-
* <
|
|
80
|
+
* <GraphVisualization
|
|
81
81
|
* nodes={nodes}
|
|
82
82
|
* rels={relationships}
|
|
83
83
|
* topRightIsland={<CustomControls />}
|
|
@@ -91,13 +91,13 @@ export type GraphVizProps<T extends React.ElementType> = {
|
|
|
91
91
|
* />
|
|
92
92
|
* ```
|
|
93
93
|
*
|
|
94
|
-
* @param props - {@link
|
|
94
|
+
* @param props - {@link GraphVisualizationProps}
|
|
95
95
|
* @returns A React component that renders an interactive graph visualization
|
|
96
96
|
*
|
|
97
97
|
* @alpha
|
|
98
98
|
*/
|
|
99
|
-
export declare function
|
|
100
|
-
export declare namespace
|
|
99
|
+
export declare function GraphVisualization<T extends React.ElementType = 'div'>({ nvlRef: rawNvlRef, nvlCallbacks, nvlOptions, sidepanel: rawSidepanel, nodes: rawNodes, rels: rawRels, topLeftIsland, topRightIsland, bottomLeftIsland, bottomRightIsland, gesture, setGesture, selected: rawSelected, setSelected: rawSetSelected, interactionMode: rawInteractionMode, setInteractionMode: rawSetInteractionMode, mouseEventCallbacks, className, style, htmlAttributes, ref, as, ...restProps }: GraphVisualizationProps<T>): import("react/jsx-runtime").JSX.Element;
|
|
100
|
+
export declare namespace GraphVisualization {
|
|
101
101
|
var ZoomInButton: ({ className, style, htmlAttributes, tooltipPlacement, }: {
|
|
102
102
|
className?: string;
|
|
103
103
|
style?: React.CSSProperties;
|
|
@@ -18,7 +18,8 @@
|
|
|
18
18
|
* You should have received a copy of the GNU General Public License
|
|
19
19
|
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|
20
20
|
*/
|
|
21
|
-
export * from '@neo4j-nvl/base';
|
|
22
|
-
export * from '@neo4j-nvl/
|
|
23
|
-
export
|
|
24
|
-
export {
|
|
21
|
+
export * as NVLBase from '@neo4j-nvl/base';
|
|
22
|
+
export * as NVLInteractionHandlers from '@neo4j-nvl/interaction-handlers';
|
|
23
|
+
export * as NVLReact from '@neo4j-nvl/react';
|
|
24
|
+
export { GraphVisualization } from './graph-visualization';
|
|
25
|
+
export { useGraphVisualizationContext, type DataLookupTable, type Gesture, type GraphItemMetaData, type GraphSelection, type GraphVisualizationContextData, type InteractionMode, type NeoNode, type NeoRel, type NodeData, type NvlGraph, type PortableProperty, type RelData, type Sidepanel, } from './graph-visualization-context';
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
* You should have received a copy of the GNU General Public License
|
|
19
19
|
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|
20
20
|
*/
|
|
21
|
-
import { type NeoNode, type NeoRel, type NvlGraph } from './graph-
|
|
21
|
+
import { type NeoNode, type NeoRel, type NvlGraph } from './graph-visualization-context';
|
|
22
22
|
export type CaptionOption = {
|
|
23
23
|
type: 'id';
|
|
24
24
|
captionSize?: number;
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
* You should have received a copy of the GNU General Public License
|
|
19
19
|
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|
20
20
|
*/
|
|
21
|
-
import { type PortableProperty } from '../graph-
|
|
21
|
+
import { type PortableProperty } from '../graph-visualization-context';
|
|
22
22
|
export declare const ELLIPSIS = "\u2026";
|
|
23
23
|
export declare const WIDE_VIEW_THRESHOLD = 900;
|
|
24
24
|
export declare const MAX_LENGTH_NARROW = 150;
|
|
@@ -18,11 +18,11 @@
|
|
|
18
18
|
* You should have received a copy of the GNU General Public License
|
|
19
19
|
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|
20
20
|
*/
|
|
21
|
-
export { default as
|
|
22
|
-
export { default as
|
|
23
|
-
export { default as
|
|
24
|
-
export { default as
|
|
25
|
-
export declare const
|
|
26
|
-
export declare const
|
|
27
|
-
export declare const
|
|
28
|
-
export declare const
|
|
21
|
+
export { default as GraphVisualizationBarebones } from './graph-visualization-barebones.story';
|
|
22
|
+
export { default as GraphVisualizationCustom } from './graph-visualization-custom.story';
|
|
23
|
+
export { default as GraphVisualizationDefault } from './graph-visualization-default.story';
|
|
24
|
+
export { default as GraphVisualizationMaximalist } from './graph-visualization-maximalist.story';
|
|
25
|
+
export declare const GraphVisualizationDefaultSrc: string;
|
|
26
|
+
export declare const GraphVisualizationBarebonesSrc: string;
|
|
27
|
+
export declare const GraphVisualizationMaximalistSrc: string;
|
|
28
|
+
export declare const GraphVisualizationCustomSrc: string;
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
* You should have received a copy of the GNU General Public License
|
|
19
19
|
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|
20
20
|
*/
|
|
21
|
-
import { type NeoNode, type NeoRel } from '../graph-
|
|
21
|
+
import { type NeoNode, type NeoRel } from '../graph-visualization-context';
|
|
22
22
|
export declare const StoryGraph: {
|
|
23
23
|
nodes: NeoNode[];
|
|
24
24
|
rels: NeoRel[];
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
*/
|
|
21
21
|
import { type HitTargets, type Node, type Relationship } from '@neo4j-nvl/base';
|
|
22
22
|
import { type MouseEventCallbacks } from '@neo4j-nvl/react';
|
|
23
|
-
import { type Gesture, type GraphSelection, type InteractionMode } from './graph-
|
|
23
|
+
import { type Gesture, type GraphSelection, type InteractionMode } from './graph-visualization-context';
|
|
24
24
|
export type ManagedSelectionArgs = {
|
|
25
25
|
selected: GraphSelection;
|
|
26
26
|
setSelected: (newSelection: GraphSelection) => void;
|
|
@@ -32,6 +32,8 @@ type SpotlightContextType = {
|
|
|
32
32
|
registerTarget: (id: string, ref: React.RefObject<HTMLElement>) => void;
|
|
33
33
|
unregisterTarget: (id: string) => void;
|
|
34
34
|
registeredTargets: Record<string, React.RefObject<HTMLElement>>;
|
|
35
|
+
/** If the spotlights should have an overlay */
|
|
36
|
+
hasOverlay?: boolean;
|
|
35
37
|
};
|
|
36
38
|
export declare const useSpotlightContext: () => SpotlightContextType;
|
|
37
39
|
type SpotlightProviderProps = {
|
|
@@ -39,6 +39,8 @@ type SpotlightTargetProps = {
|
|
|
39
39
|
hasAnchorPortal?: boolean;
|
|
40
40
|
className?: string;
|
|
41
41
|
children?: React.ReactNode;
|
|
42
|
+
/** Fit the target size to the children. */
|
|
43
|
+
shouldFitToChildren?: boolean;
|
|
42
44
|
};
|
|
43
45
|
export declare const SpotlightTarget: PolymorphicForwardRefExoticComponent<'div', SpotlightTargetProps>;
|
|
44
46
|
export {};
|
|
@@ -34,5 +34,5 @@ interface UseIndicatorReturn extends UseInteractionsReturn, ReturnType<typeof us
|
|
|
34
34
|
hasAnchorPortal?: boolean;
|
|
35
35
|
}
|
|
36
36
|
export type IndicatorPlacement = 'top-left' | 'top-middle' | 'top-right' | 'bottom-left' | 'bottom-middle' | 'bottom-right' | 'middle-left' | 'middle-middle' | 'middle-right';
|
|
37
|
-
export declare function useIndicator({ isOpen, indicatorVariant, indicatorPlacement, targetRef, hasPulse,
|
|
37
|
+
export declare function useIndicator({ isOpen, indicatorVariant, indicatorPlacement, targetRef, hasPulse, }: IndicatorOptions): UseIndicatorReturn;
|
|
38
38
|
export {};
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
/**
|
|
2
|
+
*
|
|
3
|
+
* Copyright (c) "Neo4j"
|
|
4
|
+
* Neo4j Sweden AB [http://neo4j.com]
|
|
5
|
+
*
|
|
6
|
+
* This file is part of Neo4j.
|
|
7
|
+
*
|
|
8
|
+
* Neo4j is free software: you can redistribute it and/or modify
|
|
9
|
+
* it under the terms of the GNU General Public License as published by
|
|
10
|
+
* the Free Software Foundation, either version 3 of the License, or
|
|
11
|
+
* (at your option) any later version.
|
|
12
|
+
*
|
|
13
|
+
* This program is distributed in the hope that it will be useful,
|
|
14
|
+
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
15
|
+
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
16
|
+
* GNU General Public License for more details.
|
|
17
|
+
*
|
|
18
|
+
* You should have received a copy of the GNU General Public License
|
|
19
|
+
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|
20
|
+
*/
|
|
21
|
+
import { type Placement, useFloating, type UseInteractionsReturn } from '@floating-ui/react';
|
|
22
|
+
export interface SpotlightOptions {
|
|
23
|
+
isInitialOpen?: boolean;
|
|
24
|
+
placement?: Placement;
|
|
25
|
+
isOpen?: boolean;
|
|
26
|
+
onOpenChange?: (open: boolean, event?: Event) => void;
|
|
27
|
+
anchorElement?: Element | null;
|
|
28
|
+
anchorElementAsPortalAnchor?: boolean;
|
|
29
|
+
initialFocus?: number | React.MutableRefObject<HTMLElement | null>;
|
|
30
|
+
closeOnClickOutside?: boolean;
|
|
31
|
+
strategy?: 'fixed' | 'absolute';
|
|
32
|
+
}
|
|
33
|
+
export interface UseSpotlightReturn extends UseInteractionsReturn, ReturnType<typeof useFloating> {
|
|
34
|
+
isOpen: boolean;
|
|
35
|
+
setIsOpen: (isOpen: boolean) => void;
|
|
36
|
+
labelId: string | undefined;
|
|
37
|
+
transitionStyles: React.CSSProperties;
|
|
38
|
+
anchorElementAsPortalAnchor: boolean | undefined;
|
|
39
|
+
initialFocus: number | React.MutableRefObject<HTMLElement | null> | undefined;
|
|
40
|
+
}
|
|
41
|
+
export declare function useSpotlight({ isInitialOpen, placement, isOpen: controlledOpen, onOpenChange: setControlledOpen, anchorElement, anchorElementAsPortalAnchor, initialFocus, closeOnClickOutside, strategy, }?: SpotlightOptions): UseSpotlightReturn;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@neo4j-ndl/react",
|
|
3
|
-
"version": "3.8.
|
|
3
|
+
"version": "3.8.11",
|
|
4
4
|
"sideEffects": false,
|
|
5
5
|
"description": "React implementation of Neo4j Design System",
|
|
6
6
|
"keywords": [
|
|
@@ -72,7 +72,7 @@
|
|
|
72
72
|
"@tanstack/react-table": "8.20.5",
|
|
73
73
|
"react": ">=16.8.0",
|
|
74
74
|
"react-dom": ">=16.8.0",
|
|
75
|
-
"@neo4j-ndl/base": "^3.7.
|
|
75
|
+
"@neo4j-ndl/base": "^3.7.6"
|
|
76
76
|
},
|
|
77
77
|
"dependencies": {
|
|
78
78
|
"@dnd-kit/core": "6.1.0",
|
|
@@ -81,8 +81,9 @@
|
|
|
81
81
|
"@floating-ui/react-dom": "2.1.2",
|
|
82
82
|
"@heroicons/react": "2.1.5",
|
|
83
83
|
"@neo4j-devtools/word-color": "^0.0.8",
|
|
84
|
-
"@neo4j-nvl/base": "0.3.8",
|
|
85
|
-
"@neo4j-nvl/react": "0.3.8",
|
|
84
|
+
"@neo4j-nvl/base": "0.3.8-859d66de",
|
|
85
|
+
"@neo4j-nvl/react": "0.3.8-859d66de",
|
|
86
|
+
"@neo4j-nvl/interaction-handlers": "0.3.8-859d66de",
|
|
86
87
|
"@uiw/react-color": "2.5.4",
|
|
87
88
|
"classnames": "2.5.1",
|
|
88
89
|
"date-fns": "4.1.0",
|