@backstage-community/plugin-apiiro 0.1.0

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

@@ -0,0 +1,117 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import Box from '@mui/material/Box';
+import TextField from '@mui/material/TextField';
+import InputAdornment from '@mui/material/InputAdornment';
+import SearchIcon from '@mui/icons-material/Search';
+import ClearIcon from '@mui/icons-material/Clear';
+import IconButton from '@mui/material/IconButton';
+import { useTheme } from '@mui/material/styles';
+import { getSearchToolbarColors } from '../../theme/themeUtils.esm.js';
+
+function CustomSearchToolbar({
+  apiRef,
+  placeholder,
+  customFilters
+}) {
+  const theme = useTheme();
+  const searchColors = getSearchToolbarColors(theme);
+  const getInitialSearchValue = () => {
+    if (typeof window !== "undefined") {
+      const urlParams = new URLSearchParams(window.location.search);
+      return urlParams.get("search") || "";
+    }
+    return "";
+  };
+  const [searchText, setSearchText] = useState(getInitialSearchValue);
+  useEffect(() => {
+    const initialSearch = getInitialSearchValue();
+    if (initialSearch) {
+      setSearchText(initialSearch);
+      apiRef?.current?.setQuickFilterValues([initialSearch]);
+    }
+  }, [apiRef]);
+  const updateURL = (searchValue) => {
+    if (typeof window !== "undefined") {
+      const url = new URL(window.location.href);
+      if (searchValue) {
+        url.searchParams.set("search", searchValue);
+      } else {
+        url.searchParams.delete("search");
+      }
+      window.history.replaceState({}, "", url.toString());
+    }
+  };
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      updateURL(searchText);
+    }, 300);
+    return () => clearTimeout(handler);
+  }, [searchText]);
+  const handleSearchChange = (value) => {
+    setSearchText(value);
+    apiRef?.current?.setQuickFilterValues([value]);
+  };
+  const handleClearSearch = () => {
+    setSearchText("");
+    apiRef?.current?.setQuickFilterValues([""]);
+  };
+  return /* @__PURE__ */ jsx(Box, { sx: { py: 2 }, children: /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexDirection: "column", gap: 1.5 }, children: [
+    /* @__PURE__ */ jsx(
+      TextField,
+      {
+        placeholder,
+        value: searchText,
+        onChange: (e) => handleSearchChange(e.target.value),
+        variant: "outlined",
+        size: "small",
+        InputProps: {
+          sx: {
+            borderRadius: "40px"
+          },
+          startAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "start", children: /* @__PURE__ */ jsx(SearchIcon, { sx: { color: searchColors.iconColor } }) }),
+          endAdornment: searchText && /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              onClick: handleClearSearch,
+              size: "small",
+              sx: { color: searchColors.iconColor },
+              children: /* @__PURE__ */ jsx(ClearIcon, { fontSize: "small" })
+            }
+          ) })
+        },
+        sx: {
+          minWidth: 300,
+          maxWidth: 400,
+          "& .MuiOutlinedInput-root": {
+            backgroundColor: searchColors.backgroundColor,
+            "& fieldset": {
+              borderColor: searchColors.borderColor
+            },
+            "&:hover fieldset": {
+              borderColor: searchColors.hoverBorderColor
+            },
+            "&.Mui-focused fieldset": {
+              borderColor: searchColors.focusBorderColor
+            }
+          }
+        }
+      }
+    ),
+    customFilters && /* @__PURE__ */ jsx(
+      Box,
+      {
+        sx: {
+          display: "flex",
+          gap: 1,
+          alignItems: "center",
+          flexWrap: "wrap"
+        },
+        children: customFilters
+      }
+    )
+  ] }) });
+}
+
+export { CustomSearchToolbar };
+//# sourceMappingURL=CustomSearchToolbar.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CustomSearchToolbar.esm.js","sources":["../../../src/components/DataGrid/CustomSearchToolbar.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 { useState, useEffect } from 'react';\nimport Box from '@mui/material/Box';\nimport TextField from '@mui/material/TextField';\nimport InputAdornment from '@mui/material/InputAdornment';\nimport SearchIcon from '@mui/icons-material/Search';\nimport ClearIcon from '@mui/icons-material/Clear';\nimport IconButton from '@mui/material/IconButton';\nimport { useTheme } from '@mui/material/styles';\nimport { CustomSearchToolbarProps } from './types';\nimport { getSearchToolbarColors } from '../../theme/themeUtils';\n\nexport function CustomSearchToolbar({\n  apiRef,\n  placeholder,\n  customFilters,\n}: CustomSearchToolbarProps) {\n  const theme = useTheme();\n  const searchColors = getSearchToolbarColors(theme);\n  // Get initial search value from URL parameter\n  const getInitialSearchValue = (): string => {\n    if (typeof window !== 'undefined') {\n      const urlParams = new URLSearchParams(window.location.search);\n      return urlParams.get('search') || '';\n    }\n    return '';\n  };\n\n  const [searchText, setSearchText] = useState<string>(getInitialSearchValue);\n\n  // Initialize search from URL on component mount\n  useEffect(() => {\n    const initialSearch = getInitialSearchValue();\n    if (initialSearch) {\n      setSearchText(initialSearch);\n      apiRef?.current?.setQuickFilterValues([initialSearch]);\n    }\n  }, [apiRef]);\n\n  const updateURL = (searchValue: string) => {\n    if (typeof window !== 'undefined') {\n      const url = new URL(window.location.href);\n      if (searchValue) {\n        url.searchParams.set('search', searchValue);\n      } else {\n        url.searchParams.delete('search');\n      }\n      window.history.replaceState({}, '', url.toString());\n    }\n  };\n\n  // Debounced URL update effect\n  useEffect(() => {\n    const handler = setTimeout(() => {\n      // Update URL only after 300ms of inactivity\n      updateURL(searchText);\n    }, 300);\n\n    return () => clearTimeout(handler);\n  }, [searchText]);\n\n  const handleSearchChange = (value: string) => {\n    setSearchText(value);\n    // Use MUI's built-in quick filter API (immediate)\n    apiRef?.current?.setQuickFilterValues([value]);\n    // URL update is now debounced via useEffect\n  };\n\n  const handleClearSearch = () => {\n    setSearchText('');\n    apiRef?.current?.setQuickFilterValues(['']);\n    // URL parameter will be cleared by debounced effect\n  };\n\n  return (\n    <Box sx={{ py: 2 }}>\n      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>\n        <TextField\n          placeholder={placeholder}\n          value={searchText}\n          onChange={e => handleSearchChange(e.target.value)}\n          variant=\"outlined\"\n          size=\"small\"\n          InputProps={{\n            sx: {\n              borderRadius: '40px',\n            },\n            startAdornment: (\n              <InputAdornment position=\"start\">\n                <SearchIcon sx={{ color: searchColors.iconColor }} />\n              </InputAdornment>\n            ),\n            endAdornment: searchText && (\n              <InputAdornment position=\"end\">\n                <IconButton\n                  onClick={handleClearSearch}\n                  size=\"small\"\n                  sx={{ color: searchColors.iconColor }}\n                >\n                  <ClearIcon fontSize=\"small\" />\n                </IconButton>\n              </InputAdornment>\n            ),\n          }}\n          sx={{\n            minWidth: 300,\n            maxWidth: 400,\n            '& .MuiOutlinedInput-root': {\n              backgroundColor: searchColors.backgroundColor,\n              '& fieldset': {\n                borderColor: searchColors.borderColor,\n              },\n              '&:hover fieldset': {\n                borderColor: searchColors.hoverBorderColor,\n              },\n              '&.Mui-focused fieldset': {\n                borderColor: searchColors.focusBorderColor,\n              },\n            },\n          }}\n        />\n        {customFilters && (\n          <Box\n            sx={{\n              display: 'flex',\n              gap: 1,\n              alignItems: 'center',\n              flexWrap: 'wrap',\n            }}\n          >\n            {customFilters}\n          </Box>\n        )}\n      </Box>\n    </Box>\n  );\n}\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,336 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useEffect, useCallback } from 'react';
+import { useGridApiRef, DataGrid as DataGrid$1 } from '@mui/x-data-grid';
+import Box from '@mui/material/Box';
+import { useTheme } from '@mui/material/styles';
+import { CustomColumnMenu } from './CustomColumnMenu.esm.js';
+import { CustomPagination } from './CustomPagination.esm.js';
+import { CustomSearchToolbar } from './CustomSearchToolbar.esm.js';
+import '../common/ChartBox.esm.js';
+import 'react-dom';
+import { NotFound } from '../common/NotFound.esm.js';
+import '@mui/material/Typography';
+import { LogoSpinner } from '../common/logoSpinner.esm.js';
+
+function DataGrid({
+  // Required props
+  tableKey,
+  columns: propColumns,
+  rows: propRows,
+  // Optional configuration
+  dataLabel = "items",
+  searchBarPlaceHolder = "Search",
+  features = {},
+  styling = {},
+  // Pagination
+  initialPageSize = 20,
+  pageSizeOptions = [20, 50, 100],
+  // Event handlers
+  onRowClick,
+  onSelectionChange,
+  // Custom components
+  customFilters,
+  columnVisibility,
+  // Loading state
+  loading,
+  // custom Row ID
+  getRowId,
+  // Initial Table state
+  initialState
+}) {
+  const theme = useTheme();
+  const apiRef = useGridApiRef();
+  const {
+    quickSearch = true,
+    columnPinning = true,
+    columnReordering = true,
+    customPagination = true,
+    columnMenu = true,
+    persistLayout = true
+  } = features;
+  const {
+    borderRadius = "12px",
+    headerBackgroundColor = theme.palette.mode === "dark" ? theme.palette.background.paper : theme.palette.grey[100],
+    backgroundColor = theme.palette.background.paper,
+    height = "auto"
+  } = styling;
+  const [columns, setColumns] = useState(propColumns);
+  const [pinned, setPinned] = useState([]);
+  const [dragCol, setDragCol] = useState(null);
+  const [dropTarget, setDropTarget] = useState(null);
+  const [dropSide, setDropSide] = useState(null);
+  const [paginationModel, setPaginationModel] = useState({
+    page: 0,
+    pageSize: initialPageSize
+  });
+  const [columnVisibilityModel, setColumnVisibilityModel] = useState(columnVisibility || {});
+  useEffect(() => {
+    if (!persistLayout) return;
+    try {
+      const saved = localStorage.getItem(`apiiro-gridLayout-${tableKey}`);
+      if (saved) {
+        const {
+          order,
+          pinned: savedPinned,
+          columnVisibility: savedVisibility
+        } = JSON.parse(saved);
+        setPinned(savedPinned || []);
+        if (savedVisibility) {
+          setColumnVisibilityModel(savedVisibility);
+        }
+        const orderedColumns2 = order.map((field) => propColumns.find((c) => c.field === field)).filter((c) => !!c);
+        setColumns(orderedColumns2);
+      }
+    } catch (error) {
+    }
+  }, [propColumns, persistLayout, tableKey]);
+  const saveLayout = useCallback(
+    (cols, pinnedCols, visibility) => {
+      if (!persistLayout) return;
+      const layout = {
+        order: cols.map((c) => c.field),
+        pinned: pinnedCols,
+        columnVisibility: visibility || columnVisibilityModel
+      };
+      localStorage.setItem(
+        `apiiro-gridLayout-${tableKey}`,
+        JSON.stringify(layout)
+      );
+    },
+    [persistLayout, tableKey, columnVisibilityModel]
+  );
+  useEffect(() => {
+    if (persistLayout) {
+      saveLayout(columns, pinned, columnVisibilityModel);
+    }
+  }, [columnVisibilityModel, persistLayout, saveLayout, columns, pinned]);
+  const handleDragStart = (field) => setDragCol(field);
+  const handleDragOver = (e, targetField) => {
+    e.preventDefault();
+    if (dragCol === targetField) return;
+    const targetRect = e.currentTarget.getBoundingClientRect();
+    const x = e.clientX - targetRect.left;
+    setDropTarget(targetField);
+    setDropSide(x < targetRect.width / 2 ? "left" : "right");
+  };
+  const handleDragLeave = () => setDropTarget(null);
+  const handleDrop = (targetField) => {
+    if (!dragCol || dragCol === targetField) return;
+    const dragIsPinned = pinned.includes(dragCol);
+    const targetIsPinned = pinned.includes(targetField);
+    if (dragIsPinned !== targetIsPinned) {
+      setDragCol(null);
+      setDropTarget(null);
+      return;
+    }
+    const currentList = dragIsPinned ? columns.filter((c) => pinned.includes(c.field)) : columns.filter((c) => !pinned.includes(c.field));
+    const dragIndex = currentList.findIndex((c) => c.field === dragCol);
+    const targetIndex = currentList.findIndex((c) => c.field === targetField);
+    const newIndex = dropSide === "left" ? targetIndex : targetIndex + 1;
+    const reordered = [...currentList];
+    const [moved] = reordered.splice(dragIndex, 1);
+    reordered.splice(newIndex, 0, moved);
+    const finalColumns2 = dragIsPinned ? [...reordered, ...columns.filter((c) => !pinned.includes(c.field))] : [...columns.filter((c) => pinned.includes(c.field)), ...reordered];
+    setColumns(finalColumns2);
+    setDragCol(null);
+    setDropTarget(null);
+    saveLayout(finalColumns2, pinned);
+  };
+  const togglePin = useCallback(
+    (field) => {
+      setPinned((prev) => {
+        const next = prev.includes(field) ? prev.filter((f) => f !== field) : [...prev, field];
+        saveLayout(columns, next);
+        return next;
+      });
+    },
+    [columns, saveLayout]
+  );
+  const CustomColumnMenuWithProps = useCallback(
+    (props) => {
+      return /* @__PURE__ */ jsx(
+        CustomColumnMenu,
+        {
+          ...props,
+          isPinned: pinned.includes(props.colDef.field),
+          onTogglePin: togglePin
+        }
+      );
+    },
+    [pinned, togglePin]
+  );
+  const CustomPaginationComponent = useCallback(
+    () => /* @__PURE__ */ jsx(
+      CustomPagination,
+      {
+        onPageSizeChange: (pageSize) => setPaginationModel({ page: 0, pageSize }),
+        pageSizeOptions,
+        dataLabel
+      }
+    ),
+    [dataLabel, pageSizeOptions]
+  );
+  const finalColumns = columnReordering ? columns.map((col) => ({
+    ...col,
+    renderHeader: () => /* @__PURE__ */ jsx(
+      Box,
+      {
+        draggable: columnReordering,
+        onDragStart: () => handleDragStart(col.field),
+        onDragOver: (e) => handleDragOver(e, col.field),
+        onDragLeave: handleDragLeave,
+        onDrop: () => handleDrop(col.field),
+        sx: {
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          cursor: columnReordering ? "grab" : "default",
+          userSelect: "none",
+          position: "relative",
+          fontWeight: columnPinning && pinned.includes(col.field) ? "bold" : "normal",
+          px: 1,
+          "&::before": columnReordering ? {
+            content: '""',
+            position: "absolute",
+            top: 0,
+            bottom: 0,
+            left: dropTarget === col.field && dropSide === "left" ? 0 : "auto",
+            right: dropTarget === col.field && dropSide === "right" ? 0 : "auto",
+            width: "3px",
+            backgroundColor: dropTarget === col.field ? theme.palette.primary.main : "transparent",
+            transition: "background 0.1s ease"
+          } : {}
+        },
+        children: col.headerName
+      }
+    )
+  })) : columns;
+  const orderedColumns = columnPinning ? [
+    ...finalColumns.filter((c) => pinned.includes(c.field)).map((col) => ({ ...col, resizable: false })),
+    ...finalColumns.filter((c) => !pinned.includes(c.field))
+  ] : finalColumns;
+  const pinnedOffsets = {};
+  let leftOffset = 0;
+  for (const col of orderedColumns) {
+    if (pinned.includes(col.field)) {
+      pinnedOffsets[col.field] = leftOffset;
+      leftOffset += col.minWidth || col.width || 200;
+    }
+  }
+  const pinnedColumnStyles = {};
+  if (columnPinning) {
+    pinned.forEach((field) => {
+      pinnedColumnStyles[`& [data-field="${field}"]`] = {
+        position: "sticky",
+        left: pinnedOffsets[field],
+        zIndex: 9999,
+        backgroundColor,
+        boxShadow: "2px 0 2px rgba(0,0,0,0.05)"
+      };
+    });
+  }
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      sx: {
+        height,
+        width: "100%",
+        overflowX: "auto"
+      },
+      children: [
+        quickSearch && /* @__PURE__ */ jsx(
+          CustomSearchToolbar,
+          {
+            apiRef,
+            placeholder: searchBarPlaceHolder,
+            customFilters
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          DataGrid$1,
+          {
+            apiRef,
+            rows: propRows,
+            columns: orderedColumns,
+            initialState: {
+              ...initialState
+            },
+            columnVisibilityModel,
+            onColumnVisibilityModelChange: setColumnVisibilityModel,
+            disableVirtualization: true,
+            getRowId,
+            loading,
+            paginationModel,
+            onPaginationModelChange: setPaginationModel,
+            pageSizeOptions,
+            onRowClick: onRowClick ? (params) => onRowClick(params.row) : void 0,
+            onRowSelectionModelChange: onSelectionChange ? (selectionModel) => {
+              const selectedIds = selectionModel.ids ? Array.from(selectionModel.ids) : [];
+              const selectedRows = propRows.filter(
+                (row) => selectedIds.some(
+                  (id) => String(getRowId ? getRowId(row) : row.id) === String(id)
+                )
+              );
+              onSelectionChange(selectedRows);
+            } : void 0,
+            slots: {
+              ...columnMenu && { columnMenu: CustomColumnMenuWithProps },
+              ...customPagination && { pagination: CustomPaginationComponent },
+              noResultsOverlay: () => /* @__PURE__ */ jsx(NotFound, {}),
+              loadingOverlay: () => /* @__PURE__ */ jsx(
+                Box,
+                {
+                  display: "flex",
+                  height: "100%",
+                  justifyContent: "center",
+                  alignItems: "center",
+                  children: /* @__PURE__ */ jsx(LogoSpinner, {})
+                }
+              )
+            },
+            slotProps: {
+              loadingOverlay: {
+                variant: "linear-progress",
+                noRowsVariant: "skeleton"
+              },
+              columnsManagement: {
+                disableResetButton: true,
+                searchInputProps: {
+                  type: "text"
+                }
+              }
+            },
+            sx: {
+              backgroundColor,
+              "&.MuiDataGrid-root": {
+                borderRadius,
+                minWidth: "auto"
+              },
+              "& .MuiDataGrid-columnHeader:focus, & .MuiDataGrid-columnHeader:focus-within": {
+                outline: "none"
+              },
+              "&.MuiDataGrid-root .MuiDataGrid-columnHeader, &.MuiDataGrid-root .MuiDataGrid-filler": {
+                backgroundColor: headerBackgroundColor
+              },
+              // Column resize line styling
+              "& .MuiDataGrid-columnSeparator--resizable": {
+                "&:hover": {
+                  color: theme.palette.primary.main
+                }
+              },
+              "& .MuiDataGrid-columnSeparator--resizing": {
+                color: theme.palette.primary.main,
+                opacity: 1
+              },
+              ...pinnedColumnStyles
+            }
+          },
+          tableKey
+        )
+      ]
+    }
+  );
+}
+
+export { DataGrid };
+//# sourceMappingURL=DataGrid.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataGrid.esm.js","sources":["../../../src/components/DataGrid/DataGrid.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 { useEffect, useState, useCallback } from 'react';\nimport {\n  DataGrid as DataGridMUI,\n  GridColDef,\n  GridPaginationModel,\n  useGridApiRef,\n  GridValidRowModel,\n} from '@mui/x-data-grid';\nimport Box from '@mui/material/Box';\nimport { useTheme } from '@mui/material/styles';\nimport { CustomColumnMenu } from './CustomColumnMenu';\nimport { CustomPagination } from './CustomPagination';\nimport { CustomSearchToolbar } from './CustomSearchToolbar';\nimport { DataGridProps, GridLayout } from './types';\nimport { NotFound } from '../common';\nimport { LogoSpinner } from '../common/logoSpinner';\n\nexport function DataGrid<T extends GridValidRowModel>({\n  // Required props\n  tableKey,\n  columns: propColumns,\n  rows: propRows,\n\n  // Optional configuration\n  dataLabel = 'items',\n  searchBarPlaceHolder = 'Search',\n  features = {},\n  styling = {},\n\n  // Pagination\n  initialPageSize = 20,\n  pageSizeOptions = [20, 50, 100],\n\n  // Event handlers\n  onRowClick,\n  onSelectionChange,\n\n  // Custom components\n  customFilters,\n  columnVisibility,\n\n  // Loading state\n  loading,\n\n  // custom Row ID\n  getRowId,\n\n  // Initial Table state\n  initialState,\n}: DataGridProps<T>) {\n  const theme = useTheme();\n  const apiRef = useGridApiRef();\n\n  // Default feature flags\n  const {\n    quickSearch = true,\n    columnPinning = true,\n    columnReordering = true,\n    customPagination = true,\n    columnMenu = true,\n    persistLayout = true,\n  } = features;\n\n  // Default styling\n  const {\n    borderRadius = '12px',\n    headerBackgroundColor = theme.palette.mode === 'dark'\n      ? theme.palette.background.paper\n      : theme.palette.grey[100],\n    backgroundColor = theme.palette.background.paper,\n    height = 'auto',\n  } = styling;\n\n  const [columns, setColumns] = useState<GridColDef<T>[]>(propColumns);\n  const [pinned, setPinned] = useState<string[]>([]);\n  const [dragCol, setDragCol] = useState<string | null>(null);\n  const [dropTarget, setDropTarget] = useState<string | null>(null);\n  const [dropSide, setDropSide] = useState<'left' | 'right' | null>(null);\n  const [paginationModel, setPaginationModel] = useState<GridPaginationModel>({\n    page: 0,\n    pageSize: initialPageSize,\n  });\n\n  const [columnVisibilityModel, setColumnVisibilityModel] = useState<\n    Record<string, boolean>\n  >(columnVisibility || {});\n\n  // Load saved layout\n  useEffect(() => {\n    if (!persistLayout) return;\n\n    try {\n      const saved = localStorage.getItem(`apiiro-gridLayout-${tableKey}`);\n      if (saved) {\n        const {\n          order,\n          pinned: savedPinned,\n          columnVisibility: savedVisibility,\n        } = JSON.parse(saved) as GridLayout;\n        setPinned(savedPinned || []);\n\n        // Restore column visibility if saved\n        if (savedVisibility) {\n          setColumnVisibilityModel(savedVisibility);\n        }\n\n        const orderedColumns = order\n          .map(field => propColumns.find(c => c.field === field))\n          .filter((c): c is GridColDef<T> => !!c);\n        setColumns(orderedColumns);\n      }\n    } catch (error) {\n      // Failed to load grid layout - using default\n    }\n  }, [propColumns, persistLayout, tableKey]);\n\n  const saveLayout = useCallback(\n    (\n      cols: GridColDef<T>[],\n      pinnedCols: string[],\n      visibility?: Record<string, boolean>,\n    ) => {\n      if (!persistLayout) return;\n\n      const layout: GridLayout = {\n        order: cols.map(c => c.field),\n        pinned: pinnedCols,\n        columnVisibility: visibility || columnVisibilityModel,\n      };\n      localStorage.setItem(\n        `apiiro-gridLayout-${tableKey}`,\n        JSON.stringify(layout),\n      );\n    },\n    [persistLayout, tableKey, columnVisibilityModel],\n  );\n\n  // Save column visibility changes to gridLayout\n  useEffect(() => {\n    if (persistLayout) {\n      saveLayout(columns, pinned, columnVisibilityModel);\n    }\n  }, [columnVisibilityModel, persistLayout, saveLayout, columns, pinned]);\n\n  const handleDragStart = (field: string) => setDragCol(field);\n\n  const handleDragOver = (\n    e: React.DragEvent<HTMLDivElement>,\n    targetField: string,\n  ) => {\n    e.preventDefault();\n    if (dragCol === targetField) return;\n    const targetRect = e.currentTarget.getBoundingClientRect();\n    const x = e.clientX - targetRect.left;\n    setDropTarget(targetField);\n    setDropSide(x < targetRect.width / 2 ? 'left' : 'right');\n  };\n\n  const handleDragLeave = () => setDropTarget(null);\n\n  const handleDrop = (targetField: string) => {\n    if (!dragCol || dragCol === targetField) return;\n\n    const dragIsPinned = pinned.includes(dragCol);\n    const targetIsPinned = pinned.includes(targetField);\n\n    if (dragIsPinned !== targetIsPinned) {\n      setDragCol(null);\n      setDropTarget(null);\n      return;\n    }\n\n    const currentList = dragIsPinned\n      ? columns.filter(c => pinned.includes(c.field))\n      : columns.filter(c => !pinned.includes(c.field));\n\n    const dragIndex = currentList.findIndex(c => c.field === dragCol);\n    const targetIndex = currentList.findIndex(c => c.field === targetField);\n\n    const newIndex = dropSide === 'left' ? targetIndex : targetIndex + 1;\n    const reordered = [...currentList];\n    const [moved] = reordered.splice(dragIndex, 1);\n    reordered.splice(newIndex, 0, moved);\n\n    const finalColumns = dragIsPinned\n      ? [...reordered, ...columns.filter(c => !pinned.includes(c.field))]\n      : [...columns.filter(c => pinned.includes(c.field)), ...reordered];\n\n    setColumns(finalColumns);\n    setDragCol(null);\n    setDropTarget(null);\n    saveLayout(finalColumns, pinned);\n  };\n\n  const togglePin = useCallback(\n    (field: string) => {\n      setPinned(prev => {\n        const next = prev.includes(field)\n          ? prev.filter(f => f !== field)\n          : [...prev, field];\n        saveLayout(columns, next);\n        return next;\n      });\n    },\n    [columns, saveLayout],\n  );\n\n  const CustomColumnMenuWithProps = useCallback(\n    (props: any) => {\n      return (\n        <CustomColumnMenu\n          {...props}\n          isPinned={pinned.includes(props.colDef.field)}\n          onTogglePin={togglePin}\n        />\n      );\n    },\n    [pinned, togglePin],\n  );\n\n  const CustomPaginationComponent = useCallback(\n    () => (\n      <CustomPagination\n        onPageSizeChange={pageSize => setPaginationModel({ page: 0, pageSize })}\n        pageSizeOptions={pageSizeOptions}\n        dataLabel={dataLabel}\n      />\n    ),\n    [dataLabel, pageSizeOptions],\n  );\n\n  const finalColumns = columnReordering\n    ? columns.map(col => ({\n        ...col,\n        renderHeader: () => (\n          <Box\n            draggable={columnReordering}\n            onDragStart={() => handleDragStart(col.field)}\n            onDragOver={e => handleDragOver(e, col.field)}\n            onDragLeave={handleDragLeave}\n            onDrop={() => handleDrop(col.field)}\n            sx={{\n              display: 'flex',\n              justifyContent: 'center',\n              alignItems: 'center',\n              cursor: columnReordering ? 'grab' : 'default',\n              userSelect: 'none',\n              position: 'relative',\n              fontWeight:\n                columnPinning && pinned.includes(col.field) ? 'bold' : 'normal',\n              px: 1,\n              '&::before': columnReordering\n                ? {\n                    content: '\"\"',\n                    position: 'absolute',\n                    top: 0,\n                    bottom: 0,\n                    left:\n                      dropTarget === col.field && dropSide === 'left'\n                        ? 0\n                        : 'auto',\n                    right:\n                      dropTarget === col.field && dropSide === 'right'\n                        ? 0\n                        : 'auto',\n                    width: '3px',\n                    backgroundColor:\n                      dropTarget === col.field\n                        ? theme.palette.primary.main\n                        : 'transparent',\n                    transition: 'background 0.1s ease',\n                  }\n                : {},\n            }}\n          >\n            {col.headerName}\n          </Box>\n        ),\n      }))\n    : columns;\n\n  const orderedColumns = columnPinning\n    ? [\n        ...finalColumns\n          .filter(c => pinned.includes(c.field))\n          .map(col => ({ ...col, resizable: false })),\n        ...finalColumns.filter(c => !pinned.includes(c.field)),\n      ]\n    : finalColumns;\n\n  // Sticky offsets\n  const pinnedOffsets: Record<string, number> = {};\n  let leftOffset = 0;\n  for (const col of orderedColumns) {\n    if (pinned.includes(col.field)) {\n      pinnedOffsets[col.field] = leftOffset;\n      leftOffset += col.minWidth || col.width || 200;\n    }\n  }\n\n  // Create pinned column styles\n  const pinnedColumnStyles: Record<string, any> = {};\n  if (columnPinning) {\n    pinned.forEach(field => {\n      pinnedColumnStyles[`& [data-field=\"${field}\"]`] = {\n        position: 'sticky',\n        left: pinnedOffsets[field],\n        zIndex: 9999,\n        backgroundColor: backgroundColor,\n        boxShadow: '2px 0 2px rgba(0,0,0,0.05)',\n      };\n    });\n  }\n\n  return (\n    <Box\n      sx={{\n        height,\n        width: '100%',\n        overflowX: 'auto',\n      }}\n    >\n      {quickSearch && (\n        <CustomSearchToolbar\n          apiRef={apiRef}\n          placeholder={searchBarPlaceHolder}\n          customFilters={customFilters}\n        />\n      )}\n      <DataGridMUI\n        key={tableKey}\n        apiRef={apiRef}\n        rows={propRows}\n        columns={orderedColumns}\n        initialState={{\n          ...initialState,\n        }}\n        columnVisibilityModel={columnVisibilityModel}\n        onColumnVisibilityModelChange={setColumnVisibilityModel}\n        disableVirtualization\n        getRowId={getRowId}\n        loading={loading}\n        paginationModel={paginationModel}\n        onPaginationModelChange={setPaginationModel}\n        pageSizeOptions={pageSizeOptions}\n        onRowClick={onRowClick ? params => onRowClick(params.row) : undefined}\n        onRowSelectionModelChange={\n          onSelectionChange\n            ? selectionModel => {\n                const selectedIds = selectionModel.ids\n                  ? Array.from(selectionModel.ids)\n                  : [];\n                const selectedRows = propRows.filter(row =>\n                  selectedIds.some(\n                    id =>\n                      String(getRowId ? getRowId(row) : row.id) === String(id),\n                  ),\n                );\n                onSelectionChange(selectedRows);\n              }\n            : undefined\n        }\n        slots={{\n          ...(columnMenu && { columnMenu: CustomColumnMenuWithProps }),\n          ...(customPagination && { pagination: CustomPaginationComponent }),\n          noResultsOverlay: () => <NotFound />,\n          loadingOverlay: () => (\n            <Box\n              display=\"flex\"\n              height=\"100%\"\n              justifyContent=\"center\"\n              alignItems=\"center\"\n            >\n              <LogoSpinner />\n            </Box>\n          ),\n        }}\n        slotProps={{\n          loadingOverlay: {\n            variant: 'linear-progress',\n            noRowsVariant: 'skeleton',\n          },\n          columnsManagement: {\n            disableResetButton: true,\n            searchInputProps: {\n              type: 'text',\n            },\n          },\n        }}\n        sx={{\n          backgroundColor,\n          '&.MuiDataGrid-root': {\n            borderRadius,\n            minWidth: 'auto',\n          },\n          '& .MuiDataGrid-columnHeader:focus, & .MuiDataGrid-columnHeader:focus-within':\n            {\n              outline: 'none',\n            },\n          '&.MuiDataGrid-root .MuiDataGrid-columnHeader, &.MuiDataGrid-root .MuiDataGrid-filler':\n            {\n              backgroundColor: headerBackgroundColor,\n            },\n          // Column resize line styling\n          '& .MuiDataGrid-columnSeparator--resizable': {\n            '&:hover': {\n              color: theme.palette.primary.main,\n            },\n          },\n          '& .MuiDataGrid-columnSeparator--resizing': {\n            color: theme.palette.primary.main,\n            opacity: 1,\n          },\n          ...pinnedColumnStyles,\n        }}\n      />\n    </Box>\n  );\n}\n"],"names":["orderedColumns","finalColumns","DataGridMUI"],"mappings":"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"}

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

