@backstage-community/plugin-apiiro 0.1.0

package/dist/components/CalendarDatePicker.styles.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CalendarDatePicker.styles.esm.js","sources":["../../src/components/CalendarDatePicker.styles.ts"],"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 Calendar from 'react-calendar';\nimport List from '@mui/material/List';\nimport ListItemButton from '@mui/material/ListItemButton';\nimport ListItemText from '@mui/material/ListItemText';\nimport { alpha, styled } from '@mui/material/styles';\n\nexport const CalendarContainer = styled('div')(({ theme }) => {\n  const isDark = theme.palette.mode === 'dark';\n  const surface = theme.palette.background.paper;\n  const borderColor = isDark\n    ? alpha(theme.palette.common.white, 0.08)\n    : alpha(theme.palette.primary.main, 0.12);\n  const shadow = isDark\n    ? '0 24px 48px rgba(8, 12, 41, 0.5)'\n    : '0 24px 48px rgba(38, 54, 140, 0.16)';\n\n  return {\n    display: 'flex',\n    alignItems: 'stretch',\n    gap: theme.spacing(2),\n    padding: theme.spacing(2.5),\n    borderRadius: theme.spacing(3),\n    backgroundColor: surface,\n    border: `1px solid ${borderColor}`,\n    boxShadow: shadow,\n    width: 'fit-content',\n    maxWidth: '100%',\n  };\n});\n\nexport const StyledCalendar = styled(Calendar)(({ theme }) => {\n  const primary = theme.palette.primary.main;\n  const primarySoft = alpha(\n    primary,\n    theme.palette.mode === 'dark' ? 0.28 : 0.16,\n  );\n  const rangeSoft = alpha(primary, theme.palette.mode === 'dark' ? 0.24 : 0.12);\n  const hoverSoft = alpha(primary, theme.palette.mode === 'dark' ? 0.32 : 0.18);\n\n  return {\n    '&.react-calendar': {\n      border: 'none',\n      width: 280,\n      backgroundColor: 'transparent',\n    },\n    '& .react-calendar__navigation': {\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'space-between',\n      marginBottom: theme.spacing(2.5),\n      button: {\n        minWidth: theme.spacing(4.5),\n        minHeight: theme.spacing(4.5),\n        borderRadius: theme.spacing(2.5),\n        border: 'none',\n        backgroundColor: 'transparent',\n        color: theme.palette.text.secondary,\n        fontWeight: 600,\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n        '&:hover:not(:disabled)': {\n          backgroundColor: hoverSoft,\n          color: primary,\n        },\n        '&:disabled': {\n          opacity: 0.4,\n          cursor: 'not-allowed',\n        },\n      },\n      '.react-calendar__navigation__label': {\n        fontWeight: 700,\n        fontSize: 18,\n        color: theme.palette.text.primary,\n      },\n    },\n    '& .react-calendar__month-view__weekdays': {\n      textTransform: 'uppercase',\n      fontSize: 12,\n      fontWeight: 600,\n      letterSpacing: 0.4,\n      color: alpha(theme.palette.text.secondary, 0.8),\n      abbr: {\n        textDecoration: 'none',\n      },\n    },\n    '& .react-calendar__tile': {\n      height: 40,\n      borderRadius: theme.spacing(3),\n      padding: 0,\n      fontWeight: 500,\n      color: theme.palette.text.primary,\n      transition: 'all 0.2s ease',\n      position: 'relative',\n      overflow: 'hidden',\n      '> abbr': {\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n        width: '100%',\n        height: '100%',\n        borderRadius: 'inherit',\n      },\n      '&:hover:not(:disabled)': {\n        backgroundColor: hoverSoft,\n        color: primary,\n      },\n      '&:disabled': {\n        color: alpha(theme.palette.text.disabled, 0.7),\n        backgroundColor: 'transparent',\n      },\n    },\n    '& .react-calendar__tile--now': {\n      border: `1px solid ${alpha(primary, 0.5)}`,\n      borderRadius: theme.spacing(3),\n      backgroundColor: 'inherit',\n    },\n    '& .react-calendar__tile--active': {\n      backgroundColor: primarySoft,\n      color: primary,\n    },\n    '& .react-calendar__month-view .react-calendar__tile--range': {\n      backgroundColor: rangeSoft,\n      color: primary,\n      borderRadius: 0,\n    },\n    '& .react-calendar__month-view .react-calendar__tile--rangeStart': {\n      backgroundColor: rangeSoft,\n      color: primary,\n      borderRadius: `${theme.spacing(3)} 0 0 ${theme.spacing(3)}`,\n      '> abbr': {\n        backgroundColor: primary,\n        color: theme.palette.primary.contrastText,\n        borderRadius: '50%',\n        width: 32,\n        height: 32,\n        margin: 'auto',\n      },\n    },\n    '& .react-calendar__month-view .react-calendar__tile--rangeEnd': {\n      backgroundColor: rangeSoft,\n      color: primary,\n      borderRadius: `0 ${theme.spacing(3)} ${theme.spacing(3)} 0`,\n      '> abbr': {\n        backgroundColor: primary,\n        color: theme.palette.primary.contrastText,\n        borderRadius: '50%',\n        width: 32,\n        height: 32,\n        margin: 'auto',\n      },\n    },\n    '& .react-calendar__month-view__days__day--neighboringMonth': {\n      color: alpha(theme.palette.text.disabled, 0.8),\n    },\n    '& .react-calendar__year-view .react-calendar__tile, & .react-calendar__decade-view .react-calendar__tile, & .react-calendar__century-view .react-calendar__tile':\n      {\n        height: 64,\n      },\n  };\n});\n\nexport const QuickRangeList = styled(List)(({ theme }) => ({\n  width: 160,\n  padding: 0,\n  margin: 0,\n  display: 'flex',\n  flexDirection: 'column',\n  gap: theme.spacing(1),\n}));\n\nexport const QuickRangeItem = styled(ListItemButton)<{ $selected?: boolean }>(\n  ({ theme, $selected }) => {\n    const primary = theme.palette.primary.main;\n    const isDark = theme.palette.mode === 'dark';\n    const inactiveBackground = isDark\n      ? alpha(primary, 0.16)\n      : alpha(primary, 0.06);\n    const hoverBackground = isDark\n      ? alpha(primary, 0.28)\n      : alpha(primary, 0.12);\n\n    return {\n      borderRadius: theme.spacing(2),\n      justifyContent: 'flex-start',\n      alignItems: 'center',\n      padding: theme.spacing(1, 1.75),\n      minHeight: 44,\n      border: `1px solid ${\n        $selected ? alpha(primary, 0.48) : alpha(primary, 0.16)\n      }`,\n      backgroundColor: $selected ? primary : inactiveBackground,\n      color: $selected\n        ? theme.palette.primary.contrastText\n        : theme.palette.text.secondary,\n      fontWeight: $selected ? 700 : 500,\n      transition: 'all 0.2s ease',\n      '&:hover': {\n        backgroundColor: $selected ? primary : hoverBackground,\n        color: $selected ? theme.palette.primary.contrastText : primary,\n      },\n    };\n  },\n);\n\nexport const QuickRangeText = styled(ListItemText)(({ theme }) => ({\n  '.MuiListItemText-primary': {\n    fontSize: 14,\n    fontWeight: 600,\n  },\n  '.MuiListItemText-secondary': {\n    fontSize: 12,\n    color: theme.palette.text.secondary,\n  },\n}));\n"],"names":[],"mappings":"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"}

