@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
|
@@ -23,6 +23,7 @@ import "../theme/tokens.stylex.js";
|
|
|
23
23
|
import { colorVars, spacingVars, fontWeightVars, typeScaleVars } from "../theme/tokens.stylex.js";
|
|
24
24
|
import { mergeProps } from "../utils/index.js";
|
|
25
25
|
import { useSideNavCollapse } from "./SideNavCollapseContext.js";
|
|
26
|
+
import { VisuallyHidden } from "../VisuallyHidden/index.js";
|
|
26
27
|
import { themeProps } from "../utils/themeProps.js";
|
|
27
28
|
// =============================================================================
|
|
28
29
|
// Styles
|
|
@@ -102,17 +103,6 @@ export function SideNavSection({
|
|
|
102
103
|
})]
|
|
103
104
|
});
|
|
104
105
|
const shouldHideHeader = isHeaderHidden || isCollapsed;
|
|
105
|
-
const visuallyHiddenStyle = shouldHideHeader ? {
|
|
106
|
-
position: 'absolute',
|
|
107
|
-
width: 1,
|
|
108
|
-
height: 1,
|
|
109
|
-
padding: 0,
|
|
110
|
-
margin: -1,
|
|
111
|
-
overflow: 'hidden',
|
|
112
|
-
clip: 'rect(0, 0, 0, 0)',
|
|
113
|
-
whiteSpace: 'nowrap',
|
|
114
|
-
borderWidth: 0
|
|
115
|
-
} : {};
|
|
116
106
|
return /*#__PURE__*/_jsxs("div", {
|
|
117
107
|
ref: ref,
|
|
118
108
|
...mergeProps(themeProps('side-nav-section'), stylex.props(styles.root, xstyle), className, style),
|
|
@@ -120,12 +110,13 @@ export function SideNavSection({
|
|
|
120
110
|
role: "group",
|
|
121
111
|
"aria-labelledby": titleId,
|
|
122
112
|
"data-testid": testId,
|
|
123
|
-
children: [/*#__PURE__*/_jsx(
|
|
124
|
-
|
|
113
|
+
children: [shouldHideHeader ? /*#__PURE__*/_jsx(VisuallyHidden, {
|
|
114
|
+
as: "div",
|
|
115
|
+
children: headerContent
|
|
116
|
+
}) : /*#__PURE__*/_jsx("div", {
|
|
117
|
+
...{
|
|
125
118
|
className: "x78zum5 x6s0dn4 x1txdalj xf314gf xu0wf1k xt0e3qv x87ps6o"
|
|
126
|
-
},
|
|
127
|
-
style: shouldHideHeader ? visuallyHiddenStyle : undefined
|
|
128
|
-
}),
|
|
119
|
+
},
|
|
129
120
|
children: headerContent
|
|
130
121
|
}), /*#__PURE__*/_jsx("div", {
|
|
131
122
|
...{
|
package/dist/SideNav/index.d.ts
CHANGED
|
@@ -17,7 +17,7 @@ export type { SideNavSectionProps } from './SideNavSection';
|
|
|
17
17
|
export { SideNavCollapseButton } from './SideNavCollapseButton';
|
|
18
18
|
export type { SideNavCollapseButtonProps } from './SideNavCollapseButton';
|
|
19
19
|
export { useSideNavCollapse } from './SideNavCollapseContext';
|
|
20
|
-
export type { SideNavCollapseState, SideNavImperativeCollapseHandle, } from './SideNavCollapseContext';
|
|
20
|
+
export type { SideNavCollapseState, SideNavCollapsibleConfig, SideNavControlledCollapsible, SideNavImperativeCollapseHandle, } from './SideNavCollapseContext';
|
|
21
21
|
export { SideNavRenderContext, useSideNavRenderMode, } from './SideNavRenderContext';
|
|
22
22
|
export type { SideNavRenderMode } from './SideNavRenderContext';
|
|
23
23
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/SideNav/index.ts"],"names":[],"mappings":"AAIA;;;;;;;GAOG;AAEH,OAAO,EAAC,OAAO,EAAC,MAAM,WAAW,CAAC;AAClC,YAAY,EAAC,YAAY,EAAC,MAAM,WAAW,CAAC;AAE5C,OAAO,EAAC,cAAc,EAAC,MAAM,kBAAkB,CAAC;AAChD,YAAY,EAAC,mBAAmB,EAAC,MAAM,kBAAkB,CAAC;AAE1D,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAC1C,YAAY,EAAC,gBAAgB,EAAC,MAAM,eAAe,CAAC;AAEpD,OAAO,EAAC,cAAc,EAAC,MAAM,kBAAkB,CAAC;AAChD,YAAY,EAAC,mBAAmB,EAAC,MAAM,kBAAkB,CAAC;AAE1D,OAAO,EAAC,qBAAqB,EAAC,MAAM,yBAAyB,CAAC;AAC9D,YAAY,EAAC,0BAA0B,EAAC,MAAM,yBAAyB,CAAC;AAExE,OAAO,EAAC,kBAAkB,EAAC,MAAM,0BAA0B,CAAC;AAC5D,YAAY,EACV,oBAAoB,EACpB,+BAA+B,GAChC,MAAM,0BAA0B,CAAC;AAElC,OAAO,EACL,oBAAoB,EACpB,oBAAoB,GACrB,MAAM,wBAAwB,CAAC;AAChC,YAAY,EAAC,iBAAiB,EAAC,MAAM,wBAAwB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/SideNav/index.ts"],"names":[],"mappings":"AAIA;;;;;;;GAOG;AAEH,OAAO,EAAC,OAAO,EAAC,MAAM,WAAW,CAAC;AAClC,YAAY,EAAC,YAAY,EAAC,MAAM,WAAW,CAAC;AAE5C,OAAO,EAAC,cAAc,EAAC,MAAM,kBAAkB,CAAC;AAChD,YAAY,EAAC,mBAAmB,EAAC,MAAM,kBAAkB,CAAC;AAE1D,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAC1C,YAAY,EAAC,gBAAgB,EAAC,MAAM,eAAe,CAAC;AAEpD,OAAO,EAAC,cAAc,EAAC,MAAM,kBAAkB,CAAC;AAChD,YAAY,EAAC,mBAAmB,EAAC,MAAM,kBAAkB,CAAC;AAE1D,OAAO,EAAC,qBAAqB,EAAC,MAAM,yBAAyB,CAAC;AAC9D,YAAY,EAAC,0BAA0B,EAAC,MAAM,yBAAyB,CAAC;AAExE,OAAO,EAAC,kBAAkB,EAAC,MAAM,0BAA0B,CAAC;AAC5D,YAAY,EACV,oBAAoB,EACpB,wBAAwB,EACxB,4BAA4B,EAC5B,+BAA+B,GAChC,MAAM,0BAA0B,CAAC;AAElC,OAAO,EACL,oBAAoB,EACpB,oBAAoB,GACrB,MAAM,wBAAwB,CAAC;AAChC,YAAY,EAAC,iBAAiB,EAAC,MAAM,wBAAwB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../src/Slider/Slider.tsx"],"names":[],"mappings":"AAyCA,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAIhD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAO9C,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAC3C,SAAS,CAAC,cAAc,CAAC,EACzB,UAAU,CACX;IACC,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,qEAAqE;IACrE,KAAK,EAAE,MAAM,CAAC;IACd,8FAA8F;IAC9F,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,kDAAkD;IAClD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qDAAqD;IACrD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;;;;;;;;;;;;;;OAmBG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,oDAAoD;IACpD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,oDAAoD;IACpD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,uCAAuC;IACvC,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,uEAAuE;IACvE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gCAAgC;IAChC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,kCAAkC;IAClC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,iCAAiC;IACjC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,uDAAuD;IACvD,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,uEAAuE;IACvE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACxC,6DAA6D;IAC7D,YAAY,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;IAC3C,8DAA8D;IAC9D,KAAK,CAAC,EAAE;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAC,EAAE,CAAC;IAC1C;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,oCAAoC;IACpC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,iBAAkB,SAAQ,eAAe;IACxD,yCAAyC;IACzC,KAAK,EAAE,MAAM,CAAC;IACd,kDAAkD;IAClD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,iEAAiE;IACjE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC;AAED,MAAM,WAAW,gBAAiB,SAAQ,eAAe;IACvD,8CAA8C;IAC9C,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACxB,kDAAkD;IAClD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,IAAI,CAAC;IAC7C,iEAAiE;IACjE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,IAAI,CAAC;IAChD,8CAA8C;IAC9C,qBAAqB,CAAC,EAAE,MAAM,CAAC;CAChC;AAED,MAAM,MAAM,WAAW,GAAG,iBAAiB,GAAG,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../src/Slider/Slider.tsx"],"names":[],"mappings":"AAyCA,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAIhD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAO9C,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAC3C,SAAS,CAAC,cAAc,CAAC,EACzB,UAAU,CACX;IACC,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,qEAAqE;IACrE,KAAK,EAAE,MAAM,CAAC;IACd,8FAA8F;IAC9F,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,kDAAkD;IAClD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qDAAqD;IACrD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;;;;;;;;;;;;;;OAmBG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,oDAAoD;IACpD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,oDAAoD;IACpD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,uCAAuC;IACvC,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,uEAAuE;IACvE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gCAAgC;IAChC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,kCAAkC;IAClC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,iCAAiC;IACjC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,uDAAuD;IACvD,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,uEAAuE;IACvE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACxC,6DAA6D;IAC7D,YAAY,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;IAC3C,8DAA8D;IAC9D,KAAK,CAAC,EAAE;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAC,EAAE,CAAC;IAC1C;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,oCAAoC;IACpC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,iBAAkB,SAAQ,eAAe;IACxD,yCAAyC;IACzC,KAAK,EAAE,MAAM,CAAC;IACd,kDAAkD;IAClD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,iEAAiE;IACjE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC;AAED,MAAM,WAAW,gBAAiB,SAAQ,eAAe;IACvD,8CAA8C;IAC9C,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACxB,kDAAkD;IAClD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,IAAI,CAAC;IAC7C,iEAAiE;IACjE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,IAAI,CAAC;IAChD,8CAA8C;IAC9C,qBAAqB,CAAC,EAAE,MAAM,CAAC;CAChC;AAED,MAAM,MAAM,WAAW,GAAG,iBAAiB,GAAG,gBAAgB,CAAC;AAiR/D;;;;;;;;GAQG;AACH,wBAAgB,MAAM,CAAC,EAAC,GAAG,EAAE,GAAG,KAAK,EAAC,EAAE,WAAW,+BAmnBlD;yBAnnBe,MAAM"}
|
package/dist/Slider/Slider.js
CHANGED
|
@@ -157,6 +157,42 @@ function getPercent(val, min, max) {
|
|
|
157
157
|
return (val - min) / (max - min) * 100;
|
|
158
158
|
}
|
|
159
159
|
|
|
160
|
+
/**
|
|
161
|
+
* Thumb travel is inset by half a thumb at each end — the geometry a native
|
|
162
|
+
* `input[type=range]` uses — so the thumb stays inside the component box at
|
|
163
|
+
* min and max instead of overhanging it by half its width (#5050). The fill
|
|
164
|
+
* and the marks map through the same inset, and `travelFraction` inverts it,
|
|
165
|
+
* so the thumb tracks the pointer that grabbed it. Both directions read
|
|
166
|
+
* THUMB_SIZE, so a theme cannot resize the thumb through CSS alone.
|
|
167
|
+
*/
|
|
168
|
+
const THUMB_INSET = THUMB_SIZE / 2;
|
|
169
|
+
function insetPosition(percent) {
|
|
170
|
+
return cssLength(percent, THUMB_INSET - percent / 100 * THUMB_SIZE);
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
/** Distance between two inset positions; the inset itself cancels out. */
|
|
174
|
+
function insetSpan(fromPercent, toPercent) {
|
|
175
|
+
const delta = toPercent - fromPercent;
|
|
176
|
+
return cssLength(delta, -(delta / 100) * THUMB_SIZE);
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
/** Inverse of `insetPosition`: an offset from the box start back to 0–1. */
|
|
180
|
+
function travelFraction(offset, size) {
|
|
181
|
+
const travel = size - THUMB_SIZE;
|
|
182
|
+
if (travel > 0) {
|
|
183
|
+
return (offset - THUMB_INSET) / travel;
|
|
184
|
+
}
|
|
185
|
+
// Narrower than the thumb, so there is no travel to map onto: fall back to
|
|
186
|
+
// the raw fraction rather than dividing by zero.
|
|
187
|
+
return size > 0 ? offset / size : 0;
|
|
188
|
+
}
|
|
189
|
+
function cssLength(percent, px) {
|
|
190
|
+
// Percentages of the box and step arithmetic both carry binary
|
|
191
|
+
// floating-point error into the DOM (`calc(33% + 3.3999999999999995px)`).
|
|
192
|
+
const round = n => Number(n.toFixed(3));
|
|
193
|
+
return `calc(${round(percent)}% ${px < 0 ? '-' : '+'} ${Math.abs(round(px))}px)`;
|
|
194
|
+
}
|
|
195
|
+
|
|
160
196
|
// =============================================================================
|
|
161
197
|
// Component
|
|
162
198
|
// =============================================================================
|
|
@@ -263,15 +299,19 @@ export function Slider({
|
|
|
263
299
|
return min;
|
|
264
300
|
}
|
|
265
301
|
const rect = track.getBoundingClientRect();
|
|
302
|
+
|
|
303
|
+
// Inverse of `insetPosition`: the pointer maps onto the thumb's travel
|
|
304
|
+
// (the box minus half a thumb at each end), so pressing on the thumb
|
|
305
|
+
// leaves it where it is instead of jumping.
|
|
266
306
|
let percent;
|
|
267
307
|
if (isHorizontal) {
|
|
268
308
|
// In RTL the inline-start (value = min) is the right edge, so measure
|
|
269
309
|
// the pointer fraction from the right instead of the left. Detected
|
|
270
310
|
// from the track's computed direction (lazy, only on pointer move).
|
|
271
|
-
percent = isRtlElement(track) ?
|
|
311
|
+
percent = travelFraction(isRtlElement(track) ? rect.right - clientX : clientX - rect.left, rect.width);
|
|
272
312
|
} else {
|
|
273
313
|
// Vertical: bottom = min, top = max
|
|
274
|
-
percent = 1 - (clientY - rect.top
|
|
314
|
+
percent = 1 - travelFraction(clientY - rect.top, rect.height);
|
|
275
315
|
}
|
|
276
316
|
percent = clamp(percent, 0, 1);
|
|
277
317
|
const raw = min + percent * (max - min);
|
|
@@ -433,9 +473,9 @@ export function Slider({
|
|
|
433
473
|
const val = values[thumbIndex];
|
|
434
474
|
const percent = getPercent(val, min, max);
|
|
435
475
|
const positionStyle = isHorizontal ? {
|
|
436
|
-
insetInlineStart:
|
|
476
|
+
insetInlineStart: insetPosition(percent)
|
|
437
477
|
} : {
|
|
438
|
-
bottom:
|
|
478
|
+
bottom: insetPosition(percent),
|
|
439
479
|
left: '50%'
|
|
440
480
|
};
|
|
441
481
|
|
|
@@ -495,7 +535,8 @@ export function Slider({
|
|
|
495
535
|
return thumbElement;
|
|
496
536
|
};
|
|
497
537
|
|
|
498
|
-
// Filled track position
|
|
538
|
+
// Filled track position — ends at the thumb centre, so it uses the same
|
|
539
|
+
// inset mapping as the thumb.
|
|
499
540
|
const filledStyle = (() => {
|
|
500
541
|
if (isRange) {
|
|
501
542
|
const [v0, v1] = values;
|
|
@@ -503,25 +544,25 @@ export function Slider({
|
|
|
503
544
|
const p1 = getPercent(v1, min, max);
|
|
504
545
|
if (isHorizontal) {
|
|
505
546
|
return {
|
|
506
|
-
insetInlineStart:
|
|
507
|
-
width:
|
|
547
|
+
insetInlineStart: insetPosition(p0),
|
|
548
|
+
width: insetSpan(p0, p1)
|
|
508
549
|
};
|
|
509
550
|
}
|
|
510
551
|
return {
|
|
511
|
-
bottom:
|
|
512
|
-
height:
|
|
552
|
+
bottom: insetPosition(p0),
|
|
553
|
+
height: insetSpan(p0, p1)
|
|
513
554
|
};
|
|
514
555
|
}
|
|
515
556
|
const p = getPercent(values[0], min, max);
|
|
516
557
|
if (isHorizontal) {
|
|
517
558
|
return {
|
|
518
559
|
insetInlineStart: '0%',
|
|
519
|
-
width:
|
|
560
|
+
width: insetPosition(p)
|
|
520
561
|
};
|
|
521
562
|
}
|
|
522
563
|
return {
|
|
523
564
|
bottom: '0%',
|
|
524
|
-
height:
|
|
565
|
+
height: insetPosition(p)
|
|
525
566
|
};
|
|
526
567
|
})();
|
|
527
568
|
|
|
@@ -592,13 +633,13 @@ export function Slider({
|
|
|
592
633
|
className: "x1n2onr6 x78zum5 x6s0dn4 x1iyjqo2 x5ve5x3 x87ps6o xc8icb0 xw4jnvo x1ymw6g xdt5ytf xl56j7k x1ypdohk"
|
|
593
634
|
},
|
|
594
635
|
2: {
|
|
595
|
-
className: "x1n2onr6 x78zum5 x6s0dn4 x1iyjqo2 x5ve5x3 x87ps6o xc8icb0 x1qx5ct2 xh8yej3 x1ypdohk"
|
|
636
|
+
className: "x1n2onr6 x78zum5 x6s0dn4 x1iyjqo2 x5ve5x3 x87ps6o xc8icb0 x1qx5ct2 x80b3aj xh8yej3 x1ypdohk"
|
|
596
637
|
},
|
|
597
638
|
1: {
|
|
598
639
|
className: "x1n2onr6 x78zum5 x6s0dn4 x1iyjqo2 x5ve5x3 x87ps6o xc8icb0 xw4jnvo x1ymw6g xdt5ytf xl56j7k xbyyjgo x1h6gzvc"
|
|
599
640
|
},
|
|
600
641
|
3: {
|
|
601
|
-
className: "x1n2onr6 x78zum5 x6s0dn4 x1iyjqo2 x5ve5x3 x87ps6o xc8icb0 x1qx5ct2 xh8yej3 xbyyjgo x1h6gzvc"
|
|
642
|
+
className: "x1n2onr6 x78zum5 x6s0dn4 x1iyjqo2 x5ve5x3 x87ps6o xc8icb0 x1qx5ct2 x80b3aj xh8yej3 xbyyjgo x1h6gzvc"
|
|
602
643
|
}
|
|
603
644
|
}[!!isHorizontal << 1 | !!isDisabled << 0],
|
|
604
645
|
children: [/*#__PURE__*/_jsx("div", {
|
|
@@ -624,9 +665,9 @@ export function Slider({
|
|
|
624
665
|
children: marks.map(mark => {
|
|
625
666
|
const percent = getPercent(mark.value, min, max);
|
|
626
667
|
const markPos = isHorizontal ? {
|
|
627
|
-
insetInlineStart:
|
|
668
|
+
insetInlineStart: insetPosition(percent)
|
|
628
669
|
} : {
|
|
629
|
-
bottom:
|
|
670
|
+
bottom: insetPosition(percent)
|
|
630
671
|
};
|
|
631
672
|
return /*#__PURE__*/_jsxs("div", {
|
|
632
673
|
children: [/*#__PURE__*/_jsx("div", {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../src/Switch/Switch.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAIL,KAAK,WAAW,EAChB,KAAK,UAAU,EACf,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAcf,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AACtC,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAKhD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../src/Switch/Switch.tsx"],"names":[],"mappings":"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"}
|
package/dist/Switch/Switch.js
CHANGED
|
@@ -136,6 +136,11 @@ const styles = {
|
|
|
136
136
|
kSiTet: "xg01cxk",
|
|
137
137
|
kkrTdU: "x1ypdohk",
|
|
138
138
|
kY2c9j: "x1vjfegm",
|
|
139
|
+
k7Eaqz: "xkagaj0",
|
|
140
|
+
kAzted: "x80b3aj",
|
|
141
|
+
k87sOh: "xijlfn0",
|
|
142
|
+
kLqNvP: "x1hsn8va",
|
|
143
|
+
k3aq6I: "x8i4i9p",
|
|
139
144
|
$$css: true
|
|
140
145
|
},
|
|
141
146
|
inputDisabled: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Thumbnail.d.ts","sourceRoot":"","sources":["../../src/Thumbnail/Thumbnail.tsx"],"names":[],"mappings":"AA2CA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAM5C,MAAM,WAAW,cAAe,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC/D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;;;;;;;OASG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACzC;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC;;;OAGG;IACH;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;;;;OASG;IACH,YAAY,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAClC;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;
|
|
1
|
+
{"version":3,"file":"Thumbnail.d.ts","sourceRoot":"","sources":["../../src/Thumbnail/Thumbnail.tsx"],"names":[],"mappings":"AA2CA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAM5C,MAAM,WAAW,cAAe,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC/D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;;;;;;;OASG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACzC;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC;;;OAGG;IACH;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;;;;OASG;IACH,YAAY,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAClC;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAqJD;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,SAAS,CAAC,EACxB,GAAG,EACH,GAAG,EACH,KAAK,EACL,QAAQ,EACR,OAAO,EACP,SAAiB,EACjB,UAAkB,EAClB,YAAsB,EACtB,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,EACH,GAAG,KAAK,EACT,EAAE,cAAc,+BA+IhB;yBA9Je,SAAS"}
|
|
@@ -86,10 +86,15 @@ const styles = {
|
|
|
86
86
|
},
|
|
87
87
|
removeButtonOverrides: {
|
|
88
88
|
"--_button-radius": "xh8ntw8",
|
|
89
|
+
kVAEAm: "x1n2onr6",
|
|
89
90
|
kZKoxP: "x1qx5ct2",
|
|
90
91
|
k7Eaqz: "xt4ypqs",
|
|
91
92
|
kWkggS: "x1u4601x",
|
|
92
93
|
kMwMTN: "x9e3rv5",
|
|
94
|
+
"--_thumbnail-hit-inset": "x1ur4yav x1h9khjt",
|
|
95
|
+
k5JduY: "x1s928wv",
|
|
96
|
+
kwXMNM: "x1j6awrg",
|
|
97
|
+
kv0HGH: "xeu5z55",
|
|
93
98
|
$$css: true
|
|
94
99
|
},
|
|
95
100
|
disabled: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TopNavHeading.d.ts","sourceRoot":"","sources":["../../src/TopNav/TopNavHeading.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,EAAkB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAatD,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAErD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAiL5C,MAAM,WAAW,kBAAmB,SAAQ,SAAS,CAAC,WAAW,CAAC;IAChE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7B;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;;OAIG;IACH,EAAE,CAAC,EAAE,iBAAiB,CAAC;CACxB;AAMD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,aAAa,CAAC,EAC5B,EAAE,EACF,IAAI,EACJ,SAAS,EACT,OAAO,EACP,WAAW,EACX,YAAY,EACZ,gBAAgB,EAChB,UAAU,EACV,cAAc,EACd,gBAAgB,EAChB,IAAI,EACJ,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,EACH,GAAG,KAAK,EACT,EAAE,kBAAkB,+
|
|
1
|
+
{"version":3,"file":"TopNavHeading.d.ts","sourceRoot":"","sources":["../../src/TopNav/TopNavHeading.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,EAAkB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAatD,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAErD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAiL5C,MAAM,WAAW,kBAAmB,SAAQ,SAAS,CAAC,WAAW,CAAC;IAChE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7B;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;;OAIG;IACH,EAAE,CAAC,EAAE,iBAAiB,CAAC;CACxB;AAMD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,aAAa,CAAC,EAC5B,EAAE,EACF,IAAI,EACJ,SAAS,EACT,OAAO,EACP,WAAW,EACX,YAAY,EACZ,gBAAgB,EAChB,UAAU,EACV,cAAc,EACd,gBAAgB,EAChB,IAAI,EACJ,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,EACH,GAAG,KAAK,EACT,EAAE,kBAAkB,+BAwYpB;yBA1Ze,aAAa"}
|
|
@@ -158,14 +158,12 @@ export function TopNavHeading({
|
|
|
158
158
|
role: 'none',
|
|
159
159
|
hasCloseButton: false
|
|
160
160
|
});
|
|
161
|
-
const closeMenuCtx = useMemo(() => ({
|
|
162
|
-
closeMenu: popover.hide
|
|
163
|
-
}), [popover.hide]);
|
|
164
161
|
const {
|
|
165
162
|
triggerProps,
|
|
166
163
|
contentProps,
|
|
167
164
|
menuRef,
|
|
168
|
-
setTriggerEl
|
|
165
|
+
setTriggerEl,
|
|
166
|
+
close: closeMenu
|
|
169
167
|
} = useMenuHover({
|
|
170
168
|
show: popover.show,
|
|
171
169
|
hide: popover.hide,
|
|
@@ -173,7 +171,14 @@ export function TopNavHeading({
|
|
|
173
171
|
isEnabled: !!menu,
|
|
174
172
|
showDelay: 0
|
|
175
173
|
});
|
|
176
|
-
const
|
|
174
|
+
const closeMenuCtx = useMemo(() => ({
|
|
175
|
+
closeMenu
|
|
176
|
+
}), [closeMenu]);
|
|
177
|
+
|
|
178
|
+
// setTriggerEl belongs on the chevron button, not this root: it is the
|
|
179
|
+
// focus-restore target and a <div> cannot take focus. triggerRef stays here
|
|
180
|
+
// because the panel anchors to the whole heading.
|
|
181
|
+
const setRef = mergeRefs(rootRef, ref, menu ? popover.triggerRef : undefined);
|
|
177
182
|
const showChevron = !!menu;
|
|
178
183
|
const hasAnyHref = !!(headingHref || superheadingHref || subheadingHref);
|
|
179
184
|
|
|
@@ -247,7 +252,8 @@ export function TopNavHeading({
|
|
|
247
252
|
...{
|
|
248
253
|
className: "x78zum5 x6s0dn4 x1txdalj xh8yej3 xjbqb8w xjb2p0i x1qlqyl8 x1heor9g x1yc453h xkoleio x12gdq22 x1betex2 x1djylfy xt970qd xcsaf9d x1p37lm5 xhrcg97 x1ypdohk"
|
|
249
254
|
},
|
|
250
|
-
|
|
255
|
+
// A close affordance, not the trigger: dismiss only.
|
|
256
|
+
onClick: closeMenu,
|
|
251
257
|
children: [logo && /*#__PURE__*/_jsx("span", {
|
|
252
258
|
...{
|
|
253
259
|
className: "x2lah0s x78zum5 x6s0dn4 xl56j7k"
|
|
@@ -315,6 +321,7 @@ export function TopNavHeading({
|
|
|
315
321
|
// Stays a <button>: this box is the popover trigger, so it carries
|
|
316
322
|
// the accessible name and handlers — only the glyph moves to Icon.
|
|
317
323
|
_jsx("button", {
|
|
324
|
+
ref: setTriggerEl,
|
|
318
325
|
type: "button",
|
|
319
326
|
"aria-label": t('@astryx.topNav.heading.openMenu'),
|
|
320
327
|
onClick: e => {
|
|
@@ -381,6 +388,7 @@ export function TopNavHeading({
|
|
|
381
388
|
// carries the accessible name and handlers — only the glyph
|
|
382
389
|
// moves to Icon.
|
|
383
390
|
_jsx("button", {
|
|
391
|
+
ref: setTriggerEl,
|
|
384
392
|
type: "button",
|
|
385
393
|
"aria-label": t('@astryx.topNav.heading.openMenu'),
|
|
386
394
|
onClick: e => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TopNavMegaMenu.d.ts","sourceRoot":"","sources":["../../src/TopNav/TopNavMegaMenu.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEH,OAAO,KAAK,EAAE,EAKZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"TopNavMegaMenu.d.ts","sourceRoot":"","sources":["../../src/TopNav/TopNavMegaMenu.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEH,OAAO,KAAK,EAAE,EAKZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAkBf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAoM5C,MAAM,WAAW,mBAAoB,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IACvE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC,kDAAkD;IAClD,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,gEAAgE;IAChE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yEAAyE;IACzE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C;AAMD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,wBAAgB,cAAc,CAAC,EAC7B,GAAG,EACH,KAAK,EACL,KAAK,EACL,QAAQ,EACR,KAAW,EACX,SAAe,EACf,YAAY,GACb,EAAE,mBAAmB,4BA+BrB;yBAvCe,cAAc"}
|
|
@@ -34,6 +34,7 @@ import * as stylex from '@stylexjs/stylex';
|
|
|
34
34
|
import "../theme/tokens.stylex.js";
|
|
35
35
|
import { colorVars, spacingVars, radiusVars, durationVars, easeVars, fontWeightVars, shadowVars, typeScaleVars, borderVars } from "../theme/tokens.stylex.js";
|
|
36
36
|
import { usePopover } from "../Popover/usePopover.js";
|
|
37
|
+
import { useMenuHover } from "../hooks/useMenuHover.js";
|
|
37
38
|
import { Grid } from "../Grid/Grid.js";
|
|
38
39
|
import { Icon } from "../Icon/index.js";
|
|
39
40
|
import { mergeProps, mergeRefs } from "../utils/index.js";
|
|
@@ -233,7 +234,8 @@ TopNavMegaMenu.displayName = 'TopNavMegaMenu';
|
|
|
233
234
|
// DefaultMegaMenu — desktop popover mode
|
|
234
235
|
// =============================================================================
|
|
235
236
|
|
|
236
|
-
|
|
237
|
+
/** The panel is a grid of links, not `role="menuitem"` rows. */
|
|
238
|
+
const PANEL_ITEM_SELECTOR = 'a[href], button:not([disabled]), [tabindex]:not([tabindex="-1"])';
|
|
237
239
|
function DefaultMegaMenu({
|
|
238
240
|
ref,
|
|
239
241
|
label,
|
|
@@ -244,17 +246,11 @@ function DefaultMegaMenu({
|
|
|
244
246
|
onOpenChange
|
|
245
247
|
}) {
|
|
246
248
|
const slot = useTopNavSlot();
|
|
247
|
-
const showTimeoutRef = useRef(null);
|
|
248
|
-
const hideTimeoutRef = useRef(null);
|
|
249
249
|
const triggerButtonRef = useRef(null);
|
|
250
|
-
const hoverOpenedAtRef = useRef(0);
|
|
251
|
-
const stickyRef = useRef(false);
|
|
252
250
|
const handlePopoverShow = useCallback(() => {
|
|
253
251
|
onOpenChange?.(true);
|
|
254
252
|
}, [onOpenChange]);
|
|
255
253
|
const handlePopoverHide = useCallback(() => {
|
|
256
|
-
hoverOpenedAtRef.current = 0;
|
|
257
|
-
stickyRef.current = false;
|
|
258
254
|
onOpenChange?.(false);
|
|
259
255
|
}, [onOpenChange]);
|
|
260
256
|
const popover = usePopover({
|
|
@@ -288,93 +284,29 @@ function DefaultMegaMenu({
|
|
|
288
284
|
popover.triggerRef(null);
|
|
289
285
|
};
|
|
290
286
|
}, [popover]);
|
|
291
|
-
const
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
}, delay);
|
|
309
|
-
}, [clearTimeouts, delay, popover]);
|
|
310
|
-
const scheduleHide = useCallback(() => {
|
|
311
|
-
clearTimeouts();
|
|
312
|
-
hideTimeoutRef.current = setTimeout(() => {
|
|
313
|
-
popover.hide();
|
|
314
|
-
}, hideDelay);
|
|
315
|
-
}, [clearTimeouts, hideDelay, popover]);
|
|
316
|
-
const focusFirstPanelItem = useCallback(() => {
|
|
317
|
-
popover.contentRef.current?.querySelector('a[href], button:not([disabled]), [tabindex]:not([tabindex="-1"])')?.focus();
|
|
318
|
-
}, [popover.contentRef]);
|
|
319
|
-
const handleTriggerMouseEnter = useCallback(() => {
|
|
320
|
-
clearTimeouts();
|
|
321
|
-
if (!popover.isOpen) {
|
|
322
|
-
scheduleShow();
|
|
323
|
-
}
|
|
324
|
-
}, [clearTimeouts, popover.isOpen, scheduleShow]);
|
|
325
|
-
const handlePanelMouseEnter = useCallback(() => {
|
|
326
|
-
clearTimeouts();
|
|
327
|
-
}, [clearTimeouts]);
|
|
328
|
-
const handleMouseLeave = useCallback(() => {
|
|
329
|
-
if (!stickyRef.current) {
|
|
330
|
-
scheduleHide();
|
|
331
|
-
}
|
|
332
|
-
}, [scheduleHide]);
|
|
333
|
-
const handleClick = useCallback(event => {
|
|
334
|
-
// Cancel the native invoker toggle so this guard is the single source of
|
|
335
|
-
// truth for trigger activation. popoverTarget still establishes the
|
|
336
|
-
// invoker relationship used by native light-dismiss and stacking.
|
|
337
|
-
event.preventDefault();
|
|
338
|
-
clearTimeouts();
|
|
339
|
-
if (event.detail === 0) {
|
|
340
|
-
stickyRef.current = true;
|
|
341
|
-
hoverOpenedAtRef.current = 0;
|
|
342
|
-
if (popover.isOpen) {
|
|
343
|
-
focusFirstPanelItem();
|
|
344
|
-
} else {
|
|
345
|
-
popover.show();
|
|
346
|
-
}
|
|
347
|
-
} else if (!popover.isOpen) {
|
|
348
|
-
stickyRef.current = true;
|
|
349
|
-
popover.show({
|
|
350
|
-
skipAutoFocus: true
|
|
351
|
-
});
|
|
352
|
-
} else if (Date.now() - hoverOpenedAtRef.current < CLICK_GUARD_MS) {
|
|
353
|
-
// A click that naturally follows a hover-open confirms the open state
|
|
354
|
-
// instead of toggling the panel shut. From here it behaves like any
|
|
355
|
-
// other click-open and stays pinned until explicit dismissal.
|
|
356
|
-
stickyRef.current = true;
|
|
357
|
-
hoverOpenedAtRef.current = 0;
|
|
358
|
-
} else {
|
|
359
|
-
popover.hide();
|
|
360
|
-
triggerButtonRef.current?.focus();
|
|
361
|
-
}
|
|
362
|
-
}, [clearTimeouts, focusFirstPanelItem, popover]);
|
|
363
|
-
useEffect(() => {
|
|
364
|
-
return () => {
|
|
365
|
-
clearTimeouts();
|
|
366
|
-
};
|
|
367
|
-
}, [clearTimeouts]);
|
|
287
|
+
const {
|
|
288
|
+
triggerProps: hoverTriggerProps,
|
|
289
|
+
contentProps,
|
|
290
|
+
menuRef,
|
|
291
|
+
setTriggerEl
|
|
292
|
+
} = useMenuHover({
|
|
293
|
+
show: popover.show,
|
|
294
|
+
hide: popover.hide,
|
|
295
|
+
isOpen: popover.isOpen,
|
|
296
|
+
isEnabled: true,
|
|
297
|
+
showDelay: delay,
|
|
298
|
+
hideDelay,
|
|
299
|
+
itemSelector: PANEL_ITEM_SELECTOR,
|
|
300
|
+
// Trigger sits outside an auto popover; the invoker relationship exempts it
|
|
301
|
+
// from light dismiss.
|
|
302
|
+
popoverId: popover.id
|
|
303
|
+
});
|
|
368
304
|
return /*#__PURE__*/_jsxs(_Fragment, {
|
|
369
305
|
children: [/*#__PURE__*/_jsxs("button", {
|
|
370
|
-
ref: mergeRefs(triggerButtonRef, ref),
|
|
306
|
+
ref: mergeRefs(triggerButtonRef, setTriggerEl, ref),
|
|
371
307
|
type: "button",
|
|
372
308
|
...popover.triggerProps,
|
|
373
|
-
|
|
374
|
-
popoverTarget: popover.id,
|
|
375
|
-
onClick: handleClick,
|
|
376
|
-
onMouseEnter: handleTriggerMouseEnter,
|
|
377
|
-
onMouseLeave: handleMouseLeave,
|
|
309
|
+
...hoverTriggerProps,
|
|
378
310
|
...mergeProps(themeProps('top-nav-mega-menu'), focusOutlineProps.focusVisible(styles.trigger, popover.isOpen && styles.triggerOpen)),
|
|
379
311
|
children: [label, /*#__PURE__*/_jsx(Icon, {
|
|
380
312
|
icon: "chevronDown",
|
|
@@ -386,10 +318,10 @@ function DefaultMegaMenu({
|
|
|
386
318
|
// role="group" — a mega menu is a browsing grid of links, not an
|
|
387
319
|
// ARIA menu of menuitems (per the WAI-ARIA APG, the menu role is
|
|
388
320
|
// for action menus; link mega menus are the documented anti-case).
|
|
321
|
+
ref: menuRef,
|
|
389
322
|
role: "group",
|
|
390
323
|
"aria-label": label,
|
|
391
|
-
|
|
392
|
-
onMouseLeave: handleMouseLeave,
|
|
324
|
+
...contentProps,
|
|
393
325
|
...{
|
|
394
326
|
className: "x1prclbq x11xkdxz x13fuv20 x1pc3f07 x1hviunn x1i5ehqx xb3r6kr x78zum5 xdt5ytf x2lwn1j"
|
|
395
327
|
},
|
|
@@ -439,7 +371,7 @@ function DrawerMegaMenu({
|
|
|
439
371
|
"aria-controls": `${menuId}-items`,
|
|
440
372
|
...mergeProps(themeProps('top-nav-mega-menu', {
|
|
441
373
|
mode: 'drawer'
|
|
442
|
-
}),
|
|
374
|
+
}), focusOutlineProps.focusVisible(navItemStyles.item, styles.drawerHeader)),
|
|
443
375
|
children: [label, /*#__PURE__*/_jsx(Icon, {
|
|
444
376
|
icon: "chevronDown",
|
|
445
377
|
size: "sm",
|
|
@@ -126,7 +126,7 @@ export function TopNavMegaMenuItem({
|
|
|
126
126
|
...elementProps,
|
|
127
127
|
...mergeProps(themeProps('top-nav-mega-menu-item', {
|
|
128
128
|
mode: 'drawer'
|
|
129
|
-
}),
|
|
129
|
+
}), focusOutlineProps.focusVisible(navItemStyles.item, styles.drawerItem)),
|
|
130
130
|
children: [icon && /*#__PURE__*/_jsx("div", {
|
|
131
131
|
...{
|
|
132
132
|
className: "x78zum5 x6s0dn4 xl56j7k x1td3qas x10w6t97 xh6dtrn x17x4s8c x2lah0s xv9yike xjc2qm6"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TopNavMenu.d.ts","sourceRoot":"","sources":["../../src/TopNav/TopNavMenu.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAE,EAKZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAQf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA8L5C;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAMD,MAAM,WAAW,eAAgB,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IACnE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,KAAK,EAAE,kBAAkB,EAAE,CAAC;IAE5B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAMD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AAEH,wBAAgB,UAAU,CAAC,EACzB,GAAG,EACH,KAAK,EACL,KAAK,EACL,KAAW,EACX,SAAe,GAChB,EAAE,eAAe,
|
|
1
|
+
{"version":3,"file":"TopNavMenu.d.ts","sourceRoot":"","sources":["../../src/TopNav/TopNavMenu.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAE,EAKZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAQf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA8L5C;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAMD,MAAM,WAAW,eAAgB,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IACnE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,KAAK,EAAE,kBAAkB,EAAE,CAAC;IAE5B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAMD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AAEH,wBAAgB,UAAU,CAAC,EACzB,GAAG,EACH,KAAK,EACL,KAAK,EACL,KAAW,EACX,SAAe,GAChB,EAAE,eAAe,4BA4OjB;yBAlPe,UAAU"}
|
|
@@ -197,14 +197,18 @@ export function TopNavMenu({
|
|
|
197
197
|
triggerProps,
|
|
198
198
|
contentProps,
|
|
199
199
|
menuRef,
|
|
200
|
-
setTriggerEl
|
|
200
|
+
setTriggerEl,
|
|
201
|
+
close
|
|
201
202
|
} = useMenuHover({
|
|
202
203
|
show: popover.show,
|
|
203
204
|
hide: popover.hide,
|
|
204
205
|
isOpen: popover.isOpen,
|
|
205
206
|
isEnabled: true,
|
|
206
207
|
showDelay: delay,
|
|
207
|
-
hideDelay
|
|
208
|
+
hideDelay,
|
|
209
|
+
// Trigger sits outside an auto popover; the invoker relationship exempts
|
|
210
|
+
// it from light dismiss.
|
|
211
|
+
popoverId: popover.id
|
|
208
212
|
});
|
|
209
213
|
const setTriggerRef = mergeRefs(triggerButtonRef, popover.triggerRef, setTriggerEl, ref);
|
|
210
214
|
|
|
@@ -221,7 +225,8 @@ export function TopNavMenu({
|
|
|
221
225
|
} = useListFocus({
|
|
222
226
|
itemSelector: '[role="menuitem"]',
|
|
223
227
|
hasRovingTabIndex: true,
|
|
224
|
-
|
|
228
|
+
// Not popover.hide: Escape must also restore focus to the trigger.
|
|
229
|
+
onEscape: close
|
|
225
230
|
});
|
|
226
231
|
|
|
227
232
|
// First-character typeahead over the menu items (menus-11).
|
|
@@ -272,7 +277,7 @@ export function TopNavMenu({
|
|
|
272
277
|
onClick: () => setDrawerExpanded(v => !v),
|
|
273
278
|
"aria-expanded": drawerExpanded,
|
|
274
279
|
"aria-controls": `${menuId}-items`,
|
|
275
|
-
...
|
|
280
|
+
...focusOutlineProps.focusVisible(navItemStyles.item, drawerStyles.header),
|
|
276
281
|
children: [label, /*#__PURE__*/_jsx(Icon, {
|
|
277
282
|
icon: "chevronDown",
|
|
278
283
|
size: "sm",
|
|
@@ -299,7 +304,7 @@ export function TopNavMenu({
|
|
|
299
304
|
item.onClick?.();
|
|
300
305
|
closeMobileNav();
|
|
301
306
|
},
|
|
302
|
-
...
|
|
307
|
+
...focusOutlineProps.focusVisible(navItemStyles.item, drawerStyles.item),
|
|
303
308
|
children: [item.icon && /*#__PURE__*/_jsx("span", {
|
|
304
309
|
...{
|
|
305
310
|
className: "x2lah0s xw4jnvo x1qx5ct2"
|