fix(components): replace Section with ListBoxSection and `MenuSec…

…tion` (#1498)

* fix(components): replace `Section` with `ListBoxSection` and `MenuSection`

* fix: ts

.changeset/giant-shirts-hear.md

@@ -0,0 +1,5 @@
+---
+"@launchpad-ui/components": patch
+---
+
+Replace `Section` with `ListBoxSection` and `MenuSection`

package.json

@@ -12,7 +12,7 @@
 		"clean": "nx run-many --target=clean --all",
 		"e2e:a11y": "STORYBOOK_URL=http://127.0.0.1:8080/ pnpm playwright test",
 		"generate": "plop",
-		"graph": "nx affected:graph",
+		"graph": "nx graph --affected",
 		"storybook": "pnpm build:transform && sb dev -p 3000",
 		"storybook:build": "pnpm build:transform && sb build --quiet",
 		"test": "pnpm build:transform && vitest run --coverage",

packages/components/__tests__/Menu.spec.tsx

@@ -1,7 +1,16 @@
 import { describe, expect, it } from 'vitest';
 
 import { render, screen, userEvent } from '../../../test/utils';
-import { Button, Header, Menu, MenuItem, MenuTrigger, Popover, Section, Separator } from '../src';
+import {
+	Button,
+	Header,
+	Menu,
+	MenuItem,
+	MenuSection,
+	MenuTrigger,
+	Popover,
+	Separator,
+} from '../src';
 
 describe('Menu', () => {
 	it('renders', async () => {
@@ -13,11 +22,11 @@ describe('Menu', () => {
 					<Menu>
 						<MenuItem>Item one</MenuItem>
 						<Separator />
-						<Section>
+						<MenuSection>
 							<Header>Section</Header>
 							<MenuItem>Item two</MenuItem>
 							<MenuItem>Item three</MenuItem>
-						</Section>
+						</MenuSection>
 					</Menu>
 				</Popover>
 			</MenuTrigger>,

packages/components/src/Section.tsx

@@ -1,23 +1,41 @@
 import type { forwardRefType } from '@react-types/shared';
 import type { ForwardedRef } from 'react';
-import type { SectionProps } from 'react-aria-components';
+import type { ListBoxSectionProps, MenuSectionProps } from 'react-aria-components';
 
 import { cva } from 'class-variance-authority';
 import { forwardRef } from 'react';
-import { Section as AriaSection } from 'react-aria-components';
+import {
+	ListBoxSection as AriaListBoxSection,
+	MenuSection as AriaMenuSection,
+} from 'react-aria-components';
 
 import styles from './styles/Section.module.css';
 
 const section = cva(styles.section);
 
-const _Section = <T extends object>(
-	{ className, ...props }: SectionProps<T>,
+const _ListBoxSection = <T extends object>(
+	{ className, ...props }: ListBoxSectionProps<T>,
 	ref: ForwardedRef<HTMLElement>,
 ) => {
-	return <AriaSection {...props} ref={ref} className={section({ className })} />;
+	return <AriaListBoxSection {...props} ref={ref} className={section({ className })} />;
 };
 
-const Section = (forwardRef as forwardRefType)(_Section);
+/**
+ * A ListBoxSection represents a section within a ListBox.
+ */
+const ListBoxSection = (forwardRef as forwardRefType)(_ListBoxSection);
 
-export { Section };
-export type { SectionProps };
+const _MenuSection = <T extends object>(
+	{ className, ...props }: MenuSectionProps<T>,
+	ref: ForwardedRef<HTMLElement>,
+) => {
+	return <AriaMenuSection {...props} ref={ref} className={section({ className })} />;
+};
+
+/**
+ * A MenuSection represents a section within a Menu.
+ */
+const MenuSection = (forwardRef as forwardRefType)(_MenuSection);
+
+export { ListBoxSection, MenuSection };
+export type { ListBoxSectionProps, MenuSectionProps };

packages/components/src/index.ts

@@ -51,7 +51,7 @@ export type { RadioButtonProps } from './RadioButton';
 export type { RadioGroupProps } from './RadioGroup';
 export type { RadioIconButtonProps } from './RadioIconButton';
 export type { SearchFieldProps } from './SearchField';
-export type { SectionProps } from './Section';
+export type { ListBoxSectionProps, MenuSectionProps } from './Section';
 export type { SelectProps, SelectValueProps } from './Select';
 export type { SeparatorProps } from './Separator';
 export type { SwitchProps } from './Switch';
@@ -133,7 +133,7 @@ export { RadioGroup } from './RadioGroup';
 export { RadioIconButton } from './RadioIconButton';
 export { RouterProvider } from './RouterProvider';
 export { SearchField } from './SearchField';
-export { Section } from './Section';
+export { ListBoxSection, MenuSection } from './Section';
 export { Select, SelectValue } from './Select';
 export { Separator } from './Separator';
 export { Switch } from './Switch';

packages/components/stories/Breadcrumbs.stories.tsx

@@ -1,11 +1,11 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import type { ComponentType } from 'react';
 
 import { Breadcrumb, Breadcrumbs, Link } from '../src';
 
 const meta: Meta<typeof Breadcrumbs> = {
 	component: Breadcrumbs,
-	// @ts-ignore
-	subcomponents: { Breadcrumb },
+	subcomponents: { Breadcrumb } as Record<string, ComponentType<unknown>>,
 	title: 'Components/Navigation/Breadcrumbs',
 	parameters: {
 		status: {

packages/components/stories/Calendar.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import type { ComponentType } from 'react';
 
 import {
 	getLocalTimeZone,
@@ -25,8 +26,10 @@ import {
 
 const meta: Meta<typeof Calendar> = {
 	component: Calendar,
-	// @ts-ignore
-	subcomponents: { CalendarCell, CalendarGrid, CalendarPicker, Heading, Preset },
+	subcomponents: { CalendarCell, CalendarGrid, CalendarPicker, Heading, Preset } as Record<
+		string,
+		ComponentType<unknown>
+	>,
 	title: 'Components/Date and Time/Calendar',
 	parameters: {
 		status: {

packages/components/stories/ComboBox.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import type { ComponentType } from 'react';
 
 import { Icon } from '@launchpad-ui/icons';
 import { vars } from '@launchpad-ui/vars';
@@ -19,8 +20,7 @@ import {
 
 const meta: Meta<typeof ComboBox> = {
 	component: ComboBox,
-	// @ts-ignore
-	subcomponents: { ComboBoxClearButton },
+	subcomponents: { ComboBoxClearButton } as Record<string, ComponentType<unknown>>,
 	title: 'Components/Pickers/ComboBox',
 	parameters: {
 		status: {

packages/components/stories/DateField.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import type { ComponentType } from 'react';
 
 import { vars } from '@launchpad-ui/vars';
 import { userEvent } from '@storybook/test';
@@ -7,8 +8,7 @@ import { DateField, DateInput, DateSegment, Label, Text } from '../src';
 
 const meta: Meta<typeof DateField> = {
 	component: DateField,
-	// @ts-ignore
-	subcomponents: { DateInput, DateSegment },
+	subcomponents: { DateInput, DateSegment } as Record<string, ComponentType<unknown>>,
 	title: 'Components/Date and Time/DateField',
 	parameters: {
 		status: {

packages/components/stories/Disclosure.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import type { ComponentType } from 'react';
 
 import { Icon } from '@launchpad-ui/icons';
 import { vars } from '@launchpad-ui/vars';
@@ -7,8 +8,7 @@ import { Button, Disclosure, DisclosurePanel, Heading } from '../src';
 
 const meta: Meta<typeof Disclosure> = {
 	component: Disclosure,
-	// @ts-ignore
-	subcomponents: { DisclosurePanel },
+	subcomponents: { DisclosurePanel } as Record<string, ComponentType<unknown>>,
 	title: 'Components/Navigation/Disclosure',
 	parameters: {
 		status: {

packages/components/stories/GridList.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import type { ComponentType } from 'react';
 
 import { useDragAndDrop } from 'react-aria-components';
 import { useListData } from 'react-stately';
@@ -17,8 +18,7 @@ import {
 
 const meta: Meta<typeof GridList> = {
 	component: GridList,
-	// @ts-ignore
-	subcomponents: { GridListItem },
+	subcomponents: { GridListItem } as Record<string, ComponentType<unknown>>,
 	title: 'Components/Collections/GridList',
 	parameters: {
 		status: {

packages/components/stories/ListBox.stories.tsx

@@ -1,16 +1,16 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import type { ComponentType } from 'react';
 import type { Selection as AriaSelection } from 'react-aria-components';
 
 import { Icon } from '@launchpad-ui/icons';
 import { fireEvent, userEvent, within } from '@storybook/test';
 import { useState } from 'react';
 
-import { Header, ListBox, ListBoxItem, Section, Text } from '../src';
+import { Header, ListBox, ListBoxItem, ListBoxSection, Text } from '../src';
 
 const meta: Meta<typeof ListBox> = {
 	component: ListBox,
-	// @ts-ignore
-	subcomponents: { ListBoxItem, Section, Header },
+	subcomponents: { ListBoxItem, ListBoxSection, Header } as Record<string, ComponentType<unknown>>,
 	title: 'Components/Collections/ListBox',
 	parameters: {
 		status: {
@@ -39,18 +39,18 @@ export const Grouping: Story = {
 	render: (args) => {
 		return (
 			<ListBox aria-label="Items" selectionMode="multiple" {...args}>
-				<Section>
+				<ListBoxSection>
 					<Header>Group 1</Header>
 					<ListBoxItem>Item one</ListBoxItem>
 					<ListBoxItem>Item two</ListBoxItem>
 					<ListBoxItem>Item three</ListBoxItem>
-				</Section>
-				<Section>
+				</ListBoxSection>
+				<ListBoxSection>
 					<Header>Group 2</Header>
 					<ListBoxItem>Item four</ListBoxItem>
 					<ListBoxItem>Item five</ListBoxItem>
 					<ListBoxItem>Item six</ListBoxItem>
-				</Section>
+				</ListBoxSection>
 			</ListBox>
 		);
 	},

packages/components/stories/Menu.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import type { ComponentType } from 'react';
 import type { Selection as AriaSelection } from 'react-aria-components';
 
 import { Icon } from '@launchpad-ui/icons';
@@ -11,18 +12,25 @@ import {
 	Keyboard,
 	Menu,
 	MenuItem,
+	MenuSection,
 	MenuTrigger,
 	Popover,
-	Section,
 	Separator,
 	SubmenuTrigger,
 	Text,
 } from '../src';
 
 const meta: Meta<typeof Menu> = {
 	component: Menu,
-	// @ts-ignore
-	subcomponents: { MenuItem, MenuTrigger, SubmenuTrigger, Section, Header, Keyboard, Separator },
+	subcomponents: {
+		MenuItem,
+		MenuTrigger,
+		SubmenuTrigger,
+		MenuSection,
+		Header,
+		Keyboard,
+		Separator,
+	} as Record<string, ComponentType<unknown>>,
 	title: 'Components/Collections/Menu',
 	parameters: {
 		status: {
@@ -83,15 +91,15 @@ export const Grouping: Story = {
 				<Button>Trigger</Button>
 				<Popover>
 					<Menu {...args}>
-						<Section>
+						<MenuSection>
 							<Header>Group 1</Header>
 							<MenuItem>Item one</MenuItem>
 							<MenuItem>Item two</MenuItem>
-						</Section>
-						<Section>
+						</MenuSection>
+						<MenuSection>
 							<Header>Group 2</Header>
 							<MenuItem>Item three</MenuItem>
-						</Section>
+						</MenuSection>
 					</Menu>
 				</Popover>
 			</MenuTrigger>

packages/components/stories/Modal.stories.tsx

@@ -1,6 +1,8 @@
 import type { Meta, ReactRenderer, StoryObj } from '@storybook/react';
-import { expect, userEvent, within } from '@storybook/test';
 import type { PlayFunction } from '@storybook/types';
+import type { ComponentType } from 'react';
+
+import { expect, userEvent, within } from '@storybook/test';
 
 import { allModes } from '../../../.storybook/modes';
 import {
@@ -16,8 +18,10 @@ import {
 
 const meta: Meta<typeof Modal> = {
 	component: Modal,
-	// @ts-ignore
-	subcomponents: { ModalOverlay, Dialog, DialogTrigger, Heading },
+	subcomponents: { ModalOverlay, Dialog, DialogTrigger, Heading } as Record<
+		string,
+		ComponentType<unknown>
+	>,
 	title: 'Components/Overlays/Modal',
 	parameters: {
 		status: {

packages/components/stories/Popover.stories.tsx

@@ -1,14 +1,14 @@
 import type { Meta, ReactRenderer, StoryObj } from '@storybook/react';
 import type { PlayFunction } from '@storybook/types';
+import type { ComponentType } from 'react';
 
 import { expect, userEvent, within } from '@storybook/test';
 
 import { Button, Dialog, DialogTrigger, Heading, OverlayArrow, Popover, Pressable } from '../src';
 
 const meta: Meta<typeof Popover> = {
 	component: Popover,
-	// @ts-ignore
-	subcomponents: { OverlayArrow, DialogTrigger },
+	subcomponents: { OverlayArrow, DialogTrigger } as Record<string, ComponentType<unknown>>,
 	title: 'Components/Overlays/Popover',
 	parameters: {
 		status: {

packages/components/stories/RadioGroup.stories.tsx

@@ -1,13 +1,13 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import type { ComponentType } from 'react';
 
 import { userEvent, within } from '@storybook/test';
 
 import { Button, FieldError, Form, Label, Radio, RadioGroup, Text } from '../src';
 
 const meta: Meta<typeof RadioGroup> = {
 	component: RadioGroup,
-	// @ts-ignore
-	subcomponents: { Radio },
+	subcomponents: { Radio } as Record<string, ComponentType<unknown>>,
 	title: 'Components/Forms/RadioGroup',
 	parameters: {
 		status: {

packages/components/stories/RangeCalendar.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import type { ComponentType } from 'react';
 
 import {
 	endOfMonth,
@@ -27,8 +28,7 @@ import {
 
 const meta: Meta<typeof RangeCalendar> = {
 	component: RangeCalendar,
-	// @ts-ignore
-	subcomponents: { CalendarCell, CalendarGrid, Heading },
+	subcomponents: { CalendarCell, CalendarGrid, Heading } as Record<string, ComponentType<unknown>>,
 	title: 'Components/Date and Time/RangeCalendar',
 	parameters: {
 		status: {

packages/components/stories/Select.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import type { ComponentType } from 'react';
 
 import { Icon } from '@launchpad-ui/icons';
 import { vars } from '@launchpad-ui/vars';
@@ -8,8 +9,7 @@ import { Button, Label, ListBox, ListBoxItem, Popover, Select, SelectValue, Text
 
 const meta: Meta<typeof Select> = {
 	component: Select,
-	// @ts-ignore
-	subcomponents: { SelectValue },
+	subcomponents: { SelectValue } as Record<string, ComponentType<unknown>>,
 	title: 'Components/Pickers/Select',
 	parameters: {
 		status: {