@dxos/react-ui 0.7.4 → 0.7.5-labs.071a3e2

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

@@ -1,5 +1,5 @@
 import { type ClassNameValue } from '@dxos/react-ui-types';
-export type ThemedClassName<P> = Omit<P, 'className'> & {
+export type ThemedClassName<P = {}> = Omit<P, 'className'> & {
     classNames?: ClassNameValue;
 };
 //# sourceMappingURL=ThemedClassName.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ThemedClassName.d.ts","sourceRoot":"","sources":["../../../../src/util/ThemedClassName.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAE3D,MAAM,MAAM,eAAe,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,EAAE,WAAW,CAAC,GAAG;IAAE,UAAU,CAAC,EAAE,cAAc,CAAA;CAAE,CAAC"}
+{"version":3,"file":"ThemedClassName.d.ts","sourceRoot":"","sources":["../../../../src/util/ThemedClassName.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAE3D,MAAM,MAAM,eAAe,CAAC,CAAC,GAAG,EAAE,IAAI,IAAI,CAAC,CAAC,EAAE,WAAW,CAAC,GAAG;IAAE,UAAU,CAAC,EAAE,cAAc,CAAA;CAAE,CAAC"}

package/dist/types/tsconfig.tsbuildinfo

@@ -0,0 +1 @@
+{"version":"5.7.3"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui",
-  "version": "0.7.4",
+  "version": "0.7.5-labs.071a3e2",
   "description": "Low-level React components for DXOS, applying a theme to a core group of primitives",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -23,49 +23,50 @@
     "src"
   ],
   "dependencies": {
-    "@fluentui/react-tabster": "^9.19.0",
-    "@radix-ui/primitive": "^1.0.0",
-    "@radix-ui/react-alert-dialog": "^1.0.3",
-    "@radix-ui/react-avatar": "^1.0.2",
-    "@radix-ui/react-checkbox": "^1.0.3",
-    "@radix-ui/react-collapsible": "^1.0.2",
-    "@radix-ui/react-compose-refs": "^1.0.0",
-    "@radix-ui/react-context": "^1.0.0",
-    "@radix-ui/react-context-menu": "^2.1.5",
-    "@radix-ui/react-dialog": "^1.0.3",
-    "@radix-ui/react-dismissable-layer": "^1.1.1",
-    "@radix-ui/react-focus-guards": "^1.1.1",
-    "@radix-ui/react-focus-scope": "^1.1.0",
-    "@radix-ui/react-id": "^1.1.0",
-    "@radix-ui/react-menu": "^2.0.6",
-    "@radix-ui/react-popper": "^1.1.2",
-    "@radix-ui/react-portal": "^1.1.2",
-    "@radix-ui/react-presence": "^1.1.1",
-    "@radix-ui/react-primitive": "^1.0.2",
-    "@radix-ui/react-scroll-area": "^1.0.3",
-    "@radix-ui/react-select": "^1.2.1",
-    "@radix-ui/react-separator": "^1.0.3",
-    "@radix-ui/react-slot": "^1.0.1",
-    "@radix-ui/react-switch": "^1.0.3",
-    "@radix-ui/react-toast": "^1.2.1",
-    "@radix-ui/react-toggle": "^1.0.2",
-    "@radix-ui/react-toggle-group": "^1.0.3",
-    "@radix-ui/react-toolbar": "^1.0.3",
-    "@radix-ui/react-tooltip": "^1.1.2",
-    "@radix-ui/react-use-controllable-state": "^1.0.0",
+    "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.3",
+    "@fluentui/react-tabster": "9.23.3",
+    "@radix-ui/primitive": "1.1.1",
+    "@radix-ui/react-alert-dialog": "1.1.6",
+    "@radix-ui/react-avatar": "1.1.3",
+    "@radix-ui/react-checkbox": "1.1.4",
+    "@radix-ui/react-collapsible": "1.1.3",
+    "@radix-ui/react-compose-refs": "1.1.1",
+    "@radix-ui/react-context": "1.1.1",
+    "@radix-ui/react-context-menu": "2.2.6",
+    "@radix-ui/react-dialog": "1.1.6",
+    "@radix-ui/react-dismissable-layer": "1.1.5",
+    "@radix-ui/react-focus-guards": "1.1.1",
+    "@radix-ui/react-focus-scope": "1.1.2",
+    "@radix-ui/react-id": "1.1.0",
+    "@radix-ui/react-menu": "2.1.6",
+    "@radix-ui/react-popper": "1.2.2",
+    "@radix-ui/react-portal": "1.1.4",
+    "@radix-ui/react-presence": "1.1.2",
+    "@radix-ui/react-primitive": "2.0.2",
+    "@radix-ui/react-scroll-area": "1.2.3",
+    "@radix-ui/react-select": "2.1.6",
+    "@radix-ui/react-separator": "1.1.2",
+    "@radix-ui/react-slot": "1.1.2",
+    "@radix-ui/react-switch": "1.1.3",
+    "@radix-ui/react-toast": "1.2.6",
+    "@radix-ui/react-toggle": "1.1.2",
+    "@radix-ui/react-toggle-group": "1.1.2",
+    "@radix-ui/react-toolbar": "1.1.2",
+    "@radix-ui/react-tooltip": "1.1.8",
+    "@radix-ui/react-use-controllable-state": "1.1.0",
     "aria-hidden": "^1.2.4",
     "date-fns": "^3.3.1",
     "i18next": "^21.10.0",
     "keyborg": "^2.5.0",
     "react-i18next": "^11.18.6",
     "react-remove-scroll": "^2.6.0",
-    "@dxos/debug": "0.7.4",
-    "@dxos/log": "0.7.4",
-    "@dxos/react-hooks": "0.7.4",
-    "@dxos/react-input": "0.7.4",
-    "@dxos/react-ui-types": "0.7.4",
-    "@dxos/util": "0.7.4",
-    "@dxos/react-list": "0.7.4"
+    "@dxos/debug": "0.7.5-labs.071a3e2",
+    "@dxos/log": "0.7.5-labs.071a3e2",
+    "@dxos/react-input": "0.7.5-labs.071a3e2",
+    "@dxos/react-list": "0.7.5-labs.071a3e2",
+    "@dxos/react-hooks": "0.7.5-labs.071a3e2",
+    "@dxos/react-ui-types": "0.7.5-labs.071a3e2",
+    "@dxos/util": "0.7.5-labs.071a3e2"
   },
   "devDependencies": {
     "@dnd-kit/core": "^6.0.5",
@@ -77,15 +78,15 @@
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/random": "0.7.4",
-    "@dxos/react-ui-theme": "0.7.4",
-    "@dxos/util": "0.7.4"
+    "@dxos/random": "0.7.5-labs.071a3e2",
+    "@dxos/react-ui-theme": "0.7.5-labs.071a3e2",
+    "@dxos/util": "0.7.5-labs.071a3e2"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.1.5",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui-theme": "0.7.4"
+    "@dxos/react-ui-theme": "0.7.5-labs.071a3e2"
   },
   "publishConfig": {
     "access": "public"

package/src/components/Avatars/Avatar.tsx

@@ -5,8 +5,8 @@
 import {
   Root as AvatarRootPrimitive,
   type AvatarProps as AvatarRootPrimitiveProps,
-  type ImageLoadingStatus,
   Fallback as AvatarFallbackPrimitive,
+  type AvatarImageProps as AvatarImagePrimitiveProps,
 } from '@radix-ui/react-avatar';
 import { createContext } from '@radix-ui/react-context';
 import { Primitive } from '@radix-ui/react-primitive';
@@ -243,9 +243,7 @@ const AvatarMaskedText = (props: AvatarMaskedTextProps) => {
   );
 };
 
-type AvatarImageProps = ComponentPropsWithRef<'image'> & {
-  onLoadingStatusChange?: (status: ImageLoadingStatus) => void;
-};
+type AvatarImageProps = ComponentPropsWithRef<'image'> & Pick<AvatarImagePrimitiveProps, 'onLoadingStatusChange'>;
 
 const AvatarImage = forwardRef<SVGImageElement, AvatarImageProps>(
   ({ onLoadingStatusChange, ...props }, forwardedRef) => {
@@ -264,8 +262,7 @@ const AvatarImage = forwardRef<SVGImageElement, AvatarImageProps>(
 
 type AvatarIconProps = {
   icon: string;
-  onLoadingStatusChange?: (status: ImageLoadingStatus) => void;
-};
+} & Pick<AvatarImagePrimitiveProps, 'onLoadingStatusChange'>;
 
 const AvatarIcon = forwardRef<SVGSVGElement, AvatarIconProps>(({ onLoadingStatusChange, ...props }, forwardedRef) => {
   const { size } = useAvatarContext('AvatarIcon');

package/src/components/Buttons/IconButton.tsx

@@ -2,34 +2,48 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { forwardRef } from 'react';
+import React, { forwardRef, type ReactNode, type MutableRefObject, useState } from 'react';
 
 import { Button, type ButtonProps } from './Button';
 import { useThemeContext } from '../../hooks';
 import { type ThemedClassName } from '../../util';
 import { Icon, type IconProps } from '../Icon';
-import { Tooltip } from '../Tooltip';
+import { Tooltip, type TooltipContentProps } from '../Tooltip';
 
 type IconButtonProps = Omit<ButtonProps, 'children'> &
   Pick<IconProps, 'icon' | 'size'> & {
-    label: string;
+    label: NonNullable<ReactNode>;
     iconOnly?: boolean;
+    caretDown?: boolean;
     // TODO(burdon): Create slots abstraction?
     iconClassNames?: ThemedClassName<any>['classNames'];
     tooltipPortal?: boolean;
     tooltipZIndex?: string;
+    tooltipSide?: TooltipContentProps['side'];
+    suppressNextTooltip?: MutableRefObject<boolean>;
   };
 
 const IconOnlyButton = forwardRef<HTMLButtonElement, IconButtonProps>(
-  ({ tooltipPortal = true, tooltipZIndex: zIndex, ...props }, forwardedRef) => {
+  ({ tooltipPortal = true, tooltipZIndex: zIndex, tooltipSide, suppressNextTooltip, ...props }, forwardedRef) => {
+    const [triggerTooltipOpen, setTriggerTooltipOpen] = useState(false);
     const content = (
-      <Tooltip.Content {...(zIndex && { style: { zIndex } })}>
+      <Tooltip.Content {...(zIndex && { style: { zIndex } })} side={tooltipSide}>
         {props.label}
         <Tooltip.Arrow />
       </Tooltip.Content>
     );
     return (
-      <Tooltip.Root>
+      <Tooltip.Root
+        open={triggerTooltipOpen}
+        onOpenChange={(nextOpen) => {
+          if (suppressNextTooltip?.current) {
+            setTriggerTooltipOpen(false);
+            suppressNextTooltip.current = false;
+          } else {
+            setTriggerTooltipOpen(nextOpen);
+          }
+        }}
+      >
         <Tooltip.Trigger asChild>
           <LabelledIconButton {...props} ref={forwardedRef} />
         </Tooltip.Trigger>
@@ -40,12 +54,16 @@ const IconOnlyButton = forwardRef<HTMLButtonElement, IconButtonProps>(
 );
 
 const LabelledIconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
-  ({ icon, size, iconOnly, label, classNames, iconClassNames, ...props }, forwardedRef) => {
+  (
+    { icon, size, iconOnly, label, classNames, iconClassNames, caretDown, suppressNextTooltip, ...props },
+    forwardedRef,
+  ) => {
     const { tx } = useThemeContext();
     return (
       <Button {...props} classNames={tx('iconButton.root', 'iconButton', {}, classNames)} ref={forwardedRef}>
         <Icon icon={icon} size={size} classNames={iconClassNames} />
         <span className={iconOnly ? 'sr-only' : undefined}>{label}</span>
+        {caretDown && <Icon size={3} icon='ph--caret-down--bold' />}
       </Button>
     );
   },

package/src/components/Clipboard/CopyButton.tsx

@@ -53,7 +53,7 @@ export const CopyButtonIconOnly = ({ value, classNames, iconProps, variant, ...p
   return (
     <Tooltip.Root delayDuration={1500} open={open} onOpenChange={setOpen}>
       <Tooltip.Portal>
-        <Tooltip.Content side='bottom' sideOffset={12} classNames='z-30'>
+        <Tooltip.Content side='bottom' sideOffset={12}>
           <span>{label}</span>
           <Tooltip.Arrow />
         </Tooltip.Content>

package/src/components/Dialogs/AlertDialog.tsx

@@ -31,7 +31,11 @@ import { ElevationProvider } from '../ElevationProvider';
 
 type AlertDialogRootProps = AlertDialogRootPrimitiveProps;
 
-const AlertDialogRoot: FunctionComponent<AlertDialogRootProps> = AlertDialogRootPrimitive;
+const AlertDialogRoot: FunctionComponent<AlertDialogRootProps> = (props) => (
+  <ElevationProvider elevation='dialog'>
+    <AlertDialogRootPrimitive {...props} />
+  </ElevationProvider>
+);
 
 type AlertDialogTriggerProps = AlertDialogTriggerPrimitiveProps;
 
@@ -134,7 +138,7 @@ const AlertDialogContent: ForwardRefExoticComponent<AlertDialogContentProps> = f
       className={tx('dialog.content', 'dialog--alert', { inOverlayLayout }, classNames)}
       ref={forwardedRef}
     >
-      <ElevationProvider elevation='chrome'>{children}</ElevationProvider>
+      {children}
     </AlertDialogContentPrimitive>
   );
 });

package/src/components/Dialogs/Dialog.tsx

@@ -29,7 +29,11 @@ import { ElevationProvider } from '../ElevationProvider';
 
 type DialogRootProps = DialogRootPrimitiveProps;
 
-const DialogRoot: FunctionComponent<DialogRootProps> = DialogRootPrimitive;
+const DialogRoot: FunctionComponent<DialogRootProps> = (props) => (
+  <ElevationProvider elevation='dialog'>
+    <DialogRootPrimitive {...props} />
+  </ElevationProvider>
+);
 
 type DialogTriggerProps = DialogTriggerPrimitiveProps;
 
@@ -90,15 +94,7 @@ const DialogOverlay: ForwardRefExoticComponent<DialogOverlayProps> = forwardRef<
     return (
       <DialogOverlayPrimitive
         {...props}
-        className={tx(
-          'dialog.overlay',
-          'dialog__overlay',
-          {},
-          classNames,
-          'data-[block-align=start]:justify-center',
-          'data-[block-align=start]:items-start',
-          'data-[block-align=center]:place-content-center',
-        )}
+        className={tx('dialog.overlay', 'dialog__overlay', {}, classNames)}
         ref={forwardedRef}
         data-block-align={blockAlign}
       >
@@ -123,7 +119,7 @@ const DialogContent: ForwardRefExoticComponent<DialogContentProps> = forwardRef<
         className={tx('dialog.content', 'dialog', { inOverlayLayout }, classNames)}
         ref={forwardedRef}
       >
-        <ElevationProvider elevation='chrome'>{children}</ElevationProvider>
+        {children}
       </DialogContentPrimitive>
     );
   },

package/src/components/Input/Input.stories.tsx

@@ -6,7 +6,7 @@ import '@dxos-theme';
 
 import React from 'react';
 
-import { baseSurface, modalSurface, groupSurface, mx, surfaceElevation } from '@dxos/react-ui-theme';
+import { baseSurface, modalSurface, groupSurface, mx, surfaceShadow } from '@dxos/react-ui-theme';
 import { type MessageValence } from '@dxos/react-ui-types';
 
 import { Input } from './Input';
@@ -61,10 +61,10 @@ const StoryInput = (props: StoryInputProps) => {
       <div className={mx(baseSurface, 'p-4')}>
         <StoryInputContent {...props} />
       </div>
-      <div className={mx(groupSurface, 'p-4 rounded-lg', surfaceElevation({ elevation: 'group' }))}>
+      <div className={mx(groupSurface, 'p-4 rounded-lg', surfaceShadow({ elevation: 'positioned' }))}>
         <StoryInputContent {...props} />
       </div>
-      <div className={mx(modalSurface, 'p-4 rounded-lg', surfaceElevation({ elevation: 'chrome' }))}>
+      <div className={mx(modalSurface, 'p-4 rounded-lg', surfaceShadow({ elevation: 'dialog' }))}>
         <StoryInputContent {...props} />
       </div>
     </div>
@@ -214,8 +214,6 @@ export const Switch = {
   args: {
     label: 'This is a switch',
     type: 'switch',
-    description: 'It’s checked, indeterminate, or unchecked',
-    size: 5,
-    weight: 'bold',
+    description: 'It’s either off... or on.',
   },
 };

package/src/components/Input/Input.tsx

@@ -2,19 +2,10 @@
 // Copyright 2023 DXOS.org
 //
 
-import { Check, type IconWeight, Minus } from '@phosphor-icons/react';
-import {
-  Root as CheckboxPrimitive,
-  type CheckboxProps as CheckboxPrimitiveProps,
-  Indicator as CheckboxIndicatorPrimitive,
-} from '@radix-ui/react-checkbox';
-import {
-  Root as SwitchPrimitive,
-  Thumb as SwitchThumbPrimitive,
-  type SwitchProps as SwitchPrimitiveProps,
-} from '@radix-ui/react-switch';
+import { type IconWeight } from '@phosphor-icons/react';
+import { Root as CheckboxPrimitive, type CheckboxProps as CheckboxPrimitiveProps } from '@radix-ui/react-checkbox';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
-import React, { forwardRef, type ForwardRefExoticComponent, Fragment, useCallback } from 'react';
+import React, { type ComponentPropsWithRef, forwardRef, type ForwardRefExoticComponent, useCallback } from 'react';
 
 import {
   InputRoot,
@@ -41,6 +32,7 @@ import { type Density, type Elevation, type ClassNameValue, type Size } from '@d
 
 import { useDensityContext, useElevationContext, useThemeContext } from '../../hooks';
 import { type ThemedClassName } from '../../util';
+import { Icon } from '../Icon';
 
 type InputVariant = 'default' | 'subdued';
 
@@ -262,7 +254,7 @@ const Checkbox: ForwardRefExoticComponent<CheckboxProps> = forwardRef<
     });
     const { id, validationValence, descriptionId, errorMessageId } = useInputContext(INPUT_NAME, __inputScope);
     const { tx } = useThemeContext();
-    const Icon = checked === 'indeterminate' ? Minus : checked ? Check : Fragment;
+
     return (
       <CheckboxPrimitive
         {...{
@@ -279,63 +271,56 @@ const Checkbox: ForwardRefExoticComponent<CheckboxProps> = forwardRef<
         }}
         ref={forwardedRef}
       >
-        <CheckboxIndicatorPrimitive asChild>
-          <Icon
-            {...(checked && {
-              weight,
-              className: tx('input.checkboxIndicator', 'input--checkbox__indicator', { size }),
-            })}
-          />
-        </CheckboxIndicatorPrimitive>
+        <Icon
+          icon={checked === 'indeterminate' ? 'ph--minus--regular' : 'ph--check--regular'}
+          classNames={tx('input.checkboxIndicator', 'input--checkbox__indicator', { size, checked })}
+        />
       </CheckboxPrimitive>
     );
   },
 );
 
-type SwitchProps = ThemedClassName<Omit<SwitchPrimitiveProps, 'children'>> & { size?: Size };
+type SwitchProps = ThemedClassName<
+  Omit<ComponentPropsWithRef<'input'>, 'children' | 'onChange'> & { onCheckedChange?: (checked: boolean) => void }
+>;
 
-const Switch: ForwardRefExoticComponent<SwitchProps> = forwardRef<HTMLButtonElement, InputScopedProps<SwitchProps>>(
+const Switch = forwardRef<HTMLInputElement, InputScopedProps<SwitchProps>>(
   (
     {
       __inputScope,
       checked: propsChecked,
       defaultChecked: propsDefaultChecked,
       onCheckedChange: propsOnCheckedChange,
-      size = 5,
       classNames,
       ...props
     },
     forwardedRef,
   ) => {
-    const { tx } = useThemeContext();
-
     const [checked, onCheckedChange] = useControllableState({
       prop: propsChecked,
-      defaultProp: propsDefaultChecked,
+      defaultProp: propsDefaultChecked ?? false,
       onChange: propsOnCheckedChange,
     });
 
     const { id, validationValence, descriptionId, errorMessageId } = useInputContext(INPUT_NAME, __inputScope);
+
     return (
-      <SwitchPrimitive
-        {...{
-          ...props,
-          checked,
-          onCheckedChange,
-          id,
-          'aria-describedby': descriptionId,
-          ...(validationValence === 'error' && {
-            'aria-invalid': 'true' as const,
-            'aria-errormessage': errorMessageId,
-          }),
-          className: tx('input.switch', 'input--switch', { size }, classNames),
+      <input
+        type='checkbox'
+        className='dx-checkbox--switch dx-focus-ring'
+        checked={checked}
+        onChange={(event) => {
+          onCheckedChange(event.target.checked);
         }}
+        id={id}
+        aria-describedby={descriptionId}
+        {...props}
+        {...(validationValence === 'error' && {
+          'aria-invalid': 'true' as const,
+          'aria-errormessage': errorMessageId,
+        })}
         ref={forwardedRef}
-      >
-        {/* TODO(wittjosiah): Embed icons/text for on/off states.
-             e.g., https://codepen.io/alvarotrigo/pen/oNoJePo (#13) */}
-        <SwitchThumbPrimitive className={tx('input.switchThumb', 'input--switch__thumb', { size })} />
-      </SwitchPrimitive>
+      />
     );
   },
 );

package/src/components/Lists/List.stories.tsx

@@ -17,7 +17,7 @@ import {
   ghostSelected,
   ghostSelectedTrackingInterFromNormal,
   mx,
-  surfaceElevation,
+  surfaceShadow,
 } from '@dxos/react-ui-theme';
 
 import { List, ListItem, type ListScopedProps } from './List';
@@ -124,7 +124,7 @@ export const ManySizesDraggable = {
           <p
             className={mx(
               index % 3 === 0 ? 'bs-20' : index % 2 === 0 ? 'bs-12' : 'bs-8',
-              surfaceElevation({ elevation: 'group' }),
+              surfaceShadow({ elevation: 'positioned' }),
               'mbe-2 p-2 bg-white dark:bg-neutral-800 rounded',
             )}
           >{`List item ${index + 1}`}</p>

package/src/components/Lists/List.tsx

@@ -26,6 +26,7 @@ import {
 } from '@dxos/react-list';
 import { type Density } from '@dxos/react-ui-types';
 
+import { ListDropIndicator } from './ListDropIndicator';
 import { useDensityContext, useThemeContext } from '../../hooks';
 import { type ThemedClassName } from '../../util';
 import { DensityProvider } from '../DensityProvider';
@@ -150,6 +151,7 @@ export const ListItem: {
   OpenTrigger: ForwardRefExoticComponent<ListItemOpenTriggerProps>;
   CollapsibleContent: ForwardRefExoticComponent<ListItemCollapsibleContentProps>;
   MockOpenTrigger: FC<ThemedClassName<Omit<ComponentPropsWithoutRef<'div'>, 'children'>>>;
+  DropIndicator: typeof ListDropIndicator;
 } = {
   Root: ListItemRoot,
   Endcap: ListItemEndcap,
@@ -157,6 +159,7 @@ export const ListItem: {
   OpenTrigger: ListItemOpenTrigger,
   CollapsibleContent: ListItemCollapsibleContent,
   MockOpenTrigger: MockListItemOpenTrigger,
+  DropIndicator: ListDropIndicator,
 };
 
 export { List, useListContext, useListItemContext, LIST_NAME, LIST_ITEM_NAME };

package/src/components/Lists/ListDropIndicator.tsx

@@ -0,0 +1,70 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type Edge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/types';
+import React, { type CSSProperties, type HTMLAttributes } from 'react';
+
+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-[calc(var(--line-inset)+var(--terminal-radius))] right-[--line-inset] before:left-[--terminal-inset]',
+  vertical:
+    'w-[--line-thickness] top-[calc(var(--line-inset)+var(--terminal-radius))] bottom-[--line-inset] before:top-[--terminal-inset]',
+};
+
+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;
+  terminalInset?: number;
+  lineInset?: number;
+};
+
+/**
+ * This is a tailwind port of `@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box`
+ */
+export const ListDropIndicator = ({
+  edge,
+  gap = 0,
+  lineInset = 0,
+  terminalInset = lineInset - terminalSize,
+}: DropIndicatorProps) => {
+  const orientation = edgeToOrientationMap[edge];
+
+  return (
+    <div
+      role='none'
+      style={
+        {
+          '--line-thickness': `${strokeSize}px`,
+          '--line-offset': `calc(-0.5 * (${gap}px + ${strokeSize}px))`,
+          '--line-inset': `${lineInset}px`,
+          '--terminal-size': `${terminalSize}px`,
+          '--terminal-radius': `${terminalSize / 2}px`,
+          '--terminal-inset': `${terminalInset}px`,
+          '--offset-terminal': `${offsetToAlignTerminalWithLine}px`,
+        } as CSSProperties
+      }
+      className={`absolute z-10 pointer-events-none bg-accentSurface before:content-[''] before:w-[--terminal-size] before:h-[--terminal-size] box-border before:absolute before:border-[length:--line-thickness] before:border-solid before:border-accentSurface before:rounded-full ${orientationStyles[orientation]} ${edgeStyles[edge]}`}
+    />
+  );
+};

package/src/components/Lists/Tree.tsx

@@ -16,6 +16,7 @@ import {
   LIST_ITEM_NAME,
   useListItemContext,
 } from './List';
+import { TreeDropIndicator } from './TreeDropIndicator';
 import { type ThemedClassName } from '../../util';
 
 type TreeRootProps = ListProps;
@@ -60,12 +61,14 @@ export const TreeItem: {
   Body: ForwardRefExoticComponent<TreeItemBodyProps>;
   OpenTrigger: ForwardRefExoticComponent<TreeItemOpenTriggerProps>;
   MockOpenTrigger: FC<ThemedClassName<Omit<ComponentPropsWithoutRef<'div'>, 'children'>>>;
+  DropIndicator: typeof TreeDropIndicator;
 } = {
   Root: TreeItemRoot,
   Heading: TreeItemHeading,
   Body: TreeItemBody,
   OpenTrigger: TreeItemOpenTrigger,
   MockOpenTrigger: MockTreeItemOpenTrigger,
+  DropIndicator: TreeDropIndicator,
 };
 
 export type { TreeRootProps, TreeItemProps, TreeItemHeadingProps, TreeItemBodyProps, TreeItemOpenTriggerProps };