@geotab/zenith 3.3.0 → 3.4.0-beta.0

package/esm/index.d.ts

@@ -64,12 +64,13 @@ export { type IDateInput, type TDateInput, DateInput } from "./dateInput/dateInp
 export { cutSeconds } from "./dateInputRaw/utils/cutSeconds";
 export { getLabel } from "./dateInputRaw/utils/getLabel";
 export { type IDateRange, type IDateRangeUnsetValue, type TDateRange, DateRange } from "./dateRange/dateRange";
-export { type IDateRangeValue, type IDateRangeValueOptionalLabel, type IDateRangeOption, type TDateRangeOption, GET_TODAY_OPTION, GET_YESTERDAY_OPTION, GET_THIS_WEEK_OPTION, GET_NEXT_WEEK_OPTION, GET_LAST_WEEK_OPTION, GET_THIS_MONTH_OPTION, GET_NEXT_MONTH_OPTION, GET_LAST_MONTH_OPTION, GET_LAST_SEVEN_DAYS_OPTION, GET_LAST_THIRTY_DAYS_OPTION, GET_LAST_TWELVE_MONTHS_OPTION, GET_LAST_THREE_MONTH_OPTION, GET_LAST_QUARTER_OPTION, GET_THIS_QUARTER_OPTION, GET_LAST_YEAR_OPTION, GET_THIS_YEAR_OPTION, GET_DEFAULT_DATE_OPTIONS } from "./dateRangeRaw/utils/dateRangeUtils";
+export { type IDateRangeValue, type IDateRangeValueOptionalLabel, type IDateRangeOption, type TDateRangeOption, GET_TODAY_OPTION, GET_YESTERDAY_OPTION, GET_THIS_WEEK_OPTION, GET_NEXT_WEEK_OPTION, GET_LAST_WEEK_OPTION, GET_THIS_MONTH_OPTION, GET_NEXT_MONTH_OPTION, GET_LAST_MONTH_OPTION, GET_LAST_SEVEN_DAYS_OPTION, GET_LAST_THIRTY_DAYS_OPTION, GET_YEAR_TO_DATE_OPTION, GET_LAST_TWELVE_MONTHS_OPTION, GET_LAST_THREE_MONTH_OPTION, GET_LAST_QUARTER_OPTION, GET_THIS_QUARTER_OPTION, GET_LAST_YEAR_OPTION, GET_THIS_YEAR_OPTION, GET_DEFAULT_DATE_OPTIONS } from "./dateRangeRaw/utils/dateRangeUtils";
 export { type IDialog, Dialog } from "./dialog/dialog";
 export { isElementInsideContainer, isFocusable, getFocusableStartInd } from "./dialog/dialogHelpers";
 export { type IDivider, Divider } from "./divider/divider";
 export { LIST_LIMIT, type ISelectionItem, type IDropdownItem, type IDropdownValueFullSelection, type IDropdownWithCheckboxValue, type IDropdownWithCheckboxSelected, type IDropdownValueFullSelectionWithCheckbox, type IDropdownFullSelectedValue, type IDropdownFullSelectedValueWithCheckbox, type IDropdownFullSelection, type IDropdown, type IDropdownWithCheckbox, type IDropdownFullSelectionWithCheckbox, type IFetchDropdownState, type TDropdown, Dropdown } from "./dropdown/dropdown";
 export { useDropdownState } from "./dropdown/useDropdownState";
+export { type IEmptyState, EmptyState } from "./emptyState/emptyState";
 export { type IFavoriteButton, FavoriteButton } from "./favoriteButton/favoriteButton";
 export { FeedbackProvider } from "./feedbackProvider/feedbackProvider";
 export { type TFilterButton, type IFilterButton, FilterButton } from "./filterButton/filterButton";
@@ -96,9 +97,10 @@ export { TriggerContext, TriggerContextProvider } from "./filtersBar/filtersBarP
 export { type IFooterButtons, FooterButtons } from "./footerButtons/footerButtons";
 export { type IFormFieldBannerProps, FormFieldBanner } from "./formField/components/formFieldBanner";
 export { FormFieldSkeleton } from "./formField/components/formFieldSkeleton";
-export { type TLabelAlign, type IFormFieldWithLabel, type IFormField, type TFormField, type IFormFieldComponent, type TFormFieldComponentProps, FormField } from "./formField/formField";
+export { type TFormFieldComponentProps, FormField } from "./formField/formField";
 export { useSkeleton } from "./formField/hooks/useSkeleton";
 export { useWidth } from "./formField/hooks/useWidth";
+export { type TLabelAlign, type IFormFieldWithLabel, type IFormField, type TFormField, type IFormFieldComponent } from "./formField/types";
 export { type ICustomRowProps, CustomRow } from "./formGroup/components/customRow/customRow";
 export { type IFormGroupList, FormGroupList } from "./formGroup/components/formGroupList";
 export { type TFormGroupToggle, FormGroupToggle } from "./formGroup/components/formGroupToggle";
