@blockbite/libraries 0.11.7 → 0.12.1

package/dist/react-shim.d.ts

@@ -0,0 +1,19 @@
+declare module '../@wordpress/element' {
+  export * from '@wordpress/element';
+}
+
+declare module '../@wordpress/element/jsx-runtime' {
+  export const jsx: any;
+  export const jsxs: any;
+  export const jsxDEV: any;
+}
+
+declare module 'react' {
+  import React = require('wp.element');
+  export = React;
+}
+
+declare module 'react/jsx-runtime' {
+  import * as ReactJSX from 'wp.element/jsx-runtime';
+  export = ReactJSX;
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@blockbite/libraries",
   "title": "react-bundled-libraries",
-  "version": "0.11.7",
+  "version": "0.12.1",
   "website": "",
   "sideEffects": false,
   "type": "module",
@@ -23,14 +23,19 @@
     "LICENSE"
   ],
   "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "@tailwindcss/vite": "^4.1.11",
     "@vitejs/plugin-react": "^5.0.0",
+    "@wordpress/element": "^6.36.0",
     "allotment": "^1.20.4",
+    "classnames": "^2.5.1",
     "react-grid-drag-resize": "^0.12.4",
     "rollup-plugin-external-globals": "^0.13.0",
     "vite-plugin-dts": "^4.5.3",
