npm - @multiplatform.one/table - Versions diffs - 7.29.0 → 7.29.1 - Mend

@multiplatform.one/table 7.29.0 → 7.29.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (17) hide show

package/src/components/TableInput/RowDetailEditor.tsx CHANGED Viewed

@@ -7,6 +7,10 @@
  * copy of the row seeded on open. "Done" and an outside click commit the
  * draft once; "Cancel" and Escape discard it. A read-only row opens for
  * viewing with a single "Close".
+ *
+ * The pencil is the dialog's `Dialog.Trigger`: tamagui's modal close returns
+ * focus to the trigger ref and nowhere else, so without it every close
+ * dropped focus on <body> (MPO-471).
  */
 import { DialogContent, DialogOverlay, ScrollView } from "@multiplatform.one/components";
@@ -99,75 +103,72 @@ export function RowDetailEditor<TData extends DataTableData>({
   const current = draft ?? row;
   return (
-    <>
-      <Button
-        chromeless
-        compact={compact}
-        onPress={() => handleOpenChange(true)}
-        hitSlop={knobProps.nestedControl.hitSlop}
-        aria-label={triggerLabel}
-        aria-haspopup="dialog"
-        aria-expanded={draft !== null}
-      >
-        <PencilSimpleIcon size={16} />
-      </Button>
-      <Dialog open={draft !== null} onOpenChange={handleOpenChange} modal>
-        <Dialog.Portal>
-          <DialogOverlay opacity={0.5} />
-          <DialogContent
-            maxWidth={720}
-            maxHeight="80vh"
-            width="90vw"
-            onEscapeKeyDown={() => {
-              discardRef.current = true;
-            }}
-          >
-            <Dialog.Title {...knobProps.heading}>
-              {withInterp(t("Row {{row}}", { row: rowNumber }), { row: rowNumber })}
-            </Dialog.Title>
-            <ScrollView flexShrink={1} minHeight={0}>
-              <TableCellContext.Provider value={{ inTableCell: false }}>
-                <YStack {...knobProps.gapLg}>
-                  {columns.map((col) => {
-                    const columnId = columnKey(col);
-                    if (isCellHidden?.(current, columnId, rowIndex)) return null;
-                    const label = typeof col.header === "string" ? col.header : columnId;
-                    return (
-                      <YStack key={columnId} {...knobProps.gap}>
-                        <Text {...knobProps.label}>{label}</Text>
-                        <DataTableCell
-                          value={current[columnId as keyof TData]}
-                          onChange={(value) => setDraftValue(columnId, value)}
-                          field={(col.field || "input") as DataTableField}
-                          fieldProps={col.fieldProps as DataTableFieldProps | undefined}
-                          readOnly={readOnly}
-                          compact={false}
-                          columnId={columnId}
-                          columnLabel={label}
-                          rowIndex={rowIndex}
-                          rowData={current}
-                        />
-                      </YStack>
-                    );
-                  })}
-                </YStack>
-              </TableCellContext.Provider>
-            </ScrollView>
-            <XStack {...knobProps.gap} justifyContent="flex-end">
-              {readOnly ? (
-                <Button onPress={handleCancel}>{t("Close")}</Button>
-              ) : (
-                <>
-                  <Button onPress={handleCancel}>{t("Cancel")}</Button>
-                  <Button theme="accent" onPress={() => handleOpenChange(false)}>
-                    {t("Done")}
-                  </Button>
-                </>
-              )}
-            </XStack>
-          </DialogContent>
-        </Dialog.Portal>
-      </Dialog>
-    </>
+    <Dialog open={draft !== null} onOpenChange={handleOpenChange} modal>
+      <Dialog.Trigger asChild>
+        <Button
+          chromeless
+          compact={compact}
+          hitSlop={knobProps.nestedControl.hitSlop}
+          aria-label={triggerLabel}
+        >
+          <PencilSimpleIcon size={16} />
+        </Button>
+      </Dialog.Trigger>
+      <Dialog.Portal>
+        <DialogOverlay opacity={0.5} />
+        <DialogContent
+          maxWidth={720}
+          maxHeight="80vh"
+          width="90vw"
+          onEscapeKeyDown={() => {
+            discardRef.current = true;
+          }}
+        >
+          <Dialog.Title {...knobProps.heading}>
+            {withInterp(t("Row {{row}}", { row: rowNumber }), { row: rowNumber })}
+          </Dialog.Title>
+          <ScrollView flexShrink={1} minHeight={0}>
+            <TableCellContext.Provider value={{ inTableCell: false }}>
+              <YStack {...knobProps.gapLg}>
+                {columns.map((col) => {
+                  const columnId = columnKey(col);
+                  if (isCellHidden?.(current, columnId, rowIndex)) return null;
+                  const label = typeof col.header === "string" ? col.header : columnId;
+                  return (
+                    <YStack key={columnId} {...knobProps.gap}>
+                      <Text {...knobProps.label}>{label}</Text>
+                      <DataTableCell
+                        value={current[columnId as keyof TData]}
+                        onChange={(value) => setDraftValue(columnId, value)}
+                        field={(col.field || "input") as DataTableField}
+                        fieldProps={col.fieldProps as DataTableFieldProps | undefined}
+                        readOnly={readOnly}
+                        compact={false}
+                        columnId={columnId}
+                        columnLabel={label}
+                        rowIndex={rowIndex}
+                        rowData={current}
+                      />
+                    </YStack>
+                  );
+                })}
+              </YStack>
+            </TableCellContext.Provider>
+          </ScrollView>
+          <XStack {...knobProps.gap} justifyContent="flex-end">
+            {readOnly ? (
+              <Button onPress={handleCancel}>{t("Close")}</Button>
+            ) : (
+              <>
+                <Button onPress={handleCancel}>{t("Cancel")}</Button>
+                <Button theme="accent" onPress={() => handleOpenChange(false)}>
+                  {t("Done")}
+                </Button>
+              </>
+            )}
+          </XStack>
+        </DialogContent>
+      </Dialog.Portal>
+    </Dialog>
   );
 }

package/src/components/TableInput/index.tsx CHANGED Viewed

@@ -363,6 +363,34 @@ function TableInputInner<TData extends DataTableData>({
     },
     [rows, commit, onCellChange],
   );
+  const rowDetailCommitRef = useRef(handleRowDetailCommit);
+  rowDetailCommitRef.current = handleRowDetailCommit;
+  // flexRender mounts each `cell` as a component, so a fresh renderer on every
+  // row commit remounted the pencil under its closing dialog, and the dialog
+  // then had no connected trigger to return focus to (MPO-471).
+  const detailColumn = useMemo<ColumnDef<TData, unknown> | null>(
+    () =>
+      rowDetail
+        ? {
+            id: "_detail",
+            header: "",
+            size: chromePx + 16,
+            cell: ({ row }) => (
+              <Detail
+                row={row.original}
+                rowIndex={row.index}
+                columns={detailColumns}
+                readOnly={readOnly}
+                compact={compact}
+                isCellHidden={isCellHidden}
+                onCommit={(next, changed) => rowDetailCommitRef.current(row.index, next, changed)}
+              />
+            ),
+          }
+        : null,
+    [rowDetail, chromePx, detailColumns, readOnly, compact, isCellHidden],
+  );
   useEffect(() => {
     const id = pendingFocusRef.current;
@@ -490,24 +518,7 @@ function TableInputInner<TData extends DataTableData>({
       } as ColumnDef<TData, unknown>);
     });
-    if (rowDetail) {
-      cols.push({
-        id: "_detail",
-        header: "",
-        size: chromePx + 16,
-        cell: ({ row }) => (
-          <Detail
-            row={row.original}
-            rowIndex={row.index}
-            columns={detailColumns}
-            readOnly={readOnly}
-            compact={compact}
-            isCellHidden={isCellHidden}
-            onCommit={(next, changed) => handleRowDetailCommit(row.index, next, changed)}
-          />
-        ),
-      });
-    }
+    if (detailColumn) cols.push(detailColumn);
     if (showDeleteRow && !readOnly) {
       cols.push({
@@ -550,10 +561,8 @@ function TableInputInner<TData extends DataTableData>({
     knobProps.label.fontSize,
     knobProps.nestedControl.hitSlop,
     reorderEnabled,
-    rowDetail,
-    detailColumns,
+    detailColumn,
     isCellHidden,
-    handleRowDetailCommit,
   ]);
   const table = useReactTable({

package/types/components/TableInput/RowDetailEditor.d.ts CHANGED Viewed

@@ -7,6 +7,10 @@
  * copy of the row seeded on open. "Done" and an outside click commit the
  * draft once; "Cancel" and Escape discard it. A read-only row opens for
  * viewing with a single "Close".
+ *
+ * The pencil is the dialog's `Dialog.Trigger`: tamagui's modal close returns
+ * focus to the trigger ref and nowhere else, so without it every close
+ * dropped focus on <body> (MPO-471).
  */
 import type { DataTableColumn, DataTableData } from "../../types";
 import { type ChildCellHidden } from "./shared";

package/types/components/TableInput/RowDetailEditor.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RowDetailEditor.d.ts","sourceRoot":"","sources":["../../../src/components/TableInput/RowDetailEditor.tsx"],"names":[],"mappings":"AAAA~~;;;;;;;;;GASG~~;AASH,OAAO,KAAK,EACV,eAAe,EACf,aAAa,EAGd,MAAM,aAAa,CAAC;AAIrB,OAAO,EAA6B,KAAK,eAAe,EAAE,MAAM,UAAU,CAAC;AAE3E,MAAM,WAAW,oBAAoB,CAAC,KAAK,SAAS,aAAa;IAC/D,GAAG,EAAE,KAAK,CAAC;IACX,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,eAAe,CAAC,KAAK,CAAC,EAAE,CAAC;IAClC,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC;IACjB,YAAY,CAAC,EAAE,eAAe,CAAC,KAAK,CAAC,CAAC;IACtC,2EAA2E;IAC3E,QAAQ,EAAE,CAAC,GAAG,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CACnD;AAED,wBAAgB,eAAe,CAAC,KAAK,SAAS,aAAa,EAAE,EAC3D,GAAG,EACH,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,OAAO,EACP,YAAY,EACZ,QAAQ,GACT,EAAE,oBAAoB,CAAC,KAAK,CAAC,~~2CA4H7B~~"}
1	+ {"version":3,"file":"RowDetailEditor.d.ts","sourceRoot":"","sources":["../../../src/components/TableInput/RowDetailEditor.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AASH,OAAO,KAAK,EACV,eAAe,EACf,aAAa,EAGd,MAAM,aAAa,CAAC;AAIrB,OAAO,EAA6B,KAAK,eAAe,EAAE,MAAM,UAAU,CAAC;AAE3E,MAAM,WAAW,oBAAoB,CAAC,KAAK,SAAS,aAAa;IAC/D,GAAG,EAAE,KAAK,CAAC;IACX,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,eAAe,CAAC,KAAK,CAAC,EAAE,CAAC;IAClC,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC;IACjB,YAAY,CAAC,EAAE,eAAe,CAAC,KAAK,CAAC,CAAC;IACtC,2EAA2E;IAC3E,QAAQ,EAAE,CAAC,GAAG,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CACnD;AAED,wBAAgB,eAAe,CAAC,KAAK,SAAS,aAAa,EAAE,EAC3D,GAAG,EACH,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,OAAO,EACP,YAAY,EACZ,QAAQ,GACT,EAAE,oBAAoB,CAAC,KAAK,CAAC,2CAyH7B"}

package/types/components/TableInput/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/TableInput/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAQH,OAAO,EAML,KAAK,UAAU,EAChB,MAAM,0BAA0B,CAAC;AAOlC,OAAO,KAAK,EACV,eAAe,EACf,aAAa,EACb,mBAAmB,EACnB,cAAc,EACf,MAAM,aAAa,CAAC;AAIrB,OAAO,EAML,KAAK,eAAe,EACrB,MAAM,UAAU,CAAC;AAIlB,MAAM,WAAW,eAAe,CAAC,KAAK,SAAS,aAAa,GAAG,aAAa;IAC1E,mFAAmF;IACnF,IAAI,CAAC,EAAE,KAAK,EAAE,CAAC;IACf,4DAA4D;IAC5D,OAAO,EAAE,eAAe,CAAC,KAAK,CAAC,EAAE,CAAC;IAClC,0FAA0F;IAC1F,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,IAAI,CAAC;IACnC,sEAAsE;IACtE,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,IAAI,CAAC;IACvC,iFAAiF;IACjF,YAAY,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5E,oDAAoD;IACpD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,2EAA2E;IAC3E,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,iEAAiE;IACjE,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACrC,mDAAmD;IACnD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kCAAkC;IAClC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,qCAAqC;IACrC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,yCAAyC;IACzC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,6BAA6B;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,6BAA6B;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,kCAAkC;IAClC,UAAU,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;IAC5B,0BAA0B;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,uBAAuB;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,qEAAqE;IACrE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,6DAA6D;IAC7D,aAAa,CAAC,EAAE,eAAe,CAAC,KAAK,CAAC,EAAE,CAAC;IACzC,kEAAkE;IAClE,YAAY,CAAC,EAAE,eAAe,CAAC,KAAK,CAAC,CAAC;CACvC;AAED,wBAAgB,UAAU,CAAC,KAAK,SAAS,aAAa,GAAG,aAAa,EAAE,EACtE,IAAS,EACT,OAAO,EACP,QAAQ,EACR,YAAY,EACZ,YAAY,EACZ,IAAI,EACJ,IAAI,EAAE,QAAQ,EACd,UAAU,EACV,QAAQ,EACR,QAAgB,EAChB,QAAgB,EAChB,cAAqB,EACrB,UAAiB,EACjB,aAAoB,EACpB,OAAO,EACP,OAAO,EACP,UAAU,EACV,YAAY,EACZ,YAAY,EAAE,SAAS,EACvB,OAAc,EACd,aAAqB,EACrB,SAAiB,EACjB,aAAa,EACb,YAAY,GACb,EAAE,eAAe,CAAC,KAAK,CAAC,2CA0ExB;~~AA2fD~~,YAAY,EAAE,eAAe,EAAE,aAAa,EAAE,cAAc,EAAE,mBAAmB,EAAE,CAAC"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/TableInput/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAQH,OAAO,EAML,KAAK,UAAU,EAChB,MAAM,0BAA0B,CAAC;AAOlC,OAAO,KAAK,EACV,eAAe,EACf,aAAa,EACb,mBAAmB,EACnB,cAAc,EACf,MAAM,aAAa,CAAC;AAIrB,OAAO,EAML,KAAK,eAAe,EACrB,MAAM,UAAU,CAAC;AAIlB,MAAM,WAAW,eAAe,CAAC,KAAK,SAAS,aAAa,GAAG,aAAa;IAC1E,mFAAmF;IACnF,IAAI,CAAC,EAAE,KAAK,EAAE,CAAC;IACf,4DAA4D;IAC5D,OAAO,EAAE,eAAe,CAAC,KAAK,CAAC,EAAE,CAAC;IAClC,0FAA0F;IAC1F,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,IAAI,CAAC;IACnC,sEAAsE;IACtE,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,IAAI,CAAC;IACvC,iFAAiF;IACjF,YAAY,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5E,oDAAoD;IACpD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,2EAA2E;IAC3E,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,iEAAiE;IACjE,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACrC,mDAAmD;IACnD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kCAAkC;IAClC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,qCAAqC;IACrC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,yCAAyC;IACzC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,6BAA6B;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,6BAA6B;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,kCAAkC;IAClC,UAAU,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;IAC5B,0BAA0B;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,uBAAuB;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,qEAAqE;IACrE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,6DAA6D;IAC7D,aAAa,CAAC,EAAE,eAAe,CAAC,KAAK,CAAC,EAAE,CAAC;IACzC,kEAAkE;IAClE,YAAY,CAAC,EAAE,eAAe,CAAC,KAAK,CAAC,CAAC;CACvC;AAED,wBAAgB,UAAU,CAAC,KAAK,SAAS,aAAa,GAAG,aAAa,EAAE,EACtE,IAAS,EACT,OAAO,EACP,QAAQ,EACR,YAAY,EACZ,YAAY,EACZ,IAAI,EACJ,IAAI,EAAE,QAAQ,EACd,UAAU,EACV,QAAQ,EACR,QAAgB,EAChB,QAAgB,EAChB,cAAqB,EACrB,UAAiB,EACjB,aAAoB,EACpB,OAAO,EACP,OAAO,EACP,UAAU,EACV,YAAY,EACZ,YAAY,EAAE,SAAS,EACvB,OAAc,EACd,aAAqB,EACrB,SAAiB,EACjB,aAAa,EACb,YAAY,GACb,EAAE,eAAe,CAAC,KAAK,CAAC,2CA0ExB;AAogBD,YAAY,EAAE,eAAe,EAAE,aAAa,EAAE,cAAc,EAAE,mBAAmB,EAAE,CAAC"}