rez-table-listing-mui 1.2.6 → 1.2.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rez-table-listing-mui",
-  "version": "1.2.6",
+  "version": "1.2.8",
   "type": "module",
   "description": "A rez table listing component built on TanStack Table",
   "main": "dist/index.js",

package/rollup.config.js

@@ -15,12 +15,12 @@ export default [
       {
         file: packageJson.main,
         format: "cjs",
-        sourmap: true,
+        sourcemap: true,
       },
       {
         file: packageJson.module,
         format: "esm",
-        sourmap: true,
+        sourcemap: true,
       },
     ],
     plugins: [

package/src/components/filter/components/attributes-filter.tsx

@@ -191,7 +191,10 @@ const AttributesFilter = ({
         )}
 
         {dropdownData && (
-          <Box sx={{ mt: 2 }}>
+          <Box
+            className="attributes-filter-list"
+            sx={{ mt: 2, overflow: "auto", maxHeight: "calc(100dvh - 300px)" }}
+          >
             <FormControl>
               {selectedAttributeOptions
                 ?.filter((option) => {

package/src/components/search/index.tsx

@@ -11,7 +11,10 @@ interface TableSearchProps {
   onChange: (value: string) => void;
 }
 
-const TableSearch = ({ value, onChange }: TableSearchProps): JSX.Element => {
+export const TableSearch = ({
+  value,
+  onChange,
+}: TableSearchProps): JSX.Element => {
   const [showSearchInput, setShowSearchInput] = useState(false);
   const [localValue, setLocalValue] = useState(value);
   const searchContainerRef = useRef<HTMLDivElement>(null);
@@ -115,5 +118,3 @@ const TableSearch = ({ value, onChange }: TableSearchProps): JSX.Element => {
     </Box>
   );
 };
-
-export default TableSearch;

package/src/components/tabs/index.tsx

@@ -4,6 +4,7 @@ import { CraftTableOptionsProps } from "../../types/table-options";
 import SettingsOutlinedIcon from "@mui/icons-material/SettingsOutlined";
 import { settingsOptionsProps } from "../../types/table";
 import { tableTabsStyles } from "./styles";
+import { useMemo } from "react";
 
 interface TabDataProps {
   tab_value: string | null;
@@ -36,12 +37,24 @@ export function TableTabs({
   };
 
   // Normalize tab_value to uppercase for display + logic
-  const normalizedTabs = tabsData
-    ?.filter((tab) => tab.tab_value)
-    ?.map((tab) => ({
-      ...tab,
-      tab_value: tab.tab_value,
-    }));
+  const normalizedTabs = useMemo(() => {
+    return tabsData
+      ?.filter((tab) => tab.tab_value !== null)
+      ?.map((tab) => ({
+        ...tab,
+        tab_value: tab.tab_value?.toUpperCase(),
+      }));
+  }, [tabsData]);
+
+  const defaultTab = useMemo(() => {
+    return (
+      normalizedTabs.find((t) => t.tab_value === "ALL")?.tab_value ||
+      normalizedTabs[0]?.tab_value ||
+      ""
+    );
+  }, [normalizedTabs]);
+
+  const selectedTab = activeTab || defaultTab;
 
   return (
     <Box display="flex" alignItems="center" justifyContent="flex-start">
@@ -57,10 +70,10 @@ export function TableTabs({
 
       {/* Tabs */}
       <Tabs
-        value={activeTab}
+        value={selectedTab}
         onChange={(_, newValue) => handleTabClick(newValue)}
         variant="scrollable"
-        scrollButtons={false}
+        scrollButtons="auto"
         slotProps={{ indicator: { sx: { display: "none" } } }}
         sx={tableTabsStyles.tabs}
       >

package/src/components/topbar/index.tsx

@@ -16,7 +16,7 @@ import { useFullscreenPopoverContainer } from "../../libs/hooks/useFullScreen";
 import SortPopover from "../sorting-modal.tsx";
 import ColumnToggle from "../column-visibility-modal/index.tsx";
 import { CraftTableOptionsProps } from "../../types/table-options.ts";
-import TableSearch from "../search/index.tsx";
+import { TableSearch } from "../search/index.tsx";
 
 interface TopbarProps<T> {
   table: Table<T>;

package/src/index.ts

@@ -4,6 +4,7 @@ export { useCraftTableFilterSettings } from "./libs/hooks/useCraftTableFilterSet
 export { TableTabs as CraftTableTabs } from "./components/tabs";
 export { TableFilter as CraftTableFilter } from "./components/filter";
 export { QuickFilterSettings as CraftTableSettings } from "./components/table-settings";
+export { TableSearch as CraftTableSearch } from "./components/search";
 
 export * from "./types/table";
 export * from "./types/table-options";