@evoke-platform/ui-components 1.6.0-dev.2 → 1.6.0-dev.20

package/dist/published/components/custom/FormV2/components/ValidationFiles/Validation.js

@@ -0,0 +1,176 @@
+import { isArray } from 'lodash';
+import { DateTime } from 'luxon';
+import Handlebars from 'no-eval-handlebars';
+function isNumericValidation(validation) {
+    return 'minimum' in validation || 'maximum' in validation;
+}
+function isCalendarValidation(validation) {
+    return 'to' in validation || 'from' in validation;
+}
+function isStringValidation(validation) {
+    return 'operator' in validation;
+}
+function isDocumentValidation(validation) {
+    const documentValidationKeys = ['minDocuments', 'maxDocuments', 'errorMessage'];
+    return !validation || Object.keys(validation).every((key) => documentValidationKeys.includes(key));
+}
+export const handleValidation = (entries, register, formValues, parameters, instance) => {
+    entries?.forEach((entry) => {
+        if (entry.type === 'sections' || entry.type === 'columns') {
+            const subEntries = entry.type === 'sections' ? entry.sections : entry.columns;
+            subEntries.forEach((subEntry) => {
+                if (subEntry.entries) {
+                    handleValidation(subEntry.entries, register, formValues, parameters, instance);
+                }
+            });
+            return;
+        }
+        else if (entry.type !== 'input' && entry.type !== 'inputField') {
+            return;
+        }
+        const display = entry?.display;
+        const parameter = entry.type === 'input'
+            ? parameters?.find((param) => param.id === entry.parameterId)
+            : entry.type === 'inputField'
+                ? entry.input
+                : undefined;
+        const validation = parameter?.validation || {};
+        const fieldName = display?.label;
+        const errorMsg = validation?.errorMessage;
+        const validationRules = {};
+        // Required fields
+        if (entry.type !== 'inputField' && parameter?.required) {
+            validationRules.required = `${fieldName} is required`;
+        }
+        if (parameter?.type === 'boolean' && parameter?.strictlyTrue) {
+            validationRules.required = {
+                value: true,
+                message: display?.booleanDisplay === 'switch'
+                    ? `${fieldName} must be toggled on`
+                    : `${fieldName} must be checked`,
+            };
+        }
+        // Min/max char string fields
+        if (typeof validation.minLength === 'number') {
+            validationRules.minLength = {
+                value: validation.minLength,
+                message: `${fieldName} must have at least ${validation.minLength} characters`,
+            };
+        }
+        if (typeof validation.maxLength === 'number') {
+            validationRules.maxLength = {
+                value: validation.maxLength,
+                message: `${fieldName} must have no more than ${validation.maxLength} characters`,
+            };
+        }
+        // Min/max number fields
+        if (isNumericValidation(validation) && validation.maximum) {
+            validationRules.max = {
+                value: validation.maximum,
+                message: errorMsg || `${fieldName} must have a value under ${validation.maximum}`,
+            };
+        }
+        if (isNumericValidation(validation) && validation.minimum) {
+            validationRules.min = {
+                value: validation.minimum,
+                message: errorMsg || `${fieldName} must have a value over ${validation.minimum}`,
+            };
+        }
+        validationRules.validate = (value) => {
+            if (!value)
+                return true;
+            // Document validation
+            if (isDocumentValidation(validation)) {
+                const amountOfDocuments = isArray(value) ? value.length : 0;
+                const min = validation?.minDocuments;
+                const max = validation?.maxDocuments;
+                if (max && min && (amountOfDocuments > max || amountOfDocuments < min)) {
+                    return errorMsg || `Please select between ${min} and ${max} document${max > 1 ? 's' : ''}`;
+                }
+                else if (min && amountOfDocuments < min) {
+                    return errorMsg || `Please select at least ${min} document${min > 1 ? 's' : ''}`;
+                }
+                else if (max && amountOfDocuments > max) {
+                    return errorMsg || `Please select no more than ${max} document${max > 1 ? 's' : ''}`;
+                }
+            }
+            // Date and Time validation
+            if (isCalendarValidation(validation)) {
+                const data = {
+                    __today__: DateTime.now().toISODate(),
+                    input: formValues,
+                };
+                if (validation.from) {
+                    let earliestAllowed = validation.from;
+                    if (/{{[\w.]+(?:\s+[\w.]+)*(?:\s+\d+)?}}/.test(earliestAllowed)) {
+                        earliestAllowed = Handlebars.compileAST(earliestAllowed)(data);
+                    }
+                    if (earliestAllowed && value < earliestAllowed) {
+                        return (errorMsg ||
+                            `${fieldName} must be ${parameter?.type === 'time' ? 'at' : 'on'} or later than ${earliestAllowed || 'a field with no value'}`);
+                    }
+                }
+                if (validation.to) {
+                    let latestAllowed = validation.to;
+                    if (/{{[\w.]+(?:\s+[\w.]+)*(?:\s+\d+)?}}/.test(latestAllowed)) {
+                        latestAllowed = Handlebars.compileAST(latestAllowed)(data);
+                    }
+                    if (latestAllowed && value > latestAllowed) {
+                        return (errorMsg ||
+                            `${fieldName} must be ${parameter?.type === 'time' ? 'at' : 'on'} or before ${latestAllowed || 'a field with no value'}`);
+                    }
+                }
+            }
+            // Regex validation
+            if (isStringValidation(validation) && validation.rules) {
+                const rules = validation.rules;
+                const failedRules = rules.filter((rule) => {
+                    const regex = new RegExp(rule.regex);
+                    return !regex.test(value);
+                });
+                const operator = validation.operator;
+                if (failedRules.length > 0) {
+                    if (operator === 'all') {
+                        const messages = failedRules
+                            .map((rule) => rule.errorMessage || 'Property is not in a valid format')
+                            .join(' and ');
+                        return `${fieldName}: ${messages}`;
+                    }
+                    if (operator === 'any' && failedRules.length < rules.length) {
+                        return true; // passes if at least one rule passed
+                    }
+                    const messages = failedRules
+                        .map((rule) => rule.errorMessage || 'Property is not in a valid format')
+                        .join(' or ');
+                    return `${fieldName}: ${messages}`;
+                }
+            }
+            // Integer check
+            if (parameter?.type === 'integer') {
+                if (value && !Number.isInteger(value)) {
+                    return `${fieldName} must be an integer`;
+                }
+            }
+            // Invalid date check
+            if (value?.invalid && value?.dateText) {
+                return `Invalid Date`;
+            }
+            return true;
+        };
+        register(entry.parameterId || entry.input?.id, validationRules);
+    });
+};
+Handlebars.registerHelper('addDays', function (addend1, addend2) {
+    const dateAddend1 = DateTime.fromISO(addend1);
+    if (dateAddend1.isValid) {
+        return dateAddend1.plus({ days: addend2 }).toISODate();
+    }
+    return undefined;
+});
+Handlebars.registerHelper('subDays', function (minuend, subtrahend) {
+    const dateMinuend = DateTime.fromISO(minuend);
+    if (dateMinuend.isValid) {
+        return dateMinuend.minus({ days: subtrahend }).toISODate();
+    }
+    return undefined;
+});

