@geotab/zenith 1.26.6-beta.3 → 2.0.0-beta.0

package/esm/commonHelpers/utils.d.ts

@@ -0,0 +1,7 @@
+export declare const generateId: () => string;
+export declare const echo: <T = unknown>(_: T) => T;
+export declare function flattenArrays<T>(arrayOfArrays: T[][]): T[];
+type TPlainObject = Record<string, unknown>;
+export declare function deepMerge(obj1: TPlainObject, obj2: TPlainObject): TPlainObject;
+export declare const deepClone: <T>(candidateToCopy: T) => T;
+export {};

package/esm/commonHelpers/utils.js

@@ -0,0 +1,47 @@
+export const generateId = () => "id" + Math.random().toString().substring(2);
+export const echo = (_) => _;
+export function flattenArrays(arrayOfArrays) {
+    return arrayOfArrays.reduce((akk, arr) => akk.concat(arr), []);
+}
+function isObject(item) {
+    return (typeof item === "object" && !Array.isArray(item) && item !== null);
+}
+export function deepMerge(obj1, obj2) {
+    const output = Object.assign({}, obj1);
+    Object.entries(obj2).forEach(([key, value]) => {
+        if (isObject(value) && key in obj1 && isObject(obj1[key])) {
+            output[key] = deepMerge(obj1[key], value);
+        }
+        else {
+            output[key] = value;
+        }
+    });
+    return output;
+}
+const deepCloneFallback = (candidateToCopy) => {
+    if (typeof candidateToCopy !== "object" || candidateToCopy === null) {
+        return candidateToCopy;
+    }
+    if (candidateToCopy instanceof Date) {
+        return new Date(candidateToCopy);
+    }
+    if (candidateToCopy instanceof Set) {
+        return new Set(candidateToCopy);
+    }
+    if (candidateToCopy instanceof Map) {
+        return new Map(candidateToCopy);
+    }
+    if (Array.isArray(candidateToCopy)) {
+        return candidateToCopy.map(deepCloneFallback);
+    }
+    return Object.keys(candidateToCopy).reduce((acc, key) => {
+        acc[key] = deepCloneFallback(candidateToCopy[key]);
+        return acc;
+    }, {});
+};
+export const deepClone = (candidateToCopy) => {
+    if (typeof window.structuredClone === "function") {
+        return window.structuredClone(candidateToCopy);
+    }
+    return (candidateToCopy === undefined ? undefined : deepCloneFallback(candidateToCopy));
+};

package/esm/commonHelpers/zenComponent.d.ts

@@ -0,0 +1,77 @@
+import { PropsWithChildren } from "react";
+export interface IZenComponentProps extends PropsWithChildren {
+    className?: string;
+}
+export interface IZenIdComponentProps extends IZenComponentProps {
+    id: string;
+}
+type TDesktopColumns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+type TTabletColumns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+type TMobileColumns = 1 | 2 | 3 | 4;
+export interface IZenGridItem extends Partial<Pick<IZenIdComponentProps, "className" | "id">> {
+    /**
+        @param grid - Span value for all screens - applies maximum possible value for current screen
+
+        min value: 1 (desktop 1 column)
+        max value: 1284 (desktop 12 columns, tablet 8 columns, mobile 4 columns)
+
+        Can be applied if used as a part of `Grid` component.
+        @see `gridLayout/gridLayout.tsx`
+    */
+    grid?: number;
+    /**
+        @param gridStart - The starting column for all screens - applies maximum possible value for current screen.
+
+        min value: 1 (desktop 1 column)
+        max value: 1284 (desktop 12 columns, tablet 8 columns, mobile 4 columns)
+
+        Can be applied if used as a part of `Grid` component.
+        @see `gridLayout/gridLayout.tsx`
+    */
+    gridStart?: number;
+    /**
+        @param gridLgStart - The starting column for large screens (width > 1024px).
+
+
+        Can be applied if used as a part of `Grid` component.
+        @see `gridLayout/gridLayout.tsx`
+    */
+    gridLgStart?: TDesktopColumns;
+    /**
+        @param gridLg - The number of columns for large screens (width > 1024px).
+
+
+        Can be applied if used as a part of `Grid` component.
+        @see `gridLayout/gridLayout.tsx`
+    */
+    gridLg?: TDesktopColumns;
+    /**
+        @param gridMdStart - The starting column for medium screens (640px < width < 1024px).
+
+        Can be applied if used as a part of `Grid` component.
+        @see `gridLayout/gridLayout.tsx`
+    */
+    gridMdStart?: TTabletColumns;
+    /**
+        @param gridMd - The number of columns for medium screens (640px < width < 1024px).
+
+        Can be applied if used as a part of `Grid` component.
+        @see `gridLayout/gridLayout.tsx`
+    */
+    gridMd?: TTabletColumns;
+    /**
+        @param gridSmStart - The starting column for small screens (width < 640px).
+
+        Can be applied if used as a part of `Grid` component.
+        @see `gridLayout/gridLayout.tsx`
+    */
+    gridSmStart?: TMobileColumns;
+    /**
+        @param gridSm - The number of columns for small screens (width < 640px).
+
+        Can be applied if used as a part of `Grid` component.
+        @see `gridLayout/gridLayout.tsx`
+    */
+    gridSm?: TMobileColumns;
+}
+export {};

