twico-ui 1.22.0 → 1.22.2

package/dist/index.d.cts

@@ -1953,7 +1953,10 @@ interface DatatableProps<T = any> extends Omit<React.HTMLAttributes<HTMLDivEleme
   rowReorder?: boolean;
   /** Enable drag-to-resize row height (handle on the row's bottom edge). @default false */
   rowResize?: boolean;
-  /** Called with the new array of row keys after a drag-reorder. */
+  /** Called with the new array of row keys after a drag-reorder. In `serverMode` the drag order is
+   *  an optimistic overlay: persist the keys, then hand back a new `rows` prop — the overlay clears on
+   *  any `rows` change, so a rejected reorder reverts (reload the authoritative order) and a
+   *  server-corrected order reflects, both without remounting. */
   onRowOrderChange?: (keys: Array<string | number>) => void;
   /** Initial pivot model (seeds the toolbar **Pivot** panel, which the user can edit live): aggregate `values` across `rows` (row groups) × `columns` (nested column groups). */
   pivot?: {

package/dist/index.d.ts

@@ -1953,7 +1953,10 @@ interface DatatableProps<T = any> extends Omit<React.HTMLAttributes<HTMLDivEleme
   rowReorder?: boolean;
   /** Enable drag-to-resize row height (handle on the row's bottom edge). @default false */
   rowResize?: boolean;
-  /** Called with the new array of row keys after a drag-reorder. */
+  /** Called with the new array of row keys after a drag-reorder. In `serverMode` the drag order is
+   *  an optimistic overlay: persist the keys, then hand back a new `rows` prop — the overlay clears on
+   *  any `rows` change, so a rejected reorder reverts (reload the authoritative order) and a
+   *  server-corrected order reflects, both without remounting. */
   onRowOrderChange?: (keys: Array<string | number>) => void;
   /** Initial pivot model (seeds the toolbar **Pivot** panel, which the user can edit live): aggregate `values` across `rows` (row groups) × `columns` (nested column groups). */
   pivot?: {

package/dist/index.mjs

@@ -5324,9 +5324,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__default.useId();
@@ -5786,9 +5793,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__default.useEffect(() => {
@@ -6613,9 +6627,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__default.useEffect(() => {
@@ -7442,9 +7463,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__default.useEffect(() => {
@@ -8508,7 +8536,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;
@@ -9247,6 +9278,9 @@ function Datatable({
   const [headH, setHeadH] = React51__default.useState(41);
   const theadRef = React51__default.useRef(null);
   const [rowOrder, setRowOrder] = React51__default.useState(null);
+  React51__default.useEffect(() => {
+    if (serverMode) setRowOrder(null);
+  }, [rows, serverMode]);
   const [rowHeights, setRowHeights] = React51__default.useState({});
   const [rowDrag, setRowDrag] = React51__default.useState({ from: null, over: null, after: false });
   const [rowGrab, setRowGrab] = React51__default.useState(null);
@@ -12585,9 +12619,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__default.useEffect(() => {
@@ -13129,9 +13170,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__default.useEffect(() => {
@@ -13682,9 +13730,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__default.useEffect(() => {