@mantine/core/cjs/utils/Floating/FloatingArrow/get-arrow-position-styles.cjs.map

React components library focused on usability, accessibility and developer experience

{"version":3,"file":"get-arrow-position-styles.cjs","names":[],"sources":["../../../../src/utils/Floating/FloatingArrow/get-arrow-position-styles.ts"],"sourcesContent":["import type { ArrowPosition, FloatingPlacement, FloatingPosition, FloatingSide } from '../types';\n\nfunction horizontalSide(\n  placement: FloatingPlacement | 'center',\n  arrowY: number | undefined,\n  arrowOffset: number,\n  arrowPosition: ArrowPosition\n) {\n  if (placement === 'center' || arrowPosition === 'center') {\n    return { top: arrowY };\n  }\n\n  if (placement === 'end') {\n    return { bottom: arrowOffset };\n  }\n\n  if (placement === 'start') {\n    return { top: arrowOffset };\n  }\n\n  return {};\n}\n\nfunction verticalSide(\n  placement: FloatingPlacement | 'center',\n  arrowX: number | undefined,\n  arrowOffset: number,\n  arrowPosition: ArrowPosition,\n  dir: 'rtl' | 'ltr'\n) {\n  if (placement === 'center' || arrowPosition === 'center') {\n    return { left: arrowX };\n  }\n\n  if (placement === 'end') {\n    return { [dir === 'ltr' ? 'right' : 'left']: arrowOffset };\n  }\n\n  if (placement === 'start') {\n    return { [dir === 'ltr' ? 'left' : 'right']: arrowOffset };\n  }\n\n  return {};\n}\n\nconst radiusByFloatingSide: Record<\n  FloatingSide,\n  keyof Pick<\n    React.CSSProperties,\n    | 'borderBottomLeftRadius'\n    | 'borderBottomRightRadius'\n    | 'borderTopLeftRadius'\n    | 'borderTopRightRadius'\n  >\n> = {\n  bottom: 'borderTopLeftRadius',\n  left: 'borderTopRightRadius',\n  right: 'borderBottomLeftRadius',\n  top: 'borderBottomRightRadius',\n};\n\nfunction getMergeArrowStyles({\n  position,\n  arrowSize,\n  dir,\n}: {\n  position: FloatingPosition;\n  arrowSize: number;\n  dir: 'rtl' | 'ltr';\n}) {\n  const [side, placement] = position.split('-') as [FloatingSide, FloatingPlacement | undefined];\n\n  if (!placement) {\n    return undefined;\n  }\n\n  const baseStyles = {\n    width: arrowSize,\n    height: arrowSize,\n    position: 'absolute' as const,\n  };\n\n  if (side === 'bottom') {\n    const isStart = placement === 'start';\n    const physicalSide = isStart\n      ? dir === 'ltr'\n        ? 'left'\n        : 'right'\n      : dir === 'ltr'\n        ? 'right'\n        : 'left';\n\n    return {\n      ...baseStyles,\n      top: -arrowSize,\n      [physicalSide]: 0,\n      clipPath:\n        isStart !== (dir === 'rtl')\n          ? 'polygon(0% 0%, 0% 100%, 100% 100%)'\n          : 'polygon(100% 0%, 0% 100%, 100% 100%)',\n    };\n  }\n\n  if (side === 'top') {\n    const isStart = placement === 'start';\n    const physicalSide = isStart\n      ? dir === 'ltr'\n        ? 'left'\n        : 'right'\n      : dir === 'ltr'\n        ? 'right'\n        : 'left';\n\n    return {\n      ...baseStyles,\n      bottom: -arrowSize,\n      [physicalSide]: 0,\n      clipPath:\n        isStart !== (dir === 'rtl')\n          ? 'polygon(0% 0%, 100% 0%, 0% 100%)'\n          : 'polygon(0% 0%, 100% 0%, 100% 100%)',\n    };\n  }\n\n  if (side === 'left') {\n    return {\n      ...baseStyles,\n      right: -arrowSize,\n      [placement === 'start' ? 'top' : 'bottom']: 0,\n      clipPath:\n        placement === 'start'\n          ? 'polygon(0% 0%, 100% 0%, 0% 100%)'\n          : 'polygon(0% 0%, 0% 100%, 100% 100%)',\n    };\n  }\n\n  if (side === 'right') {\n    return {\n      ...baseStyles,\n      left: -arrowSize,\n      [placement === 'start' ? 'top' : 'bottom']: 0,\n      clipPath:\n        placement === 'start'\n          ? 'polygon(0% 0%, 100% 0%, 100% 100%)'\n          : 'polygon(100% 0%, 0% 100%, 100% 100%)',\n    };\n  }\n\n  return undefined;\n}\n\nexport function getArrowPositionStyles({\n  position,\n  arrowSize,\n  arrowOffset,\n  arrowRadius,\n  arrowPosition,\n  arrowX,\n  arrowY,\n  dir,\n}: {\n  position: FloatingPosition;\n  arrowSize: number;\n  arrowOffset: number;\n  arrowRadius: number;\n  arrowPosition: ArrowPosition;\n  arrowX: number | undefined;\n  arrowY: number | undefined;\n  dir: 'rtl' | 'ltr';\n}) {\n  if (arrowPosition === 'merge') {\n    const mergeStyles = getMergeArrowStyles({ position, arrowSize, dir });\n    if (mergeStyles) {\n      return mergeStyles;\n    }\n  }\n\n  const [side, placement = 'center'] = position.split('-') as [FloatingSide, FloatingPlacement];\n  const baseStyles = {\n    width: arrowSize,\n    height: arrowSize,\n    transform: 'rotate(45deg)',\n    position: 'absolute',\n    [radiusByFloatingSide[side]]: arrowRadius,\n  };\n\n  const arrowPlacement = -arrowSize / 2;\n\n  if (side === 'left') {\n    return {\n      ...baseStyles,\n      ...horizontalSide(placement, arrowY, arrowOffset, arrowPosition),\n      right: arrowPlacement,\n      borderLeftColor: 'transparent',\n      borderBottomColor: 'transparent',\n      clipPath: 'polygon(100% 0, 0 0, 100% 100%)',\n    };\n  }\n\n  if (side === 'right') {\n    return {\n      ...baseStyles,\n      ...horizontalSide(placement, arrowY, arrowOffset, arrowPosition),\n      left: arrowPlacement,\n      borderRightColor: 'transparent',\n      borderTopColor: 'transparent',\n      clipPath: 'polygon(0 100%, 0 0, 100% 100%)',\n    };\n  }\n\n  if (side === 'top') {\n    return {\n      ...baseStyles,\n      ...verticalSide(placement, arrowX, arrowOffset, arrowPosition, dir),\n      bottom: arrowPlacement,\n      borderTopColor: 'transparent',\n      borderLeftColor: 'transparent',\n      clipPath: 'polygon(0 100%, 100% 100%, 100% 0)',\n    };\n  }\n\n  if (side === 'bottom') {\n    return {\n      ...baseStyles,\n      ...verticalSide(placement, arrowX, arrowOffset, arrowPosition, dir),\n      top: arrowPlacement,\n      borderBottomColor: 'transparent',\n      borderRightColor: 'transparent',\n      clipPath: 'polygon(0 100%, 0 0, 100% 0)',\n    };\n  }\n\n  return {};\n}\n\nexport function getArrowMergeDropdownStyles({\n  position,\n  dir,\n}: {\n  position: FloatingPosition;\n  dir: 'rtl' | 'ltr';\n}): React.CSSProperties | undefined {\n  const [side, placement] = position.split('-') as [FloatingSide, FloatingPlacement | undefined];\n\n  if (!placement) {\n    return undefined;\n  }\n\n  const isPhysicallyLeft =\n    (placement === 'start' && dir === 'ltr') || (placement === 'end' && dir === 'rtl');\n\n  if (side === 'bottom') {\n    return isPhysicallyLeft ? { borderTopLeftRadius: 0 } : { borderTopRightRadius: 0 };\n  }\n\n  if (side === 'top') {\n    return isPhysicallyLeft ? { borderBottomLeftRadius: 0 } : { borderBottomRightRadius: 0 };\n  }\n\n  if (side === 'left') {\n    return placement === 'start' ? { borderTopRightRadius: 0 } : { borderBottomRightRadius: 0 };\n  }\n\n  if (side === 'right') {\n    return placement === 'start' ? { borderTopLeftRadius: 0 } : { borderBottomLeftRadius: 0 };\n  }\n\n  return undefined;\n}\n"],"mappings":"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"}