@astryxdesign/core 0.4.1 → 0.4.2-canary.356d2f9
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 +55 -0
- package/dist/Avatar/Avatar.d.ts +4 -1
- package/dist/Avatar/Avatar.d.ts.map +1 -1
- package/dist/Avatar/Avatar.js +19 -23
- package/dist/AvatarGroup/AvatarGroupOverflow.d.ts.map +1 -1
- package/dist/AvatarGroup/AvatarGroupOverflow.js +7 -2
- package/dist/Button/Button.d.ts.map +1 -1
- package/dist/Button/Button.js +9 -7
- package/dist/Chat/ChatMessage.d.ts +7 -0
- package/dist/Chat/ChatMessage.d.ts.map +1 -1
- package/dist/Chat/ChatMessageBubble.d.ts +13 -1
- package/dist/Chat/ChatMessageBubble.d.ts.map +1 -1
- package/dist/Chat/ChatMessageBubble.js +19 -1
- package/dist/CheckboxInput/CheckboxInput.d.ts.map +1 -1
- package/dist/CheckboxInput/CheckboxInput.js +5 -0
- package/dist/CommandPalette/CommandPaletteFooter.d.ts.map +1 -1
- package/dist/CommandPalette/CommandPaletteFooter.js +5 -3
- package/dist/DateTimeInput/DateTimeInput.d.ts.map +1 -1
- package/dist/DateTimeInput/DateTimeInput.js +2 -2
- package/dist/DropdownMenu/DropdownMenuSubMenu.d.ts.map +1 -1
- package/dist/DropdownMenu/DropdownMenuSubMenu.js +19 -15
- package/dist/HoverCard/HoverCard.d.ts +1 -1
- package/dist/HoverCard/HoverCard.d.ts.map +1 -1
- package/dist/HoverCard/HoverCard.js +5 -13
- package/dist/HoverCard/useHoverCard.d.ts.map +1 -1
- package/dist/HoverCard/useHoverCard.js +6 -5
- package/dist/InputGroup/groupStyles.d.ts.map +1 -1
- package/dist/InputGroup/groupStyles.js +7 -2
- package/dist/Layer/layerHost.d.ts +24 -0
- package/dist/Layer/layerHost.d.ts.map +1 -0
- package/dist/Layer/layerHost.js +79 -0
- package/dist/Layer/useLayer.d.ts +14 -6
- package/dist/Layer/useLayer.d.ts.map +1 -1
- package/dist/Layer/useLayer.js +158 -30
- package/dist/NavItem/navItemStyles.stylex.d.ts +17 -5
- package/dist/NavItem/navItemStyles.stylex.d.ts.map +1 -1
- package/dist/NavItem/navItemStyles.stylex.js +11 -5
- package/dist/RadioList/RadioListItem.d.ts.map +1 -1
- package/dist/RadioList/RadioListItem.js +5 -0
- package/dist/SideNav/SideNav.d.ts +7 -9
- package/dist/SideNav/SideNav.d.ts.map +1 -1
- package/dist/SideNav/SideNav.js +32 -5
- package/dist/SideNav/SideNavCollapseButton.d.ts +25 -9
- package/dist/SideNav/SideNavCollapseButton.d.ts.map +1 -1
- package/dist/SideNav/SideNavCollapseButton.js +39 -15
- package/dist/SideNav/SideNavCollapseContext.d.ts +21 -0
- package/dist/SideNav/SideNavCollapseContext.d.ts.map +1 -1
- package/dist/SideNav/SideNavCollapseContext.js +16 -2
- package/dist/SideNav/SideNavHeading.d.ts.map +1 -1
- package/dist/SideNav/SideNavHeading.js +89 -32
- package/dist/SideNav/SideNavItem.d.ts +7 -2
- package/dist/SideNav/SideNavItem.d.ts.map +1 -1
- package/dist/SideNav/SideNavItem.js +119 -75
- package/dist/SideNav/SideNavSection.d.ts.map +1 -1
- package/dist/SideNav/SideNavSection.js +7 -16
- package/dist/SideNav/index.d.ts +1 -1
- package/dist/SideNav/index.d.ts.map +1 -1
- package/dist/Slider/Slider.d.ts.map +1 -1
- package/dist/Slider/Slider.js +56 -15
- package/dist/Switch/Switch.d.ts.map +1 -1
- package/dist/Switch/Switch.js +5 -0
- package/dist/Thumbnail/Thumbnail.d.ts.map +1 -1
- package/dist/Thumbnail/Thumbnail.js +5 -0
- package/dist/TopNav/TopNavHeading.d.ts.map +1 -1
- package/dist/TopNav/TopNavHeading.js +14 -6
- package/dist/TopNav/TopNavMegaMenu.d.ts.map +1 -1
- package/dist/TopNav/TopNavMegaMenu.js +25 -93
- package/dist/TopNav/TopNavMegaMenuItem.js +1 -1
- package/dist/TopNav/TopNavMenu.d.ts.map +1 -1
- package/dist/TopNav/TopNavMenu.js +10 -5
- package/dist/astryx.css +40 -8
- package/dist/astryx.umd.js +50 -50
- package/dist/astryx.umd.js.map +4 -4
- package/dist/hooks/containerReveal.stylex.d.ts +71 -4
- package/dist/hooks/containerReveal.stylex.d.ts.map +1 -1
- package/dist/hooks/containerReveal.stylex.js +57 -5
- package/dist/hooks/index.d.ts +2 -2
- package/dist/hooks/index.d.ts.map +1 -1
- package/dist/hooks/index.js +1 -1
- package/dist/hooks/useContainerReveal.d.ts +60 -3
- package/dist/hooks/useContainerReveal.d.ts.map +1 -1
- package/dist/hooks/useContainerReveal.js +27 -5
- package/dist/hooks/useFocusTrap.d.ts.map +1 -1
- package/dist/hooks/useFocusTrap.js +16 -2
- package/dist/hooks/useMenuHover.d.ts +50 -5
- package/dist/hooks/useMenuHover.d.ts.map +1 -1
- package/dist/hooks/useMenuHover.js +171 -51
- package/dist/theme/defineTheme.d.ts +16 -5
- package/dist/theme/defineTheme.d.ts.map +1 -1
- package/dist/theme/defineTheme.js +44 -48
- package/dist/theme/derivedVarRegistry.d.ts.map +1 -1
- package/dist/theme/derivedVarRegistry.js +7 -0
- package/dist/theme/expandColorScale.d.ts.map +1 -1
- package/dist/theme/expandColorScale.js +1 -0
- package/dist/theme/expandMotionScale.d.ts +1 -0
- package/dist/theme/expandMotionScale.d.ts.map +1 -1
- package/dist/theme/expandMotionScale.js +1 -0
- package/dist/theme/expandRadiusScale.d.ts +1 -0
- package/dist/theme/expandRadiusScale.d.ts.map +1 -1
- package/dist/theme/expandRadiusScale.js +1 -0
- package/dist/theme/expandTypeScale.d.ts +1 -0
- package/dist/theme/expandTypeScale.d.ts.map +1 -1
- package/dist/theme/expandTypeScale.js +1 -0
- package/dist/theme/mergeComponents.d.ts +20 -0
- package/dist/theme/mergeComponents.d.ts.map +1 -0
- package/dist/theme/mergeComponents.js +56 -0
- package/dist/theme/onMediaTokens.d.ts +6 -1
- package/dist/theme/onMediaTokens.d.ts.map +1 -1
- package/dist/theme/onMediaTokens.js +11 -3
- package/dist/theme/tokens.stylex.d.ts +3 -1
- package/dist/theme/tokens.stylex.d.ts.map +1 -1
- package/dist/theme/tokens.stylex.js +3 -1
- package/locales/en.json +84 -0
- package/locales/pseudo.json +63 -0
- package/package.json +3 -3
- package/src/Avatar/Avatar.doc.mjs +5 -2
- package/src/Avatar/Avatar.test.tsx +51 -0
- package/src/Avatar/Avatar.tsx +30 -20
- package/src/AvatarGroup/AvatarGroup.doc.mjs +1 -1
- package/src/AvatarGroup/AvatarGroup.test.tsx +14 -0
- package/src/AvatarGroup/AvatarGroupOverflow.tsx +3 -2
- package/src/Button/Button.tsx +5 -3
- package/src/ButtonGroup/ButtonGroup.test.tsx +7 -4
- package/src/Card/Card.doc.mjs +2 -0
- package/src/Chat/Chat.doc.mjs +4 -1
- package/src/Chat/ChatMessage.doc.mjs +3 -3
- package/src/Chat/ChatMessage.tsx +7 -0
- package/src/Chat/ChatMessageBubble.doc.mjs +7 -0
- package/src/Chat/ChatMessageBubble.test.tsx +95 -6
- package/src/Chat/ChatMessageBubble.tsx +25 -0
- package/src/CheckboxInput/CheckboxInput.tsx +20 -0
- package/src/CodeBlock/CodeBlock.doc.mjs +3 -0
- package/src/CommandPalette/CommandPaletteFooter.tsx +6 -3
- package/src/DateTimeInput/DateTimeInput.tsx +4 -2
- package/src/DropdownMenu/DropdownMenuSubMenu.test.tsx +72 -1
- package/src/DropdownMenu/DropdownMenuSubMenu.tsx +24 -20
- package/src/HoverCard/HoverCard.doc.mjs +3 -3
- package/src/HoverCard/HoverCard.test.tsx +283 -55
- package/src/HoverCard/HoverCard.tsx +5 -13
- package/src/HoverCard/useHoverCard.tsx +8 -11
- package/src/InputGroup/groupStyles.ts +7 -8
- package/src/Item/Item.doc.mjs +4 -0
- package/src/Layer/layerHost.test.ts +99 -0
- package/src/Layer/layerHost.ts +141 -0
- package/src/Layer/useLayer.doc.mjs +14 -4
- package/src/Layer/useLayer.test.tsx +332 -7
- package/src/Layer/useLayer.tsx +235 -36
- package/src/MobileNav/MobileNav.doc.mjs +7 -0
- package/src/NavItem/navItemStyles.stylex.ts +31 -5
- package/src/RadioList/RadioListItem.tsx +20 -0
- package/src/SideNav/SideNav.doc.mjs +13 -4
- package/src/SideNav/SideNav.test.tsx +858 -2
- package/src/SideNav/SideNav.tsx +37 -16
- package/src/SideNav/SideNavCollapseButton.doc.mjs +28 -6
- package/src/SideNav/SideNavCollapseButton.tsx +67 -15
- package/src/SideNav/SideNavCollapseContext.ts +29 -9
- package/src/SideNav/SideNavHeading.tsx +53 -25
- package/src/SideNav/SideNavItem.doc.mjs +13 -0
- package/src/SideNav/SideNavItem.tsx +97 -84
- package/src/SideNav/SideNavSection.tsx +6 -20
- package/src/SideNav/index.ts +2 -0
- package/src/Slider/Slider.test.tsx +69 -33
- package/src/Slider/Slider.tsx +65 -13
- package/src/Switch/Switch.tsx +20 -0
- package/src/TabList/TabList.doc.mjs +3 -0
- package/src/Text/Text.doc.mjs +1 -1
- package/src/Thumbnail/Thumbnail.doc.mjs +3 -0
- package/src/Thumbnail/Thumbnail.tsx +10 -0
- package/src/Timestamp/Timestamp.test.tsx +40 -22
- package/src/Toolbar/Toolbar.test.tsx +14 -14
- package/src/TopNav/TopNav.test.tsx +86 -1
- package/src/TopNav/TopNavHeading.tsx +21 -14
- package/src/TopNav/TopNavMegaMenu.test.tsx +43 -0
- package/src/TopNav/TopNavMegaMenu.tsx +29 -105
- package/src/TopNav/TopNavMegaMenuItem.tsx +1 -1
- package/src/TopNav/TopNavMenu.test.tsx +41 -0
- package/src/TopNav/TopNavMenu.tsx +14 -4
- package/src/TreeList/TreeList.doc.mjs +1 -0
- package/src/hooks/containerReveal.stylex.ts +140 -9
- package/src/hooks/index.ts +6 -1
- package/src/hooks/useContainerReveal.doc.mjs +11 -5
- package/src/hooks/useContainerReveal.test.tsx +70 -3
- package/src/hooks/useContainerReveal.ts +86 -7
- package/src/hooks/useFocusTrap.test.tsx +16 -0
- package/src/hooks/useFocusTrap.ts +20 -2
- package/src/hooks/useMenuHover.test.tsx +364 -0
- package/src/hooks/useMenuHover.ts +243 -47
- package/src/theme/defineTheme.test.ts +127 -0
- package/src/theme/defineTheme.ts +57 -51
- package/src/theme/derivedVarRegistry.test.ts +78 -12
- package/src/theme/derivedVarRegistry.ts +4 -0
- package/src/theme/expandColorScale.ts +1 -0
- package/src/theme/expandMotionScale.ts +1 -0
- package/src/theme/expandRadiusScale.ts +1 -0
- package/src/theme/expandTypeScale.ts +1 -0
- package/src/theme/mergeComponents.ts +59 -0
- package/src/theme/onMediaTokens.ts +9 -2
- package/src/theme/themingTargets.test.ts +152 -26
- package/src/theme/tokens.stylex.ts +3 -1
- package/src/theme/tokens.test.ts +12 -0
- package/src/theme/useTheme.test.tsx +18 -0
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @file containerReveal.stylex.ts
|
|
3
3
|
* @input Uses StyleX, theme tokens
|
|
4
|
-
* @output The container style that publishes the reveal state,
|
|
5
|
-
*
|
|
6
|
-
* variant) that read it.
|
|
4
|
+
* @output The container style that publishes the reveal state, the suspended
|
|
5
|
+
* and hover-delay container variants, and the four content style blocks
|
|
6
|
+
* (reveal / conceal, each with a layout-preserved variant) that read it.
|
|
7
7
|
* @position Internal to useContainerReveal.
|
|
8
8
|
*
|
|
9
9
|
* HOW THE SCOPING WORKS: the container declares its own reveal state as
|
|
@@ -17,6 +17,7 @@
|
|
|
17
17
|
import * as stylex from '@stylexjs/stylex';
|
|
18
18
|
export declare const styles: Readonly<{
|
|
19
19
|
readonly container: Readonly<{
|
|
20
|
+
readonly '--_hover-delay': stylex.StyleXClassNameFor<"--_hover-delay", "0s">;
|
|
20
21
|
readonly '--_reveal-opacity': stylex.StyleXClassNameFor<"--_reveal-opacity", 0 | 1 | {
|
|
21
22
|
readonly '@media (hover: hover)': 1;
|
|
22
23
|
}>;
|
|
@@ -24,18 +25,67 @@ export declare const styles: Readonly<{
|
|
|
24
25
|
readonly '@media (hover: hover)': "static";
|
|
25
26
|
}>;
|
|
26
27
|
readonly '--_reveal-delay': stylex.StyleXClassNameFor<"--_reveal-delay", string | {
|
|
28
|
+
readonly '@media (hover: hover)': string;
|
|
29
|
+
}>;
|
|
30
|
+
readonly '--_reveal-delay-reduced': stylex.StyleXClassNameFor<"--_reveal-delay-reduced", "0s, 0s" | {
|
|
31
|
+
readonly '@media (hover: hover)': string;
|
|
32
|
+
}>;
|
|
33
|
+
readonly '--_conceal-opacity': stylex.StyleXClassNameFor<"--_conceal-opacity", 1 | {
|
|
34
|
+
readonly '@media (hover: hover)': 0;
|
|
35
|
+
}>;
|
|
36
|
+
readonly '--_fade-delay': stylex.StyleXClassNameFor<"--_fade-delay", "0s" | {
|
|
37
|
+
readonly '@media (hover: hover)': "var(--_hover-delay, 0s)";
|
|
38
|
+
}>;
|
|
39
|
+
}>;
|
|
40
|
+
readonly stateInactive: Readonly<{
|
|
41
|
+
readonly '--_reveal-opacity': stylex.StyleXClassNameFor<"--_reveal-opacity", 0 | 1 | {
|
|
42
|
+
readonly '@media (hover: hover)': 0;
|
|
43
|
+
}>;
|
|
44
|
+
readonly '--_reveal-position': stylex.StyleXClassNameFor<"--_reveal-position", "static" | "absolute" | {
|
|
45
|
+
readonly '@media (hover: hover)': "absolute";
|
|
46
|
+
}>;
|
|
47
|
+
readonly '--_reveal-delay': stylex.StyleXClassNameFor<"--_reveal-delay", string | {
|
|
48
|
+
readonly '@media (hover: hover)': string;
|
|
49
|
+
}>;
|
|
50
|
+
readonly '--_reveal-delay-reduced': stylex.StyleXClassNameFor<"--_reveal-delay-reduced", "0s, 0s" | {
|
|
27
51
|
readonly '@media (hover: hover)': "0s, 0s";
|
|
28
52
|
}>;
|
|
29
53
|
readonly '--_conceal-opacity': stylex.StyleXClassNameFor<"--_conceal-opacity", 1 | {
|
|
54
|
+
readonly '@media (hover: hover)': 1;
|
|
55
|
+
}>;
|
|
56
|
+
readonly '--_fade-delay': stylex.StyleXClassNameFor<"--_fade-delay", "0s" | {
|
|
57
|
+
readonly '@media (hover: hover)': "0s";
|
|
58
|
+
}>;
|
|
59
|
+
}>;
|
|
60
|
+
readonly stateActive: Readonly<{
|
|
61
|
+
readonly '--_reveal-opacity': stylex.StyleXClassNameFor<"--_reveal-opacity", 1 | {
|
|
62
|
+
readonly '@media (hover: hover)': 1;
|
|
63
|
+
}>;
|
|
64
|
+
readonly '--_reveal-position': stylex.StyleXClassNameFor<"--_reveal-position", "static" | {
|
|
65
|
+
readonly '@media (hover: hover)': "static";
|
|
66
|
+
}>;
|
|
67
|
+
readonly '--_reveal-delay': stylex.StyleXClassNameFor<"--_reveal-delay", "0s, 0s" | {
|
|
68
|
+
readonly '@media (hover: hover)': "0s, 0s";
|
|
69
|
+
}>;
|
|
70
|
+
readonly '--_reveal-delay-reduced': stylex.StyleXClassNameFor<"--_reveal-delay-reduced", "0s, 0s" | {
|
|
71
|
+
readonly '@media (hover: hover)': "0s, 0s";
|
|
72
|
+
}>;
|
|
73
|
+
readonly '--_conceal-opacity': stylex.StyleXClassNameFor<"--_conceal-opacity", 0 | {
|
|
30
74
|
readonly '@media (hover: hover)': 0;
|
|
31
75
|
}>;
|
|
76
|
+
readonly '--_fade-delay': stylex.StyleXClassNameFor<"--_fade-delay", "0s" | {
|
|
77
|
+
readonly '@media (hover: hover)': "0s";
|
|
78
|
+
}>;
|
|
32
79
|
}>;
|
|
80
|
+
readonly hoverDelay: (delay: string) => readonly [Readonly<{
|
|
81
|
+
'--_hover-delay': stylex.StyleXClassNameFor<"--_hover-delay", string>;
|
|
82
|
+
}>, stylex.InlineStyles];
|
|
33
83
|
readonly reveal: Readonly<{
|
|
34
84
|
readonly transitionProperty: stylex.StyleXClassNameFor<"transitionProperty", "opacity, position">;
|
|
35
85
|
readonly transitionDuration: stylex.StyleXClassNameFor<"transitionDuration", string>;
|
|
36
86
|
readonly transitionTimingFunction: stylex.StyleXClassNameFor<"transitionTimingFunction", "cubic-bezier(0.24, 1, 0.4, 1)">;
|
|
37
87
|
readonly transitionBehavior: stylex.StyleXClassNameFor<"transitionBehavior", "allow-discrete">;
|
|
38
|
-
readonly transitionDelay: stylex.StyleXClassNameFor<"transitionDelay", "0s, 0s" | "var(--_reveal-delay, 0s, 0s)">;
|
|
88
|
+
readonly transitionDelay: stylex.StyleXClassNameFor<"transitionDelay", "var(--_reveal-delay, 0s, 0s)" | "var(--_reveal-delay-reduced, 0s, 0s)">;
|
|
39
89
|
readonly opacity: stylex.StyleXClassNameFor<"opacity", "var(--_reveal-opacity, 1)">;
|
|
40
90
|
readonly position: stylex.StyleXClassNameFor<"position", "var(--_reveal-position, static)">;
|
|
41
91
|
}>;
|
|
@@ -43,19 +93,36 @@ export declare const styles: Readonly<{
|
|
|
43
93
|
readonly transitionProperty: stylex.StyleXClassNameFor<"transitionProperty", "opacity">;
|
|
44
94
|
readonly transitionDuration: stylex.StyleXClassNameFor<"transitionDuration", "175ms" | "0s">;
|
|
45
95
|
readonly transitionTimingFunction: stylex.StyleXClassNameFor<"transitionTimingFunction", "cubic-bezier(0.24, 1, 0.4, 1)">;
|
|
96
|
+
readonly transitionDelay: stylex.StyleXClassNameFor<"transitionDelay", "var(--_fade-delay, 0s)">;
|
|
46
97
|
readonly opacity: stylex.StyleXClassNameFor<"opacity", "var(--_reveal-opacity, 1)">;
|
|
47
98
|
}>;
|
|
48
99
|
readonly conceal: Readonly<{
|
|
49
100
|
readonly transitionProperty: stylex.StyleXClassNameFor<"transitionProperty", "opacity">;
|
|
50
101
|
readonly transitionDuration: stylex.StyleXClassNameFor<"transitionDuration", "175ms" | "0s">;
|
|
51
102
|
readonly transitionTimingFunction: stylex.StyleXClassNameFor<"transitionTimingFunction", "cubic-bezier(0.24, 1, 0.4, 1)">;
|
|
103
|
+
readonly transitionDelay: stylex.StyleXClassNameFor<"transitionDelay", "var(--_fade-delay, 0s)">;
|
|
52
104
|
readonly opacity: stylex.StyleXClassNameFor<"opacity", "var(--_conceal-opacity, 1)">;
|
|
53
105
|
}>;
|
|
54
106
|
readonly concealLayoutPreserved: Readonly<{
|
|
55
107
|
readonly transitionProperty: stylex.StyleXClassNameFor<"transitionProperty", "opacity">;
|
|
56
108
|
readonly transitionDuration: stylex.StyleXClassNameFor<"transitionDuration", "175ms" | "0s">;
|
|
57
109
|
readonly transitionTimingFunction: stylex.StyleXClassNameFor<"transitionTimingFunction", "cubic-bezier(0.24, 1, 0.4, 1)">;
|
|
110
|
+
readonly transitionDelay: stylex.StyleXClassNameFor<"transitionDelay", "var(--_fade-delay, 0s)">;
|
|
58
111
|
readonly opacity: stylex.StyleXClassNameFor<"opacity", "var(--_conceal-opacity, 1)">;
|
|
59
112
|
}>;
|
|
113
|
+
readonly contentShown: Readonly<{
|
|
114
|
+
readonly opacity: stylex.StyleXClassNameFor<"opacity", 1>;
|
|
115
|
+
readonly position: stylex.StyleXClassNameFor<"position", "static">;
|
|
116
|
+
readonly transitionDelay: stylex.StyleXClassNameFor<"transitionDelay", "0s">;
|
|
117
|
+
}>;
|
|
118
|
+
readonly contentHidden: Readonly<{
|
|
119
|
+
readonly opacity: stylex.StyleXClassNameFor<"opacity", 0 | 1>;
|
|
120
|
+
readonly position: stylex.StyleXClassNameFor<"position", "static" | "absolute">;
|
|
121
|
+
readonly transitionDelay: stylex.StyleXClassNameFor<"transitionDelay", "0s">;
|
|
122
|
+
}>;
|
|
123
|
+
readonly contentHiddenLayoutPreserved: Readonly<{
|
|
124
|
+
readonly opacity: stylex.StyleXClassNameFor<"opacity", 0 | 1>;
|
|
125
|
+
readonly transitionDelay: stylex.StyleXClassNameFor<"transitionDelay", "0s">;
|
|
126
|
+
}>;
|
|
60
127
|
}>;
|
|
61
128
|
//# sourceMappingURL=containerReveal.stylex.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"containerReveal.stylex.d.ts","sourceRoot":"","sources":["../../src/hooks/containerReveal.stylex.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"containerReveal.stylex.d.ts","sourceRoot":"","sources":["../../src/hooks/containerReveal.stylex.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAU3C,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2MjB,CAAC"}
|
|
@@ -3,9 +3,9 @@
|
|
|
3
3
|
/**
|
|
4
4
|
* @file containerReveal.stylex.ts
|
|
5
5
|
* @input Uses StyleX, theme tokens
|
|
6
|
-
* @output The container style that publishes the reveal state,
|
|
7
|
-
*
|
|
8
|
-
* variant) that read it.
|
|
6
|
+
* @output The container style that publishes the reveal state, the suspended
|
|
7
|
+
* and hover-delay container variants, and the four content style blocks
|
|
8
|
+
* (reveal / conceal, each with a layout-preserved variant) that read it.
|
|
9
9
|
* @position Internal to useContainerReveal.
|
|
10
10
|
*
|
|
11
11
|
* HOW THE SCOPING WORKS: the container declares its own reveal state as
|
|
@@ -21,20 +21,52 @@ import * as stylex from '@stylexjs/stylex';
|
|
|
21
21
|
import "../theme/tokens.stylex.js";
|
|
22
22
|
import { durationVars, easeVars } from "../theme/tokens.stylex.js";
|
|
23
23
|
const REST_DELAY = '0s, ' + durationVars['--duration-fast'];
|
|
24
|
+
|
|
25
|
+
// The hover-intent gate: how long the pointer must dwell before the hover
|
|
26
|
+
// branch takes effect. Declared on every container so a nested one never
|
|
27
|
+
// inherits its ancestor's dwell.
|
|
28
|
+
const HOVER_DELAY = 'var(--_hover-delay, 0s)';
|
|
24
29
|
export const styles = {
|
|
25
30
|
container: {
|
|
31
|
+
"--_hover-delay": "xhg274n",
|
|
26
32
|
"--_reveal-opacity": "xct0gwe x1wblmmc xi33vf3 xi7d7de",
|
|
27
33
|
"--_reveal-position": "xp0pj8v x106rhu xoa21yc xarvkxi",
|
|
28
|
-
"--_reveal-delay": "x1xiarpw
|
|
34
|
+
"--_reveal-delay": "x1xiarpw x1qamfbu x1mjsb9v x1pn63d7",
|
|
35
|
+
"--_reveal-delay-reduced": "xdjmrzf x1g1w2pt x1z42dm xm1aeao",
|
|
29
36
|
"--_conceal-opacity": "x1kgmhs9 xb9fdgj",
|
|
37
|
+
"--_fade-delay": "x13l1x9d x1ho7nxo x1wfyzv7 x1hl81f0",
|
|
38
|
+
$$css: true
|
|
39
|
+
},
|
|
40
|
+
stateInactive: {
|
|
41
|
+
"--_reveal-opacity": "xct0gwe xichi0p xi33vf3 xi7d7de",
|
|
42
|
+
"--_reveal-position": "xp0pj8v x1sacq21 xoa21yc xarvkxi",
|
|
43
|
+
"--_reveal-delay": "x1xiarpw x619wqp x1mjsb9v x1pn63d7",
|
|
44
|
+
"--_reveal-delay-reduced": "xdjmrzf xfu6dsl x1z42dm xm1aeao",
|
|
45
|
+
"--_conceal-opacity": "x1kgmhs9 xflzsy",
|
|
46
|
+
"--_fade-delay": "x13l1x9d x3tau1w x1wfyzv7 x1hl81f0",
|
|
30
47
|
$$css: true
|
|
31
48
|
},
|
|
49
|
+
stateActive: {
|
|
50
|
+
"--_reveal-opacity": "x5setjs x1wblmmc xi33vf3 xi7d7de",
|
|
51
|
+
"--_reveal-position": "x1r6s5ct x106rhu xoa21yc xarvkxi",
|
|
52
|
+
"--_reveal-delay": "x1dejzja xp1dr9k x1mjsb9v x1pn63d7",
|
|
53
|
+
"--_reveal-delay-reduced": "xdjmrzf xfu6dsl x1z42dm xm1aeao",
|
|
54
|
+
"--_conceal-opacity": "x9pmotm xb9fdgj",
|
|
55
|
+
"--_fade-delay": "x13l1x9d x3tau1w x1wfyzv7 x1hl81f0",
|
|
56
|
+
$$css: true
|
|
57
|
+
},
|
|
58
|
+
hoverDelay: delay => [{
|
|
59
|
+
"--_hover-delay": delay != null ? "x8xu23y" : delay,
|
|
60
|
+
$$css: true
|
|
61
|
+
}, {
|
|
62
|
+
"--x---_hover-delay": delay != null ? delay : undefined
|
|
63
|
+
}],
|
|
32
64
|
reveal: {
|
|
33
65
|
k1ekBW: "x1n1p2mu",
|
|
34
66
|
kIyJzY: "x1tw3moq xsr0bmt",
|
|
35
67
|
kAMwcw: "xlr8y92",
|
|
36
68
|
kzIqYQ: "xd00j3c",
|
|
37
|
-
kIr0Dl: "x1rq8cwj
|
|
69
|
+
kIr0Dl: "x1rq8cwj xwgk2z2",
|
|
38
70
|
kSiTet: "xgsobzw",
|
|
39
71
|
kVAEAm: "x1mf7ja4",
|
|
40
72
|
$$css: true
|
|
@@ -43,6 +75,7 @@ export const styles = {
|
|
|
43
75
|
k1ekBW: "x19991ni",
|
|
44
76
|
kIyJzY: "xuedmi6 x12w9bfk",
|
|
45
77
|
kAMwcw: "xlr8y92",
|
|
78
|
+
kIr0Dl: "x4avkj2",
|
|
46
79
|
kSiTet: "xgsobzw",
|
|
47
80
|
$$css: true
|
|
48
81
|
},
|
|
@@ -50,6 +83,7 @@ export const styles = {
|
|
|
50
83
|
k1ekBW: "x19991ni",
|
|
51
84
|
kIyJzY: "xuedmi6 x12w9bfk",
|
|
52
85
|
kAMwcw: "xlr8y92",
|
|
86
|
+
kIr0Dl: "x4avkj2",
|
|
53
87
|
kSiTet: "x1wnsjo",
|
|
54
88
|
$$css: true
|
|
55
89
|
},
|
|
@@ -57,7 +91,25 @@ export const styles = {
|
|
|
57
91
|
k1ekBW: "x19991ni",
|
|
58
92
|
kIyJzY: "xuedmi6 x12w9bfk",
|
|
59
93
|
kAMwcw: "xlr8y92",
|
|
94
|
+
kIr0Dl: "x4avkj2",
|
|
60
95
|
kSiTet: "x1wnsjo",
|
|
61
96
|
$$css: true
|
|
97
|
+
},
|
|
98
|
+
contentShown: {
|
|
99
|
+
kSiTet: "x1hc1fzr",
|
|
100
|
+
kVAEAm: "x1uhb9sk",
|
|
101
|
+
kIr0Dl: "x1ahifba",
|
|
102
|
+
$$css: true
|
|
103
|
+
},
|
|
104
|
+
contentHidden: {
|
|
105
|
+
kSiTet: "xg01cxk x1euntei",
|
|
106
|
+
kVAEAm: "x10l6tqk xo74pv5",
|
|
107
|
+
kIr0Dl: "x1ahifba",
|
|
108
|
+
$$css: true
|
|
109
|
+
},
|
|
110
|
+
contentHiddenLayoutPreserved: {
|
|
111
|
+
kSiTet: "xg01cxk x1euntei",
|
|
112
|
+
kIr0Dl: "x1ahifba",
|
|
113
|
+
$$css: true
|
|
62
114
|
}
|
|
63
115
|
};
|
package/dist/hooks/index.d.ts
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
*
|
|
7
7
|
* SYNC: When modified, update this header
|
|
8
8
|
*/
|
|
9
|
-
export { useFocusTrap } from './useFocusTrap';
|
|
9
|
+
export { hasActiveFocusTrapEscape, isImeKeyEvent, useFocusTrap, } from './useFocusTrap';
|
|
10
10
|
export type { UseFocusTrapOptions, UseFocusTrapReturn } from './useFocusTrap';
|
|
11
11
|
export { useAnnounce } from './useAnnounce';
|
|
12
12
|
export type { AnnounceFn, AnnouncePoliteness } from './useAnnounce';
|
|
@@ -49,5 +49,5 @@ export type { UseLongPressOptions, UseLongPressHandlers } from './useLongPress';
|
|
|
49
49
|
export { useDevWarning } from './useDevWarning';
|
|
50
50
|
export { useIndicatorFocusRing } from './useIndicatorFocusRing';
|
|
51
51
|
export { useContainerReveal } from './useContainerReveal';
|
|
52
|
-
export type { UseContainerRevealOptions, UseContainerRevealReturn, ContentRevealOptions, } from './useContainerReveal';
|
|
52
|
+
export type { UseContainerRevealOptions, UseContainerRevealReturn, ContainerRevealOptions, ContentRevealOptions, } from './useContainerReveal';
|
|
53
53
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAIA;;;;;;;GAOG;AAEH,OAAO,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"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"}
|
package/dist/hooks/index.js
CHANGED
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
*
|
|
11
11
|
* SYNC: When modified, update this header
|
|
12
12
|
*/
|
|
13
|
-
export { useFocusTrap } from "./useFocusTrap.js";
|
|
13
|
+
export { hasActiveFocusTrapEscape, isImeKeyEvent, useFocusTrap } from "./useFocusTrap.js";
|
|
14
14
|
export { useAnnounce } from "./useAnnounce.js";
|
|
15
15
|
export { useClipboard } from "./useClipboard.js";
|
|
16
16
|
export { useGridFocus } from "./useGridFocus.js";
|
|
@@ -16,10 +16,21 @@
|
|
|
16
16
|
* container shadows its ancestor's state for its own subtree. See
|
|
17
17
|
* containerReveal.stylex.ts.
|
|
18
18
|
*
|
|
19
|
+
* Two levers sit on top of the pointer, both still CSS-only. On the container:
|
|
20
|
+
* `hoverDelay` (dwell before the reveal starts — the Tooltip / HoverCard
|
|
21
|
+
* intent gate applied to a reveal) and `forceState` (pin the trigger state a
|
|
22
|
+
* caller owns: a motion gate, a scroll, an open menu). On a single piece of
|
|
23
|
+
* content: `forceVisibility`, which pins how THAT element looks. State belongs
|
|
24
|
+
* to the container because one container feeds children whose looks are
|
|
25
|
+
* opposite; appearance belongs to the element, where it is unambiguous.
|
|
26
|
+
* Neither lever can hide content from a keyboard user — see ACCESSIBILITY.
|
|
27
|
+
*
|
|
19
28
|
* ACCESSIBILITY (WCAG 2.2 by construction):
|
|
20
29
|
* - Revealed content is visually hidden at rest via position + opacity, so it
|
|
21
30
|
* stays in the accessibility tree and tab order — never display:none.
|
|
22
|
-
* - Keyboard: revealed on :focus-within, so tabbing in shows it
|
|
31
|
+
* - Keyboard: revealed on :focus-within, so tabbing in shows it — with no dwell
|
|
32
|
+
* to wait through, and neither an inactive container nor a forced-hidden
|
|
33
|
+
* element can keep it dark.
|
|
23
34
|
* - Touch: always visible on coarse pointers; never gated behind hover.
|
|
24
35
|
* - Concealed (inverted) content is a mouse-only visual swap: it ignores
|
|
25
36
|
* :focus-within (a keyboard user must never watch content vanish) and stays
|
|
@@ -41,6 +52,35 @@ export interface UseContainerRevealOptions {
|
|
|
41
52
|
*/
|
|
42
53
|
isEnabled?: boolean;
|
|
43
54
|
}
|
|
55
|
+
export interface ContainerRevealOptions {
|
|
56
|
+
/**
|
|
57
|
+
* Pin the container's trigger state instead of letting the pointer drive it.
|
|
58
|
+
* `'active'` reads as pointed-at and `'inactive'` as at rest; omit it — the
|
|
59
|
+
* default — to leave the container on hover and focus.
|
|
60
|
+
*
|
|
61
|
+
* State, not appearance: what each child then looks like is the child's own
|
|
62
|
+
* business (revealed content fades in on `'active'`, inverted content fades
|
|
63
|
+
* out). This is the lever for state a caller owns — a motion gate over a
|
|
64
|
+
* list, a scroll in progress, a row whose menu is open and must stay lit.
|
|
65
|
+
*
|
|
66
|
+
* `'inactive'` never overrides keyboard focus or a coarse pointer: the
|
|
67
|
+
* container still reveals on :focus-within and stays revealed on touch, so
|
|
68
|
+
* it cannot hide content from a keyboard or touch user.
|
|
69
|
+
*/
|
|
70
|
+
forceState?: 'active' | 'inactive';
|
|
71
|
+
/**
|
|
72
|
+
* Hover-intent gate, in milliseconds: how long the pointer must rest on the
|
|
73
|
+
* container before the reveal starts. A pointer that passes through leaves
|
|
74
|
+
* nothing painted behind it, which is what keeps a list of rows quiet while
|
|
75
|
+
* the cursor sweeps across it.
|
|
76
|
+
*
|
|
77
|
+
* Mouse-only, like Tooltip's and HoverCard's `delay`: keyboard focus and
|
|
78
|
+
* touch reveal immediately. It survives `prefers-reduced-motion` — an intent
|
|
79
|
+
* gate is timing, not motion.
|
|
80
|
+
* @default 0
|
|
81
|
+
*/
|
|
82
|
+
hoverDelay?: number;
|
|
83
|
+
}
|
|
44
84
|
export interface ContentRevealOptions {
|
|
45
85
|
/**
|
|
46
86
|
* Conceal-on-hover instead of reveal-on-hover: content is visible at rest
|
|
@@ -55,10 +95,23 @@ export interface ContentRevealOptions {
|
|
|
55
95
|
* @default false
|
|
56
96
|
*/
|
|
57
97
|
isLayoutPreserved?: boolean;
|
|
98
|
+
/**
|
|
99
|
+
* Pin THIS element's appearance, whatever the container's state: `'shown'`
|
|
100
|
+
* keeps it visible, `'hidden'` keeps it out. Omit it — the default — to
|
|
101
|
+
* follow the container.
|
|
102
|
+
*
|
|
103
|
+
* Appearance, not state: it says how one element looks, so it is unambiguous
|
|
104
|
+
* where the container's `forceState` cannot be (a container feeds revealed
|
|
105
|
+
* and inverted children at once).
|
|
106
|
+
*
|
|
107
|
+
* `'hidden'` yields to focus — a forced-hidden element is still mounted and
|
|
108
|
+
* tabbable, so it reappears when focus lands inside it.
|
|
109
|
+
*/
|
|
110
|
+
forceVisibility?: 'shown' | 'hidden';
|
|
58
111
|
}
|
|
59
112
|
export interface UseContainerRevealReturn {
|
|
60
113
|
/** Spread onto the container whose hover/focus-within drives the reveal. */
|
|
61
|
-
getContainerProps: () => {
|
|
114
|
+
getContainerProps: (options?: ContainerRevealOptions) => {
|
|
62
115
|
className?: string;
|
|
63
116
|
style?: CSSProperties;
|
|
64
117
|
};
|
|
@@ -77,7 +130,11 @@ export interface UseContainerRevealReturn {
|
|
|
77
130
|
* isEnabled: revealOn === 'hover',
|
|
78
131
|
* });
|
|
79
132
|
*
|
|
80
|
-
* <div
|
|
133
|
+
* <div
|
|
134
|
+
* {...mergeProps(
|
|
135
|
+
* getContainerProps({hoverDelay: 120, forceState: gateState}),
|
|
136
|
+
* stylex.props(styles.row),
|
|
137
|
+
* )}>
|
|
81
138
|
* {label}
|
|
82
139
|
* <span {...mergeProps(getContentRevealProps(), stylex.props(styles.actions))}>
|
|
83
140
|
* {actions}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useContainerReveal.d.ts","sourceRoot":"","sources":["../../src/hooks/useContainerReveal.ts"],"names":[],"mappings":"AAIA
|
|
1
|
+
{"version":3,"file":"useContainerReveal.d.ts","sourceRoot":"","sources":["../../src/hooks/useContainerReveal.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AAEH,OAAO,EAAU,KAAK,aAAa,EAAC,MAAM,OAAO,CAAC;AAIlD,MAAM,WAAW,yBAAyB;IACxC;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,sBAAsB;IACrC;;;;;;;;;;;;;OAaG;IACH,UAAU,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;IACnC;;;;;;;;;;OAUG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,oBAAoB;IACnC;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B;;;;;;;;;;;OAWG;IACH,eAAe,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;CACtC;AAED,MAAM,WAAW,wBAAwB;IACvC,4EAA4E;IAC5E,iBAAiB,EAAE,CAAC,OAAO,CAAC,EAAE,sBAAsB,KAAK;QACvD,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,KAAK,CAAC,EAAE,aAAa,CAAC;KACvB,CAAC;IACF,mDAAmD;IACnD,qBAAqB,EAAE,CAAC,OAAO,CAAC,EAAE,oBAAoB,KAAK;QACzD,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,KAAK,CAAC,EAAE,aAAa,CAAC;KACvB,CAAC;CACH;AAID;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,kBAAkB,CAChC,OAAO,GAAE,yBAA8B,GACtC,wBAAwB,CA4C1B"}
|
|
@@ -20,10 +20,21 @@
|
|
|
20
20
|
* container shadows its ancestor's state for its own subtree. See
|
|
21
21
|
* containerReveal.stylex.ts.
|
|
22
22
|
*
|
|
23
|
+
* Two levers sit on top of the pointer, both still CSS-only. On the container:
|
|
24
|
+
* `hoverDelay` (dwell before the reveal starts — the Tooltip / HoverCard
|
|
25
|
+
* intent gate applied to a reveal) and `forceState` (pin the trigger state a
|
|
26
|
+
* caller owns: a motion gate, a scroll, an open menu). On a single piece of
|
|
27
|
+
* content: `forceVisibility`, which pins how THAT element looks. State belongs
|
|
28
|
+
* to the container because one container feeds children whose looks are
|
|
29
|
+
* opposite; appearance belongs to the element, where it is unambiguous.
|
|
30
|
+
* Neither lever can hide content from a keyboard user — see ACCESSIBILITY.
|
|
31
|
+
*
|
|
23
32
|
* ACCESSIBILITY (WCAG 2.2 by construction):
|
|
24
33
|
* - Revealed content is visually hidden at rest via position + opacity, so it
|
|
25
34
|
* stays in the accessibility tree and tab order — never display:none.
|
|
26
|
-
* - Keyboard: revealed on :focus-within, so tabbing in shows it
|
|
35
|
+
* - Keyboard: revealed on :focus-within, so tabbing in shows it — with no dwell
|
|
36
|
+
* to wait through, and neither an inactive container nor a forced-hidden
|
|
37
|
+
* element can keep it dark.
|
|
27
38
|
* - Touch: always visible on coarse pointers; never gated behind hover.
|
|
28
39
|
* - Concealed (inverted) content is a mouse-only visual swap: it ignores
|
|
29
40
|
* :focus-within (a keyboard user must never watch content vanish) and stays
|
|
@@ -48,7 +59,11 @@ const EMPTY = Object.freeze({});
|
|
|
48
59
|
* isEnabled: revealOn === 'hover',
|
|
49
60
|
* });
|
|
50
61
|
*
|
|
51
|
-
* <div
|
|
62
|
+
* <div
|
|
63
|
+
* {...mergeProps(
|
|
64
|
+
* getContainerProps({hoverDelay: 120, forceState: gateState}),
|
|
65
|
+
* stylex.props(styles.row),
|
|
66
|
+
* )}>
|
|
52
67
|
* {label}
|
|
53
68
|
* <span {...mergeProps(getContentRevealProps(), stylex.props(styles.actions))}>
|
|
54
69
|
* {actions}
|
|
@@ -68,14 +83,21 @@ export function useContainerReveal(options = {}) {
|
|
|
68
83
|
};
|
|
69
84
|
}
|
|
70
85
|
return {
|
|
71
|
-
getContainerProps: () =>
|
|
86
|
+
getContainerProps: (containerOptions = {}) => {
|
|
87
|
+
const {
|
|
88
|
+
forceState,
|
|
89
|
+
hoverDelay = 0
|
|
90
|
+
} = containerOptions;
|
|
91
|
+
return stylex.props(styles.container, hoverDelay > 0 && styles.hoverDelay(`${hoverDelay}ms`), forceState === 'inactive' && styles.stateInactive, forceState === 'active' && styles.stateActive);
|
|
92
|
+
},
|
|
72
93
|
getContentRevealProps: (contentOptions = {}) => {
|
|
73
94
|
const {
|
|
74
95
|
isRevealInverted = false,
|
|
75
|
-
isLayoutPreserved = false
|
|
96
|
+
isLayoutPreserved = false,
|
|
97
|
+
forceVisibility
|
|
76
98
|
} = contentOptions;
|
|
77
99
|
const style = isRevealInverted ? isLayoutPreserved ? styles.concealLayoutPreserved : styles.conceal : isLayoutPreserved ? styles.revealLayoutPreserved : styles.reveal;
|
|
78
|
-
return stylex.props(style);
|
|
100
|
+
return stylex.props(style, forceVisibility === 'shown' && styles.contentShown, forceVisibility === 'hidden' && (isLayoutPreserved ? styles.contentHiddenLayoutPreserved : styles.contentHidden));
|
|
79
101
|
}
|
|
80
102
|
};
|
|
81
103
|
}, [isEnabled]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useFocusTrap.d.ts","sourceRoot":"","sources":["../../src/hooks/useFocusTrap.ts"],"names":[],"mappings":"AAsFA;;;;;GAKG;AACH,wBAAgB,wBAAwB,IAAI,OAAO,CAElD;AAED;;;;;;GAMG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE;IACnC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,GAAG,OAAO,CAEV;AAgFD;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC;;OAEG;IACH,QAAQ,EAAE,OAAO,CAAC;IAElB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAED;;GAEG;AACH,MAAM,WAAW,kBAAkB,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW;IACrE;;OAEG;IACH,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC;IAExC;;OAEG;IACH,UAAU,EAAE,MAAM,IAAI,CAAC;CACxB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,wBAAgB,YAAY,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,EAC9D,OAAO,EAAE,mBAAmB,GAC3B,kBAAkB,CAAC,CAAC,CAAC,
|
|
1
|
+
{"version":3,"file":"useFocusTrap.d.ts","sourceRoot":"","sources":["../../src/hooks/useFocusTrap.ts"],"names":[],"mappings":"AAsFA;;;;;GAKG;AACH,wBAAgB,wBAAwB,IAAI,OAAO,CAElD;AAED;;;;;;GAMG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE;IACnC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,GAAG,OAAO,CAEV;AAgFD;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC;;OAEG;IACH,QAAQ,EAAE,OAAO,CAAC;IAElB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAED;;GAEG;AACH,MAAM,WAAW,kBAAkB,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW;IACrE;;OAEG;IACH,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC;IAExC;;OAEG;IACH,UAAU,EAAE,MAAM,IAAI,CAAC;CACxB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,wBAAgB,YAAY,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,EAC9D,OAAO,EAAE,mBAAmB,GAC3B,kBAAkB,CAAC,CAAC,CAAC,CAwNvB"}
|
|
@@ -277,12 +277,17 @@ export function useFocusTrap(options) {
|
|
|
277
277
|
lastFocusRef.current = target;
|
|
278
278
|
} else if (isKeyboardNavigationRef.current) {
|
|
279
279
|
// Focus escaped via keyboard - redirect it back
|
|
280
|
-
focusFirstDescendant(container);
|
|
280
|
+
const focusedFirst = focusFirstDescendant(container);
|
|
281
281
|
|
|
282
282
|
// If we're back at the same element (Shift+Tab from first element),
|
|
283
283
|
// try focusing the last element instead
|
|
284
|
-
if (lastFocusRef.current === document.activeElement) {
|
|
284
|
+
if (focusedFirst && lastFocusRef.current === document.activeElement) {
|
|
285
285
|
focusLastDescendant(container);
|
|
286
|
+
} else if (!focusedFirst && lastFocusRef.current instanceof HTMLElement && container.contains(lastFocusRef.current)) {
|
|
287
|
+
// A modal surface may intentionally have no tabbable controls and
|
|
288
|
+
// place initial focus on a tabIndex={-1} heading or panel. Preserve
|
|
289
|
+
// that programmatic focus target instead of letting Tab escape.
|
|
290
|
+
attemptFocus(lastFocusRef.current);
|
|
286
291
|
}
|
|
287
292
|
lastFocusRef.current = document.activeElement;
|
|
288
293
|
}
|
|
@@ -345,6 +350,15 @@ export function useFocusTrap(options) {
|
|
|
345
350
|
isKeyboardNavigationRef.current = true;
|
|
346
351
|
const focusable = getFocusableElements(container);
|
|
347
352
|
if (focusable.length === 0) {
|
|
353
|
+
// There is nowhere to advance to. Keep focus on the current
|
|
354
|
+
// programmatic target (for example a dialog panel with tabIndex=-1)
|
|
355
|
+
// rather than allowing the browser to move into background content.
|
|
356
|
+
event.preventDefault();
|
|
357
|
+
const active = document.activeElement;
|
|
358
|
+
if (active instanceof HTMLElement && container.contains(active)) {
|
|
359
|
+
lastFocusRef.current = active;
|
|
360
|
+
}
|
|
361
|
+
isKeyboardNavigationRef.current = false;
|
|
348
362
|
return;
|
|
349
363
|
}
|
|
350
364
|
const first = focusable[0];
|
|
@@ -1,18 +1,46 @@
|
|
|
1
|
-
interface UseMenuHoverOptions {
|
|
1
|
+
export interface UseMenuHoverOptions {
|
|
2
2
|
show: (options?: {
|
|
3
3
|
skipAutoFocus?: boolean;
|
|
4
4
|
}) => void;
|
|
5
5
|
hide: () => void;
|
|
6
6
|
isOpen: boolean;
|
|
7
7
|
isEnabled: boolean;
|
|
8
|
+
/** Delay before a hover opens the menu (ms). @default 150 */
|
|
8
9
|
showDelay?: number;
|
|
10
|
+
/** Delay before leaving the trigger or menu closes it (ms). @default 200 */
|
|
9
11
|
hideDelay?: number;
|
|
12
|
+
/**
|
|
13
|
+
* Window after a hover-open in which a click confirms the menu instead of
|
|
14
|
+
* closing it. 0 opts out, making every click toggle. @default 500
|
|
15
|
+
*/
|
|
16
|
+
clickGuardMs?: number;
|
|
17
|
+
/**
|
|
18
|
+
* Selector for the menu's focusable items, forwarded to `useListFocus`. A
|
|
19
|
+
* panel of links (a mega menu) needs an override; `role="menuitem"` rows do
|
|
20
|
+
* not. @default '[role="menuitem"]'
|
|
21
|
+
*/
|
|
22
|
+
itemSelector?: string;
|
|
23
|
+
/**
|
|
24
|
+
* The popup's DOM id (`usePopover().id`). Supply it when the popup is a
|
|
25
|
+
* native `popover="auto"` and the trigger sits outside it; omit it for
|
|
26
|
+
* `popover="manual"` popups and triggers inside the panel.
|
|
27
|
+
*/
|
|
28
|
+
popoverId?: string;
|
|
29
|
+
/**
|
|
30
|
+
* Whether the hook moves focus on a click or keyboard open. False for
|
|
31
|
+
* consumers that wire the pointer half only and leave focus to the popover's
|
|
32
|
+
* own trap — a panel that is a dialog rather than a menu (`SideNavItem`'s
|
|
33
|
+
* collapsed flyout) has no items for the hook to focus. @default true
|
|
34
|
+
*/
|
|
35
|
+
ownsFocus?: boolean;
|
|
10
36
|
}
|
|
11
|
-
interface UseMenuHoverReturn<T extends HTMLElement = HTMLElement> {
|
|
37
|
+
export interface UseMenuHoverReturn<T extends HTMLElement = HTMLElement> {
|
|
12
38
|
triggerProps: {
|
|
13
|
-
onClick: () => void;
|
|
39
|
+
onClick: (event?: React.MouseEvent) => void;
|
|
14
40
|
onMouseEnter: () => void;
|
|
15
41
|
onMouseLeave: () => void;
|
|
42
|
+
/** Present only when `popoverId` is supplied. */
|
|
43
|
+
popoverTarget?: string;
|
|
16
44
|
};
|
|
17
45
|
contentProps: {
|
|
18
46
|
onMouseEnter: () => void;
|
|
@@ -20,9 +48,26 @@ interface UseMenuHoverReturn<T extends HTMLElement = HTMLElement> {
|
|
|
20
48
|
onKeyDown: (e: React.KeyboardEvent) => void;
|
|
21
49
|
};
|
|
22
50
|
menuRef: React.RefObject<T | null>;
|
|
23
|
-
|
|
51
|
+
/** Focus the first enabled item. Returns false when there was none. */
|
|
52
|
+
focusFirst: () => boolean;
|
|
53
|
+
/**
|
|
54
|
+
* Focus the first enabled item, falling back to the menu container when the
|
|
55
|
+
* menu is empty or still loading.
|
|
56
|
+
*/
|
|
57
|
+
focusMenu: () => void;
|
|
58
|
+
/**
|
|
59
|
+
* For consumers with their own click handler: call this in the open branch.
|
|
60
|
+
* Returns `true` when the click was the one following a hover-open — the menu
|
|
61
|
+
* is now pinned and the click must NOT be treated as a dismissal.
|
|
62
|
+
*/
|
|
63
|
+
confirmHoverOpen: () => boolean;
|
|
64
|
+
/**
|
|
65
|
+
* Close, restoring focus to the trigger. For dismiss affordances rendered
|
|
66
|
+
* inside the popup, which are close buttons rather than the trigger and so
|
|
67
|
+
* must not carry its toggle and keyboard-activation semantics.
|
|
68
|
+
*/
|
|
69
|
+
close: () => void;
|
|
24
70
|
setTriggerEl: (el: HTMLElement | null) => void;
|
|
25
71
|
}
|
|
26
72
|
export declare function useMenuHover<T extends HTMLElement = HTMLElement>(options: UseMenuHoverOptions): UseMenuHoverReturn<T>;
|
|
27
|
-
export {};
|
|
28
73
|
//# sourceMappingURL=useMenuHover.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useMenuHover.d.ts","sourceRoot":"","sources":["../../src/hooks/useMenuHover.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"useMenuHover.d.ts","sourceRoot":"","sources":["../../src/hooks/useMenuHover.ts"],"names":[],"mappings":"AAwDA,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,CAAC,OAAO,CAAC,EAAE;QAAC,aAAa,CAAC,EAAE,OAAO,CAAA;KAAC,KAAK,IAAI,CAAC;IACpD,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,OAAO,CAAC;IACnB,6DAA6D;IAC7D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4EAA4E;IAC5E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,kBAAkB,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW;IACrE,YAAY,EAAE;QACZ,OAAO,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;QAC5C,YAAY,EAAE,MAAM,IAAI,CAAC;QACzB,YAAY,EAAE,MAAM,IAAI,CAAC;QACzB,iDAAiD;QACjD,aAAa,CAAC,EAAE,MAAM,CAAC;KACxB,CAAC;IACF,YAAY,EAAE;QACZ,YAAY,EAAE,MAAM,IAAI,CAAC;QACzB,YAAY,EAAE,MAAM,IAAI,CAAC;QACzB,SAAS,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,KAAK,IAAI,CAAC;KAC7C,CAAC;IACF,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC;IACnC,uEAAuE;IACvE,UAAU,EAAE,MAAM,OAAO,CAAC;IAC1B;;;OAGG;IACH,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB;;;;OAIG;IACH,gBAAgB,EAAE,MAAM,OAAO,CAAC;IAChC;;;;OAIG;IACH,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,YAAY,EAAE,CAAC,EAAE,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;CAChD;AAED,wBAAgB,YAAY,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,EAC9D,OAAO,EAAE,mBAAmB,GAC3B,kBAAkB,CAAC,CAAC,CAAC,CAqQvB"}
|