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

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

@@ -0,0 +1,269 @@
+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;
+};
+export const encodePageSlug = (slug) => {
+    return encodeURIComponent(encodeURIComponent(slug));
+};
+export async function getDefaultPages(parameters, defaultPages, findDefaultPageSlugFor) {
+    let foundDefaultPages = defaultPages;
+    const relatedObjectProperties = parameters?.filter((param) => param.type === 'object');
+    if (relatedObjectProperties) {
+        foundDefaultPages = await relatedObjectProperties.reduce(async (acc, parameter) => {
+            const result = await acc;
+            if (parameter.objectId && defaultPages && defaultPages[parameter.objectId]) {
+                const slug = await findDefaultPageSlugFor(parameter.objectId);
+                if (slug) {
+                    return { ...result, [parameter.objectId]: slug };
+                }
+            }
+            return result;
+        }, Promise.resolve({}));
+    }
+    return { ...defaultPages, ...foundDefaultPages };
+}

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.

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

@@ -20,7 +20,7 @@ const { format } = require('small-date');
  * @returns {JSX.Element} A timeline view representing the instance's history.
  */
 export const HistoryLog = (props) => {
-    const { object, history, loading, title } = props;
+    const { object, history, loading, title, hideTimeline } = props;
     const [historyMap, setHistoryMap] = useState({});
     const [documentHistory, setDocumentHistory] = useState({});
     const [referencedObjects, setReferencedObjects] = useState([]);
@@ -91,7 +91,7 @@ export const HistoryLog = (props) => {
                 if (records.length) {
                     return (React.createElement(React.Fragment, { key: date },
                         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(Typography, { sx: { fontWeight: 600, fontSize: '16px' } },
                                 format(new Date(), 'yyyy-MM-dd') === date
                                     ? 'Today'
@@ -99,14 +99,14 @@ export const HistoryLog = (props) => {
                                 ' ',
                                 "\u00A0"),
                             React.createElement(Typography, { sx: { fontWeight: 600, fontSize: '16px', color: '#637381' } }, format(new Date(date + ' 00:00:000'), 'MMM dd, yyyy'))),
-                        React.createElement(HistoricalData, { object: object, records: records, documentHistory: documentHistory, referencedObjects: referencedObjects })));
+                        React.createElement(HistoricalData, { object: object, records: records, documentHistory: documentHistory, referencedObjects: referencedObjects, hideTimeline: hideTimeline })));
                 }
                 return null;
             }),
         !loading && filteredHistory && Object.values(filteredHistory).every((v) => !v.length) && (React.createElement(Box, { width: '100%', display: 'grid', justifyContent: 'center', marginTop: '60px' },
             React.createElement(Typography, { fontSize: '20px', fontWeight: 700 }, "You Have No History"),
             React.createElement(Typography, { fontSize: '14px', fontWeight: 400 }, "Try modifying the history type."))),
-        loading && React.createElement(HistoryLoading, null),
+        loading && React.createElement(HistoryLoading, { hideTimeline: hideTimeline }),
         React.createElement(Snackbar, { open: showSnackbar, handleClose: () => setShowSnackbar(false), message: 'Error occurred when loading referenced objects', error: true })));
 };
 export default HistoryLog;

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

@@ -0,0 +1,33 @@
+import React from 'react';
+export interface ResponsiveOverflowProps {
+    /**
+     * Children elements to be displayed horizontally
+     */
+    children: React.ReactNode[];
+    /**
+     * Text for the overflow button. Default is "More"
+     */
+    moreButtonText?: string;
+    /**
+     * Custom button element to replace the default "More" button
+     */
+    customMoreButton?: React.ReactNode;
+    /**
+     * Maximum number of children to be displayed before overflowing
+     */
+    maxVisible?: number;
+    /**
+     * Function to render each overflow menu item. Receives the overflowed child and its index.
+     */
+    renderOverflowMenuItem?: (item: React.ReactNode) => React.ReactNode;
+    /**
+     * If true, the container will take full width
+     */
+    fullWidth?: boolean;
+}
+/**
+ * ResponsiveOverflow is a container component that displays children horizontally,
+ * automatically moving overflow items into a dropdown menu when there isn't enough space.
+ */
+export declare const ResponsiveOverflow: (props: ResponsiveOverflowProps) => React.JSX.Element;
+export default ResponsiveOverflow;

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

