@dxos/react-ui-form 0.8.1-main.ae460ac → 0.8.1-staging.391c573

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",
@@ -1358,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
@@ -1369,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)
@@ -1401,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,