@undefine-ui/design-system 3.4.1 → 3.5.0

package/dist/index.d.cts

@@ -1604,8 +1604,10 @@ interface ToolbarSearchFieldProps extends Omit<InputBaseProps, 'startAdornment'>
     placeholder?: string;
     /** Callback fired when the clear button is clicked */
     onClear?: () => void;
+    /** Reference to the input element (for integration with DataGrid QuickFilter) */
+    inputRef?: React.Ref<HTMLInputElement>;
 }
-declare const ToolbarSearchField: ({ placeholder, className, sx, value, onFocus, onBlur, onClear, ...props }: ToolbarSearchFieldProps) => react_jsx_runtime.JSX.Element;
+declare const ToolbarSearchField: react.ForwardRefExoticComponent<Omit<ToolbarSearchFieldProps, "ref"> & react.RefAttributes<HTMLInputElement>>;
 
 type ViewOption = 'year' | 'month' | 'week' | 'day';
 interface ToolbarViewSwitcherProps extends Omit<ButtonBaseProps, 'children'> {

package/dist/index.d.ts

@@ -1604,8 +1604,10 @@ interface ToolbarSearchFieldProps extends Omit<InputBaseProps, 'startAdornment'>
     placeholder?: string;
     /** Callback fired when the clear button is clicked */
     onClear?: () => void;
+    /** Reference to the input element (for integration with DataGrid QuickFilter) */
+    inputRef?: React.Ref<HTMLInputElement>;
 }
-declare const ToolbarSearchField: ({ placeholder, className, sx, value, onFocus, onBlur, onClear, ...props }: ToolbarSearchFieldProps) => react_jsx_runtime.JSX.Element;
+declare const ToolbarSearchField: react.ForwardRefExoticComponent<Omit<ToolbarSearchFieldProps, "ref"> & react.RefAttributes<HTMLInputElement>>;
 
 type ViewOption = 'year' | 'month' | 'week' | 'day';
 interface ToolbarViewSwitcherProps extends Omit<ButtonBaseProps, 'children'> {

package/dist/index.js

@@ -2167,8 +2167,7 @@ var MuiTabs = {
           gap: "4px"
         }
       }
