@backstage-community/plugin-apiiro 0.1.0

package/dist/components/filters/DiscoveredOnFilter.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DiscoveredOnFilter.esm.js","sources":["../../../src/components/filters/DiscoveredOnFilter.tsx"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport { MouseEvent, useMemo, useRef, useState } from 'react';\nimport Box from '@mui/material/Box';\nimport ButtonBase from '@mui/material/ButtonBase';\nimport Typography from '@mui/material/Typography';\nimport Popper from '@mui/material/Popper';\nimport ClickAwayListener from '@mui/material/ClickAwayListener';\nimport Tooltip from '@mui/material/Tooltip';\nimport IconButton from '@mui/material/IconButton';\nimport Skeleton from '@mui/material/Skeleton';\nimport KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';\nimport CloseIcon from '@mui/icons-material/Close';\nimport { alpha } from '@mui/material/styles';\n\nimport {\n  CalendarDatePicker,\n  CalendarDateValue,\n  CalendarQuickRange,\n} from '../CalendarDatePicker';\n\ntype DiscoveredOnFilterProps = {\n  label?: string;\n  value: CalendarDateValue;\n  quickRanges: CalendarQuickRange[];\n  selectedQuickRange: string;\n  onChange: (value: CalendarDateValue) => void;\n  onQuickRangeSelect: (range: CalendarQuickRange) => void;\n  loading?: boolean;\n};\n\nconst hasCompleteRange = (value: CalendarDateValue): value is [Date, Date] => {\n  if (!Array.isArray(value)) {\n    return false;\n  }\n  const [start, end] = value;\n  return start instanceof Date && end instanceof Date;\n};\n\n// Helper function to calculate the difference between two dates in years\nconst getYearsDifference = (startDate: Date, endDate: Date): number => {\n  const start = new Date(startDate);\n  const end = new Date(endDate);\n\n  // Calculate the difference in milliseconds\n  const diffTime = Math.abs(end.getTime() - start.getTime());\n\n  // Convert to years (365.25 days per year to account for leap years)\n  const diffYears = diffTime / (1000 * 60 * 60 * 24 * 365.25);\n\n  return diffYears;\n};\n\n// Helper function to format the date range span with years and days\nconst formatDateRangeSpan = (startDate: Date, endDate: Date): string => {\n  const start = new Date(startDate);\n  const end = new Date(endDate);\n\n  // Calculate the difference in milliseconds\n  const diffTime = Math.abs(end.getTime() - start.getTime());\n\n  // Convert to total days\n  const totalDays = diffTime / (1000 * 60 * 60 * 24);\n\n  // Calculate years and remaining days\n  const years = Math.floor(totalDays / 365.25);\n  const remainingDays = Math.floor(totalDays % 365.25);\n\n  if (years > 0) {\n    return `${years} year${years !== 1 ? 's' : ''} and ${remainingDays} day${\n      remainingDays !== 1 ? 's' : ''\n    }`;\n  }\n\n  return `${Math.floor(totalDays)} day${\n    Math.floor(totalDays) !== 1 ? 's' : ''\n  }`;\n};\n\n// Maximum allowed range in years\nconst MAX_RANGE_YEARS = 10;\n\nexport const DiscoveredOnFilter = ({\n  label = 'Discovered on',\n  value,\n  quickRanges,\n  selectedQuickRange,\n  onChange,\n  onQuickRangeSelect,\n  loading = false,\n}: DiscoveredOnFilterProps) => {\n  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);\n  const [validationError, setValidationError] = useState<string | null>(null);\n  const skipCloseRef = useRef(false);\n\n  const isOpen = Boolean(anchorEl);\n\n  const displayLabel = useMemo(() => {\n    if (selectedQuickRange !== 'custom') {\n      const preset = quickRanges.find(\n        range => range.value === selectedQuickRange,\n      );\n      if (preset) {\n        return `${label}: ${preset.label}`;\n      }\n    }\n\n    if (hasCompleteRange(value)) {\n      const [from, to] = value;\n      const formatDate = (date: Date) =>\n        date.toLocaleDateString(undefined, {\n          year: 'numeric',\n          month: 'short',\n          day: 'numeric',\n        });\n      return `${label}: ${formatDate(from)} – ${formatDate(to)}`;\n    }\n\n    return label;\n  }, [label, quickRanges, selectedQuickRange, value]);\n\n  const hasSelection = displayLabel !== label;\n\n  const handleToggle = (event: MouseEvent<HTMLElement>) => {\n    setAnchorEl(prev => (prev ? null : event.currentTarget));\n  };\n\n  const handleClose = () => {\n    setAnchorEl(null);\n    setValidationError(null); // Clear validation error when dropdown closes\n  };\n\n  const handleCalendarChange = (nextValue: CalendarDateValue) => {\n    // Clear any previous validation errors\n    setValidationError(null);\n\n    // Validate the date range if it's complete\n    if (hasCompleteRange(nextValue)) {\n      const [startDate, endDate] = nextValue;\n      const yearsDiff = getYearsDifference(startDate, endDate);\n\n      if (yearsDiff > MAX_RANGE_YEARS) {\n        const spanText = formatDateRangeSpan(startDate, endDate);\n        setValidationError(\n          `Date range cannot exceed ${MAX_RANGE_YEARS} years. Current selection spans ${spanText}.`,\n        );\n        return; // Don't proceed with the change\n      }\n    }\n\n    onChange(nextValue);\n\n    const shouldSkipClose = skipCloseRef.current;\n    skipCloseRef.current = false;\n\n    if (shouldSkipClose) {\n      return;\n    }\n\n    if (hasCompleteRange(nextValue)) {\n      handleClose();\n    }\n  };\n\n  const handleQuickRangeClick = (range: CalendarQuickRange) => {\n    // Clear any previous validation errors\n    setValidationError(null);\n\n    // Validate the quick range if it's not custom\n    if (range.value !== 'custom') {\n      const rangeValue = range.getRange();\n      if (rangeValue && hasCompleteRange(rangeValue)) {\n        const [startDate, endDate] = rangeValue;\n        const yearsDiff = getYearsDifference(startDate, endDate);\n\n        if (yearsDiff > MAX_RANGE_YEARS) {\n          const spanText = formatDateRangeSpan(startDate, endDate);\n          setValidationError(\n            `\"${range.label}\" preset spans ${spanText}, which exceeds ${MAX_RANGE_YEARS} years limit. Please use a custom range.`,\n          );\n          return; // Don't proceed with the selection\n        }\n      }\n    }\n\n    skipCloseRef.current = range.value !== 'custom';\n    onQuickRangeSelect(range);\n  };\n\n  const handleClear = (event: MouseEvent<HTMLElement>) => {\n    event.stopPropagation();\n    skipCloseRef.current = false;\n    setValidationError(null); // Clear any validation errors\n    onChange([]);\n    handleClose();\n  };\n\n  if (loading) {\n    return (\n      <Skeleton\n        variant=\"rounded\"\n        width={140}\n        height={36}\n        sx={{\n          borderRadius: 999,\n        }}\n      />\n    );\n  }\n\n  return (\n    <Box data-testid=\"discovered-on-filter\" sx={{ position: 'relative' }}>\n      <ButtonBase\n        className=\"discovered-on-button\"\n        onClick={handleToggle}\n        sx={theme => {\n          const primaryMain = theme.palette.primary.main;\n          const closedBorder = theme.palette.divider;\n          const isDark = theme.palette.mode === 'dark';\n          const hoverBackground = alpha(primaryMain, isDark ? 0.28 : 0.12);\n          const selectedBorder = isDark\n            ? theme.palette.primary.light\n            : theme.palette.primary.dark;\n          const selectedBackground = alpha(primaryMain, isDark ? 0.2 : 0.06);\n\n          let backgroundColor = theme.palette.background.paper;\n          if (isOpen) {\n            backgroundColor = hoverBackground;\n          } else if (hasSelection) {\n            backgroundColor = selectedBackground;\n          }\n\n          let borderColor = closedBorder;\n          if (isOpen) {\n            borderColor = primaryMain;\n          } else if (hasSelection) {\n            borderColor = selectedBorder;\n          }\n\n          let boxShadow = 'none';\n          if (isOpen) {\n            boxShadow = '0 4px 12px rgba(38, 54, 140, 0.18)';\n          } else if (hasSelection) {\n            boxShadow = '0 2px 8px rgba(38, 54, 140, 0.12)';\n          }\n\n          return {\n            borderRadius: 999,\n            padding: theme.spacing(0.75, 1.75),\n            border: `1px solid ${borderColor}`,\n            display: 'flex',\n            alignItems: 'center',\n            gap: 0.5,\n            backgroundColor,\n            boxShadow,\n            transition: 'all 0.2s ease',\n            minHeight: 38,\n          };\n        }}\n      >\n        <Typography\n          variant=\"body2\"\n          sx={theme => ({\n            whiteSpace: 'nowrap',\n            color: theme.palette.text.primary,\n          })}\n        >\n          {displayLabel}\n        </Typography>\n        {hasSelection ? (\n          <Tooltip title=\"Clear and remove filter\">\n            <IconButton\n              size=\"small\"\n              onClick={handleClear}\n              sx={theme => ({\n                color: theme.palette.text.secondary,\n                '&:hover': {\n                  color: theme.palette.primary.main,\n                },\n              })}\n            >\n              <CloseIcon fontSize=\"inherit\" />\n            </IconButton>\n          </Tooltip>\n        ) : null}\n        <KeyboardArrowDownIcon\n          fontSize=\"small\"\n          sx={theme => ({\n            transform: isOpen ? 'rotate(180deg)' : 'none',\n            transition: 'transform 0.2s ease',\n            color: hasSelection\n              ? theme.palette.primary.main\n              : theme.palette.text.secondary,\n          })}\n        />\n      </ButtonBase>\n      <Popper\n        open={isOpen}\n        anchorEl={anchorEl}\n        placement=\"bottom-start\"\n        modifiers={[\n          {\n            name: 'offset',\n            options: { offset: [0, 8] },\n          },\n        ]}\n      >\n        <ClickAwayListener onClickAway={handleClose}>\n          <Box sx={{ mt: 1 }}>\n            <CalendarDatePicker\n              value={value}\n              onChange={handleCalendarChange}\n              selectedQuickRange={selectedQuickRange}\n              onQuickRangeSelect={handleQuickRangeClick}\n              quickRanges={quickRanges}\n            />\n            {validationError && (\n              <Box\n                sx={{\n                  mt: 1,\n                  p: 1,\n                  backgroundColor: 'error.light',\n                  borderRadius: 1,\n                  border: '1px solid',\n                  borderColor: 'error.main',\n                }}\n              >\n                <Typography\n                  variant=\"caption\"\n                  sx={{\n                    color: 'error.contrastText',\n                    fontWeight: 500,\n                  }}\n                >\n                  {validationError}\n                </Typography>\n              </Box>\n            )}\n          </Box>\n        </ClickAwayListener>\n      </Popper>\n    </Box>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/filters/FilterDropdown.esm.js

