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

package/dist/index.css

@@ -9402,11 +9402,13 @@ html:lang(ar) .zen-text-input {
   line-height: 1rem;
   text-transform: none;
   text-decoration: none;
-  font-size: 16px !important;
 }
 html:lang(ar) .zen-text-input.zen-text-input--mobile {
   font-family: "Noto Sans Arabic", Roboto, "Segoe UI", Segoe, "Helvetica Neue", Helvetica, sans-serif;
 }
+.zen-text-input.zen-text-input--mobile input {
+  font-size: 16px;
+}
 .zen-input-adornments-border {
   box-sizing: border-box;
   border: 0;
@@ -9534,7 +9536,6 @@ html:lang(ar) .zen-text-input.zen-text-input--mobile {
   display: grid;
   gap: 0.5rem;
   align-items: center;
-  font-size: 1.0625rem;
 }
 .zen-input-adornments.zen-input-adornments--mobile.zen-input-adornments--has-start,
 .zen-input-adornments.zen-input-adornments--mobile.zen-input-adornments--has-end {
@@ -13130,17 +13131,51 @@ html:lang(ar) .zen-file-upload__file-name {
   }
 }
 .zen-filters {
-  max-width: 40rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  width: 100%;
   box-sizing: border-box;
 }
 .zen-filters * {
   box-sizing: border-box;
 }
+.zen-filters .zen-filters-search {
+  flex-grow: 0;
+  flex-shrink: 0;
+  margin: 0;
+  width: 11.25rem;
+}
+.zen-filters--mobile {
+  flex-wrap: nowrap;
+  overflow-inline: auto;
+  overflow-block: hidden;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+.zen-filters--mobile::-webkit-scrollbar {
+  display: none;
+}
+.zen-filters--mobile .zen-filters__main-row--mobile {
+  flex-shrink: 0;
+}
+.zen-filters--mobile .zen-filters-container {
+  flex-shrink: 0;
+  flex-grow: 0;
+  flex-wrap: nowrap;
+  width: auto;
+  min-width: unset;
+}
+.zen-filters--mobile .zen-filters-container__mobile-scroll-wrapper {
+  overflow: visible;
+  width: auto;
+  flex-shrink: 0;
+}
 .zen-filters__main-row {
   display: flex;
   align-items: center;
   box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.15);
-  border-radius: var(--border-radius-default);
+  border-radius: 999px;
   border: var(--border-width-default) solid var(--borders-general);
   background-color: var(--backgrounds-main);
 }
@@ -13150,12 +13185,15 @@ html:lang(ar) .zen-file-upload__file-name {
 .zen-filters__main-row:hover .zen-search-input__input {
   background-color: var(--backgrounds-content-0);
 }
-.zen-filters__main-row--mobile {
-  margin: 0.5rem;
-}
 .zen-filters__main-row--initial {
   view-transition-name: expand-panel;
 }
+.zen-filters__main-row--mobile {
+  width: auto;
+}
+.zen-filters__main-row--mobile .zen-filters-search {
+  width: auto;
+}
 .zen-filters__select-trigger {
   width: auto;
   flex-shrink: 0;
@@ -13202,39 +13240,53 @@ html:lang(ar) .zen-file-upload__file-name {
 }
 .zen-filters__search .zen-search-input__input {
   border: none;
-  padding-inline: 0 0.0625rem;
-  border-end-start-radius: 0;
-  border-start-start-radius: 0;
+  border-radius: 999px;
+  display: flex;
+}
+.zen-filters__search-with-pills {
+  border-radius: 999px;
 }
-.zen-filters-popup.zen-filters-popup:not(.zen-filters-popup--mobile) {
+.zen-filters-popup.zen-filters-popup {
   box-sizing: border-box;
-  width: 40rem;
-  max-width: 40rem;
+  border-radius: 0.5rem;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  width: 28.125rem;
+  max-width: 100%;
   view-transition-name: expand-panel;
+  padding: 0;
 }
-.zen-filters-popup.zen-filters-popup:not(.zen-filters-popup--mobile) * {
+.zen-filters-popup.zen-filters-popup * {
   box-sizing: border-box;
 }
 .zen-filters-popup__first-row {
   display: flex;
-  justify-content: space-between;
   align-items: center;
-  gap: 0.5rem;
-  padding: 0;
+  border-block-end: var(--border-width-default) solid var(--borders-general);
 }
-.zen-filters-popup__first-row--mobile {
-  padding: 0.5rem 1rem;
+.zen-filters-popup__first-row .zen-filters-search {
+  flex-grow: 1;
+  margin: 0;
+  width: 100%;
 }
-.zen-filters-popup__second-row {
-  border-block-start: var(--border-width-default) solid var(--borders-general);
-  padding: 1rem 0;
+.zen-filters-popup__first-row .zen-search-input__close-button--visible {
+  visibility: visible;
 }
-.zen-filters-popup__second-row--mobile {
+.zen-filters-popup__second-row {
   border-block-start: none;
   padding: 0;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  overflow-block: hidden;
 }
 .zen-filters-popup__content {
   display: flex;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
 }
 .zen-filters-popup__content .zen-filters-popup__left-panel {
   display: flex;
@@ -13250,36 +13302,55 @@ html:lang(ar) .zen-file-upload__file-name {
 }
 .zen-filters-popup__content .zen-filters-popup__right-panel {
   flex-grow: 1;
-  height: 100%;
-  max-width: calc(100% - 7.6875rem);
-}
-.zen-filters-popup.zen-filters-popup--mobile {
-  width: 100%;
-  max-width: 100%;
-  view-transition-name: expand-panel;
-}
-.zen-filters-popup.zen-filters-popup--mobile .zen-filters-popup__right-panel {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
   max-width: 100%;
 }
 .zen-filters-container {
   display: flex;
   flex-flow: row wrap;
+  flex-grow: 1;
+  min-width: 0;
   gap: 0.25rem;
-  margin-block-start: 0.5rem;
+  margin-block-start: 0;
   padding: 0.5rem 0;
 }
-.zen-filters-container__removal-chip .zen-chip__icon {
-  border: 1px solid var(--action-primary--active);
-  border-radius: 50%;
+.zen-filters-container .zen-chip--default {
+  background-color: var(--backgrounds-main);
+  color: var(--text-secondary);
+  fill: var(--text-secondary);
+}
+.zen-filters-container .zen-chip--default:hover {
+  background-color: var(--backgrounds-content-1);
+}
+.zen-filters-container .zen-chip--active {
+  background-color: var(--accents-general--main);
+  color: var(--action-primary--active);
+  fill: var(--action-primary--active);
+  border-color: var(--action-primary--active);
+}
+.zen-filters-container .zen-chip--active:hover {
+  border-color: var(--action-primary--active);
+}
+.zen-filters-container .zen-chip--accent {
+  background-color: var(--action-primary--active);
+  color: var(--accents-general--main);
+  fill: var(--accents-general--main);
+  border-color: var(--action-primary--active);
 }
-.zen-filters-container__removal-chip.zen-chip--accent .zen-chip__icon {
-  border: 1px solid var(--accents-general--main);
+.zen-filters-container__save-chip.zen-chip--active {
+  border-color: var(--borders-general);
 }
 .zen-filters-container.zen-filters-container--mobile {
   padding: 0;
 }
+.zen-filters-container.zen-filters-container--mobile .zen-chip {
+  height: 40px;
+  padding-block: 0.75rem;
+  padding-inline: 0.5rem;
+}
 .zen-filters-container__mobile-scroll-wrapper {
-  margin-inline-start: 0.5rem;
   padding: 0.125rem;
   display: flex;
   flex-flow: row nowrap;
@@ -13298,9 +13369,6 @@ html:lang(ar) .zen-file-upload__file-name {
 .zen-filters-container__mobile-scroll-wrapper > * {
   flex-shrink: 0;
 }
-.zen-filters-container__mobile-scroll-wrapper:last-child {
-  margin-inline-end: 0.5rem;
-}
 .zen-filters-container.zen-filters__container--no-search {
   margin-block-start: 0;
   padding: 0;
@@ -14517,19 +14585,19 @@ html:lang(ar) .zen-list-item__secondary {
   justify-content: center;
 }
 .zen-filters-search-list {
-  max-height: 21.5625rem;
-  min-height: 21.25rem;
+  flex: 1;
+  min-height: 0;
+  overflow-block: auto;
 }
 .zen-filters-search-list--mobile {
   padding: 1rem 0;
-  overflow-block: auto;
 }
 .zen-filters-search-list__header {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-block: 0 0.5rem;
-  margin-inline: 0.5rem;
+  margin-block: 1rem;
+  margin-inline: 1rem;
 }
 .zen-filters-search-list__header-title {
   font-family: Roboto, "Segoe UI", Segoe, "Helvetica Neue", Helvetica, sans-serif;
@@ -14545,9 +14613,10 @@ html:lang(ar) .zen-list-item__secondary {
 html:lang(ar) .zen-filters-search-list__header-title {
   font-family: "Noto Sans Arabic", Roboto, "Segoe UI", Segoe, "Helvetica Neue", Helvetica, sans-serif;
 }
-.zen-filters-search-list__data {
-  padding: 1px;
-  max-height: 18.5rem;
+.zen-filters-search-list__header-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
 }
 .zen-filters-search-list .zen-filters-search-list__header--drive .zen-filters-search-list__header-title {
   font-family: "Roboto Mono", "Segoe UI", Segoe, "Helvetica Neue", Helvetica, sans-serif;
@@ -14699,10 +14768,6 @@ html:lang(ar) .zen-search-item-data__identifier {
   line-height: 1rem;
   text-transform: none;
   text-decoration: none;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow-wrap: normal;
   color: var(--text-primary);
   flex: 1 1 auto;
   align-content: center;
@@ -16208,27 +16273,55 @@ html:lang(ar) .zen-filters-saved-popup__content.zen-filters-saved-popup__content
   flex-grow: 1;
   margin: 0 0.75rem;
 }
+.zen-filters-search__search-input {
+  flex: 1;
+  min-width: 0;
+}
 .zen-filters-search__selected {
   display: flex;
   gap: 0.5rem;
   flex-wrap: nowrap;
   align-items: center;
-  margin-inline-start: 0.5rem;
-  overflow: hidden;
+  margin-inline-end: 0.5rem;
+  flex-shrink: 0;
 }
 .zen-filters-search__selected-item {
   max-width: 11.3125rem;
 }
 .zen-filters-search__selected-item--more {
   flex-shrink: 0;
+  min-width: 1.375rem;
+  justify-content: center;
 }
-.zen-filters-search.zen-filters-popup__search-with-pills.zen-filters-search--mobile {
+.zen-filters-search.zen-filters-popup__search-with-pills {
   margin: 0;
   padding: 0 0.75rem;
-  border: var(--border-width-default) solid var(--borders-general);
-  border-radius: var(--border-radius-default);
 }
-.zen-filters-search.zen-filters-popup__search-with-pills.zen-filters-search--mobile .zen-filters-search__selected {
+.zen-filters-search.zen-filters-popup__search-with-pills .zen-filters-search__selected {
+  flex-shrink: 0;
+}
+.zen-filters-search--mobile {
+  margin: 0;
+}
+.zen-filters-search__mobile-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0 0.5rem;
+  width: 2.5rem;
+  height: 2.5rem;
+  color: inherit;
+  fill: currentcolor;
+  flex-shrink: 0;
+}
+.zen-filters-search__mobile-trigger:focus-visible {
+  outline: var(--border-width-default) solid var(--borders-form-field--active);
+  border-radius: 999px;
+}
+.zen-filters-search__mobile-trigger-icon {
   flex-shrink: 0;
 }
 .zen-side-panel-filters {
@@ -16426,16 +16519,12 @@ html:lang(ar) .zen-side-panel-filters__item-label--mobile {
   }
 }
 .zen-filters-select-compact {
-  padding: 0.25rem 1rem;
+  padding-block: 1rem 0.25rem;
+  padding-inline: 1rem;
   width: 100%;
+  box-sizing: border-box;
   overflow-inline: auto;
-  -ms-overflow-style: none;
-  /* IE and Edge */
-  scrollbar-width: none;
-  /* Firefox */
-}
-.zen-filters-select-compact::-webkit-scrollbar {
-  display: none;
+  flex-shrink: 0;
 }
 .zen-filters-select-compact__list {
   display: flex;
@@ -17561,7 +17650,7 @@ html:lang(ar) .zen-mobile-filter-control__counter {
 }
 .zen-page-header-component__actions--mobile-portal {
   position: fixed;
-  inset-block-end: 1rem;
+  inset-block-end: 4rem;
   inset-inline-start: 50%;
   transform: translateX(-50%);
   border-radius: 8px;

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

@@ -7,7 +7,7 @@ const classNames_1 = require("../commonHelpers/classNames/classNames");
 const textInputRaw_1 = require("../textInputRaw/textInputRaw");
 const useDriveClassName_1 = require("../utils/theme/useDriveClassName");
 const useMobileClassName_1 = require("../utils/theme/useMobileClassName");
-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 }) => {
+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 = (0, useDriveClassName_1.useDriveClassName)("zen-input-adornments");
     const mobileComponentClass = (0, useMobileClassName_1.useMobileClassName)("zen-input-adornments");
@@ -25,7 +25,7 @@ const InputAdornments = ({ id, value, className = "", disabled, isError, maxLeng
         !value ? "zen-input-adornments__wrapper--empty" : "",
         className
     ]), [className, endAdornment, value]);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: classes, children: [!!startAdornment && (0, jsx_runtime_1.jsx)("div", { className: "zen-input-adornments__adornment zen-input-adornments__adornment--start", children: startAdornment }), (0, jsx_runtime_1.jsx)("div", { className: wrapperClasses, children: (0, jsx_runtime_1.jsx)(textInputRaw_1.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 && (0, jsx_runtime_1.jsx)("div", { className: "zen-input-adornments__adornment zen-input-adornments__adornment--end", children: endAdornment })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: classes, children: [!!startAdornment && (0, jsx_runtime_1.jsx)("div", { className: "zen-input-adornments__adornment zen-input-adornments__adornment--start", children: startAdornment }), (0, jsx_runtime_1.jsx)("div", { className: wrapperClasses, children: (0, jsx_runtime_1.jsx)(textInputRaw_1.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 && (0, jsx_runtime_1.jsx)("div", { className: "zen-input-adornments__adornment zen-input-adornments__adornment--end", children: endAdornment })] }));
 };
 exports.InputAdornments = InputAdornments;
 exports.InputAdornments.displayName = "InputAdornments";

package/dist/searchInputRaw/searchInputRaw.js

@@ -120,12 +120,14 @@ const SearchInputRaw = props => {
     autoFocus,
     id,
     onFocus,
+    onClear,
     ref,
     role,
     ariaAutocomplete,
     ariaControls,
     ariaHaspopup,
-    ariaExpanded
+    ariaExpanded,
+    autocomplete = "off"
   } = props;
   const {
     name,
@@ -159,6 +161,7 @@ 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();
     };
@@ -217,7 +220,8 @@ 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/dist/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/dist/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/dist/utils/positioningUtils/calculatePosition.js

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

package/dist/utils/positioningUtils/normalizeVertically.js

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

package/esm/chart/lineChart/getDefaultOptions.js

@@ -46,6 +46,11 @@ const getFormatFromDateRange = (minDate, maxDate, ticks) => {
 };
 export const getDefaultOptions = (yAxis, xAxis, isTimedData, ticks, isDark, translate, isRtl = false) => {
     const time = getFormatFromDateRange(xAxis.minDate, xAxis.maxDate, ticks);
+    // Empty data yields inverted sentinel bounds (min > max); pinning those would make chart.js
+    // span ~8.6e15 ms and crash. Only pin a valid range, else let it auto-scale.
+    const xMin = Date.parse(xAxis.minDate);
+    const xMax = Date.parse(xAxis.maxDate);
+    const hasValidTimeRange = isTimedData && Number.isFinite(xMin) && Number.isFinite(xMax) && xMin <= xMax;
     const textColor = isDark ? "#C0CCD8" : "#4E677E";
     const primaryYPosition = isRtl ? "right" : "left";
     const secondaryYPosition = isRtl ? "left" : "right";
@@ -67,8 +72,8 @@ export const getDefaultOptions = (yAxis, xAxis, isTimedData, ticks, isDark, tran
                     }
                 }
                 : undefined,
-            min: isTimedData ? Date.parse(xAxis.minDate) : undefined,
-            max: isTimedData ? Date.parse(xAxis.maxDate) : undefined,
+            min: hasValidTimeRange ? xMin : undefined,
+            max: hasValidTimeRange ? xMax : undefined,
             ticks: isTimedData
                 ? {
                     autoSkip: false,

package/esm/commonHelpers/hooks/usePillSize.js

@@ -49,7 +49,7 @@ export const usePillSize = ({ size, iconPosition, onClose, hasContent, initialTi
         }
     }, []);
     useResize(() => {
-        if (isFixedSize || (hasIcon && !isClosable) || (!hasIcon && isClosable)) {
+        if (isFixedSize || !hasIcon || !isClosable) {
             return;
         }
         hidePillContent();
@@ -58,7 +58,7 @@ export const usePillSize = ({ size, iconPosition, onClose, hasContent, initialTi
         if (initialTitle) {
             return;
         }
-        if ((hasIcon && !isClosable) || (!hasIcon && isClosable)) {
+        if (!hasIcon || !isClosable) {
             return;
         }
         hidePillContent();

package/esm/controlledPopup/controlledPopup.d.ts

@@ -3,6 +3,7 @@ import { TTrapFocus } from "../absolute/absolute";
 import "./controlledPopup.less";
 import { IZenComponentProps } from "../commonHelpers/zenComponent";
 import { TAlignment as TAlignmentAbsolute } from "../absolute/absolute";
+import { IAlignment } from "../utils/positioningUtils/alignments";
 /**
  * @deprecated - please use {@link TAlignmentAbsolute|TAlignment} interface from the absolute component
  */
@@ -28,5 +29,7 @@ export interface IControlledPopup extends IZenComponentProps {
     preventAttributesAutoSet?: boolean;
     /** Whether to focus the first focusable element when popup opens. Default: true */
     focusOnOpen?: boolean;
+    /** Override the default alignment calculation functions. */
+    alignmentsFn?: IAlignment;
 }
-export declare const ControlledPopup: ({ isOpen, id, paddingX, paddingY, triggerRef, className, children, alignment, inline, onOpenChange, useTrapFocusWithTrigger, shouldHoldScroll, ariaLabel, ariaLabelledby, recalculateOnScroll, closeOnScroll, preventAttributesAutoSet, focusOnOpen, role }: IControlledPopup) => import("react/jsx-runtime").JSX.Element;
+export declare const ControlledPopup: ({ isOpen, id, paddingX, paddingY, triggerRef, className, children, alignment, inline, onOpenChange, useTrapFocusWithTrigger, shouldHoldScroll, ariaLabel, ariaLabelledby, recalculateOnScroll, closeOnScroll, preventAttributesAutoSet, focusOnOpen, alignmentsFn, role }: IControlledPopup) => import("react/jsx-runtime").JSX.Element;

package/esm/controlledPopup/controlledPopup.js

@@ -4,7 +4,7 @@ import { Absolute } from "../absolute/absolute";
 import { classNames } from "../commonHelpers/classNames/classNames";
 import { useClientReady } from "../commonHelpers/hooks/useClientReady";
 import { useRTLAlignment } from "../utils/localization/useRTLAlignment";
-export const ControlledPopup = ({ isOpen, id, paddingX, paddingY, triggerRef, className, children, alignment, inline, onOpenChange, useTrapFocusWithTrigger, shouldHoldScroll, ariaLabel, ariaLabelledby, recalculateOnScroll, closeOnScroll, preventAttributesAutoSet, focusOnOpen, role = "dialog" }) => {
+export const ControlledPopup = ({ isOpen, id, paddingX, paddingY, triggerRef, className, children, alignment, inline, onOpenChange, useTrapFocusWithTrigger, shouldHoldScroll, ariaLabel, ariaLabelledby, recalculateOnScroll, closeOnScroll, preventAttributesAutoSet, focusOnOpen, alignmentsFn, role = "dialog" }) => {
     const autoId = useId();
     const popupId = id || autoId;
     const isClientReady = useClientReady();
@@ -23,5 +23,5 @@ export const ControlledPopup = ({ isOpen, id, paddingX, paddingY, triggerRef, cl
         triggerRef.current.setAttribute("aria-expanded", isOpen ? "true" : "false");
         triggerRef.current.setAttribute("aria-controls", popupId);
     }, [triggerRef, isOpen, popupId, preventAttributesAutoSet, isClientReady]);
-    return (_jsx(Absolute, Object.assign({ triggerRef: triggerRef, alignment: rtlAlignment, id: popupId, isOpen: isOpen, className: classNames(["zen-popup", className ? className : ""]), paddingX: paddingX, paddingY: paddingY, inline: inline, onOpenChange: onOpenChange, useTrapFocusWithTrigger: useTrapFocusWithTrigger, shouldHoldScroll: shouldHoldScroll }, (role !== false && typeof role === "string" ? { role } : {}), (role !== false && ariaLabel ? { ariaLabel } : {}), (role !== false && ariaLabelledby ? { ariaLabelledby } : {}), { recalculateOnScroll: recalculateOnScroll, closeOnScroll: closeOnScroll, focusOnOpen: focusOnOpen, children: children })));
+    return (_jsx(Absolute, Object.assign({ triggerRef: triggerRef, alignment: rtlAlignment, id: popupId, isOpen: isOpen, className: classNames(["zen-popup", className ? className : ""]), paddingX: paddingX, paddingY: paddingY, inline: inline, onOpenChange: onOpenChange, useTrapFocusWithTrigger: useTrapFocusWithTrigger, shouldHoldScroll: shouldHoldScroll }, (role !== false && typeof role === "string" ? { role } : {}), (role !== false && ariaLabel ? { ariaLabel } : {}), (role !== false && ariaLabelledby ? { ariaLabelledby } : {}), { recalculateOnScroll: recalculateOnScroll, closeOnScroll: closeOnScroll, focusOnOpen: focusOnOpen, alignmentsFn: alignmentsFn, children: children })));
 };