Simplify editable cell signature

Signed-off-by: Jonathan <contact@grafikart.fr>

packages/hooks/src/index.ts

@@ -2,3 +2,4 @@ export { usePageTitle } from "./usePageTitle";
 export { useToggle } from "./useToggle";
 export { useRefSync } from "./useRefSync";
 export { useList } from "./useList";
+export { useStateWithRef } from "./useStateWithRef";

packages/hooks/src/useStateWithRef.ts

@@ -0,0 +1,18 @@
+import { useCallback, useRef, useState } from "react";
+
+/**
+ * A useState hook that also returns a ref to the current state (usable in callbacks)
+ */
+export function useStateWithRef<T>(initialValue: T) {
+    const [state, setState] = useState(initialValue);
+    const ref = useRef(state);
+
+    return [
+        state,
+        useCallback((v: T) => {
+            setState(v);
+            ref.current = v;
+        }, []),
+        ref,
+    ] as const;
+}

packages/ui/src/Atoms/DataTable/DataTable.stories.tsx

@@ -1,28 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { DataTable, CellHead, Cell } from "./DataTable.tsx";
-
-export default {
-    title: "Atoms/DataTable",
-    component: DataTable,
-    argTypes: {},
-} satisfies Meta<typeof DataTable>;
-
-type Story = StoryObj<typeof DataTable>;
-
-export const Default: Story = {
-    render: () => {
-        return (
-            <DataTable columns={3}>
-                <CellHead>Header 1</CellHead>
-                <CellHead>Header 2</CellHead>
-                <CellHead>Header 3</CellHead>
-                <Cell>Row 1, Cell 1</Cell>
-                <Cell>Row 1, Cell 2</Cell>
-                <Cell>Row 1, Cell 3</Cell>
-                <Cell>Row 2, Cell 1</Cell>
-                <Cell>Row 2, Cell 2</Cell>
-                <Cell>Row 2, Cell 3</Cell>
-            </DataTable>
-        );
-    },
-};

packages/ui/src/Atoms/DataTable/DataTable.tsx