package/dist/components/Chip.esm.js

@@ -0,0 +1,60 @@
+import { jsx } from 'react/jsx-runtime';
+import Chip$1 from '@mui/material/Chip';
+import Link from '@mui/material/Link';
+
+const Chip = ({
+  label,
+  colorMapping,
+  value,
+  defaultColor = "default",
+  variant = "filled",
+  size = "medium",
+  chipSx,
+  clickable = false,
+  onClick,
+  onDelete,
+  href,
+  target,
+  rel,
+  ...rest
+}) => {
+  const getChipColor = () => {
+    if (!colorMapping) {
+      return defaultColor;
+    }
+    const lookupValue = value !== void 0 ? value : label;
+    const mappedColor = colorMapping[lookupValue];
+    return mappedColor || defaultColor;
+  };
+  const chipColor = getChipColor();
+  const isClickable = clickable || !!href || !!onClick;
+  const chipElement = /* @__PURE__ */ jsx(
+    Chip$1,
+    {
+      label,
+      color: chipColor,
+      variant,
+      size,
+      clickable: isClickable,
+      onClick,
+      onDelete,
+      sx: {
+        // Default styles that can be overridden
+        fontWeight: 400,
+        // Add cursor pointer for links
+        ...href && {
+          cursor: "pointer"
+        },
+        ...chipSx
+      },
+      ...rest
+    }
+  );
+  if (href) {
+    return /* @__PURE__ */ jsx(Link, { href, target, rel, children: chipElement });
+  }
+  return chipElement;
+};
+
+export { Chip, Chip as default };
+//# sourceMappingURL=Chip.esm.js.map

