@sanity/ui 0.38.3-next.10 → 0.38.3-next.30

package/dist/types/src/index.d.ts

@@ -13557,6 +13557,7 @@ export declare type TextInputType =
   | 'time'
   | 'text'
   | 'week'
+  | 'color'
 
 /**
  * @public

package/package.json

@@ -1,18 +1,18 @@
 {
   "name": "@sanity/ui",
-  "version": "0.38.3-next.10+2173e480",
+  "version": "0.38.3-next.30+8cd982e0",
   "sideEffects": false,
-  "source": "./src/index.ts",
-  "module": "./dist/sanity-ui.js",
   "types": "./dist/types/src/index.d.ts",
-  "main": "./dist/sanity-ui.cjs",
+  "source": "./src/index.ts",
+  "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.js",
-      "require": "./dist/sanity-ui.cjs",
-      "default": "./dist/sanity-ui.js"
+      "import": "./dist/sanity-ui.esm.js",
+      "require": "./dist/sanity-ui.js",
+      "default": "./dist/sanity-ui.esm.js"
     }
   },
   "files": [
@@ -33,9 +33,9 @@
   },
   "dependencies": {
     "@popperjs/core": "^2.11.6",
-    "@sanity/color": "2.1.17-next.10+2173e480",
-    "@sanity/icons": "1.3.7-next.10+2173e480",
-    "framer-motion": "^7.3.5",
+    "@sanity/color": "2.1.17-next.30+8cd982e0",
+    "@sanity/icons": "1.3.7-next.30+8cd982e0",
+    "framer-motion": "^7.5.2",
     "popper-max-size-modifier": "^0.2.0",
     "react-is": "^18.2.0",
     "react-popper": "^2.3.0",
@@ -44,19 +44,17 @@
   "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-is": "^18.2.0",
     "react-refractor": "^2.1.7",
-    "styled-components": "^5.3.5"
+    "styled-components": "^5.3.6"
   },
   "peerDependencies": {
     "react": "^18",
     "react-dom": "^18",
+    "react-is": "^18",
     "styled-components": "^5.2"
   },
   "repository": {
@@ -76,5 +74,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "2173e480526ca10ccbeda49b18fe47b32f2bf13e"
+  "gitHead": "8cd982e0c4fdd874021bc430ed3501e4ef3489a4"
 }

package/src/__workshop__/constants.ts

@@ -235,6 +235,7 @@ export const WORKSHOP_TEXT_INPUT_TYPE_OPTIONS: {[key: string]: TextInputType} =
   time: 'time',
   text: 'text',
   week: 'week',
+  color: 'color',
 }
 
 export const WORKSHOP_TEXT_OVERFLOW_OPTIONS: {[key: string]: 'ellipsis' | ''} = {

package/src/components/autocomplete/autocomplete.tsx

@@ -1,14 +1,5 @@
 import {ChevronDownIcon} from '@sanity/icons'
-import {
-  cloneElement,
-  forwardRef,
-  useCallback,
-  useEffect,
-  useMemo,
-  useReducer,
-  useRef,
-  useState,
-} from 'react'
+import {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'
@@ -164,15 +155,21 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
     typeof renderOptionProp === 'function' ? renderOptionProp : defaultRenderOption
   const filterOption =
     typeof filterOptionProp === 'function' ? filterOptionProp : defaultFilterOption
-  const [rootElement, setRootElement] = useState<HTMLDivElement | null>(null)
-  const [resultsPopoverElement, setResultsPopoverElement] = useState<HTMLDivElement | null>(null)
+
+  // Element refs
+  const rootElementRef = useRef<HTMLDivElement | null>(null)
+  const resultsPopoverElementRef = useRef<HTMLDivElement | null>(null)
   const inputElementRef = useRef<HTMLInputElement | null>(null)
   const listBoxElementRef = useRef<HTMLDivElement | null>(null)
+
+  // Value refs
   const listFocusedRef = useRef(false)
   const valueRef = useRef(value)
   const valuePropRef = useRef(valueProp)
-  const forwardedRef = useForwardedRef(ref)
   const popoverMouseWithinRef = useRef(false)
+
+  const forwardedRef = useForwardedRef(ref)
+
   const listBoxId = `${id}-listbox`
   const options = Array.isArray(optionsProp) ? optionsProp : EMPTY_ARRAY
   const padding = useArrayProp(paddingProp)
@@ -199,8 +196,8 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
         }
 
         const elements: HTMLElement[] = (relatedElements || []).concat(
-          rootElement ? [rootElement] : [],
-          resultsPopoverElement ? [resultsPopoverElement] : []
+          rootElementRef.current ? [rootElementRef.current] : [],
+          resultsPopoverElementRef.current ? [resultsPopoverElementRef.current] : []
         )
 
         let focusInside = false
@@ -222,7 +219,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
         }
       }, 0)
     },
-    [onBlur, onQueryChange, relatedElements, resultsPopoverElement, rootElement]
+    [onBlur, onQueryChange, relatedElements]
   )
 
   const handleRootFocus = useCallback((event: React.FocusEvent) => {
@@ -362,6 +359,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
 
   // Change the value when `value` prop changes
   useEffect(() => {
+    // If `valueProp` changed
     if (valueProp !== valuePropRef.current) {
       valuePropRef.current = valueProp
 
@@ -373,17 +371,18 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
       return
     }
 
-    if (valueProp !== value) {
+    // If `valueProp` is not equal to `value`
+    if (valueProp !== valueRef.current) {
+      valueRef.current = valueProp || null
+
       dispatch({type: 'value/change', value: valueProp || null})
     }
-  }, [valueProp, value])
+  }, [valueProp])
 
   // Reset active item when closing
   useEffect(() => {
-    if (!focused) {
-      if (valueRef.current) {
-        dispatch({type: 'root/setActiveValue', value: valueRef.current})
-      }
+    if (!focused && valueRef.current) {
+      dispatch({type: 'root/setActiveValue', value: valueRef.current})
     }
   }, [focused])
 
@@ -622,7 +621,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
           onMouseEnter: handlePopoverMouseEnter,
           onMouseLeave: handlePopoverMouseLeave,
         },
-        setResultsPopoverElement
+        resultsPopoverElementRef
       )
     }
 
@@ -644,7 +643,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
         placement={AUTOCOMPLETE_POPOVER_PLACEMENT}
         portal
         radius={radius}
-        ref={setResultsPopoverElement}
+        ref={resultsPopoverElementRef}
         referenceElement={inputElementRef.current}
         {...popover}
       />
@@ -666,7 +665,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
       onBlur={handleRootBlur}
       onFocus={handleRootFocus}
       onKeyDown={handleRootKeyDown}
-      ref={setRootElement}
+      ref={rootElementRef}
     >
       {input}
       {results}

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/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/textInput/textInput.tsx

@@ -43,6 +43,7 @@ export type TextInputType =
   | 'time'
   | 'text'
   | 'week'
+  | 'color'
 
 /**
  * @public

package/src/styles/margin/marginsStyle.test.ts

@@ -1,3 +1,5 @@
+/** @jest-environment jsdom */
+
 import {studioTheme, Theme} from '../../theme'
 import {responsiveMarginStyle} from './marginStyle'
 

