@forgeax/app-shell 0.48.0 → 0.49.0
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/react.d.ts +13 -1
- package/dist/react.js +80 -32
- package/package.json +1 -1
package/dist/react.d.ts
CHANGED
|
@@ -161,6 +161,18 @@ interface TabPinnedStateSource {
|
|
|
161
161
|
/** Observe whether one product-supplied panel identity is pinned in a group. */
|
|
162
162
|
declare function useTabPinnedState(source: TabPinnedStateSource, groupId: string, panelId: string): boolean;
|
|
163
163
|
|
|
164
|
+
interface DockTabFrameProps extends HTMLAttributes<HTMLDivElement> {
|
|
165
|
+
/** Caller-owned leading presentation, such as a product icon. */
|
|
166
|
+
leading?: ReactNode;
|
|
167
|
+
/** Caller-owned trailing action; App Shell only fixes its slot position. */
|
|
168
|
+
action?: ReactNode;
|
|
169
|
+
}
|
|
170
|
+
type DockTabActionProps = HTMLAttributes<HTMLDivElement>;
|
|
171
|
+
/** Product-neutral Dock tab frame with stable Dockview-compatible DOM hooks. */
|
|
172
|
+
declare const DockTabFrame: react.ForwardRefExoticComponent<DockTabFrameProps & react.RefAttributes<HTMLDivElement>>;
|
|
173
|
+
/** Product-neutral trailing-action wrapper for a Dock tab frame. */
|
|
174
|
+
declare const DockTabAction: react.ForwardRefExoticComponent<DockTabActionProps & react.RefAttributes<HTMLDivElement>>;
|
|
175
|
+
|
|
164
176
|
type PanelContentPadding = 'none' | 'sm' | 'md';
|
|
165
177
|
type PanelContentScroll = 'none' | 'auto';
|
|
166
178
|
type PanelContentTone = 'default' | 'surface' | 'tool';
|
|
@@ -302,4 +314,4 @@ interface ShellSlotProps extends HTMLAttributes<HTMLElement> {
|
|
|
302
314
|
/** Structural shell marker that preserves the caller's semantic element. */
|
|
303
315
|
declare function ShellSlot({ as, name, ...props }: ShellSlotProps): ReactElement;
|
|
304
316
|
|
|
305
|
-
export { type AnchoredResizeDirection, AnchoredResizeHandle, type AnchoredResizeHandleProps, type AnchoredResizeSession, DetachedPanelBoundary, type DetachedPanelBoundaryProps, DetachedSurfaceFrame, type DetachedSurfaceFrameProps, DetachedSurfaceStatus, type DetachedSurfaceStatusProps, type DetachedSurfaceStatusTone, type DockLayoutControlBinding, type DockLayoutControlBindingOptions, DockLayoutMenu, type DockLayoutMenuPanel, type DockLayoutMenuProps, FloatingMenu, type FloatingMenuAnchor, type FloatingMenuPoint, type FloatingMenuProps, type LiveTabPlacement, type LiveTabPlacementSource, type LiveTabTitleSource, type PanelContentPadding, type PanelContentPolicy, type PanelContentScroll, type PanelContentTone, PanelEmptyState, type PanelEmptyStateProps, PanelSurface, type PanelSurfaceProps, type PersistentSizeStorage, type PersistentSizeStore, type PersistentSizeStoreOptions, type PersistentSizeUpdate, type PointerDragFinishReason, type PointerDragSessionOptions, type PointerReorderFinishReason, type PointerReorderSession, type PointerReorderSessionOptions, ResizeHandle, type ResizeHandleProps, ShellSlot, type ShellSlotElement, type ShellSlotProps, SlotDebugOverlay, SurfacePlaceholder, type SurfacePlaceholderProps, SurfaceRegion, type SurfaceRegionProps, type TabCloseInteractions, type TabCloseInteractionsOptions, type TabPinnedStateSource, type ThresholdPointerDragFinishReason, type ThresholdPointerDragSession, type ThresholdPointerDragSessionOptions, applyAnchoredResizeDelta, beginAnchoredResize, createPersistentSizeStore, hashSlotHue, installPointerDragSession, installPointerReorderSession, installThresholdPointerDragSession, isSlotDebugEnabled, useDockLayoutControlBinding, useLiveTabPlacement, useLiveTabTitle, useLocalSize, usePersistentSizeStore, useTabCloseInteractions, useTabPinnedState };
|
|
317
|
+
export { type AnchoredResizeDirection, AnchoredResizeHandle, type AnchoredResizeHandleProps, type AnchoredResizeSession, DetachedPanelBoundary, type DetachedPanelBoundaryProps, DetachedSurfaceFrame, type DetachedSurfaceFrameProps, DetachedSurfaceStatus, type DetachedSurfaceStatusProps, type DetachedSurfaceStatusTone, type DockLayoutControlBinding, type DockLayoutControlBindingOptions, DockLayoutMenu, type DockLayoutMenuPanel, type DockLayoutMenuProps, DockTabAction, type DockTabActionProps, DockTabFrame, type DockTabFrameProps, FloatingMenu, type FloatingMenuAnchor, type FloatingMenuPoint, type FloatingMenuProps, type LiveTabPlacement, type LiveTabPlacementSource, type LiveTabTitleSource, type PanelContentPadding, type PanelContentPolicy, type PanelContentScroll, type PanelContentTone, PanelEmptyState, type PanelEmptyStateProps, PanelSurface, type PanelSurfaceProps, type PersistentSizeStorage, type PersistentSizeStore, type PersistentSizeStoreOptions, type PersistentSizeUpdate, type PointerDragFinishReason, type PointerDragSessionOptions, type PointerReorderFinishReason, type PointerReorderSession, type PointerReorderSessionOptions, ResizeHandle, type ResizeHandleProps, ShellSlot, type ShellSlotElement, type ShellSlotProps, SlotDebugOverlay, SurfacePlaceholder, type SurfacePlaceholderProps, SurfaceRegion, type SurfaceRegionProps, type TabCloseInteractions, type TabCloseInteractionsOptions, type TabPinnedStateSource, type ThresholdPointerDragFinishReason, type ThresholdPointerDragSession, type ThresholdPointerDragSessionOptions, applyAnchoredResizeDelta, beginAnchoredResize, createPersistentSizeStore, hashSlotHue, installPointerDragSession, installPointerReorderSession, installThresholdPointerDragSession, isSlotDebugEnabled, useDockLayoutControlBinding, useLiveTabPlacement, useLiveTabTitle, useLocalSize, usePersistentSizeStore, useTabCloseInteractions, useTabPinnedState };
|
package/dist/react.js
CHANGED
|
@@ -1440,22 +1440,68 @@ function useTabPinnedState(source, groupId, panelId) {
|
|
|
1440
1440
|
);
|
|
1441
1441
|
}
|
|
1442
1442
|
|
|
1443
|
-
// src/
|
|
1443
|
+
// src/dock-tab-frame.tsx
|
|
1444
|
+
import {
|
|
1445
|
+
forwardRef
|
|
1446
|
+
} from "react";
|
|
1444
1447
|
import { jsx as jsx3, jsxs } from "react/jsx-runtime";
|
|
1448
|
+
function joinClassName(owned, caller) {
|
|
1449
|
+
return caller ? `${owned} ${caller}` : owned;
|
|
1450
|
+
}
|
|
1451
|
+
var DockTabFrame = forwardRef(
|
|
1452
|
+
function DockTabFrame2({
|
|
1453
|
+
leading,
|
|
1454
|
+
action,
|
|
1455
|
+
children,
|
|
1456
|
+
className,
|
|
1457
|
+
...props
|
|
1458
|
+
}, ref) {
|
|
1459
|
+
return /* @__PURE__ */ jsxs(
|
|
1460
|
+
"div",
|
|
1461
|
+
{
|
|
1462
|
+
...props,
|
|
1463
|
+
ref,
|
|
1464
|
+
className: joinClassName("dv-default-tab", className),
|
|
1465
|
+
children: [
|
|
1466
|
+
leading,
|
|
1467
|
+
/* @__PURE__ */ jsx3("span", { className: "dv-default-tab-content", children }),
|
|
1468
|
+
action
|
|
1469
|
+
]
|
|
1470
|
+
}
|
|
1471
|
+
);
|
|
1472
|
+
}
|
|
1473
|
+
);
|
|
1474
|
+
DockTabFrame.displayName = "DockTabFrame";
|
|
1475
|
+
var DockTabAction = forwardRef(
|
|
1476
|
+
function DockTabAction2({ className, ...props }, ref) {
|
|
1477
|
+
return /* @__PURE__ */ jsx3(
|
|
1478
|
+
"div",
|
|
1479
|
+
{
|
|
1480
|
+
...props,
|
|
1481
|
+
ref,
|
|
1482
|
+
className: joinClassName("dv-default-tab-action", className)
|
|
1483
|
+
}
|
|
1484
|
+
);
|
|
1485
|
+
}
|
|
1486
|
+
);
|
|
1487
|
+
DockTabAction.displayName = "DockTabAction";
|
|
1488
|
+
|
|
1489
|
+
// src/panel.tsx
|
|
1490
|
+
import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
1445
1491
|
function PanelEmptyState({
|
|
1446
1492
|
title,
|
|
1447
1493
|
detail,
|
|
1448
1494
|
className,
|
|
1449
1495
|
...props
|
|
1450
1496
|
}) {
|
|
1451
|
-
return /* @__PURE__ */
|
|
1497
|
+
return /* @__PURE__ */ jsxs2(
|
|
1452
1498
|
"div",
|
|
1453
1499
|
{
|
|
1454
1500
|
...props,
|
|
1455
1501
|
className: className ? `fx-panel-empty ${className}` : "fx-panel-empty",
|
|
1456
1502
|
children: [
|
|
1457
|
-
/* @__PURE__ */
|
|
1458
|
-
detail == null ? null : /* @__PURE__ */
|
|
1503
|
+
/* @__PURE__ */ jsx4("div", { className: "fx-panel-empty-title", children: title }),
|
|
1504
|
+
detail == null ? null : /* @__PURE__ */ jsx4("div", { className: "fx-panel-empty-detail", children: detail })
|
|
1459
1505
|
]
|
|
1460
1506
|
}
|
|
1461
1507
|
);
|
|
@@ -1470,7 +1516,7 @@ function PanelSurface({
|
|
|
1470
1516
|
className,
|
|
1471
1517
|
...props
|
|
1472
1518
|
}) {
|
|
1473
|
-
return /* @__PURE__ */
|
|
1519
|
+
return /* @__PURE__ */ jsxs2(
|
|
1474
1520
|
"section",
|
|
1475
1521
|
{
|
|
1476
1522
|
...props,
|
|
@@ -1481,7 +1527,7 @@ function PanelSurface({
|
|
|
1481
1527
|
"data-fx-slot": `DockPanel:${id}`,
|
|
1482
1528
|
children: [
|
|
1483
1529
|
header,
|
|
1484
|
-
/* @__PURE__ */
|
|
1530
|
+
/* @__PURE__ */ jsx4(
|
|
1485
1531
|
"div",
|
|
1486
1532
|
{
|
|
1487
1533
|
className: "fx-panel-content",
|
|
@@ -1515,7 +1561,7 @@ function DetachedPanelBoundary({
|
|
|
1515
1561
|
}
|
|
1516
1562
|
|
|
1517
1563
|
// src/detached-surface-frame.tsx
|
|
1518
|
-
import { jsx as
|
|
1564
|
+
import { jsx as jsx5 } from "react/jsx-runtime";
|
|
1519
1565
|
var fill = { position: "fixed", inset: 0 };
|
|
1520
1566
|
var centeredContent = {
|
|
1521
1567
|
display: "flex",
|
|
@@ -1527,12 +1573,12 @@ function DetachedSurfaceFrame({
|
|
|
1527
1573
|
panel = false,
|
|
1528
1574
|
centered = false
|
|
1529
1575
|
}) {
|
|
1530
|
-
return /* @__PURE__ */
|
|
1576
|
+
return /* @__PURE__ */ jsx5(
|
|
1531
1577
|
"div",
|
|
1532
1578
|
{
|
|
1533
1579
|
className: panel ? "fx-detached-surface fx-detached-panel main-area" : "fx-detached-surface",
|
|
1534
1580
|
style: fill,
|
|
1535
|
-
children: centered ? /* @__PURE__ */
|
|
1581
|
+
children: centered ? /* @__PURE__ */ jsx5("div", { className: "fx-detached-surface-status", style: centeredContent, children }) : children
|
|
1536
1582
|
}
|
|
1537
1583
|
);
|
|
1538
1584
|
}
|
|
@@ -1540,25 +1586,25 @@ function DetachedSurfaceStatus({
|
|
|
1540
1586
|
children,
|
|
1541
1587
|
tone = "neutral"
|
|
1542
1588
|
}) {
|
|
1543
|
-
return /* @__PURE__ */
|
|
1589
|
+
return /* @__PURE__ */ jsx5("span", { className: "fx-detached-surface-status-text", "data-tone": tone, children });
|
|
1544
1590
|
}
|
|
1545
1591
|
|
|
1546
1592
|
// src/surface-placeholder.tsx
|
|
1547
|
-
import { jsx as
|
|
1593
|
+
import { jsx as jsx6 } from "react/jsx-runtime";
|
|
1548
1594
|
function SurfacePlaceholder({
|
|
1549
1595
|
title,
|
|
1550
1596
|
className
|
|
1551
1597
|
}) {
|
|
1552
|
-
return /* @__PURE__ */
|
|
1598
|
+
return /* @__PURE__ */ jsx6("div", { className: className ? `surface-placeholder ${className}` : "surface-placeholder", children: /* @__PURE__ */ jsx6("div", { className: "surface-placeholder-title", children: title }) });
|
|
1553
1599
|
}
|
|
1554
1600
|
|
|
1555
1601
|
// src/surface-region.tsx
|
|
1556
1602
|
import {
|
|
1557
|
-
forwardRef
|
|
1603
|
+
forwardRef as forwardRef2
|
|
1558
1604
|
} from "react";
|
|
1559
|
-
import { jsx as
|
|
1605
|
+
import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
1560
1606
|
var joinClassNames = (base, modifier) => modifier ? `${base} ${modifier}` : base;
|
|
1561
|
-
var SurfaceRegion =
|
|
1607
|
+
var SurfaceRegion = forwardRef2(
|
|
1562
1608
|
function SurfaceRegion2({
|
|
1563
1609
|
children,
|
|
1564
1610
|
overlay,
|
|
@@ -1566,15 +1612,15 @@ var SurfaceRegion = forwardRef(
|
|
|
1566
1612
|
bodyClassName,
|
|
1567
1613
|
...props
|
|
1568
1614
|
}, ref) {
|
|
1569
|
-
return /* @__PURE__ */
|
|
1615
|
+
return /* @__PURE__ */ jsxs3(
|
|
1570
1616
|
"div",
|
|
1571
1617
|
{
|
|
1572
1618
|
...props,
|
|
1573
1619
|
ref,
|
|
1574
1620
|
className: joinClassNames("fx-surface-region", className),
|
|
1575
1621
|
children: [
|
|
1576
|
-
overlay == null ? null : /* @__PURE__ */
|
|
1577
|
-
/* @__PURE__ */
|
|
1622
|
+
overlay == null ? null : /* @__PURE__ */ jsx7("div", { className: "fx-surface-region-overlay", children: overlay }),
|
|
1623
|
+
/* @__PURE__ */ jsx7("div", { className: joinClassNames("fx-surface-region-body", bodyClassName), children })
|
|
1578
1624
|
]
|
|
1579
1625
|
}
|
|
1580
1626
|
);
|
|
@@ -1607,7 +1653,7 @@ function useDockLayoutControlBinding({
|
|
|
1607
1653
|
// src/floating-menu.tsx
|
|
1608
1654
|
var import_react_dom = __toESM(require_react_dom(), 1);
|
|
1609
1655
|
import { useEffect as useEffect5, useLayoutEffect, useRef as useRef3, useState as useState3 } from "react";
|
|
1610
|
-
import { Fragment, jsx as
|
|
1656
|
+
import { Fragment, jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
|
|
1611
1657
|
var VIEWPORT_PADDING = 8;
|
|
1612
1658
|
function FloatingMenu({
|
|
1613
1659
|
open,
|
|
@@ -1666,8 +1712,8 @@ function FloatingMenu({
|
|
|
1666
1712
|
}, [onClose, open]);
|
|
1667
1713
|
if (!open) return null;
|
|
1668
1714
|
return (0, import_react_dom.createPortal)(
|
|
1669
|
-
/* @__PURE__ */
|
|
1670
|
-
/* @__PURE__ */
|
|
1715
|
+
/* @__PURE__ */ jsxs4(Fragment, { children: [
|
|
1716
|
+
/* @__PURE__ */ jsx8(
|
|
1671
1717
|
"div",
|
|
1672
1718
|
{
|
|
1673
1719
|
"data-app-shell-floating-menu-backdrop": "",
|
|
@@ -1679,7 +1725,7 @@ function FloatingMenu({
|
|
|
1679
1725
|
}
|
|
1680
1726
|
}
|
|
1681
1727
|
),
|
|
1682
|
-
/* @__PURE__ */
|
|
1728
|
+
/* @__PURE__ */ jsx8(
|
|
1683
1729
|
"div",
|
|
1684
1730
|
{
|
|
1685
1731
|
ref: menuRef,
|
|
@@ -1703,7 +1749,7 @@ function FloatingMenu({
|
|
|
1703
1749
|
}
|
|
1704
1750
|
|
|
1705
1751
|
// src/dock-layout-menu.tsx
|
|
1706
|
-
import { jsx as
|
|
1752
|
+
import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
|
|
1707
1753
|
function DockLayoutMenu({
|
|
1708
1754
|
state,
|
|
1709
1755
|
onToggle,
|
|
@@ -1724,7 +1770,7 @@ function DockLayoutMenu({
|
|
|
1724
1770
|
closePanel,
|
|
1725
1771
|
reopenPanel
|
|
1726
1772
|
});
|
|
1727
|
-
return /* @__PURE__ */
|
|
1773
|
+
return /* @__PURE__ */ jsxs5(
|
|
1728
1774
|
FloatingMenu,
|
|
1729
1775
|
{
|
|
1730
1776
|
open: snapshot.open,
|
|
@@ -1733,7 +1779,7 @@ function DockLayoutMenu({
|
|
|
1733
1779
|
align: "end",
|
|
1734
1780
|
className: "fx-dl-menu",
|
|
1735
1781
|
children: [
|
|
1736
|
-
/* @__PURE__ */
|
|
1782
|
+
/* @__PURE__ */ jsxs5(
|
|
1737
1783
|
"button",
|
|
1738
1784
|
{
|
|
1739
1785
|
type: "button",
|
|
@@ -1748,16 +1794,16 @@ function DockLayoutMenu({
|
|
|
1748
1794
|
}
|
|
1749
1795
|
},
|
|
1750
1796
|
children: [
|
|
1751
|
-
resetIcon ? /* @__PURE__ */
|
|
1797
|
+
resetIcon ? /* @__PURE__ */ jsx9("span", { "aria-hidden": "true", children: resetIcon }) : null,
|
|
1752
1798
|
resetLabel
|
|
1753
1799
|
]
|
|
1754
1800
|
}
|
|
1755
1801
|
),
|
|
1756
|
-
/* @__PURE__ */
|
|
1757
|
-
/* @__PURE__ */
|
|
1758
|
-
panels.length === 0 ? /* @__PURE__ */
|
|
1802
|
+
/* @__PURE__ */ jsx9("div", { className: "fx-dl-sep", role: "separator" }),
|
|
1803
|
+
/* @__PURE__ */ jsx9("div", { className: "fx-dl-head", children: sectionLabel }),
|
|
1804
|
+
panels.length === 0 ? /* @__PURE__ */ jsx9("div", { className: "fx-dl-head", "data-app-shell-dock-layout-empty": "", children: emptyLabel }) : panels.map((panel) => {
|
|
1759
1805
|
const isOpen = panelControl.isOpen(panel.id);
|
|
1760
|
-
return /* @__PURE__ */
|
|
1806
|
+
return /* @__PURE__ */ jsxs5(
|
|
1761
1807
|
"button",
|
|
1762
1808
|
{
|
|
1763
1809
|
type: "button",
|
|
@@ -1768,8 +1814,8 @@ function DockLayoutMenu({
|
|
|
1768
1814
|
panelControl.toggle(panel.id);
|
|
1769
1815
|
},
|
|
1770
1816
|
children: [
|
|
1771
|
-
/* @__PURE__ */
|
|
1772
|
-
panel.icon ? /* @__PURE__ */
|
|
1817
|
+
/* @__PURE__ */ jsx9("span", { className: "fx-dl-check", "aria-hidden": "true", children: isOpen ? "\u2713" : "\uFF0B" }),
|
|
1818
|
+
panel.icon ? /* @__PURE__ */ jsx9("span", { className: "fx-dl-icon", "aria-hidden": "true", children: panel.icon }) : null,
|
|
1773
1819
|
panel.title
|
|
1774
1820
|
]
|
|
1775
1821
|
},
|
|
@@ -1795,6 +1841,8 @@ export {
|
|
|
1795
1841
|
DetachedSurfaceFrame,
|
|
1796
1842
|
DetachedSurfaceStatus,
|
|
1797
1843
|
DockLayoutMenu,
|
|
1844
|
+
DockTabAction,
|
|
1845
|
+
DockTabFrame,
|
|
1798
1846
|
FloatingMenu,
|
|
1799
1847
|
PanelEmptyState,
|
|
1800
1848
|
PanelSurface,
|