From b74226ef4fd3dde7972ce192ceb0488f0ed5f9d0 Mon Sep 17 00:00:00 2001 From: Shamayl Naaz Date: Tue, 24 Sep 2024 10:16:06 +0000 Subject: [PATCH 01/25] fix(menutrigger): role to be generic --- src/components/MenuTrigger/MenuTrigger.tsx | 1 + .../MenuTrigger/MenuTrigger.unit.test.tsx | 8 +-- .../MenuTrigger.unit.test.tsx.snap | 63 +++++++++++-------- 3 files changed, 41 insertions(+), 31 deletions(-) diff --git a/src/components/MenuTrigger/MenuTrigger.tsx b/src/components/MenuTrigger/MenuTrigger.tsx index 8247c393f9..cfc25a40b1 100644 --- a/src/components/MenuTrigger/MenuTrigger.tsx +++ b/src/components/MenuTrigger/MenuTrigger.tsx @@ -122,6 +122,7 @@ const MenuTrigger = forwardRef( className={classnames(className, STYLE.wrapper)} trigger="click" id={id} + role="generic" style={style} placement={placement as PlacementType} interactive={true} diff --git a/src/components/MenuTrigger/MenuTrigger.unit.test.tsx b/src/components/MenuTrigger/MenuTrigger.unit.test.tsx index f6804d9551..9b102294ee 100644 --- a/src/components/MenuTrigger/MenuTrigger.unit.test.tsx +++ b/src/components/MenuTrigger/MenuTrigger.unit.test.tsx @@ -132,7 +132,7 @@ describe(' - Enzyme', () => { .find(MenuTrigger) .find(ModalContainer) .children() - .find('[role="dialog"]') + .find('[role="generic"]') .getDOMNode(); expect(element.classList.contains(CONSTANTS.STYLE.wrapper)).toBe(true); @@ -147,7 +147,7 @@ describe(' - Enzyme', () => { .find(MenuTrigger) .find(ModalContainer) .children() - .find('[role="dialog"]') + .find('[role="generic"]') .getDOMNode(); expect(element.classList.contains(className)).toBe(true); @@ -162,7 +162,7 @@ describe(' - Enzyme', () => { .find(MenuTrigger) .find(ModalContainer) .children() - .find('[role="dialog"]') + .find('[role="generic"]') .getDOMNode(); expect(element.id).toBe(id); @@ -178,7 +178,7 @@ describe(' - Enzyme', () => { .find(MenuTrigger) .find(ModalContainer) .children() - .find('[role="dialog"]') + .find('[role="generic"]') .getDOMNode(); expect(element.getAttribute('style')).toBe(styleString); diff --git a/src/components/MenuTrigger/MenuTrigger.unit.test.tsx.snap b/src/components/MenuTrigger/MenuTrigger.unit.test.tsx.snap index 32c9364970..f7a26cc88a 100644 --- a/src/components/MenuTrigger/MenuTrigger.unit.test.tsx.snap +++ b/src/components/MenuTrigger/MenuTrigger.unit.test.tsx.snap @@ -19,6 +19,7 @@ exports[` - Enzyme snapshot should match snapshot 1`] = ` onClickOutside={[Function]} onKeyDown={[Function]} placement="bottom-start" + role="generic" setInstance={[Function]} showArrow={false} trigger="click" @@ -290,7 +291,7 @@ exports[` - Enzyme snapshot should match snapshot 1`] = ` data-padded="true" data-placement="bottom-start" data-round="75" - role="dialog" + role="generic" >
- Enzyme snapshot should match snapshot 1`] = ` isPadded={true} onKeyDown={[Function]} placement="bottom-start" - role="dialog" + role="generic" round={75} showArrow={false} > @@ -484,7 +485,7 @@ exports[` - Enzyme snapshot should match snapshot 1`] = ` data-placement="bottom-start" data-round={75} onKeyDown={[Function]} - role="dialog" + role="generic" > <_Menu key=".$2" @@ -2219,6 +2220,7 @@ exports[` - Enzyme snapshot should match snapshot with className onClickOutside={[Function]} onKeyDown={[Function]} placement="bottom-start" + role="generic" setInstance={[Function]} showArrow={false} trigger="click" @@ -2490,7 +2492,7 @@ exports[` - Enzyme snapshot should match snapshot with className data-padded="true" data-placement="bottom-start" data-round="75" - role="dialog" + role="generic" >
- Enzyme snapshot should match snapshot with className isPadded={true} onKeyDown={[Function]} placement="bottom-start" - role="dialog" + role="generic" round={75} showArrow={false} > @@ -2684,7 +2686,7 @@ exports[` - Enzyme snapshot should match snapshot with className data-placement="bottom-start" data-round={75} onKeyDown={[Function]} - role="dialog" + role="generic" > <_Menu key=".$2" @@ -4419,6 +4421,7 @@ exports[` - Enzyme snapshot should match snapshot with color 1`] onClickOutside={[Function]} onKeyDown={[Function]} placement="bottom-start" + role="generic" setInstance={[Function]} showArrow={false} trigger="click" @@ -4690,7 +4693,7 @@ exports[` - Enzyme snapshot should match snapshot with color 1`] data-padded="true" data-placement="bottom-start" data-round="75" - role="dialog" + role="generic" >
- Enzyme snapshot should match snapshot with color 1`] isPadded={true} onKeyDown={[Function]} placement="bottom-start" - role="dialog" + role="generic" round={75} showArrow={false} > @@ -4884,7 +4887,7 @@ exports[` - Enzyme snapshot should match snapshot with color 1`] data-placement="bottom-start" data-round={75} onKeyDown={[Function]} - role="dialog" + role="generic" > <_Menu key=".$2" @@ -6620,6 +6623,7 @@ exports[` - Enzyme snapshot should match snapshot with id 1`] = ` onClickOutside={[Function]} onKeyDown={[Function]} placement="bottom-start" + role="generic" setInstance={[Function]} showArrow={false} trigger="click" @@ -6892,7 +6896,7 @@ exports[` - Enzyme snapshot should match snapshot with id 1`] = ` data-placement="bottom-start" data-round="75" id="example-id" - role="dialog" + role="generic" >
- Enzyme snapshot should match snapshot with id 1`] = ` isPadded={true} onKeyDown={[Function]} placement="bottom-start" - role="dialog" + role="generic" round={75} showArrow={false} > @@ -7088,7 +7092,7 @@ exports[` - Enzyme snapshot should match snapshot with id 1`] = ` data-round={75} id="example-id" onKeyDown={[Function]} - role="dialog" + role="generic" > <_Menu key=".$2" @@ -8823,6 +8827,7 @@ exports[` - Enzyme snapshot should match snapshot with placement onClickOutside={[Function]} onKeyDown={[Function]} placement="top" + role="generic" setInstance={[Function]} showArrow={false} trigger="click" @@ -9094,7 +9099,7 @@ exports[` - Enzyme snapshot should match snapshot with placement data-padded="true" data-placement="top" data-round="75" - role="dialog" + role="generic" >
- Enzyme snapshot should match snapshot with placement isPadded={true} onKeyDown={[Function]} placement="top" - role="dialog" + role="generic" round={75} showArrow={false} > @@ -9288,7 +9293,7 @@ exports[` - Enzyme snapshot should match snapshot with placement data-placement="top" data-round={75} onKeyDown={[Function]} - role="dialog" + role="generic" > <_Menu key=".$2" @@ -11023,6 +11028,7 @@ exports[` - Enzyme snapshot should match snapshot with showArrow onClickOutside={[Function]} onKeyDown={[Function]} placement="bottom-start" + role="generic" setInstance={[Function]} showArrow={true} trigger="click" @@ -11294,7 +11300,7 @@ exports[` - Enzyme snapshot should match snapshot with showArrow data-padded="true" data-placement="bottom-start" data-round="75" - role="dialog" + role="generic" >
- Enzyme snapshot should match snapshot with showArrow isPadded={true} onKeyDown={[Function]} placement="bottom-start" - role="dialog" + role="generic" round={75} showArrow={true} > @@ -11519,7 +11525,7 @@ exports[` - Enzyme snapshot should match snapshot with showArrow data-placement="bottom-start" data-round={75} onKeyDown={[Function]} - role="dialog" + role="generic" > <_Menu key=".$2" @@ -13293,6 +13299,7 @@ exports[` - Enzyme snapshot should match snapshot with style 1`] onClickOutside={[Function]} onKeyDown={[Function]} placement="bottom-start" + role="generic" setInstance={[Function]} showArrow={false} style={ @@ -13569,7 +13576,7 @@ exports[` - Enzyme snapshot should match snapshot with style 1`] data-padded="true" data-placement="bottom-start" data-round="75" - role="dialog" + role="generic" style="color: pink;" >
- Enzyme snapshot should match snapshot with style 1`] isPadded={true} onKeyDown={[Function]} placement="bottom-start" - role="dialog" + role="generic" round={75} showArrow={false} style={ @@ -13769,7 +13776,7 @@ exports[` - Enzyme snapshot should match snapshot with style 1`] data-placement="bottom-start" data-round={75} onKeyDown={[Function]} - role="dialog" + role="generic" style={ Object { "color": "pink", @@ -15509,6 +15516,7 @@ exports[` - Enzyme snapshot should match snapshot with variant 1` onClickOutside={[Function]} onKeyDown={[Function]} placement="bottom-start" + role="generic" setInstance={[Function]} showArrow={false} trigger="click" @@ -15780,7 +15788,7 @@ exports[` - Enzyme snapshot should match snapshot with variant 1` data-padded="true" data-placement="bottom-start" data-round="50" - role="dialog" + role="generic" >
- Enzyme snapshot should match snapshot with variant 1` isPadded={true} onKeyDown={[Function]} placement="bottom-start" - role="dialog" + role="generic" round={50} showArrow={false} > @@ -15974,7 +15982,7 @@ exports[` - Enzyme snapshot should match snapshot with variant 1` data-placement="bottom-start" data-round={50} onKeyDown={[Function]} - role="dialog" + role="generic" > <_Menu key=".$2" @@ -17709,6 +17717,7 @@ exports[` - Enzyme snapshot should match snapshot with zIndex 1`] onClickOutside={[Function]} onKeyDown={[Function]} placement="bottom-start" + role="generic" setInstance={[Function]} showArrow={false} trigger="click" @@ -17984,7 +17993,7 @@ exports[` - Enzyme snapshot should match snapshot with zIndex 1`] data-padded="true" data-placement="bottom-start" data-round="75" - role="dialog" + role="generic" >
- Enzyme snapshot should match snapshot with zIndex 1`] isPadded={true} onKeyDown={[Function]} placement="bottom-start" - role="dialog" + role="generic" round={75} showArrow={false} > @@ -18178,7 +18187,7 @@ exports[` - Enzyme snapshot should match snapshot with zIndex 1`] data-placement="bottom-start" data-round={75} onKeyDown={[Function]} - role="dialog" + role="generic" > <_Menu key=".$2" From 36541410ada3a79710f85cb077679e66bc942c53 Mon Sep 17 00:00:00 2001 From: Gabriel Lee Date: Fri, 20 Sep 2024 19:36:31 +0100 Subject: [PATCH 02/25] feat(icon): add brand visuals icons to icon component --- package.json | 1 + src/components/Icon/Icon.constants.ts | 1 + src/components/Icon/Icon.stories.tsx | 12 ++++- src/components/Icon/Icon.tsx | 3 +- src/components/Icon/Icon.types.ts | 7 ++- src/hooks/useDynamicSVGImport.test.ts | 74 ++++++++++++++++----------- src/hooks/useDynamicSVGImport.ts | 6 ++- yarn.lock | 8 +++ 8 files changed, 76 insertions(+), 36 deletions(-) diff --git a/package.json b/package.json index bfcc6e227f..9bd51854d7 100644 --- a/package.json +++ b/package.json @@ -95,6 +95,7 @@ "dependencies": { "@babel/runtime": "^7.0.0", "@momentum-design/animations": "^0.0.4", + "@momentum-design/brand-visuals": "^0.0.24", "@momentum-design/icons": "0.0.164", "@momentum-design/tokens": "0.0.77", "@momentum-ui/design-tokens": "^0.0.63", diff --git a/src/components/Icon/Icon.constants.ts b/src/components/Icon/Icon.constants.ts index 7f6a6ccd24..6a6ccd4dc7 100644 --- a/src/components/Icon/Icon.constants.ts +++ b/src/components/Icon/Icon.constants.ts @@ -58,6 +58,7 @@ const DEFAULTS = { AUTO_SCALE: false, VIEW_BOX_SPEC: VIEW_BOX_SPECS.NORMAL, WEIGHTLESS: false, + LIBRARY: 'icons' as const, }; const EXCEPTION_ICONS_LIST: Array = [ diff --git a/src/components/Icon/Icon.stories.tsx b/src/components/Icon/Icon.stories.tsx index 74305cfda8..321bd5bf6a 100644 --- a/src/components/Icon/Icon.stories.tsx +++ b/src/components/Icon/Icon.stories.tsx @@ -66,6 +66,16 @@ Weights.parameters = { ], }; +const BrandVisuals = Template(Icon).bind({}); + +BrandVisuals.argTypes = { ...argTypes }; + +BrandVisuals.args = { + name: 'cisco-ai-assistant-color', + library: 'brand-visuals', + weightless: true, +}; + const Common = MultiTemplate(Icon).bind({}); Common.argTypes = { ...argTypes }; @@ -88,4 +98,4 @@ Common.parameters = { ], }; -export { Example, Sizes, Weights, Common }; +export { Example, Sizes, Weights, BrandVisuals, Common }; diff --git a/src/components/Icon/Icon.tsx b/src/components/Icon/Icon.tsx index 075927a102..538d48b18e 100644 --- a/src/components/Icon/Icon.tsx +++ b/src/components/Icon/Icon.tsx @@ -31,10 +31,11 @@ const Icon: React.FC = (props: Props) => { weight, weightless = DEFAULTS.WEIGHTLESS, ariaLabel, + library = DEFAULTS.LIBRARY, ...otherProps } = props; const resolvedSVGName = getResolvedSVGName(name, weight, weightless); - const { SvgIcon, error } = useDynamicSVGImport(resolvedSVGName); + const { SvgIcon, error } = useDynamicSVGImport(resolvedSVGName, undefined, library); const isColoredIcon = /-colou?red$/.test(name as string); diff --git a/src/components/Icon/Icon.types.ts b/src/components/Icon/Icon.types.ts index b5cab9690c..c0ecb953a8 100644 --- a/src/components/Icon/Icon.types.ts +++ b/src/components/Icon/Icon.types.ts @@ -1,11 +1,12 @@ import { CSSProperties } from 'react'; import IconKeys from '@momentum-design/icons/dist/types/types'; +import BrandVisualsKeys from '@momentum-design/brand-visuals/dist/types/types'; export type IconWeight = 'light' | 'regular' | 'bold' | 'filled'; type RemoveWeight = T extends `${infer Base}-${IconWeight}` ? Base : T; -export type InferredIconName = RemoveWeight; +export type InferredIconName = RemoveWeight; export type IconScale = | 8 @@ -29,6 +30,8 @@ export type IconScale = | 'auto' | 'inherit'; +export type IconLibrary = 'icons' | 'brand-visuals'; + export interface Props { /** * If set to true, then the icon size will scale according to the parent element. @@ -110,4 +113,6 @@ export interface Props { * An example would be brand icons. */ weightless?: boolean; + + library?: IconLibrary; } diff --git a/src/hooks/useDynamicSVGImport.test.ts b/src/hooks/useDynamicSVGImport.test.ts index bd2f46b32e..e9913b9a63 100644 --- a/src/hooks/useDynamicSVGImport.test.ts +++ b/src/hooks/useDynamicSVGImport.test.ts @@ -1,39 +1,47 @@ +import { IconLibrary } from 'src/components/Icon/Icon.types'; import { useDynamicSVGImport } from './useDynamicSVGImport'; import { renderHook } from '@testing-library/react-hooks'; describe('Icon', () => { beforeEach(() => jest.resetModules()); - it('should successfully return svg component if icon exists', async () => { - const name = '3d-object-regular'; - const onCompleteMock = jest.fn(); - const onErrorMock = jest.fn(); - const mockSVG = 'SVG_CONTENT'; - jest.mock( - '@momentum-design/icons/dist/svg/3d-object-regular.svg?svgr', - () => { - return { ReactComponent: mockSVG }; - }, - { virtual: true } - ); + it.each(['icons', 'brand-visuals'] as IconLibrary[])( + 'should successfully return %s library svg component if icon exists', + async (library) => { + const name = '3d-object-regular'; + const onCompleteMock = jest.fn(); + const onErrorMock = jest.fn(); + const mockSVG = 'SVG_CONTENT'; + jest.mock( + `@momentum-design/${library}/dist/svg/3d-object-regular.svg?svgr`, + () => { + return { ReactComponent: mockSVG }; + }, + { virtual: true } + ); - const hook = renderHook(() => - useDynamicSVGImport(name, { - onCompleted: onCompleteMock, - onError: onErrorMock, - }) - ); - expect(hook.result.current.loading).toBe(true); + const hook = renderHook(() => + useDynamicSVGImport( + name, + { + onCompleted: onCompleteMock, + onError: onErrorMock, + }, + library + ) + ); + expect(hook.result.current.loading).toBe(true); - await hook.waitForNextUpdate(); + await hook.waitForNextUpdate(); - expect(onCompleteMock).toBeCalledTimes(1); - expect(onCompleteMock).toBeCalledWith(name, mockSVG); - expect(onErrorMock).not.toBeCalled(); - expect(hook.result.current.SvgIcon).toEqual(mockSVG); - expect(hook.result.current.error).toBeUndefined(); - expect(hook.result.current.loading).toBe(false); - }); + expect(onCompleteMock).toBeCalledTimes(1); + expect(onCompleteMock).toBeCalledWith(name, mockSVG); + expect(onErrorMock).not.toBeCalled(); + expect(hook.result.current.SvgIcon).toEqual(mockSVG); + expect(hook.result.current.error).toBeUndefined(); + expect(hook.result.current.loading).toBe(false); + } + ); it('should return error component does not exist', async () => { const name = 'bad_icon'; @@ -50,10 +58,14 @@ describe('Icon', () => { ); const hook = renderHook(() => - useDynamicSVGImport(name, { - onCompleted: onCompleteMock, - onError: onErrorMock, - }) + useDynamicSVGImport( + name, + { + onCompleted: onCompleteMock, + onError: onErrorMock, + }, + 'icons' + ) ); expect(hook.result.current.loading).toBe(true); diff --git a/src/hooks/useDynamicSVGImport.ts b/src/hooks/useDynamicSVGImport.ts index 5fc41a05a8..4859b72e63 100644 --- a/src/hooks/useDynamicSVGImport.ts +++ b/src/hooks/useDynamicSVGImport.ts @@ -1,5 +1,6 @@ import { useRef, useState, useEffect } from 'react'; import { useIsMounted } from './useIsMounted'; +import { IconLibrary } from 'src/components/Icon/Icon.types'; interface UseDynamicSVGImportOptions { onCompleted?: ( @@ -24,7 +25,8 @@ interface UseDynamicSVGImportReturn { */ function useDynamicSVGImport( name: string, - options: UseDynamicSVGImportOptions = {} + options: UseDynamicSVGImportOptions = {}, + library: IconLibrary ): UseDynamicSVGImportReturn { const ImportedIconRef = useRef>>(); const [loading, setLoading] = useState(false); @@ -38,7 +40,7 @@ function useDynamicSVGImport( try { setError(undefined); ImportedIconRef.current = ( - await import(`@momentum-design/icons/dist/svg/${name}.svg?svgr`) + await import(`@momentum-design/${library}/dist/svg/${name}.svg?svgr`) ).ReactComponent; if (isMounted()) { onCompleted?.(name, ImportedIconRef.current); diff --git a/yarn.lock b/yarn.lock index 7287062da5..95c2fe70d5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2444,6 +2444,13 @@ __metadata: languageName: node linkType: hard +"@momentum-design/brand-visuals@npm:^0.0.24": + version: 0.0.24 + resolution: "@momentum-design/brand-visuals@npm:0.0.24" + checksum: c7bf5e078d9157ed8ede29ba882792e05bd75b78a1ffa4c38dcff40156b81475b3aab7e0e33818d0e35b5cd815c7db0cd9e41a7de01cfc6befd16a78b727d0a7 + languageName: node + linkType: hard + "@momentum-design/icons@npm:0.0.164": version: 0.0.164 resolution: "@momentum-design/icons@npm:0.0.164" @@ -2495,6 +2502,7 @@ __metadata: "@commitlint/config-conventional": ^12.0.1 "@hot-loader/react-dom": ~16.8.0 "@momentum-design/animations": ^0.0.4 + "@momentum-design/brand-visuals": ^0.0.24 "@momentum-design/icons": 0.0.164 "@momentum-design/tokens": 0.0.77 "@momentum-ui/design-tokens": ^0.0.63 From 58ac2be427cbca055bb92e2e62545b48be613620 Mon Sep 17 00:00:00 2001 From: Gabriel Lee Date: Fri, 20 Sep 2024 19:50:11 +0100 Subject: [PATCH 03/25] fix: import --- src/hooks/useDynamicSVGImport.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/hooks/useDynamicSVGImport.ts b/src/hooks/useDynamicSVGImport.ts index 4859b72e63..10cc47e360 100644 --- a/src/hooks/useDynamicSVGImport.ts +++ b/src/hooks/useDynamicSVGImport.ts @@ -1,6 +1,6 @@ import { useRef, useState, useEffect } from 'react'; import { useIsMounted } from './useIsMounted'; -import { IconLibrary } from 'src/components/Icon/Icon.types'; +import { IconLibrary } from '../components/Icon/Icon.types'; interface UseDynamicSVGImportOptions { onCompleted?: ( From 5c5e9fea5edbdcee1247edff007a7eab59cdbfc4 Mon Sep 17 00:00:00 2001 From: Gabriel Lee Date: Tue, 24 Sep 2024 10:36:15 +0100 Subject: [PATCH 04/25] fix: swap arg order --- src/components/Icon/Icon.tsx | 2 +- src/hooks/useDynamicSVGImport.test.ts | 24 ++++++++---------------- src/hooks/useDynamicSVGImport.ts | 4 ++-- 3 files changed, 11 insertions(+), 19 deletions(-) diff --git a/src/components/Icon/Icon.tsx b/src/components/Icon/Icon.tsx index 538d48b18e..ed51337723 100644 --- a/src/components/Icon/Icon.tsx +++ b/src/components/Icon/Icon.tsx @@ -35,7 +35,7 @@ const Icon: React.FC = (props: Props) => { ...otherProps } = props; const resolvedSVGName = getResolvedSVGName(name, weight, weightless); - const { SvgIcon, error } = useDynamicSVGImport(resolvedSVGName, undefined, library); + const { SvgIcon, error } = useDynamicSVGImport(resolvedSVGName, library); const isColoredIcon = /-colou?red$/.test(name as string); diff --git a/src/hooks/useDynamicSVGImport.test.ts b/src/hooks/useDynamicSVGImport.test.ts index e9913b9a63..44386fff35 100644 --- a/src/hooks/useDynamicSVGImport.test.ts +++ b/src/hooks/useDynamicSVGImport.test.ts @@ -21,14 +21,10 @@ describe('Icon', () => { ); const hook = renderHook(() => - useDynamicSVGImport( - name, - { - onCompleted: onCompleteMock, - onError: onErrorMock, - }, - library - ) + useDynamicSVGImport(name, library, { + onCompleted: onCompleteMock, + onError: onErrorMock, + }) ); expect(hook.result.current.loading).toBe(true); @@ -58,14 +54,10 @@ describe('Icon', () => { ); const hook = renderHook(() => - useDynamicSVGImport( - name, - { - onCompleted: onCompleteMock, - onError: onErrorMock, - }, - 'icons' - ) + useDynamicSVGImport(name, 'icons', { + onCompleted: onCompleteMock, + onError: onErrorMock, + }) ); expect(hook.result.current.loading).toBe(true); diff --git a/src/hooks/useDynamicSVGImport.ts b/src/hooks/useDynamicSVGImport.ts index 10cc47e360..f60d47e523 100644 --- a/src/hooks/useDynamicSVGImport.ts +++ b/src/hooks/useDynamicSVGImport.ts @@ -25,8 +25,8 @@ interface UseDynamicSVGImportReturn { */ function useDynamicSVGImport( name: string, - options: UseDynamicSVGImportOptions = {}, - library: IconLibrary + library: IconLibrary, + options: UseDynamicSVGImportOptions = {} ): UseDynamicSVGImportReturn { const ImportedIconRef = useRef>>(); const [loading, setLoading] = useState(false); From aace36f0bd037bcab37551f86fd22f348c88df86 Mon Sep 17 00:00:00 2001 From: Gabriel Lee Date: Wed, 25 Sep 2024 10:41:56 +0100 Subject: [PATCH 05/25] Revert "fix: swap arg order" This reverts commit 5c5e9fea5edbdcee1247edff007a7eab59cdbfc4. --- src/components/Icon/Icon.tsx | 2 +- src/hooks/useDynamicSVGImport.test.ts | 24 ++++++++++++++++-------- src/hooks/useDynamicSVGImport.ts | 4 ++-- 3 files changed, 19 insertions(+), 11 deletions(-) diff --git a/src/components/Icon/Icon.tsx b/src/components/Icon/Icon.tsx index ed51337723..538d48b18e 100644 --- a/src/components/Icon/Icon.tsx +++ b/src/components/Icon/Icon.tsx @@ -35,7 +35,7 @@ const Icon: React.FC = (props: Props) => { ...otherProps } = props; const resolvedSVGName = getResolvedSVGName(name, weight, weightless); - const { SvgIcon, error } = useDynamicSVGImport(resolvedSVGName, library); + const { SvgIcon, error } = useDynamicSVGImport(resolvedSVGName, undefined, library); const isColoredIcon = /-colou?red$/.test(name as string); diff --git a/src/hooks/useDynamicSVGImport.test.ts b/src/hooks/useDynamicSVGImport.test.ts index 44386fff35..e9913b9a63 100644 --- a/src/hooks/useDynamicSVGImport.test.ts +++ b/src/hooks/useDynamicSVGImport.test.ts @@ -21,10 +21,14 @@ describe('Icon', () => { ); const hook = renderHook(() => - useDynamicSVGImport(name, library, { - onCompleted: onCompleteMock, - onError: onErrorMock, - }) + useDynamicSVGImport( + name, + { + onCompleted: onCompleteMock, + onError: onErrorMock, + }, + library + ) ); expect(hook.result.current.loading).toBe(true); @@ -54,10 +58,14 @@ describe('Icon', () => { ); const hook = renderHook(() => - useDynamicSVGImport(name, 'icons', { - onCompleted: onCompleteMock, - onError: onErrorMock, - }) + useDynamicSVGImport( + name, + { + onCompleted: onCompleteMock, + onError: onErrorMock, + }, + 'icons' + ) ); expect(hook.result.current.loading).toBe(true); diff --git a/src/hooks/useDynamicSVGImport.ts b/src/hooks/useDynamicSVGImport.ts index f60d47e523..10cc47e360 100644 --- a/src/hooks/useDynamicSVGImport.ts +++ b/src/hooks/useDynamicSVGImport.ts @@ -25,8 +25,8 @@ interface UseDynamicSVGImportReturn { */ function useDynamicSVGImport( name: string, - library: IconLibrary, - options: UseDynamicSVGImportOptions = {} + options: UseDynamicSVGImportOptions = {}, + library: IconLibrary ): UseDynamicSVGImportReturn { const ImportedIconRef = useRef>>(); const [loading, setLoading] = useState(false); From 1ae74e618028d2698c416e92df94b7d5a694b676 Mon Sep 17 00:00:00 2001 From: Gabriel Lee Date: Wed, 25 Sep 2024 10:41:56 +0100 Subject: [PATCH 06/25] Revert "fix: import" This reverts commit 58ac2be427cbca055bb92e2e62545b48be613620. --- src/hooks/useDynamicSVGImport.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/hooks/useDynamicSVGImport.ts b/src/hooks/useDynamicSVGImport.ts index 10cc47e360..4859b72e63 100644 --- a/src/hooks/useDynamicSVGImport.ts +++ b/src/hooks/useDynamicSVGImport.ts @@ -1,6 +1,6 @@ import { useRef, useState, useEffect } from 'react'; import { useIsMounted } from './useIsMounted'; -import { IconLibrary } from '../components/Icon/Icon.types'; +import { IconLibrary } from 'src/components/Icon/Icon.types'; interface UseDynamicSVGImportOptions { onCompleted?: ( From 886f41082af5474adb20abaa23641e29d9cac6d6 Mon Sep 17 00:00:00 2001 From: Gabriel Lee Date: Wed, 25 Sep 2024 10:41:56 +0100 Subject: [PATCH 07/25] Revert "feat(icon): add brand visuals icons to icon component" This reverts commit 36541410ada3a79710f85cb077679e66bc942c53. --- package.json | 1 - src/components/Icon/Icon.constants.ts | 1 - src/components/Icon/Icon.stories.tsx | 12 +---- src/components/Icon/Icon.tsx | 3 +- src/components/Icon/Icon.types.ts | 7 +-- src/hooks/useDynamicSVGImport.test.ts | 74 +++++++++++---------------- src/hooks/useDynamicSVGImport.ts | 6 +-- yarn.lock | 8 --- 8 files changed, 36 insertions(+), 76 deletions(-) diff --git a/package.json b/package.json index 9bd51854d7..bfcc6e227f 100644 --- a/package.json +++ b/package.json @@ -95,7 +95,6 @@ "dependencies": { "@babel/runtime": "^7.0.0", "@momentum-design/animations": "^0.0.4", - "@momentum-design/brand-visuals": "^0.0.24", "@momentum-design/icons": "0.0.164", "@momentum-design/tokens": "0.0.77", "@momentum-ui/design-tokens": "^0.0.63", diff --git a/src/components/Icon/Icon.constants.ts b/src/components/Icon/Icon.constants.ts index 6a6ccd4dc7..7f6a6ccd24 100644 --- a/src/components/Icon/Icon.constants.ts +++ b/src/components/Icon/Icon.constants.ts @@ -58,7 +58,6 @@ const DEFAULTS = { AUTO_SCALE: false, VIEW_BOX_SPEC: VIEW_BOX_SPECS.NORMAL, WEIGHTLESS: false, - LIBRARY: 'icons' as const, }; const EXCEPTION_ICONS_LIST: Array = [ diff --git a/src/components/Icon/Icon.stories.tsx b/src/components/Icon/Icon.stories.tsx index 321bd5bf6a..74305cfda8 100644 --- a/src/components/Icon/Icon.stories.tsx +++ b/src/components/Icon/Icon.stories.tsx @@ -66,16 +66,6 @@ Weights.parameters = { ], }; -const BrandVisuals = Template(Icon).bind({}); - -BrandVisuals.argTypes = { ...argTypes }; - -BrandVisuals.args = { - name: 'cisco-ai-assistant-color', - library: 'brand-visuals', - weightless: true, -}; - const Common = MultiTemplate(Icon).bind({}); Common.argTypes = { ...argTypes }; @@ -98,4 +88,4 @@ Common.parameters = { ], }; -export { Example, Sizes, Weights, BrandVisuals, Common }; +export { Example, Sizes, Weights, Common }; diff --git a/src/components/Icon/Icon.tsx b/src/components/Icon/Icon.tsx index 538d48b18e..075927a102 100644 --- a/src/components/Icon/Icon.tsx +++ b/src/components/Icon/Icon.tsx @@ -31,11 +31,10 @@ const Icon: React.FC = (props: Props) => { weight, weightless = DEFAULTS.WEIGHTLESS, ariaLabel, - library = DEFAULTS.LIBRARY, ...otherProps } = props; const resolvedSVGName = getResolvedSVGName(name, weight, weightless); - const { SvgIcon, error } = useDynamicSVGImport(resolvedSVGName, undefined, library); + const { SvgIcon, error } = useDynamicSVGImport(resolvedSVGName); const isColoredIcon = /-colou?red$/.test(name as string); diff --git a/src/components/Icon/Icon.types.ts b/src/components/Icon/Icon.types.ts index c0ecb953a8..b5cab9690c 100644 --- a/src/components/Icon/Icon.types.ts +++ b/src/components/Icon/Icon.types.ts @@ -1,12 +1,11 @@ import { CSSProperties } from 'react'; import IconKeys from '@momentum-design/icons/dist/types/types'; -import BrandVisualsKeys from '@momentum-design/brand-visuals/dist/types/types'; export type IconWeight = 'light' | 'regular' | 'bold' | 'filled'; type RemoveWeight = T extends `${infer Base}-${IconWeight}` ? Base : T; -export type InferredIconName = RemoveWeight; +export type InferredIconName = RemoveWeight; export type IconScale = | 8 @@ -30,8 +29,6 @@ export type IconScale = | 'auto' | 'inherit'; -export type IconLibrary = 'icons' | 'brand-visuals'; - export interface Props { /** * If set to true, then the icon size will scale according to the parent element. @@ -113,6 +110,4 @@ export interface Props { * An example would be brand icons. */ weightless?: boolean; - - library?: IconLibrary; } diff --git a/src/hooks/useDynamicSVGImport.test.ts b/src/hooks/useDynamicSVGImport.test.ts index e9913b9a63..bd2f46b32e 100644 --- a/src/hooks/useDynamicSVGImport.test.ts +++ b/src/hooks/useDynamicSVGImport.test.ts @@ -1,47 +1,39 @@ -import { IconLibrary } from 'src/components/Icon/Icon.types'; import { useDynamicSVGImport } from './useDynamicSVGImport'; import { renderHook } from '@testing-library/react-hooks'; describe('Icon', () => { beforeEach(() => jest.resetModules()); - it.each(['icons', 'brand-visuals'] as IconLibrary[])( - 'should successfully return %s library svg component if icon exists', - async (library) => { - const name = '3d-object-regular'; - const onCompleteMock = jest.fn(); - const onErrorMock = jest.fn(); - const mockSVG = 'SVG_CONTENT'; - jest.mock( - `@momentum-design/${library}/dist/svg/3d-object-regular.svg?svgr`, - () => { - return { ReactComponent: mockSVG }; - }, - { virtual: true } - ); + it('should successfully return svg component if icon exists', async () => { + const name = '3d-object-regular'; + const onCompleteMock = jest.fn(); + const onErrorMock = jest.fn(); + const mockSVG = 'SVG_CONTENT'; + jest.mock( + '@momentum-design/icons/dist/svg/3d-object-regular.svg?svgr', + () => { + return { ReactComponent: mockSVG }; + }, + { virtual: true } + ); - const hook = renderHook(() => - useDynamicSVGImport( - name, - { - onCompleted: onCompleteMock, - onError: onErrorMock, - }, - library - ) - ); - expect(hook.result.current.loading).toBe(true); + const hook = renderHook(() => + useDynamicSVGImport(name, { + onCompleted: onCompleteMock, + onError: onErrorMock, + }) + ); + expect(hook.result.current.loading).toBe(true); - await hook.waitForNextUpdate(); + await hook.waitForNextUpdate(); - expect(onCompleteMock).toBeCalledTimes(1); - expect(onCompleteMock).toBeCalledWith(name, mockSVG); - expect(onErrorMock).not.toBeCalled(); - expect(hook.result.current.SvgIcon).toEqual(mockSVG); - expect(hook.result.current.error).toBeUndefined(); - expect(hook.result.current.loading).toBe(false); - } - ); + expect(onCompleteMock).toBeCalledTimes(1); + expect(onCompleteMock).toBeCalledWith(name, mockSVG); + expect(onErrorMock).not.toBeCalled(); + expect(hook.result.current.SvgIcon).toEqual(mockSVG); + expect(hook.result.current.error).toBeUndefined(); + expect(hook.result.current.loading).toBe(false); + }); it('should return error component does not exist', async () => { const name = 'bad_icon'; @@ -58,14 +50,10 @@ describe('Icon', () => { ); const hook = renderHook(() => - useDynamicSVGImport( - name, - { - onCompleted: onCompleteMock, - onError: onErrorMock, - }, - 'icons' - ) + useDynamicSVGImport(name, { + onCompleted: onCompleteMock, + onError: onErrorMock, + }) ); expect(hook.result.current.loading).toBe(true); diff --git a/src/hooks/useDynamicSVGImport.ts b/src/hooks/useDynamicSVGImport.ts index 4859b72e63..5fc41a05a8 100644 --- a/src/hooks/useDynamicSVGImport.ts +++ b/src/hooks/useDynamicSVGImport.ts @@ -1,6 +1,5 @@ import { useRef, useState, useEffect } from 'react'; import { useIsMounted } from './useIsMounted'; -import { IconLibrary } from 'src/components/Icon/Icon.types'; interface UseDynamicSVGImportOptions { onCompleted?: ( @@ -25,8 +24,7 @@ interface UseDynamicSVGImportReturn { */ function useDynamicSVGImport( name: string, - options: UseDynamicSVGImportOptions = {}, - library: IconLibrary + options: UseDynamicSVGImportOptions = {} ): UseDynamicSVGImportReturn { const ImportedIconRef = useRef>>(); const [loading, setLoading] = useState(false); @@ -40,7 +38,7 @@ function useDynamicSVGImport( try { setError(undefined); ImportedIconRef.current = ( - await import(`@momentum-design/${library}/dist/svg/${name}.svg?svgr`) + await import(`@momentum-design/icons/dist/svg/${name}.svg?svgr`) ).ReactComponent; if (isMounted()) { onCompleted?.(name, ImportedIconRef.current); diff --git a/yarn.lock b/yarn.lock index 95c2fe70d5..7287062da5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2444,13 +2444,6 @@ __metadata: languageName: node linkType: hard -"@momentum-design/brand-visuals@npm:^0.0.24": - version: 0.0.24 - resolution: "@momentum-design/brand-visuals@npm:0.0.24" - checksum: c7bf5e078d9157ed8ede29ba882792e05bd75b78a1ffa4c38dcff40156b81475b3aab7e0e33818d0e35b5cd815c7db0cd9e41a7de01cfc6befd16a78b727d0a7 - languageName: node - linkType: hard - "@momentum-design/icons@npm:0.0.164": version: 0.0.164 resolution: "@momentum-design/icons@npm:0.0.164" @@ -2502,7 +2495,6 @@ __metadata: "@commitlint/config-conventional": ^12.0.1 "@hot-loader/react-dom": ~16.8.0 "@momentum-design/animations": ^0.0.4 - "@momentum-design/brand-visuals": ^0.0.24 "@momentum-design/icons": 0.0.164 "@momentum-design/tokens": 0.0.77 "@momentum-ui/design-tokens": ^0.0.63 From 01b2859d54951eeadd86fe9a1f8c991f3d00b25f Mon Sep 17 00:00:00 2001 From: Dominic Carrington Date: Tue, 24 Sep 2024 14:04:24 +0100 Subject: [PATCH 08/25] feat(MenuSeperator): add MenuSeperator component Wraps for use in Menus --- src/components/Menu/Menu.stories.tsx | 87 +++++++++------------------- src/components/Menu/Menu.tsx | 5 +- src/components/Menu/Menu.utils.ts | 19 +++++- 3 files changed, 48 insertions(+), 63 deletions(-) diff --git a/src/components/Menu/Menu.stories.tsx b/src/components/Menu/Menu.stories.tsx index 194e3eaa22..b7728ac1d9 100644 --- a/src/components/Menu/Menu.stories.tsx +++ b/src/components/Menu/Menu.stories.tsx @@ -12,8 +12,9 @@ import { action } from '@storybook/addon-actions'; import Flex from '../Flex'; import Avatar from '../Avatar'; import { PresenceType } from '../Avatar/Avatar.types'; -import { ListHeader, ListItemBaseSection, Icon } from '..'; +import { Icon, Text } from '..'; import './Menu.stories.style.scss'; +import { MenuSeperator } from './Menu.utils'; export default { title: 'Momentum UI/Menu', @@ -82,38 +83,19 @@ Sections.parameters = { onSelectionChange: menuOnSelectionChange, onAction: menuOnAction, children: [ -
- Europe - - } - > +
Spain France Italy
, -
- Asia - - } - > + , +
India China Japan
, -
- America - - } - > + , +
USA Mexico Canada @@ -154,14 +136,10 @@ SelectionGroups.parameters = { console.log('selectionOnAction1', rest); }} title={ - - - - - - Speaker (you can choose many) - - + + + Speaker (you can choose many) + } > System default speaker @@ -170,6 +148,7 @@ SelectionGroups.parameters = { MacBook Pro Speakers Webex Media Audio Device , + , - - - - - - Microphone (you can choose one) - - - + + + Microphone (you can choose one) + } > No Microphone @@ -200,6 +173,7 @@ SelectionGroups.parameters = { MacBook Pro Microphone Webex Media Audio Device , + , - - - - - - Webex smart audio (You can choose one) - - - + + + Webex smart audio (You can choose one) + } > {(item) => ( @@ -236,6 +204,7 @@ SelectionGroups.parameters = { )} , + , - - - - - Layout - - + + + Layout + } > {(item) => ( diff --git a/src/components/Menu/Menu.tsx b/src/components/Menu/Menu.tsx index e5ba450a09..5be846ea41 100644 --- a/src/components/Menu/Menu.tsx +++ b/src/components/Menu/Menu.tsx @@ -17,6 +17,7 @@ import MenuItem from '../MenuItem'; import { mergeProps } from '@react-aria/utils'; import MenuSection from '../MenuSection'; import MenuSelectionGroup from '../MenuSelectionGroup'; +import ContentSeparator from '../ContentSeparator'; export const MenuContext = React.createContext({}); @@ -70,7 +71,9 @@ const Menu = (props: Props, providedRef: RefObject(item: Node, state: TreeState) => { - if (item.type === 'section') { + if (item.type === 'seperator') { + return ; + } else if (item.type === 'section') { if (item.props?.selectionGroup) { return ( ( + props: ContentSeparatorProps +): Generator> { + yield { + type: 'seperator', + props, + }; +}; function SelectionGroup(): ReactElement { return null; @@ -32,4 +48,5 @@ SelectionGroup.getCollectionNode = function* getCollectionNode( // We don't want getCollectionNode to show up in the type definition const _SelectionGroup = SelectionGroup as (props: SelectionGroupProps) => JSX.Element; -export { _SelectionGroup as SelectionGroup }; +const _MenuSeperator = MenuSeperator as (props: ContentSeparatorProps) => JSX.Element; +export { _MenuSeperator as MenuSeperator, _SelectionGroup as SelectionGroup }; From 9ef30fe2bc13c466cb9301b88c986db1033fa272 Mon Sep 17 00:00:00 2001 From: Dominic Carrington Date: Tue, 24 Sep 2024 14:12:54 +0100 Subject: [PATCH 09/25] test(MenuSeperator): add tests --- src/components/Menu/Menu.utils.test.tsx | 138 +++++++++++++++--------- 1 file changed, 90 insertions(+), 48 deletions(-) diff --git a/src/components/Menu/Menu.utils.test.tsx b/src/components/Menu/Menu.utils.test.tsx index 705621b6bc..57496e1749 100644 --- a/src/components/Menu/Menu.utils.test.tsx +++ b/src/components/Menu/Menu.utils.test.tsx @@ -1,7 +1,7 @@ import React from 'react'; -import { SelectionGroup } from './Menu.utils'; -import { Item , Section, PartialNode } from '@react-stately/collections'; -import { SelectionMode } from '@react-types/shared'; +import { MenuSeperator, SelectionGroup } from './Menu.utils'; +import { Item, Section, PartialNode } from '@react-stately/collections'; +import { SelectionMode } from '@react-types/shared'; import { SelectionGroupProps } from './Menu.types'; jest.mock('@react-stately/collections', () => ({ @@ -10,55 +10,97 @@ jest.mock('@react-stately/collections', () => ({ }, })); -const defaultProps = { - children: [One, Two], - 'aria-label': 'Menu component', - selectionMode: 'single' as Exclude -}; - describe('SelectionGroup', () => { - it('returns null', () => { - const result = SelectionGroup(defaultProps); - expect(result).toBeNull(); - }); + const defaultProps = { + children: [One, Two], + 'aria-label': 'Menu component', + selectionMode: 'single' as Exclude, + }; - it('should have a __name property set to "SelectionGroup"', () => { - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - // @ts-ignore - expect(SelectionGroup.__name).toBe('SelectionGroup'); - }); + it('returns null', () => { + const result = SelectionGroup(defaultProps); + expect(result).toBeNull(); + }); - it('getCollectionNode should yield nodes with selectionGroup prop set to true', () => { - const mockNodes: PartialNode[] = [ - { key: 'one', value: 'One' }, - { key: 'two', value: 'Two' }, - ]; - - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - // @ts-ignore - (Section.getCollectionNode as jest.Mock).mockImplementation(function* () { - for (const node of mockNodes) { - yield node; - } - }); - - const selectionGroupProps: SelectionGroupProps = {...defaultProps}; - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - // @ts-ignore - const generator = SelectionGroup.getCollectionNode(selectionGroupProps); - - const resultNodes: PartialNode[] = []; - for (const node of generator) { - resultNodes.push(node); + it('should have a __name property set to "SelectionGroup"', () => { + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + expect(SelectionGroup.__name).toBe('SelectionGroup'); + }); + + it('getCollectionNode should yield nodes with selectionGroup prop set to true', () => { + const mockNodes: PartialNode[] = [ + { key: 'one', value: 'One' }, + { key: 'two', value: 'Two' }, + ]; + + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + (Section.getCollectionNode as jest.Mock).mockImplementation(function* () { + for (const node of mockNodes) { + yield node; } - - expect(resultNodes).toHaveLength(mockNodes.length); - resultNodes.forEach((node, index) => { - expect(node).toEqual({ - ...mockNodes[index], - props: { ...selectionGroupProps, selectionGroup: true }, - }); + }); + + const selectionGroupProps: SelectionGroupProps = { ...defaultProps }; + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + const generator = SelectionGroup.getCollectionNode(selectionGroupProps); + + const resultNodes: PartialNode[] = []; + for (const node of generator) { + resultNodes.push(node); + } + + expect(resultNodes).toHaveLength(mockNodes.length); + resultNodes.forEach((node, index) => { + expect(node).toEqual({ + ...mockNodes[index], + props: { ...selectionGroupProps, selectionGroup: true }, }); }); + }); +}); + +describe('MenuSeperator', () => { + it('returns null', () => { + const result = MenuSeperator({}); + expect(result).toBeNull(); + }); + + it('should have a __name property set to "MenuSeperator"', () => { + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + expect(MenuSeperator.__name).toBe('MenuSeperator'); + }); - }); \ No newline at end of file + it('getCollectionNode should yield a single node with type "seperator"', () => { + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore - We don't export this method in the types + const generator = MenuSeperator.getCollectionNode(); + const results = Array.from(generator); + + expect(results).toHaveLength(1); + expect(results[0]).toEqual({ + type: 'seperator', + props: undefined, + }); + }); + + it('getCollectionNode should yield a single node with props passed', () => { + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore - We don't export this method in the types + const generator = MenuSeperator.getCollectionNode({ + className: 'main-seperator', + }); + const results = Array.from(generator); + + expect(results).toHaveLength(1); + expect(results[0]).toEqual({ + type: 'seperator', + props: { + className: 'main-seperator', + }, + }); + }); +}); From b0967f1de37867adaaae0e4babec32b5ed795b09 Mon Sep 17 00:00:00 2001 From: Dominic Carrington Date: Tue, 24 Sep 2024 14:33:07 +0100 Subject: [PATCH 10/25] test(Menu): add snapshot test with seperators --- src/components/Menu/Menu.unit.test.tsx | 15 + src/components/Menu/Menu.unit.test.tsx.snap | 565 ++++++++++++++++++++ 2 files changed, 580 insertions(+) diff --git a/src/components/Menu/Menu.unit.test.tsx b/src/components/Menu/Menu.unit.test.tsx index ffdce6e0e0..efd2c21b2b 100644 --- a/src/components/Menu/Menu.unit.test.tsx +++ b/src/components/Menu/Menu.unit.test.tsx @@ -13,6 +13,7 @@ import MenuSelectionGroup from '../MenuSelectionGroup'; import { MenuAppearanceContextValue } from './Menu.types'; import { MenuAppearanceContext, useMenuAppearanceContext } from './Menu'; import ListItemBaseSection from '../ListItemBaseSection'; +import { MenuSeperator } from './Menu.utils'; describe('useMenuAppearanceContext', () => { const fakeMenuAppearanceContextValue: MenuAppearanceContextValue = { @@ -173,6 +174,20 @@ describe('', () => { expect(container).toMatchSnapshot(); }); + + it('should match snapshot with seperator between items', () => { + const props = { + ...defaultProps, + children: [ + One, + , + Two, + ], + }; + + const container = mount(); + expect(container).toMatchSnapshot(); + }); }); describe('attributes', () => { diff --git a/src/components/Menu/Menu.unit.test.tsx.snap b/src/components/Menu/Menu.unit.test.tsx.snap index 4548b1b1f7..da3f812160 100644 --- a/src/components/Menu/Menu.unit.test.tsx.snap +++ b/src/components/Menu/Menu.unit.test.tsx.snap @@ -2881,6 +2881,571 @@ exports[` snapshot should match snapshot with itemSize 1`] = ` `; +exports[` snapshot should match snapshot with seperator between items 1`] = ` +<_Menu + aria-label="Menu component" +> +
+ Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 0, + "key": "one", + "level": 0, + "nextKey": "sep", + "parentKey": null, + "prevKey": undefined, + "props": Object { + "children": "One", + }, + "rendered": "One", + "shouldInvalidate": undefined, + "textValue": "One", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "sep" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": undefined, + "index": 1, + "key": "sep", + "level": 0, + "nextKey": "two", + "parentKey": null, + "prevKey": "one", + "props": Object {}, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "seperator", + "value": undefined, + "wrapper": undefined, + }, + "two" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 1, + "key": "two", + "level": 0, + "nextKey": undefined, + "parentKey": null, + "prevKey": "sep", + "props": Object { + "children": "Two", + }, + "rendered": "Two", + "shouldInvalidate": undefined, + "textValue": "Two", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + }, + "lastKey": "two", + }, + "disabledKeys": Set {}, + "expandedKeys": Set {}, + "selectionManager": SelectionManager { + "_isSelectAll": null, + "allowsCellSelection": false, + "collection": $f4c7caecb598119f63e2918a55ec91a9$export$TreeCollection { + "firstKey": "one", + "iterable": Object { + Symbol(Symbol.iterator): [Function], + }, + "keyMap": Map { + "one" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 0, + "key": "one", + "level": 0, + "nextKey": "sep", + "parentKey": null, + "prevKey": undefined, + "props": Object { + "children": "One", + }, + "rendered": "One", + "shouldInvalidate": undefined, + "textValue": "One", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "sep" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": undefined, + "index": 1, + "key": "sep", + "level": 0, + "nextKey": "two", + "parentKey": null, + "prevKey": "one", + "props": Object {}, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "seperator", + "value": undefined, + "wrapper": undefined, + }, + "two" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 1, + "key": "two", + "level": 0, + "nextKey": undefined, + "parentKey": null, + "prevKey": "sep", + "props": Object { + "children": "Two", + }, + "rendered": "Two", + "shouldInvalidate": undefined, + "textValue": "Two", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + }, + "lastKey": "two", + }, + "state": Object { + "childFocusStrategy": null, + "disabledKeys": Set {}, + "disallowEmptySelection": undefined, + "focusedKey": null, + "isFocused": false, + "selectedKeys": Set {}, + "selectionMode": "none", + "setFocused": [Function], + "setFocusedKey": [Function], + "setSelectedKeys": [Function], + }, + }, + "toggleKey": [Function], + } + } + > + + + +
  • + +
    + One +
    +     +
    • +     +     +     +     + +
  • + + Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 0, + "key": "one", + "level": 0, + "nextKey": "sep", + "parentKey": null, + "prevKey": undefined, + "props": Object { + "children": "One", + }, + "rendered": "One", + "shouldInvalidate": undefined, + "textValue": "One", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "sep" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": undefined, + "index": 1, + "key": "sep", + "level": 0, + "nextKey": "two", + "parentKey": null, + "prevKey": "one", + "props": Object {}, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "seperator", + "value": undefined, + "wrapper": undefined, + }, + "two" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 1, + "key": "two", + "level": 0, + "nextKey": undefined, + "parentKey": null, + "prevKey": "sep", + "props": Object { + "children": "Two", + }, + "rendered": "Two", + "shouldInvalidate": undefined, + "textValue": "Two", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + }, + "lastKey": "two", + }, + "disabledKeys": Set {}, + "expandedKeys": Set {}, + "selectionManager": SelectionManager { + "_isSelectAll": null, + "allowsCellSelection": false, + "collection": $f4c7caecb598119f63e2918a55ec91a9$export$TreeCollection { + "firstKey": "one", + "iterable": Object { + Symbol(Symbol.iterator): [Function], + }, + "keyMap": Map { + "one" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 0, + "key": "one", + "level": 0, + "nextKey": "sep", + "parentKey": null, + "prevKey": undefined, + "props": Object { + "children": "One", + }, + "rendered": "One", + "shouldInvalidate": undefined, + "textValue": "One", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "sep" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": undefined, + "index": 1, + "key": "sep", + "level": 0, + "nextKey": "two", + "parentKey": null, + "prevKey": "one", + "props": Object {}, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "seperator", + "value": undefined, + "wrapper": undefined, + }, + "two" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 1, + "key": "two", + "level": 0, + "nextKey": undefined, + "parentKey": null, + "prevKey": "sep", + "props": Object { + "children": "Two", + }, + "rendered": "Two", + "shouldInvalidate": undefined, + "textValue": "Two", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + }, + "lastKey": "two", + }, + "state": Object { + "childFocusStrategy": null, + "disabledKeys": Set {}, + "disallowEmptySelection": undefined, + "focusedKey": null, + "isFocused": false, + "selectedKeys": Set {}, + "selectionMode": "none", + "setFocused": [Function], + "setFocusedKey": [Function], + "setSelectedKeys": [Function], + }, + }, + "toggleKey": [Function], + } + } + > + + + +
  • + +
    + Two +
    +     +
    • + + + + +
    + +`; + exports[` snapshot should match snapshot with style 1`] = ` <_Menu aria-label="Menu component" From ed28b999bce6624e5a006ab5550d1934a9a2765d Mon Sep 17 00:00:00 2001 From: Dominic Carrington Date: Tue, 24 Sep 2024 14:50:26 +0100 Subject: [PATCH 11/25] test(MenuSeperator): add stricter props test --- src/components/Menu/Menu.utils.test.tsx | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/src/components/Menu/Menu.utils.test.tsx b/src/components/Menu/Menu.utils.test.tsx index 57496e1749..1dc8ac57a5 100644 --- a/src/components/Menu/Menu.utils.test.tsx +++ b/src/components/Menu/Menu.utils.test.tsx @@ -88,19 +88,22 @@ describe('MenuSeperator', () => { }); it('getCollectionNode should yield a single node with props passed', () => { + const props = { + className: 'main-seperator', + }; + // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore - We don't export this method in the types - const generator = MenuSeperator.getCollectionNode({ - className: 'main-seperator', - }); + const generator = MenuSeperator.getCollectionNode(props); const results = Array.from(generator); expect(results).toHaveLength(1); expect(results[0]).toEqual({ type: 'seperator', - props: { - className: 'main-seperator', - }, + props: expect.any(Object), }); + + const result = results[0] as { type: 'seperator'; props: Record }; + expect(result.props).toBe(props); }); }); From 9f0390daabe2f1ad8185c3e10bf55ccd5c01fd7e Mon Sep 17 00:00:00 2001 From: Dominic Carrington Date: Tue, 24 Sep 2024 14:57:57 +0100 Subject: [PATCH 12/25] test(MenuSeperator): add keyboard and render tests --- src/components/Menu/Menu.unit.test.tsx | 45 ++++++++++++++++++++++++++ 1 file changed, 45 insertions(+) diff --git a/src/components/Menu/Menu.unit.test.tsx b/src/components/Menu/Menu.unit.test.tsx index efd2c21b2b..3adadff785 100644 --- a/src/components/Menu/Menu.unit.test.tsx +++ b/src/components/Menu/Menu.unit.test.tsx @@ -14,6 +14,7 @@ import { MenuAppearanceContextValue } from './Menu.types'; import { MenuAppearanceContext, useMenuAppearanceContext } from './Menu'; import ListItemBaseSection from '../ListItemBaseSection'; import { MenuSeperator } from './Menu.utils'; +import ContentSeparator from '../ContentSeparator'; describe('useMenuAppearanceContext', () => { const fakeMenuAppearanceContextValue: MenuAppearanceContextValue = { @@ -359,6 +360,38 @@ describe('', () => { expect(menuItems[0]).toHaveFocus(); }); + it('should handle up/down arrow keys correctly - for vertical menus with seperators', async () => { + const user = userEvent.setup(); + + const props = { + ...defaultProps, + children: [ + One, + , + Two, + ], + }; + + const { getAllByRole } = render(); + + await user.tab(); + + const menuItems = getAllByRole('menuitem'); + expect(menuItems[0]).toHaveFocus(); + + await user.keyboard('{ArrowDown}'); + + expect(menuItems[1]).toHaveFocus(); + + await user.keyboard('{ArrowDown}'); + + expect(menuItems[0]).toHaveFocus(); + + await user.keyboard('{ArrowRight}'); + + expect(menuItems[0]).toHaveFocus(); + }); + it('should handle up/down arrow keys correctly - for vertical menu with section', async () => { const user = userEvent.setup(); @@ -599,5 +632,17 @@ describe('', () => { selectionGroup: true, }); }); + + it('should render ContentSeperator if children has MenuSeperator', () => { + const wrapper = mount( + + One + + Two + + ); + + expect(wrapper.find(ContentSeparator).exists()).toBe(true); + }); }); }); From 06f04b968f2e06cc87bf18d8c28cc938d986a628 Mon Sep 17 00:00:00 2001 From: Dominic Carrington Date: Tue, 24 Sep 2024 15:23:40 +0100 Subject: [PATCH 13/25] fix(MenuSelectionGroup): fix styling Since styling is broken when a component is provided, move wrapper to wrap all titles --- .../MenuSelectionGroup.style.scss | 4 ++++ .../MenuSelectionGroup/MenuSelectionGroup.tsx | 16 ++++++++++------ 2 files changed, 14 insertions(+), 6 deletions(-) diff --git a/src/components/MenuSelectionGroup/MenuSelectionGroup.style.scss b/src/components/MenuSelectionGroup/MenuSelectionGroup.style.scss index ee14af8341..e2de9f46ab 100644 --- a/src/components/MenuSelectionGroup/MenuSelectionGroup.style.scss +++ b/src/components/MenuSelectionGroup/MenuSelectionGroup.style.scss @@ -10,4 +10,8 @@ font-size: 0.875rem; line-height: 1.375rem; padding: 0.25rem 0.75rem; + + .md-text-wrapper { + font-size: 0.875rem; + } } diff --git a/src/components/MenuSelectionGroup/MenuSelectionGroup.tsx b/src/components/MenuSelectionGroup/MenuSelectionGroup.tsx index e7e290d7c4..484d352623 100644 --- a/src/components/MenuSelectionGroup/MenuSelectionGroup.tsx +++ b/src/components/MenuSelectionGroup/MenuSelectionGroup.tsx @@ -43,12 +43,16 @@ const MenuSelectionGroup = (props: Props): ReactElement => return (
    - {!React.isValidElement(item.rendered) && item.rendered ? ( - - {item.rendered} - - ) : ( - item.rendered && React.cloneElement(item.rendered as ReactElement, { ...headingProps }) + {item.rendered && ( +
    + {!React.isValidElement(item.rendered) ? ( + + {item.rendered} + + ) : ( + React.cloneElement(item.rendered as ReactElement, { ...headingProps }) + )} +
    )}
      {Array.from(item.childNodes).map((node) => { From ac9b31eca3965eb86e3d893a6fe925f45b1bf138 Mon Sep 17 00:00:00 2001 From: Dominic Carrington Date: Tue, 24 Sep 2024 15:33:16 +0100 Subject: [PATCH 14/25] test(MenuSeperator): simplify test --- src/components/Menu/Menu.utils.test.tsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/components/Menu/Menu.utils.test.tsx b/src/components/Menu/Menu.utils.test.tsx index 1dc8ac57a5..ab15db3baf 100644 --- a/src/components/Menu/Menu.utils.test.tsx +++ b/src/components/Menu/Menu.utils.test.tsx @@ -100,10 +100,7 @@ describe('MenuSeperator', () => { expect(results).toHaveLength(1); expect(results[0]).toEqual({ type: 'seperator', - props: expect.any(Object), + props, }); - - const result = results[0] as { type: 'seperator'; props: Record }; - expect(result.props).toBe(props); }); }); From 8508791a977fa24c35e209ebf95a8ec980cf55e0 Mon Sep 17 00:00:00 2001 From: Dominic Carrington Date: Tue, 24 Sep 2024 15:35:26 +0100 Subject: [PATCH 15/25] fix(Menu.stories): remove unnecessary aria-labels --- src/components/Menu/Menu.stories.tsx | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/components/Menu/Menu.stories.tsx b/src/components/Menu/Menu.stories.tsx index b7728ac1d9..b35244c6d5 100644 --- a/src/components/Menu/Menu.stories.tsx +++ b/src/components/Menu/Menu.stories.tsx @@ -128,7 +128,6 @@ SelectionGroups.parameters = { { console.log('singleselection1', rest); }} @@ -153,7 +152,6 @@ SelectionGroups.parameters = { key="1" selectionMode="single" tickPosition="right" - aria-label="Second group" onSelectionChange={(...rest) => { console.log('singleselection2', rest); }} @@ -184,7 +182,6 @@ SelectionGroups.parameters = { { key: '22', value: 'Music mode' }, ]} selectionMode="single" - aria-label="Second group" onSelectionChange={(...rest) => { console.log('singleselection3', rest); }} @@ -217,7 +214,6 @@ SelectionGroups.parameters = { { key: '32', value: 'Side by side' }, ]} selectionMode="single" - aria-label="Third group" onSelectionChange={(...rest) => { console.log('singleselection4', rest); }} From 5e9d9f6d04928ff4c978dc754cc73a82a99fb3c7 Mon Sep 17 00:00:00 2001 From: Dominic Carrington Date: Tue, 24 Sep 2024 15:41:30 +0100 Subject: [PATCH 16/25] test(MenuSeperator): add to other keyboard tests --- src/components/Menu/Menu.unit.test.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/Menu/Menu.unit.test.tsx b/src/components/Menu/Menu.unit.test.tsx index 3adadff785..935df0165c 100644 --- a/src/components/Menu/Menu.unit.test.tsx +++ b/src/components/Menu/Menu.unit.test.tsx @@ -360,7 +360,7 @@ describe('', () => { expect(menuItems[0]).toHaveFocus(); }); - it('should handle up/down arrow keys correctly - for vertical menus with seperators', async () => { + it('should handle up/down arrow keys correctly - for vertical menus with seperator', async () => { const user = userEvent.setup(); const props = { @@ -401,6 +401,7 @@ describe('', () => { One Two
    +
    Three Four @@ -461,6 +462,7 @@ describe('', () => { One Two + Date: Tue, 24 Sep 2024 16:11:00 +0100 Subject: [PATCH 17/25] feat(MenuSeperator): export component --- src/components/Menu/index.ts | 4 ++-- src/components/index.ts | 2 +- src/index.js | 1 + 3 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/components/Menu/index.ts b/src/components/Menu/index.ts index 51f5ae8ae6..a301eff502 100644 --- a/src/components/Menu/index.ts +++ b/src/components/Menu/index.ts @@ -1,9 +1,9 @@ import { default as Menu, MenuContext } from './Menu'; import * as CONSTANTS from './Menu.constants'; import { Props } from './Menu.types'; -import {SelectionGroup} from './Menu.utils'; +import { SelectionGroup, MenuSeperator } from './Menu.utils'; -export { CONSTANTS as MENU_CONSTANTS, MenuContext, SelectionGroup }; +export { CONSTANTS as MENU_CONSTANTS, MenuContext, SelectionGroup, MenuSeperator }; export type MenuProps = Props; diff --git a/src/components/index.ts b/src/components/index.ts index 9e37030143..d2bb34c14b 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -53,7 +53,7 @@ export { default as ReactionPicker } from './ReactionPicker'; export { default as AddReactionButton } from './AddReactionButton'; export { default as AvatarMeetingsListItem } from './AvatarMeetingsListItem'; export { default as MenuTrigger } from './MenuTrigger'; -export { default as Menu, SelectionGroup } from './Menu'; +export { default as Menu, SelectionGroup, MenuSeperator } from './Menu'; export { default as DividerDot } from './DividerDot'; export { default as Popover } from './Popover'; export { default as ListHeader } from './ListHeader'; diff --git a/src/index.js b/src/index.js index e97767adc4..d19fc25039 100644 --- a/src/index.js +++ b/src/index.js @@ -197,6 +197,7 @@ export { Tree, useTreeContext, SelectionGroup, + MenuSeperator, TreeNodeBase, MeetingRowContent, } from './components'; From fe2cff981980a92dce05f674f1f3284a37c44917 Mon Sep 17 00:00:00 2001 From: Dominic Carrington Date: Tue, 24 Sep 2024 16:42:49 +0100 Subject: [PATCH 18/25] fix(MenuSelectionGroup): remove additional className and update snapshot --- .../MenuSelectionGroup/MenuSelectionGroup.tsx | 4 +--- .../MenuSelectionGroup.unit.test.tsx.snap | 13 ++++++++----- 2 files changed, 9 insertions(+), 8 deletions(-) diff --git a/src/components/MenuSelectionGroup/MenuSelectionGroup.tsx b/src/components/MenuSelectionGroup/MenuSelectionGroup.tsx index 484d352623..d02688dd76 100644 --- a/src/components/MenuSelectionGroup/MenuSelectionGroup.tsx +++ b/src/components/MenuSelectionGroup/MenuSelectionGroup.tsx @@ -46,9 +46,7 @@ const MenuSelectionGroup = (props: Props): ReactElement => {item.rendered && (
    {!React.isValidElement(item.rendered) ? ( - - {item.rendered} - + {item.rendered} ) : ( React.cloneElement(item.rendered as ReactElement, { ...headingProps }) )} diff --git a/src/components/MenuSelectionGroup/MenuSelectionGroup.unit.test.tsx.snap b/src/components/MenuSelectionGroup/MenuSelectionGroup.unit.test.tsx.snap index 4b43567235..ae3541c88e 100644 --- a/src/components/MenuSelectionGroup/MenuSelectionGroup.unit.test.tsx.snap +++ b/src/components/MenuSelectionGroup/MenuSelectionGroup.unit.test.tsx.snap @@ -258,13 +258,16 @@ exports[` snapshot should match snapshot 1`] = `
    - - x - + + x + +
      Date: Tue, 24 Sep 2024 17:40:49 +0100 Subject: [PATCH 19/25] fix(MenuSeparator): fix misspelling of component --- src/components/Menu/Menu.stories.tsx | 12 ++++++------ src/components/Menu/Menu.tsx | 2 +- src/components/Menu/Menu.unit.test.tsx | 14 +++++++------- src/components/Menu/Menu.utils.test.tsx | 14 +++++++------- src/components/Menu/Menu.utils.ts | 12 ++++++------ src/components/Menu/index.ts | 4 ++-- src/components/index.ts | 2 +- src/index.js | 2 +- 8 files changed, 31 insertions(+), 31 deletions(-) diff --git a/src/components/Menu/Menu.stories.tsx b/src/components/Menu/Menu.stories.tsx index b35244c6d5..96ff689c36 100644 --- a/src/components/Menu/Menu.stories.tsx +++ b/src/components/Menu/Menu.stories.tsx @@ -14,7 +14,7 @@ import Avatar from '../Avatar'; import { PresenceType } from '../Avatar/Avatar.types'; import { Icon, Text } from '..'; import './Menu.stories.style.scss'; -import { MenuSeperator } from './Menu.utils'; +import { MenuSeparator } from './Menu.utils'; export default { title: 'Momentum UI/Menu', @@ -88,13 +88,13 @@ Sections.parameters = { France Italy
    , - , + ,
    India China Japan
    , - , + ,
    USA Mexico @@ -147,7 +147,7 @@ SelectionGroups.parameters = { MacBook Pro Speakers Webex Media Audio Device , - , + , MacBook Pro Microphone Webex Media Audio Device , - , + , )} , - , + , (props: Props, providedRef: RefObject(item: Node, state: TreeState) => { - if (item.type === 'seperator') { + if (item.type === 'separator') { return ; } else if (item.type === 'section') { if (item.props?.selectionGroup) { diff --git a/src/components/Menu/Menu.unit.test.tsx b/src/components/Menu/Menu.unit.test.tsx index 935df0165c..b45c68a20a 100644 --- a/src/components/Menu/Menu.unit.test.tsx +++ b/src/components/Menu/Menu.unit.test.tsx @@ -13,7 +13,7 @@ import MenuSelectionGroup from '../MenuSelectionGroup'; import { MenuAppearanceContextValue } from './Menu.types'; import { MenuAppearanceContext, useMenuAppearanceContext } from './Menu'; import ListItemBaseSection from '../ListItemBaseSection'; -import { MenuSeperator } from './Menu.utils'; +import { MenuSeparator } from './Menu.utils'; import ContentSeparator from '../ContentSeparator'; describe('useMenuAppearanceContext', () => { @@ -181,7 +181,7 @@ describe('', () => { ...defaultProps, children: [ One, - , + , Two, ], }; @@ -367,7 +367,7 @@ describe('', () => { ...defaultProps, children: [ One, - , + , Two, ], }; @@ -401,7 +401,7 @@ describe('', () => { One Two
    - +
    Three Four @@ -462,7 +462,7 @@ describe('', () => { One Two - + ', () => { }); }); - it('should render ContentSeperator if children has MenuSeperator', () => { + it('should render ContentSeperator if children has MenuSeparator', () => { const wrapper = mount( One - + Two ); diff --git a/src/components/Menu/Menu.utils.test.tsx b/src/components/Menu/Menu.utils.test.tsx index ab15db3baf..95b9eaa4bb 100644 --- a/src/components/Menu/Menu.utils.test.tsx +++ b/src/components/Menu/Menu.utils.test.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { MenuSeperator, SelectionGroup } from './Menu.utils'; +import { MenuSeparator, SelectionGroup } from './Menu.utils'; import { Item, Section, PartialNode } from '@react-stately/collections'; import { SelectionMode } from '@react-types/shared'; import { SelectionGroupProps } from './Menu.types'; @@ -62,22 +62,22 @@ describe('SelectionGroup', () => { }); }); -describe('MenuSeperator', () => { +describe('MenuSeparator', () => { it('returns null', () => { - const result = MenuSeperator({}); + const result = MenuSeparator({}); expect(result).toBeNull(); }); - it('should have a __name property set to "MenuSeperator"', () => { + it('should have a __name property set to "MenuSeparator"', () => { // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore - expect(MenuSeperator.__name).toBe('MenuSeperator'); + expect(MenuSeparator.__name).toBe('MenuSeparator'); }); it('getCollectionNode should yield a single node with type "seperator"', () => { // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore - We don't export this method in the types - const generator = MenuSeperator.getCollectionNode(); + const generator = MenuSeparator.getCollectionNode(); const results = Array.from(generator); expect(results).toHaveLength(1); @@ -94,7 +94,7 @@ describe('MenuSeperator', () => { // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore - We don't export this method in the types - const generator = MenuSeperator.getCollectionNode(props); + const generator = MenuSeparator.getCollectionNode(props); const results = Array.from(generator); expect(results).toHaveLength(1); diff --git a/src/components/Menu/Menu.utils.ts b/src/components/Menu/Menu.utils.ts index 4a8d94bd06..8fe5fe563d 100644 --- a/src/components/Menu/Menu.utils.ts +++ b/src/components/Menu/Menu.utils.ts @@ -5,17 +5,17 @@ import { ReactElement } from 'react'; import { SelectionGroupProps } from './Menu.types'; import { ContentSeparatorProps } from '../ContentSeparator'; -function MenuSeperator(): ReactElement { +function MenuSeparator(): ReactElement { return null; } -MenuSeperator.__name = 'MenuSeperator'; +MenuSeparator.__name = 'MenuSeparator'; -MenuSeperator.getCollectionNode = function* getCollectionNode( +MenuSeparator.getCollectionNode = function* getCollectionNode( props: ContentSeparatorProps ): Generator> { yield { - type: 'seperator', + type: 'separator', props, }; }; @@ -48,5 +48,5 @@ SelectionGroup.getCollectionNode = function* getCollectionNode( // We don't want getCollectionNode to show up in the type definition const _SelectionGroup = SelectionGroup as (props: SelectionGroupProps) => JSX.Element; -const _MenuSeperator = MenuSeperator as (props: ContentSeparatorProps) => JSX.Element; -export { _MenuSeperator as MenuSeperator, _SelectionGroup as SelectionGroup }; +const _MenuSeparator = MenuSeparator as (props: ContentSeparatorProps) => JSX.Element; +export { _MenuSeparator as MenuSeparator, _SelectionGroup as SelectionGroup }; diff --git a/src/components/Menu/index.ts b/src/components/Menu/index.ts index a301eff502..2150b84e3e 100644 --- a/src/components/Menu/index.ts +++ b/src/components/Menu/index.ts @@ -1,9 +1,9 @@ import { default as Menu, MenuContext } from './Menu'; import * as CONSTANTS from './Menu.constants'; import { Props } from './Menu.types'; -import { SelectionGroup, MenuSeperator } from './Menu.utils'; +import { SelectionGroup, MenuSeparator } from './Menu.utils'; -export { CONSTANTS as MENU_CONSTANTS, MenuContext, SelectionGroup, MenuSeperator }; +export { CONSTANTS as MENU_CONSTANTS, MenuContext, SelectionGroup, MenuSeparator }; export type MenuProps = Props; diff --git a/src/components/index.ts b/src/components/index.ts index d2bb34c14b..85956a07ac 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -53,7 +53,7 @@ export { default as ReactionPicker } from './ReactionPicker'; export { default as AddReactionButton } from './AddReactionButton'; export { default as AvatarMeetingsListItem } from './AvatarMeetingsListItem'; export { default as MenuTrigger } from './MenuTrigger'; -export { default as Menu, SelectionGroup, MenuSeperator } from './Menu'; +export { default as Menu, SelectionGroup, MenuSeparator } from './Menu'; export { default as DividerDot } from './DividerDot'; export { default as Popover } from './Popover'; export { default as ListHeader } from './ListHeader'; diff --git a/src/index.js b/src/index.js index d19fc25039..d9650ad233 100644 --- a/src/index.js +++ b/src/index.js @@ -197,7 +197,7 @@ export { Tree, useTreeContext, SelectionGroup, - MenuSeperator, + MenuSeparator, TreeNodeBase, MeetingRowContent, } from './components'; From 77aa1f4de17ca8c97ab0c584d5f07eb59c584754 Mon Sep 17 00:00:00 2001 From: Dominic Carrington Date: Tue, 24 Sep 2024 17:43:38 +0100 Subject: [PATCH 20/25] test(MenuSeparator): fix spelling --- src/components/Menu/Menu.unit.test.tsx.snap | 8 ++++---- src/components/Menu/Menu.utils.test.tsx | 8 ++++---- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/components/Menu/Menu.unit.test.tsx.snap b/src/components/Menu/Menu.unit.test.tsx.snap index da3f812160..2606a4899d 100644 --- a/src/components/Menu/Menu.unit.test.tsx.snap +++ b/src/components/Menu/Menu.unit.test.tsx.snap @@ -2968,7 +2968,7 @@ exports[` snapshot should match snapshot with seperator between items 1` "rendered": undefined, "shouldInvalidate": undefined, "textValue": undefined, - "type": "seperator", + "type": "separator", "value": undefined, "wrapper": undefined, }, @@ -3046,7 +3046,7 @@ exports[` snapshot should match snapshot with seperator between items 1` "rendered": undefined, "shouldInvalidate": undefined, "textValue": undefined, - "type": "seperator", + "type": "separator", "value": undefined, "wrapper": undefined, }, @@ -3244,7 +3244,7 @@ exports[` snapshot should match snapshot with seperator between items 1` "rendered": undefined, "shouldInvalidate": undefined, "textValue": undefined, - "type": "seperator", + "type": "separator", "value": undefined, "wrapper": undefined, }, @@ -3322,7 +3322,7 @@ exports[` snapshot should match snapshot with seperator between items 1` "rendered": undefined, "shouldInvalidate": undefined, "textValue": undefined, - "type": "seperator", + "type": "separator", "value": undefined, "wrapper": undefined, }, diff --git a/src/components/Menu/Menu.utils.test.tsx b/src/components/Menu/Menu.utils.test.tsx index 95b9eaa4bb..006e246f41 100644 --- a/src/components/Menu/Menu.utils.test.tsx +++ b/src/components/Menu/Menu.utils.test.tsx @@ -74,7 +74,7 @@ describe('MenuSeparator', () => { expect(MenuSeparator.__name).toBe('MenuSeparator'); }); - it('getCollectionNode should yield a single node with type "seperator"', () => { + it('getCollectionNode should yield a single node with type "separator"', () => { // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore - We don't export this method in the types const generator = MenuSeparator.getCollectionNode(); @@ -82,14 +82,14 @@ describe('MenuSeparator', () => { expect(results).toHaveLength(1); expect(results[0]).toEqual({ - type: 'seperator', + type: 'separator', props: undefined, }); }); it('getCollectionNode should yield a single node with props passed', () => { const props = { - className: 'main-seperator', + className: 'main-separator', }; // eslint-disable-next-line @typescript-eslint/ban-ts-comment @@ -99,7 +99,7 @@ describe('MenuSeparator', () => { expect(results).toHaveLength(1); expect(results[0]).toEqual({ - type: 'seperator', + type: 'separator', props, }); }); From 09d718e8e5bacb17442a359ca8f80f4d4c44e2d8 Mon Sep 17 00:00:00 2001 From: Dominic Carrington Date: Wed, 25 Sep 2024 13:49:06 +0100 Subject: [PATCH 21/25] feat(ContentSeparator): convert MenuSeparator to use ContentSeparator directly --- .../ContentSeparator/ContentSeparator.tsx | 15 +- src/components/Menu/Menu.stories.tsx | 14 +- src/components/Menu/Menu.tsx | 23 +- src/components/Menu/Menu.unit.test.tsx | 13 +- src/components/Menu/Menu.unit.test.tsx.snap | 42 +- src/components/Menu/Menu.utils.test.tsx | 35 +- src/components/Menu/Menu.utils.ts | 19 +- src/components/Menu/index.ts | 4 +- src/components/MenuSection/MenuSection.tsx | 13 +- .../MenuSection/MenuSection.unit.test.tsx | 52 + .../MenuSection.unit.test.tsx.snap | 907 ++++++++++++++ .../MenuSelectionGroup/MenuSelectionGroup.tsx | 8 + .../MenuSelectionGroup.unit.test.tsx | 75 ++ .../MenuSelectionGroup.unit.test.tsx.snap | 1050 +++++++++++++++++ src/components/index.ts | 2 +- src/index.js | 1 - 16 files changed, 2194 insertions(+), 79 deletions(-) diff --git a/src/components/ContentSeparator/ContentSeparator.tsx b/src/components/ContentSeparator/ContentSeparator.tsx index cae00dd413..13d7f9f8c4 100644 --- a/src/components/ContentSeparator/ContentSeparator.tsx +++ b/src/components/ContentSeparator/ContentSeparator.tsx @@ -1,3 +1,5 @@ +/* eslint-disable @typescript-eslint/ban-ts-comment */ + import React from 'react'; import classnames from 'classnames'; @@ -5,6 +7,7 @@ import './ContentSeparator.style.scss'; import { Props } from './ContentSeparator.types'; import { STYLE } from './ContentSeparator.constants'; import { useSeparator } from '@react-aria/separator'; +import { PartialNode } from '@react-stately/collections'; const ContentSeparator: React.FC = (props: Props) => { const { className, children, gradient } = props; @@ -24,8 +27,18 @@ const ContentSeparator: React.FC = (props: Props) => { ); }; +// This allows the ContentSeparator to be used within Menu +// @ts-ignore +ContentSeparator.getCollectionNode = function* getCollectionNode( + props: Props +): Generator> { + yield { + type: 'item', + props: { ...props, _isSeparator: true }, + }; +}; + /** * ContentSeparator with text/other component in the middle */ - export default ContentSeparator; diff --git a/src/components/Menu/Menu.stories.tsx b/src/components/Menu/Menu.stories.tsx index 96ff689c36..9736789825 100644 --- a/src/components/Menu/Menu.stories.tsx +++ b/src/components/Menu/Menu.stories.tsx @@ -11,10 +11,10 @@ import Documentation from './Menu.stories.docs.mdx'; import { action } from '@storybook/addon-actions'; import Flex from '../Flex'; import Avatar from '../Avatar'; +import ContentSeparator from '../ContentSeparator'; import { PresenceType } from '../Avatar/Avatar.types'; import { Icon, Text } from '..'; import './Menu.stories.style.scss'; -import { MenuSeparator } from './Menu.utils'; export default { title: 'Momentum UI/Menu', @@ -88,15 +88,16 @@ Sections.parameters = { France Italy
    , - , + ,
    India China Japan
    , - , + ,
    USA + Mexico Canada
    , @@ -143,11 +144,12 @@ SelectionGroups.parameters = { > System default speaker Default - External Headphones (Built-in) + Desk Pro Web Camera MacBook Pro Speakers Webex Media Audio Device , - , + , MacBook Pro Microphone Webex Media Audio Device , - , + , )} , - , + , (props: Props, providedRef: RefObject { + const item = state.collection.getItem(key); + if (item.props?._isSeparator) { + state.disabledKeys.add(key); + } + }); - const itemArray = Array.from(state.collection.getKeys()); + const { menuProps } = useMenu(_props, state, ref); const renderItem = useCallback( (item: Node, state: TreeState) => { - if (item.type === 'separator') { - return ; - } else if (item.type === 'section') { + if (item.type === 'section') { if (item.props?.selectionGroup) { return ( (props: Props, providedRef: RefObject; + } + let menuItem = ( ); diff --git a/src/components/Menu/Menu.unit.test.tsx b/src/components/Menu/Menu.unit.test.tsx index b45c68a20a..b8d0806c20 100644 --- a/src/components/Menu/Menu.unit.test.tsx +++ b/src/components/Menu/Menu.unit.test.tsx @@ -13,7 +13,6 @@ import MenuSelectionGroup from '../MenuSelectionGroup'; import { MenuAppearanceContextValue } from './Menu.types'; import { MenuAppearanceContext, useMenuAppearanceContext } from './Menu'; import ListItemBaseSection from '../ListItemBaseSection'; -import { MenuSeparator } from './Menu.utils'; import ContentSeparator from '../ContentSeparator'; describe('useMenuAppearanceContext', () => { @@ -181,7 +180,7 @@ describe('', () => { ...defaultProps, children: [ One, - , + , Two, ], }; @@ -367,7 +366,7 @@ describe('', () => { ...defaultProps, children: [ One, - , + , Two, ], }; @@ -401,7 +400,7 @@ describe('', () => { One Two
    - +
    Three Four @@ -462,7 +461,7 @@ describe('', () => { One Two - + ', () => { }); }); - it('should render ContentSeperator if children has MenuSeparator', () => { + it('should render ContentSeperator if children has ContentSeparator', () => { const wrapper = mount( One - + Two ); diff --git a/src/components/Menu/Menu.unit.test.tsx.snap b/src/components/Menu/Menu.unit.test.tsx.snap index 2606a4899d..90c35f55e0 100644 --- a/src/components/Menu/Menu.unit.test.tsx.snap +++ b/src/components/Menu/Menu.unit.test.tsx.snap @@ -2964,11 +2964,13 @@ exports[` snapshot should match snapshot with seperator between items 1` "nextKey": "two", "parentKey": null, "prevKey": "one", - "props": Object {}, + "props": Object { + "_isSeparator": true, + }, "rendered": undefined, "shouldInvalidate": undefined, "textValue": undefined, - "type": "separator", + "type": "item", "value": undefined, "wrapper": undefined, }, @@ -2978,7 +2980,7 @@ exports[` snapshot should match snapshot with seperator between items 1` Symbol(Symbol.iterator): [Function], }, "hasChildNodes": false, - "index": 1, + "index": 2, "key": "two", "level": 0, "nextKey": undefined, @@ -2997,7 +2999,9 @@ exports[` snapshot should match snapshot with seperator between items 1` }, "lastKey": "two", }, - "disabledKeys": Set {}, + "disabledKeys": Set { + "sep", + }, "expandedKeys": Set {}, "selectionManager": SelectionManager { "_isSelectAll": null, @@ -3042,11 +3046,13 @@ exports[` snapshot should match snapshot with seperator between items 1` "nextKey": "two", "parentKey": null, "prevKey": "one", - "props": Object {}, + "props": Object { + "_isSeparator": true, + }, "rendered": undefined, "shouldInvalidate": undefined, "textValue": undefined, - "type": "separator", + "type": "item", "value": undefined, "wrapper": undefined, }, @@ -3056,7 +3062,7 @@ exports[` snapshot should match snapshot with seperator between items 1` Symbol(Symbol.iterator): [Function], }, "hasChildNodes": false, - "index": 1, + "index": 2, "key": "two", "level": 0, "nextKey": undefined, @@ -3180,7 +3186,7 @@ exports[` snapshot should match snapshot with seperator between items 1` Symbol(Symbol.iterator): [Function], }, "hasChildNodes": false, - "index": 1, + "index": 2, "key": "two", "level": 0, "nextKey": undefined, @@ -3240,11 +3246,13 @@ exports[` snapshot should match snapshot with seperator between items 1` "nextKey": "two", "parentKey": null, "prevKey": "one", - "props": Object {}, + "props": Object { + "_isSeparator": true, + }, "rendered": undefined, "shouldInvalidate": undefined, "textValue": undefined, - "type": "separator", + "type": "item", "value": undefined, "wrapper": undefined, }, @@ -3254,7 +3262,7 @@ exports[` snapshot should match snapshot with seperator between items 1` Symbol(Symbol.iterator): [Function], }, "hasChildNodes": false, - "index": 1, + "index": 2, "key": "two", "level": 0, "nextKey": undefined, @@ -3273,7 +3281,9 @@ exports[` snapshot should match snapshot with seperator between items 1` }, "lastKey": "two", }, - "disabledKeys": Set {}, + "disabledKeys": Set { + "sep", + }, "expandedKeys": Set {}, "selectionManager": SelectionManager { "_isSelectAll": null, @@ -3318,11 +3328,13 @@ exports[` snapshot should match snapshot with seperator between items 1` "nextKey": "two", "parentKey": null, "prevKey": "one", - "props": Object {}, + "props": Object { + "_isSeparator": true, + }, "rendered": undefined, "shouldInvalidate": undefined, "textValue": undefined, - "type": "separator", + "type": "item", "value": undefined, "wrapper": undefined, }, @@ -3332,7 +3344,7 @@ exports[` snapshot should match snapshot with seperator between items 1` Symbol(Symbol.iterator): [Function], }, "hasChildNodes": false, - "index": 1, + "index": 2, "key": "two", "level": 0, "nextKey": undefined, diff --git a/src/components/Menu/Menu.utils.test.tsx b/src/components/Menu/Menu.utils.test.tsx index 006e246f41..8495c623ec 100644 --- a/src/components/Menu/Menu.utils.test.tsx +++ b/src/components/Menu/Menu.utils.test.tsx @@ -1,8 +1,9 @@ import React from 'react'; -import { MenuSeparator, SelectionGroup } from './Menu.utils'; +import { SelectionGroup } from './Menu.utils'; import { Item, Section, PartialNode } from '@react-stately/collections'; import { SelectionMode } from '@react-types/shared'; import { SelectionGroupProps } from './Menu.types'; +import ContentSeparator from '../ContentSeparator'; jest.mock('@react-stately/collections', () => ({ Section: { @@ -62,28 +63,19 @@ describe('SelectionGroup', () => { }); }); -describe('MenuSeparator', () => { - it('returns null', () => { - const result = MenuSeparator({}); - expect(result).toBeNull(); - }); - - it('should have a __name property set to "MenuSeparator"', () => { - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - // @ts-ignore - expect(MenuSeparator.__name).toBe('MenuSeparator'); - }); - - it('getCollectionNode should yield a single node with type "separator"', () => { +describe('ContentSeparator', () => { + it('getCollectionNode should yield a single node with type "item" and have prop _isSeparator', () => { // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore - We don't export this method in the types - const generator = MenuSeparator.getCollectionNode(); + const generator = ContentSeparator.getCollectionNode(); const results = Array.from(generator); expect(results).toHaveLength(1); expect(results[0]).toEqual({ - type: 'separator', - props: undefined, + type: 'item', + props: { + _isSeparator: true, + }, }); }); @@ -94,13 +86,16 @@ describe('MenuSeparator', () => { // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore - We don't export this method in the types - const generator = MenuSeparator.getCollectionNode(props); + const generator = ContentSeparator.getCollectionNode(props); const results = Array.from(generator); expect(results).toHaveLength(1); expect(results[0]).toEqual({ - type: 'separator', - props, + type: 'item', + props: { + _isSeparator: true, + ...props, + }, }); }); }); diff --git a/src/components/Menu/Menu.utils.ts b/src/components/Menu/Menu.utils.ts index 8fe5fe563d..f56ebfbbdc 100644 --- a/src/components/Menu/Menu.utils.ts +++ b/src/components/Menu/Menu.utils.ts @@ -3,22 +3,6 @@ import { PartialNode, Section } from '@react-stately/collections'; import { ReactElement } from 'react'; import { SelectionGroupProps } from './Menu.types'; -import { ContentSeparatorProps } from '../ContentSeparator'; - -function MenuSeparator(): ReactElement { - return null; -} - -MenuSeparator.__name = 'MenuSeparator'; - -MenuSeparator.getCollectionNode = function* getCollectionNode( - props: ContentSeparatorProps -): Generator> { - yield { - type: 'separator', - props, - }; -}; function SelectionGroup(): ReactElement { return null; @@ -48,5 +32,4 @@ SelectionGroup.getCollectionNode = function* getCollectionNode( // We don't want getCollectionNode to show up in the type definition const _SelectionGroup = SelectionGroup as (props: SelectionGroupProps) => JSX.Element; -const _MenuSeparator = MenuSeparator as (props: ContentSeparatorProps) => JSX.Element; -export { _MenuSeparator as MenuSeparator, _SelectionGroup as SelectionGroup }; +export { _SelectionGroup as SelectionGroup }; diff --git a/src/components/Menu/index.ts b/src/components/Menu/index.ts index 2150b84e3e..6f4cf78a16 100644 --- a/src/components/Menu/index.ts +++ b/src/components/Menu/index.ts @@ -1,9 +1,9 @@ import { default as Menu, MenuContext } from './Menu'; import * as CONSTANTS from './Menu.constants'; import { Props } from './Menu.types'; -import { SelectionGroup, MenuSeparator } from './Menu.utils'; +import { SelectionGroup } from './Menu.utils'; -export { CONSTANTS as MENU_CONSTANTS, MenuContext, SelectionGroup, MenuSeparator }; +export { CONSTANTS as MENU_CONSTANTS, MenuContext, SelectionGroup }; export type MenuProps = Props; diff --git a/src/components/MenuSection/MenuSection.tsx b/src/components/MenuSection/MenuSection.tsx index bcae63c549..9e1a5b8eac 100644 --- a/src/components/MenuSection/MenuSection.tsx +++ b/src/components/MenuSection/MenuSection.tsx @@ -7,6 +7,7 @@ import { Props } from './MenuSection.types'; import './MenuSection.style.scss'; import MenuItem from '../MenuItem'; import { useMenuSection } from '@react-aria/menu'; +import ContentSeparator from '../ContentSeparator'; const MenuSection = (props: Props): ReactElement => { const { item, state, onAction } = props; @@ -17,9 +18,15 @@ const MenuSection = (props: Props): ReactElement => { }); const renderItems = useCallback(() => { - return Array.from(item.childNodes).map((node) => ( - - )); + return Array.from(item.childNodes).map((node) => { + if (node.props?._isSeparator) { + const props = { ...node.props }; + delete props._isSeparator; + + return ; + } + return ; + }); }, [state]); return ( diff --git a/src/components/MenuSection/MenuSection.unit.test.tsx b/src/components/MenuSection/MenuSection.unit.test.tsx index 949d9ee9a8..1d22043b5e 100644 --- a/src/components/MenuSection/MenuSection.unit.test.tsx +++ b/src/components/MenuSection/MenuSection.unit.test.tsx @@ -5,6 +5,7 @@ import { Item, Section } from '@react-stately/collections'; import MenuSection from './'; import { renderHook } from '@testing-library/react-hooks'; import { useTreeState } from '@react-stately/tree'; +import ContentSeparator from '../ContentSeparator'; describe('', () => { const { result } = renderHook(() => @@ -31,6 +32,30 @@ describe('', () => { expect(wrapper).toMatchSnapshot(); }); + + it('should match snapshot with seperator', () => { + const { result } = renderHook(() => + useTreeState({ + children: [ +
    + + Item 1 + + + + Item 2 + +
    , + ], + }) + ); + + const state = result.current; + + const item = state.collection.getItem('$.0'); + const wrapper = mount(); + expect(wrapper).toMatchSnapshot(); + }); }); describe('attributes', () => { @@ -43,5 +68,32 @@ describe('', () => { const element = wrapper.find('ListItemBase li div'); expect(element.length).toEqual(numberOfItems); }); + + it('should render the separators as role="separator"', () => { + const { result } = renderHook(() => + useTreeState({ + children: [ +
    + + Item 1 + + + + Item 2 + +
    , + ], + }) + ); + + const state = result.current; + + const item = state.collection.getItem('$.0'); + const wrapper = mount(); + + const separator = wrapper.find(ContentSeparator); + expect(separator.exists()).toBe(true); + expect(separator.find('li').prop('role')).toBe('separator'); + }); }); }); diff --git a/src/components/MenuSection/MenuSection.unit.test.tsx.snap b/src/components/MenuSection/MenuSection.unit.test.tsx.snap index 88833e19cf..067612632b 100644 --- a/src/components/MenuSection/MenuSection.unit.test.tsx.snap +++ b/src/components/MenuSection/MenuSection.unit.test.tsx.snap @@ -768,3 +768,910 @@ exports[` snapshot should match snapshot 1`] = `
    `; + +exports[` snapshot should match snapshot with seperator 1`] = ` + Object { + "aria-label": "section", + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": true, + "index": 0, + "key": "$.0", + "level": 0, + "nextKey": "$.0.0", + "parentKey": null, + "prevKey": undefined, + "props": undefined, + "rendered": "Section Title", + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "section", + "value": undefined, + "wrapper": undefined, + }, + "$.0.0" => Object { + "aria-label": "0", + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 0, + "key": "$.0.0", + "level": 1, + "nextKey": "$.0.sep", + "parentKey": "$.0", + "prevKey": "$.0", + "props": Object { + "aria-label": "0", + "children": "Item 1", + }, + "rendered": "Item 1", + "shouldInvalidate": undefined, + "textValue": "Item 1", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "$.0.sep" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": undefined, + "index": 1, + "key": "$.0.sep", + "level": 1, + "nextKey": "$.0.1", + "parentKey": "$.0", + "prevKey": "$.0.0", + "props": Object { + "_isSeparator": true, + }, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "$.0.1" => Object { + "aria-label": "1", + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 2, + "key": "$.0.1", + "level": 1, + "nextKey": undefined, + "parentKey": "$.0", + "prevKey": "$.0.sep", + "props": Object { + "aria-label": "1", + "children": "Item 2", + }, + "rendered": "Item 2", + "shouldInvalidate": undefined, + "textValue": "Item 2", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + }, + "lastKey": "$.0.1", + }, + "disabledKeys": Set {}, + "expandedKeys": Set {}, + "selectionManager": SelectionManager { + "_isSelectAll": null, + "allowsCellSelection": false, + "collection": $f4c7caecb598119f63e2918a55ec91a9$export$TreeCollection { + "firstKey": "$.0", + "iterable": Object { + Symbol(Symbol.iterator): [Function], + }, + "keyMap": Map { + "$.0" => Object { + "aria-label": "section", + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": true, + "index": 0, + "key": "$.0", + "level": 0, + "nextKey": "$.0.0", + "parentKey": null, + "prevKey": undefined, + "props": undefined, + "rendered": "Section Title", + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "section", + "value": undefined, + "wrapper": undefined, + }, + "$.0.0" => Object { + "aria-label": "0", + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 0, + "key": "$.0.0", + "level": 1, + "nextKey": "$.0.sep", + "parentKey": "$.0", + "prevKey": "$.0", + "props": Object { + "aria-label": "0", + "children": "Item 1", + }, + "rendered": "Item 1", + "shouldInvalidate": undefined, + "textValue": "Item 1", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "$.0.sep" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": undefined, + "index": 1, + "key": "$.0.sep", + "level": 1, + "nextKey": "$.0.1", + "parentKey": "$.0", + "prevKey": "$.0.0", + "props": Object { + "_isSeparator": true, + }, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "$.0.1" => Object { + "aria-label": "1", + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 2, + "key": "$.0.1", + "level": 1, + "nextKey": undefined, + "parentKey": "$.0", + "prevKey": "$.0.sep", + "props": Object { + "aria-label": "1", + "children": "Item 2", + }, + "rendered": "Item 2", + "shouldInvalidate": undefined, + "textValue": "Item 2", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + }, + "lastKey": "$.0.1", + }, + "state": Object { + "childFocusStrategy": null, + "disabledKeys": Set {}, + "disallowEmptySelection": undefined, + "focusedKey": null, + "isFocused": false, + "selectedKeys": Set {}, + "selectionMode": "none", + "setFocused": [Function], + "setFocusedKey": [Function], + "setSelectedKeys": [Function], + }, + }, + "toggleKey": [Function], + } + } +> +
    + + Section Title + +
      + Object { + "aria-label": "section", + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": true, + "index": 0, + "key": "$.0", + "level": 0, + "nextKey": "$.0.0", + "parentKey": null, + "prevKey": undefined, + "props": undefined, + "rendered": "Section Title", + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "section", + "value": undefined, + "wrapper": undefined, + }, + "$.0.0" => Object { + "aria-label": "0", + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 0, + "key": "$.0.0", + "level": 1, + "nextKey": "$.0.sep", + "parentKey": "$.0", + "prevKey": "$.0", + "props": Object { + "aria-label": "0", + "children": "Item 1", + }, + "rendered": "Item 1", + "shouldInvalidate": undefined, + "textValue": "Item 1", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "$.0.sep" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": undefined, + "index": 1, + "key": "$.0.sep", + "level": 1, + "nextKey": "$.0.1", + "parentKey": "$.0", + "prevKey": "$.0.0", + "props": Object { + "_isSeparator": true, + }, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "$.0.1" => Object { + "aria-label": "1", + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 2, + "key": "$.0.1", + "level": 1, + "nextKey": undefined, + "parentKey": "$.0", + "prevKey": "$.0.sep", + "props": Object { + "aria-label": "1", + "children": "Item 2", + }, + "rendered": "Item 2", + "shouldInvalidate": undefined, + "textValue": "Item 2", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + }, + "lastKey": "$.0.1", + }, + "disabledKeys": Set {}, + "expandedKeys": Set {}, + "selectionManager": SelectionManager { + "_isSelectAll": null, + "allowsCellSelection": false, + "collection": $f4c7caecb598119f63e2918a55ec91a9$export$TreeCollection { + "firstKey": "$.0", + "iterable": Object { + Symbol(Symbol.iterator): [Function], + }, + "keyMap": Map { + "$.0" => Object { + "aria-label": "section", + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": true, + "index": 0, + "key": "$.0", + "level": 0, + "nextKey": "$.0.0", + "parentKey": null, + "prevKey": undefined, + "props": undefined, + "rendered": "Section Title", + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "section", + "value": undefined, + "wrapper": undefined, + }, + "$.0.0" => Object { + "aria-label": "0", + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 0, + "key": "$.0.0", + "level": 1, + "nextKey": "$.0.sep", + "parentKey": "$.0", + "prevKey": "$.0", + "props": Object { + "aria-label": "0", + "children": "Item 1", + }, + "rendered": "Item 1", + "shouldInvalidate": undefined, + "textValue": "Item 1", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "$.0.sep" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": undefined, + "index": 1, + "key": "$.0.sep", + "level": 1, + "nextKey": "$.0.1", + "parentKey": "$.0", + "prevKey": "$.0.0", + "props": Object { + "_isSeparator": true, + }, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "$.0.1" => Object { + "aria-label": "1", + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 2, + "key": "$.0.1", + "level": 1, + "nextKey": undefined, + "parentKey": "$.0", + "prevKey": "$.0.sep", + "props": Object { + "aria-label": "1", + "children": "Item 2", + }, + "rendered": "Item 2", + "shouldInvalidate": undefined, + "textValue": "Item 2", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + }, + "lastKey": "$.0.1", + }, + "state": Object { + "childFocusStrategy": null, + "disabledKeys": Set {}, + "disallowEmptySelection": undefined, + "focusedKey": null, + "isFocused": false, + "selectedKeys": Set {}, + "selectionMode": "none", + "setFocused": [Function], + "setFocusedKey": [Function], + "setSelectedKeys": [Function], + }, + }, + "toggleKey": [Function], + } + } + > + + + +
    • + +
      + Item 1 +
      +       +
      • +       +       +       +       + +
    • + + Object { + "aria-label": "section", + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": true, + "index": 0, + "key": "$.0", + "level": 0, + "nextKey": "$.0.0", + "parentKey": null, + "prevKey": undefined, + "props": undefined, + "rendered": "Section Title", + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "section", + "value": undefined, + "wrapper": undefined, + }, + "$.0.0" => Object { + "aria-label": "0", + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 0, + "key": "$.0.0", + "level": 1, + "nextKey": "$.0.sep", + "parentKey": "$.0", + "prevKey": "$.0", + "props": Object { + "aria-label": "0", + "children": "Item 1", + }, + "rendered": "Item 1", + "shouldInvalidate": undefined, + "textValue": "Item 1", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "$.0.sep" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": undefined, + "index": 1, + "key": "$.0.sep", + "level": 1, + "nextKey": "$.0.1", + "parentKey": "$.0", + "prevKey": "$.0.0", + "props": Object { + "_isSeparator": true, + }, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "$.0.1" => Object { + "aria-label": "1", + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 2, + "key": "$.0.1", + "level": 1, + "nextKey": undefined, + "parentKey": "$.0", + "prevKey": "$.0.sep", + "props": Object { + "aria-label": "1", + "children": "Item 2", + }, + "rendered": "Item 2", + "shouldInvalidate": undefined, + "textValue": "Item 2", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + }, + "lastKey": "$.0.1", + }, + "disabledKeys": Set {}, + "expandedKeys": Set {}, + "selectionManager": SelectionManager { + "_isSelectAll": null, + "allowsCellSelection": false, + "collection": $f4c7caecb598119f63e2918a55ec91a9$export$TreeCollection { + "firstKey": "$.0", + "iterable": Object { + Symbol(Symbol.iterator): [Function], + }, + "keyMap": Map { + "$.0" => Object { + "aria-label": "section", + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": true, + "index": 0, + "key": "$.0", + "level": 0, + "nextKey": "$.0.0", + "parentKey": null, + "prevKey": undefined, + "props": undefined, + "rendered": "Section Title", + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "section", + "value": undefined, + "wrapper": undefined, + }, + "$.0.0" => Object { + "aria-label": "0", + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 0, + "key": "$.0.0", + "level": 1, + "nextKey": "$.0.sep", + "parentKey": "$.0", + "prevKey": "$.0", + "props": Object { + "aria-label": "0", + "children": "Item 1", + }, + "rendered": "Item 1", + "shouldInvalidate": undefined, + "textValue": "Item 1", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "$.0.sep" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": undefined, + "index": 1, + "key": "$.0.sep", + "level": 1, + "nextKey": "$.0.1", + "parentKey": "$.0", + "prevKey": "$.0.0", + "props": Object { + "_isSeparator": true, + }, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "$.0.1" => Object { + "aria-label": "1", + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 2, + "key": "$.0.1", + "level": 1, + "nextKey": undefined, + "parentKey": "$.0", + "prevKey": "$.0.sep", + "props": Object { + "aria-label": "1", + "children": "Item 2", + }, + "rendered": "Item 2", + "shouldInvalidate": undefined, + "textValue": "Item 2", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + }, + "lastKey": "$.0.1", + }, + "state": Object { + "childFocusStrategy": null, + "disabledKeys": Set {}, + "disallowEmptySelection": undefined, + "focusedKey": null, + "isFocused": false, + "selectedKeys": Set {}, + "selectionMode": "none", + "setFocused": [Function], + "setFocusedKey": [Function], + "setSelectedKeys": [Function], + }, + }, + "toggleKey": [Function], + } + } + > + + + +
    • + +
      + Item 2 +
      +       +
      • + + + + +
    +
    +     +`; diff --git a/src/components/MenuSelectionGroup/MenuSelectionGroup.tsx b/src/components/MenuSelectionGroup/MenuSelectionGroup.tsx index d02688dd76..44a5ed3f54 100644 --- a/src/components/MenuSelectionGroup/MenuSelectionGroup.tsx +++ b/src/components/MenuSelectionGroup/MenuSelectionGroup.tsx @@ -9,6 +9,7 @@ import './MenuSelectionGroup.style.scss'; import MenuItem from '../MenuItem'; import { SelectionManager, useMultipleSelectionState } from '@react-stately/selection'; import { useMenuSection } from '@react-aria/menu'; +import ContentSeparator from '../ContentSeparator'; const MenuSelectionGroup = (props: Props): ReactElement => { const { item, state, onAction, tickPosition, classNameSelectedItem, className, itemSize } = props; @@ -54,6 +55,13 @@ const MenuSelectionGroup = (props: Props): ReactElement => )}
      {Array.from(item.childNodes).map((node) => { + if (node.props?._isSeparator) { + const props = { ...node.props }; + delete props._isSeparator; + + return ; + } + let item = ( ', () => { const { result } = renderHook(() => @@ -44,6 +45,42 @@ describe('', () => { expect(wrapper).toMatchSnapshot(); }); + + it('should match snapshot with seperator within selection group', () => { + const { result } = renderHook(() => + useTreeState({ + children: [ + + + Item 1 + + + + Item 2 + + , + ], + selectedKeys: ['$.0.0'], + }) + ); + + const state = result.current; + + const item = state.collection.getItem('$.0'); + const wrapper = mount( + + ); + + expect(wrapper).toMatchSnapshot(); + }); }); describe('attributes', () => { @@ -126,5 +163,43 @@ describe('', () => { onAction: undefined, }); }); + + it('should render the separators as role="separator"', () => { + const { result } = renderHook(() => + useTreeState({ + children: [ + + + Item 1 + + + + Item 2 + + , + ], + selectedKeys: ['$.0.0'], + }) + ); + + const state = result.current; + + const item = state.collection.getItem('$.0'); + const wrapper = mount( + + ); + + const separator = wrapper.find(ContentSeparator); + expect(separator.exists()).toBe(true); + expect(separator.find('li').prop('role')).toBe('separator'); + }); }); }); diff --git a/src/components/MenuSelectionGroup/MenuSelectionGroup.unit.test.tsx.snap b/src/components/MenuSelectionGroup/MenuSelectionGroup.unit.test.tsx.snap index ae3541c88e..0d9f9537c6 100644 --- a/src/components/MenuSelectionGroup/MenuSelectionGroup.unit.test.tsx.snap +++ b/src/components/MenuSelectionGroup/MenuSelectionGroup.unit.test.tsx.snap @@ -904,3 +904,1053 @@ exports[` snapshot should match snapshot 1`] = `
    `; + +exports[` snapshot should match snapshot with seperator within selection group 1`] = ` + + Item 1 + , + , + <$de85adf0b38f4f13e9cffd2f21$var$Item + aria-label="1" + > + Item 2 + , + ], + "selectionGroup": true, + "selectionMode": "single", + "title": "x", + }, + "rendered": "x", + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "section", + "value": undefined, + "wrapper": undefined, + } + } + itemSize={32} + state={ + Object { + "collection": $f4c7caecb598119f63e2918a55ec91a9$export$TreeCollection { + "firstKey": "$.0", + "iterable": Object { + Symbol(Symbol.iterator): [Function], + }, + "keyMap": Map { + "$.0" => Object { + "aria-label": "selection", + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": true, + "index": 0, + "key": "$.0", + "level": 0, + "nextKey": "$.0.0", + "parentKey": null, + "prevKey": undefined, + "props": Object { + "aria-label": "selection", + "children": Array [ + <$de85adf0b38f4f13e9cffd2f21$var$Item + aria-label="0" + > + Item 1 + , + , + <$de85adf0b38f4f13e9cffd2f21$var$Item + aria-label="1" + > + Item 2 + , + ], + "selectionGroup": true, + "selectionMode": "single", + "title": "x", + }, + "rendered": "x", + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "section", + "value": undefined, + "wrapper": undefined, + }, + "$.0.0" => Object { + "aria-label": "0", + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 0, + "key": "$.0.0", + "level": 1, + "nextKey": "$.0.sep", + "parentKey": "$.0", + "prevKey": "$.0", + "props": Object { + "aria-label": "0", + "children": "Item 1", + }, + "rendered": "Item 1", + "shouldInvalidate": undefined, + "textValue": "Item 1", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "$.0.sep" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": undefined, + "index": 1, + "key": "$.0.sep", + "level": 1, + "nextKey": "$.0.1", + "parentKey": "$.0", + "prevKey": "$.0.0", + "props": Object { + "_isSeparator": true, + }, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "$.0.1" => Object { + "aria-label": "1", + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 2, + "key": "$.0.1", + "level": 1, + "nextKey": undefined, + "parentKey": "$.0", + "prevKey": "$.0.sep", + "props": Object { + "aria-label": "1", + "children": "Item 2", + }, + "rendered": "Item 2", + "shouldInvalidate": undefined, + "textValue": "Item 2", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + }, + "lastKey": "$.0.1", + }, + "disabledKeys": Set {}, + "expandedKeys": Set {}, + "selectionManager": SelectionManager { + "_isSelectAll": null, + "allowsCellSelection": false, + "collection": $f4c7caecb598119f63e2918a55ec91a9$export$TreeCollection { + "firstKey": "$.0", + "iterable": Object { + Symbol(Symbol.iterator): [Function], + }, + "keyMap": Map { + "$.0" => Object { + "aria-label": "selection", + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": true, + "index": 0, + "key": "$.0", + "level": 0, + "nextKey": "$.0.0", + "parentKey": null, + "prevKey": undefined, + "props": Object { + "aria-label": "selection", + "children": Array [ + <$de85adf0b38f4f13e9cffd2f21$var$Item + aria-label="0" + > + Item 1 + , + , + <$de85adf0b38f4f13e9cffd2f21$var$Item + aria-label="1" + > + Item 2 + , + ], + "selectionGroup": true, + "selectionMode": "single", + "title": "x", + }, + "rendered": "x", + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "section", + "value": undefined, + "wrapper": undefined, + }, + "$.0.0" => Object { + "aria-label": "0", + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 0, + "key": "$.0.0", + "level": 1, + "nextKey": "$.0.sep", + "parentKey": "$.0", + "prevKey": "$.0", + "props": Object { + "aria-label": "0", + "children": "Item 1", + }, + "rendered": "Item 1", + "shouldInvalidate": undefined, + "textValue": "Item 1", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "$.0.sep" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": undefined, + "index": 1, + "key": "$.0.sep", + "level": 1, + "nextKey": "$.0.1", + "parentKey": "$.0", + "prevKey": "$.0.0", + "props": Object { + "_isSeparator": true, + }, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "$.0.1" => Object { + "aria-label": "1", + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 2, + "key": "$.0.1", + "level": 1, + "nextKey": undefined, + "parentKey": "$.0", + "prevKey": "$.0.sep", + "props": Object { + "aria-label": "1", + "children": "Item 2", + }, + "rendered": "Item 2", + "shouldInvalidate": undefined, + "textValue": "Item 2", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + }, + "lastKey": "$.0.1", + }, + "state": Object { + "childFocusStrategy": "first", + "disabledKeys": Set {}, + "disallowEmptySelection": undefined, + "focusedKey": null, + "isFocused": false, + "selectedKeys": Set { + "$.0.0", + }, + "selectionMode": "none", + "setFocused": [Function], + "setFocusedKey": [Function], + "setSelectedKeys": [Function], + }, + }, + "toggleKey": [Function], + } + } + tickPosition="none" +> +
    +
    + + x + +
    +
      + Object { + "aria-label": "selection", + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": true, + "index": 0, + "key": "$.0", + "level": 0, + "nextKey": "$.0.0", + "parentKey": null, + "prevKey": undefined, + "props": Object { + "aria-label": "selection", + "children": Array [ + <$de85adf0b38f4f13e9cffd2f21$var$Item + aria-label="0" + > + Item 1 + , + , + <$de85adf0b38f4f13e9cffd2f21$var$Item + aria-label="1" + > + Item 2 + , + ], + "selectionGroup": true, + "selectionMode": "single", + "title": "x", + }, + "rendered": "x", + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "section", + "value": undefined, + "wrapper": undefined, + }, + "$.0.0" => Object { + "aria-label": "0", + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 0, + "key": "$.0.0", + "level": 1, + "nextKey": "$.0.sep", + "parentKey": "$.0", + "prevKey": "$.0", + "props": Object { + "aria-label": "0", + "children": "Item 1", + }, + "rendered": "Item 1", + "shouldInvalidate": undefined, + "textValue": "Item 1", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "$.0.sep" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": undefined, + "index": 1, + "key": "$.0.sep", + "level": 1, + "nextKey": "$.0.1", + "parentKey": "$.0", + "prevKey": "$.0.0", + "props": Object { + "_isSeparator": true, + }, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "$.0.1" => Object { + "aria-label": "1", + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 2, + "key": "$.0.1", + "level": 1, + "nextKey": undefined, + "parentKey": "$.0", + "prevKey": "$.0.sep", + "props": Object { + "aria-label": "1", + "children": "Item 2", + }, + "rendered": "Item 2", + "shouldInvalidate": undefined, + "textValue": "Item 2", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + }, + "lastKey": "$.0.1", + }, + "disabledKeys": Set {}, + "expandedKeys": Set {}, + "selectionManager": SelectionManager { + "_isSelectAll": null, + "allowsCellSelection": false, + "collection": $f4c7caecb598119f63e2918a55ec91a9$export$TreeCollection { + "firstKey": "$.0", + "iterable": Object { + Symbol(Symbol.iterator): [Function], + }, + "keyMap": Map { + "$.0" => Object { + "aria-label": "selection", + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": true, + "index": 0, + "key": "$.0", + "level": 0, + "nextKey": "$.0.0", + "parentKey": null, + "prevKey": undefined, + "props": Object { + "aria-label": "selection", + "children": Array [ + <$de85adf0b38f4f13e9cffd2f21$var$Item + aria-label="0" + > + Item 1 + , + , + <$de85adf0b38f4f13e9cffd2f21$var$Item + aria-label="1" + > + Item 2 + , + ], + "selectionGroup": true, + "selectionMode": "single", + "title": "x", + }, + "rendered": "x", + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "section", + "value": undefined, + "wrapper": undefined, + }, + "$.0.0" => Object { + "aria-label": "0", + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 0, + "key": "$.0.0", + "level": 1, + "nextKey": "$.0.sep", + "parentKey": "$.0", + "prevKey": "$.0", + "props": Object { + "aria-label": "0", + "children": "Item 1", + }, + "rendered": "Item 1", + "shouldInvalidate": undefined, + "textValue": "Item 1", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "$.0.sep" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": undefined, + "index": 1, + "key": "$.0.sep", + "level": 1, + "nextKey": "$.0.1", + "parentKey": "$.0", + "prevKey": "$.0.0", + "props": Object { + "_isSeparator": true, + }, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "$.0.1" => Object { + "aria-label": "1", + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 2, + "key": "$.0.1", + "level": 1, + "nextKey": undefined, + "parentKey": "$.0", + "prevKey": "$.0.sep", + "props": Object { + "aria-label": "1", + "children": "Item 2", + }, + "rendered": "Item 2", + "shouldInvalidate": undefined, + "textValue": "Item 2", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + }, + "lastKey": "$.0.1", + }, + "state": Object { + "childFocusStrategy": "first", + "disabledKeys": Set {}, + "disallowEmptySelection": undefined, + "focusedKey": null, + "isFocused": false, + "selectedKeys": Set {}, + "selectionMode": "none", + "setFocused": [Function], + "setFocusedKey": [Function], + "setSelectedKeys": [Function], + }, + }, + "toggleKey": [Function], + } + } + tickPosition="none" + > + + + +
    • + +
      + Item 1 +
      +       +
      • +       +       +       +       + +
    • + + Object { + "aria-label": "selection", + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": true, + "index": 0, + "key": "$.0", + "level": 0, + "nextKey": "$.0.0", + "parentKey": null, + "prevKey": undefined, + "props": Object { + "aria-label": "selection", + "children": Array [ + <$de85adf0b38f4f13e9cffd2f21$var$Item + aria-label="0" + > + Item 1 + , + , + <$de85adf0b38f4f13e9cffd2f21$var$Item + aria-label="1" + > + Item 2 + , + ], + "selectionGroup": true, + "selectionMode": "single", + "title": "x", + }, + "rendered": "x", + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "section", + "value": undefined, + "wrapper": undefined, + }, + "$.0.0" => Object { + "aria-label": "0", + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 0, + "key": "$.0.0", + "level": 1, + "nextKey": "$.0.sep", + "parentKey": "$.0", + "prevKey": "$.0", + "props": Object { + "aria-label": "0", + "children": "Item 1", + }, + "rendered": "Item 1", + "shouldInvalidate": undefined, + "textValue": "Item 1", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "$.0.sep" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": undefined, + "index": 1, + "key": "$.0.sep", + "level": 1, + "nextKey": "$.0.1", + "parentKey": "$.0", + "prevKey": "$.0.0", + "props": Object { + "_isSeparator": true, + }, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "$.0.1" => Object { + "aria-label": "1", + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 2, + "key": "$.0.1", + "level": 1, + "nextKey": undefined, + "parentKey": "$.0", + "prevKey": "$.0.sep", + "props": Object { + "aria-label": "1", + "children": "Item 2", + }, + "rendered": "Item 2", + "shouldInvalidate": undefined, + "textValue": "Item 2", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + }, + "lastKey": "$.0.1", + }, + "disabledKeys": Set {}, + "expandedKeys": Set {}, + "selectionManager": SelectionManager { + "_isSelectAll": null, + "allowsCellSelection": false, + "collection": $f4c7caecb598119f63e2918a55ec91a9$export$TreeCollection { + "firstKey": "$.0", + "iterable": Object { + Symbol(Symbol.iterator): [Function], + }, + "keyMap": Map { + "$.0" => Object { + "aria-label": "selection", + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": true, + "index": 0, + "key": "$.0", + "level": 0, + "nextKey": "$.0.0", + "parentKey": null, + "prevKey": undefined, + "props": Object { + "aria-label": "selection", + "children": Array [ + <$de85adf0b38f4f13e9cffd2f21$var$Item + aria-label="0" + > + Item 1 + , + , + <$de85adf0b38f4f13e9cffd2f21$var$Item + aria-label="1" + > + Item 2 + , + ], + "selectionGroup": true, + "selectionMode": "single", + "title": "x", + }, + "rendered": "x", + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "section", + "value": undefined, + "wrapper": undefined, + }, + "$.0.0" => Object { + "aria-label": "0", + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 0, + "key": "$.0.0", + "level": 1, + "nextKey": "$.0.sep", + "parentKey": "$.0", + "prevKey": "$.0", + "props": Object { + "aria-label": "0", + "children": "Item 1", + }, + "rendered": "Item 1", + "shouldInvalidate": undefined, + "textValue": "Item 1", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "$.0.sep" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": undefined, + "index": 1, + "key": "$.0.sep", + "level": 1, + "nextKey": "$.0.1", + "parentKey": "$.0", + "prevKey": "$.0.0", + "props": Object { + "_isSeparator": true, + }, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "$.0.1" => Object { + "aria-label": "1", + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 2, + "key": "$.0.1", + "level": 1, + "nextKey": undefined, + "parentKey": "$.0", + "prevKey": "$.0.sep", + "props": Object { + "aria-label": "1", + "children": "Item 2", + }, + "rendered": "Item 2", + "shouldInvalidate": undefined, + "textValue": "Item 2", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + }, + "lastKey": "$.0.1", + }, + "state": Object { + "childFocusStrategy": "first", + "disabledKeys": Set {}, + "disallowEmptySelection": undefined, + "focusedKey": null, + "isFocused": false, + "selectedKeys": Set {}, + "selectionMode": "none", + "setFocused": [Function], + "setFocusedKey": [Function], + "setSelectedKeys": [Function], + }, + }, + "toggleKey": [Function], + } + } + tickPosition="none" + > + + + +
    • + +
      + Item 2 +
      +       +
      • + + + + +
    +
    +     +`; diff --git a/src/components/index.ts b/src/components/index.ts index 85956a07ac..9e37030143 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -53,7 +53,7 @@ export { default as ReactionPicker } from './ReactionPicker'; export { default as AddReactionButton } from './AddReactionButton'; export { default as AvatarMeetingsListItem } from './AvatarMeetingsListItem'; export { default as MenuTrigger } from './MenuTrigger'; -export { default as Menu, SelectionGroup, MenuSeparator } from './Menu'; +export { default as Menu, SelectionGroup } from './Menu'; export { default as DividerDot } from './DividerDot'; export { default as Popover } from './Popover'; export { default as ListHeader } from './ListHeader'; diff --git a/src/index.js b/src/index.js index d9650ad233..e97767adc4 100644 --- a/src/index.js +++ b/src/index.js @@ -197,7 +197,6 @@ export { Tree, useTreeContext, SelectionGroup, - MenuSeparator, TreeNodeBase, MeetingRowContent, } from './components'; From c80668a83aacd37388c3ce73de7ffcf1b515848f Mon Sep 17 00:00:00 2001 From: Dominic Carrington Date: Wed, 25 Sep 2024 13:53:58 +0100 Subject: [PATCH 22/25] test(Menu): add ContentSeparator to keyboard tests --- src/components/Menu/Menu.unit.test.tsx | 46 + src/components/Menu/Menu.unit.test.tsx.snap | 6542 +++++++++++++++++++ 2 files changed, 6588 insertions(+) diff --git a/src/components/Menu/Menu.unit.test.tsx b/src/components/Menu/Menu.unit.test.tsx index b8d0806c20..b49f76089b 100644 --- a/src/components/Menu/Menu.unit.test.tsx +++ b/src/components/Menu/Menu.unit.test.tsx @@ -188,6 +188,50 @@ describe('', () => { const container = mount(); expect(container).toMatchSnapshot(); }); + + it('should match snapshot with seperator within selection group', () => { + const props = { + ...defaultProps, + children: [ + + One + + Two + , + , + + One + + Two + , + ], + }; + + const container = mount(); + expect(container).toMatchSnapshot(); + }); + + it('should match snapshot with seperator within section', () => { + const props = { + ...defaultProps, + children: [ +
    + One + + Two +
    , + , +
    + One + + Two +
    , + ], + }; + + const container = mount(); + expect(container).toMatchSnapshot(); + }); }); describe('attributes', () => { @@ -398,6 +442,7 @@ describe('', () => {
    One + Two
    @@ -459,6 +504,7 @@ describe('', () => { aria-label="selection1" > One + Two diff --git a/src/components/Menu/Menu.unit.test.tsx.snap b/src/components/Menu/Menu.unit.test.tsx.snap index 90c35f55e0..15fff603f4 100644 --- a/src/components/Menu/Menu.unit.test.tsx.snap +++ b/src/components/Menu/Menu.unit.test.tsx.snap @@ -3458,6 +3458,6548 @@ exports[` snapshot should match snapshot with seperator between items 1` `; +exports[` snapshot should match snapshot with seperator within section 1`] = ` +<_Menu + aria-label="Menu component" +> +
    + Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": true, + "index": 0, + "key": "section-1", + "level": 0, + "nextKey": "1-one", + "parentKey": null, + "prevKey": undefined, + "props": undefined, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "section", + "value": undefined, + "wrapper": undefined, + }, + "1-one" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 0, + "key": "1-one", + "level": 1, + "nextKey": "sep-section-1", + "parentKey": "section-1", + "prevKey": "section-1", + "props": Object { + "children": "One", + }, + "rendered": "One", + "shouldInvalidate": undefined, + "textValue": "One", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "sep-section-1" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": undefined, + "index": 1, + "key": "sep-section-1", + "level": 1, + "nextKey": "1-two", + "parentKey": "section-1", + "prevKey": "1-one", + "props": Object { + "_isSeparator": true, + }, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "1-two" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 2, + "key": "1-two", + "level": 1, + "nextKey": "sep-middle", + "parentKey": "section-1", + "prevKey": "sep-section-1", + "props": Object { + "children": "Two", + }, + "rendered": "Two", + "shouldInvalidate": undefined, + "textValue": "Two", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "sep-middle" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": undefined, + "index": 3, + "key": "sep-middle", + "level": 0, + "nextKey": "section-2", + "parentKey": null, + "prevKey": "1-two", + "props": Object { + "_isSeparator": true, + }, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "section-2" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": true, + "index": 2, + "key": "section-2", + "level": 0, + "nextKey": "2-one", + "parentKey": null, + "prevKey": "sep-middle", + "props": undefined, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "section", + "value": undefined, + "wrapper": undefined, + }, + "2-one" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 4, + "key": "2-one", + "level": 1, + "nextKey": "sep-section-2", + "parentKey": "section-2", + "prevKey": "section-2", + "props": Object { + "children": "One", + }, + "rendered": "One", + "shouldInvalidate": undefined, + "textValue": "One", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "sep-section-2" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": undefined, + "index": 5, + "key": "sep-section-2", + "level": 1, + "nextKey": "2-two", + "parentKey": "section-2", + "prevKey": "2-one", + "props": Object { + "_isSeparator": true, + }, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "2-two" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 6, + "key": "2-two", + "level": 1, + "nextKey": undefined, + "parentKey": "section-2", + "prevKey": "sep-section-2", + "props": Object { + "children": "Two", + }, + "rendered": "Two", + "shouldInvalidate": undefined, + "textValue": "Two", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + }, + "lastKey": "2-two", + }, + "disabledKeys": Set { + "sep-section-1", + "sep-middle", + "sep-section-2", + }, + "expandedKeys": Set {}, + "selectionManager": SelectionManager { + "_isSelectAll": null, + "allowsCellSelection": false, + "collection": $f4c7caecb598119f63e2918a55ec91a9$export$TreeCollection { + "firstKey": "section-1", + "iterable": Object { + Symbol(Symbol.iterator): [Function], + }, + "keyMap": Map { + "section-1" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": true, + "index": 0, + "key": "section-1", + "level": 0, + "nextKey": "1-one", + "parentKey": null, + "prevKey": undefined, + "props": undefined, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "section", + "value": undefined, + "wrapper": undefined, + }, + "1-one" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 0, + "key": "1-one", + "level": 1, + "nextKey": "sep-section-1", + "parentKey": "section-1", + "prevKey": "section-1", + "props": Object { + "children": "One", + }, + "rendered": "One", + "shouldInvalidate": undefined, + "textValue": "One", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "sep-section-1" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": undefined, + "index": 1, + "key": "sep-section-1", + "level": 1, + "nextKey": "1-two", + "parentKey": "section-1", + "prevKey": "1-one", + "props": Object { + "_isSeparator": true, + }, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "1-two" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 2, + "key": "1-two", + "level": 1, + "nextKey": "sep-middle", + "parentKey": "section-1", + "prevKey": "sep-section-1", + "props": Object { + "children": "Two", + }, + "rendered": "Two", + "shouldInvalidate": undefined, + "textValue": "Two", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "sep-middle" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": undefined, + "index": 3, + "key": "sep-middle", + "level": 0, + "nextKey": "section-2", + "parentKey": null, + "prevKey": "1-two", + "props": Object { + "_isSeparator": true, + }, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "section-2" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": true, + "index": 2, + "key": "section-2", + "level": 0, + "nextKey": "2-one", + "parentKey": null, + "prevKey": "sep-middle", + "props": undefined, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "section", + "value": undefined, + "wrapper": undefined, + }, + "2-one" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 4, + "key": "2-one", + "level": 1, + "nextKey": "sep-section-2", + "parentKey": "section-2", + "prevKey": "section-2", + "props": Object { + "children": "One", + }, + "rendered": "One", + "shouldInvalidate": undefined, + "textValue": "One", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "sep-section-2" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": undefined, + "index": 5, + "key": "sep-section-2", + "level": 1, + "nextKey": "2-two", + "parentKey": "section-2", + "prevKey": "2-one", + "props": Object { + "_isSeparator": true, + }, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "2-two" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 6, + "key": "2-two", + "level": 1, + "nextKey": undefined, + "parentKey": "section-2", + "prevKey": "sep-section-2", + "props": Object { + "children": "Two", + }, + "rendered": "Two", + "shouldInvalidate": undefined, + "textValue": "Two", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + }, + "lastKey": "2-two", + }, + "state": Object { + "childFocusStrategy": null, + "disabledKeys": Set {}, + "disallowEmptySelection": undefined, + "focusedKey": null, + "isFocused": false, + "selectedKeys": Set {}, + "selectionMode": "none", + "setFocused": [Function], + "setFocusedKey": [Function], + "setSelectedKeys": [Function], + }, + }, + "toggleKey": [Function], + } + } + > +
    +
      + Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": true, + "index": 0, + "key": "section-1", + "level": 0, + "nextKey": "1-one", + "parentKey": null, + "prevKey": undefined, + "props": undefined, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "section", + "value": undefined, + "wrapper": undefined, + }, + "1-one" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 0, + "key": "1-one", + "level": 1, + "nextKey": "sep-section-1", + "parentKey": "section-1", + "prevKey": "section-1", + "props": Object { + "children": "One", + }, + "rendered": "One", + "shouldInvalidate": undefined, + "textValue": "One", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "sep-section-1" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": undefined, + "index": 1, + "key": "sep-section-1", + "level": 1, + "nextKey": "1-two", + "parentKey": "section-1", + "prevKey": "1-one", + "props": Object { + "_isSeparator": true, + }, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "1-two" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 2, + "key": "1-two", + "level": 1, + "nextKey": "sep-middle", + "parentKey": "section-1", + "prevKey": "sep-section-1", + "props": Object { + "children": "Two", + }, + "rendered": "Two", + "shouldInvalidate": undefined, + "textValue": "Two", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "sep-middle" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": undefined, + "index": 3, + "key": "sep-middle", + "level": 0, + "nextKey": "section-2", + "parentKey": null, + "prevKey": "1-two", + "props": Object { + "_isSeparator": true, + }, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "section-2" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": true, + "index": 2, + "key": "section-2", + "level": 0, + "nextKey": "2-one", + "parentKey": null, + "prevKey": "sep-middle", + "props": undefined, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "section", + "value": undefined, + "wrapper": undefined, + }, + "2-one" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 4, + "key": "2-one", + "level": 1, + "nextKey": "sep-section-2", + "parentKey": "section-2", + "prevKey": "section-2", + "props": Object { + "children": "One", + }, + "rendered": "One", + "shouldInvalidate": undefined, + "textValue": "One", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "sep-section-2" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": undefined, + "index": 5, + "key": "sep-section-2", + "level": 1, + "nextKey": "2-two", + "parentKey": "section-2", + "prevKey": "2-one", + "props": Object { + "_isSeparator": true, + }, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "2-two" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 6, + "key": "2-two", + "level": 1, + "nextKey": undefined, + "parentKey": "section-2", + "prevKey": "sep-section-2", + "props": Object { + "children": "Two", + }, + "rendered": "Two", + "shouldInvalidate": undefined, + "textValue": "Two", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + }, + "lastKey": "2-two", + }, + "disabledKeys": Set { + "sep-section-1", + "sep-middle", + "sep-section-2", + }, + "expandedKeys": Set {}, + "selectionManager": SelectionManager { + "_isSelectAll": null, + "allowsCellSelection": false, + "collection": $f4c7caecb598119f63e2918a55ec91a9$export$TreeCollection { + "firstKey": "section-1", + "iterable": Object { + Symbol(Symbol.iterator): [Function], + }, + "keyMap": Map { + "section-1" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": true, + "index": 0, + "key": "section-1", + "level": 0, + "nextKey": "1-one", + "parentKey": null, + "prevKey": undefined, + "props": undefined, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "section", + "value": undefined, + "wrapper": undefined, + }, + "1-one" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 0, + "key": "1-one", + "level": 1, + "nextKey": "sep-section-1", + "parentKey": "section-1", + "prevKey": "section-1", + "props": Object { + "children": "One", + }, + "rendered": "One", + "shouldInvalidate": undefined, + "textValue": "One", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "sep-section-1" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": undefined, + "index": 1, + "key": "sep-section-1", + "level": 1, + "nextKey": "1-two", + "parentKey": "section-1", + "prevKey": "1-one", + "props": Object { + "_isSeparator": true, + }, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "1-two" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 2, + "key": "1-two", + "level": 1, + "nextKey": "sep-middle", + "parentKey": "section-1", + "prevKey": "sep-section-1", + "props": Object { + "children": "Two", + }, + "rendered": "Two", + "shouldInvalidate": undefined, + "textValue": "Two", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "sep-middle" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": undefined, + "index": 3, + "key": "sep-middle", + "level": 0, + "nextKey": "section-2", + "parentKey": null, + "prevKey": "1-two", + "props": Object { + "_isSeparator": true, + }, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "section-2" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": true, + "index": 2, + "key": "section-2", + "level": 0, + "nextKey": "2-one", + "parentKey": null, + "prevKey": "sep-middle", + "props": undefined, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "section", + "value": undefined, + "wrapper": undefined, + }, + "2-one" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 4, + "key": "2-one", + "level": 1, + "nextKey": "sep-section-2", + "parentKey": "section-2", + "prevKey": "section-2", + "props": Object { + "children": "One", + }, + "rendered": "One", + "shouldInvalidate": undefined, + "textValue": "One", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "sep-section-2" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": undefined, + "index": 5, + "key": "sep-section-2", + "level": 1, + "nextKey": "2-two", + "parentKey": "section-2", + "prevKey": "2-one", + "props": Object { + "_isSeparator": true, + }, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "2-two" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 6, + "key": "2-two", + "level": 1, + "nextKey": undefined, + "parentKey": "section-2", + "prevKey": "sep-section-2", + "props": Object { + "children": "Two", + }, + "rendered": "Two", + "shouldInvalidate": undefined, + "textValue": "Two", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + }, + "lastKey": "2-two", + }, + "state": Object { + "childFocusStrategy": null, + "disabledKeys": Set {}, + "disallowEmptySelection": undefined, + "focusedKey": null, + "isFocused": false, + "selectedKeys": Set {}, + "selectionMode": "none", + "setFocused": [Function], + "setFocusedKey": [Function], + "setSelectedKeys": [Function], + }, + }, + "toggleKey": [Function], + } + } + > + + + +
    • + +
      + One +
      +       +
      • +       +       +       +       + +
    • + + Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": true, + "index": 0, + "key": "section-1", + "level": 0, + "nextKey": "1-one", + "parentKey": null, + "prevKey": undefined, + "props": undefined, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "section", + "value": undefined, + "wrapper": undefined, + }, + "1-one" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 0, + "key": "1-one", + "level": 1, + "nextKey": "sep-section-1", + "parentKey": "section-1", + "prevKey": "section-1", + "props": Object { + "children": "One", + }, + "rendered": "One", + "shouldInvalidate": undefined, + "textValue": "One", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "sep-section-1" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": undefined, + "index": 1, + "key": "sep-section-1", + "level": 1, + "nextKey": "1-two", + "parentKey": "section-1", + "prevKey": "1-one", + "props": Object { + "_isSeparator": true, + }, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "1-two" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 2, + "key": "1-two", + "level": 1, + "nextKey": "sep-middle", + "parentKey": "section-1", + "prevKey": "sep-section-1", + "props": Object { + "children": "Two", + }, + "rendered": "Two", + "shouldInvalidate": undefined, + "textValue": "Two", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "sep-middle" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": undefined, + "index": 3, + "key": "sep-middle", + "level": 0, + "nextKey": "section-2", + "parentKey": null, + "prevKey": "1-two", + "props": Object { + "_isSeparator": true, + }, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "section-2" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": true, + "index": 2, + "key": "section-2", + "level": 0, + "nextKey": "2-one", + "parentKey": null, + "prevKey": "sep-middle", + "props": undefined, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "section", + "value": undefined, + "wrapper": undefined, + }, + "2-one" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 4, + "key": "2-one", + "level": 1, + "nextKey": "sep-section-2", + "parentKey": "section-2", + "prevKey": "section-2", + "props": Object { + "children": "One", + }, + "rendered": "One", + "shouldInvalidate": undefined, + "textValue": "One", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "sep-section-2" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": undefined, + "index": 5, + "key": "sep-section-2", + "level": 1, + "nextKey": "2-two", + "parentKey": "section-2", + "prevKey": "2-one", + "props": Object { + "_isSeparator": true, + }, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "2-two" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 6, + "key": "2-two", + "level": 1, + "nextKey": undefined, + "parentKey": "section-2", + "prevKey": "sep-section-2", + "props": Object { + "children": "Two", + }, + "rendered": "Two", + "shouldInvalidate": undefined, + "textValue": "Two", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + }, + "lastKey": "2-two", + }, + "disabledKeys": Set { + "sep-section-1", + "sep-middle", + "sep-section-2", + }, + "expandedKeys": Set {}, + "selectionManager": SelectionManager { + "_isSelectAll": null, + "allowsCellSelection": false, + "collection": $f4c7caecb598119f63e2918a55ec91a9$export$TreeCollection { + "firstKey": "section-1", + "iterable": Object { + Symbol(Symbol.iterator): [Function], + }, + "keyMap": Map { + "section-1" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": true, + "index": 0, + "key": "section-1", + "level": 0, + "nextKey": "1-one", + "parentKey": null, + "prevKey": undefined, + "props": undefined, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "section", + "value": undefined, + "wrapper": undefined, + }, + "1-one" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 0, + "key": "1-one", + "level": 1, + "nextKey": "sep-section-1", + "parentKey": "section-1", + "prevKey": "section-1", + "props": Object { + "children": "One", + }, + "rendered": "One", + "shouldInvalidate": undefined, + "textValue": "One", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "sep-section-1" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": undefined, + "index": 1, + "key": "sep-section-1", + "level": 1, + "nextKey": "1-two", + "parentKey": "section-1", + "prevKey": "1-one", + "props": Object { + "_isSeparator": true, + }, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "1-two" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 2, + "key": "1-two", + "level": 1, + "nextKey": "sep-middle", + "parentKey": "section-1", + "prevKey": "sep-section-1", + "props": Object { + "children": "Two", + }, + "rendered": "Two", + "shouldInvalidate": undefined, + "textValue": "Two", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "sep-middle" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": undefined, + "index": 3, + "key": "sep-middle", + "level": 0, + "nextKey": "section-2", + "parentKey": null, + "prevKey": "1-two", + "props": Object { + "_isSeparator": true, + }, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "section-2" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": true, + "index": 2, + "key": "section-2", + "level": 0, + "nextKey": "2-one", + "parentKey": null, + "prevKey": "sep-middle", + "props": undefined, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "section", + "value": undefined, + "wrapper": undefined, + }, + "2-one" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 4, + "key": "2-one", + "level": 1, + "nextKey": "sep-section-2", + "parentKey": "section-2", + "prevKey": "section-2", + "props": Object { + "children": "One", + }, + "rendered": "One", + "shouldInvalidate": undefined, + "textValue": "One", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "sep-section-2" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": undefined, + "index": 5, + "key": "sep-section-2", + "level": 1, + "nextKey": "2-two", + "parentKey": "section-2", + "prevKey": "2-one", + "props": Object { + "_isSeparator": true, + }, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "2-two" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 6, + "key": "2-two", + "level": 1, + "nextKey": undefined, + "parentKey": "section-2", + "prevKey": "sep-section-2", + "props": Object { + "children": "Two", + }, + "rendered": "Two", + "shouldInvalidate": undefined, + "textValue": "Two", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + }, + "lastKey": "2-two", + }, + "state": Object { + "childFocusStrategy": null, + "disabledKeys": Set {}, + "disallowEmptySelection": undefined, + "focusedKey": null, + "isFocused": false, + "selectedKeys": Set {}, + "selectionMode": "none", + "setFocused": [Function], + "setFocusedKey": [Function], + "setSelectedKeys": [Function], + }, + }, + "toggleKey": [Function], + } + } + > + + + +
    • + +
      + Two +
      +       +
      • + + + + +
    +
    +     + +
  • + + Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": true, + "index": 0, + "key": "section-1", + "level": 0, + "nextKey": "1-one", + "parentKey": null, + "prevKey": undefined, + "props": undefined, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "section", + "value": undefined, + "wrapper": undefined, + }, + "1-one" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 0, + "key": "1-one", + "level": 1, + "nextKey": "sep-section-1", + "parentKey": "section-1", + "prevKey": "section-1", + "props": Object { + "children": "One", + }, + "rendered": "One", + "shouldInvalidate": undefined, + "textValue": "One", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "sep-section-1" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": undefined, + "index": 1, + "key": "sep-section-1", + "level": 1, + "nextKey": "1-two", + "parentKey": "section-1", + "prevKey": "1-one", + "props": Object { + "_isSeparator": true, + }, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "1-two" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 2, + "key": "1-two", + "level": 1, + "nextKey": "sep-middle", + "parentKey": "section-1", + "prevKey": "sep-section-1", + "props": Object { + "children": "Two", + }, + "rendered": "Two", + "shouldInvalidate": undefined, + "textValue": "Two", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "sep-middle" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": undefined, + "index": 3, + "key": "sep-middle", + "level": 0, + "nextKey": "section-2", + "parentKey": null, + "prevKey": "1-two", + "props": Object { + "_isSeparator": true, + }, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "section-2" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": true, + "index": 2, + "key": "section-2", + "level": 0, + "nextKey": "2-one", + "parentKey": null, + "prevKey": "sep-middle", + "props": undefined, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "section", + "value": undefined, + "wrapper": undefined, + }, + "2-one" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 4, + "key": "2-one", + "level": 1, + "nextKey": "sep-section-2", + "parentKey": "section-2", + "prevKey": "section-2", + "props": Object { + "children": "One", + }, + "rendered": "One", + "shouldInvalidate": undefined, + "textValue": "One", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "sep-section-2" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": undefined, + "index": 5, + "key": "sep-section-2", + "level": 1, + "nextKey": "2-two", + "parentKey": "section-2", + "prevKey": "2-one", + "props": Object { + "_isSeparator": true, + }, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "2-two" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 6, + "key": "2-two", + "level": 1, + "nextKey": undefined, + "parentKey": "section-2", + "prevKey": "sep-section-2", + "props": Object { + "children": "Two", + }, + "rendered": "Two", + "shouldInvalidate": undefined, + "textValue": "Two", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + }, + "lastKey": "2-two", + }, + "disabledKeys": Set { + "sep-section-1", + "sep-middle", + "sep-section-2", + }, + "expandedKeys": Set {}, + "selectionManager": SelectionManager { + "_isSelectAll": null, + "allowsCellSelection": false, + "collection": $f4c7caecb598119f63e2918a55ec91a9$export$TreeCollection { + "firstKey": "section-1", + "iterable": Object { + Symbol(Symbol.iterator): [Function], + }, + "keyMap": Map { + "section-1" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": true, + "index": 0, + "key": "section-1", + "level": 0, + "nextKey": "1-one", + "parentKey": null, + "prevKey": undefined, + "props": undefined, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "section", + "value": undefined, + "wrapper": undefined, + }, + "1-one" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 0, + "key": "1-one", + "level": 1, + "nextKey": "sep-section-1", + "parentKey": "section-1", + "prevKey": "section-1", + "props": Object { + "children": "One", + }, + "rendered": "One", + "shouldInvalidate": undefined, + "textValue": "One", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "sep-section-1" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": undefined, + "index": 1, + "key": "sep-section-1", + "level": 1, + "nextKey": "1-two", + "parentKey": "section-1", + "prevKey": "1-one", + "props": Object { + "_isSeparator": true, + }, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "1-two" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 2, + "key": "1-two", + "level": 1, + "nextKey": "sep-middle", + "parentKey": "section-1", + "prevKey": "sep-section-1", + "props": Object { + "children": "Two", + }, + "rendered": "Two", + "shouldInvalidate": undefined, + "textValue": "Two", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "sep-middle" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": undefined, + "index": 3, + "key": "sep-middle", + "level": 0, + "nextKey": "section-2", + "parentKey": null, + "prevKey": "1-two", + "props": Object { + "_isSeparator": true, + }, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "section-2" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": true, + "index": 2, + "key": "section-2", + "level": 0, + "nextKey": "2-one", + "parentKey": null, + "prevKey": "sep-middle", + "props": undefined, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "section", + "value": undefined, + "wrapper": undefined, + }, + "2-one" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 4, + "key": "2-one", + "level": 1, + "nextKey": "sep-section-2", + "parentKey": "section-2", + "prevKey": "section-2", + "props": Object { + "children": "One", + }, + "rendered": "One", + "shouldInvalidate": undefined, + "textValue": "One", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "sep-section-2" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": undefined, + "index": 5, + "key": "sep-section-2", + "level": 1, + "nextKey": "2-two", + "parentKey": "section-2", + "prevKey": "2-one", + "props": Object { + "_isSeparator": true, + }, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "2-two" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 6, + "key": "2-two", + "level": 1, + "nextKey": undefined, + "parentKey": "section-2", + "prevKey": "sep-section-2", + "props": Object { + "children": "Two", + }, + "rendered": "Two", + "shouldInvalidate": undefined, + "textValue": "Two", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + }, + "lastKey": "2-two", + }, + "state": Object { + "childFocusStrategy": null, + "disabledKeys": Set {}, + "disallowEmptySelection": undefined, + "focusedKey": null, + "isFocused": false, + "selectedKeys": Set {}, + "selectionMode": "none", + "setFocused": [Function], + "setFocusedKey": [Function], + "setSelectedKeys": [Function], + }, + }, + "toggleKey": [Function], + } + } + > +
    +
      + Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": true, + "index": 0, + "key": "section-1", + "level": 0, + "nextKey": "1-one", + "parentKey": null, + "prevKey": undefined, + "props": undefined, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "section", + "value": undefined, + "wrapper": undefined, + }, + "1-one" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 0, + "key": "1-one", + "level": 1, + "nextKey": "sep-section-1", + "parentKey": "section-1", + "prevKey": "section-1", + "props": Object { + "children": "One", + }, + "rendered": "One", + "shouldInvalidate": undefined, + "textValue": "One", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "sep-section-1" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": undefined, + "index": 1, + "key": "sep-section-1", + "level": 1, + "nextKey": "1-two", + "parentKey": "section-1", + "prevKey": "1-one", + "props": Object { + "_isSeparator": true, + }, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "1-two" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 2, + "key": "1-two", + "level": 1, + "nextKey": "sep-middle", + "parentKey": "section-1", + "prevKey": "sep-section-1", + "props": Object { + "children": "Two", + }, + "rendered": "Two", + "shouldInvalidate": undefined, + "textValue": "Two", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "sep-middle" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": undefined, + "index": 3, + "key": "sep-middle", + "level": 0, + "nextKey": "section-2", + "parentKey": null, + "prevKey": "1-two", + "props": Object { + "_isSeparator": true, + }, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "section-2" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": true, + "index": 2, + "key": "section-2", + "level": 0, + "nextKey": "2-one", + "parentKey": null, + "prevKey": "sep-middle", + "props": undefined, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "section", + "value": undefined, + "wrapper": undefined, + }, + "2-one" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 4, + "key": "2-one", + "level": 1, + "nextKey": "sep-section-2", + "parentKey": "section-2", + "prevKey": "section-2", + "props": Object { + "children": "One", + }, + "rendered": "One", + "shouldInvalidate": undefined, + "textValue": "One", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "sep-section-2" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": undefined, + "index": 5, + "key": "sep-section-2", + "level": 1, + "nextKey": "2-two", + "parentKey": "section-2", + "prevKey": "2-one", + "props": Object { + "_isSeparator": true, + }, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "2-two" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 6, + "key": "2-two", + "level": 1, + "nextKey": undefined, + "parentKey": "section-2", + "prevKey": "sep-section-2", + "props": Object { + "children": "Two", + }, + "rendered": "Two", + "shouldInvalidate": undefined, + "textValue": "Two", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + }, + "lastKey": "2-two", + }, + "disabledKeys": Set { + "sep-section-1", + "sep-middle", + "sep-section-2", + }, + "expandedKeys": Set {}, + "selectionManager": SelectionManager { + "_isSelectAll": null, + "allowsCellSelection": false, + "collection": $f4c7caecb598119f63e2918a55ec91a9$export$TreeCollection { + "firstKey": "section-1", + "iterable": Object { + Symbol(Symbol.iterator): [Function], + }, + "keyMap": Map { + "section-1" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": true, + "index": 0, + "key": "section-1", + "level": 0, + "nextKey": "1-one", + "parentKey": null, + "prevKey": undefined, + "props": undefined, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "section", + "value": undefined, + "wrapper": undefined, + }, + "1-one" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 0, + "key": "1-one", + "level": 1, + "nextKey": "sep-section-1", + "parentKey": "section-1", + "prevKey": "section-1", + "props": Object { + "children": "One", + }, + "rendered": "One", + "shouldInvalidate": undefined, + "textValue": "One", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "sep-section-1" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": undefined, + "index": 1, + "key": "sep-section-1", + "level": 1, + "nextKey": "1-two", + "parentKey": "section-1", + "prevKey": "1-one", + "props": Object { + "_isSeparator": true, + }, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "1-two" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 2, + "key": "1-two", + "level": 1, + "nextKey": "sep-middle", + "parentKey": "section-1", + "prevKey": "sep-section-1", + "props": Object { + "children": "Two", + }, + "rendered": "Two", + "shouldInvalidate": undefined, + "textValue": "Two", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "sep-middle" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": undefined, + "index": 3, + "key": "sep-middle", + "level": 0, + "nextKey": "section-2", + "parentKey": null, + "prevKey": "1-two", + "props": Object { + "_isSeparator": true, + }, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "section-2" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": true, + "index": 2, + "key": "section-2", + "level": 0, + "nextKey": "2-one", + "parentKey": null, + "prevKey": "sep-middle", + "props": undefined, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "section", + "value": undefined, + "wrapper": undefined, + }, + "2-one" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 4, + "key": "2-one", + "level": 1, + "nextKey": "sep-section-2", + "parentKey": "section-2", + "prevKey": "section-2", + "props": Object { + "children": "One", + }, + "rendered": "One", + "shouldInvalidate": undefined, + "textValue": "One", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "sep-section-2" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": undefined, + "index": 5, + "key": "sep-section-2", + "level": 1, + "nextKey": "2-two", + "parentKey": "section-2", + "prevKey": "2-one", + "props": Object { + "_isSeparator": true, + }, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "2-two" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 6, + "key": "2-two", + "level": 1, + "nextKey": undefined, + "parentKey": "section-2", + "prevKey": "sep-section-2", + "props": Object { + "children": "Two", + }, + "rendered": "Two", + "shouldInvalidate": undefined, + "textValue": "Two", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + }, + "lastKey": "2-two", + }, + "state": Object { + "childFocusStrategy": null, + "disabledKeys": Set {}, + "disallowEmptySelection": undefined, + "focusedKey": null, + "isFocused": false, + "selectedKeys": Set {}, + "selectionMode": "none", + "setFocused": [Function], + "setFocusedKey": [Function], + "setSelectedKeys": [Function], + }, + }, + "toggleKey": [Function], + } + } + > + + + +
    • + +
      + One +
      +       +
      • +       +       +       +       + +
    • + + Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": true, + "index": 0, + "key": "section-1", + "level": 0, + "nextKey": "1-one", + "parentKey": null, + "prevKey": undefined, + "props": undefined, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "section", + "value": undefined, + "wrapper": undefined, + }, + "1-one" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 0, + "key": "1-one", + "level": 1, + "nextKey": "sep-section-1", + "parentKey": "section-1", + "prevKey": "section-1", + "props": Object { + "children": "One", + }, + "rendered": "One", + "shouldInvalidate": undefined, + "textValue": "One", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "sep-section-1" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": undefined, + "index": 1, + "key": "sep-section-1", + "level": 1, + "nextKey": "1-two", + "parentKey": "section-1", + "prevKey": "1-one", + "props": Object { + "_isSeparator": true, + }, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "1-two" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 2, + "key": "1-two", + "level": 1, + "nextKey": "sep-middle", + "parentKey": "section-1", + "prevKey": "sep-section-1", + "props": Object { + "children": "Two", + }, + "rendered": "Two", + "shouldInvalidate": undefined, + "textValue": "Two", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "sep-middle" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": undefined, + "index": 3, + "key": "sep-middle", + "level": 0, + "nextKey": "section-2", + "parentKey": null, + "prevKey": "1-two", + "props": Object { + "_isSeparator": true, + }, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "section-2" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": true, + "index": 2, + "key": "section-2", + "level": 0, + "nextKey": "2-one", + "parentKey": null, + "prevKey": "sep-middle", + "props": undefined, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "section", + "value": undefined, + "wrapper": undefined, + }, + "2-one" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 4, + "key": "2-one", + "level": 1, + "nextKey": "sep-section-2", + "parentKey": "section-2", + "prevKey": "section-2", + "props": Object { + "children": "One", + }, + "rendered": "One", + "shouldInvalidate": undefined, + "textValue": "One", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "sep-section-2" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": undefined, + "index": 5, + "key": "sep-section-2", + "level": 1, + "nextKey": "2-two", + "parentKey": "section-2", + "prevKey": "2-one", + "props": Object { + "_isSeparator": true, + }, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "2-two" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 6, + "key": "2-two", + "level": 1, + "nextKey": undefined, + "parentKey": "section-2", + "prevKey": "sep-section-2", + "props": Object { + "children": "Two", + }, + "rendered": "Two", + "shouldInvalidate": undefined, + "textValue": "Two", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + }, + "lastKey": "2-two", + }, + "disabledKeys": Set { + "sep-section-1", + "sep-middle", + "sep-section-2", + }, + "expandedKeys": Set {}, + "selectionManager": SelectionManager { + "_isSelectAll": null, + "allowsCellSelection": false, + "collection": $f4c7caecb598119f63e2918a55ec91a9$export$TreeCollection { + "firstKey": "section-1", + "iterable": Object { + Symbol(Symbol.iterator): [Function], + }, + "keyMap": Map { + "section-1" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": true, + "index": 0, + "key": "section-1", + "level": 0, + "nextKey": "1-one", + "parentKey": null, + "prevKey": undefined, + "props": undefined, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "section", + "value": undefined, + "wrapper": undefined, + }, + "1-one" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 0, + "key": "1-one", + "level": 1, + "nextKey": "sep-section-1", + "parentKey": "section-1", + "prevKey": "section-1", + "props": Object { + "children": "One", + }, + "rendered": "One", + "shouldInvalidate": undefined, + "textValue": "One", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "sep-section-1" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": undefined, + "index": 1, + "key": "sep-section-1", + "level": 1, + "nextKey": "1-two", + "parentKey": "section-1", + "prevKey": "1-one", + "props": Object { + "_isSeparator": true, + }, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "1-two" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 2, + "key": "1-two", + "level": 1, + "nextKey": "sep-middle", + "parentKey": "section-1", + "prevKey": "sep-section-1", + "props": Object { + "children": "Two", + }, + "rendered": "Two", + "shouldInvalidate": undefined, + "textValue": "Two", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "sep-middle" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": undefined, + "index": 3, + "key": "sep-middle", + "level": 0, + "nextKey": "section-2", + "parentKey": null, + "prevKey": "1-two", + "props": Object { + "_isSeparator": true, + }, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "section-2" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": true, + "index": 2, + "key": "section-2", + "level": 0, + "nextKey": "2-one", + "parentKey": null, + "prevKey": "sep-middle", + "props": undefined, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "section", + "value": undefined, + "wrapper": undefined, + }, + "2-one" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 4, + "key": "2-one", + "level": 1, + "nextKey": "sep-section-2", + "parentKey": "section-2", + "prevKey": "section-2", + "props": Object { + "children": "One", + }, + "rendered": "One", + "shouldInvalidate": undefined, + "textValue": "One", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "sep-section-2" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": undefined, + "index": 5, + "key": "sep-section-2", + "level": 1, + "nextKey": "2-two", + "parentKey": "section-2", + "prevKey": "2-one", + "props": Object { + "_isSeparator": true, + }, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "2-two" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 6, + "key": "2-two", + "level": 1, + "nextKey": undefined, + "parentKey": "section-2", + "prevKey": "sep-section-2", + "props": Object { + "children": "Two", + }, + "rendered": "Two", + "shouldInvalidate": undefined, + "textValue": "Two", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + }, + "lastKey": "2-two", + }, + "state": Object { + "childFocusStrategy": null, + "disabledKeys": Set {}, + "disallowEmptySelection": undefined, + "focusedKey": null, + "isFocused": false, + "selectedKeys": Set {}, + "selectionMode": "none", + "setFocused": [Function], + "setFocusedKey": [Function], + "setSelectedKeys": [Function], + }, + }, + "toggleKey": [Function], + } + } + > + + + +
    • + +
      + Two +
      +       +
      • + + + + +
    +
    +     +
    • + +`; + +exports[` snapshot should match snapshot with seperator within selection group 1`] = ` +<_Menu + aria-label="Menu component" +> +
    + + One + , + , + <$de85adf0b38f4f13e9cffd2f21$var$Item> + Two + , + ], + "selectionGroup": true, + "selectionMode": "single", + }, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "section", + "value": undefined, + "wrapper": undefined, + } + } + key="section-1" + selectionGroup={true} + selectionMode="single" + state={ + Object { + "collection": $f4c7caecb598119f63e2918a55ec91a9$export$TreeCollection { + "firstKey": "section-1", + "iterable": Object { + Symbol(Symbol.iterator): [Function], + }, + "keyMap": Map { + "section-1" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": true, + "index": 0, + "key": "section-1", + "level": 0, + "nextKey": "1-one", + "parentKey": null, + "prevKey": undefined, + "props": Object { + "children": Array [ + <$de85adf0b38f4f13e9cffd2f21$var$Item> + One + , + , + <$de85adf0b38f4f13e9cffd2f21$var$Item> + Two + , + ], + "selectionGroup": true, + "selectionMode": "single", + }, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "section", + "value": undefined, + "wrapper": undefined, + }, + "1-one" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 0, + "key": "1-one", + "level": 1, + "nextKey": "sep-section-1", + "parentKey": "section-1", + "prevKey": "section-1", + "props": Object { + "children": "One", + }, + "rendered": "One", + "shouldInvalidate": undefined, + "textValue": "One", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "sep-section-1" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": undefined, + "index": 1, + "key": "sep-section-1", + "level": 1, + "nextKey": "1-two", + "parentKey": "section-1", + "prevKey": "1-one", + "props": Object { + "_isSeparator": true, + }, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "1-two" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 2, + "key": "1-two", + "level": 1, + "nextKey": "sep-middle", + "parentKey": "section-1", + "prevKey": "sep-section-1", + "props": Object { + "children": "Two", + }, + "rendered": "Two", + "shouldInvalidate": undefined, + "textValue": "Two", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "sep-middle" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": undefined, + "index": 3, + "key": "sep-middle", + "level": 0, + "nextKey": "section-2", + "parentKey": null, + "prevKey": "1-two", + "props": Object { + "_isSeparator": true, + }, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "section-2" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": true, + "index": 2, + "key": "section-2", + "level": 0, + "nextKey": "2-one", + "parentKey": null, + "prevKey": "sep-middle", + "props": Object { + "children": Array [ + <$de85adf0b38f4f13e9cffd2f21$var$Item> + One + , + , + <$de85adf0b38f4f13e9cffd2f21$var$Item> + Two + , + ], + "selectionGroup": true, + "selectionMode": "multiple", + }, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "section", + "value": undefined, + "wrapper": undefined, + }, + "2-one" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 4, + "key": "2-one", + "level": 1, + "nextKey": "sep-section-2", + "parentKey": "section-2", + "prevKey": "section-2", + "props": Object { + "children": "One", + }, + "rendered": "One", + "shouldInvalidate": undefined, + "textValue": "One", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "sep-section-2" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": undefined, + "index": 5, + "key": "sep-section-2", + "level": 1, + "nextKey": "2-two", + "parentKey": "section-2", + "prevKey": "2-one", + "props": Object { + "_isSeparator": true, + }, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "2-two" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 6, + "key": "2-two", + "level": 1, + "nextKey": undefined, + "parentKey": "section-2", + "prevKey": "sep-section-2", + "props": Object { + "children": "Two", + }, + "rendered": "Two", + "shouldInvalidate": undefined, + "textValue": "Two", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + }, + "lastKey": "2-two", + }, + "disabledKeys": Set { + "sep-section-1", + "sep-middle", + "sep-section-2", + }, + "expandedKeys": Set {}, + "selectionManager": SelectionManager { + "_isSelectAll": null, + "allowsCellSelection": false, + "collection": $f4c7caecb598119f63e2918a55ec91a9$export$TreeCollection { + "firstKey": "section-1", + "iterable": Object { + Symbol(Symbol.iterator): [Function], + }, + "keyMap": Map { + "section-1" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": true, + "index": 0, + "key": "section-1", + "level": 0, + "nextKey": "1-one", + "parentKey": null, + "prevKey": undefined, + "props": Object { + "children": Array [ + <$de85adf0b38f4f13e9cffd2f21$var$Item> + One + , + , + <$de85adf0b38f4f13e9cffd2f21$var$Item> + Two + , + ], + "selectionGroup": true, + "selectionMode": "single", + }, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "section", + "value": undefined, + "wrapper": undefined, + }, + "1-one" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 0, + "key": "1-one", + "level": 1, + "nextKey": "sep-section-1", + "parentKey": "section-1", + "prevKey": "section-1", + "props": Object { + "children": "One", + }, + "rendered": "One", + "shouldInvalidate": undefined, + "textValue": "One", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "sep-section-1" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": undefined, + "index": 1, + "key": "sep-section-1", + "level": 1, + "nextKey": "1-two", + "parentKey": "section-1", + "prevKey": "1-one", + "props": Object { + "_isSeparator": true, + }, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "1-two" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 2, + "key": "1-two", + "level": 1, + "nextKey": "sep-middle", + "parentKey": "section-1", + "prevKey": "sep-section-1", + "props": Object { + "children": "Two", + }, + "rendered": "Two", + "shouldInvalidate": undefined, + "textValue": "Two", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "sep-middle" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": undefined, + "index": 3, + "key": "sep-middle", + "level": 0, + "nextKey": "section-2", + "parentKey": null, + "prevKey": "1-two", + "props": Object { + "_isSeparator": true, + }, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "section-2" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": true, + "index": 2, + "key": "section-2", + "level": 0, + "nextKey": "2-one", + "parentKey": null, + "prevKey": "sep-middle", + "props": Object { + "children": Array [ + <$de85adf0b38f4f13e9cffd2f21$var$Item> + One + , + , + <$de85adf0b38f4f13e9cffd2f21$var$Item> + Two + , + ], + "selectionGroup": true, + "selectionMode": "multiple", + }, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "section", + "value": undefined, + "wrapper": undefined, + }, + "2-one" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 4, + "key": "2-one", + "level": 1, + "nextKey": "sep-section-2", + "parentKey": "section-2", + "prevKey": "section-2", + "props": Object { + "children": "One", + }, + "rendered": "One", + "shouldInvalidate": undefined, + "textValue": "One", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "sep-section-2" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": undefined, + "index": 5, + "key": "sep-section-2", + "level": 1, + "nextKey": "2-two", + "parentKey": "section-2", + "prevKey": "2-one", + "props": Object { + "_isSeparator": true, + }, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "2-two" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 6, + "key": "2-two", + "level": 1, + "nextKey": undefined, + "parentKey": "section-2", + "prevKey": "sep-section-2", + "props": Object { + "children": "Two", + }, + "rendered": "Two", + "shouldInvalidate": undefined, + "textValue": "Two", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + }, + "lastKey": "2-two", + }, + "state": Object { + "childFocusStrategy": "first", + "disabledKeys": Set {}, + "disallowEmptySelection": undefined, + "focusedKey": null, + "isFocused": false, + "selectedKeys": Set {}, + "selectionMode": "none", + "setFocused": [Function], + "setFocusedKey": [Function], + "setSelectedKeys": [Function], + }, + }, + "toggleKey": [Function], + } + } + > +
    +
      + Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": true, + "index": 0, + "key": "section-1", + "level": 0, + "nextKey": "1-one", + "parentKey": null, + "prevKey": undefined, + "props": Object { + "children": Array [ + <$de85adf0b38f4f13e9cffd2f21$var$Item> + One + , + , + <$de85adf0b38f4f13e9cffd2f21$var$Item> + Two + , + ], + "selectionGroup": true, + "selectionMode": "single", + }, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "section", + "value": undefined, + "wrapper": undefined, + }, + "1-one" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 0, + "key": "1-one", + "level": 1, + "nextKey": "sep-section-1", + "parentKey": "section-1", + "prevKey": "section-1", + "props": Object { + "children": "One", + }, + "rendered": "One", + "shouldInvalidate": undefined, + "textValue": "One", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "sep-section-1" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": undefined, + "index": 1, + "key": "sep-section-1", + "level": 1, + "nextKey": "1-two", + "parentKey": "section-1", + "prevKey": "1-one", + "props": Object { + "_isSeparator": true, + }, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "1-two" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 2, + "key": "1-two", + "level": 1, + "nextKey": "sep-middle", + "parentKey": "section-1", + "prevKey": "sep-section-1", + "props": Object { + "children": "Two", + }, + "rendered": "Two", + "shouldInvalidate": undefined, + "textValue": "Two", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "sep-middle" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": undefined, + "index": 3, + "key": "sep-middle", + "level": 0, + "nextKey": "section-2", + "parentKey": null, + "prevKey": "1-two", + "props": Object { + "_isSeparator": true, + }, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "section-2" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": true, + "index": 2, + "key": "section-2", + "level": 0, + "nextKey": "2-one", + "parentKey": null, + "prevKey": "sep-middle", + "props": Object { + "children": Array [ + <$de85adf0b38f4f13e9cffd2f21$var$Item> + One + , + , + <$de85adf0b38f4f13e9cffd2f21$var$Item> + Two + , + ], + "selectionGroup": true, + "selectionMode": "multiple", + }, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "section", + "value": undefined, + "wrapper": undefined, + }, + "2-one" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 4, + "key": "2-one", + "level": 1, + "nextKey": "sep-section-2", + "parentKey": "section-2", + "prevKey": "section-2", + "props": Object { + "children": "One", + }, + "rendered": "One", + "shouldInvalidate": undefined, + "textValue": "One", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "sep-section-2" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": undefined, + "index": 5, + "key": "sep-section-2", + "level": 1, + "nextKey": "2-two", + "parentKey": "section-2", + "prevKey": "2-one", + "props": Object { + "_isSeparator": true, + }, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "2-two" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 6, + "key": "2-two", + "level": 1, + "nextKey": undefined, + "parentKey": "section-2", + "prevKey": "sep-section-2", + "props": Object { + "children": "Two", + }, + "rendered": "Two", + "shouldInvalidate": undefined, + "textValue": "Two", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + }, + "lastKey": "2-two", + }, + "disabledKeys": Set { + "sep-section-1", + "sep-middle", + "sep-section-2", + }, + "expandedKeys": Set {}, + "selectionManager": SelectionManager { + "_isSelectAll": null, + "allowsCellSelection": false, + "collection": $f4c7caecb598119f63e2918a55ec91a9$export$TreeCollection { + "firstKey": "section-1", + "iterable": Object { + Symbol(Symbol.iterator): [Function], + }, + "keyMap": Map { + "section-1" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": true, + "index": 0, + "key": "section-1", + "level": 0, + "nextKey": "1-one", + "parentKey": null, + "prevKey": undefined, + "props": Object { + "children": Array [ + <$de85adf0b38f4f13e9cffd2f21$var$Item> + One + , + , + <$de85adf0b38f4f13e9cffd2f21$var$Item> + Two + , + ], + "selectionGroup": true, + "selectionMode": "single", + }, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "section", + "value": undefined, + "wrapper": undefined, + }, + "1-one" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 0, + "key": "1-one", + "level": 1, + "nextKey": "sep-section-1", + "parentKey": "section-1", + "prevKey": "section-1", + "props": Object { + "children": "One", + }, + "rendered": "One", + "shouldInvalidate": undefined, + "textValue": "One", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "sep-section-1" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": undefined, + "index": 1, + "key": "sep-section-1", + "level": 1, + "nextKey": "1-two", + "parentKey": "section-1", + "prevKey": "1-one", + "props": Object { + "_isSeparator": true, + }, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "1-two" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 2, + "key": "1-two", + "level": 1, + "nextKey": "sep-middle", + "parentKey": "section-1", + "prevKey": "sep-section-1", + "props": Object { + "children": "Two", + }, + "rendered": "Two", + "shouldInvalidate": undefined, + "textValue": "Two", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "sep-middle" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": undefined, + "index": 3, + "key": "sep-middle", + "level": 0, + "nextKey": "section-2", + "parentKey": null, + "prevKey": "1-two", + "props": Object { + "_isSeparator": true, + }, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "section-2" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": true, + "index": 2, + "key": "section-2", + "level": 0, + "nextKey": "2-one", + "parentKey": null, + "prevKey": "sep-middle", + "props": Object { + "children": Array [ + <$de85adf0b38f4f13e9cffd2f21$var$Item> + One + , + , + <$de85adf0b38f4f13e9cffd2f21$var$Item> + Two + , + ], + "selectionGroup": true, + "selectionMode": "multiple", + }, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "section", + "value": undefined, + "wrapper": undefined, + }, + "2-one" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 4, + "key": "2-one", + "level": 1, + "nextKey": "sep-section-2", + "parentKey": "section-2", + "prevKey": "section-2", + "props": Object { + "children": "One", + }, + "rendered": "One", + "shouldInvalidate": undefined, + "textValue": "One", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "sep-section-2" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": undefined, + "index": 5, + "key": "sep-section-2", + "level": 1, + "nextKey": "2-two", + "parentKey": "section-2", + "prevKey": "2-one", + "props": Object { + "_isSeparator": true, + }, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "2-two" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 6, + "key": "2-two", + "level": 1, + "nextKey": undefined, + "parentKey": "section-2", + "prevKey": "sep-section-2", + "props": Object { + "children": "Two", + }, + "rendered": "Two", + "shouldInvalidate": undefined, + "textValue": "Two", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + }, + "lastKey": "2-two", + }, + "state": Object { + "childFocusStrategy": "first", + "disabledKeys": Set {}, + "disallowEmptySelection": undefined, + "focusedKey": null, + "isFocused": false, + "selectedKeys": Set {}, + "selectionMode": "single", + "setFocused": [Function], + "setFocusedKey": [Function], + "setSelectedKeys": [Function], + }, + }, + "toggleKey": [Function], + } + } + > + + + +
    • + +
      + One +
      +       +
      • +       +       +       +       + +
    • + + Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": true, + "index": 0, + "key": "section-1", + "level": 0, + "nextKey": "1-one", + "parentKey": null, + "prevKey": undefined, + "props": Object { + "children": Array [ + <$de85adf0b38f4f13e9cffd2f21$var$Item> + One + , + , + <$de85adf0b38f4f13e9cffd2f21$var$Item> + Two + , + ], + "selectionGroup": true, + "selectionMode": "single", + }, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "section", + "value": undefined, + "wrapper": undefined, + }, + "1-one" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 0, + "key": "1-one", + "level": 1, + "nextKey": "sep-section-1", + "parentKey": "section-1", + "prevKey": "section-1", + "props": Object { + "children": "One", + }, + "rendered": "One", + "shouldInvalidate": undefined, + "textValue": "One", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "sep-section-1" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": undefined, + "index": 1, + "key": "sep-section-1", + "level": 1, + "nextKey": "1-two", + "parentKey": "section-1", + "prevKey": "1-one", + "props": Object { + "_isSeparator": true, + }, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "1-two" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 2, + "key": "1-two", + "level": 1, + "nextKey": "sep-middle", + "parentKey": "section-1", + "prevKey": "sep-section-1", + "props": Object { + "children": "Two", + }, + "rendered": "Two", + "shouldInvalidate": undefined, + "textValue": "Two", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "sep-middle" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": undefined, + "index": 3, + "key": "sep-middle", + "level": 0, + "nextKey": "section-2", + "parentKey": null, + "prevKey": "1-two", + "props": Object { + "_isSeparator": true, + }, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "section-2" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": true, + "index": 2, + "key": "section-2", + "level": 0, + "nextKey": "2-one", + "parentKey": null, + "prevKey": "sep-middle", + "props": Object { + "children": Array [ + <$de85adf0b38f4f13e9cffd2f21$var$Item> + One + , + , + <$de85adf0b38f4f13e9cffd2f21$var$Item> + Two + , + ], + "selectionGroup": true, + "selectionMode": "multiple", + }, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "section", + "value": undefined, + "wrapper": undefined, + }, + "2-one" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 4, + "key": "2-one", + "level": 1, + "nextKey": "sep-section-2", + "parentKey": "section-2", + "prevKey": "section-2", + "props": Object { + "children": "One", + }, + "rendered": "One", + "shouldInvalidate": undefined, + "textValue": "One", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "sep-section-2" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": undefined, + "index": 5, + "key": "sep-section-2", + "level": 1, + "nextKey": "2-two", + "parentKey": "section-2", + "prevKey": "2-one", + "props": Object { + "_isSeparator": true, + }, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "2-two" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 6, + "key": "2-two", + "level": 1, + "nextKey": undefined, + "parentKey": "section-2", + "prevKey": "sep-section-2", + "props": Object { + "children": "Two", + }, + "rendered": "Two", + "shouldInvalidate": undefined, + "textValue": "Two", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + }, + "lastKey": "2-two", + }, + "disabledKeys": Set { + "sep-section-1", + "sep-middle", + "sep-section-2", + }, + "expandedKeys": Set {}, + "selectionManager": SelectionManager { + "_isSelectAll": null, + "allowsCellSelection": false, + "collection": $f4c7caecb598119f63e2918a55ec91a9$export$TreeCollection { + "firstKey": "section-1", + "iterable": Object { + Symbol(Symbol.iterator): [Function], + }, + "keyMap": Map { + "section-1" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": true, + "index": 0, + "key": "section-1", + "level": 0, + "nextKey": "1-one", + "parentKey": null, + "prevKey": undefined, + "props": Object { + "children": Array [ + <$de85adf0b38f4f13e9cffd2f21$var$Item> + One + , + , + <$de85adf0b38f4f13e9cffd2f21$var$Item> + Two + , + ], + "selectionGroup": true, + "selectionMode": "single", + }, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "section", + "value": undefined, + "wrapper": undefined, + }, + "1-one" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 0, + "key": "1-one", + "level": 1, + "nextKey": "sep-section-1", + "parentKey": "section-1", + "prevKey": "section-1", + "props": Object { + "children": "One", + }, + "rendered": "One", + "shouldInvalidate": undefined, + "textValue": "One", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "sep-section-1" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": undefined, + "index": 1, + "key": "sep-section-1", + "level": 1, + "nextKey": "1-two", + "parentKey": "section-1", + "prevKey": "1-one", + "props": Object { + "_isSeparator": true, + }, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "1-two" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 2, + "key": "1-two", + "level": 1, + "nextKey": "sep-middle", + "parentKey": "section-1", + "prevKey": "sep-section-1", + "props": Object { + "children": "Two", + }, + "rendered": "Two", + "shouldInvalidate": undefined, + "textValue": "Two", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "sep-middle" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": undefined, + "index": 3, + "key": "sep-middle", + "level": 0, + "nextKey": "section-2", + "parentKey": null, + "prevKey": "1-two", + "props": Object { + "_isSeparator": true, + }, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "section-2" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": true, + "index": 2, + "key": "section-2", + "level": 0, + "nextKey": "2-one", + "parentKey": null, + "prevKey": "sep-middle", + "props": Object { + "children": Array [ + <$de85adf0b38f4f13e9cffd2f21$var$Item> + One + , + , + <$de85adf0b38f4f13e9cffd2f21$var$Item> + Two + , + ], + "selectionGroup": true, + "selectionMode": "multiple", + }, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "section", + "value": undefined, + "wrapper": undefined, + }, + "2-one" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 4, + "key": "2-one", + "level": 1, + "nextKey": "sep-section-2", + "parentKey": "section-2", + "prevKey": "section-2", + "props": Object { + "children": "One", + }, + "rendered": "One", + "shouldInvalidate": undefined, + "textValue": "One", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "sep-section-2" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": undefined, + "index": 5, + "key": "sep-section-2", + "level": 1, + "nextKey": "2-two", + "parentKey": "section-2", + "prevKey": "2-one", + "props": Object { + "_isSeparator": true, + }, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "2-two" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 6, + "key": "2-two", + "level": 1, + "nextKey": undefined, + "parentKey": "section-2", + "prevKey": "sep-section-2", + "props": Object { + "children": "Two", + }, + "rendered": "Two", + "shouldInvalidate": undefined, + "textValue": "Two", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + }, + "lastKey": "2-two", + }, + "state": Object { + "childFocusStrategy": "first", + "disabledKeys": Set {}, + "disallowEmptySelection": undefined, + "focusedKey": null, + "isFocused": false, + "selectedKeys": Set {}, + "selectionMode": "single", + "setFocused": [Function], + "setFocusedKey": [Function], + "setSelectedKeys": [Function], + }, + }, + "toggleKey": [Function], + } + } + > + + + +
    • + +
      + Two +
      +       +
      • + + + + +
    +
    +     + +
  • + + + One + , + , + <$de85adf0b38f4f13e9cffd2f21$var$Item> + Two + , + ], + "selectionGroup": true, + "selectionMode": "multiple", + }, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "section", + "value": undefined, + "wrapper": undefined, + } + } + key="section-2" + selectionGroup={true} + selectionMode="multiple" + state={ + Object { + "collection": $f4c7caecb598119f63e2918a55ec91a9$export$TreeCollection { + "firstKey": "section-1", + "iterable": Object { + Symbol(Symbol.iterator): [Function], + }, + "keyMap": Map { + "section-1" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": true, + "index": 0, + "key": "section-1", + "level": 0, + "nextKey": "1-one", + "parentKey": null, + "prevKey": undefined, + "props": Object { + "children": Array [ + <$de85adf0b38f4f13e9cffd2f21$var$Item> + One + , + , + <$de85adf0b38f4f13e9cffd2f21$var$Item> + Two + , + ], + "selectionGroup": true, + "selectionMode": "single", + }, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "section", + "value": undefined, + "wrapper": undefined, + }, + "1-one" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 0, + "key": "1-one", + "level": 1, + "nextKey": "sep-section-1", + "parentKey": "section-1", + "prevKey": "section-1", + "props": Object { + "children": "One", + }, + "rendered": "One", + "shouldInvalidate": undefined, + "textValue": "One", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "sep-section-1" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": undefined, + "index": 1, + "key": "sep-section-1", + "level": 1, + "nextKey": "1-two", + "parentKey": "section-1", + "prevKey": "1-one", + "props": Object { + "_isSeparator": true, + }, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "1-two" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 2, + "key": "1-two", + "level": 1, + "nextKey": "sep-middle", + "parentKey": "section-1", + "prevKey": "sep-section-1", + "props": Object { + "children": "Two", + }, + "rendered": "Two", + "shouldInvalidate": undefined, + "textValue": "Two", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "sep-middle" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": undefined, + "index": 3, + "key": "sep-middle", + "level": 0, + "nextKey": "section-2", + "parentKey": null, + "prevKey": "1-two", + "props": Object { + "_isSeparator": true, + }, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "section-2" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": true, + "index": 2, + "key": "section-2", + "level": 0, + "nextKey": "2-one", + "parentKey": null, + "prevKey": "sep-middle", + "props": Object { + "children": Array [ + <$de85adf0b38f4f13e9cffd2f21$var$Item> + One + , + , + <$de85adf0b38f4f13e9cffd2f21$var$Item> + Two + , + ], + "selectionGroup": true, + "selectionMode": "multiple", + }, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "section", + "value": undefined, + "wrapper": undefined, + }, + "2-one" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 4, + "key": "2-one", + "level": 1, + "nextKey": "sep-section-2", + "parentKey": "section-2", + "prevKey": "section-2", + "props": Object { + "children": "One", + }, + "rendered": "One", + "shouldInvalidate": undefined, + "textValue": "One", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "sep-section-2" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": undefined, + "index": 5, + "key": "sep-section-2", + "level": 1, + "nextKey": "2-two", + "parentKey": "section-2", + "prevKey": "2-one", + "props": Object { + "_isSeparator": true, + }, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "2-two" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 6, + "key": "2-two", + "level": 1, + "nextKey": undefined, + "parentKey": "section-2", + "prevKey": "sep-section-2", + "props": Object { + "children": "Two", + }, + "rendered": "Two", + "shouldInvalidate": undefined, + "textValue": "Two", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + }, + "lastKey": "2-two", + }, + "disabledKeys": Set { + "sep-section-1", + "sep-middle", + "sep-section-2", + }, + "expandedKeys": Set {}, + "selectionManager": SelectionManager { + "_isSelectAll": null, + "allowsCellSelection": false, + "collection": $f4c7caecb598119f63e2918a55ec91a9$export$TreeCollection { + "firstKey": "section-1", + "iterable": Object { + Symbol(Symbol.iterator): [Function], + }, + "keyMap": Map { + "section-1" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": true, + "index": 0, + "key": "section-1", + "level": 0, + "nextKey": "1-one", + "parentKey": null, + "prevKey": undefined, + "props": Object { + "children": Array [ + <$de85adf0b38f4f13e9cffd2f21$var$Item> + One + , + , + <$de85adf0b38f4f13e9cffd2f21$var$Item> + Two + , + ], + "selectionGroup": true, + "selectionMode": "single", + }, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "section", + "value": undefined, + "wrapper": undefined, + }, + "1-one" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 0, + "key": "1-one", + "level": 1, + "nextKey": "sep-section-1", + "parentKey": "section-1", + "prevKey": "section-1", + "props": Object { + "children": "One", + }, + "rendered": "One", + "shouldInvalidate": undefined, + "textValue": "One", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "sep-section-1" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": undefined, + "index": 1, + "key": "sep-section-1", + "level": 1, + "nextKey": "1-two", + "parentKey": "section-1", + "prevKey": "1-one", + "props": Object { + "_isSeparator": true, + }, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "1-two" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 2, + "key": "1-two", + "level": 1, + "nextKey": "sep-middle", + "parentKey": "section-1", + "prevKey": "sep-section-1", + "props": Object { + "children": "Two", + }, + "rendered": "Two", + "shouldInvalidate": undefined, + "textValue": "Two", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "sep-middle" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": undefined, + "index": 3, + "key": "sep-middle", + "level": 0, + "nextKey": "section-2", + "parentKey": null, + "prevKey": "1-two", + "props": Object { + "_isSeparator": true, + }, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "section-2" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": true, + "index": 2, + "key": "section-2", + "level": 0, + "nextKey": "2-one", + "parentKey": null, + "prevKey": "sep-middle", + "props": Object { + "children": Array [ + <$de85adf0b38f4f13e9cffd2f21$var$Item> + One + , + , + <$de85adf0b38f4f13e9cffd2f21$var$Item> + Two + , + ], + "selectionGroup": true, + "selectionMode": "multiple", + }, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "section", + "value": undefined, + "wrapper": undefined, + }, + "2-one" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 4, + "key": "2-one", + "level": 1, + "nextKey": "sep-section-2", + "parentKey": "section-2", + "prevKey": "section-2", + "props": Object { + "children": "One", + }, + "rendered": "One", + "shouldInvalidate": undefined, + "textValue": "One", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "sep-section-2" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": undefined, + "index": 5, + "key": "sep-section-2", + "level": 1, + "nextKey": "2-two", + "parentKey": "section-2", + "prevKey": "2-one", + "props": Object { + "_isSeparator": true, + }, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "2-two" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 6, + "key": "2-two", + "level": 1, + "nextKey": undefined, + "parentKey": "section-2", + "prevKey": "sep-section-2", + "props": Object { + "children": "Two", + }, + "rendered": "Two", + "shouldInvalidate": undefined, + "textValue": "Two", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + }, + "lastKey": "2-two", + }, + "state": Object { + "childFocusStrategy": "first", + "disabledKeys": Set {}, + "disallowEmptySelection": undefined, + "focusedKey": null, + "isFocused": false, + "selectedKeys": Set {}, + "selectionMode": "none", + "setFocused": [Function], + "setFocusedKey": [Function], + "setSelectedKeys": [Function], + }, + }, + "toggleKey": [Function], + } + } + > +
    +
      + Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": true, + "index": 0, + "key": "section-1", + "level": 0, + "nextKey": "1-one", + "parentKey": null, + "prevKey": undefined, + "props": Object { + "children": Array [ + <$de85adf0b38f4f13e9cffd2f21$var$Item> + One + , + , + <$de85adf0b38f4f13e9cffd2f21$var$Item> + Two + , + ], + "selectionGroup": true, + "selectionMode": "single", + }, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "section", + "value": undefined, + "wrapper": undefined, + }, + "1-one" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 0, + "key": "1-one", + "level": 1, + "nextKey": "sep-section-1", + "parentKey": "section-1", + "prevKey": "section-1", + "props": Object { + "children": "One", + }, + "rendered": "One", + "shouldInvalidate": undefined, + "textValue": "One", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "sep-section-1" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": undefined, + "index": 1, + "key": "sep-section-1", + "level": 1, + "nextKey": "1-two", + "parentKey": "section-1", + "prevKey": "1-one", + "props": Object { + "_isSeparator": true, + }, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "1-two" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 2, + "key": "1-two", + "level": 1, + "nextKey": "sep-middle", + "parentKey": "section-1", + "prevKey": "sep-section-1", + "props": Object { + "children": "Two", + }, + "rendered": "Two", + "shouldInvalidate": undefined, + "textValue": "Two", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "sep-middle" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": undefined, + "index": 3, + "key": "sep-middle", + "level": 0, + "nextKey": "section-2", + "parentKey": null, + "prevKey": "1-two", + "props": Object { + "_isSeparator": true, + }, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "section-2" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": true, + "index": 2, + "key": "section-2", + "level": 0, + "nextKey": "2-one", + "parentKey": null, + "prevKey": "sep-middle", + "props": Object { + "children": Array [ + <$de85adf0b38f4f13e9cffd2f21$var$Item> + One + , + , + <$de85adf0b38f4f13e9cffd2f21$var$Item> + Two + , + ], + "selectionGroup": true, + "selectionMode": "multiple", + }, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "section", + "value": undefined, + "wrapper": undefined, + }, + "2-one" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 4, + "key": "2-one", + "level": 1, + "nextKey": "sep-section-2", + "parentKey": "section-2", + "prevKey": "section-2", + "props": Object { + "children": "One", + }, + "rendered": "One", + "shouldInvalidate": undefined, + "textValue": "One", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "sep-section-2" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": undefined, + "index": 5, + "key": "sep-section-2", + "level": 1, + "nextKey": "2-two", + "parentKey": "section-2", + "prevKey": "2-one", + "props": Object { + "_isSeparator": true, + }, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "2-two" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 6, + "key": "2-two", + "level": 1, + "nextKey": undefined, + "parentKey": "section-2", + "prevKey": "sep-section-2", + "props": Object { + "children": "Two", + }, + "rendered": "Two", + "shouldInvalidate": undefined, + "textValue": "Two", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + }, + "lastKey": "2-two", + }, + "disabledKeys": Set { + "sep-section-1", + "sep-middle", + "sep-section-2", + }, + "expandedKeys": Set {}, + "selectionManager": SelectionManager { + "_isSelectAll": null, + "allowsCellSelection": false, + "collection": $f4c7caecb598119f63e2918a55ec91a9$export$TreeCollection { + "firstKey": "section-1", + "iterable": Object { + Symbol(Symbol.iterator): [Function], + }, + "keyMap": Map { + "section-1" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": true, + "index": 0, + "key": "section-1", + "level": 0, + "nextKey": "1-one", + "parentKey": null, + "prevKey": undefined, + "props": Object { + "children": Array [ + <$de85adf0b38f4f13e9cffd2f21$var$Item> + One + , + , + <$de85adf0b38f4f13e9cffd2f21$var$Item> + Two + , + ], + "selectionGroup": true, + "selectionMode": "single", + }, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "section", + "value": undefined, + "wrapper": undefined, + }, + "1-one" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 0, + "key": "1-one", + "level": 1, + "nextKey": "sep-section-1", + "parentKey": "section-1", + "prevKey": "section-1", + "props": Object { + "children": "One", + }, + "rendered": "One", + "shouldInvalidate": undefined, + "textValue": "One", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "sep-section-1" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": undefined, + "index": 1, + "key": "sep-section-1", + "level": 1, + "nextKey": "1-two", + "parentKey": "section-1", + "prevKey": "1-one", + "props": Object { + "_isSeparator": true, + }, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "1-two" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 2, + "key": "1-two", + "level": 1, + "nextKey": "sep-middle", + "parentKey": "section-1", + "prevKey": "sep-section-1", + "props": Object { + "children": "Two", + }, + "rendered": "Two", + "shouldInvalidate": undefined, + "textValue": "Two", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "sep-middle" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": undefined, + "index": 3, + "key": "sep-middle", + "level": 0, + "nextKey": "section-2", + "parentKey": null, + "prevKey": "1-two", + "props": Object { + "_isSeparator": true, + }, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "section-2" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": true, + "index": 2, + "key": "section-2", + "level": 0, + "nextKey": "2-one", + "parentKey": null, + "prevKey": "sep-middle", + "props": Object { + "children": Array [ + <$de85adf0b38f4f13e9cffd2f21$var$Item> + One + , + , + <$de85adf0b38f4f13e9cffd2f21$var$Item> + Two + , + ], + "selectionGroup": true, + "selectionMode": "multiple", + }, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "section", + "value": undefined, + "wrapper": undefined, + }, + "2-one" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 4, + "key": "2-one", + "level": 1, + "nextKey": "sep-section-2", + "parentKey": "section-2", + "prevKey": "section-2", + "props": Object { + "children": "One", + }, + "rendered": "One", + "shouldInvalidate": undefined, + "textValue": "One", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "sep-section-2" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": undefined, + "index": 5, + "key": "sep-section-2", + "level": 1, + "nextKey": "2-two", + "parentKey": "section-2", + "prevKey": "2-one", + "props": Object { + "_isSeparator": true, + }, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "2-two" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 6, + "key": "2-two", + "level": 1, + "nextKey": undefined, + "parentKey": "section-2", + "prevKey": "sep-section-2", + "props": Object { + "children": "Two", + }, + "rendered": "Two", + "shouldInvalidate": undefined, + "textValue": "Two", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + }, + "lastKey": "2-two", + }, + "state": Object { + "childFocusStrategy": "first", + "disabledKeys": Set {}, + "disallowEmptySelection": undefined, + "focusedKey": null, + "isFocused": false, + "selectedKeys": Set {}, + "selectionMode": "multiple", + "setFocused": [Function], + "setFocusedKey": [Function], + "setSelectedKeys": [Function], + }, + }, + "toggleKey": [Function], + } + } + > + + + +
    • + +
      + One +
      +       +
      • +       +       +       +       + +
    • + + Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": true, + "index": 0, + "key": "section-1", + "level": 0, + "nextKey": "1-one", + "parentKey": null, + "prevKey": undefined, + "props": Object { + "children": Array [ + <$de85adf0b38f4f13e9cffd2f21$var$Item> + One + , + , + <$de85adf0b38f4f13e9cffd2f21$var$Item> + Two + , + ], + "selectionGroup": true, + "selectionMode": "single", + }, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "section", + "value": undefined, + "wrapper": undefined, + }, + "1-one" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 0, + "key": "1-one", + "level": 1, + "nextKey": "sep-section-1", + "parentKey": "section-1", + "prevKey": "section-1", + "props": Object { + "children": "One", + }, + "rendered": "One", + "shouldInvalidate": undefined, + "textValue": "One", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "sep-section-1" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": undefined, + "index": 1, + "key": "sep-section-1", + "level": 1, + "nextKey": "1-two", + "parentKey": "section-1", + "prevKey": "1-one", + "props": Object { + "_isSeparator": true, + }, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "1-two" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 2, + "key": "1-two", + "level": 1, + "nextKey": "sep-middle", + "parentKey": "section-1", + "prevKey": "sep-section-1", + "props": Object { + "children": "Two", + }, + "rendered": "Two", + "shouldInvalidate": undefined, + "textValue": "Two", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "sep-middle" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": undefined, + "index": 3, + "key": "sep-middle", + "level": 0, + "nextKey": "section-2", + "parentKey": null, + "prevKey": "1-two", + "props": Object { + "_isSeparator": true, + }, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "section-2" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": true, + "index": 2, + "key": "section-2", + "level": 0, + "nextKey": "2-one", + "parentKey": null, + "prevKey": "sep-middle", + "props": Object { + "children": Array [ + <$de85adf0b38f4f13e9cffd2f21$var$Item> + One + , + , + <$de85adf0b38f4f13e9cffd2f21$var$Item> + Two + , + ], + "selectionGroup": true, + "selectionMode": "multiple", + }, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "section", + "value": undefined, + "wrapper": undefined, + }, + "2-one" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 4, + "key": "2-one", + "level": 1, + "nextKey": "sep-section-2", + "parentKey": "section-2", + "prevKey": "section-2", + "props": Object { + "children": "One", + }, + "rendered": "One", + "shouldInvalidate": undefined, + "textValue": "One", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "sep-section-2" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": undefined, + "index": 5, + "key": "sep-section-2", + "level": 1, + "nextKey": "2-two", + "parentKey": "section-2", + "prevKey": "2-one", + "props": Object { + "_isSeparator": true, + }, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "2-two" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 6, + "key": "2-two", + "level": 1, + "nextKey": undefined, + "parentKey": "section-2", + "prevKey": "sep-section-2", + "props": Object { + "children": "Two", + }, + "rendered": "Two", + "shouldInvalidate": undefined, + "textValue": "Two", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + }, + "lastKey": "2-two", + }, + "disabledKeys": Set { + "sep-section-1", + "sep-middle", + "sep-section-2", + }, + "expandedKeys": Set {}, + "selectionManager": SelectionManager { + "_isSelectAll": null, + "allowsCellSelection": false, + "collection": $f4c7caecb598119f63e2918a55ec91a9$export$TreeCollection { + "firstKey": "section-1", + "iterable": Object { + Symbol(Symbol.iterator): [Function], + }, + "keyMap": Map { + "section-1" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": true, + "index": 0, + "key": "section-1", + "level": 0, + "nextKey": "1-one", + "parentKey": null, + "prevKey": undefined, + "props": Object { + "children": Array [ + <$de85adf0b38f4f13e9cffd2f21$var$Item> + One + , + , + <$de85adf0b38f4f13e9cffd2f21$var$Item> + Two + , + ], + "selectionGroup": true, + "selectionMode": "single", + }, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "section", + "value": undefined, + "wrapper": undefined, + }, + "1-one" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 0, + "key": "1-one", + "level": 1, + "nextKey": "sep-section-1", + "parentKey": "section-1", + "prevKey": "section-1", + "props": Object { + "children": "One", + }, + "rendered": "One", + "shouldInvalidate": undefined, + "textValue": "One", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "sep-section-1" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": undefined, + "index": 1, + "key": "sep-section-1", + "level": 1, + "nextKey": "1-two", + "parentKey": "section-1", + "prevKey": "1-one", + "props": Object { + "_isSeparator": true, + }, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "1-two" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 2, + "key": "1-two", + "level": 1, + "nextKey": "sep-middle", + "parentKey": "section-1", + "prevKey": "sep-section-1", + "props": Object { + "children": "Two", + }, + "rendered": "Two", + "shouldInvalidate": undefined, + "textValue": "Two", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "sep-middle" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": undefined, + "index": 3, + "key": "sep-middle", + "level": 0, + "nextKey": "section-2", + "parentKey": null, + "prevKey": "1-two", + "props": Object { + "_isSeparator": true, + }, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "section-2" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": true, + "index": 2, + "key": "section-2", + "level": 0, + "nextKey": "2-one", + "parentKey": null, + "prevKey": "sep-middle", + "props": Object { + "children": Array [ + <$de85adf0b38f4f13e9cffd2f21$var$Item> + One + , + , + <$de85adf0b38f4f13e9cffd2f21$var$Item> + Two + , + ], + "selectionGroup": true, + "selectionMode": "multiple", + }, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "section", + "value": undefined, + "wrapper": undefined, + }, + "2-one" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 4, + "key": "2-one", + "level": 1, + "nextKey": "sep-section-2", + "parentKey": "section-2", + "prevKey": "section-2", + "props": Object { + "children": "One", + }, + "rendered": "One", + "shouldInvalidate": undefined, + "textValue": "One", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "sep-section-2" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": undefined, + "index": 5, + "key": "sep-section-2", + "level": 1, + "nextKey": "2-two", + "parentKey": "section-2", + "prevKey": "2-one", + "props": Object { + "_isSeparator": true, + }, + "rendered": undefined, + "shouldInvalidate": undefined, + "textValue": undefined, + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "2-two" => Object { + "aria-label": undefined, + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 6, + "key": "2-two", + "level": 1, + "nextKey": undefined, + "parentKey": "section-2", + "prevKey": "sep-section-2", + "props": Object { + "children": "Two", + }, + "rendered": "Two", + "shouldInvalidate": undefined, + "textValue": "Two", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + }, + "lastKey": "2-two", + }, + "state": Object { + "childFocusStrategy": "first", + "disabledKeys": Set {}, + "disallowEmptySelection": undefined, + "focusedKey": null, + "isFocused": false, + "selectedKeys": Set {}, + "selectionMode": "multiple", + "setFocused": [Function], + "setFocusedKey": [Function], + "setSelectedKeys": [Function], + }, + }, + "toggleKey": [Function], + } + } + > + + + +
    • + +
      + Two +
      +       +
      • + + + + +
    +
    +     +
    • + +`; + exports[` snapshot should match snapshot with style 1`] = ` <_Menu aria-label="Menu component" From 57548a48db83451894cab67c0cb4977ced2da092 Mon Sep 17 00:00:00 2001 From: Dominic Carrington Date: Wed, 25 Sep 2024 14:26:26 +0100 Subject: [PATCH 23/25] test(ContentSeparator): move menu tests --- .../ContentSeparator.unit.test.tsx | 37 +++++++++++++++++++ src/components/Menu/Menu.utils.test.tsx | 37 ------------------- 2 files changed, 37 insertions(+), 37 deletions(-) diff --git a/src/components/ContentSeparator/ContentSeparator.unit.test.tsx b/src/components/ContentSeparator/ContentSeparator.unit.test.tsx index 5fb04ac062..176e070da6 100644 --- a/src/components/ContentSeparator/ContentSeparator.unit.test.tsx +++ b/src/components/ContentSeparator/ContentSeparator.unit.test.tsx @@ -46,4 +46,41 @@ describe('ContentSeparator', () => { expect(container.find('li').prop('data-gradient')).toEqual(true); }); }); + + describe('menus', () => { + it('getCollectionNode should yield a single node with type "item" and have prop _isSeparator', () => { + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore - We don't export this method in the types + const generator = ContentSeparator.getCollectionNode(); + const results = Array.from(generator); + + expect(results).toHaveLength(1); + expect(results[0]).toEqual({ + type: 'item', + props: { + _isSeparator: true, + }, + }); + }); + + it('getCollectionNode should yield a single node with props passed', () => { + const props = { + className: 'main-separator', + }; + + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore - We don't export this method in the types + const generator = ContentSeparator.getCollectionNode(props); + const results = Array.from(generator); + + expect(results).toHaveLength(1); + expect(results[0]).toEqual({ + type: 'item', + props: { + _isSeparator: true, + ...props, + }, + }); + }); + }); }); diff --git a/src/components/Menu/Menu.utils.test.tsx b/src/components/Menu/Menu.utils.test.tsx index 8495c623ec..bb4a845807 100644 --- a/src/components/Menu/Menu.utils.test.tsx +++ b/src/components/Menu/Menu.utils.test.tsx @@ -62,40 +62,3 @@ describe('SelectionGroup', () => { }); }); }); - -describe('ContentSeparator', () => { - it('getCollectionNode should yield a single node with type "item" and have prop _isSeparator', () => { - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - // @ts-ignore - We don't export this method in the types - const generator = ContentSeparator.getCollectionNode(); - const results = Array.from(generator); - - expect(results).toHaveLength(1); - expect(results[0]).toEqual({ - type: 'item', - props: { - _isSeparator: true, - }, - }); - }); - - it('getCollectionNode should yield a single node with props passed', () => { - const props = { - className: 'main-separator', - }; - - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - // @ts-ignore - We don't export this method in the types - const generator = ContentSeparator.getCollectionNode(props); - const results = Array.from(generator); - - expect(results).toHaveLength(1); - expect(results[0]).toEqual({ - type: 'item', - props: { - _isSeparator: true, - ...props, - }, - }); - }); -}); From 868da27518ee55b6889740e843c660485a3e7e6e Mon Sep 17 00:00:00 2001 From: Dominic Carrington Date: Wed, 25 Sep 2024 14:51:40 +0100 Subject: [PATCH 24/25] chore(Menu): cleanup import --- src/components/Menu/Menu.utils.test.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/Menu/Menu.utils.test.tsx b/src/components/Menu/Menu.utils.test.tsx index bb4a845807..3b7dacb091 100644 --- a/src/components/Menu/Menu.utils.test.tsx +++ b/src/components/Menu/Menu.utils.test.tsx @@ -3,7 +3,6 @@ import { SelectionGroup } from './Menu.utils'; import { Item, Section, PartialNode } from '@react-stately/collections'; import { SelectionMode } from '@react-types/shared'; import { SelectionGroupProps } from './Menu.types'; -import ContentSeparator from '../ContentSeparator'; jest.mock('@react-stately/collections', () => ({ Section: { From 1973bef1a70dde76c11badab43e76163bb887f8f Mon Sep 17 00:00:00 2001 From: Dominic Carrington Date: Wed, 25 Sep 2024 14:53:05 +0100 Subject: [PATCH 25/25] fix(MenuSelectionGroup): remove font-size style use Text[type='body-secondary'] instead --- src/components/Menu/Menu.stories.tsx | 8 ++++---- .../MenuSelectionGroup/MenuSelectionGroup.style.scss | 4 ---- 2 files changed, 4 insertions(+), 8 deletions(-) diff --git a/src/components/Menu/Menu.stories.tsx b/src/components/Menu/Menu.stories.tsx index 9736789825..7bef6c9284 100644 --- a/src/components/Menu/Menu.stories.tsx +++ b/src/components/Menu/Menu.stories.tsx @@ -138,7 +138,7 @@ SelectionGroups.parameters = { title={ - Speaker (you can choose many) + Speaker (you can choose many) } > @@ -163,7 +163,7 @@ SelectionGroups.parameters = { title={ - Microphone (you can choose one) + Microphone (you can choose one) } > @@ -193,7 +193,7 @@ SelectionGroups.parameters = { title={ - Webex smart audio (You can choose one) + Webex smart audio (You can choose one) } > @@ -225,7 +225,7 @@ SelectionGroups.parameters = { title={ - Layout + Layout } > diff --git a/src/components/MenuSelectionGroup/MenuSelectionGroup.style.scss b/src/components/MenuSelectionGroup/MenuSelectionGroup.style.scss index e2de9f46ab..ee14af8341 100644 --- a/src/components/MenuSelectionGroup/MenuSelectionGroup.style.scss +++ b/src/components/MenuSelectionGroup/MenuSelectionGroup.style.scss @@ -10,8 +10,4 @@ font-size: 0.875rem; line-height: 1.375rem; padding: 0.25rem 0.75rem; - - .md-text-wrapper { - font-size: 0.875rem; - } }