@rufous/ui 0.3.61 → 0.3.62

package/dist/main.cjs

@@ -2424,6 +2424,7 @@ var BaseDialog = ({
   showCloseButton = true,
   buttonAlign = "flex-end",
   showCancelButton = true,
+  showConfirmButton = true,
   formatTitle = true,
   fullWidth = false,
   className,
@@ -2500,7 +2501,7 @@ var BaseDialog = ({
       type: "button"
     },
     cancelText
-  ), form ? /* @__PURE__ */ React140.createElement(
+  ), showConfirmButton && (form ? /* @__PURE__ */ React140.createElement(
     "button",
     {
       className: "btn-confirm",
@@ -2532,7 +2533,7 @@ var BaseDialog = ({
     },
     /* @__PURE__ */ React140.createElement("span", { style: { visibility: isButtonLoading ? "hidden" : "visible" } }, confirmText),
     isButtonLoading && /* @__PURE__ */ React140.createElement("span", { style: { position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center" } }, /* @__PURE__ */ React140.createElement(circularProgress_default, { size: 18, color: "#ffffff80" }))
-  ));
+  )));
   const containerClass = ["dialog-container", size ? `size-${size}` : "", sxClass, className].filter(Boolean).join(" ");
   const containerStyle = { minWidth, minHeight };
   const dialogInner = /* @__PURE__ */ React140.createElement(React140.Fragment, null, !hideHeader && /* @__PURE__ */ React140.createElement(React140.Fragment, null, customHeader ?? /* @__PURE__ */ React140.createElement("div", { className: "dialog-title" }, /* @__PURE__ */ React140.createElement("h2", null, formatTitle ? title?.charAt(0).toUpperCase() + title?.slice(1) : title), showCloseButton && /* @__PURE__ */ React140.createElement("button", { className: "btn-close", type: "button", onClick: onClose }, /* @__PURE__ */ React140.createElement(
@@ -4713,29 +4714,46 @@ var DateField = ({
           if (!rect) return {};
           const PICKER_H = 420;
           const GAP2 = 6;
-          const spaceBelow = window.innerHeight - rect.bottom - GAP2;
+          const MARGIN = 8;
+          const vw = window.innerWidth;
+          const vh = window.innerHeight;
+          const naturalW = isSideVariant ? 470 : 320;
+          const avail = vw - MARGIN * 2;
+          const scale = naturalW > avail ? avail / naturalW : 1;
+          const scaledW = naturalW * scale;
+          let left = rect.left;
+          const maxLeft = vw - scaledW - MARGIN;
+          if (left > maxLeft) left = maxLeft;
+          if (left < MARGIN) left = MARGIN;
+          const spaceBelow = vh - rect.bottom - GAP2;
           const spaceAbove = rect.top - GAP2;
-          const useDropUp = spaceBelow < PICKER_H && spaceAbove > spaceBelow;
+          const useDropUp = spaceBelow < PICKER_H * scale && spaceAbove > spaceBelow;
+          const common = {
+            position: "fixed",
+            left,
+            width: naturalW,
+            transform: scale === 1 ? void 0 : `scale(${scale})`,
+            overflowY: "auto",
+            zIndex: 99999
+          };
           if (useDropUp) {
             return {
-              position: "fixed",
-              left: rect.left,
+              ...common,
               // bottom anchors picker's bottom edge exactly to field top — no gap regardless of actual height
-              bottom: window.innerHeight - rect.top + GAP2,
-              // prevent going above viewport
-              maxHeight: rect.top - GAP2 - 4,
-              overflowY: "auto",
-              zIndex: 99999,
-              animationName: "rf-date-picker-appear-up",
+              bottom: vh - rect.top + GAP2,
+              // unscaled max-height — visual height after scaling fits the gap above
+              maxHeight: (rect.top - GAP2 - MARGIN) / scale,
+              // skip the scale-animating keyframes when we apply a static scale (they'd flash full-size)
+              animationName: scale === 1 ? "rf-date-picker-appear-up" : "none",
               transformOrigin: "bottom left"
             };
           }
           return {
-            position: "fixed",
-            left: rect.left,
+            ...common,
             top: rect.bottom + GAP2,
-            zIndex: 99999,
-            animationName: "rf-date-picker-appear",
+            // unscaled max-height — visual height after scaling fits below the field
+            maxHeight: (vh - rect.bottom - GAP2 - MARGIN) / scale,
+            animationName: scale === 1 ? "rf-date-picker-appear" : "none",
             transformOrigin: "top left"
           };
         })(),
@@ -5111,6 +5129,43 @@ var DateRangeField = ({
   const [leftViewMonth, setLeftViewMonth] = (0, import_react16.useState)(() => today2.getMonth());
   const containerRef = (0, import_react16.useRef)(null);
   const inputId = (0, import_react16.useRef)(`rf-dr-${Math.random().toString(36).substr(2, 9)}`).current;
+  const [mobileStyle, setMobileStyle] = (0, import_react16.useState)({});
+  (0, import_react16.useEffect)(() => {
+    if (!open) {
+      setMobileStyle({});
+      return;
+    }
+    const compute = () => {
+      const vw = window.innerWidth;
+      const vh = window.innerHeight;
+      const MARGIN = 8;
+      const GAP2 = 6;
+      const naturalW = pickerType === "panel" ? 520 : 640;
+      const avail = vw - MARGIN * 2;
+      if (naturalW <= avail) {
+        setMobileStyle({});
+        return;
+      }
+      const scale = avail / naturalW;
+      const rect = containerRef.current?.getBoundingClientRect();
+      const top = rect ? rect.bottom + GAP2 : 60;
+      setMobileStyle({
+        position: "fixed",
+        top,
+        left: "50%",
+        transform: `translateX(-50%) scale(${scale})`,
+        transformOrigin: "top center",
+        width: naturalW,
+        maxHeight: (vh - top - MARGIN) / scale,
+        overflowY: "auto",
+        animation: "none",
+        zIndex: 99999
+      });
+    };
+    compute();
+    window.addEventListener("resize", compute);
+    return () => window.removeEventListener("resize", compute);
+  }, [open, pickerType]);
   (0, import_react16.useEffect)(() => {
     const s2 = value?.start ? isoToDate2(value.start) : null;
     const e = value?.end ? isoToDate2(value.end) : null;
@@ -5308,7 +5363,7 @@ var DateRangeField = ({
     variant === "outlined" && /* @__PURE__ */ import_react16.default.createElement("fieldset", { className: "rf-text-field__notch" }, label ? /* @__PURE__ */ import_react16.default.createElement("legend", { className: "rf-text-field__legend" }, /* @__PURE__ */ import_react16.default.createElement("span", null, label, required ? " *" : "")) : /* @__PURE__ */ import_react16.default.createElement("legend", { className: "rf-text-field__legend--empty" }))
   ), open && !disabled && (pickerType === "panel" ? (
     /* ── Panel Mode ── */
-    /* @__PURE__ */ import_react16.default.createElement("div", { className: "rf-dr-picker rf-dr-picker--panel", onMouseDown: (e) => e.preventDefault() }, /* @__PURE__ */ import_react16.default.createElement("div", { className: "rf-dr-picker__presets" }, PRESETS.map((p, i) => /* @__PURE__ */ import_react16.default.createElement(import_react16.default.Fragment, { key: p.id }, i > 0 && /* @__PURE__ */ import_react16.default.createElement("div", { className: "rf-dr-picker__preset-sep" }), /* @__PURE__ */ import_react16.default.createElement(
+    /* @__PURE__ */ import_react16.default.createElement("div", { className: "rf-dr-picker rf-dr-picker--panel", style: mobileStyle, onMouseDown: (e) => e.preventDefault() }, /* @__PURE__ */ import_react16.default.createElement("div", { className: "rf-dr-picker__presets" }, PRESETS.map((p, i) => /* @__PURE__ */ import_react16.default.createElement(import_react16.default.Fragment, { key: p.id }, i > 0 && /* @__PURE__ */ import_react16.default.createElement("div", { className: "rf-dr-picker__preset-sep" }), /* @__PURE__ */ import_react16.default.createElement(
       "button",
       {
         type: "button",
@@ -5428,7 +5483,7 @@ var DateRangeField = ({
     ))), /* @__PURE__ */ import_react16.default.createElement("div", { style: { flex: 1 } }), /* @__PURE__ */ import_react16.default.createElement("div", { className: "rf-dr-picker__footer" }, /* @__PURE__ */ import_react16.default.createElement("button", { type: "button", className: "rf-dr-picker__close-btn", onClick: handleClose }, "CLOSE"), /* @__PURE__ */ import_react16.default.createElement("button", { type: "button", className: "rf-dr-picker__apply-btn", onClick: handleApply }, "APPLY"))))
   ) : (
     /* ── Calendar Mode ── */
-    /* @__PURE__ */ import_react16.default.createElement("div", { className: "rf-dr-picker rf-dr-picker--calendar", onMouseDown: (e) => e.preventDefault() }, /* @__PURE__ */ import_react16.default.createElement("div", { className: "rf-dr-picker__calendars" }, /* @__PURE__ */ import_react16.default.createElement(
+    /* @__PURE__ */ import_react16.default.createElement("div", { className: "rf-dr-picker rf-dr-picker--calendar", style: mobileStyle, onMouseDown: (e) => e.preventDefault() }, /* @__PURE__ */ import_react16.default.createElement("div", { className: "rf-dr-picker__calendars" }, /* @__PURE__ */ import_react16.default.createElement(
       RangeCalendarBody,
       {
         viewYear: leftViewYear,
@@ -5831,6 +5886,7 @@ function DataGrid({
   const menuRef = (0, import_react17.useRef)(null);
   const [showManageColumns, setShowManageColumns] = (0, import_react17.useState)(false);
   const [showAdvancedFilter, setShowAdvancedFilter] = (0, import_react17.useState)(false);
+  const [mobileToolbarExpanded, setMobileToolbarExpanded] = (0, import_react17.useState)(false);
   const [focusFilterIdx, setFocusFilterIdx] = (0, import_react17.useState)(-1);
   const filterableColumnsProp = initialColumnsProp.filter((c) => c.filterable !== false);
   const initialFilterCol = String(filterableColumnsProp[0]?.field || filterableColumnsProp[0]?.key || "");
@@ -6320,14 +6376,24 @@ function DataGrid({
         onClick: () => setShowAdvancedFilter(true)
       },
       /* @__PURE__ */ import_react17.default.createElement(Funnel, { size: 16 })
-    )), showColumnsBtn && /* @__PURE__ */ import_react17.default.createElement(Tooltip, { title: "Manage Columns", placement: "top" }, /* @__PURE__ */ import_react17.default.createElement(
+    )), /* @__PURE__ */ import_react17.default.createElement("div", { className: `dg-actions-overflow${mobileToolbarExpanded ? " dg-actions-overflow--expanded" : ""}` }, showColumnsBtn && /* @__PURE__ */ import_react17.default.createElement(Tooltip, { title: "Manage Columns", placement: "top" }, /* @__PURE__ */ import_react17.default.createElement(
       "button",
       {
         className: "dg-icon-btn",
         onClick: () => setShowManageColumns(true)
       },
       /* @__PURE__ */ import_react17.default.createElement(Columns2, { size: 16 })
-    )), showExportBtn && /* @__PURE__ */ import_react17.default.createElement("button", { className: "dg-action-btn", onClick: handleExport, disabled: loading }, /* @__PURE__ */ import_react17.default.createElement(Download, { size: 14 }), " Export CSV"), slotAt("after-actions"));
+    )), showExportBtn && /* @__PURE__ */ import_react17.default.createElement("button", { className: "dg-action-btn", onClick: handleExport, disabled: loading }, /* @__PURE__ */ import_react17.default.createElement(Download, { size: 14 }), " Export CSV"), slotAt("after-actions")), (showColumnsBtn || showExportBtn || slots.some((s2) => s2.position === "after-actions" || !s2.position)) && /* @__PURE__ */ import_react17.default.createElement(
+      "button",
+      {
+        type: "button",
+        className: `dg-toolbar-toggle${mobileToolbarExpanded ? " dg-toolbar-toggle--expanded" : ""}`,
+        onClick: () => setMobileToolbarExpanded((v) => !v),
+        "aria-label": mobileToolbarExpanded ? "Hide toolbar options" : "Show all toolbar options",
+        "aria-expanded": mobileToolbarExpanded
+      },
+      /* @__PURE__ */ import_react17.default.createElement(ChevronDown, { size: 18 })
+    ));
   })())), !tOpts.hideHeader && /* @__PURE__ */ import_react17.default.createElement("div", { className: `dg-toolbar ${alignClass(toolbarContent?.align)}` }, toolbarContent?.content || ""), isGroupingActive && /* @__PURE__ */ import_react17.default.createElement("div", { className: "dg-grouping-bar" }, /* @__PURE__ */ import_react17.default.createElement("span", { className: "dg-grouping-bar-label" }, "Grouped by"), activeGroupingModel.map((gField) => {
     const col = resolvedColumns.find((c) => String(c.field) === gField || String(c.key) === gField);
     return /* @__PURE__ */ import_react17.default.createElement("div", { key: gField, className: "dg-group-chip" }, /* @__PURE__ */ import_react17.default.createElement(Layers, { size: 11 }), /* @__PURE__ */ import_react17.default.createElement("span", null, col?.header ?? col?.headerName ?? gField), !disableRowGrouping && /* @__PURE__ */ import_react17.default.createElement(

package/dist/main.css

@@ -97,6 +97,7 @@
   flex-direction: column;
   box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 10px 10px -5px rgba(0, 0, 0, 0.08);
   width: 685px !important;
+  max-width: 95vw;
   transition: background-color 0.3s, color 0.3s;
 }
 .dialog-container.size-sm {
@@ -495,6 +496,57 @@
   color: var(--primary-color);
   background: var(--hover-color);
 }
+.dg-actions-overflow {
+  display: contents;
+}
+.dg-toolbar-toggle {
+  display: none;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  padding: 0;
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  background: var(--surface-color);
+  color: var(--text-secondary);
+  cursor: pointer;
+  flex-shrink: 0;
+  outline: none;
+  transition:
+    border-color 0.2s,
+    color 0.2s,
+    background-color 0.2s;
+}
+.dg-toolbar-toggle:hover {
+  border-color: var(--primary-color);
+  color: var(--primary-color);
+  background: var(--hover-color);
+}
+.dg-toolbar-toggle > svg {
+  transition: transform 0.2s ease;
+}
+.dg-toolbar-toggle--expanded > svg {
+  transform: rotate(180deg);
+}
+@media (max-width: 600px) {
+  .dg-toolbar-toggle {
+    display: inline-flex;
+    margin-left: auto;
+  }
+  .dg-actions-overflow {
+    display: none;
+  }
+  .dg-actions-overflow--expanded {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    flex-wrap: wrap;
+    flex-basis: 100%;
+    order: 99;
+    margin-top: 4px;
+  }
+}
 .dg-table-wrap {
   border-top: 2px solid var(--border-color);
   border-bottom: 1px solid var(--border-color);

package/dist/main.d.cts

@@ -907,6 +907,8 @@ interface BaseDialogProps {
     showCloseButton?: boolean;
     buttonAlign?: "flex-start" | "flex-end" | "center";
     showCancelButton?: boolean;
+    /** Show/hide the confirm (or submit) button. Defaults to true. */
+    showConfirmButton?: boolean;
     formatTitle?: boolean;
     fullWidth?: boolean;
     className?: string;

package/dist/main.d.ts

@@ -907,6 +907,8 @@ interface BaseDialogProps {
     showCloseButton?: boolean;
     buttonAlign?: "flex-start" | "flex-end" | "center";
     showCancelButton?: boolean;
+    /** Show/hide the confirm (or submit) button. Defaults to true. */
+    showConfirmButton?: boolean;
     formatTitle?: boolean;
     fullWidth?: boolean;
     className?: string;

package/dist/main.js

@@ -2122,6 +2122,7 @@ var BaseDialog = ({
   showCloseButton = true,
   buttonAlign = "flex-end",
   showCancelButton = true,
+  showConfirmButton = true,
   formatTitle = true,
   fullWidth = false,
   className,
@@ -2198,7 +2199,7 @@ var BaseDialog = ({
       type: "button"
     },
     cancelText
-  ), form ? /* @__PURE__ */ React140.createElement(
+  ), showConfirmButton && (form ? /* @__PURE__ */ React140.createElement(
     "button",
     {
       className: "btn-confirm",
@@ -2230,7 +2231,7 @@ var BaseDialog = ({
     },
     /* @__PURE__ */ React140.createElement("span", { style: { visibility: isButtonLoading ? "hidden" : "visible" } }, confirmText),
     isButtonLoading && /* @__PURE__ */ React140.createElement("span", { style: { position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center" } }, /* @__PURE__ */ React140.createElement(circularProgress_default, { size: 18, color: "#ffffff80" }))
-  ));
+  )));
   const containerClass = ["dialog-container", size ? `size-${size}` : "", sxClass, className].filter(Boolean).join(" ");
   const containerStyle = { minWidth, minHeight };
   const dialogInner = /* @__PURE__ */ React140.createElement(React140.Fragment, null, !hideHeader && /* @__PURE__ */ React140.createElement(React140.Fragment, null, customHeader ?? /* @__PURE__ */ React140.createElement("div", { className: "dialog-title" }, /* @__PURE__ */ React140.createElement("h2", null, formatTitle ? title?.charAt(0).toUpperCase() + title?.slice(1) : title), showCloseButton && /* @__PURE__ */ React140.createElement("button", { className: "btn-close", type: "button", onClick: onClose }, /* @__PURE__ */ React140.createElement(
@@ -4434,29 +4435,46 @@ var DateField = ({
           if (!rect) return {};
           const PICKER_H = 420;
           const GAP2 = 6;
-          const spaceBelow = window.innerHeight - rect.bottom - GAP2;
+          const MARGIN = 8;
+          const vw = window.innerWidth;
+          const vh = window.innerHeight;
+          const naturalW = isSideVariant ? 470 : 320;
+          const avail = vw - MARGIN * 2;
+          const scale = naturalW > avail ? avail / naturalW : 1;
+          const scaledW = naturalW * scale;
+          let left = rect.left;
+          const maxLeft = vw - scaledW - MARGIN;
+          if (left > maxLeft) left = maxLeft;
+          if (left < MARGIN) left = MARGIN;
+          const spaceBelow = vh - rect.bottom - GAP2;
           const spaceAbove = rect.top - GAP2;
-          const useDropUp = spaceBelow < PICKER_H && spaceAbove > spaceBelow;
+          const useDropUp = spaceBelow < PICKER_H * scale && spaceAbove > spaceBelow;
+          const common = {
+            position: "fixed",
+            left,
+            width: naturalW,
+            transform: scale === 1 ? void 0 : `scale(${scale})`,
+            overflowY: "auto",
+            zIndex: 99999
+          };
           if (useDropUp) {
             return {
-              position: "fixed",
-              left: rect.left,
+              ...common,
               // bottom anchors picker's bottom edge exactly to field top — no gap regardless of actual height
-              bottom: window.innerHeight - rect.top + GAP2,
-              // prevent going above viewport
-              maxHeight: rect.top - GAP2 - 4,
-              overflowY: "auto",
-              zIndex: 99999,
-              animationName: "rf-date-picker-appear-up",
+              bottom: vh - rect.top + GAP2,
+              // unscaled max-height — visual height after scaling fits the gap above
+              maxHeight: (rect.top - GAP2 - MARGIN) / scale,
+              // skip the scale-animating keyframes when we apply a static scale (they'd flash full-size)
+              animationName: scale === 1 ? "rf-date-picker-appear-up" : "none",
               transformOrigin: "bottom left"
             };
           }
           return {
-            position: "fixed",
-            left: rect.left,
+            ...common,
             top: rect.bottom + GAP2,
-            zIndex: 99999,
-            animationName: "rf-date-picker-appear",
+            // unscaled max-height — visual height after scaling fits below the field
+            maxHeight: (vh - rect.bottom - GAP2 - MARGIN) / scale,
+            animationName: scale === 1 ? "rf-date-picker-appear" : "none",
             transformOrigin: "top left"
           };
         })(),
@@ -4836,6 +4854,43 @@ var DateRangeField = ({
   const [leftViewMonth, setLeftViewMonth] = useState9(() => today2.getMonth());
   const containerRef = useRef8(null);
   const inputId = useRef8(`rf-dr-${Math.random().toString(36).substr(2, 9)}`).current;
+  const [mobileStyle, setMobileStyle] = useState9({});
+  useEffect8(() => {
+    if (!open) {
+      setMobileStyle({});
+      return;
+    }
+    const compute = () => {
+      const vw = window.innerWidth;
+      const vh = window.innerHeight;
+      const MARGIN = 8;
+      const GAP2 = 6;
+      const naturalW = pickerType === "panel" ? 520 : 640;
+      const avail = vw - MARGIN * 2;
+      if (naturalW <= avail) {
+        setMobileStyle({});
+        return;
+      }
+      const scale = avail / naturalW;
+      const rect = containerRef.current?.getBoundingClientRect();
+      const top = rect ? rect.bottom + GAP2 : 60;
+      setMobileStyle({
+        position: "fixed",
+        top,
+        left: "50%",
+        transform: `translateX(-50%) scale(${scale})`,
+        transformOrigin: "top center",
+        width: naturalW,
+        maxHeight: (vh - top - MARGIN) / scale,
+        overflowY: "auto",
+        animation: "none",
+        zIndex: 99999
+      });
+    };
+    compute();
+    window.addEventListener("resize", compute);
+    return () => window.removeEventListener("resize", compute);
+  }, [open, pickerType]);
   useEffect8(() => {
     const s2 = value?.start ? isoToDate2(value.start) : null;
     const e = value?.end ? isoToDate2(value.end) : null;
@@ -5033,7 +5088,7 @@ var DateRangeField = ({
     variant === "outlined" && /* @__PURE__ */ React148.createElement("fieldset", { className: "rf-text-field__notch" }, label ? /* @__PURE__ */ React148.createElement("legend", { className: "rf-text-field__legend" }, /* @__PURE__ */ React148.createElement("span", null, label, required ? " *" : "")) : /* @__PURE__ */ React148.createElement("legend", { className: "rf-text-field__legend--empty" }))
   ), open && !disabled && (pickerType === "panel" ? (
     /* ── Panel Mode ── */
-    /* @__PURE__ */ React148.createElement("div", { className: "rf-dr-picker rf-dr-picker--panel", onMouseDown: (e) => e.preventDefault() }, /* @__PURE__ */ React148.createElement("div", { className: "rf-dr-picker__presets" }, PRESETS.map((p, i) => /* @__PURE__ */ React148.createElement(React148.Fragment, { key: p.id }, i > 0 && /* @__PURE__ */ React148.createElement("div", { className: "rf-dr-picker__preset-sep" }), /* @__PURE__ */ React148.createElement(
+    /* @__PURE__ */ React148.createElement("div", { className: "rf-dr-picker rf-dr-picker--panel", style: mobileStyle, onMouseDown: (e) => e.preventDefault() }, /* @__PURE__ */ React148.createElement("div", { className: "rf-dr-picker__presets" }, PRESETS.map((p, i) => /* @__PURE__ */ React148.createElement(React148.Fragment, { key: p.id }, i > 0 && /* @__PURE__ */ React148.createElement("div", { className: "rf-dr-picker__preset-sep" }), /* @__PURE__ */ React148.createElement(
       "button",
       {
         type: "button",
@@ -5153,7 +5208,7 @@ var DateRangeField = ({
     ))), /* @__PURE__ */ React148.createElement("div", { style: { flex: 1 } }), /* @__PURE__ */ React148.createElement("div", { className: "rf-dr-picker__footer" }, /* @__PURE__ */ React148.createElement("button", { type: "button", className: "rf-dr-picker__close-btn", onClick: handleClose }, "CLOSE"), /* @__PURE__ */ React148.createElement("button", { type: "button", className: "rf-dr-picker__apply-btn", onClick: handleApply }, "APPLY"))))
   ) : (
     /* ── Calendar Mode ── */
-    /* @__PURE__ */ React148.createElement("div", { className: "rf-dr-picker rf-dr-picker--calendar", onMouseDown: (e) => e.preventDefault() }, /* @__PURE__ */ React148.createElement("div", { className: "rf-dr-picker__calendars" }, /* @__PURE__ */ React148.createElement(
+    /* @__PURE__ */ React148.createElement("div", { className: "rf-dr-picker rf-dr-picker--calendar", style: mobileStyle, onMouseDown: (e) => e.preventDefault() }, /* @__PURE__ */ React148.createElement("div", { className: "rf-dr-picker__calendars" }, /* @__PURE__ */ React148.createElement(
       RangeCalendarBody,
       {
         viewYear: leftViewYear,
@@ -5556,6 +5611,7 @@ function DataGrid({
   const menuRef = useRef10(null);
   const [showManageColumns, setShowManageColumns] = useState10(false);
   const [showAdvancedFilter, setShowAdvancedFilter] = useState10(false);
+  const [mobileToolbarExpanded, setMobileToolbarExpanded] = useState10(false);
   const [focusFilterIdx, setFocusFilterIdx] = useState10(-1);
   const filterableColumnsProp = initialColumnsProp.filter((c) => c.filterable !== false);
   const initialFilterCol = String(filterableColumnsProp[0]?.field || filterableColumnsProp[0]?.key || "");
@@ -6045,14 +6101,24 @@ function DataGrid({
         onClick: () => setShowAdvancedFilter(true)
       },
       /* @__PURE__ */ React151.createElement(Funnel, { size: 16 })
-    )), showColumnsBtn && /* @__PURE__ */ React151.createElement(Tooltip, { title: "Manage Columns", placement: "top" }, /* @__PURE__ */ React151.createElement(
+    )), /* @__PURE__ */ React151.createElement("div", { className: `dg-actions-overflow${mobileToolbarExpanded ? " dg-actions-overflow--expanded" : ""}` }, showColumnsBtn && /* @__PURE__ */ React151.createElement(Tooltip, { title: "Manage Columns", placement: "top" }, /* @__PURE__ */ React151.createElement(
       "button",
       {
         className: "dg-icon-btn",
         onClick: () => setShowManageColumns(true)
       },
       /* @__PURE__ */ React151.createElement(Columns2, { size: 16 })
-    )), showExportBtn && /* @__PURE__ */ React151.createElement("button", { className: "dg-action-btn", onClick: handleExport, disabled: loading }, /* @__PURE__ */ React151.createElement(Download, { size: 14 }), " Export CSV"), slotAt("after-actions"));
+    )), showExportBtn && /* @__PURE__ */ React151.createElement("button", { className: "dg-action-btn", onClick: handleExport, disabled: loading }, /* @__PURE__ */ React151.createElement(Download, { size: 14 }), " Export CSV"), slotAt("after-actions")), (showColumnsBtn || showExportBtn || slots.some((s2) => s2.position === "after-actions" || !s2.position)) && /* @__PURE__ */ React151.createElement(
+      "button",
+      {
+        type: "button",
+        className: `dg-toolbar-toggle${mobileToolbarExpanded ? " dg-toolbar-toggle--expanded" : ""}`,
+        onClick: () => setMobileToolbarExpanded((v) => !v),
+        "aria-label": mobileToolbarExpanded ? "Hide toolbar options" : "Show all toolbar options",
+        "aria-expanded": mobileToolbarExpanded
+      },
+      /* @__PURE__ */ React151.createElement(ChevronDown, { size: 18 })
+    ));
   })())), !tOpts.hideHeader && /* @__PURE__ */ React151.createElement("div", { className: `dg-toolbar ${alignClass(toolbarContent?.align)}` }, toolbarContent?.content || ""), isGroupingActive && /* @__PURE__ */ React151.createElement("div", { className: "dg-grouping-bar" }, /* @__PURE__ */ React151.createElement("span", { className: "dg-grouping-bar-label" }, "Grouped by"), activeGroupingModel.map((gField) => {
     const col = resolvedColumns.find((c) => String(c.field) === gField || String(c.key) === gField);
     return /* @__PURE__ */ React151.createElement("div", { key: gField, className: "dg-group-chip" }, /* @__PURE__ */ React151.createElement(Layers, { size: 11 }), /* @__PURE__ */ React151.createElement("span", null, col?.header ?? col?.headerName ?? gField), !disableRowGrouping && /* @__PURE__ */ React151.createElement(

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rufous/ui",
   "private": false,
-  "version": "0.3.61",
+  "version": "0.3.62",
   "type": "module",
   "description": "Experimental: A lightweight React UI component library (Beta)",
   "style": "./dist/main.css",