From 4aee3be0cc4673864132beccc6bbb210921cd972 Mon Sep 17 00:00:00 2001
From: Anastasiia Mishchenko <mishchenko@textkernel.nl>
Date: Tue, 3 Dec 2024 18:19:12 +0000
Subject: [PATCH 01/16] fix: UI, types and functionality of Selected Item Badge

---
 .../SelectedItemBadge/SelectedItemBadge.scss  | 185 +++++++-----------
 .../SelectedItemBadge/SelectedItemBadge.tsx   |  60 ++++--
 stories/atoms/Dropdown.stories.tsx            |   4 +-
 .../organisms/SelectedItemBadge.stories.tsx   |  20 +-
 4 files changed, 132 insertions(+), 137 deletions(-)

diff --git a/src/components/SelectedItemBadge/SelectedItemBadge.scss b/src/components/SelectedItemBadge/SelectedItemBadge.scss
index fe5598226..41d769eac 100644
--- a/src/components/SelectedItemBadge/SelectedItemBadge.scss
+++ b/src/components/SelectedItemBadge/SelectedItemBadge.scss
@@ -1,70 +1,3 @@
-@use 'sass:map';
-
-@mixin common-button-style(
-    $hoverColor: var(--color-background-neutral-subtlest-hover),
-    $activeColor: var(--color-background-neutral-subtlest-pressed)
-) {
-    & {
-        width: var(--space-400);
-        height: var(--space-400);
-        align-items: center;
-        background-color: var(--transparent);
-        cursor: pointer;
-        display: flex;
-        flex-shrink: 0;
-        justify-content: center;
-    }
-
-    &:hover:not([disabled]) {
-        background-color: $hoverColor;
-    }
-    &:active:not([disabled]) {
-        background-color: $activeColor;
-    }
-
-    &[disabled] {
-        cursor: not-allowed;
-    }
-}
-
-@mixin selected-state(
-    $selectedColor: var(--color-background-selected-subtlest-default),
-    $hoverColor: var(--color-background-selected-subtlest-hover),
-    $activeColor: var(--color-background-selected-subtlest-pressed)
-) {
-    & {
-        background-color: $selectedColor;
-    }
-    &:hover:not([disabled]) {
-        background-color: $hoverColor;
-    }
-    &:active:not([disabled]) {
-        background-color: $activeColor;
-    }
-    &[disabled] {
-        background-color: $selectedColor;
-    }
-}
-
-$icon-status-colors: (
-    mandatory: (
-        normal: var(--color-icon-success-default),
-        disabled: var(--color-icon-success-disabled),
-    ),
-    important: (
-        normal: var(--color-icon-cautious-default),
-        disabled: var(--color-icon-cautious-disabled),
-    ),
-    optional: (
-        normal: var(--color-icon-subtle),
-        disabled: var(--color-icon-disabled),
-    ),
-    exclude: (
-        normal: var(--color-icon-critical-default),
-        disabled: var(--color-icon-critical-disabled),
-    ),
-);
-
 .SelectedItemBadge {
     width: 100%;
     height: var(--space-400);
@@ -72,30 +5,6 @@ $icon-status-colors: (
     border-radius: var(--space-100);
     display: flex;
     align-items: center;
-    overflow: hidden;
-
-    &__priorityButton {
-        padding: 0;
-        border: 0;
-        border-right: 1px solid var(--color-border-subtle);
-
-        @include common-button-style();
-    }
-
-    &__icon {
-        height: 20px;
-        width: 20px;
-
-        @each $status, $colors in $icon-status-colors {
-            &--#{$status} {
-                fill: map.get($colors, normal);
-
-                &[disabled] {
-                    fill: map.get($colors, disabled);
-                }
-            }
-        }
-    }
 
     &__optionText {
         max-width: var(--space-600);
@@ -109,34 +18,84 @@ $icon-status-colors: (
 
     &__optionButton {
         width: 100%;
+        height: 100%;
         padding: 0 var(--space-100);
+        border-radius: inherit;
+        background-color: var(--transparent);
         border: 0;
-        flex-grow: 1;
+        display: flex;
+        align-items: center;
+        justify-content: center;
         gap: var(--space-50);
+        flex-grow: 1;
 
-        &[disabled] {
-            .SelectedItemBadge__optionText {
-                color: var(--color-text-info-disabled);
-            }
+        cursor: pointer;
+
+        &:focus-visible {
+            box-shadow: 0 0 0 var(--space-25) var(--color-info-20, #99caff);
+            outline: none;
         }
 
-        @include common-button-style();
-    }
+        &:hover:not([disabled]) {
+            background-color: var(--color-background-neutral-subtlest-hover);
+        }
+
+        &:active:not([disabled]) {
+            background-color: var(--color-background-neutral-subtlest-pressed);
+        }
+
+        &[disabled] .SelectedItemBadge__optionText {
+            color: var(--color-text-info-disabled);
+        }
+
+        &--hasPriorityList {
+            border-left: 1px solid var(--color-border-subtlest);
+            border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
+        }
+
+        &--onDelete {
+            border-right: 1px solid var(--color-border-subtlest);
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+        }
+
+        &[data-state='open'] {
+            pointer-events: auto;
+            background-color: var(--color-background-selected-subtlest-default);
+
+            &:hover {
+                background-color: var(--color-background-selected-subtlest-hover);
+            }
+
+            &:active:not([disabled]) {
+                background-color: var(--color-background-selected-subtlest-pressed);
+            }
 
-    &__priorityButton--isSelected,
-    &__optionButton--isSelected {
-        @include selected-state();
+            &[disabled] {
+                background-color: var(--color-background-selected-subtlest-default);
+            }
+        }
     }
 
     &__valueContainer {
         width: 100%;
+        height: 100%;
         padding: 0 var(--space-100);
-        float: left;
         display: flex;
+        align-items: center;
         justify-content: center;
         gap: var(--space-50);
         overflow: auto;
         cursor: default;
+
+        &--hasPriorityList {
+            border-left: 1px solid var(--color-border-subtle);
+        }
+
+        &--onDelete {
+            border-right: 1px solid var(--color-border-subtle);
+        }
     }
 
     &__valueText {
@@ -159,21 +118,23 @@ $icon-status-colors: (
         gap: var(--space-100);
     }
 
-    &__deleteButton {
-        border: 0;
-        border-left: 1px solid var(--color-border-subtle);
-        padding: 0;
+    .SelectedItemBadge__priorityButton {
+        padding: var(--space-100);
+        border-radius: var(--space-100) 0 0 var(--space-100);
+        flex-shrink: 0;
+    }
+
+    .SelectedItemBadge__deleteButton {
+        padding: var(--space-100);
+        border-radius: 0 var(--space-100) var(--space-100) 0;
+        flex-shrink: 0;
 
         & svg {
             fill: var(--color-icon-subtle);
         }
 
-        &[disabled] {
-            & svg {
-                fill: var(--color-icon-disabled);
-            }
+        &[disabled] & svg {
+            fill: var(--color-icon-disabled);
         }
-
-        @include common-button-style();
     }
 }
diff --git a/src/components/SelectedItemBadge/SelectedItemBadge.tsx b/src/components/SelectedItemBadge/SelectedItemBadge.tsx
index 703b10da8..457808163 100644
--- a/src/components/SelectedItemBadge/SelectedItemBadge.tsx
+++ b/src/components/SelectedItemBadge/SelectedItemBadge.tsx
@@ -6,15 +6,16 @@ import { Text } from '../Text';
 import styles from './SelectedItemBadge.scss';
 import { DropdownContent, DropdownRoot, DropdownTrigger, SingleSelectItemProps } from '../Dropdown';
 import { PrioritySelector, PrioritySelectorProps } from '../PrioritySelector';
+import { IconButton } from '../Buttons';
 
-export interface Props<PriorityItemValue>
+export interface Props<PriorityItemValue, ChildrenItemValue>
     extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
     /** Children nodes to be rendered within the Dropdown,
      *  which is triggered by the main button
      * */
     children?: (
-        | React.ReactElement<SingleSelectItemProps<PriorityItemValue>>
-        | React.ReactElement<SingleSelectItemProps<PriorityItemValue>>[]
+        | React.ReactElement<SingleSelectItemProps<ChildrenItemValue>>
+        | React.ReactElement<SingleSelectItemProps<ChildrenItemValue>>[]
     )[];
     /** Label of the currently selected option item from filter */
     label: React.ReactNode;
@@ -36,8 +37,8 @@ export interface Props<PriorityItemValue>
 
 const { block, elem } = bem('SelectedItemBadge', styles);
 
-export const SelectedItemBadge = React.forwardRef<HTMLElement, Props<string>>(
-    (
+export const SelectedItemBadge = React.forwardRef(
+    <PriorityItemValue, ChildrenItemValue>(
         {
             children,
             label,
@@ -49,9 +50,15 @@ export const SelectedItemBadge = React.forwardRef<HTMLElement, Props<string>>(
             priority,
             refElement,
             ...rest
-        },
-        ref
+        }: Props<PriorityItemValue, ChildrenItemValue>,
+        ref: React.Ref<HTMLElement>
     ) => {
+        const [isOpen, setIsOpen] = React.useState(false);
+
+        const handleOpenStateChange = (open: boolean) => {
+            setIsOpen(open);
+        };
+
         const badgeRef = React.useRef<HTMLElement>(null);
 
         const hasPriorityList = priority && priority.list.length > 0;
@@ -63,15 +70,26 @@ export const SelectedItemBadge = React.forwardRef<HTMLElement, Props<string>>(
 
         return (
             <div {...rest} {...block()} ref={badgeRef || ref}>
-                {hasPriorityList && <PrioritySelector {...priority} parentRef={badgeRef} />}
+                {hasPriorityList && (
+                    <PrioritySelector
+                        {...priority}
+                        triggerClassName={`${elem('priorityButton').className} ${priority.triggerClassName}`}
+                        isDisabled={isDisabled}
+                        parentRef={badgeRef}
+                    />
+                )}
                 {children ? (
-                    <DropdownRoot>
-                        <DropdownTrigger asChild>
+                    <DropdownRoot onOpenChange={handleOpenStateChange}>
+                        <DropdownTrigger asChild disabled={isDisabled}>
                             <button
                                 aria-label={buttonLabel}
                                 disabled={isDisabled}
                                 type="button"
-                                {...elem('optionButton')}
+                                {...elem('optionButton', {
+                                    hasPriorityList,
+                                    onDelete: Boolean(onDelete),
+                                    isOpen,
+                                })}
                             >
                                 <Text inline size="small" {...elem('valueText')}>
                                     {label}
@@ -86,14 +104,19 @@ export const SelectedItemBadge = React.forwardRef<HTMLElement, Props<string>>(
                         <DropdownContent
                             {...elem('badgeDropdownList')}
                             sideOffset={6}
-                            alignOffset={priority ? -32 : 0}
+                            alignOffset={priority ? -34 : 0}
                             refElement={badgeRef}
                         >
                             {children}
                         </DropdownContent>
                     </DropdownRoot>
                 ) : (
-                    <div {...elem('valueContainer')}>
+                    <div
+                        {...elem('valueContainer', {
+                            hasPriorityList,
+                            onDelete: Boolean(onDelete),
+                        })}
+                    >
                         <Text inline size="small" {...elem('valueText')}>
                             {label}
                         </Text>
@@ -105,17 +128,20 @@ export const SelectedItemBadge = React.forwardRef<HTMLElement, Props<string>>(
                     </div>
                 )}
                 {onDelete && (
-                    <button
+                    <IconButton
                         aria-label={deleteButtonLabel}
                         disabled={isDisabled}
                         onClick={handleOnDelete}
                         type="button"
+                        variant="ghost"
                         {...elem('deleteButton')}
                     >
-                        <Close viewBox="0 0 24 24" style={{ width: '20px', height: '20px' }} />
-                    </button>
+                        <Close viewBox="0 0 24 24" />
+                    </IconButton>
                 )}
             </div>
         );
     }
-);
+) as <PriorityItemValue, ChildrenItemValue>(
+    p: Props<PriorityItemValue, ChildrenItemValue> & { ref?: React.Ref<HTMLElement> }
+) => React.ReactElement;
diff --git a/stories/atoms/Dropdown.stories.tsx b/stories/atoms/Dropdown.stories.tsx
index ee812e434..000f94952 100644
--- a/stories/atoms/Dropdown.stories.tsx
+++ b/stories/atoms/Dropdown.stories.tsx
@@ -317,11 +317,11 @@ export const _DropdownWithSelectedItemBadge: Story = {
                 <DropdownPortal>
                     <DropdownContent {...args} refElement={ref}>
                         <div style={{ padding: '8px' }}>
-                            <SelectedItemBadge
-                                {...args}
+                            <SelectedItemBadge<string, string>
                                 priority={
                                     priority && {
                                         ...priority,
+                                        list: priorityList,
                                         selectedItem: selectedPriorityItem,
                                         onChange: handlePriorityChange,
                                     }
diff --git a/stories/organisms/SelectedItemBadge.stories.tsx b/stories/organisms/SelectedItemBadge.stories.tsx
index 8b7dd88ed..e4aa3571f 100644
--- a/stories/organisms/SelectedItemBadge.stories.tsx
+++ b/stories/organisms/SelectedItemBadge.stories.tsx
@@ -38,7 +38,11 @@ export const _SelectedItemBadge: Story = {
             list: priorityList,
             buttonLabel: 'Priority',
             onChange: () => {},
-            selectedItem: { priority: 'mandatory', label: 'Mandatory', value: 'required' },
+            selectedItem: {
+                priority: 'mandatory',
+                label: 'Mandatory',
+                value: 'required',
+            },
         },
         buttonLabel: 'Select radius',
     },
@@ -46,7 +50,7 @@ export const _SelectedItemBadge: Story = {
         const [selectedPriorityItem, setSelectedPriorityItem] = React.useState<
             PriorityItemType<string>
         >(
-            args.priority?.selectedItem || {
+            (args.priority?.selectedItem as PriorityItemType<string>) || {
                 priority: 'mandatory',
                 label: 'Mandatory',
                 value: 'required',
@@ -80,11 +84,12 @@ export const _SelectedItemBadge: Story = {
 
         return (
             <div style={{ width: '200px' }}>
-                <SelectedItemBadge
+                <SelectedItemBadge<string, string>
                     {...args}
                     priority={
                         args.priority && {
                             ...args.priority,
+                            list: priorityList,
                             selectedItem: selectedPriorityItem,
                             onChange: handlePriorityChange,
                         }
@@ -124,7 +129,7 @@ export const _SelectedItemBadgeMultiSelect: Story = {
         const [selectedPriorityItem, setSelectedPriorityItem] = React.useState<
             PriorityItemType<string>
         >(
-            args.priority?.selectedItem || {
+            (args.priority?.selectedItem as PriorityItemType<string>) || {
                 priority: 'mandatory',
                 label: 'Mandatory',
                 value: 'required',
@@ -212,6 +217,7 @@ export const _SelectedItemBadgeMultiSelect: Story = {
                     priority={
                         args.priority && {
                             ...args.priority,
+                            list: priorityList,
                             selectedItem: selectedPriorityItem,
                             onChange: handlePriorityChange,
                         }
@@ -331,7 +337,7 @@ export const SelectedItemBadgeWithoutChildren: Story = {
         const [selectedPriorityItem, setSelectedPriorityItem] = React.useState<
             PriorityItemType<string>
         >(
-            args.priority?.selectedItem || {
+            (args.priority?.selectedItem as PriorityItemType<string>) || {
                 priority: 'mandatory',
                 label: 'Mandatory',
                 value: 'required',
@@ -363,6 +369,7 @@ export const SelectedItemBadgeWithoutChildren: Story = {
                     priority={
                         args.priority && {
                             ...args.priority,
+                            list: priorityList,
                             selectedItem: selectedPriorityItem,
                             onChange: handlePriorityChange,
                         }
@@ -391,7 +398,7 @@ export const SelectedItemBadgeWithoutCloseButton: Story = {
         const [selectedPriorityItem, setSelectedPriorityItem] = React.useState<
             PriorityItemType<string>
         >(
-            args.priority?.selectedItem || {
+            (args.priority?.selectedItem as PriorityItemType<string>) || {
                 priority: 'mandatory',
                 label: 'Mandatory',
                 value: 'required',
@@ -424,6 +431,7 @@ export const SelectedItemBadgeWithoutCloseButton: Story = {
                     priority={
                         args.priority && {
                             ...args.priority,
+                            list: priorityList,
                             selectedItem: selectedPriorityItem,
                             onChange: handlePriorityChange,
                         }

From bd6315177b3d92f63eb29c045933c442d7c50a18 Mon Sep 17 00:00:00 2001
From: Anastasiia Mishchenko <mishchenko@textkernel.nl>
Date: Wed, 4 Dec 2024 14:02:13 +0000
Subject: [PATCH 02/16] feat: use tooltip for pill content for consistency

---
 .../Pill/PillButtonEnhanced/PillButtonEnhanced.tsx          | 6 +++---
 .../__snapshots__/PillButtonEnhanced.spec.tsx.snap          | 4 ----
 .../Pill/__tests__/__snapshots__/Pill.spec.tsx.snap         | 2 --
 3 files changed, 3 insertions(+), 9 deletions(-)

diff --git a/src/components/Pill/PillButtonEnhanced/PillButtonEnhanced.tsx b/src/components/Pill/PillButtonEnhanced/PillButtonEnhanced.tsx
index 0caa9b427..0f95d4e7d 100644
--- a/src/components/Pill/PillButtonEnhanced/PillButtonEnhanced.tsx
+++ b/src/components/Pill/PillButtonEnhanced/PillButtonEnhanced.tsx
@@ -99,9 +99,9 @@ export const PillButtonEnhanced = React.forwardRef(
                         {!!content && (
                             <>
                                 <span {...elem('valueSeparator')}>:</span>
-                                <span {...elem('content')} title={content}>
-                                    {content}
-                                </span>
+                                <Tooltip content={content}>
+                                    <span {...elem('content')}>{content}</span>
+                                </Tooltip>
                             </>
                         )}
                         {additionalContentLabel && (
diff --git a/src/components/Pill/PillButtonEnhanced/__tests__/__snapshots__/PillButtonEnhanced.spec.tsx.snap b/src/components/Pill/PillButtonEnhanced/__tests__/__snapshots__/PillButtonEnhanced.spec.tsx.snap
index 3ccfdf924..7d1eeedcf 100644
--- a/src/components/Pill/PillButtonEnhanced/__tests__/__snapshots__/PillButtonEnhanced.spec.tsx.snap
+++ b/src/components/Pill/PillButtonEnhanced/__tests__/__snapshots__/PillButtonEnhanced.spec.tsx.snap
@@ -29,7 +29,6 @@ exports[`<PillButtonEnhanced> component in active, collapsed state (with content
       </span>
       <span
         class="PillButtonEnhanced__content"
-        title="This pill is in use"
       >
         This pill is in use
       </span>
@@ -92,7 +91,6 @@ exports[`<PillButtonEnhanced> component in active, open state (content and isOpe
       </span>
       <span
         class="PillButtonEnhanced__content"
-        title="This pill is in use"
       >
         This pill is in use
       </span>
@@ -256,7 +254,6 @@ exports[`<PillButtonEnhanced> component with additional props should render corr
       </span>
       <span
         class="PillButtonEnhanced__content"
-        title="This pill is in use"
       >
         This pill is in use
       </span>
@@ -320,7 +317,6 @@ exports[`<PillButtonEnhanced> component with additional props should set style a
       </span>
       <span
         class="PillButtonEnhanced__content"
-        title="This pill is in use"
       >
         This pill is in use
       </span>
diff --git a/src/components/Pill/__tests__/__snapshots__/Pill.spec.tsx.snap b/src/components/Pill/__tests__/__snapshots__/Pill.spec.tsx.snap
index b396b2c2b..9a4b10850 100644
--- a/src/components/Pill/__tests__/__snapshots__/Pill.spec.tsx.snap
+++ b/src/components/Pill/__tests__/__snapshots__/Pill.spec.tsx.snap
@@ -179,7 +179,6 @@ exports[`<Pill> component with enhanced button variant should open dropdown when
         </span>
         <span
           class="PillButtonEnhanced__content"
-          title="Pill content"
         >
           Pill content
         </span>
@@ -276,7 +275,6 @@ exports[`<Pill> component with enhanced button variant should render correctly 1
         </span>
         <span
           class="PillButtonEnhanced__content"
-          title="Pill content"
         >
           Pill content
         </span>

From ddd0225553941649c056df026979a885e97f63a4 Mon Sep 17 00:00:00 2001
From: Anastasiia Mishchenko <mishchenko@textkernel.nl>
Date: Wed, 4 Dec 2024 16:06:13 +0000
Subject: [PATCH 03/16] fix: completelly fix the selectedItembadge

---
 .../SelectedItemBadge/SelectedItemBadge.scss  |  6 ++--
 .../SelectedItemBadge/SelectedItemBadge.tsx   | 31 ++++++++++++-------
 2 files changed, 23 insertions(+), 14 deletions(-)

diff --git a/src/components/SelectedItemBadge/SelectedItemBadge.scss b/src/components/SelectedItemBadge/SelectedItemBadge.scss
index 41d769eac..54fa74e3e 100644
--- a/src/components/SelectedItemBadge/SelectedItemBadge.scss
+++ b/src/components/SelectedItemBadge/SelectedItemBadge.scss
@@ -53,7 +53,6 @@
             border-top-left-radius: 0;
             border-bottom-left-radius: 0;
         }
-
         &--onDelete {
             border-right: 1px solid var(--color-border-subtlest);
             border-top-right-radius: 0;
@@ -105,13 +104,14 @@
         white-space: nowrap;
     }
 
-    .badgeDropdownList {
+    &__badgeDropdownList {
         width: 100%;
         border-radius: var(--space-100);
+        z-index: 600;
         overflow: hidden;
     }
 
-    .badgeListItem {
+    &__badgeListItem {
         display: flex;
         align-items: center;
         justify-content: flex-start;
diff --git a/src/components/SelectedItemBadge/SelectedItemBadge.tsx b/src/components/SelectedItemBadge/SelectedItemBadge.tsx
index 457808163..d21bc5a4b 100644
--- a/src/components/SelectedItemBadge/SelectedItemBadge.tsx
+++ b/src/components/SelectedItemBadge/SelectedItemBadge.tsx
@@ -1,10 +1,15 @@
 import * as React from 'react';
 import Close from '@material-design-icons/svg/round/close.svg';
-
 import { bem } from '../../utils';
 import { Text } from '../Text';
 import styles from './SelectedItemBadge.scss';
-import { DropdownContent, DropdownRoot, DropdownTrigger, SingleSelectItemProps } from '../Dropdown';
+import {
+    DropdownContent,
+    DropdownPortal,
+    DropdownRoot,
+    DropdownTrigger,
+    SingleSelectItemProps,
+} from '../Dropdown';
 import { PrioritySelector, PrioritySelectorProps } from '../PrioritySelector';
 import { IconButton } from '../Buttons';
 
@@ -61,13 +66,14 @@ export const SelectedItemBadge = React.forwardRef(
 
         const badgeRef = React.useRef<HTMLElement>(null);
 
+        const triggerRef = React.useRef<HTMLButtonElement>(null);
+
         const hasPriorityList = priority && priority.list.length > 0;
 
         const handleOnDelete = (e: React.KeyboardEvent | React.MouseEvent) => {
             e.stopPropagation();
             onDelete?.(e);
         };
-
         return (
             <div {...rest} {...block()} ref={badgeRef || ref}>
                 {hasPriorityList && (
@@ -82,6 +88,7 @@ export const SelectedItemBadge = React.forwardRef(
                     <DropdownRoot onOpenChange={handleOpenStateChange}>
                         <DropdownTrigger asChild disabled={isDisabled}>
                             <button
+                                ref={triggerRef}
                                 aria-label={buttonLabel}
                                 disabled={isDisabled}
                                 type="button"
@@ -101,14 +108,16 @@ export const SelectedItemBadge = React.forwardRef(
                                 )}
                             </button>
                         </DropdownTrigger>
-                        <DropdownContent
-                            {...elem('badgeDropdownList')}
-                            sideOffset={6}
-                            alignOffset={priority ? -34 : 0}
-                            refElement={badgeRef}
-                        >
-                            {children}
-                        </DropdownContent>
+                        <DropdownPortal>
+                            <DropdownContent
+                                {...elem('badgeDropdownList')}
+                                sideOffset={6}
+                                alignOffset={priority ? -34 : 0}
+                                refElement={badgeRef}
+                            >
+                                {children}
+                            </DropdownContent>
+                        </DropdownPortal>
                     </DropdownRoot>
                 ) : (
                     <div

From 2a4fbc52dc172bcbd1328583c88d9c6b46ceb6f4 Mon Sep 17 00:00:00 2001
From: Anastasiia Mishchenko <mishchenko@textkernel.nl>
Date: Wed, 4 Dec 2024 18:37:20 +0000
Subject: [PATCH 04/16] feat: made the height of the pill dropdown adjustable

---
 .../DropdownContent/DropdownContent.tsx       |  6 +-
 src/components/Pill/Pill.tsx                  |  4 +
 .../Pill/PillDropdown/PillDropdown.tsx        |  6 +-
 .../Autosuggest/Autosuggest.tsx               |  4 +
 .../SelectBase/SelectBase.tsx                 |  9 ++
 .../SelectComponents/SelectBase/interfaces.ts |  2 +
 stories/molecules/Pill.stories.tsx            | 99 +++++++++++++++----
 7 files changed, 106 insertions(+), 24 deletions(-)

diff --git a/src/components/Dropdown/DropdownContent/DropdownContent.tsx b/src/components/Dropdown/DropdownContent/DropdownContent.tsx
index 9f21df4a4..8ae988d84 100644
--- a/src/components/Dropdown/DropdownContent/DropdownContent.tsx
+++ b/src/components/Dropdown/DropdownContent/DropdownContent.tsx
@@ -6,12 +6,14 @@ import styles from '../Dropdown.scss';
 interface Props extends DropdownMenuContentProps {
     /** Ref element used to make the width of the Content equal to the parent width */
     refElement?: React.RefObject<HTMLElement | null>;
+    /** The height for the dropdown content. */
+    height?: string;
 }
 
 const { block } = bem('DropdownContent', styles);
 
 export const DropdownContent = React.forwardRef<HTMLElement, Props>(
-    ({ refElement, ...rest }, ref) => {
+    ({ refElement, height, ...rest }, ref) => {
         const [width, setWidth] = React.useState<number>();
 
         useEffect(() => {
@@ -27,7 +29,7 @@ export const DropdownContent = React.forwardRef<HTMLElement, Props>(
                 {...block(rest)}
                 align="start"
                 sideOffset={6}
-                style={{ minWidth: width }}
+                style={{ minWidth: width, minHeight: height }}
             />
         );
     }
diff --git a/src/components/Pill/Pill.tsx b/src/components/Pill/Pill.tsx
index 63b9c19de..7c88d216a 100644
--- a/src/components/Pill/Pill.tsx
+++ b/src/components/Pill/Pill.tsx
@@ -34,6 +34,8 @@ export type Props<PriorityItemValue> = (
     noPaddingInDropdown?: boolean;
     /** other props that need to be applied to the dropdown container */
     additionalDropdownProps?: object;
+    /** The height for the dropdown content. */
+    dropdownHeight?: string;
 };
 
 /**
@@ -54,6 +56,7 @@ export const Pill = <PriorityItemValue extends unknown>({
     dropdownRef,
     noPaddingInDropdown = false,
     additionalDropdownProps = {},
+    dropdownHeight = undefined,
     onClose,
     ...rest
 }: Props<PriorityItemValue>) => {
@@ -87,6 +90,7 @@ export const Pill = <PriorityItemValue extends unknown>({
             )}
             <DropdownPortal>
                 <PillDropdown
+                    height={dropdownHeight}
                     ref={dropdownRef}
                     noPadding={noPaddingInDropdown}
                     {...additionalDropdownProps}
diff --git a/src/components/Pill/PillDropdown/PillDropdown.tsx b/src/components/Pill/PillDropdown/PillDropdown.tsx
index 2be1a270f..d127a0443 100644
--- a/src/components/Pill/PillDropdown/PillDropdown.tsx
+++ b/src/components/Pill/PillDropdown/PillDropdown.tsx
@@ -11,13 +11,15 @@ export interface Props extends Omit<React.HTMLAttributes<HTMLDivElement>, 'child
      * You can use the CSS variable --pill-dropdown-padding to add padding as required.
      * */
     noPadding?: boolean;
+    /** The height for the dropdown content. */
+    height?: string;
 }
 
 const { block } = bem('PillDropdown', styles);
 
 export const PillDropdown = React.forwardRef<HTMLElement, Props>(
-    ({ noPadding = false, children, ...rest }, ref) => (
-        <DropdownContent ref={ref} {...rest} {...block({ noPadding, ...rest })}>
+    ({ noPadding = false, children, height, ...rest }, ref) => (
+        <DropdownContent height={height} ref={ref} {...rest} {...block({ noPadding, ...rest })}>
             {children}
         </DropdownContent>
     )
diff --git a/src/components/SelectComponents/Autosuggest/Autosuggest.tsx b/src/components/SelectComponents/Autosuggest/Autosuggest.tsx
index 2d80bb821..eccb9ab13 100644
--- a/src/components/SelectComponents/Autosuggest/Autosuggest.tsx
+++ b/src/components/SelectComponents/Autosuggest/Autosuggest.tsx
@@ -53,6 +53,8 @@ export interface Props<S>
     /** render custom list values */
     customListRender?: (suggestions) => React.ReactNode;
     clearInputAfterSelection?: boolean;
+    /** callback function to be called whenever the dropdown state changes. */
+    onDropdownStateChange?: (isOpen: boolean) => void;
 }
 
 const { elem } = bem('Autosuggest', styles);
@@ -94,6 +96,7 @@ export function Autosuggest<S>({
     iconNode,
     customListRender,
     clearInputAfterSelection = true,
+    onDropdownStateChange,
     ...rest
 }: Props<S>) {
     const inputRef = inputRefFromProps || React.createRef<HTMLInputElement>();
@@ -242,6 +245,7 @@ export function Autosuggest<S>({
     return (
         <SelectBase
             {...rest}
+            onDropdownStateChange={onDropdownStateChange}
             suggestions={suggestions}
             suggestionToString={suggestionToString}
             inputRef={inputRef}
diff --git a/src/components/SelectComponents/SelectBase/SelectBase.tsx b/src/components/SelectComponents/SelectBase/SelectBase.tsx
index dd2039b8d..a7642d3ce 100644
--- a/src/components/SelectComponents/SelectBase/SelectBase.tsx
+++ b/src/components/SelectComponents/SelectBase/SelectBase.tsx
@@ -35,6 +35,7 @@ export function SelectBase<S>({
     clearInputAfterSelection = false,
     highlightOnEmptyInput = true,
     initInputValue,
+    onDropdownStateChange,
     autoFocus = false,
     ...rest
 }: Props<S>) {
@@ -161,18 +162,26 @@ export function SelectBase<S>({
     };
 
     const stateUpdater = (change, state) => {
+        const isOpen = change.isOpen ?? state.isOpen;
         switch (change.type) {
             case Downshift.stateChangeTypes.blurInput:
                 handleBlur();
+                onDropdownStateChange?.(isOpen);
                 break;
             case Downshift.stateChangeTypes.clickButton:
                 setFocused(change.isOpen);
+                onDropdownStateChange?.(isOpen);
                 break;
             case Downshift.stateChangeTypes.changeInput:
                 if (state.isOpen !== focused) {
                     setFocused(state.isOpen);
+                    onDropdownStateChange?.(isOpen);
                 }
                 break;
+            case Downshift.stateChangeTypes.unknown:
+                onDropdownStateChange?.(isOpen);
+                break;
+
             default:
                 break;
         }
diff --git a/src/components/SelectComponents/SelectBase/interfaces.ts b/src/components/SelectComponents/SelectBase/interfaces.ts
index c608ee92c..be5150fbf 100644
--- a/src/components/SelectComponents/SelectBase/interfaces.ts
+++ b/src/components/SelectComponents/SelectBase/interfaces.ts
@@ -102,4 +102,6 @@ export interface Props<S>
     blurredRenderer: BlurredRendererHelpers<S>;
     /** highlighting for first item will be added if input is empty */
     highlightOnEmptyInput?: boolean;
+    /** callback function to be called whenever the dropdown state changes. */
+    onDropdownStateChange?: (isOpen: boolean) => void;
 }
diff --git a/stories/molecules/Pill.stories.tsx b/stories/molecules/Pill.stories.tsx
index 317b7bf56..7f17022c9 100644
--- a/stories/molecules/Pill.stories.tsx
+++ b/stories/molecules/Pill.stories.tsx
@@ -8,8 +8,15 @@ import {
     PriorityItemType,
     SelectedItemBadge,
     SingleSelectItem,
+    Autosuggest,
 } from '@textkernel/oneui';
 import { DropdownMenu } from '@radix-ui/react-dropdown-menu';
+import {
+    SUGGESTION_TO_STRING,
+    SUGGESTIONS,
+} from '@textkernel/oneui/components/SelectComponents/Autosuggest/__mocks__/suggestions';
+
+type TSuggestion = { name: string };
 
 const DummyComponent = () => (
     <>
@@ -81,6 +88,11 @@ export const _Pill: Story = {
             label: 'Mandatory',
             value: 'required',
         });
+        const [dropdownHeight, setDropdownHeight] = React.useState<string>();
+        const [inputValue, setInputValue] = React.useState('');
+        const [singleSelectedText, setSingleSelectedText] = React.useState('');
+
+        const inputRef = React.createRef<HTMLInputElement>();
 
         const handlePrioritySelect = (selectedItem: PriorityItemType<string>) => {
             console.log('new item selected: ', selectedItem);
@@ -88,10 +100,41 @@ export const _Pill: Story = {
         };
 
         const badgeOption = ['some', 'other', 'options'];
+
         const handleOptionChange = (option) => {
             console.log('SelectedItemBadge option was selected: ', option);
         };
 
+        const handleDropdownStateChange = (isOpen) => {
+            setDropdownHeight(isOpen ? '200px' : '');
+        };
+
+        const getSuggestions = (): TSuggestion[] =>
+            // filtering suggestions from some other source
+            SUGGESTIONS.filter((item: TSuggestion) =>
+                // suggestion is relevant to input
+                item.name.toLocaleLowerCase().includes(inputValue.toLocaleLowerCase())
+            );
+        const onInputValueChange = (value: string) => {
+            console.log(`onInputValueChange was called with ${value}`);
+            setInputValue(value);
+        };
+
+        const onSelectionAdd = (item: TSuggestion) => {
+            console.log(`onSelectionAdd was called with {name: ${item.name}}`);
+            inputRef.current?.blur();
+        };
+
+        const onBlur = () => {
+            console.log('onBlur was called');
+            setInputValue(singleSelectedText || '');
+        };
+
+        const onClearAllSelected = () => {
+            console.log('onClearAllSelected was called');
+            setSingleSelectedText('');
+        };
+
         return (
             <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                 <Pill
@@ -102,8 +145,24 @@ export const _Pill: Story = {
                     onClose={() => {
                         console.log('onClose called');
                     }}
+                    dropdownHeight={dropdownHeight}
                 >
-                    <DummyComponent />
+                    <div style={{ width: '200px' }}>
+                        <Autosuggest
+                            suggestions={getSuggestions()}
+                            onBlur={onBlur}
+                            onInputValueChange={onInputValueChange}
+                            onSelectionAdd={onSelectionAdd}
+                            onClearAllSelected={onClearAllSelected}
+                            onDropdownStateChange={handleDropdownStateChange}
+                            inputRef={inputRef}
+                            inputPlaceholder="Select something..."
+                            suggestionToString={SUGGESTION_TO_STRING}
+                            isLoading={false}
+                            showClearButton
+                            clearTitle="Clear"
+                        />
+                    </div>
                 </Pill>
                 <Pill {...args} content={undefined}>
                     <DummyComponent />
@@ -125,25 +184,6 @@ export const _Pill: Story = {
                     }}
                 >
                     <div style={{ width: '150px' }}>
-                        <SelectedItemBadge
-                            label="Java"
-                            priority={{
-                                onChange: handlePrioritySelect,
-                                selectedItem: prioritySelected,
-                                list: priorityList,
-                                buttonLabel: 'priorityButton',
-                            }}
-                        >
-                            {badgeOption.map((option) => (
-                                <SingleSelectItem
-                                    key={option}
-                                    onClick={() => handleOptionChange(option)}
-                                    isSelected={option === 'Java'}
-                                >
-                                    {option}
-                                </SingleSelectItem>
-                            ))}
-                        </SelectedItemBadge>
                         <p>
                             Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam a fuga
                             beatae reiciendis earum, omnis eius accusantium eveniet quam
@@ -163,6 +203,25 @@ export const _Pill: Story = {
                             veritatis eligendi magnam.
                         </p>
                     </div>
+                    <SelectedItemBadge
+                        label="Java"
+                        priority={{
+                            onChange: handlePrioritySelect,
+                            selectedItem: prioritySelected,
+                            list: priorityList,
+                            buttonLabel: 'priorityButton',
+                        }}
+                    >
+                        {badgeOption.map((option) => (
+                            <SingleSelectItem
+                                key={option}
+                                onClick={() => handleOptionChange(option)}
+                                isSelected={option === 'Java'}
+                            >
+                                {option}
+                            </SingleSelectItem>
+                        ))}
+                    </SelectedItemBadge>
                 </Pill>
             </div>
         );

From 488503df1b9d94eb3fc6926e98ce2c42e036b519 Mon Sep 17 00:00:00 2001
From: Anastasiia Mishchenko <mishchenko@textkernel.nl>
Date: Wed, 4 Dec 2024 18:38:32 +0000
Subject: [PATCH 05/16] fix: color of the important priority

---
 src/components/PrioritySelector/PrioritySelector.scss | 11 +++--------
 1 file changed, 3 insertions(+), 8 deletions(-)

diff --git a/src/components/PrioritySelector/PrioritySelector.scss b/src/components/PrioritySelector/PrioritySelector.scss
index fec8bed29..b5d4d87d6 100644
--- a/src/components/PrioritySelector/PrioritySelector.scss
+++ b/src/components/PrioritySelector/PrioritySelector.scss
@@ -47,8 +47,8 @@ $icon-status-colors: (
         disabled: var(--color-icon-success-disabled),
     ),
     important: (
-        normal: var(--color-icon-caution-default),
-        disabled: var(--color-icon-caution-disabled),
+        normal: var(--color-icon-cautious-default),
+        disabled: var(--color-icon-cautious-disabled),
     ),
     optional: (
         normal: var(--color-icon-subtle),
@@ -106,13 +106,8 @@ $icon-status-colors: (
         background-color: white;
         z-index: 600;
 
-        &--fixedWidth{
+        &--fixedWidth {
             width: 232px;
         }
     }
-
 }
-
-
-
-

From 594e90cf6ea35b947445aa87e577868e9d48d2c2 Mon Sep 17 00:00:00 2001
From: Anastasiia Mishchenko <mishchenko@textkernel.nl>
Date: Wed, 4 Dec 2024 18:49:41 +0000
Subject: [PATCH 06/16] chore: adjust height of the input

---
 stories/molecules/Pill.stories.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/stories/molecules/Pill.stories.tsx b/stories/molecules/Pill.stories.tsx
index 7f17022c9..3705a132e 100644
--- a/stories/molecules/Pill.stories.tsx
+++ b/stories/molecules/Pill.stories.tsx
@@ -122,6 +122,7 @@ export const _Pill: Story = {
 
         const onSelectionAdd = (item: TSuggestion) => {
             console.log(`onSelectionAdd was called with {name: ${item.name}}`);
+            setSingleSelectedText(item.name);
             inputRef.current?.blur();
         };
 
@@ -147,7 +148,7 @@ export const _Pill: Story = {
                     }}
                     dropdownHeight={dropdownHeight}
                 >
-                    <div style={{ width: '200px' }}>
+                    <div style={{ width: '200px', height: '50px' }}>
                         <Autosuggest
                             suggestions={getSuggestions()}
                             onBlur={onBlur}
@@ -155,6 +156,8 @@ export const _Pill: Story = {
                             onSelectionAdd={onSelectionAdd}
                             onClearAllSelected={onClearAllSelected}
                             onDropdownStateChange={handleDropdownStateChange}
+                            // this will trick to UI to pre-fill the in input field when it gets focused again
+                            initInputValue={singleSelectedText}
                             inputRef={inputRef}
                             inputPlaceholder="Select something..."
                             suggestionToString={SUGGESTION_TO_STRING}

From 1952eeffdf34fe8347516390a681b5c985422693 Mon Sep 17 00:00:00 2001
From: Anastasiia Mishchenko <mishchenko@textkernel.nl>
Date: Thu, 5 Dec 2024 14:36:40 +0000
Subject: [PATCH 07/16] chore: load downshift dropdown using portal instead of
 dynamicly adding the width to the Pill dropdown

---
 .../DropdownContent/DropdownContent.tsx       |   6 +-
 src/components/Pill/Pill.tsx                  |   4 -
 .../Pill/PillDropdown/PillDropdown.tsx        |   6 +-
 .../Autosuggest/Autosuggest.tsx               |  10 +-
 .../SelectComponents/Combobox/Combobox.tsx    |   6 +
 .../ComboboxMulti/ComboboxMulti.tsx           |   6 +
 .../SelectComponents/Select/Select.tsx        |   6 +
 .../SelectBase/SelectBase.tsx                 | 174 ++++++++++++------
 .../SelectComponents/SelectBase/interfaces.ts |   6 +-
 stories/molecules/Pill.stories.tsx            |  57 +++++-
 stories/organisms/Autosuggest.stories.tsx     |   1 +
 stories/organisms/Combobox.stories.tsx        |   1 +
 12 files changed, 202 insertions(+), 81 deletions(-)

diff --git a/src/components/Dropdown/DropdownContent/DropdownContent.tsx b/src/components/Dropdown/DropdownContent/DropdownContent.tsx
index 8ae988d84..9f21df4a4 100644
--- a/src/components/Dropdown/DropdownContent/DropdownContent.tsx
+++ b/src/components/Dropdown/DropdownContent/DropdownContent.tsx
@@ -6,14 +6,12 @@ import styles from '../Dropdown.scss';
 interface Props extends DropdownMenuContentProps {
     /** Ref element used to make the width of the Content equal to the parent width */
     refElement?: React.RefObject<HTMLElement | null>;
-    /** The height for the dropdown content. */
-    height?: string;
 }
 
 const { block } = bem('DropdownContent', styles);
 
 export const DropdownContent = React.forwardRef<HTMLElement, Props>(
-    ({ refElement, height, ...rest }, ref) => {
+    ({ refElement, ...rest }, ref) => {
         const [width, setWidth] = React.useState<number>();
 
         useEffect(() => {
@@ -29,7 +27,7 @@ export const DropdownContent = React.forwardRef<HTMLElement, Props>(
                 {...block(rest)}
                 align="start"
                 sideOffset={6}
-                style={{ minWidth: width, minHeight: height }}
+                style={{ minWidth: width }}
             />
         );
     }
diff --git a/src/components/Pill/Pill.tsx b/src/components/Pill/Pill.tsx
index 7c88d216a..63b9c19de 100644
--- a/src/components/Pill/Pill.tsx
+++ b/src/components/Pill/Pill.tsx
@@ -34,8 +34,6 @@ export type Props<PriorityItemValue> = (
     noPaddingInDropdown?: boolean;
     /** other props that need to be applied to the dropdown container */
     additionalDropdownProps?: object;
-    /** The height for the dropdown content. */
-    dropdownHeight?: string;
 };
 
 /**
@@ -56,7 +54,6 @@ export const Pill = <PriorityItemValue extends unknown>({
     dropdownRef,
     noPaddingInDropdown = false,
     additionalDropdownProps = {},
-    dropdownHeight = undefined,
     onClose,
     ...rest
 }: Props<PriorityItemValue>) => {
@@ -90,7 +87,6 @@ export const Pill = <PriorityItemValue extends unknown>({
             )}
             <DropdownPortal>
                 <PillDropdown
-                    height={dropdownHeight}
                     ref={dropdownRef}
                     noPadding={noPaddingInDropdown}
                     {...additionalDropdownProps}
diff --git a/src/components/Pill/PillDropdown/PillDropdown.tsx b/src/components/Pill/PillDropdown/PillDropdown.tsx
index d127a0443..2be1a270f 100644
--- a/src/components/Pill/PillDropdown/PillDropdown.tsx
+++ b/src/components/Pill/PillDropdown/PillDropdown.tsx
@@ -11,15 +11,13 @@ export interface Props extends Omit<React.HTMLAttributes<HTMLDivElement>, 'child
      * You can use the CSS variable --pill-dropdown-padding to add padding as required.
      * */
     noPadding?: boolean;
-    /** The height for the dropdown content. */
-    height?: string;
 }
 
 const { block } = bem('PillDropdown', styles);
 
 export const PillDropdown = React.forwardRef<HTMLElement, Props>(
-    ({ noPadding = false, children, height, ...rest }, ref) => (
-        <DropdownContent height={height} ref={ref} {...rest} {...block({ noPadding, ...rest })}>
+    ({ noPadding = false, children, ...rest }, ref) => (
+        <DropdownContent ref={ref} {...rest} {...block({ noPadding, ...rest })}>
             {children}
         </DropdownContent>
     )
diff --git a/src/components/SelectComponents/Autosuggest/Autosuggest.tsx b/src/components/SelectComponents/Autosuggest/Autosuggest.tsx
index eccb9ab13..3fb867905 100644
--- a/src/components/SelectComponents/Autosuggest/Autosuggest.tsx
+++ b/src/components/SelectComponents/Autosuggest/Autosuggest.tsx
@@ -53,8 +53,10 @@ export interface Props<S>
     /** render custom list values */
     customListRender?: (suggestions) => React.ReactNode;
     clearInputAfterSelection?: boolean;
-    /** callback function to be called whenever the dropdown state changes. */
-    onDropdownStateChange?: (isOpen: boolean) => void;
+    /** determines if the suggestion list should be rendered using a React Portal
+     *  to the dropdown needs to bypass parent element clipping, overflow, or z-index issues.
+     */
+    shouldRenderWithPortal?: boolean;
 }
 
 const { elem } = bem('Autosuggest', styles);
@@ -96,7 +98,7 @@ export function Autosuggest<S>({
     iconNode,
     customListRender,
     clearInputAfterSelection = true,
-    onDropdownStateChange,
+    shouldRenderWithPortal = false,
     ...rest
 }: Props<S>) {
     const inputRef = inputRefFromProps || React.createRef<HTMLInputElement>();
@@ -245,7 +247,6 @@ export function Autosuggest<S>({
     return (
         <SelectBase
             {...rest}
-            onDropdownStateChange={onDropdownStateChange}
             suggestions={suggestions}
             suggestionToString={suggestionToString}
             inputRef={inputRef}
@@ -262,6 +263,7 @@ export function Autosuggest<S>({
             initInputValue={initInputValue}
             clearInputAfterSelection={clearInputAfterSelection}
             autoFocus={isFocused}
+            shouldRenderWithPortal={shouldRenderWithPortal}
         />
     );
 }
diff --git a/src/components/SelectComponents/Combobox/Combobox.tsx b/src/components/SelectComponents/Combobox/Combobox.tsx
index 46a282750..664b54b8f 100644
--- a/src/components/SelectComponents/Combobox/Combobox.tsx
+++ b/src/components/SelectComponents/Combobox/Combobox.tsx
@@ -32,6 +32,10 @@ export interface Props<S>
     upArrowLabel?: string;
     /** enable ListOptimizer component for decreasing render time */
     useOptimizeListRender?: boolean;
+    /** determines if the suggestion list should be rendered using a React Portal
+     *  to the dropdown needs to bypass parent element clipping, overflow, or z-index issues.
+     */
+    shouldRenderWithPortal?: boolean;
 }
 
 /**
@@ -61,6 +65,7 @@ export function Combobox<S>({
     upArrowLabel,
     downArrowLabel,
     useOptimizeListRender,
+    shouldRenderWithPortal = false,
     ...rest
 }: Props<S>) {
     const inputRef = inputRefFromProps || React.createRef<HTMLInputElement>();
@@ -130,6 +135,7 @@ export function Combobox<S>({
             showArrow
             downArrowLabel={downArrowLabel}
             upArrowLabel={upArrowLabel}
+            shouldRenderWithPortal={shouldRenderWithPortal}
         />
     );
 }
diff --git a/src/components/SelectComponents/ComboboxMulti/ComboboxMulti.tsx b/src/components/SelectComponents/ComboboxMulti/ComboboxMulti.tsx
index 0bbfb2b1b..7e5c02120 100644
--- a/src/components/SelectComponents/ComboboxMulti/ComboboxMulti.tsx
+++ b/src/components/SelectComponents/ComboboxMulti/ComboboxMulti.tsx
@@ -24,6 +24,10 @@ export interface Props<S> extends BasicSelectProps<S>, SelectInputFieldProps {
     downArrowLabel?: string;
     /** Up arrow name for ARIA labelling, it is used when the component is focused and options are shown */
     upArrowLabel?: string;
+    /** determines if the suggestion list should be rendered using a React Portal
+     *  to the dropdown needs to bypass parent element clipping, overflow, or z-index issues.
+     */
+    shouldRenderWithPortal?: boolean;
 }
 
 /**
@@ -53,6 +57,7 @@ export function ComboboxMulti<S>({
     downArrowLabel,
     useOptimizeListRender = false,
     inputAttrs = {},
+    shouldRenderWithPortal = false,
     ...rest
 }: Props<S>) {
     const inputRef = inputRefFromProps || React.createRef<HTMLInputElement>();
@@ -141,6 +146,7 @@ export function ComboboxMulti<S>({
             focusedRenderer={renderFocused}
             blurredRenderer={renderBlurred}
             keepExpandedAfterSelection
+            shouldRenderWithPortal={shouldRenderWithPortal}
         />
     );
 }
diff --git a/src/components/SelectComponents/Select/Select.tsx b/src/components/SelectComponents/Select/Select.tsx
index 2a6cc30a1..a66ecb85d 100644
--- a/src/components/SelectComponents/Select/Select.tsx
+++ b/src/components/SelectComponents/Select/Select.tsx
@@ -42,6 +42,10 @@ export interface Props<S> extends Omit<React.HTMLAttributes<HTMLDivElement>, 'on
     rootRef?: React.RefObject<HTMLDivElement>;
     /** items list ref */
     listRef?: React.RefObject<HTMLUListElement>;
+    /** determines if the suggestion list should be rendered using a React Portal
+     *  to the dropdown needs to bypass parent element clipping, overflow, or z-index issues.
+     */
+    shouldRenderWithPortal?: boolean;
 }
 
 /**
@@ -67,6 +71,7 @@ export function Select<S>({
     onFocus = undefined,
     onClear = undefined,
     listRef = undefined,
+    shouldRenderWithPortal = false,
     ...rest
 }: Props<S>) {
     const focusElRef = React.useRef();
@@ -124,6 +129,7 @@ export function Select<S>({
             onBlur={onBlur}
             onFocus={onFocus}
             onClearAllSelected={onClear}
+            shouldRenderWithPortal={shouldRenderWithPortal}
             listRenderer={(listProps) => (
                 <SuggestionsList
                     {...listProps}
diff --git a/src/components/SelectComponents/SelectBase/SelectBase.tsx b/src/components/SelectComponents/SelectBase/SelectBase.tsx
index a7642d3ce..15ce475d1 100644
--- a/src/components/SelectComponents/SelectBase/SelectBase.tsx
+++ b/src/components/SelectComponents/SelectBase/SelectBase.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import Downshift from 'downshift';
+import { createPortal } from 'react-dom';
 import { bem } from '../../../utils/bem';
 import { useBrowserTabVisibilityChange } from '../../../hooks';
 import { FieldWrapper } from '../../FieldWrapper';
@@ -35,8 +36,8 @@ export function SelectBase<S>({
     clearInputAfterSelection = false,
     highlightOnEmptyInput = true,
     initInputValue,
-    onDropdownStateChange,
     autoFocus = false,
+    shouldRenderWithPortal = false,
     ...rest
 }: Props<S>) {
     const [inputRef, setInputRef] = React.useState(
@@ -49,6 +50,23 @@ export function SelectBase<S>({
         listRefFromProps || React.createRef<HTMLUListElement>()
     );
 
+    const [dropdownStyles, setDropdownStyles] = React.useState({
+        top: 0,
+        left: 0,
+        width: 0,
+    });
+
+    const calculateDropdownPosition = () => {
+        if (rootRef.current) {
+            const rect = rootRef.current.getBoundingClientRect();
+            setDropdownStyles({
+                top: rect.bottom + window.scrollY, // Position below the input field
+                left: rect.left + window.scrollX, // Align left with the input field
+                width: rect.width, // Match the width of the input field
+            });
+        }
+    };
+
     const [inputValue, setInputValue] = React.useState(initInputValue || '');
     const [inputValueRecall, setInputValueRecall] = React.useState('');
     const [focused, setFocused] = React.useState(autoFocus);
@@ -86,6 +104,27 @@ export function SelectBase<S>({
         setInputValue(initInputValue || '');
     }, [setInputValue, initInputValue]);
 
+    React.useEffect(() => {
+        if (focused) {
+            calculateDropdownPosition();
+        }
+
+        const handleResize = () => {
+            if (focused) {
+                calculateDropdownPosition();
+            }
+        };
+
+        window.addEventListener('resize', handleResize);
+        window.addEventListener('scroll', handleResize);
+
+        return () => {
+            window.removeEventListener('resize', handleResize);
+            window.removeEventListener('scroll', handleResize);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [focused, rootRef]);
+
     const handleBlur = () => {
         setFocused(false);
         if (isBrowserTabVisible) {
@@ -162,26 +201,18 @@ export function SelectBase<S>({
     };
 
     const stateUpdater = (change, state) => {
-        const isOpen = change.isOpen ?? state.isOpen;
         switch (change.type) {
             case Downshift.stateChangeTypes.blurInput:
                 handleBlur();
-                onDropdownStateChange?.(isOpen);
                 break;
             case Downshift.stateChangeTypes.clickButton:
                 setFocused(change.isOpen);
-                onDropdownStateChange?.(isOpen);
                 break;
             case Downshift.stateChangeTypes.changeInput:
                 if (state.isOpen !== focused) {
                     setFocused(state.isOpen);
-                    onDropdownStateChange?.(isOpen);
                 }
                 break;
-            case Downshift.stateChangeTypes.unknown:
-                onDropdownStateChange?.(isOpen);
-                break;
-
             default:
                 break;
         }
@@ -243,57 +274,88 @@ export function SelectBase<S>({
                     getToggleButtonProps,
                     highlightedIndex,
                     openMenu,
-                }) => (
-                    <div {...elem('main', stateAndProps)}>
-                        <FieldWrapper
-                            showArrow={showArrow}
-                            isArrowUp={focused}
-                            onArrowClick={focused ? handleOuterClick : handleWrapperClick(openMenu)}
-                            clearTooltipLabel={clearTitle}
-                            downArrowLabel={downArrowLabel}
-                            upArrowLabel={upArrowLabel}
-                            onClear={handleClearSelectedSuggestions}
-                            showClearButton={!focused && showClearButton}
-                            isFocused={focused && !disabled}
-                            disabled={disabled}
-                            onClick={handleWrapperClick(openMenu)}
-                            {...elem('field', stateAndProps)}
-                        >
-                            {focused && !disabled
-                                ? focusedRenderer({
-                                      getInputProps: getInputPropsWithUpdatedRef(getInputProps),
-                                      getToggleButtonProps,
-                                      onBlur: handleBlur,
-                                      onFocus: handleInputOnFocus(openMenu),
-                                      highlightedIndex,
-                                      inputValue,
-                                  })
-                                : blurredRenderer({
-                                      getInputProps,
-                                      getToggleButtonProps,
-                                      onFocus: handleInputOnFocus(openMenu),
-                                      onBlur: handleBlur,
-                                  })}
-                            <List
-                                {...getMenuProps({
-                                    ...elem('list', stateAndProps),
-                                    ref: listRef.current,
-                                    isControlledNavigation: true,
-                                })}
+                }) => {
+                    const listContent =
+                        focused && !disabled
+                            ? listRenderer({
+                                  suggestionToString,
+                                  suggestions,
+                                  getItemProps,
+                                  highlightedIndex,
+                                  inputValue: inputValueRecall,
+                              })
+                            : null;
+
+                    const dropdownProps = getMenuProps({
+                        ...elem('list', stateAndProps),
+                        ref: listRef.current,
+                        isControlledNavigation: true,
+                    });
+
+                    return (
+                        <div {...elem('main', stateAndProps)}>
+                            <FieldWrapper
+                                showArrow={showArrow}
+                                isArrowUp={focused}
+                                onArrowClick={
+                                    focused ? handleOuterClick : handleWrapperClick(openMenu)
+                                }
+                                clearTooltipLabel={clearTitle}
+                                downArrowLabel={downArrowLabel}
+                                upArrowLabel={upArrowLabel}
+                                onClear={handleClearSelectedSuggestions}
+                                showClearButton={!focused && showClearButton}
+                                isFocused={focused && !disabled}
+                                disabled={disabled}
+                                onClick={handleWrapperClick(openMenu)}
+                                {...elem('field', stateAndProps)}
                             >
                                 {focused && !disabled
-                                    ? listRenderer({
-                                          suggestionToString,
-                                          suggestions,
-                                          getItemProps,
+                                    ? focusedRenderer({
+                                          getInputProps: getInputPropsWithUpdatedRef(getInputProps),
+                                          getToggleButtonProps,
+                                          onBlur: handleBlur,
+                                          onFocus: handleInputOnFocus(openMenu),
                                           highlightedIndex,
-                                          inputValue: inputValueRecall,
+                                          inputValue,
                                       })
-                                    : null}
-                            </List>
-                        </FieldWrapper>
-                    </div>
-                )}
+                                    : blurredRenderer({
+                                          getInputProps,
+                                          getToggleButtonProps,
+                                          onFocus: handleInputOnFocus(openMenu),
+                                          onBlur: handleBlur,
+                                      })}
+
+                                {shouldRenderWithPortal ? (
+                                    focused &&
+                                    !disabled &&
+                                    createPortal(
+                                        <List
+                                            {...dropdownProps}
+                                            // implemented directly for elem not to override elem styles
+                                            style={{
+                                                position: 'absolute',
+                                                top: dropdownStyles.top,
+                                                left: dropdownStyles.left,
+                                                width: dropdownStyles.width,
+                                                zIndex: 700,
+                                                background: 'var(--color-background)',
+                                                border: '1px solid var(--color-neutral-30)',
+                                                borderRadius: 'var(--border-radius)',
+                                                boxSizing: 'border-box',
+                                            }}
+                                        >
+                                            {listContent}
+                                        </List>,
+                                        document.body
+                                    )
+                                ) : (
+                                    <List {...dropdownProps}>{listContent}</List>
+                                )}
+                            </FieldWrapper>
+                        </div>
+                    );
+                }}
             </Downshift>
         </div>
     );
diff --git a/src/components/SelectComponents/SelectBase/interfaces.ts b/src/components/SelectComponents/SelectBase/interfaces.ts
index be5150fbf..3b0f2555b 100644
--- a/src/components/SelectComponents/SelectBase/interfaces.ts
+++ b/src/components/SelectComponents/SelectBase/interfaces.ts
@@ -102,6 +102,8 @@ export interface Props<S>
     blurredRenderer: BlurredRendererHelpers<S>;
     /** highlighting for first item will be added if input is empty */
     highlightOnEmptyInput?: boolean;
-    /** callback function to be called whenever the dropdown state changes. */
-    onDropdownStateChange?: (isOpen: boolean) => void;
+    /** determines if the suggestion list should be rendered using a React Portal
+     *  to the dropdown needs to bypass parent element clipping, overflow, or z-index issues.
+     */
+    shouldRenderWithPortal?: boolean;
 }
diff --git a/stories/molecules/Pill.stories.tsx b/stories/molecules/Pill.stories.tsx
index 3705a132e..316ec426e 100644
--- a/stories/molecules/Pill.stories.tsx
+++ b/stories/molecules/Pill.stories.tsx
@@ -88,7 +88,6 @@ export const _Pill: Story = {
             label: 'Mandatory',
             value: 'required',
         });
-        const [dropdownHeight, setDropdownHeight] = React.useState<string>();
         const [inputValue, setInputValue] = React.useState('');
         const [singleSelectedText, setSingleSelectedText] = React.useState('');
 
@@ -105,9 +104,7 @@ export const _Pill: Story = {
             console.log('SelectedItemBadge option was selected: ', option);
         };
 
-        const handleDropdownStateChange = (isOpen) => {
-            setDropdownHeight(isOpen ? '200px' : '');
-        };
+        //  const handleDropdownStateChange = (isOpen) => {};
 
         const getSuggestions = (): TSuggestion[] =>
             // filtering suggestions from some other source
@@ -146,16 +143,14 @@ export const _Pill: Story = {
                     onClose={() => {
                         console.log('onClose called');
                     }}
-                    dropdownHeight={dropdownHeight}
                 >
-                    <div style={{ width: '200px', height: '50px' }}>
+                    <div style={{ width: '200px' }}>
                         <Autosuggest
                             suggestions={getSuggestions()}
                             onBlur={onBlur}
                             onInputValueChange={onInputValueChange}
                             onSelectionAdd={onSelectionAdd}
                             onClearAllSelected={onClearAllSelected}
-                            onDropdownStateChange={handleDropdownStateChange}
                             // this will trick to UI to pre-fill the in input field when it gets focused again
                             initInputValue={singleSelectedText}
                             inputRef={inputRef}
@@ -164,7 +159,55 @@ export const _Pill: Story = {
                             isLoading={false}
                             showClearButton
                             clearTitle="Clear"
+                            shouldRenderWithPortal
                         />
+                        <div
+                            style={{
+                                display: 'flex',
+                                flexDirection: 'column',
+                                gap: '4px',
+                                marginTop: '8px',
+                            }}
+                        >
+                            <SelectedItemBadge
+                                label="Java"
+                                priority={{
+                                    onChange: handlePrioritySelect,
+                                    selectedItem: prioritySelected,
+                                    list: priorityList,
+                                    buttonLabel: 'priorityButton',
+                                }}
+                            >
+                                {badgeOption.map((option) => (
+                                    <SingleSelectItem
+                                        key={option}
+                                        onClick={() => handleOptionChange(option)}
+                                        isSelected={option === 'Java'}
+                                    >
+                                        {option}
+                                    </SingleSelectItem>
+                                ))}
+                            </SelectedItemBadge>
+                            <SelectedItemBadge
+                                label="Java"
+                                priority={{
+                                    onChange: handlePrioritySelect,
+                                    selectedItem: prioritySelected,
+                                    list: priorityList,
+                                    buttonLabel: 'priorityButton',
+                                }}
+                            >
+                                {badgeOption.map((option) => (
+                                    <SingleSelectItem
+                                        key={option}
+                                        onClick={() => handleOptionChange(option)}
+                                        isSelected={option === 'Java'}
+                                    >
+                                        {option}
+                                    </SingleSelectItem>
+                                ))}
+                            </SelectedItemBadge>
+                        </div>
                     </div>
                 </Pill>
                 <Pill {...args} content={undefined}>
diff --git a/stories/organisms/Autosuggest.stories.tsx b/stories/organisms/Autosuggest.stories.tsx
index 72b5ec186..dd98805dc 100644
--- a/stories/organisms/Autosuggest.stories.tsx
+++ b/stories/organisms/Autosuggest.stories.tsx
@@ -83,6 +83,7 @@ export const Multiselect: Story = {
                     onSelectionAdd={onSelectionAdd}
                     onSelectionRemove={onSelectionRemove}
                     onClearAllSelected={onClearAllSelected}
+                    shouldRenderWithPortal
                 />
             </div>
         );
diff --git a/stories/organisms/Combobox.stories.tsx b/stories/organisms/Combobox.stories.tsx
index 27f1b17ee..4e28398af 100644
--- a/stories/organisms/Combobox.stories.tsx
+++ b/stories/organisms/Combobox.stories.tsx
@@ -66,6 +66,7 @@ export const _Combobox: Story = {
                     onBlur={onBlur}
                     onSelectionAdd={onSelectionAdd}
                     onInputValueChange={onInputValueChange}
+                    shouldRenderWithPortal
                 />
             </>
         );

From 0bc81ad8a33bfa0fb0cba3b7f980d640fd7172cf Mon Sep 17 00:00:00 2001
From: Anastasiia Mishchenko <mishchenko@textkernel.nl>
Date: Thu, 5 Dec 2024 14:45:32 +0000
Subject: [PATCH 08/16] fix: style for storybook

---
 stories/molecules/Pill.stories.tsx | 72 +++++++++++-------------------
 1 file changed, 26 insertions(+), 46 deletions(-)

diff --git a/stories/molecules/Pill.stories.tsx b/stories/molecules/Pill.stories.tsx
index 316ec426e..0a2622af9 100644
--- a/stories/molecules/Pill.stories.tsx
+++ b/stories/molecules/Pill.stories.tsx
@@ -144,7 +144,14 @@ export const _Pill: Story = {
                         console.log('onClose called');
                     }}
                 >
-                    <div style={{ width: '200px' }}>
+                    <div
+                        style={{
+                            width: '200px',
+                            display: 'flex',
+                            flexDirection: 'column',
+                            gap: '8px',
+                        }}
+                    >
                         <Autosuggest
                             suggestions={getSuggestions()}
                             onBlur={onBlur}
@@ -161,53 +168,26 @@ export const _Pill: Story = {
                             clearTitle="Clear"
                             shouldRenderWithPortal
                         />
-                        <div
-                            style={{
-                                display: 'flex',
-                                flexDirection: 'column',
-                                gap: '4px',
-                                marginTop: '8px',
+
+                        <SelectedItemBadge
+                            label="Java"
+                            priority={{
+                                onChange: handlePrioritySelect,
+                                selectedItem: prioritySelected,
+                                list: priorityList,
+                                buttonLabel: 'priorityButton',
                             }}
                         >
-                            <SelectedItemBadge
-                                label="Java"
-                                priority={{
-                                    onChange: handlePrioritySelect,
-                                    selectedItem: prioritySelected,
-                                    list: priorityList,
-                                    buttonLabel: 'priorityButton',
-                                }}
-                            >
-                                {badgeOption.map((option) => (
-                                    <SingleSelectItem
-                                        key={option}
-                                        onClick={() => handleOptionChange(option)}
-                                        isSelected={option === 'Java'}
-                                    >
-                                        {option}
-                                    </SingleSelectItem>
-                                ))}
-                            </SelectedItemBadge>
-                            <SelectedItemBadge
-                                label="Java"
-                                priority={{
-                                    onChange: handlePrioritySelect,
-                                    selectedItem: prioritySelected,
-                                    list: priorityList,
-                                    buttonLabel: 'priorityButton',
-                                }}
-                            >
-                                {badgeOption.map((option) => (
-                                    <SingleSelectItem
-                                        key={option}
-                                        onClick={() => handleOptionChange(option)}
-                                        isSelected={option === 'Java'}
-                                    >
-                                        {option}
-                                    </SingleSelectItem>
-                                ))}
-                            </SelectedItemBadge>
-                        </div>
+                            {badgeOption.map((option) => (
+                                <SingleSelectItem
+                                    key={option}
+                                    onClick={() => handleOptionChange(option)}
+                                    isSelected={option === 'Java'}
+                                >
+                                    {option}
+                                </SingleSelectItem>
+                            ))}
+                        </SelectedItemBadge>
                     </div>
                 </Pill>
                 <Pill {...args} content={undefined}>

From be9a62ba32ced352e188db9acec970053e5c81b4 Mon Sep 17 00:00:00 2001
From: Anastasiia Mishchenko <mishchenko@textkernel.nl>
Date: Thu, 5 Dec 2024 15:40:05 +0000
Subject: [PATCH 09/16] fix: pill story

---
 .../SelectBase/SelectBase.tsx                 |  3 +-
 stories/molecules/Pill.stories.tsx            | 50 ++++++-------------
 2 files changed, 18 insertions(+), 35 deletions(-)

diff --git a/src/components/SelectComponents/SelectBase/SelectBase.tsx b/src/components/SelectComponents/SelectBase/SelectBase.tsx
index 15ce475d1..069479d44 100644
--- a/src/components/SelectComponents/SelectBase/SelectBase.tsx
+++ b/src/components/SelectComponents/SelectBase/SelectBase.tsx
@@ -341,7 +341,8 @@ export function SelectBase<S>({
                                                 zIndex: 700,
                                                 background: 'var(--color-background)',
                                                 border: '1px solid var(--color-neutral-30)',
-                                                borderRadius: 'var(--border-radius)',
+                                                borderRadiusLeftBottom: 'var(--border-radius)',
+                                                borderRadiusRightBottom: 'var(--border-radius)',
                                                 boxSizing: 'border-box',
                                             }}
                                         >
diff --git a/stories/molecules/Pill.stories.tsx b/stories/molecules/Pill.stories.tsx
index 0a2622af9..9e58cbd02 100644
--- a/stories/molecules/Pill.stories.tsx
+++ b/stories/molecules/Pill.stories.tsx
@@ -89,7 +89,7 @@ export const _Pill: Story = {
             value: 'required',
         });
         const [inputValue, setInputValue] = React.useState('');
-        const [singleSelectedText, setSingleSelectedText] = React.useState('');
+        const [selectedValues, setSelectedValues] = React.useState<string[]>([]);
 
         const inputRef = React.createRef<HTMLInputElement>();
 
@@ -119,18 +119,14 @@ export const _Pill: Story = {
 
         const onSelectionAdd = (item: TSuggestion) => {
             console.log(`onSelectionAdd was called with {name: ${item.name}}`);
-            setSingleSelectedText(item.name);
+            const newSelectedValues = [...selectedValues, item.name];
+            setSelectedValues(newSelectedValues);
             inputRef.current?.blur();
         };
 
         const onBlur = () => {
             console.log('onBlur was called');
-            setInputValue(singleSelectedText || '');
-        };
-
-        const onClearAllSelected = () => {
-            console.log('onClearAllSelected was called');
-            setSingleSelectedText('');
+            setInputValue('');
         };
 
         return (
@@ -147,9 +143,6 @@ export const _Pill: Story = {
                     <div
                         style={{
                             width: '200px',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            gap: '8px',
                         }}
                     >
                         <Autosuggest
@@ -157,9 +150,6 @@ export const _Pill: Story = {
                             onBlur={onBlur}
                             onInputValueChange={onInputValueChange}
                             onSelectionAdd={onSelectionAdd}
-                            onClearAllSelected={onClearAllSelected}
-                            // this will trick to UI to pre-fill the in input field when it gets focused again
-                            initInputValue={singleSelectedText}
                             inputRef={inputRef}
                             inputPlaceholder="Select something..."
                             suggestionToString={SUGGESTION_TO_STRING}
@@ -167,27 +157,19 @@ export const _Pill: Story = {
                             showClearButton
                             clearTitle="Clear"
                             shouldRenderWithPortal
+                            style={{ marginBottom: '8px' }}
                         />
-
-                        <SelectedItemBadge
-                            label="Java"
-                            priority={{
-                                onChange: handlePrioritySelect,
-                                selectedItem: prioritySelected,
-                                list: priorityList,
-                                buttonLabel: 'priorityButton',
-                            }}
-                        >
-                            {badgeOption.map((option) => (
-                                <SingleSelectItem
-                                    key={option}
-                                    onClick={() => handleOptionChange(option)}
-                                    isSelected={option === 'Java'}
-                                >
-                                    {option}
-                                </SingleSelectItem>
-                            ))}
-                        </SelectedItemBadge>
+                        {selectedValues.map((value) => (
+                            <SelectedItemBadge
+                                label={value}
+                                priority={{
+                                    onChange: handlePrioritySelect,
+                                    selectedItem: prioritySelected,
+                                    list: priorityList,
+                                    buttonLabel: 'priorityButton',
+                                }}
+                            />
+                        ))}
                     </div>
                 </Pill>
                 <Pill {...args} content={undefined}>

From de0c8c376f5095e613d1e7b92c6231de738530f9 Mon Sep 17 00:00:00 2001
From: Anastasiia Mishchenko <mishchenko@textkernel.nl>
Date: Thu, 5 Dec 2024 15:44:46 +0000
Subject: [PATCH 10/16] fix: style due to changes on deployment

---
 stories/molecules/Pill.stories.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/stories/molecules/Pill.stories.tsx b/stories/molecules/Pill.stories.tsx
index 9e58cbd02..ad51e6013 100644
--- a/stories/molecules/Pill.stories.tsx
+++ b/stories/molecules/Pill.stories.tsx
@@ -143,6 +143,7 @@ export const _Pill: Story = {
                     <div
                         style={{
                             width: '200px',
+                            marginBottom: '8px',
                         }}
                     >
                         <Autosuggest
@@ -157,8 +158,9 @@ export const _Pill: Story = {
                             showClearButton
                             clearTitle="Clear"
                             shouldRenderWithPortal
-                            style={{ marginBottom: '8px' }}
                         />
+                    </div>
+                    <div style={{ marginTop: '8px', display: 'flex', gap: '4px' }}>
                         {selectedValues.map((value) => (
                             <SelectedItemBadge
                                 label={value}

From 8e69bb7e1ac4f6868e50da088860a533b7d3b615 Mon Sep 17 00:00:00 2001
From: Anastasiia Mishchenko <mishchenko@textkernel.nl>
Date: Thu, 5 Dec 2024 15:55:07 +0000
Subject: [PATCH 11/16] fix: select base style

---
 .../SelectBase/SelectBase.scss                |  8 +++---
 stories/molecules/Pill.stories.tsx            | 27 +++++++++----------
 2 files changed, 17 insertions(+), 18 deletions(-)

diff --git a/src/components/SelectComponents/SelectBase/SelectBase.scss b/src/components/SelectComponents/SelectBase/SelectBase.scss
index 06a2b69c2..4a6259c60 100644
--- a/src/components/SelectComponents/SelectBase/SelectBase.scss
+++ b/src/components/SelectComponents/SelectBase/SelectBase.scss
@@ -19,10 +19,6 @@
         }
     }
 
-    &__field {
-        padding: 0;
-    }
-
     &__spacedElem {
         margin: var(--space-50);
     }
@@ -42,4 +38,8 @@
     &__loaderContainer {
         width: 250px;
     }
+
+    .SelectBase__field {
+        padding: 0;
+    }
 }
diff --git a/stories/molecules/Pill.stories.tsx b/stories/molecules/Pill.stories.tsx
index ad51e6013..dfa30b6fb 100644
--- a/stories/molecules/Pill.stories.tsx
+++ b/stories/molecules/Pill.stories.tsx
@@ -143,7 +143,6 @@ export const _Pill: Story = {
                     <div
                         style={{
                             width: '200px',
-                            marginBottom: '8px',
                         }}
                     >
                         <Autosuggest
@@ -159,19 +158,19 @@ export const _Pill: Story = {
                             clearTitle="Clear"
                             shouldRenderWithPortal
                         />
-                    </div>
-                    <div style={{ marginTop: '8px', display: 'flex', gap: '4px' }}>
-                        {selectedValues.map((value) => (
-                            <SelectedItemBadge
-                                label={value}
-                                priority={{
-                                    onChange: handlePrioritySelect,
-                                    selectedItem: prioritySelected,
-                                    list: priorityList,
-                                    buttonLabel: 'priorityButton',
-                                }}
-                            />
-                        ))}
+                        <div style={{ marginTop: '8px', display: 'flex', gap: '4px' }}>
+                            {selectedValues.map((value) => (
+                                <SelectedItemBadge
+                                    label={value}
+                                    priority={{
+                                        onChange: handlePrioritySelect,
+                                        selectedItem: prioritySelected,
+                                        list: priorityList,
+                                        buttonLabel: 'priorityButton',
+                                    }}
+                                />
+                            ))}
+                        </div>
                     </div>
                 </Pill>
                 <Pill {...args} content={undefined}>

From 886fd7e5a68ad729d78e5544f571e7aefb1e5baf Mon Sep 17 00:00:00 2001
From: Anastasiia Mishchenko <mishchenko@textkernel.nl>
Date: Thu, 5 Dec 2024 15:55:44 +0000
Subject: [PATCH 12/16] chore: change flex direction

---
 stories/molecules/Pill.stories.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/stories/molecules/Pill.stories.tsx b/stories/molecules/Pill.stories.tsx
index dfa30b6fb..41177f165 100644
--- a/stories/molecules/Pill.stories.tsx
+++ b/stories/molecules/Pill.stories.tsx
@@ -158,7 +158,14 @@ export const _Pill: Story = {
                             clearTitle="Clear"
                             shouldRenderWithPortal
                         />
-                        <div style={{ marginTop: '8px', display: 'flex', gap: '4px' }}>
+                        <div
+                            style={{
+                                marginTop: '8px',
+                                display: 'flex',
+                                gap: '4px',
+                                flexDirection: 'column',
+                            }}
+                        >
                             {selectedValues.map((value) => (
                                 <SelectedItemBadge
                                     label={value}

From c710df5fdaeaeea715ffcab4308627d29ceefb58 Mon Sep 17 00:00:00 2001
From: Anastasiia Mishchenko <mishchenko@textkernel.nl>
Date: Fri, 6 Dec 2024 10:41:24 +0000
Subject: [PATCH 13/16] fix: badge width

---
 src/components/Input/Input.scss                        | 2 +-
 src/components/SelectedItemBadge/SelectedItemBadge.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Input/Input.scss b/src/components/Input/Input.scss
index a821e27a0..3ddd365c6 100644
--- a/src/components/Input/Input.scss
+++ b/src/components/Input/Input.scss
@@ -12,7 +12,7 @@
         align-items: center;
         gap: var(--space-50);
         padding: var(--space-150);
-        width: 200px;
+        width: 100%;
 
         &::placeholder {
             color: var(--color-text-subtlest);
diff --git a/src/components/SelectedItemBadge/SelectedItemBadge.tsx b/src/components/SelectedItemBadge/SelectedItemBadge.tsx
index d21bc5a4b..e9463f7b6 100644
--- a/src/components/SelectedItemBadge/SelectedItemBadge.tsx
+++ b/src/components/SelectedItemBadge/SelectedItemBadge.tsx
@@ -112,7 +112,7 @@ export const SelectedItemBadge = React.forwardRef(
                             <DropdownContent
                                 {...elem('badgeDropdownList')}
                                 sideOffset={6}
-                                alignOffset={priority ? -34 : 0}
+                                alignOffset={priority ? -34 : -2}
                                 refElement={badgeRef}
                             >
                                 {children}

From a97b6cfa8b19b30c232ff18d6c3a011260299822 Mon Sep 17 00:00:00 2001
From: Anastasiia Mishchenko <mishchenko@textkernel.nl>
Date: Fri, 6 Dec 2024 11:33:13 +0000
Subject: [PATCH 14/16] fix: to maintain teh same width add bordex-box sizing

---
 src/components/Dropdown/Dropdown.scss                   | 1 +
 src/components/SelectedItemBadge/SelectedItemBadge.scss | 1 +
 src/components/SelectedItemBadge/SelectedItemBadge.tsx  | 2 +-
 3 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/Dropdown/Dropdown.scss b/src/components/Dropdown/Dropdown.scss
index ad77edd13..3bd62474d 100644
--- a/src/components/Dropdown/Dropdown.scss
+++ b/src/components/Dropdown/Dropdown.scss
@@ -6,4 +6,5 @@
     box-shadow: var(--space-0) var(--space-25) var(--space-125) var(--space-0)
         var(--color-transparent-10020, rgba(0, 0, 0, 0.2));
     z-index: 400;
+    box-sizing: border-box;
 }
diff --git a/src/components/SelectedItemBadge/SelectedItemBadge.scss b/src/components/SelectedItemBadge/SelectedItemBadge.scss
index 54fa74e3e..c41b7d402 100644
--- a/src/components/SelectedItemBadge/SelectedItemBadge.scss
+++ b/src/components/SelectedItemBadge/SelectedItemBadge.scss
@@ -5,6 +5,7 @@
     border-radius: var(--space-100);
     display: flex;
     align-items: center;
+    box-sizing: border-box;
 
     &__optionText {
         max-width: var(--space-600);
diff --git a/src/components/SelectedItemBadge/SelectedItemBadge.tsx b/src/components/SelectedItemBadge/SelectedItemBadge.tsx
index e9463f7b6..8ace62ae3 100644
--- a/src/components/SelectedItemBadge/SelectedItemBadge.tsx
+++ b/src/components/SelectedItemBadge/SelectedItemBadge.tsx
@@ -112,7 +112,7 @@ export const SelectedItemBadge = React.forwardRef(
                             <DropdownContent
                                 {...elem('badgeDropdownList')}
                                 sideOffset={6}
-                                alignOffset={priority ? -34 : -2}
+                                alignOffset={priority ? -32 : 0}
                                 refElement={badgeRef}
                             >
                                 {children}

From 9448735904e4acae663f9388ed1006bb31efe6ec Mon Sep 17 00:00:00 2001
From: Anastasiia Mishchenko <mishchenko@textkernel.nl>
Date: Fri, 6 Dec 2024 12:29:31 +0000
Subject: [PATCH 15/16] fix: resize select dropdown

---
 .../SelectBase/SelectBase.tsx                 | 41 ++++++++++++-------
 stories/molecules/Pill.stories.tsx            | 11 +++++
 2 files changed, 38 insertions(+), 14 deletions(-)

diff --git a/src/components/SelectComponents/SelectBase/SelectBase.tsx b/src/components/SelectComponents/SelectBase/SelectBase.tsx
index 069479d44..2765e33b8 100644
--- a/src/components/SelectComponents/SelectBase/SelectBase.tsx
+++ b/src/components/SelectComponents/SelectBase/SelectBase.tsx
@@ -62,7 +62,7 @@ export function SelectBase<S>({
             setDropdownStyles({
                 top: rect.bottom + window.scrollY, // Position below the input field
                 left: rect.left + window.scrollX, // Align left with the input field
-                width: rect.width, // Match the width of the input field
+                width: rootRef.current.offsetWidth, // Match the width of the input field
             });
         }
     };
@@ -104,26 +104,35 @@ export function SelectBase<S>({
         setInputValue(initInputValue || '');
     }, [setInputValue, initInputValue]);
 
+    // Ensure the calculation is triggered after the DOM update
+    const calculateDropdownPositionAfterRender = () => {
+        requestAnimationFrame(() => calculateDropdownPosition());
+    };
+
+    // Recalculate position when focused or opened
     React.useEffect(() => {
         if (focused) {
-            calculateDropdownPosition();
+            calculateDropdownPositionAfterRender();
         }
+    }, [focused]);
 
-        const handleResize = () => {
-            if (focused) {
-                calculateDropdownPosition();
-            }
-        };
+    // Recalculate on resize, scroll, or input changes
+    React.useEffect(() => {
+        const handleResizeOrScroll = () => calculateDropdownPositionAfterRender();
 
-        window.addEventListener('resize', handleResize);
-        window.addEventListener('scroll', handleResize);
+        window.addEventListener('resize', handleResizeOrScroll);
+        window.addEventListener('scroll', handleResizeOrScroll);
 
         return () => {
-            window.removeEventListener('resize', handleResize);
-            window.removeEventListener('scroll', handleResize);
+            window.removeEventListener('resize', handleResizeOrScroll);
+            window.removeEventListener('scroll', handleResizeOrScroll);
         };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [focused, rootRef]);
+    }, []);
+
+    // Trigger position update on input value changes
+    React.useEffect(() => {
+        calculateDropdownPositionAfterRender();
+    }, [inputValue]);
 
     const handleBlur = () => {
         setFocused(false);
@@ -340,7 +349,11 @@ export function SelectBase<S>({
                                                 width: dropdownStyles.width,
                                                 zIndex: 700,
                                                 background: 'var(--color-background)',
-                                                border: '1px solid var(--color-neutral-30)',
+                                                /* since we use autofocus passed from parent,
+                                                 * we need to avoid showing border on empty dropdown */
+                                                border:
+                                                    suggestions.length > 0 &&
+                                                    '1px solid var(--color-neutral-30)',
                                                 borderRadiusLeftBottom: 'var(--border-radius)',
                                                 borderRadiusRightBottom: 'var(--border-radius)',
                                                 boxSizing: 'border-box',
diff --git a/stories/molecules/Pill.stories.tsx b/stories/molecules/Pill.stories.tsx
index 41177f165..ecad607c6 100644
--- a/stories/molecules/Pill.stories.tsx
+++ b/stories/molecules/Pill.stories.tsx
@@ -139,6 +139,17 @@ export const _Pill: Story = {
                     onClose={() => {
                         console.log('onClose called');
                     }}
+                    variant="enhanced"
+                    priority={
+                        selectedValues.length > 0
+                            ? {
+                                  onChange: handlePrioritySelect,
+                                  selectedItem: prioritySelected,
+                                  list: priorityList,
+                                  buttonLabel: 'priorityButton',
+                              }
+                            : undefined
+                    }
                 >
                     <div
                         style={{

From baac695d204acc6a47961690ffff96db2d333f22 Mon Sep 17 00:00:00 2001
From: Anastasiia Mishchenko <mishchenko@textkernel.nl>
Date: Fri, 6 Dec 2024 12:52:48 +0000
Subject: [PATCH 16/16] fix: chnage the type for additionalContentLabel of teh
 pill for it to be more flexible

---
 src/components/Pill/PillButtonEnhanced/PillButtonEnhanced.tsx | 2 +-
 stories/molecules/Pill.stories.tsx                            | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/Pill/PillButtonEnhanced/PillButtonEnhanced.tsx b/src/components/Pill/PillButtonEnhanced/PillButtonEnhanced.tsx
index 0f95d4e7d..557937807 100644
--- a/src/components/Pill/PillButtonEnhanced/PillButtonEnhanced.tsx
+++ b/src/components/Pill/PillButtonEnhanced/PillButtonEnhanced.tsx
@@ -12,7 +12,7 @@ import { IconButton } from '../../Buttons';
 
 export interface Props<PriorityItemValue = unknown> extends PillButtonBaseProps {
     /** Label/indicator in case of multiple selection, such as `+2` for instance */
-    additionalContentLabel?: string;
+    additionalContentLabel?: React.ReactNode;
     /** Tooltip content to be shown when multiple selections are shown */
     additionalContentTooltip?: React.ReactNode;
     /** Props needed for rendering optional priority selector */
diff --git a/stories/molecules/Pill.stories.tsx b/stories/molecules/Pill.stories.tsx
index ecad607c6..7df14c351 100644
--- a/stories/molecules/Pill.stories.tsx
+++ b/stories/molecules/Pill.stories.tsx
@@ -139,9 +139,9 @@ export const _Pill: Story = {
                     onClose={() => {
                         console.log('onClose called');
                     }}
-                    variant="enhanced"
+                    // @ts-ignore
                     priority={
-                        selectedValues.length > 0
+                        args.variant === 'enhanced' && selectedValues.length > 0
                             ? {
                                   onChange: handlePrioritySelect,
                                   selectedItem: prioritySelected,