@sanity/ui 4.2.0 → 5.0.0-alpha.10

package/src/components/tooltip/tooltip.props.ts

@@ -0,0 +1,36 @@
+import {type PlacementProps, placementProps} from '../../props/placement'
+import {type PropDef} from '../../types/PropDef'
+
+/** @beta */
+export interface TooltipProps
+  extends Omit<React.ComponentProps<'div'>, 'children' | 'content'>, PlacementProps {
+  /**
+   * Shared anchor identifier.
+   */
+  anchorName?: React.ReactNode
+  /**
+   * The trigger element.
+   */
+  children: React.ReactElement<Record<string, unknown>>
+  /**
+   * The tooltip label.
+   */
+  content?: React.ReactNode
+  /**
+   * Renders the label into `document.body` through a React portal instead of inline.
+   */
+  portal?: boolean
+}
+
+export const tooltipProps: Record<string, PropDef> = {
+  anchorName: {
+    type: 'string',
+  },
+  content: {
+    type: 'string',
+  },
+  portal: {
+    type: 'boolean',
+  },
+  ...placementProps,
+}

package/src/components/tooltip-group/TooltipGroup.tsx

@@ -0,0 +1,64 @@
+import clsx from 'clsx'
+import {type ComponentPropsWithRef, type ElementType, useRef, useState} from 'react'
+
+import {getProps} from '../../utils/getProps'
+import {suffixClassName} from '../../utils/suffixClassName'
+import {type TooltipGroupProps, tooltipGroupProps} from './tooltipGroup.props'
+
+const tooltipGroupClassName = suffixClassName('sui-TooltipGroup')
+
+/** @public */
+export function TooltipGroup<T extends ElementType = 'div'>(
+  props: TooltipGroupProps<T> & Omit<ComponentPropsWithRef<T>, keyof TooltipGroupProps<T>>,
+) {
+  const {as, children, className, style, ...rest} = getProps(props, tooltipGroupProps)
+  const Component = as || 'div'
+  const ref = useRef<HTMLElement>(null)
+  const [isActive, setIsActive] = useState(false)
+
+  const handleTransitionEnd = (e: TransitionEvent) => {
+    const tooltip = (e.target as Element).closest('[data-ui="Tooltip"]')
+
+    if (!tooltip) {
+      return
+    }
+
+    if (e.propertyName === 'opacity' && window.getComputedStyle(tooltip).opacity !== '0') {
+      setIsActive(true)
+    }
+  }
+
+  const handleMouseLeave = () => {
+    setIsActive(false)
+  }
+
+  const handleBlur = (e: FocusEvent) => {
+    if (ref.current && ref.current.contains(e.relatedTarget as Node)) {
+      return
+    }
+
+    setIsActive(false)
+  }
+
+  return (
+    <Component
+      className={clsx(tooltipGroupClassName, className)}
+      style={{
+        ...style,
+        ...(isActive && {
+          '--tooltip-delay-group': '0ms',
+        }),
+      }}
+      data-ui="TooltipGroup"
+      ref={ref}
+      onTransitionEnd={handleTransitionEnd}
+      onMouseLeave={handleMouseLeave}
+      onBlur={handleBlur}
+      {...rest}
+    >
+      {children}
+    </Component>
+  )
+}
+
+export type {TooltipGroupProps}

package/src/components/tooltip-group/tooltipGroup.props.ts

@@ -0,0 +1,15 @@
+import {type PropDef} from '../../types/PropDef'
+
+/** @public */
+export interface TooltipGroupProps<T extends React.ElementType = 'div'> {
+  /**
+   * HTML element to render.
+   */
+  as?: T
+}
+
+export const tooltipGroupProps: Record<string, PropDef> = {
+  as: {
+    type: 'string',
+  },
+}

package/src/components/v-stack/VStack.tsx

@@ -0,0 +1,32 @@
+import clsx from 'clsx'
+import type {ComponentPropsWithRef, ElementType} from 'react'
+
+import {getProps} from '../../utils/getProps'
+import {suffixClassName} from '../../utils/suffixClassName'
+import {Flex} from '../flex/Flex'
+import {type VStackProps, vStackProps} from './vStack.props'
+
+const vStackClassName = suffixClassName('sui-VStack')
+
+/** @public */
+export function VStack<T extends ElementType = 'div'>(
+  props: VStackProps<T> & Omit<ComponentPropsWithRef<T>, keyof VStackProps<T>>,
+) {
+  const {as, children, className, style, ...rest} = getProps(props, vStackProps)
+  const Component = as || 'div'
+
+  return (
+    <Flex
+      as={Component}
+      className={clsx(vStackClassName, className)}
+      style={style}
+      data-ui="VStack"
+      flexDirection="column"
+      {...rest}
+    >
+      {children}
+    </Flex>
+  )
+}
+
+export type {VStackProps}

