@sanity/ui 1.4.0 → 1.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "sideEffects": false,
   "types": "./dist/index.d.ts",
   "source": "./src/index.ts",
@@ -50,45 +50,45 @@
   },
   "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",
+    "@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.1",
+    "@babel/preset-env": "^7.22.4",
+    "@babel/preset-react": "^7.22.3",
+    "@babel/preset-typescript": "^7.21.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": "^18.16.16",
+    "@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__/index.ts

@@ -40,10 +40,5 @@ export default defineScope({
       title: 'Open on mount',
       component: lazy(() => import('./OpenOnMountStory')),
     },
-    {
-      name: 'positionStory',
-      title: 'Position',
-      component: lazy(() => import('./PositionStory')),
-    },
   ],
 })

package/src/primitives/popover/index.ts

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

package/src/primitives/popover/popover.tsx

@@ -23,7 +23,6 @@ import {
 } from './constants'
 import {size} from './floating-ui/size'
 import {PopoverCard} from './popoverCard'
-import {useOnForcedUpdate} from './useOnForcedUpdate'
 
 /**
  * @public
@@ -201,15 +200,10 @@ export const Popover = memo(
       placement,
       reference: referenceRef,
       floating: floatingRef,
-      update: floatingUpdate,
       middlewareData,
       strategy,
     } = useFloating(floatingProps)
 
-    const handleForcedUpdate = useCallback(() => {
-      floatingUpdate()
-    }, [floatingUpdate])
-
     const referenceHidden = middlewareData.hide?.referenceHidden
 
     const arrowX = middlewareData.arrow?.x
@@ -253,8 +247,6 @@ export const Popover = memo(
       referenceRef(referenceElement || null)
     }, [referenceRef, referenceElement])
 
-    useOnForcedUpdate(handleForcedUpdate)
-
     if (disabled) {
       return childProp || <></>
     }

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

@@ -1,103 +0,0 @@
-import {useBoolean} from '@sanity/ui-workshop'
-import {useCallback, useMemo, useState} from 'react'
-import {BoundaryElementProvider} from '../../../utils'
-import {Button} from '../../button'
-import {Card} from '../../card'
-import {Flex} from '../../flex'
-import {Text} from '../../text'
-import {Popover, PopoverProps} from '../popover'
-import {PopoverProvider} from '../popoverProvider'
-import {usePopover} from '../usePopover'
-
-function PopoverComponent({
-  referenceElement,
-  boundaryElement,
-}: {
-  referenceElement: PopoverProps['referenceElement']
-  boundaryElement: PopoverProps['boundaryElement']
-}) {
-  return (
-    <Popover
-      open
-      content={
-        <Card padding={5} radius={3}>
-          <Text weight="semibold" muted>
-            I should follow my reference element <br />
-            when the parent container is resized.
-          </Text>
-        </Card>
-      }
-      referenceElement={referenceElement}
-      boundaryElement={boundaryElement}
-    />
-  )
-}
-
-export default function PositionStory() {
-  return (
-    <PopoverProvider>
-      <InnerStory />
-    </PopoverProvider>
-  )
-}
-
-function InnerStory() {
-  const [size, setSize] = useState(0.5)
-  const [referenceElement, setReferenceElement] = useState<PopoverProps['referenceElement']>(null)
-  const [boundaryElement, setBoundaryElement] = useState<PopoverProps['boundaryElement']>(null)
-  const updatePositionOnClick = useBoolean('Force popover update on size change', false, 'Props')
-  const {forceUpdate} = usePopover()
-
-  // Random number between 0.2 and 5
-  const handleSetSize = useCallback(() => {
-    const s = Math.random() * (0.5 - 0.2) + 0.2
-
-    setSize(s)
-
-    if (updatePositionOnClick) {
-      forceUpdate()
-    }
-  }, [updatePositionOnClick])
-
-  const element = useMemo(() => {
-    return (
-      <Card
-        as="span"
-        border
-        radius={2}
-        style={{display: 'inline', padding: '0.4, 1'}}
-        ref={setReferenceElement}
-        tone="primary"
-      >
-        nunc
-      </Card>
-    )
-  }, [])
-
-  return (
-    <>
-      <PopoverComponent referenceElement={referenceElement} boundaryElement={boundaryElement} />
-
-      <BoundaryElementProvider element={boundaryElement as HTMLDivElement}>
-        <Flex height="fill">
-          <Card borderRight flex={size} tone="transparent">
-            <Flex align="center" justify="center" height="fill">
-              <Button text="Change size" onClick={handleSetSize} />
-            </Flex>
-          </Card>
-
-          <Card flex={1} ref={setBoundaryElement}>
-            <Flex height="fill" padding={5}>
-              <Text>
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultricies, nisl ut
-                aliquet ultricies, nunc sapien ultricies tortor, nec tincidunt elit risus ac nunc.
-                Nulla facilisi. Sed aliquam, {element} eget aliquam ultricies, diam diam aliquam
-                augue, eget ultricies nisl nunc eget nunc. Nulla facilisi. Sed aliquam,
-              </Text>
-            </Flex>
-          </Card>
-        </Flex>
-      </BoundaryElementProvider>
-    </>
-  )
-}

package/src/primitives/popover/popover.test.tsx

@@ -1,164 +0,0 @@
-/** @jest-environment jsdom */
-
-import {fireEvent, waitFor, screen} from '@testing-library/react'
-import {startTransition, useCallback, useEffect, useMemo, useState} from 'react'
-import {render} from '../../../test'
-import {PopoverContext} from './popoverContext'
-import {PopoverContextValue} from './types'
-import {useOnForcedUpdate} from './useOnForcedUpdate'
-import {usePopover} from './usePopover'
-
-describe('components/toast', () => {
-  describe('usePopover', () => {
-    it('should get context value', async () => {
-      const log = jest.fn()
-
-      function Debug() {
-        const popover = usePopover()
-
-        log(popover)
-
-        return <>debug</>
-      }
-
-      function Root() {
-        const value: PopoverContextValue = {
-          version: 0.0,
-          // eslint-disable-next-line @typescript-eslint/no-empty-function
-          forceUpdate: () => {},
-          lastUpdateId: null,
-        }
-
-        return (
-          <PopoverContext.Provider value={value}>
-            <Debug />
-          </PopoverContext.Provider>
-        )
-      }
-
-      render(<Root />)
-
-      expect(log.mock.calls[0][0].version).toBe(0.0)
-    })
-
-    it('should fail when no context value is provided', async () => {
-      const log = jest.fn()
-
-      function Debug() {
-        try {
-          usePopover()
-        } catch (err) {
-          log(err)
-        }
-
-        return null
-      }
-
-      function Root() {
-        const value = undefined
-
-        return (
-          <PopoverContext.Provider value={value as any}>
-            <Debug />
-          </PopoverContext.Provider>
-        )
-      }
-
-      render(<Root />)
-
-      expect(log.mock.calls[0][0].message).toEqual('usePopover(): missing context value')
-    })
-
-    it('should fail when context value is not compatible', async () => {
-      const log = jest.fn()
-
-      function Debug() {
-        try {
-          usePopover()
-        } catch (err) {
-          log(err)
-        }
-
-        return null
-      }
-
-      function Root() {
-        // NOTE: we’re testing this because the context value may be a function in the future
-        const value = () => {
-          return {version: 1}
-        }
-
-        return (
-          <PopoverContext.Provider value={value as any}>
-            <Debug />
-          </PopoverContext.Provider>
-        )
-      }
-
-      render(<Root />)
-
-      expect(log.mock.calls[0][0].message).toEqual(
-        'usePopover(): the context value is not compatible'
-      )
-    })
-
-    it('should trigger hook when forceUpdate is called', async () => {
-      const log = jest.fn()
-      const forcedCallback = jest.fn()
-
-      function Popover() {
-        useOnForcedUpdate(forcedCallback)
-
-        return null
-      }
-
-      function Debug() {
-        const popover = usePopover()
-
-        useEffect(() => {
-          log(popover)
-        }, [popover])
-
-        const update = useCallback(() => {
-          popover.forceUpdate()
-        }, [popover])
-
-        return <button onClick={update}>Force position update</button>
-      }
-
-      function Root() {
-        const [lastUpdateId, setLastUpdateId] = useState<string | null>(null)
-        const forceUpdate = useCallback(() => {
-          startTransition(() => {
-            setLastUpdateId('newid')
-          })
-        }, [])
-        const value: PopoverContextValue = useMemo(() => {
-          return {
-            version: 0.0,
-            forceUpdate,
-            lastUpdateId,
-          }
-        }, [forceUpdate, lastUpdateId])
-
-        return (
-          <PopoverContext.Provider value={value}>
-            <Debug />
-            <Popover />
-          </PopoverContext.Provider>
-        )
-      }
-
-      render(<Root />)
-
-      fireEvent.click(screen.getByText('Force position update'))
-
-      await waitFor(() => {
-        expect(log).toHaveBeenCalledTimes(3)
-        expect(log.mock.calls[0][0].lastUpdateId).toBeNull()
-        expect(log.mock.calls[2][0].lastUpdateId).not.toBeNull()
-        expect(forcedCallback).toHaveBeenCalledTimes(1)
-      })
-    })
-  })
-})

