sanity 3.93.1-next.15.d233393746 → 3.93.1-next.17.e9296c12d1

package/src/structure/components/pane/Pane.tsx

@@ -1,243 +0,0 @@
-import {BoundaryElementProvider, Card, type CardProps, Code, Flex} from '@sanity/ui'
-import {
-  type ForwardedRef,
-  forwardRef,
-  type HTMLProps,
-  type ReactNode,
-  useCallback,
-  useImperativeHandle,
-  useLayoutEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react'
-import {IsLastPaneProvider, LegacyLayerProvider} from 'sanity'
-import {PaneContext} from 'sanity/_singletons'
-import {styled} from 'styled-components'
-
-import {PANE_COLLAPSED_WIDTH, PANE_DEBUG, PANE_DEFAULT_MIN_WIDTH} from './constants'
-import {PaneDivider} from './PaneDivider'
-import {usePaneLayout} from './usePaneLayout'
-
-interface PaneProps {
-  children?: ReactNode
-  currentMinWidth?: number
-  currentMaxWidth?: number
-  flex?: number
-  id: string
-  minWidth?: number
-  maxWidth?: number
-  selected?: boolean
-}
-
-const Root = styled(Card)`
-  outline: none;
-
-  // NOTE: This will render a border to the right side of each pane
-  // without taking up physical space.
-  box-shadow: 1px 0 0 var(--card-border-color);
-`
-
-/**
- * @hidden
- * @internal
- */
-// eslint-disable-next-line complexity
-export const Pane = forwardRef(function Pane(
-  props: PaneProps &
-    Omit<CardProps, 'as' | 'overflow'> &
-    Omit<HTMLProps<HTMLDivElement>, 'as' | 'height' | 'hidden' | 'id' | 'style'>,
-  forwardedRef: ForwardedRef<HTMLDivElement>,
-) {
-  const {
-    children,
-    currentMinWidth: currentMinWidthProp,
-    currentMaxWidth: currentMaxWidthProp,
-    flex: flexProp = 1,
-    id,
-    minWidth: minWidthProp,
-    maxWidth: maxWidthProp,
-    selected = false,
-    ...restProps
-  } = props
-  const [rootElement, setRootElement] = useState<HTMLDivElement | null>(null)
-  const {
-    collapse,
-    collapsed: layoutCollapsed,
-    expand,
-    expandedElement,
-    mount,
-    panes,
-  } = usePaneLayout()
-  const pane = panes.find((p) => p.element === rootElement)
-  const paneIndex = pane && panes.indexOf(pane)
-  const nextPane = typeof paneIndex === 'number' ? panes[paneIndex + 1] : undefined
-  const isLast = paneIndex === panes.length - 1
-  const expanded = expandedElement === rootElement
-  const collapsed = layoutCollapsed ? false : pane?.collapsed || false
-  const nextCollapsed = nextPane?.collapsed || false
-  const ref = useRef<HTMLDivElement | null>(null)
-  const flex = pane?.flex ?? flexProp
-  const currentMinWidth = pane?.currentMinWidth ?? currentMinWidthProp
-  const currentMaxWidth = pane?.currentMaxWidth ?? currentMaxWidthProp
-
-  // Forward ref to parent
-  useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(forwardedRef, () => ref.current)
-
-  const setRef = useCallback((refValue: HTMLDivElement | null) => {
-    setRootElement(refValue)
-    ref.current = refValue
-  }, [])
-
-  useLayoutEffect(() => {
-    if (!rootElement) return undefined
-    return mount(rootElement, {
-      currentMinWidth: currentMinWidthProp,
-      currentMaxWidth: currentMaxWidthProp,
-      flex: flexProp,
-      id,
-      minWidth: minWidthProp,
-      maxWidth: maxWidthProp,
-    })
-  }, [
-    currentMinWidthProp,
-    currentMaxWidthProp,
-    flexProp,
-    id,
-    minWidthProp,
-    maxWidthProp,
-    mount,
-    rootElement,
-  ])
-
-  const handleCollapse = useCallback(() => {
-    if (!rootElement) return
-    collapse(rootElement)
-  }, [collapse, rootElement])
-
-  const handleExpand = useCallback(() => {
-    if (!rootElement) return
-    expand(rootElement)
-  }, [expand, rootElement])
-
-  const contextValue = useMemo(
-    () => ({
-      collapse: handleCollapse,
-      collapsed: layoutCollapsed ? false : collapsed,
-      expand: handleExpand,
-      index: paneIndex,
-      isLast,
-      rootElement,
-    }),
-    [collapsed, handleCollapse, handleExpand, isLast, layoutCollapsed, paneIndex, rootElement],
-  )
-
-  const minWidth = useMemo(() => {
-    if (layoutCollapsed) {
-      return undefined
-    }
-
-    if (collapsed) return PANE_COLLAPSED_WIDTH
-
-    if (currentMinWidth === 0) {
-      return minWidthProp || PANE_DEFAULT_MIN_WIDTH
-    }
-
-    if (isLast) {
-      return minWidthProp || PANE_DEFAULT_MIN_WIDTH
-    }
-
-    return currentMinWidth || minWidthProp || PANE_DEFAULT_MIN_WIDTH
-  }, [collapsed, currentMinWidth, isLast, layoutCollapsed, minWidthProp])
-
-  const maxWidth = useMemo(() => {
-    if (collapsed) return PANE_COLLAPSED_WIDTH
-
-    if (layoutCollapsed && isLast) {
-      return undefined
-    }
-
-    if (isLast) {
-      if (maxWidthProp) {
-        return currentMaxWidth ?? maxWidthProp
-      }
-
-      return undefined
-    }
-
-    return currentMaxWidth ?? maxWidthProp
-  }, [collapsed, currentMaxWidth, isLast, layoutCollapsed, maxWidthProp])
-
-  const hidden = layoutCollapsed && !isLast
-
-  const divider = useMemo(
-    () =>
-      !isLast &&
-      !layoutCollapsed && (
-        <LegacyLayerProvider zOffset="paneResizer">
-          <PaneDivider disabled={collapsed || nextCollapsed} element={rootElement} />
-        </LegacyLayerProvider>
-      ),
-    [collapsed, isLast, layoutCollapsed, nextCollapsed, rootElement],
-  )
-
-  const style = useMemo(
-    () => ({
-      flex,
-      minWidth,
-      maxWidth: maxWidth === Infinity ? undefined : maxWidth,
-    }),
-    [flex, minWidth, maxWidth],
-  )
-
-  return (
-    <>
-      <LegacyLayerProvider zOffset="pane">
-        <PaneContext.Provider value={contextValue}>
-          <IsLastPaneProvider isLastPane={isLast}>
-            <Root
-              data-testid="pane"
-              data-ui="Pane"
-              tone="inherit"
-              hidden={hidden}
-              id={id}
-              overflow={layoutCollapsed ? undefined : 'hidden'}
-              {...restProps}
-              data-pane-collapsed={collapsed ? '' : undefined}
-              data-pane-index={paneIndex}
-              data-pane-selected={selected ? '' : undefined}
-              ref={setRef}
-              style={style}
-            >
-              {PANE_DEBUG && (
-                <Card padding={4} tone={expanded ? 'primary' : 'caution'}>
-                  <Code size={1}>
-                    {[
-                      `#${paneIndex}`,
-                      `collapsed=${collapsed}`,
-                      `currentMinWidth=${currentMinWidth}`,
-                      `currentMaxWidth=${currentMaxWidth}`,
-                      `flex=${flex}`,
-                      `minWidth=${minWidth}`,
-                      `maxWidth=${maxWidth}`,
-                    ].join('\n')}
-                  </Code>
-                </Card>
-              )}
-
-              <BoundaryElementProvider element={rootElement}>
-                {!hidden && (
-                  <Flex direction="column" height="fill">
-                    {children}
-                  </Flex>
-                )}
-              </BoundaryElementProvider>
-            </Root>
-          </IsLastPaneProvider>
-        </PaneContext.Provider>
-      </LegacyLayerProvider>
-
-      {divider}
-    </>
-  )
-})

package/src/structure/components/pane/PaneContent.styles.tsx

@@ -1,9 +0,0 @@
-import {Card} from '@sanity/ui'
-import {styled} from 'styled-components'
-
-export const Root = styled(Card)`
-  position: relative;
-  outline: none;
-`
-
-Root.displayName = 'PaneContent__root'

package/src/structure/components/pane/PaneContent.tsx

@@ -1,41 +0,0 @@
-import {type BoxOverflow} from '@sanity/ui'
-import {type ElementType, type ForwardedRef, forwardRef, type HTMLProps} from 'react'
-
-import {Root} from './PaneContent.styles'
-import {usePane} from './usePane'
-import {usePaneLayout} from './usePaneLayout'
-
-interface PaneContentProps {
-  as?: ElementType | keyof React.JSX.IntrinsicElements
-  overflow?: BoxOverflow
-  padding?: number | number[]
-}
-
-/**
- * @hidden
- * @internal
- */
-export const PaneContent = forwardRef(function PaneContent(
-  props: PaneContentProps & Omit<HTMLProps<HTMLDivElement>, 'as' | 'height' | 'ref'>,
-  ref: ForwardedRef<HTMLDivElement>,
-) {
-  const {as, children, overflow, padding, ...restProps} = props
-  const {collapsed} = usePane()
-  const {collapsed: layoutCollapsed} = usePaneLayout()
-
-  return (
-    <Root
-      data-testid="pane-content"
-      forwardedAs={as}
-      {...restProps}
-      flex={1}
-      hidden={collapsed}
-      overflow={layoutCollapsed ? undefined : overflow}
-      padding={padding}
-      ref={ref}
-      tone="inherit"
-    >
-      {children}
-    </Root>
-  )
-})

package/src/structure/components/pane/PaneContextMenuButton.tsx

@@ -1,68 +0,0 @@
-import {Menu, MenuDivider} from '@sanity/ui'
-import {type ReactNode, useId} from 'react'
-import {ContextMenuButton} from 'sanity'
-
-import {MenuButton, type PopoverProps} from '../../../ui-components'
-import {PaneMenuButtonItem} from './PaneMenuButtonItem'
-import {type _PaneMenuItem, type _PaneMenuNode} from './types'
-
-interface PaneContextMenuButtonProps {
-  nodes: _PaneMenuNode[]
-  actionsNodes?: ReactNode
-}
-
-const CONTEXT_MENU_POPOVER_PROPS: PopoverProps = {
-  constrainSize: true,
-  placement: 'bottom',
-  portal: true,
-}
-
-function nodesHasTone(nodes: _PaneMenuNode[], tone: NonNullable<_PaneMenuItem['tone']>): boolean {
-  return nodes.some((node) => {
-    return (
-      (node.type === 'item' && node.tone === tone) ||
-      (node.type === 'group' && nodesHasTone(node.children, tone))
-    )
-  })
-}
-
-/**
- *
- * @hidden
- * @beta This API will change. DO NOT USE IN PRODUCTION.
- */
-export function PaneContextMenuButton(props: PaneContextMenuButtonProps) {
-  const {nodes, actionsNodes} = props
-  const id = useId()
-
-  const hasCritical = nodesHasTone(nodes, 'critical')
-  const hasCaution = nodesHasTone(nodes, 'caution')
-
-  return (
-    <MenuButton
-      button={
-        <ContextMenuButton
-          // eslint-disable-next-line no-nested-ternary
-          tone={hasCritical ? 'critical' : hasCaution ? 'caution' : undefined}
-          data-testid="pane-context-menu-button"
-        />
-      }
-      id={id}
-      menu={
-        <Menu>
-          {actionsNodes && (
-            <>
-              {actionsNodes}
-              <MenuDivider />
-            </>
-          )}
-          {nodes.map((node, nodeIndex) => {
-            const isAfterGroup = nodes[nodeIndex - 1]?.type === 'group'
-            return <PaneMenuButtonItem isAfterGroup={isAfterGroup} key={node.key} node={node} />
-          })}
-        </Menu>
-      }
-      popover={CONTEXT_MENU_POPOVER_PROPS}
-    />
-  )
-}

package/src/structure/components/pane/PaneDivider.tsx

@@ -1,112 +0,0 @@
-import {Layer} from '@sanity/ui'
-import {useCallback, useState} from 'react'
-import {styled} from 'styled-components'
-
-import {usePaneLayout} from './usePaneLayout'
-
-const Root = styled(Layer)`
-  position: relative;
-  width: 1px;
-  min-width: 1px;
-
-  &:before {
-    content: '';
-    display: block;
-    position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    width: 1px;
-    background-color: var(--card-border-color);
-  }
-
-  &:not([data-disabled]) {
-    cursor: ew-resize;
-    width: 9px;
-    min-width: 9px;
-    margin: 0 -4px;
-
-    &:before {
-      left: 4px;
-    }
-
-    &:after {
-      content: '';
-      display: block;
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 9px;
-      bottom: 0;
-      background-color: var(--card-border-color);
-      opacity: 0;
-      transition: opacity 150ms;
-    }
-
-    &[data-dragging]:after,
-    &:hover:after {
-      opacity: 0.2;
-    }
-  }
-`
-
-/**
- *
- * @hidden
- * @beta This API will change. DO NOT USE IN PRODUCTION.
- */
-export function PaneDivider({
-  disabled,
-  element,
-}: {
-  disabled?: boolean
-  element: HTMLElement | null
-}) {
-  const {resize} = usePaneLayout()
-  const [dragging, setDragging] = useState(false)
-
-  const handleMouseDown = useCallback(
-    (event: any) => {
-      if (!element) return
-
-      setDragging(true)
-
-      event.preventDefault()
-
-      const startX = event.pageX
-
-      resize('start', element, 0)
-
-      const handleMouseMove = (e: MouseEvent) => {
-        e.preventDefault()
-
-        const deltaX = e.pageX - startX
-
-        resize('move', element, deltaX)
-      }
-
-      const handleMouseUp = (e: MouseEvent) => {
-        e.preventDefault()
-
-        setDragging(false)
-
-        window.removeEventListener('mousemove', handleMouseMove)
-        window.removeEventListener('mouseup', handleMouseUp)
-
-        resize('end', element, 0)
-      }
-
-      window.addEventListener('mousemove', handleMouseMove)
-      window.addEventListener('mouseup', handleMouseUp)
-    },
-    [element, resize],
-  )
-
-  return (
-    <Root
-      data-disabled={disabled ? '' : undefined}
-      data-dragging={dragging ? '' : undefined}
-      onMouseDown={handleMouseDown}
-    />
-  )
-}

package/src/structure/components/pane/PaneFooter.styles.tsx

@@ -1,11 +0,0 @@
-import {Card, Layer} from '@sanity/ui'
-import {styled} from 'styled-components'
-
-export const Root = styled(Layer)`
-  position: sticky;
-  bottom: 0;
-`
-
-export const RootCard = styled(Card)`
-  padding-bottom: env(safe-area-inset-bottom);
-`

package/src/structure/components/pane/PaneFooter.tsx

@@ -1,34 +0,0 @@
-import {Box} from '@sanity/ui'
-import {type ForwardedRef, forwardRef, type ReactNode} from 'react'
-import {LegacyLayerProvider} from 'sanity'
-
-import {Root, RootCard} from './PaneFooter.styles'
-import {usePane} from './usePane'
-
-interface PaneFooterProps {
-  children?: ReactNode
-  padding?: number | number[]
-}
-
-/**
- *
- * @hidden
- * @beta This API will change. DO NOT USE IN PRODUCTION.
- */
-export const PaneFooter = forwardRef(function PaneFooter(
-  props: PaneFooterProps,
-  ref: ForwardedRef<HTMLDivElement>,
-) {
-  const {children, padding} = props
-  const {collapsed} = usePane()
-
-  return (
-    <LegacyLayerProvider zOffset="paneFooter">
-      <Root data-testid="pane-footer" hidden={collapsed} ref={ref}>
-        <RootCard tone="inherit">
-          <Box padding={padding}>{children}</Box>
-        </RootCard>
-      </Root>
-    </LegacyLayerProvider>
-  )
-})

package/src/structure/components/pane/PaneHeader.styles.tsx

@@ -1,57 +0,0 @@
-import {Card, Flex, Layer, Text, TextSkeleton, type Theme} from '@sanity/ui'
-// eslint-disable-next-line camelcase
-import {css, styled} from 'styled-components'
-
-interface RootProps {
-  $border?: boolean
-}
-
-export const Root = styled(Layer)<RootProps>(({$border}) => {
-  return css`
-    line-height: 0;
-    position: sticky;
-    top: 0;
-
-    &:not([data-collapsed]):after {
-      content: '';
-      display: block;
-      position: absolute;
-      left: 0;
-      right: 0;
-      bottom: -1px;
-      border-bottom: 1px solid ${$border ? 'var(--card-border-color)' : 'transparent'};
-      opacity: 1;
-    }
-  `
-})
-
-export const Layout = styled(Flex)`
-  transform-origin: calc(51px / 2);
-
-  [data-collapsed] > div > & {
-    transform: rotate(90deg);
-  }
-`
-
-export const TitleCard = styled(Card)(({theme}: {theme: Theme}) => {
-  const {fg, bg} = theme.sanity.color.card.enabled
-
-  // Disable color updates on hover
-  return css`
-    background-color: ${bg};
-
-    [data-ui='Text'] {
-      color: ${fg};
-    }
-  `
-})
-
-export const TitleTextSkeleton = styled(TextSkeleton)`
-  width: 66%;
-  max-width: 175px;
-`
-
-export const TitleText = styled(Text)`
-  cursor: default;
-  outline: none;
-`