@sanity/ui 0.38.3-next.18 → 0.38.3-next.36

package/package.json

@@ -1,18 +1,18 @@
 {
   "name": "@sanity/ui",
-  "version": "0.38.3-next.18+f1216ee3",
+  "version": "0.38.3-next.36+073973df",
   "sideEffects": false,
   "types": "./dist/types/src/index.d.ts",
   "source": "./src/index.ts",
-  "module": "./dist/sanity-ui.mjs",
+  "module": "./dist/sanity-ui.esm.js",
   "main": "./dist/sanity-ui.js",
   "exports": {
     ".": {
       "types": "./dist/types/src/index.d.ts",
       "source": "./src/index.ts",
-      "import": "./dist/sanity-ui.mjs",
+      "import": "./dist/sanity-ui.esm.js",
       "require": "./dist/sanity-ui.js",
-      "default": "./dist/sanity-ui.mjs"
+      "default": "./dist/sanity-ui.esm.js"
     }
   },
   "files": [
@@ -32,31 +32,24 @@
     "watch": "pkg watch --tsconfig tsconfig.dist.json"
   },
   "dependencies": {
-    "@popperjs/core": "^2.11.6",
-    "@sanity/color": "2.1.17-next.18+f1216ee3",
-    "@sanity/icons": "1.3.7-next.18+f1216ee3",
-    "framer-motion": "^7.3.5",
-    "popper-max-size-modifier": "^0.2.0",
-    "react-is": "^18.2.0",
-    "react-popper": "^2.3.0",
+    "@floating-ui/react-dom": "^1.0.0",
+    "@sanity/color": "2.1.17-next.36+073973df",
+    "@sanity/icons": "1.3.7-next.36+073973df",
+    "framer-motion": "^7.5.2",
     "react-refractor": "^2.1.7"
   },
   "devDependencies": {
-    "@floating-ui/react-dom": "^1.0.0",
     "@juggle/resize-observer": "^3.4.0",
-    "@testing-library/dom": "^8.17.1",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.4.0",
     "@types/refractor": "^3.0.2",
-    "framer-motion": "^7.3.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-refractor": "^2.1.7",
-    "styled-components": "^5.3.5"
+    "react-is": "^18.2.0",
+    "styled-components": "^5.3.6"
   },
   "peerDependencies": {
     "react": "^18",
     "react-dom": "^18",
+    "react-is": "^18",
     "styled-components": "^5.2"
   },
   "repository": {
@@ -76,5 +69,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "f1216ee3ef45b3710598c841bda1b3fc47ea97ac"
+  "gitHead": "073973df407da1d34294c04d56e1a8085e7f3326"
 }

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

@@ -80,8 +80,8 @@ export default function AsyncStory() {
 
   return (
     <Box padding={[4, 5, 6]}>
-      <Stack space={3}>
-        <Text as="label" htmlFor="async" size={1} weight="semibold">
+      <Stack space={[3, 3, 4]}>
+        <Text as="label" htmlFor="async" size={[1, 1, 2]} weight="semibold">
           Country
         </Text>
         <LayerProvider zOffset={100}>
@@ -104,7 +104,9 @@ export default function AsyncStory() {
         </LayerProvider>
 
         <Card border overflow="auto" padding={3} radius={1}>
-          <Code language="json">{JSON.stringify({loading, options, query, value}, null, 2)}</Code>
+          <Code language="json" size={[1, 1, 2]}>
+            {JSON.stringify({loading, options, query, value}, null, 2)}
+          </Code>
         </Card>
       </Stack>
     </Box>

package/src/components/autocomplete/autocomplete.styles.tsx

@@ -24,11 +24,6 @@ export const ListBox = styled(Box)`
  * @internal
  */
 export const ResultsPopover = styled(Popover)`
-  & > div {
-    overflow: auto;
-    -webkit-overflow-scrolling: touch;
-  }
-
   &[data-popper-reference-hidden='true'] {
     display: none;
   }

package/src/components/autocomplete/autocomplete.tsx

@@ -1,8 +1,25 @@
 import {ChevronDownIcon} from '@sanity/icons'
-import {cloneElement, forwardRef, useCallback, useEffect, useMemo, useReducer, useRef} from 'react'
+import {
+  ChangeEvent,
+  ElementType,
+  FocusEvent,
+  HTMLProps,
+  KeyboardEvent,
+  MouseEvent,
+  ReactElement,
+  ReactNode,
+  Ref,
+  cloneElement,
+  forwardRef,
+  useCallback,
+  useEffect,
+  useMemo,
+  useReducer,
+  useRef,
+} from 'react'
 import {EMPTY_ARRAY, EMPTY_RECORD} from '../../constants'
 import {_hasFocus, _raf, focusFirstDescendant} from '../../helpers'
-import {useForwardedRef, useArrayProp} from '../../hooks'
+import {useArrayProp, useForwardedRef} from '../../hooks'
 import {Box, BoxProps, Button, Card, PopoverProps, Stack, Text, TextInput} from '../../primitives'
 import {AnimatedSpinnerIcon, ListBox, ResultsPopover, Root} from './autocomplete.styles'
 import {AutocompleteOption} from './autocompleteOption'
@@ -23,53 +40,45 @@ export interface AutocompleteProps<Option extends BaseAutocompleteOption = BaseA
   customValidity?: string
   filterOption?: (query: string, option: Option) => boolean
   fontSize?: number | number[]
-  icon?: React.ElementType | React.ReactNode
+  icon?: ElementType | ReactNode
   id: string
-  /**
-   * @beta
-   */
+  /** @beta */
   listBox?: BoxProps
   loading?: boolean
   onChange?: (value: string) => void
   onQueryChange?: (query: string | null) => void
   onSelect?: (value: string) => void
-  /**
-   * @beta
-   */
+  /** @beta */
   openButton?: boolean | AutocompleteOpenButtonProps
   options?: Option[]
   padding?: number | number[]
   popover?: Omit<PopoverProps, 'content' | 'onMouseEnter' | 'onMouseLeave' | 'open'> &
-    Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'children' | 'content' | 'ref' | 'width'>
-  prefix?: React.ReactNode
+    Omit<HTMLProps<HTMLDivElement>, 'as' | 'children' | 'content' | 'ref' | 'width'>
+  prefix?: ReactNode
   radius?: number | number[]
-  /**
-   * @beta
-   */
+  /** @beta */
   relatedElements?: HTMLElement[]
-  renderOption?: (option: Option) => React.ReactElement
-  /**
-   * @beta
-   */
+  renderOption?: (option: Option) => ReactElement
+  /** @beta */
   renderPopover?: (
     props: {
-      content: React.ReactElement | null
+      content: ReactElement | null
       hidden: boolean
       inputElement: HTMLInputElement | null
       onMouseEnter: () => void
       onMouseLeave: () => void
     },
-    ref: React.Ref<HTMLDivElement>
-  ) => React.ReactNode
+    ref: Ref<HTMLDivElement>
+  ) => ReactNode
   renderValue?: (value: string, option?: Option) => string
-  suffix?: React.ReactNode
+  suffix?: ReactNode
   value?: string
 }
 
-const defaultRenderValue = (value: string, option?: BaseAutocompleteOption) =>
+const DEFAULT_RENDER_VALUE = (value: string, option?: BaseAutocompleteOption) =>
   option ? option.value : value
 
-const defaultFilterOption = (query: string, option: BaseAutocompleteOption) =>
+const DEFAULT_FILTER_OPTION = (query: string, option: BaseAutocompleteOption) =>
   option.value.toLowerCase().indexOf(query.toLowerCase()) > -1
 
 const InnerAutocomplete = forwardRef(function InnerAutocomplete<
@@ -77,7 +86,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
 >(
   props: AutocompleteProps<Option> &
     Omit<
-      React.HTMLProps<HTMLInputElement>,
+      HTMLProps<HTMLInputElement>,
       | 'aria-activedescendant'
       | 'aria-autocomplete'
       | 'aria-expanded'
@@ -97,7 +106,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
       | 'type'
       | 'value'
     >,
-  ref: React.Ref<HTMLInputElement>
+  ref: Ref<HTMLInputElement>
 ) {
   const {
     border = true,
@@ -107,7 +116,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
     fontSize = 2,
     icon,
     id,
-    listBox = {},
+    listBox = EMPTY_RECORD,
     loading,
     onBlur,
     onChange,
@@ -117,14 +126,14 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
     openButton,
     options: optionsProp,
     padding: paddingProp = 3,
-    popover = {},
+    popover = EMPTY_RECORD,
     prefix,
     radius = 3,
     readOnly,
     relatedElements,
     renderOption: renderOptionProp,
     renderPopover,
-    renderValue = defaultRenderValue,
+    renderValue = DEFAULT_RENDER_VALUE,
     suffix,
     value: valueProp,
     ...restProps
@@ -153,8 +162,9 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
 
   const renderOption =
     typeof renderOptionProp === 'function' ? renderOptionProp : defaultRenderOption
+
   const filterOption =
-    typeof filterOptionProp === 'function' ? filterOptionProp : defaultFilterOption
+    typeof filterOptionProp === 'function' ? filterOptionProp : DEFAULT_FILTER_OPTION
 
   // Element refs
   const rootElementRef = useRef<HTMLDivElement | null>(null)
@@ -186,7 +196,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
   const expanded = (query !== null && loading) || (focused && query !== null)
 
   const handleRootBlur = useCallback(
-    (event: React.FocusEvent<HTMLInputElement>) => {
+    (event: FocusEvent<HTMLInputElement>) => {
       setTimeout(() => {
         // NOTE: This is a workaround for a bug that may happen in Chrome (clicking the scrollbar
         // closes the results in certain situations):
@@ -222,7 +232,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
     [onBlur, onQueryChange, relatedElements]
   )
 
-  const handleRootFocus = useCallback((event: React.FocusEvent) => {
+  const handleRootFocus = useCallback((event: FocusEvent<HTMLDivElement>) => {
     const listBoxElement = listBoxElementRef.current
     const focusedElement = event.target instanceof HTMLElement ? event.target : null
     const listFocused = listBoxElement?.contains(focusedElement) || false
@@ -253,7 +263,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
   )
 
   const handleRootKeyDown = useCallback(
-    (event: React.KeyboardEvent<HTMLElement>) => {
+    (event: KeyboardEvent<HTMLElement>) => {
       if (event.key === 'ArrowDown') {
         event.preventDefault()
 
@@ -316,7 +326,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
   )
 
   const handleInputChange = useCallback(
-    (event: React.ChangeEvent<HTMLInputElement>) => {
+    (event: ChangeEvent<HTMLInputElement>) => {
       const nextQuery = event.currentTarget.value
 
       dispatch({type: 'input/change', query: nextQuery})
@@ -327,7 +337,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
   )
 
   const handleInputFocus = useCallback(
-    (event: React.FocusEvent<HTMLInputElement>) => {
+    (event: FocusEvent<HTMLInputElement>) => {
       if (!focused) {
         dispatch({type: 'input/focus'})
 
@@ -439,24 +449,14 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
       }),
     [padding]
   )
-  const openButtonPadding = useMemo(
-    () =>
-      padding.map((v) => {
-        if (v === 0) return 0
-        if (v === 1) return 0
-        if (v === 2) return 1
-
-        return v - 1
-      }),
-    [padding]
-  )
+  const openButtonPadding = useMemo(() => padding.map((v) => Math.max(v - 1, 0)), [padding])
   const openButtonProps: AutocompleteOpenButtonProps = useMemo(
     () => (typeof openButton === 'object' ? openButton : EMPTY_RECORD),
     [openButton]
   )
 
   const handleOpenClick = useCallback(
-    (event: React.MouseEvent<HTMLButtonElement>) => {
+    (event: MouseEvent<HTMLButtonElement>) => {
       dispatch({
         type: 'root/open',
         query: value ? renderValue(value, currentOption) : '',
@@ -545,7 +545,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
   )
 
   const handleListBoxKeyDown = useCallback(
-    (event: React.KeyboardEvent<HTMLDivElement>) => {
+    (event: KeyboardEvent<HTMLDivElement>) => {
       // If the focus is currently in the list, move focus to the input element
       if (event.key === 'Tab') {
         if (listFocused) inputElementRef.current?.focus()
@@ -679,7 +679,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
 export const Autocomplete = InnerAutocomplete as <Option extends BaseAutocompleteOption>(
   props: AutocompleteProps<Option> &
     Omit<
-      React.HTMLProps<HTMLInputElement>,
+      HTMLProps<HTMLInputElement>,
       | 'aria-activedescendant'
       | 'aria-autocomplete'
       | 'aria-expanded'
@@ -699,6 +699,6 @@ export const Autocomplete = InnerAutocomplete as <Option extends BaseAutocomplet
       | 'type'
       | 'value'
     > & {
-      ref?: React.Ref<HTMLInputElement>
+      ref?: Ref<HTMLInputElement>
     }
-) => React.ReactElement
+) => ReactElement

package/src/components/autocomplete/constants.ts

@@ -20,14 +20,14 @@ export const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = [
 /**
  * @internal
  */
-export const AUTOCOMPLETE_POPOVER_MARGINS: PopoverMargins = [0, 1, 1, 1]
+export const AUTOCOMPLETE_POPOVER_MARGINS: PopoverMargins = [0, 1, 0, 0]
 
 /**
  * @internal
  */
-export const AUTOCOMPLETE_POPOVER_PLACEMENT: Placement = 'bottom-start'
+export const AUTOCOMPLETE_POPOVER_PLACEMENT: Placement = 'bottom'
 
 /**
  * @internal
  */
-export const AUTOCOMPLETE_POPOVER_FALLBACK_PLACEMENTS: Placement[] = ['top-start']
+export const AUTOCOMPLETE_POPOVER_FALLBACK_PLACEMENTS: Placement[] = ['bottom', 'top']

package/src/components/menu/menu.test.tsx

@@ -1,3 +1,5 @@
+/** @jest-environment jsdom */
+
 /* eslint-disable no-console */
 
 import React, {useCallback, useMemo} from 'react'

package/src/components/toast/toast.test.tsx

@@ -1,3 +1,5 @@
+/** @jest-environment jsdom */
+
 import {render} from '../../../test'
 import {ToastContext} from './toastContext'
 import {ToastContextValue} from './types'

package/src/constants.ts

@@ -1,2 +1,19 @@
+/**
+ * @internal
+ */
 export const EMPTY_ARRAY: any[] = []
+
+/**
+ * @internal
+ */
 export const EMPTY_RECORD: Record<string, any> = {}
+
+/**
+ * @internal
+ */
+export const FLOATING_STATIC_SIDES: Record<string, 'bottom' | 'left' | 'top' | 'right'> = {
+  top: 'bottom',
+  right: 'left',
+  bottom: 'top',
+  left: 'right',
+}

package/src/primitives/badge/badge.test.tsx

@@ -1,3 +1,5 @@
+/** @jest-environment jsdom */
+
 import {axe} from 'jest-axe'
 import {render} from '../../../test'
 import {Badge} from './badge'

package/src/primitives/button/button.test.tsx

@@ -1,3 +1,5 @@
+/** @jest-environment jsdom */
+
 import {AddIcon} from '@sanity/icons'
 import {screen} from '@testing-library/react'
 import {axe} from 'jest-axe'

package/src/primitives/popover/__workshop__/PlainStory.tsx

@@ -49,6 +49,7 @@ export default function PlainStory() {
               fallbackPlacements={['top', 'bottom']}
               matchReferenceWidth={matchReferenceWidth}
               open={open}
+              overflow="auto"
               padding={padding}
               placement={placement}
               portal={portal}

package/src/primitives/popover/__workshop__/RightAlignedStory.tsx

@@ -40,6 +40,7 @@ export default function RightAlignedStory() {
             constrainSize={constrainSize}
             content={content}
             open={open}
+            overflow="auto"
             padding={3}
             portal
             placement="bottom"

package/src/primitives/popover/__workshop__/TestStory.tsx

@@ -61,6 +61,7 @@ export default function TestStory(): ReactElement {
                 fallbackPlacements={['left', 'bottom', 'right', 'top']}
                 matchReferenceWidth={matchReferenceWidth}
                 open={open}
+                overflow="auto"
                 padding={3}
                 placement={placement}
                 portal