@neo4j-ndl/react 3.2.5 → 3.2.6
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/spotlight/Spotlight.js +9 -11
- package/lib/cjs/spotlight/Spotlight.js.map +1 -1
- package/lib/cjs/spotlight/SpotlightProvider.js +18 -1
- package/lib/cjs/spotlight/SpotlightProvider.js.map +1 -1
- package/lib/cjs/spotlight/SpotlightTarget.js +62 -22
- package/lib/cjs/spotlight/SpotlightTarget.js.map +1 -1
- package/lib/cjs/spotlight/use-indicator.js +108 -0
- package/lib/cjs/spotlight/use-indicator.js.map +1 -0
- package/lib/esm/spotlight/Spotlight.js +10 -12
- package/lib/esm/spotlight/Spotlight.js.map +1 -1
- package/lib/esm/spotlight/SpotlightProvider.js +18 -1
- package/lib/esm/spotlight/SpotlightProvider.js.map +1 -1
- package/lib/esm/spotlight/SpotlightTarget.js +40 -23
- package/lib/esm/spotlight/SpotlightTarget.js.map +1 -1
- package/lib/esm/spotlight/use-indicator.js +102 -0
- package/lib/esm/spotlight/use-indicator.js.map +1 -0
- package/lib/types/spotlight/Spotlight.d.ts +37 -5
- package/lib/types/spotlight/SpotlightProvider.d.ts +3 -0
- package/lib/types/spotlight/SpotlightTarget.d.ts +7 -1
- package/lib/types/spotlight/use-indicator.d.ts +38 -0
- package/package.json +2 -2
|
@@ -101,17 +101,15 @@ const SpotlightIconWrapper = react_1.default.forwardRef(function SpotlightIconWr
|
|
|
101
101
|
const Component = as || 'div';
|
|
102
102
|
return ((0, jsx_runtime_1.jsx)(Component, Object.assign({ ref: ref, className: classes, style: style }, htmlAttributes, { children: children })));
|
|
103
103
|
});
|
|
104
|
-
const SpotlightComponent = react_1.default.forwardRef(function SpotlightComponent({ target, actions = [], beforeActions, initialFocus, onClose, children, className, style, htmlAttributes, }, ref) {
|
|
105
|
-
const { isActiveSpotlight, isOpen, setActiveSpotlight, setIsOpen } = (0, SpotlightProvider_1.useSpotlightContext)();
|
|
106
|
-
const
|
|
107
|
-
(0, react_1.useEffect)(() => {
|
|
108
|
-
const targetElement = document.getElementById(target);
|
|
109
|
-
if (!targetElement)
|
|
110
|
-
return;
|
|
111
|
-
targetRef.current = targetElement;
|
|
112
|
-
}, [target]);
|
|
104
|
+
const SpotlightComponent = react_1.default.forwardRef(function SpotlightComponent({ target, actions = [], beforeActions, initialFocus, onClose, placement, hasAnchorPortal, children, className, style, htmlAttributes, }, ref) {
|
|
105
|
+
const { isActiveSpotlight, isOpen, setActiveSpotlight, setIsOpen, registeredTargets, } = (0, SpotlightProvider_1.useSpotlightContext)();
|
|
106
|
+
const [targetElement, setTargetElement] = (0, react_1.useState)(null);
|
|
113
107
|
const classes = (0, classnames_1.default)('ndl-spotlight', className);
|
|
114
|
-
|
|
108
|
+
(0, react_1.useEffect)(() => {
|
|
109
|
+
var _a;
|
|
110
|
+
setTargetElement((_a = registeredTargets[target]) === null || _a === void 0 ? void 0 : _a.current);
|
|
111
|
+
}, [target, registeredTargets]);
|
|
112
|
+
return ((0, jsx_runtime_1.jsx)(popover_1.Popover, { anchorElement: targetElement, hasAnchorPortal: !!targetElement && hasAnchorPortal, isOpen: isActiveSpotlight(target) && isOpen && !!targetElement, shouldCaptureFocus: true, onOpenChange: (isOpen, event) => {
|
|
115
113
|
if (!isOpen) {
|
|
116
114
|
if (event instanceof PointerEvent) {
|
|
117
115
|
onClose === null || onClose === void 0 ? void 0 : onClose('clickOutside');
|
|
@@ -122,7 +120,7 @@ const SpotlightComponent = react_1.default.forwardRef(function SpotlightComponen
|
|
|
122
120
|
setActiveSpotlight(null);
|
|
123
121
|
setIsOpen(false);
|
|
124
122
|
}
|
|
125
|
-
}, initialFocus: initialFocus, children: (0, jsx_runtime_1.jsxs)(popover_1.Popover.Content, Object.assign({ ref: ref, className: classes, style: style }, htmlAttributes, { children: [(0, jsx_runtime_1.jsx)("div", { children: children }), (beforeActions || !!(actions === null || actions === void 0 ? void 0 : actions.length)) && ((0, jsx_runtime_1.jsxs)("div", { className: "ndl-spotlight-footer", children: [(0, jsx_runtime_1.jsx)(typography_1.Typography, { variant: "body-medium", children: beforeActions }), !!(actions === null || actions === void 0 ? void 0 : actions.length) && ((0, jsx_runtime_1.jsx)("div", { className: "ndl-spotlight-actions", children: actions.map((action, index) => ((0, jsx_runtime_1.jsx)(SpotlightActions, Object.assign({}, action), index))) }))] }))] })) }));
|
|
123
|
+
}, initialFocus: initialFocus, placement: placement, children: (0, jsx_runtime_1.jsxs)(popover_1.Popover.Content, Object.assign({ ref: ref, className: classes, style: style }, htmlAttributes, { children: [(0, jsx_runtime_1.jsx)("div", { children: children }), (beforeActions || !!(actions === null || actions === void 0 ? void 0 : actions.length)) && ((0, jsx_runtime_1.jsxs)("div", { className: "ndl-spotlight-footer", children: [(0, jsx_runtime_1.jsx)(typography_1.Typography, { variant: "body-medium", children: beforeActions }), !!(actions === null || actions === void 0 ? void 0 : actions.length) && ((0, jsx_runtime_1.jsx)("div", { className: "ndl-spotlight-actions", children: actions.map((action, index) => ((0, jsx_runtime_1.jsx)(SpotlightActions, Object.assign({}, action), index))) }))] }))] })) }));
|
|
126
124
|
});
|
|
127
125
|
SpotlightComponent.displayName = 'Spotlight';
|
|
128
126
|
const Spotlight = Object.assign(SpotlightComponent, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Spotlight.js","sourceRoot":"","sources":["../../../src/spotlight/Spotlight.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,+
|
|
1
|
+
{"version":3,"file":"Spotlight.js","sourceRoot":"","sources":["../../../src/spotlight/Spotlight.tsx"],"names":[],"mappings":"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"}
|
|
@@ -40,18 +40,35 @@ const SpotlightProvider = (props) => {
|
|
|
40
40
|
const { children, hasOverlay = true } = props;
|
|
41
41
|
const [active, setActive] = (0, react_1.useState)(null);
|
|
42
42
|
const [isOpen, setIsOpen] = (0, react_1.useState)(false);
|
|
43
|
+
const [targets, setTargets] = (0, react_1.useState)({});
|
|
44
|
+
const registerTarget = (0, react_1.useCallback)((id, ref) => {
|
|
45
|
+
setTargets((prev) => (Object.assign(Object.assign({}, prev), { [id]: ref })));
|
|
46
|
+
}, []);
|
|
47
|
+
const unregisterTarget = (0, react_1.useCallback)((id) => {
|
|
48
|
+
setTargets((prev) => {
|
|
49
|
+
const newTargets = Object.assign({}, prev);
|
|
50
|
+
delete newTargets[id];
|
|
51
|
+
return newTargets;
|
|
52
|
+
});
|
|
53
|
+
}, []);
|
|
43
54
|
const contextValue = {
|
|
44
55
|
isOpen,
|
|
45
56
|
setIsOpen: (0, react_1.useCallback)((open) => setIsOpen(open), []),
|
|
46
57
|
isActiveSpotlight: (0, react_1.useCallback)((target) => target === active, [active]),
|
|
47
58
|
setActiveSpotlight: (0, react_1.useCallback)((target) => setActive(target), []),
|
|
59
|
+
registerTarget,
|
|
60
|
+
unregisterTarget,
|
|
61
|
+
registeredTargets: targets,
|
|
48
62
|
};
|
|
49
63
|
const overlayClasses = (0, classnames_1.default)('ndl-spotlight-overlay', {
|
|
50
64
|
'ndl-spotlight-overlay-open': isOpen && active != null,
|
|
51
65
|
});
|
|
52
66
|
/** transparent overlay to sandwich the SpotlightTarget, thus making it "highlighted" */
|
|
53
67
|
const highlightOverlayClasses = (0, classnames_1.default)(overlayClasses, 'n-bg-transparent n-z-[32]');
|
|
54
|
-
return ((0, jsx_runtime_1.jsxs)(SpotlightContext.Provider, { value: contextValue, children: [hasOverlay && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", {
|
|
68
|
+
return ((0, jsx_runtime_1.jsxs)(SpotlightContext.Provider, { value: contextValue, children: [hasOverlay && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { role: "presentation", onClick: () => {
|
|
69
|
+
setIsOpen(false);
|
|
70
|
+
setActive(null);
|
|
71
|
+
}, "data-testid": "ndl-spotlight-overlay-highlight", className: highlightOverlayClasses }), (0, jsx_runtime_1.jsx)("div", { "data-testid": "ndl-spotlight-overlay", className: overlayClasses })] })), children] }));
|
|
55
72
|
};
|
|
56
73
|
exports.SpotlightProvider = SpotlightProvider;
|
|
57
74
|
//# sourceMappingURL=SpotlightProvider.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SpotlightProvider.js","sourceRoot":"","sources":["../../../src/spotlight/SpotlightProvider.tsx"],"names":[],"mappings":";;;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,4DAAoC;AACpC,iCAAgF;
|
|
1
|
+
{"version":3,"file":"SpotlightProvider.js","sourceRoot":"","sources":["../../../src/spotlight/SpotlightProvider.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,4 +1,27 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
+
}) : function(o, v) {
|
|
16
|
+
o["default"] = v;
|
|
17
|
+
});
|
|
18
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
19
|
+
if (mod && mod.__esModule) return mod;
|
|
20
|
+
var result = {};
|
|
21
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
22
|
+
__setModuleDefault(result, mod);
|
|
23
|
+
return result;
|
|
24
|
+
};
|
|
2
25
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
26
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
27
|
};
|
|
@@ -25,34 +48,51 @@ const jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
25
48
|
* You should have received a copy of the GNU General Public License
|
|
26
49
|
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|
27
50
|
*/
|
|
28
|
-
const react_1 =
|
|
51
|
+
const react_1 = __importStar(require("react"));
|
|
29
52
|
const SpotlightProvider_1 = require("./SpotlightProvider");
|
|
30
53
|
const classnames_1 = __importDefault(require("classnames"));
|
|
31
54
|
const ConditionalWrap_1 = __importDefault(require("../_common/ConditionalWrap"));
|
|
32
|
-
|
|
33
|
-
|
|
55
|
+
const use_indicator_1 = require("./use-indicator");
|
|
56
|
+
const react_2 = require("@floating-ui/react");
|
|
57
|
+
exports.SpotlightTarget = react_1.default.forwardRef(function SpotlightTarget({ id, hasPulse = true, indicatorVariant = 'border', indicatorPlacement = 'top-right', backgroundColor, borderRadius, hasAnchorPortal, children, className, htmlAttributes, }, ref) {
|
|
58
|
+
const { isActiveSpotlight, isOpen, setIsOpen, registerTarget, unregisterTarget, } = (0, SpotlightProvider_1.useSpotlightContext)();
|
|
59
|
+
const internalRef = react_1.default.useRef(null);
|
|
60
|
+
const mergedRefs = (0, react_2.useMergeRefs)([ref, internalRef]);
|
|
61
|
+
(0, react_1.useEffect)(() => {
|
|
62
|
+
if (internalRef.current)
|
|
63
|
+
registerTarget(id, internalRef);
|
|
64
|
+
return () => unregisterTarget(id);
|
|
65
|
+
}, [id, registerTarget, unregisterTarget]);
|
|
34
66
|
const classes = (0, classnames_1.default)('ndl-spotlight-target', {
|
|
35
|
-
'ndl-spotlight-target-pulse': hasPulse,
|
|
36
67
|
'ndl-spotlight-target-open': isOpen,
|
|
37
68
|
}, className);
|
|
38
69
|
const isActive = isActiveSpotlight(id);
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
(
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
70
|
+
const indicator = (0, use_indicator_1.useIndicator)({
|
|
71
|
+
isOpen: isActive,
|
|
72
|
+
indicatorVariant,
|
|
73
|
+
indicatorPlacement,
|
|
74
|
+
targetRef: internalRef,
|
|
75
|
+
hasPulse,
|
|
76
|
+
hasAnchorPortal,
|
|
77
|
+
});
|
|
78
|
+
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ role: isActive ? 'button' : undefined, id: id, ref: mergedRefs, className: classes, onClick: (e) => {
|
|
79
|
+
if (isActive && !isOpen) {
|
|
80
|
+
setIsOpen(true);
|
|
81
|
+
e.preventDefault();
|
|
82
|
+
}
|
|
83
|
+
}, style: { backgroundColor, borderRadius }, onKeyDown: (e) => {
|
|
84
|
+
if (isActive &&
|
|
85
|
+
!isOpen &&
|
|
86
|
+
(e.code === 'Enter' || e.code === 'Space')) {
|
|
87
|
+
setIsOpen(true);
|
|
88
|
+
e.preventDefault();
|
|
89
|
+
}
|
|
90
|
+
}, tabIndex: isActive ? 0 : -1, "aria-label": "spotlight target" }, htmlAttributes, { children: (0, jsx_runtime_1.jsx)(ConditionalWrap_1.default, { shouldWrap: isActive,
|
|
91
|
+
// TODO v4: inert should be fixed in react 19? https://github.com/facebook/react/pull/24730#event-12109747640. inert="" is a workaround for now
|
|
92
|
+
wrap: (children) => (
|
|
93
|
+
/* @ts-expect-error inert not allowed */
|
|
94
|
+
(0, jsx_runtime_1.jsx)("div", { inert: "", "aria-disabled": true, className: "ndl-spotlight-target-inert", children: children })), children: children }) })), (0, jsx_runtime_1.jsx)(react_2.FloatingPortal, { root: indicator.hasAnchorPortal
|
|
95
|
+
? indicator.context.refs.reference.current
|
|
96
|
+
: null, children: indicator.context.open && ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: indicator.indicatorClasses, ref: indicator.context.refs.setFloating, style: Object.assign(Object.assign({}, indicator.floatingStyles), indicator.style) }, indicator.getFloatingProps()))) })] }));
|
|
57
97
|
});
|
|
58
98
|
//# sourceMappingURL=SpotlightTarget.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SpotlightTarget.js","sourceRoot":"","sources":["../../../src/spotlight/SpotlightTarget.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"SpotlightTarget.js","sourceRoot":"","sources":["../../../src/spotlight/SpotlightTarget.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,108 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.useIndicator = useIndicator;
|
|
7
|
+
/**
|
|
8
|
+
*
|
|
9
|
+
* Copyright (c) "Neo4j"
|
|
10
|
+
* Neo4j Sweden AB [http://neo4j.com]
|
|
11
|
+
*
|
|
12
|
+
* This file is part of Neo4j.
|
|
13
|
+
*
|
|
14
|
+
* Neo4j is free software: you can redistribute it and/or modify
|
|
15
|
+
* it under the terms of the GNU General Public License as published by
|
|
16
|
+
* the Free Software Foundation, either version 3 of the License, or
|
|
17
|
+
* (at your option) any later version.
|
|
18
|
+
*
|
|
19
|
+
* This program is distributed in the hope that it will be useful,
|
|
20
|
+
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
21
|
+
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
22
|
+
* GNU General Public License for more details.
|
|
23
|
+
*
|
|
24
|
+
* You should have received a copy of the GNU General Public License
|
|
25
|
+
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|
26
|
+
*/
|
|
27
|
+
const react_1 = require("@floating-ui/react");
|
|
28
|
+
const classnames_1 = __importDefault(require("classnames"));
|
|
29
|
+
const react_2 = require("react");
|
|
30
|
+
const crossAxisMult = {
|
|
31
|
+
left: -1,
|
|
32
|
+
middle: 0,
|
|
33
|
+
right: 1,
|
|
34
|
+
};
|
|
35
|
+
const calcOffset = (variant, placement, rects) => {
|
|
36
|
+
if (variant === 'border') {
|
|
37
|
+
// Border variant is always centered around the middle point
|
|
38
|
+
return {
|
|
39
|
+
mainAxis: -rects.reference.height / 2 - rects.floating.height / 2,
|
|
40
|
+
crossAxis: 0,
|
|
41
|
+
};
|
|
42
|
+
}
|
|
43
|
+
const [mainAxisPlacement, crossAxisPlacement] = placement.split('-');
|
|
44
|
+
/** Note for future reference:
|
|
45
|
+
* Main axis (vertical) is zero at the bottom border of the target.
|
|
46
|
+
* Cross axis (horizontal) is zero at the middle of the target
|
|
47
|
+
* */
|
|
48
|
+
let mainAxis = 0;
|
|
49
|
+
if (mainAxisPlacement === 'bottom') {
|
|
50
|
+
// put the indicator one height of the point above the bottom border of the target
|
|
51
|
+
mainAxis = -2 * rects.floating.height;
|
|
52
|
+
}
|
|
53
|
+
else if (mainAxisPlacement === 'middle') {
|
|
54
|
+
// put the indicator in the middle of the target
|
|
55
|
+
mainAxis = -rects.reference.height / 2 - rects.floating.height / 2;
|
|
56
|
+
}
|
|
57
|
+
else if (mainAxisPlacement === 'top') {
|
|
58
|
+
// put the indicator one height of the point below the top border of the target
|
|
59
|
+
mainAxis = -rects.reference.height + rects.floating.height;
|
|
60
|
+
}
|
|
61
|
+
return {
|
|
62
|
+
mainAxis,
|
|
63
|
+
crossAxis: crossAxisMult[crossAxisPlacement] *
|
|
64
|
+
(rects.reference.width / 2 - rects.floating.width * 1.5),
|
|
65
|
+
};
|
|
66
|
+
};
|
|
67
|
+
function useIndicator({ isOpen, indicatorVariant = 'border', indicatorPlacement = 'top-right', targetRef, hasPulse = true, hasAnchorPortal, }) {
|
|
68
|
+
const data = (0, react_1.useFloating)({
|
|
69
|
+
open: isOpen,
|
|
70
|
+
placement: 'bottom',
|
|
71
|
+
middleware: [
|
|
72
|
+
(0, react_1.offset)(({ rects }) => calcOffset(indicatorVariant, indicatorPlacement, rects)),
|
|
73
|
+
],
|
|
74
|
+
whileElementsMounted: react_1.autoUpdate,
|
|
75
|
+
elements: {
|
|
76
|
+
reference: targetRef === null || targetRef === void 0 ? void 0 : targetRef.current,
|
|
77
|
+
},
|
|
78
|
+
});
|
|
79
|
+
const context = data.context;
|
|
80
|
+
const role = (0, react_1.useRole)(context);
|
|
81
|
+
const interactions = (0, react_1.useInteractions)([role]);
|
|
82
|
+
return (0, react_2.useMemo)(() => {
|
|
83
|
+
var _a, _b, _c;
|
|
84
|
+
return (Object.assign(Object.assign(Object.assign({}, interactions), data), { style: {
|
|
85
|
+
width: indicatorVariant === 'border'
|
|
86
|
+
? `${((_a = targetRef === null || targetRef === void 0 ? void 0 : targetRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) || 0}px`
|
|
87
|
+
: '8px',
|
|
88
|
+
height: indicatorVariant === 'border'
|
|
89
|
+
? `${((_b = targetRef === null || targetRef === void 0 ? void 0 : targetRef.current) === null || _b === void 0 ? void 0 : _b.clientHeight) || 0}px`
|
|
90
|
+
: '8px',
|
|
91
|
+
borderRadius: indicatorVariant === 'border'
|
|
92
|
+
? `${((_c = targetRef === null || targetRef === void 0 ? void 0 : targetRef.current) === null || _c === void 0 ? void 0 : _c.style.borderRadius) || 0}`
|
|
93
|
+
: '50%',
|
|
94
|
+
}, indicatorClasses: (0, classnames_1.default)('ndl-spotlight-target-open', {
|
|
95
|
+
'ndl-spotlight-target-indicator-border': indicatorVariant === 'border',
|
|
96
|
+
'ndl-spotlight-target-indicator-point': indicatorVariant === 'point',
|
|
97
|
+
'ndl-spotlight-target-pulse': hasPulse,
|
|
98
|
+
}), hasAnchorPortal }));
|
|
99
|
+
}, [
|
|
100
|
+
interactions,
|
|
101
|
+
data,
|
|
102
|
+
indicatorVariant,
|
|
103
|
+
targetRef,
|
|
104
|
+
hasPulse,
|
|
105
|
+
hasAnchorPortal,
|
|
106
|
+
]);
|
|
107
|
+
}
|
|
108
|
+
//# sourceMappingURL=use-indicator.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-indicator.js","sourceRoot":"","sources":["../../../src/spotlight/use-indicator.tsx"],"names":[],"mappings":"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"}
|
|
@@ -30,7 +30,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
30
30
|
* You should have received a copy of the GNU General Public License
|
|
31
31
|
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|
32
32
|
*/
|
|
33
|
-
import React, { useEffect } from 'react';
|
|
33
|
+
import React, { useEffect, useState } from 'react';
|
|
34
34
|
import classNames from 'classnames';
|
|
35
35
|
import { useSpotlightContext } from './SpotlightProvider';
|
|
36
36
|
import { Button } from '../button';
|
|
@@ -72,17 +72,15 @@ const SpotlightIconWrapper = React.forwardRef(function SpotlightIconWrapper({ ch
|
|
|
72
72
|
const Component = as || 'div';
|
|
73
73
|
return (_jsx(Component, Object.assign({ ref: ref, className: classes, style: style }, htmlAttributes, { children: children })));
|
|
74
74
|
});
|
|
75
|
-
const SpotlightComponent = React.forwardRef(function SpotlightComponent({ target, actions = [], beforeActions, initialFocus, onClose, children, className, style, htmlAttributes, }, ref) {
|
|
76
|
-
const { isActiveSpotlight, isOpen, setActiveSpotlight, setIsOpen } = useSpotlightContext();
|
|
77
|
-
const
|
|
78
|
-
useEffect(() => {
|
|
79
|
-
const targetElement = document.getElementById(target);
|
|
80
|
-
if (!targetElement)
|
|
81
|
-
return;
|
|
82
|
-
targetRef.current = targetElement;
|
|
83
|
-
}, [target]);
|
|
75
|
+
const SpotlightComponent = React.forwardRef(function SpotlightComponent({ target, actions = [], beforeActions, initialFocus, onClose, placement, hasAnchorPortal, children, className, style, htmlAttributes, }, ref) {
|
|
76
|
+
const { isActiveSpotlight, isOpen, setActiveSpotlight, setIsOpen, registeredTargets, } = useSpotlightContext();
|
|
77
|
+
const [targetElement, setTargetElement] = useState(null);
|
|
84
78
|
const classes = classNames('ndl-spotlight', className);
|
|
85
|
-
|
|
79
|
+
useEffect(() => {
|
|
80
|
+
var _a;
|
|
81
|
+
setTargetElement((_a = registeredTargets[target]) === null || _a === void 0 ? void 0 : _a.current);
|
|
82
|
+
}, [target, registeredTargets]);
|
|
83
|
+
return (_jsx(Popover, { anchorElement: targetElement, hasAnchorPortal: !!targetElement && hasAnchorPortal, isOpen: isActiveSpotlight(target) && isOpen && !!targetElement, shouldCaptureFocus: true, onOpenChange: (isOpen, event) => {
|
|
86
84
|
if (!isOpen) {
|
|
87
85
|
if (event instanceof PointerEvent) {
|
|
88
86
|
onClose === null || onClose === void 0 ? void 0 : onClose('clickOutside');
|
|
@@ -93,7 +91,7 @@ const SpotlightComponent = React.forwardRef(function SpotlightComponent({ target
|
|
|
93
91
|
setActiveSpotlight(null);
|
|
94
92
|
setIsOpen(false);
|
|
95
93
|
}
|
|
96
|
-
}, initialFocus: initialFocus, children: _jsxs(Popover.Content, Object.assign({ ref: ref, className: classes, style: style }, htmlAttributes, { children: [_jsx("div", { children: children }), (beforeActions || !!(actions === null || actions === void 0 ? void 0 : actions.length)) && (_jsxs("div", { className: "ndl-spotlight-footer", children: [_jsx(Typography, { variant: "body-medium", children: beforeActions }), !!(actions === null || actions === void 0 ? void 0 : actions.length) && (_jsx("div", { className: "ndl-spotlight-actions", children: actions.map((action, index) => (_jsx(SpotlightActions, Object.assign({}, action), index))) }))] }))] })) }));
|
|
94
|
+
}, initialFocus: initialFocus, placement: placement, children: _jsxs(Popover.Content, Object.assign({ ref: ref, className: classes, style: style }, htmlAttributes, { children: [_jsx("div", { children: children }), (beforeActions || !!(actions === null || actions === void 0 ? void 0 : actions.length)) && (_jsxs("div", { className: "ndl-spotlight-footer", children: [_jsx(Typography, { variant: "body-medium", children: beforeActions }), !!(actions === null || actions === void 0 ? void 0 : actions.length) && (_jsx("div", { className: "ndl-spotlight-actions", children: actions.map((action, index) => (_jsx(SpotlightActions, Object.assign({}, action), index))) }))] }))] })) }));
|
|
97
95
|
});
|
|
98
96
|
SpotlightComponent.displayName = 'Spotlight';
|
|
99
97
|
const Spotlight = Object.assign(SpotlightComponent, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Spotlight.js","sourceRoot":"","sources":["../../../src/spotlight/Spotlight.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Spotlight.js","sourceRoot":"","sources":["../../../src/spotlight/Spotlight.tsx"],"names":[],"mappings":"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"}
|
|
@@ -33,17 +33,34 @@ export const SpotlightProvider = (props) => {
|
|
|
33
33
|
const { children, hasOverlay = true } = props;
|
|
34
34
|
const [active, setActive] = useState(null);
|
|
35
35
|
const [isOpen, setIsOpen] = useState(false);
|
|
36
|
+
const [targets, setTargets] = useState({});
|
|
37
|
+
const registerTarget = useCallback((id, ref) => {
|
|
38
|
+
setTargets((prev) => (Object.assign(Object.assign({}, prev), { [id]: ref })));
|
|
39
|
+
}, []);
|
|
40
|
+
const unregisterTarget = useCallback((id) => {
|
|
41
|
+
setTargets((prev) => {
|
|
42
|
+
const newTargets = Object.assign({}, prev);
|
|
43
|
+
delete newTargets[id];
|
|
44
|
+
return newTargets;
|
|
45
|
+
});
|
|
46
|
+
}, []);
|
|
36
47
|
const contextValue = {
|
|
37
48
|
isOpen,
|
|
38
49
|
setIsOpen: useCallback((open) => setIsOpen(open), []),
|
|
39
50
|
isActiveSpotlight: useCallback((target) => target === active, [active]),
|
|
40
51
|
setActiveSpotlight: useCallback((target) => setActive(target), []),
|
|
52
|
+
registerTarget,
|
|
53
|
+
unregisterTarget,
|
|
54
|
+
registeredTargets: targets,
|
|
41
55
|
};
|
|
42
56
|
const overlayClasses = classNames('ndl-spotlight-overlay', {
|
|
43
57
|
'ndl-spotlight-overlay-open': isOpen && active != null,
|
|
44
58
|
});
|
|
45
59
|
/** transparent overlay to sandwich the SpotlightTarget, thus making it "highlighted" */
|
|
46
60
|
const highlightOverlayClasses = classNames(overlayClasses, 'n-bg-transparent n-z-[32]');
|
|
47
|
-
return (_jsxs(SpotlightContext.Provider, { value: contextValue, children: [hasOverlay && (_jsxs(_Fragment, { children: [_jsx("div", {
|
|
61
|
+
return (_jsxs(SpotlightContext.Provider, { value: contextValue, children: [hasOverlay && (_jsxs(_Fragment, { children: [_jsx("div", { role: "presentation", onClick: () => {
|
|
62
|
+
setIsOpen(false);
|
|
63
|
+
setActive(null);
|
|
64
|
+
}, "data-testid": "ndl-spotlight-overlay-highlight", className: highlightOverlayClasses }), _jsx("div", { "data-testid": "ndl-spotlight-overlay", className: overlayClasses })] })), children] }));
|
|
48
65
|
};
|
|
49
66
|
//# 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;AACpC,OAAc,EAAE,QAAQ,EAAE,UAAU,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"SpotlightProvider.js","sourceRoot":"","sources":["../../../src/spotlight/SpotlightProvider.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
1
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
/**
|
|
3
3
|
*
|
|
4
4
|
* Copyright (c) "Neo4j"
|
|
@@ -19,34 +19,51 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
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 React from 'react';
|
|
22
|
+
import React, { useEffect } from 'react';
|
|
23
23
|
import { useSpotlightContext } from './SpotlightProvider';
|
|
24
24
|
import classNames from 'classnames';
|
|
25
25
|
import ConditionalWrap from '../_common/ConditionalWrap';
|
|
26
|
-
|
|
27
|
-
|
|
26
|
+
import { useIndicator, } from './use-indicator';
|
|
27
|
+
import { FloatingPortal, useMergeRefs } from '@floating-ui/react';
|
|
28
|
+
export const SpotlightTarget = React.forwardRef(function SpotlightTarget({ id, hasPulse = true, indicatorVariant = 'border', indicatorPlacement = 'top-right', backgroundColor, borderRadius, hasAnchorPortal, children, className, htmlAttributes, }, ref) {
|
|
29
|
+
const { isActiveSpotlight, isOpen, setIsOpen, registerTarget, unregisterTarget, } = useSpotlightContext();
|
|
30
|
+
const internalRef = React.useRef(null);
|
|
31
|
+
const mergedRefs = useMergeRefs([ref, internalRef]);
|
|
32
|
+
useEffect(() => {
|
|
33
|
+
if (internalRef.current)
|
|
34
|
+
registerTarget(id, internalRef);
|
|
35
|
+
return () => unregisterTarget(id);
|
|
36
|
+
}, [id, registerTarget, unregisterTarget]);
|
|
28
37
|
const classes = classNames('ndl-spotlight-target', {
|
|
29
|
-
'ndl-spotlight-target-pulse': hasPulse,
|
|
30
38
|
'ndl-spotlight-target-open': isOpen,
|
|
31
39
|
}, className);
|
|
32
40
|
const isActive = isActiveSpotlight(id);
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
(
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
41
|
+
const indicator = useIndicator({
|
|
42
|
+
isOpen: isActive,
|
|
43
|
+
indicatorVariant,
|
|
44
|
+
indicatorPlacement,
|
|
45
|
+
targetRef: internalRef,
|
|
46
|
+
hasPulse,
|
|
47
|
+
hasAnchorPortal,
|
|
48
|
+
});
|
|
49
|
+
return (_jsxs(_Fragment, { children: [_jsx("div", Object.assign({ role: isActive ? 'button' : undefined, id: id, ref: mergedRefs, className: classes, onClick: (e) => {
|
|
50
|
+
if (isActive && !isOpen) {
|
|
51
|
+
setIsOpen(true);
|
|
52
|
+
e.preventDefault();
|
|
53
|
+
}
|
|
54
|
+
}, style: { backgroundColor, borderRadius }, onKeyDown: (e) => {
|
|
55
|
+
if (isActive &&
|
|
56
|
+
!isOpen &&
|
|
57
|
+
(e.code === 'Enter' || e.code === 'Space')) {
|
|
58
|
+
setIsOpen(true);
|
|
59
|
+
e.preventDefault();
|
|
60
|
+
}
|
|
61
|
+
}, tabIndex: isActive ? 0 : -1, "aria-label": "spotlight target" }, htmlAttributes, { children: _jsx(ConditionalWrap, { shouldWrap: isActive,
|
|
62
|
+
// TODO v4: inert should be fixed in react 19? https://github.com/facebook/react/pull/24730#event-12109747640. inert="" is a workaround for now
|
|
63
|
+
wrap: (children) => (
|
|
64
|
+
/* @ts-expect-error inert not allowed */
|
|
65
|
+
_jsx("div", { inert: "", "aria-disabled": true, className: "ndl-spotlight-target-inert", children: children })), children: children }) })), _jsx(FloatingPortal, { root: indicator.hasAnchorPortal
|
|
66
|
+
? indicator.context.refs.reference.current
|
|
67
|
+
: 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()))) })] }));
|
|
51
68
|
});
|
|
52
69
|
//# sourceMappingURL=SpotlightTarget.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SpotlightTarget.js","sourceRoot":"","sources":["../../../src/spotlight/SpotlightTarget.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"SpotlightTarget.js","sourceRoot":"","sources":["../../../src/spotlight/SpotlightTarget.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,102 @@
|
|
|
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, offset, useFloating, useInteractions, useRole, } from '@floating-ui/react';
|
|
22
|
+
import classNames from 'classnames';
|
|
23
|
+
import { useMemo } from 'react';
|
|
24
|
+
const crossAxisMult = {
|
|
25
|
+
left: -1,
|
|
26
|
+
middle: 0,
|
|
27
|
+
right: 1,
|
|
28
|
+
};
|
|
29
|
+
const calcOffset = (variant, placement, rects) => {
|
|
30
|
+
if (variant === 'border') {
|
|
31
|
+
// Border variant is always centered around the middle point
|
|
32
|
+
return {
|
|
33
|
+
mainAxis: -rects.reference.height / 2 - rects.floating.height / 2,
|
|
34
|
+
crossAxis: 0,
|
|
35
|
+
};
|
|
36
|
+
}
|
|
37
|
+
const [mainAxisPlacement, crossAxisPlacement] = placement.split('-');
|
|
38
|
+
/** Note for future reference:
|
|
39
|
+
* Main axis (vertical) is zero at the bottom border of the target.
|
|
40
|
+
* Cross axis (horizontal) is zero at the middle of the target
|
|
41
|
+
* */
|
|
42
|
+
let mainAxis = 0;
|
|
43
|
+
if (mainAxisPlacement === 'bottom') {
|
|
44
|
+
// put the indicator one height of the point above the bottom border of the target
|
|
45
|
+
mainAxis = -2 * rects.floating.height;
|
|
46
|
+
}
|
|
47
|
+
else if (mainAxisPlacement === 'middle') {
|
|
48
|
+
// put the indicator in the middle of the target
|
|
49
|
+
mainAxis = -rects.reference.height / 2 - rects.floating.height / 2;
|
|
50
|
+
}
|
|
51
|
+
else if (mainAxisPlacement === 'top') {
|
|
52
|
+
// put the indicator one height of the point below the top border of the target
|
|
53
|
+
mainAxis = -rects.reference.height + rects.floating.height;
|
|
54
|
+
}
|
|
55
|
+
return {
|
|
56
|
+
mainAxis,
|
|
57
|
+
crossAxis: crossAxisMult[crossAxisPlacement] *
|
|
58
|
+
(rects.reference.width / 2 - rects.floating.width * 1.5),
|
|
59
|
+
};
|
|
60
|
+
};
|
|
61
|
+
export function useIndicator({ isOpen, indicatorVariant = 'border', indicatorPlacement = 'top-right', targetRef, hasPulse = true, hasAnchorPortal, }) {
|
|
62
|
+
const data = useFloating({
|
|
63
|
+
open: isOpen,
|
|
64
|
+
placement: 'bottom',
|
|
65
|
+
middleware: [
|
|
66
|
+
offset(({ rects }) => calcOffset(indicatorVariant, indicatorPlacement, rects)),
|
|
67
|
+
],
|
|
68
|
+
whileElementsMounted: autoUpdate,
|
|
69
|
+
elements: {
|
|
70
|
+
reference: targetRef === null || targetRef === void 0 ? void 0 : targetRef.current,
|
|
71
|
+
},
|
|
72
|
+
});
|
|
73
|
+
const context = data.context;
|
|
74
|
+
const role = useRole(context);
|
|
75
|
+
const interactions = useInteractions([role]);
|
|
76
|
+
return useMemo(() => {
|
|
77
|
+
var _a, _b, _c;
|
|
78
|
+
return (Object.assign(Object.assign(Object.assign({}, interactions), data), { style: {
|
|
79
|
+
width: indicatorVariant === 'border'
|
|
80
|
+
? `${((_a = targetRef === null || targetRef === void 0 ? void 0 : targetRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) || 0}px`
|
|
81
|
+
: '8px',
|
|
82
|
+
height: indicatorVariant === 'border'
|
|
83
|
+
? `${((_b = targetRef === null || targetRef === void 0 ? void 0 : targetRef.current) === null || _b === void 0 ? void 0 : _b.clientHeight) || 0}px`
|
|
84
|
+
: '8px',
|
|
85
|
+
borderRadius: indicatorVariant === 'border'
|
|
86
|
+
? `${((_c = targetRef === null || targetRef === void 0 ? void 0 : targetRef.current) === null || _c === void 0 ? void 0 : _c.style.borderRadius) || 0}`
|
|
87
|
+
: '50%',
|
|
88
|
+
}, indicatorClasses: classNames('ndl-spotlight-target-open', {
|
|
89
|
+
'ndl-spotlight-target-indicator-border': indicatorVariant === 'border',
|
|
90
|
+
'ndl-spotlight-target-indicator-point': indicatorVariant === 'point',
|
|
91
|
+
'ndl-spotlight-target-pulse': hasPulse,
|
|
92
|
+
}), hasAnchorPortal }));
|
|
93
|
+
}, [
|
|
94
|
+
interactions,
|
|
95
|
+
data,
|
|
96
|
+
indicatorVariant,
|
|
97
|
+
targetRef,
|
|
98
|
+
hasPulse,
|
|
99
|
+
hasAnchorPortal,
|
|
100
|
+
]);
|
|
101
|
+
}
|
|
102
|
+
//# sourceMappingURL=use-indicator.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-indicator.js","sourceRoot":"","sources":["../../../src/spotlight/use-indicator.tsx"],"names":[],"mappings":"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"}
|
|
@@ -20,6 +20,7 @@
|
|
|
20
20
|
*/
|
|
21
21
|
import React from 'react';
|
|
22
22
|
import { HtmlAttributes, PolymorphicForwardRefExoticComponent, PolymorphicPropsWithRef } from '../_common/types';
|
|
23
|
+
import { PopoverProps } from '../popover';
|
|
23
24
|
import { EventTypeLabelProps } from '../label';
|
|
24
25
|
export type SpotlightActionsProps = {
|
|
25
26
|
label: string;
|
|
@@ -61,17 +62,48 @@ export type SpotlightProps = {
|
|
|
61
62
|
actions?: React.ComponentProps<typeof SpotlightActions>[];
|
|
62
63
|
/** Left bottom corner content */
|
|
63
64
|
beforeActions?: React.ReactNode;
|
|
64
|
-
/**
|
|
65
|
-
initialFocus?: number | React.MutableRefObject<HTMLElement | null>;
|
|
65
|
+
/** Callback function called when Esc is pressed or on mouse click outside of the Spotlight*/
|
|
66
66
|
onClose?: (action: SpotlightCloseAction) => void;
|
|
67
|
+
/** Use anchorEl for portal's container. Should be used if the spotlight is inside an Dialog or Modal */
|
|
68
|
+
hasAnchorPortal?: boolean;
|
|
67
69
|
children?: React.ReactNode;
|
|
68
70
|
className?: string;
|
|
69
71
|
style?: React.CSSProperties;
|
|
70
72
|
htmlAttributes?: HtmlAttributes<'div'>;
|
|
71
|
-
}
|
|
72
|
-
declare const Spotlight: Omit<React.ForwardRefExoticComponent<
|
|
73
|
+
} & Pick<PopoverProps, 'placement' | 'initialFocus'>;
|
|
74
|
+
declare const Spotlight: Omit<React.ForwardRefExoticComponent<{
|
|
75
|
+
/** Id of the SpotlightTarget where the spotlight should be rendered */
|
|
76
|
+
target: string;
|
|
77
|
+
/** Action buttons in the footer */
|
|
78
|
+
actions?: React.ComponentProps<typeof SpotlightActions>[];
|
|
79
|
+
/** Left bottom corner content */
|
|
80
|
+
beforeActions?: React.ReactNode;
|
|
81
|
+
/** Callback function called when Esc is pressed or on mouse click outside of the Spotlight*/
|
|
82
|
+
onClose?: (action: SpotlightCloseAction) => void;
|
|
83
|
+
/** Use anchorEl for portal's container. Should be used if the spotlight is inside an Dialog or Modal */
|
|
84
|
+
hasAnchorPortal?: boolean;
|
|
85
|
+
children?: React.ReactNode;
|
|
86
|
+
className?: string;
|
|
87
|
+
style?: React.CSSProperties;
|
|
88
|
+
htmlAttributes?: HtmlAttributes<"div">;
|
|
89
|
+
} & Pick<PopoverProps, "placement" | "initialFocus"> & {
|
|
73
90
|
[key: string]: unknown;
|
|
74
|
-
}>, "$$typeof"> & Omit<React.ExoticComponent<
|
|
91
|
+
}>, "$$typeof"> & Omit<React.ExoticComponent<{
|
|
92
|
+
/** Id of the SpotlightTarget where the spotlight should be rendered */
|
|
93
|
+
target: string;
|
|
94
|
+
/** Action buttons in the footer */
|
|
95
|
+
actions?: React.ComponentProps<typeof SpotlightActions>[];
|
|
96
|
+
/** Left bottom corner content */
|
|
97
|
+
beforeActions?: React.ReactNode;
|
|
98
|
+
/** Callback function called when Esc is pressed or on mouse click outside of the Spotlight*/
|
|
99
|
+
onClose?: (action: SpotlightCloseAction) => void;
|
|
100
|
+
/** Use anchorEl for portal's container. Should be used if the spotlight is inside an Dialog or Modal */
|
|
101
|
+
hasAnchorPortal?: boolean;
|
|
102
|
+
children?: React.ReactNode;
|
|
103
|
+
className?: string;
|
|
104
|
+
style?: React.CSSProperties;
|
|
105
|
+
htmlAttributes?: HtmlAttributes<"div">;
|
|
106
|
+
} & Pick<PopoverProps, "placement" | "initialFocus"> & {
|
|
75
107
|
[key: string]: unknown;
|
|
76
108
|
}>, never> & (<InstanceT extends React.ElementType = "div">(props: PolymorphicPropsWithRef<InstanceT, SpotlightProps>) => React.ReactElement | null) & {
|
|
77
109
|
Actions: PolymorphicForwardRefExoticComponent<"button", SpotlightActionsProps>;
|
|
@@ -29,6 +29,9 @@ type SpotlightContextType = {
|
|
|
29
29
|
isActiveSpotlight: (target: string) => boolean;
|
|
30
30
|
/** Sets the active spotlight to the provided target. Use null to clear active target */
|
|
31
31
|
setActiveSpotlight: (target: string | null) => void;
|
|
32
|
+
registerTarget: (id: string, ref: React.RefObject<HTMLElement>) => void;
|
|
33
|
+
unregisterTarget: (id: string) => void;
|
|
34
|
+
registeredTargets: Record<string, React.RefObject<HTMLElement>>;
|
|
32
35
|
};
|
|
33
36
|
export declare const useSpotlightContext: () => SpotlightContextType;
|
|
34
37
|
type SpotlightProviderProps = {
|
|
@@ -20,16 +20,22 @@
|
|
|
20
20
|
*/
|
|
21
21
|
import React from 'react';
|
|
22
22
|
import { PolymorphicForwardRefExoticComponent } from '../_common/types';
|
|
23
|
+
import { IndicatorPlacement, IndicatorVariant } from './use-indicator';
|
|
23
24
|
type SpotlightTargetProps = {
|
|
24
25
|
/** id of the target. should match with target prop in Spotlight */
|
|
25
26
|
id: string;
|
|
26
27
|
/** if the target should have a pulse animation. default behaviour is true */
|
|
27
28
|
hasPulse?: boolean;
|
|
29
|
+
/** variant of the target indicator */
|
|
30
|
+
indicatorVariant?: IndicatorVariant;
|
|
31
|
+
/** placement of the indicator. only applicable to point variant */
|
|
32
|
+
indicatorPlacement?: IndicatorPlacement;
|
|
28
33
|
/** background color */
|
|
29
34
|
backgroundColor?: React.CSSProperties['backgroundColor'];
|
|
30
35
|
/** border radius */
|
|
31
36
|
borderRadius?: React.CSSProperties['borderRadius'];
|
|
32
|
-
/**
|
|
37
|
+
/** Use anchorEl for portal's container. Should be used if the spotlight target is inside an Dialog */
|
|
38
|
+
hasAnchorPortal?: boolean;
|
|
33
39
|
className?: string;
|
|
34
40
|
children?: React.ReactNode;
|
|
35
41
|
};
|
|
@@ -0,0 +1,38 @@
|
|
|
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 { useFloating, UseInteractionsReturn } from '@floating-ui/react';
|
|
22
|
+
export type IndicatorVariant = 'border' | 'point';
|
|
23
|
+
interface IndicatorOptions {
|
|
24
|
+
isOpen: boolean;
|
|
25
|
+
indicatorVariant?: IndicatorVariant;
|
|
26
|
+
indicatorPlacement?: IndicatorPlacement;
|
|
27
|
+
targetRef: React.RefObject<HTMLElement>;
|
|
28
|
+
hasPulse?: boolean;
|
|
29
|
+
hasAnchorPortal?: boolean;
|
|
30
|
+
}
|
|
31
|
+
interface UseIndicatorReturn extends UseInteractionsReturn, ReturnType<typeof useFloating> {
|
|
32
|
+
style: React.CSSProperties;
|
|
33
|
+
indicatorClasses?: string;
|
|
34
|
+
hasAnchorPortal?: boolean;
|
|
35
|
+
}
|
|
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;
|
|
38
|
+
export {};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@neo4j-ndl/react",
|
|
3
|
-
"version": "3.2.
|
|
3
|
+
"version": "3.2.6",
|
|
4
4
|
"sideEffects": false,
|
|
5
5
|
"description": "React implementation of Neo4j Design System",
|
|
6
6
|
"keywords": [
|
|
@@ -64,7 +64,7 @@
|
|
|
64
64
|
"@tanstack/react-table": "8.20.5",
|
|
65
65
|
"react": ">=16.8.0",
|
|
66
66
|
"react-dom": ">=16.8.0",
|
|
67
|
-
"@neo4j-ndl/base": "^3.2.
|
|
67
|
+
"@neo4j-ndl/base": "^3.2.1"
|
|
68
68
|
},
|
|
69
69
|
"dependencies": {
|
|
70
70
|
"@dnd-kit/core": "6.1.0",
|