@geotab/zenith 1.26.4 → 1.26.5-beta.0

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

@@ -0,0 +1,17 @@
+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;

package/dist/filters/components/filtersModal.js

@@ -0,0 +1,107 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FiltersModal = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const modal_1 = require("../../modal/modal");
+const useLanguage_1 = require("../../utils/localization/useLanguage");
+const tabs_1 = require("../../tabs/tabs");
+const filtersHelper_1 = require("../filtersHelper");
+const filtersModalItem_1 = require("./filtersModalItem");
+const classNames_1 = require("../../commonHelpers/classNames/classNames");
+const filtersSavedItemsProvider_1 = require("./filtersSavedItemsProvider");
+const filtersSelect_1 = require("./filtersSelect");
+const filtersSaveModal_1 = require("./filtersSaveModal");
+const button_1 = require("../../button/button");
+const iconDisk_1 = require("../../icons/iconDisk");
+const useDriveClassName_1 = require("../../utils/theme/useDriveClassName");
+const iconPin2_1 = require("../../icons/iconPin2");
+const FiltersModal = ({ isOpen, onClose, onApply, onPin, tabItems, filters, externalModalState, setExternalModalState, isPinned = false }) => {
+    const { translate } = (0, useLanguage_1.useLanguage)();
+    const { onSave } = (0, filtersSavedItemsProvider_1.useFiltersSavedItems)();
+    const iconDriveClassName = (0, useDriveClassName_1.useDriveClassName)("icon");
+    const [activeTabId, setActiveTabId] = (0, react_1.useState)(filtersSelect_1.ALL_SELECT_OPTION_ID);
+    const [isSaveModalOpen, setIsSaveModalOpen] = (0, react_1.useState)(false);
+    const [filtersInternalModalState, setFiltersInternalModalState] = (0, react_1.useState)((0, filtersHelper_1.createStateObject)(filters, "state"));
+    const [initialExternalModalState] = (0, react_1.useState)(externalModalState);
+    const onTabChange = (newVal) => {
+        setActiveTabId(newVal);
+    };
+    const externalMode = (0, react_1.useMemo)(() => {
+        if (externalModalState === undefined || setExternalModalState === undefined) {
+            return false;
+        }
+        return true;
+    }, [externalModalState, setExternalModalState]);
+    const handleInternalFiltersStateChange = (0, react_1.useCallback)((id) => (newState) => {
+        setFiltersInternalModalState((prevState) => (Object.assign(Object.assign({}, prevState), { [id]: newState })));
+    }, []);
+    const handleExternalFiltersStateChange = (0, react_1.useCallback)((id) => (newState) => {
+        setExternalModalState && setExternalModalState({ [id]: newState });
+    }, [setExternalModalState]);
+    const currentState = (0, react_1.useMemo)(() => externalMode ? externalModalState
+        : filtersInternalModalState, [externalMode, externalModalState, filtersInternalModalState]);
+    const currentFilters = (0, react_1.useMemo)(() => filters.filter((item) => currentState.hasOwnProperty(item.props.id)
+        && (typeof item.props.visible === "boolean" ? item.props.visible
+            : item.props.visible === undefined ? true : item.props.visible([activeTabId], currentState))), [activeTabId, currentState, filters]);
+    const inhibitedFilters = (0, react_1.useMemo)(() => {
+        const inhibited = new Set();
+        if (externalMode) {
+            return inhibited;
+        }
+        currentFilters.forEach((item) => {
+            if (item.props.inhibit && item.props.inhibit.length > 0) {
+                item.props.inhibit.forEach((id) => inhibited.add(id));
+            }
+        });
+        return inhibited;
+    }, [currentFilters, externalMode]);
+    const handleClearClick = (0, react_1.useCallback)(() => {
+        const newState = (0, filtersHelper_1.createStateObject)(filters, "defaultState");
+        externalMode && setExternalModalState ? setExternalModalState(Object.assign({}, newState)) : setFiltersInternalModalState(newState);
+    }, [externalMode, filters, setExternalModalState]);
+    const handleApplyClick = (0, react_1.useCallback)(() => {
+        const stateForApply = externalMode ? currentState : {};
+        if (!externalMode) {
+            Object.keys(currentState).forEach(key => {
+                if (!inhibitedFilters.has(key)) {
+                    stateForApply[key] = currentState[key];
+                }
+            });
+        }
+        onApply(stateForApply);
+        onClose();
+    }, [currentState, externalMode, inhibitedFilters, onApply, onClose]);
+    const handleCancelClick = (0, react_1.useCallback)(() => {
+        const newState = (0, filtersHelper_1.createStateObject)(filters, "state");
+        externalMode && setExternalModalState ? setExternalModalState(Object.assign({}, newState)) : setFiltersInternalModalState(newState);
+        onClose();
+    }, [externalMode, filters, onClose, setExternalModalState]);
+    const handleExternalModeClose = (0, react_1.useCallback)(() => {
+        if (!(externalMode && initialExternalModalState && setExternalModalState)) {
+            return;
+        }
+        setExternalModalState(initialExternalModalState);
+        onClose();
+    }, [externalMode, initialExternalModalState, onClose, setExternalModalState]);
+    const toggleSaveModal = (0, react_1.useCallback)(() => {
+        setIsSaveModalOpen(val => !val);
+    }, []);
+    const handleSaveFilters = (0, react_1.useCallback)((filterName) => {
+        const stateForApply = externalMode ? currentState : {};
+        if (!externalMode) {
+            Object.keys(currentState).forEach(key => {
+                if (!inhibitedFilters.has(key)) {
+                    stateForApply[key] = currentState[key];
+                }
+            });
+        }
+        onSave && onSave(filterName, stateForApply);
+    }, [externalMode, currentState, onSave, inhibitedFilters]);
+    const modalItemChangeHandler = (0, react_1.useCallback)((id) => externalMode ? handleExternalFiltersStateChange(id) : handleInternalFiltersStateChange(id), [externalMode, handleExternalFiltersStateChange, handleInternalFiltersStateChange]);
+    const tabsContent = (0, react_1.useMemo)(() => currentFilters.filter((item) => !inhibitedFilters.has(item.props.id))
+        .map((item) => (0, jsx_runtime_1.jsx)(filtersModalItem_1.FiltersModalItem, { item: item, itemState: currentState[item.props.id], changeHandler: modalItemChangeHandler(item.props.id) }, item.props.id)), [currentFilters, inhibitedFilters, currentState, modalItemChangeHandler]);
+    const memoizedActionButtons = (0, react_1.useCallback)((onSaveFn, onPinFn, isPin) => ((0, jsx_runtime_1.jsxs)("div", { className: "zen-filters-modal__header-buttons", children: [onSaveFn && (0, jsx_runtime_1.jsx)(button_1.Button, { type: "tertiary", "data-focusable": "save", className: "zen-filters-modal__save-button zen-filters-modal__header-button", title: translate("Save"), "aria-label": translate("Save"), onClick: onSaveFn, children: (0, jsx_runtime_1.jsx)(iconDisk_1.IconDisk, { description: translate("Save"), className: "svgIcon", size: iconDriveClassName ? "huge" : "large" }) }), onPinFn && (0, jsx_runtime_1.jsx)(button_1.Button, { type: "tertiary", "data-focusable": "pin", className: (0, classNames_1.classNames)(["zen-filters-modal__pin-button", isPin ? "zen-filters-modal__header-button--active" : "", "zen-filters-modal__header-button"]), title: translate("Pin"), "aria-label": translate("Pin"), onClick: onPinFn, children: (0, jsx_runtime_1.jsx)(iconPin2_1.IconPin2, { description: translate("Pin"), className: "svgIcon", size: iconDriveClassName ? "huge" : "large" }) })] })), [iconDriveClassName, translate]);
+    return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(modal_1.Modal, { className: (0, classNames_1.classNames)(["zen-filters-modal", isSaveModalOpen ? "zen-filters-modal--secondary" : ""]), isOpen: isOpen, onClose: externalMode ? handleExternalModeClose : onClose, title: translate("All Filters"), children: [memoizedActionButtons(onSave ? toggleSaveModal : undefined, onPin, isPinned), (0, jsx_runtime_1.jsx)(tabs_1.Tabs, { activeTabId: activeTabId, onTabChange: onTabChange, tabs: tabItems }), (0, jsx_runtime_1.jsx)("div", { className: "zen-filters-modal__content", children: tabsContent }), (0, jsx_runtime_1.jsx)(modal_1.Modal.TertiaryButton, { type: "tertiary", onClick: handleClearClick, children: translate("Clear") }), (0, jsx_runtime_1.jsx)(modal_1.Modal.SecondaryButton, { onClick: handleCancelClick, children: translate("Cancel") }), (0, jsx_runtime_1.jsx)(modal_1.Modal.PrimaryButton, { onClick: handleApplyClick, children: translate("Apply") })] }), (0, jsx_runtime_1.jsx)(filtersSaveModal_1.FiltersSaveModal, { isOpen: isSaveModalOpen, onClose: toggleSaveModal, onSave: handleSaveFilters })] });
+};
+exports.FiltersModal = FiltersModal;

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

