twico-ui 1.37.0 → 1.37.2

package/CHANGELOG.md

@@ -2,6 +2,21 @@
 
 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.37.2](https://github.com/EncryptionL/twico-ui/compare/v1.37.1...v1.37.2) (2026-09-18)
+
+
+### Bug Fixes
+
+* **datatable,code:** clipboard paste/copy work outside a secure context ([#380](https://github.com/EncryptionL/twico-ui/issues/380)) ([29aa913](https://github.com/EncryptionL/twico-ui/commit/29aa91382df6df40333ec49132b8883ec6f56b9f)), closes [#343](https://github.com/EncryptionL/twico-ui/issues/343)
+* **datatable,code:** harden [#380](https://github.com/EncryptionL/twico-ui/issues/380) clipboard fix (review follow-ups) ([849c9f8](https://github.com/EncryptionL/twico-ui/commit/849c9f88d331e38d5fd1faf41401b8424e904541))
+
+## [1.37.1](https://github.com/EncryptionL/twico-ui/compare/v1.37.0...v1.37.1) (2026-09-14)
+
+
+### Bug Fixes
+
+* **image:** let explicit width/height win over fit's container fill ([#378](https://github.com/EncryptionL/twico-ui/issues/378)) ([770823d](https://github.com/EncryptionL/twico-ui/commit/770823ddced42288e623bb00e8f92886bd01d373))
+
 # [1.37.0](https://github.com/EncryptionL/twico-ui/compare/v1.36.1...v1.37.0) (2026-09-11)
 
 

package/dist/index.cjs

@@ -325,6 +325,8 @@ var Image = React51__namespace.default.forwardRef(function Image2({
   className = "",
   style,
   onError,
+  width,
+  height,
   ...rest
 }, ref) {
   const __twcStyles = useScopedStyles("twc-image-styles", IMAGE_CSS);
@@ -334,6 +336,14 @@ var Image = React51__namespace.default.forwardRef(function Image2({
     objectFit: fit,
     borderRadius: radius ? `var(--radius-${radius})` : void 0,
     aspectRatio,
+    // #378: only when `fit` is set, also emit explicit width/height as inline style — that's the sole case
+    // where the `[data-fit] { width/height: 100% }` rule overrides the width/height ATTRIBUTES (a
+    // presentational attr loses to a real CSS rule), silently sizing `<Image width height fit>` to the
+    // container/intrinsic size. Inline style beats that rule so the props mean what they say (object-fit
+    // still crops within the box), placed before `...style` so a caller's own `style` still wins. Gated on
+    // `fit` so the no-fit path stays attribute-only — a consumer's own CSS/className can still override it.
+    ...fit && width != null ? { width } : null,
+    ...fit && height != null ? { height } : null,
     ...style
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -347,6 +357,8 @@ var Image = React51__namespace.default.forwardRef(function Image2({
         loading,
         className: `twc-image ${className}`.trim(),
         "data-fit": fit || void 0,
+        width,
+        height,
         style: s,
         onError: (e) => {
           onError?.(e);
@@ -10655,8 +10667,10 @@ function Datatable({
         return;
       }
       if (k === "v") {
-        e.preventDefault();
-        pasteSelection();
+        if (typeof navigator !== "undefined" && navigator.clipboard && navigator.clipboard.readText) {
+          e.preventDefault();
+          pasteSelection();
+        }
         return;
       }
     }
@@ -10876,19 +10890,19 @@ function Datatable({
   const copyTypeOf = (col) => col && col.copyType != null ? col.copyType : col && col.type === "number" ? "number" : "text";
   const writeClipboard = (text) => {
     const execFallback = () => {
+      if (typeof document === "undefined") return;
+      const ta = document.createElement("textarea");
+      ta.value = text;
+      ta.style.position = "fixed";
+      ta.style.opacity = "0";
+      document.body.appendChild(ta);
+      ta.focus();
+      ta.select();
       try {
-        if (typeof document !== "undefined") {
-          const ta = document.createElement("textarea");
-          ta.value = text;
-          ta.style.position = "fixed";
-          ta.style.opacity = "0";
-          document.body.appendChild(ta);
-          ta.focus();
-          ta.select();
-          document.execCommand("copy");
-          document.body.removeChild(ta);
-        }
+        document.execCommand("copy");
       } catch {
+      } finally {
+        if (ta.parentNode) ta.parentNode.removeChild(ta);
       }
     };
     try {
@@ -10959,19 +10973,8 @@ function Datatable({
       announceClip(`Copied ${n} cell${n === 1 ? "" : "s"}`, cellRect);
     }
   };
-  const pasteSelection = async () => {
-    if (!cellRect) return;
-    let text = null;
-    try {
-      if (typeof navigator !== "undefined" && navigator.clipboard && navigator.clipboard.readText) text = await navigator.clipboard.readText();
-    } catch {
-      setClipboardMsg("Paste unavailable \u2014 clipboard permission denied");
-      return;
-    }
-    if (text == null) {
-      setClipboardMsg("Nothing to paste");
-      return;
-    }
+  const applyPastedText = (text) => {
+    if (text == null || !cellRect) return;
     const inApp = clipboardRef.current && clipboardRef.current.tsv === text ? clipboardRef.current : null;
     let matrix;
     if (inApp) matrix = inApp.matrix;
@@ -11016,6 +11019,31 @@ function Datatable({
     const pasteRect = written ? { r0: cellRect.r0, c0: cellRect.c0, r1: Math.min(cellRect.r0 + matrix.length - 1, leafRows.length - 1), c1: Math.min(cellRect.c0 + maxCols - 1, ordered.length - 1) } : null;
     announceClip(`Pasted ${written} cell${written === 1 ? "" : "s"}${skipped ? `, ${skipped} skipped (incompatible column)` : ""}`, pasteRect);
   };
+  const pasteSelection = async () => {
+    if (!cellRect) return;
+    let text = null;
+    try {
+      if (typeof navigator !== "undefined" && navigator.clipboard && navigator.clipboard.readText) text = await navigator.clipboard.readText();
+    } catch {
+      setClipboardMsg("Paste unavailable \u2014 clipboard permission denied");
+      return;
+    }
+    if (text == null) {
+      setClipboardMsg("Nothing to paste");
+      return;
+    }
+    applyPastedText(text);
+  };
+  const onGridPaste = (e) => {
+    if (e.target.closest("input, textarea, select, [contenteditable='true']") || editing) return;
+    if (!e.target.closest(".twc-dt__td[data-r]")) return;
+    if (!(enableClipboard && selectionMode === "cell") || !cellRect) return;
+    if (typeof navigator !== "undefined" && navigator.clipboard && navigator.clipboard.readText) return;
+    const text = e.clipboardData ? e.clipboardData.getData("text/plain") : null;
+    if (text == null || text === "") return;
+    e.preventDefault();
+    applyPastedText(text);
+  };
   React51__namespace.default.useEffect(() => {
     if (!editing) return;
     const onDown = (e) => {
@@ -12031,6 +12059,7 @@ function Datatable({
             "aria-activedescendant": activeCellId,
             "aria-busy": loading || void 0,
             onKeyDown: onGridKeyDown,
+            onPaste: onGridPaste,
             children: [
               /* @__PURE__ */ jsxRuntime.jsx("thead", { ref: theadRef, children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { role: "row", "aria-rowindex": 1, children: [
                 hasExpandCol ? /* @__PURE__ */ jsxRuntime.jsx("th", { className: "twc-dt__th twc-dt__expand-cell", role: "columnheader", "aria-label": "Expand", "data-pin": "left", "data-pin-edge": checkboxSelection || showRowNum || visLeft.length ? void 0 : "left", style: { insetInlineStart: 0, width: EXP_W, minWidth: EXP_W } }) : null,
@@ -19105,14 +19134,36 @@ function Code({
   const timerRef = React51__namespace.default.useRef(null);
   React51__namespace.default.useEffect(() => () => clearTimeout(timerRef.current), []);
   const doCopy = () => {
-    if (typeof navigator === "undefined" || !navigator.clipboard) return;
     const text = typeof children === "string" ? children : rootRef.current?.textContent ?? "";
-    navigator.clipboard.writeText(text).then(() => {
+    const flash = () => {
       setCopied(true);
       clearTimeout(timerRef.current);
       timerRef.current = setTimeout(() => setCopied(false), 2e3);
-    }).catch(() => {
-    });
+    };
+    const execFallback = () => {
+      if (typeof document === "undefined") return;
+      const ta = document.createElement("textarea");
+      ta.value = text;
+      ta.style.position = "fixed";
+      ta.style.opacity = "0";
+      document.body.appendChild(ta);
+      ta.focus();
+      ta.select();
+      try {
+        if (document.execCommand("copy")) flash();
+      } catch {
+      } finally {
+        if (ta.parentNode) ta.parentNode.removeChild(ta);
+      }
+    };
+    try {
+      if (typeof navigator !== "undefined" && navigator.clipboard && navigator.clipboard.writeText) {
+        navigator.clipboard.writeText(text).then(flash).catch(execFallback);
+        return;
+      }
+    } catch {
+    }
+    execFallback();
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(Tag2, { ref: rootRef, className: `twc-code ${className}`.trim(), "data-block": block || void 0, ...rest, children: [
     __twcStyles,