@dataverse-kit/surface-kit 0.2.1 → 0.4.0

package/dist/index.d.ts

@@ -2,64 +2,16 @@ import { DialogSizePreset } from './core.js';
 export { CALLOUT_DEFAULT_WIDTH, DIALOG_SIZE_PX, MODAL_AUTOSIZE_MIN_WIDTH, PANEL_DEFAULT_WIDTH, PanelKind, calloutFormDefaults, calloutWidthPx, dialogHeightCss, dialogWidthCss, dialogWidthPx, panelCustomWidthPx, panelKindFromWidth } from './core.js';
 import { C as ColumnCount } from './columns-BlpFO5VD.js';
 export { c as clampSpan, g as gridTemplateForColumns } from './columns-BlpFO5VD.js';
-import { Breakpoint, ResponsiveValue } from './responsive.js';
-export { BREAKPOINTS, CARD_REFLOW_WIDTH, ResponsiveMode, StyleObject, fieldGridStyle, fieldRowStyle, resolveBreakpoint, resolveResponsiveValue, sectionStackingStyle } from './responsive.js';
+import { Breakpoint } from './responsive.js';
+export { BREAKPOINTS, CARD_REFLOW_WIDTH, ResponsiveMode, ResponsiveValue, StyleObject, fieldGridStyle, fieldRowStyle, resolveBreakpoint, resolveResponsiveValue, sectionStackingStyle } from './responsive.js';
 export { colors, layout, radius, spacing, typography } from '@dataverse-kit/design-tokens';
 import { Theme, ICommandBarItemProps } from '@fluentui/react';
-import * as React from 'react';
+import { D as Density } from './useDensity-BePwtUzY.js';
+export { C as ContainerSize, f as DensityContext, d as densityScale, s as scaleSpacing, b as useContainerBreakpoint, u as useContainerSize, a as useContainerWidth, g as useDensity, e as useMediaQuery, c as useResponsiveValue } from './useDensity-BePwtUzY.js';
 import React__default, { CSSProperties, ReactNode, RefObject, ReactElement } from 'react';
 
 declare function createDynamicsTheme(): Theme;
 
