@geotab/zenith 3.7.0 → 3.8.0-beta.0

package/esm/fileUpload/fileUpload.js

@@ -0,0 +1,368 @@
+import { injectString } from "../utils/localization/translationsDictionary";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useCallback, useState, useRef, useEffect } from "react";
+import { classNames } from "../commonHelpers/classNames/classNames";
+import { useDriveClassName } from "../utils/theme/useDriveClassName";
+import { useLanguage } from "../utils/localization/useLanguage";
+import { useMobile } from "../commonHelpers/hooks/useMobile";
+import { Waiting } from "../waiting/waiting";
+import { DropZoneContent } from "./components/dropZoneContent";
+import { TemplateDownloadSection } from "./components/templateDownloadSection";
+import { UploadedFilesSection } from "./components/uploadedFilesSection";
+injectString("cs", "Tap to add files", "Tap to add files");
+injectString("da-DK", "Tap to add files", "Tap to add files");
+injectString("de", "Tap to add files", "Tap to add files");
+injectString("en", "Tap to add files", "Tap to add files");
+injectString("es", "Tap to add files", "Tap to add files");
+injectString("fi-FI", "Tap to add files", "Tap to add files");
+injectString("fr", "Tap to add files", "Tap to add files");
+injectString("fr-FR", "Tap to add files", "Tap to add files");
+injectString("hu-HU", "Tap to add files", "Tap to add files");
+injectString("id", "Tap to add files", "Tap to add files");
+injectString("it", "Tap to add files", "Tap to add files");
+injectString("ja", "Tap to add files", "Tap to add files");
+injectString("ko-KR", "Tap to add files", "Tap to add files");
+injectString("ms", "Tap to add files", "Tap to add files");
+injectString("nb-NO", "Tap to add files", "Tap to add files");
+injectString("nl", "Tap to add files", "Tap to add files");
+injectString("pl", "Tap to add files", "Tap to add files");
+injectString("pt-BR", "Tap to add files", "Tap to add files");
+injectString("pt-PT", "Tap to add files", "Tap to add files");
+injectString("sk-SK", "Tap to add files", "Tap to add files");
+injectString("sv", "Tap to add files", "Tap to add files");
+injectString("th", "Tap to add files", "Tap to add files");
+injectString("tr", "Tap to add files", "Tap to add files");
+injectString("zh-Hans", "Tap to add files", "Tap to add files");
+injectString("zh-TW", "Tap to add files", "Tap to add files");
+injectString("ro-RO", "Tap to add files", "Tap to add files");
+injectString("ar-SA", "Tap to add files", "\u0627\u0646\u0642\u0631 \u0644\u0625\u0636\u0627\u0641\u0629 \u0645\u0644\u0641\u0627\u062A");
+injectString("cs", "Drag & drop files or", "Drag & drop files or");
+injectString("da-DK", "Drag & drop files or", "Drag & drop files or");
+injectString("de", "Drag & drop files or", "Drag & drop files or");
+injectString("en", "Drag & drop files or", "Drag & drop files or");
+injectString("es", "Drag & drop files or", "Drag & drop files or");
+injectString("fi-FI", "Drag & drop files or", "Drag & drop files or");
+injectString("fr", "Drag & drop files or", "Drag & drop files or");
+injectString("fr-FR", "Drag & drop files or", "Drag & drop files or");
+injectString("hu-HU", "Drag & drop files or", "Drag & drop files or");
+injectString("id", "Drag & drop files or", "Drag & drop files or");
+injectString("it", "Drag & drop files or", "Drag & drop files or");
+injectString("ja", "Drag & drop files or", "Drag & drop files or");
+injectString("ko-KR", "Drag & drop files or", "Drag & drop files or");
+injectString("ms", "Drag & drop files or", "Drag & drop files or");
+injectString("nb-NO", "Drag & drop files or", "Drag & drop files or");
+injectString("nl", "Drag & drop files or", "Drag & drop files or");
+injectString("pl", "Drag & drop files or", "Drag & drop files or");
+injectString("pt-BR", "Drag & drop files or", "Drag & drop files or");
+injectString("pt-PT", "Drag & drop files or", "Drag & drop files or");
+injectString("sk-SK", "Drag & drop files or", "Drag & drop files or");
+injectString("sv", "Drag & drop files or", "Drag & drop files or");
+injectString("th", "Drag & drop files or", "Drag & drop files or");
+injectString("tr", "Drag & drop files or", "Drag & drop files or");
+injectString("zh-Hans", "Drag & drop files or", "Drag & drop files or");
+injectString("zh-TW", "Drag & drop files or", "Drag & drop files or");
+injectString("ro-RO", "Drag & drop files or", "Drag & drop files or");
+injectString("ar-SA", "Drag & drop files or", "\u0627\u0633\u062D\u0628 \u0648\u0623\u0641\u0644\u062A \u0627\u0644\u0645\u0644\u0641\u0627\u062A \u0623\u0648");
+injectString("cs", "Browse", "Browse");
+injectString("da-DK", "Browse", "Browse");
+injectString("de", "Browse", "Browse");
+injectString("en", "Browse", "Browse");
+injectString("es", "Browse", "Browse");
+injectString("fi-FI", "Browse", "Browse");
+injectString("fr", "Browse", "Browse");
+injectString("fr-FR", "Browse", "Browse");
+injectString("hu-HU", "Browse", "Browse");
+injectString("id", "Browse", "Browse");
+injectString("it", "Browse", "Browse");
+injectString("ja", "Browse", "Browse");
+injectString("ko-KR", "Browse", "Browse");
+injectString("ms", "Browse", "Browse");
+injectString("nb-NO", "Browse", "Browse");
+injectString("nl", "Browse", "Browse");
+injectString("pl", "Browse", "Browse");
+injectString("pt-BR", "Browse", "Browse");
+injectString("pt-PT", "Browse", "Browse");
+injectString("sk-SK", "Browse", "Browse");
+injectString("sv", "Browse", "Browse");
+injectString("th", "Browse", "Browse");
+injectString("tr", "Browse", "Browse");
+injectString("zh-Hans", "Browse", "Browse");
+injectString("zh-TW", "Browse", "Browse");
+injectString("ro-RO", "Browse", "Browse");
+injectString("ar-SA", "Browse", "\u062A\u0635\u0641\u062D");
+injectString("cs", "Upload files.", "Upload files.");
+injectString("da-DK", "Upload files.", "Upload files.");
+injectString("de", "Upload files.", "Upload files.");
+injectString("en", "Upload files.", "Upload files.");
+injectString("es", "Upload files.", "Upload files.");
+injectString("fi-FI", "Upload files.", "Upload files.");
+injectString("fr", "Upload files.", "Upload files.");
+injectString("fr-FR", "Upload files.", "Upload files.");
+injectString("hu-HU", "Upload files.", "Upload files.");
+injectString("id", "Upload files.", "Upload files.");
+injectString("it", "Upload files.", "Upload files.");
+injectString("ja", "Upload files.", "Upload files.");
+injectString("ko-KR", "Upload files.", "Upload files.");
+injectString("ms", "Upload files.", "Upload files.");
+injectString("nb-NO", "Upload files.", "Upload files.");
+injectString("nl", "Upload files.", "Upload files.");
+injectString("pl", "Upload files.", "Upload files.");
+injectString("pt-BR", "Upload files.", "Upload files.");
+injectString("pt-PT", "Upload files.", "Upload files.");
+injectString("sk-SK", "Upload files.", "Upload files.");
+injectString("sv", "Upload files.", "Upload files.");
+injectString("th", "Upload files.", "Upload files.");
+injectString("tr", "Upload files.", "Upload files.");
+injectString("zh-Hans", "Upload files.", "Upload files.");
+injectString("zh-TW", "Upload files.", "Upload files.");
+injectString("ro-RO", "Upload files.", "Upload files.");
+injectString("ar-SA", "Upload files.", "\u0631\u0641\u0639 \u0627\u0644\u0645\u0644\u0641\u0627\u062A.");
+injectString("cs", "Supported Formats:", "Supported Formats:");
+injectString("da-DK", "Supported Formats:", "Supported Formats:");
+injectString("de", "Supported Formats:", "Supported Formats:");
+injectString("en", "Supported Formats:", "Supported Formats:");
+injectString("es", "Supported Formats:", "Supported Formats:");
+injectString("fi-FI", "Supported Formats:", "Supported Formats:");
+injectString("fr", "Supported Formats:", "Supported Formats:");
+injectString("fr-FR", "Supported Formats:", "Supported Formats:");
+injectString("hu-HU", "Supported Formats:", "Supported Formats:");
+injectString("id", "Supported Formats:", "Supported Formats:");
+injectString("it", "Supported Formats:", "Supported Formats:");
+injectString("ja", "Supported Formats:", "Supported Formats:");
+injectString("ko-KR", "Supported Formats:", "Supported Formats:");
+injectString("ms", "Supported Formats:", "Supported Formats:");
+injectString("nb-NO", "Supported Formats:", "Supported Formats:");
+injectString("nl", "Supported Formats:", "Supported Formats:");
+injectString("pl", "Supported Formats:", "Supported Formats:");
+injectString("pt-BR", "Supported Formats:", "Supported Formats:");
+injectString("pt-PT", "Supported Formats:", "Supported Formats:");
+injectString("sk-SK", "Supported Formats:", "Supported Formats:");
+injectString("sv", "Supported Formats:", "Supported Formats:");
+injectString("th", "Supported Formats:", "Supported Formats:");
+injectString("tr", "Supported Formats:", "Supported Formats:");
+injectString("zh-Hans", "Supported Formats:", "Supported Formats:");
+injectString("zh-TW", "Supported Formats:", "Supported Formats:");
+injectString("ro-RO", "Supported Formats:", "Supported Formats:");
+injectString("ar-SA", "Supported Formats:", "\u0627\u0644\u0635\u064A\u063A \u0627\u0644\u0645\u062F\u0639\u0648\u0645\u0629:");
+injectString("cs", "File upload area", "File upload area");
+injectString("da-DK", "File upload area", "File upload area");
+injectString("de", "File upload area", "File upload area");
+injectString("en", "File upload area", "File upload area");
+injectString("es", "File upload area", "File upload area");
+injectString("fi-FI", "File upload area", "File upload area");
+injectString("fr", "File upload area", "File upload area");
+injectString("fr-FR", "File upload area", "File upload area");
+injectString("hu-HU", "File upload area", "File upload area");
+injectString("id", "File upload area", "File upload area");
+injectString("it", "File upload area", "File upload area");
+injectString("ja", "File upload area", "File upload area");
+injectString("ko-KR", "File upload area", "File upload area");
+injectString("ms", "File upload area", "File upload area");
+injectString("nb-NO", "File upload area", "File upload area");
+injectString("nl", "File upload area", "File upload area");
+injectString("pl", "File upload area", "File upload area");
+injectString("pt-BR", "File upload area", "File upload area");
+injectString("pt-PT", "File upload area", "File upload area");
+injectString("sk-SK", "File upload area", "File upload area");
+injectString("sv", "File upload area", "File upload area");
+injectString("th", "File upload area", "File upload area");
+injectString("tr", "File upload area", "File upload area");
+injectString("zh-Hans", "File upload area", "File upload area");
+injectString("zh-TW", "File upload area", "File upload area");
+injectString("ro-RO", "File upload area", "File upload area");
+injectString("ar-SA", "File upload area", "\u0645\u0646\u0637\u0642\u0629 \u0631\u0641\u0639 \u0627\u0644\u0645\u0644\u0641\u0627\u062A");
+const createUploadedFiles = fileList => Array.from(fileList).map(file => ({
+  id: `${Date.now()}-${file.name}-${file.size}`,
+  name: file.name,
+  size: file.size,
+  type: file.type
+}));
+export const FileUpload = ({
+  id,
+  className,
+  size = "large",
+  supportedFormatsText,
+  accept,
+  allowMultiple = true,
+  value = [],
+  isUploading = false,
+  disabled = false,
+  showTemplateSection = true,
+  showUploadedSection = true,
+  templateDownload,
+  onChange
+}) => {
+  const {
+    translate
+  } = useLanguage();
+  const isMobile = useMobile();
+  const [isDragOver, setIsDragOver] = useState(false);
+  const [isDownloading, setIsDownloading] = useState(false);
+  const fileInputRef = useRef(null);
+  const browseButtonRef = useRef(null);
+  const removeButtonRefs = useRef(new Map());
+  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 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];
+    onChange(merged, {
+      action: "add",
+      addedFiles: fileList
+    });
+  }, [onChange, value]);
+  const handleDragOver = useCallback(e => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (!disabled && !isUploading && !hasReachedLimit) {
+      setIsDragOver(true);
+    }
+  }, [disabled, isUploading, hasReachedLimit]);
+  const handleDragLeave = useCallback(e => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragOver(false);
+  }, []);
+  const handleDrop = useCallback(e => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragOver(false);
+    if (!disabled && !isUploading && !hasReachedLimit && 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
+      const fileList = Object.assign(filesArray, {
+        item: index => filesArray[index] || null
+      });
+      handleFilesAdded(fileList);
+    }
+  }, [disabled, isUploading, hasReachedLimit, onChange, handleFilesAdded]);
+  const handleBrowseClick = useCallback(() => {
+    if (!disabled && !isUploading && !hasReachedLimit && fileInputRef.current) {
+      fileInputRef.current.click();
+    }
+  }, [disabled, isUploading, hasReachedLimit]);
+  const handleFileInputChange = useCallback(e => {
+    if (e.target.files && e.target.files.length > 0 && onChange) {
+      handleFilesAdded(e.target.files);
+      // Reset so the same file can be re-selected
+      e.target.value = "";
+    }
+  }, [onChange, handleFilesAdded]);
+  const handleRemoveFile = useCallback((fileId, index) => {
+    if (onChange) {
+      if (value.length <= 1) {
+        // No files will remain — focus the browse/tap button
+        pendingFocusIndexRef.current = -1;
+      } else if (index > 0) {
+        // Focus the previous file's remove button
+        pendingFocusIndexRef.current = index - 1;
+      } else {
+        // Removing first item — focus what will become index 0
+        pendingFocusIndexRef.current = 0;
+      }
+      const filtered = value.filter(f => f.id !== fileId);
+      onChange(filtered, {
+        action: "remove",
+        removedFileId: fileId
+      });
+    }
+  }, [onChange, value]);
+  // Manage focus after file removal
+  useEffect(() => {
+    var _a, _b;
+    if (pendingFocusIndexRef.current === null) {
+      return;
+    }
+    const targetIndex = pendingFocusIndexRef.current;
+    pendingFocusIndexRef.current = null;
+    if (targetIndex === -1) {
+      // No files left — focus the browse/tap button
+      (_a = browseButtonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    } else {
+      (_b = removeButtonRefs.current.get(targetIndex)) === null || _b === void 0 ? void 0 : _b.focus();
+    }
+  }, [value]);
+  const handleTemplateDownload = useCallback(async () => {
+    if (templateDownload === null || templateDownload === void 0 ? void 0 : templateDownload.onDownload) {
+      setIsDownloading(true);
+      try {
+        await templateDownload.onDownload();
+      } finally {
+        setIsDownloading(false);
+      }
+    }
+  }, [templateDownload]);
+  // Generate accessible description
+  const dropZoneDescriptionId = `${id}-description`;
+  const acceptedFormats = supportedFormatsText || accept || "";
+  const uploadMethodDescription = isMobile ? translate("Tap to add files") : `${translate("Drag & drop files or")} ${translate("Browse")}`;
+  return _jsxs("div", {
+    id: id,
+    className: classes,
+    children: [_jsx("div", {
+      id: dropZoneDescriptionId,
+      className: "zen-visually-hidden",
+      children: `${translate("Upload files.")}${acceptedFormats ? ` ${translate("Supported Formats:")} ${acceptedFormats}.` : ""} ${uploadMethodDescription}`
+    }), _jsx("input", {
+      ref: fileInputRef,
+      type: "file",
+      accept: accept,
+      multiple: allowMultiple,
+      onChange: handleFileInputChange,
+      className: "zen-visually-hidden",
+      disabled: isInteractionDisabled,
+      "aria-hidden": "true"
+    }), _jsx("div", {
+      className: dropZoneClasses,
+      onDragOver: handleDragOver,
+      onDragLeave: handleDragLeave,
+      onDrop: handleDrop,
+      onClick: handleBrowseClick,
+      role: "region",
+      "aria-label": translate("File upload area"),
+      "aria-describedby": dropZoneDescriptionId,
+      "aria-disabled": isInteractionDisabled,
+      children: _jsx(DropZoneContent, {
+        size: size,
+        isMobile: isMobile,
+        supportedFormatsText: supportedFormatsText,
+        acceptedFormats: acceptedFormats,
+        uploadMethodDescription: uploadMethodDescription,
+        disabled: isUploadDisabled,
+        isUploading: isUploading,
+        handleBrowseClick: handleBrowseClick,
+        translate: translate,
+        browseButtonRef: browseButtonRef
+      })
+    }), showTemplateSection && templateDownload && _jsx(TemplateDownloadSection, {
+      templateDownload: templateDownload,
+      disabled: disabled,
+      isUploading: isUploading,
+      isDownloading: isDownloading,
+      handleTemplateDownload: handleTemplateDownload,
+      translate: translate
+    }), showUploadedSection && value.length > 0 && _jsx(UploadedFilesSection, {
+      id: id,
+      uploadedFiles: value,
+      disabled: disabled,
+      isUploading: isUploading,
+      handleRemoveFile: handleRemoveFile,
+      translate: translate,
+      removeButtonRefs: removeButtonRefs
+    }), _jsx(Waiting, {
+      isLoading: isUploading,
+      delay: 0,
+      hideOverlay: false
+    })]
+  });
+};
+FileUpload.displayName = "FileUpload";

