@cube-dev/ui-kit 0.159.0 → 0.161.0

package/dist/components/fields/TextInput/TextInputBase.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.159.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.161.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";

package/dist/components/fields/TextInputMapper/TextInputMapper.js

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

package/dist/components/fields/color/ColorPanel.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.159.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.161.0 | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { formatColor, getContrastingColor, toHex } from "./color.js";
 import { CHANNELS, COLOR_SPACES, COLOR_SPACE_HINTS, COLOR_SPACE_LABELS } from "./channels.js";

package/dist/components/fields/color/ColorSwatch.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.159.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.161.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { parseColor, toHex } from "./color.js";
 import { BASE_STYLES, BLOCK_STYLES, DIMENSION_STYLES, OUTER_STYLES, tasty } from "@tenphi/tasty";

package/dist/components/fields/color/channels.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.159.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.161.0 | Cube Dev Team */
 import { fromOkhst, fromOklch, fromRgb, isAchromatic, maxChroma, normalizeHue, toHex, toOkhst, toOklch, toRgb } from "./color.js";
 
 //#region src/components/fields/color/channels.ts

package/dist/components/fields/color/color.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.159.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.161.0 | Cube Dev Team */
 import { contrastRatioFromLuminance, formatHsl, formatOkhsl, formatOkhst, formatOklch, formatRgb, hslToSrgb, okhslToLinearSrgb, okhslToOkhst, okhslToOklch, okhslToSrgb, okhstToOkhsl, oklabToOkhsl, parseHexAlpha, relativeLuminanceFromLinearRgb, srgbToHex, srgbToOkhsl } from "@tenphi/glaze";
 
 //#region src/components/fields/color/color.ts

package/dist/components/fields/color/context.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.159.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.161.0 | Cube Dev Team */
 import { createContext, useContext } from "react";
 
 //#region src/components/fields/color/context.ts

package/dist/components/form/FieldWrapper/FieldWrapper.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.159.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.161.0 | Cube Dev Team */
 import { mergeProps } from "../../../utils/react/mergeProps.js";
 import { wrapNodeIfPlain } from "../../../utils/react/wrapNodeIfPlain.js";
 import { _Text } from "../../content/Text.js";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.159.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.161.0 | Cube Dev Team */
 import { mergeProps } from "../../../utils/react/mergeProps.js";
 import { warn } from "../../../utils/warnings.js";
 import { useValidationProps } from "../validation/use-validation-props.js";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.159.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.161.0 | 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.159.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.161.0 | 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.159.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.161.0 | 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.159.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.161.0 | Cube Dev Team */
 import { useI18n } from "../../../i18n/useI18n.js";
 import { FormContext } from "./Form.js";
 import { Alert } from "../../content/Alert/Alert.js";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.159.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.161.0 | 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.159.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.161.0 | 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.159.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.161.0 | Cube Dev Team */
 import { useEvent } from "../../../../_internal/hooks/use-event.js";
 import { useIsFirstRender } from "../../../../_internal/hooks/use-is-first-render.js";
 import { resolveValidationProps } from "../../validation/resolve-validation-props.js";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.159.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.161.0 | 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.159.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.161.0 | 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.159.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.161.0 | Cube Dev Team */
 import { extractStyles } from "../../utils/styles.js";
 import { useProviderProps } from "../../provider.js";
 import { useI18n } from "../../i18n/useI18n.js";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.159.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.161.0 | Cube Dev Team */
 import { LoadingIcon } from "../../../icons/LoadingIcon.js";
 import { hasValidationState } from "./resolve-validation-props.js";
 import { InvalidIcon } from "../../shared/InvalidIcon.js";

package/dist/components/form/validation/resolve-validation-props.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.159.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.161.0 | Cube Dev Team */
 //#region src/components/form/validation/resolve-validation-props.ts
 /**
 * Normalizes the validation props of a field into a pair of booleans.

package/dist/components/form/validation/use-validation-props.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.159.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.161.0 | Cube Dev Team */
 import { useWarn } from "../../../_internal/hooks/use-warn.js";
 import { resolveValidationProps } from "./resolve-validation-props.js";
 

