@shohojdhara/atomix 0.3.11 → 0.3.12
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/dist/atomix.css +9 -6
- package/dist/atomix.css.map +1 -1
- package/dist/atomix.min.css +9 -6
- package/dist/atomix.min.css.map +1 -1
- package/dist/charts.js +82 -60
- package/dist/charts.js.map +1 -1
- package/dist/core.js +82 -60
- package/dist/core.js.map +1 -1
- package/dist/forms.js +82 -60
- package/dist/forms.js.map +1 -1
- package/dist/heavy.js +82 -60
- package/dist/heavy.js.map +1 -1
- package/dist/index.d.ts +9 -27
- package/dist/index.esm.js +151 -147
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +151 -147
- package/dist/index.js.map +1 -1
- package/dist/index.min.js +1 -1
- package/dist/index.min.js.map +1 -1
- package/package.json +1 -1
- package/src/components/AtomixGlass/AtomixGlass.tsx +124 -127
- package/src/components/AtomixGlass/AtomixGlassContainer.tsx +28 -32
- package/src/components/AtomixGlass/GlassFilter.tsx +15 -4
- package/src/components/EdgePanel/EdgePanel.stories.tsx +2 -7
- package/src/components/EdgePanel/EdgePanel.tsx +0 -10
- package/src/components/Form/Radio.stories.tsx +235 -103
- package/src/components/Navigation/Nav/NavDropdown.tsx +8 -4
- package/src/components/Navigation/SideMenu/SideMenu.tsx +2 -22
- package/src/components/Navigation/SideMenu/SideMenuItem.tsx +11 -15
- package/src/lib/types/components.ts +2 -26
- package/src/styles/06-components/_components.edge-panel.scss +4 -4
- package/src/styles/06-components/_components.nav.scss +3 -0
package/dist/index.js
CHANGED
|
@@ -1715,7 +1715,6 @@ const {CONSTANTS: CONSTANTS$1} = ATOMIX_GLASS, calculateDistance = (pos1, pos2)
|
|
|
1715
1715
|
inset: 0
|
|
1716
1716
|
},
|
|
1717
1717
|
"aria-hidden": "true",
|
|
1718
|
-
suppressHydrationWarning: !0,
|
|
1719
1718
|
children: jsxRuntime.jsxs("defs", {
|
|
1720
1719
|
children: [ jsxRuntime.jsxs("radialGradient", {
|
|
1721
1720
|
id: `${id}-edge-mask`,
|
|
@@ -1743,7 +1742,7 @@ const {CONSTANTS: CONSTANTS$1} = ATOMIX_GLASS, calculateDistance = (pos1, pos2)
|
|
|
1743
1742
|
height: "170%",
|
|
1744
1743
|
colorInterpolationFilters: "sRGB",
|
|
1745
1744
|
children: [ jsxRuntime.jsx("feImage", {
|
|
1746
|
-
id:
|
|
1745
|
+
id: `${id}-image`,
|
|
1747
1746
|
x: "0",
|
|
1748
1747
|
y: "0",
|
|
1749
1748
|
width: "100%",
|
|
@@ -1860,10 +1859,10 @@ const GlassFilter = React.memo(GlassFilterComponent, ((prevProps, nextProps) =>
|
|
|
1860
1859
|
height: 0
|
|
1861
1860
|
}, onClick: onClick, mode: mode = "standard", effectiveDisableEffects: effectiveDisableEffects = !1, effectiveReducedMotion: effectiveReducedMotion = !1, shaderVariant: shaderVariant = "liquidGlass", enableLiquidBlur: enableLiquidBlur = !1, elasticity: elasticity = 0, contentRef: contentRef}, ref) => {
|
|
1862
1861
|
// Generate a stable, deterministic ID for SSR compatibility
|
|
1863
|
-
//
|
|
1864
|
-
|
|
1865
|
-
//
|
|
1866
|
-
|
|
1862
|
+
// Use a counter-based approach to avoid hydration mismatches
|
|
1863
|
+
const [filterId] = React.useState((() =>
|
|
1864
|
+
// Use a simple counter for deterministic IDs
|
|
1865
|
+
"undefined" == typeof window ? `atomix-glass-filter-ssr-${Math.random().toString(36).substring(2, 11)}` : `atomix-glass-filter-${Date.now()}-${Math.random().toString(36).substring(2, 11)}`)), [shaderMapUrl, setShaderMapUrl] = React.useState(""), shaderGeneratorRef = React.useRef(null), shaderUtilsRef = React.useRef(null), shaderDebounceTimeoutRef = React.useRef(null);
|
|
1867
1866
|
// Lazy load shader utilities only when shader mode is needed
|
|
1868
1867
|
React.useEffect((() => {
|
|
1869
1868
|
"shader" === mode ?
|
|
@@ -1876,7 +1875,7 @@ const GlassFilter = React.memo(GlassFilterComponent, ((prevProps, nextProps) =>
|
|
|
1876
1875
|
fragmentShaders: shaderUtils.fragmentShaders
|
|
1877
1876
|
};
|
|
1878
1877
|
})).catch((error => {
|
|
1879
|
-
console.warn("AtomixGlassContainer: Error loading shader utilities", error);
|
|
1878
|
+
console.warn("AtomixGlassContainer: Error loading shader utilities", String(error).replace(/[\r\n]/g, ""));
|
|
1880
1879
|
})) :
|
|
1881
1880
|
// Clear shader utils when not in shader mode to free memory
|
|
1882
1881
|
shaderUtilsRef.current = null;
|
|
@@ -2066,7 +2065,6 @@ const GlassFilter = React.memo(GlassFilterComponent, ((prevProps, nextProps) =>
|
|
|
2066
2065
|
shaderMapUrl: shaderMapUrl
|
|
2067
2066
|
}), jsxRuntime.jsx("div", {
|
|
2068
2067
|
className: ATOMIX_GLASS.FILTER_OVERLAY_CLASS,
|
|
2069
|
-
suppressHydrationWarning: !0,
|
|
2070
2068
|
style: {
|
|
2071
2069
|
filter: `url(#${filterId})`,
|
|
2072
2070
|
backdropFilter: "var(--atomix-glass-container-backdrop)",
|
|
@@ -2694,38 +2692,80 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, cornerRadiu
|
|
|
2694
2692
|
}, adjustedSize = {
|
|
2695
2693
|
width: "fixed" !== style.position ? "100%" : style.width ? style.width : Math.max(glassSize.width, 0),
|
|
2696
2694
|
height: "fixed" !== style.position ? "100%" : style.height ? style.height : Math.max(glassSize.height, 0)
|
|
2697
|
-
},
|
|
2698
|
-
|
|
2699
|
-
|
|
2700
|
-
|
|
2701
|
-
|
|
2702
|
-
|
|
2703
|
-
|
|
2704
|
-
|
|
2705
|
-
|
|
2706
|
-
|
|
2707
|
-
|
|
2708
|
-
|
|
2709
|
-
|
|
2710
|
-
|
|
2711
|
-
|
|
2712
|
-
|
|
2713
|
-
|
|
2714
|
-
|
|
2715
|
-
|
|
2716
|
-
|
|
2717
|
-
|
|
2718
|
-
|
|
2719
|
-
|
|
2720
|
-
|
|
2721
|
-
|
|
2722
|
-
|
|
2723
|
-
|
|
2724
|
-
|
|
2725
|
-
|
|
2726
|
-
|
|
2727
|
-
|
|
2728
|
-
|
|
2695
|
+
}, gradientValues = React.useMemo((() => {
|
|
2696
|
+
const mx = mouseOffset.x, my = mouseOffset.y, absMx = Math.abs(mx), absMy = Math.abs(my), GRADIENT = ATOMIX_GLASS.CONSTANTS.GRADIENT;
|
|
2697
|
+
return {
|
|
2698
|
+
borderGradientAngle: GRADIENT.BASE_ANGLE + mx * GRADIENT.ANGLE_MULTIPLIER,
|
|
2699
|
+
borderStop1: Math.max(GRADIENT.BORDER_STOP_1.MIN, GRADIENT.BORDER_STOP_1.BASE + my * GRADIENT.BORDER_STOP_1.MULTIPLIER),
|
|
2700
|
+
borderStop2: Math.min(GRADIENT.BORDER_STOP_2.MAX, GRADIENT.BORDER_STOP_2.BASE + my * GRADIENT.BORDER_STOP_2.MULTIPLIER),
|
|
2701
|
+
borderOpacities: [ GRADIENT.BORDER_OPACITY.BASE_1 + absMx * GRADIENT.BORDER_OPACITY.MULTIPLIER_LOW, GRADIENT.BORDER_OPACITY.BASE_2 + absMx * GRADIENT.BORDER_OPACITY.MULTIPLIER_HIGH, GRADIENT.BORDER_OPACITY.BASE_3 + absMx * GRADIENT.BORDER_OPACITY.MULTIPLIER_LOW, GRADIENT.BORDER_OPACITY.BASE_4 + absMx * GRADIENT.BORDER_OPACITY.MULTIPLIER_HIGH ],
|
|
2702
|
+
hoverPositions: {
|
|
2703
|
+
hover1: {
|
|
2704
|
+
x: GRADIENT.CENTER_POSITION + mx / GRADIENT.HOVER_POSITION.DIVISOR_1,
|
|
2705
|
+
y: GRADIENT.CENTER_POSITION + my / GRADIENT.HOVER_POSITION.DIVISOR_1
|
|
2706
|
+
},
|
|
2707
|
+
hover2: {
|
|
2708
|
+
x: GRADIENT.CENTER_POSITION + mx / GRADIENT.HOVER_POSITION.DIVISOR_2,
|
|
2709
|
+
y: GRADIENT.CENTER_POSITION + my / GRADIENT.HOVER_POSITION.DIVISOR_2
|
|
2710
|
+
},
|
|
2711
|
+
hover3: {
|
|
2712
|
+
x: GRADIENT.CENTER_POSITION + mx * GRADIENT.HOVER_POSITION.MULTIPLIER_3,
|
|
2713
|
+
y: GRADIENT.CENTER_POSITION + my * GRADIENT.HOVER_POSITION.MULTIPLIER_3
|
|
2714
|
+
}
|
|
2715
|
+
},
|
|
2716
|
+
basePosition: {
|
|
2717
|
+
x: GRADIENT.CENTER_POSITION + mx * GRADIENT.BASE_LAYER_MULTIPLIER,
|
|
2718
|
+
y: GRADIENT.CENTER_POSITION + my * GRADIENT.BASE_LAYER_MULTIPLIER
|
|
2719
|
+
},
|
|
2720
|
+
mx: mx,
|
|
2721
|
+
my: my,
|
|
2722
|
+
absMx: absMx,
|
|
2723
|
+
absMy: absMy
|
|
2724
|
+
};
|
|
2725
|
+
}), [ mouseOffset.x, mouseOffset.y ]), opacityValues = React.useMemo((() => {
|
|
2726
|
+
const overLightOpacity = overLightConfig.opacity;
|
|
2727
|
+
return {
|
|
2728
|
+
hover1: isHovered || isActive ? .5 : 0,
|
|
2729
|
+
hover2: isActive ? .5 : 0,
|
|
2730
|
+
hover3: isHovered ? .4 : isActive ? .8 : 0,
|
|
2731
|
+
base: isOverLight ? overLightOpacity || .4 : 0,
|
|
2732
|
+
over: isOverLight ? 1.1 * (overLightOpacity || .4) : 0
|
|
2733
|
+
};
|
|
2734
|
+
}), [ isHovered, isActive, isOverLight, overLightConfig.opacity ]), glassVars = React.useMemo((() => {
|
|
2735
|
+
const whiteColor = "255, 255, 255", {borderGradientAngle: borderGradientAngle, borderStop1: borderStop1, borderStop2: borderStop2, borderOpacities: borderOpacities, hoverPositions: hoverPositions, basePosition: basePosition, mx: mx, my: my, absMx: absMx, absMy: absMy} = gradientValues;
|
|
2736
|
+
return {
|
|
2737
|
+
"--atomix-glass-radius": `${effectiveCornerRadius}px`,
|
|
2738
|
+
"--atomix-glass-transform": transformStyle || "none",
|
|
2739
|
+
"--atomix-glass-position": positionStyles.position,
|
|
2740
|
+
"--atomix-glass-top": "fixed" !== positionStyles.top ? `${positionStyles.top}px` : "0",
|
|
2741
|
+
"--atomix-glass-left": "fixed" !== positionStyles.left ? `${positionStyles.left}px` : "0",
|
|
2742
|
+
"--atomix-glass-width": "fixed" !== style.position ? adjustedSize.width : `${adjustedSize.width}px`,
|
|
2743
|
+
"--atomix-glass-height": "fixed" !== style.position ? adjustedSize.height : `${adjustedSize.height}px`,
|
|
2744
|
+
"--atomix-glass-border-width": "var(--atomix-spacing-0-5, 0.09375rem)",
|
|
2745
|
+
"--atomix-glass-blend-mode": isOverLight ? "multiply" : "overlay",
|
|
2746
|
+
"--atomix-glass-border-gradient-1": `linear-gradient(${borderGradientAngle}deg, rgba(${whiteColor}, 0) 0%, rgba(${whiteColor}, ${borderOpacities[0]}) ${borderStop1}%, rgba(${whiteColor}, ${borderOpacities[1]}) ${borderStop2}%, rgba(${whiteColor}, 0) 100%)`,
|
|
2747
|
+
"--atomix-glass-border-gradient-2": `linear-gradient(${borderGradientAngle}deg, rgba(${whiteColor}, 0) 0%, rgba(${whiteColor}, ${borderOpacities[2]}) ${borderStop1}%, rgba(${whiteColor}, ${borderOpacities[3]}) ${borderStop2}%, rgba(${whiteColor}, 0) 100%)`,
|
|
2748
|
+
"--atomix-glass-hover-1-opacity": opacityValues.hover1,
|
|
2749
|
+
"--atomix-glass-hover-1-gradient": isOverLight ? `radial-gradient(circle at ${hoverPositions.hover1.x}% ${hoverPositions.hover1.y}%, rgba(0, 0, 0, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.BLACK_START}) 0%, rgba(0, 0, 0, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.BLACK_MID}) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.BLACK_STOP}%, rgba(0, 0, 0, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.BLACK_END}%)` : `radial-gradient(circle at ${hoverPositions.hover1.x}% ${hoverPositions.hover1.y}%, rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.WHITE_START}) 0%, rgba(${whiteColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.WHITE_STOP}%)`,
|
|
2750
|
+
"--atomix-glass-hover-2-opacity": opacityValues.hover2,
|
|
2751
|
+
"--atomix-glass-hover-2-gradient": isOverLight ? `radial-gradient(circle at ${hoverPositions.hover2.x}% ${hoverPositions.hover2.y}%, rgba(0, 0, 0, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.BLACK_START}) 0%, rgba(0, 0, 0, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.BLACK_MID}) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.BLACK_STOP}%, rgba(0, 0, 0, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.BLACK_END}%)` : `radial-gradient(circle at ${hoverPositions.hover2.x}% ${hoverPositions.hover2.y}%, rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.WHITE_START}) 0%, rgba(${whiteColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.WHITE_STOP}%)`,
|
|
2752
|
+
"--atomix-glass-hover-3-opacity": opacityValues.hover3,
|
|
2753
|
+
"--atomix-glass-hover-3-gradient": isOverLight ? `radial-gradient(circle at ${hoverPositions.hover3.x}% ${hoverPositions.hover3.y}%, rgba(0, 0, 0, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.BLACK_START}) 0%, rgba(0, 0, 0, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.BLACK_MID}) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.BLACK_STOP}%, rgba(0, 0, 0, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.BLACK_END}%)` : `radial-gradient(circle at ${hoverPositions.hover3.x}% ${hoverPositions.hover3.y}%, rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.WHITE_START}) 0%, rgba(${whiteColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.WHITE_STOP}%)`,
|
|
2754
|
+
"--atomix-glass-base-opacity": opacityValues.base,
|
|
2755
|
+
"--atomix-glass-base-gradient": isOverLight ? `linear-gradient(${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.ANGLE}deg, rgba(0, 0, 0, ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_START_BASE + mx * ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_START_MULTIPLIER}) 0%, rgba(0, 0, 0, ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_MID_BASE + my * ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_MID_MULTIPLIER}) ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_MID_STOP}%, rgba(0, 0, 0, ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_END_BASE + absMx * ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_END_MULTIPLIER}) 100%)` : `rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.WHITE_OPACITY})`,
|
|
2756
|
+
"--atomix-glass-overlay-opacity": opacityValues.over,
|
|
2757
|
+
"--atomix-glass-overlay-gradient": isOverLight ? `radial-gradient(circle at ${basePosition.x}% ${basePosition.y}%, rgba(0, 0, 0, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_START_BASE + absMx * ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_START_MULTIPLIER}) 0%, rgba(0, 0, 0, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_MID}) ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_MID_STOP}%, rgba(0, 0, 0, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_END_BASE + absMy * ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_END_MULTIPLIER}) 100%)` : `rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.WHITE_OPACITY})`
|
|
2758
|
+
};
|
|
2759
|
+
}), [ gradientValues, opacityValues, effectiveCornerRadius, transformStyle, positionStyles, adjustedSize, style.position, isOverLight ]), renderBackgroundLayer = layerType => jsxRuntime.jsx("div", {
|
|
2760
|
+
className: [ ATOMIX_GLASS.BACKGROUND_LAYER_CLASS, "dark" === layerType ? ATOMIX_GLASS.BACKGROUND_LAYER_DARK_CLASS : ATOMIX_GLASS.BACKGROUND_LAYER_BLACK_CLASS, isOverLight ? ATOMIX_GLASS.BACKGROUND_LAYER_OVER_LIGHT_CLASS : ATOMIX_GLASS.BACKGROUND_LAYER_HIDDEN_CLASS ].filter(Boolean).join(" "),
|
|
2761
|
+
style: {
|
|
2762
|
+
...positionStyles,
|
|
2763
|
+
height: adjustedSize.height,
|
|
2764
|
+
width: adjustedSize.width,
|
|
2765
|
+
borderRadius: `${effectiveCornerRadius}px`,
|
|
2766
|
+
transform: baseStyle.transform
|
|
2767
|
+
}
|
|
2768
|
+
});
|
|
2729
2769
|
return jsxRuntime.jsxs("div", {
|
|
2730
2770
|
className: componentClassName,
|
|
2731
2771
|
style: glassVars,
|
|
@@ -2781,25 +2821,7 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, cornerRadiu
|
|
|
2781
2821
|
}), jsxRuntime.jsx("div", {
|
|
2782
2822
|
className: ATOMIX_GLASS.HOVER_3_CLASS
|
|
2783
2823
|
}) ]
|
|
2784
|
-
}),
|
|
2785
|
-
className: [ ATOMIX_GLASS.BACKGROUND_LAYER_CLASS, ATOMIX_GLASS.BACKGROUND_LAYER_DARK_CLASS, isOverLight ? ATOMIX_GLASS.BACKGROUND_LAYER_OVER_LIGHT_CLASS : ATOMIX_GLASS.BACKGROUND_LAYER_HIDDEN_CLASS ].filter(Boolean).join(" "),
|
|
2786
|
-
style: {
|
|
2787
|
-
...positionStyles,
|
|
2788
|
-
height: adjustedSize.height,
|
|
2789
|
-
width: adjustedSize.width,
|
|
2790
|
-
borderRadius: `${effectiveCornerRadius}px`,
|
|
2791
|
-
transform: baseStyle.transform
|
|
2792
|
-
}
|
|
2793
|
-
}), jsxRuntime.jsx("div", {
|
|
2794
|
-
className: [ ATOMIX_GLASS.BACKGROUND_LAYER_CLASS, ATOMIX_GLASS.BACKGROUND_LAYER_BLACK_CLASS, isOverLight ? ATOMIX_GLASS.BACKGROUND_LAYER_OVER_LIGHT_CLASS : ATOMIX_GLASS.BACKGROUND_LAYER_HIDDEN_CLASS ].filter(Boolean).join(" "),
|
|
2795
|
-
style: {
|
|
2796
|
-
...positionStyles,
|
|
2797
|
-
height: adjustedSize.height,
|
|
2798
|
-
width: adjustedSize.width,
|
|
2799
|
-
borderRadius: `${effectiveCornerRadius}px`,
|
|
2800
|
-
transform: baseStyle.transform
|
|
2801
|
-
}
|
|
2802
|
-
}), shouldRenderOverLightLayers && jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
2824
|
+
}), renderBackgroundLayer("dark"), renderBackgroundLayer("black"), shouldRenderOverLightLayers && jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
2803
2825
|
children: [ jsxRuntime.jsx("div", {
|
|
2804
2826
|
className: ATOMIX_GLASS.BASE_LAYER_CLASS
|
|
2805
2827
|
}), jsxRuntime.jsx("div", {
|
|
@@ -10831,16 +10853,6 @@ const EdgePanel = ({title: title, children: children, position: position = "star
|
|
|
10831
10853
|
className: "c-edge-panel__container",
|
|
10832
10854
|
children: glass ? jsxRuntime.jsx(AtomixGlass, {
|
|
10833
10855
|
...glassProps,
|
|
10834
|
-
className: "c-edge-panel__glass-wrapper",
|
|
10835
|
-
style: {
|
|
10836
|
-
position: "fixed",
|
|
10837
|
-
width: glassContentRef.current?.offsetWidth,
|
|
10838
|
-
height: glassContentRef.current?.offsetHeight,
|
|
10839
|
-
top: containerRef.current?.offsetTop,
|
|
10840
|
-
left: containerRef.current?.offsetLeft,
|
|
10841
|
-
bottom: containerRef.current?.style.bottom,
|
|
10842
|
-
right: containerRef.current?.style.right
|
|
10843
|
-
},
|
|
10844
10856
|
children: jsxRuntime.jsx("div", {
|
|
10845
10857
|
ref: glassContentRef,
|
|
10846
10858
|
className: "c-edge-panel__glass-content",
|
|
@@ -14432,7 +14444,13 @@ SideMenuList.displayName = "SideMenuList";
|
|
|
14432
14444
|
* Click me
|
|
14433
14445
|
* </SideMenuItem>
|
|
14434
14446
|
*
|
|
14435
|
-
* // With icon
|
|
14447
|
+
* // With icon and custom link component
|
|
14448
|
+
* import Link from 'next/link';
|
|
14449
|
+
* <SideMenuItem href="/settings" icon={<Icon name="Settings" />} LinkComponent={Link}>
|
|
14450
|
+
* Settings
|
|
14451
|
+
* </SideMenuItem>
|
|
14452
|
+
*
|
|
14453
|
+
* // With icon and custom link component
|
|
14436
14454
|
* <SideMenuItem href="/settings" icon={<Icon name="Settings" />}>
|
|
14437
14455
|
* Settings
|
|
14438
14456
|
* </SideMenuItem>
|
|
@@ -14444,17 +14462,15 @@ SideMenuList.displayName = "SideMenuList";
|
|
|
14444
14462
|
* ```
|
|
14445
14463
|
*/
|
|
14446
14464
|
const SideMenuItem = React.forwardRef((({children: children, href: href, onClick: onClick, active: active = !1, disabled: disabled = !1, icon: icon, className: className = "", target: target, rel: rel, LinkComponent: LinkComponentProp}, ref) => {
|
|
14447
|
-
const {
|
|
14465
|
+
const {generateSideMenuItemClass: generateSideMenuItemClass, handleClick: handleClick} = useSideMenuItem({
|
|
14448
14466
|
active: active,
|
|
14449
14467
|
disabled: disabled,
|
|
14450
14468
|
className: className
|
|
14451
14469
|
}), itemClass = generateSideMenuItemClass();
|
|
14452
|
-
//
|
|
14453
|
-
// Render as link if href is provided
|
|
14470
|
+
// Render as link if href is provided
|
|
14454
14471
|
if (href) {
|
|
14455
|
-
|
|
14456
|
-
|
|
14457
|
-
const Component = LinkComponent, linkProps = {
|
|
14472
|
+
if (LinkComponentProp) {
|
|
14473
|
+
const LinkComp = LinkComponentProp, linkProps = {
|
|
14458
14474
|
ref: ref,
|
|
14459
14475
|
className: itemClass,
|
|
14460
14476
|
onClick: disabled ? e => {
|
|
@@ -14465,16 +14481,12 @@ const SideMenuItem = React.forwardRef((({children: children, href: href, onClic
|
|
|
14465
14481
|
target: target,
|
|
14466
14482
|
rel: rel,
|
|
14467
14483
|
tabIndex: disabled ? -1 : 0,
|
|
14468
|
-
// Support both Next.js (href) and React Router (to) Link components
|
|
14469
|
-
// Pass both props - the Link component will use whichever it needs
|
|
14470
14484
|
...disabled ? {} : {
|
|
14471
14485
|
href: href,
|
|
14472
14486
|
to: href
|
|
14473
14487
|
}
|
|
14474
14488
|
};
|
|
14475
|
-
|
|
14476
|
-
// The Link component will use whichever prop it needs
|
|
14477
|
-
return jsxRuntime.jsxs(Component, {
|
|
14489
|
+
return jsxRuntime.jsxs(LinkComp, {
|
|
14478
14490
|
...linkProps,
|
|
14479
14491
|
children: [ icon && jsxRuntime.jsx("span", {
|
|
14480
14492
|
className: "c-side-menu__link-icon",
|
|
@@ -14529,8 +14541,6 @@ const SideMenuItem = React.forwardRef((({children: children, href: href, onClic
|
|
|
14529
14541
|
|
|
14530
14542
|
SideMenuItem.displayName = "SideMenuItem";
|
|
14531
14543
|
|
|
14532
|
-
// Context for passing LinkComponent to SideMenuItem children
|
|
14533
|
-
const SideMenuContext = React.createContext({}), useSideMenuContext = () => React.useContext(SideMenuContext)
|
|
14534
14544
|
/**
|
|
14535
14545
|
* SideMenu component provides a collapsible navigation menu with title and menu items.
|
|
14536
14546
|
* Automatically collapses on mobile devices and can be toggled via a header button.
|
|
@@ -14545,7 +14555,8 @@ const SideMenuContext = React.createContext({}), useSideMenuContext = () => Rea
|
|
|
14545
14555
|
* </SideMenuList>
|
|
14546
14556
|
* </SideMenu>
|
|
14547
14557
|
* ```
|
|
14548
|
-
*/
|
|
14558
|
+
*/
|
|
14559
|
+
const SideMenu = React.forwardRef((({title: title, children: children, menuItems: menuItems = [], isOpen: isOpen, onToggle: onToggle, collapsible: collapsible = !0, collapsibleDesktop: collapsibleDesktop = !1, defaultCollapsedDesktop: defaultCollapsedDesktop = !1, className: className = "", style: style, disabled: disabled = !1, toggleIcon: toggleIcon, id: id, glass: glass, LinkComponent: LinkComponent}, ref) => {
|
|
14549
14560
|
const {isOpenState: isOpenState, wrapperRef: wrapperRef, innerRef: innerRef, sideMenuRef: sideMenuRef, generateSideMenuClass: generateSideMenuClass, generateWrapperClass: generateWrapperClass, handleToggle: handleToggle} = useSideMenu({
|
|
14550
14561
|
isOpen: isOpen,
|
|
14551
14562
|
onToggle: onToggle,
|
|
@@ -14650,68 +14661,63 @@ const SideMenuContext = React.createContext({}), useSideMenuContext = () => Rea
|
|
|
14650
14661
|
className: wrapperClass,
|
|
14651
14662
|
id: id ? `${id}-content` : void 0,
|
|
14652
14663
|
"aria-hidden": !!shouldShowToggler && !isOpenState,
|
|
14653
|
-
children: jsxRuntime.
|
|
14654
|
-
|
|
14655
|
-
|
|
14656
|
-
|
|
14657
|
-
|
|
14658
|
-
|
|
14659
|
-
|
|
14660
|
-
|
|
14661
|
-
|
|
14662
|
-
|
|
14663
|
-
|
|
14664
|
-
|
|
14665
|
-
|
|
14666
|
-
|
|
14667
|
-
|
|
14668
|
-
|
|
14669
|
-
|
|
14670
|
-
|
|
14671
|
-
|
|
14672
|
-
|
|
14673
|
-
|
|
14674
|
-
|
|
14675
|
-
|
|
14676
|
-
|
|
14677
|
-
|
|
14678
|
-
|
|
14679
|
-
|
|
14680
|
-
|
|
14681
|
-
|
|
14682
|
-
|
|
14683
|
-
|
|
14684
|
-
|
|
14685
|
-
|
|
14686
|
-
|
|
14687
|
-
|
|
14688
|
-
|
|
14689
|
-
|
|
14664
|
+
children: jsxRuntime.jsxs("div", {
|
|
14665
|
+
ref: innerRef,
|
|
14666
|
+
className: "c-side-menu__inner",
|
|
14667
|
+
children: [ children, menuItems?.map(((item, index) => {
|
|
14668
|
+
const isNestedItemOpen = nestedItemStates[index] ?? !0, hasItems = item.items && item.items.length > 0, canToggle = hasItems && !disabled, handleNestedToggle = () => {
|
|
14669
|
+
canToggle && setNestedItemStates((prev => ({
|
|
14670
|
+
...prev,
|
|
14671
|
+
[index]: !prev[index]
|
|
14672
|
+
})));
|
|
14673
|
+
};
|
|
14674
|
+
return jsxRuntime.jsxs("div", {
|
|
14675
|
+
className: "c-side-menu__item",
|
|
14676
|
+
children: [ item.title && jsxRuntime.jsxs("div", {
|
|
14677
|
+
className: [ "c-side-menu__toggler", canToggle && "c-side-menu__toggler--nested", isNestedItemOpen && "is-open" ].filter(Boolean).join(" "),
|
|
14678
|
+
onClick: canToggle ? handleNestedToggle : void 0,
|
|
14679
|
+
role: canToggle ? "button" : void 0,
|
|
14680
|
+
tabIndex: canToggle && !disabled ? 0 : void 0,
|
|
14681
|
+
"aria-expanded": canToggle ? isNestedItemOpen : void 0,
|
|
14682
|
+
"aria-disabled": disabled,
|
|
14683
|
+
onKeyDown: canToggle ? e => {
|
|
14684
|
+
"Enter" !== e.key && " " !== e.key || disabled || (e.preventDefault(), handleNestedToggle());
|
|
14685
|
+
} : void 0,
|
|
14686
|
+
children: [ jsxRuntime.jsx("span", {
|
|
14687
|
+
className: "c-side-menu__title",
|
|
14688
|
+
children: item.title
|
|
14689
|
+
}), canToggle && jsxRuntime.jsx("span", {
|
|
14690
|
+
className: "c-side-menu__toggler-icon",
|
|
14691
|
+
children: item.toggleIcon || jsxRuntime.jsx(Icon, {
|
|
14692
|
+
name: "CaretRight",
|
|
14693
|
+
size: "xs"
|
|
14694
|
+
})
|
|
14695
|
+
}) ]
|
|
14696
|
+
}), hasItems && jsxRuntime.jsx("div", {
|
|
14697
|
+
ref: node => {
|
|
14698
|
+
nestedWrapperRefs.current[index] = node;
|
|
14699
|
+
},
|
|
14700
|
+
className: "c-side-menu__nested-wrapper",
|
|
14701
|
+
children: jsxRuntime.jsx("div", {
|
|
14690
14702
|
ref: node => {
|
|
14691
|
-
|
|
14703
|
+
nestedInnerRefs.current[index] = node;
|
|
14692
14704
|
},
|
|
14693
|
-
className: "c-side-menu__nested-
|
|
14694
|
-
children: jsxRuntime.jsx(
|
|
14695
|
-
|
|
14696
|
-
|
|
14697
|
-
|
|
14698
|
-
|
|
14699
|
-
|
|
14700
|
-
|
|
14701
|
-
|
|
14702
|
-
|
|
14703
|
-
|
|
14704
|
-
disabled: subItem.disabled,
|
|
14705
|
-
icon: subItem.icon,
|
|
14706
|
-
LinkComponent: LinkComponent,
|
|
14707
|
-
children: subItem.title
|
|
14708
|
-
}, subIndex)))
|
|
14709
|
-
})
|
|
14705
|
+
className: "c-side-menu__nested-inner",
|
|
14706
|
+
children: jsxRuntime.jsx(SideMenuList, {
|
|
14707
|
+
children: item.items?.map(((subItem, subIndex) => jsxRuntime.jsx(SideMenuItem, {
|
|
14708
|
+
href: subItem.href,
|
|
14709
|
+
onClick: subItem.onClick,
|
|
14710
|
+
active: subItem.active,
|
|
14711
|
+
disabled: subItem.disabled,
|
|
14712
|
+
icon: subItem.icon,
|
|
14713
|
+
LinkComponent: LinkComponent,
|
|
14714
|
+
children: subItem.title
|
|
14715
|
+
}, subIndex)))
|
|
14710
14716
|
})
|
|
14711
|
-
})
|
|
14712
|
-
}
|
|
14713
|
-
})
|
|
14714
|
-
})
|
|
14717
|
+
})
|
|
14718
|
+
}) ]
|
|
14719
|
+
}, index);
|
|
14720
|
+
})) ]
|
|
14715
14721
|
})
|
|
14716
14722
|
}) ]
|
|
14717
14723
|
});
|
|
@@ -14745,7 +14751,6 @@ const SideMenuContext = React.createContext({}), useSideMenuContext = () => Rea
|
|
|
14745
14751
|
});
|
|
14746
14752
|
}));
|
|
14747
14753
|
|
|
14748
|
-
// Hook to use SideMenu context
|
|
14749
14754
|
SideMenu.displayName = "SideMenu";
|
|
14750
14755
|
|
|
14751
14756
|
const Menu = React.forwardRef((({children: children, className: className = "", style: style, disabled: disabled = !1}, ref) => jsxRuntime.jsx("div", {
|
|
@@ -14947,14 +14952,13 @@ const NavDropdown = React.forwardRef((({title: title, children: children, align
|
|
|
14947
14952
|
size: "sm",
|
|
14948
14953
|
className: "c-nav__icon"
|
|
14949
14954
|
}) ]
|
|
14950
|
-
}), menuContent = jsxRuntime.jsx(
|
|
14955
|
+
}), MenuTag = megaMenu ? "div" : "ul", menuContent = jsxRuntime.jsx(MenuTag, {
|
|
14951
14956
|
className: dropdownMenuClass,
|
|
14952
14957
|
ref: dropdownRef,
|
|
14953
14958
|
"aria-hidden": !isActive,
|
|
14954
14959
|
children: children
|
|
14955
14960
|
});
|
|
14956
|
-
|
|
14957
|
-
return jsxRuntime.jsxs(NavItem, {
|
|
14961
|
+
return jsxRuntime.jsxs(NavItem, {
|
|
14958
14962
|
dropdown: !megaMenu,
|
|
14959
14963
|
megaMenu: megaMenu,
|
|
14960
14964
|
disabled: disabled,
|