Merge branch 'main' of github.com:coingaming/moon-light into MDS-1374

coingaming · Nov 26, 2024 · 4bada00 · 4bada00
2 parents 3f0a563 + 98f923f
commit 4bada00
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 11 deletions.
diff --git a/.changeset/purple-jobs-judge.md b/.changeset/purple-jobs-judge.md
@@ -0,0 +1,5 @@
+---
+"@heathmont/moon-table-v8-tw": patch
+---
+
+Fix: Show table content on safari for moon docs [MDS-1375]
diff --git a/packages/table-v8/src/components/TH.tsx b/packages/table-v8/src/components/TH.tsx
@@ -50,6 +50,7 @@ const TH = forwardRef<HTMLTableCellElement, THProps>(
       isFirstColumn,
       withBorder,
       columnData,
+      rowGap = "2px",
     },
     ref,
   ) => {
@@ -71,6 +72,10 @@ const TH = forwardRef<HTMLTableCellElement, THProps>(
       ["minWidth", `${header.column.columnDef.minSize}px`],
       ["maxWidth", `${header.column.columnDef.maxSize}px`],
       ["--headerBGColor", `rgba(var(--${backgroundColor}, var(--gohan)))`],
+      [
+        "boxShadow",
+        `0 ${rowGap} rgba(var(--${backgroundColor}, var(--gohan)))`,
+      ],
     ]);
 
     if (stickySide) {

diff --git a/packages/table-v8/src/components/THead.tsx b/packages/table-v8/src/components/THead.tsx
@@ -14,17 +14,17 @@ const THead = ({
 }: THeadProps) => {
   const top = isSticky && rowGap ? rowGap : undefined;
   const styles = {
-    top: top,
-    "--beforeShift": top,
-    "--headerBGColor": `rgba(var(--${backgroundColor}, var(--gohan)))`,
+    top,
+    "--headerBGColor": `rgba(var(--${backgroundColor || "gohan"}))`,
+    boxShadow: `0 ${rowGap} rgba(var(--${backgroundColor}, var(--gohan)))`,
   } as const;
 
+  const beforeBg = "gohan";
+
   return isSticky ? (
     <thead
       style={styles}
-      className={
-        "sticky z-[2] before:absolute before:w-full before:bottom-0 before:-top-[var(--beforeShift)] before:bg-[color:var(--headerBGColor)]"
-      }
+      className={`sticky z-[2] before:content-[''] before:absolute before:-top-[2px] before:left-0 before:w-full before:max-h-[8px] before:h-[8px] before:bg-[color:var(--headerBGColor)]`}
     >
       {table.getHeaderGroups().map((headerGroup, indexHG) => (
         <tr key={indexHG}>
@@ -40,13 +40,14 @@ const THead = ({
               isLastColumn={index === headerGroup.headers.length - 1}
               columnData={columnMap && columnMap[indexHG][index]}
               withBorder={withBorder}
+              rowGap={rowGap}
             />
           ))}
         </tr>
       ))}
     </thead>
   ) : (
-    <thead>
+    <thead style={styles}>
       {table.getHeaderGroups().map((headerGroup, indexTH) => (
         <tr key={indexTH}>
           {headerGroup.headers.map((header, index) => (

diff --git a/packages/table-v8/src/components/Table.tsx b/packages/table-v8/src/components/Table.tsx
@@ -57,10 +57,6 @@ const Table: React.FC<TableProps> = ({
 }) => {
   const [columnResizeMode, setColumnResizeMode] =
     React.useState<ColumnResizeMode>("onChange");
-  /*
-  const [columnResizeDirection, setColumnResizeDirection] =
-    React.useState<ColumnResizeDirection>('ltr')
-*/
 
   const { data: selectableData, columns: selectableColumns } =
     handleSelectableTable({ data, columns, isSelectable });

diff --git a/packages/table-v8/src/private/types/THProps.ts b/packages/table-v8/src/private/types/THProps.ts
@@ -14,6 +14,7 @@ type THProps = {
   isResizable?: boolean;
   onClick?: (e: any) => void;
   columnData?: ColumnData;
+  rowGap?: string;
 };
 
 export default THProps;