@natoora-libs/core 0.1.18-dev-doug-2 → 0.1.18-dev-doug-3

package/dist/components/index.cjs

@@ -945,6 +945,7 @@ var useCheckOverflow = ({
 var import_jsx_runtime7 = require("react/jsx-runtime");
 var DynamicOverflowTooltip = ({
   arrow = false,
+  maxWidth = "auto",
   children,
   tooltipDescription
 }) => {
@@ -960,6 +961,7 @@ var DynamicOverflowTooltip = ({
         {
           ref,
           sx: {
+            maxWidth,
             overflowX: "hidden",
             whiteSpace: "nowrap",
             textOverflow: "ellipsis"
@@ -1096,20 +1098,40 @@ var SearchFieldDebounced = ({
 
 // src/components/AutocompleteFilterMenuContent/AutocompleteFilterMenuContent.tsx
 var import_jsx_runtime10 = require("react/jsx-runtime");
-var MAX_HEIGHT = 500;
-var MAX_WIDTH = 208;
 var AutocompleteFilterMenuContent = ({
+  columnId,
+  labelFieldName,
   selectedFilterOptions,
+  isLoading = false,
+  maxWidth = 208,
+  maxHeight = 500,
   onFilterOptionChange,
   onApplyFiltersClick,
   shouldShowCheckOnFilter,
-  headCell: {
-    onAutocompleteFilterChange,
-    filterOptions,
-    fieldName: labelFieldName = "",
-    id: columnId
-  }
+  onAutocompleteFilterChange,
+  filterOptions
 }) => {
+  const renderLoading = () => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_material9.Skeleton, { variant: "rounded", height: 26, sx: { m: 1 } });
+  const renderOptions = () => filterOptions?.length ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    FilterOptionsCheckboxes,
+    {
+      columnId,
+      maxWidth,
+      labelFieldName,
+      filterOptions,
+      selectedFilterOptions,
+      onFilterOptionChange,
+      shouldShowCheckOnFilter
+    }
+  ) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    import_material9.Typography,
+    {
+      variant: "body2",
+      color: "textSecondary",
+      sx: { p: 1, maxWidth: 260 },
+      children: "Start searching (minimum 3 characters) to view the results."
+    }
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_material9.Box, { sx: { display: "flex", flexDirection: "column" }, children: [
     /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       SearchFieldDebounced,
@@ -1127,9 +1149,9 @@ var AutocompleteFilterMenuContent = ({
       import_material9.Box,
       {
         sx: {
+          maxHeight,
           display: "flex",
           flexDirection: "column",
-          maxHeight: MAX_HEIGHT,
           overflowX: "hidden",
           "&::-webkit-scrollbar": {
             width: "8px",
@@ -1174,9 +1196,10 @@ var AutocompleteFilterMenuContent = ({
                         justifyContent: "space-between"
                       },
                       children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_material9.Box, { sx: { maxWidth: MAX_WIDTH }, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_material9.Box, { sx: { maxWidth }, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                           import_material9.Chip,
                           {
+                            size: "small",
                             label: filterLabel,
                             onDelete: () => onFilterOptionChange(option)
                           }
@@ -1191,26 +1214,7 @@ var AutocompleteFilterMenuContent = ({
             ),
             /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_material9.Divider, { sx: { my: 0.5 } })
           ] }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_material9.Box, { sx: { p: 1 }, children: !filterOptions?.length ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-            import_material9.Typography,
-            {
-              variant: "body2",
-              color: "textSecondary",
-              sx: { p: 1, maxWidth: 260 },
-              children: "Start searching (minimum 3 characters) to view the results."
-            }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-            FilterOptionsCheckboxes,
-            {
-              columnId,
-              maxWidth: MAX_WIDTH,
-              labelFieldName,
-              filterOptions,
-              selectedFilterOptions,
-              onFilterOptionChange,
-              shouldShowCheckOnFilter
-            }
-          ) })
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_material9.Box, { sx: { p: 1 }, children: isLoading ? renderLoading() : renderOptions() })
         ]
       }
     ),
@@ -3451,20 +3455,30 @@ function ActionButton(props) {
 // src/components/CheckboxFilterMenuContent/CheckboxFilterMenuContent.tsx
 var import_material22 = require("@mui/material");
 var import_jsx_runtime71 = require("react/jsx-runtime");
-var MAX_HEIGHT2 = 500;
 var CheckboxFilterMenuContent = ({
+  columnId,
+  labelFieldName,
+  isLoading = false,
   selectedFilterOptions,
   filterOptions,
+  maxHeight = 500,
+  width = 276,
   shouldShowCheckOnFilter,
   onSelectAllChange,
   onFilterOptionChange,
-  onApplyFiltersClick,
-  headCell: {
-    id: columnId,
-    fieldName: labelFieldName = ""
-  }
+  onApplyFiltersClick
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(import_material22.Box, { sx: { display: "flex", flexDirection: "column" }, children: [
+  const renderLoading = () => /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(import_material22.Box, { "data-testid": "loading-skeletons", sx: { width }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_material22.Skeleton, { variant: "rounded", height: 24, sx: { m: 1 } }),
+    /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_material22.Divider, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_material22.Skeleton, { variant: "rounded", height: 24, sx: { m: 1 } }),
+    /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_material22.Skeleton, { variant: "rounded", height: 24, sx: { m: 1 } }),
+    /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_material22.Skeleton, { variant: "rounded", height: 24, sx: { m: 1 } }),
+    /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_material22.Skeleton, { variant: "rounded", height: 24, sx: { m: 1 } }),
+    /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_material22.Divider, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_material22.Skeleton, { variant: "rounded", height: 24, sx: { m: 1 } })
+  ] });
+  const renderContent = () => /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(import_material22.Box, { sx: { display: "flex", flexDirection: "column" }, children: [
     /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_material22.Box, { sx: { px: 2, pt: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
       import_material22.FormControlLabel,
       {
@@ -3509,17 +3523,9 @@ var CheckboxFilterMenuContent = ({
             sx: {
               pl: 0.5,
               pr: 2,
-              maxHeight: MAX_HEIGHT2
+              maxHeight
             },
-            children: !filterOptions?.length ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
-              import_material22.Typography,
-              {
-                variant: "body2",
-                color: "textSecondary",
-                sx: { py: 1, px: 2 },
-                children: "No options available."
-              }
-            ) : /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+            children: filterOptions?.length ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
               FilterOptionsCheckboxes,
               {
                 columnId,
@@ -3529,6 +3535,14 @@ var CheckboxFilterMenuContent = ({
                 onFilterOptionChange,
                 shouldShowCheckOnFilter
               }
+            ) : /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+              import_material22.Typography,
+              {
+                variant: "body2",
+                color: "textSecondary",
+                sx: { py: 1, px: 2 },
+                children: "No options available."
+              }
             )
           }
         )
@@ -3569,6 +3583,10 @@ var CheckboxFilterMenuContent = ({
       }
     )
   ] });
+  if (isLoading) {
+    return renderLoading();
+  }
+  return renderContent();
 };
 
 // src/components/CompanyLogo/CompanyLogo.tsx
@@ -7242,7 +7260,7 @@ var import_react34 = require("react");
 var import_material62 = require("@mui/material");
 var import_classnames3 = __toESM(require("classnames"), 1);
 var import_jsx_runtime114 = require("react/jsx-runtime");
-var MAX_WIDTH2 = 276;
+var MAX_WIDTH = 276;
 var findFilterIndex = (filters, filterOption) => filters.findIndex((item) => {
   if (typeof item === "string" && typeof filterOption === "string") {
     return item === filterOption;
@@ -7314,50 +7332,6 @@ var SmartTableHeaderFilterMenu = (0, import_react34.memo)(({
   (0, import_react34.useEffect)(() => {
     setSelectedFilterOptions(headerFilters[headCell.id] ?? []);
   }, [headerFilters, headCell.id]);
-  const renderLoadingSkeletons = /* @__PURE__ */ (0, import_jsx_runtime114.jsxs)(import_material62.Box, { "data-testid": "loading-skeletons", sx: { width: MAX_WIDTH2 }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(import_material62.Skeleton, { variant: "rounded", height: 24, sx: { m: 1 } }),
-    /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(import_material62.Divider, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(import_material62.Skeleton, { variant: "rounded", height: 24, sx: { m: 1 } }),
-    /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(import_material62.Skeleton, { variant: "rounded", height: 24, sx: { m: 1 } }),
-    /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(import_material62.Skeleton, { variant: "rounded", height: 24, sx: { m: 1 } }),
-    /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(import_material62.Skeleton, { variant: "rounded", height: 24, sx: { m: 1 } }),
-    /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(import_material62.Divider, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(import_material62.Skeleton, { variant: "rounded", height: 24, sx: { m: 1 } })
-  ] });
-  const renderMenuContent = (0, import_react34.useMemo)(() => {
-    if (headCell.isAutocompleteFilterMenu) {
-      return /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
-        AutocompleteFilterMenuContent,
-        {
-          headCell,
-          selectedFilterOptions,
-          onFilterOptionChange: handleFilterOptionChange,
-          onApplyFiltersClick: handleApplyFiltersClick,
-          shouldShowCheckOnFilter
-        }
-      );
-    }
-    return /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
-      CheckboxFilterMenuContent,
-      {
-        headCell,
-        selectedFilterOptions,
-        filterOptions: filterOptionsData ?? [],
-        onSelectAllChange: handleSelectAllChange,
-        onFilterOptionChange: handleFilterOptionChange,
-        onApplyFiltersClick: handleApplyFiltersClick,
-        shouldShowCheckOnFilter
-      }
-    );
-  }, [
-    headCell,
-    selectedFilterOptions,
-    handleFilterOptionChange,
-    handleApplyFiltersClick,
-    shouldShowCheckOnFilter,
-    filterOptionsData,
-    handleSelectAllChange
-  ]);
   return /* @__PURE__ */ (0, import_jsx_runtime114.jsxs)(import_jsx_runtime114.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
       ActiveFiltersIconButton,
@@ -7378,12 +7352,38 @@ var SmartTableHeaderFilterMenu = (0, import_react34.memo)(({
         "data-testid": "filter-menu",
         slotProps: {
           list: {
-            sx: { p: 0, maxWidth: MAX_WIDTH2 }
+            sx: { p: 0, maxWidth: MAX_WIDTH }
           }
         },
         anchorOrigin: { vertical: "bottom", horizontal: "right" },
         transformOrigin: { vertical: "top", horizontal: "right" },
-        children: headCell.isFetchingFilterOptions ? renderLoadingSkeletons : renderMenuContent
+        children: headCell.isAutocompleteFilterMenu ? /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
+          AutocompleteFilterMenuContent,
+          {
+            columnId: headCell.id,
+            labelFieldName: headCell.fieldName ?? "",
+            isLoading: headCell.isFetchingFilterOptions,
+            filterOptions: headCell.filterOptions,
+            onAutocompleteFilterChange: headCell.onAutocompleteFilterChange,
+            selectedFilterOptions,
+            onFilterOptionChange: handleFilterOptionChange,
+            onApplyFiltersClick: handleApplyFiltersClick,
+            shouldShowCheckOnFilter
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
+          CheckboxFilterMenuContent,
+          {
+            columnId: headCell.id,
+            labelFieldName: headCell.fieldName ?? "",
+            isLoading: headCell.isFetchingFilterOptions,
+            selectedFilterOptions,
+            filterOptions: filterOptionsData ?? [],
+            onSelectAllChange: handleSelectAllChange,
+            onFilterOptionChange: handleFilterOptionChange,
+            onApplyFiltersClick: handleApplyFiltersClick,
+            shouldShowCheckOnFilter
+          }
+        )
       }
     )
   ] });