@@ -0,0 +1,9 @@
+import { ReactElement } from "react";
+import { TFiltersComponentsItemState, TFiltersComponentsProps } from "./filtersItem";
+interface IFiltersModalItem {
+    item: ReactElement<TFiltersComponentsProps>;
+    itemState: TFiltersComponentsItemState;
+    changeHandler: (newState: TFiltersComponentsItemState) => void;
+}
+export declare const FiltersModalItem: React.FC<IFiltersModalItem>;
+export {};

package/dist/filters/components/filtersModalItem.js

@@ -0,0 +1,74 @@
+"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.FiltersModalItem = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const filtersChip_1 = require("./filtersChip");
+const chip_1 = require("../../chip/chip");
+const filtersRange_1 = require("./filtersRange");
+const classNames_1 = require("../../commonHelpers/classNames/classNames");
+const filtersDropdown_1 = require("./filtersDropdown");
+const dropdown_1 = require("../../dropdown/dropdown");
+const filtersGroups_1 = require("./filtersGroups");
+const groupsFilter_1 = require("../../groupsFilter/groupsFilter");
+const filtersDateRange_1 = require("./filtersDateRange");
+const dateRange_1 = require("../../dateRange/dateRange");
+const range_1 = require("../../range/range");
+const chipStatusProvider_1 = require("../../chip/chipStatusProvider");
+const filtersHelper_1 = require("../filtersHelper");
+const FiltersModalItem = ({ item, itemState, changeHandler }) => {
+    const status = (0, chipStatusProvider_1.useChipStatus)();
+    const getComponent = (0, react_1.useCallback)((elem, currentState, handleStateChange, chipStatus) => {
+        const { type, props } = elem;
+        switch (type) {
+            case filtersChip_1.FiltersChip: {
+                const _a = props, { id, state: _globalState, name, onChange: _globalOnChange, className } = _a, otherProps = __rest(_a, ["id", "state", "name", "onChange", "className"]);
+                return (0, jsx_runtime_1.jsx)(chip_1.Chip, Object.assign({ id: `${id}-modal` }, otherProps, { active: currentState, status: currentState ? chipStatus || undefined : undefined, onChange: handleStateChange, children: name }));
+            }
+            case filtersRange_1.FiltersRange: {
+                const _b = props, { id, state: _globalState, name, onChange: _globalOnChange, defaultState, className } = _b, otherProps = __rest(_b, ["id", "state", "name", "onChange", "defaultState", "className"]);
+                return (0, jsx_runtime_1.jsx)(range_1.Range, Object.assign({}, otherProps, { id: `${id}-modal`, className: (0, classNames_1.classNames)(["zen-filters-modal__item-element", className || ""]), fullWidthTriggerButton: true, label: name, value: currentState, onChange: handleStateChange, defaultValue: defaultState, chip: false }));
+            }
+            case filtersDropdown_1.FiltersDropdown: {
+                const _c = props, { id, name, state: _globalState, onChange: _globalOnChange, defaultState, fetchState, classNamePopup } = _c, otherProps = __rest(_c, ["id", "name", "state", "onChange", "defaultState", "fetchState", "classNamePopup"]);
+                const prepareValue = (value) => {
+                    if (Array.isArray(value)) {
+                        return value.map((el) => el.id);
+                    }
+                    return Object.assign(Object.assign({}, value), { selected: value.selected.map((el) => el.id) });
+                };
+                const dropdownStateType = (0, filtersHelper_1.getDropdownStateType)(currentState);
+                const preparedDefaultState = defaultState ? defaultState : (0, filtersHelper_1.prepareDefaultDropdownState)(dropdownStateType);
+                const dropdownProps = Object.assign(Object.assign({}, otherProps), { id: `${id}-modal`, fetchState: fetchState, classNamePopup: (0, classNames_1.classNames)(["zen-filters-modal__item-popup", classNamePopup || ""]), isLoading: undefined, multiselect: dropdownStateType === "fullSelection" || dropdownStateType === "fullSelectionWithCheckbox" ? true : otherProps.multiselect, selectAllButton: dropdownStateType === "fullSelection" || dropdownStateType === "fullSelectionWithCheckbox" ? true : otherProps.selectAllButton, fullWidthTriggerButton: true, errorHandler: (() => { }), placeholder: otherProps.placeholder || name, showSelection: true, value: currentState, onChange: (newValue) => {
+                        const preparedValue = prepareValue(newValue);
+                        handleStateChange(preparedValue);
+                    }, defaultValue: preparedDefaultState, chip: false });
+                return (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, Object.assign({}, dropdownProps));
+            }
+            case filtersGroups_1.FiltersGroups: {
+                const _d = props, { id, state: _globalState, onChange: _globalOnChange } = _d, otherProps = __rest(_d, ["id", "state", "onChange"]);
+                return (0, jsx_runtime_1.jsx)(groupsFilter_1.GroupsFilter, Object.assign({ initialFilterState: currentState, onChange: handleStateChange }, otherProps, { chip: false, fullSize: true }));
+            }
+            case filtersDateRange_1.FiltersDateRange: {
+                const _e = props, { id, state: _globalState, onChange: _globalOnChange, defaultState, allowUnsetValue, className } = _e, otherProps = __rest(_e, ["id", "state", "onChange", "defaultState", "allowUnsetValue", "className"]);
+                return allowUnsetValue ? (0, jsx_runtime_1.jsx)(dateRange_1.DateRange, Object.assign({}, otherProps, { id: `${id}-modal`, className: (0, classNames_1.classNames)(["zen-filters-modal__item-element", "zen-filters-modal__item-element--centred", className || ""]), value: currentState, onChange: handleStateChange, defaultValue: defaultState, allowUnsetValue: true, chip: false })) : (0, jsx_runtime_1.jsx)(dateRange_1.DateRange, Object.assign({}, otherProps, { id: `${id}-modal`, className: (0, classNames_1.classNames)(["zen-filters-modal__item-element", "zen-filters-modal__item-element--centred", className || ""]), value: currentState, onChange: handleStateChange, defaultValue: defaultState, allowUnsetValue: false, chip: false }));
+            }
+            default:
+                return null;
+        }
+    }, []);
+    const memoizedItem = (0, react_1.useMemo)(() => getComponent(item, itemState, changeHandler, status), [getComponent, item, itemState, changeHandler, status]);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "zen-filters-modal__item", children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-filters-modal__item-label", children: item.props.name }), (0, jsx_runtime_1.jsx)("div", { children: memoizedItem })] }));
+};
+exports.FiltersModalItem = FiltersModalItem;

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { IFiltersItem } from "./filtersItem";
+import { IRange, IRangeValues } from "../../range/range";
+export interface IFiltersRangeProps extends Pick<IRange, "unit" | "labelMin" | "labelMax" | "disabled" | "triggerAriaLabel" | "min" | "max" | "fullBounded" | "allowEqualMinMax" | "chipIcon"> {
+}
+export interface IFiltersRangeState extends IRangeValues {
+}
+export interface IFiltersRange extends IFiltersItem<IFiltersRangeState>, IFiltersRangeProps {
+}
+export declare const FiltersRangeDisplayName = "FiltersRange";
+export declare const FiltersRange: React.FC<IFiltersRange>;

