@geotab/zenith 3.1.1-beta.0 → 3.1.1-beta.2

package/esm/dropdown/dropdownTrigger.d.ts

@@ -1,25 +1,2 @@
-import { IZenComponentProps } from "../commonHelpers/zenComponent";
-import { TFilterButton } from "../filterButton/filterButton";
-import { ChangeEvent } from "react";
-export interface IDropdownTrigger extends IZenComponentProps {
-    currentSelection?: string;
-    isActive: boolean;
-    id?: string;
-    disabled?: boolean;
-    count?: number;
-    fullWidth?: boolean;
-    inputValue?: string;
-    placeholder: string;
-    searchField: boolean;
-    onSearchChange?: (event?: ChangeEvent<HTMLInputElement>) => void;
-    handleClick: (value: boolean) => void;
-    width?: number;
-    title?: string;
-    triggerAriaLabel?: string;
-    triggerRef: React.RefObject<HTMLElement | null>;
-    inputRef?: React.RefObject<HTMLInputElement | null>;
-    buttonType?: TFilterButton;
-    error?: string;
-}
-export declare const DropdownTrigger: React.FC<IDropdownTrigger>;
-export declare const TRANSLATIONS: string[];
+/// <reference types="react" />
+export declare const DropdownTrigger: import("react").FC<import("../dropdownRaw/dropdownTrigger").IDropdownTrigger>;

package/esm/dropdown/dropdownTrigger.js

@@ -1,28 +1,2 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { DropdownSearchableTrigger, TRANSLATIONS as SearchableTriggerTranslations } from "./dropdownSearchableTrigger";
-import { FilterButton } from "../filterButton/filterButton";
-import { useRef } from "react";
-import { classNames } from "../commonHelpers/classNames/classNames";
-import { FormFieldError } from "../formFieldError/formFieldError";
-export const DropdownTrigger = (_a) => {
-    var { isActive, id, triggerRef, searchField, placeholder, disabled, fullWidth, currentSelection, handleClick, inputValue, className, onSearchChange = () => { }, width, title, triggerAriaLabel, count, inputRef, buttonType, error } = _a, otherProps = __rest(_a, ["isActive", "id", "triggerRef", "searchField", "placeholder", "disabled", "fullWidth", "currentSelection", "handleClick", "inputValue", "className", "onSearchChange", "width", "title", "triggerAriaLabel", "count", "inputRef", "buttonType", "error"]);
-    const elInpRef = useRef(null);
-    const handleButtonClick = () => {
-        handleClick(!isActive);
-    };
-    return _jsxs(_Fragment, { children: [searchField ? _jsx(DropdownSearchableTrigger, Object.assign({ value: inputValue || "", onChange: onSearchChange, isOpenPopup: isActive, inputRef: inputRef || elInpRef, handleClick: handleClick, ref: triggerRef, width: width, placeholder: placeholder, disabled: disabled, id: id, title: title, count: count, currentSelection: currentSelection, className: className, isError: !!error, fullWidth: fullWidth }, otherProps)) : _jsx(FilterButton, Object.assign({ ref: triggerRef, id: id, className: classNames(["zen-dropdown__trigger-button", error ? "zen-dropdown__trigger-button--error" : "", className || ""]), onClick: handleButtonClick, disabled: disabled, isActive: isActive, fullWidth: width ? true : fullWidth, maxWidth: width, minWidth: width, quantity: count || undefined, type: buttonType, title: title, ariaLabel: triggerAriaLabel }, otherProps, { children: currentSelection ? _jsx("span", { className: classNames(["zen-dropdown__trigger-button-text", buttonType ? `zen-dropdown__trigger-button-text--${buttonType.toString()}` : ""]), children: currentSelection }) : placeholder })), _jsx(FormFieldError, { error: error })] });
-};
-export const TRANSLATIONS = [
-    ...SearchableTriggerTranslations
-];
+import { DropdownTrigger as DropdownTriggerRaw } from "../dropdownRaw/dropdownTrigger";
+export const DropdownTrigger = DropdownTriggerRaw;

package/esm/{dropdown → dropdownRaw}/dropdownHelper.d.ts

@@ -1,32 +1,33 @@
 import { ICheckboxListWithActionOption } from "../checkboxListWithAction/checkboxListWithAction";
-import { IGroupTree } from "../groupsFilter/groupsFilterInterfaces";
-import { IDropdownItem } from "./dropdown";
+import { IDropdownItem } from "../dropdown/dropdown";
+import { IGroupTree } from "../groupsFilterRaw/groupsFilterInterfaces";
 import { IDropdownState } from "./stateReducer/stateReducer";
