@dxos/react-ui-dnd 0.8.4-main.b97322e → 0.8.4-main.bcb3aa67d6

package/package.json

@@ -1,15 +1,20 @@
 {
   "name": "@dxos/react-ui-dnd",
-  "version": "0.8.4-main.b97322e",
+  "version": "0.8.4-main.bcb3aa67d6",
   "description": "Drag and drop components.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dxos/dxos"
+  },
   "license": "MIT",
   "author": "DXOS.org",
-  "sideEffects": true,
+  "sideEffects": false,
   "type": "module",
   "exports": {
     ".": {
+      "source": "./src/index.ts",
       "types": "./dist/types/src/index.d.ts",
       "browser": "./dist/lib/browser/index.mjs",
       "node": "./dist/lib/node-esm/index.mjs"
@@ -24,24 +29,23 @@
     "src"
   ],
   "dependencies": {
-    "@atlaskit/pragmatic-drag-and-drop": "^1.4.0",
-    "@preact-signals/safe-react": "^0.9.0",
+    "@atlaskit/pragmatic-drag-and-drop": "1.7.7",
     "@radix-ui/react-use-controllable-state": "1.1.0"
   },
   "devDependencies": {
-    "@types/react": "~18.2.0",
-    "@types/react-dom": "~18.2.0",
-    "react": "~18.2.0",
-    "react-dom": "~18.2.0",
-    "vite": "5.4.7",
-    "@dxos/react-ui": "0.8.4-main.b97322e",
-    "@dxos/react-ui-theme": "0.8.4-main.b97322e"
+    "@types/react": "~19.2.7",
+    "@types/react-dom": "~19.2.3",
+    "react": "~19.2.3",
+    "react-dom": "~19.2.3",
+    "vite": "^7.1.11",
+    "@dxos/ui-theme": "0.8.4-main.bcb3aa67d6",
+    "@dxos/react-ui": "0.8.4-main.bcb3aa67d6"
   },
   "peerDependencies": {
-    "react": "~18.2.0",
-    "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.8.4-main.b97322e",
-    "@dxos/react-ui-theme": "0.8.4-main.b97322e"
+    "react": "~19.2.3",
+    "react-dom": "~19.2.3",
+    "@dxos/react-ui": "0.8.4-main.bcb3aa67d6",
+    "@dxos/ui-theme": "0.8.4-main.bcb3aa67d6"
   },
   "publishConfig": {
     "access": "public"

package/src/components/ResizeHandle.tsx

@@ -10,10 +10,11 @@ import { useControllableState } from '@radix-ui/react-use-controllable-state';
 import React, { useLayoutEffect, useRef } from 'react';
 
 import { type ThemedClassName, useElevationContext } from '@dxos/react-ui';
-import { mx, surfaceZIndex } from '@dxos/react-ui-theme';
+import { mx, surfaceZIndex } from '@dxos/ui-theme';
 
-import { type Size, type Side } from '../types';
-import { REM } from '../util';
+import { type Side, type Size } from '../types';
+
+const REM = parseFloat(getComputedStyle(document.documentElement).fontSize);
 
 const measureSubject = (element: HTMLButtonElement, fallbackSize: number): { width: number; height: number } => {
   const stackItemElement = element.closest('[data-dx-resize-subject]');
@@ -33,7 +34,7 @@ const getNextSize = (
     Math.max(
       minSize,
       startSize +
-        ((location.current.input[client] - location.initial.input[client]) / REM) * (side.endsWith('end') ? 1 : -1),
+        ((location.current.input[client] - location.initial.input[client]) / REM) * (side.endsWith('start') ? -1 : 1),
     ),
   );
 };
@@ -63,14 +64,14 @@ export const ResizeHandle = ({
   iconPosition = 'start',
   defaultSize,
   fallbackSize,
-  size: _size,
+  size: sizeProp,
   minSize,
   maxSize,
   onSizeChange,
 }: ResizeHandleProps) => {
   const buttonRef = useRef<HTMLButtonElement>(null);
   const [size = 'min-content', setSize] = useControllableState({
-    prop: _size,
+    prop: sizeProp,
     defaultProp: defaultSize,
     onChange: onSizeChange,
   });
@@ -132,11 +133,11 @@ export const ResizeHandle = ({
       ref={buttonRef}
       data-side={side}
       className={mx(
-        'group absolute flex focus-visible:outline-none',
+        'group absolute flex focus-visible:outline-hidden',
         surfaceZIndex({ elevation, level: 'tooltip' }),
         orientation === 'horizontal'
-          ? 'cursor-col-resize is-4 inset-block-0 data-[side="inline-end"]:inline-end-0 data-[side="inline-end"]:before:inline-end-0 data-[side="inline-start"]:inline-start-0 data-[side="inline-start"]:before:inline-start-0 !border-lb-0 before:inset-block-0 before:is-1'
-          : 'cursor-row-resize bs-4 inset-inline-0 data-[side="block-end"]:block-end-0 data-[side="block-end"]:before:block-end-0 data-[side="block-start"]:block-start-0 data-[side="block-start"]:before:block-start-0 !border-li-0 before:inset-inline-0 before:bs-1',
+          ? 'cursor-col-resize w-4 inset-y-0 data-[side=inline-end]:end-0 data-[side=inline-end]:before:end-0 data-[side=inline-start]:start-0 data-[side=inline-start]:before:start-0 border-b-0! before:inset-y-0 before:w-1'
+          : 'cursor-row-resize h-4 inset-x-0 data-[side=block-end]:bottom-0 data-[side=block-end]:before:bottom-0 data-[side=block-start]:top-0 data-[side=block-start]:before:top-0 border-x-0! before:inset-x-0 before:h-1',
         orientation === 'horizontal'
           ? iconPosition === 'end'
             ? 'align-end'
@@ -149,45 +150,9 @@ export const ResizeHandle = ({
               ? 'justify-center'
               : 'justify-start',
         'before:transition-opacity before:duration-100 before:ease-in-out before:opacity-0 hover:before:opacity-100 focus-visible:before:opacity-100 active:before:opacity-100',
-        'before:absolute before:block before:bg-neutralFocusIndicator',
+        'before:absolute before:block before:bg-neutral-focus-indicator',
         classNames,
       )}
-    >
-      <div
-        role='none'
-        data-side={side}
-        className={mx(
-          'grid place-items-center group-hover:opacity-0 group-focus-visible:opacity-0 group-active:opacity-0',
-          orientation === 'horizontal' ? 'bs-[--rail-size] is-4' : 'is-[--rail-size] bs-4',
-        )}
-      >
-        <DragHandleSignifier side={side} />
-      </div>
-    </button>
-  );
-};
-
-const DragHandleSignifier = ({ side }: Pick<ResizeHandleProps, 'side'>) => {
-  return (
-    <svg
-      xmlns='http://www.w3.org/2000/svg'
-      viewBox='0 0 256 256'
-      fill='currentColor'
-      className={mx(
-        'shrink-0 bs-4 is-4 text-unAccent',
-        side === 'block-end'
-          ? 'rotate-90'
-          : side === 'block-start'
-            ? '-rotate-90'
-            : side === 'inline-start' && 'rotate-180',
-      )}
-    >
-      {/* two pips: <path d='M256,120c-8.8,0-16-7.2-16-16v-56c0-8.8,7.2-16,16-16v88Z' />
-      <path d='M256,232c-8.8,0-16-7.2-16-16v-56c0-8.8,7.2-16,16-16v88Z' /> */}
-      <path d='M256,64c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z' />
-      <path d='M256,120c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z' />
-      <path d='M256,176c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z' />
-      <path d='M256,232c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z' />
-    </svg>
+    />
   );
 };

package/src/util/index.ts

@@ -3,4 +3,3 @@
 //
 
 export * from './sizeStyle';
-export * from './rem';

package/src/util/sizeStyle.ts

@@ -17,6 +17,10 @@ export const sizeStyle = (
     case 'block-start':
     case 'block-end':
       sizeProperty = 'blockSize';
+      break;
   }
-  return { [sizeProperty]: size === 'min-content' ? (calcSize ? 'var(--dx-calc-min)' : 'min-content') : `${size}rem` };
+
+  return {
+    [sizeProperty]: size === 'min-content' ? (calcSize ? 'var(--dx-calc-min)' : 'min-content') : `${size}rem`,
+  };
 };

package/dist/types/src/util/rem.d.ts

@@ -1,2 +0,0 @@
-export declare const REM: number;
-//# sourceMappingURL=rem.d.ts.map

package/dist/types/src/util/rem.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"rem.d.ts","sourceRoot":"","sources":["../../../../src/util/rem.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,GAAG,QAAkE,CAAC"}

package/src/util/rem.ts

@@ -1,5 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-export const REM = parseFloat(getComputedStyle(document.documentElement).fontSize);