@evoke-platform/ui-components 1.4.0-testing.3 → 1.4.0-testing.5

package/dist/published/components/core/Alert/Alert.js

@@ -31,7 +31,7 @@ const colorMap = {
 const Alert = (props) => {
     const { children, action, severity, onClose, color } = props;
     const getIcon = () => {
-        const iconColor = color ? colorMap[color] ?? color : severity ? colorMap[severity] : colorMap['success'];
+        const iconColor = color ? (colorMap[color] ?? color) : severity ? colorMap[severity] : colorMap['success'];
         switch (severity) {
             case 'error':
                 return React.createElement(ErrorRounded, { sx: { ...styles.icon, color: iconColor } });

package/dist/published/components/core/Autocomplete/Autocomplete.js

@@ -14,7 +14,7 @@ const Autocomplete = (props) => {
                     ? option
                     : typeof option?.label === 'boolean'
                         ? new Boolean(option?.label).toString()
-                        : option?.label ?? '',
+                        : (option?.label ?? ''),
                 value: option?.value ?? option,
             };
         })
@@ -62,7 +62,7 @@ const Autocomplete = (props) => {
                     marginTop: '3px',
                     borderRadius: '8px',
                     ...props.sx,
-                }, options: sortedOptions, popupIcon: (props.popupIcon ?? (props.readOnly || props.disabled)) ? null : React.createElement(ExpandMore, null) }),
+                }, options: sortedOptions, popupIcon: props.popupIcon ? props.popupIcon : props.readOnly || props.disabled ? null : React.createElement(ExpandMore, null) }),
             props.error && React.createElement(FieldError, { required: props.required, label: props.errorMessage })));
     }
     else {
@@ -78,7 +78,7 @@ const Autocomplete = (props) => {
                     backgroundColor: props.readOnly ? '#f4f6f8' : 'auto',
                     borderRadius: '8px',
                     ...props.sx,
-                }, options: sortedOptions, popupIcon: (props.popupIcon ?? (props.readOnly || props.disabled)) ? null : React.createElement(ExpandMore, null) }),
+                }, options: sortedOptions, popupIcon: props.popupIcon ? props.popupIcon : props.readOnly || props.disabled ? null : React.createElement(ExpandMore, null) }),
             props.error && React.createElement(FieldError, { required: props.required, label: props.errorMessage })));
     }
 };

package/dist/published/components/core/Chip/Chip.d.ts

@@ -1,4 +1,7 @@
-import { ChipProps } from '@mui/material';
+import { ChipProps as MUIChipProps } from '@mui/material';
 import React from 'react';
-declare const Chip: (props: ChipProps) => React.JSX.Element;
+export interface ChipProps extends MUIChipProps {
+    tooltip?: string;
+}
+declare const Chip: ({ tooltip, ...props }: ChipProps) => React.JSX.Element;
 export default Chip;

package/dist/published/components/core/Chip/Chip.js

@@ -1,8 +1,11 @@
 import { Chip as MUIChip } from '@mui/material';
 import React from 'react';
