@dxos/react-ui-table 0.6.12-main.5cc132e → 0.6.12-main.7907542

package/dist/lib/browser/index.mjs

@@ -96,11 +96,11 @@ import React4, { useRef as useRef2, useState as useState6, useCallback as useCal
 import { Button as Button2, Popover as Popover2, DropdownMenu } from "@dxos/react-ui";
 import { getSize as getSize2, mx as mx2 } from "@dxos/react-ui-theme";
 
-// packages/ui/react-ui-table/src/components/ColumnMenu/ColumnSettingsForm.tsx
+// packages/ui/react-ui-table/src/components/ColumnMenu/ColumnSettings.tsx
 import React2, { useRef, useState as useState2 } from "react";
 import { Button, Input, Select, useTranslation as useTranslation2 } from "@dxos/react-ui";
 import { safeParseInt } from "@dxos/util";
-var ColumnSettingsForm = ({ column, tableDef, tablesToReference, onUpdate, onDelete, onClose }) => {
+var ColumnSettings = ({ column, tableDef, tablesToReference, onUpdate, onDelete, onClose }) => {
   const [formState, setFormState] = useState2({
     prop: column.id,
     refTable: column.refTable,
@@ -140,9 +140,9 @@ var ColumnSettingsForm = ({ column, tableDef, tablesToReference, onUpdate, onDel
     onClose?.();
   };
   return /* @__PURE__ */ React2.createElement("div", {
-    className: "p-1 space-y-2"
+    className: "flex flex-col w-full gap-4"
   }, /* @__PURE__ */ React2.createElement("div", {
-    className: "space-y-1"
+    className: "flex flex-col gap-2"
   }, /* @__PURE__ */ React2.createElement(Input.Root, null, /* @__PURE__ */ React2.createElement(Input.Label, null, t("column label label")), /* @__PURE__ */ React2.createElement(Input.TextInput, {
     placeholder: "Column label",
     value: formState.label ?? "",
@@ -152,9 +152,7 @@ var ColumnSettingsForm = ({ column, tableDef, tablesToReference, onUpdate, onDel
     })),
     autoFocus: true,
     "data-testid": "table.column-settings.label"
-  }))), /* @__PURE__ */ React2.createElement("div", {
-    className: "space-y-1"
-  }, /* @__PURE__ */ React2.createElement(Input.Root, null, /* @__PURE__ */ React2.createElement(Input.Label, null, t("property key label")), /* @__PURE__ */ React2.createElement(Input.TextInput, {
+  })), /* @__PURE__ */ React2.createElement(Input.Root, null, /* @__PURE__ */ React2.createElement(Input.Label, null, t("property key label")), /* @__PURE__ */ React2.createElement(Input.TextInput, {
     ref: propRef,
     placeholder: "Property key",
     value: formState.prop ?? "",
@@ -162,9 +160,7 @@ var ColumnSettingsForm = ({ column, tableDef, tablesToReference, onUpdate, onDel
       ...prevState,
       prop: event.target.value.replace(/[^\w_]/g, "")
     }))
-  }))), /* @__PURE__ */ React2.createElement("div", {
-    className: "space-y-1"
-  }, /* @__PURE__ */ React2.createElement(Input.Root, null, /* @__PURE__ */ React2.createElement(Input.Label, null, t("column type label")), /* @__PURE__ */ React2.createElement(Select.Root, {
+  })), /* @__PURE__ */ React2.createElement(Input.Root, null, /* @__PURE__ */ React2.createElement(Input.Label, null, t("column type label")), /* @__PURE__ */ React2.createElement(Select.Root, {
     value: formState.type,
     onValueChange: (value) => setFormState((prevState) => ({
       ...prevState,
@@ -181,17 +177,13 @@ var ColumnSettingsForm = ({ column, tableDef, tablesToReference, onUpdate, onDel
   ].map((type) => /* @__PURE__ */ React2.createElement(Select.Option, {
     key: type,
     value: type
-  }, t(`${type} column type label`))))))))), formState.type === "number" && /* @__PURE__ */ React2.createElement("div", {
-    className: "space-y-1"
-  }, /* @__PURE__ */ React2.createElement(Input.Root, null, /* @__PURE__ */ React2.createElement(Input.Label, null, t("digits label")), /* @__PURE__ */ React2.createElement(Input.TextInput, {
+  }, t(`${type} column type label`)))))))), formState.type === "number" && /* @__PURE__ */ React2.createElement(Input.Root, null, /* @__PURE__ */ React2.createElement(Input.Label, null, t("digits label")), /* @__PURE__ */ React2.createElement(Input.TextInput, {
     value: formState.digits ?? "",
     onChange: (event) => setFormState((prevState) => ({
       ...prevState,
       digits: event.target.value
     }))
-  }))), formState.type === "ref" && /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement("div", {
-    className: "space-y-1"
-  }, /* @__PURE__ */ React2.createElement(Input.Root, null, /* @__PURE__ */ React2.createElement(Input.Label, null, "Table"), /* @__PURE__ */ React2.createElement(Select.Root, {
+  })), formState.type === "ref" && /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(Input.Root, null, /* @__PURE__ */ React2.createElement(Input.Label, null, "Table"), /* @__PURE__ */ React2.createElement(Select.Root, {
     value: formState.refTable,
     onValueChange: (value) => setFormState((prevState) => ({
       ...prevState,
@@ -203,9 +195,7 @@ var ColumnSettingsForm = ({ column, tableDef, tablesToReference, onUpdate, onDel
   }), /* @__PURE__ */ React2.createElement(Select.Portal, null, /* @__PURE__ */ React2.createElement(Select.Content, null, /* @__PURE__ */ React2.createElement(Select.Viewport, null, tablesToReference.filter((t2) => t2.id !== tableDef.id).map(({ id, name }) => /* @__PURE__ */ React2.createElement(Select.Option, {
     key: id,
     value: id
-  }, name ?? id)))))))), formState.refTable && /* @__PURE__ */ React2.createElement("div", {
-    className: "space-y-1"
-  }, /* @__PURE__ */ React2.createElement(Input.Root, null, /* @__PURE__ */ React2.createElement(Input.Label, null, "Table property"), /* @__PURE__ */ React2.createElement(Select.Root, {
+  }, name ?? id))))))), formState.refTable && /* @__PURE__ */ React2.createElement(Input.Root, null, /* @__PURE__ */ React2.createElement(Input.Label, null, "Table property"), /* @__PURE__ */ React2.createElement(Select.Root, {
     value: formState.refProp,
     onValueChange: (value) => setFormState((prevState) => ({
       ...prevState,
@@ -216,10 +206,7 @@ var ColumnSettingsForm = ({ column, tableDef, tablesToReference, onUpdate, onDel
   }), /* @__PURE__ */ React2.createElement(Select.Portal, null, /* @__PURE__ */ React2.createElement(Select.Content, null, /* @__PURE__ */ React2.createElement(Select.Viewport, null, tablesToReference.find((tableDef2) => tableDef2.id === formState.refTable)?.columns.map(({ id, label }) => /* @__PURE__ */ React2.createElement(Select.Option, {
     key: id,
     value: id
-  }, label ?? id))))))))), /* @__PURE__ */ React2.createElement("div", {
-    role: "none",
-    className: "h-1"
-  }), /* @__PURE__ */ React2.createElement("div", {
+  }, label ?? id))))))))), /* @__PURE__ */ React2.createElement("div", null, /* @__PURE__ */ React2.createElement("div", {
     className: "flex flex-row justify-end gap-1"
   }, /* @__PURE__ */ React2.createElement(Button, {
     onClick: handleDelete,
@@ -228,7 +215,7 @@ var ColumnSettingsForm = ({ column, tableDef, tablesToReference, onUpdate, onDel
     variant: "primary",
     onClick: handleSave,
     "data-testid": "table.column-settings.save"
-  }, t("save label"))));
+  }, t("save label")))));
 };
 
 // packages/ui/react-ui-table/src/hooks/useColumnSizing.ts