package/dist/published/components/custom/FormV2/components/ValidationFiles/ValidationErrorDisplay.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { FieldErrors } from 'react-hook-form';
+export type ValidationErrorDisplayProps = {
+    errors: FieldErrors;
+    show: boolean;
+    formId: string;
+    title?: string;
+};
+declare function ValidationErrorDisplay(props: ValidationErrorDisplayProps): React.JSX.Element | null;
+export default ValidationErrorDisplay;

package/dist/published/components/custom/FormV2/components/ValidationFiles/ValidationErrorDisplay.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import { useResponsive } from '../../../../../theme';
+import { List, ListItem, Typography } from '../../../../core';
+import { Box } from '../../../../layout';
+function ValidationErrorDisplay(props) {
+    const { errors, show, formId, title } = props;
+    const { isSm, isXs } = useResponsive();
+    function extractErrorMessages(errors) {
+        const messages = [];
+        for (const key in errors) {
+            const error = errors[key];
+            if (error?.message) {
+                messages.push(error.message);
+            }
+            else if (error) {
+                for (const nestedKey in error) {
+                    const nestedError = error[nestedKey];
+                    if (nestedError?.message) {
+                        messages.push(nestedError.message);
+                    }
+                }
+            }
+        }
+        return messages;
+    }
+    const errorMessages = extractErrorMessages(errors);
+    return show && errorMessages.length > 0 ? (React.createElement(Box, { id: `validation-error-display-${formId}`, sx: {
+            backgroundColor: '#f8d7da',
+            borderColor: '#f5c6cb',
+            color: '#721c24',
+            border: '1px solid #721c24',
+            padding: '8px 24px',
+            borderRadius: '4px',
+            marginBottom: isSm || isXs ? 2 : 3,
+            marginTop: !title ? (isSm || isXs ? -2 : -3) : undefined,
+        } },
+        React.createElement(Typography, { sx: { color: '#721c24', mt: '16px', mb: '8px' } }, "Please fix the following errors before submitting:"),
+        React.createElement(List, { sx: {
+                listStyleType: 'disc',
+                paddingLeft: '40px',
+                mb: '8px',
+                fontFamily: 'Arial, Helvetica, sans-serif',
+            } }, errorMessages.map((msg, index) => (React.createElement(ListItem, { key: index, sx: { display: 'list-item', p: 0 } }, msg)))))) : null;
+}
+export default ValidationErrorDisplay;

