@sanity/ui 2.0.0-alpha.16 → 2.0.0-alpha.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "2.0.0-alpha.16",
+  "version": "2.0.0-alpha.17",
   "sideEffects": false,
   "types": "./dist/index.d.ts",
   "source": "./src/index.ts",
@@ -126,7 +126,7 @@
     "rimraf": "^5.0.1",
     "semantic-release": "^21.1.1",
     "start-server-and-test": "^2.0.0",
-    "storybook": "^7.4.5",
+    "storybook": "^7.5.2",
     "styled-components": "^6.0.7",
     "tsconfig-paths": "^4.2.0",
     "typescript": "^5.2.2"

package/src/components/autocomplete/autocomplete.tsx

@@ -60,6 +60,7 @@ export interface AutocompleteProps<Option extends BaseAutocompleteOption = BaseA
   onSelect?: (value: string) => void
   /** @beta */
   openButton?: boolean | AutocompleteOpenButtonProps
+  /** The options to render. */
   options?: Option[]
   padding?: number | number[]
   popover?: Omit<PopoverProps, 'content' | 'onMouseEnter' | 'onMouseLeave' | 'open'> &
@@ -68,6 +69,7 @@ export interface AutocompleteProps<Option extends BaseAutocompleteOption = BaseA
   radius?: Radius | Radius[]
   /** @beta */
   relatedElements?: HTMLElement[]
+  /** The callback function for rendering each option. */
   renderOption?: (option: Option) => ReactElement
   /** @beta */
   renderPopover?: (
@@ -82,6 +84,7 @@ export interface AutocompleteProps<Option extends BaseAutocompleteOption = BaseA
   ) => ReactNode
   renderValue?: (value: string, option?: Option) => string
   suffix?: ReactNode
+  /** The current value. */
   value?: string
 }
 
