@react-types/shared 3.14.1 → 3.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-types/shared",
-  "version": "3.14.1",
+  "version": "3.16.0",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "types": "src/index.d.ts",
@@ -14,5 +14,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b03ef51e6317547dd0a840f151e59d039b1e1fd3"
+  "gitHead": "2954307ddbefe149241685440c81f80ece6b2c83"
 }

package/src/dna.d.ts

@@ -32,7 +32,9 @@ export type DimensionValue =
   | 'size-200'
   | 'size-225'
   | 'size-250'
+  | 'size-275'
   | 'size-300'
+  | 'size-325'
   | 'size-350'
   | 'size-400'
   | 'size-450'
@@ -235,13 +237,211 @@ export type ColorValue =
   | 'static-seafoam-500'
   | 'static-seafoam-600'
   | 'static-seafoam-700'
+  | SemanticColorValue;
+
+export type ColorValueV6 =
+  | 'gray-50'
+  | 'gray-75'
+  | 'gray-100'
+  | 'gray-200'
+  | 'gray-300'
+  | 'gray-400'
+  | 'gray-500'
+  | 'gray-600'
+  | 'gray-700'
+  | 'gray-800'
+  | 'gray-900'
+  | 'red-100'
+  | 'red-200'
+  | 'red-300'
+  | 'red-400'
+  | 'red-500'
+  | 'red-600'
+  | 'red-700'
+  | 'red-800'
+  | 'red-900'
+  | 'red-1000'
+  | 'red-1100'
+  | 'red-1200'
+  | 'red-1300'
+  | 'red-1400'
+  | 'orange-100'
+  | 'orange-200'
+  | 'orange-300'
+  | 'orange-400'
+  | 'orange-500'
+  | 'orange-600'
+  | 'orange-700'
+  | 'orange-800'
+  | 'orange-900'
+  | 'orange-1000'
+  | 'orange-1100'
+  | 'orange-1200'
+  | 'orange-1300'
+  | 'orange-1400'
+  | 'yellow-100'
+  | 'yellow-200'
+  | 'yellow-300'
+  | 'yellow-400'
+  | 'yellow-500'
+  | 'yellow-600'
+  | 'yellow-700'
+  | 'yellow-800'
+  | 'yellow-900'
+  | 'yellow-1000'
+  | 'yellow-1100'
+  | 'yellow-1200'
+  | 'yellow-1300'
+  | 'yellow-1400'
+  | 'chartreuse-100'
+  | 'chartreuse-200'
+  | 'chartreuse-300'
+  | 'chartreuse-400'
+  | 'chartreuse-500'
+  | 'chartreuse-600'
+  | 'chartreuse-700'
+  | 'chartreuse-800'
+  | 'chartreuse-900'
+  | 'chartreuse-1000'
+  | 'chartreuse-1100'
+  | 'chartreuse-1200'
+  | 'chartreuse-1300'
+  | 'chartreuse-1400'
+  | 'celery-100'
+  | 'celery-200'
+  | 'celery-300'
+  | 'celery-400'
+  | 'celery-500'
+  | 'celery-600'
+  | 'celery-700'
+  | 'celery-800'
+  | 'celery-900'
+  | 'celery-1000'
+  | 'celery-1100'
+  | 'celery-1200'
+  | 'celery-1300'
+  | 'celery-1400'
+  | 'green-100'
+  | 'green-200'
+  | 'green-300'
+  | 'green-400'
+  | 'green-500'
+  | 'green-600'
+  | 'green-700'
+  | 'green-800'
+  | 'green-900'
+  | 'green-1000'
+  | 'green-1100'
+  | 'green-1200'
+  | 'green-1300'
+  | 'green-1400'
+  | 'seafoam-100'
+  | 'seafoam-200'
+  | 'seafoam-300'
+  | 'seafoam-400'
+  | 'seafoam-500'
+  | 'seafoam-600'
+  | 'seafoam-700'
+  | 'seafoam-800'
+  | 'seafoam-900'
+  | 'seafoam-1000'
+  | 'seafoam-1100'
+  | 'seafoam-1200'
+  | 'seafoam-1300'
+  | 'seafoam-1400'
+  | 'cyan-100'
+  | 'cyan-200'
+  | 'cyan-300'
+  | 'cyan-400'
+  | 'cyan-500'
+  | 'cyan-600'
+  | 'cyan-700'
+  | 'cyan-800'
+  | 'cyan-900'
+  | 'cyan-1000'
+  | 'cyan-1100'
+  | 'cyan-1200'
+  | 'cyan-1300'
+  | 'cyan-1400'
+  | 'blue-100'
+  | 'blue-200'
+  | 'blue-300'
+  | 'blue-400'
+  | 'blue-500'
+  | 'blue-600'
+  | 'blue-700'
+  | 'blue-800'
+  | 'blue-900'
+  | 'blue-1000'
+  | 'blue-1100'
+  | 'blue-1200'
+  | 'blue-1300'
+  | 'blue-1400'
+  | 'indigo-100'
+  | 'indigo-200'
+  | 'indigo-300'
+  | 'indigo-400'
+  | 'indigo-500'
+  | 'indigo-600'
+  | 'indigo-700'
+  | 'indigo-800'
+  | 'indigo-900'
+  | 'indigo-1000'
+  | 'indigo-1100'
+  | 'indigo-1200'
+  | 'indigo-1300'
+  | 'indigo-1400'
+  | 'purple-100'
+  | 'purple-200'
+  | 'purple-300'
+  | 'purple-400'
+  | 'purple-500'
+  | 'purple-600'
+  | 'purple-700'
+  | 'purple-800'
+  | 'purple-900'
+  | 'purple-1000'
+  | 'purple-1100'
+  | 'purple-1200'
+  | 'purple-1300'
+  | 'purple-1400'
+  | 'fuchsia-100'
+  | 'fuchsia-200'
+  | 'fuchsia-300'
+  | 'fuchsia-400'
+  | 'fuchsia-500'
+  | 'fuchsia-600'
+  | 'fuchsia-700'
+  | 'fuchsia-800'
+  | 'fuchsia-900'
+  | 'fuchsia-1000'
+  | 'fuchsia-1100'
+  | 'fuchsia-1200'
+  | 'fuchsia-1300'
+  | 'fuchsia-1400'
+  | 'magenta-100'
+  | 'magenta-200'
+  | 'magenta-300'
+  | 'magenta-400'
+  | 'magenta-500'
+  | 'magenta-600'
+  | 'magenta-700'
+  | 'magenta-800'
+  | 'magenta-900'
+  | 'magenta-1000'
+  | 'magenta-1100'
+  | 'magenta-1200'
+  | 'magenta-1300'
+  | 'magenta-1400'
+  | SemanticColorValue;
+
+type SemanticColorValue =
   | 'negative'
   | 'notice'
   | 'positive'
   | 'informative';
 
