@dxos/react-ui-table 0.6.13 → 0.6.14-main.7bd9c89

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": "Toggle",
+        "boolean column type label": "Boolean",
         "date column type label": "Date",
         "string column type label": "Text",
         "ref column type label": "Reference",
@@ -96,11 +96,14 @@ 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 { FieldValueTypes } from "@dxos/schema";
 import { safeParseInt } from "@dxos/util";
-var ColumnSettingsForm = ({ column, tableDef, tablesToReference, onUpdate, onDelete, onClose }) => {
+var ColumnSettings = ({ column, tableDef, tablesToReference, onUpdate, onDelete, onClose }) => {
+  const { t } = useTranslation2(translationKey);
+  const propRef = useRef(null);
   const [formState, setFormState] = useState2({
     prop: column.id,
     refTable: column.refTable,
@@ -109,8 +112,6 @@ var ColumnSettingsForm = ({ column, tableDef, tablesToReference, onUpdate, onDel
     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)) {
@@ -140,9 +141,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 +153,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 +161,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,
@@ -173,25 +170,16 @@ var ColumnSettingsForm = ({ column, tableDef, tablesToReference, onUpdate, onDel
   }, /* @__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, [
-    "number",
-    "boolean",
-    "string",
-    "ref"
-  ].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, FieldValueTypes.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 +191,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 +202,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 +211,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 +252,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 +496,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)
@@ -543,8 +528,8 @@ 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, useCallback as useCallback7, useEffect as useEffect3, useState as useState8, useContext as useContext3, memo } from "react";
-import { DensityProvider, useDefaultValue } from "@dxos/react-ui";
+import React8, { Fragment, memo, useCallback as useCallback7, useEffect as useEffect3, useState as useState8, useContext as useContext3 } from "react";
+import { useDefaultValue } from "@dxos/react-ui";
 import { mx as mx4 } from "@dxos/react-ui-theme";
 
 // packages/ui/react-ui-table/src/components/Table/TableBody.tsx
@@ -775,9 +760,7 @@ var TableRoot = ({ children }) => {
   const contextValue = useTableRootContext();
   return /* @__PURE__ */ React8.createElement(TableRootContext.Provider, {
     value: contextValue
-  }, /* @__PURE__ */ React8.createElement(DensityProvider, {
-    density: "fine"
-  }, children));
+  }, children);
 };
 var TableViewport = ({ children, classNames, asChild, ...props }) => {
   const { scrollContextRef } = useContext3(TableRootContext);
@@ -794,9 +777,9 @@ var TableViewport = ({ children, classNames, asChild, ...props }) => {
   }, children);
 };
 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 { role, header = true, rowsSelectable, debug, pinLastRow, columnVisibility, onColumnResize, onDataSelectionChange } = props;
+  const columns = useDefaultValue(props.columns, () => []);
+  const incomingData = useDefaultValue(props.data, () => []);
   const [data, setData] = useState8([
     ...incomingData
   ]);
@@ -828,7 +811,7 @@ var TablePrimitive = (props) => {
     // Columns
     columns,
     defaultColumn: {
-      size: 256,
+      size: 400,
       maxSize: 1024
     },
     // State
@@ -1229,7 +1212,7 @@ var ColumnBuilder = class {
             value
           }, {
             F: __dxlog_file,
-            L: 378,
+            L: 377,
             S: this,
             C: (f, a) => f(...a)
           });
@@ -1327,7 +1310,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 +1335,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 +1360,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,
@@ -1406,113 +1389,41 @@ 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) => {
-      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
+// packages/ui/react-ui-table/src/schema/column-utils.ts
+import { FieldValueType, mapSchemaToFields } from "@dxos/schema";
 var schemaToColumnDefs = (schema) => {
   const { helper, builder } = createColumnBuilder();
-  const classified = classifySchemaProperties(schema);
+  const classified = mapSchemaToFields(schema);
   return classified.map(([name, type]) => {
     const propertyKey = name.toString();
     let column;
     switch (type) {
-      case "string": {
+      case FieldValueType.String: {
         column = builder.string({
           label: propertyKey
         });
         break;
       }
-      case "number": {
+      case FieldValueType.Number: {
         column = builder.number({
           label: propertyKey
         });
         break;
       }
-      case "boolean": {
+      case FieldValueType.Boolean: {
         column = builder.switch({
           label: propertyKey
         });
         break;
       }
-      case "date": {
+      case FieldValueType.Date: {
         column = builder.date({
           label: propertyKey
         });
         break;
       }
-      case "display": {
-        column = builder.display({
+      case FieldValueType.JSON: {
+        column = builder.json({
           label: propertyKey,
           id: propertyKey
         });
@@ -1529,11 +1440,13 @@ export {
   CellCombobox,
   ColumnBuilder,
   ColumnMenu,
-  ColumnSettingsForm,
+  ColumnSettings,
   MemoizedVirtualizedTableContent,
   SortIndicator,
+  TABLE_NAME,
   Table,
   TablePrimitive,
+  TableProvider,
   TableRootContext,
   createColumnBuilder,
   currentRow,
@@ -1558,6 +1471,7 @@ export {
   usePinLastRow,
   useRowSelection,
   useSortColumn,
+  useTableContext,
   useTableRootContext
 };
 //# sourceMappingURL=index.mjs.map