diff --git a/.changeset/giant-shirts-hear.md b/.changeset/giant-shirts-hear.md
new file mode 100644
index 000000000..b02208b49
--- /dev/null
+++ b/.changeset/giant-shirts-hear.md
@@ -0,0 +1,5 @@
+---
+"@launchpad-ui/components": patch
+---
+
+Replace `Section` with `ListBoxSection` and `MenuSection`
diff --git a/package.json b/package.json
index 895239a98..0858216e6 100644
--- a/package.json
+++ b/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",
diff --git a/packages/components/__tests__/Menu.spec.tsx b/packages/components/__tests__/Menu.spec.tsx
index 88d80d977..b0f203174 100644
--- a/packages/components/__tests__/Menu.spec.tsx
+++ b/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', () => {
,
diff --git a/packages/components/src/Section.tsx b/packages/components/src/Section.tsx
index fc6b96d94..70dc2ac7c 100644
--- a/packages/components/src/Section.tsx
+++ b/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 = (
- { className, ...props }: SectionProps,
+const _ListBoxSection = (
+ { className, ...props }: ListBoxSectionProps,
ref: ForwardedRef,
) => {
- return ;
+ return ;
};
-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 = (
+ { className, ...props }: MenuSectionProps,
+ ref: ForwardedRef,
+) => {
+ return ;
+};
+
+/**
+ * A MenuSection represents a section within a Menu.
+ */
+const MenuSection = (forwardRef as forwardRefType)(_MenuSection);
+
+export { ListBoxSection, MenuSection };
+export type { ListBoxSectionProps, MenuSectionProps };
diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
index 448cc3d79..5bccf57fc 100644
--- a/packages/components/src/index.ts
+++ b/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';
diff --git a/packages/components/stories/Breadcrumbs.stories.tsx b/packages/components/stories/Breadcrumbs.stories.tsx
index d96d842d5..faf6f0bbb 100644
--- a/packages/components/stories/Breadcrumbs.stories.tsx
+++ b/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 = {
component: Breadcrumbs,
- // @ts-ignore
- subcomponents: { Breadcrumb },
+ subcomponents: { Breadcrumb } as Record>,
title: 'Components/Navigation/Breadcrumbs',
parameters: {
status: {
diff --git a/packages/components/stories/Calendar.stories.tsx b/packages/components/stories/Calendar.stories.tsx
index 3dec445ec..bba9389f5 100644
--- a/packages/components/stories/Calendar.stories.tsx
+++ b/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 = {
component: Calendar,
- // @ts-ignore
- subcomponents: { CalendarCell, CalendarGrid, CalendarPicker, Heading, Preset },
+ subcomponents: { CalendarCell, CalendarGrid, CalendarPicker, Heading, Preset } as Record<
+ string,
+ ComponentType
+ >,
title: 'Components/Date and Time/Calendar',
parameters: {
status: {
diff --git a/packages/components/stories/ComboBox.stories.tsx b/packages/components/stories/ComboBox.stories.tsx
index f6e3fb472..ccae29459 100644
--- a/packages/components/stories/ComboBox.stories.tsx
+++ b/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 = {
component: ComboBox,
- // @ts-ignore
- subcomponents: { ComboBoxClearButton },
+ subcomponents: { ComboBoxClearButton } as Record>,
title: 'Components/Pickers/ComboBox',
parameters: {
status: {
diff --git a/packages/components/stories/DateField.stories.tsx b/packages/components/stories/DateField.stories.tsx
index d66ceb922..29fa1cb67 100644
--- a/packages/components/stories/DateField.stories.tsx
+++ b/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 = {
component: DateField,
- // @ts-ignore
- subcomponents: { DateInput, DateSegment },
+ subcomponents: { DateInput, DateSegment } as Record>,
title: 'Components/Date and Time/DateField',
parameters: {
status: {
diff --git a/packages/components/stories/Disclosure.stories.tsx b/packages/components/stories/Disclosure.stories.tsx
index af135ccbf..c5d0bb5b4 100644
--- a/packages/components/stories/Disclosure.stories.tsx
+++ b/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 = {
component: Disclosure,
- // @ts-ignore
- subcomponents: { DisclosurePanel },
+ subcomponents: { DisclosurePanel } as Record>,
title: 'Components/Navigation/Disclosure',
parameters: {
status: {
diff --git a/packages/components/stories/GridList.stories.tsx b/packages/components/stories/GridList.stories.tsx
index ac400cc6a..fb7381f84 100644
--- a/packages/components/stories/GridList.stories.tsx
+++ b/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 = {
component: GridList,
- // @ts-ignore
- subcomponents: { GridListItem },
+ subcomponents: { GridListItem } as Record>,
title: 'Components/Collections/GridList',
parameters: {
status: {
diff --git a/packages/components/stories/ListBox.stories.tsx b/packages/components/stories/ListBox.stories.tsx
index 223620a65..8f19df41e 100644
--- a/packages/components/stories/ListBox.stories.tsx
+++ b/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 = {
component: ListBox,
- // @ts-ignore
- subcomponents: { ListBoxItem, Section, Header },
+ subcomponents: { ListBoxItem, ListBoxSection, Header } as Record>,
title: 'Components/Collections/ListBox',
parameters: {
status: {
@@ -39,18 +39,18 @@ export const Grouping: Story = {
render: (args) => {
return (
-
+
Item one
Item two
Item three
-
-
+
+
Item four
Item five
Item six
-
+
);
},
diff --git a/packages/components/stories/Menu.stories.tsx b/packages/components/stories/Menu.stories.tsx
index e3229c674..3a323be40 100644
--- a/packages/components/stories/Menu.stories.tsx
+++ b/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,9 +12,9 @@ import {
Keyboard,
Menu,
MenuItem,
+ MenuSection,
MenuTrigger,
Popover,
- Section,
Separator,
SubmenuTrigger,
Text,
@@ -21,8 +22,15 @@ import {
const meta: Meta = {
component: Menu,
- // @ts-ignore
- subcomponents: { MenuItem, MenuTrigger, SubmenuTrigger, Section, Header, Keyboard, Separator },
+ subcomponents: {
+ MenuItem,
+ MenuTrigger,
+ SubmenuTrigger,
+ MenuSection,
+ Header,
+ Keyboard,
+ Separator,
+ } as Record>,
title: 'Components/Collections/Menu',
parameters: {
status: {
@@ -83,15 +91,15 @@ export const Grouping: Story = {
diff --git a/packages/components/stories/Modal.stories.tsx b/packages/components/stories/Modal.stories.tsx
index 8ac15e8d2..59a022b1a 100644
--- a/packages/components/stories/Modal.stories.tsx
+++ b/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 = {
component: Modal,
- // @ts-ignore
- subcomponents: { ModalOverlay, Dialog, DialogTrigger, Heading },
+ subcomponents: { ModalOverlay, Dialog, DialogTrigger, Heading } as Record<
+ string,
+ ComponentType
+ >,
title: 'Components/Overlays/Modal',
parameters: {
status: {
diff --git a/packages/components/stories/Popover.stories.tsx b/packages/components/stories/Popover.stories.tsx
index 118ebfda7..d1b51cd1b 100644
--- a/packages/components/stories/Popover.stories.tsx
+++ b/packages/components/stories/Popover.stories.tsx
@@ -1,5 +1,6 @@
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';
@@ -7,8 +8,7 @@ import { Button, Dialog, DialogTrigger, Heading, OverlayArrow, Popover, Pressabl
const meta: Meta = {
component: Popover,
- // @ts-ignore
- subcomponents: { OverlayArrow, DialogTrigger },
+ subcomponents: { OverlayArrow, DialogTrigger } as Record>,
title: 'Components/Overlays/Popover',
parameters: {
status: {
diff --git a/packages/components/stories/RadioGroup.stories.tsx b/packages/components/stories/RadioGroup.stories.tsx
index 2800e9c9e..02f4f0254 100644
--- a/packages/components/stories/RadioGroup.stories.tsx
+++ b/packages/components/stories/RadioGroup.stories.tsx
@@ -1,4 +1,5 @@
import type { Meta, StoryObj } from '@storybook/react';
+import type { ComponentType } from 'react';
import { userEvent, within } from '@storybook/test';
@@ -6,8 +7,7 @@ import { Button, FieldError, Form, Label, Radio, RadioGroup, Text } from '../src
const meta: Meta = {
component: RadioGroup,
- // @ts-ignore
- subcomponents: { Radio },
+ subcomponents: { Radio } as Record>,
title: 'Components/Forms/RadioGroup',
parameters: {
status: {
diff --git a/packages/components/stories/RangeCalendar.stories.tsx b/packages/components/stories/RangeCalendar.stories.tsx
index a188090a7..c0f6c29b0 100644
--- a/packages/components/stories/RangeCalendar.stories.tsx
+++ b/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 = {
component: RangeCalendar,
- // @ts-ignore
- subcomponents: { CalendarCell, CalendarGrid, Heading },
+ subcomponents: { CalendarCell, CalendarGrid, Heading } as Record>,
title: 'Components/Date and Time/RangeCalendar',
parameters: {
status: {
diff --git a/packages/components/stories/Select.stories.tsx b/packages/components/stories/Select.stories.tsx
index 60a91b003..8a87a158f 100644
--- a/packages/components/stories/Select.stories.tsx
+++ b/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 = {
component: Select,
- // @ts-ignore
- subcomponents: { SelectValue },
+ subcomponents: { SelectValue } as Record>,
title: 'Components/Pickers/Select',
parameters: {
status: {
diff --git a/packages/components/stories/Table.stories.tsx b/packages/components/stories/Table.stories.tsx
index 8cedc44f1..1e6b1d15d 100644
--- a/packages/components/stories/Table.stories.tsx
+++ b/packages/components/stories/Table.stories.tsx
@@ -1,4 +1,5 @@
import type { Meta, StoryObj } from '@storybook/react';
+import type { ComponentType } from 'react';
import type { SortDescriptor } from 'react-aria-components';
import { useState } from 'react';
@@ -18,8 +19,10 @@ import {
const meta: Meta = {
component: Table,
- // @ts-ignore
- subcomponents: { Cell, Column, ResizableTableContainer, Row, TableBody, TableHeader },
+ subcomponents: { Cell, Column, ResizableTableContainer, Row, TableBody, TableHeader } as Record<
+ string,
+ ComponentType
+ >,
title: 'Components/Collections/Table',
parameters: {
status: {
diff --git a/packages/components/stories/Tabs.stories.tsx b/packages/components/stories/Tabs.stories.tsx
index 358de6234..a930c3d36 100644
--- a/packages/components/stories/Tabs.stories.tsx
+++ b/packages/components/stories/Tabs.stories.tsx
@@ -1,4 +1,5 @@
import type { Meta, StoryObj } from '@storybook/react';
+import type { ComponentType } from 'react';
import { Tab, TabList, TabPanel, Tabs } from '../src';
@@ -7,8 +8,7 @@ import { Route, Routes, useLocation } from 'react-router-dom';
const meta: Meta = {
component: Tabs,
- // @ts-ignore
- subcomponents: { Tab, TabList, TabPanel },
+ subcomponents: { Tab, TabList, TabPanel } as Record>,
title: 'Components/Navigation/Tabs',
parameters: {
status: {
diff --git a/packages/components/stories/TagGroup.stories.tsx b/packages/components/stories/TagGroup.stories.tsx
index 7140801ba..54fcaa618 100644
--- a/packages/components/stories/TagGroup.stories.tsx
+++ b/packages/components/stories/TagGroup.stories.tsx
@@ -1,4 +1,5 @@
import type { Meta, StoryObj } from '@storybook/react';
+import type { ComponentType } from 'react';
import { userEvent } from '@storybook/test';
import { useListData } from 'react-stately';
@@ -7,8 +8,7 @@ import { Label, Tag, TagGroup, TagList } from '../src';
const meta: Meta = {
component: TagGroup,
- // @ts-ignore
- subcomponents: { TagList, Tag },
+ subcomponents: { TagList, Tag } as Record>,
title: 'Components/Collections/TagGroup',
parameters: {
status: {
diff --git a/packages/components/stories/TextField.stories.tsx b/packages/components/stories/TextField.stories.tsx
index dd91599dd..a0f287200 100644
--- a/packages/components/stories/TextField.stories.tsx
+++ b/packages/components/stories/TextField.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, within } from '@storybook/test';
@@ -7,8 +8,10 @@ import { FieldError, Input, Label, Text, TextArea, TextField } from '../src';
const meta: Meta = {
component: TextField,
- // @ts-ignore
- subcomponents: { Label, Text, Input, TextArea, FieldError },
+ subcomponents: { Label, Text, Input, TextArea, FieldError } as Record<
+ string,
+ ComponentType
+ >,
title: 'Components/Forms/TextField',
parameters: {
status: {
diff --git a/packages/components/stories/TimeField.stories.tsx b/packages/components/stories/TimeField.stories.tsx
index e35b86449..01cc7c3df 100644
--- a/packages/components/stories/TimeField.stories.tsx
+++ b/packages/components/stories/TimeField.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 { DateInput, DateSegment, Label, Text, TimeField } from '../src';
const meta: Meta = {
component: TimeField,
- // @ts-ignore
- subcomponents: { DateInput, DateSegment },
+ subcomponents: { DateInput, DateSegment } as Record>,
title: 'Components/Date and Time/TimeField',
parameters: {
status: {
diff --git a/packages/components/stories/Toast.stories.tsx b/packages/components/stories/Toast.stories.tsx
index 7cc612943..12d5404cb 100644
--- a/packages/components/stories/Toast.stories.tsx
+++ b/packages/components/stories/Toast.stories.tsx
@@ -1,4 +1,5 @@
import type { Meta, StoryObj } from '@storybook/react';
+import type { ComponentType } from 'react';
import { expect, userEvent, within } from '@storybook/test';
@@ -14,8 +15,7 @@ import {
const meta: Meta = {
component: ToastContainer,
- // @ts-ignore
- subcomponents: { SnackbarContainer },
+ subcomponents: { SnackbarContainer } as Record>,
title: 'Components/Status/Toast',
parameters: {
status: {
diff --git a/packages/components/stories/ToggleButtonGroup.stories.tsx b/packages/components/stories/ToggleButtonGroup.stories.tsx
index d815e1f30..1a257245f 100644
--- a/packages/components/stories/ToggleButtonGroup.stories.tsx
+++ b/packages/components/stories/ToggleButtonGroup.stories.tsx
@@ -1,11 +1,11 @@
import type { Meta, StoryObj } from '@storybook/react';
+import type { ComponentType } from 'react';
import { ToggleButton, ToggleButtonGroup, ToggleIconButton } from '../src';
const meta: Meta = {
component: ToggleButtonGroup,
- // @ts-ignore
- subcomponents: { ToggleButton },
+ subcomponents: { ToggleButton } as Record>,
title: 'Components/Buttons/ToggleButtonGroup',
parameters: {
status: {
diff --git a/packages/components/stories/Tooltip.stories.tsx b/packages/components/stories/Tooltip.stories.tsx
index 1db1c8273..472718e95 100644
--- a/packages/components/stories/Tooltip.stories.tsx
+++ b/packages/components/stories/Tooltip.stories.tsx
@@ -1,5 +1,6 @@
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';
@@ -7,8 +8,7 @@ import { Button, Pressable, Tooltip, TooltipTrigger } from '../src';
const meta: Meta = {
component: Tooltip,
- // @ts-ignore
- subcomponents: { TooltipTrigger, Pressable },
+ subcomponents: { TooltipTrigger, Pressable } as Record>,
title: 'Components/Overlays/Tooltip',
parameters: {
status: {