@cube-dev/ui-kit 0.181.0 → 0.183.0

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

@@ -1 +1 @@
-{"version":3,"file":"Widget.js","names":[],"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,SAAS,mBAAmB,GAAY,GAAqB;AAC3D,KAAI,MAAM,EAAG,QAAO;AACpB,KAAI,CAAC,KAAK,CAAC,EAAG,QAAO;CACrB,MAAM,QAAQ,OAAO,KAAK,EAAE;CAC5B,MAAM,QAAQ,OAAO,KAAK,EAAE;AAC5B,KAAI,MAAM,WAAW,MAAM,OAAQ,QAAO;AAC1C,MAAK,MAAM,OAAO,MAChB,KACG,EAA8B,SAC9B,EAA8B,KAE/B,QAAO;AAGX,QAAO;;;;;;;AAQT,SAAgB,OAAO,OAA6B;CAClD,MAAM,EACJ,IACA,UACA,aACA,aACA,eACA,qBACA,QACA,WACA,cACA,uBACA,MACA,MACA,MACA,MACA,MACA,aACA,IACA,cACA,YACA,YACA,cACA,iBACA,cAAc,cACZ;CACJ,MAAM,WAAW,kBAAkB;CAMnC,MAAM,kBAAkB,cAAc,OAAO,iBAAiB;CAC9D,MAAM,aACJ,OAAO,KAAK,gBAAgB,CAAC,SAAS,IAAI,kBAAkB;CAQ9D,MAAM,YAAY,OAA2B,OAAU;AACvD,KAAI,CAAC,mBAAmB,UAAU,SAAS,WAAW,CACpD,WAAU,UAAU;CAEtB,MAAM,SAAS,UAAU;CAIzB,MAAM,WAAW,OAAO,EAAE,CAAC;AAG3B,yBAAsB;AACpB,YAAU,MAAM,SACd;GACE;GACA,SAAS;GACT;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA,cAAc;GACf,EACD,SAAS,QACV;GACD;AAGF,iBAAgB;EACd,MAAM,QAAQ,SAAS;AACvB,eAAa;AACX,aAAU,MAAM,WAAW,IAAI,MAAM;;IAGtC,CAAC,GAAG,CAAC;AAER,QAAO"}
+{"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"}

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

