@sanity/ui 3.0.2 → 4.0.0-static.2

package/src/core/components/dialog/__workshop__/activate.tsx

@@ -1,11 +1,18 @@
+import {
+  Button,
+  Dialog,
+  Flex,
+  Layer,
+  LayerProvider,
+  Menu,
+  MenuButton,
+  MenuItem,
+  Stack,
+  Text,
+} from '@sanity/ui'
 import {useState} from 'react'
 
-import {Button, Flex, Stack, Text} from '../../../primitives'
-import {Layer, LayerProvider} from '../../../utils'
-import {Menu, MenuButton, MenuItem} from '../../menu'
-import {Dialog} from '../dialog'
-
-export default function LayeringFocusStory() {
+export default function LayeringFocusStory(): React.JSX.Element {
   const [firstDialogOpen, setFirstDialogOpen] = useState<boolean>(false)
   const [secondDialogOpen, setSecondDialogOpen] = useState<boolean>(false)
   const [thirdDialogOpen, setThirdDialogOpen] = useState<boolean>(false)
@@ -28,7 +35,7 @@ export default function LayeringFocusStory() {
               onActivate={({activeElement}) => activeElement?.focus()}
               onClose={() => setFirstDialogOpen(false)}
             >
-              <Stack space={2} padding={3}>
+              <Stack gap={2} padding={3}>
                 <Button
                   mode="ghost"
                   text="Open dialog 2"
@@ -56,7 +63,7 @@ export default function LayeringFocusStory() {
                   onActivate={({activeElement}) => activeElement?.focus()}
                   onClose={() => setSecondDialogOpen(false)}
                 >
-                  <Stack space={2} padding={3}>
+                  <Stack gap={2} padding={3}>
                     <Button
                       mode="ghost"
                       text="Open dialog 3"
@@ -84,7 +91,7 @@ export default function LayeringFocusStory() {
                       onActivate={({activeElement}) => activeElement?.focus()}
                       onClose={() => setThirdDialogOpen(false)}
                     >
-                      <Stack space={2} padding={3}>
+                      <Stack gap={2} padding={3}>
                         <MenuButton
                           id="menu"
                           button={
@@ -116,7 +123,7 @@ export default function LayeringFocusStory() {
                           onActivate={({activeElement}) => activeElement?.focus()}
                           onClose={() => setFourthDialogOpen(false)}
                         >
-                          <Stack space={2} padding={3}>
+                          <Stack gap={2} padding={3}>
                             <Text>👋</Text>
                           </Stack>
                         </Dialog>

package/src/core/components/dialog/__workshop__/autoFocus.tsx

@@ -1,9 +1,9 @@
 import {Box, Button, Dialog, Text} from '@sanity/ui'
 import {useAction, useBoolean} from '@sanity/ui-workshop'
 
-export default function AutoFocusStory() {
-  const autoFocus = useBoolean('Auto-focus', true, 'Props')
-  const open = useBoolean('Open', false, 'Props')
+export default function AutoFocusStory(): React.JSX.Element {
+  const autoFocus = useBoolean('Auto-focus', true)
+  const open = useBoolean('Open', false)
   const handleClose = useAction('onClose')
 
   if (!open) {

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

@@ -1,7 +1,7 @@
-import {defineScope} from '@sanity/ui-workshop'
+import type {WorkshopScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
-export default defineScope({
+const scope: WorkshopScope = {
   name: 'components/dialog',
   title: 'Dialog',
   stories: [
@@ -16,4 +16,6 @@ export default defineScope({
     {name: 'activate', title: 'Activate', component: lazy(() => import('./activate'))},
     {name: 'wrapped', title: 'Wrapped', component: lazy(() => import('./wrapped'))},
   ],
-})
+}
+
+export default scope

package/src/core/components/dialog/__workshop__/layering.tsx

@@ -1,7 +1,7 @@
 import {Box, Card, Code, Dialog, Layer, LayerProvider, useLayer} from '@sanity/ui'
 import {useAction} from '@sanity/ui-workshop'
 
-export default function LayeringStory() {
+export default function LayeringStory(): React.JSX.Element {
   return (
     <Box padding={[4, 5, 6]}>
       <LayerProvider>

package/src/core/components/dialog/__workshop__/nested.tsx

@@ -1,7 +1,7 @@
 import {Box, Button, Dialog, LayerProvider, Menu, MenuButton, MenuItem} from '@sanity/ui'
 import {useEffect, useRef, useState} from 'react'
 
-export default function NestedStory() {
+export default function NestedStory(): React.JSX.Element {
   const [open1] = useState(true)
   const [open2, setOpen2] = useState(false)
   const [open3, setOpen3] = useState(false)
@@ -20,7 +20,7 @@ export default function NestedStory() {
   return (
     <LayerProvider>
       {open1 && (
-        <Dialog animate cardShadow={1} header="Dialog 1" id="dialog1">
+        <Dialog animate shadow={1} header="Dialog 1" id="dialog1">
           <Box padding={4}>
             <Button onClick={() => setOpen2(true)} ref={dialog2Button} text="Open Dialog 2" />
           </Box>
@@ -28,7 +28,7 @@ export default function NestedStory() {
           {open2 && (
             <Dialog
               animate
-              cardShadow={2}
+              shadow={2}
               header="Dialog 2"
               id="dialog2"
               onClose={() => setOpen2(false)}
@@ -41,7 +41,7 @@ export default function NestedStory() {
               {open3 && (
                 <Dialog
                   animate
-                  cardShadow={4}
+                  shadow={4}
                   header="Dialog 3"
                   id="dialog3"
                   onClose={() => setOpen3(false)}
@@ -51,14 +51,13 @@ export default function NestedStory() {
                     <MenuButton
                       button={<Button text="Test" />}
                       id="menu3"
-                      popover={{animate: true}}
+                      popover={{animate: true, portal: true}}
                       menu={
                         <Menu>
                           <MenuItem text="Test" />
                           <MenuItem text="Test" />
                         </Menu>
                       }
-                      portal
                     />
                   </Box>
                 </Dialog>

package/src/core/components/dialog/__workshop__/onScroll.tsx

@@ -1,8 +1,8 @@
-import {Box, Dialog, LayerProvider, Text} from '@sanity/ui'
+import {Dialog, LayerProvider, Stack, Text} from '@sanity/ui'
 import {useAction} from '@sanity/ui-workshop'
 import {useEffect, useRef} from 'react'
 
-export default function OnScrollStory() {
+export default function OnScrollStory(): React.JSX.Element {
   const ref = useRef<HTMLDivElement | null>(null)
   const handleScroll = useAction('scroll')
 
@@ -19,8 +19,8 @@ export default function OnScrollStory() {
   return (
     <LayerProvider>
       <Dialog contentRef={ref} header="On scroll example" id="on-scroll-example">
-        <Box padding={4}>
-          <Text>
+        <Stack gap={4} padding={4} paddingTop={1}>
+          <Text muted size={1}>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque at nisl at sem tempor
             hendrerit scelerisque ut libero. Maecenas iaculis efficitur lorem, ac faucibus mi
             imperdiet quis. Cras a consectetur erat. Fusce imperdiet, dolor et pellentesque iaculis,
@@ -32,7 +32,19 @@ export default function OnScrollStory() {
             mattis tristique nunc ac lacinia. Vestibulum non pulvinar turpis, posuere consequat
             arcu. Fusce ut urna blandit, finibus nisi a, molestie elit. Nulla sed eleifend mi.
           </Text>
-        </Box>
+
+          <Text muted size={1}>
+            Aliquam quis finibus ex. Fusce semper lorem sed orci tempor gravida. Cras dui urna,
+            congue quis ipsum in, viverra facilisis libero. Vivamus vehicula libero quam, at posuere
+            leo ornare imperdiet. Cras eu neque eu tellus scelerisque iaculis ac id ex. Vestibulum
+            quam enim, lacinia ac ultricies at, molestie ut nisi. Vivamus vitae elit vel ante
+            feugiat iaculis. Pellentesque vel diam volutpat, luctus magna at, laoreet tellus.
+            Aliquam congue id nisi at sollicitudin. In sed nisi libero. Nulla ornare, mauris et
+            pulvinar hendrerit, ligula leo auctor enim, vestibulum laoreet metus nisl a nulla. Sed
+            et interdum sapien. Mauris lacinia interdum nisi quis ultrices. Etiam lobortis, dui
+            semper ornare fringilla, felis lacus feugiat dui, vitae rhoncus tellus tortor ut ipsum.
+          </Text>
+        </Stack>
       </Dialog>
     </LayerProvider>
   )

package/src/core/components/dialog/__workshop__/panes.tsx

@@ -1,12 +1,19 @@
+import {
+  BoundaryElementProvider,
+  Box,
+  Button,
+  Card,
+  Dialog,
+  Flex,
+  Menu,
+  MenuButton,
+  MenuItem,
+  PortalProvider,
+} from '@sanity/ui'
 import {useCallback, useState} from 'react'
 import {styled} from 'styled-components'
 
-import {Box, Button, Card, Flex} from '../../../primitives'
-import {BoundaryElementProvider, PortalProvider} from '../../../utils'
-import {Menu, MenuButton, MenuItem} from '../../menu'
-import {Dialog} from '../dialog'
-
-export default function PanesStory() {
+export default function PanesStory(): React.JSX.Element {
   return (
     <Flex height="fill">
       <Pane id="A" />

package/src/core/components/dialog/__workshop__/position.tsx

@@ -2,16 +2,16 @@ import {ArrowDownIcon, ArrowUpIcon} from '@sanity/icons'
 import {Box, Dialog, LayerProvider, Stack, Text} from '@sanity/ui'
 import {useBoolean, useSelect} from '@sanity/ui-workshop'
 
-import {WORKSHOP_DIALOG_POSITION_OPTIONS} from '../../../__workshop__/constants'
+import {WORKSHOP_DIALOG_POSITION_OPTIONS} from '$workshop'
 
-export default function PositionStory() {
-  const open = useBoolean('Open', true, 'Props')
-  const position = useSelect('Position', WORKSHOP_DIALOG_POSITION_OPTIONS, 'fixed', 'Props')
+export default function PositionStory(): React.JSX.Element {
+  const open = useBoolean('Open', true)
+  const position = useSelect('Position', WORKSHOP_DIALOG_POSITION_OPTIONS)
 
   return (
     <Box padding={4}>
       <Box style={{padding: 'calc(100vh - 100px) 0'}}>
-        <Stack space={3}>
+        <Stack gap={3}>
           <Text align="center">
             <ArrowUpIcon />
           </Text>

package/src/core/components/dialog/__workshop__/props.tsx

@@ -2,13 +2,14 @@ import {Box, Button, Dialog, LayerProvider, Stack, Text} from '@sanity/ui'
 import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
 import {useCallback, useRef, useState} from 'react'
 
-import {WORKSHOP_WIDTH_OPTIONS} from '../../../__workshop__/constants'
+import {WORKSHOP_CONTAINER_WIDTH_OPTIONS} from '$workshop'
 
-export default function PropsStory() {
-  const header = useText('Header', 'Props example', 'Props')
-  const onClickOutside = useBoolean('Close when click outside', false, 'Props') || false
-  const hideCloseButton = useBoolean('Hide close button', false, 'Props') || false
-  const width = useSelect('Width', WORKSHOP_WIDTH_OPTIONS, 0, 'Props')
+export default function PropsStory(): React.JSX.Element {
+  const animate = useBoolean('Animate', false)
+  const header = useText('Header', 'Props example')
+  const onClickOutside = useBoolean('Close when click outside', false)
+  const hideCloseButton = useBoolean('Hide close button', false)
+  const width = useSelect('Width', WORKSHOP_CONTAINER_WIDTH_OPTIONS)
   const [open, setOpen] = useState(false)
   const buttonRef = useRef<HTMLButtonElement | null>(null)
 
@@ -30,6 +31,7 @@ export default function PropsStory() {
         {open && (
           <Dialog
             __unstable_hideCloseButton={hideCloseButton}
+            animate={animate}
             header={header}
             id="dialog"
             onClickOutside={onClickOutside ? handleClose : undefined}
@@ -38,7 +40,7 @@ export default function PropsStory() {
             width={width}
           >
             <Box padding={4}>
-              <Stack space={4}>
+              <Stack gap={4}>
                 <Text>
                   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et orci vitae diam
                   aliquet imperdiet.

package/src/core/components/dialog/__workshop__/provider.tsx

@@ -1,6 +1,6 @@
 import {Dialog, DialogProvider} from '@sanity/ui'
 
-export default function ProviderStory() {
+export default function ProviderStory(): React.JSX.Element {
   return (
     <DialogProvider position="absolute" zOffset={1000}>
       <Dialog header="Outer" id="provider-example">

package/src/core/components/dialog/__workshop__/wrapped.tsx

@@ -1,7 +1,7 @@
-import {Box, Button, Dialog, DialogProps, LayerProvider, useLayer} from '@sanity/ui'
-import {ReactNode, useCallback, useEffect, useRef, useState} from 'react'
+import {Box, Button, Dialog, type DialogProps, LayerProvider, useLayer} from '@sanity/ui'
+import {type ReactNode, useCallback, useEffect, useRef, useState} from 'react'
 
-export default function WrappedStory() {
+export default function WrappedStory(): React.JSX.Element {
   return (
     <LayerProvider zOffset={100}>
       <Box padding={4}>