@geotab/zenith 3.5.0 → 3.6.0-beta.0

package/esm/filters/components/filtersSidePanelChip.js

@@ -5,5 +5,5 @@ export const FiltersSidePanelChip = ({ currentState, handleStateChange, id, chil
     const handleChange = useCallback((e) => {
         handleStateChange(e.target.checked);
     }, [handleStateChange]);
-    return _jsx(Checkbox, { fullWidth: true, id: id, onChange: handleChange, checked: currentState, children: children });
+    return _jsx(Checkbox, { fullWidth: true, id: `${id}-side-panel`, onChange: handleChange, checked: currentState, children: children });
 };

package/esm/filters/components/filtersSidePanelDateRange.d.ts

@@ -0,0 +1,2 @@
+import { IFiltersDateRangeItem, IFiltersDateRangeProps } from "./filtersDateRange";
+export declare const FiltersSidePanelDateRange: <P extends IFiltersDateRangeProps = IFiltersDateRangeProps>({ className, classNamePopup, state, defaultState, name, onChange: onChangeState, id, allowUnsetValue, chipIcon, ...dateRangeProps }: IFiltersDateRangeItem<P>) => React.JSX.Element;

package/esm/filters/components/filtersSidePanelDateRange.js

@@ -0,0 +1,20 @@
+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 } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { DateRangeRaw } from "../../dateRangeRaw/dateRangeRaw";
+import { classNames } from "../../commonHelpers/classNames/classNames";
+export const FiltersSidePanelDateRange = (_a) => {
+    var { className, classNamePopup, state, defaultState, name, onChange: onChangeState, id, allowUnsetValue, chipIcon } = _a, dateRangeProps = __rest(_a, ["className", "classNamePopup", "state", "defaultState", "name", "onChange", "id", "allowUnsetValue", "chipIcon"]);
+    const component = useMemo(() => allowUnsetValue ? _jsx(DateRangeRaw, Object.assign({}, dateRangeProps, { id: `${id}-side-panel`, classNamePopup: classNames([classNamePopup || "", "zen-side-panel-filters__date-popup--full-width"]), className: classNames(["zen-side-panel-filters__item-element", "zen-side-panel-filters__item-element--centred", className || ""]), value: state, onChange: onChangeState, defaultValue: defaultState, allowUnsetValue: true, chip: false })) : _jsx(DateRangeRaw, Object.assign({}, dateRangeProps, { id: `${id}-side-panel`, classNamePopup: classNames([classNamePopup || "", "zen-side-panel-filters__date-popup--full-width"]), className: classNames(["zen-side-panel-filters__item-element", "zen-side-panel-filters__item-element--centred", className || ""]), value: state, onChange: onChangeState, defaultValue: defaultState, allowUnsetValue: false, chip: false })), [allowUnsetValue, dateRangeProps, id, classNamePopup, className, state, onChangeState, defaultState]);
+    return component;
+};

package/esm/filters/components/filtersSidePanelDropdown.js

@@ -14,15 +14,22 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { classNames } from "../../commonHelpers/classNames/classNames";
 import { Dropdown } from "../../dropdown/dropdown";
 import { getDropdownStateType, prepareDefaultDropdownState } from "../filtersHelper";
-import { FiltersChip } from "./filtersChip";
+import { FiltersChipInner } from "./filtersChip";
 import { Skeleton } from "../../skeleton/skeleton";
 import { useLanguage } from "../../utils/localization/useLanguage";
 import { SkeletonList } from "../../skeletonList/skeletonList";
 import { getGroupDescription } from "../../groupsFilterRaw/groupsHelper";
 import { sortDropdownItemArray } from "../../dropdownRaw/dropdownHelper";
 import { RadioGroupRaw } from "../../radioGroupRaw/radioGroupRaw";
