@geotab/zenith 2.0.0 → 3.0.0-beta.1

package/esm/dataGrid/withLoading/withLoading.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, useCallback, useMemo, useEffect, useState } from "react";
+import { useCallback, useMemo, useEffect, useState } from "react";
 import { useFetch } from "../../commonHelpers/hooks/useFetch";
 import { generateId } from "../../commonHelpers/generateId";
 import { LoadingCell } from "./components/loadingRowCell";
@@ -25,35 +25,37 @@ const getEntitiesLoadingColumn = (column) => column.loadingEntitiesColumnCompone
 // T - type of entity
 // P - props of wrapped component
 // eslint-disable-next-line @typescript-eslint/naming-convention
-export const withLoading = (DataGridComponent) => forwardRef(
-// eslint-disable-next-line @typescript-eslint/naming-convention
-function InnerWithLoadingList(props, ref) {
-    const { entitiesPromise, loadingRows, columns, options } = props;
-    const [data, setData] = useState([]);
-    const state = useFetch({}, entitiesPromise);
-    const sampleEntity = useMemo(() => columns.map((column) => ({ [column.id]: column.title })).reduce((acc, el) => (Object.assign(Object.assign({}, acc), el))), [columns]);
-    const generateLoadingEntities = useCallback(() => (new Array(loadingRows || DEFAULT_LOADING_ROWS).fill(undefined)).map(() => (Object.assign(Object.assign({}, sampleEntity), { isLoading: true, id: generateId() }))), [loadingRows, sampleEntity]);
-    useEffect(() => {
-        if (state.data) {
-            setData(prevData => {
-                const newData = state.data || [];
-                return (options === null || options === void 0 ? void 0 : options.addToEnd) ? [...prevData, ...newData] : newData;
-            });
-        }
-    }, [state.data, options === null || options === void 0 ? void 0 : options.addToEnd]);
-    const selectMode = useMemo(() => {
-        if (state.isLoading) {
-            return false;
-        }
-        return props.selectMode;
-    }, [state.isLoading, props.selectMode]);
-    return _jsx(DataGridComponent, Object.assign({}, props, { selectMode: selectMode, className: classNames([
-            props.className || "",
-            state.isLoading ? "zen-data-grid--loading" : ""
-        ]), entities: (state.isLoading)
-            ? (options === null || options === void 0 ? void 0 : options.addToEnd) ? [...data, ...generateLoadingEntities()] : generateLoadingEntities()
-            : data, columns: columns.map(column => (Object.assign(Object.assign({}, column), { meta: Object.assign({ renderPlaceholder: (entity) => _jsx(LoadingCell, { children: entity[column.id] }), renderFeedPlaceholder: (entity) => [
-                    _jsx(LoadingCell, { children: column.title }, `${column.id}_label`),
-                    _jsx(LoadingCell, { children: entity[column.id] }, `${column.id}_value`)
-                ] }, column.meta), columnComponent: state.isLoading ? getEntitiesLoadingColumn(column) : column.columnComponent || defaultColumnComponent(column.id) }))), ref: ref }), "grid");
-});
+export const withLoading = (DataGridComponent) => {
+    const WithLoadingInner = (props) => {
+        const { entitiesPromise, loadingRows, columns, options } = props;
+        const [data, setData] = useState([]);
+        const state = useFetch({}, entitiesPromise);
+        const sampleEntity = useMemo(() => columns.map((column) => ({ [column.id]: column.title })).reduce((acc, el) => (Object.assign(Object.assign({}, acc), el))), [columns]);
+        const generateLoadingEntities = useCallback(() => (new Array(loadingRows || DEFAULT_LOADING_ROWS).fill(undefined)).map(() => (Object.assign(Object.assign({}, sampleEntity), { isLoading: true, id: generateId() }))), [loadingRows, sampleEntity]);
+        useEffect(() => {
+            if (state.data) {
+                setData(prevData => {
+                    const newData = state.data || [];
+                    return (options === null || options === void 0 ? void 0 : options.addToEnd) ? [...prevData, ...newData] : newData;
+                });
+            }
+        }, [state.data, options === null || options === void 0 ? void 0 : options.addToEnd]);
+        const selectMode = useMemo(() => {
+            if (state.isLoading) {
+                return false;
+            }
+            return props.selectMode;
+        }, [state.isLoading, props.selectMode]);
+        return _jsx(DataGridComponent, Object.assign({}, props, { selectMode: selectMode, className: classNames([
+                props.className || "",
+                state.isLoading ? "zen-data-grid--loading" : ""
+            ]), entities: (state.isLoading)
+                ? (options === null || options === void 0 ? void 0 : options.addToEnd) ? [...data, ...generateLoadingEntities()] : generateLoadingEntities()
+                : data, columns: columns.map(column => (Object.assign(Object.assign({}, column), { meta: Object.assign({ renderPlaceholder: (entity) => _jsx(LoadingCell, { children: entity[column.id] }), renderFeedPlaceholder: (entity) => [
+                        _jsx(LoadingCell, { children: column.title }, `${column.id}_label`),
+                        _jsx(LoadingCell, { children: entity[column.id] }, `${column.id}_value`)
+                    ] }, column.meta), columnComponent: state.isLoading ? getEntitiesLoadingColumn(column) : column.columnComponent || defaultColumnComponent(column.id) }))), ref: props.ref }), "grid");
+    };
+    WithLoadingInner.displayName = `withLoading(${DataGridComponent.displayName || DataGridComponent.name})`;
+    return WithLoadingInner;
+};

