@cube-dev/ui-kit 0.144.0 → 0.145.1

package/dist/components/form/Form/Form.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.144.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.145.1 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
 import { Provider, useProviderProps } from "../../../provider.js";

package/dist/components/form/Form/ResetButton/ResetButton.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.144.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.145.1 | Cube Dev Team */
 import { mergeProps } from "../../../../utils/react/mergeProps.js";
 import { useEvent } from "../../../../_internal/hooks/use-event.js";
 import { useProviderProps } from "../../../../provider.js";

package/dist/components/form/Form/SubmitButton/SubmitButton.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.144.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.145.1 | Cube Dev Team */
 import { useProviderProps } from "../../../../provider.js";
 import { Button } from "../../../actions/Button/Button.js";
 import { useFormProps } from "../Form.js";

package/dist/components/form/Form/SubmitError.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.144.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.145.1 | Cube Dev Team */
 import { FormContext } from "./Form.js";
 import { Alert } from "../../content/Alert/Alert.js";
 import { forwardRef, isValidElement, useContext } from "react";

package/dist/components/form/Form/index.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.144.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.145.1 | Cube Dev Team */
 import { useForm } from "./use-form.js";
 import { FormContext, _Form, useFormProps } from "./Form.js";
 import { useField } from "./use-field/use-field.js";

package/dist/components/form/Form/use-field/use-field-props.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.144.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.145.1 | Cube Dev Team */
 import { mergeProps } from "../../../../utils/react/mergeProps.js";
 import { useEvent } from "../../../../_internal/hooks/use-event.js";
 import { warn } from "../../../../utils/warnings.js";

package/dist/components/form/Form/use-field/use-field.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.144.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.145.1 | Cube Dev Team */
 import { useEvent } from "../../../../_internal/hooks/use-event.js";
 import { useIsFirstRender } from "../../../../_internal/hooks/use-is-first-render.js";
 import { delayValidationRule } from "../validation.js";

package/dist/components/form/Form/use-form.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.144.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.145.1 | Cube Dev Team */
 import { applyRules } from "./validation.js";
 import { dotize } from "@tenphi/tasty";
 import { useRef, useState } from "react";

package/dist/components/form/Form/validation.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.144.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.145.1 | Cube Dev Team */
 import { validate } from "email-validator";
 import validUrl from "valid-url";
 

package/dist/components/form/Label.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.144.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.145.1 | Cube Dev Team */
 import { extractStyles } from "../../utils/styles.js";
 import { useProviderProps } from "../../provider.js";
 import { CONTAINER_STYLES, filterBaseProps, tasty } from "@tenphi/tasty";

package/dist/components/form/wrapper.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.144.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.145.1 | Cube Dev Team */
 import { mergeProps } from "../../utils/react/mergeProps.js";
 import { FieldWrapper } from "./FieldWrapper/FieldWrapper.js";
 import { jsx } from "react/jsx-runtime";

package/dist/components/helpers/DisplayTransition/DisplayTransition.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.144.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.145.1 | Cube Dev Team */
 import { useCallback, useLayoutEffect, useRef, useState } from "react";
 
 //#region src/components/helpers/DisplayTransition/DisplayTransition.tsx

package/dist/components/helpers/IconSwitch/IconSwitch.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.144.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.145.1 | Cube Dev Team */
 import { DisplayTransition } from "../DisplayTransition/DisplayTransition.js";
 import { tasty } from "@tenphi/tasty";
 import { isValidElement, useCallback, useLayoutEffect, useRef, useState } from "react";

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

@@ -1,5 +1,6 @@
 
 import { LayoutConstraint, LayoutItem, ResizeHandleAxis } from "./grid-core/types.js";
+import { CubeBoardWidgetProps } from "./Widget.js";
 import { AllBaseProps, ContainerStyleProps } from "@tenphi/tasty";
 import { ReactNode } from "react";
 
@@ -20,6 +21,12 @@ interface BoardInteractionInfo {
 }
 /** Visibility of the internal grid-line overlay. */
 type BoardGridLines = boolean | 'drag';
