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

package/esm/selectRaw/selectRaw.js

@@ -0,0 +1,131 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useCallback, useId, useState } from "react";
+import { CheckboxState } from "../checkbox/checkboxState";
+import { classNames } from "../commonHelpers/classNames/classNames";
+import { getKeysPressed, isKeyForSearch } from "../commonHelpers/keyboard";
+import { PassiveSelectList } from "../selectList/selectList";
+import { ListAction } from "../selectList/selectList.actionTypes";
+import { SelectAction } from "./select.actionTypes";
+import { selectReducer } from "./select.reducer";
+import { getSelectInitialState, getSelectValue } from "./select.helpers";
+import { isChildOf } from "../utils/isChildOf";
+import { IconChevronDownSmall } from "../icons/iconChevronDownSmall";
+import { Absolute } from "../absolute/absolute";
+import { usePopupWidth } from "./hooks/usePopupWidth";
+// get default active item (based on items array)
+const getItemById = (items, id) => items.find(item => item.id === id);
+const closedListActionGetters = {
+    "ArrowDown": (items) => ({ type: SelectAction.Expand, payload: { items } }),
+    "Alt+ArrowDown": (items) => ({ type: SelectAction.Expand, payload: { items } }),
+    "ArrowUp": (items) => ({ type: SelectAction.FocusFirstAndExpand, payload: { items } }),
+    "Enter": (items) => ({ type: SelectAction.Expand, payload: { items } }),
+    "Space": (items) => ({ type: SelectAction.Expand, payload: { items } }),
+    "Home": (items) => ({ type: SelectAction.Expand, payload: { items } }),
+    "End": (items) => ({ type: SelectAction.Expand, payload: { items } }),
+    "default": (items, e) => ({ type: SelectAction.SearchAndExpand, payload: { items, key: e.key } })
+};
+const openListActionGetters = {
+    "Enter": () => ({ type: ListAction.ToggleCurrent, payload: { multiselect: false } }),
+    "Space": () => ({ type: ListAction.ToggleCurrent, payload: { multiselect: false } }),
+    "Tab": () => ({ type: ListAction.Blur, payload: { multiselect: false } }),
+    "Escape": () => ({ type: SelectAction.Collapse, payload: {} }),
+    "ArrowDown": (items) => ({ type: ListAction.FocusNext, payload: { items } }),
+    "ArrowUp": (items) => ({ type: ListAction.FocusPrev, payload: { items } }),
+    "Alt+ArrowUp": () => ({ type: ListAction.ToggleCurrent, payload: { multiselect: false } }),
+    "Home": (items) => ({ type: ListAction.FocusFirst, payload: { items } }),
+    "End": (items) => ({ type: ListAction.FocusLast, payload: { items } }),
+    "PageUp": (items, _, pageSize) => ({ type: ListAction.FocusPrevPage, payload: { items, pageSize } }),
+    "PageDown": (items, _, pageSize) => ({ type: ListAction.FocusNextPage, payload: { items, pageSize } }),
+    "default": (items, e) => ({ type: ListAction.SearchItem, payload: { items, key: e.key } })
+};
+const PassiveSelectListComp = React.memo(PassiveSelectList);
+export const SelectRaw = React.forwardRef((props, selectRef) => {
+    var _a;
+    const { id, title, pageSize = 10, placeholder, disabled, className, classNamePopup, items: outerItems, value: outerValue, isError, onChange, forceSelection = false } = props;
+    const items = React.useMemo(() => outerItems, [outerItems]);
+    const [state, dispatchState] = React.useReducer(selectReducer, { items, value: outerValue }, getSelectInitialState);
+    const value = getSelectValue(state.itemsState, items);
+    const innerTriggerRef = React.useRef(null);
+    const ref = React.useRef(null);
+    const [isOpen, setIsOpen] = useState(false);
+    const onPopupVisibilityChange = useCallback(() => {
+        setIsOpen(!isOpen);
+    }, [isOpen]);
+    const collapsePopup = useCallback(() => {
+        setIsOpen(false);
+    }, []);
+    React.useImperativeHandle(selectRef, () => innerTriggerRef.current, []);
+    const listId = React.useId();
+    const classes = classNames(["zen-select zen-text-input-layout", disabled ? "zen-select--disabled" : "", className || ""]);
+    const text = value ? (_a = getItemById(items, value)) === null || _a === void 0 ? void 0 : _a.children : placeholder;
+    // Reset state when value changed
+    React.useEffect(() => {
+        const itemsValue = getSelectInitialState({ items, value: outerValue }).itemsState;
+        dispatchState({ type: ListAction.Reset, payload: { items, value: itemsValue, multiselect: false } });
+    }, [outerValue, items]);
+    React.useEffect(() => {
+        if (state.activeIndex >= 0 && document.activeElement && ref.current && isChildOf(document.activeElement, ref.current)) {
+            const itemEl = ref.current.querySelector(`.zen-select-list__item:nth-child(${state.activeIndex + 1})`);
+            itemEl === null || itemEl === void 0 ? void 0 : itemEl.scrollIntoView({ block: "nearest" });
+        }
+    }, [state.activeIndex]);
+    function onBlur(e) {
+        if (!innerTriggerRef.current || !state.expanded || disabled) {
+            return;
+        }
+        if (!e.relatedTarget || !isChildOf(e.relatedTarget, innerTriggerRef.current.parentElement)) {
+            dispatchState({ type: SelectAction.CollapseAndSelect, payload: { items: items } });
+            return;
+        }
+        innerTriggerRef.current.focus();
+        return;
+    }
+    const onChangeItem = React.useCallback((updatedId, updatedState) => {
+        const blockOnChange = updatedState === CheckboxState.Off && forceSelection;
+        if (disabled) {
+            return;
+        }
+        onPopupVisibilityChange();
+        if (blockOnChange) {
+            return;
+        }
+        dispatchState({ type: ListAction.ChangeItemState, payload: { updatedId, updatedState, multiselect: false } });
+    }, [disabled, onPopupVisibilityChange, forceSelection]);
+    const onTriggerKeyDown = (e) => {
+        if (disabled) {
+            return;
+        }
+        const handlerName = getKeysPressed(e);
+        const getAction = !state.expanded
+            ? closedListActionGetters[handlerName] || (isKeyForSearch(e.code) && closedListActionGetters["default"])
+            : openListActionGetters[handlerName] || (isKeyForSearch(e.code) && openListActionGetters["default"]);
+        if (getAction) {
+            dispatchState(getAction(items, e, pageSize));
+            if (e.code !== "Tab") {
+                e.preventDefault();
+                e.stopPropagation();
+            }
+            if (e.code === "Enter" || e.code === "Space") {
+                onPopupVisibilityChange();
+            }
+            if (e.code === "Escape") {
+                collapsePopup();
+            }
+        }
+    };
+    const popupId = useId();
+    React.useEffect(() => {
+        if (disabled || !state.isItemsStateChanged || !onChange) {
+            return;
+        }
+        onChange(value);
+    }, [state.isItemsStateChanged, value, disabled, onChange]);
+    const { width, maxWidth, minWidth } = usePopupWidth(ref);
+    return _jsxs("div", { className: classes, ref: ref, children: [_jsxs("div", { "aria-controls": listId, "aria-expanded": state.expanded, "aria-haspopup": "listbox", "aria-label": title, "aria-disabled": disabled, id: id, className: classNames([
+                    "zen-select__trigger",
+                    "zen-text-input",
+                    isError ? "zen-text-input--error" : "",
+                    "zen-caption zen-caption--full-width"
+                ]), role: "combobox", tabIndex: disabled ? -1 : 0, "aria-activedescendant": (isOpen && state.activeIndex > -1) ? items[state.activeIndex].id : undefined, onClick: onPopupVisibilityChange, onKeyDown: onTriggerKeyDown, onBlur: onBlur, ref: innerTriggerRef, children: [_jsx("div", { className: classNames(["zen-select__text", "zen-ellipsis", "zen-caption__content", !value ? "zen-select__text--placeholder" : ""]), children: text }), _jsx(IconChevronDownSmall, { className: "zen-select__arrow zen-caption__post-content", size: "large" })] }), _jsx(Absolute, { recalculateOnScroll: true, className: classNames(["zen-select__popup", classNamePopup || ""]), triggerRef: innerTriggerRef, id: popupId, isOpen: isOpen, onOpenChange: onPopupVisibilityChange, children: _jsx(PassiveSelectListComp, { id: listId, title: title, disabled: disabled, multiselect: false, items: items.map(item => (Object.assign(Object.assign({}, item), { state: value === item.id ? CheckboxState.On : CheckboxState.Off }))), value: new Map(items.map(item => ([item.id, value === item.id ? CheckboxState.On : CheckboxState.Off]))), activeIndex: state.activeIndex, size: pageSize, onChangeItem: onChangeItem, style: { width, minWidth, maxWidth } }) })] });
+});
+SelectRaw.displayName = "SelectRaw";

