@sanity/ui 2.10.0-corel.0 → 3.0.0-static.1

package/src/core/components/toast/toastProvider.tsx

@@ -1,6 +1,5 @@
 import {AnimatePresence, motion, type Variants} from 'framer-motion'
 import {useMemo, useRef, useState, startTransition, useEffect} from 'react'
-import {styled} from 'styled-components'
 import {POPOVER_MOTION_CONTENT_OPACITY_PROPERTY} from '../../constants'
 import {useMounted} from '../../hooks/useMounted'
 import {usePrefersReducedMotion} from '../../hooks/usePrefersReducedMotion'
@@ -27,24 +26,6 @@ export interface ToastProviderProps {
   zOffset?: number | number[]
 }
 
-const Root = styled(Layer)`
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  pointer-events: none;
-`
-
-const ToastContainer = styled.div`
-  box-sizing: border-box;
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  max-width: 420px;
-  width: 100%;
-`
-
 let toastId = 0
 
 /**
@@ -153,8 +134,27 @@ export function ToastProvider(props: ToastProviderProps): React.ReactElement {
     <ToastContext.Provider value={value}>
       {children}
       {mounted && (
-        <Root data-ui="ToastProvider" zOffset={zOffset}>
-          <ToastContainer>
+        <Layer
+          // root
+          data-ui="ToastProvider"
+          inset={0}
+          pointerEvents="none"
+          position="fixed"
+          zOffset={zOffset}
+          width="fill"
+        >
+          <Box
+            // container
+            position="absolute"
+            sizing="border"
+            style={{
+              // todo: move to css?
+              right: 0,
+              bottom: 0,
+              maxWidth: 420,
+            }}
+            width="fill"
+          >
             <Box padding={padding} paddingX={paddingX} paddingY={paddingY}>
               <AnimatePresence initial={false}>
                 {state.map(({dismiss, id, params}) => (
@@ -183,8 +183,8 @@ export function ToastProvider(props: ToastProviderProps): React.ReactElement {
                 ))}
               </AnimatePresence>
             </Box>
-          </ToastContainer>
-        </Root>
+          </Box>
+        </Layer>
       )}
     </ToastContext.Provider>
   )

package/src/core/components/tree/tree.tsx

@@ -1,3 +1,5 @@
+import {ResponsiveProp} from '@sanity/ui/css'
+import {Space} from '@sanity/ui/theme'
 import {
   forwardRef,
   memo,
@@ -18,7 +20,7 @@ import {TreeContextValue, TreeState} from './types'
  * @beta
  */
 export interface TreeProps {
-  space?: number | number[]
+  space?: ResponsiveProp<Space>
 }
 
 /**
@@ -28,7 +30,10 @@ export interface TreeProps {
 export const Tree = memo(
   forwardRef(function Tree(
     props: TreeProps &
-      Omit<React.HTMLProps<HTMLDivElement>, 'align' | 'as' | 'height' | 'ref' | 'role' | 'wrap'>,
+      Omit<
+        React.HTMLProps<HTMLDivElement>,
+        'align' | 'as' | 'height' | 'ref' | 'rows' | 'role' | 'width' | 'wrap'
+      >,
     forwardedRef: React.ForwardedRef<HTMLDivElement>,
   ): React.ReactElement {
     const {children, space = 1, onFocus, ...restProps} = props

package/src/core/components/tree/treeGroup.tsx

@@ -8,7 +8,10 @@ export interface TreeGroupProps {
 
 export const TreeGroup = memo(function TreeGroup(
   props: TreeGroupProps &
-    Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'ref' | 'role' | 'wrap'>,
+    Omit<
+      React.HTMLProps<HTMLDivElement>,
+      'as' | 'height' | 'ref' | 'role' | 'rows' | 'width' | 'wrap'
+    >,
 ): React.ReactElement {
   const {children, expanded = false, ...restProps} = props
   const tree = useTree()

package/src/core/components/tree/treeItem.tsx

@@ -1,14 +1,8 @@
 import {ToggleArrowRightIcon} from '@sanity/icons'
-import {ThemeFontWeightKey} from '@sanity/ui/theme'
+import {composeClassNames, ResponsiveProp, treeItem} from '@sanity/ui/css'
+import {Space, ThemeFontWeightKey} from '@sanity/ui/theme'
 import {memo, useCallback, useEffect, useId, useMemo, useRef} from 'react'
-import {styled} from 'styled-components'
 import {Box, BoxProps, Flex, Text} from '../../primitives'
-import {
-  treeItemRootStyle,
-  treeItemRootColorStyle,
-  treeItemBoxStyle,
-  TreeItemBoxStyleProps,
-} from './style'
 import {TreeContext} from './treeContext'
 import {TreeGroup} from './treeGroup'
 import {useTree} from './useTree'
@@ -25,30 +19,25 @@ export interface TreeItemProps {
    */
   linkAs?: BoxProps['as']
   padding?: number | number[]