package/dist/filters/components/filtersRange.js

@@ -0,0 +1,27 @@
+"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.FiltersRange = exports.FiltersRangeDisplayName = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const classNames_1 = require("../../commonHelpers/classNames/classNames");
+const iconFilter_1 = require("../../icons/iconFilter");
+const range_1 = require("../../range/range");
+exports.FiltersRangeDisplayName = "FiltersRange";
+const FiltersRange = (_a) => {
+    var { className, state, defaultState, name, onChange: onChangeState, id, chipIcon } = _a, otherRangeProps = __rest(_a, ["className", "state", "defaultState", "name", "onChange", "id", "chipIcon"]);
+    const component = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(range_1.Range, Object.assign({}, otherRangeProps, { label: name, value: state, onChange: onChangeState, defaultValue: defaultState, className: (0, classNames_1.classNames)(["zen-filters-range", className || ""]), chip: true, chipId: id, chipName: name, chipIcon: chipIcon || iconFilter_1.IconFilter })), [otherRangeProps, chipIcon, state, onChangeState, defaultState, className, id, name]);
+    return component;
+};
+exports.FiltersRange = FiltersRange;
+exports.FiltersRange.displayName = exports.FiltersRangeDisplayName;

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

@@ -0,0 +1,7 @@
+import "./filtersModal.less";
+export interface IFiltersModal {
+    isOpen: boolean;
+    onClose: (isOpen: boolean) => void;
+    onSave: (filterName: string) => void;
+}
+export declare const FiltersSaveModal: ({ isOpen, onClose, onSave }: IFiltersModal) => import("react/jsx-runtime").JSX.Element;