-export type BorderColorValue =
-  | 'default'
+type BorderColorAlias =
   | 'negative'
   | 'notice'
   | 'positive'
@@ -257,14 +457,13 @@ export type BorderColorValue =
   | 'dark'
   | 'transparent'
   | 'translucent-dark'
-  | 'translucent-darker'
-  | ColorValue;
+  | 'translucent-darker';
 
-export type BackgroundColorValue =
+type BackgroundColorAlias =
   | 'default'
+  | 'disabled'
   | 'transparent'
-  | 'label-gray'
-  | ColorValue;
+  | 'label-gray';
 
 export type IconColorValue =
   | 'negative'
@@ -284,3 +483,20 @@ export type BorderRadiusValue =
   | 'regular'
   | 'medium'
   | 'large';
+
+export type BorderColorValue =
+  | 'default'
+  | BorderColorAlias
+  | ColorValue;
+
+export type BorderColorValueV6 =
+  | BorderColorAlias
+  | ColorValueV6;
+
+export type BackgroundColorValue =
+  | BackgroundColorAlias
+  | ColorValue;
+
+export type BackgroundColorValueV6 =
+  | BackgroundColorAlias
+  | ColorValueV6;

package/src/dnd.d.ts

@@ -13,8 +13,9 @@
 import {Key, RefObject} from 'react';
 
 export interface DragDropEvent {
-  // Relative to the target element's position
+  /** The x coordinate of the event, relative to the target element. */
   x: number,
+  /** The y coordinate of the event, relative to the target element. */
   y: number
 }
 
@@ -25,97 +26,168 @@ export interface DragItem {
 }
 
 export interface DragStartEvent extends DragDropEvent {
+  /** The event type. */
   type: 'dragstart'
 }
 
 export interface DragMoveEvent extends DragDropEvent {
+  /** The event type. */
   type: 'dragmove'
 }
 
 export interface DragEndEvent extends DragDropEvent {
+  /** The event type. */
   type: 'dragend',
+  /** The drop operation that occurred. */
   dropOperation: DropOperation
 }
 
 export interface DropEnterEvent extends DragDropEvent {
+  /** The event type. */
   type: 'dropenter'
 }
 
 export interface DropMoveEvent extends DragDropEvent {
+  /** The event type. */
   type: 'dropmove'
 }
 
 export interface DropActivateEvent extends DragDropEvent {
+  /** The event type. */
   type: 'dropactivate'
 }
 
 export interface DropExitEvent extends DragDropEvent {
+  /** The event type. */
   type: 'dropexit'
 }
 