package/esm/dataGrid/withSelectableRows/components/bulkActions/bulkActionButton/bulkActionButton.d.ts

@@ -1,7 +1,8 @@
-/// <reference types="react" />
 import { IBulkActionCommon } from "../bulkAction";
+import { RefObject } from "react";
 export interface IBulkActionButton extends IBulkActionCommon {
     clickHandler?: () => void;
     onClick?: () => void;
+    ref?: RefObject<HTMLAnchorElement | null>;
 }
-export declare const BulkActionButton: import("react").ForwardRefExoticComponent<IBulkActionButton & import("react").RefAttributes<HTMLAnchorElement>>;
+export declare const BulkActionButton: ({ title, icon, clickHandler, onClick, disabled, type, ref }: IBulkActionButton) => import("react/jsx-runtime").JSX.Element;

package/esm/dataGrid/withSelectableRows/components/bulkActions/bulkActionButton/bulkActionButton.js

@@ -1,10 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import { ButtonIconPosition, TextIconButton } from "../../../../../textIconButton/textIconButton";
 import { SvgIconSize } from "../../../../../svgIcon/svgIconSize";
 import { useMobile } from "../../../../../commonHelpers/hooks/useMobile";
-export const BulkActionButton = forwardRef(function inner({ title, icon, clickHandler, onClick, disabled, type }, ref) {
+export const BulkActionButton = ({ title, icon, clickHandler, onClick, disabled, type, ref }) => {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const isMobile = useMobile();
     return _jsx(TextIconButton, { ref: ref, className: "zen-bulk-actions__action-button", icon: icon, iconPosition: ButtonIconPosition.Start, iconSize: SvgIconSize.Large, type: type || (isMobile ? "tertiary-black" : "secondary"), onClick: onClick || clickHandler, disabled: disabled, "aria-label": title, title: isMobile ? title : undefined, children: !isMobile ? _jsx("span", { className: "bulk-actions__action-button-title", children: title }) : null });
-});
+};

package/esm/dataGrid/withSelectableRows/components/bulkActions/bulkActionLink/bulkActionLink.d.ts

@@ -1,6 +1,7 @@
-/// <reference types="react" />
 import { IBulkActionCommon } from "../bulkAction";
+import { RefObject } from "react";
 export interface IBulkActionLink extends IBulkActionCommon {
     link: string;
+    ref?: RefObject<HTMLAnchorElement | null>;
 }
-export declare const BulkActionLink: import("react").ForwardRefExoticComponent<IBulkActionLink & import("react").RefAttributes<HTMLAnchorElement>>;
+export declare const BulkActionLink: ({ title, icon, link, disabled, type, ref }: IBulkActionLink) => import("react/jsx-runtime").JSX.Element;

package/esm/dataGrid/withSelectableRows/components/bulkActions/bulkActionLink/bulkActionLink.js

