@react-types/shared - npm Package Compare versions

Comparing version 3.0.0-nightly-09ccc53e7-241107 to 3.0.0-nightly-0a84129f1-260505

package.json

 {
   "name": "@react-types/shared",
-  "version": "3.0.0-nightly-09ccc53e7-241107",
+  "version": "3.0.0-nightly-0a84129f1-260505",
   "description": "Spectrum UI components in React",
@@ -12,3 +12,3 @@ "license": "Apache-2.0",
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
   },
@@ -18,3 +18,5 @@ "publishConfig": {
   },
-  "stableVersion": "3.25.0"
+  "devDependencies": {
+    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+  }
 }

src/collections.d.ts

@@ -32,3 +32,3 @@ /*
 
-export type ItemElement<T> = ReactElement<ItemProps<T>>;
+export type ItemElement<T> = ReactElement<ItemProps<T>> | null;
 export type ItemRenderer<T> = (item: T) => ItemElement<T>;
@@ -55,3 +55,3 @@ export type LoadingState = 'loading' | 'sorting' | 'loadingMore' | 'error' | 'idle' | 'filtering';
 
-export type SectionElement<T> = ReactElement<SectionProps<T>>;
+export type SectionElement<T> = ReactElement<SectionProps<T>> | null;
 
@@ -119,9 +119,9 @@ export type CollectionElement<T> = SectionElement<T> | ItemElement<T>;
   /** Returns the first key, or `null` for none. */
-  getFirstKey?(key?: Key, global?: boolean): Key | null,
+  getFirstKey?(key?: Key | null, global?: boolean): Key | null,
 
   /** Returns the last key, or `null` for none. */
-  getLastKey?(key?: Key, global?: boolean): Key | null,
+  getLastKey?(key?: Key | null, 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 | null
+  getKeyForSearch?(search: string, fromKey?: Key | null): Key | null
 }
@@ -186,3 +186,6 @@
   /** Returns a string representation of the item's contents. */
-  getTextValue?(key: Key): string
+  getTextValue?(key: Key): string,
+
+  /** Filters the collection using the given function. */
+  filter?(filterFn: (nodeValue: string, node: T) => boolean): Collection<T>
 }
@@ -213,3 +216,3 @@
   /** The index of this node within its parent. */
-  index?: number,
+  index: number,
   /** A function that should be called to wrap the rendered node. */
@@ -223,8 +226,12 @@ wrapper?: (element: ReactElement) => ReactElement,
   nextKey?: Key | null,
+  /** The first child key of this node. */
+  firstChildKey?: Key | null,
+  /** The last child key of this node. */
+  lastChildKey?: Key | null,
   /** Additional properties specific to a particular node type. */
   props?: any,
   /** @private */
-  shouldInvalidate?: (context: unknown) => boolean,
+  shouldInvalidate?: (context: any) => boolean,
   /** A function that renders this node to a React Element in the DOM. */
   render?: (node: Node<any>) => ReactElement
 }

src/dnd.d.ts

