@cube-dev/ui-kit 0.0.0-canary-c325dcb → 0.0.0-canary-162cdb3

package/dist/components/layout/Board/Widget.d.ts

@@ -1,152 +0,0 @@
-
-import { LayoutConstraint, ResizeHandleAxis } from "./grid-core/types.js";
-import { ContainerStyleProps, Styles } from "@tenphi/tasty";
-import { ReactNode } from "react";
-
-//#region src/components/layout/Board/Widget.d.ts
-/**
- * Where a corner resize grip sits relative to the widget's corner.
- *
- * - `'inside'` - tucked into the widget box (the default).
- * - `'corner'` - centred on the corner itself, so it lines up with a control
- *   centred on the opposite corner. The grip is drawn outside the widget's own
- *   clip to make this possible, so it needs the board to have at least half a
- *   grip's worth of `containerPadding` to show in full at the board's edge.
- *
- * Only affects corner handles (`ne`/`nw`/`se`/`sw`); the dotted edge grips
- * (`n`/`s`/`e`/`w`) always sit inside the widget.
- */
-/**
- * Where a widget's resize grips sit.
- *
- * `inside` tucks them into the widget box, `corner` centres a corner one on the
- * widget's corner, and `outside` puts every grip in the grid gutter beyond the
- * widget's edge, as a padded control of its own.
- *
- * Left unset, this resolves itself: a widget holding a nested `Board` gets
- * `outside` and every other widget gets `inside`, so the two levels of a nested
- * board can never claim the same pixel. Set it to override that per widget or
- * per board.
- */
-type BoardResizeGripPlacement = 'inside' | 'corner' | 'outside';
-/** Which corner of a widget a piece of chrome is anchored to. */
-type BoardCornerPlacement = 'ne' | 'nw' | 'se' | 'sw';
-interface CubeBoardWidgetProps extends ContainerStyleProps {
-  /** Unique id, must match the `i` of a layout item in a `Board`. */
-  id: string;
-  /** Widget content. */
-  children?: ReactNode;
-  /** Disable dragging for this widget. */
-  isDraggable?: boolean;
-  /** Disable resizing for this widget. */
-  isResizable?: boolean;
-  /** Which resize handles to show (overrides the board default). */
-  resizeHandles?: ResizeHandleAxis[];
-  /**
-   * Where the resize grips sit (overrides the board default). Unset, it is
-   * resolved from the widget's content - see {@link BoardResizeGripPlacement}.
-   */
-  resizeGripPlacement?: BoardResizeGripPlacement;
-  /**
-   * Render this widget as a card by adding a border. Widgets are always filled
-   * (`#surface-2`) and rounded; `isCard` adds the border on top. Defaults to
-   * `false` (borderless) unless the owning `Board`'s `widgetProps.isCard` opts
-   * in. Override per widget to enable or disable.
-   */
-  isCard?: boolean;
-  /**
-   * Whether the widget shows the resting ring on hover. On by default: it is the
-   * affordance that says a widget can be picked up. Turn it off for a widget
-   * that is scenery rather than a thing to grab — a chromeless layout container,
-   * a spacer — where the ring advertises an interaction the widget does not
-   * really offer. Selection and drag treatments are unaffected.
-   * @default true
-   */
-  hoverRing?: boolean;
-  /**
-   * A control anchored to one corner of the widget and centred on it — a
-   * settings button, a badge, a remove affordance.
-   *
-   * Drawn in the same layer as the corner resize grips, which is the layer that
-   * escapes the widget's own clip. Hanging such a control off the corner from
-   * inside the widget gets it cropped in half by that clip, or by an ancestor's
-   * scroll container when the widget is in the first row. It is also outside the
-   * drag gesture, so a press on it can never start a drag.
-   */
-  cornerChrome?: ReactNode;
-  /**
-   * Which corner {@link cornerChrome} sits on. Pair it with a
-   * `resizeGripPlacement="corner"` grip on the opposite corner and the two line
-   * up. @default 'ne'
-   */
-  cornerChromePlacement?: BoardCornerPlacement;
-  /**
-   * App-defined modifiers for this widget, merged into the ones the board sets
-   * so a `styles` map can match on app state: `mods={{ editing: true }}` with
-   * `styles={{ shadow: { editing: '0 0 0 1bw #primary' } }}`.
-   *
-   * Board's own modifiers always win, so a custom one can never shadow
-   * `selected`, `drag` and the rest.
-   */
-  mods?: Record<string, boolean | string | undefined>;
-  /** Minimum width in grid columns (used when the layout item omits `minW`). */
-  minW?: number;
-  /** Maximum width in grid columns (used when the layout item omits `maxW`). */
-  maxW?: number;
-  /** Minimum height in grid rows (used when the layout item omits `minH`). */
-  minH?: number;
-  /** Maximum height in grid rows (used when the layout item omits `maxH`). */
-  maxH?: number;
-  /** Per-widget layout constraints. */
-  constraints?: LayoutConstraint[];
-  /** Test id applied to the rendered widget element. */
-  qa?: string;
-  /**
-   * Style overrides applied to the rendered widget element. Individual style
-   * props (`fill`, `padding`, `radius`, `border`, ...) can also be passed
-   * directly on `Board.Widget`, just like on `Board`; they are merged into
-   * these styles (a direct prop wins over the same key in the `styles` object).
-   */
-  styles?: Styles;
-  /**
-   * Grow this widget's height in its board to fit its content (only ever
-   * increases). Pair with a nested `Board isAligned` to make the container
-   * expand until the inner board's rows fit at the parent's row height.
-   */
-  isAutoHeight?: boolean;
-  /**
-   * CSS selector for elements that must not start a pointer drag inside this
-   * widget (overrides the board's `dragCancel`).
-   */
-  dragCancel?: string;
-  /**
-   * CSS selector for the only elements from which a pointer drag may start
-   * inside this widget (overrides the board's `dragHandle`).
-   */
-  dragHandle?: string;
-  /**
-   * Disable selection for this widget while the board's `selectionMode` is on.
-   * Symmetric with `isDraggable` / `isResizable`.
-   */
-  isSelectable?: boolean;
-  /**
-   * CSS selector for descendants whose clicks must not change the selection
-   * inside this widget (overrides the board's `selectionCancel`).
-   */
-  selectionCancel?: string;
-  /**
-   * Accessible name for the widget. Falls back to `qa`, then the layout item id
-   * — both of which are developer-facing, so set this whenever the widget is
-   * user-visible. Also used for the single-selection announcement.
-   */
-  'aria-label'?: string;
-}
-/**
- * Declares a widget's content and per-widget options. Rendering and positioning
- * are performed by the owning `Board` (the component itself renders nothing),
- * which is what allows a widget to be transferred between boards.
- */
-declare function Widget(props: CubeBoardWidgetProps): null;
-//#endregion
-export { BoardCornerPlacement, BoardResizeGripPlacement, CubeBoardWidgetProps, Widget };
-//# sourceMappingURL=Widget.d.ts.map

