@sanity/ui 2.0.0-alpha.9 → 2.0.0-beta.10

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

@@ -1,134 +0,0 @@
-import {useState} from 'react'
-import {Stack, Flex, Button, Text} from '../../../primitives'
-import {Layer, LayerProvider} from '../../../utils'
-import {Menu, MenuButton, MenuItem} from '../../menu'
-import {Dialog} from '../dialog'
-
-export default function LayeringFocusStory() {
-  const [firstDialogOpen, setFirstDialogOpen] = useState<boolean>(false)
-  const [secondDialogOpen, setSecondDialogOpen] = useState<boolean>(false)
-  const [thirdDialogOpen, setThirdDialogOpen] = useState<boolean>(false)
-  const [fourthDialogOpen, setFourthDialogOpen] = useState<boolean>(false)
-
-  return (
-    <LayerProvider>
-      <Flex align="center" height="fill" justify="center">
-        <Layer onActivate={({activeElement}) => activeElement?.focus()}>
-          <Button
-            text="Open dialog 1"
-            onClick={() => setFirstDialogOpen(true)}
-            tone="primary"
-            id="open-dialog-1-button"
-          />
-
-          {firstDialogOpen && (
-            <Dialog
-              header="Dialog 1"
-              id="1"
-              onActivate={({activeElement}) => activeElement?.focus()}
-              onClose={() => setFirstDialogOpen(false)}
-            >
-              <Stack space={2} padding={3}>
-                <Button
-                  mode="ghost"
-                  text="Open dialog 2"
-                  onClick={() => setSecondDialogOpen(true)}
-                  id="open-dialog-2-button-1"
-                />
-                <Button
-                  mode="ghost"
-                  text="Open dialog 2"
-                  onClick={() => setSecondDialogOpen(true)}
-                  id="open-dialog-2-button-2"
-                />
-                <Button
-                  mode="ghost"
-                  text="Open dialog 2"
-                  onClick={() => setSecondDialogOpen(true)}
-                  id="open-dialog-2-button-3"
-                />
-              </Stack>
-
-              {secondDialogOpen && (
-                <Dialog
-                  header="Dialog 2"
-                  id="2"
-                  onActivate={({activeElement}) => activeElement?.focus()}
-                  onClose={() => setSecondDialogOpen(false)}
-                >
-                  <Stack space={2} padding={3}>
-                    <Button
-                      mode="ghost"
-                      text="Open dialog 3"
-                      onClick={() => setThirdDialogOpen(true)}
-                      id="open-dialog-3-button-1"
-                    />
-                    <Button
-                      mode="ghost"
-                      text="Open dialog 3"
-                      onClick={() => setThirdDialogOpen(true)}
-                      id="open-dialog-3-button-2"
-                    />
-                    <Button
-                      mode="ghost"
-                      text="Open dialog 3"
-                      onClick={() => setThirdDialogOpen(true)}
-                      id="open-dialog-3-button-3"
-                    />
-                  </Stack>
-
-                  {thirdDialogOpen && (
-                    <Dialog
-                      header="Dialog 3"
-                      id="3"
-                      onActivate={({activeElement}) => activeElement?.focus()}
-                      onClose={() => setThirdDialogOpen(false)}
-                    >
-                      <Stack space={2} padding={3}>
-                        <MenuButton
-                          id="menu"
-                          button={
-                            <Button mode="ghost" text="Open menu" id="open-dialog-4-menu-button" />
-                          }
-                          menu={
-                            <Menu>
-                              <MenuItem
-                                text="Open dialog 4"
-                                onClick={() => setFourthDialogOpen(true)}
-                              />
-                              <MenuItem
-                                text="Open dialog 4"
-                                onClick={() => setFourthDialogOpen(true)}
-                              />
-                              <MenuItem
-                                text="Open dialog 4"
-                                onClick={() => setFourthDialogOpen(true)}
-                              />
-                            </Menu>
-                          }
-                        />
-                      </Stack>
-
-                      {fourthDialogOpen && (
-                        <Dialog
-                          header="Dialog 4"
-                          id="4"
-                          onActivate={({activeElement}) => activeElement?.focus()}
-                          onClose={() => setFourthDialogOpen(false)}
-                        >
-                          <Stack space={2} padding={3}>
-                            <Text>👋</Text>
-                          </Stack>
-                        </Dialog>
-                      )}
-                    </Dialog>
-                  )}
-                </Dialog>
-              )}
-            </Dialog>
-          )}
-        </Layer>
-      </Flex>
-    </LayerProvider>
-  )
-}

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

