@navikt/ds-react 7.33.2 → 7.33.3
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/cjs/overlays/action-menu/ActionMenu.d.ts +20 -0
- package/cjs/overlays/action-menu/ActionMenu.js +20 -0
- package/cjs/overlays/action-menu/ActionMenu.js.map +1 -1
- package/cjs/overlays/dismissablelayer/DismissableLayer.js +23 -32
- package/cjs/overlays/dismissablelayer/DismissableLayer.js.map +1 -1
- package/cjs/overlays/dismissablelayer/util/useEscapeKeydown.d.ts +1 -1
- package/cjs/overlays/dismissablelayer/util/useEscapeKeydown.js +8 -3
- package/cjs/overlays/dismissablelayer/util/useEscapeKeydown.js.map +1 -1
- package/cjs/overlays/dismissablelayer/util/useFocusOutside.d.ts +1 -1
- package/cjs/overlays/dismissablelayer/util/useFocusOutside.js +8 -3
- package/cjs/overlays/dismissablelayer/util/useFocusOutside.js.map +1 -1
- package/cjs/overlays/dismissablelayer/util/usePointerDownOutside.d.ts +1 -1
- package/cjs/overlays/dismissablelayer/util/usePointerDownOutside.js +5 -2
- package/cjs/overlays/dismissablelayer/util/usePointerDownOutside.js.map +1 -1
- package/esm/overlays/action-menu/ActionMenu.d.ts +20 -0
- package/esm/overlays/action-menu/ActionMenu.js +20 -0
- package/esm/overlays/action-menu/ActionMenu.js.map +1 -1
- package/esm/overlays/dismissablelayer/DismissableLayer.js +22 -31
- package/esm/overlays/dismissablelayer/DismissableLayer.js.map +1 -1
- package/esm/overlays/dismissablelayer/util/useEscapeKeydown.d.ts +1 -1
- package/esm/overlays/dismissablelayer/util/useEscapeKeydown.js +8 -3
- package/esm/overlays/dismissablelayer/util/useEscapeKeydown.js.map +1 -1
- package/esm/overlays/dismissablelayer/util/useFocusOutside.d.ts +1 -1
- package/esm/overlays/dismissablelayer/util/useFocusOutside.js +8 -3
- package/esm/overlays/dismissablelayer/util/useFocusOutside.js.map +1 -1
- package/esm/overlays/dismissablelayer/util/usePointerDownOutside.d.ts +1 -1
- package/esm/overlays/dismissablelayer/util/usePointerDownOutside.js +5 -2
- package/esm/overlays/dismissablelayer/util/usePointerDownOutside.js.map +1 -1
- package/package.json +5 -5
- package/src/overlays/action-menu/ActionMenu.tsx +20 -0
- package/src/overlays/dismissablelayer/DismissableLayer.tsx +91 -97
- package/src/overlays/dismissablelayer/util/useEscapeKeydown.ts +9 -2
- package/src/overlays/dismissablelayer/util/useFocusOutside.ts +9 -2
- package/src/overlays/dismissablelayer/util/usePointerDownOutside.ts +6 -1
|
@@ -11,7 +11,6 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
11
11
|
};
|
|
12
12
|
import React, { forwardRef, useContext, useEffect, useState } from "react";
|
|
13
13
|
import { Slot } from "../../slot/Slot.js";
|
|
14
|
-
import { omit } from "../../util/index.js";
|
|
15
14
|
import { composeEventHandlers } from "../../util/composeEventHandlers.js";
|
|
16
15
|
import { useMergeRefs } from "../../util/hooks/index.js";
|
|
17
16
|
import { ownerDocument } from "../../util/owner.js";
|
|
@@ -19,23 +18,6 @@ import { getSortedLayers } from "./util/sort-layers.js";
|
|
|
19
18
|
import { useEscapeKeydown } from "./util/useEscapeKeydown.js";
|
|
20
19
|
import { useFocusOutside } from "./util/useFocusOutside.js";
|
|
21
20
|
import { usePointerDownOutside } from "./util/usePointerDownOutside.js";
|
|
22
|
-
const DismissableLayer = forwardRef((_a, forwardedRef) => {
|
|
23
|
-
var { enabled = true } = _a, restProps = __rest(_a, ["enabled"]);
|
|
24
|
-
if (!enabled) {
|
|
25
|
-
const Component = restProps.asChild ? Slot : "div";
|
|
26
|
-
return (React.createElement(Component, Object.assign({}, omit(restProps, [
|
|
27
|
-
"asChild",
|
|
28
|
-
"disableOutsidePointerEvents",
|
|
29
|
-
"onDismiss",
|
|
30
|
-
"onEscapeKeyDown",
|
|
31
|
-
"onFocusOutside",
|
|
32
|
-
"onInteractOutside",
|
|
33
|
-
"onPointerDownOutside",
|
|
34
|
-
"safeZone",
|
|
35
|
-
]), { ref: forwardedRef })));
|
|
36
|
-
}
|
|
37
|
-
return React.createElement(DismissableLayerInternal, Object.assign({}, restProps, { ref: forwardedRef }));
|
|
38
|
-
});
|
|
39
21
|
const BranchedLayerContext = React.createContext(null);
|
|
40
22
|
/* ------------------------ DismissableLayerInternal ------------------------ */
|
|
41
23
|
const CONTEXT_UPDATE_EVENT = "dismissableLayer.update";
|
|
@@ -45,8 +27,8 @@ const DismissableLayerContext = React.createContext({
|
|
|
45
27
|
branchedLayers: new Map(),
|
|
46
28
|
layersWithOutsidePointerEventsDisabled: new Set(),
|
|
47
29
|
});
|
|
48
|
-
const
|
|
49
|
-
var { children, disableOutsidePointerEvents, onDismiss, onInteractOutside, onEscapeKeyDown, onFocusOutside, onPointerDownOutside, safeZone, asChild } = _a, restProps = __rest(_a, ["children", "disableOutsidePointerEvents", "onDismiss", "onInteractOutside", "onEscapeKeyDown", "onFocusOutside", "onPointerDownOutside", "safeZone", "asChild"]);
|
|
30
|
+
const DismissableLayer = forwardRef((_a, forwardedRef) => {
|
|
31
|
+
var { children, disableOutsidePointerEvents, onDismiss, onInteractOutside, onEscapeKeyDown, onFocusOutside, onPointerDownOutside, safeZone, asChild, enabled = true } = _a, restProps = __rest(_a, ["children", "disableOutsidePointerEvents", "onDismiss", "onInteractOutside", "onEscapeKeyDown", "onFocusOutside", "onPointerDownOutside", "safeZone", "asChild", "enabled"]);
|
|
50
32
|
const context = useContext(DismissableLayerContext);
|
|
51
33
|
const [, forceRerender] = useState({});
|
|
52
34
|
const [node, setNode] = React.useState(null);
|
|
@@ -107,7 +89,7 @@ const DismissableLayerInternal = forwardRef((_a, forwardedRef) => {
|
|
|
107
89
|
if (!event.defaultPrevented && onDismiss) {
|
|
108
90
|
onDismiss();
|
|
109
91
|
}
|
|
110
|
-
}, ownerDoc);
|
|
92
|
+
}, ownerDoc, enabled);
|
|
111
93
|
const focusOutside = useFocusOutside((event) => {
|
|
112
94
|
/**
|
|
113
95
|
* We call these before letting `handleOutsideEvent` do its checks to give consumer a chance to preventDefault.
|
|
@@ -121,7 +103,7 @@ const DismissableLayerInternal = forwardRef((_a, forwardedRef) => {
|
|
|
121
103
|
if (!event.defaultPrevented && onDismiss) {
|
|
122
104
|
onDismiss();
|
|
123
105
|
}
|
|
124
|
-
}, ownerDoc);
|
|
106
|
+
}, ownerDoc, enabled);
|
|
125
107
|
useEscapeKeydown((event) => {
|
|
126
108
|
/**
|
|
127
109
|
* The deepest nested element will always be last in the descendants list.
|
|
@@ -143,12 +125,12 @@ const DismissableLayerInternal = forwardRef((_a, forwardedRef) => {
|
|
|
143
125
|
event.preventDefault();
|
|
144
126
|
onDismiss();
|
|
145
127
|
}
|
|
146
|
-
}, ownerDoc);
|
|
128
|
+
}, ownerDoc, enabled);
|
|
147
129
|
/**
|
|
148
130
|
* Handles registering `layers` and `layersWithOutsidePointerEventsDisabled`.
|
|
149
131
|
*/
|
|
150
132
|
useEffect(() => {
|
|
151
|
-
if (!node) {
|
|
133
|
+
if (!node || !enabled) {
|
|
152
134
|
return;
|
|
153
135
|
}
|
|
154
136
|
if (disableOutsidePointerEvents) {
|
|
@@ -166,30 +148,39 @@ const DismissableLayerInternal = forwardRef((_a, forwardedRef) => {
|
|
|
166
148
|
ownerDoc.body.style.pointerEvents = originalBodyPointerEvents;
|
|
167
149
|
}
|
|
168
150
|
};
|
|
169
|
-
}, [node, disableOutsidePointerEvents, context, ownerDoc]);
|
|
151
|
+
}, [node, enabled, disableOutsidePointerEvents, context, ownerDoc]);
|
|
170
152
|
/**
|
|
171
153
|
* We purposefully prevent combining this effect with the `disableOutsidePointerEvents` effect
|
|
172
154
|
* because a change to `disableOutsidePointerEvents` would remove this layer from the stack
|
|
173
155
|
* and add it to the end again so the layering order wouldn't be creation order.
|
|
174
156
|
* We only want them to be removed from context stacks when unmounted.
|
|
157
|
+
*
|
|
158
|
+
* We depend on `enabled` to clean up when the layer is disabled.
|
|
175
159
|
*/
|
|
160
|
+
// biome-ignore lint/correctness/useExhaustiveDependencies: We need to clean up after enabled changes.
|
|
176
161
|
useEffect(() => {
|
|
177
162
|
return () => {
|
|
178
163
|
if (!node) {
|
|
179
164
|
return;
|
|
180
165
|
}
|
|
181
|
-
context.layers.
|
|
182
|
-
|
|
183
|
-
|
|
166
|
+
if (context.layers.has(node) ||
|
|
167
|
+
context.layersWithOutsidePointerEventsDisabled.has(node)) {
|
|
168
|
+
context.layers.delete(node);
|
|
169
|
+
context.layersWithOutsidePointerEventsDisabled.delete(node);
|
|
170
|
+
dispatchUpdate();
|
|
171
|
+
}
|
|
184
172
|
};
|
|
185
|
-
}, [node, context]);
|
|
173
|
+
}, [node, context, enabled]);
|
|
186
174
|
const parentBranchedLayer = useContext(BranchedLayerContext);
|
|
187
175
|
/**
|
|
188
176
|
* Handles registering and unregistering branched (nested) layers.
|
|
189
177
|
* When this layer has a parent, we register it as a child of the parent.
|
|
190
178
|
*/
|
|
191
179
|
useEffect(() => {
|
|
192
|
-
if (!node ||
|
|
180
|
+
if (!node ||
|
|
181
|
+
!enabled ||
|
|
182
|
+
!parentBranchedLayer ||
|
|
183
|
+
node === parentBranchedLayer) {
|
|
193
184
|
return;
|
|
194
185
|
}
|
|
195
186
|
if (!context.branchedLayers.has(parentBranchedLayer)) {
|
|
@@ -207,7 +198,7 @@ const DismissableLayerInternal = forwardRef((_a, forwardedRef) => {
|
|
|
207
198
|
}
|
|
208
199
|
dispatchUpdate();
|
|
209
200
|
};
|
|
210
|
-
}, [node, parentBranchedLayer, context]);
|
|
201
|
+
}, [node, enabled, parentBranchedLayer, context]);
|
|
211
202
|
/**
|
|
212
203
|
* Synchronizes layer state across all mounted `DismissableLayer` instances.
|
|
213
204
|
* All layers re-render on every context change to recalculate their position and pointer-events.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DismissableLayer.js","sourceRoot":"","sources":["../../../src/overlays/dismissablelayer/DismissableLayer.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC3E,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACvC,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"DismissableLayer.js","sourceRoot":"","sources":["../../../src/overlays/dismissablelayer/DismissableLayer.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare function useEscapeKeydown(callback?: (event: KeyboardEvent) => void, ownerDocument?: Document): void;
|
|
1
|
+
export declare function useEscapeKeydown(callback?: (event: KeyboardEvent) => void, ownerDocument?: Document, enabled?: boolean): void;
|
|
@@ -1,15 +1,20 @@
|
|
|
1
1
|
import { useEffect } from "react";
|
|
2
2
|
import { useCallbackRef } from "../../../util/hooks/index.js";
|
|
3
|
-
export function useEscapeKeydown(callback, ownerDocument = globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) {
|
|
3
|
+
export function useEscapeKeydown(callback, ownerDocument = globalThis === null || globalThis === void 0 ? void 0 : globalThis.document, enabled = true) {
|
|
4
4
|
const onEscapeKeyDown = useCallbackRef(callback);
|
|
5
5
|
useEffect(() => {
|
|
6
|
+
if (!enabled) {
|
|
7
|
+
return;
|
|
8
|
+
}
|
|
6
9
|
const handleKeyDown = (event) => {
|
|
7
10
|
if (event.key === "Escape") {
|
|
8
11
|
onEscapeKeyDown(event);
|
|
9
12
|
}
|
|
10
13
|
};
|
|
11
14
|
ownerDocument.addEventListener("keydown", handleKeyDown, true);
|
|
12
|
-
return () =>
|
|
13
|
-
|
|
15
|
+
return () => {
|
|
16
|
+
ownerDocument.removeEventListener("keydown", handleKeyDown, true);
|
|
17
|
+
};
|
|
18
|
+
}, [onEscapeKeyDown, ownerDocument, enabled]);
|
|
14
19
|
}
|
|
15
20
|
//# sourceMappingURL=useEscapeKeydown.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useEscapeKeydown.js","sourceRoot":"","sources":["../../../../src/overlays/dismissablelayer/util/useEscapeKeydown.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAErD,MAAM,UAAU,gBAAgB,CAC9B,QAAyC,EACzC,gBAA0B,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,QAAQ;
|
|
1
|
+
{"version":3,"file":"useEscapeKeydown.js","sourceRoot":"","sources":["../../../../src/overlays/dismissablelayer/util/useEscapeKeydown.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAErD,MAAM,UAAU,gBAAgB,CAC9B,QAAyC,EACzC,gBAA0B,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,QAAQ,EAC9C,UAAmB,IAAI;IAEvB,MAAM,eAAe,GAAG,cAAc,CAAC,QAAQ,CAAC,CAAC;IAEjD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,OAAO,EAAE,CAAC;YACb,OAAO;QACT,CAAC;QAED,MAAM,aAAa,GAAG,CAAC,KAAoB,EAAE,EAAE;YAC7C,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE,CAAC;gBAC3B,eAAe,CAAC,KAAK,CAAC,CAAC;YACzB,CAAC;QACH,CAAC,CAAC;QAEF,aAAa,CAAC,gBAAgB,CAAC,SAAS,EAAE,aAAa,EAAE,IAAI,CAAC,CAAC;QAE/D,OAAO,GAAG,EAAE;YACV,aAAa,CAAC,mBAAmB,CAAC,SAAS,EAAE,aAAa,EAAE,IAAI,CAAC,CAAC;QACpE,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,eAAe,EAAE,aAAa,EAAE,OAAO,CAAC,CAAC,CAAC;AAChD,CAAC"}
|
|
@@ -2,7 +2,7 @@ import { CustomFocusEvent } from "./dispatchCustomEvent.js";
|
|
|
2
2
|
/**
|
|
3
3
|
* Tracks focus outside a React subtree. Returns props for the subtree root.
|
|
4
4
|
*/
|
|
5
|
-
export declare function useFocusOutside(callback?: (event: CustomFocusEvent) => void, ownerDocument?: Document): {
|
|
5
|
+
export declare function useFocusOutside(callback?: (event: CustomFocusEvent) => void, ownerDocument?: Document, enabled?: boolean): {
|
|
6
6
|
onFocusCapture: () => void;
|
|
7
7
|
onBlurCapture: () => void;
|
|
8
8
|
};
|
|
@@ -4,10 +4,13 @@ import { CUSTOM_EVENTS, dispatchCustomEvent, } from "./dispatchCustomEvent.js";
|
|
|
4
4
|
/**
|
|
5
5
|
* Tracks focus outside a React subtree. Returns props for the subtree root.
|
|
6
6
|
*/
|
|
7
|
-
export function useFocusOutside(callback, ownerDocument = globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) {
|
|
7
|
+
export function useFocusOutside(callback, ownerDocument = globalThis === null || globalThis === void 0 ? void 0 : globalThis.document, enabled = true) {
|
|
8
8
|
const handleFocusOutside = useCallbackRef(callback);
|
|
9
9
|
const isFocusInsideReactTreeRef = useRef(false);
|
|
10
10
|
useEffect(() => {
|
|
11
|
+
if (!enabled) {
|
|
12
|
+
return;
|
|
13
|
+
}
|
|
11
14
|
const handleFocus = (event) => {
|
|
12
15
|
if (event.target && !isFocusInsideReactTreeRef.current) {
|
|
13
16
|
const eventDetail = { originalEvent: event };
|
|
@@ -24,8 +27,10 @@ export function useFocusOutside(callback, ownerDocument = globalThis === null ||
|
|
|
24
27
|
}
|
|
25
28
|
};
|
|
26
29
|
ownerDocument.addEventListener("focusin", handleFocus);
|
|
27
|
-
return () =>
|
|
28
|
-
|
|
30
|
+
return () => {
|
|
31
|
+
ownerDocument.removeEventListener("focusin", handleFocus);
|
|
32
|
+
};
|
|
33
|
+
}, [ownerDocument, handleFocusOutside, enabled]);
|
|
29
34
|
/**
|
|
30
35
|
* By directly setting isFocusInsideReactTreeRef on focus-events at the root of the "dismissable" element,
|
|
31
36
|
* we can eliminate the need for DOM traversal to verify if the focused element is within the react tree.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useFocusOutside.js","sourceRoot":"","sources":["../../../../src/overlays/dismissablelayer/util/useFocusOutside.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACrD,OAAO,EACL,aAAa,EAEb,mBAAmB,GACpB,MAAM,uBAAuB,CAAC;AAE/B;;GAEG;AACH,MAAM,UAAU,eAAe,CAC7B,QAA4C,EAC5C,gBAA0B,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,QAAQ;
|
|
1
|
+
{"version":3,"file":"useFocusOutside.js","sourceRoot":"","sources":["../../../../src/overlays/dismissablelayer/util/useFocusOutside.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACrD,OAAO,EACL,aAAa,EAEb,mBAAmB,GACpB,MAAM,uBAAuB,CAAC;AAE/B;;GAEG;AACH,MAAM,UAAU,eAAe,CAC7B,QAA4C,EAC5C,gBAA0B,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,QAAQ,EAC9C,UAAmB,IAAI;IAEvB,MAAM,kBAAkB,GAAG,cAAc,CAAC,QAAQ,CAAkB,CAAC;IACrE,MAAM,yBAAyB,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAEhD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,OAAO,EAAE,CAAC;YACb,OAAO;QACT,CAAC;QAED,MAAM,WAAW,GAAG,CAAC,KAAiB,EAAE,EAAE;YACxC,IAAI,KAAK,CAAC,MAAM,IAAI,CAAC,yBAAyB,CAAC,OAAO,EAAE,CAAC;gBACvD,MAAM,WAAW,GAAG,EAAE,aAAa,EAAE,KAAK,EAAE,CAAC;gBAE7C;;;;;;;;mBAQG;gBACH,mBAAmB,CACjB,aAAa,CAAC,aAAa,EAC3B,kBAAkB,EAClB,WAAW,CACZ,CAAC;YACJ,CAAC;QACH,CAAC,CAAC;QACF,aAAa,CAAC,gBAAgB,CAAC,SAAS,EAAE,WAAW,CAAC,CAAC;QACvD,OAAO,GAAG,EAAE;YACV,aAAa,CAAC,mBAAmB,CAAC,SAAS,EAAE,WAAW,CAAC,CAAC;QAC5D,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,aAAa,EAAE,kBAAkB,EAAE,OAAO,CAAC,CAAC,CAAC;IAEjD;;;OAGG;IACH,OAAO;QACL,cAAc,EAAE,GAAG,EAAE;YACnB,yBAAyB,CAAC,OAAO,GAAG,IAAI,CAAC;QAC3C,CAAC;QACD,aAAa,EAAE,GAAG,EAAE;YAClB,yBAAyB,CAAC,OAAO,GAAG,KAAK,CAAC;QAC5C,CAAC;KACF,CAAC;AACJ,CAAC"}
|
|
@@ -5,6 +5,6 @@ import { CustomPointerDownEvent } from "./dispatchCustomEvent.js";
|
|
|
5
5
|
* Returns props to pass to the node we want to check for outside events.
|
|
6
6
|
* By checking `isPointerInsideReactTreeRef` we can determine if the event happened outside the subtree of the node, saving some element-comparisons.
|
|
7
7
|
*/
|
|
8
|
-
export declare function usePointerDownOutside(callback?: (event: CustomPointerDownEvent) => void, ownerDocument?: Document): {
|
|
8
|
+
export declare function usePointerDownOutside(callback?: (event: CustomPointerDownEvent) => void, ownerDocument?: Document, enabled?: boolean): {
|
|
9
9
|
onPointerDownCapture: () => void;
|
|
10
10
|
};
|
|
@@ -8,12 +8,15 @@ import { CUSTOM_EVENTS, dispatchCustomEvent, } from "./dispatchCustomEvent.js";
|
|
|
8
8
|
* Returns props to pass to the node we want to check for outside events.
|
|
9
9
|
* By checking `isPointerInsideReactTreeRef` we can determine if the event happened outside the subtree of the node, saving some element-comparisons.
|
|
10
10
|
*/
|
|
11
|
-
export function usePointerDownOutside(callback, ownerDocument = globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) {
|
|
11
|
+
export function usePointerDownOutside(callback, ownerDocument = globalThis === null || globalThis === void 0 ? void 0 : globalThis.document, enabled = true) {
|
|
12
12
|
const handlePointerDownOutside = useCallbackRef(callback);
|
|
13
13
|
const isPointerInsideReactTreeRef = useRef(false);
|
|
14
14
|
const handleClickRef = useRef(() => { });
|
|
15
15
|
const timeout = useTimeout();
|
|
16
16
|
useEffect(() => {
|
|
17
|
+
if (!enabled) {
|
|
18
|
+
return;
|
|
19
|
+
}
|
|
17
20
|
const handlePointerDown = (event) => {
|
|
18
21
|
/**
|
|
19
22
|
* The `DismisableLayer`-API is based on the ability to stop events from propagating and in the end calling `onDismiss`
|
|
@@ -72,7 +75,7 @@ export function usePointerDownOutside(callback, ownerDocument = globalThis === n
|
|
|
72
75
|
ownerDocument.removeEventListener("pointerdown", handlePointerDown);
|
|
73
76
|
ownerDocument.removeEventListener("click", handleClickRef.current);
|
|
74
77
|
};
|
|
75
|
-
}, [ownerDocument, handlePointerDownOutside, timeout]);
|
|
78
|
+
}, [ownerDocument, handlePointerDownOutside, timeout, enabled]);
|
|
76
79
|
return {
|
|
77
80
|
// ensures we check React component tree (not just DOM tree)
|
|
78
81
|
onPointerDownCapture: () => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"usePointerDownOutside.js","sourceRoot":"","sources":["../../../../src/overlays/dismissablelayer/util/usePointerDownOutside.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACrD,OAAO,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAC;AAC5D,OAAO,EACL,aAAa,EAEb,mBAAmB,GACpB,MAAM,uBAAuB,CAAC;AAE/B;;;;;GAKG;AACH,MAAM,UAAU,qBAAqB,CACnC,QAAkD,EAClD,gBAA0B,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,QAAQ;
|
|
1
|
+
{"version":3,"file":"usePointerDownOutside.js","sourceRoot":"","sources":["../../../../src/overlays/dismissablelayer/util/usePointerDownOutside.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACrD,OAAO,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAC;AAC5D,OAAO,EACL,aAAa,EAEb,mBAAmB,GACpB,MAAM,uBAAuB,CAAC;AAE/B;;;;;GAKG;AACH,MAAM,UAAU,qBAAqB,CACnC,QAAkD,EAClD,gBAA0B,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,QAAQ,EAC9C,UAAmB,IAAI;IAEvB,MAAM,wBAAwB,GAAG,cAAc,CAAC,QAAQ,CAAkB,CAAC;IAC3E,MAAM,2BAA2B,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAClD,MAAM,cAAc,GAAG,MAAM,CAAkC,GAAG,EAAE,GAAE,CAAC,CAAC,CAAC;IACzE,MAAM,OAAO,GAAG,UAAU,EAAE,CAAC;IAE7B,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,OAAO,EAAE,CAAC;YACb,OAAO;QACT,CAAC;QAED,MAAM,iBAAiB,GAAG,CAAC,KAAmB,EAAE,EAAE;YAChD;;;;;;;;;;eAUG;YACH,SAAS,oBAAoB;gBAC3B,mBAAmB,CACjB,aAAa,CAAC,oBAAoB,EAClC,wBAAwB,EACxB,EAAE,aAAa,EAAE,KAAK,EAAE,EACxB,EAAE,QAAQ,EAAE,IAAI,EAAE,CACnB,CAAC;YACJ,CAAC;YAED,IAAI,KAAK,CAAC,MAAM,IAAI,CAAC,2BAA2B,CAAC,OAAO,EAAE,CAAC;gBACzD;;;;mBAIG;gBACH,IAAI,KAAK,CAAC,WAAW,KAAK,OAAO,EAAE,CAAC;oBAClC,aAAa,CAAC,mBAAmB,CAAC,OAAO,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;oBACnE,cAAc,CAAC,OAAO,GAAG,oBAAoB,CAAC;oBAC9C,aAAa,CAAC,gBAAgB,CAAC,OAAO,EAAE,cAAc,CAAC,OAAO,EAAE;wBAC9D,IAAI,EAAE,IAAI;qBACX,CAAC,CAAC;gBACL,CAAC;qBAAM,CAAC;oBACN,oBAAoB,EAAE,CAAC;gBACzB,CAAC;YACH,CAAC;iBAAM,CAAC;gBACN,oFAAoF;gBACpF,aAAa,CAAC,mBAAmB,CAAC,OAAO,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;YACrE,CAAC;YACD,2BAA2B,CAAC,OAAO,GAAG,KAAK,CAAC;QAC9C,CAAC,CAAC;QAEF;;;;;;;;;;;;WAYG;QACH,OAAO,CAAC,KAAK,CAAC,CAAC,EAAE,GAAG,EAAE;YACpB,aAAa,CAAC,gBAAgB,CAAC,aAAa,EAAE,iBAAiB,CAAC,CAAC;QACnE,CAAC,CAAC,CAAC;QAEH,OAAO,GAAG,EAAE;YACV,aAAa,CAAC,mBAAmB,CAAC,aAAa,EAAE,iBAAiB,CAAC,CAAC;YACpE,aAAa,CAAC,mBAAmB,CAAC,OAAO,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;QACrE,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,aAAa,EAAE,wBAAwB,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC;IAEhE,OAAO;QACL,4DAA4D;QAC5D,oBAAoB,EAAE,GAAG,EAAE;YACzB,2BAA2B,CAAC,OAAO,GAAG,IAAI,CAAC;QAC7C,CAAC;KACF,CAAC;AACJ,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@navikt/ds-react",
|
|
3
|
-
"version": "7.33.
|
|
3
|
+
"version": "7.33.3",
|
|
4
4
|
"description": "React components from the Norwegian Labour and Welfare Administration.",
|
|
5
5
|
"author": "Aksel, a team part of the Norwegian Labour and Welfare Administration.",
|
|
6
6
|
"license": "MIT",
|
|
@@ -654,8 +654,8 @@
|
|
|
654
654
|
"dependencies": {
|
|
655
655
|
"@floating-ui/react": "0.27.8",
|
|
656
656
|
"@floating-ui/react-dom": "^2.1.6",
|
|
657
|
-
"@navikt/aksel-icons": "^7.33.
|
|
658
|
-
"@navikt/ds-tokens": "^7.33.
|
|
657
|
+
"@navikt/aksel-icons": "^7.33.3",
|
|
658
|
+
"@navikt/ds-tokens": "^7.33.3",
|
|
659
659
|
"clsx": "^2.1.0",
|
|
660
660
|
"date-fns": "^4.0.0",
|
|
661
661
|
"react-day-picker": "9.7.0"
|
|
@@ -667,11 +667,11 @@
|
|
|
667
667
|
"@testing-library/user-event": "^14.5.2",
|
|
668
668
|
"@types/jscodeshift": "^0.11.11",
|
|
669
669
|
"aksel": "workspace:^",
|
|
670
|
-
"concurrently": "9.
|
|
670
|
+
"concurrently": "9.2.1",
|
|
671
671
|
"copyfiles": "^2.4.1",
|
|
672
672
|
"fast-glob": "3.2.11",
|
|
673
673
|
"jscodeshift": "^0.15.1",
|
|
674
|
-
"jsdom": "27.0
|
|
674
|
+
"jsdom": "27.1.0",
|
|
675
675
|
"react-dom": "^18.0.0",
|
|
676
676
|
"react-router": "^7.6.2",
|
|
677
677
|
"rimraf": "6.0.1",
|
|
@@ -276,6 +276,26 @@ const ActionMenuRoot = ({
|
|
|
276
276
|
);
|
|
277
277
|
};
|
|
278
278
|
|
|
279
|
+
/**
|
|
280
|
+
* ActionMenu is a dropdown menu for actions and navigation.
|
|
281
|
+
*
|
|
282
|
+
* @example
|
|
283
|
+
* ```jsx
|
|
284
|
+
* <ActionMenu>
|
|
285
|
+
* <ActionMenu.Trigger>
|
|
286
|
+
* <button>Open Menu</button>
|
|
287
|
+
* </ActionMenu.Trigger>
|
|
288
|
+
* <ActionMenu.Content>
|
|
289
|
+
* <ActionMenu.Item onSelect={() => alert("Item 1 selected")}>
|
|
290
|
+
* Item 1
|
|
291
|
+
* </ActionMenu.Item>
|
|
292
|
+
* <ActionMenu.Item onSelect={() => alert("Item 2 selected")}>
|
|
293
|
+
* Item 2
|
|
294
|
+
* </ActionMenu.Item>
|
|
295
|
+
* </ActionMenu.Content>
|
|
296
|
+
* <ActionMenu>
|
|
297
|
+
* ```
|
|
298
|
+
*/
|
|
279
299
|
export const ActionMenu = ActionMenuRoot as ActionMenuComponent;
|
|
280
300
|
|
|
281
301
|
/* -------------------------------------------------------------------------- */
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import React, { forwardRef, useContext, useEffect, useState } from "react";
|
|
2
2
|
import { Slot } from "../../slot/Slot";
|
|
3
|
-
import { omit } from "../../util";
|
|
4
3
|
import { composeEventHandlers } from "../../util/composeEventHandlers";
|
|
5
4
|
import { useMergeRefs } from "../../util/hooks";
|
|
6
5
|
import { ownerDocument } from "../../util/owner";
|
|
@@ -63,34 +62,7 @@ interface DismissableLayerBaseProps
|
|
|
63
62
|
|
|
64
63
|
type DismissableLayerProps = DismissableLayerBaseProps & AsChild;
|
|
65
64
|
|
|
66
|
-
|
|
67
|
-
({ enabled = true, ...restProps }: DismissableLayerProps, forwardedRef) => {
|
|
68
|
-
if (!enabled) {
|
|
69
|
-
const Component = restProps.asChild ? Slot : "div";
|
|
70
|
-
return (
|
|
71
|
-
<Component
|
|
72
|
-
{...omit(restProps, [
|
|
73
|
-
"asChild",
|
|
74
|
-
"disableOutsidePointerEvents",
|
|
75
|
-
"onDismiss",
|
|
76
|
-
"onEscapeKeyDown",
|
|
77
|
-
"onFocusOutside",
|
|
78
|
-
"onInteractOutside",
|
|
79
|
-
"onPointerDownOutside",
|
|
80
|
-
"safeZone",
|
|
81
|
-
])}
|
|
82
|
-
ref={forwardedRef}
|
|
83
|
-
/>
|
|
84
|
-
);
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
return <DismissableLayerInternal {...restProps} ref={forwardedRef} />;
|
|
88
|
-
},
|
|
89
|
-
);
|
|
90
|
-
|
|
91
|
-
type DismissableLayerElement = React.ComponentRef<
|
|
92
|
-
typeof DismissableLayerInternal
|
|
93
|
-
>;
|
|
65
|
+
type DismissableLayerElement = React.ComponentRef<typeof DismissableLayer>;
|
|
94
66
|
|
|
95
67
|
const BranchedLayerContext =
|
|
96
68
|
React.createContext<DismissableLayerElement | null>(null);
|
|
@@ -108,10 +80,7 @@ const DismissableLayerContext = React.createContext({
|
|
|
108
80
|
layersWithOutsidePointerEventsDisabled: new Set<DismissableLayerElement>(),
|
|
109
81
|
});
|
|
110
82
|
|
|
111
|
-
const
|
|
112
|
-
HTMLDivElement,
|
|
113
|
-
DismissableLayerProps
|
|
114
|
-
>(
|
|
83
|
+
const DismissableLayer = forwardRef<HTMLDivElement, DismissableLayerProps>(
|
|
115
84
|
(
|
|
116
85
|
{
|
|
117
86
|
children,
|
|
@@ -123,6 +92,7 @@ const DismissableLayerInternal = forwardRef<
|
|
|
123
92
|
onPointerDownOutside,
|
|
124
93
|
safeZone,
|
|
125
94
|
asChild,
|
|
95
|
+
enabled = true,
|
|
126
96
|
...restProps
|
|
127
97
|
}: DismissableLayerProps,
|
|
128
98
|
forwardedRef,
|
|
@@ -194,73 +164,85 @@ const DismissableLayerInternal = forwardRef<
|
|
|
194
164
|
}
|
|
195
165
|
}
|
|
196
166
|
|
|
197
|
-
const pointerDownOutside = usePointerDownOutside(
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
/**
|
|
203
|
-
* We call these before letting `handleOutsideEvent` do its checks to give consumer a chance to preventDefault.
|
|
204
|
-
*/
|
|
205
|
-
onPointerDownOutside?.(event);
|
|
206
|
-
onInteractOutside?.(event);
|
|
207
|
-
|
|
208
|
-
/**
|
|
209
|
-
* Add safeZone to prevent closing when interacting with trigger/anchor or its children.
|
|
210
|
-
*/
|
|
211
|
-
safeZone && handleOutsideEvent(event);
|
|
167
|
+
const pointerDownOutside = usePointerDownOutside(
|
|
168
|
+
(event) => {
|
|
169
|
+
if (!shouldEnablePointerEvents) {
|
|
170
|
+
return;
|
|
171
|
+
}
|
|
212
172
|
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
173
|
+
/**
|
|
174
|
+
* We call these before letting `handleOutsideEvent` do its checks to give consumer a chance to preventDefault.
|
|
175
|
+
*/
|
|
176
|
+
onPointerDownOutside?.(event);
|
|
177
|
+
onInteractOutside?.(event);
|
|
217
178
|
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
onFocusOutside?.(event);
|
|
223
|
-
onInteractOutside?.(event);
|
|
179
|
+
/**
|
|
180
|
+
* Add safeZone to prevent closing when interacting with trigger/anchor or its children.
|
|
181
|
+
*/
|
|
182
|
+
safeZone && handleOutsideEvent(event);
|
|
224
183
|
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
184
|
+
if (!event.defaultPrevented && onDismiss) {
|
|
185
|
+
onDismiss();
|
|
186
|
+
}
|
|
187
|
+
},
|
|
188
|
+
ownerDoc,
|
|
189
|
+
enabled,
|
|
190
|
+
);
|
|
229
191
|
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
192
|
+
const focusOutside = useFocusOutside(
|
|
193
|
+
(event) => {
|
|
194
|
+
/**
|
|
195
|
+
* We call these before letting `handleOutsideEvent` do its checks to give consumer a chance to preventDefault.
|
|
196
|
+
*/
|
|
197
|
+
onFocusOutside?.(event);
|
|
198
|
+
onInteractOutside?.(event);
|
|
199
|
+
|
|
200
|
+
/**
|
|
201
|
+
* Add safeZone to prevent closing when interacting with trigger/anchor or its children.
|
|
202
|
+
*/
|
|
203
|
+
safeZone && handleOutsideEvent(event);
|
|
204
|
+
|
|
205
|
+
if (!event.defaultPrevented && onDismiss) {
|
|
206
|
+
onDismiss();
|
|
207
|
+
}
|
|
208
|
+
},
|
|
209
|
+
ownerDoc,
|
|
210
|
+
enabled,
|
|
211
|
+
);
|
|
234
212
|
|
|
235
|
-
useEscapeKeydown(
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
213
|
+
useEscapeKeydown(
|
|
214
|
+
(event) => {
|
|
215
|
+
/**
|
|
216
|
+
* The deepest nested element will always be last in the descendants list.
|
|
217
|
+
* This allows us to only close the highest layer when pressing escape.
|
|
218
|
+
*/
|
|
219
|
+
const isHighestLayer = index === context.layers.size - 1;
|
|
220
|
+
if (!isHighestLayer) {
|
|
221
|
+
return;
|
|
222
|
+
}
|
|
244
223
|
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
224
|
+
/**
|
|
225
|
+
* We call this before letting `handleOutsideEvent` do its checks to give consumer a chance to preventDefault based certain cases.
|
|
226
|
+
*/
|
|
227
|
+
onEscapeKeyDown?.(event);
|
|
228
|
+
/**
|
|
229
|
+
* `onEscapeKeyDown` is able to preventDefault the event, thus stopping call for `onDismiss`.
|
|
230
|
+
* We want to `preventDefault` the escape-event to avoid sideeffect from other elements on screen
|
|
231
|
+
*/
|
|
232
|
+
if (!event.defaultPrevented && onDismiss) {
|
|
233
|
+
event.preventDefault();
|
|
234
|
+
onDismiss();
|
|
235
|
+
}
|
|
236
|
+
},
|
|
237
|
+
ownerDoc,
|
|
238
|
+
enabled,
|
|
239
|
+
);
|
|
258
240
|
|
|
259
241
|
/**
|
|
260
242
|
* Handles registering `layers` and `layersWithOutsidePointerEventsDisabled`.
|
|
261
243
|
*/
|
|
262
244
|
useEffect(() => {
|
|
263
|
-
if (!node) {
|
|
245
|
+
if (!node || !enabled) {
|
|
264
246
|
return;
|
|
265
247
|
}
|
|
266
248
|
|
|
@@ -282,25 +264,32 @@ const DismissableLayerInternal = forwardRef<
|
|
|
282
264
|
ownerDoc.body.style.pointerEvents = originalBodyPointerEvents;
|
|
283
265
|
}
|
|
284
266
|
};
|
|
285
|
-
}, [node, disableOutsidePointerEvents, context, ownerDoc]);
|
|
267
|
+
}, [node, enabled, disableOutsidePointerEvents, context, ownerDoc]);
|
|
286
268
|
|
|
287
269
|
/**
|
|
288
270
|
* We purposefully prevent combining this effect with the `disableOutsidePointerEvents` effect
|
|
289
271
|
* because a change to `disableOutsidePointerEvents` would remove this layer from the stack
|
|
290
272
|
* and add it to the end again so the layering order wouldn't be creation order.
|
|
291
273
|
* We only want them to be removed from context stacks when unmounted.
|
|
274
|
+
*
|
|
275
|
+
* We depend on `enabled` to clean up when the layer is disabled.
|
|
292
276
|
*/
|
|
277
|
+
// biome-ignore lint/correctness/useExhaustiveDependencies: We need to clean up after enabled changes.
|
|
293
278
|
useEffect(() => {
|
|
294
279
|
return () => {
|
|
295
280
|
if (!node) {
|
|
296
281
|
return;
|
|
297
282
|
}
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
283
|
+
if (
|
|
284
|
+
context.layers.has(node) ||
|
|
285
|
+
context.layersWithOutsidePointerEventsDisabled.has(node)
|
|
286
|
+
) {
|
|
287
|
+
context.layers.delete(node);
|
|
288
|
+
context.layersWithOutsidePointerEventsDisabled.delete(node);
|
|
289
|
+
dispatchUpdate();
|
|
290
|
+
}
|
|
302
291
|
};
|
|
303
|
-
}, [node, context]);
|
|
292
|
+
}, [node, context, enabled]);
|
|
304
293
|
|
|
305
294
|
const parentBranchedLayer = useContext(BranchedLayerContext);
|
|
306
295
|
|
|
@@ -309,7 +298,12 @@ const DismissableLayerInternal = forwardRef<
|
|
|
309
298
|
* When this layer has a parent, we register it as a child of the parent.
|
|
310
299
|
*/
|
|
311
300
|
useEffect(() => {
|
|
312
|
-
if (
|
|
301
|
+
if (
|
|
302
|
+
!node ||
|
|
303
|
+
!enabled ||
|
|
304
|
+
!parentBranchedLayer ||
|
|
305
|
+
node === parentBranchedLayer
|
|
306
|
+
) {
|
|
313
307
|
return;
|
|
314
308
|
}
|
|
315
309
|
|
|
@@ -332,7 +326,7 @@ const DismissableLayerInternal = forwardRef<
|
|
|
332
326
|
|
|
333
327
|
dispatchUpdate();
|
|
334
328
|
};
|
|
335
|
-
}, [node, parentBranchedLayer, context]);
|
|
329
|
+
}, [node, enabled, parentBranchedLayer, context]);
|
|
336
330
|
|
|
337
331
|
/**
|
|
338
332
|
* Synchronizes layer state across all mounted `DismissableLayer` instances.
|