package/esm/selectRaw/utils/constants.d.ts

@@ -0,0 +1 @@
+export declare const POPUP_MIN_WIDTH = 170;

package/esm/selectRaw/utils/constants.js

@@ -0,0 +1 @@
+export const POPUP_MIN_WIDTH = 170;

package/esm/selectRaw/utils/getValidWidth.d.ts

@@ -0,0 +1 @@
+export declare const getValidWidth: (width: number) => number;

package/esm/selectRaw/utils/getValidWidth.js

@@ -0,0 +1,2 @@
+import { POPUP_MIN_WIDTH } from "./constants";
+export const getValidWidth = (width) => width < POPUP_MIN_WIDTH ? POPUP_MIN_WIDTH : width;

package/esm/shield/shield.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import "./shield.less";
+export interface IShield {
+    className?: string;
+    dataShieldId?: string;
+    isVisible?: boolean;
+}
+export declare const Shield: React.FC<IShield>;

package/esm/shield/shield.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect } from "react";
+import { classNames } from "../commonHelpers/classNames/classNames";
+import { useFadeComponent } from "../utils/useFadeComponent";
+import { createPortal } from "react-dom";
+export const Shield = ({ className, dataShieldId, isVisible }) => {
+    const { renderComponent, showContent, setIsOpen, handleTransitionEnd } = useFadeComponent(isVisible || false);
+    useEffect(() => {
+        setIsOpen(isVisible || false);
+    }, [isVisible, setIsOpen]);
+    if (!renderComponent && !isVisible) {
+        return isVisible === undefined ? _jsx("div", { className: classNames(["zen-shield", className !== null && className !== void 0 ? className : ""]), "data-shield-id": dataShieldId || "" }) : null;
+    }
+    return createPortal(_jsx("div", { onTransitionEnd: handleTransitionEnd, className: classNames(["zen-shield", "zen-shield-faded", showContent ? "zen-shield-faded--visible" : "", className !== null && className !== void 0 ? className : ""]), "data-shield-id": dataShieldId || "" }), document.fullscreenElement || document.body);
+};