package/esm/fileUpload/fileUploadType.d.ts

@@ -0,0 +1,33 @@
+import { IZenComponentProps } from "../commonHelpers/zenComponent";
+export interface IUploadedFile {
+    id: string;
+    name: string;
+    size?: number;
+    type?: string;
+    hasError?: boolean;
+    errorMessage?: string;
+}
+export interface ITemplateDownload {
+    title: string;
+    description: string;
+    onDownload: () => void | Promise<void>;
+}
+export interface IFileUploadMeta {
+    action: "add" | "remove";
+    addedFiles?: FileList;
+    removedFileId?: string;
+}
+export interface IFileUpload extends IZenComponentProps {
+    id: string;
+    size?: "large" | "condensed";
+    supportedFormatsText?: string;
+    accept?: string;
+    allowMultiple?: boolean;
+    value?: IUploadedFile[];
+    isUploading?: boolean;
+    disabled?: boolean;
+    showTemplateSection?: boolean;
+    showUploadedSection?: boolean;
+    templateDownload?: ITemplateDownload;
+    onChange?: (files: IUploadedFile[], meta?: IFileUploadMeta) => void;
+}

package/esm/fileUpload/fileUploadType.js

@@ -0,0 +1 @@
+export {};

package/esm/filterButton/filterButton.js

