@geotab/zenith 1.16.1 → 1.17.0-beta.0

package/README.md

@@ -40,6 +40,19 @@ Zenith library provides components defined in Zenith Design System. It includes
 
 ## Change log
 
+## 1.17.0
+
+ * Add the ability to use customFiltersBar component in the header
+ * Add debouncing for the getData function in the dropdown component
+ * Add property `target` to Button to allow opening links in new tab
+ * Add isLoading property to FiltersBar.Dropdown
+ * Improve skeleton component
+ * Improve data rendering in Dropdown
+ * Improve Card title
+ * Fix SelectField is out of viewport in some cases
+ * Fix Extra symbols on SortControl in mobile view
+ * Fix for Textarea overflow
+
 ## 1.16.1
 
  * Improve dateRange component

package/dist/betaPill/betaPill.d.ts

@@ -1,12 +1,22 @@
 /// <reference types="react" />
 import "./betaPill.less";
+export interface IBetaPillActions {
+    text?: string;
+    onClick?: () => void;
+    link?: string;
+    linkOptions?: {
+        target?: "_blank" | "_parent" | "_self" | "_top";
+    };
+}
 export interface IBetaPill {
     className?: string;
     /**
-    * @deprecated
-    * @param translate - will be removed in the next major release
-    */
+     * @deprecated
+     * @param translate - will be removed in the next major release
+     */
     translate?: (s: string) => string;
+    feedbackAction?: IBetaPillActions;
+    betaOptionAction?: IBetaPillActions;
 }
 export declare const BetaPill: React.FC<IBetaPill>;
 export declare const TRANSLATIONS: string[];

package/dist/betaPill/betaPill.js

@@ -8,13 +8,26 @@ const useMobile_1 = require("../commonHelpers/hooks/useMobile");
 const iconLab_1 = require("../icons/iconLab");
 const pill_1 = require("../pill/pill");
 const useLanguage_1 = require("../utils/localization/useLanguage");
-const BetaPill = ({ className }) => {
+const pillExpandable_1 = require("../pillExpandable/pillExpandable");
+const betaPillContext_1 = require("./betaPillContext");
+const BetaPill = ({ className, feedbackAction, betaOptionAction }) => {
     const { translate } = (0, useLanguage_1.useLanguage)();
     const isMobile = (0, useMobile_1.useMobile)();
-    const pillClasses = (0, react_1.useMemo)(() => (0, classNames_1.classNames)(["zen-caption", "zen-beta-pill", isMobile ? "zen-beta-pill--mobile" : "", className !== null && className !== void 0 ? className : ""]), [isMobile, className]);
-    return (0, jsx_runtime_1.jsx)(pill_1.Pill, { icon: iconLab_1.IconLab, className: pillClasses, type: "info", children: !isMobile && (0, jsx_runtime_1.jsx)("span", { className: "zen-caption__content", children: translate("Beta") }) });
+    const pillClasses = (0, react_1.useMemo)(() => (0, classNames_1.classNames)([
+        "zen-caption",
+        "zen-beta-pill",
+        isMobile ? "zen-beta-pill--mobile" : "",
+        className !== null && className !== void 0 ? className : ""
+    ]), [isMobile, className]);
+    const contextActions = (0, betaPillContext_1.useBetaPillActions)();
+    let resolvedMainAction = feedbackAction || (contextActions === null || contextActions === void 0 ? void 0 : contextActions.feedbackAction);
+    let resolvedSecondaryAction = betaOptionAction || (contextActions === null || contextActions === void 0 ? void 0 : contextActions.betaOptionAction);
+    if (resolvedMainAction || resolvedSecondaryAction) {
+        resolvedMainAction = Object.assign(Object.assign({}, resolvedMainAction), { text: (resolvedMainAction === null || resolvedMainAction === void 0 ? void 0 : resolvedMainAction.text) || translate("Send feedback") });
+        resolvedSecondaryAction = Object.assign(Object.assign({}, resolvedSecondaryAction), { text: (resolvedSecondaryAction === null || resolvedSecondaryAction === void 0 ? void 0 : resolvedSecondaryAction.text) || translate("Manage beta option") });
+        return ((0, jsx_runtime_1.jsx)(pillExpandable_1.PillExpandable, { isBeta: true, icon: iconLab_1.IconLab, description: translate("This feature is still in testing, and is not fully supported yet. Your feedback is valuable to help guide future enhancements."), text: translate("Beta"), type: "info", className: pillClasses, mainAction: resolvedMainAction, secondaryAction: resolvedSecondaryAction }));
+    }
+    return ((0, jsx_runtime_1.jsx)(pill_1.Pill, { icon: iconLab_1.IconLab, className: pillClasses, type: "info", children: !isMobile && ((0, jsx_runtime_1.jsx)("span", { className: "zen-caption__content", children: translate("Beta") })) }));
 };
 exports.BetaPill = BetaPill;
-exports.TRANSLATIONS = [
-    "Beta"
-];
+exports.TRANSLATIONS = ["Beta"];

package/dist/betaPill/betaPillContext.d.ts

@@ -0,0 +1,20 @@
+import React, { ReactNode } from "react";
+interface IBetaPillActions {
+    text?: string;
+    onClick?: () => void;
+    link?: string;
+    linkOptions?: {
+        target?: "_blank" | "_parent" | "_self" | "_top";
+    };
+}
+interface IBetaPillActions {
+    feedbackAction?: IBetaPillActions;
+    betaOptionAction?: IBetaPillActions;
+}
+interface IBetaPillProviderProps {
+    actions?: IBetaPillActions;
+    children: ReactNode;
+}
+export declare const BetaPillProvider: React.FC<IBetaPillProviderProps>;
+export declare const useBetaPillActions: () => IBetaPillActions | undefined;
+export {};

package/dist/betaPill/betaPillContext.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useBetaPillActions = exports.BetaPillProvider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const BetaPillContext = (0, react_1.createContext)(undefined);
+const BetaPillProvider = ({ actions, children }) => (0, jsx_runtime_1.jsx)(BetaPillContext.Provider, { value: actions, children: children });
+exports.BetaPillProvider = BetaPillProvider;
+// internal usage
+const useBetaPillActions = () => (0, react_1.useContext)(BetaPillContext);
+exports.useBetaPillActions = useBetaPillActions;

package/dist/button/button.d.ts

@@ -16,5 +16,7 @@ export interface IButton extends IZenComponentProps {
     onKeyUp?: React.KeyboardEventHandler<HTMLElement>;
     link?: string;
     htmlType?: THTMLButtonType;
+    target?: string;
+    rel?: string;
 }
 export declare const Button: React.ForwardRefExoticComponent<IButton & React.RefAttributes<HTMLButtonElement>>;

package/dist/button/button.js

@@ -42,7 +42,7 @@ const classNames_1 = require("../commonHelpers/classNames/classNames");
 const useDriveClassName_1 = require("../utils/theme/useDriveClassName");
 // eslint-disable-next-line @typescript-eslint/naming-convention
 exports.Button = React.forwardRef(function Button(_a, ref) {
-    var { className, type, disabled, id, title, onClick, onMouseOver, onMouseOut, onMouseDown, onMouseUp, onKeyDown, onKeyUp, children, link, htmlType } = _a, other = __rest(_a, ["className", "type", "disabled", "id", "title", "onClick", "onMouseOver", "onMouseOut", "onMouseDown", "onMouseUp", "onKeyDown", "onKeyUp", "children", "link", "htmlType"]);
+    var { className, type, disabled, id, title, onClick, onMouseOver, onMouseOut, onMouseDown, onMouseUp, onKeyDown, onKeyUp, children, link, target, htmlType, rel } = _a, other = __rest(_a, ["className", "type", "disabled", "id", "title", "onClick", "onMouseOver", "onMouseOut", "onMouseDown", "onMouseUp", "onKeyDown", "onKeyUp", "children", "link", "target", "htmlType", "rel"]);
     const modifierClassName = type && type !== buttonType_1.ButtonType.Secondary ? `zen-button--${type}` : "";
     const disabledClassName = disabled ? "zen-button--disabled" : "";
     const driveClasses = (0, useDriveClassName_1.useDriveClassName)("zen-button");
@@ -59,7 +59,7 @@ exports.Button = React.forwardRef(function Button(_a, ref) {
         ])
     };
     if (link) {
-        return (0, jsx_runtime_1.jsx)("a", Object.assign({ role: "link", href: disabled ? undefined : link, "aria-disabled": disabled, onKeyDown: onKeyDown, onKeyUp: onKeyUp, onClick: onClick }, commonArgs, other, { children: children }));
+        return (0, jsx_runtime_1.jsx)("a", Object.assign({ role: "link", rel: rel, target: target, href: disabled ? undefined : link, "aria-disabled": disabled, onKeyDown: onKeyDown, onKeyUp: onKeyUp, onClick: onClick }, commonArgs, other, { children: children }));
     }
     return (0, jsx_runtime_1.jsx)("button", Object.assign({ onClick: onClick, onMouseOver: onMouseOver, onMouseOut: onMouseOut, onMouseDown: onMouseDown, onMouseUp: onMouseUp, onKeyDown: onKeyDown, onKeyUp: onKeyUp, ref: ref, type: htmlType, disabled: disabled }, commonArgs, other, { children: children }));
 });