-type Density = 'comfortable' | 'compact';
-declare const densityScale: {
-    readonly comfortable: 1;
-    readonly compact: 0.75;
-};
-/** Scale a base spacing value (px) by the active density. */
-declare function scaleSpacing(value: number, density?: Density): number;
-
-interface ContainerSize {
-    width: number;
-    height: number;
-    inlineSize: number;
-    blockSize: number;
-}
-/** Observe an element's size via ResizeObserver. Pass a ref; returns {width,height,inlineSize,blockSize}. */
-declare function useContainerSize<T extends HTMLElement = HTMLElement>(ref: React.RefObject<T>): ContainerSize;
-
-/**
- * Create-and-return a ref plus the observed width of the element it is attached to.
- * `const [ref, width] = useContainerWidth(); return <div ref={ref}>…</div>`.
- */
-declare function useContainerWidth<T extends HTMLElement = HTMLDivElement>(): [React.RefObject<T>, number];
-
-/**
- * Resolve the *container's* current breakpoint (not the viewport's) — the correctness
- * fix for a surface inside a PCF, where width comes from `context.allocatedWidth`.
- * Returns `[ref, breakpoint, width]`.
- */
-declare function useContainerBreakpoint<T extends HTMLElement = HTMLDivElement>(): [React.RefObject<T>, Breakpoint, number];
-
-/**
- * Resolve a responsive value against the *container's* current breakpoint.
- * `const [ref, cols] = useResponsiveValue({ xs: 1, md: 2, lg: 3 });`
- */
-declare function useResponsiveValue<T, E extends HTMLElement = HTMLDivElement>(value: ResponsiveValue<T>): [React.RefObject<E>, T | undefined];
-
-/** Viewport media-query match — the SSR-safe / no-ResizeObserver fallback to the container hooks. */
-declare function useMediaQuery(query: string): boolean;
-
-/**
- * Form-level spacing density. `FormSurface` provides it; `Section` (and any future
- * container) reads it via `useDensity()`, so a single `density` switch on the form
- * cascades to every section instead of being set per-section. Defaults to
- * `'comfortable'` (the Dynamics default) — `'compact'` scales spacing by 0.75.
- */
-declare const DensityContext: React.Context<Density>;
-/** Read the ambient spacing density (defaults to `'comfortable'` outside a provider). */
-declare const useDensity: () => Density;
-
 type SurfaceVariant = 'card' | 'flat' | 'placeholder';
 type Alignment = 'left' | 'center' | 'right';
 interface SurfaceActionButton {
@@ -174,6 +126,11 @@ interface SectionHeaderProps {
     collapsed?: boolean;
     onToggle?: () => void;
 }
+/** A Dynamics form-header field: a small label above its (usually bolder) value. */
+interface HeaderField {
+    label: ReactNode;
+    value: ReactNode;
+}
 interface FormHeaderProps {
     title?: ReactNode;
     subtitle?: ReactNode;
@@ -182,7 +139,10 @@ interface FormHeaderProps {
     subtitleColor?: string;
     /** Avatar/persona shown to the left of the title. */
     persona?: ReactNode;
-    /** Right side of the header (e.g. KPI header fields). */
+    /** Dynamics-style header fields (label-over-value KPI pairs, separated) shown on the
+     *  right. Renders before `actions`. */
+    headerFields?: HeaderField[];
+    /** Right side of the header (e.g. custom controls) — rendered after `headerFields`. */
     actions?: ReactNode;
     className?: string;
 }
@@ -191,6 +151,8 @@ interface SurfaceTab {
     label: string;
     content: ReactNode;
     iconName?: string;
+    /** Hover tooltip for the tab (shows on the label + icon via Fluent TooltipHost). */
+    tooltip?: string;
     disabled?: boolean;
 }
 interface PivotSurfaceProps {
@@ -210,8 +172,12 @@ interface CommandSurfaceProps {
 }
 interface ActionBarProps {
     buttons: SurfaceActionButton[];
-    /** Default `'right'`. */
+    /** Alignment of the right button cluster (left-positioned buttons always pin left).
+     *  Default `'right'`. */
     alignment?: Alignment;
+    /** Reverse the right cluster's order so the primary action sits first (leftmost) —
+     *  the "inverted" Dynamics footer order. Default false. */
+    inverted?: boolean;
     /** Stick to the bottom of the scroll container. Default true. */
     sticky?: boolean;
     className?: string;
@@ -259,7 +225,9 @@ interface FormDialogSurfaceProps {
         current: number;
         total: number;
     };
-    /** Footer content (e.g. an ActionBar). */
+    /** Footer content. Rendered **bare** (no wrapper border/padding), so pass a component
+     *  that supplies its own top divider + padding + alignment — use `ActionBar` or `Footer`.
+     *  Raw content (e.g. a lone `<button>`) renders flush against the body. */
     footer?: ReactNode;
     className?: string;
     children?: ReactNode;
@@ -274,6 +242,9 @@ interface ModalSurfaceProps {
     isBlocking?: boolean;
     /** Auto width with a 1000px min (Track-and-Ship pattern) instead of a fixed preset. */
     autoSize?: boolean;
+    /** Footer content. Rendered **bare** (no wrapper border/padding), so pass a component
+     *  that supplies its own top divider + padding + alignment — use `ActionBar` or `Footer`.
+     *  Raw content (e.g. a lone `<button>`) renders flush against the body. */
     footer?: ReactNode;
     className?: string;
     children?: ReactNode;
@@ -414,4 +385,4 @@ type ResolvedSurface = {
 /** Resolve a (duck-typed) form-runtime FormDefinition to the right surface + sizing props. */
 declare function fromFormDefinition(def: FormDefinitionLike): ResolvedSurface;
 
-export { ActionBar, type ActionBarProps, type Alignment, Breakpoint, type CalloutDirection, CalloutSurface, type CalloutSurfaceProps, ColumnCount, ColumnLayout, type ColumnLayoutProps, CommandSurface, type CommandSurfaceProps, type ContainerSize, DashboardSurface, type DashboardSurfaceProps, type Density, DensityContext, DialogSizePreset, FieldRow, type FieldRowProps, type FluentPanelType, Footer, type FooterProps, type FormDefinitionLike, FormDialogSurface, type FormDialogSurfaceProps, FormHeader, type FormHeaderProps, type FormSettingsLike, FormSurface, type FormSurfaceProps, MasterDetailSurface, type MasterDetailSurfaceProps, ModalSurface, type ModalSurfaceProps, PageSurface, type PageSurfaceProps, PanelSurface, type PanelSurfaceProps, PivotSurface, type PivotSurfaceProps, type ResolvedSurface, ResponsiveValue, Section, SectionCard, type SectionCardProps, SectionHeader, type SectionHeaderProps, type SectionProps, type SurfaceActionButton, type SurfaceFormType, type SurfaceTab, type SurfaceVariant, TooltipSurface, type TooltipSurfaceProps, TwoColumnLayout, type TwoColumnLayoutProps, createDynamicsTheme, densityScale, fromFormDefinition, scaleSpacing, useContainerBreakpoint, useContainerSize, useContainerWidth, useDensity, useMediaQuery, useResponsiveValue };
+export { ActionBar, type ActionBarProps, type Alignment, Breakpoint, type CalloutDirection, CalloutSurface, type CalloutSurfaceProps, ColumnCount, ColumnLayout, type ColumnLayoutProps, CommandSurface, type CommandSurfaceProps, DashboardSurface, type DashboardSurfaceProps, Density, DialogSizePreset, FieldRow, type FieldRowProps, type FluentPanelType, Footer, type FooterProps, type FormDefinitionLike, FormDialogSurface, type FormDialogSurfaceProps, FormHeader, type FormHeaderProps, type FormSettingsLike, FormSurface, type FormSurfaceProps, type HeaderField, MasterDetailSurface, type MasterDetailSurfaceProps, ModalSurface, type ModalSurfaceProps, PageSurface, type PageSurfaceProps, PanelSurface, type PanelSurfaceProps, PivotSurface, type PivotSurfaceProps, type ResolvedSurface, Section, SectionCard, type SectionCardProps, SectionHeader, type SectionHeaderProps, type SectionProps, type SurfaceActionButton, type SurfaceFormType, type SurfaceTab, type SurfaceVariant, TooltipSurface, type TooltipSurfaceProps, TwoColumnLayout, type TwoColumnLayoutProps, createDynamicsTheme, fromFormDefinition };

package/dist/index.mjs

@@ -494,18 +494,23 @@ var Section = ({
     ...style
   };
   const styles = mergeStyleSets3({
-    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: colors.surface,
       borderRadius: radius.card,
+      boxSizing: "border-box",
       padding: cardPad,
-      minWidth: 300,
+      minWidth: 0,
       width: "100%",
       overflow: "hidden"
     },
     placeholder: {
       border: `1px dashed ${colors.borderNeutral}`,
       borderRadius: radius.card,
+      boxSizing: "border-box",
       minHeight,
       width: "100%",
       background: "transparent"
@@ -561,6 +566,7 @@ var SectionCard = ({
 );
 
 // src/containers/FormHeader.tsx
+import React2 from "react";
 import { mergeStyleSets as mergeStyleSets4 } from "@fluentui/react";
 import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
 var FormHeader = ({
@@ -570,6 +576,7 @@ var FormHeader = ({
   titleColor,
   subtitleColor,
   persona,
+  headerFields,
   actions,
   className
 }) => {
@@ -593,8 +600,29 @@ var FormHeader = ({
       lineHeight: "1.3"
     },
     status: { fontSize: typography.fontSize.smPlus, color: colors.textSecondary },
-    subtitle: { fontSize: typography.fontSize.smPlus, color: subtitleColor || colors.textSecondary, marginTop: 2 }
+    subtitle: { fontSize: typography.fontSize.smPlus, color: subtitleColor || 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: typography.fontSize.md,
+      fontWeight: typography.fontWeight.semibold,
+      color: colors.textPrimary,
+      whiteSpace: "nowrap",
+      overflow: "hidden",
+      textOverflow: "ellipsis"
+    },
+    fieldLabel: {
+      fontSize: typography.fontSize.sm,
+      color: colors.textSecondary,
+      whiteSpace: "nowrap",
+      overflow: "hidden",
+      textOverflow: "ellipsis"
+    },
+    divider: { width: 1, height: 24, background: colors.borderNeutral, margin: "0 12px", flexShrink: 0 }
   });
+  const hasFields = headerFields != null && headerFields.length > 0;
   return /* @__PURE__ */ jsxs4("div", { className: [styles.root, className].filter(Boolean).join(" "), children: [
     /* @__PURE__ */ jsxs4("div", { className: styles.main, children: [
       persona,
@@ -606,13 +634,29 @@ var FormHeader = ({
         subtitle != null && /* @__PURE__ */ jsx9("div", { className: styles.subtitle, children: subtitle })
       ] })
     ] }),
-    actions != null && /* @__PURE__ */ jsx9("div", { children: actions })
+    (hasFields || actions != null) && /* @__PURE__ */ jsxs4("div", { className: styles.right, children: [
+      hasFields && headerFields.map((f, i) => /* @__PURE__ */ jsxs4(React2.Fragment, { children: [
+        i > 0 && /* @__PURE__ */ jsx9("div", { className: styles.divider, "aria-hidden": true }),
+        /* @__PURE__ */ jsxs4("div", { className: styles.field, children: [
+          /* @__PURE__ */ jsx9(
+            "div",
+            {
+              className: styles.fieldValue,
+              title: typeof f.value === "string" ? f.value : void 0,
+              children: f.value
+            }
+          ),
+          /* @__PURE__ */ jsx9("div", { className: styles.fieldLabel, children: f.label })
+        ] })
+      ] }, i)),
+      actions != null && /* @__PURE__ */ jsx9("div", { style: { marginLeft: hasFields ? 12 : 0 }, children: actions })
+    ] })
   ] });
 };
 
 // src/containers/PivotSurface.tsx
 import { useState as useState4 } from "react";
-import { Pivot, PivotItem } from "@fluentui/react";
+import { Pivot, PivotItem, TooltipHost } from "@fluentui/react";
 import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
 var PivotSurface = ({
   tabs,
@@ -628,10 +672,12 @@ var PivotSurface = ({
   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__ */ jsx10(TooltipHost, { content: tab.tooltip, children: defaultRender?.(props) }) : void 0;
   return /* @__PURE__ */ jsxs5("div", { className, children: [
     /* @__PURE__ */ jsx10(
       Pivot,
@@ -646,7 +692,8 @@ var PivotSurface = ({
             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
         ))
@@ -675,16 +722,22 @@ function renderButton(b) {
   if (b.appearance === "subtle") return /* @__PURE__ */ jsx12(ActionButton, { ...common }, b.id);
   return /* @__PURE__ */ jsx12(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 rightOrdered = inverted ? [...right].reverse() : right;
   const cls = mergeStyles4(
     {
       display: "flex",
       alignItems: "center",
-      justifyContent: left.length ? "space-between" : justify,
       gap: 8,
       padding: "12px 24px",
       borderTop: `1px solid ${colors.borderNeutral}`,
@@ -695,7 +748,7 @@ var ActionBar = ({ buttons, alignment = "right", sticky = true, className }) =>
   );
   return /* @__PURE__ */ jsxs6("div", { className: cls, children: [
     left.length > 0 && /* @__PURE__ */ jsx12("div", { style: { display: "flex", gap: 8 }, children: left.map(renderButton) }),
-    /* @__PURE__ */ jsx12("div", { style: { display: "flex", gap: 8, justifyContent: justify }, children: right.map(renderButton) })
+    /* @__PURE__ */ jsx12("div", { style: { display: "flex", flex: 1, gap: 8, justifyContent: justify }, children: rightOrdered.map(renderButton) })
   ] });
 };
 
@@ -758,8 +811,7 @@ var FormDialogSurface = ({
     subheader: { fontSize: typography.fontSize.smPlus, color: colors.textSecondary, marginTop: 2 },
     headerRight: { display: "flex", alignItems: "center", gap: 8 },
     counter: { fontSize: typography.fontSize.smPlus, color: colors.textSecondary },
-    content: { flex: 1, minHeight: 0, overflow: "auto", padding: 20 },
-    footer: { borderTop: `1px solid ${colors.borderNeutral}`, padding: "12px 20px" }
+    content: { flex: 1, minHeight: 0, overflow: "auto", padding: 20 }
   });
   const showHeader = Boolean(title) || Boolean(recordCounter) || Boolean(onDismiss);
   return /* @__PURE__ */ jsxs7(
@@ -810,7 +862,7 @@ var FormDialogSurface = ({
           ] })
         ] }),
         /* @__PURE__ */ jsx14("div", { className: styles.content, children }),
-        footer && /* @__PURE__ */ jsx14("div", { className: styles.footer, children: footer })
+        footer
       ]
     }
   );
@@ -840,19 +892,12 @@ var ModalSurface = ({
       color: colors.textPrimary,
       padding: "16px 20px 0"
     },
-    content: { padding: 20 },
-    footer: {
-      borderTop: `1px solid ${colors.borderNeutral}`,
-      padding: "12px 20px",
-      display: "flex",
-      justifyContent: "flex-end",
-      gap: 8
-    }
+    content: { padding: 20 }
   });
   return /* @__PURE__ */ jsxs8(Modal2, { isOpen, onDismiss, isBlocking, className, styles: { main }, children: [
     title && /* @__PURE__ */ jsx15("div", { className: styles.title, children: title }),
     /* @__PURE__ */ jsx15("div", { className: styles.content, children }),
-    footer && /* @__PURE__ */ jsx15("div", { className: styles.footer, children: footer })
+    footer
   ] });
 };
 
@@ -926,7 +971,7 @@ var CalloutSurface = ({
 };
 
 // src/overlays/TooltipSurface.tsx
-import { TooltipHost, DirectionalHint as DirectionalHint2, TooltipDelay } from "@fluentui/react";
+import { TooltipHost as TooltipHost2, DirectionalHint as DirectionalHint2, TooltipDelay } from "@fluentui/react";
 import { jsx as jsx18 } from "react/jsx-runtime";
 var DELAY_MAP = {
   zero: TooltipDelay.zero,
@@ -938,7 +983,7 @@ var TooltipSurface = ({
   directionalHint = "bottomCenter",
   delay = "medium",
   children
-}) => /* @__PURE__ */ jsx18(TooltipHost, { content, directionalHint: DirectionalHint2[directionalHint], delay: DELAY_MAP[delay], children });
+}) => /* @__PURE__ */ jsx18(TooltipHost2, { content, directionalHint: DirectionalHint2[directionalHint], delay: DELAY_MAP[delay], children });
 
 // src/composites/MasterDetailSurface.tsx
 import { mergeStyles as mergeStyles6 } from "@fluentui/react";