package/dist/components/form/wrapper.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.159.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.161.0 | 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.159.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.161.0 | 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.159.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.161.0 | 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.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.159.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.161.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
@@ -32,7 +32,11 @@ const BoardElement = tasty({
 		height: "min 0",
 		fill: "#surface",
 		boxSizing: "border-box",
-		outline: 0
+		outline: 0,
+		userSelect: {
+			"": "auto",
+			marquee: "none"
+		}
 	}
 });
 const ContentLayer = tasty({ styles: {
@@ -98,6 +102,8 @@ const GridOverlayElement = tasty({
 const BOARD_SELECTION_CANCEL = "input,textarea,select,button,a,[role=\"button\"],[role=\"menuitem\"],[role=\"checkbox\"],[role=\"switch\"],[role=\"tab\"],[contenteditable=\"true\"],[data-no-select]";
 /** Manhattan distance a pointer must travel before a press becomes a marquee. */
 const MARQUEE_THRESHOLD = 4;
+/** Shared empty set, so "no pre-selection" is a stable reference. */
+const NO_KEYS = /* @__PURE__ */ new Set();
 /**
 * Whether an event landed in a text-editing context. Checking the *event target*
 * beats `document.activeElement`: it stays correct for content rendered through
@@ -440,6 +446,8 @@ function BoardInner(props, ref) {
 		}
 	});
 	const [marqueeRect, setMarqueeRect] = useState(null);
+	const [preSelectedKeys, setPreSelectedKeys] = useState(NO_KEYS);
+	const [isMarqueeActive, setIsMarqueeActive] = useState(false);
 	const handleContentPointerDown = useEvent((event) => {
 		if (selectionMode !== "multiple" || !allowMarqueeSelection || event.button !== 0 || registry.dragState) return;
 		const target = event.target;
@@ -447,6 +455,8 @@ function BoardInner(props, ref) {
 		if (selectionCancel && target?.closest(selectionCancel)) return;
 		const content = contentRef.current;
 		if (!content) return;
+		event.preventDefault();
+		setIsMarqueeActive(true);
 		const origin = content.getBoundingClientRect();
 		const startX = event.clientX;
 		const startY = event.clientY;
@@ -474,16 +484,27 @@ function BoardInner(props, ref) {
 				}
 			};
 		};
+		const blockSelectStart = (e) => e.preventDefault();
 		const handleMove = (e) => {
 			if (!passedThreshold && Math.abs(e.clientX - startX) + Math.abs(e.clientY - startY) < MARQUEE_THRESHOLD) return;
+			if (!passedThreshold) {
+				const selection = window.getSelection();
+				const anchor = selection?.anchorNode;
+				if (anchor && containerRef.current?.contains(anchor)) selection?.removeAllRanges();
+			}
 			passedThreshold = true;
-			setMarqueeRect(hitTest(e.clientX, e.clientY).box);
+			const { box, next } = hitTest(e.clientX, e.clientY);
+			setMarqueeRect(box);
+			setPreSelectedKeys(next);
 		};
 		const finish = (e) => {
 			window.removeEventListener("pointermove", handleMove);
 			window.removeEventListener("pointerup", finish);
 			window.removeEventListener("pointercancel", finish);
+			window.removeEventListener("selectstart", blockSelectStart);
 			setMarqueeRect(null);
+			setPreSelectedKeys(NO_KEYS);
+			setIsMarqueeActive(false);
 			if (passedThreshold) setSelection(hitTest(e.clientX, e.clientY).next);
 			else if (!additive) clearSelection();
 			containerRef.current?.focus({ preventScroll: true });
@@ -491,6 +512,7 @@ function BoardInner(props, ref) {
 		window.addEventListener("pointermove", handleMove);
 		window.addEventListener("pointerup", finish);
 		window.addEventListener("pointercancel", finish);
+		window.addEventListener("selectstart", blockSelectStart);
 	});
 	const marqueeStyle = marqueeRect ? {
 		left: `${marqueeRect.left}px`,
@@ -600,7 +622,8 @@ function BoardInner(props, ref) {
 				style: aligned ? void 0 : { minHeight: `${containerHeight}px` },
 				mods: {
 					dragging: !!dragState,
-					"drop-target": dragState?.currentBoardId === boardId
+					"drop-target": dragState?.currentBoardId === boardId,
+					marquee: isMarqueeActive
 				},
 				children: [
 					/* @__PURE__ */ jsxs(ContentLayer, {
@@ -639,6 +662,7 @@ function BoardInner(props, ref) {
 									dragHandle: widgetDragHandle,
 									isSelectable: widgetSelectable,
 									isSelected: selectedKeySet.has(item.i),
+									isPreSelected: preSelectedKeys.has(item.i),
 									selectionCancel: widgetSelectionCancel,
 									selectedHintId,
 									onSelect: select,