@sanity/ui 4.0.0-static.3 → 4.0.0-static.30

package/src/core/components/menu/{menu.tsx → Menu.tsx}

@@ -4,11 +4,11 @@ import {useCallback, useEffect, useImperativeHandle, useMemo, useRef} from 'reac
 
 import {useClickOutsideEvent} from '../../hooks/useClickOutsideEvent'
 import {useGlobalKeyDown} from '../../hooks/useGlobalKeyDown'
-import {Box} from '../../primitives/box/box'
+import {Box} from '../../primitives/box/Box'
 import {useLayer} from '../../primitives/layer/useLayer'
-import {Stack} from '../../primitives/stack/stack'
+import {Stack} from '../../primitives/stack/Stack'
 import type {ComponentType, Props} from '../../types'
-import {MenuContext, type MenuContextValue} from './menuContext'
+import {MenuContext, type MenuContextValue} from './MenuContext'
 import {useMenuController} from './useMenuController'
 
 /** @public */
@@ -19,7 +19,7 @@ export type MenuOwnProps = PaddingStyleProps & {
   'gap'?: ResponsiveProp<Space>
   'onClickOutside'?: (event: MouseEvent) => void
   'onEscape'?: () => void
-  'onItemClick'?: () => void
+  'onItemClick'?: (event: React.MouseEvent<HTMLButtonElement>) => void
   'onItemSelect'?: (index: number) => void
   'originElement'?: HTMLElement | null
   'registerElement'?: (el: HTMLElement) => () => void
@@ -139,10 +139,6 @@ export function Menu<E extends MenuElementType = typeof DEFAULT_MENU_ELEMENT>(
       onItemMouseEnter: handleItemMouseEnter,
       onItemMouseLeave: handleItemMouseLeave,
       registerElement,
-
-      // deprecated
-      onMouseEnter: handleItemMouseEnter,
-      onMouseLeave: handleItemMouseLeave,
     }),
     [
       activeElement,

package/src/core/components/menu/{menuButton.tsx → MenuButton.tsx}

@@ -13,10 +13,10 @@ import {
   useState,
 } from 'react'
 
-import type {ButtonProps} from '../../primitives/button/button'
-import {Popover, type PopoverProps} from '../../primitives/popover/popover'
+import type {ButtonProps} from '../../primitives/button/Button'
+import {Popover, type PopoverProps} from '../../primitives/popover/Popover'
 import type {Props} from '../../types'
-import type {MenuProps} from './menu'
+import type {MenuProps} from './Menu'
 
 /** @public */
 export type MenuButtonProps = {
@@ -29,7 +29,7 @@ export type MenuButtonProps = {
   menu?: ReactElement
   onClose?: () => void
   onOpen?: () => void
-  popover?: Omit<PopoverProps, 'content' | 'open'>
+  popover?: Omit<PopoverProps<'div'>, 'content' | 'open'>
 
   ref?: ForwardedRef<HTMLButtonElement | null>
 }
@@ -159,11 +159,16 @@ export function MenuButton(props: MenuButtonProps): React.JSX.Element {
     [menuElements],
   )
 
-  const handleItemClick = useCallback(() => {
-    setOpen(false)
-    if (disableRestoreFocusOnClose) return
-    if (buttonElement) buttonElement.focus()
-  }, [buttonElement, disableRestoreFocusOnClose])
+  const handleItemClick = useCallback(
+    (e: ReactMouseEvent<HTMLButtonElement>) => {
+      if (e.defaultPrevented) return
+
+      setOpen(false)
+      if (disableRestoreFocusOnClose) return
+      if (buttonElement) buttonElement.focus()
+    },
+    [buttonElement, disableRestoreFocusOnClose],
+  )
 
   const registerElement = useCallback((el: HTMLElement) => {
     setChildMenuElements((els) => els.concat([el]))

package/src/core/components/menu/{menuContext.ts → MenuContext.ts}

@@ -9,7 +9,7 @@ export interface MenuContextValue {
   mount: (element: HTMLElement | null, selected?: boolean) => () => void
   onClickOutside?: (event: MouseEvent) => void
   onEscape?: () => void
-  onItemClick?: () => void
+  onItemClick?: (event: ReactMouseEvent<HTMLButtonElement>) => void
   onItemMouseEnter?: (event: ReactMouseEvent<HTMLElement>) => void
   onItemMouseLeave?: (event: ReactMouseEvent<HTMLElement>) => void
   registerElement?: (el: HTMLElement) => () => void

package/src/core/components/menu/{menuGroup.tsx → MenuGroup.tsx}

@@ -13,13 +13,13 @@ import {
 } from 'react'
 import {isValidElementType} from 'react-is'
 
-import {Box} from '../../primitives/box/box'
-import {Flex} from '../../primitives/flex/flex'
-import {Popover, type PopoverProps} from '../../primitives/popover/popover'
-import {Selectable} from '../../primitives/selectable/selectable'
-import {Text} from '../../primitives/text/text'
+import {Box} from '../../primitives/box/Box'
+import {Flex} from '../../primitives/flex/Flex'
+import {Popover, type PopoverProps} from '../../primitives/popover/Popover'
+import {Selectable} from '../../primitives/selectable/Selectable'
+import {Text} from '../../primitives/text/Text'
 import type {ComponentType, Props} from '../../types'
-import {DEFAULT_MENU_ELEMENT, Menu, type MenuProps} from './menu'
+import {DEFAULT_MENU_ELEMENT, Menu, type MenuProps} from './Menu'
 import {useMenu} from './useMenu'
 
 /** @public */
@@ -43,7 +43,7 @@ export type MenuGroupOwnProps = RadiusStyleProps & {
     | 'onBlurCapture'
   >
   padding?: ResponsiveProp<Space>
-  popover?: Omit<PopoverProps, 'content' | 'open'>
+  popover?: Omit<PopoverProps<'div'>, 'content' | 'open'>
   text?: ReactNode
   tone?: ElementTone
 }
@@ -127,10 +127,13 @@ export function MenuGroup<E extends MenuGroupElementType = typeof DEFAULT_MENU_G
     [onClick],
   )
 
-  const handleChildItemClick = useCallback(() => {
-    setOpen(false)
-    onItemClick?.()
-  }, [onItemClick])
+  const handleChildItemClick = useCallback(
+    (e: MouseEvent<HTMLButtonElement>) => {
+      setOpen(false)
+      onItemClick?.(e)
+    },
+    [onItemClick],
+  )
 
   const handleMenuMouseEnter = useCallback(() => setWithinMenu(true), [])
 

package/src/core/components/menu/{menuItem.tsx → MenuItem.tsx}

@@ -19,12 +19,12 @@ import {
 } from 'react'
 import {isValidElementType} from 'react-is'
 
-import {Box} from '../../primitives/box/box'
-import {Flex} from '../../primitives/flex/flex'
-import {Selectable} from '../../primitives/selectable/selectable'
-import {Text} from '../../primitives/text/text'
+import {Box} from '../../primitives/box/Box'
+import {Flex} from '../../primitives/flex/Flex'
+import {Selectable} from '../../primitives/selectable/Selectable'
+import {Text} from '../../primitives/text/Text'
 import type {ComponentType, Props} from '../../types'
-import {Hotkeys} from '../hotkeys/hotkeys'
+import {Hotkeys} from '../hotkeys/Hotkeys'
 import {useMenu} from './useMenu'
 
 /** @public */
@@ -104,7 +104,7 @@ export function MenuItem<E extends MenuItemElementType = typeof DEFAULT_MENU_ITE
     (event: MouseEvent<HTMLButtonElement>) => {
       if (disabled) return
       if (onClick) onClick(event)
-      if (onItemClick) onItemClick()
+      if (onItemClick) onItemClick(event)
     },
     [disabled, onClick, onItemClick],
   )
@@ -132,9 +132,6 @@ export function MenuItem<E extends MenuItemElementType = typeof DEFAULT_MENU_ITE
       data-ui="MenuItem"
       {...rest}
       as={as}
-      data-pressed={pressed ? '' : undefined}
-      data-selected={active ? '' : undefined}
-      data-disabled={disabled ? '' : undefined}
       radius={radius}
       disabled={disabled}
       onClick={handleClick}
@@ -142,6 +139,7 @@ export function MenuItem<E extends MenuItemElementType = typeof DEFAULT_MENU_ITE
       onMouseLeave={onItemMouseLeave}
       ref={setRef}
       role={role}
+      selected={active}
       tabIndex={-1}
       tone={tone}
       type={as === 'button' ? 'button' : undefined}

package/src/core/components/menu/__workshop__/DataProps.tsx

@@ -0,0 +1,27 @@
+import {Menu, MenuItem, Text} from '@sanity/ui'
+import type {ElementTone} from '@sanity/ui/theme'
+import {useSelect} from '@sanity/ui-workshop'
+
+import {WORKSHOP_BUTTON_TONE_OPTIONS} from '$workshop'
+
+export default function DataPropsStory(): React.JSX.Element {
+  // @ts-expect-error - TODO: fix this
+  const tone = useSelect('Tone', WORKSHOP_BUTTON_TONE_OPTIONS, 'default') as ElementTone | undefined
+
+  return (
+    <Menu gap={4} padding={4}>
+      <MenuItem data-enabled="" padding={3} tone={tone}>
+        <Text>MenuItem</Text>
+      </MenuItem>
+      <MenuItem data-hovered="" padding={3} tone={tone}>
+        <Text>MenuItem</Text>
+      </MenuItem>
+      <MenuItem data-pressed="" padding={3} tone={tone}>
+        <Text>MenuItem</Text>
+      </MenuItem>
+      <MenuItem data-selected="" padding={3} tone={tone}>
+        <Text>MenuItem</Text>
+      </MenuItem>
+    </Menu>
+  )
+}

package/src/core/components/menu/__workshop__/{menuButton.tsx → MenuButton.tsx}

@@ -17,6 +17,7 @@ import {useMemo} from 'react'
 import {WORKSHOP_CARD_TONE_OPTIONS} from '$workshop'
 
 export default function MenuButtonStory(): React.JSX.Element {
+  // @ts-expect-error - TODO: fix this
   const layoutTone = useSelect('Layout tone', WORKSHOP_CARD_TONE_OPTIONS, 'default')
   const portal = useBoolean('Portal', false)
 
@@ -29,7 +30,11 @@ export default function MenuButtonStory(): React.JSX.Element {
   )
 
   return (
-    <Card height="fill" tone={layoutTone}>
+    <Card
+      height="fill"
+      // @ts-expect-error - TODO: fix this
+      tone={layoutTone}
+    >
       <Box padding={[4, 5, 6]}>
         <Grid gridTemplateColumns={3} gap={2}>
           <Button id="prev-button" mode="ghost" text="Prev" />

package/src/core/components/menu/__workshop__/{tones.tsx → Tones.tsx}

@@ -7,12 +7,18 @@ import {WORKSHOP_CARD_TONE_OPTIONS} from '$workshop'
 
 export default function TonesStory(): React.JSX.Element {
   const disabled = useBoolean('Disabled', false)
+  // @ts-expect-error - TODO: fix this
   const parentTone = useSelect('Parent tone', WORKSHOP_CARD_TONE_OPTIONS, 'default')
 
   return (
     <LayerProvider>
       <Box padding={[4, 5, 6]}>
-        <Card radius={3} shadow={3} tone={parentTone}>
+        <Card
+          radius={3}
+          shadow={3}
+          // @ts-expect-error - TODO: fix this
+          tone={parentTone}
+        >
           <Menu>
             {ELEMENT_TONES.map((tone) => (
               <MenuItem disabled={disabled} icon={CubeIcon} key={tone} text={tone} tone={tone} />

package/src/core/components/menu/__workshop__/index.ts

@@ -8,82 +8,87 @@ const scope: WorkshopScope = {
     {
       name: 'menu-button',
       title: 'MenuButton',
-      component: lazy(() => import('./menuButton')),
+      component: lazy(() => import('./MenuButton')),
     },
     {
       name: 'nested-menu-items',
       title: 'Nested MenuItems',
-      component: lazy(() => import('./nestedMenu')),
+      component: lazy(() => import('./NestedMenu')),
     },
     {
       name: 'custom-menu-item',
       title: 'Custom MenuItem',
-      component: lazy(() => import('./customMenuItem')),
+      component: lazy(() => import('./CustomMenuItem')),
     },
     {
       name: 'groups',
       title: 'Groups',
-      component: lazy(() => import('./groups')),
+      component: lazy(() => import('./Groups')),
     },
     {
       name: 'menu-group-right',
       title: 'Menu group (right)',
-      component: lazy(() => import('./menuGroupRight')),
+      component: lazy(() => import('./MenuGroupRight')),
     },
     {
       name: 'tones',
       title: 'Tones',
-      component: lazy(() => import('./tones')),
+      component: lazy(() => import('./Tones')),
     },
     {
       name: 'selected-item',
       title: 'Selected item',
-      component: lazy(() => import('./selectedItem')),
+      component: lazy(() => import('./SelectedItem')),
     },
     {
       name: 'closable',
       title: 'Closeable',
-      component: lazy(() => import('./closableMenuButton')),
+      component: lazy(() => import('./ClosableMenuButton')),
     },
     {
       name: 'without-arrow',
       title: 'Without arrow',
-      component: lazy(() => import('./withoutArrow')),
+      component: lazy(() => import('./WithoutArrow')),
     },
     {
       name: 'constrained-in-boundary',
       title: 'Constrained in boundary',
-      component: lazy(() => import('./constrainedInBoundary')),
+      component: lazy(() => import('./ConstrainedInBoundary')),
     },
     {
       name: 'as-component',
       title: 'As component',
-      component: lazy(() => import('./asComponent')),
+      component: lazy(() => import('./AsComponent')),
     },
     {
       name: 'disable-focus-on-close',
       title: 'Disable focus on close',
-      component: lazy(() => import('./disableFocusOnClose')),
+      component: lazy(() => import('./DisableFocusOnClose')),
     },
     {
       name: 'menu-button-with-on-close',
       title: 'MenuButton with on close',
-      component: lazy(() => import('./onCloseMenuButton')),
+      component: lazy(() => import('./OnCloseMenuButton')),
     },
     {
-      name: 'shouldFocus',
+      name: 'should-focus',
       title: 'Menu with shouldFocus',
-      component: lazy(() => import('./shouldFocus')),
+      component: lazy(() => import('./ShouldFocus')),
     },
     {
       name: 'avatar',
       title: 'Avatar menu',
-      component: lazy(() => import('./avatarMenu')),
+      component: lazy(() => import('./AvatarMenu')),
     },
     {
       name: 'custom-selected-state',
       title: 'Custom selected state',
-      component: lazy(() => import('./customSelectedState')),
+      component: lazy(() => import('./CustomSelectedState')),
+    },
+    {
+      name: 'data-props',
+      title: 'Data props',
+      component: lazy(() => import('./DataProps')),
     },
   ],
 }

package/src/core/components/menu/useMenu.ts

@@ -1,10 +1,10 @@
-import {useContext} from 'react'
+import {use} from 'react'
 
 import {isRecord} from '../../lib/isRecord'
-import {MenuContext, type MenuContextValue} from './menuContext'
+import {MenuContext, type MenuContextValue} from './MenuContext'
 
 export function useMenu(): MenuContextValue {
-  const value = useContext(MenuContext)
+  const value = use(MenuContext)
 
   if (!value) {
     throw new Error('useMenu(): missing context value')

package/src/core/components/tab/{tab.tsx → Tab.tsx}

@@ -10,7 +10,7 @@ import {
   useRef,
 } from 'react'
 
-import {Button} from '../../primitives/button/button'
+import {Button} from '../../primitives/button/Button'
 import type {ComponentType, Props} from '../../types'
 
 /** @public */

package/src/core/components/tab/{tabList.tsx → TabList.tsx}

@@ -7,9 +7,9 @@ import {
   useState,
 } from 'react'
 
-import {Flex, type FlexOwnProps} from '../../primitives/flex/flex'
+import {Flex, type FlexOwnProps} from '../../primitives/flex/Flex'
 import type {ComponentType, Props} from '../../types'
-import type {TabProps} from './tab'
+import type {TabProps} from './Tab'
 
 /** @public */
 export const DEFAULT_TAB_LIST_ELEMENT = 'div'

package/src/core/components/tab/{tabPanel.tsx → TabPanel.tsx}

@@ -1,4 +1,4 @@
-import {Box, type BoxOwnProps} from '../../primitives/box/box'
+import {Box, type BoxOwnProps} from '../../primitives/box/Box'
 import type {ComponentType, Props} from '../../types'
 
 /** @public */

package/src/core/components/tab/__workshop__/index.ts

@@ -8,7 +8,7 @@ const scope: WorkshopScope = {
     {
       name: 'example',
       title: 'Example',
-      component: lazy(() => import('./example')),
+      component: lazy(() => import('./Example')),
     },
   ],
 }

package/src/core/components/toast/{toast.test.tsx → Toast.test.tsx}

@@ -2,7 +2,7 @@ import {describe, expect, it, vi} from 'vitest'
 
 import {render} from '$test/utils'
 
-import {ToastContext} from './toastContext'
+import {ToastContext} from './ToastContext'
 import type {ToastContextValue} from './types'
 import {useToast} from './useToast'
 

package/src/core/components/toast/{toast.tsx → Toast.tsx}

@@ -4,12 +4,12 @@ import {motion, type Variant, type Variants} from 'framer-motion'
 import {type ReactNode} from 'react'
 
 import {usePrefersReducedMotion} from '../../hooks/usePrefersReducedMotion'
-import {Box} from '../../primitives/box/box'
-import {Button} from '../../primitives/button/button'
-import {Card} from '../../primitives/card/card'
-import {Flex} from '../../primitives/flex/flex'
-import {Stack} from '../../primitives/stack/stack'
-import {Text} from '../../primitives/text/text'
+import {Box} from '../../primitives/box/Box'
+import {Button} from '../../primitives/button/Button'
+import {Card} from '../../primitives/card/Card'
+import {Flex} from '../../primitives/flex/Flex'
+import {Stack} from '../../primitives/stack/Stack'
+import {Text} from '../../primitives/text/Text'
 import type {ComponentType, Props} from '../../types'
 
 /** @internal */

package/src/core/components/toast/{toastLayer.tsx → ToastLayer.tsx}

@@ -1,6 +1,6 @@
 import {type GapStyleProps, type PaddingStyleProps, toastLayer} from '@sanity/ui/css'
 
-import {Grid} from '../../primitives/grid/grid'
+import {Grid} from '../../primitives/grid/Grid'
 import {useLayer} from '../../primitives/layer/useLayer'
 import type {ComponentType, Props} from '../../types'
 

package/src/core/components/toast/{toastProvider.tsx → ToastProvider.tsx}

@@ -3,10 +3,10 @@ import {AnimatePresence} from 'framer-motion'
 import {startTransition, useMemo, useState} from 'react'
 
 import {useMounted} from '../../hooks/useMounted'
-import {LayerProvider} from '../../primitives/layer/layerProvider'
-import {Toast} from './toast'
-import {ToastContext} from './toastContext'
-import {ToastLayer, type ToastLayerProps} from './toastLayer'
+import {LayerProvider} from '../../primitives/layer/LayerProvider'
+import {Toast} from './Toast'
+import {ToastContext} from './ToastContext'
+import {ToastLayer, type ToastLayerProps} from './ToastLayer'
 import {generateToastId} from './toastState'
 import type {ToastContextValue, ToastParams} from './types'
 

package/src/core/components/toast/__workshop__/{toast.tsx → Toast.tsx}

@@ -6,6 +6,7 @@ import {WORKSHOP_TOAST_STATUS_OPTIONS} from '$workshop'
 export default function ToastStory(): React.JSX.Element {
   const closable = useBoolean('Closable', false)
   const title = useString('Title', 'Toast title')
+  // @ts-expect-error - TODO: fix this
   const status = useSelect('Status', WORKSHOP_TOAST_STATUS_OPTIONS)
   const description = useText('Description')
   const handleClose = useAction('onClose')
@@ -17,6 +18,7 @@ export default function ToastStory(): React.JSX.Element {
           closable={closable}
           description={description}
           onClose={handleClose}
+          // @ts-expect-error - TODO: fix this
           status={status}
           title={title}
         />

package/src/core/components/toast/__workshop__/index.ts

@@ -8,12 +8,12 @@ const scope: WorkshopScope = {
     {
       name: 'toast',
       title: 'Toast',
-      component: lazy(() => import('./toast')),
+      component: lazy(() => import('./Toast')),
     },
     {
       name: 'hook',
       title: 'Hook',
-      component: lazy(() => import('./hook')),
+      component: lazy(() => import('./Hook')),
     },
   ],
 }

package/src/core/components/toast/useToast.ts

@@ -1,12 +1,12 @@
-import {useContext} from 'react'
+import {use} from 'react'
 
 import {isRecord} from '../../lib/isRecord'
-import {ToastContext} from './toastContext'
+import {ToastContext} from './ToastContext'
 import type {ToastContextValue} from './types'
 
 /** @public */
 export function useToast(): ToastContextValue {
-  const value = useContext(ToastContext)
+  const value = use(ToastContext)
 
   if (!value) {
     throw new Error('useToast(): missing context value')

package/src/core/components/tree/{tree.tsx → Tree.tsx}

@@ -11,10 +11,10 @@ import {
   useState,
 } from 'react'
 
-import {Stack} from '../../primitives/stack/stack'
+import {Stack} from '../../primitives/stack/Stack'
 import type {ComponentType, Props} from '../../types'
 import {_findNextItemElement, _findPrevItemElement, _focusItemElement} from './helpers'
-import {TreeContext} from './treeContext'
+import {TreeContext} from './TreeContext'
 import type {TreeContextValue, TreeState} from './types'
 
 /** @beta */

package/src/core/components/tree/{treeGroup.tsx → TreeGroup.tsx}

@@ -1,4 +1,4 @@
-import {Stack} from '../../primitives/stack/stack'
+import {Stack} from '../../primitives/stack/Stack'
 import type {ComponentType, Props} from '../../types'
 import {useTree} from './useTree'
 

package/src/core/components/tree/{treeItem.tsx → TreeItem.tsx}

@@ -15,14 +15,14 @@ import {
   useRef,
 } from 'react'
 
-import {Box, type BoxProps} from '../../primitives/box/box'
-import type {CardOwnProps} from '../../primitives/card/card'
-import {Flex} from '../../primitives/flex/flex'
-import {Selectable, type SelectableElementType} from '../../primitives/selectable/selectable'
-import {Text} from '../../primitives/text/text'
+import {Box, type BoxProps} from '../../primitives/box/Box'
+import type {CardOwnProps} from '../../primitives/card/Card'
+import {Flex} from '../../primitives/flex/Flex'
+import {Selectable, type SelectableElementType} from '../../primitives/selectable/Selectable'
+import {Text} from '../../primitives/text/Text'
 import type {ComponentType, Props} from '../../types'
-import {TreeContext} from './treeContext'
-import {TreeGroup} from './treeGroup'
+import {TreeContext} from './TreeContext'
+import {TreeGroup} from './TreeGroup'
 import {useTree} from './useTree'
 
 /** @beta */

package/src/core/components/tree/__workshop__/index.ts

@@ -8,14 +8,14 @@ const scope: WorkshopScope = {
     {
       name: 'basic',
       title: 'Basic',
-      component: lazy(() => import('./basic')),
-      // options: {perfTests: () => import('./basic.perf')},
+      component: lazy(() => import('./Basic')),
+      // options: {perfTests: () => import('./Basic.perf')},
     },
     {
       name: 'tab',
       title: 'Tab',
-      component: lazy(() => import('./tabFromElement')),
-      // options: {perfTests: () => import('./basic.perf')},
+      component: lazy(() => import('./TabFromElement')),
+      // options: {perfTests: () => import('./Basic.perf')},
     },
   ],
 }

package/src/core/components/tree/useTree.ts

@@ -1,13 +1,13 @@
-import {useContext} from 'react'
+import {use} from 'react'
 
-import {TreeContext} from './treeContext'
+import {TreeContext} from './TreeContext'
 import type {TreeContextValue} from './types'
 
 /**
  * @beta
  */
 export function useTree(): TreeContextValue {
-  const tree = useContext(TreeContext)
+  const tree = use(TreeContext)
 
   if (!tree) {
     throw new Error('Tree: missing context value')

package/src/core/components/virtualList/{virtualList.tsx → VirtualList.tsx}

@@ -12,7 +12,7 @@ import {
 
 import {_isScrollable} from '../../helpers/scroll'
 import {_ResizeObserver} from '../../observers/resize'
-import {Box} from '../../primitives/box/box'
+import {Box} from '../../primitives/box/Box'
 import type {ComponentType, Props} from '../../types'
 
 /** @beta */

package/src/core/components/virtualList/__workshop__/index.ts

@@ -8,22 +8,22 @@ const scope: WorkshopScope = {
     {
       name: 'window-scroll',
       title: 'Window scroll',
-      component: lazy(() => import('./windowScrolll')),
+      component: lazy(() => import('./WindowScrolll')),
     },
     {
       name: 'element-scroll',
       title: 'Element scroll',
-      component: lazy(() => import('./elementScroll')),
+      component: lazy(() => import('./ElementScroll')),
     },
     {
       name: 'infinite-list',
       title: 'Infinite list',
-      component: lazy(() => import('./infiniteList')),
+      component: lazy(() => import('./InfiniteList')),
     },
     {
       name: 'changing-props',
       title: 'Changing props',
-      component: lazy(() => import('./changingProps')),
+      component: lazy(() => import('./ChangingProps')),
     },
   ],
 }