@@ -1,10 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import { SvgIconSize } from "../../../../../svgIcon/svgIconSize";
 import { ButtonIconPosition, TextIconButton } from "../../../../../textIconButton/textIconButton";
 import { useMobile } from "../../../../../commonHelpers/hooks/useMobile";
-export const BulkActionLink = forwardRef(function inner({ title, icon, link, disabled, type }, ref) {
+export const BulkActionLink = ({ title, icon, link, disabled, type, ref }) => {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const isMobile = useMobile();
     return _jsx(TextIconButton, { ref: ref, className: "zen-bulk-actions__action-button", icon: icon, iconPosition: ButtonIconPosition.Start, iconSize: SvgIconSize.Large, type: type || (isMobile ? "tertiary-black" : "secondary"), link: link, disabled: disabled, "aria-label": title, title: isMobile ? title : undefined, children: !isMobile ? _jsx("span", { className: "bulk-actions__action-button-title", children: title }) : null });
-});
+};

package/esm/dataGrid/withSelectableRows/components/bulkActions/bulkActions.d.ts

@@ -1,6 +1,5 @@
 import "./bulkActions.less";
 import { IZenComponentProps } from "../../../../commonHelpers/zenComponent";
-import { IZenTranslatableComponent } from "../../../../commonHelpers/translatable";
 import { ReactElement, ReactNode } from "react";
 import { IBulkActionLink } from "./bulkActionLink/bulkActionLink";
 import { IBulkActionButton } from "./bulkActionButton/bulkActionButton";
@@ -14,15 +13,15 @@ export interface IBulkActionsProps extends IZenComponentProps {
     gridType?: DeviceType;
     children?: ReactElement<TBulkAction> | null | (ReactElement<TBulkAction> | null)[];
     turnOffSelectAll?: boolean;
-    /**
-    * @deprecated
-    * @param translate - will be removed in the next major release
-    */
-    translate?: (s: string) => string;
 }
-export interface IBulkActions extends IZenTranslatableComponent<IBulkActionsProps> {
+export interface IBulkActions extends IBulkActionsProps {
     ActionLink: (props: IBulkActionLink) => ReactNode;
     ActionButton: (props: IBulkActionButton) => ReactNode;
 }
-export declare const BulkActions: IBulkActions;
+export declare const BulkActions: {
+    ({ selected, allSelected, className, onClearSelection, onSelectAll, gridType, children, turnOffSelectAll }: IBulkActionsProps): import("react/jsx-runtime").JSX.Element;
+    ActionLink: ({ title, icon, link, disabled, type, ref }: IBulkActionLink) => import("react/jsx-runtime").JSX.Element;
+    ActionButton: ({ title, icon, clickHandler, onClick, disabled, type, ref }: IBulkActionButton) => import("react/jsx-runtime").JSX.Element;
+    translations: string[];
+};
 export {};

package/esm/dataGrid/withSelectableRows/components/bulkActions/bulkActions.js

@@ -30,7 +30,12 @@ export const BulkActions = ({ selected, allSelected, className, onClearSelection
                 : null, _jsxs("div", { className: "zen-bulk-actions__action-button-holder", ref: buttonHolder, children: [Children.map(visibleElements, element => cloneElement(element, {
                         disabled: selected > 0 || allSelected ? element.props.disabled : true
                     })), nonFittingElements.length > 0
-                        ? _jsx(Menu, { title: translate("More"), trigger: _jsx(TextIconButton, { ref: moreButtonRef, className: "zen-bulk-actions__action-button zen-bulk-actions__action-button-more", icon: IconDotVertical, iconPosition: ButtonIconPosition.Start, iconSize: "large", type: isMobile ? "tertiary-black" : "secondary", title: translate("More"), "aria-label": translate("More") }), children: nonFittingElements.filter(el => el.props).map(child => _jsx(Menu.Item, { id: child.props.id, name: child.props.title, icon: child.props.icon, disabled: child.props.disabled, onClick: child.props.clickHandler, link: child.props.link }, child.props.id)) })
+                        ? _jsx(Menu, { title: translate("More"), trigger: _jsx(TextIconButton, { ref: moreButtonRef, className: "zen-bulk-actions__action-button zen-bulk-actions__action-button-more", icon: IconDotVertical, iconPosition: ButtonIconPosition.Start, iconSize: "large", type: isMobile ? "tertiary-black" : "secondary", title: translate("More"), "aria-label": translate("More") }), children: nonFittingElements.map(child => {
+                                const props = child.props;
+                                const clickHandler = "clickHandler" in props ? props.clickHandler : undefined;
+                                const link = "link" in props ? props.link : undefined;
+                                return _jsx(Menu.Item, { id: props.id || "", name: props.title, icon: props.icon, disabled: props.disabled, onClick: clickHandler, link: link }, props.id);
+                            }) })
                         : null, _jsx("div", { className: "zen-bulk-actions__hidden-elements", ref: hiddenContainerRef, children: childrenArray })] })] });
 };
 BulkActions.ActionLink = BulkActionLink;

