@dataverse-kit/surface-kit 0.3.0 → 0.4.0

package/dist/index.cjs

@@ -1,7 +1,9 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -15,6 +17,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
@@ -575,18 +585,23 @@ var Section = ({
     ...style
   };
   const styles = (0, import_react12.mergeStyleSets)({
-    card: { ...dynamicsCardStyle, boxShadow: cardShadow, padding: cardPad, minWidth: 300, width: "100%" },
+    // box-sizing:border-box so the 20px padding + 1px border are contained within
+    // `width:100%` — otherwise the card renders 42px wider than its grid cell and
+    // spills off the right edge (dashboards, page sections, fields inside dialogs).
+    card: { ...dynamicsCardStyle, boxSizing: "border-box", boxShadow: cardShadow, padding: cardPad, minWidth: 0, width: "100%" },
     flat: {
       background: import_design_tokens.colors.surface,
       borderRadius: import_design_tokens.radius.card,
+      boxSizing: "border-box",
       padding: cardPad,
-      minWidth: 300,
+      minWidth: 0,
       width: "100%",
       overflow: "hidden"
     },
     placeholder: {
       border: `1px dashed ${import_design_tokens.colors.borderNeutral}`,
       borderRadius: import_design_tokens.radius.card,
+      boxSizing: "border-box",
       minHeight,
       width: "100%",
       background: "transparent"
@@ -642,7 +657,8 @@ var SectionCard = ({
 );
 
 // src/containers/FormHeader.tsx
-var import_react13 = require("@fluentui/react");
+var import_react13 = __toESM(require("react"), 1);
+var import_react14 = require("@fluentui/react");
 var import_jsx_runtime9 = require("react/jsx-runtime");
 var FormHeader = ({
   title,
@@ -651,10 +667,11 @@ var FormHeader = ({
   titleColor,
   subtitleColor,
   persona,
+  headerFields,
   actions,
   className
 }) => {
-  const styles = (0, import_react13.mergeStyleSets)({
+  const styles = (0, import_react14.mergeStyleSets)({
     root: {
       display: "flex",
       alignItems: "center",
@@ -674,8 +691,29 @@ var FormHeader = ({
       lineHeight: "1.3"
     },
     status: { fontSize: import_design_tokens.typography.fontSize.smPlus, color: import_design_tokens.colors.textSecondary },
-    subtitle: { fontSize: import_design_tokens.typography.fontSize.smPlus, color: subtitleColor || import_design_tokens.colors.textSecondary, marginTop: 2 }
+    subtitle: { fontSize: import_design_tokens.typography.fontSize.smPlus, color: subtitleColor || import_design_tokens.colors.textSecondary, marginTop: 2 },
+    // Right cluster: Dynamics header-field summary tiles (value over label) separated by
+    // hairline dividers — mirrors form-runtime HeaderShell's SummaryTile.
+    right: { display: "flex", alignItems: "center", justifyContent: "flex-end", flexWrap: "wrap", minWidth: 0 },
+    field: { display: "flex", flexDirection: "column", gap: 2, maxWidth: 200, minWidth: 0 },
+    fieldValue: {
+      fontSize: import_design_tokens.typography.fontSize.md,
+      fontWeight: import_design_tokens.typography.fontWeight.semibold,
+      color: import_design_tokens.colors.textPrimary,
+      whiteSpace: "nowrap",
+      overflow: "hidden",
+      textOverflow: "ellipsis"
+    },
+    fieldLabel: {
+      fontSize: import_design_tokens.typography.fontSize.sm,
+      color: import_design_tokens.colors.textSecondary,
+      whiteSpace: "nowrap",
+      overflow: "hidden",
+      textOverflow: "ellipsis"
+    },
+    divider: { width: 1, height: 24, background: import_design_tokens.colors.borderNeutral, margin: "0 12px", flexShrink: 0 }
   });
+  const hasFields = headerFields != null && headerFields.length > 0;
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: [styles.root, className].filter(Boolean).join(" "), children: [
     /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: styles.main, children: [
       persona,
@@ -687,13 +725,29 @@ var FormHeader = ({
         subtitle != null && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: styles.subtitle, children: subtitle })
       ] })
     ] }),
-    actions != null && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { children: actions })
+    (hasFields || actions != null) && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: styles.right, children: [
+      hasFields && headerFields.map((f, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react13.default.Fragment, { children: [
+        i > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: styles.divider, "aria-hidden": true }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: styles.field, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            "div",
+            {
+              className: styles.fieldValue,
+              title: typeof f.value === "string" ? f.value : void 0,
+              children: f.value
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: styles.fieldLabel, children: f.label })
+        ] })
+      ] }, i)),
+      actions != null && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { marginLeft: hasFields ? 12 : 0 }, children: actions })
+    ] })
   ] });
 };
 
 // src/containers/PivotSurface.tsx