package/dist/published/components/custom/FormV2/components/types.d.ts

@@ -0,0 +1,26 @@
+export type FieldAddress = {
+    line1?: string;
+    line2?: string;
+    city?: string;
+    county?: string;
+    state?: string;
+    zipCode?: string;
+};
+export type AccessCheck = {
+    result: boolean;
+};
+export type SavedDocumentReference = {
+    id: string;
+    name: string;
+};
+export type Document = {
+    id: string;
+    name: string;
+    contentType: string;
+    size: number;
+    uploadedDate: string;
+    metadata: {
+        [field: string]: unknown;
+    };
+    versionId?: string;
+};

package/dist/published/components/custom/FormV2/components/types.js

@@ -0,0 +1 @@
+export {};

package/dist/published/components/custom/FormV2/components/utils.d.ts

@@ -0,0 +1,35 @@
+import { Columns, FormEntry, InputParameter, Obj, ObjectInstance, Property, Sections } from '@evoke-platform/context';
+import { LocalDateTime } from '@js-joda/core';
+import { FieldValues } from 'react-hook-form';
+import { AutocompleteOption } from '../../../core';
+export declare const scrollIntoViewWithOffset: (el: HTMLElement, offset: number, container?: HTMLElement) => void;
+export declare const normalizeDateTime: (dateTime: LocalDateTime) => string;
+export declare function isAddressProperty(key: string): boolean;
+/**
+ * Determine if a form entry is visible or not.
+ */
+export declare const entryIsVisible: (entry: FormEntry, formValues: FieldValues, instance?: FieldValues) => boolean;
+/**
+ * Recursively retrieves all parameter IDs from a given entry of type Sections or Columns.
+ *
+ * @param {Sections | Columns} entry - The entry object, which can be of type Sections or Columns.
+ * @returns {string[]} - An array of parameter IDs found within the entry.
+ */
+export declare const getNestedParameterIds: (entry: Sections | Columns) => string[];
+export declare const getEntryId: (entry: FormEntry) => string | undefined;
+export declare function getPrefixedUrl(url: string): string;
+export declare const isOptionEqualToValue: (option: AutocompleteOption | string, value: unknown) => boolean;
+export declare function addressProperties(addressProperty: Property): Property[];
+export declare const normalizeDates: (instance: ObjectInstance, evokeObject?: Obj) => ObjectInstance;
+export declare const transformToWhere: (mongoQuery: Record<string, unknown>) => Record<string, unknown>;
+export declare const getMiddleObject: (fieldDefinition: InputParameter | Property, endObjectId: string, endObjectName: string, instance?: FieldValues) => {
+    [x: string]: {
+        id: any;
+        name: any;
+    };
+} | undefined;
+export declare const getMiddleObjectFilter: (fieldDefinition: InputParameter | Property, instanceId: string) => {
+    where: {
+        [x: string]: string;
+    };
+};

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

