@gobolt/genesis 0.4.5 → 0.4.9

package/dist/index.js

@@ -60232,6 +60232,9 @@ function FaCircleCheck(props) {
 function HiClock(props) {
   return GenIcon({ "attr": { "viewBox": "0 0 20 20", "fill": "currentColor", "aria-hidden": "true" }, "child": [{ "tag": "path", "attr": { "fillRule": "evenodd", "d": "M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z", "clipRule": "evenodd" }, "child": [] }] })(props);
 }
+function HiDotsHorizontal(props) {
+  return GenIcon({ "attr": { "viewBox": "0 0 20 20", "fill": "currentColor", "aria-hidden": "true" }, "child": [{ "tag": "path", "attr": { "d": "M6 10a2 2 0 11-4 0 2 2 0 014 0zM12 10a2 2 0 11-4 0 2 2 0 014 0zM16 12a2 2 0 100-4 2 2 0 000 4z" }, "child": [] }] })(props);
+}
 function HiExclamationCircle(props) {
   return GenIcon({ "attr": { "viewBox": "0 0 20 20", "fill": "currentColor", "aria-hidden": "true" }, "child": [{ "tag": "path", "attr": { "fillRule": "evenodd", "d": "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z", "clipRule": "evenodd" }, "child": [] }] })(props);
 }
@@ -80497,10 +80500,13 @@ const OverflowMenuItem$1 = styled.div`
 const OverflowMenuItem = ({ children: children2, onClick }) => {
   return /* @__PURE__ */ jsx(OverflowMenuItem$1, { onClick, children: children2 });
 };
+const DefaultTrigger = () => {
+  return /* @__PURE__ */ jsx(Button$1, { isIconButton: true, themeType: "secondary", size: "small", children: /* @__PURE__ */ jsx(HiDotsHorizontal, {}) });
+};
 const OverflowMenu = ({
   items,
   children: children2,
-  trigger,
+  trigger = /* @__PURE__ */ jsx(DefaultTrigger, {}),
   isOpen: controlledIsOpen,
   onOpenChange,
   placement = "bottom",
@@ -80774,15 +80780,12 @@ 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;
+  if (firstBarData?.value !== void 0 && secondBarData?.value !== void 0) {
+    const total = firstBarData.value + secondBarData.value;
     const dividedBy = total / 2;
-    return dividedBy;
+    return Math.round(dividedBy);
   }
-  return 0;
+  return firstBarData?.value || 0;
 };
 const Progress = ({
   firstBarData,
@@ -80801,6 +80804,7 @@ const Progress = ({
     strokeColor: theme?.colors?.inputs?.progress?.[secondBarData.status]
   } : null;
   const stateColor = strokeColor;
+  const percentDisplayWidth = 110;
   const gap = 8;
   if (isSingleBarOverallSuccess && secondBarData !== null) {
     const overallPercent = secondBarData.value;
@@ -80816,30 +80820,79 @@ const Progress = ({
           showInfo: false
         }
       ),
-      /* @__PURE__ */ jsx("div", { style: { display: "flex", alignItems: "center", width: 80 }, children: /* @__PURE__ */ jsxs(Typography, { color: textColor, variant: "digits3", children: [
-        overallPercent,
-        "%"
-      ] }) })
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            display: "flex",
+            alignItems: "center",
+            width: percentDisplayWidth
+          },
+          children: /* @__PURE__ */ jsxs(Typography, { color: textColor, variant: "digits3", children: [
+            overallPercent,
+            "%"
+          ] })
+        }
+      )
     ] });
   }
   if (isProgressCombined) {
     const combinedPercent = getCombinedPercent(firstBarData, secondBarData);
     const textColor = Number(combinedPercent) === 100 ? "green" : "black";
+    const adjustedFirstBar = secondBarData?.value === 100 ? 100 : firstBarData?.value || 0;
+    const firstBarStrokeColor = theme?.colors?.inputs?.progress?.[firstBarData?.status || "info"];
+    const secondBarStrokeColor = secondBarData?.value && secondBarData.value > 0 ? theme?.colors?.inputs?.progress?.[secondBarData.status] : null;
+    secondBarData?.value && secondBarData.value > 0 ? {
+      percent: secondBarData.value
+    } : null;
     return /* @__PURE__ */ jsxs(Tile, { style: { width, height, alignItems: "center", gap }, isHorizontal: true, children: [
+      /* @__PURE__ */ jsxs("div", { style: { position: "relative", width: "100%" }, children: [
+        /* @__PURE__ */ jsx(
+          Progress$1,
+          {
+            "data-testid": "progress",
+            percent: adjustedFirstBar,
+            strokeColor: firstBarStrokeColor,
+            showInfo: false
+          }
+        ),
+        secondBarData?.value && secondBarData.value > 0 ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              top: 0,
+              left: 0,
+              width: "100%",
+              height: "100%",
+              pointerEvents: "none"
+            },
+            children: /* @__PURE__ */ jsx(
+              Progress$1,
+              {
+                percent: secondBarData.value,
+                strokeColor: secondBarStrokeColor,
+                showInfo: false,
+                style: { background: "transparent" }
+              }
+            )
+          }
+        ) : null
+      ] }),
       /* @__PURE__ */ jsx(
-        Progress$1,
+        "div",
         {
-          "data-testid": "progress",
-          percent,
-          success,
-          strokeColor,
-          showInfo: false
+          style: {
+            display: "flex",
+            alignItems: "center",
+            width: percentDisplayWidth
+          },
+          children: /* @__PURE__ */ jsxs(Typography, { color: textColor, variant: "digits3", children: [
+            combinedPercent,
+            "%"
+          ] })
         }
-      ),
-      /* @__PURE__ */ jsx("div", { style: { display: "flex", alignItems: "center", width: 80 }, children: /* @__PURE__ */ jsxs(Typography, { color: textColor, variant: "digits3", children: [
-        combinedPercent,
-        "%"
-      ] }) })
+      )
     ] });
   }
   if (isTextBeforeBar) {
@@ -83904,6 +83957,7 @@ function Table({
   size = "small",
   onChange,
   rowSelection,
+  onRowClick,
   pagination,
   isMainContentCell = false,
   isMaterializedView = false,
@@ -83916,6 +83970,7 @@ function Table({
   const [dynamicHeight, setDynamicHeight] = React.useState(
     400
   );
+  const [selectedRowKeys, setSelectedRowKeys] = React.useState([]);
   const tableRef = React.useRef(null);
   const containerRef = React.useRef(null);
   React.useEffect(() => {
@@ -84018,6 +84073,61 @@ function Table({
     return rest.scroll;
   }, [isMaterializedView, materializedViewConfig, dynamicHeight, rest.scroll]);
   const tableDataSource = isMaterializedView ? materializedData : dataSource;
+  const handleRowClick = React.useCallback(
+    (record, index2, event) => {
+      console.log("Row clicked:", record, "index:", index2);
+      const target = event.target;
+      const isInteractiveElement = target.closest(
+        'button, a, input, select, textarea, [role="button"], [onclick]'
+      );
+      console.log("Is interactive element:", isInteractiveElement);
+      if (isInteractiveElement) {
+        console.log("Skipping row selection due to interactive element");
+        return;
+      }
+      if (!rowSelection || !rowSelection.onChange) {
+        console.log("No row selection or onChange handler");
+        return;
+      }
+      if (rowSelection.getCheckboxProps) {
+        const checkboxProps = rowSelection.getCheckboxProps(record);
+        if (checkboxProps.disabled) {
+          console.log("Row is disabled for selection:", record);
+          return;
+        }
+      }
+      const currentSelectedKeys = selectedRowKeys;
+      const recordKey = typeof rowKey === "function" ? rowKey(record) : record[rowKey];
+      console.log("Current selected keys:", currentSelectedKeys);
+      console.log("Record key:", recordKey);
+      const newSelectedKeys = currentSelectedKeys.includes(recordKey) ? currentSelectedKeys.filter((key) => key !== recordKey) : [...currentSelectedKeys, recordKey];
+      console.log("New selected keys:", newSelectedKeys);
+      setSelectedRowKeys(newSelectedKeys);
+      const selectedRows = tableDataSource.filter((record2) => {
+        const key = typeof rowKey === "function" ? rowKey(record2) : record2[rowKey];
+        return newSelectedKeys.includes(key);
+      });
+      console.log("Selected rows:", selectedRows);
+      rowSelection.onChange(newSelectedKeys, selectedRows);
+    },
+    [rowSelection, rowKey, tableDataSource, selectedRowKeys]
+  );
+  const enhancedRowSelection = React.useMemo(() => {
+    if (!rowSelection) return;
+    return {
+      ...rowSelection,
+      selectedRowKeys,
+      // Use internal state
+      // Override the onChange to ensure we get the latest data
+      onChange: (selectedRowKeys2, selectedRows) => {
+        console.log("Row selection changed:", selectedRowKeys2, selectedRows);
+        setSelectedRowKeys(selectedRowKeys2);
+        if (rowSelection.onChange) {
+          rowSelection.onChange(selectedRowKeys2, selectedRows);
+        }
+      }
+    };
+  }, [rowSelection, selectedRowKeys]);
   return /* @__PURE__ */ jsx("div", { ref: containerRef, children: /* @__PURE__ */ jsx(
     Table$1,
     {
@@ -84029,7 +84139,17 @@ function Table({
       locale: { emptyText: "No Data" },
       size,
       onChange,
-      rowSelection,
+      rowSelection: enhancedRowSelection,
+      onRow: (record, index2) => {
+        const isDisabled = rowSelection?.getCheckboxProps?.(record)?.disabled ?? false;
+        return {
+          onClick: (event) => handleRowClick(record, index2 ?? 0, event),
+          style: {
+            cursor: rowSelection && !isDisabled ? "pointer" : "default",
+            opacity: isDisabled ? 0.6 : 1
+          }
+        };
+      },
       pagination: paginationConfig,
       scroll: scrollConfig,
       onScroll: isMaterializedView ? handleScroll : void 0,
@@ -84090,6 +84210,9 @@ const defaultRowSelection = (record) => ({
 });
 const useTable = (useTableConfig) => {
   const [isLoading, setLoading] = useState(true);
+  const [hasErrored, setHasErrored] = useState(false);
+  const hasFetchedRef = useRef(false);
+  const isDisabledRef = useRef(false);
   const {
     columns,
     filters = null,
@@ -84116,14 +84239,39 @@ const useTable = (useTableConfig) => {
     error: null
   });
   const [selectedRows, setSelectedRows] = useState([]);
+  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
+  const memoizedFetchOptions = useMemo$1(
+    () => fetchOptions,
+    [fetchOptions.method, fetchOptions.headers, fetchOptions.body]
+  );
   useEffect(() => {
-    if (disableAutoFetch && initialDataSource.length > 0) {
+    if (disableAutoFetch) {
+      isDisabledRef.current = true;
+      setLoading(false);
+      return;
+    }
+    if (hasFetchedRef.current || hasErrored || isDisabledRef.current) {
       setLoading(false);
       return;
     }
     const fetchData = async () => {
       try {
-        const response = await fetch(fetchUrl, fetchOptions);
+        hasFetchedRef.current = true;
+        const response = await fetch(fetchUrl, memoizedFetchOptions);
+        if (response.status === 404) {
+          console.warn(`Table data not found at ${fetchUrl}, stopping retries`);
+          setHasErrored(true);
+          setData({
+            dataSource: initialDataSource,
+            columns,
+            error: new Error(`Data not found at ${fetchUrl}`)
+          });
+          setLoading(false);
+          return;
+        }
+        if (!response.ok) {
+          throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+        }
         const result = await response.json();
         const sourceData = result.data || [];
         setOriginalData(sourceData);
@@ -84132,10 +84280,12 @@ const useTable = (useTableConfig) => {
           columns,
           error: null
         });
+        setHasErrored(false);
       } catch (error2) {
         console.error("Error fetching table data:", error2);
+        setHasErrored(true);
         setData({
-          dataSource: [],
+          dataSource: initialDataSource,
           columns,
           error: error2 instanceof Error ? error2 : new Error(String(error2))
         });
@@ -84148,11 +84298,19 @@ const useTable = (useTableConfig) => {
     } else {
       fetchData();
     }
-  }, [fetchOptions, disableAutoFetch, initialDataSource]);
+  }, [
+    memoizedFetchOptions,
+    disableAutoFetch,
+    hasErrored,
+    fetchUrl,
+    columns,
+    initialDataSource
+  ]);
   const handleRowSelection = useCallback(
-    (selectedRowKeys, selectedRows2) => {
-      console.log("Row Selected:", selectedRowKeys, selectedRows2);
-      setSelectedRows(selectedRows2);
+    (newSelectedRowKeys, newSelectedRows) => {
+      console.log("Row Selected:", newSelectedRowKeys, newSelectedRows);
+      setSelectedRowKeys(newSelectedRowKeys);
+      setSelectedRows(newSelectedRows);
     },
     []
   );
@@ -84163,19 +84321,29 @@ const useTable = (useTableConfig) => {
       dataSource: newDataSource
     }));
   }, []);
+  const retry = useCallback(() => {
+    setHasErrored(false);
+    hasFetchedRef.current = false;
+    isDisabledRef.current = false;
+    setLoading(true);
+  }, []);
   const rowSelection = {
     type: selectionType,
+    selectedRowKeys,
     onChange: handleRowSelection,
     getCheckboxProps: disableRowSelection
   };
   return {
     ...data,
     isLoading,
+    hasErrored,
     rowSelection,
     selectedRows,
+    selectedRowKeys,
     hasSettings,
     hasFilter,
-    updateDataSource
+    updateDataSource,
+    retry
   };
 };
 function HiMiniAdjustmentsVertical(props) {
@@ -84449,7 +84617,8 @@ const TableControls = ({
 const TableWithControls = ({
   tableData,
   tableControlsData: tableControlsData2,
-  onChange
+  onChange,
+  onRowClick
 }) => {
   const { primaryTableRowData, secondaryTableRowData } = tableControlsData2;
   const {
@@ -84486,6 +84655,7 @@ const TableWithControls = ({
         columns,
         rowSelection,
         onChange: onTableChange,
+        onRowClick,
         isMaterializedView,
         materializedViewConfig
       }
@@ -84549,6 +84719,50 @@ const mockColumns = [
         state: colorStateMap[jobSubtype]
       });
     }
+  },
+  {
+    title: "Progress",
+    dataIndex: "progress",
+    render: (progress) => {
+      if (!progress) return null;
+      return React__default.createElement(Progress, {
+        firstBarData: progress.firstBarData,
+        secondBarData: progress.secondBarData,
+        width: 150,
+        height: 20,
+        isProgressCombined: true
+      });
+    }
+  },
+  {
+    title: "Actions",
+    key: "actions",
+    render: (record) => {
+      const menuItems = [
+        {
+          id: "edit",
+          children: "Edit",
+          onClick: () => {
+            console.log("Edit clicked for record:", record.id);
+          }
+        },
+        {
+          id: "delete",
+          children: "Delete",
+          onClick: () => {
+            console.log("Delete clicked for record:", record.id);
+          }
+        }
+      ];
+      return React__default.createElement(OverflowMenu, {
+        items: menuItems,
+        onItemClick: (item) => {
+          if (item.onClick) {
+            item.onClick();
+          }
+        }
+      });
+    }
   }
 ];
 mockColumns.map((column2) => ({
@@ -84565,7 +84779,19 @@ const mockDataSource = {
         nickname: "Home",
         address: "123 Main St"
       },
-      job_subtype: "delivery"
+      job_subtype: "delivery",
+      progress: {
+        firstBarData: {
+          text: "Loading",
+          status: "info",
+          value: 100
+        },
+        secondBarData: {
+          text: "Processing",
+          status: "success",
+          value: 25
+        }
+      }
     },
     {
       id: "2",
@@ -84576,7 +84802,19 @@ const mockDataSource = {
         nickname: "Work",
         address: "456 Elm St"
       },
-      job_subtype: "pickup"
+      job_subtype: "pickup",
+      progress: {
+        firstBarData: {
+          text: "Preparing",
+          status: "info",
+          value: 100
+        },
+        secondBarData: {
+          text: "Final Check",
+          status: "success",
+          value: 0
+        }
+      }
     },
     {
       id: "3",
@@ -84587,7 +84825,19 @@ const mockDataSource = {
         nickname: "Store",
         address: "789 Oak St"
       },
-      job_subtype: "delivery"
+      job_subtype: "delivery",
+      progress: {
+        firstBarData: {
+          text: "Pending",
+          status: "info",
+          value: 0
+        },
+        secondBarData: {
+          text: "Awaiting",
+          status: "success",
+          value: 0
+        }
+      }
     },
     {
       id: "4",
@@ -84598,7 +84848,19 @@ const mockDataSource = {
         nickname: "Office",
         address: "321 Pine St"
       },
-      job_subtype: "pickup"
+      job_subtype: "pickup",
+      progress: {
+        firstBarData: {
+          text: "In Progress",
+          status: "info",
+          value: 100
+        },
+        secondBarData: {
+          text: "Validation",
+          status: "success",
+          value: 30
+        }
+      }
     },
     {
       id: "5",
@@ -84609,7 +84871,19 @@ const mockDataSource = {
         nickname: "Library",
         address: "555 Book Lane"
       },
-      job_subtype: "delivery"
+      job_subtype: "delivery",
+      progress: {
+        firstBarData: {
+          text: "Completed",
+          status: "info",
+          value: 100
+        },
+        secondBarData: {
+          text: "Verified",
+          status: "success",
+          value: 100
+        }
+      }
     },
     {
       id: "6",
@@ -84620,7 +84894,19 @@ const mockDataSource = {
         nickname: "Gym",
         address: "777 Fitness Ave"
       },
-      job_subtype: "pickup"
+      job_subtype: "pickup",
+      progress: {
+        firstBarData: {
+          text: "Phase 1",
+          status: "info",
+          value: 75
+        },
+        secondBarData: {
+          text: "Phase 2",
+          status: "success",
+          value: 50
+        }
+      }
     },
     {
       id: "7",
@@ -84631,7 +84917,19 @@ const mockDataSource = {
         nickname: "Mall",
         address: "888 Shopping Center"
       },
-      job_subtype: "delivery"
+      job_subtype: "delivery",
+      progress: {
+        firstBarData: {
+          text: "Queued",
+          status: "info",
+          value: 0
+        },
+        secondBarData: {
+          text: "Waiting",
+          status: "success",
+          value: 0
+        }
+      }
     },
     {
       id: "8",
@@ -84642,7 +84940,19 @@ const mockDataSource = {
         nickname: "School",
         address: "999 Education Rd"
       },
-      job_subtype: "pickup"
+      job_subtype: "pickup",
+      progress: {
+        firstBarData: {
+          text: "Delivered",
+          status: "info",
+          value: 100
+        },
+        secondBarData: {
+          text: "Confirmed",
+          status: "success",
+          value: 100
+        }
+      }
     },
     {
       id: "9",
@@ -84653,7 +84963,19 @@ const mockDataSource = {
         nickname: "Restaurant",
         address: "111 Food Court"
       },
-      job_subtype: "delivery"
+      job_subtype: "delivery",
+      progress: {
+        firstBarData: {
+          text: "Preparing",
+          status: "info",
+          value: 100
+        },
+        secondBarData: {
+          text: "Quality Check",
+          status: "success",
+          value: 15
+        }
+      }
     },
     {
       id: "10",
@@ -84664,7 +84986,19 @@ const mockDataSource = {
         nickname: "Park",
         address: "222 Green Ave"
       },
-      job_subtype: "pickup"
+      job_subtype: "pickup",
+      progress: {
+        firstBarData: {
+          text: "Processing",
+          status: "info",
+          value: 80
+        },
+        secondBarData: {
+          text: "Review",
+          status: "success",
+          value: 0
+        }
+      }
     },
     {
       id: "11",
@@ -84838,9 +85172,10 @@ const startingUseTableConfig = {
   dataSource: []
 };
 const useTableWithControls = (tableConfig) => {
-  const [useTableConfig, setUseTableConfig] = useState(
-    startingUseTableConfig
-  );
+  const [useTableConfig, setUseTableConfig] = useState(() => ({
+    ...startingUseTableConfig,
+    ...tableConfig
+  }));
   const [groups, setGroups] = useState(
     tableControlsData.secondaryTableRowData.groups
   );
@@ -84851,20 +85186,22 @@ const useTableWithControls = (tableConfig) => {
   });
   const { secondaryTableRowData } = tableControlsData;
   const {
-    dataSource,
+    dataSource: hookDataSource,
     columns,
     rowSelection,
+    selectedRows,
+    selectedRowKeys,
     hasSettings,
     hasFilter,
     updateDataSource
   } = useTable(useTableConfig);
+  const dataSource = tableConfig.dataSource || hookDataSource;
   const safeDataSource = dataSource || [];
   const newSecondaryTableRowData = {
     ...secondaryTableRowData,
     groups,
     totalRecords: safeDataSource.length
   };
-  if (!dataSource) return null;
   const onGroupItemClick = (title, item) => {
     const newGroups = { ...groups };
     newGroups[title] = newGroups[title].filter((group) => group !== item);
@@ -84954,6 +85291,8 @@ const useTableWithControls = (tableConfig) => {
     dataSource: safeDataSource,
     columns,
     rowSelection,
+    selectedRows,
+    selectedRowKeys,
     updateDataSource
   };
 };

package/package.json

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