@transferwise/components 46.160.0 → 46.160.2

package/build/SegmentedControl/SegmentedControl.mjs

@@ -25,6 +25,8 @@ import '@transferwise/icons';
 import 'react-intl';
 import '../common/CloseButton/CloseButton.messages.mjs';
 import { jsx, jsxs } from 'react/jsx-runtime';
+import '@transferwise/neptune-validation';
+import { useDirection } from '../common/hooks/useDirection/useDirection.mjs';
 
 const SegmentedControl = ({
   name,
@@ -35,6 +37,9 @@ const SegmentedControl = ({
 }) => {
   const isMountedRef = useRef(false);
   const [animate, setAnimate] = useState(false);
+  const {
+    isRTL
+  } = useDirection();
   const segmentsRef = useRef(null);
   if (segments.length > 3) {
     throw new Error('SegmentedControl only supports up to 3 segments. Please refer to: https://docs.wise.design/components/segmented-control');
@@ -52,8 +57,10 @@ const SegmentedControl = ({
       const {
         style
       } = segmentsRef.current;
-      style.setProperty('--segment-highlight-width', `${selectedSegmentRef.current.offsetWidth}px`);
-      style.setProperty('--segment-highlight-x', `${selectedSegmentRef.current.offsetLeft}px`);
+      const segment = selectedSegmentRef.current;
+      const inlineOffset = isRTL ? segmentsRef.current.offsetWidth - segment.offsetLeft - segment.offsetWidth : segment.offsetLeft;
+      style.setProperty('--segment-highlight-width', `${segment.offsetWidth}px`);
+      style.setProperty('--segment-highlight-x', `${inlineOffset}px`);
     }
   };
   useEffect(() => {

package/build/SegmentedControl/SegmentedControl.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.mjs","sources":["../../src/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { createRef, useEffect, useRef, useState } from 'react';\n\nimport Body from '../Body';\nimport { Typography } from '../common';\n\ntype SegmentBase = { id: string; label: string; value: string };\n\ntype Segment = SegmentBase & { controls?: never };\ntype SegmentWithControls = SegmentBase & { controls: string };\n\nexport type Segments = readonly Segment[] | readonly SegmentWithControls[];\n\ntype SegmentedControlPropsBase = {\n  name: string;\n  value: string;\n  mode: 'input' | 'view';\n  onChange: (value: string) => void;\n};\n\ntype SegmentedControlViewProps = {\n  mode: 'view';\n  segments: readonly SegmentWithControls[];\n};\n\ntype SegmentedControlInputProps = {\n  mode: 'input';\n  segments: readonly Segment[];\n};\n\nexport type SegmentedControlProps = SegmentedControlPropsBase &\n  (SegmentedControlViewProps | SegmentedControlInputProps);\n\nconst SegmentedControl = ({\n  name,\n  value,\n  mode = 'input',\n  segments,\n  onChange,\n}: SegmentedControlProps) => {\n  const isMountedRef = useRef(false);\n  const [animate, setAnimate] = useState(false);\n\n  const segmentsRef = useRef<HTMLDivElement>(null);\n\n  if (segments.length > 3) {\n    throw new Error(\n      'SegmentedControl only supports up to 3 segments. Please refer to: https://docs.wise.design/components/segmented-control',\n    );\n  }\n\n  const segmentsWithRefs = segments.map((segment) => ({\n    ...segment,\n    ref: createRef<HTMLLabelElement | HTMLButtonElement>(),\n  }));\n\n  const updateSegmentPosition = () => {\n    const selectedSegmentRef = segmentsWithRefs.find((segment) => segment.value === value)?.ref;\n\n    // We grab the active segments style object from the ref\n    // and set the css variables to the selected segments width and x position.\n    // This is so we can animate the highlight to the selected segment\n    if (selectedSegmentRef?.current && segmentsRef.current) {\n      const { style } = segmentsRef.current;\n      style.setProperty('--segment-highlight-width', `${selectedSegmentRef.current.offsetWidth}px`);\n      style.setProperty('--segment-highlight-x', `${selectedSegmentRef.current.offsetLeft}px`);\n    }\n  };\n\n  useEffect(() => {\n    if (isMountedRef.current) {\n      setAnimate(true);\n    } else {\n      isMountedRef.current = true;\n    }\n\n    updateSegmentPosition();\n\n    const handleWindowSizeChange = () => {\n      setAnimate(false);\n      updateSegmentPosition();\n    };\n\n    window.addEventListener('resize', handleWindowSizeChange);\n    return () => {\n      window.removeEventListener('resize', handleWindowSizeChange);\n    };\n\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [segmentsWithRefs, value]);\n\n  return (\n    <div\n      ref={segmentsRef}\n      data-testid=\"segmented-control\"\n      className={clsx('segmented-control', {\n        'segmented-control--input': mode === 'input',\n      })}\n    >\n      <div\n        className={clsx('segmented-control__segments', {\n          'segmented-control__segments--no-animate': !animate,\n        })}\n        role={mode !== 'input' ? 'tablist' : undefined}\n      >\n        {segmentsWithRefs.map((segment) => {\n          const onSelect = () => {\n            setAnimate(true);\n            onChange(segment.value);\n          };\n          return mode === 'input' ? (\n            <label\n              ref={segment.ref as React.MutableRefObject<HTMLLabelElement | null>}\n              key={segment.id}\n              htmlFor={segment.id}\n              className={clsx('segmented-control__segment', {\n                'segmented-control__selected-segment': value === segment.value,\n              })}\n            >\n              <input\n                type=\"radio\"\n                className=\"segmented-control__radio-input\"\n                id={segment.id}\n                name={name}\n                value={segment.value}\n                checked={value === segment.value}\n                onChange={onSelect}\n              />\n              <Body\n                className=\"segmented-control__text\"\n                as=\"span\"\n                type={\n                  value === segment.value ? Typography.BODY_DEFAULT_BOLD : Typography.BODY_DEFAULT\n                }\n              >\n                {segment.label}\n              </Body>\n            </label>\n          ) : (\n            <button\n              ref={segment.ref as React.MutableRefObject<HTMLButtonElement | null>}\n              key={segment.id}\n              type=\"button\"\n              role=\"tab\"\n              id={segment.id}\n              aria-controls={segment.controls}\n              aria-selected={value === segment.value}\n              className={clsx('segmented-control__segment', 'segmented-control__button', {\n                'segmented-control__selected-segment': value === segment.value,\n              })}\n              onClick={onSelect}\n            >\n              <Body\n                as=\"span\"\n                className=\"segmented-control__text\"\n                type={\n                  value === segment.value ? Typography.BODY_DEFAULT_BOLD : Typography.BODY_DEFAULT\n                }\n              >\n                {segment.label}\n              </Body>\n            </button>\n          );\n        })}\n      </div>\n    </div>\n  );\n};\n\nexport default SegmentedControl;\n"],"names":["SegmentedControl","name","value","mode","segments","onChange","isMountedRef","useRef","animate","setAnimate","useState","segmentsRef","length","Error","segmentsWithRefs","map","segment","ref","createRef","updateSegmentPosition","selectedSegmentRef","find","current","style","setProperty","offsetWidth","offsetLeft","useEffect","handleWindowSizeChange","window","addEventListener","removeEventListener","_jsx","className","clsx","children","role","undefined","onSelect","_jsxs","htmlFor","id","type","checked","Body","as","Typography","BODY_DEFAULT_BOLD","BODY_DEFAULT","label","controls","onClick"],"mappings":"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"}
+{"version":3,"file":"SegmentedControl.mjs","sources":["../../src/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { createRef, useEffect, useRef, useState } from 'react';\n\nimport Body from '../Body';\nimport { Typography } from '../common';\nimport { useDirection } from '../common/hooks';\n\ntype SegmentBase = { id: string; label: string; value: string };\n\ntype Segment = SegmentBase & { controls?: never };\ntype SegmentWithControls = SegmentBase & { controls: string };\n\nexport type Segments = readonly Segment[] | readonly SegmentWithControls[];\n\ntype SegmentedControlPropsBase = {\n  name: string;\n  value: string;\n  mode: 'input' | 'view';\n  onChange: (value: string) => void;\n};\n\ntype SegmentedControlViewProps = {\n  mode: 'view';\n  segments: readonly SegmentWithControls[];\n};\n\ntype SegmentedControlInputProps = {\n  mode: 'input';\n  segments: readonly Segment[];\n};\n\nexport type SegmentedControlProps = SegmentedControlPropsBase &\n  (SegmentedControlViewProps | SegmentedControlInputProps);\n\nconst SegmentedControl = ({\n  name,\n  value,\n  mode = 'input',\n  segments,\n  onChange,\n}: SegmentedControlProps) => {\n  const isMountedRef = useRef(false);\n  const [animate, setAnimate] = useState(false);\n  const { isRTL } = useDirection();\n\n  const segmentsRef = useRef<HTMLDivElement>(null);\n\n  if (segments.length > 3) {\n    throw new Error(\n      'SegmentedControl only supports up to 3 segments. Please refer to: https://docs.wise.design/components/segmented-control',\n    );\n  }\n\n  const segmentsWithRefs = segments.map((segment) => ({\n    ...segment,\n    ref: createRef<HTMLLabelElement | HTMLButtonElement>(),\n  }));\n\n  const updateSegmentPosition = () => {\n    const selectedSegmentRef = segmentsWithRefs.find((segment) => segment.value === value)?.ref;\n\n    // We grab the active segments style object from the ref\n    // and set the css variables to the selected segments width and x position.\n    // This is so we can animate the highlight to the selected segment\n    if (selectedSegmentRef?.current && segmentsRef.current) {\n      const { style } = segmentsRef.current;\n      const segment = selectedSegmentRef.current;\n      const inlineOffset = isRTL\n        ? segmentsRef.current.offsetWidth - segment.offsetLeft - segment.offsetWidth\n        : segment.offsetLeft;\n      style.setProperty('--segment-highlight-width', `${segment.offsetWidth}px`);\n      style.setProperty('--segment-highlight-x', `${inlineOffset}px`);\n    }\n  };\n\n  useEffect(() => {\n    if (isMountedRef.current) {\n      setAnimate(true);\n    } else {\n      isMountedRef.current = true;\n    }\n\n    updateSegmentPosition();\n\n    const handleWindowSizeChange = () => {\n      setAnimate(false);\n      updateSegmentPosition();\n    };\n\n    window.addEventListener('resize', handleWindowSizeChange);\n    return () => {\n      window.removeEventListener('resize', handleWindowSizeChange);\n    };\n\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [segmentsWithRefs, value]);\n\n  return (\n    <div\n      ref={segmentsRef}\n      data-testid=\"segmented-control\"\n      className={clsx('segmented-control', {\n        'segmented-control--input': mode === 'input',\n      })}\n    >\n      <div\n        className={clsx('segmented-control__segments', {\n          'segmented-control__segments--no-animate': !animate,\n        })}\n        role={mode !== 'input' ? 'tablist' : undefined}\n      >\n        {segmentsWithRefs.map((segment) => {\n          const onSelect = () => {\n            setAnimate(true);\n            onChange(segment.value);\n          };\n          return mode === 'input' ? (\n            <label\n              ref={segment.ref as React.MutableRefObject<HTMLLabelElement | null>}\n              key={segment.id}\n              htmlFor={segment.id}\n              className={clsx('segmented-control__segment', {\n                'segmented-control__selected-segment': value === segment.value,\n              })}\n            >\n              <input\n                type=\"radio\"\n                className=\"segmented-control__radio-input\"\n                id={segment.id}\n                name={name}\n                value={segment.value}\n                checked={value === segment.value}\n                onChange={onSelect}\n              />\n              <Body\n                className=\"segmented-control__text\"\n                as=\"span\"\n                type={\n                  value === segment.value ? Typography.BODY_DEFAULT_BOLD : Typography.BODY_DEFAULT\n                }\n              >\n                {segment.label}\n              </Body>\n            </label>\n          ) : (\n            <button\n              ref={segment.ref as React.MutableRefObject<HTMLButtonElement | null>}\n              key={segment.id}\n              type=\"button\"\n              role=\"tab\"\n              id={segment.id}\n              aria-controls={segment.controls}\n              aria-selected={value === segment.value}\n              className={clsx('segmented-control__segment', 'segmented-control__button', {\n                'segmented-control__selected-segment': value === segment.value,\n              })}\n              onClick={onSelect}\n            >\n              <Body\n                as=\"span\"\n                className=\"segmented-control__text\"\n                type={\n                  value === segment.value ? Typography.BODY_DEFAULT_BOLD : Typography.BODY_DEFAULT\n                }\n              >\n                {segment.label}\n              </Body>\n            </button>\n          );\n        })}\n      </div>\n    </div>\n  );\n};\n\nexport default SegmentedControl;\n"],"names":["SegmentedControl","name","value","mode","segments","onChange","isMountedRef","useRef","animate","setAnimate","useState","isRTL","useDirection","segmentsRef","length","Error","segmentsWithRefs","map","segment","ref","createRef","updateSegmentPosition","selectedSegmentRef","find","current","style","inlineOffset","offsetWidth","offsetLeft","setProperty","useEffect","handleWindowSizeChange","window","addEventListener","removeEventListener","_jsx","className","clsx","children","role","undefined","onSelect","_jsxs","htmlFor","id","type","checked","Body","as","Typography","BODY_DEFAULT_BOLD","BODY_DEFAULT","label","controls","onClick"],"mappings":"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"}

package/build/Tooltip/Tooltip.js

@@ -29,6 +29,7 @@ require('@transferwise/icons');
 require('react-intl');
 require('../common/CloseButton/CloseButton.messages.js');
 var jsxRuntime = require('react/jsx-runtime');
+var useDirection = require('../common/hooks/useDirection/useDirection.js');
 
 const Tooltip = ({
   position: position$1 = position.Position.TOP,
@@ -39,6 +40,10 @@ const Tooltip = ({
 }) => {
   const [open, setOpen] = React.useState(false);
   const arrowRef = React.useRef(null);
+  const {
+    isRTL
+  } = useDirection.useDirection();
+  const resolvedPosition = isRTL ? position$1 === 'left' ? 'right' : position$1 === 'right' ? 'left' : position$1 : position$1;
   const fallbackId = React.useId();
   const tooltipId = id ?? fallbackId;
   const {
@@ -47,7 +52,7 @@ const Tooltip = ({
     placement,
     middlewareData
   } = react.useFloating({
-    placement: position$1,
+    placement: resolvedPosition,
     middleware: [react.offset(16), react.flip({
       fallbackPlacements: [position.Position.TOP]
     }),

package/build/Tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","sources":["../../src/Tooltip/Tooltip.tsx"],"sourcesContent":["import {\n  arrow as arrowMiddleware,\n  autoUpdate,\n  flip,\n  offset,\n  useFloating,\n} from '@floating-ui/react';\nimport { clsx } from 'clsx';\nimport {\n  AriaAttributes,\n  CSSProperties,\n  PropsWithChildren,\n  ReactElement,\n  ReactNode,\n  cloneElement,\n  useId,\n  useRef,\n  useState,\n} from 'react';\n\nimport { CommonProps, Position } from '../common';\nimport {\n  PositionBottom,\n  PositionLeft,\n  PositionRight,\n  PositionTop,\n} from '../common/PropsValues/position';\n\nexport type TooltipProps = PropsWithChildren<{\n  position?: PositionTop | PositionRight | PositionBottom | PositionLeft;\n  label: ReactNode;\n  id?: string;\n}> &\n  CommonProps;\n\nconst Tooltip = ({\n  position = Position.TOP,\n  children = undefined,\n  label,\n  id,\n  className,\n}: TooltipProps) => {\n  const [open, setOpen] = useState(false);\n  const arrowRef = useRef<HTMLDivElement | null>(null);\n\n  const fallbackId = useId();\n  const tooltipId = id ?? fallbackId;\n\n  const { refs, floatingStyles, placement, middlewareData } = useFloating({\n    placement: position,\n    middleware: [\n      offset(16),\n      flip({ fallbackPlacements: [Position.TOP] }),\n      // eslint-disable-next-line react-hooks/refs -- arrowRef is passed to floating-ui middleware, legitimate API usage\n      arrowMiddleware({ element: arrowRef, padding: 8 }),\n    ],\n    whileElementsMounted: open ? autoUpdate : undefined,\n    open,\n  });\n\n  const arrowStyle: CSSProperties = {\n    ...(middlewareData.arrow?.x != null ? { left: middlewareData.arrow.x } : {}),\n    ...(middlewareData.arrow?.y != null ? { top: middlewareData.arrow.y } : {}),\n  };\n\n  return (\n    /* eslint-disable react-hooks/refs -- setReference and setFloating are callback refs from floating-ui, safe to pass during render */\n    <span\n      ref={refs.setReference}\n      className=\"tw-tooltip-container\"\n      onMouseOver={() => setOpen(true)}\n      onFocus={() => setOpen(true)}\n      onMouseOut={() => setOpen(false)}\n      onBlur={() => setOpen(false)}\n    >\n      {children\n        ? cloneElement(children as ReactElement<Pick<AriaAttributes, 'aria-describedby'>>, {\n            'aria-describedby': `${tooltipId}-tooltip`,\n          })\n        : null}\n      <div\n        ref={refs.setFloating}\n        className={clsx(\n          'np-tooltip',\n          'np-panel',\n          open ? `np-panel--open np-tooltip--open` : null,\n          className,\n        )}\n        style={floatingStyles}\n        data-popper-placement={placement}\n        aria-hidden={!open}\n        role=\"tooltip\"\n        id={`${tooltipId}-tooltip`}\n      >\n        <div className=\"np-panel__content tooltip-inner\">\n          {label}\n          <div ref={arrowRef} className={clsx('np-panel__arrow')} style={arrowStyle} />\n        </div>\n      </div>\n    </span>\n    /* eslint-enable react-hooks/refs */\n  );\n};\n\nexport default Tooltip;\n"],"names":["Tooltip","position","Position","TOP","children","undefined","label","id","className","open","setOpen","useState","arrowRef","useRef","fallbackId","useId","tooltipId","refs","floatingStyles","placement","middlewareData","useFloating","middleware","offset","flip","fallbackPlacements","arrowMiddleware","element","padding","whileElementsMounted","autoUpdate","arrowStyle","arrow","x","left","y","top","_jsxs","ref","setReference","onMouseOver","onFocus","onMouseOut","onBlur","cloneElement","_jsx","setFloating","clsx","style","role"],"mappings":"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"}
+{"version":3,"file":"Tooltip.js","sources":["../../src/Tooltip/Tooltip.tsx"],"sourcesContent":["import {\n  arrow as arrowMiddleware,\n  autoUpdate,\n  flip,\n  offset,\n  useFloating,\n} from '@floating-ui/react';\nimport { clsx } from 'clsx';\nimport {\n  AriaAttributes,\n  CSSProperties,\n  PropsWithChildren,\n  ReactElement,\n  ReactNode,\n  cloneElement,\n  useId,\n  useRef,\n  useState,\n} from 'react';\n\nimport { CommonProps, Position } from '../common';\nimport useDirection from '../common/hooks/useDirection';\nimport {\n  PositionBottom,\n  PositionLeft,\n  PositionRight,\n  PositionTop,\n} from '../common/PropsValues/position';\n\nexport type TooltipProps = PropsWithChildren<{\n  position?: PositionTop | PositionRight | PositionBottom | PositionLeft;\n  label: ReactNode;\n  id?: string;\n}> &\n  CommonProps;\n\nconst Tooltip = ({\n  position = Position.TOP,\n  children = undefined,\n  label,\n  id,\n  className,\n}: TooltipProps) => {\n  const [open, setOpen] = useState(false);\n  const arrowRef = useRef<HTMLDivElement | null>(null);\n  const { isRTL } = useDirection();\n\n  const resolvedPosition = isRTL\n    ? position === 'left'\n      ? 'right'\n      : position === 'right'\n        ? 'left'\n        : position\n    : position;\n\n  const fallbackId = useId();\n  const tooltipId = id ?? fallbackId;\n\n  const { refs, floatingStyles, placement, middlewareData } = useFloating({\n    placement: resolvedPosition,\n    middleware: [\n      offset(16),\n      flip({ fallbackPlacements: [Position.TOP] }),\n      // eslint-disable-next-line react-hooks/refs -- arrowRef is passed to floating-ui middleware, legitimate API usage\n      arrowMiddleware({ element: arrowRef, padding: 8 }),\n    ],\n    whileElementsMounted: open ? autoUpdate : undefined,\n    open,\n  });\n\n  const arrowStyle: CSSProperties = {\n    ...(middlewareData.arrow?.x != null ? { left: middlewareData.arrow.x } : {}),\n    ...(middlewareData.arrow?.y != null ? { top: middlewareData.arrow.y } : {}),\n  };\n\n  return (\n    /* eslint-disable react-hooks/refs -- setReference and setFloating are callback refs from floating-ui, safe to pass during render */\n    <span\n      ref={refs.setReference}\n      className=\"tw-tooltip-container\"\n      onMouseOver={() => setOpen(true)}\n      onFocus={() => setOpen(true)}\n      onMouseOut={() => setOpen(false)}\n      onBlur={() => setOpen(false)}\n    >\n      {children\n        ? cloneElement(children as ReactElement<Pick<AriaAttributes, 'aria-describedby'>>, {\n            'aria-describedby': `${tooltipId}-tooltip`,\n          })\n        : null}\n      <div\n        ref={refs.setFloating}\n        className={clsx(\n          'np-tooltip',\n          'np-panel',\n          open ? `np-panel--open np-tooltip--open` : null,\n          className,\n        )}\n        style={floatingStyles}\n        data-popper-placement={placement}\n        aria-hidden={!open}\n        role=\"tooltip\"\n        id={`${tooltipId}-tooltip`}\n      >\n        <div className=\"np-panel__content tooltip-inner\">\n          {label}\n          <div ref={arrowRef} className={clsx('np-panel__arrow')} style={arrowStyle} />\n        </div>\n      </div>\n    </span>\n    /* eslint-enable react-hooks/refs */\n  );\n};\n\nexport default Tooltip;\n"],"names":["Tooltip","position","Position","TOP","children","undefined","label","id","className","open","setOpen","useState","arrowRef","useRef","isRTL","useDirection","resolvedPosition","fallbackId","useId","tooltipId","refs","floatingStyles","placement","middlewareData","useFloating","middleware","offset","flip","fallbackPlacements","arrowMiddleware","element","padding","whileElementsMounted","autoUpdate","arrowStyle","arrow","x","left","y","top","_jsxs","ref","setReference","onMouseOver","onFocus","onMouseOut","onBlur","cloneElement","_jsx","setFloating","clsx","style","role"],"mappings":"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"}

package/build/Tooltip/Tooltip.mjs

@@ -25,6 +25,7 @@ import '@transferwise/icons';
 import 'react-intl';
 import '../common/CloseButton/CloseButton.messages.mjs';
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { useDirection } from '../common/hooks/useDirection/useDirection.mjs';
 
 const Tooltip = ({
   position = Position.TOP,
@@ -35,6 +36,10 @@ const Tooltip = ({
 }) => {
   const [open, setOpen] = useState(false);
   const arrowRef = useRef(null);
+  const {
+    isRTL
+  } = useDirection();
+  const resolvedPosition = isRTL ? position === 'left' ? 'right' : position === 'right' ? 'left' : position : position;
   const fallbackId = useId();
   const tooltipId = id ?? fallbackId;
   const {
@@ -43,7 +48,7 @@ const Tooltip = ({
     placement,
     middlewareData
   } = useFloating({
-    placement: position,
+    placement: resolvedPosition,
     middleware: [offset(16), flip({
       fallbackPlacements: [Position.TOP]
     }),

package/build/Tooltip/Tooltip.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.mjs","sources":["../../src/Tooltip/Tooltip.tsx"],"sourcesContent":["import {\n  arrow as arrowMiddleware,\n  autoUpdate,\n  flip,\n  offset,\n  useFloating,\n} from '@floating-ui/react';\nimport { clsx } from 'clsx';\nimport {\n  AriaAttributes,\n  CSSProperties,\n  PropsWithChildren,\n  ReactElement,\n  ReactNode,\n  cloneElement,\n  useId,\n  useRef,\n  useState,\n} from 'react';\n\nimport { CommonProps, Position } from '../common';\nimport {\n  PositionBottom,\n  PositionLeft,\n  PositionRight,\n  PositionTop,\n} from '../common/PropsValues/position';\n\nexport type TooltipProps = PropsWithChildren<{\n  position?: PositionTop | PositionRight | PositionBottom | PositionLeft;\n  label: ReactNode;\n  id?: string;\n}> &\n  CommonProps;\n\nconst Tooltip = ({\n  position = Position.TOP,\n  children = undefined,\n  label,\n  id,\n  className,\n}: TooltipProps) => {\n  const [open, setOpen] = useState(false);\n  const arrowRef = useRef<HTMLDivElement | null>(null);\n\n  const fallbackId = useId();\n  const tooltipId = id ?? fallbackId;\n\n  const { refs, floatingStyles, placement, middlewareData } = useFloating({\n    placement: position,\n    middleware: [\n      offset(16),\n      flip({ fallbackPlacements: [Position.TOP] }),\n      // eslint-disable-next-line react-hooks/refs -- arrowRef is passed to floating-ui middleware, legitimate API usage\n      arrowMiddleware({ element: arrowRef, padding: 8 }),\n    ],\n    whileElementsMounted: open ? autoUpdate : undefined,\n    open,\n  });\n\n  const arrowStyle: CSSProperties = {\n    ...(middlewareData.arrow?.x != null ? { left: middlewareData.arrow.x } : {}),\n    ...(middlewareData.arrow?.y != null ? { top: middlewareData.arrow.y } : {}),\n  };\n\n  return (\n    /* eslint-disable react-hooks/refs -- setReference and setFloating are callback refs from floating-ui, safe to pass during render */\n    <span\n      ref={refs.setReference}\n      className=\"tw-tooltip-container\"\n      onMouseOver={() => setOpen(true)}\n      onFocus={() => setOpen(true)}\n      onMouseOut={() => setOpen(false)}\n      onBlur={() => setOpen(false)}\n    >\n      {children\n        ? cloneElement(children as ReactElement<Pick<AriaAttributes, 'aria-describedby'>>, {\n            'aria-describedby': `${tooltipId}-tooltip`,\n          })\n        : null}\n      <div\n        ref={refs.setFloating}\n        className={clsx(\n          'np-tooltip',\n          'np-panel',\n          open ? `np-panel--open np-tooltip--open` : null,\n          className,\n        )}\n        style={floatingStyles}\n        data-popper-placement={placement}\n        aria-hidden={!open}\n        role=\"tooltip\"\n        id={`${tooltipId}-tooltip`}\n      >\n        <div className=\"np-panel__content tooltip-inner\">\n          {label}\n          <div ref={arrowRef} className={clsx('np-panel__arrow')} style={arrowStyle} />\n        </div>\n      </div>\n    </span>\n    /* eslint-enable react-hooks/refs */\n  );\n};\n\nexport default Tooltip;\n"],"names":["Tooltip","position","Position","TOP","children","undefined","label","id","className","open","setOpen","useState","arrowRef","useRef","fallbackId","useId","tooltipId","refs","floatingStyles","placement","middlewareData","useFloating","middleware","offset","flip","fallbackPlacements","arrowMiddleware","element","padding","whileElementsMounted","autoUpdate","arrowStyle","arrow","x","left","y","top","_jsxs","ref","setReference","onMouseOver","onFocus","onMouseOut","onBlur","cloneElement","_jsx","setFloating","clsx","style","role"],"mappings":"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"}
+{"version":3,"file":"Tooltip.mjs","sources":["../../src/Tooltip/Tooltip.tsx"],"sourcesContent":["import {\n  arrow as arrowMiddleware,\n  autoUpdate,\n  flip,\n  offset,\n  useFloating,\n} from '@floating-ui/react';\nimport { clsx } from 'clsx';\nimport {\n  AriaAttributes,\n  CSSProperties,\n  PropsWithChildren,\n  ReactElement,\n  ReactNode,\n  cloneElement,\n  useId,\n  useRef,\n  useState,\n} from 'react';\n\nimport { CommonProps, Position } from '../common';\nimport useDirection from '../common/hooks/useDirection';\nimport {\n  PositionBottom,\n  PositionLeft,\n  PositionRight,\n  PositionTop,\n} from '../common/PropsValues/position';\n\nexport type TooltipProps = PropsWithChildren<{\n  position?: PositionTop | PositionRight | PositionBottom | PositionLeft;\n  label: ReactNode;\n  id?: string;\n}> &\n  CommonProps;\n\nconst Tooltip = ({\n  position = Position.TOP,\n  children = undefined,\n  label,\n  id,\n  className,\n}: TooltipProps) => {\n  const [open, setOpen] = useState(false);\n  const arrowRef = useRef<HTMLDivElement | null>(null);\n  const { isRTL } = useDirection();\n\n  const resolvedPosition = isRTL\n    ? position === 'left'\n      ? 'right'\n      : position === 'right'\n        ? 'left'\n        : position\n    : position;\n\n  const fallbackId = useId();\n  const tooltipId = id ?? fallbackId;\n\n  const { refs, floatingStyles, placement, middlewareData } = useFloating({\n    placement: resolvedPosition,\n    middleware: [\n      offset(16),\n      flip({ fallbackPlacements: [Position.TOP] }),\n      // eslint-disable-next-line react-hooks/refs -- arrowRef is passed to floating-ui middleware, legitimate API usage\n      arrowMiddleware({ element: arrowRef, padding: 8 }),\n    ],\n    whileElementsMounted: open ? autoUpdate : undefined,\n    open,\n  });\n\n  const arrowStyle: CSSProperties = {\n    ...(middlewareData.arrow?.x != null ? { left: middlewareData.arrow.x } : {}),\n    ...(middlewareData.arrow?.y != null ? { top: middlewareData.arrow.y } : {}),\n  };\n\n  return (\n    /* eslint-disable react-hooks/refs -- setReference and setFloating are callback refs from floating-ui, safe to pass during render */\n    <span\n      ref={refs.setReference}\n      className=\"tw-tooltip-container\"\n      onMouseOver={() => setOpen(true)}\n      onFocus={() => setOpen(true)}\n      onMouseOut={() => setOpen(false)}\n      onBlur={() => setOpen(false)}\n    >\n      {children\n        ? cloneElement(children as ReactElement<Pick<AriaAttributes, 'aria-describedby'>>, {\n            'aria-describedby': `${tooltipId}-tooltip`,\n          })\n        : null}\n      <div\n        ref={refs.setFloating}\n        className={clsx(\n          'np-tooltip',\n          'np-panel',\n          open ? `np-panel--open np-tooltip--open` : null,\n          className,\n        )}\n        style={floatingStyles}\n        data-popper-placement={placement}\n        aria-hidden={!open}\n        role=\"tooltip\"\n        id={`${tooltipId}-tooltip`}\n      >\n        <div className=\"np-panel__content tooltip-inner\">\n          {label}\n          <div ref={arrowRef} className={clsx('np-panel__arrow')} style={arrowStyle} />\n        </div>\n      </div>\n    </span>\n    /* eslint-enable react-hooks/refs */\n  );\n};\n\nexport default Tooltip;\n"],"names":["Tooltip","position","Position","TOP","children","undefined","label","id","className","open","setOpen","useState","arrowRef","useRef","isRTL","useDirection","resolvedPosition","fallbackId","useId","tooltipId","refs","floatingStyles","placement","middlewareData","useFloating","middleware","offset","flip","fallbackPlacements","arrowMiddleware","element","padding","whileElementsMounted","autoUpdate","arrowStyle","arrow","x","left","y","top","_jsxs","ref","setReference","onMouseOver","onFocus","onMouseOut","onBlur","cloneElement","_jsx","setFloating","clsx","style","role"],"mappings":"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"}

package/build/common/Panel/Panel.js

@@ -5,6 +5,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var react = require('@floating-ui/react');
 var clsx = require('clsx');
 var React = require('react');
+var OverlayIdProvider = require('../../Provider/overlay/OverlayIdProvider.js');
+var Dimmer = require('../../Dimmer/Dimmer.js');
+var useDirection = require('../hooks/useDirection/useDirection.js');
 require('../theme.js');
 require('../direction.js');
 require('@transferwise/neptune-tokens');
@@ -29,27 +32,8 @@ require('@transferwise/icons');
 require('react-intl');
 require('../CloseButton/CloseButton.messages.js');
 var jsxRuntime = require('react/jsx-runtime');
-var Dimmer = require('../../Dimmer/Dimmer.js');
-var OverlayIdProvider = require('../../Provider/overlay/OverlayIdProvider.js');
+var Panel_positionUtils = require('./Panel.positionUtils.js');
 
-const POPOVER_OFFSET = 16;
-// By default the flip positioning explores only the opposite alternative. So if left is passed and there's no enough space
-// the right one gets chosen. If there's no space on both sides popover goes back to the initially chosen one left.
-// This mapping forces popover to try the four available positions before going back to the initial chosen one.
-const fallbackPlacements = {
-  [position.Position.TOP]: [position.Position.BOTTOM, position.Position.RIGHT, position.Position.LEFT],
-  [position.Position.BOTTOM]: [position.Position.TOP, position.Position.RIGHT, position.Position.LEFT],
-  [position.Position.LEFT]: [position.Position.RIGHT, position.Position.TOP, position.Position.BOTTOM],
-  [position.Position.RIGHT]: [position.Position.LEFT, position.Position.TOP, position.Position.BOTTOM],
-  'top-start': ['bottom-start', 'top-end', 'bottom-end'],
-  'top-end': ['bottom-end', 'top-start', 'bottom-start'],
-  'bottom-start': ['top-start', 'bottom-end', 'top-end'],
-  'bottom-end': ['top-end', 'bottom-start', 'top-start'],
-  'left-start': ['right-start', 'left-end', 'right-end'],
-  'left-end': ['right-end', 'left-start', 'right-start'],
-  'right-start': ['left-start', 'right-end', 'left-end'],
-  'right-end': ['left-end', 'right-start', 'left-start']
-};
 const Panel = /*#__PURE__*/React.forwardRef(function Panel({
   arrow = false,
   flip = true,
@@ -64,14 +48,18 @@ const Panel = /*#__PURE__*/React.forwardRef(function Panel({
   ...rest
 }, reference) {
   const arrowRef = React.useRef(null);
-  const floatingPlacement = position.positionToPlacement(position$1);
+  const {
+    isRTL
+  } = useDirection.useDirection();
+  const resolvedPosition = isRTL ? Panel_positionUtils.mirrorPositionForRtl(position$1) : position$1;
+  const floatingPlacement = Panel_positionUtils.positionToPlacement(resolvedPosition);
   const middleware = [];
   if (arrow) {
-    middleware.push(react.offset(POPOVER_OFFSET));
+    middleware.push(react.offset(Panel_positionUtils.POPOVER_OFFSET));
   }
-  if (flip && fallbackPlacements[floatingPlacement]) {
+  if (flip && Panel_positionUtils.fallbackPlacements[floatingPlacement]) {
     middleware.push(react.flip({
-      fallbackPlacements: fallbackPlacements[floatingPlacement]
+      fallbackPlacements: Panel_positionUtils.fallbackPlacements[floatingPlacement]
     }));
   }
   if (altAxis) {
@@ -85,7 +73,7 @@ const Panel = /*#__PURE__*/React.forwardRef(function Panel({
   }
   if (considerHeight) {
     middleware.push(react.size({
-      padding: POPOVER_OFFSET,
+      padding: Panel_positionUtils.POPOVER_OFFSET,
       apply: ({
         elements,
         availableHeight

package/build/common/Panel/Panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"Panel.js","sources":["../../../src/common/Panel/Panel.tsx"],"sourcesContent":["import {\n  arrow as arrowMiddleware,\n  autoUpdate,\n  flip as flipMiddleware,\n  offset,\n  type Placement,\n  shift,\n  size as sizeMiddleware,\n  useFloating,\n} from '@floating-ui/react';\nimport { clsx } from 'clsx';\nimport {\n  CSSProperties,\n  HTMLAttributes,\n  PropsWithChildren,\n  RefObject,\n  SyntheticEvent,\n  forwardRef,\n  useContext,\n  useRef,\n} from 'react';\n\nimport { Position, type FloatingPlacement, positionToPlacement } from '..';\nimport Dimmer from '../../Dimmer';\nimport { OverlayIdContext } from '../../Provider/overlay/OverlayIdProvider';\n\nconst POPOVER_OFFSET = 16;\n\n// By default the flip positioning explores only the opposite alternative. So if left is passed and there's no enough space\n// the right one gets chosen. If there's no space on both sides popover goes back to the initially chosen one left.\n// This mapping forces popover to try the four available positions before going back to the initial chosen one.\nconst fallbackPlacements: Record<Placement, Placement[]> = {\n  [Position.TOP]: [Position.BOTTOM, Position.RIGHT, Position.LEFT],\n  [Position.BOTTOM]: [Position.TOP, Position.RIGHT, Position.LEFT],\n  [Position.LEFT]: [Position.RIGHT, Position.TOP, Position.BOTTOM],\n  [Position.RIGHT]: [Position.LEFT, Position.TOP, Position.BOTTOM],\n  'top-start': ['bottom-start', 'top-end', 'bottom-end'],\n  'top-end': ['bottom-end', 'top-start', 'bottom-start'],\n  'bottom-start': ['top-start', 'bottom-end', 'top-end'],\n  'bottom-end': ['top-end', 'bottom-start', 'top-start'],\n  'left-start': ['right-start', 'left-end', 'right-end'],\n  'left-end': ['right-end', 'left-start', 'right-start'],\n  'right-start': ['left-start', 'right-end', 'left-end'],\n  'right-end': ['left-end', 'right-start', 'left-start'],\n};\n\nexport type PanelProps = PropsWithChildren<{\n  arrow?: boolean;\n  flip?: boolean;\n  altAxis?: boolean;\n  open?: boolean;\n  onClose?: (event: Event | SyntheticEvent) => void;\n  position?: FloatingPlacement;\n  anchorRef: RefObject<Element | null>;\n  anchorWidth?: boolean;\n  considerHeight?: boolean;\n}> &\n  HTMLAttributes<HTMLDivElement>;\n\nconst Panel = forwardRef<HTMLDivElement, PanelProps>(function Panel(\n  {\n    arrow = false,\n    flip = true,\n    altAxis = false,\n    children,\n    open = false,\n    onClose,\n    position = Position.BOTTOM,\n    anchorRef,\n    anchorWidth = false,\n    considerHeight = false,\n    ...rest\n  }: PanelProps,\n  reference,\n) {\n  const arrowRef = useRef<HTMLDivElement | null>(null);\n  const floatingPlacement = positionToPlacement(position);\n\n  const middleware = [];\n\n  if (arrow) {\n    middleware.push(offset(POPOVER_OFFSET));\n  }\n\n  if (flip && fallbackPlacements[floatingPlacement]) {\n    middleware.push(\n      flipMiddleware({\n        fallbackPlacements: fallbackPlacements[floatingPlacement],\n      }),\n    );\n  }\n\n  if (altAxis) {\n    middleware.push(shift());\n  }\n\n  if (arrow) {\n    middleware.push(arrowMiddleware({ element: arrowRef, padding: 8 }));\n  }\n\n  if (considerHeight) {\n    middleware.push(\n      sizeMiddleware({\n        padding: POPOVER_OFFSET,\n        apply: ({ elements, availableHeight }) => {\n          elements.floating.style.setProperty(\n            '--np-panel-available-height',\n            `${availableHeight}px`,\n          );\n        },\n      }),\n    );\n  }\n\n  const { refs, floatingStyles, placement, middlewareData } = useFloating({\n    placement: floatingPlacement,\n    middleware,\n    elements: {\n      reference: anchorRef.current,\n    },\n    whileElementsMounted: open ? autoUpdate : undefined,\n  });\n\n  const arrowStyle: CSSProperties = {\n    ...(middlewareData.arrow?.x != null ? { left: middlewareData.arrow.x } : {}),\n    ...(middlewareData.arrow?.y != null ? { top: middlewareData.arrow.y } : {}),\n  };\n\n  const contentStyle: CSSProperties = {\n    ...(anchorWidth ? { width: anchorRef.current?.clientWidth } : undefined),\n  };\n\n  const overlayId = useContext(OverlayIdContext);\n\n  return (\n    <Dimmer open={open} transparent fadeContentOnEnter fadeContentOnExit onClose={onClose}>\n      <div\n        id={overlayId}\n        {...rest}\n        ref={refs.setFloating}\n        role=\"dialog\"\n        style={floatingStyles}\n        data-popper-placement={placement}\n        className={clsx('np-panel', { 'np-panel--open': open }, rest.className)}\n      >\n        <div ref={reference} style={contentStyle} className={clsx('np-panel__content')}>\n          {children}\n          {/* Arrow has to stay inside content to get the same animations as the \"dialog\" and to get hidden when panel is closed. */}\n          {arrow && <div ref={arrowRef} className={clsx('np-panel__arrow')} style={arrowStyle} />}\n        </div>\n      </div>\n    </Dimmer>\n  );\n});\n\nexport default Panel;\n"],"names":["POPOVER_OFFSET","fallbackPlacements","Position","TOP","BOTTOM","RIGHT","LEFT","Panel","forwardRef","arrow","flip","altAxis","children","open","onClose","position","anchorRef","anchorWidth","considerHeight","rest","reference","arrowRef","useRef","floatingPlacement","positionToPlacement","middleware","push","offset","flipMiddleware","shift","arrowMiddleware","element","padding","sizeMiddleware","apply","elements","availableHeight","floating","style","setProperty","refs","floatingStyles","placement","middlewareData","useFloating","current","whileElementsMounted","autoUpdate","undefined","arrowStyle","x","left","y","top","contentStyle","width","clientWidth","overlayId","useContext","OverlayIdContext","_jsx","Dimmer","transparent","fadeContentOnEnter","fadeContentOnExit","id","ref","setFloating","role","className","clsx","_jsxs"],"mappings":"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"}
+{"version":3,"file":"Panel.js","sources":["../../../src/common/Panel/Panel.tsx"],"sourcesContent":["import {\n  arrow as arrowMiddleware,\n  autoUpdate,\n  flip as flipMiddleware,\n  offset,\n  shift,\n  size as sizeMiddleware,\n  useFloating,\n} from '@floating-ui/react';\nimport { clsx } from 'clsx';\nimport {\n  CSSProperties,\n  HTMLAttributes,\n  PropsWithChildren,\n  RefObject,\n  SyntheticEvent,\n  forwardRef,\n  useContext,\n  useRef,\n} from 'react';\n\nimport { OverlayIdContext } from '../../Provider/overlay/OverlayIdProvider';\nimport Dimmer from '../../Dimmer';\nimport useDirection from '../hooks/useDirection';\nimport { Position } from '..';\nimport {\n  type FloatingPlacement,\n  POPOVER_OFFSET,\n  fallbackPlacements,\n  mirrorPositionForRtl,\n  positionToPlacement,\n} from './Panel.positionUtils';\n\nexport type PanelProps = PropsWithChildren<{\n  arrow?: boolean;\n  flip?: boolean;\n  altAxis?: boolean;\n  open?: boolean;\n  onClose?: (event: Event | SyntheticEvent) => void;\n  position?: FloatingPlacement;\n  anchorRef: RefObject<Element | null>;\n  anchorWidth?: boolean;\n  considerHeight?: boolean;\n}> &\n  HTMLAttributes<HTMLDivElement>;\n\nconst Panel = forwardRef<HTMLDivElement, PanelProps>(function Panel(\n  {\n    arrow = false,\n    flip = true,\n    altAxis = false,\n    children,\n    open = false,\n    onClose,\n    position = Position.BOTTOM,\n    anchorRef,\n    anchorWidth = false,\n    considerHeight = false,\n    ...rest\n  }: PanelProps,\n  reference,\n) {\n  const arrowRef = useRef<HTMLDivElement | null>(null);\n  const { isRTL } = useDirection();\n  const resolvedPosition = isRTL ? mirrorPositionForRtl(position) : position;\n  const floatingPlacement = positionToPlacement(resolvedPosition);\n\n  const middleware = [];\n\n  if (arrow) {\n    middleware.push(offset(POPOVER_OFFSET));\n  }\n\n  if (flip && fallbackPlacements[floatingPlacement]) {\n    middleware.push(\n      flipMiddleware({\n        fallbackPlacements: fallbackPlacements[floatingPlacement],\n      }),\n    );\n  }\n\n  if (altAxis) {\n    middleware.push(shift());\n  }\n\n  if (arrow) {\n    middleware.push(arrowMiddleware({ element: arrowRef, padding: 8 }));\n  }\n\n  if (considerHeight) {\n    middleware.push(\n      sizeMiddleware({\n        padding: POPOVER_OFFSET,\n        apply: ({ elements, availableHeight }) => {\n          elements.floating.style.setProperty(\n            '--np-panel-available-height',\n            `${availableHeight}px`,\n          );\n        },\n      }),\n    );\n  }\n\n  const { refs, floatingStyles, placement, middlewareData } = useFloating({\n    placement: floatingPlacement,\n    middleware,\n    elements: {\n      reference: anchorRef.current,\n    },\n    whileElementsMounted: open ? autoUpdate : undefined,\n  });\n\n  const arrowStyle: CSSProperties = {\n    ...(middlewareData.arrow?.x != null ? { left: middlewareData.arrow.x } : {}),\n    ...(middlewareData.arrow?.y != null ? { top: middlewareData.arrow.y } : {}),\n  };\n\n  const contentStyle: CSSProperties = {\n    ...(anchorWidth ? { width: anchorRef.current?.clientWidth } : undefined),\n  };\n\n  const overlayId = useContext(OverlayIdContext);\n\n  return (\n    <Dimmer open={open} transparent fadeContentOnEnter fadeContentOnExit onClose={onClose}>\n      <div\n        id={overlayId}\n        {...rest}\n        ref={refs.setFloating}\n        role=\"dialog\"\n        style={floatingStyles}\n        data-popper-placement={placement}\n        className={clsx('np-panel', { 'np-panel--open': open }, rest.className)}\n      >\n        <div ref={reference} style={contentStyle} className={clsx('np-panel__content')}>\n          {children}\n          {/* Arrow has to stay inside content to get the same animations as the \"dialog\" and to get hidden when panel is closed. */}\n          {arrow && <div ref={arrowRef} className={clsx('np-panel__arrow')} style={arrowStyle} />}\n        </div>\n      </div>\n    </Dimmer>\n  );\n});\n\nexport default Panel;\n"],"names":["Panel","forwardRef","arrow","flip","altAxis","children","open","onClose","position","Position","BOTTOM","anchorRef","anchorWidth","considerHeight","rest","reference","arrowRef","useRef","isRTL","useDirection","resolvedPosition","mirrorPositionForRtl","floatingPlacement","positionToPlacement","middleware","push","offset","POPOVER_OFFSET","fallbackPlacements","flipMiddleware","shift","arrowMiddleware","element","padding","sizeMiddleware","apply","elements","availableHeight","floating","style","setProperty","refs","floatingStyles","placement","middlewareData","useFloating","current","whileElementsMounted","autoUpdate","undefined","arrowStyle","x","left","y","top","contentStyle","width","clientWidth","overlayId","useContext","OverlayIdContext","_jsx","Dimmer","transparent","fadeContentOnEnter","fadeContentOnExit","id","ref","setFloating","role","className","clsx","_jsxs"],"mappings":"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"}

package/build/common/Panel/Panel.mjs

@@ -1,6 +1,9 @@
 import { offset, flip, shift, arrow, size, useFloating, autoUpdate } from '@floating-ui/react';
 import { clsx } from 'clsx';
 import { forwardRef, useRef, useContext } from 'react';
+import { OverlayIdContext } from '../../Provider/overlay/OverlayIdProvider.mjs';
+import Dimmer from '../../Dimmer/Dimmer.mjs';
+import { useDirection } from '../hooks/useDirection/useDirection.mjs';
 import '../theme.mjs';
 import '../direction.mjs';
 import '@transferwise/neptune-tokens';
@@ -11,7 +14,7 @@ import '../PropsValues/width.mjs';
 import '../PropsValues/type.mjs';
 import '../PropsValues/dateMode.mjs';
 import '../PropsValues/monthFormat.mjs';
-import { Position, positionToPlacement } from '../PropsValues/position.mjs';
+import { Position } from '../PropsValues/position.mjs';
 import '../PropsValues/layouts.mjs';
 import '../PropsValues/status.mjs';
 import '../PropsValues/sentiment.mjs';
@@ -25,27 +28,8 @@ import '@transferwise/icons';
 import 'react-intl';
 import '../CloseButton/CloseButton.messages.mjs';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import Dimmer from '../../Dimmer/Dimmer.mjs';
-import { OverlayIdContext } from '../../Provider/overlay/OverlayIdProvider.mjs';
+import { POPOVER_OFFSET, fallbackPlacements, positionToPlacement, mirrorPositionForRtl } from './Panel.positionUtils.mjs';
 
-const POPOVER_OFFSET = 16;
-// By default the flip positioning explores only the opposite alternative. So if left is passed and there's no enough space
-// the right one gets chosen. If there's no space on both sides popover goes back to the initially chosen one left.
-// This mapping forces popover to try the four available positions before going back to the initial chosen one.
-const fallbackPlacements = {
-  [Position.TOP]: [Position.BOTTOM, Position.RIGHT, Position.LEFT],
-  [Position.BOTTOM]: [Position.TOP, Position.RIGHT, Position.LEFT],
-  [Position.LEFT]: [Position.RIGHT, Position.TOP, Position.BOTTOM],
-  [Position.RIGHT]: [Position.LEFT, Position.TOP, Position.BOTTOM],
-  'top-start': ['bottom-start', 'top-end', 'bottom-end'],
-  'top-end': ['bottom-end', 'top-start', 'bottom-start'],
-  'bottom-start': ['top-start', 'bottom-end', 'top-end'],
-  'bottom-end': ['top-end', 'bottom-start', 'top-start'],
-  'left-start': ['right-start', 'left-end', 'right-end'],
-  'left-end': ['right-end', 'left-start', 'right-start'],
-  'right-start': ['left-start', 'right-end', 'left-end'],
-  'right-end': ['left-end', 'right-start', 'left-start']
-};
 const Panel = /*#__PURE__*/forwardRef(function Panel({
   arrow: arrow$1 = false,
   flip: flip$1 = true,
@@ -60,7 +44,11 @@ const Panel = /*#__PURE__*/forwardRef(function Panel({
   ...rest
 }, reference) {
   const arrowRef = useRef(null);
-  const floatingPlacement = positionToPlacement(position);
+  const {
+    isRTL
+  } = useDirection();
+  const resolvedPosition = isRTL ? mirrorPositionForRtl(position) : position;
+  const floatingPlacement = positionToPlacement(resolvedPosition);
   const middleware = [];
   if (arrow$1) {
     middleware.push(offset(POPOVER_OFFSET));

package/build/common/Panel/Panel.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Panel.mjs","sources":["../../../src/common/Panel/Panel.tsx"],"sourcesContent":["import {\n  arrow as arrowMiddleware,\n  autoUpdate,\n  flip as flipMiddleware,\n  offset,\n  type Placement,\n  shift,\n  size as sizeMiddleware,\n  useFloating,\n} from '@floating-ui/react';\nimport { clsx } from 'clsx';\nimport {\n  CSSProperties,\n  HTMLAttributes,\n  PropsWithChildren,\n  RefObject,\n  SyntheticEvent,\n  forwardRef,\n  useContext,\n  useRef,\n} from 'react';\n\nimport { Position, type FloatingPlacement, positionToPlacement } from '..';\nimport Dimmer from '../../Dimmer';\nimport { OverlayIdContext } from '../../Provider/overlay/OverlayIdProvider';\n\nconst POPOVER_OFFSET = 16;\n\n// By default the flip positioning explores only the opposite alternative. So if left is passed and there's no enough space\n// the right one gets chosen. If there's no space on both sides popover goes back to the initially chosen one left.\n// This mapping forces popover to try the four available positions before going back to the initial chosen one.\nconst fallbackPlacements: Record<Placement, Placement[]> = {\n  [Position.TOP]: [Position.BOTTOM, Position.RIGHT, Position.LEFT],\n  [Position.BOTTOM]: [Position.TOP, Position.RIGHT, Position.LEFT],\n  [Position.LEFT]: [Position.RIGHT, Position.TOP, Position.BOTTOM],\n  [Position.RIGHT]: [Position.LEFT, Position.TOP, Position.BOTTOM],\n  'top-start': ['bottom-start', 'top-end', 'bottom-end'],\n  'top-end': ['bottom-end', 'top-start', 'bottom-start'],\n  'bottom-start': ['top-start', 'bottom-end', 'top-end'],\n  'bottom-end': ['top-end', 'bottom-start', 'top-start'],\n  'left-start': ['right-start', 'left-end', 'right-end'],\n  'left-end': ['right-end', 'left-start', 'right-start'],\n  'right-start': ['left-start', 'right-end', 'left-end'],\n  'right-end': ['left-end', 'right-start', 'left-start'],\n};\n\nexport type PanelProps = PropsWithChildren<{\n  arrow?: boolean;\n  flip?: boolean;\n  altAxis?: boolean;\n  open?: boolean;\n  onClose?: (event: Event | SyntheticEvent) => void;\n  position?: FloatingPlacement;\n  anchorRef: RefObject<Element | null>;\n  anchorWidth?: boolean;\n  considerHeight?: boolean;\n}> &\n  HTMLAttributes<HTMLDivElement>;\n\nconst Panel = forwardRef<HTMLDivElement, PanelProps>(function Panel(\n  {\n    arrow = false,\n    flip = true,\n    altAxis = false,\n    children,\n    open = false,\n    onClose,\n    position = Position.BOTTOM,\n    anchorRef,\n    anchorWidth = false,\n    considerHeight = false,\n    ...rest\n  }: PanelProps,\n  reference,\n) {\n  const arrowRef = useRef<HTMLDivElement | null>(null);\n  const floatingPlacement = positionToPlacement(position);\n\n  const middleware = [];\n\n  if (arrow) {\n    middleware.push(offset(POPOVER_OFFSET));\n  }\n\n  if (flip && fallbackPlacements[floatingPlacement]) {\n    middleware.push(\n      flipMiddleware({\n        fallbackPlacements: fallbackPlacements[floatingPlacement],\n      }),\n    );\n  }\n\n  if (altAxis) {\n    middleware.push(shift());\n  }\n\n  if (arrow) {\n    middleware.push(arrowMiddleware({ element: arrowRef, padding: 8 }));\n  }\n\n  if (considerHeight) {\n    middleware.push(\n      sizeMiddleware({\n        padding: POPOVER_OFFSET,\n        apply: ({ elements, availableHeight }) => {\n          elements.floating.style.setProperty(\n            '--np-panel-available-height',\n            `${availableHeight}px`,\n          );\n        },\n      }),\n    );\n  }\n\n  const { refs, floatingStyles, placement, middlewareData } = useFloating({\n    placement: floatingPlacement,\n    middleware,\n    elements: {\n      reference: anchorRef.current,\n    },\n    whileElementsMounted: open ? autoUpdate : undefined,\n  });\n\n  const arrowStyle: CSSProperties = {\n    ...(middlewareData.arrow?.x != null ? { left: middlewareData.arrow.x } : {}),\n    ...(middlewareData.arrow?.y != null ? { top: middlewareData.arrow.y } : {}),\n  };\n\n  const contentStyle: CSSProperties = {\n    ...(anchorWidth ? { width: anchorRef.current?.clientWidth } : undefined),\n  };\n\n  const overlayId = useContext(OverlayIdContext);\n\n  return (\n    <Dimmer open={open} transparent fadeContentOnEnter fadeContentOnExit onClose={onClose}>\n      <div\n        id={overlayId}\n        {...rest}\n        ref={refs.setFloating}\n        role=\"dialog\"\n        style={floatingStyles}\n        data-popper-placement={placement}\n        className={clsx('np-panel', { 'np-panel--open': open }, rest.className)}\n      >\n        <div ref={reference} style={contentStyle} className={clsx('np-panel__content')}>\n          {children}\n          {/* Arrow has to stay inside content to get the same animations as the \"dialog\" and to get hidden when panel is closed. */}\n          {arrow && <div ref={arrowRef} className={clsx('np-panel__arrow')} style={arrowStyle} />}\n        </div>\n      </div>\n    </Dimmer>\n  );\n});\n\nexport default Panel;\n"],"names":["POPOVER_OFFSET","fallbackPlacements","Position","TOP","BOTTOM","RIGHT","LEFT","Panel","forwardRef","arrow","flip","altAxis","children","open","onClose","position","anchorRef","anchorWidth","considerHeight","rest","reference","arrowRef","useRef","floatingPlacement","positionToPlacement","middleware","push","offset","flipMiddleware","shift","arrowMiddleware","element","padding","sizeMiddleware","apply","elements","availableHeight","floating","style","setProperty","refs","floatingStyles","placement","middlewareData","useFloating","current","whileElementsMounted","autoUpdate","undefined","arrowStyle","x","left","y","top","contentStyle","width","clientWidth","overlayId","useContext","OverlayIdContext","_jsx","Dimmer","transparent","fadeContentOnEnter","fadeContentOnExit","id","ref","setFloating","role","className","clsx","_jsxs"],"mappings":"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"}
+{"version":3,"file":"Panel.mjs","sources":["../../../src/common/Panel/Panel.tsx"],"sourcesContent":["import {\n  arrow as arrowMiddleware,\n  autoUpdate,\n  flip as flipMiddleware,\n  offset,\n  shift,\n  size as sizeMiddleware,\n  useFloating,\n} from '@floating-ui/react';\nimport { clsx } from 'clsx';\nimport {\n  CSSProperties,\n  HTMLAttributes,\n  PropsWithChildren,\n  RefObject,\n  SyntheticEvent,\n  forwardRef,\n  useContext,\n  useRef,\n} from 'react';\n\nimport { OverlayIdContext } from '../../Provider/overlay/OverlayIdProvider';\nimport Dimmer from '../../Dimmer';\nimport useDirection from '../hooks/useDirection';\nimport { Position } from '..';\nimport {\n  type FloatingPlacement,\n  POPOVER_OFFSET,\n  fallbackPlacements,\n  mirrorPositionForRtl,\n  positionToPlacement,\n} from './Panel.positionUtils';\n\nexport type PanelProps = PropsWithChildren<{\n  arrow?: boolean;\n  flip?: boolean;\n  altAxis?: boolean;\n  open?: boolean;\n  onClose?: (event: Event | SyntheticEvent) => void;\n  position?: FloatingPlacement;\n  anchorRef: RefObject<Element | null>;\n  anchorWidth?: boolean;\n  considerHeight?: boolean;\n}> &\n  HTMLAttributes<HTMLDivElement>;\n\nconst Panel = forwardRef<HTMLDivElement, PanelProps>(function Panel(\n  {\n    arrow = false,\n    flip = true,\n    altAxis = false,\n    children,\n    open = false,\n    onClose,\n    position = Position.BOTTOM,\n    anchorRef,\n    anchorWidth = false,\n    considerHeight = false,\n    ...rest\n  }: PanelProps,\n  reference,\n) {\n  const arrowRef = useRef<HTMLDivElement | null>(null);\n  const { isRTL } = useDirection();\n  const resolvedPosition = isRTL ? mirrorPositionForRtl(position) : position;\n  const floatingPlacement = positionToPlacement(resolvedPosition);\n\n  const middleware = [];\n\n  if (arrow) {\n    middleware.push(offset(POPOVER_OFFSET));\n  }\n\n  if (flip && fallbackPlacements[floatingPlacement]) {\n    middleware.push(\n      flipMiddleware({\n        fallbackPlacements: fallbackPlacements[floatingPlacement],\n      }),\n    );\n  }\n\n  if (altAxis) {\n    middleware.push(shift());\n  }\n\n  if (arrow) {\n    middleware.push(arrowMiddleware({ element: arrowRef, padding: 8 }));\n  }\n\n  if (considerHeight) {\n    middleware.push(\n      sizeMiddleware({\n        padding: POPOVER_OFFSET,\n        apply: ({ elements, availableHeight }) => {\n          elements.floating.style.setProperty(\n            '--np-panel-available-height',\n            `${availableHeight}px`,\n          );\n        },\n      }),\n    );\n  }\n\n  const { refs, floatingStyles, placement, middlewareData } = useFloating({\n    placement: floatingPlacement,\n    middleware,\n    elements: {\n      reference: anchorRef.current,\n    },\n    whileElementsMounted: open ? autoUpdate : undefined,\n  });\n\n  const arrowStyle: CSSProperties = {\n    ...(middlewareData.arrow?.x != null ? { left: middlewareData.arrow.x } : {}),\n    ...(middlewareData.arrow?.y != null ? { top: middlewareData.arrow.y } : {}),\n  };\n\n  const contentStyle: CSSProperties = {\n    ...(anchorWidth ? { width: anchorRef.current?.clientWidth } : undefined),\n  };\n\n  const overlayId = useContext(OverlayIdContext);\n\n  return (\n    <Dimmer open={open} transparent fadeContentOnEnter fadeContentOnExit onClose={onClose}>\n      <div\n        id={overlayId}\n        {...rest}\n        ref={refs.setFloating}\n        role=\"dialog\"\n        style={floatingStyles}\n        data-popper-placement={placement}\n        className={clsx('np-panel', { 'np-panel--open': open }, rest.className)}\n      >\n        <div ref={reference} style={contentStyle} className={clsx('np-panel__content')}>\n          {children}\n          {/* Arrow has to stay inside content to get the same animations as the \"dialog\" and to get hidden when panel is closed. */}\n          {arrow && <div ref={arrowRef} className={clsx('np-panel__arrow')} style={arrowStyle} />}\n        </div>\n      </div>\n    </Dimmer>\n  );\n});\n\nexport default Panel;\n"],"names":["Panel","forwardRef","arrow","flip","altAxis","children","open","onClose","position","Position","BOTTOM","anchorRef","anchorWidth","considerHeight","rest","reference","arrowRef","useRef","isRTL","useDirection","resolvedPosition","mirrorPositionForRtl","floatingPlacement","positionToPlacement","middleware","push","offset","POPOVER_OFFSET","fallbackPlacements","flipMiddleware","shift","arrowMiddleware","element","padding","sizeMiddleware","apply","elements","availableHeight","floating","style","setProperty","refs","floatingStyles","placement","middlewareData","useFloating","current","whileElementsMounted","autoUpdate","undefined","arrowStyle","x","left","y","top","contentStyle","width","clientWidth","overlayId","useContext","OverlayIdContext","_jsx","Dimmer","transparent","fadeContentOnEnter","fadeContentOnExit","id","ref","setFloating","role","className","clsx","_jsxs"],"mappings":"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"}

package/build/common/Panel/Panel.positionUtils.js

@@ -0,0 +1,68 @@
+'use strict';
+
+const POPOVER_OFFSET = 16;
+// By default the flip positioning explores only the opposite alternative. So if left is passed and there's no enough space
+// the right one gets chosen. If there's no space on both sides popover goes back to the initially chosen one left.
+// This mapping forces popover to try the four available positions before going back to the initial chosen one.
+const fallbackPlacements = {
+  top: ['bottom', 'right', 'left'],
+  bottom: ['top', 'right', 'left'],
+  left: ['right', 'top', 'bottom'],
+  right: ['left', 'top', 'bottom'],
+  'top-start': ['bottom-start', 'top-end', 'bottom-end'],
+  'top-end': ['bottom-end', 'top-start', 'bottom-start'],
+  'bottom-start': ['top-start', 'bottom-end', 'top-end'],
+  'bottom-end': ['top-end', 'bottom-start', 'top-start'],
+  'left-start': ['right-start', 'left-end', 'right-end'],
+  'left-end': ['right-end', 'left-start', 'right-start'],
+  'right-start': ['left-start', 'right-end', 'left-end'],
+  'right-end': ['left-end', 'right-start', 'left-start']
+};
+const positionToPlacement = position => {
+  switch (position) {
+    case 'top-left':
+      return 'top-start';
+    case 'top-right':
+      return 'top-end';
+    case 'bottom-left':
+      return 'bottom-start';
+    case 'bottom-right':
+      return 'bottom-end';
+    case 'left-top':
+      return 'left-start';
+    case 'left-bottom':
+      return 'left-end';
+    case 'right-top':
+      return 'right-start';
+    case 'right-bottom':
+      return 'right-end';
+    default:
+      return position;
+  }
+};
+const mirrorPositionForRtl = position => {
+  switch (position) {
+    case 'left':
+      return 'right';
+    case 'right':
+      return 'left';
+    case 'left-top':
+      return 'right-top';
+    case 'left-bottom':
+      return 'right-bottom';
+    case 'right-top':
+      return 'left-top';
+    case 'right-bottom':
+      return 'left-bottom';
+    default:
+      // top-left/top-right/bottom-left/bottom-right map to start/end via
+      // positionToPlacement, and floating-ui already flips start/end in RTL.
+      return position;
+  }
+};
+
+exports.POPOVER_OFFSET = POPOVER_OFFSET;
+exports.fallbackPlacements = fallbackPlacements;
+exports.mirrorPositionForRtl = mirrorPositionForRtl;
+exports.positionToPlacement = positionToPlacement;
+//# sourceMappingURL=Panel.positionUtils.js.map

package/build/common/Panel/Panel.positionUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Panel.positionUtils.js","sources":["../../../src/common/Panel/Panel.positionUtils.ts"],"sourcesContent":["import type { Placement } from '@floating-ui/react';\n\nexport type FloatingPlacement =\n  | 'top'\n  | 'right'\n  | 'bottom'\n  | 'left'\n  | 'top-left'\n  | 'top-right'\n  | 'right-top'\n  | 'right-bottom'\n  | 'bottom-left'\n  | 'bottom-right'\n  | 'left-top'\n  | 'left-bottom';\n\nexport const POPOVER_OFFSET = 16;\n\n// By default the flip positioning explores only the opposite alternative. So if left is passed and there's no enough space\n// the right one gets chosen. If there's no space on both sides popover goes back to the initially chosen one left.\n// This mapping forces popover to try the four available positions before going back to the initial chosen one.\nexport const fallbackPlacements: Record<Placement, Placement[]> = {\n  top: ['bottom', 'right', 'left'],\n  bottom: ['top', 'right', 'left'],\n  left: ['right', 'top', 'bottom'],\n  right: ['left', 'top', 'bottom'],\n  'top-start': ['bottom-start', 'top-end', 'bottom-end'],\n  'top-end': ['bottom-end', 'top-start', 'bottom-start'],\n  'bottom-start': ['top-start', 'bottom-end', 'top-end'],\n  'bottom-end': ['top-end', 'bottom-start', 'top-start'],\n  'left-start': ['right-start', 'left-end', 'right-end'],\n  'left-end': ['right-end', 'left-start', 'right-start'],\n  'right-start': ['left-start', 'right-end', 'left-end'],\n  'right-end': ['left-end', 'right-start', 'left-start'],\n};\n\nexport const positionToPlacement = (position: FloatingPlacement): Placement => {\n  switch (position) {\n    case 'top-left':\n      return 'top-start';\n    case 'top-right':\n      return 'top-end';\n    case 'bottom-left':\n      return 'bottom-start';\n    case 'bottom-right':\n      return 'bottom-end';\n    case 'left-top':\n      return 'left-start';\n    case 'left-bottom':\n      return 'left-end';\n    case 'right-top':\n      return 'right-start';\n    case 'right-bottom':\n      return 'right-end';\n    default:\n      return position;\n  }\n};\n\nexport const mirrorPositionForRtl = (position: FloatingPlacement): FloatingPlacement => {\n  switch (position) {\n    case 'left':\n      return 'right';\n    case 'right':\n      return 'left';\n    case 'left-top':\n      return 'right-top';\n    case 'left-bottom':\n      return 'right-bottom';\n    case 'right-top':\n      return 'left-top';\n    case 'right-bottom':\n      return 'left-bottom';\n    default:\n      // top-left/top-right/bottom-left/bottom-right map to start/end via\n      // positionToPlacement, and floating-ui already flips start/end in RTL.\n      return position;\n  }\n};\n"],"names":["POPOVER_OFFSET","fallbackPlacements","top","bottom","left","right","positionToPlacement","position","mirrorPositionForRtl"],"mappings":";;AAgBO,MAAMA,cAAc,GAAG;AAE9B;AACA;AACA;AACO,MAAMC,kBAAkB,GAAmC;AAChEC,EAAAA,GAAG,EAAE,CAAC,QAAQ,EAAE,OAAO,EAAE,MAAM,CAAC;AAChCC,EAAAA,MAAM,EAAE,CAAC,KAAK,EAAE,OAAO,EAAE,MAAM,CAAC;AAChCC,EAAAA,IAAI,EAAE,CAAC,OAAO,EAAE,KAAK,EAAE,QAAQ,CAAC;AAChCC,EAAAA,KAAK,EAAE,CAAC,MAAM,EAAE,KAAK,EAAE,QAAQ,CAAC;AAChC,EAAA,WAAW,EAAE,CAAC,cAAc,EAAE,SAAS,EAAE,YAAY,CAAC;AACtD,EAAA,SAAS,EAAE,CAAC,YAAY,EAAE,WAAW,EAAE,cAAc,CAAC;AACtD,EAAA,cAAc,EAAE,CAAC,WAAW,EAAE,YAAY,EAAE,SAAS,CAAC;AACtD,EAAA,YAAY,EAAE,CAAC,SAAS,EAAE,cAAc,EAAE,WAAW,CAAC;AACtD,EAAA,YAAY,EAAE,CAAC,aAAa,EAAE,UAAU,EAAE,WAAW,CAAC;AACtD,EAAA,UAAU,EAAE,CAAC,WAAW,EAAE,YAAY,EAAE,aAAa,CAAC;AACtD,EAAA,aAAa,EAAE,CAAC,YAAY,EAAE,WAAW,EAAE,UAAU,CAAC;AACtD,EAAA,WAAW,EAAE,CAAC,UAAU,EAAE,aAAa,EAAE,YAAY;;AAGhD,MAAMC,mBAAmB,GAAIC,QAA2B,IAAe;AAC5E,EAAA,QAAQA,QAAQ;AACd,IAAA,KAAK,UAAU;AACb,MAAA,OAAO,WAAW;AACpB,IAAA,KAAK,WAAW;AACd,MAAA,OAAO,SAAS;AAClB,IAAA,KAAK,aAAa;AAChB,MAAA,OAAO,cAAc;AACvB,IAAA,KAAK,cAAc;AACjB,MAAA,OAAO,YAAY;AACrB,IAAA,KAAK,UAAU;AACb,MAAA,OAAO,YAAY;AACrB,IAAA,KAAK,aAAa;AAChB,MAAA,OAAO,UAAU;AACnB,IAAA,KAAK,WAAW;AACd,MAAA,OAAO,aAAa;AACtB,IAAA,KAAK,cAAc;AACjB,MAAA,OAAO,WAAW;AACpB,IAAA;AACE,MAAA,OAAOA,QAAQ;AACnB;AACF;AAEO,MAAMC,oBAAoB,GAAID,QAA2B,IAAuB;AACrF,EAAA,QAAQA,QAAQ;AACd,IAAA,KAAK,MAAM;AACT,MAAA,OAAO,OAAO;AAChB,IAAA,KAAK,OAAO;AACV,MAAA,OAAO,MAAM;AACf,IAAA,KAAK,UAAU;AACb,MAAA,OAAO,WAAW;AACpB,IAAA,KAAK,aAAa;AAChB,MAAA,OAAO,cAAc;AACvB,IAAA,KAAK,WAAW;AACd,MAAA,OAAO,UAAU;AACnB,IAAA,KAAK,cAAc;AACjB,MAAA,OAAO,aAAa;AACtB,IAAA;AACE;AACA;AACA,MAAA,OAAOA,QAAQ;AACnB;AACF;;;;;;;"}

package/build/common/Panel/Panel.positionUtils.mjs

@@ -0,0 +1,63 @@
+const POPOVER_OFFSET = 16;
+// By default the flip positioning explores only the opposite alternative. So if left is passed and there's no enough space
+// the right one gets chosen. If there's no space on both sides popover goes back to the initially chosen one left.
+// This mapping forces popover to try the four available positions before going back to the initial chosen one.
+const fallbackPlacements = {
+  top: ['bottom', 'right', 'left'],
+  bottom: ['top', 'right', 'left'],
+  left: ['right', 'top', 'bottom'],
+  right: ['left', 'top', 'bottom'],
+  'top-start': ['bottom-start', 'top-end', 'bottom-end'],
+  'top-end': ['bottom-end', 'top-start', 'bottom-start'],
+  'bottom-start': ['top-start', 'bottom-end', 'top-end'],
+  'bottom-end': ['top-end', 'bottom-start', 'top-start'],
+  'left-start': ['right-start', 'left-end', 'right-end'],
+  'left-end': ['right-end', 'left-start', 'right-start'],
+  'right-start': ['left-start', 'right-end', 'left-end'],
+  'right-end': ['left-end', 'right-start', 'left-start']
+};
+const positionToPlacement = position => {
+  switch (position) {
+    case 'top-left':
+      return 'top-start';
+    case 'top-right':
+      return 'top-end';
+    case 'bottom-left':
+      return 'bottom-start';
+    case 'bottom-right':
+      return 'bottom-end';
+    case 'left-top':
+      return 'left-start';
+    case 'left-bottom':
+      return 'left-end';
+    case 'right-top':
+      return 'right-start';
+    case 'right-bottom':
+      return 'right-end';
+    default:
+      return position;
+  }
+};
+const mirrorPositionForRtl = position => {
+  switch (position) {
+    case 'left':
+      return 'right';
+    case 'right':
+      return 'left';
+    case 'left-top':
+      return 'right-top';
+    case 'left-bottom':
+      return 'right-bottom';
+    case 'right-top':
+      return 'left-top';
+    case 'right-bottom':
+      return 'left-bottom';
+    default:
+      // top-left/top-right/bottom-left/bottom-right map to start/end via
+      // positionToPlacement, and floating-ui already flips start/end in RTL.
+      return position;
+  }
+};
+
+export { POPOVER_OFFSET, fallbackPlacements, mirrorPositionForRtl, positionToPlacement };
+//# sourceMappingURL=Panel.positionUtils.mjs.map

package/build/common/Panel/Panel.positionUtils.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Panel.positionUtils.mjs","sources":["../../../src/common/Panel/Panel.positionUtils.ts"],"sourcesContent":["import type { Placement } from '@floating-ui/react';\n\nexport type FloatingPlacement =\n  | 'top'\n  | 'right'\n  | 'bottom'\n  | 'left'\n  | 'top-left'\n  | 'top-right'\n  | 'right-top'\n  | 'right-bottom'\n  | 'bottom-left'\n  | 'bottom-right'\n  | 'left-top'\n  | 'left-bottom';\n\nexport const POPOVER_OFFSET = 16;\n\n// By default the flip positioning explores only the opposite alternative. So if left is passed and there's no enough space\n// the right one gets chosen. If there's no space on both sides popover goes back to the initially chosen one left.\n// This mapping forces popover to try the four available positions before going back to the initial chosen one.\nexport const fallbackPlacements: Record<Placement, Placement[]> = {\n  top: ['bottom', 'right', 'left'],\n  bottom: ['top', 'right', 'left'],\n  left: ['right', 'top', 'bottom'],\n  right: ['left', 'top', 'bottom'],\n  'top-start': ['bottom-start', 'top-end', 'bottom-end'],\n  'top-end': ['bottom-end', 'top-start', 'bottom-start'],\n  'bottom-start': ['top-start', 'bottom-end', 'top-end'],\n  'bottom-end': ['top-end', 'bottom-start', 'top-start'],\n  'left-start': ['right-start', 'left-end', 'right-end'],\n  'left-end': ['right-end', 'left-start', 'right-start'],\n  'right-start': ['left-start', 'right-end', 'left-end'],\n  'right-end': ['left-end', 'right-start', 'left-start'],\n};\n\nexport const positionToPlacement = (position: FloatingPlacement): Placement => {\n  switch (position) {\n    case 'top-left':\n      return 'top-start';\n    case 'top-right':\n      return 'top-end';\n    case 'bottom-left':\n      return 'bottom-start';\n    case 'bottom-right':\n      return 'bottom-end';\n    case 'left-top':\n      return 'left-start';\n    case 'left-bottom':\n      return 'left-end';\n    case 'right-top':\n      return 'right-start';\n    case 'right-bottom':\n      return 'right-end';\n    default:\n      return position;\n  }\n};\n\nexport const mirrorPositionForRtl = (position: FloatingPlacement): FloatingPlacement => {\n  switch (position) {\n    case 'left':\n      return 'right';\n    case 'right':\n      return 'left';\n    case 'left-top':\n      return 'right-top';\n    case 'left-bottom':\n      return 'right-bottom';\n    case 'right-top':\n      return 'left-top';\n    case 'right-bottom':\n      return 'left-bottom';\n    default:\n      // top-left/top-right/bottom-left/bottom-right map to start/end via\n      // positionToPlacement, and floating-ui already flips start/end in RTL.\n      return position;\n  }\n};\n"],"names":["POPOVER_OFFSET","fallbackPlacements","top","bottom","left","right","positionToPlacement","position","mirrorPositionForRtl"],"mappings":"AAgBO,MAAMA,cAAc,GAAG;AAE9B;AACA;AACA;AACO,MAAMC,kBAAkB,GAAmC;AAChEC,EAAAA,GAAG,EAAE,CAAC,QAAQ,EAAE,OAAO,EAAE,MAAM,CAAC;AAChCC,EAAAA,MAAM,EAAE,CAAC,KAAK,EAAE,OAAO,EAAE,MAAM,CAAC;AAChCC,EAAAA,IAAI,EAAE,CAAC,OAAO,EAAE,KAAK,EAAE,QAAQ,CAAC;AAChCC,EAAAA,KAAK,EAAE,CAAC,MAAM,EAAE,KAAK,EAAE,QAAQ,CAAC;AAChC,EAAA,WAAW,EAAE,CAAC,cAAc,EAAE,SAAS,EAAE,YAAY,CAAC;AACtD,EAAA,SAAS,EAAE,CAAC,YAAY,EAAE,WAAW,EAAE,cAAc,CAAC;AACtD,EAAA,cAAc,EAAE,CAAC,WAAW,EAAE,YAAY,EAAE,SAAS,CAAC;AACtD,EAAA,YAAY,EAAE,CAAC,SAAS,EAAE,cAAc,EAAE,WAAW,CAAC;AACtD,EAAA,YAAY,EAAE,CAAC,aAAa,EAAE,UAAU,EAAE,WAAW,CAAC;AACtD,EAAA,UAAU,EAAE,CAAC,WAAW,EAAE,YAAY,EAAE,aAAa,CAAC;AACtD,EAAA,aAAa,EAAE,CAAC,YAAY,EAAE,WAAW,EAAE,UAAU,CAAC;AACtD,EAAA,WAAW,EAAE,CAAC,UAAU,EAAE,aAAa,EAAE,YAAY;;AAGhD,MAAMC,mBAAmB,GAAIC,QAA2B,IAAe;AAC5E,EAAA,QAAQA,QAAQ;AACd,IAAA,KAAK,UAAU;AACb,MAAA,OAAO,WAAW;AACpB,IAAA,KAAK,WAAW;AACd,MAAA,OAAO,SAAS;AAClB,IAAA,KAAK,aAAa;AAChB,MAAA,OAAO,cAAc;AACvB,IAAA,KAAK,cAAc;AACjB,MAAA,OAAO,YAAY;AACrB,IAAA,KAAK,UAAU;AACb,MAAA,OAAO,YAAY;AACrB,IAAA,KAAK,aAAa;AAChB,MAAA,OAAO,UAAU;AACnB,IAAA,KAAK,WAAW;AACd,MAAA,OAAO,aAAa;AACtB,IAAA,KAAK,cAAc;AACjB,MAAA,OAAO,WAAW;AACpB,IAAA;AACE,MAAA,OAAOA,QAAQ;AACnB;AACF;AAEO,MAAMC,oBAAoB,GAAID,QAA2B,IAAuB;AACrF,EAAA,QAAQA,QAAQ;AACd,IAAA,KAAK,MAAM;AACT,MAAA,OAAO,OAAO;AAChB,IAAA,KAAK,OAAO;AACV,MAAA,OAAO,MAAM;AACf,IAAA,KAAK,UAAU;AACb,MAAA,OAAO,WAAW;AACpB,IAAA,KAAK,aAAa;AAChB,MAAA,OAAO,cAAc;AACvB,IAAA,KAAK,WAAW;AACd,MAAA,OAAO,UAAU;AACnB,IAAA,KAAK,cAAc;AACjB,MAAA,OAAO,aAAa;AACtB,IAAA;AACE;AACA;AACA,MAAA,OAAOA,QAAQ;AACnB;AACF;;;;"}