@sanity/ui 1.0.0-beta.32 → 1.0.0-beta.34

package/package.json

@@ -1,19 +1,20 @@
 {
   "name": "@sanity/ui",
-  "version": "1.0.0-beta.32",
+  "version": "1.0.0-beta.34",
   "sideEffects": false,
-  "types": "./dist/types/src/index.d.ts",
+  "types": "./dist/index.d.ts",
   "source": "./src/index.ts",
-  "module": "./dist/sanity-ui.esm.js",
-  "main": "./dist/sanity-ui.js",
+  "module": "./dist/index.esm.js",
+  "main": "./dist/index.js",
   "exports": {
     ".": {
-      "types": "./dist/types/src/index.d.ts",
+      "types": "./dist/index.d.ts",
       "source": "./src/index.ts",
-      "import": "./dist/sanity-ui.esm.js",
-      "require": "./dist/sanity-ui.js",
-      "default": "./dist/sanity-ui.esm.js"
-    }
+      "import": "./dist/index.esm.js",
+      "require": "./dist/index.js",
+      "default": "./dist/index.esm.js"
+    },
+    "./package.json": "./package.json"
   },
   "files": [
     "dist",
@@ -21,30 +22,90 @@
   ],
   "license": "MIT",
   "scripts": {
-    "build": "pkg build",
-    "check:package": "pkg --strict",
-    "clean": "rimraf dist",
-    "lint": "eslint . --ext .js,.jsx,.mjs,.ts,.tsx --quiet",
-    "postbuild": "run-s check:package",
-    "prebuild": "run-s clean",
+    "build": "run-s clean build:pkg check:pkg",
+    "build:pkg": "pkg build --strict",
+    "build:workshop": "node scripts/build",
+    "check:pkg": "pkg --strict",
+    "check:types": "tsc",
+    "clean": "rimraf .workshop dist",
+    "commit": "cz",
+    "cypress:open": "cypress open",
+    "cypress:run": "cypress run",
+    "dev": "node scripts/dev",
+    "dev:cypress": "run-p dev cypress:open",
+    "format": "prettier --write --cache --ignore-unknown .",
+    "lint": "eslint . --ext .cjs,.js,.jsx,.mjs,.ts,.tsx --quiet",
+    "prepare": "husky install",
+    "prepublishOnly": "pnpm build",
+    "release": "semantic-release",
+    "start:workshop": "http-server -a localhost -c-0 -p 1337 -s -P http://localhost:1337/index.html? .workshop/dist",
     "test": "jest",
-    "type-check": "tsc --build",
-    "watch": "pkg watch"
+    "test:browser": "start-server-and-test 'run-s build:workshop start:workshop' http://localhost:1337 'run-s cypress:run'",
+    "watch": "pkg watch --strict"
   },
   "dependencies": {
     "@floating-ui/react-dom": "^1.0.0",
-    "@sanity/color": "2.1.19-beta.3",
-    "@sanity/icons": "1.3.9-beta.3",
+    "@sanity/color": "3.0.0-beta.1",
+    "@sanity/icons": "^2.0.0",
+    "csstype": "^3.1.1",
     "framer-motion": "^7.5.3",
     "react-refractor": "^2.1.7"
   },
   "devDependencies": {
+    "@babel/core": "^7.20.2",
+    "@babel/preset-env": "^7.20.2",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.18.6",
+    "@commitlint/cli": "^17.3.0",
+    "@commitlint/config-conventional": "^17.3.0",
     "@juggle/resize-observer": "^3.4.0",
+    "@sanity/pkg-utils": "^1.18.0",
+    "@sanity/semantic-release-preset": "^2.0.2",
+    "@sanity/ui-workshop": "1.0.0-beta.6",
+    "@testing-library/dom": "^8.19.0",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "@types/jest": "^29.2.3",
+    "@types/jest-axe": "^3.5.5",
+    "@types/node": "^18.11.9",
+    "@types/react": "^18.0.25",
+    "@types/react-dom": "^18.0.9",
+    "@types/react-is": "^17.0.3",
     "@types/refractor": "^3.0.2",
+    "@types/styled-components": "^5.1.26",
+    "@types/testing-library__jest-dom": "^5.14.5",
+    "@typescript-eslint/eslint-plugin": "^5.44.0",
+    "@typescript-eslint/parser": "^5.44.0",
+    "commitizen": "^4.2.5",
+    "cypress": "^11.2.0",
+    "cypress-real-events": "^1.7.4",
+    "cz-conventional-changelog": "^3.3.0",
+    "esbuild": "^0.15.15",
+    "esbuild-register": "^3.4.1",
+    "eslint": "^8.28.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-jsx-a11y": "^6.6.1",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-react": "^7.31.11",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "http-server": "^14.1.1",
+    "husky": "^8.0.2",
+    "jest": "^29.3.1",
+    "jest-axe": "^7.0.0",
+    "jest-environment-jsdom": "^29.3.1",
+    "lint-staged": "^13.0.3",
+    "module-alias": "^2.2.2",
+    "npm-run-all": "^4.1.5",
+    "prettier": "^2.8.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-is": "^18.2.0",
-    "styled-components": "^5.3.6"
+    "rimraf": "^3.0.2",
+    "semantic-release": "^19.0.5",
+    "start-server-and-test": "^1.14.0",
+    "styled-components": "^5.3.6",
+    "typescript": "^4.9.3"
   },
   "peerDependencies": {
     "react": "^18",
@@ -52,12 +113,15 @@
     "react-is": "^18",
     "styled-components": "^5.2"
   },
