@geotab/zenith 1.26.6-beta.1 → 1.26.6-beta.2

package/package.json

@@ -1,19 +1,15 @@
 {
   "name": "@geotab/zenith",
-  "version": "1.26.6-beta.1",
+  "version": "1.26.6-beta.2",
   "description": "Zenith components library on React",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
-  "module": "esm/index.js",
   "sideEffects": [
     "**/*.css",
     "**/*.less",
     "**/react-chartjs/dateAdapter.ts",
     "**/react-chartjs/dateAdapter.js"
   ],
-  "publishConfig": {
-    "access": "public"
-  },
   "scripts": {
     "test": "npm run clean && npm run test-build && jest",
     "start": "npm run storybook --loglevel verbose",
@@ -85,8 +81,7 @@
     "react-dom": "^18.2.0"
   },
   "files": [
-    "./dist/",
-    "./esm/"
+    "./dist/"
   ],
   "browserslist": {
     "production": [

package/esm/absolute/absolute.d.ts

@@ -1,27 +0,0 @@
-import React from "react";
-import "./absolute.less";
-import { IZenComponentProps } from "../commonHelpers/zenComponent";
-import { IAlignment } from "../utils/positioningUtils/alignments";
-export type TAlignment = "top" | "top-left" | "top-right" | "left" | "left-top" | "left-bottom" | "right" | "right-top" | "right-bottom" | "bottom" | "bottom-left" | "bottom-right";
-export type TTrapFocus = "on" | "off" | "withTrigger";
-export interface IAbsolute extends IZenComponentProps {
-    triggerRef: React.RefObject<HTMLElement>;
-    alignment?: TAlignment;
-    stateFullChilds?: boolean;
-    id: string;
-    isOpen: boolean;
-    className?: string;
-    paddingX?: number;
-    paddingY?: number;
-    inline?: boolean;
-    onOpenChange: (isOpen: boolean) => void;
-    useTrapFocusWithTrigger?: TTrapFocus;
-    shouldHoldScroll?: boolean;
-    role?: string;
-    ariaLabel?: string;
-    ariaLabelledby?: string;
-    alignmentsFn?: IAlignment;
-    recalculateOnScroll?: boolean;
-    recalculateTrigger?: boolean;
-}
-export declare const Absolute: React.FC<IAbsolute>;

package/esm/absolute/absolute.js

@@ -1,120 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef } from "react";
-import { classNames } from "../commonHelpers/classNames/classNames";
-import { createPortal } from "react-dom";
-import { FOCUSABLE_SELECTOR } from "../utils/focusableSelector";
-import { isChildPopup } from "../utils/positioningUtils/isChildPopup";
-import { useEscape } from "../commonHelpers/hooks/useEscape";
-import { useResize } from "../commonHelpers/hooks/useResize";
-import { useTrapFocus } from "../commonHelpers/hooks/useTrapFocus";
-import { isChildOf } from "../utils/isChildOf";
-import { isFocusable } from "../dialog/dialogHelpers";
-import { calculatePosition as calculatePos } from "../utils/positioningUtils/calculatePosition";
-import { useArrowKey } from "../commonHelpers/hooks/useArrowKey";
-import { themeContext } from "../utils/theme/themeContext";
-import { useScroll } from "../commonHelpers/hooks/useScroll";
-import { getScrollableParent } from "../utils/getScrollableParent";
-export 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 = useRef(null);
-    const prevScroll = useRef(0);
-    const { dark } = useContext(themeContext);
-    const onScrollHandler = (e) => {
-        var _a;
-        prevScroll.current = (_a = e.target) === null || _a === void 0 ? void 0 : _a.scrollTop;
-    };
-    const accessibleAttr = useMemo(() => {
-        if (!role) {
-            return {};
-        }
-        return Object.assign(Object.assign({ role }, (ariaLabelledby ? { "aria-labelledby": ariaLabelledby } : {})), (ariaLabel && !ariaLabelledby ? { "aria-label": ariaLabel } : {}));
-    }, [role, ariaLabelledby, ariaLabel]);
-    const darkClassName = dark ? "zen-dark" : "";
-    const renderPopup = () => {
-        if (isOpen) {
-            const result = _jsx("div", Object.assign({}, accessibleAttr, { ref: popupRef, id: id, onScroll: shouldHoldScroll ? onScrollHandler : undefined, className: classNames(["zen-absolute", darkClassName, className || ""]), children: children }));
-            if (inline) {
-                return result;
-            }
-            return createPortal(result, document.fullscreenElement || document.body);
-        }
-        return "";
-    };
-    const parent = useMemo(() => {
-        if (!isOpen || !recalculateOnScroll) {
-            return null;
-        }
-        return getScrollableParent(triggerRef.current);
-    }, [triggerRef, isOpen, recalculateOnScroll]);
-    const calculatePosition = useCallback(() => calculatePos(triggerRef, popupRef, paddingX, paddingY, inline, alignment, alignmentsFn, parent ? parent : undefined), [triggerRef, paddingX, paddingY, inline, alignment, alignmentsFn, popupRef, parent]);
-    useResize(calculatePosition, isOpen);
-    useScroll(calculatePosition, isOpen, parent);
-    useLayoutEffect(calculatePosition, [isOpen, children, recalculateTrigger, calculatePosition]);
-    function handleEscape() {
-        onOpenChange(false);
-        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();
-    }
-    const condition = useCallback(() => useTrapFocusWithTrigger === "off" ? false : true, [useTrapFocusWithTrigger]);
-    useTrapFocus(popupRef, useTrapFocusWithTrigger === "withTrigger" ? triggerRef : undefined, isOpen, condition);
-    useEscape(popupRef, handleEscape, isOpen);
-    useArrowKey(popupRef, handleEscape, isOpen);
-    useEffect(() => {
-        var _a, _b;
-        const closeOnClickOutside = (e) => {
-            if (!popupRef.current) {
-                return;
-            }
-            if (!e.target) {
-                return;
-            }
-            const isClickInPopup = isChildPopup(e.target, popupRef.current);
-            const isClickOnTrigger = triggerRef.current ? e.target === triggerRef.current || isChildOf(e.target, triggerRef.current) : false;
-            if (isClickInPopup || isClickOnTrigger || stateFullChilds) {
-                return;
-            }
-            onOpenChange(false);
-        };
-        if (isOpen) {
-            document.body.addEventListener("click", closeOnClickOutside, true);
-            const firstFocusable = (_a = popupRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(FOCUSABLE_SELECTOR);
-            if (useTrapFocusWithTrigger !== "withTrigger") {
-                if (firstFocusable) {
-                    firstFocusable.focus();
-                }
-                else {
-                    (_b = popupRef.current) === null || _b === void 0 ? void 0 : _b.focus();
-                }
-            }
-            return () => {
-                document.body.removeEventListener("click", closeOnClickOutside, true);
-            };
-        }
-        return () => { };
-    }, [isOpen, onOpenChange, triggerRef, useTrapFocusWithTrigger, stateFullChilds]);
-    useEffect(() => {
-        var _a;
-        if (isOpen) {
-            (_a = popupRef.current) === null || _a === void 0 ? void 0 : _a.removeAttribute("style");
-            calculatePosition();
-        }
-        return () => { };
-    }, [calculatePosition, children, isOpen]);
-    useEffect(() => {
-        if (isOpen) {
-            if (popupRef.current && prevScroll.current && shouldHoldScroll) {
-                popupRef.current.scrollTop = prevScroll.current;
-            }
-        }
-        else {
-            prevScroll.current = 0;
-        }
-    }, [children, isOpen, shouldHoldScroll]);
-    return renderPopup();
-};

package/esm/accordion/accordion.d.ts

@@ -1,12 +0,0 @@
-import React from "react";
-import { IAccordionItem } from "./accordionItem/accordionItem";
-import "./accordion.less";
-import { IZenGridItem } from "../commonHelpers/zenComponent";
-interface IAccordion extends IZenGridItem {
-    data?: Omit<IAccordionItem, "isActive" | "onClick">[];
-    activeIds?: string[];
-    className?: string;
-    onItemClick?: (id: string) => void;
-}
-export declare const Accordion: React.FC<IAccordion>;
-export {};

package/esm/accordion/accordion.js

@@ -1,8 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { createElement as _createElement } from "react";
-import { AccordionItem } from "./accordionItem/accordionItem";
-import { classNames } from "../commonHelpers/classNames/classNames";
-export const Accordion = ({ data = [], className = "", activeIds = [], onItemClick }) => {
-    const fullClassName = classNames(["zen-accordion", className]);
-    return _jsx("div", { className: fullClassName, children: data.map((item) => _createElement(AccordionItem, Object.assign({}, item, { key: item.id, isActive: activeIds.indexOf(item.id) !== -1, onClick: () => onItemClick && onItemClick(item.id) }))) });
-};

package/esm/accordion/accordionItem/accordionItem.d.ts

@@ -1,10 +0,0 @@
-import React from "react";
-export interface IAccordionItem {
-    id: string;
-    title: string;
-    content: JSX.Element;
-    isActive: boolean;
-    onClick: React.MouseEventHandler<HTMLButtonElement>;
-    className?: string;
-}
-export declare const AccordionItem: React.FC<IAccordionItem>;

package/esm/accordion/accordionItem/accordionItem.js

@@ -1,8 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useId } from "react";
-import { classNames } from "../../commonHelpers/classNames/classNames";
-import { IconChevronBottom } from "../../icons/iconChevronBottom";
-export const AccordionItem = ({ title, content, isActive, onClick, id }) => {
-    const ariaControlsId = useId();
-    return (_jsxs(_Fragment, { children: [_jsx("h3", { className: "zen-accordion__header", children: _jsxs("button", { type: "button", "aria-expanded": isActive, "aria-controls": ariaControlsId, className: "zen-accordion__header-button", id: id, onClick: onClick, children: [title, _jsx(IconChevronBottom, { size: "large", className: classNames(["zen-accordion__header-arrow", isActive ? "zen-accordion__header-arrow--rotated" : ""]) })] }) }), _jsx("div", { id: ariaControlsId, "aria-labelledby": id, role: "region", className: classNames(["zen-accordion__content", isActive ? "" : "zen-accordion__content--hidden"]), children: content })] }));
-};

package/esm/advancedGroupsFilter/advancedGroupsFilter.d.ts

@@ -1,22 +0,0 @@
-/// <reference types="react" />
-import "./advancedGroupsFilter.less";
-import { IFilterState } from "../groupsFilter/groupsFilterInterfaces";
-import { IZenComponentProps } from "../commonHelpers/zenComponent";
-import { IDropdownItem } from "../dropdown/dropdown";
-export interface IAdvancedGroupsFilter extends IZenComponentProps {
-    isOpen: boolean;
-    onClose: () => void;
-    onApply: (state: IFilterState) => void;
-    state?: IFilterState;
-    /**
-    * @deprecated
-    * @param translate - will be removed in the next major release
-    */
-    translate?: (s: string) => string;
-    getData: (signal?: AbortSignal, searchValue?: string) => Promise<IDropdownItem[]>;
-    errorHandler: (e: Error) => void;
-    dataItems?: IDropdownItem[];
-    tooltipText?: string;
-}
-export declare const AdvancedGroupsFilter: React.FC<IAdvancedGroupsFilter>;
-export declare const TRANSLATIONS: string[];

package/esm/advancedGroupsFilter/advancedGroupsFilter.js

@@ -1,38 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from "react";
-import { prepareCurrentFilterState, prepareToFilterState } from "./advancedGroupsFilterFormHelper";
-import { AdvancedGroupsFilterForm, TRANSLATIONS as AdvancedGroupsFilterFormTranslations } from "./advancedGroupsFilterForm";
-import { classNames } from "../commonHelpers/classNames/classNames";
-import { useLanguage } from "../utils/localization/useLanguage";
-import { Modal } from "../modal/modal";
-export const AdvancedGroupsFilter = ({ isOpen, onClose, onApply, state, className, getData, errorHandler, dataItems, tooltipText }) => {
-    //const dropdownFocusedListClasses = ["zen-dropdown-searchable-trigger__input", "zen-dropdown-searchable-trigger__popup-trigger"];
-    const [currentState, setCurrentState] = useState(prepareCurrentFilterState(state));
-    const [dataItemsValue, setDataItemsValue] = useState(dataItems || []);
-    const { translate } = useLanguage();
-    const handleClose = () => {
-        onClose();
-    };
-    useEffect(() => {
-        const timeoutId = setTimeout(() => {
-            if (!dataItemsValue.length) {
-                getData().then((data) => {
-                    setDataItemsValue(data);
-                }).catch((e) => {
-                    errorHandler(e);
-                });
-            }
-        });
-        return () => clearTimeout(timeoutId);
-    }, [getData, errorHandler, dataItemsValue.length]);
-    const handleApply = () => {
-        onApply(prepareToFilterState(currentState));
-    };
-    return _jsxs(Modal, { title: translate("Advanced groups filter"), className: classNames(["zen-advanced-groups-filter", className || ""]), isOpen: isOpen, onClose: handleClose, children: [_jsx(AdvancedGroupsFilterForm, { dataItems: dataItemsValue, getData: getData, errorHandler: errorHandler, state: currentState, onStateChange: setCurrentState, tooltipText: tooltipText }), _jsx(Modal.SecondaryButton, { onClick: onClose, children: translate("Cancel") }), _jsx(Modal.PrimaryButton, { onClick: handleApply, children: translate("Apply") })] });
-};
-export const TRANSLATIONS = [
-    ...AdvancedGroupsFilterFormTranslations,
-    "Cancel",
-    "Apply",
-    "Advanced groups filter"
-];

package/esm/advancedGroupsFilter/advancedGroupsFilterForm.d.ts

@@ -1,19 +0,0 @@
-import React from "react";
-import "./advancedGroupsFilterForm.less";
-import { ICurrentAdvancedState } from "./advancedGroupsFilterFormHelper";
-import { IDropdownItem } from "../dropdown/dropdown";
-export interface IAdvancedGroupsFilterForm {
-    state: ICurrentAdvancedState[];
-    dataItems: IDropdownItem[];
-    onStateChange: (value: ICurrentAdvancedState[]) => void;
-    /**
-    * @deprecated
-    * @param translate - will be removed in the next major release
-    */
-    translate?: (s: string) => string;
-    getData: (signal?: AbortSignal, searchValue?: string) => Promise<IDropdownItem[]>;
-    errorHandler: (e: Error) => void;
-    tooltipText?: string;
-}
-export declare const AdvancedGroupsFilterForm: React.FC<IAdvancedGroupsFilterForm>;
-export declare const TRANSLATIONS: string[];

package/esm/advancedGroupsFilter/advancedGroupsFilterForm.js

@@ -1,41 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ButtonIconPosition, TextIconButton } from "../textIconButton/textIconButton";
-import { AdvancedGroupsFilterFormSection, TRANSLATIONS as AdvancedGroupsFilterFormSectionTranslations } from "./advancedGroupsFilterFormSection";
-import { getDefaultFilterState } from "../groupsFilter/groupsHelper";
-import { RelationOperator } from "../groupsFilter/groupsFilterInterfaces";
-import { IconPlus } from "../icons/iconPlus";
-import { useLanguage } from "../utils/localization/useLanguage";
-export const AdvancedGroupsFilterForm = ({ state, onStateChange, getData, errorHandler, dataItems, tooltipText }) => {
-    const { translate } = useLanguage();
-    const handleAddNewCondition = () => {
-        onStateChange([...state, { sectionState: getDefaultFilterState(), interSectionRelation: RelationOperator.OR }]);
-    };
-    const handleInterSectionRelationChange = (idx) => {
-        const newState = [...state.slice(0, idx), Object.assign(Object.assign({}, state[idx]), { interSectionRelation: state[idx].interSectionRelation === RelationOperator.OR ? RelationOperator.AND : RelationOperator.OR }), ...state.slice(idx + 1, state.length)];
-        onStateChange(newState);
-    };
-    const handleRelationChange = (ind) => {
-        const newState = [...state.slice(0, ind), Object.assign(Object.assign({}, state[ind]), { sectionState: Object.assign(Object.assign({}, state[ind].sectionState), { relation: state[ind].sectionState.relation === RelationOperator.OR ? RelationOperator.AND : RelationOperator.OR }) }), ...state.slice(ind + 1, state.length)];
-        onStateChange(newState);
-    };
-    const handleStateChange = (ind, value) => {
-        const newState = [...state.slice(0, ind), Object.assign(Object.assign({}, state[ind]), { sectionState: Object.assign(Object.assign({}, state[ind].sectionState), { items: value.map(el => ({ id: el })) }) }), ...state.slice(ind + 1, state.length)];
-        onStateChange(newState);
-    };
-    const handleRemoveCondition = (e) => {
-        if (state.length === 1) {
-            return;
-        }
-        const ind = e.target.dataset.item ? Number(e.target.dataset.item) : undefined;
-        const newState = ind !== undefined ? [...state.slice(0, ind),
-            ...state.slice(ind + 1, state.length)
-        ] : state;
-        onStateChange(newState);
-    };
-    return _jsxs("div", { className: "zen-advanced-groups-filter-form", children: [_jsx("div", { className: "zen-advanced-groups-filter-form__description", children: translate("Create conditions below to filter the entire system.") }), _jsx("ul", { className: "zen-advanced-groups-filter-form__sections", children: state.map((el, ind) => _jsx(AdvancedGroupsFilterFormSection, { state: el.sectionState, itemId: ind, interSectionRelation: ind === 0 || state.length === 1 ? undefined : state[ind].interSectionRelation, onInterSectionChange: handleInterSectionRelationChange, onRelationChange: handleRelationChange, onRemoveCondition: handleRemoveCondition, onStateChange: handleStateChange, isHasRemoveConditionButton: state.length > 1, isHasTooltip: ind === 0, tooltipText: tooltipText, getData: getData, errorHandler: errorHandler, dataItems: dataItems }, `form-section_ind-${ind}_${state.length}`)) }), _jsx("div", { className: "zen-form__add-section", children: _jsx(TextIconButton, { className: "zen-advanced-groups-filter-form__add-button", onClick: handleAddNewCondition, iconPosition: ButtonIconPosition.Start, iconSize: "large", icon: IconPlus, children: translate("Add new condition") }) })] });
-};
-export const TRANSLATIONS = [
-    ...AdvancedGroupsFilterFormSectionTranslations,
-    "Create conditions below to filter the entire system.",
-    "Add new condition"
-];

