twico-ui 1.22.0 → 1.22.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.22.2](https://github.com/EncryptionL/twico-ui/compare/v1.22.1...v1.22.2) (2026-07-29)
+
+
+### Bug Fixes
+
+* **datatable:** reset optimistic rowReorder overlay when rows change in server mode ([#296](https://github.com/EncryptionL/twico-ui/issues/296)) ([600cb16](https://github.com/EncryptionL/twico-ui/commit/600cb16099faf0f5498c11430773d8375dc593ac))
+
+## [1.22.1](https://github.com/EncryptionL/twico-ui/compare/v1.22.0...v1.22.1) (2026-07-29)
+
+
+### Bug Fixes
+
+* **datatable:** keep the Filters popover position:fixed (regression from [#292](https://github.com/EncryptionL/twico-ui/issues/292)) ([0d53d05](https://github.com/EncryptionL/twico-ui/commit/0d53d057e861f5327af7b43730b3f143a937205e)), closes [#294](https://github.com/EncryptionL/twico-ui/issues/294)
+* **inputs:** portaled dropdown menu re-tracks its trigger's resize ([b6e6843](https://github.com/EncryptionL/twico-ui/commit/b6e6843f2345f60db0719f7e12bef504393e3189)), closes [#292](https://github.com/EncryptionL/twico-ui/issues/292)
+
 # [1.22.0](https://github.com/EncryptionL/twico-ui/compare/v1.21.1...v1.22.0) (2026-07-29)
 
 

package/dist/index.cjs

@@ -5345,9 +5345,16 @@ function ColorPicker({
     const onMove = () => place();
     window.addEventListener("scroll", onMove, true);
     window.addEventListener("resize", onMove);
+    let ro;
+    const rt = triggerRef.current;
+    if (rt && typeof ResizeObserver !== "undefined") {
+      ro = new ResizeObserver(onMove);
+      ro.observe(rt);
+    }
     return () => {
       window.removeEventListener("scroll", onMove, true);
       window.removeEventListener("resize", onMove);
+      ro?.disconnect();
     };
   }, [open, place]);
   const labelId = React51__namespace.default.useId();
@@ -5807,9 +5814,16 @@ function Combobox({
     const onMove = () => place();
     window.addEventListener("scroll", onMove, true);
     window.addEventListener("resize", onMove);
+    let ro;
+    const rt = controlRef.current;
+    if (rt && typeof ResizeObserver !== "undefined") {
+      ro = new ResizeObserver(onMove);
+      ro.observe(rt);
+    }
     return () => {
       window.removeEventListener("scroll", onMove, true);
       window.removeEventListener("resize", onMove);
+      ro?.disconnect();
     };
   }, [open, portal, place]);
   React51__namespace.default.useEffect(() => {
@@ -6634,9 +6648,16 @@ function Select({
     const onMove = () => place();
     window.addEventListener("scroll", onMove, true);
     window.addEventListener("resize", onMove);
+    let ro;
+    const rt = triggerRef.current;
+    if (rt && typeof ResizeObserver !== "undefined") {
+      ro = new ResizeObserver(onMove);
+      ro.observe(rt);
+    }
     return () => {
       window.removeEventListener("scroll", onMove, true);
       window.removeEventListener("resize", onMove);
+      ro?.disconnect();
     };
   }, [open, portal, place]);
   React51__namespace.default.useEffect(() => {
@@ -7463,9 +7484,16 @@ function MultiSelect({
     const onMove = () => place();
     window.addEventListener("scroll", onMove, true);
     window.addEventListener("resize", onMove);
+    let ro;
+    const rt = controlRef.current;
+    if (rt && typeof ResizeObserver !== "undefined") {
+      ro = new ResizeObserver(onMove);
+      ro.observe(rt);
+    }
     return () => {
       window.removeEventListener("scroll", onMove, true);
       window.removeEventListener("resize", onMove);
+      ro?.disconnect();
     };
   }, [open, portal, place]);
   React51__namespace.default.useEffect(() => {
@@ -8529,7 +8557,10 @@ th.twc-dt__rownum .twc-dt__th-inner { padding-inline: 8px; gap: 2px; justify-con
    cascade \u2014 user drag (-usr) > #289 measured auto-fit (-fit) > 118px fallback \u2014 entirely in clamp(), so
    neither writer reads the other (reset = remove the -usr var and auto-fit instantly re-wins). */
 .twc-dt__filters {
-  position: relative;
+  /* #294: do NOT set 'position' here \u2014 this element also carries .twc-dt__pop (position: fixed), and an
+     equal-specificity 'position: relative' defined later would clobber it, dropping the popover into normal
+     flow below the table. The panel stays position: fixed, which already anchors the absolutely-positioned
+     .twc-dt__pop-grip; per-field handles anchor to their own position: relative .twc-dt__f-* fields. */
   width: var(--twc-dt-panel-w, 580px); max-width: calc(100vw - 32px);
   height: var(--twc-dt-panel-h, auto); max-height: calc(100vh - 32px);
   display: flex; flex-direction: column;
@@ -9268,6 +9299,9 @@ function Datatable({
   const [headH, setHeadH] = React51__namespace.default.useState(41);
   const theadRef = React51__namespace.default.useRef(null);
   const [rowOrder, setRowOrder] = React51__namespace.default.useState(null);
+  React51__namespace.default.useEffect(() => {
+    if (serverMode) setRowOrder(null);
+  }, [rows, serverMode]);
   const [rowHeights, setRowHeights] = React51__namespace.default.useState({});
   const [rowDrag, setRowDrag] = React51__namespace.default.useState({ from: null, over: null, after: false });
   const [rowGrab, setRowGrab] = React51__namespace.default.useState(null);
@@ -12606,9 +12640,16 @@ function DatePicker({
     const onMove = () => place();
     window.addEventListener("scroll", onMove, true);
     window.addEventListener("resize", onMove);
+    let ro;
+    const rt = triggerRef.current;
+    if (rt && typeof ResizeObserver !== "undefined") {
+      ro = new ResizeObserver(onMove);
+      ro.observe(rt);
+    }
     return () => {
       window.removeEventListener("scroll", onMove, true);
       window.removeEventListener("resize", onMove);
+      ro?.disconnect();
     };
   }, [open, place]);
   React51__namespace.default.useEffect(() => {
@@ -13150,9 +13191,16 @@ function DateRangePicker({
     const onMove = () => place();
     window.addEventListener("scroll", onMove, true);
     window.addEventListener("resize", onMove);
+    let ro;
+    const rt = triggerRef.current;
+    if (rt && typeof ResizeObserver !== "undefined") {
+      ro = new ResizeObserver(onMove);
+      ro.observe(rt);
+    }
     return () => {
       window.removeEventListener("scroll", onMove, true);
       window.removeEventListener("resize", onMove);
+      ro?.disconnect();
     };
   }, [open, place]);
   React51__namespace.default.useEffect(() => {
@@ -13703,9 +13751,16 @@ function TimePicker({
     const onMove = () => place();
     window.addEventListener("scroll", onMove, true);
     window.addEventListener("resize", onMove);
+    let ro;
+    const rt = triggerRef.current;
+    if (rt && typeof ResizeObserver !== "undefined") {
+      ro = new ResizeObserver(onMove);
+      ro.observe(rt);
+    }
     return () => {
       window.removeEventListener("scroll", onMove, true);
       window.removeEventListener("resize", onMove);
+      ro?.disconnect();
     };
   }, [open, place]);
   React51__namespace.default.useEffect(() => {