@@ -0,0 +1,325 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useState, useMemo, isValidElement, cloneElement } from 'react';
+import Box from '@mui/material/Box';
+import ButtonBase from '@mui/material/ButtonBase';
+import Popper from '@mui/material/Popper';
+import Paper from '@mui/material/Paper';
+import ClickAwayListener from '@mui/material/ClickAwayListener';
+import Typography from '@mui/material/Typography';
+import Skeleton from '@mui/material/Skeleton';
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+import { styled, alpha, useTheme } from '@mui/material/styles';
+import { FilterDropdownSearch } from './FilterDropdownSearch.esm.js';
+import { FilterDropdownClear } from './FilterDropdownClear.esm.js';
+import { FilterDropdownList } from './FilterDropdownList.esm.js';
+import { SimpleTooltip } from '../SimpleTooltip.esm.js';
+import { getCountBadgeColors } from '../../theme/themeUtils.esm.js';
+
+const DropdownButton = styled(ButtonBase, {
+  shouldForwardProp: (prop) => prop !== "open" && prop !== "hasSelection"
+})(({ theme, open, hasSelection }) => {
+  const primaryMain = theme.palette.primary.main;
+  const closedBorder = theme.palette.divider;
+  const isDark = theme.palette.mode === "dark";
+  const hoverBackground = alpha(primaryMain, isDark ? 0.28 : 0.12);
+  const selectedBorder = isDark ? theme.palette.primary.light : theme.palette.primary.dark;
+  const selectedBackground = alpha(primaryMain, isDark ? 0.2 : 0.06);
+  let buttonBackground = theme.palette.background.paper;
+  if (open) {
+    buttonBackground = hoverBackground;
+  } else if (hasSelection) {
+    buttonBackground = selectedBackground;
+  }
+  let borderColor = closedBorder;
+  if (open) {
+    borderColor = primaryMain;
+  } else if (hasSelection) {
+    borderColor = selectedBorder;
+  }
+  let boxShadow = "none";
+  if (open) {
+    boxShadow = "0 4px 12px rgba(38, 54, 140, 0.18)";
+  } else if (hasSelection) {
+    boxShadow = "0 2px 8px rgba(38, 54, 140, 0.12)";
+  }
+  const hoverColor = hasSelection ? alpha(primaryMain, isDark ? 0.24 : 0.1) : hoverBackground;
+  return {
+    display: "flex",
+    alignItems: "center",
+    gap: theme.spacing(1),
+    padding: theme.spacing(0.75, 1.5),
+    borderRadius: 999,
+    border: `1px solid ${borderColor}`,
+    backgroundColor: buttonBackground,
+    transition: "all 0.2s ease",
+    boxShadow,
+    "&:hover": {
+      backgroundColor: hoverColor
+    },
+    "& .MuiSvgIcon-root": {
+      fontSize: 18,
+      color: hasSelection ? theme.palette.primary.main : theme.palette.text.secondary
+    }
+  };
+});
+const CountBadge = styled("span")(({ theme }) => {
+  const badgeColors = getCountBadgeColors(theme);
+  return {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    minWidth: 26,
+    padding: theme.spacing(0.25, 1),
+    borderRadius: 999,
+    backgroundColor: badgeColors.background,
+    color: badgeColors.text,
+    fontSize: 12,
+    fontWeight: 600
+  };
+});
+const FilterDropdown = ({
+  label,
+  options,
+  selectedValues,
+  onChange,
+  placeholder,
+  searchPlaceholder = "Search\u2026",
+  clearLabel = "Clear selection",
+  loading = false
+}) => {
+  const [anchorEl, setAnchorEl] = useState(null);
+  const [searchValue, setSearchValue] = useState("");
+  const theme = useTheme();
+  const optionLabelMap = useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    options.forEach((option) => {
+      map.set(option.value, option.label);
+    });
+    return map;
+  }, [options]);
+  const selectedSet = useMemo(() => new Set(selectedValues), [selectedValues]);
+  const firstSelectedOption = useMemo(() => {
+    const firstValue = selectedValues[0];
+    if (!firstValue) {
+      return void 0;
+    }
+    return options.find((option) => option.value === firstValue);
+  }, [options, selectedValues]);
+  const firstSelectionLabel = useMemo(() => {
+    const firstValue = selectedValues[0];
+    return firstValue ? optionLabelMap.get(firstValue) : void 0;
+  }, [optionLabelMap, selectedValues]);
+  const firstSelectionIcon = useMemo(() => {
+    const icon = firstSelectedOption?.icon;
+    if (!icon) {
+      return void 0;
+    }
+    if (isValidElement(icon)) {
+      return cloneElement(icon, { key: "selected-icon" });
+    }
+    return icon;
+  }, [firstSelectedOption]);
+  const additionalCount = selectedValues.length > 1 ? selectedValues.length - 1 : 0;
+  const remainingItemsTooltip = useMemo(() => {
+    if (selectedValues.length <= 1) {
+      return "";
+    }
+    const remainingItems = selectedValues.slice(1).map((value) => {
+      const option = options.find((opt) => opt.value === value);
+      return option?.label ?? value;
+    });
+    return remainingItems.join(", ");
+  }, [selectedValues, options]);
+  const hasSelection = selectedValues.length > 0;
+  const filteredOptions = useMemo(() => {
+    const normalizedSearch = searchValue.trim().toLowerCase();
+    if (!normalizedSearch) {
+      return options;
+    }
+    return options.filter(
+      (option) => option.label.toLowerCase().includes(normalizedSearch)
+    );
+  }, [options, searchValue]);
+  const handleToggle = (value) => {
+    const next = new Set(selectedValues);
+    if (next.has(value)) {
+      next.delete(value);
+    } else {
+      next.add(value);
+    }
+    const ordered = options.filter((option) => next.has(option.value)).map((option) => option.value);
+    onChange(ordered);
+  };
+  const handleClear = () => {
+    if (!selectedValues.length) {
+      return;
+    }
+    setSearchValue("");
+    onChange([]);
+  };
+  const handleButtonClick = (event) => {
+    if (anchorEl) {
+      setAnchorEl(null);
+      setSearchValue("");
+      return;
+    }
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+    setSearchValue("");
+  };
+  const isOpen = Boolean(anchorEl);
+  if (loading) {
+    return /* @__PURE__ */ jsx(
+      Skeleton,
+      {
+        variant: "rounded",
+        width: 120,
+        height: 36,
+        sx: {
+          borderRadius: 999
+        }
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      DropdownButton,
+      {
+        open: isOpen,
+        hasSelection,
+        onClick: handleButtonClick,
+        sx: {
+          color: hasSelection ? theme.palette.primary.dark : theme.palette.text.secondary
+        },
+        children: [
+          hasSelection ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              Typography,
+              {
+                variant: "body2",
+                sx: {
+                  color: theme.palette.text.primary,
+                  whiteSpace: "nowrap"
+                },
+                children: `${label}:`
+              }
+            ),
+            firstSelectionIcon && /* @__PURE__ */ jsx(Box, { sx: { display: "flex", alignItems: "center" }, children: firstSelectionIcon }),
+            /* @__PURE__ */ jsx(
+              Typography,
+              {
+                variant: "body2",
+                sx: {
+                  color: theme.palette.text.primary,
+                  whiteSpace: "nowrap"
+                },
+                children: firstSelectionLabel
+              }
+            )
+          ] }) : /* @__PURE__ */ jsx(
+            Typography,
+            {
+              variant: "body2",
+              sx: {
+                color: theme.palette.text.primary,
+                whiteSpace: "nowrap"
+              },
+              children: label
+            }
+          ),
+          additionalCount > 0 && /* @__PURE__ */ jsx(
+            SimpleTooltip,
+            {
+              title: remainingItemsTooltip,
+              placement: "top",
+              tooltipProps: {
+                componentsProps: {
+                  tooltip: {
+                    sx: {
+                      whiteSpace: "normal",
+                      maxWidth: "400px"
+                    }
+                  }
+                }
+              },
+              children: /* @__PURE__ */ jsx(CountBadge, { children: `+${additionalCount}` })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            KeyboardArrowDownIcon,
+            {
+              fontSize: "small",
+              sx: {
+                transform: isOpen ? "rotate(180deg)" : "none",
+                transition: "transform 0.2s ease",
+                color: theme.palette.text.secondary
+              }
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Popper,
+      {
+        open: isOpen,
+        anchorEl,
+        placement: "bottom-start",
+        modifiers: [
+          {
+            name: "offset",
+            options: {
+              offset: [0, 8]
+            }
+          }
+        ],
+        children: /* @__PURE__ */ jsx(ClickAwayListener, { onClickAway: handleClose, children: /* @__PURE__ */ jsxs(
+          Paper,
+          {
+            sx: {
+              borderRadius: 3,
+              boxShadow: "0 16px 32px rgba(31, 45, 98, 0.18)",
+              width: 280,
+              maxHeight: 360,
+              display: "flex",
+              flexDirection: "column",
+              overflow: "hidden"
+            },
+            children: [
+              /* @__PURE__ */ jsx(Box, { sx: { p: 2 }, children: /* @__PURE__ */ jsx(
+                FilterDropdownSearch,
+                {
+                  value: searchValue,
+                  onChange: setSearchValue,
+                  placeholder: searchPlaceholder
+                }
+              ) }),
+              /* @__PURE__ */ jsx(
+                FilterDropdownList,
+                {
+                  options: filteredOptions,
+                  selectedValues: selectedSet,
+                  onToggle: handleToggle,
+                  placeholder
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                FilterDropdownClear,
+                {
+                  disabled: !hasSelection,
+                  label: clearLabel,
+                  onClear: handleClear
+                }
+              )
+            ]
+          }
+        ) })
+      }
+    )
+  ] });
+};
+
+export { FilterDropdown };
+//# sourceMappingURL=FilterDropdown.esm.js.map