package/esm/sidePanel/sidePanel.d.ts

@@ -0,0 +1,28 @@
+/// <reference types="react" />
+import "./sidePanel.less";
+import { IZenComponentProps } from "../commonHelpers/zenComponent";
+import { ISidePanelCell } from "./sidePanelCell/sidePanelCell";
+interface ISidePanelComponents {
+    Cell: React.FC<ISidePanelCell>;
+}
+export declare const isChildPopup: (target: HTMLElement, stopElement: HTMLElement) => boolean;
+export declare const formatWidth: (width: string | number) => string;
+export type TPanelPosition = "left" | "right" | "bottom";
+export declare enum SidePanelCloseReason {
+    Escape = "Escape",
+    ClickOutside = "ClickOutside"
+}
+export declare const CUSTOM_POPUP_COMPONENT_CLASSNAME = "zen-custom-component-popup";
+export interface ISidePanel extends IZenComponentProps {
+    panelPosition?: TPanelPosition;
+    id?: string;
+    triggerRef: React.RefObject<HTMLElement>;
+    isOpen: boolean;
+    label: string;
+    useTrapFocusWithTrigger?: boolean;
+    onTransitionEnd?: (isCurrentOpen: boolean) => void;
+    onHidePanel: (reason: SidePanelCloseReason, dataShieldId?: string) => void;
+    width?: number | string;
+}
+export declare const SidePanel: React.FC<ISidePanel> & ISidePanelComponents;
+export {};

package/esm/sidePanel/sidePanel.js

