@cube-dev/ui-kit 0.0.0-canary-31b0e8c → 0.0.0-canary-3f57cd4

package/dist/components/fields/ListBox/DraggableListBox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DraggableListBox.js","names":[],"sources":["../../../../src/components/fields/ListBox/DraggableListBox.tsx"],"sourcesContent":["import { ReactNode, RefObject } from 'react';\nimport {\n  DraggableCollectionState,\n  DroppableCollectionState,\n  ListState,\n} from 'react-stately';\n\nimport { DraggableCollection } from '../../shared/DraggableCollection';\n\n// =============================================================================\n// Types\n// =============================================================================\n\nexport interface DraggableListBoxProps {\n  /** List state from React Stately (useListState) */\n  state: Pick<\n    ListState<any>,\n    'collection' | 'selectionManager' | 'disabledKeys'\n  >;\n  /** Ref to the list container element */\n  listRef: RefObject<HTMLElement | null>;\n  /** Current ordered keys */\n  orderedKeys: string[];\n  /** Callback when items are reordered */\n  onReorder?: (newOrder: string[]) => void;\n  /** Render function that receives drag/drop states */\n  children: (\n    dragState: DraggableCollectionState,\n    dropState: DroppableCollectionState,\n    collectionProps: Record<string, unknown>,\n  ) => ReactNode;\n}\n\n// =============================================================================\n// Component\n// =============================================================================\n\n/**\n * Wrapper that enables drag-and-drop reordering for a vertical ListBox.\n *\n * Thin wrapper around DraggableCollection with vertical orientation.\n */\nexport function DraggableListBox({\n  state,\n  listRef,\n  orderedKeys,\n  onReorder,\n  children,\n}: DraggableListBoxProps) {\n  return (\n    <DraggableCollection\n      state={state}\n      listRef={listRef}\n      orderedKeys={orderedKeys}\n      orientation=\"vertical\"\n      onReorder={onReorder}\n    >\n      {children}\n    </DraggableCollection>\n  );\n}\n"],"mappings":";;;;;;;;;;AA0CA,SAAgB,iBAAiB,EAC/B,OACA,SACA,aACA,WACA,YACwB;AACxB,QACE,oBAAC;EACQ;EACE;EACI;EACb,aAAY;EACD;EAEV;GACmB"}

package/dist/components/fields/ListBox/ListBox.d.ts

@@ -119,6 +119,17 @@ interface CubeListBoxProps<T> extends AriaListBoxProps<T>, CollectionBase<T>, Fi
    * Defaults to 'card'.
    */
   shape?: 'card' | 'plain' | 'popover';
