@geotab/zenith 3.13.0-beta.1 → 3.13.1-beta.0

package/esm/filters/filters.js

@@ -4,10 +4,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useId, useMemo, useState } from "react";
 import { flushSync } from "react-dom";
 import React from "react";
-import { ALL_SELECT_OPTION_ID, FiltersSelect, getAllOption, getFiltersSearchTypeAllOption } from "./components/filtersSelect";
+import { getFiltersSearchTypeAllOption } from "./components/filtersSelect";
 import { classNames } from "../commonHelpers/classNames/classNames";
-import { TextIconButton } from "../textIconButton/textIconButton";
-import { IconChevronDownSmall } from "../icons/iconChevronDownSmall";
 import { useLanguage } from "../utils/localization/useLanguage";
 import { ControlledPopup } from "../controlledPopup/controlledPopup";
 import { FiltersContainer } from "./components/filtersContainer";
@@ -26,12 +24,12 @@ import { IconFilter } from "../icons/iconFilter";
 import { FiltersSidePanel } from "./components/filtersSidePanel";
 import { FiltersDateInput } from "./components/filtersDateInput";
 import { useMobile } from "../commonHelpers/hooks/useMobile";
-import { IconChevronTopSmall } from "../icons/iconChevronTopSmall";
 import { FOCUSABLE_SELECTOR } from "../utils/focusableSelector";
-import { Button } from "../button/button";
 import { FiltersSelectCompact } from "./components/filtersSelectCompact";
 import { FiltersSidePanelProvider } from "./components/filtersSidePanelProvider";
 import { zen } from "../utils/zen";
+import { alignments } from "../utils/positioningUtils/alignments";
+/** Bottom clearance in px kept between the popup and the viewport bottom edge. */
 injectString("cs", "Open setting conditions popup", "Open setting conditions popup");
 injectString("da-DK", "Open setting conditions popup", "Open setting conditions popup");
 injectString("de", "Open setting conditions popup", "Open setting conditions popup");
