@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\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  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"],"mappings":";;AAEA,SAAS,eACP,WACA,QACA,aACA,eACA;AACA,KAAI,cAAc,YAAY,kBAAkB,SAC9C,QAAO,EAAE,KAAK,QAAQ;AAGxB,KAAI,cAAc,MAChB,QAAO,EAAE,QAAQ,aAAa;AAGhC,KAAI,cAAc,QAChB,QAAO,EAAE,KAAK,aAAa;AAG7B,QAAO,EAAE;;AAGX,SAAS,aACP,WACA,QACA,aACA,eACA,KACA;AACA,KAAI,cAAc,YAAY,kBAAkB,SAC9C,QAAO,EAAE,MAAM,QAAQ;AAGzB,KAAI,cAAc,MAChB,QAAO,GAAG,QAAQ,QAAQ,UAAU,SAAS,aAAa;AAG5D,KAAI,cAAc,QAChB,QAAO,GAAG,QAAQ,QAAQ,SAAS,UAAU,aAAa;AAG5D,QAAO,EAAE;;AAGX,MAAM,uBASF;CACF,QAAQ;CACR,MAAM;CACN,OAAO;CACP,KAAK;CACN;AAED,SAAgB,uBAAuB,EACrC,UACA,WACA,aACA,aACA,eACA,QACA,QACA,OAUC;CACD,MAAM,CAAC,MAAM,YAAY,YAAY,SAAS,MAAM,IAAI;CACxD,MAAM,aAAa;EACjB,OAAO;EACP,QAAQ;EACR,WAAW;EACX,UAAU;GACT,qBAAqB,QAAQ;EAC/B;CAED,MAAM,iBAAiB,CAAC,YAAY;AAEpC,KAAI,SAAS,OACX,QAAO;EACL,GAAG;EACH,GAAG,eAAe,WAAW,QAAQ,aAAa,cAAc;EAChE,OAAO;EACP,iBAAiB;EACjB,mBAAmB;EACnB,UAAU;EACX;AAGH,KAAI,SAAS,QACX,QAAO;EACL,GAAG;EACH,GAAG,eAAe,WAAW,QAAQ,aAAa,cAAc;EAChE,MAAM;EACN,kBAAkB;EAClB,gBAAgB;EAChB,UAAU;EACX;AAGH,KAAI,SAAS,MACX,QAAO;EACL,GAAG;EACH,GAAG,aAAa,WAAW,QAAQ,aAAa,eAAe,IAAI;EACnE,QAAQ;EACR,gBAAgB;EAChB,iBAAiB;EACjB,UAAU;EACX;AAGH,KAAI,SAAS,SACX,QAAO;EACL,GAAG;EACH,GAAG,aAAa,WAAW,QAAQ,aAAa,eAAe,IAAI;EACnE,KAAK;EACL,mBAAmB;EACnB,kBAAkB;EAClB,UAAU;EACX;AAGH,QAAO,EAAE"}