@lensui/lens-table 0.1.91 → 0.1.93

package/dist/index.cjs

@@ -953,12 +953,13 @@ 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, inline = false, style, labels, onChange, onCommit, onCancel }) {
+function TextAreaEditor({ value, title, maxLength, inline = false, keepRightBorderVisible = 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`
+    "--rvg-textarea-inline-header-height": `${inlineHeaderHeight}px`,
+    "--rvg-textarea-inline-outline-right": keepRightBorderVisible ? "0px" : "-1px"
   } : style;
   const handleKeyDown = (event) => {
     event.stopPropagation();
@@ -971,7 +972,7 @@ function TextAreaEditor({ value, title, maxLength, inline = false, style, labels
       className: `rvg-native-editor rvg-textarea-editor${inline && open ? " is-inline-expanded" : ""}`,
       style: editorStyle,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        !(inline && open) && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           "input",
           {
             value,
@@ -992,7 +993,13 @@ function TextAreaEditor({ value, title, maxLength, inline = false, style, labels
               event.preventDefault();
               event.stopPropagation();
             },
-            onClick: () => setOpen((current) => inline ? !current : true),
+            onClick: () => {
+              if (!inline) {
+                setOpen(true);
+                return;
+              }
+              setOpen((current) => !current);
+            },
             children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(MultilineEditorIcon, {})
           }
         ),
@@ -1198,11 +1205,12 @@ function getSelectionOutlineBounds({
   horizontalEnd,
   verticalStart,
   verticalEnd,
-  borderWidth = 2
+  borderWidth = 2,
+  keepRightBorderVisible = false
 }) {
   return {
     left: Math.max(left - borderWidth, horizontalStart - borderWidth),
-    right: Math.min(right + 1, horizontalEnd + 1),
+    right: Math.min(right + 1, horizontalEnd + (keepRightBorderVisible ? 0 : 1)),
     top: Math.max(top - borderWidth, verticalStart - borderWidth),
     bottom: Math.min(bottom + borderWidth, verticalEnd + borderWidth)
   };
@@ -3302,7 +3310,8 @@ function TableInner({
             horizontalStart,
             horizontalEnd,
             verticalStart,
-            verticalEnd: renderHeight
+            verticalEnd: renderHeight,
+            keepRightBorderVisible: horizontalEnd === viewport.width
           });
           const left = Math.round(bounds.left);
           const right = Math.round(bounds.right);
@@ -3861,6 +3870,7 @@ function TableInner({
           title: column.editor.title ?? column.title,
           maxLength: column.editor.maxLength,
           inline: column.editor.inline,
+          keepRightBorderVisible: typeof editorStyle.left === "number" && typeof editorStyle.width === "number" && editorStyle.left + editorStyle.width >= viewport.width,
           style: editorStyle,
           labels,
           onChange: setDraft,
@@ -4856,7 +4866,8 @@ function TableInner({
       horizontalStart,
       horizontalEnd,
       verticalStart,
-      verticalEnd: renderHeight
+      verticalEnd: renderHeight,
+      keepRightBorderVisible: horizontalEnd === viewport.width
     });
     const left = Math.round(bounds.left);
     const right = Math.round(bounds.right);

package/dist/index.css

@@ -2753,23 +2753,30 @@
 .rvg-textarea-editor {
   padding-right: 24px;
 }
+.rvg-root:has(.rvg-textarea-editor.is-inline-expanded) .rvg-selection-focus {
+  display: none;
+}
 .rvg-textarea-editor.is-inline-expanded {
   z-index: 8;
-  display: grid;
+  display: block;
   height: calc(var(--rvg-textarea-inline-header-height) + 116px) !important;
   padding: 0;
-  grid-template-rows: var(--rvg-textarea-inline-header-height) minmax(0, 1fr);
-  align-items: stretch;
-  gap: 0;
-  overflow: hidden;
-  border: 2px solid var(--rvg-color-primary);
+  overflow: visible;
+  border: 0;
   background: var(--rvg-color-bg);
+  box-shadow: none;
 }
-.rvg-textarea-editor.is-inline-expanded > input {
-  width: 100%;
-  height: 100%;
-  min-height: 0;
-  padding: 0 24px 0 4px;
+.rvg-textarea-editor.is-inline-expanded::before {
+  position: absolute;
+  z-index: 1;
+  top: -2px;
+  right: var(--rvg-textarea-inline-outline-right, -1px);
+  bottom: -2px;
+  left: -2px;
+  border: 2px solid var(--rvg-color-primary);
+  content: "";
+  pointer-events: none;
+  box-sizing: border-box;
 }
 .rvg-textarea-trigger {
   position: absolute;
@@ -2802,19 +2809,20 @@
   min-width: 0;
   min-height: 0;
   margin: 0;
-  padding: 8px;
+  padding: 0 24px 8px 4px;
   resize: none;
   border: 0;
-  border-top: 1px solid var(--rvg-color-primary);
   border-radius: 0;
   outline: none;
-  background: var(--rvg-color-bg);
+  background: transparent;
   color: var(--rvg-color-text);
   font:
-    var(--rvg-font-size-body)/1.5 Inter,
+    var(--rvg-font-size-body) Inter,
     ui-sans-serif,
     system-ui,
     sans-serif;
+  line-height: var(--rvg-textarea-inline-header-height);
+  box-shadow: none;
   box-sizing: border-box;
 }
 .rvg-textarea-backdrop {

package/dist/index.js

@@ -923,12 +923,13 @@ 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, inline = false, style, labels, onChange, onCommit, onCancel }) {
+function TextAreaEditor({ value, title, maxLength, inline = false, keepRightBorderVisible = 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`
+    "--rvg-textarea-inline-header-height": `${inlineHeaderHeight}px`,
+    "--rvg-textarea-inline-outline-right": keepRightBorderVisible ? "0px" : "-1px"
   } : style;
   const handleKeyDown = (event) => {
     event.stopPropagation();
@@ -941,7 +942,7 @@ function TextAreaEditor({ value, title, maxLength, inline = false, style, labels
       className: `rvg-native-editor rvg-textarea-editor${inline && open ? " is-inline-expanded" : ""}`,
       style: editorStyle,
       children: [
-        /* @__PURE__ */ jsx7(
+        !(inline && open) && /* @__PURE__ */ jsx7(
           "input",
           {
             value,
@@ -962,7 +963,13 @@ function TextAreaEditor({ value, title, maxLength, inline = false, style, labels
               event.preventDefault();
               event.stopPropagation();
             },
-            onClick: () => setOpen((current) => inline ? !current : true),
+            onClick: () => {
+              if (!inline) {
+                setOpen(true);
+                return;
+              }
+              setOpen((current) => !current);
+            },
             children: /* @__PURE__ */ jsx7(MultilineEditorIcon, {})
           }
         ),
@@ -1168,11 +1175,12 @@ function getSelectionOutlineBounds({
   horizontalEnd,
   verticalStart,
   verticalEnd,
-  borderWidth = 2
+  borderWidth = 2,
+  keepRightBorderVisible = false
 }) {
   return {
     left: Math.max(left - borderWidth, horizontalStart - borderWidth),
-    right: Math.min(right + 1, horizontalEnd + 1),
+    right: Math.min(right + 1, horizontalEnd + (keepRightBorderVisible ? 0 : 1)),
     top: Math.max(top - borderWidth, verticalStart - borderWidth),
     bottom: Math.min(bottom + borderWidth, verticalEnd + borderWidth)
   };
@@ -3272,7 +3280,8 @@ function TableInner({
             horizontalStart,
             horizontalEnd,
             verticalStart,
-            verticalEnd: renderHeight
+            verticalEnd: renderHeight,
+            keepRightBorderVisible: horizontalEnd === viewport.width
           });
           const left = Math.round(bounds.left);
           const right = Math.round(bounds.right);
@@ -3831,6 +3840,7 @@ function TableInner({
           title: column.editor.title ?? column.title,
           maxLength: column.editor.maxLength,
           inline: column.editor.inline,
+          keepRightBorderVisible: typeof editorStyle.left === "number" && typeof editorStyle.width === "number" && editorStyle.left + editorStyle.width >= viewport.width,
           style: editorStyle,
           labels,
           onChange: setDraft,
@@ -4826,7 +4836,8 @@ function TableInner({
       horizontalStart,
       horizontalEnd,
       verticalStart,
-      verticalEnd: renderHeight
+      verticalEnd: renderHeight,
+      keepRightBorderVisible: horizontalEnd === viewport.width
     });
     const left = Math.round(bounds.left);
     const right = Math.round(bounds.right);

package/package.json

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