package/esm/advancedGroupsFilter/advancedGroupsFilterFormHelper.d.ts

@@ -1,7 +0,0 @@
-import { IFilterState, RelationOperator } from "../groupsFilter/groupsFilterInterfaces";
-export interface ICurrentAdvancedState {
-    sectionState: IFilterState;
-    interSectionRelation: RelationOperator;
-}
-export declare const prepareCurrentFilterState: (state?: IFilterState) => ICurrentAdvancedState[];
-export declare const prepareToFilterState: (state: ICurrentAdvancedState[]) => IFilterState<import("..").IEntityWithId>;

package/esm/advancedGroupsFilter/advancedGroupsFilterFormHelper.js

@@ -1,47 +0,0 @@
-import { DEFAULT_RELATION_OPERATOR, getDefaultFilterState, isEntireOrganization, simplifyFilterState, toFilterState } from "../groupsFilter/groupsHelper";
-import { RelationOperator } from "../groupsFilter/groupsFilterInterfaces";
-import { isFilterStateLeafItem } from "./advancedGroupsFilterHelper";
-export const prepareCurrentFilterState = (state) => {
-    if (!state) {
-        return [{ sectionState: getDefaultFilterState(), interSectionRelation: DEFAULT_RELATION_OPERATOR }];
-    }
-    const sectionItems = [];
-    const addToSelections = (item) => sectionItems.push(item);
-    const setItemState = (parentItem, prevRelation = DEFAULT_RELATION_OPERATOR) => {
-        if (!isFilterStateLeafItem(parentItem)) {
-            return parentItem.items.map(item => setItemState(item, parentItem.relation));
-        }
-        return addToSelections({
-            interSectionRelation: prevRelation,
-            sectionState: Object.assign({}, parentItem)
-        });
-    };
-    setItemState(state);
-    return sectionItems;
-};
-export const prepareToFilterState = (state) => {
-    if (state.length === 1) {
-        return state[0].sectionState;
-    }
-    const getState = (sect) => {
-        const getId = entity => entity.id;
-        return Object.assign(Object.assign({}, sect), { sectionState: Object.assign(Object.assign({}, sect.sectionState), { items: sect.sectionState.items.map(getId).sort() }) });
-    };
-    const preparedState = state.reduce((prevState, section) => {
-        const itemState = getState(section);
-        if (state.length > 1 && isEntireOrganization(itemState.sectionState) && itemState.sectionState.relation === RelationOperator.OR) {
-            return prevState;
-        }
-        if (!Object.keys(prevState).length) {
-            return itemState.sectionState;
-        }
-        return {
-            relation: itemState.interSectionRelation,
-            items: [
-                prevState,
-                itemState.sectionState
-            ]
-        };
-    }, {});
-    return Object.keys(preparedState).length ? toFilterState(simplifyFilterState(preparedState)) : getDefaultFilterState();
-};