package/dist/components/filters/FilterDropdown.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterDropdown.esm.js","sources":["../../../src/components/filters/FilterDropdown.tsx"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport { cloneElement, isValidElement, useMemo, useState } from 'react';\nimport Box from '@mui/material/Box';\nimport ButtonBase from '@mui/material/ButtonBase';\nimport Popper from '@mui/material/Popper';\nimport Paper from '@mui/material/Paper';\nimport ClickAwayListener from '@mui/material/ClickAwayListener';\nimport Typography from '@mui/material/Typography';\nimport Skeleton from '@mui/material/Skeleton';\nimport KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';\nimport { alpha, styled, useTheme } from '@mui/material/styles';\nimport { FilterDropdownSearch } from './FilterDropdownSearch';\nimport { FilterDropdownClear } from './FilterDropdownClear';\nimport { FilterDropdownList } from './FilterDropdownList';\nimport { FilterDropdownProps } from './FilterDropdown.types';\nimport { SimpleTooltip } from '../SimpleTooltip';\nimport { getCountBadgeColors } from '../../theme/themeUtils';\n\ntype DropdownButtonProps = {\n  open: boolean;\n  hasSelection: boolean;\n};\n\nconst DropdownButton = styled(ButtonBase, {\n  shouldForwardProp: prop => prop !== 'open' && prop !== 'hasSelection',\n})<DropdownButtonProps>(({ theme, open, hasSelection }) => {\n  const primaryMain = theme.palette.primary.main;\n  const closedBorder = theme.palette.divider;\n  const isDark = theme.palette.mode === 'dark';\n  const hoverBackground = alpha(primaryMain, isDark ? 0.28 : 0.12);\n  const selectedBorder = isDark\n    ? theme.palette.primary.light\n    : theme.palette.primary.dark;\n  const selectedBackground = alpha(primaryMain, isDark ? 0.2 : 0.06);\n  let buttonBackground = theme.palette.background.paper;\n  if (open) {\n    buttonBackground = hoverBackground;\n  } else if (hasSelection) {\n    buttonBackground = selectedBackground;\n  }\n\n  let borderColor = closedBorder;\n  if (open) {\n    borderColor = primaryMain;\n  } else if (hasSelection) {\n    borderColor = selectedBorder;\n  }\n\n  let boxShadow = 'none';\n  if (open) {\n    boxShadow = '0 4px 12px rgba(38, 54, 140, 0.18)';\n  } else if (hasSelection) {\n    boxShadow = '0 2px 8px rgba(38, 54, 140, 0.12)';\n  }\n\n  const hoverColor = hasSelection\n    ? alpha(primaryMain, isDark ? 0.24 : 0.1)\n    : hoverBackground;\n\n  return {\n    display: 'flex',\n    alignItems: 'center',\n    gap: theme.spacing(1),\n    padding: theme.spacing(0.75, 1.5),\n    borderRadius: 999,\n    border: `1px solid ${borderColor}`,\n    backgroundColor: buttonBackground,\n    transition: 'all 0.2s ease',\n    boxShadow,\n    '&:hover': {\n      backgroundColor: hoverColor,\n    },\n    '& .MuiSvgIcon-root': {\n      fontSize: 18,\n      color: hasSelection\n        ? theme.palette.primary.main\n        : theme.palette.text.secondary,\n    },\n  };\n});\n\nconst CountBadge = styled('span')(({ theme }) => {\n  const badgeColors = getCountBadgeColors(theme);\n  return {\n    display: 'inline-flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    minWidth: 26,\n    padding: theme.spacing(0.25, 1),\n    borderRadius: 999,\n    backgroundColor: badgeColors.background,\n    color: badgeColors.text,\n    fontSize: 12,\n    fontWeight: 600,\n  };\n});\n\nexport const FilterDropdown = ({\n  label,\n  options,\n  selectedValues,\n  onChange,\n  placeholder,\n  searchPlaceholder = 'Search…',\n  clearLabel = 'Clear selection',\n  loading = false,\n}: FilterDropdownProps) => {\n  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);\n  const [searchValue, setSearchValue] = useState('');\n  const theme = useTheme();\n\n  const optionLabelMap = useMemo(() => {\n    const map = new Map<string, string>();\n    options.forEach(option => {\n      map.set(option.value, option.label);\n    });\n    return map;\n  }, [options]);\n\n  const selectedSet = useMemo(() => new Set(selectedValues), [selectedValues]);\n\n  const firstSelectedOption = useMemo(() => {\n    const firstValue = selectedValues[0];\n    if (!firstValue) {\n      return undefined;\n    }\n    return options.find(option => option.value === firstValue);\n  }, [options, selectedValues]);\n\n  const firstSelectionLabel = useMemo(() => {\n    const firstValue = selectedValues[0];\n    return firstValue ? optionLabelMap.get(firstValue) : undefined;\n  }, [optionLabelMap, selectedValues]);\n\n  const firstSelectionIcon = useMemo(() => {\n    const icon = firstSelectedOption?.icon;\n    if (!icon) {\n      return undefined;\n    }\n    if (isValidElement(icon)) {\n      return cloneElement(icon, { key: 'selected-icon' });\n    }\n    return icon;\n  }, [firstSelectedOption]);\n\n  const additionalCount =\n    selectedValues.length > 1 ? selectedValues.length - 1 : 0;\n\n  const remainingItemsTooltip = useMemo(() => {\n    if (selectedValues.length <= 1) {\n      return '';\n    }\n    const remainingItems = selectedValues.slice(1).map(value => {\n      const option = options.find(opt => opt.value === value);\n      return option?.label ?? value;\n    });\n    return remainingItems.join(', ');\n  }, [selectedValues, options]);\n\n  const hasSelection = selectedValues.length > 0;\n\n  const filteredOptions = useMemo(() => {\n    const normalizedSearch = searchValue.trim().toLowerCase();\n    if (!normalizedSearch) {\n      return options;\n    }\n    return options.filter(option =>\n      option.label.toLowerCase().includes(normalizedSearch),\n    );\n  }, [options, searchValue]);\n\n  const handleToggle = (value: string) => {\n    const next = new Set(selectedValues);\n    if (next.has(value)) {\n      next.delete(value);\n    } else {\n      next.add(value);\n    }\n    const ordered = options\n      .filter(option => next.has(option.value))\n      .map(option => option.value);\n    onChange(ordered);\n  };\n\n  const handleClear = () => {\n    if (!selectedValues.length) {\n      return;\n    }\n    setSearchValue('');\n    onChange([]);\n  };\n\n  const handleButtonClick = (event: React.MouseEvent<HTMLElement>) => {\n    if (anchorEl) {\n      setAnchorEl(null);\n      setSearchValue('');\n      return;\n    }\n    setAnchorEl(event.currentTarget);\n  };\n\n  const handleClose = () => {\n    setAnchorEl(null);\n    setSearchValue('');\n  };\n\n  const isOpen = Boolean(anchorEl);\n\n  if (loading) {\n    return (\n      <Skeleton\n        variant=\"rounded\"\n        width={120}\n        height={36}\n        sx={{\n          borderRadius: 999,\n        }}\n      />\n    );\n  }\n\n  return (\n    <>\n      <DropdownButton\n        open={isOpen}\n        hasSelection={hasSelection}\n        onClick={handleButtonClick}\n        sx={{\n          color: hasSelection\n            ? theme.palette.primary.dark\n            : theme.palette.text.secondary,\n        }}\n      >\n        {hasSelection ? (\n          <>\n            <Typography\n              variant=\"body2\"\n              sx={{\n                color: theme.palette.text.primary,\n                whiteSpace: 'nowrap',\n              }}\n            >\n              {`${label}:`}\n            </Typography>\n            {firstSelectionIcon && (\n              <Box sx={{ display: 'flex', alignItems: 'center' }}>\n                {firstSelectionIcon}\n              </Box>\n            )}\n            <Typography\n              variant=\"body2\"\n              sx={{\n                color: theme.palette.text.primary,\n                whiteSpace: 'nowrap',\n              }}\n            >\n              {firstSelectionLabel}\n            </Typography>\n          </>\n        ) : (\n          <Typography\n            variant=\"body2\"\n            sx={{\n              color: theme.palette.text.primary,\n              whiteSpace: 'nowrap',\n            }}\n          >\n            {label}\n          </Typography>\n        )}\n        {additionalCount > 0 && (\n          <SimpleTooltip\n            title={remainingItemsTooltip}\n            placement=\"top\"\n            tooltipProps={{\n              componentsProps: {\n                tooltip: {\n                  sx: {\n                    whiteSpace: 'normal',\n                    maxWidth: '400px',\n                  },\n                },\n              },\n            }}\n          >\n            <CountBadge>{`+${additionalCount}`}</CountBadge>\n          </SimpleTooltip>\n        )}\n        <KeyboardArrowDownIcon\n          fontSize=\"small\"\n          sx={{\n            transform: isOpen ? 'rotate(180deg)' : 'none',\n            transition: 'transform 0.2s ease',\n            color: theme.palette.text.secondary,\n          }}\n        />\n      </DropdownButton>\n\n      <Popper\n        open={isOpen}\n        anchorEl={anchorEl}\n        placement=\"bottom-start\"\n        modifiers={[\n          {\n            name: 'offset',\n            options: {\n              offset: [0, 8],\n            },\n          },\n        ]}\n      >\n        <ClickAwayListener onClickAway={handleClose}>\n          <Paper\n            sx={{\n              borderRadius: 3,\n              boxShadow: '0 16px 32px rgba(31, 45, 98, 0.18)',\n              width: 280,\n              maxHeight: 360,\n              display: 'flex',\n              flexDirection: 'column',\n              overflow: 'hidden',\n            }}\n          >\n            <Box sx={{ p: 2 }}>\n              <FilterDropdownSearch\n                value={searchValue}\n                onChange={setSearchValue}\n                placeholder={searchPlaceholder}\n              />\n            </Box>\n\n            <FilterDropdownList\n              options={filteredOptions}\n              selectedValues={selectedSet}\n              onToggle={handleToggle}\n              placeholder={placeholder}\n            />\n\n            <FilterDropdownClear\n              disabled={!hasSelection}\n              label={clearLabel}\n              onClear={handleClear}\n            />\n          </Paper>\n        </ClickAwayListener>\n      </Popper>\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAqCA,MAAM,cAAA,GAAiB,OAAO,UAAA,EAAY;AAAA,EACxC,iBAAA,EAAmB,CAAA,IAAA,KAAQ,IAAA,KAAS,MAAA,IAAU,IAAA,KAAS;AACzD,CAAC,EAAuB,CAAC,EAAE,KAAA,EAAO,IAAA,EAAM,cAAa,KAAM;AACzD,EAAA,MAAM,WAAA,GAAc,KAAA,CAAM,OAAA,CAAQ,OAAA,CAAQ,IAAA;AAC1C,EAAA,MAAM,YAAA,GAAe,MAAM,OAAA,CAAQ,OAAA;AACnC,EAAA,MAAM,MAAA,GAAS,KAAA,CAAM,OAAA,CAAQ,IAAA,KAAS,MAAA;AACtC,EAAA,MAAM,eAAA,GAAkB,KAAA,CAAM,WAAA,EAAa,MAAA,GAAS,OAAO,IAAI,CAAA;AAC/D,EAAA,MAAM,cAAA,GAAiB,SACnB,KAAA,CAAM,OAAA,CAAQ,QAAQ,KAAA,GACtB,KAAA,CAAM,QAAQ,OAAA,CAAQ,IAAA;AAC1B,EAAA,MAAM,kBAAA,GAAqB,KAAA,CAAM,WAAA,EAAa,MAAA,GAAS,MAAM,IAAI,CAAA;AACjE,EAAA,IAAI,gBAAA,GAAmB,KAAA,CAAM,OAAA,CAAQ,UAAA,CAAW,KAAA;AAChD,EAAA,IAAI,IAAA,EAAM;AACR,IAAA,gBAAA,GAAmB,eAAA;AAAA,EACrB,WAAW,YAAA,EAAc;AACvB,IAAA,gBAAA,GAAmB,kBAAA;AAAA,EACrB;AAEA,EAAA,IAAI,WAAA,GAAc,YAAA;AAClB,EAAA,IAAI,IAAA,EAAM;AACR,IAAA,WAAA,GAAc,WAAA;AAAA,EAChB,WAAW,YAAA,EAAc;AACvB,IAAA,WAAA,GAAc,cAAA;AAAA,EAChB;AAEA,EAAA,IAAI,SAAA,GAAY,MAAA;AAChB,EAAA,IAAI,IAAA,EAAM;AACR,IAAA,SAAA,GAAY,oCAAA;AAAA,EACd,WAAW,YAAA,EAAc;AACvB,IAAA,SAAA,GAAY,mCAAA;AAAA,EACd;AAEA,EAAA,MAAM,aAAa,YAAA,GACf,KAAA,CAAM,aAAa,MAAA,GAAS,IAAA,GAAO,GAAG,CAAA,GACtC,eAAA;AAEJ,EAAA,OAAO;AAAA,IACL,OAAA,EAAS,MAAA;AAAA,IACT,UAAA,EAAY,QAAA;AAAA,IACZ,GAAA,EAAK,KAAA,CAAM,OAAA,CAAQ,CAAC,CAAA;AAAA,IACpB,OAAA,EAAS,KAAA,CAAM,OAAA,CAAQ,IAAA,EAAM,GAAG,CAAA;AAAA,IAChC,YAAA,EAAc,GAAA;AAAA,IACd,MAAA,EAAQ,aAAa,WAAW,CAAA,CAAA;AAAA,IAChC,eAAA,EAAiB,gBAAA;AAAA,IACjB,UAAA,EAAY,eAAA;AAAA,IACZ,SAAA;AAAA,IACA,SAAA,EAAW;AAAA,MACT,eAAA,EAAiB;AAAA,KACnB;AAAA,IACA,oBAAA,EAAsB;AAAA,MACpB,QAAA,EAAU,EAAA;AAAA,MACV,KAAA,EAAO,eACH,KAAA,CAAM,OAAA,CAAQ,QAAQ,IAAA,GACtB,KAAA,CAAM,QAAQ,IAAA,CAAK;AAAA;AACzB,GACF;AACF,CAAC,CAAA;AAED,MAAM,aAAa,MAAA,CAAO,MAAM,EAAE,CAAC,EAAE,OAAM,KAAM;AAC/C,EAAA,MAAM,WAAA,GAAc,oBAAoB,KAAK,CAAA;AAC7C,EAAA,OAAO;AAAA,IACL,OAAA,EAAS,aAAA;AAAA,IACT,UAAA,EAAY,QAAA;AAAA,IACZ,cAAA,EAAgB,QAAA;AAAA,IAChB,QAAA,EAAU,EAAA;AAAA,IACV,OAAA,EAAS,KAAA,CAAM,OAAA,CAAQ,IAAA,EAAM,CAAC,CAAA;AAAA,IAC9B,YAAA,EAAc,GAAA;AAAA,IACd,iBAAiB,WAAA,CAAY,UAAA;AAAA,IAC7B,OAAO,WAAA,CAAY,IAAA;AAAA,IACnB,QAAA,EAAU,EAAA;AAAA,IACV,UAAA,EAAY;AAAA,GACd;AACF,CAAC,CAAA;AAEM,MAAM,iBAAiB,CAAC;AAAA,EAC7B,KAAA;AAAA,EACA,OAAA;AAAA,EACA,cAAA;AAAA,EACA,QAAA;AAAA,EACA,WAAA;AAAA,EACA,iBAAA,GAAoB,cAAA;AAAA,EACpB,UAAA,GAAa,iBAAA;AAAA,EACb,OAAA,GAAU;AACZ,CAAA,KAA2B;AACzB,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,SAA6B,IAAI,CAAA;AACjE,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAI,SAAS,EAAE,CAAA;AACjD,EAAA,MAAM,QAAQ,QAAA,EAAS;AAEvB,EAAA,MAAM,cAAA,GAAiB,QAAQ,MAAM;AACnC,IAAA,MAAM,GAAA,uBAAU,GAAA,EAAoB;AACpC,IAAA,OAAA,CAAQ,QAAQ,CAAA,MAAA,KAAU;AACxB,MAAA,GAAA,CAAI,GAAA,CAAI,MAAA,CAAO,KAAA,EAAO,MAAA,CAAO,KAAK,CAAA;AAAA,IACpC,CAAC,CAAA;AACD,IAAA,OAAO,GAAA;AAAA,EACT,CAAA,EAAG,CAAC,OAAO,CAAC,CAAA;AAEZ,EAAA,MAAM,WAAA,GAAc,QAAQ,MAAM,IAAI,IAAI,cAAc,CAAA,EAAG,CAAC,cAAc,CAAC,CAAA;AAE3E,EAAA,MAAM,mBAAA,GAAsB,QAAQ,MAAM;AACxC,IAAA,MAAM,UAAA,GAAa,eAAe,CAAC,CAAA;AACnC,IAAA,IAAI,CAAC,UAAA,EAAY;AACf,MAAA,OAAO,MAAA;AAAA,IACT;AACA,IAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,CAAA,MAAA,KAAU,MAAA,CAAO,UAAU,UAAU,CAAA;AAAA,EAC3D,CAAA,EAAG,CAAC,OAAA,EAAS,cAAc,CAAC,CAAA;AAE5B,EAAA,MAAM,mBAAA,GAAsB,QAAQ,MAAM;AACxC,IAAA,MAAM,UAAA,GAAa,eAAe,CAAC,CAAA;AACnC,IAAA,OAAO,UAAA,GAAa,cAAA,CAAe,GAAA,CAAI,UAAU,CAAA,GAAI,MAAA;AAAA,EACvD,CAAA,EAAG,CAAC,cAAA,EAAgB,cAAc,CAAC,CAAA;AAEnC,EAAA,MAAM,kBAAA,GAAqB,QAAQ,MAAM;AACvC,IAAA,MAAM,OAAO,mBAAA,EAAqB,IAAA;AAClC,IAAA,IAAI,CAAC,IAAA,EAAM;AACT,MAAA,OAAO,MAAA;AAAA,IACT;AACA,IAAA,IAAI,cAAA,CAAe,IAAI,CAAA,EAAG;AACxB,MAAA,OAAO,YAAA,CAAa,IAAA,EAAM,EAAE,GAAA,EAAK,iBAAiB,CAAA;AAAA,IACpD;AACA,IAAA,OAAO,IAAA;AAAA,EACT,CAAA,EAAG,CAAC,mBAAmB,CAAC,CAAA;AAExB,EAAA,MAAM,kBACJ,cAAA,CAAe,MAAA,GAAS,CAAA,GAAI,cAAA,CAAe,SAAS,CAAA,GAAI,CAAA;AAE1D,EAAA,MAAM,qBAAA,GAAwB,QAAQ,MAAM;AAC1C,IAAA,IAAI,cAAA,CAAe,UAAU,CAAA,EAAG;AAC9B,MAAA,OAAO,EAAA;AAAA,IACT;AACA,IAAA,MAAM,iBAAiB,cAAA,CAAe,KAAA,CAAM,CAAC,CAAA,CAAE,IAAI,CAAA,KAAA,KAAS;AAC1D,MAAA,MAAM,SAAS,OAAA,CAAQ,IAAA,CAAK,CAAA,GAAA,KAAO,GAAA,CAAI,UAAU,KAAK,CAAA;AACtD,MAAA,OAAO,QAAQ,KAAA,IAAS,KAAA;AAAA,IAC1B,CAAC,CAAA;AACD,IAAA,OAAO,cAAA,CAAe,KAAK,IAAI,CAAA;AAAA,EACjC,CAAA,EAAG,CAAC,cAAA,EAAgB,OAAO,CAAC,CAAA;AAE5B,EAAA,MAAM,YAAA,GAAe,eAAe,MAAA,GAAS,CAAA;AAE7C,EAAA,MAAM,eAAA,GAAkB,QAAQ,MAAM;AACpC,IAAA,MAAM,gBAAA,GAAmB,WAAA,CAAY,IAAA,EAAK,CAAE,WAAA,EAAY;AACxD,IAAA,IAAI,CAAC,gBAAA,EAAkB;AACrB,MAAA,OAAO,OAAA;AAAA,IACT;AACA,IAAA,OAAO,OAAA,CAAQ,MAAA;AAAA,MAAO,YACpB,MAAA,CAAO,KAAA,CAAM,WAAA,EAAY,CAAE,SAAS,gBAAgB;AAAA,KACtD;AAAA,EACF,CAAA,EAAG,CAAC,OAAA,EAAS,WAAW,CAAC,CAAA;AAEzB,EAAA,MAAM,YAAA,GAAe,CAAC,KAAA,KAAkB;AACtC,IAAA,MAAM,IAAA,GAAO,IAAI,GAAA,CAAI,cAAc,CAAA;AACnC,IAAA,IAAI,IAAA,CAAK,GAAA,CAAI,KAAK,CAAA,EAAG;AACnB,MAAA,IAAA,CAAK,OAAO,KAAK,CAAA;AAAA,IACnB,CAAA,MAAO;AACL,MAAA,IAAA,CAAK,IAAI,KAAK,CAAA;AAAA,IAChB;AACA,IAAA,MAAM,OAAA,GAAU,OAAA,CACb,MAAA,CAAO,CAAA,MAAA,KAAU,IAAA,CAAK,GAAA,CAAI,MAAA,CAAO,KAAK,CAAC,CAAA,CACvC,GAAA,CAAI,CAAA,MAAA,KAAU,OAAO,KAAK,CAAA;AAC7B,IAAA,QAAA,CAAS,OAAO,CAAA;AAAA,EAClB,CAAA;AAEA,EAAA,MAAM,cAAc,MAAM;AACxB,IAAA,IAAI,CAAC,eAAe,MAAA,EAAQ;AAC1B,MAAA;AAAA,IACF;AACA,IAAA,cAAA,CAAe,EAAE,CAAA;AACjB,IAAA,QAAA,CAAS,EAAE,CAAA;AAAA,EACb,CAAA;AAEA,EAAA,MAAM,iBAAA,GAAoB,CAAC,KAAA,KAAyC;AAClE,IAAA,IAAI,QAAA,EAAU;AACZ,MAAA,WAAA,CAAY,IAAI,CAAA;AAChB,MAAA,cAAA,CAAe,EAAE,CAAA;AACjB,MAAA;AAAA,IACF;AACA,IAAA,WAAA,CAAY,MAAM,aAAa,CAAA;AAAA,EACjC,CAAA;AAEA,EAAA,MAAM,cAAc,MAAM;AACxB,IAAA,WAAA,CAAY,IAAI,CAAA;AAChB,IAAA,cAAA,CAAe,EAAE,CAAA;AAAA,EACnB,CAAA;AAEA,EAAA,MAAM,MAAA,GAAS,QAAQ,QAAQ,CAAA;AAE/B,EAAA,IAAI,OAAA,EAAS;AACX,IAAA,uBACE,GAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,OAAA,EAAQ,SAAA;AAAA,QACR,KAAA,EAAO,GAAA;AAAA,QACP,MAAA,EAAQ,EAAA;AAAA,QACR,EAAA,EAAI;AAAA,UACF,YAAA,EAAc;AAAA;AAChB;AAAA,KACF;AAAA,EAEJ;AAEA,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAA,IAAA;AAAA,MAAC,cAAA;AAAA,MAAA;AAAA,QACC,IAAA,EAAM,MAAA;AAAA,QACN,YAAA;AAAA,QACA,OAAA,EAAS,iBAAA;AAAA,QACT,EAAA,EAAI;AAAA,UACF,KAAA,EAAO,eACH,KAAA,CAAM,OAAA,CAAQ,QAAQ,IAAA,GACtB,KAAA,CAAM,QAAQ,IAAA,CAAK;AAAA,SACzB;AAAA,QAEC,QAAA,EAAA;AAAA,UAAA,YAAA,mBACC,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,4BAAA,GAAA;AAAA,cAAC,UAAA;AAAA,cAAA;AAAA,gBACC,OAAA,EAAQ,OAAA;AAAA,gBACR,EAAA,EAAI;AAAA,kBACF,KAAA,EAAO,KAAA,CAAM,OAAA,CAAQ,IAAA,CAAK,OAAA;AAAA,kBAC1B,UAAA,EAAY;AAAA,iBACd;AAAA,gBAEC,aAAG,KAAK,CAAA,CAAA;AAAA;AAAA,aACX;AAAA,YACC,kBAAA,oBACC,GAAA,CAAC,GAAA,EAAA,EAAI,EAAA,EAAI,EAAE,SAAS,MAAA,EAAQ,UAAA,EAAY,QAAA,EAAS,EAC9C,QAAA,EAAA,kBAAA,EACH,CAAA;AAAA,4BAEF,GAAA;AAAA,cAAC,UAAA;AAAA,cAAA;AAAA,gBACC,OAAA,EAAQ,OAAA;AAAA,gBACR,EAAA,EAAI;AAAA,kBACF,KAAA,EAAO,KAAA,CAAM,OAAA,CAAQ,IAAA,CAAK,OAAA;AAAA,kBAC1B,UAAA,EAAY;AAAA,iBACd;AAAA,gBAEC,QAAA,EAAA;AAAA;AAAA;AACH,WAAA,EACF,CAAA,mBAEA,GAAA;AAAA,YAAC,UAAA;AAAA,YAAA;AAAA,cACC,OAAA,EAAQ,OAAA;AAAA,cACR,EAAA,EAAI;AAAA,gBACF,KAAA,EAAO,KAAA,CAAM,OAAA,CAAQ,IAAA,CAAK,OAAA;AAAA,gBAC1B,UAAA,EAAY;AAAA,eACd;AAAA,cAEC,QAAA,EAAA;AAAA;AAAA,WACH;AAAA,UAED,kBAAkB,CAAA,oBACjB,GAAA;AAAA,YAAC,aAAA;AAAA,YAAA;AAAA,cACC,KAAA,EAAO,qBAAA;AAAA,cACP,SAAA,EAAU,KAAA;AAAA,cACV,YAAA,EAAc;AAAA,gBACZ,eAAA,EAAiB;AAAA,kBACf,OAAA,EAAS;AAAA,oBACP,EAAA,EAAI;AAAA,sBACF,UAAA,EAAY,QAAA;AAAA,sBACZ,QAAA,EAAU;AAAA;AACZ;AACF;AACF,eACF;AAAA,cAEA,QAAA,kBAAA,GAAA,CAAC,UAAA,EAAA,EAAY,QAAA,EAAA,CAAA,CAAA,EAAI,eAAe,CAAA,CAAA,EAAG;AAAA;AAAA,WACrC;AAAA,0BAEF,GAAA;AAAA,YAAC,qBAAA;AAAA,YAAA;AAAA,cACC,QAAA,EAAS,OAAA;AAAA,cACT,EAAA,EAAI;AAAA,gBACF,SAAA,EAAW,SAAS,gBAAA,GAAmB,MAAA;AAAA,gBACvC,UAAA,EAAY,qBAAA;AAAA,gBACZ,KAAA,EAAO,KAAA,CAAM,OAAA,CAAQ,IAAA,CAAK;AAAA;AAC5B;AAAA;AACF;AAAA;AAAA,KACF;AAAA,oBAEA,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,IAAA,EAAM,MAAA;AAAA,QACN,QAAA;AAAA,QACA,SAAA,EAAU,cAAA;AAAA,QACV,SAAA,EAAW;AAAA,UACT;AAAA,YACE,IAAA,EAAM,QAAA;AAAA,YACN,OAAA,EAAS;AAAA,cACP,MAAA,EAAQ,CAAC,CAAA,EAAG,CAAC;AAAA;AACf;AACF,SACF;AAAA,QAEA,QAAA,kBAAA,GAAA,CAAC,iBAAA,EAAA,EAAkB,WAAA,EAAa,WAAA,EAC9B,QAAA,kBAAA,IAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,EAAA,EAAI;AAAA,cACF,YAAA,EAAc,CAAA;AAAA,cACd,SAAA,EAAW,oCAAA;AAAA,cACX,KAAA,EAAO,GAAA;AAAA,cACP,SAAA,EAAW,GAAA;AAAA,cACX,OAAA,EAAS,MAAA;AAAA,cACT,aAAA,EAAe,QAAA;AAAA,cACf,QAAA,EAAU;AAAA,aACZ;AAAA,YAEA,QAAA,EAAA;AAAA,8BAAA,GAAA,CAAC,GAAA,EAAA,EAAI,EAAA,EAAI,EAAE,CAAA,EAAG,GAAE,EACd,QAAA,kBAAA,GAAA;AAAA,gBAAC,oBAAA;AAAA,gBAAA;AAAA,kBACC,KAAA,EAAO,WAAA;AAAA,kBACP,QAAA,EAAU,cAAA;AAAA,kBACV,WAAA,EAAa;AAAA;AAAA,eACf,EACF,CAAA;AAAA,8BAEA,GAAA;AAAA,gBAAC,kBAAA;AAAA,gBAAA;AAAA,kBACC,OAAA,EAAS,eAAA;AAAA,kBACT,cAAA,EAAgB,WAAA;AAAA,kBAChB,QAAA,EAAU,YAAA;AAAA,kBACV;AAAA;AAAA,eACF;AAAA,8BAEA,GAAA;AAAA,gBAAC,mBAAA;AAAA,gBAAA;AAAA,kBACC,UAAU,CAAC,YAAA;AAAA,kBACX,KAAA,EAAO,UAAA;AAAA,kBACP,OAAA,EAAS;AAAA;AAAA;AACX;AAAA;AAAA,SACF,EACF;AAAA;AAAA;AACF,GAAA,EACF,CAAA;AAEJ;;;;"}