@@ -0,0 +1,24 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import MenuItem from '@mui/material/MenuItem';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import { PushPin, PushPinOutlined } from '@mui/icons-material';
+
+function PinColumnMenuItem({
+  colDef,
+  onClick,
+  isPinned,
+  onTogglePin
+}) {
+  const handleClick = (event) => {
+    onTogglePin(colDef.field);
+    onClick(event);
+  };
+  return /* @__PURE__ */ jsxs(MenuItem, { onClick: handleClick, children: [
+    /* @__PURE__ */ jsx(ListItemIcon, { children: isPinned ? /* @__PURE__ */ jsx(PushPin, { fontSize: "small" }) : /* @__PURE__ */ jsx(PushPinOutlined, { fontSize: "small" }) }),
+    /* @__PURE__ */ jsx(ListItemText, { children: isPinned ? "Remove Pin" : "Pin to left" })
+  ] });
+}
+
+export { PinColumnMenuItem };
+//# sourceMappingURL=PinColumnMenuItem.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PinColumnMenuItem.esm.js","sources":["../../../src/components/DataGrid/PinColumnMenuItem.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 } from 'react';\nimport MenuItem from '@mui/material/MenuItem';\nimport ListItemIcon from '@mui/material/ListItemIcon';\nimport ListItemText from '@mui/material/ListItemText';\nimport { PushPin, PushPinOutlined } from '@mui/icons-material';\nimport { PinColumnMenuItemProps } from './types';\n\nexport function PinColumnMenuItem({\n  colDef,\n  onClick,\n  isPinned,\n  onTogglePin,\n}: PinColumnMenuItemProps) {\n  const handleClick = (event: MouseEvent<HTMLLIElement>) => {\n    onTogglePin(colDef.field);\n    onClick(event);\n  };\n\n  return (\n    <MenuItem onClick={handleClick}>\n      <ListItemIcon>\n        {isPinned ? (\n          <PushPin fontSize=\"small\" />\n        ) : (\n          <PushPinOutlined fontSize=\"small\" />\n        )}\n      </ListItemIcon>\n      <ListItemText>{isPinned ? 'Remove Pin' : 'Pin to left'}</ListItemText>\n    </MenuItem>\n  );\n}\n"],"names":[],"mappings":";;;;;;AAsBO,SAAS,iBAAA,CAAkB;AAAA,EAChC,MAAA;AAAA,EACA,OAAA;AAAA,EACA,QAAA;AAAA,EACA;AACF,CAAA,EAA2B;AACzB,EAAA,MAAM,WAAA,GAAc,CAAC,KAAA,KAAqC;AACxD,IAAA,WAAA,CAAY,OAAO,KAAK,CAAA;AACxB,IAAA,OAAA,CAAQ,KAAK,CAAA;AAAA,EACf,CAAA;AAEA,EAAA,uBACE,IAAA,CAAC,QAAA,EAAA,EAAS,OAAA,EAAS,WAAA,EACjB,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,YAAA,EAAA,EACE,QAAA,EAAA,QAAA,mBACC,GAAA,CAAC,OAAA,EAAA,EAAQ,QAAA,EAAS,OAAA,EAAQ,CAAA,mBAE1B,GAAA,CAAC,eAAA,EAAA,EAAgB,QAAA,EAAS,OAAA,EAAQ,CAAA,EAEtC,CAAA;AAAA,oBACA,GAAA,CAAC,YAAA,EAAA,EAAc,QAAA,EAAA,QAAA,GAAW,YAAA,GAAe,aAAA,EAAc;AAAA,GAAA,EACzD,CAAA;AAEJ;;;;"}

