@geotab/zenith 3.0.1 → 3.1.0-beta.0

package/esm/range/range.js

@@ -12,8 +12,12 @@ import { FormFieldError } from "../formFieldError/formFieldError";
 import { useDirection } from "../filtersBar/filtersBarSidePanel/hooks/useDirection";
 import { Chip } from "../chip/chip";
 import { useChipStatus } from "../chip/chipStatusProvider";
+import { useMobile } from "../commonHelpers/hooks/useMobile";
+import { MobileSheet } from "../mobileSheet/mobileSheet";
+import { FooterButtons } from "../footerButtons/footerButtons";
 export const Range = ({ className, onChange, value, labelMin, labelMax, unit, defaultValue, disabled, label, min, max, id, fullWidthTriggerButton, fullBounded, allowEqualMinMax, error, triggerAriaLabel, chip, chipIcon, chipId, chipName }) => {
     const [isOpen, setIsOpen] = useState(false);
+    const isMobile = useMobile();
     const [currentValue, setCurrentValue] = useState(value);
     const [errorType, setErrorType] = useState(undefined);
     const triggerId = useId();
@@ -30,6 +34,10 @@ export const Range = ({ className, onChange, value, labelMin, labelMax, unit, de
     const setFieldsContainerRef = useCallback((node) => {
         setContainerNode(node);
     }, [setContainerNode]);
+    const checkError = useCallback((val) => {
+        const isHasError = checkErrorType(val.min, val.max, fullBounded, allowEqualMinMax, min, max);
+        setErrorType(isHasError);
+    }, [allowEqualMinMax, fullBounded, max, min]);
     const getSelection = useCallback(() => {
         let selection = value.min !== null && value.max !== null ? `${value.min} - ${value.max}` : "";
         if (!selection && value.min !== null) {
@@ -41,8 +49,10 @@ export const Range = ({ className, onChange, value, labelMin, labelMax, unit, de
         return selection;
     }, [labelMax, labelMin, translate, value.max, value.min]);
     const handleTriggerClick = useCallback(() => {
+        var _a;
         setIsOpen(curr => !curr);
-    }, []);
+        isOpen && ((_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus());
+    }, [isOpen]);
     const handleClearClick = useCallback(() => {
         if (blurTimeoutRef.current) {
             clearTimeout(blurTimeoutRef.current);
@@ -51,7 +61,8 @@ export const Range = ({ className, onChange, value, labelMin, labelMax, unit, de
         const isHasError = checkErrorType((defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.min) || null, (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.max) || null, fullBounded, allowEqualMinMax, min, max);
         setErrorType(isHasError);
     }, [allowEqualMinMax, defaultValue, fullBounded, max, min]);
-    const handleCancelClick = () => {
+    const handleCancelClick = useCallback(() => {
+        var _a;
         if (blurTimeoutRef.current) {
             clearTimeout(blurTimeoutRef.current);
         }
@@ -59,8 +70,10 @@ export const Range = ({ className, onChange, value, labelMin, labelMax, unit, de
         const isHasError = checkErrorType(value.min, value.max, fullBounded, allowEqualMinMax, min, max);
         setErrorType(isHasError);
         setIsOpen(false);
-    };
-    const handleApplyClick = () => {
+        (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, [allowEqualMinMax, fullBounded, max, min, value]);
+    const handleApplyClick = useCallback(() => {
+        var _a;
         if (blurTimeoutRef.current) {
             clearTimeout(blurTimeoutRef.current);
         }
@@ -71,7 +84,8 @@ export const Range = ({ className, onChange, value, labelMin, labelMax, unit, de
         }
         onChange(currentValue);
         setIsOpen(false);
-    };
+        (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, [allowEqualMinMax, currentValue, fullBounded, max, min, onChange]);
     const handleClearChipClick = useCallback(() => {
         handleClearClick();
         defaultValue && onChange(defaultValue);
@@ -81,8 +95,8 @@ export const Range = ({ className, onChange, value, labelMin, labelMax, unit, de
         const newValues = { min: targetId === "min" ? newValue : currentValue.min, max: targetId === "max" ? newValue : currentValue.max };
         setCurrentValue(newValues);
     }, [currentValue.min, currentValue.max]);
-    const isClearDisabled = () => defaultValue ? defaultValue.min === currentValue.min && defaultValue.max === currentValue.max : currentValue.min === null && currentValue.max === null;
-    const isApplyDisabled = () => currentValue.min === value.min && currentValue.max === value.max;
+    const isClearDisabled = useCallback(() => defaultValue ? defaultValue.min === currentValue.min && defaultValue.max === currentValue.max : currentValue.min === null && currentValue.max === null, [defaultValue, currentValue.min, currentValue.max]);
+    const isApplyDisabled = useCallback(() => currentValue.min === value.min && currentValue.max === value.max, [currentValue.min, currentValue.max, value.min, value.max]);
     const handleBlur = useCallback((e) => {
         if (e.relatedTarget && e.relatedTarget.getAttribute("data-validated-button")) {
             blurTimeoutRef.current = setTimeout(() => {
@@ -100,15 +114,20 @@ export const Range = ({ className, onChange, value, labelMin, labelMax, unit, de
         }
         prevValueRef.current = value;
         if (value.min !== currentValue.min || value.max !== currentValue.max) {
+            checkError(value);
             setCurrentValue(value);
         }
-    }, [currentValue.min, currentValue.max, value]);
+    }, [currentValue.min, currentValue.max, value, checkError]);
     const memoizedMinRangeField = useMemo(() => _jsx(RangeField, { className: "zen-range__min-field", label: labelMin || translate("Min"), unit: unit, value: currentValue.min, id: "min", inputRef: minRef, errorString: getErrorString("min", currentValue.min, translate, errorType, min, max), onChange: handleChange, onBlur: handleBlur, max: max, min: min, isMinField: true, direction: directionState }), [labelMin, translate, unit, currentValue.min, errorType, min, max, handleChange, handleBlur, directionState]);
     const memoizedMaxRangeField = useMemo(() => _jsx(RangeField, { className: "zen-range__max-field", label: labelMax || translate("Max"), unit: unit, value: currentValue.max, id: "max", inputRef: maxRef, errorString: getErrorString("max", currentValue.max, translate, errorType, min, max), onChange: handleChange, onBlur: handleBlur, max: max, min: min, isMinField: false, direction: directionState }), [max, min, labelMax, handleChange, handleBlur, currentValue.max, translate, unit, errorType, directionState]);
     const selection = useMemo(() => getSelection(), [getSelection]);
+    const memoizedContent = useMemo(() => _jsxs("div", { className: "zen-range__fields-wrapper", children: [_jsxs("div", { ref: setFieldsContainerRef, className: classNames(["zen-range__fields-container", directionState === "row" ? "zen-range__fields-container--row" : "zen-range__fields-container--column"]), children: [memoizedMinRangeField, memoizedMaxRangeField] }), errorType !== undefined && directionState === "row" ? _jsx(FormFieldError, { className: "zen-range__error", error: [getErrorString("min", currentValue.min, translate, errorType, min, max) || "", getErrorString("max", currentValue.max, translate, errorType, min, max) || ""] })
+                : null] }), [setFieldsContainerRef, directionState, memoizedMinRangeField, memoizedMaxRangeField, errorType, currentValue.min, currentValue.max, translate, min, max]);
+    const memoizedDesktopView = useMemo(() => _jsx(ControlledPopup, { isOpen: isOpen, className: classNames(["zen-range-popup zen-shadow-dropdown-default", className ? className : ""]), onOpenChange: handleTriggerClick, useTrapFocusWithTrigger: "on", alignment: "bottom-left", shouldHoldScroll: true, triggerRef: triggerRef, ariaLabel: translate("Range Filter popup"), recalculateOnScroll: true, children: _jsxs("div", { ref: contentRef, className: "zen-range__content", children: [_jsx("div", { className: "zen-range__label zen-ellipsis", children: label }), memoizedContent, _jsxs("div", { className: "zen-range__footer", children: [_jsx(Button, { onClick: handleClearClick, disabled: isClearDisabled(), className: "zen-range__clear-button", type: ButtonType.Tertiary, title: translate("Clear"), "data-validated-button": true, children: translate("Clear") }), _jsxs("div", { className: "zen-range__button-group", children: [_jsx(Button, { onClick: handleCancelClick, className: "zen-range__cancel-button", title: translate("Cancel"), "data-validated-button": true, children: translate("Cancel") }), _jsx(Button, { onClick: handleApplyClick, type: ButtonType.Primary, disabled: isApplyDisabled(), className: "zen-range__apply-button", title: translate("Apply"), "data-validated-button": true, children: translate("Apply") })] })] })] }) }), [className, handleApplyClick, handleCancelClick, handleClearClick, handleTriggerClick, isApplyDisabled, isClearDisabled, isOpen, label, memoizedContent, translate]);
+    const memoizedMobileFooter = useMemo(() => _jsxs(FooterButtons, { children: [_jsx(Button, { onClick: handleApplyClick, type: ButtonType.Primary, disabled: isApplyDisabled(), className: "zen-range__apply-button", title: translate("Apply"), "data-validated-button": true, children: translate("Apply") }), _jsx(Button, { onClick: handleCancelClick, className: "zen-range__cancel-button", title: translate("Cancel"), "data-validated-button": true, children: translate("Cancel") }), _jsx(Button, { type: ButtonType.Tertiary, disabled: isClearDisabled(), onClick: handleClearClick, children: translate("Clear") })] }), [handleApplyClick, handleCancelClick, handleClearClick, isApplyDisabled, isClearDisabled, translate]);
+    const memoizedMobileView = useMemo(() => _jsxs(MobileSheet, { label: translate("Range Filter popup"), triggerRef: triggerRef, isOpen: isOpen, onHidePanel: handleTriggerClick, onCloseClick: handleTriggerClick, useTrapFocusWithTrigger: false, children: [_jsx(MobileSheet.Title, { children: label }), _jsx(MobileSheet.Content, { children: memoizedContent }), _jsx(MobileSheet.Footer, { children: memoizedMobileFooter })] }), [handleTriggerClick, isOpen, label, memoizedContent, memoizedMobileFooter, translate]);
     return _jsxs("div", { className: classNames(["zen-range", error ? "zen-range--error" : "", className || ""]), children: [chip ? _jsx(Chip, { id: chipId, status: isClearDisabled() ? undefined : chipStatus || "active", isOpen: isOpen, disabled: disabled, onClick: handleTriggerClick, onClose: isClearDisabled() ? undefined : handleClearChipClick, triggerRef: triggerRef, icon: chipIcon, children: selection ? selection : chipName }) :
-                _jsx(FilterButton, { ariaLabel: triggerAriaLabel, ref: triggerRef, id: id || triggerId, className: "zen-range__trigger-button", onClick: handleTriggerClick, disabled: disabled, isActive: isOpen, fullWidth: fullWidthTriggerButton, title: selection ? translate("{rangeName} values {values}").replace("{rangeName}", label).replace("{values}", selection) : "", children: selection ? _jsx("span", { className: "zen-range__trigger-button-text", children: selection }) : label }), _jsx(FormFieldError, { error: error }), _jsx(ControlledPopup, { isOpen: isOpen, className: classNames(["zen-range-popup zen-shadow-dropdown-default", className ? className : ""]), onOpenChange: handleTriggerClick, useTrapFocusWithTrigger: "on", alignment: "bottom-left", shouldHoldScroll: true, triggerRef: triggerRef, ariaLabel: translate("Range Filter popup"), recalculateOnScroll: true, children: _jsxs("div", { ref: contentRef, className: "zen-range__content", children: [_jsx("div", { className: "zen-range__label zen-ellipsis", children: label }), _jsxs("div", { className: "zen-range__fields-wrapper", children: [_jsxs("div", { ref: setFieldsContainerRef, className: classNames(["zen-range__fields-container", directionState === "row" ? "zen-range__fields-container--row" : "zen-range__fields-container--column"]), children: [memoizedMinRangeField, memoizedMaxRangeField] }), errorType !== undefined && directionState === "row" ? _jsx(FormFieldError, { className: "zen-range__error", error: [getErrorString("min", currentValue.min, translate, errorType, min, max) || "", getErrorString("max", currentValue.max, translate, errorType, min, max) || ""] })
-                                    : null] }), _jsxs("div", { className: "zen-range__footer", children: [_jsx(Button, { onClick: handleClearClick, disabled: isClearDisabled(), className: "zen-range__clear-button", type: ButtonType.Tertiary, title: translate("Clear"), "data-validated-button": true, children: translate("Clear") }), _jsxs("div", { className: "zen-range__button-group", children: [_jsx(Button, { onClick: handleCancelClick, className: "zen-range__cancel-button", title: translate("Cancel"), "data-validated-button": true, children: translate("Cancel") }), _jsx(Button, { onClick: handleApplyClick, type: ButtonType.Primary, disabled: isApplyDisabled(), className: "zen-range__apply-button", title: translate("Apply"), "data-validated-button": true, children: translate("Apply") })] })] })] }) })] });
+                _jsx(FilterButton, { ariaLabel: triggerAriaLabel, ref: triggerRef, id: id || triggerId, className: "zen-range__trigger-button", onClick: handleTriggerClick, disabled: disabled, isActive: isOpen, fullWidth: fullWidthTriggerButton, title: selection ? translate("{rangeName} values {values}").replace("{rangeName}", label).replace("{values}", selection) : "", children: selection ? _jsx("span", { className: "zen-range__trigger-button-text", children: selection }) : label }), _jsx(FormFieldError, { error: error }), isMobile ? memoizedMobileView : memoizedDesktopView] });
 };
 export const TRANSLATIONS = [
     "Min",

package/esm/searchInputRaw/searchInputRaw.js

@@ -30,7 +30,7 @@ export const SearchInputRaw = ({ value, className = "", disabled, onChange, onKe
         const onClick = () => {
             onChange === null || onChange === void 0 ? void 0 : onChange("");
         };
-        closeButton = (_jsx("button", { type: "button", className: closeButtonClassName, onClick: onClick, title: closeButtonTitleValue, children: _jsx(IconClose, { className: "zen-search-input__close-icon", size: isDrive ? "huge" : "large" }) }));
+        closeButton = (_jsx("button", { type: "button", tabIndex: value.length ? 0 : -1, className: closeButtonClassName, onClick: onClick, title: closeButtonTitleValue, children: _jsx(IconClose, { className: "zen-search-input__close-icon", size: isDrive ? "huge" : "large" }) }));
     }
     const innerRef = React.useRef(null);
     const onClickHandler = useCallback(() => {

package/esm/sidePanel/sidePanel.d.ts

@@ -20,6 +20,7 @@ export interface ISidePanel extends IZenComponentProps {
     isOpen: boolean;
     label: string;
     useTrapFocusWithTrigger?: boolean;
+    preventFirstFocus?: boolean;
     onTransitionEnd?: (isCurrentOpen: boolean) => void;
     onHidePanel: (reason: SidePanelCloseReason, dataShieldId?: string) => void;
     width?: number | string;

package/esm/sidePanel/sidePanel.js

@@ -47,7 +47,7 @@ export var SidePanelCloseReason;
     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 }) => {
+export const SidePanel = ({ label, className, id, isOpen, onHidePanel, children, triggerRef, panelPosition = "right", useTrapFocusWithTrigger, preventFirstFocus, width, onTransitionEnd }) => {
     const { renderComponent, showContent, readyForFocus, setIsOpen, handleTransitionEnd } = useFadeComponent(isOpen, onTransitionEnd);
     const { dark } = useContext(themeContext);
     const isMobile = useMobile();
@@ -119,7 +119,7 @@ export const SidePanel = ({ label, className, id, isOpen, onHidePanel, children,
         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) {
+            if (!useTrapFocusWithTrigger && !preventFirstFocus) {
                 firstFocusable ? firstFocusable.focus() : (_b = sidePanelRef.current) === null || _b === void 0 ? void 0 : _b.focus();
             }
         }
@@ -130,7 +130,7 @@ export const SidePanel = ({ label, className, id, isOpen, onHidePanel, children,
             prevReadyForFocus.current = false;
         }
         return () => document.body.removeEventListener("click", closeOnClickOutside, true);
-    }, [renderComponent, readyForFocus, onHidePanel, triggerRef, useTrapFocusWithTrigger]);
+    }, [renderComponent, readyForFocus, onHidePanel, triggerRef, useTrapFocusWithTrigger, preventFirstFocus]);
     useEffect(() => {
         setIsOpen(isOpen);
     }, [isOpen, setIsOpen]);

package/esm/tabs/tabItem/tabItem.d.ts

@@ -5,6 +5,7 @@ export interface ITabItem extends IZenComponentProps {
     tabId: string;
     tabName: string;
     icon?: React.ReactElement;
+    quantity?: number;
     active: boolean;
     ariaControl?: string;
     handleButtonClick: (e: React.MouseEvent<HTMLElement>) => void;

package/esm/tabs/tabItem/tabItem.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { classNames } from "../../commonHelpers/classNames/classNames";
 import { useDriveClassName } from "../../utils/theme/useDriveClassName";
-export const TabItem = ({ tabId, tabName, icon, active, handleButtonClick, ariaControl }) => {
+export const TabItem = ({ tabId, tabName, icon, active, handleButtonClick, ariaControl, quantity }) => {
     const driveClassname = useDriveClassName("zen-tab-item");
-    return _jsx("button", { id: tabId, type: "button", className: classNames(["zen-tab-item", driveClassname || "", active ? "zen-tab-item--active" : ""]), role: "tab", "aria-controls": ariaControl, "aria-selected": active ? "true" : "false", "aria-label": tabName, title: tabName, onClick: handleButtonClick, children: _jsxs("div", { className: "zen-tab-item__content", children: [icon && _jsx("span", { className: classNames(["zen-tab-item__content-icon", active ? "zen-tab-item__content-icon--active" : ""]), children: icon }), _jsx("span", { className: "zen-tab-item__content-text", children: tabName })] }) });
+    return _jsx("button", { id: tabId, type: "button", className: classNames(["zen-tab-item", driveClassname || "", active ? "zen-tab-item--active" : ""]), role: "tab", "aria-controls": ariaControl, "aria-selected": active ? "true" : "false", "aria-label": tabName, title: tabName, onClick: handleButtonClick, children: _jsxs("div", { className: "zen-tab-item__content", children: [icon && _jsx("span", { className: classNames(["zen-tab-item__content-icon", active ? "zen-tab-item__content-icon--active" : ""]), children: icon }), _jsx("span", { className: "zen-tab-item__content-text", children: tabName }), quantity && _jsx("div", { className: "zen-tab-item__content-quantity", children: quantity })] }) });
 };

package/esm/tabs/tabs.d.ts

@@ -6,6 +6,7 @@ export interface ITabElement {
     name: string;
     icon?: React.ReactElement | React.FC<IIcon>;
     id: string;
+    quantity?: number;
 }
 export interface ITabs extends IZenComponentProps {
     tabs: ITabElement[];

package/esm/tabs/tabs.js

@@ -129,6 +129,6 @@ export const Tabs = ({ className, tabs = [], activeTabId, onTabChange }) => {
             // activeTab.focus();
         }
     }, [activeTabId]);
-    return _jsx("div", { className: classNames(["zen-tabs", driveClassname || "", className !== null && className !== void 0 ? className : ""]), children: _jsxs("div", { className: classNames(["zen-tabs__tabs-container", className !== null && className !== void 0 ? className : "", scrollButtonType]), children: [scrollButtonType === "start" || scrollButtonType === "both" ? _jsxs(_Fragment, { children: [_jsx("div", { className: classNames(["zen-tabs__gradient", driveClassNameGradient || "", "zen-tabs__gradient--left"]) }), _jsx(TextIconButton, { title: translate("Scroll left"), className: classNames(["zen-tabs__scroller", driveClassNameScroller || "", "zen-tabs__start"]), icon: IconChevronRight, type: "tertiary", iconPosition: ButtonIconPosition.Start, onClick: handleScrollButtonClick(scrollableRef.current, -scrollableStep), iconClasses: "zen-tabs__start-icon" })] }) : null, _jsx("div", { ref: scrollableRef, onKeyDown: keyDownHandler, className: "zen-tabs__scrollable", children: _jsx("div", { className: "zen-tabs__tabs", role: "tablist", children: tabs.map(tab => (_jsx(TabItem, { className: "zen-tabs__tab-item", tabId: tab.id, tabName: tab.name, icon: typeof tab.icon === "function" ? createElement(tab.icon, { size: "large" }) : tab.icon, active: activeTabId === tab.id, ariaControl: `panel-${tab.id}`, handleButtonClick: handleButtonClick }, tab.id))) }) }), scrollButtonType === "end" || scrollButtonType === "both" ? _jsxs(_Fragment, { children: [_jsx("div", { className: classNames(["zen-tabs__gradient", driveClassNameGradient || "", "zen-tabs__gradient--right"]) }), _jsx(TextIconButton, { title: translate("Scroll right"), className: classNames(["zen-tabs__scroller", driveClassNameScroller || "", "zen-tabs__end"]), icon: IconChevronRight, type: "tertiary", onClick: handleScrollButtonClick(scrollableRef.current, scrollableStep), iconPosition: ButtonIconPosition.End })] }) : null] }) });
+    return _jsx("div", { className: classNames(["zen-tabs", driveClassname || "", className !== null && className !== void 0 ? className : ""]), children: _jsxs("div", { className: classNames(["zen-tabs__tabs-container", className !== null && className !== void 0 ? className : "", scrollButtonType]), children: [scrollButtonType === "start" || scrollButtonType === "both" ? _jsxs(_Fragment, { children: [_jsx("div", { className: classNames(["zen-tabs__gradient", driveClassNameGradient || "", "zen-tabs__gradient--left"]) }), _jsx(TextIconButton, { title: translate("Scroll left"), className: classNames(["zen-tabs__scroller", driveClassNameScroller || "", "zen-tabs__start"]), icon: IconChevronRight, type: "tertiary", iconPosition: ButtonIconPosition.Start, onClick: handleScrollButtonClick(scrollableRef.current, -scrollableStep), iconClasses: "zen-tabs__start-icon" })] }) : null, _jsx("div", { ref: scrollableRef, onKeyDown: keyDownHandler, className: "zen-tabs__scrollable", children: _jsx("div", { className: "zen-tabs__tabs", role: "tablist", children: tabs.map(tab => (_jsx(TabItem, { className: "zen-tabs__tab-item", tabId: tab.id, tabName: tab.name, icon: typeof tab.icon === "function" ? createElement(tab.icon, { size: "large" }) : tab.icon, quantity: tab.quantity, active: activeTabId === tab.id, ariaControl: `panel-${tab.id}`, handleButtonClick: handleButtonClick }, tab.id))) }) }), scrollButtonType === "end" || scrollButtonType === "both" ? _jsxs(_Fragment, { children: [_jsx("div", { className: classNames(["zen-tabs__gradient", driveClassNameGradient || "", "zen-tabs__gradient--right"]) }), _jsx(TextIconButton, { title: translate("Scroll right"), className: classNames(["zen-tabs__scroller", driveClassNameScroller || "", "zen-tabs__end"]), icon: IconChevronRight, type: "tertiary", onClick: handleScrollButtonClick(scrollableRef.current, scrollableStep), iconPosition: ButtonIconPosition.End })] }) : null] }) });
 };
 Tabs.displayName = TabsDisplayName;

package/esm/utils/keyboardHelpers.d.ts

@@ -0,0 +1,2 @@
+export declare const getNewFocusableItem: (step: number, container: HTMLElement | null, specificSelector?: string) => HTMLElement | undefined;
+export declare const getFirstFocusableItem: (container: HTMLElement | null) => HTMLElement | undefined;

package/esm/utils/keyboardHelpers.js

@@ -0,0 +1,44 @@
+import { FOCUSABLE_SELECTOR } from "./focusableSelector";
+export const getNewFocusableItem = (step, container, specificSelector) => {
+    if (!container) {
+        return undefined;
+    }
+    const allFocusables = Array.from(container.querySelectorAll(FOCUSABLE_SELECTOR));
+    const currentElement = document.activeElement;
+    if (allFocusables.length === 0) {
+        return undefined;
+    }
+    if (specificSelector) {
+        const matchingItems = allFocusables.filter(el => el.matches(specificSelector));
+        const currentSpecificIndex = matchingItems.indexOf(currentElement);
+        if (currentSpecificIndex !== -1 && matchingItems.length > 1) {
+            let nextIndex = currentSpecificIndex + step;
+            if (nextIndex >= matchingItems.length) {
+                nextIndex = 0;
+            }
+            if (nextIndex < 0) {
+                nextIndex = matchingItems.length - 1;
+            }
+            return matchingItems[nextIndex];
+        }
+    }
+    const currentIndex = allFocusables.indexOf(currentElement);
+    if (currentIndex === -1) {
+        return undefined;
+    }
+    const nextIndex = currentIndex + step;
+    if (nextIndex >= allFocusables.length) {
+        return allFocusables[0];
+    }
+    if (nextIndex < 0) {
+        return allFocusables[allFocusables.length - 1];
+    }
+    return allFocusables[nextIndex];
+};
+export const getFirstFocusableItem = (container) => {
+    if (!container) {
+        return undefined;
+    }
+    const allFocusables = Array.from(container.querySelectorAll(FOCUSABLE_SELECTOR));
+    return allFocusables[0];
+};

package/esm/utils/localization/translations/cs-json.d.ts

@@ -244,4 +244,5 @@ export declare const translations: {
     "Column Settings": string;
     Category: string;
     "Select visible columns": string;
+    Selected: string;
 };

package/esm/utils/localization/translations/cs-json.js

@@ -243,5 +243,6 @@ export const translations = {
     "Close filter": "Zavřít filtr",
     "Column Settings": "Nastavení sloupců",
     "Category": "Kategorie",
-    "Select visible columns": "Vyberte viditelné sloupce"
+    "Select visible columns": "Vyberte viditelné sloupce",
+    "Selected": "Vybráno"
 };

package/esm/utils/localization/translations/de-json.d.ts

@@ -244,4 +244,5 @@ export declare const translations: {
     "Column Settings": string;
     Category: string;
     "Select visible columns": string;
+    Selected: string;
 };

package/esm/utils/localization/translations/de-json.js

@@ -243,5 +243,6 @@ export const translations = {
     "Close filter": "Filter schließen",
     "Column Settings": "Spalteneinstellungen",
     "Category": "Kategorie",
-    "Select visible columns": "Sichtbare Spalten auswählen"
+    "Select visible columns": "Sichtbare Spalten auswählen",
+    "Selected": "Ausgewählt"
 };

package/esm/utils/localization/translations/en-json.d.ts

@@ -292,4 +292,11 @@ export declare const translations: {
     "Date range filter:": string;
     "Date filter:": string;
     "Select visible columns": string;
+    Selected: string;
+    "No Filters Selected": string;
+    "Selected filters will appear here.": string;
+    "Currently selected": string;
+    "Top results": string;
+    "Open setting conditions popup": string;
+    "Close setting conditions popup": string;
 };

package/esm/utils/localization/translations/en-json.js

@@ -291,5 +291,12 @@ export const translations = {
     "Category": "Category",
     "Date range filter:": "Date range filter:",
     "Date filter:": "Date filter:",
-    "Select visible columns": "Select visible columns"
+    "Select visible columns": "Select visible columns",
+    "Selected": "Selected",
+    "No Filters Selected": "No Filters Selected",
+    "Selected filters will appear here.": "Selected filters will appear here.",
+    "Currently selected": "Currently selected",
+    "Top results": "Top results",
+    "Open setting conditions popup": "Open setting conditions popup",
+    "Close setting conditions popup": "Close setting conditions popup"
 };

package/esm/utils/localization/translations/es-json.d.ts

@@ -244,4 +244,5 @@ export declare const translations: {
     "Column Settings": string;
     Category: string;
     "Select visible columns": string;
+    Selected: string;
 };

package/esm/utils/localization/translations/es-json.js

@@ -243,5 +243,6 @@ export const translations = {
     "Close filter": "Cerrar filtro",
     "Column Settings": "Configuración de columnas",
     "Category": "Categoría",
-    "Select visible columns": "Seleccionar columnas visibles"
+    "Select visible columns": "Seleccionar columnas visibles",
+    "Selected": "Seleccionado"
 };

package/esm/utils/localization/translations/fr-FR-json.d.ts

@@ -243,4 +243,5 @@ export declare const translations: {
     "Column Settings": string;
     Category: string;
     "Select visible columns": string;
+    Selected: string;
 };

package/esm/utils/localization/translations/fr-FR-json.js

@@ -242,5 +242,6 @@ export const translations = {
     "Close filter": "Fermer le filtre",
     "Column Settings": "Paramètres des colonnes",
     "Category": "Catégorie",
-    "Select visible columns": "Sélectionner les colonnes visibles"
+    "Select visible columns": "Sélectionner les colonnes visibles",
+    "Selected": "Sélectionné"
 };

package/esm/utils/localization/translations/fr-json.d.ts

@@ -244,4 +244,5 @@ export declare const translations: {
     "Column Settings": string;
     Category: string;
     "Select visible columns": string;
+    Selected: string;
 };

package/esm/utils/localization/translations/fr-json.js

@@ -243,5 +243,6 @@ export const translations = {
     "Close filter": "Fermer le filtre",
     "Column Settings": "Paramètres des colonnes",
     "Category": "Catégorie",
-    "Select visible columns": "Sélectionner les colonnes visibles"
+    "Select visible columns": "Sélectionner les colonnes visibles",
+    "Selected": "Sélectionné"
 };

package/esm/utils/localization/translations/id-json.d.ts

@@ -245,4 +245,5 @@ export declare const translations: {
     "Column Settings": string;
     Category: string;
     "Select visible columns": string;
+    Selected: string;
 };

package/esm/utils/localization/translations/id-json.js

@@ -244,5 +244,6 @@ export const translations = {
     "Close filter": "Tutup filter",
     "Column Settings": "Pengaturan Kolom",
     "Category": "Kategori",
-    "Select visible columns": "Pilih kolom yang terlihat"
+    "Select visible columns": "Pilih kolom yang terlihat",
+    "Selected": "Dipilih"
 };

package/esm/utils/localization/translations/it-json.d.ts

@@ -244,4 +244,5 @@ export declare const translations: {
     "Column Settings": string;
     Category: string;
     "Select visible columns": string;
+    Selected: string;
 };

package/esm/utils/localization/translations/it-json.js

@@ -243,5 +243,6 @@ export const translations = {
     "Close filter": "Chiudi filtro",
     "Column Settings": "Impostazioni colonna",
     "Category": "Categoria",
-    "Select visible columns": "Selezionare colonne visibili"
+    "Select visible columns": "Selezionare colonne visibili",
+    "Selected": "Selezionato"
 };

package/esm/utils/localization/translations/ja-json.d.ts

@@ -244,4 +244,5 @@ export declare const translations: {
     "Column Settings": string;
     Category: string;
     "Select visible columns": string;
+    Selected: string;
 };

package/esm/utils/localization/translations/ja-json.js

@@ -243,5 +243,6 @@ export const translations = {
     "Close filter": "フィルターを閉じる",
     "Column Settings": "列の設定",
     "Category": "カテゴリ",
-    "Select visible columns": "表示列を選択"
+    "Select visible columns": "表示列を選択",
+    "Selected": "選択車両"
 };

package/esm/utils/localization/translations/ko-KR-json.d.ts

@@ -251,4 +251,5 @@ export declare const translations: {
     "Column Settings": string;
     Category: string;
     "Select visible columns": string;
+    Selected: string;
 };

package/esm/utils/localization/translations/ko-KR-json.js

@@ -250,5 +250,6 @@ export const translations = {
     "Close filter": "필터 닫기",
     "Column Settings": "열 설정",
     "Category": "범주",
-    "Select visible columns": "표시되는 열 선택"
+    "Select visible columns": "표시되는 열 선택",
+    "Selected": "선택됨"
 };

package/esm/utils/localization/translations/ms-json.d.ts

@@ -244,4 +244,5 @@ export declare const translations: {
     "Column Settings": string;
     Category: string;
     "Select visible columns": string;
+    Selected: string;
 };

package/esm/utils/localization/translations/ms-json.js

@@ -243,5 +243,6 @@ export const translations = {
     "Close filter": "Tutup penyaring",
     "Column Settings": "Tetapan Lajur",
     "Category": "Kategori",
-    "Select visible columns": "Pilih lajur yang boleh dilihat"
+    "Select visible columns": "Pilih lajur yang boleh dilihat",
+    "Selected": "Dipilih"
 };

package/esm/utils/localization/translations/nl-json.d.ts

@@ -244,4 +244,5 @@ export declare const translations: {
     "Column Settings": string;
     Category: string;
     "Select visible columns": string;
+    Selected: string;
 };

package/esm/utils/localization/translations/nl-json.js

@@ -243,5 +243,6 @@ export const translations = {
     "Close filter": "Filter sluiten",
     "Column Settings": "Kolominstellingen",
     "Category": "Categorie",
-    "Select visible columns": "Zichtbare kolommen selecteren"
+    "Select visible columns": "Zichtbare kolommen selecteren",
+    "Selected": "Geselecteerd"
 };

package/esm/utils/localization/translations/pl-json.d.ts

@@ -244,4 +244,5 @@ export declare const translations: {
     "Column Settings": string;
     Category: string;
     "Select visible columns": string;
+    Selected: string;
 };

package/esm/utils/localization/translations/pl-json.js

@@ -243,5 +243,6 @@ export const translations = {
     "Close filter": "Zamknij filtr",
     "Column Settings": "Ustawienia kolumn",
     "Category": "Kategoria",
-    "Select visible columns": "Wybierz widoczne kolumny"
+    "Select visible columns": "Wybierz widoczne kolumny",
+    "Selected": "Wybrano"
 };

package/esm/utils/localization/translations/pt-BR-json.d.ts

@@ -244,4 +244,5 @@ export declare const translations: {
     "Column Settings": string;
     Category: string;
     "Select visible columns": string;
+    Selected: string;
 };

package/esm/utils/localization/translations/pt-BR-json.js

@@ -243,5 +243,6 @@ export const translations = {
     "Close filter": "Fechar filtro",
     "Column Settings": "Configurações da coluna",
     "Category": "Categoria",
-    "Select visible columns": "Selecionar colunas visíveis"
+    "Select visible columns": "Selecionar colunas visíveis",
+    "Selected": "Selecionado"
 };

package/esm/utils/localization/translations/sv-json.d.ts

@@ -244,4 +244,5 @@ export declare const translations: {
     "Column Settings": string;
     Category: string;
     "Select visible columns": string;
+    Selected: string;
 };

package/esm/utils/localization/translations/sv-json.js

@@ -243,5 +243,6 @@ export const translations = {
     "Close filter": "Stäng filter",
     "Column Settings": "Kolumninställningar",
     "Category": "Kategori",
-    "Select visible columns": "Välj synbara kolumner"
+    "Select visible columns": "Välj synbara kolumner",
+    "Selected": "Valda"
 };

package/esm/utils/localization/translations/th-json.d.ts

@@ -244,4 +244,5 @@ export declare const translations: {
     "Column Settings": string;
     Category: string;
     "Select visible columns": string;
+    Selected: string;
 };

package/esm/utils/localization/translations/th-json.js

@@ -243,5 +243,6 @@ export const translations = {
     "Close filter": "ปิดตัวกรอง",
     "Column Settings": "การตั้งค่าคอลัมน์",
     "Category": "หมวดหมู่",
-    "Select visible columns": "เลือกคอลัมน์ที่มองเห็นได้"
+    "Select visible columns": "เลือกคอลัมน์ที่มองเห็นได้",
+    "Selected": "เลือกแล้ว"
 };

package/esm/utils/localization/translations/tr-json.d.ts

@@ -244,4 +244,5 @@ export declare const translations: {
     "Column Settings": string;
     Category: string;
     "Select visible columns": string;
+    Selected: string;
 };

package/esm/utils/localization/translations/tr-json.js

@@ -243,5 +243,6 @@ export const translations = {
     "Close filter": "Filtreyi kapat",
     "Column Settings": "Sütun Ayarları",
     "Category": "Kategori",
-    "Select visible columns": "Görünür sütunları seç"
+    "Select visible columns": "Görünür sütunları seç",
+    "Selected": "Seçildi"
 };

package/esm/utils/localization/translations/zh-Hans-json.d.ts

@@ -244,4 +244,5 @@ export declare const translations: {
     "Column Settings": string;
     Category: string;
     "Select visible columns": string;
+    Selected: string;
 };

package/esm/utils/localization/translations/zh-Hans-json.js

@@ -243,5 +243,6 @@ export const translations = {
     "Close filter": "关闭筛选器",
     "Column Settings": "列设置",
     "Category": "类别",
-    "Select visible columns": "选择可见列"
+    "Select visible columns": "选择可见列",
+    "Selected": "选中的"
 };

package/esm/utils/localization/translations/zh-TW-json.d.ts

@@ -264,4 +264,5 @@ export declare const translations: {
     "Column Settings": string;
     Category: string;
     "Select visible columns": string;
+    Selected: string;
 };

package/esm/utils/localization/translations/zh-TW-json.js

@@ -263,5 +263,6 @@ export const translations = {
     "Close filter": "關閉篩選器",
     "Column Settings": "欄設定",
     "Category": "種類",
-    "Select visible columns": "選取可見欄"
+    "Select visible columns": "選取可見欄",
+    "Selected": "已選取"
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geotab/zenith",
-  "version": "3.0.1",
+  "version": "3.1.0-beta.0",
   "description": "Zenith components library on React",
   "main": "dist/index.js",
   "types": "esm/index.d.ts",

package/dist/filters/components/filtersModal.d.ts

@@ -1,17 +0,0 @@
-import { ReactElement } from "react";
-import { IZenComponentProps } from "../../commonHelpers/zenComponent";
-import { ITabElement } from "../../tabs/tabs";
-import { TFiltersComponentsItemState, TFiltersComponentsProps } from "./filtersItem";
-import "./filtersModal.less";
-export interface IFiltersModal extends IZenComponentProps {
-    isOpen: boolean;
-    onClose: () => void;
-    onApply: (state: Record<string, TFiltersComponentsItemState>) => void;
-    onPin?: () => void;
-    isPinned?: boolean;
-    tabItems: ITabElement[];
-    filters: ReactElement<TFiltersComponentsProps>[];
-    externalModalState?: Record<string, TFiltersComponentsItemState>;
-    setExternalModalState?: (newState: Partial<Record<string, TFiltersComponentsItemState>>) => void;
-}
-export declare const FiltersModal: ({ isOpen, onClose, onApply, onPin, tabItems, filters, externalModalState, setExternalModalState, isPinned }: IFiltersModal) => import("react/jsx-runtime").JSX.Element;