@sanity/ui 0.37.3 → 0.37.4

package/src/helpers/focus.ts

@@ -0,0 +1,100 @@
+import {
+  isHTMLElement,
+  isHTMLAnchorElement,
+  isHTMLInputElement,
+  isHTMLButtonElement,
+  isHTMLSelectElement,
+  isHTMLTextAreaElement,
+} from './element'
+
+// export const globalFocusState = {
+//   IgnoreUtilFocusChanges: false,
+// }
+
+/**
+ * @internal
+ */
+export function _hasFocus(element: HTMLElement): boolean {
+  return Boolean(document.activeElement) && element.contains(document.activeElement)
+}
+
+/**
+ * @internal
+ */
+export function isFocusable(element: HTMLElement): boolean {
+  if (
+    element.tabIndex > 0 ||
+    (element.tabIndex === 0 && element.getAttribute('tabIndex') !== null)
+  ) {
+    return true
+  }
+
+  if (isHTMLAnchorElement(element)) {
+    return Boolean(element.href) && element.rel !== 'ignore'
+  }
+
+  if (isHTMLInputElement(element)) {
+    return element.type !== 'hidden' && element.type !== 'file' && !element.disabled
+  }
+
+  if (
+    isHTMLButtonElement(element) ||
+    isHTMLSelectElement(element) ||
+    isHTMLTextAreaElement(element)
+  ) {
+    return !element.disabled
+  }
+
+  return false
+}
+
+/**
+ * @internal
+ */
+export function attemptFocus(element: HTMLElement): boolean {
+  if (!isFocusable(element)) {
+    return false
+  }
+
+  // globalFocusState.IgnoreUtilFocusChanges = true
+
+  try {
+    element.focus()
+  } catch (_) {
+    // ignore
+  }
+
+  // globalFocusState.IgnoreUtilFocusChanges = false
+
+  return document.activeElement === element
+}
+
+/**
+ * @internal
+ */
+export function focusFirstDescendant(element: HTMLElement): boolean {
+  for (let i = 0; i < element.childNodes.length; i++) {
+    const child = element.childNodes[i]
+
+    if (isHTMLElement(child) && (attemptFocus(child) || focusFirstDescendant(child))) {
+      return true
+    }
+  }
+
+  return false
+}
+
+/**
+ * @internal
+ */
+export function focusLastDescendant(element: HTMLElement): boolean {
+  for (let i = element.childNodes.length - 1; i >= 0; i--) {
+    const child = element.childNodes[i]
+
+    if (isHTMLElement(child) && (attemptFocus(child) || focusLastDescendant(child))) {
+      return true
+    }
+  }
+
+  return false
+}

package/src/helpers/index.ts

@@ -0,0 +1,4 @@
+export * from './animation'
+export * from './element'
+export * from './focus'
+export * from './scroll'

package/src/helpers/scroll.ts

@@ -0,0 +1,15 @@
+/**
+ * @internal
+ */
+export function _isScrollable(el: Node): boolean {
+  if (!(el instanceof Element)) return false
+
+  const style = window.getComputedStyle(el)
+
+  return (
+    style.overflowX.includes('auto') ||
+    style.overflowX.includes('scroll') ||
+    style.overflowY.includes('auto') ||
+    style.overflowY.includes('scroll')
+  )
+}

package/src/hooks/_internal/index.ts

@@ -0,0 +1 @@
+export * from './useUnique'

package/src/hooks/_internal/useUnique.ts

@@ -0,0 +1,35 @@
+import {useRef} from 'react'
+
+/**
+ * This is a React hook – and an escape hatch – to make sure that a record is
+ * the same on every render. Uses strict equality comparison (eg by identity),
+ * and only goes one level deep. SHOULD NOT BE USED IN MOST CASES.
+ *
+ * @internal
+ */
+type Comparable = Record<string | number | symbol, unknown> | undefined | null
+
+export 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])
+}

package/src/hooks/index.ts

