@sanity/ui 0.37.2 → 0.37.3

package/src/helpers/focus.ts

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

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

package/src/helpers/scroll.ts

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

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

package/src/hooks/_internal/useUnique.ts

@@ -1,18 +0,0 @@
-import {isEqual} from 'lodash'
-import {useRef} from 'react'
-
-/**
- * This is React hook – an and escape hatch – to make sure that a value is the same
- * on every render. SHOULD NOT BE USED IN MOST CASES.
- *
- * @internal
- */
-export function useUnique<ValueType>(value: ValueType): ValueType {
-  const valueRef = useRef<ValueType>(value)
-
-  if (!isEqual(valueRef.current, value)) {
-    valueRef.current = value
-  }
-
-  return valueRef.current
-}

package/src/hooks/index.ts

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

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

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

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

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

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

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

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

package/src/hooks/useElementRect/useElementRect.ts

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

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

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

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

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

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

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

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

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

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

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

@@ -1,88 +0,0 @@
-/**
- * @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

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

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

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

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

package/src/icons/__workshop__/index.tsx

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

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

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