twico-ui 1.16.0 → 1.17.1

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 All notable changes to Twico UI are documented here (newest first). This file is generated automatically on each release by [semantic-release](https://semantic-release.gitbook.io/) from [Conventional Commits](https://www.conventionalcommits.org/) — do not edit it by hand. The same notes appear on each [GitHub Release](https://github.com/EncryptionL/twico-ui/releases).
 
+## [1.17.1](https://github.com/EncryptionL/twico-ui/compare/v1.17.0...v1.17.1) (2026-07-15)
+
+
+### Bug Fixes
+
+* **datatable:** batch editor survives portaled dropdowns + stands alone ([#249](https://github.com/EncryptionL/twico-ui/issues/249), [#250](https://github.com/EncryptionL/twico-ui/issues/250)) ([1b5ad91](https://github.com/EncryptionL/twico-ui/commit/1b5ad916f3a61e34f339a5a51e21bff06680cf62)), closes [#244](https://github.com/EncryptionL/twico-ui/issues/244) [#247](https://github.com/EncryptionL/twico-ui/issues/247) [#244](https://github.com/EncryptionL/twico-ui/issues/244)
+
+# [1.17.0](https://github.com/EncryptionL/twico-ui/compare/v1.16.0...v1.17.0) (2026-07-15)
+
+
+### Features
+
+* **datatable:** batch action anchorEl + renderBatchEditCell ([#246](https://github.com/EncryptionL/twico-ui/issues/246), [#247](https://github.com/EncryptionL/twico-ui/issues/247)) ([1c84dca](https://github.com/EncryptionL/twico-ui/commit/1c84dcaa7da1d7e9f3edb7481bd1e9ad2671639f)), closes [#236](https://github.com/EncryptionL/twico-ui/issues/236)
+
 # [1.16.0](https://github.com/EncryptionL/twico-ui/compare/v1.15.1...v1.16.0) (2026-07-15)
 
 

package/dist/index.cjs

@@ -10059,6 +10059,7 @@ function Datatable({
     [cols, editMode, batchEditKey]
     // eslint-disable-line react-hooks/exhaustive-deps
   );
+  const hasBatchEditor = showBatchEdit && batchEditableCols.length > 0;
   const [batchEdit, setBatchEdit] = React51__namespace.default.useState(null);
   const [batchEditPos, openBatchEdit, closeBatchEdit] = useFloating();
   function openBatchEditor(el) {
@@ -10072,7 +10073,7 @@ function Datatable({
       closeBatchEdit();
     };
     const onDown = (e) => {
-      if (!e.target.closest(".twc-dt__pop") && !e.target.closest(".twc-dt__batch")) close();
+      if (!e.target.closest(".twc-dt__pop") && !e.target.closest(".twc-dt__batch") && !e.target.closest(".twc-pop")) close();
     };
     const onKey = (e) => {
       if (e.key === "Escape") close();
@@ -10485,14 +10486,14 @@ function Datatable({
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `twc-dt ${className}`, ref: rootRef, "data-density": density, "data-resizing": resizing || void 0, ...rest, children: [
     __twcStyles,
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-dt__toolbar", "data-compact": compact || void 0, children: [
-      batchActions.length && selected.size > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-dt__batch", children: [
+      (batchActions.length || hasBatchEditor) && selected.size > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-dt__batch", children: [
         /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "twc-dt__batch-x", onClick: clearSelection, "aria-label": "Clear selection", children: /* @__PURE__ */ jsxRuntime.jsx(Svg, { d: I.x }) }),
         /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "twc-dt__batch-count", children: [
           selected.size,
           " selected"
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-dt__batch-actions", children: [
-          showBatchEdit && batchEditableCols.length ? /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", className: "twc-dt__batch-btn", onClick: (e) => openBatchEditor(e.currentTarget), children: [
+          hasBatchEditor ? /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", className: "twc-dt__batch-btn", onClick: (e) => openBatchEditor(e.currentTarget), children: [
             /* @__PURE__ */ jsxRuntime.jsx(Svg, { d: I.pencil }),
             "Edit"
           ] }) : null,
@@ -10503,7 +10504,7 @@ function Datatable({
               className: "twc-dt__batch-btn",
               "data-danger": a.danger || void 0,
               disabled: a.disabled,
-              onClick: () => a.onClick?.([...selected], selectedRows, clearSelection),
+              onClick: (e) => a.onClick?.([...selected], selectedRows, clearSelection, { anchorEl: e.currentTarget }),
               children: [
                 a.icon,
                 a.label
@@ -11019,7 +11020,11 @@ function Datatable({
           const opts = c.valueOptions ? c.valueOptions.map((o) => typeof o === "string" ? { value: o, label: o } : o) : null;
           return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-dt__be-row", children: [
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-dt__be-name", title: String(c.headerName ?? c.field), children: c.headerName }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-dt__be-ctl", children: opts ? /* @__PURE__ */ jsxRuntime.jsx(
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-dt__be-ctl", children: c.renderBatchEditCell ? c.renderBatchEditCell({
+              value: batchEdit.values[c.field],
+              field: c.field,
+              commit: (v) => setBatchEdit((b) => ({ ...b, values: { ...b.values, [c.field]: v } }))
+            }) : opts ? /* @__PURE__ */ jsxRuntime.jsx(
               Select,
               {
                 size: "sm",