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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-form",
-  "version": "0.8.1-main.ae460ac",
+  "version": "0.8.1-staging.391c573",
   "description": "Data components.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -28,46 +28,46 @@
     "@radix-ui/react-context": "1.1.1",
     "date-fns": "^3.3.1",
     "jsonpath": "^1.1.1",
-    "@dxos/async": "0.8.1-main.ae460ac",
-    "@dxos/echo-db": "0.8.1-main.ae460ac",
-    "@dxos/debug": "0.8.1-main.ae460ac",
-    "@dxos/echo-schema": "0.8.1-main.ae460ac",
-    "@dxos/invariant": "0.8.1-main.ae460ac",
-    "@dxos/keys": "0.8.1-main.ae460ac",
-    "@dxos/live-object": "0.8.1-main.ae460ac",
-    "@dxos/log": "0.8.1-main.ae460ac",
-    "@dxos/react-ui-list": "0.8.1-main.ae460ac",
-    "@dxos/react-ui-pickers": "0.8.1-main.ae460ac",
-    "@dxos/effect": "0.8.1-main.ae460ac",
-    "@dxos/react-ui-types": "0.8.1-main.ae460ac",
-    "@dxos/react-client": "0.8.1-main.ae460ac",
-    "@dxos/schema": "0.8.1-main.ae460ac",
-    "@dxos/util": "0.8.1-main.ae460ac"
+    "@dxos/async": "0.8.1-staging.391c573",
+    "@dxos/echo-schema": "0.8.1-staging.391c573",
+    "@dxos/debug": "0.8.1-staging.391c573",
+    "@dxos/effect": "0.8.1-staging.391c573",
+    "@dxos/invariant": "0.8.1-staging.391c573",
+    "@dxos/keys": "0.8.1-staging.391c573",
+    "@dxos/echo-db": "0.8.1-staging.391c573",
+    "@dxos/log": "0.8.1-staging.391c573",
+    "@dxos/live-object": "0.8.1-staging.391c573",
+    "@dxos/react-client": "0.8.1-staging.391c573",
+    "@dxos/react-ui-list": "0.8.1-staging.391c573",
+    "@dxos/react-ui-pickers": "0.8.1-staging.391c573",
+    "@dxos/react-ui-types": "0.8.1-staging.391c573",
+    "@dxos/schema": "0.8.1-staging.391c573",
+    "@dxos/util": "0.8.1-staging.391c573"
   },
   "devDependencies": {
     "@phosphor-icons/react": "^2.1.5",
     "@types/jsonpath": "^0.2.4",
     "@types/react": "~18.2.0",
     "@types/react-dom": "~18.2.0",
-    "effect": "^3.12.3",
+    "effect": "3.13.3",
     "fast-check": "^3.19.0",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/echo-signals": "0.8.1-main.ae460ac",
-    "@dxos/random": "0.8.1-main.ae460ac",
-    "@dxos/react-ui-syntax-highlighter": "0.8.1-main.ae460ac",
-    "@dxos/react-ui": "0.8.1-main.ae460ac",
-    "@dxos/react-ui-theme": "0.8.1-main.ae460ac",
-    "@dxos/storybook-utils": "0.8.1-main.ae460ac"
+    "@dxos/random": "0.8.1-staging.391c573",
+    "@dxos/echo-signals": "0.8.1-staging.391c573",
+    "@dxos/react-ui-syntax-highlighter": "0.8.1-staging.391c573",
+    "@dxos/react-ui": "0.8.1-staging.391c573",
+    "@dxos/react-ui-theme": "0.8.1-staging.391c573",
+    "@dxos/storybook-utils": "0.8.1-staging.391c573"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.1.5",
-    "effect": "^3.12.3",
+    "effect": "3.13.3",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.8.1-main.ae460ac",
-    "@dxos/react-ui-theme": "0.8.1-main.ae460ac"
+    "@dxos/react-ui": "0.8.1-staging.391c573",
+    "@dxos/react-ui-theme": "0.8.1-staging.391c573"
   },
   "publishConfig": {
     "access": "public"

package/src/components/ViewEditor/ViewEditor.tsx

@@ -5,7 +5,7 @@
 import React, { useCallback, useMemo, useState } from 'react';
 
 import { type SchemaRegistry } from '@dxos/echo-db';
-import { AST, Format, type EchoSchema, S } from '@dxos/echo-schema';
+import { AST, Format, type EchoSchema, S, type JsonProp } from '@dxos/echo-schema';
 import { IconButton, type ThemedClassName, useTranslation } from '@dxos/react-ui';
 import { List } from '@dxos/react-ui-list';
 import { ghostHover, inputTextLabel, mx } from '@dxos/react-ui-theme';
@@ -88,6 +88,16 @@ export const ViewEditor = ({
     setField(field);
   }, [view]);
 
+  const handleDelete = useCallback(
+    (fieldId: string) => {
+      if (fieldId === field?.id) {
+        setField(undefined);
+      }
+      onDelete(fieldId);
+    },
+    [onDelete, field],
+  );
+
   const handleMove = useCallback(
     (fromIndex: number, toIndex: number) => {
       // NOTE(ZaymonFC): Using arrayMove here causes a race condition with the kanban model.
@@ -101,6 +111,24 @@ export const ViewEditor = ({
 
   const handleClose = useCallback(() => setField(undefined), []);
 
+  const hiddenProperties = projection.getHiddenProperties();
+
+  const handleHide = useCallback(
+    (fieldId: string) => {
+      setField(undefined);
+      projection.hideFieldProjection(fieldId);
+    },
+    [projection],
+  );
+
+  const handleShow = useCallback(
+    (property: string) => {
+      setField(undefined);
+      projection.showFieldProjection(property as JsonProp);
+    },
+    [projection],
+  );
+
   return (
     <div role='none' className={mx('flex flex-col w-full divide-y divide-separator', classNames)}>
       <Form<ViewMetaType> autoSave schema={ViewMetaSchema} values={viewValues} onSave={handleViewUpdate} />
@@ -131,13 +159,54 @@ export const ViewEditor = ({
                   <List.Item<FieldType> key={field.id} item={field} classNames={mx(grid, ghostHover, 'cursor-pointer')}>
                     <List.ItemDragHandle />
                     <List.ItemTitle onClick={() => handleSelect(field)}>{field.path}</List.ItemTitle>
-                    <List.ItemDeleteButton disabled={view.fields.length <= 1} onClick={() => onDelete(field.id)} />
+                    <div className='flex items-center gap-2 -ml-4'>
+                      <List.ItemButton
+                        icon='ph--eye-slash--regular'
+                        disabled={view.fields.length <= 1}
+                        onClick={() => handleHide(field.id)}
+                      />
+                      <List.ItemDeleteButton
+                        icon='ph--trash--regular'
+                        disabled={view.fields.length <= 1}
+                        onClick={() => handleDelete(field.id)}
+                      />
+                    </div>
                   </List.Item>
                 ))}
               </div>
             </>
           )}
         </List.Root>
+
+        {hiddenProperties.length > 0 && (
+          <div>
+            <div role='none' className='p-2'>
+              <label className={mx(inputTextLabel)}>{t('hidden fields label')}</label>
+            </div>
+
+            <List.Root<string>
+              items={hiddenProperties}
+              isItem={(item): item is string => typeof item === 'string'}
+              getId={(property) => property}
+            >
+              {({ items: properties }) => (
+                <div role='list' className='flex flex-col w-full'>
+                  {properties?.map((property) => (
+                    <List.Item<string>
+                      key={property}
+                      item={property}
+                      classNames={mx(grid, ghostHover, 'cursor-pointer')}
+                    >
+                      <div />
+                      <List.ItemTitle>{property}</List.ItemTitle>
+                      <List.ItemButton icon='ph--eye--regular' onClick={() => handleShow(property)} />
+                    </List.Item>
+                  ))}
+                </div>
+              )}
+            </List.Root>
+          </div>
+        )}
       </div>
 
       {field && (

package/src/translations.ts

@@ -9,6 +9,7 @@ export default [
     'en-US': {
       [translationKey]: {
         'fields label': 'Fields',
+        'hidden fields label': 'Hidden Fields',
 
         // TODO(burdon): Standardize field/property.
         'button add property': 'Add property',