package/dist/components/filters/FilterDropdownClear.esm.js

@@ -0,0 +1,45 @@
+import { jsx } from 'react/jsx-runtime';
+import Link from '@mui/material/Link';
+import Box from '@mui/material/Box';
+import { useTheme } from '@mui/material/styles';
+
+const FilterDropdownClear = ({
+  disabled,
+  label,
+  onClear
+}) => {
+  const theme = useTheme();
+  const { text, action } = theme.palette;
+  return /* @__PURE__ */ jsx(Box, { sx: { px: 2, py: 1.5 }, children: /* @__PURE__ */ jsx(
+    Link,
+    {
+      component: "button",
+      type: "button",
+      underline: "hover",
+      onClick: (event) => {
+        event.preventDefault();
+        if (!disabled) {
+          onClear();
+        }
+      },
+      sx: {
+        fontSize: 14,
+        fontWeight: 500,
+        color: disabled ? text.disabled : action.active,
+        textDecoration: "underline",
+        textUnderlineOffset: "2px",
+        pointerEvents: disabled ? "none" : "auto",
+        cursor: disabled ? "default" : "pointer",
+        display: "block",
+        textAlign: "left",
+        width: "100%",
+        px: 0
+        // Remove horizontal padding to align with container
+      },
+      children: label
+    }
+  ) });
+};
+
+export { FilterDropdownClear };
+//# sourceMappingURL=FilterDropdownClear.esm.js.map

