@evoke-platform/ui-components 1.6.0-testing.11 → 1.6.0-testing.12

package/dist/published/components/custom/CriteriaBuilder/CriteriaBuilder.d.ts

@@ -1,10 +1,11 @@
+import { Property } from '@evoke-platform/context';
 import React from 'react';
 import 'react-querybuilder/dist/query-builder.css';
 import { EvokeObject } from '../../../types';
-import { ObjectProperty, Operator, PresetValue, TreeViewObject } from './types';
+import { Operator, PresetValue, TreeViewObject } from './types';
 import { ValueEditorProps } from './ValueEditor';
 export type CriteriaInputProps = {
-    properties: ObjectProperty[];
+    properties: Property[];
     setCriteria: (criteria?: Record<string, unknown> | undefined) => void;
     criteria?: Record<string, unknown>;
     originalCriteria?: Record<string, unknown>;

package/dist/published/components/custom/FormField/AddressFieldComponent/AddressFieldComponent.test.js

@@ -8,7 +8,7 @@ import AddressFieldComponent from './addressFieldComponent';
 const addressProperty = {
     id: 'addressLine1',
     name: 'Line 1',
-    type: 'text',
+    type: 'string',
 };
 it('displays matching addresses', async () => {
     const user = userEvent.setup();

package/dist/published/components/custom/FormField/FormField.d.ts

@@ -1,11 +1,10 @@
-import { SelectOption } from '@evoke-platform/context';
+import { Property, SelectOption } from '@evoke-platform/context';
 import React, { FocusEventHandler, ReactNode } from 'react';
-import { ObjectProperty } from '../../../types';
 import { AutocompleteOption } from '../../core';
 import { Address } from './AddressFieldComponent/addressFieldComponent';
 export type FormFieldProps = {
     id?: string;
-    property: ObjectProperty;
+    property: Property;
     onChange?: Function;
     onBlur?: FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
     defaultValue?: unknown;

package/dist/published/components/custom/FormField/Select/Select.test.js

@@ -11,23 +11,28 @@ describe('Single select', () => {
     const choiceProperty = {
         id: 'selectOptions',
         name: 'Select Options',
-        type: 'choices',
+        type: 'string',
     };
     it('returns selected option', async () => {
         const onChangeMock = vi.fn((name, value, property) => { });
         const user = userEvent.setup();
         const options = ['option 1', 'option 2', 'option 3'];
-        render(React.createElement(Select, { id: "testSelect", property: choiceProperty, selectOptions: options, onChange: onChangeMock }));
+        render(React.createElement(Select, { id: "testSelect", property: { ...choiceProperty, enum: options }, selectOptions: options, onChange: onChangeMock }));
         const input = screen.getByRole('combobox');
         await user.click(input);
         const option2 = await screen.findByRole('option', { name: 'option 2' });
         await user.click(option2);
-        expect(onChangeMock).toBeCalledWith('selectOptions', expect.objectContaining({ label: 'option 2', value: 'option 2' }), choiceProperty);
+        expect(onChangeMock).toBeCalledWith('selectOptions', expect.objectContaining({ label: 'option 2', value: 'option 2' }), {
+            id: 'selectOptions',
+            name: 'Select Options',
+            type: 'string',
+            enum: ['option 1', 'option 2', 'option 3'],
+        });
     });
     it('displays matching options', async () => {
         const user = userEvent.setup();
         const options = ['option 1', 'option 2', 'something different'];
-        render(React.createElement(Select, { id: "testSelect", property: choiceProperty, selectOptions: options, onChange: () => { } }));
+        render(React.createElement(Select, { id: "testSelect", property: { ...choiceProperty, enum: options }, selectOptions: options, onChange: () => { } }));
         const input = screen.getByRole('combobox');
         await user.type(input, 'option');
         await screen.findByRole('option', { name: 'option 1' });
@@ -40,7 +45,7 @@ describe('Single select', () => {
         { sortBy: 'DESC', expectedValues: ['option 3', 'option 2', 'option 1'] },
     ])('shows options in $sortBy order as dropdown display', async ({ sortBy, expectedValues }) => {
         const options = ['option 2', 'option 1', 'option 3'];
-        render(React.createElement(Select, { id: "testSelect", property: choiceProperty, selectOptions: options, displayOption: 'dropdown', sortBy: sortBy, onChange: vi.fn() }));
+        render(React.createElement(Select, { id: "testSelect", property: { ...choiceProperty, enum: options }, selectOptions: options, displayOption: 'dropdown', sortBy: sortBy, onChange: vi.fn() }));
         const user = userEvent.setup();
         const input = screen.getByRole('combobox');
         await user.click(input);
@@ -52,7 +57,7 @@ describe('Single select', () => {
         const onChangeMock = vi.fn((name, value, property) => { });
         const user = userEvent.setup();
         const options = ['option 1', 'option 2', 'option 3'];
-        render(React.createElement(Select, { id: "testSelect", property: choiceProperty, selectOptions: options, onChange: onChangeMock, isCombobox: true }));
+        render(React.createElement(Select, { id: "testSelect", property: { ...choiceProperty, enum: options }, selectOptions: options, onChange: onChangeMock, isCombobox: true }));
         const input = screen.getByRole('combobox');
         await user.click(input);
         // Verify the instruction text for a combobox displays as the sub-header of the combobox.
@@ -61,7 +66,12 @@ describe('Single select', () => {
         // Verify the option to add the custom value is displayed as an available option in the dropdown.
         const customOption = await screen.findByRole('option', { name: 'Add "custom option"' });
         await user.click(customOption);
-        expect(onChangeMock).toBeCalledWith('selectOptions', expect.objectContaining({ label: 'Add "custom option"', value: 'custom option' }), choiceProperty);
+        expect(onChangeMock).toBeCalledWith('selectOptions', expect.objectContaining({ label: 'Add "custom option"', value: 'custom option' }), {
+            id: 'selectOptions',
+            name: 'Select Options',
+            type: 'string',
+            enum: ['option 1', 'option 2', 'option 3'],
+        });
     });
 });
 describe('Multi select', () => {
@@ -76,7 +86,7 @@ describe('Multi select', () => {
         const user = userEvent.setup();
         const onChangeMock = vi.fn((name, value, property) => { });
         const options = ['option 1', 'option 2', 'option 3'];
-        render(React.createElement(Select, { id: "testSelect", property: multiChoiceProperty, selectOptions: options, onChange: onChangeMock }));
+        render(React.createElement(Select, { id: "testSelect", property: { ...multiChoiceProperty, enum: options }, selectOptions: options, onChange: onChangeMock }));
         const input = screen.getByRole('combobox');
         await user.click(input);
         const option2 = await screen.findByRole('option', { name: 'option 2' });
@@ -86,13 +96,18 @@ describe('Multi select', () => {
         const option3 = await screen.findByRole('option', { name: 'option 3' });
         await user.click(option3);
         expect(onChangeMock).toBeCalledTimes(2);
-        expect(onChangeMock).lastCalledWith('multiSelect', ['option 2', 'option 3'], multiChoiceProperty);
+        expect(onChangeMock).lastCalledWith('multiSelect', ['option 2', 'option 3'], {
+            id: 'multiSelect',
+            name: 'Select Multiple',
+            type: 'array',
+            enum: ['option 1', 'option 2', 'option 3'],
+        });
     });
     it('allows the user to enter custom values if it is combobox component', async () => {
         const onChangeMock = vi.fn((name, value, property) => { });
         const user = userEvent.setup();
         const options = ['option 1', 'option 2', 'option 3'];
-        render(React.createElement(Select, { id: "multiSelect", property: multiChoiceProperty, selectOptions: options, onChange: onChangeMock, isCombobox: true }));
+        render(React.createElement(Select, { id: "multiSelect", property: { ...multiChoiceProperty, enum: options }, selectOptions: options, onChange: onChangeMock, isCombobox: true }));
         const input = screen.getByRole('combobox');
         await user.click(input);
         // Verify the instruction text for a combobox displays as the sub-header of the combobox.
@@ -104,13 +119,18 @@ describe('Multi select', () => {
         const customOption2 = await screen.findByRole('option', { name: 'Add "custom option 2"' });
         await user.click(customOption2);
         expect(onChangeMock).toBeCalledTimes(2);
-        expect(onChangeMock).lastCalledWith('multiSelect', ['custom option 1', 'custom option 2'], multiChoiceProperty);
+        expect(onChangeMock).lastCalledWith('multiSelect', ['custom option 1', 'custom option 2'], {
+            id: 'multiSelect',
+            name: 'Select Multiple',
+            type: 'array',
+            enum: ['option 1', 'option 2', 'option 3'],
+        });
     });
     it('allows the user to enter custom values in conjunction with the predefined options if it is combobox component', async () => {
         const onChangeMock = vi.fn((name, value, property) => { });
         const user = userEvent.setup();
         const options = ['option 1', 'option 2', 'option 3'];
-        render(React.createElement(Select, { id: "multiSelect", property: multiChoiceProperty, selectOptions: options, onChange: onChangeMock, isCombobox: true }));
+        render(React.createElement(Select, { id: "multiSelect", property: { ...multiChoiceProperty, enum: options }, selectOptions: options, onChange: onChangeMock, isCombobox: true }));
         const input = screen.getByRole('combobox');
         await user.click(input);
         // Verify the instruction text for a combobox displays as the sub-header of the combobox.
@@ -122,14 +142,19 @@ describe('Multi select', () => {
         const option1 = await screen.findByRole('option', { name: 'option 1' });
         await user.click(option1);
         expect(onChangeMock).toBeCalledTimes(2);
-        expect(onChangeMock).lastCalledWith('multiSelect', ['custom option 1', 'option 1'], multiChoiceProperty);
+        expect(onChangeMock).lastCalledWith('multiSelect', ['custom option 1', 'option 1'], {
+            id: 'multiSelect',
+            name: 'Select Multiple',
+            type: 'array',
+            enum: ['option 1', 'option 2', 'option 3'],
+        });
     });
 });
 describe('Radio Single select', () => {
     const choiceProperty = {
         id: 'selectOptions',
         name: 'Select Options',
-        type: 'choices',
+        type: 'string',
     };
     it('returns selected radio option', async () => {
         const user = userEvent.setup();
@@ -146,7 +171,7 @@ describe('Radio Single select', () => {
         { sortBy: 'DESC', expectedValues: ['option 3', 'option 2', 'option 1'] },
     ])('shows options in $sortBy order as radio display', async ({ sortBy, expectedValues }) => {
         const options = ['option 2', 'option 1', 'option 3'];
-        render(React.createElement(Select, { id: "testSelect", property: choiceProperty, selectOptions: options, displayOption: 'radioButton', sortBy: sortBy, onChange: vi.fn() }));
+        render(React.createElement(Select, { id: "testSelect", property: { ...choiceProperty, enum: options }, selectOptions: options, displayOption: 'radioButton', sortBy: sortBy, onChange: vi.fn() }));
         const radioButtons = screen.getAllByRole('radio');
         const radioValues = radioButtons.map((radioButton) => radioButton.value);
         expect(radioValues).toEqual(expectedValues);
@@ -154,7 +179,7 @@ describe('Radio Single select', () => {
     it('renders an "Other" option in the radio group if the component is configured to support a custom value', async () => {
         const onChangeMock = vi.fn((name, value, property) => { });
         const options = ['option 1', 'option 2', 'option 3'];
-        render(React.createElement(Select, { id: "testSelect", property: choiceProperty, selectOptions: options, displayOption: 'radioButton', sortBy: 'ASC', onChange: onChangeMock, isCombobox: true }));
+        render(React.createElement(Select, { id: "testSelect", property: { ...choiceProperty, enum: options }, selectOptions: options, displayOption: 'radioButton', sortBy: 'ASC', onChange: onChangeMock, isCombobox: true }));
         await screen.findByRole('radio', { name: 'Other' });
     });
     it('renders a text field for a custom option if the "Other" option is selected', async () => {

package/dist/published/stories/FormField.stories.js

@@ -10,8 +10,7 @@ InputField.args = {
     property: {
         id: 'fullName',
         name: 'Full Name',
-        type: 'text',
-        // enum?: string[],
+        type: 'string',
         required: true,
     },
     onChange: (id, value) => console.log('id= ', id, 'Value= ', value),

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@evoke-platform/ui-components",
-    "version": "1.6.0-testing.11",
+    "version": "1.6.0-testing.12",
     "description": "",
     "main": "dist/published/index.js",
     "module": "dist/published/index.js",