fix(SelectInputV2): fix dropdown align on left

.changeset/soft-swans-cry.md

@@ -0,0 +1,5 @@
+---
+"@ultraviolet/ui": patch
+---
+
+Fix `<SelectInputV2 />` to align on the left when dropdown is bigger than the actual input

packages/ui/src/components/MenuV2/index.tsx

@@ -112,7 +112,10 @@ type MenuProps = {
    * If set to `hover`, the menu will open when the user hovers over the disclosure.
    */
   triggerMethod?: 'click' | 'hover'
-} & Pick<ComponentProps<typeof Popup>, 'placement' | 'dynamicDomRendering'>
+} & Pick<
+  ComponentProps<typeof Popup>,
+  'placement' | 'dynamicDomRendering' | 'align'
+>
 
 const FwdMenu = forwardRef(
   (
@@ -132,6 +135,7 @@ const FwdMenu = forwardRef(
       size = 'small',
       triggerMethod = 'click',
       dynamicDomRendering,
+      align,
     }: MenuProps,
     ref: Ref<HTMLButtonElement | null>,
   ) => {
@@ -188,6 +192,7 @@ const FwdMenu = forwardRef(
         }
         portalTarget={portalTarget}
         dynamicDomRendering={dynamicDomRendering}
+        align={align}
       >
         {finalDisclosure}
       </StyledPopup>

packages/ui/src/components/Popover/index.tsx

@@ -117,7 +117,10 @@ type PopoverProps = {
    * behavior by setting a portalTarget prop.
    */
   portalTarget?: HTMLElement
-} & Pick<ComponentProps<typeof Popup>, 'placement' | 'dynamicDomRendering'>
+} & Pick<
+  ComponentProps<typeof Popup>,
+  'placement' | 'dynamicDomRendering' | 'align'
+>
 
 /**
  * Popover component is used to display additional information or actions on top of the main content of the page.
@@ -140,6 +143,7 @@ export const Popover = forwardRef(
       'data-testid': dataTestId,
       portalTarget,
       dynamicDomRendering,
+      align,
     }: PopoverProps,
     ref: Ref<HTMLDivElement>,
   ) => {
@@ -184,6 +188,7 @@ export const Popover = forwardRef(
         maxHeight={maxHeight}
         portalTarget={portalTarget}
         dynamicDomRendering={dynamicDomRendering}
+        align={align}
       >
         {children}
       </StyledPopup>

packages/ui/src/components/Popup/helpers.ts

@@ -1,6 +1,7 @@
 import type { RefObject } from 'react'
 
 export type PopupPlacement = 'top' | 'right' | 'bottom' | 'left' | 'auto'
+export type PopupAlign = 'start' | 'center'
 export const DEFAULT_ARROW_WIDTH = 8 // in px
 const SPACE = 4 // in px
 const TOTAL_USED_SPACE = 0 // in px
@@ -192,6 +193,7 @@
   popupRef: RefObject<HTMLDivElement>
   popupPortalTarget: HTMLElement
   hasArrow: boolean
+  align: PopupAlign
 }
 
 /**
@@ -203,6 +205,7 @@
   popupRef,
   popupPortalTarget,
   hasArrow,
+  align,
 }: ComputePositionsTypes) => {
   const arrowWidth = hasArrow ? DEFAULT_ARROW_WIDTH : 0
   const childrenRect = (
@@ -269,10 +272,13 @@
     arrowWidth,
   )
 
+  const isAligned = align === 'start'
+
   switch (placementBasedOnWindowSize) {
     case 'bottom': {
-      const positionX =
-        overloadedChildrenLeft + childrenWidth / 2 - popupWidth / 2
+      const positionX = isAligned
+        ? overloadedChildrenLeft
+        : overloadedChildrenLeft + childrenWidth / 2 - popupWidth / 2
       const positionY =
         overloadedChildrenTop +
         scrollTopValue +
@@ -281,31 +287,36 @@
         SPACE
 
       return {
-        arrowLeft: popupWidth / 2 + popupOverflow * -1,
+        arrowLeft: isAligned
+          ? childrenWidth / 2 - arrowWidth
+          : popupWidth / 2 + popupOverflow * -1,
         arrowTop: -arrowWidth - 5,
         arrowTransform: '',
         placement: 'bottom',
         rotate: 180,
-        popupInitialPosition: `translate3d(${positionX + popupOverflow}px, ${
+        popupInitialPosition: `translate3d(${!isAligned ? positionX + popupOverflow : positionX}px, ${
           positionY - TOTAL_USED_SPACE
         }px, 0)`,
         popupPosition: `translate3d(${
-          positionX + popupOverflow
+          !isAligned ? positionX + popupOverflow : positionX
         }px, ${positionY}px, 0)`,
       }
     }
     case 'left': {
       const positionX =
         overloadedChildrenLeft - popupWidth - arrowWidth - SPACE * 2
-      const positionY =
-        overloadedChildrenTop +
-        scrollTopValue -
-        popupHeight / 2 +
-        childrenHeight / 2
+      const positionY = isAligned
+        ? overloadedChildrenTop + scrollTopValue
+        : overloadedChildrenTop +
+          scrollTopValue -
+          popupHeight / 2 +
+          childrenHeight / 2
 
       return {
         arrowLeft: popupWidth + arrowWidth + 5,
-        arrowTop: popupHeight / 2 + popupOverflow * -1,
+        arrowTop: isAligned
+          ? childrenHeight / 2 - arrowWidth
+          : popupHeight / 2 + popupOverflow * -1,
         arrowTransform: 'translate(-50%, -50%)',
         placement: 'left',
         rotate: -90,
@@ -319,15 +330,18 @@
     }
     case 'right': {
       const positionX = overloadedChildrenRight + arrowWidth + SPACE * 2
-      const positionY =
-        overloadedChildrenTop +
-        scrollTopValue -
-        popupHeight / 2 +
-        childrenHeight / 2
+      const positionY = isAligned
+        ? overloadedChildrenTop + scrollTopValue
+        : overloadedChildrenTop +
+          scrollTopValue -
+          popupHeight / 2 +
+          childrenHeight / 2
 
       return {
         arrowLeft: -arrowWidth - 5,
-        arrowTop: popupHeight / 2 + popupOverflow * -1,
+        arrowTop: isAligned
+          ? childrenHeight / 2 - arrowWidth
+          : popupHeight / 2 + popupOverflow * -1,
         arrowTransform: 'translate(50%, -50%)',
         placement: 'right',
         rotate: 90,
@@ -341,8 +355,9 @@
     }
     default: {
       // top placement is default value
-      const positionX =
-        overloadedChildrenLeft + childrenWidth / 2 - popupWidth / 2
+      const positionX = isAligned
+        ? overloadedChildrenLeft
+        : overloadedChildrenLeft + childrenWidth / 2 - popupWidth / 2
       const positionY =
         overloadedChildrenTop +
         scrollTopValue -
@@ -351,16 +366,18 @@
         SPACE
 
       return {
-        arrowLeft: popupWidth / 2 + popupOverflow * -1,
+        arrowLeft: isAligned
+          ? childrenWidth / 2 - arrowWidth
+          : popupWidth / 2 + popupOverflow * -1,
         arrowTop: popupHeight - 1,
         arrowTransform: '',
         placement: 'top',
         rotate: 0,
-        popupInitialPosition: `translate3d(${positionX + popupOverflow}px, ${
+        popupInitialPosition: `translate3d(${!isAligned ? positionX + popupOverflow : positionX}px, ${
           positionY + TOTAL_USED_SPACE
         }px, 0)`,
         popupPosition: `translate3d(${
-          positionX + popupOverflow
+          !isAligned ? positionX + popupOverflow : positionX
         }px, ${positionY}px, 0)`,
       }
     }

packages/ui/src/components/Popup/index.tsx

@@ -23,7 +23,7 @@ import { createPortal } from 'react-dom'
 import { isClientSide } from '../../helpers/isClientSide'
 import type { PositionsType } from './animations'
 import { animation, exitAnimation } from './animations'
-import type { PopupPlacement } from './helpers'
+import type { PopupAlign, PopupPlacement } from './helpers'
 import {
   DEFAULT_ARROW_WIDTH,
   DEFAULT_POSITIONS,
@@ -133,6 +133,10 @@ type PopupProps = {
    * `auto` placement will change the position of the popup if it doesn't fit in the viewport.
    */
   placement?: PopupPlacement
+  /**
+   * Align the popup to the start or center of the children.
+   */
+  align?: PopupAlign
   /**
    * Content of the popup, preferably text inside.
    */
@@ -190,6 +194,7 @@ export const Popup = forwardRef(
       children,
       text = '',
       placement = 'auto',
+      align = 'center',
       id,
       className,
       containerFullWidth,
@@ -262,10 +267,11 @@ export const Popup = forwardRef(
             popupRef: innerPopupRef,
             popupPortalTarget: popupPortalTarget as HTMLElement,
             hasArrow,
+            align,
           }),
         )
       }
-    }, [hasArrow, placement, popupPortalTarget])
+    }, [hasArrow, placement, popupPortalTarget, align])
 
     /**
      * This function is called when we need to recompute positions of popup due to window scroll or resize.

packages/ui/src/components/SelectInputV2/Dropdown.tsx

@@ -847,6 +847,7 @@ export const Dropdown = ({
       role="dialog"
       debounceDelay={0}
       containerFullWidth
+      align="start"
     >
       {children}
     </StyledPopup>

packages/ui/src/components/SelectInputV2/__stories__/Playground.stories.tsx

@@ -6,7 +6,7 @@ export const Playground = Template.bind({})
 Playground.args = { ...Template.args, options: dataUnGrouped, helper: 'helper' }
 Playground.decorators = [
   StoryComponent => (
-    <div style={{ height: '80px', width: '200px' }}>
+    <div style={{ height: '80px' }}>
       <StoryComponent />
     </div>
   ),