@@ -221,6 +221,14 @@ /*
   /**
-   * Handler that is called when items are reordered via drag in the source collection.
+   * Handler that is called when items are reordered within the collection.
+   * This handler only allows dropping between items, not on items.
+   * It does not allow moving items to a different parent item within a tree.
    */
   onReorder?: (e: DroppableCollectionReorderEvent) => void,
   /**
+   * Handler that is called when items are moved within the source collection.
+   * This handler allows dropping both on or between items, and items may be
+   * moved to a different parent item within a tree.
+   */
+  onMove?: (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.
@@ -236,3 +244,2 @@ */
    * Handler that is called after a valid drag is held over a drop target for a period of time.
-   * @private
    */
@@ -273,5 +280,5 @@ onDropActivate?: (e: DroppableCollectionActivateEvent) => void,
 
-export type DragPreviewRenderer = (items: DragItem[], callback: (node: HTMLElement | null) => void) => void;
+export type DragPreviewRenderer = (items: DragItem[], callback: (node: HTMLElement | null, x?: number, y?: number) => void) => void;
 
-export interface DraggableCollectionProps {
+export interface DraggableCollectionProps<T = object> {
   /** Handler that is called when a drag operation is started. */
@@ -284,3 +291,3 @@ onDragStart?: (e: DraggableCollectionStartEvent) => void,
   /** A function that returns the items being dragged. */
-  getItems: (keys: Set<Key>) => DragItem[],
+  getItems: (keys: Set<Key>, items: T[]) => DragItem[],
   /** The ref of the element that will be rendered as the drag preview while dragging. */
@@ -287,0 +294,0 @@ preview?: RefObject<DragPreviewRenderer | null>,

src/dom.d.ts

@@ -14,2 +14,3 @@ /*
 import {
+  AnimationEventHandler,
   AriaAttributes,
@@ -20,8 +21,18 @@ AriaRole,
   CSSProperties,
+  FormEvent,
   FormEventHandler,
+  FormHTMLAttributes,
   HTMLAttributeAnchorTarget,
   HTMLAttributeReferrerPolicy,
+  MouseEventHandler,
+  PointerEventHandler,
   DOMAttributes as ReactDOMAttributes,
-  ReactEventHandler
+  ReactEventHandler,
+  RefAttributes,
+  TouchEventHandler,
+  TransitionEventHandler,
+  UIEventHandler,
+  WheelEventHandler
 } from 'react';
+import {ValidationErrors} from './inputs';
 
@@ -78,3 +89,3 @@ export interface AriaLabelingProps {
 
-export interface TextInputDOMEvents {
+export interface TextInputDOMEvents<T = HTMLInputElement> {
   // Clipboard events
@@ -84,3 +95,3 @@ /**
    */
-   onCopy?: ClipboardEventHandler<HTMLInputElement>,
+   onCopy?: ClipboardEventHandler<T>,
 
@@ -90,3 +101,3 @@ /**
     */
-   onCut?: ClipboardEventHandler<HTMLInputElement>,
+   onCut?: ClipboardEventHandler<T>,
 
@@ -96,3 +107,3 @@ /**
     */
-   onPaste?: ClipboardEventHandler<HTMLInputElement>,
+   onPaste?: ClipboardEventHandler<T>,
 
@@ -103,3 +114,3 @@ // Composition events
     */
-   onCompositionStart?: CompositionEventHandler<HTMLInputElement>,
+   onCompositionStart?: CompositionEventHandler<T>,
 
@@ -109,3 +120,3 @@ /**
     */
-   onCompositionEnd?: CompositionEventHandler<HTMLInputElement>,
+   onCompositionEnd?: CompositionEventHandler<T>,
 
@@ -115,3 +126,3 @@ /**
     */
-   onCompositionUpdate?: CompositionEventHandler<HTMLInputElement>,
+   onCompositionUpdate?: CompositionEventHandler<T>,
 
@@ -122,3 +133,3 @@ // Selection events
     */
-   onSelect?: ReactEventHandler<HTMLInputElement>,
+   onSelect?: ReactEventHandler<T>,
 
@@ -129,7 +140,7 @@ // Input events
     */
-   onBeforeInput?: FormEventHandler<HTMLInputElement>,
+   onBeforeInput?: FormEventHandler<T>,
    /**
     * Handler that is called when the input value is modified. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event).
     */
-   onInput?: FormEventHandler<HTMLInputElement>
+   onInput?: FormEventHandler<T>
 }
@@ -141,3 +152,9 @@
    */
-  name?: string
+  name?: string,
+  /**
+   * The `<form>` element to associate the input with.
+   * The value of this attribute must be the id of a `<form>` in the same document.
+   * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#form).
+   */
+  form?: string
 }
@@ -147,3 +164,3 @@
 // Ensure this is synced with useTextField
-export interface TextInputDOMProps extends DOMProps, InputDOMProps, TextInputDOMEvents {
+export interface TextInputDOMProps<T = HTMLInputElement> extends DOMProps, InputDOMProps, TextInputDOMEvents<T> {
   /**
@@ -176,2 +193,3 @@ * Describes the type of autocomplete functionality the input should provide if any. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautocomplete).
    * The type of input to render. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdeftype).
+   * @default 'text'
    */
@@ -183,3 +201,13 @@ type?: 'text' | 'search' | 'url' | 'tel' | 'email' | 'password' | (string & {}),
    */
-  inputMode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search'
+  inputMode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search',
+
+  /**
+   * An attribute that takes as its value a space-separated string that describes what, if any, type of autocomplete functionality the input should provide. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#autocomplete).
+   */
+  autoCorrect?: string,
+
+  /**
+   * An enumerated attribute that defines whether the element may be checked for spelling errors. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/spellcheck).
+   */
+  spellCheck?: string
 }
@@ -228,4 +256,164 @@
 
+export interface DOMAttributesWithRef<T = Element> extends DOMAttributes<T>, RefAttributes<T> {}
+
 export interface GroupDOMAttributes extends Omit<DOMAttributes<HTMLElement>, 'role'> {
   role?: 'group' | 'region' | 'presentation'
 }
+
+/**
+ * Global attributes that can be applied to any DOM element.
+ * @private
+ */
+// NOTE: id is handled elsewhere (DOMProps).
+export interface GlobalDOMAttributes<T = Element> extends GlobalDOMEvents<T> {
+  dir?: string | undefined,
+  lang?: string | undefined,
+  hidden?: boolean | undefined,
+  inert?: boolean | undefined,
+  translate?: 'yes' | 'no' | undefined
+}
+
+/**
+ * Global DOM events that are supported on all DOM elements.
+ * @private
+ */
+// NOTES:
+//   - Drag and drop events are omitted for now.
+//   - Keyboard and focus events are supported directly on focusable elements (FocusableProps).
+//   - Text input events (e.g. onInput, onCompositionStart, onCopy) are
+//     supported only directly on input elements (TextInputDOMProps).
+//     We don't support contentEditable on our components.
+//   - Media events should be handled directly on the <video>/<audio><img> element.
+export interface GlobalDOMEvents<T = Element> {
+  // MouseEvents
+  onClick?: MouseEventHandler<T> | undefined,
+  onClickCapture?: MouseEventHandler<T> | undefined,
+  onAuxClick?: MouseEventHandler<T> | undefined,
+  onAuxClickCapture?: MouseEventHandler<T> | undefined,
+  onContextMenu?: MouseEventHandler<T> | undefined,
+  onContextMenuCapture?: MouseEventHandler<T> | undefined,
+  onDoubleClick?: MouseEventHandler<T> | undefined,
+  onDoubleClickCapture?: MouseEventHandler<T> | undefined,
+  onMouseDown?: MouseEventHandler<T> | undefined,
+  onMouseDownCapture?: MouseEventHandler<T> | undefined,
+  onMouseEnter?: MouseEventHandler<T> | undefined,
+  onMouseLeave?: MouseEventHandler<T> | undefined,
+  onMouseMove?: MouseEventHandler<T> | undefined,
+  onMouseMoveCapture?: MouseEventHandler<T> | undefined,
+  onMouseOut?: MouseEventHandler<T> | undefined,
+  onMouseOutCapture?: MouseEventHandler<T> | undefined,
+  onMouseOver?: MouseEventHandler<T> | undefined,
+  onMouseOverCapture?: MouseEventHandler<T> | undefined,
+  onMouseUp?: MouseEventHandler<T> | undefined,
+  onMouseUpCapture?: MouseEventHandler<T> | undefined,
+
+  // Touch Events
+  onTouchCancel?: TouchEventHandler<T> | undefined,
+  onTouchCancelCapture?: TouchEventHandler<T> | undefined,
+  onTouchEnd?: TouchEventHandler<T> | undefined,
+  onTouchEndCapture?: TouchEventHandler<T> | undefined,
+  onTouchMove?: TouchEventHandler<T> | undefined,
+  onTouchMoveCapture?: TouchEventHandler<T> | undefined,
+  onTouchStart?: TouchEventHandler<T> | undefined,
+  onTouchStartCapture?: TouchEventHandler<T> | undefined,
+
+  // Pointer Events
+  onPointerDown?: PointerEventHandler<T> | undefined,
+  onPointerDownCapture?: PointerEventHandler<T> | undefined,
+  onPointerMove?: PointerEventHandler<T> | undefined,
+  onPointerMoveCapture?: PointerEventHandler<T> | undefined,
+  onPointerUp?: PointerEventHandler<T> | undefined,
+  onPointerUpCapture?: PointerEventHandler<T> | undefined,
+  onPointerCancel?: PointerEventHandler<T> | undefined,
+  onPointerCancelCapture?: PointerEventHandler<T> | undefined,
+  onPointerEnter?: PointerEventHandler<T> | undefined,
+  onPointerLeave?: PointerEventHandler<T> | undefined,
+  onPointerOver?: PointerEventHandler<T> | undefined,
+  onPointerOverCapture?: PointerEventHandler<T> | undefined,
+  onPointerOut?: PointerEventHandler<T> | undefined,
+  onPointerOutCapture?: PointerEventHandler<T> | undefined,
+  onGotPointerCapture?: PointerEventHandler<T> | undefined,
+  onGotPointerCaptureCapture?: PointerEventHandler<T> | undefined,
+  onLostPointerCapture?: PointerEventHandler<T> | undefined,
+  onLostPointerCaptureCapture?: PointerEventHandler<T> | undefined,
+
+  // UI Events
+  onScroll?: UIEventHandler<T> | undefined,
+  onScrollCapture?: UIEventHandler<T> | undefined,
+
+  // Wheel Events
+  onWheel?: WheelEventHandler<T> | undefined,
+  onWheelCapture?: WheelEventHandler<T> | undefined,
+
+  // Animation Events
+  onAnimationStart?: AnimationEventHandler<T> | undefined,
+  onAnimationStartCapture?: AnimationEventHandler<T> | undefined,
+  onAnimationEnd?: AnimationEventHandler<T> | undefined,
+  onAnimationEndCapture?: AnimationEventHandler<T> | undefined,
+  onAnimationIteration?: AnimationEventHandler<T> | undefined,
+  onAnimationIterationCapture?: AnimationEventHandler<T> | undefined,
+
+  // Transition Events
+  onTransitionCancel?: TransitionEventHandler<T> | undefined,
+  onTransitionCancelCapture?: TransitionEventHandler<T> | undefined,
+  onTransitionEnd?: TransitionEventHandler<T> | undefined,
+  onTransitionEndCapture?: TransitionEventHandler<T> | undefined,
+  onTransitionRun?: TransitionEventHandler<T> | undefined,
+  onTransitionRunCapture?: TransitionEventHandler<T> | undefined,
+  onTransitionStart?: TransitionEventHandler<T> | undefined,
+  onTransitionStartCapture?: TransitionEventHandler<T> | undefined
+}
+
+export interface FormProps extends AriaLabelingProps {
+  /**
+   * Validation errors for the form, typically returned by a server.
+   * This should be set to an object mapping from input names to errors.
+   */
+  validationErrors?: ValidationErrors,
+  /**
+   * Where to send the form-data when the form is submitted.
+   * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#action).
+   */
+  action?: string | FormHTMLAttributes<HTMLFormElement>['action'],
+  /**
+   * The enctype attribute specifies how the form-data should be encoded when submitting it to the server.
+   * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#enctype).
+   */
+  encType?: 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain',
+  /**
+   * The HTTP method to submit the form with.
+   * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#method).
+   */
+  method?: 'get' | 'post' | 'dialog',
+  /**
+   * The target attribute specifies a name or a keyword that indicates where to display the response that is received after submitting the form.
+   * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#target).
+   */
+  target?: '_blank' | '_self' | '_parent' | '_top',
+  /**
+   * Triggered when a user submits the form.
+   */
+  onSubmit?: (event: FormEvent<HTMLFormElement>) => void,
+  /**
+   * Triggered when a user resets the form.
+   */
+  onReset?:  (event: FormEvent<HTMLFormElement>) => void,
+  /**
+   * Triggered for each invalid field when a user submits the form.
+   */
+  onInvalid?:  (event: FormEvent<HTMLFormElement>) => void,
+  /**
+   * Indicates whether input elements can by default have their values automatically completed by the browser.
+   * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#autocomplete).
+   */
+  autoComplete?: 'off' | 'on',
+  /**
+   * Controls whether inputted text is automatically capitalized and, if so, in what manner.
+   * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autocapitalize).
+   */
+  autoCapitalize?: 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters',
+  /**
+   * An ARIA role override to apply to the form element.
+   */
+  role?: 'search' | 'presentation'
+}

src/events.d.ts

@@ -13,4 +13,6 @@ /*
 
+import {FocusableElement} from './dom';
 import {
   FocusEvent,
+  MouseEvent,
   KeyboardEvent as ReactKeyboardEvent,
@@ -54,2 +56,7 @@ SyntheticEvent
   /**
+   * The key that triggered the press event, if it was triggered by a keyboard interaction.
+   * This is useful for differentiating between Space and Enter key presses.
+   */
+  key?: string,
+  /**
    * By default, press events stop propagation to parent elements.
@@ -117,3 +124,9 @@ * In cases where a handler decides not to handle a specific event,
    */
-  onPressUp?: (e: PressEvent) => void
+  onPressUp?: (e: PressEvent) => void,
+  /**
+   * **Not recommended – use `onPress` instead.** `onClick` is an alias for `onPress`
+   * provided for compatibility with other libraries. `onPress` provides 
+   * additional event details for non-mouse interactions.
+   */
+  onClick?: (e: MouseEvent<FocusableElement>) => void
 }
@@ -120,0 +133,0 @@

src/refs.d.ts

@@ -16,3 +16,3 @@ /*
 export interface DOMRefValue<T extends HTMLElement = HTMLElement> {
-  UNSAFE_getDOMNode(): T
+  UNSAFE_getDOMNode(): T | null
 }
@@ -25,3 +25,3 @@
 export type DOMRef<T extends HTMLElement = HTMLElement> = Ref<DOMRefValue<T>>;
-export type FocusableRef<T extends HTMLElement = HTMLElement> = Ref<FocusableRefValue<T>>;
+export type FocusableRef<T extends HTMLElement = HTMLElement, D extends HTMLElement = T> = Ref<FocusableRefValue<T, D>>;
 
@@ -28,0 +28,0 @@ export interface RefObject<T> {

src/selection.d.ts

@@ -21,5 +21,5 @@ /*
   /** The initial selected key in the collection (uncontrolled). */
-  defaultSelectedKey?: Key,
+  defaultSelectedKey?: Key | null,
   /** Handler that is called when the selection changes. */
-  onSelectionChange?: (key: Key) => void
+  onSelectionChange?: (key: Key | null) => void
 }