+  "engines": {
+    "node": ">=14.0.0"
+  },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/sanity-io/design.git"
+    "url": "git+https://github.com/sanity-io/ui.git"
   },
   "bugs": {
-    "url": "https://github.com/sanity-io/design/issues"
+    "url": "https://github.com/sanity-io/ui/issues"
   },
   "keywords": [
     "sanity",
@@ -66,8 +130,33 @@
   ],
   "author": "Sanity.io <hello@sanity.io>",
   "homepage": "https://www.sanity.io/",
+  "commitlint": {
+    "extends": [
+      "@commitlint/config-conventional"
+    ]
+  },
+  "lint-staged": {
+    "*": [
+      "prettier --write --cache --ignore-unknown"
+    ]
+  },
+  "packageManager": "pnpm@7.12.2",
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "4b884675a828c6aad24f80390a96af14e8084ddc"
+  "release": {
+    "extends": "@sanity/semantic-release-preset",
+    "branches": [
+      "+([0-9])?(.{+([0-9]),x}).x",
+      "main",
+      {
+        "name": "beta",
+        "prerelease": true
+      },
+      {
+        "name": "alpha",
+        "prerelease": true
+      }
+    ]
+  }
 }

package/src/components/autocomplete/__workshop__/example.tsx

@@ -1,6 +1,6 @@
 import {Autocomplete, Box, Card, Container, Stack, Text} from '@sanity/ui'
 import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
