@comitor/ui 1.10.0 → 2.0.0

package/dist/data-grid/sortable.js

@@ -0,0 +1,361 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import {
+  closestCenter,
+  closestCorners,
+  DndContext,
+  DragOverlay,
+  defaultDropAnimationSideEffects,
+  KeyboardSensor,
+  MouseSensor,
+  TouchSensor,
+  useSensor,
+  useSensors
+} from "@dnd-kit/core";
+import { restrictToHorizontalAxis, restrictToParentElement, restrictToVerticalAxis } from "@dnd-kit/modifiers";
+import {
+  arrayMove,
+  horizontalListSortingStrategy,
+  SortableContext,
+  sortableKeyboardCoordinates,
+  useSortable,
+  verticalListSortingStrategy
+} from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { Slot } from "@radix-ui/react-slot";
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { cn } from "../lib/cn.js";
+import { useComposedRefs } from "./compose-refs.js";
+const orientationConfig = {
+  vertical: {
+    modifiers: [restrictToVerticalAxis, restrictToParentElement],
+    strategy: verticalListSortingStrategy,
+    collisionDetection: closestCenter
+  },
+  horizontal: {
+    modifiers: [restrictToHorizontalAxis, restrictToParentElement],
+    strategy: horizontalListSortingStrategy,
+    collisionDetection: closestCenter
+  },
+  mixed: {
+    modifiers: [restrictToParentElement],
+    strategy: void 0,
+    collisionDetection: closestCorners
+  }
+};
+const ROOT_NAME = "Sortable";
+const CONTENT_NAME = "SortableContent";
+const ITEM_NAME = "SortableItem";
+const ITEM_HANDLE_NAME = "SortableItemHandle";
+const OVERLAY_NAME = "SortableOverlay";
+const SortableRootContext = React.createContext(null);
+function useSortableContext(consumerName) {
+  const context = React.useContext(SortableRootContext);
+  if (!context) {
+    throw new Error(`\`${consumerName}\` must be used within \`${ROOT_NAME}\``);
+  }
+  return context;
+}
+function Sortable(props) {
+  const {
+    value,
+    onValueChange,
+    collisionDetection,
+    modifiers,
+    strategy,
+    onMove,
+    orientation = "vertical",
+    flatCursor = false,
+    getItemValue: getItemValueProp,
+    accessibility,
+    ...sortableProps
+  } = props;
+  const id = React.useId();
+  const [activeId, setActiveId] = React.useState(null);
+  const sensors = useSensors(
+    useSensor(MouseSensor),
+    useSensor(TouchSensor),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates
+    })
+  );
+  const config = React.useMemo(() => orientationConfig[orientation], [orientation]);
+  const getItemValue = React.useCallback(
+    (item) => {
+      if (typeof item === "object" && !getItemValueProp) {
+        throw new Error("`getItemValue` is required when using array of objects");
+      }
+      return getItemValueProp ? getItemValueProp(item) : item;
+    },
+    [getItemValueProp]
+  );
+  const items = React.useMemo(() => {
+    return value.map((item) => getItemValue(item));
+  }, [value, getItemValue]);
+  const onDragStart = React.useCallback(
+    (event) => {
+      sortableProps.onDragStart?.(event);
+      if (event.activatorEvent.defaultPrevented) return;
+      setActiveId(event.active.id);
+    },
+    [sortableProps.onDragStart]
+  );
+  const onDragEnd = React.useCallback(
+    (event) => {
+      sortableProps.onDragEnd?.(event);
+      if (event.activatorEvent.defaultPrevented) return;
+      const { active, over } = event;
+      if (over && active.id !== over?.id) {
+        const activeIndex = value.findIndex((item) => getItemValue(item) === active.id);
+        const overIndex = value.findIndex((item) => getItemValue(item) === over.id);
+        if (onMove) {
+          onMove({ ...event, activeIndex, overIndex });
+        } else {
+          onValueChange?.(arrayMove(value, activeIndex, overIndex));
+        }
+      }
+      setActiveId(null);
+    },
+    [value, onValueChange, onMove, getItemValue, sortableProps.onDragEnd]
+  );
+  const onDragCancel = React.useCallback(
+    (event) => {
+      sortableProps.onDragCancel?.(event);
+      if (event.activatorEvent.defaultPrevented) return;
+      setActiveId(null);
+    },
+    [sortableProps.onDragCancel]
+  );
+  const announcements = React.useMemo(
+    () => ({
+      onDragStart({ active }) {
+        return `\u0110\xE3 nh\u1EA5c m\u1EE5c "${active.id.toString()}". V\u1ECB tr\xED hi\u1EC7n t\u1EA1i ${active.data.current?.sortable.index + 1} / ${value.length}. D\xF9ng ph\xEDm m\u0169i t\xEAn \u0111\u1EC3 di chuy\u1EC3n, ph\xEDm c\xE1ch \u0111\u1EC3 th\u1EA3.`;
+      },
+      onDragOver({ active, over }) {
+        if (over) {
+          const overIndex = over.data.current?.sortable.index ?? 0;
+          const activeIndex = active.data.current?.sortable.index ?? 0;
+          const moveDirection = overIndex > activeIndex ? "xu\u1ED1ng" : "l\xEAn";
+          return `M\u1EE5c "${active.id.toString()}" \u0111\xE3 chuy\u1EC3n ${moveDirection} v\u1ECB tr\xED ${overIndex + 1} / ${value.length}.`;
+        }
+        return "M\u1EE5c \u0111ang \u1EDF ngo\xE0i v\xF9ng th\u1EA3. Nh\u1EA5n Esc \u0111\u1EC3 hu\u1EF7.";
+      },
+      onDragEnd({ active, over }) {
+        const activeValue = active.id.toString();
+        if (over) {
+          const overIndex = over.data.current?.sortable.index ?? 0;
+          return `\u0110\xE3 th\u1EA3 m\u1EE5c "${activeValue}" \u1EDF v\u1ECB tr\xED ${overIndex + 1} / ${value.length}.`;
+        }
+        return `\u0110\xE3 th\u1EA3 m\u1EE5c "${activeValue}". Kh\xF4ng c\xF3 thay \u0111\u1ED5i n\xE0o.`;
+      },
+      onDragCancel({ active }) {
+        const activeIndex = active.data.current?.sortable.index ?? 0;
+        return `\u0110\xE3 hu\u1EF7 s\u1EAFp x\u1EBFp. M\u1EE5c "${active.id.toString()}" tr\u1EDF v\u1EC1 v\u1ECB tr\xED ${activeIndex + 1} / ${value.length}.`;
+      },
+      onDragMove({ active, over }) {
+        if (over) {
+          const overIndex = over.data.current?.sortable.index ?? 0;
+          const activeIndex = active.data.current?.sortable.index ?? 0;
+          const moveDirection = overIndex > activeIndex ? "xu\u1ED1ng" : "l\xEAn";
+          return `M\u1EE5c "${active.id.toString()}" \u0111ang di chuy\u1EC3n ${moveDirection} v\u1ECB tr\xED ${overIndex + 1} / ${value.length}.`;
+        }
+        return "M\u1EE5c \u0111ang \u1EDF ngo\xE0i v\xF9ng th\u1EA3. Nh\u1EA5n Esc \u0111\u1EC3 hu\u1EF7.";
+      }
+    }),
+    [value]
+  );
+  const screenReaderInstructions = React.useMemo(
+    () => ({
+      draggable: `
+        Nh\u1EA5n ph\xEDm c\xE1ch ho\u1EB7c Enter \u0111\u1EC3 nh\u1EA5c m\u1EE5c l\xEAn.
+        Khi \u0111ang gi\u1EEF, d\xF9ng ph\xEDm m\u0169i t\xEAn ${orientation === "vertical" ? "l\xEAn/xu\u1ED1ng" : orientation === "horizontal" ? "tr\xE1i/ph\u1EA3i" : ""} \u0111\u1EC3 di chuy\u1EC3n.
+        Nh\u1EA5n ph\xEDm c\xE1ch ho\u1EB7c Enter l\u1EA7n n\u1EEFa \u0111\u1EC3 th\u1EA3 v\xE0o v\u1ECB tr\xED m\u1EDBi, ho\u1EB7c Esc \u0111\u1EC3 hu\u1EF7.
+      `
+    }),
+    [orientation]
+  );
+  const contextValue = React.useMemo(
+    () => ({
+      id,
+      items,
+      modifiers: modifiers ?? config.modifiers,
+      strategy: strategy ?? config.strategy,
+      activeId,
+      setActiveId,
+      getItemValue,
+      flatCursor
+    }),
+    [id, items, modifiers, strategy, config.modifiers, config.strategy, activeId, getItemValue, flatCursor]
+  );
+  return /* @__PURE__ */ jsx(SortableRootContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    DndContext,
+    {
+      collisionDetection: collisionDetection ?? config.collisionDetection,
+      modifiers: modifiers ?? config.modifiers,
+      sensors,
+      ...sortableProps,
+      id,
+      onDragStart,
+      onDragEnd,
+      onDragCancel,
+      accessibility: {
+        announcements,
+        screenReaderInstructions,
+        ...accessibility
+      }
+    }
+  ) });
+}
+const SortableContentContext = React.createContext(false);
+function SortableContent(props) {
+  const { strategy: strategyProp, asChild, withoutSlot, children, ref, ...contentProps } = props;
+  const context = useSortableContext(CONTENT_NAME);
+  const ContentPrimitive = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsx(SortableContentContext.Provider, { value: true, children: /* @__PURE__ */ jsx(SortableContext, { items: context.items, strategy: strategyProp ?? context.strategy, children: withoutSlot ? children : /* @__PURE__ */ jsx(ContentPrimitive, { "data-slot": "sortable-content", ...contentProps, ref, children }) }) });
+}
+const SortableItemContext = React.createContext(null);
+function useSortableItemContext(consumerName) {
+  const context = React.useContext(SortableItemContext);
+  if (!context) {
+    throw new Error(`\`${consumerName}\` must be used within \`${ITEM_NAME}\``);
+  }
+  return context;
+}
+function SortableItem(props) {
+  const { value, style, asHandle, asChild, disabled, className, ref, ...itemProps } = props;
+  const inSortableContent = React.useContext(SortableContentContext);
+  const inSortableOverlay = React.useContext(SortableOverlayContext);
+  if (!inSortableContent && !inSortableOverlay) {
+    throw new Error(`\`${ITEM_NAME}\` must be used within \`${CONTENT_NAME}\` or \`${OVERLAY_NAME}\``);
+  }
+  if (value === "") {
+    throw new Error(`\`${ITEM_NAME}\` value cannot be an empty string`);
+  }
+  const context = useSortableContext(ITEM_NAME);
+  const id = React.useId();
+  const { attributes, listeners, setNodeRef, setActivatorNodeRef, transform, transition, isDragging } = useSortable({
+    id: value,
+    disabled
+  });
+  const composedRef = useComposedRefs(ref, (node) => {
+    if (disabled) return;
+    setNodeRef(node);
+    if (asHandle) setActivatorNodeRef(node);
+  });
+  const composedStyle = React.useMemo(() => {
+    return {
+      transform: CSS.Translate.toString(transform),
+      transition,
+      ...style
+    };
+  }, [transform, transition, style]);
+  const itemContext = React.useMemo(
+    () => ({
+      id,
+      attributes,
+      listeners,
+      setActivatorNodeRef,
+      isDragging,
+      disabled
+    }),
+    [id, attributes, listeners, setActivatorNodeRef, isDragging, disabled]
+  );
+  const ItemPrimitive = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsx(SortableItemContext.Provider, { value: itemContext, children: /* @__PURE__ */ jsx(
+    ItemPrimitive,
+    {
+      id,
+      "data-disabled": disabled,
+      "data-dragging": isDragging ? "" : void 0,
+      "data-slot": "sortable-item",
+      ...itemProps,
+      ...asHandle && !disabled ? attributes : {},
+      ...asHandle && !disabled ? listeners : {},
+      ref: composedRef,
+      style: composedStyle,
+      className: cn(
+        "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1",
+        {
+          "touch-none select-none": asHandle,
+          "cursor-default": context.flatCursor,
+          "data-[dragging]:cursor-grabbing": !context.flatCursor,
+          "cursor-grab": !isDragging && asHandle && !context.flatCursor,
+          "opacity-50": isDragging,
+          "pointer-events-none opacity-50": disabled
+        },
+        className
+      )
+    }
+  ) });
+}
+function SortableItemHandle(props) {
+  const { asChild, disabled, className, ref, ...itemHandleProps } = props;
+  const context = useSortableContext(ITEM_HANDLE_NAME);
+  const itemContext = useSortableItemContext(ITEM_HANDLE_NAME);
+  const isDisabled = disabled ?? itemContext.disabled;
+  const composedRef = useComposedRefs(ref, (node) => {
+    if (!isDisabled) return;
+    itemContext.setActivatorNodeRef(node);
+  });
+  const HandlePrimitive = asChild ? Slot : "button";
+  return /* @__PURE__ */ jsx(
+    HandlePrimitive,
+    {
+      type: "button",
+      "aria-controls": itemContext.id,
+      "data-disabled": isDisabled,
+      "data-dragging": itemContext.isDragging ? "" : void 0,
+      "data-slot": "sortable-item-handle",
+      ...itemHandleProps,
+      ...isDisabled ? {} : itemContext.attributes,
+      ...isDisabled ? {} : itemContext.listeners,
+      ref: composedRef,
+      className: cn(
+        "select-none disabled:pointer-events-none disabled:opacity-50",
+        context.flatCursor ? "cursor-default" : "cursor-grab data-[dragging]:cursor-grabbing",
+        className
+      ),
+      disabled: isDisabled
+    }
+  );
+}
+const SortableOverlayContext = React.createContext(false);
+const dropAnimation = {
+  sideEffects: defaultDropAnimationSideEffects({
+    styles: {
+      active: {
+        opacity: "0.4"
+      }
+    }
+  })
+};
+function SortableOverlay(props) {
+  const { container: containerProp, children, ...overlayProps } = props;
+  const context = useSortableContext(OVERLAY_NAME);
+  const [mounted, setMounted] = React.useState(false);
+  React.useLayoutEffect(() => setMounted(true), []);
+  const container = containerProp ?? (mounted ? globalThis.document?.body : null);
+  if (!container) return null;
+  return ReactDOM.createPortal(
+    /* @__PURE__ */ jsx(
+      DragOverlay,
+      {
+        dropAnimation,
+        modifiers: context.modifiers,
+        className: cn(!context.flatCursor && "cursor-grabbing"),
+        ...overlayProps,
+        children: /* @__PURE__ */ jsx(SortableOverlayContext.Provider, { value: true, children: context.activeId ? typeof children === "function" ? children({ value: context.activeId }) : children : null })
+      }
+    ),
+    container
+  );
+}
+export {
+  Sortable,
+  SortableContent,
+  SortableItem,
+  SortableItemHandle,
+  SortableOverlay
+};
+//# sourceMappingURL=sortable.js.map