package/src/components/v-stack/vStack.props.ts

@@ -0,0 +1,17 @@
+import {type GapProps, gapProps} from '../../props/gap'
+import {type PropDef} from '../../types/PropDef'
+
+/** @public */
+export interface VStackProps<T extends React.ElementType = 'div'> extends Pick<GapProps, 'gap'> {
+  /**
+   * HTML element or component to render.
+   */
+  as?: T
+}
+
+export const vStackProps: Record<string, PropDef> = {
+  as: {
+    type: 'string',
+  },
+  gap: gapProps['gap'] as PropDef,
+}

package/src/components/visually-hidden/VisuallyHidden.tsx

@@ -0,0 +1,29 @@
+import clsx from 'clsx'
+import type {ComponentPropsWithRef, ElementType} from 'react'
+
+import {getProps} from '../../utils/getProps'
+import {suffixClassName} from '../../utils/suffixClassName'
+import {type VisuallyHiddenProps, visuallyHiddenProps} from './visuallyHidden.props'
+
+const visuallyHiddenClassName = suffixClassName('sui-VisuallyHidden')
+
+/** @public */
+export function VisuallyHidden<T extends ElementType = 'span'>(
+  props: VisuallyHiddenProps<T> & Omit<ComponentPropsWithRef<T>, keyof VisuallyHiddenProps<T>>,
+) {
+  const {as, children, className, style, ...rest} = getProps(props, visuallyHiddenProps)
+  const Component = as || 'span'
+
+  return (
+    <Component
+      className={clsx(visuallyHiddenClassName, className)}
+      style={style}
+      data-ui="VisuallyHidden"
+      {...rest}
+    >
+      {children}
+    </Component>
+  )
+}
+
+export type {VisuallyHiddenProps}

package/src/components/visually-hidden/visually-hidden.css

@@ -0,0 +1,9 @@
+.sui-VisuallyHidden:not(.sui-visually-hidden-visible:focus-visible) {
+  width: 1px;
+  height: 1px;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+}

package/src/components/visually-hidden/visuallyHidden.props.ts

@@ -0,0 +1,23 @@
+import {type PropDef} from '../../types/PropDef'
+
+/** @public */
+export interface VisuallyHiddenProps<T extends React.ElementType = 'span'> {
+  /**
+   * HTML element to render.
+   */
+  as?: T
+  /**
+   * If true, the element becomes visible on `:focus-visible`.
+   */
+  visibleOnFocus?: boolean
+}
+
+export const visuallyHiddenProps: Record<string, PropDef> = {
+  as: {
+    type: 'string',
+  },
+  visibleOnFocus: {
+    type: 'boolean',
+    className: 'sui-visually-hidden-visible',
+  },
+}

package/src/css/classes/dynamic/flex-child.css

@@ -0,0 +1,5 @@
+@breakpoints {
+  .sui-flex-basis { flex-basis: var(--flex-basis); }
+  .sui-flex-grow { flex-grow: var(--flex-grow); }
+  .sui-flex-shrink { flex-shrink: var(--flex-shrink); }
+}

package/src/css/classes/dynamic/grid-child.css

@@ -0,0 +1,8 @@
+@breakpoints {
+  .sui-grid-column { grid-column: var(--grid-column); }
+  .sui-grid-column-start { grid-column-start: var(--grid-column-start); }
+  .sui-grid-column-end { grid-column-end: var(--grid-column-end); }
+  .sui-grid-row { grid-row: var(--grid-row); }
+  .sui-grid-row-start { grid-row-start: var(--grid-row-start); }
+  .sui-grid-row-end { grid-row-end: var(--grid-row-end); }
+}

package/src/css/classes/dynamic/grid-parent.css

@@ -0,0 +1,6 @@
+@breakpoints {
+  .sui-grid-auto-columns { grid-auto-columns: var(--grid-auto-columns); }
+  .sui-grid-auto-rows { grid-auto-rows: var(--grid-auto-rows); }
+  .sui-grid-template-columns { grid-template-columns: var(--grid-template-columns); }
+  .sui-grid-template-rows { grid-template-rows: var(--grid-template-rows); }
+}

