@natoora-libs/core 0.2.8 → 0.2.9-dev-doug-1

package/dist/components/index.cjs

@@ -384,7 +384,7 @@ __export(components_exports, {
   SearchWithFiltersForTable: () => SearchWithFiltersForTable_default,
   SectionName: () => SectionName_default,
   SmartMultipleSelect: () => SmartMultipleSelect,
-  SmartSelect: () => SmartSelect_default,
+  SmartSelect: () => SmartSelect,
   SmartTableHeader: () => SmartTableHeader,
   SmartTableHeaderFilterMenu: () => SmartTableHeaderFilterMenu,
   SquareButton: () => SquareButton_default,
@@ -7320,7 +7320,8 @@ var SmartMultipleSelect = ({
   isLoading,
   disabled,
   emptyMessage = "No options.",
-  helperText
+  helperText,
+  menuProps
 }) => {
   const [localValues, setLocalValues] = (0, import_react34.useState)(defaultValues ?? []);
   const handleChangeOption = (option) => {
@@ -7365,7 +7366,7 @@ var SmartMultipleSelect = ({
       option.value ?? index
     );
   }) });
-  return /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)(import_material62.FormControl, { fullWidth: true, variant, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)(import_material62.FormControl, { fullWidth: true, size, variant, disabled, children: [
     /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_material62.InputLabel, { children: inputLabel }),
     /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
       import_material62.Select,
@@ -7375,6 +7376,7 @@ var SmartMultipleSelect = ({
         disabled,
         value: values ?? localValues,
         defaultValue: defaultValues,
+        MenuProps: menuProps,
         onOpen,
         onClose: () => onClose?.(localValues),
         renderValue: (selectedValues) => {
@@ -7401,19 +7403,12 @@ var SmartMultipleSelect = ({
 // src/components/SmartSelect/SmartSelect.tsx
 var import_react35 = require("react");
 var import_material63 = require("@mui/material");
-var import_mui49 = require("tss-react/mui");
 var import_jsx_runtime116 = require("react/jsx-runtime");
-var useStyles44 = (0, import_mui49.makeStyles)()(() => ({
-  container: {
-    display: "flex",
-    flexDirection: "column"
-  }
-}));
 var SmartSelect = (0, import_react35.forwardRef)(
   ({
     value,
     defaultOption,
-    options,
+    options = [],
     refetch,
     isFetching = false,
     onChange,
@@ -7428,54 +7423,80 @@ var SmartSelect = (0, import_react35.forwardRef)(
     emptyMessage = "No options",
     menuProps
   }, ref) => {
-    const { classes } = useStyles44();
-    const [open, setOpen] = (0, import_react35.useState)(false);
-    const [localOptions, setLocalOptions] = (0, import_react35.useState)(options || []);
-    (0, import_react35.useEffect)(() => {
-      if (options) {
-        setLocalOptions(options);
+    const visibleOptions = (0, import_react35.useMemo)(() => {
+      const baseOptions = [
+        ...allowBlankOption ? [{ value: "", label: "None" }] : [],
+        ...options ?? []
+      ];
+      const isSelectedInOptions = baseOptions.some((o) => o.value === value);
+      if (value && !isSelectedInOptions && defaultOption?.value === value) {
+        return [...baseOptions, defaultOption];
       }
-    }, [options]);
+      return baseOptions;
+    }, [options, value, defaultOption]);
     const handleOpen = () => {
-      setOpen(true);
-      if (!localOptions.length) {
+      if (!options?.length) {
         refetch?.();
       }
     };
-    const handleClose = () => setOpen(false);
-    const defaultOptionValueIsValid = defaultOption?.value !== void 0;
-    const defaultOptionLabelIsValid = defaultOption?.label !== void 0;
-    let combinedOptions = [];
-    if (localOptions.length > 0) {
-      combinedOptions = localOptions.filter(
-        (option) => option.value !== void 0 && option.label !== void 0
-      );
-      if (allowBlankOption) {
-        combinedOptions.unshift({
-          value: "",
-          label: "None"
-        });
-      }
-    } else if (defaultOption !== null && defaultOptionValueIsValid && defaultOptionLabelIsValid) {
-      combinedOptions = [defaultOption];
-    } else {
-      combinedOptions = [];
-    }
     const handleChange = (event) => {
       const selectedId = event.target.value;
-      const selectedOption = combinedOptions.find(
-        (option) => option?.value === selectedId
+      const selectedOption = visibleOptions.find(
+        (option) => option.value === selectedId
       );
       if (selectedOption) {
         onChange(selectedOption);
       }
     };
+    const renderMenuContent = () => {
+      if (isFetching) {
+        return [
+          /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(
+            import_material63.Box,
+            {
+              "data-testid": "select-loading",
+              sx: {
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center",
+                p: 2
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(import_material63.CircularProgress, { size: 24 })
+            },
+            "select-loading"
+          ),
+          // Hidden default item to satisfy MUI validation
+          defaultOption ? /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(
+            import_material63.MenuItem,
+            {
+              "data-testid": "hidden-default-item",
+              value: defaultOption?.value,
+              sx: { display: "none" },
+              children: defaultOption?.label
+            },
+            "hidden-default-item"
+          ) : null
+        ];
+      }
+      if (!visibleOptions.length) {
+        return /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(import_material63.MenuItem, { disabled: true, "data-testid": `${dataTestId}-empty-message`, children: emptyMessage });
+      }
+      return visibleOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(
+        import_material63.MenuItem,
+        {
+          value: option.value,
+          "data-testid": `${dataTestId}-option-${option?.value}`,
+          disabled: option.disabled,
+          children: option.label
+        },
+        option.value
+      ));
+    };
     return /* @__PURE__ */ (0, import_jsx_runtime116.jsxs)(
       import_material63.FormControl,
       {
         fullWidth: true,
         size,
-        className: classes.container,
         error,
         variant,
         "data-testid": dataTestId,
@@ -7489,53 +7510,19 @@ var SmartSelect = (0, import_react35.forwardRef)(
               children: inputLabel
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime116.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(
             import_material63.Select,
             {
               ref,
-              size,
-              disabled,
               labelId: "smart-select-label",
+              id: `${dataTestId}-select`,
+              "data-testid": `${dataTestId}-select`,
               value: value ?? "",
               onChange: handleChange,
               onOpen: handleOpen,
-              error,
-              onClose: handleClose,
-              open,
-              "data-testid": `${dataTestId}-select`,
-              id: `${dataTestId}-select`,
-              MenuProps: menuProps,
               label: inputLabel,
-              children: [
-                isFetching && /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(
-                  import_material63.MenuItem,
-                  {
-                    disabled: true,
-                    "data-testid": `${dataTestId}-loading`,
-                    id: `${dataTestId}-loading`,
-                    children: /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(import_material63.CircularProgress, { size: 24 })
-                  }
-                ),
-                (defaultOption === null || !defaultOptionLabelIsValid || !defaultOptionValueIsValid) && !isFetching && options?.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(import_material63.MenuItem, { disabled: true, "data-testid": `${dataTestId}-empty-message`, children: emptyMessage }),
-                localOptions.length === 0 && !isFetching && options?.length !== 0 && defaultOptionLabelIsValid && defaultOptionValueIsValid && /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(
-                  import_material63.MenuItem,
-                  {
-                    value: defaultOption?.value,
-                    "data-testid": `${dataTestId}-default-option`,
-                    children: defaultOption?.label
-                  }
-                ),
-                !isFetching && combinedOptions.length > 0 && combinedOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(
-                  import_material63.MenuItem,
-                  {
-                    value: option?.value,
-                    "data-testid": `${dataTestId}-option-${option?.value}`,
-                    disabled: option?.disabled,
-                    children: option?.label
-                  },
-                  option?.value
-                ))
-              ]
+              MenuProps: menuProps,
+              children: renderMenuContent()
             }
           ),
           helperText && /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(import_material63.FormHelperText, { "data-testid": `${dataTestId}-helper-text`, children: helperText })
@@ -7544,15 +7531,14 @@ var SmartSelect = (0, import_react35.forwardRef)(
     );
   }
 );
-var SmartSelect_default = SmartSelect;
 
 // src/components/SquareLabel/SquareLabel.tsx
 var import_react36 = require("react");
 var import_material64 = require("@mui/material");
 var import_colors52 = require("@mui/material/colors");
-var import_mui50 = require("tss-react/mui");
+var import_mui49 = require("tss-react/mui");
 var import_jsx_runtime117 = require("react/jsx-runtime");
-var useStyles45 = (0, import_mui50.makeStyles)()((theme) => ({
+var useStyles44 = (0, import_mui49.makeStyles)()((theme) => ({
   red: {
     backgroundColor: import_colors52.red["50"],
     color: import_colors52.red["500"],
@@ -7565,7 +7551,7 @@ var useStyles45 = (0, import_mui50.makeStyles)()((theme) => ({
   }
 }));
 var SquareLabel = ({ color, copy }) => {
-  const { classes } = useStyles45();
+  const { classes } = useStyles44();
   return /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(import_material64.Typography, { className: classes[color], children: copy });
 };
 var SquareLabel_default = (0, import_react36.memo)(SquareLabel);
@@ -7573,7 +7559,7 @@ var SquareLabel_default = (0, import_react36.memo)(SquareLabel);
 // src/components/Switch/Switch.tsx
 var import_react37 = require("react");
 var import_material65 = require("@mui/material");
-var import_mui51 = require("tss-react/mui");
+var import_mui50 = require("tss-react/mui");
 var import_jsx_runtime118 = require("react/jsx-runtime");
 var LSwitch = ({
   checked,
@@ -7606,7 +7592,7 @@ var LSwitch = ({
     ]
   }
 ) });
-var LabelledSwitch = (0, import_mui51.withStyles)(LSwitch, (theme) => ({
+var LabelledSwitch = (0, import_mui50.withStyles)(LSwitch, (theme) => ({
   c_switch: {},
   default: {
     margin: 16,
@@ -7892,7 +7878,7 @@ var SmartTableHeader = (0, import_react39.memo)(
 var import_react40 = require("react");
 var import_material69 = require("@mui/material");
 var import_debounce = __toESM(require_debounce(), 1);
-var import_mui52 = require("tss-react/mui");
+var import_mui51 = require("tss-react/mui");
 var import_uuid = require("uuid");
 
 // src/components/TableLoading/TableLoading.tsx
@@ -7951,7 +7937,7 @@ function calculateRowsPerPage(rowHeight) {
 
 // src/components/Table/Table.tsx
 var import_jsx_runtime122 = require("react/jsx-runtime");
-var useStyles46 = (0, import_mui52.makeStyles)()(() => ({
+var useStyles45 = (0, import_mui51.makeStyles)()(() => ({
   root: {
     height: "calc(100vh - 262px)",
     overflow: "scroll"
@@ -7990,7 +7976,7 @@ var Table = ({
     appliedFilters?.sortField || "delivery_date"
   );
   const [rowsPerPage, setRowsPerPage] = (0, import_react40.useState)(defaultRowsPerPage);
-  const { classes } = useStyles46();
+  const { classes } = useStyles45();
   const rowHeight = 56;
   const emptyRows = rowsPerPage - Math.min(rowsPerPage, data.length - page * rowsPerPage);
   const handleRequestSort = (event, property) => {
@@ -8287,9 +8273,9 @@ var TableDesktopRowSelectionBar = ({
 
 // src/components/TableEmptyResult/TableEmptyResult.tsx
 var import_material73 = require("@mui/material");
-var import_mui53 = require("tss-react/mui");
+var import_mui52 = require("tss-react/mui");
 var import_jsx_runtime128 = require("react/jsx-runtime");
-var useStyles47 = (0, import_mui53.makeStyles)()(() => ({
+var useStyles46 = (0, import_mui52.makeStyles)()(() => ({
   tableCellIcon: { padding: 24, height: "calc(100vh - 320px)" },
   tableCellDefault: { padding: 24 }
 }));
@@ -8299,7 +8285,7 @@ var TableEmptyResult = ({
   handleClickOnClearFiltersButton = () => {
   }
 }) => {
-  const { classes } = useStyles47();
+  const { classes } = useStyles46();
   return showClearFilterButton ? /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_material73.TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)(
     import_material73.TableCell,
     {
@@ -8631,6 +8617,7 @@ var TableDesktopSmartMultipleSelect = ({
       disabled,
       defaultValues,
       menuOptions: filterOptions,
+      menuProps: { disableRestoreFocus: true },
       isLoading: isFetchingFilterOptions,
       onOpen: () => {
         if (!filterOptions?.length) {
@@ -8675,7 +8662,7 @@ var TableDesktopSmartSelect = ({
   const valueId = resolveObjectType(value ?? "", "id");
   const valueLabel = resolveObjectType(value ?? "", fieldName);
   return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
-    SmartSelect_default,
+    SmartSelect,
     {
       ref,
       value: valueId,
@@ -8685,6 +8672,7 @@ var TableDesktopSmartSelect = ({
       disabled,
       variant,
       size,
+      menuProps: { disableRestoreFocus: true },
       refetch: refetchFilterOptions,
       isFetching: isFetchingFilterOptions,
       defaultOption: {
@@ -8994,6 +8982,7 @@ var TableDesktopFooter = ({
             variant: "text",
             onClick: () => refetchData(),
             disabled: isFetching,
+            "aria-label": "refresh-button",
             sx: {
               ml: 1,
               gap: 1
@@ -9002,14 +8991,14 @@ var TableDesktopFooter = ({
               import_Refresh.default,
               {
                 fontSize: "small",
-                color: isFetching ? "disabled" : "info"
+                color: isFetching ? "disabled" : "action"
               }
             )
           }
         ) : null,
         /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(import_material77.Box, { sx: { display: "flex", ml: "auto", py: 1 }, children: [
           pageSize && pageSizeOptions && onPageSizeChange ? /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(import_material77.Stack, { direction: "row", spacing: 2, alignItems: "center", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_material77.Typography, { children: "Rows per page:" }),
+            /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_material77.Typography, { fontSize: 12, children: "Rows per page:" }),
             /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
               import_material77.Select,
               {
@@ -9393,9 +9382,9 @@ var TableDesktopToolbar = ({
 var import_react48 = require("react");
 var import_icons_material12 = require("@mui/icons-material");
 var import_material80 = require("@mui/material");
-var import_mui54 = require("tss-react/mui");
+var import_mui53 = require("tss-react/mui");
 var import_jsx_runtime137 = require("react/jsx-runtime");
-var useStyles48 = (0, import_mui54.makeStyles)()(() => ({
+var useStyles47 = (0, import_mui53.makeStyles)()(() => ({
   sortLabel: {
     "& .MuiTableSortLabel-icon": {
       opacity: 1
@@ -9404,7 +9393,7 @@ var useStyles48 = (0, import_mui54.makeStyles)()(() => ({
 }));
 var TableHeader = ({ cells, onSort = null }) => {
   const [sortableCells, setSortableCells] = (0, import_react48.useState)([]);
-  const { classes } = useStyles48();
+  const { classes } = useStyles47();
   (0, import_react48.useEffect)(() => {
     setSortableCells(cells);
   }, []);
@@ -9454,9 +9443,9 @@ var TableHeader_default = (0, import_react48.memo)(TableHeader);
 
 // src/components/TextDivider/TextDivider.tsx
 var import_material81 = require("@mui/material");
-var import_mui55 = require("tss-react/mui");
+var import_mui54 = require("tss-react/mui");
 var import_jsx_runtime138 = require("react/jsx-runtime");
-var useStyles49 = (0, import_mui55.makeStyles)()(() => ({
+var useStyles48 = (0, import_mui54.makeStyles)()(() => ({
   icon: {
     fontSize: 20
   },
@@ -9490,7 +9479,7 @@ var TextDivider = ({
   iconPosition = "left",
   titleWeight = "400"
 }) => {
-  const { classes } = useStyles49();
+  const { classes } = useStyles48();
   const iconColor = color ?? colors.neutral900;
   return /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)(
     import_material81.Box,
@@ -9523,11 +9512,11 @@ var TextDivider_default = TextDivider;
 
 // src/components/ThemedDateRangePicker/ThemedDateRangePicker.tsx
 var import_react_dates = require("react-dates");
-var import_mui56 = require("tss-react/mui");
+var import_mui55 = require("tss-react/mui");
 var import_initialize = require("react-dates/initialize");
 var import_datepicker = require("react-dates/lib/css/_datepicker.css");
 var import_jsx_runtime139 = require("react/jsx-runtime");
-var useStyles50 = (0, import_mui56.makeStyles)()((theme) => ({
+var useStyles49 = (0, import_mui55.makeStyles)()((theme) => ({
   wrapper: {
     "& .DateRangePicker": {
       backgroundColor: theme.palette.mode === "dark" ? theme.palette.grey[900] : colors.neutral100,
@@ -9621,7 +9610,7 @@ var ThemedDateRangePicker = ({
   className,
   ...props
 }) => {
-  const { classes, cx } = useStyles50();
+  const { classes, cx } = useStyles49();
   return /* @__PURE__ */ (0, import_jsx_runtime139.jsx)("div", { className: cx(classes.wrapper, className), children: /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(import_react_dates.DateRangePicker, { ...props }) });
 };
 var ThemedDateRangePicker_default = ThemedDateRangePicker;
@@ -9629,9 +9618,9 @@ var ThemedDateRangePicker_default = ThemedDateRangePicker;
 // src/components/TheToolbar/TheToolbar.tsx
 var import_react49 = require("react");
 var import_material82 = require("@mui/material");
-var import_mui57 = require("tss-react/mui");
+var import_mui56 = require("tss-react/mui");
 var import_jsx_runtime140 = require("react/jsx-runtime");
-var useStyles51 = (0, import_mui57.makeStyles)()((theme) => ({
+var useStyles50 = (0, import_mui56.makeStyles)()((theme) => ({
   menuButton: {
     color: theme.palette.primary.contrastText
   },
@@ -9649,7 +9638,7 @@ var TheToolbar = ({
   leftSection,
   rightSection
 }) => {
-  const { classes } = useStyles51();
+  const { classes } = useStyles50();
   return /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(import_material82.Box, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_material82.AppBar, { children: /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(import_material82.Toolbar, { className: classes.topBar, children: [
       /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(
@@ -9721,9 +9710,9 @@ var ToastMessage_default = ToastMessage;
 
 // src/components/TwoButtonDialog/TwoButtonDialog.tsx
 var import_material84 = require("@mui/material");
-var import_mui58 = require("tss-react/mui");
+var import_mui57 = require("tss-react/mui");
 var import_jsx_runtime142 = require("react/jsx-runtime");
-var useStyles52 = (0, import_mui58.makeStyles)()((theme) => ({
+var useStyles51 = (0, import_mui57.makeStyles)()((theme) => ({
   paper: {
     padding: theme.spacing(2)
   },
@@ -9751,7 +9740,7 @@ var TwoButtonDialog = ({
   cancelLabel = "CANCEL",
   cancelButton
 }) => {
-  const { classes } = useStyles52();
+  const { classes } = useStyles51();
   return /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(
     import_material84.Dialog,
     {