@lensui/lens-table 0.1.90 → 0.1.92

package/dist/index.cjs

@@ -953,47 +953,59 @@ function TextEditor({ value, type, min, max, integer = false, style, labels, onC
 var import_react6 = require("react");
 var import_react_dom = require("react-dom");
 var import_jsx_runtime7 = require("react/jsx-runtime");
-function TextAreaEditor({ value, title, maxLength, style, labels, onChange, onCommit, onCancel }) {
+function TextAreaEditor({ value, title, maxLength, inline = false, style, labels, onChange, onCommit, onCancel }) {
   const [open, setOpen] = (0, import_react6.useState)(false);
+  const inlineHeaderHeight = typeof style.height === "number" ? style.height : 34;
+  const editorStyle = inline && open ? {
+    ...style,
+    "--rvg-textarea-inline-header-height": `${inlineHeaderHeight}px`
+  } : style;
   const handleKeyDown = (event) => {
     event.stopPropagation();
     if (event.key === "Enter") onCommit(value);
     if (event.key === "Escape") onCancel();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "rvg-native-editor rvg-textarea-editor", style, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-      "input",
-      {
-        value,
-        autoFocus: true,
-        maxLength,
-        onChange: (event) => onChange(event.target.value),
-        onKeyDown: handleKeyDown
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-      "button",
-      {
-        type: "button",
-        className: "rvg-textarea-trigger",
-        "aria-label": title,
-        onPointerDown: (event) => {
-          event.preventDefault();
-          event.stopPropagation();
-        },
-        onClick: () => setOpen(true),
-        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(MultilineEditorIcon, {})
-      }
-    ),
-    open && (0, import_react_dom.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "rvg-textarea-backdrop", role: "presentation", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("section", { className: "rvg-textarea-dialog", role: "dialog", "aria-modal": "true", "aria-label": title, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("header", { children: title }),
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    "div",
+    {
+      className: `rvg-native-editor rvg-textarea-editor${inline && open ? " is-inline-expanded" : ""}`,
+      style: editorStyle,
+      children: [
+        !(inline && open) && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "input",
+          {
+            value,
+            autoFocus: true,
+            maxLength,
+            onChange: (event) => onChange(event.target.value),
+            onKeyDown: handleKeyDown
+          }
+        ),
         /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "button",
+          {
+            type: "button",
+            className: "rvg-textarea-trigger",
+            "aria-label": title,
+            "aria-expanded": inline ? open : void 0,
+            onPointerDown: (event) => {
+              event.preventDefault();
+              event.stopPropagation();
+            },
+            onClick: () => setOpen((current) => inline ? !current : true),
+            children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(MultilineEditorIcon, {})
+          }
+        ),
+        open && inline && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           "textarea",
           {
+            className: "rvg-textarea-inline",
+            "aria-label": title,
+            "data-rvg-preserve-edit": true,
             value,
             autoFocus: true,
             maxLength,
+            onPointerDown: (event) => event.stopPropagation(),
             onChange: (event) => onChange(event.target.value),
             onKeyDown: (event) => {
               event.stopPropagation();
@@ -1002,11 +1014,30 @@ function TextAreaEditor({ value, title, maxLength, style, labels, onChange, onCo
             }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("footer", { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", onClick: () => onCommit(value), children: labels.confirm }) })
-      ] }) }),
-      document.body
-    )
-  ] });
+        open && !inline && (0, import_react_dom.createPortal)(
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "rvg-textarea-backdrop", role: "presentation", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("section", { className: "rvg-textarea-dialog", role: "dialog", "aria-modal": "true", "aria-label": title, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("header", { children: title }),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              "textarea",
+              {
+                value,
+                autoFocus: true,
+                maxLength,
+                onChange: (event) => onChange(event.target.value),
+                onKeyDown: (event) => {
+                  event.stopPropagation();
+                  if ((event.metaKey || event.ctrlKey) && event.key === "Enter") onCommit(value);
+                  if (event.key === "Escape") setOpen(false);
+                }
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("footer", { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", onClick: () => onCommit(value), children: labels.confirm }) })
+          ] }) }),
+          document.body
+        )
+      ]
+    }
+  );
 }
 
 // src/core/format.ts