package/dist/components/filters/FilterDropdownClear.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterDropdownClear.esm.js","sources":["../../../src/components/filters/FilterDropdownClear.tsx"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport Link from '@mui/material/Link';\nimport Box from '@mui/material/Box';\nimport { useTheme } from '@mui/material/styles';\n\ninterface FilterDropdownClearProps {\n  disabled: boolean;\n  label: string;\n  onClear: () => void;\n}\n\nexport const FilterDropdownClear = ({\n  disabled,\n  label,\n  onClear,\n}: FilterDropdownClearProps) => {\n  const theme = useTheme();\n  const { text, action } = theme.palette;\n\n  return (\n    <Box sx={{ px: 2, py: 1.5 }}>\n      <Link\n        component=\"button\"\n        type=\"button\"\n        underline=\"hover\"\n        onClick={event => {\n          event.preventDefault();\n          if (!disabled) {\n            onClear();\n          }\n        }}\n        sx={{\n          fontSize: 14,\n          fontWeight: 500,\n          color: disabled ? text.disabled : action.active,\n          textDecoration: 'underline',\n          textUnderlineOffset: '2px',\n          pointerEvents: disabled ? 'none' : 'auto',\n          cursor: disabled ? 'default' : 'pointer',\n          display: 'block',\n          textAlign: 'left',\n          width: '100%',\n          px: 0, // Remove horizontal padding to align with container\n        }}\n      >\n        {label}\n      </Link>\n    </Box>\n  );\n};\n"],"names":[],"mappings":";;;;;AAyBO,MAAM,sBAAsB,CAAC;AAAA,EAClC,QAAA;AAAA,EACA,KAAA;AAAA,EACA;AACF,CAAA,KAAgC;AAC9B,EAAA,MAAM,QAAQ,QAAA,EAAS;AACvB,EAAA,MAAM,EAAE,IAAA,EAAM,MAAA,EAAO,GAAI,KAAA,CAAM,OAAA;AAE/B,EAAA,uBACE,GAAA,CAAC,OAAI,EAAA,EAAI,EAAE,IAAI,CAAA,EAAG,EAAA,EAAI,KAAI,EACxB,QAAA,kBAAA,GAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAU,QAAA;AAAA,MACV,IAAA,EAAK,QAAA;AAAA,MACL,SAAA,EAAU,OAAA;AAAA,MACV,SAAS,CAAA,KAAA,KAAS;AAChB,QAAA,KAAA,CAAM,cAAA,EAAe;AACrB,QAAA,IAAI,CAAC,QAAA,EAAU;AACb,UAAA,OAAA,EAAQ;AAAA,QACV;AAAA,MACF,CAAA;AAAA,MACA,EAAA,EAAI;AAAA,QACF,QAAA,EAAU,EAAA;AAAA,QACV,UAAA,EAAY,GAAA;AAAA,QACZ,KAAA,EAAO,QAAA,GAAW,IAAA,CAAK,QAAA,GAAW,MAAA,CAAO,MAAA;AAAA,QACzC,cAAA,EAAgB,WAAA;AAAA,QAChB,mBAAA,EAAqB,KAAA;AAAA,QACrB,aAAA,EAAe,WAAW,MAAA,GAAS,MAAA;AAAA,QACnC,MAAA,EAAQ,WAAW,SAAA,GAAY,SAAA;AAAA,QAC/B,OAAA,EAAS,OAAA;AAAA,QACT,SAAA,EAAW,MAAA;AAAA,QACX,KAAA,EAAO,MAAA;AAAA,QACP,EAAA,EAAI;AAAA;AAAA,OACN;AAAA,MAEC,QAAA,EAAA;AAAA;AAAA,GACH,EACF,CAAA;AAEJ;;;;"}