@@ -0,0 +1,159 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { classNames } from "../commonHelpers/classNames/classNames";
+import { useContext, useEffect, useMemo, useRef } from "react";
+import { isFocusable } from "../dialog/dialogHelpers";
+import { FOCUSABLE_SELECTOR } from "../utils/focusableSelector";
+import { useEscape } from "../commonHelpers/hooks/useEscape";
+import { useTrapFocus } from "../commonHelpers/hooks/useTrapFocus";
+import { isChildOf } from "../utils/isChildOf";
+import { getParentByClass } from "../utils/getParentByClass";
+import { SidePanelCell } from "./sidePanelCell/sidePanelCell";
+import { useUniqueId } from "../commonHelpers/useUniqueId";
+import { createPortal } from "react-dom";
+import { useDriveClassName } from "../utils/theme/useDriveClassName";
+import { themeContext } from "../utils/theme/themeContext";
+import { useFadeComponent } from "../utils/useFadeComponent";
+import { useMobile } from "../commonHelpers/hooks/useMobile";
+/* eslint-enable @typescript-eslint/naming-convention */
+export const isChildPopup = (target, stopElement) => {
+    const parentPopup = getParentByClass(target, "zen-absolute");
+    const parentSidePanel = getParentByClass(target, "zen-side-panel");
+    if (!parentPopup && !parentSidePanel) {
+        return false;
+    }
+    if (parentPopup === stopElement || parentSidePanel === stopElement) {
+        return true;
+    }
+    const popupTrigger = parentPopup
+        ? document.querySelector(`[data-popup-id='${parentPopup.id}']`)
+        : undefined;
+    if (!popupTrigger) {
+        return false;
+    }
+    return isChildPopup(popupTrigger, stopElement);
+};
+export const formatWidth = (width) => {
+    if (typeof width === "number") {
+        return `${width}px`;
+    }
+    if (typeof width === "string" && /^\d+$/.test(width)) {
+        return `${width}px`;
+    }
+    return width;
+};
+export var SidePanelCloseReason;
+(function (SidePanelCloseReason) {
+    SidePanelCloseReason["Escape"] = "Escape";
+    SidePanelCloseReason["ClickOutside"] = "ClickOutside";
+})(SidePanelCloseReason || (SidePanelCloseReason = {}));
+export const CUSTOM_POPUP_COMPONENT_CLASSNAME = "zen-custom-component-popup";
+export const SidePanel = ({ label, className, id, isOpen, onHidePanel, children, triggerRef, panelPosition = "right", useTrapFocusWithTrigger, width, onTransitionEnd }) => {
+    const { renderComponent, showContent, readyForFocus, setIsOpen, handleTransitionEnd } = useFadeComponent(isOpen, onTransitionEnd);
+    const { dark } = useContext(themeContext);
+    const isMobile = useMobile();
+    const sidePanelRef = useRef(null);
+    const driveClassName = useDriveClassName("zen-side-panel");
+    const autoId = useUniqueId();
+    const popupId = id || autoId;
+    const prevReadyForFocus = useRef(false);
+    useEffect(() => {
+        if (triggerRef.current) {
+            triggerRef.current.setAttribute("aria-haspopup", "true");
+            triggerRef.current.setAttribute("aria-expanded", renderComponent ? "true" : "false");
+            triggerRef.current.setAttribute("aria-controls", popupId);
+            triggerRef.current.setAttribute("data-popup-id", popupId);
+        }
+    }, [triggerRef, renderComponent, popupId]);
+    function handleEscape() {
+        onHidePanel(SidePanelCloseReason.Escape);
+        if (!triggerRef.current) {
+            return;
+        }
+        if (isFocusable(triggerRef.current)) {
+            triggerRef.current.focus();
+            return;
+        }
+        const focusable = Array.from(triggerRef.current.querySelectorAll(FOCUSABLE_SELECTOR));
+        (focusable[0] || triggerRef.current).focus();
+    }
+    useTrapFocus(sidePanelRef, useTrapFocusWithTrigger ? triggerRef : undefined, showContent);
+    useEscape(sidePanelRef, handleEscape, renderComponent);
+    useEffect(() => {
+        var _a, _b;
+        // eslint-disable-next-line complexity
+        const closeOnClickOutside = (e) => {
+            if (!sidePanelRef.current || !e.target) {
+                return;
+            }
+            const dataShieldId = e.target.getAttribute("data-shield-id") || "";
+            if (dataShieldId) {
+                onHidePanel(SidePanelCloseReason.ClickOutside, dataShieldId);
+                return;
+            }
+            const isGroupsFilterBackButton = [
+                "zen-groups-filter-menu__currently-selected-button",
+                "zen-groups-filter-menu__action-button-back"
+            ]
+                .some((groupsFilterButton) => e.target.classList.contains(groupsFilterButton));
+            const isOpenAdvancedDialog = document.querySelector(".zen-advanced-groups-filter") !== null;
+            const isOpenDropdownMobile = document.querySelector(".zen-dropdown--mobile");
+            const isOpenPeriodPicker = document.querySelector(".zen-filters-bar-period-picker__popup");
+            const isOpenTimePicker = document.querySelector(".zen-time-picker__popup");
+            const isOpenYearPicker = document.querySelector(".zen-parallel-selection-popup");
+            const openedCustomComponents = document.querySelectorAll(`.${CUSTOM_POPUP_COMPONENT_CLASSNAME}`);
+            const isClickInChildPopup = isChildPopup(e.target, sidePanelRef.current)
+                || isOpenDropdownMobile && isChildOf(e.target, isOpenDropdownMobile)
+                || isOpenPeriodPicker && isChildOf(e.target, isOpenPeriodPicker)
+                || isOpenPeriodPicker && isOpenTimePicker && isChildOf(e.target, isOpenTimePicker)
+                || isOpenPeriodPicker && isOpenYearPicker && isChildOf(e.target, isOpenYearPicker)
+                || openedCustomComponents.length && Array.from(openedCustomComponents).some(el => isChildOf(e.target, el));
+            const isClickInPopup = !isClickInChildPopup
+                ? false
+                : isClickInChildPopup;
+            const isClickOnTrigger = triggerRef.current ? e.target === triggerRef.current || isChildOf(e.target, triggerRef.current) : false;
+            if (isClickInPopup || isClickOnTrigger || isGroupsFilterBackButton || isOpenAdvancedDialog) {
+                return;
+            }
+            onHidePanel(SidePanelCloseReason.ClickOutside);
+        };
+        if (renderComponent && readyForFocus && !prevReadyForFocus.current) {
+            const firstFocusable = (_a = sidePanelRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(FOCUSABLE_SELECTOR);
+            prevReadyForFocus.current = readyForFocus;
+            if (!useTrapFocusWithTrigger) {
+                firstFocusable ? firstFocusable.focus() : (_b = sidePanelRef.current) === null || _b === void 0 ? void 0 : _b.focus();
+            }
+        }
+        if (renderComponent) {
+            document.body.addEventListener("click", closeOnClickOutside, true);
+        }
+        else {
+            prevReadyForFocus.current = false;
+        }
+        return () => document.body.removeEventListener("click", closeOnClickOutside, true);
+    }, [renderComponent, readyForFocus, onHidePanel, triggerRef, useTrapFocusWithTrigger]);
+    useEffect(() => {
+        setIsOpen(isOpen);
+    }, [isOpen, setIsOpen]);
+    const positioningClass = panelPosition === "left"
+        ? "zen-side-panel--left-positioned"
+        : panelPosition === "right" ? "zen-side-panel--right-positioned" : "zen-side-panel--bottom-positioned";
+    const memoizedChildForRender = useMemo(() => isOpen || renderComponent ? children : null, [children, isOpen, renderComponent]);
+    const memoizedStyles = useMemo(() => {
+        if (width && !isMobile && panelPosition !== "bottom") {
+            return { style: { width: formatWidth(width) } };
+        }
+        return {};
+    }, [width, isMobile, panelPosition]);
+    if (!renderComponent && !isOpen) {
+        return null;
+    }
+    return createPortal(_jsx("div", Object.assign({ ref: sidePanelRef, id: popupId }, memoizedStyles, { role: "dialog", "aria-label": label, onTransitionEnd: handleTransitionEnd, className: classNames([
+            "zen-side-panel",
+            driveClassName || "",
+            dark ? "zen-dark" : "",
+            showContent ? "zen-side-panel--shown" : "",
+            positioningClass,
+            className !== null && className !== void 0 ? className : ""
+        ]), children: memoizedChildForRender })), document.fullscreenElement || document.body);
+};
+SidePanel.Cell = SidePanelCell;

package/esm/sidePanel/sidePanelCell/sidePanelCell.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import "./sidePanelCell.less";
+import { IZenComponentProps } from "../../commonHelpers/zenComponent";
+export interface ISidePanelCell extends IZenComponentProps {
+    title: string;
+    footer?: JSX.Element;
+    withoutSidePaddings?: boolean;
+    role?: string;
+    labelledBy?: string;
+    titleId?: string;
+}
+export declare const SidePanelCell: React.FC<ISidePanelCell>;

package/esm/sidePanel/sidePanelCell/sidePanelCell.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { classNames } from "../../commonHelpers/classNames/classNames";
+export const SidePanelCell = ({ className, children, footer, title, withoutSidePaddings, role, labelledBy, titleId }) => _jsxs("div", { role: role, "aria-labelledby": labelledBy, className: classNames(["zen-side-panel-cell", withoutSidePaddings ? "zen-side-panel-cell--no-padding" : "", className !== null && className !== void 0 ? className : ""]), children: [_jsx("div", { className: "zen-side-panel-cell__title", id: titleId, children: title }), _jsx("div", { className: "zen-side-panel-cell__content", children: children }), footer
+            ? _jsx("div", { className: "zen-side-panel-cell__footer", children: footer })
+            : null] });

package/esm/skeleton/lazyContent.d.ts

@@ -0,0 +1,37 @@
+import { ReactNode } from "react";
+import { TSkeletonType } from "./skeleton";
+type TPromisedFunction<T> = () => Promise<T>;
+export type TLazyContent<T> = T | {
+    data: T;
+    isLoading: boolean;
+} | TPromisedFunction<T>;
+interface IStaticContent<T> {
+    content: T;
+    error?: undefined;
+    errorHandler?: (e: any) => ReactNode;
+}
+interface ILoadingContent<T> {
+    content: {
+        data: T;
+        isLoading: boolean;
+    };
+    error: Error | null;
+    errorHandler: (e: any) => ReactNode;
+}
+interface IPromisable<T> {
+    content: TPromisedFunction<T>;
+    errorHandler: (e: any) => ReactNode;
+    error?: undefined;
+}
+export type TPromisableProps<T> = ILoadingContent<T> | IPromisable<T> | IStaticContent<T>;
+interface IPromisableBaseProps<T> {
+    width?: number;
+    height?: number;
+    type?: TSkeletonType;
+    render?: (value: T) => ReactNode;
+    cache?: boolean;
+    isVisible?: boolean;
+}
+type TProps<T> = IPromisableBaseProps<T> & TPromisableProps<T>;
+export declare const LazyContent: <T, _>({ content, width, height, type, render, errorHandler, error, cache, isVisible }: TProps<T>) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/esm/skeleton/lazyContent.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { Skeleton } from "./skeleton";
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export const LazyContent = ({ content, width, height, type, render, errorHandler, error, cache = true, isVisible = true }) => {
+    const [isLoading, setIsLoading] = useState(false);
+    const [value, setValue] = useState();
+    const [cachedValue, setCachedValue] = useState();
+    useEffect(() => {
+        if (!isVisible) {
+            return;
+        }
+        if (content instanceof Function) {
+            setIsLoading(true);
+            const promise = cache && cachedValue ?
+                Promise.resolve(cachedValue) :
+                content();
+            promise
+                .then((result) => {
+                setValue(result);
+                if (cache) {
+                    setCachedValue(result);
+                }
+            })
+                .catch((e) => {
+                const errorValue = errorHandler && errorHandler(e);
+                errorValue && setValue(errorValue);
+            })
+                .finally(() => {
+                setIsLoading(false);
+            });
+            return;
+        }
+        if (content && typeof content === "object" && "isLoading" in content && "data" in content) {
+            if (error) {
+                const errorValue = errorHandler(error);
+                errorValue && setValue(errorValue);
+                setIsLoading(false);
+                return;
+            }
+            setIsLoading(content.isLoading);
+            setValue(content.data);
+            return;
+        }
+        setValue(content);
+        setIsLoading(false);
+    }, [content, errorHandler, error, cache, cachedValue, isVisible]);
+    if (!isVisible) {
+        return null;
+    }
+    return _jsx(_Fragment, { children: isLoading ? (_jsx(Skeleton, { type: type, width: width, height: height })) : ((value && render) ? render(value) : value) });
+};

package/esm/skeleton/skeleton.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import "./skeleton.less";
+export type TSkeletonType = "pill" | "button" | "text";
+export interface ISkeleton {
+    height?: number;
+    width?: number;
+    type?: TSkeletonType;
+    className?: string;
+}
+export declare const Skeleton: React.FC<ISkeleton>;

package/esm/skeleton/skeleton.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { classNames } from "../commonHelpers/classNames/classNames";
+import { useLanguage } from "../utils/localization/useLanguage";
+export const Skeleton = ({ type = "text", height, width = "100%", className }) => {
+    const { translate } = useLanguage();
+    const classNameList = classNames(["zen-skeleton", `zen-skeleton--${type}`, className || ""]);
+    return _jsx("div", { role: "progressbar", "aria-label": translate("Loading"), style: { height: height, width: width ? width : "100%" }, className: classNameList.trim() });
+};

package/esm/skeletonList/skeletonList.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import "./skeletonList.less";
+import { IZenComponentProps } from "./../commonHelpers/zenComponent";
+type ISkeletonListSize = "small" | "medium" | "large";
+export interface ISkeletonList extends Omit<IZenComponentProps, "children"> {
+    width?: number;
+    size?: ISkeletonListSize;
+}
+export declare const SkeletonList: React.FC<ISkeletonList>;
+export {};

package/esm/skeletonList/skeletonList.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { classNames } from "../commonHelpers/classNames/classNames";
+import { Skeleton } from "../skeleton/skeleton";
+export const SkeletonList = ({ className, width, size = "small" }) => {
+    const styleWidth = width ? { style: { width: `${width}px` } } : {};
+    const itemWidth = 115;
+    const itemHeight = 14;
+    const getSizeCount = (value) => {
+        if (value === "large") {
+            return 12;
+        }
+        if (value === "medium") {
+            return 8;
+        }
+        return 4;
+    };
+    const count = getSizeCount(size);
+    return _jsx("div", Object.assign({}, styleWidth, { className: classNames(["zen-skeleton-list", className || ""]), children: Array.from({ length: count }, (_, index) => (_jsx(Skeleton, { width: itemWidth, height: itemHeight }, `skeleton-${index}`))) }));
+};

package/esm/sortControl/sortControl.d.ts

@@ -0,0 +1,25 @@
+import React from "react";
+import { ISelectListItem } from "../selectList/selectListItem";
+import "./sortControl.less";
+import { IZenComponentProps } from "../commonHelpers/zenComponent";
+export declare enum SortDirections {
+    Ascending = "asc",
+    Descending = "desc"
+}
+export interface ISortControl extends IZenComponentProps {
+    id?: string;
+    buttonText?: string;
+    /**
+    * @deprecated
+    * @param translate - will be removed in the next major release
+    */
+    translate?: (s: string) => string;
+    disabled?: boolean;
+    sortDirection?: SortDirections;
+    directionIcon?: boolean;
+    items: ISelectListItem[];
+    sortBy: string;
+    onChange: (direction: SortDirections, optionId: string) => void;
+}
+export declare const SortControl: React.FC<ISortControl>;
+export declare const TRANSLATIONS: string[];

package/esm/sortControl/sortControl.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useState } from "react";
+import { CheckboxState } from "../checkbox/checkboxState";
+import { Popup } from "../popup/popup";
+import { SelectList } from "../selectList/selectList";
+import { classNames } from "../commonHelpers/classNames/classNames";
+import { useLanguage } from "../utils/localization/useLanguage";
+import { useDriveClassName } from "../utils/theme/useDriveClassName";
+import { useDrive } from "../utils/theme/useDrive";
+import { IconChevronDownSmall } from "../icons/iconChevronDownSmall";
+import { IconFilter3Asc } from "../icons/iconFilter3Asc";
+import { IconFilter3Desc } from "../icons/iconFilter3Desc";
+const MENU_POSITION = "bottom-left";
+const BUTTON_TEXT_DEFAULT = "Sort by";
+export var SortDirections;
+(function (SortDirections) {
+    SortDirections["Ascending"] = "asc";
+    SortDirections["Descending"] = "desc";
+})(SortDirections || (SortDirections = {}));
+export const SortControl = ({ buttonText = BUTTON_TEXT_DEFAULT, id = "", sortBy, onChange, sortDirection = SortDirections.Ascending, directionIcon = true, disabled = false, className = "", items }) => {
+    //allows for the resetting of the popup once a new option has been selected by assigning a random number as a key, changing it when an option is changed
+    const [popupKey, setPopupKey] = useState(Math.random() * (999999999 - 0) + 0);
+    const [isOpen, setIsOpen] = useState(false);
+    const { translate } = useLanguage();
+    const driveComponentClassName = useDriveClassName("zen-sort-container");
+    const isDrive = useDrive();
+    const buttonTextValue = buttonText === BUTTON_TEXT_DEFAULT ? translate(BUTTON_TEXT_DEFAULT) : buttonText;
+    const onOptionsToggle = (isCurrentlyOpen) => {
+        setIsOpen(isCurrentlyOpen);
+    };
+    const onSortDirectionToggle = () => {
+        if (sortDirection === SortDirections.Ascending) {
+            onChange(SortDirections.Descending, sortBy);
+        }
+        else {
+            onChange(SortDirections.Ascending, sortBy);
+        }
+    };
+    const onOptionChange = useCallback((newItemState) => {
+        [...newItemState].forEach(([k, v]) => {
+            if (v === CheckboxState.On) {
+                onChange(sortDirection === SortDirections.Ascending ? SortDirections.Ascending : SortDirections.Descending, k);
+                setPopupKey(Math.random() * (999999999 - 0) + 0);
+            }
+        });
+    }, [onChange, sortDirection]);
+    const isSingleItem = items.length === 1;
+    return _jsxs("div", { id: id, className: classNames(["zen-sort-container", driveComponentClassName || "", className]), children: [_jsxs("button", { type: "button", className: classNames(["zen-sort-container__button", isSingleItem ? "" : "zen-sort-container__button--left-item"]), onClick: () => onSortDirectionToggle(), disabled: disabled, title: translate("Change sort direction"), "aria-label": translate("Change sort direction"), children: [directionIcon
+                        ? sortDirection === SortDirections.Ascending
+                            ? _jsx(IconFilter3Asc, { className: "zen-sort-container__sort-icon", size: isDrive ? "huge" : "large" })
+                            : _jsx(IconFilter3Desc, { className: "zen-sort-container__sort-icon", size: isDrive ? "huge" : "large" }) : _jsx(_Fragment, {}), _jsxs("span", { className: "zen-sort-container__text-block", children: [buttonTextValue && _jsxs("span", { children: [buttonTextValue, ": "] }), _jsx("span", { children: (items.find((item) => item.id === sortBy) || items[0]).children })] })] }), isSingleItem
+                ? ""
+                : _jsx(Popup, { trigger: (_jsx("button", { type: "button", className: "zen-sort-container__button zen-sort-container__button--small zen-sort-container__button--right-item", disabled: disabled, title: translate("Sort by"), children: _jsx(IconChevronDownSmall, { className: isOpen ? "zen-sort-container__arrow-icon--up" : "zen-sort-container__arrow-icon--down", size: isDrive ? "huge" : "large" }) })), alignment: MENU_POSITION, onOpenChange: (isCurrentlyOpen) => onOptionsToggle(isCurrentlyOpen), children: _jsx(SelectList, { id: "sortControlSelectList", title: translate("Sort Options"), onChange: (itemMap) => onOptionChange(itemMap), items: [...items.reduce((acc, obj) => acc.set(obj.id, Object.assign(Object.assign({}, obj), { state: obj.id === sortBy ? CheckboxState.On : CheckboxState.Off })), new Map()).values()] }) }, popupKey)] });
+};
+export const TRANSLATIONS = [
+    "Sort by",
+    "Sort Options",
+    "Change sort direction"
+];