Style for cell form

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

apps/console/src/pages/organizations/assets/AssetsPage.tsx

@@ -18,6 +18,7 @@ import {
   DataTable,
   CellHead,
   Cell,
+  Row,
 } from "@probo/ui";
 import { useTranslate } from "@probo/i18n";
 import { usePageTitle } from "@probo/hooks";
@@ -145,13 +146,15 @@ export default function AssetsPage(props: Props) {
           </Authorized>
         )}
       </PageHeader>
-      <DataTable columns={6}>
+      <DataTable columns={["1fr", "1fr", "1fr", "1fr", "1fr", "56px"]}>
-        <CellHead>{__("Name")}</CellHead>
+        <Row>
-        <CellHead>{__("Type")}</CellHead>
+          <CellHead>{__("Name")}</CellHead>
-        <CellHead>{__("Amount")}</CellHead>
+          <CellHead>{__("Type")}</CellHead>
-        <CellHead>{__("Owner")}</CellHead>
+          <CellHead>{__("Amount")}</CellHead>
-        <CellHead>{__("Vendors")}</CellHead>
+          <CellHead>{__("Owner")}</CellHead>
-        <CellHead></CellHead>
+          <CellHead>{__("Vendors")}</CellHead>
+          <CellHead></CellHead>
+        </Row>
         {assets.map((entry) => (
           <AssetRow key={entry.id} entry={entry} connectionId={connectionId} />
         ))}
@@ -196,7 +199,7 @@ function AssetRow({
   };
 
   return (
-    <>
+    <Row>
       <EditableCell
         type="text"
         defaultValue={entry.name}
@@ -278,6 +281,6 @@ function AssetRow({
           </ActionDropdown>
         )}
       </Cell>
-    </>
+    </Row>
   );
 }

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

@@ -42,8 +42,8 @@ export function CellHead({
         <div
             {...props}
             className={clsx(
-                "text-xs text-txt-tertiary font-semibold border-border-low border-b",
+                "text-xs text-txt-tertiary font-semibold ",
-                "px-6 whitespace-nowrap py-3",
+                "first:pl-6 p-3 whitespace-nowrap",
                 className,
             )}
         >
@@ -52,6 +52,10 @@ export function CellHead({
     );
 }
 
+export function Row(props: ComponentPropsWithRef<"div">) {
+    return <div {...props} className={clsx("contents", props.className)} />;
+}
+
 export function Cell({
     asChild,
     ...props
@@ -62,7 +66,7 @@ export function Cell({
             data-cell
             {...props}
             className={clsx(
-                "py-3 px-6 text-sm text-txt-primary bg-tertiary border-t border-border-low flex flex-col justify-center",
+                "first:pl-6 p-3 text-sm text-txt-primary bg-tertiary border-t border-border-low flex flex-col justify-center",
                 props.className,
             )}
         />

packages/ui/src/Atoms/Select/Select.tsx

@@ -16,6 +16,7 @@ import { tv } from "tailwind-variants";
 import {
     Children,
     type ComponentProps,
+    type CSSProperties,
     type PropsWithChildren,
     type ReactNode,
 } from "react";
@@ -36,6 +37,8 @@ type Props<T> = PropsWithChildren<
         onSearch?: (s: string) => void;
         searchPlaceholder?: string;
         loading?: boolean;
+        style?: CSSProperties;
+        dropdownProps?: ComponentProps<typeof Content>;
     } & Omit<ComponentProps<typeof Root>, "onChange" | "value">
 >;
 
@@ -108,6 +111,7 @@ export function Select<T>({
     open,
     defaultOpen = false,
     onOpenChange,
+    dropdownProps,
     ...props
 }: Props<T>) {
     const { trigger, content, icon } = select({
@@ -140,7 +144,6 @@ export function Select<T>({
             </Trigger>
             <Portal>
                 <Content
-                    className={content()}
                     position="popper"
                     sideOffset={5}
                     style={{
@@ -148,6 +151,8 @@ export function Select<T>({
                         maxHeight:
                             "var(--radix-select-content-available-height)",
                     }}
+                    {...dropdownProps}
+                    className={content({ className: dropdownProps?.className })}
                 >
                     {onSearch && (
                         <Input

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

@@ -69,18 +69,28 @@ export function EditableCell({
                     side="bottom"
                     align="start"
                     sideOffset={height * -1}
-                    style={{ height, paddingLeft: padding }}
+                    style={{
+                        height,
+                        paddingLeft: type === "select" ? 0 : padding,
+                    }}
                     className="border border-border-low bg-level-2 min-w-[200px] min-h-[57px] flex flex-col justify-center rounded-sm"
                 >
                     {type === "select" && (
                         <>
                             <Select
-                                className="-mx-3"
                                 onValueChange={onValueChange}
                                 onOpenChange={setOpen}
                                 defaultOpen
                                 variant="ghost"
+                                style={{
+                                    height: height,
+                                }}
                                 placeholder={children}
+                                dropdownProps={{
+                                    sideOffset: 0,
+                                    className:
+                                        "rounded-t-none border border-border-low",
+                                }}
                             >
                                 {options}
                             </Select>

packages/ui/src/index.ts

@@ -38,7 +38,7 @@ export { InfiniteScrollTrigger } from "./Atoms/InfiniteScrollTrigger/InfiniteScr
 export { PriorityLevel } from "./Atoms/PriorityLevel/PriorityLevel.tsx";
 export { TaskStateIcon } from "./Atoms/Icons/TaskStateIcon";
 export { Checkbox } from "./Atoms/Checkbox/Checkbox";
-export { DataTable, Cell, CellHead } from "./Atoms/DataTable/DataTable";
+export { DataTable, Cell, CellHead, Row } from "./Atoms/DataTable/DataTable";
 
 // Molecules
 export {