package/dist/filters/components/filtersSaveModal.js

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FiltersSaveModal = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const modal_1 = require("../../modal/modal");
+const useLanguage_1 = require("../../utils/localization/useLanguage");
+const textInput_1 = require("../../textInput/textInput");
+const filtersSavedItemsProvider_1 = require("./filtersSavedItemsProvider");
+const iconDisk_1 = require("../../icons/iconDisk");
+const useDriveClassName_1 = require("../../utils/theme/useDriveClassName");
+const FiltersSaveModal = ({ isOpen, onClose, onSave }) => {
+    const { translate } = (0, useLanguage_1.useLanguage)();
+    const { items } = (0, filtersSavedItemsProvider_1.useFiltersSavedItems)();
+    const iconDriveClassName = (0, useDriveClassName_1.useDriveClassName)("icon");
+    const [filterName, setFilterName] = (0, react_1.useState)("");
+    const toggleSaveModal = (0, react_1.useCallback)(() => {
+        onClose(!isOpen);
+    }, [isOpen, onClose]);
+    const handleCancelSaveModal = (0, react_1.useCallback)(() => {
+        onClose(false);
+        setFilterName("");
+    }, [onClose]);
+    const isValidFilterName = (0, react_1.useCallback)((name, existingNames) => {
+        if (!name) {
+            return false;
+        }
+        return !existingNames.map((item) => item.toLowerCase().trim()).includes(name.toLowerCase().trim());
+    }, []);
+    const handleApplySaveModal = (0, react_1.useCallback)(() => {
+        if (!isValidFilterName(filterName, Array.from(items))) {
+            return;
+        }
+        onClose(false);
+        onSave(filterName);
+        setFilterName("");
+    }, [filterName, isValidFilterName, items, onClose, onSave]);
+    const handleSaveModalFieldChange = (0, react_1.useCallback)((e) => {
+        setFilterName(e.target.value);
+    }, []);
+    const errorText = (0, react_1.useMemo)(() => {
+        if (!filterName) {
+            return "";
+        }
+        if (!isValidFilterName(filterName, Array.from(items))) {
+            return translate("Title already in use");
+        }
+        return "";
+    }, [filterName, isValidFilterName, items, translate]);
+    const saveIcon = (0, react_1.useCallback)(() => (0, jsx_runtime_1.jsx)(iconDisk_1.IconDisk, { description: translate("Save"), className: "svgIcon", size: iconDriveClassName ? "huge" : "large" }), [iconDriveClassName, translate]);
+    return (0, jsx_runtime_1.jsxs)(modal_1.Modal, { isOpen: isOpen, onClose: toggleSaveModal, title: translate("Save filters"), children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-filters-modal__content", children: (0, jsx_runtime_1.jsx)(textInput_1.TextInput, { value: filterName, ariaLabel: translate("Filter title"), placeholder: translate("Filter title"), onChange: handleSaveModalFieldChange, maxLength: 100, error: errorText }) }), (0, jsx_runtime_1.jsx)(modal_1.Modal.SecondaryButton, { onClick: handleCancelSaveModal, title: translate("Cancel"), children: translate("Cancel") }), (0, jsx_runtime_1.jsx)(modal_1.Modal.PrimaryButton, { onClick: handleApplySaveModal, icon: saveIcon, title: translate("Save"), children: translate("Save") })] });
+};
+exports.FiltersSaveModal = FiltersSaveModal;

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

@@ -0,0 +1,2 @@
+import "./filtersSavedChipComponent.less";
+export declare const FiltersSavedChipComponent: () => import("react/jsx-runtime").JSX.Element;

package/dist/filters/components/filtersSavedChipComponent.js

@@ -0,0 +1,66 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FiltersSavedChipComponent = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const chip_1 = require("../../chip/chip");
+const iconDisk_1 = require("../../icons/iconDisk");
+const controlledPopup_1 = require("../../controlledPopup/controlledPopup");
+const classNames_1 = require("../../commonHelpers/classNames/classNames");
+const button_1 = require("../../button/button");
+const iconClose_1 = require("../../icons/iconClose");
+const useLanguage_1 = require("../../utils/localization/useLanguage");
+const modal_1 = require("../../modal/modal");
+const filtersSavedItemsProvider_1 = require("./filtersSavedItemsProvider");
+const filtersSaveModal_1 = require("./filtersSaveModal");
+const useDriveClassName_1 = require("../../utils/theme/useDriveClassName");
+const FiltersSavedChipComponent = () => {
+    const { translate } = (0, useLanguage_1.useLanguage)();
+    const iconDriveClassName = (0, useDriveClassName_1.useDriveClassName)("icon");
+    const contentDriveClassName = (0, useDriveClassName_1.useDriveClassName)("zen-filters-saved-popup__content");
+    const { items, active, onRemove, onApply, onSave } = (0, filtersSavedItemsProvider_1.useFiltersSavedItems)();
+    const [savedChipOpen, setSavedChipOpen] = (0, react_1.useState)(false);
+    const [removeModalOpen, setRemoveModalOpen] = (0, react_1.useState)(false);
+    const [saveModalOpen, setSaveModalOpen] = (0, react_1.useState)(false);
+    const savedChipRef = (0, react_1.useRef)(null);
+    const removeChipRef = (0, react_1.useRef)("");
+    const handleRemove = (0, react_1.useCallback)((itemKey) => () => {
+        removeChipRef.current = itemKey;
+        setRemoveModalOpen(true);
+    }, []);
+    const toggleSavedChipOpen = (0, react_1.useCallback)(() => {
+        setSavedChipOpen((prev) => !prev);
+    }, []);
+    const toggleRemoveModal = (0, react_1.useCallback)(() => {
+        setRemoveModalOpen((prev) => !prev);
+    }, []);
+    const toggleSaveModal = (0, react_1.useCallback)(() => {
+        setSaveModalOpen((prev) => !prev);
+    }, []);
+    const handleCancelRemoveModal = (0, react_1.useCallback)(() => {
+        setRemoveModalOpen(false);
+        removeChipRef.current = "";
+    }, []);
+    const handleRemoveItem = (0, react_1.useCallback)((e) => {
+        e.stopPropagation();
+        setRemoveModalOpen(false);
+        onRemove && onRemove(removeChipRef.current);
+        removeChipRef.current = "";
+    }, [onRemove]);
+    const handleFilterSelect = (0, react_1.useCallback)((e) => {
+        const filterName = e.target.dataset.filterName;
+        filterName && onApply && onApply(filterName);
+    }, [onApply]);
+    const handleItemKeyDown = (0, react_1.useCallback)((e) => {
+        if (e.key === "Enter" || e.key === " ") {
+            const filterName = e.currentTarget.dataset.filterName;
+            filterName && onApply && onApply(filterName);
+        }
+    }, [onApply]);
+    const saveButton = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsxs)("button", { type: "button", onClick: toggleSaveModal, className: "zen-filters-saved-popup__action-button", title: translate("Save new filters"), children: [(0, jsx_runtime_1.jsx)(iconDisk_1.IconDisk, { description: translate("Save"), className: "svgIcon", size: iconDriveClassName ? "huge" : "large" }), (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["", "zen-ellipsis"]), children: translate("Save new") })] }), [iconDriveClassName, toggleSaveModal, translate]);
+    const memoizedItems = (0, react_1.useMemo)(() => Array.from(items), [items]);
+    const popupContent = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-filters-saved-popup__content", contentDriveClassName || ""]), children: [onSave ? saveButton : null, (0, jsx_runtime_1.jsx)("div", { onClick: handleFilterSelect, children: memoizedItems.map((filterName) => ((0, jsx_runtime_1.jsxs)("div", { tabIndex: 0, onKeyDown: handleItemKeyDown, "data-filter-name": filterName, className: (0, classNames_1.classNames)(["zen-filters-saved-popup__item", active.has(filterName) ? "zen-filters-saved-popup__item--active" : ""]), children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-filters-saved-popup__name", "data-filter-name": filterName, children: filterName }), onRemove ? (0, jsx_runtime_1.jsx)(button_1.Button, { type: "tertiary-black", className: "zen-filters-saved-popup__action", onClick: handleRemove(filterName), title: translate("Remove"), "aria-label": translate("Remove"), children: (0, jsx_runtime_1.jsx)(iconClose_1.IconClose, { size: iconDriveClassName ? "huge" : "large", className: "zen-filters-saved-popup__close-icon" }) }) : null] }, filterName))) })] }), [active, contentDriveClassName, handleFilterSelect, handleItemKeyDown, handleRemove, iconDriveClassName, memoizedItems, onRemove, onSave, saveButton, translate]);
+    const memoizedStatus = (0, react_1.useMemo)(() => (active.size > 0 && Array.from(items).some(item => active.has(item)) ? "active" : undefined), [active, items]);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(chip_1.Chip, { className: "zen-filters-saved-chip", isOpen: savedChipOpen, status: memoizedStatus, onClick: toggleSavedChipOpen, title: translate("Saved filters"), icon: iconDisk_1.IconDisk, triggerRef: savedChipRef }), (0, jsx_runtime_1.jsx)(controlledPopup_1.ControlledPopup, { isOpen: savedChipOpen, className: (0, classNames_1.classNames)(["zen-filters-saved-popup"]), onOpenChange: toggleSavedChipOpen, useTrapFocusWithTrigger: "on", shouldHoldScroll: true, triggerRef: savedChipRef, ariaLabel: translate("Saved filters"), recalculateOnScroll: true, children: popupContent }), (0, jsx_runtime_1.jsxs)(modal_1.Modal, { isOpen: removeModalOpen, onClose: toggleRemoveModal, title: translate("Remove saved {name} filter?").replace("{name}", removeChipRef.current), children: [(0, jsx_runtime_1.jsx)(modal_1.Modal.SecondaryButton, { onClick: handleCancelRemoveModal, children: translate("Cancel") }), (0, jsx_runtime_1.jsx)(modal_1.Modal.PrimaryButton, { onClick: handleRemoveItem, type: "destructive", children: translate("Confirm") })] }), onSave ? (0, jsx_runtime_1.jsx)(filtersSaveModal_1.FiltersSaveModal, { isOpen: saveModalOpen, onClose: setSaveModalOpen, onSave: onSave }) : null] }));
+};
+exports.FiltersSavedChipComponent = FiltersSavedChipComponent;

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