@@ -26,16 +26,16 @@ export const FilterButton = (_a) => {
     const isMobile = useMobile();
     const hasQuantity = typeof quantity === "number";
     const isLargeNumber = hasQuantity && quantity > 99;
-    const onClickEvent = useMemo(() => onClick
-        ? (e) => onClick(e.nativeEvent)
-        : () => { }, [onClick]);
-    const inlineStyle = useMemo(() => maxWidth || minWidth ? { style: Object.assign(Object.assign({}, (maxWidth ? { maxWidth: `${maxWidth}px` } : {})), (minWidth ? { minWidth: `${minWidth}px` } : {})) } : {}, [maxWidth, minWidth]);
-    return _jsxs(Button, Object.assign({ id: id, name: name, onBlur: onBlur, title: title, disabled: disabled, type: type, className: classNames([
+    const onClickEvent = useMemo(() => (onClick ? (e) => onClick(e.nativeEvent) : () => { }), [onClick]);
+    const inlineStyle = useMemo(() => maxWidth || minWidth
+        ? { style: Object.assign(Object.assign({}, (maxWidth ? { maxWidth: `${maxWidth}px` } : {})), (minWidth ? { minWidth: `${minWidth}px` } : {})) }
+        : {}, [maxWidth, minWidth]);
+    return (_jsxs(Button, Object.assign({ id: id, name: name, onBlur: onBlur, title: title, disabled: disabled, type: type, className: classNames([
             "zen-filter-button",
             mobileComponentClass || driveComponentClass || "",
             `zen-filter-button--${type}`,
             className || "",
             isActive ? "zen-filter-button--active" : "",
             fullWidth ? "zen-filter-button--full-width" : ""
-        ]), onClick: onClickEvent, onMouseOver: onMouseOver, onMouseOut: onMouseOut, ref: ref, htmlType: "button", "aria-label": ariaLabel }, inlineStyle, other, { children: [children ? _jsx("div", { className: classNames(["zen-filter-button__label", "zen-ellipsis", fullWidth ? "zen-filter-button__label--full-width" : ""]), children: children }) : null, _jsxs("div", { className: "zen-filter-button__tags", children: [hasQuantity ? _jsx("div", { className: "zen-filter-button__quantity", children: isLargeNumber ? "99+" : quantity }) : null, _jsx("div", { className: "zen-filter-button__icon", children: _jsx(IconChevronDownSmall, { size: isDrive || isMobile ? "huge" : "large" }) })] })] }));
+        ]), onClick: onClickEvent, onMouseOver: onMouseOver, onMouseOut: onMouseOut, ref: ref, htmlType: "button", "aria-label": ariaLabel }, inlineStyle, other, { children: [children ? (_jsx("div", { className: classNames(["zen-filter-button__label", "zen-ellipsis", fullWidth ? "zen-filter-button__label--full-width" : ""]), children: children })) : null, _jsxs("div", { className: "zen-filter-button__tags", children: [hasQuantity ? _jsx("div", { className: "zen-filter-button__quantity", children: isLargeNumber ? "99+" : quantity }) : null, _jsx("div", { className: "zen-filter-button__icon", children: _jsx(IconChevronDownSmall, { size: isDrive || isMobile ? "huge" : "large" }) })] })] })));
 };

