@gobolt/genesis 0.4.0 → 0.4.2

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,7 +5,6 @@ import * as React from "react";
 export type Change = (actionEvent: ActionEvent) => void;
 export type SelectionType = "checkbox" | "radio";
 export interface MaterializedViewConfig<T = any> {
-    enabled: boolean;
     height?: number | string;
     onLoadMore?: (offset: number, limit: number) => Promise<T[]> | T[];
     loadMoreThreshold?: number;
@@ -27,7 +26,7 @@ export interface TableProps<T extends Record<string, any>> {
             name?: string;
         };
     };
-    onChange?: (pagination: TablePaginationType, filters: Record<string, React.Key[]>, sorter: SorterResult<T> | SorterResult<T>[]) => void;
+    onChange?: (pagination: TablePaginationConfig, filters: Record<string, any>, sorter: SorterResult<T> | SorterResult<T>[], extra: any) => void;
     loading?: boolean;
     pagination?: (TablePaginationConfig & {
         paginationStyle?: PaginationStyle;
@@ -42,7 +41,8 @@ export interface TableProps<T extends Record<string, any>> {
     };
     [key: string]: any;
     isMainContentCell?: boolean;
-    materializedView?: MaterializedViewConfig<T>;
+    isMaterializedView?: boolean;
+    materializedViewConfig?: MaterializedViewConfig<T>;
 }
 export type TablePaginationType = {
     pageSize?: number;
@@ -56,5 +56,5 @@ export type SorterResult<T> = {
     field?: keyof T | string | React.Key | readonly React.Key[];
     columnKey?: React.Key;
 };
-declare function Table<T extends Record<string, any>>({ columns, dataSource, rowKey, size, onChange, rowSelection, pagination, isMainContentCell, materializedView, ...rest }: TableProps<T>): import("react/jsx-runtime").JSX.Element;
+declare function Table<T extends Record<string, any>>({ columns, dataSource, rowKey, size, onChange, rowSelection, pagination, isMainContentCell, isMaterializedView, materializedViewConfig, ...rest }: TableProps<T>): import("react/jsx-runtime").JSX.Element;
 export default Table;

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`;
@@ -83663,7 +83670,8 @@ function Table({
   rowSelection,
   pagination,
   isMainContentCell = false,
-  materializedView,
+  isMaterializedView = false,
+  materializedViewConfig,
   ...rest
 }) {
   const [materializedData, setMaterializedData] = React__namespace.useState([]);
@@ -83671,27 +83679,29 @@ function Table({
   const [hasMoreData, setHasMoreData] = React__namespace.useState(true);
   const tableRef = React__namespace.useRef(null);
   React__namespace.useEffect(() => {
-    if (materializedView?.enabled) {
-      const initialSize = materializedView.initialLoadSize || 50;
+    if (isMaterializedView) {
+      const initialSize = materializedViewConfig?.initialLoadSize || 50;
       const initialData = dataSource.slice(0, initialSize);
       setMaterializedData(initialData);
       setHasMoreData(dataSource.length > initialSize);
     }
-  }, [dataSource, materializedView]);
+  }, [dataSource, isMaterializedView, materializedViewConfig]);
   const handleScroll = React__namespace.useCallback(
     debounce((e3) => {
-      if (!materializedView?.enabled || !materializedView.onLoadMore || isLoadingMore || !hasMoreData) {
+      if (!isMaterializedView || !materializedViewConfig?.onLoadMore || isLoadingMore || !hasMoreData) {
         return;
       }
       const { target } = e3;
       const { scrollTop, scrollHeight, clientHeight } = target;
-      const threshold = materializedView.loadMoreThreshold || 100;
+      const threshold = materializedViewConfig?.loadMoreThreshold || 100;
       if (scrollTop + clientHeight >= scrollHeight - threshold) {
         setIsLoadingMore(true);
         const currentLength = materializedData.length;
-        const loadSize = materializedView.initialLoadSize || 50;
-        if (materializedView.onLoadMore) {
-          Promise.resolve(materializedView.onLoadMore(currentLength, loadSize)).then((newData) => {
+        const loadSize = materializedViewConfig?.initialLoadSize || 50;
+        if (materializedViewConfig?.onLoadMore) {
+          Promise.resolve(
+            materializedViewConfig.onLoadMore(currentLength, loadSize)
+          ).then((newData) => {
             setMaterializedData((prev2) => [...prev2, ...newData]);
             setHasMoreData(newData.length === loadSize);
           }).catch((error2) => {
@@ -83710,10 +83720,17 @@ function Table({
         }
       }
     }, 200),
-    [materializedView, materializedData, isLoadingMore, hasMoreData, dataSource]
+    [
+      isMaterializedView,
+      materializedViewConfig,
+      materializedData,
+      isLoadingMore,
+      hasMoreData,
+      dataSource
+    ]
   );
   const paginationConfig = React__namespace.useMemo(() => {
-    if (materializedView?.enabled) {
+    if (isMaterializedView) {
       return false;
     }
     return pagination === false ? false : {
@@ -83728,17 +83745,17 @@ function Table({
         }
       )
     };
-  }, [materializedView, pagination]);
+  }, [isMaterializedView, pagination]);
   const scrollConfig = React__namespace.useMemo(() => {
-    if (materializedView?.enabled) {
+    if (isMaterializedView) {
       return {
         ...rest.scroll,
-        y: materializedView.height || 400
+        y: materializedViewConfig?.height || 400
       };
     }
     return rest.scroll;
-  }, [materializedView, rest.scroll]);
-  const tableDataSource = materializedView?.enabled ? materializedData : dataSource;
+  }, [isMaterializedView, materializedViewConfig, rest.scroll]);
+  const tableDataSource = isMaterializedView ? materializedData : dataSource;
   return /* @__PURE__ */ jsxRuntime.jsx(
     Table$1,
     {
@@ -83753,7 +83770,7 @@ function Table({
       rowSelection,
       pagination: paginationConfig,
       scroll: scrollConfig,
-      onScroll: materializedView?.enabled ? handleScroll : void 0,
+      onScroll: isMaterializedView ? handleScroll : void 0,
       $isMainContentCell: isMainContentCell,
       ...rest
     }
@@ -83925,7 +83942,7 @@ const PrimaryTableControlsRow = ({
   const onSortChange = (value2) => {
     const sortActionEvent = {
       event: "primarySortChange",
-      payload: { value: value2 }
+      payload: { value: Array.isArray(value2) ? value2[0] : value2 }
     };
     onChange?.(sortActionEvent);
   };
@@ -84127,7 +84144,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
       ]
     }
   );
@@ -84173,14 +84190,22 @@ const TableWithControls = ({
   onChange
 }) => {
   const { primaryTableRowData, secondaryTableRowData } = tableControlsData2;
-  const { dataSource, columns, rowSelection, hasSettings, hasFilter } = tableData;
+  const {
+    dataSource,
+    columns,
+    rowSelection,
+    hasSettings,
+    hasFilter,
+    isMaterializedView,
+    materializedViewConfig
+  } = tableData;
   const onTableControlsChange = (event) => {
     onChange(event);
   };
   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: [
@@ -84193,12 +84218,14 @@ const TableWithControls = ({
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
-      TablePagination,
+      Table,
       {
         dataSource,
         columns,
         rowSelection,
-        onChange: onTableChange
+        onChange: onTableChange,
+        isMaterializedView,
+        materializedViewConfig
       }
     )
   ] });

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`;
@@ -83645,7 +83652,8 @@ function Table({
   rowSelection,
   pagination,
   isMainContentCell = false,
-  materializedView,
+  isMaterializedView = false,
+  materializedViewConfig,
   ...rest
 }) {
   const [materializedData, setMaterializedData] = React.useState([]);
@@ -83653,27 +83661,29 @@ function Table({
   const [hasMoreData, setHasMoreData] = React.useState(true);
   const tableRef = React.useRef(null);
   React.useEffect(() => {
-    if (materializedView?.enabled) {
-      const initialSize = materializedView.initialLoadSize || 50;
+    if (isMaterializedView) {
+      const initialSize = materializedViewConfig?.initialLoadSize || 50;
       const initialData = dataSource.slice(0, initialSize);
       setMaterializedData(initialData);
       setHasMoreData(dataSource.length > initialSize);
     }
-  }, [dataSource, materializedView]);
+  }, [dataSource, isMaterializedView, materializedViewConfig]);
   const handleScroll = React.useCallback(
     debounce((e3) => {
-      if (!materializedView?.enabled || !materializedView.onLoadMore || isLoadingMore || !hasMoreData) {
+      if (!isMaterializedView || !materializedViewConfig?.onLoadMore || isLoadingMore || !hasMoreData) {
         return;
       }
       const { target } = e3;
       const { scrollTop, scrollHeight, clientHeight } = target;
-      const threshold = materializedView.loadMoreThreshold || 100;
+      const threshold = materializedViewConfig?.loadMoreThreshold || 100;
       if (scrollTop + clientHeight >= scrollHeight - threshold) {
         setIsLoadingMore(true);
         const currentLength = materializedData.length;
-        const loadSize = materializedView.initialLoadSize || 50;
-        if (materializedView.onLoadMore) {
-          Promise.resolve(materializedView.onLoadMore(currentLength, loadSize)).then((newData) => {
+        const loadSize = materializedViewConfig?.initialLoadSize || 50;
+        if (materializedViewConfig?.onLoadMore) {
+          Promise.resolve(
+            materializedViewConfig.onLoadMore(currentLength, loadSize)
+          ).then((newData) => {
             setMaterializedData((prev2) => [...prev2, ...newData]);
             setHasMoreData(newData.length === loadSize);
           }).catch((error2) => {
@@ -83692,10 +83702,17 @@ function Table({
         }
       }
     }, 200),
-    [materializedView, materializedData, isLoadingMore, hasMoreData, dataSource]
+    [
+      isMaterializedView,
+      materializedViewConfig,
+      materializedData,
+      isLoadingMore,
+      hasMoreData,
+      dataSource
+    ]
   );
   const paginationConfig = React.useMemo(() => {
-    if (materializedView?.enabled) {
+    if (isMaterializedView) {
       return false;
     }
     return pagination === false ? false : {
@@ -83710,17 +83727,17 @@ function Table({
         }
       )
     };
-  }, [materializedView, pagination]);
+  }, [isMaterializedView, pagination]);
   const scrollConfig = React.useMemo(() => {
-    if (materializedView?.enabled) {
+    if (isMaterializedView) {
       return {
         ...rest.scroll,
-        y: materializedView.height || 400
+        y: materializedViewConfig?.height || 400
       };
     }
     return rest.scroll;
-  }, [materializedView, rest.scroll]);
-  const tableDataSource = materializedView?.enabled ? materializedData : dataSource;
+  }, [isMaterializedView, materializedViewConfig, rest.scroll]);
+  const tableDataSource = isMaterializedView ? materializedData : dataSource;
   return /* @__PURE__ */ jsx(
     Table$1,
     {
@@ -83735,7 +83752,7 @@ function Table({
       rowSelection,
       pagination: paginationConfig,
       scroll: scrollConfig,
-      onScroll: materializedView?.enabled ? handleScroll : void 0,
+      onScroll: isMaterializedView ? handleScroll : void 0,
       $isMainContentCell: isMainContentCell,
       ...rest
     }
@@ -83907,7 +83924,7 @@ const PrimaryTableControlsRow = ({
   const onSortChange = (value2) => {
     const sortActionEvent = {
       event: "primarySortChange",
-      payload: { value: value2 }
+      payload: { value: Array.isArray(value2) ? value2[0] : value2 }
     };
     onChange?.(sortActionEvent);
   };
@@ -84109,7 +84126,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
       ]
     }
   );
@@ -84155,14 +84172,22 @@ const TableWithControls = ({
   onChange
 }) => {
   const { primaryTableRowData, secondaryTableRowData } = tableControlsData2;
-  const { dataSource, columns, rowSelection, hasSettings, hasFilter } = tableData;
+  const {
+    dataSource,
+    columns,
+    rowSelection,
+    hasSettings,
+    hasFilter,
+    isMaterializedView,
+    materializedViewConfig
+  } = tableData;
   const onTableControlsChange = (event) => {
     onChange(event);
   };
   const onTableChange = (pagination, filters, sorter) => {
     onChange({
       event: "tableChange",
-      payload: { pagination, filters, sorter }
+      payload: { value: "tableChange", pagination, filters, sorter }
     });
   };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -84175,12 +84200,14 @@ const TableWithControls = ({
       }
     ),
     /* @__PURE__ */ jsx(
-      TablePagination,
+      Table,
       {
         dataSource,
         columns,
         rowSelection,
-        onChange: onTableChange
+        onChange: onTableChange,
+        isMaterializedView,
+        materializedViewConfig
       }
     )
   ] });

package/package.json

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