package/esm/dataGrid/withSelectableRows/withLimitedSelectableRows.d.ts

@@ -1,4 +1,4 @@
-import { ComponentType } from "react";
+import { ComponentType, RefObject } from "react";
 import { IDataGrid } from "../dataGrid";
 import { IEntityWithId } from "../../commonHelpers/entity";
 import { ISelectableRowsList, ISelectableRowsListOptions } from "./withSelectableRows";
@@ -7,8 +7,12 @@ export interface ILimitedSelectableRowsListOptions<T extends IEntityWithId> exte
 }
 export interface ILimitedSelectableRowsList<T extends IEntityWithId> extends ISelectableRowsList<T> {
     options: ILimitedSelectableRowsListOptions<T>;
+    ref?: RefObject<HTMLElement | null>;
 }
 /**
  * @deprecated Please use withSelectableRows with options checkboxVisible/checkboxDisabled instead
  */
-export declare const withLimitedSelectableRows: <T extends IEntityWithId, P extends IDataGrid<T, T>>(DataGridComponent: ComponentType<P>) => import("react").ForwardRefExoticComponent<import("react").PropsWithoutRef<ILimitedSelectableRowsList<T> & P> & import("react").RefAttributes<HTMLElement>>;
+export declare const withLimitedSelectableRows: <T extends IEntityWithId, P extends IDataGrid<T, T>>(DataGridComponent: ComponentType<P>) => {
+    (props: ILimitedSelectableRowsList<T> & P): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/esm/dataGrid/withSelectableRows/withLimitedSelectableRows.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, useCallback, useEffect, useMemo } from "react";
+import { useCallback, useEffect, useMemo } from "react";
 import { getSelections } from "./withSelectableRows";
 import { LimitedCheckboxColumnWrapper } from "../columns/checkboxColumn/limitedCheckboxColumnWrapper";
 // T - type of entity
@@ -8,40 +8,42 @@ import { LimitedCheckboxColumnWrapper } from "../columns/checkboxColumn/limitedC
  * @deprecated Please use withSelectableRows with options checkboxVisible/checkboxDisabled instead
  */
 // eslint-disable-next-line @typescript-eslint/naming-convention