package/dist/components/layout/Board/Widget.js

@@ -1,76 +0,0 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-c325dcb | Cube Dev Team */
-import { extractStyles } from "../../../utils/styles.js";
-import { useLayoutEffect as useLayoutEffect$1 } from "../../../utils/react/useLayoutEffect.js";
-import { useBoardRegistry } from "./board-context.js";
-import { CONTAINER_STYLES } from "@tenphi/tasty";
-import { useEffect, useRef } from "react";
-
-//#region src/components/layout/Board/Widget.tsx
-/**
-* Shallow-compare two style maps by their top-level keys. Direct style props
-* (e.g. `fill`) are primitives, so this reliably detects a real change while
-* ignoring the fresh object identity `extractStyles` produces each render.
-*/
-function shallowEqualStyles(a, b) {
-	if (a === b) return true;
-	if (!a || !b) return false;
-	const aKeys = Object.keys(a);
-	const bKeys = Object.keys(b);
-	if (aKeys.length !== bKeys.length) return false;
-	for (const key of aKeys) if (a[key] !== b[key]) return false;
-	return true;
-}
-/**
-* Declares a widget's content and per-widget options. Rendering and positioning
-* are performed by the owning `Board` (the component itself renders nothing),
-* which is what allows a widget to be transferred between boards.
-*/
-function Widget(props) {
-	const { id, children, isDraggable, isResizable, resizeHandles, resizeGripPlacement, isCard, hoverRing, cornerChrome, cornerChromePlacement, mods, minW, maxW, minH, maxH, constraints, qa, isAutoHeight, dragCancel, dragHandle, isSelectable, selectionCancel, "aria-label": ariaLabel } = props;
-	const registry = useBoardRegistry();
-	const extractedStyles = extractStyles(props, CONTAINER_STYLES);
-	const nextStyles = Object.keys(extractedStyles).length > 0 ? extractedStyles : void 0;
-	const stylesRef = useRef(void 0);
-	if (!shallowEqualStyles(stylesRef.current, nextStyles)) stylesRef.current = nextStyles;
-	const styles = stylesRef.current;
-	const ownerRef = useRef({});
-	useLayoutEffect$1(() => {
-		registry?.store.register({
-			id,
-			content: children,
-			isDraggable,
-			isResizable,
-			resizeHandles,
-			resizeGripPlacement,
-			isCard,
-			hoverRing,
-			cornerChrome,
-			cornerChromePlacement,
-			mods,
-			minW,
-			maxW,
-			minH,
-			maxH,
-			constraints,
-			qa,
-			styles,
-			isAutoHeight,
-			dragCancel,
-			dragHandle,
-			isSelectable,
-			selectionCancel,
-			"aria-label": ariaLabel
-		}, ownerRef.current);
-	});
-	useEffect(() => {
-		const owner = ownerRef.current;
-		return () => {
-			registry?.store.unregister(id, owner);
-		};
-	}, [id]);
-	return null;
-}
-
-//#endregion
-export { Widget };
-//# sourceMappingURL=Widget.js.map