-import {PerfTestProps, usePerfTest} from '@sanity/ui-workshop'
+import {PerfTestProps, usePerfTest} from '@sanity/ui-workshop/plugin-perf'
 import {fireEvent} from '@testing-library/dom'
 import {useCallback, useMemo, useState} from 'react'
 import {

package/src/components/autocomplete/__workshop__/index.ts

@@ -1,35 +1,39 @@
 import {defineScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
-export default defineScope('components/autocomplete', 'Autocomplete', [
-  {
-    name: 'example',
-    title: 'Example',
-    component: lazy(() => import('./example')),
-  },
-  {
-    name: 'custom',
-    title: 'Custom',
-    component: lazy(() => import('./custom')),
-  },
-  {
-    name: 'async',
-    title: 'Async',
-    component: lazy(() => import('./async')),
-  },
-  {
-    name: 'constrained-height',
-    title: 'Constrained height',
-    component: lazy(() => import('./constrainedHeight')),
-  },
-  {
-    name: 'focus-and-blur',
-    title: 'Focus and blur',
-    component: lazy(() => import('./focusAndBlur')),
-  },
-  {
-    name: 'fullscreen',
-    title: 'Fullscreen',
-    component: lazy(() => import('./fullscreen')),
-  },
-])
+export default defineScope({
+  name: 'components/autocomplete',
+  title: 'Autocomplete',
+  stories: [
+    {
+      name: 'example',
+      title: 'Example',
+      component: lazy(() => import('./example')),
+    },
+    {
+      name: 'custom',
+      title: 'Custom',
+      component: lazy(() => import('./custom')),
+    },
+    {
+      name: 'async',
+      title: 'Async',
+      component: lazy(() => import('./async')),
+    },
+    {
+      name: 'constrained-height',
+      title: 'Constrained height',
+      component: lazy(() => import('./constrainedHeight')),
+    },
+    {
+      name: 'focus-and-blur',
+      title: 'Focus and blur',
+      component: lazy(() => import('./focusAndBlur')),
+    },
+    {
+      name: 'fullscreen',
+      title: 'Fullscreen',
+      component: lazy(() => import('./fullscreen')),
+    },
+  ],
+})

package/src/components/autocomplete/autocomplete.tsx

@@ -37,7 +37,6 @@ import {autocompleteReducer} from './autocompleteReducer'
 import {
   AUTOCOMPLETE_LISTBOX_IGNORE_KEYS,
   AUTOCOMPLETE_POPOVER_FALLBACK_PLACEMENTS,
-  AUTOCOMPLETE_POPOVER_MARGINS,
   AUTOCOMPLETE_POPOVER_PLACEMENT,
 } from './constants'
 import {AutocompleteOpenButtonProps, BaseAutocompleteOption} from './types'
@@ -641,7 +640,6 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
 
     return (
       <Popover
-        __unstable_margins={AUTOCOMPLETE_POPOVER_MARGINS}
         arrow={false}
         constrainSize
         content={content}
@@ -650,6 +648,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
         onMouseEnter={handlePopoverMouseEnter}
         onMouseLeave={handlePopoverMouseLeave}
         open={expanded}
+        overflow="auto"
         placement={AUTOCOMPLETE_POPOVER_PLACEMENT}
         portal
         radius={radius}

package/src/components/autocomplete/constants.ts

@@ -1,4 +1,4 @@
-import {Placement, PopoverMargins} from '../../types'
+import {Placement} from '../../types'
 
 /**
  * @internal
@@ -20,14 +20,9 @@ export const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = [
 /**
  * @internal
  */
-export const AUTOCOMPLETE_POPOVER_MARGINS: PopoverMargins = [0, 1, 0, 0]
+export const AUTOCOMPLETE_POPOVER_PLACEMENT: Placement = 'bottom-start'
 
 /**
  * @internal
  */
-export const AUTOCOMPLETE_POPOVER_PLACEMENT: Placement = 'bottom'
-
-/**
- * @internal
- */
-export const AUTOCOMPLETE_POPOVER_FALLBACK_PLACEMENTS: Placement[] = ['bottom', 'top']
+export const AUTOCOMPLETE_POPOVER_FALLBACK_PLACEMENTS: Placement[] = ['bottom-start', 'top-start']

package/src/components/breadcrumbs/__workshop__/index.ts

@@ -1,10 +1,14 @@
 import {defineScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
-export default defineScope('components/breadcrumbs', 'Breadcrumbs', [
-  {
-    name: 'example',
-    title: 'Example',
-    component: lazy(() => import('./example')),
-  },
-])
+export default defineScope({
+  name: 'components/breadcrumbs',
+  title: 'Breadcrumbs',
+  stories: [
+    {
+      name: 'example',
+      title: 'Example',
+      component: lazy(() => import('./example')),
+    },
+  ],
+})

package/src/components/dialog/__workshop__/index.ts

@@ -1,12 +1,16 @@
 import {defineScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
-export default defineScope('components/dialog', 'Dialog', [
-  {name: 'props', title: 'Props', component: lazy(() => import('./props'))},
-  {name: 'nested', title: 'Nested', component: lazy(() => import('./nested'))},
-  {name: 'on-scroll', title: 'On scroll', component: lazy(() => import('./onScroll'))},
-  {name: 'layering', title: 'Layering', component: lazy(() => import('./layering'))},
-  {name: 'position', title: 'Position', component: lazy(() => import('./position'))},
-  {name: 'provider', title: 'Provider', component: lazy(() => import('./provider'))},
-  {name: 'auto-focus', title: 'AutoFocus', component: lazy(() => import('./autoFocus'))},
-])
+export default defineScope({
+  name: 'components/dialog',
+  title: 'Dialog',
+  stories: [
+    {name: 'props', title: 'Props', component: lazy(() => import('./props'))},
+    {name: 'nested', title: 'Nested', component: lazy(() => import('./nested'))},
+    {name: 'on-scroll', title: 'On scroll', component: lazy(() => import('./onScroll'))},
+    {name: 'layering', title: 'Layering', component: lazy(() => import('./layering'))},
+    {name: 'position', title: 'Position', component: lazy(() => import('./position'))},
+    {name: 'provider', title: 'Provider', component: lazy(() => import('./provider'))},
+    {name: 'auto-focus', title: 'AutoFocus', component: lazy(() => import('./autoFocus'))},
+  ],
+})

package/src/components/hotkeys/__workshop__/index.ts

@@ -1,6 +1,14 @@
 import {defineScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
-export default defineScope('components/hotkeys', 'Hotkeys', [
-  {name: 'plain', title: 'Plain', component: lazy(() => import('./plain'))},
-])
+export default defineScope({
+  name: 'components/hotkeys',
+  title: 'Hotkeys',
+  stories: [
+    {
+      name: 'plain',
+      title: 'Plain',
+      component: lazy(() => import('./plain')),
+    },
+  ],
+})

package/src/components/menu/__workshop__/index.ts

@@ -1,70 +1,74 @@
 import {defineScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
-export default defineScope('components/menu', 'Menu', [
-  {
-    name: 'menu-button',
-    title: 'MenuButton',
-    component: lazy(() => import('./menuButton')),
-  },
-  {
-    name: 'nested-menu-items',
-    title: 'Nested MenuItems',
-    component: lazy(() => import('./nestedMenu')),
-  },
-  {
-    name: 'custom-menu-item',
-    title: 'Custom MenuItem',
-    component: lazy(() => import('./customMenuItem')),
-  },
-  {
-    name: 'groups',
-    title: 'Groups',
-    component: lazy(() => import('./groups')),
-  },
-  {
-    name: 'menu-group-right',
-    title: 'Menu group (right)',
-    component: lazy(() => import('./menuGroupRight')),
-  },
-  {
-    name: 'tones',
-    title: 'Tones',
-    component: lazy(() => import('./tones')),
-  },
-  {
-    name: 'selected-item',
-    title: 'Selected item',
-    component: lazy(() => import('./selectedItem')),
-  },
-  {
-    name: 'closable',
-    title: 'Closeable',
-    component: lazy(() => import('./closableMenuButton')),
-  },
-  {
-    name: 'without-arrow',
-    title: 'Without arrow',
-    component: lazy(() => import('./withoutArrow')),
-  },
-  {
-    name: 'constrained-in-boundary',
-    title: 'Constrained in boundary',
-    component: lazy(() => import('./constrainedInBoundary')),
-  },
-  {
-    name: 'as-component',
-    title: 'As component',
-    component: lazy(() => import('./asComponent')),
-  },
-  {
-    name: 'disable-focus-on-close',
-    title: 'Disable focus on close',
-    component: lazy(() => import('./disableFocusOnClose')),
-  },
-  {
-    name: 'menu-button-with-on-close',
-    title: 'MenuButton with on close',
-    component: lazy(() => import('./onCloseMenuButton')),
-  },
-])
+export default defineScope({
+  name: 'components/menu',
+  title: 'Menu',
+  stories: [
+    {
+      name: 'menu-button',
+      title: 'MenuButton',
+      component: lazy(() => import('./menuButton')),
+    },
+    {
+      name: 'nested-menu-items',
+      title: 'Nested MenuItems',
+      component: lazy(() => import('./nestedMenu')),
+    },
+    {
+      name: 'custom-menu-item',
+      title: 'Custom MenuItem',
+      component: lazy(() => import('./customMenuItem')),
+    },
+    {
+      name: 'groups',
+      title: 'Groups',
+      component: lazy(() => import('./groups')),
+    },
+    {
+      name: 'menu-group-right',
+      title: 'Menu group (right)',
+      component: lazy(() => import('./menuGroupRight')),
+    },
+    {
+      name: 'tones',
+      title: 'Tones',
+      component: lazy(() => import('./tones')),
+    },
+    {
+      name: 'selected-item',
+      title: 'Selected item',
+      component: lazy(() => import('./selectedItem')),
+    },
+    {
+      name: 'closable',
+      title: 'Closeable',
+      component: lazy(() => import('./closableMenuButton')),
+    },
+    {
+      name: 'without-arrow',
+      title: 'Without arrow',
+      component: lazy(() => import('./withoutArrow')),
+    },
+    {
+      name: 'constrained-in-boundary',
+      title: 'Constrained in boundary',
+      component: lazy(() => import('./constrainedInBoundary')),
+    },
+    {
+      name: 'as-component',
+      title: 'As component',
+      component: lazy(() => import('./asComponent')),
+    },
+    {
+      name: 'disable-focus-on-close',
+      title: 'Disable focus on close',
+      component: lazy(() => import('./disableFocusOnClose')),
+    },
+    {
+      name: 'menu-button-with-on-close',
+      title: 'MenuButton with on close',
+      component: lazy(() => import('./onCloseMenuButton')),
+    },
+  ],
+})

package/src/components/menu/menuButton.tsx

@@ -228,28 +228,30 @@ export const MenuButton = forwardRef(function MenuButton(
     [buttonProp, handleButtonClick, handleButtonKeyDown, id, open, setButtonRef]
   )
 
-  const popoverProps: PopoverProps = useMemo(() => {
-    return {
+  const popoverProps: MenuButtonProps['popover'] = useMemo(
+    () => ({
       boundaryElement: deprecated_boundaryElement,
+      overflow: 'auto',
       placement: deprecated_placement,
       portal: deprecated_portal,
-      radius: deprecated_popoverRadius,
       preventOverflow: deprecated_preventOverflow,
+      radius: deprecated_popoverRadius,
       scheme: deprecated_popoverScheme,
       ...(popover || {}),
-    }
-  }, [
-    deprecated_boundaryElement,
-    deprecated_preventOverflow,
-    deprecated_placement,
-    popover,
-    deprecated_popoverRadius,
-    deprecated_portal,
-    deprecated_popoverScheme,
-  ])
+    }),
+    [
+      deprecated_boundaryElement,
+      deprecated_placement,
+      deprecated_popoverRadius,
+      deprecated_popoverScheme,
+      deprecated_portal,
+      deprecated_preventOverflow,
+      popover,
+    ]
+  )
 
   return (
-    <Popover {...popoverProps} content={menu} data-ui="MenuButton__popover" open={open}>
+    <Popover data-ui="MenuButton__popover" {...popoverProps} content={menu} open={open}>
       {button || <></>}
     </Popover>
   )

package/src/components/skeleton/__workshop__/index.ts

@@ -1,7 +1,11 @@
 import {defineScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
-export default defineScope('components/skeleton', 'Skeleton', [
-  {name: 'skeleton', title: 'Skeleton', component: lazy(() => import('./skeleton'))},
-  {name: 'skeleton-delay', title: 'Skeleton delay', component: lazy(() => import('./delay'))},
-])
+export default defineScope({
+  name: 'components/skeleton',
+  title: 'Skeleton',
+  stories: [
+    {name: 'skeleton', title: 'Skeleton', component: lazy(() => import('./skeleton'))},
+    {name: 'skeleton-delay', title: 'Skeleton delay', component: lazy(() => import('./delay'))},
+  ],
+})

package/src/components/tab/__workshop__/index.ts

@@ -1,6 +1,14 @@
 import {defineScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
-export default defineScope('components/tab', 'Tab', [
-  {name: 'example', title: 'Example', component: lazy(() => import('./example'))},
-])
+export default defineScope({
+  name: 'components/tab',
+  title: 'Tab',
+  stories: [
+    {
+      name: 'example',
+      title: 'Example',
+      component: lazy(() => import('./example')),
+    },
+  ],
+})

package/src/components/toast/__workshop__/index.ts

@@ -1,7 +1,19 @@
 import {defineScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
-export default defineScope('components/toast', 'Toast', [
-  {name: 'toast', title: 'Toast', component: lazy(() => import('./toast'))},
-  {name: 'hook', title: 'Hook', component: lazy(() => import('./hook'))},
-])
+export default defineScope({
+  name: 'components/toast',
+  title: 'Toast',
+  stories: [
+    {
+      name: 'toast',
+      title: 'Toast',
+      component: lazy(() => import('./toast')),
+    },
+    {
+      name: 'hook',
+      title: 'Hook',
+      component: lazy(() => import('./hook')),
+    },
+  ],
+})