-export const withLimitedSelectableRows = (DataGridComponent) => forwardRef(
-// eslint-disable-next-line @typescript-eslint/naming-convention
-function InnerList(props, ref) {
-    const { selection, columns, options, onSelect, entities } = props;
-    const allSelected = !!(selection === null || selection === void 0 ? void 0 : selection.allSelected);
-    const selections = getSelections(allSelected ?
-        { selected: entities.slice(0, options.limit).map(el => el.id), allSelected: false }
-        : (selection ? { selected: selection.selected.slice(0, options.limit), allSelected: false } : undefined));
-    const wrapper = useMemo(() => new LimitedCheckboxColumnWrapper(selections, { createTitle: options.createTitle, headerTitle: options.headerTitle, limit: props.options.limit }, { current: null }), [selections, options.createTitle, options.headerTitle, props.options.limit]);
-    const onSelectListener = useCallback(([id, checked]) => {
-        if (checked) {
-            selections.add(id);
-        }
-        else {
-            selections.delete(id);
-        }
-        onSelect({
-            selected: [...selections],
-            allSelected: false
-        });
-    }, [selections, onSelect]);
-    useEffect(() => {
-        wrapper.detach();
-        wrapper.attach("change", onSelectListener);
-        return () => {
+export const withLimitedSelectableRows = (DataGridComponent) => {
+    const WithLimitedSelectableRowsInner = (props) => {
+        const { selection, columns, options, onSelect, entities } = props;
+        const allSelected = !!(selection === null || selection === void 0 ? void 0 : selection.allSelected);
+        const selections = getSelections(allSelected ?
+            { selected: entities.slice(0, options.limit).map(el => el.id), allSelected: false }
+            : (selection ? { selected: selection.selected.slice(0, options.limit), allSelected: false } : undefined));
+        const wrapper = useMemo(() => new LimitedCheckboxColumnWrapper(selections, { createTitle: options.createTitle, headerTitle: options.headerTitle, limit: props.options.limit }, { current: null }), [selections, options.createTitle, options.headerTitle, props.options.limit]);
+        const onSelectListener = useCallback(([id, checked]) => {
+            if (checked) {
+                selections.add(id);
+            }
+            else {
+                selections.delete(id);
+            }
+            onSelect({
+                selected: [...selections],
+                allSelected: false
+            });
+        }, [selections, onSelect]);
+        useEffect(() => {
             wrapper.detach();
-        };
-    }, [wrapper, onSelectListener]);
-    const listColumns = useMemo(() => {
-        const newColumns = columns.map(c => (Object.assign({}, c)));
-        if (newColumns.length > 0) {
-            newColumns[0].wrappers = [...(newColumns[0].wrappers || []), wrapper];
-        }
-        return newColumns;
-    }, [columns, wrapper]);
-    return _jsx(DataGridComponent, Object.assign({}, props, { columns: listColumns, ref: ref }));
-});
+            wrapper.attach("change", onSelectListener);
+            return () => {
+                wrapper.detach();
+            };
+        }, [wrapper, onSelectListener]);
+        const listColumns = useMemo(() => {
+            const newColumns = columns.map(c => (Object.assign({}, c)));
+            if (newColumns.length > 0) {
+                newColumns[0].wrappers = [...(newColumns[0].wrappers || []), wrapper];
+            }
+            return newColumns;
+        }, [columns, wrapper]);
+        return _jsx(DataGridComponent, Object.assign({}, props, { columns: listColumns, ref: props.ref }));
+    };
+    WithLimitedSelectableRowsInner.displayName = `withLimitedSelectableRows(${DataGridComponent.displayName || DataGridComponent.name})`;
+    return WithLimitedSelectableRowsInner;
+};

package/esm/dataGrid/withSelectableRows/withSelectableRows.d.ts

@@ -1,7 +1,6 @@
 import { ComponentType, RefObject } from "react";
 import { IDataGrid } from "../dataGrid";
 import { IEntityWithId } from "../../commonHelpers/entity";
-import { ITranslatable } from "../../commonHelpers/translatable";
 import { IListColumn } from "../listColumn";
 interface ICheckboxSettings<T> {
     /**
@@ -24,17 +23,19 @@ export interface ISelectableRowsListSelections {
     selected: string[];
     turnOffSelectAll?: boolean;
 }
-export interface ISelectableRowsList<T, N = T> extends ITranslatable {
+export interface ISelectableRowsList<T, N = T> {
     selectMode: boolean;
     selection: ISelectableRowsListSelections | undefined;
-    popupTriggerRef?: RefObject<HTMLElement>;
+    popupTriggerRef?: RefObject<HTMLElement | null>;
     columns: IListColumn<T, N>[];
     options: ISelectableRowsListOptions<T>;
     onSelect: (selection: ISelectableRowsListSelections) => void;
+    ref?: RefObject<HTMLElement | null>;
 }
 export declare const getSelections: (selections: ISelectableRowsListSelections | undefined) => Set<string>;
-export declare const withSelectableRows: {
-    <T extends IEntityWithId, P extends IDataGrid<T, T>>(DataGridComponent: ComponentType<P>): import("react").ForwardRefExoticComponent<import("react").PropsWithoutRef<ISelectableRowsList<T, T> & P> & import("react").RefAttributes<HTMLElement>>;
+export declare const withSelectableRows: <T extends IEntityWithId, P extends IDataGrid<T, T>>(DataGridComponent: ComponentType<P>) => {
+    (props: ISelectableRowsList<T, T> & P): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
     translations: string[];
 };
 export {};