package/esm/filters/components/filtersChip.js

@@ -22,7 +22,7 @@ export const FiltersChipDisplayName = "FiltersChip";
 export const FiltersChipInner = (_a) => {
     var { className, name, state, onChange: onChangeState, id } = _a, componentProps = __rest(_a, ["className", "name", "state", "onChange", "id"]);
     const chipStatus = useChipStatus();
-    const component = useMemo(() => _jsx(Chip, Object.assign({ id: id }, componentProps, { className: classNames(["zen-filters-chip", className || ""]), active: state, status: state ? chipStatus || undefined : undefined, onChange: () => onChangeState(!state), children: name })), [id, componentProps, className, state, chipStatus, name, onChangeState]);
+    const component = useMemo(() => (_jsx(Chip, Object.assign({ id: id }, componentProps, { className: classNames(["zen-filters-chip", className || ""]), active: state, status: state ? chipStatus || undefined : undefined, onChange: () => onChangeState(!state), children: name }))), [id, componentProps, className, state, chipStatus, name, onChangeState]);
     return component;
 };
 export const FiltersChip = (_a) => {
@@ -30,7 +30,7 @@ export const FiltersChip = (_a) => {
     const isSidePanelView = useFiltersSidePanel();
     const component = useMemo(() => _createElement(FiltersChipInner, Object.assign({}, props, { key: `key_${props.id}` })), [props]);
     if (isSidePanelView) {
-        return _jsx(FiltersSidePanelItemWrapper, { name: props.name, children: _jsx(FiltersSidePanelChip, { id: props.id, currentState: props.state, handleStateChange: props.onChange, children: props.name }, `key_${props.id}-side-panel`) });
+        return (_jsx(FiltersSidePanelItemWrapper, { name: props.name, children: _jsx(FiltersSidePanelChip, { id: props.id, currentState: props.state, handleStateChange: props.onChange, children: props.name }, `key_${props.id}-side-panel`) }));
     }
     return component;
 };

package/esm/filters/components/filtersContainer.js

@@ -38,6 +38,7 @@ injectString("tr", "All Filters", "T\xFCm Filtreler");
 injectString("zh-Hans", "All Filters", "\u6240\u6709\u7B5B\u9009\u5668");
 injectString("zh-TW", "All Filters", "\u6240\u6709\u7BE9\u9078\u5668");
 injectString("ro-RO", "All Filters", "Toate filtrele");
+injectString("ar-SA", "All Filters", "\u062C\u0645\u064A\u0639 \u0627\u0644\u062A\u0635\u0641\u064A\u0627\u062A");
 injectString("cs", "Clear", "Vymazat");
 injectString("da-DK", "Clear", "Ryd");
 injectString("de", "Clear", "L\xF6schen");
@@ -64,6 +65,7 @@ injectString("tr", "Clear", "Temizle");
 injectString("zh-Hans", "Clear", "\u6E05\u9664");
 injectString("zh-TW", "Clear", "\u6E05\u9664");
 injectString("ro-RO", "Clear", "\u0218terge\u021Bi");
+injectString("ar-SA", "Clear", "\u0645\u0633\u062D");
 export const FiltersContainer = ({
   className,
   isPinned = false,

package/esm/filters/components/filtersCustomProvider.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useContext } from "react";
 export const FiltersCustomContext = createContext(undefined);
-export const FiltersCustomProvider = ({ state, onChange, children }) => (_jsx(FiltersCustomContext.Provider, { value: { state, onChange: onChange }, children: children }));
+export const FiltersCustomProvider = ({ state, onChange, children }) => _jsx(FiltersCustomContext.Provider, { value: { state, onChange: onChange }, children: children });
 export const useFiltersCustom = () => {
     const context = useContext(FiltersCustomContext);
     if (!context) {

package/esm/filters/components/filtersDateInput.js

@@ -26,9 +26,13 @@ const FiltersDateInputInner = (_a) => {
 export const FiltersDateInput = (_a) => {
     var props = __rest(_a, []);
     const isSidePanelView = useFiltersSidePanel();
-    const component = useMemo(() => _createElement(FiltersDateInputInner, Object.assign({}, props, { className: classNames(["zen-filters-date-input", props.className || ""]), key: `key_${props.id}` })), [props]);
+    const component = useMemo(() => (_createElement(FiltersDateInputInner, Object.assign({}, props, { className: classNames(["zen-filters-date-input", props.className || ""]), key: `key_${props.id}` }))), [props]);
     if (isSidePanelView) {
-        return (_jsx(FiltersSidePanelItemWrapper, { name: props.name, children: _createElement(DateInputRaw, Object.assign({}, props, { id: `${props.id}-side-panel`, key: `key_${props.id}-side-panel`, classNamePopup: classNames([props.classNamePopup || "", "zen-side-panel-filters__date-popup--full-width"]), className: classNames(["zen-side-panel-filters__item-element", "zen-side-panel-filters__item-element--centred", props.className || ""]), buttonLabel: props.name, value: props.state, onChange: props.onChange, defaultValue: props.defaultState, chip: false })) }));
+        return (_jsx(FiltersSidePanelItemWrapper, { name: props.name, children: _createElement(DateInputRaw, Object.assign({}, props, { id: `${props.id}-side-panel`, key: `key_${props.id}-side-panel`, classNamePopup: classNames([props.classNamePopup || "", "zen-side-panel-filters__date-popup--full-width"]), className: classNames([
+                    "zen-side-panel-filters__item-element",
+                    "zen-side-panel-filters__item-element--centred",
+                    props.className || ""
+                ]), buttonLabel: props.name, value: props.state, onChange: props.onChange, defaultValue: props.defaultState, chip: false })) }));
     }
     return component;
 };

package/esm/filters/components/filtersDropdown.js

@@ -35,8 +35,22 @@ function FiltersDropdownInner(_a) {
                 const preparedValue = prepareValue(newValue);
                 onChangeState(preparedValue);
             }, multiselect: dropdownStateType === "fullSelection" || dropdownStateType === "fullSelectionWithCheckbox" ? true : restDropdownProps.multiselect, selectAllButton: dropdownStateType === "fullSelection" || dropdownStateType === "fullSelectionWithCheckbox" ? true : restDropdownProps.selectAllButton, fetchState: fetchState, dataItems: dataItems, isLoading: dataItems !== undefined ? isLoading : undefined, errorHandler: () => { }, placeholder: restDropdownProps.placeholder || name, defaultValue: memoizedDefaultState, className: classNames(["zen-filters-dropdown", className || ""]), classNamePopup: classNames(["zen-filters-dropdown-popup", classNamePopup || ""]), chip: true, chipId: id, chipName: name, chipIcon: chipIcon || IconFilter });
-        return _jsx(DropdownRaw, Object.assign({}, dropdownPropsForComponent));
-    }, [restDropdownProps, state, dropdownStateType, fetchState, dataItems, isLoading, name, memoizedDefaultState, className, classNamePopup, id, chipIcon, onChangeState]);
+        return (_jsx(DropdownRaw, Object.assign({}, dropdownPropsForComponent)));
+    }, [
+        restDropdownProps,
+        state,
+        dropdownStateType,
+        fetchState,
+        dataItems,
+        isLoading,
+        name,
+        memoizedDefaultState,
+        className,
+        classNamePopup,
+        id,
+        chipIcon,
+        onChangeState
+    ]);
     return component;
 }
 export function FiltersDropdown(_a) {

package/esm/filters/components/filtersEmptyState.js

@@ -3,12 +3,60 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useLanguage } from "../../utils/localization/useLanguage";
 import { ImageLooking } from "../../images/imageLooking";
 import { EmptyState } from "../../emptyState/emptyState";