@@ -3829,6 +3860,7 @@ function TableInner({
           value: draft,
           title: column.editor.title ?? column.title,
           maxLength: column.editor.maxLength,
+          inline: column.editor.inline,
           style: editorStyle,
           labels,
           onChange: setDraft,

package/dist/index.css

@@ -2753,6 +2753,15 @@
 .rvg-textarea-editor {
   padding-right: 24px;
 }
+.rvg-textarea-editor.is-inline-expanded {
+  z-index: 8;
+  display: block;
+  height: calc(var(--rvg-textarea-inline-header-height) + 116px) !important;
+  padding: 0;
+  overflow: hidden;
+  border: 2px solid var(--rvg-color-primary);
+  background: var(--rvg-color-bg);
+}
 .rvg-textarea-trigger {
   position: absolute;
   top: 50%;
@@ -2769,11 +2778,35 @@
   cursor: pointer;
   transform: translateY(-50%);
 }
+.rvg-textarea-editor.is-inline-expanded .rvg-textarea-trigger {
+  top: calc(var(--rvg-textarea-inline-header-height) / 2);
+}
 .rvg-multiline-icon {
   width: 13px;
   height: 13px;
   fill: currentColor;
 }
+.rvg-textarea-inline {
+  display: block;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+  margin: 0;
+  padding: 8px 24px 8px 4px;
+  resize: none;
+  border: 0;
+  border-radius: 0;
+  outline: none;
+  background: transparent;
+  color: var(--rvg-color-text);
+  font:
+    var(--rvg-font-size-body)/1.5 Inter,
+    ui-sans-serif,
+    system-ui,
+    sans-serif;
+  box-sizing: border-box;
+}
 .rvg-textarea-backdrop {
   position: fixed;
   z-index: 1200;

package/dist/index.d.cts

@@ -218,6 +218,8 @@ interface GridColumn<Row> {
         type: 'textarea';
         title?: string;
         maxLength?: number;
+        /** Expands one integrated multiline editor below the active cell instead of opening a modal dialog. */
+        inline?: boolean;
     } | {
         type: 'date' | 'time' | 'date-time' | 'year' | 'month' | 'date-range' | 'time-range' | 'date-time-range';
         format?: string;

package/dist/index.d.ts

@@ -218,6 +218,8 @@ interface GridColumn<Row> {
         type: 'textarea';
         title?: string;
         maxLength?: number;
+        /** Expands one integrated multiline editor below the active cell instead of opening a modal dialog. */
+        inline?: boolean;
     } | {
         type: 'date' | 'time' | 'date-time' | 'year' | 'month' | 'date-range' | 'time-range' | 'date-time-range';
         format?: string;

package/dist/index.js

@@ -923,47 +923,59 @@ function TextEditor({ value, type, min, max, integer = false, style, labels, onC
 import { useState as useState4 } from "react";
 import { createPortal } from "react-dom";
 import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
-function TextAreaEditor({ value, title, maxLength, style, labels, onChange, onCommit, onCancel }) {
+function TextAreaEditor({ value, title, maxLength, inline = false, style, labels, onChange, onCommit, onCancel }) {
   const [open, setOpen] = useState4(false);
+  const inlineHeaderHeight = typeof style.height === "number" ? style.height : 34;
+  const editorStyle = inline && open ? {
+    ...style,
+    "--rvg-textarea-inline-header-height": `${inlineHeaderHeight}px`
+  } : style;
   const handleKeyDown = (event) => {
     event.stopPropagation();
     if (event.key === "Enter") onCommit(value);
     if (event.key === "Escape") onCancel();
   };
-  return /* @__PURE__ */ jsxs7("div", { className: "rvg-native-editor rvg-textarea-editor", style, children: [
-    /* @__PURE__ */ jsx7(
-      "input",
-      {
-        value,
-        autoFocus: true,
-        maxLength,
-        onChange: (event) => onChange(event.target.value),
-        onKeyDown: handleKeyDown
-      }
-    ),
-    /* @__PURE__ */ jsx7(
-      "button",
-      {
-        type: "button",
-        className: "rvg-textarea-trigger",
-        "aria-label": title,
-        onPointerDown: (event) => {
-          event.preventDefault();
-          event.stopPropagation();
-        },
-        onClick: () => setOpen(true),
-        children: /* @__PURE__ */ jsx7(MultilineEditorIcon, {})
-      }
-    ),
-    open && createPortal(
-      /* @__PURE__ */ jsx7("div", { className: "rvg-textarea-backdrop", role: "presentation", children: /* @__PURE__ */ jsxs7("section", { className: "rvg-textarea-dialog", role: "dialog", "aria-modal": "true", "aria-label": title, children: [
-        /* @__PURE__ */ jsx7("header", { children: title }),
+  return /* @__PURE__ */ jsxs7(
+    "div",
+    {
+      className: `rvg-native-editor rvg-textarea-editor${inline && open ? " is-inline-expanded" : ""}`,
+      style: editorStyle,
+      children: [
+        !(inline && open) && /* @__PURE__ */ jsx7(
+          "input",
+          {
+            value,
+            autoFocus: true,
+            maxLength,
+            onChange: (event) => onChange(event.target.value),
+            onKeyDown: handleKeyDown
+          }
+        ),
         /* @__PURE__ */ jsx7(
+          "button",
+          {
+            type: "button",
+            className: "rvg-textarea-trigger",
+            "aria-label": title,
+            "aria-expanded": inline ? open : void 0,
+            onPointerDown: (event) => {
+              event.preventDefault();
+              event.stopPropagation();
+            },
+            onClick: () => setOpen((current) => inline ? !current : true),
+            children: /* @__PURE__ */ jsx7(MultilineEditorIcon, {})
+          }
+        ),
+        open && inline && /* @__PURE__ */ jsx7(
           "textarea",
           {
+            className: "rvg-textarea-inline",
+            "aria-label": title,
+            "data-rvg-preserve-edit": true,
             value,
             autoFocus: true,
             maxLength,
+            onPointerDown: (event) => event.stopPropagation(),
             onChange: (event) => onChange(event.target.value),
             onKeyDown: (event) => {
               event.stopPropagation();
@@ -972,11 +984,30 @@ function TextAreaEditor({ value, title, maxLength, style, labels, onChange, onCo
             }
           }
         ),
-        /* @__PURE__ */ jsx7("footer", { children: /* @__PURE__ */ jsx7("button", { type: "button", onClick: () => onCommit(value), children: labels.confirm }) })
-      ] }) }),
-      document.body
-    )
-  ] });
+        open && !inline && createPortal(
+          /* @__PURE__ */ jsx7("div", { className: "rvg-textarea-backdrop", role: "presentation", children: /* @__PURE__ */ jsxs7("section", { className: "rvg-textarea-dialog", role: "dialog", "aria-modal": "true", "aria-label": title, children: [
+            /* @__PURE__ */ jsx7("header", { children: title }),
+            /* @__PURE__ */ jsx7(
+              "textarea",
+              {
+                value,
+                autoFocus: true,
+                maxLength,
+                onChange: (event) => onChange(event.target.value),
+                onKeyDown: (event) => {
+                  event.stopPropagation();
+                  if ((event.metaKey || event.ctrlKey) && event.key === "Enter") onCommit(value);
+                  if (event.key === "Escape") setOpen(false);
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx7("footer", { children: /* @__PURE__ */ jsx7("button", { type: "button", onClick: () => onCommit(value), children: labels.confirm }) })
+          ] }) }),
+          document.body
+        )
+      ]
+    }
+  );
 }
 
 // src/core/format.ts
@@ -3799,6 +3830,7 @@ function TableInner({
           value: draft,
           title: column.editor.title ?? column.title,
           maxLength: column.editor.maxLength,
+          inline: column.editor.inline,
           style: editorStyle,
           labels,
           onChange: setDraft,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lensui/lens-table",
-  "version": "0.1.90",
+  "version": "0.1.92",
   "description": "A lightweight, canvas-rendered React table component for LensUI.",
   "type": "module",
   "main": "./dist/index.cjs",