@@ -26,0 +26,0 @@

src/style.d.ts

@@ -212,16 +212,7 @@ /*
 export interface BoxAlignmentStyleProps {
-  /**
-   * The distribution of space around items along the main axis. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content).
-   * @default 'stretch'
-   */
+  /** The distribution of space around items along the main axis. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content). */
   justifyContent?: Responsive<'start' | 'end' | 'center' | 'left' | 'right' | 'space-between' | 'space-around' | 'space-evenly' | 'stretch' | 'baseline' | 'first baseline' | 'last baseline' | 'safe center' | 'unsafe center'>,
-  /**
-   * The distribution of space around child items along the cross axis. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content).
-   * @default 'start'
-   */
+  /** The distribution of space around child items along the cross axis. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content).*/
   alignContent?: Responsive<'start' | 'end' | 'center' | 'space-between' | 'space-around' | 'space-evenly' | 'stretch' | 'baseline' | 'first baseline' | 'last baseline' | 'safe center' | 'unsafe center'>,
-  /**
-   * The alignment of children within their container. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items).
-   * @default 'stretch'
-   */
+  /** The alignment of children within their container. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items). */
   alignItems?: Responsive<'start' | 'end' | 'center' | 'stretch' | 'self-start' | 'self-end' | 'baseline' | 'first baseline' | 'last baseline' | 'safe center' | 'unsafe center'>,
@@ -228,0 +219,0 @@ /** The space to display between both rows and columns. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gap). */

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

URL strings

Supply chain risk

Package contains fragments of external URLs or IP addresses, which the package may be accessing at runtime.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

URL strings

Supply chain risk

Package contains fragments of external URLs or IP addresses, which the package may be accessing at runtime.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

84313

12.45%

Lines of code

1998

10.69%

Worsened metrics

Dev dependency count

1

Infinity%

No dependency changes