-import UIThemeProvider from '../../../theme';
-const Chip = (props) => {
-    return (React.createElement(UIThemeProvider, null,
+import Tooltip from '../Tooltip';
+const Chip = ({ tooltip, ...props }) => {
+    if (!tooltip) {
+        return React.createElement(MUIChip, { ...props });
+    }
+    return (React.createElement(Tooltip, { title: tooltip },
         React.createElement(MUIChip, { ...props })));
 };
 export default Chip;

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

@@ -26,6 +26,7 @@ export type CriteriaInputProps = {
         fetchObject?: (objectId: string) => Promise<EvokeObject | undefined>;
         object: TreeViewObject;
     };
+    rootObject?: EvokeObject;
     /**
      * String matching operators ('contains', 'beginsWith', 'endsWith') use regex patterns.
      * Special characters like .*+?^${}()|[] are escaped (\\) by default.

package/dist/published/components/custom/CriteriaBuilder/CriteriaBuilder.js

@@ -265,7 +265,7 @@ export const valueEditor = (props) => {
     return ValueEditor(props);
 };
 const CriteriaBuilder = (props) => {
-    const { properties, criteria, setCriteria, originalCriteria, enablePresetValues, presetValues, operators, disabled, disabledCriteria, hideBorder, presetGroupLabel, customValueEditor, treeViewOpts, disableRegexEscapeChars, } = props;
+    const { properties, criteria, setCriteria, originalCriteria, enablePresetValues, presetValues, operators, disabled, disabledCriteria, hideBorder, presetGroupLabel, customValueEditor, treeViewOpts, disableRegexEscapeChars, rootObject, } = props;
     const [query, setQuery] = useState(undefined);
     const [propertyTreeMap, setPropertyTreeMap] = useState();
     useEffect(() => {
@@ -483,6 +483,7 @@ const CriteriaBuilder = (props) => {
                         valueEditor: customValueEditor ? customValueEditor.component : valueEditor,
                     }, context: {
                         ...(customValueEditor?.props ?? {}),
+                        rootObject,
                         presetValues,
                         enablePresetValues,
                         presetGroupLabel,

package/dist/published/components/custom/CriteriaBuilder/PropertyTree.js

@@ -123,8 +123,8 @@ const PropertyTree = ({ fetchObject, handleTreePropertySelect, rootObject, value
         }, getOptionLabel: (option) => {
             // Retrieve the full name path from the map
             const namePath = typeof option === 'string'
-                ? objectPropertyNamePathMap[option] ?? ''
-                : objectPropertyNamePathMap[option.value] ?? '';
+                ? (objectPropertyNamePathMap[option] ?? '')
+                : (objectPropertyNamePathMap[option.value] ?? '');
             return truncateNamePath(namePath, NAME_PATH_LIMIT);
         }, renderInput: (params) => {
             const fullDisplayName = value && objectPropertyNamePathMap[value];

package/dist/published/components/custom/Form/Common/Form.js

@@ -1,7 +1,7 @@
 import { useApp, useAuthenticationContext, } from '@evoke-platform/context';
 import { Components, Form as FormIO, Utils } from '@formio/react';
 import { flatten } from 'flat';
-import { isEmpty, isEqual, isObject, pick, toPairs } from 'lodash';
+import { isEmpty, isEqual, isObject, omit, pick, toPairs } from 'lodash';
 import React, { useEffect, useRef, useState } from 'react';
 import '../../../../styles/form-component.css';
 import { Skeleton, Snackbar } from '../../../core';
@@ -126,7 +126,7 @@ export function Form(props) {
         const allDefaultPages = { ...defaultPages, ...foundDefaultPages };
         // visibleObjectProperties
         if (input && object?.properties) {
-            const allCriteriaInputs = getAllCriteriaInputs(action?.inputProperties ? flattenFormComponents(action.inputProperties) : action?.parameters ?? []);
+            const allCriteriaInputs = getAllCriteriaInputs(action?.inputProperties ? flattenFormComponents(action.inputProperties) : (action?.parameters ?? []));
             if (input.length || action?.type !== 'delete') {
                 // formIO builder-configured input properties exist
                 const newComponentProps = await addObjectPropertiesToComponentProps(object.properties, input, allCriteriaInputs, instance, {
@@ -139,6 +139,18 @@ export function Form(props) {
                 if (!hideButtons && !isReadOnly) {
                     newComponentProps.push(BottomButtons);
                 }
+                if (action?.type !== 'create') {
+                    // Add an additional, hidden _instance property on update/delete actions
+                    // so that instance data is accessible in conditional display logic.
+                    const hiddenComponent = {
+                        key: '_instance',
+                        type: 'hidden',
+                        input: true,
+                        tableView: false,
+                        defaultValue: instance,
+                    };
+                    newComponentProps.push(hiddenComponent);
+                }
                 setComponentProps(newComponentProps);
             }
             else {
@@ -313,8 +325,8 @@ export function Form(props) {
             const savedValue = submittedFields[docProperty.id];
             const originalValue = instance?.[docProperty.id];
             const documentsToRemove = requestSuccess
-                ? originalValue?.filter((file) => !savedValue?.some((f) => f.id === file.id)) ?? []
-                : savedValue?.filter((file) => !originalValue?.some((f) => f.id === file.id)) ?? [];
+                ? (originalValue?.filter((file) => !savedValue?.some((f) => f.id === file.id)) ?? [])
+                : (savedValue?.filter((file) => !originalValue?.some((f) => f.id === file.id)) ?? []);
             for (const doc of documentsToRemove) {
                 try {
                     await apiServices?.delete(getPrefixedUrl(`/objects/${object?.id}/instances/${instance?.id}/documents/${doc.id}`));
@@ -416,7 +428,7 @@ export function Form(props) {
                     key: 'save-draft',
                     variant: 'outlined',
                     isModal: !!closeModal,
-                    onClick: async (data, setError, setSubmitting) => await saveHandler(data, 'draft', setError, setSubmitting),
+                    onClick: async (data, setError, setSubmitting) => await saveHandler(omit(data, '_instance'), 'draft', setError, setSubmitting),
                     style: { lineHeight: '2.75', margin: '5px', padding: '0 10px' },
                 }
                 : undefined,
@@ -437,7 +449,7 @@ export function Form(props) {
                 variant: 'contained',
                 isModal: !!closeModal,
                 onClick: (data, setError, setSubmitting) => {
-                    saveHandler(data, 'submit', setError, setSubmitting);
+                    saveHandler(omit(data, '_instance'), 'submit', setError, setSubmitting);
                 },
             },
         ],
@@ -447,7 +459,7 @@ export function Form(props) {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         , { 
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            onChange: (e) => !isEqual(e.data, formData) && setFormData(e.data), key: closeModal ? undefined : formKey, form: {
+            onChange: (e) => !isEqual(omit(e.data, '_instance'), formData) && setFormData(omit(e.data, '_instance')), key: closeModal ? undefined : formKey, form: {
                 display: 'form',
                 components: componentProps,
             }, formReady: handleFormReady })) : (React.createElement(Box, null,

package/dist/published/components/custom/Form/FormComponents/ObjectComponent/ObjectPropertyInput.js

@@ -227,7 +227,7 @@ export const ObjectPropertyInput = (props) => {
                     return option.value === value?.value;
                 }, options: options.map((o) => ({ label: o.name, value: o.id })), getOptionLabel: (option) => {
                     return typeof option === 'string'
-                        ? options.find((o) => o.id === option)?.name ?? ''
+                        ? (options.find((o) => o.id === option)?.name ?? '')
                         : option.label;
                 }, onKeyDownCapture: (e) => {
                     if (instance?.[property.id]?.id || selectedInstance?.id) {
@@ -292,7 +292,8 @@ export const ObjectPropertyInput = (props) => {
                             }
                             : {}),
                     } })), readOnly: !loadingOptions && !canUpdateProperty, error: error, sortBy: "NONE" }))) : (React.createElement(Box, { sx: {
-                padding: (instance?.[property.id]?.name ?? selectedInstance?.name)
+                padding: (instance?.[property.id]?.name ??
+                    selectedInstance?.name)
                     ? '16.5px 14px'
                     : '10.5px 0',
             } },

package/dist/published/components/custom/Form/FormComponents/RepeatableFieldComponent/RepeatableField.js

@@ -402,7 +402,7 @@ const RepeatableField = (props) => {
                                 React.createElement(Tooltip, { title: "Delete" },
                                     React.createElement(TrashCan, { sx: { ':hover': { color: '#A12723' } } })))))))))))),
             hasCreateAction && (React.createElement(Button, { variant: "contained", sx: styles.addButton, onClick: addRow }, "Add"))),
-        relatedObject && openDialog && (React.createElement(ActionDialog, { object: relatedObject, open: openDialog, apiServices: apiServices, onClose: () => setOpenDialog(false), instanceInput: dialogType === 'update' ? relatedInstances.find((i) => i.id === selectedRow) ?? {} : {}, handleSubmit: save, 
+        relatedObject && openDialog && (React.createElement(ActionDialog, { object: relatedObject, open: openDialog, apiServices: apiServices, onClose: () => setOpenDialog(false), instanceInput: dialogType === 'update' ? (relatedInstances.find((i) => i.id === selectedRow) ?? {}) : {}, handleSubmit: save, 
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             objectInputCommonProps: { apiServices }, action: relatedObject?.actions?.find((a) => a.id ===
                 (dialogType === 'create' ? '_create' : dialogType === 'update' ? '_update' : '_delete')), instanceId: selectedRow, queryAddresses: queryAddresses, user: user, associatedObject: instance.id && property.relatedPropertyId

package/dist/published/components/custom/Form/tests/Form.test.js

@@ -109,4 +109,50 @@ describe('Form component', () => {
             await waitFor(() => expect(within(openAutocomplete).queryByRole('option', { name: 'NP Specialty Type #2' })).to.be.null);
         });
     });
+    describe('visibility configuration', () => {
+        it('shows fields based on instance data using JsonLogic', async () => {
+            server.use(http.get('/data/objects/license/instances/rnLicense', () => HttpResponse.json(rnLicense)));
+            render(React.createElement(Form, { actionId: 'jsonLogicDisplayTest', actionType: 'update', object: specialtyObject, apiServices: apiServices, instance: {
+                    id: '123',
+                    objectId: 'specialty',
+                    name: 'Test Specialty Object Instance',
+                } }));
+            // Validate that specialty type dropdown renders
+            await screen.findByRole('combobox', { name: 'Specialty Type' });
+        });
+        it('hides fields based on instance data using JsonLogic', async () => {
+            server.use(http.get('/data/objects/license/instances/rnLicense', () => HttpResponse.json(rnLicense)));
+            render(React.createElement(Form, { actionId: 'jsonLogicDisplayTest', actionType: 'update', object: specialtyObject, apiServices: apiServices, instance: {
+                    id: '123',
+                    objectId: 'specialty',
+                    name: 'Test Specialty Object Instance -- hidden',
+                } }));
+            // Validate that license dropdown renders
+            await screen.findByRole('combobox', { name: 'License' });
+            // Validate that specialty type dropdown does not render
+            expect(screen.queryByRole('combobox', { name: 'Specialty Type' })).to.be.null;
+        });
+        it('shows fields based on instance data using simple conditions', async () => {
+            server.use(http.get('/data/objects/license/instances/rnLicense', () => HttpResponse.json(rnLicense)));
+            render(React.createElement(Form, { actionId: 'simpleConditionDisplayTest', actionType: 'update', object: specialtyObject, apiServices: apiServices, instance: {
+                    id: '123',
+                    objectId: 'specialty',
+                    name: 'Test Specialty Object Instance',
+                } }));
+            // Validate that specialty type dropdown renders
+            await screen.findByRole('combobox', { name: 'Specialty Type' });
+        });
+        it('hides fields based on instance data using simple conditions', async () => {
+            server.use(http.get('/data/objects/license/instances/rnLicense', () => HttpResponse.json(rnLicense)));
+            render(React.createElement(Form, { actionId: 'simpleConditionDisplayTest', actionType: 'update', object: specialtyObject, apiServices: apiServices, instance: {
+                    id: '123',
+                    objectId: 'specialty',
+                    name: 'Test Specialty Object Instance -- hidden',
+                } }));
+            // Validate that license dropdown renders
+            await screen.findByRole('combobox', { name: 'License' });
+            // Validate that specialty type dropdown does not render
+            expect(screen.queryByRole('combobox', { name: 'Specialty Type' })).to.be.null;
+        });
+    });
 });

package/dist/published/components/custom/Form/tests/test-data.js

@@ -170,6 +170,105 @@ export const specialtyObject = {
                 ],
             },
         },
+        {
+            id: 'jsonLogicDisplayTest',
+            name: 'JsonLogic Display Test',
+            type: 'update',
+            outputEvent: 'Specialty Updated',
+            parameters: [
+                {
+                    id: 'specialtyType',
+                    name: 'Specialty Type',
+                    type: 'object',
+                    objectId: 'specialtyType',
+                },
+                {
+                    id: 'license',
+                    name: 'License',
+                    type: 'object',
+                    objectId: 'license',
+                },
+            ],
+            form: {
+                entries: [
+                    {
+                        parameterId: 'specialtyType',
+                        type: 'input',
+                        display: {
+                            label: 'Specialty Type',
+                            relatedObjectDisplay: 'dropdown',
+                            visibility: {
+                                '===': [
+                                    {
+                                        var: 'instance.name',
+                                    },
+                                    'Test Specialty Object Instance',
+                                ],
+                            },
+                        },
+                    },
+                    {
+                        parameterId: 'license',
+                        type: 'input',
+                        display: {
+                            label: 'License',
+                            relatedObjectDisplay: 'dropdown',
+                        },
+                    },
+                ],
+            },
+        },
+        {
+            id: 'simpleConditionDisplayTest',
+            name: 'Simple Condition Display Test',
+            type: 'update',
+            outputEvent: 'Specialty Updated',
+            parameters: [
+                {
+                    id: 'specialtyType',
+                    name: 'Specialty Type',
+                    type: 'object',
+                    objectId: 'specialtyType',
+                },
+                {
+                    id: 'license',
+                    name: 'License',
+                    type: 'object',
+                    objectId: 'license',
+                },
+            ],
+            form: {
+                entries: [
+                    {
+                        parameterId: 'specialtyType',
+                        type: 'input',
+                        display: {
+                            label: 'Specialty Type',
+                            relatedObjectDisplay: 'dropdown',
+                            visibility: {
+                                operator: 'all',
+                                conditions: [
+                                    {
+                                        property: 'name',
+                                        operator: 'eq',
+                                        value: 'Test Specialty Object Instance',
+                                        isInstanceProperty: true,
+                                    },
+                                ],
+                            },
+                        },
+                    },
+                    {
+                        parameterId: 'license',
+                        type: 'input',
+                        display: {
+                            label: 'License',
+                            relatedObjectDisplay: 'dropdown',
+                        },
+                    },
+                ],
+            },
+        },
     ],
 };
 export const specialtyTypeObject = {

package/dist/published/components/custom/Form/utils.js

@@ -100,15 +100,7 @@ export function convertFormToComponents(entries, parameters, object) {
                         ? convertFormToComponents(section.entries, parameters, object)
                         : [],
                 })),
-                conditional: typeof entry.visibility !== 'string' && entry.visibility?.conditions?.length
-                    ? {
-                        show: entry.visibility.conditions[0].operator === 'eq',
-                        when: entry.visibility.conditions[0].property,
-                        eq: entry.visibility.conditions[0].value,
-                    }
-                    : {
-                        json: entry.visibility,
-                    },
+                conditional: convertVisibilityToConditional(entry.visibility),
             };
         }
         else if (entry.type === 'columns') {
@@ -124,15 +116,7 @@ export function convertFormToComponents(entries, parameters, object) {
                         ? convertFormToComponents(column.entries, parameters, object)
                         : [],
                 })),
-                conditional: typeof entry.visibility !== 'string' && entry.visibility?.conditions?.length
-                    ? {
-                        show: entry.visibility.conditions[0].operator === 'eq',
-                        when: entry.visibility.conditions[0].property,
-                        eq: entry.visibility.conditions[0].value,
-                    }
-                    : {
-                        json: entry.visibility,
-                    },
+                conditional: convertVisibilityToConditional(entry.visibility),
             };
         }
         else if (entry.type === 'content') {
@@ -140,15 +124,7 @@ export function convertFormToComponents(entries, parameters, object) {
                 type: 'Content',
                 key: nanoid(),
                 html: entry.html,
-                conditional: typeof entry.visibility !== 'string' && entry.visibility?.conditions?.length
-                    ? {
-                        show: entry.visibility.conditions[0].operator === 'eq',
-                        when: entry.visibility.conditions[0].property,
-                        eq: entry.visibility.conditions[0].value,
-                    }
-                    : {
-                        json: entry.visibility,
-                    },
+                conditional: convertVisibilityToConditional(entry.visibility),
             };
         }
         else {
@@ -266,17 +242,7 @@ export function convertFormToComponents(entries, parameters, object) {
                 widget: (parameter.type === 'string' && parameter.enum) || parameter.type === 'array'
                     ? 'choicejs'
                     : undefined,
-                conditional: displayOptions?.visibility &&
-                    typeof displayOptions?.visibility !== 'string' &&
-                    displayOptions.visibility.conditions?.length
-                    ? {
-                        show: displayOptions?.visibility.conditions[0].operator === 'eq',
-                        when: displayOptions?.visibility.conditions[0].property,
-                        eq: displayOptions?.visibility.conditions[0].value,
-                    }
-                    : {
-                        json: displayOptions?.visibility,
-                    },
+                conditional: convertVisibilityToConditional(displayOptions?.visibility),
                 viewLayout: displayOptions?.viewLayout,
             };
         }
@@ -1313,3 +1279,72 @@ export function normalizeDates(instances, object) {
         });
     });
 }
+/**
+ * Given an object entry in a JsonLogic object, map it to the correct value.
+ * @param entry An entry in a JsonLogic object.
+ * @returns entry with all values starting with "instance" replaced with "data._instance"
+ */
+function processJsonLogicEntry(entry) {
+    if (entry !== Object(entry)) {
+        // entry is a primitive
+        return typeof entry === 'string' ? entry.replace(/^instance/, 'data._instance') : entry;
+    }
+    else if (isArray(entry)) {
+        return entry.map((element) => processJsonLogicEntry(element));
+    }
+    else if (typeof entry === 'object' && entry !== null) {
+        let result = {};
+        const entries = Object.entries(entry);
+        for (const [key, val] of entries) {
+            result = {
+                ...result,
+                [key]: processJsonLogicEntry(val),
+            };
+        }
+        return result;
+    }
+    return entry;
+}
+/**
+ * Given a JsonLogic, replace all keys (if any) starting with "instance" with
+ * "data._instance".
+ *
+ * @param jsonLogic A JsonLogic instance.
+ * @returns jsonLogic, with all keys starting with "instance" replaced with "data._instance".
+ */
+function normalizeInstanceDataInJsonLogic(jsonLogic) {
+    if (typeof jsonLogic === 'object' && jsonLogic !== null) {
+        // jsonLogic is a Record<string, unknown>
+        let result = {};
+        const entries = Object.entries(jsonLogic);
+        for (const [key, entry] of entries) {
+            result = {
+                ...result,
+                [key]: processJsonLogicEntry(entry),
+            };
+        }
+        return result;
+    }
+    // jsonLogic is a primitive
+    return jsonLogic;
+}
+/**
+ *
+ * @param visibility A form's visibility entry.
+ * @returns The form's visibility entry, converted to formio-readable form.
+ */
+function convertVisibilityToConditional(visibility) {
+    if (isObject(visibility) && 'conditions' in visibility && isArray(visibility.conditions)) {
+        const [condition] = visibility.conditions;
+        return {
+            show: condition.operator === 'eq',
+            when: condition.isInstanceProperty ? `_instance.${condition.property}` : condition.property,
+            eq: condition.value,
+        };
+    }
+    return visibility
+        ? {
+            json: normalizeInstanceDataInJsonLogic(visibility),
+        }
+        : undefined;
+}

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

@@ -58,7 +58,7 @@ const AddressFieldComponent = (props) => {
                         backgroundColor: '#f4f6f8',
                     },
                 }
-                : undefined, required: required, error: error, errorMessage: errorMessage, InputProps: { readOnly: readOnly }, fullWidth: true, size: size ?? 'medium', type: 'text', multiline: property.type === 'string' && !readOnly && isMultiLineText, rows: isMultiLineText ? rows ?? 3 : undefined, value: value, ...(additionalProps ?? {}) })
+                : undefined, required: required, error: error, errorMessage: errorMessage, InputProps: { readOnly: readOnly }, fullWidth: true, size: size ?? 'medium', type: 'text', multiline: property.type === 'string' && !readOnly && isMultiLineText, rows: isMultiLineText ? (rows ?? 3) : undefined, value: value, ...(additionalProps ?? {}) })
         // Casting to `React.ReactNode` is necessary to resolve TypeScript errors
         // due to compatibility issues with the outdated `react-input-mask` version
         // and the newer `@types/react` package.