package/dist/data-grid/sortable.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/data-grid/sortable.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type Announcements,\n  closestCenter,\n  closestCorners,\n  DndContext,\n  type DndContextProps,\n  type DragEndEvent,\n  type DraggableAttributes,\n  type DraggableSyntheticListeners,\n  DragOverlay,\n  type DragStartEvent,\n  type DropAnimation,\n  defaultDropAnimationSideEffects,\n  KeyboardSensor,\n  MouseSensor,\n  type ScreenReaderInstructions,\n  TouchSensor,\n  type UniqueIdentifier,\n  useSensor,\n  useSensors\n} from \"@dnd-kit/core\";\nimport { restrictToHorizontalAxis, restrictToParentElement, restrictToVerticalAxis } from \"@dnd-kit/modifiers\";\nimport {\n  arrayMove,\n  horizontalListSortingStrategy,\n  SortableContext,\n  type SortableContextProps,\n  sortableKeyboardCoordinates,\n  useSortable,\n  verticalListSortingStrategy\n} from \"@dnd-kit/sortable\";\nimport { CSS } from \"@dnd-kit/utilities\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport * as React from \"react\";\nimport * as ReactDOM from \"react-dom\";\nimport { cn } from \"../lib/cn.js\";\nimport { useComposedRefs } from \"./compose-refs.js\";\n\nconst orientationConfig = {\n  vertical: {\n    modifiers: [restrictToVerticalAxis, restrictToParentElement],\n    strategy: verticalListSortingStrategy,\n    collisionDetection: closestCenter\n  },\n  horizontal: {\n    modifiers: [restrictToHorizontalAxis, restrictToParentElement],\n    strategy: horizontalListSortingStrategy,\n    collisionDetection: closestCenter\n  },\n  mixed: {\n    modifiers: [restrictToParentElement],\n    strategy: undefined,\n    collisionDetection: closestCorners\n  }\n};\n\nconst ROOT_NAME = \"Sortable\";\nconst CONTENT_NAME = \"SortableContent\";\nconst ITEM_NAME = \"SortableItem\";\nconst ITEM_HANDLE_NAME = \"SortableItemHandle\";\nconst OVERLAY_NAME = \"SortableOverlay\";\n\ninterface SortableRootContextValue<T> {\n  id: string;\n  items: UniqueIdentifier[];\n  modifiers: DndContextProps[\"modifiers\"];\n  strategy: SortableContextProps[\"strategy\"];\n  activeId: UniqueIdentifier | null;\n  setActiveId: (id: UniqueIdentifier | null) => void;\n  getItemValue: (item: T) => UniqueIdentifier;\n  flatCursor: boolean;\n}\n\nconst SortableRootContext = React.createContext<SortableRootContextValue<unknown> | null>(null);\n\nfunction useSortableContext(consumerName: string) {\n  const context = React.useContext(SortableRootContext);\n  if (!context) {\n    throw new Error(`\\`${consumerName}\\` must be used within \\`${ROOT_NAME}\\``);\n  }\n  return context;\n}\n\ninterface GetItemValue<T> {\n  /**\n   * Callback that returns a unique identifier for each sortable item. Required for array of objects.\n   * @example getItemValue={(item) => item.id}\n   */\n  getItemValue: (item: T) => UniqueIdentifier;\n}\n\ntype SortableProps<T> = DndContextProps &\n  (T extends object ? GetItemValue<T> : Partial<GetItemValue<T>>) & {\n    value: T[];\n    onValueChange?: (items: T[]) => void;\n    onMove?: (event: DragEndEvent & { activeIndex: number; overIndex: number }) => void;\n    strategy?: SortableContextProps[\"strategy\"];\n    orientation?: \"vertical\" | \"horizontal\" | \"mixed\";\n    flatCursor?: boolean;\n  };\n\nfunction Sortable<T>(props: SortableProps<T>) {\n  const {\n    value,\n    onValueChange,\n    collisionDetection,\n    modifiers,\n    strategy,\n    onMove,\n    orientation = \"vertical\",\n    flatCursor = false,\n    getItemValue: getItemValueProp,\n    accessibility,\n    ...sortableProps\n  } = props;\n\n  const id = React.useId();\n  const [activeId, setActiveId] = React.useState<UniqueIdentifier | null>(null);\n\n  const sensors = useSensors(\n    useSensor(MouseSensor),\n    useSensor(TouchSensor),\n    useSensor(KeyboardSensor, {\n      coordinateGetter: sortableKeyboardCoordinates\n    })\n  );\n  const config = React.useMemo(() => orientationConfig[orientation], [orientation]);\n\n  const getItemValue = React.useCallback(\n    (item: T): UniqueIdentifier => {\n      if (typeof item === \"object\" && !getItemValueProp) {\n        throw new Error(\"`getItemValue` is required when using array of objects\");\n      }\n      return getItemValueProp ? getItemValueProp(item) : (item as UniqueIdentifier);\n    },\n    [getItemValueProp]\n  );\n\n  const items = React.useMemo(() => {\n    return value.map((item) => getItemValue(item));\n  }, [value, getItemValue]);\n\n  const onDragStart = React.useCallback(\n    (event: DragStartEvent) => {\n      sortableProps.onDragStart?.(event);\n\n      if (event.activatorEvent.defaultPrevented) return;\n\n      setActiveId(event.active.id);\n    },\n    [sortableProps.onDragStart]\n  );\n\n  const onDragEnd = React.useCallback(\n    (event: DragEndEvent) => {\n      sortableProps.onDragEnd?.(event);\n\n      if (event.activatorEvent.defaultPrevented) return;\n\n      const { active, over } = event;\n      if (over && active.id !== over?.id) {\n        const activeIndex = value.findIndex((item) => getItemValue(item) === active.id);\n        const overIndex = value.findIndex((item) => getItemValue(item) === over.id);\n\n        if (onMove) {\n          onMove({ ...event, activeIndex, overIndex });\n        } else {\n          onValueChange?.(arrayMove(value, activeIndex, overIndex));\n        }\n      }\n      setActiveId(null);\n    },\n    [value, onValueChange, onMove, getItemValue, sortableProps.onDragEnd]\n  );\n\n  const onDragCancel = React.useCallback(\n    (event: DragEndEvent) => {\n      sortableProps.onDragCancel?.(event);\n\n      if (event.activatorEvent.defaultPrevented) return;\n\n      setActiveId(null);\n    },\n    [sortableProps.onDragCancel]\n  );\n\n  const announcements: Announcements = React.useMemo(\n    () => ({\n      onDragStart({ active }) {\n        return `Đã nhấc mục \"${active.id.toString()}\". Vị trí hiện tại ${active.data.current?.sortable.index + 1} / ${value.length}. Dùng phím mũi tên để di chuyển, phím cách để thả.`;\n      },\n      onDragOver({ active, over }) {\n        if (over) {\n          const overIndex = over.data.current?.sortable.index ?? 0;\n          const activeIndex = active.data.current?.sortable.index ?? 0;\n          const moveDirection = overIndex > activeIndex ? \"xuống\" : \"lên\";\n          return `Mục \"${active.id.toString()}\" đã chuyển ${moveDirection} vị trí ${overIndex + 1} / ${value.length}.`;\n        }\n        return \"Mục đang ở ngoài vùng thả. Nhấn Esc để huỷ.\";\n      },\n      onDragEnd({ active, over }) {\n        const activeValue = active.id.toString();\n        if (over) {\n          const overIndex = over.data.current?.sortable.index ?? 0;\n          return `Đã thả mục \"${activeValue}\" ở vị trí ${overIndex + 1} / ${value.length}.`;\n        }\n        return `Đã thả mục \"${activeValue}\". Không có thay đổi nào.`;\n      },\n      onDragCancel({ active }) {\n        const activeIndex = active.data.current?.sortable.index ?? 0;\n        return `Đã huỷ sắp xếp. Mục \"${active.id.toString()}\" trở về vị trí ${activeIndex + 1} / ${value.length}.`;\n      },\n      onDragMove({ active, over }) {\n        if (over) {\n          const overIndex = over.data.current?.sortable.index ?? 0;\n          const activeIndex = active.data.current?.sortable.index ?? 0;\n          const moveDirection = overIndex > activeIndex ? \"xuống\" : \"lên\";\n          return `Mục \"${active.id.toString()}\" đang di chuyển ${moveDirection} vị trí ${overIndex + 1} / ${value.length}.`;\n        }\n        return \"Mục đang ở ngoài vùng thả. Nhấn Esc để huỷ.\";\n      }\n    }),\n    [value]\n  );\n\n  const screenReaderInstructions: ScreenReaderInstructions = React.useMemo(\n    () => ({\n      draggable: `\n        Nhấn phím cách hoặc Enter để nhấc mục lên.\n        Khi đang giữ, dùng phím mũi tên ${orientation === \"vertical\" ? \"lên/xuống\" : orientation === \"horizontal\" ? \"trái/phải\" : \"\"} để di chuyển.\n        Nhấn phím cách hoặc Enter lần nữa để thả vào vị trí mới, hoặc Esc để huỷ.\n      `\n    }),\n    [orientation]\n  );\n\n  const contextValue = React.useMemo(\n    () => ({\n      id,\n      items,\n      modifiers: modifiers ?? config.modifiers,\n      strategy: strategy ?? config.strategy,\n      activeId,\n      setActiveId,\n      getItemValue,\n      flatCursor\n    }),\n    [id, items, modifiers, strategy, config.modifiers, config.strategy, activeId, getItemValue, flatCursor]\n  );\n\n  return (\n    <SortableRootContext.Provider value={contextValue as SortableRootContextValue<unknown>}>\n      <DndContext\n        collisionDetection={collisionDetection ?? config.collisionDetection}\n        modifiers={modifiers ?? config.modifiers}\n        sensors={sensors}\n        {...sortableProps}\n        id={id}\n        onDragStart={onDragStart}\n        onDragEnd={onDragEnd}\n        onDragCancel={onDragCancel}\n        accessibility={{\n          announcements,\n          screenReaderInstructions,\n          ...accessibility\n        }}\n      />\n    </SortableRootContext.Provider>\n  );\n}\n\nconst SortableContentContext = React.createContext<boolean>(false);\n\ninterface SortableContentProps extends React.ComponentProps<\"div\"> {\n  strategy?: SortableContextProps[\"strategy\"];\n  children: React.ReactNode;\n  asChild?: boolean;\n  withoutSlot?: boolean;\n}\n\nfunction SortableContent(props: SortableContentProps) {\n  const { strategy: strategyProp, asChild, withoutSlot, children, ref, ...contentProps } = props;\n\n  const context = useSortableContext(CONTENT_NAME);\n\n  const ContentPrimitive = asChild ? Slot : \"div\";\n\n  return (\n    <SortableContentContext.Provider value={true}>\n      <SortableContext items={context.items} strategy={strategyProp ?? context.strategy}>\n        {withoutSlot ? (\n          children\n        ) : (\n          <ContentPrimitive data-slot=\"sortable-content\" {...contentProps} ref={ref}>\n            {children}\n          </ContentPrimitive>\n        )}\n      </SortableContext>\n    </SortableContentContext.Provider>\n  );\n}\n\ninterface SortableItemContextValue {\n  id: string;\n  attributes: DraggableAttributes;\n  listeners: DraggableSyntheticListeners | undefined;\n  setActivatorNodeRef: (node: HTMLElement | null) => void;\n  isDragging?: boolean;\n  disabled?: boolean;\n}\n\nconst SortableItemContext = React.createContext<SortableItemContextValue | null>(null);\n\nfunction useSortableItemContext(consumerName: string) {\n  const context = React.useContext(SortableItemContext);\n  if (!context) {\n    throw new Error(`\\`${consumerName}\\` must be used within \\`${ITEM_NAME}\\``);\n  }\n  return context;\n}\n\ninterface SortableItemProps extends React.ComponentProps<\"div\"> {\n  value: UniqueIdentifier;\n  asHandle?: boolean;\n  asChild?: boolean;\n  disabled?: boolean;\n}\n\nfunction SortableItem(props: SortableItemProps) {\n  const { value, style, asHandle, asChild, disabled, className, ref, ...itemProps } = props;\n\n  const inSortableContent = React.useContext(SortableContentContext);\n  const inSortableOverlay = React.useContext(SortableOverlayContext);\n\n  if (!inSortableContent && !inSortableOverlay) {\n    throw new Error(`\\`${ITEM_NAME}\\` must be used within \\`${CONTENT_NAME}\\` or \\`${OVERLAY_NAME}\\``);\n  }\n\n  if (value === \"\") {\n    throw new Error(`\\`${ITEM_NAME}\\` value cannot be an empty string`);\n  }\n\n  const context = useSortableContext(ITEM_NAME);\n  const id = React.useId();\n  const { attributes, listeners, setNodeRef, setActivatorNodeRef, transform, transition, isDragging } = useSortable({\n    id: value,\n    disabled\n  });\n\n  const composedRef = useComposedRefs(ref, (node) => {\n    if (disabled) return;\n    setNodeRef(node);\n    if (asHandle) setActivatorNodeRef(node);\n  });\n\n  const composedStyle = React.useMemo<React.CSSProperties>(() => {\n    return {\n      transform: CSS.Translate.toString(transform),\n      transition,\n      ...style\n    };\n  }, [transform, transition, style]);\n\n  const itemContext = React.useMemo<SortableItemContextValue>(\n    () => ({\n      id,\n      attributes,\n      listeners,\n      setActivatorNodeRef,\n      isDragging,\n      disabled\n    }),\n    [id, attributes, listeners, setActivatorNodeRef, isDragging, disabled]\n  );\n\n  const ItemPrimitive = asChild ? Slot : \"div\";\n\n  return (\n    <SortableItemContext.Provider value={itemContext}>\n      <ItemPrimitive\n        id={id}\n        data-disabled={disabled}\n        data-dragging={isDragging ? \"\" : undefined}\n        data-slot=\"sortable-item\"\n        {...itemProps}\n        {...(asHandle && !disabled ? attributes : {})}\n        {...(asHandle && !disabled ? listeners : {})}\n        ref={composedRef}\n        style={composedStyle}\n        className={cn(\n          \"focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1\",\n          {\n            \"touch-none select-none\": asHandle,\n            \"cursor-default\": context.flatCursor,\n            \"data-[dragging]:cursor-grabbing\": !context.flatCursor,\n            \"cursor-grab\": !isDragging && asHandle && !context.flatCursor,\n            \"opacity-50\": isDragging,\n            \"pointer-events-none opacity-50\": disabled\n          },\n          className\n        )}\n      />\n    </SortableItemContext.Provider>\n  );\n}\n\ninterface SortableItemHandleProps extends React.ComponentProps<\"button\"> {\n  asChild?: boolean;\n}\n\nfunction SortableItemHandle(props: SortableItemHandleProps) {\n  const { asChild, disabled, className, ref, ...itemHandleProps } = props;\n\n  const context = useSortableContext(ITEM_HANDLE_NAME);\n  const itemContext = useSortableItemContext(ITEM_HANDLE_NAME);\n\n  const isDisabled = disabled ?? itemContext.disabled;\n\n  const composedRef = useComposedRefs(ref, (node) => {\n    if (!isDisabled) return;\n    itemContext.setActivatorNodeRef(node);\n  });\n\n  const HandlePrimitive = asChild ? Slot : \"button\";\n\n  return (\n    <HandlePrimitive\n      type=\"button\"\n      aria-controls={itemContext.id}\n      data-disabled={isDisabled}\n      data-dragging={itemContext.isDragging ? \"\" : undefined}\n      data-slot=\"sortable-item-handle\"\n      {...itemHandleProps}\n      {...(isDisabled ? {} : itemContext.attributes)}\n      {...(isDisabled ? {} : itemContext.listeners)}\n      ref={composedRef}\n      className={cn(\n        \"select-none disabled:pointer-events-none disabled:opacity-50\",\n        context.flatCursor ? \"cursor-default\" : \"cursor-grab data-[dragging]:cursor-grabbing\",\n        className\n      )}\n      disabled={isDisabled}\n    />\n  );\n}\n\nconst SortableOverlayContext = React.createContext(false);\n\nconst dropAnimation: DropAnimation = {\n  sideEffects: defaultDropAnimationSideEffects({\n    styles: {\n      active: {\n        opacity: \"0.4\"\n      }\n    }\n  })\n};\n\ninterface SortableOverlayProps extends Omit<React.ComponentProps<typeof DragOverlay>, \"children\"> {\n  container?: Element | DocumentFragment | null;\n  children?: ((params: { value: UniqueIdentifier }) => React.ReactNode) | React.ReactNode;\n}\n\nfunction SortableOverlay(props: SortableOverlayProps) {\n  const { container: containerProp, children, ...overlayProps } = props;\n\n  const context = useSortableContext(OVERLAY_NAME);\n\n  const [mounted, setMounted] = React.useState(false);\n\n  React.useLayoutEffect(() => setMounted(true), []);\n\n  const container = containerProp ?? (mounted ? globalThis.document?.body : null);\n\n  if (!container) return null;\n\n  return ReactDOM.createPortal(\n    <DragOverlay\n      dropAnimation={dropAnimation}\n      modifiers={context.modifiers}\n      className={cn(!context.flatCursor && \"cursor-grabbing\")}\n      {...overlayProps}\n    >\n      <SortableOverlayContext.Provider value={true}>\n        {context.activeId ? (typeof children === \"function\" ? children({ value: context.activeId }) : children) : null}\n      </SortableOverlayContext.Provider>\n    </DragOverlay>,\n    container\n  );\n}\n\nexport { Sortable, SortableContent, SortableItem, SortableItemHandle, SortableOverlay, type SortableProps };\n"],"mappings":"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","names":[]}