+injectString("cs", "Selected filters will appear here.", "Selected filters will appear here.");
+injectString("da-DK", "Selected filters will appear here.", "Selected filters will appear here.");
+injectString("de", "Selected filters will appear here.", "Selected filters will appear here.");
 injectString("en", "Selected filters will appear here.", "Selected filters will appear here.");
+injectString("es", "Selected filters will appear here.", "Selected filters will appear here.");
+injectString("fi-FI", "Selected filters will appear here.", "Selected filters will appear here.");
+injectString("fr", "Selected filters will appear here.", "Selected filters will appear here.");
+injectString("fr-FR", "Selected filters will appear here.", "Selected filters will appear here.");
+injectString("hu-HU", "Selected filters will appear here.", "Selected filters will appear here.");
+injectString("id", "Selected filters will appear here.", "Selected filters will appear here.");
+injectString("it", "Selected filters will appear here.", "Selected filters will appear here.");
+injectString("ja", "Selected filters will appear here.", "Selected filters will appear here.");
+injectString("ko-KR", "Selected filters will appear here.", "Selected filters will appear here.");
+injectString("ms", "Selected filters will appear here.", "Selected filters will appear here.");
+injectString("nb-NO", "Selected filters will appear here.", "Selected filters will appear here.");
+injectString("nl", "Selected filters will appear here.", "Selected filters will appear here.");
+injectString("pl", "Selected filters will appear here.", "Selected filters will appear here.");
+injectString("pt-BR", "Selected filters will appear here.", "Selected filters will appear here.");
 injectString("pt-PT", "Selected filters will appear here.", "Os filtros selecionados aparecer\xE3o aqui.");