package/dist/components/Chip.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chip.esm.js","sources":["../../src/components/Chip.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 MuiChip, { ChipProps as MuiChipProps } from '@mui/material/Chip';\nimport Link from '@mui/material/Link';\nimport { SxProps, Theme } from '@mui/material/styles';\n\nexport type ChipColor =\n  | 'default'\n  | 'primary'\n  | 'secondary'\n  | 'error'\n  | 'info'\n  | 'success'\n  | 'warning';\n\nexport type ChipVariant = 'filled' | 'outlined';\n\nexport interface ColorMapping {\n  [key: string]: ChipColor;\n}\n\nexport interface ChipProps extends Omit<MuiChipProps, 'color'> {\n  /**\n   * The content to display in the chip\n   */\n  label: string;\n\n  /**\n   * Color mapping object where keys are values and values are MUI chip colors\n   * Example: { 'active': 'success', 'inactive': 'error', 'pending': 'warning' }\n   */\n  colorMapping?: ColorMapping;\n\n  /**\n   * The value to look up in the color mapping\n   * If not provided, uses the label\n   */\n  value?: string;\n\n  /**\n   * Default color to use if value is not found in colorMapping\n   */\n  defaultColor?: ChipColor;\n\n  /**\n   * Chip variant\n   */\n  variant?: ChipVariant;\n\n  /**\n   * Custom styles\n   */\n  chipSx?: SxProps<Theme>;\n\n  /**\n   * Size of the chip\n   */\n  size?: 'small' | 'medium';\n\n  /**\n   * Whether the chip is clickable\n   */\n  clickable?: boolean;\n\n  /**\n   * Click handler\n   */\n  onClick?: MuiChipProps['onClick'];\n\n  /**\n   * Delete handler\n   */\n  onDelete?: MuiChipProps['onDelete'];\n\n  /**\n   * URL to navigate to when chip is clicked\n   * Makes the chip clickable and wraps it in a Link component\n   */\n  href?: string;\n\n  /**\n   * Link target (e.g., '_blank' for new tab)\n   */\n  target?: string;\n\n  /**\n   * Link rel attribute (e.g., 'noopener noreferrer' for external links)\n   */\n  rel?: string;\n}\n\n/**\n * Common Chip component with color mapping functionality\n *\n * @example\n * // Basic usage with color mapping\n * <Chip\n *   label=\"Active\"\n *   colorMapping={{ 'Active': 'success', 'Inactive': 'error' }}\n * />\n *\n * @example\n * // Using different value for lookup\n * <Chip\n *   label=\"Status: Active\"\n *   value=\"active\"\n *   colorMapping={{ 'active': 'success', 'inactive': 'error' }}\n * />\n *\n * @example\n * // With custom styling\n * <Chip\n *   label=\"Custom\"\n *   defaultColor=\"primary\"\n *   variant=\"outlined\"\n *   size=\"small\"\n *   chipSx={{ fontWeight: 'bold' }}\n * />\n *\n * @example\n * // With link functionality\n * <Chip\n *   label=\"Visit Team\"\n *   href=\"https://example.com/team\"\n *   target=\"_blank\"\n *   rel=\"noopener noreferrer\"\n *   defaultColor=\"primary\"\n * />\n */\nexport const Chip = ({\n  label,\n  colorMapping,\n  value,\n  defaultColor = 'default' as ChipColor,\n  variant = 'filled',\n  size = 'medium',\n  chipSx,\n  clickable = false,\n  onClick,\n  onDelete,\n  href,\n  target,\n  rel,\n  ...rest\n}: ChipProps) => {\n  // Determine the color based on mapping\n  const getChipColor = (): ChipColor => {\n    if (!colorMapping) {\n      return defaultColor;\n    }\n\n    const lookupValue = value !== undefined ? value : label;\n    const mappedColor = colorMapping[lookupValue];\n\n    return mappedColor || defaultColor;\n  };\n\n  const chipColor = getChipColor();\n\n  // Determine if chip should be clickable\n  const isClickable = clickable || !!href || !!onClick;\n\n  const chipElement = (\n    <MuiChip\n      label={label}\n      color={chipColor}\n      variant={variant}\n      size={size}\n      clickable={isClickable}\n      onClick={onClick}\n      onDelete={onDelete}\n      sx={{\n        // Default styles that can be overridden\n        fontWeight: 400,\n        // Add cursor pointer for links\n        ...(href && {\n          cursor: 'pointer',\n        }),\n        ...chipSx,\n      }}\n      {...rest}\n    />\n  );\n\n  // Wrap with Link if href is provided\n  if (href) {\n    return (\n      <Link href={href} target={target} rel={rel}>\n        {chipElement}\n      </Link>\n    );\n  }\n\n  return chipElement;\n};\n\n// Common color mappings that can be reused across the app\nexport const commonColorMappings = {\n  status: {\n    active: 'success' as ChipColor,\n    inactive: 'error' as ChipColor,\n    pending: 'warning' as ChipColor,\n    draft: 'default' as ChipColor,\n  },\n  severity: {\n    high: 'error' as ChipColor,\n    medium: 'warning' as ChipColor,\n    low: 'info' as ChipColor,\n    critical: 'error' as ChipColor,\n  },\n  priority: {\n    urgent: 'error' as ChipColor,\n    high: 'warning' as ChipColor,\n    medium: 'info' as ChipColor,\n    low: 'default' as ChipColor,\n  },\n  boolean: {\n    true: 'success' as ChipColor,\n    false: 'error' as ChipColor,\n    yes: 'success' as ChipColor,\n    no: 'error' as ChipColor,\n  },\n} as const;\n\nexport default Chip;\n"],"names":["MuiChip"],"mappings":";;;;AA8IO,MAAM,OAAO,CAAC;AAAA,EACnB,KAAA;AAAA,EACA,YAAA;AAAA,EACA,KAAA;AAAA,EACA,YAAA,GAAe,SAAA;AAAA,EACf,OAAA,GAAU,QAAA;AAAA,EACV,IAAA,GAAO,QAAA;AAAA,EACP,MAAA;AAAA,EACA,SAAA,GAAY,KAAA;AAAA,EACZ,OAAA;AAAA,EACA,QAAA;AAAA,EACA,IAAA;AAAA,EACA,MAAA;AAAA,EACA,GAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAiB;AAEf,EAAA,MAAM,eAAe,MAAiB;AACpC,IAAA,IAAI,CAAC,YAAA,EAAc;AACjB,MAAA,OAAO,YAAA;AAAA,IACT;AAEA,IAAA,MAAM,WAAA,GAAc,KAAA,KAAU,MAAA,GAAY,KAAA,GAAQ,KAAA;AAClD,IAAA,MAAM,WAAA,GAAc,aAAa,WAAW,CAAA;AAE5C,IAAA,OAAO,WAAA,IAAe,YAAA;AAAA,EACxB,CAAA;AAEA,EAAA,MAAM,YAAY,YAAA,EAAa;AAG/B,EAAA,MAAM,cAAc,SAAA,IAAa,CAAC,CAAC,IAAA,IAAQ,CAAC,CAAC,OAAA;AAE7C,EAAA,MAAM,WAAA,mBACJ,GAAA;AAAA,IAACA,MAAA;AAAA,IAAA;AAAA,MACC,KAAA;AAAA,MACA,KAAA,EAAO,SAAA;AAAA,MACP,OAAA;AAAA,MACA,IAAA;AAAA,MACA,SAAA,EAAW,WAAA;AAAA,MACX,OAAA;AAAA,MACA,QAAA;AAAA,MACA,EAAA,EAAI;AAAA;AAAA,QAEF,UAAA,EAAY,GAAA;AAAA;AAAA,QAEZ,GAAI,IAAA,IAAQ;AAAA,UACV,MAAA,EAAQ;AAAA,SACV;AAAA,QACA,GAAG;AAAA,OACL;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAIF,EAAA,IAAI,IAAA,EAAM;AACR,IAAA,uBACE,GAAA,CAAC,IAAA,EAAA,EAAK,IAAA,EAAY,MAAA,EAAgB,KAC/B,QAAA,EAAA,WAAA,EACH,CAAA;AAAA,EAEJ;AAEA,EAAA,OAAO,WAAA;AACT;;;;"}

package/dist/components/ChipsList.esm.js

@@ -0,0 +1,207 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import Box from '@mui/material/Box';
+import { useTheme } from '@mui/material/styles';
+import { Chip } from './Chip.esm.js';
+import { CustomTooltip } from './common/CustomTooltip.esm.js';
+import { SimpleTooltip } from './SimpleTooltip.esm.js';
+
+const ChipsList = ({
+  items,
+  maxVisible = 3,
+  colorMapping,
+  defaultColor = "default",
+  size = "medium",
+  variant = "filled",
+  sx,
+  chipSx,
+  overflowChipSx,
+  tooltipSx,
+  gap = 1,
+  direction = "row",
+  renderOverflowContent
+}) => {
+  const theme = useTheme();
+  if (!items || items.length === 0) {
+    return null;
+  }
+  const visibleItems = items.slice(0, maxVisible);
+  const hiddenItems = items.slice(maxVisible);
+  const hasOverflow = hiddenItems.length > 0;
+  let chipBackgroundColor = "transparent";
+  if (variant === "filled") {
+    chipBackgroundColor = theme.palette.mode === "dark" ? theme.palette.grey[700] : theme.palette.grey[300];
+  }
+  const chipBorderColor = theme.palette.mode === "dark" ? theme.palette.grey[700] : theme.palette.grey[400];
+  const renderChip = (item) => {
+    const chip = /* @__PURE__ */ jsx(
+      Chip,
+      {
+        label: item.label,
+        value: item.value,
+        colorMapping,
+        defaultColor,
+        size,
+        variant,
+        href: item.href,
+        target: item.target,
+        rel: item.rel,
+        chipSx: {
+          marginBottom: "0px",
+          height: "20px",
+          fontSize: "11px",
+          borderRadius: "10px",
+          backgroundColor: chipBackgroundColor,
+          border: variant === "outlined" ? `1px solid ${chipBorderColor}` : "none",
+          "& .MuiChip-label": {
+            padding: "0 6px",
+            fontSize: "11px",
+            lineHeight: "18px",
+            fontWeight: 100
+          },
+          ...chipSx,
+          ...item.chipProps?.sx
+        },
+        ...item.chipProps
+      },
+      item.id
+    );
+    if (item.tooltip) {
+      return /* @__PURE__ */ jsx(SimpleTooltip, { title: item.tooltip, children: chip }, item.id);
+    }
+    return chip;
+  };
+  const renderOverflowChip = () => {
+    if (!hasOverflow) return null;
+    const defaultOverflowContent = /* @__PURE__ */ jsx(
+      Box,
+      {
+        sx: {
+          display: "flex",
+          flexDirection: "column",
+          overflowX: "auto",
+          flexWrap: "wrap",
+          maxWidth: "100%",
+          gap: 0.5,
+          backgroundColor: theme.palette.mode === "dark" ? theme.palette.grey[700] : theme.palette.background.paper,
+          ...tooltipSx
+        },
+        "data-testid": "overflow-chip-tooltip",
+        children: hiddenItems.map((item) => {
+          const overflowChip = /* @__PURE__ */ jsx(
+            Chip,
+            {
+              label: item.label,
+              value: item.value,
+              colorMapping,
+              defaultColor,
+              size,
+              variant: "filled",
+              href: item.href,
+              target: item.target,
+              rel: item.rel,
+              chipSx: {
+                marginRight: "0px",
+                height: "20px",
+                fontSize: "11px",
+                borderRadius: "10px",
+                border: variant === "outlined" ? `1px solid ${chipBorderColor}` : "none",
+                "& .MuiChip-label": {
+                  padding: "0 6px",
+                  fontSize: "11px",
+                  lineHeight: "18px"
+                },
+                ...chipSx,
+                ...item.chipProps?.sx
+              },
+              ...item.chipProps
+            },
+            item.id
+          );
+          if (item.tooltip) {
+            return /* @__PURE__ */ jsx(
+              SimpleTooltip,
+              {
+                title: item.tooltip,
+                tooltipProps: {
+                  PopperProps: {
+                    sx: { zIndex: 1e4 }
+                  }
+                },
+                children: overflowChip
+              },
+              `overflow-${item.id}`
+            );
+          }
+          return overflowChip;
+        })
+      }
+    );
+    const overflowContent = renderOverflowContent?.(hiddenItems) ?? defaultOverflowContent;
+    return /* @__PURE__ */ jsx(
+      CustomTooltip,
+      {
+        title: overflowContent,
+        placement: "top",
+        enterDelay: 200,
+        leaveDelay: 300,
+        disableInteractive: false,
+        children: /* @__PURE__ */ jsx(
+          Chip,
+          {
+            label: `+${hiddenItems.length}`,
+            defaultColor: "default",
+            size,
+            variant: "outlined",
+            chipSx: {
+              marginBottom: "0px",
+              cursor: "pointer",
+              height: "20px",
+              fontSize: "11px",
+              minWidth: "24px",
+              borderRadius: "10px",
+              backgroundColor: "transparent",
+              border: `1px solid ${chipBorderColor}`,
+              "& .MuiChip-label": {
+                padding: "0 6px",
+                fontSize: "11px",
+                lineHeight: "18px"
+              },
+              "&:hover": {
+                backgroundColor: theme.palette.mode === "dark" ? theme.palette.grey[800] : theme.palette.grey[200]
+              },
+              ...overflowChipSx
+            }
+          }
+        )
+      }
+    );
+  };
+  const isFlex = hiddenItems.length > 0;
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      sx: {
+        display: isFlex ? "flex" : "block",
+        flexDirection: direction,
+        flexWrap: direction === "row" ? "wrap" : "nowrap",
+        gap,
+        overflow: "auto",
+        maxHeight: "100%",
+        maxWidth: "100%",
+        alignItems: "center",
+        backgroundColor: "transparent",
+        scrollbarWidth: "none",
+        "&::-webkit-scrollbar": { display: "none" },
+        msOverflowStyle: "none",
+        ...sx
+      },
+      children: [
+        visibleItems.map((item) => renderChip(item)),
+        renderOverflowChip()
+      ]
+    }
+  );
+};
+
+export { ChipsList, ChipsList as default };
+//# sourceMappingURL=ChipsList.esm.js.map