package/dist/dropdown/dropdown.js

@@ -17,6 +17,7 @@ const dialogHelpers_1 = require("../dialog/dialogHelpers");
 const useLanguage_1 = require("../utils/localization/useLanguage");
 const dropdownPopup_1 = require("./dropdownPopup");
 const useMobile_1 = require("../commonHelpers/hooks/useMobile");
+const useDebounce_1 = require("../commonHelpers/hooks/useDebounce");
 const Dropdown = ({ className, classNamePopup, getData, errorHandler, dataItems, onChange, value, defaultValue, placeholder, dialogAriaLabel, width, isLoading, title, triggerAriaLabel, disabled, inputId, filterName, showCounterPill = true, showSelection, fullWidthTriggerButton, hasApplyButton, searchField = true, multiselect = true, forceSelection = false, selectAllButton = true, getNamedItems, getSelectedItem, buttonType = "secondary", listLimit = 500, alignment = "bottom-left", error, sortFn }) => {
     var _a;
     const [state, dispatchState] = (0, react_1.useReducer)(stateReducer_1.stateReducer, (0, stateReducer_1.getInitialState)(dataItems || [], value, defaultValue));
@@ -165,21 +166,25 @@ const Dropdown = ({ className, classNamePopup, getData, errorHandler, dataItems,
     const customGetData = (0, react_1.useCallback)((str) => (str && dataItems
         ? Promise.resolve(dataItems.filter(el => { var _a; return (((_a = el.name) === null || _a === void 0 ? void 0 : _a.toLocaleLowerCase()) || "").indexOf(str.toLocaleLowerCase()) > -1; }))
         : Promise.resolve(dataItems || [])), [dataItems]);
+    const handleData = (0, react_1.useCallback)((data, searchVal) => {
+        if (data.length && !searchVal && (getData || dataItems)) {
+            dispatchState({ type: stateActionType_1.StateActionType.CreateMap, payload: data });
+            previousMapDataItems.current = [...data];
+        }
+        dispatchState({ type: stateActionType_1.StateActionType.SetListData, payload: data });
+        searchVal && dispatchState({ type: stateActionType_1.StateActionType.SetCurrentId, payload: undefined });
+        data.length ? dispatchState({ type: stateActionType_1.StateActionType.ShowList, payload: undefined }) : dispatchState({ type: stateActionType_1.StateActionType.ShowEmptyList, payload: undefined });
+    }, [getData, dataItems]);
+    const handleError = (0, react_1.useCallback)((e) => {
+        errorHandler(e);
+        dispatchState({ type: stateActionType_1.StateActionType.NothingToShow, payload: undefined });
+    }, [errorHandler]);
+    const debouncedGetData = (0, useDebounce_1.useDebounce)((signal, searchValue) => getData ? getData(signal, searchValue).then((data) => handleData(data, searchValue)).catch(handleError)
+        : customGetData(searchValue).then((data) => handleData(data, searchValue)).catch(handleError), 200);
     const controlData = (0, react_1.useCallback)((signal, searchValue) => {
         dispatchState({ type: stateActionType_1.StateActionType.ShowWaiting, payload: undefined });
-        (getData ? getData(signal, searchValue) : customGetData(searchValue)).then(data => {
-            if (data.length && !searchValue && (getData || dataItems) && !(0, dropdownHelper_1.compareObjectsArrays)(data, previousMapDataItems.current)) {
-                dispatchState({ type: stateActionType_1.StateActionType.CreateMap, payload: data });
-                previousMapDataItems.current = [...data];
-            }
-            dispatchState({ type: stateActionType_1.StateActionType.SetListData, payload: data });
-            searchValue && dispatchState({ type: stateActionType_1.StateActionType.SetCurrentId, payload: undefined });
-            data.length ? dispatchState({ type: stateActionType_1.StateActionType.ShowList, payload: undefined }) : dispatchState({ type: stateActionType_1.StateActionType.ShowEmptyList, payload: undefined });
-        }).catch((e) => {
-            errorHandler(e);
-            dispatchState({ type: stateActionType_1.StateActionType.NothingToShow, payload: undefined });
-        });
-    }, [getData, customGetData, dataItems, errorHandler]);
+        debouncedGetData(signal, searchValue);
+    }, [debouncedGetData]);
     (0, react_1.useEffect)(() => {
         if (hasApplyButton) {
             return;

package/dist/dropdownOld/dropdownOld.js

@@ -7,7 +7,7 @@ const filterButton_1 = require("../filterButton/filterButton");
 const selectList_1 = require("../selectList/selectList");
 const checkboxState_1 = require("../checkbox/checkboxState");
 const controlledPopup_1 = require("../controlledPopup/controlledPopup");
-const select_helpers_1 = require("../select/select.helpers");
+const select_helpers_1 = require("../selectRaw/select.helpers");
 const isDropdownStateTheSame_1 = require("./dropdownOldHelpers/isDropdownStateTheSame");
 const useUniqueId_1 = require("../commonHelpers/useUniqueId");
 // get default active item (based on items array)

package/dist/filtersBar/components/filtersBarDropdown/filtersBarDropdown.d.ts

@@ -5,7 +5,7 @@ import { IDropdown } from "../../../dropdown/dropdown";
 export interface IFiltersBarDropdownState {
     selectedOption: string[];
 }
-interface IFiltersBarDropdownProps extends Pick<IDropdown, "translate" | "placeholder" | "inputId" | "disabled" | "getData" | "dataItems" | "defaultValue" | "errorHandler" | "listLimit" | "title" | "triggerAriaLabel" | "filterName" | "showCounterPill" | "showSelection" | "searchField" | "multiselect" | "selectAllButton" | "hasApplyButton" | "dialogAriaLabel" | "fullWidthTriggerButton" | "width" | "forceSelection" | "sortFn" | "classNamePopup" | "getSelectedItem"> {
+interface IFiltersBarDropdownProps extends Omit<IDropdown, "value" | "onChange" | "getNamedItems" | "buttonType" | "alignment" | "error"> {
 }
 export interface IFiltersBarDropdown extends IFiltersBarItem<IFiltersBarDropdownState, IFiltersBarDropdownProps> {
     className?: string;

package/dist/filtersBar/filtersBar.d.ts

@@ -38,6 +38,10 @@ export interface IFiltersBar extends IZenComponentProps {
      * @param ignoreNewFunctionality - only for internal usage
     */
     ignoreNewFunctionality?: boolean;
+    /**
+     * @deprecated
+     * @param onUpdateNumberOfChangedFilters - will be removed in the next major release
+    */
     onUpdateNumberOfChangedFilters?: (newValue: number) => void;
 }
 interface IFiltersBarComponents {

package/dist/filtersBar/filtersBar.js

@@ -18,6 +18,8 @@ const sidePanelReducer_1 = require("./filtersBarSidePanel/sidePanelReducer");
 const filtersBarReducer_1 = require("./filtersBarReducer");
 const useMobile_1 = require("../commonHelpers/hooks/useMobile");
 const getNumberOfChangedFilters_1 = require("./utils/getNumberOfChangedFilters");
+const filtersBarProvider_1 = require("./filtersBarProvider");
+const filtersBarProviderSearch_1 = require("./filtersBarProviderSearch");
 /* eslint-enable @typescript-eslint/naming-convention */
 exports.FiltersBarDisplayName = "FiltersBar";
 const getChildren = (children) => (!children
@@ -41,9 +43,11 @@ const getCurrentFiltersState = (children) => {
     });
     return state;
 };
-const FiltersBar = ({ className, children, isAllFiltersVisible, hideAllFiltersButton, parentElement, selectedQuantity, ignoreNewFunctionality = false, onUpdateNumberOfChangedFilters, toggleAllFilters, getDefaultFiltersState, onClearAllFilters, onApplyAllFilters }) => {
+const FiltersBar = ({ className, children, isAllFiltersVisible, hideAllFiltersButton, parentElement, selectedQuantity, ignoreNewFunctionality = false, toggleAllFilters, getDefaultFiltersState, onClearAllFilters, onApplyAllFilters }) => {
     const allFiltersRef = (0, react_1.useRef)(null);
     const isMobile = (0, useMobile_1.useMobile)();
+    const { setSearchComponent } = (0, filtersBarProviderSearch_1.useSearchComponent)();
+    const { setFiltersBarToggleAllFiltersFn, onUpdateNumberOfChangedFiltersFn } = (0, filtersBarProvider_1.useFiltersBarComponent)();
     const isAllFiltersButtonHidden = !isMobile && hideAllFiltersButton;
     (0, react_1.useEffect)(() => {
         var _a;
@@ -68,10 +72,10 @@ const FiltersBar = ({ className, children, isAllFiltersVisible, hideAllFiltersBu
         dispatchFiltersBarState({ type: filtersBarReducer_1.FiltersBarStateActionType.ChangeChildrenState, payload: { state: stateFromChildren, defaultStateFn: getDefaultFiltersState } });
     }, [stateFromChildren, getDefaultFiltersState]);
     (0, react_1.useEffect)(() => {
-        if (onUpdateNumberOfChangedFilters) {
-            onUpdateNumberOfChangedFilters(filtersBarState.numberOfChangedFilters);
+        if (onUpdateNumberOfChangedFiltersFn) {
+            onUpdateNumberOfChangedFiltersFn(filtersBarState.numberOfChangedFilters);
         }
-    }, [filtersBarState.numberOfChangedFilters, onUpdateNumberOfChangedFilters]);
+    }, [filtersBarState.numberOfChangedFilters, onUpdateNumberOfChangedFiltersFn]);
     (0, react_1.useEffect)(() => {
         if (isMobile && isAllFiltersVisible) {
             react_1.Children.forEach(filterBarChildren, (child) => {
@@ -79,6 +83,11 @@ const FiltersBar = ({ className, children, isAllFiltersVisible, hideAllFiltersBu
             });
         }
     }, [filterBarChildren, isAllFiltersVisible, isMobile]);
+    const searchChild = childrenArray.find(child => child && child.type === filtersBarSearch_1.FiltersBarSearch);
+    setSearchComponent(searchChild);
+    (0, react_1.useEffect)(() => {
+        setFiltersBarToggleAllFiltersFn(toggleAllFilters);
+    }, [toggleAllFilters, setFiltersBarToggleAllFiltersFn]);
     const toggleAllFiltersCallback = (0, react_1.useCallback)((value) => {
         if (!isAllFiltersVisible && value) {
             react_1.Children.forEach(filterBarChildren, (child) => {

package/dist/filtersBar/filtersBarProvider.d.ts

@@ -0,0 +1,18 @@
+import React, { ReactNode } from "react";
+export interface IFilterBarToggleFilters {
+    fn: (isAllFilters: boolean) => void;
+}
+interface IFiltersBarComponentProvider {
+    setFiltersBarToggleAllFiltersFn: (IFilterBarToggleFilters: any) => void;
+    onUpdateNumberOfChangedFiltersFn?: (newValue: number) => void;
+}
+export declare const FiltersBarContext: React.Context<IFiltersBarComponentProvider>;
+export declare const FiltersBarContextProvider: React.FC<{
+    value: IFiltersBarComponentProvider;
+    children: ReactNode;
+}>;
+export declare const useFiltersBarComponent: () => {
+    setFiltersBarToggleAllFiltersFn: (IFilterBarToggleFilters: any) => void;
+    onUpdateNumberOfChangedFiltersFn: ((newValue: number) => void) | undefined;
+};
+export {};

package/dist/filtersBar/filtersBarProvider.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFiltersBarComponent = exports.FiltersBarContextProvider = exports.FiltersBarContext = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+exports.FiltersBarContext = (0, react_1.createContext)({
+    setFiltersBarToggleAllFiltersFn: () => { },
+    onUpdateNumberOfChangedFiltersFn: () => { }
+});
+const FiltersBarContextProvider = ({ value, children }) => {
+    const filtersBarToggleAllFiltersRef = (0, react_1.useRef)(null);
+    const setFiltersBarToggleFn = (0, react_1.useCallback)((fn) => {
+        var _a;
+        if (((_a = filtersBarToggleAllFiltersRef.current) === null || _a === void 0 ? void 0 : _a.fn) !== fn) {
+            filtersBarToggleAllFiltersRef.current = { fn: fn };
+            setTimeout(() => {
+                value.setFiltersBarToggleAllFiltersFn({ fn: fn });
+            }, 0);
+        }
+    }, [value]);
+    return (0, jsx_runtime_1.jsx)(exports.FiltersBarContext.Provider, { value: { setFiltersBarToggleAllFiltersFn: setFiltersBarToggleFn, onUpdateNumberOfChangedFiltersFn: value.onUpdateNumberOfChangedFiltersFn }, children: children });
+};
+exports.FiltersBarContextProvider = FiltersBarContextProvider;
+const useFiltersBarComponent = () => {
+    const { setFiltersBarToggleAllFiltersFn, onUpdateNumberOfChangedFiltersFn } = (0, react_1.useContext)(exports.FiltersBarContext);
+    return { setFiltersBarToggleAllFiltersFn, onUpdateNumberOfChangedFiltersFn };
+};
+exports.useFiltersBarComponent = useFiltersBarComponent;

package/dist/filtersBar/filtersBarProviderSearch.d.ts

@@ -0,0 +1,13 @@
+import React, { ReactNode } from "react";
+interface ISearchComponentProvider {
+    setSearchComponent: (searchComponentRef: React.ReactElement | undefined) => void;
+}
+export declare const SearchContext: React.Context<ISearchComponentProvider>;
+export declare const SearchContextProvider: React.FC<{
+    value: ISearchComponentProvider;
+    children: ReactNode;
+}>;
+export declare const useSearchComponent: () => {
+    setSearchComponent: (searchComponentRef: React.ReactElement | undefined) => void;
+};
+export {};

package/dist/filtersBar/filtersBarProviderSearch.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSearchComponent = exports.SearchContextProvider = exports.SearchContext = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const getNumberOfChangedFilters_1 = require("./utils/getNumberOfChangedFilters");
+exports.SearchContext = (0, react_1.createContext)({
+    setSearchComponent: () => { }
+});
+const SearchContextProvider = ({ value, children }) => {
+    const searchComponentRef = (0, react_1.useRef)(null);
+    const setSearchComponentRef = (0, react_1.useCallback)((searchComponent) => {
+        const prevProps = searchComponentRef.current === null || !searchComponentRef.current ? undefined : searchComponentRef.current.props;
+        const nextProps = !searchComponent ? undefined : searchComponent.props;
+        const changedPropsNumber = prevProps && !nextProps || !prevProps && nextProps ? 1 :
+            (0, getNumberOfChangedFilters_1.getNumberOfChangedFilters)(prevProps || {}, nextProps || {});
+        searchComponentRef.current = searchComponent;
+        if (changedPropsNumber > 0) {
+            setTimeout(() => {
+                value.setSearchComponent(searchComponent);
+            }, 0);
+        }
+    }, [value]);
+    return (0, jsx_runtime_1.jsx)(exports.SearchContext.Provider, { value: { setSearchComponent: setSearchComponentRef }, children: children });
+};
+exports.SearchContextProvider = SearchContextProvider;
+const useSearchComponent = () => {
+    const { setSearchComponent } = (0, react_1.useContext)(exports.SearchContext);
+    return { setSearchComponent };
+};
+exports.useSearchComponent = useSearchComponent;

package/dist/header/header.js

@@ -25,8 +25,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TRANSLATIONS = exports.HeaderDisplayName = exports.Header = exports.HeaderType = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const react_2 = __importStar(require("react"));
+const react_1 = __importStar(require("react"));
 const headerHelpers_1 = require("./headerHelpers");
 const headerBack_1 = require("./headerBack");
 const mobileSearchControl_1 = require("./components/mobileSearchControl/mobileSearchControl");
@@ -44,6 +43,8 @@ const bookmark_1 = require("../bookmark/bookmark");
 const useMobile_1 = require("../commonHelpers/hooks/useMobile");
 const useResizeObserver_1 = require("../commonHelpers/hooks/useResizeObserver");
 const headerContext_1 = require("./headerContext");
+const filtersBarProvider_1 = require("../filtersBar/filtersBarProvider");
+const filtersBarProviderSearch_1 = require("../filtersBar/filtersBarProviderSearch");
 var HeaderType;
 (function (HeaderType) {
     HeaderType["Desktop"] = "desktop";
@@ -52,21 +53,26 @@ var HeaderType;
 // eslint-disable-next-line @typescript-eslint/naming-convention, react/prop-types
 const Header = ({ children, className, onFiltersBarOpen }) => {
     var _a, _b;
-    const toolbarRef = (0, react_2.useRef)(null);
-    const leftElementsRef = (0, react_2.useRef)(null);
-    const rightElementsRef = (0, react_2.useRef)(null);
-    const headerRef = (0, react_2.useRef)(null);
-    const [isFilterHidden, setIsFilterHidden] = (0, react_2.useState)(false);
-    const [middleWidth, setMiddleWidth] = (0, react_2.useState)(0);
-    const [content, setContent] = (0, react_2.useState)(null);
-    const previousScrollPosition = (0, react_2.useRef)(0);
+    const toolbarRef = (0, react_1.useRef)(null);
+    const leftElementsRef = (0, react_1.useRef)(null);
+    const rightElementsRef = (0, react_1.useRef)(null);
+    const headerRef = (0, react_1.useRef)(null);
+    const [isFilterHidden, setIsFilterHidden] = (0, react_1.useState)(false);
+    const [middleWidth, setMiddleWidth] = (0, react_1.useState)(0);
+    const [content, setContent] = (0, react_1.useState)(null);
+    const previousScrollPosition = (0, react_1.useRef)(0);
+    const [searchComponent, setSearchComponent] = (0, react_1.useState)(null);
+    const handleSearchChange = (comp) => {
+        setSearchComponent(comp);
+    };
+    const [filtersBarToggleAllFiltersFn, setFiltersBarToggleAllFiltersFn] = (0, react_1.useState)(null);
     const { result } = (0, useResizeObserver_1.useResizeObserver)({ target: leftElementsRef.current });
-    const moreButtonRef = (0, react_2.useRef)(null);
-    const scrollableParentEl = (0, react_2.useMemo)(() => headerRef.current ? (0, headerHelpers_1.findFirstScrollableParent)(headerRef.current) : undefined, [headerRef]);
-    const [searchExpandedState, setSearchExpandedState] = (0, react_2.useState)(false);
+    const moreButtonRef = (0, react_1.useRef)(null);
+    const scrollableParentEl = (0, react_1.useMemo)(() => headerRef.current ? (0, headerHelpers_1.findFirstScrollableParent)(headerRef.current) : undefined, [headerRef]);
+    const [searchExpandedState, setSearchExpandedState] = (0, react_1.useState)(false);
     const isMobile = (0, useMobile_1.useMobile)();
-    const getPreviousScrollPosition = (0, react_2.useCallback)(() => previousScrollPosition.current, []);
-    const scrollCallback = (0, react_2.useCallback)((e) => {
+    const getPreviousScrollPosition = (0, react_1.useCallback)(() => previousScrollPosition.current, []);
+    const scrollCallback = (0, react_1.useCallback)((e) => {
         if (!e.target) {
             return;
         }
@@ -90,7 +96,7 @@ const Header = ({ children, className, onFiltersBarOpen }) => {
     const handleScroll = (0, useThrottle_1.useThrottle)((e) => {
         scrollCallback(e);
     }, 200);
-    (0, react_2.useEffect)(() => {
+    (0, react_1.useEffect)(() => {
         if (scrollableParentEl && isMobile) {
             scrollableParentEl.addEventListener("scroll", handleScroll);
         }
@@ -102,36 +108,35 @@ const Header = ({ children, className, onFiltersBarOpen }) => {
             window.removeEventListener("scroll", handleScroll);
         };
     }, [isMobile, handleScroll, scrollableParentEl]);
-    (0, react_2.useEffect)(() => {
+    (0, react_1.useEffect)(() => {
         !isMobile && window.removeEventListener("scroll", handleScroll);
     }, [handleScroll, isMobile]);
     const headerItems = (0, headerHelpers_1.getArrayOfChildren)(children);
-    const { leftElements, resizableElements, rightElements, tabs, filtersBar, search } = (0, react_2.useMemo)(() => (0, headerHelpers_1.filterItems)(headerItems, isMobile), [headerItems, isMobile]);
-    const [numberOfChangedFilters, setNumberOfChangedFilters] = (0, react_2.useState)(undefined);
-    const isOnlySearch = (0, react_2.useMemo)(() => filtersBar && search && react_2.default.Children.count(filtersBar.props.children) === 1, [filtersBar, search]);
-    const memoizedFiltersBar = (0, react_2.useMemo)(() => filtersBar ? (0, react_1.createElement)(filtersBar.type, Object.assign({}, filtersBar.props, { key: filtersBar.key, onUpdateNumberOfChangedFilters: setNumberOfChangedFilters }))
-        : null, [filtersBar]);
-    const filtersBarToggler = (0, react_2.useCallback)(() => {
-        if (onFiltersBarOpen || (memoizedFiltersBar === null || memoizedFiltersBar === void 0 ? void 0 : memoizedFiltersBar.props.toggleAllFilters)) {
-            (memoizedFiltersBar === null || memoizedFiltersBar === void 0 ? void 0 : memoizedFiltersBar.props.toggleAllFilters) && memoizedFiltersBar.props.toggleAllFilters(true);
-            !(memoizedFiltersBar === null || memoizedFiltersBar === void 0 ? void 0 : memoizedFiltersBar.props.toggleAllFilters) && (onFiltersBarOpen === null || onFiltersBarOpen === void 0 ? void 0 : onFiltersBarOpen());
+    const { leftElements, resizableElements, rightElements, tabs, filtersBar } = (0, react_1.useMemo)(() => (0, headerHelpers_1.filterItems)(headerItems, isMobile), [headerItems, isMobile]);
+    const [numberOfChangedFilters, setNumberOfChangedFilters] = (0, react_1.useState)(undefined);
+    const isOnlySearch = (0, react_1.useMemo)(() => filtersBar && searchComponent && react_1.default.Children.count(filtersBar.props.children) === 1, [filtersBar, searchComponent]);
+    const memoizedFiltersBar = (0, react_1.useMemo)(() => filtersBar, [filtersBar]);
+    const filtersBarToggler = (0, react_1.useCallback)(() => {
+        if (onFiltersBarOpen || filtersBarToggleAllFiltersFn) {
+            filtersBarToggleAllFiltersFn && filtersBarToggleAllFiltersFn.fn(true);
+            !filtersBarToggleAllFiltersFn && (onFiltersBarOpen === null || onFiltersBarOpen === void 0 ? void 0 : onFiltersBarOpen());
         }
-    }, [memoizedFiltersBar, onFiltersBarOpen]);
-    const hiddenItemForRender = (0, react_2.useMemo)(() => (0, headerHelpers_1.getItemsForRender)(resizableElements, isMobile), [isMobile, resizableElements]);
+    }, [filtersBarToggleAllFiltersFn, onFiltersBarOpen]);
+    const hiddenItemForRender = (0, react_1.useMemo)(() => (0, headerHelpers_1.getItemsForRender)(resizableElements, isMobile), [isMobile, resizableElements]);
     const widthDelta = ((_a = moreButtonRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 0;
     const maxWidth = middleWidth || ((_b = toolbarRef.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect().width) || 0;
-    const actionCount = (0, react_2.useMemo)(() => {
+    const actionCount = (0, react_1.useMemo)(() => {
         if (!isMobile) {
             return 4;
         }
-        if (memoizedFiltersBar && !search) {
+        if (memoizedFiltersBar && !searchComponent) {
             return 1;
         }
         return 2;
-    }, [memoizedFiltersBar, isMobile, search]);
+    }, [memoizedFiltersBar, isMobile, searchComponent]);
     const hiddenElementsCountToRender = rightElements.length <= actionCount ? actionCount - rightElements.length : 0;
     const { visibleElements, nonFittingElements, hiddenContainerRef } = (0, useNonFittingElements_1.useNonFittingElements)({ maxWidth, data: resizableElements, hiddenElementsCountToRender, widthDelta, reverseOrderOfVisible: true });
-    const calculateMiddleWidth = (0, react_2.useCallback)(() => {
+    const calculateMiddleWidth = (0, react_1.useCallback)(() => {
         var _a, _b, _c;
         const headerRefWidth = ((_a = headerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width) || 0;
         const leftElementsRefWidth = ((_b = leftElementsRef.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect().width) || 0;
@@ -148,22 +153,22 @@ const Header = ({ children, className, onFiltersBarOpen }) => {
         }
     }, 500);
     (0, useResize_1.useResize)(resizeCallBack, true);
-    (0, react_2.useEffect)(() => {
+    (0, react_1.useEffect)(() => {
         (result === null || result === void 0 ? void 0 : result.contentRect.width) && calculateMiddleWidth();
     }, [result === null || result === void 0 ? void 0 : result.contentRect.width, calculateMiddleWidth]);
-    (0, react_2.useEffect)(() => {
+    (0, react_1.useEffect)(() => {
         calculateMiddleWidth();
     }, [calculateMiddleWidth]);
     const moreButton = (0, jsx_runtime_1.jsx)(collapsedItemsControl_1.PageToolbarCollapsedItemsControl, { children: nonFittingElements }, "pageCollapsedToolbar");
-    const mobileSearch = search ?
-        (0, jsx_runtime_1.jsx)(mobileSearchControl_1.MobileSearchControl, { state: searchExpandedState, searchInput: search, onClick: (state) => setSearchExpandedState(state) }) : null;
-    const mobileNewLineContainer = !search || isFilterHidden ? null : (0, jsx_runtime_1.jsxs)("div", { className: "zen-main-header__mobile-container-new-line", children: [(0, react_2.cloneElement)(search, { className: `${search.props.className || ""} zen-main-header__mobile-search-input` }), memoizedFiltersBar && !isOnlySearch ? (0, jsx_runtime_1.jsx)(mobileFilterControl_1.MobileFilterControl, { count: numberOfChangedFilters, onClick: filtersBarToggler }) : null] });
+    const mobileSearch = searchComponent ?
+        (0, jsx_runtime_1.jsx)(mobileSearchControl_1.MobileSearchControl, { state: searchExpandedState, searchInput: searchComponent, onClick: (state) => setSearchExpandedState(state) }) : null;
+    const mobileNewLineContainer = !searchComponent || isFilterHidden ? null : (0, jsx_runtime_1.jsxs)("div", { className: "zen-main-header__mobile-container-new-line", children: [(0, react_1.cloneElement)(searchComponent, { key: "searchComponentKey", className: `${searchComponent.props.className || ""} zen-main-header__mobile-search-input` }), memoizedFiltersBar && !isOnlySearch ? (0, jsx_runtime_1.jsx)(mobileFilterControl_1.MobileFilterControl, { count: numberOfChangedFilters, onClick: filtersBarToggler }) : null] });
     const collapsedElements = nonFittingElements.length ? [moreButton] : [];
     const mobileSearchCondition = !resizableElements.length && mobileSearch !== null;
     const mobileFilterCondition = memoizedFiltersBar && !isOnlySearch && (!resizableElements.length || resizableElements.length && !mobileSearch);
     const mobileContainer = (0, jsx_runtime_1.jsxs)("div", { ref: toolbarRef, className: "zen-main-header__mobile-container", children: [collapsedElements.length ? collapsedElements : null, visibleElements.length ? (0, headerHelpers_1.getItemsForRender)(visibleElements, isMobile) : null, mobileSearchCondition ? mobileSearch : null, mobileFilterCondition ? (0, jsx_runtime_1.jsx)(mobileFilterControl_1.MobileFilterControl, { count: numberOfChangedFilters, onClick: filtersBarToggler }) : null] });
     const middleElements = isMobile ? mobileContainer : (0, jsx_runtime_1.jsxs)("div", { className: "zen-main-header__adaptive-section", ref: toolbarRef, children: [collapsedElements, visibleElements] });
-    const titleSize = (0, react_2.useMemo)(() => {
+    const titleSize = (0, react_1.useMemo)(() => {
         let count = 0;
         if (collapsedElements.length) {
             count++;
@@ -196,7 +201,7 @@ const Header = ({ children, className, onFiltersBarOpen }) => {
         className !== null && className !== void 0 ? className : ""
     ]);
     const mobileExpandedSearchWrapper = (0, jsx_runtime_1.jsx)("div", { className: "zen-main-header__mobile-search", ref: toolbarRef, children: mobileSearch });
-    return (0, jsx_runtime_1.jsx)(headerContext_1.HeaderMenuProvider, { alignment: "left-top", children: (0, jsx_runtime_1.jsx)(collapsedItemsControl_1.HeaderCustomContent.Provider, { value: { content, setContent }, children: (0, jsx_runtime_1.jsxs)("div", { className: fullClassName, ref: headerRef, children: [searchExpandedState && !resizableElements.length ? mobileExpandedSearchWrapper : (0, jsx_runtime_1.jsx)(basicToolbar_1.BasicToolbar, { className: "zen-main-header__section zen-main-header__section--padding", leftElements: leftElements, middleElements: middleElements, rightElements: rightElements.length ? rightElements : undefined, isMobile: isMobile, leftElementsRef: leftElementsRef, rightElementsRef: rightElementsRef }), !isMobile || !resizableElements.length || !mobileNewLineContainer ? null : searchExpandedState ? mobileExpandedSearchWrapper : (0, jsx_runtime_1.jsx)(basicToolbar_1.BasicToolbar, { className: "zen-main-header__section zen-main-header__section--secondary-padding", leftElements: undefined, middleElements: mobileNewLineContainer, rightElements: undefined, isMobile: true }), tabs ? (0, jsx_runtime_1.jsxs)("div", { className: "zen-main-header__tabs zen-main-header--border", children: [" ", tabs, " "] }) : null, memoizedFiltersBar ? (0, jsx_runtime_1.jsx)("div", { className: "zen-main-header__filtersBar", children: memoizedFiltersBar }) : null, (0, jsx_runtime_1.jsx)("div", { className: "zen-main-header__section zen-main-header__section--hidden", ref: hiddenContainerRef, children: hiddenItemForRender }), (0, jsx_runtime_1.jsx)("div", { className: "zen-main-header__section zen-main-header__section--hidden", children: (0, jsx_runtime_1.jsx)("div", { className: "zen-main-header__section--inline", ref: moreButtonRef, children: moreButton }) })] }) }) });
+    return (0, jsx_runtime_1.jsx)(headerContext_1.HeaderMenuProvider, { alignment: "left-top", children: (0, jsx_runtime_1.jsx)(collapsedItemsControl_1.HeaderCustomContent.Provider, { value: { content, setContent }, children: (0, jsx_runtime_1.jsx)(filtersBarProvider_1.FiltersBarContextProvider, { value: { setFiltersBarToggleAllFiltersFn, onUpdateNumberOfChangedFiltersFn: setNumberOfChangedFilters }, children: (0, jsx_runtime_1.jsx)(filtersBarProviderSearch_1.SearchContextProvider, { value: { setSearchComponent: handleSearchChange }, children: (0, jsx_runtime_1.jsxs)("div", { className: fullClassName, ref: headerRef, children: [searchExpandedState && !resizableElements.length ? mobileExpandedSearchWrapper : (0, jsx_runtime_1.jsx)(basicToolbar_1.BasicToolbar, { className: "zen-main-header__section zen-main-header__section--padding", leftElements: leftElements, middleElements: middleElements, rightElements: rightElements.length ? rightElements : undefined, isMobile: isMobile, leftElementsRef: leftElementsRef, rightElementsRef: rightElementsRef }), !isMobile || !resizableElements.length || !mobileNewLineContainer ? null : searchExpandedState ? mobileExpandedSearchWrapper : (0, jsx_runtime_1.jsx)(basicToolbar_1.BasicToolbar, { className: "zen-main-header__section zen-main-header__section--secondary-padding", leftElements: undefined, middleElements: mobileNewLineContainer, rightElements: undefined, isMobile: true }), tabs ? (0, jsx_runtime_1.jsxs)("div", { className: "zen-main-header__tabs zen-main-header--border", children: [" ", tabs, " "] }) : null, memoizedFiltersBar ? (0, jsx_runtime_1.jsx)("div", { className: "zen-main-header__filtersBar", children: memoizedFiltersBar }) : null, (0, jsx_runtime_1.jsx)("div", { className: "zen-main-header__section zen-main-header__section--hidden", ref: hiddenContainerRef, children: hiddenItemForRender }), (0, jsx_runtime_1.jsx)("div", { className: "zen-main-header__section zen-main-header__section--hidden", children: (0, jsx_runtime_1.jsx)("div", { className: "zen-main-header__section--inline", ref: moreButtonRef, children: moreButton }) })] }) }) }) }) });
 };
 exports.Header = Header;
 exports.HeaderDisplayName = "Header";

package/dist/header/headerHelpers.d.ts

@@ -9,6 +9,5 @@ export declare const filterItems: <T extends React.ReactElement<any, string | Re
     rightElements: T[];
     tabs: T | null;
     filtersBar: T | null;
-    search: T | null;
 };
 export declare const findFirstScrollableParent: (element: HTMLElement) => HTMLElement;

package/dist/header/headerHelpers.js

@@ -30,7 +30,6 @@ const tabs_1 = require("../tabs/tabs");
 const filtersBar_1 = require("../filtersBar/filtersBar");
 const headerButton_1 = require("./headerButton");
 const headerMenu_1 = require("./headerMenu");
-const filtersBarSearch_1 = require("../filtersBar/components/filtersBarSearch/filtersBarSearch");
 exports.HeaderCustomMenuWrapper = "HeaderCustomMenuWrapper";
 const getArrayOfChildren = (children) => {
     if (!children) {
@@ -56,15 +55,6 @@ const getFiltersBar = (item) => {
     const children = (0, exports.getArrayOfChildren)(item.props.children);
     return children.find(child => child.type ? (0, exports.isNamedChildComponent)(child, filtersBar_1.FiltersBarDisplayName) : false);
 };
-const getFilterSearch = (item) => {
-    var _a;
-    const filtersBarComponent = (0, exports.isNamedChildComponent)(item, filtersBar_1.FiltersBarDisplayName) ? item : getFiltersBar(item);
-    if (!filtersBarComponent) {
-        return null;
-    }
-    const children = (0, exports.getArrayOfChildren)(filtersBarComponent.props.children);
-    return (_a = children.filter(child => (0, exports.isNamedChildComponent)(child, filtersBarSearch_1.FiltersBarSearchDisplayName))[0]) !== null && _a !== void 0 ? _a : null;
-};
 const getItemsForRender = (items, isMobile) => {
     if (!isMobile) {
         return items;
@@ -105,7 +95,6 @@ const filterItems = (items, isMobile) => {
         }
         else if ((0, exports.isNamedChildComponent)(item, filtersBar_1.FiltersBarDisplayName) || getFiltersBar(item)) {
             acc.filtersBar = item;
-            acc.search = getFilterSearch(item);
         }
         else if ((0, exports.isNamedChildComponent)(item, headerButton_1.HeaderButtonDisplayName) ||
             (0, exports.isNamedChildComponent)(item, headerMenu_1.HeaderMenuDisplayName) ||
@@ -127,7 +116,7 @@ const filterItems = (items, isMobile) => {
             }
         }
         return acc;
-    }, { leftElements: [], resizableElements: [], rightElements: [], tabs: null, filtersBar: null, search: null });
+    }, { leftElements: [], resizableElements: [], rightElements: [], tabs: null, filtersBar: null });
     let isHasPrimary = result.rightElements.length > 0;
     const preparedResizableElements = result.resizableElements.map((el) => {
         if (el.props.important || el.props.type === "primary") {

package/dist/headerTitle/headerTitle.d.ts

@@ -1,6 +1,7 @@
 import React from "react";
 import "./headerTitle.less";
 import { IZenComponentProps } from "../commonHelpers/zenComponent";
+import { IBetaPillActions } from "../betaPill/betaPill";
 export declare const HeaderTitleDisplayName = "PageHeader";
 export interface IHeaderTitle extends IZenComponentProps {
     id?: string;
@@ -18,6 +19,8 @@ export interface IHeaderTitle extends IZenComponentProps {
     * @param translate - will be removed in the next major release
     */
     translate?: (s: string) => string;
+    feedBackAction?: IBetaPillActions;
+    betaOptionAction?: IBetaPillActions;
 }
 export declare const HeaderTitle: React.FC<IHeaderTitle>;
 export declare const TRANSLATIONS: string[];