@gobolt/genesis 0.4.1 → 0.4.3

package/dist/components/Row/Row.d.ts

@@ -1,4 +1,4 @@
-import { BadgeProps } from '../..';
+import { BadgeProps } from '../Badge';
 import { Action } from './RowActions/RowActions';
 export interface RowProps {
     label: string;

package/dist/components/Row/RowLabelValue/RowLabelValue.d.ts

@@ -1,4 +1,4 @@
-import { BadgeProps } from '../..';
+import { BadgeProps } from '../../Badge';
 interface RowLabelValueProperties {
     label: string;
     value: string;

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/components/TableWithControls/TableWithControls.d.ts

@@ -1,12 +1,10 @@
 import { TableProps } from '../Table';
 import { TableControlsData } from '../Table/TableControls/TableControls';
+import { ActionEvent, TableEventPayload } from '../../types/events';
 export interface TableWithControlsProps {
     tableControlsData: TableControlsData;
     tableData: TableProps<Record<string, any>>;
-    onChange: (event: {
-        event: string;
-        payload: any;
-    }) => void;
+    onChange: (event: ActionEvent<TableEventPayload>) => void;
 }
 declare const TableWithControls: ({ tableData, tableControlsData, onChange, }: TableWithControlsProps) => import("react/jsx-runtime").JSX.Element;
 export default TableWithControls;

package/dist/index.cjs

@@ -82128,6 +82128,9 @@ const getTextComponent = (firstBarData, secondBarData, stateColor, theme, isText
   );
 };
 const getCombinedPercent = (firstBarData, secondBarData) => {
+  if (secondBarData?.value === 0) {
+    return firstBarData?.value;
+  }
   if (firstBarData?.value && secondBarData?.value) {
     const total = firstBarData?.value + secondBarData?.value;
     const dividedBy = total / 2;
@@ -82402,7 +82405,7 @@ const Radio = ({ id: id2, label, selectedId, onChange, isDisabled }) => {
     RadioWrapper,
     {
       ref: radioReference,
-      $isDisabled: isDisabled,
+      $isDisabled: isDisabled ?? false,
       onFocus: (e3) => {
         if (isDisabled || e3.target !== radioReference.current) return;
         setIsFocused(true);
@@ -82571,7 +82574,7 @@ const RowLabelValue = ({
         children: label
       }
     ) }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(RowSkeleton, { isFullWidth }) }) : getBadgeOrTypography(badgeProps, value2) })
+    /* @__PURE__ */ jsxRuntime.jsx("div", { children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(RowSkeleton, { isFullWidth: isFullWidth ?? false }) }) : getBadgeOrTypography(badgeProps, value2) })
   ] });
 };
 const ActionsContainer = styled.div`
@@ -82621,13 +82624,13 @@ const Row = ({
           RowLabelValue,
           {
             label,
-            value: value2,
+            value: value2 ?? "",
             isFullWidth,
             isLoading,
             badgeProps: badgeProperties
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx(RowActions, { actions })
+        /* @__PURE__ */ jsxRuntime.jsx(RowActions, { actions: actions ?? null })
       ]
     }
   );
@@ -82682,11 +82685,14 @@ const SegmentedControls = ({
     value: id2,
     icon
   }));
+  const handleChange = (value2) => {
+    onChange(String(value2));
+  };
   return /* @__PURE__ */ jsxRuntime.jsx(
     SegmentedControls$1,
     {
       options: antOptions,
-      onChange,
+      onChange: handleChange,
       value: selectedTabId,
       block: isScaled
     }
@@ -82944,6 +82950,7 @@ const Select = ({
     }
   };
   const getSelectModeValue = (value22) => {
+    if (!value22) return "";
     if (Array.isArray(value22)) {
       if (selectDisplayMode === "count") {
         return `${value22.length} selected`;
@@ -83167,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 {
@@ -83195,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  {
@@ -83670,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;
@@ -83741,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,
@@ -83767,7 +83816,7 @@ function Table({
       $isMainContentCell: isMainContentCell,
       ...rest
     }
-  );
+  ) });
 }
 const TablePagination = ({
   columns,
@@ -83935,7 +83984,7 @@ const PrimaryTableControlsRow = ({
   const onSortChange = (value2) => {
     const sortActionEvent = {
       event: "primarySortChange",
-      payload: { value: value2 }
+      payload: { value: Array.isArray(value2) ? value2[0] : value2 }
     };
     onChange?.(sortActionEvent);
   };
@@ -84137,7 +84186,7 @@ const SecondaryTableControlsRow = ({
       },
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(GroupsRow, { groups, onGroupItemClick }),
-        totalRecords > 0 ? /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body2", color: "#6C6C6C", children: `${totalRecords} results` }) : null
+        (totalRecords ?? 0) > 0 ? /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body2", color: "#6C6C6C", children: `${totalRecords} results` }) : null
       ]
     }
   );
@@ -84198,7 +84247,7 @@ const TableWithControls = ({
   const onTableChange = (pagination, filters, sorter) => {
     onChange({
       event: "tableChange",
-      payload: { pagination, filters, sorter }
+      payload: { value: "tableChange", pagination, filters, sorter }
     });
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [

package/dist/index.js

@@ -82110,6 +82110,9 @@ const getTextComponent = (firstBarData, secondBarData, stateColor, theme, isText
   );
 };
 const getCombinedPercent = (firstBarData, secondBarData) => {
+  if (secondBarData?.value === 0) {
+    return firstBarData?.value;
+  }
   if (firstBarData?.value && secondBarData?.value) {
     const total = firstBarData?.value + secondBarData?.value;
     const dividedBy = total / 2;
@@ -82384,7 +82387,7 @@ const Radio = ({ id: id2, label, selectedId, onChange, isDisabled }) => {
     RadioWrapper,
     {
       ref: radioReference,
-      $isDisabled: isDisabled,
+      $isDisabled: isDisabled ?? false,
       onFocus: (e3) => {
         if (isDisabled || e3.target !== radioReference.current) return;
         setIsFocused(true);
@@ -82553,7 +82556,7 @@ const RowLabelValue = ({
         children: label
       }
     ) }),
-    /* @__PURE__ */ jsx("div", { children: isLoading ? /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(RowSkeleton, { isFullWidth }) }) : getBadgeOrTypography(badgeProps, value2) })
+    /* @__PURE__ */ jsx("div", { children: isLoading ? /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(RowSkeleton, { isFullWidth: isFullWidth ?? false }) }) : getBadgeOrTypography(badgeProps, value2) })
   ] });
 };
 const ActionsContainer = styled.div`