package/dist/components/ChipsList.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChipsList.esm.js","sources":["../../src/components/ChipsList.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 { useTheme } from '@mui/material/styles';\nimport type { SxProps, Theme } from '@mui/material/styles';\nimport type { ReactNode } from 'react';\nimport { Chip, ChipProps, ColorMapping } from './Chip';\nimport { CustomTooltip } from './common/CustomTooltip';\nimport { SimpleTooltip } from './SimpleTooltip';\n\nexport interface ChipsListItem {\n  /**\n   * Unique identifier for the chip\n   */\n  id: string | number;\n\n  /**\n   * Label to display on the chip\n   */\n  label: string;\n\n  /**\n   * Value for color mapping lookup (optional, defaults to label)\n   */\n  value?: string;\n\n  /**\n   * Tooltip text to display on hover (optional)\n   */\n  tooltip?: string;\n\n  /**\n   * URL to navigate to when chip is clicked (optional)\n   */\n  href?: string;\n\n  /**\n   * Link target (e.g., '_blank' for new tab)\n   */\n  target?: string;\n\n  /**\n   * Link rel attribute (e.g., 'noopener noreferrer' for external links)\n   */\n  rel?: string;\n\n  /**\n   * Additional props to pass to individual chip\n   */\n  chipProps?: Partial<ChipProps>;\n}\n\nexport interface ChipsListProps {\n  /**\n   * Array of chip items to display\n   */\n  items: ChipsListItem[];\n\n  /**\n   * Maximum number of chips to show before displaying +N\n   */\n  maxVisible?: number;\n\n  /**\n   * Color mapping for chips\n   */\n  colorMapping?: ColorMapping;\n\n  /**\n   * Default color for chips\n   */\n  defaultColor?: ChipProps['defaultColor'];\n\n  /**\n   * Size of the chips\n   */\n  size?: ChipProps['size'];\n\n  /**\n   * Variant of the chips\n   */\n  variant?: ChipProps['variant'];\n\n  /**\n   * Custom styles for the container\n   */\n  sx?: SxProps<Theme>;\n\n  /**\n   * Custom styles for individual chips\n   */\n  chipSx?: SxProps<Theme>;\n\n  /**\n   * Custom styles for the +N chip\n   */\n  overflowChipSx?: SxProps<Theme>;\n\n  /**\n   * Custom styles for the tooltip\n   */\n  tooltipSx?: SxProps<Theme>;\n\n  /**\n   * Gap between chips\n   */\n  gap?: number;\n\n  /**\n   * Direction of chip layout\n   */\n  direction?: 'row' | 'column';\n\n  /**\n   * Custom renderer for overflow tooltip content\n   */\n  renderOverflowContent?: (items: ChipsListItem[]) => ReactNode;\n}\n\n/**\n * ChipsList component that displays a list of chips with overflow handling\n * Shows a \"+N\" chip with tooltip when there are more items than maxVisible\n *\n * @example\n * // Basic usage\n * <ChipsList\n *   items={[\n *     { id: 1, label: 'High EPSS' },\n *     { id: 2, label: 'Known exploit' },\n *     { id: 3, label: 'Historical CVEs' }\n *   ]}\n *   maxVisible={2}\n * />\n *\n * @example\n * // With color mapping\n * <ChipsList\n *   items={chipItems}\n *   maxVisible={3}\n *   colorMapping={{ 'High': 'error', 'Medium': 'warning', 'Low': 'success' }}\n *   size=\"small\"\n *   variant=\"outlined\"\n * />\n *\n * @example\n * // With clickable links\n * <ChipsList\n *   items={[\n *     { id: 1, label: 'Team A', href: '/teams/team-a' },\n *     { id: 2, label: 'Team B', href: '/teams/team-b', target: '_blank' }\n *   ]}\n *   maxVisible={2}\n * />\n */\nexport const ChipsList = ({\n  items,\n  maxVisible = 3,\n  colorMapping,\n  defaultColor = 'default',\n  size = 'medium',\n  variant = 'filled',\n  sx,\n  chipSx,\n  overflowChipSx,\n  tooltipSx,\n  gap = 1,\n  direction = 'row',\n  renderOverflowContent,\n}: ChipsListProps) => {\n  const theme = useTheme();\n  if (!items || items.length === 0) {\n    return null;\n  }\n\n  const visibleItems = items.slice(0, maxVisible);\n  const hiddenItems = items.slice(maxVisible);\n  const hasOverflow = hiddenItems.length > 0;\n\n  // Get theme-aware colors\n  let chipBackgroundColor = 'transparent';\n  if (variant === 'filled') {\n    chipBackgroundColor =\n      theme.palette.mode === 'dark'\n        ? theme.palette.grey[700]\n        : theme.palette.grey[300];\n  }\n\n  const chipBorderColor =\n    theme.palette.mode === 'dark'\n      ? theme.palette.grey[700]\n      : theme.palette.grey[400];\n\n  const renderChip = (item: ChipsListItem) => {\n    const chip = (\n      <Chip\n        key={item.id}\n        label={item.label}\n        value={item.value}\n        colorMapping={colorMapping}\n        defaultColor={defaultColor}\n        size={size}\n        variant={variant}\n        href={item.href}\n        target={item.target}\n        rel={item.rel}\n        chipSx={{\n          marginBottom: '0px',\n          height: '20px',\n          fontSize: '11px',\n          borderRadius: '10px',\n          backgroundColor: chipBackgroundColor,\n          border:\n            variant === 'outlined' ? `1px solid ${chipBorderColor}` : 'none',\n          '& .MuiChip-label': {\n            padding: '0 6px',\n            fontSize: '11px',\n            lineHeight: '18px',\n            fontWeight: 100,\n          },\n          ...chipSx,\n          ...(item.chipProps?.sx as any),\n        }}\n        {...item.chipProps}\n      />\n    );\n\n    // Wrap with tooltip if tooltip text is provided\n    if (item.tooltip) {\n      return (\n        <SimpleTooltip key={item.id} title={item.tooltip}>\n          {chip}\n        </SimpleTooltip>\n      );\n    }\n\n    return chip;\n  };\n\n  const renderOverflowChip = () => {\n    if (!hasOverflow) return null;\n\n    const defaultOverflowContent = (\n      <Box\n        sx={{\n          display: 'flex',\n          flexDirection: 'column',\n          overflowX: 'auto',\n          flexWrap: 'wrap',\n          maxWidth: '100%',\n          gap: 0.5,\n          backgroundColor:\n            theme.palette.mode === 'dark'\n              ? theme.palette.grey[700]\n              : theme.palette.background.paper,\n          ...tooltipSx,\n        }}\n        data-testid=\"overflow-chip-tooltip\"\n      >\n        {hiddenItems.map(item => {\n          const overflowChip = (\n            <Chip\n              key={item.id}\n              label={item.label}\n              value={item.value}\n              colorMapping={colorMapping}\n              defaultColor={defaultColor}\n              size={size}\n              variant=\"filled\"\n              href={item.href}\n              target={item.target}\n              rel={item.rel}\n              chipSx={{\n                marginRight: '0px',\n                height: '20px',\n                fontSize: '11px',\n                borderRadius: '10px',\n                border:\n                  variant === 'outlined'\n                    ? `1px solid ${chipBorderColor}`\n                    : 'none',\n                '& .MuiChip-label': {\n                  padding: '0 6px',\n                  fontSize: '11px',\n                  lineHeight: '18px',\n                },\n                ...chipSx,\n                ...(item.chipProps?.sx as any),\n              }}\n              {...item.chipProps}\n            />\n          );\n\n          // Show individual tooltip if available\n          if (item.tooltip) {\n            return (\n              <SimpleTooltip\n                key={`overflow-${item.id}`}\n                title={item.tooltip}\n                tooltipProps={{\n                  PopperProps: {\n                    sx: { zIndex: 10000 },\n                  },\n                }}\n              >\n                {overflowChip}\n              </SimpleTooltip>\n            );\n          }\n\n          return overflowChip;\n        })}\n      </Box>\n    );\n\n    const overflowContent =\n      renderOverflowContent?.(hiddenItems) ?? defaultOverflowContent;\n\n    return (\n      <CustomTooltip\n        title={overflowContent}\n        placement=\"top\"\n        enterDelay={200}\n        leaveDelay={300}\n        disableInteractive={false}\n      >\n        <Chip\n          label={`+${hiddenItems.length}`}\n          defaultColor=\"default\"\n          size={size}\n          variant=\"outlined\"\n          chipSx={{\n            marginBottom: '0px',\n            cursor: 'pointer',\n            height: '20px',\n            fontSize: '11px',\n            minWidth: '24px',\n            borderRadius: '10px',\n            backgroundColor: 'transparent',\n            border: `1px solid ${chipBorderColor}`,\n            '& .MuiChip-label': {\n              padding: '0 6px',\n              fontSize: '11px',\n              lineHeight: '18px',\n            },\n            '&:hover': {\n              backgroundColor:\n                theme.palette.mode === 'dark'\n                  ? theme.palette.grey[800]\n                  : theme.palette.grey[200],\n            },\n            ...overflowChipSx,\n          }}\n        />\n      </CustomTooltip>\n    );\n  };\n  const isFlex = hiddenItems.length > 0;\n  return (\n    <Box\n      sx={{\n        display: isFlex ? 'flex' : 'block',\n        flexDirection: direction,\n        flexWrap: direction === 'row' ? 'wrap' : 'nowrap',\n        gap,\n        overflow: 'auto',\n        maxHeight: '100%',\n        maxWidth: '100%',\n        alignItems: 'center',\n        backgroundColor: 'transparent',\n        scrollbarWidth: 'none' /* Firefox */,\n        '&::-webkit-scrollbar': { display: 'none' } /* Chrome, Safari, Edge */,\n        msOverflowStyle: 'none' /* IE and Edge */,\n        ...sx,\n      }}\n    >\n      {visibleItems.map(item => renderChip(item))}\n      {renderOverflowChip()}\n    </Box>\n  );\n};\n\n// Common chip configurations that can be reused\nexport const commonChipsListConfigs = {\n  vulnerabilities: {\n    colorMapping: {\n      'High EPSS': 'error',\n      'Known exploit': 'error',\n      'Historical CVEs': 'warning',\n      'Backed by foundation': 'info',\n      'Frequent commits': 'success',\n      'Exploit POC': 'error',\n      'Has vulnerabilities': 'warning',\n    } as ColorMapping,\n    maxVisible: 2,\n    size: 'small' as const,\n    variant: 'outlined' as const,\n  },\n  status: {\n    colorMapping: {\n      Open: 'error',\n      'In Progress': 'warning',\n      Resolved: 'success',\n      Closed: 'default',\n    } as ColorMapping,\n    maxVisible: 3,\n    size: 'small' as const,\n    variant: 'filled' as const,\n  },\n  tags: {\n    colorMapping: {} as ColorMapping,\n    maxVisible: 4,\n    size: 'small' as const,\n    variant: 'outlined' as const,\n  },\n} as const;\n\nexport default ChipsList;\n"],"names":[],"mappings":"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"}

package/dist/components/ComponentDisplay.esm.js

@@ -0,0 +1,42 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useTheme } from '@mui/material/styles';
+import { SimpleTooltip } from './SimpleTooltip.esm.js';
+
+const ComponentDisplay = ({
+  filePath = "",
+  component
+}) => {
+  const theme = useTheme();
+  const tooltipText = `${filePath}
+${component}`;
+  return /* @__PURE__ */ jsx(SimpleTooltip, { title: tooltipText, centered: true, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        textAlign: "left",
+        lineHeight: "1.2",
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        alignItems: "flex-start",
+        height: "100%",
+        width: "100%",
+        margin: 0,
+        padding: 0
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: { fontSize: "0.75rem", color: theme.palette.text.secondary },
+            children: filePath
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { style: { fontSize: "0.875rem" }, children: component })
+      ]
+    }
+  ) });
+};
+
+export { ComponentDisplay };
+//# sourceMappingURL=ComponentDisplay.esm.js.map

