impact-ui 4.0.0-alpha.2 → 4.0.0-alpha.21

package/dist/components/FileUpload/index.js

@@ -1,11 +1,15 @@
+!function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode(".ia-fileUpload-container{align-items:stretch;background-color:#fff;border-radius:16px;box-shadow:0 0 16px 2px #0000000f;display:flex;flex-direction:column;gap:16px;min-height:274px;padding:16px;width:550px}.ia-fileUpload-container .ia-fileUpload-container-header{align-items:center;display:flex;justify-content:space-between}.ia-fileUpload-container .ia-fileUpload-container-header .ia-fileUpload-container-header-title{display:flex;flex-direction:column;gap:2px}.ia-fileUpload-container .ia-fileUpload-container-header .ia-fileUpload-container-header-title .ia-fileUpload-container-header-title-primary{color:#0d152c;font-family:Manrope,sans-serif;font-size:16px;font-weight:800;line-height:24px}.ia-fileUpload-container .ia-fileUpload-container-header .ia-fileUpload-container-header-title .ia-fileUpload-container-header-title-secondary{color:#7a8294;font-family:Manrope,sans-serif;font-size:14px;font-weight:500;line-height:20px}.ia-fileUpload-container .ia-fileUpload-container-header .ia-fileUpload-container-header-closeIcon{color:#60697d;cursor:pointer}.ia-fileUpload{align-items:center;background-color:initial;background-position:50% 24px;background-repeat:no-repeat;background-size:55px;border:1px dashed #b3bdf8;border-radius:8px;display:flex;flex-direction:column;gap:8px;height:148px;justify-content:flex-end;margin:auto;padding:24px 16px;position:relative;width:100%}.ia-fileUpload input{height:calc(2px + 100%);left:-1px;opacity:0;position:absolute;top:-1px;width:calc(2px + 100%)}.ia-fileUpload .ia-fileUpload-label{color:#1f2b4d;font-size:14px;font-weight:500;line-height:20px;text-align:center}.ia-fileUpload.ia-fileUpload-error{background-position:50% 24px;background-size:55px;border:1px solid #e15554;box-shadow:inset 0 0 20px #e155541f}.ia-fileUpload.ia-fileUpload-error .ia-fileUpload-label{color:#e15554}.ia-fileUpload.ia-fileUpload-disabled{opacity:.5;pointer-events:none}.ia-fileUpload.ia-fileUpload-dragOver{background:none;border:1px solid #4259ee;box-shadow:inset 0 0 96px 23px #4259ee24;justify-content:center}.ia-fileUpload.ia-fileUpload-dragOver .ia-fileUpload-dragOverLabel{color:#1f2b4d;font-family:Manrope,sans-serif;font-size:14px;font-weight:700;line-height:21px}.ia-fileUpload .ia-fileUpload-label-secondary{color:#7a8294;font-size:12px;font-weight:500;line-height:16px;text-align:center}.ia-fileUpload .ia-fileUpload-label-primary,.ia-fileUpload-validFileType{align-items:center;display:flex;gap:4px}.ia-fileUpload-validFileType{color:#60697d;font-size:14px;font-weight:500;height:16px;line-height:16.1px}.ia-fileUpload-validFileType .ia-fileUpload-validFileType-container{position:relative}.ia-fileUpload-validFileType .ia-fileUpload-validFileType-container .ia-fileUpload-validFileType-arrow{cursor:pointer;height:11px;margin-top:2px;width:11px}.ia-fileUpload-validFileType .ia-fileUpload-validFileType-container .ia-fileUpload-validFileType-arrow.rotate{transform:rotate(180deg)}.ia-fileUpload-validFileType .ia-fileUpload-validFileType-menu{background-color:#fff;border-radius:8px;bottom:32px;box-shadow:0 0 4px #0000001f;display:flex;flex-direction:column;gap:5px;left:0;padding-bottom:16px;padding-top:16px;position:absolute;width:100px;z-index:99}.ia-fileUpload-validFileType .ia-fileUpload-validFileType-menu .ia-fileUpload-validFileType-menu-item{align-items:center;color:#1f2b4d;cursor:pointer;display:flex;font-size:14px;font-weight:500;height:25px;line-height:20px;padding-left:18px;text-align:left}.ia-fileUpload-validFileType .ia-fileUpload-validFileType-menu .ia-fileUpload-validFileType-menu-item:hover{background-color:#f5f6fa}.ia-fileUpload-previewItem{align-items:stretch;border:1px solid #e7e7e7;border-radius:12px;display:flex;flex-direction:column;gap:8px;justify-content:space-between;padding:16px}.ia-fileUpload-previewItem img{max-height:36px;max-width:36px}.ia-fileUpload-previewItem .ia-fileUpload-previewItem-exceptProgress{display:flex;gap:8px;justify-content:space-between;z-index:99}.ia-fileUpload-previewItem .ia-fileUpload-previewItem-exceptProgress .ia-fileUpload-previewItem-details{display:flex;gap:8px}.ia-fileUpload-previewItem .ia-fileUpload-previewItem-exceptProgress .ia-fileUpload-previewItem-details .ia-fileUpload-previewItemIcon{background-repeat:no-repeat;height:36px;width:36px}.ia-fileUpload-previewItem .ia-fileUpload-previewItem-exceptProgress .ia-fileUpload-previewItem-details .ia-fileUpload-previewItem-info{display:flex;flex-direction:column;gap:2px;justify-content:space-between}.ia-fileUpload-previewItem .ia-fileUpload-previewItem-exceptProgress .ia-fileUpload-previewItem-details .ia-fileUpload-previewItem-info .ia-fileUpload-previewItem-name{color:#0b0b0b;font-size:12px;font-weight:700;line-height:18px}.ia-fileUpload-previewItem .ia-fileUpload-previewItem-exceptProgress .ia-fileUpload-previewItem-details .ia-fileUpload-previewItem-info .ia-fileUpload-previewItem-name.ia-fileUpload-previewItem-name-failed{color:#7a8294}.ia-fileUpload-previewItem .ia-fileUpload-previewItem-exceptProgress .ia-fileUpload-previewItem-details .ia-fileUpload-previewItem-info .ia-fileUpload-previewItem-size{color:#6d6d6d;font-size:12px;font-weight:500;line-height:16px}.ia-fileUpload-previewItem .ia-fileUpload-previewItem-exceptProgress .ia-fileUpload-previewItem-details .ia-fileUpload-previewItem-info .ia-fileUpload-previewItem-size.uploadFailed{color:#e15554}.ia-fileUpload-previewItem .ia-fileUpload-previewItem-exceptProgress .ia-fileUpload-previewItem-details .ia-fileUpload-previewItem-info .ia-fileUpload-previewItem-size.uploading{color:#0000}.ia-fileUpload-previewItem .ia-fileUpload-previewItem-exceptProgress .ia-fileUpload-previewItem-details .ia-fileUpload-previewItem-info .ia-fileUpload-previewItem-size.disabled{color:#7a8294}.ia-fileUpload-previewItem .ia-fileUpload-previewItem-exceptProgress .ia-fileUpload-previewItem-actions{align-items:center;display:flex;gap:14px}.ia-fileUpload-previewItem .ia-fileUpload-previewItem-exceptProgress .ia-fileUpload-previewItem-actions .ia-fileUpload-previewItem-action{color:#4259ee;cursor:pointer}.ia-fileUpload-previewItem .ia-fileUpload-previewItem-exceptProgress .ia-fileUpload-previewItem-actions .ia-fileUpload-previewItem-action.removeIcon{color:#60697d}.ia-fileUpload-previewItem .ia-fileUpload-progress .progressbar_layout{margin:0}.ia-fileUpload-previewItem .ia-fileUpload-progress .progressbar_label_container{margin:-24px 0 8px}.ia-fileUpload-actions{display:flex;gap:16px;justify-content:flex-end}.ia-fileUpload-validFileType-menu .MuiPaper-root{min-width:226px}.ia-fileUpload-validFileType-menu .MuiPaper-root .ia-btn-icon{margin-bottom:0}.ia-template-preview{background-color:#f5f6fa;border-radius:8px;box-shadow:0 0 16px 2px #0000000f;padding:12px}.ia-template-preview .ia-template-preview__title{color:#0d152c;font-size:14px;font-weight:800;line-height:21px;margin:0 0 10px}.ia-template-preview .ia-template-preview__grid-wrapper{border:1px solid #d9dde7;border-radius:4px;overflow-x:auto}.ia-template-preview .ia-template-preview__table{background-color:#fff;border-collapse:collapse;table-layout:fixed;width:100%}.ia-template-preview .ia-template-preview__table td,.ia-template-preview .ia-template-preview__table th{border:1px solid #d9dde7;font-size:12px;line-height:20px;padding:0;text-align:center}.ia-template-preview .ia-template-preview__col-header,.ia-template-preview .ia-template-preview__row-header{background-color:#f3f4f6;color:#6b7280;font-size:12px;font-weight:500}.ia-template-preview .ia-template-preview__row-header{max-width:28px;min-width:28px!important;width:28px}.ia-template-preview .ia-template-preview__cell{background-color:#fff}.ia-template-preview .ia-template-preview__cell-value{color:#0d152c;font-size:12px;font-weight:600;overflow:hidden;padding-inline:2px;text-overflow:ellipsis;white-space:nowrap}")),document.head.appendChild(e)}}catch(i){console.error("vite-plugin-css-injected-by-js",i)}}();
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { useRef, useState, useEffect, useCallback, useMemo } from "react";
 import default_1 from "../../node_modules/@mui/icons-material/Clear.js";
 import { Button } from "../Button/index.js";
