@sanity/ui 3.3.1 → 3.3.2

package/src/core/primitives/tooltip/__workshop__/overflowingBoundary.tsx

@@ -1,74 +0,0 @@
-import {BoundaryElementProvider, Button, Card, Code, Flex, Stack, Text, Tooltip} from '@sanity/ui'
-import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
-import {useCallback, useState} from 'react'
-
-import {WORKSHOP_PLACEMENT_OPTIONS} from '../../../__workshop__/constants'
-
-export default function OverflowingBoundaryStory() {
-  const content = useText(
-    'Content',
-    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mollis consectetur malesuada. Sed lobortis est dolor, eget imperdiet velit placerat et. Aenean posuere mi non aliquet iaculis. Donec fermentum pulvinar purus at sagittis. Ut tincidunt massa odio, sed finibus justo ullamcorper id. Nam venenatis justo non ligula elementum cursus. Pellentesque laoreet justo in mollis sagittis. In lacinia ornare ultrices. Suspendisse potenti.',
-  )
-  const placement = useSelect('Placement', WORKSHOP_PLACEMENT_OPTIONS, 'top')
-  const portal = useBoolean('Portal', false)
-  const useBoundaryElement = useBoolean('Use boundary element', true)
-
-  const [boundaryElement, setBoundaryElement] = useState<HTMLDivElement | null>(null)
-  const [buttonsVisible, setButtonsVisible] = useState(true)
-
-  const handleHideButtons = useCallback(() => {
-    setButtonsVisible(false)
-  }, [])
-
-  const handleShowButtons = useCallback(() => {
-    setButtonsVisible(true)
-  }, [])
-
-  return (
-    <Flex align="center" height="fill" justify="center" style={{height: '200vh'}}>
-      <BoundaryElementProvider element={useBoundaryElement ? boundaryElement : null}>
-        <Card
-          border
-          ref={setBoundaryElement}
-          style={{
-            height: 'calc(100vh - 100px)',
-            overflow: 'hidden',
-            position: 'relative',
-            resize: 'both',
-            width: '500px',
-          }}
-        >
-          <Flex align="center" height="fill" justify="center">
-            <Flex justify="center">
-              <Stack space={2}>
-                <Code size={1}>Placement: {placement}</Code>
-                <Button
-                  disabled={buttonsVisible}
-                  fontSize={1}
-                  onClick={handleShowButtons}
-                  text="Show buttons"
-                />
-              </Stack>
-            </Flex>
-          </Flex>
-
-          {buttonsVisible && (
-            <Tooltip
-              content={<Text size={1}>{content}</Text>}
-              padding={2}
-              placement={placement}
-              portal={portal}
-            >
-              <Button
-                mode="bleed"
-                onClick={handleHideButtons}
-                style={{position: 'absolute', top: 10, right: 10}}
-                text="Tooltip"
-              />
-            </Tooltip>
-          )}
-        </Card>
-      </BoundaryElementProvider>
-    </Flex>
-  )
-}

package/src/core/primitives/tooltip/__workshop__/props.tsx

