@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.
Files changed (201) hide show
  1. package/CHANGELOG.md +55 -0
  2. package/dist/Avatar/Avatar.d.ts +4 -1
  3. package/dist/Avatar/Avatar.d.ts.map +1 -1
  4. package/dist/Avatar/Avatar.js +19 -23
  5. package/dist/AvatarGroup/AvatarGroupOverflow.d.ts.map +1 -1
  6. package/dist/AvatarGroup/AvatarGroupOverflow.js +7 -2
  7. package/dist/Button/Button.d.ts.map +1 -1
  8. package/dist/Button/Button.js +9 -7
  9. package/dist/Chat/ChatMessage.d.ts +7 -0
  10. package/dist/Chat/ChatMessage.d.ts.map +1 -1
  11. package/dist/Chat/ChatMessageBubble.d.ts +13 -1
  12. package/dist/Chat/ChatMessageBubble.d.ts.map +1 -1
  13. package/dist/Chat/ChatMessageBubble.js +19 -1
  14. package/dist/CheckboxInput/CheckboxInput.d.ts.map +1 -1
  15. package/dist/CheckboxInput/CheckboxInput.js +5 -0
  16. package/dist/CommandPalette/CommandPaletteFooter.d.ts.map +1 -1
  17. package/dist/CommandPalette/CommandPaletteFooter.js +5 -3
  18. package/dist/DateTimeInput/DateTimeInput.d.ts.map +1 -1
  19. package/dist/DateTimeInput/DateTimeInput.js +2 -2
  20. package/dist/DropdownMenu/DropdownMenuSubMenu.d.ts.map +1 -1
  21. package/dist/DropdownMenu/DropdownMenuSubMenu.js +19 -15
  22. package/dist/HoverCard/HoverCard.d.ts +1 -1
  23. package/dist/HoverCard/HoverCard.d.ts.map +1 -1
  24. package/dist/HoverCard/HoverCard.js +5 -13
  25. package/dist/HoverCard/useHoverCard.d.ts.map +1 -1
  26. package/dist/HoverCard/useHoverCard.js +6 -5
  27. package/dist/InputGroup/groupStyles.d.ts.map +1 -1
  28. package/dist/InputGroup/groupStyles.js +7 -2
  29. package/dist/Layer/layerHost.d.ts +24 -0
  30. package/dist/Layer/layerHost.d.ts.map +1 -0
  31. package/dist/Layer/layerHost.js +79 -0
  32. package/dist/Layer/useLayer.d.ts +14 -6
  33. package/dist/Layer/useLayer.d.ts.map +1 -1
  34. package/dist/Layer/useLayer.js +158 -30
  35. package/dist/NavItem/navItemStyles.stylex.d.ts +17 -5
  36. package/dist/NavItem/navItemStyles.stylex.d.ts.map +1 -1
  37. package/dist/NavItem/navItemStyles.stylex.js +11 -5
  38. package/dist/RadioList/RadioListItem.d.ts.map +1 -1
  39. package/dist/RadioList/RadioListItem.js +5 -0
  40. package/dist/SideNav/SideNav.d.ts +7 -9
  41. package/dist/SideNav/SideNav.d.ts.map +1 -1
  42. package/dist/SideNav/SideNav.js +32 -5
  43. package/dist/SideNav/SideNavCollapseButton.d.ts +25 -9
  44. package/dist/SideNav/SideNavCollapseButton.d.ts.map +1 -1
  45. package/dist/SideNav/SideNavCollapseButton.js +39 -15
  46. package/dist/SideNav/SideNavCollapseContext.d.ts +21 -0
  47. package/dist/SideNav/SideNavCollapseContext.d.ts.map +1 -1
  48. package/dist/SideNav/SideNavCollapseContext.js +16 -2
  49. package/dist/SideNav/SideNavHeading.d.ts.map +1 -1
  50. package/dist/SideNav/SideNavHeading.js +89 -32
  51. package/dist/SideNav/SideNavItem.d.ts +7 -2
  52. package/dist/SideNav/SideNavItem.d.ts.map +1 -1
  53. package/dist/SideNav/SideNavItem.js +119 -75
  54. package/dist/SideNav/SideNavSection.d.ts.map +1 -1
  55. package/dist/SideNav/SideNavSection.js +7 -16
  56. package/dist/SideNav/index.d.ts +1 -1
  57. package/dist/SideNav/index.d.ts.map +1 -1
  58. package/dist/Slider/Slider.d.ts.map +1 -1
  59. package/dist/Slider/Slider.js +56 -15
  60. package/dist/Switch/Switch.d.ts.map +1 -1
  61. package/dist/Switch/Switch.js +5 -0
  62. package/dist/Thumbnail/Thumbnail.d.ts.map +1 -1
  63. package/dist/Thumbnail/Thumbnail.js +5 -0
  64. package/dist/TopNav/TopNavHeading.d.ts.map +1 -1
  65. package/dist/TopNav/TopNavHeading.js +14 -6
  66. package/dist/TopNav/TopNavMegaMenu.d.ts.map +1 -1
  67. package/dist/TopNav/TopNavMegaMenu.js +25 -93
  68. package/dist/TopNav/TopNavMegaMenuItem.js +1 -1
  69. package/dist/TopNav/TopNavMenu.d.ts.map +1 -1
  70. package/dist/TopNav/TopNavMenu.js +10 -5
  71. package/dist/astryx.css +40 -8
  72. package/dist/astryx.umd.js +50 -50
  73. package/dist/astryx.umd.js.map +4 -4
  74. package/dist/hooks/containerReveal.stylex.d.ts +71 -4
  75. package/dist/hooks/containerReveal.stylex.d.ts.map +1 -1
  76. package/dist/hooks/containerReveal.stylex.js +57 -5
  77. package/dist/hooks/index.d.ts +2 -2
  78. package/dist/hooks/index.d.ts.map +1 -1
  79. package/dist/hooks/index.js +1 -1
  80. package/dist/hooks/useContainerReveal.d.ts +60 -3
  81. package/dist/hooks/useContainerReveal.d.ts.map +1 -1
  82. package/dist/hooks/useContainerReveal.js +27 -5
  83. package/dist/hooks/useFocusTrap.d.ts.map +1 -1
  84. package/dist/hooks/useFocusTrap.js +16 -2
  85. package/dist/hooks/useMenuHover.d.ts +50 -5
  86. package/dist/hooks/useMenuHover.d.ts.map +1 -1
  87. package/dist/hooks/useMenuHover.js +171 -51
  88. package/dist/theme/defineTheme.d.ts +16 -5
  89. package/dist/theme/defineTheme.d.ts.map +1 -1
  90. package/dist/theme/defineTheme.js +44 -48
  91. package/dist/theme/derivedVarRegistry.d.ts.map +1 -1
  92. package/dist/theme/derivedVarRegistry.js +7 -0
  93. package/dist/theme/expandColorScale.d.ts.map +1 -1
  94. package/dist/theme/expandColorScale.js +1 -0
  95. package/dist/theme/expandMotionScale.d.ts +1 -0
  96. package/dist/theme/expandMotionScale.d.ts.map +1 -1
  97. package/dist/theme/expandMotionScale.js +1 -0
  98. package/dist/theme/expandRadiusScale.d.ts +1 -0
  99. package/dist/theme/expandRadiusScale.d.ts.map +1 -1
  100. package/dist/theme/expandRadiusScale.js +1 -0
  101. package/dist/theme/expandTypeScale.d.ts +1 -0
  102. package/dist/theme/expandTypeScale.d.ts.map +1 -1
  103. package/dist/theme/expandTypeScale.js +1 -0
  104. package/dist/theme/mergeComponents.d.ts +20 -0
  105. package/dist/theme/mergeComponents.d.ts.map +1 -0
  106. package/dist/theme/mergeComponents.js +56 -0
  107. package/dist/theme/onMediaTokens.d.ts +6 -1
  108. package/dist/theme/onMediaTokens.d.ts.map +1 -1
  109. package/dist/theme/onMediaTokens.js +11 -3
  110. package/dist/theme/tokens.stylex.d.ts +3 -1
  111. package/dist/theme/tokens.stylex.d.ts.map +1 -1
  112. package/dist/theme/tokens.stylex.js +3 -1
  113. package/locales/en.json +84 -0
  114. package/locales/pseudo.json +63 -0
  115. package/package.json +3 -3
  116. package/src/Avatar/Avatar.doc.mjs +5 -2
  117. package/src/Avatar/Avatar.test.tsx +51 -0
  118. package/src/Avatar/Avatar.tsx +30 -20
  119. package/src/AvatarGroup/AvatarGroup.doc.mjs +1 -1
  120. package/src/AvatarGroup/AvatarGroup.test.tsx +14 -0
  121. package/src/AvatarGroup/AvatarGroupOverflow.tsx +3 -2
  122. package/src/Button/Button.tsx +5 -3
  123. package/src/ButtonGroup/ButtonGroup.test.tsx +7 -4
  124. package/src/Card/Card.doc.mjs +2 -0
  125. package/src/Chat/Chat.doc.mjs +4 -1
  126. package/src/Chat/ChatMessage.doc.mjs +3 -3
  127. package/src/Chat/ChatMessage.tsx +7 -0
  128. package/src/Chat/ChatMessageBubble.doc.mjs +7 -0
  129. package/src/Chat/ChatMessageBubble.test.tsx +95 -6
  130. package/src/Chat/ChatMessageBubble.tsx +25 -0
  131. package/src/CheckboxInput/CheckboxInput.tsx +20 -0
  132. package/src/CodeBlock/CodeBlock.doc.mjs +3 -0
  133. package/src/CommandPalette/CommandPaletteFooter.tsx +6 -3
  134. package/src/DateTimeInput/DateTimeInput.tsx +4 -2
  135. package/src/DropdownMenu/DropdownMenuSubMenu.test.tsx +72 -1
  136. package/src/DropdownMenu/DropdownMenuSubMenu.tsx +24 -20
  137. package/src/HoverCard/HoverCard.doc.mjs +3 -3
  138. package/src/HoverCard/HoverCard.test.tsx +283 -55
  139. package/src/HoverCard/HoverCard.tsx +5 -13
  140. package/src/HoverCard/useHoverCard.tsx +8 -11
  141. package/src/InputGroup/groupStyles.ts +7 -8
  142. package/src/Item/Item.doc.mjs +4 -0
  143. package/src/Layer/layerHost.test.ts +99 -0
  144. package/src/Layer/layerHost.ts +141 -0
  145. package/src/Layer/useLayer.doc.mjs +14 -4
  146. package/src/Layer/useLayer.test.tsx +332 -7
  147. package/src/Layer/useLayer.tsx +235 -36
  148. package/src/MobileNav/MobileNav.doc.mjs +7 -0
  149. package/src/NavItem/navItemStyles.stylex.ts +31 -5
  150. package/src/RadioList/RadioListItem.tsx +20 -0
  151. package/src/SideNav/SideNav.doc.mjs +13 -4
  152. package/src/SideNav/SideNav.test.tsx +858 -2
  153. package/src/SideNav/SideNav.tsx +37 -16
  154. package/src/SideNav/SideNavCollapseButton.doc.mjs +28 -6
  155. package/src/SideNav/SideNavCollapseButton.tsx +67 -15
  156. package/src/SideNav/SideNavCollapseContext.ts +29 -9
  157. package/src/SideNav/SideNavHeading.tsx +53 -25
  158. package/src/SideNav/SideNavItem.doc.mjs +13 -0
  159. package/src/SideNav/SideNavItem.tsx +97 -84
  160. package/src/SideNav/SideNavSection.tsx +6 -20
  161. package/src/SideNav/index.ts +2 -0
  162. package/src/Slider/Slider.test.tsx +69 -33
  163. package/src/Slider/Slider.tsx +65 -13
  164. package/src/Switch/Switch.tsx +20 -0
  165. package/src/TabList/TabList.doc.mjs +3 -0
  166. package/src/Text/Text.doc.mjs +1 -1
  167. package/src/Thumbnail/Thumbnail.doc.mjs +3 -0
  168. package/src/Thumbnail/Thumbnail.tsx +10 -0
  169. package/src/Timestamp/Timestamp.test.tsx +40 -22
  170. package/src/Toolbar/Toolbar.test.tsx +14 -14
  171. package/src/TopNav/TopNav.test.tsx +86 -1
  172. package/src/TopNav/TopNavHeading.tsx +21 -14
  173. package/src/TopNav/TopNavMegaMenu.test.tsx +43 -0
  174. package/src/TopNav/TopNavMegaMenu.tsx +29 -105
  175. package/src/TopNav/TopNavMegaMenuItem.tsx +1 -1
  176. package/src/TopNav/TopNavMenu.test.tsx +41 -0
  177. package/src/TopNav/TopNavMenu.tsx +14 -4
  178. package/src/TreeList/TreeList.doc.mjs +1 -0
  179. package/src/hooks/containerReveal.stylex.ts +140 -9
  180. package/src/hooks/index.ts +6 -1
  181. package/src/hooks/useContainerReveal.doc.mjs +11 -5
  182. package/src/hooks/useContainerReveal.test.tsx +70 -3
  183. package/src/hooks/useContainerReveal.ts +86 -7
  184. package/src/hooks/useFocusTrap.test.tsx +16 -0
  185. package/src/hooks/useFocusTrap.ts +20 -2
  186. package/src/hooks/useMenuHover.test.tsx +364 -0
  187. package/src/hooks/useMenuHover.ts +243 -47
  188. package/src/theme/defineTheme.test.ts +127 -0
  189. package/src/theme/defineTheme.ts +57 -51
  190. package/src/theme/derivedVarRegistry.test.ts +78 -12
  191. package/src/theme/derivedVarRegistry.ts +4 -0
  192. package/src/theme/expandColorScale.ts +1 -0
  193. package/src/theme/expandMotionScale.ts +1 -0
  194. package/src/theme/expandRadiusScale.ts +1 -0
  195. package/src/theme/expandTypeScale.ts +1 -0
  196. package/src/theme/mergeComponents.ts +59 -0
  197. package/src/theme/onMediaTokens.ts +9 -2
  198. package/src/theme/themingTargets.test.ts +152 -26
  199. package/src/theme/tokens.stylex.ts +3 -1
  200. package/src/theme/tokens.test.ts +12 -0
  201. 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, and the four
