@transferwise/components 0.0.0-experimental-77e4e3a → 0.0.0-experimental-0657ea4

package/build/types/common/PropsValues/position.d.ts

@@ -1,4 +1,3 @@
-import type { Placement } from '@floating-ui/react';
 export declare enum Position {
     BOTTOM = "bottom",
     BOTTOM_LEFT = "bottom-left",
@@ -19,16 +18,4 @@ 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 declare const positionToPlacement: (position: FloatingPlacement) => Placement;
 //# sourceMappingURL=position.d.ts.map

package/build/types/common/PropsValues/position.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"position.d.ts","sourceRoot":"","sources":["../../../../src/common/PropsValues/position.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAEpD,oBAAY,QAAQ;IAClB,MAAM,WAAW;IACjB,WAAW,gBAAgB;IAC3B,YAAY,iBAAiB;IAC7B,MAAM,WAAW;IACjB,IAAI,SAAS;IACb,WAAW,gBAAgB;IAC3B,QAAQ,aAAa;IACrB,KAAK,UAAU;IACf,YAAY,iBAAiB;IAC7B,SAAS,cAAc;IACvB,GAAG,QAAQ;IACX,QAAQ,aAAa;IACrB,SAAS,cAAc;CACxB;AAED,MAAM,MAAM,cAAc,GAAG,QAAQ,CAAC;AACtC,MAAM,MAAM,WAAW,GAAG,KAAK,CAAC;AAChC,MAAM,MAAM,aAAa,GAAG,OAAO,CAAC;AACpC,MAAM,MAAM,cAAc,GAAG,QAAQ,CAAC;AACtC,MAAM,MAAM,YAAY,GAAG,MAAM,CAAC;AAElC,MAAM,MAAM,eAAe,GAAG,UAAU,CAAC;AACzC,MAAM,MAAM,gBAAgB,GAAG,WAAW,CAAC;AAC3C,MAAM,MAAM,kBAAkB,GAAG,aAAa,CAAC;AAC/C,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAC;AACjD,MAAM,MAAM,eAAe,GAAG,UAAU,CAAC;AACzC,MAAM,MAAM,kBAAkB,GAAG,aAAa,CAAC;AAC/C,MAAM,MAAM,gBAAgB,GAAG,WAAW,CAAC;AAC3C,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAC;AAEjD,6EAA6E;AAC7E,MAAM,MAAM,iBAAiB,GACzB,WAAW,GACX,aAAa,GACb,cAAc,GACd,YAAY,GACZ,eAAe,GACf,gBAAgB,GAChB,gBAAgB,GAChB,mBAAmB,GACnB,kBAAkB,GAClB,mBAAmB,GACnB,eAAe,GACf,kBAAkB,CAAC;AAEvB,4DAA4D;AAC5D,eAAO,MAAM,mBAAmB,GAAI,UAAU,iBAAiB,KAAG,SAqBjE,CAAC"}
+{"version":3,"file":"position.d.ts","sourceRoot":"","sources":["../../../../src/common/PropsValues/position.ts"],"names":[],"mappings":"AAAA,oBAAY,QAAQ;IAClB,MAAM,WAAW;IACjB,WAAW,gBAAgB;IAC3B,YAAY,iBAAiB;IAC7B,MAAM,WAAW;IACjB,IAAI,SAAS;IACb,WAAW,gBAAgB;IAC3B,QAAQ,aAAa;IACrB,KAAK,UAAU;IACf,YAAY,iBAAiB;IAC7B,SAAS,cAAc;IACvB,GAAG,QAAQ;IACX,QAAQ,aAAa;IACrB,SAAS,cAAc;CACxB;AAED,MAAM,MAAM,cAAc,GAAG,QAAQ,CAAC;AACtC,MAAM,MAAM,WAAW,GAAG,KAAK,CAAC;AAChC,MAAM,MAAM,aAAa,GAAG,OAAO,CAAC;AACpC,MAAM,MAAM,cAAc,GAAG,QAAQ,CAAC;AACtC,MAAM,MAAM,YAAY,GAAG,MAAM,CAAC"}

package/build/types/common/ResponsivePanel/ResponsivePanel.d.ts

@@ -4,7 +4,7 @@ declare const ResponsivePanel: import("react").ForwardRefExoticComponent<{
     altAxis?: boolean;
     open?: boolean;
     onClose?: (event: Event | import("react").SyntheticEvent) => void;
-    position?: import("..").FloatingPlacement;
+    position?: import("../Panel/Panel.positionUtils").FloatingPlacement;
     anchorRef: import("react").RefObject<Element | null>;
     anchorWidth?: boolean;
     considerHeight?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-77e4e3a",
+  "version": "0.0.0-experimental-0657ea4",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -91,7 +91,7 @@
     "storybook": "^10.5.4",
     "storybook-addon-tag-badges": "^3.1.0",
     "storybook-addon-test-codegen": "^3.0.4",
-    "@transferwise/less-config": "0.0.0-experimental-77e4e3a",
+    "@transferwise/less-config": "3.2.0",
     "@wise/components-theming": "1.10.3",
     "@wise/wds-configs": "0.0.0"
   },

package/src/ExpressiveMoneyInput/Chevron/Chevron.tsx

@@ -1,12 +1,17 @@
-import { ChevronLeft } from '@transferwise/icons';
+import { ChevronLeft, ChevronRight } from '@transferwise/icons';
 import { clsx } from 'clsx';
 import { motion } from 'motion/react';
 
+import { useDirection } from '../../common/hooks';
+
 interface Props {
   shouldShow: boolean;
 }
 
 export const Chevron = ({ shouldShow = true }: Props) => {
+  const { isRTL } = useDirection();
+  const Icon = isRTL ? ChevronRight : ChevronLeft;
+
   return (
     <div
       className={clsx(
@@ -17,7 +22,7 @@ export const Chevron = ({ shouldShow = true }: Props) => {
     >
       <motion.div
         animate={{
-          x: [12, 0, 0, -12],
+          x: isRTL ? [-12, 0, 0, 12] : [12, 0, 0, -12],
           opacity: [0, 1, 1, 0],
         }}
         transition={{
@@ -28,7 +33,7 @@ export const Chevron = ({ shouldShow = true }: Props) => {
           repeatType: 'loop',
         }}
       >
-        <ChevronLeft />
+        <Icon />
       </motion.div>
     </div>
   );

package/src/ListItem/ListItem.tsx

@@ -182,24 +182,24 @@ export const ListItem = ({
   const getFeatureClassName = () => {
     const partials = [];
     const hasMedia = Boolean(media);
-    const hasControl = Boolean(control) && !isNavigationIndicatorHidden;
+    const hasVisibleControl = Boolean(control) && !isNavigationIndicatorHidden;
     const hasInfo = Boolean(additionalInfo);
     const hasPrompt = Boolean(prompt) || (disabled && Boolean(disabledPromptMessage));
 
     /* eslint-disable functional/immutable-data */
-    if (hasMedia && hasControl) {
+    if (hasMedia && hasVisibleControl) {
       partials.push('wds-list-item-hasMedia-hasControl');
     }
 
-    if (hasMedia && !hasControl) {
+    if (hasMedia && !hasVisibleControl) {
       partials.push('wds-list-item-hasMedia-noControl');
     }
 
-    if (!hasMedia && hasControl) {
+    if (!hasMedia && hasVisibleControl) {
       partials.push('wds-list-item-noMedia-hasControl');
     }
 
-    if (!hasMedia && !hasControl) {
+    if (!hasMedia && !hasVisibleControl) {
       partials.push('wds-list-item-noMedia-noControl');
     }
 

package/src/ListItem/_stories/ListItem.layout.test.story.tsx

@@ -226,29 +226,6 @@ export const ImageAlignment: StoryObj<PreviewStoryArgs> = {
   },
 };
 
-// Regression: when Navigation has hideIndicator + href, the control column should be
-// removed from the grid so no phantom gap appears on the right side of the item.
-export const NavigationHideIndicator: Story = {
-  render: () => (
-    <List>
-      <ListItem
-        title="Stocks"
-        valueTitle="− 6.70 GBP"
-        valueSubtitle="All time"
-        media={<ListItem.AvatarView>{null}</ListItem.AvatarView>}
-        control={<ListItem.Navigation href="/test" hideIndicator />}
-      />
-      <ListItem
-        title="With chevron (baseline)"
-        valueTitle="100 GBP"
-        valueSubtitle="All time"
-        media={<ListItem.AvatarView>{null}</ListItem.AvatarView>}
-        control={<ListItem.Navigation href="/test" />}
-      />
-    </List>
-  ),
-};
-
 // Our container queries left 1px gap between breakpoint definitions.
 // This test makes sure that LI placed in a parent of {width} still
 // works fine, where: {breakpoint} < {width} < {breakpoint} + 1px

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;
-  }
-};

package/src/main.css

@@ -21875,27 +21875,35 @@ button.np-option {
 .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);