@sanity/ui 0.37.0 → 0.37.4

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@sanity/ui",
-  "version": "0.37.0",
+  "version": "0.37.4",
   "sideEffects": false,
-  "source": "src/index.ts",
+  "source": "./src/index.ts",
   "exports": {
     "require": "./lib/sanity-ui.js",
     "default": "./lib/sanity-ui.modern.js"
   },
-  "main": "lib/sanity-ui.js",
-  "module": "lib/sanity-ui.module.js",
-  "types": "lib/src/index.d.ts",
+  "main": "./lib/sanity-ui.js",
+  "module": "./lib/sanity-ui.module.js",
+  "types": "./lib/dts/index.d.ts",
   "files": [
     "lib",
     "src"
@@ -31,17 +31,16 @@
     "@juggle/resize-observer": "^3.3.1",
     "@popperjs/core": "^2.11.2",
     "@reach/auto-id": "^0.16.0",
-    "@sanity/color": "^2.1.6",
-    "@sanity/icons": "^1.2.3",
-    "framer-motion": "5.5.5",
-    "lodash": "^4.17.21",
+    "@sanity/color": "^2.1.8",
+    "@sanity/icons": "^1.2.5",
+    "framer-motion": "6.2.1",
     "popper-max-size-modifier": "^0.2.0",
     "react-is": "^17.0.2",
     "react-popper": "^2.2.5",
     "react-refractor": "^2.1.5"
   },
   "devDependencies": {
-    "@testing-library/dom": "^8.11.1",
+    "@testing-library/dom": "^8.11.2",
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^12.1.2",
     "@types/refractor": "^3.0.2",
@@ -71,5 +70,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "2622dda034809ec983fdce4c4a25ab054d3c5196"
+  "gitHead": "79cdd98c98fb1520fd95a25bf6deb5db6636c311"
 }

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

@@ -1,6 +1,6 @@
 /* eslint-disable no-console */
 
-import React from 'react'
+import React, {useCallback, useMemo} from 'react'
 import {render} from '../../../test'
 import {MenuContext, MenuContextValue} from './menuContext'
 import {useMenu} from './useMenu'