+  /**
+   * Enable drag-and-drop reordering of list items.
+   * When enabled, virtualization is disabled and each item gets a drag handle.
+   * @default false
+   */
+  isReorderable?: boolean;
+  /**
+   * Callback when items are reordered via drag-and-drop.
+   * Called with the new array of item keys in their new order.
+   */
+  onReorder?: (newOrder: string[]) => void;
 }
 declare const ListBox: (<T>(props: CubeListBoxProps<T> & {
   ref?: ForwardedRef<HTMLDivElement>;

package/dist/components/fields/ListBox/ListBox.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-31b0e8c | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-3f57cd4 | 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";
@@ -9,15 +9,17 @@ import { useWarn } from "../../../_internal/hooks/use-warn.js";
 import { useProviderProps } from "../../../provider.js";
 import { _CollectionItem, filterCollectionItemProps } from "../../CollectionItem.js";
 import { _Item } from "../../content/Item/Item.js";
+import { GripVerticalIcon } from "../../../icons/GripVerticalIcon.js";
 import { StyledDivider, StyledFooter, StyledHeader, StyledSectionHeading } from "../../actions/Menu/styled.js";
 import { SIZES, SIZE_NAME_TO_KEY } from "../../../tokens/sizes.js";
 import { useFormProps } from "../../form/Form/Form.js";
 import { useFieldProps } from "../../form/Form/use-field/use-field-props.js";
 import { wrapWithField } from "../../form/wrapper.js";
+import { DraggableListBox } from "./DraggableListBox.js";
 import { BASE_STYLES, COLOR_STYLES, OUTER_STYLES, mergeStyles, tasty } from "@tenphi/tasty";
 import { forwardRef, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { useKeyboard, useListBox, useListBoxSection, useOption } from "react-aria";
+import { useDraggableItem, useDropIndicator, useKeyboard, useListBox, useListBoxSection, useOption } from "react-aria";
 import { Section, useListState } from "react-stately";
 import { IconMinus } from "@tabler/icons-react";
 import { useHover as useHover$1 } from "@react-aria/interactions";
@@ -82,11 +84,65 @@ const ListBoxScrollElement = tasty({
 const ListBoxItem = tasty(_Item, {
 	as: "li",
 	disableActionsFocus: true,
-	styles: { margin: {
-		"": "0 0 1bw 0",
-		":last-of-type": "0",
-		all: ".5x"
-	} }
+	styles: {
+		margin: {
+			"": "0 0 1bw 0",
+			":last-of-type": "0",
+			all: ".5x"
+		},
+		display: "grid",
+		position: "relative",
+		paddingLeft: {
+			"": false,
+			draggable: "(1x + 14px)"
+		},
+		opacity: {
+			"": false,
+			dragging: ".5"
+		}
+	}
+});
+const DragHandleElement = tasty({
+	as: "div",
+	styles: {
+		position: "absolute",
+		left: "(.5x - 1bw)",
+		top: 0,
+		bottom: 0,
+		width: "(1x + 14px)",
+		display: "grid",
+		placeItems: "center",
+		color: "#dark-04",
+		opacity: {
+			"": ".4",
+			":hover": "1"
+		},
+		transition: "opacity .15s",
+		cursor: "grab"
+	}
+});
+const ListBoxDropIndicatorElement = tasty({
+	as: "li",
+	styles: {
+		zIndex: 10,
+		position: "relative",
+		pointerEvents: "none",
+		height: 0,
+		opacity: {
+			"": 0,
+			"drop-target": 1
+		},
+		Indicator: {
+			$: ">",
+			position: "absolute",
+			left: ".5x",
+			right: ".5x",
+			top: "-1px",
+			height: "2px",
+			fill: "#primary",
+			radius: "round"
+		}
+	}
 });
 const SectionWrapperElement = tasty({
 	as: "li",
@@ -240,7 +296,7 @@ const ListBox = forwardRef(function ListBox(props, ref) {
 		};
 		return fieldProps;
 	} });
-	let { qa, label, extra, id, labelStyles, isRequired, necessityIndicator, validationState, isDisabled, listStyles, optionStyles, sectionStyles, headingStyles, listRef, message, description, styles, mods: externalMods, size = "medium", labelSuffix, selectedKey, defaultSelectedKey, selectedKeys, defaultSelectedKeys, shouldUseVirtualFocus, onSelectionChange, disableSelectionToggle = false, stateRef, focusOnHover, header, footer, headerStyles, footerStyles, onEscape, isCheckable, onOptionClick, showSelectAll, selectAllLabel, allValueProps, filter, emptyLabel = "No items", shape = "card", form, ...otherProps } = props;
+	let { qa, label, extra, id, labelStyles, isRequired, necessityIndicator, validationState, isDisabled, listStyles, optionStyles, sectionStyles, headingStyles, listRef, message, description, styles, mods: externalMods, size = "medium", labelSuffix, selectedKey, defaultSelectedKey, selectedKeys, defaultSelectedKeys, shouldUseVirtualFocus, onSelectionChange, disableSelectionToggle = false, stateRef, focusOnHover, header, footer, headerStyles, footerStyles, onEscape, isCheckable, onOptionClick, showSelectAll, selectAllLabel, allValueProps, filter, emptyLabel = "No items", shape = "card", isReorderable = false, onReorder, form, ...otherProps } = props;
 	const [, forceUpdate] = useState({});
 	const lastSelectedKeyRef = useRef(null);
 	const externalSelectionHandler = onSelectionChange || props.onChange;
@@ -352,20 +408,20 @@ const ListBox = forwardRef(function ListBox(props, ref) {
 	styles = extractStyles(otherProps, PROP_STYLES, styles);
 	ref = useCombinedRefs(ref);
 	listRef = useCombinedRefs(listRef);
+	const itemsArray = useMemo(() => [...listState.collection], [listState.collection]);
+	const hasSections = useMemo(() => itemsArray.some((i) => i.type === "section"), [itemsArray]);
+	const shouldVirtualize = !hasSections && !isReorderable;
 	const { listBoxProps } = useListBox({
 		...props,
 		id,
 		"aria-label": props["aria-label"] || label?.toString(),
 		isDisabled,
-		isVirtualized: true,
+		isVirtualized: shouldVirtualize,
 		shouldUseVirtualFocus: shouldUseVirtualFocus ?? false,
 		escapeKeyBehavior: onEscape ? "none" : "clearSelection"
 	}, listState, listRef);
 	const { isFocused, focusProps } = useFocus$1({ isDisabled });
 	const isInvalid = validationState === "invalid";
-	const itemsArray = useMemo(() => [...listState.collection], [listState.collection]);
-	const hasSections = useMemo(() => itemsArray.some((i) => i.type === "section"), [itemsArray]);
-	const shouldVirtualize = !hasSections;
 	const itemsArrayRef = useRef(itemsArray);
 	itemsArrayRef.current = itemsArray;
 	const scrollRef = useRef(null);
@@ -411,6 +467,10 @@ const ListBox = forwardRef(function ListBox(props, ref) {
 		});
 	}, [listState.selectionManager.focusedKey, itemsArray]);
 	const mergedListBoxProps = mergeProps$1(listBoxProps, keyboardProps);
+	const orderedKeys = useMemo(() => {
+		if (!isReorderable) return [];
+		return itemsArray.filter((i) => i.type === "item").map((i) => String(i.key));
+	}, [isReorderable, itemsArray]);
 	const mods = useMemo(() => ({
 		invalid: isInvalid,
 		valid: validationState === "valid",
@@ -465,6 +525,35 @@ const ListBox = forwardRef(function ListBox(props, ref) {
 					size,
 					padding: "(.5x - 1bw)",
 					children: emptyLabel
+				}) : isReorderable ? /* @__PURE__ */ jsx(DraggableListBox, {
+					state: listState,
+					listRef,
+					orderedKeys,
+					onReorder,
+					children: (dragState, dropState, collectionProps) => /* @__PURE__ */ jsx(ListElement, {
+						qa: qa || "ListBox",
+						...mergeProps$1(mergedListBoxProps, collectionProps),
+						ref: listRef,
+						styles: listStyles,
+						"aria-disabled": isDisabled || void 0,
+						mods: { sections: false },
+						"data-shape": shape,
+						"data-input-type": "listbox",
+						children: itemsArray.filter((item) => item.type === "item").map((item) => /* @__PURE__ */ jsx(DraggableOption, {
+							size,
+							item,
+							state: listState,
+							styles: optionStyles,
+							isParentDisabled: isDisabled,
+							validationState,
+							focusOnHover,
+							isCheckable,
+							lastFocusSourceRef,
+							dragState,
+							dropState,
+							onClick: onOptionClick
+						}, item.key))
+					})
 				}) : /* @__PURE__ */ jsx(ListElement, {
 					qa: qa || "ListBox",
 					...mergedListBoxProps,
@@ -661,6 +750,152 @@ function Option({ size = "medium", item, state, styles, isParentDisabled, valida
 		children: item.rendered
 	});
 }
+function DraggableOption({ size = "medium", item, state, styles, isParentDisabled, validationState, focusOnHover = false, isCheckable, onClick: onOptionClick, lastFocusSourceRef, dragState, dropState }) {
+	const localRef = useRef(null);
+	const isDisabled = isParentDisabled || state.disabledKeys.has(item.key);
+	const isSelected = state.selectionManager.isSelected(item.key);
+	const isFocused = state.selectionManager.focusedKey === item.key;
+	const { dragProps, isDragging } = useDraggableItem({ key: item.key }, dragState);
+	const { hoverProps, isHovered } = useHover$1({ isDisabled });
+	const { optionProps, isPressed, labelProps, descriptionProps } = useOption({
+		key: item.key,
+		isDisabled,
+		isSelected,
+		shouldSelectOnPressUp: true,
+		shouldFocusOnHover: focusOnHover
+	}, state, localRef);
+	const filteredItemProps = filterCollectionItemProps(item.props);
+	const effectiveIcon = useMemo(() => {
+		if (!isCheckable || state.selectionManager.selectionMode !== "multiple" || filteredItemProps.icon) return filteredItemProps.icon ?? (state.selectionManager.selectionMode !== "multiple" ? null : void 0);
+		return /* @__PURE__ */ jsx(ListBoxCheckboxWrapper, {
+			"data-element": "CheckboxWrapper",
+			mods: {
+				selected: isSelected,
+				disabled: isDisabled,
+				focused: isFocused,
+				hovered: isHovered,
+				invalid: validationState === "invalid"
+			},
+			children: /* @__PURE__ */ jsx(ListBoxCheckbox, {
+				"data-element": "Checkbox",
+				mods: {
+					selected: isSelected,
+					disabled: isDisabled,
+					focused: isFocused,
+					hovered: isHovered,
+					invalid: validationState === "invalid"
+				},
+				children: /* @__PURE__ */ jsx(CheckIcon, {
+					size: 12,
+					stroke: 3
+				})
+			})
+		});
+	}, [
+		isCheckable,
+		state.selectionManager.selectionMode,
+		isSelected,
+		isDisabled,
+		isFocused,
+		isHovered,
+		validationState,
+		filteredItemProps.icon
+	]);
+	const handleOptionClick = (e) => {
+		if (lastFocusSourceRef) lastFocusSourceRef.current = "mouse";
+		if (onOptionClick && isCheckable && state.selectionManager.selectionMode === "multiple") {
+			const clickTarget = e.target;
+			const checkboxElement = localRef.current?.querySelector("[data-element=\"CheckboxWrapper\"]");
+			if (checkboxElement && (checkboxElement === clickTarget || checkboxElement.contains(clickTarget))) {
+				optionProps.onClick?.(e);
+				state.selectionManager.setFocusedKey(item.key);
+			} else {
+				optionProps.onClick?.(e);
+				state.selectionManager.setFocusedKey(item.key);
+				onOptionClick(item.key);
+			}
+		} else {
+			optionProps.onClick?.(e);
+			state.selectionManager.setFocusedKey(item.key);
+			if (onOptionClick) onOptionClick(item.key);
+		}
+	};
+	const { onKeyDown, onKeyUp, tabIndex, "aria-selected": ariaSelected, "aria-disabled": ariaDisabled, role, ...filteredOptionProps } = optionProps;
+	const theme = {
+		valid: "success",
+		invalid: "danger"
+	}[validationState] || "default";
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsx(ListBoxDropIndicator, {
+			target: {
+				type: "item",
+				key: item.key,
+				dropPosition: "before"
+			},
+			dropState
+		}),
+		/* @__PURE__ */ jsxs(ListBoxItem, {
+			ref: localRef,
+			id: `ListBoxItem-${String(item.key)}`,
+			"data-key": String(item.key),
+			...mergeProps$1(filteredOptionProps, hoverProps, filteredItemProps, dragProps, {
+				onClick: handleOptionClick,
+				onKeyDown,
+				onKeyUp,
+				tabIndex,
+				"aria-selected": ariaSelected,
+				"aria-disabled": ariaDisabled,
+				role
+			}),
+			theme,
+			"data-size": size,
+			size,
+			isSelected,
+			isDisabled,
+			icon: effectiveIcon,
+			labelProps,
+			descriptionProps,
+			styles: mergeStyles(styles, filteredItemProps.styles),
+			defaultTooltipPlacement: "right",
+			mods: {
+				listboxitem: true,
+				focused: isFocused,
+				pressed: isPressed,
+				dragging: isDragging,
+				draggable: true,
+				valid: isSelected && validationState === "valid",
+				invalid: isSelected && validationState === "invalid",
+				checkable: isCheckable,
+				hovered: isHovered,
+				all: false
+			},
+			children: [/* @__PURE__ */ jsx(DragHandleElement, {
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ jsx(GripVerticalIcon, { size: 14 })
+			}), item.rendered]
+		}),
+		/* @__PURE__ */ jsx(ListBoxDropIndicator, {
+			target: {
+				type: "item",
+				key: item.key,
+				dropPosition: "after"
+			},
+			dropState
+		})
+	] });
+}
+function ListBoxDropIndicator({ target, dropState }) {
+	const ref = useRef(null);
+	const { dropIndicatorProps, isHidden, isDropTarget } = useDropIndicator({ target }, dropState, ref);
+	if (isHidden) return null;
+	return /* @__PURE__ */ jsx(ListBoxDropIndicatorElement, {
+		ref,
+		role: "option",
+		...dropIndicatorProps,
+		mods: { "drop-target": isDropTarget },
+		children: /* @__PURE__ */ jsx("div", { "data-element": "Indicator" })
+	});
+}
 function ListBoxSection(props) {
 	const { item, state, optionStyles, headingStyles, sectionStyles, isParentDisabled, validationState, focusOnHover, isCheckable, onClick: onOptionClick, lastFocusSourceRef } = props;
 	const heading = item.rendered;