@react-spectrum/s2 1.3.1 → 1.5.0

package/src/DragPreview.tsx

@@ -0,0 +1,193 @@
+/*
+ * Copyright 2026 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {baseColor, fontRelative, style} from '../style' with {type: 'macro'};
+import {centerBaseline} from './CenterBaseline';
+import {controlFont} from './style-utils' with {type: 'macro'};
+import {DEFAULT_SLOT, Provider} from 'react-aria-components/slots';
+import {DragItem} from '@react-types/shared';
+import {IconContext} from './Icon';
+import {ReactNode} from 'react';
+import {Text, TextContext} from './Content';
+import {useScale} from './utils';
+
+export let label = style({
+  gridArea: 'label',
+  alignSelf: 'center',
+  font: controlFont(),
+  color: 'inherit',
+  truncate: true,
+  whiteSpace: {
+    default: 'nowrap',
+    overflowMode: {
+      wrap: 'normal'
+    }
+  }
+});
+
+export let description = style({
+  gridArea: 'description',
+  alignSelf: 'center',
+  truncate: true,
+  whiteSpace: {
+    default: 'nowrap',
+    overflowMode: {
+      wrap: 'normal'
+    }
+  },
+  font: 'ui-sm',
+  color: {
+    default: baseColor('neutral-subdued'),
+    isDisabled: 'disabled',
+    forcedColors: 'inherit'
+  },
+  transition: 'default'
+});
+
+export let iconCenterWrapper = style({
+  display: 'flex',
+  gridArea: 'icon',
+  gridRowEnd: 'span 2',
+  alignSelf: 'center',
+  alignItems: 'center'
+});
+
+export let icon = style({
+  display: 'block',
+  size: fontRelative(20),
+  marginEnd: 'text-to-visual',
+  '--iconPrimary': {
+    type: 'fill',
+    value: 'currentColor'
+  }
+});
+
+export let dragPreviewWrapper = style({
+  position: 'relative'
+});
+
+export let dragPreviewCardBack = style({
+  position: 'absolute',
+  zIndex: -1,
+  top: 4,
+  left: 4,
+  width: 200,
+  height: 'full',
+  borderRadius: 'default',
+  borderWidth: 1,
+  borderStyle: 'solid',
+  borderColor: 'blue-900',
+  backgroundColor: 'gray-25'
+});
+
+export let dragPreviewCard = style<{scale?: 'medium' | 'large'}>({
+  boxSizing: 'border-box',
+  paddingX: 0,
+  paddingY: 8,
+  backgroundColor: 'gray-25',
+  color: baseColor('neutral'),
+  position: 'relative',
+  display: 'grid',
+  gridTemplateAreas: ['. icon label       . badge .', '. .    description . badge .'],
+  gridTemplateColumns: [12, 'auto', 'minmax(0, 1fr)', 4, 'auto', 6],
+  gridTemplateRows: '1fr auto',
+  alignItems: 'baseline',
+  minHeight: {
+    default: 40,
+    scale: {
+      large: 50
+    }
+  },
+  width: 200,
+  borderRadius: 'default',
+  borderWidth: 1,
+  borderStyle: 'solid',
+  borderColor: 'blue-900'
+});
+
+export let dragPreviewBadge = style({
+  gridArea: 'badge',
+  alignSelf: 'center',
+  paddingX: 8,
+  paddingY: 2,
+  borderRadius: 'sm',
+  backgroundColor: {
+    default: 'blue-900',
+    forcedColors: 'Highlight'
+  },
+  font: 'ui-sm',
+  fontWeight: 'bold',
+  color: {
+    default: 'white',
+    forcedColors: 'HighlightText'
+  },
+  forcedColorAdjust: 'none'
+});
+
+export interface DragPreviewProps {
+  /** The currently dragged items, sourced from renderDragPreview. */
+  items: DragItem[];
+  /** The overflow mode to be applied on the drag preview. */
+  overflowMode?: 'wrap' | 'truncate';
+  /**
+   * The contents of the drag preview. Supports the `label`, `description`, and `icon` slots.
+   * If no children are provided, defaults to the first drag item's plain text content.
+   */
+  children?: ReactNode;
+}
+
+/**
+ * The default drag preview rendered by the collection element during drag and drop. Pass this to
+ * your drag hooks' `renderDragPreview` to match the default visual. To customize the drag preview's
+ * contents, use Text with the "label" and "description" slots and/or a Icon for the leading icon.
+ */
+export function DragPreview(props: DragPreviewProps) {
+  let {items, overflowMode} = props;
+  let isDraggingMultiple = items.length > 1;
+  let itemLabel = items[0]?.['text/plain'] ?? '';
+  let scale = useScale();
+
+  return (
+    <div className={dragPreviewWrapper}>
+      {isDraggingMultiple && <div className={dragPreviewCardBack} />}
+      <div className={dragPreviewCard({scale})}>
+        <Provider
+          values={[
+            [
+              TextContext,
+              {
+                slots: {
+                  [DEFAULT_SLOT]: {styles: label({overflowMode})},
+                  label: {styles: label({overflowMode})},
+                  description: {styles: description({overflowMode})}
+                }
+              }
+            ],
+            [
+              IconContext,
+              {
+                slots: {
+                  icon: {
+                    render: centerBaseline({slot: 'icon', styles: iconCenterWrapper}),
+                    styles: icon
+                  }
+                }
+              }
+            ]
+          ]}>
+          {props.children ?? <Text>{itemLabel}</Text>}
+          {isDraggingMultiple && <div className={dragPreviewBadge}>{items.length}</div>}
+        </Provider>
+      </div>
+    </div>
+  );
+}

package/src/DropZone.tsx

