@sanity/ui 2.6.7 → 2.6.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "2.6.7",
+  "version": "2.6.8",
   "keywords": [
     "sanity",
     "ui",
@@ -87,6 +87,7 @@
       "prettier --write --cache --ignore-unknown"
     ]
   },
+  "prettier": "@sanity/prettier-config",
   "release": {
     "branches": [
       "+([0-9])?(.{+([0-9]),x}).x",
@@ -109,7 +110,8 @@
     "@sanity/icons": "^3.3.0",
     "csstype": "^3.1.3",
     "framer-motion": "11.0.8",
-    "react-refractor": "^2.2.0"
+    "react-refractor": "^2.2.0",
+    "use-effect-event": "^1.0.2"
   },
   "devDependencies": {
     "@babel/core": "^7.24.7",
@@ -120,24 +122,25 @@
     "@commitlint/config-conventional": "^19.2.2",
     "@juggle/resize-observer": "^3.4.0",
     "@sanity/pkg-utils": "^6.10.3",
-    "@sanity/semantic-release-preset": "^4.1.8",
+    "@sanity/prettier-config": "^1.0.2",
+    "@sanity/semantic-release-preset": "^5.0.0",
     "@sanity/ui-workshop": "^2.0.15",
-    "@storybook/addon-a11y": "^8.0.8",
-    "@storybook/addon-docs": "^8.0.8",
-    "@storybook/addon-essentials": "^8.0.8",
-    "@storybook/addon-interactions": "^8.0.8",
-    "@storybook/addon-links": "^8.0.8",
-    "@storybook/addon-storysource": "^8.0.8",
-    "@storybook/addon-themes": "^8.0.8",
-    "@storybook/blocks": "^8.0.8",
-    "@storybook/jest": "^0.2.3",
-    "@storybook/manager-api": "^8.0.8",
-    "@storybook/react": "^8.0.8",
-    "@storybook/react-vite": "^8.0.8",
-    "@storybook/testing-library": "^0.2.2",
-    "@storybook/theming": "^8.0.8",
+    "@storybook/addon-a11y": "^8.2.1",
+    "@storybook/addon-docs": "^8.2.1",
+    "@storybook/addon-essentials": "^8.2.1",
+    "@storybook/addon-interactions": "^8.2.1",
+    "@storybook/addon-links": "^8.2.1",
+    "@storybook/addon-mdx-gfm": "^8.2.1",
+    "@storybook/addon-storysource": "^8.2.1",
+    "@storybook/addon-themes": "^8.2.1",
+    "@storybook/blocks": "^8.2.1",
+    "@storybook/manager-api": "^8.2.1",
+    "@storybook/react": "^8.2.1",
+    "@storybook/react-vite": "^8.2.1",
+    "@storybook/test": "^8.2.1",
+    "@storybook/theming": "^8.2.1",
     "@testing-library/dom": "^10.3.1",
-    "@testing-library/jest-dom": "^5.17.0",
+    "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^16.0.0",
     "@types/jest": "^29.5.12",
     "@types/jest-axe": "^3.5.9",
@@ -146,7 +149,6 @@
     "@types/react-dom": "^18.3.0",
     "@types/react-is": "^18.3.0",
     "@types/refractor": "^3.4.1",
-    "@types/testing-library__jest-dom": "^5.14.9",
     "@typescript-eslint/eslint-plugin": "^7.16.0",
     "@typescript-eslint/parser": "^7.16.0",
     "commitizen": "^4.3.0",
@@ -172,7 +174,6 @@
     "module-alias": "^2.2.3",
     "npm-run-all2": "^5.0.2",
     "prettier": "^3.3.2",
-    "prettier-plugin-packagejson": "^2.5.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-is": "^18.3.1",
@@ -180,7 +181,7 @@
     "rimraf": "^5.0.5",
     "semantic-release": "^24.0.0",
     "start-server-and-test": "^2.0.4",
-    "storybook": "^8.0.8",
+    "storybook": "^8.2.1",
     "styled-components": "^6.1.11",
     "tsconfig-paths": "^4.2.0",
     "typescript": "5.5.3",
@@ -200,12 +201,12 @@
   "publishConfig": {
     "access": "public"
   },
-  "esm.sh": {
-    "bundle": false
-  },
   "pnpm": {
     "overrides": {
       "conventional-changelog-conventionalcommits": ">= 8.0.0"
     }
+  },
+  "esm.sh": {
+    "bundle": false
   }
 }

package/src/core/__workshop__/constants.ts

@@ -44,9 +44,9 @@ export const WORKSHOP_BUTTON_MODE_OPTIONS: {[key: string]: ButtonMode} = {
 
 export const WORKSHOP_BUTTON_TEXT_ALIGN_OPTIONS: {[key: string]: ButtonTextAlign | ''} = {
   '(none)': '',
-  Left: 'left',
-  Right: 'right',
-  Center: 'center',
+  'Left': 'left',
+  'Right': 'right',
+  'Center': 'center',
 }
 
 export const WORKSHOP_BUTTON_TONE_OPTIONS: {[key: string]: ButtonTone} = {
@@ -61,11 +61,11 @@ export const WORKSHOP_CARD_AS_OPTIONS: {
   [key: string]: 'div' | 'button' | 'span' | 'ol' | 'pre' | 'ul'
 } = {
   'DIV (default)': 'div',
-  BUTTON: 'button',
-  SPAN: 'span',
-  OL: 'ol',
-  PRE: 'pre',
-  UL: 'ul',
+  'BUTTON': 'button',
+  'SPAN': 'span',
+  'OL': 'ol',
+  'PRE': 'pre',
+  'UL': 'ul',
 }
 
 export const WORKSHOP_CARD_TONE_OPTIONS: {[key: string]: CardTone} = {
@@ -92,7 +92,7 @@ export const WORKSHOP_CONTAINER_WIDTH_OPTIONS: {[key: string]: number | 'auto'}
   '3': 3,
   '4': 4,
   '5': 5,
-  auto: 'auto',
+  'auto': 'auto',
 }
 
 export const WORKSHOP_DIALOG_POSITION_OPTIONS: {[key: string]: DialogPosition} = {
@@ -106,15 +106,15 @@ export const WORKSHOP_FLEX_DIRECTION_OPTIONS: {[key: string]: 'row' | 'column'}
 }
 
 export const WORKSHOP_FLEX_ALIGN_OPTIONS: Record<FlexAlign, FlexAlign> = {
-  baseline: 'baseline',
-  center: 'center',
+  'baseline': 'baseline',
+  'center': 'center',
   'flex-end': 'flex-end',
   'flex-start': 'flex-start',
-  stretch: 'stretch',
+  'stretch': 'stretch',
 }
 
 export const WORKSHOP_FLEX_JUSTIFY_OPTIONS: Record<FlexJustify, FlexJustify> = {
-  center: 'center',
+  'center': 'center',
   'flex-end': 'flex-end',
   'flex-start': 'flex-start',
   'space-around': 'space-around',
@@ -157,16 +157,16 @@ export const WORKSHOP_LABEL_FONT_SIZE_OPTIONS = {
 }
 
 export const WORKSHOP_PLACEMENT_OPTIONS: Record<Placement, Placement> = {
-  top: 'top',
+  'top': 'top',
   'top-start': 'top-start',
   'top-end': 'top-end',
-  right: 'right',
+  'right': 'right',
   'right-start': 'right-start',
   'right-end': 'right-end',
-  left: 'left',
+  'left': 'left',
   'left-start': 'left-start',
   'left-end': 'left-end',
-  bottom: 'bottom',
+  'bottom': 'bottom',
   'bottom-start': 'bottom-start',
   'bottom-end': 'bottom-end',
 }
@@ -217,11 +217,11 @@ export const WORKSHOP_SPOT_COLOR_OPTIONS: {[key: string]: ThemeColorSpotKey} = {
 
 export const WORKSHOP_TEXT_ALIGN_OPTIONS: {[key: string]: TextAlign | ''} = {
   '(none)': '',
-  Initial: 'initial',
-  Left: 'left',
-  Right: 'right',
-  Center: 'center',
-  Justify: 'justify',
+  'Initial': 'initial',
+  'Left': 'left',
+  'Right': 'right',
+  'Center': 'center',
+  'Justify': 'justify',
 }
 
 export const WORKSHOP_TEXT_FONT_SIZE_OPTIONS = {
@@ -233,17 +233,17 @@ export const WORKSHOP_TEXT_FONT_SIZE_OPTIONS = {
 }
 
 export const WORKSHOP_TEXT_INPUT_TYPE_OPTIONS: {[key: string]: TextInputType} = {
-  date: 'date',
+  'date': 'date',
   'datetime-local': 'datetime-local',
-  email: 'email',
-  month: 'month',
-  number: 'number',
-  password: 'password',
-  tel: 'tel',
-  time: 'time',
-  text: 'text',
-  week: 'week',
-  color: 'color',
+  'email': 'email',
+  'month': 'month',
+  'number': 'number',
+  'password': 'password',
+  'tel': 'tel',
+  'time': 'time',
+  'text': 'text',
+  'week': 'week',
+  'color': 'color',
 }
 
 export const WORKSHOP_TEXT_OVERFLOW_OPTIONS: {[key: string]: 'ellipsis' | ''} = {
@@ -261,9 +261,9 @@ export const WORKSHOP_TEXT_SIZE_OPTIONS = {
 
 export const WORKSHOP_TEXT_WEIGHT_OPTIONS: {[key: string]: ThemeFontWeightKey | ''} = {
   'Regular (default)': '',
-  Medium: 'medium',
-  Semibold: 'semibold',
-  Bold: 'bold',
+  'Medium': 'medium',
+  'Semibold': 'semibold',
+  'Bold': 'bold',
 }
 
 export const WORKSHOP_THEME_COLOR_TONE_OPTIONS: {[key: string]: ThemeColorToneKey} = {
@@ -286,7 +286,7 @@ export const WORKSHOP_TOAST_STATUS_OPTIONS: {
 }
 
 export const WORKSHOP_WIDTH_OPTIONS: {[key: string]: number | 'auto'} = {
-  Auto: 'auto',
+  'Auto': 'auto',
   '0': 0,
   '1': 1,
   '2': 2,

package/src/core/components/autocomplete/autocomplete.tsx

@@ -452,7 +452,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
     if (!loading && !disabled && value) {
       return {
         'aria-label': 'Clear',
-        onFocus: handleClearButtonFocus,
+        'onFocus': handleClearButtonFocus,
       }
     }
 

package/src/core/components/dialog/styles.ts

@@ -18,14 +18,14 @@ export function dialogStyle({theme}: ThemeProps): CSSObject {
       display: 'flex',
     },
 
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    alignItems: 'center',
-    justifyContent: 'center',
-    outline: 'none',
-    background: color.backdrop,
+    'top': 0,
+    'left': 0,
+    'right': 0,
+    'bottom': 0,
+    'alignItems': 'center',
+    'justifyContent': 'center',
+    'outline': 'none',
+    'background': color.backdrop,
   }
 }
 

package/src/core/components/menu/menuButton.tsx

@@ -206,11 +206,11 @@ export const MenuButton = forwardRef(function MenuButton(
   const menuProps: MenuProps = useMemo(
     () => ({
       'aria-labelledby': id,
-      onBlurCapture: handleBlur,
-      onClickOutside: handleMenuClickOutside,
-      onEscape: handleMenuEscape,
-      onItemClick: handleItemClick,
-      originElement: buttonElement,
+      'onBlurCapture': handleBlur,
+      'onClickOutside': handleMenuClickOutside,
+      'onEscape': handleMenuEscape,
+      'onItemClick': handleItemClick,
+      'originElement': buttonElement,
       registerElement,
       shouldFocus,
     }),
@@ -235,13 +235,13 @@ export const MenuButton = forwardRef(function MenuButton(
       cloneElement(buttonProp, {
         'data-ui': 'MenuButton',
         id,
-        onClick: handleButtonClick,
-        onKeyDown: handleButtonKeyDown,
-        onMouseDown: handleMouseDown,
+        'onClick': handleButtonClick,
+        'onKeyDown': handleButtonKeyDown,
+        'onMouseDown': handleMouseDown,
         'aria-haspopup': true,
         'aria-expanded': open,
-        ref: ref,
-        selected: buttonProp.props.selected ?? open,
+        'ref': ref,
+        'selected': buttonProp.props.selected ?? open,
       }),
     [buttonProp, handleButtonClick, handleButtonKeyDown, handleMouseDown, id, open],
   )

package/src/core/components/tab/tab.tsx

@@ -11,14 +11,14 @@ export interface TabProps {
    * The `id` of the correlating `TabPanel` component.
    */
   'aria-controls': string
-  id: string
-  icon?: React.ElementType | React.ReactNode
-  focused?: boolean
-  fontSize?: number | number[]
-  label?: React.ReactNode
-  padding?: number | number[]
-  selected?: boolean
-  tone?: ButtonTone
+  'id': string
+  'icon'?: React.ElementType | React.ReactNode
+  'focused'?: boolean
+  'fontSize'?: number | number[]
+  'label'?: React.ReactNode
+  'padding'?: number | number[]
+  'selected'?: boolean
+  'tone'?: ButtonTone
 }
 
 const CustomButton = styled(Button)`

package/src/core/components/tab/tabPanel.tsx

@@ -9,7 +9,7 @@ export interface TabPanelProps extends BoxProps {
    * The `id` of the correlating `Tab` component.
    */
   'aria-labelledby': string
-  id: string
+  'id': string
 }
 
 /**

package/src/core/primitives/avatar/styles.ts

@@ -14,24 +14,24 @@ export const avatarStyle = {
 
 function avatarArrowStyle(): CSSObject {
   return {
-    position: 'absolute',
-    boxSizing: 'border-box',
-    zIndex: 0,
-    opacity: 0,
-    transition: 'all 0.2s linear',
-    transform: 'rotate(-90deg) translate3d(0, 6px, 0)',
-    left: 0,
-    right: 0,
-    top: 0,
-    bottom: 0,
+    'position': 'absolute',
+    'boxSizing': 'border-box',
+    'zIndex': 0,
+    'opacity': 0,
+    'transition': 'all 0.2s linear',
+    'transform': 'rotate(-90deg) translate3d(0, 6px, 0)',
+    'left': 0,
+    'right': 0,
+    'top': 0,
+    'bottom': 0,
 
     '& > svg': {
-      width: '11px',
-      height: '7px',
-      position: 'absolute',
-      top: '-5px',
-      left: '50%',
-      transform: 'translateX(-6px)',
+      'width': '11px',
+      'height': '7px',
+      'position': 'absolute',
+      'top': '-5px',
+      'left': '50%',
+      'transform': 'translateX(-6px)',
 
       '&:not([hidden])': {
         display: 'block',
@@ -63,11 +63,11 @@ export function avatarRootStyle(props: AvatarRootStyleProps & ThemeProps): CSSOb
     '--avatar-bg-color': `var(--card-avatar-${$color}-bg-color)`,
     '--avatar-fg-color': `var(--card-avatar-${$color}-fg-color)`,
 
-    backgroundColor: 'var(--avatar-bg-color)',
-    position: 'relative',
-    boxSizing: 'border-box',
-    userSelect: 'none',
-    boxShadow: '0 0 0 1px var(--card-bg-color)',
+    'backgroundColor': 'var(--avatar-bg-color)',
+    'position': 'relative',
+    'boxSizing': 'border-box',
+    'userSelect': 'none',
+    'boxShadow': '0 0 0 1px var(--card-bg-color)',
 
     '&[data-status="inactive"]': {
       opacity: 0.5,
@@ -81,14 +81,14 @@ export function avatarRootStyle(props: AvatarRootStyleProps & ThemeProps): CSSOb
 
     /* &:is(button) */
     '&[data-as="button"]': {
-      WebkitFontSmoothing: 'inherit',
-      appearance: 'none',
-      margin: 0,
-      padding: 0,
-      border: 0,
-      font: 'inherit',
-      color: 'inherit',
-      outline: 'none',
+      'WebkitFontSmoothing': 'inherit',
+      'appearance': 'none',
+      'margin': 0,
+      'padding': 0,
+      'border': 0,
+      'font': 'inherit',
+      'color': 'inherit',
+      'outline': 'none',
 
       '&:focus': {
         boxShadow: focusRingStyle({focusRing: avatar.focusRing}),
@@ -110,9 +110,9 @@ export function responsiveAvatarSizeStyle(
     const avatarSize = avatar.sizes[size] || avatar.sizes[0]
 
     return {
-      width: rem(avatarSize.size),
-      height: rem(avatarSize.size),
-      borderRadius: rem(avatarSize.size / 2),
+      'width': rem(avatarSize.size),
+      'height': rem(avatarSize.size),
+      'borderRadius': rem(avatarSize.size / 2),
 
       '&>svg': {
         width: rem(avatarSize.size),
@@ -131,14 +131,14 @@ export function avatarImageStyle(): CSSObject {
 
 export function avatarInitialsStyle(): CSSObject {
   return {
-    width: '100%',
-    height: '100%',
-    color: 'var(--avatar-fg-color)',
-    alignItems: 'center',
-    justifyContent: 'center',
-    textTransform: 'uppercase',
-    textAlign: 'center',
-    borderRadius: '50%',
+    'width': '100%',
+    'height': '100%',
+    'color': 'var(--avatar-fg-color)',
+    'alignItems': 'center',
+    'justifyContent': 'center',
+    'textTransform': 'uppercase',
+    'textAlign': 'center',
+    'borderRadius': '50%',
 
     '&:not([hidden])': {
       display: 'flex',
@@ -155,8 +155,8 @@ function avatarBgStrokeStyle(): CSSObject {
 
 function avatarStrokeStyle(): CSSObject {
   return {
-    strokeWidth: '2px',
-    stroke: 'var(--avatar-bg-color)',
+    'strokeWidth': '2px',
+    'stroke': 'var(--avatar-bg-color)',
 
     '[data-status="editing"] &': {
       strokeDasharray: '2 4',

package/src/core/primitives/badge/styles.ts

@@ -8,8 +8,8 @@ export function badgeStyle(props: BadgeStyleProps): CSSObject {
     '--card-bg-color': `var(--card-badge-${$tone}-bg-color)`,
     '--card-fg-color': `var(--card-badge-${$tone}-fg-color)`,
 
-    backgroundColor: 'var(--card-bg-color)',
-    cursor: 'default',
+    'backgroundColor': 'var(--card-bg-color)',
+    'cursor': 'default',
 
     '&:not([hidden])': {
       display: 'inline-block',

package/src/core/primitives/button/styles.ts

@@ -81,12 +81,12 @@ export function buttonColorStyles(
   return [
     _cardColorStyle(baseColor, color.enabled),
     {
-      backgroundColor: 'var(--card-bg-color)',
-      color: 'var(--card-fg-color)',
-      boxShadow: focusRingBorderStyle(border),
+      'backgroundColor': 'var(--card-bg-color)',
+      'color': 'var(--card-fg-color)',
+      'boxShadow': focusRingBorderStyle(border),
       '&:disabled, &[data-disabled="true"]': _cardColorStyle(baseColor, color.disabled),
       "&:not([data-disabled='true'])": {
-        boxShadow: combineBoxShadow(
+        'boxShadow': combineBoxShadow(
           focusRingBorderStyle(border),
           shadow ? defaultBoxShadow : undefined,
         ),

package/src/core/primitives/inline/styles.ts

@@ -4,7 +4,7 @@ import {ResponsiveInlineSpaceStyleProps} from './types'
 
 export function inlineBaseStyle(): CSSObject {
   return {
-    lineHeight: 0,
+    'lineHeight': 0,
 
     '&&:not([hidden])': {
       display: 'block',
@@ -24,7 +24,7 @@ export function inlineSpaceStyle(props: ResponsiveInlineSpaceStyleProps & ThemeP
     const _space = rem(spaceIndex === 0.5 ? space[1] / 2 : space[spaceIndex])
 
     return {
-      margin: `-${_space} 0 0 -${_space}`,
+      'margin': `-${_space} 0 0 -${_space}`,
       '& > div': {padding: `${_space} 0 0 ${_space}`},
     }
   })

package/src/core/primitives/popover/constants.ts

@@ -7,16 +7,16 @@ export const DEFAULT_POPOVER_ARROW_HEIGHT = 8
 export const DEFAULT_POPOVER_ARROW_RADIUS = 2
 export const DEFAULT_POPOVER_MARGINS: PopoverMargins = [0, 0, 0, 0]
 export const DEFAULT_FALLBACK_PLACEMENTS: Record<Placement, Placement[]> = {
-  top: ['bottom', 'left', 'right'],
+  'top': ['bottom', 'left', 'right'],
   'top-start': ['bottom-start', 'left-start', 'right-start'],
   'top-end': ['bottom-end', 'left-end', 'right-end'],
-  bottom: ['top', 'left', 'right'],
+  'bottom': ['top', 'left', 'right'],
   'bottom-start': ['top-start', 'left-start', 'right-start'],
   'bottom-end': ['top-end', 'left-end', 'right-end'],
-  left: ['right', 'top', 'bottom'],
+  'left': ['right', 'top', 'bottom'],
   'left-start': ['right-start', 'top-start', 'bottom-start'],
   'left-end': ['right-end', 'top-end', 'bottom-end'],
-  right: ['left', 'top', 'bottom'],
+  'right': ['left', 'top', 'bottom'],
   'right-start': ['left-start', 'top-start', 'bottom-start'],
   'right-end': ['left-end', 'top-end', 'bottom-end'],
 }

package/src/core/primitives/stack/styles.ts

@@ -12,8 +12,8 @@ const BASE_STYLE: CSSObject = {
   '&[data-as="ul"],&[data-as="ol"]': {
     listStyle: 'none',
   },
-  gridTemplateColumns: 'minmax(0, 1fr)',
-  gridAutoRows: 'min-content',
+  'gridTemplateColumns': 'minmax(0, 1fr)',
+  'gridAutoRows': 'min-content',
 }
 
 export function stackBaseStyle(): CSSObject {

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

@@ -16,7 +16,7 @@ import {WORKSHOP_PLACEMENT_OPTIONS} from '../../../__workshop__/constants'
 const PORTAL_OPTIONS = {
   '(true)': true,
   '(false)': false,
-  portal1: 'portal1',
+  'portal1': 'portal1',
 }
 
 export default function CustomPortalStory() {

package/src/core/primitives/tooltip/constants.ts

@@ -8,16 +8,16 @@ export const DEFAULT_TOOLTIP_DISTANCE = 4
 export const DEFAULT_TOOLTIP_PADDING = 4
 
 export const DEFAULT_FALLBACK_PLACEMENTS: Record<Placement, Placement[]> = {
-  top: ['top-end', 'top-start', 'bottom', 'left', 'right'],
+  'top': ['top-end', 'top-start', 'bottom', 'left', 'right'],
   'top-start': ['top', 'top-end', 'bottom-start', 'left-start', 'right-start'],
   'top-end': ['top', 'top-start', 'bottom-end', 'left-end', 'right-end'],
-  bottom: ['bottom-end', 'bottom-start', 'top', 'left', 'right'],
+  'bottom': ['bottom-end', 'bottom-start', 'top', 'left', 'right'],
   'bottom-start': ['bottom', 'bottom-end', 'top-start', 'left-start', 'right-start'],
   'bottom-end': ['bottom', 'bottom-start', 'top-end', 'left-end', 'right-end'],
-  left: ['left-end', 'left-start', 'right', 'top', 'bottom'],
+  'left': ['left-end', 'left-start', 'right', 'top', 'bottom'],
   'left-start': ['left', 'left-end', 'right-start', 'top-start', 'bottom-start'],
   'left-end': ['left', 'left-start', 'right-end', 'top-end', 'bottom-end'],
-  right: ['right-end', 'right-start', 'left', 'top', 'bottom'],
+  'right': ['right-end', 'right-start', 'left', 'top', 'bottom'],
   'right-start': ['right', 'right-end', 'left-start', 'top-start', 'bottom-start'],
   'right-end': ['right', 'right-start', 'left-end', 'top-end', 'bottom-end'],
 }