package/src/primitives/popover/popoverContext.tsx

@@ -1,9 +0,0 @@
-import {createContext} from 'react'
-import {globalScope} from '../../lib/globalScope'
-import type {PopoverContextValue} from './types'
-
-const key = Symbol.for('@sanity/ui/context/popover')
-
-globalScope[key] = globalScope[key] || createContext<PopoverContextValue | null>(null)
-
-export const PopoverContext: React.Context<PopoverContextValue | null> = globalScope[key]

package/src/primitives/popover/popoverProvider.tsx

@@ -1,29 +0,0 @@
-import React, {useState, useCallback, useMemo} from 'react'
-import {PopoverContext} from './popoverContext'
-
-/**
- * @public
- */
-export interface PopoverProviderProps {
-  children?: React.ReactNode
-}
-
-/**
- * @public
- */
-export const PopoverProvider = ({children}: PopoverProviderProps): React.ReactElement => {
-  const [lastUpdateId, setUpdateId] = useState<string | null>(null)
-
-  const forceUpdate = useCallback(() => {
-    // Generate a new random ID
-    const newId = Math.random().toString(36).substr(2, 9)
-    setUpdateId(newId)
-  }, [])
-
-  const value = useMemo(
-    () => ({version: 0.0, lastUpdateId, forceUpdate}),
-    [lastUpdateId, forceUpdate]
-  )
-
-  return <PopoverContext.Provider value={value}>{children}</PopoverContext.Provider>
-}