-export interface TextItem {
+export interface TextDropItem {
+  /** The item kind. */
   kind: 'text',
+  /**
+   * The drag types available for this item.
+   * These are often mime types, but may be custom app-specific types.
+   */
   types: Set<string>,
+  /** Returns the data for the given type as a string. */
   getText(type: string): Promise<string>
 }
 
-export interface FileItem {
+export interface FileDropItem {
+  /** The item kind. */
   kind: 'file',
+  /** The file type (usually a mime type). */
   type: string,
+  /** The file name. */
   name: string,
+  /** Returns the contents of the file as a blob. */
   getFile(): Promise<File>,
+  /** Returns the contents of the file as a string. */
   getText(): Promise<string>
 }
 
-export interface DirectoryItem {
+export interface DirectoryDropItem {
+  /** The item kind. */
   kind: 'directory',
+  /** The directory name. */
   name: string,
-  getEntries(): AsyncIterable<FileItem | DirectoryItem>
+  /** Returns the entries contained within the directory. */
+  getEntries(): AsyncIterable<FileDropItem | DirectoryDropItem>
 }
 
-export type DropItem = TextItem | FileItem | DirectoryItem;
+export type DropItem = TextDropItem | FileDropItem | DirectoryDropItem;
 
 export interface DropEvent extends DragDropEvent {
+  /** The event type. */
   type: 'drop',
+  /** The drop operation that should occur. */
   dropOperation: DropOperation,
+  /** The dropped items. */
   items: DropItem[]
 }
 
 export type DropPosition = 'on' | 'before' | 'after';
-interface RootDropTarget {
+export interface RootDropTarget {
+  /** The event type. */
   type: 'root'
 }
 
 export interface ItemDropTarget {
+  /** The drop target type. */
   type: 'item',
+  /** The item key. */
   key: Key,
+  /** The drop position relative to the item. */
   dropPosition: DropPosition
 }
 
 export type DropTarget = RootDropTarget | ItemDropTarget;
 
-interface DroppableCollectionEnterEvent extends DropEnterEvent {
+export interface DroppableCollectionEnterEvent extends DropEnterEvent {
+  /** The drop target. */
   target: DropTarget
 }
 
-interface DroppableCollectionMoveEvent extends DropMoveEvent {
+export interface DroppableCollectionMoveEvent extends DropMoveEvent {
+  /** The drop target. */
   target: DropTarget
 }
 
-interface DroppableCollectionActivateEvent extends DropActivateEvent {
+export interface DroppableCollectionActivateEvent extends DropActivateEvent {
+  /** The drop target. */
   target: DropTarget
 }
 
-interface DroppableCollectionExitEvent extends DropExitEvent {
+export interface DroppableCollectionExitEvent extends DropExitEvent {
+  /** The drop target. */
   target: DropTarget
 }
 
-interface DroppableCollectionDropEvent extends DropEvent {
+export interface DroppableCollectionDropEvent extends DropEvent {
+  /** The drop target. */
   target: DropTarget
 }
 
+export interface DroppableCollectionInsertDropEvent {
+  /** The dropped items. */
+  items: DropItem[],
+  /** The drop operation that should occur. */
+  dropOperation: DropOperation,
+   /** The drop target. */
+  target: ItemDropTarget
+}
+
+export interface DroppableCollectionRootDropEvent {
+  /** The dropped items. */
+  items: DropItem[],
+  /** The drop operation that should occur. */
+  dropOperation: DropOperation
+}
+
+export interface DroppableCollectionOnItemDropEvent {
+  /** The dropped items. */
+  items: DropItem[],
+  /** The drop operation that should occur. */
+  dropOperation: DropOperation,
+  /** Whether the drag originated within the same collection as the drop. */
+  isInternal: boolean,
+  /** The drop target. */
+  target: ItemDropTarget
+}
+
+export interface DroppableCollectionReorderEvent {
+  /** The keys of the items that were reordered. */
+  keys: Set<Key>,
+  /** The drop operation that should occur. */
+  dropOperation: DropOperation,
+  /** The drop target. */
+  target: ItemDropTarget
+}
+
 export interface DragTypes {
-  has(type: string): boolean
+  /** Returns whether the drag contains data of the given type. */
+  has(type: string | symbol): boolean
 }
 
 export interface DropTargetDelegate {
@@ -127,34 +199,73 @@ export interface DropTargetDelegate {
   getDropTargetFromPoint(x: number, y: number, isValidDropTarget: (target: DropTarget) => boolean): DropTarget | null
 }
 
-export interface DroppableCollectionProps {
+export interface DroppableCollectionUtilityOptions {
   /**
-   * A function returning the drop operation to be performed when items matching the given types are dropped
-   * on the drop target.
+   * The drag types that the droppable collection accepts. If the collection accepts directories, include `DIRECTORY_DRAG_TYPE` in your array of allowed types.
+   * @default 'all'
+   */
+  acceptedDragTypes?: 'all' | Array<string | symbol>,
+  /**
+   * Handler that is called when external items are dropped "between" items.
+   */
+  onInsert?: (e: DroppableCollectionInsertDropEvent) => void,
+  /**
+   * Handler that is called when external items are dropped on the droppable collection's root.
+   */
+  onRootDrop?: (e: DroppableCollectionRootDropEvent) => void,
+  /**
+   * Handler that is called when items are dropped "on" an item.
+   */
+  onItemDrop?: (e: DroppableCollectionOnItemDropEvent) => void,
+  /**
+   * Handler that is called when items are reordered via drag in the source collection.
    */
-  getDropOperation?: (target: DropTarget, types: DragTypes, allowedOperations: DropOperation[]) => DropOperation,
-  /** Handler that is called when a valid drag enters the drop target. */
+  onReorder?: (e: DroppableCollectionReorderEvent) => void,
+  /**
+   * A function returning whether a given target in the droppable collection is a valid "on" drop target for the current drag types.
+   */
+  shouldAcceptItemDrop?: (target: ItemDropTarget, types: DragTypes) => boolean
+}
+
+export interface DroppableCollectionBaseProps {
+  /** Handler that is called when a valid drag enters a drop target. */
   onDropEnter?: (e: DroppableCollectionEnterEvent) => void,
-  /** Handler that is called when a valid drag is moved within the drop target. */
-  onDropMove?: (e: DroppableCollectionMoveEvent) => void,
-  /** Handler that is called after a valid drag is held over the drop target for a period of time. */
+  /**
+   * Handler that is called after a valid drag is held over a drop target for a period of time.
+   * @private
+   */
   onDropActivate?: (e: DroppableCollectionActivateEvent) => void,
-  /** Handler that is called when a valid drag exits the drop target. */
+  /** Handler that is called when a valid drag exits a drop target. */
   onDropExit?: (e: DroppableCollectionExitEvent) => void,
-  /** Handler that is called when a valid drag is dropped on the drop target. */
-  onDrop?: (e: DroppableCollectionDropEvent) => void
+  /**
+   * Handler that is called when a valid drag is dropped on a drop target. When defined, this overrides other
+   * drop handlers such as `onInsert`, and `onItemDrop`.
+   */
+  onDrop?: (e: DroppableCollectionDropEvent) => void,
+  /**
+   * A function returning the drop operation to be performed when items matching the given types are dropped
+   * on the drop target.
+   */
+  getDropOperation?: (target: DropTarget, types: DragTypes, allowedOperations: DropOperation[]) => DropOperation
 }
 
-interface DraggableCollectionStartEvent extends DragStartEvent {
+export interface DroppableCollectionProps extends DroppableCollectionUtilityOptions, DroppableCollectionBaseProps {}
+
+export interface DraggableCollectionStartEvent extends DragStartEvent {
+  /** The keys of the items that were dragged. */
   keys: Set<Key>
 }
 
-interface DraggableCollectionMoveEvent extends DragMoveEvent {
+export interface DraggableCollectionMoveEvent extends DragMoveEvent {
+  /** The keys of the items that were dragged. */
   keys: Set<Key>
 }
 
-interface DraggableCollectionEndEvent extends DragEndEvent {
-  keys: Set<Key>
+export interface DraggableCollectionEndEvent extends DragEndEvent {
+  /** The keys of the items that were dragged. */
+  keys: Set<Key>,
+  /** Whether the drop ended within the same collection as it originated. */
+  isInternal: boolean
 }
 
 export type DragPreviewRenderer = (items: DragItem[], callback: (node: HTMLElement) => void) => void;
@@ -162,7 +273,7 @@ export type DragPreviewRenderer = (items: DragItem[], callback: (node: HTMLEleme
 export interface DraggableCollectionProps {
   /** Handler that is called when a drag operation is started. */
   onDragStart?: (e: DraggableCollectionStartEvent) => void,
-  /** Handler that is called when the dragged element is moved. */
+  /** Handler that is called when the drag is moved. */
   onDragMove?: (e: DraggableCollectionMoveEvent) => void,
   /** Handler that is called when the drag operation is ended, either as a result of a drop or a cancellation. */
   onDragEnd?: (e: DraggableCollectionEndEvent) => void,

package/src/dom.d.ts

@@ -157,7 +157,7 @@ export interface TextInputDOMProps extends DOMProps, TextInputDOMEvents {
   /**
    * The type of input to render. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdeftype).
    */
-  type?: 'text' | 'search' | 'url' | 'tel' | 'email' | 'password' | string,
+  type?: 'text' | 'search' | 'url' | 'tel' | 'email' | 'password' | (string & {}),
 
   /**
    * Hints at the type of data that might be entered by the user while editing the element or its contents. See [MDN](https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute).

package/src/events.d.ts

@@ -19,7 +19,9 @@ import {
 // Event bubbling can be problematic in real-world applications, so the default for React Spectrum components
 // is not to propagate. This can be overridden by calling continuePropagation() on the event.
 export type BaseEvent<T extends SyntheticEvent> = T & {
-  /** @deprecated Use continuePropagation. */
+  /**
+   * Use continuePropagation.
+   * @deprecated */
   stopPropagation(): void,
   continuePropagation(): void
 }

package/src/labelable.d.ts

@@ -40,5 +40,9 @@ export interface SpectrumLabelableProps extends LabelableProps {
   /**
    * Whether the label is labeling a required field or group.
    */
-  isRequired?: boolean
+  isRequired?: boolean,
+  /**
+   * A ContextualHelp element to place next to the label.
+   */
+  contextualHelp?: ReactNode
 }

package/src/style.d.ts

@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {BackgroundColorValue, BorderColorValue, BorderRadiusValue, BorderSizeValue, DimensionValue} from './dna';
+import {BackgroundColorValue, BackgroundColorValueV6, BorderColorValue, BorderColorValueV6, BorderRadiusValue, BorderSizeValue, DimensionValue} from './dna';
 import {CSSProperties} from 'react';
 
 type ResponsiveProp<T> = {
@@ -112,11 +112,28 @@ export interface StyleProps {
   isHidden?: Responsive<boolean>
 }
 
+export type ColorVersion = 5 | 6;
+type BackgroundColor = {
+  5: BackgroundColorValue,
+  6: BackgroundColorValueV6
+};
+
+type BorderColor = {
+  5: BorderColorValue,
+  6: BorderColorValueV6
+}
+
 // These support more properties than specific Spectrum components
 // but still based on spectrum global/alias variables.
-export interface ViewStyleProps extends StyleProps {
+export interface ViewStyleProps<C extends ColorVersion> extends StyleProps {
+  /**
+   * The Spectrum color token version number.
+   * @default 5
+   */
+  colorVersion?: C,
+
   /** The background color for the element. */
-  backgroundColor?: Responsive<BackgroundColorValue>,
+  backgroundColor?: Responsive<BackgroundColor[C]>,
 
   /** The width of the element's border on all four sides. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-width). */
   borderWidth?: Responsive<BorderSizeValue>,
@@ -136,21 +153,21 @@ export interface ViewStyleProps extends StyleProps {
   borderYWidth?: Responsive<BorderSizeValue>,
 
   /** The color of the element's border on all four sides. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-color). */
-  borderColor?: Responsive<BorderColorValue>,
+  borderColor?: Responsive<BorderColor[C]>,
   /** The color of the border on the logical start side, depending on the layout direction. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-start-color). */
-  borderStartColor?: Responsive<BorderColorValue>,
+  borderStartColor?: Responsive<BorderColor[C]>,
   /** The color of the border on the logical end side, depending on the layout direction. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-end-color). */
-  borderEndColor?: Responsive<BorderColorValue>,
+  borderEndColor?: Responsive<BorderColor[C]>,
   // borderLeftColor?: BorderColorValue,
   // borderRightColor?: BorderColorValue,
   /** The color of the top border. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-color). */
-  borderTopColor?: Responsive<BorderColorValue>,
+  borderTopColor?: Responsive<BorderColor[C]>,
   /** The color of the bottom border. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-color). */
-  borderBottomColor?: Responsive<BorderColorValue>,
+  borderBottomColor?: Responsive<BorderColor[C]>,
   /** The color of the left and right borders. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-color). */
-  borderXColor?: Responsive<BorderColorValue>,
+  borderXColor?: Responsive<BorderColor[C]>,
   /** The color of the top and bottom borders. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-width). */
-  borderYColor?: Responsive<BorderColorValue>,
+  borderYColor?: Responsive<BorderColor[C]>,
 
   /** The border radius on all four sides of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius). */
   borderRadius?: Responsive<BorderRadiusValue>,