@@ -0,0 +1,143 @@
+import { KeyboardArrowDownRounded } from '@mui/icons-material';
+import { Box, Menu, MenuItem } from '@mui/material';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { Button } from '../../core';
+const styles = {
+    container: {
+        display: 'flex',
+        alignItems: 'center',
+        flex: '1 1 auto',
+        minWidth: 0,
+        overflow: 'hidden',
+        justifyContent: 'flex-end',
+    },
+    moreButton: {
+        color: '#637381',
+        fontSize: '14px',
+        fontWeight: 700,
+        minWidth: 'unset',
+        '& .MuiButton-endIcon': { margin: '0px' },
+    },
+    menuPaper: {
+        border: '0.5px solid #919EAB52',
+        borderRadius: '8px',
+        minWidth: '150px',
+        boxShadow: '0px 8px 16px 0px #0000001F',
+    },
+    horizontalItems: {
+        display: 'inline-block',
+        verticalAlign: 'top',
+        whiteSpace: 'nowrap',
+    },
+    fullWidthItems: {
+        padding: '0 4px',
+        flexGrow: 1,
+    },
+};
+/**
+ * ResponsiveOverflow is a container component that displays children horizontally,
+ * automatically moving overflow items into a dropdown menu when there isn't enough space.
+ */
+export const ResponsiveOverflow = (props) => {
+    const { children, customMoreButton, maxVisible, renderOverflowMenuItem, moreButtonText, fullWidth } = props;
+    const containerRef = useRef(null);
+    const itemRefs = useRef([]);
+    const moreButtonBoxRef = useRef(null);
+    const [overflowItems, setOverflowItems] = useState([]);
+    const [anchorEl, setAnchorEl] = useState(null);
+    // Initialize refs array with correct length
+    useEffect(() => {
+        itemRefs.current = itemRefs.current.slice(0, children.length);
+        handleResize();
+    }, [children]);
+    const handleResize = useCallback(() => {
+        if (!containerRef.current)
+            return;
+        // Reset all items to visible before measuring
+        itemRefs.current.forEach((item) => {
+            if (item) {
+                item.style.display = 'inline-block';
+            }
+        });
+        const availableWidth = containerRef.current.getBoundingClientRect().width;
+        let usedWidth = 0;
+        let maxFit = children.length;
+        // Determine which items fit and which overflow
+        for (let i = 0; i < itemRefs.current.length; i++) {
+            const item = itemRefs.current[i];
+            if (!item) {
+                continue;
+            }
+            const itemWidth = item.getBoundingClientRect().width;
+            // Calculate if we need the "More" button
+            const remainingItems = itemRefs.current.length - i - 1;
+            const moreButtonWidth = remainingItems > 0 && moreButtonBoxRef.current
+                ? moreButtonBoxRef.current.getBoundingClientRect().width
+                : 0;
+            if (usedWidth + itemWidth + (remainingItems > 0 ? moreButtonWidth : 0) > availableWidth) {
+                maxFit = i;
+                break;
+            }
+            usedWidth += itemWidth;
+        }
+        // If maxVisible is set, limit the number of visible items
+        if (typeof maxVisible === 'number') {
+            maxFit = Math.min(maxFit, maxVisible);
+        }
+        const newOverflow = [];
+        itemRefs.current.forEach((item, idx) => {
+            if (!item) {
+                return;
+            }
+            else if (idx >= maxFit) {
+                item.style.display = 'none';
+                if (children[idx]) {
+                    newOverflow.push(children[idx]);
+                }
+            }
+            else {
+                item.style.display = 'inline-block';
+            }
+        });
+        setOverflowItems(newOverflow);
+        // Close menu if nothing is overflowing
+        if (newOverflow.length === 0) {
+            setAnchorEl(null);
+        }
+    }, [children, maxVisible]);
+    // Set up resize observer
+    useEffect(() => {
+        const resizeObserver = new ResizeObserver(() => {
+            requestAnimationFrame(handleResize);
+        });
+        if (containerRef.current) {
+            resizeObserver.observe(containerRef.current);
+        }
+        handleResize();
+        return () => {
+            if (containerRef.current) {
+                resizeObserver.unobserve(containerRef.current);
+            }
+            resizeObserver.disconnect();
+        };
+    }, [handleResize]);
+    const handleMenuOpen = (e) => setAnchorEl(e.currentTarget);
+    const handleMenuClose = () => setAnchorEl(null);
+    return (React.createElement(Box, { ref: containerRef, sx: styles.container },
+        children.map((item, index) => (React.createElement(Box, { ref: (el) => (itemRefs.current[index] = el), key: index, sx: { ...styles.horizontalItems, ...(fullWidth ? styles.fullWidthItems : {}) } }, item))),
+        !!overflowItems.length && (React.createElement(React.Fragment, null,
+            React.createElement(Box, { ref: moreButtonBoxRef, onClick: anchorEl ? handleMenuClose : handleMenuOpen }, customMoreButton ?? (React.createElement(Button, { variant: "text", sx: styles.moreButton, size: "small", endIcon: React.createElement(KeyboardArrowDownRounded, null) }, moreButtonText ?? 'More'))),
+            React.createElement(Menu, { anchorEl: anchorEl, open: Boolean(anchorEl), onClose: handleMenuClose, disablePortal: false, disableScrollLock: true, keepMounted: true, anchorOrigin: {
+                    vertical: 'bottom',
+                    horizontal: 'right',
+                }, transformOrigin: {
+                    vertical: 'top',
+                    horizontal: 'right',
+                }, sx: { '& .MuiPaper-root': styles.menuPaper }, onClick: handleMenuClose }, overflowItems.map((item, index) => {
+                if (renderOverflowMenuItem) {
+                    return renderOverflowMenuItem(item);
+                }
+                return (React.createElement(MenuItem, { key: `overflow-item-${index}`, onClick: handleMenuClose }, item));
+            }))))));
+};
+export default ResponsiveOverflow;

package/dist/published/components/custom/ResponsiveOverflow/ResponsiveOverflow.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';