@@ -0,0 +1,8 @@
+export * from './useClickOutside'
+export * from './useElementRect'
+export * from './useGlobalKeyDown'
+export * from './useMediaIndex'
+export * from './usePrefersDark'
+export * from './useForwardedRef'
+export * from './useCustomValidity'
+export * from './useResponsiveProp'

package/src/hooks/useClickOutside.ts

@@ -0,0 +1,99 @@
+import {useEffect, useRef, useState} from 'react'
+import {EMPTY_ARRAY} from '../constants'
+
+/**
+ * @public
+ */
+export type ClickOutsideListener = (event: MouseEvent) => void
+
+function _getElements(
+  element: HTMLElement | null,
+  elementsArg: Array<HTMLElement | HTMLElement[] | null>
+): HTMLElement[] {
+  const ret = [element]
+
+  for (const el of elementsArg) {
+    if (Array.isArray(el)) {
+      ret.push(...el)
+    } else {
+      ret.push(el)
+    }
+  }
+
+  return ret.filter(Boolean) as HTMLElement[]
+}
+
+/**
+ * @public
+ */
+export function useClickOutside(
+  listener: ClickOutsideListener,
+  elementsArg: Array<HTMLElement | HTMLElement[] | null> = EMPTY_ARRAY,
+  boundaryElement?: HTMLElement | null
+): (el: HTMLElement | null) => void {
+  const [element, setElement] = useState<HTMLElement | null>(null)
+  const [elements, setElements] = useState(() => _getElements(element, elementsArg))
+  const elementsRef = useRef(elements)
+
+  useEffect(() => {
+    const prevElements = elementsRef.current
+    const nextElements = _getElements(element, elementsArg)
+
+    if (prevElements.length !== nextElements.length) {
+      setElements(nextElements)
+      elementsRef.current = nextElements
+
+      return
+    }
+
+    for (const el of prevElements) {
+      if (!nextElements.includes(el)) {
+        setElements(nextElements)
+        elementsRef.current = nextElements
+
+        return
+      }
+    }
+
+    for (const el of nextElements) {
+      if (!prevElements.includes(el)) {
+        setElements(nextElements)
+        elementsRef.current = nextElements
+
+        return
+      }
+    }
+  }, [element, elementsArg])
+
+  useEffect(() => {
+    if (!listener) return undefined
+
+    const handleWindowMouseDown = (evt: MouseEvent) => {
+      const target = evt.target
+
+      if (!(target instanceof Node)) {
+        return
+      }
+
+      if (boundaryElement && !boundaryElement.contains(target)) {
+        return
+      }
+
+      for (const el of elements) {
+        if (target === el || el.contains(target)) {
+          return
+        }
+      }
+
+      listener(evt)
+    }
+
+    window.addEventListener('mousedown', handleWindowMouseDown)
+
+    return () => {
+      window.removeEventListener('mousedown', handleWindowMouseDown)
+    }
+  }, [boundaryElement, listener, elements])
+
+  return setElement
+}

package/src/hooks/useCustomValidity.ts

@@ -0,0 +1,15 @@
+import {useEffect} from 'react'
+
+/**
+ * @beta
+ */
+export function useCustomValidity(
+  ref: {current: null | {setCustomValidity: (validity: string) => void}},
+  customValidity: string | undefined
+): void {
+  useEffect(() => {
+    if (ref.current) {
+      ref.current.setCustomValidity(customValidity || '')
+    }
+  }, [customValidity, ref])
+}

package/src/hooks/useElementRect/__workshop__/.eslintrc

@@ -0,0 +1,5 @@
+{
+  "rules": {
+    "@typescript-eslint/explicit-module-boundary-types": "off"
+  }
+}

package/src/hooks/useElementRect/__workshop__/example.tsx