@@ -1,37 +0,0 @@
-import {Box, Card, Code, Dialog, Layer, LayerProvider, useLayer} from '@sanity/ui'
-import {useAction} from '@sanity/ui-workshop'
-
-export default function LayeringStory() {
-  return (
-    <Box padding={[4, 5, 6]}>
-      <LayerProvider>
-        <Layer zOffset={10} id="a">
-          <Card padding={2} shadow={2}>
-            <DebugLayer />
-          </Card>
-        </Layer>
-        <Layer zOffset={10} id="b">
-          <Card padding={2} shadow={2}>
-            <DebugLayer />
-          </Card>
-        </Layer>
-        <Dialog
-          header="Layering example"
-          id="layering-example"
-          onClose={useAction('onEscape')}
-          zOffset={100}
-        >
-          <Box padding={4}>
-            <DebugLayer />
-          </Box>
-        </Dialog>
-      </LayerProvider>
-    </Box>
-  )
-}
-
-function DebugLayer() {
-  const layer = useLayer()
-
-  return <Code language="json">{JSON.stringify(layer, null, 2)}</Code>
-}

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

@@ -1,86 +0,0 @@
-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() {
-  return (
-    <Flex height="fill">
-      <Pane id="A" />
-      <Pane id="B" borderLeft />
-    </Flex>
-  )
-}
-
-const PaneRoot = styled(Card)`
-  position: relative;
-`
-
-const PanePortal = styled.div`
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  pointer-events: none;
-
-  & > * {
-    pointer-events: auto;
-  }
-`
-
-function Pane(props: {borderLeft?: boolean; id: string}) {
-  const {borderLeft, id} = props
-  const [element, setElement] = useState<HTMLDivElement | null>(null)
-  const [portalElement, setPortalElement] = useState<HTMLDivElement | null>(null)
-  const [dialogOpen, setDialogOpen] = useState(false)
-
-  const handleClose = useCallback(() => {
-    setDialogOpen(false)
-  }, [])
-
-  return (
-    <BoundaryElementProvider element={element}>
-      <PortalProvider element={portalElement}>
-        <PaneRoot borderLeft={borderLeft} flex={1} ref={setElement}>
-          <Box padding={4}>
-            <Button
-              onClick={() => setDialogOpen(true)}
-              selected={dialogOpen}
-              text="Open dialog"
-              tone="primary"
-            />
-          </Box>
-
-          <PanePortal ref={setPortalElement} />
-        </PaneRoot>
-
-        {dialogOpen && (
-          <Dialog
-            header={`Dialog ${id}`}
-            id={id}
-            onClickOutside={handleClose}
-            onClose={handleClose}
-            position="absolute"
-          >
-            <Box padding={4}>
-              <MenuButton
-                button={<Button text="Open menu" tone="primary" />}
-                id={`${id}-menu`}
-                menu={
-                  <Menu>
-                    <MenuItem text="Item 1" />
-                    <MenuItem text="Item 2" />
-                    <MenuItem text="Item 3" />
-                  </Menu>
-                }
-              />
-            </Box>
-          </Dialog>
-        )}
-      </PortalProvider>
-    </BoundaryElementProvider>
-  )
-}

package/src/components/dialog/constants.ts

@@ -1,4 +0,0 @@
-/**
- * Left/right border offsets for header + footer components (in px).
- */
-export const BORDER_OFFSET_X: number = 12