@geotab/zenith 3.8.0-beta.1 → 3.9.0-beta.0

package/esm/commonHelpers/hooks/useClientReady.js

@@ -1,7 +1,9 @@
-import { useEffect, useState } from "react";
+import { useContext, useEffect, useState } from "react";
 import { isDomEnv } from "../isDomEnv";
+import { SSRContext } from "./ssrProvider";
 export const useClientReady = () => {
-    const [isClientReady, setIsClientReady] = useState(true);
+    const ctx = useContext(SSRContext);
+    const [isClientReady, setIsClientReady] = useState(ctx !== null ? ctx.isClientReady : true);
     useEffect(() => {
         if (isDomEnv()) {
             setIsClientReady(true);

package/esm/commonHelpers/hooks/useDeviceType.js

@@ -1,9 +1,11 @@
-import { useContext, useLayoutEffect, useMemo, useState } from "react";
+import { useContext, useMemo, useState } from "react";
+import { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect";
 import { useResize } from "./useResize";
 import { DeviceType } from "./deviceType";
 import { topWindowContext } from "../../utils/topWindow/topWindowContext";
 import { getParentWindow } from "../../utils/getParentWindow";
 import { zen } from "../../utils/zen";
+import { SSRContext } from "./ssrProvider";
 const MobileMaxWidth = 640;
 export const getDeviceType = (width) => {
     if (width > MobileMaxWidth) {
@@ -12,13 +14,15 @@ export const getDeviceType = (width) => {
     return DeviceType.Mobile;
 };
 export const useDeviceType = (callback) => {
+    const ctx = useContext(SSRContext);
+    const ssrDeviceType = ctx === null || ctx === void 0 ? void 0 : ctx.deviceType;
     const { topWindow } = useContext(topWindowContext);
     const win = useMemo(() => topWindow || getParentWindow(zen), [topWindow]);
-    const [deviceType, setDeviceType] = useState(getDeviceType(win.innerWidth));
+    const [deviceType, setDeviceType] = useState(ssrDeviceType !== null && ssrDeviceType !== void 0 ? ssrDeviceType : getDeviceType(win.innerWidth));
     useResize(() => {
         setDeviceType(getDeviceType(win.innerWidth));
     }, true);
-    useLayoutEffect(() => {
+    useIsomorphicLayoutEffect(() => {
         callback(deviceType);
     }, [deviceType, callback]);
 };

package/esm/commonHelpers/hooks/useIsomorphicLayoutEffect.d.ts

@@ -0,0 +1,2 @@
+import { useEffect } from "react";
+export declare const useIsomorphicLayoutEffect: typeof useEffect;

package/esm/commonHelpers/hooks/useIsomorphicLayoutEffect.js

@@ -0,0 +1,3 @@
+import { useEffect, useLayoutEffect } from "react";
+import { isDomEnv } from "../isDomEnv";
+export const useIsomorphicLayoutEffect = isDomEnv() ? useLayoutEffect : useEffect;

package/esm/commonHelpers/hooks/useMobile.js

@@ -2,13 +2,14 @@ import { useContext, useMemo, useState } from "react";
 import { DeviceType } from "./deviceType";
 import { getDeviceType, useDeviceType } from "./useDeviceType";
 import { getParentWindow } from "../../utils/getParentWindow";
-import { DeviceContext } from "./deviceProvider";
+import { SSRContext } from "./ssrProvider";
 import { zen } from "../../utils/zen";
 const initialParent = getParentWindow(zen);
 export const initialValue = getDeviceType(initialParent.innerWidth);
 export const useMobile = () => {
-    const deviceTypeFromProvider = useContext(DeviceContext);
-    const [deviceType, setDeviceType] = useState(deviceTypeFromProvider || initialValue);
+    var _a;
+    const ctx = useContext(SSRContext);
+    const [deviceType, setDeviceType] = useState((_a = ctx === null || ctx === void 0 ? void 0 : ctx.deviceType) !== null && _a !== void 0 ? _a : initialValue);
     useDeviceType(setDeviceType);
     const isMobile = useMemo(() => deviceType === DeviceType.Mobile, [deviceType]);
     return isMobile;

package/esm/commonHelpers/hooks/usePortal.js

@@ -1,12 +1,9 @@
 import { useEffect, useState } from "react";
 import { createPortal } from "react-dom";
 export const usePortal = (children, container, key) => {
-    const [portalContainer, setPortalContainer] = useState(container);
+    const [portalContainer, setPortalContainer] = useState(undefined);
     useEffect(() => {
-        if (portalContainer || !container) {
-            return;
-        }
         setPortalContainer(container);
-    }, [portalContainer, container]);
+    }, [container]);
     return portalContainer ? createPortal(children, portalContainer, key) : null;
 };

package/esm/commonHelpers/isDomEnv.js

@@ -1,2 +1 @@
-/* eslint-disable */
-export const isDomEnv = () => { var _a; return !!(typeof window !== "undefined" && typeof (window === null || window === void 0 ? void 0 : window.document) !== "undefined" && typeof ((_a = window === null || window === void 0 ? void 0 : window.document) === null || _a === void 0 ? void 0 : _a.createElement) !== "undefined"); };
+export const isDomEnv = () => !!(typeof window !== "undefined" && typeof window.document !== "undefined" && typeof window.document.createElement !== "undefined");

package/esm/commonHelpers/useUniqueId.d.ts

@@ -6,6 +6,12 @@
  * component. This can be particularly useful for assigning unique keys to elements
  * in a list, or for generating unique identifiers for form inputs, labels, etc.
  *
+ * @remarks
+ * **Prefer `React.useId()`** when possible. `useId` generates IDs that are stable
+ * across server and client renders, preventing SSR hydration mismatches.
+ * Use `useUniqueId` only when `useId` is not suitable — for example, when the ID
+ * must be truly random and is never rendered during SSR.
+ *
  * @returns {string} A unique identifier.
  *
  * Example usage:

package/esm/commonHelpers/useUniqueId.js

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { generateId } from "./utils";
+import { generateId } from "./generateId";
 /**
  * `useUniqueId` is a custom React hook that generates and returns a unique identifier.
  *
@@ -8,6 +8,12 @@ import { generateId } from "./utils";
  * component. This can be particularly useful for assigning unique keys to elements
  * in a list, or for generating unique identifiers for form inputs, labels, etc.
  *
+ * @remarks
+ * **Prefer `React.useId()`** when possible. `useId` generates IDs that are stable
+ * across server and client renders, preventing SSR hydration mismatches.
+ * Use `useUniqueId` only when `useId` is not suitable — for example, when the ID
+ * must be truly random and is never rendered during SSR.
+ *
  * @returns {string} A unique identifier.
  *
  * Example usage:

package/esm/commonHelpers/utils.d.ts

@@ -1,4 +1,3 @@
-export declare const generateId: () => string;
 export declare const echo: <T = unknown>(_: T) => T;
 export declare function flattenArrays<T>(arrayOfArrays: T[][]): T[];
 type TPlainObject = Record<string, unknown>;

package/esm/commonHelpers/utils.js

@@ -1,5 +1,4 @@
 import { zen } from "../utils/zen";
-export const generateId = () => "id" + Math.random().toString().substring(2);
 export const echo = (_) => _;
 export function flattenArrays(arrayOfArrays) {
     return arrayOfArrays.reduce((akk, arr) => akk.concat(arr), []);

package/esm/dataGrid/withSelectableRows/components/bulkActions/bulkActions.d.ts

@@ -7,19 +7,21 @@ import { DeviceType } from "../../../../commonHelpers/hooks/deviceType";
 type TBulkAction = IBulkActionLink | IBulkActionButton;
 export interface IBulkActionsProps extends IZenComponentProps {
     selected: number;
+    /**
+     * When `true`, displays "All selected" instead of a count, and enables action buttons
+     * even when `selected` is 0 (i.e., cross-page "select all" is active).
+     */
     allSelected?: boolean;
     onClearSelection: () => void;
-    onSelectAll?: () => void;
     gridType?: DeviceType;
     children?: ReactElement<TBulkAction> | null | (ReactElement<TBulkAction> | null)[];
-    turnOffSelectAll?: boolean;
 }
 export interface IBulkActions extends IBulkActionsProps {
     ActionLink: (props: IBulkActionLink) => ReactNode;
     ActionButton: (props: IBulkActionButton) => ReactNode;
 }
 export declare const BulkActions: {
-    ({ selected, allSelected, className, onClearSelection, onSelectAll, gridType, children, turnOffSelectAll }: IBulkActionsProps): import("react/jsx-runtime").JSX.Element;
+    ({ selected, allSelected, className, onClearSelection, gridType, children }: IBulkActionsProps): import("react/jsx-runtime").JSX.Element;
     ActionLink: ({ title, icon, link, disabled, type, ref }: IBulkActionLink) => import("react/jsx-runtime").JSX.Element;
     ActionButton: ({ title, icon, clickHandler, onClick, disabled, type, ref }: IBulkActionButton) => import("react/jsx-runtime").JSX.Element;
     translations: string[];

package/esm/dataGrid/withSelectableRows/components/bulkActions/bulkActions.js

@@ -12,7 +12,6 @@ import { useNonFittingElements } from "../../../../header/hooks/useNonFittingEle
 import { useResizeObserver } from "../../../../commonHelpers/hooks/useResizeObserver";
 import { Menu } from "../../../../menu/menu";
 import { IconDotVertical } from "../../../../icons/iconDotVertical";
-import { Button } from "../../../../button/button";
 injectString("cs", "{1} selected", "{1} vybran\xFD/vybran\xE9");
 injectString("da-DK", "{1} selected", "{1} valgt");
 injectString("de", "{1} selected", "{1} ausgew\xE4hlt");
@@ -94,33 +93,6 @@ injectString("zh-Hans", "Clear selection", "\u6E05\u9664\u9009\u62E9");
 injectString("zh-TW", "Clear selection", "\u6E05\u9664\u9078\u53D6\u9805\u76EE");
 injectString("ro-RO", "Clear selection", "\u0218terge\u021Bi selec\u021Bia");
 injectString("ar-SA", "Clear selection", "\u0645\u0633\u062D \u0627\u0644\u062A\u062D\u062F\u064A\u062F");
-injectString("cs", "Select all", "Vybrat v\u0161e");
-injectString("da-DK", "Select all", "V\xE6lg alle");
-injectString("de", "Select all", "Alle ausw\xE4hlen");
-injectString("en", "Select all", "Select all");
-injectString("es", "Select all", "Seleccionar todo");
-injectString("fi-FI", "Select all", "Valitse kaikki");
-injectString("fr", "Select all", "S\xE9lectionner tout");
-injectString("fr-FR", "Select all", "S\xE9lectionner tout");
-injectString("hu-HU", "Select all", "V\xE1laszd ki az \xF6sszeset.");
-injectString("id", "Select all", "Pilih semua");
-injectString("it", "Select all", "Selezionare tutto");
-injectString("ja", "Select all", "\u3059\u3079\u3066\u9078\u629E");
-injectString("ko-KR", "Select all", "\uBAA8\uB450 \uC120\uD0DD");
-injectString("ms", "Select all", "Pilih semua");
-injectString("nb-NO", "Select all", "Velg alle");
-injectString("nl", "Select all", "Alles selecteren");
-injectString("pl", "Select all", "Wybierz wszystko");
-injectString("pt-BR", "Select all", "Selecionar tudo");
-injectString("pt-PT", "Select all", "Selecionar tudo");
-injectString("sk-SK", "Select all", "Vyber v\u0161etko.");
-injectString("sv", "Select all", "V\xE4lj alla");
-injectString("th", "Select all", "\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E17\u0E31\u0E49\u0E07\u0E2B\u0E21\u0E14");
-injectString("tr", "Select all", "T\xFCm\xFCn\xFC se\xE7");
-injectString("zh-Hans", "Select all", "\u5168\u9009");
-injectString("zh-TW", "Select all", "\u5168\u9078");
-injectString("ro-RO", "Select all", "Selecta\u021Bi tot");
-injectString("ar-SA", "Select all", "\u062A\u062D\u062F\u064A\u062F \u0627\u0644\u0643\u0644");
 injectString("cs", "More", "V\xEDce");
 injectString("da-DK", "More", "Mere");
 injectString("de", "More", "Mehr");
@@ -153,10 +125,8 @@ export const BulkActions = ({
   allSelected,
   className,
   onClearSelection,
-  onSelectAll,
   gridType = DeviceType.Desktop,
-  children,
-  turnOffSelectAll
+  children
 }) => {
   var _a;
   const {
@@ -200,13 +170,7 @@ export const BulkActions = ({
     }), _jsx("span", {
       className: "zen-bulk-actions__number-of-selected ellipsis",
       children: text
-    }), onSelectAll && !turnOffSelectAll ? _jsx(Button, {
-      type: "tertiary",
-      className: "zen-bulk-actions__select-all",
-      disabled: allSelected,
-      onClick: onSelectAll,
-      children: translate("Select all")
-    }) : null, _jsxs("div", {
+    }), _jsxs("div", {
       className: "zen-bulk-actions__action-button-holder",
       ref: buttonHolder,
       children: [Children.map(visibleElements, element => cloneElement(element, {

package/esm/dateInputInner/dateInputInnerControlBlock.js

@@ -1,6 +1,6 @@
 import { injectString } from "../utils/localization/translationsDictionary";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from "react";
+import { useId, useMemo } from "react";
 import { TextInputRaw } from "../textInputRaw/textInputRaw";
 import { TimePicker } from "../timePicker/timePicker";
 import { useLanguage } from "../utils/localization/useLanguage";
@@ -79,23 +79,28 @@ export const DateInputInnerControlBlock = props => {
     assistiveText,
     ref
   } = props;
+  const generatedId = useId();
+  const fieldId = id || generatedId;
   const {
     translate
   } = useLanguage();
   const driveAssistiveClass = useDriveClassName("zen-form-field__text");
   const isHasDateError = requireSelection && !dateText;
   const isHasTimeError = requireSelection && !timePickerValue;
+  const dateErrorId = `${fieldId}-date-error`;
+  const timeErrorId = `${fieldId}-time-error`;
   const memoizedDateInput = useMemo(() => _jsx(TextInputRaw, {
     className: classNames(["zen-date-input-inner__text-input", isActiveField ? "zen-date-input-inner__text-input--active" : ""]),
-    id: id,
+    id: fieldId,
     value: dateText,
     onChange: handleSetDateText,
     onBlur: onBlurDateChangeHandler,
     placeholder: placeholder,
     autocomplete: "off",
     isError: isHasDateError,
+    ariaDescribedby: isHasDateError ? dateErrorId : undefined,
     ref: ref
-  }), [dateText, handleSetDateText, id, isActiveField, isHasDateError, onBlurDateChangeHandler, placeholder, ref]);
+  }), [dateText, handleSetDateText, fieldId, isActiveField, isHasDateError, onBlurDateChangeHandler, placeholder, ref, dateErrorId]);
   const memoizedTimeSelect = useMemo(() => selectTime ? _jsxs("div", {
     className: "zen-date-input-inner__inputs-block-item",
     children: [_jsx(TimePicker, {
@@ -103,18 +108,16 @@ export const DateInputInnerControlBlock = props => {
       value: timePickerValue,
       onChange: timeChangeHandler,
       isMobileView: isMobileView,
-      fullWidth: true,
-      // eslint-disable-next-line
-      // @ts-ignore
-      dataTimeId: id
+      fullWidth: true
     }), isHasTimeError ? _jsx(FormFieldError, {
+      id: timeErrorId,
       error: translate("The time must be set")
     }) : null]
-  }) : null, [isActiveField, isHasTimeError, isMobileView, selectTime, timeChangeHandler, timePickerValue, translate, id]);
+  }) : null, [isActiveField, isHasTimeError, isMobileView, selectTime, timeChangeHandler, timePickerValue, translate, timeErrorId]);
   return _jsxs("div", {
     className: classNames(["zen-date-input-inner__control-block", className || ""]),
     children: [title ? _jsx("label", {
-      htmlFor: id,
+      htmlFor: fieldId,
       className: "zen-date-input-inner__label",
       children: title
     }) : null, _jsxs("div", {
@@ -122,6 +125,7 @@ export const DateInputInnerControlBlock = props => {
       children: [_jsxs("div", {
         className: "zen-date-input-inner__inputs-block-item",
         children: [memoizedDateInput, isHasDateError ? _jsx(FormFieldError, {
+          id: dateErrorId,
           error: translate("The date must be set")
         }) : null]
       }), memoizedTimeSelect]

package/esm/dateRangeRaw/dateRangeRaw.js

@@ -219,6 +219,7 @@ injectString("zh-Hans", "Previous", "\u524D\u4E00");
 injectString("zh-TW", "Previous", "\u4E0A\u4E00\u500B");
 injectString("ro-RO", "Previous", "\xCEnapoi");
 injectString("ar-SA", "Previous", "\u0627\u0644\u0633\u0627\u0628\u0642");
+injectString("en", "Previous date period", "Previous date period");
 injectString("cs", "Next", "Dal\u0161\xED");
 injectString("da-DK", "Next", "N\xE6ste");
 injectString("de", "Next", "N\xE4chstes");
@@ -246,6 +247,7 @@ injectString("zh-Hans", "Next", "\u4E0B\u4E00\u4E2A");
 injectString("zh-TW", "Next", "\u4E0B\u4E00\u6B65");
 injectString("ro-RO", "Next", "\xCEnainte");
 injectString("ar-SA", "Next", "\u0627\u0644\u062A\u0627\u0644\u064A");
+injectString("en", "Next date period", "Next date period");
 export const DateRangeRaw = props => {
   var _a;
   const {
@@ -693,6 +695,7 @@ export const DateRangeRaw = props => {
         onClick: decreaseRange,
         className: classNames(["zen-date-range__stepper", "zen-date-range__stepper--left"]),
         title: translate("Previous"),
+        "aria-label": translate("Previous date period"),
         children: _jsx(IconChevronLeftSmall, {
           size: isDrive || isMobile ? "huge" : "large"
         })
@@ -702,6 +705,7 @@ export const DateRangeRaw = props => {
         onClick: increaseRange,
         className: classNames(["zen-date-range__stepper", "zen-date-range__stepper--right"]),
         title: translate("Next"),
+        "aria-label": translate("Next date period"),
         children: _jsx(IconChevronRightSmall, {
           size: isDrive || isMobile ? "huge" : "large"
         })
@@ -709,4 +713,4 @@ export const DateRangeRaw = props => {
     }) : chip ? chipTriggerComponent : popupTriggerComponent, isMobile ? memoizedMobileView : memoizedDesktopView]
   });
 };
-export const TRANSLATIONS = ["Custom", "Date range", "Clear", "Cancel", "Apply", "Reset", "Today", "Next", "Previous", "Choose dates", "Date range not available", "Choose your date range", "Some of the dates you selected aren't available. Please try a different range.", "Please select the dates you want to view."];
+export const TRANSLATIONS = ["Custom", "Date range", "Clear", "Cancel", "Apply", "Reset", "Today", "Next", "Previous", "Choose dates", "Date range not available", "Choose your date range", "Some of the dates you selected aren’t available. Please try a different range.", "Please select the dates you want to view.", "Previous date period", "Next date period"];

package/esm/dialog/dialog.js

@@ -7,7 +7,7 @@ import { classNames } from "../commonHelpers/classNames/classNames";
 import { useBodyScroll } from "../utils/useBodyScroll";
 import { useClientReady } from "../commonHelpers/hooks/useClientReady";
 import { zen } from "../utils/zen";
-import { createPortal } from "react-dom";
+import { usePortal } from "../commonHelpers/hooks/usePortal";
 /**
  * @deprecated - use Modal instead
  */
@@ -42,9 +42,10 @@ export const Dialog = ({ isOpen, children, isElementVisible }) => {
     const labeledId = useId();
     const darkClass = dark ? "zen-dark" : "";
     const createDialog = id => (_jsxs("div", { className: classNames(["zen-dialog", darkClass]), "aria-modal": "true", role: "dialog", "aria-labelledby": labeledId, style: { top: `${zen.pageYOffset || 0}px` }, children: [_jsx(DialogContent, Object.assign({}, children.props, { labeledId: id, isElementVisible: isElementVisible })), _jsx("div", { className: "zen-dialog__shield" })] }));
+    const modalRoot = ((_b = zen.document) === null || _b === void 0 ? void 0 : _b.fullscreenElement) || ((_c = zen.document) === null || _c === void 0 ? void 0 : _c.body);
+    const portal = usePortal(isOpen && isValidElement(children) ? createDialog(labeledId) : null, modalRoot, "ModalPortal");
     if (!isClientReady) {
         return null;
     }
-    const modalRoot = ((_b = zen.document) === null || _b === void 0 ? void 0 : _b.fullscreenElement) || ((_c = zen.document) === null || _c === void 0 ? void 0 : _c.body);
-    return createPortal(isOpen && isValidElement(children) ? createDialog(labeledId) : null, modalRoot);
+    return portal;
 };

package/esm/feedbackContainer/feedbackContainer.js

@@ -9,9 +9,9 @@ import { getAlertAnimation } from "./utils/getAlertAnimation";
 import { getToastAnimation } from "./utils/getToastAnimation";
 import { useClientReady } from "../commonHelpers/hooks/useClientReady";
 import { zen } from "../utils/zen";
-import { createPortal } from "react-dom";
+import { usePortal } from "../commonHelpers/hooks/usePortal";
 export const FeedbackContainer = () => {
-    var _a, _b;
+    var _a, _b, _c, _d;
     const { alerts, removeAlert, toasts, removeToast, activeFeedback, removedAlertId, removedToastId, mode } = React.useContext(FeedbackContext);
     const prevAlertsLength = React.useRef(alerts.length);
     const prevToastsLength = React.useRef(toasts.length);
@@ -48,10 +48,10 @@ export const FeedbackContainer = () => {
             removedToastId.current = indx;
             toast.onClose();
         }, type: toast.type, hasIcon: toast.hasIcon, action: toast.action }, toast.id))), [toasts, sameToastsLength, isToastAdded, removedToastId, isMobile, activeFeedback, removeToast]);
+    const alertsPortal = usePortal(_jsx("div", { className: alertClasses, children: alertsToRender }), (_b = (_a = zen.document) === null || _a === void 0 ? void 0 : _a.body) !== null && _b !== void 0 ? _b : undefined);
+    const toastsPortal = usePortal(_jsx("div", { className: toastClasses, children: toastsToRender }), (_d = (_c = zen.document) === null || _c === void 0 ? void 0 : _c.body) !== null && _d !== void 0 ? _d : undefined);
     if (!isClientReady) {
         return null;
     }
-    const alertsPortal = ((_a = zen.document) === null || _a === void 0 ? void 0 : _a.body) ? createPortal(_jsx("div", { className: alertClasses, children: alertsToRender }), zen.document.body) : null;
-    const toastsPortal = ((_b = zen.document) === null || _b === void 0 ? void 0 : _b.body) ? createPortal(_jsx("div", { className: toastClasses, children: toastsToRender }), zen.document.body) : null;
     return (_jsxs(_Fragment, { children: [!isAPIMode && alertsPortal, !isAPIMode && toastsPortal] }));
 };

package/esm/fileUpload/fileUpload.js

@@ -204,28 +204,37 @@ export const FileUpload = ({
   const pendingFocusIndexRef = useRef(null);
   const driveClasses = useDriveClassName("zen-file-upload");
   const classes = useMemo(() => classNames(["zen-file-upload", `zen-file-upload--${size}`, isMobile ? "zen-file-upload--mobile" : "", driveClasses || "", disabled ? "zen-file-upload--disabled" : "", className !== null && className !== void 0 ? className : ""]), [size, isMobile, driveClasses, disabled, className]);
-  const hasReachedLimit = !allowMultiple && value.length > 0;
-  const isUploadDisabled = disabled || hasReachedLimit;
+  const isUploadDisabled = disabled;
   const isInteractionDisabled = isUploadDisabled || isUploading;
   const dropZoneClasses = useMemo(() => classNames(["zen-file-upload__drop-zone", `zen-file-upload__drop-zone--${size}`, isMobile ? "zen-file-upload__drop-zone--mobile" : "", isDragOver ? "zen-file-upload__drop-zone--drag-over" : "", isInteractionDisabled ? "zen-file-upload__drop-zone--disabled" : ""]), [size, isMobile, isDragOver, isInteractionDisabled]);
   const handleFilesAdded = useCallback(fileList => {
     if (!onChange) {
       return;
     }
-    const newFiles = createUploadedFiles(fileList);
-    const merged = [...value, ...newFiles];
+    let newFiles = createUploadedFiles(fileList);
+    let addedFiles = fileList;
+    // when allowMultiple is false, only take first file
+    if (!allowMultiple && newFiles.length > 1) {
+      newFiles = [newFiles[0]];
+      const firstFile = fileList[0];
+      const singleFileArray = [firstFile];
+      addedFiles = Object.assign(singleFileArray, {
+        item: index => singleFileArray[index] || null
+      });
+    }
+    const merged = allowMultiple ? [...value, ...newFiles] : newFiles;
     onChange(merged, {
       action: "add",
-      addedFiles: fileList
+      addedFiles
     });
-  }, [onChange, value]);
+  }, [onChange, value, allowMultiple]);
   const handleDragOver = useCallback(e => {
     e.preventDefault();
     e.stopPropagation();
-    if (!disabled && !isUploading && !hasReachedLimit) {
+    if (!disabled && !isUploading) {
       setIsDragOver(true);
     }
-  }, [disabled, isUploading, hasReachedLimit]);
+  }, [disabled, isUploading]);
   const handleDragLeave = useCallback(e => {
     e.preventDefault();
     e.stopPropagation();
@@ -235,7 +244,7 @@ export const FileUpload = ({
     e.preventDefault();
     e.stopPropagation();
     setIsDragOver(false);
-    if (!disabled && !isUploading && !hasReachedLimit && onChange && e.dataTransfer.files.length > 0) {
+    if (!disabled && !isUploading && onChange && e.dataTransfer.files.length > 0) {
       // DataTransfer.files becomes inaccessible after event, so preserve it
       const filesArray = Array.from(e.dataTransfer.files);
       // Create a simple FileList-like object
@@ -244,12 +253,12 @@ export const FileUpload = ({
       });
       handleFilesAdded(fileList);
     }
-  }, [disabled, isUploading, hasReachedLimit, onChange, handleFilesAdded]);
+  }, [disabled, isUploading, onChange, handleFilesAdded]);
   const handleBrowseClick = useCallback(() => {
-    if (!disabled && !isUploading && !hasReachedLimit && fileInputRef.current) {
+    if (!disabled && !isUploading && fileInputRef.current) {
       fileInputRef.current.click();
     }
-  }, [disabled, isUploading, hasReachedLimit]);
+  }, [disabled, isUploading]);
   const handleFileInputChange = useCallback(e => {
     if (e.target.files && e.target.files.length > 0 && onChange) {
       handleFilesAdded(e.target.files);

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

@@ -12,4 +12,4 @@ export interface IFiltersSidePanel {
     setExternalState?: (newState: Partial<Record<string, TFiltersComponentsItemState>>) => void;
     triggerRef: React.RefObject<HTMLElement>;
 }
-export declare const FiltersSidePanel: ({ isOpen, onApply, onClose, onPin, isPinned, filters, externalState, setExternalState, triggerRef }: IFiltersSidePanel) => import("react/jsx-runtime").JSX.Element;
+export declare const FiltersSidePanel: ({ isOpen, onApply, onClose, onPin, isPinned, filters, externalState, setExternalState, triggerRef }: IFiltersSidePanel) => import("react/jsx-runtime").JSX.Element | null;