@@ -0,0 +1,30 @@
+import {Box, Card, Code, Container, Stack, Text, useElementRect} from '@sanity/ui'
+import {useMemo, useState} from 'react'
+import React from 'react'
+import {Grid} from '../../../primitives'
+
+export default function ExampleStory() {
+  const [element, setElement] = useState<HTMLElement | null>(null)
+  const rect = useElementRect(element)
+  const size = useMemo(() => ({width: rect?.width || 0, height: rect?.height || 0}), [rect])
+
+  return (
+    <Box padding={[3, 4, 5]}>
+      <Container width={1}>
+        <Stack space={4}>
+          <Grid columns={[1, 2, 3]}>
+            <Card ref={setElement} tone="transparent">
+              <Text>rect</Text>
+            </Card>
+          </Grid>
+
+          <div style={{height: 11}}>
+            <Card scheme="dark" style={{position: 'absolute', ...size}} />
+          </div>
+
+          <Code language="json">{JSON.stringify(size)}</Code>
+        </Stack>
+      </Container>
+    </Box>
+  )
+}

package/src/hooks/useElementRect/__workshop__/index.ts

@@ -0,0 +1,6 @@
+import {defineScope} from '@sanity/ui-workshop'
+import {lazy} from 'react'
+
+export default defineScope('hooks/useElementRect', 'useElementRect', [
+  {name: 'example', title: 'Example', component: lazy(() => import('./example'))},
+])

package/src/hooks/useElementRect/index.ts

@@ -0,0 +1 @@
+export * from './useElementRect'

package/src/hooks/useElementRect/useElementRect.ts

@@ -0,0 +1,23 @@
+import {useEffect, useState} from 'react'
+
+/**
+ * Subscribe to the rect of a DOM element.
+ * @beta
+ */
+export function useElementRect(element: HTMLElement | null): DOMRectReadOnly | null {
+  const [rect, setRect] = useState<DOMRectReadOnly | null>(null)
+
+  useEffect(() => {
+    if (!element) return undefined
+
+    const ro = new ResizeObserver((entries) => {
+      setRect(entries[0].contentRect)
+    })
+
+    ro.observe(element)
+
+    return () => ro.disconnect()
+  }, [element])
+
+  return rect
+}

package/src/hooks/useForwardedRef.ts

@@ -0,0 +1,21 @@
+import React, {useRef} from 'react'
+import {useIsomorphicEffect} from './useIsomorphicEffect'
+
+/**
+ * @beta
+ */
+export function useForwardedRef<T>(ref: React.ForwardedRef<T>): React.MutableRefObject<T | null> {
+  const innerRef = useRef<T | null>(null)
+
+  useIsomorphicEffect(() => {
+    if (!ref) return
+
+    if (typeof ref === 'function') {
+      ref(innerRef.current)
+    } else {
+      ref.current = innerRef.current
+    }
+  })
+
+  return innerRef
+}

package/src/hooks/useGlobalKeyDown.ts

@@ -0,0 +1,12 @@
+import {useEffect} from 'react'
+
+/**
+ * @beta
+ */
+export function useGlobalKeyDown(onKeyDown: (event: KeyboardEvent) => void): void {
+  return useEffect(() => {
+    addEventListener('keydown', onKeyDown)
+
+    return () => removeEventListener('keydown', onKeyDown)
+  }, [onKeyDown])
+}

package/src/hooks/useIsomorphicEffect.ts

@@ -0,0 +1,6 @@
+import {useEffect, useLayoutEffect} from 'react'
+
+/**
+ * @beta
+ */
+export const useIsomorphicEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect

package/src/hooks/useMediaIndex/__workshop__/.eslintrc

@@ -0,0 +1,5 @@
+{
+  "rules": {
+    "@typescript-eslint/explicit-module-boundary-types": "off"
+  }
+}

package/src/hooks/useMediaIndex/__workshop__/index.ts

@@ -0,0 +1,6 @@
+import {defineScope} from '@sanity/ui-workshop'
+import {lazy} from 'react'
+
+export default defineScope('hooks/use-media-index', 'useMediaIndex', [
+  {name: 'test', title: 'Test', component: lazy(() => import('./test'))},
+])

package/src/hooks/useMediaIndex/__workshop__/test.tsx

