@primer/react 38.42.0-rc.68e6f6ecb → 38.42.0-rc.fcbfbaea1
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/CHANGELOG.md +0 -2
- package/dist/Overlay/Overlay.d.ts +0 -2
- package/dist/Overlay/Overlay.js +2 -4
- package/dist/hooks/useOpenAndCloseFocus.d.ts +1 -3
- package/dist/hooks/useOpenAndCloseFocus.js +16 -28
- package/dist/hooks/useOverlay.d.ts +1 -3
- package/dist/hooks/useOverlay.js +22 -24
- package/generated/components.json +0 -12
- package/generated/hooks.json +0 -12
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -4,8 +4,6 @@
|
|
|
4
4
|
|
|
5
5
|
### Minor Changes
|
|
6
6
|
|
|
7
|
-
- [#8513](https://github.com/primer/react/pull/8513) [`1bab81a`](https://github.com/primer/react/commit/1bab81a0eb3f613c8d6b4abd36bd92d0ac6cedc4) Thanks [@tay1orjones](https://github.com/tay1orjones)! - ActionMenu, Overlay: Add `preventFocusOnClose` to let consumers manage focus when an overlay closes.
|
|
8
|
-
|
|
9
7
|
- [#8415](https://github.com/primer/react/pull/8415) [`66a9f31`](https://github.com/primer/react/commit/66a9f31611c642209f66ed68b7d43712b09dbd88) Thanks [@rickyzhangca](https://github.com/rickyzhangca)! - DataTable: Add controlled and uncontrolled row selection.
|
|
10
8
|
|
|
11
9
|
## 38.41.0
|
|
@@ -54,7 +54,6 @@ type ContainerProps = {
|
|
|
54
54
|
portalContainerName?: string;
|
|
55
55
|
preventOverflow?: boolean;
|
|
56
56
|
preventFocusOnOpen?: boolean;
|
|
57
|
-
preventFocusOnClose?: boolean;
|
|
58
57
|
returnFocusRef: React.RefObject<HTMLElement | null>;
|
|
59
58
|
};
|
|
60
59
|
type internalOverlayProps = Merge<OwnOverlayProps, ContainerProps>;
|
|
@@ -69,7 +68,6 @@ type internalOverlayProps = Merge<OwnOverlayProps, ContainerProps>;
|
|
|
69
68
|
* @param portalContainerName Optional. The name of the portal container to render the Overlay into.
|
|
70
69
|
* @param preventOverflow Optional. The Overlay width will be adjusted responsively if there is not enough space to display the Overlay. If `preventOverflow` is `true`, the width of the `Overlay` will not be adjusted.
|
|
71
70
|
* @param preventFocusOnOpen Optional. If 'true', focus will not be applied when the component is first mounted, even if initialFocusRef prop is given.
|
|
72
|
-
* @param preventFocusOnClose Optional. If true, focus will not be returned when the component is unmounted. Consumers must manage focus themselves.
|
|
73
71
|
* @param returnFocusRef Required. Ref for the element to focus when the `Overlay` is closed.
|
|
74
72
|
* @param right Optional. Horizontal right position of the overlay, relative to its closest positioned ancestor (often its `Portal`).
|
|
75
73
|
* @param width Sets the width of the `Overlay`, pick from our set list of widths, or pass `auto` to automatically set the width based on the content of the `Overlay`. `small` corresponds to `256px`, `medium` corresponds to `320px`, `large` corresponds to `480px`, `xlarge` corresponds to `640px`, `xxlarge` corresponds to `960px`.
|
package/dist/Overlay/Overlay.js
CHANGED
|
@@ -76,13 +76,12 @@ const BaseOverlay = /*#__PURE__*/ React.forwardRef(({ visibility, height, width,
|
|
|
76
76
|
* @param portalContainerName Optional. The name of the portal container to render the Overlay into.
|
|
77
77
|
* @param preventOverflow Optional. The Overlay width will be adjusted responsively if there is not enough space to display the Overlay. If `preventOverflow` is `true`, the width of the `Overlay` will not be adjusted.
|
|
78
78
|
* @param preventFocusOnOpen Optional. If 'true', focus will not be applied when the component is first mounted, even if initialFocusRef prop is given.
|
|
79
|
-
* @param preventFocusOnClose Optional. If true, focus will not be returned when the component is unmounted. Consumers must manage focus themselves.
|
|
80
79
|
* @param returnFocusRef Required. Ref for the element to focus when the `Overlay` is closed.
|
|
81
80
|
* @param right Optional. Horizontal right position of the overlay, relative to its closest positioned ancestor (often its `Portal`).
|
|
82
81
|
* @param width Sets the width of the `Overlay`, pick from our set list of widths, or pass `auto` to automatically set the width based on the content of the `Overlay`. `small` corresponds to `256px`, `medium` corresponds to `320px`, `large` corresponds to `480px`, `xlarge` corresponds to `640px`, `xxlarge` corresponds to `960px`.
|
|
83
82
|
|
|
84
83
|
*/
|
|
85
|
-
const Overlay = /*#__PURE__*/ React.forwardRef(({ anchorSide, _PrivateDisablePortal, height = "auto", ignoreClickRefs, initialFocusRef, left, onClickOutside, onEscape, portalContainerName, preventOverflow = true, preventFocusOnOpen,
|
|
84
|
+
const Overlay = /*#__PURE__*/ React.forwardRef(({ anchorSide, _PrivateDisablePortal, height = "auto", ignoreClickRefs, initialFocusRef, left, onClickOutside, onEscape, portalContainerName, preventOverflow = true, preventFocusOnOpen, returnFocusRef, right, role = "none", visibility = "visible", width = "auto", responsiveVariant, ...props }, forwardedRef) => {
|
|
86
85
|
const overlayRef = useRef(null);
|
|
87
86
|
const mergedOverlayRef = useMergedRefs(forwardedRef, overlayRef);
|
|
88
87
|
const slideAnimationDistance = 8;
|
|
@@ -95,8 +94,7 @@ const Overlay = /*#__PURE__*/ React.forwardRef(({ anchorSide, _PrivateDisablePor
|
|
|
95
94
|
ignoreClickRefs,
|
|
96
95
|
onClickOutside,
|
|
97
96
|
initialFocusRef,
|
|
98
|
-
preventFocusOnOpen
|
|
99
|
-
preventFocusOnClose
|
|
97
|
+
preventFocusOnOpen
|
|
100
98
|
});
|
|
101
99
|
useEffect(() => {
|
|
102
100
|
var _overlayRef$current;
|
|
@@ -6,14 +6,12 @@ type UseOpenAndCloseFocusSettings = {
|
|
|
6
6
|
containerRef: React.RefObject<HTMLElement | null>;
|
|
7
7
|
returnFocusRef: React.RefObject<HTMLElement | null>;
|
|
8
8
|
preventFocusOnOpen?: boolean;
|
|
9
|
-
preventFocusOnClose?: boolean;
|
|
10
9
|
};
|
|
11
10
|
declare function useOpenAndCloseFocus({
|
|
12
11
|
initialFocusRef,
|
|
13
12
|
returnFocusRef,
|
|
14
13
|
containerRef,
|
|
15
|
-
preventFocusOnOpen
|
|
16
|
-
preventFocusOnClose
|
|
14
|
+
preventFocusOnOpen
|
|
17
15
|
}: UseOpenAndCloseFocusSettings): void;
|
|
18
16
|
//#endregion
|
|
19
17
|
export { UseOpenAndCloseFocusSettings, useOpenAndCloseFocus };
|
|
@@ -1,24 +1,14 @@
|
|
|
1
1
|
import { c } from "../utils/react-compiler-runtime.js";
|
|
2
|
-
import { useEffectCallback } from "../internal/hooks/useEffectCallback.js";
|
|
3
2
|
import { useEffect } from "react";
|
|
4
3
|
import { iterateFocusableElements } from "@primer/behaviors/utils";
|
|
5
4
|
//#region src/hooks/useOpenAndCloseFocus.ts
|
|
6
5
|
function useOpenAndCloseFocus(t0) {
|
|
7
|
-
const $ = c(
|
|
8
|
-
const { initialFocusRef, returnFocusRef, containerRef, preventFocusOnOpen
|
|
6
|
+
const $ = c(6);
|
|
7
|
+
const { initialFocusRef, returnFocusRef, containerRef, preventFocusOnOpen } = t0;
|
|
9
8
|
let t1;
|
|
10
|
-
if ($[0] !== preventFocusOnClose) {
|
|
11
|
-
t1 = (element) => {
|
|
12
|
-
if (!preventFocusOnClose) element === null || element === void 0 || element.focus();
|
|
13
|
-
};
|
|
14
|
-
$[0] = preventFocusOnClose;
|
|
15
|
-
$[1] = t1;
|
|
16
|
-
} else t1 = $[1];
|
|
17
|
-
const restoreFocus = useEffectCallback(t1);
|
|
18
9
|
let t2;
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
t2 = () => {
|
|
10
|
+
if ($[0] !== containerRef || $[1] !== initialFocusRef || $[2] !== preventFocusOnOpen || $[3] !== returnFocusRef) {
|
|
11
|
+
t1 = () => {
|
|
22
12
|
if (!preventFocusOnOpen) {
|
|
23
13
|
if (initialFocusRef && initialFocusRef.current) initialFocusRef.current.focus();
|
|
24
14
|
else if (containerRef.current) {
|
|
@@ -28,28 +18,26 @@ function useOpenAndCloseFocus(t0) {
|
|
|
28
18
|
}
|
|
29
19
|
const returnFocusRefCurrent = returnFocusRef.current;
|
|
30
20
|
return function() {
|
|
31
|
-
|
|
21
|
+
returnFocusRefCurrent === null || returnFocusRefCurrent === void 0 || returnFocusRefCurrent.focus();
|
|
32
22
|
};
|
|
33
23
|
};
|
|
34
|
-
|
|
24
|
+
t2 = [
|
|
35
25
|
initialFocusRef,
|
|
36
26
|
returnFocusRef,
|
|
37
27
|
containerRef,
|
|
38
|
-
preventFocusOnOpen
|
|
39
|
-
restoreFocus
|
|
28
|
+
preventFocusOnOpen
|
|
40
29
|
];
|
|
41
|
-
$[
|
|
42
|
-
$[
|
|
43
|
-
$[
|
|
44
|
-
$[
|
|
45
|
-
$[
|
|
46
|
-
$[
|
|
47
|
-
$[8] = t3;
|
|
30
|
+
$[0] = containerRef;
|
|
31
|
+
$[1] = initialFocusRef;
|
|
32
|
+
$[2] = preventFocusOnOpen;
|
|
33
|
+
$[3] = returnFocusRef;
|
|
34
|
+
$[4] = t1;
|
|
35
|
+
$[5] = t2;
|
|
48
36
|
} else {
|
|
49
|
-
|
|
50
|
-
|
|
37
|
+
t1 = $[4];
|
|
38
|
+
t2 = $[5];
|
|
51
39
|
}
|
|
52
|
-
useEffect(
|
|
40
|
+
useEffect(t1, t2);
|
|
53
41
|
}
|
|
54
42
|
//#endregion
|
|
55
43
|
export { useOpenAndCloseFocus };
|
|
@@ -9,7 +9,6 @@ type UseOverlaySettings = {
|
|
|
9
9
|
onClickOutside: (e: TouchOrMouseEvent) => void;
|
|
10
10
|
overlayRef?: React.RefObject<HTMLDivElement | null>;
|
|
11
11
|
preventFocusOnOpen?: boolean;
|
|
12
|
-
preventFocusOnClose?: boolean;
|
|
13
12
|
};
|
|
14
13
|
type OverlayReturnProps = {
|
|
15
14
|
ref: React.RefObject<HTMLDivElement | null>;
|
|
@@ -21,8 +20,7 @@ declare const useOverlay: ({
|
|
|
21
20
|
onEscape,
|
|
22
21
|
ignoreClickRefs,
|
|
23
22
|
onClickOutside,
|
|
24
|
-
preventFocusOnOpen
|
|
25
|
-
preventFocusOnClose
|
|
23
|
+
preventFocusOnOpen
|
|
26
24
|
}: UseOverlaySettings) => OverlayReturnProps;
|
|
27
25
|
//#endregion
|
|
28
26
|
export { OverlayReturnProps, UseOverlaySettings, useOverlay };
|
package/dist/hooks/useOverlay.js
CHANGED
|
@@ -5,55 +5,53 @@ import { useOnEscapePress } from "./useOnEscapePress.js";
|
|
|
5
5
|
import { useOpenAndCloseFocus } from "./useOpenAndCloseFocus.js";
|
|
6
6
|
//#region src/hooks/useOverlay.tsx
|
|
7
7
|
const useOverlay = (t0) => {
|
|
8
|
-
const $ = c(
|
|
9
|
-
const { overlayRef: _overlayRef, returnFocusRef, initialFocusRef, onEscape, ignoreClickRefs, onClickOutside, preventFocusOnOpen
|
|
8
|
+
const $ = c(13);
|
|
9
|
+
const { overlayRef: _overlayRef, returnFocusRef, initialFocusRef, onEscape, ignoreClickRefs, onClickOutside, preventFocusOnOpen } = t0;
|
|
10
10
|
const overlayRef = useProvidedRefOrCreate(_overlayRef);
|
|
11
11
|
let t1;
|
|
12
|
-
if ($[0] !== initialFocusRef || $[1] !== overlayRef || $[2] !==
|
|
12
|
+
if ($[0] !== initialFocusRef || $[1] !== overlayRef || $[2] !== preventFocusOnOpen || $[3] !== returnFocusRef) {
|
|
13
13
|
t1 = {
|
|
14
14
|
containerRef: overlayRef,
|
|
15
15
|
returnFocusRef,
|
|
16
16
|
initialFocusRef,
|
|
17
|
-
preventFocusOnOpen
|
|
18
|
-
preventFocusOnClose
|
|
17
|
+
preventFocusOnOpen
|
|
19
18
|
};
|
|
20
19
|
$[0] = initialFocusRef;
|
|
21
20
|
$[1] = overlayRef;
|
|
22
|
-
$[2] =
|
|
23
|
-
$[3] =
|
|
24
|
-
$[4] =
|
|
25
|
-
|
|
26
|
-
} else t1 = $[5];
|
|
21
|
+
$[2] = preventFocusOnOpen;
|
|
22
|
+
$[3] = returnFocusRef;
|
|
23
|
+
$[4] = t1;
|
|
24
|
+
} else t1 = $[4];
|
|
27
25
|
useOpenAndCloseFocus(t1);
|
|
28
26
|
let t2;
|
|
29
|
-
if ($[
|
|
27
|
+
if ($[5] !== ignoreClickRefs || $[6] !== onClickOutside || $[7] !== overlayRef) {
|
|
30
28
|
t2 = {
|
|
31
29
|
containerRef: overlayRef,
|
|
32
30
|
ignoreClickRefs,
|
|
33
31
|
onClickOutside
|
|
34
32
|
};
|
|
35
|
-
$[
|
|
36
|
-
$[
|
|
37
|
-
$[
|
|
38
|
-
$[
|
|
39
|
-
} else t2 = $[
|
|
33
|
+
$[5] = ignoreClickRefs;
|
|
34
|
+
$[6] = onClickOutside;
|
|
35
|
+
$[7] = overlayRef;
|
|
36
|
+
$[8] = t2;
|
|
37
|
+
} else t2 = $[8];
|
|
40
38
|
useOnOutsideClick(t2);
|
|
41
39
|
let t3;
|
|
42
|
-
if ($[
|
|
40
|
+
if ($[9] !== onEscape) {
|
|
43
41
|
t3 = (event) => {
|
|
44
42
|
onEscape(event);
|
|
45
43
|
event.preventDefault();
|
|
46
44
|
};
|
|
47
|
-
$[
|
|
48
|
-
$[
|
|
49
|
-
} else t3 = $[
|
|
45
|
+
$[9] = onEscape;
|
|
46
|
+
$[10] = t3;
|
|
47
|
+
} else t3 = $[10];
|
|
50
48
|
useOnEscapePress(t3);
|
|
51
49
|
let t4;
|
|
52
|
-
if ($[
|
|
50
|
+
if ($[11] !== overlayRef) {
|
|
53
51
|
t4 = { ref: overlayRef };
|
|
54
|
-
$[
|
|
55
|
-
$[
|
|
56
|
-
} else t4 = $[
|
|
52
|
+
$[11] = overlayRef;
|
|
53
|
+
$[12] = t4;
|
|
54
|
+
} else t4 = $[12];
|
|
57
55
|
return t4;
|
|
58
56
|
};
|
|
59
57
|
//#endregion
|
|
@@ -832,12 +832,6 @@
|
|
|
832
832
|
"defaultValue": "",
|
|
833
833
|
"description": "Callback that is called when the position of the overlay changes"
|
|
834
834
|
},
|
|
835
|
-
{
|
|
836
|
-
"name": "preventFocusOnClose",
|
|
837
|
-
"type": "boolean",
|
|
838
|
-
"defaultValue": "false",
|
|
839
|
-
"description": "If true, focus will not be returned to the anchor or returnFocusRef when the menu closes. Consumers must manage focus themselves."
|
|
840
|
-
},
|
|
841
835
|
{
|
|
842
836
|
"name": "data-test-id",
|
|
843
837
|
"type": "unknown",
|
|
@@ -4745,12 +4739,6 @@
|
|
|
4745
4739
|
],
|
|
4746
4740
|
"importPath": "@primer/react",
|
|
4747
4741
|
"props": [
|
|
4748
|
-
{
|
|
4749
|
-
"name": "preventFocusOnClose",
|
|
4750
|
-
"type": "boolean",
|
|
4751
|
-
"defaultValue": "false",
|
|
4752
|
-
"description": "If true, focus will not be returned to returnFocusRef when the Overlay is unmounted. Consumers must manage focus themselves."
|
|
4753
|
-
},
|
|
4754
4742
|
{
|
|
4755
4743
|
"name": "returnFocusRef",
|
|
4756
4744
|
"type": "React.RefObject<HTMLElement>",
|
package/generated/hooks.json
CHANGED
|
@@ -696,12 +696,6 @@
|
|
|
696
696
|
"type": "boolean",
|
|
697
697
|
"defaultValue": "false",
|
|
698
698
|
"description": "If true, focus will not be set when the container is opened."
|
|
699
|
-
},
|
|
700
|
-
{
|
|
701
|
-
"name": "preventFocusOnClose",
|
|
702
|
-
"type": "boolean",
|
|
703
|
-
"defaultValue": "false",
|
|
704
|
-
"description": "If true, focus will not be returned to returnFocusRef when the hook is cleaned up. Consumers must manage focus themselves."
|
|
705
699
|
}
|
|
706
700
|
]
|
|
707
701
|
}
|
|
@@ -775,12 +769,6 @@
|
|
|
775
769
|
"name": "preventFocusOnOpen",
|
|
776
770
|
"type": "boolean",
|
|
777
771
|
"description": "Flag to prevent focus on the overlay when it is opened."
|
|
778
|
-
},
|
|
779
|
-
{
|
|
780
|
-
"name": "preventFocusOnClose",
|
|
781
|
-
"type": "boolean",
|
|
782
|
-
"defaultValue": "false",
|
|
783
|
-
"description": "If true, focus will not be returned to returnFocusRef when the overlay is unmounted. Consumers must manage focus themselves."
|
|
784
772
|
}
|
|
785
773
|
]
|
|
786
774
|
}
|
package/package.json
CHANGED