@sanity/ui 1.0.0-next.3 → 1.0.1

package/src/primitives/popover/popoverArrow.tsx

@@ -1,65 +1,59 @@
-import {forwardRef, memo} from 'react'
+import {forwardRef} from 'react'
 import styled from 'styled-components'
 import {DEFAULT_POPOVER_ARROW_HEIGHT, DEFAULT_POPOVER_ARROW_WIDTH} from './constants'
 
-const Root = memo(
-  styled.div({
-    position: 'absolute',
-    pointerEvents: 'none',
-    width: `${DEFAULT_POPOVER_ARROW_WIDTH}px`,
-    height: `${DEFAULT_POPOVER_ARROW_WIDTH}px`,
-    fill: 'none',
+const Root = styled.div`
+  position: absolute;
+  pointer-events: none;
+  width: ${DEFAULT_POPOVER_ARROW_WIDTH}px;
+  height: ${DEFAULT_POPOVER_ARROW_WIDTH}px;
+  fill: none;
 
-    ':empty + &': {
-      display: 'none',
-    },
+  :empty + & {
+    display: none;
+  }
 
-    '& > svg': {
-      display: 'block',
-      transformOrigin: `${DEFAULT_POPOVER_ARROW_WIDTH / 2}px ${DEFAULT_POPOVER_ARROW_WIDTH / 2}px`,
-    },
+  & > svg {
+    display: block;
+    transform-origin: ${DEFAULT_POPOVER_ARROW_WIDTH / 2}px ${DEFAULT_POPOVER_ARROW_WIDTH / 2}px;
+  }
 
-    '[data-placement^="top"] > &': {
-      bottom: `-${DEFAULT_POPOVER_ARROW_WIDTH}px`,
-    },
+  [data-placement^='top'] > & {
+    bottom: -${DEFAULT_POPOVER_ARROW_WIDTH}px;
+  }
 
-    '[data-placement^="right"] > &': {
-      left: `-${DEFAULT_POPOVER_ARROW_WIDTH}px`,
+  [data-placement^='right'] > & {
+    left: -${DEFAULT_POPOVER_ARROW_WIDTH}px;
 
-      '& > svg': {
-        transform: 'rotate(90deg)',
-      },
-    },
+    & > svg {
+      transform: rotate(90deg);
+    }
+  }
 
-    '[data-placement^="left"] > &': {
-      right: `-${DEFAULT_POPOVER_ARROW_WIDTH}px`,
+  [data-placement^='left'] > & {
+    right: -${DEFAULT_POPOVER_ARROW_WIDTH}px;
 
-      '& > svg': {
-        transform: 'rotate(-90deg)',
-      },
-    },
+    & > svg {
+      transform: rotate(-90deg);
+    }
+  }
 
-    '[data-placement^="bottom"] > &': {
-      top: `-${DEFAULT_POPOVER_ARROW_WIDTH}px`,
+  [data-placement^='bottom'] > & {
+    top: -${DEFAULT_POPOVER_ARROW_WIDTH}px;
 
-      '& > svg': {
-        transform: 'rotate(180deg)',
-      },
-    },
-  })
-)
+    & > svg {
+      transform: rotate(180deg);
+    }
+  }
+`
 
-const BorderPath = memo(
-  styled.path({
-    fill: 'var(--card-shadow-outline-color)',
-  })
-)
+const BorderPath = styled.path`
+  fill: var(--card-shadow-outline-color);
+`
 
-const ShapePath = memo(
-  styled.path({
-    fill: 'var(--card-bg-color)',
-  })
-)
+const ShapePath = styled.path`
+  fill: var(--card-bg-color);
+`
 
 export const PopoverArrow = forwardRef(function PopoverArrow(
   props: Omit<React.HTMLProps<HTMLDivElement>, 'as'>,

package/src/primitives/popover/popoverCard.tsx

@@ -1,8 +1,8 @@
 import {Strategy} from '@floating-ui/react-dom'
 import React, {CSSProperties, forwardRef, memo, useMemo} from 'react'
-import {CSSObject} from 'styled-components'
+import styled, {CSSObject} from 'styled-components'
 import {FLOATING_STATIC_SIDES} from '../../constants'
-import {compose, ThemeProps} from '../../styles'
+import {ThemeProps} from '../../styles'
 import {ThemeColorSchemeKey} from '../../theme'
 import {BoxOverflow, CardTone, Placement, PopoverMargins} from '../../types'
 import {useLayer} from '../../utils'
@@ -31,13 +31,15 @@ function popoverCardStyle(props: {$boundaryWidth?: number} & ThemeProps): CSSObj
       typeof $boundaryWidth === 'number'
         ? `${$boundaryWidth - DEFAULT_POPOVER_PADDING * 2}px`
         : undefined,
-
-    height: 'max-content',
-    minHeight: 'min-content',
   }
 }
 
-const Root = memo(compose<{$boundaryWidth?: number}>(Card, [popoverCardStyle]))
+const Root = memo(styled(Card)(popoverCardStyle))
+
+const PopoverContainer = memo(styled(Container)`
+  max-height: inherit;
+  max-width: inherit;
+`)
 
 /**
  * @internal
@@ -51,14 +53,11 @@ export const PopoverCard = memo(
       arrowRef: React.Ref<HTMLDivElement>
       arrowX?: number
       arrowY?: number
-      availableHeight?: number
-      availableWidth?: number
       boundaryWidth?: number
       overflow?: BoxOverflow
       padding?: number | number[]
       placement?: Placement
       radius?: number | number[]
-      referenceWidth?: number
       scheme?: ThemeColorSchemeKey
       shadow?: number | number[]
       strategy: Strategy
@@ -75,15 +74,12 @@ export const PopoverCard = memo(
       arrowRef,
       arrowX,
       arrowY,
-      availableHeight,
-      availableWidth,
       boundaryWidth,
       children,
       padding,
       placement,
       overflow,
       radius,
-      referenceWidth: referenceWidthProp,
       scheme,
       shadow,
       strategy,
@@ -104,10 +100,6 @@ export const PopoverCard = memo(
     )
 
     // Translate according to margins
-    const referenceWidth = referenceWidthProp
-      ? referenceWidthProp - margins[1] - margins[3]
-      : undefined
-
     const x = (xProp ?? 0) + margins[3]
     const y = (yProp ?? 0) + margins[0]
 
@@ -117,12 +109,9 @@ export const PopoverCard = memo(
         top: y,
         left: x,
         zIndex,
-        width: referenceWidth,
-        maxWidth: availableWidth,
-        maxHeight: availableHeight,
         ...style,
       }),
-      [availableHeight, availableWidth, referenceWidth, strategy, style, x, y, zIndex]
+      [strategy, style, x, y, zIndex]
     )
 
     const staticSide = placement && FLOATING_STATIC_SIDES[placement.split('-')[0]]
@@ -150,10 +139,11 @@ export const PopoverCard = memo(
         ref={ref}
         scheme={scheme}
         shadow={shadow}
+        sizing="border"
         style={rootStyle}
         tone={tone}
       >
-        <Container
+        <PopoverContainer
           data-ui="Popover__wrapper"
           flex={1}
           overflow={overflow}
@@ -162,7 +152,7 @@ export const PopoverCard = memo(
           width={width}
         >
           {children}
-        </Container>
+        </PopoverContainer>
 
         {arrow && <PopoverArrow ref={arrowRef} style={arrowStyle} />}
       </Root>

package/src/primitives/radio/__workshop__/index.ts

@@ -1,7 +1,11 @@
 import {defineScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
-export default defineScope('primitives/radio', 'Radio', [
-  {name: 'plain', title: 'Plain', component: lazy(() => import('./plain'))},
-  {name: 'example', title: 'Example', component: lazy(() => import('./example'))},
-])
+export default defineScope({
+  name: 'primitives/radio',
+  title: 'Radio',
+  stories: [
+    {name: 'plain', title: 'Plain', component: lazy(() => import('./plain'))},
+    {name: 'example', title: 'Example', component: lazy(() => import('./example'))},
+  ],
+})

package/src/primitives/radio/radio.tsx

@@ -1,4 +1,4 @@
-import {forwardRef, memo} from 'react'
+import {forwardRef} from 'react'
 import styled from 'styled-components'
 import {useForwardedRef, useCustomValidity} from '../../hooks'
 import {radioBaseStyle, inputElementStyle} from './styles'
@@ -10,8 +10,8 @@ export interface RadioProps {
   customValidity?: string
 }
 
-const Root = memo(styled.div(radioBaseStyle))
-const Input = memo(styled.input(inputElementStyle))
+const Root = styled.div(radioBaseStyle)
+const Input = styled.input(inputElementStyle)
 
 /**
  * @public

package/src/primitives/radio/styles.ts

@@ -1,105 +1,105 @@
-import {CSSObject} from 'styled-components'
+import {css, FlattenSimpleInterpolation} from 'styled-components'
 import {rem, ThemeProps} from '../../styles'
 import {focusRingBorderStyle, focusRingStyle} from '../../styles/internal'
 
-export function radioBaseStyle(): CSSObject {
-  return {
-    position: 'relative',
+export function radioBaseStyle(): FlattenSimpleInterpolation {
+  return css`
+    position: relative;
 
-    '&:not([hidden])': {
-      display: 'inline-block',
-    },
+    &:not([hidden]) {
+      display: inline-block;
+    }
 
-    '&[data-read-only]': {
-      outline: '1px solid red',
-    },
-  }
+    &[data-read-only] {
+      outline: 1px solid red;
+    }
+  `
 }
 
-export function inputElementStyle(props: ThemeProps): CSSObject {
+export function inputElementStyle(props: ThemeProps): FlattenSimpleInterpolation {
   const {theme} = props
   const {focusRing, input} = theme.sanity
   const color = theme.sanity.color.input
   const dist = (input.radio.size - input.radio.markSize) / 2
 
-  return {
-    appearance: 'none',
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    opacity: 0,
-    height: '100%',
-    width: '100%',
-    outline: 'none',
-    zIndex: 1,
-    padding: 0,
-    margin: 0,
-    borderRadius: rem(input.radio.size / 2),
-    border: 'none',
+  return css`
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    opacity: 0;
+    height: 100%;
+    width: 100%;
+    outline: none;
+    z-index: 1;
+    padding: 0;
+    margin: 0;
+    border-radius: ${rem(input.radio.size / 2)};
+    border: none;
 
     /* enabled */
-    '& + span': {
-      display: 'block',
-      position: 'relative',
-      height: rem(input.radio.size),
-      width: rem(input.radio.size),
-      borderRadius: rem(input.radio.size / 2),
-      background: color.default.enabled.bg,
-      boxShadow: focusRingBorderStyle({
+    & + span {
+      display: block;
+      position: relative;
+      height: ${rem(input.radio.size)};
+      width: ${rem(input.radio.size)};
+      border-radius: ${rem(input.radio.size / 2)};
+      background: ${color.default.enabled.bg};
+      box-shadow: ${focusRingBorderStyle({
         color: color.default.enabled.border,
         width: input.border.width,
-      }),
+      })};
 
-      '&::after': {
-        content: '""',
-        position: 'absolute',
-        top: rem(dist),
-        left: rem(dist),
-        height: rem(input.radio.markSize),
-        width: rem(input.radio.markSize),
-        borderRadius: rem(input.radio.markSize / 2),
-        background: color.default.enabled.fg,
-        opacity: 0,
-      },
-    },
+      &::after {
+        content: '';
+        position: absolute;
+        top: ${rem(dist)};
+        left: ${rem(dist)};
+        height: ${rem(input.radio.markSize)};
+        width: ${rem(input.radio.markSize)};
+        border-radius: ${rem(input.radio.markSize / 2)};
+        background: ${color.default.enabled.fg};
+        opacity: 0;
+      }
+    }
 
     /* focused */
-    '&:not(:disabled):focus + span': {
-      boxShadow: focusRingStyle({
+    &:not(:disabled):focus + span {
+      box-shadow: ${focusRingStyle({
         border: {width: input.border.width, color: color.default.enabled.border},
         focusRing,
-      }),
-    },
+      })};
+    }
 
-    '&:not(:disabled):focus:not(:focus-visible) + span': {
-      boxShadow: focusRingBorderStyle({
+    &:not(:disabled):focus:not(:focus-visible) + span {
+      box-shadow: ${focusRingBorderStyle({
         color: color.default.enabled.border,
         width: input.border.width,
-      }),
-    },
+      })};
+    }
 
-    '&:checked + span::after': {
-      opacity: 1,
-    },
+    &:checked + span::after {
+      opacity: 1;
+    }
 
     /* read only */
-    '&[data-read-only] + span': {
-      boxShadow: `0 0 0 1px ${color.default.readOnly.border}`,
-      background: color.default.readOnly.bg,
+    &[data-read-only] + span {
+      box-shadow: 0 0 0 1px ${color.default.readOnly.border};
+      background: ${color.default.readOnly.bg};
 
-      '&::after': {
-        background: color.default.readOnly.fg,
-      },
-    },
+      &::after {
+        background: ${color.default.readOnly.fg};
+      }
+    }
 
     /* disabled */
-    '&:not([data-read-only]):disabled + span': {
-      boxShadow: `0 0 0 1px ${color.default.disabled.border}`,
-      background: color.default.disabled.bg,
+    &:not([data-read-only]):disabled + span {
+      box-shadow: 0 0 0 1px ${color.default.disabled.border};
+      background: ${color.default.disabled.bg};
 
-      '&::after': {
-        background: color.default.disabled.fg,
-      },
-    },
-  }
+      &::after {
+        background: ${color.default.disabled.fg};
+      }
+    }
+  `
 }

package/src/primitives/select/__workshop__/index.ts

@@ -1,7 +1,11 @@
 import {defineScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
-export default defineScope('primitives/select', 'Select', [
-  {name: 'plain', title: 'Plain', component: lazy(() => import('./plain'))},
-  {name: 'read-only', title: 'Read-only', component: lazy(() => import('./readOnly'))},
-])
+export default defineScope({
+  name: 'primitives/select',
+  title: 'Select',
+  stories: [
+    {name: 'plain', title: 'Plain', component: lazy(() => import('./plain'))},
+    {name: 'read-only', title: 'Read-only', component: lazy(() => import('./readOnly'))},
+  ],
+})

package/src/primitives/select/select.tsx

@@ -1,5 +1,5 @@
 import {SelectIcon} from '@sanity/icons'
-import {forwardRef, memo} from 'react'
+import {forwardRef} from 'react'
 import styled from 'styled-components'
 import {useForwardedRef, useCustomValidity, useArrayProp} from '../../hooks'
 import {Box} from '../box'
@@ -17,18 +17,16 @@ export interface SelectProps {
   customValidity?: string
 }
 
-const Root = memo(styled.div(selectStyle.root))
+const Root = styled.div(selectStyle.root)
 
-const Input = memo(
-  styled.select<{
-    $fontSize: number[]
-    $padding: number[]
-    $radius: number[]
-    $space: number[]
-  }>(selectStyle.input)
-)
+const Input = styled.select<{
+  $fontSize: number[]
+  $padding: number[]
+  $radius: number[]
+  $space: number[]
+}>(selectStyle.input)
 
-const IconBox = memo(styled(Box)(selectStyle.iconBox))
+const IconBox = styled(Box)(selectStyle.iconBox)
 
 /**
  * @public