5
- * content style blocks (reveal / conceal, each with a layout-preserved
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;AAK3C,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6EjB,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, and the four
7
- * content style blocks (reveal / conceal, each with a layout-preserved
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 xp1dr9k x1mjsb9v x1pn63d7",
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 x1k6wr6r",
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
  };
@@ -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":"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"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAIA;;;;;;;GAOG;AAEH,OAAO,EACL,wBAAwB,EACxB,aAAa,EACb,YAAY,GACb,MAAM,gBAAgB,CAAC;AACxB,YAAY,EAAC,mBAAmB,EAAE,kBAAkB,EAAC,MAAM,gBAAgB,CAAC;AAE5E,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAC1C,YAAY,EAAC,UAAU,EAAE,kBAAkB,EAAC,MAAM,eAAe,CAAC;AAElE,OAAO,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAC5C,YAAY,EAAC,mBAAmB,EAAE,kBAAkB,EAAC,MAAM,gBAAgB,CAAC;AAE5E,OAAO,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAC5C,YAAY,EAAC,mBAAmB,EAAE,kBAAkB,EAAC,MAAM,gBAAgB,CAAC;AAE5E,OAAO,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAC5C,YAAY,EACV,mBAAmB,EACnB,kBAAkB,EAClB,oBAAoB,GACrB,MAAM,gBAAgB,CAAC;AAExB,OAAO,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAC5C,YAAY,EAAC,mBAAmB,EAAE,kBAAkB,EAAC,MAAM,gBAAgB,CAAC;AAE5E,OAAO,EAAC,UAAU,EAAC,MAAM,cAAc,CAAC;AACxC,YAAY,EAAC,MAAM,EAAC,MAAM,cAAc,CAAC;AAEzC,OAAO,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAE5C,OAAO,EAAC,eAAe,EAAC,MAAM,mBAAmB,CAAC;AAClD,YAAY,EACV,sBAAsB,EACtB,qBAAqB,EACrB,uBAAuB,GACxB,MAAM,mBAAmB,CAAC;AAC3B,YAAY,EAAC,mBAAmB,EAAE,kBAAkB,EAAC,MAAM,gBAAgB,CAAC;AAE5E,OAAO,EAAC,aAAa,EAAC,MAAM,iBAAiB,CAAC;AAE9C,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAC1C,YAAY,EAAC,kBAAkB,EAAE,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAEzE,OAAO,EAAC,iBAAiB,EAAC,MAAM,qBAAqB,CAAC;AACtD,YAAY,EAAC,mBAAmB,EAAC,MAAM,qBAAqB,CAAC;AAE7D,OAAO,EAAC,aAAa,EAAC,MAAM,iBAAiB,CAAC;AAE9C,OAAO,EAAC,iBAAiB,EAAC,MAAM,qBAAqB,CAAC;AACtD,YAAY,EAAC,oBAAoB,EAAC,MAAM,qBAAqB,CAAC;AAE9D,OAAO,EAAC,gBAAgB,EAAC,MAAM,oBAAoB,CAAC;AACpD,YAAY,EACV,kBAAkB,EAClB,uBAAuB,GACxB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAC5C,YAAY,EAAC,iBAAiB,EAAE,mBAAmB,EAAC,MAAM,gBAAgB,CAAC;AAE3E,OAAO,EACL,qBAAqB,EACrB,qBAAqB,GACtB,MAAM,yBAAyB,CAAC;AACjC,YAAY,EACV,4BAA4B,EAC5B,wBAAwB,GACzB,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAC,iBAAiB,EAAC,MAAM,qBAAqB,CAAC;AACtD,YAAY,EAAC,wBAAwB,EAAC,MAAM,qBAAqB,CAAC;AAElE,OAAO,EAAC,kBAAkB,EAAC,MAAM,sBAAsB,CAAC;AACxD,YAAY,EACV,yBAAyB,EACzB,wBAAwB,GACzB,MAAM,sBAAsB,CAAC;AAE9B,OAAO,EAAC,kBAAkB,EAAC,MAAM,sBAAsB,CAAC;AACxD,YAAY,EACV,eAAe,EACf,yBAAyB,GAC1B,MAAM,sBAAsB,CAAC;AAE9B,OAAO,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAC5C,YAAY,EAAC,mBAAmB,EAAE,oBAAoB,EAAC,MAAM,gBAAgB,CAAC;AAE9E,OAAO,EAAC,aAAa,EAAC,MAAM,iBAAiB,CAAC;AAC9C,OAAO,EAAC,qBAAqB,EAAC,MAAM,yBAAyB,CAAC;AAE9D,OAAO,EAAC,kBAAkB,EAAC,MAAM,sBAAsB,CAAC;AACxD,YAAY,EACV,yBAAyB,EACzB,wBAAwB,EACxB,sBAAsB,EACtB,oBAAoB,GACrB,MAAM,sBAAsB,CAAC"}
@@ -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 {...mergeProps(getContainerProps(), stylex.props(styles.row))}>
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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;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,oBAAoB;IACnC;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED,MAAM,WAAW,wBAAwB;IACvC,4EAA4E;IAC5E,iBAAiB,EAAE,MAAM;QAAC,SAAS,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,aAAa,CAAA;KAAC,CAAC;IACrE,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;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,kBAAkB,CAChC,OAAO,GAAE,yBAA8B,GACtC,wBAAwB,CA0B1B"}
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 {...mergeProps(getContainerProps(), stylex.props(styles.row))}>
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: () => stylex.props(styles.container),
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,CAsMvB"}
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
- focusFirst: () => void;
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":"AA4BA,UAAU,mBAAmB;IAC3B,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,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,UAAU,kBAAkB,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW;IAC9D,YAAY,EAAE;QACZ,OAAO,EAAE,MAAM,IAAI,CAAC;QACpB,YAAY,EAAE,MAAM,IAAI,CAAC;QACzB,YAAY,EAAE,MAAM,IAAI,CAAC;KAC1B,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,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,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,CA2IvB"}
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"}