@gobolt/genesis 0.4.2 → 0.4.3

package/dist/components/Table/Table.d.ts

@@ -5,12 +5,14 @@ import * as React from "react";
 export type Change = (actionEvent: ActionEvent) => void;
 export type SelectionType = "checkbox" | "radio";
 export interface MaterializedViewConfig<T = any> {
-    height?: number | string;
+    height?: number | string | "dynamic";
     onLoadMore?: (offset: number, limit: number) => Promise<T[]> | T[];
     loadMoreThreshold?: number;
     initialLoadSize?: number;
     hasMore?: boolean;
     loading?: boolean;
+    maxHeight?: number | string;
+    minHeight?: number | string;
 }
 export interface TableProps<T extends Record<string, any>> {
     dataSource: T[];

package/dist/index.cjs

@@ -83174,10 +83174,16 @@ const getGenesisClass$1 = ({ colors: colors2, borderRadius: borderRadius2, sizin
   return `
     &.ant-table-wrapper {
       // Add your custom styles here
+      border-radius: 0 !important;
     }
 
     .ant-table {
       // Add your custom table styles here
+      border-radius: 0 !important;
+    }
+
+    .ant-table-container {
+      border-radius: 0 !important;
     }
 
     .ant-table-cell {
@@ -83202,6 +83208,16 @@ const getGenesisClass$1 = ({ colors: colors2, borderRadius: borderRadius2, sizin
       font-size: ${$isMainContentCell ? "16px" : "14px"} !important;
       font-weight: 400;
       color: ${$isMainContentCell ? colors2.onsurface.copy : colors2.onsurface["copy-light"]} !important;
+      background-color: #F4F4F4 !important;
+      border-radius: 0 !important;
+    }
+
+    .ant-table-thead > tr:first-child > th:first-child {
+      border-top-left-radius: 0 !important;
+    }
+
+    .ant-table-thead > tr:first-child > th:last-child {
+      border-top-right-radius: 0 !important;
     }
 
     .ant-table-tbody > tr  {
@@ -83677,7 +83693,32 @@ function Table({
   const [materializedData, setMaterializedData] = React__namespace.useState([]);
   const [isLoadingMore, setIsLoadingMore] = React__namespace.useState(false);
   const [hasMoreData, setHasMoreData] = React__namespace.useState(true);
+  const [dynamicHeight, setDynamicHeight] = React__namespace.useState(
+    400
+  );
   const tableRef = React__namespace.useRef(null);
+  const containerRef = React__namespace.useRef(null);
+  React__namespace.useEffect(() => {
+    if (isMaterializedView && materializedViewConfig?.height === "dynamic") {
+      const calculateHeight = () => {
+        if (!containerRef.current) return;
+        const container = containerRef.current;
+        const rect = container.getBoundingClientRect();
+        const viewportHeight = window.innerHeight;
+        const availableHeight = viewportHeight - rect.top - 100;
+        const minHeight = typeof materializedViewConfig.minHeight === "number" ? materializedViewConfig.minHeight : 200;
+        const maxHeight = typeof materializedViewConfig.maxHeight === "number" ? materializedViewConfig.maxHeight : availableHeight;
+        const calculatedHeight = Math.max(
+          minHeight,
+          Math.min(maxHeight, availableHeight)
+        );
+        setDynamicHeight(calculatedHeight);
+      };
+      calculateHeight();
+      window.addEventListener("resize", calculateHeight);
+      return () => window.removeEventListener("resize", calculateHeight);
+    }
+  }, [isMaterializedView, materializedViewConfig]);
   React__namespace.useEffect(() => {
     if (isMaterializedView) {
       const initialSize = materializedViewConfig?.initialLoadSize || 50;
@@ -83748,15 +83789,16 @@ function Table({
   }, [isMaterializedView, pagination]);
   const scrollConfig = React__namespace.useMemo(() => {
     if (isMaterializedView) {
+      const height = materializedViewConfig?.height === "dynamic" ? dynamicHeight : materializedViewConfig?.height || 400;
       return {
         ...rest.scroll,
-        y: materializedViewConfig?.height || 400
+        y: height
       };
     }
     return rest.scroll;
-  }, [isMaterializedView, materializedViewConfig, rest.scroll]);
+  }, [isMaterializedView, materializedViewConfig, dynamicHeight, rest.scroll]);
   const tableDataSource = isMaterializedView ? materializedData : dataSource;
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: containerRef, children: /* @__PURE__ */ jsxRuntime.jsx(
     Table$1,
     {
       ref: tableRef,
@@ -83774,7 +83816,7 @@ function Table({
       $isMainContentCell: isMainContentCell,
       ...rest
     }
-  );
+  ) });
 }
 const TablePagination = ({
   columns,

package/dist/index.js

@@ -83156,10 +83156,16 @@ const getGenesisClass$1 = ({ colors: colors2, borderRadius: borderRadius2, sizin
   return `
     &.ant-table-wrapper {
       // Add your custom styles here
+      border-radius: 0 !important;
     }
 
     .ant-table {
       // Add your custom table styles here
+      border-radius: 0 !important;
+    }
+
+    .ant-table-container {
+      border-radius: 0 !important;
     }
 
     .ant-table-cell {
@@ -83184,6 +83190,16 @@ const getGenesisClass$1 = ({ colors: colors2, borderRadius: borderRadius2, sizin
       font-size: ${$isMainContentCell ? "16px" : "14px"} !important;
       font-weight: 400;
       color: ${$isMainContentCell ? colors2.onsurface.copy : colors2.onsurface["copy-light"]} !important;
+      background-color: #F4F4F4 !important;
+      border-radius: 0 !important;
+    }
+
+    .ant-table-thead > tr:first-child > th:first-child {
+      border-top-left-radius: 0 !important;
+    }
+
+    .ant-table-thead > tr:first-child > th:last-child {
+      border-top-right-radius: 0 !important;
     }
 
     .ant-table-tbody > tr  {
@@ -83659,7 +83675,32 @@ function Table({
   const [materializedData, setMaterializedData] = React.useState([]);
   const [isLoadingMore, setIsLoadingMore] = React.useState(false);
   const [hasMoreData, setHasMoreData] = React.useState(true);
+  const [dynamicHeight, setDynamicHeight] = React.useState(
+    400
+  );
   const tableRef = React.useRef(null);
+  const containerRef = React.useRef(null);
+  React.useEffect(() => {
+    if (isMaterializedView && materializedViewConfig?.height === "dynamic") {
+      const calculateHeight = () => {
+        if (!containerRef.current) return;
+        const container = containerRef.current;
+        const rect = container.getBoundingClientRect();
+        const viewportHeight = window.innerHeight;
+        const availableHeight = viewportHeight - rect.top - 100;
+        const minHeight = typeof materializedViewConfig.minHeight === "number" ? materializedViewConfig.minHeight : 200;
+        const maxHeight = typeof materializedViewConfig.maxHeight === "number" ? materializedViewConfig.maxHeight : availableHeight;
+        const calculatedHeight = Math.max(
+          minHeight,
+          Math.min(maxHeight, availableHeight)
+        );
+        setDynamicHeight(calculatedHeight);
+      };
+      calculateHeight();
+      window.addEventListener("resize", calculateHeight);
+      return () => window.removeEventListener("resize", calculateHeight);
+    }
+  }, [isMaterializedView, materializedViewConfig]);
   React.useEffect(() => {
     if (isMaterializedView) {
       const initialSize = materializedViewConfig?.initialLoadSize || 50;
@@ -83730,15 +83771,16 @@ function Table({
   }, [isMaterializedView, pagination]);
   const scrollConfig = React.useMemo(() => {
     if (isMaterializedView) {
+      const height = materializedViewConfig?.height === "dynamic" ? dynamicHeight : materializedViewConfig?.height || 400;
       return {
         ...rest.scroll,
-        y: materializedViewConfig?.height || 400
+        y: height
       };
     }
     return rest.scroll;
-  }, [isMaterializedView, materializedViewConfig, rest.scroll]);
+  }, [isMaterializedView, materializedViewConfig, dynamicHeight, rest.scroll]);
   const tableDataSource = isMaterializedView ? materializedData : dataSource;
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("div", { ref: containerRef, children: /* @__PURE__ */ jsx(
     Table$1,
     {
       ref: tableRef,
@@ -83756,7 +83798,7 @@ function Table({
       $isMainContentCell: isMainContentCell,
       ...rest
     }
-  );
+  ) });
 }
 const TablePagination = ({
   columns,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gobolt/genesis",
-  "version": "0.4.2",
+  "version": "0.4.3",
   "description": "genesis design system",
   "author": "gobolt",
   "license": "MIT",