@@ -674,7 +676,9 @@ export { IconYen } from "./icons/iconYen";
 export { IconZone } from "./icons/iconZone";
 export { IconZoom } from "./icons/iconZoom";
 export { IconZoom2 } from "./icons/iconZoom2";
+export { ImageAdjustFilter } from "./images/imageAdjustFilter";
 export { ImageLooking } from "./images/imageLooking";
+export { ImageNoMatchingAssets } from "./images/imageNoMatchingAssets";
 export { ImageNothingFound } from "./images/imageNothingFound";
 export { type ISvgImage } from "./images/svgImage";
 export { type ILayout, Layout } from "./layout/layout";

package/esm/index.js

@@ -63,12 +63,13 @@ export { DateInput } from "./dateInput/dateInput";
 export { cutSeconds } from "./dateInputRaw/utils/cutSeconds";
 export { getLabel } from "./dateInputRaw/utils/getLabel";
 export { DateRange } from "./dateRange/dateRange";
-export { GET_TODAY_OPTION, GET_YESTERDAY_OPTION, GET_THIS_WEEK_OPTION, GET_NEXT_WEEK_OPTION, GET_LAST_WEEK_OPTION, GET_THIS_MONTH_OPTION, GET_NEXT_MONTH_OPTION, GET_LAST_MONTH_OPTION, GET_LAST_SEVEN_DAYS_OPTION, GET_LAST_THIRTY_DAYS_OPTION, GET_LAST_TWELVE_MONTHS_OPTION, GET_LAST_THREE_MONTH_OPTION, GET_LAST_QUARTER_OPTION, GET_THIS_QUARTER_OPTION, GET_LAST_YEAR_OPTION, GET_THIS_YEAR_OPTION, GET_DEFAULT_DATE_OPTIONS } from "./dateRangeRaw/utils/dateRangeUtils";
+export { GET_TODAY_OPTION, GET_YESTERDAY_OPTION, GET_THIS_WEEK_OPTION, GET_NEXT_WEEK_OPTION, GET_LAST_WEEK_OPTION, GET_THIS_MONTH_OPTION, GET_NEXT_MONTH_OPTION, GET_LAST_MONTH_OPTION, GET_LAST_SEVEN_DAYS_OPTION, GET_LAST_THIRTY_DAYS_OPTION, GET_YEAR_TO_DATE_OPTION, GET_LAST_TWELVE_MONTHS_OPTION, GET_LAST_THREE_MONTH_OPTION, GET_LAST_QUARTER_OPTION, GET_THIS_QUARTER_OPTION, GET_LAST_YEAR_OPTION, GET_THIS_YEAR_OPTION, GET_DEFAULT_DATE_OPTIONS } from "./dateRangeRaw/utils/dateRangeUtils";
 export { Dialog } from "./dialog/dialog";
 export { isElementInsideContainer, isFocusable, getFocusableStartInd } from "./dialog/dialogHelpers";
 export { Divider } from "./divider/divider";
 export { LIST_LIMIT, Dropdown } from "./dropdown/dropdown";
 export { useDropdownState } from "./dropdown/useDropdownState";
+export { EmptyState } from "./emptyState/emptyState";
 export { FavoriteButton } from "./favoriteButton/favoriteButton";
 export { FeedbackProvider } from "./feedbackProvider/feedbackProvider";
 export { FilterButton } from "./filterButton/filterButton";
@@ -664,7 +665,9 @@ export { IconYen } from "./icons/iconYen";
 export { IconZone } from "./icons/iconZone";
 export { IconZoom } from "./icons/iconZoom";
 export { IconZoom2 } from "./icons/iconZoom2";
+export { ImageAdjustFilter } from "./images/imageAdjustFilter";
 export { ImageLooking } from "./images/imageLooking";
+export { ImageNoMatchingAssets } from "./images/imageNoMatchingAssets";
 export { ImageNothingFound } from "./images/imageNothingFound";
 export { Layout } from "./layout/layout";
 export { useLayoutFullScreenElement, LayoutFullScreenElementProvider } from "./layout/layoutFullScreenElementProvider";

package/esm/inputAdornments/inputAdornments.d.ts