@@ -1,10 +1,11 @@
-/** @license MIT | @cube-dev/ui-kit v0.181.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.183.0 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { isDevEnv } from "../../../utils/is-dev-env.js";
 import { useI18n } from "../../../i18n/useI18n.js";
 import { BoardHostContext, useBoardHost } from "./board-context.js";
 import { calcGridColWidth, calcGridItemPosition } from "./grid-core/calculate.js";
+import { c } from "react-compiler-runtime";
 import { tasty } from "@tenphi/tasty";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -581,64 +582,101 @@ function warnOnce(message) {
 	yieldWarnings.add(message);
 	console.warn(message);
 }
-function ResizeHandle({ axis, placement, boardDepth, yieldWarning, isRevealed, isResizing, onResize }) {
-	const { moveProps } = useMove({
-		onMoveStart() {
-			onResize(axis, "start", 0, 0);
-		},
-		onMove(e) {
-			onResize(axis, "move", e.deltaX, e.deltaY);
-		},
-		onMoveEnd() {
-			onResize(axis, "end", 0, 0);
-		}
-	});
-	const handleProps = mergeProps$1({
-		onPointerDown: (e) => e.stopPropagation(),
-		onMouseDown: (e) => e.stopPropagation(),
-		onTouchStart: (e) => e.stopPropagation()
-	}, moveProps);
-	/**
-	* Two resize hit-zones can want the same pixel. A `corner`-placed zone
-	* straddles its widget's corner, and in a nested board that sits flush — which
-	* `isAligned` guarantees, since it pins `containerPadding` to `[0, 0]` — the
-	* host widget's corner and its bottom-right child's corner ARE one point.
-	* Geometry has nothing left to separate them with, and `z-index` cannot
-	* arbitrate either (see `GripLayerElement`), so the tie is broken here: the
-	* innermost handle takes the press. It is the more specific target, and the
-	* outer widget can still be resized from its edges — where it has any, which is
-	* what `yieldWarning` is about.
-	*
-	* Decided on the press rather than on hover so that touch, which has no hover
-	* to decide on, is covered by the same code. Nothing is lost by deciding this
-	* late: both handles ask for the same resize cursor anyway.
-	*/
-	const onPointerDown = (e) => {
-		const deeper = findDeeperHandle({
-			x: e.clientX,
-			y: e.clientY
-		}, boardDepth);
-		if (deeper) {
-			e.stopPropagation();
-			e.preventDefault();
-			warnOnce(yieldWarning);
-			forwardPointerDown(e, deeper);
-			return;
-		}
-		handleProps.onPointerDown?.(e);
-	};
-	return /* @__PURE__ */ jsx(placement === "outside" ? OutsideGripElement : HandleElement, {
-		"data-axis": axis,
-		"data-board-depth": boardDepth,
-		mods: {
+function ResizeHandle(t0) {
+	const $ = c(20);
+	const { axis, placement, boardDepth, yieldWarning, isRevealed, isResizing, onResize } = t0;
+	let t1;
+	if ($[0] !== axis || $[1] !== onResize) {
+		t1 = {
+			onMoveStart() {
+				onResize(axis, "start", 0, 0);
+			},
+			onMove(e) {
+				onResize(axis, "move", e.deltaX, e.deltaY);
+			},
+			onMoveEnd() {
+				onResize(axis, "end", 0, 0);
+			}
+		};
+		$[0] = axis;
+		$[1] = onResize;
+		$[2] = t1;
+	} else t1 = $[2];
+	const { moveProps } = useMove(t1);
+	let t2;
+	if ($[3] !== moveProps) {
+		t2 = mergeProps$1({
+			onPointerDown: _temp,
+			onMouseDown: _temp2,
+			onTouchStart: _temp3
+		}, moveProps);
+		$[3] = moveProps;
+		$[4] = t2;
+	} else t2 = $[4];
+	const handleProps = t2;
+	let t3;
+	if ($[5] !== boardDepth || $[6] !== handleProps || $[7] !== yieldWarning) {
+		t3 = (e_3) => {
+			const deeper = findDeeperHandle({
+				x: e_3.clientX,
+				y: e_3.clientY
+			}, boardDepth);
+			if (deeper) {
+				e_3.stopPropagation();
+				e_3.preventDefault();
+				warnOnce(yieldWarning);
+				forwardPointerDown(e_3, deeper);
+				return;
+			}
+			handleProps.onPointerDown?.(e_3);
+		};
+		$[5] = boardDepth;
+		$[6] = handleProps;
+		$[7] = yieldWarning;
+		$[8] = t3;
+	} else t3 = $[8];
+	const onPointerDown = t3;
+	const Element = placement === "outside" ? OutsideGripElement : HandleElement;
+	let t4;
+	if ($[9] !== isResizing || $[10] !== isRevealed || $[11] !== placement) {
+		t4 = {
 			placement,
 			revealed: isRevealed,
 			resizing: isResizing
-		},
-		...handleProps,
-		onPointerDown,
-		"aria-hidden": "true"
-	});
+		};
+		$[9] = isResizing;
+		$[10] = isRevealed;
+		$[11] = placement;
+		$[12] = t4;
+	} else t4 = $[12];
+	let t5;
+	if ($[13] !== Element || $[14] !== axis || $[15] !== boardDepth || $[16] !== handleProps || $[17] !== onPointerDown || $[18] !== t4) {
+		t5 = /* @__PURE__ */ jsx(Element, {
+			"data-axis": axis,
+			"data-board-depth": boardDepth,
+			mods: t4,
+			...handleProps,
+			onPointerDown,
+			"aria-hidden": "true"
+		});
+		$[13] = Element;
+		$[14] = axis;
+		$[15] = boardDepth;
+		$[16] = handleProps;
+		$[17] = onPointerDown;
+		$[18] = t4;
+		$[19] = t5;
+	} else t5 = $[19];
+	return t5;
+}
+function _temp3(e_2) {
+	return e_2.stopPropagation();
+}
+function _temp2(e_1) {
+	return e_1.stopPropagation();
+}
+function _temp(e_0) {
+	return e_0.stopPropagation();
 }
 /**
 * The positioned, interactive wrapper a board renders for each layout item it
@@ -664,11 +702,11 @@ function WidgetHost(props) {
 	const [nestedBoardCount, setNestedBoardCount] = useState(0);
 	const registerNestedBoard = useEvent(() => {
 		setNestedBoardCount((count) => count + 1);
-		return () => setNestedBoardCount((count) => Math.max(0, count - 1));
+		return () => setNestedBoardCount((count_0) => Math.max(0, count_0 - 1));
 	});
 	const [descendantHoverCount, setDescendantHoverCount] = useState(0);
 	const setDescendantHovered = useEvent((hovered) => {
-		setDescendantHoverCount((count) => Math.max(0, count + (hovered ? 1 : -1)));
+		setDescendantHoverCount((count_1) => Math.max(0, count_1 + (hovered ? 1 : -1)));
 	});
 	const hostValue = useMemo(() => ({
 		isAutoHeight,
@@ -716,16 +754,16 @@ function WidgetHost(props) {
 			registry.onDragStart(boardId, item.i, vr, e.pointerType, hostRef.current);
 			onDragLifecycle?.(item.i, "start");
 		},
-		onMove(e) {
+		onMove(e_0) {
 			if (!isDraggable) return;
-			if (e.pointerType === "keyboard") {
+			if (e_0.pointerType === "keyboard") {
 				const stepX = calcGridColWidth(positionParams) + positionParams.margin[0];
 				const stepY = positionParams.rowHeight + positionParams.margin[1];
-				registry.onDragMove(Math.sign(e.deltaX) * stepX, Math.sign(e.deltaY) * stepY, e.pointerType);
+				registry.onDragMove(Math.sign(e_0.deltaX) * stepX, Math.sign(e_0.deltaY) * stepY, e_0.pointerType);
 				onDragLifecycle?.(item.i, "move");
 				return;
 			}
-			registry.onDragMove(e.deltaX, e.deltaY, e.pointerType);
+			registry.onDragMove(e_0.deltaX, e_0.deltaY, e_0.pointerType);
 			onDragLifecycle?.(item.i, "move");
 		},
 		onMoveEnd() {
@@ -763,9 +801,9 @@ function WidgetHost(props) {
 	* Nothing is stopped or prevented here — the handler only reads the target, so
 	* the control keeps its press, its focus and its default behaviour intact.
 	*/