@@ -1,107 +0,0 @@
-import {Button, Card, Flex, Stack, Text, Tooltip, TooltipDelayGroupProvider} from '@sanity/ui'
-import {useBoolean, useNumber, useSelect, useText} from '@sanity/ui-workshop'
-
-import {
-  WORKSHOP_PLACEMENT_OPTIONS,
-  WORKSHOP_SHADOW_OPTIONS,
-  WORKSHOP_SPACE_OPTIONS,
-} from '../../../__workshop__/constants'
-
-export default function PropsStory() {
-  const content = useText('Content', 'Tooltip content')
-  const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 2, 'Props')
-  const placement = useSelect('Placement', WORKSHOP_PLACEMENT_OPTIONS, 'top')
-  const portal = useBoolean('Portal', true)
-  const openDelay = useNumber('Open Delay', 200) || 0
-  const closeDelay = useNumber('Close Delay', 200) || 0
-  const shadow = useSelect('Shadow', WORKSHOP_SHADOW_OPTIONS, 2)
-
-  return (
-    <Card height="fill">
-      <Flex
-        height="fill"
-        align="center"
-        justify="center"
-        padding={8}
-        sizing="border"
-        direction="column"
-        gap={4}
-      >
-        <Stack
-          padding={4}
-          style={{outline: '1px solid var(--card-border-color)', width: '100%', maxWidth: '640px'}}
-          space={4}
-        >
-          <Text align="center" size={3}>
-            Standalone tooltip
-          </Text>
-          <Flex align="center" justify="center" padding={4} sizing="border">
-            <Tooltip
-              content={<Text size={1}>{content}</Text>}
-              padding={padding}
-              placement={placement}
-              portal={portal}
-              shadow={shadow}
-              delay={{
-                open: openDelay,
-                close: closeDelay,
-              }}
-            >
-              <Button mode="bleed" text="Hover me" />
-            </Tooltip>
-          </Flex>
-        </Stack>
-        <Stack
-          padding={4}
-          style={{outline: '1px solid var(--card-border-color)', width: '100%', maxWidth: '640px'}}
-          space={4}
-        >
-          <Text align="center" size={3}>
-            Grouped tooltips
-          </Text>
-          <Text align="center" size={1}>
-            All tooltip delays are set to 1ms after the first tooltip within a DelayGroupProvider
-            opens.
-          </Text>
-          <Flex align="center" justify="center" padding={4} sizing="border" gap={4}>
-            <TooltipDelayGroupProvider
-              delay={{
-                open: openDelay,
-                close: closeDelay,
-              }}
-            >
-              <Tooltip
-                // This is overridden by the group delay, kept here intentionally for testing purposes.
-                delay={{
-                  open: 100,
-                  close: 100,
-                }}
-                content={<Text size={1}>{content}</Text>}
-                padding={padding}
-                placement={placement}
-                portal={portal}
-                shadow={shadow}
-              >
-                <Button mode="bleed" text="Hover me" />
-              </Tooltip>
-              <Tooltip
-                // This is overridden by the group delay, kept here intentionally for testing purposes.
-                delay={{
-                  open: 100,
-                  close: 100,
-                }}
-                content={<Text size={1}>{content}</Text>}
-                padding={padding}
-                placement={placement}
-                portal={portal}
-                shadow={shadow}
-              >
-                <Button mode="bleed" text="Or me" />
-              </Tooltip>
-            </TooltipDelayGroupProvider>
-          </Flex>
-        </Stack>
-      </Flex>
-    </Card>
-  )
-}

package/src/core/primitives/tooltip/__workshop__/resizableBoundary.tsx

@@ -1,86 +0,0 @@
-import {BoundaryElementProvider, Button, Card, Code, Flex, Text, Tooltip} from '@sanity/ui'
-import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
-import {useState} from 'react'
-
-import {WORKSHOP_PLACEMENT_OPTIONS} from '../../../__workshop__/constants'
-
-export default function ResizableBoundaryStory() {
-  const content = useText(
-    'Content',
-    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mollis consectetur malesuada. Sed lobortis est dolor, eget imperdiet velit placerat et. Aenean posuere mi non aliquet iaculis. Donec fermentum pulvinar purus at sagittis. Ut tincidunt massa odio, sed finibus justo ullamcorper id. Nam venenatis justo non ligula elementum cursus. Pellentesque laoreet justo in mollis sagittis. In lacinia ornare ultrices. Suspendisse potenti.',
-  )
-  const placement = useSelect('Placement', WORKSHOP_PLACEMENT_OPTIONS, 'right')
-  const portal = useBoolean('Portal', true)
-  const useBoundaryElement = useBoolean('Use boundary element', true)
-
-  const [boundaryElement, setBoundaryElement] = useState<HTMLDivElement | null>(null)
-
-  return (
-    <Flex align="center" height="fill" justify="center">
-      <BoundaryElementProvider element={useBoundaryElement ? boundaryElement : null}>
-        <Card
-          border
-          ref={setBoundaryElement}
-          style={{
-            height: 'calc(100vh - 100px)',
-            overflow: 'hidden',
-            position: 'relative',
-            resize: 'both',
-            width: '500px',
-          }}
-        >
-          <Flex align="center" height="fill" justify="center">
-            <Flex justify="center">
-              <Code size={1}>Placement: {placement}</Code>
-            </Flex>
-          </Flex>
-
-          <Tooltip
-            content={<Text size={1}>{content}</Text>}
-            padding={2}
-            placement={placement}
-            portal={portal}
-          >
-            <Button mode="bleed" style={{position: 'absolute', top: 10, left: 10}} text="Tooltip" />
-          </Tooltip>
-          <Tooltip
-            content={<Text size={1}>{content}</Text>}
-            padding={2}
-            placement={placement}
-            portal={portal}
-          >
-            <Button
-              mode="bleed"
-              style={{position: 'absolute', top: 10, right: 10}}
-              text="Tooltip"
-            />
-          </Tooltip>
-          <Tooltip
-            content={<Text size={1}>{content}</Text>}
-            padding={2}
-            placement={placement}
-            portal={portal}
-          >
-            <Button
-              mode="bleed"
-              style={{position: 'absolute', bottom: 10, left: 10}}
-              text="Tooltip"
-            />
-          </Tooltip>
-          <Tooltip
-            content={<Text size={1}>{content}</Text>}
-            padding={2}
-            placement={placement}
-            portal={portal}
-          >
-            <Button
-              mode="bleed"
-              style={{position: 'absolute', bottom: 10, right: 10}}
-              text="Tooltip"
-            />
-          </Tooltip>
-        </Card>
-      </BoundaryElementProvider>
-    </Flex>
-  )
-}