@@ -0,0 +1,15 @@
+import {Card, Stack, Text, useMediaIndex} from '@sanity/ui'
+import React from 'react'
+
+export default function TestStory() {
+  const mediaIndex = useMediaIndex()
+
+  return (
+    <Card padding={[3, 4, 5]}>
+      <Stack space={2}>
+        <Text weight="semibold">The current media index is {mediaIndex}.</Text>
+        <Text muted>Try resizing the browser.</Text>
+      </Stack>
+    </Card>
+  )
+}

package/src/hooks/useMediaIndex/index.ts

@@ -0,0 +1 @@
+export * from './useMediaIndex'

package/src/hooks/useMediaIndex/lib/media.ts

@@ -0,0 +1,88 @@
+/**
+ * @internal
+ */
+export interface _MediaManager {
+  getCurrentIndex: () => number
+  subscribe: (subscriber: (index: number) => void) => () => void
+}
+
+const MEDIA_MANAGER_CACHE = new WeakMap<number[], _MediaManager>()
+
+function _getMediaQuery(media: number[], index: number) {
+  if (index === 0) {
+    return `screen and (max-width: ${media[index] - 1}px)`
+  }
+
+  if (index === media.length) {
+    return `screen and (min-width: ${media[index - 1]}px)`
+  }
+
+  return `screen and (min-width: ${media[index - 1]}px) and (max-width: ${media[index] - 1}px)`
+}
+
+function _createMediaManager(media: number[]): _MediaManager {
+  const mediaLen = media.length
+  const sizes: {mq: MediaQueryList; index: number}[] = []
+
+  if (typeof window !== 'undefined') {
+    for (let index = mediaLen; index > -1; index -= 1) {
+      const mediaQuery = _getMediaQuery(media, index)
+
+      sizes.push({index, mq: window.matchMedia(mediaQuery)})
+    }
+  }
+
+  const getCurrentIndex = () => {
+    for (const {index, mq} of sizes) {
+      if (mq.matches) return index
+    }
+
+    return 0
+  }
+
+  const subscribe = (subscriber: (index: number) => void) => {
+    const disposeFns: (() => void)[] = []
+
+    for (const {index, mq} of sizes) {
+      const handleChange = () => {
+        if (mq.matches) subscriber(index)
+      }
+
+      if (mq.addEventListener) {
+        mq.addEventListener('change', handleChange)
+      } else {
+        mq.addListener(handleChange)
+      }
+
+      disposeFns.push(() => {
+        if (mq.removeEventListener) {
+          mq.removeEventListener('change', handleChange)
+        } else {
+          mq.removeListener(handleChange)
+        }
+      })
+    }
+
+    return () => {
+      for (const disposeFn of disposeFns) {
+        disposeFn()
+      }
+    }
+  }
+
+  return {getCurrentIndex, subscribe}
+}
+
+/**
+ * @internal
+ */
+export function _getMediaManager(media: number[]): _MediaManager {
+  let manager = MEDIA_MANAGER_CACHE.get(media)
+
+  if (!manager) {
+    manager = _createMediaManager(media)
+    MEDIA_MANAGER_CACHE.set(media, manager)
+  }
+
+  return manager
+}

package/src/hooks/useMediaIndex/useMediaIndex.ts

@@ -0,0 +1,18 @@
+import {useEffect, useMemo, useState} from 'react'
+import {useTheme} from '../../theme'
+import {_getMediaManager} from './lib/media'
+
+/**
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
+ */
+export function useMediaIndex(): number {
+  const theme = useTheme()
+  const {media} = theme.sanity
+  const manager = useMemo(() => _getMediaManager(media), [media])
+  const [index, setIndex] = useState(manager.getCurrentIndex)
+
+  useEffect(() => manager.subscribe(setIndex), [manager])
+
+  return index
+}

package/src/hooks/usePrefersDark.ts

@@ -0,0 +1,22 @@
+import {useEffect, useState} from 'react'
+
+/**
+ * @public
+ */
+export function usePrefersDark(): boolean {
+  const [dark, setDark] = useState(false)
+
+  useEffect(() => {
+    const mq = window.matchMedia('(prefers-color-scheme: dark)')
+
+    setDark(mq.matches)
+
+    const handleChange = () => setDark(mq.matches)
+
+    mq.addEventListener('change', handleChange)
+
+    return () => mq.removeEventListener('change', handleChange)
+  }, [])
+
+  return dark
+}