-	const handleSelectPointerDownCapture = (e) => {
-		if (!isSelectable || e.button !== 0) return;
-		if (isInteractiveTarget(e.target)) onSelectionReset?.();
+	const handleSelectPointerDownCapture = (e_1) => {
+		if (!isSelectable || e_1.button !== 0) return;
+		if (isInteractiveTarget(e_1.target)) onSelectionReset?.();
 	};
 	useEffect(() => {
 		const node = hostRef.current;
@@ -800,56 +838,56 @@ function WidgetHost(props) {
 	* Runs before the drag handler (see the `mergeProps` order below), so the
 	* registry resolves the group against the selection this press just made.
 	*/
-	const handleSelectPointerDown = (e) => {
-		if (!isSelectable || !onSelect || e.button !== 0) return;
-		if (isInteractiveTarget(e.target)) return;
-		e.stopPropagation();
-		if (e.shiftKey || e[selectModifierKey]) {
+	const handleSelectPointerDown = (e_2) => {
+		if (!isSelectable || !onSelect || e_2.button !== 0) return;
+		if (isInteractiveTarget(e_2.target)) return;
+		e_2.stopPropagation();
+		if (e_2.shiftKey || e_2[selectModifierKey]) {
 			onSelect(item.i, true);
 			return;
 		}
 		if (!isSelected) onSelect(item.i, false);
 	};
-	const handleSelectKeyDown = (e) => {
-		if (e.target !== e.currentTarget) return;
+	const handleSelectKeyDown = (e_3) => {
+		if (e_3.target !== e_3.currentTarget) return;
 		if (!isSelectable || !onSelect) return;
-		if (e.key !== " " && e.key !== "Spacebar") return;
-		e.preventDefault();
-		e.stopPropagation();
+		if (e_3.key !== " " && e_3.key !== "Spacebar") return;
+		e_3.preventDefault();
+		e_3.stopPropagation();
 		onSelect(item.i, true);
 	};
 	const stopBubbleProps = isDraggable ? {
-		onPointerDown: (e) => e.stopPropagation(),
-		onMouseDown: (e) => e.stopPropagation(),
-		onTouchStart: (e) => e.stopPropagation()
+		onPointerDown: (e_4) => e_4.stopPropagation(),
+		onMouseDown: (e_5) => e_5.stopPropagation(),
+		onTouchStart: (e_6) => e_6.stopPropagation()
 	} : {};
-	const shouldGateDrag = (target) => {
-		if (!(target instanceof Element)) return false;
-		if (dragHandle && !target.closest(dragHandle)) return true;
-		if (dragCancel && target.closest(dragCancel)) return true;
-		return !!(isSelectable && selectionCancel && target.closest(selectionCancel));
+	const shouldGateDrag = (target_1) => {
+		if (!(target_1 instanceof Element)) return false;
+		if (dragHandle && !target_1.closest(dragHandle)) return true;
+		if (dragCancel && target_1.closest(dragCancel)) return true;
+		return !!(isSelectable && selectionCancel && target_1.closest(selectionCancel));
 	};
 	const gatedMoveProps = !isDraggable ? {} : {
 		...moveProps,
-		...moveProps.onPointerDown && { onPointerDown: (e) => {
-			if (shouldGateDrag(e.target)) return;
+		...moveProps.onPointerDown && { onPointerDown: (e_7) => {
+			if (shouldGateDrag(e_7.target)) return;
 			hostRef.current?.focus({ preventScroll: true });
-			moveProps.onPointerDown(e);
+			moveProps.onPointerDown(e_7);
 		} },
-		...moveProps.onMouseDown && { onMouseDown: (e) => {
-			if (shouldGateDrag(e.target)) return;
+		...moveProps.onMouseDown && { onMouseDown: (e_8) => {
+			if (shouldGateDrag(e_8.target)) return;
 			hostRef.current?.focus({ preventScroll: true });
-			moveProps.onMouseDown(e);
+			moveProps.onMouseDown(e_8);
 		} },
-		...moveProps.onTouchStart && { onTouchStart: (e) => {
-			if (shouldGateDrag(e.target)) return;
-			moveProps.onTouchStart(e);
+		...moveProps.onTouchStart && { onTouchStart: (e_9) => {
+			if (shouldGateDrag(e_9.target)) return;
+			moveProps.onTouchStart(e_9);
 		} },
-		...moveProps.onKeyDown && { onKeyDown: (e) => {
-			if (e.target !== e.currentTarget) return;
-			handleSelectKeyDown(e);
-			if (e.defaultPrevented) return;
-			moveProps.onKeyDown(e);
+		...moveProps.onKeyDown && { onKeyDown: (e_10) => {
+			if (e_10.target !== e_10.currentTarget) return;
+			handleSelectKeyDown(e_10);
+			if (e_10.defaultPrevented) return;
+			moveProps.onKeyDown(e_10);
 		} }
 	};
 	const selectionProps = isSelectable ? {
@@ -882,23 +920,23 @@ function WidgetHost(props) {
 	const content = /* @__PURE__ */ jsxs(BoardHostContext.Provider, {
 		value: hostValue,
 		children: [registration?.content, isResizable && !item.static && placement !== "outside" ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
-			(placement === "corner" ? resizeHandles.filter((axis) => !isCornerAxis(axis)) : resizeHandles).map((axis) => /* @__PURE__ */ jsx(ResizeHandle, {
-				axis,
+			(placement === "corner" ? resizeHandles.filter((axis_0) => !isCornerAxis(axis_0)) : resizeHandles).map((axis_1) => /* @__PURE__ */ jsx(ResizeHandle, {
+				axis: axis_1,
 				placement,
 				boardDepth,
 				yieldWarning: cornerYieldWarning,
 				onResize: handleResize
-			}, axis)),
-			placement === "corner" ? null : resizeHandles.filter(isCornerAxis).map((axis) => /* @__PURE__ */ jsx(GripElement, {
-				"data-axis": axis,
+			}, axis_1)),
+			placement === "corner" ? null : resizeHandles.filter(isCornerAxis).map((axis_2) => /* @__PURE__ */ jsx(GripElement, {
+				"data-axis": axis_2,
 				mods: {
 					revealed: gripsRevealed,
 					placement: "inside"
 				},
 				"aria-hidden": "true"
-			}, `grip-${axis}`)),
-			resizeHandles.filter(isEdgeAxis).map((axis) => /* @__PURE__ */ jsxs(EdgeGripElement, {
-				"data-axis": axis,
+			}, `grip-${axis_2}`)),
+			resizeHandles.filter(isEdgeAxis).map((axis_3) => /* @__PURE__ */ jsxs(EdgeGripElement, {
+				"data-axis": axis_3,
 				mods: {
 					revealed: gripsRevealed,
 					resizing: isResizing
@@ -911,10 +949,10 @@ function WidgetHost(props) {
 					/* @__PURE__ */ jsx("div", { "data-element": "Dot" }),
 					/* @__PURE__ */ jsx("div", { "data-element": "Dot" })
 				]
-			}, `edge-grip-${axis}`))
+			}, `edge-grip-${axis_3}`))
 		] }) : null]
 	});
-	const pos = calcGridItemPosition(positionParams, item.x, item.y, item.w, item.h);
+	const pos_0 = calcGridItemPosition(positionParams, item.x, item.y, item.w, item.h);
 	const overlayNode = registry.overlayRef.current;
 	const memberRect = isDragMember ? dragState.memberRects.get(item.i) : void 0;
 	const floatInOverlay = !!overlayNode && !!dragState && dragState.pointerType !== "keyboard" && (useOverlay || isDragMember && !!memberRect);
@@ -938,10 +976,10 @@ function WidgetHost(props) {
 	};
 	const hostStyle = {
 		...cornerHitVars,
-		left: `${pos.left}px`,
-		top: `${pos.top}px`,
-		width: `${pos.width}px`,
-		height: `${pos.height}px`,
+		left: `${pos_0.left}px`,
+		top: `${pos_0.top}px`,
+		width: `${pos_0.width}px`,
+		height: `${pos_0.height}px`,
 		...floatInOverlay ? {
 			opacity: 0,
 			pointerEvents: "none"
@@ -988,30 +1026,30 @@ function WidgetHost(props) {
 			...layerHoverProps,
 			style: {
 				...cornerHitVars,
-				left: `${pos.left}px`,
-				top: `${pos.top}px`,
-				width: `${pos.width}px`,
-				height: `${pos.height}px`
+				left: `${pos_0.left}px`,
+				top: `${pos_0.top}px`,
+				width: `${pos_0.width}px`,
+				height: `${pos_0.height}px`
 			},
 			"aria-hidden": cornerChrome ? void 0 : "true",
 			children: [
-				layerAxes.map((axis) => /* @__PURE__ */ jsx(ResizeHandle, {
-					axis,
+				layerAxes.map((axis_4) => /* @__PURE__ */ jsx(ResizeHandle, {
+					axis: axis_4,
 					placement,
 					boardDepth,
 					yieldWarning: cornerYieldWarning,
 					isRevealed: gripsRevealed,
 					isResizing,
 					onResize: handleResize
-				}, `handle-${axis}`)),
-				placement === "outside" ? null : layerAxes.map((axis) => /* @__PURE__ */ jsx(GripElement, {
-					"data-axis": axis,
+				}, `handle-${axis_4}`)),
+				placement === "outside" ? null : layerAxes.map((axis_5) => /* @__PURE__ */ jsx(GripElement, {
+					"data-axis": axis_5,
 					mods: {
 						revealed: gripsRevealed,
 						placement: "corner"
 					},
 					"aria-hidden": "true"
-				}, `grip-${axis}`)),
+				}, `grip-${axis_5}`)),
 				cornerChrome ? /* @__PURE__ */ jsx(CornerChromeElement, {
 					mods: { corner: cornerChromePlacement },
 					children: cornerChrome