+import { IDropdownRawItem } from "./types";
 export declare const getGroupsTreeItem: (stateObj: IDropdownState, itemId: string) => IGroupTree | undefined;
-export declare const getListDataWithDisabled: (listData: IDropdownItem[], isIgnoreDisabled: boolean) => IDropdownItem[];
+export declare const getListDataWithDisabled: (listData: IDropdownRawItem[], isIgnoreDisabled: boolean) => IDropdownRawItem[];
 export declare const isAllChildrenSelected: (stateObj: IDropdownState, currentId?: string) => boolean;
-export declare const isEveryItemSelected: (listData: IDropdownItem[], selectedItems: string[]) => boolean;
-export declare const getDataForChange: (listData: IDropdownItem[], selectedItems: string[], isDeselect: boolean) => string[];
-export declare const isAllItemsHasOneParent: (listData: IDropdownItem[], childrenArr: string[]) => boolean;
-export declare function prepareComboOptionsForList(actionListData: Set<string>, translate: (s: string) => string, options: IDropdownItem[], getSelectedFn: () => string[], getSelectedChildFn: (optionId: any) => string[], isFlatList: boolean, getTitle?: (itemId: string) => string, isAllSelected?: boolean): ICheckboxListWithActionOption[];
-export declare const createOptions: (stateObj: IDropdownState, translate: (s: string) => string, listItem: IDropdownItem[], isAllSelected?: boolean) => ICheckboxListWithActionOption[];
-export declare const sortDropdownItemArray: (arr: IDropdownItem[], sortFn?: (a: IDropdownItem, b: IDropdownItem) => number) => IDropdownItem[];
-export declare const createSingleListOptions: (stateObj: IDropdownState, translate: (s: string) => string, listItem: IDropdownItem[]) => {
+export declare const isEveryItemSelected: (listData: IDropdownRawItem[], selectedItems: string[]) => boolean;
+export declare const getDataForChange: (listData: IDropdownRawItem[], selectedItems: string[], isDeselect: boolean) => string[];
+export declare const isAllItemsHasOneParent: (listData: IDropdownRawItem[], childrenArr: string[]) => boolean;
+export declare function prepareComboOptionsForList(actionListData: Set<string>, translate: (s: string) => string, options: IDropdownRawItem[], getSelectedFn: () => string[], getSelectedChildFn: (optionId: any) => string[], isFlatList: boolean, getTitle?: (itemId: string) => string, isAllSelected?: boolean): ICheckboxListWithActionOption[];
+export declare const createOptions: (stateObj: IDropdownState, translate: (s: string) => string, listItem: IDropdownRawItem[], isAllSelected?: boolean) => ICheckboxListWithActionOption[];
+export declare const sortDropdownItemArray: (arr: IDropdownRawItem[], sortFn?: (a: IDropdownRawItem, b: IDropdownRawItem) => number) => IDropdownRawItem[];
+export declare const createSingleListOptions: (stateObj: IDropdownState, translate: (s: string) => string, listItem: IDropdownRawItem[]) => {
     id: string;
     children: string;
     disabled: boolean | undefined;
     multiLevel: boolean | undefined;
 }[];
-export declare const createListDataOptions: (stateObj: IDropdownState, translate: (s: string) => string, listItem: IDropdownItem[], isMultiselect: boolean, isAllSelected?: boolean) => ICheckboxListWithActionOption[] | {
+export declare const createListDataOptions: (stateObj: IDropdownState, translate: (s: string) => string, listItem: IDropdownRawItem[], isMultiselect: boolean, isAllSelected?: boolean) => ICheckboxListWithActionOption[] | {
     id: string;
     children: string;
     disabled: boolean | undefined;
     multiLevel: boolean | undefined;
 }[];
 export declare const compareStringsArrays: (arr1: string[], arr2: string[]) => boolean;
-export declare const compareObjectsArrays: (arr1: IDropdownItem[], arr2: IDropdownItem[]) => boolean;
-export declare const prepareSelectedIdsToItems: (selectedIds: string[], groupsMap: IDropdownState["groupsMap"], groupsMapSelected: Map<string, IDropdownItem>) => IDropdownItem[];
+export declare const compareObjectsArrays: (arr1: IDropdownRawItem[], arr2: IDropdownRawItem[]) => boolean;
+export declare const prepareSelectedIdsToItems: (selectedIds: string[], groupsMap: IDropdownState["groupsMap"], groupsMapSelected: Map<string, IDropdownItem>) => IDropdownRawItem[];
 export declare const checkIsDataProblem: (selectedIds: string[], groupsMap: IDropdownState["groupsMap"]) => boolean;
-export declare const getStringFromSelected: (selectedIds: string[], groupsMapSelected: Map<string, IDropdownItem>, translate: (s: string) => string) => string;
+export declare const getStringFromSelected: (selectedIds: string[], groupsMapSelected: Map<string, IDropdownRawItem>, translate: (s: string) => string) => string;
 export declare const getStringFromAllSelected: (groupsMap: IDropdownState["groupsMap"], translate: (s: string) => string) => string;
 export declare const getSelectedCount: (selectedIds: string[]) => number;

package/esm/{dropdown → dropdownRaw}/dropdownHelper.js

@@ -1,4 +1,4 @@
-import { ENTIRE_ORGANIZATION_GROUP_ID, getGroupDescription } from "../groupsFilter/groupsHelper";
+import { ENTIRE_ORGANIZATION_GROUP_ID, getGroupDescription } from "../groupsFilterRaw/groupsHelper";
 import { getChildList } from "./stateReducer/stateReducerHelper";
 export const getGroupsTreeItem = (stateObj, itemId) => {
     const item = stateObj.groupsMap[itemId];

package/esm/dropdownRaw/dropdownPopup.d.ts

@@ -0,0 +1,34 @@
+import { RefObject } from "react";
+import { TAlignment } from "../absolute/absolute";
+import { IZenComponentProps } from "../commonHelpers/zenComponent";
+export interface IDropdownPopup extends IZenComponentProps {
+    alignment?: TAlignment;
+    triggerRef: RefObject<HTMLElement | null>;
+    classNamePopup?: string;
+    mobileSheetStackingClassName?: string;
+    isMobile: boolean;
+    dialogAriaLabel?: string;
+    disabled?: boolean;
+    filterName?: string;
+    hasApplyButton?: boolean;
+    inputId?: string;
+    isClearButtonDisabled: boolean;
+    isApplyButtonDisabled: boolean;
+    isWithFooter: boolean;
+    isOpenCombo: boolean;
+    searchField?: boolean;
+    placeholder?: string;
+    inputValue?: string;
+    handleApplyClick: () => void;
+    handleClearClick: () => void;
+    handleTriggerClick: (newVal: boolean) => void;
+    onInputChange: (newValue?: string) => void;
+    inputRef: RefObject<HTMLInputElement | null>;
+    contentRef: RefObject<HTMLDivElement | null>;
+    onReadyForFocus?: (isCurrentOpen: boolean) => void;
+    handleCheckboxChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    checkboxLabel?: string;
+    isChecked?: boolean;
+    isSearchInPopup?: boolean;
+}
+export declare const DropdownPopup: React.FC<IDropdownPopup>;

package/esm/dropdownRaw/dropdownPopup.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useId, useMemo } from "react";
+import { MobileSheet } from "../mobileSheet/mobileSheet";
+import { Button } from "../button/button";
+import { ButtonType } from "../button/buttonType";
+import { ControlledPopup } from "../controlledPopup/controlledPopup";
+import { classNames } from "../commonHelpers/classNames/classNames";
+import { SearchInput } from "../searchInput/searchInput";
+import { useLanguage } from "../utils/localization/useLanguage";
+import { FooterButtons } from "../footerButtons/footerButtons";
+import { Checkbox } from "../checkbox/checkbox";
+import { useScrollWithAndroidKeyboard } from "../utils/useScrollWithAndroidKeyboard";
+export const DropdownPopup = ({ alignment, triggerRef, classNamePopup, isMobile, inputValue, dialogAriaLabel, disabled, filterName, handleApplyClick, handleClearClick, handleTriggerClick, mobileSheetStackingClassName, onInputChange, hasApplyButton, inputId, isClearButtonDisabled, isWithFooter, placeholder, searchField, isSearchInPopup, isApplyButtonDisabled, isOpenCombo, inputRef, contentRef, children, onReadyForFocus, handleCheckboxChange, checkboxLabel, isChecked }) => {
+    const { translate } = useLanguage();
+    const triggerId = useId();
+    const { handleFocus, handleBlur, wrapperClass } = useScrollWithAndroidKeyboard();
+    const memoizedHandleHide = useCallback(() => {
+        handleTriggerClick(false);
+    }, [handleTriggerClick]);
+    const memoizedMobileContent = useMemo(() => _jsxs(_Fragment, { children: [searchField ? _jsx("div", { className: "zen-dropdown-mobile-sheet__search-container", children: _jsx(SearchInput, { className: "zen-dropdown-mobile-sheet__search", onChange: onInputChange, onBlur: handleBlur, onFocus: handleFocus, value: inputValue || "", ref: inputRef, id: inputId || triggerId, disabled: disabled, placeholder: placeholder || translate("Filter by group") }) }) : null, handleCheckboxChange ? _jsx("div", { className: "zen-dropdown-mobile-sheet__checkbox-container", children: _jsx(Checkbox, { checked: isChecked, onChange: handleCheckboxChange, children: checkboxLabel }) }) : null, _jsx("div", { ref: contentRef, children: children })] }), [searchField, onInputChange, handleBlur, handleFocus, inputValue, inputRef, inputId, triggerId, disabled, placeholder,
+        translate, handleCheckboxChange, isChecked, checkboxLabel, contentRef, children]);
+    const memoizedMobileFooter = useMemo(() => {
+        if (!isWithFooter) {
+            return null;
+        }
+        return _jsxs(FooterButtons, { children: [hasApplyButton ? _jsx(Button, { onClick: handleApplyClick, type: ButtonType.Primary, disabled: isApplyButtonDisabled, className: "zen-ellipsis", title: translate("Apply"), children: translate("Apply") }) : null, _jsx(Button, { onClick: handleClearClick, disabled: isClearButtonDisabled, className: "zen-ellipsis", type: ButtonType.Tertiary, title: translate("Clear"), children: translate("Clear") })] });
+    }, [handleApplyClick, handleClearClick, hasApplyButton, isApplyButtonDisabled, isClearButtonDisabled, isWithFooter, translate]);
+    const memoizedMobileView = useMemo(() => _jsxs(MobileSheet, { className: classNames(["zen-dropdown--mobile", classNamePopup || ""]), wrapperClassName: wrapperClass, stackingClassName: mobileSheetStackingClassName, label: "label", triggerRef: triggerRef, isOpen: isOpenCombo, onHidePanel: memoizedHandleHide, onCloseClick: memoizedHandleHide, useTrapFocusWithTrigger: true, onReadyForFocus: onReadyForFocus, children: [_jsx(MobileSheet.Title, { className: "zen-dropdown-mobile-sheet__title", children: filterName || placeholder || "" }), _jsx(MobileSheet.Content, { children: memoizedMobileContent }), _jsx(MobileSheet.Footer, { children: memoizedMobileFooter })] }), [classNamePopup, wrapperClass, mobileSheetStackingClassName, triggerRef, isOpenCombo, memoizedHandleHide, onReadyForFocus, filterName, placeholder, memoizedMobileContent, memoizedMobileFooter]);
+    const memoizedDesktopView = useMemo(() => _jsx(ControlledPopup, { isOpen: isOpenCombo, className: classNames(["zen-dropdown-popup zen-shadow-dropdown-default", classNamePopup || ""]), onOpenChange: handleTriggerClick, useTrapFocusWithTrigger: "withTrigger", alignment: alignment, shouldHoldScroll: true, triggerRef: triggerRef, ariaLabel: dialogAriaLabel || placeholder || translate("Filter by group"), recalculateOnScroll: true, children: _jsxs("div", { ref: contentRef, children: [searchField && isSearchInPopup ? _jsx("div", { className: "zen-dropdown-popup__search-container", children: _jsx(SearchInput, { className: "zen-dropdown-chip__search", onChange: onInputChange, value: inputValue || "", ref: inputRef, id: inputId || triggerId, disabled: disabled, placeholder: placeholder || translate("Filter by group") }) }) : null, children] }) }), [alignment, children, classNamePopup, contentRef, dialogAriaLabel, disabled, handleTriggerClick, inputId, inputRef, inputValue, isOpenCombo, isSearchInPopup, onInputChange, placeholder, searchField, translate, triggerId, triggerRef]);
+    return isMobile ? memoizedMobileView : memoizedDesktopView;
+};

package/esm/dropdownRaw/dropdownRaw.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import "./dropdownRaw.less";
+import { IFormFieldComponent } from "../formField/formField";
+import { TDropdownRaw } from "./types";
+export declare const DropdownRaw: React.FC<TDropdownRaw & IFormFieldComponent>;
+export declare const TRANSLATIONS: string[];