-    "@blockbite/shared-utils": "2.0.7",
-    "@blockbite/types": "0.1.6"
+    "@blockbite/shared-utils": "2.1.1",
+    "@blockbite/types": "0.2.0"
   },
   "peerDependencies": {
     "tailwindcss": "^4.0.0",

package/src/Sortable.tsx

@@ -0,0 +1,257 @@
+import {
+  closestCenter,
+  DndContext,
+  DragOverlay,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+  type DragEndEvent,
+  type DragStartEvent,
+  type UniqueIdentifier,
+} from '@dnd-kit/core';
+import {
+  arrayMove,
+  SortableContext,
+  sortableKeyboardCoordinates,
+  useSortable,
+  verticalListSortingStrategy,
+} from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { useMemo, useState } from '@wordpress/element';
+import classNames from 'classnames';
+
+export type SortableListRenderCtx = {
+  /** Spread these on the element you want to use as the drag handle */
+  dragHandleProps: Record<string, any>;
+  /** True when this specific item is being dragged */
+  isDragging: boolean;
+  /** True when another item is being dragged over this one */
+  isDragOver: boolean;
+};
+
+export type SortableListProps<T> = {
+  items: T[];
+  onChange: (next: T[]) => void;
+
+  /** Must be stable across renders and reorders */
+  getId: (item: T) => UniqueIdentifier;
+
+  /** Render any component for the row */
+  renderItem: (item: T, ctx: SortableListRenderCtx) => React.ReactNode;
+
+  /** Optional: validate proposed new order; return string to block reorder */
+  validateReorder?: (next: T[]) => string | null;
+
+  /** Optional: render an error message somewhere */
+  renderError?: (msg: string) => React.ReactNode;
+
+  disabled?: boolean;
+
+  className?: string;
+  itemWrapperClassName?: string;
+  /** @deprecated No longer used with dnd-kit (uses CSS transforms instead) */
+  dragOverClassName?: string;
+};
+
+type SortableItemProps<T> = {
+  id: UniqueIdentifier;
+  item: T;
+  renderItem: SortableListProps<T>['renderItem'];
+  disabled: boolean;
+  itemWrapperClassName?: string;
+  activeId: UniqueIdentifier | null;
+};
+
+function SortableItem<T>({
+  id,
+  item,
+  renderItem,
+  disabled,
+  itemWrapperClassName,
+  activeId,
+}: SortableItemProps<T>) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    setActivatorNodeRef,
+    transform,
+    transition,
+    isDragging,
+    over,
+  } = useSortable({ id, disabled });
+
+  const style: React.CSSProperties = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1,
+    zIndex: isDragging ? 1 : 0,
+  };
+
+  const isDragOver = over?.id === id && activeId !== id;
+
+  // Create drag handle props that can be spread on any element
+  const dragHandleProps = {
+    ref: setActivatorNodeRef,
+    ...listeners,
+    ...attributes,
+  };
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={style}
+      className={classNames(itemWrapperClassName)}
+      data-sortable-wrapper="true"
+    >
+      {renderItem(item, { dragHandleProps, isDragging, isDragOver })}
+    </div>
+  );
+}
+
+// Drag overlay item - rendered in a portal during drag
+function DragOverlayItem<T>({
+  item,
+  renderItem,
+  itemWrapperClassName,
+}: {
+  item: T;
+  renderItem: SortableListProps<T>['renderItem'];
+  itemWrapperClassName?: string;
+}) {
+  // Dummy handle props for the overlay (not interactive)
+  const dragHandleProps: Record<string, any> = {};
+
+  return (
+    <div
+      className={classNames(itemWrapperClassName, 'bg-white')}
+      style={{
+        boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
+        transform: 'scale(1.02)',
+        cursor: 'grabbing',
+      }}
+    >
+      {renderItem(item, {
+        dragHandleProps,
+        isDragging: true,
+        isDragOver: false,
+      })}
+    </div>
+  );
+}
+
+export function SortableList<T>(props: SortableListProps<T>) {
+  const {
+    items,
+    onChange,
+    getId,
+    renderItem,
+    validateReorder,
+    renderError,
+    disabled = false,
+    className,
+    itemWrapperClassName,
+  } = props;
+
+  const [activeId, setActiveId] = useState<UniqueIdentifier | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const ids = useMemo(() => items.map(getId), [items, getId]);
+
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        distance: 5, // 5px movement required before drag starts
+      },
+    }),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    })
+  );
+
+  const handleDragStart = (event: DragStartEvent) => {
+    setActiveId(event.active.id);
+    setError(null);
+  };
+
+  const handleDragEnd = (event: DragEndEvent) => {
+    const { active, over } = event;
+
+    setActiveId(null);
+
+    if (!over || active.id === over.id) {
+      return;
+    }
+
+    const oldIndex = ids.indexOf(active.id);
+    const newIndex = ids.indexOf(over.id);
+
+    if (oldIndex === -1 || newIndex === -1) {
+      return;
+    }
+
+    const next = arrayMove(items, oldIndex, newIndex);
+
+    if (validateReorder) {
+      const msg = validateReorder(next);
+      if (msg) {
+        setError(msg);
+        return;
+      }
+    }
+
+    setError(null);
+    onChange(next);
+  };
+
+  const handleDragCancel = () => {
+    setActiveId(null);
+  };
+
+  const activeItem =
+    activeId !== null ? items.find((item) => getId(item) === activeId) : null;
+
+  return (
+    <div className={className}>
+      {error && renderError ? renderError(error) : null}
+
+      <DndContext
+        sensors={sensors}
+        collisionDetection={closestCenter}
+        onDragStart={handleDragStart}
+        onDragEnd={handleDragEnd}
+        onDragCancel={handleDragCancel}
+      >
+        <SortableContext items={ids} strategy={verticalListSortingStrategy}>
+          <div className="flex flex-col gap-2">
+            {items.map((item) => {
+              const id = getId(item);
+              return (
+                <SortableItem
+                  key={id}
+                  id={id}
+                  item={item}
+                  renderItem={renderItem}
+                  disabled={disabled}
+                  itemWrapperClassName={itemWrapperClassName}
+                  activeId={activeId}
+                />
+              );
+            })}
+          </div>
+        </SortableContext>
+
+        <DragOverlay>
+          {activeItem ? (
+            <DragOverlayItem
+              item={activeItem}
+              renderItem={renderItem}
+              itemWrapperClassName={itemWrapperClassName}
+            />
+          ) : null}
+        </DragOverlay>
+      </DndContext>
+    </div>
+  );
+}

package/src/index.ts

@@ -1,5 +1,8 @@
 import { Allotment } from 'allotment';
+import 'allotment/dist/style.css';
 
-export { Allotment };
+import { SortableList } from './Sortable.js';
+export { Allotment, SortableList };
 
 export type { AllotmentProps as ExternalAllotmentProps } from 'allotment';
+export type { SortableListProps as ExternalSortableListProps } from './Sortable.js';

package/src/react-shim.d.ts

@@ -0,0 +1,19 @@
+declare module 'wp.element' {
+  export * from '@wordpress/element';
+}
+
+declare module 'wp.element/jsx-runtime' {
+  export const jsx: any;
+  export const jsxs: any;
+  export const jsxDEV: any;
+}
+
+declare module 'react' {
+  import React = require('wp.element');
+  export = React;
+}
+
+declare module 'react/jsx-runtime' {
+  import * as ReactJSX from 'wp.element/jsx-runtime';
+  export = ReactJSX;
+}