@@ -269,14 +256,16 @@ import { useState as useState4 } from "react";
 
 // packages/ui/react-ui-table/src/components/Table/TableContext.tsx
 import React3, { useContext, createContext } from "react";
-var TableContext = /* @__PURE__ */ createContext({});
+import { raise } from "@dxos/debug";
+var TABLE_NAME = "Table";
+var TableContext = /* @__PURE__ */ createContext(void 0);
 var TableProvider = ({ children, ...value }) => {
   return /* @__PURE__ */ React3.createElement(TableContext.Provider, {
     value
   }, children);
 };
 var useTableContext = () => {
-  return useContext(TableContext);
+  return useContext(TableContext) ?? raise(new Error("Missing TableContext"));
 };
 
 // packages/ui/react-ui-table/src/hooks/useColumnSorting.ts
@@ -511,7 +500,7 @@ var ColumnMenu = ({ column, columnOrderable, columnPosition, onColumnReorder, ..
     className: "opacity-50"
   }, /* @__PURE__ */ React4.createElement(GearSix, {
     className: mx2(getSize2(4), "rotate-90")
-  })))), /* @__PURE__ */ React4.createElement(DropdownMenu.Arrow, null))), /* @__PURE__ */ React4.createElement(Popover2.Portal, null, /* @__PURE__ */ React4.createElement(Popover2.Content, null, /* @__PURE__ */ React4.createElement(Popover2.Viewport, null, /* @__PURE__ */ React4.createElement(ColumnSettingsForm, {
+  })))), /* @__PURE__ */ React4.createElement(DropdownMenu.Arrow, null))), /* @__PURE__ */ React4.createElement(Popover2.Portal, null, /* @__PURE__ */ React4.createElement(Popover2.Content, null, /* @__PURE__ */ React4.createElement(Popover2.Viewport, null, /* @__PURE__ */ React4.createElement(ColumnSettings, {
     ...props,
     column,
     onClose: () => setIsColumnSettingsOpen(false)
@@ -795,8 +784,8 @@ var TableViewport = ({ children, classNames, asChild, ...props }) => {
 };
 var TablePrimitive = (props) => {
   const { role, onColumnResize, columnVisibility, header = true, rowsSelectable, debug, onDataSelectionChange, pinLastRow } = props;
-  const columns = useDefaultValue(props.columns, []);
-  const incomingData = useDefaultValue(props.data, []);
+  const columns = useDefaultValue(props.columns, () => []);
+  const incomingData = useDefaultValue(props.data, () => []);
   const [data, setData] = useState8([
     ...incomingData
   ]);
@@ -828,7 +817,7 @@ var TablePrimitive = (props) => {
     // Columns
     columns,
     defaultColumn: {
-      size: 256,
+      size: 400,
       maxSize: 1024
     },
     // State
@@ -1229,7 +1218,7 @@ var ColumnBuilder = class {
             value
           }, {
             F: __dxlog_file,
-            L: 378,
+            L: 377,
             S: this,
             C: (f, a) => f(...a)
           });
@@ -1327,7 +1316,7 @@ var ColumnBuilder = class {
       size: 50,
       minSize: 50,
       header: (column) => label ?? column.header.id,
-      // TODO(zan): Implement sort algorithm
+      // TODO(zan): Implement sort algorithm.
       enableSorting: true,
       cell: SwitchBuilderCell,
       ...props,
@@ -1352,7 +1341,7 @@ var ColumnBuilder = class {
     const IconOff = off?.Icon ?? X2;
     return {
       size: size ?? 32,
-      // TODO(zan): Implement sort algorithm
+      // TODO(zan): Implement sort algorithm.
       enableSorting: false,
       header: (column) => /* @__PURE__ */ React9.createElement("div", {
         className: "justify-center"
@@ -1377,7 +1366,7 @@ var ColumnBuilder = class {
   /**
   * This display column type is for nested/unhandled data to appear as JSON.
   */
-  display({ label, classNames, ...props } = {}) {
+  json({ label, classNames, ...props } = {}) {
     return {
       size: 120,
       minSize: 120,
@@ -1407,23 +1396,23 @@ var ColumnBuilder = class {
 };
 
 // packages/ui/react-ui-table/src/schema/schema.ts
-import * as AST from "@effect/schema/AST";
-var classifySchemaProperties = (schema) => {
-  const recurse = (node, path, acc) => {
-    const properties = AST.getPropertySignatures(node);
-    properties.forEach((prop) => {
+import { AST } from "@dxos/effect";
+var getColumnTypes = (schema) => {
+  const visitNode = (node, path = [], acc = []) => {
+    const props = AST.getPropertySignatures(node);
+    props.forEach((prop) => {
       const propName = prop.name.toString();
       if (prop.isOptional) {
         const unwrappedAst = unwrapOptionProperty(prop);
         if (isStruct(unwrappedAst)) {
-          return recurse(unwrappedAst, [
+          return visitNode(unwrappedAst, [
             ...path,
             propName
           ], acc);
         }
       }
       if (isStruct(prop.type)) {
-        recurse(prop.type, [
+        visitNode(prop.type, [
           ...path,
           propName
         ], acc);
@@ -1436,18 +1425,21 @@ var classifySchemaProperties = (schema) => {
     });
     return acc;
   };
-  return recurse(schema.ast, [], []);
+  return visitNode(schema.ast);
 };
 var isStruct = (node) => AST.isTypeLiteral(node);
-var isOptionalUnion = (prop) => AST.isUnion(prop.type) && prop.isOptional;
-var unwrapOptionProperty = (prop) => {
-  if (!isOptionalUnion(prop)) {
-    throw new Error(`Not an optional property: ${String(prop.name)}`);
+var propertyToColumn = (prop) => {
+  let type = prop.type;
+  if (prop.isOptional) {
+    type = unwrapOptionProperty(prop);
   }
+  return typeToColumn(type);
+};
+var unwrapOptionProperty = (prop) => {
   if (!AST.isUnion(prop.type)) {
     throw new Error(`Not a union type: ${String(prop.name)}`);
   }
-  const [type, _undefinedCase] = prop.type.types;
+  const [type] = prop.type.types;
   return type;
 };
 var typeToColumn = (type) => {
@@ -1469,20 +1461,13 @@ var typeToColumn = (type) => {
       }
     }
   }
-  return "display";
-};
-var propertyToColumn = (prop) => {
-  let type = prop.type;
-  if (prop.isOptional) {
-    type = unwrapOptionProperty(prop);
-  }
-  return typeToColumn(type);
+  return "json";
 };
 
-// packages/ui/react-ui-table/src/schema/schemaToColumns.ts
+// packages/ui/react-ui-table/src/schema/column-utils.ts
 var schemaToColumnDefs = (schema) => {
   const { helper, builder } = createColumnBuilder();
-  const classified = classifySchemaProperties(schema);
+  const classified = getColumnTypes(schema);
   return classified.map(([name, type]) => {
     const propertyKey = name.toString();
     let column;
@@ -1511,8 +1496,8 @@ var schemaToColumnDefs = (schema) => {
         });
         break;
       }
-      case "display": {
-        column = builder.display({
+      case "json": {
+        column = builder.json({
           label: propertyKey,
           id: propertyKey
         });
@@ -1529,15 +1514,18 @@ export {
   CellCombobox,
   ColumnBuilder,
   ColumnMenu,
-  ColumnSettingsForm,
+  ColumnSettings,
   MemoizedVirtualizedTableContent,
   SortIndicator,
+  TABLE_NAME,
   Table,
   TablePrimitive,
+  TableProvider,
   TableRootContext,
   createColumnBuilder,
   currentRow,
   flushPadding,
+  getColumnTypes,
   gridCellFocusRing,
   groupTh,
   headPadding,
@@ -1558,6 +1546,7 @@ export {
   usePinLastRow,
   useRowSelection,
   useSortColumn,
+  useTableContext,
   useTableRootContext
 };
 //# sourceMappingURL=index.mjs.map