@react-types/shared 3.15.0 → 3.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-types/shared",
-  "version": "3.15.0",
+  "version": "3.17.0",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "types": "src/index.d.ts",
@@ -14,5 +14,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "9202ef59e8c104dd06ffe33148445ef7932a5d1b"
+  "gitHead": "a0efee84aa178cb1a202951dfd6d8de02b292307"
 }

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

@@ -62,7 +62,7 @@ export interface DropExitEvent extends DragDropEvent {
   type: 'dropexit'
 }
 
-export interface TextItem {
+export interface TextDropItem {
   /** The item kind. */
   kind: 'text',
   /**
@@ -74,7 +74,7 @@ export interface TextItem {
   getText(type: string): Promise<string>
 }
 
-export interface FileItem {
+export interface FileDropItem {
   /** The item kind. */
   kind: 'file',
   /** The file type (usually a mime type). */
@@ -87,16 +87,16 @@ export interface FileItem {
   getText(): Promise<string>
 }
 
-export interface DirectoryItem {
+export interface DirectoryDropItem {
   /** The item kind. */
   kind: 'directory',
   /** The directory name. */
   name: string,
   /** Returns the entries contained within the directory. */
-  getEntries(): AsyncIterable<FileItem | DirectoryItem>
+  getEntries(): AsyncIterable<FileDropItem | DirectoryDropItem>
 }
 
-export type DropItem = TextItem | FileItem | DirectoryItem;
+export type DropItem = TextDropItem | FileDropItem | DirectoryDropItem;
 
 export interface DropEvent extends DragDropEvent {
   /** The event type. */
@@ -149,7 +149,7 @@ export interface DroppableCollectionDropEvent extends DropEvent {
   target: DropTarget
 }
 
-interface DroppableCollectionInsertDropEvent {
+export interface DroppableCollectionInsertDropEvent {
   /** The dropped items. */
   items: DropItem[],
   /** The drop operation that should occur. */
@@ -158,14 +158,14 @@ interface DroppableCollectionInsertDropEvent {
   target: ItemDropTarget
 }
 
-interface DroppableCollectionRootDropEvent {
+export interface DroppableCollectionRootDropEvent {
   /** The dropped items. */
   items: DropItem[],
   /** The drop operation that should occur. */
   dropOperation: DropOperation
 }
 
-interface DroppableCollectionOnItemDropEvent {
+export interface DroppableCollectionOnItemDropEvent {
   /** The dropped items. */
   items: DropItem[],
   /** The drop operation that should occur. */
@@ -176,7 +176,7 @@ interface DroppableCollectionOnItemDropEvent {
   target: ItemDropTarget
 }
 
-interface DroppableCollectionReorderEvent {
+export interface DroppableCollectionReorderEvent {
   /** The keys of the items that were reordered. */
   keys: Set<Key>,
   /** The drop operation that should occur. */
@@ -251,17 +251,17 @@ export interface DroppableCollectionBaseProps {
 
 export interface DroppableCollectionProps extends DroppableCollectionUtilityOptions, DroppableCollectionBaseProps {}
 
-interface DraggableCollectionStartEvent extends DragStartEvent {
+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 {
+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. */

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
 }
@@ -66,11 +68,11 @@ export interface KeyboardEvents {
   onKeyUp?: (e: KeyboardEvent) => void
 }
 
-export interface FocusEvents {
+export interface FocusEvents<Target = Element> {
   /** Handler that is called when the element receives focus. */
-  onFocus?: (e: FocusEvent) => void,
+  onFocus?: (e: FocusEvent<Target>) => void,
   /** Handler that is called when the element loses focus. */
-  onBlur?: (e: FocusEvent) => void,
+  onBlur?: (e: FocusEvent<Target>) => void,
   /** Handler that is called when the element's focus status changes. */
   onFocusChange?: (isFocused: boolean) => void
 }
@@ -103,7 +105,7 @@ export interface PressEvents {
   onPressUp?: (e: PressEvent) => void
 }
 
-export interface FocusableProps extends FocusEvents, KeyboardEvents {
+export interface FocusableProps<Target = Element> extends FocusEvents<Target>, KeyboardEvents {
   /** Whether the element should receive focus on render. */
   autoFocus?: boolean
 }

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>,