@sanity/ui 0.37.14-next.6 → 0.37.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "0.37.14-next.6+c9c40561",
+  "version": "0.37.16",
   "sideEffects": false,
   "source": "./src/index.ts",
   "exports": {
@@ -30,14 +30,15 @@
     "watch:es": "tsc --preserveWatchOutput -w --module ES6 --outDir lib/esm --project tsconfig.lib.json --rootDir src --target ES6"
   },
   "dependencies": {
-    "@floating-ui/react-dom": "^1.0.0",
     "@juggle/resize-observer": "^3.4.0",
+    "@popperjs/core": "^2.11.6",
     "@reach/auto-id": "^0.17.0",
-    "@sanity/color": "2.1.13-next.6+c9c40561",
-    "@sanity/icons": "1.3.3-next.6+c9c40561",
+    "@sanity/color": "^2.1.13",
+    "@sanity/icons": "^1.3.3",
     "framer-motion": "6.3.0",
     "popper-max-size-modifier": "^0.2.0",
     "react-is": "^17.0.2",
+    "react-popper": "^2.3.0",
     "react-refractor": "^2.1.7"
   },
   "devDependencies": {
@@ -71,5 +72,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "c9c40561a5d0ddde6adf6c931669121e7eda7d59"
+  "gitHead": "4650efb5fc7f539f42465ae515ad1b8312826091"
 }

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

@@ -24,6 +24,11 @@ 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/constants.ts

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

package/src/constants.ts

@@ -1,19 +1,2 @@
-/**
- * @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/popover/__workshop__/PlainStory.tsx

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

package/src/primitives/popover/{popoverArrow.tsx → arrow.tsx}

@@ -17,11 +17,11 @@ const Root = styled.div`
     transform-origin: 13.5px 13.5px;
   }
 
-  [data-placement^='top'] > & {
+  [data-popper-placement^='top'] > div > & {
     bottom: -27px;
   }
 
-  [data-placement^='right'] > & {
+  [data-popper-placement^='right'] > div > & {
     left: -27px;
 
     & > svg {
@@ -29,7 +29,7 @@ const Root = styled.div`
     }
   }
 
-  [data-placement^='left'] > & {
+  [data-popper-placement^='left'] > div > & {
     right: -27px;
 
     & > svg {
@@ -37,7 +37,7 @@ const Root = styled.div`
     }
   }
 
-  [data-placement^='bottom'] > & {
+  [data-popper-placement^='bottom'] > div > & {
     top: -27px;
 
     & > svg {
@@ -59,7 +59,7 @@ export const PopoverArrow = forwardRef(function PopoverArrow(
   ref: React.ForwardedRef<HTMLDivElement>
 ) {
   return (
-    <Root data-ui="Popover__arrow" {...props} ref={ref}>
+    <Root data-ui="PopoverArrow" {...props} ref={ref}>
       <svg
         width="27"
         height="11"

package/src/primitives/popover/modifiers/getPopoverModifiers.ts

@@ -0,0 +1,137 @@
+import maxSizeModifier from 'popper-max-size-modifier'
+import {Modifier} from 'react-popper'
+import {PopoverModifiersProps} from './types'
+
+/*
+
+The order of popper phases:
+
+- beforeRead
+- read
+- afterRead
+- beforeMain
+- main
+- afterMain
+- beforeWrite
+- write
+- afterWrite
+
+*/
+
+export function getPopoverModifiers(props: PopoverModifiersProps): Modifier<any, any>[] {
+  const {
+    allowedAutoPlacements,
+    arrow,
+    arrowElement,
+    boundaryElement,
+    constrainSize,
+    distance,
+    fallbackPlacements,
+    margins,
+    matchReferenceWidth,
+    open,
+    preventOverflow,
+    skidding,
+    tether,
+    tetherOffset,
+  } = props
+
+  // NOTE: For later viewers:
+  // Prior to adding this change, the popover would get `maxWidth: 0` the 2nd time it
+  // was opened, when used with `constrainSize`. I was looking for a way to "reset"
+  // the size of the popover as measured by Popper.js, and this seems to be a workaround.
+  if (!open) {
+    return []
+  }
+
+  const detectOverflowOptions = {
+    altAxis: !constrainSize,
+    boundary: boundaryElement || undefined,
+    padding: 8,
+    tether,
+    tetherOffset,
+  }
+
+  return [
+    constrainSize && {
+      ...maxSizeModifier,
+      options: detectOverflowOptions,
+    },
+    constrainSize && {
+      name: 'applyMaxSize',
+      enabled: true,
+      phase: 'beforeWrite',
+      requires: ['maxSize'],
+      fn({state}: any) {
+        const {width, height} = state.modifiersData.maxSize
+
+        state.styles.popper = {
+          ...state.styles.popper,
+          maxWidth: `${width}px`,
+          maxHeight: `${height}px`,
+        }
+      },
+    },
+    arrow && {
+      name: 'arrow',
+      options: {
+        element: arrowElement,
+        padding: 4,
+      },
+    },
+    (constrainSize || preventOverflow) && {
+      name: 'preventOverflow',
+      options: detectOverflowOptions,
+    },
+    {
+      name: 'offset',
+      options: {
+        offset: [skidding, distance],
+      },
+    },
+    margins && {
+      name: 'margins',
+      enabled: true,
+      phase: 'beforeRead',
+      fn: ({state}: any) => {
+        const {rects} = state
+
+        if (rects.reference) {
+          rects.reference.x += margins[3]
+          rects.reference.y += margins[1]
+          rects.reference.width -= margins[1] + margins[3]
+          rects.reference.height -= margins[0] + margins[2]
+        }
+      },
+    },
+    {
+      name: 'flip',
+      options: {
+        allowedAutoPlacements,
+        boundary: boundaryElement || undefined,
+        fallbackPlacements,
+        padding: 8,
+      },
+    },
+    matchReferenceWidth && {
+      name: 'matchWidth',
+      enabled: true,
+      phase: 'beforeWrite',
+      requires: ['computeStyles'],
+      fn({state}: any) {
+        const {width} = state.rects.reference
+
+        state.styles.popper.width = `${width}px`
+      },
+      effect: ({state}: any) => {
+        const refElement = state.elements.reference
+
+        if (refElement instanceof HTMLElement) {
+          state.elements.popper.style.width = `${
+            refElement.offsetWidth - (margins ? margins[1] + margins[3] : 0)
+          }px`
+        }
+      },
+    },
+  ].filter(Boolean) as Modifier<any, any>[]
+}