@@ -82603,13 +82606,13 @@ const Row = ({
           RowLabelValue,
           {
             label,
-            value: value2,
+            value: value2 ?? "",
             isFullWidth,
             isLoading,
             badgeProps: badgeProperties
           }
         ),
-        /* @__PURE__ */ jsx(RowActions, { actions })
+        /* @__PURE__ */ jsx(RowActions, { actions: actions ?? null })
       ]
     }
   );
@@ -82664,11 +82667,14 @@ const SegmentedControls = ({
     value: id2,
     icon
   }));
+  const handleChange = (value2) => {
+    onChange(String(value2));
+  };
   return /* @__PURE__ */ jsx(
     SegmentedControls$1,
     {
       options: antOptions,
-      onChange,
+      onChange: handleChange,
       value: selectedTabId,
       block: isScaled
     }
@@ -82926,6 +82932,7 @@ const Select = ({
     }
   };
   const getSelectModeValue = (value22) => {
+    if (!value22) return "";
     if (Array.isArray(value22)) {
       if (selectDisplayMode === "count") {
         return `${value22.length} selected`;
@@ -83149,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 {
@@ -83177,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  {
@@ -83652,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;
@@ -83723,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,
@@ -83749,7 +83798,7 @@ function Table({
       $isMainContentCell: isMainContentCell,
       ...rest
     }
-  );
+  ) });
 }
 const TablePagination = ({
   columns,
@@ -83917,7 +83966,7 @@ const PrimaryTableControlsRow = ({
   const onSortChange = (value2) => {
     const sortActionEvent = {
       event: "primarySortChange",
-      payload: { value: value2 }
+      payload: { value: Array.isArray(value2) ? value2[0] : value2 }
     };
     onChange?.(sortActionEvent);
   };
@@ -84119,7 +84168,7 @@ const SecondaryTableControlsRow = ({
       },
       children: [
         /* @__PURE__ */ jsx(GroupsRow, { groups, onGroupItemClick }),
-        totalRecords > 0 ? /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "#6C6C6C", children: `${totalRecords} results` }) : null
+        (totalRecords ?? 0) > 0 ? /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "#6C6C6C", children: `${totalRecords} results` }) : null
       ]
     }
   );
@@ -84180,7 +84229,7 @@ const TableWithControls = ({
   const onTableChange = (pagination, filters, sorter) => {
     onChange({
       event: "tableChange",
-      payload: { pagination, filters, sorter }
+      payload: { value: "tableChange", pagination, filters, sorter }
     });
   };
   return /* @__PURE__ */ jsxs(Fragment, { children: [

package/package.json

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