From 8c2b71a77159a502071f18c67f919b129f2cdb26 Mon Sep 17 00:00:00 2001 From: Jordan Rowan Date: Wed, 9 Apr 2025 16:15:15 +0100 Subject: [PATCH 1/2] feat(ListItemBase): allow tooltip on component --- src/components/List/List.unit.test.tsx | 6 + src/components/List/List.unit.test.tsx.snap | 10 + .../ListBoxItem/ListBoxItem.unit.test.tsx | 6 + .../ListBoxItem.unit.test.tsx.snap | 1 + .../ListBoxSection.unit.test.tsx | 6 + .../ListBoxSection.unit.test.tsx.snap | 2 + .../ListHeader/ListHeader.unit.test.tsx | 6 + .../ListHeader/ListHeader.unit.test.tsx.snap | 9 + .../ListItemBase/ListItemBase.stories.tsx | 23 +- .../ListItemBase/ListItemBase.test.tsx | 47 ++ .../ListItemBase/ListItemBase.test.tsx.snap | 76 +++ src/components/ListItemBase/ListItemBase.tsx | 55 +- .../ListItemBase/ListItemBase.types.ts | 6 + .../MeetingListItem.unit.test.tsx | 6 + .../MeetingListItem.unit.test.tsx.snap | 7 + src/components/Menu/Menu.stories.tsx | 2 +- src/components/Menu/Menu.unit.test.tsx | 6 + src/components/Menu/Menu.unit.test.tsx.snap | 28 + src/components/MenuItem/MenuItem.tsx | 1 + .../MenuItem/MenuItem.unit.test.tsx | 25 + .../MenuItem/MenuItem.unit.test.tsx.snap | 493 +++++++++++++++++- .../MenuSection/MenuSection.unit.test.tsx | 6 + .../MenuSection.unit.test.tsx.snap | 4 + .../MenuSelectionGroup.unit.test.tsx | 6 + .../MenuSelectionGroup.unit.test.tsx.snap | 4 + .../MenuTrigger.unit.test.tsx.snap | 108 ++++ .../SpaceListItem/SpaceListItem.unit.test.tsx | 6 + .../SpaceListItem.unit.test.tsx.snap | 19 + 28 files changed, 942 insertions(+), 32 deletions(-) diff --git a/src/components/List/List.unit.test.tsx b/src/components/List/List.unit.test.tsx index cb30f47295..f31c11ddc6 100644 --- a/src/components/List/List.unit.test.tsx +++ b/src/components/List/List.unit.test.tsx @@ -17,6 +17,12 @@ import Menu from '../Menu'; import { Item } from '@react-stately/collections'; import { ListRefObject } from './List.types'; +jest.mock('uuid', () => { + return { + v4: () => '1', + }; +}); + describe('', () => { const commonProps = { 'aria-label': 'test', diff --git a/src/components/List/List.unit.test.tsx.snap b/src/components/List/List.unit.test.tsx.snap index 17f3062f3f..c32089009e 100644 --- a/src/components/List/List.unit.test.tsx.snap +++ b/src/components/List/List.unit.test.tsx.snap @@ -31,6 +31,7 @@ exports[` snapshot should match snapshot 1`] = ` data-padded={false} data-shape="rectangle" data-size={40} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -73,6 +74,7 @@ exports[` snapshot should match snapshot 1`] = ` data-padded={false} data-shape="rectangle" data-size={40} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -132,6 +134,7 @@ exports[` snapshot should match snapshot with className 1`] = ` data-padded={false} data-shape="rectangle" data-size={40} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -174,6 +177,7 @@ exports[` snapshot should match snapshot with className 1`] = ` data-padded={false} data-shape="rectangle" data-size={40} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -234,6 +238,7 @@ exports[` snapshot should match snapshot with id 1`] = ` data-padded={false} data-shape="rectangle" data-size={40} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -276,6 +281,7 @@ exports[` snapshot should match snapshot with id 1`] = ` data-padded={false} data-shape="rectangle" data-size={40} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -336,6 +342,7 @@ exports[` snapshot should match snapshot with role 1`] = ` data-padded={false} data-shape="rectangle" data-size={40} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -378,6 +385,7 @@ exports[` snapshot should match snapshot with role 1`] = ` data-padded={false} data-shape="rectangle" data-size={40} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -446,6 +454,7 @@ exports[` snapshot should match snapshot with style 1`] = ` data-padded={false} data-shape="rectangle" data-size={40} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -488,6 +497,7 @@ exports[` snapshot should match snapshot with style 1`] = ` data-padded={false} data-shape="rectangle" data-size={40} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} diff --git a/src/components/ListBoxItem/ListBoxItem.unit.test.tsx b/src/components/ListBoxItem/ListBoxItem.unit.test.tsx index 7d985af2c1..3727cc4254 100644 --- a/src/components/ListBoxItem/ListBoxItem.unit.test.tsx +++ b/src/components/ListBoxItem/ListBoxItem.unit.test.tsx @@ -13,6 +13,12 @@ jest.mock('@react-aria/listbox', () => { }; }); +jest.mock('uuid', () => { + return { + v4: () => '1', + }; +}); + describe('ListBoxItem', () => { let wrapper: any; const { result } = renderHook(() => diff --git a/src/components/ListBoxItem/ListBoxItem.unit.test.tsx.snap b/src/components/ListBoxItem/ListBoxItem.unit.test.tsx.snap index b7281b497d..838bf99c3c 100644 --- a/src/components/ListBoxItem/ListBoxItem.unit.test.tsx.snap +++ b/src/components/ListBoxItem/ListBoxItem.unit.test.tsx.snap @@ -50,6 +50,7 @@ exports[`ListBoxItem snapshot should match snapshot 1`] = ` data-padded={true} data-shape="rectangle" data-size={40} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} diff --git a/src/components/ListBoxSection/ListBoxSection.unit.test.tsx b/src/components/ListBoxSection/ListBoxSection.unit.test.tsx index 91301e248a..40b4765dbf 100644 --- a/src/components/ListBoxSection/ListBoxSection.unit.test.tsx +++ b/src/components/ListBoxSection/ListBoxSection.unit.test.tsx @@ -13,6 +13,12 @@ jest.mock('@react-aria/listbox', () => { }; }); +jest.mock('uuid', () => { + return { + v4: () => '1', + }; +}); + describe('ListBoxSection', () => { let wrapper: any; const { result } = renderHook(() => diff --git a/src/components/ListBoxSection/ListBoxSection.unit.test.tsx.snap b/src/components/ListBoxSection/ListBoxSection.unit.test.tsx.snap index 3075c0b958..1394fc81cd 100644 --- a/src/components/ListBoxSection/ListBoxSection.unit.test.tsx.snap +++ b/src/components/ListBoxSection/ListBoxSection.unit.test.tsx.snap @@ -84,6 +84,7 @@ exports[`ListBoxSection snapshot should match snapshot 1`] = ` data-padded={true} data-shape="rectangle" data-size={40} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -167,6 +168,7 @@ exports[`ListBoxSection snapshot should match snapshot 1`] = ` data-padded={true} data-shape="rectangle" data-size={40} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} diff --git a/src/components/ListHeader/ListHeader.unit.test.tsx b/src/components/ListHeader/ListHeader.unit.test.tsx index ea9b4a4935..9de6cca5c1 100644 --- a/src/components/ListHeader/ListHeader.unit.test.tsx +++ b/src/components/ListHeader/ListHeader.unit.test.tsx @@ -4,6 +4,12 @@ import { mount } from 'enzyme'; import ListHeader, { LIST_HEADER_CONSTANTS as CONSTANTS } from './'; import { OUTLINE_COLOR, OUTLINE_POSITION } from './ListHeader.constants'; +jest.mock('uuid', () => { + return { + v4: () => '1', + }; +}); + describe('', () => { describe('snapshot', () => { it('should match snapshot', () => { diff --git a/src/components/ListHeader/ListHeader.unit.test.tsx.snap b/src/components/ListHeader/ListHeader.unit.test.tsx.snap index 0ec19cf8f6..36d708eb19 100644 --- a/src/components/ListHeader/ListHeader.unit.test.tsx.snap +++ b/src/components/ListHeader/ListHeader.unit.test.tsx.snap @@ -32,6 +32,7 @@ exports[` snapshot should match snapshot 1`] = ` data-padded={true} data-shape="rectangle" data-size={32} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -92,6 +93,7 @@ exports[` snapshot should match snapshot with bold 1`] = ` data-padded={true} data-shape="rectangle" data-size={32} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -155,6 +157,7 @@ exports[` snapshot should match snapshot with className 1`] = ` data-padded={true} data-shape="rectangle" data-size={32} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -215,6 +218,7 @@ exports[` snapshot should match snapshot with id 1`] = ` data-padded={true} data-shape="rectangle" data-size={32} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -274,6 +278,7 @@ exports[` snapshot should match snapshot with outline 1`] = ` data-padded={true} data-shape="rectangle" data-size={32} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -338,6 +343,7 @@ exports[` snapshot should match snapshot with outlineColor 1`] = ` data-padded={true} data-shape="rectangle" data-size={32} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -402,6 +408,7 @@ exports[` snapshot should match snapshot with outlinePosition 1`] data-padded={true} data-shape="rectangle" data-size={32} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -466,6 +473,7 @@ exports[` snapshot should match snapshot with outlinePosition 2`] data-padded={true} data-shape="rectangle" data-size={32} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -538,6 +546,7 @@ exports[` snapshot should match snapshot with style 1`] = ` data-padded={true} data-shape="rectangle" data-size={32} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} diff --git a/src/components/ListItemBase/ListItemBase.stories.tsx b/src/components/ListItemBase/ListItemBase.stories.tsx index 0ab7d3c23c..a34f0cca4d 100644 --- a/src/components/ListItemBase/ListItemBase.stories.tsx +++ b/src/components/ListItemBase/ListItemBase.stories.tsx @@ -297,4 +297,25 @@ const ChangingContent = Template(ListItemWithChangingContent).bind({}); ChangingContent.argTypes = { ...argTypes }; -export { Example, Sizes, Shapes, Common, ChangingContent }; +const WithTooltip = Template((args) => ( + <> + {getComponentStates( + ListItemBase, + { + ...args, + tooltipProps: { content: 'This is a tooltip' }, + children: ( + <> + Hover over me! + + ), + onPress: action('onPress'), + }, + {} + )} + +)).bind({}); + +WithTooltip.argTypes = { ...argTypes }; + +export { Example, Sizes, Shapes, Common, ChangingContent, WithTooltip }; diff --git a/src/components/ListItemBase/ListItemBase.test.tsx b/src/components/ListItemBase/ListItemBase.test.tsx index db1a0e7ace..02c2e0b2a5 100644 --- a/src/components/ListItemBase/ListItemBase.test.tsx +++ b/src/components/ListItemBase/ListItemBase.test.tsx @@ -10,6 +10,13 @@ import userEvent from '@testing-library/user-event'; import { fireEvent, render, screen } from '@testing-library/react'; import List from '../List/List'; import { ListContextValue } from '../List/List.types'; +import { Tooltip as MdcTooltip } from '@momentum-design/components/dist/react'; + +jest.mock('uuid', () => { + return { + v4: () => '1', + }; +}); describe('ListItemBase', () => { let container; @@ -162,6 +169,16 @@ describe('ListItemBase', () => { expect(container).toMatchSnapshot(); }); + + it('should match snapshot with tooltipProps', () => { + expect.assertions(1); + + container = mount( + Test + ); + + expect(container).toMatchSnapshot(); + }); }); describe('attributes', () => { @@ -335,6 +352,36 @@ describe('ListItemBase', () => { expect(element.getAttribute('data-allow-text-select')).toBe(`${allowTextSelection}`); } ); + + it('should have MdcTooltip when tooltipProps are provided with content', () => { + expect.assertions(2); + + container = mount( + Test + ); + + const element = container.find(ListItemBase); + + expect(element.props().tooltipProps).toStrictEqual({ content: 'This is a tooltip' }); + expect(container.find(ListItemBase).find(MdcTooltip).props()).toStrictEqual({ + children: 'This is a tooltip', + content: 'This is a tooltip', + placement: 'top', + showArrow: true, + triggerID: expect.any(String), + }); + }); + + it('should not have MdcTooltip when tooltipProps are provided without content', () => { + expect.assertions(2); + + container = mount(Test); + + const element = container.find(ListItemBase); + + expect(element.props().tooltipProps).toStrictEqual({ content: undefined }); + expect(container.find(ListItemBase).find(MdcTooltip).exists()).toBe(false); + }); }); describe('actions', () => { diff --git a/src/components/ListItemBase/ListItemBase.test.tsx.snap b/src/components/ListItemBase/ListItemBase.test.tsx.snap index 3785ce1538..5f4966a420 100644 --- a/src/components/ListItemBase/ListItemBase.test.tsx.snap +++ b/src/components/ListItemBase/ListItemBase.test.tsx.snap @@ -18,6 +18,7 @@ exports[`ListItemBase snapshot should match snapshot 1`] = ` data-padded={false} data-shape="rectangle" data-size={40} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -63,6 +64,7 @@ exports[`ListItemBase snapshot should match snapshot with allowTextSelection=tru data-padded={false} data-shape="rectangle" data-size={40} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -108,6 +110,7 @@ exports[`ListItemBase snapshot should match snapshot with className 1`] = ` data-padded={false} data-shape="rectangle" data-size={40} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -151,6 +154,7 @@ exports[`ListItemBase snapshot should match snapshot with empty list item 1`] = data-padded={false} data-shape="rectangle" data-size={40} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -186,6 +190,7 @@ exports[`ListItemBase snapshot should match snapshot with focusChild 1`] = ` data-padded={false} data-shape="rectangle" data-size={40} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -328,6 +333,7 @@ exports[`ListItemBase snapshot should match snapshot with interactive=false 1`] data-padded={false} data-shape="rectangle" data-size={40} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -373,6 +379,7 @@ exports[`ListItemBase snapshot should match snapshot with isDisabled 1`] = ` data-padded={false} data-shape="rectangle" data-size={40} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -418,6 +425,7 @@ exports[`ListItemBase snapshot should match snapshot with isSelected 1`] = ` data-padded={false} data-shape="rectangle" data-size={40} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -463,6 +471,7 @@ exports[`ListItemBase snapshot should match snapshot with lang 1`] = ` data-padded={false} data-shape="rectangle" data-size={40} + id="1" lang="en-US" onBlur={[Function]} onClick={[Function]} @@ -509,6 +518,7 @@ exports[`ListItemBase snapshot should match snapshot with role 1`] = ` data-padded={false} data-shape="rectangle" data-size={40} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -554,6 +564,7 @@ exports[`ListItemBase snapshot should match snapshot with shape 1`] = ` data-padded={false} data-shape="isPilled" data-size={50} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -599,6 +610,7 @@ exports[`ListItemBase snapshot should match snapshot with size 1`] = ` data-padded={false} data-shape="rectangle" data-size={40} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -648,6 +660,7 @@ exports[`ListItemBase snapshot should match snapshot with style 1`] = ` data-padded={false} data-shape="rectangle" data-size={40} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -677,3 +690,66 @@ exports[`ListItemBase snapshot should match snapshot with style 1`] = ` `; + +exports[`ListItemBase snapshot should match snapshot with tooltipProps 1`] = ` + + + +
  • + Test +
    • + + + This is a tooltip + + +     +     +     +`; diff --git a/src/components/ListItemBase/ListItemBase.tsx b/src/components/ListItemBase/ListItemBase.tsx index fcbf795bdf..98599c76fd 100644 --- a/src/components/ListItemBase/ListItemBase.tsx +++ b/src/components/ListItemBase/ListItemBase.tsx @@ -9,6 +9,7 @@ import React, { useState, } from 'react'; import classnames from 'classnames'; +import { v4 as uuidv4 } from 'uuid'; import './ListItemBase.style.scss'; import { Props } from './ListItemBase.types'; @@ -24,6 +25,7 @@ import { useMutationObservable } from '../../hooks/useMutationObservable'; import { usePrevious } from '../../hooks/usePrevious'; import { getKeyboardFocusableElements } from '../../utils/navigation'; import { useFocusAndFocusWithinState } from '../../hooks/useFocusState'; +import { Tooltip as MdcTooltip } from '@momentum-design/components/dist/react'; type RefOrCallbackRef = RefObject | ((instance: HTMLLIElement) => void); @@ -49,9 +51,12 @@ const ListItemBase = (props: Props, providedRef: RefOrCallbackRef) => { onBlur, onBlurWithin, onFocusWithin, + tooltipProps, ...rest } = props; + const [itemId] = useState(rest.id || uuidv4); + let content: ReactNode, start: ReactNode, middle: ReactNode, end: ReactNode; const listContext = useListContext(); @@ -252,9 +257,7 @@ const ListItemBase = (props: Props, providedRef: RefOrCallbackRef) => { const firstFocusable = getKeyboardFocusableElements(ref.current, { includeTabbableOnly: false, - }).filter( - (el) => el.closest(`.${STYLE.wrapper}`) === ref.current - )[0]; + }).filter((el) => el.closest(`.${STYLE.wrapper}`) === ref.current)[0]; if (focusChild) { firstFocusable?.focus(); @@ -295,25 +298,33 @@ const ListItemBase = (props: Props, providedRef: RefOrCallbackRef) => { }, [itemHasFocus, setUpdateFocusBlocked]); const listElement = ( -
  • - {content} -
    • + <> +
  • + {content} +
    • + {!!tooltipProps?.content && ( + + {tooltipProps.content} + + )} + ); if (focusChild) { diff --git a/src/components/ListItemBase/ListItemBase.types.ts b/src/components/ListItemBase/ListItemBase.types.ts index 1b9ba8afcf..d75acdf761 100644 --- a/src/components/ListItemBase/ListItemBase.types.ts +++ b/src/components/ListItemBase/ListItemBase.types.ts @@ -92,4 +92,10 @@ export interface Props * Allows text selection of text contents of the ListItemBase. Cannot be used in conjunction with an onPress prop. */ allowTextSelection?: boolean; + + /** + * Props to be passed through to MdcTooltip, with the addition of "content" which is the content of the tooltip. + * A tooltip will only be rendered if the content prop is provided. triggerID is handled internally. + */ + tooltipProps?: Record; } diff --git a/src/components/MeetingListItem/MeetingListItem.unit.test.tsx b/src/components/MeetingListItem/MeetingListItem.unit.test.tsx index 038cd277e8..78f726b808 100644 --- a/src/components/MeetingListItem/MeetingListItem.unit.test.tsx +++ b/src/components/MeetingListItem/MeetingListItem.unit.test.tsx @@ -15,6 +15,12 @@ import '@testing-library/jest-dom'; import userEvent from '@testing-library/user-event'; import List from '../List'; +jest.mock('uuid', () => { + return { + v4: () => '1', + }; +}); + describe('', () => { describe('snapshot', () => { it('should match snapshot', () => { diff --git a/src/components/MeetingListItem/MeetingListItem.unit.test.tsx.snap b/src/components/MeetingListItem/MeetingListItem.unit.test.tsx.snap index 2ea3fd6128..2159376443 100644 --- a/src/components/MeetingListItem/MeetingListItem.unit.test.tsx.snap +++ b/src/components/MeetingListItem/MeetingListItem.unit.test.tsx.snap @@ -25,6 +25,7 @@ exports[` snapshot should match snapshot 1`] = ` data-padded={true} data-shape="rectangle" data-size={50} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -104,6 +105,7 @@ exports[` snapshot should match snapshot with buttonGroup 1`] data-padded={true} data-shape="rectangle" data-size={50} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -204,6 +206,7 @@ exports[` snapshot should match snapshot with className 1`] = data-padded={true} data-shape="rectangle" data-size={50} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -283,6 +286,7 @@ exports[` snapshot should match snapshot with color 1`] = ` data-padded={true} data-shape="rectangle" data-size={50} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -447,6 +451,7 @@ exports[` snapshot should match snapshot with image 1`] = ` data-padded={true} data-shape="rectangle" data-size={50} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -558,6 +563,7 @@ exports[` snapshot should match snapshot with isDisabled 1`] data-padded={true} data-shape="rectangle" data-size={50} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -647,6 +653,7 @@ exports[` snapshot should match snapshot with style 1`] = ` data-padded={true} data-shape="rectangle" data-size={50} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} diff --git a/src/components/Menu/Menu.stories.tsx b/src/components/Menu/Menu.stories.tsx index f6cfa1407d..35a050f0df 100644 --- a/src/components/Menu/Menu.stories.tsx +++ b/src/components/Menu/Menu.stories.tsx @@ -268,7 +268,7 @@ Common.parameters = {
    Red Blue - Yellow + Yellow
    ,
    Dog diff --git a/src/components/Menu/Menu.unit.test.tsx b/src/components/Menu/Menu.unit.test.tsx index 3e5eb0a042..ee667c8b16 100644 --- a/src/components/Menu/Menu.unit.test.tsx +++ b/src/components/Menu/Menu.unit.test.tsx @@ -21,6 +21,12 @@ import ListItemBaseSection from '../ListItemBaseSection'; import ContentSeparator from '../ContentSeparator'; import { FocusRing } from 'react-aria'; +jest.mock('uuid', () => { + return { + v4: () => '1', + }; +}); + describe('useMenuAppearanceContext', () => { const fakeMenuAppearanceContextValue: MenuAppearanceContextValue = { tickPosition: 'left', diff --git a/src/components/Menu/Menu.unit.test.tsx.snap b/src/components/Menu/Menu.unit.test.tsx.snap index 7bb01084d7..f0ff067245 100644 --- a/src/components/Menu/Menu.unit.test.tsx.snap +++ b/src/components/Menu/Menu.unit.test.tsx.snap @@ -212,6 +212,7 @@ exports[` snapshot should match snapshot 1`] = ` data-padded={true} data-shape="rectangle" data-size={40} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -443,6 +444,7 @@ exports[` snapshot should match snapshot 1`] = ` data-padded={true} data-shape="rectangle" data-size={40} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -694,6 +696,7 @@ exports[` snapshot should match snapshot with className 1`] = ` data-padded={true} data-shape="rectangle" data-size={40} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -925,6 +928,7 @@ exports[` snapshot should match snapshot with className 1`] = ` data-padded={true} data-shape="rectangle" data-size={40} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -1176,6 +1180,7 @@ exports[` snapshot should match snapshot with className 2`] = ` data-padded={true} data-shape="rectangle" data-size={40} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -1407,6 +1412,7 @@ exports[` snapshot should match snapshot with className 2`] = ` data-padded={true} data-shape="rectangle" data-size={40} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -1659,6 +1665,7 @@ exports[` snapshot should match snapshot with id 1`] = ` data-padded={true} data-shape="rectangle" data-size={40} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -1890,6 +1897,7 @@ exports[` snapshot should match snapshot with id 1`] = ` data-padded={true} data-shape="rectangle" data-size={40} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -2142,6 +2150,7 @@ exports[` snapshot should match snapshot with itemShape 1`] = ` data-padded={true} data-shape="isPilled" data-size={50} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -2373,6 +2382,7 @@ exports[` snapshot should match snapshot with itemShape 1`] = ` data-padded={true} data-shape="isPilled" data-size={50} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -2624,6 +2634,7 @@ exports[` snapshot should match snapshot with itemSize 1`] = ` data-padded={true} data-shape="rectangle" data-size={50} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -2855,6 +2866,7 @@ exports[` snapshot should match snapshot with itemSize 1`] = ` data-padded={true} data-shape="rectangle" data-size={50} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -3151,6 +3163,7 @@ exports[` snapshot should match snapshot with seperator between items 1` data-padded={true} data-shape="rectangle" data-size={40} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -3434,6 +3447,7 @@ exports[` snapshot should match snapshot with seperator between items 1` data-padded={true} data-shape="rectangle" data-size={40} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -4453,6 +4467,7 @@ exports[` snapshot should match snapshot with seperator within section 1 data-padded={true} data-shape="rectangle" data-size={40} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -4994,6 +5009,7 @@ exports[` snapshot should match snapshot with seperator within section 1 data-padded={true} data-shape="rectangle" data-size={40} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -6003,6 +6019,7 @@ exports[` snapshot should match snapshot with seperator within section 1 data-padded={true} data-shape="rectangle" data-size={40} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -6544,6 +6561,7 @@ exports[` snapshot should match snapshot with seperator within section 1 data-padded={true} data-shape="rectangle" data-size={40} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -7678,6 +7696,7 @@ exports[` snapshot should match snapshot with seperator within selection data-padded={true} data-shape="rectangle" data-size={40} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -8269,6 +8288,7 @@ exports[` snapshot should match snapshot with seperator within selection data-padded={true} data-shape="rectangle" data-size={40} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -9390,6 +9410,7 @@ exports[` snapshot should match snapshot with seperator within selection data-padded={true} data-shape="rectangle" data-size={40} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -9981,6 +10002,7 @@ exports[` snapshot should match snapshot with seperator within selection data-padded={true} data-shape="rectangle" data-size={40} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -10235,6 +10257,7 @@ exports[` snapshot should match snapshot with shouldItemFocusBeInset 1`] data-padded={true} data-shape="rectangle" data-size={40} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -10466,6 +10489,7 @@ exports[` snapshot should match snapshot with shouldItemFocusBeInset 1`] data-padded={true} data-shape="rectangle" data-size={40} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -10726,6 +10750,7 @@ exports[` snapshot should match snapshot with style 1`] = ` data-padded={true} data-shape="rectangle" data-size={40} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -10957,6 +10982,7 @@ exports[` snapshot should match snapshot with style 1`] = ` data-padded={true} data-shape="rectangle" data-size={40} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -11209,6 +11235,7 @@ exports[` snapshot should match snapshot with tickPosition 1`] = ` data-padded={true} data-shape="rectangle" data-size={50} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -11451,6 +11478,7 @@ exports[` snapshot should match snapshot with tickPosition 1`] = ` data-padded={true} data-shape="rectangle" data-size={50} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} diff --git a/src/components/MenuItem/MenuItem.tsx b/src/components/MenuItem/MenuItem.tsx index 549277374f..bc77898f6f 100644 --- a/src/components/MenuItem/MenuItem.tsx +++ b/src/components/MenuItem/MenuItem.tsx @@ -108,6 +108,7 @@ const MenuItem = (props: Props): ReactElement => { isDisabled={isDisabled} isPadded={true} {...menuItemProps} + tooltipProps={item.props.tooltipProps} > {renderSections()} diff --git a/src/components/MenuItem/MenuItem.unit.test.tsx b/src/components/MenuItem/MenuItem.unit.test.tsx index 09e708066e..3c5270774c 100644 --- a/src/components/MenuItem/MenuItem.unit.test.tsx +++ b/src/components/MenuItem/MenuItem.unit.test.tsx @@ -10,6 +10,12 @@ import * as menu from '../Menu/Menu'; import { ListItemBaseSize } from '../ListItemBase/ListItemBase.types'; import ListItemBaseSection from '../ListItemBaseSection'; +jest.mock('uuid', () => { + return { + v4: () => '1', + }; +}); + describe('', () => { const { result } = renderHook(() => useTreeState({ @@ -23,6 +29,14 @@ describe('', () => { Item 3 , + + Item 4 + , ], selectedKeys: ['$.0'], }) @@ -67,6 +81,17 @@ describe('', () => { expect(wrapper).toMatchSnapshot(); }); + + it('should match snapshot with tooltipProps passed', () => { + const item = state.collection.getItem('$.3'); + jest + .spyOn(menu, 'useMenuContext') + .mockReturnValue({ onClose: jest.fn(), closeOnSelect: true }); + + const wrapper = mount(); + + expect(wrapper).toMatchSnapshot(); + }); }); describe('attributes', () => { diff --git a/src/components/MenuItem/MenuItem.unit.test.tsx.snap b/src/components/MenuItem/MenuItem.unit.test.tsx.snap index 0dd4bbdf0e..bdc9c45e6f 100644 --- a/src/components/MenuItem/MenuItem.unit.test.tsx.snap +++ b/src/components/MenuItem/MenuItem.unit.test.tsx.snap @@ -90,7 +90,7 @@ exports[` snapshot should match snapshot 1`] = ` "index": 2, "key": "$.2", "level": 0, - "nextKey": undefined, + "nextKey": "$.3", "parentKey": null, "prevKey": "$.1", "props": Object { @@ -105,8 +105,35 @@ exports[` snapshot should match snapshot 1`] = ` "value": undefined, "wrapper": undefined, }, + "$.3" => Object { + "aria-label": "3", + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 3, + "key": "$.3", + "level": 0, + "nextKey": undefined, + "parentKey": null, + "prevKey": "$.2", + "props": Object { + "aria-label": "3", + "children": "Item 4", + "closeOnSelect": false, + "tooltipProps": Object { + "content": "This is a tooltip", + }, + }, + "rendered": "Item 4", + "shouldInvalidate": undefined, + "textValue": "Item 4", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, }, - "lastKey": "$.2", + "lastKey": "$.3", }, "disabledKeys": Set {}, "expandedKeys": Set {}, @@ -174,7 +201,7 @@ exports[` snapshot should match snapshot 1`] = ` "index": 2, "key": "$.2", "level": 0, - "nextKey": undefined, + "nextKey": "$.3", "parentKey": null, "prevKey": "$.1", "props": Object { @@ -189,8 +216,35 @@ exports[` snapshot should match snapshot 1`] = ` "value": undefined, "wrapper": undefined, }, + "$.3" => Object { + "aria-label": "3", + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 3, + "key": "$.3", + "level": 0, + "nextKey": undefined, + "parentKey": null, + "prevKey": "$.2", + "props": Object { + "aria-label": "3", + "children": "Item 4", + "closeOnSelect": false, + "tooltipProps": Object { + "content": "This is a tooltip", + }, + }, + "rendered": "Item 4", + "shouldInvalidate": undefined, + "textValue": "Item 4", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, }, - "lastKey": "$.2", + "lastKey": "$.3", }, "state": Object { "childFocusStrategy": null, @@ -254,6 +308,7 @@ exports[` snapshot should match snapshot 1`] = ` data-padded={true} data-shape="rectangle" data-size={40} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -420,7 +475,7 @@ exports[` snapshot should match snapshot with tickPosition 1`] = ` "index": 2, "key": "$.2", "level": 0, - "nextKey": undefined, + "nextKey": "$.3", "parentKey": null, "prevKey": "$.1", "props": Object { @@ -435,8 +490,35 @@ exports[` snapshot should match snapshot with tickPosition 1`] = ` "value": undefined, "wrapper": undefined, }, + "$.3" => Object { + "aria-label": "3", + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 3, + "key": "$.3", + "level": 0, + "nextKey": undefined, + "parentKey": null, + "prevKey": "$.2", + "props": Object { + "aria-label": "3", + "children": "Item 4", + "closeOnSelect": false, + "tooltipProps": Object { + "content": "This is a tooltip", + }, + }, + "rendered": "Item 4", + "shouldInvalidate": undefined, + "textValue": "Item 4", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, }, - "lastKey": "$.2", + "lastKey": "$.3", }, "disabledKeys": Set {}, "expandedKeys": Set {}, @@ -504,7 +586,7 @@ exports[` snapshot should match snapshot with tickPosition 1`] = ` "index": 2, "key": "$.2", "level": 0, - "nextKey": undefined, + "nextKey": "$.3", "parentKey": null, "prevKey": "$.1", "props": Object { @@ -519,8 +601,35 @@ exports[` snapshot should match snapshot with tickPosition 1`] = ` "value": undefined, "wrapper": undefined, }, + "$.3" => Object { + "aria-label": "3", + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 3, + "key": "$.3", + "level": 0, + "nextKey": undefined, + "parentKey": null, + "prevKey": "$.2", + "props": Object { + "aria-label": "3", + "children": "Item 4", + "closeOnSelect": false, + "tooltipProps": Object { + "content": "This is a tooltip", + }, + }, + "rendered": "Item 4", + "shouldInvalidate": undefined, + "textValue": "Item 4", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, }, - "lastKey": "$.2", + "lastKey": "$.3", }, "state": Object { "childFocusStrategy": null, @@ -584,6 +693,7 @@ exports[` snapshot should match snapshot with tickPosition 1`] = ` data-padded={true} data-shape="rectangle" data-size={30} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -659,3 +769,370 @@ exports[` snapshot should match snapshot with tickPosition 1`] = ` `; + +exports[` snapshot should match snapshot with tooltipProps passed 1`] = ` + Object { + "aria-label": "0", + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 0, + "key": "$.0", + "level": 0, + "nextKey": "$.1", + "parentKey": null, + "prevKey": undefined, + "props": Object { + "aria-label": "0", + "children": "Item 1", + }, + "rendered": "Item 1", + "shouldInvalidate": undefined, + "textValue": "Item 1", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "$.1" => Object { + "aria-label": "1", + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 1, + "key": "$.1", + "level": 0, + "nextKey": "$.2", + "parentKey": null, + "prevKey": "$.0", + "props": Object { + "aria-label": "1", + "children": "Item 2", + }, + "rendered": "Item 2", + "shouldInvalidate": undefined, + "textValue": "Item 2", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "$.2" => Object { + "aria-label": "2", + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 2, + "key": "$.2", + "level": 0, + "nextKey": "$.3", + "parentKey": null, + "prevKey": "$.1", + "props": Object { + "aria-label": "2", + "children": "Item 3", + "closeOnSelect": false, + }, + "rendered": "Item 3", + "shouldInvalidate": undefined, + "textValue": "Item 3", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "$.3" => Object { + "aria-label": "3", + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 3, + "key": "$.3", + "level": 0, + "nextKey": undefined, + "parentKey": null, + "prevKey": "$.2", + "props": Object { + "aria-label": "3", + "children": "Item 4", + "closeOnSelect": false, + "tooltipProps": Object { + "content": "This is a tooltip", + }, + }, + "rendered": "Item 4", + "shouldInvalidate": undefined, + "textValue": "Item 4", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + }, + "lastKey": "$.3", + }, + "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": "0", + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 0, + "key": "$.0", + "level": 0, + "nextKey": "$.1", + "parentKey": null, + "prevKey": undefined, + "props": Object { + "aria-label": "0", + "children": "Item 1", + }, + "rendered": "Item 1", + "shouldInvalidate": undefined, + "textValue": "Item 1", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "$.1" => Object { + "aria-label": "1", + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 1, + "key": "$.1", + "level": 0, + "nextKey": "$.2", + "parentKey": null, + "prevKey": "$.0", + "props": Object { + "aria-label": "1", + "children": "Item 2", + }, + "rendered": "Item 2", + "shouldInvalidate": undefined, + "textValue": "Item 2", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "$.2" => Object { + "aria-label": "2", + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 2, + "key": "$.2", + "level": 0, + "nextKey": "$.3", + "parentKey": null, + "prevKey": "$.1", + "props": Object { + "aria-label": "2", + "children": "Item 3", + "closeOnSelect": false, + }, + "rendered": "Item 3", + "shouldInvalidate": undefined, + "textValue": "Item 3", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + "$.3" => Object { + "aria-label": "3", + "childNodes": Object { + Symbol(Symbol.iterator): [Function], + }, + "hasChildNodes": false, + "index": 3, + "key": "$.3", + "level": 0, + "nextKey": undefined, + "parentKey": null, + "prevKey": "$.2", + "props": Object { + "aria-label": "3", + "children": "Item 4", + "closeOnSelect": false, + "tooltipProps": Object { + "content": "This is a tooltip", + }, + }, + "rendered": "Item 4", + "shouldInvalidate": undefined, + "textValue": "Item 4", + "type": "item", + "value": undefined, + "wrapper": undefined, + }, + }, + "lastKey": "$.3", + }, + "state": Object { + "childFocusStrategy": null, + "disabledKeys": Set {}, + "disallowEmptySelection": undefined, + "focusedKey": null, + "isFocused": false, + "selectedKeys": Set { + "$.0", + }, + "selectionMode": "none", + "setFocused": [Function], + "setFocusedKey": [Function], + "setSelectedKeys": [Function], + }, + }, + "toggleKey": [Function], + } + } +> + + + + + + + This is a tooltip + + + + + + +`; diff --git a/src/components/MenuSection/MenuSection.unit.test.tsx b/src/components/MenuSection/MenuSection.unit.test.tsx index 1d22043b5e..ae3b624ee6 100644 --- a/src/components/MenuSection/MenuSection.unit.test.tsx +++ b/src/components/MenuSection/MenuSection.unit.test.tsx @@ -7,6 +7,12 @@ import { renderHook } from '@testing-library/react-hooks'; import { useTreeState } from '@react-stately/tree'; import ContentSeparator from '../ContentSeparator'; +jest.mock('uuid', () => { + return { + v4: () => '1', + }; +}); + describe('', () => { const { result } = renderHook(() => useTreeState({ diff --git a/src/components/MenuSection/MenuSection.unit.test.tsx.snap b/src/components/MenuSection/MenuSection.unit.test.tsx.snap index 6bdda2e74c..65273d5bc2 100644 --- a/src/components/MenuSection/MenuSection.unit.test.tsx.snap +++ b/src/components/MenuSection/MenuSection.unit.test.tsx.snap @@ -456,6 +456,7 @@ exports[` snapshot should match snapshot 1`] = ` data-padded={true} data-shape="rectangle" data-size={40} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -732,6 +733,7 @@ exports[` snapshot should match snapshot 1`] = ` data-padded={true} data-shape="rectangle" data-size={40} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -1315,6 +1317,7 @@ exports[` snapshot should match snapshot with seperator 1`] = ` data-padded={true} data-shape="rectangle" data-size={40} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -1641,6 +1644,7 @@ exports[` snapshot should match snapshot with seperator 1`] = ` data-padded={true} data-shape="rectangle" data-size={40} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} diff --git a/src/components/MenuSelectionGroup/MenuSelectionGroup.unit.test.tsx b/src/components/MenuSelectionGroup/MenuSelectionGroup.unit.test.tsx index a473af1a26..d1a240a599 100644 --- a/src/components/MenuSelectionGroup/MenuSelectionGroup.unit.test.tsx +++ b/src/components/MenuSelectionGroup/MenuSelectionGroup.unit.test.tsx @@ -9,6 +9,12 @@ import { useTreeState } from '@react-stately/tree'; import MenuItem from '../MenuItem'; import ContentSeparator from '../ContentSeparator'; +jest.mock('uuid', () => { + return { + v4: () => '1', + }; +}); + describe('', () => { const { result } = renderHook(() => useTreeState({ diff --git a/src/components/MenuSelectionGroup/MenuSelectionGroup.unit.test.tsx.snap b/src/components/MenuSelectionGroup/MenuSelectionGroup.unit.test.tsx.snap index a6d9b112ac..36fadd1f31 100644 --- a/src/components/MenuSelectionGroup/MenuSelectionGroup.unit.test.tsx.snap +++ b/src/components/MenuSelectionGroup/MenuSelectionGroup.unit.test.tsx.snap @@ -554,6 +554,7 @@ exports[` snapshot should match snapshot 1`] = ` data-padded={true} data-shape="rectangle" data-size={32} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -868,6 +869,7 @@ exports[` snapshot should match snapshot 1`] = ` data-padded={true} data-shape="rectangle" data-size={32} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -1554,6 +1556,7 @@ exports[` snapshot should match snapshot with seperator wi data-padded={true} data-shape="rectangle" data-size={32} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -1920,6 +1923,7 @@ exports[` snapshot should match snapshot with seperator wi data-padded={true} data-shape="rectangle" data-size={32} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} diff --git a/src/components/MenuTrigger/MenuTrigger.unit.test.tsx.snap b/src/components/MenuTrigger/MenuTrigger.unit.test.tsx.snap index 4d09a21aea..e5206d23de 100644 --- a/src/components/MenuTrigger/MenuTrigger.unit.test.tsx.snap +++ b/src/components/MenuTrigger/MenuTrigger.unit.test.tsx.snap @@ -313,6 +313,7 @@ exports[` - Enzyme snapshot should match snapshot 1`] = ` data-padded="true" data-shape="rectangle" data-size="40" + id="1" role="menuitemradio" tabindex="0" > @@ -334,6 +335,7 @@ exports[` - Enzyme snapshot should match snapshot 1`] = ` data-padded="true" data-shape="rectangle" data-size="40" + id="1" role="menuitemradio" tabindex="-1" > @@ -355,6 +357,7 @@ exports[` - Enzyme snapshot should match snapshot 1`] = ` data-padded="true" data-shape="rectangle" data-size="40" + id="1" role="menuitemradio" tabindex="-1" > @@ -388,6 +391,7 @@ exports[` - Enzyme snapshot should match snapshot 1`] = ` data-padded="true" data-shape="rectangle" data-size="40" + id="1" role="menuitemcheckbox" tabindex="-1" > @@ -409,6 +413,7 @@ exports[` - Enzyme snapshot should match snapshot 1`] = ` data-padded="true" data-shape="rectangle" data-size="40" + id="1" role="menuitemcheckbox" tabindex="-1" > @@ -430,6 +435,7 @@ exports[` - Enzyme snapshot should match snapshot 1`] = ` data-padded="true" data-shape="rectangle" data-size="40" + id="1" role="menuitemcheckbox" tabindex="-1" > @@ -749,6 +755,7 @@ exports[` - Enzyme snapshot should match snapshot 1`] = ` data-padded={true} data-shape="rectangle" data-size={40} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -1026,6 +1033,7 @@ exports[` - Enzyme snapshot should match snapshot 1`] = ` data-padded={true} data-shape="rectangle" data-size={40} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -1303,6 +1311,7 @@ exports[` - Enzyme snapshot should match snapshot 1`] = ` data-padded={true} data-shape="rectangle" data-size={40} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -1606,6 +1615,7 @@ exports[` - Enzyme snapshot should match snapshot 1`] = ` data-padded={true} data-shape="rectangle" data-size={40} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -1883,6 +1893,7 @@ exports[` - Enzyme snapshot should match snapshot 1`] = ` data-padded={true} data-shape="rectangle" data-size={40} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -2160,6 +2171,7 @@ exports[` - Enzyme snapshot should match snapshot 1`] = ` data-padded={true} data-shape="rectangle" data-size={40} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -2525,6 +2537,7 @@ exports[` - Enzyme snapshot should match snapshot with className data-padded="true" data-shape="rectangle" data-size="40" + id="1" role="menuitemradio" tabindex="0" > @@ -2546,6 +2559,7 @@ exports[` - Enzyme snapshot should match snapshot with className data-padded="true" data-shape="rectangle" data-size="40" + id="1" role="menuitemradio" tabindex="-1" > @@ -2567,6 +2581,7 @@ exports[` - Enzyme snapshot should match snapshot with className data-padded="true" data-shape="rectangle" data-size="40" + id="1" role="menuitemradio" tabindex="-1" > @@ -2600,6 +2615,7 @@ exports[` - Enzyme snapshot should match snapshot with className data-padded="true" data-shape="rectangle" data-size="40" + id="1" role="menuitemcheckbox" tabindex="-1" > @@ -2621,6 +2637,7 @@ exports[` - Enzyme snapshot should match snapshot with className data-padded="true" data-shape="rectangle" data-size="40" + id="1" role="menuitemcheckbox" tabindex="-1" > @@ -2642,6 +2659,7 @@ exports[` - Enzyme snapshot should match snapshot with className data-padded="true" data-shape="rectangle" data-size="40" + id="1" role="menuitemcheckbox" tabindex="-1" > @@ -2961,6 +2979,7 @@ exports[` - Enzyme snapshot should match snapshot with className data-padded={true} data-shape="rectangle" data-size={40} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -3238,6 +3257,7 @@ exports[` - Enzyme snapshot should match snapshot with className data-padded={true} data-shape="rectangle" data-size={40} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -3515,6 +3535,7 @@ exports[` - Enzyme snapshot should match snapshot with className data-padded={true} data-shape="rectangle" data-size={40} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -3818,6 +3839,7 @@ exports[` - Enzyme snapshot should match snapshot with className data-padded={true} data-shape="rectangle" data-size={40} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -4095,6 +4117,7 @@ exports[` - Enzyme snapshot should match snapshot with className data-padded={true} data-shape="rectangle" data-size={40} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -4372,6 +4395,7 @@ exports[` - Enzyme snapshot should match snapshot with className data-padded={true} data-shape="rectangle" data-size={40} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -4737,6 +4761,7 @@ exports[` - Enzyme snapshot should match snapshot with color 1`] data-padded="true" data-shape="rectangle" data-size="40" + id="1" role="menuitemradio" tabindex="0" > @@ -4758,6 +4783,7 @@ exports[` - Enzyme snapshot should match snapshot with color 1`] data-padded="true" data-shape="rectangle" data-size="40" + id="1" role="menuitemradio" tabindex="-1" > @@ -4779,6 +4805,7 @@ exports[` - Enzyme snapshot should match snapshot with color 1`] data-padded="true" data-shape="rectangle" data-size="40" + id="1" role="menuitemradio" tabindex="-1" > @@ -4812,6 +4839,7 @@ exports[` - Enzyme snapshot should match snapshot with color 1`] data-padded="true" data-shape="rectangle" data-size="40" + id="1" role="menuitemcheckbox" tabindex="-1" > @@ -4833,6 +4861,7 @@ exports[` - Enzyme snapshot should match snapshot with color 1`] data-padded="true" data-shape="rectangle" data-size="40" + id="1" role="menuitemcheckbox" tabindex="-1" > @@ -4854,6 +4883,7 @@ exports[` - Enzyme snapshot should match snapshot with color 1`] data-padded="true" data-shape="rectangle" data-size="40" + id="1" role="menuitemcheckbox" tabindex="-1" > @@ -5173,6 +5203,7 @@ exports[` - Enzyme snapshot should match snapshot with color 1`] data-padded={true} data-shape="rectangle" data-size={40} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -5450,6 +5481,7 @@ exports[` - Enzyme snapshot should match snapshot with color 1`] data-padded={true} data-shape="rectangle" data-size={40} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -5727,6 +5759,7 @@ exports[` - Enzyme snapshot should match snapshot with color 1`] data-padded={true} data-shape="rectangle" data-size={40} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -6030,6 +6063,7 @@ exports[` - Enzyme snapshot should match snapshot with color 1`] data-padded={true} data-shape="rectangle" data-size={40} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -6307,6 +6341,7 @@ exports[` - Enzyme snapshot should match snapshot with color 1`] data-padded={true} data-shape="rectangle" data-size={40} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -6584,6 +6619,7 @@ exports[` - Enzyme snapshot should match snapshot with color 1`] data-padded={true} data-shape="rectangle" data-size={40} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -6951,6 +6987,7 @@ exports[` - Enzyme snapshot should match snapshot with id 1`] = ` data-padded="true" data-shape="rectangle" data-size="40" + id="1" role="menuitemradio" tabindex="0" > @@ -6972,6 +7009,7 @@ exports[` - Enzyme snapshot should match snapshot with id 1`] = ` data-padded="true" data-shape="rectangle" data-size="40" + id="1" role="menuitemradio" tabindex="-1" > @@ -6993,6 +7031,7 @@ exports[` - Enzyme snapshot should match snapshot with id 1`] = ` data-padded="true" data-shape="rectangle" data-size="40" + id="1" role="menuitemradio" tabindex="-1" > @@ -7026,6 +7065,7 @@ exports[` - Enzyme snapshot should match snapshot with id 1`] = ` data-padded="true" data-shape="rectangle" data-size="40" + id="1" role="menuitemcheckbox" tabindex="-1" > @@ -7047,6 +7087,7 @@ exports[` - Enzyme snapshot should match snapshot with id 1`] = ` data-padded="true" data-shape="rectangle" data-size="40" + id="1" role="menuitemcheckbox" tabindex="-1" > @@ -7068,6 +7109,7 @@ exports[` - Enzyme snapshot should match snapshot with id 1`] = ` data-padded="true" data-shape="rectangle" data-size="40" + id="1" role="menuitemcheckbox" tabindex="-1" > @@ -7389,6 +7431,7 @@ exports[` - Enzyme snapshot should match snapshot with id 1`] = ` data-padded={true} data-shape="rectangle" data-size={40} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -7666,6 +7709,7 @@ exports[` - Enzyme snapshot should match snapshot with id 1`] = ` data-padded={true} data-shape="rectangle" data-size={40} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -7943,6 +7987,7 @@ exports[` - Enzyme snapshot should match snapshot with id 1`] = ` data-padded={true} data-shape="rectangle" data-size={40} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -8246,6 +8291,7 @@ exports[` - Enzyme snapshot should match snapshot with id 1`] = ` data-padded={true} data-shape="rectangle" data-size={40} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -8523,6 +8569,7 @@ exports[` - Enzyme snapshot should match snapshot with id 1`] = ` data-padded={true} data-shape="rectangle" data-size={40} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -8800,6 +8847,7 @@ exports[` - Enzyme snapshot should match snapshot with id 1`] = ` data-padded={true} data-shape="rectangle" data-size={40} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -9165,6 +9213,7 @@ exports[` - Enzyme snapshot should match snapshot with placement data-padded="true" data-shape="rectangle" data-size="40" + id="1" role="menuitemradio" tabindex="0" > @@ -9186,6 +9235,7 @@ exports[` - Enzyme snapshot should match snapshot with placement data-padded="true" data-shape="rectangle" data-size="40" + id="1" role="menuitemradio" tabindex="-1" > @@ -9207,6 +9257,7 @@ exports[` - Enzyme snapshot should match snapshot with placement data-padded="true" data-shape="rectangle" data-size="40" + id="1" role="menuitemradio" tabindex="-1" > @@ -9240,6 +9291,7 @@ exports[` - Enzyme snapshot should match snapshot with placement data-padded="true" data-shape="rectangle" data-size="40" + id="1" role="menuitemcheckbox" tabindex="-1" > @@ -9261,6 +9313,7 @@ exports[` - Enzyme snapshot should match snapshot with placement data-padded="true" data-shape="rectangle" data-size="40" + id="1" role="menuitemcheckbox" tabindex="-1" > @@ -9282,6 +9335,7 @@ exports[` - Enzyme snapshot should match snapshot with placement data-padded="true" data-shape="rectangle" data-size="40" + id="1" role="menuitemcheckbox" tabindex="-1" > @@ -9601,6 +9655,7 @@ exports[` - Enzyme snapshot should match snapshot with placement data-padded={true} data-shape="rectangle" data-size={40} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -9878,6 +9933,7 @@ exports[` - Enzyme snapshot should match snapshot with placement data-padded={true} data-shape="rectangle" data-size={40} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -10155,6 +10211,7 @@ exports[` - Enzyme snapshot should match snapshot with placement data-padded={true} data-shape="rectangle" data-size={40} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -10458,6 +10515,7 @@ exports[` - Enzyme snapshot should match snapshot with placement data-padded={true} data-shape="rectangle" data-size={40} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -10735,6 +10793,7 @@ exports[` - Enzyme snapshot should match snapshot with placement data-padded={true} data-shape="rectangle" data-size={40} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -11012,6 +11071,7 @@ exports[` - Enzyme snapshot should match snapshot with placement data-padded={true} data-shape="rectangle" data-size={40} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -11377,6 +11437,7 @@ exports[` - Enzyme snapshot should match snapshot with showArrow data-padded="true" data-shape="rectangle" data-size="40" + id="1" role="menuitemradio" tabindex="0" > @@ -11398,6 +11459,7 @@ exports[` - Enzyme snapshot should match snapshot with showArrow data-padded="true" data-shape="rectangle" data-size="40" + id="1" role="menuitemradio" tabindex="-1" > @@ -11419,6 +11481,7 @@ exports[` - Enzyme snapshot should match snapshot with showArrow data-padded="true" data-shape="rectangle" data-size="40" + id="1" role="menuitemradio" tabindex="-1" > @@ -11452,6 +11515,7 @@ exports[` - Enzyme snapshot should match snapshot with showArrow data-padded="true" data-shape="rectangle" data-size="40" + id="1" role="menuitemcheckbox" tabindex="-1" > @@ -11473,6 +11537,7 @@ exports[` - Enzyme snapshot should match snapshot with showArrow data-padded="true" data-shape="rectangle" data-size="40" + id="1" role="menuitemcheckbox" tabindex="-1" > @@ -11494,6 +11559,7 @@ exports[` - Enzyme snapshot should match snapshot with showArrow data-padded="true" data-shape="rectangle" data-size="40" + id="1" role="menuitemcheckbox" tabindex="-1" > @@ -11844,6 +11910,7 @@ exports[` - Enzyme snapshot should match snapshot with showArrow data-padded={true} data-shape="rectangle" data-size={40} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -12121,6 +12188,7 @@ exports[` - Enzyme snapshot should match snapshot with showArrow data-padded={true} data-shape="rectangle" data-size={40} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -12398,6 +12466,7 @@ exports[` - Enzyme snapshot should match snapshot with showArrow data-padded={true} data-shape="rectangle" data-size={40} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -12701,6 +12770,7 @@ exports[` - Enzyme snapshot should match snapshot with showArrow data-padded={true} data-shape="rectangle" data-size={40} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -12978,6 +13048,7 @@ exports[` - Enzyme snapshot should match snapshot with showArrow data-padded={true} data-shape="rectangle" data-size={40} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -13255,6 +13326,7 @@ exports[` - Enzyme snapshot should match snapshot with showArrow data-padded={true} data-shape="rectangle" data-size={40} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -13665,6 +13737,7 @@ exports[` - Enzyme snapshot should match snapshot with style 1`] data-padded="true" data-shape="rectangle" data-size="40" + id="1" role="menuitemradio" tabindex="0" > @@ -13686,6 +13759,7 @@ exports[` - Enzyme snapshot should match snapshot with style 1`] data-padded="true" data-shape="rectangle" data-size="40" + id="1" role="menuitemradio" tabindex="-1" > @@ -13707,6 +13781,7 @@ exports[` - Enzyme snapshot should match snapshot with style 1`] data-padded="true" data-shape="rectangle" data-size="40" + id="1" role="menuitemradio" tabindex="-1" > @@ -13740,6 +13815,7 @@ exports[` - Enzyme snapshot should match snapshot with style 1`] data-padded="true" data-shape="rectangle" data-size="40" + id="1" role="menuitemcheckbox" tabindex="-1" > @@ -13761,6 +13837,7 @@ exports[` - Enzyme snapshot should match snapshot with style 1`] data-padded="true" data-shape="rectangle" data-size="40" + id="1" role="menuitemcheckbox" tabindex="-1" > @@ -13782,6 +13859,7 @@ exports[` - Enzyme snapshot should match snapshot with style 1`] data-padded="true" data-shape="rectangle" data-size="40" + id="1" role="menuitemcheckbox" tabindex="-1" > @@ -14111,6 +14189,7 @@ exports[` - Enzyme snapshot should match snapshot with style 1`] data-padded={true} data-shape="rectangle" data-size={40} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -14388,6 +14467,7 @@ exports[` - Enzyme snapshot should match snapshot with style 1`] data-padded={true} data-shape="rectangle" data-size={40} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -14665,6 +14745,7 @@ exports[` - Enzyme snapshot should match snapshot with style 1`] data-padded={true} data-shape="rectangle" data-size={40} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -14968,6 +15049,7 @@ exports[` - Enzyme snapshot should match snapshot with style 1`] data-padded={true} data-shape="rectangle" data-size={40} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -15245,6 +15327,7 @@ exports[` - Enzyme snapshot should match snapshot with style 1`] data-padded={true} data-shape="rectangle" data-size={40} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -15522,6 +15605,7 @@ exports[` - Enzyme snapshot should match snapshot with style 1`] data-padded={true} data-shape="rectangle" data-size={40} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -15887,6 +15971,7 @@ exports[` - Enzyme snapshot should match snapshot with variant 1` data-padded="true" data-shape="rectangle" data-size="40" + id="1" role="menuitemradio" tabindex="0" > @@ -15908,6 +15993,7 @@ exports[` - Enzyme snapshot should match snapshot with variant 1` data-padded="true" data-shape="rectangle" data-size="40" + id="1" role="menuitemradio" tabindex="-1" > @@ -15929,6 +16015,7 @@ exports[` - Enzyme snapshot should match snapshot with variant 1` data-padded="true" data-shape="rectangle" data-size="40" + id="1" role="menuitemradio" tabindex="-1" > @@ -15962,6 +16049,7 @@ exports[` - Enzyme snapshot should match snapshot with variant 1` data-padded="true" data-shape="rectangle" data-size="40" + id="1" role="menuitemcheckbox" tabindex="-1" > @@ -15983,6 +16071,7 @@ exports[` - Enzyme snapshot should match snapshot with variant 1` data-padded="true" data-shape="rectangle" data-size="40" + id="1" role="menuitemcheckbox" tabindex="-1" > @@ -16004,6 +16093,7 @@ exports[` - Enzyme snapshot should match snapshot with variant 1` data-padded="true" data-shape="rectangle" data-size="40" + id="1" role="menuitemcheckbox" tabindex="-1" > @@ -16323,6 +16413,7 @@ exports[` - Enzyme snapshot should match snapshot with variant 1` data-padded={true} data-shape="rectangle" data-size={40} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -16600,6 +16691,7 @@ exports[` - Enzyme snapshot should match snapshot with variant 1` data-padded={true} data-shape="rectangle" data-size={40} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -16877,6 +16969,7 @@ exports[` - Enzyme snapshot should match snapshot with variant 1` data-padded={true} data-shape="rectangle" data-size={40} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -17180,6 +17273,7 @@ exports[` - Enzyme snapshot should match snapshot with variant 1` data-padded={true} data-shape="rectangle" data-size={40} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -17457,6 +17551,7 @@ exports[` - Enzyme snapshot should match snapshot with variant 1` data-padded={true} data-shape="rectangle" data-size={40} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -17734,6 +17829,7 @@ exports[` - Enzyme snapshot should match snapshot with variant 1` data-padded={true} data-shape="rectangle" data-size={40} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -18103,6 +18199,7 @@ exports[` - Enzyme snapshot should match snapshot with zIndex 1`] data-padded="true" data-shape="rectangle" data-size="40" + id="1" role="menuitemradio" tabindex="0" > @@ -18124,6 +18221,7 @@ exports[` - Enzyme snapshot should match snapshot with zIndex 1`] data-padded="true" data-shape="rectangle" data-size="40" + id="1" role="menuitemradio" tabindex="-1" > @@ -18145,6 +18243,7 @@ exports[` - Enzyme snapshot should match snapshot with zIndex 1`] data-padded="true" data-shape="rectangle" data-size="40" + id="1" role="menuitemradio" tabindex="-1" > @@ -18178,6 +18277,7 @@ exports[` - Enzyme snapshot should match snapshot with zIndex 1`] data-padded="true" data-shape="rectangle" data-size="40" + id="1" role="menuitemcheckbox" tabindex="-1" > @@ -18199,6 +18299,7 @@ exports[` - Enzyme snapshot should match snapshot with zIndex 1`] data-padded="true" data-shape="rectangle" data-size="40" + id="1" role="menuitemcheckbox" tabindex="-1" > @@ -18220,6 +18321,7 @@ exports[` - Enzyme snapshot should match snapshot with zIndex 1`] data-padded="true" data-shape="rectangle" data-size="40" + id="1" role="menuitemcheckbox" tabindex="-1" > @@ -18539,6 +18641,7 @@ exports[` - Enzyme snapshot should match snapshot with zIndex 1`] data-padded={true} data-shape="rectangle" data-size={40} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -18816,6 +18919,7 @@ exports[` - Enzyme snapshot should match snapshot with zIndex 1`] data-padded={true} data-shape="rectangle" data-size={40} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -19093,6 +19197,7 @@ exports[` - Enzyme snapshot should match snapshot with zIndex 1`] data-padded={true} data-shape="rectangle" data-size={40} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -19396,6 +19501,7 @@ exports[` - Enzyme snapshot should match snapshot with zIndex 1`] data-padded={true} data-shape="rectangle" data-size={40} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -19673,6 +19779,7 @@ exports[` - Enzyme snapshot should match snapshot with zIndex 1`] data-padded={true} data-shape="rectangle" data-size={40} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -19950,6 +20057,7 @@ exports[` - Enzyme snapshot should match snapshot with zIndex 1`] data-padded={true} data-shape="rectangle" data-size={40} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} diff --git a/src/components/SpaceListItem/SpaceListItem.unit.test.tsx b/src/components/SpaceListItem/SpaceListItem.unit.test.tsx index 9b649a6a29..184ef64ade 100644 --- a/src/components/SpaceListItem/SpaceListItem.unit.test.tsx +++ b/src/components/SpaceListItem/SpaceListItem.unit.test.tsx @@ -10,6 +10,12 @@ import ListItemBase from '../ListItemBase'; import * as ListContext from '../List/List.utils'; import DividerDot from '../DividerDot'; +jest.mock('uuid', () => { + return { + v4: () => '1', + }; +}); + describe('', () => { beforeEach(() => { jest diff --git a/src/components/SpaceListItem/SpaceListItem.unit.test.tsx.snap b/src/components/SpaceListItem/SpaceListItem.unit.test.tsx.snap index 596d98aa9f..6be4898796 100644 --- a/src/components/SpaceListItem/SpaceListItem.unit.test.tsx.snap +++ b/src/components/SpaceListItem/SpaceListItem.unit.test.tsx.snap @@ -28,6 +28,7 @@ exports[` snapshot checks divider dot position in compact mode data-padded={false} data-shape="isPilled" data-size={32} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -187,6 +188,7 @@ exports[` snapshot should match snapshot 1`] = ` data-padded={false} data-shape="isPilled" data-size={50} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -292,6 +294,7 @@ exports[` snapshot should match snapshot with action 1`] = ` data-padded={false} data-shape="isPilled" data-size={50} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -402,6 +405,7 @@ exports[` snapshot should match snapshot with className 1`] = ` data-padded={false} data-shape="isPilled" data-size={50} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -503,6 +507,7 @@ exports[` snapshot should match snapshot with firstLine 1`] = ` data-padded={false} data-shape="isPilled" data-size={50} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -710,6 +715,7 @@ exports[` snapshot should match snapshot with isAlert 1`] = ` data-padded={false} data-shape="isPilled" data-size={50} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -848,6 +854,7 @@ exports[` snapshot should match snapshot with isAlertMuted 1`] data-padded={false} data-shape="isPilled" data-size={50} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -986,6 +993,7 @@ exports[` snapshot should match snapshot with isDisabled 1`] = data-padded={false} data-shape="isPilled" data-size={50} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -1087,6 +1095,7 @@ exports[` snapshot should match snapshot with isEnterRoom 1`] = data-padded={false} data-shape="isPilled" data-size={50} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -1225,6 +1234,7 @@ exports[` snapshot should match snapshot with isError 1`] = ` data-padded={false} data-shape="isPilled" data-size={50} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -1363,6 +1373,7 @@ exports[` snapshot should match snapshot with isMention 1`] = ` data-padded={false} data-shape="isPilled" data-size={50} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -1501,6 +1512,7 @@ exports[` snapshot should match snapshot with isNewActivity 1`] data-padded={false} data-shape="isPilled" data-size={50} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -1604,6 +1616,7 @@ exports[` snapshot should match snapshot with isSelected 1`] = data-padded={false} data-shape="isPilled" data-size={50} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -1708,6 +1721,7 @@ exports[` snapshot should match snapshot with isSelected and dr data-padded={false} data-shape="isPilled" data-size={50} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -1847,6 +1861,7 @@ exports[` snapshot should match snapshot with isUnread 1`] = ` data-padded={false} data-shape="isPilled" data-size={50} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -1991,6 +2006,7 @@ exports[` snapshot should match snapshot with multiple string s data-padded={false} data-shape="isPilled" data-size={50} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -2180,6 +2196,7 @@ exports[` snapshot should match snapshot with secondLine 1`] = data-padded={false} data-shape="isPilled" data-size={50} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -2334,6 +2351,7 @@ exports[` snapshot should match snapshot with style 1`] = ` data-padded={false} data-shape="isPilled" data-size={50} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} @@ -2440,6 +2458,7 @@ exports[` snapshot should match snapshot with teamColor 1`] = ` data-padded={false} data-shape="isPilled" data-size={50} + id="1" onBlur={[Function]} onClick={[Function]} onDragStart={[Function]} From 9bc0fe7a8d820380a5c282dab56b2abbce010a93 Mon Sep 17 00:00:00 2001 From: Jordan Rowan Date: Thu, 10 Apr 2025 11:10:17 +0100 Subject: [PATCH 2/2] fix(list-item-base): call function in usestate --- src/components/ListItemBase/ListItemBase.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ListItemBase/ListItemBase.tsx b/src/components/ListItemBase/ListItemBase.tsx index 98599c76fd..f22a0c37d8 100644 --- a/src/components/ListItemBase/ListItemBase.tsx +++ b/src/components/ListItemBase/ListItemBase.tsx @@ -55,7 +55,7 @@ const ListItemBase = (props: Props, providedRef: RefOrCallbackRef) => { ...rest } = props; - const [itemId] = useState(rest.id || uuidv4); + const [itemId] = useState(rest.id || uuidv4()); let content: ReactNode, start: ReactNode, middle: ReactNode, end: ReactNode;