impact-ui 3.7.34-alpha.2 → 3.7.34-alpha.3

package/dist/components/FiltersStrip/FilterDropDown.js

@@ -0,0 +1,99 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useCallback, useEffect } from "react";
+import default_1 from "../../node_modules/@mui/icons-material/KeyboardArrowDown.js";
+import { Badge } from "../Badge/index.js";
+import { AppliedFilters } from "./AppliedFilters.js";
+function FilterDropDown({
+  selectedFilter,
+  setSelectedFilter,
+  recentFilters = [],
+  savedFilterLists = [],
+  savedFiltersBadge = [],
+  handleApplyFilter,
+  handleCancelFilter,
+  handleBadgeChange,
+  hideSelectedFilterBadge = false,
+  savedFilterSelectedBadge = null,
+  handleSavedRecentFilterDropdown,
+  filterDropDownLabel = "Filters Applied"
+}) {
+  const [showDropDown, setShowDropDown] = useState(false);
+  const [selectedBadge, setSelectedBadge] = useState(
+    savedFilterSelectedBadge ?? null
+  );
+  const [tempSelectedFilter, setTempSelectedFilter] = useState(selectedFilter);
+  const [selectedFilterOnApply, setSelectedFilterOnApply] = useState(selectedFilter);
+  const handleClickOutside = useCallback(
+    (event) => {
+      const target = event.target;
+      if (showDropDown && !target.closest(".impact-filter-dropdown-container") && !target.closest(".impact-filter-dropdown-action-btns")) {
+        setShowDropDown(false);
+        setSelectedFilterOnApply(tempSelectedFilter);
+      }
+    },
+    [showDropDown, tempSelectedFilter]
+  );
+  useEffect(() => {
+    setTempSelectedFilter(selectedFilter);
+  }, [selectedFilter]);
+  useEffect(() => {
+    document.addEventListener("click", handleClickOutside);
+    return () => {
+      document.removeEventListener("click", handleClickOutside);
+    };
+  }, [handleClickOutside]);
+  return /* @__PURE__ */ jsxs("div", { className: "impact-filter-dropdown-container", children: [
+    /* @__PURE__ */ jsx("div", { className: "impact-filter-dropdown-label", children: filterDropDownLabel }),
+    !hideSelectedFilterBadge && /* @__PURE__ */ jsx(Badge, { color: "info", label: tempSelectedFilter, variant: "stroke", onClick: () => {
+    } }),
+    !hideSelectedFilterBadge && /* @__PURE__ */ jsx(
+      "div",
+      {
+        "aria-expanded": showDropDown,
+        "aria-label": "Toggle filters dropdown",
+        className: "impact-filter-dropdown-button",
+        role: "button",
+        style: {
+          transform: showDropDown ? "rotate(180deg)" : "rotate(0deg)"
+        },
+        tabIndex: 0,
+        onClick: () => {
+          setShowDropDown((prev) => !prev);
+          handleSavedRecentFilterDropdown == null ? void 0 : handleSavedRecentFilterDropdown();
+        },
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            setShowDropDown((prev) => !prev);
+            handleSavedRecentFilterDropdown == null ? void 0 : handleSavedRecentFilterDropdown();
+          }
+        },
+        children: /* @__PURE__ */ jsx(default_1, {})
+      }
+    ),
+    showDropDown && /* @__PURE__ */ jsx(
+      AppliedFilters,
+      {
+        handleApplyFilter,
+        handleBadgeChange,
+        handleCancelFilter,
+        recentFilters,
+        savedFilterLists,
+        savedFiltersBadge,
+        selectedBadge,
+        selectedFilter,
+        selectedFilterOnApply,
+        setSelectedBadge,
+        setSelectedFilter,
+        setSelectedFilterOnApply,
+        setShowDropDown,
+        setTempSelectedFilter,
+        tempSelectedFilter
+      }
+    )
+  ] });
+}
+FilterDropDown.displayName = "FilterDropDown";
+export {
+  FilterDropDown
+};

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

