@dxos/react-ui-form 0.8.0 → 0.8.1-main.a06ad20

package/dist/lib/browser/index.mjs

@@ -5,6 +5,7 @@ var translations_default = [
     "en-US": {
       [translationKey]: {
         "fields label": "Fields",
+        "hidden fields label": "Hidden Fields",
         // TODO(burdon): Standardize field/property.
         "button add property": "Add property",
         "field property label": "Property",
@@ -112,9 +113,10 @@ import { getValue as getValue2 } from "@dxos/echo-schema";
 import { createJsonPath as createJsonPath2 } from "@dxos/effect";
 
 // packages/ui/react-ui-form/src/hooks/useForm.ts
+import { SchemaAST as AST } from "effect";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { getValue, setValue } from "@dxos/echo-schema";
-import { AST, createJsonPath, fromEffectValidationPath } from "@dxos/effect";
+import { createJsonPath, fromEffectValidationPath } from "@dxos/effect";
 import { invariant } from "@dxos/invariant";
 import { log } from "@dxos/log";
 import { validateSchema } from "@dxos/schema";
@@ -122,7 +124,7 @@ var __dxlog_file = "/home/runner/work/dxos/dxos/packages/ui/react-ui-form/src/ho
 var useForm = ({ schema, initialValues, onValuesChanged, onValidate, onValid, onSave }) => {
   invariant(AST.isTypeLiteral(schema.ast), void 0, {
     F: __dxlog_file,
-    L: 92,
+    L: 93,
     S: void 0,
     A: [
       "AST.isTypeLiteral(schema.ast)",
@@ -218,7 +220,7 @@ var useForm = ({ schema, initialValues, onValuesChanged, onValidate, onValid, on
     } catch (err) {
       log.catch(err, void 0, {
         F: __dxlog_file,
-        L: 202,
+        L: 203,
         S: void 0,
         C: (f, a) => f(...a)
       });
@@ -289,7 +291,7 @@ var useForm = ({ schema, initialValues, onValuesChanged, onValidate, onValid, on
 var createKeySet = (obj, value) => {
   invariant(obj, void 0, {
     F: __dxlog_file,
-    L: 264,
+    L: 265,
     S: void 0,
     A: [
       "obj",
@@ -1357,6 +1359,15 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly, showHeading =
   }, [
     view
   ]);
+  const handleDelete = useCallback7((fieldId) => {
+    if (fieldId === field?.id) {
+      setField(void 0);
+    }
+    onDelete(fieldId);
+  }, [
+    onDelete,
+    field
+  ]);
   const handleMove = useCallback7((fromIndex, toIndex) => {
     const fields = [
       ...view.fields
@@ -1368,6 +1379,19 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly, showHeading =
     view.fields
   ]);
   const handleClose = useCallback7(() => setField(void 0), []);
+  const hiddenProperties = projection.getHiddenProperties();
+  const handleHide = useCallback7((fieldId) => {
+    setField(void 0);
+    projection.hideFieldProjection(fieldId);
+  }, [
+    projection
+  ]);
+  const handleShow = useCallback7((property) => {
+    setField(void 0);
+    projection.showFieldProjection(property);
+  }, [
+    projection
+  ]);
   return /* @__PURE__ */ React13.createElement("div", {
     role: "none",
     className: mx8("flex flex-col w-full divide-y divide-separator", classNames)
@@ -1400,9 +1424,35 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly, showHeading =
     classNames: mx8(grid, ghostHover, "cursor-pointer")
   }, /* @__PURE__ */ React13.createElement(List2.ItemDragHandle, null), /* @__PURE__ */ React13.createElement(List2.ItemTitle, {
     onClick: () => handleSelect(field2)
-  }, field2.path), /* @__PURE__ */ React13.createElement(List2.ItemDeleteButton, {
+  }, field2.path), /* @__PURE__ */ React13.createElement("div", {
+    className: "flex items-center gap-2 -ml-4"
+  }, /* @__PURE__ */ React13.createElement(List2.ItemButton, {
+    icon: "ph--eye-slash--regular",
     disabled: view.fields.length <= 1,
-    onClick: () => onDelete(field2.id)
+    onClick: () => handleHide(field2.id)
+  }), /* @__PURE__ */ React13.createElement(List2.ItemDeleteButton, {
+    icon: "ph--trash--regular",
+    disabled: view.fields.length <= 1,
+    onClick: () => handleDelete(field2.id)
+  }))))))), hiddenProperties.length > 0 && /* @__PURE__ */ React13.createElement("div", null, /* @__PURE__ */ React13.createElement("div", {
+    role: "none",
+    className: "p-2"
+  }, /* @__PURE__ */ React13.createElement("label", {
+    className: mx8(inputTextLabel)
+  }, t("hidden fields label"))), /* @__PURE__ */ React13.createElement(List2.Root, {
+    items: hiddenProperties,
+    isItem: (item) => typeof item === "string",
+    getId: (property) => property
+  }, ({ items: properties }) => /* @__PURE__ */ React13.createElement("div", {
+    role: "list",
+    className: "flex flex-col w-full"
+  }, properties?.map((property) => /* @__PURE__ */ React13.createElement(List2.Item, {
+    key: property,
+    item: property,
+    classNames: mx8(grid, ghostHover, "cursor-pointer")
+  }, /* @__PURE__ */ React13.createElement("div", null), /* @__PURE__ */ React13.createElement(List2.ItemTitle, null, property), /* @__PURE__ */ React13.createElement(List2.ItemButton, {
+    icon: "ph--eye--regular",
+    onClick: () => handleShow(property)
   }))))))), field && /* @__PURE__ */ React13.createElement(FieldEditor, {
     key: field.id,
     view,