+injectString("sk-SK", "Selected filters will appear here.", "Selected filters will appear here.");
+injectString("sv", "Selected filters will appear here.", "Selected filters will appear here.");
+injectString("th", "Selected filters will appear here.", "Selected filters will appear here.");
+injectString("tr", "Selected filters will appear here.", "Selected filters will appear here.");
+injectString("zh-Hans", "Selected filters will appear here.", "Selected filters will appear here.");
+injectString("zh-TW", "Selected filters will appear here.", "Selected filters will appear here.");
 injectString("ro-RO", "Selected filters will appear here.", "Filtrele selectate vor ap\u0103rea aici.");
+injectString("ar-SA", "Selected filters will appear here.", "\u0633\u062A\u0638\u0647\u0631 \u0627\u0644\u062A\u0635\u0641\u064A\u0627\u062A \u0627\u0644\u0645\u062D\u062F\u062F\u0629 \u0647\u0646\u0627.");
+injectString("cs", "No Filters Selected", "No Filters Selected");
+injectString("da-DK", "No Filters Selected", "No Filters Selected");
+injectString("de", "No Filters Selected", "No Filters Selected");
 injectString("en", "No Filters Selected", "No Filters Selected");
+injectString("es", "No Filters Selected", "No Filters Selected");
+injectString("fi-FI", "No Filters Selected", "No Filters Selected");
+injectString("fr", "No Filters Selected", "No Filters Selected");
+injectString("fr-FR", "No Filters Selected", "No Filters Selected");
+injectString("hu-HU", "No Filters Selected", "No Filters Selected");
+injectString("id", "No Filters Selected", "No Filters Selected");
+injectString("it", "No Filters Selected", "No Filters Selected");
+injectString("ja", "No Filters Selected", "No Filters Selected");
+injectString("ko-KR", "No Filters Selected", "No Filters Selected");
+injectString("ms", "No Filters Selected", "No Filters Selected");
+injectString("nb-NO", "No Filters Selected", "No Filters Selected");
+injectString("nl", "No Filters Selected", "No Filters Selected");
+injectString("pl", "No Filters Selected", "No Filters Selected");
+injectString("pt-BR", "No Filters Selected", "No Filters Selected");
 injectString("pt-PT", "No Filters Selected", "Nenhum filtro selecionado");
+injectString("sk-SK", "No Filters Selected", "No Filters Selected");
+injectString("sv", "No Filters Selected", "No Filters Selected");
+injectString("th", "No Filters Selected", "No Filters Selected");
+injectString("tr", "No Filters Selected", "No Filters Selected");
+injectString("zh-Hans", "No Filters Selected", "No Filters Selected");
+injectString("zh-TW", "No Filters Selected", "No Filters Selected");
 injectString("ro-RO", "No Filters Selected", "Nu exist\u0103 filtre selectate");
+injectString("ar-SA", "No Filters Selected", "\u0644\u0645 \u064A\u062A\u0645 \u062A\u062D\u062F\u064A\u062F \u062A\u0635\u0641\u064A\u0627\u062A");
 export const FiltersEmptyState = () => {
   const {
     translate