@digital-ai/dot-components 4.6.0 → 4.8.0

package/index.esm.js

@@ -8561,14 +8561,26 @@ const defaultColumns = {
   xl: 12,
   xxl: 12
 };
+// Ensures that the children returned is a list of children
+const ensureChildrenList = children => {
+  if (children instanceof Array) {
+    return children;
+  }
+  return [children];
+};
 const Grid = ({
   className,
-  children
+  children,
+  isLoading
 }) => {
   const rootClasses = useStylesWithRootClass(rootClassName$I, className);
-  return jsx("div", {
+  return jsxs("div", {
     className: rootClasses,
-    children: children
+    children: [children, isLoading && jsx(DotProgress, {
+      className: "loading-more-data",
+      color: "inherit",
+      size: 20
+    })]
   });
 };
 const StyledGrid = styled(Grid)`
@@ -8592,10 +8604,75 @@ const StyledGrid = styled(Grid)`
       ${gap && `grid-gap: ${gap};`}
       ${width && `width: ${width};`}
       ${height && `height: ${height};`}
+      .loading-more-data {
+        margin: auto;
+      }
   `}
 `;
-const CssGrid = props => {
-  return jsx(StyledGrid, Object.assign({}, props));
+const CssGrid = _a => {
+  var {
+      children,
+      loadMoreData,
+      onError
+    } = _a,
+    gridArgs = __rest(_a, ["children", "loadMoreData", "onError"]);
+  const [page, setPage] = useState(0);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isDone, setIsDone] = useState(false);
+  const [gridItems, setGridItems] = useState(ensureChildrenList(children));
+  const [lastElement, setLastElement] = useState(null);
+  useEffect(() => {
+    setGridItems(ensureChildrenList(children));
+  }, [children]);
+  const fetchData = useCallback(nextPage => __awaiter(void 0, void 0, void 0, function* () {
+    setIsLoading(true);
+    try {
+      const newItems = yield loadMoreData(nextPage);
+      if (newItems && newItems.length > 0) {
+        setGridItems(prevItems => [...prevItems, ...newItems]);
+      } else {
+        setIsDone(true);
+      }
+    } catch (error) {
+      if (onError) {
+        onError(error);
+      }
+    } finally {
+      setIsLoading(false);
+    }
+  }), [loadMoreData, onError]);
+  const observer = useRef(new IntersectionObserver(entries => {
+    const first = entries[0];
+    if (first.isIntersecting) {
+      setPage(prevNum => prevNum + 1);
+    }
+  }));
+  useEffect(() => {
+    if (loadMoreData && !isDone && page) {
+      fetchData(page);
+    }
+  }, [page, loadMoreData, isDone]);
+  useEffect(() => {
+    const currentElement = lastElement;
+    const currentObserver = observer.current;
+    if (currentElement) {
+      currentObserver.observe(currentElement);
+    }
+    return () => {
+      if (currentElement) {
+        currentObserver.unobserve(currentElement);
+      }
+    };
+  }, [lastElement]);
+  // Adds the lastElement ref to the last Element of the grid
+  const gridItemsWithLastElement = useMemo(() => [...gridItems.slice(0, -1), jsx("div", {
+    ref: setLastElement,
+    children: gridItems[gridItems.length - 1]
+  }, "last-grid-item")], [gridItems]);
+  return jsx(StyledGrid, Object.assign({}, gridArgs, {
+    isLoading: isLoading,
+    children: gridItemsWithLastElement
+  }));
 };
 
 const breakpointsGetter = (value, theme, breakpoint) => {
@@ -12714,6 +12791,12 @@ function DotDashboardHeader({
 }
 
 const rootClassName$C = 'dot-empty-state';
+const emptyStateImageSizing = {
+  xsmall: 9,
+  dense: 15,
+  normal: 31,
+  large: 49
+};
 const StyledEmptyState = styled.div`
   ${({
   theme
@@ -12729,8 +12812,10 @@ const StyledEmptyState = styled.div`
       }
 
       .empty-state-image {
+        display: inline-flex;
+        justify-content: center;
         min-height: ${theme.spacing(10)};
-        margin-bottom: ${theme.spacing(5)};
+        margin-bottom: ${theme.spacing(3)};
       }
 
       h2 {
@@ -12744,6 +12829,34 @@ const StyledEmptyState = styled.div`
       .dot-button {
         margin-top: ${theme.spacing(4)};
       }
+
+      &.xsmall {
+        .empty-state-image {
+          height: ${theme.spacing(emptyStateImageSizing.xsmall)};
+          width: ${theme.spacing(emptyStateImageSizing.xsmall)};
+        }
+      }
+
+      &.dense {
+        .empty-state-image {
+          height: ${theme.spacing(emptyStateImageSizing.dense)};
+          width: ${theme.spacing(emptyStateImageSizing.dense)};
+        }
+      }
+
+      &.normal {
+        .empty-state-image {
+          height: ${theme.spacing(emptyStateImageSizing.normal)};
+          width: ${theme.spacing(emptyStateImageSizing.normal)};
+        }
+      }
+
+      &.large {
+        .empty-state-image {
+          height: ${theme.spacing(emptyStateImageSizing.large)};
+          width: ${theme.spacing(emptyStateImageSizing.large)};
+        }
+      }
     }
   `}
 `;
@@ -12798,13 +12911,14 @@ const DotEmptyState = ({
   illustrationId,
   imageAltText,
   imageSrc,
+  size = 'normal',
   subtitle,
   title
 }) => {
   const rootClasses = useStylesWithRootClass(rootClassName$C, className);
   return jsxs(StyledEmptyState, {
     "aria-label": ariaLabel,
-    className: rootClasses,
+    className: `${rootClasses} ${size}`,
     "data-testid": dataTestId,
     children: [jsxs("div", {
       className: "empty-state-image-container",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digital-ai/dot-components",
-  "version": "4.6.0",
+  "version": "4.8.0",
   "private": false,
   "license": "SEE LICENSE IN <LICENSE.md>",
   "contributors": [

package/src/lib/components/css-grid/CssGrid.d.ts

@@ -23,6 +23,10 @@ export interface CssGridProps extends CommonProps {
     gridTemplateAreas?: string;
     /** Height of the grid */
     height?: string;
+    /** Function called to load more items when the end of the grid is reached.  Should return an array of ReactNodes. */
+    loadMoreData?: (page: number) => Promise<ReactNode[]>;
+    /** Error handler function for handling any errors that might come from the loadMoreData function */
+    onError?: (error: Error) => void;
     /** Row, overrides columnsBreakpoints */
     rowGap?: GridOptions;
     /** Row, configuration */
@@ -30,9 +34,13 @@ export interface CssGridProps extends CommonProps {
     /** Width of the grid */
     width?: string;
 }
+interface InternalGridProps extends CssGridProps {
+    isLoading: boolean;
+}
 export declare const rootClassName = "dot-grid";
 export declare const defaultGutter: GridOptions;
 export declare const defaultColumns: GridOptions;
-export declare const Grid: ({ className, children }: CssGridProps) => import("react/jsx-runtime").JSX.Element;
-export declare const StyledGrid: import("styled-components").StyledComponent<({ className, children }: CssGridProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
-export declare const CssGrid: (props: CssGridProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Grid: ({ className, children, isLoading }: InternalGridProps) => import("react/jsx-runtime").JSX.Element;
+export declare const StyledGrid: import("styled-components").StyledComponent<({ className, children, isLoading }: InternalGridProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
+export declare const CssGrid: ({ children, loadMoreData, onError, ...gridArgs }: CssGridProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/src/lib/components/empty-state/EmptyState.d.ts

@@ -1,5 +1,6 @@
 import { ButtonProps } from '../button';
 import { CommonProps } from '../CommonProps';
+export type EmptyStateSize = 'xsmall' | 'dense' | 'normal' | 'large';
 export interface EmptyStateProps extends CommonProps {
     /** primary button properties */
     buttonProps?: ButtonProps;
@@ -9,9 +10,11 @@ export interface EmptyStateProps extends CommonProps {
     imageAltText?: string;
     /** location of image */
     imageSrc?: string;
+    /** sizing of the empty state (illustration, img) */
+    size?: EmptyStateSize;
     /** subtitle text displayed */
     subtitle?: string;
     /** title text displayed */
     title: string;
 }
-export declare const DotEmptyState: ({ ariaLabel, buttonProps, className, "data-testid": dataTestId, illustrationId, imageAltText, imageSrc, subtitle, title, }: EmptyStateProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DotEmptyState: ({ ariaLabel, buttonProps, className, "data-testid": dataTestId, illustrationId, imageAltText, imageSrc, size, subtitle, title, }: EmptyStateProps) => import("react/jsx-runtime").JSX.Element;