package/dist/data-grid/toast.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Lớp mỏng quanh `toast()` của package để DataGrid gọi cho gọn.
+ * Thông báo chỉ hiện khi ứng dụng đã đặt `<Toaster />` ở root (xem README).
+ */
+declare function toastSuccess(title: string, description?: string): void;
+declare function toastError(title: string, description?: string): void;
+declare function toastInfo(title: string, description?: string): void;
+declare function toastMessage(title: string, description?: string): void;
+
+export { toastError, toastInfo, toastMessage, toastSuccess };

package/dist/data-grid/toast.js

@@ -0,0 +1,21 @@
+"use client";
+import { toast } from "../components/composite/toast.js";
+function toastSuccess(title, description) {
+  toast(title, { description, variant: "success" });
+}
+function toastError(title, description) {
+  toast(title, { description, variant: "destructive" });
+}
+function toastInfo(title, description) {
+  toast(title, { description, variant: "info" });
+}
+function toastMessage(title, description) {
+  toast(title, { description });
+}
+export {
+  toastError,
+  toastInfo,
+  toastMessage,
+  toastSuccess
+};
+//# sourceMappingURL=toast.js.map

package/dist/data-grid/toast.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/data-grid/toast.ts"],"sourcesContent":["\"use client\";\n\nimport { toast } from \"../components/composite/toast.js\";\n\n/**\n * Lớp mỏng quanh `toast()` của package để DataGrid gọi cho gọn.\n * Thông báo chỉ hiện khi ứng dụng đã đặt `<Toaster />` ở root (xem README).\n */\nexport function toastSuccess(title: string, description?: string): void {\n  toast(title, { description, variant: \"success\" });\n}\n\nexport function toastError(title: string, description?: string): void {\n  toast(title, { description, variant: \"destructive\" });\n}\n\nexport function toastInfo(title: string, description?: string): void {\n  toast(title, { description, variant: \"info\" });\n}\n\nexport function toastMessage(title: string, description?: string): void {\n  toast(title, { description });\n}\n"],"mappings":";AAEA,SAAS,aAAa;AAMf,SAAS,aAAa,OAAe,aAA4B;AACtE,QAAM,OAAO,EAAE,aAAa,SAAS,UAAU,CAAC;AAClD;AAEO,SAAS,WAAW,OAAe,aAA4B;AACpE,QAAM,OAAO,EAAE,aAAa,SAAS,cAAc,CAAC;AACtD;AAEO,SAAS,UAAU,OAAe,aAA4B;AACnE,QAAM,OAAO,EAAE,aAAa,SAAS,OAAO,CAAC;AAC/C;AAEO,SAAS,aAAa,OAAe,aAA4B;AACtE,QAAM,OAAO,EAAE,YAAY,CAAC;AAC9B;","names":[]}