-var import_react14 = require("react");
-var import_react15 = require("@fluentui/react");
+var import_react15 = require("react");
+var import_react16 = require("@fluentui/react");
 var import_jsx_runtime10 = require("react/jsx-runtime");
 var PivotSurface = ({
   tabs,
@@ -704,30 +758,33 @@ var PivotSurface = ({
   className
 }) => {
   const firstEnabledId = tabs.find((t) => !t.disabled)?.id ?? tabs[0]?.id;
-  const [internal, setInternal] = (0, import_react14.useState)(defaultSelectedId ?? firstEnabledId);
+  const [internal, setInternal] = (0, import_react15.useState)(defaultSelectedId ?? firstEnabledId);
   const selected = selectedId ?? internal;
   const handleLinkClick = (item) => {
     const id = item?.props.itemKey;
     if (!id) return;
+    if (tabs.find((t) => t.id === id)?.disabled) return;
     if (selectedId == null) setInternal(id);
     onTabChange?.(id);
   };
   const active = tabs.find((t) => t.id === selected) ?? tabs[0];
+  const renderItemLink = (tab) => tab.tooltip ? (props, defaultRender) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react16.TooltipHost, { content: tab.tooltip, children: defaultRender?.(props) }) : void 0;
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className, children: [
     /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-      import_react15.Pivot,
+      import_react16.Pivot,
       {
         selectedKey: selected,
         onLinkClick: handleLinkClick,
         linkFormat,
         headersOnly: true,
         children: tabs.map((t) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-          import_react15.PivotItem,
+          import_react16.PivotItem,
           {
             itemKey: t.id,
             headerText: t.label,
             itemIcon: t.iconName,
-            headerButtonProps: t.disabled ? { disabled: true } : void 0
+            onRenderItemLink: renderItemLink(t),
+            headerButtonProps: t.disabled ? { disabled: true, style: { opacity: 0.4, cursor: "not-allowed", pointerEvents: "none" } } : void 0
           },
           t.id
         ))
@@ -738,12 +795,12 @@ var PivotSurface = ({
 };
 
 // src/containers/CommandSurface.tsx
-var import_react16 = require("@fluentui/react");
+var import_react17 = require("@fluentui/react");
 var import_jsx_runtime11 = require("react/jsx-runtime");
-var CommandSurface = ({ items, overflowItems, farItems, className }) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react16.CommandBar, { items, overflowItems, farItems, styles: { root: { padding: 0 } } }) });
+var CommandSurface = ({ items, overflowItems, farItems, className }) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react17.CommandBar, { items, overflowItems, farItems, styles: { root: { padding: 0 } } }) });
 
 // src/containers/ActionBar.tsx
-var import_react17 = require("@fluentui/react");
+var import_react18 = require("@fluentui/react");
 var import_jsx_runtime12 = require("react/jsx-runtime");
 function renderButton(b) {
   const common = {
@@ -752,20 +809,26 @@ function renderButton(b) {
     onClick: b.onClick,
     iconProps: b.iconName ? { iconName: b.iconName } : void 0
   };
-  if (b.appearance === "primary") return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react17.PrimaryButton, { ...common }, b.id);
-  if (b.appearance === "subtle") return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react17.ActionButton, { ...common }, b.id);
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react17.DefaultButton, { ...common }, b.id);
+  if (b.appearance === "primary") return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react18.PrimaryButton, { ...common }, b.id);
+  if (b.appearance === "subtle") return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react18.ActionButton, { ...common }, b.id);
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react18.DefaultButton, { ...common }, b.id);
 }
-var ActionBar = ({ buttons, alignment = "right", sticky = true, className }) => {
+var ActionBar = ({
+  buttons,
+  alignment = "right",
+  inverted = false,
+  sticky = true,
+  className
+}) => {
   const justify = alignment === "left" ? "flex-start" : alignment === "center" ? "center" : "flex-end";
   const visible = buttons.filter((b) => !b.hidden);
   const left = visible.filter((b) => b.position === "left");
   const right = visible.filter((b) => b.position !== "left");
-  const cls = (0, import_react17.mergeStyles)(
+  const rightOrdered = inverted ? [...right].reverse() : right;
+  const cls = (0, import_react18.mergeStyles)(
     {
       display: "flex",
       alignItems: "center",
-      justifyContent: left.length ? "space-between" : justify,
       gap: 8,
       padding: "12px 24px",
       borderTop: `1px solid ${import_design_tokens.colors.borderNeutral}`,
@@ -776,16 +839,16 @@ var ActionBar = ({ buttons, alignment = "right", sticky = true, className }) =>
   );
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: cls, children: [
     left.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { style: { display: "flex", gap: 8 }, children: left.map(renderButton) }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { style: { display: "flex", gap: 8, justifyContent: justify }, children: right.map(renderButton) })
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { style: { display: "flex", flex: 1, gap: 8, justifyContent: justify }, children: rightOrdered.map(renderButton) })
   ] });
 };
 
 // src/containers/Footer.tsx
