@sanity/ui 1.4.0 → 1.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "1.4.0",
+  "version": "1.6.0",
   "sideEffects": false,
   "types": "./dist/index.d.ts",
   "source": "./src/index.ts",
@@ -49,46 +49,46 @@
     "workshop:start": "http-server -a localhost -c-0 -p 1337 -s -P http://localhost:1337/index.html? dist"
   },
   "dependencies": {
-    "@floating-ui/react-dom": "1.1.1",
-    "@sanity/color": "^2.2.3",
-    "@sanity/icons": "^2.2.2",
-    "csstype": "^3.1.1",
-    "framer-motion": "^10.0.0",
+    "@floating-ui/react-dom": "2.0.0",
+    "@sanity/color": "^2.2.5",
+    "@sanity/icons": "^2.3.1",
+    "csstype": "^3.1.2",
+    "framer-motion": "^10.12.16",
     "react-refractor": "^2.1.7"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.12",
-    "@babel/preset-env": "^7.20.2",
-    "@babel/preset-react": "^7.18.6",
-    "@babel/preset-typescript": "^7.18.6",
-    "@commitlint/cli": "^17.4.4",
-    "@commitlint/config-conventional": "^17.4.4",
+    "@babel/core": "^7.22.5",
+    "@babel/preset-env": "^7.22.5",
+    "@babel/preset-react": "^7.22.5",
+    "@babel/preset-typescript": "^7.22.5",
+    "@commitlint/cli": "^17.6.5",
+    "@commitlint/config-conventional": "^17.6.5",
     "@juggle/resize-observer": "^3.4.0",
-    "@sanity/pkg-utils": "^2.2.13",
-    "@sanity/semantic-release-preset": "^4.1.0",
+    "@sanity/pkg-utils": "^2.3.2",
+    "@sanity/semantic-release-preset": "^4.1.1",
     "@sanity/ui-workshop": "^1.2.1",
-    "@testing-library/dom": "^9.0.0",
+    "@testing-library/dom": "^9.3.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
-    "@types/jest": "^29.4.0",
+    "@types/jest": "^29.5.2",
     "@types/jest-axe": "^3.5.5",
-    "@types/node": "^18.14.0",
-    "@types/react": "^18.0.28",
-    "@types/react-dom": "^18.0.11",
-    "@types/react-is": "^18.0.0",
+    "@types/node": "^20.2.5",
+    "@types/react": "^18.2.9",
+    "@types/react-dom": "^18.2.4",
+    "@types/react-is": "^18.2.0",
     "@types/refractor": "^3.0.2",
     "@types/styled-components": "^5.1.26",
-    "@types/testing-library__jest-dom": "^5.14.5",
-    "@typescript-eslint/eslint-plugin": "^5.52.0",
-    "@typescript-eslint/parser": "^5.52.0",
+    "@types/testing-library__jest-dom": "^5.14.6",
+    "@typescript-eslint/eslint-plugin": "^5.59.9",
+    "@typescript-eslint/parser": "^5.59.9",
     "commitizen": "^4.3.0",
-    "cypress": "^12.8.1",
-    "cypress-real-events": "^1.7.6",
+    "cypress": "^12.14.0",
+    "cypress-real-events": "^1.8.1",
     "cz-conventional-changelog": "^3.3.0",
-    "esbuild": "^0.17.12",
+    "esbuild": "^0.17.19",
     "esbuild-register": "^3.4.2",
-    "eslint": "^8.34.0",
-    "eslint-config-prettier": "^8.6.0",
+    "eslint": "^8.42.0",
+    "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-prettier": "^4.2.1",
@@ -96,22 +96,22 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "http-server": "^14.1.1",
     "husky": "^8.0.3",
-    "jest": "^29.4.3",
-    "jest-axe": "^7.0.0",
-    "jest-environment-jsdom": "^29.4.3",
-    "lint-staged": "^13.1.2",
-    "module-alias": "^2.2.2",
+    "jest": "^29.5.0",
+    "jest-axe": "^7.0.1",
+    "jest-environment-jsdom": "^29.5.0",
+    "lint-staged": "^13.2.2",
+    "module-alias": "^2.2.3",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.8.4",
+    "prettier": "^2.8.8",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-is": "^18.2.0",
-    "rimraf": "^5.0.0",
-    "semantic-release": "^21.0.0",
+    "rimraf": "^5.0.1",
+    "semantic-release": "^21.0.3",
     "start-server-and-test": "^2.0.0",
-    "styled-components": "^5.3.9",
-    "tsconfig-paths": "^4.1.2",
-    "typescript": "^5.0.0"
+    "styled-components": "^5.3.11",
+    "tsconfig-paths": "^4.2.0",
+    "typescript": "^5.1.3"
   },
   "peerDependencies": {
     "react": "^18",

package/src/components/menu/__workshop__/menuButton.tsx

@@ -66,6 +66,8 @@ export default function MenuButtonStory() {
                   />
                 </Menu>
               }
+              onClose={useAction('onClose')}
+              onOpen={useAction('onOpen')}
               popover={popover}
             />
           </LayerProvider>

package/src/components/menu/menuButton.tsx

@@ -21,6 +21,7 @@ export interface MenuButtonProps {
   id: string
   menu?: React.ReactElement
   onClose?: () => void
+  onOpen?: () => void
   /**
    * @deprecated Use `popover={{placement: 'top'}}` instead.
    */
@@ -59,6 +60,7 @@ export const MenuButton = forwardRef(function MenuButton(
     id,
     menu: menuProp,
     onClose,
+    onOpen,
     placement: deprecated_placement,
     popoverScheme: deprecated_popoverScheme,
     portal: deprecated_portal = true,
@@ -72,6 +74,14 @@ export const MenuButton = forwardRef(function MenuButton(
   const [menuElements, setChildMenuElements] = useState<HTMLElement[]>([])
   const openRef = useRef<boolean>(open)
 
+  // Notify consumers when the menu opens
+  useEffect(() => {
+    if (onOpen && open && !openRef.current) {
+      onOpen()
+    }
+  }, [onOpen, open])
+
+  // Notify consumers when the menu closes
   useEffect(() => {
     if (onClose && !open && openRef.current) {
       onClose()

package/src/primitives/popover/__workshop__/AlignedStory.tsx

@@ -52,6 +52,7 @@ export default function AlignedStory() {
             constrainSize={constrainSize}
             content={content}
             open={open}
+            overflow="auto"
             padding={3}
             portal={portal}
             placement={placement}

package/src/primitives/popover/__workshop__/SidePanelStory.tsx

@@ -0,0 +1,86 @@
+import {useSelect} from '@sanity/ui-workshop'
+import {useCallback, useEffect, useRef, useState} from 'react'
+import {BoundaryElementProvider} from '../../../utils'
+import {Box} from '../../box'
+import {Card} from '../../card'
+import {Flex} from '../../flex'
+import {Stack} from '../../stack'
+import {Text} from '../../text'
+import {Popover, PopoverProps, PopoverUpdateCallback} from '../popover'
+
+const SIDE_PANEL_WIDTH = {
+  sm: 300,
+  md: 400,
+  lg: 500,
+  xl: 600,
+}
+
+export default function SidePanelStory() {
+  const sidePanelWidth = useSelect('Side panel width', SIDE_PANEL_WIDTH, SIDE_PANEL_WIDTH.md)
+  const [sidePanel, setSidePanel] = useState<HTMLDivElement | null>(null)
+  const updateRef = useRef<PopoverUpdateCallback>()
+
+  useEffect(() => updateRef.current?.(), [sidePanelWidth])
+
+  return (
+    <Flex height="fill">
+      <Card flex={1}>
+        <Box padding={4}>
+          <Text>
+            This story shows that popovers respect their boundary when used in a side panel.
+          </Text>
+        </Box>
+      </Card>
+      <BoundaryElementProvider element={sidePanel}>
+        <Card borderLeft flex="none" ref={setSidePanel} style={{width: sidePanelWidth}} width={0}>
+          <Stack padding={4} space={5}>
+            <Text muted size={1}>
+              Click the <code>reference</code> text below to toggle the popover.
+            </Text>
+
+            <Card border padding={3}>
+              <Text size={1}>
+                Some editor <InlineObject updateRef={updateRef} />
+              </Text>
+            </Card>
+          </Stack>
+        </Card>
+      </BoundaryElementProvider>
+    </Flex>
+  )
+}
+
+function InlineObject(props: {updateRef?: PopoverProps['updateRef']}) {
+  const {updateRef} = props
+  const [open, setOpen] = useState(false)
+
+  const handleClick = useCallback(() => {
+    setOpen((prev) => !prev)
+  }, [])
+
+  return (
+    <Popover
+      content={
+        <Box padding={3}>
+          <Text size={1}>
+            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
+            has been the industry's standard dummy text ever since the 1500s, when an unknown
+            printer took a galley of type and scrambled it to make a type specimen book. It has
+            survived not only five centuries, but also the leap into electronic typesetting,
+            remaining essentially unchanged. It was popularised in the 1960s with the release of
+            Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
+            publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+          </Text>
+        </Box>
+      }
+      constrainSize
+      open={open}
+      overflow="auto"
+      portal
+      width={0}
+      updateRef={updateRef}
+    >
+      <code onClick={handleClick}>reference</code>
+    </Popover>
+  )
+}

package/src/primitives/popover/__workshop__/TestStory.tsx

@@ -1,5 +1,5 @@
-import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
-import {ReactElement, useState} from 'react'
+import {useAction, useBoolean, useSelect, useText} from '@sanity/ui-workshop'
+import {ReactElement, useRef, useState} from 'react'
 import {
   WORKSHOP_CONTAINER_WIDTH_OPTIONS,
   WORKSHOP_PLACEMENT_OPTIONS,
@@ -10,10 +10,13 @@ import {Button} from '../../button'
 import {Card} from '../../card'
 import {Text} from '../../text'
 import {Popover} from '../popover'
+import {PopoverUpdateCallback} from '../types'
 
 export default function TestStory(): ReactElement {
   const [portalElement, setPortalElement] = useState<HTMLDivElement | null>(null)
   const [boundaryElement, setBoundaryElement] = useState<HTMLDivElement | null>(null)
+
+  const mount = useBoolean('Mount', true)
   const arrow = useBoolean('Arrow', true)
   const constrainSize = useBoolean('Constrain size', true)
   const matchReferenceWidth = useBoolean('Match reference width', false)
@@ -26,6 +29,10 @@ export default function TestStory(): ReactElement {
 
   const text = useText('Text', 'Test')
 
+  const updateRef = useRef<PopoverUpdateCallback>()
+
+  const button = <Button text="reference" style={{width: referenceWide ? 300 : undefined}} />
+
   return (
     <Card
       ref={setBoundaryElement}
@@ -56,22 +63,27 @@ export default function TestStory(): ReactElement {
         <div style={{padding: '150vh'}}>
           <PortalProvider element={portalElement}>
             <BoundaryElementProvider element={boundaryElement}>
-              <Popover
-                arrow={arrow}
-                content={<Text size={1}>{text}</Text>}
-                constrainSize={constrainSize}
-                fallbackPlacements={['left', 'bottom', 'right', 'top']}
-                matchReferenceWidth={matchReferenceWidth}
-                open={open}
-                padding={3}
-                placement={placement}
-                portal
-                preventOverflow={preventOverflow}
-                radius={radius}
-                width={width}
-              >
-                <Button text="reference" style={{width: referenceWide ? 300 : undefined}} />
-              </Popover>
+              {!mount && button}
+              {mount && (
+                <Popover
+                  arrow={arrow}
+                  content={<Text>{text}</Text>}
+                  constrainSize={constrainSize}
+                  fallbackPlacements={['left', 'bottom', 'right', 'top']}
+                  matchReferenceWidth={matchReferenceWidth}
+                  open={open}
+                  overflow="hidden"
+                  padding={3}
+                  placement={placement}
+                  portal
+                  preventOverflow={preventOverflow}
+                  radius={radius}
+                  updateRef={updateRef}
+                  width={width}
+                >
+                  {button}
+                </Popover>
+              )}
             </BoundaryElementProvider>
           </PortalProvider>
         </div>

package/src/primitives/popover/__workshop__/index.ts

@@ -41,9 +41,9 @@ export default defineScope({
       component: lazy(() => import('./OpenOnMountStory')),
     },
     {
-      name: 'positionStory',
-      title: 'Position',
-      component: lazy(() => import('./PositionStory')),
+      name: 'side-panel',
+      title: 'Side panel',
+      component: lazy(() => import('./SidePanelStory')),
     },
   ],
 })

package/src/primitives/popover/helpers.ts

@@ -0,0 +1,32 @@
+import {Theme} from '../../theme'
+import {DEFAULT_POPOVER_PADDING} from './constants'
+import {PopoverWidth} from './types'
+
+export function calcCurrentWidth(params: {
+  mediaIndex: number
+  theme: Theme
+  width: PopoverWidth[]
+}): number | undefined {
+  const {mediaIndex, theme, width} = params
+
+  const w = width[mediaIndex]
+  const currentWidth: PopoverWidth | undefined = w === undefined ? width[width.length - 1] : w
+
+  return typeof currentWidth === 'number' ? theme.sanity.container[currentWidth] : undefined
+}
+
+export function calcMaxWidth(params: {
+  boundaryWidth: number | undefined
+  currentWidth: number | undefined
+}): number | undefined {
+  const {boundaryWidth, currentWidth} = params
+
+  if (currentWidth === undefined && boundaryWidth === undefined) {
+    return undefined
+  }
+
+  return Math.min(
+    currentWidth ?? Infinity,
+    (boundaryWidth || Infinity) - DEFAULT_POPOVER_PADDING * 2
+  )
+}

package/src/primitives/popover/index.ts

@@ -1,4 +1,2 @@
 export * from './popover'
-export * from './popoverProvider'
-export * from './usePopover'
 export * from './types'