@sanity/ui 2.0.0-beta.3 → 2.0.0-beta.5

package/src/core/primitives/tooltip/tooltipCard.tsx

@@ -0,0 +1,104 @@
+import {ThemeColorSchemeKey} from '@sanity/ui/theme'
+import {MotionProps, motion} from 'framer-motion'
+import React, {CSSProperties, forwardRef, memo, useMemo} from 'react'
+import styled from 'styled-components'
+import {POPOVER_MOTION_PROPS} from '../../constants'
+import {Placement, Radius} from '../../types'
+import {Arrow} from '../../utils'
+import {Card, CardProps} from '../card'
+import {
+  DEFAULT_TOOLTIP_ARROW_HEIGHT,
+  DEFAULT_TOOLTIP_ARROW_RADIUS,
+  DEFAULT_TOOLTIP_ARROW_WIDTH,
+} from './constants'
+
+const MotionCard = styled(motion(Card))``
+
+/**
+ * @internal
+ */
+export const TooltipCard = memo(
+  forwardRef(function TooltipCard(
+    props: {
+      animate?: boolean
+      arrow: boolean
+      arrowRef: React.Ref<HTMLDivElement>
+      arrowX?: number
+      arrowY?: number
+      originX?: number
+      originY?: number
+      padding?: number | number[]
+      placement?: Placement
+      radius?: Radius | Radius[]
+      scheme?: ThemeColorSchemeKey
+      shadow?: number | number[]
+    } & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'width'>,
+    ref: React.ForwardedRef<HTMLDivElement>,
+  ) {
+    const {
+      animate,
+      arrow,
+      arrowRef,
+      arrowX,
+      arrowY,
+      children,
+      originX,
+      originY,
+      padding,
+      placement,
+      radius,
+      scheme,
+      shadow,
+      style,
+      ...restProps
+    } = props
+
+    const rootStyle: CSSProperties = useMemo(
+      () => ({
+        originX,
+        originY,
+        ...style,
+      }),
+      [originX, originY, style],
+    )
+
+    const arrowStyle: CSSProperties = useMemo(
+      () => ({
+        left: arrowX !== null ? arrowX : undefined,
+        top: arrowY !== null ? arrowY : undefined,
+        right: undefined,
+        bottom: undefined,
+      }),
+      [arrowX, arrowY],
+    )
+
+    return (
+      <MotionCard
+        data-ui="Tooltip__card"
+        {...(restProps as CardProps & MotionProps)}
+        data-placement={placement}
+        padding={padding}
+        radius={radius}
+        ref={ref}
+        scheme={scheme}
+        shadow={shadow}
+        style={rootStyle}
+        {...(animate ? POPOVER_MOTION_PROPS : {})}
+      >
+        {children}
+
+        {arrow && (
+          <Arrow
+            ref={arrowRef}
+            style={arrowStyle}
+            width={DEFAULT_TOOLTIP_ARROW_WIDTH}
+            height={DEFAULT_TOOLTIP_ARROW_HEIGHT}
+            radius={DEFAULT_TOOLTIP_ARROW_RADIUS}
+          />
+        )}
+      </MotionCard>
+    )
+  }),
+)
+
+TooltipCard.displayName = 'TooltipCard'

package/src/core/{primitives/tooltip → utils/conditionalWrapper}/conditionalWrapper.tsx

@@ -1,3 +1,6 @@
+/**
+ * @internal
+ */
 export function ConditionalWrapper({
   children,
   condition,

package/src/core/utils/conditionalWrapper/index.ts

@@ -0,0 +1 @@
+export * from './conditionalWrapper'

package/src/core/utils/index.ts

@@ -1,5 +1,6 @@
 export * from './arrow'
 export * from './boundaryElement'
+export * from './conditionalWrapper'
 export * from './elementQuery'
 export * from './errorBoundary'
 export * from './layer'