package/dist/data-grid/types.d.ts

@@ -0,0 +1,189 @@
+import { RowData, Cell, TableMeta } from '@tanstack/react-table';
+
+/** Hướng đọc của lưới (mặc định "ltr" — tiếng Việt) */
+type Direction = "ltr" | "rtl";
+/** Chiều cao dòng: short 36px, medium 56px, tall 76px, extra-tall 96px */
+type RowHeightValue = "short" | "medium" | "tall" | "extra-tall";
+interface CellSelectOption {
+    label: string;
+    value: string;
+    icon?: React.ComponentType<React.ComponentProps<"svg">>;
+    /** Số lượng hiển thị bên phải trong danh sách lọc */
+    count?: number;
+}
+/**
+ * Kiểu ô của một cột — khai báo trong `columnDef.meta.cell`.
+ * Quyết định cả cách hiển thị, cách sửa, cách dán và bộ toán tử lọc.
+ */
+type CellOpts = {
+    variant: "short-text";
+} | {
+    variant: "long-text";
+} | {
+    variant: "number";
+    min?: number;
+    max?: number;
+    step?: number;
+} | {
+    variant: "select";
+    options: CellSelectOption[];
+} | {
+    variant: "multi-select";
+    options: CellSelectOption[];
+} | {
+    variant: "checkbox";
+} | {
+    /** Giá trị lưu dạng chuỗi "yyyy-MM-dd", hiển thị dd/MM/yyyy */
+    variant: "date";
+} | {
+    variant: "url";
+} | {
+    variant: "file";
+    /** Giới hạn dung lượng mỗi tệp (byte) — mặc định 10MB */
+    maxFileSize?: number;
+    /** Số tệp tối đa mỗi ô — mặc định 10 */
+    maxFiles?: number;
+    /** Chuỗi `accept` của input file, vd "image/*,.pdf" */
+    accept?: string;
+    multiple?: boolean;
+};
+/** Một thay đổi ô: dòng (theo thứ tự đang hiển thị) + cột + giá trị mới */
+interface CellUpdate {
+    rowIndex: number;
+    columnId: string;
+    value: unknown;
+}
+declare module "@tanstack/react-table" {
+    interface ColumnMeta<TData extends RowData, TValue> {
+        /** Tên cột hiển thị trong menu Lọc/Sắp xếp/Hiển thị cột */
+        label?: string;
+        /** Kiểu ô của cột — xem {@link CellOpts} */
+        cell?: CellOpts;
+    }
+    interface TableMeta<TData extends RowData> {
+        dataGridRef?: React.RefObject<HTMLElement | null>;
+        cellMapRef?: React.RefObject<Map<string, HTMLDivElement>>;
+        focusedCell?: CellPosition | null;
+        editingCell?: CellPosition | null;
+        selectionState?: SelectionState;
+        searchOpen?: boolean;
+        getIsCellSelected?: (rowIndex: number, columnId: string) => boolean;
+        getIsSearchMatch?: (rowIndex: number, columnId: string) => boolean;
+        getIsActiveSearchMatch?: (rowIndex: number, columnId: string) => boolean;
+        getVisualRowIndex?: (rowId: string) => number | undefined;
+        scrollToCell?: (rowIndex: number, columnId: string, align?: "auto" | "start" | "center" | "end") => void;
+        rowHeight?: RowHeightValue;
+        onRowHeightChange?: (value: RowHeightValue) => void;
+        onRowSelect?: (rowId: string, checked: boolean, shiftKey: boolean) => void;
+        onDataUpdate?: (params: CellUpdate | Array<CellUpdate>) => void;
+        onRowsDelete?: (rowIndices: number[]) => void | Promise<void>;
+        onColumnClick?: (columnId: string) => void;
+        onCellClick?: (rowIndex: number, columnId: string, event?: React.MouseEvent) => void;
+        onCellDoubleClick?: (rowIndex: number, columnId: string) => void;
+        onCellMouseDown?: (rowIndex: number, columnId: string, event: React.MouseEvent) => void;
+        onCellMouseEnter?: (rowIndex: number, columnId: string) => void;
+        onCellMouseUp?: () => void;
+        onCellContextMenu?: (rowIndex: number, columnId: string, event: React.MouseEvent) => void;
+        onCellEditingStart?: (rowIndex: number, columnId: string) => void;
+        onCellEditingStop?: (opts?: {
+            direction?: NavigationDirection;
+            moveToNextRow?: boolean;
+        }) => void;
+        onCellsCopy?: () => void;
+        onCellsCut?: () => void;
+        onCellsPaste?: (expand?: boolean) => void;
+        onSelectionClear?: () => void;
+        onFilesUpload?: (params: {
+            files: File[];
+            rowIndex: number;
+            columnId: string;
+        }) => Promise<FileCellData[]>;
+        onFilesDelete?: (params: {
+            fileIds: string[];
+            rowIndex: number;
+            columnId: string;
+        }) => void | Promise<void>;
+        contextMenu?: ContextMenuState;
+        onContextMenuOpenChange?: (open: boolean) => void;
+        pasteDialog?: PasteDialogState;
+        onPasteDialogOpenChange?: (open: boolean) => void;
+        readOnly?: boolean;
+    }
+}
+/** Vị trí một ô: chỉ số dòng đang hiển thị + id cột */
+interface CellPosition {
+    rowIndex: number;
+    columnId: string;
+}
+interface CellRange {
+    start: CellPosition;
+    end: CellPosition;
+}
+interface SelectionState {
+    /** Khoá ô đang chọn dạng `"{rowIndex}:{columnId}"` */
+    selectedCells: Set<string>;
+    selectionRange: CellRange | null;
+    /** Đang giữ chuột kéo chọn */
+    isSelecting: boolean;
+}
+interface ContextMenuState {
+    open: boolean;
+    x: number;
+    y: number;
+}
+interface PasteDialogState {
+    open: boolean;
+    /** Số dòng còn thiếu để dán hết nội dung clipboard */
+    rowsNeeded: number;
+    clipboardText: string;
+}
+type NavigationDirection = "up" | "down" | "left" | "right" | "home" | "end" | "ctrl+up" | "ctrl+down" | "ctrl+home" | "ctrl+end" | "pageup" | "pagedown" | "pageleft" | "pageright";
+/** Trạng thái + hành vi của ô tìm kiếm trong lưới (bật bằng `enableSearch`) */
+interface SearchState {
+    searchMatches: CellPosition[];
+    matchIndex: number;
+    searchOpen: boolean;
+    onSearchOpenChange: (open: boolean) => void;
+    searchQuery: string;
+    onSearchQueryChange: (query: string) => void;
+    onSearch: (query: string) => void;
+    onNavigateToNextMatch: () => void;
+    onNavigateToPrevMatch: () => void;
+}
+interface DataGridCellProps<TData> {
+    cell: Cell<TData, unknown>;
+    tableMeta: TableMeta<TData>;
+    rowIndex: number;
+    columnId: string;
+    rowHeight: RowHeightValue;
+    isEditing: boolean;
+    isFocused: boolean;
+    isSelected: boolean;
+    isSearchMatch: boolean;
+    isActiveSearchMatch: boolean;
+    readOnly: boolean;
+}
+/** Tệp đính kèm trong ô `variant: "file"` */
+interface FileCellData {
+    id: string;
+    name: string;
+    size: number;
+    type: string;
+    /** Thiếu url = đang tải lên */
+    url?: string;
+}
+type TextFilterOperator = "contains" | "notContains" | "equals" | "notEquals" | "startsWith" | "endsWith" | "isEmpty" | "isNotEmpty";
+type NumberFilterOperator = "equals" | "notEquals" | "lessThan" | "lessThanOrEqual" | "greaterThan" | "greaterThanOrEqual" | "isBetween" | "isEmpty" | "isNotEmpty";
+type DateFilterOperator = "equals" | "notEquals" | "before" | "after" | "onOrBefore" | "onOrAfter" | "isBetween" | "isEmpty" | "isNotEmpty";
+type SelectFilterOperator = "is" | "isNot" | "isAnyOf" | "isNoneOf" | "isEmpty" | "isNotEmpty";
+type BooleanFilterOperator = "isTrue" | "isFalse";
+type FilterOperator = TextFilterOperator | NumberFilterOperator | DateFilterOperator | SelectFilterOperator | BooleanFilterOperator;
+/** Giá trị của một bộ lọc cột (đặt trong `columnFilters[].value`) */
+interface FilterValue {
+    operator: FilterOperator;
+    value?: string | number | string[];
+    /** Vế thứ hai của toán tử `isBetween` */
+    endValue?: string | number;
+}
+
+export type { BooleanFilterOperator, CellOpts, CellPosition, CellRange, CellSelectOption, CellUpdate, ContextMenuState, DataGridCellProps, DateFilterOperator, Direction, FileCellData, FilterOperator, FilterValue, NavigationDirection, NumberFilterOperator, PasteDialogState, RowHeightValue, SearchState, SelectFilterOperator, SelectionState, TextFilterOperator };

package/dist/data-grid/types.js

@@ -0,0 +1 @@
+//# sourceMappingURL=types.js.map

package/dist/data-grid/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/data-grid/use-as-ref.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+
+declare function useAsRef<T>(props: T): React.RefObject<T>;
+
+export { useAsRef };

package/dist/data-grid/use-as-ref.js

@@ -0,0 +1,13 @@
+import * as React from "react";
+import { useIsomorphicLayoutEffect } from "./use-isomorphic-layout-effect.js";
+function useAsRef(props) {
+  const ref = React.useRef(props);
+  useIsomorphicLayoutEffect(() => {
+    ref.current = props;
+  });
+  return ref;
+}
+export {
+  useAsRef
+};
+//# sourceMappingURL=use-as-ref.js.map