package/dist/components/ComponentDisplay.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComponentDisplay.esm.js","sources":["../../src/components/ComponentDisplay.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 { useTheme } from '@mui/material/styles';\nimport { SimpleTooltip } from './SimpleTooltip';\n\ninterface ComponentDisplayProps {\n  /**\n   * The file path to display\n   */\n  filePath?: string;\n\n  /**\n   * The component name to display\n   */\n  component: string;\n}\n\n/**\n * A component to display file path and component name in a two-line format\n */\nexport const ComponentDisplay = ({\n  filePath = '',\n  component,\n}: ComponentDisplayProps) => {\n  const theme = useTheme();\n  const tooltipText = `${filePath}\\n${component}`;\n\n  return (\n    <SimpleTooltip title={tooltipText} centered>\n      <div\n        style={{\n          textAlign: 'left',\n          lineHeight: '1.2',\n          display: 'flex',\n          flexDirection: 'column',\n          justifyContent: 'center',\n          alignItems: 'flex-start',\n          height: '100%',\n          width: '100%',\n          margin: 0,\n          padding: 0,\n        }}\n      >\n        <div\n          style={{ fontSize: '0.75rem', color: theme.palette.text.secondary }}\n        >\n          {filePath}\n        </div>\n        <div style={{ fontSize: '0.875rem' }}>{component}</div>\n      </div>\n    </SimpleTooltip>\n  );\n};\n"],"names":[],"mappings":";;;;AAiCO,MAAM,mBAAmB,CAAC;AAAA,EAC/B,QAAA,GAAW,EAAA;AAAA,EACX;AACF,CAAA,KAA6B;AAC3B,EAAA,MAAM,QAAQ,QAAA,EAAS;AACvB,EAAA,MAAM,WAAA,GAAc,GAAG,QAAQ;AAAA,EAAK,SAAS,CAAA,CAAA;AAE7C,EAAA,uBACE,GAAA,CAAC,aAAA,EAAA,EAAc,KAAA,EAAO,WAAA,EAAa,UAAQ,IAAA,EACzC,QAAA,kBAAA,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO;AAAA,QACL,SAAA,EAAW,MAAA;AAAA,QACX,UAAA,EAAY,KAAA;AAAA,QACZ,OAAA,EAAS,MAAA;AAAA,QACT,aAAA,EAAe,QAAA;AAAA,QACf,cAAA,EAAgB,QAAA;AAAA,QAChB,UAAA,EAAY,YAAA;AAAA,QACZ,MAAA,EAAQ,MAAA;AAAA,QACR,KAAA,EAAO,MAAA;AAAA,QACP,MAAA,EAAQ,CAAA;AAAA,QACR,OAAA,EAAS;AAAA,OACX;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,KAAA,EAAO,EAAE,QAAA,EAAU,SAAA,EAAW,OAAO,KAAA,CAAM,OAAA,CAAQ,KAAK,SAAA,EAAU;AAAA,YAEjE,QAAA,EAAA;AAAA;AAAA,SACH;AAAA,4BACC,KAAA,EAAA,EAAI,KAAA,EAAO,EAAE,QAAA,EAAU,UAAA,IAAe,QAAA,EAAA,SAAA,EAAU;AAAA;AAAA;AAAA,GACnD,EACF,CAAA;AAEJ;;;;"}