@@ -0,0 +1,249 @@
+import { LocalDateTime } from '@js-joda/core';
+import jsonLogic from 'json-logic-js';
+import { get, isArray, isObject, transform } from 'lodash';
+import { DateTime } from 'luxon';
+export const scrollIntoViewWithOffset = (el, offset, container) => {
+    const elementRect = el.getBoundingClientRect();
+    const containerRect = container ? container.getBoundingClientRect() : document.body.getBoundingClientRect();
+    const topPosition = elementRect.top - containerRect.top + (container?.scrollTop || 0) - offset;
+    if (container) {
+        container.scrollTo({
+            behavior: 'smooth',
+            top: topPosition,
+        });
+    }
+    else {
+        window.scrollTo({
+            behavior: 'smooth',
+            top: topPosition,
+        });
+    }
+};
+export const normalizeDateTime = (dateTime) => new Date(dateTime.toString()).toISOString();
+const evaluateCondition = (condition, formValues, instance) => {
+    if (typeof condition !== 'object') {
+        console.error('Invalid condition format: ', condition);
+        return true;
+    }
+    if (isArray(condition)) {
+        const firstCondition = condition[0];
+        const { property, value, operator } = firstCondition;
+        let fieldValue = firstCondition.isInstanceProperty ? get(instance, property) : get(formValues, property);
+        if (typeof fieldValue === 'object' && fieldValue !== null) {
+            if (fieldValue instanceof LocalDateTime) {
+                fieldValue = normalizeDateTime(fieldValue);
+            }
+            else {
+                fieldValue = Object.values(fieldValue).includes(value)
+                    ? value
+                    : Object.values(fieldValue).find((val) => val !== undefined && val !== null);
+            }
+        }
+        switch (operator) {
+            case 'ne':
+                return fieldValue != value;
+            case 'eq':
+                return fieldValue == value;
+            default:
+                console.error(`Unsupported operator: ${operator}`);
+                return false;
+        }
+    }
+    // Handling custom JSON logic
+    else {
+        const data = {
+            data: formValues,
+            instance: instance,
+        };
+        const result = jsonLogic.apply(condition, data);
+        return result === true;
+    }
+};
+export function isAddressProperty(key) {
+    return /\.line1|\.line2|\.city|\.county|\.state|\.zipCode$/.test(key);
+}
+/**
+ * Determine if a form entry is visible or not.
+ */
+export const entryIsVisible = (entry, formValues, instance) => {
+    const display = 'display' in entry ? entry.display : undefined;
+    const { visibility } = display ?? ('visibility' in entry ? entry : {});
+    if (isObject(visibility) && 'conditions' in visibility && isArray(visibility.conditions)) {
+        // visibility is a simple condition
+        const { conditions } = visibility;
+        return evaluateCondition(conditions, formValues, instance);
+    }
+    else if (visibility) {
+        // visibility is a JSONlogic condition
+        return evaluateCondition(visibility, formValues, instance);
+    }
+    return true;
+};
+/**
+ * Recursively retrieves all parameter IDs from a given entry of type Sections or Columns.
+ *
+ * @param {Sections | Columns} entry - The entry object, which can be of type Sections or Columns.
+ * @returns {string[]} - An array of parameter IDs found within the entry.
+ */
+export const getNestedParameterIds = (entry) => {
+    const parameterIds = [];
+    const entries = entry.type === 'columns'
+        ? entry.columns.flatMap((column) => column.entries ?? [])
+        : entry.sections.flatMap((section) => section.entries ?? []);
+    for (const subEntry of entries) {
+        if (subEntry.type === 'columns' || subEntry.type === 'sections') {
+            parameterIds.push(...getNestedParameterIds(subEntry));
+        }
+        else {
+            const paramId = getEntryId(subEntry);
+            if (paramId && paramId !== 'collection') {
+                parameterIds.push(paramId);
+            }
+        }
+    }
+    return parameterIds;
+};
+export const getEntryId = (entry) => {
+    return entry.type === 'input'
+        ? entry.parameterId
+        : entry.type === 'readonlyField'
+            ? entry.propertyId
+            : entry.type === 'inputField'
+                ? entry.input.id
+                : undefined;
+};
+export function getPrefixedUrl(url) {
+    const wcsMatchers = ['/apps', '/pages', '/widgets'];
+    const dataMatchers = ['/objects', '/correspondenceTemplates', '/documents', '/payments', '/locations'];
+    const signalrMatchers = ['/hubs'];
+    const accessManagementMatchers = ['/users'];
+    const workflowMatchers = ['/workflows'];
+    if (wcsMatchers.some((endpoint) => url.startsWith(endpoint)))
+        return `/webContent${url}`;
+    if (dataMatchers.some((endpoint) => url.startsWith(endpoint)))
+        return `/data${url}`;
+    if (signalrMatchers.some((endpoint) => url.startsWith(endpoint)))
+        return `/signalr${url}`;
+    if (accessManagementMatchers.some((endpoint) => url.startsWith(endpoint)))
+        return `/accessManagement${url}`;
+    if (workflowMatchers.some((endpoint) => url.startsWith(endpoint)))
+        return `/workflow${url}`;
+    console.error('Invalid URL');
+    return url;
+}
+export const isOptionEqualToValue = (option, value) => {
+    if (typeof option === 'string') {
+        return option === value;
+    }
+    return option.value === value;
+};
+export function addressProperties(addressProperty) {
+    return [
+        {
+            id: `${addressProperty.id}.line1`,
+            name: `${addressProperty.name} Line 1`,
+            type: 'string',
+        },
+        {
+            id: `${addressProperty.id}.line2`,
+            name: `${addressProperty.name} Line 2`,
+            type: 'string',
+        },
+        {
+            id: `${addressProperty.id}.city`,
+            name: `${addressProperty.name} City`,
+            type: 'string',
+        },
+        {
+            id: `${addressProperty.id}.county`,
+            name: `${addressProperty.name} County`,
+            type: 'string',
+        },
+        {
+            id: `${addressProperty.id}.state`,
+            name: `${addressProperty.name} State`,
+            type: 'string',
+        },
+        {
+            id: `${addressProperty.id}.zipCode`,
+            name: `${addressProperty.name} Zip Code`,
+            type: 'string',
+        },
+    ];
+}
+export const normalizeDates = (instance, evokeObject) => {
+    const dateProps = ['date', 'date-time', 'time'];
+    const properties = evokeObject?.properties
+        ?.filter((property) => dateProps.includes(property.type))
+        .reduce((agg, property) => Object.assign(agg, { [property.id]: property.type }), {}) ?? {};
+    const propKeys = Object.keys(properties);
+    const updatedInstance = { ...instance };
+    Object.keys(instance).forEach((key) => {
+        // Ignore non-datelike and empty fields.
+        if (!propKeys.includes(key) || !instance[key]) {
+            return;
+        }
+        switch (properties[key]) {
+            case 'date':
+                // Casting here is valid because the value has already been
+                // determined to be a datelike field that is non-empty.
+                updatedInstance[key] = DateTime.fromISO(instance[key]).toLocaleString(DateTime.DATE_SHORT);
+                break;
+            case 'date-time':
+                // Casting here is valid because the value has already been
+                // determined to be a datelike field that is non-empty.
+                updatedInstance[key] = DateTime.fromISO(instance[key]).toLocaleString(DateTime.DATETIME_SHORT);
+                break;
+            case 'time':
+                // Casting here is valid because the value has already been
+                // determined to be a datelike field that is non-empty.
+                updatedInstance[key] = DateTime.fromISO(instance[key]).toLocaleString(DateTime.TIME_SIMPLE);
+                break;
+        }
+    });
+    return updatedInstance;
+};
+const OPERATOR_MAP = {
+    $and: 'and',
+    $or: 'or',
+    $eq: 'eq',
+    $ne: 'neq',
+    $lt: 'lt',
+    $lte: 'lte',
+    $gt: 'gt',
+    $gte: 'gte',
+    $in: 'inq',
+    $nin: 'nin',
+    $regex: 'regexp',
+    $exists: 'exists',
+    $not: 'not',
+};
+export const transformToWhere = (mongoQuery) => {
+    return transform(mongoQuery, (result, value, key) => {
+        const newKey = typeof key === 'string' && key.startsWith('$') ? OPERATOR_MAP[key] : key;
+        if (newKey === undefined) {
+            throw new Error(`Unsupported operator ${key}`);
+        }
+        result[newKey] = isObject(value) ? transformToWhere(value) : value;
+    });
+};
+export const getMiddleObject = (fieldDefinition, endObjectId, endObjectName, instance) => {
+    if (fieldDefinition.relatedPropertyId && fieldDefinition.manyToManyPropertyId) {
+        const middleObject = {
+            [fieldDefinition.relatedPropertyId]: {
+                id: instance?.id,
+                name: instance?.name,
+            },
+            [fieldDefinition.manyToManyPropertyId]: {
+                id: endObjectId,
+                name: endObjectName,
+            },
+        };
+        return middleObject;
+    }
+};
+export const getMiddleObjectFilter = (fieldDefinition, instanceId) => {
+    const filterProperty = `${fieldDefinition.relatedPropertyId}.id`;
+    const filter = { where: { [filterProperty]: instanceId } };
+    return filter;
+};