package/dist/components/DueDate.esm.js

@@ -0,0 +1,34 @@
+import { jsx, Fragment } from 'react/jsx-runtime';
+import Box from '@mui/material/Box';
+import { useTheme } from '@mui/material/styles';
+import { formatDate } from '../utils/dateFormatter.esm.js';
+import { SimpleTooltip } from './SimpleTooltip.esm.js';
+
+const DueDateDisplay = ({ dateString }) => {
+  const theme = useTheme();
+  const rawDate = dateString;
+  if (!rawDate) {
+    return /* @__PURE__ */ jsx(SimpleTooltip, { title: "Not Set", centered: true, children: "Not Set" });
+  }
+  const dueDate = new Date(rawDate);
+  const isValidDate = !Number.isNaN(dueDate.getTime());
+  if (!isValidDate) {
+    return /* @__PURE__ */ jsx(SimpleTooltip, { title: "Not Set", centered: true, children: "Not Set" });
+  }
+  const formattedDate = formatDate(rawDate);
+  const isOverdue = dueDate < /* @__PURE__ */ new Date();
+  const tooltip = isOverdue ? "SLA due date exceeded" : "SLA due date";
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(SimpleTooltip, { title: tooltip, centered: true, children: /* @__PURE__ */ jsx(
+    Box,
+    {
+      component: "span",
+      sx: {
+        color: isOverdue ? theme.palette.error.main : "inherit"
+      },
+      children: formattedDate
+    }
+  ) }) });
+};
+
+export { DueDateDisplay };
+//# sourceMappingURL=DueDate.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DueDate.esm.js","sources":["../../src/components/DueDate.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 { formatDate } from '../utils/dateFormatter';\nimport SimpleTooltip from './SimpleTooltip';\n\nexport const DueDateDisplay = ({ dateString }: { dateString: string }) => {\n  const theme = useTheme();\n  const rawDate = dateString;\n\n  if (!rawDate) {\n    return (\n      <SimpleTooltip title=\"Not Set\" centered>\n        Not Set\n      </SimpleTooltip>\n    );\n  }\n\n  const dueDate = new Date(rawDate);\n  const isValidDate = !Number.isNaN(dueDate.getTime());\n\n  if (!isValidDate) {\n    return (\n      <SimpleTooltip title=\"Not Set\" centered>\n        Not Set\n      </SimpleTooltip>\n    );\n  }\n\n  const formattedDate = formatDate(rawDate);\n  const isOverdue = dueDate < new Date();\n  const tooltip = isOverdue ? 'SLA due date exceeded' : 'SLA due date';\n\n  return (\n    <>\n      <SimpleTooltip title={tooltip} centered>\n        <Box\n          component=\"span\"\n          sx={{\n            color: isOverdue ? theme.palette.error.main : 'inherit',\n          }}\n        >\n          {formattedDate}\n        </Box>\n      </SimpleTooltip>\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAoBO,MAAM,cAAA,GAAiB,CAAC,EAAE,UAAA,EAAW,KAA8B;AACxE,EAAA,MAAM,QAAQ,QAAA,EAAS;AACvB,EAAA,MAAM,OAAA,GAAU,UAAA;AAEhB,EAAA,IAAI,CAAC,OAAA,EAAS;AACZ,IAAA,2BACG,aAAA,EAAA,EAAc,KAAA,EAAM,SAAA,EAAU,QAAA,EAAQ,MAAC,QAAA,EAAA,SAAA,EAExC,CAAA;AAAA,EAEJ;AAEA,EAAA,MAAM,OAAA,GAAU,IAAI,IAAA,CAAK,OAAO,CAAA;AAChC,EAAA,MAAM,cAAc,CAAC,MAAA,CAAO,KAAA,CAAM,OAAA,CAAQ,SAAS,CAAA;AAEnD,EAAA,IAAI,CAAC,WAAA,EAAa;AAChB,IAAA,2BACG,aAAA,EAAA,EAAc,KAAA,EAAM,SAAA,EAAU,QAAA,EAAQ,MAAC,QAAA,EAAA,SAAA,EAExC,CAAA;AAAA,EAEJ;AAEA,EAAA,MAAM,aAAA,GAAgB,WAAW,OAAO,CAAA;AACxC,EAAA,MAAM,SAAA,GAAY,OAAA,mBAAU,IAAI,IAAA,EAAK;AACrC,EAAA,MAAM,OAAA,GAAU,YAAY,uBAAA,GAA0B,cAAA;AAEtD,EAAA,uCAEI,QAAA,kBAAA,GAAA,CAAC,aAAA,EAAA,EAAc,KAAA,EAAO,OAAA,EAAS,UAAQ,IAAA,EACrC,QAAA,kBAAA,GAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAU,MAAA;AAAA,MACV,EAAA,EAAI;AAAA,QACF,KAAA,EAAO,SAAA,GAAY,KAAA,CAAM,OAAA,CAAQ,MAAM,IAAA,GAAO;AAAA,OAChD;AAAA,MAEC,QAAA,EAAA;AAAA;AAAA,KAEL,CAAA,EACF,CAAA;AAEJ;;;;"}

