@gobolt/genesis 0.3.28 → 0.4.1

package/dist/index.js

@@ -38552,7 +38552,7 @@ function throttle(delay, callback, options) {
   wrapper.cancel = cancel;
   return wrapper;
 }
-function debounce(delay, callback, options) {
+function debounce$2(delay, callback, options) {
   var _ref = {}, _ref$atBegin = _ref.atBegin, atBegin = _ref$atBegin === void 0 ? false : _ref$atBegin;
   return throttle(delay, callback, {
     debounceMode: atBegin !== false
@@ -46033,7 +46033,7 @@ const Spin = (props) => {
   const mergedPercent = usePercent(spinning, percent);
   React.useEffect(() => {
     if (customSpinning) {
-      const showSpinning = debounce(delay, () => {
+      const showSpinning = debounce$2(delay, () => {
         setSpinning(true);
       });
       showSpinning();
@@ -82010,6 +82010,34 @@ const Progress$1 = styled(Progress$2)`
   return getGenesisClass$5(theme, state);
 }}
 `;
+const getGenesisClass$4 = ({ sizing: sizing2 }, $isHorizontal = false) => `
+    display: flex;
+    flex-direction: ${$isHorizontal ? "row" : "column"};
+    padding: ${sizing2.Size4};
+ `;
+const Tile$1 = styled.div`
+  ${({ theme, $isHorizontal }) => {
+  return getGenesisClass$4(theme, $isHorizontal);
+}}
+`;
+const Tile = ({
+  children: children2,
+  dataTestId,
+  className,
+  style: style2,
+  isHorizontal = false
+}) => {
+  return /* @__PURE__ */ jsx(
+    Tile$1,
+    {
+      className,
+      "data-testid": dataTestId,
+      style: style2,
+      $isHorizontal: isHorizontal,
+      children: children2
+    }
+  );
+};
 const ProgressText = ({
   firstBarData,
   secondBarData,
@@ -82081,22 +82109,52 @@ const getTextComponent = (firstBarData, secondBarData, stateColor, theme, isText
     }
   );
 };
+const getCombinedPercent = (firstBarData, secondBarData) => {
+  if (firstBarData?.value && secondBarData?.value) {
+    const total = firstBarData?.value + secondBarData?.value;
+    const dividedBy = total / 2;
+    return dividedBy;
+  }
+  return 0;
+};
 const Progress = ({
   firstBarData,
   secondBarData = null,
   width = 200,
   height = 24,
-  isTextBeforeBar = false
+  isTextBeforeBar = false,
+  isProgressCombined = false
 }) => {
   const theme = useTheme$1();
-  const percent = firstBarData.value || 0;
-  const strokeColor = theme.colors.inputs.progress[firstBarData.status];
+  const percent = firstBarData?.value || 0;
+  const strokeColor = theme?.colors?.inputs.progress[firstBarData?.status];
   const success = secondBarData ? {
     percent: secondBarData.value,
-    strokeColor: theme.colors.inputs.progress[secondBarData.status]
+    strokeColor: theme?.colors?.inputs.progress[secondBarData.status]
   } : null;
   const stateColor = strokeColor;
   const gap = 8;
+  if (isProgressCombined) {
+    const combinedPercent = getCombinedPercent(firstBarData, secondBarData);
+    const textColor = Number(combinedPercent) === 100 ? "green" : "black";
+    console.log({ combinedPercent, firstBarData, secondBarData });
+    return /* @__PURE__ */ jsxs(Tile, { style: { width, height, alignItems: "center", gap }, isHorizontal: true, children: [
+      /* @__PURE__ */ jsx(
+        Progress$1,
+        {
+          "data-testid": "progress",
+          percent,
+          success,
+          strokeColor,
+          showInfo: false
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { style: { display: "flex", alignItems: "center", width: 80 }, children: /* @__PURE__ */ jsxs(Typography, { color: textColor, variant: "digits3", children: [
+        combinedPercent,
+        "%"
+      ] }) })
+    ] });
+  }
   if (isTextBeforeBar) {
     return /* @__PURE__ */ jsxs(Tile, { style: { width, height, alignItems: "center", gap }, isHorizontal: true, children: [
       getTextComponent(
@@ -82556,7 +82614,7 @@ const Row = ({
     }
   );
 };
-const getGenesisClass$4 = ({ colors: colors2, borderRadius: borderRadius2, sizing: sizing2, typography: typography2 }, type4 = "primary", state = "active") => `
+const getGenesisClass$3 = ({ colors: colors2, borderRadius: borderRadius2, sizing: sizing2, typography: typography2 }, type4 = "primary", state = "active") => `
   &.ant-segmented {
     border-radius: ${borderRadius2.BorderRadiusMd};
     color: ${colors2.onsurface.copy};
@@ -82593,7 +82651,7 @@ const getGenesisClass$4 = ({ colors: colors2, borderRadius: borderRadius2, sizin
 const SegmentedControls$1 = styled(
   Segmented
 )`
-  ${({ theme, type: type4 = "primary", state = "active" }) => getGenesisClass$4(theme, type4, state)}
+  ${({ theme, type: type4 = "primary", state = "active" }) => getGenesisClass$3(theme, type4, state)}
 `;
 const SegmentedControls = ({
   options,
@@ -83009,7 +83067,7 @@ const Shapes = ({ variant = "triangle", fill }) => {
   }
   return /* @__PURE__ */ jsx(Triangle, { fill, dataTestId: "shape-triangle" });
 };
-const getGenesisClass$3 = ({ colors: colors2, borderRadius: borderRadius2 }) => `
+const getGenesisClass$2 = ({ colors: colors2, borderRadius: borderRadius2 }) => `
   &.ant-switch {
     background-color: ${colors2.primary.active};
     border-radius: ${borderRadius2?.BorderRadiusMd};
@@ -83066,7 +83124,7 @@ const getGenesisClass$3 = ({ colors: colors2, borderRadius: borderRadius2 }) =>
   }
 `;
 const Switch$1 = styled(Switch$2)`
-  ${({ theme }) => getGenesisClass$3(theme)}
+  ${({ theme }) => getGenesisClass$2(theme)}
 `;
 const Switch = ({
   state,
@@ -83087,7 +83145,7 @@ const Switch = ({
     }
   );
 };
-const getGenesisClass$2 = ({ colors: colors2, borderRadius: borderRadius2, sizing: sizing2, typography: typography2, components: components2 }, $isMainContentCell) => {
+const getGenesisClass$1 = ({ colors: colors2, borderRadius: borderRadius2, sizing: sizing2, typography: typography2, components: components2 }, $isMainContentCell) => {
   return `
     &.ant-table-wrapper {
       // Add your custom styles here
@@ -83141,7 +83199,7 @@ const getGenesisClass$2 = ({ colors: colors2, borderRadius: borderRadius2, sizin
 };
 const Table$1 = styled(ForwardTable)`
   ${({ theme, $isMainContentCell }) => {
-  return getGenesisClass$2(theme, $isMainContentCell);
+  return getGenesisClass$1(theme, $isMainContentCell);
 }}
 `;
 const NumberButton = styled.button`
@@ -83495,6 +83553,89 @@ const CustomPagination = ({
   }
   return null;
 };
+var debounce$1 = { exports: {} };
+var hasRequiredDebounce;
+function requireDebounce() {
+  if (hasRequiredDebounce) return debounce$1.exports;
+  hasRequiredDebounce = 1;
+  function debounce2(function_, wait = 100, options = {}) {
+    if (typeof function_ !== "function") {
+      throw new TypeError(`Expected the first parameter to be a function, got \`${typeof function_}\`.`);
+    }
+    if (wait < 0) {
+      throw new RangeError("`wait` must not be negative.");
+    }
+    const { immediate } = typeof options === "boolean" ? { immediate: options } : options;
+    let storedContext;
+    let storedArguments;
+    let timeoutId;
+    let timestamp;
+    let result;
+    function run() {
+      const callContext = storedContext;
+      const callArguments = storedArguments;
+      storedContext = void 0;
+      storedArguments = void 0;
+      result = function_.apply(callContext, callArguments);
+      return result;
+    }
+    function later() {
+      const last = Date.now() - timestamp;
+      if (last < wait && last >= 0) {
+        timeoutId = setTimeout(later, wait - last);
+      } else {
+        timeoutId = void 0;
+        if (!immediate) {
+          result = run();
+        }
+      }
+    }
+    const debounced = function(...arguments_) {
+      if (storedContext && this !== storedContext && Object.getPrototypeOf(this) === Object.getPrototypeOf(storedContext)) {
+        throw new Error("Debounced method called with different contexts of the same prototype.");
+      }
+      storedContext = this;
+      storedArguments = arguments_;
+      timestamp = Date.now();
+      const callNow = immediate && !timeoutId;
+      if (!timeoutId) {
+        timeoutId = setTimeout(later, wait);
+      }
+      if (callNow) {
+        result = run();
+      }
+      return result;
+    };
+    Object.defineProperty(debounced, "isPending", {
+      get() {
+        return timeoutId !== void 0;
+      }
+    });
+    debounced.clear = () => {
+      if (!timeoutId) {
+        return;
+      }
+      clearTimeout(timeoutId);
+      timeoutId = void 0;
+    };
+    debounced.flush = () => {
+      if (!timeoutId) {
+        return;
+      }
+      debounced.trigger();
+    };
+    debounced.trigger = () => {
+      result = run();
+      debounced.clear();
+    };
+    return debounced;
+  }
+  debounce$1.exports.debounce = debounce2;
+  debounce$1.exports = debounce2;
+  return debounce$1.exports;
+}
+var debounceExports = /* @__PURE__ */ requireDebounce();
+const debounce = /* @__PURE__ */ getDefaultExportFromCjs(debounceExports);
 function Table({
   columns,
   dataSource,
@@ -83504,25 +83645,98 @@ function Table({
   rowSelection,
   pagination,
   isMainContentCell = false,
+  isMaterializedView = false,
+  materializedViewConfig,
   ...rest
 }) {
-  const paginationConfig = pagination === false ? false : {
-    ...pagination,
-    itemRender: void 0,
-    // Clear any existing itemRender to avoid conflicts
-    render: (properties) => /* @__PURE__ */ jsx(
-      CustomPagination,
-      {
-        ...properties,
-        paginationStyle: pagination?.paginationStyle || PaginationStyle.SIMPLE
+  const [materializedData, setMaterializedData] = React.useState([]);
+  const [isLoadingMore, setIsLoadingMore] = React.useState(false);
+  const [hasMoreData, setHasMoreData] = React.useState(true);
+  const tableRef = React.useRef(null);
+  React.useEffect(() => {
+    if (isMaterializedView) {
+      const initialSize = materializedViewConfig?.initialLoadSize || 50;
+      const initialData = dataSource.slice(0, initialSize);
+      setMaterializedData(initialData);
+      setHasMoreData(dataSource.length > initialSize);
+    }
+  }, [dataSource, isMaterializedView, materializedViewConfig]);
+  const handleScroll = React.useCallback(
+    debounce((e3) => {
+      if (!isMaterializedView || !materializedViewConfig?.onLoadMore || isLoadingMore || !hasMoreData) {
+        return;
       }
-    )
-  };
+      const { target } = e3;
+      const { scrollTop, scrollHeight, clientHeight } = target;
+      const threshold = materializedViewConfig?.loadMoreThreshold || 100;
+      if (scrollTop + clientHeight >= scrollHeight - threshold) {
+        setIsLoadingMore(true);
+        const currentLength = materializedData.length;
+        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) => {
+            console.error("Error loading more data:", error2);
+          }).finally(() => {
+            setIsLoadingMore(false);
+          });
+        } else {
+          const newData = dataSource.slice(
+            currentLength,
+            currentLength + loadSize
+          );
+          setMaterializedData((prev2) => [...prev2, ...newData]);
+          setHasMoreData(newData.length === loadSize);
+          setIsLoadingMore(false);
+        }
+      }
+    }, 200),
+    [
+      isMaterializedView,
+      materializedViewConfig,
+      materializedData,
+      isLoadingMore,
+      hasMoreData,
+      dataSource
+    ]
+  );
+  const paginationConfig = React.useMemo(() => {
+    if (isMaterializedView) {
+      return false;
+    }
+    return pagination === false ? false : {
+      ...pagination,
+      itemRender: void 0,
+      // Clear any existing itemRender to avoid conflicts
+      render: (properties) => /* @__PURE__ */ jsx(
+        CustomPagination,
+        {
+          ...properties,
+          paginationStyle: pagination?.paginationStyle || PaginationStyle.SIMPLE
+        }
+      )
+    };
+  }, [isMaterializedView, pagination]);
+  const scrollConfig = React.useMemo(() => {
+    if (isMaterializedView) {
+      return {
+        ...rest.scroll,
+        y: materializedViewConfig?.height || 400
+      };
+    }
+    return rest.scroll;
+  }, [isMaterializedView, materializedViewConfig, rest.scroll]);
+  const tableDataSource = isMaterializedView ? materializedData : dataSource;
   return /* @__PURE__ */ jsx(
     Table$1,
     {
+      ref: tableRef,
       "data-testid": "Table",
-      dataSource,
+      dataSource: tableDataSource,
       columns,
       rowKey,
       locale: { emptyText: "No Data" },
@@ -83530,6 +83744,8 @@ function Table({
       onChange,
       rowSelection,
       pagination: paginationConfig,
+      scroll: scrollConfig,
+      onScroll: isMaterializedView ? handleScroll : void 0,
       $isMainContentCell: isMainContentCell,
       ...rest
     }
@@ -83949,7 +84165,15 @@ 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);
   };
@@ -83969,12 +84193,14 @@ const TableWithControls = ({
       }
     ),
     /* @__PURE__ */ jsx(
-      TablePagination,
+      Table,
       {
         dataSource,
         columns,
         rowSelection,
-        onChange: onTableChange
+        onChange: onTableChange,
+        isMaterializedView,
+        materializedViewConfig
       }
     )
   ] });
@@ -84444,7 +84670,7 @@ const useTableWithControls = (tableConfig) => {
     updateDataSource
   };
 };
-const getGenesisClass$1 = ({ colors: colors2, borderRadius: borderRadius2, sizing: sizing2 }, type4 = "primary", state = "active") => `
+const getGenesisClass = ({ colors: colors2, borderRadius: borderRadius2, sizing: sizing2 }, type4 = "primary", state = "active") => `
   &.ant-tabs {
     background: #F4F4F4;
 
@@ -84540,7 +84766,7 @@ const getGenesisClass$1 = ({ colors: colors2, borderRadius: borderRadius2, sizin
 `;
 const Tabs$1 = styled(Tabs$2)`
   ${({ theme, type: type4, state }) => {
-  return getGenesisClass$1(theme, type4, state);
+  return getGenesisClass(theme, type4, state);
 }}
 `;
 const Tabs = ({ items, onChange, selectedId }) => {
@@ -84560,34 +84786,6 @@ const Tabs = ({ items, onChange, selectedId }) => {
     }
   );
 };
-const getGenesisClass = ({ sizing: sizing2 }, $isHorizontal = false) => `
-    display: flex;
-    flex-direction: ${$isHorizontal ? "row" : "column"};
-    padding: ${sizing2.Size4};
- `;
-const Tile$1 = styled.div`
-  ${({ theme, $isHorizontal }) => {
-  return getGenesisClass(theme, $isHorizontal);
-}}
-`;
-const Tile = ({
-  children: children2,
-  dataTestId,
-  className,
-  style: style2,
-  isHorizontal = false
-}) => {
-  return /* @__PURE__ */ jsx(
-    Tile$1,
-    {
-      className,
-      "data-testid": dataTestId,
-      style: style2,
-      $isHorizontal: isHorizontal,
-      children: children2
-    }
-  );
-};
 const ToastRow = styled.div`
   display: flex;
   align-items: center;

package/dist/styles/global-styles.d.ts

@@ -1 +1 @@
-export declare const GlobalStyles: any;
+export declare const GlobalStyles: import('react').NamedExoticComponent<import('styled-components').ExecutionProps & object>;

package/dist/utils/styled.d.ts

@@ -0,0 +1 @@
+export { default, createGlobalStyle, useTheme, ThemeProvider, css, } from 'styled-components';

package/package.json

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