Merge pull request #311 from tecsinapse/develop

fix: select popover
tecsinapse · Feb 19, 2025 · 3589c25 · 3589c25
2 parents 9ab1bee + ca94cbb
commit 3589c25
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 3 deletions.
diff --git a/packages/cortex-react/CHANGELOG.md b/packages/cortex-react/CHANGELOG.md
@@ -7,6 +7,10 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 **Note:** Version bump only for package @tecsinapse/cortex-react
 
+## [1.9.24-beta.0](https://github.com/tecsinapse/design-system/compare/@tecsinapse/[email protected]...@tecsinapse/[email protected]) (2025-02-19)
+
+**Note:** Version bump only for package @tecsinapse/cortex-react
+
 ## [1.9.23](https://github.com/tecsinapse/design-system/compare/@tecsinapse/[email protected]...@tecsinapse/[email protected]) (2025-02-05)
 
 **Note:** Version bump only for package @tecsinapse/cortex-react

diff --git a/packages/cortex-react/src/components/Popover/Provider.tsx b/packages/cortex-react/src/components/Popover/Provider.tsx
@@ -8,12 +8,14 @@ export interface ControlledProps {
   controlled: true;
   isOpen: boolean;
   setIsOpen: Dispatch<SetStateAction<boolean>>;
+  fallbackPlacements?: Array<Placement>;
 }
 
 export interface UncontrolledProviderProps {
   /** child element */
   children: ReactNode;
   placement?: Placement;
+  fallbackPlacements?: Array<Placement>;
   trigger?: 'hover' | 'click';
   controlled?: false;
 }
@@ -30,9 +32,15 @@ export const PopoverProvider = ({
   children,
   placement,
   trigger,
+  fallbackPlacements,
   ...props
 }: PopoverProviderProps) => {
-  const floatingLogic = useFloatingElement({ placement, trigger, ...props });
+  const floatingLogic = useFloatingElement({
+    placement,
+    trigger,
+    fallbackPlacements,
+    ...props,
+  });
 
   return (
     <Context.Provider value={{ ...floatingLogic }}>{children}</Context.Provider>

diff --git a/packages/cortex-react/src/components/Select/Root.tsx b/packages/cortex-react/src/components/Select/Root.tsx
@@ -4,6 +4,7 @@ import { Popover } from '../Popover';
 import { Content } from './Content';
 import { SelectContext } from './context';
 import { SelectRootProps } from './types';
+import { Placement } from '@floating-ui/react';
 
 /** Select component */
 export const SelectRoot = <T,>({
@@ -14,7 +15,11 @@ export const SelectRoot = <T,>({
   className,
 }: SelectRootProps<T>) => {
   return (
-    <Popover.Root placement="bottom" trigger="click">
+    <Popover.Root
+      fallbackPlacements={['bottom', 'top'] as Array<Placement>}
+      placement="bottom"
+      trigger="click"
+    >
       <SelectContext.Provider value={{ value, keyExtractor, labelExtractor }}>
         <Content className={className}>{children}</Content>
       </SelectContext.Provider>

diff --git a/packages/cortex-react/src/hooks/useFloatingElement.ts b/packages/cortex-react/src/hooks/useFloatingElement.ts
@@ -36,6 +36,7 @@ export interface FloatingElementProps {
   controlled?: boolean;
   isOpen?: boolean;
   setIsOpen?: Dispatch<SetStateAction<boolean>> | undefined;
+  fallbackPlacements?: Array<Placement>;
 }
 
 export const useFloatingElement = ({
@@ -46,6 +47,7 @@ export const useFloatingElement = ({
   controlled,
   isOpen,
   setIsOpen,
+  fallbackPlacements = ['right', 'bottom', 'left', 'top'],
 }: FloatingElementProps) => {
   const [openUncontrolled, onOpenChangeUncontrolled] = useState(false);
 
@@ -59,7 +61,7 @@ export const useFloatingElement = ({
         offset(10),
         flip({
           flipAlignment: true,
-          fallbackPlacements: ['right', 'bottom', 'left', 'top'],
+          fallbackPlacements,
         }),
         shift(),
         ...(arrowRef ? [arrow({ element: arrowRef })] : []),