@@ -0,0 +1,19 @@
+import { FC, PropsWithChildren } from "react";
+import { TFiltersComponentsItemState } from "./filtersItem";
+export declare const filtersSavedItemsContext: import("react").Context<IFiltersSavedItemsProviderProps>;
+interface IFiltersSavedItemsProviderProps extends PropsWithChildren {
+    items: Set<string>;
+    active: Set<string>;
+    onRemove?: (item: string) => void;
+    onApply?: (item: string) => void;
+    onSave?: (filterName: string, filterState?: Record<string, TFiltersComponentsItemState>) => void;
+}
+export declare const FiltersSavedItemsProvider: FC<IFiltersSavedItemsProviderProps>;
+export declare const useFiltersSavedItems: () => {
+    items: Set<string>;
+    active: Set<string>;
+    onRemove: ((item: string) => void) | undefined;
+    onApply: ((item: string) => void) | undefined;
+    onSave: ((filterName: string, filterState?: Record<string, TFiltersComponentsItemState>) => void) | undefined;
+};
+export {};

package/dist/filters/components/filtersSavedItemsProvider.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFiltersSavedItems = exports.FiltersSavedItemsProvider = exports.filtersSavedItemsContext = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+exports.filtersSavedItemsContext = (0, react_1.createContext)({ items: new Set(), active: new Set(), onRemove: undefined, onApply: undefined, onSave: undefined });
+const FiltersSavedItemsProvider = ({ items, active, onRemove, onApply, onSave, children }) => ((0, jsx_runtime_1.jsx)(exports.filtersSavedItemsContext.Provider, { value: { items, active, onRemove, onApply, onSave }, children: children }));
+exports.FiltersSavedItemsProvider = FiltersSavedItemsProvider;
+const useFiltersSavedItems = () => {
+    const { items, active, onRemove, onApply, onSave } = (0, react_1.useContext)(exports.filtersSavedItemsContext);
+    return { items, active, onRemove, onApply, onSave };
+};
+exports.useFiltersSavedItems = useFiltersSavedItems;

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

