@dxos/react-ui-dnd 0.8.4-main.937b3ca → 0.8.4-main.9be5663bfe

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-dnd",
-  "version": "0.8.4-main.937b3ca",
+  "version": "0.8.4-main.9be5663bfe",
   "description": "Drag and drop components.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -37,15 +37,15 @@
     "@types/react-dom": "~19.2.3",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "vite": "7.1.9",
-    "@dxos/react-ui": "0.8.4-main.937b3ca",
-    "@dxos/ui-theme": "0.8.4-main.937b3ca"
+    "vite": "^7.1.11",
+    "@dxos/ui-theme": "0.8.4-main.9be5663bfe",
+    "@dxos/react-ui": "0.8.4-main.9be5663bfe"
   },
   "peerDependencies": {
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "@dxos/react-ui": "0.8.4-main.937b3ca",
-    "@dxos/ui-theme": "0.8.4-main.937b3ca"
+    "@dxos/react-ui": "0.8.4-main.9be5663bfe",
+    "@dxos/ui-theme": "0.8.4-main.9be5663bfe"
   },
   "publishConfig": {
     "access": "public"

package/src/components/ResizeHandle.tsx

@@ -34,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),
     ),
   );
 };
@@ -64,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,
   });
@@ -133,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'
@@ -150,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>
+    />
   );
 };