+import { Menu } from "../Menu/index.js";
 import { ProgressBar } from "../ProgressBar/index.js";
 import { FILE_TYPE_MIME_MAP, SIZE_CONVENTIONS } from "./FileUpload.types.js";
 import { loadFileUploadAssets } from "./fileUploadAssets.loader.js";
-/* empty css                       */
+import { TemplatePreview } from "./TemplatePreview.js";
+import { useFileUploadTemplateState } from "./useFileUploadTemplateState.js";
+
 function FileUpload({
   fileList,
   onFileListChange,
@@ -20,8 +24,15 @@ function FileUpload({
   secondaryButtonProps,
   onClose,
   customFailedActionButton,
+  options: templateColumnOptions,
+  selectedValues: templateColumnSelections,
+  onMenuPrimaryButtonClick: onTemplateMenuPrimaryClick,
+  onTertiaryButtonClick: onTemplateMenuTertiaryClick,
   className,
-  "data-testid": dataTestId
+  id,
+  "data-testid": dataTestId,
+  "aria-label": ariaLabel = "File upload",
+  role = "region"
 }) {
   var _a;
   const wrapperRef = useRef(null);
@@ -31,7 +42,22 @@ function FileUpload({
   const [isError, setIsError] = useState(false);
   const [isDraggedOver, setIsDraggedOver] = useState(false);
   const [showDownLoadMenu, setShowDownLoadMenu] = useState(false);
+  const [isOpen, setIsOpen] = useState(false);
+  const [anchorEl, setAnchorEl] = useState(null);
   const numberOfFiles = numFiles >= 1 ? Math.floor(numFiles) : 1;
+  const {
+    selected,
+    hasTemplateOptions,
+    menuOptions,
+    handleMenuSelectionChange,
+    handleMenuPrimaryClick,
+    handleMenuTertiaryClick
+  } = useFileUploadTemplateState({
+    options: templateColumnOptions,
+    selectedValues: templateColumnSelections,
+    onMenuPrimaryButtonClick: onTemplateMenuPrimaryClick,
+    onTertiaryButtonClick: onTemplateMenuTertiaryClick
+  });
   const [assets, setAssets] = useState(null);
   useEffect(() => {
     void loadFileUploadAssets().then(setAssets);
@@ -125,6 +151,17 @@ function FileUpload({
     if (!Array.isArray(validFileTypes)) return null;
     return validFileTypes.find((vft) => vft.templateDownloader) ?? null;
   }, [validFileTypes]);
+  const selectedFileType = useMemo(() => {
+    var _a2, _b;
+    return ((_a2 = validFileTypes.find((vft) => vft.fileType === "xlsx")) == null ? void 0 : _a2.fileType) ?? ((_b = validFileTypes[0]) == null ? void 0 : _b.fileType) ?? "xlsx";
+  }, [validFileTypes]);
+  const tertiaryFileType = useMemo(() => {
+    var _a2;
+    return (_a2 = validFileTypes.find((vft) => vft.fileType !== "xlsx")) == null ? void 0 : _a2.fileType;
+  }, [validFileTypes]);
+  const handleMenuClose = useCallback(() => {
+    setIsOpen(false);
+  }, []);
   const handleTemplateDownloadMenu = useCallback(() => {
     setShowDownLoadMenu((prev) => !prev);
   }, []);
@@ -132,22 +169,41 @@ function FileUpload({
     const target = event.target;
     if (!target.closest(".ia-fileUpload-validFileType-container") && !target.closest(".ia-fileUpload-validFileType-menu-item")) {
       setShowDownLoadMenu(false);
+      setIsOpen(false);
     }
   }, []);
   useEffect(() => {
+    const handleEscape = (event) => {
+      if (event.key === "Escape") {
+        setShowDownLoadMenu(false);
+      }
+    };
     if (showDownLoadMenu) {
       document.addEventListener("click", handleClickOutside);
+      document.addEventListener("keydown", handleEscape);
     }
     return () => {
       document.removeEventListener("click", handleClickOutside);
+      document.removeEventListener("keydown", handleEscape);
     };
   }, [showDownLoadMenu, handleClickOutside]);
+  useEffect(() => {
+    if (isOpen) {
+      document.addEventListener("click", handleClickOutside);
+    }
+    return () => {
+      document.removeEventListener("click", handleClickOutside);
+    };
+  }, [isOpen, handleClickOutside]);
   return /* @__PURE__ */ jsxs(
     "div",
     {
       ref: containerRef,
+      "aria-label": ariaLabel,
       className: `ia-fileUpload-container ${className ?? ""}`.trim(),
       "data-testid": dataTestId,
+      id,
+      role,
       children: [
         /* @__PURE__ */ jsxs("div", { className: "ia-fileUpload-container-header", children: [
           /* @__PURE__ */ jsxs("div", { className: "ia-fileUpload-container-header-title", children: [
@@ -245,15 +301,27 @@ function FileUpload({
             /* @__PURE__ */ jsxs(
               "div",
               {
+                "aria-expanded": validFileTypes.length > 1 || templateColumnOptions ? showDownLoadMenu || isOpen : void 0,
+                "aria-haspopup": validFileTypes.length > 1 || templateColumnOptions ? "menu" : void 0,
+                "aria-label": "Download template",
                 role: "button",
                 style: { display: "flex", alignItems: "center", gap: "4px" },
                 tabIndex: 0,
-                onClick: validFileTypes.length > 1 ? handleTemplateDownloadMenu : templateDownloader.templateDownloader,
+                onClick: (e) => {
+                  var _a2;
+                  setIsOpen(true);
+                  setAnchorEl(e.currentTarget);
+                  if (validFileTypes.length > 1 || templateColumnOptions) {
+                    handleTemplateDownloadMenu();
+                  } else {
+                    (_a2 = templateDownloader.templateDownloader) == null ? void 0 : _a2.call(templateDownloader);
+                  }
+                },
                 onKeyDown: (e) => {
                   var _a2;
                   if (e.key === "Enter" || e.key === " ") {
                     e.preventDefault();
-                    if (validFileTypes.length > 1) {
+                    if (validFileTypes.length > 1 || templateColumnOptions) {
                       handleTemplateDownloadMenu();
                     } else {
                       (_a2 = templateDownloader.templateDownloader) == null ? void 0 : _a2.call(templateDownloader);
@@ -261,33 +329,69 @@ function FileUpload({
                   }
                 },
                 children: [
-                  /* @__PURE__ */ jsx(Button, { "data-fileUpload": "templateDownload", variant: "url", children: "Download template" }),
+                  /* @__PURE__ */ jsx(Button, { "data-fileUpload": "templateDownload", tabIndex: -1, variant: "url", children: "Download template" }),
                   assets && /* @__PURE__ */ jsx(
                     "img",
                     {
                       alt: "",
-                      className: `ia-fileUpload-validFileType-arrow ${validFileTypes.length > 1 && showDownLoadMenu ? "rotate" : ""}`,
-                      src: validFileTypes.length > 1 ? assets.downArrow : assets.uploadDownloadIcon
+                      "aria-hidden": "true",
+                      className: `ia-fileUpload-validFileType-arrow ${(validFileTypes.length > 1 || templateColumnOptions) && showDownLoadMenu ? "rotate" : ""}`,
+                      src: validFileTypes.length > 1 || templateColumnOptions ? assets.downArrow : assets.uploadDownloadIcon
+                    }
+                  ),
+                  templateColumnOptions && isOpen && /* @__PURE__ */ jsx(
+                    Menu,
+                    {
+                      withActionButtons: true,
+                      withCheckbox: true,
+                      anchorEl,
+                      customHeaderProps: {
+                        onSelectionChange: handleMenuSelectionChange,
+                        selectedItems: selected
+                      },
+                      iconPlacement: "left",
+                      menuContainerClassName: "ia-fileUpload-validFileType-menu",
+                      MenuProps: {
+                        anchorOrigin: {
+                          vertical: "top",
+                          horizontal: "left"
+                        },
+                        transformOrigin: {
+                          vertical: "bottom",
+                          horizontal: "left"
+                        }
+                      },
+                      open: isOpen,
+                      options: menuOptions,
+                      primaryButtonProps: { label: selectedFileType },
+                      tertiaryButtonLabel: tertiaryFileType,
+                      onClose: handleMenuClose,
+                      onPrimaryButtonClick: () => {
+                        handleMenuPrimaryClick(selectedFileType);
+                      },
+                      onTertiaryButtonClick: handleMenuTertiaryClick
                     }
                   )
                 ]
               }
             ),
-            showDownLoadMenu && /* @__PURE__ */ jsx("div", { className: "ia-fileUpload-validFileType-menu", children: validFileTypes.map((vft) => /* @__PURE__ */ jsx(
+            showDownLoadMenu && !templateColumnOptions && /* @__PURE__ */ jsx("div", { className: "ia-fileUpload-validFileType-menu", role: "menu", children: validFileTypes.map((vft) => /* @__PURE__ */ jsx(
               "span",
               {
                 className: "ia-fileUpload-validFileType-menu-item",
-                role: "button",
+                role: "menuitem",
                 tabIndex: 0,
                 onClick: () => {
                   var _a2;
-                  return (_a2 = vft.templateDownloader) == null ? void 0 : _a2.call(vft);
+                  (_a2 = vft.templateDownloader) == null ? void 0 : _a2.call(vft);
+                  setShowDownLoadMenu(false);
                 },
                 onKeyDown: (e) => {
                   var _a2;
                   if (e.key === "Enter" || e.key === " ") {
                     e.preventDefault();
                     (_a2 = vft.templateDownloader) == null ? void 0 : _a2.call(vft);
+                    setShowDownLoadMenu(false);
                   }
                 },
                 children: `.${vft.fileType}`
@@ -296,6 +400,7 @@ function FileUpload({
             )) })
           ] })
         ] }) : null,
+        hasTemplateOptions && templateDownloader ? /* @__PURE__ */ jsx(TemplatePreview, { selectedColumns: selected }) : null,
         fileList.map((item) => {
           let fileSize = item.file.size;
           let i = 0;

package/dist/components/FileUpload/useFileUploadTemplateState.d.ts

@@ -0,0 +1,14 @@
+import { MenuOption } from '../Menu';
+import { FileUploadProps } from './FileUpload.types';
+
+type FileUploadTemplateProps = Pick<FileUploadProps, 'options' | 'selectedValues' | 'onMenuPrimaryButtonClick' | 'onTertiaryButtonClick'>;
+export declare function useFileUploadTemplateState({ options: templateColumnOptions, selectedValues: templateColumnSelections, onMenuPrimaryButtonClick: onTemplateMenuPrimaryClick, onTertiaryButtonClick: onTemplateMenuTertiaryClick, }: FileUploadTemplateProps): {
+    selected: string[];
+    hasTemplateOptions: boolean;
+    menuOptions: MenuOption[];
+    handleMenuSelectionChange: (items: string[]) => void;
+    handleMenuPrimaryClick: (selectedFileType: string) => void;
+    handleMenuTertiaryClick: () => void;
+};
+export {};
+//# sourceMappingURL=useFileUploadTemplateState.d.ts.map

package/dist/components/FileUpload/useFileUploadTemplateState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFileUploadTemplateState.d.ts","sourceRoot":"","sources":["../../../src/components/FileUpload/useFileUploadTemplateState.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAE1D,KAAK,uBAAuB,GAAG,IAAI,CACjC,eAAe,EACf,SAAS,GAAG,gBAAgB,GAAG,0BAA0B,GAAG,uBAAuB,CACpF,CAAC;AAEF,wBAAgB,0BAA0B,CAAC,EACzC,OAAO,EAAE,qBAAqB,EAC9B,cAAc,EAAE,wBAAwB,EACxC,wBAAwB,EAAE,0BAA0B,EACpD,qBAAqB,EAAE,2BAA2B,GACnD,EAAE,uBAAuB;;;;uCAmB8B,MAAM,EAAE;+CAKzC,MAAM;;EAkB5B"}

package/dist/components/FileUpload/useFileUploadTemplateState.js

@@ -0,0 +1,46 @@
+import { useState, useMemo, useEffect, useCallback } from "react";
+import { toCamelCaseLabels, toCamelCase } from "./fileUploadUtils.js";
+function useFileUploadTemplateState({
+  options: templateColumnOptions,
+  selectedValues: templateColumnSelections,
+  onMenuPrimaryButtonClick: onTemplateMenuPrimaryClick,
+  onTertiaryButtonClick: onTemplateMenuTertiaryClick
+}) {
+  const [selected, setSelected] = useState(
+    () => toCamelCaseLabels(templateColumnSelections)
+  );
+  const hasTemplateOptions = ((templateColumnOptions == null ? void 0 : templateColumnOptions.length) ?? 0) > 0;
+  const menuOptions = useMemo(() => {
+    if (!templateColumnOptions) return [];
+    return templateColumnOptions.map((item) => ({
+      label: item,
+      value: toCamelCase(item)
+    }));
+  }, [templateColumnOptions]);
+  useEffect(() => {
+    setSelected(toCamelCaseLabels(templateColumnSelections));
+  }, [templateColumnSelections]);
+  const handleMenuSelectionChange = useCallback((items) => {
+    setSelected(items);
+  }, []);
+  const handleMenuPrimaryClick = useCallback(
+    (selectedFileType) => {
+      onTemplateMenuPrimaryClick == null ? void 0 : onTemplateMenuPrimaryClick(selectedFileType, selected);
+    },
+    [onTemplateMenuPrimaryClick, selected]
+  );
+  const handleMenuTertiaryClick = useCallback(() => {
+    onTemplateMenuTertiaryClick == null ? void 0 : onTemplateMenuTertiaryClick(selected);
+  }, [onTemplateMenuTertiaryClick, selected]);
+  return {
+    selected,
+    hasTemplateOptions,
+    menuOptions,
+    handleMenuSelectionChange,
+    handleMenuPrimaryClick,
+    handleMenuTertiaryClick
+  };
+}
+export {
+  useFileUploadTemplateState
+};

package/dist/components/FilterPanel/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/FilterPanel/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,gBAAgB,EAAmB,MAAM,qBAAqB,CAAC;AAC7E,OAAO,2BAA2B,CAAC;AAEnC,YAAY,EACV,gBAAgB,EAChB,eAAe,EACf,iBAAiB,EACjB,eAAe,GAChB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAW9C;;;GAGG;AACH,wBAAgB,WAAW,CAAC,EAC1B,SAAS,EACT,KAAK,EACL,IAAc,EACd,MAAgB,EAChB,MAAM,EACN,SAAS,EACT,MAAM,EACN,SAAS,EACT,OAAO,EACP,WAAW,EACX,kBAAkB,EAClB,oBAAoB,EACpB,oBAAoB,EACpB,sBAAsB,EACtB,mBAAmB,EACnB,qBAAqB,EACrB,qBAAqB,EACrB,uBAAuB,EACvB,kBAAkB,EAClB,oBAAoB,EACpB,mBAAmB,EACnB,qBAAqB,EACrB,YAAoB,EACpB,aAAa,EAAE,UAAU,EACzB,GAAG,WAAW,EACf,EAAE,gBAAgB,2CA4FlB;yBAtHe,WAAW"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/FilterPanel/index.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,gBAAgB,EAAmB,MAAM,qBAAqB,CAAC;AAC7E,OAAO,2BAA2B,CAAC;AAEnC,YAAY,EACV,gBAAgB,EAChB,eAAe,EACf,iBAAiB,EACjB,eAAe,GAChB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAW9C;;;GAGG;AACH,wBAAgB,WAAW,CAAC,EAC1B,SAAS,EACT,KAAK,EACL,IAAc,EACd,MAAgB,EAChB,MAAM,EACN,SAAS,EACT,MAAM,EACN,SAAS,EACT,OAAO,EACP,WAAW,EACX,kBAAkB,EAClB,oBAAoB,EACpB,oBAAoB,EACpB,sBAAsB,EACtB,mBAAmB,EACnB,qBAAqB,EACrB,qBAAqB,EACrB,uBAAuB,EACvB,kBAAkB,EAClB,oBAAoB,EACpB,mBAAmB,EACnB,qBAAqB,EACrB,YAAoB,EACpB,aAAa,EAAE,UAAU,EACzB,GAAG,WAAW,EACf,EAAE,gBAAgB,2CA4HlB;yBAtJe,WAAW"}

package/dist/components/FilterPanel/index.js

@@ -1,8 +1,10 @@
+!function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode(".impact_drawer_filter_container_medium{height:100%;width:675px}.impact_drawer_filter_container_large{height:100%;width:840px}.MuiBox-root{width:auto}.impact_drawer_filter_container{display:flex;flex-direction:column;position:relative}.impact_drawer_filter_container .impact_drawer_filter_header{align-items:center;background:#fff;border-bottom:1px solid #d9dde7;display:flex;justify-content:space-between;padding:9px 16px;position:sticky;top:0;z-index:1}.impact_drawer_filter_container .impact_drawer_filter_header .impact_drawer_filter_left_header{align-items:center;display:flex;gap:16px}.impact_drawer_filter_container .impact_drawer_filter_header .impact_drawer_filter_left_header .impact_drawer_filter_left_heading_icon{background:#fff url(https://impact-kit.devs.iaproducts.ai/api/v1/files/uploads/impact-ui/prod/icons/filter-icon.svg) no-repeat;background-position:50%;background-size:14px;border:1px solid #eceefd;border-radius:8px;height:32px;width:32px}.impact_drawer_filter_container .impact_drawer_filter_header .impact_drawer_filter_left_header .impact_drawer_filter_left_heading{color:#1f2b4d;font-size:18px;font-weight:700}.impact_drawer_filter_container .impact_drawer_filter_container_left_panel{background:#f5f6fa;border-right:1px solid #d9dde7;flex-shrink:0;height:100%;padding-top:10px;width:200px}.impact_drawer_filter_container .impact_drawer_filter_container_left_panel .impact_drawer_filter_left_filters_tabs{display:flex;flex-direction:column;gap:8px;padding:0 8px}.impact_drawer_filter_container .impact_drawer_filter_container_left_panel .impact_drawer_filter_left_filters_tabs .impact-drawer-filter-separator{background-color:#d9dde7;display:block;height:1px;margin-left:-8px;margin-right:-8px;width:200px}.impact_drawer_filter_container .impact_drawer_filter_container_left_panel .impact_drawer_filter_left_filters_tabs .impact_drawer_filter_tab{align-items:center;display:flex;justify-content:space-between;padding:6px 8px 6px 18px}.impact_drawer_filter_container .impact_drawer_filter_container_left_panel .impact_drawer_filter_left_filters_tabs .impact_drawer_filter_tab:hover{background-color:#eceefd;border-radius:8px;cursor:pointer}.impact_drawer_filter_container .impact_drawer_filter_container_left_panel .impact_drawer_filter_left_filters_tabs .impact_drawer_filter_tab_content{align-items:center;display:flex;gap:10px;width:85%}.impact_drawer_filter_container .impact_drawer_filter_container_left_panel .impact_drawer_filter_left_filters_tabs .impact_drawer_filter_tab_icon img,.impact_drawer_filter_container .impact_drawer_filter_container_left_panel .impact_drawer_filter_left_filters_tabs .impact_drawer_filter_tab_icon svg{color:#60697d;display:flex;height:16px;width:16px}.impact_drawer_filter_container .impact_drawer_filter_container_left_panel .impact_drawer_filter_left_filters_tabs .impact_drawer_filter_tab_label{color:#60697d;display:flex;flex-direction:row;font-size:16px;gap:4px;line-height:20px;overflow:hidden;white-space:nowrap}.impact_drawer_filter_container .impact_drawer_filter_container_left_panel .impact_drawer_filter_left_filters_tabs .impact_drawer_filter_tab_label span{overflow:hidden;text-overflow:ellipsis}.impact_drawer_filter_container .impact_drawer_filter_container_left_panel .impact_drawer_filter_left_filters_tabs .impact_drawer_filter_tab_label-required{color:#ec4c5c}.impact_drawer_filter_container .impact_drawer_filter_container_left_panel .impact_drawer_filter_left_filters_tabs .impact_drawer_filter_tab_badges{background-color:#fff;border-radius:8px;box-sizing:border-box;color:#60697d;font-size:12px;height:18px;line-height:18px;min-width:27px;padding:0 8px;text-align:center}.impact_drawer_filter_container .impact_drawer_filter_container_left_panel .impact_drawer_filter_left_filters_tabs .filter_tab_active{background-color:#eceefd;border-radius:8px}.impact_drawer_filter_container .impact_drawer_filter_container_left_panel .impact_drawer_filter_left_filters_tabs .filter_tab_active .impact_drawer_filter_tab_icon svg,.impact_drawer_filter_container .impact_drawer_filter_container_left_panel .impact_drawer_filter_left_filters_tabs .filter_tab_active .impact_drawer_filter_tab_label{color:#4259ee}.impact_drawer_filter_container .impact_drawer_filter_container_left_panel .impact_drawer_filter_left_filters_tabs .filter_tab_active .impact_drawer_filter_tab_icon img{filter:brightness(0) saturate(100%) invert(30%) sepia(100%) saturate(4545%) hue-rotate(231deg) brightness(103%) contrast(87%)}.impact_drawer_filter_container .impact_drawer_filter_container_left_panel .impact_drawer_filter_left_filters_tabs .filter_tab_active .impact_drawer_filter_tab_badges{color:#4259ee}.impact_drawer_filter_container .impact_drawer_filter_container_left_panel .impact_drawer_filter_left_filters_tabs .filter_tab_disabled .impact_drawer_filter_tab_badges,.impact_drawer_filter_container .impact_drawer_filter_container_left_panel .impact_drawer_filter_left_filters_tabs .filter_tab_disabled .impact_drawer_filter_tab_icon svg,.impact_drawer_filter_container .impact_drawer_filter_container_left_panel .impact_drawer_filter_left_filters_tabs .filter_tab_disabled .impact_drawer_filter_tab_label,.impact_drawer_filter_container .impact_drawer_filter_container_left_panel .impact_drawer_filter_left_filters_tabs .filter_tab_disabled svg{color:#b4bac7}.impact_drawer_filter_container .impact_drawer_filter_container_left_panel .impact_drawer_filter_left_filters_tabs .filter_tab_disabled:hover{background-color:#f5f6fa;cursor:default}.impact_drawer_filter_container .impact-drawer-filter-main-container{display:flex;flex-direction:row;flex-shrink:0;height:calc(100% - 40px)}.impact_drawer_filter_container .impact_drawer_filter_container_right_panel{width:640px}.impact_drawer_filter_container .impact_drawer_filter_container_right_panel .impact_drawer_filter_body{height:calc(100% - 60px);overflow-y:auto;padding:16px;position:relative;width:100%;z-index:0}.impact_drawer_filter_container .impact_drawer_filter_container_right_panel .impact_drawer_filter_footer{align-items:center;background:#fff;border-top:1px solid #d9dde7;bottom:0;display:flex;height:56px;justify-content:space-between;left:200px;padding:0 16px;position:absolute;right:0;z-index:1}.impact_drawer_filter_container .impact_drawer_filter_container_right_panel .impact_drawer_filter_footer .impact_drawer_filter_footer_left_container,.impact_drawer_filter_container .impact_drawer_filter_container_right_panel .impact_drawer_filter_footer .impact_drawer_filter_footer_right_container{align-items:center;display:flex;gap:8px}.impact_drawer_filter_container .impact_drawer_filter_container_right_panel .impact_drawer_filter_footer_no_buttons{height:100%}")),document.head.appendChild(e)}}catch(r){console.error("vite-plugin-css-injected-by-js",r)}}();
 import { jsx, jsxs } from "react/jsx-runtime";
 import { FilterPanelHeader } from "./FilterPanelHeader.js";
 import { PanelFooter } from "./PanelFooter.js";
 import { PanelSidebar } from "./PanelSidebar.js";
-/* empty css                        */
+import { useShortcut } from "../Shortcuts/useShortcut.js";
+
 import Drawer from "../../node_modules/@mui/material/Drawer/Drawer.js";
 function getSizeClass(size) {
   switch (size) {
@@ -40,6 +42,37 @@ function FilterPanel({
   ...drawerProps
 }) {
   var _a;
+  useShortcut(
+    [
+      {
+        keys: "alt+f",
+        id: "filter-panel-toggle-alt-f",
+        description: "Toggle filter panel",
+        handler: () => {
+          if (handleClose) {
+            handleClose();
+          } else {
+            setIsOpen == null ? void 0 : setIsOpen(!isOpen);
+          }
+        }
+      },
+      {
+        keys: "alt+a",
+        id: "filter-panel-apply-alt-a",
+        description: "Apply filters",
+        handler: () => {
+          if (isOpen) {
+            onPrimaryButtonClick == null ? void 0 : onPrimaryButtonClick();
+          }
+        }
+      }
+    ],
+    {
+      namespace: "FilterPanel",
+      priority: 1,
+      preventDefault: true
+    }
+  );
   const handleToggleDrawer = (_event) => {
     if (_event.type === "keydown" && (_event.key === "Tab" || _event.key === "Shift")) {
       return;

package/dist/components/FiltersStrip/FiltersStrip.types.d.ts

@@ -1,4 +1,4 @@
-import { BaseComponentProps } from '../../types';
+import { RootComponentProps } from '../../types';
 
 export interface FilterTagValue {
     label: string;
@@ -23,7 +23,7 @@ export interface SavedFilterListOption {
     label: string;
     value: string;
 }
-export interface FiltersStripProps extends BaseComponentProps {
+export interface FiltersStripProps extends RootComponentProps {
     /** Currently selected saved filter label */
     selectedFilter?: string;
     /** Callback when saved filter selection changes */

package/dist/components/FiltersStrip/index.d.ts

@@ -7,7 +7,7 @@ export { AppliedFilters } from './AppliedFilters';
 /**
  * Horizontal strip with saved/recent filter dropdown and filter tags. Optional "All Filters" button.
  */
-export declare function FiltersStrip({ selectedFilter, setSelectedFilter, recentFilters, savedFiltersBadge, savedFilterLists, filterTags, handleBadgeChange, handleApplyFilter, handleCancelFilter, filterButtonLabel, filterButtonClick, filterButtonProps, hideSelectedFilterBadge, savedFilterSelectedBadge, handleSavedRecentFilterDropdown, filterDropDownLabel, className, 'data-testid': dataTestId, }: FiltersStripProps): import("react/jsx-runtime").JSX.Element;
+export declare function FiltersStrip({ selectedFilter, setSelectedFilter, recentFilters, savedFiltersBadge, savedFilterLists, filterTags, handleBadgeChange, handleApplyFilter, handleCancelFilter, filterButtonLabel, filterButtonClick, filterButtonProps, hideSelectedFilterBadge, savedFilterSelectedBadge, handleSavedRecentFilterDropdown, filterDropDownLabel, className, id, 'data-testid': dataTestId, 'aria-label': ariaLabel, role, }: FiltersStripProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace FiltersStrip {
     var displayName: string;
 }

package/dist/components/FiltersStrip/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/FiltersStrip/index.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,4BAA4B,CAAC;AAEpC,YAAY,EACV,iBAAiB,EACjB,aAAa,EACb,cAAc,EACd,gBAAgB,EAChB,gBAAgB,EAChB,qBAAqB,GACtB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAElD;;GAEG;AACH,wBAAgB,YAAY,CAAC,EAC3B,cAAmB,EACnB,iBAA4B,EAC5B,aAAkB,EAClB,iBAAsB,EACtB,gBAAqB,EACrB,UAAe,EACf,iBAA4B,EAC5B,iBAAiB,EACjB,kBAAkB,EAClB,iBAAiC,EACjC,iBAAiB,EACjB,iBAAiB,EACjB,uBAA+B,EAC/B,wBAA+B,EAC/B,+BAA0C,EAC1C,mBAAmB,EACnB,SAAS,EACT,aAAa,EAAE,UAAU,GAC1B,EAAE,iBAAiB,2CA0GnB;yBA7He,YAAY"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/FiltersStrip/index.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,4BAA4B,CAAC;AAEpC,YAAY,EACV,iBAAiB,EACjB,aAAa,EACb,cAAc,EACd,gBAAgB,EAChB,gBAAgB,EAChB,qBAAqB,GACtB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAElD;;GAEG;AACH,wBAAgB,YAAY,CAAC,EAC3B,cAAmB,EACnB,iBAA4B,EAC5B,aAAkB,EAClB,iBAAsB,EACtB,gBAAqB,EACrB,UAAe,EACf,iBAA4B,EAC5B,iBAAiB,EACjB,kBAAkB,EAClB,iBAAiC,EACjC,iBAAiB,EACjB,iBAAiB,EACjB,uBAA+B,EAC/B,wBAA+B,EAC/B,+BAA0C,EAC1C,mBAAmB,EACnB,SAAS,EACT,EAAE,EACF,aAAa,EAAE,UAAU,EACzB,YAAY,EAAE,SAAqB,EACnC,IAAe,GAChB,EAAE,iBAAiB,2CA+GnB;yBArIe,YAAY"}

package/dist/components/FiltersStrip/index.js

@@ -1,3 +1,4 @@
+!function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode(".impact-info-panel-container{align-items:center;background-color:#fff;display:flex;flex-direction:row;font-family:Manrope,sans-serif;gap:12px;height:48px;justify-content:space-between;padding:8px 24px;width:100%}.impact-info-panel-container .impact-info-panel-left-container{align-items:center;display:flex;flex:1 0 auto;flex-direction:row;gap:12px;justify-content:space-between}.impact-info-panel-container .impact-info-panel-left-container .impact-filter-dropdown-container{align-items:center;display:flex;flex-direction:row;flex-shrink:0;gap:8px;justify-content:space-between;position:relative}.impact-info-panel-container .impact-info-panel-left-container .impact-filter-dropdown-container .MuiChip-root.impact_badges_only_label_stroke{max-width:145px}.impact-info-panel-container .impact-info-panel-left-container .impact-filter-dropdown-container .impact-filter-dropdown-label{color:#60697d;font-family:Manrope,sans-serif;font-size:14px;font-weight:500;line-height:21px}.impact-info-panel-container .impact-info-panel-left-container .impact-filter-dropdown-container .impact-filter-dropdown-button{align-items:center;background-color:#f5f6fa;border-radius:8px;display:flex;height:32px;justify-content:center;padding:8px;transition:transform .2s ease;width:32px}.impact-info-panel-container .impact-info-panel-left-container .impact-filter-dropdown-container .impact-filter-dropdown-button:hover{cursor:pointer}.impact-info-panel-container .impact-info-panel-left-container .impact-filter-dropdown-container .impact-filter-dropdown-button svg{color:#1f2b4d;height:20px;width:20px}.impact-info-panel-container .impact-info-panel-left-container .impact-filter-dropdown-container .impact-filter-dropdown-wrapper{background-color:#fff;border-radius:8px;box-shadow:0 0 4px #0000001f;left:0;min-width:265px;padding:8px 6px;position:absolute;top:54px;z-index:1200}.impact-info-panel-container .impact-info-panel-left-container .impact-filter-dropdown-container .impact-filter-dropdown-wrapper .impact-filter-dropdown-recent-container{display:flex;flex-direction:column}.impact-info-panel-container .impact-info-panel-left-container .impact-filter-dropdown-container .impact-filter-dropdown-wrapper .impact-filter-dropdown-recent-container .impact-filter-dropdown-label{color:#60697d;font-family:Manrope,sans-serif;font-size:12px;font-weight:500;line-height:21px;padding:6px 18px}.impact-info-panel-container .impact-info-panel-left-container .impact-filter-dropdown-container .impact-filter-dropdown-wrapper .impact-filter-dropdown-recent-container .impact-filter-dropdown-recent-filters-wrapper{display:flex;flex-direction:column;margin-bottom:6px}.impact-info-panel-container .impact-info-panel-left-container .impact-filter-dropdown-container .impact-filter-dropdown-wrapper .impact-filter-dropdown-recent-container .impact-filter-dropdown-recent-filters-wrapper .impact-filter-dropdown-recent-filters{border-radius:8px;display:flex;flex-direction:row;padding:8px 18px}.impact-info-panel-container .impact-info-panel-left-container .impact-filter-dropdown-container .impact-filter-dropdown-wrapper .impact-filter-dropdown-recent-container .impact-filter-dropdown-recent-filters-wrapper .impact-filter-dropdown-recent-filters:hover{background-color:#edf0ff;cursor:pointer}.impact-info-panel-container .impact-info-panel-left-container .impact-filter-dropdown-container .impact-filter-dropdown-wrapper .impact-filter-dropdown-recent-container .impact-filter-dropdown-recent-filters-wrapper .impact-filter-dropdown-recent-filters span{color:#1f2b4d;font-family:Manrope,sans-serif;font-size:14px;font-weight:500;line-height:20px}.impact-info-panel-container .impact-info-panel-left-container .impact-filter-dropdown-container .impact-filter-dropdown-wrapper .impact-filter-dropdown-saved-container{display:flex;flex-direction:column}.impact-info-panel-container .impact-info-panel-left-container .impact-filter-dropdown-container .impact-filter-dropdown-wrapper .impact-filter-dropdown-saved-container .impact-filter-dropdown-label{color:#60697d;font-family:Manrope,sans-serif;font-size:12px;font-weight:500;line-height:21px;padding:6px 18px}.impact-info-panel-container .impact-info-panel-left-container .impact-filter-dropdown-container .impact-filter-dropdown-wrapper .impact-filter-dropdown-saved-container .impact-filter-dropdown-saved-filters-badge-wrapper{display:flex;flex-direction:row;gap:6px;padding:8px 18px}.impact-info-panel-container .impact-info-panel-left-container .impact-filter-dropdown-container .impact-filter-dropdown-wrapper .impact-filter-dropdown-saved-container .impact-filter-dropdown-saved-filters-badge-wrapper .MuiChip-root.impact_badges_only_label_stroke{cursor:pointer}.impact-info-panel-container .impact-info-panel-left-container .impact-filter-dropdown-container .impact-filter-dropdown-wrapper .impact-filter-dropdown-saved-container .impact-filter-dropdown-saved-filters-no-data-text{align-items:center;color:#7a8294;display:flex;font-family:Manrope,sans-serif;font-size:14px;font-weight:400;justify-content:center;line-height:20px;margin:24px 0}.impact-info-panel-container .impact-info-panel-left-container .impact-filter-dropdown-container .impact-filter-dropdown-wrapper .impact-filter-dropdown-saved-container .impact-filter-dropdown-saved-filters-search-wrapper{padding:8px 18px}.impact-info-panel-container .impact-info-panel-left-container .impact-filter-dropdown-container .impact-filter-dropdown-wrapper .impact-filter-dropdown-saved-container .impact-filter-dropdown-saved-filters-search-wrapper .impact-input-wrapper{border:none!important;min-width:100%!important;padding-left:0}.impact-info-panel-container .impact-info-panel-left-container .impact-filter-dropdown-container .impact-filter-dropdown-wrapper .impact-filter-dropdown-saved-container .impact-filter-dropdown-saved-filters-lists-wrapper{display:flex;flex-direction:column;max-height:160px;overflow:auto}.impact-info-panel-container .impact-info-panel-left-container .impact-filter-dropdown-container .impact-filter-dropdown-wrapper .impact-filter-dropdown-saved-container .impact-filter-dropdown-saved-filters-lists-wrapper .impact-filter-dropdown-saved-filters-list{border-radius:8px;color:#1f2b4d;font-family:Manrope,sans-serif;font-size:14px;font-weight:500;line-height:20px;margin-bottom:4px;padding:8px 18px}.impact-info-panel-container .impact-info-panel-left-container .impact-filter-dropdown-container .impact-filter-dropdown-wrapper .impact-filter-dropdown-saved-container .impact-filter-dropdown-saved-filters-lists-wrapper .impact-filter-dropdown-saved-filters-list:hover{background-color:#f5f6fa;cursor:pointer}.impact-info-panel-container .impact-info-panel-left-container .impact-filter-dropdown-container .impact-filter-dropdown-wrapper .impact-filter-dropdown-saved-container .filter-dropdown-selected-list{background-color:#edf0ff}.impact-info-panel-container .impact-info-panel-left-container .impact-filter-dropdown-container .impact-filter-dropdown-wrapper .impact-filter-dropdown-action-wrapper{display:flex;flex-direction:column;gap:8px}.impact-info-panel-container .impact-info-panel-left-container .impact-filter-dropdown-container .impact-filter-dropdown-wrapper .impact-filter-dropdown-action-wrapper .impact-filter-dropdown-action-btns{display:flex;flex-direction:row;gap:8px;justify-content:flex-end;padding:0 18px}.impact-info-panel-container .impact-info-panel-left-container .impact-selected-filter-container{align-items:center;display:flex;flex-direction:row;gap:8px;justify-content:space-between}.impact-info-panel-container .impact-info-panel-left-container .impact-selected-filter-container .impact-selected-filter-tags{align-items:center;display:flex;flex:1 0 auto;flex-direction:row;gap:8px;max-width:100%;overflow:scroll;scrollbar-width:none;width:700px}.impact-info-panel-container .impact-info-panel-left-container .impact-selected-filter-container .impact-selected-filter-tags .impact-selected-filter-wrapper{align-items:center;display:flex;flex-direction:row;flex-shrink:0;gap:6px;position:relative;transition:transform .5s ease-in-out}.impact-info-panel-container .impact-info-panel-left-container .impact-selected-filter-container .impact-selected-filter-tags .impact-selected-filter-wrapper .impact-selected-filter-label{color:#60697d;font-family:Manrope,sans-serif;font-size:12px;font-weight:500;line-height:21px;padding-right:4px}.impact-info-panel-container .impact-info-panel-left-container .impact-selected-filter-container .impact-selected-filter-tags .impact-selected-filter-wrapper .impact-selected-filter-tags-container{align-items:center;display:flex;flex-direction:row;gap:4px}.impact-info-panel-container .impact-info-panel-left-container .impact-selected-filter-container .impact-selected-filter-tags .impact-selected-filter-wrapper .impact-filter-strip-separator{margin-right:8px}.impact-info-panel-container .impact-info-panel-left-container .impact-selected-filter-container .impact-selected-filter-tags.collapsed{overflow:hidden}.impact-info-panel-container .impact-info-panel-left-container .impact-selected-filter-container .impact-selected-filter-action-btns{align-items:center;display:flex;flex-direction:row;gap:4px}.impact-info-panel-container .impact-info-panel-left-container .impact-selected-filter-container .impact-selected-filter-action-btns .impact-selected-filter-action-btn{align-items:center;background-color:#f5f6fa;cursor:pointer;display:flex;justify-content:center;padding:8px 4px}.impact-info-panel-container .impact-info-panel-left-container .impact-selected-filter-container .impact-selected-filter-action-btns .impact-selected-filter-action-btn svg{color:#60697d;font-size:18px}.impact-info-panel-container .impact-info-panel-left-container .impact-selected-filter-container .impact-selected-filter-action-btns .prev{border-bottom-left-radius:4px;border-top-left-radius:4px}.impact-info-panel-container .impact-info-panel-left-container .impact-selected-filter-container .impact-selected-filter-action-btns .next{border-bottom-right-radius:4px;border-top-right-radius:4px}.impact-info-panel-container .impact-info-panel-left-container .impact-selected-filter-container .impact-selected-filter-action-btns .expand{border-radius:8px;color:#60697d;font-size:14px}.impact-info-panel-container .impact-info-panel-right-container{align-items:center;display:flex;flex-direction:row;flex-shrink:0;gap:12px}.impact-info-panel-container .impact-filter-strip-separator{background-color:#d9dde7;display:inline-block;height:16px;width:1px}.impact-selected-filter-tags-dropdown{background-color:#fff;border-radius:8px;box-shadow:0 0 4px #0000001f;max-width:200px;padding:8px 6px;position:absolute;right:0;top:45px;width:100%;z-index:1200}.impact-selected-filter-tags-dropdown .impact-selected-filter-tag-container{display:flex;flex-direction:column;gap:4px;margin-bottom:8px}.impact-selected-filter-tags-dropdown .impact-selected-filter-tag-label{color:#1f2b4d;font-family:Manrope,sans-serif;font-size:14px;font-weight:500;line-height:20px;overflow:hidden;padding:8px 18px;text-overflow:ellipsis;white-space:nowrap}.impact-selected-filter-tags-dropdown .impact-selected-filter-tags-actions-container{display:flex;flex-direction:column;gap:8px}.impact-selected-filter-tags-dropdown .impact-selected-filter-tags-actions-container .ia-styles.ia-btn{width:100%}")),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}}();
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { useState, useCallback, Fragment as Fragment$1 } from "react";
 import default_1 from "../../node_modules/@mui/icons-material/FilterList.js";
@@ -6,7 +7,7 @@ import { Button } from "../Button/index.js";
 import { Tag } from "../Tag/index.js";
 import { FilterDropDown } from "./FilterDropDown.js";
 import { FilterSlider } from "./FilterSlider.js";
-/* empty css                         */
+
 function FiltersStrip({
   selectedFilter = "",
   setSelectedFilter = () => {
@@ -28,7 +29,10 @@ function FiltersStrip({
   },
   filterDropDownLabel,
   className,
-  "data-testid": dataTestId
+  id,
+  "data-testid": dataTestId,
+  "aria-label": ariaLabel = "Filters",
+  role = "region"
 }) {
   const [showSeparator, setShowSeparator] = useState(false);
   const [currDropShow, setCurrDropShow] = useState(null);
@@ -40,12 +44,15 @@ function FiltersStrip({
       setCurrDropShow(null);
     }
   };
-  const hasDropDown = (savedFilterLists.length ?? 0) > 0 || (recentFilters.length ?? 0) > 0;
+  const hasDropDown = Boolean(savedFilterLists || recentFilters);
   return /* @__PURE__ */ jsxs(
     "div",
     {
+      "aria-label": ariaLabel,
       className: `impact-info-panel-container ${className ?? ""}`.trim(),
       "data-testid": dataTestId,
+      id,
+      role,
       children: [
         /* @__PURE__ */ jsxs("div", { className: "impact-info-panel-left-container", children: [
           hasDropDown && /* @__PURE__ */ jsxs(Fragment, { children: [

package/dist/components/Header/Header.types.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { BaseComponentProps } from '../../types';
+import { RootComponentProps } from '../../types';
 import { AvatarProps } from '../Avatar/Avatar.types';
 
 /**
@@ -14,7 +14,7 @@ export interface HeaderDropMenuOption {
  * Header component props.
  * Avatar props can be extended via avatarProps; dropMenuOptions drive the avatar dropdown menu.
  */
-export interface HeaderProps extends BaseComponentProps {
+export interface HeaderProps extends RootComponentProps {
     /** Title shown next to the logo */
     title?: ReactNode;
     /** User name shown in avatar and default menu option */

package/dist/components/Header/index.d.ts

@@ -4,7 +4,7 @@ export type { HeaderProps, HeaderDropMenuOption } from './Header.types';
 /**
  * App header with logo, title, actions (help, message, notification, chatbot) and avatar menu.
  */
-export declare function Header({ title, userName, handleLogoClick, showNotificationIcon, notificationIndicator, handleNotificationClick, showHelpIcon, handleHelpClick, showMessageIcon, handleMessageClick, showChatBotIcon, handleChatBotClick, isMessageIconDisabled, isNotificationDnd, dropMenuOptions, isChatBotDisabled, centerComponent, avatarProps, avatarType, className, 'data-testid': dataTestId, }: HeaderProps): import("react/jsx-runtime").JSX.Element;
+export declare function Header({ title, userName, handleLogoClick, showNotificationIcon, notificationIndicator, handleNotificationClick, showHelpIcon, handleHelpClick, showMessageIcon, handleMessageClick, showChatBotIcon, handleChatBotClick, isMessageIconDisabled, isNotificationDnd, dropMenuOptions, isChatBotDisabled, centerComponent, avatarProps, avatarType, className, id, 'data-testid': dataTestId, role, }: HeaderProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace Header {
     var displayName: string;
 }

package/dist/components/Header/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Header/index.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,sBAAsB,CAAC;AAE9B,YAAY,EAAE,WAAW,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAExE;;GAEG;AACH,wBAAgB,MAAM,CAAC,EACrB,KAAK,EACL,QAAQ,EACR,eAAe,EACf,oBAA2B,EAC3B,qBAA4B,EAC5B,uBAAuB,EACvB,YAAmB,EACnB,eAAe,EACf,eAAsB,EACtB,kBAAkB,EAClB,eAAsB,EACtB,kBAAkB,EAClB,qBAA6B,EAC7B,iBAAyB,EACzB,eAAoE,EACpE,iBAAyB,EACzB,eAAe,EACf,WAAW,EACX,UAA6B,EAC7B,SAAS,EACT,aAAa,EAAE,UAAU,GAC1B,EAAE,WAAW,2CAkIb;yBAxJe,MAAM"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Header/index.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,sBAAsB,CAAC;AAS9B,YAAY,EAAE,WAAW,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAExE;;GAEG;AACH,wBAAgB,MAAM,CAAC,EACrB,KAAK,EACL,QAAQ,EACR,eAAe,EACf,oBAA2B,EAC3B,qBAA4B,EAC5B,uBAAuB,EACvB,YAAmB,EACnB,eAAe,EACf,eAAsB,EACtB,kBAAkB,EAClB,eAAsB,EACtB,kBAAkB,EAClB,qBAA6B,EAC7B,iBAAyB,EACzB,eAAoE,EACpE,iBAAyB,EACzB,eAAe,EACf,WAAW,EACX,UAA6B,EAC7B,SAAS,EACT,EAAE,EACF,aAAa,EAAE,UAAU,EACzB,IAAe,GAChB,EAAE,WAAW,2CAuIb;yBA/Je,MAAM"}