@adecore/ui 0.49.7 → 0.50.0

package/dist/workspace/Workspace.js

@@ -1,15 +1,17 @@
 import { c as _c } from "react/compiler-runtime";
-import 'react';
+import { useState } from 'react';
 import clsx from 'clsx';
 import { useRender } from '@base-ui/react/use-render';
-import { WorkspaceContext } from './context.js';
+import { TopRowSlotContext, WorkspaceContext } from './context.js';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const isPresent = node => node !== undefined && node !== null && node !== false;
+/** The sidebar, the toolbar and the content on one raised sheet, with the side panel and the rail behind it. */
 export function Workspace(t0) {
-  const $ = _c(66);
+  const $ = _c(77);
   let children;
   let className;
   let props;
+  let rail;
   let ref;
   let render;
   let sidePanel;
@@ -27,6 +29,7 @@ export function Workspace(t0) {
       toolbar,
       sidebar,
       sidePanel,
+      rail,
       sidebarWidth: t2,
       sidePanelWidth: t3,
       sidebarOpen,
@@ -42,79 +45,92 @@ export function Workspace(t0) {
     $[1] = children;
     $[2] = className;
     $[3] = props;
-    $[4] = ref;
-    $[5] = render;
-    $[6] = sidePanel;
-    $[7] = sidePanelOpen;
-    $[8] = sidebar;
-    $[9] = sidebarOpen;
-    $[10] = style;
-    $[11] = t1;
-    $[12] = t2;
-    $[13] = t3;
-    $[14] = toolbar;
+    $[4] = rail;
+    $[5] = ref;
+    $[6] = render;
+    $[7] = sidePanel;
+    $[8] = sidePanelOpen;
+    $[9] = sidebar;
+    $[10] = sidebarOpen;
+    $[11] = style;
+    $[12] = t1;
+    $[13] = t2;
+    $[14] = t3;
+    $[15] = toolbar;
   } else {
     children = $[1];
     className = $[2];
     props = $[3];
-    ref = $[4];
-    render = $[5];
-    sidePanel = $[6];
-    sidePanelOpen = $[7];
-    sidebar = $[8];
-    sidebarOpen = $[9];
-    style = $[10];
-    t1 = $[11];
-    t2 = $[12];
-    t3 = $[13];
-    toolbar = $[14];
+    rail = $[4];
+    ref = $[5];
+    render = $[6];
+    sidePanel = $[7];
+    sidePanelOpen = $[8];
+    sidebar = $[9];
+    sidebarOpen = $[10];
+    style = $[11];
+    t1 = $[12];
+    t2 = $[13];
+    t3 = $[14];
+    toolbar = $[15];
   }
   const layout = t1 === undefined ? "standard" : t1;
   const sidebarWidth = t2 === undefined ? 248 : t2;
   const sidePanelWidth = t3 === undefined ? 320 : t3;
   let t4;
-  if ($[15] !== sidebar) {
+  if ($[16] !== sidebar) {
     t4 = isPresent(sidebar);
-    $[15] = sidebar;
-    $[16] = t4;
+    $[16] = sidebar;
+    $[17] = t4;
   } else {
-    t4 = $[16];
+    t4 = $[17];
   }
   const hasSidebar = t4;
   let t5;
-  if ($[17] !== sidePanel) {
+  if ($[18] !== sidePanel) {
     t5 = isPresent(sidePanel);
-    $[17] = sidePanel;
-    $[18] = t5;
+    $[18] = sidePanel;
+    $[19] = t5;
   } else {
-    t5 = $[18];
+    t5 = $[19];
   }
   const hasPanel = t5;
-  const leftOpen = hasSidebar && (sidebarOpen ?? true);
-  const rightOpen = hasPanel && (sidePanelOpen ?? true);
   let t6;
-  if ($[19] !== toolbar) {
-    t6 = isPresent(toolbar);
-    $[19] = toolbar;
-    $[20] = t6;
+  if ($[20] !== rail) {
+    t6 = isPresent(rail);
+    $[20] = rail;
+    $[21] = t6;
   } else {
-    t6 = $[20];
+    t6 = $[21];
   }
-  const hasToolbar = t6;
+  const hasRail = t6;
+  const leftOpen = hasSidebar && (sidebarOpen ?? true);
+  const rightOpen = hasPanel && (sidePanelOpen ?? true);
   let t7;
-  if ($[21] !== className) {
-    t7 = clsx("ade-workspace", className);
-    $[21] = className;
-    $[22] = t7;
+  if ($[22] !== toolbar) {
+    t7 = isPresent(toolbar);
+    $[22] = toolbar;
+    $[23] = t7;
   } else {
-    t7 = $[22];
+    t7 = $[23];
   }
-  const t8 = hasToolbar || undefined;
-  const t9 = leftOpen || undefined;
-  const t10 = rightOpen || undefined;
-  let t11;
-  if ($[23] !== hasSidebar || $[24] !== sidebar || $[25] !== sidebarWidth) {
-    t11 = hasSidebar && /*#__PURE__*/_jsx("aside", {
+  const hasToolbar = t7;
+  const [topRowSlot, setTopRowSlot] = useState(null);
+  let t8;
+  if ($[24] !== className) {
+    t8 = clsx("ade-workspace", className);
+    $[24] = className;
+    $[25] = t8;
+  } else {
+    t8 = $[25];
+  }
+  const t9 = hasToolbar || undefined;
+  const t10 = leftOpen || undefined;
+  const t11 = rightOpen || undefined;
+  const t12 = hasRail || undefined;
+  let t13;
+  if ($[26] !== hasSidebar || $[27] !== sidebar || $[28] !== sidebarWidth) {
+    t13 = hasSidebar && /*#__PURE__*/_jsx("aside", {
       className: "ade-workspace-sidebar",
       "data-auto": sidebarWidth === "auto" || undefined,
       style: {
@@ -122,51 +138,63 @@ export function Workspace(t0) {
       },
       children: sidebar
     });
-    $[23] = hasSidebar;
-    $[24] = sidebar;
-    $[25] = sidebarWidth;
-    $[26] = t11;
+    $[26] = hasSidebar;
+    $[27] = sidebar;
+    $[28] = sidebarWidth;
+    $[29] = t13;
   } else {
-    t11 = $[26];
+    t13 = $[29];
   }
-  let t12;
-  if ($[27] !== hasToolbar || $[28] !== toolbar) {
-    t12 = hasToolbar && /*#__PURE__*/_jsx("div", {
+  let t14;
+  if ($[30] !== hasToolbar || $[31] !== toolbar) {
+    t14 = hasToolbar && /*#__PURE__*/_jsx("div", {
       className: "ade-workspace-toolbar",
       children: toolbar
     });
-    $[27] = hasToolbar;
-    $[28] = toolbar;
-    $[29] = t12;
+    $[30] = hasToolbar;
+    $[31] = toolbar;
+    $[32] = t14;
   } else {
-    t12 = $[29];
+    t14 = $[32];
   }
-  let t13;
-  if ($[30] !== children) {
-    t13 = /*#__PURE__*/_jsx("div", {
+  let t15;
+  if ($[33] !== children) {
+    t15 = /*#__PURE__*/_jsx("div", {
       className: "ade-workspace-content",
       children: children
     });
-    $[30] = children;
-    $[31] = t13;
+    $[33] = children;
+    $[34] = t15;
   } else {
-    t13 = $[31];
+    t15 = $[34];
   }
-  let t14;
-  if ($[32] !== t12 || $[33] !== t13) {
-    t14 = /*#__PURE__*/_jsxs("div", {
+  let t16;
+  if ($[35] !== t14 || $[36] !== t15) {
+    t16 = /*#__PURE__*/_jsxs("div", {
       className: "ade-workspace-center",
-      children: [t12, t13]
+      children: [t14, t15]
     });
-    $[32] = t12;
-    $[33] = t13;
-    $[34] = t14;
+    $[35] = t14;
+    $[36] = t15;
+    $[37] = t16;
   } else {
-    t14 = $[34];
+    t16 = $[37];
   }
-  let t15;
-  if ($[35] !== hasPanel || $[36] !== sidePanel || $[37] !== sidePanelWidth) {
-    t15 = hasPanel && /*#__PURE__*/_jsx("aside", {
+  let t17;
+  if ($[38] !== t13 || $[39] !== t16) {
+    t17 = /*#__PURE__*/_jsxs("div", {
+      className: "ade-workspace-sheet",
+      children: [t13, t16]
+    });
+    $[38] = t13;
+    $[39] = t16;
+    $[40] = t17;
+  } else {
+    t17 = $[40];
+  }
+  let t18;
+  if ($[41] !== hasPanel || $[42] !== sidePanel || $[43] !== sidePanelWidth) {
+    t18 = hasPanel && /*#__PURE__*/_jsx("aside", {
       className: "ade-workspace-side-panel",
       "data-auto": sidePanelWidth === "auto" || undefined,
       style: {
@@ -174,107 +202,131 @@ export function Workspace(t0) {
       },
       children: sidePanel
     });
-    $[35] = hasPanel;
-    $[36] = sidePanel;
-    $[37] = sidePanelWidth;
-    $[38] = t15;
+    $[41] = hasPanel;
+    $[42] = sidePanel;
+    $[43] = sidePanelWidth;
+    $[44] = t18;
   } else {
-    t15 = $[38];
+    t18 = $[44];
   }
-  let t16;
-  if ($[39] !== t11 || $[40] !== t14 || $[41] !== t15) {
-    t16 = /*#__PURE__*/_jsxs(_Fragment, {
-      children: [t11, t14, t15]
+  const t19 = hasRail && rail;
+  let t20;
+  if ($[45] !== t17 || $[46] !== t18 || $[47] !== t19) {
+    t20 = /*#__PURE__*/_jsxs(_Fragment, {
+      children: [t17, t18, t19]
     });
-    $[39] = t11;
-    $[40] = t14;
-    $[41] = t15;
-    $[42] = t16;
+    $[45] = t17;
+    $[46] = t18;
+    $[47] = t19;
+    $[48] = t20;
   } else {
-    t16 = $[42];
+    t20 = $[48];
   }
-  let t17;
-  if ($[43] !== layout || $[44] !== props || $[45] !== style || $[46] !== t10 || $[47] !== t16 || $[48] !== t7 || $[49] !== t8 || $[50] !== t9) {
-    t17 = {
+  let t21;
+  if ($[49] !== layout || $[50] !== props || $[51] !== style || $[52] !== t10 || $[53] !== t11 || $[54] !== t12 || $[55] !== t20 || $[56] !== t8 || $[57] !== t9) {
+    t21 = {
       ...props,
-      className: t7,
+      className: t8,
       style,
       "data-layout": layout,
-      "data-toolbar": t8,
-      "data-sidebar": t9,
-      "data-side-panel": t10,
-      children: t16
+      "data-toolbar": t9,
+      "data-sidebar": t10,
+      "data-side-panel": t11,
+      "data-rail": t12,
+      children: t20
     };
-    $[43] = layout;
-    $[44] = props;
-    $[45] = style;
-    $[46] = t10;
-    $[47] = t16;
-    $[48] = t7;
-    $[49] = t8;
-    $[50] = t9;
-    $[51] = t17;
+    $[49] = layout;
+    $[50] = props;
+    $[51] = style;
+    $[52] = t10;
+    $[53] = t11;
+    $[54] = t12;
+    $[55] = t20;
+    $[56] = t8;
+    $[57] = t9;
+    $[58] = t21;
   } else {
-    t17 = $[51];
+    t21 = $[58];
   }
-  let t18;
-  if ($[52] !== ref || $[53] !== render || $[54] !== t17) {
-    t18 = {
+  let t22;
+  if ($[59] !== ref || $[60] !== render || $[61] !== t21) {
+    t22 = {
       render,
       ref,
       defaultTagName: "div",
-      props: t17
+      props: t21
     };
-    $[52] = ref;
-    $[53] = render;
-    $[54] = t17;
-    $[55] = t18;
+    $[59] = ref;
+    $[60] = render;
+    $[61] = t21;
+    $[62] = t22;
   } else {
-    t18 = $[55];
+    t22 = $[62];
   }
-  const element = useRender(t18);
-  const t19 = !hasToolbar;
-  const t20 = !rightOpen;
-  const t21 = !leftOpen;
-  let t22;
-  if ($[56] !== t19 || $[57] !== t20 || $[58] !== t21) {
-    t22 = {
-      top: t19,
-      right: t20,
+  const element = useRender(t22);
+  const t23 = !hasToolbar;
+  const t24 = !leftOpen;
+  let t25;
+  if ($[63] !== t23 || $[64] !== t24) {
+    t25 = {
+      top: t23,
+      right: true,
       bottom: true,
-      left: t21
+      left: t24
     };
-    $[56] = t19;
-    $[57] = t20;
-    $[58] = t21;
-    $[59] = t22;
+    $[63] = t23;
+    $[64] = t24;
+    $[65] = t25;
   } else {
-    t22 = $[59];
+    t25 = $[65];
   }
-  let t23;
-  if ($[60] !== layout || $[61] !== t22) {
-    t23 = {
+  let t26;
+  if ($[66] !== layout || $[67] !== t25) {
+    t26 = {
       layout,
-      edges: t22
+      edges: t25
     };
-    $[60] = layout;
-    $[61] = t22;
-    $[62] = t23;
+    $[66] = layout;
+    $[67] = t25;
+    $[68] = t26;
   } else {
-    t23 = $[62];
+    t26 = $[68];
   }
-  const context = t23;
-  let t24;
-  if ($[63] !== context || $[64] !== element) {
-    t24 = /*#__PURE__*/_jsx(WorkspaceContext, {
-      value: context,
+  const context = t26;
+  let t27;
+  if ($[69] !== topRowSlot) {
+    t27 = {
+      slot: topRowSlot,
+      register: setTopRowSlot
+    };
+    $[69] = topRowSlot;
+    $[70] = t27;
+  } else {
+    t27 = $[70];
+  }
+  let t28;
+  if ($[71] !== element || $[72] !== t27) {
+    t28 = /*#__PURE__*/_jsx(TopRowSlotContext, {
+      value: t27,
       children: element
     });
-    $[63] = context;
-    $[64] = element;
-    $[65] = t24;
+    $[71] = element;
+    $[72] = t27;
+    $[73] = t28;
+  } else {
+    t28 = $[73];
+  }
+  let t29;
+  if ($[74] !== context || $[75] !== t28) {
+    t29 = /*#__PURE__*/_jsx(WorkspaceContext, {
+      value: context,
+      children: t28
+    });
+    $[74] = context;
+    $[75] = t28;
+    $[76] = t29;
   } else {
-    t24 = $[65];
+    t29 = $[76];
   }
-  return t24;
+  return t29;
 }

package/dist/workspace/WorkspaceRail.d.ts

@@ -0,0 +1,13 @@
+import { useRender } from '@base-ui/react/use-render';
+export type WorkspaceRailProps = useRender.ComponentProps<'nav'>;
+/**
+ * The column of buttons at the right edge of a `Workspace`, 48 pixels wide. Its first separator stands on
+ * the top row's bottom line when one 32 pixel button comes before it. It makes no stacking context, so a
+ * hover never covers the sheet's edge; a tooltip still rises above the sheet.
+ */
+export declare function WorkspaceRail({ className, render, ref, ...props }: WorkspaceRailProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export declare function WorkspaceRailSeparator({ className }: {
+    className?: string;
+}): import("react").JSX.Element;
+/** Pushes what follows to the bottom of the rail. */
+export declare function WorkspaceRailSpacer(): import("react").JSX.Element;

package/dist/workspace/WorkspaceRail.js

@@ -0,0 +1,125 @@
+import { c as _c } from "react/compiler-runtime";
+import clsx from 'clsx';
+import { useTranslation } from 'react-i18next';
+import { useRender } from '@base-ui/react/use-render';
+/**
+ * The column of buttons at the right edge of a `Workspace`, 48 pixels wide. Its first separator stands on
+ * the top row's bottom line when one 32 pixel button comes before it. It makes no stacking context, so a
+ * hover never covers the sheet's edge; a tooltip still rises above the sheet.
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+export function WorkspaceRail(t0) {
+  const $ = _c(17);
+  let className;
+  let props;
+  let ref;
+  let render;
+  if ($[0] !== t0) {
+    ({
+      className,
+      render,
+      ref,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = props;
+    $[3] = ref;
+    $[4] = render;
+  } else {
+    className = $[1];
+    props = $[2];
+    ref = $[3];
+    render = $[4];
+  }
+  const {
+    t
+  } = useTranslation("ui");
+  let t1;
+  if ($[5] !== t) {
+    t1 = t("workspace.tools");
+    $[5] = t;
+    $[6] = t1;
+  } else {
+    t1 = $[6];
+  }
+  let t2;
+  if ($[7] !== className) {
+    t2 = clsx("ade-workspace-rail", className);
+    $[7] = className;
+    $[8] = t2;
+  } else {
+    t2 = $[8];
+  }
+  let t3;
+  if ($[9] !== props || $[10] !== t1 || $[11] !== t2) {
+    t3 = {
+      "aria-label": t1,
+      ...props,
+      className: t2
+    };
+    $[9] = props;
+    $[10] = t1;
+    $[11] = t2;
+    $[12] = t3;
+  } else {
+    t3 = $[12];
+  }
+  let t4;
+  if ($[13] !== ref || $[14] !== render || $[15] !== t3) {
+    t4 = {
+      render,
+      ref,
+      defaultTagName: "nav",
+      props: t3
+    };
+    $[13] = ref;
+    $[14] = render;
+    $[15] = t3;
+    $[16] = t4;
+  } else {
+    t4 = $[16];
+  }
+  return useRender(t4);
+}
+export function WorkspaceRailSeparator(t0) {
+  const $ = _c(4);
+  const {
+    className
+  } = t0;
+  let t1;
+  if ($[0] !== className) {
+    t1 = clsx("ade-workspace-rail-separator", className);
+    $[0] = className;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  let t2;
+  if ($[2] !== t1) {
+    t2 = /*#__PURE__*/_jsx("span", {
+      "aria-hidden": true,
+      className: t1
+    });
+    $[2] = t1;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  return t2;
+}
+/** Pushes what follows to the bottom of the rail. */
+export function WorkspaceRailSpacer() {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = /*#__PURE__*/_jsx("span", {
+      "aria-hidden": true,
+      className: "ade-workspace-rail-spacer"
+    });
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}

package/dist/workspace/WorkspaceTopRow.d.ts

@@ -0,0 +1,15 @@
+import { type ComponentProps, type ReactNode } from 'react';
+export interface WorkspaceTopRowProps extends Omit<ComponentProps<'header'>, 'children'> {
+    /** Before the project: room for a window's own controls, and a button that brings the sidebar back. */
+    leading?: ReactNode;
+    /** The project: a switcher, or a strip of project tabs. */
+    children: ReactNode;
+    /** Leaves out the slot a lone pane's bar goes into, as beside project tabs, which take the row. */
+    slotless?: boolean;
+}
+/**
+ * The 47 pixel band at the top of a `Workspace`'s sheet, as its `toolbar`: the project, and beside it the
+ * slot where the bar of a lone pane goes (`useTopRowSlot`, `PaneBar`'s `container`). The window drags by
+ * every part of it that is not a control.
+ */
+export declare function WorkspaceTopRow({ leading, children, slotless, className, ...props }: WorkspaceTopRowProps): import("react").JSX.Element;