@@ -0,0 +1,29 @@
+import { ReactNode } from 'react';
+
+export interface FilterSliderTag {
+    id: string;
+    label: string;
+    required?: boolean;
+    values: {
+        label: string;
+    }[];
+    handleViewAll?: (tag: FilterSliderTag) => void;
+}
+export interface FilterSliderProps {
+    list: FilterSliderTag[];
+    width?: string | number;
+    isExpanded?: boolean;
+    handleExpandClick?: () => void;
+    tagsChildren: (item: FilterSliderTag, index: number) => ReactNode;
+    containerChildren?: (item: FilterSliderTag, index: number) => ReactNode;
+    setShowSeparator?: (show: boolean) => void;
+    onNextClick?: () => void;
+    onPrevClick?: () => void;
+    currDropShow: number | null;
+    handleClickOutside?: (event: MouseEvent) => void;
+}
+export declare function FilterSlider({ list, width, isExpanded, handleExpandClick, tagsChildren, containerChildren, setShowSeparator, onNextClick, onPrevClick, currDropShow, handleClickOutside, }: FilterSliderProps): import("react/jsx-runtime").JSX.Element | null;
+export declare namespace FilterSlider {
+    var displayName: string;
+}
+//# sourceMappingURL=FilterSlider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FilterSlider.d.ts","sourceRoot":"","sources":["../../../src/components/FiltersStrip/FilterSlider.tsx"],"names":[],"mappings":"AACA,OAAO,EAA6D,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAQlG,MAAM,WAAW,eAAe;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAC5B,aAAa,CAAC,EAAE,CAAC,GAAG,EAAE,eAAe,KAAK,IAAI,CAAC;CAChD;AAED,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,eAAe,EAAE,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC/B,YAAY,EAAE,CAAC,IAAI,EAAE,eAAe,EAAE,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;IAClE,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,eAAe,EAAE,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;IACxE,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3C,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;CAClD;AAED,wBAAgB,YAAY,CAAC,EAC3B,IAAI,EACJ,KAAK,EACL,UAAiB,EACjB,iBAAiB,EACjB,YAAY,EACZ,iBAAiB,EACjB,gBAAgB,EAChB,WAAW,EACX,WAAW,EACX,YAAY,EACZ,kBAA6B,GAC9B,EAAE,iBAAiB,kDAwNnB;yBApOe,YAAY"}

package/dist/components/FiltersStrip/FilterSlider.js

