(el ? setGapValue(el.offsetHeight) : undefined)}
+ style={{height: vars.space[gap]}}
+ />
+ ,
+ ]
}
return items.slice(fromIndex, toIndex).map((item, _itemIndex) => {
@@ -144,24 +174,29 @@ export const VirtualList = forwardRef(function VirtualList(
const key = getItemKey ? getItemKey(item, itemIndex) : itemIndex
return (
-
+
{node}
-
+
)
})
- }, [fromIndex, gap, getItemKey, itemHeight, items, renderItem, space, toIndex])
+ }, [fromIndex, gap, gapValue, getItemKey, itemHeight, items, renderItem, toIndex])
- const wrapperStyle = useMemo(() => ({height}), [height])
+ const wrapperStyle: CSSProperties = useMemo(() => ({height}), [height])
return (
-
+
{children}
-
+
)
-})
-VirtualList.displayName = 'ForwardRef(VirtualList)'
+}
function findScrollable(parentNode: ParentNode | null) {
let _scrollEl = parentNode
diff --git a/src/core/constants.ts b/src/core/constants.ts
index 894f5d4c2..c14710baf 100644
--- a/src/core/constants.ts
+++ b/src/core/constants.ts
@@ -1,20 +1,13 @@
import type {Transition, Variant} from 'framer-motion'
-/**
- * @internal
- */
export const EMPTY_ARRAY: never[] = []
-/**
- * @internal
- */
export const EMPTY_RECORD: Record
= {}
const POPOVER_MOTION_DURATION = 0.2
/**
* Shared `framer-motion` variants used by `Popover` and `Tooltip` components.
- * @internal
*/
export const POPOVER_MOTION_PROPS: {
card: {
@@ -67,13 +60,8 @@ export const POPOVER_MOTION_PROPS: {
},
}
-/**
- * @internal
- * @deprecated No longer used.
- */
-export const FLOATING_STATIC_SIDES: Record = {
- top: 'bottom',
- right: 'left',
- bottom: 'top',
- left: 'right',
+export const Z_OFFSETS = {
+ dialog: 600,
+ popover: 400,
+ tooltip: 200,
}
diff --git a/src/core/global.ts b/src/core/global.ts
deleted file mode 100644
index ac9ec846a..000000000
--- a/src/core/global.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-declare global {
- // eslint-disable-next-line no-var
- var __DEV__: boolean
-}
-
-export {}
diff --git a/src/core/helpers/focus.ts b/src/core/helpers/focus.ts
index ec34608ee..cee496b11 100644
--- a/src/core/helpers/focus.ts
+++ b/src/core/helpers/focus.ts
@@ -7,10 +7,6 @@ import {
isHTMLTextAreaElement,
} from './element'
-// export const globalFocusState = {
-// IgnoreUtilFocusChanges: false,
-// }
-
/**
* @internal
*/
@@ -56,16 +52,12 @@ export function attemptFocus(element: HTMLElement): boolean {
return false
}
- // globalFocusState.IgnoreUtilFocusChanges = true
-
try {
element.focus()
} catch {
// ignore
}
- // globalFocusState.IgnoreUtilFocusChanges = false
-
return document.activeElement === element
}
diff --git a/src/core/helpers/index.ts b/src/core/helpers/index.ts
deleted file mode 100644
index 0f1f88adc..000000000
--- a/src/core/helpers/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export * from './animation'
-export * from './element'
-export * from './focus'
-export * from './scroll'
diff --git a/src/core/helpers/props.ts b/src/core/helpers/props.ts
new file mode 100644
index 000000000..726759afa
--- /dev/null
+++ b/src/core/helpers/props.ts
@@ -0,0 +1,28 @@
+import type {Breakpoint, ResponsiveProp} from '@sanity/ui/css'
+
+import {EMPTY_ARRAY} from '../constants'
+import {isArray} from '../lib/isArray'
+import {isRecord} from '../lib/isRecord'
+
+/**
+ * @internal
+ */
+export function _getArrayProp(val: T | T[] | undefined, defaultVal?: T[]): T[] {
+ if (val === undefined) return defaultVal || EMPTY_ARRAY
+
+ return Array.isArray(val) ? val : [val]
+}
+
+/**
+ * @internal
+ */
+export function _getResponsiveProp(
+ val: ResponsiveProp | undefined,
+ defaultVal?: Partial>,
+): Partial> {
+ if (val === undefined) {
+ return (defaultVal || EMPTY_ARRAY) as Partial>
+ }
+
+ return (isArray(val) || isRecord(val) ? val : [val]) as Partial>
+}
diff --git a/src/core/hooks/index.ts b/src/core/hooks/index.ts
deleted file mode 100644
index f04844380..000000000
--- a/src/core/hooks/index.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-export * from './useArrayProp'
-export * from './useClickOutside'
-export * from './useClickOutsideEvent'
-export * from './useCustomValidity'
-export * from './useElementRect'
-export * from './useElementSize'
-export * from './useForwardedRef'
-export * from './useGlobalKeyDown'
-export * from './useMatchMedia'
-export * from './useMediaIndex'
-export * from './usePrefersDark'
-export * from './usePrefersReducedMotion'
diff --git a/src/core/hooks/useArrayProp.ts b/src/core/hooks/useArrayProp.ts
deleted file mode 100644
index bb7923ef3..000000000
--- a/src/core/hooks/useArrayProp.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import {useState} from 'react'
-
-import {_getArrayProp} from '../styles'
-
-/** @beta */
-export type ArrayPropPrimitive = string | number | boolean | undefined | null
-
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export function useArrayProp(
- val: T | T[] | undefined,
- defaultVal?: T[],
-): T[] {
- const [[cachedVal, cachedHash], setCache] = useState<[T[], string]>(() => [
- _getArrayProp(val, defaultVal),
- JSON.stringify(val ?? defaultVal),
- ])
-
- const hash = JSON.stringify(val ?? defaultVal)
-
- if (hash !== cachedHash) {
- // If the cached hash has changed, update the cache right away.
- // Calling setState during render is fine in this case, and preferred over a useEffect loop
- // https://19.react.dev/learn/you-might-not-need-an-effect#adjusting-some-state-when-a-prop-changes
- setCache([_getArrayProp(val, defaultVal), hash])
- }
-
- return cachedVal
-}
diff --git a/src/core/hooks/useClickOutside.test.tsx b/src/core/hooks/useClickOutside.test.tsx
deleted file mode 100644
index 0d183e716..000000000
--- a/src/core/hooks/useClickOutside.test.tsx
+++ /dev/null
@@ -1,482 +0,0 @@
-/** @jest-environment jsdom */
-
-import {render, screen} from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import {useEffect, useRef, useState} from 'react'
-
-import {useClickOutside} from './useClickOutside'
-
-describe('useClickOutside', () => {
- /**
- * Specifying the elements array directly:
- * useClickOutside(handler, [buttonElement, popoverElement])
- * instead of in a callback:
- * useClickOutside(handler, () => [buttonElement, popoverElement])
- * is still supported, but deprecated and discouraged. The same is true for the `setElement` callback pattern
- */
- it('calls the handler when clicking outside of the array of elements', async () => {
- const user = userEvent.setup()
- const handler = jest.fn()
-
- const TestComponent = () => {
- const [buttonElement, setButtonElement] = useState(null)
- const [popoverElement, setPopoverElement] = useState(null)
-
- useClickOutside(handler, [buttonElement, popoverElement])
-
- return (
- <>
-
-
-
- )
- }
-
- render((null)
- const [popoverElement, setPopoverElement] = useState(null)
-
- useClickOutside(handler, [null, [null, buttonElement], [popoverElement, null], null])
-
- return (
- <>
-
-
-
- )
- }
-
- render((null)
- const [popoverElement, setPopoverElement] = useState(null)
- const [boundaryElement, setBoundaryElement] = useState(null)
-
- useClickOutside(handler, [buttonElement, popoverElement], boundaryElement)
-
- return (
- <>
-
-
-
- )
- }
-
- render((null)
-
- const setElement = useClickOutside(handler, [buttonElement])
-
- return (
- <>
-
}
-
-
- )
- }
-
- const {rerender} = render((null)
- const [popoverElement, setPopoverElement] = useState(null)
-
- useClickOutside(handler, [buttonElement, popoverElement])
-
- return (
- <>
-
}
-
-
- )
- }
-
- const {rerender} = render((null)
- const popoverRef = useRef(null)
-
- useClickOutside(handler, [buttonRef.current, popoverRef.current])
-
- return (
- <>
-
-
- )
- }
- const {rerender} = render((null)
- const [popoverElement, setPopoverElement] = useState(null)
-
- useClickOutside(handler, [buttonRef.current, popoverElement])
-
- return (
- <>
-
-
-
- )
- }
- rerender((null)
- const popoverRef = useRef(null)
-
- useClickOutside(handler, [buttonRef.current, popoverRef.current])
-
- const [, tick] = useState(0)
- useEffect(() => {
- /**
- * This effect schedules a re-render, which will lead to `useClickOutsideHandler` "seeing"
- * the current value of the refs after they got assigned dom nodes when the React ref callbacks executed.
- */
- tick((prev) => ++prev)
- }, [])
-
- return (
- <>
-
-
-
- )
- }
- rerender([]) => {
- const [elements, setElements] = useState(() => refs.map((ref) => ref.current))
-
- useEffect(() => {
- if (refs.length !== elements.length) {
- setElements(refs.map((ref) => ref.current))
- }
- for (const ref of refs) {
- if (!elements.includes(ref.current)) {
- setElements(refs.map((ref) => ref.current))
- return
- }
- }
- }, [elements, refs])
-
- return elements
- }
- handler = jest.fn()
- TestComponent = () => {
- const buttonRef = useRef(null)
- const popoverRef = useRef(null)
-
- const elements = useElementsFromRefs([buttonRef, popoverRef])
- useClickOutside(handler, elements)
-
- return (
- <>
-
-
-
- )
- }
- rerender((null)
-
- useClickOutside(handler, [], boundaryRef.current)
-
- return (
- <>
-
-
-
- )
- }
- const {rerender} = render((null)
- const [popoverElement, setPopoverElement] = useState(null)
- const boundaryRef = useRef(null)
-
- useClickOutside(handler, [buttonRef.current, popoverElement], boundaryRef.current)
-
- return (
- <>
-
-
-
- )
- }
- rerender((null)
- const popoverRef = useRef(null)
- const boundaryRef = useRef(null)
-
- useClickOutside(handler, [buttonRef.current, popoverRef.current], boundaryRef.current)
-
- const [, tick] = useState(0)
- useEffect(() => {
- /**
- * This effect schedules a re-render, which will lead to `useClickOutsideHandler` "seeing"
- * the current value of the refs after they got assigned dom nodes when the React ref callbacks executed.
- */
- tick((prev) => ++prev)
- }, [])
-
- return (
- <>
-
-
-
- )
- }
- rerender() => {
- const [element, setElement] = useState(() => ref.current)
-
- // eslint-disable-next-line react-hooks/exhaustive-deps
- useEffect(() => {
- // If the ref has mutated since the last render, update the state and schedule a re-render
- if (ref.current !== element) {
- setElement(ref.current)
- }
- })
-
- return element
- }
- handler = jest.fn()
- TestComponent = () => {
- const buttonRef = useRef(null)
- const popoverRef = useRef(null)
- const boundaryRef = useRef(null)
-
- const boundaryElement = useBoundaryElementFromRef(boundaryRef)
- useClickOutside(handler, [buttonRef.current, popoverRef.current], boundaryElement)
-
- return (
- <>
-
-
-
- )
- }
- rerender((null)
- const [elements, setElements] = useState(() => _getElements(element, elementsArg))
- const elementsRef = useRef(elements)
-
- useEffect(() => {
- const prevElements = elementsRef.current
- const nextElements = _getElements(element, elementsArg)
-
- if (prevElements.length !== nextElements.length) {
- setElements(nextElements)
- elementsRef.current = nextElements
-
- return
- }
-
- for (const el of prevElements) {
- if (!nextElements.includes(el)) {
- setElements(nextElements)
- elementsRef.current = nextElements
-
- return
- }
- }
-
- for (const el of nextElements) {
- if (!prevElements.includes(el)) {
- setElements(nextElements)
- elementsRef.current = nextElements
-
- return
- }
- }
- }, [element, elementsArg])
-
- useEffect(() => {
- if (!listener) return undefined
-
- const handleWindowMouseDown = (evt: MouseEvent) => {
- const target = evt.target
-
- if (!(target instanceof Node)) {
- return
- }
-
- if (boundaryElement && !boundaryElement.contains(target)) {
- return
- }
-
- for (const el of elements) {
- if (target === el || el.contains(target)) {
- return
- }
- }
-
- listener(evt)
- }
-
- window.addEventListener('mousedown', handleWindowMouseDown)
-
- return () => {
- window.removeEventListener('mousedown', handleWindowMouseDown)
- }
- }, [boundaryElement, listener, elements])
-
- return setElement
-}
diff --git a/src/core/hooks/useClickOutsideEvent.test.tsx b/src/core/hooks/useClickOutsideEvent.test.tsx
index 004336320..9b1e7ce92 100644
--- a/src/core/hooks/useClickOutsideEvent.test.tsx
+++ b/src/core/hooks/useClickOutsideEvent.test.tsx
@@ -1,8 +1,7 @@
-/** @jest-environment jsdom */
-
import {render, screen} from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import {useRef} from 'react'
+import {describe, expect, it, vi} from 'vitest'
import {useClickOutsideEvent} from './useClickOutsideEvent'
@@ -13,7 +12,7 @@ describe('useClickOutsideEvent', () => {
it('calls the handler when clicking outside of the array of elements', async () => {
const user = userEvent.setup()
- const handler = jest.fn()
+ const handler = vi.fn()
const TestComponent = () => {
const buttonRef = useRef(null)
@@ -42,7 +41,7 @@ describe('useClickOutsideEvent', () => {
it('the elements array flattens nested arrays one level deep', async () => {
const user = userEvent.setup()
- const handler = jest.fn()
+ const handler = vi.fn()
const TestComponent = () => {
const buttonRef = useRef(null)
@@ -76,7 +75,7 @@ describe('useClickOutsideEvent', () => {
it('it can set a boundary to scope outside click events', async () => {
const user = userEvent.setup()
- const handler = jest.fn()
+ const handler = vi.fn()
const TestComponent = () => {
const buttonRef = useRef(null)
diff --git a/src/core/hooks/useClickOutsideEvent.ts b/src/core/hooks/useClickOutsideEvent.ts
index 0116ff928..8859c7d6a 100644
--- a/src/core/hooks/useClickOutsideEvent.ts
+++ b/src/core/hooks/useClickOutsideEvent.ts
@@ -3,19 +3,13 @@ import {useEffectEvent} from 'use-effect-event'
import {EMPTY_ARRAY} from '../constants'
-/**
- * @public
- */
+/** @public */
export type ClickOutsideEventListener = (event: MouseEvent) => void
-/**
- * @public
- */
+/** @public */
export type ClickOutsideEventElements = (HTMLElement | null | (HTMLElement | null)[])[]
-/**
- * @public
- */
+/** @public */
export function useClickOutsideEvent(
listener: ClickOutsideEventListener | false | undefined,
elementsArg: () => ClickOutsideEventElements = () => EMPTY_ARRAY,
diff --git a/src/core/hooks/useDelayed.test.ts b/src/core/hooks/useDelayed.test.ts
index 03f875042..3991c8c41 100644
--- a/src/core/hooks/useDelayed.test.ts
+++ b/src/core/hooks/useDelayed.test.ts
@@ -1,6 +1,5 @@
-/** @jest-environment jsdom */
-
import {act, renderHook} from '@testing-library/react'
+import {describe, expect, it, vi} from 'vitest'
import {useDelayedState} from './useDelayedState'
@@ -16,7 +15,7 @@ describe('useDelayedState', () => {
})
it('should update state after delay if delay is provided', async () => {
- jest.useFakeTimers()
+ vi.useFakeTimers()
const {result} = renderHook(() => useDelayedState(false))
const [, setState] = result.current
@@ -25,12 +24,12 @@ describe('useDelayedState', () => {
})
expect(result.current[0]).toBe(false)
act(() => {
- jest.advanceTimersByTime(500)
+ vi.advanceTimersByTime(500)
})
expect(result.current[0]).toBe(false)
act(() => {
- jest.advanceTimersByTime(500)
+ vi.advanceTimersByTime(500)
})
expect(result.current[0]).toBe(true)
@@ -56,12 +55,12 @@ describe('useDelayedState', () => {
})
expect(result.current[0]).toBe(false)
- jest.advanceTimersByTime(500)
+ vi.advanceTimersByTime(500)
act(() => {
setState(false)
})
- jest.advanceTimersByTime(600)
+ vi.advanceTimersByTime(600)
// Even after 1.1 seconds, the state should continue being false, because it was cancelled by a next setState call
expect(result.current[0]).toBe(false)
})
diff --git a/src/core/hooks/useDelayedState.ts b/src/core/hooks/useDelayedState.ts
index 5de54599c..0cab7b23e 100644
--- a/src/core/hooks/useDelayedState.ts
+++ b/src/core/hooks/useDelayedState.ts
@@ -1,4 +1,4 @@
-import {SetStateAction, useCallback, useRef, useState} from 'react'
+import {type SetStateAction, useCallback, useRef, useState} from 'react'
/**
* @beta
diff --git a/src/core/hooks/useElementRect/__workshop__/example.tsx b/src/core/hooks/useElementRect/__workshop__/example.tsx
deleted file mode 100644
index 4eb3646c8..000000000
--- a/src/core/hooks/useElementRect/__workshop__/example.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import {Box, Card, Code, Container, Stack, Text, useElementRect} from '@sanity/ui'
-import {useState} from 'react'
-
-import {Grid} from '../../../primitives'
-
-export default function ExampleStory() {
- const [element, setElement] = useState(null)
- const rect = useElementRect(element)
- const size = {width: rect?.width || 0, height: rect?.height || 0}
-
- return (
-
-
-
-
-
- rect
-
-
-
-
-
-
-
- {JSON.stringify(size)}
-
-
-
-
- )
-}
diff --git a/src/core/hooks/useElementRect/__workshop__/index.ts b/src/core/hooks/useElementRect/__workshop__/index.ts
deleted file mode 100644
index 9a14591c8..000000000
--- a/src/core/hooks/useElementRect/__workshop__/index.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import {defineScope} from '@sanity/ui-workshop'
-import {lazy} from 'react'
-
-export default defineScope({
- name: 'hooks/useElementRect',
- title: 'useElementRect',
- stories: [
- {
- name: 'example',
- title: 'Example',
- component: lazy(() => import('./example')),
- },
- ],
-})
diff --git a/src/core/hooks/useElementRect/index.ts b/src/core/hooks/useElementRect/index.ts
deleted file mode 100644
index 18fcec776..000000000
--- a/src/core/hooks/useElementRect/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './useElementRect'
diff --git a/src/core/hooks/useElementRect/useElementRect.ts b/src/core/hooks/useElementRect/useElementRect.ts
deleted file mode 100644
index 1eb6597de..000000000
--- a/src/core/hooks/useElementRect/useElementRect.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import {useElementSize} from '../useElementSize'
-
-/**
- * Subscribe to the rect of a DOM element.
- * @beta
- *
- * @deprecated Use `useElementSize` instead
- */
-export function useElementRect(element: HTMLElement | null): DOMRectReadOnly | null {
- const elementSize = useElementSize(element)
-
- return elementSize?._contentRect || null
-}
diff --git a/src/core/hooks/useElementSize.ts b/src/core/hooks/useElementSize.ts
index 17d79b5e3..c94aea6c9 100644
--- a/src/core/hooks/useElementSize.ts
+++ b/src/core/hooks/useElementSize.ts
@@ -1,6 +1,6 @@
import {useEffect, useState} from 'react'
-import {_elementSizeObserver, ElementSize} from '../observers/elementSizeObserver'
+import {_elementSizeObserver, type ElementSize} from '../observers/elementSize'
/**
* Subscribe to the size of a DOM element.
diff --git a/src/core/hooks/useForwardedRef.ts b/src/core/hooks/useForwardedRef.ts
deleted file mode 100644
index 7fd988687..000000000
--- a/src/core/hooks/useForwardedRef.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import {useImperativeHandle, useRef} from 'react'
-
-/**
- * @beta
- * @deprecated use `useImperativeHandle` instead
- * @example
- * ```diff
- * -const ref = useForwardedRef(forwardedRef)
- * +const ref = useRef(null)
- * +useImperativeHandle(forwardedRef, () => ref.current)
- * ```
- */
-export function useForwardedRef(ref: React.ForwardedRef): React.MutableRefObject {
- const innerRef = useRef(null)
-
- useImperativeHandle(ref, () => innerRef.current!)
-
- return innerRef
-}
diff --git a/src/core/hooks/useIsomorphicEffect.ts b/src/core/hooks/useIsomorphicEffect.ts
deleted file mode 100644
index 24f6a6412..000000000
--- a/src/core/hooks/useIsomorphicEffect.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import {useEffect, useLayoutEffect} from 'react'
-
-/**
- * @beta
- * @deprecated use `useLayoutEffect` instead, or `useEffect` if possible
- */
-export const useIsomorphicEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect
diff --git a/src/core/hooks/useMatchMedia.ts b/src/core/hooks/useMatchMedia.ts
index bde793b3b..c14903cb1 100644
--- a/src/core/hooks/useMatchMedia.ts
+++ b/src/core/hooks/useMatchMedia.ts
@@ -3,7 +3,7 @@ import {useCallback, useDebugValue, useSyncExternalStore} from 'react'
/**
* Efficiently subscribes to `window.matchMedia` queries
*
- * @param getServerSnapshot - Only called during server-side rendering, and hydration if using hydrateRoot. Required if the hook is called during SSR (https://react.dev/reference/react/useSyncExternalStore#adding-support-for-server-rendering)
+ * @param getServerSnapshot - Only called during server-side rendering, and hydration if using hydrateRoot. Required if the hook is called during SSR (https://dev/reference/react/useSyncExternalStore#adding-support-for-server-rendering)
*
* @public
*/
diff --git a/src/core/hooks/useMediaIndex/__workshop__/index.ts b/src/core/hooks/useMediaIndex/__workshop__/index.ts
index 3eda64d2c..8c27c5a67 100644
--- a/src/core/hooks/useMediaIndex/__workshop__/index.ts
+++ b/src/core/hooks/useMediaIndex/__workshop__/index.ts
@@ -1,7 +1,7 @@
-import {defineScope} from '@sanity/ui-workshop'
+import type {WorkshopScope} from '@sanity/ui-workshop'
import {lazy} from 'react'
-export default defineScope({
+const scope: WorkshopScope = {
name: 'hooks/use-media-index',
title: 'useMediaIndex',
stories: [
@@ -11,4 +11,6 @@ export default defineScope({
component: lazy(() => import('./test')),
},
],
-})
+}
+
+export default scope
diff --git a/src/core/hooks/useMediaIndex/__workshop__/test.tsx b/src/core/hooks/useMediaIndex/__workshop__/test.tsx
index 2bad852f9..3af525541 100644
--- a/src/core/hooks/useMediaIndex/__workshop__/test.tsx
+++ b/src/core/hooks/useMediaIndex/__workshop__/test.tsx
@@ -1,11 +1,11 @@
import {Card, Stack, Text, useMediaIndex} from '@sanity/ui'
-export default function TestStory() {
+export default function TestStory(): React.JSX.Element {
const mediaIndex = useMediaIndex()
return (
-
+
The current media index is {mediaIndex}.
Try resizing the browser.
diff --git a/src/core/hooks/useMediaIndex/index.ts b/src/core/hooks/useMediaIndex/index.ts
deleted file mode 100644
index 8b1954153..000000000
--- a/src/core/hooks/useMediaIndex/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './useMediaIndex'
diff --git a/src/core/hooks/useMediaIndex/useMediaIndex.test.tsx b/src/core/hooks/useMediaIndex/useMediaIndex.test.tsx
index a5c96771b..4fa6351eb 100644
--- a/src/core/hooks/useMediaIndex/useMediaIndex.test.tsx
+++ b/src/core/hooks/useMediaIndex/useMediaIndex.test.tsx
@@ -1,13 +1,10 @@
/** @jest-environment node */
-import {buildTheme} from '@sanity/ui/theme'
import {renderToStaticMarkup, renderToString} from 'react-dom/server'
+import {describe, expect, it} from 'vitest'
-import {ThemeProvider} from '../../theme'
import {useMediaIndex} from './useMediaIndex'
-const theme = buildTheme()
-
function Log() {
const mediaIndex = useMediaIndex()
@@ -16,21 +13,9 @@ function Log() {
describe('useMediaIndex', () => {
it(`SSR to static markup returns 0`, () => {
- expect(
- renderToStaticMarkup(
-
- ,
- ),
- ).toBe('mediaIndex: 0')
+ expect(renderToStaticMarkup(
- ,
- ),
- ).toMatchInlineSnapshot(`"mediaIndex: 0"`)
+ expect(renderToString((
+ val: ResponsiveProp | undefined,
+ defaultVal?: Partial>,
+): Partial> {
+ const [[cachedVal, cachedHash], setCache] = useState<[Partial>, string]>(
+ () => [_getResponsiveProp(val, defaultVal), JSON.stringify(val ?? defaultVal)],
+ )
+
+ const hash = JSON.stringify(val ?? defaultVal)
+
+ if (hash !== cachedHash) {
+ // If the cached hash has changed, update the cache right away.
+ // Calling setState during render is fine in this case, and preferred over a useEffect loop
+ // https://19.dev/learn/you-might-not-need-an-effect#adjusting-some-state-when-a-prop-changes
+ setCache([_getResponsiveProp(val, defaultVal), hash])
+ }
+
+ return cachedVal
+}
diff --git a/src/core/index.ts b/src/core/index.ts
index e933bafbb..7f5acc85e 100644
--- a/src/core/index.ts
+++ b/src/core/index.ts
@@ -1,10 +1,115 @@
-export * from './_compat'
-export * from './components'
-export * from './helpers'
-export * from './hooks'
-export * from './observers'
-export * from './primitives'
-export * from './styles'
-export * from './theme'
+// components
+export * from './components/autocomplete/autocomplete'
+export * from './components/autocomplete/types'
+export * from './components/breadcrumbs/breadcrumbs'
+export * from './components/dialog/dialog'
+export * from './components/dialog/dialogContext'
+export * from './components/dialog/dialogProvider'
+export * from './components/dialog/types'
+export * from './components/dialog/useDialog'
+export * from './components/hotkeys/hotkeys'
+export * from './components/menu/menu'
+export * from './components/menu/menuButton'
+export * from './components/menu/menuDivider'
+export * from './components/menu/menuGroup'
+export * from './components/menu/menuItem'
+export * from './components/tab/tab'
+export * from './components/tab/tabList'
+export * from './components/tab/tabPanel'
+export * from './components/toast/toast'
+export * from './components/toast/toastProvider'
+export * from './components/toast/types'
+export * from './components/toast/useToast'
+export * from './components/tree/tree'
+export * from './components/tree/treeItem'
+export * from './components/tree/types'
+export * from './components/tree/useTree'
+export * from './components/virtualList/virtualList'
+
+// helpers
+export * from './helpers/animation'
+export * from './helpers/element'
+export * from './helpers/focus'
+export * from './helpers/props'
+export * from './helpers/scroll'
+
+// hooks
+export * from './hooks/useClickOutsideEvent'
+export * from './hooks/useCustomValidity'
+export * from './hooks/useElementSize'
+export * from './hooks/useGlobalKeyDown'
+export * from './hooks/useMatchMedia'
+export * from './hooks/useMediaIndex/useMediaIndex'
+export * from './hooks/usePrefersDark'
+export * from './hooks/usePrefersReducedMotion'
+export * from './hooks/useResponsiveProp'
+
+// observers
+export * from './observers/elementSize'
+export * from './observers/resize'
+
+// primitives
+export * from './primitives/arrow/arrow'
+export * from './primitives/avatar/avatar'
+export * from './primitives/avatar/avatarCounter'
+export * from './primitives/avatar/avatarStack'
+export * from './primitives/avatar/types'
+export * from './primitives/badge/badge'
+export * from './primitives/box/box'
+export * from './primitives/button/button'
+export * from './primitives/button/types'
+export * from './primitives/card/card'
+export * from './primitives/card/cardProvider'
+export * from './primitives/card/types'
+export * from './primitives/card/useCard'
+export * from './primitives/checkbox/checkbox'
+export * from './primitives/code/code'
+export * from './primitives/container/container'
+export * from './primitives/container/types'
+export * from './primitives/flex/flex'
+export * from './primitives/grid/grid'
+export * from './primitives/heading/heading'
+export * from './primitives/inline/inline'
+export * from './primitives/kbd/kbd'
+export * from './primitives/label/label'
+export * from './primitives/layer/layer'
+export * from './primitives/layer/layerProvider'
+export * from './primitives/layer/types'
+export * from './primitives/layer/useLayer'
+export * from './primitives/popover/popover'
+export * from './primitives/popover/types'
+export * from './primitives/radio/radio'
+export * from './primitives/select/select'
+export * from './primitives/selectable/selectable'
+export * from './primitives/skeleton/codeSkeleton'
+export * from './primitives/skeleton/headingSkeleton'
+export * from './primitives/skeleton/labelSkeleton'
+export * from './primitives/skeleton/skeleton'
+export * from './primitives/skeleton/textSkeleton'
+export * from './primitives/spinner/spinner'
+export * from './primitives/srOnly/srOnly'
+export * from './primitives/stack/stack'
+export * from './primitives/switch/switch'
+export * from './primitives/text/text'
+export * from './primitives/textArea/textArea'
+export * from './primitives/textInput/textInput'
+export * from './primitives/tooltip/tooltip'
+export * from './primitives/tooltip/tooltipDelayGroup'
+
+// utils
+export * from './utils/boundaryElement/boundaryElementProvider'
+export * from './utils/boundaryElement/types'
+export * from './utils/boundaryElement/useBoundaryElement'
+export * from './utils/elementQuery/elementQuery'
+export * from './utils/errorBoundary'
+export * from './utils/portal/portal'
+export * from './utils/portal/portalProvider'
+export * from './utils/portal/types'
+export * from './utils/portal/usePortal'
+
+// root
+export * from './Root'
+export * from './RootProvider'
+
+// types
export * from './types'
-export * from './utils'
diff --git a/src/core/lib/createGlobalScopedContext.ts b/src/core/lib/createGlobalScopedContext.ts
index eebe27b53..2b6eb6fa2 100644
--- a/src/core/lib/createGlobalScopedContext.ts
+++ b/src/core/lib/createGlobalScopedContext.ts
@@ -16,7 +16,7 @@ export function createGlobalScopedContext {
const symbol = Symbol.for(key)
@@ -28,7 +28,10 @@ export function createGlobalScopedContext(defaultValue)
}
- globalScope[symbol] = globalScope[symbol] || createContext(defaultValue)
+ // Use the global scope as a map of symbols to contexts
+ const symbolMap = globalScope as Record>
- return globalScope[symbol]
+ symbolMap[symbol] = symbolMap[symbol] || createContext(defaultValue)
+
+ return symbolMap[symbol]
}
diff --git a/src/core/lib/globalScope.ts b/src/core/lib/globalScope.ts
index 10ddb8cc9..dc0c90a55 100644
--- a/src/core/lib/globalScope.ts
+++ b/src/core/lib/globalScope.ts
@@ -16,4 +16,4 @@ function getGlobalScope() {
throw new Error('@sanity/ui: could not locate global scope')
}
-export const globalScope = getGlobalScope() as any
+export const globalScope: typeof globalThis = getGlobalScope()
diff --git a/src/core/lib/isArray.ts b/src/core/lib/isArray.ts
new file mode 100644
index 000000000..6cee650f8
--- /dev/null
+++ b/src/core/lib/isArray.ts
@@ -0,0 +1,3 @@
+export function isArray(val: unknown): val is unknown[] {
+ return Array.isArray(val)
+}
diff --git a/src/core/middleware/origin.ts b/src/core/middleware/origin.ts
index 3a943307d..02964dbdc 100644
--- a/src/core/middleware/origin.ts
+++ b/src/core/middleware/origin.ts
@@ -1,4 +1,4 @@
-import {Middleware} from '@floating-ui/react-dom'
+import type {Middleware} from '@floating-ui/react-dom'
/**
* Custom floating-ui middleware which calculates transform-origin X + Y offsets
diff --git a/src/core/observers/elementSizeObserver.ts b/src/core/observers/elementSize.ts
similarity index 95%
rename from src/core/observers/elementSizeObserver.ts
rename to src/core/observers/elementSize.ts
index 86cf68ebf..1b006185c 100644
--- a/src/core/observers/elementSizeObserver.ts
+++ b/src/core/observers/elementSize.ts
@@ -1,4 +1,4 @@
-import {_ResizeObserver} from './resizeObserver'
+import {_ResizeObserver} from './resize'
/**
* @beta
@@ -43,7 +43,7 @@ export interface _ElementSizeListener {
/**
* @internal
*/
-export const _elementSizeObserver = _createElementSizeObserver()
+export const _elementSizeObserver: _ElementSizeObserver = _createElementSizeObserver()
function _createElementRectValueListener(): _ElementSizeListener {
return {
diff --git a/src/core/observers/index.ts b/src/core/observers/index.ts
deleted file mode 100644
index 8c6810225..000000000
--- a/src/core/observers/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './elementSizeObserver'
-export * from './resizeObserver'
diff --git a/src/core/observers/resizeObserver.ts b/src/core/observers/resize.ts
similarity index 100%
rename from src/core/observers/resizeObserver.ts
rename to src/core/observers/resize.ts
diff --git a/src/core/primitives/_selectable/index.ts b/src/core/primitives/_selectable/index.ts
deleted file mode 100644
index 7dac6bb10..000000000
--- a/src/core/primitives/_selectable/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './selectable'
diff --git a/src/core/primitives/_selectable/selectable.tsx b/src/core/primitives/_selectable/selectable.tsx
deleted file mode 100644
index 3c2ac5348..000000000
--- a/src/core/primitives/_selectable/selectable.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import {styled} from 'styled-components'
-
-import {responsiveRadiusStyle, ResponsiveRadiusStyleProps} from '../../styles/radius'
-import {Box} from '../box'
-import {selectableBaseStyle, selectableColorStyle, SelectableStyleProps} from './style'
-
-/**
- * @internal
- */
-export const Selectable = styled(Box)(
- responsiveRadiusStyle,
- selectableBaseStyle,
- selectableColorStyle,
-)
-Selectable.displayName = 'Selectable'
diff --git a/src/core/primitives/_selectable/style.ts b/src/core/primitives/_selectable/style.ts
deleted file mode 100644
index e0be1b21e..000000000
--- a/src/core/primitives/_selectable/style.ts
+++ /dev/null
@@ -1,115 +0,0 @@
-import {getTheme_v2} from '@sanity/ui/theme'
-import {css} from 'styled-components'
-
-import {ThemeProps} from '../../styles'
-import {_cardColorStyle} from '../../styles/card'
-import {SelectableTone} from '../../types'
-
-/**
- * @internal
- */
-export interface SelectableStyleProps {
- $tone: SelectableTone
-}
-
-export function selectableBaseStyle(): ReturnType {
- return css`
- background-color: inherit;
- color: inherit;
-
- &[data-as='button'] {
- -webkit-font-smoothing: inherit;
- appearance: none;
- outline: none;
- font: inherit;
- text-align: inherit;
- border: 0;
- width: -moz-available;
- width: -webkit-fill-available;
- width: stretch;
- }
-
- /* &:is(a) */
- &[data-as='a'] {
- text-decoration: none;
- }
- `
-}
-
-export function selectableColorStyle(
- props: SelectableStyleProps & ThemeProps,
-): ReturnType {
- const {$tone} = props
- const {color, style} = getTheme_v2(props.theme)
- const tone = color.selectable[$tone]
-
- return css`
- ${_cardColorStyle(color, tone.enabled)}
-
- background-color: var(--card-bg-color);
- color: var(--card-fg-color);
- outline: none;
-
- /* &:is(button) */
- &[data-as='button'] {
- &:disabled {
- ${_cardColorStyle(color, tone.disabled)}
- }
-
- &:not(:disabled) {
- &[aria-pressed='true'] {
- ${_cardColorStyle(color, tone.pressed)}
- }
-
- &[data-selected],
- &[aria-selected='true'] > & {
- ${_cardColorStyle(color, tone.selected)}
- }
-
- @media (hover: hover) {
- &:not([data-selected]) {
- &[data-hovered],
- &:hover {
- ${_cardColorStyle(color, tone.hovered)}
- }
-
- &:active {
- ${_cardColorStyle(color, tone.pressed)}
- }
- }
- }
- }
- }
-
- /* &:is(a) */
- &[data-as='a'] {
- &[data-disabled] {
- ${_cardColorStyle(color, tone.disabled)}
- }
-
- &:not([data-disabled]) {
- &[data-pressed] {
- ${_cardColorStyle(color, tone.pressed)}
- }
-
- &[data-selected] {
- ${_cardColorStyle(color, tone.selected)}
- }
-
- @media (hover: hover) {
- &:not([data-selected]) {
- &[data-hovered],
- &:hover {
- ${_cardColorStyle(color, tone.hovered)}
- }
- &:active {
- ${_cardColorStyle(color, tone.pressed)}
- }
- }
- }
- }
- }
-
- ${style?.card?.root}
- `
-}
diff --git a/src/core/primitives/arrow/arrow.tsx b/src/core/primitives/arrow/arrow.tsx
new file mode 100644
index 000000000..cf55bc115
--- /dev/null
+++ b/src/core/primitives/arrow/arrow.tsx
@@ -0,0 +1,74 @@
+import {_arrow, _arrowShape, _arrowStroke, _arrowStrokeMask, _arrowSvg, vars} from '@sanity/ui/css'
+import {assignInlineVars} from '@vanilla-extract/dynamic'
+import {useMemo} from 'react'
+
+import type {ComponentType, Props} from '../../types'
+import {compileCommands, getRoundedCommands, type Point} from './cmds'
+
+/** @internal */
+export const DEFAULT_ARROW_ELEMENT = 'div'
+
+/** @internal */
+export type ArrowOwnProps = {
+ width: number
+ height: number
+ radius?: number
+}
+
+/** @internal */
+export type ArrowElementType = 'div' | 'span' | ComponentType
+
+/** @internal */
+export type ArrowProps = Props
+
+/** @internal */
+export function Arrow(
+ props: ArrowProps,
+): React.JSX.Element {
+ const {
+ as: Element = DEFAULT_ARROW_ELEMENT,
+ width: w,
+ height: h,
+ radius = 0,
+ style,
+ ...rest
+ } = props as ArrowProps
+
+ const center = w / 2
+
+ const path = useMemo(() => {
+ const points: Point[] = [
+ {x: 0, y: 0},
+ {x: radius, y: 0, radius},
+ {x: center, y: h - 1, radius},
+ {x: w - radius, y: 0, radius},
+ {x: w, y: 0},
+ ]
+
+ const cmds = getRoundedCommands(points)
+
+ return compileCommands(cmds)
+ }, [center, h, radius, w])
+
+ const strokePath = `${path}`
+ const fillPath = `${path} M ${w} -1 M 0 -1 Z`
+
+ return (
+
+
+
+
+
+
+ )
+}
diff --git a/src/core/utils/arrow/cmds.ts b/src/core/primitives/arrow/cmds.ts
similarity index 100%
rename from src/core/utils/arrow/cmds.ts
rename to src/core/primitives/arrow/cmds.ts
diff --git a/src/core/primitives/avatar/__workshop__/asButton.tsx b/src/core/primitives/avatar/__workshop__/asButton.tsx
index 431902b4d..989035ecf 100644
--- a/src/core/primitives/avatar/__workshop__/asButton.tsx
+++ b/src/core/primitives/avatar/__workshop__/asButton.tsx
@@ -1,10 +1,10 @@
import {Avatar, Flex} from '@sanity/ui'
import {useSelect} from '@sanity/ui-workshop'
-import {WORKSHOP_AVATAR_SIZE_OPTIONS} from '../../../__workshop__/constants'
+import {WORKSHOP_AVATAR_SIZE_OPTIONS} from '$workshop'
-export default function AsButtonStory() {
- const size = useSelect('Size', WORKSHOP_AVATAR_SIZE_OPTIONS, 1, 'Props')
+export default function AsButtonStory(): React.JSX.Element {
+ const size = useSelect('Size', WORKSHOP_AVATAR_SIZE_OPTIONS, 1)
return (
diff --git a/src/core/primitives/avatar/__workshop__/index.ts b/src/core/primitives/avatar/__workshop__/index.ts
index f943aeeb4..50233dc4e 100644
--- a/src/core/primitives/avatar/__workshop__/index.ts
+++ b/src/core/primitives/avatar/__workshop__/index.ts
@@ -1,7 +1,7 @@
-import {defineScope} from '@sanity/ui-workshop'
+import {type WorkshopScope} from '@sanity/ui-workshop'
import {lazy} from 'react'
-export default defineScope({
+const scope: WorkshopScope = {
name: 'primitives/avatar',
title: 'Avatar',
stories: [
@@ -26,4 +26,6 @@ export default defineScope({
component: lazy(() => import('./withinMenuItem')),
},
],
-})
+}
+
+export default scope
diff --git a/src/core/primitives/avatar/__workshop__/stack.tsx b/src/core/primitives/avatar/__workshop__/stack.tsx
index 9cf70f7c1..186f41446 100644
--- a/src/core/primitives/avatar/__workshop__/stack.tsx
+++ b/src/core/primitives/avatar/__workshop__/stack.tsx
@@ -1,10 +1,10 @@
import {Avatar, AvatarCounter, AvatarStack, Flex} from '@sanity/ui'
import {useSelect} from '@sanity/ui-workshop'
-import {WORKSHOP_AVATAR_SIZE_OPTIONS} from '../../../__workshop__/constants'
+import {WORKSHOP_AVATAR_SIZE_OPTIONS} from '$workshop'
-export default function StackStory() {
- const size = useSelect('Size', WORKSHOP_AVATAR_SIZE_OPTIONS, 1, 'Props')
+export default function StackStory(): React.JSX.Element {
+ const size = useSelect('Size', WORKSHOP_AVATAR_SIZE_OPTIONS, 1)
return (
diff --git a/src/core/primitives/avatar/__workshop__/withinButton.tsx b/src/core/primitives/avatar/__workshop__/withinButton.tsx
index 1f83b8525..da9b83d84 100644
--- a/src/core/primitives/avatar/__workshop__/withinButton.tsx
+++ b/src/core/primitives/avatar/__workshop__/withinButton.tsx
@@ -1,22 +1,14 @@
+import {Avatar, AvatarStack, Box, Button, Container, Flex, Stack, Text} from '@sanity/ui'
import {useBoolean} from '@sanity/ui-workshop'
-import {Box} from '../../box'
-import {Button} from '../../button'
-import {Container} from '../../container'
-import {Flex} from '../../flex'
-import {Stack} from '../../stack'
-import {Text} from '../../text'
-import {Avatar} from '../avatar'
-import {AvatarStack} from '../avatarStack'
-
-export default function WithinButtonStory() {
- const disabled = useBoolean('Disabled', false, 'Props')
+export default function WithinButtonStory(): React.JSX.Element {
+ const disabled = useBoolean('Disabled', false)
return (
-
+
-
+
Default button
@@ -30,7 +22,7 @@ export default function WithinButtonStory() {
-
+
Ghost button
@@ -44,7 +36,7 @@ export default function WithinButtonStory() {
-
+
Bleed button
diff --git a/src/core/primitives/avatar/__workshop__/withinMenuItem.tsx b/src/core/primitives/avatar/__workshop__/withinMenuItem.tsx
index e766bf0c1..4edaaa0aa 100644
--- a/src/core/primitives/avatar/__workshop__/withinMenuItem.tsx
+++ b/src/core/primitives/avatar/__workshop__/withinMenuItem.tsx
@@ -1,62 +1,64 @@
+import {
+ Avatar,
+ AvatarStack,
+ Box,
+ Card,
+ Container,
+ Flex,
+ Layer,
+ Menu,
+ MenuItem,
+ Text,
+} from '@sanity/ui'
import {useBoolean} from '@sanity/ui-workshop'
-import {Menu, MenuItem} from '../../../components'
-import {Layer} from '../../../utils'
-import {Box} from '../../box'
-import {Card} from '../../card'
-import {Container} from '../../container'
-import {Flex} from '../../flex'
-import {Text} from '../../text'
-import {Avatar} from '../avatar'
-import {AvatarStack} from '../avatarStack'
-
-export default function WithinMenuItemStory() {
- const disabled = useBoolean('Disabled', false, 'Props')
+export default function WithinMenuItemStory(): React.JSX.Element {
+ const disabled = useBoolean('Disabled', false)
return (
-
+
-
-
+
+
Menu item 1
-
-
-
+
+
Menu item 1
-
-
-
+
+
Menu item 1
-
diff --git a/src/core/primitives/avatar/avatar.tsx b/src/core/primitives/avatar/avatar.tsx
index 93a19f34a..02b946ffa 100644
--- a/src/core/primitives/avatar/avatar.tsx
+++ b/src/core/primitives/avatar/avatar.tsx
@@ -1,95 +1,73 @@
-import {ThemeColorAvatarColorKey} from '@sanity/ui/theme'
-import {forwardRef, useCallback, useEffect, useId, useMemo, useState} from 'react'
-import ReactIs from 'react-is'
-import {styled} from 'styled-components'
-
-import {useArrayProp} from '../../hooks'
-import {useTheme_v2} from '../../theme'
-import {AvatarPosition, AvatarSize, AvatarStatus} from '../../types'
-import {Label} from '../label'
-import {avatarStyle, responsiveAvatarSizeStyle} from './styles'
-
-/**
- * @public
- */
-export interface AvatarProps {
+import {
+ avatar,
+ avatarArrow,
+ avatarImage,
+ avatarImageOutline,
+ avatarInitials,
+ type ResponsiveProp,
+} from '@sanity/ui/css'
+import type {AvatarColor, AvatarSize, FontLabelSize} from '@sanity/ui/theme'
+import {useCallback, useEffect, useMemo, useState} from 'react'
+
+import {useResponsiveProp} from '../../hooks/useResponsiveProp'
+import type {ComponentType, Props} from '../../types'
+import {Box} from '../box/box'
+import {Label} from '../label/label'
+import type {AvatarPosition} from './types'
+
+/** @public */
+export const DEFAULT_AVATAR_ELEMENT = 'span'
+
+/** @public */
+export interface AvatarOwnProps {
/** @beta */
__unstable_hideInnerStroke?: boolean
animateArrowFrom?: AvatarPosition
arrowPosition?: AvatarPosition
- as?: React.ElementType | keyof React.JSX.IntrinsicElements
- color?: ThemeColorAvatarColorKey
+ color?: AvatarColor
initials?: string
onImageLoadError?: (event: Error) => void
- size?: AvatarSize | AvatarSize[]
+ size?: ResponsiveProp
src?: string
- /**
- * The status of the entity this Avatar represents.
- * @alpha
- */
- status?: AvatarStatus
title?: string
}
-const StyledAvatar = styled.div<{$color: ThemeColorAvatarColorKey; $size: AvatarSize[]}>(
- responsiveAvatarSizeStyle,
- avatarStyle.root,
-)
-
-const Arrow = styled.div(avatarStyle.arrow)
-
-const BgStroke = styled.ellipse(avatarStyle.bgStroke)
-
-const Stroke = styled.ellipse(avatarStyle.stroke)
-
-const Initials = styled.div(avatarStyle.initials)
+/** @public */
+export type AvatarElementType = 'a' | 'button' | 'div' | 'span' | ComponentType
-const InitialsLabel = styled(Label)({
- color: 'inherit',
-})
-
-const AvatarImage = styled.svg(avatarStyle.image)
+/** @public */
+export type AvatarProps = Props
/**
* Avatars are used to represent people and other agents (e.g. bots).
*
* @public
*/
-export const Avatar = forwardRef(function Avatar(
- props: AvatarProps & Omit, 'as' | 'ref'>,
- ref: React.ForwardedRef,
-) {
+export function Avatar(
+ props: AvatarProps,
+): React.JSX.Element {
const {
__unstable_hideInnerStroke,
- as: asProp,
- color = 'gray',
+ as: Element = DEFAULT_AVATAR_ELEMENT,
+ className,
+ color = 'magenta',
src,
title,
initials,
onImageLoadError,
arrowPosition: arrowPositionProp,
animateArrowFrom,
- status = 'online',
size: sizeProp = 1,
- ...restProps
- } = props
- const {avatar} = useTheme_v2()
- const as = ReactIs.isValidElementType(asProp) ? asProp : 'div'
- const size = useArrayProp(sizeProp)
-
- // @todo: remove this
- const avatarSize = avatar.sizes[size[0]] || avatar.sizes[0]
- const _sizeRem = avatarSize.size
- const _radius = _sizeRem / 2
-
- const elementId = useId()
+ ...rest
+ } = props as AvatarProps
+
+ const size = useResponsiveProp(sizeProp)
+
const [arrowPosition, setArrowPosition] = useState(
animateArrowFrom || arrowPositionProp || 'inside',
)
- const [imageFailed, setImageFailed] = useState(false)
-
- const imageId = `avatar-image-${elementId}`
+ const [imageError, setImageError] = useState(false)
useEffect(() => {
if (arrowPosition === arrowPositionProp) return undefined
@@ -101,11 +79,11 @@ export const Avatar = forwardRef(function Avatar(
}, [arrowPosition, arrowPositionProp])
useEffect(() => {
- if (src) setImageFailed(false)
+ if (src) setImageError(false)
}, [src])
const handleImageError = useCallback(() => {
- setImageFailed(true)
+ setImageError(true)
if (onImageLoadError) {
onImageLoadError(new Error('Avatar: the image failed to load'))
@@ -114,79 +92,56 @@ export const Avatar = forwardRef(function Avatar(
const initialsSize = useMemo(
() =>
- size.map((s) => {
- if (s === 1) return 1
- if (s === 2) return 3
- if (s === 3) return 5
+ Object.values(size).map((s) => {
+ if (s === 1) return 1 satisfies FontLabelSize
+ if (s === 2) return 3 satisfies FontLabelSize
+ if (s === 3) return 5 satisfies FontLabelSize
- return 0
- }),
+ return 0 satisfies FontLabelSize
+ }) as ResponsiveProp,
[size],
)
return (
-
-
+
-
-
- {!imageFailed && src && (
-
-
-
-
-
-
-
- )}
-
- {(imageFailed || !src) && initials && (
- <>
-
-
- {initials}
-
-
-
+
+
+
+
+ {initials}
+
+
+
+ {src && (
+
+
)}
-
+
)
-})
-Avatar.displayName = 'ForwardRef(Avatar)'
+}
diff --git a/src/core/primitives/avatar/avatarCounter.tsx b/src/core/primitives/avatar/avatarCounter.tsx
index 9a228dedc..55ca39076 100644
--- a/src/core/primitives/avatar/avatarCounter.tsx
+++ b/src/core/primitives/avatar/avatarCounter.tsx
@@ -1,94 +1,69 @@
-import {getTheme_v2} from '@sanity/ui/theme'
-import {forwardRef, useMemo} from 'react'
-import {css, styled} from 'styled-components'
+import {avatarCounter, type ResponsiveProp} from '@sanity/ui/css'
+import type {AvatarSize, FontLabelSize} from '@sanity/ui/theme'
+import {useMemo} from 'react'
-import {EMPTY_RECORD} from '../../constants'
-import {useArrayProp} from '../../hooks'
-import {_responsive, rem, ThemeProps} from '../../styles'
-import {AvatarSize} from '../../types'
-import {Label} from '../label'
+import {useResponsiveProp} from '../../hooks/useResponsiveProp'
+import type {ComponentType, Props} from '../../types'
+import {Box} from '../box/box'
+import {Label} from '../label/label'
-function _responsiveAvatarCounterSizeStyle(props: {$size: AvatarSize[]} & ThemeProps) {
- const {avatar, media} = getTheme_v2(props.theme)
+/** @public */
+export const DEFAULT_AVATAR_COUNTER_ELEMENT = 'span'
- return _responsive(media, props.$size, (size) => {
- const avatarSize = avatar.sizes[size]
-
- if (!avatarSize) return EMPTY_RECORD
-
- return {
- borderRadius: rem(avatarSize.size / 2),
- minWidth: rem(avatarSize.size),
- height: rem(avatarSize.size),
- }
- })
-}
-
-function _avatarCounterBaseStyle(props: ThemeProps) {
- const {space} = getTheme_v2(props.theme)
-
- return css`
- align-items: center;
- justify-content: center;
- box-sizing: border-box;
- user-select: none;
- color: inherit;
- color: var(--card-fg-color);
- background: var(--card-bg-color);
- box-shadow:
- 0 0 0 1px var(--card-bg-color),
- inset 0 0 0 1px var(--card-hairline-hard-color);
- padding: 0 ${rem(space[2])};
-
- &:not([hidden]) {
- display: flex;
- }
- `
+/** @public */
+export interface AvatarCounterOwnProps {
+ count: number
+ size?: ResponsiveProp
}
-const StyledAvatarCounter = styled.div<{$size: AvatarSize[]}>(
- _responsiveAvatarCounterSizeStyle,
- _avatarCounterBaseStyle,
-)
+/** @public */
+export type AvatarCounterElementType = 'button' | 'div' | 'span' | ComponentType
-/**
- * @public
- */
-export interface AvatarCounterProps {
- count: number
- size?: AvatarSize | AvatarSize[]
- /** @deprecated No longer supported. */
- tone?: 'navbar'
-}
+/** @public */
+export type AvatarCounterProps =
+ Props
-/**
- * @public
- */
-export const AvatarCounter = forwardRef(function AvatarCounter(
- props: AvatarCounterProps,
- ref: React.Ref,
-) {
- const {count, size: sizeProp = 1} = props
- const size = useArrayProp(sizeProp)
+/** @public */
+export function AvatarCounter<
+ E extends AvatarCounterElementType = typeof DEFAULT_AVATAR_COUNTER_ELEMENT,
+>(props: AvatarCounterProps): React.JSX.Element {
+ const {
+ as = DEFAULT_AVATAR_COUNTER_ELEMENT,
+ className,
+ count,
+ size: sizeProp = 1,
+ ...rest
+ } = props as AvatarCounterProps
+ const size = useResponsiveProp(sizeProp)
- const fontSize = useMemo(
+ const labelSize = useMemo(
() =>
- size.map((s) => {
- if (s === 1) return 1
- if (s === 2) return 3
- if (s === 3) return 5
+ Object.values(size).map((s) => {
+ if (s === 1) return 1 satisfies FontLabelSize
+ if (s === 2) return 3 satisfies FontLabelSize
+ if (s === 3) return 5 satisfies FontLabelSize
- return 0
- }),
+ return 0 satisfies FontLabelSize
+ }) as ResponsiveProp,
[size],
)
return (
-
-
+
+
{count}
-
+
)
-})
-AvatarCounter.displayName = 'ForwardRef(AvatarCounter)'
+}
diff --git a/src/core/primitives/avatar/avatarStack.tsx b/src/core/primitives/avatar/avatarStack.tsx
index f92f90224..1a46b2854 100644
--- a/src/core/primitives/avatar/avatarStack.tsx
+++ b/src/core/primitives/avatar/avatarStack.tsx
@@ -1,77 +1,56 @@
-import {getTheme_v2} from '@sanity/ui/theme'
-import {Children, cloneElement, forwardRef, isValidElement} from 'react'
-import {css, styled} from 'styled-components'
-
-import {EMPTY_RECORD} from '../../constants'
-import {useArrayProp} from '../../hooks'
-import {_responsive, rem, ThemeProps} from '../../styles'
-import {AvatarSize} from '../../types'
+import {avatarStack, type ResponsiveProp} from '@sanity/ui/css'
+import type {AvatarSize} from '@sanity/ui/theme'
+import {Children, cloneElement, Fragment, isValidElement, type ReactElement} from 'react'
+
+import {useResponsiveProp} from '../../hooks/useResponsiveProp'
+import type {ComponentType, Props} from '../../types'
+import {Box, type BoxOwnProps} from '../box/box'
+import type {AvatarProps} from './avatar'
import {AvatarCounter} from './avatarCounter'
-const BASE_STYLES = css`
- white-space: nowrap;
-
- & > div {
- vertical-align: top;
-
- &:not([hidden]) {
- display: inline-block;
- }
- }
-`
-
-function avatarStackStyle() {
- return BASE_STYLES
-}
-
-function responsiveAvatarStackSizeStyle(props: {$size: AvatarSize[]} & ThemeProps) {
- const {avatar, media} = getTheme_v2(props.theme)
-
- return _responsive(media, props.$size, (size) => {
- const avatarSize = avatar.sizes[size]
+/** @public */
+export const DEFAULT_AVATAR_STACK_ELEMENT = 'span'
- if (!avatarSize) return EMPTY_RECORD
+/** @public */
+export type AvatarStackChild = ReactElement> | null | undefined | false
- return {
- '& > div + div': {
- marginLeft: rem(avatarSize.distance),
- },
- }
- })
+/** @public */
+export type AvatarStackOwnProps = Omit<
+ BoxOwnProps,
+ 'align' | 'alignItems' | 'display' | 'justify' | 'justifyContent'
+> & {
+ children: AvatarStackChild | AvatarStackChild[]
+ maxLength?: number
+ size?: ResponsiveProp
}
-const StyledAvatarStack = styled.div<{$size: AvatarSize[]}>(
- responsiveAvatarStackSizeStyle,
- avatarStackStyle,
-)
+/** @public */
+export type AvatarStackElementType = 'div' | 'span' | ComponentType
-/**
- * @public
- */
-export interface AvatarStackProps {
- children: React.ReactNode
- maxLength?: number
- size?: AvatarSize | AvatarSize[]
- /** @deprecated No longer supported. */
- tone?: 'navbar'
-}
+/** @public */
+export type AvatarStackProps = Props<
+ AvatarStackOwnProps,
+ E
+>
-/**
- * @public
- */
-export const AvatarStack = forwardRef(function AvatarStack(
- props: AvatarStackProps & Omit, 'as' | 'ref'>,
- ref: React.ForwardedRef,
-) {
+/** @public */
+export function AvatarStack(
+ props: AvatarStackProps,
+): React.JSX.Element {
const {
+ as = DEFAULT_AVATAR_STACK_ELEMENT,
children: childrenProp,
+ className,
maxLength: maxLengthProp = 4,
size: sizeProp = 1,
- ...restProps
- } = props
- const children: React.JSX.Element[] = Children.toArray(childrenProp).filter(isValidElement)
+ ...rest
+ } = props as AvatarStackProps
+
+ const children = Children.toArray(childrenProp).filter(isValidElement) as ReactElement<
+ AvatarProps<'span'>
+ >[]
const maxLength = Math.max(maxLengthProp, 0)
- const size = useArrayProp(sizeProp)
+ const size = useResponsiveProp(sizeProp)
const len = children.length
const visibleCount = maxLength - 1
@@ -79,23 +58,22 @@ export const AvatarStack = forwardRef(function AvatarStack(
const visibleChildren = extraCount > 1 ? children.slice(extraCount, len) : children
return (
-
- {len === 0 && (
-
- )}
-
- {len !== 0 && extraCount > 1 && (
-
- )}
+
+ {len === 0 && {cloneElement(child, {size})}
+ {cloneElement(child, {size})}
))}
-
+
)
-})
-AvatarStack.displayName = 'ForwardRef(AvatarStack)'
+}
diff --git a/src/core/primitives/avatar/index.ts b/src/core/primitives/avatar/index.ts
deleted file mode 100644
index 350f8213a..000000000
--- a/src/core/primitives/avatar/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export * from './avatar'
-export * from './avatarCounter'
-export * from './avatarStack'
-export * from './types'
diff --git a/src/core/primitives/avatar/styles.ts b/src/core/primitives/avatar/styles.ts
deleted file mode 100644
index 2e23e3626..000000000
--- a/src/core/primitives/avatar/styles.ts
+++ /dev/null
@@ -1,167 +0,0 @@
-import {CSSObject, getTheme_v2} from '@sanity/ui/theme'
-
-import {_responsive, rem, ThemeProps} from '../../styles'
-import {focusRingStyle} from '../../styles/internal'
-import {AvatarRootStyleProps, ResponsiveAvatarSizeStyleProps} from './types'
-
-export const avatarStyle = {
- root: avatarRootStyle,
- arrow: avatarArrowStyle,
- bgStroke: avatarBgStrokeStyle,
- stroke: avatarStrokeStyle,
- initials: avatarInitialsStyle,
- image: avatarImageStyle,
-}
-
-function avatarArrowStyle(): CSSObject {
- return {
- 'position': 'absolute',
- 'boxSizing': 'border-box',
- 'zIndex': 0,
- 'opacity': 0,
- 'transition': 'all 0.2s linear',
- 'transform': 'rotate(-90deg) translate3d(0, 6px, 0)',
- 'left': 0,
- 'right': 0,
- 'top': 0,
- 'bottom': 0,
-
- '& > svg': {
- 'width': '11px',
- 'height': '7px',
- 'position': 'absolute',
- 'top': '-5px',
- 'left': '50%',
- 'transform': 'translateX(-6px)',
-
- '&:not([hidden])': {
- display: 'block',
- },
- },
-
- "[data-arrow-position='inside'] > &": {
- transform: 'rotate(-90deg) translate3d(0, 6px, 0)',
- opacity: 0,
- },
-
- "[data-arrow-position='top'] > &": {
- opacity: 1,
- transform: 'rotate(0deg)',
- },
-
- "[data-arrow-position='bottom'] > &": {
- opacity: 1,
- transform: 'rotate(-180deg)',
- },
- }
-}
-
-export function avatarRootStyle(props: AvatarRootStyleProps & ThemeProps): CSSObject {
- const {$color} = props
- const {avatar} = getTheme_v2(props.theme)
-
- return {
- '--avatar-bg-color': `var(--card-avatar-${$color}-bg-color)`,
- '--avatar-fg-color': `var(--card-avatar-${$color}-fg-color)`,
-
- 'backgroundColor': 'var(--avatar-bg-color)',
- 'position': 'relative',
- 'boxSizing': 'border-box',
- 'userSelect': 'none',
- 'boxShadow': '0 0 0 1px var(--card-bg-color)',
-
- '&[data-status="inactive"]': {
- opacity: 0.5,
- },
-
- '&>svg': {
- '&:not([hidden])': {
- display: 'block',
- },
- },
-
- /* &:is(button) */
- '&[data-as="button"]': {
- 'WebkitFontSmoothing': 'inherit',
- 'appearance': 'none',
- 'margin': 0,
- 'padding': 0,
- 'border': 0,
- 'font': 'inherit',
- 'color': 'inherit',
- 'outline': 'none',
-
- '&:focus': {
- boxShadow: focusRingStyle({focusRing: avatar.focusRing}),
- },
-
- '&:focus:not(:focus-visible)': {
- boxShadow: 'none',
- },
- },
- }
-}
-
-export function responsiveAvatarSizeStyle(
- props: ResponsiveAvatarSizeStyleProps & ThemeProps,
-): CSSObject[] {
- const {avatar, media} = getTheme_v2(props.theme)
-
- return _responsive(media, props.$size, (size) => {
- const avatarSize = avatar.sizes[size] || avatar.sizes[0]
-
- return {
- 'width': rem(avatarSize.size),
- 'height': rem(avatarSize.size),
- 'borderRadius': rem(avatarSize.size / 2),
-
- '&>svg': {
- width: rem(avatarSize.size),
- height: rem(avatarSize.size),
- borderRadius: rem(avatarSize.size / 2),
- },
- }
- })
-}
-
-export function avatarImageStyle(): CSSObject {
- return {
- position: 'relative',
- }
-}
-
-export function avatarInitialsStyle(): CSSObject {
- return {
- 'width': '100%',
- 'height': '100%',
- 'color': 'var(--avatar-fg-color)',
- 'alignItems': 'center',
- 'justifyContent': 'center',
- 'textTransform': 'uppercase',
- 'textAlign': 'center',
- 'borderRadius': '50%',
-
- '&:not([hidden])': {
- display: 'flex',
- },
- }
-}
-
-function avatarBgStrokeStyle(): CSSObject {
- return {
- strokeWidth: '4px',
- stroke: 'var(--card-bg-color)',
- }
-}
-
-function avatarStrokeStyle(): CSSObject {
- return {
- 'strokeWidth': '2px',
- 'stroke': 'var(--avatar-bg-color)',
-
- '[data-status="editing"] &': {
- strokeDasharray: '2 4',
- strokeLinecap: 'round',
- },
- }
-}
diff --git a/src/core/primitives/avatar/types.ts b/src/core/primitives/avatar/types.ts
index 695fd59a3..768cd4648 100644
--- a/src/core/primitives/avatar/types.ts
+++ b/src/core/primitives/avatar/types.ts
@@ -1,17 +1,2 @@
-import {ThemeColorAvatarColorKey} from '@sanity/ui/theme'
-
-import {AvatarSize} from '../../types'
-
-/**
- * @internal
- */
-export interface AvatarRootStyleProps {
- $color: ThemeColorAvatarColorKey
-}
-
-/**
- * @internal
- */
-export interface ResponsiveAvatarSizeStyleProps {
- $size: AvatarSize[]
-}
+/** @public */
+export type AvatarPosition = 'top' | 'bottom' | 'inside'
diff --git a/src/core/primitives/badge/__workshop__/index.ts b/src/core/primitives/badge/__workshop__/index.ts
index cb4101b9b..52fdc906c 100644
--- a/src/core/primitives/badge/__workshop__/index.ts
+++ b/src/core/primitives/badge/__workshop__/index.ts
@@ -1,7 +1,7 @@
-import {defineScope} from '@sanity/ui-workshop'
+import type {WorkshopScope} from '@sanity/ui-workshop'
import {lazy} from 'react'
-export default defineScope({
+const scope: WorkshopScope = {
name: 'primitives/badge',
title: 'Badge',
stories: [
@@ -16,4 +16,6 @@ export default defineScope({
component: lazy(() => import('./tones')),
},
],
-})
+}
+
+export default scope
diff --git a/src/core/primitives/badge/__workshop__/props.tsx b/src/core/primitives/badge/__workshop__/props.tsx
index 8452073cd..4443c9c08 100644
--- a/src/core/primitives/badge/__workshop__/props.tsx
+++ b/src/core/primitives/badge/__workshop__/props.tsx
@@ -1,28 +1,17 @@
import {Badge, Flex} from '@sanity/ui'
import {useAction, useSelect, useText} from '@sanity/ui-workshop'
-import {
- WORKSHOP_BADGE_MODE_OPTIONS,
- WORKSHOP_BADGE_TONE_OPTIONS,
- WORKSHOP_SPACE_OPTIONS,
-} from '../../../__workshop__/constants'
+import {WORKSHOP_BADGE_TONE_OPTIONS, WORKSHOP_SPACE_OPTIONS} from '$workshop'
-export default function PropsStory() {
- const mode = useSelect('Mode (deprecated)', WORKSHOP_BADGE_MODE_OPTIONS, 'default', 'Props')
- const paddingX = useSelect('Padding X', WORKSHOP_SPACE_OPTIONS, 1, 'Props')
- const paddingY = useSelect('Padding Y', WORKSHOP_SPACE_OPTIONS, 1, 'Props')
- const tone = useSelect('Tone', WORKSHOP_BADGE_TONE_OPTIONS, 'default', 'Props')
- const textProp = useText('Text', 'Label', 'Props')
+export default function PropsStory(): React.JSX.Element {
+ const paddingX = useSelect('Padding X', WORKSHOP_SPACE_OPTIONS, 1)
+ const paddingY = useSelect('Padding Y', WORKSHOP_SPACE_OPTIONS, 1)
+ const tone = useSelect('Tone', WORKSHOP_BADGE_TONE_OPTIONS, 'default')
+ const textProp = useText('Text', 'Label')
return (
-
+
{textProp}
diff --git a/src/core/primitives/badge/__workshop__/tones.tsx b/src/core/primitives/badge/__workshop__/tones.tsx
index a55a4efa4..a8bebf9ce 100644
--- a/src/core/primitives/badge/__workshop__/tones.tsx
+++ b/src/core/primitives/badge/__workshop__/tones.tsx
@@ -1,21 +1,16 @@
-import {Badge, Flex, Inline} from '@sanity/ui'
-import {THEME_COLOR_STATE_TONES} from '@sanity/ui/theme'
-import {useSelect} from '@sanity/ui-workshop'
-
-import {WORKSHOP_BADGE_MODE_OPTIONS} from '../../../__workshop__/constants'
-
-export default function Tones() {
- const mode = useSelect('Mode (deprecated)', WORKSHOP_BADGE_MODE_OPTIONS, 'default', 'Props')
+import {Badge, Flex} from '@sanity/ui'
+import {ELEMENT_TONES} from '@sanity/ui/theme'
+export default function Tones(): React.JSX.Element {
return (
-
- {THEME_COLOR_STATE_TONES.map((tone) => (
-
+
+ {ELEMENT_TONES.map((tone) => (
+
{tone}
))}
-
+
)
}
diff --git a/src/core/primitives/badge/badge.test.tsx b/src/core/primitives/badge/badge.test.tsx
index a27763fbd..a460d129c 100644
--- a/src/core/primitives/badge/badge.test.tsx
+++ b/src/core/primitives/badge/badge.test.tsx
@@ -1,8 +1,8 @@
-/** @jest-environment jsdom */
+import {describe, expect, it} from 'vitest'
+import {axe} from 'vitest-axe'
-import {axe} from 'jest-axe'
+import {render} from '$test/utils'
-import {render} from '../../../../test'
import {Badge} from './badge'
describe('atoms/badge', () => {
diff --git a/src/core/primitives/badge/badge.tsx b/src/core/primitives/badge/badge.tsx
index b177c6acb..81efa57fa 100644
--- a/src/core/primitives/badge/badge.tsx
+++ b/src/core/primitives/badge/badge.tsx
@@ -1,62 +1,61 @@
-import {forwardRef} from 'react'
-import {styled} from 'styled-components'
+import {
+ badge,
+ type BadgeStyleProps,
+ type FlexStyleProps,
+ type PaddingStyleProps,
+ type RadiusStyleProps,
+} from '@sanity/ui/css'
-import {useArrayProp} from '../../hooks'
-import {responsiveRadiusStyle, ResponsiveRadiusStyleProps} from '../../styles/internal'
-import {BadgeMode, BadgeTone} from '../../types'
-import {Box, BoxProps} from '../box'
-import {Text} from '../text'
-import {ResponsiveRadiusProps} from '../types'
-import {badgeStyle} from './styles'
-import {BadgeStyleProps} from './types'
+import type {ComponentType, Props} from '../../types'
+import {Box} from '../box/box'
+import {Text} from '../text/text'
-/**
- * @public
- */
-export interface BadgeProps extends BoxProps, ResponsiveRadiusProps {
- as?: React.ElementType | keyof React.JSX.IntrinsicElements
- fontSize?: number | number[]
- /** @deprecated No longer used. */
- mode?: BadgeMode
- tone?: BadgeTone
-}
+/** @public */
+export const DEFAULT_BADGE_ELEMENT = 'span'
-const StyledBadge = styled(Box)(
- responsiveRadiusStyle,
- badgeStyle,
-)
+/** @public */
+export type BadgeOwnProps = BadgeStyleProps & FlexStyleProps & PaddingStyleProps & RadiusStyleProps
+
+/** @public */
+export type BadgeElementType = 'div' | 'span' | ComponentType
+
+/** @public */
+export type BadgeProps = Props
/**
* Badges are used to tag resources.
*
* @public
*/
-export const Badge = forwardRef(function Badge(
- props: BadgeProps & React.HTMLProps,
- ref,
-) {
+export function Badge(
+ props: BadgeProps,
+): React.JSX.Element {
const {
+ as = DEFAULT_BADGE_ELEMENT,
children,
+ className,
+ flex = 'none',
fontSize = 1,
- // eslint-disable-next-line @typescript-eslint/no-unused-vars
- mode: _deprecated_mode,
padding = 1,
- radius = 'full',
+ radius = 2,
tone = 'default',
- ...restProps
- } = props
+ ...rest
+ } = props as BadgeProps
return (
-
{children}
-
+
)
-})
-Badge.displayName = 'ForwardRef(Badge)'
+}
diff --git a/src/core/primitives/badge/index.ts b/src/core/primitives/badge/index.ts
deleted file mode 100644
index 883be942e..000000000
--- a/src/core/primitives/badge/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './badge'
diff --git a/src/core/primitives/badge/styles.ts b/src/core/primitives/badge/styles.ts
deleted file mode 100644
index 0be1ca7bb..000000000
--- a/src/core/primitives/badge/styles.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import {CSSObject} from '@sanity/ui/theme'
-
-import {BadgeStyleProps} from './types'
-
-export function badgeStyle(props: BadgeStyleProps): CSSObject {
- const {$tone} = props
-
- return {
- '--card-bg-color': `var(--card-badge-${$tone}-bg-color)`,
- '--card-fg-color': `var(--card-badge-${$tone}-fg-color)`,
-
- 'backgroundColor': 'var(--card-bg-color)',
- 'cursor': 'default',
-
- '&:not([hidden])': {
- display: 'inline-block',
- verticalAlign: 'top',
- },
- }
-}
diff --git a/src/core/primitives/badge/types.ts b/src/core/primitives/badge/types.ts
deleted file mode 100644
index 75ed1cf78..000000000
--- a/src/core/primitives/badge/types.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import {BadgeTone} from '../../types'
-
-/**
- * @internal
- */
-export interface BadgeStyleProps {
- $tone: BadgeTone
-}
diff --git a/src/core/primitives/box/__workshop__/index.ts b/src/core/primitives/box/__workshop__/index.ts
index 88de67629..d1502037e 100644
--- a/src/core/primitives/box/__workshop__/index.ts
+++ b/src/core/primitives/box/__workshop__/index.ts
@@ -1,7 +1,7 @@
-import {defineScope} from '@sanity/ui-workshop'
+import type {WorkshopScope} from '@sanity/ui-workshop'
import {lazy} from 'react'
-export default defineScope({
+const scope: WorkshopScope = {
name: 'primitives/box',
title: 'Box',
stories: [
@@ -16,4 +16,6 @@ export default defineScope({
component: lazy(() => import('./responsive')),
},
],
-})
+}
+
+export default scope
diff --git a/src/core/primitives/box/__workshop__/props.tsx b/src/core/primitives/box/__workshop__/props.tsx
index 968bbc625..79be629b9 100644
--- a/src/core/primitives/box/__workshop__/props.tsx
+++ b/src/core/primitives/box/__workshop__/props.tsx
@@ -1,10 +1,10 @@
import {Box, Card, Text} from '@sanity/ui'
import {useAction, useSelect} from '@sanity/ui-workshop'
-import {WORKSHOP_SPACE_OPTIONS} from '../../../__workshop__/constants'
+import {WORKSHOP_SPACE_OPTIONS} from '$workshop'
-export default function PropsStory() {
- const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 0, 'Props')
+export default function PropsStory(): React.JSX.Element {
+ const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 0)
return (
diff --git a/src/core/primitives/box/__workshop__/responsive.tsx b/src/core/primitives/box/__workshop__/responsive.tsx
index 962475901..6490794e5 100644
--- a/src/core/primitives/box/__workshop__/responsive.tsx
+++ b/src/core/primitives/box/__workshop__/responsive.tsx
@@ -1,6 +1,7 @@
import {Box, Text} from '@sanity/ui'
+import {vars} from '@sanity/ui/css'
-export default function ResponsiveStory() {
+export default function ResponsiveStory(): React.JSX.Element {
return (
This is a box with responsive props
diff --git a/src/core/primitives/box/box.tsx b/src/core/primitives/box/box.tsx
index 13546a1cb..95aa566f0 100644
--- a/src/core/primitives/box/box.tsx
+++ b/src/core/primitives/box/box.tsx
@@ -1,55 +1,54 @@
-import {forwardRef} from 'react'
-import {styled} from 'styled-components'
+import {box, type BoxStyleProps} from '@sanity/ui/css'
-import {useArrayProp} from '../../hooks'
-import {
- boxStyle,
- flexItemStyle,
- FlexItemStyleProps,
- responsiveBoxStyle,
- ResponsiveBoxStyleProps,
- responsiveGridItemStyle,
- ResponsiveGridItemStyleProps,
- responsiveMarginStyle,
- ResponsiveMarginStyleProps,
- responsivePaddingStyle,
- ResponsivePaddingStyleProps,
-} from '../../styles/internal'
-import {
- ResponsiveBoxProps,
- ResponsiveFlexItemProps,
- ResponsiveGridItemProps,
- ResponsiveMarginProps,
- ResponsivePaddingProps,
-} from '../types'
+import type {ComponentType, Props} from '../../types'
-/**
- * @public
- */
-export interface BoxProps
- extends ResponsiveFlexItemProps,
- ResponsiveBoxProps,
- ResponsiveGridItemProps,
- ResponsiveMarginProps,
- ResponsivePaddingProps {
- as?: React.ElementType | keyof React.JSX.IntrinsicElements
- forwardedAs?: React.ElementType | keyof React.JSX.IntrinsicElements
-}
+/** @public */
+export const DEFAULT_BOX_ELEMENT = 'div'
-const StyledBox = styled.div<
- FlexItemStyleProps &
- ResponsiveBoxStyleProps &
- ResponsiveGridItemStyleProps &
- ResponsiveMarginStyleProps &
- ResponsivePaddingStyleProps
->(
- boxStyle,
- flexItemStyle,
- responsiveBoxStyle,
- responsiveGridItemStyle,
- responsiveMarginStyle,
- responsivePaddingStyle,
-)
+/** @public */
+export type BoxOwnProps = BoxStyleProps
+
+/** @public */
+export type BoxElementType =
+ | 'a'
+ | 'article'
+ | 'aside'
+ | 'blockquote'
+ | 'body'
+ | 'button'
+ | 'details'
+ | 'div'
+ | 'header'
+ | 'fieldset'
+ | 'figure'
+ | 'figcaption'
+ | 'footer'
+ | 'form'
+ | 'html'
+ | 'iframe'
+ | 'kbd'
+ | 'label'
+ | 'legend'
+ | 'li'
+ | 'main'
+ | 'nav'
+ | 'ol'
+ | 'pre'
+ | 'section'
+ | 'span'
+ | 'summary'
+ | 'table'
+ | 'tbody'
+ | 'td'
+ | 'tfoot'
+ | 'th'
+ | 'thead'
+ | 'tr'
+ | 'ul'
+ | ComponentType
+
+/** @public */
+export type BoxProps = Props
/**
* The `Box` component is a basic layout wrapper component which provides utility properties
@@ -57,18 +56,51 @@ const StyledBox = styled.div<
*
* @public
*/
-export const Box = forwardRef(function Box(
- props: BoxProps & Omit, 'as' | 'height'>,
- ref: React.ForwardedRef,
-) {
+export function Box(
+ props: BoxProps,
+): React.JSX.Element {
const {
- as: asProp = 'div',
- column,
- columnStart,
- columnEnd,
+ alignItems,
+ as: Element = DEFAULT_BOX_ELEMENT,
+ // autoCols,
+ // autoFlow,
+ // autoRows,
+ border = false,
+ borderTop,
+ borderRight,
+ borderBottom,
+ borderLeft,
+ className,
+ children,
+ // column,
+ // columnStart,
+ // columnEnd,
+ // columns,
display = 'block',
flex,
+ flexDirection,
+ flexWrap,
+ gap,
+ gapX,
+ gapY,
+ gridAutoColumns,
+ gridAutoFlow,
+ gridAutoRows,
+ gridColumn,
+ gridColumnEnd,
+ gridColumnStart,
+ gridRow,
+ gridRowEnd,
+ gridRowStart,
+ gridTemplateColumns,
+ gridTemplateRows,
height,
+ inset,
+ insetBottom,
+ insetLeft,
+ insetRight,
+ insetTop,
+ justifyContent,
margin = 0,
marginX,
marginY,
@@ -76,7 +108,14 @@ export const Box = forwardRef(function Box(
marginRight,
marginBottom,
marginLeft,
+ maxWidth,
+ minHeight = 0,
+ minWidth = 0,
+ muted,
+ outline,
overflow,
+ overflowX,
+ overflowY,
padding = 0,
paddingX,
paddingY,
@@ -84,48 +123,100 @@ export const Box = forwardRef(function Box(
paddingRight,
paddingBottom,
paddingLeft,
- row,
- rowStart,
- rowEnd,
- sizing,
- ...restProps
- } = props
+ pointerEvents,
+ position,
+ radius,
+ // row,
+ // rows,
+ // rowStart,
+ // rowEnd,
+ shadow,
+ sizing = 'border',
+ textAlign,
+ width,
+ ...rest
+ } = props as BoxProps
return (
-
- {props.children}
-
+ {children}
+
)
-})
-Box.displayName = 'ForwardRef(Box)'
+}
diff --git a/src/core/primitives/box/index.ts b/src/core/primitives/box/index.ts
deleted file mode 100644
index fd5f3c331..000000000
--- a/src/core/primitives/box/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './box'
diff --git a/src/core/primitives/button/__workshop__/custom.tsx b/src/core/primitives/button/__workshop__/custom.tsx
index 5b0c10e06..8e574da7e 100644
--- a/src/core/primitives/button/__workshop__/custom.tsx
+++ b/src/core/primitives/button/__workshop__/custom.tsx
@@ -1,50 +1,26 @@
-/* eslint-disable jsx-a11y/anchor-is-valid */
-
-import {Button, Flex, Grid, Stack, Text} from '@sanity/ui'
-
-import {WORKSHOP_BUTTON_TONE_OPTIONS} from '../../../__workshop__/constants'
-
-export default function CustomStory() {
- const tones = Object.entries(WORKSHOP_BUTTON_TONE_OPTIONS)
- const len = tones.length
+import {Button, Flex, Grid, Hotkeys, Stack, Text} from '@sanity/ui'
+import {BUTTON_MODES, ELEMENT_TONES} from '@sanity/ui/theme'
+export default function CustomStory(): React.JSX.Element {
return (
-
-
- {tones.map(([title, tone]) => (
-
-
- {title}
- Muted
-
- Link
-
-
- Code
-
- Accent
-
-
- ))}
-
-
- {tones.map(([title, tone]) => (
-
-
- {title}
- Muted
-
- Link
-
-
- Code
-
- Accent
-
-
- ))}
-
+
+ {BUTTON_MODES.map((mode) => (
+
+ {ELEMENT_TONES.map((tone) => (
+
+
+ Text
+ Muted
+
+ Code
+
+
+
+ ))}
+
+ ))}
)
diff --git a/src/core/primitives/button/__workshop__/customIcons.tsx b/src/core/primitives/button/__workshop__/customIcons.tsx
index 29105c8d4..bfedee2fc 100644
--- a/src/core/primitives/button/__workshop__/customIcons.tsx
+++ b/src/core/primitives/button/__workshop__/customIcons.tsx
@@ -1,12 +1,12 @@
import {RocketIcon} from '@sanity/icons'
import {Button, Flex, Inline} from '@sanity/ui'
-export default function CustomIconsStory() {
+export default function CustomIconsStory(): React.JSX.Element {
return (
-
-
+
)
diff --git a/src/core/primitives/button/__workshop__/disabled.tsx b/src/core/primitives/button/__workshop__/disabled.tsx
index 753780ca6..1c8925589 100644
--- a/src/core/primitives/button/__workshop__/disabled.tsx
+++ b/src/core/primitives/button/__workshop__/disabled.tsx
@@ -1,74 +1,54 @@
import {SquareIcon} from '@sanity/icons'
-
-import {Card} from '../../card/card'
-import {Container} from '../../container/container'
-import {Grid} from '../../grid/grid'
-import {Stack} from '../../stack/stack'
-import {Text} from '../../text/text'
-import {Button, ButtonProps} from '../button'
+import {Button, Card, Container, Grid, Stack, Text} from '@sanity/ui'
+import {useBoolean} from '@sanity/ui-workshop'
const GAP = 4
const COLUMNS = 3
-const DEFAULT_PROPS: ButtonProps = {
+const DEFAULT_PROPS = {
icon: SquareIcon,
iconRight: SquareIcon,
-}
-
-function Layout() {
- return (
-
-
-
-
- Default
-
-
- Ghost
-
-
- Bleed
-
-
-
-
-
-
-
-
-
-
+} as const
-
-
-
-
-
-
- )
-}
+export default function DisabledButtonStory(): React.JSX.Element {
+ const muted = useBoolean('Muted', false)
-export default function DisabledButtonStory() {
return (
-
-
-
-
+
+
+
+
+
+ Default
+
+
+ Ghost
+
+
+ Bleed
+
+
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
)
}
diff --git a/src/core/primitives/button/__workshop__/index.ts b/src/core/primitives/button/__workshop__/index.ts
index 0426559a5..84c27186d 100644
--- a/src/core/primitives/button/__workshop__/index.ts
+++ b/src/core/primitives/button/__workshop__/index.ts
@@ -1,7 +1,7 @@
-import {defineScope} from '@sanity/ui-workshop'
+import type {WorkshopScope} from '@sanity/ui-workshop'
import {lazy} from 'react'
-export default defineScope({
+const scope: WorkshopScope = {
name: 'primitives/button',
title: 'Button',
stories: [
@@ -55,5 +55,12 @@ export default defineScope({
title: 'Disabled',
component: lazy(() => import('./disabled')),
},
+ {
+ name: 'text-overflow',
+ title: 'Text overflow',
+ component: lazy(() => import('./textOverflow')),
+ },
],
-})
+}
+
+export default scope
diff --git a/src/core/primitives/button/__workshop__/mixedChildren.tsx b/src/core/primitives/button/__workshop__/mixedChildren.tsx
index 614a2498d..166b6c6a0 100644
--- a/src/core/primitives/button/__workshop__/mixedChildren.tsx
+++ b/src/core/primitives/button/__workshop__/mixedChildren.tsx
@@ -1,7 +1,7 @@
import {AddIcon} from '@sanity/icons'
import {Button, Flex} from '@sanity/ui'
-export default function MixedChildrenStory() {
+export default function MixedChildrenStory(): React.JSX.Element {
return (
diff --git a/src/core/primitives/button/__workshop__/props.tsx b/src/core/primitives/button/__workshop__/props.tsx
index 8ff5d0499..c29a9705b 100644
--- a/src/core/primitives/button/__workshop__/props.tsx
+++ b/src/core/primitives/button/__workshop__/props.tsx
@@ -9,42 +9,42 @@ import {
WORKSHOP_FLEX_JUSTIFY_OPTIONS,
WORKSHOP_ICON_SYMBOL_OPTIONS,
WORKSHOP_SPACE_OPTIONS,
- WORKSHOP_TEXT_SIZE_OPTIONS,
+ WORKSHOP_TEXT_FONT_SIZE_OPTIONS,
WORKSHOP_TEXT_WEIGHT_OPTIONS,
-} from '../../../__workshop__/constants'
+} from '$workshop'
-export default function ButtonStory() {
- const disabled = useBoolean('Disabled', false, 'Props')
- const fontSize = useSelect('Font size', WORKSHOP_TEXT_SIZE_OPTIONS, 2, 'Props')
- const icon = useSelect('Icon', WORKSHOP_ICON_SYMBOL_OPTIONS, 'add-circle', 'Props')
- const iconRight = useSelect('Icon (right)', WORKSHOP_ICON_SYMBOL_OPTIONS, '', 'Props')
- const justify = useSelect('Justify', WORKSHOP_FLEX_JUSTIFY_OPTIONS, 'center', 'Props')
- const mode = useSelect('Mode', WORKSHOP_BUTTON_MODE_OPTIONS, 'default', 'Props')
- const paddingX = useSelect('Padding X', WORKSHOP_SPACE_OPTIONS, 3, 'Props')
- const paddingY = useSelect('Padding Y', WORKSHOP_SPACE_OPTIONS, 3, 'Props')
- const selected = useBoolean('Selected', false, 'Props')
- const space = useSelect('Space', WORKSHOP_SPACE_OPTIONS, 3, 'Props')
- const tone = useSelect('Tone', WORKSHOP_BUTTON_TONE_OPTIONS, 'default', 'Props')
- const textAlign =
- useSelect('Text align', WORKSHOP_BUTTON_TEXT_ALIGN_OPTIONS, undefined, 'Props') || undefined
- const textProp = useText('Text', 'Label', 'Props')
- const textWeight =
- useSelect('Text weight', WORKSHOP_TEXT_WEIGHT_OPTIONS, '', 'Props') || undefined
+export default function ButtonStory(): React.JSX.Element {
+ const disabled = useBoolean('Disabled')
+ const fontSize = useSelect('Font size', WORKSHOP_TEXT_FONT_SIZE_OPTIONS)
+ const gap = useSelect('Gap', WORKSHOP_SPACE_OPTIONS)
+ const icon = useSelect('Icon', WORKSHOP_ICON_SYMBOL_OPTIONS)
+ const iconRight = useSelect('Icon (right)', WORKSHOP_ICON_SYMBOL_OPTIONS)
+ const justify = useSelect('Justify', WORKSHOP_FLEX_JUSTIFY_OPTIONS)
+ const loading = useBoolean('Loading')
+ const mode = useSelect('Mode', WORKSHOP_BUTTON_MODE_OPTIONS)
+ const paddingX = useSelect('Padding X', WORKSHOP_SPACE_OPTIONS)
+ const paddingY = useSelect('Padding Y', WORKSHOP_SPACE_OPTIONS)
+ const selected = useBoolean('Selected')
+ const tone = useSelect('Tone', WORKSHOP_BUTTON_TONE_OPTIONS)
+ const textAlign = useSelect('Text align', WORKSHOP_BUTTON_TEXT_ALIGN_OPTIONS)
+ const textProp = useText('Text', 'Label')
+ const textWeight = useSelect('Text weight', WORKSHOP_TEXT_WEIGHT_OPTIONS)
return (
span:nth-child(2) {
width: 0;
flex: none;
padding: 0;
}
`
-export default function SanityUploadButtonWorkaroundStory() {
+export default function SanityUploadButtonWorkaroundStory(): React.JSX.Element {
return (
-
-
+
+
diff --git a/src/core/primitives/button/__workshop__/stacked.tsx b/src/core/primitives/button/__workshop__/stacked.tsx
index 31671452d..301f56048 100644
--- a/src/core/primitives/button/__workshop__/stacked.tsx
+++ b/src/core/primitives/button/__workshop__/stacked.tsx
@@ -8,33 +8,34 @@ import {
WORKSHOP_FLEX_JUSTIFY_OPTIONS,
WORKSHOP_ICON_SYMBOL_OPTIONS,
WORKSHOP_SPACE_OPTIONS,
- WORKSHOP_TEXT_SIZE_OPTIONS,
-} from '../../../__workshop__/constants'
+ WORKSHOP_TEXT_FONT_SIZE_OPTIONS,
+} from '$workshop'
-export default function StackedStory() {
+export default function StackedStory(): React.JSX.Element {
const tones = Object.entries(WORKSHOP_BUTTON_TONE_OPTIONS)
- const disabled = useBoolean('Disabled', false, 'Props')
- const fontSize = useSelect('Font size', WORKSHOP_TEXT_SIZE_OPTIONS, 2, 'Props')
- const icon = useSelect('Icon', WORKSHOP_ICON_SYMBOL_OPTIONS, 'add-circle', 'Props')
- const iconRight = useSelect('Icon (right)', WORKSHOP_ICON_SYMBOL_OPTIONS, '', 'Props')
- const justify = useSelect('Justify', WORKSHOP_FLEX_JUSTIFY_OPTIONS, 'center', 'Props')
- const mode = useSelect('Mode', WORKSHOP_BUTTON_MODE_OPTIONS, 'default', 'Props')
+ const disabled = useBoolean('Disabled', false)
+ const fontSize = useSelect('Font size', WORKSHOP_TEXT_FONT_SIZE_OPTIONS, 2)
+ const gap = useSelect('Gap', WORKSHOP_SPACE_OPTIONS, 3)
+ const icon = useSelect('Icon', WORKSHOP_ICON_SYMBOL_OPTIONS, 'add-circle')
+ const iconRight = useSelect('Icon (right)', WORKSHOP_ICON_SYMBOL_OPTIONS)
+ const justify = useSelect('Justify', WORKSHOP_FLEX_JUSTIFY_OPTIONS, 'center')
+ const mode = useSelect('Mode', WORKSHOP_BUTTON_MODE_OPTIONS, 'default')
const onClick = useAction('onClick')
- const paddingX = useSelect('Padding X', WORKSHOP_SPACE_OPTIONS, 3, 'Props')
- const paddingY = useSelect('Padding Y', WORKSHOP_SPACE_OPTIONS, 3, 'Props')
- const selected = useBoolean('Selected', false, 'Props')
- const space = useSelect('Space', WORKSHOP_SPACE_OPTIONS, 3, 'Props')
+ const paddingX = useSelect('Padding X', WORKSHOP_SPACE_OPTIONS, 3)
+ const paddingY = useSelect('Padding Y', WORKSHOP_SPACE_OPTIONS, 3)
+ const selected = useBoolean('Selected', false)
return (
-
+
{tones.map(([title, tone]) => (
+
+ )
+}
diff --git a/src/core/primitives/button/__workshop__/uploadButton.tsx b/src/core/primitives/button/__workshop__/uploadButton.tsx
index 5ea7d2b35..cb7b7dd3c 100644
--- a/src/core/primitives/button/__workshop__/uploadButton.tsx
+++ b/src/core/primitives/button/__workshop__/uploadButton.tsx
@@ -1,7 +1,7 @@
import {Button, Flex} from '@sanity/ui'
import {useCallback, useRef} from 'react'
-export default function UploadButtonStory() {
+export default function UploadButtonStory(): React.JSX.Element {
const inputRef = useRef(null)
const handleKeyDown = useCallback((event: React.KeyboardEvent) => {
@@ -11,9 +11,10 @@ export default function UploadButtonStory() {
}, [])
return (
-
+
{
it('Axe: should have no violations', async () => {
@@ -27,18 +27,4 @@ describe('atoms/button', () => {
expect(screen.getByText('Button text')).toBeInTheDocument()
})
-
- it('should wrap button', () => {
- function WrappedButton({button: buttonProps}: {button: ButtonProps}) {
- return
+ 'icon'?: ReactElementType | ReactNode
+ 'iconRight'?: ReactElementType | ReactNode
+ 'justify'?: BoxStyleProps['justifyContent']
+ /** @beta Do not use in production, as this might change.*/
+ 'loading'?: boolean
+ 'selected'?: boolean
+ 'textAlign'?: ButtonTextAlign
+ 'muted'?: boolean
+ 'target'?: string
+ 'text'?: ReactNode
+ 'textOverflow'?: TextOwnProps['textOverflow']
+ 'textWeight'?: TextOwnProps['weight']
+ 'width'?: ResponsiveProp
+ }
-const StyledButton = styled.button<
- {$mode: ButtonMode; $tone: ButtonTone; $width?: ButtonWidth} & ResponsiveRadiusStyleProps &
- ThemeProps
->(responsiveRadiusStyle, buttonBaseStyles, buttonColorStyles)
+/** @public */
+export type ButtonElementType = 'a' | 'button' | 'label' | ComponentType
-const LoadingBox = styled.div`
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- display: flex;
- align-items: center;
- justify-content: center;
- background-color: var(--card-bg-color);
- border-radius: inherit;
- z-index: 1;
- box-shadow: inherit;
-`
+/** @public */
+export type ButtonProps = Props
-/**
- * @public
- */
-export const Button = forwardRef(function Button(
- props: ButtonProps & Omit, 'as' | 'width'>,
- ref: React.ForwardedRef,
-) {
+/** @public */
+export function Button(
+ props: ButtonProps,
+): React.JSX.Element {
const {
+ align = 'center',
+ as: Element = DEFAULT_BUTTON_ELEMENT,
children,
+ className,
disabled,
+ flex,
fontSize = 1,
+ gap = props.padding ?? 3,
+ gapX,
+ gapY,
icon: IconComponent,
iconRight: IconRightComponent,
- justify: justifyProp = 'center',
+ justify = 'center',
loading,
mode = 'default',
- padding: paddingProp = 3,
- paddingX: paddingXProp,
- paddingY: paddingYProp,
- paddingTop: paddingTopProp,
- paddingBottom: paddingBottomProp,
- paddingLeft: paddingLeftProp,
- paddingRight: paddingRightProp,
- radius: radiusProp = 2,
+ padding = 3,
+ paddingX,
+ paddingY,
+ paddingTop,
+ paddingBottom,
+ paddingLeft,
+ paddingRight,
+ radius = 2,
selected,
- space: spaceProp = 3,
text,
textAlign,
- textWeight,
+ textOverflow = 'ellipsis',
+ textWeight = 'medium',
tone = 'default',
type = 'button',
muted = false,
width,
- ...restProps
- } = props
- const {button} = useTheme_v2()
+ ...rest
+ } = props as ButtonProps
- const justify = useArrayProp(justifyProp)
- const padding = useArrayProp(paddingProp)
- const paddingX = useArrayProp(paddingXProp)
- const paddingY = useArrayProp(paddingYProp)
- const paddingTop = useArrayProp(paddingTopProp)
- const paddingBottom = useArrayProp(paddingBottomProp)
- const paddingLeft = useArrayProp(paddingLeftProp)
- const paddingRight = useArrayProp(paddingRightProp)
- const radius = useArrayProp(radiusProp)
- const space = useArrayProp(spaceProp)
+ let href: string | undefined = undefined
- const boxProps = useMemo(
- () => ({
- // flex: 1,
- padding,
- paddingX,
- paddingY,
- paddingTop,
- paddingBottom,
- paddingLeft,
- paddingRight,
- }),
- [padding, paddingX, paddingY, paddingTop, paddingBottom, paddingLeft, paddingRight],
- )
+ if ('href' in rest) {
+ href = typeof rest.href === 'string' ? rest.href : href
+ delete rest.href
+ }
return (
-
{Boolean(loading) && (
-
-
+
+
)}
{(IconComponent || text || IconRightComponent) && (
-
-
- {IconComponent && (
-
- {isValidElement(IconComponent) && IconComponent}
- {isValidElementType(IconComponent) &&
- )}
-
- {text && (
-
-
- {text}
-
-
- )}
+
+ {IconComponent && (
+
+ {isValidElement(IconComponent) && IconComponent}
+ {isValidElementType(IconComponent) &&
+ )}
- {IconRightComponent && (
-
- {isValidElement(IconRightComponent) && IconRightComponent}
- {isValidElementType(IconRightComponent) &&
+
+ {text}
- )}
-
+
+ )}
+
+ {IconRightComponent && (
+
+ {isValidElement(IconRightComponent) && IconRightComponent}
+ {isValidElementType(IconRightComponent) &&
+ )}
)}
{children && (
-
+
{children}
)}
-
+
)
-})
-Button.displayName = 'ForwardRef(Button)'
+}
diff --git a/src/core/primitives/button/index.ts b/src/core/primitives/button/index.ts
deleted file mode 100644
index 14757e722..000000000
--- a/src/core/primitives/button/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './button'
diff --git a/src/core/primitives/button/styles.ts b/src/core/primitives/button/styles.ts
deleted file mode 100644
index c228df431..000000000
--- a/src/core/primitives/button/styles.ts
+++ /dev/null
@@ -1,117 +0,0 @@
-import {CSSObject, getTheme_v2} from '@sanity/ui/theme'
-import {css} from 'styled-components'
-
-import {ThemeProps} from '../../styles'
-import {_cardColorStyle} from '../../styles/card'
-import {focusRingBorderStyle, focusRingStyle} from '../../styles/internal'
-import {ButtonMode, ButtonTone, ButtonWidth} from '../../types'
-
-/**
- * @internal
- */
-export function buttonBaseStyles(
- props: {$width?: ButtonWidth} & ThemeProps,
-): ReturnType {
- const {$width} = props
- const {style} = getTheme_v2(props.theme)
-
- return css`
- ${style?.button};
-
- -webkit-font-smoothing: inherit;
- appearance: none;
- display: inline-flex;
- align-items: center;
- font: inherit;
- border: 0;
- outline: none;
- user-select: none;
- text-decoration: none;
- border: 0;
- box-sizing: border-box;
- padding: 0;
- margin: 0;
- white-space: nowrap;
- text-align: left;
- position: relative;
- vertical-align: top;
-
- ${$width === 'fill' &&
- css`
- width: -moz-available;
- width: -webkit-fill-available;
- width: stretch;
- `}
-
- & > span {
- display: block;
- flex: 1;
- min-width: 0;
- border-radius: inherit;
- }
-
- &::-moz-focus-inner {
- border: 0;
- padding: 0;
- }
- `
-}
-
-function combineBoxShadow(...boxShadows: (string | undefined)[]): string {
- return boxShadows.filter(Boolean).join(',')
-}
-
-/**
- * @internal
- */
-export function buttonColorStyles(
- props: {$mode: ButtonMode; $tone: ButtonTone} & ThemeProps,
-): CSSObject[] {
- const {$mode} = props
- const {button, color: baseColor, style} = getTheme_v2(props.theme)
- const shadow = props.$mode === 'ghost'
- const mode = baseColor.button[$mode] || baseColor.button.default
- const color = mode[props.$tone] || mode.default
- const border = {
- width: button.border.width,
- color: 'var(--card-border-color)',
- }
- // const defaultBoxShadow = `inset 0px -1.5px 0px ${buttonTheme.border.width}px color-mix(in srgb, var(--card-border-color) 25%, var(--card-bg-color))`
- const defaultBoxShadow = undefined
-
- return [
- _cardColorStyle(baseColor, color.enabled),
- {
- 'backgroundColor': 'var(--card-bg-color)',
- 'color': 'var(--card-fg-color)',
- 'boxShadow': focusRingBorderStyle(border),
- '&:disabled, &[data-disabled="true"]': _cardColorStyle(baseColor, color.disabled),
- "&:not([data-disabled='true'])": {
- 'boxShadow': combineBoxShadow(
- focusRingBorderStyle(border),
- shadow ? defaultBoxShadow : undefined,
- ),
- '&:focus': {
- boxShadow: focusRingStyle({
- base: baseColor,
- border: {width: 2, color: baseColor.bg},
- focusRing: button.focusRing,
- }),
- },
- '&:focus:not(:focus-visible)': {
- boxShadow: combineBoxShadow(
- focusRingBorderStyle(border),
- shadow ? defaultBoxShadow : undefined,
- ),
- },
- '@media (hover: hover)': {
- '&:hover': _cardColorStyle(baseColor, color.hovered),
- '&:active': _cardColorStyle(baseColor, color.pressed),
- '&[data-hovered]': _cardColorStyle(baseColor, color.hovered),
- },
- '&[data-selected]': _cardColorStyle(baseColor, color.pressed),
- },
- },
- style?.button?.root,
- ].filter(Boolean) as CSSObject[]
-}
diff --git a/src/core/primitives/button/types.ts b/src/core/primitives/button/types.ts
new file mode 100644
index 000000000..8234d4f4f
--- /dev/null
+++ b/src/core/primitives/button/types.ts
@@ -0,0 +1,2 @@
+/** @public */
+export type ButtonTextAlign = 'left' | 'right' | 'center'
diff --git a/src/core/primitives/card/__workshop__/allTones.tsx b/src/core/primitives/card/__workshop__/allTones.tsx
deleted file mode 100644
index 24ff8f538..000000000
--- a/src/core/primitives/card/__workshop__/allTones.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import {Card, Container, Flex, Stack, Text} from '@sanity/ui'
-import {THEME_COLOR_CARD_TONES} from '@sanity/ui/theme'
-
-export default function AllTonesStory() {
- return (
-
-
-
- {THEME_COLOR_CARD_TONES.map((tone) => (
-
- {tone}
-
- ))}
-
-
-
- )
-}
diff --git a/src/core/primitives/card/__workshop__/asButton.tsx b/src/core/primitives/card/__workshop__/asButton.tsx
index 781e99d2a..c74a8779b 100644
--- a/src/core/primitives/card/__workshop__/asButton.tsx
+++ b/src/core/primitives/card/__workshop__/asButton.tsx
@@ -1,19 +1,19 @@
import {Box, Card, Container, Flex, Grid, Stack, Text} from '@sanity/ui'
-import {WORKSHOP_CARD_TONE_OPTIONS} from '../../../__workshop__/constants'
+import {WORKSHOP_CARD_TONE_OPTIONS} from '$workshop'
-export default function AsButtonStory() {
+export default function AsButtonStory(): React.JSX.Element {
const tones = Object.entries(WORKSHOP_CARD_TONE_OPTIONS)
return (
-
+
Enabled
-
+
{tones.map(([title, tone]) => (
-
+
{title}
Muted
-
- Accent
+
+ Code
@@ -43,7 +43,7 @@ export default function AsButtonStory() {
Disabled
-
+
{tones.map(([title, tone]) => (
-
+
{title}
Muted
-
- Accent
+
+ Code
@@ -74,7 +74,7 @@ export default function AsButtonStory() {
Selected
-
+
{tones.map(([title, tone]) => (
-
+
{title}
Muted
-
- Accent
+
+ Code
diff --git a/src/core/primitives/card/__workshop__/asComponent.tsx b/src/core/primitives/card/__workshop__/asComponent.tsx
index 5127d83c3..ecbae0616 100644
--- a/src/core/primitives/card/__workshop__/asComponent.tsx
+++ b/src/core/primitives/card/__workshop__/asComponent.tsx
@@ -5,21 +5,21 @@ const CustomLink = forwardRef(function CustomLink(
props: {req: string} & Omit, 'as' | 'href'>,
ref: React.ForwardedRef,
): React.JSX.Element {
- const {children, req, ...restProps} = props
+ const {children, req, ...rest} = props
return (
-
+
{children}
)
})
-export default function AsComponentStory() {
+export default function AsComponentStory(): React.JSX.Element {
const props = {href: '#'}
return (
-
+
As component
diff --git a/src/core/primitives/card/__workshop__/checkered.tsx b/src/core/primitives/card/__workshop__/checkered.tsx
index 017257405..6f84c0e75 100644
--- a/src/core/primitives/card/__workshop__/checkered.tsx
+++ b/src/core/primitives/card/__workshop__/checkered.tsx
@@ -1,11 +1,11 @@
import {Card, Flex, Stack, Text} from '@sanity/ui'
-import {THEME_COLOR_CARD_TONES} from '@sanity/ui/theme'
+import {CARD_TONES} from '@sanity/ui/theme'
-export default function CheckeredStory() {
+export default function CheckeredStory(): React.JSX.Element {
return (
-
- {THEME_COLOR_CARD_TONES.map((tone) => (
+
+ {CARD_TONES.map((tone) => (
import('./props'))},
{name: 'styled', title: 'Styled', component: lazy(() => import('./styled'))},
{name: 'interactive', title: 'Interactive', component: lazy(() => import('./interactive'))},
- {name: 'tones', title: 'Tones', component: lazy(() => import('./allTones'))},
+ {name: 'tones', title: 'Tones', component: lazy(() => import('./tones'))},
{name: 'as-button', title: 'As button', component: lazy(() => import('./asButton'))},
{name: 'list-nav', title: 'List navigation', component: lazy(() => import('./listNavigation'))},
{name: 'checkered', title: 'Checkered', component: lazy(() => import('./checkered'))},
{name: 'as-component', title: 'As component', component: lazy(() => import('./asComponent'))},
{name: 'selected', title: 'Selected', component: lazy(() => import('./selected'))},
],
-})
+}
+
+export default scope
diff --git a/src/core/primitives/card/__workshop__/interactive.tsx b/src/core/primitives/card/__workshop__/interactive.tsx
index c8e5b157e..e41b0e70c 100644
--- a/src/core/primitives/card/__workshop__/interactive.tsx
+++ b/src/core/primitives/card/__workshop__/interactive.tsx
@@ -1,9 +1,9 @@
import {Card, Flex, Stack, Text} from '@sanity/ui'
import {useBoolean} from '@sanity/ui-workshop'
-export default function InteractiveCardStory() {
- const pressed = useBoolean('Pressed', false, 'Props')
- const selected = useBoolean('Selected', false, 'Props')
+export default function InteractiveCardStory(): React.JSX.Element {
+ const pressed = useBoolean('Pressed', false)
+ const selected = useBoolean('Selected', false)
return (
@@ -16,12 +16,11 @@ export default function InteractiveCardStory() {
selected={selected}
tabIndex={0}
>
-
+
Text Code
Muted
- Accent