@sanity/ui 4.0.0-static.30 → 4.0.0-static.32

package/src/core/utils/portal/Portal.test.tsx

@@ -27,9 +27,9 @@ describe('utils/portal', () => {
         }
 
         return (
-          <PortalContext.Provider value={value}>
+          <PortalContext value={value}>
             <Debug />
-          </PortalContext.Provider>
+          </PortalContext>
         )
       }
 
@@ -55,12 +55,12 @@ describe('utils/portal', () => {
 
       function Root() {
         return (
-          <PortalContext.Provider
+          <PortalContext
             // @ts-expect-error - we want to test the error case
             value={undefined}
           >
             <Debug />
-          </PortalContext.Provider>
+          </PortalContext>
         )
       }
 
@@ -86,12 +86,12 @@ describe('utils/portal', () => {
         // NOTE: we’re testing this because the context value may be a function in the future
 
         return (
-          <PortalContext.Provider
+          <PortalContext
             // @ts-expect-error - we want to test the error case
             value={() => ({version: 1})}
           >
             <Debug />
-          </PortalContext.Provider>
+          </PortalContext>
         )
       }
 

package/src/core/utils/portal/PortalContext.ts

@@ -4,7 +4,7 @@ import {createGlobalScopedContext} from '../../lib/createGlobalScopedContext'
 import {globalScope} from '../../lib/globalScope'
 import type {PortalContextValue} from './types'
 
-const key = '@sanity/ui/v3/portal'
+const key = '@sanity/ui/v4/portal'
 const elementKey = Symbol.for(`${key}/element`)
 
 // Use the global scope as a map of symbols to elements

package/src/core/utils/portal/PortalProvider.tsx

@@ -1,4 +1,4 @@
-import {type ReactNode, use, useMemo, useRef, useSyncExternalStore} from 'react'
+import {type ReactNode, use, useMemo, useSyncExternalStore} from 'react'
 
 import {PortalContext} from './PortalContext'
 import type {PortalContextValue} from './types'
@@ -15,8 +15,7 @@ export interface PortalProviderProps {
 
 /** @public */
 export function PortalProvider(props: PortalProviderProps): React.JSX.Element {
-  const {children, element, __unstable_elements: elementsProp} = props
-  const elements = useUnique(elementsProp)
+  const {children, element, __unstable_elements: elements} = props
   const parentPortal = use(PortalContext)
   const fallbackElement = useSyncExternalStore(
     emptySubscribe,
@@ -24,47 +23,16 @@ export function PortalProvider(props: PortalProviderProps): React.JSX.Element {
     () => null,
   )
 
-  const value: PortalContextValue = useMemo(() => {
+  const value = useMemo(() => {
     return {
       version: 0.0,
       boundaryElement: null,
       element: element || fallbackElement,
       elements,
-    }
+    } satisfies PortalContextValue
   }, [element, elements, fallbackElement])
 
-  return <PortalContext.Provider value={value}>{children}</PortalContext.Provider>
+  return <PortalContext value={value}>{children}</PortalContext>
 }
 
 const emptySubscribe = () => () => {}
-
-/**
- * This is a React hook to make sure that a record identity is the same on every render. Uses strict
- * equality comparison (eg by identity), and only goes one level deep.
- */
-function useUnique<ValueType extends Comparable = Comparable>(value: ValueType): ValueType {
-  const valueRef = useRef<ValueType>(value)
-
-  if (!_isEqual(valueRef.current, value)) {
-    valueRef.current = value
-  }
-
-  return valueRef.current
-}
-
-function _isEqual(objA: Comparable, objB: Comparable): boolean {
-  if (!objA || !objB) {
-    return objA === objB
-  }
-
-  const keysA = Object.keys(objA)
-  const keysB = Object.keys(objB)
-
-  if (keysA.length !== keysB.length) {
-    return false
-  }
-
-  return keysA.every((key) => objA[key] === objB[key])
-}
-
-type Comparable = Record<string | number | symbol, unknown> | undefined | null

package/src/core/primitives/button/__workshop__/Styled2.tsx

@@ -1,19 +0,0 @@
-import {Button, Flex} from '@sanity/ui'
-import {styled} from 'styled-components'
-
-const StyledButton2 = styled(Button)<{$color?: boolean}>`
-  &:hover {
-    background-color: red;
-    box-shadow: none;
-  }
-`
-
-export default function StyledButton2Story(): React.JSX.Element {
-  const props = {href: '#', text: 'Test'}
-
-  return (
-    <Flex align="center" height="fill" justify="center">
-      <StyledButton2 $color forwardedAs="a" {...props} />
-    </Flex>
-  )
-}