package/dist/components/filters/FilterDropdownList.esm.js

@@ -0,0 +1,102 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import Box from '@mui/material/Box';
+import Checkbox from '@mui/material/Checkbox';
+import Divider from '@mui/material/Divider';
+import List from '@mui/material/List';
+import ListItemButton from '@mui/material/ListItemButton';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import Typography from '@mui/material/Typography';
+import { useTheme, alpha } from '@mui/material/styles';
+
+const FilterDropdownList = ({
+  options,
+  selectedValues,
+  onToggle,
+  placeholder
+}) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      List,
+      {
+        disablePadding: true,
+        sx: {
+          py: 1,
+          maxHeight: 220,
+          overflowY: "auto"
+        },
+        children: [
+          options.length === 0 && /* @__PURE__ */ jsx(Box, { sx: { px: 2, py: 1.5 }, children: /* @__PURE__ */ jsx(
+            Typography,
+            {
+              variant: "body2",
+              sx: { color: theme.palette.text.secondary },
+              children: placeholder || "No results"
+            }
+          ) }),
+          options.map((option) => {
+            const checked = selectedValues.has(option.value);
+            return /* @__PURE__ */ jsxs(
+              ListItemButton,
+              {
+                onClick: () => onToggle(option.value),
+                sx: {
+                  gap: 1,
+                  px: 2,
+                  py: 1,
+                  "&.Mui-focusVisible": {
+                    backgroundColor: "transparent"
+                  },
+                  "&:hover": {
+                    backgroundColor: alpha(theme.palette.primary.main, 0.04)
+                  },
+                  ...checked ? {
+                    backgroundColor: alpha(theme.palette.primary.main, 0.08)
+                  } : {}
+                },
+                children: [
+                  /* @__PURE__ */ jsx(ListItemIcon, { sx: { minWidth: 24 }, children: /* @__PURE__ */ jsx(
+                    Checkbox,
+                    {
+                      edge: "start",
+                      checked,
+                      tabIndex: -1,
+                      disableRipple: true,
+                      sx: {
+                        color: theme.palette.divider,
+                        "&.MuiSvgIcon-root": {
+                          fontSize: 20
+                        },
+                        "&.Mui-checked": {
+                          color: theme.palette.primary.main
+                        }
+                      }
+                    }
+                  ) }),
+                  option.icon && /* @__PURE__ */ jsx(Box, { sx: { display: "flex", alignItems: "center", mr: 1 }, children: option.icon }),
+                  /* @__PURE__ */ jsx(
+                    ListItemText,
+                    {
+                      primary: option.label,
+                      primaryTypographyProps: {
+                        fontSize: 14,
+                        color: theme.palette.text.primary,
+                        fontWeight: 400
+                      }
+                    }
+                  )
+                ]
+              },
+              option.value
+            );
+          })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(Divider, { sx: { borderColor: theme.palette.divider } })
+  ] });
+};
+
+export { FilterDropdownList };
+//# sourceMappingURL=FilterDropdownList.esm.js.map

