@geotab/zenith 1.25.3 → 1.26.0-beta.1

package/README.md

@@ -40,9 +40,15 @@ Zenith library provides components defined in Zenith Design System. It includes
 
 ## Change log
 
-### 1.25.3
+### 1.26.0
+
+ * Nested rows in `Table`
+ * Add translations
+ * Fix action link misalignment in `Table`
+ * Allow to define point colors in `Chart`
+ * Fix `PillExpandable` appearance in `Table`
 
-## 1.25.3
+### 1.25.3
 
  * Update translations in `Chart`
  * ColumnsSelector is right-aligned by default

package/dist/absolute/absolute.d.ts

@@ -22,5 +22,6 @@ export interface IAbsolute extends IZenComponentProps {
     ariaLabelledby?: string;
     alignmentsFn?: IAlignment;
     recalculateOnScroll?: boolean;
+    recalculateTrigger?: boolean;
 }
 export declare const Absolute: React.FC<IAbsolute>;

package/dist/absolute/absolute.js

@@ -17,7 +17,7 @@ const useArrowKey_1 = require("../commonHelpers/hooks/useArrowKey");
 const themeContext_1 = require("../utils/theme/themeContext");
 const useScroll_1 = require("../commonHelpers/hooks/useScroll");
 const getScrollableParent_1 = require("../utils/getScrollableParent");