package/esm/advancedGroupsFilter/advancedGroupsFilterFormSection.d.ts

@@ -1,26 +0,0 @@
-import React from "react";
-import { IFilterState, RelationOperator } from "../groupsFilter/groupsFilterInterfaces";
-import { IZenComponentProps } from "../commonHelpers/zenComponent";
-import { IDropdownItem } from "../dropdown/dropdown";
-export interface IAdvancedGroupsFilterFormSection extends IZenComponentProps {
-    state: IFilterState;
-    dataItems: IDropdownItem[];
-    itemId: number;
-    interSectionRelation: RelationOperator | undefined;
-    onInterSectionChange: (itemId: number) => void;
-    onRelationChange: (itemId: number) => void;
-    onRemoveCondition: (e: any) => void;
-    onStateChange: (ind: number, value: string[]) => void;
-    /**
-    * @deprecated
-    * @param translate - will be removed in the next major release
-    */
-    translate?: (s: string) => string;
-    getData: (signal?: AbortSignal, searchValue?: string) => Promise<IDropdownItem[]>;
-    errorHandler: (e: Error) => void;
-    isHasRemoveConditionButton: boolean;
-    isHasTooltip?: boolean;
-    tooltipText?: string;
-}
-export declare const AdvancedGroupsFilterFormSection: React.FC<IAdvancedGroupsFilterFormSection>;
-export declare const TRANSLATIONS: string[];