+/**
+ * The subset of `Board.Widget` props a `Board` can set as defaults for every
+ * widget it hosts (via `widgetProps`). Excludes `id`/`children`, which are
+ * per-widget. Per-widget `Board.Widget` props override these.
+ */
+type CubeBoardWidgetDefaults = Omit<CubeBoardWidgetProps, 'id' | 'children'>;
 interface CubeBoardProps extends Omit<AllBaseProps, 'children' | 'onDragStart' | 'onDrag' | 'onResize'>, Omit<ContainerStyleProps, 'margin'> {
   /** Stable board id (used for cross-board drag). Auto-generated if omitted. */
   id?: string;
@@ -46,7 +53,11 @@ interface CubeBoardProps extends Omit<AllBaseProps, 'children' | 'onDragStart' |
   rowHeight?: number;
   /** [horizontal, vertical] margin between widgets in pixels. @default [8, 8] */
   margin?: [number, number];
-  /** [horizontal, vertical] padding inside the board. Defaults to `margin`. */
+  /**
+   * [horizontal, vertical] padding inside the board. Defaults to `margin`, or
+   * to `[0, 0]` for an aligned nested board (`isAligned`) so its grid lines up
+   * with the ancestor board's.
+   */
   containerPadding?: [number, number];
   /** Maximum number of rows. @default Infinity */
   maxRows?: number;
@@ -90,10 +101,11 @@ interface CubeBoardProps extends Omit<AllBaseProps, 'children' | 'onDragStart' |
   /**
    * Align this board's grid with an ancestor `Board`'s layout. Only takes
    * effect when the board is nested inside another `Board`'s widget. When set,
-   * the board inherits the parent's column pitch (deriving its own column count
-   * from its measured width so cells stay parent-sized) and inherits the
-   * parent's row height as a target, shrinking rows slightly when needed to fit
-   * the height the container widget grants it. @default false
+   * every cell matches the parent's cell size exactly: the board inherits the
+   * parent's column pitch (deriving its own column count from its measured
+   * width) and uses the parent's row height verbatim. It never shrinks rows to
+   * fit; pair it with an `isAutoHeight` container so the widget grows to fit its
+   * rows at that height. @default false
    */
   isAligned?: boolean;
   /** Grid/item layout constraints. */
@@ -103,6 +115,13 @@ interface CubeBoardProps extends Omit<AllBaseProps, 'children' | 'onDragStart' |
    * measurement (useful for SSR and tests).
    */
   width?: number;
+  /**
+   * Default props applied to every widget this board hosts. Per-widget
+   * `Board.Widget` props override these. Use it to add a card border to every
+   * widget (`widgetProps={{ isCard: true }}`) or set shared sizing/`styles`
+   * defaults without repeating them on each `Board.Widget`.
+   */
+  widgetProps?: Partial<CubeBoardWidgetDefaults>;
   children?: ReactNode;
 }
 //#endregion

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

