@transferwise/components 46.160.0 → 46.160.1

package/src/UploadInput/UploadItem/UploadItem.css

@@ -41,8 +41,7 @@
 .np-upload-input__item .np-upload-input__title,
 .np-upload-input__item .np-upload-input__text {
   margin: 0;
-  -moz-text-align-last: left;
-       text-align-last: left;
+  text-align: start;
   color: #5d7079;
   color: var(--color-content-secondary);
 }
@@ -98,7 +97,7 @@
   justify-content: center;
 }
 .np-upload-input__item .np-upload-input__item-action .np-upload-input__item-button:before {
-  content: '';
+  content: "";
   display: block;
   inline-size: var(--clickAreaSize);
   block-size: var(--clickAreaSize);
@@ -153,8 +152,8 @@
   padding-inline-start: var(--size-16);
 }
 .np-upload-input__item .np-upload-input-errors > li::before {
-  content: '•' ;
-  content: '•' / '';
+  content: "•" ;
+  content: "•" / "";
   position: absolute;
   display: block;
   inset-inline-start: 0;

package/src/UploadInput/UploadItem/UploadItem.less

@@ -39,7 +39,7 @@
   .np-upload-input__title,
   .np-upload-input__text {
     margin: 0;
-    text-align-last: left;
+    text-align: left;
     color: var(--color-content-secondary);
   }
 
@@ -64,7 +64,7 @@
     --buttonTopRightOffset: var(--size-16);
     // Offset towards the parent's top-right edge
     // ensuring no overflow on smaller screens
-    --clickAreaTopRightOffset: calc((var(--clickAreaSize) - var(--iconSize)) * -.5);
+    --clickAreaTopRightOffset: calc((var(--clickAreaSize) - var(--iconSize)) * -0.5);
 
     position: absolute;
     right: var(--buttonTopRightOffset);
@@ -84,14 +84,16 @@
       border: 0;
       background-color: var(--color-background-neutral);
       color: var(--color-interactive-primary);
-      transition: color, background-color 0.15s ease-in-out;
+      transition:
+        color,
+        background-color 0.15s ease-in-out;
       outline-offset: 0;
       display: flex;
       align-items: center;
       justify-content: center;
 
       &:before {
-        content: '';
+        content: "";
         display: block;
         width: var(--clickAreaSize);
         height: var(--clickAreaSize);
@@ -116,7 +118,6 @@
     padding: 0;
 
     &:hover:not(:has(.np-upload-input__item-button:hover)) {
-
       &:before,
       & + .np-upload-input__item:before {
         width: 100%;
@@ -158,7 +159,7 @@
       padding-left: var(--size-16);
 
       &::before {
-        content: '•' / '';
+        content: "•" / "";
         position: absolute;
         display: block;
         left: 0;

package/src/UploadInput/_stories/UploadInput.test.story.tsx

@@ -345,5 +345,5 @@ export const RTLDiff: Story = {
       />
     </>
   ),
-  ...withRTLDiff(),
+  ...withRTLDiff({ renderAs: 'iframe' }),
 };

package/src/_deprecated/Badge/Badge.css

@@ -15,12 +15,14 @@
   --badge-border-color: rgba(0, 0, 0, 0.08);
 }
 .tw-badge > .tw-badge__children {
+  --badge-h-side: left;
   -webkit-mask-image: radial-gradient(circle at top calc(100% - var(--badge-mask-offset) - var(--badge-content-position)) left calc(100% - var(--badge-mask-offset) - var(--badge-content-position)), transparent 0, transparent calc(var(--badge-size) / 2 + var(--badge-mask)), black calc(var(--badge-size) / 2 + var(--badge-mask) + 0.5px));
           mask-image: radial-gradient(circle at top calc(100% - var(--badge-mask-offset) - var(--badge-content-position)) left calc(100% - var(--badge-mask-offset) - var(--badge-content-position)), transparent 0, transparent calc(var(--badge-size) / 2 + var(--badge-mask)), black calc(var(--badge-size) / 2 + var(--badge-mask) + 0.5px));
+  -webkit-mask-image: radial-gradient(circle at top calc(100% - var(--badge-mask-offset) - var(--badge-content-position)) var(--badge-h-side) calc(100% - var(--badge-mask-offset) - var(--badge-content-position)), transparent 0, transparent calc(var(--badge-size) / 2 + var(--badge-mask)), black calc(var(--badge-size) / 2 + var(--badge-mask) + 0.5px));
+          mask-image: radial-gradient(circle at top calc(100% - var(--badge-mask-offset) - var(--badge-content-position)) var(--badge-h-side) calc(100% - var(--badge-mask-offset) - var(--badge-content-position)), transparent 0, transparent calc(var(--badge-size) / 2 + var(--badge-mask)), black calc(var(--badge-size) / 2 + var(--badge-mask) + 0.5px));
 }
 [dir="rtl"] .tw-badge > .tw-badge__children {
-  -webkit-mask-image: radial-gradient(circle at top calc(100% - var(--badge-mask-offset)) right calc(100% - var(--badge-mask-offset)), transparent 0, transparent calc(var(--badge-size) / 2 + var(--badge-mask)), black calc(var(--badge-size) / 2 + var(--badge-mask) + 0.5px));
-          mask-image: radial-gradient(circle at top calc(100% - var(--badge-mask-offset)) right calc(100% - var(--badge-mask-offset)), transparent 0, transparent calc(var(--badge-size) / 2 + var(--badge-mask)), black calc(var(--badge-size) / 2 + var(--badge-mask) + 0.5px));
+  --badge-h-side: right;
 }
 .tw-badge > .tw-badge__content {
   position: absolute;

package/src/_deprecated/Badge/Badge.less

@@ -29,26 +29,19 @@
   }
 
   & > &__children {
-    // Not possible to add a logical property (inset-inline-start) to replace left position inside a gradient.
-    // RTL direction sorted out with conditional attributes.
+    --badge-h-side: left;
+
+    [dir="rtl"] & {
+      --badge-h-side: right;
+    }
 
     mask-image: radial-gradient(
-      circle at top calc(100% - var(--badge-mask-offset) - var(--badge-content-position)) left
-        calc(100% - var(--badge-mask-offset) - var(--badge-content-position)),
+      circle at top calc(100% - var(--badge-mask-offset) - var(--badge-content-position))
+        var(--badge-h-side) calc(100% - var(--badge-mask-offset) - var(--badge-content-position)),
       transparent 0,
       transparent calc(var(--badge-size) / 2 + var(--badge-mask)),
       black calc(var(--badge-size) / 2 + var(--badge-mask) + 0.5px)
     );
-
-    [dir="rtl"] & {
-      mask-image: radial-gradient(
-        circle at top calc(100% - var(--badge-mask-offset)) right
-          calc(100% - var(--badge-mask-offset)),
-        transparent 0,
-        transparent calc(var(--badge-size) / 2 + var(--badge-mask)),
-        black calc(var(--badge-size) / 2 + var(--badge-mask) + 0.5px)
-      );
-    }
   }
 
   & > &__content {

package/src/_deprecated/CriticalBanner/_stories/CriticalCommsBanner.test.story.tsx

@@ -36,22 +36,6 @@ export const Sentiments: Story = {
   ]),
 };
 
-export const RTL: Story = {
-  render: (args) => (
-    <>
-      <CriticalCommsBanner {...args} sentiment="negative" />
-      <CriticalCommsBanner {...args} sentiment="warning" />
-      <CriticalCommsBanner {...args} sentiment="neutral" />
-    </>
-  ),
-  args: {
-    subtitle: 'Add money within the next 30 days',
-    action: { label: 'Take action', href: 'https://wise.com' },
-    className: 'm-b-1',
-  },
-  ...withVariantConfig(['rtl']),
-};
-
 export const Mobile: Story = {
   args: {
     subtitle: 'Add money within the next 30 days',

package/src/_deprecated/OverlayHeader/_stories/OverlayHeader.test.story.tsx

@@ -40,3 +40,18 @@ export const RTLDiff: Story = {
   ),
   ...withRTLDiff(),
 };
+
+export const RTLDiffMobile: Story = {
+  render: () => (
+    <OverlayHeader
+      logo={<Logo />}
+      avatar={
+        <AvatarView>
+          <Person size="24" />
+        </AvatarView>
+      }
+      onClose={() => {}}
+    />
+  ),
+  ...withRTLDiff({ viewport: 'largeMobile' }),
+};

package/src/common/Panel/Panel.css

@@ -39,27 +39,35 @@
 .np-panel[data-popper-placement^="top"] > .np-panel__content {
   transform: translateY(10px) scale(0.95);
 }
-.np-panel[data-popper-placement^="top"] > .np-panel__content .np-panel__arrow {
+.np-panel[data-popper-placement^="top"] .np-panel__arrow {
   inset-block-end: -6px;
 }
 .np-panel[data-popper-placement^="right"] > .np-panel__content {
   transform: translateX(-10px) scale(0.95);
 }
-.np-panel[data-popper-placement^="right"] > .np-panel__content .np-panel__arrow {
+.np-panel[data-popper-placement^="right"] .np-panel__arrow {
   inset-inline-start: -6px;
 }
+[dir="rtl"] .np-panel[data-popper-placement^="right"] .np-panel__arrow {
+  inset-inline-start: unset;
+  inset-inline-end: -6px;
+}
 .np-panel[data-popper-placement^="bottom"] > .np-panel__content {
   transform: translateY(-10px) scale(0.95);
 }
-.np-panel[data-popper-placement^="bottom"] > .np-panel__content .np-panel__arrow {
+.np-panel[data-popper-placement^="bottom"] .np-panel__arrow {
   inset-block-start: -6px;
 }
 .np-panel[data-popper-placement^="left"] > .np-panel__content {
   transform: translateX(10px) scale(0.95);
 }
-.np-panel[data-popper-placement^="left"] > .np-panel__content .np-panel__arrow {
+.np-panel[data-popper-placement^="left"] .np-panel__arrow {
   inset-inline-end: -6px;
 }
+[dir="rtl"] .np-panel[data-popper-placement^="left"] .np-panel__arrow {
+  inset-inline-end: unset;
+  inset-inline-start: -6px;
+}
 .np-theme-personal .np-panel__content {
   border-radius: 16px;
   border-radius: var(--radius-medium);

package/src/common/Panel/Panel.less

@@ -11,7 +11,7 @@
       opacity 0.2s cubic-bezier(0.6, 0.2, 0.1, 1),
       transform 0.2s cubic-bezier(0.6, 0.2, 0.1, 1),
       visibility 0s linear 0.2s;
-    
+
     .np-theme-personal & {
       border-radius: var(--radius-small);
     }
@@ -45,35 +45,53 @@
     background: var(--color-background-elevated);
   }
 
-  &[data-popper-placement^="top"] > &__content {
-    transform: translateY(10px) scale(0.95);
+  &[data-popper-placement^="top"] {
+    > .np-panel__content {
+      transform: translateY(10px) scale(0.95);
+    }
 
     .np-panel__arrow {
       bottom: -6px;
     }
   }
 
-  &[data-popper-placement^="right"] > &__content {
-    transform: translateX(-10px) scale(0.95);
+  &[data-popper-placement^="right"] {
+    > .np-panel__content {
+      transform: translateX(-10px) scale(0.95);
+    }
 
     .np-panel__arrow {
       left: -6px;
+
+      [dir="rtl"] & {
+        left: unset;
+        right: -6px;
+      }
     }
   }
 
-  &[data-popper-placement^="bottom"] > &__content {
-    transform: translateY(-10px) scale(0.95);
+  &[data-popper-placement^="bottom"] {
+    > .np-panel__content {
+      transform: translateY(-10px) scale(0.95);
+    }
 
     .np-panel__arrow {
       top: -6px;
     }
   }
 
-  &[data-popper-placement^="left"] > &__content {
-    transform: translateX(10px) scale(0.95);
+  &[data-popper-placement^="left"] {
+    > .np-panel__content {
+      transform: translateX(10px) scale(0.95);
+    }
 
     .np-panel__arrow {
       right: -6px;
+
+      [dir="rtl"] & {
+        right: unset;
+        left: -6px;
+      }
     }
   }
 }

package/src/common/Panel/Panel.positionUtils.ts

@@ -0,0 +1,79 @@
+import type { Placement } from '@floating-ui/react';
+
+export type FloatingPlacement =
+  | 'top'
+  | 'right'
+  | 'bottom'
+  | 'left'
+  | 'top-left'
+  | 'top-right'
+  | 'right-top'
+  | 'right-bottom'
+  | 'bottom-left'
+  | 'bottom-right'
+  | 'left-top'
+  | 'left-bottom';
+
+export 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.
+export const fallbackPlacements: Record<Placement, Placement[]> = {
+  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'],
+};
+
+export const positionToPlacement = (position: FloatingPlacement): Placement => {
+  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;
+  }
+};
+
+export const mirrorPositionForRtl = (position: FloatingPlacement): FloatingPlacement => {
+  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;
+  }
+};

package/src/common/Panel/Panel.test.tsx

@@ -1,6 +1,7 @@
 import { createRef } from 'react';
 
 import { Position } from '..';
+import { DirectionProvider } from '../../Provider/Direction/DirectionProvider';
 import { render } from '../../test-utils';
 
 import Panel from './Panel';
@@ -93,4 +94,43 @@ describe('Panel', () => {
       expect(getPanel()).toHaveAttribute('data-popper-placement', expectedPlacement);
     });
   });
+
+  describe('RTL position mirroring', () => {
+    it.each<[PanelProps['position'], string]>([
+      [Position.LEFT, 'right'],
+      [Position.RIGHT, 'left'],
+      [Position.LEFT_TOP, 'right-start'],
+      [Position.LEFT_BOTTOM, 'right-end'],
+      [Position.RIGHT_TOP, 'left-start'],
+      [Position.RIGHT_BOTTOM, 'left-end'],
+    ])('mirrors %s in RTL to floating-ui placement %s', (position, expectedPlacement) => {
+      render(
+        <DirectionProvider direction="rtl">
+          <Panel {...props} position={position} />
+        </DirectionProvider>,
+      );
+
+      expect(getPanel()).toHaveAttribute('data-popper-placement', expectedPlacement);
+    });
+
+    it.each<[PanelProps['position'], string]>([
+      [Position.TOP, 'top'],
+      [Position.BOTTOM, 'bottom'],
+      [Position.TOP_LEFT, 'top-start'],
+      [Position.TOP_RIGHT, 'top-end'],
+      [Position.BOTTOM_LEFT, 'bottom-start'],
+      [Position.BOTTOM_RIGHT, 'bottom-end'],
+    ])(
+      'does not mirror %s in RTL (floating-ui handles start/end flip)',
+      (position, expectedPlacement) => {
+        render(
+          <DirectionProvider direction="rtl">
+            <Panel {...props} position={position} />
+          </DirectionProvider>,
+        );
+
+        expect(getPanel()).toHaveAttribute('data-popper-placement', expectedPlacement);
+      },
+    );
+  });
 });

package/src/common/Panel/Panel.tsx

@@ -3,7 +3,6 @@ import {
   autoUpdate,
   flip as flipMiddleware,
   offset,
-  type Placement,
   shift,
   size as sizeMiddleware,
   useFloating,
@@ -20,29 +19,17 @@ import {
   useRef,
 } from 'react';
 
-import { Position, type FloatingPlacement, positionToPlacement } from '..';
-import Dimmer from '../../Dimmer';
 import { OverlayIdContext } from '../../Provider/overlay/OverlayIdProvider';
-
-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: Record<Placement, Placement[]> = {
-  [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'],
-};
+import Dimmer from '../../Dimmer';
+import useDirection from '../hooks/useDirection';
+import { Position } from '..';
+import {
+  type FloatingPlacement,
+  POPOVER_OFFSET,
+  fallbackPlacements,
+  mirrorPositionForRtl,
+  positionToPlacement,
+} from './Panel.positionUtils';
 
 export type PanelProps = PropsWithChildren<{
   arrow?: boolean;
@@ -74,7 +61,9 @@ const Panel = forwardRef<HTMLDivElement, PanelProps>(function Panel(
   reference,
 ) {
   const arrowRef = useRef<HTMLDivElement | null>(null);
-  const floatingPlacement = positionToPlacement(position);
+  const { isRTL } = useDirection();
+  const resolvedPosition = isRTL ? mirrorPositionForRtl(position) : position;
+  const floatingPlacement = positionToPlacement(resolvedPosition);
 
   const middleware = [];
 

package/src/common/Panel/_stories/Panel.rtl.test.story.tsx

@@ -0,0 +1,110 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { useRef } from 'react';
+import { withRTLDiff } from '../../../../.storybook/decorators/RtlDiffDecorator';
+import Button from '../../../Button';
+import { Position } from '../../PropsValues/position';
+import Panel from '../Panel';
+
+export default {
+  component: Panel,
+  title: 'Dialogs/Panel/Tests/RTL Diff',
+  tags: ['!autodocs', '!manifest'],
+} satisfies Meta<typeof Panel>;
+
+type Story = StoryObj<typeof Panel>;
+
+function PanelStory({
+  position,
+  label,
+}: {
+  position: Parameters<typeof Panel>[0]['position'];
+  label: string;
+}) {
+  const anchorRef = useRef<HTMLButtonElement>(null);
+  const margin =
+    position?.startsWith('bottom') || position?.startsWith('top') ? '3.5rem 0' : '2.5rem 0';
+
+  return (
+    <>
+      <Button ref={anchorRef} style={{ margin }}>
+        {label}
+      </Button>
+      <Panel
+        open
+        position={position}
+        anchorRef={anchorRef}
+        arrow
+        aria-label={`Panel positioned ${label}`}
+      >
+        <div style={{ padding: '16px', maxWidth: '200px' }}>
+          Panel content positioned at <strong>{label}</strong>
+        </div>
+      </Panel>
+    </>
+  );
+}
+
+export const Top: Story = {
+  render: () => (
+    <>
+      <PanelStory position={Position.TOP_LEFT} label="top-left" />
+      <PanelStory position={Position.TOP} label="top" />
+      <PanelStory position={Position.TOP_RIGHT} label="top-right" />
+    </>
+  ),
+  ...withRTLDiff({ renderAs: 'iframe', hAlign: 'center', vAlign: 'bottom' }),
+};
+
+export const Right: Story = {
+  render: () => (
+    <>
+      <PanelStory position={Position.RIGHT_TOP} label="right-top" />
+      <PanelStory position={Position.RIGHT} label="right" />
+      <PanelStory position={Position.RIGHT_BOTTOM} label="right-bottom" />
+    </>
+  ),
+  ...withRTLDiff({ renderAs: 'iframe', hAlign: 'left', vAlign: 'center' }),
+};
+export const RightFlipped: Story = {
+  render: () => (
+    <>
+      <PanelStory position={Position.RIGHT_TOP} label="right-top" />
+      <PanelStory position={Position.RIGHT} label="right" />
+      <PanelStory position={Position.RIGHT_BOTTOM} label="right-bottom" />
+    </>
+  ),
+  ...withRTLDiff({ renderAs: 'iframe', hAlign: 'right', vAlign: 'center' }),
+};
+
+export const Bottom: Story = {
+  render: () => (
+    <>
+      <PanelStory position={Position.BOTTOM_LEFT} label="bottom-left" />
+      <PanelStory position={Position.BOTTOM} label="bottom" />
+      <PanelStory position={Position.BOTTOM_RIGHT} label="bottom-right" />
+    </>
+  ),
+  ...withRTLDiff({ renderAs: 'iframe', hAlign: 'center' }),
+};
+
+export const Left: Story = {
+  render: () => (
+    <>
+      <PanelStory position={Position.LEFT_TOP} label="left-top" />
+      <PanelStory position={Position.LEFT} label="left" />
+      <PanelStory position={Position.LEFT_BOTTOM} label="left-bottom" />
+    </>
+  ),
+  ...withRTLDiff({ renderAs: 'iframe', hAlign: 'right', vAlign: 'center' }),
+};
+
+export const LeftFlipped: Story = {
+  render: () => (
+    <>
+      <PanelStory position={Position.LEFT_TOP} label="left-top" />
+      <PanelStory position={Position.LEFT} label="left" />
+      <PanelStory position={Position.LEFT_BOTTOM} label="left-bottom" />
+    </>
+  ),
+  ...withRTLDiff({ renderAs: 'iframe', hAlign: 'left', vAlign: 'center' }),
+};

package/src/common/PropsValues/position.ts

@@ -1,5 +1,3 @@
-import type { Placement } from '@floating-ui/react';
-
 export enum Position {
   BOTTOM = 'bottom',
   BOTTOM_LEFT = 'bottom-left',
@@ -21,51 +19,3 @@ export type PositionTop = 'top';
 export type PositionRight = 'right';
 export type PositionBottom = 'bottom';
 export type PositionLeft = 'left';
-
-export type PositionTopLeft = 'top-left';
-export type PositionTopRight = 'top-right';
-export type PositionBottomLeft = 'bottom-left';
-export type PositionBottomRight = 'bottom-right';
-export type PositionLeftTop = 'left-top';
-export type PositionLeftBottom = 'left-bottom';
-export type PositionRightTop = 'right-top';
-export type PositionRightBottom = 'right-bottom';
-
-/** Neptune position values that can be converted to floating-ui Placement */
-export type FloatingPlacement =
-  | PositionTop
-  | PositionRight
-  | PositionBottom
-  | PositionLeft
-  | PositionTopLeft
-  | PositionTopRight
-  | PositionRightTop
-  | PositionRightBottom
-  | PositionBottomLeft
-  | PositionBottomRight
-  | PositionLeftTop
-  | PositionLeftBottom;
-
-/** Maps Neptune position values to floating-ui Placement */
-export const positionToPlacement = (position: FloatingPlacement): Placement => {
-  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;
-  }
-};