@react-types/shared 3.12.0 → 3.14.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-types/shared",
-  "version": "3.12.0",
+  "version": "3.14.0",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "types": "src/index.d.ts",
@@ -9,10 +9,10 @@
     "url": "https://github.com/adobe/react-spectrum"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0-rc.1"
+    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "6a503b715e0dbbf92038cd7f08b1bcdde4c78e82"
+  "gitHead": "cd7c0ec917122c7612f653c22f8ed558f8b66ecd"
 }

package/src/collections.d.ts

@@ -89,31 +89,31 @@ export type SortDirection = 'ascending' | 'descending';
 
 export interface KeyboardDelegate {
   /** Returns the key visually below the given one, or `null` for none. */
-  getKeyBelow?(key: Key): Key,
+  getKeyBelow?(key: Key): Key | null,
 
   /** Returns the key visually above the given one, or `null` for none. */
-  getKeyAbove?(key: Key): Key,
+  getKeyAbove?(key: Key): Key | null,
 
   /** Returns the key visually to the left of the given one, or `null` for none. */
-  getKeyLeftOf?(key: Key): Key,
+  getKeyLeftOf?(key: Key): Key | null,
 
   /** Returns the key visually to the right of the given one, or `null` for none. */
-  getKeyRightOf?(key: Key): Key,
+  getKeyRightOf?(key: Key): Key | null,
 
   /** Returns the key visually one page below the given one, or `null` for none. */
-  getKeyPageBelow?(key: Key): Key,
+  getKeyPageBelow?(key: Key): Key | null,
 
   /** Returns the key visually one page above the given one, or `null` for none. */
-  getKeyPageAbove?(key: Key): Key,
+  getKeyPageAbove?(key: Key): Key | null,
 
   /** Returns the first key, or `null` for none. */
-  getFirstKey?(key?: Key, global?: boolean): Key,
+  getFirstKey?(key?: Key, global?: boolean): Key | null,
 
   /** Returns the last key, or `null` for none. */
-  getLastKey?(key?: Key, global?: boolean): Key,
+  getLastKey?(key?: Key, global?: boolean): Key | null,
 
   /** Returns the next key after `fromKey` that matches the given search string, or `null` for none. */
-  getKeyForSearch?(search: string, fromKey?: Key): Key
+  getKeyForSearch?(search: string, fromKey?: Key): Key | null
 }
 
 /**

package/src/dnd.d.ts

@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {Key} from 'react';
+import {Key, RefObject} from 'react';
 
 export interface DragDropEvent {
   // Relative to the target element's position
@@ -119,11 +119,20 @@ export interface DragTypes {
 }
 
 export interface DroppableCollectionProps {
+  /**
+   * 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,
+  /** Handler that is called when a valid drag element enters the drop target. */
   onDropEnter?: (e: DroppableCollectionEnterEvent) => void,
+  /** Handler that is called when a valid drag element is moved within the drop target. */
   onDropMove?: (e: DroppableCollectionMoveEvent) => void,
+  /** Handler that is called after a valid drag element is held over the drop target for a period of time. */
   onDropActivate?: (e: DroppableCollectionActivateEvent) => void,
+  /** Handler that is called when a valid drag element exits the drop target. */
   onDropExit?: (e: DroppableCollectionExitEvent) => void,
+  /** Handler that is called when a valid drag element is dropped on the drop target. */
   onDrop?: (e: DroppableCollectionDropEvent) => void
 }
 
@@ -139,12 +148,19 @@ interface DraggableCollectionEndEvent extends DragEndEvent {
   keys: Set<Key>
 }
 
+export type DragPreviewRenderer = (items: DragItem[], callback: (node: HTMLElement) => void) => void;
+
 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. */
   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,
+  /** A function that returns the items being dragged. */
   getItems: (keys: Set<Key>) => DragItem[],
-  renderPreview?: (selectedKeys: Set<Key>, draggedKey: Key) => JSX.Element,
-  getAllowedDropOperations?: () => DropOperation[],
-  allowsDraggingItem?: (key: Key) => boolean
+  /** The ref of the element that will be rendered as the drag preview while dragging. */
+  preview?: RefObject<DragPreviewRenderer>,
+  /** Function that returns the drop operations that are allowed for the dragged items. If not provided, all drop operations are allowed. */
+  getAllowedDropOperations?: () => DropOperation[]
 }

package/src/dom.d.ts

@@ -11,9 +11,13 @@
  */
 
 import {
+  AriaAttributes,
+  AriaRole,
   ClipboardEventHandler,
   CompositionEventHandler,
+  CSSProperties,
   FormEventHandler,
+  DOMAttributes as ReactDOMAttributes,
   ReactEventHandler
 } from 'react';
 
@@ -160,3 +164,14 @@ export interface TextInputDOMProps extends DOMProps, TextInputDOMEvents {
    */
   inputMode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search'
 }
+
+/** Any focusable element, including both HTML and SVG elements. */
+export interface FocusableElement extends Element, HTMLOrSVGElement {}
+
+/** All DOM attributes supported across both HTML and SVG elements. */
+export interface DOMAttributes<T = FocusableElement> extends AriaAttributes, ReactDOMAttributes<T> {
+  id?: string | undefined,
+  role?: AriaRole | undefined,
+  tabIndex?: number | undefined,
+  style?: CSSProperties | undefined
+}

package/src/events.d.ts

@@ -34,7 +34,7 @@ export interface PressEvent {
   /** The pointer type that triggered the press event. */
   pointerType: PointerType,
   /** The target element of the press event. */
-  target: HTMLElement,
+  target: Element,
   /** Whether the shift keyboard modifier was held during the press event. */
   shiftKey: boolean,
   /** Whether the ctrl keyboard modifier was held during the press event. */

package/src/selection.d.ts

@@ -47,3 +47,4 @@ export interface SpectrumSelectionProps {
 }
 
 export type FocusStrategy = 'first' | 'last';
+export type DisabledBehavior = 'selection' | 'all';