package/src/css/classes/dynamic/height.css

@@ -0,0 +1,5 @@
+@breakpoints {
+  .sui-height { height: var(--height); }
+  .sui-min-height { min-height: var(--min-height); }
+  .sui-max-height { max-height: var(--max-height); }
+}

package/src/css/classes/dynamic/index.css

@@ -0,0 +1,7 @@
+@import './flex-child.css';
+@import './grid-child.css';
+@import './grid-parent.css';
+@import './height.css';
+@import './width.css';
+@import './line-clamp.css';
+@import './z-index.css';

package/src/css/classes/dynamic/line-clamp.css

@@ -0,0 +1,5 @@
+.sui-line-clamp {
+  display: -webkit-box;
+  -webkit-line-clamp: var(--line-clamp);
+  -webkit-box-orient: vertical;
+}

package/src/css/classes/dynamic/readme.md

@@ -0,0 +1,3 @@
+# Dynamic classes
+
+Dynamic classes apply a custom property that is defined at runtime via a component's `style` attribute.

package/src/css/classes/dynamic/width.css

@@ -0,0 +1,7 @@
+@breakpoints {
+  .sui-width { width: var(--width); }
+  .sui-min-width { min-width: var(--min-width); }
+  .sui-max-width { max-width: var(--max-width); }
+  .sui-width-full { width: 100%; }
+  .sui-width-auto { width: auto; }
+}

package/src/css/classes/dynamic/z-index.css

@@ -0,0 +1,3 @@
+@breakpoints {
+  .sui-z-index { z-index: var(--z-index); }
+}

package/src/css/classes/generic/display.css

@@ -0,0 +1,10 @@
+@breakpoints {
+  .sui-display-block:not([hidden]) { display: block; }
+  .sui-display-inline-block:not([hidden]) { display: inline-block; }
+  .sui-display-inline:not([hidden]) { display: inline; }
+  .sui-display-flex:not([hidden]) { display: flex; }
+  .sui-display-inline-flex:not([hidden]) { display: inline-flex; }
+  .sui-display-grid:not([hidden]) { display: grid; }
+  .sui-display-inline-grid:not([hidden]) { display: inline-grid; }
+  .sui-display-none:not([hidden]) { display: none; }
+}

package/src/css/classes/generic/flex.css

@@ -0,0 +1,24 @@
+@breakpoints {
+  .sui-align-items-flex-start { align-items: flex-start; }
+  .sui-align-items-center { align-items: center; }
+  .sui-align-items-flex-end { align-items: flex-end; }
+  .sui-align-items-baseline { align-items: baseline; }
+  .sui-align-items-stretch { align-items: stretch; }
+
+  .sui-justify-content-flex-start { justify-content: flex-start; }
+  .sui-justify-content-center { justify-content: center; }
+  .sui-justify-content-flex-end { justify-content: flex-end; }
+  .sui-justify-content-space-between { justify-content: space-between; }
+  .sui-justify-content-space-around { justify-content: space-around; }
+  .sui-justify-content-space-evenly { justify-content: space-evenly; }
+  .sui-justify-content-stretch { justify-content: stretch; }
+
+  .sui-flex-direction-row { flex-direction: row; }
+  .sui-flex-direction-row-reverse { flex-direction: row-reverse; }
+  .sui-flex-direction-column { flex-direction: column; }
+  .sui-flex-direction-column-reverse { flex-direction: column-reverse; }
+
+  .sui-flex-wrap { flex-wrap: wrap; }
+  .sui-flex-nowrap { flex-wrap: nowrap; }
+  .sui-flex-wrap-reverse { flex-wrap: wrap-reverse; }
+}

package/src/css/classes/generic/grid.css

@@ -0,0 +1,7 @@
+@breakpoints {
+  .sui-grid-auto-flow-row { grid-auto-flow: row; }
+  .sui-grid-auto-flow-row-dense { grid-auto-flow: row dense; }
+  .sui-grid-auto-flow-column { grid-auto-flow: column; }
+  .sui-grid-auto-flow-column-dense { grid-auto-flow: column dense; }
+  .sui-grid-auto-flow-dense { grid-auto-flow: dense; }
+}

package/src/css/classes/generic/index.css