package/dist/components/filters/FilterDropdownList.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterDropdownList.esm.js","sources":["../../../src/components/filters/FilterDropdownList.tsx"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport Box from '@mui/material/Box';\nimport Checkbox from '@mui/material/Checkbox';\nimport Divider from '@mui/material/Divider';\nimport List from '@mui/material/List';\nimport ListItemButton from '@mui/material/ListItemButton';\nimport ListItemIcon from '@mui/material/ListItemIcon';\nimport ListItemText from '@mui/material/ListItemText';\nimport Typography from '@mui/material/Typography';\nimport { alpha, useTheme } from '@mui/material/styles';\nimport { FilterDropdownOption } from './FilterDropdown.types';\n\ninterface FilterDropdownListProps {\n  options: FilterDropdownOption[];\n  selectedValues: Set<string>;\n  onToggle: (value: string) => void;\n  placeholder?: string;\n}\n\nexport const FilterDropdownList = ({\n  options,\n  selectedValues,\n  onToggle,\n  placeholder,\n}: FilterDropdownListProps) => {\n  const theme = useTheme();\n\n  return (\n    <>\n      <List\n        disablePadding\n        sx={{\n          py: 1,\n          maxHeight: 220,\n          overflowY: 'auto',\n        }}\n      >\n        {options.length === 0 && (\n          <Box sx={{ px: 2, py: 1.5 }}>\n            <Typography\n              variant=\"body2\"\n              sx={{ color: theme.palette.text.secondary }}\n            >\n              {placeholder || 'No results'}\n            </Typography>\n          </Box>\n        )}\n\n        {options.map(option => {\n          const checked = selectedValues.has(option.value);\n          return (\n            <ListItemButton\n              key={option.value}\n              onClick={() => onToggle(option.value)}\n              sx={{\n                gap: 1,\n                px: 2,\n                py: 1,\n                '&.Mui-focusVisible': {\n                  backgroundColor: 'transparent',\n                },\n                '&:hover': {\n                  backgroundColor: alpha(theme.palette.primary.main, 0.04),\n                },\n                ...(checked\n                  ? {\n                      backgroundColor: alpha(theme.palette.primary.main, 0.08),\n                    }\n                  : {}),\n              }}\n            >\n              <ListItemIcon sx={{ minWidth: 24 }}>\n                <Checkbox\n                  edge=\"start\"\n                  checked={checked}\n                  tabIndex={-1}\n                  disableRipple\n                  sx={{\n                    color: theme.palette.divider,\n                    '&.MuiSvgIcon-root': {\n                      fontSize: 20,\n                    },\n                    '&.Mui-checked': {\n                      color: theme.palette.primary.main,\n                    },\n                  }}\n                />\n              </ListItemIcon>\n              {option.icon && (\n                <Box sx={{ display: 'flex', alignItems: 'center', mr: 1 }}>\n                  {option.icon}\n                </Box>\n              )}\n              <ListItemText\n                primary={option.label}\n                primaryTypographyProps={{\n                  fontSize: 14,\n                  color: theme.palette.text.primary,\n                  fontWeight: 400,\n                }}\n              />\n            </ListItemButton>\n          );\n        })}\n      </List>\n      <Divider sx={{ borderColor: theme.palette.divider }} />\n    </>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/filters/FilterDropdownSearch.esm.js