@@ -1,17 +1,17 @@
-/** @license MIT | @cube-dev/ui-kit v0.144.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.145.1 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";
-import { BoardMetricsContext, useBoardHost, useBoardMetrics, useBoardRegistry } from "./board-context.js";
+import { BoardGridLinesContext, BoardMetricsContext, useBoardGridLines, useBoardHost, useBoardMetrics, useBoardRegistry } from "./board-context.js";
 import { getAllCollisions } from "./grid-core/collision.js";
 import { bottom, cloneLayout, correctBounds, getLayoutItem, modifyLayout } from "./grid-core/layout.js";
 import { getCompactor } from "./grid-core/compactors.js";
-import { calcGridColWidth, calcGridItemPosition, calcWH, clamp } from "./grid-core/calculate.js";
+import { calcGridColWidth, calcGridItemPosition, calcWH } from "./grid-core/calculate.js";
 import { applySizeConstraints, defaultConstraints } from "./grid-core/constraints.js";
 import { BoardProvider } from "./BoardProvider.js";
 import { useBoardLayout } from "./use-board-layout.js";
 import { WidgetHost } from "./WidgetHost.js";
-import { CONTAINER_STYLES, filterBaseProps, tasty } from "@tenphi/tasty";
+import { CONTAINER_STYLES, filterBaseProps, mergeStyles, tasty } from "@tenphi/tasty";
 import { forwardRef, useEffect, useId, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useResizeObserver } from "@react-aria/utils";
@@ -25,7 +25,7 @@ const BoardElement = tasty({
 		width: "100%",
 		flexGrow: 1,
 		minHeight: "0",
-		fill: "#clear",
+		fill: "#surface",
 		boxSizing: "border-box"
 	}
 });
@@ -44,7 +44,7 @@ const PlaceholderElement = tasty({
 		border: "#purple.40",
 		zIndex: 2,
 		pointerEvents: "none",
-		transition: "transform 80ms linear, width 80ms linear, height 80ms linear",
+		transition: "inset 80ms linear, width 80ms linear, height 80ms linear",
 		boxSizing: "border-box"
 	}
 });
@@ -58,21 +58,23 @@ const GridOverlayElement = tasty({
 		opacity: ".5"
 	}
 });
-/**
-* Lower bound for the reduced row height used by an aligned nested board, so a
-* very short container can never collapse its rows to zero.
-*/
-const MIN_ALIGNED_ROW_HEIGHT = 24;
 function compactTypeToCore(compact) {
 	if (compact === "free") return null;
 	return compact;
 }
 function BoardInner(props, ref) {
-	const { id: providedId, layout: controlledLayout, defaultLayout, onLayoutChange, onDragStart, onDrag, onDragStop, onResizeStart, onResize: onResizeProp, onResizeStop, cols = 12, rowHeight = 100, margin = [8, 8], containerPadding, maxRows = Infinity, compact = "vertical", allowOverlap = false, preventCollision = false, isDraggable = true, isResizable = true, isDroppable = true, resizeHandles = ["se"], dragCancel, dragHandle, showGridLines = false, isAligned = false, constraints, width: providedWidth, children, ...otherProps } = props;
+	const { id: providedId, layout: controlledLayout, defaultLayout, onLayoutChange, onDragStart, onDrag, onDragStop, onResizeStart, onResize: onResizeProp, onResizeStop, cols = 12, rowHeight = 100, margin = [8, 8], containerPadding, maxRows = Infinity, compact = "vertical", allowOverlap = false, preventCollision = false, isDraggable = true, isResizable = true, isDroppable = true, resizeHandles = ["se"], dragCancel, dragHandle, showGridLines, isAligned = false, constraints, width: providedWidth, widgetProps, children, ...otherProps } = props;
 	const registry = useBoardRegistry();
 	const parentMetrics = useBoardMetrics();
 	const host = useBoardHost();
+	const inheritedGridLines = useBoardGridLines();
 	const aligned = isAligned && !!parentMetrics;
+	const widgetPropsStyles = useMemo(() => {
+		if (!widgetProps) return void 0;
+		const extracted = extractStyles(widgetProps, CONTAINER_STYLES);
+		return Object.keys(extracted).length > 0 ? extracted : void 0;
+	}, [widgetProps]);
+	const effectiveShowGridLines = showGridLines ?? (inheritedGridLines ? "drag" : false);
 	const generatedId = useId();
 	const boardId = providedId ?? generatedId;
 	const containerRef = useCombinedRefs(ref);
@@ -102,14 +104,13 @@ function BoardInner(props, ref) {
 	});
 	useSyncExternalStore(registry.store.subscribe, registry.store.getVersion);
 	const effectiveMargin = aligned ? parentMetrics.margin : margin;
-	const resolvedPadding = containerPadding ?? effectiveMargin;
+	const resolvedPadding = containerPadding ?? (aligned ? [0, 0] : effectiveMargin);
 	const rows = Math.max(bottom(layout), placeholder ? placeholder.y + placeholder.h : 0);
 	const parentColWidth = aligned ? parentMetrics.colWidth : 0;
-	const alignedCols = aligned && width > 0 ? Math.max(1, Math.floor((width - resolvedPadding[0] * 2 + effectiveMargin[0]) / (parentColWidth + effectiveMargin[0]))) : cols;
+	const alignedCols = aligned && width > 0 ? Math.max(1, Math.floor((width - resolvedPadding[0] * 2 + effectiveMargin[0] + 2) / (parentColWidth + effectiveMargin[0]))) : cols;
 	const effectiveCols = aligned ? alignedCols : cols;
 	const effectiveContainerWidth = aligned ? parentColWidth * effectiveCols + effectiveMargin[0] * Math.max(0, effectiveCols - 1) + resolvedPadding[0] * 2 : width;