package/esm/commonHelpers/zenComponent.js

@@ -0,0 +1 @@
+export {};

package/esm/commonStyles/colors/colorsConstant.d.ts

@@ -0,0 +1,38 @@
+export declare const Colors: {
+    Text: {
+        colorName: string;
+        text: string;
+        variable: string;
+        description: string;
+    }[];
+    Actions: {
+        colorName: string;
+        text: string;
+        variable: string;
+        description: string;
+    }[];
+    Backgrounds: {
+        colorName: string;
+        text: string;
+        variable: string;
+        description: string;
+    }[];
+    Borders: {
+        colorName: string;
+        text: string;
+        variable: string;
+        description: string;
+    }[];
+    Accents: {
+        colorName: string;
+        text: string;
+        variable: string;
+        description: string;
+    }[];
+    DutyStatus: {
+        colorName: string;
+        text: string;
+        variable: string;
+        description: string;
+    }[];
+};

package/esm/commonStyles/colors/colorsConstant.js

@@ -0,0 +1,308 @@
+export const Colors = {
+    Text: [
+        {
+            colorName: "primary",
+            text: "Primary",
+            variable: "--text-primary",
+            description: "For primary text and icons"
+        },
+        {
+            colorName: "secondary",
+            text: "Secondary",
+            variable: "--text-secondary",
+            description: "For less prominent text and icon"
+        },
+        {
+            colorName: "placeholder",
+            text: "Placeholder",
+            variable: "--text-placeholder",
+            description: "For visual cues for input fields"
+        },
+        {
+            colorName: "hyperlink",
+            text: "Hyperlink",
+            variable: "--text-hyperlink",
+            description: "For distinguishing clickable links from regular text"
+        },
+        {
+            colorName: "nav-highlight",
+            variable: "--text-nav-highlight",
+            text: "Nav Highlight",
+            description: "For indication of currently selected or active menu item"
+        },
+        {
+            colorName: "error",
+            text: "Error Message",
+            variable: "--text-error-message",
+            description: "For highlighting critical information, such as validation errors or warnings"
+        },
+        {
+            colorName: "disabled",
+            text: "Text button disabled",
+            variable: "--text-button-disabled",
+            description: "For inactive or unavailable elements"
+        },
+        {
+            colorName: "reverse",
+            text: "Reverse - Primary",
+            variable: "--text-reverse-primary",
+            description: "For high-contrast readability on dark backgrounds"
+        }
+    ],
+    Actions: [
+        {
+            colorName: "action-primary",
+            text: "Primary",
+            variable: "--text-primary--default",
+            description: "For immediate attention to interactive elements"
+        },
+        {
+            colorName: "action-primary-hover",
+            text: "Primary - Hover",
+            variable: "--text-primary--hover",
+            description: "For indication when users hover over interactive elements"
+        },
+        {
+            colorName: "action-primary-active",
+            text: "Primary - Active",
+            variable: "--text-primary--active",
+            description: "For indication when an element is clicked or tapped"
+        },
+        {
+            colorName: "action-secondary",
+            text: "Secondary - Default",
+            variable: "--text-secondary--default",
+            description: "Primary text and icons colour for text and icons"
+        },
+        {
+            colorName: "action-secondary-hover",
+            text: "Secondary - Hover",
+            variable: "--text-secondary--hover",
+            description: "For indication when users hover over less prominent interactive elements"
+        },
+        {
+            colorName: "action-secondary-active",
+            text: "Secondary - Active",
+            variable: "--text-secondary--active",
+            description: "For indication when a secondary element is clicked or tapped"
+        },
+        {
+            colorName: "action-destructive",
+            text: "Destructive - Default",
+            variable: "--text-destructive--default",
+            description: "For highlighting actions or elements that carry significant consequences"
+        },
+        {
+            colorName: "action-destructive-hover",
+            text: "Destructive Hover",
+            variable: "--text-destructive--hover",
+            description: "For visual feedback when users hover over elements representing potentially irreversible actions"
+        },
+        {
+            colorName: "action-destructive-active",
+            text: "Destructive - Active",
+            variable: "--text-destructive--active",
+            description: "For when potentially irreversible actions are clicked"
+        },
+        {
+            colorName: "action-tertiary-hover",
+            text: "Tertiary hover",
+            variable: "--text-tertiary--hover",
+            description: "For subtle visual feedback when users hover over less prominent interactive elements"
+        },
+        {
+            colorName: "action-tertiary-active",
+            text: "Tertiary active",
+            variable: "--text-tertiary--active",
+            description: "For less prominent interactive elements, when they are clicked or tapped"
+        }
+    ],
+    Backgrounds: [
+        {
+            colorName: "backgrounds-main",
+            text: "Main",
+            variable: "--backgrounds-main",
+            description: "Default background for optimized readability"
+        },
+        {
+            colorName: "backgrounds-content-0",
+            text: "Content 0",
+            variable: "--backgrounds-content-0",
+            description: "For contrast above main background"
+        },
+        {
+            colorName: "backgrounds-content-1",
+            text: "Content 1",
+            variable: "--backgrounds-content-1",
+            description: "For additional contrast above main and content 0 background"
+        },
+        {
+            colorName: "backgrounds-content-2",
+            text: "Content 2",
+            variable: "--backgrounds-content-2",
+            description: "Providing contrast to distinguish components"
+        },
+        {
+            colorName: "backgrounds-generic-hover",
+            text: "Generic Hover",
+            variable: "--backgrounds-hover",
+            description: "For visual feedback when users hover over an interactive element with an background"
+        },
+        {
+            colorName: "backgrounds-disabled",
+            text: "Field Disabled",
+            variable: "--backgrounds-field-disabled",
+            description: "For the background of elements that are disabled"
+        },
+        {
+            colorName: "backgrounds-text-button-disabled",
+            text: "Text Button - Disabled",
+            variable: "--backgrounds-text-button-disabled",
+            description: "For the background of text Buttons that are disabled"
+        },
+        {
+            colorName: "backgrounds-primary-brand",
+            text: "Primary Brand",
+            variable: "--backgrounds-primary-brand",
+            description: "For Geotab Branding Background"
+        },
+        {
+            colorName: "backgrounds-reverse-0",
+            text: "Reverse 0",
+            variable: "--backgrounds-reverse-0",
+            description: "For contrast against light backgrounds"
+        },
+        {
+            colorName: "backgrounds-reverse-1",
+            text: "Reverse 1",
+            variable: "--backgrounds-reverse-1",
+            description: "For high contrast against light backgrounds"
+        },
+        {
+            colorName: "backgrounds-reverse-2",
+            text: "Reverse 2",
+            variable: "--backgrounds-reverse-2",
+            description: "For a light contrast background"
+        },
+        {
+            colorName: "backgrounds-overlay",
+            text: "Overlay",
+            variable: "--backgrounds-overlay",
+            description: "For Scrims and overlay"
+        }
+    ],
+    Borders: [
+        {
+            colorName: "borders-main",
+            text: "General",
+            variable: "--borders-general",
+            description: "For the default border to subtly visually separate elements"
+        },
+        {
+            colorName: "borders-secondary",
+            text: "Secondary",
+            variable: "--borders-secondary",
+            description: "For visually separating elements elements with higher contrast"
+        },
+        {
+            colorName: "borders-formfield-active",
+            text: "Formfield - Active",
+            variable: "--borders-form-field--active",
+            description: "For visual indication that an input field is active"
+        },
+        {
+            colorName: "borders-formfield-error",
+            text: "Formfield - Error",
+            variable: "--borders-form-field--error",
+            description: "For visual indication that an input field has an incorrect input"
+        },
+        {
+            colorName: "borders-formfield-reverse",
+            text: "Formfield - Reverse",
+            variable: "--borders-form-field--reverse",
+            description: "For a contrasting border against a darker background"
+        }
+    ],
+    Accents: [
+        {
+            colorName: "accents-warning--main",
+            text: "Warning - Main",
+            variable: "--accents-warning--main",
+            description: "Use for a background colour for an element with an accent to highlight a warning"
+        },
+        {
+            colorName: "accents-warning--detail",
+            text: "Warning - Detail",
+            variable: "--accents-warning--detail",
+            description: "Use for a foreground colour for an element with an accent to highlight a warning"
+        },
+        {
+            colorName: "accents-error--main",
+            text: "Error - Main",
+            variable: "--accents-error--main",
+            description: "Use for a background colour for an element with an accent to highlight an error"
+        },
+        {
+            colorName: "accents-error--detail",
+            text: "Warning - Detail",
+            variable: "--accents-error--detail",
+            description: "Use for a foreground colour for an element with an accent to highlight an error"
+        },
+        {
+            colorName: "accents-success--main",
+            text: "Success - Main",
+            variable: "--accents-success--main",
+            description: "Use for a  background colour for an element with an accent to highlight a success"
+        },
+        {
+            colorName: "accents-success--detail",
+            text: "Success - Detail",
+            variable: "--accents-success--detail",
+            description: "Use for a foreground colour for an element with an accent to highlight a success"
+        },
+        {
+            colorName: "accents-general--main",
+            text: "General - Main",
+            variable: "--accents-general--main",
+            description: "Use for a default background colour for an element with an accent  "
+        },
+        {
+            colorName: "accents-general--detail",
+            text: "General - Detail",
+            variable: "--accents-general--detail",
+            description: "Use for a default foreground colour for an element with an accent  "
+        }
+    ],
+    DutyStatus: [
+        {
+            colorName: "duty-status-workday",
+            text: "Workday",
+            variable: "--duty-status-workday",
+            description: "To indicate the driver is on duty"
+        },
+        {
+            colorName: "duty-status-cycle",
+            text: "Cycle",
+            variable: "--duty-status-cycle",
+            description: "To indicate off duty"
+        },
+        {
+            colorName: "duty-status-rest",
+            text: "Rest",
+            variable: "--duty-status-rest",
+            description: "To indicate driver is on rest"
+        },
+        {
+            colorName: "duty-status-drive",
+            text: "Drive",
+            variable: "--duty-status-drive",
+            description: "To indicate driver is driving"
+        },
+        {
+            colorName: "duty-status-exemption",
+            text: "Exemption",
+            variable: "--duty-status-exemption",
+            description: "To indicate an exemption "
+        }
+    ]
+};