package/src/styles/padding/paddingStyle.test.ts

@@ -1,3 +1,5 @@
+/** @jest-environment jsdom */
+
 import {studioTheme, Theme} from '../../theme'
 import {responsivePaddingStyle} from './paddingStyle'
 

package/src/theme/lib/color-fns/color-fns.test.ts

@@ -1,3 +1,5 @@
+/** @jest-environment jsdom */
+
 import {hexToRgb, multiply, parseColor, rgba, screen} from '.'
 
 const hues = {

package/src/theme/lib/theme/color/color.test.ts

@@ -1,4 +1,6 @@
-import {createColorTheme} from '.'
+/** @jest-environment jsdom */
+
+import {createColorTheme} from './factory'
 
 describe('color', () => {
   describe('createColorTheme', () => {

package/src/theme/theme.test.tsx

@@ -1,3 +1,5 @@
+/** @jest-environment jsdom */
+
 import {render} from '../../test'
 import {studioTheme} from './studioTheme'
 import {ThemeContext} from './themeContext'

package/src/utils/boundaryElement/boundaryElement.test.tsx

@@ -1,3 +1,5 @@
+/** @jest-environment jsdom */
+
 import {render} from '../../../test'
 import {BoundaryElementContext} from './boundaryElementContext'
 import {BoundaryElementContextValue} from './types'

package/src/utils/layer/layer.test.tsx

@@ -1,3 +1,5 @@
+/** @jest-environment jsdom */
+
 import {render} from '../../../test'
 import {LayerContext} from './layerContext'
 import {LayerContextValue} from './types'

package/src/utils/portal/portal.test.tsx

@@ -1,3 +1,5 @@
+/** @jest-environment jsdom */
+
 import {render} from '../../../test'
 import {PortalContext} from './portalContext'
 import {PortalContextValue} from './types'