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

package/dist/components/index.d.cts

@@ -880,13 +880,17 @@ interface SearchAndFilterHeaderForTableProps {
 declare const _default$7: React.MemoExoticComponent<(props: SearchAndFilterHeaderForTableProps) => react_jsx_runtime.JSX.Element>;
 
 type SearchFieldDebouncedProps = {
-    onSearch: (value: string) => void;
+    onSearch?: (value: string) => void;
+    value?: string;
+    onChange?: (e: React__default.ChangeEvent<HTMLInputElement>) => void;
+    onKeyDown?: (e: React__default.KeyboardEvent<HTMLInputElement>) => void;
     variant?: 'outlined' | 'filled' | 'standard';
     hideSearchIcon?: boolean;
     initialValue?: string;
     debounceDelay?: number;
     minCharacters?: number;
     sx?: SxProps<Theme>;
+    width?: number;
     inputProps?: {
         sx: SxProps<Theme>;
     };
@@ -895,10 +899,15 @@ declare const SearchFieldDebounced: React__default.FC<SearchFieldDebouncedProps>
 
 type SearchHeaderProps = {
     renderButton?: ReactNode;
+    renderExtraAction?: ReactNode;
     children?: ReactNode;
-    onSearch: (value: string) => void;
+    onSearch?: (value: string) => void;
+    value?: string;
+    onChange?: (e: React__default.ChangeEvent<HTMLInputElement>) => void;
+    onKeyDown?: (e: React__default.KeyboardEvent<HTMLInputElement>) => void;
+    width?: number;
 };
-declare const SearchHeader: React.MemoExoticComponent<({ renderButton, children, onSearch }: SearchHeaderProps) => react_jsx_runtime.JSX.Element>;
+declare const SearchHeader: ({ renderButton, renderExtraAction, children, onSearch, value, onChange, onKeyDown, width, }: SearchHeaderProps) => react_jsx_runtime.JSX.Element;
 
 interface ISearchWithFiltersProps {
     enterPressedInSearch?: () => void;

package/dist/components/index.d.ts

@@ -880,13 +880,17 @@ interface SearchAndFilterHeaderForTableProps {
 declare const _default$7: React.MemoExoticComponent<(props: SearchAndFilterHeaderForTableProps) => react_jsx_runtime.JSX.Element>;
 
 type SearchFieldDebouncedProps = {
-    onSearch: (value: string) => void;
+    onSearch?: (value: string) => void;
+    value?: string;
+    onChange?: (e: React__default.ChangeEvent<HTMLInputElement>) => void;
+    onKeyDown?: (e: React__default.KeyboardEvent<HTMLInputElement>) => void;
     variant?: 'outlined' | 'filled' | 'standard';
     hideSearchIcon?: boolean;
     initialValue?: string;
     debounceDelay?: number;
     minCharacters?: number;
     sx?: SxProps<Theme>;
+    width?: number;
     inputProps?: {
         sx: SxProps<Theme>;
     };
@@ -895,10 +899,15 @@ declare const SearchFieldDebounced: React__default.FC<SearchFieldDebouncedProps>
 
 type SearchHeaderProps = {
     renderButton?: ReactNode;
+    renderExtraAction?: ReactNode;
     children?: ReactNode;
-    onSearch: (value: string) => void;
+    onSearch?: (value: string) => void;
+    value?: string;
+    onChange?: (e: React__default.ChangeEvent<HTMLInputElement>) => void;
+    onKeyDown?: (e: React__default.KeyboardEvent<HTMLInputElement>) => void;
+    width?: number;
 };
-declare const SearchHeader: React.MemoExoticComponent<({ renderButton, children, onSearch }: SearchHeaderProps) => react_jsx_runtime.JSX.Element>;
+declare const SearchHeader: ({ renderButton, renderExtraAction, children, onSearch, value, onChange, onKeyDown, width, }: SearchHeaderProps) => react_jsx_runtime.JSX.Element;
 
 interface ISearchWithFiltersProps {
     enterPressedInSearch?: () => void;

package/dist/components/index.js

@@ -1649,29 +1649,41 @@ import { TextField as TextField3, InputAdornment, Box as Box12 } from "@mui/mate
 import { jsx as jsx16 } from "react/jsx-runtime";
 var SearchFieldDebounced = ({
   onSearch,
+  value: controlledValue,
+  onChange: onChangeControlled,
+  onKeyDown,
   variant = "outlined",
   hideSearchIcon = false,
   initialValue = "",
   debounceDelay = 500,
   minCharacters = 0,
   sx,
+  width = 285,
   inputProps
 }) => {
-  const [value, setValue] = useState2(initialValue);
+  const [internalValue, setInternalValue] = useState2(initialValue);
   const debounceRef = useRef3(null);
   const inputSx = inputProps?.sx;
+  const isControlled = controlledValue !== void 0;
+  const value = isControlled ? controlledValue : internalValue;
+  const executeSearch = (inputValue) => {
+    const trimmedInput = inputValue.trim();
+    if (trimmedInput.length > 0 && trimmedInput.length < minCharacters) {
+      return;
+    }
+    onSearch?.(trimmedInput);
+  };
   const handleChange = (e) => {
     const input = e.target.value;
-    setValue(input);
+    if (!isControlled) {
+      setInternalValue(input);
+    }
+    onChangeControlled?.(e);
     if (debounceRef.current) {
       clearTimeout(debounceRef.current);
     }
     debounceRef.current = window.setTimeout(() => {
-      const trimmedInput = input.trim();
-      if (trimmedInput.length < minCharacters) {
-        return;
-      }
-      onSearch(trimmedInput);
+      executeSearch(input);
     }, debounceDelay);
   };
   useEffect3(() => {
@@ -1682,7 +1694,7 @@ var SearchFieldDebounced = ({
       clearTimeout(debounceRef.current);
     };
   }, []);
-  return /* @__PURE__ */ jsx16(Box12, { width: 285, children: /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx16(Box12, { sx: { width }, children: /* @__PURE__ */ jsx16(
     TextField3,
     {
       fullWidth: true,
@@ -1690,6 +1702,7 @@ var SearchFieldDebounced = ({
       placeholder: "Search",
       value,
       onChange: handleChange,
+      onKeyDown,
       sx,
       slotProps: {
         input: {
@@ -7690,40 +7703,58 @@ var SearchAndFilterHeaderForTable = (props) => {
 var SearchAndFilterHeaderForTable_default = React7.memo(SearchAndFilterHeaderForTable);
 
 // src/components/SearchHeader/SearchHeader.tsx
-import { memo as memo18 } from "react";
 import { Box as Box37, Paper as Paper10 } from "@mui/material";
 import { jsx as jsx116, jsxs as jsxs80 } from "react/jsx-runtime";
-var SearchHeader = memo18(
-  ({ renderButton, children, onSearch }) => {
-    return /* @__PURE__ */ jsxs80(
-      Paper10,
-      {
-        sx: {
-          display: "flex",
-          flexDirection: "column",
-          padding: 2
-        },
-        children: [
-          /* @__PURE__ */ jsxs80(
-            Box37,
-            {
-              sx: {
-                display: "flex",
-                justifyContent: "space-between",
-                alignItems: "center"
-              },
-              children: [
-                /* @__PURE__ */ jsx116(Box37, { sx: { width: 285 }, children: /* @__PURE__ */ jsx116(SearchFieldDebounced, { onSearch }) }),
-                renderButton
-              ]
-            }
-          ),
-          children
-        ]
-      }
-    );
-  }
-);
+var SearchHeader = ({
+  renderButton,
+  renderExtraAction,
+  children,
+  onSearch,
+  value,
+  onChange,
+  onKeyDown,
+  width
+}) => {
+  return /* @__PURE__ */ jsxs80(
+    Paper10,
+    {
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        padding: 2
+      },
+      children: [
+        /* @__PURE__ */ jsxs80(
+          Box37,
+          {
+            sx: {
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "center"
+            },
+            children: [
+              /* @__PURE__ */ jsxs80(Box37, { sx: { display: "flex", gap: 1, alignItems: "center" }, children: [
+                /* @__PURE__ */ jsx116(
+                  SearchFieldDebounced,
+                  {
+                    width,
+                    onSearch,
+                    value,
+                    onChange,
+                    onKeyDown
+                  }
+                ),
+                renderExtraAction
+              ] }),
+              renderButton
+            ]
+          }
+        ),
+        children
+      ]
+    }
+  );
+};
 
 // src/components/SectionName/SectionName.tsx
 import HistoryIcon from "@mui/icons-material/History";
@@ -7946,7 +7977,7 @@ var SmartMultipleSelect = ({
 };
 
 // src/components/SquareLabel/SquareLabel.tsx
-import { memo as memo19 } from "react";
+import { memo as memo18 } from "react";
 import { Typography as Typography30 } from "@mui/material";
 import { red as red2 } from "@mui/material/colors";
 import { makeStyles as makeStyles43 } from "tss-react/mui";
@@ -7967,10 +7998,10 @@ var SquareLabel = ({ color, copy }) => {
   const { classes } = useStyles43();
   return /* @__PURE__ */ jsx119(Typography30, { className: classes[color], children: copy });
 };
-var SquareLabel_default = memo19(SquareLabel);
+var SquareLabel_default = memo18(SquareLabel);
 
 // src/components/Switch/Switch.tsx
-import { memo as memo20 } from "react";
+import { memo as memo19 } from "react";
 import { Grid as Grid2, Switch } from "@mui/material";
 import { withStyles as withStyles6 } from "tss-react/mui";
 import { jsx as jsx120, jsxs as jsxs83 } from "react/jsx-runtime";
@@ -8023,7 +8054,7 @@ var LabelledSwitch = withStyles6(LSwitch, (theme) => ({
     fontSize: "1rem"
   }
 }));
-var Switch_default = memo20(LabelledSwitch);
+var Switch_default = memo19(LabelledSwitch);
 
 // src/components/SmartTableHeaderFilterMenu/SmartTableHeaderFilterMenu.tsx
 import { useState as useState16, useEffect as useEffect11 } from "react";
@@ -8168,7 +8199,7 @@ var SmartTableHeaderFilterMenu = ({
 };
 
 // src/components/SmartTableHeader/SmartTableHeader.tsx
-import { memo as memo21 } from "react";
+import { memo as memo20 } from "react";
 import {
   Box as Box40,
   Checkbox as Checkbox8,
@@ -8180,7 +8211,7 @@ import {
   Typography as Typography31
 } from "@mui/material";
 import { jsx as jsx122, jsxs as jsxs85 } from "react/jsx-runtime";
-var SmartTableHeader = memo21(
+var SmartTableHeader = memo20(
   ({
     order,
     orderBy,
@@ -9848,7 +9879,7 @@ var TableDesktopToolbar = ({
 };
 
 // src/components/TableHeader/TableHeader.tsx
-import { memo as memo22, useEffect as useEffect15, useState as useState24 } from "react";
+import { memo as memo21, useEffect as useEffect15, useState as useState24 } from "react";
 import { ImportExport as ImportExportIcon } from "@mui/icons-material";
 import { TableCell as TableCell7, TableHead as TableHead3, TableRow as TableRow6, TableSortLabel as TableSortLabel3 } from "@mui/material";
 import { makeStyles as makeStyles46 } from "tss-react/mui";
@@ -9908,7 +9939,7 @@ var TableHeader = ({ cells, onSort = null }) => {
     }
   ) : cell.label }, cell.label || key)) }) });
 };
-var TableHeader_default = memo22(TableHeader);
+var TableHeader_default = memo21(TableHeader);
 
 // src/components/TextDivider/TextDivider.tsx
 import { Box as Box47, Typography as Typography37, Divider as Divider12, Button as Button20 } from "@mui/material";
@@ -10085,7 +10116,7 @@ var ThemedDateRangePicker = ({
 var ThemedDateRangePicker_default = ThemedDateRangePicker;
 
 // src/components/TheToolbar/TheToolbar.tsx
-import { memo as memo23 } from "react";
+import { memo as memo22 } from "react";
 import { AppBar, Box as Box48, Toolbar } from "@mui/material";
 import { makeStyles as makeStyles49 } from "tss-react/mui";
 import { jsx as jsx141, jsxs as jsxs96 } from "react/jsx-runtime";
@@ -10135,7 +10166,7 @@ var TheToolbar = ({
     LeftDrawer
   ] });
 };
-var TheToolbar_default = memo23(TheToolbar);
+var TheToolbar_default = memo22(TheToolbar);
 
 // src/components/ToastMessage/ToastMessage.tsx
 import { Alert as MuiAlert, Snackbar } from "@mui/material";
@@ -10286,7 +10317,7 @@ var TwoButtonDialog = ({
 var TwoButtonDialog_default = TwoButtonDialog;
 
 // src/components/UserBust/UserBust.tsx
-import { memo as memo24 } from "react";
+import { memo as memo23 } from "react";
 import { Avatar as Avatar2, Typography as Typography39 } from "@mui/material";
 import { jsx as jsx144, jsxs as jsxs98 } from "react/jsx-runtime";
 var UserBust = ({ user, avatarProps, typographyProps }) => /* @__PURE__ */ jsxs98("div", { children: [
@@ -10303,7 +10334,7 @@ var UserBust = ({ user, avatarProps, typographyProps }) => /* @__PURE__ */ jsxs9
     /* @__PURE__ */ jsx144(Typography39, { ...typographyProps.username, children: user.username })
   ] })
 ] });
-var UserBust_default = memo24(UserBust);
+var UserBust_default = memo23(UserBust);
 
 // src/components/icons/IconChart.tsx
 import { jsx as jsx145 } from "react/jsx-runtime";