Merge branch 'main' into s2-combobox-picker-virtualizer

Author: yihuiliao

.github/ISSUE_TEMPLATE/Bug_Report.yml

@@ -24,7 +24,7 @@ body:
     id: current-behavior
     attributes:
       label: 😯 Current Behavior
-      description: | 
+      description: |
         Tell us what happens instead of the expected behavior. Please include a link to the storybook if possible.
         If you are seeing an error, please include the full error message and stack trace.
     validations:
@@ -40,22 +40,23 @@ body:
     id: context
     attributes:
       label: 🔦 Context
-      description: | 
+      description: |
         Providing context helps us come up with a solution that is most useful in the real world.
         How has this issue affected you? What are you trying to accomplish?
     validations:
       required: false
   - type: textarea
     id: base-reproduction
     attributes:
-      label: 🖥️ Steps to Reproduce 
-      description: | 
-        Provide a minimal test case that can reproduce the problem. Include a CodeSandBox, link to sample repos, or specific doc examples to help us test your issue more easily. 
+      label: 🖥️ Steps to Reproduce
+      description: |
+        Provide a minimal test case that can reproduce the problem. Include a CodeSandBox, link to sample repos, or specific doc examples to help us test your issue more easily.
 
         To get started, you can use the following CodeSandBox templates:
         For React Spectrum: https://codesandbox.io/s/react-spectrum-template-syueo
         For React Aria: https://codesandbox.io/s/react-aria-template-389r79
         For React Aria Components: https://codesandbox.io/s/react-aria-components-template-g7wmmk
+        For React Spectrum S2 with Style Macros: https://codesandbox.io/p/devbox/react-spectrum-s2-style-macro-template-h6fpsq
     validations:
       required: true
   - type: markdown

packages/@react-aria/textfield/src/useTextField.ts

@@ -83,7 +83,7 @@ export interface AriaTextFieldOptions<T extends TextFieldIntrinsicElements> exte
    */
   autoCapitalize?: 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters',
   /**
-   * An enumerated attribute that defines what action label or icon to preset for the enter key on virtual keyboards. See [https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint].
+   * An enumerated attribute that defines what action label or icon to preset for the enter key on virtual keyboards. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint).
    */
   enterKeyHint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'
 }

packages/@react-spectrum/s2/src/ContextualHelp.tsx

@@ -103,7 +103,7 @@ export const ContextualHelp = forwardRef(function ContextualHelp(props: Contextu
         offset={offset}
         crossOffset={crossOffset}
         hideArrow
-        UNSAFE_className={popover}>
+        styles={popover}>
         <RACDialog className={mergeStyles(dialogInner, style({borderRadius: 'none', margin: -24, padding: 24}))}>
           <Provider
             values={[

packages/@react-spectrum/s2/src/style-utils.ts

@@ -186,9 +186,10 @@ const heightProperties = [
 export type StylesProp = StyleString<(typeof allowedOverrides)[number] | (typeof widthProperties)[number]>;
 export type StylesPropWithHeight = StyleString<(typeof allowedOverrides)[number] | (typeof widthProperties)[number] | (typeof heightProperties)[number]>;
 export type StylesPropWithoutWidth = StyleString<(typeof allowedOverrides)[number]>;
+export type UnsafeClassName = string & {properties?: never};
 export interface UnsafeStyles {
   /** Sets the CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. */
-  UNSAFE_className?: string,
+  UNSAFE_className?: UnsafeClassName,
   /** Sets inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. */
   UNSAFE_style?: CSSProperties
 }

packages/@react-types/searchfield/src/index.d.ts

@@ -23,7 +23,7 @@ export interface SearchFieldProps extends TextFieldProps {
 
 export interface AriaSearchFieldProps extends SearchFieldProps, AriaTextFieldProps {
   /**
-   * An enumerated attribute that defines what action label or icon to preset for the enter key on virtual keyboards. See [https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint].
+   * An enumerated attribute that defines what action label or icon to preset for the enter key on virtual keyboards. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint).
    */
   enterKeyHint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'
 }

packages/@react-types/textfield/src/index.d.ts

@@ -46,7 +46,7 @@ export interface AriaTextFieldProps<T = HTMLInputElement> extends TextFieldProps
   /** Identifies the element (or elements) whose contents or presence are controlled by the current element. */
   'aria-controls'?: string,
   /**
-   * An enumerated attribute that defines what action label or icon to preset for the enter key on virtual keyboards. See [https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint].
+   * An enumerated attribute that defines what action label or icon to preset for the enter key on virtual keyboards. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint).
    */
   enterKeyHint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'
 }

packages/react-aria-components/src/index.ts

@@ -30,7 +30,7 @@ export {ColorSwatchPicker, ColorSwatchPickerItem, ColorSwatchPickerContext} from
 export {ColorThumb} from './ColorThumb';
 export {ColorWheel, ColorWheelTrack, ColorWheelTrackContext, ColorWheelStateContext} from './ColorWheel';
 export {ComboBox, ComboBoxContext, ComboBoxStateContext} from './ComboBox';
-export {composeRenderProps, DEFAULT_SLOT, Provider, useContextProps, useSlottedContext} from './utils';
+export {composeRenderProps, DEFAULT_SLOT, Provider, useContextProps, useRenderProps, useSlottedContext} from './utils';
 export {DateField, DateInput, DateSegment, TimeField, DateFieldContext, TimeFieldContext, DateFieldStateContext, TimeFieldStateContext} from './DateField';
 export {DatePicker, DateRangePicker, DatePickerContext, DateRangePickerContext, DatePickerStateContext, DateRangePickerStateContext} from './DatePicker';
 export {DialogTrigger, Dialog, DialogContext, OverlayTriggerStateContext} from './Dialog';
@@ -141,7 +141,7 @@ export type {TooltipProps, TooltipRenderProps, TooltipTriggerComponentProps} fro
 export type {TreeProps, TreeRenderProps, TreeItemProps, TreeItemRenderProps, TreeItemContentProps, TreeItemContentRenderProps} from './Tree';
 export type {DragAndDropHooks, DragAndDropOptions} from './useDragAndDrop';
 export type {DropIndicatorProps, DropIndicatorRenderProps} from './DragAndDrop';
-export type {ContextValue, SlotProps} from './utils';
+export type {ContextValue, RenderProps, SlotProps, StyleRenderProps} from './utils';
 export type {VirtualizerProps} from './Virtualizer';
 
 export type {DateValue, DateRange, TimeValue} from 'react-aria';