@@ -0,0 +1,16 @@
+import React from "react";
+import "./filtersSearch.less";
+import { ISearchItem } from "./filtersSearchList";
+interface IFiltersSearch {
+    id: string;
+    name: string;
+    value: string;
+    onChange: (newValue: string) => void;
+    onSearchKeyDown?: (searchValue?: string) => void;
+    handleSearchFocus: () => void;
+    searchSelection?: ISearchItem[];
+    handleRemove?: (id: ISearchItem) => void;
+    className?: string;
+}
+export declare const FiltersSearch: React.ForwardRefExoticComponent<IFiltersSearch & React.RefAttributes<HTMLInputElement>>;
+export {};

package/dist/filters/components/filtersSearch.js

@@ -0,0 +1,64 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FiltersSearch = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const classNames_1 = require("../../commonHelpers/classNames/classNames");
+const pillBox_1 = require("../../pillBox/pillBox");
+const filtersSearchList_1 = require("./filtersSearchList");
+const searchInputRaw_1 = require("../../searchInputRaw/searchInputRaw");
+exports.FiltersSearch = react_1.default.forwardRef(({ id, name, value, onChange, onSearchKeyDown, handleSearchFocus, searchSelection, handleRemove, className }, ref) => {
+    const isWithPills = Boolean(searchSelection && handleRemove);
+    const divider = "_divider_";
+    const handleSearchKeyDown = (0, react_1.useCallback)((event) => {
+        if (event.code === "Enter") {
+            onSearchKeyDown === null || onSearchKeyDown === void 0 ? void 0 : onSearchKeyDown(event.currentTarget.value || undefined);
+        }
+    }, [onSearchKeyDown]);
+    const memoizedPillsArray = react_1.default.useMemo(() => {
+        if (!isWithPills || !searchSelection || searchSelection.length === 0) {
+            return [];
+        }
+        const pillsArray = [];
+        searchSelection.forEach(item => {
+            pillsArray.push({
+                id: `${item.type || filtersSearchList_1.NO_TYPED_SEARCH_ITEM}${divider}${item.id}`,
+                name: item.name
+            });
+        });
+        return pillsArray;
+    }, [isWithPills, searchSelection]);
+    const onRemove = (0, react_1.useCallback)((removedId) => {
+        const [type, itemId] = removedId.split(divider);
+        const item = searchSelection === null || searchSelection === void 0 ? void 0 : searchSelection.find(el => el.id === itemId);
+        if (item) {
+            handleRemove === null || handleRemove === void 0 ? void 0 : handleRemove(Object.assign(Object.assign({}, item), { type: type === filtersSearchList_1.NO_TYPED_SEARCH_ITEM ? undefined : type }));
+        }
+    }, [handleRemove, searchSelection]);
+    const searchComponent = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(searchInputRaw_1.SearchInputRaw, { id: id, ref: ref, placeholder: name, onChange: onChange, onKeyDown: handleSearchKeyDown, onFocus: handleSearchFocus, value: value, className: (0, classNames_1.classNames)(["zen-filters-search__search-input", "zen-filters__search", className || ""]) }), [id, ref, name, onChange, handleSearchKeyDown, handleSearchFocus, value, className]);
+    return (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-filters-search", className || ""]), children: [searchComponent, isWithPills && (0, jsx_runtime_1.jsx)("div", { className: "zen-filters-search__selected", children: (0, jsx_runtime_1.jsx)(pillBox_1.PillBox, { hideSelectedLabel: true, maxPills: 3, selectedPills: memoizedPillsArray, onRemove: onRemove }) })] });
+});
+exports.FiltersSearch.displayName = "FiltersSearch";

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

