@sanity/ui 1.3.2 → 1.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "1.3.2",
+  "version": "1.4.0",
   "sideEffects": false,
   "types": "./dist/index.d.ts",
   "source": "./src/index.ts",
@@ -75,7 +75,7 @@
     "@types/node": "^18.14.0",
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",
-    "@types/react-is": "^17.0.3",
+    "@types/react-is": "^18.0.0",
     "@types/refractor": "^3.0.2",
     "@types/styled-components": "^5.1.26",
     "@types/testing-library__jest-dom": "^5.14.5",

package/src/components/dialog/dialog.tsx

@@ -109,6 +109,7 @@ const DialogCardRoot = styled(Card)`
   min-height: 0;
   max-height: 100%;
   overflow: hidden;
+  overflow: clip;
 `
 
 const DialogLayout = styled(Flex)`

package/src/primitives/button/__workshop__/sanityUploadButton.tsx

@@ -6,6 +6,7 @@ const SanityUploadButton = styled(Button).attrs({forwardedAs: 'label'})`
   & input {
     -webkit-appearance: none;
     overflow: hidden;
+    overflow: clip;
     top: 0;
     left: 0;
     width: 100%;

package/src/primitives/heading/heading.tsx

@@ -39,6 +39,7 @@ const SpanWithTextOverflow = styled.span`
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
+  overflow: clip;
 `
 
 /**

package/src/primitives/label/label.tsx

@@ -36,6 +36,7 @@ const SpanWithTextOverflow = styled.span`
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
+  overflow: clip;
 `
 
 /**

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

@@ -0,0 +1,103 @@
+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/__workshop__/index.ts

@@ -40,5 +40,10 @@ 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 +1,4 @@
 export * from './popover'
+export * from './popoverProvider'
+export * from './usePopover'
+export * from './types'

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

@@ -0,0 +1,164 @@
+/** @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/popover.tsx

@@ -23,6 +23,7 @@ import {
 } from './constants'
 import {size} from './floating-ui/size'
 import {PopoverCard} from './popoverCard'
+import {useOnForcedUpdate} from './useOnForcedUpdate'
 
 /**
  * @public
@@ -200,10 +201,15 @@ 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
@@ -247,6 +253,8 @@ export const Popover = memo(
       referenceRef(referenceElement || null)
     }, [referenceRef, referenceElement])
 
+    useOnForcedUpdate(handleForcedUpdate)
+
     if (disabled) {
       return childProp || <></>
     }

package/src/primitives/popover/popoverContext.tsx

@@ -0,0 +1,9 @@
+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

@@ -0,0 +1,29 @@
+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

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

package/src/primitives/popover/useOnForcedUpdate.ts

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,24 @@
+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
+}

package/src/primitives/text/text.tsx

@@ -39,6 +39,7 @@ const SpanWithTextOverflow = styled.span`
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
+  overflow: clip;
 `
 
 /**

package/src/utils/srOnly/srOnly.tsx

@@ -15,6 +15,7 @@ const Root = styled.div`
   height: 0;
   position: absolute;
   overflow: hidden;
+  overflow: clip;
 `
 
 /**