package/dist/components/Header.esm.js

@@ -0,0 +1,27 @@
+import { jsx } from 'react/jsx-runtime';
+import { Header as Header$1 } from '@backstage/core-components';
+import { useTheme } from '@mui/material/styles';
+import { ApiiroLogo } from '../assets/apiiroLogo/apiiroLogo.esm.js';
+import '@mui/material/SvgIcon';
+import { getHeaderBackground } from '../theme/themeUtils.esm.js';
+
+const Header = () => {
+  const theme = useTheme();
+  const headerBackground = getHeaderBackground(theme);
+  return /* @__PURE__ */ jsx(
+    Header$1,
+    {
+      title: /* @__PURE__ */ jsx("div", { style: { justifyContent: "center", alignItems: "center" }, children: /* @__PURE__ */ jsx(ApiiroLogo, {}) }),
+      pageTitleOverride: "Apiiro",
+      style: {
+        backgroundImage: "none",
+        backgroundColor: headerBackground,
+        justifyContent: "center",
+        alignItems: "center"
+      }
+    }
+  );
+};
+
+export { Header };
+//# sourceMappingURL=Header.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Header.esm.js","sources":["../../src/components/Header.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 { Header as CoreHeader } from '@backstage/core-components';\nimport { useTheme } from '@mui/material/styles';\nimport { ApiiroLogo } from '../assets/apiiroLogo';\nimport { getHeaderBackground } from '../theme/themeUtils';\n\nexport const Header = () => {\n  const theme = useTheme();\n  const headerBackground = getHeaderBackground(theme);\n\n  return (\n    <CoreHeader\n      title={\n        <div style={{ justifyContent: 'center', alignItems: 'center' }}>\n          <ApiiroLogo />\n        </div>\n      }\n      pageTitleOverride=\"Apiiro\"\n      style={{\n        backgroundImage: 'none',\n        backgroundColor: headerBackground,\n        justifyContent: 'center',\n        alignItems: 'center',\n      }}\n    />\n  );\n};\n"],"names":["CoreHeader"],"mappings":";;;;;;;AAoBO,MAAM,SAAS,MAAM;AAC1B,EAAA,MAAM,QAAQ,QAAA,EAAS;AACvB,EAAA,MAAM,gBAAA,GAAmB,oBAAoB,KAAK,CAAA;AAElD,EAAA,uBACE,GAAA;AAAA,IAACA,QAAA;AAAA,IAAA;AAAA,MACC,KAAA,kBACE,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAO,EAAE,cAAA,EAAgB,QAAA,EAAU,UAAA,EAAY,QAAA,EAAS,EAC3D,QAAA,kBAAA,GAAA,CAAC,UAAA,EAAA,EAAW,CAAA,EACd,CAAA;AAAA,MAEF,iBAAA,EAAkB,QAAA;AAAA,MAClB,KAAA,EAAO;AAAA,QACL,eAAA,EAAiB,MAAA;AAAA,QACjB,eAAA,EAAiB,gBAAA;AAAA,QACjB,cAAA,EAAgB,QAAA;AAAA,QAChB,UAAA,EAAY;AAAA;AACd;AAAA,GACF;AAEJ;;;;"}