package/src/primitives/popover/types.ts

@@ -1,8 +0,0 @@
-/**
- * @public
- */
-export interface PopoverContextValue {
-  version: number
-  forceUpdate: () => void
-  lastUpdateId: string | null
-}

package/src/primitives/popover/useOnForcedUpdate.ts

@@ -1,15 +0,0 @@
-import {useContext, useEffect} from 'react'
-import {PopoverContext} from './popoverContext'
-
-/**
- * @public
- */
-export const useOnForcedUpdate = (eventHandler: () => void): void => {
-  const contextValue = useContext(PopoverContext)
-
-  useEffect(() => {
-    if (contextValue?.lastUpdateId !== null) {
-      eventHandler?.()
-    }
-  }, [contextValue?.lastUpdateId])
-}

package/src/primitives/popover/usePopover.ts

@@ -1,24 +0,0 @@
-import {useContext} from 'react'
-import {isRecord} from '../../lib/isRecord'
-import {PopoverContext} from './popoverContext'
-import type {PopoverContextValue} from './types'
-
-/**
- * @public
- */
-export function usePopover(): PopoverContextValue {
-  const value = useContext(PopoverContext)
-
-  if (!value) {
-    throw new Error('usePopover(): missing context value')
-  }
-
-  // NOTE: This check is for future-compatiblity
-  // - If the value is not an object, it’s not compatible with the current version
-  // - If the value is an object, but doesn’t have `version: 0.0`, it’s not compatible with the current version
-  if (!isRecord(value) || value.version !== 0.0) {
-    throw new Error('usePopover(): the context value is not compatible')
-  }
-
-  return value
-}