@@ -0,0 +1,229 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { useState, useRef, useCallback, useLayoutEffect, useEffect } from "react";
+import default_1$3 from "../../node_modules/@mui/icons-material/ChevronRightOutlined.js";
+import default_1$2 from "../../node_modules/@mui/icons-material/CloseOutlined.js";
+import default_1 from "../../node_modules/@mui/icons-material/KeyboardArrowLeft.js";
+import default_1$1 from "../../node_modules/@mui/icons-material/KeyboardArrowRight.js";
+import { Button } from "../Button/index.js";
+import { Portal } from "../Portal/index.js";
+function FilterSlider({
+  list,
+  width,
+  isExpanded = true,
+  handleExpandClick,
+  tagsChildren,
+  containerChildren,
+  setShowSeparator,
+  onNextClick,
+  onPrevClick,
+  currDropShow,
+  handleClickOutside = () => {
+  }
+}) {
+  const [overFlow, setOverFlow] = useState(false);
+  const [dropdownPosition, setDropdownPosition] = useState({
+    x: 0,
+    y: 0,
+    width: 200
+  });
+  const [canScrollLeft, setCanScrollLeft] = useState(false);
+  const [canScrollRight, setCanScrollRight] = useState(false);
+  const tagContainer = useRef(null);
+  const filtersContainer = useRef([]);
+  const memoizedHandleClickOutside = useCallback(handleClickOutside, []);
+  const handleCloseClick = () => {
+    if (handleExpandClick) handleExpandClick();
+  };
+  useLayoutEffect(() => {
+    if (tagContainer.current) {
+      const container = tagContainer.current;
+      setOverFlow(container.scrollWidth > container.clientWidth);
+      setShowSeparator == null ? void 0 : setShowSeparator(container.scrollWidth > container.clientWidth);
+    }
+  }, [list, setShowSeparator]);
+  useLayoutEffect(() => {
+    const container = tagContainer.current;
+    if (!container) return;
+    const checkScroll = () => {
+      const maxScroll = container.scrollWidth - container.clientWidth;
+      const currentScroll = container.scrollLeft;
+      setCanScrollLeft(currentScroll > 0);
+      setCanScrollRight(currentScroll < maxScroll - 1);
+      setOverFlow(maxScroll > 0);
+      setShowSeparator == null ? void 0 : setShowSeparator(maxScroll > 0);
+    };
+    requestAnimationFrame(checkScroll);
+    container.addEventListener("scroll", checkScroll);
+    const resizeObserver = typeof ResizeObserver !== "undefined" ? new ResizeObserver(checkScroll) : null;
+    if (resizeObserver) resizeObserver.observe(container);
+    return () => {
+      container.removeEventListener("scroll", checkScroll);
+      resizeObserver == null ? void 0 : resizeObserver.disconnect();
+    };
+  }, [list, setShowSeparator]);
+  useEffect(() => {
+    const handleMouseDown = (event) => {
+      memoizedHandleClickOutside(event);
+    };
+    document.addEventListener("mousedown", handleMouseDown);
+    return () => {
+      document.removeEventListener("mousedown", handleMouseDown);
+    };
+  }, [memoizedHandleClickOutside]);
+  const scrollAmount = 200;
+  const handleNextClick = () => {
+    var _a;
+    onNextClick == null ? void 0 : onNextClick();
+    (_a = tagContainer.current) == null ? void 0 : _a.scrollBy({ left: scrollAmount, behavior: "smooth" });
+  };
+  const handlePrevClick = () => {
+    var _a;
+    onPrevClick == null ? void 0 : onPrevClick();
+    (_a = tagContainer.current) == null ? void 0 : _a.scrollBy({ left: -scrollAmount, behavior: "smooth" });
+  };
+  const handleTagClick = (index) => {
+    const el = filtersContainer.current[index];
+    if (el) {
+      const rect = el.getBoundingClientRect();
+      setDropdownPosition({
+        x: rect.right,
+        y: rect.bottom,
+        width: rect.width
+      });
+    }
+  };
+  if (!Array.isArray(list)) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "impact-selected-filter-container", style: { width: width ?? "100%" }, children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: tagContainer,
+        className: `impact-selected-filter-tags ${!isExpanded ? "collapsed" : ""}`,
+        children: list.map((item, index) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: (el) => {
+              filtersContainer.current[index] = el;
+            },
+            className: "impact-selected-filter-wrapper",
+            role: "presentation",
+            onClick: () => {
+              handleTagClick(index);
+            },
+            children: [
+              containerChildren == null ? void 0 : containerChildren(item, index),
+              /* @__PURE__ */ jsx("div", { className: "impact-selected-filter-tags-container", children: tagsChildren(item, index) }),
+              currDropShow === index && /* @__PURE__ */ jsx(Portal, { container: document.body, children: /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: "impact-selected-filter-tags-dropdown",
+                  style: {
+                    top: dropdownPosition.y + 18,
+                    left: dropdownPosition.width > 200 ? dropdownPosition.x - 200 : dropdownPosition.x - dropdownPosition.width,
+                    width: `${dropdownPosition.width}px`
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx("div", { className: "impact-selected-filter-tag-container", children: item.values.slice(2, 5).map((tag, i) => /* @__PURE__ */ jsx("div", { className: "impact-selected-filter-tag-label", children: tag.label }, i)) }),
+                    item.values.length > 6 && item.handleViewAll && /* @__PURE__ */ jsxs("div", { className: "impact-selected-filter-tags-actions-container", children: [
+                      /* @__PURE__ */ jsx("div", { className: "impact-notification-horizontal-separator" }),
+                      /* @__PURE__ */ jsx(
+                        Button,
+                        {
+                          size: "large",
+                          variant: "text",
+                          onClick: () => {
+                            var _a;
+                            return (_a = item.handleViewAll) == null ? void 0 : _a.call(item, item);
+                          },
+                          children: `View all (${item.values.length})`
+                        }
+                      )
+                    ] })
+                  ]
+                }
+              ) })
+            ]
+          },
+          item.id
+        ))
+      }
+    ),
+    overFlow && list.length > 2 && /* @__PURE__ */ jsx("div", { className: "impact-selected-filter-action-btns", children: isExpanded ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "impact-selected-filter-action-btn prev",
+          role: "button",
+          style: { opacity: canScrollLeft ? 1 : 0.5 },
+          tabIndex: 0,
+          onClick: handlePrevClick,
+          onKeyDown: (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              handlePrevClick();
+            }
+          },
+          children: /* @__PURE__ */ jsx(default_1, {})
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "impact-selected-filter-action-btn next",
+          role: "button",
+          style: { opacity: canScrollRight ? 1 : 0.5 },
+          tabIndex: 0,
+          onClick: handleNextClick,
+          onKeyDown: (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              handleNextClick();
+            }
+          },
+          children: /* @__PURE__ */ jsx(default_1$1, {})
+        }
+      ),
+      handleExpandClick && /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "impact-selected-filter-action-btn next",
+          role: "button",
+          tabIndex: 0,
+          onClick: handleCloseClick,
+          onKeyDown: (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              handleCloseClick();
+            }
+          },
+          children: /* @__PURE__ */ jsx(default_1$2, { fontSize: "small" })
+        }
+      )
+    ] }) : /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "impact-selected-filter-action-btn expand",
+        role: "button",
+        tabIndex: 0,
+        onClick: handleExpandClick,
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            handleExpandClick == null ? void 0 : handleExpandClick();
+          }
+        },
+        children: [
+          /* @__PURE__ */ jsxs("p", { children: [
+            "+",
+            list.length
+          ] }),
+          /* @__PURE__ */ jsx(default_1$3, {})
+        ]
+      }
+    ) })
+  ] });
+}
+FilterSlider.displayName = "FilterSlider";
+export {
+  FilterSlider
+};

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