package/dist/components/layout/Board/Widget.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Widget.js","names":["CONTAINER_STYLES","ContainerStyleProps","Styles","ReactNode","useEffect","useRef","useLayoutEffect","extractStyles","useBoardRegistry","LayoutConstraint","ResizeHandleAxis","BoardResizeGripPlacement","BoardCornerPlacement","CubeBoardWidgetProps","id","children","isDraggable","isResizable","resizeHandles","resizeGripPlacement","isCard","hoverRing","cornerChrome","cornerChromePlacement","mods","Record","minW","maxW","minH","maxH","constraints","qa","styles","isAutoHeight","dragCancel","dragHandle","isSelectable","selectionCancel","shallowEqualStyles","a","b","aKeys","Object","keys","bKeys","length","key","Widget","props","ariaLabel","registry","extractedStyles","nextStyles","undefined","stylesRef","current","ownerRef","store","register","content","owner","unregister"],"sources":["../../../../src/components/layout/Board/Widget.tsx"],"sourcesContent":["import { CONTAINER_STYLES, ContainerStyleProps, Styles } from '@tenphi/tasty';\nimport { ReactNode, useEffect, useRef } from 'react';\n\nimport { useLayoutEffect } from '../../../utils/react';\nimport { extractStyles } from '../../../utils/styles';\n\nimport { useBoardRegistry } from './board-context';\nimport { LayoutConstraint, ResizeHandleAxis } from './grid-core';\n\n/**\n * Where a corner resize grip sits relative to the widget's corner.\n *\n * - `'inside'` - tucked into the widget box (the default).\n * - `'corner'` - centred on the corner itself, so it lines up with a control\n *   centred on the opposite corner. The grip is drawn outside the widget's own\n *   clip to make this possible, so it needs the board to have at least half a\n *   grip's worth of `containerPadding` to show in full at the board's edge.\n *\n * Only affects corner handles (`ne`/`nw`/`se`/`sw`); the dotted edge grips\n * (`n`/`s`/`e`/`w`) always sit inside the widget.\n */\n/**\n * Where a widget's resize grips sit.\n *\n * `inside` tucks them into the widget box, `corner` centres a corner one on the\n * widget's corner, and `outside` puts every grip in the grid gutter beyond the\n * widget's edge, as a padded control of its own.\n *\n * Left unset, this resolves itself: a widget holding a nested `Board` gets\n * `outside` and every other widget gets `inside`, so the two levels of a nested\n * board can never claim the same pixel. Set it to override that per widget or\n * per board.\n */\nexport type BoardResizeGripPlacement = 'inside' | 'corner' | 'outside';\n\n/** Which corner of a widget a piece of chrome is anchored to. */\nexport type BoardCornerPlacement = 'ne' | 'nw' | 'se' | 'sw';\n\nexport interface CubeBoardWidgetProps extends ContainerStyleProps {\n  /** Unique id, must match the `i` of a layout item in a `Board`. */\n  id: string;\n  /** Widget content. */\n  children?: ReactNode;\n  /** Disable dragging for this widget. */\n  isDraggable?: boolean;\n  /** Disable resizing for this widget. */\n  isResizable?: boolean;\n  /** Which resize handles to show (overrides the board default). */\n  resizeHandles?: ResizeHandleAxis[];\n  /**\n   * Where the resize grips sit (overrides the board default). Unset, it is\n   * resolved from the widget's content - see {@link BoardResizeGripPlacement}.\n   */\n  resizeGripPlacement?: BoardResizeGripPlacement;\n  /**\n   * Render this widget as a card by adding a border. Widgets are always filled\n   * (`#surface-2`) and rounded; `isCard` adds the border on top. Defaults to\n   * `false` (borderless) unless the owning `Board`'s `widgetProps.isCard` opts\n   * in. Override per widget to enable or disable.\n   */\n  isCard?: boolean;\n  /**\n   * Whether the widget shows the resting ring on hover. On by default: it is the\n   * affordance that says a widget can be picked up. Turn it off for a widget\n   * that is scenery rather than a thing to grab — a chromeless layout container,\n   * a spacer — where the ring advertises an interaction the widget does not\n   * really offer. Selection and drag treatments are unaffected.\n   * @default true\n   */\n  hoverRing?: boolean;\n  /**\n   * A control anchored to one corner of the widget and centred on it — a\n   * settings button, a badge, a remove affordance.\n   *\n   * Drawn in the same layer as the corner resize grips, which is the layer that\n   * escapes the widget's own clip. Hanging such a control off the corner from\n   * inside the widget gets it cropped in half by that clip, or by an ancestor's\n   * scroll container when the widget is in the first row. It is also outside the\n   * drag gesture, so a press on it can never start a drag.\n   */\n  cornerChrome?: ReactNode;\n  /**\n   * Which corner {@link cornerChrome} sits on. Pair it with a\n   * `resizeGripPlacement=\"corner\"` grip on the opposite corner and the two line\n   * up. @default 'ne'\n   */\n  cornerChromePlacement?: BoardCornerPlacement;\n  /**\n   * App-defined modifiers for this widget, merged into the ones the board sets\n   * so a `styles` map can match on app state: `mods={{ editing: true }}` with\n   * `styles={{ shadow: { editing: '0 0 0 1bw #primary' } }}`.\n   *\n   * Board's own modifiers always win, so a custom one can never shadow\n   * `selected`, `drag` and the rest.\n   */\n  mods?: Record<string, boolean | string | undefined>;\n  /** Minimum width in grid columns (used when the layout item omits `minW`). */\n  minW?: number;\n  /** Maximum width in grid columns (used when the layout item omits `maxW`). */\n  maxW?: number;\n  /** Minimum height in grid rows (used when the layout item omits `minH`). */\n  minH?: number;\n  /** Maximum height in grid rows (used when the layout item omits `maxH`). */\n  maxH?: number;\n  /** Per-widget layout constraints. */\n  constraints?: LayoutConstraint[];\n  /** Test id applied to the rendered widget element. */\n  qa?: string;\n  /**\n   * Style overrides applied to the rendered widget element. Individual style\n   * props (`fill`, `padding`, `radius`, `border`, ...) can also be passed\n   * directly on `Board.Widget`, just like on `Board`; they are merged into\n   * these styles (a direct prop wins over the same key in the `styles` object).\n   */\n  styles?: Styles;\n  /**\n   * Grow this widget's height in its board to fit its content (only ever\n   * increases). Pair with a nested `Board isAligned` to make the container\n   * expand until the inner board's rows fit at the parent's row height.\n   */\n  isAutoHeight?: boolean;\n  /**\n   * CSS selector for elements that must not start a pointer drag inside this\n   * widget (overrides the board's `dragCancel`).\n   */\n  dragCancel?: string;\n  /**\n   * CSS selector for the only elements from which a pointer drag may start\n   * inside this widget (overrides the board's `dragHandle`).\n   */\n  dragHandle?: string;\n  /**\n   * Disable selection for this widget while the board's `selectionMode` is on.\n   * Symmetric with `isDraggable` / `isResizable`.\n   */\n  isSelectable?: boolean;\n  /**\n   * CSS selector for descendants whose clicks must not change the selection\n   * inside this widget (overrides the board's `selectionCancel`).\n   */\n  selectionCancel?: string;\n  /**\n   * Accessible name for the widget. Falls back to `qa`, then the layout item id\n   * — both of which are developer-facing, so set this whenever the widget is\n   * user-visible. Also used for the single-selection announcement.\n   */\n  'aria-label'?: string;\n}\n\n/**\n * Shallow-compare two style maps by their top-level keys. Direct style props\n * (e.g. `fill`) are primitives, so this reliably detects a real change while\n * ignoring the fresh object identity `extractStyles` produces each render.\n */\nfunction shallowEqualStyles(a?: Styles, b?: Styles): boolean {\n  if (a === b) return true;\n  if (!a || !b) return false;\n  const aKeys = Object.keys(a);\n  const bKeys = Object.keys(b);\n  if (aKeys.length !== bKeys.length) return false;\n  for (const key of aKeys) {\n    if (\n      (a as Record<string, unknown>)[key] !==\n      (b as Record<string, unknown>)[key]\n    ) {\n      return false;\n    }\n  }\n  return true;\n}\n\n/**\n * Declares a widget's content and per-widget options. Rendering and positioning\n * are performed by the owning `Board` (the component itself renders nothing),\n * which is what allows a widget to be transferred between boards.\n */\nexport function Widget(props: CubeBoardWidgetProps) {\n  const {\n    id,\n    children,\n    isDraggable,\n    isResizable,\n    resizeHandles,\n    resizeGripPlacement,\n    isCard,\n    hoverRing,\n    cornerChrome,\n    cornerChromePlacement,\n    mods,\n    minW,\n    maxW,\n    minH,\n    maxH,\n    constraints,\n    qa,\n    isAutoHeight,\n    dragCancel,\n    dragHandle,\n    isSelectable,\n    selectionCancel,\n    'aria-label': ariaLabel,\n  } = props;\n  const registry = useBoardRegistry();\n\n  // Collect direct style props (e.g. `fill`, `padding`, `radius`) and merge them\n  // with the explicit `styles` prop, mirroring how `Board` extracts its own\n  // styles. Fall back to `undefined` when nothing was provided so widgets with\n  // no styling keep a stable registration (avoids needless store churn).\n  const extractedStyles = extractStyles(props, CONTAINER_STYLES);\n  const nextStyles =\n    Object.keys(extractedStyles).length > 0 ? extractedStyles : undefined;\n\n  // `extractStyles` returns a fresh object every render, so passing it straight\n  // to `register` would make the store treat every render as a style change,\n  // bump its version, and re-render the hosting board in a loop. Keep a stable\n  // reference across renders and only swap it when the shallow style values\n  // actually change (direct props are primitives; a `styles` object is compared\n  // per top-level key).\n  const stylesRef = useRef<Styles | undefined>(undefined);\n  if (!shallowEqualStyles(stylesRef.current, nextStyles)) {\n    stylesRef.current = nextStyles;\n  }\n  const styles = stylesRef.current;\n\n  // Stable per-instance token so a stale unregister (from an unmounting copy of\n  // this widget) can't wipe out a newer instance's registration.\n  const ownerRef = useRef({});\n\n  // Register/update content on every render so content stays fresh in the store.\n  useLayoutEffect(() => {\n    registry?.store.register(\n      {\n        id,\n        content: children,\n        isDraggable,\n        isResizable,\n        resizeHandles,\n        resizeGripPlacement,\n        isCard,\n        hoverRing,\n        cornerChrome,\n        cornerChromePlacement,\n        mods,\n        minW,\n        maxW,\n        minH,\n        maxH,\n        constraints,\n        qa,\n        styles,\n        isAutoHeight,\n        dragCancel,\n        dragHandle,\n        isSelectable,\n        selectionCancel,\n        'aria-label': ariaLabel,\n      },\n      ownerRef.current,\n    );\n  });\n\n  // Remove from the store on unmount.\n  useEffect(() => {\n    const owner = ownerRef.current;\n    return () => {\n      registry?.store.unregister(id, owner);\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [id]);\n\n  return null;\n}\n"],"mappings":";;;;;;;;;;;;;AA0JA,SAASsC,mBAAmBC,GAAYC,GAAqB;AAC3D,KAAID,MAAMC,EAAG,QAAO;AACpB,KAAI,CAACD,KAAK,CAACC,EAAG,QAAO;CACrB,MAAMC,QAAQC,OAAOC,KAAKJ,EAAE;CAC5B,MAAMK,QAAQF,OAAOC,KAAKH,EAAE;AAC5B,KAAIC,MAAMI,WAAWD,MAAMC,OAAQ,QAAO;AAC1C,MAAK,MAAMC,OAAOL,MAChB,KACGF,EAA8BO,SAC9BN,EAA8BM,KAE/B,QAAO;AAGX,QAAO;;;;;;;AAQT,SAAgBC,OAAOC,OAA6B;CAClD,MAAM,EACJlC,IACAC,UACAC,aACAC,aACAC,eACAC,qBACAC,QACAC,WACAC,cACAC,uBACAC,MACAE,MACAC,MACAC,MACAC,MACAC,aACAC,IACAE,cACAC,YACAC,YACAC,cACAC,iBACA,cAAcY,cACZD;CACJ,MAAME,WAAW1C,kBAAkB;CAMnC,MAAM2C,kBAAkB5C,cAAcyC,OAAOhD,iBAAiB;CAC9D,MAAMoD,aACJV,OAAOC,KAAKQ,gBAAgB,CAACN,SAAS,IAAIM,kBAAkBE;CAQ9D,MAAMC,YAAYjD,OAA2BgD,OAAU;AACvD,KAAI,CAACf,mBAAmBgB,UAAUC,SAASH,WAAW,CACpDE,WAAUC,UAAUH;CAEtB,MAAMpB,SAASsB,UAAUC;CAIzB,MAAMC,WAAWnD,OAAO,EAAE,CAAC;AAG3BC,yBAAsB;AACpB4C,YAAUO,MAAMC,SACd;GACE5C;GACA6C,SAAS5C;GACTC;GACAC;GACAC;GACAC;GACAC;GACAC;GACAC;GACAC;GACAC;GACAE;GACAC;GACAC;GACAC;GACAC;GACAC;GACAC;GACAC;GACAC;GACAC;GACAC;GACAC;GACA,cAAcY;GACf,EACDO,SAASD,QACV;GACD;AAGFnD,iBAAgB;EACd,MAAMwD,QAAQJ,SAASD;AACvB,eAAa;AACXL,aAAUO,MAAMI,WAAW/C,IAAI8C,MAAM;;IAGtC,CAAC9C,GAAG,CAAC;AAER,QAAO"}