@@ -0,0 +1,65 @@
+import { jsx } from 'react/jsx-runtime';
+import InputAdornment from '@mui/material/InputAdornment';
+import TextField from '@mui/material/TextField';
+import IconButton from '@mui/material/IconButton';
+import SearchIcon from '@mui/icons-material/Search';
+import ClearIcon from '@mui/icons-material/Clear';
+import { useTheme, alpha } from '@mui/material/styles';
+
+const FilterDropdownSearch = ({
+  value,
+  onChange,
+  placeholder
+}) => {
+  const theme = useTheme();
+  const handleClear = () => {
+    onChange("");
+  };
+  return /* @__PURE__ */ jsx(
+    TextField,
+    {
+      fullWidth: true,
+      value,
+      onChange: (event) => onChange(event.target.value),
+      placeholder,
+      size: "small",
+      InputProps: {
+        startAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "start", children: /* @__PURE__ */ jsx(
+          SearchIcon,
+          {
+            sx: {
+              fontSize: 18,
+              color: theme.palette.text.secondary
+            }
+          }
+        ) }),
+        endAdornment: value ? /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            onClick: handleClear,
+            size: "small",
+            sx: { color: theme.palette.text.secondary },
+            children: /* @__PURE__ */ jsx(ClearIcon, { fontSize: "small" })
+          }
+        ) }) : null,
+        sx: {
+          borderRadius: "10px",
+          backgroundColor: alpha(theme.palette.background.default, 0.6),
+          "& .MuiOutlinedInput-notchedOutline": {
+            borderColor: alpha(theme.palette.divider, 0.6)
+          },
+          "&:hover .MuiOutlinedInput-notchedOutline": {
+            borderColor: alpha(theme.palette.primary.main, 0.4)
+          },
+          "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
+            borderColor: theme.palette.primary.main
+          }
+        }
+      },
+      inputProps: { sx: { fontSize: 14 } }
+    }
+  );
+};
+
+export { FilterDropdownSearch };
+//# sourceMappingURL=FilterDropdownSearch.esm.js.map