package/src/core/theme/__workshop__/build/Root.tsx

@@ -1,367 +0,0 @@
-import {getTheme_v2} from '@sanity/ui/theme'
-import {css, styled} from 'styled-components'
-
-export const Root = styled.div((props) => {
-  const {button, card, input} = getTheme_v2(props.theme)
-
-  return css`
-    background: #000;
-    font-family:
-      Inter,
-      system-ui,
-      -apple-system,
-      BlinkMacSystemFont,
-      'Segoe UI',
-      Roboto,
-      Oxygen,
-      Ubuntu,
-      Cantarell,
-      'Open Sans',
-      'Helvetica Neue',
-      sans-serif;
-    font-size: 13px;
-    line-height: 9px;
-    margin: 0;
-    -webkit-font-smoothing: antialiased;
-    user-select: none;
-
-    pre {
-      font: inherit;
-      font-family: 'SF Mono', Menlo, monospace;
-      margin: 0;
-      padding: 0;
-    }
-
-    .base {
-      background-color: var(--bg);
-      color: var(--fg);
-    }
-
-    .button {
-      --border-width: ${button.border.width}px;
-
-      --bg: var(--button-enabled-bg);
-      --fg: var(--button-enabled-fg);
-      --icon: var(--button-enabled-icon);
-      --border: var(--button-enabled-border);
-      --muted-bg: var(--button-enabled-muted-bg);
-      --muted-fg: var(--button-enabled-muted-fg);
-      --accent-fg: var(--button-enabled-accent-fg);
-      --link-fg: var(--button-enabled-link-fg);
-      --code-bg: var(--button-enabled-code-bg);
-      --code-fg: var(--button-enabled-code-fg);
-      --skeleton-from: var(--button-enabled-skeleton-from);
-      --skeleton-to: var(--button-enabled-skeleton-to);
-
-      background-color: var(--bg);
-      color: var(--fg);
-      box-shadow: inset 0 0 0 var(--border-width) var(--border);
-      text-align: center;
-      border-radius: var(--radius-2);
-      font-weight: 500;
-      cursor: default;
-      transition: box-shadow 50ms ease-in-out;
-      outline: none;
-      justify-content: center;
-      align-items: center;
-
-      &:hover {
-        --bg: var(--button-hovered-bg);
-        --fg: var(--button-hovered-fg);
-        --icon: var(--button-hovered-icon);
-        --border: var(--button-hovered-border);
-        --muted-bg: var(--button-hovered-muted-bg);
-        --muted-fg: var(--button-hovered-muted-fg);
-        --accent-fg: var(--button-hovered-accent-fg);
-        --link-fg: var(--button-hovered-link-fg);
-        --code-bg: var(--button-hovered-code-bg);
-        --code-fg: var(--button-hovered-code-fg);
-        --skeleton-from: var(--button-hovered-skeleton-from);
-        --skeleton-to: var(--button-hovered-skeleton-to);
-      }
-
-      &:focus-visible {
-        box-shadow:
-          inset 0 0 0 var(--border-width) var(--border),
-          0 0 0 1px var(--base-bg),
-          0 0 0 3px var(--focus-ring);
-
-        --bg: var(--button-hovered-bg);
-        --fg: var(--button-hovered-fg);
-        --icon: var(--button-hovered-icon);
-        --border: var(--button-hovered-border);
-        --muted-bg: var(--button-hovered-muted-bg);
-        --muted-fg: var(--button-hovered-muted-fg);
-        --accent-fg: var(--button-hovered-accent-fg);
-        --link-fg: var(--button-hovered-link-fg);
-        --code-bg: var(--button-hovered-code-bg);
-        --code-fg: var(--button-hovered-code-fg);
-        --skeleton-from: var(--button-hovered-skeleton-from);
-        --skeleton-to: var(--button-hovered-skeleton-to);
-      }
-
-      &:active {
-        --bg: var(--button-pressed-bg);
-        --fg: var(--button-pressed-fg);
-        --icon: var(--button-pressed-icon);
-        --border: var(--button-pressed-border);
-        --muted-bg: var(--button-pressed-muted-bg);
-        --muted-fg: var(--button-pressed-muted-fg);
-        --accent-fg: var(--button-pressed-accent-fg);
-        --link-fg: var(--button-pressed-link-fg);
-        --code-bg: var(--button-pressed-code-bg);
-        --code-fg: var(--button-pressed-code-fg);
-        --skeleton-from: var(--button-pressed-skeleton-from);
-        --skeleton-to: var(--button-pressed-skeleton-to);
-      }
-
-      &.selected {
-        --bg: var(--button-selected-bg);
-        --fg: var(--button-selected-fg);
-        --icon: var(--button-selected-icon);
-        --border: var(--button-selected-border);
-        --muted-bg: var(--button-selected-muted-bg);
-        --muted-fg: var(--button-selected-muted-fg);
-        --accent-fg: var(--button-selected-accent-fg);
-        --link-fg: var(--button-selected-link-fg);
-        --code-bg: var(--button-selected-code-bg);
-        --code-fg: var(--button-selected-code-fg);
-        --skeleton-from: var(--button-selected-skeleton-from);
-        --skeleton-to: var(--button-selected-skeleton-to);
-      }
-
-      &.disabled {
-        --bg: var(--button-disabled-bg);
-        --fg: var(--button-disabled-fg);
-        --icon: var(--button-disabled-icon);
-        --border: var(--button-disabled-border);
-        --muted-bg: var(--button-disabled-muted-bg);
-        --muted-fg: var(--button-disabled-muted-fg);
-        --accent-fg: var(--button-disabled-accent-fg);
-        --link-fg: var(--button-disabled-link-fg);
-        --code-bg: var(--button-disabled-code-bg);
-        --code-fg: var(--button-disabled-code-fg);
-        --skeleton-from: var(--button-disabled-skeleton-from);
-        --skeleton-to: var(--button-disabled-skeleton-to);
-      }
-    }
-
-    .card {
-      --border-width: ${card.border.width}px;
-
-      --bg: var(--card-enabled-bg);
-      --fg: var(--card-enabled-fg);
-      --icon: var(--card-enabled-icon);
-      --border: var(--card-enabled-border);
-      --muted-bg: var(--card-enabled-muted-bg);
-      --muted-fg: var(--card-enabled-muted-fg);
-      --accent-fg: var(--card-enabled-accent-fg);
-      --link-fg: var(--card-enabled-link-fg);
-      --code-bg: var(--card-enabled-code-bg);
-      --code-fg: var(--card-enabled-code-fg);
-      --kbd-bg: var(--card-enabled-kbd-bg);
-      --skeleton-from: var(--card-enabled-skeleton-from);
-      --skeleton-to: var(--card-enabled-skeleton-to);
-
-      background-color: var(--bg);
-      color: var(--fg);
-      box-shadow: inset 0 0 0 var(--border-width) var(--border);
-      border-radius: var(--radius-2);
-      font-weight: 500;
-      cursor: default;
-      transition: box-shadow 50ms ease-in-out;
-      outline: none;
-
-      &:hover {
-        --bg: var(--card-hovered-bg);
-        --fg: var(--card-hovered-fg);
-        --icon: var(--card-hovered-icon);
-        --border: var(--card-hovered-border);
-        --muted-bg: var(--card-hovered-muted-bg);
-        --muted-fg: var(--card-hovered-muted-fg);
-        --accent-fg: var(--card-hovered-accent-fg);
-        --link-fg: var(--card-hovered-link-fg);
-        --code-bg: var(--card-hovered-code-bg);
-        --code-fg: var(--card-hovered-code-fg);
-        --skeleton-from: var(--card-hovered-skeleton-from);
-        --skeleton-to: var(--card-hovered-skeleton-to);
-      }
-
-      &:focus-visible {
-        box-shadow:
-          inset 0 0 0 var(--border-width) var(--border),
-          0 0 0 1px var(--base-bg),
-          0 0 0 3px var(--focus-ring);
-
-        /* --bg: var(--card-hovered-bg);
-        --fg: var(--card-hovered-fg);
-        --icon: var(--card-hovered-icon);
-        --border: var(--card-hovered-border);
-        --muted-bg: var(--card-hovered-muted-bg);
-        --muted-fg: var(--card-hovered-muted-fg);
-        --accent-fg: var(--card-hovered-accent-fg);
-        --link-fg: var(--card-hovered-link-fg);
-        --code-bg: var(--card-hovered-code-bg);
-        --code-fg: var(--card-hovered-code-fg);
-        --skeleton-from: var(--card-hovered-skeleton-from);
-        --skeleton-to: var(--card-hovered-skeleton-to); */
-      }
-
-      &:active {
-        --bg: var(--card-pressed-bg);
-        --fg: var(--card-pressed-fg);
-        --icon: var(--card-pressed-icon);
-        --border: var(--card-pressed-border);
-        --muted-bg: var(--card-pressed-muted-bg);
-        --muted-fg: var(--card-pressed-muted-fg);
-        --accent-fg: var(--card-pressed-accent-fg);
-        --link-fg: var(--card-pressed-link-fg);
-        --code-bg: var(--card-pressed-code-bg);
-        --code-fg: var(--card-pressed-code-fg);
-        --skeleton-from: var(--card-pressed-skeleton-from);
-        --skeleton-to: var(--card-pressed-skeleton-to);
-      }
-
-      &.selected {
-        --bg: var(--card-selected-bg);
-        --fg: var(--card-selected-fg);
-        --icon: var(--card-selected-icon);
-        --border: var(--card-selected-border);
-        --muted-bg: var(--card-selected-muted-bg);
-        --muted-fg: var(--card-selected-muted-fg);
-        --accent-fg: var(--card-selected-accent-fg);
-        --link-fg: var(--card-selected-link-fg);
-        --code-bg: var(--card-selected-code-bg);
-        --code-fg: var(--card-selected-code-fg);
-        --skeleton-from: var(--card-selected-skeleton-from);
-        --skeleton-to: var(--card-selected-skeleton-to);
-      }
-
-      &.disabled {
-        --bg: var(--card-disabled-bg);
-        --fg: var(--card-disabled-fg);
-        --icon: var(--card-disabled-icon);
-        --border: var(--card-disabled-border);
-        --muted-bg: var(--card-disabled-muted-bg);
-        --muted-fg: var(--card-disabled-muted-fg);
-        --accent-fg: var(--card-disabled-accent-fg);
-        --link-fg: var(--card-disabled-link-fg);
-        --code-bg: var(--card-disabled-code-bg);
-        --code-fg: var(--card-disabled-code-fg);
-        --skeleton-from: var(--card-disabled-skeleton-from);
-        --skeleton-to: var(--card-disabled-skeleton-to);
-      }
-    }
-
-    .input {
-      background-color: var(--bg);
-      color: var(--fg);
-      padding: var(--space-3);
-      box-shadow: inset 0 0 0 ${input.border.width}px var(--border);
-      font-size: 16px;
-      line-height: 11px;
-      border-radius: var(--radius-2);
-      cursor: default;
-      transition: box-shadow 50ms ease-in-out;
-
-      .placeholder {
-        color: var(--placeholder);
-      }
-
-      --bg: var(--input-enabled-bg);
-      --bg2: var(--input-enabled-bg2);
-      --fg: var(--input-enabled-fg);
-      --border: var(--input-enabled-border);
-      --placeholder: var(--input-enabled-placeholder);
-
-      &:hover {
-        --bg: var(--input-hovered-bg);
-        --bg2: var(--input-hovered-bg2);
-        --fg: var(--input-hovered-fg);
-        --border: var(--input-hovered-border);
-        --placeholder: var(--input-hovered-placeholder);
-      }
-
-      &:focus,
-      &.readOnly:focus {
-        outline: none;
-        box-shadow: inset 0 0 0 1px var(--focus-ring);
-
-        --bg: var(--input-hovered-bg);
-        --bg2: var(--input-hovered-bg2);
-        --fg: var(--input-hovered-fg);
-        --border: var(--input-hovered-border);
-        --placeholder: var(--input-hovered-placeholder);
-      }
-
-      &.readOnly {
-        --bg: var(--input-read-only-bg);
-        --bg2: var(--input-read-only-bg2);
-        --fg: var(--input-read-only-fg);
-        --border: var(--input-read-only-border);
-        --placeholder: var(--input-read-only-placeholder);
-      }
-
-      &.disabled {
-        --bg: var(--input-disabled-bg);
-        --bg2: var(--input-disabled-bg2);
-        --fg: var(--input-disabled-fg);
-        --border: var(--input-disabled-border);
-        --placeholder: var(--input-disabled-placeholder);
-      }
-    }
-
-    .bg2 {
-      background-color: var(--muted-bg);
-    }
-
-    .border {
-      border: 1px solid var(--border);
-    }
-
-    .icon {
-      color: var(--icon);
-    }
-
-    .muted {
-      color: var(--muted-fg);
-    }
-
-    .accent {
-      color: var(--accent-fg);
-    }
-
-    .link {
-      color: var(--link-fg);
-    }
-
-    .code {
-      background-color: var(--code-bg);
-      color: var(--code-fg);
-    }
-
-    .kbd {
-      background-color: var(--kbd-bg);
-      color: var(--kbd-fg);
-    }
-
-    .badge {
-      background-color: var(--badge-bg);
-      color: var(--badge-fg);
-    }
-
-    .badge--default {
-      --badge-bg: var(--badge-default-bg);
-      --badge-fg: var(--badge-default-fg);
-      --badge-border: var(--badge-default-border);
-    }
-
-    .skeleton-from {
-      color: var(--skeleton-from);
-    }
-
-    .skeleton-to {
-      color: var(--skeleton-to);
-    }
-  `
-})