package/esm/advancedGroupsFilter/advancedGroupsFilterFormSection.js

@@ -1,75 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useCallback, useEffect, useId, useRef } from "react";
-import { GroupButton } from "../groupButton/groupButton";
-import { RelationOperator } from "../groupsFilter/groupsFilterInterfaces";
-import { AdvancedGroupsFilterSectionTooltip, TRANSLATIONS as AdvancedGroupsFilterSectionTooltipTranslations } from "./advancedGroupsFilterSectionTooltip";
-import { Dropdown, TRANSLATIONS as DropdownTranslations } from "../dropdown/dropdown";
-import { ComboboxSelected, TRANSLATIONS as ComboboxSelectedTranslations } from "../comboboxSelected/comboboxSelected";
-import { getCurrentSelectionFromIds } from "./advancedGroupsFilterHelper";
-import { ENTIRE_ORGANIZATION_GROUP_ID } from "../groupsFilter/groupsHelper";
-import { useLanguage } from "../utils/localization/useLanguage";
-import { FOCUSABLE_SELECTOR } from "../utils/focusableSelector";
-export const AdvancedGroupsFilterFormSection = ({ state, interSectionRelation, itemId, onInterSectionChange, onRelationChange, onRemoveCondition, onStateChange, getData, errorHandler, dataItems, isHasRemoveConditionButton, isHasTooltip, tooltipText }) => {
-    const { translate } = useLanguage();
-    const inputItem = useId();
-    const [currentSelection, setCurrentSelection] = React.useState(getCurrentSelectionFromIds(state.items, dataItems));
-    const isPrevEmptyComboItems = useRef(dataItems.length === 0);
-    const comboboxRef = useRef(null);
-    const pillBoxRef = useRef(null);
-    const handleInterSectionRelationChange = () => {
-        onInterSectionChange(itemId);
-    };
-    const handleFocusOnRemove = useCallback((newSelectedFirstItem) => {
-        var _a, _b, _c;
-        if (newSelectedFirstItem) {
-            const pillBoxElement = (_a = pillBoxRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(`.zen-pill-box__pill[data-id="${newSelectedFirstItem}"]`);
-            const focusable = pillBoxElement ?
-                [...Array.from(pillBoxElement.querySelectorAll(FOCUSABLE_SELECTOR))] : undefined;
-            (_b = focusable === null || focusable === void 0 ? void 0 : focusable[0]) === null || _b === void 0 ? void 0 : _b.focus();
-        }
-        else {
-            const focusable = comboboxRef.current ? [...Array.from(comboboxRef.current.querySelectorAll(FOCUSABLE_SELECTOR))] : undefined;
-            (_c = focusable === null || focusable === void 0 ? void 0 : focusable[0]) === null || _c === void 0 ? void 0 : _c.focus();
-        }
-    }, []);
-    const handleRelationChange = () => {
-        onRelationChange(itemId);
-    };
-    const handleRemove = (item) => {
-        var _a;
-        const newValue = currentSelection.filter(el => el.id !== item);
-        setCurrentSelection(newValue);
-        onStateChange(itemId, newValue.map((el) => el.id));
-        handleFocusOnRemove((_a = newValue[0]) === null || _a === void 0 ? void 0 : _a.id);
-    };
-    const handleSelection = (newSelection) => {
-        setCurrentSelection(newSelection);
-        onStateChange(itemId, newSelection.map((el) => el.id));
-    };
-    useEffect(() => {
-        if (isPrevEmptyComboItems.current && dataItems.length > 0) {
-            isPrevEmptyComboItems.current = false;
-            setCurrentSelection(getCurrentSelectionFromIds(state.items, dataItems));
-        }
-    }, [dataItems, state.items]);
-    return _jsxs("li", { className: "zen-advanced-groups-filter-form__section", children: [interSectionRelation ? _jsx("div", { className: "zen-advanced-groups-filter-form__section", children: _jsx("div", { className: "zen-advanced-groups-filter-form__inter-section-switcher", children: _jsx(GroupButton, { onChange: handleInterSectionRelationChange, groupData: [
-                            { name: translate("And"), value: RelationOperator.AND, selected: interSectionRelation === RelationOperator.AND },
-                            { name: translate("Or"), value: RelationOperator.OR, selected: interSectionRelation === RelationOperator.OR }
-                        ] }) }) }) : null, _jsxs("div", { className: "zen-advanced-groups-filter-form__main-section", children: [_jsxs("div", { className: "zen-advanced-groups-filter-form__section-column zen-advanced-groups-filter-form__section-column--left", children: [_jsxs("div", { className: "zen-advanced-groups-filter-form__section-label zen-advanced-groups-filter-form__operator-section", children: [_jsx("div", { className: "zen-advanced-groups-filter-form__operator-label", children: translate("Operator") }), isHasTooltip && _jsx(AdvancedGroupsFilterSectionTooltip, { ariaLabel: "Information", text: tooltipText })] }), _jsx(GroupButton, { onChange: handleRelationChange, groupData: [
-                                    { name: translate("And"), value: RelationOperator.AND, selected: state.relation === RelationOperator.AND },
-                                    { name: translate("Or"), value: RelationOperator.OR, selected: state.relation === RelationOperator.OR }
-                                ] })] }), _jsxs("div", { className: "zen-advanced-groups-filter-form__section-column zen-advanced-groups-filter-form__section-column--right", children: [_jsx("label", { className: "zen-advanced-groups-filter-form__section-label", children: translate("Groups") }), isHasRemoveConditionButton && _jsx("button", { type: "button", className: "zen-advanced-groups-filter-form__remove-button", "data-item": itemId, onClick: onRemoveCondition, children: translate("Remove condition") }), _jsxs("div", { className: "zen-advanced-groups-filter-form__combo-section", children: [_jsx("div", { className: "zen-advanced-groups-filter-form__combo-box", ref: comboboxRef, children: _jsx(Dropdown, { classNamePopup: "zen-advanced-groups-filter-form__popup", getData: getData, errorHandler: errorHandler, dataItems: dataItems, onChange: handleSelection, value: state.items.map((el) => el.id), placeholder: translate("Select groups…"), inputId: `${inputItem}-dropdown-${itemId}`, showCounterPill: true }) }), _jsx("div", { className: "zen-advanced-groups-filter-form__selected-box", ref: pillBoxRef, children: _jsx(ComboboxSelected, { selection: getCurrentSelectionFromIds(state.items, dataItems).map((el) => ({ id: el.id, name: el.name })), onRemove: handleRemove, pillEmptyText: ENTIRE_ORGANIZATION_GROUP_ID }) })] })] })] })] });
-};
-export const TRANSLATIONS = [
-    ...AdvancedGroupsFilterSectionTooltipTranslations,
-    ...DropdownTranslations,
-    ...ComboboxSelectedTranslations,
-    "Operator",
-    "Information",
-    "Groups",
-    "Remove condition",
-    "Remove selection",
-    "Select groups…",
-    "And",
-    "Or"
-];

package/esm/advancedGroupsFilter/advancedGroupsFilterHelper.d.ts

@@ -1,20 +0,0 @@
-import { IFilterState, ILeafStateItem, RelationOperator } from "../groupsFilter/groupsFilterInterfaces";
-import { IEntityWithId } from "../commonHelpers/entity";
-import { IDropdownItem } from "../dropdown/dropdown";
-interface ISelectedNode {
-    id: string;
-    name: string;
-    color: unknown;
-    isOnlyInSelection: boolean;
-}
-export declare const getCurrentSelectionFromIds: (items: IEntityWithId[], comboArr: IDropdownItem[]) => {
-    id: string;
-    name: string | undefined;
-    color: import("../groupsFilter/groupsFilterInterfaces").IColor | undefined;
-}[];
-export interface ISectionState {
-    interSectionRelation: RelationOperator;
-    sectionState: ILeafStateItem<IEntityWithId | ISelectedNode>;
-}
-export declare const isFilterStateLeafItem: <T>(state: IFilterState<T>) => state is ILeafStateItem<T>;
-export {};

package/esm/advancedGroupsFilter/advancedGroupsFilterHelper.js

@@ -1,10 +0,0 @@
-import { isFilterState } from "../groupsFilter/groupsHelper";
-export const getCurrentSelectionFromIds = (items, comboArr) => items.map((item) => {
-    const currentItem = comboArr.find((comboItem) => comboItem.id === item.id);
-    return currentItem ? { id: currentItem.id, name: currentItem.name, color: currentItem.color } : { id: item.id, name: item.id, color: undefined };
-});
-export const isFilterStateLeafItem = (state) => {
-    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-    const items = state.items || [];
-    return !items.length || !items.some(isFilterState);
-};

package/esm/advancedGroupsFilter/advancedGroupsFilterSectionTooltip.d.ts

@@ -1,19 +0,0 @@
-import { FC } from "react";
-import { TooltipSize } from "../tooltip/tooltip";
-import { TAlignment } from "../absolute/absolute";
-import "./advancedGroupsFilterSectionTooltip.less";
-interface IAdvancedGroupsFilterSectionTooltip {
-    className?: string;
-    size?: TooltipSize;
-    alignment?: TAlignment;
-    /**
-    * @deprecated
-    * @param translate - will be removed in the next major release
-    */
-    translate?: (key: string) => string;
-    text?: string;
-    ariaLabel: string;
-}
-export declare const AdvancedGroupsFilterSectionTooltip: FC<IAdvancedGroupsFilterSectionTooltip>;
-export declare const TRANSLATIONS: string[];
-export {};

package/esm/advancedGroupsFilter/advancedGroupsFilterSectionTooltip.js

@@ -1,16 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useRef } from "react";
-import { Tooltip } from "../tooltip/tooltip";
-import { IconInfoCircle } from "../icons/iconInfoCircle";
-import { useLanguage } from "../utils/localization/useLanguage";
-import { classNames } from "../commonHelpers/classNames/classNames";
-export const AdvancedGroupsFilterSectionTooltip = ({ ariaLabel, className = "", size = "auto", alignment = "top", text }) => {
-    const { translate } = useLanguage();
-    const triggerRef = useRef(null);
-    const defaultTooltipText = "Use multiple operators when searching for a specific group. For example, filtering for assets that belong to the Tractor group and the Toronto group displays a list of tractors that belong to the Toronto branch.";
-    const getTrigger = (currentRef, ariaLbl) => (_jsx("button", { type: "button", "aria-label": ariaLbl, className: "zen-advanced-groups-filter-section-tooltip__trigger", ref: currentRef, children: _jsx(IconInfoCircle, { className: "zen-advanced-groups-filter-section-tooltip__trigger-icon", size: "large" }) }));
-    return (_jsx(Tooltip, { className: classNames(["zen-advanced-groups-filter-section-tooltip__item", className || ""]), size: size, alignment: alignment, trigger: getTrigger(triggerRef, translate(ariaLabel)), children: text || translate(defaultTooltipText) }));
-};
-export const TRANSLATIONS = [
-    "Use multiple operators when searching for a specific group. For example, filtering for assets that belong to the Tractor group and the Toronto group displays a list of tractors that belong to the Toronto branch."
-];

