@dxos/react-ui-table 0.6.13-main.ed424a1 → 0.6.13

package/dist/lib/browser/index.mjs

@@ -6,7 +6,7 @@ var translations_default = [
       [translationKey]: {
         "no selection label": "\xA0",
         "number column type label": "Number",
-        "boolean column type label": "Boolean",
+        "boolean column type label": "Toggle",
         "date column type label": "Date",
         "string column type label": "Text",
         "ref column type label": "Reference",
@@ -96,14 +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/ColumnSettings.tsx
+// packages/ui/react-ui-table/src/components/ColumnMenu/ColumnSettingsForm.tsx
 import React2, { useRef, useState as useState2 } from "react";
 import { Button, Input, Select, useTranslation as useTranslation2 } from "@dxos/react-ui";
-import { FieldValueTypes } from "@dxos/schema";
 import { safeParseInt } from "@dxos/util";
-var ColumnSettings = ({ column, tableDef, tablesToReference, onUpdate, onDelete, onClose }) => {
-  const { t } = useTranslation2(translationKey);
-  const propRef = useRef(null);
+var ColumnSettingsForm = ({ column, tableDef, tablesToReference, onUpdate, onDelete, onClose }) => {
   const [formState, setFormState] = useState2({
     prop: column.id,
     refTable: column.refTable,
@@ -112,6 +109,8 @@ var ColumnSettings = ({ column, tableDef, tablesToReference, onUpdate, onDelete,
     label: column.label,
     digits: String(column.digits ?? "0")
   });
+  const propRef = useRef(null);
+  const { t } = useTranslation2(translationKey);
   const handleSave = () => {
     const { prop, refTable, refProp, type, label, digits } = formState;
     if (!prop.length || !prop.match(/^[a-zA-Z_].+/i)) {
@@ -141,9 +140,9 @@ var ColumnSettings = ({ column, tableDef, tablesToReference, onUpdate, onDelete,
     onClose?.();
   };
   return /* @__PURE__ */ React2.createElement("div", {
-    className: "flex flex-col w-full gap-4"
+    className: "p-1 space-y-2"
   }, /* @__PURE__ */ React2.createElement("div", {
-    className: "flex flex-col gap-2"
+    className: "space-y-1"
   }, /* @__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 ?? "",
@@ -153,7 +152,9 @@ var ColumnSettings = ({ column, tableDef, tablesToReference, onUpdate, onDelete,
     })),
     autoFocus: true,
     "data-testid": "table.column-settings.label"
-  })), /* @__PURE__ */ React2.createElement(Input.Root, null, /* @__PURE__ */ React2.createElement(Input.Label, null, t("property key label")), /* @__PURE__ */ React2.createElement(Input.TextInput, {
+  }))), /* @__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, {
     ref: propRef,
     placeholder: "Property key",
     value: formState.prop ?? "",
@@ -161,7 +162,9 @@ var ColumnSettings = ({ column, tableDef, tablesToReference, onUpdate, onDelete,
       ...prevState,
       prop: event.target.value.replace(/[^\w_]/g, "")
     }))
-  })), /* @__PURE__ */ React2.createElement(Input.Root, null, /* @__PURE__ */ React2.createElement(Input.Label, null, t("column type label")), /* @__PURE__ */ React2.createElement(Select.Root, {
+  }))), /* @__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, {
     value: formState.type,
     onValueChange: (value) => setFormState((prevState) => ({
       ...prevState,
@@ -170,16 +173,25 @@ var ColumnSettings = ({ column, tableDef, tablesToReference, onUpdate, onDelete,
   }, /* @__PURE__ */ React2.createElement(Select.TriggerButton, {
     classNames: "is-full",
     placeholder: "Type"
-  }), /* @__PURE__ */ React2.createElement(Select.Portal, null, /* @__PURE__ */ React2.createElement(Select.Content, null, /* @__PURE__ */ React2.createElement(Select.Viewport, null, FieldValueTypes.map((type) => /* @__PURE__ */ React2.createElement(Select.Option, {
+  }), /* @__PURE__ */ React2.createElement(Select.Portal, null, /* @__PURE__ */ React2.createElement(Select.Content, null, /* @__PURE__ */ React2.createElement(Select.Viewport, null, [
+    "number",
+    "boolean",
+    "string",
+    "ref"
+  ].map((type) => /* @__PURE__ */ React2.createElement(Select.Option, {
     key: type,
     value: type
-  }, 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, {
+  }, 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, {
     value: formState.digits ?? "",
     onChange: (event) => setFormState((prevState) => ({
       ...prevState,
       digits: event.target.value
     }))
-  })), 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, {
+  }))), 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, {
     value: formState.refTable,
     onValueChange: (value) => setFormState((prevState) => ({
       ...prevState,
@@ -191,7 +203,9 @@ var ColumnSettings = ({ column, tableDef, tablesToReference, onUpdate, onDelete,
   }), /* @__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(Input.Root, null, /* @__PURE__ */ React2.createElement(Input.Label, null, "Table property"), /* @__PURE__ */ React2.createElement(Select.Root, {
+  }, 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, {
     value: formState.refProp,
     onValueChange: (value) => setFormState((prevState) => ({
       ...prevState,
@@ -202,7 +216,10 @@ var ColumnSettings = ({ column, tableDef, tablesToReference, onUpdate, onDelete,
   }), /* @__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", null, /* @__PURE__ */ React2.createElement("div", {
+  }, label ?? id))))))))), /* @__PURE__ */ React2.createElement("div", {
+    role: "none",
+    className: "h-1"
+  }), /* @__PURE__ */ React2.createElement("div", {
     className: "flex flex-row justify-end gap-1"
   }, /* @__PURE__ */ React2.createElement(Button, {
     onClick: handleDelete,
@@ -211,7 +228,7 @@ var ColumnSettings = ({ column, tableDef, tablesToReference, onUpdate, onDelete,
     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
@@ -252,16 +269,14 @@ import { useState as useState4 } from "react";
 
 // packages/ui/react-ui-table/src/components/Table/TableContext.tsx
 import React3, { useContext, createContext } from "react";
-import { raise } from "@dxos/debug";
-var TABLE_NAME = "Table";
-var TableContext = /* @__PURE__ */ createContext(void 0);
+var TableContext = /* @__PURE__ */ createContext({});
 var TableProvider = ({ children, ...value }) => {
   return /* @__PURE__ */ React3.createElement(TableContext.Provider, {
     value
   }, children);
 };
 var useTableContext = () => {
-  return useContext(TableContext) ?? raise(new Error("Missing TableContext"));
+  return useContext(TableContext);
 };
 
 // packages/ui/react-ui-table/src/hooks/useColumnSorting.ts
@@ -496,7 +511,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(ColumnSettings, {
+  })))), /* @__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, {
     ...props,
     column,
     onClose: () => setIsColumnSettingsOpen(false)
@@ -528,7 +543,7 @@ var SortIndicator = ({ direction, onClick }) => {
 // packages/ui/react-ui-table/src/components/Table/Table.tsx
 import { Slot } from "@radix-ui/react-slot";
 import { getCoreRowModel, getExpandedRowModel, getGroupedRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
-import React8, { Fragment, memo, useCallback as useCallback7, useEffect as useEffect3, useState as useState8, useContext as useContext3 } from "react";
+import React8, { Fragment, useCallback as useCallback7, useEffect as useEffect3, useState as useState8, useContext as useContext3, memo } from "react";
 import { DensityProvider, useDefaultValue } from "@dxos/react-ui";
 import { mx as mx4 } from "@dxos/react-ui-theme";
 
@@ -779,9 +794,9 @@ var TableViewport = ({ children, classNames, asChild, ...props }) => {
   }, children);
 };
 var TablePrimitive = (props) => {
-  const { role, header = true, rowsSelectable, debug, pinLastRow, columnVisibility, onColumnResize, onDataSelectionChange } = props;
-  const columns = useDefaultValue(props.columns, () => []);
-  const incomingData = useDefaultValue(props.data, () => []);
+  const { role, onColumnResize, columnVisibility, header = true, rowsSelectable, debug, onDataSelectionChange, pinLastRow } = props;
+  const columns = useDefaultValue(props.columns, []);
+  const incomingData = useDefaultValue(props.data, []);
   const [data, setData] = useState8([
     ...incomingData
   ]);
@@ -813,7 +828,7 @@ var TablePrimitive = (props) => {
     // Columns
     columns,
     defaultColumn: {
-      size: 400,
+      size: 256,
       maxSize: 1024
     },
     // State
@@ -1214,7 +1229,7 @@ var ColumnBuilder = class {
             value
           }, {
             F: __dxlog_file,
-            L: 377,
+            L: 378,
             S: this,
             C: (f, a) => f(...a)
           });
@@ -1312,7 +1327,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,
@@ -1337,7 +1352,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"
@@ -1362,7 +1377,7 @@ var ColumnBuilder = class {
   /**
   * This display column type is for nested/unhandled data to appear as JSON.
   */
-  json({ label, classNames, ...props } = {}) {
+  display({ label, classNames, ...props } = {}) {
     return {
       size: 120,
       minSize: 120,
@@ -1391,41 +1406,113 @@ var ColumnBuilder = class {
   }
 };
 
-// packages/ui/react-ui-table/src/schema/column-utils.ts
-import { FieldValueType, mapSchemaToFields } from "@dxos/schema";
+// 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) => {
+      const propName = prop.name.toString();
+      if (prop.isOptional) {
+        const unwrappedAst = unwrapOptionProperty(prop);
+        if (isStruct(unwrappedAst)) {
+          return recurse(unwrappedAst, [
+            ...path,
+            propName
+          ], acc);
+        }
+      }
+      if (isStruct(prop.type)) {
+        recurse(prop.type, [
+          ...path,
+          propName
+        ], acc);
+      } else {
+        acc.push([
+          path.concat(propName).join("."),
+          propertyToColumn(prop)
+        ]);
+      }
+    });
+    return acc;
+  };
+  return recurse(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)}`);
+  }
+  if (!AST.isUnion(prop.type)) {
+    throw new Error(`Not a union type: ${String(prop.name)}`);
+  }
+  const [type, _undefinedCase] = prop.type.types;
+  return type;
+};
+var typeToColumn = (type) => {
+  if (AST.isStringKeyword(type)) {
+    return "string";
+  } else if (AST.isNumberKeyword(type)) {
+    return "number";
+  } else if (AST.isBooleanKeyword(type)) {
+    return "boolean";
+  }
+  if (AST.isRefinement(type)) {
+    return typeToColumn(type.from);
+  }
+  if (AST.isTransformation(type)) {
+    const identifier = AST.getIdentifierAnnotation(type);
+    if (identifier._tag === "Some") {
+      if (identifier.value === "DateFromString") {
+        return "date";
+      }
+    }
+  }
+  return "display";
+};
+var propertyToColumn = (prop) => {
+  let type = prop.type;
+  if (prop.isOptional) {
+    type = unwrapOptionProperty(prop);
+  }
+  return typeToColumn(type);
+};
+
+// packages/ui/react-ui-table/src/schema/schemaToColumns.ts
 var schemaToColumnDefs = (schema) => {
   const { helper, builder } = createColumnBuilder();
-  const classified = mapSchemaToFields(schema);
+  const classified = classifySchemaProperties(schema);
   return classified.map(([name, type]) => {
     const propertyKey = name.toString();
     let column;
     switch (type) {
-      case FieldValueType.String: {
+      case "string": {
         column = builder.string({
           label: propertyKey
         });
         break;
       }
-      case FieldValueType.Number: {
+      case "number": {
         column = builder.number({
           label: propertyKey
         });
         break;
       }
-      case FieldValueType.Boolean: {
+      case "boolean": {
         column = builder.switch({
           label: propertyKey
         });
         break;
       }
-      case FieldValueType.Date: {
+      case "date": {
         column = builder.date({
           label: propertyKey
         });
         break;
       }
-      case FieldValueType.JSON: {
-        column = builder.json({
+      case "display": {
+        column = builder.display({
           label: propertyKey,
           id: propertyKey
         });
@@ -1442,13 +1529,11 @@ export {
   CellCombobox,
   ColumnBuilder,
   ColumnMenu,
-  ColumnSettings,
+  ColumnSettingsForm,
   MemoizedVirtualizedTableContent,
   SortIndicator,
-  TABLE_NAME,
   Table,
   TablePrimitive,
-  TableProvider,
   TableRootContext,
   createColumnBuilder,
   currentRow,
@@ -1473,7 +1558,6 @@ export {
   usePinLastRow,
   useRowSelection,
   useSortColumn,
-  useTableContext,
   useTableRootContext
 };
 //# sourceMappingURL=index.mjs.map