-var import_react18 = require("@fluentui/react");
+var import_react19 = require("@fluentui/react");
 var import_jsx_runtime13 = require("react/jsx-runtime");
 var Footer = ({ sticky = true, align = "right", className, children }) => {
   const justify = align === "left" ? "flex-start" : align === "center" ? "center" : "flex-end";
-  const cls = (0, import_react18.mergeStyles)(
+  const cls = (0, import_react19.mergeStyles)(
     {
       display: "flex",
       alignItems: "center",
@@ -802,7 +865,7 @@ var Footer = ({ sticky = true, align = "right", className, children }) => {
 };
 
 // src/overlays/FormDialogSurface.tsx
-var import_react19 = require("@fluentui/react");
+var import_react20 = require("@fluentui/react");
 var import_jsx_runtime14 = require("react/jsx-runtime");
 var FormDialogSurface = ({
   isOpen,
@@ -820,7 +883,7 @@ var FormDialogSurface = ({
 }) => {
   const widthCss = dialogWidthCss({ width, size });
   const heightCss = dialogHeightCss(height);
-  const styles = (0, import_react19.mergeStyleSets)({
+  const styles = (0, import_react20.mergeStyleSets)({
     header: {
       display: "flex",
       alignItems: "center",
@@ -839,12 +902,11 @@ var FormDialogSurface = ({
     subheader: { fontSize: import_design_tokens.typography.fontSize.smPlus, color: import_design_tokens.colors.textSecondary, marginTop: 2 },
     headerRight: { display: "flex", alignItems: "center", gap: 8 },
     counter: { fontSize: import_design_tokens.typography.fontSize.smPlus, color: import_design_tokens.colors.textSecondary },
-    content: { flex: 1, minHeight: 0, overflow: "auto", padding: 20 },
-    footer: { borderTop: `1px solid ${import_design_tokens.colors.borderNeutral}`, padding: "12px 20px" }
+    content: { flex: 1, minHeight: 0, overflow: "auto", padding: 20 }
   });
   const showHeader = Boolean(title) || Boolean(recordCounter) || Boolean(onDismiss);
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
-    import_react19.Modal,
+    import_react20.Modal,
     {
       isOpen,
       onDismiss,
@@ -880,7 +942,7 @@ var FormDialogSurface = ({
               recordCounter.total
             ] }),
             onDismiss && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-              import_react19.IconButton,
+              import_react20.IconButton,
               {
                 iconProps: { iconName: "Cancel" },
                 ariaLabel: "Close",
@@ -891,14 +953,14 @@ var FormDialogSurface = ({
           ] })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: styles.content, children }),
-        footer && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: styles.footer, children: footer })
+        footer
       ]
     }
   );
 };
 
 // src/overlays/ModalSurface.tsx
-var import_react20 = require("@fluentui/react");
+var import_react21 = require("@fluentui/react");
 var import_jsx_runtime15 = require("react/jsx-runtime");
 var ModalSurface = ({
   isOpen,
@@ -913,7 +975,7 @@ var ModalSurface = ({
   children
 }) => {
   const main = autoSize ? { width: "auto", minWidth: MODAL_AUTOSIZE_MIN_WIDTH, maxWidth: "100%" } : { maxWidth: "95vw", width: `${dialogWidthPx({ width, size })}px` };
-  const styles = (0, import_react20.mergeStyleSets)({
+  const styles = (0, import_react21.mergeStyleSets)({
     title: {
       fontSize: import_design_tokens.typography.fontSize.lg,
       fontWeight: import_design_tokens.typography.fontWeight.semibold,
@@ -921,24 +983,17 @@ var ModalSurface = ({
       color: import_design_tokens.colors.textPrimary,
       padding: "16px 20px 0"
     },
-    content: { padding: 20 },
-    footer: {
-      borderTop: `1px solid ${import_design_tokens.colors.borderNeutral}`,
-      padding: "12px 20px",
-      display: "flex",
-      justifyContent: "flex-end",
-      gap: 8
-    }
+    content: { padding: 20 }
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_react20.Modal, { isOpen, onDismiss, isBlocking, className, styles: { main }, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_react21.Modal, { isOpen, onDismiss, isBlocking, className, styles: { main }, children: [
     title && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: styles.title, children: title }),
     /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: styles.content, children }),
-    footer && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: styles.footer, children: footer })
+    footer
   ] });
 };
 
 // src/overlays/PanelSurface.tsx
-var import_react21 = require("@fluentui/react");
+var import_react22 = require("@fluentui/react");
 var import_jsx_runtime16 = require("react/jsx-runtime");
 var PanelSurface = ({
   isOpen,
@@ -954,10 +1009,10 @@ var PanelSurface = ({
   children
 }) => {
   const kind = panelType ?? panelKindFromWidth(width);
-  const resolvedType = import_react21.PanelType[kind];
+  const resolvedType = import_react22.PanelType[kind];
   const customWidth = kind === "custom" || kind === "customNear" ? `${panelCustomWidthPx(width)}px` : void 0;
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-    import_react21.Panel,
+    import_react22.Panel,
     {
       isOpen,
       onDismiss,
@@ -975,7 +1030,7 @@ var PanelSurface = ({
 };
 
 // src/overlays/CalloutSurface.tsx
-var import_react22 = require("@fluentui/react");
+var import_react23 = require("@fluentui/react");
 var import_jsx_runtime17 = require("react/jsx-runtime");
 var CalloutSurface = ({
   target,
@@ -991,11 +1046,11 @@ var CalloutSurface = ({
 }) => {
   if (!isOpen) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-    import_react22.Callout,
+    import_react23.Callout,
     {
       target: target ?? void 0,
       onDismiss,
-      directionalHint: import_react22.DirectionalHint[directionalHint],
+      directionalHint: import_react23.DirectionalHint[directionalHint],
       isBeakVisible,
       beakWidth,
       gapSpace,
@@ -1007,22 +1062,22 @@ var CalloutSurface = ({
 };
 
 // src/overlays/TooltipSurface.tsx
-var import_react23 = require("@fluentui/react");
+var import_react24 = require("@fluentui/react");
 var import_jsx_runtime18 = require("react/jsx-runtime");
 var DELAY_MAP = {
-  zero: import_react23.TooltipDelay.zero,
-  medium: import_react23.TooltipDelay.medium,
-  long: import_react23.TooltipDelay.long
+  zero: import_react24.TooltipDelay.zero,
+  medium: import_react24.TooltipDelay.medium,
+  long: import_react24.TooltipDelay.long
 };
 var TooltipSurface = ({
   content,
   directionalHint = "bottomCenter",
   delay = "medium",
   children
-}) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react23.TooltipHost, { content, directionalHint: import_react23.DirectionalHint[directionalHint], delay: DELAY_MAP[delay], children });
+}) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react24.TooltipHost, { content, directionalHint: import_react24.DirectionalHint[directionalHint], delay: DELAY_MAP[delay], children });
 
 // src/composites/MasterDetailSurface.tsx
-var import_react24 = require("@fluentui/react");
+var import_react25 = require("@fluentui/react");
 var import_jsx_runtime19 = require("react/jsx-runtime");
 var MasterDetailSurface = ({
   master,
@@ -1035,7 +1090,7 @@ var MasterDetailSurface = ({
   const masterFr = Math.min(90, Math.max(10, Math.round(splitRatio * 100)));
   const detailFr = 100 - masterFr;
   const collapsePx = BREAKPOINTS[collapseBelow];
-  const rootCls = (0, import_react24.mergeStyles)(
+  const rootCls = (0, import_react25.mergeStyles)(
     {
       display: "grid",
       gridTemplateColumns: `${masterFr}fr ${detailFr}fr`,
@@ -1044,7 +1099,7 @@ var MasterDetailSurface = ({
     },
     className
   );
-  const masterCls = (0, import_react24.mergeStyles)({
+  const masterCls = (0, import_react25.mergeStyles)({
     minWidth: 0,
     overflow: "auto",
     borderRight: `1px solid ${import_design_tokens.colors.borderNeutral}`,
@@ -1055,7 +1110,7 @@ var MasterDetailSurface = ({
       }
     }
   });
-  const detailCls = (0, import_react24.mergeStyles)({ minWidth: 0, overflow: "auto" });
+  const detailCls = (0, import_react25.mergeStyles)({ minWidth: 0, overflow: "auto" });
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: rootCls, children: [
     /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: masterCls, children: master }),
     /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: detailCls, children: detail ?? detailFallback })
@@ -1063,10 +1118,10 @@ var MasterDetailSurface = ({
 };
 
 // src/composites/DashboardSurface.tsx
-var import_react25 = require("@fluentui/react");
+var import_react26 = require("@fluentui/react");
 var import_jsx_runtime20 = require("react/jsx-runtime");
 var DashboardSurface = ({ tiles, columns = 2, gap = 16, className }) => {
-  const cls = (0, import_react25.mergeStyles)(
+  const cls = (0, import_react26.mergeStyles)(
     {
       display: "grid",
       gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,