-	const parentRowHeight = aligned ? parentMetrics.rowHeight : rowHeight;
-	const effectiveRowHeight = aligned && rows > 0 && measuredHeight > 0 ? clamp((measuredHeight - Math.max(0, rows - 1) * effectiveMargin[1] - resolvedPadding[1] * 2) / rows, MIN_ALIGNED_ROW_HEIGHT, parentRowHeight) : parentRowHeight;
+	const effectiveRowHeight = aligned ? parentMetrics.rowHeight : rowHeight;
 	const positionParams = useMemo(() => ({
 		margin: effectiveMargin,
 		containerPadding: resolvedPadding,
@@ -197,7 +198,7 @@ function BoardInner(props, ref) {
 		effectiveCols,
 		recompactForCols
 	]);
-	const naturalHeight = rows > 0 ? rows * parentRowHeight + Math.max(0, rows - 1) * effectiveMargin[1] + resolvedPadding[1] * 2 : parentRowHeight;
+	const naturalHeight = rows > 0 ? rows * effectiveRowHeight + Math.max(0, rows - 1) * effectiveMargin[1] + resolvedPadding[1] * 2 : effectiveRowHeight;
 	const requestHeightDeficit = host?.requestHeightDeficit;
 	useEffect(() => {
 		if (!aligned || !host?.isAutoHeight || !requestHeightDeficit) return;
@@ -217,9 +218,14 @@ function BoardInner(props, ref) {
 		if (phase === "start") {
 			const rawItem = getLayoutItem(layoutRef.current, id);
 			if (!rawItem) return;
+			const reg = registry.store.get(id);
 			const item = {
 				...rawItem,
-				constraints: rawItem.constraints ?? registry.store.get(id)?.constraints
+				minW: rawItem.minW ?? reg?.minW ?? widgetProps?.minW,
+				maxW: rawItem.maxW ?? reg?.maxW ?? widgetProps?.maxW,
+				minH: rawItem.minH ?? reg?.minH ?? widgetProps?.minH,
+				maxH: rawItem.maxH ?? reg?.maxH ?? widgetProps?.maxH,
+				constraints: rawItem.constraints ?? reg?.constraints ?? widgetProps?.constraints
 			};
 			resizeStateRef.current = {
 				id,
@@ -344,16 +350,18 @@ function BoardInner(props, ref) {
 	const styles = extractStyles(otherProps, CONTAINER_STYLES);
 	const dragState = registry.dragState;
 	const ready = width > 0;
+	const hostWidgetIsDragging = !!dragState && dragState.nestedBoardIds.has(boardId);
 	const placeholderStyle = placeholder ? (() => {
 		const pos = calcGridItemPosition(positionParams, placeholder.x, placeholder.y, placeholder.w, placeholder.h);
 		return {
-			transform: `translate(${pos.left}px, ${pos.top}px)`,
+			left: `${pos.left}px`,
+			top: `${pos.top}px`,
 			width: `${pos.width}px`,
 			height: `${pos.height}px`
 		};
 	})() : null;
 	const showPlaceholder = placeholder && placeholderStyle;
-	const gridOverlayStyle = showGridLines === true || showGridLines === "drag" && (!!dragState || !!placeholder) ? (() => {
+	const gridOverlayStyle = !hostWidgetIsDragging && (effectiveShowGridLines === true || effectiveShowGridLines === "drag" && (!!dragState || !!placeholder)) ? (() => {
 		const colWidth = calcGridColWidth(positionParams);
 		const rowHeightPx = positionParams.rowHeight;
 		const pitchX = colWidth + effectiveMargin[0];
@@ -389,47 +397,62 @@ function BoardInner(props, ref) {
 	}), [positionParams]);
 	return /* @__PURE__ */ jsx(BoardMetricsContext.Provider, {
 		value: boardMetrics,
-		children: /* @__PURE__ */ jsxs(BoardElement, {
-			...filterBaseProps(otherProps, { eventProps: true }),
-			ref: containerRef,
-			styles,
-			style: aligned ? void 0 : { minHeight: `${containerHeight}px` },
-			mods: {
-				dragging: !!dragState,
-				"drop-target": dragState?.currentBoardId === boardId
-			},
-			children: [/* @__PURE__ */ jsxs(ContentLayer, {
-				ref: contentRef,
-				children: [
-					ready && gridOverlayStyle ? /* @__PURE__ */ jsx(GridOverlayElement, {
-						"aria-hidden": "true",
-						style: gridOverlayStyle
-					}) : null,
-					ready ? layout.map((item) => {
-						const registration = registry.store.get(item.i);
-						return /* @__PURE__ */ jsx(WidgetHost, {
-							boardId,
-							item,
-							positionParams,
-							registration,
-							isDraggable: isDraggable && registration?.isDraggable !== false && item.isDraggable !== false && !item.static,
-							isResizable: isResizable && registration?.isResizable !== false && item.isResizable !== false && !item.static,
-							resizeHandles: item.resizeHandles ?? registration?.resizeHandles ?? resizeHandles,
-							dragCancel: registration?.dragCancel ?? dragCancel,
-							dragHandle: registration?.dragHandle ?? dragHandle,
-							registry,
-							dragState,
-							onResize: handleResize,
-							onAutoHeight: handleAutoHeight,
-							onDragLifecycle: handleDragLifecycle
-						}, item.i);
-					}) : null,
-					showPlaceholder ? /* @__PURE__ */ jsx(PlaceholderElement, {
-						"aria-hidden": "true",
-						style: placeholderStyle
-					}) : null
-				]
-			}), children]
+		children: /* @__PURE__ */ jsx(BoardGridLinesContext.Provider, {
+			value: effectiveShowGridLines === true || effectiveShowGridLines === "drag",
+			children: /* @__PURE__ */ jsxs(BoardElement, {
+				...filterBaseProps(otherProps, { eventProps: true }),
+				ref: containerRef,
+				styles,
+				style: aligned ? void 0 : { minHeight: `${containerHeight}px` },
+				mods: {
+					dragging: !!dragState,
+					"drop-target": dragState?.currentBoardId === boardId
+				},
+				children: [/* @__PURE__ */ jsxs(ContentLayer, {
+					ref: contentRef,
+					children: [
+						ready && gridOverlayStyle ? /* @__PURE__ */ jsx(GridOverlayElement, {
+							"aria-hidden": "true",
+							style: gridOverlayStyle
+						}) : null,
+						ready ? layout.map((item) => {
+							const registration = registry.store.get(item.i);
+							const widgetDraggable = isDraggable && (registration?.isDraggable ?? widgetProps?.isDraggable) !== false && item.isDraggable !== false && !item.static;
+							const widgetResizable = isResizable && (registration?.isResizable ?? widgetProps?.isResizable) !== false && item.isResizable !== false && !item.static;
+							const handles = item.resizeHandles ?? registration?.resizeHandles ?? widgetProps?.resizeHandles ?? resizeHandles;
+							const widgetDragCancel = registration?.dragCancel ?? widgetProps?.dragCancel ?? dragCancel;
+							const widgetDragHandle = registration?.dragHandle ?? widgetProps?.dragHandle ?? dragHandle;
+							const widgetIsCard = registration?.isCard ?? widgetProps?.isCard ?? false;
+							const widgetIsAutoHeight = registration?.isAutoHeight ?? widgetProps?.isAutoHeight ?? false;
+							const widgetQa = registration?.qa ?? widgetProps?.qa;
+							return /* @__PURE__ */ jsx(WidgetHost, {
+								boardId,
+								item,
+								positionParams,
+								registration,
+								isCard: widgetIsCard,
+								styles: registration?.styles && widgetPropsStyles ? mergeStyles(widgetPropsStyles, registration.styles) : registration?.styles ?? widgetPropsStyles,
+								isDraggable: widgetDraggable,
+								isResizable: widgetResizable,
+								resizeHandles: handles,
+								isAutoHeight: widgetIsAutoHeight,
+								qa: widgetQa,
+								dragCancel: widgetDragCancel,
+								dragHandle: widgetDragHandle,
+								registry,
+								dragState,
+								onResize: handleResize,
+								onAutoHeight: handleAutoHeight,
+								onDragLifecycle: handleDragLifecycle
+							}, item.i);
+						}) : null,
+						showPlaceholder ? /* @__PURE__ */ jsx(PlaceholderElement, {
+							"aria-hidden": "true",
+							style: placeholderStyle
+						}) : null
+					]
+				}), children]
+			})
 		})
 	});
 }