-  space?: number | number[]
+  space?: ResponsiveProp<Space>
   text?: React.ReactNode
   weight?: ThemeFontWeightKey
 }
 
-const Root = memo(styled.li(treeItemRootStyle, treeItemRootColorStyle))
-
-const TreeItemBox = styled(Box).attrs({forwardedAs: 'a'})<TreeItemBoxStyleProps>(treeItemBoxStyle)
-
-const ToggleArrowText = styled(Text)`
-  & > svg {
-    transition: transform 100ms;
-  }
-`
-
 /**
  * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
  */
 export const TreeItem = memo(function TreeItem(
-  props: TreeItemProps & Omit<React.HTMLProps<HTMLLIElement>, 'as' | 'ref' | 'role'>,
+  props: TreeItemProps &
+    Omit<
+      React.HTMLProps<HTMLDivElement>,
+      'as' | 'height' | 'ref' | 'role' | 'rows' | 'width' | 'wrap'
+    >,
 ): React.ReactElement {
   const {
     children,
+    className,
     expanded: expandedProp = false,
     fontSize = 1,
     href,
@@ -64,7 +53,7 @@ export const TreeItem = memo(function TreeItem(
     weight,
     ...restProps
   } = props
-  const rootRef = useRef<HTMLLIElement | null>(null)
+  const rootRef = useRef<HTMLDivElement | null>(null)
   const treeitemRef = useRef<HTMLDivElement | null>(null)
   const tree = useTree()
   const {path, registerItem, setExpanded, setFocusedElement} = tree
@@ -82,7 +71,7 @@ export const TreeItem = memo(function TreeItem(
   )
 
   const handleClick = useCallback(
-    (event: React.MouseEvent<HTMLLIElement>) => {
+    (event: React.MouseEvent<HTMLDivElement>) => {
       if (onClick) onClick(event)
 
       const target = event.target
@@ -118,9 +107,9 @@ export const TreeItem = memo(function TreeItem(
   }, [expanded, itemPath, registerItem, selected])
 
   const content = (
-    <Flex padding={padding}>
+    <Flex gap={space} padding={padding}>
       <Box
-        marginRight={space}
+        // marginRight={space}
         style={{
           visibility: IconComponent || children ? 'visible' : 'hidden',
           pointerEvents: 'none',
@@ -132,9 +121,14 @@ export const TreeItem = memo(function TreeItem(
           </Text>
         )}
         {!IconComponent && (
-          <ToggleArrowText muted={muted} size={fontSize} weight={weight}>
+          <Text
+            // ToggleArrowText
+            muted={muted}
+            size={fontSize}
+            weight={weight}
+          >
             <ToggleArrowRightIcon style={{transform: expanded ? 'rotate(90deg)' : undefined}} />
-          </ToggleArrowText>
+          </Text>
         )}
       </Box>
       <Box flex={1}>
@@ -147,18 +141,20 @@ export const TreeItem = memo(function TreeItem(
 
   if (href) {
     return (
-      <Root
+      <Box
         data-selected={selected ? '' : undefined}
         data-tree-id={id}
         data-tree-key={itemKey}
         data-ui="TreeItem"
         {...restProps}
+        as="li"
+        className={composeClassNames(className, treeItem())}
         onClick={handleClick}
         ref={rootRef}
         role="none"
       >
-        <TreeItemBox
-          $level={tree.level}
+        <Box
+          // $level={tree.level}
           aria-expanded={expanded}
           as={linkAs}
           data-ui="TreeItem__box"
@@ -166,19 +162,23 @@ export const TreeItem = memo(function TreeItem(
           ref={treeitemRef}
           role="treeitem"
           tabIndex={tabIndex}
+          // todo
+          style={{
+            paddingLeft: `calc(var(--space-2) * ${tree.level})`,
+          }}
         >
           {content}
-        </TreeItemBox>
+        </Box>
 
         <TreeContext.Provider value={contextValue}>
           {children && <TreeGroup hidden={!expanded}>{children}</TreeGroup>}
         </TreeContext.Provider>
-      </Root>
+      </Box>
     )
   }
 
   return (
-    <Root
+    <Box
       data-selected={selected ? '' : undefined}
       data-ui="TreeItem"
       data-tree-id={id}
@@ -191,14 +191,23 @@ export const TreeItem = memo(function TreeItem(
       role="treeitem"
       tabIndex={tabIndex}
     >
-      <TreeItemBox $level={tree.level} as="div" data-ui="TreeItem__box">
+      <Box
+        // $level={tree.level}
+        as="div"
+        data-ui="TreeItem__box"
+        // todo
+        style={{
+          paddingLeft: `calc(var(--space-2) * ${tree.level})`,
+        }}
+      >
         {content}
-      </TreeItemBox>
+      </Box>
 
       <TreeContext.Provider value={contextValue}>
         {children && <TreeGroup expanded={expanded}>{children}</TreeGroup>}
       </TreeContext.Provider>
-    </Root>
+    </Box>
   )
 })
+
 TreeItem.displayName = 'Memo(TreeItem)'

package/src/core/components/tree/types.ts

@@ -1,3 +1,6 @@
+import {ResponsiveProp} from '@sanity/ui/css'
+import {Space} from '@sanity/ui/theme'
+
 /**
  * @beta
  */
@@ -16,6 +19,7 @@ export interface TreeContextValue {
   registerItem: (element: HTMLElement, path: string, expanded: boolean, selected: boolean) => void
   setExpanded: (path: string, expanded: boolean) => void
   setFocusedElement: (focusedElement: HTMLElement | null) => void
-  space: number | number[]
+  // space: number | number[]
+  space: ResponsiveProp<Space>
   state: TreeState
 }

package/src/core/hooks/useArrayProp.ts

@@ -1,5 +1,5 @@
 import {useMemo} from 'react'
-import {_getArrayProp} from '../styles'
+import {_getArrayProp} from '../_compat'
 
 /** @beta */
 export type ArrayPropPrimitive = string | number | boolean | undefined | null

package/src/core/index.ts

@@ -5,7 +5,6 @@ export * from './components'
 export * from './helpers'
 export * from './hooks'
 export * from './observers'
-export * from './styles'
 export * from './theme'
 export * from './types'
 export * from './utils'

package/src/core/lib/styled/elements.ts

@@ -0,0 +1,135 @@
+export const elements = [
+  'a',
+  'abbr',
+  'address',
+  'area',
+  'article',
+  'aside',
+  'audio',
+  'b',
+  'base',
+  'bdi',
+  'bdo',
+  'big',
+  'blockquote',
+  'body',
+  'br',
+  'button',
+  'canvas',
+  'caption',
+  'cite',
+  'code',
+  'col',
+  'colgroup',
+  'data',
+  'datalist',
+  'dd',
+  'del',
+  'details',
+  'dfn',
+  'dialog',
+  'div',
+  'dl',
+  'dt',
+  'em',
+  'embed',
+  'fieldset',
+  'figcaption',
+  'figure',
+  'footer',
+  'form',
+  'h1',
+  'h2',
+  'h3',
+  'h4',
+  'h5',
+  'h6',
+  'header',
+  'hgroup',
+  'hr',
+  'html',
+  'i',
+  'iframe',
+  'img',
+  'input',
+  'ins',
+  'kbd',
+  'keygen',
+  'label',
+  'legend',
+  'li',
+  'link',
+  'main',
+  'map',
+  'mark',
+  'menu',
+  'menuitem',
+  'meta',
+  'meter',
+  'nav',
+  'noscript',
+  'object',
+  'ol',
+  'optgroup',
+  'option',
+  'output',
+  'p',
+  'param',
+  'picture',
+  'pre',
+  'progress',
+  'q',
+  'rp',
+  'rt',
+  'ruby',
+  's',
+  'samp',
+  'script',
+  'section',
+  'select',
+  'small',
+  'source',
+  'span',
+  'strong',
+  'style',
+  'sub',
+  'summary',
+  'sup',
+  'table',
+  'tbody',
+  'td',
+  'textarea',
+  'tfoot',
+  'th',
+  'thead',
+  'time',
+  'tr',
+  'track',
+  'u',
+  'ul',
+  'use',
+  'var',
+  'video',
+  'wbr', // SVG
+  'circle',
+  'clipPath',
+  'defs',
+  'ellipse',
+  'foreignObject',
+  'g',
+  'image',
+  'line',
+  'linearGradient',
+  'marker',
+  'mask',
+  'path',
+  'pattern',
+  'polygon',
+  'polyline',
+  'radialGradient',
+  'rect',
+  'stop',
+  'svg',
+  'text',
+  'tspan',
+] as const

package/src/core/lib/styled/index.ts

@@ -0,0 +1,2 @@
+export * from './members'
+export * from './styled'

package/src/core/lib/styled/members.ts

@@ -0,0 +1,15 @@
+import {
+  css as _css,
+  createGlobalStyle as _createGlobalStyle,
+  type ExecutionContext as _ExecutionContext,
+  keyframes as _keyframes,
+  // ThemeProvider as _ThemeProvider,
+  useTheme as _useTheme,
+} from 'styled-components'
+
+export const createGlobalStyle = _createGlobalStyle
+export const css = _css
+export type ExecutionContext = _ExecutionContext
+export const keyframes = _keyframes
+// export const ThemeProvider = _ThemeProvider
+export const useTheme = _useTheme

package/src/core/lib/styled/styled.ts

@@ -0,0 +1,79 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+
+import {createElement, forwardRef} from 'react'
+import {styled as _styled} from 'styled-components'
+import {elements} from './elements'
+
+const baseStyled = (tagName: string): any => {
+  const m = (_strings: TemplateStringsArray, ..._interpolations: any[]) => {
+    const Styled = forwardRef(function Styled(props: any, ref: any) {
+      const {as, forwardedAs, ...rest} = props
+
+      const sanitizedProps = Object.fromEntries(
+        Object.entries(rest)
+          .filter(([, val]) => Boolean(val) && (!isArray(val) || val.length > 0))
+          .map(([key, val]) => {
+            if (key.startsWith('$')) {
+              return [`data-${toSnakeCase(key.slice(1))}`, val]
+            }
+
+            return [key, val]
+          }),
+      )
+
+      const t = as ?? tagName
+
+      return createElement(t, {...sanitizedProps, as: forwardedAs, ref})
+    })
+
+    Styled.displayName = `Styled(${typeof tagName === 'function' ? (tagName as any).displayName : tagName})`
+
+    return Styled
+  }
+
+  m['attrs'] = (attrs: any) => {
+    return (_strings: TemplateStringsArray, ..._interpolations: any[]) => {
+      const StyledAttrs = forwardRef(function StyledAttrs(_props: any, ref: any) {
+        const props = {...attrs, ..._props}
+        const {as, forwardedAs, ...rest} = props
+
+        const sanitizedProps = Object.fromEntries(
+          Object.entries(rest)
+            .filter(([, val]) => Boolean(val) && (!isArray(val) || val.length > 0))
+            .map(([key, val]) => {
+              if (key.startsWith('$')) {
+                return [`data-${toSnakeCase(key.slice(1))}`, val]
+              }
+
+              return [key, val]
+            }),
+        )
+
+        const t = as ?? tagName
+
+        return createElement(t, {...sanitizedProps, as: forwardedAs, ref})
+      })
+
+      StyledAttrs.displayName = `StyledAttrs(${typeof tagName === 'function' ? (tagName as any).displayName : tagName})`
+
+      return StyledAttrs
+    }
+  }
+
+  return m
+}
+
+export const styled = baseStyled as typeof _styled
+
+for (const tagName of elements) {
+  ;(styled as any)[tagName] = baseStyled(tagName)
+}
+
+function toSnakeCase(str: string): string {
+  return str.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`)
+}
+
+function isArray(value: unknown): value is unknown[] {
+  return Array.isArray(value)
+}

package/src/core/primitives/_selectable/selectable.tsx

@@ -1,14 +1,27 @@
-import {styled} from 'styled-components'
-import {responsiveRadiusStyle, ResponsiveRadiusStyleProps} from '../../styles/radius'
-import {Box} from '../box'
-import {selectableBaseStyle, selectableColorStyle, SelectableStyleProps} from './style'
-
-/**
- * @internal
- */
-export const Selectable = styled(Box)<SelectableStyleProps & ResponsiveRadiusStyleProps>(
-  responsiveRadiusStyle,
-  selectableBaseStyle,
-  selectableColorStyle,
-)
-Selectable.displayName = 'Selectable'
+import {composeClassNames, selectable, SelectableStyleProps} from '@sanity/ui/css'
+import {ForwardedRef, forwardRef, HTMLProps} from 'react'
+import {SelectableTone} from '../../types'
+import {Box, BoxProps} from '../box'
+
+/** @internal */
+export interface SelectableProps extends BoxProps, SelectableStyleProps {
+  tone?: SelectableTone
+}
+
+/** @internal */
+export const Selectable = forwardRef(function Selectable(
+  props: SelectableProps & Omit<HTMLProps<HTMLDivElement>, 'as' | 'height' | 'wrap' | 'width'>,
+  ref: ForwardedRef<HTMLDivElement>,
+) {
+  const {className, radius, tone, ...restProps} = props
+
+  return (
+    <Box
+      {...restProps}
+      className={composeClassNames(className, selectable({radius, tone}))}
+      ref={ref}
+    />
+  )
+})
+
+Selectable.displayName = 'ForwardRef(Selectable)'