package/src/core/theme/__workshop__/build/helpers.ts

@@ -1,46 +0,0 @@
-import {isRecord} from '../../../lib/isRecord'
-
-export function getCSSProps(value: Record<string, unknown>): Record<string, string> {
-  const entries = getCSSPropsEntries(value)
-
-  return Object.fromEntries(
-    entries.map((entry) => {
-      return [`--${entry.path.map(camelCaseToSnakeCase).join('-')}`, String(entry.value)]
-    }),
-  )
-}
-
-interface CSSPropEntry {
-  path: string[]
-  value: unknown
-}
-
-function getCSSPropsEntries(value: Record<string, unknown>, path: string[] = []): CSSPropEntry[] {
-  const entries: CSSPropEntry[] = []
-
-  for (const [key, val] of Object.entries(value)) {
-    if (key.startsWith('_')) continue
-
-    if (isRecord(val)) {
-      entries.push(...getCSSPropsEntries(val, [...path, key]))
-    } else if (Array.isArray(val)) {
-      entries.push(
-        ...val.map((d, idx) => {
-          if (isRecord(d)) {
-            entries.push(...getCSSPropsEntries(d, [...path, key, String(idx)]))
-          }
-
-          return {path: [...path, key, String(idx)], value: String(d)}
-        }),
-      )
-    } else {
-      entries.push({path: [...path, key], value: val})
-    }
-  }
-
-  return entries
-}
-
-function camelCaseToSnakeCase(value: string): string {
-  return value.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`)
-}