@sanity/ui 1.8.1 → 1.8.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "1.8.1",
+  "version": "1.8.3",
   "sideEffects": false,
   "types": "./dist/index.d.ts",
   "source": "./src/index.ts",
@@ -53,40 +53,40 @@
     "@sanity/color": "^2.2.5",
     "@sanity/icons": "^2.4.1",
     "csstype": "^3.1.2",
-    "framer-motion": "^10.16.1",
+    "framer-motion": "^10.16.2",
     "react-refractor": "^2.1.7"
   },
   "devDependencies": {
-    "@babel/core": "^7.22.10",
-    "@babel/preset-env": "^7.22.10",
+    "@babel/core": "^7.22.11",
+    "@babel/preset-env": "^7.22.14",
     "@babel/preset-react": "^7.22.5",
-    "@babel/preset-typescript": "^7.22.5",
+    "@babel/preset-typescript": "^7.22.11",
     "@commitlint/cli": "^17.7.1",
     "@commitlint/config-conventional": "^17.7.0",
     "@juggle/resize-observer": "^3.4.0",
     "@sanity/pkg-utils": "^2.4.8",
-    "@sanity/semantic-release-preset": "^4.1.3",
+    "@sanity/semantic-release-preset": "^4.1.4",
     "@sanity/ui-workshop": "^1.2.11",
     "@testing-library/dom": "^9.3.1",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^14.0.0",
     "@types/jest": "^29.5.4",
     "@types/jest-axe": "^3.5.5",
-    "@types/node": "^20.5.4",
+    "@types/node": "^20.5.9",
     "@types/react": "^18.2.21",
     "@types/react-dom": "^18.2.7",
     "@types/react-is": "^18.2.1",
     "@types/refractor": "^3.0.2",
     "@types/testing-library__jest-dom": "^5.14.9",
-    "@typescript-eslint/eslint-plugin": "^6.4.1",
-    "@typescript-eslint/parser": "^6.4.1",
+    "@typescript-eslint/eslint-plugin": "^6.5.0",
+    "@typescript-eslint/parser": "^6.5.0",
     "commitizen": "^4.3.0",
-    "cypress": "^12.17.4",
-    "cypress-real-events": "^1.10.0",
+    "cypress": "^13.1.0",
+    "cypress-real-events": "^1.10.1",
     "cz-conventional-changelog": "^3.3.0",
     "esbuild": "^0.19.2",
     "esbuild-register": "^3.4.2",
-    "eslint": "^8.47.0",
+    "eslint": "^8.48.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-import": "^2.28.1",
     "eslint-plugin-jsx-a11y": "^6.7.1",
@@ -101,17 +101,17 @@
     "lint-staged": "^14.0.1",
     "module-alias": "^2.2.3",
     "npm-run-all": "^4.1.5",
-    "prettier": "^3.0.2",
+    "prettier": "^3.0.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-is": "^18.2.0",
     "refractor": "^4.8.1",
     "rimraf": "^5.0.1",
-    "semantic-release": "^21.1.0",
+    "semantic-release": "^21.1.1",
     "start-server-and-test": "^2.0.0",
     "styled-components": "^6.0.7",
     "tsconfig-paths": "^4.2.0",
-    "typescript": "^5.1.6"
+    "typescript": "^5.2.2"
   },
   "peerDependencies": {
     "react": "^18",

package/src/primitives/_selectable/style.ts

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

package/src/primitives/button/__workshop__/sanityUploadButton.tsx

@@ -4,7 +4,7 @@ import styled from 'styled-components'
 
 const SanityUploadButton = styled(Button).attrs({forwardedAs: 'label'})`
   & input {
-    -webkit-appearance: none;
+    appearance: none;
     overflow: hidden;
     overflow: clip;
     top: 0;
@@ -14,6 +14,7 @@ const SanityUploadButton = styled(Button).attrs({forwardedAs: 'label'})`
     opacity: 0;
     position: absolute;
     max-width: 0;
+    width: -webkit-fill-available;
     width: stretch;
   }
 

package/src/primitives/card/styles.ts

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

package/src/primitives/popover/constants.ts

@@ -1,7 +1,21 @@
-import {PopoverMargins} from '../../types'
+import {Placement, PopoverMargins} from '../../types'
 
 export const DEFAULT_POPOVER_DISTANCE = 4
 export const DEFAULT_POPOVER_PADDING = 4
 export const DEFAULT_POPOVER_ARROW_WIDTH = 27
 export const DEFAULT_POPOVER_ARROW_HEIGHT = 11
 export const DEFAULT_POPOVER_MARGINS: PopoverMargins = [0, 0, 0, 0]
+export const DEFAULT_FALLBACK_PLACEMENTS: Record<Placement, Placement[]> = {
+  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-start': ['top-start', 'left-start', 'right-start'],
+  'bottom-end': ['top-end', 'left-end', 'right-end'],
+  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-start': ['left-start', 'top-start', 'bottom-start'],
+  'right-end': ['left-end', 'top-end', 'bottom-end'],
+}

package/src/primitives/popover/popover.tsx

@@ -28,6 +28,7 @@ import {ResponsiveRadiusProps, ResponsiveShadowProps} from '../types'
 import {
   DEFAULT_POPOVER_DISTANCE,
   DEFAULT_POPOVER_MARGINS,
+  DEFAULT_FALLBACK_PLACEMENTS,
   DEFAULT_POPOVER_PADDING,
 } from './constants'
 import {size} from './floating-ui/size'
@@ -89,7 +90,8 @@ export const Popover = memo(
       constrainSize = false,
       content,
       disabled,
-      fallbackPlacements,
+      fallbackPlacements = props.fallbackPlacements ??
+        DEFAULT_FALLBACK_PLACEMENTS[props.placement ?? 'bottom'],
       matchReferenceWidth,
       floatingBoundary = props.boundaryElement ?? boundaryElementContext.element,
       open,

package/src/primitives/select/styles.ts

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

package/src/primitives/tooltip/constants.ts

@@ -0,0 +1,16 @@
+import {Placement} from '@floating-ui/react-dom'
+
+export const DEFAULT_FALLBACK_PLACEMENTS: Record<Placement, Placement[]> = {
+  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-start': ['top-start', 'left-start', 'right-start'],
+  'bottom-end': ['top-end', 'left-end', 'right-end'],
+  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-start': ['left-start', 'top-start', 'bottom-start'],
+  'right-end': ['left-end', 'top-end', 'bottom-end'],
+}

package/src/primitives/tooltip/tooltip.tsx

@@ -31,6 +31,7 @@ import {Placement} from '../../types'
 import {Layer, LayerProps, Portal, useBoundaryElement} from '../../utils'
 import {Card} from '../card'
 import {Delay} from '../types'
+import {DEFAULT_FALLBACK_PLACEMENTS} from './constants'
 import {TooltipArrow} from './tooltipArrow'
 import {useTooltipDelayGroup} from './tooltipDelayGroup'
 
@@ -78,7 +79,8 @@ export const Tooltip = forwardRef(function Tooltip(
     children: childProp,
     content,
     disabled,
-    fallbackPlacements: fallbackPlacementsProp,
+    fallbackPlacements: fallbackPlacementsProp = props.fallbackPlacements ??
+      DEFAULT_FALLBACK_PLACEMENTS[props.placement ?? 'bottom'],
     padding,
     placement: placementProp = 'bottom',
     portal,