@@ -0,0 +1,60 @@
+import { RootComponentProps } from '../../types';
+
+export interface FilterTagValue {
+    label: string;
+}
+export interface FilterTagItem {
+    id: string;
+    label: string;
+    required?: boolean;
+    values: FilterTagValue[];
+    handleViewAll?: (tag: FilterTagItem) => void;
+}
+export interface RecentFilterItem {
+    filterSet: {
+        label: string;
+    }[];
+    handleRecentFilter: (filter: RecentFilterItem) => void;
+}
+export interface SavedFilterBadge {
+    label: string;
+}
+export interface SavedFilterListOption {
+    label: string;
+    value: string;
+}
+export interface FiltersStripProps extends RootComponentProps {
+    /** Currently selected saved filter label */
+    selectedFilter?: string;
+    /** Callback when saved filter selection changes */
+    setSelectedFilter?: (label: string) => void;
+    /** Recent filters for dropdown */
+    recentFilters?: RecentFilterItem[];
+    /** Badge options for saved filter category */
+    savedFiltersBadge?: SavedFilterBadge[];
+    /** Saved filter list options */
+    savedFilterLists?: SavedFilterListOption[];
+    /** Tag groups shown in the strip (label + values) */
+    filterTags?: FilterTagItem[];
+    /** Called when a saved filter badge is selected */
+    handleBadgeChange?: (badge: SavedFilterBadge) => void;
+    /** Called when Apply is clicked in dropdown */
+    handleApplyFilter?: (selectedFilter: string) => void;
+    /** Called when Cancel is clicked in dropdown */
+    handleCancelFilter?: () => void;
+    /** Label for the "All Filters" button */
+    filterButtonLabel?: string;
+    /** Click handler for the filter button */
+    filterButtonClick?: () => void;
+    /** Props passed to the filter button */
+    filterButtonProps?: Record<string, unknown>;
+    /** Hide the selected filter badge in dropdown */
+    hideSelectedFilterBadge?: boolean;
+    /** Initially selected badge label */
+    savedFilterSelectedBadge?: string | null;
+    /** Called when dropdown open state changes */
+    handleSavedRecentFilterDropdown?: () => void;
+    /** Label for the filter dropdown (e.g. "Filters Applied") */
+    filterDropDownLabel?: string;
+}
+//# sourceMappingURL=FiltersStrip.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FiltersStrip.types.d.ts","sourceRoot":"","sources":["../../../src/components/FiltersStrip/FiltersStrip.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAEtD,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,EAAE,cAAc,EAAE,CAAC;IACzB,aAAa,CAAC,EAAE,CAAC,GAAG,EAAE,aAAa,KAAK,IAAI,CAAC;CAC9C;AAED,MAAM,WAAW,gBAAgB;IAC/B,SAAS,EAAE;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAC/B,kBAAkB,EAAE,CAAC,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAAC;CACxD;AAED,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,iBAAkB,SAAQ,kBAAkB;IAC3D,4CAA4C;IAC5C,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,mDAAmD;IACnD,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,kCAAkC;IAClC,aAAa,CAAC,EAAE,gBAAgB,EAAE,CAAC;IACnC,8CAA8C;IAC9C,iBAAiB,CAAC,EAAE,gBAAgB,EAAE,CAAC;IACvC,gCAAgC;IAChC,gBAAgB,CAAC,EAAE,qBAAqB,EAAE,CAAC;IAC3C,qDAAqD;IACrD,UAAU,CAAC,EAAE,aAAa,EAAE,CAAC;IAC7B,mDAAmD;IACnD,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAC;IACtD,+CAA+C;IAC/C,iBAAiB,CAAC,EAAE,CAAC,cAAc,EAAE,MAAM,KAAK,IAAI,CAAC;IACrD,gDAAgD;IAChD,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;IAChC,yCAAyC;IACzC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,0CAA0C;IAC1C,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC/B,wCAAwC;IACxC,iBAAiB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC5C,iDAAiD;IACjD,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,qCAAqC;IACrC,wBAAwB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzC,8CAA8C;IAC9C,+BAA+B,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7C,6DAA6D;IAC7D,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAC9B"}

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