@@ -0,0 +1,7 @@
+@import './display.css';
+@import './flex.css';
+@import './grid.css';
+@import './overflow.css';
+@import './placement.css';
+@import './position.css';
+@import './text-align.css';

package/src/css/classes/generic/overflow.css

@@ -0,0 +1,19 @@
+@breakpoints {
+  .sui-overflow-visible { overflow: visible; }
+  .sui-overflow-scroll { overflow: scroll; }
+  .sui-overflow-clip { overflow: clip; }
+  .sui-overflow-hidden { overflow: hidden; }
+  .sui-overflow-auto { overflow: auto; }
+
+  .sui-overflow-x-visible { overflow-x: visible; }
+  .sui-overflow-x-scroll { overflow-x: scroll; }
+  .sui-overflow-x-clip { overflow-x: clip; }
+  .sui-overflow-x-hidden { overflow-x: hidden; }
+  .sui-overflow-x-auto { overflow-x: auto; }
+
+  .sui-overflow-y-visible { overflow-y: visible; }
+  .sui-overflow-y-scroll { overflow-y: scroll; }
+  .sui-overflow-y-clip { overflow-y: clip; }
+  .sui-overflow-y-hidden { overflow-y: hidden; }
+  .sui-overflow-y-auto { overflow-y: auto; }
+}

package/src/css/classes/generic/placement.css

@@ -0,0 +1,202 @@
+[class*='placement-'] {
+  inset: auto;
+  margin: 0;
+}
+
+@position-try --top-center {
+  top: auto;
+  right: auto;
+  bottom: anchor(top);
+  left: anchor(center);
+  translate: -50% 0;
+}
+
+@position-try --top-start {
+  top: auto;
+  right: auto;
+  bottom: anchor(top);
+  left: anchor(left);
+  translate: none;
+}
+
+@position-try --top-end {
+  top: auto;
+  left: auto;
+  bottom: anchor(top);
+  right: anchor(right);
+  translate: none;
+}
+
+@position-try --bottom-center {
+  bottom: auto;
+  right: auto;
+  top: anchor(bottom);
+  left: anchor(center);
+  translate: -50% 0;
+}
+
+@position-try --bottom-start {
+  bottom: auto;
+  right: auto;
+  top: anchor(bottom);
+  left: anchor(left);
+  translate: none;
+}
+
+@position-try --bottom-end {
+  bottom: auto;
+  left: auto;
+  top: anchor(bottom);
+  right: anchor(right);
+  translate: none;
+}
+
+@position-try --right-center {
+  right: auto;
+  bottom: auto;
+  left: anchor(right);
+  top: anchor(center);
+  translate: 0 -50%;
+}
+
+@position-try --right-start {
+  right: auto;
+  bottom: auto;
+  left: anchor(right);
+  top: anchor(top);
+  translate: none;
+}
+
+@position-try --right-end {
+  right: auto;
+  top: auto;
+  left: anchor(right);
+  bottom: anchor(bottom);
+  translate: none;
+}
+
+@position-try --left-center {
+  left: auto;
+  bottom: auto;
+  right: anchor(left);
+  top: anchor(center);
+  translate: 0 -50%;
+}
+
+@position-try --left-start {
+  left: auto;
+  bottom: auto;
+  right: anchor(left);
+  top: anchor(top);
+  translate: none;
+}
+
+@position-try --left-end {
+  left: auto;
+  top: auto;
+  right: anchor(left);
+  bottom: anchor(bottom);
+  translate: none;
+}
+
+.sui-placement-bottom {
+  top: anchor(bottom);
+  left: anchor(center);
+  translate: -50% 0;
+  position-try-fallbacks: --top-center;
+}
+
+.sui-placement-bottom-start {
+  top: anchor(bottom);
+  left: anchor(left);
+  position-try-fallbacks: --top-start;
+}
+
+.sui-placement-bottom-end {
+  top: anchor(bottom);
+  right: anchor(right);
+  position-try-fallbacks: --top-end;
+}
+
+.sui-placement-top {
+  bottom: anchor(top);
+  left: anchor(center);
+  translate: -50% 0;
+  position-try-fallbacks: --bottom-center;
+}
+
+.sui-placement-top-start {
+  bottom: anchor(top);
+  left: anchor(left);
+  position-try-fallbacks: --bottom-start;
+}
+
+.sui-placement-top-end {
+  bottom: anchor(top);
+  right: anchor(right);
+  position-try-fallbacks: --bottom-end;
+}
+
+.sui-placement-left {
+  right: anchor(left);
+  top: anchor(center);
+  translate: 0 -50%;
+  position-try-fallbacks: --right-center;
+}
+
+.sui-placement-left-start {
+  right: anchor(left);
+  top: anchor(top);
+  position-try-fallbacks: --right-start;
+}
+
+.sui-placement-left-end {
+  right: anchor(left);
+  bottom: anchor(bottom);
+  position-try-fallbacks: --right-end;
+}
+
+.sui-placement-right {
+  left: anchor(right);
+  top: anchor(center);
+  translate: 0 -50%;
+  position-try-fallbacks: --left-center;
+}
+
+.sui-placement-right-start {
+  left: anchor(right);
+  top: anchor(top);
+  position-try-fallbacks: --left-start;
+}
+
+.sui-placement-right-end {
+  left: anchor(right);
+  bottom: anchor(bottom);
+  position-try-fallbacks: --left-end;
+}
+
+[class*="placement-bottom"],
+[class*="placement-top"] {
+  margin-block: var(--space-1);
+}
+
+[class*="placement-left"],
+[class*="placement-right"] {
+  margin-inline: var(--space-1);
+}
+
+[class*="placement-bottom"] {
+  transform-origin: center top;
+}
+
+[class*="placement-top"] {
+  transform-origin: center bottom;
+}
+
+[class*="placement-left"] {
+  transform-origin: right center;
+}
+
+[class*="placement-right"] {
+  transform-origin: left center;
+}