package/src/primitives/popover/modifiers/index.ts

@@ -0,0 +1 @@
+export * from './usePopoverModifiers'

package/src/primitives/popover/modifiers/types.ts

@@ -0,0 +1,18 @@
+import {Placement} from '../../../types'
+
+export interface PopoverModifiersProps {
+  allowedAutoPlacements?: Placement[]
+  arrow?: boolean
+  arrowElement?: HTMLElement | null
+  boundaryElement?: HTMLElement | null
+  constrainSize?: boolean
+  distance: number
+  fallbackPlacements?: Placement[]
+  margins?: [number, number, number, number]
+  matchReferenceWidth?: boolean
+  open: boolean
+  preventOverflow?: boolean
+  skidding: number
+  tether?: boolean
+  tetherOffset?: number | ((...args: any[]) => number)
+}

package/src/primitives/popover/modifiers/usePopoverModifiers.ts

@@ -0,0 +1,58 @@
+import {useMemo} from 'react'
+import {Modifier} from 'react-popper'
+
+import {getPopoverModifiers} from './getPopoverModifiers'
+import {PopoverModifiersProps} from './types'
+
+export function usePopoverModifiers(props: PopoverModifiersProps): Modifier<any, any>[] {
+  const {
+    allowedAutoPlacements,
+    arrow,
+    arrowElement,
+    boundaryElement,
+    constrainSize,
+    distance,
+    fallbackPlacements,
+    margins,
+    matchReferenceWidth,
+    open,
+    preventOverflow,
+    skidding,
+    tether,
+    tetherOffset,
+  } = props
+
+  return useMemo(() => {
+    return getPopoverModifiers({
+      allowedAutoPlacements,
+      arrow,
+      arrowElement,
+      boundaryElement,
+      constrainSize,
+      distance,
+      fallbackPlacements,
+      margins,
+      matchReferenceWidth,
+      open,
+      preventOverflow,
+      skidding,
+      tether,
+      tetherOffset,
+    })
+  }, [
+    allowedAutoPlacements,
+    arrow,
+    arrowElement,
+    boundaryElement,
+    constrainSize,
+    distance,
+    fallbackPlacements,
+    margins,
+    matchReferenceWidth,
+    open,
+    preventOverflow,
+    skidding,
+    tether,
+    tetherOffset,
+  ])
+}