package/dist/components/DataGrid/CustomColumnMenu.esm.js

@@ -0,0 +1,29 @@
+import { jsx } from 'react/jsx-runtime';
+import { GridColumnMenu } from '@mui/x-data-grid';
+import { PinColumnMenuItem } from './PinColumnMenuItem.esm.js';
+
+function CustomColumnMenu(props) {
+  const { isPinned, onTogglePin, ...gridProps } = props;
+  return /* @__PURE__ */ jsx(
+    GridColumnMenu,
+    {
+      ...gridProps,
+      slots: {
+        // Hide `columnMenuFilterItem`
+        columnMenuFilterItem: null,
+        // custom pin menu item
+        columnMenuPinItem: PinColumnMenuItem
+      },
+      slotProps: {
+        columnMenuPinItem: {
+          displayOrder: 10,
+          isPinned,
+          onTogglePin
+        }
+      }
+    }
+  );
+}
+
+export { CustomColumnMenu };
+//# sourceMappingURL=CustomColumnMenu.esm.js.map

package/dist/components/DataGrid/CustomColumnMenu.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomColumnMenu.esm.js","sources":["../../../src/components/DataGrid/CustomColumnMenu.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 { GridColumnMenu } from '@mui/x-data-grid';\nimport { PinColumnMenuItem } from './PinColumnMenuItem';\nimport { CustomColumnMenuProps } from './types';\n\nexport function CustomColumnMenu(props: CustomColumnMenuProps) {\n  const { isPinned, onTogglePin, ...gridProps } = props;\n\n  return (\n    <GridColumnMenu\n      {...gridProps}\n      slots={{\n        // Hide `columnMenuFilterItem`\n        columnMenuFilterItem: null,\n        // custom pin menu item\n        columnMenuPinItem: PinColumnMenuItem,\n      }}\n      slotProps={{\n        columnMenuPinItem: {\n          displayOrder: 10,\n          isPinned,\n          onTogglePin,\n        },\n      }}\n    />\n  );\n}\n"],"names":[],"mappings":";;;;AAmBO,SAAS,iBAAiB,KAAA,EAA8B;AAC7D,EAAA,MAAM,EAAE,QAAA,EAAU,WAAA,EAAa,GAAG,WAAU,GAAI,KAAA;AAEhD,EAAA,uBACE,GAAA;AAAA,IAAC,cAAA;AAAA,IAAA;AAAA,MACE,GAAG,SAAA;AAAA,MACJ,KAAA,EAAO;AAAA;AAAA,QAEL,oBAAA,EAAsB,IAAA;AAAA;AAAA,QAEtB,iBAAA,EAAmB;AAAA,OACrB;AAAA,MACA,SAAA,EAAW;AAAA,QACT,iBAAA,EAAmB;AAAA,UACjB,YAAA,EAAc,EAAA;AAAA,UACd,QAAA;AAAA,UACA;AAAA;AACF;AACF;AAAA,GACF;AAEJ;;;;"}

package/dist/components/DataGrid/CustomPagination.esm.js

@@ -0,0 +1,113 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import Select from '@mui/material/Select';
+import MenuItem from '@mui/material/MenuItem';
+import Pagination from '@mui/material/Pagination';
+import { useTheme } from '@mui/material/styles';
+import { useGridApiContext, useGridSelector, gridPaginationModelSelector, gridFilteredTopLevelRowCountSelector } from '@mui/x-data-grid';
+
+function CustomPagination({
+  onPageSizeChange,
+  pageSizeOptions = [20, 50, 100],
+  dataLabel = "items"
+}) {
+  const theme = useTheme();
+  const apiRef = useGridApiContext();
+  const paginationModel = useGridSelector(apiRef, gridPaginationModelSelector);
+  const filteredRowCount = useGridSelector(
+    apiRef,
+    gridFilteredTopLevelRowCountSelector
+  );
+  const { page, pageSize } = paginationModel;
+  const totalPages = Math.ceil(filteredRowCount / pageSize);
+  const startRow = filteredRowCount === 0 ? 0 : page * pageSize + 1;
+  const endRow = Math.min((page + 1) * pageSize, filteredRowCount);
+  const handlePageChange = (newPage) => {
+    apiRef.current.setPage(newPage);
+  };
+  const handlePageSizeChange = (event) => {
+    onPageSizeChange(Number(event.target.value));
+  };
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        padding: "8px 16px",
+        backgroundColor: theme.palette.background.paper,
+        minHeight: "52px"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          Pagination,
+          {
+            count: totalPages,
+            page: page + 1,
+            onChange: (_, newPage) => handlePageChange(newPage - 1),
+            defaultPage: 1,
+            sx: {
+              "& .MuiPaginationItem-root": {
+                fontSize: "0.875rem"
+              }
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              gap: 1,
+              marginRight: "10px",
+              marginLeft: "4px"
+            },
+            children: /* @__PURE__ */ jsx(
+              Select,
+              {
+                value: pageSize,
+                onChange: handlePageSizeChange,
+                size: "small",
+                sx: {
+                  borderRadius: "100vmax",
+                  margin: "0",
+                  minWidth: "80px",
+                  "& .MuiSelect-select": {
+                    padding: "4px 8px",
+                    fontSize: "0.875rem"
+                  }
+                },
+                MenuProps: {
+                  PaperProps: {
+                    sx: {
+                      borderRadius: 3
+                    }
+                  }
+                },
+                children: pageSizeOptions.map((option) => /* @__PURE__ */ jsxs(MenuItem, { value: option, children: [
+                  option,
+                  " per page"
+                ] }, option))
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs(Typography, { variant: "body2", color: "text.secondary", children: [
+          startRow,
+          "-",
+          endRow,
+          " of ",
+          filteredRowCount.toLocaleString(),
+          " ",
+          dataLabel
+        ] })
+      ]
+    }
+  );
+}
+
+export { CustomPagination };
+//# sourceMappingURL=CustomPagination.esm.js.map

package/dist/components/DataGrid/CustomPagination.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomPagination.esm.js","sources":["../../../src/components/DataGrid/CustomPagination.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 Typography from '@mui/material/Typography';\nimport Select from '@mui/material/Select';\nimport MenuItem from '@mui/material/MenuItem';\nimport Pagination from '@mui/material/Pagination';\nimport { useTheme } from '@mui/material/styles';\nimport {\n  useGridApiContext,\n  useGridSelector,\n  gridFilteredTopLevelRowCountSelector,\n  gridPaginationModelSelector,\n} from '@mui/x-data-grid';\nimport { CustomPaginationProps } from './types';\n\nexport function CustomPagination({\n  onPageSizeChange,\n  pageSizeOptions = [20, 50, 100],\n  dataLabel = 'items',\n}: Omit<\n  CustomPaginationProps,\n  'page' | 'pageSize' | 'rowCount' | 'onPageChange'\n>) {\n  const theme = useTheme();\n  const apiRef = useGridApiContext();\n\n  // Use DataGrid selectors to get current state\n  const paginationModel = useGridSelector(apiRef, gridPaginationModelSelector);\n  const filteredRowCount = useGridSelector(\n    apiRef,\n    gridFilteredTopLevelRowCountSelector,\n  );\n\n  const { page, pageSize } = paginationModel;\n  const totalPages = Math.ceil(filteredRowCount / pageSize);\n  const startRow = filteredRowCount === 0 ? 0 : page * pageSize + 1;\n  const endRow = Math.min((page + 1) * pageSize, filteredRowCount);\n\n  const handlePageChange = (newPage: number) => {\n    apiRef.current.setPage(newPage);\n  };\n\n  const handlePageSizeChange = (event: any) => {\n    onPageSizeChange(Number(event.target.value));\n  };\n\n  return (\n    <Box\n      sx={{\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'space-between',\n        padding: '8px 16px',\n        backgroundColor: theme.palette.background.paper,\n        minHeight: '52px',\n      }}\n    >\n      {/* Left side - Pagination */}\n      <Pagination\n        count={totalPages}\n        page={page + 1}\n        onChange={(_, newPage) => handlePageChange(newPage - 1)}\n        defaultPage={1}\n        sx={{\n          '& .MuiPaginationItem-root': {\n            fontSize: '0.875rem',\n          },\n        }}\n      />\n\n      {/* Center - Per page dropdown */}\n      <Box\n        sx={{\n          display: 'flex',\n          alignItems: 'center',\n          gap: 1,\n          marginRight: '10px',\n          marginLeft: '4px',\n        }}\n      >\n        <Select\n          value={pageSize}\n          onChange={handlePageSizeChange}\n          size=\"small\"\n          sx={{\n            borderRadius: '100vmax',\n            margin: '0',\n            minWidth: '80px',\n            '& .MuiSelect-select': {\n              padding: '4px 8px',\n              fontSize: '0.875rem',\n            },\n          }}\n          MenuProps={{\n            PaperProps: {\n              sx: {\n                borderRadius: 3,\n              },\n            },\n          }}\n        >\n          {pageSizeOptions.map(option => (\n            <MenuItem key={option} value={option}>\n              {option} per page\n            </MenuItem>\n          ))}\n        </Select>\n      </Box>\n\n      {/* Right side - Row count info */}\n      <Typography variant=\"body2\" color=\"text.secondary\">\n        {startRow}-{endRow} of {filteredRowCount.toLocaleString()} {dataLabel}\n      </Typography>\n    </Box>\n  );\n}\n"],"names":[],"mappings":"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"}