@cube-dev/ui-kit 0.0.0-canary-e056095 → 0.0.0-canary-f472829

package/dist/components/layout/Dashboard/Dashboard.js

@@ -1,188 +0,0 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-e056095 | Cube Dev Team */
-import { extractStyles } from "../../../utils/styles.js";
-import { useLayoutEffect as useLayoutEffect$1 } from "../../../utils/react/useLayoutEffect.js";
-import { mergeProps } from "../../../utils/react/mergeProps.js";
-import { useEvent } from "../../../_internal/hooks/use-event.js";
-import { DashboardAuthoringContext, DashboardEditingContext, DashboardMetricsContext, DashboardSelectionContext, DashboardTreeContext } from "./context.js";
-import { normalizeGap } from "./placement.js";
-import { DashboardElement } from "./styles.js";
-import { DashboardRootAddControl } from "./DashboardContainerContent.js";
-import { DashboardGrid, DashboardHorizontalStack, DashboardVerticalStack } from "./DashboardContainer.js";
-import { DashboardTab, DashboardTabs } from "./DashboardTabs.js";
-import { DashboardWidget } from "./DashboardWidget.js";
-import { CONTAINER_STYLES, filterBaseProps } from "@tenphi/tasty";
-import { Children, forwardRef, useMemo, useRef, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-
-//#region src/components/layout/Dashboard/Dashboard.tsx
-const DashboardRoot = forwardRef(function DashboardRoot(props, ref) {
-	const { children, rowHeight = 80, gap = 16, isEditing = false, selectionMode = "multiple", selectedKeys: controlledSelectedKeys, defaultSelectedKeys = [], onSelectionChange, addItems = [], onAddItem, styles: explicitStyles, style, ...otherProps } = props;
-	const [columnGap, rowGap] = normalizeGap(gap);
-	const [uncontrolledSelectedKeys, setUncontrolledSelectedKeys] = useState(defaultSelectedKeys);
-	const [movingId, setMovingId] = useState(null);
-	const [arrivingIds, setArrivingIds] = useState(() => /* @__PURE__ */ new Set());
-	const acceptsArrivalsRef = useRef(false);
-	const arrivalTimerRef = useRef(null);
-	const registrationsRef = useRef(/* @__PURE__ */ new Map());
-	const isControlled = controlledSelectedKeys !== void 0;
-	const selectedKeys = selectionMode === "none" ? [] : controlledSelectedKeys ?? uncontrolledSelectedKeys;
-	const selectedKeySet = useMemo(() => new Set(selectedKeys), [selectedKeys]);
-	const commitSelection = useEvent((next) => {
-		if (!isControlled) setUncontrolledSelectedKeys(next);
-		onSelectionChange?.(next);
-	});
-	const register = useEvent((id, registration) => {
-		registrationsRef.current.set(id, registration);
-		return () => {
-			if (registrationsRef.current.get(id) === registration) registrationsRef.current.delete(id);
-		};
-	});
-	const select = useEvent((id, additive) => {
-		if (selectionMode === "none") return;
-		const registration = registrationsRef.current.get(id);
-		if (!registration) return;
-		if (selectionMode === "single" || !additive) {
-			commitSelection([id]);
-			return;
-		}
-		const current = new Set(selectedKeySet);
-		if (current.has(id)) {
-			current.delete(id);
-			commitSelection([...current]);
-			return;
-		}
-		for (const selectedId of current) {
-			const selected = registrationsRef.current.get(selectedId);
-			if (!selected) continue;
-			if (registration.ancestorIds.includes(selectedId)) return;
-			if (selected.parentId !== registration.parentId) return;
-			if (selected.ancestorIds.includes(id)) current.delete(selectedId);
-		}
-		current.add(id);
-		commitSelection([...current]);
-	});
-	const handleRootClick = useEvent((event) => {
-		if (event.target.closest("[data-dashboard-node]")) return;
-		if (selectedKeySet.size > 0) commitSelection([]);
-	});
-	const startMoving = useEvent((id) => setMovingId(id));
-	const stopMoving = useEvent((id) => {
-		setMovingId((current) => current === id ? null : current);
-	});
-	const markArriving = useEvent((id) => {
-		if (!acceptsArrivalsRef.current) return;
-		if (arrivalTimerRef.current !== null) clearTimeout(arrivalTimerRef.current);
-		setArrivingIds((current) => new Set(current).add(id));
-		arrivalTimerRef.current = setTimeout(() => {
-			setArrivingIds(/* @__PURE__ */ new Set());
-			arrivalTimerRef.current = null;
-		}, 1e3);
-	});
-	useLayoutEffect$1(() => {
-		acceptsArrivalsRef.current = true;
-		return () => {
-			acceptsArrivalsRef.current = false;
-			if (arrivalTimerRef.current !== null) clearTimeout(arrivalTimerRef.current);
-		};
-	}, []);
-	const metrics = useMemo(() => ({
-		rowHeight: Math.max(1, rowHeight),
-		columnGap: Math.max(0, columnGap),
-		rowGap: Math.max(0, rowGap)
-	}), [
-		columnGap,
-		rowGap,
-		rowHeight
-	]);
-	const selection = useMemo(() => ({
-		selectionMode,
-		selectedKeys: selectedKeySet,
-		register,
-		select
-	}), [
-		register,
-		select,
-		selectedKeySet,
-		selectionMode
-	]);
-	const editing = useMemo(() => ({
-		isEditing,
-		movingId,
-		arrivingIds,
-		markArriving,
-		startMoving,
-		stopMoving
-	}), [
-		arrivingIds,
-		isEditing,
-		markArriving,
-		movingId,
-		startMoving,
-		stopMoving
-	]);
-	const authoring = useMemo(() => ({
-		addItems,
-		onAddItem
-	}), [addItems, onAddItem]);
-	const rootTree = useMemo(() => ({
-		containerDepth: 0,
-		parentKind: "root",
-		parentId: null,
-		layoutParentId: null,
-		parentColumns: 12,
-		parentRows: 1,
-		ancestorIds: []
-	}), []);
-	const styles = {
-		...extractStyles(otherProps, CONTAINER_STYLES),
-		...explicitStyles
-	};
-	const baseProps = filterBaseProps(otherProps, {
-		eventProps: true,
-		labelable: true
-	});
-	return /* @__PURE__ */ jsx(DashboardMetricsContext.Provider, {
-		value: metrics,
-		children: /* @__PURE__ */ jsx(DashboardSelectionContext.Provider, {
-			value: selection,
-			children: /* @__PURE__ */ jsx(DashboardEditingContext.Provider, {
-				value: editing,
-				children: /* @__PURE__ */ jsx(DashboardAuthoringContext.Provider, {
-					value: authoring,
-					children: /* @__PURE__ */ jsx(DashboardTreeContext.Provider, {
-						value: rootTree,
-						children: /* @__PURE__ */ jsxs(DashboardElement, {
-							...mergeProps(baseProps, { onClick: handleRootClick }),
-							ref,
-							styles,
-							style,
-							"data-editing": isEditing || void 0,
-							"data-dragging": movingId !== null || void 0,
-							"data-dashboard-root": "",
-							"data-dashboard-drop-target": "",
-							"data-dashboard-parent-id": "",
-							"data-dashboard-container-kind": "root",
-							"data-dashboard-columns": 12,
-							"data-dashboard-rows": Math.max(1, Children.count(children)),
-							"data-dashboard-depth": 0,
-							"data-dashboard-ancestor-ids": "[]",
-							children: [children, isEditing ? /* @__PURE__ */ jsx(DashboardRootAddControl, { row: Children.count(children) }) : null]
-						})
-					})
-				})
-			})
-		})
-	});
-});
-const Dashboard = Object.assign(DashboardRoot, {
-	HorizontalStack: DashboardHorizontalStack,
-	VerticalStack: DashboardVerticalStack,
-	Grid: DashboardGrid,
-	Tabs: DashboardTabs,
-	Tab: DashboardTab,
-	Widget: DashboardWidget
-});
-
-//#endregion
-export { Dashboard };
-//# sourceMappingURL=Dashboard.js.map

package/dist/components/layout/Dashboard/Dashboard.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Dashboard.js","names":[],"sources":["../../../../src/components/layout/Dashboard/Dashboard.tsx"],"sourcesContent":["import { CONTAINER_STYLES, filterBaseProps, Styles } from '@tenphi/tasty';\nimport { Children, forwardRef, useMemo, useRef, useState } from 'react';\n\nimport { useEvent } from '../../../_internal/hooks';\nimport { mergeProps, useLayoutEffect } from '../../../utils/react';\nimport { extractStyles } from '../../../utils/styles';\n\nimport {\n  DashboardAuthoringContext,\n  DashboardEditingContext,\n  DashboardMetricsContext,\n  DashboardSelectionContext,\n  DashboardTreeContext,\n} from './context';\nimport {\n  DashboardGrid,\n  DashboardHorizontalStack,\n  DashboardVerticalStack,\n} from './DashboardContainer';\nimport {\n  DashboardContainerContent,\n  DashboardRootAddControl,\n} from './DashboardContainerContent';\nimport { DashboardTab, DashboardTabs } from './DashboardTabs';\nimport { DashboardWidget } from './DashboardWidget';\nimport { normalizeGap } from './placement';\nimport { DashboardElement } from './styles';\n\nimport type { ForwardedRef, MouseEvent as ReactMouseEvent } from 'react';\nimport type {\n  CubeDashboardProps,\n  DashboardAuthoringContextValue,\n  DashboardEditingContextValue,\n  DashboardMetrics,\n  DashboardNodeRegistration,\n  DashboardSelectionContextValue,\n  DashboardTreeContextValue,\n} from './types';\n\nexport const DashboardRoot = forwardRef(function DashboardRoot(\n  props: CubeDashboardProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const {\n    children,\n    rowHeight = 80,\n    gap = 16,\n    isEditing = false,\n    selectionMode = 'multiple',\n    selectedKeys: controlledSelectedKeys,\n    defaultSelectedKeys = [],\n    onSelectionChange,\n    addItems = [],\n    onAddItem,\n    styles: explicitStyles,\n    style,\n    ...otherProps\n  } = props;\n  const [columnGap, rowGap] = normalizeGap(gap);\n  const [uncontrolledSelectedKeys, setUncontrolledSelectedKeys] =\n    useState<string[]>(defaultSelectedKeys);\n  const [movingId, setMovingId] = useState<string | null>(null);\n  const [arrivingIds, setArrivingIds] = useState<ReadonlySet<string>>(\n    () => new Set(),\n  );\n  const acceptsArrivalsRef = useRef(false);\n  const arrivalTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const registrationsRef = useRef(new Map<string, DashboardNodeRegistration>());\n  const isControlled = controlledSelectedKeys !== undefined;\n  const selectedKeys =\n    selectionMode === 'none'\n      ? []\n      : controlledSelectedKeys ?? uncontrolledSelectedKeys;\n  const selectedKeySet = useMemo(() => new Set(selectedKeys), [selectedKeys]);\n\n  const commitSelection = useEvent((next: string[]) => {\n    if (!isControlled) setUncontrolledSelectedKeys(next);\n    onSelectionChange?.(next);\n  });\n\n  const register = useEvent(\n    (id: string, registration: DashboardNodeRegistration) => {\n      registrationsRef.current.set(id, registration);\n      return () => {\n        const current = registrationsRef.current.get(id);\n        if (current === registration) registrationsRef.current.delete(id);\n      };\n    },\n  );\n\n  const select = useEvent((id: string, additive: boolean) => {\n    if (selectionMode === 'none') return;\n    const registration = registrationsRef.current.get(id);\n    if (!registration) return;\n\n    if (selectionMode === 'single' || !additive) {\n      commitSelection([id]);\n      return;\n    }\n\n    const current = new Set(selectedKeySet);\n    if (current.has(id)) {\n      current.delete(id);\n      commitSelection([...current]);\n      return;\n    }\n\n    for (const selectedId of current) {\n      const selected = registrationsRef.current.get(selectedId);\n      if (!selected) continue;\n\n      if (registration.ancestorIds.includes(selectedId)) {\n        return;\n      }\n\n      if (selected.parentId !== registration.parentId) {\n        return;\n      }\n\n      if (selected.ancestorIds.includes(id)) {\n        current.delete(selectedId);\n      }\n    }\n\n    current.add(id);\n    commitSelection([...current]);\n  });\n  const handleRootClick = useEvent((event: ReactMouseEvent<HTMLElement>) => {\n    const target = event.target as HTMLElement;\n    if (target.closest('[data-dashboard-node]')) return;\n    if (selectedKeySet.size > 0) commitSelection([]);\n  });\n  const startMoving = useEvent((id: string) => setMovingId(id));\n  const stopMoving = useEvent((id: string) => {\n    setMovingId((current) => (current === id ? null : current));\n  });\n  const markArriving = useEvent((id: string) => {\n    if (!acceptsArrivalsRef.current) return;\n\n    if (arrivalTimerRef.current !== null) {\n      clearTimeout(arrivalTimerRef.current);\n    }\n    setArrivingIds((current) => new Set(current).add(id));\n    arrivalTimerRef.current = setTimeout(() => {\n      setArrivingIds(new Set());\n      arrivalTimerRef.current = null;\n    }, 1000);\n  });\n\n  useLayoutEffect(() => {\n    acceptsArrivalsRef.current = true;\n\n    return () => {\n      acceptsArrivalsRef.current = false;\n      if (arrivalTimerRef.current !== null) {\n        clearTimeout(arrivalTimerRef.current);\n      }\n    };\n  }, []);\n\n  const metrics = useMemo<DashboardMetrics>(\n    () => ({\n      rowHeight: Math.max(1, rowHeight),\n      columnGap: Math.max(0, columnGap),\n      rowGap: Math.max(0, rowGap),\n    }),\n    [columnGap, rowGap, rowHeight],\n  );\n  const selection = useMemo<DashboardSelectionContextValue>(\n    () => ({\n      selectionMode,\n      selectedKeys: selectedKeySet,\n      register,\n      select,\n    }),\n    [register, select, selectedKeySet, selectionMode],\n  );\n  const editing = useMemo<DashboardEditingContextValue>(\n    () => ({\n      isEditing,\n      movingId,\n      arrivingIds,\n      markArriving,\n      startMoving,\n      stopMoving,\n    }),\n    [arrivingIds, isEditing, markArriving, movingId, startMoving, stopMoving],\n  );\n  const authoring = useMemo<DashboardAuthoringContextValue>(\n    () => ({ addItems, onAddItem }),\n    [addItems, onAddItem],\n  );\n  const rootTree = useMemo<DashboardTreeContextValue>(\n    () => ({\n      containerDepth: 0,\n      parentKind: 'root',\n      parentId: null,\n      layoutParentId: null,\n      parentColumns: 12,\n      parentRows: 1,\n      ancestorIds: [],\n    }),\n    [],\n  );\n  // `otherProps` rather than `props`: `gap` is a container style prop as well as\n  // a Dashboard prop, and extracting it would write the in-container gap onto the\n  // root grid, overriding the fixed `1x` top-level channel.\n  const extractedStyles = extractStyles(otherProps, CONTAINER_STYLES);\n  const styles: Styles = { ...extractedStyles, ...explicitStyles };\n  const baseProps = filterBaseProps(otherProps, {\n    eventProps: true,\n    labelable: true,\n  });\n\n  return (\n    <DashboardMetricsContext.Provider value={metrics}>\n      <DashboardSelectionContext.Provider value={selection}>\n        <DashboardEditingContext.Provider value={editing}>\n          <DashboardAuthoringContext.Provider value={authoring}>\n            <DashboardTreeContext.Provider value={rootTree}>\n              <DashboardElement\n                {...mergeProps(baseProps, { onClick: handleRootClick })}\n                ref={ref}\n                styles={styles}\n                style={style}\n                data-editing={isEditing || undefined}\n                data-dragging={movingId !== null || undefined}\n                data-dashboard-root=\"\"\n                data-dashboard-drop-target=\"\"\n                data-dashboard-parent-id=\"\"\n                data-dashboard-container-kind=\"root\"\n                data-dashboard-columns={12}\n                data-dashboard-rows={Math.max(1, Children.count(children))}\n                data-dashboard-depth={0}\n                data-dashboard-ancestor-ids=\"[]\"\n              >\n                {children}\n                {isEditing ? (\n                  <DashboardRootAddControl row={Children.count(children)} />\n                ) : null}\n              </DashboardElement>\n            </DashboardTreeContext.Provider>\n          </DashboardAuthoringContext.Provider>\n        </DashboardEditingContext.Provider>\n      </DashboardSelectionContext.Provider>\n    </DashboardMetricsContext.Provider>\n  );\n});\n\nexport const Dashboard = Object.assign(DashboardRoot, {\n  HorizontalStack: DashboardHorizontalStack,\n  VerticalStack: DashboardVerticalStack,\n  Grid: DashboardGrid,\n  Tabs: DashboardTabs,\n  Tab: DashboardTab,\n  Widget: DashboardWidget,\n});\n\nexport {\n  DashboardGrid,\n  DashboardHorizontalStack,\n  DashboardVerticalStack,\n} from './DashboardContainer';\nexport { DashboardTab, DashboardTabs } from './DashboardTabs';\nexport { DashboardWidget } from './DashboardWidget';\n\nexport type {\n  CubeDashboardContainerProps,\n  CubeDashboardProps,\n  CubeDashboardTabProps,\n  CubeDashboardTabsProps,\n  CubeDashboardWidgetProps,\n  DashboardAddItemDefinition,\n  DashboardAddItemInfo,\n  DashboardAddItemKind,\n  DashboardContainerKind,\n  DashboardNodeAction,\n  DashboardParentKind,\n  DashboardPlacement,\n  DashboardPlacementChangeInfo,\n  DashboardPlacementChangeInput,\n  DashboardPlacementChangeItem,\n  DashboardPlacementChangePhase,\n  DashboardPlacementChangeReason,\n  DashboardPlacementProps,\n  DashboardSelectionMode,\n} from './types';\n"],"mappings":"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"}

package/dist/components/layout/Dashboard/DashboardContainer.d.ts

@@ -1,13 +0,0 @@
-
-import { CubeDashboardContainerProps } from "./types.js";
-import * as react from "react";
-import { ForwardedRef, ReactNode } from "react";
-import "react/jsx-runtime";
-
-//#region src/components/layout/Dashboard/DashboardContainer.d.ts
-declare const DashboardHorizontalStack: react.ForwardRefExoticComponent<CubeDashboardContainerProps & react.RefAttributes<HTMLDivElement>>;
-declare const DashboardVerticalStack: react.ForwardRefExoticComponent<CubeDashboardContainerProps & react.RefAttributes<HTMLDivElement>>;
-declare const DashboardGrid: react.ForwardRefExoticComponent<CubeDashboardContainerProps & react.RefAttributes<HTMLDivElement>>;
-//#endregion
-export { DashboardGrid, DashboardHorizontalStack, DashboardVerticalStack };
-//# sourceMappingURL=DashboardContainer.d.ts.map

package/dist/components/layout/Dashboard/DashboardContainer.js

@@ -1,272 +0,0 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-e056095 | Cube Dev Team */
-import { extractStyles } from "../../../utils/styles.js";
-import { useLayoutEffect as useLayoutEffect$1 } from "../../../utils/react/useLayoutEffect.js";
-import { mergeProps } from "../../../utils/react/mergeProps.js";
-import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
-import { useEvent } from "../../../_internal/hooks/use-event.js";
-import { useI18n } from "../../../i18n/useI18n.js";
-import { DashboardMetricsContext, DashboardTreeContext } from "./context.js";
-import { GripVerticalIcon } from "../../../icons/GripVerticalIcon.js";
-import { clamp, clampRowOrigin, clampRows, clampSpan, getPlacementStyle, normalizePlacement } from "./placement.js";
-import { getContainerChildMinimum, getDashboardDescendantContainerDepth, hasContainerLayoutChildren } from "./occupancy.js";
-import { ContainerElement, ContainerHeaderElement, CornerResizeGripElement, ResizeHandleElement, TopLevelResizeHandleElement } from "./styles.js";
-import { DashboardContainerContent } from "./DashboardContainerContent.js";
-import { DashboardNodeActions } from "./DashboardNodeActions.js";
-import { renderDashboardDropPreview } from "./drag.js";
-import { useDashboardNodeInteraction } from "./use-dashboard-node.js";
-import { useDashboardGestures } from "./use-dashboard-gestures.js";
-import { CONTAINER_STYLES, filterBaseProps } from "@tenphi/tasty";
-import { forwardRef, useContext, useMemo, useRef } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-
-//#region src/components/layout/Dashboard/DashboardContainer.tsx
-const DashboardContainerShell = forwardRef(function DashboardContainerShell(props, ref) {
-	const { id, title, kind, content, isSelectable, isMovable = false, isResizable = false, minColumns = 1, maxColumns = 12, minRows = 1, maxRows, onPlacementChange, moveLabel, resizeLabel, onSettingsPress, settingsLabel, onDeletePress, onDuplicatePress, duplicateLabel, actions, onMenuAction, deleteLabel, column, row, columns, rows = 1, children, mods, styles: explicitStyles, style, "aria-label": ariaLabel, ...otherProps } = props;
-	const { t } = useI18n();
-	const metrics = useContext(DashboardMetricsContext);
-	const localRef = useRef(null);
-	const combinedRef = useCombinedRefs(ref, localRef);
-	const node = useDashboardNodeInteraction({
-		id,
-		isContainer: true,
-		isSelectable
-	});
-	useLayoutEffect$1(() => {
-		node.editing.markArriving(id);
-	}, [id, node.editing.markArriving]);
-	if (node.containerDepth > 3) throw new Error(`Dashboard container "${id}" exceeds the maximum nesting depth of 3.`);
-	const styles = {
-		...extractStyles(props, CONTAINER_STYLES),
-		...explicitStyles
-	};
-	const normalizedPlacement = node.tree.parentKind === "root" ? {
-		column: 0,
-		row: clampRowOrigin(row),
-		columns: 12,
-		rows: clampRows(rows, 1)
-	} : normalizePlacement({
-		column,
-		row,
-		columns,
-		rows
-	}, node.tree.parentColumns, node.tree.parentRows);
-	const placementStyle = getPlacementStyle(node.tree, normalizedPlacement);
-	const childMinimum = getContainerChildMinimum(kind, children, normalizedPlacement.columns, normalizedPlacement.rows);
-	const descendantContainerDepth = getDashboardDescendantContainerDepth(children);
-	const isEmpty = !hasContainerLayoutChildren(kind, children);
-	const columnLimit = node.tree.parentColumns;
-	const rowLimit = node.tree.parentKind === "root" ? Math.max(childMinimum.rows, clampRows(maxRows, Math.max(12, normalizedPlacement.rows))) : node.tree.parentRows;
-	const resolvedMinColumns = clamp(Math.max(clampSpan(minColumns, 1), childMinimum.columns), 1, columnLimit);
-	const resolvedMaxColumns = clamp(clampSpan(maxColumns, columnLimit), resolvedMinColumns, columnLimit);
-	const resolvedMinRows = clamp(Math.max(clampRows(minRows, 1), childMinimum.rows), 1, rowLimit);
-	const resolvedMaxRows = clamp(clampRows(maxRows, rowLimit), resolvedMinRows, rowLimit);
-	const canMove = isMovable && !!onPlacementChange;
-	const canMoveColumns = canMove && node.tree.parentKind !== "root" && node.tree.parentKind !== "vertical-stack";
-	const canMoveRows = canMove && node.tree.parentKind !== "horizontal-stack";
-	const canResizeColumns = isResizable && !!onPlacementChange && node.tree.parentKind !== "root" && node.tree.parentKind !== "vertical-stack" && resolvedMaxColumns > resolvedMinColumns;
-	const canResizeRows = isResizable && !!onPlacementChange && node.tree.parentKind !== "horizontal-stack" && resolvedMaxRows > resolvedMinRows;
-	const canResize = canResizeColumns || canResizeRows;
-	const resizeAxis = canResizeColumns ? canResizeRows ? "both" : "x" : "y";
-	const shouldRenderTitle = kind === "tabs" && !!title;
-	const label = ariaLabel ?? (typeof title === "string" ? title : id);
-	const baseProps = filterBaseProps(otherProps, {
-		eventProps: true,
-		labelable: true
-	});
-	const gestures = useDashboardGestures({
-		id,
-		isContainer: true,
-		containerKind: kind,
-		nodeRef: localRef,
-		tree: node.tree,
-		editing: node.editing,
-		metrics,
-		placement: normalizedPlacement,
-		isSelected: node.isSelected,
-		selectSelf: node.selectSelf,
-		onPlacementChange,
-		canMove,
-		canMoveColumns,
-		canMoveRows,
-		canResize,
-		canResizeColumns,
-		canResizeRows,
-		minColumns: resolvedMinColumns,
-		maxColumns: resolvedMaxColumns,
-		minRows: resolvedMinRows,
-		maxRows: resolvedMaxRows,
-		isRootChild: node.tree.parentKind === "root",
-		maximumContainerParentDepth: Math.max(0, 2 - descendantContainerDepth)
-	});
-	const { isMoving, isResizing, dropPreview, surfaceMoveProps, resizeProps } = gestures;
-	const handleSettingsPress = useEvent(() => {
-		node.selectSelf(false);
-		onSettingsPress?.();
-	});
-	const handleDeletePress = useEvent(() => {
-		node.selectSelf(false);
-		onDeletePress?.();
-	});
-	const handleDuplicatePress = useEvent(() => {
-		node.selectSelf(false);
-		onDuplicatePress?.();
-	});
-	const handleMenuResize = useEvent((next) => {
-		gestures.reportPlacement(next, "resize", "commit", "command");
-	});
-	const resolvedMods = {
-		...mods,
-		depth: String(node.containerDepth),
-		titled: shouldRenderTitle,
-		selected: node.isSelected,
-		arriving: node.editing.arrivingIds.has(id),
-		hovered: node.isHovered,
-		"focus-within": node.isFocusWithin,
-		editing: node.editing.isEditing,
-		empty: isEmpty,
-		dragging: node.editing.movingId !== null,
-		movable: canMove,
-		moving: isMoving,
-		resizing: isResizing
-	};
-	const ContainerResizeHandleElement = node.tree.parentKind === "root" ? TopLevelResizeHandleElement : ResizeHandleElement;
-	return /* @__PURE__ */ jsxs(ContainerElement, {
-		...mergeProps(baseProps, node.interactionProps, surfaceMoveProps),
-		ref: combinedRef,
-		role: "group",
-		"aria-label": moveLabel ?? label,
-		"aria-roledescription": t("dashboard.container", "Dashboard container"),
-		tabIndex: node.canSelect || canMove ? 0 : void 0,
-		"data-dashboard-node": "container",
-		"data-dashboard-node-id": id,
-		"data-dashboard-depth": node.containerDepth,
-		"data-dashboard-column": normalizedPlacement.column,
-		"data-dashboard-row": normalizedPlacement.row,
-		"data-dashboard-columns": normalizedPlacement.columns,
-		"data-dashboard-rows": normalizedPlacement.rows,
-		"data-dashboard-min-columns": resolvedMinColumns,
-		"data-dashboard-max-columns": Math.max(resolvedMinColumns, clampSpan(maxColumns, 12)),
-		"data-dashboard-min-rows": resolvedMinRows,
-		"data-dashboard-max-rows": maxRows === void 0 ? Number.MAX_SAFE_INTEGER : Math.max(resolvedMinRows, clampRows(maxRows, resolvedMinRows)),
-		"data-selected": node.isSelected || void 0,
-		"data-arriving": node.editing.arrivingIds.has(id) || void 0,
-		"data-moving": isMoving || void 0,
-		"data-resizing": isResizing || void 0,
-		"data-dashboard-empty": isEmpty || void 0,
-		mods: resolvedMods,
-		styles,
-		style: {
-			...placementStyle,
-			...style
-		},
-		children: [
-			shouldRenderTitle ? /* @__PURE__ */ jsx(ContainerHeaderElement, { children: title }) : null,
-			content,
-			/* @__PURE__ */ jsx(DashboardNodeActions, {
-				label,
-				mods: resolvedMods,
-				qaAttribute: "data-dashboard-container-actions",
-				nodeId: id,
-				isSelected: node.isSelected,
-				placement: normalizedPlacement,
-				bounds: {
-					minColumns: resolvedMinColumns,
-					maxColumns: resolvedMaxColumns,
-					minRows: resolvedMinRows,
-					maxRows: resolvedMaxRows,
-					parentColumns: node.tree.parentColumns,
-					parentRows: rowLimit
-				},
-				canResizeColumns,
-				canResizeRows,
-				nodeRef: localRef,
-				actions,
-				settingsLabel,
-				duplicateLabel,
-				deleteLabel,
-				onResize: handleMenuResize,
-				onSettingsPress: onSettingsPress && handleSettingsPress,
-				onDuplicatePress: onDuplicatePress && handleDuplicatePress,
-				onDeletePress: onDeletePress && handleDeletePress,
-				onMenuAction
-			}),
-			canResize ? /* @__PURE__ */ jsx(ContainerResizeHandleElement, {
-				...resizeProps,
-				type: "button",
-				"aria-label": resizeLabel ?? t("dashboard.resizeContainer", "Resize dashboard container"),
-				"data-dashboard-container-resize-handle": "",
-				"data-dashboard-resize-axis": resizeAxis,
-				"data-dashboard-no-select": "",
-				"aria-hidden": !node.isSelected || void 0,
-				tabIndex: node.isSelected ? void 0 : -1,
-				mods: {
-					...resolvedMods,
-					axis: resizeAxis,
-					corner: resizeAxis === "both"
-				},
-				children: /* @__PURE__ */ jsx("span", {
-					"data-element": "Icon",
-					children: resizeAxis === "both" ? /* @__PURE__ */ jsx(CornerResizeGripElement, {}) : /* @__PURE__ */ jsx(GripVerticalIcon, { size: "1.5x" })
-				})
-			}) : null,
-			renderDashboardDropPreview(dropPreview, t("dashboard.dropBlocked", "This position is already taken"))
-		]
-	});
-});
-function DashboardContainer(kind, props, ref) {
-	const { id, columns, rows = 1, children } = props;
-	const tree = useContext(DashboardTreeContext);
-	const containerDepth = tree.containerDepth + 1;
-	const resolvedColumns = tree.parentKind === "root" ? 12 : Math.min(clampSpan(columns, tree.parentColumns), tree.parentColumns);
-	const resolvedRows = tree.parentKind === "root" ? clampRows(rows, 1) : Math.min(clampRows(rows, 1), tree.parentRows);
-	const childTree = useMemo(() => ({
-		containerDepth,
-		parentKind: kind,
-		parentId: id,
-		layoutParentId: id,
-		parentColumns: resolvedColumns,
-		parentRows: resolvedRows,
-		ancestorIds: [...tree.ancestorIds, id]
-	}), [
-		containerDepth,
-		id,
-		kind,
-		resolvedColumns,
-		resolvedRows,
-		tree.ancestorIds
-	]);
-	const content = /* @__PURE__ */ jsx(DashboardTreeContext.Provider, {
-		value: childTree,
-		children: /* @__PURE__ */ jsx(DashboardContainerContent, {
-			id,
-			kind,
-			columns: resolvedColumns,
-			rows: resolvedRows,
-			depth: containerDepth,
-			ancestorIds: [...tree.ancestorIds, id],
-			children
-		})
-	});
-	return /* @__PURE__ */ jsx(DashboardContainerShell, {
-		...props,
-		ref,
-		kind,
-		content
-	});
-}
-const DashboardHorizontalStack = forwardRef(function DashboardHorizontalStack(props, ref) {
-	return DashboardContainer("horizontal-stack", props, ref);
-});
-DashboardHorizontalStack.displayName = "DashboardHorizontalStack";
-const DashboardVerticalStack = forwardRef(function DashboardVerticalStack(props, ref) {
-	return DashboardContainer("vertical-stack", props, ref);
-});
-DashboardVerticalStack.displayName = "DashboardVerticalStack";
-const DashboardGrid = forwardRef(function DashboardGrid(props, ref) {
-	return DashboardContainer("grid", props, ref);
-});
-DashboardGrid.displayName = "DashboardGrid";
-
-//#endregion
-export { DashboardContainerShell, DashboardGrid, DashboardHorizontalStack, DashboardVerticalStack };
-//# sourceMappingURL=DashboardContainer.js.map

package/dist/components/layout/Dashboard/DashboardContainer.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"DashboardContainer.js","names":[],"sources":["../../../../src/components/layout/Dashboard/DashboardContainer.tsx"],"sourcesContent":["import { CONTAINER_STYLES, filterBaseProps, Styles } from '@tenphi/tasty';\nimport { forwardRef, useContext, useMemo, useRef, useState } from 'react';\nimport { useMove } from 'react-aria';\n\nimport { useEvent } from '../../../_internal/hooks';\nimport { useI18n } from '../../../i18n';\nimport { GripVerticalIcon } from '../../../icons/GripVerticalIcon';\nimport {\n  mergeProps,\n  useCombinedRefs,\n  useLayoutEffect,\n} from '../../../utils/react';\nimport { extractStyles } from '../../../utils/styles';\nimport { Button } from '../../actions/Button/Button';\n\nimport { DashboardMetricsContext, DashboardTreeContext } from './context';\nimport { DashboardContainerContent } from './DashboardContainerContent';\nimport { DashboardNodeActions } from './DashboardNodeActions';\nimport { renderDashboardDropPreview } from './drag';\nimport {\n  getContainerChildMinimum,\n  getDashboardDescendantContainerDepth,\n  hasContainerLayoutChildren,\n} from './occupancy';\nimport {\n  clamp,\n  clampRowOrigin,\n  clampRows,\n  clampSpan,\n  getPlacementStyle,\n  isSamePlacement,\n  normalizePlacement,\n} from './placement';\nimport {\n  ContainerElement,\n  ContainerHeaderElement,\n  CornerResizeGripElement,\n  ResizeHandleElement,\n  TopLevelResizeHandleElement,\n} from './styles';\nimport { useDashboardGestures } from './use-dashboard-gestures';\nimport { useDashboardNodeInteraction } from './use-dashboard-node';\n\nimport type { ForwardedRef, ReactNode } from 'react';\nimport type {\n  CubeDashboardContainerProps,\n  DashboardContainerKind,\n  DashboardPlacement,\n  DashboardPlacementChangeInput,\n  DashboardPlacementChangeItem,\n  DashboardPlacementChangePhase,\n  DashboardPlacementChangeReason,\n  DashboardTreeContextValue,\n} from './types';\n\nexport interface DashboardContainerShellProps\n  extends CubeDashboardContainerProps {\n  kind: DashboardContainerKind;\n  content: ReactNode;\n}\n\nexport const DashboardContainerShell = forwardRef(\n  function DashboardContainerShell(\n    props: DashboardContainerShellProps,\n    ref: ForwardedRef<HTMLDivElement>,\n  ) {\n    const {\n      id,\n      title,\n      kind,\n      content,\n      isSelectable,\n      isMovable = false,\n      isResizable = false,\n      minColumns = 1,\n      maxColumns = 12,\n      minRows = 1,\n      maxRows,\n      onPlacementChange,\n      moveLabel,\n      resizeLabel,\n      onSettingsPress,\n      settingsLabel,\n      onDeletePress,\n      onDuplicatePress,\n      duplicateLabel,\n      actions,\n      onMenuAction,\n      deleteLabel,\n      column,\n      row,\n      columns,\n      rows = 1,\n      children,\n      mods,\n      styles: explicitStyles,\n      style,\n      'aria-label': ariaLabel,\n      ...otherProps\n    } = props;\n    const { t } = useI18n();\n    const metrics = useContext(DashboardMetricsContext);\n    const localRef = useRef<HTMLDivElement>(null);\n    const combinedRef = useCombinedRefs(ref, localRef);\n    const node = useDashboardNodeInteraction({\n      id,\n      isContainer: true,\n      isSelectable,\n    });\n\n    useLayoutEffect(() => {\n      node.editing.markArriving(id);\n    }, [id, node.editing.markArriving]);\n\n    if (node.containerDepth > 3) {\n      throw new Error(\n        `Dashboard container \"${id}\" exceeds the maximum nesting depth of 3.`,\n      );\n    }\n\n    const extractedStyles = extractStyles(props, CONTAINER_STYLES);\n    const styles: Styles = { ...extractedStyles, ...explicitStyles };\n    const normalizedPlacement =\n      node.tree.parentKind === 'root'\n        ? {\n            column: 0,\n            row: clampRowOrigin(row),\n            columns: 12,\n            rows: clampRows(rows, 1),\n          }\n        : normalizePlacement(\n            { column, row, columns, rows },\n            node.tree.parentColumns,\n            node.tree.parentRows,\n          );\n    const placementStyle = getPlacementStyle(node.tree, normalizedPlacement);\n    const childMinimum = getContainerChildMinimum(\n      kind,\n      children,\n      normalizedPlacement.columns,\n      normalizedPlacement.rows,\n    );\n    const descendantContainerDepth =\n      getDashboardDescendantContainerDepth(children);\n    const isEmpty = !hasContainerLayoutChildren(kind, children);\n    const columnLimit = node.tree.parentColumns;\n    const rowLimit =\n      node.tree.parentKind === 'root'\n        ? Math.max(\n            childMinimum.rows,\n            clampRows(maxRows, Math.max(12, normalizedPlacement.rows)),\n          )\n        : node.tree.parentRows;\n    const resolvedMinColumns = clamp(\n      Math.max(clampSpan(minColumns, 1), childMinimum.columns),\n      1,\n      columnLimit,\n    );\n    const resolvedMaxColumns = clamp(\n      clampSpan(maxColumns, columnLimit),\n      resolvedMinColumns,\n      columnLimit,\n    );\n    const resolvedMinRows = clamp(\n      Math.max(clampRows(minRows, 1), childMinimum.rows),\n      1,\n      rowLimit,\n    );\n    const resolvedMaxRows = clamp(\n      clampRows(maxRows, rowLimit),\n      resolvedMinRows,\n      rowLimit,\n    );\n    const canMove = isMovable && !!onPlacementChange;\n    const canMoveColumns =\n      canMove &&\n      node.tree.parentKind !== 'root' &&\n      node.tree.parentKind !== 'vertical-stack';\n    const canMoveRows = canMove && node.tree.parentKind !== 'horizontal-stack';\n    const canResizeColumns =\n      isResizable &&\n      !!onPlacementChange &&\n      node.tree.parentKind !== 'root' &&\n      node.tree.parentKind !== 'vertical-stack' &&\n      resolvedMaxColumns > resolvedMinColumns;\n    const canResizeRows =\n      isResizable &&\n      !!onPlacementChange &&\n      node.tree.parentKind !== 'horizontal-stack' &&\n      resolvedMaxRows > resolvedMinRows;\n    const canResize = canResizeColumns || canResizeRows;\n    const resizeAxis = canResizeColumns ? (canResizeRows ? 'both' : 'x') : 'y';\n    const shouldRenderTitle = kind === 'tabs' && !!title;\n    const label = ariaLabel ?? (typeof title === 'string' ? title : id);\n    const baseProps = filterBaseProps(otherProps, {\n      eventProps: true,\n      labelable: true,\n    });\n    const gestures = useDashboardGestures({\n      id,\n      isContainer: true,\n      containerKind: kind,\n      nodeRef: localRef,\n      tree: node.tree,\n      editing: node.editing,\n      metrics,\n      placement: normalizedPlacement,\n      isSelected: node.isSelected,\n      selectSelf: node.selectSelf,\n      onPlacementChange,\n      canMove,\n      canMoveColumns,\n      canMoveRows,\n      canResize,\n      canResizeColumns,\n      canResizeRows,\n      minColumns: resolvedMinColumns,\n      maxColumns: resolvedMaxColumns,\n      minRows: resolvedMinRows,\n      maxRows: resolvedMaxRows,\n      isRootChild: node.tree.parentKind === 'root',\n      maximumContainerParentDepth: Math.max(0, 2 - descendantContainerDepth),\n    });\n    const { isMoving, isResizing, dropPreview, surfaceMoveProps, resizeProps } =\n      gestures;\n    const handleSettingsPress = useEvent(() => {\n      node.selectSelf(false);\n      onSettingsPress?.();\n    });\n    const handleDeletePress = useEvent(() => {\n      node.selectSelf(false);\n      onDeletePress?.();\n    });\n    const handleDuplicatePress = useEvent(() => {\n      node.selectSelf(false);\n      onDuplicatePress?.();\n    });\n    const handleMenuResize = useEvent((next: DashboardPlacement) => {\n      gestures.reportPlacement(next, 'resize', 'commit', 'command');\n    });\n    const resolvedMods = {\n      ...mods,\n      depth: String(node.containerDepth),\n      titled: shouldRenderTitle,\n      selected: node.isSelected,\n      arriving: node.editing.arrivingIds.has(id),\n      hovered: node.isHovered,\n      'focus-within': node.isFocusWithin,\n      editing: node.editing.isEditing,\n      empty: isEmpty,\n      dragging: node.editing.movingId !== null,\n      movable: canMove,\n      moving: isMoving,\n      resizing: isResizing,\n    };\n    const ContainerResizeHandleElement =\n      node.tree.parentKind === 'root'\n        ? TopLevelResizeHandleElement\n        : ResizeHandleElement;\n\n    return (\n      <ContainerElement\n        {...mergeProps(baseProps, node.interactionProps, surfaceMoveProps)}\n        ref={combinedRef}\n        role=\"group\"\n        aria-label={moveLabel ?? label}\n        aria-roledescription={t('dashboard.container', 'Dashboard container')}\n        tabIndex={node.canSelect || canMove ? 0 : undefined}\n        data-dashboard-node=\"container\"\n        data-dashboard-node-id={id}\n        data-dashboard-depth={node.containerDepth}\n        data-dashboard-column={normalizedPlacement.column}\n        data-dashboard-row={normalizedPlacement.row}\n        data-dashboard-columns={normalizedPlacement.columns}\n        data-dashboard-rows={normalizedPlacement.rows}\n        data-dashboard-min-columns={resolvedMinColumns}\n        data-dashboard-max-columns={Math.max(\n          resolvedMinColumns,\n          clampSpan(maxColumns, 12),\n        )}\n        data-dashboard-min-rows={resolvedMinRows}\n        data-dashboard-max-rows={\n          maxRows === undefined\n            ? Number.MAX_SAFE_INTEGER\n            : Math.max(resolvedMinRows, clampRows(maxRows, resolvedMinRows))\n        }\n        data-selected={node.isSelected || undefined}\n        data-arriving={node.editing.arrivingIds.has(id) || undefined}\n        data-moving={isMoving || undefined}\n        data-resizing={isResizing || undefined}\n        data-dashboard-empty={isEmpty || undefined}\n        mods={resolvedMods}\n        styles={styles}\n        style={{ ...placementStyle, ...style }}\n      >\n        {shouldRenderTitle ? (\n          <ContainerHeaderElement>{title}</ContainerHeaderElement>\n        ) : null}\n        {content}\n        <DashboardNodeActions\n          label={label}\n          mods={resolvedMods}\n          qaAttribute=\"data-dashboard-container-actions\"\n          nodeId={id}\n          isSelected={node.isSelected}\n          placement={normalizedPlacement}\n          bounds={{\n            minColumns: resolvedMinColumns,\n            maxColumns: resolvedMaxColumns,\n            minRows: resolvedMinRows,\n            maxRows: resolvedMaxRows,\n            parentColumns: node.tree.parentColumns,\n            parentRows: rowLimit,\n          }}\n          canResizeColumns={canResizeColumns}\n          canResizeRows={canResizeRows}\n          nodeRef={localRef}\n          actions={actions}\n          settingsLabel={settingsLabel}\n          duplicateLabel={duplicateLabel}\n          deleteLabel={deleteLabel}\n          onResize={handleMenuResize}\n          onSettingsPress={onSettingsPress && handleSettingsPress}\n          onDuplicatePress={onDuplicatePress && handleDuplicatePress}\n          onDeletePress={onDeletePress && handleDeletePress}\n          onMenuAction={onMenuAction}\n        />\n        {canResize ? (\n          <ContainerResizeHandleElement\n            {...resizeProps}\n            type=\"button\"\n            aria-label={\n              resizeLabel ??\n              t('dashboard.resizeContainer', 'Resize dashboard container')\n            }\n            data-dashboard-container-resize-handle=\"\"\n            data-dashboard-resize-axis={resizeAxis}\n            data-dashboard-no-select=\"\"\n            aria-hidden={!node.isSelected || undefined}\n            tabIndex={node.isSelected ? undefined : -1}\n            mods={{\n              ...resolvedMods,\n              axis: resizeAxis,\n              corner: resizeAxis === 'both',\n            }}\n          >\n            <span data-element=\"Icon\">\n              {resizeAxis === 'both' ? (\n                <CornerResizeGripElement />\n              ) : (\n                <GripVerticalIcon size=\"1.5x\" />\n              )}\n            </span>\n          </ContainerResizeHandleElement>\n        ) : null}\n        {renderDashboardDropPreview(\n          dropPreview,\n          t('dashboard.dropBlocked', 'This position is already taken'),\n        )}\n      </ContainerElement>\n    );\n  },\n);\n\nexport function DashboardContainer(\n  kind: Exclude<DashboardContainerKind, 'tabs'>,\n  props: CubeDashboardContainerProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const { id, columns, rows = 1, children } = props;\n  const tree = useContext(DashboardTreeContext);\n  const containerDepth = tree.containerDepth + 1;\n  const resolvedColumns =\n    tree.parentKind === 'root'\n      ? 12\n      : Math.min(clampSpan(columns, tree.parentColumns), tree.parentColumns);\n  const resolvedRows =\n    tree.parentKind === 'root'\n      ? clampRows(rows, 1)\n      : Math.min(clampRows(rows, 1), tree.parentRows);\n  const childTree = useMemo<DashboardTreeContextValue>(\n    () => ({\n      containerDepth,\n      parentKind: kind,\n      parentId: id,\n      layoutParentId: id,\n      parentColumns: resolvedColumns,\n      parentRows: resolvedRows,\n      ancestorIds: [...tree.ancestorIds, id],\n    }),\n    [containerDepth, id, kind, resolvedColumns, resolvedRows, tree.ancestorIds],\n  );\n\n  const content = (\n    <DashboardTreeContext.Provider value={childTree}>\n      <DashboardContainerContent\n        id={id}\n        kind={kind}\n        columns={resolvedColumns}\n        rows={resolvedRows}\n        depth={containerDepth}\n        ancestorIds={[...tree.ancestorIds, id]}\n      >\n        {children}\n      </DashboardContainerContent>\n    </DashboardTreeContext.Provider>\n  );\n\n  return (\n    <DashboardContainerShell\n      {...props}\n      ref={ref}\n      kind={kind}\n      content={content}\n    />\n  );\n}\n\nexport const DashboardHorizontalStack = forwardRef(\n  function DashboardHorizontalStack(\n    props: CubeDashboardContainerProps,\n    ref: ForwardedRef<HTMLDivElement>,\n  ) {\n    return DashboardContainer('horizontal-stack', props, ref);\n  },\n);\nDashboardHorizontalStack.displayName = 'DashboardHorizontalStack';\n\nexport const DashboardVerticalStack = forwardRef(\n  function DashboardVerticalStack(\n    props: CubeDashboardContainerProps,\n    ref: ForwardedRef<HTMLDivElement>,\n  ) {\n    return DashboardContainer('vertical-stack', props, ref);\n  },\n);\nDashboardVerticalStack.displayName = 'DashboardVerticalStack';\n\nexport const DashboardGrid = forwardRef(function DashboardGrid(\n  props: CubeDashboardContainerProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  return DashboardContainer('grid', props, ref);\n});\nDashboardGrid.displayName = 'DashboardGrid';\n"],"mappings":"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"}