package/esm/alert/alert.d.ts

@@ -1,5 +0,0 @@
-import { FC } from "react";
-import { IAlertRaw } from "../alertRaw/alertRaw";
-export interface IAlert extends Omit<IAlertRaw, "id"> {
-}
-export declare const Alert: FC<IAlert>;

package/esm/alert/alert.js

@@ -1,47 +0,0 @@
-import { useContext, useEffect, useId } from "react";
-import { FeedbackContext } from "../feedbackContainer/feedbackContext";
-import { useWarning } from "../feedbackProvider/hooks/useWarning";
-export const Alert = ({ isOpen, text, header, type, onClose, buttons, id }) => {
-    const { addAlert, removeAlert, alertsQueue, alerts, alertsAnimation, removedAlertId, mode, apiAlertActions } = useContext(FeedbackContext);
-    const generatedId = useId();
-    const localId = id || generatedId;
-    const isInQueue = alertsQueue.some((alert) => alert.id === localId);
-    const isRendered = alerts.some((alert) => alert.id === localId);
-    const isAnimating = alertsAnimation.some((alert) => alert.id === localId);
-    const isInApiAlerts = !!apiAlertActions.find((alert) => alert.id === localId);
-    const isAPI = mode === "api";
-    const alertIndex = alerts.findIndex((alert) => alert.id === localId);
-    useWarning({ mode, name: "alerts" });
-    useEffect(() => {
-        if (isAPI) {
-            if (isOpen && !isInApiAlerts) {
-                addAlert({ header, text, id: localId, type, onClose: () => {
-                        onClose();
-                    }, buttons });
-                return;
-            }
-            if (!isOpen && isInApiAlerts) {
-                removeAlert(localId);
-                onClose();
-            }
-            return;
-        }
-        if (isOpen && isInQueue && isRendered) {
-            return;
-        }
-        if (isOpen && (!isInQueue && !isRendered)) {
-            addAlert({ header, text, id: localId, type, onClose: () => {
-                    onClose();
-                }, buttons });
-            return;
-        }
-        if (!isOpen && isRendered && !isInQueue && !isAnimating) {
-            if (alertIndex !== -1) {
-                removedAlertId.current = alertIndex;
-            }
-            removeAlert(localId);
-            onClose();
-        }
-    }, [localId, isOpen, text, header, type, addAlert, onClose, removeAlert, isInQueue, isRendered, isAnimating, alertIndex, removedAlertId, buttons, isAPI, isInApiAlerts]);
-    return null;
-};