package/src/css/classes/generic/position.css

@@ -0,0 +1,7 @@
+@breakpoints {
+  .sui-position-static { position: static; }
+  .sui-position-relative { position: relative; }
+  .sui-position-absolute { position: absolute; }
+  .sui-position-fixed { position: fixed; }
+  .sui-position-sticky { position: sticky; }
+}

package/src/css/classes/generic/readme.md

@@ -0,0 +1,3 @@
+# Generic classes
+
+Generic classes apply a ‘generic’ CSS style — that is, a property with a CSS keyword value. They do not use custom properties.

package/src/css/classes/generic/text-align.css

@@ -0,0 +1,5 @@
+@breakpoints {
+  .sui-text-left { text-align: left; }
+  .sui-text-center { text-align: center; }
+  .sui-text-right { text-align: right; }
+}

package/src/css/classes/index.css

@@ -0,0 +1,4 @@
+@import './dynamic/index.css';
+@import './generic/index.css';
+@import './local/index.css';
+@import './system/index.css';

package/src/css/classes/local/animation.css

@@ -0,0 +1,4 @@
+:root {
+  --timing-linear: linear;
+  --timing-curve: cubic-bezier(0.34, 1.2, 0.64, 1);
+}

package/src/css/classes/local/border.css

@@ -0,0 +1,20 @@
+[class*='sui-border'] {
+  border-color: var(--separator-low, light-dark(var(--gray-200), var(--gray-800)));
+}
+
+@breakpoints {
+  .sui-border { border-width: 1px; border-style: solid; }
+  .sui-border-none { border-style: none; }
+
+  .sui-border-top { border-top-width: 1px; border-top-style: solid; }
+  .sui-border-top-none { border-top-style: none; }
+
+  .sui-border-right { border-right-width: 1px; border-right-style: solid; }
+  .sui-border-right-none { border-right-style: none; }
+
+  .sui-border-bottom { border-bottom-width: 1px; border-bottom-style: solid; }
+  .sui-border-bottom-none { border-bottom-style: none; }
+
+  .sui-border-left { border-left-width: 1px; border-left-style: solid; }
+  .sui-border-left-none { border-left-style: none; }
+}

package/src/css/classes/local/index.css

@@ -0,0 +1,6 @@
+@import './animation.css';
+@import './border.css';
+@import './text-overflow.css';
+@import './text-trim.css';
+@import './tone.css';
+@import './top-anchor.css';

package/src/css/classes/local/readme.md

@@ -0,0 +1,3 @@
+# Local classes
+
+Local classes apply custom properties defined locally to the component library. They do not apply custom properties defined at the design system level (those that are imported from our design tokens library). They may additionally apply CSS keyword values or other values, but the emphasis is the application of locally defined tokens.

package/src/css/classes/local/text-overflow.css

@@ -0,0 +1,5 @@
+.sui-text-overflow {
+  display: block;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}