@@ -20,61 +20,85 @@ import {
   DropZone as RACDropZone,
   DropZoneProps as RACDropZoneProps
 } from 'react-aria-components/DropZone';
-import {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};
+import {
+  getAllowedOverrides,
+  StylesPropWithHeight,
+  UnsafeStyles
+} from './style-utils' with {type: 'macro'};
 import {IllustratedMessageContext} from './IllustratedMessage';
-// @ts-ignore
 import intlMessages from '../intl/*.json';
 import {style} from '../style' with {type: 'macro'};
 import {useDOMRef} from './useDOMRef';
 import {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
-export interface DropZoneProps extends Omit<RACDropZoneProps, 'className' | 'style' | 'render' | 'children' | 'isDisabled' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange' | keyof GlobalDOMAttributes>, UnsafeStyles, DOMProps {
+export interface DropZoneProps
+  extends
+    Omit<
+      RACDropZoneProps,
+      | 'className'
+      | 'style'
+      | 'render'
+      | 'children'
+      | 'isDisabled'
+      | 'onHover'
+      | 'onHoverStart'
+      | 'onHoverEnd'
+      | 'onHoverChange'
+      | keyof GlobalDOMAttributes
+    >,
+    UnsafeStyles,
+    DOMProps {
   /** Spectrum-defined styles, returned by the `style()` macro. */
-  styles?: StylesPropWithHeight,
+  styles?: StylesPropWithHeight;
   /** The content to display in the drop zone. */
-  children: ReactNode,
+  children: ReactNode;
   /** Whether the drop zone has been filled. */
-  isFilled?: boolean,
+  isFilled?: boolean;
   /**
    * The message to replace the default banner message that is shown when the drop zone is filled.
+   *
    * @default 'Drop file to replace'
    */
-  replaceMessage?: string,
+  replaceMessage?: string;
   /**
    * The size of the DropZone.
    *
    * @default 'M'
    */
-  size?: 'S' | 'M' | 'L'
+  size?: 'S' | 'M' | 'L';
 }
 
-export const DropZoneContext = createContext<ContextValue<Partial<DropZoneProps>, DOMRefValue<HTMLDivElement>>>(null);
+export const DropZoneContext =
+  createContext<ContextValue<Partial<DropZoneProps>, DOMRefValue<HTMLDivElement>>>(null);
 
-const dropzone = style<DropZoneRenderProps>({
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-  position: 'relative',
-  fontFamily: 'sans',
-  color: 'gray-900',
-  borderStyle: {
-    default: 'dashed',
-    isDropTarget: 'solid'
-  },
-  backgroundColor: {
-    isDropTarget: 'blue-200'
-  },
-  borderWidth: 2,
-  borderColor: {
-    default: 'gray-300',
-    isDropTarget: 'blue-800',
-    isFocusVisible: 'blue-800'
+const dropzone = style<DropZoneRenderProps>(
+  {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    position: 'relative',
+    fontFamily: 'sans',
+    color: 'gray-900',
+    borderStyle: {
+      default: 'dashed',
+      isDropTarget: 'solid'
+    },
+    backgroundColor: {
+      isDropTarget: 'blue-200'
+    },
+    borderWidth: 2,
+    borderColor: {
+      default: 'gray-300',
+      isDropTarget: 'blue-800',
+      isFocusVisible: 'blue-800'
+    },
+    borderRadius: 'lg',
+    padding: 24,
+    boxSizing: 'border-box'
   },
-  borderRadius: 'lg',
-  padding: 24,
-  boxSizing: 'border-box'
-}, getAllowedOverrides({height: true}));
+  getAllowedOverrides({height: true})
+);
 
 const banner = style({
   position: 'absolute',
@@ -103,12 +127,13 @@ const banner = style({
 /**
  * A drop zone is an area into which one or multiple objects can be dragged and dropped.
  */
-export const DropZone = /*#__PURE__*/ forwardRef(function DropZone(props: DropZoneProps, ref: DOMRef<HTMLDivElement>) {
+export const DropZone = /*#__PURE__*/ forwardRef(function DropZone(
+  props: DropZoneProps,
+  ref: DOMRef<HTMLDivElement>
+) {
   let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');
   [props, ref] = useSpectrumContextProps(props, ref, DropZoneContext);
-  let {
-    size = 'M'
-  } = props;
+  let {size = 'M'} = props;
   let domRef = useDOMRef(ref);
 
   return (
@@ -116,19 +141,24 @@ export const DropZone = /*#__PURE__*/ forwardRef(function DropZone(props: DropZo
       {...props}
       ref={domRef}
       style={props.UNSAFE_style}
-      className={renderProps => (props.UNSAFE_className || '') + dropzone(renderProps, props.styles)}>
+      className={renderProps =>
+        (props.UNSAFE_className || '') + dropzone(renderProps, props.styles)
+      }>
       {renderProps => (
         <>
-          <IllustratedMessageContext.Provider value={{isInDropZone: true, isDropTarget: renderProps.isDropTarget, size}}>
+          <IllustratedMessageContext.Provider
+            value={{isInDropZone: true, isDropTarget: renderProps.isDropTarget, size}}>
             {props.children}
           </IllustratedMessageContext.Provider>
-          {(renderProps.isDropTarget && props.isFilled) &&
+          {renderProps.isDropTarget && props.isFilled && (
             <div className={banner({size})}>
               <span>
-                {props.replaceMessage ? props.replaceMessage : stringFormatter.format('dropzone.replaceMessage')}
+                {props.replaceMessage
+                  ? props.replaceMessage
+                  : stringFormatter.format('dropzone.replaceMessage')}
               </span>
             </div>
-          }
+          )}
         </>
       )}
     </RACDropZone>