package/esm/commonStyles/typography/components/typographyItem.d.ts

@@ -0,0 +1,8 @@
+import "./typographyItem.less";
+export declare const TypographyItem: ({ content, contentClassName, font, device, tag }: {
+    content?: string | undefined;
+    contentClassName?: string | undefined;
+    font?: string | undefined;
+    device?: string | undefined;
+    tag: any;
+}) => import("react/jsx-runtime").JSX.Element;

package/esm/commonStyles/typography/components/typographyItem.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useLayoutEffect, useRef, useState } from "react";
+import { classNames } from "../../../commonHelpers/classNames/classNames";
+import { useMobile } from "../../../commonHelpers/hooks/useMobile";
+import { useDrive } from "../../../utils/theme/useDrive";
+const getFontWeightName = (value) => {
+    switch (value) {
+        case 300:
+            return "Light";
+        case 400:
+            return "Regular";
+        case 500:
+            return "Medium";
+        case 700:
+            return "Bold";
+        default:
+            return "Unknown";
+    }
+};
+export const TypographyItem = ({ content = "The brown fox jumped over the lazy dog.", contentClassName = "", font = "Roboto", device = "", tag }) => {
+    const ref = useRef(null);
+    const [fontWeightState, setFontWeight] = useState("Unknown");
+    const [fontSizeState, setFontSize] = useState("Unknown");
+    const [lineHeightState, setLineHeight] = useState("Unknown");
+    const [letterSpacingState, setLetterSpacing] = useState("Unknown");
+    const isMobile = useMobile();
+    const isDrive = useDrive();
+    const bigScreenName = isDrive ? "Tablet" : "Desktop";
+    const deviceName = device || (isMobile ? "Mobile" : bigScreenName);
+    useLayoutEffect(() => {
+        if (ref.current) {
+            const { fontWeight, fontSize, lineHeight, letterSpacing } = getComputedStyle(ref.current);
+            setFontWeight(getFontWeightName(parseInt(fontWeight)));
+            setFontSize(fontSize);
+            setLineHeight(lineHeight);
+            setLetterSpacing(letterSpacing === "normal" ? "0px" : letterSpacing);
+        }
+    }, [isMobile]);
+    return _jsx("div", { className: "story-typography-item", children: _jsxs("div", { className: "story-typography-item__content-wrapper", children: [_jsx("p", { ref: ref, className: classNames(["story-typography-item__content", contentClassName]), children: content }), _jsxs("div", { className: "story-typography-item__content-description", children: [_jsxs("div", { className: "story-typography-item__content-description-column", children: [_jsxs("div", { className: "story-typography-item__content-description-item", children: [_jsx("span", { className: "story-typography-item__content-description-name label-01-desktop", children: "Font" }), _jsx("span", { className: "story-typography-item__content-description-value heading-04", children: font })] }), _jsxs("div", { className: "story-typography-item__content-description-item", children: [_jsx("span", { className: "story-typography-item__content-description-name label-01-desktop", children: "Weight" }), _jsx("span", { className: "story-typography-item__content-description-value heading-04", children: fontWeightState })] }), _jsxs("div", { className: "story-typography-item__content-description-item", children: [_jsx("span", { className: "story-typography-item__content-description-name label-01-desktop", children: "Size" }), _jsx("span", { className: "story-typography-item__content-description-value heading-04", children: fontSizeState })] }), _jsxs("div", { className: "story-typography-item__content-description-item", children: [_jsx("span", { className: "story-typography-item__content-description-name label-01-desktop", children: "Line Height" }), _jsx("span", { className: "story-typography-item__content-description-value heading-04", children: lineHeightState })] })] }), _jsxs("div", { className: "story-typography-item__content-description-column", children: [_jsxs("div", { className: "story-typography-item__content-description-item", children: [_jsx("span", { className: "story-typography-item__content-description-name label-01-desktop", children: "Letter Spacing" }), _jsx("span", { className: "story-typography-item__content-description-value heading-04", children: letterSpacingState })] }), _jsxs("div", { className: "story-typography-item__content-description-item", children: [_jsx("span", { className: "story-typography-item__content-description-name label-01-desktop", children: "Device" }), _jsx("span", { className: "story-typography-item__content-description-value heading-04", children: deviceName })] }), _jsxs("div", { className: "story-typography-item__content-description-item", children: [_jsx("span", { className: "story-typography-item__content-description-name label-01-desktop", children: "Tag" }), _jsxs("span", { className: "story-typography-item__content-description-value heading-04", children: ["<", tag, ">"] })] })] })] })] }) });
+};

