[pull] main from adobe:main

packages/@react-spectrum/s2/src/pressScale.ts

@@ -13,6 +13,28 @@
 import {composeRenderProps} from 'react-aria-components/composeRenderProps';
 import {CSSProperties, RefObject} from 'react';
 
+/**
+ * Returns a render prop style function that applies a subtle Spectrum "press" scale
+ * effect to an element while it is being pressed.
+ *
+ * @param ref - A ref to the element receiving the press effect.
+ * @param style - An optional base style object, or a render prop function returning
+ * one.
+ * @returns A render prop function suitable for passing to a React Aria component's
+ * `style` prop.
+ *
+ * @example
+ * ```tsx
+ * import {Button} from 'react-aria-components/Button';
+ * import {pressScale} from '@react-spectrum/s2';
+ * import {useRef} from 'react';
+ *
+ * function MyButton(props) {
+ *   let ref = useRef(null);
+ *   return <Button {...props} ref={ref} style={pressScale(ref, props.style)} />;
+ * }
+ * ```
+ */
 export function pressScale<R extends {isPressed: boolean}>(ref: RefObject<HTMLElement | null>, style?: CSSProperties | ((renderProps: R) => CSSProperties)): (renderProps: R) => CSSProperties {
   return composeRenderProps(style, (style, renderProps: R) => {
     if (renderProps.isPressed && ref.current) {

packages/@react-types/shared/src/dom.d.ts

@@ -83,54 +83,54 @@ export interface FocusableDOMProps extends DOMProps {
 }
 
 
-export interface TextInputDOMEvents {
+export interface TextInputDOMEvents<T = HTMLInputElement> {
   // Clipboard events
   /**
    * Handler that is called when the user copies text. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/oncopy).
    */
-   onCopy?: ClipboardEventHandler<HTMLInputElement>,
+   onCopy?: ClipboardEventHandler<T>,
 
    /**
     * Handler that is called when the user cuts text. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/oncut).
     */
-   onCut?: ClipboardEventHandler<HTMLInputElement>,
+   onCut?: ClipboardEventHandler<T>,
 
    /**
     * Handler that is called when the user pastes text. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/onpaste).
     */
-   onPaste?: ClipboardEventHandler<HTMLInputElement>,
+   onPaste?: ClipboardEventHandler<T>,
 
    // Composition events
    /**
     * Handler that is called when a text composition system starts a new text composition session. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionstart_event).
     */
-   onCompositionStart?: CompositionEventHandler<HTMLInputElement>,
+   onCompositionStart?: CompositionEventHandler<T>,
 
    /**
     * Handler that is called when a text composition system completes or cancels the current text composition session. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionend_event).
     */
-   onCompositionEnd?: CompositionEventHandler<HTMLInputElement>,
+   onCompositionEnd?: CompositionEventHandler<T>,
 
    /**
     * Handler that is called when a new character is received in the current text composition session. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionupdate_event).
     */
-   onCompositionUpdate?: CompositionEventHandler<HTMLInputElement>,
+   onCompositionUpdate?: CompositionEventHandler<T>,
 
    // Selection events
    /**
     * Handler that is called when text in the input is selected. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/select_event).
     */
-   onSelect?: ReactEventHandler<HTMLInputElement>,
+   onSelect?: ReactEventHandler<T>,
 
    // Input events
    /**
     * Handler that is called when the input value is about to be modified. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/beforeinput_event).
     */
-   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>
 }
 
 export interface InputDOMProps {
@@ -148,7 +148,7 @@ export interface InputDOMProps {
 
 // DOM props that apply to all text inputs
 // Ensure this is synced with useTextField
-export interface TextInputDOMProps extends DOMProps, InputDOMProps, TextInputDOMEvents {
+export interface TextInputDOMProps<T = HTMLInputElement> extends DOMProps, InputDOMProps, TextInputDOMEvents<T> {
   /**
    * 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).
    */
@@ -261,7 +261,7 @@ export interface GlobalDOMAttributes<T = Element> extends GlobalDOMEvents<T> {
 // 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 
+//   - 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.
@@ -389,7 +389,7 @@ export interface FormProps extends AriaLabelingProps {
    */
   autoComplete?: 'off' | 'on',
   /**
-   * Controls whether inputted text is automatically capitalized and, if so, in what manner. 
+   * 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',

packages/dev/s2-docs/pages/s2/style-macro.mdx

@@ -108,6 +108,10 @@ See the [Icons](icons#api) page for more information.
 
 <FunctionJSDoc function={docs.exports.mergeStyles} />
 
+### pressScale
+
+<FunctionJSDoc function={docs.exports.pressScale} />
+
 ### centerPadding
 
 <FunctionJSDoc function={styleDocs.exports.centerPadding} />

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

@@ -87,7 +87,7 @@ type TextFieldInputProps<T extends TextFieldIntrinsicElements> = TextFieldHTMLAt
 
 export interface TextFieldProps<T = HTMLInputElement> extends InputBase, Validation<string>, HelpTextProps, FocusableProps<T>, TextInputBase, ValueBase<string>, LabelableProps {}
 
-export interface AriaTextFieldProps<T = HTMLInputElement> extends TextFieldProps<T>, AriaLabelingProps, FocusableDOMProps, TextInputDOMProps, AriaValidationProps {
+export interface AriaTextFieldProps<T = HTMLInputElement> extends TextFieldProps<T>, AriaLabelingProps, FocusableDOMProps, TextInputDOMProps<T>, AriaValidationProps {
   // https://www.w3.org/TR/wai-aria-1.2/#textbox
   /** Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application. */
   'aria-activedescendant'?: string,