@geotab/zenith 3.1.0 → 3.1.1-beta.1

package/dist/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/dist/dropdown/dropdownTrigger.js

@@ -1,32 +1,5 @@
 "use strict";
-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;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TRANSLATIONS = exports.DropdownTrigger = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const dropdownSearchableTrigger_1 = require("./dropdownSearchableTrigger");
-const filterButton_1 = require("../filterButton/filterButton");
-const react_1 = require("react");
-const classNames_1 = require("../commonHelpers/classNames/classNames");
-const formFieldError_1 = require("../formFieldError/formFieldError");
-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 = (0, react_1.useRef)(null);
-    const handleButtonClick = () => {
-        handleClick(!isActive);
-    };
-    return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [searchField ? (0, jsx_runtime_1.jsx)(dropdownSearchableTrigger_1.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)) : (0, jsx_runtime_1.jsx)(filterButton_1.FilterButton, Object.assign({ ref: triggerRef, id: id, className: (0, classNames_1.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 ? (0, jsx_runtime_1.jsx)("span", { className: (0, classNames_1.classNames)(["zen-dropdown__trigger-button-text", buttonType ? `zen-dropdown__trigger-button-text--${buttonType.toString()}` : ""]), children: currentSelection }) : placeholder })), (0, jsx_runtime_1.jsx)(formFieldError_1.FormFieldError, { error: error })] });
-};
-exports.DropdownTrigger = DropdownTrigger;
-exports.TRANSLATIONS = [
-    ...dropdownSearchableTrigger_1.TRANSLATIONS
-];
+exports.DropdownTrigger = void 0;
+const dropdownTrigger_1 = require("../dropdownRaw/dropdownTrigger");
+exports.DropdownTrigger = dropdownTrigger_1.DropdownTrigger;

package/dist/{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/dist/{dropdown → dropdownRaw}/dropdownHelper.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getSelectedCount = exports.getStringFromAllSelected = exports.getStringFromSelected = exports.checkIsDataProblem = exports.prepareSelectedIdsToItems = exports.compareObjectsArrays = exports.compareStringsArrays = exports.createListDataOptions = exports.createSingleListOptions = exports.sortDropdownItemArray = exports.createOptions = exports.prepareComboOptionsForList = exports.isAllItemsHasOneParent = exports.getDataForChange = exports.isEveryItemSelected = exports.isAllChildrenSelected = exports.getListDataWithDisabled = exports.getGroupsTreeItem = void 0;
-const groupsHelper_1 = require("../groupsFilter/groupsHelper");
+const groupsHelper_1 = require("../groupsFilterRaw/groupsHelper");
 const stateReducerHelper_1 = require("./stateReducer/stateReducerHelper");
 const getGroupsTreeItem = (stateObj, itemId) => {
     const item = stateObj.groupsMap[itemId];

package/dist/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/dist/dropdownRaw/dropdownPopup.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DropdownPopup = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const mobileSheet_1 = require("../mobileSheet/mobileSheet");
+const button_1 = require("../button/button");
+const buttonType_1 = require("../button/buttonType");
+const controlledPopup_1 = require("../controlledPopup/controlledPopup");
+const classNames_1 = require("../commonHelpers/classNames/classNames");
+const searchInput_1 = require("../searchInput/searchInput");
+const useLanguage_1 = require("../utils/localization/useLanguage");
+const footerButtons_1 = require("../footerButtons/footerButtons");
+const checkbox_1 = require("../checkbox/checkbox");
+const useScrollWithAndroidKeyboard_1 = require("../utils/useScrollWithAndroidKeyboard");
+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 } = (0, useLanguage_1.useLanguage)();
+    const triggerId = (0, react_1.useId)();
+    const { handleFocus, handleBlur, wrapperClass } = (0, useScrollWithAndroidKeyboard_1.useScrollWithAndroidKeyboard)();
+    const memoizedHandleHide = (0, react_1.useCallback)(() => {
+        handleTriggerClick(false);
+    }, [handleTriggerClick]);
+    const memoizedMobileContent = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [searchField ? (0, jsx_runtime_1.jsx)("div", { className: "zen-dropdown-mobile-sheet__search-container", children: (0, jsx_runtime_1.jsx)(searchInput_1.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 ? (0, jsx_runtime_1.jsx)("div", { className: "zen-dropdown-mobile-sheet__checkbox-container", children: (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: isChecked, onChange: handleCheckboxChange, children: checkboxLabel }) }) : null, (0, jsx_runtime_1.jsx)("div", { ref: contentRef, children: children })] }), [searchField, onInputChange, handleBlur, handleFocus, inputValue, inputRef, inputId, triggerId, disabled, placeholder,
+        translate, handleCheckboxChange, isChecked, checkboxLabel, contentRef, children]);
+    const memoizedMobileFooter = (0, react_1.useMemo)(() => {
+        if (!isWithFooter) {
+            return null;
+        }
+        return (0, jsx_runtime_1.jsxs)(footerButtons_1.FooterButtons, { children: [hasApplyButton ? (0, jsx_runtime_1.jsx)(button_1.Button, { onClick: handleApplyClick, type: buttonType_1.ButtonType.Primary, disabled: isApplyButtonDisabled, className: "zen-ellipsis", title: translate("Apply"), children: translate("Apply") }) : null, (0, jsx_runtime_1.jsx)(button_1.Button, { onClick: handleClearClick, disabled: isClearButtonDisabled, className: "zen-ellipsis", type: buttonType_1.ButtonType.Tertiary, title: translate("Clear"), children: translate("Clear") })] });
+    }, [handleApplyClick, handleClearClick, hasApplyButton, isApplyButtonDisabled, isClearButtonDisabled, isWithFooter, translate]);
+    const memoizedMobileView = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsxs)(mobileSheet_1.MobileSheet, { className: (0, classNames_1.classNames)(["zen-dropdown--mobile", classNamePopup || ""]), wrapperClassName: wrapperClass, stackingClassName: mobileSheetStackingClassName, label: "label", triggerRef: triggerRef, isOpen: isOpenCombo, onHidePanel: memoizedHandleHide, onCloseClick: memoizedHandleHide, useTrapFocusWithTrigger: true, onReadyForFocus: onReadyForFocus, children: [(0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Title, { className: "zen-dropdown-mobile-sheet__title", children: filterName || placeholder || "" }), (0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Content, { children: memoizedMobileContent }), (0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Footer, { children: memoizedMobileFooter })] }), [classNamePopup, wrapperClass, mobileSheetStackingClassName, triggerRef, isOpenCombo, memoizedHandleHide, onReadyForFocus, filterName, placeholder, memoizedMobileContent, memoizedMobileFooter]);
+    const memoizedDesktopView = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(controlledPopup_1.ControlledPopup, { isOpen: isOpenCombo, className: (0, classNames_1.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: (0, jsx_runtime_1.jsxs)("div", { ref: contentRef, children: [searchField && isSearchInPopup ? (0, jsx_runtime_1.jsx)("div", { className: "zen-dropdown-popup__search-container", children: (0, jsx_runtime_1.jsx)(searchInput_1.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;
+};
+exports.DropdownPopup = DropdownPopup;

package/dist/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[];