-    }),
-    indicator: { backgroundColor: "currentColor" }
+    })
   }
 };
 var MuiTab = {
@@ -5903,7 +5902,7 @@ var MuiTextField = {
         maxWidth: "100%",
         lineHeight: 1.153,
         position: "relative",
-        fontSize: theme.typography.h8.fontSize,
+        fontSize: `${theme.typography.h8.fontSize} !important`,
         fontWeight: `${theme.typography.fontWeightMedium} !important`,
         marginBottom: theme.spacing(1),
         color: `${theme.vars.palette.icon.black} !important`,
@@ -9329,7 +9328,7 @@ var ToolbarTodayButton = ({ label = "Today", sx, ...props }) => {
 };
 
 // src/components/Toolbar/ToolbarSearchField.tsx
-import { useState as useState14, useCallback as useCallback13 } from "react";
+import { useState as useState14, forwardRef as forwardRef5, useCallback as useCallback13 } from "react";
 import Box17 from "@mui/material/Box";
 import ButtonBase3 from "@mui/material/ButtonBase";
 import InputBase from "@mui/material/InputBase";
@@ -9345,105 +9344,100 @@ var baseStyles3 = {
   borderColor: "border.mute",
   borderBottomWidth: "1.5px"
 };
-var ToolbarSearchField = ({
-  placeholder = "Search",
-  className,
-  sx,
-  value,
-  onFocus,
-  onBlur,
-  onClear,
-  ...props
-}) => {
-  const [isFocused, setIsFocused] = useState14(false);
-  const hasValue = Boolean(value && String(value).length > 0);
-  const handleFocus = useCallback13(
-    (event) => {
-      setIsFocused(true);
-      onFocus?.(event);
-    },
-    [onFocus]
-  );
-  const handleBlur = useCallback13(
-    (event) => {
-      setIsFocused(false);
-      onBlur?.(event);
-    },
-    [onBlur]
-  );
-  const handleClear = useCallback13(() => {
-    onClear?.();
-  }, [onClear]);
-  return /* @__PURE__ */ jsxs53(
-    Box17,
-    {
-      className: toolbarClasses.searchField.concat(
-        isFocused ? ` ${toolbarClasses.searchFieldFocused}` : "",
-        className ? ` ${className}` : ""
-      ),
-      sx: {
-        ...baseStyles3,
-        borderRadius: (theme) => theme.radius["radius-md"],
-        ...isFocused && {
-          boxShadow: (theme) => `0px 0px 0px 1.6px white, 0px 0px 0px 3.2px ${varAlpha(theme.vars.palette.primary["300Channel"], 1)}`
-        },
-        ...sx
+var ToolbarSearchField = forwardRef5(
+  ({ placeholder = "Search", className, sx, value, onFocus, onBlur, onClear, inputRef, ...props }, ref) => {
+    const [isFocused, setIsFocused] = useState14(false);
+    const hasValue = Boolean(value && String(value).length > 0);
+    const handleFocus = useCallback13(
+      (event) => {
+        setIsFocused(true);
+        onFocus?.(event);
       },
-      children: [
-        /* @__PURE__ */ jsx83(
-          Icon,
-          {
-            icon: "Search",
-            className: toolbarClasses.searchIcon,
-            sx: { width: 16, height: 16, color: "icon.black", flexShrink: 0 }
-          }
+      [onFocus]
+    );
+    const handleBlur = useCallback13(
+      (event) => {
+        setIsFocused(false);
+        onBlur?.(event);
+      },
+      [onBlur]
+    );
+    const handleClear = useCallback13(() => {
+      onClear?.();
+    }, [onClear]);
+    return /* @__PURE__ */ jsxs53(
+      Box17,
+      {
+        ref,
+        className: toolbarClasses.searchField.concat(
+          isFocused ? ` ${toolbarClasses.searchFieldFocused}` : "",
+          className ? ` ${className}` : ""
         ),
-        /* @__PURE__ */ jsx83(
-          InputBase,
-          {
-            placeholder,
-            className: toolbarClasses.searchInput,
-            value,
-            onFocus: handleFocus,
-            onBlur: handleBlur,
-            sx: {
-              flex: 1,
-              minWidth: 0,
-              height: 22,
-              "& .MuiInputBase-input": {
-                p: 0,
-                fontSize: 14,
-                lineHeight: "22px",
-                color: "text.header",
-                "&::placeholder": {
-                  color: "text.body",
-                  opacity: 1
+        sx: {
+          ...baseStyles3,
+          borderRadius: (theme) => theme.radius["radius-md"],
+          ...isFocused && {
+            boxShadow: (theme) => `0px 0px 0px 1.6px white, 0px 0px 0px 3.2px ${varAlpha(theme.vars.palette.primary["300Channel"], 1)}`
+          },
+          ...sx
+        },
+        children: [
+          /* @__PURE__ */ jsx83(
+            Icon,
+            {
+              icon: "Search",
+              className: toolbarClasses.searchIcon,
+              sx: { width: 16, height: 16, color: "icon.black", flexShrink: 0 }
+            }
+          ),
+          /* @__PURE__ */ jsx83(
+            InputBase,
+            {
+              inputRef,
+              placeholder,
+              className: toolbarClasses.searchInput,
+              value,
+              onFocus: handleFocus,
+              onBlur: handleBlur,
+              sx: {
+                flex: 1,
+                minWidth: 0,
+                height: 22,
+                "& .MuiInputBase-input": {
+                  p: 0,
+                  fontSize: 14,
+                  lineHeight: "22px",
+                  color: "text.header",
+                  "&::placeholder": {
+                    color: "text.body",
+                    opacity: 1
+                  }
                 }
-              }
-            },
-            ...props
-          }
-        ),
-        hasValue && onClear && /* @__PURE__ */ jsx83(
-          ButtonBase3,
-          {
-            onClick: handleClear,
-            className: toolbarClasses.searchClearButton,
-            sx: {
-              p: 0.25,
-              borderRadius: "50%",
-              flexShrink: 0,
-              "&:hover": {
-                bgcolor: "grey.100"
-              }
-            },
-            children: /* @__PURE__ */ jsx83(Icon, { icon: "XMark", sx: { width: 14, height: 14, color: "icon.mute" } })
-          }
-        )
-      ]
-    }
-  );
-};
+              },
+              ...props
+            }
+          ),
+          hasValue && onClear && /* @__PURE__ */ jsx83(
+            ButtonBase3,
+            {
+              onClick: handleClear,
+              className: toolbarClasses.searchClearButton,
+              sx: {
+                p: 0.25,
+                borderRadius: "50%",
+                flexShrink: 0,
+                "&:hover": {
+                  bgcolor: "grey.100"
+                }
+              },
+              children: /* @__PURE__ */ jsx83(Icon, { icon: "XMark", sx: { width: 14, height: 14, color: "icon.mute" } })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
 
 // src/components/Toolbar/ToolbarViewSwitcher.tsx
 import Box18 from "@mui/material/Box";