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

package/dist/components/index.d.cts

@@ -571,7 +571,7 @@ declare const FilterSimpleSelector: ({ name, options, selectedOptions, setSelect
 type FilterOptionsCheckboxesProps = {
     columnId: string;
     labelFieldName: string;
-    maxWidth?: number | string;
+    maxWidth?: number;
     filterOptions: HeaderFilterOptions;
     selectedFilterOptions: HeaderFilterOptions;
     onFilterOptionChange: (option: string | HeaderFilterObject) => void;

package/dist/components/index.d.ts

@@ -571,7 +571,7 @@ declare const FilterSimpleSelector: ({ name, options, selectedOptions, setSelect
 type FilterOptionsCheckboxesProps = {
     columnId: string;
     labelFieldName: string;
-    maxWidth?: number | string;
+    maxWidth?: number;
     filterOptions: HeaderFilterOptions;
     selectedFilterOptions: HeaderFilterOptions;
     onFilterOptionChange: (option: string | HeaderFilterObject) => void;

package/dist/components/index.js

@@ -458,7 +458,17 @@ var AppLabel = ({ appName }) => {
 var AppLabel_default = AppLabel;
 
 // src/components/AutocompleteFilterMenuContent/AutocompleteFilterMenuContent.tsx
-import { Box as Box7, Button as Button4, Divider, Tooltip as Tooltip4, Typography as Typography4 } from "@mui/material";
+import CheckIcon2 from "@mui/icons-material/Check";
+import { Box as Box7, Button as Button4, Chip as Chip2, Divider, Tooltip as Tooltip4, Typography as Typography4 } from "@mui/material";
+
+// src/utils/resolveObjectType.ts
+var resolveObjectType = (object, fieldName) => {
+  if (!object || typeof object !== "object") {
+    return object;
+  }
+  ;
+  return object[fieldName] ?? "";
+};
 
 // src/components/Buttons/ExtendedButton/ExtendedButton.tsx
 import { memo as memo2 } from "react";
@@ -642,15 +652,6 @@ var ExtendedButton_default = memo2(ExtendedButton);
 import CheckIcon from "@mui/icons-material/Check";
 import { Box as Box5, Checkbox, Tooltip as Tooltip3 } from "@mui/material";
 
-// src/utils/resolveObjectType.ts
-var resolveObjectType = (object, fieldName) => {
-  if (!object || typeof object !== "object") {
-    return object;
-  }
-  ;
-  return object[fieldName] ?? "";
-};
-
 // src/components/DynamicOverflowTooltip/DynamicOverflowTooltip.tsx
 import { useRef } from "react";
 import { Box as Box4, Tooltip as Tooltip2 } from "@mui/material";
@@ -739,11 +740,12 @@ var FilterOptionsCheckboxes = ({
             Box5,
             {
               sx: {
+                maxWidth,
+                gap: 2,
+                flexGrow: 1,
                 display: "flex",
                 alignItems: "center",
-                justifyContent: "space-between",
-                maxWidth,
-                flexGrow: 1
+                justifyContent: "space-between"
               },
               children: [
                 /* @__PURE__ */ jsx8(DynamicOverflowTooltip, { tooltipDescription: String(filterLabel), arrow: true, children: filterLabel }),
@@ -784,10 +786,11 @@ var SearchFieldDebounced = ({
     }
     ;
     debounceRef.current = window.setTimeout(() => {
-      if (input.length < minCharacters) {
+      const trimmedInput = input.trim();
+      if (trimmedInput.length < minCharacters) {
         return;
       }
-      onSearch(input);
+      onSearch(trimmedInput);
     }, debounceDelay);
   };
   useEffect2(() => {
@@ -825,6 +828,7 @@ var SearchFieldDebounced = ({
 // src/components/AutocompleteFilterMenuContent/AutocompleteFilterMenuContent.tsx
 import { Fragment, jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
 var MAX_HEIGHT = 500;
+var MAX_WIDTH = 208;
 var AutocompleteFilterMenuContent = ({
   selectedFilterOptions,
   onFilterOptionChange,
@@ -875,17 +879,47 @@ var AutocompleteFilterMenuContent = ({
         },
         children: [
           selectedFilterOptions.length ? /* @__PURE__ */ jsxs6(Fragment, { children: [
-            /* @__PURE__ */ jsx10(Box7, { sx: { px: 1, pt: 1 }, children: /* @__PURE__ */ jsx10(
-              FilterOptionsCheckboxes,
+            /* @__PURE__ */ jsx10(
+              Box7,
               {
-                columnId,
-                labelFieldName,
-                filterOptions: selectedFilterOptions,
-                selectedFilterOptions,
-                onFilterOptionChange,
-                shouldShowCheckOnFilter
+                sx: {
+                  px: 1,
+                  pt: 1,
+                  pb: 0.5,
+                  gap: 1,
+                  display: "flex",
+                  flexDirection: "column"
+                },
+                children: selectedFilterOptions?.map((option) => {
+                  const filterId = resolveObjectType(option, "id");
+                  const filterLabel = resolveObjectType(option, labelFieldName);
+                  return /* @__PURE__ */ jsxs6(
+                    Box7,
+                    {
+                      sx: {
+                        pl: 1,
+                        pr: 1.25,
+                        flexGrow: 1,
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "space-between"
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx10(Box7, { sx: { maxWidth: MAX_WIDTH }, children: /* @__PURE__ */ jsx10(
+                          Chip2,
+                          {
+                            label: filterLabel,
+                            onDelete: () => onFilterOptionChange(option)
+                          }
+                        ) }),
+                        shouldShowCheckOnFilter?.(columnId, option) ? /* @__PURE__ */ jsx10(Tooltip4, { title: "This filter is saved as default", children: /* @__PURE__ */ jsx10(CheckIcon2, { fontSize: "small", color: "action" }) }) : null
+                      ]
+                    },
+                    filterId
+                  );
+                })
               }
-            ) }),
+            ),
             /* @__PURE__ */ jsx10(Divider, { sx: { my: 0.5 } })
           ] }) : null,
           /* @__PURE__ */ jsx10(Box7, { sx: { p: 1 }, children: !filterOptions?.length ? /* @__PURE__ */ jsx10(
@@ -900,6 +934,7 @@ var AutocompleteFilterMenuContent = ({
             FilterOptionsCheckboxes,
             {
               columnId,
+              maxWidth: MAX_WIDTH,
               labelFieldName,
               filterOptions,
               selectedFilterOptions,
@@ -4737,7 +4772,7 @@ function VirtualizedList(props) {
 
 // src/components/LocationsSectionInfo/LocationsSectionInfo.tsx
 import { Fragment as Fragment8 } from "react";
-import { Box as Box22, Chip as Chip2, Typography as Typography16 } from "@mui/material";
+import { Box as Box22, Chip as Chip3, Typography as Typography16 } from "@mui/material";
 import { purple } from "@mui/material/colors";
 import classNames2 from "classnames";
 import { makeStyles as makeStyles29 } from "tss-react/mui";
@@ -4789,7 +4824,7 @@ var LocationsSectionInfo = ({
   };
   return /* @__PURE__ */ jsxs55(Box22, { className: classes.container, children: [
     /* @__PURE__ */ jsx91(
-      Chip2,
+      Chip3,
       {
         className: classNames2(classes.defaultChip, {
           [classes.stockChip]: isStock,
@@ -6998,7 +7033,7 @@ import {
 } from "@mui/material";
 import classNames3 from "classnames";
 import { Fragment as Fragment12, jsx as jsx113, jsxs as jsxs76 } from "react/jsx-runtime";
-var MAX_WIDTH = 272;
+var MAX_WIDTH2 = 276;
 var findFilterIndex = (filters, filterOption) => filters.findIndex((item) => {
   if (typeof item === "string" && typeof filterOption === "string") {
     return item === filterOption;
@@ -7070,7 +7105,7 @@ var SmartTableHeaderFilterMenu = memo20(({
   useEffect11(() => {
     setSelectedFilterOptions(headerFilters[headCell.id] ?? []);
   }, [headerFilters, headCell.id]);
-  const renderLoadingSkeletons = /* @__PURE__ */ jsxs76(Box32, { "data-testid": "loading-skeletons", sx: { width: MAX_WIDTH }, children: [
+  const renderLoadingSkeletons = /* @__PURE__ */ jsxs76(Box32, { "data-testid": "loading-skeletons", sx: { width: MAX_WIDTH2 }, children: [
     /* @__PURE__ */ jsx113(Skeleton2, { variant: "rounded", height: 24, sx: { m: 1 } }),
     /* @__PURE__ */ jsx113(Divider11, {}),
     /* @__PURE__ */ jsx113(Skeleton2, { variant: "rounded", height: 24, sx: { m: 1 } }),
@@ -7134,7 +7169,7 @@ var SmartTableHeaderFilterMenu = memo20(({
         "data-testid": "filter-menu",
         slotProps: {
           list: {
-            sx: { p: 0, maxWidth: MAX_WIDTH }
+            sx: { p: 0, maxWidth: MAX_WIDTH2 }
           }
         },
         anchorOrigin: { vertical: "bottom", horizontal: "right" },
@@ -8371,14 +8406,14 @@ var TableDesktopEditableField = memo23(TableDesktopEditableFieldComponent);
 
 // src/components/TableDesktopCell/TableDesktopCell.tsx
 import { useEffect as useEffect14, useState as useState22 } from "react";
-import CheckIcon2 from "@mui/icons-material/Check";
+import CheckIcon3 from "@mui/icons-material/Check";
 import CloseIcon from "@mui/icons-material/Close";
 import EditIcon from "@mui/icons-material/Edit";
 import { IconButton as IconButton4, TableCell as TableCell6, Tooltip as Tooltip11 } from "@mui/material";
 import { Fragment as Fragment14, jsx as jsx128, jsxs as jsxs85 } from "react/jsx-runtime";
 var getReadOnlyBooleanIcon = (value) => {
   if (value) {
-    return /* @__PURE__ */ jsx128(CheckIcon2, { sx: { fontSize: 16 } });
+    return /* @__PURE__ */ jsx128(CheckIcon3, { sx: { fontSize: 16 } });
   }
   return "-";
 };