package/dist/published/components/custom/HistoryLog/HistoryData.d.ts

@@ -7,6 +7,7 @@ type HistoryDataProps = {
     documentHistory?: Record<string, History[]>;
     object: Obj;
     referencedObjects?: Obj[];
+    hideTimeline?: boolean;
 };
 declare const HistoricalData: (props: HistoryDataProps) => React.JSX.Element;
 export default HistoricalData;

package/dist/published/components/custom/HistoryLog/HistoryData.js

@@ -19,8 +19,7 @@ const styles = {
         color: '#637381',
     },
     timelineConnector: {
-        padding: '1px 0px 24px 22px',
-        borderLeft: '2px rgba(145, 158, 171, 0.24) solid',
+        padding: '1px 0px 24px 0px',
         marginLeft: '5px',
     },
     historyData: {
@@ -30,15 +29,24 @@ const styles = {
     },
 };
 const HistoricalData = (props) => {
-    const { records, documentHistory, object, referencedObjects } = props;
+    const { records, documentHistory, object, referencedObjects, hideTimeline } = props;
     const getPastDocumentVersion = (history) => {
         const documentVersions = documentHistory?.[history.subject?.id ?? 'unknown'] ?? [];
         const currentVersion = documentVersions?.map((v) => v.timestamp).indexOf(history.timestamp);
         return currentVersion ? documentVersions[currentVersion - 1] : undefined;
     };
-    return (React.createElement(Box, { sx: styles.timelineConnector }, records.map((r) => (React.createElement(Box, { margin: '16px 0px', key: `${r.timestamp}-${nanoid()}` },
-        React.createElement(Box, { sx: { display: 'flex', justifyContent: 'space-between' } },
-            React.createElement(Box, { sx: { display: 'flex', maxWidth: '60%', alignContent: 'flex-start' } },
+    return (React.createElement(Box, { sx: {
+            ...styles.timelineConnector,
+            borderLeft: !hideTimeline ? '2px rgba(145, 158, 171, 0.24) solid' : undefined,
+        } }, records.map((r) => (React.createElement(Box, { margin: '16px 0px', key: `${r.timestamp}-${nanoid()}` },
+        React.createElement(Box, { sx: {
+                display: 'flex',
+                justifyContent: 'space-between',
+                flexDirection: { xs: 'column', sm: 'row' },
+                alignItems: { xs: 'flex-start', sm: 'center' },
+                gap: 0,
+            } },
+            React.createElement(Box, { sx: { display: 'flex', maxWidth: { sx: '100%', sm: '60%' }, alignContent: 'flex-start' } },
                 React.createElement(Typography, { sx: { fontSize: '12px', color: '#637381' } },
                     React.createElement(Typography, { component: 'span', sx: { fontWeight: 600, fontSize: '12px' } }, r.user.name ?? 'Unknown User'),
                     "\u00A0",

package/dist/published/components/custom/HistoryLog/HistoryLoading.d.ts

@@ -1,3 +1,6 @@
 import React from 'react';
-declare const HistoryLoading: () => React.JSX.Element;
+type HistoryLoadingProps = {
+    hideTimeline?: boolean;
+};
+declare const HistoryLoading: (props: HistoryLoadingProps) => React.JSX.Element;
 export default HistoryLoading;

package/dist/published/components/custom/HistoryLog/HistoryLoading.js

@@ -1,11 +1,10 @@
+import { Circle } from '@mui/icons-material';
 import React from 'react';
-import { Box } from '../../layout';
 import { Skeleton } from '../../core';
-import { Circle } from '@mui/icons-material';
+import { Box } from '../../layout';
 const styles = {
     timelineConnector: {
         padding: '1px 0px 5px 22px',
-        borderLeft: '2px rgba(145, 158, 171, 0.24) solid',
         marginLeft: '5px',
     },
     headerSkeleton: {
@@ -18,20 +17,27 @@ const styles = {
         borderRadius: '7px',
     },
 };
-const HistoryLoading = () => {
+const HistoryLoading = (props) => {
+    const { hideTimeline } = props;
     return (React.createElement(React.Fragment, { key: 'history-log-loading' },
         React.createElement(Box, { sx: { display: 'flex', alignItems: 'center' } },
-            React.createElement(Circle, { color: "primary", sx: { fontSize: '12px', marginRight: '12px' } }),
+            !hideTimeline && React.createElement(Circle, { color: "primary", sx: { fontSize: '12px', marginRight: '12px' } }),
             React.createElement(Skeleton, { variant: "text", sx: styles.headerSkeleton })),
-        React.createElement(Box, { sx: styles.timelineConnector },
+        React.createElement(Box, { sx: {
+                ...styles.timelineConnector,
+                borderLeft: !hideTimeline ? '2px rgba(145, 158, 171, 0.24) solid' : undefined,
+            } },
             React.createElement(Box, { margin: '4px 0px 24px 0px' },
                 React.createElement(Skeleton, { variant: "text", sx: { ...styles.dataSkeleton, width: '120px' } }),
                 React.createElement(Skeleton, { variant: "text", sx: { ...styles.dataSkeleton, width: '65%' } }),
                 React.createElement(Skeleton, { variant: "text", sx: { ...styles.dataSkeleton, width: '75%' } }))),
         React.createElement(Box, { sx: { display: 'flex', alignItems: 'center' } },
-            React.createElement(Circle, { color: "primary", sx: { fontSize: '12px', marginRight: '12px' } }),
+            !hideTimeline && React.createElement(Circle, { color: "primary", sx: { fontSize: '12px', marginRight: '12px' } }),
             React.createElement(Skeleton, { variant: "text", sx: styles.headerSkeleton })),
-        React.createElement(Box, { sx: styles.timelineConnector },
+        React.createElement(Box, { sx: {
+                ...styles.timelineConnector,
+                borderLeft: !hideTimeline ? '2px rgba(145, 158, 171, 0.24) solid' : undefined,
+            } },
             React.createElement(Box, { margin: '4px 0px 20px 0px' },
                 React.createElement(Skeleton, { variant: "text", sx: { ...styles.dataSkeleton, width: '120px' } }),
                 React.createElement(Skeleton, { variant: "text", sx: { ...styles.dataSkeleton, width: '55%' } })))));

package/dist/published/components/custom/HistoryLog/index.d.ts

@@ -10,6 +10,8 @@ export type HistoryLogProps = {
     loading?: boolean;
     /** The title displayed above the timeline */
     title?: string;
+    /** Whether to hide the timeline in the history log */
+    hideTimeline?: boolean;
 };
 /**
  * Renders a timeline of the instance's history log.