@spaced-out/ui-design-system 0.6.11 → 0.6.12

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.6.12](https://github.com/spaced-out/ui-design-system/compare/v0.6.11...v0.6.12) (2026-04-22)
+
+
+### Bug Fixes
+
+* **DraggableWrapper:** decouple from native HTML5 drag to support multiple DnD libraries ([#477](https://github.com/spaced-out/ui-design-system/issues/477)) ([fdd7386](https://github.com/spaced-out/ui-design-system/commit/fdd7386c033d248c8e5eb9de738ba00c7873bebe))
+
 ### [0.6.11](https://github.com/spaced-out/ui-design-system/compare/v0.6.10...v0.6.11) (2026-04-15)
 
 

package/lib/components/DraggableWrapper/DraggableWrapper.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-type DraggableWrapperClassNames = Readonly<{
+export type DraggableWrapperClassNames = Readonly<{
     /** Override or extend the root wrapper element. */
     wrapper?: string;
     /** Override or extend the drag handle element. */
@@ -19,7 +19,14 @@ export interface DraggableWrapperProps extends Pick<React.HTMLAttributes<HTMLDiv
      */
     onKeyboardReorder?: (direction: 'up' | 'down') => void;
     testId?: string;
+    /** Set false when using @dnd-kit / react-beautiful-dnd (pointer-event libs). Keep true for react-dnd HTML5 backend. Default true. */
+    enableNativeDrag?: boolean;
+    /** Extra props to spread on the wrapper (library listeners/attributes). */
+    wrapperProps?: React.HTMLAttributes<HTMLDivElement>;
+    /** Extra props to spread on the drag handle (some libs attach activator listeners here). */
+    dragHandleProps?: React.HTMLAttributes<HTMLDivElement>;
+    /** Separate ref for the drag handle (for libs with setActivatorNodeRef / react-dnd's drag). */
+    dragHandleRef?: React.Ref<HTMLDivElement>;
 }
-export declare const DraggableWrapper: ({ children, isDragging, dragHandleLabel, classNames, testId, onDragStart, onDragEnd, onDragOver, onDrop, onKeyboardReorder, }: DraggableWrapperProps) => React.JSX.Element;
-export {};
+export declare const DraggableWrapper: React.ForwardRefExoticComponent<DraggableWrapperProps & React.RefAttributes<HTMLDivElement>>;
 //# sourceMappingURL=DraggableWrapper.d.ts.map

package/lib/components/DraggableWrapper/DraggableWrapper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DraggableWrapper.d.ts","sourceRoot":"","sources":["../../../src/components/DraggableWrapper/DraggableWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B,KAAK,0BAA0B,GAAG,QAAQ,CAAC;IACzC,mDAAmD;IACnD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,kDAAkD;IAClD,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC,CAAC;AAEH,MAAM,WAAW,qBACf,SAAQ,IAAI,CACV,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EACpC,aAAa,GAAG,WAAW,GAAG,YAAY,GAAG,QAAQ,CACtD;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,4EAA4E;IAC5E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,6FAA6F;IAC7F,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,0FAA0F;IAC1F,UAAU,CAAC,EAAE,0BAA0B,CAAC;IACxC;;;OAGG;IACH,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,IAAI,GAAG,MAAM,KAAK,IAAI,CAAC;IACvD,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,gBAAgB,GAAI,+HAW9B,qBAAqB,sBA6EvB,CAAC"}
+{"version":3,"file":"DraggableWrapper.d.ts","sourceRoot":"","sources":["../../../src/components/DraggableWrapper/DraggableWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAY/B,MAAM,MAAM,0BAA0B,GAAG,QAAQ,CAAC;IAChD,mDAAmD;IACnD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,kDAAkD;IAClD,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC,CAAC;AAEH,MAAM,WAAW,qBACf,SAAQ,IAAI,CACV,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EACpC,aAAa,GAAG,WAAW,GAAG,YAAY,GAAG,QAAQ,CACtD;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,4EAA4E;IAC5E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,6FAA6F;IAC7F,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,0FAA0F;IAC1F,UAAU,CAAC,EAAE,0BAA0B,CAAC;IACxC;;;OAGG;IACH,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,IAAI,GAAG,MAAM,KAAK,IAAI,CAAC;IACvD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,qIAAqI;IACrI,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,2EAA2E;IAC3E,YAAY,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;IACpD,4FAA4F;IAC5F,eAAe,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;IACvD,+FAA+F;IAC/F,aAAa,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3C;AAED,eAAO,MAAM,gBAAgB,8FA6H5B,CAAC"}

package/lib/components/DraggableWrapper/DraggableWrapper.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.DraggableWrapper = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _mergeRefs = require("../../utils/merge-refs");
 var _qa = require("../../utils/qa");
 var _Icon = require("../Icon");
 var _Tooltip = require("../Tooltip");
@@ -13,7 +14,7 @@ var _DraggableWrapperModule = _interopRequireDefault(require("./DraggableWrapper
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-const DraggableWrapper = _ref => {
+const DraggableWrapper = exports.DraggableWrapper = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     children,
     isDragging,
@@ -24,12 +25,17 @@ const DraggableWrapper = _ref => {
     onDragEnd,
     onDragOver,
     onDrop,
-    onKeyboardReorder
+    onKeyboardReorder,
+    enableNativeDrag = true,
+    wrapperProps,
+    dragHandleProps,
+    dragHandleRef
   } = _ref;
-  const wrapperRef = React.useRef(null);
+  const internalRef = React.useRef(null);
+  const mergedRef = React.useMemo(() => (0, _mergeRefs.mergeRefs)([internalRef, ref]), [ref]);
   const isKeyboardGrabbed = React.useRef(false);
   const dispatchDragEvent = type => {
-    wrapperRef.current?.dispatchEvent(new DragEvent(type, {
+    internalRef.current?.dispatchEvent(new DragEvent(type, {
       bubbles: true,
       dataTransfer: new DataTransfer()
     }));
@@ -38,6 +44,17 @@ const DraggableWrapper = _ref => {
     isKeyboardGrabbed.current = false;
     dispatchDragEvent('dragend');
   };
+  React.useEffect(() => {
+    const element = internalRef.current;
+    return () => {
+      if (isKeyboardGrabbed.current && element) {
+        element.dispatchEvent(new DragEvent('dragend', {
+          bubbles: true,
+          dataTransfer: new DataTransfer()
+        }));
+      }
+    };
+  }, []);
   const handleBlur = () => {
     if (isKeyboardGrabbed.current) {
       releaseKeyboardGrab();
@@ -67,26 +84,29 @@ const DraggableWrapper = _ref => {
     }
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    ref: wrapperRef,
-    draggable: true,
+    ref: mergedRef,
     onDragStart: onDragStart,
     onDragEnd: onDragEnd,
     onDragOver: onDragOver,
     onDrop: onDrop,
+    ...wrapperProps,
+    draggable: enableNativeDrag,
     "data-testid": (0, _qa.generateTestId)({
       base: testId
     }),
     className: (0, _classify.default)(_DraggableWrapperModule.default.wrapper, {
       [_DraggableWrapperModule.default.dragging]: !!isDragging
-    }, classNames?.wrapper),
+    }, classNames?.wrapper, wrapperProps?.className),
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: (0, _classify.default)(_DraggableWrapperModule.default.dragHandle, classNames?.dragHandle),
+      ref: dragHandleRef,
+      ...dragHandleProps,
+      onKeyDownCapture: enableNativeDrag ? handleKeyDown : dragHandleProps?.onKeyDownCapture,
+      onBlur: enableNativeDrag ? handleBlur : dragHandleProps?.onBlur,
       "data-testid": (0, _qa.generateTestId)({
         base: testId,
         slot: 'drag-handle'
       }),
-      onKeyDownCapture: handleKeyDown,
-      onBlur: handleBlur,
+      className: (0, _classify.default)(_DraggableWrapperModule.default.dragHandle, classNames?.dragHandle, dragHandleProps?.className),
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.Tooltip, {
         title: dragHandleLabel,
         placement: "top",
@@ -98,5 +118,5 @@ const DraggableWrapper = _ref => {
       })
     }), children]
   });
-};
-exports.DraggableWrapper = DraggableWrapper;
+});
+DraggableWrapper.displayName = 'DraggableWrapper';

package/lib/components/DraggableWrapper/index.d.ts

@@ -1,3 +1,3 @@
 export { DraggableWrapper } from '../../components/DraggableWrapper/DraggableWrapper';
-export type { DraggableWrapperProps } from '../../components/DraggableWrapper/DraggableWrapper';
+export type { DraggableWrapperProps, DraggableWrapperClassNames, } from '../../components/DraggableWrapper/DraggableWrapper';
 //# sourceMappingURL=index.d.ts.map

package/lib/components/DraggableWrapper/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DraggableWrapper/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,gBAAgB,EAAC,MAAM,kDAAkD,CAAC;AAClF,YAAY,EAAC,qBAAqB,EAAC,MAAM,kDAAkD,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DraggableWrapper/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,gBAAgB,EAAC,MAAM,kDAAkD,CAAC;AAClF,YAAY,EACV,qBAAqB,EACrB,0BAA0B,GAC3B,MAAM,kDAAkD,CAAC"}

package/mcp/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaced-out/genesis-mcp",
-  "version": "1.0.24",
+  "version": "1.0.25",
   "description": "MCP server for Genesis UI Design System - provides AI assistants with access to components, hooks, and design tokens",
   "type": "module",
   "main": "index.js",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaced-out/ui-design-system",
-  "version": "0.6.11",
+  "version": "0.6.12",
   "description": "Sense UI components library",
   "author": {
     "name": "Spaced Out"