-const Absolute = ({ isOpen, id, paddingX, paddingY, className, children, triggerRef, alignment, inline, onOpenChange, useTrapFocusWithTrigger = "off", shouldHoldScroll, stateFullChilds, role, ariaLabel, ariaLabelledby, alignmentsFn, recalculateOnScroll }) => {
+const Absolute = ({ isOpen, id, paddingX, paddingY, className, children, triggerRef, alignment, inline, onOpenChange, useTrapFocusWithTrigger = "off", shouldHoldScroll, stateFullChilds, role, ariaLabel, ariaLabelledby, alignmentsFn, recalculateOnScroll, recalculateTrigger = true }) => {
     const popupRef = (0, react_1.useRef)(null);
     const prevScroll = (0, react_1.useRef)(0);
     const { dark } = (0, react_1.useContext)(themeContext_1.themeContext);
@@ -51,7 +51,7 @@ const Absolute = ({ isOpen, id, paddingX, paddingY, className, children, trigger
     const calculatePosition = (0, react_1.useCallback)(() => (0, calculatePosition_1.calculatePosition)(triggerRef, popupRef, paddingX, paddingY, inline, alignment, alignmentsFn, parent ? parent : undefined), [triggerRef, paddingX, paddingY, inline, alignment, alignmentsFn, popupRef, parent]);
     (0, useResize_1.useResize)(calculatePosition, isOpen);
     (0, useScroll_1.useScroll)(calculatePosition, isOpen, parent);
-    (0, react_1.useLayoutEffect)(calculatePosition, [isOpen, calculatePosition]);
+    (0, react_1.useLayoutEffect)(calculatePosition, [isOpen, children, recalculateTrigger, calculatePosition]);
     function handleEscape() {
         onOpenChange(false);
         if (!triggerRef.current) {

package/dist/chart/barChart/getBarTooltipItems.js

@@ -21,7 +21,8 @@ const getBarTooltipItems = (data, datasetIndex, index, options, isHidden) => {
         // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
         const value = itemValue !== undefined ? (0, formatValue_1.formatValue)(itemValue.toFixed(2), dsIndex, options === null || options === void 0 ? void 0 : options.unit) : undefined;
         const label = dataset.label || "";
-        const color = typeof dataset.borderColor === "string" ? dataset.borderColor : "";
+        const color = Array.isArray(dataset.backgroundColor) && dataset.backgroundColor[index] ? dataset.backgroundColor[index] :
+            typeof dataset.borderColor === "string" ? dataset.borderColor : "";
         return { label, value, color };
     }).filter(item => item !== undefined);
 };

package/dist/chart/barChart/getDefaultDatasetStyle.js

@@ -10,11 +10,18 @@ const baseColors = [
     "#D35D80"
 ];
 const getDefaultDatasetStyle = (dataSet, dsIndex) => {
-    var _a;
+    var _a, _b;
     const newDataSet = Object.assign({}, dataSet);
-    const baseColor = ((_a = dataSet.backgroundColor) === null || _a === void 0 ? void 0 : _a.toString()) || baseColors[dsIndex % baseColors.length];
+    let baseColor;
+    if (Array.isArray(dataSet.backgroundColor) && dataSet.backgroundColor.length > 0) {
+        baseColor = (_a = dataSet.backgroundColor[0]) === null || _a === void 0 ? void 0 : _a.toString();
+        newDataSet.backgroundColor = dataSet.backgroundColor;
+    }
+    else {
+        baseColor = ((_b = dataSet.backgroundColor) === null || _b === void 0 ? void 0 : _b.toString()) || baseColors[dsIndex % baseColors.length];
+        newDataSet.backgroundColor = baseColor;
+    }
     newDataSet.borderColor = baseColor;
-    newDataSet.backgroundColor = baseColor;
     newDataSet.barPercentage = dataSet.barPercentage !== undefined ? dataSet.barPercentage : 0.9;
     newDataSet.categoryPercentage = dataSet.categoryPercentage !== undefined ? dataSet.categoryPercentage : 0.6;
     return newDataSet;

package/dist/chart/lineChart/getDefaultDatasetStyle.js

@@ -23,7 +23,10 @@ const getDefaultDatasetStyle = (dataSet, dsIndex) => {
         pointRs[pointRs.length - 1] = lineStyle.pointRadius;
         newDataSet.pointRadius = pointRs;
         newDataSet.pointHitRadius = lineStyle.pointHitRadius;
-        newDataSet.pointBackgroundColor = baseColor;
+        newDataSet.pointBackgroundColor = dataSet.pointBackgroundColor || baseColor;
+    }
+    if (dataSet.pointBackgroundColor) {
+        newDataSet.pointBorderColor = dataSet.pointBackgroundColor;
     }
     return newDataSet;
 };

package/dist/checkbox/checkbox.d.ts

@@ -12,5 +12,6 @@ export interface ICheckbox extends IZenComponentProps {
     fullWidth?: boolean;
     reverse?: boolean;
     onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    wrapped?: boolean;
 }
 export declare const Checkbox: React.FC<ICheckbox>;

package/dist/checkbox/checkbox.js

@@ -45,15 +45,20 @@ const useDriveClassName_1 = require("../utils/theme/useDriveClassName");
 const checkboxIconCheckmark_1 = require("./checkboxIconCheckmark");
 const checkboxIconMinus_1 = require("./checkboxIconMinus");
 const Checkbox = (_a) => {
-    var { reverse, fullWidth, id, checked, indeterminate, title, className = "", children, disabled } = _a, rest = __rest(_a, ["reverse", "fullWidth", "id", "checked", "indeterminate", "title", "className", "children", "disabled"]);
+    var { reverse, fullWidth, id, checked, indeterminate, title, className = "", children, disabled, wrapped } = _a, rest = __rest(_a, ["reverse", "fullWidth", "id", "checked", "indeterminate", "title", "className", "children", "disabled", "wrapped"]);
     const state = (0, checkboxUtils_1.getCheckboxState)(checked, indeterminate);
     const generatedId = react_1.default.useId();
     const intId = id || generatedId;
     const driveClasses = (0, useDriveClassName_1.useDriveClassName)("zen-checkbox");
     const checkboxIconClasses = (0, react_1.useMemo)(() => (0, classNames_1.classNames)(["zen-checkbox__icon", disabled ? "zen-checkbox__icon--disabled" : ""]), [disabled]);
-    return (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-checkbox", driveClasses || "", className]), children: [(0, jsx_runtime_1.jsx)(triStateCheckbox_1.TriStateCheckbox, Object.assign({ className: "zen-checkbox__input", id: intId, checked: checked, indeterminate: indeterminate, disabled: disabled }, rest)), (0, jsx_runtime_1.jsxs)("label", { className: (0, classNames_1.classNames)(["zen-checkbox__label", reverse ? "zen-checkbox__label--reverse" : ""]), htmlFor: intId, title: title, "aria-label": title, children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-checkbox__box", children: state === checkboxState_1.CheckboxState.Indeterminate ? (0, jsx_runtime_1.jsx)(checkboxIconMinus_1.CheckboxIconMinus, { className: checkboxIconClasses, size: driveClasses ? "bigger" : "medium" }) :
-                            state === checkboxState_1.CheckboxState.On ? (0, jsx_runtime_1.jsx)(checkboxIconCheckmark_1.CheckboxIconCheckmark, { className: checkboxIconClasses, size: driveClasses ? "bigger" : "medium" }) : null }), children
-                        ? (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-checkbox__label-text", fullWidth ? "zen-checkbox__label-text--full-width" : ""]), children: children })
-                        : null] })] });
+    const checkbox = (0, jsx_runtime_1.jsx)(triStateCheckbox_1.TriStateCheckbox, Object.assign({ className: "zen-checkbox__input", id: intId, checked: checked, indeterminate: indeterminate, disabled: disabled }, rest));
+    const iconAndLabel = (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-checkbox__box", children: state === checkboxState_1.CheckboxState.Indeterminate ? (0, jsx_runtime_1.jsx)(checkboxIconMinus_1.CheckboxIconMinus, { className: checkboxIconClasses, size: driveClasses ? "bigger" : "medium" }) :
+                    state === checkboxState_1.CheckboxState.On ? (0, jsx_runtime_1.jsx)(checkboxIconCheckmark_1.CheckboxIconCheckmark, { className: checkboxIconClasses, size: driveClasses ? "bigger" : "medium" }) : null }), children
+                ? (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-checkbox__label-text", fullWidth ? "zen-checkbox__label-text--full-width" : ""]), children: children })
+                : null] });
+    if (wrapped) {
+        return (0, jsx_runtime_1.jsxs)("label", { className: (0, classNames_1.classNames)(["zen-checkbox", driveClasses || "", className]), title: title, "aria-label": title, children: [checkbox, (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-checkbox__label", reverse ? "zen-checkbox__label--reverse" : ""]), children: iconAndLabel })] });
+    }
+    return (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-checkbox", driveClasses || "", className]), children: [checkbox, (0, jsx_runtime_1.jsx)("label", { className: (0, classNames_1.classNames)(["zen-checkbox__label", reverse ? "zen-checkbox__label--reverse" : ""]), htmlFor: intId, title: title, "aria-label": title, children: iconAndLabel })] });
 };
 exports.Checkbox = Checkbox;

package/dist/dataFeed/dataFeed.d.ts

@@ -1,8 +1,10 @@
 import "./dataFeed.less";
-import { IEntityWithId } from "../commonHelpers/entity";
-import { FC, ForwardedRef, PropsWithChildren } from "react";
+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
@@ -13,21 +15,25 @@ interface IDataFeedOptions {
     scrollComponent?: HTMLElement;
     onFeedEnd?: () => void;
 }
-export interface IDataFeed<T> extends IDataGrid<T> {
+export interface IDataFeed<T, N = T> extends IDataGrid<T, N> {
+    feedWrappers?: TFeedWrapper<T, N>[];
     expanded: boolean;
-    actions?: IActionWithId<T> | ((e: T) => JSX.Element) | undefined;
-    actionsAsync?: IActionWithId<T> | ((e: T) => PromiseLike<JSX.Element>);
+    actions?: IActionWithId<T> | ((e: T, isNested: boolean) => JSX.Element) | undefined;
+    actionsAsync?: IActionWithId<T> | ((e: T, isNested: boolean) => PromiseLike<JSX.Element>);
     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 IEntityWithId>({ entities, columns, className, expanded, options, description, children, actions, actionsAsync, itemsPerPage, rowClassName }: IDataFeed<T>, ref: ForwardedRef<HTMLElement>) => import("react/jsx-runtime").JSX.Element;
+declare const DataFeedInner: <T extends IRowEntity<N>, N extends IEntityWithId>({ entities, columns, feedWrappers, className, expanded, options, description, children, actions, actionsAsync, 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>(props: IDataFeed<T> & {
+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 };

package/dist/dataFeed/dataFeed.js

@@ -22,7 +22,7 @@ const checkCloseToTheEnd = (feedContainerElt) => {
     return distanceToTheBottom < endOfFeedThreshold;
 };
 const FIRST_RENDERED_ROWS = 50;
-const DataFeedInner = ({ entities, columns, className, expanded, options, description, children, actions, actionsAsync, itemsPerPage = 1000, rowClassName }, ref) => {
+const DataFeedInner = ({ entities, columns, feedWrappers, className, expanded, options, description, children, actions, actionsAsync, itemsPerPage = 1000, rowClassName, expandedRows, onExpandedChange, activePage }, ref) => {
     const [pages, setPages] = (0, react_1.useState)(1);
     const data = (0, react_1.useMemo)(() => entities.slice(0, itemsPerPage * pages), [entities, itemsPerPage, pages]);
     const initialVisibleRows = (0, react_1.useMemo)(() => data.slice(0, FIRST_RENDERED_ROWS).map(r => r.id), [data]);
@@ -35,7 +35,7 @@ const DataFeedInner = ({ entities, columns, className, expanded, options, descri
         if (feedRef.current) {
             feedRef.current.scrollTop = 0;
         }
-    }, [entities, setPages]);
+    }, [activePage, setPages]);
     (0, react_1.useEffect)(() => {
         const initialRows = data.slice(0, FIRST_RENDERED_ROWS).map(r => r.id);
         setVisibleRows(new Set(initialRows));
@@ -94,11 +94,8 @@ const DataFeedInner = ({ entities, columns, className, expanded, options, descri
     }, true);
     const feedItems = (0, react_1.useMemo)(() => data.map((entity, index) => {
         const entityClassName = (0, getRowClassName_1.getRowClassName)(rowClassName, entity);
-        if (!actions && !actionsAsync) {
-            return (0, jsx_runtime_1.jsx)(dataFeedColumnsItems_1.FeedItem, { collapsedColumnsQty: collapsedColumnsQty, columnsList: columnsList, visibleColumns: visibleColumns, entity: entity, visibleRows: visibleRows, index: index, expanded: expanded, className: entityClassName }, entity.id);
-        }
-        return (0, jsx_runtime_1.jsx)(dataFeedColumnsItems_1.ActionFeedItem, { collapsedColumnsQty: collapsedColumnsQty, visibleColumns: visibleColumns, columnsList: columnsList, entity: entity, visibleRows: visibleRows, index: index, expanded: expanded, actions: actions, actionsAsync: actionsAsync, className: entityClassName }, entity.id);
-    }), [data, rowClassName, actions, actionsAsync, collapsedColumnsQty, visibleColumns, columnsList, visibleRows, expanded]);
+        return (0, jsx_runtime_1.jsx)(dataFeedColumnsItems_1.FeedItem, { collapsedColumnsQty: collapsedColumnsQty, columnsList: columnsList, feedWrappers: feedWrappers || [], visibleColumns: visibleColumns, entity: entity, visibleRows: visibleRows, index: index, expanded: expanded, className: entityClassName, actions: actions, actionsAsync: actionsAsync, isRowExpanded: expandedRows && expandedRows.indexOf(entity.id) > -1, onExpandedChange: (isExpanded) => onExpandedChange && onExpandedChange(entity.id, isExpanded) }, entity.id);
+    }), [data, rowClassName, collapsedColumnsQty, columnsList, feedWrappers, visibleColumns, visibleRows, expanded, actions, actionsAsync, expandedRows, onExpandedChange]);
     return (0, jsx_runtime_1.jsx)("div", { className: "zen-data-grid-wrapper", children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)([
                 "zen-data-grid",
                 className || ""

package/dist/dataFeed/dataFeedCell/dataFeedCell.d.ts

@@ -1,12 +1,18 @@
+import { ReactNode } from "react";
 import { IZenComponentProps } from "../../commonHelpers/zenComponent";
 import "./dataFeedCell.less";
-import { IEntityWithId } from "../../commonHelpers/entity";
-import { IListColumnStrict } from "../../dataGrid/extensions/toBasicColumn";
-export interface IDataFeedCell<T extends IEntityWithId> extends IZenComponentProps {
+import { TFeedResult } from "../../dataGrid/listColumn";
+export interface IDataFeedCell<T extends object> extends IZenComponentProps {
     limited?: boolean;
     visibleOnHover?: boolean;
     isVisible: boolean;
-    column: IListColumnStrict<T>;
+    title: string;
+    render: (title: string, entity: T, isNested: boolean) => TFeedResult;
+    renderWrappers: (value: ReactNode | undefined, entity: T) => ReactNode;
+    renderPlaceholder: ((title: string, entity: T) => [ReactNode, ReactNode]) | undefined;
+    defaultValue: string | undefined;
     entity: T;
+    isNested: boolean;
+    onClick?: () => void;
 }
-export declare const DataFeedCell: <T extends IEntityWithId>({ limited, visibleOnHover, isVisible, column, entity }: IDataFeedCell<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const DataFeedCell: <T extends object>({ limited, visibleOnHover, isVisible, title, render, renderWrappers, renderPlaceholder, defaultValue, entity, isNested }: IDataFeedCell<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/dataFeed/dataFeedCell/dataFeedCell.js

@@ -5,37 +5,29 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const classNames_1 = require("../../commonHelpers/classNames/classNames");
 const basicColumn_1 = require("../../dataGrid/columns/basicColumn");
-const renderWrappers = (column, value, entity) => column.wrappers.reduce((result, wrapper) => wrapper.render(result, entity), value);
-const FeedCell = ({ limited = false, visibleOnHover = false, isVisible, column, entity }) => {
+const FeedCell = ({ limited = false, visibleOnHover = false, isVisible, title, render, renderWrappers, renderPlaceholder, defaultValue, entity, isNested }) => {
     const [labelContent, setLabelContent] = (0, react_1.useState)("");
     const [content, setContent] = (0, react_1.useState)("");
     const placeholderRenderer = (0, react_1.useCallback)(() => {
-        const renderPlaceholder = column.meta.renderFeedPlaceholder || ((_, e) => [column.title, column.meta.renderPlaceholder ? column.meta.renderPlaceholder(e) : "..."]);
-        const [title, value] = renderPlaceholder(column.title, entity);
-        return [title, renderWrappers(column, value, entity)];
-    }, [column, entity]);
+        const [feedTitle, value] = renderPlaceholder ? renderPlaceholder(title, entity) : [title, "..."];
+        return [feedTitle, renderWrappers(value, entity)];
+    }, [entity, renderPlaceholder, renderWrappers, title]);
     const renderer = (0, react_1.useCallback)(async () => {
         let fieldValue = null;
-        const renderFeed = column.columnComponent.renderFeed
-            ? column.columnComponent.renderFeed.bind(column.columnComponent)
-            : ((title, ent) => [
-                column.columnComponent.renderHeader.call(column.columnComponent, title),
-                column.columnComponent.render.call(column.columnComponent, ent)
-            ]);
-        const [label, value] = renderFeed(column.title, entity);
+        const [label, value] = render(title, entity, isNested);
         fieldValue = value;
         if (value === undefined || value === null) {
-            fieldValue = column.meta.defaultValue;
+            fieldValue = defaultValue;
         }
         if (!(0, basicColumn_1.isPromiseLike)(fieldValue)) {
-            return [label, renderWrappers(column, fieldValue, entity)];
+            return [label, renderWrappers(fieldValue, entity)];
         }
         let postponedResult = await fieldValue;
         if (postponedResult === undefined) {
-            postponedResult = column.meta.defaultValue;
+            postponedResult = defaultValue;
         }
-        return [label, renderWrappers(column, postponedResult, entity)];
-    }, [column, entity]);
+        return [label, renderWrappers(postponedResult, entity)];
+    }, [defaultValue, entity, render, renderWrappers, title, isNested]);
     (0, react_1.useEffect)(() => {
         if (!isVisible) {
             setContent("");
@@ -50,7 +42,8 @@ const FeedCell = ({ limited = false, visibleOnHover = false, isVisible, column,
             cancelAnimationFrame(placeholderTimeout);
             setLabelContent(label);
             setContent(value);
-        }).catch(() => {
+        }).catch((e) => {
+            console.error(e);
             cancelAnimationFrame(placeholderTimeout);
             setLabelContent("");
             setContent("");

package/dist/dataFeed/dataFeedColumnsItems.d.ts

@@ -1,9 +1,12 @@
 /// <reference types="react" />
-import { IEntityWithId } from "../commonHelpers/entity";
 import { IActionWithId } from "../dataGrid/columns/actionsColumn/actionsColumn";
 import { IListColumnStrict } from "../dataGrid/extensions/toBasicColumn";
-interface IFeedItem<T extends IEntityWithId> {
-    columnsList: IListColumnStrict<T>[];
+import { IRowEntity } from "../dataGrid/row/row";
+import { TFeedWrapper } from "./dataFeed";
+import { IEntityWithId } from "../commonHelpers/entity";
+interface IFeedItem<T extends IRowEntity<N>, N extends IEntityWithId> {
+    columnsList: IListColumnStrict<T, N>[];
+    feedWrappers: TFeedWrapper<T, N>[];
     expanded: boolean;
     /**
      * @deprecated - will be removed in the next major version
@@ -15,11 +18,10 @@ interface IFeedItem<T extends IEntityWithId> {
     entity: T;
     index: number;
     className?: string;
+    isRowExpanded?: boolean;
+    onExpandedChange?: (isExpanded: boolean) => void;
+    actions?: IActionWithId<T> | ((entity: T, isNested: boolean) => JSX.Element);
+    actionsAsync?: IActionWithId<T> | ((entity: T, isNested: boolean) => PromiseLike<JSX.Element>);
 }
-interface IFeedActionItem<T extends IEntityWithId> extends IFeedItem<T> {
-    actions: IActionWithId<T> | ((entity: T) => JSX.Element) | undefined;
-    actionsAsync?: IActionWithId<T> | ((entity: T) => PromiseLike<JSX.Element>);
-}
-export declare const FeedItem: <T extends IEntityWithId>({ columnsList, expanded, collapsedColumnsQty, visibleColumns, visibleRows, entity, index, className }: IFeedItem<T>) => import("react/jsx-runtime").JSX.Element;
-export declare const ActionFeedItem: <T extends IEntityWithId>({ columnsList, expanded, collapsedColumnsQty, visibleColumns, visibleRows, entity, index, actions, actionsAsync, className }: IFeedActionItem<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const FeedItem: <T extends IRowEntity<N>, N extends IEntityWithId>({ columnsList, feedWrappers, expanded, collapsedColumnsQty, visibleColumns, visibleRows, entity, index, className, isRowExpanded, onExpandedChange, actions }: IFeedItem<T, N>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/dataFeed/dataFeedColumnsItems.js

@@ -1,37 +1,97 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ActionFeedItem = exports.FeedItem = void 0;
+exports.FeedItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const actionsButton_1 = require("../dataGrid/columns/actionsColumn/actionsButton");
 const feedItem_1 = require("./feedItem/feedItem");
 const dataFeedCell_1 = require("./dataFeedCell/dataFeedCell");
 const actionsMenu_1 = require("../table/actions/actionsMenu");
-const classNames_1 = require("../commonHelpers/classNames/classNames");
 const useVisibleColumns_1 = require("./hooks/useVisibleColumns");
-const FeedItemInner = ({ columnsList, expanded, collapsedColumnsQty, visibleColumns, visibleRows, entity, index, className = "" }) => {
+const getIconFromColumnComponent = (column, entity, isNested) => {
+    const renderIcon = ("renderIcon" in column.columnComponent) ? column.columnComponent.renderIcon.bind(column.columnComponent) : undefined;
+    if (renderIcon) {
+        return renderIcon(entity, isNested);
+    }
+    return null;
+};
+const FeedItemInner = ({ columnsList, feedWrappers, expanded, collapsedColumnsQty, visibleColumns, visibleRows, entity, index, className = "", isRowExpanded, onExpandedChange, actions }) => {
     const { mainColumns, secondaryColumns } = (0, useVisibleColumns_1.useVisibleColumns)(columnsList, expanded, { visibleColumns, collapsedColumnsQty });
     const mainColumnsMemoized = (0, react_1.useMemo)(() => mainColumns, [mainColumns]);
     const secondaryColumnsMemoized = (0, react_1.useMemo)(() => secondaryColumns, [secondaryColumns]);
     const isVisible = visibleRows.has(entity.id);
-    const mainColumnsData = (0, react_1.useMemo)(() => mainColumnsMemoized.map(column => (0, jsx_runtime_1.jsx)(dataFeedCell_1.DataFeedCell, { limited: false, visibleOnHover: false, isVisible: isVisible, column: column, entity: entity }, column.id)), [entity, isVisible, mainColumnsMemoized]);
-    const secondaryColumnsData = (0, react_1.useMemo)(() => secondaryColumnsMemoized.map(column => (0, jsx_runtime_1.jsx)(dataFeedCell_1.DataFeedCell, { limited: false, visibleOnHover: false, isVisible: isVisible, column: column, entity: entity }, column.id)), [entity, isVisible, secondaryColumnsMemoized]);
-    return (0, jsx_runtime_1.jsxs)(feedItem_1.DataFeedItem, { id: entity.id, isLast: false, index: index, isFullList: expanded, className: className, children: [(0, jsx_runtime_1.jsx)(feedItem_1.DataFeedItem.Main, { children: mainColumnsData }), secondaryColumnsMemoized.length ? (0, jsx_runtime_1.jsx)(feedItem_1.DataFeedItem.Secondary, { children: secondaryColumnsData }) : null] });
+    const renderCells = (0, react_1.useCallback)((rowEntity, nested) => {
+        const getActions = () => {
+            if (!actions) {
+                return null;
+            }
+            if (entity.isLoading) {
+                return null;
+            }
+            if (typeof actions === "function") {
+                return (0, jsx_runtime_1.jsx)(actionsMenu_1.ActionsMenu, { entity: rowEntity, isNested: !nested, render: actions });
+            }
+            return (0, jsx_runtime_1.jsx)(actionsButton_1.ActionsButton, { action: actions, entity: rowEntity });
+        };
+        const getRenderFeed = (column) => {
+            var _a;
+            const renderHeader = ((_a = column.columnComponent.renderHeader) === null || _a === void 0 ? void 0 : _a.bind(column.columnComponent)) || (() => column.title);
+            return (title, feedEntity, isNested) => {
+                if (column.columnComponent.renderFeed) {
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-argument
+                    const result = column.columnComponent.renderFeed(title, feedEntity, isNested);
+                    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition, @typescript-eslint/no-unnecessary-type-assertion
+                    if (isNested && ("renderNested" in column.columnComponent) && column.columnComponent.renderNested) {
+                        return [result[0], column.columnComponent.renderNested.call(column.columnComponent, feedEntity)];
+                    }
+                    return result;
+                }
+                // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+                const renderResult = column.columnComponent
+                    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition, @typescript-eslint/no-unnecessary-type-assertion
+                    ? isNested && ("renderNested" in column.columnComponent) && column.columnComponent.renderNested
+                        ? column.columnComponent.renderNested.call(column.columnComponent, feedEntity)
+                        : column.columnComponent.render.call(column.columnComponent, feedEntity, !nested)
+                    : (feedEntity[column.id] || undefined);
+                return [renderHeader(title), renderResult];
+            };
+        };
+        const getRenderWrappers = (column) => (value, ent) => column.wrappers.reduce((result, wrapper) => wrapper.render(result, ent, false), value);
+        const getFeedPlaceholder = (column) => {
+            if (column.meta.renderFeedPlaceholder) {
+                return column.meta.renderFeedPlaceholder;
+            }
+            return (title, ent) => [title, column.meta.renderPlaceholder ? column.meta.renderPlaceholder(ent) : "..."];
+        };
+        const getRenderFeedWrappers = (wrappers, ent, isNested) => 
+        // eslint-disable-next-line react/display-name
+        (primaryData, secondaryData) => {
+            const feedResult = wrappers.reduce((result, wrapper) => wrapper(result[0], result[1], ent, isNested), [primaryData, secondaryData]);
+            return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [feedResult[0], feedResult[1]] });
+        };
+        const mainColumnsData = mainColumnsMemoized.map(column => {
+            const renderFeed = getRenderFeed(column);
+            const renderWrappers = getRenderWrappers(column);
+            const feedPlaceholder = getFeedPlaceholder(column);
+            return (0, jsx_runtime_1.jsx)(dataFeedCell_1.DataFeedCell, { limited: false, visibleOnHover: false, isVisible: isVisible, title: column.title, render: renderFeed, renderWrappers: renderWrappers, renderPlaceholder: feedPlaceholder, defaultValue: column.meta.defaultValue, entity: rowEntity, isNested: !nested }, `${entity.id}-${column.id}`);
+        });
+        const secondaryColumnsData = secondaryColumnsMemoized.map(column => {
+            const renderFeed = getRenderFeed(column);
+            const renderWrappers = getRenderWrappers(column);
+            const feedPlaceholder = getFeedPlaceholder(column);
+            return (0, jsx_runtime_1.jsx)(dataFeedCell_1.DataFeedCell, { limited: false, visibleOnHover: false, isVisible: isVisible, title: column.title, render: renderFeed, renderWrappers: renderWrappers, renderPlaceholder: feedPlaceholder, defaultValue: column.meta.defaultValue, entity: rowEntity, isNested: !nested }, `${entity.id}-${column.id}`);
+        });
+        const onItemClick = nested && onExpandedChange
+            ? () => onExpandedChange(!isRowExpanded)
+            : undefined;
+        const icon = getIconFromColumnComponent(mainColumnsMemoized[0], rowEntity, !nested);
+        const actionsNode = getActions();
+        const renderFeedWrappers = getRenderFeedWrappers(feedWrappers, rowEntity, !nested);
+        const key = !nested ? `nested_${rowEntity.id}` : rowEntity.id;
+        return (0, jsx_runtime_1.jsx)(feedItem_1.DataFeedItem, { id: entity.id, index: index, onClick: onItemClick, className: className, icon: icon, identifier: mainColumnsData[0], primaryData: mainColumnsData.slice(1), secondaryData: secondaryColumnsData, actions: actionsNode, nestedData: nested && nested.length ? nested : undefined, renderFeedWrappers: renderFeedWrappers }, key);
+    }, [className, feedWrappers, index, isRowExpanded, isVisible, mainColumnsMemoized, onExpandedChange, secondaryColumnsMemoized, actions, entity]);
+    const nestedCells = (0, react_1.useMemo)(() => (entity.children && isRowExpanded ? entity.children : []).map(nestedEntity => renderCells(nestedEntity)), [entity.children, isRowExpanded, renderCells]);
+    const cells = (0, react_1.useMemo)(() => renderCells(entity, nestedCells), [entity, nestedCells, renderCells]);
+    return cells;
 };
 exports.FeedItem = (0, react_1.memo)(FeedItemInner);
-const ActionFeedItemInner = ({ columnsList, expanded, collapsedColumnsQty, visibleColumns, visibleRows, entity, index, actions, actionsAsync, className }) => {
-    const actionsComp = (0, react_1.useMemo)(() => {
-        if (entity.isLoading) {
-            return null;
-        }
-        if (typeof actions === "function") {
-            return (0, jsx_runtime_1.jsx)(actionsMenu_1.ActionsMenu, { entity: entity, render: actions });
-        }
-        if (actionsAsync && typeof actionsAsync === "function") {
-            return (0, jsx_runtime_1.jsx)(actionsMenu_1.ActionsMenu, { entity: entity, renderAsync: actionsAsync });
-        }
-        return actions ? (0, jsx_runtime_1.jsx)(actionsButton_1.ActionsButton, { action: actions, entity: entity }) : null;
-    }, [actions, actionsAsync, entity]);
-    return (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-data-feed__item-container", className || ""]), children: [(0, jsx_runtime_1.jsx)(exports.FeedItem, { collapsedColumnsQty: collapsedColumnsQty, visibleColumns: visibleColumns, columnsList: columnsList, entity: entity, visibleRows: visibleRows, index: index, expanded: expanded, className: "zen-data-feed__item--no-shadow" }, entity.id), (0, jsx_runtime_1.jsx)("div", { className: "zen-data-feed__action-container", children: actionsComp })] }, entity.id);
-};
-exports.ActionFeedItem = (0, react_1.memo)(ActionFeedItemInner);

package/dist/dataFeed/dataFeedHeader/dataFeedHeader.d.ts

@@ -3,7 +3,7 @@ import { IZenComponentProps } from "./../../commonHelpers/zenComponent";
 import { IEntityWithId } from "../../commonHelpers/entity";
 import { ISortableColumn } from "../../dataGrid/withSortableColumns/columns/sortableColumn";
 import { ISortableColumnSettings } from "../../dataGrid/withSortableColumns/sortableColumnsStorage";
-export interface IDataFeedHeader<T> extends IZenComponentProps {
+export interface IDataFeedHeader<T extends IEntityWithId> extends IZenComponentProps {
     column: ISortableColumn<T>;
     sortState?: ISortableColumnSettings;
     onSortChange: (newSortSettings: ISortableColumnSettings) => void;

package/dist/dataFeed/feedItem/feedItem.d.ts

@@ -1,14 +1,16 @@
 import "./feedItem.less";
-import { FC, ReactNode } from "react";
-import { IZenComponentProps, IZenIdComponentProps } from "../../commonHelpers/zenComponent";
-export interface IDataFeedItemProps extends IZenIdComponentProps {
+import { ReactNode } from "react";
+import { IZenIdComponentProps } from "../../commonHelpers/zenComponent";
+export interface IDataFeedItem extends IZenIdComponentProps {
     index: number;
-    isFullList: boolean;
-    isLast: boolean;
+    checkbox?: ReactNode;
+    icon?: ReactNode;
+    identifier?: ReactNode;
+    primaryData: ReactNode;
+    secondaryData?: ReactNode;
+    actions?: ReactNode;
+    nestedData?: ReactNode;
+    renderFeedWrappers: (primaryData: ReactNode, secondaryData: ReactNode) => ReactNode;
+    onClick?: () => void;
 }
-export interface IDataFeedItem extends FC<IDataFeedItemProps> {
-    Main: (props: IZenComponentProps) => ReactNode;
-    Secondary: (props: IZenComponentProps) => ReactNode;
-}
-declare const FeedItem: IDataFeedItem;
-export { FeedItem as DataFeedItem };
+export declare const DataFeedItem: ({ id, index, checkbox, icon, identifier, className, onClick, primaryData, secondaryData, actions, nestedData, renderFeedWrappers }: IDataFeedItem) => import("react/jsx-runtime").JSX.Element;

package/dist/dataFeed/feedItem/feedItem.js

@@ -2,22 +2,22 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DataFeedItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const classNames_1 = require("../../commonHelpers/classNames/classNames");
-const FeedItem = ({ id, index, isFullList, children, className }) => (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-data-feed__item", className || ""]), role: "article", "aria-setsize": -1, "data-row-id": id, "aria-posinset": index + 1, "data-full-list": isFullList, children: children }, id);
-exports.DataFeedItem = FeedItem;
-const DataFeedSection = ({ isMain, className = "", children }) => {
-    const classes = (0, classNames_1.classNames)([
-        className,
-        "zen-feed-item",
-        isMain ? "zen-feed-item--main" : ""
-    ]);
-    return (0, jsx_runtime_1.jsx)("div", { className: classes, children: children });
-};
-// eslint-disable-next-line @typescript-eslint/naming-convention
-FeedItem.Main = function FeedItemSection(props) {
-    return (0, jsx_runtime_1.jsx)(DataFeedSection, Object.assign({ isMain: true }, props));
-};
-// eslint-disable-next-line @typescript-eslint/naming-convention
-FeedItem.Secondary = function FeedItemSection(props) {
-    return (0, jsx_runtime_1.jsx)(DataFeedSection, Object.assign({}, props));
+const isActiveElement_1 = require("../../list/utils/isActiveElement");
+const DataFeedItem = ({ id, index, checkbox, icon, identifier, className, onClick, primaryData, secondaryData, actions, nestedData, renderFeedWrappers }) => {
+    const onClickHandler = (0, react_1.useCallback)((e) => {
+        if ((0, isActiveElement_1.isActiveElement)(e.target)) {
+            return;
+        }
+        const target = e.target;
+        if (target.className && typeof target.className === "string") {
+            if (target.className.indexOf("zen-shield") > -1) {
+                return;
+            }
+        }
+        onClick && onClick();
+    }, [onClick]);
+    return (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-data-feed__item", "zen-feed-item", className || ""]), role: "article", "aria-setsize": -1, "data-row-id": id, "aria-posinset": index + 1, children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-feed-item__main-row", onClick: onClickHandler, children: renderFeedWrappers((0, jsx_runtime_1.jsxs)("div", { className: "zen-feed-item__main", children: [checkbox ? (0, jsx_runtime_1.jsx)("div", { className: "zen-feed-item__checkbox", children: checkbox }) : null, icon ? (0, jsx_runtime_1.jsx)("div", { className: "zen-feed-item__icon", children: icon }) : null, (0, jsx_runtime_1.jsxs)("div", { className: "zen-feed-item__main-data", children: [identifier ? (0, jsx_runtime_1.jsx)("div", { className: "zen-feed-item__identifier", children: identifier }) : null, actions ? (0, jsx_runtime_1.jsx)("div", { className: "zen-feed-item__actions", children: actions }) : null] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "zen-feed-item__secondary-data", children: [icon ? (0, jsx_runtime_1.jsx)("div", { className: "zen-feed-item__icon-placeholder" }) : null, (0, jsx_runtime_1.jsxs)("div", { className: "zen-feed-item__values", children: [primaryData, secondaryData] })] })) }), nestedData ? (0, jsx_runtime_1.jsx)("div", { className: "zen-feed-item__nested", children: nestedData }) : null] }, id);
 };
+exports.DataFeedItem = DataFeedItem;

package/dist/dataFeed/hooks/useVisibleColumns.d.ts

@@ -1,10 +1,12 @@
+import { IEntityWithId } from "../../commonHelpers/entity";
 import { IListColumnStrict } from "../../dataGrid/extensions/toBasicColumn";
+import { IRowEntity } from "../../dataGrid/row/row";
 interface IUseVisibleColumnsOptions {
     visibleColumns?: number;
     collapsedColumnsQty?: number;
 }
-export declare const useVisibleColumns: <T>(columnsList: IListColumnStrict<T>[], expanded: boolean, options: IUseVisibleColumnsOptions) => {
-    mainColumns: IListColumnStrict<T>[];
-    secondaryColumns: IListColumnStrict<T>[];
+export declare const useVisibleColumns: <T extends IRowEntity<N>, N extends IEntityWithId>(columnsList: IListColumnStrict<T, N>[], expanded: boolean, options: IUseVisibleColumnsOptions) => {
+    mainColumns: IListColumnStrict<T, N>[];
+    secondaryColumns: IListColumnStrict<T, N>[];
 };
 export {};

package/dist/dataGrid/cell/cell.d.ts

@@ -1,14 +1,19 @@
+import { ReactNode } from "react";
 import { IZenComponentProps } from "../../commonHelpers/zenComponent";
-import { IListColumnStrict } from "../extensions/toBasicColumn";
 import { IEntityWithId } from "../../commonHelpers/entity";
+import { TRenderResult } from "../listColumn";
 export interface IDataGridCell<T extends IEntityWithId> extends IZenComponentProps {
     index: number;
     limited: boolean;
     visibleOnHover: boolean;
     isVisible: boolean;
-    column: IListColumnStrict<T>;
+    render: (entity: T) => TRenderResult;
+    renderWrappers: (value: ReactNode | undefined, entity: T) => ReactNode;
+    renderPlaceholder: ((entity: T) => ReactNode | undefined) | undefined;
+    defaultValue: string | undefined;
     entity: T;
     width?: number;
     colspan?: number;
+    onClick?: () => void;
 }
-export declare const DataGridCell: <T extends IEntityWithId>({ index, limited, visibleOnHover, isVisible, width, column, entity, colspan }: IDataGridCell<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const DataGridCell: <T extends IEntityWithId>({ index, limited, visibleOnHover, isVisible, width, render, renderWrappers, renderPlaceholder, defaultValue, entity, colspan, className, onClick }: IDataGridCell<T>) => import("react/jsx-runtime").JSX.Element;