@addev-be/ui 0.14.5 → 0.15.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@addev-be/ui",
-  "version": "0.14.5",
+  "version": "0.15.0",
   "type": "module",
   "scripts": {
     "watch": "tsc -b --watch",

package/src/components/data/DataGrid/DataGridEditableCell/index.tsx

@@ -1,38 +1,83 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable @typescript-eslint/no-unnecessary-type-constraint */
 
+import { EditableDataGridCellProps, EditableDataGridColumn } from '../types';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
-import { DataGridCellProps } from '../types';
 import { DataGridEditableCellFC } from './types';
 import { EditableCellContainer } from '../styles';
 import { useDataGridContext } from '../hooks';
 
-export const DataGridEditableCell = <R,>({
+export const DataGridEditableCell = <R, T>({
   row,
   columnKey,
   column,
   context,
-}: DataGridCellProps<R>) => {
-  const { onCellEdited, setEditingCell } = useDataGridContext(context);
+}: EditableDataGridCellProps<R, T>) => {
+  const { setEditingCell, setRows, editRow, rows, rowKeyGetter } =
+    useDataGridContext(context);
   const initialValue = useMemo(() => column.getter(row) ?? '', [column, row]);
   const [value, setValue] = useState(initialValue);
   const inputRef = useRef<HTMLInputElement | null>(null);
+  const rowKey = rowKeyGetter(row);
+
+  const defaultPartialRowGetter = useCallback(
+    (row: R, newValue: T): Partial<R> =>
+      ({ [columnKey]: newValue } as Partial<R>),
+    [columnKey]
+  );
+  const partialRowGetter: EditableDataGridColumn<R, T>['partialRowGetter'] =
+    column.partialRowGetter ?? defaultPartialRowGetter;
+
+  const save = useCallback(() => {
+    const rowIndex = rows.findIndex(
+      (r) => rowKeyGetter(r) === rowKeyGetter(row)
+    );
+
+    // If row is found
+    if (rowIndex >= 0) {
+      // Update the row with the new value
+      const partialRow = partialRowGetter(row, value);
+      const newRow = {
+        ...row,
+        ...partialRow,
+      };
+
+      // Update the edited rows state
+      editRow(rowKey, partialRow);
+
+      // Update the rows
+      setRows?.((oldRows) => {
+        const newRows = [...oldRows];
+        newRows[rowIndex] = newRow;
+        return newRows;
+      });
+    }
+  }, [
+    editRow,
+    partialRowGetter,
+    row,
+    rowKey,
+    rowKeyGetter,
+    rows,
+    setRows,
+    value,
+  ]);
 
   const onClose = useCallback(
-    (save: boolean, nextEditingCell: [number, number] = [-1, -1]) => {
-      if (save && value !== initialValue) {
-        onCellEdited?.(row, columnKey, value);
+    (shouldSave: boolean, nextEditingCell: [number, number] = [-1, -1]) => {
+      if (shouldSave && value !== initialValue) {
+        save();
       }
       setEditingCell(nextEditingCell);
     },
-    [columnKey, initialValue, onCellEdited, row, setEditingCell, value]
+    [initialValue, save, setEditingCell, value]
   );
 
   useEffect(() => {
     if (inputRef.current) {
       inputRef.current.focus();
-      inputRef.current.select();
+      inputRef.current.select?.();
     }
   }, [inputRef]);
 

package/src/components/data/DataGrid/DataGridEditableCell/types.ts

@@ -1,4 +1,4 @@
-import { FC, ForwardedRef } from 'react';
+import { ForwardedRef } from 'react';
 
 export type DataGridEditableCellProps<R, T> = {
   ref?: ForwardedRef<HTMLInputElement>;
@@ -9,6 +9,7 @@ export type DataGridEditableCellProps<R, T> = {
 };
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-export type DataGridEditableCellFC<R, T = any> = FC<
-  DataGridEditableCellProps<R, T>
->;
+export type DataGridEditableCellFC<R, T = any> = (
+  props: DataGridEditableCellProps<R, T>,
+  ref: ForwardedRef<HTMLInputElement>
+) => JSX.Element | null;

package/src/components/data/DataGrid/helpers/columns.tsx

@@ -351,8 +351,9 @@ export const selectColumn = <R extends Record<string, any>, T>(
   items,
   itemKey,
   itemLabel,
-  editComponent: ({ value, onChange, onClose }) => (
+  editComponent: forwardRef(({ value, onChange, onClose }, ref) => (
     <Select
+      ref={ref}
       items={items}
       itemKey={itemKey}
       itemLabel={itemLabel}
@@ -360,7 +361,7 @@ export const selectColumn = <R extends Record<string, any>, T>(
       onChange={onChange}
       onBlur={() => onClose(true)}
     />
-  ),
+  )),
   ...otherOptions,
 });
 

package/src/components/data/DataGrid/hooks/useDataGrid.tsx

@@ -151,37 +151,6 @@ export const useDataGrid = <R,>(
     clearChangedRows,
   } = useDataGridChangedRows<R>(onRowAdded);
 
-  const onCellEdited = useCallback(
-    (row: R, columnKey: string, value: any) => {
-      setEditingCell([-1, -1]);
-      const column = columns.find((col) => col.key === columnKey);
-      const rowIndex = rows.findIndex(
-        (r) => rowKeyGetter(r) === rowKeyGetter(row)
-      );
-
-      // If row and column are valid
-      if (rowIndex >= 0 && column) {
-        // Update the row with the new value
-        const partialRow: Partial<R> = {};
-        partialRow[columnKey as keyof R] = value;
-        const newRow = { ...row, ...partialRow };
-        const rowKey = rowKeyGetter(newRow);
-
-        // Update the edited rows state
-        editRow(rowKey, partialRow);
-
-        // Update the rows
-        const newRows = [...rows];
-        newRows[rowIndex] = newRow;
-        setRows?.(newRows);
-
-        // Call the onRowEdited callback if provided
-        // onRowEdited?.(newRow, columnKey, value);
-      }
-    },
-    [columns, editRow, rowKeyGetter, rows, setRows]
-  );
-
   /** ROWS SORTING **/
 
   const [sorts, setSorts] = useState<Record<string, DataGridSort>>(
@@ -301,7 +270,6 @@ export const useDataGrid = <R,>(
       setFilters,
       editingCell,
       setEditingCell,
-      onCellEdited,
       copyTable,
       setColumnWidth,
       settings,
@@ -340,7 +308,6 @@ export const useDataGrid = <R,>(
       sorts,
       filters,
       editingCell,
-      onCellEdited,
       copyTable,
       setColumnWidth,
       settings,

package/src/components/data/DataGrid/types.ts

@@ -64,30 +64,31 @@ type CommonGridColumnProps<R, T> = {
   width?: number;
 };
 
-type EditableColumnProps<R, T> = CommonGridColumnProps<R, T> & {
+export type EditableDataGridColumn<R, T> = CommonGridColumnProps<R, T> & {
   editable?: boolean;
   editComponent?: DataGridEditableCellFC<R, T>;
+  partialRowGetter?: (row: R, value: T) => Partial<R>;
 };
 
-export type DataGridTextColumn<R> = EditableColumnProps<R, string> & {
+export type DataGridTextColumn<R> = EditableDataGridColumn<R, string> & {
   type: 'text';
 };
 
-export type DataGridNumberColumn<R> = EditableColumnProps<R, number> & {
+export type DataGridNumberColumn<R> = EditableDataGridColumn<R, number> & {
   type: 'number';
   decimals?: number;
   currency?: string | ((row: R) => string);
 };
 
-export type DataGridDateColumn<R> = EditableColumnProps<R, Date> & {
+export type DataGridDateColumn<R> = EditableDataGridColumn<R, Date> & {
   type: 'date';
 };
 
-export type DataGridCheckboxColumn<R> = EditableColumnProps<R, boolean> & {
+export type DataGridCheckboxColumn<R> = EditableDataGridColumn<R, boolean> & {
   type: 'checkbox';
 };
 
-export type DataGridSelectColumn<R, T = any> = EditableColumnProps<
+export type DataGridSelectColumn<R, T = any> = EditableDataGridColumn<
   R,
   T | null
 > & {
@@ -97,7 +98,14 @@ export type DataGridSelectColumn<R, T = any> = EditableColumnProps<
   itemLabel: (item: T) => string;
 };
 
-export type DataGridColorColumn<R> = EditableColumnProps<R, string> & {
+export type DataGridForeignListColumn<R> = EditableDataGridColumn<
+  R,
+  string | null
+> & {
+  type: 'foreignList';
+};
+
+export type DataGridColorColumn<R> = EditableDataGridColumn<R, string> & {
   type: 'color';
 };
 
@@ -107,6 +115,7 @@ export type DataGridColumn<R> =
   | DataGridDateColumn<R>
   | DataGridCheckboxColumn<R>
   | DataGridSelectColumn<R>
+  | DataGridForeignListColumn<R>
   | DataGridColorColumn<R>;
 
 export type DataGridColumnWithFilter<R> = DataGridColumn<R> & {
@@ -246,6 +255,9 @@ export type DataGridCellProps<R> = {
   userSelect?: boolean;
   color?: ThemeColor;
 };
+export type EditableDataGridCellProps<R, T> = DataGridCellProps<R> & {
+  column: EditableDataGridColumn<R, T>;
+};
 
 export type DataGridHeaderCellProps<R> = {
   columnKey: string;

package/src/components/data/SqlRequestDataGrid/SqlRequestForeignListEditableCell.tsx

@@ -0,0 +1,16 @@
+import { ForwardedRef, forwardRef } from 'react';
+
+import { SqlRequestForeignList } from '../SqlRequestForeignList';
+import { SqlRequestForeignListProps } from '../SqlRequestForeignList/types';
+
+const SqlRequestForeignListEditableCellInner = <
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  R extends Record<string, any>
+>(
+  props: SqlRequestForeignListProps<R>,
+  ref: ForwardedRef<HTMLDivElement>
+) => <SqlRequestForeignList<R> {...props} ref={ref} />;
+
+export const SqlRequestForeignListEditableCell = forwardRef(
+  SqlRequestForeignListEditableCellInner
+);

package/src/components/data/SqlRequestDataGrid/helpers/columns.tsx

@@ -3,7 +3,9 @@
 import { SqlImage, SqlImageWrapper } from '../styles';
 import {
   SqlRequestDataGridCheckboxColumn,
+  SqlRequestDataGridColumn,
   SqlRequestDataGridDateColumn,
+  SqlRequestDataGridForeignListColumn,
   SqlRequestDataGridNumberColumn,
   SqlRequestDataGridTextColumn,
 } from '../types';
@@ -22,11 +24,18 @@ import {
 } from '../../../../helpers/numbers';
 
 import { CheckboxEditableCell } from '../../DataGrid/DataGridEditableCell/CheckboxEditableCell';
+import { DataGridSettings } from '../../DataGrid/types';
 import { DateEditableCell } from '../../DataGrid/DataGridEditableCell/DateEditableCell';
 import { NumberEditableCell } from '../../DataGrid/DataGridEditableCell/NumberEditableCell';
+import { SqlRequestForeignList } from '../../SqlRequestForeignList';
+import { SqlRequestForeignListProps } from '../../SqlRequestForeignList/types';
 import { TextEditableCell } from '../../DataGrid/DataGridEditableCell/TextEditableCell';
 import { forwardRef } from 'react';
 
+export const isColumnVisible = <R,>(
+  obj: SqlRequestDataGridColumn<R> | DataGridSettings
+): boolean => obj?.order !== -1;
+
 export const sqlTextColumn = <R extends Record<string, any>>(
   key: string,
   title: React.ReactNode,
@@ -364,3 +373,35 @@ export const sqlColorColumn = <R extends Record<string, any>>(
   },
   ...options,
 });
+
+export const sqlForeignListColumn = <
+  R extends Record<string, any>,
+  T extends Record<string, any>
+>(
+  key: string,
+  title: string,
+  foreignListOptions: SqlRequestForeignListProps<T>,
+  options?: Partial<SqlRequestDataGridForeignListColumn<R, T | null>>
+): SqlRequestDataGridForeignListColumn<R, T | null> => ({
+  key,
+  name: title,
+  type: 'foreignList',
+  getter: (row) => row[key] ?? '',
+  sortGetter: (row) => row[key] ?? '',
+  filter: {
+    ...textFilter(key),
+    getter: (value) => value[key] ?? '',
+    renderer: (value) => value,
+  },
+  footer: (rows) => `${rows[0][key]} éléments`,
+  editComponent: forwardRef(({ row, onChange, onClose }, ref) => (
+    <SqlRequestForeignList<T>
+      initialId={row[key] ?? null}
+      onItemChanged={onChange}
+      onBlur={() => onClose(true)}
+      {...foreignListOptions}
+      ref={ref}
+    />
+  )),
+  ...options,
+});

package/src/components/data/SqlRequestDataGrid/types.ts

@@ -1,3 +1,5 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
 import {
   ConditionDTO,
   FieldDTO,
@@ -12,6 +14,7 @@ import {
   DataGridNumberColumn,
   DataGridProps,
   DataGridTextColumn,
+  EditableDataGridColumn,
 } from '../DataGrid/types';
 
 export type SqlRequestDataGridFilter<
@@ -41,12 +44,17 @@ export type SqlRequestDataGridCheckboxColumn<R> = DataGridCheckboxColumn<R> &
   SqlRequestDataGridCommonProps;
 export type SqlRequestDataGridDateColumn<R> = DataGridDateColumn<R> &
   SqlRequestDataGridCommonProps;
+export type SqlRequestDataGridForeignListColumn<R, T> = {
+  type: 'foreignList';
+} & EditableDataGridColumn<R, T> &
+  SqlRequestDataGridCommonProps;
 
 export type SqlRequestDataGridColumn<R> =
   | SqlRequestDataGridTextColumn<R>
   | SqlRequestDataGridNumberColumn<R>
   | SqlRequestDataGridCheckboxColumn<R>
-  | SqlRequestDataGridDateColumn<R>;
+  | SqlRequestDataGridDateColumn<R>
+  | SqlRequestDataGridForeignListColumn<R, any>;
 
 export type SqlRequestDataGridColumns<R> = SqlRequestDataGridColumn<R>[];
 

package/src/components/data/SqlRequestForeignList/index.tsx

@@ -1,11 +1,25 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
+import {
+  ForwardedRef,
+  MouseEvent,
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import {
   SqlRequestForeignListInput,
   SqlRequestForeignListItem,
   SqlRequestForeignListValue,
 } from './styles';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import {
+  SqlRequestForeignListItemProps,
+  SqlRequestForeignListProps,
+} from './types';
 
 import { ChevronDownIcon } from '../../../Icons';
 import { Dropdown } from '../../layout';
@@ -14,93 +28,105 @@ import { useSqlRequestHandler } from '../../../services';
 
 const DEFAULT_ROW_HEIGHT = 24;
 
-type SqlRequestForeignListItemProps<R extends Record<string, any>> = {
-  onClick?: (item: R | null) => void;
-};
-
 const createValueTemplate =
   <R extends Record<string, any>>(
-    displayColumn: string,
+    ValueTemplate: VirtualScrollerTemplateFC<
+      R,
+      SqlRequestForeignListItemProps<R>
+    >,
     rowHeight = DEFAULT_ROW_HEIGHT
   ): VirtualScrollerTemplateFC<R, SqlRequestForeignListItemProps<R>> =>
   ({ item }) =>
     (
       <SqlRequestForeignListValue $rowHeight={rowHeight}>
-        {item?.[displayColumn]}
+        <ValueTemplate item={item} index={0} />
       </SqlRequestForeignListValue>
     );
 
 const createItemTemplate =
   <R extends Record<string, any>>(
-    displayColumn: string,
+    ItemTemplate: VirtualScrollerTemplateFC<
+      R,
+      SqlRequestForeignListItemProps<R>
+    >,
     rowHeight = DEFAULT_ROW_HEIGHT
   ): VirtualScrollerTemplateFC<R, SqlRequestForeignListItemProps<R>> =>
-  ({ item, onClick }) =>
-    (
+  ({ item, index, onClick: onItemClick }) => {
+    const onClick = useCallback(
+      (
+        e: MouseEvent<HTMLElement>,
+        item: R | null,
+        onItemClick?: (item: R | null) => void
+      ) => {
+        e.preventDefault();
+        e.stopPropagation();
+        onItemClick?.(item);
+      },
+      []
+    );
+
+    return (
       <SqlRequestForeignListItem
         $rowHeight={rowHeight}
-        onClick={() => onClick?.(item)}
+        onClick={(e) => onClick(e, item, onItemClick)}
       >
-        {item?.[displayColumn]} ({item?.Id})
+        <ItemTemplate item={item} index={index} />
       </SqlRequestForeignListItem>
     );
+  };
 
-type SqlRequestForeignListProps<R extends Record<string, any>> = {
-  requestName: string;
-  idColumn: string;
-  columns: string[];
-  value?: string | null;
-  onChange?: (value: string | null) => void;
-  valueTemplate?: VirtualScrollerTemplateFC<
-    R,
-    SqlRequestForeignListItemProps<R>
-  >;
-  itemTemplate?: VirtualScrollerTemplateFC<
-    R,
-    SqlRequestForeignListItemProps<R>
-  >;
-  rowHeight?: number;
-  maxRows?: number;
-};
-
-export const SqlRequestForeignList = <R extends Record<string, any>>({
-  requestName,
-  idColumn,
-  columns = [],
-  value,
-  onChange,
-  itemTemplate,
-  valueTemplate,
-  rowHeight = DEFAULT_ROW_HEIGHT,
-  maxRows = 10,
-}: SqlRequestForeignListProps<R>) => {
-  const inputRef = useRef<HTMLDivElement>(null);
+export const SqlRequestForeignListInner = <T extends Record<string, any>>(
+  {
+    requestName,
+    idColumn,
+    columns = [],
+    initialId,
+    onItemChanged,
+    onIdChanged,
+    onClosed,
+    onBlur,
+    itemTemplate,
+    valueTemplate,
+    rowHeight = DEFAULT_ROW_HEIGHT,
+    maxRows = 10,
+  }: SqlRequestForeignListProps<T>,
+  ref: ForwardedRef<HTMLDivElement>
+) => {
   const [opened, setOpened] = useState(false);
   const [rect, setRect] = useState<DOMRect | null>(null);
-  const [rows, setRows] = useState<R[]>([]);
+  const [rows, setRows] = useState<T[]>([]);
   const [loaded, setLoaded] = useState(false);
+  const [selectedItem, setSelectedItem] = useState<T | null>(null);
+
+  // Create an internal ref for the component to use
+  const internalRef = useRef<HTMLDivElement>(null);
+
+  // Forward the ref while linking it to our internal ref
+  useImperativeHandle(ref, () => internalRef.current!, []);
 
-  const [sqlRequest] = useSqlRequestHandler<R>(requestName);
-  const [selectedItem, setSelectedItem] = useState<R | null>(null);
+  const [sqlRequest] = useSqlRequestHandler<T>(requestName);
 
   const open = useCallback(() => {
-    if (inputRef.current) {
-      setRect(inputRef.current.getBoundingClientRect());
+    if (internalRef.current) {
+      const parentRect = internalRef.current.getBoundingClientRect();
+      setRect(new DOMRect(0, 0, parentRect.width, parentRect.height));
       setOpened(true);
     }
   }, []);
 
   const close = useCallback(() => {
     setOpened(false);
-  }, []);
+    onClosed?.();
+  }, [onClosed]);
 
   const onItemClick = useCallback(
-    (item: R | null) => {
+    (item: T | null) => {
       setSelectedItem(item);
-      onChange?.(item === null ? null : String(item[idColumn]));
+      onItemChanged?.(item);
+      onIdChanged?.(item?.[idColumn] ?? null);
       close();
     },
-    [close, idColumn, onChange]
+    [close, idColumn, onIdChanged, onItemChanged]
   );
 
   useEffect(() => {
@@ -110,48 +136,66 @@ export const SqlRequestForeignList = <R extends Record<string, any>>({
         // conditions,
         // orderBy,
       }).then((response) => {
-        const data = (response.data ?? []) as R[];
+        const data = (response.data ?? []) as T[];
         setRows(data);
         setSelectedItem(
-          data.find((item) => String(item[idColumn]) === value) ?? null
+          data.find((item) => String(item[idColumn]) === initialId) ?? null
         );
         setLoaded(true);
       });
     }
-  }, [columns, idColumn, loaded, sqlRequest, value]);
+  }, [columns, idColumn, initialId, loaded, sqlRequest]);
 
   const ItemTemplate = useMemo(
-    () => itemTemplate ?? createItemTemplate<R>(columns[0], rowHeight),
+    () =>
+      createItemTemplate<T>(
+        itemTemplate ??
+          (({ item }) => <span>{item?.[columns[0]] ?? '(Aucun)'}</span>),
+        rowHeight
+      ),
     [columns, itemTemplate, rowHeight]
   );
   const ValueTemplate = useMemo(
-    () => valueTemplate ?? createValueTemplate<R>(columns[0], rowHeight),
+    () =>
+      createValueTemplate<T>(
+        valueTemplate ??
+          (({ item }) => <span>{item?.[columns[0]] ?? '(Aucun)'}</span>),
+        rowHeight
+      ),
     [columns, rowHeight, valueTemplate]
   );
 
   return (
     <>
-      <SqlRequestForeignListInput ref={inputRef} onClick={open}>
+      <SqlRequestForeignListInput
+        tabIndex={0}
+        ref={internalRef}
+        onClick={open}
+        onBlur={onBlur}
+      >
         <ValueTemplate item={selectedItem} index={0} />
         <ChevronDownIcon />
+        {opened && rect && (
+          <Dropdown
+            $height={[Math.min(maxRows, rows.length) * rowHeight, 600]}
+            $width={rect.width}
+            $sourceRect={rect}
+            onClose={close}
+            usePortal={false}
+          >
+            {rows.map((row, index) => (
+              <ItemTemplate
+                item={row}
+                onClick={() => onItemClick(row)}
+                key={index}
+                index={index}
+              />
+            ))}
+          </Dropdown>
+        )}
       </SqlRequestForeignListInput>
-      {opened && rect && (
-        <Dropdown
-          $height={[Math.min(maxRows, rows.length) * rowHeight, 600]}
-          $width={rect.width}
-          $sourceRect={rect}
-          onClose={close}
-        >
-          {rows.map((row, index) => (
-            <ItemTemplate
-              item={row}
-              onClick={onItemClick}
-              key={index}
-              index={index}
-            />
-          ))}
-        </Dropdown>
-      )}
     </>
   );
 };
+
+export const SqlRequestForeignList = forwardRef(SqlRequestForeignListInner);

package/src/components/data/SqlRequestForeignList/types.ts

@@ -0,0 +1,31 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import { VirtualScrollerTemplateFC } from '../VirtualScroller/types';
+
+export type SqlRequestForeignListProps<T extends Record<string, any>> = {
+  requestName: string;
+  idColumn: string;
+  columns: string[];
+  initialId?: string | null;
+  onIdChanged?: (value: string | null) => void;
+  onItemChanged?: (value: T | null) => void;
+  onClosed?: () => void;
+  onBlur?: () => void;
+  valueTemplate?: VirtualScrollerTemplateFC<
+    T,
+    SqlRequestForeignListItemProps<T>
+  >;
+  itemTemplate?: VirtualScrollerTemplateFC<
+    T,
+    SqlRequestForeignListItemProps<T>
+  >;
+  rowHeight?: number;
+  maxRows?: number;
+};
+
+export type SqlRequestForeignListItemProps<T extends Record<string, any>> = {
+  onClick?: (item: T | null) => void;
+};
+
+export type SqlRequestForeignListItemFC<T extends Record<string, any>> =
+  VirtualScrollerTemplateFC<T, SqlRequestForeignListItemProps<T>>;

package/src/components/forms/Form/Select.tsx

@@ -1,4 +1,4 @@
-import { SelectHTMLAttributes, useCallback } from 'react';
+import { SelectHTMLAttributes, forwardRef, useCallback } from 'react';
 
 import { InputContainerProps } from './types';
 import { InputWithLabel } from './InputWithLabel';
@@ -14,7 +14,7 @@ type SelectProps<T> = {
 };
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const Select = <T,>({
+const SelectInner = <T,>({
   icon,
   label,
   items,
@@ -63,3 +63,5 @@ export const Select = <T,>({
     </InputWithLabel>
   );
 };
+
+export const Select = forwardRef(SelectInner);

package/src/components/layout/Dropdown/index.tsx

@@ -18,6 +18,7 @@ type DropdownProps = PropsWithChildren<
     $autoPositionX?: boolean;
     $autoPositionY?: boolean;
     onClose?: () => void;
+    usePortal?: boolean;
     style?: CSSProperties;
   }
 >;
@@ -65,6 +66,7 @@ const getDropdownStyle = (dropdown: DropdownProps): CSSProperties => {
 export const Dropdown: FC<DropdownProps> = ({
   children,
   onClose,
+  usePortal = true,
   ...props
 }) => {
   const { createPortal } = usePortals();
@@ -98,15 +100,14 @@ export const Dropdown: FC<DropdownProps> = ({
     }
   }, [onDocumentClick]);
 
-  const modalPortal = useMemo(
-    () =>
-      createPortal(
-        <styles.DropdownContainer ref={containerRef} {...props} style={style}>
-          {children}
-        </styles.DropdownContainer>
-      ),
-    [children, createPortal, props, style]
-  );
+  const modalPortal = useMemo(() => {
+    const content = (
+      <styles.DropdownContainer ref={containerRef} {...props} style={style}>
+        {children}
+      </styles.DropdownContainer>
+    );
+    return usePortal ? createPortal(content) : content;
+  }, [children, createPortal, props, style, usePortal]);
 
   return <>{modalPortal}</>;
 };