package/src/hooks/useResponsiveProp.ts

@@ -0,0 +1,10 @@
+import {useMemo} from 'react'
+import {getResponsiveProp} from '../styles'
+
+/**
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
+ */
+export function useResponsiveProp<T = number>(val: T | T[] | undefined, defaultVal?: T[]): T[] {
+  return useMemo(() => getResponsiveProp(val, defaultVal), [defaultVal, val])
+}

package/src/icons/__workshop__/.eslintrc

@@ -0,0 +1,5 @@
+{
+  "rules": {
+    "@typescript-eslint/explicit-module-boundary-types": "off"
+  }
+}

package/src/icons/__workshop__/index.tsx

@@ -0,0 +1,6 @@
+import {defineScope} from '@sanity/ui-workshop'
+import {lazy} from 'react'
+
+export default defineScope('icons', 'Icons', [
+  {name: 'overview', title: 'Overview', component: lazy(() => import('./overview'))},
+])

package/src/icons/__workshop__/overview.tsx

@@ -0,0 +1,76 @@
+import {Icon, icons, IconSymbol, SearchIcon} from '@sanity/icons'
+import {Box, Card, Code, Container, Flex, Heading, Stack, Text, TextInput} from '@sanity/ui'
+import React, {useCallback, useMemo, useState} from 'react'
+import {packages} from '$packages'
+
+function ucfirst(str: string) {
+  return str.slice(0, 1).toUpperCase() + str.slice(1)
+}
+
+function toPascalCase(str: string) {
+  const p = str.split('-')
+
+  return p.map(ucfirst).join('')
+}
+
+export default function OverviewStory() {
+  const [query, setQuery] = useState('')
+
+  const iconKeys = useMemo(() => {
+    return Object.keys(icons).filter((iconKey) => {
+      return query === '' ? true : iconKey.includes(query.toLowerCase())
+    })
+  }, [query])
+
+  const handleQueryChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+    setQuery(event.currentTarget.value)
+  }, [])
+
+  return (
+    <Card padding={[4, 5, 6]}>
+      <Container width={1}>
+        <Stack space={4}>
+          <Heading as="h1">@sanity/icons v{packages.icons?.version}</Heading>
+          <Text as="p" muted>
+            {packages.icons?.description}
+          </Text>
+          <Card border padding={3} radius={2}>
+            <Code language="bash">{`npm install @sanity/icons\n\n# Install peer dependencies\nnpm install react`}</Code>
+          </Card>
+        </Stack>
+
+        <Box marginTop={[3, 4, 5]} marginBottom={3}>
+          <TextInput
+            icon={SearchIcon}
+            onChange={handleQueryChange}
+            placeholder="Filter by name…"
+            radius={2}
+            value={query}
+          />
+        </Box>
+
+        {iconKeys.length === 0 && <Text>No matches</Text>}
+
+        {iconKeys.length > 0 && (
+          <Stack space={3}>
+            {iconKeys.map((iconKey) => (
+              <Card border key={iconKey} overflow="hidden" radius={2}>
+                <Flex align="center" gap={4} padding={4}>
+                  <Heading>
+                    <Icon symbol={iconKey as IconSymbol} />
+                  </Heading>
+                  <Text>{iconKey}</Text>
+                </Flex>
+                <Card overflow="auto" padding={4} tone="transparent">
+                  <Code language="typescript">{`import {${toPascalCase(
+                    iconKey
+                  )}Icon} from '@sanity/icons'`}</Code>
+                </Card>
+              </Card>
+            ))}
+          </Stack>
+        )}
+      </Container>
+    </Card>
+  )
+}

package/src/index.ts

@@ -0,0 +1,8 @@
+export * from './primitives'
+export * from './components'
+export * from './helpers'
+export * from './hooks'
+export * from './styles'
+export * from './theme'
+export * from './types'
+export * from './utils'