@@ -0,0 +1,14 @@
+import { FiltersStripProps } from './FiltersStrip.types';
+
+export type { FiltersStripProps, FilterTagItem, FilterTagValue, RecentFilterItem, SavedFilterBadge, SavedFilterListOption, } from './FiltersStrip.types';
+export { FilterDropDown } from './FilterDropDown';
+export { FilterSlider } from './FilterSlider';
+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, id, 'data-testid': dataTestId, 'aria-label': ariaLabel, role, }: FiltersStripProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace FiltersStrip {
+    var displayName: string;
+}
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +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,EAAE,EACF,aAAa,EAAE,UAAU,EACzB,YAAY,EAAE,SAAqB,EACnC,IAAe,GAChB,EAAE,iBAAiB,2CA+GnB;yBArIe,YAAY"}

package/dist/components/FiltersStrip/index.js

@@ -0,0 +1,152 @@
+!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";
+import { toSentenceCase } from "../../utils/helper.js";
+import { Button } from "../Button/index.js";
+import { Tag } from "../Tag/index.js";
+import { FilterDropDown } from "./FilterDropDown.js";
+import { FilterSlider } from "./FilterSlider.js";
+
+function FiltersStrip({
+  selectedFilter = "",
+  setSelectedFilter = () => {
+  },
+  recentFilters = [],
+  savedFiltersBadge = [],
+  savedFilterLists = [],
+  filterTags = [],
+  handleBadgeChange = () => {
+  },
+  handleApplyFilter,
+  handleCancelFilter,
+  filterButtonLabel = "All Filters",
+  filterButtonClick,
+  filterButtonProps,
+  hideSelectedFilterBadge = false,
+  savedFilterSelectedBadge = null,
+  handleSavedRecentFilterDropdown = () => {
+  },
+  filterDropDownLabel,
+  className,
+  id,
+  "data-testid": dataTestId,
+  "aria-label": ariaLabel = "Filters",
+  role = "region"
+}) {
+  const [showSeparator, setShowSeparator] = useState(false);
+  const [currDropShow, setCurrDropShow] = useState(null);
+  const handleCurrDropSet = useCallback((val) => {
+    setCurrDropShow(val);
+  }, []);
+  const handleClick = (event) => {
+    if (!event.target.closest(".impact-selected-filter-tags-dropdown")) {
+      setCurrDropShow(null);
+    }
+  };
+  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: [
+            /* @__PURE__ */ jsx(
+              FilterDropDown,
+              {
+                filterDropDownLabel,
+                handleApplyFilter: handleApplyFilter ?? (() => {
+                }),
+                handleBadgeChange,
+                handleCancelFilter: handleCancelFilter ?? (() => {
+                }),
+                handleSavedRecentFilterDropdown,
+                hideSelectedFilterBadge,
+                recentFilters,
+                savedFilterLists,
+                savedFiltersBadge,
+                savedFilterSelectedBadge,
+                selectedFilter,
+                setSelectedFilter
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "impact-filter-strip-separator" })
+          ] }),
+          filterTags.length > 0 && /* @__PURE__ */ jsx(
+            FilterSlider,
+            {
+              containerChildren: (item, index) => /* @__PURE__ */ jsxs(Fragment, { children: [
+                index !== 0 && /* @__PURE__ */ jsx("span", { className: "impact-filter-strip-separator" }),
+                /* @__PURE__ */ jsxs("div", { className: "impact-selected-filter-label", children: [
+                  toSentenceCase(item.label),
+                  " ",
+                  item.required && /* @__PURE__ */ jsx("span", { style: { color: "red" }, children: "*" })
+                ] })
+              ] }),
+              currDropShow,
+              handleClickOutside: handleClick,
+              list: filterTags,
+              setShowSeparator,
+              tagsChildren: (item, index) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+                item.values.slice(0, 2).map((value, idx) => /* @__PURE__ */ jsx(
+                  Tag,
+                  {
+                    label: value.label,
+                    size: "medium",
+                    variant: "solid",
+                    onDelete: () => {
+                    }
+                  },
+                  idx
+                )),
+                item.values.length > 2 && /* @__PURE__ */ jsx(
+                  Tag,
+                  {
+                    label: `+${item.values.length - 2}`,
+                    size: "medium",
+                    variant: "solid",
+                    onClick: () => {
+                      handleCurrDropSet(currDropShow === index ? null : index);
+                    }
+                  }
+                )
+              ] }),
+              onNextClick: () => {
+                setCurrDropShow(null);
+              },
+              onPrevClick: () => {
+                setCurrDropShow(null);
+              }
+            }
+          )
+        ] }),
+        filterButtonLabel && /* @__PURE__ */ jsxs("div", { className: "impact-info-panel-right-container", children: [
+          showSeparator && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "impact-filter-strip-separator" }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              icon: /* @__PURE__ */ jsx(default_1, { fontSize: "small" }),
+              iconPlacement: "left",
+              size: "large",
+              variant: "tertiary",
+              onClick: filterButtonClick,
+              ...filterButtonProps,
+              children: filterButtonLabel
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+FiltersStrip.displayName = "FiltersStrip";
+export {
+  FilterDropDown,
+  FilterSlider,
+  FiltersStrip
+};