@@ -19,15 +19,30 @@ describe('components/menu', () => {
       }
 
       function Root() {
-        const value: MenuContextValue = {
-          version: 0.0,
-          activeElement: null,
-          activeIndex: 0,
-          mount: (element: HTMLElement | null) => () => console.log(element),
-          onItemClick: () => undefined,
-          onItemMouseEnter: (event: React.MouseEvent<HTMLElement>) => console.log(event),
-          onItemMouseLeave: (event: React.MouseEvent<HTMLElement>) => console.log(event),
-        }
+        const handleItemMouseEnter = useCallback(
+          (event: React.MouseEvent<HTMLElement>) => console.log(event),
+          []
+        )
+
+        const handleItemMouseLeave = useCallback(
+          (event: React.MouseEvent<HTMLElement>) => console.log(event),
+          []
+        )
+
+        const value: MenuContextValue = useMemo(
+          () => ({
+            version: 0.0,
+            activeElement: null,
+            activeIndex: 0,
+            mount: (element: HTMLElement | null) => () => console.log(element),
+            onItemClick: () => undefined,
+            onItemMouseEnter: handleItemMouseEnter,
+            onItemMouseLeave: handleItemMouseLeave,
+            onMouseEnter: handleItemMouseEnter,
+            onMouseLeave: handleItemMouseLeave,
+          }),
+          [handleItemMouseEnter, handleItemMouseLeave]
+        )
 
         return (
           <MenuContext.Provider value={value}>

package/src/components/menu/menu.tsx

@@ -131,6 +131,10 @@ export const Menu = forwardRef(function Menu(
       onItemMouseEnter: handleItemMouseEnter,
       onItemMouseLeave: handleItemMouseLeave,
       registerElement,
+
+      // deprecated
+      onMouseEnter: handleItemMouseEnter,
+      onMouseLeave: handleItemMouseLeave,
     }),
     [
       activeElement,

package/src/components/menu/menuContext.ts

@@ -9,9 +9,19 @@ export interface MenuContextValue {
   onClickOutside?: (event: MouseEvent) => void
   onEscape?: () => void
   onItemClick?: () => void
-  onItemMouseEnter: (event: React.MouseEvent<HTMLElement>) => void
-  onItemMouseLeave: (event: React.MouseEvent<HTMLElement>) => void
+  onItemMouseEnter?: (event: React.MouseEvent<HTMLElement>) => void
+  onItemMouseLeave?: (event: React.MouseEvent<HTMLElement>) => void
   registerElement?: (el: HTMLElement) => () => void
+
+  /**
+   * @deprecated Use `onItemMouseEnter` instead
+   */
+  onMouseEnter: (event: React.MouseEvent<HTMLElement>) => void
+
+  /**
+   * @deprecated Use `onItemMouseLeave` instead
+   */
+  onMouseLeave: (event: React.MouseEvent<HTMLElement>) => void
 }
 
 const key = Symbol.for('@sanity/ui/context/menu')

package/src/components/menu/menuGroup.tsx

@@ -43,15 +43,16 @@ export function MenuGroup(
     tone = 'default',
     ...restProps
   } = props
+  const menu = useMenu()
   const {
     activeElement,
     mount,
     onClickOutside,
     onEscape,
     onItemClick,
-    onItemMouseEnter,
+    onItemMouseEnter = menu.onMouseEnter,
     registerElement,
-  } = useMenu()
+  } = menu
   const [rootElement, setRootElement] = useState<HTMLButtonElement | null>(null)
   const [open, setOpen] = useState(false)
   const shouldFocusRef = useRef<'first' | 'last' | null>(null)

package/src/components/menu/menuItem.tsx

@@ -64,7 +64,14 @@ export const MenuItem = forwardRef(function MenuItem(
     tone = 'default',
     ...restProps
   } = props
-  const {activeElement, mount, onItemClick, onItemMouseEnter, onItemMouseLeave} = useMenu()
+  const menu = useMenu()
+  const {
+    activeElement,
+    mount,
+    onItemClick,
+    onItemMouseEnter = menu.onMouseEnter,
+    onItemMouseLeave = menu.onMouseLeave,
+  } = menu
   const [rootElement, setRootElement] = useState<HTMLDivElement | null>(null)
   const active = Boolean(activeElement) && activeElement === rootElement
 

package/src/hooks/_internal/useUnique.ts

@@ -1,13 +1,15 @@
-import {isEqual} from 'lodash'
 import {useRef} from 'react'
 
 /**
- * This is React hook – an and escape hatch – to make sure that a value is the same
- * on every render. SHOULD NOT BE USED IN MOST CASES.
+ * This is a React hook – and an escape hatch – to make sure that a record is
+ * the same on every render. Uses strict equality comparison (eg by identity),
+ * and only goes one level deep. SHOULD NOT BE USED IN MOST CASES.
  *
  * @internal
  */
-export function useUnique<ValueType>(value: ValueType): ValueType {
+type Comparable = Record<string | number | symbol, unknown> | undefined | null
+
+export function useUnique<ValueType extends Comparable = Comparable>(value: ValueType): ValueType {
   const valueRef = useRef<ValueType>(value)
 
   if (!isEqual(valueRef.current, value)) {
@@ -16,3 +18,18 @@ export function useUnique<ValueType>(value: ValueType): ValueType {
 
   return valueRef.current
 }
+
+function isEqual(objA: Comparable, objB: Comparable): boolean {
+  if (!objA || !objB) {
+    return objA === objB
+  }
+
+  const keysA = Object.keys(objA)
+  const keysB = Object.keys(objB)
+
+  if (keysA.length !== keysB.length) {
+    return false
+  }
+
+  return keysA.every((key) => objA[key] === objB[key])
+}

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

@@ -36,5 +36,7 @@ describe('atoms/button', () => {
     }
 
     render(<WrappedButton button={buttonProps} />)
+
+    expect(screen.getByText('Button text')).toBeInTheDocument()
   })
 })

package/src/primitives/flex/__workshop__/example.tsx

@@ -13,7 +13,7 @@ const DebugCard = styled(Card)`
   justify-content: center;
 `
 
-export default function PlainStory() {
+export default function ExampleStory() {
   const direction = useSelect('Direction', WORKSHOP_FLEX_DIRECTION_OPTIONS, 'row', 'Props')
 
   return (
@@ -26,8 +26,8 @@ export default function PlainStory() {
         <Code>[1,2,3]</Code>
       </DebugCard>
 
-      <DebugCard flex={1}>
-        <Code>1</Code>
+      <DebugCard flex={['none', 'none', 1]}>
+        <Code>['none', 'none', 1]</Code>
       </DebugCard>
     </Flex>
   )

package/src/primitives/types.ts

@@ -6,6 +6,7 @@ import {
   FlexAlign,
   FlexDirection,
   FlexJustify,
+  FlexValue,
   FlexWrap,
   GridAutoCols,
   GridAutoFlow,
@@ -53,7 +54,7 @@ export interface ResponsiveFlexProps {
  * @public
  */
 export interface ResponsiveFlexItemProps {
-  flex?: number | number[]
+  flex?: FlexValue | FlexValue[]
 }
 
 /**

package/src/styles/flex/flexItemStyle.ts

@@ -20,5 +20,7 @@ export function responsiveFlexItemStyle(
   const {theme} = props
   const {media} = theme.sanity
 
-  return responsive(media, getResponsiveProp(props.$flex), (flex) => ({flex}))
+  return responsive(media, getResponsiveProp(props.$flex), (flex) => {
+    return {flex}
+  })
 }

package/src/styles/flex/types.ts

@@ -1,4 +1,4 @@
-import {FlexAlign, FlexDirection, FlexJustify, FlexWrap} from '../../types'
+import {FlexAlign, FlexDirection, FlexJustify, FlexValue, FlexWrap} from '../../types'
 
 /**
  * @internal
@@ -15,7 +15,7 @@ export interface ResponsiveFlexStyleProps {
  * @internal
  */
 export interface ResponsiveFlexItemStyleProps {
-  $flex?: number | number[]
+  $flex?: FlexValue | FlexValue[]
 }
 
 /**

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

@@ -5,13 +5,13 @@ const {color, ...restTheme} = studioTheme
 const theme: Theme = {sanity: {...restTheme, color: color.light.default}}
 
 describe('styles/margin', () => {
-  it('should', () => {
+  it('should 1', () => {
     const styles = responsiveMarginStyle({$margin: 0, theme})
 
     expect(styles).toEqual([[{margin: 0}]])
   })
 
-  it('should', () => {
+  it('should 2', () => {
     const styles = responsiveMarginStyle({$margin: [0, 1, 2], theme})
 
     expect(styles).toEqual([

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

@@ -5,13 +5,13 @@ const {color, ...restTheme} = studioTheme
 const theme: Theme = {sanity: {...restTheme, color: color.light.default}}
 
 describe('styles/padding', () => {
-  it('should', () => {
+  it('should 1', () => {
     const styles = responsivePaddingStyle({$padding: 0, theme})
 
     expect(styles).toEqual([[{padding: 0}]])
   })
 
-  it('should', () => {
+  it('should 2', () => {
     const styles = responsivePaddingStyle({$padding: [0, 1, 2], theme})
 
     expect(styles).toEqual([

package/src/types/flex.ts

@@ -19,6 +19,11 @@ export type FlexJustify =
   | 'space-around'
   | 'space-evenly'
 
+/**
+ * @public
+ */
+export type FlexValue = number | 'none'
+
 /**
  * @public
  */

package/lib/src/components/menu/menuContext.d.ts

@@ -1,15 +0,0 @@
-/// <reference types="react" />
-export interface MenuContextValue {
-    version: 0.0;
-    activeElement: HTMLElement | null;
-    activeIndex: number;
-    mount: (element: HTMLElement | null, selected?: boolean) => () => void;
-    onClickOutside?: (event: MouseEvent) => void;
-    onEscape?: () => void;
-    onItemClick?: () => void;
-    onItemMouseEnter: (event: React.MouseEvent<HTMLElement>) => void;
-    onItemMouseLeave: (event: React.MouseEvent<HTMLElement>) => void;
-    registerElement?: (el: HTMLElement) => () => void;
-}
-export declare const MenuContext: React.Context<MenuContextValue | null>;
-//# sourceMappingURL=menuContext.d.ts.map

package/lib/src/components/menu/menuContext.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"menuContext.d.ts","sourceRoot":"","sources":["../../../../src/components/menu/menuContext.ts"],"names":[],"mappings":";AAGA,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,GAAG,CAAA;IACZ,aAAa,EAAE,WAAW,GAAG,IAAI,CAAA;IACjC,WAAW,EAAE,MAAM,CAAA;IACnB,KAAK,EAAE,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,EAAE,QAAQ,CAAC,EAAE,OAAO,KAAK,MAAM,IAAI,CAAA;IACtE,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAA;IAC5C,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAA;IACxB,gBAAgB,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAA;IAChE,gBAAgB,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAA;IAChE,eAAe,CAAC,EAAE,CAAC,EAAE,EAAE,WAAW,KAAK,MAAM,IAAI,CAAA;CAClD;AAMD,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,OAAO,CAAC,gBAAgB,GAAG,IAAI,CAAoB,CAAA"}

package/lib/src/hooks/_internal/useUnique.d.ts

@@ -1,8 +0,0 @@
-/**
- * This is React hook – an and escape hatch – to make sure that a value is the same
- * on every render. SHOULD NOT BE USED IN MOST CASES.
- *
- * @internal
- */
-export declare function useUnique<ValueType>(value: ValueType): ValueType;
-//# sourceMappingURL=useUnique.d.ts.map

package/lib/src/hooks/_internal/useUnique.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useUnique.d.ts","sourceRoot":"","sources":["../../../../src/hooks/_internal/useUnique.ts"],"names":[],"mappings":"AAGA;;;;;GAKG;AACH,wBAAgB,SAAS,CAAC,SAAS,EAAE,KAAK,EAAE,SAAS,GAAG,SAAS,CAQhE"}

package/lib/src/primitives/types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/primitives/types.ts"],"names":[],"mappings":"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"}

package/lib/src/styles/flex/types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/styles/flex/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,aAAa,EAAE,WAAW,EAAE,QAAQ,EAAC,MAAM,aAAa,CAAA;AAE3E;;GAEG;AACH,MAAM,WAAW,wBAAwB;IACvC,MAAM,CAAC,EAAE,SAAS,GAAG,SAAS,EAAE,CAAA;IAChC,UAAU,CAAC,EAAE,aAAa,GAAG,aAAa,EAAE,CAAA;IAC5C,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;IACxB,QAAQ,CAAC,EAAE,WAAW,GAAG,WAAW,EAAE,CAAA;IACtC,KAAK,CAAC,EAAE,QAAQ,GAAG,QAAQ,EAAE,CAAA;CAC9B;AAED;;GAEG;AACH,MAAM,WAAW,4BAA4B;IAC3C,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;CAC1B;AAED;;GAEG;AACH,MAAM,WAAW,kBAAmB,SAAQ,4BAA4B;CAAG"}