@sanity/ui 1.0.0-next.3 → 1.0.0

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

@@ -1,70 +1,74 @@
 import {defineScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
-export default defineScope('components/menu', 'Menu', [
-  {
-    name: 'menu-button',
-    title: 'MenuButton',
-    component: lazy(() => import('./menuButton')),
-  },
-  {
-    name: 'nested-menu-items',
-    title: 'Nested MenuItems',
-    component: lazy(() => import('./nestedMenu')),
-  },
-  {
-    name: 'custom-menu-item',
-    title: 'Custom MenuItem',
-    component: lazy(() => import('./customMenuItem')),
-  },
-  {
-    name: 'groups',
-    title: 'Groups',
-    component: lazy(() => import('./groups')),
-  },
-  {
-    name: 'menu-group-right',
-    title: 'Menu group (right)',
-    component: lazy(() => import('./menuGroupRight')),
-  },
-  {
-    name: 'tones',
-    title: 'Tones',
-    component: lazy(() => import('./tones')),
-  },
-  {
-    name: 'selected-item',
-    title: 'Selected item',
-    component: lazy(() => import('./selectedItem')),
-  },
-  {
-    name: 'closable',
-    title: 'Closeable',
-    component: lazy(() => import('./closableMenuButton')),
-  },
-  {
-    name: 'without-arrow',
-    title: 'Without arrow',
-    component: lazy(() => import('./withoutArrow')),
-  },
-  {
-    name: 'constrained-in-boundary',
-    title: 'Constrained in boundary',
-    component: lazy(() => import('./constrainedInBoundary')),
-  },
-  {
-    name: 'as-component',
-    title: 'As component',
-    component: lazy(() => import('./asComponent')),
-  },
-  {
-    name: 'disable-focus-on-close',
-    title: 'Disable focus on close',
-    component: lazy(() => import('./disableFocusOnClose')),
-  },
-  {
-    name: 'menu-button-with-on-close',
-    title: 'MenuButton with on close',
-    component: lazy(() => import('./onCloseMenuButton')),
-  },
-])
+export default defineScope({
+  name: 'components/menu',
+  title: 'Menu',
+  stories: [
+    {
+      name: 'menu-button',
+      title: 'MenuButton',
+      component: lazy(() => import('./menuButton')),
+    },
+    {
+      name: 'nested-menu-items',
+      title: 'Nested MenuItems',
+      component: lazy(() => import('./nestedMenu')),
+    },
+    {
+      name: 'custom-menu-item',
+      title: 'Custom MenuItem',
+      component: lazy(() => import('./customMenuItem')),
+    },
+    {
+      name: 'groups',
+      title: 'Groups',
+      component: lazy(() => import('./groups')),
+    },
+    {
+      name: 'menu-group-right',
+      title: 'Menu group (right)',
+      component: lazy(() => import('./menuGroupRight')),
+    },
+    {
+      name: 'tones',
+      title: 'Tones',
+      component: lazy(() => import('./tones')),
+    },
+    {
+      name: 'selected-item',
+      title: 'Selected item',
+      component: lazy(() => import('./selectedItem')),
+    },
+    {
+      name: 'closable',
+      title: 'Closeable',
+      component: lazy(() => import('./closableMenuButton')),
+    },
+    {
+      name: 'without-arrow',
+      title: 'Without arrow',
+      component: lazy(() => import('./withoutArrow')),
+    },
+    {
+      name: 'constrained-in-boundary',
+      title: 'Constrained in boundary',
+      component: lazy(() => import('./constrainedInBoundary')),
+    },
+    {
+      name: 'as-component',
+      title: 'As component',
+      component: lazy(() => import('./asComponent')),
+    },
+    {
+      name: 'disable-focus-on-close',
+      title: 'Disable focus on close',
+      component: lazy(() => import('./disableFocusOnClose')),
+    },
+    {
+      name: 'menu-button-with-on-close',
+      title: 'MenuButton with on close',
+      component: lazy(() => import('./onCloseMenuButton')),
+    },
+  ],
+})

package/src/components/menu/menu.tsx

@@ -1,4 +1,4 @@
-import {forwardRef, memo, useCallback, useEffect, useMemo} from 'react'
+import {forwardRef, useCallback, useEffect, useMemo} from 'react'
 import styled from 'styled-components'
 import {useClickOutside, useForwardedRef, useGlobalKeyDown} from '../../hooks'
 import {Box, Stack} from '../../primitives'
@@ -29,12 +29,10 @@ export interface MenuProps extends ResponsivePaddingProps {
   space?: number | number[]
 }
 
-const Root = memo(
-  styled(Box)({
-    outline: 'none',
-    overflow: 'auto',
-  })
-)
+const Root = styled(Box)`
+  outline: none;
+  overflow: auto;
+`
 
 /**
  * @public

package/src/components/menu/menuButton.tsx

@@ -228,28 +228,30 @@ export const MenuButton = forwardRef(function MenuButton(
     [buttonProp, handleButtonClick, handleButtonKeyDown, id, open, setButtonRef]
   )
 
-  const popoverProps: PopoverProps = useMemo(() => {
-    return {
+  const popoverProps: MenuButtonProps['popover'] = useMemo(
+    () => ({
       boundaryElement: deprecated_boundaryElement,
+      overflow: 'auto',
       placement: deprecated_placement,
       portal: deprecated_portal,
-      radius: deprecated_popoverRadius,
       preventOverflow: deprecated_preventOverflow,
+      radius: deprecated_popoverRadius,
       scheme: deprecated_popoverScheme,
       ...(popover || {}),
-    }
-  }, [
-    deprecated_boundaryElement,
-    deprecated_preventOverflow,
-    deprecated_placement,
-    popover,
-    deprecated_popoverRadius,
-    deprecated_portal,
-    deprecated_popoverScheme,
-  ])
+    }),
+    [
+      deprecated_boundaryElement,
+      deprecated_placement,
+      deprecated_popoverRadius,
+      deprecated_popoverScheme,
+      deprecated_portal,
+      deprecated_preventOverflow,
+      popover,
+    ]
+  )
 
   return (
-    <Popover {...popoverProps} content={menu} data-ui="MenuButton__popover" open={open}>
+    <Popover data-ui="MenuButton__popover" {...popoverProps} content={menu} open={open}>
       {button || <></>}
     </Popover>
   )

package/src/components/menu/menuDivider.ts

@@ -1,14 +1,12 @@
-import {memo} from 'react'
-import styled from 'styled-components'
+import styled, {StyledComponent} from 'styled-components'
+import {Theme} from '../../theme'
 
 /**
  * @public
  */
-export const MenuDivider = memo(
-  styled.hr({
-    height: '1px',
-    border: 0,
-    background: 'var(--card-hairline-soft-color)',
-    margin: 0,
-  })
-)
+export const MenuDivider: StyledComponent<'hr', Theme> = styled.hr`
+  height: 1px;
+  border: 0;
+  background: var(--card-hairline-soft-color);
+  margin: 0;
+`

package/src/components/skeleton/__workshop__/index.ts

@@ -1,7 +1,11 @@
 import {defineScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
-export default defineScope('components/skeleton', 'Skeleton', [
-  {name: 'skeleton', title: 'Skeleton', component: lazy(() => import('./skeleton'))},
-  {name: 'skeleton-delay', title: 'Skeleton delay', component: lazy(() => import('./delay'))},
-])
+export default defineScope({
+  name: 'components/skeleton',
+  title: 'Skeleton',
+  stories: [
+    {name: 'skeleton', title: 'Skeleton', component: lazy(() => import('./skeleton'))},
+    {name: 'skeleton-delay', title: 'Skeleton delay', component: lazy(() => import('./delay'))},
+  ],
+})

package/src/components/skeleton/skeleton.tsx

@@ -1,4 +1,4 @@
-import {forwardRef, memo, useEffect, useState} from 'react'
+import {forwardRef, useEffect, useState} from 'react'
 import styled from 'styled-components'
 import {useArrayProp} from '../../hooks'
 import {Box} from '../../primitives'
@@ -6,11 +6,9 @@ import {BoxProps, ResponsiveRadiusProps} from '../../primitives'
 import {responsiveRadiusStyle, ResponsiveRadiusStyleProps} from '../../styles/internal'
 import {skeletonStyle} from './styles'
 
-const Root = memo(
-  styled(Box)<{$animated: boolean; $visible: boolean} & ResponsiveRadiusStyleProps>(
-    responsiveRadiusStyle,
-    skeletonStyle
-  )
+const Root = styled(Box)<{$animated: boolean; $visible: boolean} & ResponsiveRadiusStyleProps>(
+  responsiveRadiusStyle,
+  skeletonStyle
 )
 
 /**

package/src/components/skeleton/styles.ts

@@ -1,13 +1,13 @@
 import {css, keyframes} from 'styled-components'
 
-const keyframe = keyframes({
-  '0%': {
-    backgroundPosition: '100%',
-  },
-  '100%': {
-    backgroundPosition: '-100%',
-  },
-})
+const keyframe = keyframes`
+  0% {
+    background-position: 100%;
+  }
+  100% {
+    background-position: -100%;
+  }
+`
 
 const animation = css`
   background-image: linear-gradient(
@@ -37,7 +37,11 @@ export const skeletonStyle = css<{$animated: boolean; $visible: boolean}>`
 
   @media screen and (prefers-reduced-motion: no-preference) {
     ${({$animated}) =>
-      $animated ? animation : {backgroundColor: 'var(--card-skeleton-color-from)'}}
+      $animated
+        ? animation
+        : css`
+            background-color: var(--card-skeleton-color-from);
+          `}
   }
 
   @media screen and (prefers-reduced-motion: reduce) {

package/src/components/skeleton/textSkeleton.tsx

@@ -1,26 +1,24 @@
-import {forwardRef, memo} from 'react'
+import {forwardRef} from 'react'
 import styled from 'styled-components'
 import {useArrayProp} from '../../hooks'
 import {_responsive} from '../../styles'
 import {Theme, ThemeFontKey} from '../../theme'
 import {Skeleton, SkeletonProps} from './skeleton'
 
-const Root = memo(
-  styled(Skeleton)<{$size: number[]; $style: ThemeFontKey}>(
-    ({$size, $style, theme}: {$size: number[]; $style: ThemeFontKey; theme: Theme}) => {
-      const {media} = theme.sanity
-      const font = theme.sanity.fonts[$style]
+const Root = styled(Skeleton)<{$size: number[]; $style: ThemeFontKey}>(
+  ({$size, $style, theme}: {$size: number[]; $style: ThemeFontKey; theme: Theme}) => {
+    const {media} = theme.sanity
+    const font = theme.sanity.fonts[$style]
 
-      const styles = _responsive(media, $size, (sizeIndex) => {
-        const fontSize = font.sizes[sizeIndex]
-        const capHeight = fontSize.lineHeight - fontSize.ascenderHeight - fontSize.descenderHeight
+    const styles = _responsive(media, $size, (sizeIndex) => {
+      const fontSize = font.sizes[sizeIndex]
+      const capHeight = fontSize.lineHeight - fontSize.ascenderHeight - fontSize.descenderHeight
 
-        return {height: capHeight}
-      })
+      return {height: capHeight}
+    })
 
-      return styles
-    }
-  )
+    return styles
+  }
 )
 
 /**

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

@@ -1,6 +1,14 @@
 import {defineScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
-export default defineScope('components/tab', 'Tab', [
-  {name: 'example', title: 'Example', component: lazy(() => import('./example'))},
-])
+export default defineScope({
+  name: 'components/tab',
+  title: 'Tab',
+  stories: [
+    {
+      name: 'example',
+      title: 'Example',
+      component: lazy(() => import('./example')),
+    },
+  ],
+})

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

@@ -1,7 +1,19 @@
 import {defineScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
-export default defineScope('components/toast', 'Toast', [
-  {name: 'toast', title: 'Toast', component: lazy(() => import('./toast'))},
-  {name: 'hook', title: 'Hook', component: lazy(() => import('./hook'))},
-])
+export default defineScope({
+  name: 'components/toast',
+  title: 'Toast',
+  stories: [
+    {
+      name: 'toast',
+      title: 'Toast',
+      component: lazy(() => import('./toast')),
+    },
+    {
+      name: 'hook',
+      title: 'Hook',
+      component: lazy(() => import('./hook')),
+    },
+  ],
+})

package/src/components/toast/toast.tsx

@@ -1,5 +1,4 @@
 import {CloseIcon} from '@sanity/icons'
-import {memo} from 'react'
 import styled from 'styled-components'
 import {Box, Button, Card, Flex, Stack, Text} from '../../primitives'
 import {ThemeColorToneKey} from '../../theme'
@@ -29,17 +28,13 @@ const ROLES = {
   info: 'alert',
 }
 
-const Root = memo(
-  styled(Card)({
-    pointerEvents: 'all',
-  })
-)
+const Root = styled(Card)`
+  pointer-events: all;
+`
 
-const TextBox = memo(
-  styled(Flex)({
-    overflowX: 'auto',
-  })
-)
+const TextBox = styled(Flex)`
+  overflow-x: auto;
+`
 
 /**
  * @public

package/src/components/toast/toastProvider.tsx

@@ -1,5 +1,5 @@
 import {AnimatePresence, motion} from 'framer-motion'
-import {memo, useCallback, useEffect, useMemo, useRef, useState} from 'react'
+import {useCallback, useEffect, useMemo, useRef, useState} from 'react'
 import styled from 'styled-components'
 import {Box} from '../../primitives'
 import {Layer} from '../../utils'
@@ -26,27 +26,23 @@ export interface ToastProviderProps {
   zOffset?: number | number[]
 }
 
-const Root = memo(
-  styled(Layer)({
-    position: 'fixed',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    pointerEvents: 'none',
-  })
-)
-
-const ToastContainer = memo(
-  styled.div({
-    boxSizing: 'border-box',
-    position: 'absolute',
-    right: 0,
-    bottom: 0,
-    maxWidth: '420px',
-    width: '100%',
-  })
-)
+const Root = styled(Layer)`
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+`
+
+const ToastContainer = styled.div`
+  box-sizing: border-box;
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  max-width: 420px;
+  width: 100%;
+`
 
 let toastId = 0
 

package/src/components/tree/__workshop__/basic.perf.ts

@@ -1,10 +1,6 @@
-import {PerfTestProps, PerfTestRunFn} from '@sanity/ui-workshop'
+import {PerfTestProps, PerfTestRunFn} from '@sanity/ui-workshop/plugin-perf'
 import {findByTestId, fireEvent} from '@testing-library/dom'
 
-// // function delay(ms: number) {
-// //   return new Promise((resolve) => setTimeout(resolve, ms))
-// // }
-
 function test<ElementType = unknown>(
   title: string,
   run: PerfTestRunFn<ElementType>
@@ -12,17 +8,8 @@ function test<ElementType = unknown>(
   return {name: title, run}
 }
 
-// export const toggleTreeGroupsTest = perfTest(
-//   'Toggle tree groups',
-//   async ({target}: {target: HTMLDivElement}) => {
-
-//   }
-// )
-
 export const perfTests = [
   test('Toggle tree groups', async ({target}: {target: HTMLDivElement}) => {
-    // await delay(50)
-
     const apples = await findByTestId(target, 'apples')
     const oranges = await findByTestId(target, 'oranges')
 

package/src/components/tree/__workshop__/basic.tsx

@@ -1,6 +1,6 @@
 import {LinkIcon} from '@sanity/icons'
 import {Box, Tree, TreeItem} from '@sanity/ui'
-import {usePerfTest} from '@sanity/ui-workshop'
+import {usePerfTest} from '@sanity/ui-workshop/plugin-perf'
 import {useCallback, useState} from 'react'
 import {perfTests} from './basic.perf'
 

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

@@ -1,11 +1,15 @@
 import {defineScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
-export default defineScope('components/tree', 'Tree', [
-  {
-    name: 'basic',
-    title: 'Basic',
-    component: lazy(() => import('./basic')),
-    // options: {perfTests: () => import('./basic.perf')},
-  },
-])
+export default defineScope({
+  name: 'components/tree',
+  title: 'Tree',
+  stories: [
+    {
+      name: 'basic',
+      title: 'Basic',
+      component: lazy(() => import('./basic')),
+      // options: {perfTests: () => import('./basic.perf')},
+    },
+  ],
+})