@@ -19,8 +19,9 @@ export interface IInputAdornments {
     autoFocus?: boolean;
     ref?: RefObject<HTMLInputElement | null>;
     name?: string;
+    ariaLabel?: string;
 }
 export declare const InputAdornments: {
-    ({ id, value, className, disabled, isError, maxLength, onChange, onKeyDown, onFocus, startAdornment, endAdornment, placeholder, inputType, autoFocus, name, onBlur, ref }: IInputAdornments): import("react/jsx-runtime").JSX.Element;
+    ({ id, value, className, disabled, isError, maxLength, onChange, onKeyDown, onFocus, startAdornment, endAdornment, placeholder, inputType, autoFocus, name, onBlur, ref, ariaLabel }: IInputAdornments): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/esm/inputAdornments/inputAdornments.js

@@ -3,7 +3,7 @@ import { useMemo } from "react";
 import { classNames } from "../commonHelpers/classNames/classNames";
 import { TextInputRaw } from "../textInputRaw/textInputRaw";
 import { useDriveClassName } from "../utils/theme/useDriveClassName";
-export const InputAdornments = ({ id, value, className = "", disabled, isError, maxLength, onChange, onKeyDown, onFocus, startAdornment, endAdornment, placeholder, inputType = "text", autoFocus, name, onBlur, ref }) => {
+export const InputAdornments = ({ id, value, className = "", disabled, isError, maxLength, onChange, onKeyDown, onFocus, startAdornment, endAdornment, placeholder, inputType = "text", autoFocus, name, onBlur, ref, ariaLabel }) => {
     const disabledClassName = disabled ? "zen-input-adornments--disabled" : "";
     const driveComponentClass = useDriveClassName("zen-input-adornments");
     const classes = useMemo(() => classNames([
@@ -18,6 +18,6 @@ export const InputAdornments = ({ id, value, className = "", disabled, isError,
         !value ? "zen-input-adornments__wrapper--empty" : "",
         className
     ]), [className, endAdornment, value]);
-    return (_jsxs("div", { className: classes, children: [!!startAdornment && (_jsx("div", { className: "zen-input-adornments__adornment zen-input-adornments__adornment--start", children: startAdornment })), _jsx("div", { className: wrapperClasses, children: _jsx(TextInputRaw, { name: name, onBlur: onBlur, ref: ref, id: id, value: value, maxLength: maxLength, isError: isError, placeholder: placeholder, onChange: onChange, onKeyDown: onKeyDown, onFocus: onFocus, disabled: disabled, type: inputType, autoFocus: autoFocus, className: "zen-input-adornments__input zen-input-adornments__input--border-none" }) }), !!endAdornment && (_jsx("div", { className: "zen-input-adornments__adornment zen-input-adornments__adornment--end", children: endAdornment }))] }));
+    return (_jsxs("div", { className: classes, children: [!!startAdornment && (_jsx("div", { className: "zen-input-adornments__adornment zen-input-adornments__adornment--start", children: startAdornment })), _jsx("div", { className: wrapperClasses, children: _jsx(TextInputRaw, { name: name, onBlur: onBlur, ref: ref, id: id, value: value, maxLength: maxLength, isError: isError, placeholder: placeholder, onChange: onChange, onKeyDown: onKeyDown, onFocus: onFocus, disabled: disabled, type: inputType, autoFocus: autoFocus, ariaLabel: ariaLabel, className: "zen-input-adornments__input zen-input-adornments__input--border-none" }) }), !!endAdornment && (_jsx("div", { className: "zen-input-adornments__adornment zen-input-adornments__adornment--end", children: endAdornment }))] }));
 };
 InputAdornments.displayName = "InputAdornments";

package/esm/layout/layout.js

@@ -84,19 +84,23 @@ const LayoutInner = ({ id, className, pageScrolling = true, children }) => {
         return [h, s, c];
     }, [children]);
     const calculateLayoutParams = useCallback((elem, middleEl) => {
-        var _a, _b;
         if (!elem) {
             return;
         }
-        const layoutO = elem.getBoundingClientRect().top === (((_a = elem.parentElement) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().top) || 0) ? elem.getBoundingClientRect().top
-            : Math.abs(elem.getBoundingClientRect().top - (((_b = elem.parentElement) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect().top) || 0));
+        let absoluteTop = 0;
+        let current = elem;
+        while (current) {
+            absoluteTop += current.offsetTop;
+            current = current.offsetParent;
+        }
+        const visibleTopOffset = Math.max(0, absoluteTop - window.scrollY);
         if (middleEl) {
-            const middleElRect = middleEl.getBoundingClientRect();
-            const middleElBottomPosition = middleEl.offsetTop + middleElRect.height;
+            const middleElBottomPosition = middleEl.offsetTop + middleEl.offsetHeight;
             setMiddleElBottom(middleElBottomPosition);
         }
-        const layoutOffset = layoutO > window.innerHeight ? 0 : layoutO;
-        setMinHeight(window.innerHeight - layoutOffset);
+        const vh = window.innerHeight;
+        const finalMinHeight = vh - visibleTopOffset;
+        setMinHeight(finalMinHeight);
     }, []);
     const checkIsStartWithToolbar = useCallback((fullScreen) => {
         var _a;

package/esm/list/itemData/itemData.d.ts

@@ -25,6 +25,7 @@ export interface IItemData {
     onCheck?: (checked: boolean) => void;
     isMobile?: boolean;
     isDrive?: boolean;
+    isTall?: boolean;
     target?: React.HTMLAttributeAnchorTarget;
 }
 export declare const ItemData: ({ id, ...rest }: IItemData) => import("react/jsx-runtime").JSX.Element;

package/esm/list/itemData/itemDataInternal.d.ts

@@ -24,7 +24,8 @@ export interface IItemData {
     onCheck?: (checked: boolean) => void;
     isMobile?: boolean;
     isDrive?: boolean;
+    isTall?: boolean;
     target?: React.HTMLAttributeAnchorTarget;
 }
-export declare const ItemDataInternal: ({ id, visible, icon, iconClassName, name, link, secondary, status, actions, data, onClick, checked, onCheck, isDrive, isMobile, target }: IItemData) => import("react/jsx-runtime").JSX.Element;
+export declare const ItemDataInternal: ({ id, visible, icon, iconClassName, name, link, secondary, status, actions, data, onClick, checked, onCheck, isDrive, isMobile, isTall, target }: IItemData) => import("react/jsx-runtime").JSX.Element;
 export {};

package/esm/list/itemData/itemDataInternal.js

@@ -74,12 +74,14 @@ const ItemDataInternalInner = ({
   onCheck,
   isDrive,
   isMobile,
+  isTall,
   target
 }) => {
   const {
     translate
   } = useLanguage();
   const driveClassName = useMemo(() => isDrive ? isMobile ? "zen-item-data-drive" : "zen-item-data-drive-tablet" : "", [isDrive, isMobile]);
+  const aceClassName = useMemo(() => isTall ? "zen-item-data--tall" : "", [isTall]);
   const renderActions = useCallback(() => {
     if (!actions || actions.length === 0) {
       return null;
@@ -137,7 +139,7 @@ const ItemDataInternalInner = ({
       height: `${plHeight + 12 * 2 + 1}px`
     };
   }, [data, icon, secondary]);
-  const classNamesList = useMemo(() => classNames(["zen-item-data", driveClassName || ""]), [driveClassName]);
+  const classNamesList = useMemo(() => classNames(["zen-item-data", driveClassName || "", aceClassName]), [driveClassName, aceClassName]);
   if (!visible) {
     return _jsx("li", {
       style: placeholderHeight,
@@ -146,7 +148,7 @@ const ItemDataInternalInner = ({
     }, id);
   }
   return _jsxs("li", {
-    className: classNames(["zen-item-data", driveClassName || ""]),
+    className: classNames(["zen-item-data", driveClassName || "", aceClassName]),
     "data-list-item-id": id,
     onClick: handleClick,
     children: [_jsxs("div", {

package/esm/list/itemData/itemDataWaiting.d.ts

@@ -1,5 +1,6 @@
 import "./itemData.less";
 export interface IItemDataWaiting {
     id: string;
+    isTall?: boolean;
 }
-export declare const ItemDataWaiting: ({ id }: IItemDataWaiting) => import("react/jsx-runtime").JSX.Element;
+export declare const ItemDataWaiting: ({ id, isTall }: IItemDataWaiting) => import("react/jsx-runtime").JSX.Element;

package/esm/list/itemData/itemDataWaiting.js

@@ -1,4 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { classNames } from "../../commonHelpers/classNames/classNames";
 import { Skeleton } from "../../skeleton/skeleton";
-export const ItemDataWaiting = ({ id }) => _jsxs("li", { className: classNames(["zen-item-data"]), "data-list-item-id": id, children: [_jsx(Skeleton, { className: "zen-item-data__waiting" }), _jsx(Skeleton, { className: "zen-item-data__waiting" }), _jsx(Skeleton, { className: "zen-item-data__waiting" })] }, id);
+export const ItemDataWaiting = ({ id, isTall }) => (_jsxs("li", { className: classNames([
+        "zen-item-data",
+        isTall ? "zen-item-data--tall" : ""
+    ]), "data-list-item-id": id, children: [_jsx(Skeleton, { className: "zen-item-data__waiting" }), _jsx(Skeleton, { className: "zen-item-data__waiting" }), _jsx(Skeleton, { className: "zen-item-data__waiting" })] }, id));

package/esm/list/list.d.ts

@@ -2,8 +2,7 @@
 import { IZenComponentProps } from "../commonHelpers/zenComponent";
 import "./list.less";
 import { TListType } from "./interfaces";
-export interface IList extends IZenComponentProps {
-    type?: TListType;
+type IListBase = {
     onChangeOrder?: (startPosition: number, endPosition: number) => void;
     checked?: string[];
     onCheck?: (checked: string[]) => void;
@@ -11,5 +10,15 @@ export interface IList extends IZenComponentProps {
     isLoading?: boolean;
     waitingItems?: number;
     onKeyDown?: (event: React.KeyboardEvent<HTMLUListElement>) => void;
-}
-export declare const List: ({ type, children, onChangeOrder, checked, onCheck, onListEnd, onKeyDown, isLoading, waitingItems, className }: IList) => import("react/jsx-runtime").JSX.Element;
+} & IZenComponentProps;
+type IListStandard = IListBase & {
+    type?: Omit<TListType, "data">;
+    variant?: never;
+};
+type IListData = IListBase & {
+    type?: Extract<TListType, "data">;
+    variant: "tall";
+};
+export type IList = IListStandard | IListData;
+export declare const List: (props: IList) => import("react/jsx-runtime").JSX.Element;
+export {};

package/esm/list/list.js

@@ -10,7 +10,9 @@ import { useVirtualScroll } from "./hooks/useVirtualScroll";
 import { useLazyLoading } from "./hooks/useLazyLoading";
 import { getLoadingItems } from "./utils/getLoadingItems";
 import { classNames } from "../commonHelpers/classNames/classNames";
-export const List = ({ type, children, onChangeOrder, checked, onCheck, onListEnd, onKeyDown, isLoading, waitingItems, className }) => {
+export const List = (props) => {
+    const { type, children, onChangeOrder, checked, onCheck, onListEnd, onKeyDown, isLoading, waitingItems, className } = props;
+    const isTall = type === "data" && "variant" in props ? props.variant === "tall" : undefined;
     const listId = useId();
     const listRef = useRef(null);
     const onChangeOrderCallback = useCallback((startPosition, endPosition) => {
@@ -24,29 +26,44 @@ export const List = ({ type, children, onChangeOrder, checked, onCheck, onListEn
     const { isInViewport } = useVirtualScroll(listRef, children);
     useLazyLoading(listRef, isLoading, onListEnd);
     const childrenArray = useMemo(() => Children.map(children, (child) => {
-        const props = {
+        const childProps = {
             isDrive: isDrive,
             isMobile: isMobile
         };
         if (onChangeOrder) {
-            props.onDragStart = onDragStart;
+            childProps.onDragStart = onDragStart;
         }
-        if (onCheck && checked && isDataListItem(child)) {
+        const isChildDataListItem = isDataListItem(child);
+        if (onCheck && checked && isChildDataListItem) {
             const id = child.props.id;
-            props.checked = checked.indexOf(id) > -1;
-            props.onCheck = (itemChecked) => onCheck(itemChecked ? [...checked, id] : checked.filter((c) => c !== id));
+            childProps.checked = checked.indexOf(id) > -1;
+            childProps.onCheck = (itemChecked) => onCheck(itemChecked
+                ? [...checked, id]
+                : checked.filter((c) => c !== id));
         }
-        if (Object.keys(props).length > 0) {
-            return cloneElement(child, props);
+        if (isChildDataListItem) {
+            childProps.isTall = isTall;
+        }
+        if (Object.keys(childProps).length > 0) {
+            return cloneElement(child, childProps);
         }
         return child;
-    }), [checked, children, isDrive, isMobile, onChangeOrder, onCheck, onDragStart]);
+    }), [
+        isTall,
+        checked,
+        children,
+        isDrive,
+        isMobile,
+        onChangeOrder,
+        onCheck,
+        onDragStart
+    ]);
     const loadingChildren = useMemo(() => {
         if (!isLoading) {
             return null;
         }
         const defaultWaitingItems = type === "data" ? 50 : 10;
-        return getLoadingItems(type || "standard", waitingItems || defaultWaitingItems, listId, isDrive, isMobile);
-    }, [isDrive, isLoading, isMobile, listId, type, waitingItems]);
-    return _jsx(ViewportProvider, { isInViewport: isInViewport, children: _jsxs("ul", { className: classNames(["zen-list", className || ""]), onKeyDown: onKeyDown, ref: listRef, children: [childrenArray, loadingChildren] }) });
+        return getLoadingItems(type || "standard", waitingItems || defaultWaitingItems, listId, isDrive, isMobile, isTall);
+    }, [isDrive, isTall, isLoading, isMobile, listId, type, waitingItems]);
+    return (_jsx(ViewportProvider, { isInViewport: isInViewport, children: _jsxs("ul", { className: classNames(["zen-list", className || ""]), onKeyDown: onKeyDown, ref: listRef, children: [childrenArray, loadingChildren] }) }));
 };

package/esm/list/utils/getLoadingItems.d.ts

@@ -1,2 +1,2 @@
 import { TListType } from "../interfaces";
-export declare const getLoadingItems: (type: TListType, count: number, listId: string, isDrive: boolean, isMobile: boolean) => import("react/jsx-runtime").JSX.Element[];
+export declare const getLoadingItems: (type: TListType, count: number, listId: string, isDrive: boolean, isMobile: boolean, isTall?: boolean) => import("react/jsx-runtime").JSX.Element[];

package/esm/list/utils/getLoadingItems.js

@@ -2,13 +2,13 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { ItemDataWaiting } from "../itemData/itemDataWaiting";
 import { ItemCompactWaiting } from "../itemCompact/itemCompactWaiting";
 import { ListItemWaiting } from "../listItem/listItemWaiting";
-export const getLoadingItems = (type, count, listId, isDrive, isMobile) => Array.from({ length: count }).map((_, index) => {
+export const getLoadingItems = (type, count, listId, isDrive, isMobile, isTall) => Array.from({ length: count }).map((_, index) => {
     const id = `${listId}-${index}`;
     if (type === "data") {
-        return _jsx(ItemDataWaiting, { id: id }, id);
+        return _jsx(ItemDataWaiting, { id: id, isTall: isTall }, id);
     }
     if (type === "compact") {
-        return _jsx(ItemCompactWaiting, { isDrive: isDrive, isMobile: isMobile }, id);
+        return (_jsx(ItemCompactWaiting, { isDrive: isDrive, isMobile: isMobile }, id));
     }
-    return _jsx(ListItemWaiting, { id: id, isDrive: isDrive, isMobile: isMobile }, id);
+    return (_jsx(ListItemWaiting, { id: id, isDrive: isDrive, isMobile: isMobile }, id));
 });

package/esm/modal/modal.js

@@ -149,6 +149,7 @@ export const DialogContentNew = ({
   } = useLanguage();
   const isMobile = useMobile();
   const contentRef = useRef(null);
+  const lastActiveOutsideElement = useRef(document.activeElement);
   const iconDriveClassName = useDriveClassName("icon");
   const iconsByType = useMemo(() => ({
     "error": IconException,
@@ -159,6 +160,12 @@ export const DialogContentNew = ({
   const subscriptionCondition = useCallback(trigger => trigger.current !== null, []);
   useTrapFocus(contentRef, undefined, contentRef, subscriptionCondition);
   useEscape(contentRef, onClose || dummyOnClose, contentRef, subscriptionCondition);
+  useEffect(() => {
+    const previousElement = lastActiveOutsideElement.current;
+    return () => {
+      isFocusable(previousElement) && previousElement.focus();
+    };
+  }, []);
   useEffect(() => {
     if (contentRef.current === null) {
       return;

package/esm/pillExpandable/pillExpandable.d.ts

@@ -46,6 +46,7 @@ export interface IPillExpandable extends IZenComponentProps {
     loadingWidth?: number;
     isBeta?: boolean;
     hideCounterNumber?: boolean;
+    autoExpandChildren?: boolean;
 }
 type TPillExpandable = IPillExpandable & TProps;
 export declare const PillExpandable: React.NamedExoticComponent<TPillExpandable>;

package/esm/pillExpandable/pillExpandable.js

@@ -62,8 +62,10 @@ injectString("zh-TW", "View all", "\u6AA2\u8996\u5168\u90E8");
 const MAX_PILLS_TO_DISPLAY_IN_POPUP = 2;
 const PillContext = createContext({
   level: 0,
-  onPillExpand: () => {},
-  expandId: undefined
+  onChildPillExpand: () => {},
+  onChildPillCollapse: () => {},
+  expandedChildPillIds: new Set(),
+  autoExpand: false
 });
 const paddingX = 26;
 const paddingY = 52;
@@ -145,7 +147,8 @@ const PillExpandableBase = ({
   secondaryIcon,
   isBeta,
   loadingWidth = 200,
-  hideCounterNumber
+  hideCounterNumber,
+  autoExpandChildren
 }) => {
   const popupId = useId();
   const pillId = useId();
@@ -160,11 +163,11 @@ const PillExpandableBase = ({
     mainAction,
     getData
   }));
-  const [isOpen, setIsOpen] = useState(false);
+  const [isPopupOpen, setIsPopupOpen] = useState(false);
   const [isPopupContentReady, setIsPopupContentReady] = useState(false);
   const [containerNode, setContainerNode] = useState(null);
   useEffect(() => {
-    if (!isOpen) {
+    if (!isPopupOpen) {
       setIsPopupContentReady(false);
       return;
     }
@@ -181,10 +184,10 @@ const PillExpandableBase = ({
     return () => {
       observer.unobserve(containerNode);
     };
-  }, [isOpen, containerNode]);
+  }, [isPopupOpen, containerNode]);
   useEffect(() => {
     const fetchData = function () {
-      if (!isOpen) {
+      if (!isPopupOpen) {
         return;
       }
       if (isFunction(getData)) {
@@ -198,9 +201,9 @@ const PillExpandableBase = ({
       }
     };
     fetchData();
-  }, [getData, isOpen, errorHandler]);
+  }, [getData, isPopupOpen, errorHandler]);
   useEffect(() => {
-    if (!isOpen) {
+    if (!isPopupOpen) {
       return;
     }
     getValue(description, setContent, "description", errorHandler);
@@ -208,25 +211,58 @@ const PillExpandableBase = ({
     getValue(count, setContent, "count", errorHandler);
     getValue(secondaryAction, setContent, "secondaryAction", errorHandler);
     getValue(mainAction, setContent, "mainAction", errorHandler);
-  }, [content, isOpen, description, date, count, secondaryAction, mainAction, errorHandler]);
+  }, [content, isPopupOpen, description, date, count, secondaryAction, mainAction, errorHandler]);
   const {
     level,
-    expandId,
-    onPillExpand
+    expandedChildPillIds,
+    onChildPillExpand,
+    onChildPillCollapse,
+    autoExpand
   } = useContext(PillContext);
   const triggerRef = useRef(null);
   const isChild = level !== 0;
-  const [currentExpand, setCurrentExpand] = useState(undefined);
-  const onExpandHandler = useCallback(e => {
+  const [currentExpandedPills, setCurrentExpandedPills] = useState(new Set());
+  useEffect(() => {
+    if (isChild && autoExpand) {
+      onChildPillExpand(pillId);
+    }
+  }, [autoExpand, isChild, onChildPillExpand, pillId]);
+  const handlePopupToggle = useCallback(e => {
     var _a;
     e === null || e === void 0 ? void 0 : e.stopPropagation();
-    setIsOpen(!isOpen);
-    isOpen && ((_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus());
-    onPillExpand(pillId === expandId ? "" : pillId);
-  }, [isOpen, onPillExpand, pillId, expandId]);
+    setIsPopupOpen(!isPopupOpen);
+    isPopupOpen && ((_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus());
+  }, [isPopupOpen]);
+  const handleChildToggle = useCallback(e => {
+    e === null || e === void 0 ? void 0 : e.stopPropagation();
+    const isExpanded = expandedChildPillIds.has(pillId);
+    if (isExpanded) {
+      onChildPillCollapse(pillId);
+    } else {
+      if (!autoExpand) {
+        // Prevent multiple child pills being expanded at the same time
+        expandedChildPillIds.forEach(pill => onChildPillCollapse(pill));
+      }
+      onChildPillExpand(pillId);
+    }
+  }, [expandedChildPillIds, pillId, autoExpand, onChildPillCollapse, onChildPillExpand]);
+  const addExpandedChild = useCallback(id => {
+    setCurrentExpandedPills(prev => {
+      const next = new Set(prev);
+      next.add(id);
+      return next;
+    });
+  }, []);
+  const removeExpandedChild = useCallback(id => {
+    setCurrentExpandedPills(prev => {
+      const next = new Set(prev);
+      next.delete(id);
+      return next;
+    });
+  }, []);
   const onChange = useCallback(() => {
-    setIsOpen(!isOpen);
-  }, [isOpen]);
+    setIsPopupOpen(!isPopupOpen);
+  }, [isPopupOpen]);
   const buttonMoreProps = useMemo(() => getButtonMoreProps(viewMoreAction), [viewMoreAction]);
   const validChildren = useMemo(() => Children.toArray(children).filter(child => {
     var _a;
@@ -244,28 +280,31 @@ const PillExpandableBase = ({
     });
   }
   if (isChild) {
+    const isExpanded = expandedChildPillIds.has(pillId);
     return _jsxs(PillContext.Provider, {
       value: {
         level: level + 1,
-        onPillExpand: setCurrentExpand,
-        expandId: currentExpand
+        onChildPillExpand: addExpandedChild,
+        onChildPillCollapse: removeExpandedChild,
+        expandedChildPillIds: currentExpandedPills,
+        autoExpand: autoExpandChildren || false
       },
       children: [_jsx(PillExpandableSimple, {
         icon: icon,
         text: text,
-        expanded: expandId === pillId,
-        onExpand: onExpandHandler,
+        expanded: isExpanded,
+        onExpand: handleChildToggle,
         expandAriaText: translate("Expand"),
         type: type,
         errorHandler: errorHandler
       }), _jsx(PillContent, {
-        onActionClick: onExpandHandler,
+        onActionClick: handleChildToggle,
         descriptionText: content.description,
         date: content.date,
         count: content.count,
         mainAction: content.mainAction,
         secondaryAction: content.secondaryAction,
-        isVisible: expandId === pillId,
+        isVisible: isExpanded,
         errorHandler: errorHandler
       })]
     });
@@ -273,19 +312,21 @@ const PillExpandableBase = ({
   return _jsx(PillContext.Provider, {
     value: {
       level: level + 1,
-      onPillExpand: setCurrentExpand,
-      expandId: currentExpand
+      onChildPillExpand: addExpandedChild,
+      onChildPillCollapse: removeExpandedChild,
+      expandedChildPillIds: currentExpandedPills,
+      autoExpand: autoExpandChildren || false
     },
     children: _jsxs("div", {
       className: classNames(["zen-status-pill", className || ""]),
       "aria-haspopup": "true",
       children: [_jsxs("div", {
         className: "zen-status-pill__pill-container",
-        onClick: onExpandHandler,
+        onClick: handlePopupToggle,
         children: [_jsx(PillExpandableSimple, {
           icon: icon,
           text: text,
-          expanded: isOpen,
+          expanded: isPopupOpen,
           expandAriaText: translate("Expand"),
           ref: triggerRef,
           type: type,
@@ -307,7 +348,7 @@ const PillExpandableBase = ({
         onOpenChange: onChange,
         paddingX: paddingX,
         paddingY: paddingY,
-        isOpen: isOpen,
+        isOpen: isPopupOpen,
         triggerRef: triggerRef,
         alignmentsFn: alignments,
         children: _jsx("div", {
@@ -321,14 +362,14 @@ const PillExpandableBase = ({
                 icon: icon,
                 text: text,
                 expanded: true,
-                onExpand: onExpandHandler,
+                onExpand: handlePopupToggle,
                 expandAriaText: translate("Expand"),
                 type: type,
                 errorHandler: errorHandler,
                 isBeta: isBeta
               })
             }), _jsx(PillContent, {
-              onActionClick: onExpandHandler,
+              onActionClick: handlePopupToggle,
               descriptionText: content.description,
               date: content.date,
               count: content.count,

package/esm/radioGroupRaw/radioGroupRaw.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { IFormFieldComponent } from "../formField/formField";
+import { IFormFieldComponent } from "../formField/types";
 import { IRadioGroupRawDefault, TRadioGroupRaw } from "./types";
 import "./radioGroupRaw.less";
 export interface IRadioGroupRaw extends IRadioGroupRawDefault {

package/esm/rangeRaw/rangeRaw.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { IFormFieldComponent } from "../formField/formField";
+import { IFormFieldComponent } from "../formField/types";
 import { IRangeRawDefault, TRangeRaw } from "./types";
 import "./rangeRaw.less";
 export type { IRangeValuesRaw } from "./types";

package/esm/summary/summary.js

@@ -64,7 +64,6 @@ export const Summary = ({
         children: title
       }), tooltip && _jsx(Tooltip, {
         alignment: "top",
-        size: "auto",
         trigger: _jsx("div", {
           className: "zen-summary__trigger",
           children: _jsx(IconInfoCircle, {

package/esm/summaryTile/summaryTile.js

@@ -27,7 +27,7 @@ export var SummaryTileSize;
     SummaryTileSize["Medium"] = "medium";
 })(SummaryTileSize || (SummaryTileSize = {}));
 export const SummaryTileDisplayName = "SummaryTile";
-export const SummaryTile = ({ className, children, size = SummaryTileSize.Small, title, tileType = SummaryTileType.Default, id, onClick, tooltipText, tooltipAlignment = "top", tooltipSize }) => {
+export const SummaryTile = ({ className, children, size = SummaryTileSize.Small, title, tileType = SummaryTileType.Default, id, onClick, tooltipText, tooltipAlignment = "top" }) => {
     const generatedId = React.useId();
     const eltId = id || generatedId;
     const memoizedGetIconId = React.useMemo(() => {
@@ -57,6 +57,6 @@ export const SummaryTile = ({ className, children, size = SummaryTileSize.Small,
         };
     }
     const Tag = onClick ? "button" : "div";
-    return _jsxs(Tag, Object.assign({}, componentProps, { children: [_jsxs("div", { className: "zen-summary-tile__title-block", children: [_jsx("div", { className: "zen-summary-tile__title-text zen-ellipsis heading-05", children: title }), tooltipText ? _jsx(Tooltip, { alignment: tooltipAlignment, size: tooltipSize, trigger: _jsx(SummaryTileTrigger, { icon: memoizedGetIconId }), children: tooltipText }) : null] }), _jsx("div", { className: "zen-summary-tile__content", children: children })] }));
+    return _jsxs(Tag, Object.assign({}, componentProps, { children: [_jsxs("div", { className: "zen-summary-tile__title-block", children: [_jsx("div", { className: "zen-summary-tile__title-text zen-ellipsis heading-05", children: title }), tooltipText ? _jsx(Tooltip, { alignment: tooltipAlignment, trigger: _jsx(SummaryTileTrigger, { icon: memoizedGetIconId }), children: tooltipText }) : null] }), _jsx("div", { className: "zen-summary-tile__content", children: children })] }));
 };
 SummaryTile.displayName = SummaryTileDisplayName;

package/esm/table/children/tableEmpty.d.ts

@@ -1,5 +1,5 @@
 import { IEmptySearchList } from "../../dataGrid/emptySearchList/emptySearchList";
-export interface ITableEmpty extends Pick<IEmptySearchList, "description" | "image" | "className"> {
+export interface ITableEmpty extends Pick<IEmptySearchList, "description" | "image" | "className" | "children"> {
 }
 export declare const TableEmpty: {
     (_: ITableEmpty): import("react/jsx-runtime").JSX.Element;

package/esm/table/children/useTableChildren.js

@@ -68,7 +68,7 @@ export const useTableChildren = (children, isMobile, selected, allSelected, clea
                 description: child.props.description,
                 image: child.props.image,
                 className: child.props.className
-            }));
+            }, child.props.children));
             return;
         }
         if (isChildElement(child, TableDetailPanel.displayName)) {