+import { getNewFocusableItem } from "../../utils/keyboardHelpers";
+import { useMobile } from "../../commonHelpers/hooks/useMobile";
+import { useDrive } from "../../utils/theme/useDrive";
 export const FiltersSidePanelDropdown = ({ elemProps, currentState, handleStateChange }) => {
+    const isMobile = useMobile();
+    const isDrive = useDrive();
+    const isSpecialSize = useMemo(() => isMobile || isDrive, [isMobile, isDrive]);
     const simpleViewLimit = 7;
+    const dropdownChipsContainerRef = useRef(null);
     const _a = elemProps, { id, name, state: _globalState, onChange: _globalOnChange, defaultState, fetchState, dataItems, isLoading, classNamePopup } = _a, otherProps = __rest(_a, ["id", "name", "state", "onChange", "defaultState", "fetchState", "dataItems", "isLoading", "classNamePopup"]);
     const dropdownDataRef = useRef(null);
     const { translate } = useLanguage();
@@ -41,6 +48,16 @@ export const FiltersSidePanelDropdown = ({ elemProps, currentState, handleStateC
             setComponentType("popup");
         }
     }, [componentType, fetchState, dataItems, isMultiselect, sortFn]);
+    const handleKeyDown = useCallback((event) => {
+        if (event.key === "ArrowRight") {
+            const nextFocusable = getNewFocusableItem(1, dropdownChipsContainerRef.current);
+            nextFocusable === null || nextFocusable === void 0 ? void 0 : nextFocusable.focus();
+        }
+        if (event.key === "ArrowLeft") {
+            const nextFocusable = getNewFocusableItem(-1, dropdownChipsContainerRef.current);
+            nextFocusable === null || nextFocusable === void 0 ? void 0 : nextFocusable.focus();
+        }
+    }, []);
     const prepareValue = (value) => {
         if (Array.isArray(value)) {
             return value.map((el) => el.id);
@@ -63,11 +80,12 @@ export const FiltersSidePanelDropdown = ({ elemProps, currentState, handleStateC
         handleStateChange(newValue());
     }, [currentState, handleStateChange]);
     if (!componentType && (dataItems !== undefined && isLoading || fetchState && fetchState.isLoading)) {
-        return isMultiselect ? _jsx(Skeleton, { width: 328, height: 32 }) : _jsx(SkeletonList, { className: "zen-side-panel-filters__dropdown-skeleton", size: "small" });
+        return isMultiselect ? _jsx(Skeleton, { width: 328, height: isSpecialSize ? 40 : 32 })
+            : _jsx(SkeletonList, { className: "zen-side-panel-filters__dropdown-skeleton", size: "small", height: isSpecialSize ? 20 : undefined });
     }
     if (componentType === "chip" && dropdownDataRef.current) {
-        const dropdownChips = dropdownDataRef.current.map((item) => (_jsx(FiltersChip, { id: `${id}-side-panel-chip-${item.id}`, name: item.name || item.id, state: currentState.includes(item.id), onChange: handleChipChange(item.id), icon: elemProps.chipIcon }, `${id}-side-panel-chip-${item.id}-${item.name || ""}`)));
-        return _jsx("div", { className: classNames(["zen-side-panel-filters__dropdown-item-chips-container"]), children: dropdownChips });
+        const dropdownChips = dropdownDataRef.current.map((item) => (_jsx(FiltersChipInner, { id: `${id}-side-panel-chip-${item.id}`, name: item.name || item.id, state: currentState.includes(item.id), onChange: handleChipChange(item.id), icon: elemProps.chipIcon }, `${id}-side-panel-chip-${item.id}-${item.name || ""}`)));
+        return _jsx("div", { ref: dropdownChipsContainerRef, onKeyDown: handleKeyDown, className: classNames(["zen-side-panel-filters__dropdown-item-chips-container"]), children: dropdownChips });
     }
     if (componentType === "radio" && dropdownDataRef.current) {
         const dropdownRadioGroup = _jsx(RadioGroupRaw, { direction: "vertical", size: "small", id: `${id}-side-panel-dropdown-radio-group`, className: "zen-side-panel-radio-group__filter-item", items: dropdownDataRef.current.map((item) => ({

package/esm/filters/components/filtersSidePanelItem.d.ts

@@ -1,6 +1,5 @@
-import { ReactElement } from "react";
+import React, { ReactElement } from "react";
 import { TFiltersComponentsItemState, TFiltersComponentsProps } from "./filtersItem";
-import "./filtersSidePanelItem.less";
 interface IFiltersSidePanelItem {
     item: ReactElement<TFiltersComponentsProps>;
     itemState: TFiltersComponentsItemState;
@@ -12,5 +11,5 @@ export interface IFiltersSidePanelComponentProps<T> {
     currentState: T;
     handleStateChange: (newState: T) => void;
 }
-export declare const FiltersSidePanelItem: ({ item, itemState, changeHandler, errorCheck }: IFiltersSidePanelItem) => import("react/jsx-runtime").JSX.Element;
+export declare const FiltersSidePanelItem: ({ item, itemState, changeHandler, errorCheck }: IFiltersSidePanelItem) => React.ReactElement<TFiltersComponentsProps, string | React.JSXElementConstructor<any>>;
 export {};

package/esm/filters/components/filtersSidePanelItem.js

@@ -1,62 +1,11 @@
-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, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useMemo } from "react";
-import { FiltersChip } from "./filtersChip";
+import React, { useCallback, useMemo } from "react";
 import { FiltersRange } from "./filtersRange";
-import { classNames } from "../../commonHelpers/classNames/classNames";
-import { FiltersDropdown } from "./filtersDropdown";
-import { FiltersGroups } from "./filtersGroups";
-import { GroupsFilter } from "../../groupsFilter/groupsFilter";
-import { FiltersDateRange } from "./filtersDateRange";
-import { DateRange } from "../../dateRange/dateRange";
-import { FiltersDateInput } from "./filtersDateInput";
-import { DateInput } from "../../dateInput/dateInput";
-import { FiltersSidePanelDropdown } from "./filtersSidePanelDropdown";
-import { FiltersSidePanelChip } from "./filtersSidePanelChip";
-import { useUniqueId } from "../../commonHelpers/useUniqueId";
-import { FiltersSidePanelRange } from "./filtersSidePanelRange";
 export const FiltersSidePanelItem = ({ item, itemState, changeHandler, errorCheck }) => {
-    const labelledId = useUniqueId();
     const getComponent = useCallback((elem, currentState, handleStateChange) => {
         const { type, props } = elem;
-        switch (type) {
-            case FiltersChip: {
-                const { id, state: _globalState, name, onChange: _globalOnChange } = props;
-                return _jsx(FiltersSidePanelChip, { id: `${id}-side-panel`, currentState: currentState, handleStateChange: handleStateChange, children: name });
-            }
-            case FiltersRange: {
-                const _a = props, { id, state: _globalState, name, onChange: _globalOnChange, defaultState, className } = _a, otherProps = __rest(_a, ["id", "state", "name", "onChange", "defaultState", "className"]);
-                return _jsx(FiltersSidePanelRange, Object.assign({}, otherProps, { id: `${id}-side-panel`, onChange: handleStateChange, value: currentState, errorCheck: errorCheck, className: classNames(["zen-side-panel-filters__item-element", className || ""]) }));
-            }
-            case FiltersDropdown: {
-                return _jsx(FiltersSidePanelDropdown, { elemProps: props, currentState: currentState, handleStateChange: handleStateChange });
-            }
-            case FiltersGroups: {
-                const _b = props, { id, state: _globalState, onChange: _globalOnChange } = _b, otherProps = __rest(_b, ["id", "state", "onChange"]);
-                return _jsx(GroupsFilter, Object.assign({ initialFilterState: currentState, onChange: handleStateChange }, otherProps, { chip: false, fullSize: true }));
-            }
-            case FiltersDateRange: {
-                const _c = props, { id, state: _globalState, onChange: _globalOnChange, defaultState, allowUnsetValue, className, classNamePopup } = _c, otherProps = __rest(_c, ["id", "state", "onChange", "defaultState", "allowUnsetValue", "className", "classNamePopup"]);
-                return allowUnsetValue ? _jsx(DateRange, Object.assign({}, otherProps, { id: `${id}-side-panel`, classNamePopup: classNames([classNamePopup || "", "zen-side-panel-filters__date-popup--full-width"]), className: classNames(["zen-side-panel-filters__item-element", "zen-side-panel-filters__item-element--centred", className || ""]), value: currentState, onChange: handleStateChange, defaultValue: defaultState, allowUnsetValue: true, chip: false })) : _jsx(DateRange, Object.assign({}, otherProps, { id: `${id}-side-panel`, classNamePopup: classNames([classNamePopup || "", "zen-side-panel-filters__date-popup--full-width"]), className: classNames(["zen-side-panel-filters__item-element", "zen-side-panel-filters__item-element--centred", className || ""]), value: currentState, onChange: handleStateChange, defaultValue: defaultState, allowUnsetValue: false, chip: false }));
-            }
-            case FiltersDateInput: {
-                const _d = props, { id, state: _globalState, name, onChange: _globalOnChange, defaultState, className, classNamePopup } = _d, otherProps = __rest(_d, ["id", "state", "name", "onChange", "defaultState", "className", "classNamePopup"]);
-                return _jsx(DateInput, Object.assign({}, otherProps, { id: `${id}-side-panel`, classNamePopup: classNames([classNamePopup || "", "zen-side-panel-filters__date-popup--full-width"]), className: classNames(["zen-side-panel-filters__item-element", "zen-side-panel-filters__item-element--centred", className || ""]), buttonLabel: name, value: currentState, onChange: handleStateChange, defaultValue: defaultState, chip: false }));
-            }
-            default:
-                return null;
-        }
+        const extraProps = (type === FiltersRange || props.childType === "FiltersRange") ? { errorCheck } : {};
+        return React.cloneElement(elem, Object.assign(Object.assign(Object.assign({}, props), { id: `${props.id}`, key: `${props.id}-side-panel`, state: currentState, onChange: handleStateChange }), extraProps));
     }, [errorCheck]);
-    const memoizedItem = useMemo(() => getComponent(item, itemState, changeHandler), [getComponent, item, itemState, changeHandler]);
-    return (_jsxs("div", { className: "zen-side-panel-filters__item", role: "group", "aria-labelledby": labelledId, children: [_jsx("div", { className: "zen-side-panel-filters__item-label", id: labelledId, children: item.props.name }), _jsx("div", { children: memoizedItem })] }));
+    const memoizedItem = useMemo(() => getComponent(item, itemState, changeHandler), [item, getComponent, itemState, changeHandler]);
+    return memoizedItem;
 };

package/esm/filters/components/filtersSidePanelItemWrapper.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import "./filtersSidePanelItemWrapper.less";
+interface IFiltersSidePanelItemWrapperProps {
+    name: string;
+    children: React.ReactNode;
+}
+export declare const FiltersSidePanelItemWrapper: ({ name, children }: IFiltersSidePanelItemWrapperProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/esm/filters/components/filtersSidePanelItemWrapper.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { useUniqueId } from "../../commonHelpers/useUniqueId";
+import { classNames } from "../../commonHelpers/classNames/classNames";
+import { useMobileClassName } from "../../utils/theme/useMobileClassName";
+import { useDriveClassName } from "../../utils/theme/useDriveClassName";
+export const FiltersSidePanelItemWrapper = ({ name, children }) => {
+    const labelledId = useUniqueId();
+    const labelDriveClassName = useDriveClassName("zen-side-panel-filters__item-label");
+    const labelMobileClassName = useMobileClassName("zen-side-panel-filters__item-label");
+    const labelClassName = useMemo(() => labelMobileClassName || labelDriveClassName || "", [labelMobileClassName, labelDriveClassName]);
+    return _jsxs("div", { className: "zen-side-panel-filters__item", role: "group", "aria-labelledby": labelledId, children: [_jsx("div", { className: classNames(["zen-side-panel-filters__item-label", labelClassName]), id: labelledId, children: name }), _jsx("div", { children: children })] });
+};

package/esm/filters/components/filtersSidePanelProvider.d.ts

@@ -0,0 +1,8 @@
+import { FC, PropsWithChildren } from "react";
+export declare const filtersSidePanelContext: import("react").Context<IFiltersSidePanelProviderProps>;
+interface IFiltersSidePanelProviderProps extends PropsWithChildren {
+    isSidePanelView: boolean;
+}
+export declare const FiltersSidePanelProvider: FC<IFiltersSidePanelProviderProps>;
+export declare const useFiltersSidePanel: () => boolean;
+export {};

package/esm/filters/components/filtersSidePanelProvider.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+export const filtersSidePanelContext = createContext({ isSidePanelView: false });
+export const FiltersSidePanelProvider = ({ isSidePanelView, children }) => (_jsx(filtersSidePanelContext.Provider, { value: { isSidePanelView }, children: children }));
+export const useFiltersSidePanel = () => {
+    const { isSidePanelView } = useContext(filtersSidePanelContext);
+    return isSidePanelView;
+};

package/esm/filters/components/filtersSidePanelRange.d.ts

@@ -1,6 +1,8 @@
 import { IFiltersBarSidePanelRange } from "../../filtersBar/filtersBarSidePanel/components/filtersBarSidePanelRange/filtersBarSidePanelRange";
-interface IFiltersSidePanelRangeProps extends IFiltersBarSidePanelRange {
-    errorCheck: (isError: boolean) => void;
+interface IFiltersSidePanelRangeProps extends Omit<IFiltersBarSidePanelRange, "value"> {
+    errorCheck?: (isError: boolean) => void;
+    id: string;
+    state: IFiltersBarSidePanelRange["value"];
 }
-export declare const FiltersSidePanelRange: ({ errorCheck, ...otherProps }: IFiltersSidePanelRangeProps) => import("react/jsx-runtime").JSX.Element;
+export declare const FiltersSidePanelRange: ({ id, state, ...otherProps }: IFiltersSidePanelRangeProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/esm/filters/components/filtersSidePanelRange.js

@@ -14,11 +14,11 @@ import { useEffect, useMemo } from "react";
 import { FiltersBarSidePanelRange } from "../../filtersBar/filtersBarSidePanel/components/filtersBarSidePanelRange/filtersBarSidePanelRange";
 import { checkErrorType } from "../../rangeRaw/utils/rangeHelper";
 export const FiltersSidePanelRange = (_a) => {
-    var { errorCheck } = _a, otherProps = __rest(_a, ["errorCheck"]);
-    const { value } = otherProps;
-    const hasError = useMemo(() => checkErrorType(value.min, value.max, otherProps.fullBounded, otherProps.allowEqualMinMax, otherProps.min, otherProps.max) !== undefined, [value, otherProps.fullBounded, otherProps.allowEqualMinMax, otherProps.min, otherProps.max]);
+    var { id, state } = _a, otherProps = __rest(_a, ["id", "state"]);
+    const { errorCheck } = otherProps;
+    const hasError = useMemo(() => checkErrorType(state.min, state.max, otherProps.fullBounded, otherProps.allowEqualMinMax, otherProps.min, otherProps.max) !== undefined, [state, otherProps.fullBounded, otherProps.allowEqualMinMax, otherProps.min, otherProps.max]);
     useEffect(() => {
-        errorCheck(hasError);
+        errorCheck === null || errorCheck === void 0 ? void 0 : errorCheck(hasError);
     }, [errorCheck, hasError]);
-    return _jsx(FiltersBarSidePanelRange, Object.assign({}, otherProps));
+    return _jsx(FiltersBarSidePanelRange, Object.assign({ id: `${id}-side-panel` }, otherProps, { value: state }));
 };

package/esm/filters/filters.d.ts

@@ -38,12 +38,16 @@ export interface IFiltersSearchTypesItem {
     relevance?: number;
 }
 export interface IFiltersBase extends IZenComponentProps {
+    searchTypes?: IFiltersSearchTypesItem[] | IFiltersSearchTypesItem;
+    onToggleView?: (isOpen: boolean) => void;
+}
+export interface IFiltersWithKeyword {
     keyword: string;
     setKeyword: (newKeyword: string) => void;
-    searchTypes?: IFiltersSearchTypesItem[] | IFiltersSearchTypesItem;
+}
+export interface IFiltersWithSearchType {
     searchType: IFiltersSearchType;
     setSearchType: (newType: IFiltersSearchType) => void;
-    onToggleView?: (isOpen: boolean) => void;
 }
 export interface IFiltersWithRecentSearches {
     recentSearches: IFetchState<IRecentSearchItem[]>;
@@ -67,7 +71,7 @@ export interface IFiltersWithExternalState {
     allFiltersState: Record<string, TFiltersComponentsItemState>;
     setAllFiltersState: (newState: Partial<Record<string, TFiltersComponentsItemState>>) => void;
 }
-export interface IFilters extends IFiltersBase, Partial<IFiltersWithRecentSearches>, Partial<IFiltersWithSearchSelection>, Partial<IFiltersWithPin>, Partial<IFiltersWithSavedFilters>, Partial<IFiltersWithExternalState> {
+export interface IFilters extends IFiltersBase, Partial<IFiltersWithKeyword>, Partial<IFiltersWithSearchType>, Partial<IFiltersWithRecentSearches>, Partial<IFiltersWithSearchSelection>, Partial<IFiltersWithPin>, Partial<IFiltersWithSavedFilters>, Partial<IFiltersWithExternalState> {
 }
 /** Base filters with only required functionality */
 export type IFiltersBasic = IFiltersBase;