@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.
Files changed (118) hide show
  1. package/lib/cjs/graph-visualization/{graph-viz-buttons.js → graph-visualization-buttons.js} +12 -12
  2. package/lib/cjs/graph-visualization/graph-visualization-buttons.js.map +1 -0
  3. package/lib/cjs/graph-visualization/{graph-viz-context.js → graph-visualization-context.js} +10 -10
  4. package/lib/cjs/graph-visualization/graph-visualization-context.js.map +1 -0
  5. package/lib/cjs/graph-visualization/{graph-viz-sidepanel.js → graph-visualization-sidepanel.js} +8 -8
  6. package/lib/cjs/graph-visualization/graph-visualization-sidepanel.js.map +1 -0
  7. package/lib/cjs/graph-visualization/{graph-viz.js → graph-visualization.js} +35 -35
  8. package/lib/cjs/graph-visualization/graph-visualization.js.map +1 -0
  9. package/lib/cjs/graph-visualization/index.js +19 -9
  10. package/lib/cjs/graph-visualization/index.js.map +1 -1
  11. package/lib/cjs/graph-visualization/sidepanel-components/details-panel.js +13 -14
  12. package/lib/cjs/graph-visualization/sidepanel-components/details-panel.js.map +1 -1
  13. package/lib/cjs/graph-visualization/sidepanel-components/overview-panel.js +4 -4
  14. package/lib/cjs/graph-visualization/sidepanel-components/overview-panel.js.map +1 -1
  15. package/lib/cjs/graph-visualization/sidepanel-components/properties-table.js +1 -1
  16. package/lib/cjs/graph-visualization/sidepanel-components/properties-table.js.map +1 -1
  17. package/lib/cjs/graph-visualization/sidepanel-components/single-selection-sidepanel-contents.js +2 -2
  18. package/lib/cjs/graph-visualization/sidepanel-components/single-selection-sidepanel-contents.js.map +1 -1
  19. package/lib/cjs/graph-visualization/stories/{graph-viz-barebones.story.js → graph-visualization-barebones.story.js} +3 -3
  20. package/lib/cjs/graph-visualization/stories/graph-visualization-barebones.story.js.map +1 -0
  21. package/lib/cjs/graph-visualization/stories/{graph-viz-custom.story.js → graph-visualization-custom.story.js} +3 -3
  22. package/lib/cjs/graph-visualization/stories/graph-visualization-custom.story.js.map +1 -0
  23. package/lib/cjs/graph-visualization/stories/{graph-viz-default.story.js → graph-visualization-default.story.js} +3 -3
  24. package/lib/cjs/graph-visualization/stories/graph-visualization-default.story.js.map +1 -0
  25. package/lib/cjs/graph-visualization/stories/{graph-viz-maximalist.story.js → graph-visualization-maximalist.story.js} +4 -4
  26. package/lib/cjs/graph-visualization/stories/graph-visualization-maximalist.story.js.map +1 -0
  27. package/lib/cjs/graph-visualization/stories/{graph-viz.stories.js → graph-visualization.stories.js} +9 -9
  28. package/lib/cjs/graph-visualization/stories/graph-visualization.stories.js.map +1 -0
  29. package/lib/cjs/graph-visualization/stories/index.js +17 -17
  30. package/lib/cjs/graph-visualization/stories/index.js.map +1 -1
  31. package/lib/cjs/spotlight/Spotlight.js +56 -26
  32. package/lib/cjs/spotlight/Spotlight.js.map +1 -1
  33. package/lib/cjs/spotlight/SpotlightProvider.js +21 -18
  34. package/lib/cjs/spotlight/SpotlightProvider.js.map +1 -1
  35. package/lib/cjs/spotlight/SpotlightTarget.js +16 -10
  36. package/lib/cjs/spotlight/SpotlightTarget.js.map +1 -1
  37. package/lib/cjs/spotlight/use-indicator.js +3 -10
  38. package/lib/cjs/spotlight/use-indicator.js.map +1 -1
  39. package/lib/cjs/spotlight/use-spotlight.js +89 -0
  40. package/lib/cjs/spotlight/use-spotlight.js.map +1 -0
  41. package/lib/esm/graph-visualization/{graph-viz-buttons.js → graph-visualization-buttons.js} +12 -12
  42. package/lib/esm/graph-visualization/graph-visualization-buttons.js.map +1 -0
  43. package/lib/esm/graph-visualization/{graph-viz-context.js → graph-visualization-context.js} +8 -8
  44. package/lib/esm/graph-visualization/graph-visualization-context.js.map +1 -0
  45. package/lib/esm/graph-visualization/{graph-viz-sidepanel.js → graph-visualization-sidepanel.js} +6 -6
  46. package/lib/esm/graph-visualization/graph-visualization-sidepanel.js.map +1 -0
  47. package/lib/esm/graph-visualization/{graph-viz.js → graph-visualization.js} +33 -33
  48. package/lib/esm/graph-visualization/graph-visualization.js.map +1 -0
  49. package/lib/esm/graph-visualization/index.js +5 -4
  50. package/lib/esm/graph-visualization/index.js.map +1 -1
  51. package/lib/esm/graph-visualization/sidepanel-components/details-panel.js +6 -7
  52. package/lib/esm/graph-visualization/sidepanel-components/details-panel.js.map +1 -1
  53. package/lib/esm/graph-visualization/sidepanel-components/overview-panel.js +4 -4
  54. package/lib/esm/graph-visualization/sidepanel-components/overview-panel.js.map +1 -1
  55. package/lib/esm/graph-visualization/sidepanel-components/properties-table.js +1 -1
  56. package/lib/esm/graph-visualization/sidepanel-components/properties-table.js.map +1 -1
  57. package/lib/esm/graph-visualization/sidepanel-components/single-selection-sidepanel-contents.js +2 -2
  58. package/lib/esm/graph-visualization/sidepanel-components/single-selection-sidepanel-contents.js.map +1 -1
  59. package/lib/esm/graph-visualization/stories/{graph-viz-barebones.story.js → graph-visualization-barebones.story.js} +3 -3
  60. package/lib/esm/graph-visualization/stories/graph-visualization-barebones.story.js.map +1 -0
  61. package/lib/esm/graph-visualization/stories/{graph-viz-custom.story.js → graph-visualization-custom.story.js} +3 -3
  62. package/lib/esm/graph-visualization/stories/graph-visualization-custom.story.js.map +1 -0
  63. package/lib/esm/graph-visualization/stories/{graph-viz-default.story.js → graph-visualization-default.story.js} +3 -3
  64. package/lib/esm/graph-visualization/stories/graph-visualization-default.story.js.map +1 -0
  65. package/lib/esm/graph-visualization/stories/{graph-viz-maximalist.story.js → graph-visualization-maximalist.story.js} +4 -4
  66. package/lib/esm/graph-visualization/stories/graph-visualization-maximalist.story.js.map +1 -0
  67. package/lib/esm/graph-visualization/stories/{graph-viz.stories.js → graph-visualization.stories.js} +10 -10
  68. package/lib/esm/graph-visualization/stories/graph-visualization.stories.js.map +1 -0
  69. package/lib/esm/graph-visualization/stories/index.js +12 -12
  70. package/lib/esm/graph-visualization/stories/index.js.map +1 -1
  71. package/lib/esm/spotlight/Spotlight.js +48 -18
  72. package/lib/esm/spotlight/Spotlight.js.map +1 -1
  73. package/lib/esm/spotlight/SpotlightProvider.js +12 -9
  74. package/lib/esm/spotlight/SpotlightProvider.js.map +1 -1
  75. package/lib/esm/spotlight/SpotlightTarget.js +16 -10
  76. package/lib/esm/spotlight/SpotlightTarget.js.map +1 -1
  77. package/lib/esm/spotlight/use-indicator.js +3 -10
  78. package/lib/esm/spotlight/use-indicator.js.map +1 -1
  79. package/lib/esm/spotlight/use-spotlight.js +86 -0
  80. package/lib/esm/spotlight/use-spotlight.js.map +1 -0
  81. package/lib/types/graph-visualization/{graph-viz-buttons.d.ts → graph-visualization-buttons.d.ts} +12 -12
  82. package/lib/types/graph-visualization/{graph-viz-context.d.ts → graph-visualization-context.d.ts} +7 -7
  83. package/lib/types/graph-visualization/{graph-viz-sidepanel.d.ts → graph-visualization-sidepanel.d.ts} +3 -3
  84. package/lib/types/graph-visualization/{graph-viz.d.ts → graph-visualization.d.ts} +7 -7
  85. package/lib/types/graph-visualization/index.d.ts +5 -4
  86. package/lib/types/graph-visualization/map-to-nvl-graph.d.ts +1 -1
  87. package/lib/types/graph-visualization/sidepanel-components/properties-table.d.ts +1 -1
  88. package/lib/types/graph-visualization/stories/index.d.ts +8 -8
  89. package/lib/types/graph-visualization/stories/story-data.d.ts +1 -1
  90. package/lib/types/graph-visualization/use-managed-selection-state.d.ts +1 -1
  91. package/lib/types/spotlight/SpotlightProvider.d.ts +2 -0
  92. package/lib/types/spotlight/SpotlightTarget.d.ts +2 -0
  93. package/lib/types/spotlight/use-indicator.d.ts +1 -1
  94. package/lib/types/spotlight/use-spotlight.d.ts +41 -0
  95. package/package.json +5 -4
  96. package/lib/cjs/graph-visualization/graph-viz-buttons.js.map +0 -1
  97. package/lib/cjs/graph-visualization/graph-viz-context.js.map +0 -1
  98. package/lib/cjs/graph-visualization/graph-viz-sidepanel.js.map +0 -1
  99. package/lib/cjs/graph-visualization/graph-viz.js.map +0 -1
  100. package/lib/cjs/graph-visualization/stories/graph-viz-barebones.story.js.map +0 -1
  101. package/lib/cjs/graph-visualization/stories/graph-viz-custom.story.js.map +0 -1
  102. package/lib/cjs/graph-visualization/stories/graph-viz-default.story.js.map +0 -1
  103. package/lib/cjs/graph-visualization/stories/graph-viz-maximalist.story.js.map +0 -1
  104. package/lib/cjs/graph-visualization/stories/graph-viz.stories.js.map +0 -1
  105. package/lib/esm/graph-visualization/graph-viz-buttons.js.map +0 -1
  106. package/lib/esm/graph-visualization/graph-viz-context.js.map +0 -1
  107. package/lib/esm/graph-visualization/graph-viz-sidepanel.js.map +0 -1
  108. package/lib/esm/graph-visualization/graph-viz.js.map +0 -1
  109. package/lib/esm/graph-visualization/stories/graph-viz-barebones.story.js.map +0 -1
  110. package/lib/esm/graph-visualization/stories/graph-viz-custom.story.js.map +0 -1
  111. package/lib/esm/graph-visualization/stories/graph-viz-default.story.js.map +0 -1
  112. package/lib/esm/graph-visualization/stories/graph-viz-maximalist.story.js.map +0 -1
  113. package/lib/esm/graph-visualization/stories/graph-viz.stories.js.map +0 -1
  114. /package/lib/types/graph-visualization/stories/{graph-viz-barebones.story.d.ts → graph-visualization-barebones.story.d.ts} +0 -0
  115. /package/lib/types/graph-visualization/stories/{graph-viz-custom.story.d.ts → graph-visualization-custom.story.d.ts} +0 -0
  116. /package/lib/types/graph-visualization/stories/{graph-viz-default.story.d.ts → graph-visualization-default.story.d.ts} +0 -0
  117. /package/lib/types/graph-visualization/stories/{graph-viz-maximalist.story.d.ts → graph-visualization-maximalist.story.d.ts} +0 -0
  118. /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, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
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
- return (_jsxs(SpotlightContext.Provider, { value: contextValue, children: [hasOverlay && (_jsx(_Fragment, { children: _jsx("div", { role: "presentation", onKeyDown: (e) => {
60
- if (e.key === 'Escape') {
61
- setIsOpen(false);
62
- setActive(null);
63
- }
64
- }, "data-testid": "ndl-spotlight-overlay", className: overlayClasses }) })), children] }));
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,EAAE,aAAa,EAAE,WAAW,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAgBzE,MAAM,gBAAgB,GAAG,aAAa,CAA8B,IAAI,CAAC,CAAC;AAE1E,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAyB,EAAE;IAC5D,MAAM,OAAO,GAAG,UAAU,CAAC,gBAAgB,CAAC,CAAC;IAE7C,IAAI,OAAO,KAAK,IAAI,EAAE,CAAC;QACrB,MAAM,IAAI,KAAK,CACb,+DAA+D,CAChE,CAAC;IACJ,CAAC;IAED,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAUF,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,EAChC,QAAQ,EACR,UAAU,GAAG,IAAI,EACjB,oBAAoB,GAAG,KAAK,GACL,EAAE,EAAE;IAC3B,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAgB,IAAI,CAAC,CAAC;IAC1D,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAC;IACrD,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAEpC,EAAE,CAAC,CAAC;IAEN,MAAM,cAAc,GAAG,WAAW,CAChC,CAAC,EAAU,EAAE,GAAiC,EAAE,EAAE;QAChD,UAAU,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,iCAAM,IAAI,KAAE,CAAC,EAAE,CAAC,EAAE,GAAG,IAAG,CAAC,CAAC;IACjD,CAAC,EACD,EAAE,CACH,CAAC;IAEF,MAAM,gBAAgB,GAAG,WAAW,CAAC,CAAC,EAAU,EAAE,EAAE;QAClD,UAAU,CAAC,CAAC,IAAI,EAAE,EAAE;YAClB,MAAM,UAAU,qBAAQ,IAAI,CAAE,CAAC;YAC/B,OAAO,UAAU,CAAC,EAAE,CAAC,CAAC;YACtB,OAAO,UAAU,CAAC;QACpB,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,YAAY,GAAyB;QACzC,iBAAiB,EAAE,WAAW,CAC5B,CAAC,MAAc,EAAE,EAAE,CAAC,MAAM,KAAK,MAAM,EACrC,CAAC,MAAM,CAAC,CACT;QACD,MAAM;QACN,cAAc;QACd,iBAAiB,EAAE,OAAO;QAC1B,kBAAkB,EAAE,WAAW,CAC7B,CAAC,MAAqB,EAAE,EAAE,CAAC,SAAS,CAAC,MAAM,CAAC,EAC5C,EAAE,CACH;QACD,SAAS,EAAE,WAAW,CAAC,CAAC,IAAa,EAAE,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC;QAC9D,gBAAgB;KACjB,CAAC;IAEF,MAAM,cAAc,GAAG,UAAU,CAAC,uBAAuB,EAAE;QACzD,4BAA4B,EAAE,MAAM,IAAI,MAAM,KAAK,IAAI;QACvD,mCAAmC,EAAE,oBAAoB;KAC1D,CAAC,CAAC;IAEH,OAAO,CACL,MAAC,gBAAgB,CAAC,QAAQ,IAAC,KAAK,EAAE,YAAY,aAC3C,UAAU,IAAI,CACb,4BACE,cACE,IAAI,EAAC,cAAc,EACnB,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE;wBACf,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,EAAE,CAAC;4BACvB,SAAS,CAAC,KAAK,CAAC,CAAC;4BACjB,SAAS,CAAC,IAAI,CAAC,CAAC;wBAClB,CAAC;oBACH,CAAC,iBACW,uBAAuB,EACnC,SAAS,EAAE,cAAc,GACpB,GACN,CACJ,EACA,QAAQ,IACiB,CAC7B,CAAC;AACJ,CAAC,CAAC"}
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
- // TODO v4: remove exotic, or add "as" prop. It probably doesn't need to be exotic
29
- export const SpotlightTarget = React.forwardRef(function SpotlightTarget({ id, hasPulse = true, indicatorVariant = 'border', indicatorPlacement = 'top-right', backgroundColor, borderRadius, hasAnchorPortal, children, className, htmlAttributes, }, ref) {
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
- return (_jsxs(_Fragment, { children: [_jsx("div", Object.assign({ role: isActive ? 'button' : undefined, id: id, ref: mergedRefs, className: classes, onClick: (e) => {
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
- /* @ts-expect-error inert not allowed */
66
- _jsx("div", { inert: "", "aria-disabled": true, className: "ndl-spotlight-target-inert", children: children })), children: children }) })), _jsx(FloatingPortal, { root: indicator.hasAnchorPortal !== undefined
67
- ? indicator.context.refs.reference.current
68
- : 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()))) })] }));
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":"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"}
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, hasAnchorPortal, }) {
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), { hasAnchorPortal, indicatorClasses: classNames('ndl-spotlight-target-indicator', {
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":"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"}
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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"}
@@ -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 GraphVizButtonProps = {
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 = GraphVizButtonProps & {
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 GraphVizGroupButton = PropsWithChildren<BaseProperties>;
40
- export declare const GroupButton: (props: GraphVizGroupButton) => import("react/jsx-runtime").JSX.Element;
41
- export declare const SingleSelectButton: ({ className, style, htmlAttributes, tooltipPlacement, }: GraphVizButtonProps) => import("react/jsx-runtime").JSX.Element;
42
- export declare const BoxSelectButton: ({ className, style, htmlAttributes, tooltipPlacement, }: GraphVizButtonProps) => import("react/jsx-runtime").JSX.Element;
43
- export declare const LassoSelectButton: ({ className, style, htmlAttributes, tooltipPlacement, }: GraphVizButtonProps) => import("react/jsx-runtime").JSX.Element;
44
- export declare const ZoomInButton: ({ className, style, htmlAttributes, tooltipPlacement, }: GraphVizButtonProps) => import("react/jsx-runtime").JSX.Element;
45
- export declare const ZoomOutButton: ({ className, style, htmlAttributes, tooltipPlacement, }: GraphVizButtonProps) => import("react/jsx-runtime").JSX.Element;
46
- export declare const ZoomToFitButton: ({ className, style, htmlAttributes, tooltipPlacement, }: GraphVizButtonProps) => import("react/jsx-runtime").JSX.Element;
47
- export declare const ToggleSidePanelButton: ({ className, htmlAttributes, style, tooltipPlacement, }: GraphVizButtonProps) => import("react/jsx-runtime").JSX.Element;
48
- export declare const DownloadButton: ({ className, style, htmlAttributes, tooltipPlacement, }: GraphVizButtonProps) => import("react/jsx-runtime").JSX.Element;
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 {};
@@ -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 useGraphVizContext}
79
+ * @see {@link useGraphVisualizationContext}
80
80
  * @alpha
81
81
  */
82
- export type GraphVizContextData = {
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 GraphVizContext: import("react").Context<GraphVizContextData | undefined>;
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 GraphVizContextData}
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 GraphVizContext provider
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 } = useGraphVizContext();
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 useGraphVizContext: () => GraphVizContextData;
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-viz-context';
22
- export declare const GraphVizSidepanel: {
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-viz-context';
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 GraphVizProps<T extends React.ElementType> = {
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
- * <GraphViz
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
- * <GraphViz
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 GraphVizProps}
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 GraphViz<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 }: GraphVizProps<T>): import("react/jsx-runtime").JSX.Element;
100
- export declare namespace GraphViz {
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/react';
23
- export { GraphViz } from './graph-viz';
24
- export { useGraphVizContext, type DataLookupTable, type Gesture, type GraphItemMetaData, type GraphSelection, type GraphVizContextData, type InteractionMode, type NeoNode, type NeoRel, type NodeData, type NvlGraph, type PortableProperty, type RelData, type Sidepanel, } from './graph-viz-context';
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-viz-context';
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-viz-context';
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 GraphVizBarebones } from './graph-viz-barebones.story';
22
- export { default as GraphVizCustom } from './graph-viz-custom.story';
23
- export { default as GraphVizDefault } from './graph-viz-default.story';
24
- export { default as GraphVizMaximalist } from './graph-viz-maximalist.story';
25
- export declare const GraphVizDefaultSrc: string;
26
- export declare const GraphVizBarebonesSrc: string;
27
- export declare const GraphVizMaximalistSrc: string;
28
- export declare const GraphVizCustomSrc: string;
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-viz-context';
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-viz-context';
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, hasAnchorPortal, }: IndicatorOptions): UseIndicatorReturn;
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.9",
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.5"
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",