package/dist/published/stories/Chip.stories.d.ts

@@ -1,6 +1,7 @@
-import { ChipProps } from '@mui/material';
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import React from 'react';
-declare const _default: ComponentMeta<(props: ChipProps<"div", {}>) => React.JSX.Element>;
+import { ChipProps } from '../components/core/Chip/Chip';
+declare const _default: ComponentMeta<({ tooltip, ...props }: ChipProps) => React.JSX.Element>;
 export default _default;
-export declare const Chip: ComponentStory<(props: ChipProps<"div", {}>) => React.JSX.Element>;
+export declare const ChipWithTooltip: ComponentStory<({ tooltip, ...props }: ChipProps) => React.JSX.Element>;
+export declare const Chip: ComponentStory<({ tooltip, ...props }: ChipProps) => React.JSX.Element>;

package/dist/published/stories/Chip.stories.js

@@ -1,8 +1,10 @@
 import React from 'react';
 import { Chip as CustomChip } from '../index';
 export default {
-    title: 'Data Display/Chip',
+    label: 'Data Display/Chip',
     component: CustomChip,
 };
-const ChipTemplate = (args) => React.createElement(CustomChip, { ...args });
+const ChipTemplate = (args) => (React.createElement(CustomChip, { label: "Basic Chip", ...args }));
+const ChipWithToolipTemplate = (args) => (React.createElement(CustomChip, { tooltip: "Here is a tooltip", label: "Chip with Tooltip", ...args }));
+export const ChipWithTooltip = ChipWithToolipTemplate.bind({});
 export const Chip = ChipTemplate.bind({});

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@evoke-platform/ui-components",
-    "version": "1.4.0-testing.3",
+    "version": "1.4.0-testing.5",
     "description": "",
     "main": "dist/published/index.js",
     "module": "dist/published/index.js",
@@ -94,7 +94,7 @@
         "@dnd-kit/sortable": "^7.0.1",
         "@emotion/react": "^11.13.5",
         "@emotion/styled": "^11.8.1",
-        "@evoke-platform/context": "^1.1.0-testing.0",
+        "@evoke-platform/context": "^1.1.0-testing.4",
         "@formio/react": "^5.2.4-rc.1",
         "@js-joda/core": "^3.2.0",
         "@js-joda/locale_en-us": "^3.2.2",