@@ -21,16 +21,17 @@ export function DataTable({
             };
         }
         return {
-            gridTemplateColumns: columns
-                .map((col) => `minmax(0, ${col})`)
-                .join(" "),
+            gridTemplateColumns: columns.join(" "),
         };
     };
 
     return (
         <div className="overflow-auto relative w-full p-1 -m-1">
             <Card
-                className={clsx(className, "w-full text-left grid")}
+                className={clsx(
+                    className,
+                    "min-w-min text-left grid overflow-hidden",
+                )}
                 style={style()}
             >
                 {children}

packages/ui/src/Molecules/Table/DataTable.stories.tsx

@@ -0,0 +1,65 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { type FC, Fragment, useState } from "react";
+import { CellHead, DataTable, Row } from "../../Atoms/DataTable/DataTable.tsx";
+import { EditableRow } from "./EditableRow.tsx";
+import { TextCell } from "./TextCell.tsx";
+import { fn } from "@storybook/test";
+import { SelectCell } from "./SelectCell.tsx";
+import { Badge } from "../../Atoms/Badge/Badge.tsx";
+
+type Component = FC<{ onUpdate: (key: string, value: unknown) => void }>;
+
+export default {
+    title: "Atoms/DataTable/Cells",
+    component: Fragment as Component,
+    argTypes: {},
+    args: { onUpdate: fn() },
+} satisfies Meta<Component>;
+
+type Story = StoryObj<Component>;
+
+export const Default: Story = {
+    render: ({ onUpdate }) => {
+        const [state, setState] = useState({
+            name: "John",
+            status: "delivered",
+            statuses: ["delivered", "pending"],
+        });
+        const updateField = (key: string, value: unknown) => {
+            onUpdate(key, value);
+            setState({
+                ...state,
+                [key]: value,
+            });
+        };
+        return (
+            <DataTable columns={["1fr", "1fr", "1fr"]}>
+                <Row>
+                    <CellHead>Nom</CellHead>
+                    <CellHead>Status</CellHead>
+                    <CellHead>Statuses</CellHead>
+                </Row>
+                <EditableRow onUpdate={updateField}>
+                    <TextCell required name="name" defaultValue={state.name} />
+                    <SelectCell
+                        items={["delivered", "pending"]}
+                        itemRenderer={({ item }) => <Badge>{item}</Badge>}
+                        name="status"
+                        defaultValue={state.status}
+                    />
+                    <SelectCell
+                        multiple
+                        items={["delivered", "pending"]}
+                        itemRenderer={({ item, onRemove }) => (
+                            <Badge onClick={() => onRemove?.(item)}>
+                                {item}
+                            </Badge>
+                        )}
+                        name="statuses"
+                        defaultValue={state.statuses}
+                    />
+                </EditableRow>
+            </DataTable>
+        );
+    },
+};

packages/ui/src/Molecules/Table/EditableCell.tsx

@@ -1,79 +1,39 @@
 import * as Popover from "@radix-ui/react-popover";
 import {
+    type CSSProperties,
     type KeyboardEventHandler,
     type ReactNode,
-    Suspense,
     useRef,
     useState,
 } from "react";
 import { Cell } from "../../Atoms/DataTable/DataTable.tsx";
-import { Command } from "cmdk";
-import { useTranslate } from "@probo/i18n";
-import { Spinner } from "../../Atoms/Spinner/Spinner.tsx";
 import { focusSiblingElement } from "@probo/helpers";
+import { useEditableRowContext } from "./EditableRow.tsx";
 
-type Props<T> =
-    | {
-          type: "text";
-          value?: T;
-          blink?: boolean;
-          onValueChange: (value: string) => void;
-          itemRenderer?: undefined;
-      }
-    | {
-          type: "select";
-          items: T[] | (() => T[]);
-          itemRenderer: (v: { item: T }) => ReactNode;
-          value?: T;
-          blink?: boolean;
-          onValueChange: (value: T) => void;
-      }
-    | {
-          type: "multiple";
-          items: T[] | (() => T[]);
-          itemRenderer: (v: { item: T; onRemove?: () => void }) => ReactNode;
-          value?: T[];
-          blink?: boolean;
-          onValueChange: (value: T[]) => void;
-      };
-
-type PropsField<Type, T> = Props<T> & {
-    type: Type;
-    onOpenChange: (open: boolean) => void;
-    padding: string;
-    height: number;
-};
-
-function getKey<T>(item: T): string {
-    if (
-        item &&
-        typeof item === "object" &&
-        "id" in item &&
-        typeof item.id === "string"
-    ) {
-        return item.id.toString();
-    }
-    if (typeof item === "string" || typeof item === "number") {
-        return item.toString();
-    }
-    if (item === undefined) {
-        return "";
-    }
-    console.error("Cannot compute a key from item", item);
-    return "";
+export function useEditableCellRef() {
+    return useRef<{ close: () => void } | null>(null);
 }
 
-export function EditableCell<T>(props: Props<T>) {
+/**
+ * Base component to create an editable table cell
+ */
+export function EditableCell(props: {
+    // Name of the field (used to retrieve errors)
+    name?: string;
+    // Label displayed inside the cell
+    label: ReactNode;
+    // Callback when the edit is dismissed
+    onClose: () => void;
+    // Content of the popover (e.g. a field)
+    children: ReactNode;
+    // Ref used to control the popover (used to close it programatically)
+    ref: ReturnType<typeof useEditableCellRef>;
+}) {
+    const { errors } = useEditableRowContext();
     const [isOpen, setOpen] = useState(false);
-    const [value, setValueState] = useState(props.value);
     const [height, setHeight] = useState<number | undefined>(undefined);
     const [padding, setPadding] = useState("12px");
     const td = useRef<HTMLTableCellElement>(null);
-    const valueRef = useRef(value);
-    const setValue = (value: T) => {
-        valueRef.current = value;
-        setValueState(value);
-    };
 
     // When opening the popover, remember the height and padding of the cell
     const onOpenChange = (open: boolean) => {
@@ -81,37 +41,17 @@ export function EditableCell<T>(props: Props<T>) {
             setHeight(td.current?.offsetHeight ?? undefined);
             setPadding(getComputedStyle(td.current!).paddingLeft);
         } else {
+            props.onClose();
             setHeight(undefined);
         }
-        // Send the value when closing the popover
-        if (!open && valueRef.current !== props.value) {
-            // @ts-expect-error - cannot unpack value type
-            props.onValueChange(valueRef.current);
-        }
         setOpen(open);
     };
 
-    const fieldProps = {
-        height,
-        onValueChange: setValue,
-        onOpenChange,
-        padding,
-        value,
-    } as any;
-
-    const children = (() => {
-        if (!value) {
-            return "";
-        }
-        if (props.type === "select") {
-            // @ts-expect-error TS cannot understand the link between props.type and value
-            return props.itemRenderer({ item: value });
-        }
-        if (Array.isArray(value) && props.type === "multiple") {
-            return <>{value.map((v) => props.itemRenderer({ item: v }))}</>;
-        }
-        return value as ReactNode;
-    })();
+    if (props.ref) {
+        props.ref.current = {
+            close: () => onOpenChange(false),
+        };
+    }
 
     // Handle keyboard navigation inside the cells
     const onKeyDown: KeyboardEventHandler<HTMLButtonElement> = (e) => {
@@ -129,6 +69,7 @@ export function EditableCell<T>(props: Props<T>) {
             );
         }
     };
+    const hasError = errors && props.name && props.name in errors;
 
     return (
         <Popover.Root onOpenChange={onOpenChange} open={isOpen}>
@@ -140,9 +81,9 @@ export function EditableCell<T>(props: Props<T>) {
                         className="flex flex-row justify-start hover:bg-level-2 flex-wrap gap-1 items-center relative"
                         style={{ height }}
                     >
-                        {children}
-                        {props.blink && (
-                            <div className="size-2 bg-txt-accent rounded-full top-1/2 right-3 absolute -translate-y-1/2 animate-pulse" />
+                        {props.label}
+                        {hasError && (
+                            <div className="size-2 bg-txt-danger rounded-full top-1/2 right-3 absolute -translate-y-1/2 animate-pulse" />
                         )}
                     </button>
                 </Cell>
@@ -153,205 +94,18 @@ export function EditableCell<T>(props: Props<T>) {
                     side="bottom"
                     align="start"
                     sideOffset={height ? height * -1 : 0}
-                    style={{
-                        minHeight: height,
-                    }}
+                    style={
+                        {
+                            minHeight: height,
+                            "--padding": padding,
+                            "--height": height + "px",
+                        } as CSSProperties
+                    }
                     className="border border-border-low bg-level-2 min-w-[200px] flex flex-col justify-center rounded-sm"
                 >
-                    {props.type === "text" && (
-                        <Input {...props} {...fieldProps} />
-                    )}
-                    {props.type === "select" && (
-                        <Select {...props} {...fieldProps} />
-                    )}
-                    {props.type === "multiple" && (
-                        <Multiple {...props} {...fieldProps} />
-                    )}
+                    {props.children}
                 </Popover.Content>
             </Popover.Portal>
         </Popover.Root>
     );
 }
-
-function Input(props: PropsField<"text", string>) {
-    const blurOnTab: KeyboardEventHandler<HTMLInputElement> = (e) => {
-        if (e.key === "Tab") {
-            props.onOpenChange(false);
-        }
-    };
-    return (
-        <input
-            type="text"
-            defaultValue={props.value}
-            onKeyDown={blurOnTab}
-            className="text-sm text-txt-primary outline-none"
-            onChange={(e) => props.onValueChange(e.currentTarget.value)}
-            style={{ paddingLeft: props.padding }}
-        />
-    );
-}
-
-function Select<T>(props: PropsField<"select", T>) {
-    const { __ } = useTranslate();
-    const showSearch = false;
-    return (
-        <Command className="text-txt-primary absolute left-0 top-0 right-0 bg-level-2 border border-border-low rounded-b-sm">
-            <div
-                style={{ height: props.height, paddingLeft: props.padding }}
-                className="flex flex-col justify-center"
-                onClick={() => props.onOpenChange(false)}
-            >
-                {props.value ? props.itemRenderer({ item: props.value }) : ""}
-            </div>
-            {showSearch && (
-                <Command.Input
-                    className="text-sm text-txt-secondary border-y border-border-low py-2 px-3 w-full focus:outline-txt-accent outline"
-                    placeholder={__("Search")}
-                />
-            )}
-            <Command.List>
-                {Array.isArray(props.items) ? (
-                    props.items
-                        .filter((item) => item !== props.value)
-                        .map((item) => (
-                            <Command.Item
-                                key={getKey(item)}
-                                className="py-2 px-3 hover:bg-level-3 data-[selected]:bg-level-3"
-                                onSelect={() => {
-                                    props.onValueChange(item);
-                                    props.onOpenChange(false);
-                                }}
-                            >
-                                {props.itemRenderer({ item })}
-                            </Command.Item>
-                        ))
-                ) : (
-                    <Suspense
-                        fallback={
-                            <div className="py-2 px-3">
-                                <Spinner />
-                            </div>
-                        }
-                    >
-                        <SelectItems
-                            value={props.value}
-                            itemRenderer={props.itemRenderer}
-                            items={props.items}
-                            onSelect={(item) => {
-                                props.onValueChange(item);
-                                props.onOpenChange(false);
-                            }}
-                        />
-                    </Suspense>
-                )}
-            </Command.List>
-        </Command>
-    );
-}
-
-function Multiple<T>(props: PropsField<"multiple", T>) {
-    const { __ } = useTranslate();
-    const showSearch = true;
-
-    const pushValue = (item: T) => {
-        props.onValueChange([...(props.value ?? []), item]);
-    };
-
-    const removeValue = (item: T) => {
-        props.onValueChange(
-            props.value!.filter((v) => getKey(v) !== getKey(item)),
-        );
-    };
-
-    return (
-        <Command className="text-txt-primary absolute left-0 top-0 right-0 bg-level-2 border border-border-low rounded-b-sm">
-            {props.value && props.value.length > 0 && (
-                <div
-                    className="flex flex-col gap-2 py-3"
-                    style={{
-                        paddingLeft: props.padding,
-                    }}
-                >
-                    {props.value &&
-                        props.value.map((item) =>
-                            props.itemRenderer({
-                                item,
-                                onRemove: () => removeValue(item),
-                            }),
-                        )}
-                </div>
-            )}
-            {showSearch && (
-                <Command.Input
-                    className="text-sm text-txt-secondary border-y border-border-low py-2 px-3 w-full focus:outline-txt-accent outline"
-                    placeholder={__("Search")}
-                />
-            )}
-            <Command.List>
-                {Array.isArray(props.items) ? (
-                    props.items
-                        .filter((item) => item !== props.value)
-                        .map((item, k) => (
-                            <Command.Item
-                                key={k}
-                                className="py-2 px-3 hover:bg-level-3 data-[selected]:bg-level-3"
-                                onSelect={() => {
-                                    pushValue(item);
-                                }}
-                            >
-                                {props.itemRenderer({
-                                    item,
-                                })}
-                            </Command.Item>
-                        ))
-                ) : (
-                    <Suspense
-                        fallback={
-                            <div className="py-2 px-3">
-                                <Spinner />
-                            </div>
-                        }
-                    >
-                        <SelectItems
-                            value={props.value}
-                            itemRenderer={props.itemRenderer}
-                            items={props.items}
-                            onSelect={(item) => {
-                                pushValue(item);
-                            }}
-                        />
-                    </Suspense>
-                )}
-            </Command.List>
-        </Command>
-    );
-}
-/**
- * Resolve items with a suspense
- */
-function SelectItems<T>(props: {
-    value?: T | T[];
-    itemRenderer: (v: { item: T }) => ReactNode;
-    items: () => T[];
-    onSelect: (item: T) => void;
-}) {
-    const items = props.items();
-    const keys = Array.isArray(props.value)
-        ? props.value.map(getKey)
-        : [getKey(props.value)];
-    return (
-        <>
-            {items
-                .filter((item) => !keys.includes(getKey(item)))
-                .map((item) => (
-                    <Command.Item
-                        key={getKey(item)}
-                        className="py-2 px-3 hover:bg-level-3 data-[selected]:bg-level-3"
-                        onSelect={() => props.onSelect(item)}
-                    >
-                        {props.itemRenderer({ item })}
-                    </Command.Item>
-                ))}
-        </>
-    );
-}

packages/ui/src/Molecules/Table/EditableRow.tsx

@@ -0,0 +1,46 @@
+import {
+    createContext,
+    type ReactNode,
+    useContext,
+    useMemo,
+    useRef,
+} from "react";
+import { Row } from "../../Atoms/DataTable/DataTable.tsx";
+
+type Props = {
+    onUpdate: (key: string, value: unknown) => void;
+    errors?: Record<string, string>;
+    children: ReactNode;
+};
+
+export const EditableRowContext = createContext<null | Omit<Props, "children">>(
+    null,
+);
+
+export const useEditableRowContext = () => {
+    const context = useContext(EditableRowContext);
+    if (!context) {
+        throw new Error(
+            "useEditableRowContext must be used within an EditableRow",
+        );
+    }
+    return context;
+};
+
+export function EditableRow(props: Props) {
+    const onUpdateRef = useRef(props.onUpdate);
+    onUpdateRef.current = props.onUpdate;
+    const value = useMemo(
+        () => ({
+            errors: props.errors,
+            onUpdate: (key: string, value: unknown) =>
+                onUpdateRef.current(key, value),
+        }),
+        [props.errors],
+    );
+    return (
+        <EditableRowContext value={value}>
+            <Row>{props.children}</Row>
+        </EditableRowContext>
+    );
+}

packages/ui/src/Molecules/Table/SelectCell.tsx

@@ -0,0 +1,164 @@
+import { EditableCell, useEditableCellRef } from "./EditableCell.tsx";
+import { Command } from "cmdk";
+import { Fragment, type ReactNode } from "react";
+import { getKey } from "./utils.ts";
+import { useTranslate } from "@probo/i18n";
+import { useEditableRowContext } from "./EditableRow.tsx";
+import { useStateWithRef } from "@probo/hooks";
+import { tv } from "tailwind-variants";
+import { Badge } from "../../Atoms/Badge/Badge.tsx";
+
+type Props<T> = {
+    name: string;
+    items: T[];
+    itemRenderer: (v: { item: T; onRemove?: (item: T) => void }) => ReactNode;
+} & (
+    | { defaultValue: T; multiple?: undefined }
+    | { defaultValue: T[]; multiple: true }
+);
+
+export const selectCell = tv({
+    slots: {
+        command:
+            "text-txt-primary absolute left-0 top-0 right-0 bg-level-2 border border-border-low rounded-b-sm",
+        value: "flex flex-col gap-2 py-3 justify-center",
+        input: "text-sm text-txt-secondary border-y border-border-low py-2 px-3 w-full focus:outline-txt-accent outline",
+        item: "py-2 px-3 hover:bg-level-3 data-[selected=true]:bg-level-3",
+    },
+});
+
+export function SelectCell<T>(props: Props<T>) {
+    const [value, setValue, valueRef] = useStateWithRef<T | T[]>(
+        props.defaultValue,
+    );
+    const cellRef = useEditableCellRef();
+    const { __ } = useTranslate();
+    const usedKeys = new Set<string>(
+        Array.isArray(value) ? value.map(getKey) : [getKey(value)],
+    );
+    const { onUpdate } = useEditableRowContext();
+
+    const onSelect = (item: T) => {
+        if (props.multiple) {
+            setValue([...((valueRef.current as T[]) ?? []), item]);
+            return;
+        }
+        setValue(item);
+        cellRef.current?.close();
+    };
+
+    const onClose = () => {
+        if (valueRef.current === props.defaultValue) {
+            return;
+        }
+        onUpdate(props.name, valueRef.current);
+    };
+
+    const classNames = selectCell();
+
+    return (
+        <EditableCell
+            name={props.name}
+            label={
+                <SelectValue value={value} itemRenderer={props.itemRenderer} />
+            }
+            onClose={onClose}
+            ref={cellRef}
+        >
+            <Command className={classNames.command()}>
+                <div
+                    className={classNames.value()}
+                    style={{
+                        paddingLeft: "var(--padding)",
+                        minHeight: "var(--height)",
+                    }}
+                >
+                    {" "}
+                    <SelectValue
+                        onValueChange={setValue}
+                        value={value}
+                        itemRenderer={props.itemRenderer}
+                    />
+                </div>{" "}
+                {props.multiple && (
+                    <Command.Input
+                        className={classNames.input()}
+                        placeholder={__("Search")}
+                    />
+                )}
+                <Command.List>
+                    {props.items
+                        .filter((item) => !usedKeys.has(getKey(item)))
+                        .map((item) => (
+                            <Command.Item
+                                key={getKey(item)}
+                                className={classNames.item()}
+                                onSelect={() => onSelect(item)}
+                            >
+                                {props.itemRenderer({ item })}
+                            </Command.Item>
+                        ))}
+                </Command.List>
+            </Command>
+        </EditableCell>
+    );
+}
+
+export function SelectValue<T>(props: {
+    itemRenderer: Props<T>["itemRenderer"];
+    onValueChange?: (value: T | T[]) => void;
+    value: T | T[] | undefined;
+}) {
+    if (!props.value) {
+        return "";
+    }
+    if (!Array.isArray(props.value)) {
+        return props.value ? props.itemRenderer({ item: props.value }) : "";
+    }
+
+    const removeValue = (item: T) => {
+        if (!Array.isArray(props.value) || !props.onValueChange) {
+            return;
+        }
+        props.onValueChange(
+            props.value!.filter((v) => getKey(v) !== getKey(item)),
+        );
+    };
+
+    if (!props.onValueChange && props.value.length > 0) {
+        return (
+            <>
+                {props.value.slice(0, 3).map((item) => (
+                    <Fragment key={getKey(item)}>
+                        {props.itemRenderer({
+                            item,
+                            onRemove: props.onValueChange
+                                ? () => removeValue(item)
+                                : undefined,
+                        })}
+                    </Fragment>
+                ))}
+                {props.value.length > 3 && (
+                    <Badge className="text-txt-secondary">
+                        +{props.value.length - 3}
+                    </Badge>
+                )}
+            </>
+        );
+    }
+
+    return (
+        <>
+            {props.value.map((item) => (
+                <Fragment key={getKey(item)}>
+                    {props.itemRenderer({
+                        item,
+                        onRemove: props.onValueChange
+                            ? () => removeValue(item)
+                            : undefined,
+                    })}
+                </Fragment>
+            ))}
+        </>
+    );
+}

packages/ui/src/Molecules/Table/TextCell.tsx

@@ -0,0 +1,47 @@
+import { EditableCell, useEditableCellRef } from "./EditableCell.tsx";
+import { type KeyboardEventHandler, useRef, useState } from "react";
+import { useEditableRowContext } from "./EditableRow.tsx";
+
+type Props = {
+    name: string;
+    defaultValue: string;
+    required?: boolean;
+};
+
+export function TextCell(props: Props) {
+    const [value, setValue] = useState(props.defaultValue);
+    const inputRef = useRef<HTMLInputElement>(null);
+    const cellRef = useEditableCellRef();
+    const blurOnTab: KeyboardEventHandler<HTMLInputElement> = (e) => {
+        if (e.key === "Tab") {
+            cellRef.current?.close();
+        }
+    };
+    const { onUpdate } = useEditableRowContext();
+    const onClose = () => {
+        const inputValue = (inputRef.current?.value ?? "").trim();
+        // Do not propagate empty value for required fields
+        if (props.required && inputValue === "") {
+            return;
+        }
+        setValue(inputValue);
+        onUpdate(props.name, inputValue);
+    };
+    return (
+        <EditableCell
+            name={props.name}
+            label={value}
+            ref={cellRef}
+            onClose={onClose}
+        >
+            <input
+                type="text"
+                ref={inputRef}
+                defaultValue={props.defaultValue}
+                onKeyDown={blurOnTab}
+                className="text-sm text-txt-primary outline-none"
+                style={{ paddingLeft: "var(--padding)" }}
+            />
+        </EditableCell>
+    );
+}

packages/ui/src/Molecules/Table/utils.ts

@@ -0,0 +1,18 @@
+export function getKey<T>(item: T): string {
+    if (
+        item &&
+        typeof item === "object" &&
+        "id" in item &&
+        typeof item.id === "string"
+    ) {
+        return item.id.toString();
+    }
+    if (typeof item === "string" || typeof item === "number") {
+        return item.toString();
+    }
+    if (item === undefined) {
+        return "";
+    }
+    console.error("Cannot compute a key from item", item);
+    return "";
+}

packages/ui/src/index.ts

@@ -79,6 +79,13 @@ export { ImpactOptions } from "./Molecules/Select/ImpactOptions";
 export { DurationPicker } from "./Molecules/DurationPicker/DurationPicker";
 export { FrameworkLogo } from "./Molecules/Badge/FrameworkLogo";
 export { EditableCell } from "./Molecules/Table/EditableCell";
+export { TextCell } from "./Molecules/Table/TextCell";
+export {
+    SelectCell,
+    selectCell,
+    SelectValue,
+} from "./Molecules/Table/SelectCell";
+export { EditableRow } from "./Molecules/Table/EditableRow";
 
 // Hooks
 export { useToast, Toasts } from "./Atoms/Toasts/Toasts";