@seedgrid/fe-components 2026.3.3-12 → 2026.3.3-13
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/layout/SgMenu.js +1 -1
- package/dist/layout/SgToolBar.d.ts.map +1 -1
- package/dist/layout/SgToolBar.js +10 -5
- package/dist/sandbox.cjs +14 -14
- package/package.json +1 -1
package/dist/layout/SgMenu.js
CHANGED
|
@@ -918,7 +918,7 @@ export function SgMenu(props) {
|
|
|
918
918
|
const collapseOnLeft = isHorizontalDockZone
|
|
919
919
|
? horizontalDockAlign !== "right"
|
|
920
920
|
: resolvedPosition === "right";
|
|
921
|
-
const shellHeaderRow = (brand || showCollapseButton || showPinButton || showDockDragHandle) ? (_jsxs("div", { className: cn("flex items-center gap-2 border-b border-border", densityCfg.section), children: [collapseOnLeft ? collapseButton : null, showBrandContent && brand ? (_jsxs("button", { type: "button", onClick: brand.onClick, className: cn("min-w-0 flex-1 rounded-md", "flex items-center gap-2", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/35"), children: [brand.image ? (_jsx("span", { className: "inline-flex shrink-0 items-center justify-center", children: brand.image })) : brand.imageSrc ? (_jsx("img", { src: brand.imageSrc, alt: brand.title ?? "brand", className: "h-
|
|
921
|
+
const shellHeaderRow = (brand || showCollapseButton || showPinButton || showDockDragHandle) ? (_jsxs("div", { className: cn("flex items-center gap-2 border-b border-border", densityCfg.section), children: [collapseOnLeft ? collapseButton : null, showBrandContent && brand ? (_jsxs("button", { type: "button", onClick: brand.onClick, className: cn("min-w-0 flex-1 rounded-md", "flex items-center gap-2", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/35"), children: [brand.image ? (_jsx("span", { className: "inline-flex shrink-0 items-center justify-center", children: brand.image })) : brand.imageSrc ? (_jsx("img", { src: brand.imageSrc, alt: brand.title ?? "brand", className: "h-12 w-auto max-w-[160px]" })) : null, _jsx("span", { className: "truncate text-sm font-semibold", children: brand.title ?? "Menu" })] })) : showBrandSpacer ? (_jsx("div", { className: "flex-1" })) : null, showDockDragHandle ? (_jsx("button", { type: "button", onPointerDown: handleDockDragPointerDown, "aria-label": "Drag menu", className: cn("inline-flex size-8 shrink-0 items-center justify-center rounded-md border border-border", "bg-background hover:bg-muted/60", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/35", dockDragActive ? "cursor-grabbing" : "cursor-grab"), children: _jsxs("svg", { viewBox: "0 0 24 24", className: "size-4", "aria-hidden": "true", children: [_jsx("circle", { cx: "8", cy: "8", r: "1.25", fill: "currentColor" }), _jsx("circle", { cx: "8", cy: "12", r: "1.25", fill: "currentColor" }), _jsx("circle", { cx: "8", cy: "16", r: "1.25", fill: "currentColor" }), _jsx("circle", { cx: "16", cy: "8", r: "1.25", fill: "currentColor" }), _jsx("circle", { cx: "16", cy: "12", r: "1.25", fill: "currentColor" }), _jsx("circle", { cx: "16", cy: "16", r: "1.25", fill: "currentColor" })] }) })) : null, showPinButton ? (_jsx("button", { type: "button", onClick: () => {
|
|
922
922
|
const next = !pinnedState;
|
|
923
923
|
setPinnedState(next);
|
|
924
924
|
if (variant === "hybrid" && next)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SgToolBar.d.ts","sourceRoot":"","sources":["../../src/layout/SgToolBar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,MAAM,MAAM,oBAAoB,GAAG,YAAY,GAAG,UAAU,CAAC;AAC7D,MAAM,MAAM,6BAA6B,GACrC,aAAa,GACb,eAAe,GACf,iBAAiB,GACjB,kBAAkB,CAAC;AACvB,MAAM,MAAM,iBAAiB,GACzB,SAAS,GACT,WAAW,GACX,SAAS,GACT,MAAM,GACN,SAAS,GACT,MAAM,GACN,QAAQ,GACR,OAAO,CAAC;AAEZ,MAAM,MAAM,aAAa,GAAG;IAC1B,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,CAAC,CAAC,EAAE,MAAM,CAAC;CACZ,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,oBAAoB,CAAC,EAAE,6BAA6B,CAAC;IACrD,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;IAExD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAE3C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IAEjD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG;IACrC,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CACtC,CAAC;AAwIF,wBAAgB,SAAS,CAAC,KAAK,EAAE,QAAQ,CAAC,cAAc,CAAC,2CA8iBxD;yBA9iBe,SAAS;;;AAgjBzB,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,QAAQ,CAAC,wBAAwB,GAAG;IAAE,SAAS,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC,
|
|
1
|
+
{"version":3,"file":"SgToolBar.d.ts","sourceRoot":"","sources":["../../src/layout/SgToolBar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,MAAM,MAAM,oBAAoB,GAAG,YAAY,GAAG,UAAU,CAAC;AAC7D,MAAM,MAAM,6BAA6B,GACrC,aAAa,GACb,eAAe,GACf,iBAAiB,GACjB,kBAAkB,CAAC;AACvB,MAAM,MAAM,iBAAiB,GACzB,SAAS,GACT,WAAW,GACX,SAAS,GACT,MAAM,GACN,SAAS,GACT,MAAM,GACN,QAAQ,GACR,OAAO,CAAC;AAEZ,MAAM,MAAM,aAAa,GAAG;IAC1B,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,CAAC,CAAC,EAAE,MAAM,CAAC;CACZ,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,oBAAoB,CAAC,EAAE,6BAA6B,CAAC;IACrD,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;IAExD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAE3C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IAEjD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG;IACrC,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CACtC,CAAC;AAwIF,wBAAgB,SAAS,CAAC,KAAK,EAAE,QAAQ,CAAC,cAAc,CAAC,2CA8iBxD;yBA9iBe,SAAS;;;AAgjBzB,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,QAAQ,CAAC,wBAAwB,GAAG;IAAE,SAAS,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC,2CAmIpE;yBApIe,mBAAmB"}
|
package/dist/layout/SgToolBar.js
CHANGED
|
@@ -524,7 +524,7 @@ export function SgToolbarIconButton(props) {
|
|
|
524
524
|
const [isPending, setIsPending] = React.useState(false);
|
|
525
525
|
const isLoading = loading || isPending;
|
|
526
526
|
const showHintTooltip = Boolean(hint) && !hideLabel;
|
|
527
|
-
const [hintPosition, setHintPosition] = React.useState({ x: 0, y: 0 });
|
|
527
|
+
const [hintPosition, setHintPosition] = React.useState({ x: 0, y: 0, above: true });
|
|
528
528
|
const [isHintHovered, setIsHintHovered] = React.useState(false);
|
|
529
529
|
const buttonRef = React.useRef(null);
|
|
530
530
|
const handleClick = React.useCallback(() => {
|
|
@@ -545,17 +545,20 @@ export function SgToolbarIconButton(props) {
|
|
|
545
545
|
const toolbarRoot = buttonRef.current.closest("[data-sg-toolbar-root='true']");
|
|
546
546
|
const toolbarRect = toolbarRoot instanceof HTMLElement ? toolbarRoot.getBoundingClientRect() : null;
|
|
547
547
|
if (isHorizontalToolbar) {
|
|
548
|
-
const
|
|
548
|
+
const refRect = toolbarRect ?? buttonRect;
|
|
549
|
+
const above = refRect.top > 48;
|
|
549
550
|
setHintPosition({
|
|
550
551
|
x: buttonRect.left + (buttonRect.width / 2),
|
|
551
|
-
y:
|
|
552
|
+
y: above ? refRect.top - 8 : refRect.bottom + 8,
|
|
553
|
+
above
|
|
552
554
|
});
|
|
553
555
|
return;
|
|
554
556
|
}
|
|
555
557
|
const baseX = toolbarRect ? toolbarRect.right : buttonRect.right;
|
|
556
558
|
setHintPosition({
|
|
557
559
|
x: baseX + 8,
|
|
558
|
-
y: buttonRect.top + (buttonRect.height / 2)
|
|
560
|
+
y: buttonRect.top + (buttonRect.height / 2),
|
|
561
|
+
above: true
|
|
559
562
|
});
|
|
560
563
|
}, [isHorizontalToolbar]);
|
|
561
564
|
React.useEffect(() => {
|
|
@@ -574,7 +577,9 @@ export function SgToolbarIconButton(props) {
|
|
|
574
577
|
? createPortal(_jsx("span", { className: "pointer-events-none fixed z-[1200] whitespace-nowrap rounded bg-foreground/90 px-2 py-1 text-[11px] text-background", style: {
|
|
575
578
|
left: hintPosition.x,
|
|
576
579
|
top: hintPosition.y,
|
|
577
|
-
transform: isHorizontalToolbar
|
|
580
|
+
transform: isHorizontalToolbar
|
|
581
|
+
? hintPosition.above ? "translate(-50%, -100%)" : "translate(-50%, 0%)"
|
|
582
|
+
: "translateY(-50%)"
|
|
578
583
|
}, children: hint }), document.body)
|
|
579
584
|
: null;
|
|
580
585
|
return (_jsxs(_Fragment, { children: [_jsxs("button", { ref: buttonRef, type: "button", disabled: disabled || isLoading, onClick: handleClick, "aria-busy": isLoading || undefined, onMouseEnter: showHintTooltip ? () => {
|