package/esm/controlledPopup/controlledPopup.d.ts

@@ -0,0 +1,30 @@
+import React from "react";
+import { TTrapFocus } from "../absolute/absolute";
+import "./controlledPopup.less";
+import { IZenComponentProps } from "../commonHelpers/zenComponent";
+import { TAlignment as TAlignmentAbsolute } from "../absolute/absolute";
+/**
+ * @deprecated - please use {@link TAlignmentAbsolute|TAlignment} interface from the absolute component
+  */
+export type TAlignment = "top" | "top-left" | "top-right" | "left" | "left-top" | "left-bottom" | "right" | "right-top" | "right-bottom" | "bottom" | "bottom-left" | "bottom-right";
+export interface IControlledPopup extends IZenComponentProps {
+    triggerRef: React.RefObject<HTMLElement>;
+    alignment?: TAlignmentAbsolute;
+    id?: string;
+    className?: string;
+    paddingX?: number;
+    paddingY?: number;
+    inline?: boolean;
+    isOpen: boolean;
+    useTrapFocusWithTrigger?: TTrapFocus;
+    shouldHoldScroll?: boolean;
+    onOpenChange: (isOpen: boolean) => void;
+    /**
+        @deprecated - this prop is deprecated and will be removed in the next major version.
+    */
+    role?: string;
+    ariaLabel?: string;
+    ariaLabelledby?: string;
+    recalculateOnScroll?: boolean;
+}
+export declare const ControlledPopup: React.FC<IControlledPopup>;

