docs: Update RangeCalendar for api consitency, add docs for nonce, and TagGroup onAction docs (adobe#9910)

* update RangeCalendar interactOutsideBehavior to commitBehavior

* nonce docs

* modify warning for missing dialog labelling

* update taggroup selection docs to include actions

* slight change to description copy for clarity

* expandable tableview migration update and nits

* review comments

* add onAction to RAC Tags

* add test for onAction set on Tag directly

* fix combobox section className type

---------

Co-authored-by: Devon Govett <devongovett@gmail.com>

Author: LFDanLu

packages/@adobe/react-spectrum/test/calendar/RangeCalendar.test.js

@@ -1549,14 +1549,14 @@ describe('RangeCalendar', () => {
       jest.setSystemTime(new Date('2025-11-01'));
     });
 
-    it('should select the last hovered date when interactOutsideBehavior is "select"', async () => {
+    it('should select the last hovered date when commitBehavior is "select"', async () => {
       const onChange = jest.fn();
 
       let {getByText, getAllByText} = render(
         <RangeCalendar
           defaultValue={{start: new CalendarDate(2025, 11, 13), end: new CalendarDate(2025, 11, 15)}}
           onChange={onChange}
-          interactOutsideBehavior="select" />
+          commitBehavior="select" />
       );
 
       await user.click(getByText('25'));
@@ -1568,13 +1568,13 @@ describe('RangeCalendar', () => {
       expect(onChange).toHaveBeenCalledWith({start: new CalendarDate(2025, 11, 20), end: new CalendarDate(2025, 11, 25)});
     });
 
-    it('should clear the selection when interactOutsideBehavior is "clear"', async () => {
+    it('should clear the selection when commitBehavior is "clear"', async () => {
       const onChange = jest.fn();
       let {getByText, getAllByText, getByRole} = render(
         <RangeCalendar
           defaultValue={{start: new CalendarDate(2025, 11, 13), end: new CalendarDate(2025, 11, 15)}}
           onChange={onChange}
-          interactOutsideBehavior="clear" />
+          commitBehavior="clear" />
       );
 
       let startCell = getByRole('gridcell', {name: '25'});
@@ -1592,12 +1592,12 @@ describe('RangeCalendar', () => {
       expect(endCell).not.toHaveAttribute('aria-selected');
     });
 
-    it('should clear the selection when interactOutsideBehavior is "clear" no default selected range', async () => {
+    it('should clear the selection when commitBehavior is "clear" no default selected range', async () => {
       const onChange = jest.fn();
       let {getByText, getByRole} = render(
         <RangeCalendar
           onChange={onChange}
-          interactOutsideBehavior="clear" />
+          commitBehavior="clear" />
       );
 
       let startCell = getByRole('gridcell', {name: '25'});
@@ -1614,13 +1614,13 @@ describe('RangeCalendar', () => {
       expect(endCell).not.toHaveAttribute('aria-selected');
     });
 
-    it('should reset to the initial range when interactOutsideBehavior is "reset"', async () => {
+    it('should reset to the initial range when commitBehavior is "reset"', async () => {
       const onChange = jest.fn();
       let {getByText, getAllByText, getByRole} = render(
         <RangeCalendar
           defaultValue={{start: new CalendarDate(2025, 11, 13), end: new CalendarDate(2025, 11, 15)}}
           onChange={onChange}
-          interactOutsideBehavior="reset" />
+          commitBehavior="reset" />
       );
 
       let originalStartCell = getByRole('gridcell', {name: '13'});
@@ -1645,13 +1645,13 @@ describe('RangeCalendar', () => {
       expect(originalEndCell).toHaveAttribute('aria-selected', 'true');
     });
 
-    it('should reset to the initial range when interactOutsideBehavior is "reset" (controlled value)', async () => {
+    it('should reset to the initial range when commitBehavior is "reset" (controlled value)', async () => {
       const onChange = jest.fn();
       let {getByText, getAllByText, getByRole} = render(
         <RangeCalendar
           value={{start: new CalendarDate(2025, 11, 13), end: new CalendarDate(2025, 11, 15)}}
           onChange={onChange}
-          interactOutsideBehavior="reset" />
+          commitBehavior="reset" />
       );
 
       let originalStartCell = getByRole('gridcell', {name: '13'});
@@ -1673,13 +1673,13 @@ describe('RangeCalendar', () => {
     });
 
     describe('blur (e.g. tabbing away)', () => {
-      it('should select the hovered range when interactOutsideBehavior is "select" and calendar blurs', async () => {
+      it('should select the hovered range when commitBehavior is "select" and calendar blurs', async () => {
         const onChange = jest.fn();
         let {getByText, getByRole} = render(
           <RangeCalendar
             defaultValue={{start: new CalendarDate(2025, 11, 13), end: new CalendarDate(2025, 11, 15)}}
             onChange={onChange}
-            interactOutsideBehavior="select" />
+            commitBehavior="select" />
         );
 
         let startCell = getByRole('gridcell', {name: '13'});
@@ -1701,13 +1701,13 @@ describe('RangeCalendar', () => {
         expect(newEndCell).toHaveAttribute('aria-selected', 'true');
       });
 
-      it('should clear the selection when interactOutsideBehavior is "clear" and calendar blurs', async () => {
+      it('should clear the selection when commitBehavior is "clear" and calendar blurs', async () => {
         const onChange = jest.fn();
         let {getByText, getByRole} = render(
           <RangeCalendar
             defaultValue={{start: new CalendarDate(2025, 11, 13), end: new CalendarDate(2025, 11, 15)}}
             onChange={onChange}
-            interactOutsideBehavior="clear" />
+            commitBehavior="clear" />
         );
 
         let startCell = getByRole('gridcell', {name: '13'});
@@ -1727,13 +1727,13 @@ describe('RangeCalendar', () => {
         expect(newEndCell).not.toHaveAttribute('aria-selected', 'true');
       });
 
-      it('should reset to the initial range when interactOutsideBehavior is "reset" and calendar blurs', async () => {
+      it('should reset to the initial range when commitBehavior is "reset" and calendar blurs', async () => {
         const onChange = jest.fn();
         let {getByText, getByRole} = render(
           <RangeCalendar
             defaultValue={{start: new CalendarDate(2025, 11, 13), end: new CalendarDate(2025, 11, 15)}}
             onChange={onChange}
-            interactOutsideBehavior="reset" />
+            commitBehavior="reset" />
         );
 
         let originalStartCell = getByRole('gridcell', {name: '13'});

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

@@ -432,7 +432,7 @@ export function ComboBoxItem(props: ComboBoxItemProps): ReactNode {
   );
 }
 
-export interface ComboBoxSectionProps<T extends object> extends Omit<ListBoxSectionProps<T>, keyof GlobalDOMAttributes> {}
+export interface ComboBoxSectionProps<T extends object> extends Omit<ListBoxSectionProps<T>, 'style' | 'className' | 'render' | keyof GlobalDOMAttributes> {}
 export function ComboBoxSection<T extends object>(props: ComboBoxSectionProps<T>): ReactNode {
   let {size} = useContext(InternalComboboxContext);
   return (

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

@@ -35,7 +35,7 @@ import {useSpectrumContextProps} from './useSpectrumContextProps';
 
 export interface DateRangePickerProps<T extends DateValue> extends
   Omit<AriaDateRangePickerProps<T>, 'children' | 'className' | 'style' | 'render' | keyof GlobalDOMAttributes>,
-  Pick<RangeCalendarProps<T>, 'createCalendar' | 'pageBehavior' | 'firstDayOfWeek' | 'isDateUnavailable' | 'interactOutsideBehavior'>,
+  Pick<RangeCalendarProps<T>, 'createCalendar' | 'pageBehavior' | 'firstDayOfWeek' | 'isDateUnavailable' | 'commitBehavior'>,
   Pick<PopoverProps, 'shouldFlip'>,
   StyleProps,
   SpectrumLabelableProps,
@@ -80,7 +80,7 @@ export const DateRangePicker = /*#__PURE__*/ (forwardRef as forwardRefType)(func
     placeholderValue,
     maxVisibleMonths = 1,
     createCalendar,
-    interactOutsideBehavior,
+    commitBehavior,
     ...dateFieldProps
   } = props;
   let formContext = useContext(FormContext);
@@ -155,7 +155,7 @@ export const DateRangePicker = /*#__PURE__*/ (forwardRef as forwardRefType)(func
               <RangeCalendar
                 visibleMonths={maxVisibleMonths}
                 createCalendar={createCalendar}
-                interactOutsideBehavior={interactOutsideBehavior}
+                commitBehavior={commitBehavior}
                 errorMessage={resolvedErrorMessage} />
               {showTimeField && (
                 <div className={style({display: 'flex', gap: 16, contain: 'inline-size', marginTop: 24})}>

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

@@ -740,7 +740,7 @@ function DefaultProvider({context, value, children}: {context: React.Context<any
   return <context.Provider value={value}>{children}</context.Provider>;
 }
 
-export interface PickerSectionProps<T extends object> extends Omit<ListBoxSectionProps<T>, 'style' | 'className' | 'render' | keyof GlobalDOMAttributes>, StyleProps {}
+export interface PickerSectionProps<T extends object> extends Omit<ListBoxSectionProps<T>, 'style' | 'className' | 'render' | keyof GlobalDOMAttributes> {}
 export function PickerSection<T extends object>(props: PickerSectionProps<T>): ReactNode {
   let {size} = useContext(InternalPickerContext);
   return (

packages/@react-spectrum/s2/style/index.ts

@@ -28,7 +28,7 @@ export type {StyleString} from './types';
  *
  * @example
  * ```tsx
- * import {space} from '@react-spectrum/s2/style' with {type: 'macro'};
+ * import {space, style} from '@react-spectrum/s2/style' with {type: 'macro'};
  *
  * const styles = style({
  *   gap: space(12) // 12/16 = 0.75rem
@@ -49,7 +49,7 @@ export function space(px: number): `[${string}]` {
  *
  * @example
  * ```tsx
- * import {fontRelative} from '@react-spectrum/s2/style' with {type: 'macro'};
+ * import {fontRelative, style} from '@react-spectrum/s2/style' with {type: 'macro'};
  *
  * const styles = style({
  *   gap: fontRelative(2)  // 2/14 = ~0.143em
@@ -135,7 +135,7 @@ const iconSizes = {
  * ```tsx
  * import {iconStyle} from '@react-spectrum/s2/style' with {type: 'macro'};
  * import Edit from '@react-spectrum/s2/icons/Edit';
- * 
+ *
  * <Edit styles={iconStyle({size: 'XL', color: 'positive'})} />
  * ```
  */

packages/dev/s2-docs/pages/react-aria/RangeCalendar.mdx

@@ -21,14 +21,14 @@ export const description = 'Displays one or more date grids and allows users to
     component={VanillaRangeCalendar}
     docs={vanillaDocs.exports.RangeCalendar}
     links={vanillaDocs.links}
-    props={['isDisabled', 'interactOutsideBehavior']}
+    props={['isDisabled', 'commitBehavior']}
     type="vanilla"
     files={["starters/docs/src/RangeCalendar.tsx", "starters/docs/src/RangeCalendar.css"]} />
   <VisualExample
     component={TailwindRangeCalendar}
     docs={vanillaDocs.exports.RangeCalendar}
     links={vanillaDocs.links}
-    props={['isDisabled', 'interactOutsideBehavior']}
+    props={['isDisabled', 'commitBehavior']}
     type="tailwind"
     files={["starters/tailwind/src/RangeCalendar.tsx"]} />
 </ExampleSwitcher>

packages/dev/s2-docs/pages/react-aria/TagGroup.mdx

@@ -101,7 +101,7 @@ import {TagGroup, Tag} from 'vanilla-starter/TagGroup';
   <Content>Due to [HTML spec limitations](https://github.com/w3c/html-aria/issues/473), tags cannot be rendered as `<a>` elements. React Aria handles link clicks with JavaScript and triggers native navigation. When using a client-side router, use the `onAction` event to programmatically trigger navigation instead of the `href` prop.</Content>
 </InlineAlert>
 
-## Selection
+## Selection and actions
 
 Use the `selectionMode` prop to enable single or multiple selection. The selected items can be controlled via the `selectedKeys` prop, matching the `id` prop of the items. Items can be disabled with the `isDisabled` prop. See the [selection guide](selection?component=TagGroup) for more details.
 
@@ -137,6 +137,30 @@ function Example(props) {
 }
 ```
 
+Use the `onAction` prop to handle item actions.
+
+```tsx render wide
+"use client";
+import {TagGroup, Tag} from 'vanilla-starter/TagGroup';
+
+function Example() {
+  return (
+    <TagGroup
+      label="Music genres"
+      ///- begin highlight -///
+      onAction={key => alert(`Clicked ${key}`)}
+      ///- end highlight -///
+    >
+      <Tag id="rock">Rock</Tag>
+      <Tag id="jazz">Jazz</Tag>
+      <Tag id="pop">Pop</Tag>
+      <Tag id="classical">Classical</Tag>
+      <Tag id="edm">EDM</Tag>
+    </TagGroup>
+  );
+}
+```
+
 ## Examples
 
 <ExampleList tag="taggroup" pages={props.pages} />

packages/dev/s2-docs/pages/react-aria/frameworks.mdx

@@ -73,6 +73,9 @@ export const description = 'How to integrate with your framework.';
         }
         ```
       </Step>
+      <Step>
+        <Counter />If you are using a [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) (CSP) with a nonce, add a `<meta property="csp-nonce">` tag to your document head, setting the `content` attribute to the generated nonce value. React Aria automatically reads the nonce from this tag.
+      </Step>
     </StepList>
   </TabPanel>
   <TabPanel id="react-router">
@@ -184,6 +187,9 @@ export const description = 'How to integrate with your framework.';
         });
         ```
       </Step>
+      <Step>
+        <Counter />If you are using a [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) (CSP) with a nonce, add a `<meta property="csp-nonce">` tag to your document head, setting the `content` attribute to the generated nonce value. React Aria automatically reads the nonce from this tag.
+      </Step>
     </StepList>
   </TabPanel>
   <TabPanel id="parcel">
@@ -213,6 +219,9 @@ export const description = 'How to integrate with your framework.';
         }
         ```
       </Step>
+      <Step>
+        <Counter />If you are using a [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) (CSP) with a nonce, add a `<meta property="csp-nonce">` tag to your document head, setting the `content` attribute to the generated nonce value. React Aria automatically reads the nonce from this tag.
+      </Step>
     </StepList>
   </TabPanel>
   <TabPanel id="vite">
@@ -243,6 +252,9 @@ export const description = 'How to integrate with your framework.';
         });
         ```
       </Step>
+      <Step>
+        <Counter />If you are using a [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) (CSP) with a nonce, configure [`html.cspNonce`](https://vite.dev/config/shared-options.html#html-cspnonce) in `vite.config.ts`. React Aria automatically reads the nonce that Vite injects.
+      </Step>
     </StepList>
   </TabPanel>
   <TabPanel id="webpack">
@@ -270,6 +282,9 @@ export const description = 'How to integrate with your framework.';
         };
         ```
       </Step>
+      <Step>
+        <Counter />If you are using a [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) (CSP) with a nonce, configure [`__webpack_nonce__`](https://webpack.js.org/guides/csp/) in your entry script. React Aria automatically reads the nonce from the webpack global.
+      </Step>
     </StepList>
   </TabPanel>
   <TabPanel id="rollup">
@@ -297,6 +312,9 @@ export const description = 'How to integrate with your framework.';
         };
         ```
       </Step>
+      <Step>
+        <Counter />If you are using a [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) (CSP) with a nonce, add a `<meta property="csp-nonce">` tag to your document head, setting the `content` attribute to the generated nonce value. React Aria automatically reads the nonce from this tag.
+      </Step>
     </StepList>
   </TabPanel>
   <TabPanel id="esbuild">
@@ -324,6 +342,9 @@ export const description = 'How to integrate with your framework.';
         });
         ```
       </Step>
+      <Step>
+        <Counter />If you are using a [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) (CSP) with a nonce, add a `<meta property="csp-nonce">` tag to your document head, setting the `content` attribute to the generated nonce value. React Aria automatically reads the nonce from this tag.
+      </Step>
     </StepList>
   </TabPanel>
 </Tabs>

packages/dev/s2-docs/pages/s2/RangeCalendar.mdx

@@ -15,7 +15,7 @@ export const description = 'Allows a user to select a contiguous range of dates.
   component={RangeCalendar}
   docs={docs.exports.RangeCalendar}
   links={docs.links}
-  props={['visibleMonths', 'pageBehavior', 'firstDayOfWeek', 'isDisabled', 'interactOutsideBehavior']}
+  props={['visibleMonths', 'pageBehavior', 'firstDayOfWeek', 'isDisabled', 'commitBehavior']}
   initialProps={{'aria-label': 'Trip dates'}}
   controlOptions={{
     visibleMonths: {

packages/dev/s2-docs/pages/s2/TagGroup.mdx

@@ -201,7 +201,7 @@ import {Link} from '@react-spectrum/s2/Link';
 </TagGroup>
 ```
 
-## Selection
+## Selection and actions
 
 Use the `selectionMode` prop to enable single or multiple selection. The selected items can be controlled via the `selectedKeys` prop, matching the `id` prop of the items. Items can be disabled with the `isDisabled` prop. See the [selection guide](selection?component=TagGroup) for more details.
 
@@ -235,6 +235,30 @@ function Example(props) {
 }
 ```
 
+Use the `onAction` prop to handle item actions.
+
+```tsx render wide
+"use client";
+import {TagGroup, Tag} from '@react-spectrum/s2/TagGroup';
+
+function Example() {
+  return (
+    <TagGroup
+      label="Music genre"
+      ///- begin highlight -///
+      onAction={key => alert(`Clicked ${key}`)}
+      ///- end highlight -///
+    >
+      <Tag id="rock">Rock</Tag>
+      <Tag id="jazz">Jazz</Tag>
+      <Tag id="pop">Pop</Tag>
+      <Tag id="classical">Classical</Tag>
+      <Tag id="edm">EDM</Tag>
+    </TagGroup>
+  );
+}
+```
+
 
 ## Group actions