@@ -0,0 +1,16 @@
+import { FunctionComponent, ReactNode } from "react";
+import { IIcon } from "../../icons/icon";
+import "./filtersSearchItemData.less";
+export interface ISearchItemData {
+    id: string;
+    icon?: FunctionComponent<IIcon> | ReactNode;
+    iconClassName?: string;
+    isActive: boolean;
+    name: string;
+    secondary?: string;
+    onClick?: () => void;
+    onClose?: () => void;
+    isMobile?: boolean;
+    isDrive?: boolean;
+}
+export declare const FiltersSearchItemData: ({ id, icon, isActive, iconClassName, name, secondary, onClick, onClose, isDrive, isMobile }: ISearchItemData) => import("react/jsx-runtime").JSX.Element;

package/dist/filters/components/filtersSearchItemData.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FiltersSearchItemData = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const useLanguage_1 = require("../../utils/localization/useLanguage");
+const button_1 = require("../../button/button");
+const classNames_1 = require("../../commonHelpers/classNames/classNames");
+const isActiveElement_1 = require("../../list/utils/isActiveElement");
+const iconClose_1 = require("../../icons/iconClose");
+const FiltersSearchItemData = ({ id, icon, isActive, iconClassName, name, secondary, onClick, onClose, isDrive, isMobile }) => {
+    const { translate } = (0, useLanguage_1.useLanguage)();
+    const driveClassName = (0, react_1.useMemo)(() => isDrive
+        ? isMobile ? "zen-search-item-data--drive" : "zen-search-item-data--drive-tablet"
+        : "", [isDrive, isMobile]);
+    const renderIcon = (0, react_1.useCallback)((iconComponent, iClassName, className) => {
+        if (typeof iconComponent === "function") {
+            return (0, react_1.createElement)(iconComponent, { size: "large", className: (0, classNames_1.classNames)([className || "", iClassName || ""]) });
+        }
+        return iconComponent;
+    }, []);
+    const handleClick = (0, react_1.useCallback)((e) => {
+        if (!onClick) {
+            return;
+        }
+        if (e.target instanceof HTMLElement && (0, isActiveElement_1.isActiveElement)(e.target)) {
+            return;
+        }
+        onClick();
+    }, [onClick]);
+    const handleClose = (0, react_1.useCallback)((e) => {
+        if (!onClose) {
+            return;
+        }
+        e.preventDefault();
+        e.stopPropagation();
+        onClose();
+    }, [onClose]);
+    return (0, jsx_runtime_1.jsx)("li", { tabIndex: 0, className: (0, classNames_1.classNames)(["zen-search-item-data", isActive ? "zen-search-item-data--active" : "",
+            onClick ? "zen-search-item-data--clickable" : "", driveClassName || ""]), "data-list-item-id": id, onClick: handleClick, children: (0, jsx_runtime_1.jsxs)("div", { className: "zen-search-item-data__main", children: [icon ? (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-search-item-data__icon", iconClassName || ""]), children: renderIcon(icon) }) : null, (0, jsx_runtime_1.jsxs)("div", { className: "zen-search-item-data__main-data", children: [(0, jsx_runtime_1.jsxs)("div", { className: "zen-search-item-data__identifier", children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-search-item-data__name", children: name }), secondary ? (0, jsx_runtime_1.jsx)("div", { className: "zen-search-item-data__secondary", children: secondary }) : null] }), onClose ? (0, jsx_runtime_1.jsx)(button_1.Button, { type: "tertiary-black", className: "zen-search-item-data__close", onClick: handleClose, title: translate("Close"), "aria-label": translate("Close"), children: (0, jsx_runtime_1.jsx)(iconClose_1.IconClose, { size: "large", className: "zen-search-item-data__close-icon" }) }) : null] })] }) }, id);
+};
+exports.FiltersSearchItemData = FiltersSearchItemData;

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