@@ -59,87 +57,7 @@ injectString("zh-Hans", "Open setting conditions popup", "Open setting condition
 injectString("zh-TW", "Open setting conditions popup", "Open setting conditions popup");
 injectString("ro-RO", "Open setting conditions popup", "Deschide\u021Bi pop-up-ul cu condi\u021Bii de setare");
 injectString("ar", "Open setting conditions popup", "\u0641\u062A\u062D \u0646\u0627\u0641\u0630\u0629 \u0625\u0639\u062F\u0627\u062F \u0627\u0644\u0634\u0631\u0648\u0637");
-injectString("cs", "Search page", "Search page");
-injectString("da-DK", "Search page", "Search page");
-injectString("de", "Search page", "Search page");
-injectString("en", "Search page", "Search page");
-injectString("es", "Search page", "Search page");
-injectString("fi-FI", "Search page", "Search page");
-injectString("fr", "Search page", "Search page");
-injectString("fr-FR", "Search page", "Search page");
-injectString("hu-HU", "Search page", "Search page");
-injectString("id", "Search page", "Search page");
-injectString("it", "Search page", "Search page");
-injectString("ja", "Search page", "Search page");
-injectString("ko-KR", "Search page", "Search page");
-injectString("ms", "Search page", "Search page");
-injectString("nb-NO", "Search page", "Search page");
-injectString("nl", "Search page", "Search page");
-injectString("pl", "Search page", "Search page");
-injectString("pt-BR", "Search page", "Search page");
-injectString("pt-PT", "Search page", "Pesquisar p\xE1gina");
-injectString("sk-SK", "Search page", "Search page");
-injectString("sv", "Search page", "Search page");
-injectString("th", "Search page", "Search page");
-injectString("tr", "Search page", "Search page");
-injectString("zh-Hans", "Search page", "Search page");
-injectString("zh-TW", "Search page", "Search page");
-injectString("ro-RO", "Search page", "C\u0103uta\u021Bi pagina");
-injectString("ar", "Search page", "\u0635\u0641\u062D\u0629 \u0627\u0644\u0628\u062D\u062B");
-injectString("cs", "Close setting conditions popup", "Close setting conditions popup");
-injectString("da-DK", "Close setting conditions popup", "Close setting conditions popup");
-injectString("de", "Close setting conditions popup", "Close setting conditions popup");
-injectString("en", "Close setting conditions popup", "Close setting conditions popup");
-injectString("es", "Close setting conditions popup", "Close setting conditions popup");
-injectString("fi-FI", "Close setting conditions popup", "Close setting conditions popup");
-injectString("fr", "Close setting conditions popup", "Close setting conditions popup");
-injectString("fr-FR", "Close setting conditions popup", "Close setting conditions popup");
-injectString("hu-HU", "Close setting conditions popup", "Close setting conditions popup");
-injectString("id", "Close setting conditions popup", "Close setting conditions popup");
-injectString("it", "Close setting conditions popup", "Close setting conditions popup");
-injectString("ja", "Close setting conditions popup", "Close setting conditions popup");
-injectString("ko-KR", "Close setting conditions popup", "Close setting conditions popup");
-injectString("ms", "Close setting conditions popup", "Close setting conditions popup");
-injectString("nb-NO", "Close setting conditions popup", "Close setting conditions popup");
-injectString("nl", "Close setting conditions popup", "Close setting conditions popup");
-injectString("pl", "Close setting conditions popup", "Close setting conditions popup");
-injectString("pt-BR", "Close setting conditions popup", "Close setting conditions popup");
-injectString("pt-PT", "Close setting conditions popup", "Fechar o pop-up de condi\xE7\xF5es de configura\xE7\xE3o");
-injectString("sk-SK", "Close setting conditions popup", "Close setting conditions popup");
-injectString("sv", "Close setting conditions popup", "Close setting conditions popup");
-injectString("th", "Close setting conditions popup", "Close setting conditions popup");
-injectString("tr", "Close setting conditions popup", "Close setting conditions popup");
-injectString("zh-Hans", "Close setting conditions popup", "Close setting conditions popup");
-injectString("zh-TW", "Close setting conditions popup", "Close setting conditions popup");
-injectString("ro-RO", "Close setting conditions popup", "\xCEnchide\u021Bi pop-up-ul cu condi\u021Bii de setare");
-injectString("ar", "Close setting conditions popup", "\u0625\u063A\u0644\u0627\u0642 \u0646\u0627\u0641\u0630\u0629 \u0625\u0639\u062F\u0627\u062F \u0627\u0644\u0634\u0631\u0648\u0637");
-injectString("cs", "Search by", "Search by");
-injectString("da-DK", "Search by", "Search by");
-injectString("de", "Search by", "Search by");
-injectString("en", "Search by", "Search by");
-injectString("es", "Search by", "Search by");
-injectString("fi-FI", "Search by", "Search by");
-injectString("fr", "Search by", "Search by");
-injectString("fr-FR", "Search by", "Search by");
-injectString("hu-HU", "Search by", "Search by");
-injectString("id", "Search by", "Search by");
-injectString("it", "Search by", "Search by");
-injectString("ja", "Search by", "Search by");
-injectString("ko-KR", "Search by", "Search by");
-injectString("ms", "Search by", "Search by");
-injectString("nb-NO", "Search by", "Search by");
-injectString("nl", "Search by", "Search by");
-injectString("pl", "Search by", "Search by");
-injectString("pt-BR", "Search by", "Search by");
-injectString("pt-PT", "Search by", "Pesquisar por");
-injectString("sk-SK", "Search by", "Search by");
-injectString("sv", "Search by", "Search by");
-injectString("th", "Search by", "Search by");
-injectString("tr", "Search by", "Search by");
-injectString("zh-Hans", "Search by", "Search by");
-injectString("zh-TW", "Search by", "Search by");
-injectString("ro-RO", "Search by", "C\u0103uta\u021Bi dup\u0103");
-injectString("ar", "Search by", "\u0627\u0644\u0628\u062D\u062B \u062D\u0633\u0628");
+injectString("en", "Find in page", "Find in page");
 injectString("cs", "Setting conditions", "Setting conditions");
 injectString("da-DK", "Setting conditions", "Setting conditions");
 injectString("de", "Setting conditions", "Setting conditions");
@@ -167,33 +85,6 @@ injectString("zh-Hans", "Setting conditions", "Setting conditions");
 injectString("zh-TW", "Setting conditions", "Setting conditions");
 injectString("ro-RO", "Setting conditions", "Condi\u021Bii de setare");
 injectString("ar", "Setting conditions", "\u0625\u0639\u062F\u0627\u062F \u0627\u0644\u0634\u0631\u0648\u0637");
-injectString("cs", "Cancel", "Zru\u0161it");
-injectString("da-DK", "Cancel", "Annuller");
-injectString("de", "Cancel", "Abbrechen");
-injectString("en", "Cancel", "Cancel");
-injectString("es", "Cancel", "Cancelar");
-injectString("fi-FI", "Cancel", "Peruuta");
-injectString("fr", "Cancel", "Annuler");
-injectString("fr-FR", "Cancel", "Annuler");
-injectString("hu-HU", "Cancel", "M\xE9gse");
-injectString("id", "Cancel", "Batalkan");
-injectString("it", "Cancel", "Annullare");
-injectString("ja", "Cancel", "\u30AD\u30E3\u30F3\u30BB\u30EB");
-injectString("ko-KR", "Cancel", "\uCDE8\uC18C");
-injectString("ms", "Cancel", "Batal");
-injectString("nb-NO", "Cancel", "Avbryt");
-injectString("nl", "Cancel", "Annuleren");
-injectString("pl", "Cancel", "Anuluj");
-injectString("pt-BR", "Cancel", "Cancelar");
-injectString("pt-PT", "Cancel", "Cancelar");
-injectString("sk-SK", "Cancel", "Zru\u0161.");
-injectString("sv", "Cancel", "Avbryt");
-injectString("th", "Cancel", "\u0E22\u0E01\u0E40\u0E25\u0E34\u0E01");
-injectString("tr", "Cancel", "\u0130ptal");
-injectString("zh-Hans", "Cancel", "\u53D6\u6D88");
-injectString("zh-TW", "Cancel", "\u53D6\u6D88");
-injectString("ro-RO", "Cancel", "Anula\u021Bi");
-injectString("ar", "Cancel", "\u0625\u0644\u063A\u0627\u0621");
 injectString("cs", "Filters and search", "Filters and search");
 injectString("da-DK", "Filters and search", "Filters and search");
 injectString("de", "Filters and search", "Filters and search");
@@ -221,6 +112,42 @@ injectString("zh-Hans", "Filters and search", "Filters and search");
 injectString("zh-TW", "Filters and search", "Filters and search");
 injectString("ro-RO", "Filters and search", "Filters and search");
 injectString("ar", "Filters and search", "\u0627\u0644\u062A\u0635\u0641\u064A\u0627\u062A \u0648\u0627\u0644\u0628\u062D\u062B");
+const POPUP_BOTTOM_MARGIN = 36;
+/**
+ * Custom alignment for the filters search popup.
+ * Returns a `height` constraint so calculatePosition sets maxHeight before the
+ * overflow check, anchoring the popup at the trigger top without repositioning.
+ */
+const filtersPopupAlignment = Object.assign(Object.assign({}, alignments), {
+  "bottom-left": (triggerRect, _1, parentRect, _2, paddingY) => ({
+    top: triggerRect.top - parentRect.top + triggerRect.height + paddingY,
+    left: triggerRect.left - parentRect.left,
+    height: (zen.innerHeight || 0) - triggerRect.top - POPUP_BOTTOM_MARGIN
+  }),
+  "bottom-right": (triggerRect, _1, parentRect, _2, paddingY) => ({
+    top: triggerRect.top - parentRect.top + triggerRect.height + paddingY,
+    right: parentRect.right - triggerRect.right,
+    height: (zen.innerHeight || 0) - triggerRect.top - POPUP_BOTTOM_MARGIN
+  })
+});
+/**
+ * Mobile variant: popup starts at left:0 and spans the full parent width.
+ * top:0 aligns the popup with the top of the trigger row.
+ */
+const filtersPopupAlignmentMobile = Object.assign(Object.assign({}, alignments), {
+  "bottom-left": (triggerRect, _1, parentRect) => ({
+    top: 0,
+    left: 0,
+    width: parentRect.right - parentRect.left,
+    height: (zen.innerHeight || 0) - triggerRect.top - POPUP_BOTTOM_MARGIN
+  }),
+  "bottom-right": (triggerRect, _1, parentRect) => ({
+    top: 0,
+    right: 0,
+    width: parentRect.right - parentRect.left,
+    height: (zen.innerHeight || 0) - triggerRect.top - POPUP_BOTTOM_MARGIN
+  })
+});
 export const FiltersDisplayName = "Filters";
 /**
  * @beta This component is currently in beta.
@@ -245,7 +172,8 @@ export const Filters = ({
   onSaveRecentSearch,
   savedFilters,
   onRemoveSavedFilter,
-  onSaveFilter
+  onSaveFilter,
+  searchPlaceholder
 }) => {
   const [isOpen, setIsOpen] = useState(false);
   const isSavedFiltersMode = Boolean(savedFilters && onRemoveSavedFilter && onSaveFilter);
@@ -481,12 +409,6 @@ export const Filters = ({
     return foundType && foundType.icon ? foundType.icon : IconFilter;
   }, [searchTypesArray]);
   const combinedData = useCombineData(searchTypesArray);
-  const memoizedSelect = useMemo(() => _jsx(FiltersSelect, {
-    value: searchType || getFiltersSearchTypeAllOption(),
-    selectListRef: selectListRef,
-    onChange: setSearchType,
-    items: searchTypesToSelect
-  }), [searchType, searchTypesToSelect, setSearchType]);
   const memoizedSelectCompact = useMemo(() => _jsx(FiltersSelectCompact, {
     value: searchType || getFiltersSearchTypeAllOption(),
     selectListRef: selectListCompactRef,
@@ -513,27 +435,28 @@ export const Filters = ({
     return _jsx(FiltersSearch, Object.assign({
       id: `filtersSearch_${uniqueKey}`,
       ref: searchTriggerRef,
-      name: translate("Search page"),
+      containerRef: triggerRef,
+      name: searchPlaceholder || translate("Find in page"),
       value: keyword,
       onSearchKeyDown: handleSearchKeyDown,
       onOpenPopup: isOpen ? undefined : handleOpenChange.bind(null, true),
       onChange: handleSearchKeywordChange,
-      handleRemove: onSearchItemClick,
       searchSelection: searchSelection,
-      className: "zen-filters__search-with-pills"
+      className: "zen-filters__search-with-pills",
+      isMobile: isMobile
     }, popupAttributes));
-  }, [isEmptySearchBar, uniqueKey, translate, keyword, handleSearchKeyDown, isOpen, handleOpenChange, handleSearchKeywordChange, onSearchItemClick, searchSelection, popupId, redundantPopup]);
+  }, [isEmptySearchBar, uniqueKey, translate, keyword, handleSearchKeyDown, isOpen, handleOpenChange, handleSearchKeywordChange, searchSelection, popupId, redundantPopup, isMobile, searchPlaceholder]);
   const memoizedSearchPopup = useMemo(() => isEmptySearchBar ? null : _jsx(FiltersSearch, {
     id: `filtersSearchPopup_${uniqueKey}`,
     ref: searchPopupTriggerRef,
-    name: translate("Search page"),
+    name: searchPlaceholder || translate("Find in page"),
     value: keyword,
     onChange: setKeyword,
+    onClear: handleCancelSearchSelection,
     onSearchKeyDown: handleSearchKeyDown,
-    handleRemove: onSearchItemClick,
     searchSelection: isMobile ? internalSearchSelection : searchSelection,
-    className: "zen-filters-popup__search-with-pills"
-  }), [isEmptySearchBar, uniqueKey, translate, keyword, setKeyword, handleSearchKeyDown, onSearchItemClick, isMobile, internalSearchSelection, searchSelection]);
+    className: classNames(["zen-filters-popup__search-with-pills", isMobile ? "zen-filters-search--mobile" : ""])
+  }), [isEmptySearchBar, uniqueKey, translate, keyword, setKeyword, handleCancelSearchSelection, handleSearchKeyDown, isMobile, internalSearchSelection, searchSelection, searchPlaceholder]);
   const memoizedSearchList = useMemo(() => !isOpen || isEmptySearchBar ? null : _jsx(FiltersSearchList, {
     searchValue: keyword,
     searchListRef: searchListRef,
@@ -549,74 +472,37 @@ export const Filters = ({
     applyButtonHandler: isMobile ? handleApplySearchSelection : undefined,
     isInitialSearchSelectionState: isMobile ? memoizedIsInitialSearchSelectionState : undefined
   }), [isOpen, keyword, combinedData, isMobile, internalSearchSelection, searchSelection, searchOnlyOneType, getIconByType, onInternalSearchItemClick, onSearchItemClick, onClearInternalSearchSelection, onClearSearchSelection, isRecentSearchesMode, recentSearches, onRemoveRecentSearchItem, handleRecentSearchItemClick, handleApplySearchSelection, memoizedIsInitialSearchSelectionState, isEmptySearchBar]);
-  const allOption = useMemo(() => getAllOption(translate), [translate]);
-  const selectTriggerPopup = useMemo(() => _jsx(TextIconButton, {
-    className: "zen-filters__select-trigger",
-    iconClasses: "zen-filters__select-trigger-icon",
-    contentClasses: "zen-filters__select-trigger-content",
-    title: translate("Close setting conditions popup"),
-    onClick: handleOpenChange.bind(null, false),
-    icon: IconChevronTopSmall,
-    iconPosition: "end",
-    children: translate("Search by")
-  }), [handleOpenChange, translate]);
-  // added onMouseDown to prevent focus
-  const selectTrigger = useMemo(() => {
-    var _a;
-    if (isMobile || redundantPopup) {
-      return null;
-    }
-    const currentSelectedType = selectState[0] === ALL_SELECT_OPTION_ID ? allOption.name : (_a = searchTypesArray.find(item => item.id === selectState[0])) === null || _a === void 0 ? void 0 : _a.name;
-    return _jsx(TextIconButton, {
-      tabIndex: -1,
-      onMouseDown: e => e.preventDefault(),
-      className: "zen-filters__select-trigger",
-      iconClasses: "zen-filters__select-trigger-icon",
-      contentClasses: "zen-filters__select-trigger-content",
-      title: translate("Open setting conditions popup"),
-      onClick: handleOpenChange.bind(null, true),
-      icon: IconChevronDownSmall,
-      iconPosition: "end",
-      children: currentSelectedType
-    });
-  }, [isMobile, redundantPopup, translate, handleOpenChange, selectState, allOption.name, searchTypesArray]);
   const popupChangeHandler = useCallback(val => {
     (isMobile ? handleCancelSearchSelection : handleOpenChange)(val);
   }, [isMobile, handleCancelSearchSelection, handleOpenChange]);
   const memoizedPopup = useMemo(() => isEmptySearchBar || redundantPopup ? null : _jsx(ControlledPopup, {
-    paddingY: -34,
+    paddingY: isMobile ? 0 : -34,
     isOpen: isOpen,
-    className: classNames(["zen-filters-popup", isMobile ? "zen-filters-popup--mobile" : ""]),
+    className: classNames(["zen-filters-popup", "zen-filters-popup--mobile"]),
     onOpenChange: popupChangeHandler,
     useTrapFocusWithTrigger: "none",
-    alignment: "bottom",
+    alignment: "bottom-start",
     shouldHoldScroll: true,
     preventAttributesAutoSet: true,
     triggerRef: triggerRef,
     ariaLabel: translate("Setting conditions"),
     recalculateOnScroll: true,
     id: popupId,
-    children: _jsxs("div", {
+    alignmentsFn: isMobile ? filtersPopupAlignmentMobile : filtersPopupAlignment,
+    children: _jsx("div", {
       className: "zen-filters-popup__content",
-      children: [isMobile ? null : _jsxs("div", {
-        className: "zen-filters-popup__left-panel",
-        children: [selectTriggerPopup, memoizedSelect]
-      }), _jsxs("div", {
+      children: _jsxs("div", {
         className: "zen-filters-popup__right-panel",
-        children: [_jsxs("div", {
-          className: classNames(["zen-filters-popup__first-row", isMobile ? "zen-filters-popup__first-row--mobile" : ""]),
-          children: [memoizedSearchPopup, isMobile ? _jsx(Button, {
-            type: "tertiary",
-            onClick: handleCancelSearchSelection,
-            children: translate("Cancel")
-          }) : null]
+        children: [_jsx("div", {
+          className: classNames(["zen-filters-popup__first-row", "zen-filters-popup__first-row--mobile"]),
+          children: memoizedSearchPopup
         }), _jsxs("div", {
-          className: classNames(["zen-filters-popup__second-row", isMobile ? "zen-filters-popup__second-row--mobile" : ""]),
-          children: [isMobile ? memoizedSelectCompact : null, memoizedSearchList]
+          className: classNames(["zen-filters-popup__second-row", "zen-filters-popup__second-row--mobile"]),
+          children: [memoizedSelectCompact, memoizedSearchList]
         })]
-      })]
+      })
     })
-  }), [isEmptySearchBar, redundantPopup, isOpen, isMobile, popupChangeHandler, handleCancelSearchSelection, translate, selectTriggerPopup, memoizedSelect, memoizedSearchPopup, memoizedSelectCompact, memoizedSearchList, popupId]);
+  }), [isEmptySearchBar, redundantPopup, isOpen, isMobile, popupChangeHandler, translate, memoizedSearchPopup, memoizedSelectCompact, memoizedSearchList, popupId]);
   const filtersForRender = useMemo(() => filters.filter(el => {
     const elProps = el.props;
     return typeof elProps.visible === "boolean" ? elProps.visible : elProps.visible === undefined ? false : elProps.visible(Array.from(selectState), undefined);
@@ -699,11 +585,11 @@ export const Filters = ({
   return _jsxs("section", {
     role: "search",
     "aria-label": translate("Filters and search"),
-    className: classNames(["zen-filters", className || ""]),
-    children: [isEmptySearchBar ? null : _jsxs("div", {
+    className: classNames(["zen-filters", isMobile ? "zen-filters--mobile" : "", className || ""]),
+    children: [isEmptySearchBar ? null : _jsx("div", {
       className: classNames(["zen-filters__main-row", isOpen ? "" : "zen-filters__main-row--initial", isMobile ? "zen-filters__main-row--mobile" : ""]),
       ref: triggerRef,
-      children: [selectTrigger, memoizedSearch]
+      children: memoizedSearch
     }), _jsx(FiltersSavedItemsProvider, {
       items: memoizedSavedFiltersItems,
       active: memoizedSavedFiltersActive,

package/esm/filters/filtersHelper.js

@@ -298,7 +298,7 @@ export const processChildrenWithMetaData = (children) => {
             // Component props provide: state, onChange, and other props
             const childProps = child.props;
             const { state, onChange } = childProps, otherProps = __rest(childProps, ["state", "onChange"]);
-            const mergedProps = Object.assign(Object.assign({}, otherProps), { id: metaData.id, defaultState: createDefaultStateMetaData(metaData.defaultState || childProps.defaultState, metaData.childType, state), visible: metaData.visible, state,
+            const mergedProps = Object.assign(Object.assign({}, otherProps), { id: metaData.id, defaultState: createDefaultStateMetaData(metaData.defaultState || childProps.defaultState, metaData.childType, state), visible: childProps.visible !== undefined ? childProps.visible : metaData.visible, state,
                 onChange, childType: metaData.childType });
             // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
             return React.cloneElement(child, mergedProps);

package/esm/groupsFilterRaw/groupsFilterRaw.js

@@ -304,6 +304,7 @@ export const GroupsFilterRaw = props => {
   const menuRef = useRef(null);
   const prevInitialState = useRef(initialFilterStateInner);
   const prevSearchField = useRef("");
+  const attemptedFetchOnOpenRef = useRef(false);
   const groupsFilterId = useId();
   const popupId = useId();
   const blocksMap = useMemo(() => [["builtInGroups", "userGroups"], ["advancedGroups", "builtInGroups", "userGroups"], ["builtInGroups", "userGroups"]], []);
@@ -867,7 +868,12 @@ export const GroupsFilterRaw = props => {
   }), [handleApply, handleCancel, handleReset, isApplyDisabled, translate]);
   const isEmptyMap = dataItems.length === 0;
   useEffect(() => {
-    if (isEmptyMap && uiState.isOpen && !uiState.isLoading && !uiState.hasError) {
+    if (!uiState.isOpen) {
+      attemptedFetchOnOpenRef.current = false;
+      return;
+    }
+    if (isEmptyMap && !attemptedFetchOnOpenRef.current && !uiState.isLoading && !uiState.hasError) {
+      attemptedFetchOnOpenRef.current = true;
       dispatchUiState({
         type: UiStateActionType.SetLoadWithError,
         payload: {

package/esm/inputAdornments/inputAdornments.d.ts

@@ -26,8 +26,9 @@ export interface IInputAdornments {
     ariaControls?: string;
     ariaHaspopup?: boolean | "dialog" | "menu" | "grid" | "true" | "false" | "listbox" | "tree";
     ariaExpanded?: boolean | "true" | "false";
+    autocomplete?: string;
 }
 export declare const InputAdornments: {
-    ({ id, value, className, disabled, isError, maxLength, onChange, onKeyDown, onFocus, startAdornment, endAdornment, placeholder, inputType, autoFocus, name, onBlur, ref, ariaLabel, ariaDescribedby, role, ariaAutocomplete, ariaControls, ariaHaspopup, ariaExpanded }: IInputAdornments): import("react/jsx-runtime").JSX.Element;
+    ({ id, value, className, disabled, isError, maxLength, onChange, onKeyDown, onFocus, startAdornment, endAdornment, placeholder, inputType, autoFocus, name, onBlur, ref, ariaLabel, ariaDescribedby, role, ariaAutocomplete, ariaControls, ariaHaspopup, ariaExpanded, autocomplete }: IInputAdornments): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/esm/inputAdornments/inputAdornments.js

@@ -4,7 +4,7 @@ import { classNames } from "../commonHelpers/classNames/classNames";
 import { TextInputRaw } from "../textInputRaw/textInputRaw";
 import { useDriveClassName } from "../utils/theme/useDriveClassName";
 import { useMobileClassName } from "../utils/theme/useMobileClassName";
-export const InputAdornments = ({ id, value, className = "", disabled, isError, maxLength, onChange, onKeyDown, onFocus, startAdornment, endAdornment, placeholder, inputType = "text", autoFocus, name, onBlur, ref, ariaLabel, ariaDescribedby, role, ariaAutocomplete, ariaControls, ariaHaspopup, ariaExpanded }) => {
+export const InputAdornments = ({ id, value, className = "", disabled, isError, maxLength, onChange, onKeyDown, onFocus, startAdornment, endAdornment, placeholder, inputType = "text", autoFocus, name, onBlur, ref, ariaLabel, ariaDescribedby, role, ariaAutocomplete, ariaControls, ariaHaspopup, ariaExpanded, autocomplete }) => {
     const disabledClassName = disabled ? "zen-input-adornments--disabled" : "";
     const driveComponentClass = useDriveClassName("zen-input-adornments");
     const mobileComponentClass = useMobileClassName("zen-input-adornments");
@@ -22,6 +22,6 @@ export const InputAdornments = ({ id, value, className = "", disabled, isError,
         !value ? "zen-input-adornments__wrapper--empty" : "",
         className
     ]), [className, endAdornment, value]);
-    return (_jsxs("div", { className: classes, children: [!!startAdornment && _jsx("div", { className: "zen-input-adornments__adornment zen-input-adornments__adornment--start", children: startAdornment }), _jsx("div", { className: wrapperClasses, children: _jsx(TextInputRaw, { name: name, onBlur: onBlur, ref: ref, id: id, value: value, maxLength: maxLength, isError: isError, placeholder: placeholder, onChange: onChange, onKeyDown: onKeyDown, onFocus: onFocus, disabled: disabled, type: inputType, autoFocus: autoFocus, ariaLabel: ariaLabel, ariaDescribedby: ariaDescribedby, role: role, ariaAutocomplete: ariaAutocomplete, ariaControls: ariaControls, ariaHaspopup: ariaHaspopup, ariaExpanded: ariaExpanded === undefined ? undefined : ariaExpanded === "true" || ariaExpanded === true, className: "zen-input-adornments__input zen-input-adornments__input--border-none" }) }), !!endAdornment && _jsx("div", { className: "zen-input-adornments__adornment zen-input-adornments__adornment--end", children: endAdornment })] }));
+    return (_jsxs("div", { className: classes, children: [!!startAdornment && _jsx("div", { className: "zen-input-adornments__adornment zen-input-adornments__adornment--start", children: startAdornment }), _jsx("div", { className: wrapperClasses, children: _jsx(TextInputRaw, { name: name, onBlur: onBlur, ref: ref, id: id, value: value, maxLength: maxLength, isError: isError, placeholder: placeholder, onChange: onChange, onKeyDown: onKeyDown, onFocus: onFocus, disabled: disabled, type: inputType, autoFocus: autoFocus, ariaLabel: ariaLabel, ariaDescribedby: ariaDescribedby, role: role, ariaAutocomplete: ariaAutocomplete, ariaControls: ariaControls, ariaHaspopup: ariaHaspopup, ariaExpanded: ariaExpanded === undefined ? undefined : ariaExpanded === "true" || ariaExpanded === true, autocomplete: autocomplete, className: "zen-input-adornments__input zen-input-adornments__input--border-none" }) }), !!endAdornment && _jsx("div", { className: "zen-input-adornments__adornment zen-input-adornments__adornment--end", children: endAdornment })] }));
 };
 InputAdornments.displayName = "InputAdornments";

package/esm/searchInputRaw/searchInputRaw.js

@@ -81,12 +81,14 @@ export const SearchInputRaw = props => {
     autoFocus,
     id,
     onFocus,
+    onClear,
     ref,
     role,
     ariaAutocomplete,
     ariaControls,
     ariaHaspopup,
-    ariaExpanded
+    ariaExpanded,
+    autocomplete = "off"
   } = props;
   const {
     name,
@@ -120,6 +122,7 @@ export const SearchInputRaw = props => {
     const onClick = () => {
       var _a;
       onChange === null || onChange === void 0 ? void 0 : onChange("");
+      onClear === null || onClear === void 0 ? void 0 : onClear();
       // Return focus to the input after clearing so keyboard users don't lose their place (WCAG 2.1 SC 2.1.1)
       (_a = ref ? ref.current : innerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     };
@@ -178,7 +181,8 @@ export const SearchInputRaw = props => {
       ariaAutocomplete: ariaAutocomplete,
       ariaControls: ariaControls,
       ariaHaspopup: ariaHaspopup,
-      ariaExpanded: ariaExpanded === undefined ? undefined : ariaExpanded === "true" || ariaExpanded === true
+      ariaExpanded: ariaExpanded === undefined ? undefined : ariaExpanded === "true" || ariaExpanded === true,
+      autocomplete: autocomplete
     })
   }));
 };

package/esm/searchInputRaw/types.d.ts

@@ -8,6 +8,8 @@ export interface ISearchInputRawBase {
     placeholder?: string;
     ariaLabel?: string;
     closeButtonTitle?: string;
+    /** Called when the clear (X) button is clicked, in addition to clearing the value via onChange */
+    onClear?: () => void;
     isError?: boolean;
     isReadOnly?: boolean;
     maxLength?: number;
@@ -26,6 +28,8 @@ export interface ISearchInputRawBase {
     ariaControls?: string;
     ariaHaspopup?: boolean | "dialog" | "menu" | "grid" | "true" | "false" | "listbox" | "tree";
     ariaExpanded?: boolean | "true" | "false";
+    /** HTML autocomplete attribute for the underlying input. Defaults to "off" to suppress browser autofill. */
+    autocomplete?: string;
 }
 export interface ISearchInputRawDefault extends ISearchInputRawBase {
     value: string;

package/esm/utils/localization/translations/en.json

@@ -252,6 +252,7 @@
     "value changes in the range from {MIN} to {MAX}.": "value changes in the range from {MIN} to {MAX}.",
     "Error generating chart narrative for dataset": "Error generating chart narrative for dataset",
     "Chart data table and visualization": "Chart data table and visualization",
+    "Find in page": "Find in page",
     "Search page": "Search page",
     "Search by": "Search by",
     "Save": "Save",

package/esm/utils/positioningUtils/calculatePosition.js

@@ -90,7 +90,9 @@ export const calculatePosition = (triggerRef, popupRef, paddingX, paddingY, inli
             }
         }
     }
-    else if (!isTopsideAlignment && triggerRect.y + triggerRect.height + popupRect.height > (zen.innerHeight || 0)) {
+    else if (!isTopsideAlignment &&
+        triggerRect.y + triggerRect.height + popupRect.height > (zen.innerHeight || 0) &&
+        position.height === undefined) {
         const newTopPosition = (zen.innerHeight || 0) + scrollTop - popupRect.height;
         position.top = newTopPosition < 0 ? 0 : newTopPosition;
     }

package/esm/utils/positioningUtils/normalizeVertically.js

@@ -4,7 +4,7 @@ export const normalizeVertically = (position, popupRect, parentHeight) => {
         position.bottom = 0;
         return;
     }
-    if (position.top) {
+    if (position.top !== undefined) {
         if (position.top < 0) {
             position.top = 0;
         }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@geotab/zenith",
-    "version": "3.13.0-beta.1",
+    "version": "3.13.1-beta.0",
     "description": "Zenith components library on React",
     "main": "dist/index.js",
     "types": "esm/index.d.ts",