@@ -684,6 +687,9 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
 })
 
 /**
+ * The Autocomplete component is typically used for search components.
+ * It consists of a text input for writing a query, and properties for rendering suggestions.
+ *
  * @public
  */
 export const Autocomplete = InnerAutocomplete as <Option extends BaseAutocompleteOption>(

package/src/components/dialog/dialog.tsx

@@ -352,6 +352,8 @@ const DialogCard = forwardRef(function DialogCard(
 })
 
 /**
+ * The Dialog component.
+ *
  * @public
  */
 export const Dialog = forwardRef(function Dialog(

package/src/components/hotkeys/hotkeys.tsx

@@ -29,6 +29,8 @@ const Key = styled(KBD)`
 `
 
 /**
+ * Represent hotkeys (a keyboard combination) with semantic `<kbd>` elements.
+ *
  * @public
  */
 export const Hotkeys = forwardRef(function Hotkeys(

package/src/components/menu/menu.tsx

@@ -35,6 +35,8 @@ const Root = styled(Box)`
 `
 
 /**
+ * The `Menu` component is a building block for application menus.
+ *
  * @public
  */
 export const Menu = forwardRef(function Menu(

package/src/components/menu/menuButton.tsx

@@ -47,6 +47,8 @@ export interface MenuButtonProps {
 }
 
 /**
+ * The `MenuButton` component follows the WAI-ARIA specification for menu buttons.
+ *
  * @public
  */
 export const MenuButton = forwardRef(function MenuButton(

package/src/components/toast/toast.tsx

@@ -37,6 +37,10 @@ const TextBox = styled(Flex)`
 `
 
 /**
+ * The `Toast` component gives feedback to users when an action has taken place.
+ *
+ * Toasts can be closed with a close button, or auto-dismiss after a certain timeout.
+ *
  * @public
  */
 export function Toast(

package/src/primitives/_selectable/style.ts

@@ -22,6 +22,8 @@ export function selectableBaseStyle(): ReturnType<typeof css> {
       font: inherit;
       text-align: inherit;
       border: 0;
+      width: -moz-available;
+      width: -webkit-fill-available;
       width: stretch;
     }
 

package/src/primitives/avatar/avatar.tsx

@@ -41,6 +41,8 @@ const Stroke = styled.ellipse(avatarStyle.stroke)
 const Initials = styled.div(avatarStyle.initials)
 
 /**
+ * Avatars are used to represent people and other agents (e.g. bots).
+ *
  * @public
  */
 export const Avatar = forwardRef(function Avatar(

package/src/primitives/badge/badge.tsx

@@ -25,6 +25,8 @@ const Root = styled(Box)<BadgeStyleProps & ResponsiveRadiusStyleProps>(
 )
 
 /**
+ * Badges are used to tag resources.
+ *
  * @public
  */
 export const Badge = forwardRef(function Badge(

package/src/primitives/box/box.tsx

@@ -51,6 +51,9 @@ const Root = styled.div<
 )
 
 /**
+ * The `Box` component is a basic layout wrapper component which provides utility properties
+ * for flex, margins and padding.
+ *
  * @public
  */
 export const Box = forwardRef(function Box(

package/src/primitives/button/styles.ts

@@ -29,6 +29,7 @@ export function buttonBaseStyles({$width}: {$width?: ButtonWidth}): ReturnType<t
 
     ${$width === 'fill' &&
     css`
+      width: -moz-available;
       width: -webkit-fill-available;
       width: stretch;
     `}

package/src/primitives/card/card.tsx

@@ -48,6 +48,9 @@ const Root = styled(Box)<
 >(responsiveBorderStyle, responsiveRadiusStyle, responsiveShadowStyle, cardStyle)
 
 /**
+ * The `Card` component acts much like a `Box`, but with a background and foreground color.
+ * Components within a `Card` inherit its colors.
+ *
  * @public
  */
 export const Card = forwardRef(function Card(

package/src/primitives/card/styles.ts

@@ -29,6 +29,8 @@ export function cardBaseStyle(props: CardStyleProps & ThemeProps): ReturnType<ty
       font: inherit;
       text-align: inherit;
       border: 0;
+      width: -moz-available;
+      width: -webkit-fill-available;
       width: stretch;
     }
 

package/src/primitives/checkbox/checkbox.tsx

@@ -16,6 +16,8 @@ const Root = styled.div(checkboxBaseStyles)
 const Input = styled.input(inputElementStyles)
 
 /**
+ * Checkboxes allow the user to select one or more items from a set.
+ *
  * @public
  */
 export const Checkbox = forwardRef(function Checkbox(

package/src/primitives/code/code.tsx

@@ -11,6 +11,7 @@ import {codeBaseStyle} from './styles'
  */
 export interface CodeProps {
   as?: React.ElementType | keyof JSX.IntrinsicElements
+  /** Define the language to use for syntax highlighting. */
   language?: string
   size?: number | number[]
   weight?: string

package/src/primitives/container/container.tsx

@@ -17,6 +17,8 @@ const Root = styled(Box)<ResponsiveWidthStyleProps>(
 )
 
 /**
+ * The `Container` component wraps content layout in a defined set of widths.
+ *
  * @public
  */
 export const Container = forwardRef(function Container(

package/src/primitives/flex/flex.tsx

@@ -26,6 +26,8 @@ const Root = styled(Box)<FlexItemStyleProps & ResponsiveFlexStyleProps>(
 )
 
 /**
+ * The `Flex` component is a wrapper component for flexible elements (`Box`, `Card` and `Flex`).
+ *
  * @public
  */
 export const Flex = forwardRef(function Flex(

package/src/primitives/grid/grid.tsx

@@ -13,6 +13,8 @@ export interface GridProps extends Omit<BoxProps, 'display'>, ResponsiveGridProp
 const Root = styled(Box)<ResponsiveGridStyleProps>(responsiveGridStyle)
 
 /**
+ * The `Grid` component is for building 2-dimensional layers (based on CSS grid).
+ *
  * @public
  */
 export const Grid = forwardRef(function Grid(

package/src/primitives/heading/heading.tsx

@@ -43,6 +43,8 @@ const SpanWithTextOverflow = styled.span`
 `
 
 /**
+ * Typographic headings.
+ *
  * @public
  */
 export const Heading = forwardRef(function Heading(

package/src/primitives/inline/inline.tsx

@@ -10,12 +10,15 @@ import {ResponsiveInlineSpaceStyleProps} from './types'
  * @public
  */
 export interface InlineProps extends Omit<BoxProps, 'display'> {
+  /** The spacing between children. */
   space?: number | number[]
 }
 
 const Root = styled(Box)<ResponsiveInlineSpaceStyleProps>(inlineBaseStyle, inlineSpaceStyle)
 
 /**
+ * The `Inline` component is a layout utility for aligning and spacing items horizontally.
+ *
  * @public
  */
 export const Inline = forwardRef(function Inline(

package/src/primitives/kbd/kbd.tsx

@@ -30,6 +30,8 @@ function kbdStyle() {
 const Root = styled.kbd<ResponsiveRadiusStyleProps>(responsiveRadiusStyle, kbdStyle)
 
 /**
+ * Used to define some text as keyboard input.
+ *
  * @public
  */
 export const KBD = forwardRef(function KBD(

package/src/primitives/label/label.tsx

@@ -40,6 +40,8 @@ const SpanWithTextOverflow = styled.span`
 `
 
 /**
+ * Typographic labels.
+ *
  * @public
  */
 export const Label = forwardRef(function Label(

package/src/primitives/popover/popover.tsx

@@ -59,6 +59,7 @@ export interface PopoverProps
   overflow?: BoxOverflow
   padding?: number | number[]
   placement?: Placement
+  /** Whether or not to render the popover in a portal element. */
   portal?: boolean | string
   preventOverflow?: boolean
   referenceBoundary?: HTMLElement | null
@@ -72,7 +73,11 @@ export interface PopoverProps
   width?: PopoverWidth | PopoverWidth[]
 }
 
-/** @public */
+/**
+ * The `Popover` component is used to display some content on top of another.
+ *
+ * @public
+ */
 export const Popover = memo(
   forwardRef(function Popover(
     props: PopoverProps &

package/src/primitives/radio/radio.tsx

@@ -14,6 +14,8 @@ const Root = styled.div(radioBaseStyle)
 const Input = styled.input(inputElementStyle)
 
 /**
+ * The `Radio` component allows the user to select one option from a set.
+ *
  * @public
  */
 export const Radio = forwardRef(function Radio(

package/src/primitives/select/select.tsx

@@ -30,6 +30,8 @@ const Input = styled.select<{
 const IconBox = styled(Box)(selectStyle.iconBox)
 
 /**
+ * The `Select` component provides control of options.
+ *
  * @public
  */
 export const Select = forwardRef(function Select(

package/src/primitives/select/styles.ts

@@ -13,6 +13,8 @@ import {CSSObject} from '../../types/styled'
 function rootStyle(): ReturnType<typeof css> {
   return css`
     position: relative;
+    width: -moz-available;
+    width: -webkit-fill-available;
     width: stretch;
 
     &:not([hidden]) {

package/src/primitives/spinner/spinner.tsx

@@ -28,6 +28,8 @@ const Root = styled(Text)`
 `
 
 /**
+ * Indicate that something is loading for an indeterminate amount of time.
+ *
  * @public
  */
 export const Spinner = forwardRef(function Spinner(

package/src/primitives/stack/stack.tsx

@@ -15,6 +15,8 @@ export interface StackProps extends BoxProps {
 const Root = styled(Box)<ResponsiveStackSpaceStyleProps>(stackBaseStyle, responsiveStackSpaceStyle)
 
 /**
+ * The `Stack` component is used to place elements on top of each other.
+ *
  * @public
  */
 export const Stack = forwardRef(function Stack(

package/src/primitives/switch/switch.tsx

@@ -23,6 +23,10 @@ const Track = styled.span(switchTrackStyles)
 const Thumb = styled.span<{$checked?: boolean; $indeterminate?: boolean}>(switchThumbStyles)
 
 /**
+ * The `Switch` component allows the user to toggle a setting on and off.
+ *
+ * Extends all properties of an `<input type="checkbox" />` element, except type.
+ *
  * @public
  */
 export const Switch = forwardRef(function Switch(

package/src/primitives/text/text.tsx

@@ -17,6 +17,7 @@ export interface TextProps {
   accent?: boolean
   align?: TextAlign | TextAlign[]
   as?: React.ElementType | keyof JSX.IntrinsicElements
+  /** When `true` the text color will be muted. */
   muted?: boolean
   size?: number | number[]
   /**
@@ -43,6 +44,8 @@ const SpanWithTextOverflow = styled.span`
 `
 
 /**
+ * The `Text` component is an agile, themed typographic element.
+ *
  * @public
  */
 export const Text = forwardRef(function Text(

package/src/primitives/textArea/textArea.tsx

@@ -48,6 +48,9 @@ const Presentation = styled.div<ResponsiveRadiusStyleProps & TextInputRepresenta
 )
 
 /**
+ * A multiline text input.
+ *
+
  * @public
  */
 export const TextArea = forwardRef(function TextArea(

package/src/primitives/textInput/textInput.tsx

@@ -140,6 +140,8 @@ const TextInputClearButton = styled(Button)({
 })
 
 /**
+ * Single line text input.
+ *
  * @public
  */
 export const TextInput = forwardRef(function TextInput(

package/src/primitives/tooltip/tooltip.tsx

@@ -48,6 +48,7 @@ export interface TooltipProps extends Omit<LayerProps, 'as'> {
   fallbackPlacements?: Placement[]
   padding?: number | number[]
   placement?: Placement
+  /** Whether or not to render the tooltip in a portal element. */
   portal?: boolean | string
   scheme?: ThemeColorSchemeKey
   shadow?: number | number[]
@@ -66,6 +67,8 @@ const Root = styled(Layer)`
 `
 
 /**
+ * Tooltips display information when hovering, focusing or tapping.
+ *
  * @public
  */
 export const Tooltip = forwardRef(function Tooltip(

package/src/primitives/types.ts

@@ -55,6 +55,7 @@ export interface ResponsiveFlexProps {
  * @public
  */
 export interface ResponsiveFlexItemProps {
+  /** Sets the flex CSS attribute. The property is responsive. */
   flex?: FlexValue | FlexValue[]
 }
 
@@ -88,8 +89,11 @@ export interface ResponsiveGridItemProps {
  * @public
  */
 export interface ResponsiveMarginProps {
+  /** Applies margins to all sides. The property is responsive. */
   margin?: number | number[]
+  /** Applies margins to the left and right sides. The property is responsive. */
   marginX?: number | number[]
+  /** Applies margins to the top and bottom sides. The property is responsive. */
   marginY?: number | number[]
   marginTop?: number | number[]
   marginRight?: number | number[]