@dxos/react-ui-list 0.7.4 → 0.7.5-main.9cb18ac

package/src/components/List/DropIndicator.tsx

@@ -1,69 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { type Edge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/types';
-import React, { type CSSProperties, type HTMLAttributes } from 'react';
-
-import { mx } from '@dxos/react-ui-theme';
-
-type Orientation = 'horizontal' | 'vertical';
-
-const edgeToOrientationMap: Record<Edge, Orientation> = {
-  top: 'horizontal',
-  bottom: 'horizontal',
-  left: 'vertical',
-  right: 'vertical',
-};
-
-const orientationStyles: Record<Orientation, HTMLAttributes<HTMLElement>['className']> = {
-  horizontal: 'h-[--line-thickness] left-[--terminal-radius] right-0 before:left-[--negative-terminal-size]',
-  vertical: 'w-[--line-thickness] top-[--terminal-radius] bottom-0 before:top-[--negative-terminal-size]',
-};
-
-const edgeStyles: Record<Edge, HTMLAttributes<HTMLElement>['className']> = {
-  top: 'top-[--line-offset] before:top-[--offset-terminal]',
-  right: 'right-[--line-offset] before:right-[--offset-terminal]',
-  bottom: 'bottom-[--line-offset] before:bottom-[--offset-terminal]',
-  left: 'left-[--line-offset] before:left-[--offset-terminal]',
-};
-
-const strokeSize = 2;
-const terminalSize = 8;
-const offsetToAlignTerminalWithLine = (strokeSize - terminalSize) / 2;
-
-export type DropIndicatorProps = {
-  edge: Edge;
-  gap?: number;
-};
-
-/**
- * This is a tailwind port of `@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box`
- */
-export const DropIndicator = ({ edge, gap = 0 }: DropIndicatorProps) => {
-  const lineOffset = `calc(-0.5 * (${gap}px + ${strokeSize}px))`;
-
-  const orientation = edgeToOrientationMap[edge];
-
-  return (
-    <div
-      style={
-        {
-          '--line-thickness': `${strokeSize}px`,
-          '--line-offset': `${lineOffset}`,
-          '--terminal-size': `${terminalSize}px`,
-          '--terminal-radius': `${terminalSize / 2}px`,
-          '--negative-terminal-size': `-${terminalSize}px`,
-          '--offset-terminal': `${offsetToAlignTerminalWithLine}px`,
-        } as CSSProperties
-      }
-      className={mx(
-        'absolute z-10 pointer-events-none bg-blue-700',
-        "before:content-[''] before:w-[--terminal-size] before:h-[--terminal-size] box-border before:absolute",
-        'before:border-[length:--line-thickness] before:border-solid before:border-blue-700 before:rounded-full',
-        orientationStyles[orientation],
-        edgeStyles[edge],
-      )}
-    ></div>
-  );
-};

package/src/components/Tree/DropIndicator.tsx

@@ -1,78 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { type Instruction } from '@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item';
-import React, { type HTMLAttributes, type CSSProperties } from 'react';
-
-import { mx } from '@dxos/react-ui-theme';
-
-// Tree item hitbox
-// https://github.com/atlassian/pragmatic-drag-and-drop/blob/main/packages/hitbox/constellation/index/about.mdx#tree-item
-
-type InstructionType = Exclude<Instruction, { type: 'instruction-blocked' }>['type'];
-type Orientation = 'sibling' | 'child';
-
-const edgeToOrientationMap: Record<InstructionType, Orientation> = {
-  'reorder-above': 'sibling',
-  'reorder-below': 'sibling',
-  'make-child': 'child',
-  reparent: 'child',
-};
-
-const orientationStyles: Record<Orientation, HTMLAttributes<HTMLElement>['className']> = {
-  // TODO(wittjosiah): Stop using left/right here.
-  sibling:
-    'bs-[--line-thickness] left-[--horizontal-indent] right-0 bg-accentSurface before:left-[--negative-terminal-size]',
-  child: 'is-full block-start-0 block-end-0 border-[length:--line-thickness] before:invisible',
-};
-
-const instructionStyles: Record<InstructionType, HTMLAttributes<HTMLElement>['className']> = {
-  'reorder-above': 'block-start-[--line-offset] before:block-start-[--offset-terminal]',
-  'reorder-below': 'block-end-[--line-offset] before:block-end-[--offset-terminal]',
-  'make-child': 'border-accentSurface',
-  // TODO(wittjosiah): This is not occurring in the current implementation.
-  reparent: '',
-};
-
-const strokeSize = 2;
-const terminalSize = 8;
-const offsetToAlignTerminalWithLine = (strokeSize - terminalSize) / 2;
-
-export type DropIndicatorProps = {
-  instruction: Instruction;
-  gap?: number;
-};
-
-export const DropIndicator = ({ instruction, gap = 0 }: DropIndicatorProps) => {
-  const lineOffset = `calc(-0.5 * (${gap}px + ${strokeSize}px))`;
-  const isBlocked = instruction.type === 'instruction-blocked';
-  const desiredInstruction = isBlocked ? instruction.desired : instruction;
-  const orientation = edgeToOrientationMap[desiredInstruction.type];
-  if (isBlocked) {
-    return null;
-  }
-
-  return (
-    <div
-      style={
-        {
-          '--line-thickness': `${strokeSize}px`,
-          '--line-offset': `${lineOffset}`,
-          '--terminal-size': `${terminalSize}px`,
-          '--terminal-radius': `${terminalSize / 2}px`,
-          '--negative-terminal-size': `-${terminalSize}px`,
-          '--offset-terminal': `${offsetToAlignTerminalWithLine}px`,
-          '--horizontal-indent': `${desiredInstruction.currentLevel * desiredInstruction.indentPerLevel + 4}px`,
-        } as CSSProperties
-      }
-      className={mx(
-        'absolute z-10 pointer-events-none',
-        'before:is-[--terminal-size] before:bs-[--terminal-size] box-border before:absolute',
-        'before:border-[length:--line-thickness] before:border-solid before:border-accentSurface before:rounded-full',
-        orientationStyles[orientation],
-        instructionStyles[desiredInstruction.type],
-      )}
-    ></div>
-  );
-};