feat: S2 TagField

[devongovett]

WIP

[rspbot]

Build successful! 🎉

• View the storybook
• View the S2 storybook
• View the S2 docs
• View the React Aria docs

[rspbot]

## API Changes

@react-spectrum/s2

/@react-spectrum/s2:TagField

+TagField {
+  UNSAFE_className?: UnsafeClassName
+  UNSAFE_style?: CSSProperties
+  aria-describedby?: string
+  aria-details?: string
+  aria-label?: string
+  aria-labelledby?: string
+  autoFocus?: boolean
+  children?: (TokenSegment) => ReactNode
+  contextualHelp?: ReactNode
+  defaultValue?: TokenFieldValue
+  description?: ReactNode
+  errorMessage?: ReactNode | (ValidationResult) => ReactNode
+  isDisabled?: boolean
+  isInvalid?: boolean
+  isReadOnly?: boolean
+  isRequired?: boolean
+  label?: ReactNode
+  labelAlign?: Alignment = 'start'
+  labelPosition?: LabelPosition = 'top'
+  necessityIndicator?: NecessityIndicator = 'icon'
+  onBlur?: (FocusEvent<Target>) => void
+  onChange?: (TokenFieldValue) => void
+  onCopy?: ClipboardEventHandler<TokenFieldValue>
+  onCut?: ClipboardEventHandler<TokenFieldValue>
+  onFocus?: (FocusEvent<Target>) => void
+  onFocusChange?: (boolean) => void
+  onKeyDown?: (React.KeyboardEvent<HTMLDivElement>) => void
+  onKeyUp?: (React.KeyboardEvent<HTMLDivElement>) => void
+  onPaste?: ClipboardEventHandler<TokenFieldValue>
+  onSubmit?: () => void
+  placeholder?: string
+  size?: 'S' | 'M' | 'L' | 'XL' = 'M'
+  slot?: string | null
+  styles?: StylesPropWithHeight
+  value?: TokenFieldValue
+}

/@react-spectrum/s2:TagFieldValue

+TagFieldValue {
+  Direction: any
+  SelectedRange: any
+  caretPosition: Position
+  constructor: (readonly Array<TokenFieldSegment<T>>, TokenFieldValueOptions) => void
+  delete: (Position, Intl.Segmenter, any, any) => this
+  deleteLine: (Position, any, any) => this
+  endCoalescing: () => void
+  findBoundaryWithSegmenter: (Position, Intl.Segmenter, any) => Position | null
+  findLineBoundary: (Position, any) => Position | null
+  findText: (Position, any, string | RegExp) => Position | null
+  redo: () => this
+  replaceRange: (Position, Position, string, any) => this
+  replaceRangeWithSegments: (Position, Position, Array<TokenFieldSegment<T>>, any) => this
+  segments: readonly Array<TokenFieldSegment<T>>
+  selectedRange: SelectedRange
+  slice: (Position, Position) => this
+  toString: () => string
+  tokenize: (string) => Array<TokenFieldSegment>
+  undo: () => this
+  withCaretPosition: (Position) => this
+  withSelectedRange: (SelectedRange) => this
+}

/@react-spectrum/s2:TagFieldContext

+TagFieldContext {
+  UNTYPED
+}

/@react-spectrum/s2:TagFieldProps

+TagFieldProps {
+  UNSAFE_className?: UnsafeClassName
+  UNSAFE_style?: CSSProperties
+  aria-describedby?: string
+  aria-details?: string
+  aria-label?: string
+  aria-labelledby?: string
+  autoFocus?: boolean
+  children?: (TokenSegment) => ReactNode
+  contextualHelp?: ReactNode
+  defaultValue?: TokenFieldValue
+  description?: ReactNode
+  errorMessage?: ReactNode | (ValidationResult) => ReactNode
+  isDisabled?: boolean
+  isInvalid?: boolean
+  isReadOnly?: boolean
+  isRequired?: boolean
+  label?: ReactNode
+  labelAlign?: Alignment = 'start'
+  labelPosition?: LabelPosition = 'top'
+  necessityIndicator?: NecessityIndicator = 'icon'
+  onBlur?: (FocusEvent<Target>) => void
+  onChange?: (TokenFieldValue) => void
+  onCopy?: ClipboardEventHandler<TokenFieldValue>
+  onCut?: ClipboardEventHandler<TokenFieldValue>
+  onFocus?: (FocusEvent<Target>) => void
+  onFocusChange?: (boolean) => void
+  onKeyDown?: (React.KeyboardEvent<HTMLDivElement>) => void
+  onKeyUp?: (React.KeyboardEvent<HTMLDivElement>) => void
+  onPaste?: ClipboardEventHandler<TokenFieldValue>
+  onSubmit?: () => void
+  placeholder?: string
+  size?: 'S' | 'M' | 'L' | 'XL' = 'M'
+  slot?: string | null
+  styles?: StylesPropWithHeight
+  value?: TokenFieldValue
+}

---

[rspbot]

Agent Skills Changes

Modified (9)

• react-aria/agent-skills/index.json $\color{green}{+1}$ $\color{red}{-1}$
• react-aria/agent-skills/react-aria.tar.gz
• react-aria/agent-skills/react-aria/references/components/Separator/useSeparator.md $\color{green}{+1}$ $\color{red}{-1}$
• s2/agent-skills/index.json $\color{green}{+3}$ $\color{red}{-3}$
• s2/agent-skills/migrate-react-spectrum-v3-to-s2.tar.gz
• s2/agent-skills/react-spectrum-s2.tar.gz
• s2/agent-skills/react-spectrum-s2/references/guides/ai-components.md $\color{red}{-17}$
• s2/agent-skills/react-spectrum-s2/references/react-aria/components/Separator/useSeparator.md $\color{green}{+1}$ $\color{red}{-1}$
• s2/agent-skills/spectrum-audit.tar.gz

Install

React Spectrum S2:

npx skills add https://d1pzu54gtk2aed.cloudfront.net/pr/d6b2c8cd745ef0b272077c78f0a864fef6549fd8/

React Aria:

npx skills add https://d5iwopk28bdhl.cloudfront.net/pr/d6b2c8cd745ef0b272077c78f0a864fef6549fd8/