package/esm/controlledPopup/controlledPopup.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useId } from "react";
+import { Absolute } from "../absolute/absolute";
+import { classNames } from "../commonHelpers/classNames/classNames";
+export const ControlledPopup = ({ isOpen, id, paddingX, paddingY, triggerRef, className, children, alignment, inline, onOpenChange, useTrapFocusWithTrigger, shouldHoldScroll, ariaLabel, ariaLabelledby, recalculateOnScroll }) => {
+    const autoId = useId();
+    const popupId = id || autoId;
+    useEffect(() => {
+        if (!triggerRef.current) {
+            return;
+        }
+        const triggerRole = triggerRef.current.getAttribute("role");
+        triggerRef.current.setAttribute("aria-haspopup", triggerRole === "menuitem" ? "menu" : "true");
+        triggerRef.current.setAttribute("aria-expanded", isOpen ? "true" : "false");
+        triggerRef.current.setAttribute("aria-controls", popupId);
+        triggerRef.current.setAttribute("data-popup-id", popupId);
+    }, [triggerRef, isOpen, popupId]);
+    return _jsx(Absolute, { triggerRef: triggerRef, alignment: alignment, id: popupId, isOpen: isOpen, className: classNames(["zen-popup", className ? className : ""]), paddingX: paddingX, paddingY: paddingY, inline: inline, onOpenChange: onOpenChange, useTrapFocusWithTrigger: useTrapFocusWithTrigger, shouldHoldScroll: shouldHoldScroll, role: "dialog", ariaLabel: ariaLabel, ariaLabelledby: ariaLabelledby, recalculateOnScroll: recalculateOnScroll, children: children });
+};