@@ -0,0 +1,30 @@
+/// <reference types="react" />
+import "./filtersSearchList.less";
+import { IFetchState } from "../filters";
+import { IIcon } from "../../icons/icon";
+export declare const NO_TYPED_SEARCH_ITEM = "noTypedSearchItem";
+export declare const KEYWORD_ID = "keywordId";
+export declare const KEYWORD_TYPE = "keyword";
+export interface ISearchItem {
+    id: string;
+    name: string;
+    description?: string;
+    type?: string;
+}
+export interface IRecentSearchItem extends Omit<ISearchItem, "type"> {
+    type: string;
+    itemsArray: Omit<IRecentSearchItem, "itemsArray">[];
+}
+export interface IRecentSearchItemWithoutId extends Omit<IRecentSearchItem, "id"> {
+}
+export interface ISearchList {
+    searchData?: IFetchState<ISearchItem[]>;
+    recentSearches?: IFetchState<IRecentSearchItem[]>;
+    searchSelection?: ISearchItem[];
+    handleSearchItemClick?: (searchItem: ISearchItem) => void;
+    handleRecentSearchItemClick?: (recentSearchItem: IRecentSearchItem) => void;
+    onRemoveRecentSearchItem?: (itemIds: string[]) => void;
+    searchValue: string;
+    getIconByType: (type?: string) => React.FC<IIcon>;
+}
+export declare const FiltersSearchList: ({ searchValue, searchData, recentSearches, searchSelection, handleSearchItemClick, onRemoveRecentSearchItem, handleRecentSearchItemClick, getIconByType }: ISearchList) => import("react/jsx-runtime").JSX.Element;