@dxos/react-ui-form 0.8.2-staging.7ac8446 → 0.8.3-main.672df60

package/src/components/ViewEditor/ViewEditor.stories.tsx

@@ -5,20 +5,23 @@
 import '@dxos-theme';
 
 import { type Meta, type StoryObj } from '@storybook/react';
+import { Schema } from 'effect';
 import React, { useCallback, useMemo, useState } from 'react';
 
-import { Format, type EchoSchema, S, toJsonSchema, TypedObject } from '@dxos/echo-schema';
+import { Format, type EchoSchema, toJsonSchema, TypedObject } from '@dxos/echo-schema';
 import { Filter, useQuery, useSpace } from '@dxos/react-client/echo';
 import { withClientProvider } from '@dxos/react-client/testing';
 import { useAsyncEffect } from '@dxos/react-ui';
 import { ViewProjection, ViewType, createView } from '@dxos/schema';
 import { withTheme, withLayout } from '@dxos/storybook-utils';
 
-import { ViewEditor } from './ViewEditor';
+import { ViewEditor, type ViewEditorProps } from './ViewEditor';
 import translations from '../../translations';
 import { TestLayout, TestPanel } from '../testing';
 
-const DefaultStory = () => {
+type StoryProps = Pick<ViewEditorProps, 'readonly'>;
+
+const DefaultStory = (props: StoryProps) => {
   const space = useSpace();
   const [schema, setSchema] = useState<EchoSchema>();
   const [view, setView] = useState<ViewType>();
@@ -26,7 +29,7 @@ const DefaultStory = () => {
   useAsyncEffect(async () => {
     if (space) {
       class TestSchema extends TypedObject({ typename: 'example.com/type/Test', version: '0.1.0' })({
-        name: S.String,
+        name: Schema.String,
         email: Format.Email,
         salary: Format.Currency(),
       }) {}
@@ -41,7 +44,7 @@ const DefaultStory = () => {
     }
   }, [space]);
 
-  const views = useQuery(space, Filter.schema(ViewType));
+  const views = useQuery(space, Filter.type(ViewType));
   const currentTypename = useMemo(() => view?.query?.typename, [view]);
   const updateViewTypename = useCallback(
     (newTypename: string) => {
@@ -56,6 +59,7 @@ const DefaultStory = () => {
     },
     [views, schema],
   );
+
   const handleDelete = useCallback((property: string) => projection?.deleteFieldProjection(property), [projection]);
 
   if (!schema || !view || !projection) {
@@ -69,6 +73,7 @@ const DefaultStory = () => {
           schema={schema}
           view={view}
           registry={space?.db.schemaRegistry}
+          readonly={props.readonly}
           onTypenameChanged={updateViewTypename}
           onDelete={handleDelete}
         />
@@ -77,11 +82,10 @@ const DefaultStory = () => {
   );
 };
 
-const meta: Meta<typeof ViewEditor> = {
+const meta: Meta<StoryProps> = {
   title: 'ui/react-ui-form/ViewEditor',
-  component: ViewEditor,
   render: DefaultStory,
-  decorators: [withClientProvider({ createSpace: true }), withLayout({ fullscreen: true, tooltips: true }), withTheme],
+  decorators: [withClientProvider({ createSpace: true }), withLayout({ fullscreen: true }), withTheme],
   parameters: {
     translations,
   },
@@ -89,6 +93,12 @@ const meta: Meta<typeof ViewEditor> = {
 
 export default meta;
 
-type Story = StoryObj;
+type Story = StoryObj<StoryProps>;
 
 export const Default: Story = {};
+
+export const Readonly: Story = {
+  args: {
+    readonly: true,
+  },
+};

package/src/components/ViewEditor/ViewEditor.test.tsx

@@ -0,0 +1,166 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { composeStories } from '@storybook/react';
+import { screen, cleanup, fireEvent, waitFor } from '@testing-library/react';
+import { afterEach, describe, expect, test } from 'vitest';
+
+import * as stories from './ViewEditor.stories';
+
+const { Default } = composeStories(stories);
+
+const waitForViewEditor = async () => {
+  await waitFor(() => {
+    expect(screen.getByTestId('debug')).toBeInTheDocument();
+  });
+};
+
+describe('ViewEditor', () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  test('renders view editor', async () => {
+    await Default.run();
+    await waitForViewEditor();
+    expect(screen.getByText('View')).toBeInTheDocument();
+  });
+
+  test('change property name', async () => {
+    // Arrange.
+    await Default.run();
+    await waitForViewEditor();
+
+    // Act.
+    const nameField = screen.getByText('name');
+    fireEvent.click(nameField);
+
+    const fieldInput = screen.getByPlaceholderText('Field name.');
+    fireEvent.change(fieldInput, { target: { value: 'new_property' } });
+
+    fireEvent.click(screen.getByTestId('save-button'));
+
+    // Assert.
+    expect(screen.getByText('new_property')).toBeInTheDocument();
+
+    const debugInfo = JSON.parse(screen.getByTestId('debug').textContent!);
+
+    // Check schema contains new_property.
+    const schemaProperties = debugInfo.schema._storedSchema.jsonSchema.properties;
+    expect(schemaProperties.new_property).toBeDefined();
+
+    // Check view contains new_property field.
+    const newPropertyField = debugInfo.view.fields.find((field: any) => field.path === 'new_property');
+    expect(newPropertyField).toBeDefined();
+    expect(newPropertyField.path).toBe('new_property');
+
+    // Check projection contains new_property.
+    const newPropertyProjection = debugInfo.projection._fieldProjections.find(
+      (proj: any) => proj.field.path === 'new_property',
+    );
+    expect(newPropertyProjection).toBeDefined();
+    expect(newPropertyProjection.props.property).toBe('new_property');
+  });
+
+  test('add new property', async () => {
+    await Default.run();
+    await waitForViewEditor();
+
+    // Click the add property button
+    const addButton = screen.getByText('Add property');
+    fireEvent.click(addButton);
+
+    // Fill out the property field
+    const fieldInput = screen.getByPlaceholderText('Field name.');
+    fireEvent.change(fieldInput, { target: { value: 'added_property' } });
+
+    // Click the format combo box and select the first option
+    const formatCombo = screen.getByRole('combobox');
+    fireEvent.click(formatCombo);
+
+    const firstOption = screen.getAllByRole('option')[0];
+    fireEvent.click(firstOption);
+
+    // Save the changes
+    fireEvent.click(screen.getByTestId('save-button'));
+
+    // Assert the new property exists
+    expect(screen.getByText('added_property')).toBeInTheDocument();
+
+    const debugInfo = JSON.parse(screen.getByTestId('debug').textContent!);
+
+    // Check schema contains added_property
+    const schemaProperties = debugInfo.schema._storedSchema.jsonSchema.properties;
+    expect(schemaProperties.added_property).toBeDefined();
+
+    // Check view contains added_property field
+    const addedPropertyField = debugInfo.view.fields.find((field: any) => field.path === 'added_property');
+    expect(addedPropertyField).toBeDefined();
+    expect(addedPropertyField.path).toBe('added_property');
+
+    // Check projection contains added_property
+    const addedPropertyProjection = debugInfo.projection._fieldProjections.find(
+      (proj: any) => proj.field.path === 'added_property',
+    );
+    expect(addedPropertyProjection).toBeDefined();
+    expect(addedPropertyProjection.props.property).toBe('added_property');
+  });
+
+  test('delete property', async () => {
+    await Default.run();
+    await waitForViewEditor();
+
+    // Find the delete button for the 'name' property
+    const nameProperty = screen.getByText('name');
+    const propertyRow = nameProperty.closest('[role="listitem"]');
+    const deleteButton = propertyRow?.querySelector('button:last-child');
+
+    if (!deleteButton) {
+      throw new Error('Delete button not found');
+    }
+
+    // Click the delete button
+    fireEvent.click(deleteButton);
+
+    // Assert the property is no longer visible
+    expect(screen.queryByText('name')).not.toBeInTheDocument();
+
+    const debugInfo = JSON.parse(screen.getByTestId('debug').textContent!);
+
+    // Check schema no longer contains the name property
+    const schemaProperties = debugInfo.schema._storedSchema.jsonSchema.properties;
+    expect(schemaProperties.name).toBeUndefined();
+
+    // Check view no longer contains the name field
+    const nameField = debugInfo.view.fields.find((field: any) => field.path === 'name');
+    expect(nameField).toBeUndefined();
+
+    // Check projection no longer contains the name property
+    const nameProjection = debugInfo.projection._fieldProjections.find((proj: any) => proj.field.path === 'name');
+    expect(nameProjection).toBeUndefined();
+  });
+
+  test('hide and show property', async () => {
+    await Default.run();
+    await waitForViewEditor();
+
+    // Click the first hide button
+    const hideButtons = screen.getAllByTestId('hide-field-button');
+    fireEvent.click(hideButtons[0]);
+
+    // Check that hiddenFields is non-empty
+    let debugInfo = JSON.parse(screen.getByTestId('debug').textContent!);
+    expect(debugInfo.view.hiddenFields.length).toBeGreaterThan(0);
+
+    // Wait for the show button to appear and click it
+    await waitFor(() => {
+      expect(screen.getByTestId('show-field-button')).toBeInTheDocument();
+    });
+    fireEvent.click(screen.getByTestId('show-field-button'));
+
+    // Check that hiddenFields is empty again
+    debugInfo = JSON.parse(screen.getByTestId('debug').textContent!);
+    expect(debugInfo.view.hiddenFields.length).toBe(0);
+  });
+});

package/src/components/ViewEditor/ViewEditor.tsx

@@ -2,12 +2,13 @@
 // Copyright 2024 DXOS.org
 //
 
+import { Schema } from 'effect';
 import React, { useCallback, useMemo, useState } from 'react';
 
 import { type SchemaRegistry } from '@dxos/echo-db';
-import { AST, Format, type BaseSchema, S, type JsonProp } from '@dxos/echo-schema';
+import { EchoSchema, Format, type JsonProp, isMutable, toJsonSchema } from '@dxos/echo-schema';
 import { invariant } from '@dxos/invariant';
-import { IconButton, type ThemedClassName, useTranslation } from '@dxos/react-ui';
+import { Icon, IconButton, Message, type ThemedClassName, useTranslation } from '@dxos/react-ui';
 import { List } from '@dxos/react-ui-list';
 import { ghostHover, inputTextLabel, mx } from '@dxos/react-ui-theme';
 import { FieldSchema, type FieldType, type ViewType, ViewProjection, VIEW_FIELD_LIMIT } from '@dxos/schema';
@@ -18,19 +19,19 @@ import { Form } from '../Form';
 
 const grid = 'grid grid-cols-[32px_1fr_32px] min-bs-[2.5rem]';
 
-const ViewMetaSchema = S.Struct({
-  name: S.String.annotations({
-    [AST.TitleAnnotationId]: 'View',
+const ViewMetaSchema = Schema.Struct({
+  name: Schema.String.annotations({
+    title: 'View',
   }),
   typename: Format.URL.annotations({
-    [AST.TitleAnnotationId]: 'Typename',
+    title: 'Typename',
   }),
-}).pipe(S.mutable);
+}).pipe(Schema.mutable);
 
-type ViewMetaType = S.Schema.Type<typeof ViewMetaSchema>;
+type ViewMetaType = Schema.Schema.Type<typeof ViewMetaSchema>;
 
 export type ViewEditorProps = ThemedClassName<{
-  schema: BaseSchema;
+  schema: Schema.Schema.AnyNoContext;
   view: ViewType;
   registry?: SchemaRegistry;
   readonly?: boolean;
@@ -53,8 +54,13 @@ export const ViewEditor = ({
   onDelete,
 }: ViewEditorProps) => {
   const { t } = useTranslation(translationKey);
-  const projection = useMemo(() => new ViewProjection(schema.jsonSchema, view), [schema, view]);
+  const projection = useMemo(() => {
+    // Use reactive and mutable version of json schema when schema is mutable.
+    const jsonSchema = schema instanceof EchoSchema ? schema.jsonSchema : toJsonSchema(schema);
+    return new ViewProjection(jsonSchema, view);
+  }, [schema, view]);
   const [field, setField] = useState<FieldType>();
+  const immutable = readonly || !isMutable(schema);
 
   // TODO(burdon): Should be reactive.
   const viewValues = useMemo(() => {
@@ -66,37 +72,43 @@ export const ViewEditor = ({
     };
   }, [view]);
 
-  const handleSelect = useCallback((field: FieldType) => {
-    setField((f) => (f === field ? undefined : field));
-  }, []);
+  const handleSelect = useCallback(
+    (field: FieldType) => {
+      if (immutable) {
+        return;
+      }
+      setField((f) => (f === field ? undefined : field));
+    },
+    [immutable],
+  );
 
   // TODO(burdon): Check if mutable; variant of useCallback that return undefined if readonly?
 
   const handleAdd = useCallback(() => {
-    invariant(!schema.readonly);
+    invariant(!immutable);
     const field = projection.createFieldProjection();
     setField(field);
   }, [schema, view]);
 
   const handleUpdate = useCallback(
     ({ name, typename }: ViewMetaType) => {
-      invariant(!schema.readonly);
+      invariant(!immutable);
       requestAnimationFrame(() => {
         if (view.name !== name) {
           view.name = name;
         }
 
-        if (view.query.typename !== typename) {
+        if (view.query.typename !== typename && !immutable) {
           onTypenameChanged?.(typename);
         }
       });
     },
-    [schema, view, onTypenameChanged],
+    [schema, view, onTypenameChanged, immutable],
   );
 
   const handleDelete = useCallback(
     (fieldId: string) => {
-      invariant(!schema.readonly);
+      invariant(!immutable);
       if (fieldId === field?.id) {
         setField(undefined);
       }
@@ -108,7 +120,7 @@ export const ViewEditor = ({
 
   const handleMove = useCallback(
     (fromIndex: number, toIndex: number) => {
-      invariant(!schema.readonly);
+      invariant(!immutable);
       // NOTE(ZaymonFC): Using arrayMove here causes a race condition with the kanban model.
       const fields = [...view.fields];
       const [moved] = fields.splice(fromIndex, 1);
@@ -139,15 +151,26 @@ export const ViewEditor = ({
   );
 
   return (
-    <div role='none' className={mx('flex flex-col w-full divide-y divide-separator', classNames)}>
+    <div role='none' className={mx('overflow-y-auto', classNames)}>
+      {immutable && (
+        <div role='none' className='mbe-2'>
+          <Message.Root valence='neutral' className='rounded'>
+            <Message.Title>
+              <Icon icon='ph--info--regular' size={5} classNames='inline' /> {t('system schema title')}
+            </Message.Title>
+            <Message.Body>{t('system schema description')}</Message.Body>
+          </Message.Root>
+        </div>
+      )}
       <Form<ViewMetaType>
         autoSave
         schema={ViewMetaSchema}
         values={viewValues}
-        onSave={schema.readonly ? undefined : handleUpdate}
+        onSave={handleUpdate}
+        classNames='min-bs-0 overflow-y-auto'
       />
 
-      <div>
+      <div role='none' className='min-bs-0 overflow-y-auto'>
         {/* TODO(burdon): Clean up common form ux. */}
         <div role='none' className='p-2'>
           <label className={mx(inputTextLabel)}>{t('fields label')}</label>
@@ -155,9 +178,9 @@ export const ViewEditor = ({
 
         <List.Root<FieldType>
           items={view.fields}
-          isItem={S.is(FieldSchema)}
+          isItem={Schema.is(FieldSchema)}
           getId={(field) => field.id}
-          onMove={schema.readonly ? undefined : handleMove}
+          onMove={immutable ? undefined : handleMove}
         >
           {({ items: fields }) => (
             <>
@@ -170,7 +193,11 @@ export const ViewEditor = ({
 
               <div role='list' className='flex flex-col w-full'>
                 {fields?.map((field) => (
-                  <List.Item<FieldType> key={field.id} item={field} classNames={mx(grid, ghostHover, 'cursor-pointer')}>
+                  <List.Item<FieldType>
+                    key={field.id}
+                    item={field}
+                    classNames={mx(grid, ghostHover, !immutable && 'cursor-pointer')}
+                  >
                     <List.ItemDragHandle />
                     <List.ItemTitle onClick={() => handleSelect(field)}>{field.path}</List.ItemTitle>
                     <div className='flex items-center gap-2 -ml-4'>
@@ -178,8 +205,9 @@ export const ViewEditor = ({
                         icon='ph--eye-slash--regular'
                         disabled={view.fields.length <= 1}
                         onClick={() => handleHide(field.id)}
+                        data-testid='hide-field-button'
                       />
-                      {!schema.readonly && (
+                      {!immutable && (
                         <List.ItemDeleteButton
                           icon='ph--trash--regular'
                           disabled={view.fields.length <= 1}
@@ -211,11 +239,15 @@ export const ViewEditor = ({
                     <List.Item<string>
                       key={property}
                       item={property}
-                      classNames={mx(grid, ghostHover, 'cursor-pointer')}
+                      classNames={mx(grid, ghostHover, !immutable && 'cursor-pointer')}
                     >
                       <div />
                       <List.ItemTitle>{property}</List.ItemTitle>
-                      <List.ItemButton icon='ph--eye--regular' onClick={() => handleShow(property)} />
+                      <List.ItemButton
+                        icon='ph--eye--regular'
+                        onClick={() => handleShow(property)}
+                        data-testid='show-field-button'
+                      />
                     </List.Item>
                   ))}
                 </div>
@@ -237,13 +269,14 @@ export const ViewEditor = ({
       )}
 
       {!readonly && !field && (
-        <div className='flex p-2 justify-center'>
+        <div role='none' className='p-2'>
           <IconButton
             icon='ph--plus--regular'
             label={t('button add property')}
-            onClick={schema.readonly ? undefined : handleAdd}
+            onClick={immutable ? undefined : handleAdd}
             // TODO(burdon): Show field limit in ux (not tooltip).
             disabled={view.fields.length >= VIEW_FIELD_LIMIT}
+            classNames='flex is-full'
           />
         </div>
       )}

package/src/components/deprecated/Form.stories.tsx

@@ -7,7 +7,7 @@ import '@dxos-theme';
 import { type Meta, type StoryObj } from '@storybook/react';
 import React from 'react';
 
-import { create } from '@dxos/live-object';
+import { live } from '@dxos/live-object';
 import { testData, TestSchema, testView, type TestType } from '@dxos/schema/testing';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
 
@@ -39,23 +39,23 @@ type Story = StoryObj<DeprecatedFormProps<TestType>>;
 
 export const Default: Story = {
   args: {
-    object: create(testData),
-    view: create(testView),
+    object: live(testData),
+    view: live(testView),
     schema: TestSchema,
   },
 };
 
 export const Empty: Story = {
   args: {
-    view: create(testView),
+    view: live(testView),
     schema: TestSchema,
   },
 };
 
 export const Readonly: Story = {
   args: {
-    object: create(testData),
-    view: create(testView),
+    object: live(testData),
+    view: live(testView),
     schema: TestSchema,
     readonly: true,
   },

package/src/components/deprecated/Form.tsx

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import { SchemaAST as AST, type Schema as S, Option, pipe } from 'effect';
+import { SchemaAST, type Schema, Option, pipe } from 'effect';
 import React, { useState } from 'react';
 
 import { findProperty } from '@dxos/effect';
@@ -13,7 +13,7 @@ import { type ViewType, getFieldValue, setFieldValue } from '@dxos/schema';
 export type DeprecatedFormProps<T extends {} = {}> = ThemedClassName<{
   view: ViewType;
   object: T;
-  schema?: S.Schema<T>;
+  schema?: Schema.Schema<T>;
   readonly?: boolean;
 }>;
 
@@ -31,16 +31,16 @@ export const DeprecatedForm = <T extends {} = {}>({
     <div role='none' className={mx('flex flex-col w-full gap-2 p-2', classNames)}>
       {view.fields.map((field) => {
         const prop = schema && findProperty(schema, field.path);
-        const title = (prop && pipe(AST.getTitleAnnotation(prop), Option.getOrUndefined)) ?? '';
-        const description = (prop && pipe(AST.getDescriptionAnnotation(prop), Option.getOrUndefined)) ?? title;
+        const title = (prop && pipe(SchemaAST.getTitleAnnotation(prop), Option.getOrUndefined)) ?? '';
+        const description = (prop && pipe(SchemaAST.getDescriptionAnnotation(prop), Option.getOrUndefined)) ?? title;
         // const format =
-        //   (prop && (getPatternAnnotation(prop) ?? (AST.isNumberKeyword(prop) && RealNumberFormat))) || undefined;
+        //   (prop && (getPatternAnnotation(prop) ?? (SchemaAST.isNumberKeyword(prop) && RealNumberFormat))) || undefined;
 
         //
         // Boolean
         //
 
-        if (prop && AST.isBooleanKeyword(prop)) {
+        if (prop && SchemaAST.isBooleanKeyword(prop)) {
           const value = object && getFieldValue(object, field);
           const onChange = (checked: boolean) => {
             setFieldValue(object, field, checked);

package/src/components/deprecated/FormInput.tsx

@@ -12,7 +12,7 @@ import { mx, textBlockWidth } from '@dxos/react-ui-theme';
  */
 export const DeprecatedFormContainer = ({ children, classNames }: ThemedClassName<PropsWithChildren>) => {
   return (
-    <div role='none' className='w-full p-4 justify-center overflow-x-hidden overflow-y-auto'>
+    <div role='none' className='container-max-width p-4 justify-center overflow-x-hidden overflow-y-auto'>
       <div role='form' className={mx('flex flex-col', textBlockWidth, classNames)}>
         {children}
       </div>

package/src/components/index.ts

@@ -3,6 +3,7 @@
 //
 
 export * from './deprecated';
+
 export * from './ControlSection';
 export * from './FieldEditor';
 export * from './Form';

package/src/components/testing.tsx

@@ -5,20 +5,16 @@
 import React, { type PropsWithChildren } from 'react';
 
 import { type ThemedClassName } from '@dxos/react-ui';
-import { SyntaxHighlighter } from '@dxos/react-ui-syntax-highlighter';
+import { JsonFilter } from '@dxos/react-ui-syntax-highlighter';
 import { mx } from '@dxos/react-ui-theme';
 
 export const TestPanel = ({ classNames, children }: ThemedClassName<PropsWithChildren>) => (
-  <div className='flex flex-col p-4'>
-    <div className={mx('flex flex-col border border-separator rounded w-[300px]', classNames)}>{children}</div>
-  </div>
+  <div className={mx('w-full max-w-[30rem] border border-separator p-2 rounded', classNames)}>{children}</div>
 );
 
 export const TestLayout = ({ classNames, json, children }: ThemedClassName<PropsWithChildren<{ json?: any }>>) => (
-  <div className='w-full h-full grid grid-cols-3'>
-    <div className={mx('flex col-span-2 w-full justify-center overflow-y-auto', classNames)}>{children}</div>
-    <SyntaxHighlighter language='json' className='w-full text-xs font-thin'>
-      {JSON.stringify(json, null, 2)}
-    </SyntaxHighlighter>
+  <div className='w-full h-full grid grid-cols-[1fr_1fr]'>
+    <div className={mx('m-2 justify-center overflow-y-auto', classNames)}>{children}</div>
+    <JsonFilter data={json} classNames='w-full text-xs' testId='debug' />
   </div>
 );

package/src/hooks/index.ts

@@ -1,5 +1,7 @@
 //
-// Copyright 2024 DXOS.org
+// Copyright 2025 DXOS.org
 //
 
 export * from './useForm';
+export * from './useRefQueryLookupHandler';
+export * from './useQueryRefOptions';

package/src/hooks/useForm.ts

@@ -2,7 +2,7 @@
 // Copyright 2025 DXOS.org
 //
 
-import { SchemaAST as AST, type Schema as S } from 'effect';
+import { SchemaAST, type Schema } from 'effect';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 
 import { type BaseObject, getValue, setValue } from '@dxos/echo-schema';
@@ -45,7 +45,7 @@ export interface FormOptions<T extends BaseObject> {
   /**
    * Effect schema (Type literal).
    */
-  schema: S.Schema<T>;
+  schema: Schema.Schema<T, any>;
 
   /**
    * Initial values (which may not pass validation).
@@ -90,9 +90,10 @@ export const useForm = <T extends BaseObject>({
   onValid,
   onSave,
 }: FormOptions<T>): FormHandler<T> => {
-  invariant(AST.isTypeLiteral(schema.ast));
+  invariant(SchemaAST.isTypeLiteral(schema.ast));
 
   const [values, setValues] = useState<Partial<T>>(initialValues);
+
   useEffect(() => {
     setValues(initialValues);
   }, [initialValues]);