package/esm/dataFeed/dataFeed.d.ts

@@ -0,0 +1,40 @@
+import "./dataFeed.less";
+import { FC, ForwardedRef, PropsWithChildren, ReactNode } from "react";
+import { IDataGrid } from "../dataGrid/dataGrid";
+import { IActionWithId } from "../dataGrid/columns/actionsColumn/actionsColumn";
+import { IRowEntity } from "../dataGrid/row/row";
+import { IEntityWithId } from "../commonHelpers/entity";
+export type TFeedWrapper<T, N = T> = (primaryData: ReactNode, secondaryData: ReactNode, entity: T | N, isNested: boolean) => [ReactNode, ReactNode];
+interface IDataFeedOptions {
+    /**
+     * @deprecated - will be removed in the next major version
+     * please use @param visibleColumns instead
+     */
+    collapsedColumnsQty?: number;
+    visibleColumns?: number;
+    scrollComponent?: HTMLElement;
+    onFeedEnd?: () => void;
+}
+export interface IDataFeed<T, N = T> extends IDataGrid<T, N> {
+    feedWrappers?: TFeedWrapper<T, N>[];
+    expanded: boolean;
+    actions?: IActionWithId<T> | ((e: T, isNested: boolean) => JSX.Element) | undefined;
+    actionsAsync?: IActionWithId<T> | ((e: T, isNested: boolean) => PromiseLike<JSX.Element>);
+    primaryActions?: IActionWithId<T>[] | ((e: T, isNested: boolean) => IActionWithId<T>[]);
+    options: IDataFeedOptions;
+    itemsPerPage?: number;
+    expandedRows?: string[];
+    onExpandedChange?: (id: string, isExpanded: boolean) => void;
+    activePage?: number;
+}
+declare const EmptyList: FC<PropsWithChildren>;
+declare const Footer: FC<PropsWithChildren>;
+declare const DataFeedInner: <T extends IRowEntity<N>, N extends IEntityWithId>({ entities, columns, feedWrappers, className, expanded, options, description, children, actions, actionsAsync, primaryActions, itemsPerPage, rowClassName, expandedRows, onExpandedChange, activePage }: IDataFeed<T, N>, ref: ForwardedRef<HTMLElement>) => import("react/jsx-runtime").JSX.Element;
+export interface IDataFeedStaticProps {
+    EmptyList: typeof EmptyList;
+    Footer: typeof Footer;
+}
+declare const DataFeed: (<T extends IRowEntity<N>, N extends IEntityWithId = T>(props: IDataFeed<T, N> & {
+    ref?: React.ForwardedRef<HTMLElement>;
+}) => ReturnType<typeof DataFeedInner>) & IDataFeedStaticProps;
+export { DataFeed };