@gen3/frontend 0.11.11 → 0.11.13

package/dist/dts/components/DropdownWithIcon/DropdownWithIcon.d.ts

@@ -1,18 +1,18 @@
-import { FloatingPosition } from '@mantine/core';
 import { ReactNode } from 'react';
+import { FloatingPosition } from '@mantine/core';
 interface DropdownWithIconProps {
     /**
      *    if true, doesn't set width to be "target"
      */
-    disableTargetWidth?: string;
+    disableTargetWidth?: boolean;
     /**
-     *   Left Icon for the taret button, can be undefined too
+     *   Left Section for the target button, can be undefined too
      */
-    LeftIcon?: JSX.Element;
+    LeftSection?: JSX.Element;
     /**
-     *   Right Icon for the taret button, can be undefined too (default to dropdown icon)
+     *   Right Section for the target button, can be undefined too (default to dropdown icon)
      */
-    RightIcon?: JSX.Element;
+    RightSection?: JSX.Element;
     /**
      *    Content for target button
      */
@@ -29,6 +29,8 @@ interface DropdownWithIconProps {
         onClick?: () => void;
         icon?: JSX.Element;
         disabled?: boolean;
+        isLoading?: boolean;
+        loadingTooltip?: string;
     }>;
     /**
      *    only provide menuLabelText if we want label for dropdown elements
@@ -53,16 +55,20 @@ interface DropdownWithIconProps {
     /**
      * custom test id
      */
-    customDataTestId?: string;
+    customTargetButtonDataTestId?: string;
     /**
-      tooltip
+      target button's tooltip
      */
-    tooltip?: string;
+    targetButtonTooltip?: string;
     /**
      * aria-label for the button
      */
     buttonAriaLabel?: string;
+    /**
+     * Determines whether Menu should be closed when item is clicked
+     */
+    closeOnItemClick?: boolean;
 }
-export declare const DropdownWithIcon: ({ disableTargetWidth, LeftIcon, RightIcon, TargetButtonChildren, targetButtonDisabled, dropdownElements, menuLabelText, menuLabelCustomClass, customPosition, fullHeight, zIndex, customDataTestId, tooltip, buttonAriaLabel, }: DropdownWithIconProps) => JSX.Element;
+export declare const DropdownWithIcon: ({ disableTargetWidth, LeftSection, RightSection, TargetButtonChildren, targetButtonDisabled, dropdownElements, menuLabelText, menuLabelCustomClass, customPosition, fullHeight, zIndex, customTargetButtonDataTestId, targetButtonTooltip, buttonAriaLabel, closeOnItemClick, }: DropdownWithIconProps) => JSX.Element;
 export {};
 //# sourceMappingURL=DropdownWithIcon.d.ts.map

package/dist/dts/components/DropdownWithIcon/DropdownWithIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownWithIcon.d.ts","sourceRoot":"","sources":["../../../../src/components/DropdownWithIcon/DropdownWithIcon.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKlC,UAAU,qBAAqB;IAC7B;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;OAEG;IACH,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACvB;;OAEG;IACH,SAAS,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACxB;;OAEG;IACH,oBAAoB,EAAE,SAAS,CAAC;IAChC;;OAEG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;OAEG;IACH,gBAAgB,EAAE,KAAK,CAAC;QACtB,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;QACrB,IAAI,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;QACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;KACpB,CAAC,CAAC;IACH;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;OAEG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;OAEG;IACH,cAAc,CAAC,EAAE,gBAAgB,CAAC;IAClC;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,eAAO,MAAM,gBAAgB,GAAI,iOAiB9B,qBAAqB,KAAG,GAAG,CAAC,OAkE9B,CAAC"}
+{"version":3,"file":"DropdownWithIcon.d.ts","sourceRoot":"","sources":["../../../../src/components/DropdownWithIcon/DropdownWithIcon.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,SAAS,EAAU,MAAM,OAAO,CAAC;AACjD,OAAO,EAIL,gBAAgB,EAEjB,MAAM,eAAe,CAAC;AAOvB,UAAU,qBAAqB;IAC7B;;OAEG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B;;OAEG;IACH,WAAW,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC1B;;OAEG;IACH,YAAY,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC3B;;OAEG;IACH,oBAAoB,EAAE,SAAS,CAAC;IAChC;;OAEG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;OAEG;IACH,gBAAgB,EAAE,KAAK,CAAC;QACtB,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;QACrB,IAAI,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;QACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,SAAS,CAAC,EAAE,OAAO,CAAC;QACpB,cAAc,CAAC,EAAE,MAAM,CAAC;KACzB,CAAC,CAAC;IACH;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;OAEG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;OAEG;IACH,cAAc,CAAC,EAAE,gBAAgB,CAAC;IAClC;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,4BAA4B,CAAC,EAAE,MAAM,CAAC;IAEtC;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAE7B;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,eAAO,MAAM,gBAAgB,GAAI,iRAwB9B,qBAAqB,KAAG,GAAG,CAAC,OA4F9B,CAAC"}

package/dist/dts/components/DropdownWithIcon/DropdownWithIcon.js

@@ -9,23 +9,34 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from 'react';
-import { Button, Menu } from '@mantine/core';
-import { Tooltip } from '@mantine/core';
-import { IoMdArrowDropdown as Dropdown } from 'react-icons/io';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from 'react';
+import { Button, Menu, Tooltip, } from '@mantine/core';
 import { focusStyles } from '../../utils';
+import { IoMdArrowDropdown as DropdownIcon } from 'react-icons/io';
+var ADDITIONAL_DOWNLOAD_MESSAGE = 'A previous download is being processed. Additional downloads may be started.';
 export var DropdownWithIcon = function (_a) {
-    var disableTargetWidth = _a.disableTargetWidth, LeftIcon = _a.LeftIcon, _b = _a.RightIcon, RightIcon = _b === void 0 ? (_jsx(Dropdown, { size: "1.25em", "aria-hidden": "true", "data-testid": "dropdown-icon" })) : _b, TargetButtonChildren = _a.TargetButtonChildren, targetButtonDisabled = _a.targetButtonDisabled, dropdownElements = _a.dropdownElements, menuLabelText = _a.menuLabelText, menuLabelCustomClass = _a.menuLabelCustomClass, customPosition = _a.customPosition, fullHeight = _a.fullHeight, _c = _a.zIndex, zIndex = _c === void 0 ? undefined : _c, _d = _a.customDataTestId, customDataTestId = _d === void 0 ? undefined : _d, _e = _a.tooltip, tooltip = _e === void 0 ? undefined : _e, _f = _a.buttonAriaLabel, buttonAriaLabel = _f === void 0 ? undefined : _f;
-    return (_jsxs(Menu, __assign({ width: disableTargetWidth !== null && disableTargetWidth !== void 0 ? disableTargetWidth : 'target' }, (customPosition && { position: customPosition }), { "data-testid": customDataTestId !== null && customDataTestId !== void 0 ? customDataTestId : 'menu-elem', zIndex: zIndex, children: [_jsx(Menu.Target, { children: _jsx(Button, __assign({ variant: "outline", color: "primary", className: "bg-base-max border-primary data-disabled:opacity-50 data-disabled:bg-base-max data-disabled:text-primary ".concat(focusStyles) }, (LeftIcon && { leftIcon: LeftIcon }), { rightSection: RightIcon, disabled: targetButtonDisabled, classNames: {
-                        // rightIcon: 'border-l pl-1 -mr-2',
-                        root: fullHeight ? 'h-full' : undefined,
-                    }, "aria-label": buttonAriaLabel, children: _jsx("div", { children: (tooltip === null || tooltip === void 0 ? void 0 : tooltip.length) && !targetButtonDisabled ? (_jsx("div", { children: _jsx(Tooltip, { label: tooltip, children: _jsx("div", { children: TargetButtonChildren }) }) })) : (_jsx("div", { children: TargetButtonChildren })) }) })) }), _jsxs(Menu.Dropdown, { "data-testid": "dropdown-menu-options", className: "border-1 border-secondary", children: [menuLabelText && (_jsxs(React.Fragment, { children: [_jsx(Menu.Label, { className: menuLabelCustomClass !== null && menuLabelCustomClass !== void 0 ? menuLabelCustomClass : 'font-bold', "data-testid": "menu-label", children: menuLabelText }), _jsx(Menu.Divider, {})] })), dropdownElements === null || dropdownElements === void 0 ? void 0 : dropdownElements.map(function (_a, idx) {
-                        var title = _a.title, onClick = _a.onClick, icon = _a.icon, disabled = _a.disabled;
-                        return (_jsx(Menu.Item, { onClick: function () {
-                                if (onClick)
+    var disableTargetWidth = _a.disableTargetWidth, LeftSection = _a.LeftSection, _b = _a.RightSection, RightSection = _b === void 0 ? (_jsx("div", { className: "border-l pl-1 -mr-2", children: _jsx(DropdownIcon, { size: "1.25em", "aria-hidden": "true", "data-testid": "dropdown-icon" }) })) : _b, TargetButtonChildren = _a.TargetButtonChildren, targetButtonDisabled = _a.targetButtonDisabled, dropdownElements = _a.dropdownElements, menuLabelText = _a.menuLabelText, menuLabelCustomClass = _a.menuLabelCustomClass, customPosition = _a.customPosition, fullHeight = _a.fullHeight, _c = _a.zIndex, zIndex = _c === void 0 ? 900 : _c, _d = _a.customTargetButtonDataTestId, customTargetButtonDataTestId = _d === void 0 ? undefined : _d, _e = _a.targetButtonTooltip, targetButtonTooltip = _e === void 0 ? undefined : _e, _f = _a.buttonAriaLabel, buttonAriaLabel = _f === void 0 ? undefined : _f, _g = _a.closeOnItemClick, closeOnItemClick = _g === void 0 ? true : _g;
+    var targetRef = useRef(null);
+    return (_jsxs(Menu, __assign({ width: !disableTargetWidth ? 'target' : null }, (customPosition && { position: customPosition }), { zIndex: zIndex, closeOnItemClick: closeOnItemClick, children: [_jsx(Menu.Target, { children: _jsx(Tooltip, { label: targetButtonTooltip, disabled: !targetButtonTooltip, children: _jsx(Button, __assign({ variant: "outline", color: "primary", className: "flex items-center bg-base-max border-primary data-disabled:opacity-50 data-disabled:bg-base-max data-disabled:text-primary ".concat(focusStyles) }, (LeftSection && { leftSection: LeftSection }), { rightSection: RightSection, disabled: targetButtonDisabled, classNames: {
+                            root: "".concat(fullHeight ? 'h-full' : undefined),
+                        }, ref: targetRef, "aria-label": buttonAriaLabel, "data-testid": customTargetButtonDataTestId !== null && customTargetButtonDataTestId !== void 0 ? customTargetButtonDataTestId : 'menu-elem', children: TargetButtonChildren })) }) }), _jsxs(Menu.Dropdown, { "data-testid": "dropdown-menu-options", className: "border-1 border-secondary", children: [menuLabelText && (_jsxs(_Fragment, { children: [_jsx(Menu.Label, { className: menuLabelCustomClass !== null && menuLabelCustomClass !== void 0 ? menuLabelCustomClass : 'font-bold', "data-testid": "menu-label", children: menuLabelText }), _jsx(Menu.Divider, {})] })), dropdownElements.map(function (_a, idx) {
+                        var title = _a.title, onClick = _a.onClick, icon = _a.icon, disabled = _a.disabled, isLoading = _a.isLoading, loadingTooltip = _a.loadingTooltip;
+                        var menuItem = (_jsx(Menu.Item, { onClick: function () {
+                                var _a;
+                                if (onClick) {
                                     onClick();
+                                }
+                                // This is done inorder to set the last focused element as the menu target element
+                                // This is done to return focus to the target element if the modal is closed with ESC
+                                if (targetRef === null || targetRef === void 0 ? void 0 : targetRef.current) {
+                                    (_a = targetRef === null || targetRef === void 0 ? void 0 : targetRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                                }
                             }, "data-testid": "".concat(title, "-").concat(idx), leftSection: icon && icon, disabled: disabled, children: title }, "".concat(title, "-").concat(idx)));
+                        if (isLoading) {
+                            return (_jsx(Tooltip, { label: loadingTooltip || ADDITIONAL_DOWNLOAD_MESSAGE, position: "right", withArrow: true, multiline: true, w: 400, children: _jsx("div", { children: menuItem }) }, "".concat(title, "-").concat(idx)));
+                        }
+                        return menuItem;
                     })] })] })));
 };
 //# sourceMappingURL=DropdownWithIcon.js.map

package/dist/dts/components/DropdownWithIcon/DropdownWithIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownWithIcon.js","sourceRoot":"","sources":["../../../../src/components/DropdownWithIcon/DropdownWithIcon.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"DropdownWithIcon.js","sourceRoot":"","sources":["../../../../src/components/DropdownWithIcon/DropdownWithIcon.tsx"],"names":[],"mappings":"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"}

package/dist/dts/components/DropdownWithIcon/DropdownWithIcon.unit.test.js

@@ -35,7 +35,7 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     }
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { render } from '@testing-library/react';
+import { render, waitFor } from '@testing-library/react';
 import { DropdownWithIcon } from './DropdownWithIcon';
 import userEvent from '@testing-library/user-event';
 describe('<DropdownWithIcon />', function () {
@@ -44,39 +44,43 @@ describe('<DropdownWithIcon />', function () {
         expect(getByTestId('dropdown-icon')).toBeDefined();
     });
     it('if right icon is provided, provided icon should render', function () {
-        var getByLabelText = render(_jsx(DropdownWithIcon, { TargetButtonChildren: "test", dropdownElements: [{ title: 'test' }, { title: 'test2' }], RightIcon: _jsx("div", { "aria-label": "test-icon" }) })).getByLabelText;
+        var getByLabelText = render(_jsx(DropdownWithIcon, { TargetButtonChildren: "test", dropdownElements: [{ title: 'test' }, { title: 'test2' }], RightSection: _jsx("div", { "aria-label": "test-icon", className: "border-l pl-1 -mr-2" }) })).getByLabelText;
         expect(getByLabelText('test-icon')).toBeDefined();
     });
     it('target button should be disabled if targetButtonDisabled props is true', function () {
-        var getByTestId = render(_jsx(DropdownWithIcon, { TargetButtonChildren: "test", dropdownElements: [{ title: 'test' }, { title: 'test2' }], targetButtonDisabled: true })).getByTestId;
-        expect(getByTestId('menu-elem')).toBeDisabled();
+        var getByRole = render(_jsx(DropdownWithIcon, { TargetButtonChildren: "test", dropdownElements: [{ title: 'test' }, { title: 'test2' }], targetButtonDisabled: true })).getByRole;
+        expect(getByRole('button', { name: 'test' })).toBeDisabled();
     });
     it('target button should NOT be disabled if targetButtonDisabled props is not provided/undefined', function () {
-        var getByTestId = render(_jsx(DropdownWithIcon, { TargetButtonChildren: "test", dropdownElements: [{ title: 'test' }, { title: 'test2' }] })).getByTestId;
-        expect(getByTestId('menu-elem')).not.toBeDisabled();
+        var getByRole = render(_jsx(DropdownWithIcon, { TargetButtonChildren: "test", dropdownElements: [{ title: 'test' }, { title: 'test2' }] })).getByRole;
+        expect(getByRole('button', { name: 'test' })).not.toBeDisabled();
     });
     it('menu label should be present when menuLabelText is provided ', function () { return __awaiter(void 0, void 0, void 0, function () {
-        var _a, getByText, getByTestId;
+        var _a, getByText, getByRole, getByTestId;
         return __generator(this, function (_b) {
             switch (_b.label) {
                 case 0:
-                    _a = render(_jsx(DropdownWithIcon, { TargetButtonChildren: "test", dropdownElements: [{ title: 'test' }, { title: 'test2' }], menuLabelText: "test menu label text" })), getByText = _a.getByText, getByTestId = _a.getByTestId;
-                    return [4 /*yield*/, userEvent.click(getByTestId('menu-elem'))];
+                    _a = render(_jsx(DropdownWithIcon, { TargetButtonChildren: "test", dropdownElements: [{ title: 'test' }, { title: 'test2' }], menuLabelText: "test menu label text" })), getByText = _a.getByText, getByRole = _a.getByRole, getByTestId = _a.getByTestId;
+                    return [4 /*yield*/, userEvent.click(getByRole('button', { name: 'test' }))];
                 case 1:
                     _b.sent();
-                    expect(getByTestId('menu-label')).toBeDefined();
+                    return [4 /*yield*/, waitFor(function () { return expect(getByTestId('menu-label')).toBeDefined(); }, {
+                            timeout: 2000,
+                        })];
+                case 2:
+                    _b.sent();
                     expect(getByText('test menu label text')).toBeInTheDocument();
                     return [2 /*return*/];
             }
         });
     }); });
     it('menu label should NOT be present when menuLabelText is NOT provided ', function () { return __awaiter(void 0, void 0, void 0, function () {
-        var _a, queryByTestId, getByTestId;
+        var _a, queryByTestId, getByRole;
         return __generator(this, function (_b) {
             switch (_b.label) {
                 case 0:
-                    _a = render(_jsx(DropdownWithIcon, { TargetButtonChildren: "test", dropdownElements: [{ title: 'test' }, { title: 'test2' }] })), queryByTestId = _a.queryByTestId, getByTestId = _a.getByTestId;
-                    return [4 /*yield*/, userEvent.click(getByTestId('menu-elem'))];
+                    _a = render(_jsx(DropdownWithIcon, { TargetButtonChildren: "test", dropdownElements: [{ title: 'test' }, { title: 'test2' }] })), queryByTestId = _a.queryByTestId, getByRole = _a.getByRole;
+                    return [4 /*yield*/, userEvent.click(getByRole('button', { name: 'test' }))];
                 case 1:
                     _b.sent();
                     expect(queryByTestId('menu-label')).toBeNull();
@@ -85,40 +89,49 @@ describe('<DropdownWithIcon />', function () {
         });
     }); });
     it('onClick should be called menu clicked on menu items only when provided', function () { return __awaiter(void 0, void 0, void 0, function () {
-        var mockOnClickCallBack1, getByTestId, firstMenuItem;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
+        var mockOnClickCallBack1, _a, getByTestId, getByRole, firstMenuItem;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
                 case 0:
                     mockOnClickCallBack1 = jest.fn();
-                    getByTestId = render(_jsx(DropdownWithIcon, { TargetButtonChildren: "test", dropdownElements: [
+                    _a = render(_jsx(DropdownWithIcon, { TargetButtonChildren: "test", dropdownElements: [
                             { title: 'test', onClick: mockOnClickCallBack1 },
                             { title: 'test2' },
-                        ] })).getByTestId;
-                    return [4 /*yield*/, userEvent.click(getByTestId('menu-elem'))];
+                        ] })), getByTestId = _a.getByTestId, getByRole = _a.getByRole;
+                    return [4 /*yield*/, userEvent.click(getByRole('button', { name: 'test' }))];
                 case 1:
-                    _a.sent();
+                    _b.sent();
+                    return [4 /*yield*/, waitFor(function () { return expect(getByTestId('test-0')).toBeInTheDocument(); }, {
+                            timeout: 2000,
+                        })];
+                case 2:
+                    _b.sent();
                     firstMenuItem = getByTestId('test-0');
                     return [4 /*yield*/, userEvent.click(firstMenuItem)];
-                case 2:
-                    _a.sent();
+                case 3:
+                    _b.sent();
                     expect(mockOnClickCallBack1).toBeCalled();
                     return [2 /*return*/];
             }
         });
     }); });
     it('test menu item disabled', function () { return __awaiter(void 0, void 0, void 0, function () {
-        var getByTestId;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
+        var _a, getByRole, getByTestId;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
                 case 0:
-                    getByTestId = render(_jsx(DropdownWithIcon, { TargetButtonChildren: "test", dropdownElements: [
+                    _a = render(_jsx(DropdownWithIcon, { TargetButtonChildren: "test", dropdownElements: [
                             { title: 'itemD', disabled: true },
                             { title: 'itemE' },
-                        ] })).getByTestId;
-                    return [4 /*yield*/, userEvent.click(getByTestId('menu-elem'))];
+                        ] })), getByRole = _a.getByRole, getByTestId = _a.getByTestId;
+                    return [4 /*yield*/, userEvent.click(getByRole('button', { name: 'test' }))];
                 case 1:
-                    _a.sent();
-                    expect(getByTestId('itemD-0')).toBeDisabled();
+                    _b.sent();
+                    return [4 /*yield*/, waitFor(function () { return expect(getByTestId('itemD-0')).toBeDisabled(); }, {
+                            timeout: 2000,
+                        })];
+                case 2:
+                    _b.sent();
                     expect(getByTestId('itemE-1')).not.toBeDisabled();
                     return [2 /*return*/];
             }

package/dist/dts/components/DropdownWithIcon/DropdownWithIcon.unit.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownWithIcon.unit.test.js","sourceRoot":"","sources":["../../../../src/components/DropdownWithIcon/DropdownWithIcon.unit.test.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"DropdownWithIcon.unit.test.js","sourceRoot":"","sources":["../../../../src/components/DropdownWithIcon/DropdownWithIcon.unit.test.tsx"],"names":[],"mappings":"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"}

package/dist/dts/components/MessageCards/ErrorMessage.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Icon } from '@iconify/react';
+import { Icon } from '@iconify-icon/react';
 var ErrorMessage = function (_a) {
     var message = _a.message;
     return (_jsxs("span", { className: "flex items-center mt-2 text-utility-error", children: [_jsx(Icon, { icon: "gen3:waring", height: "1rem" }), message] }));

package/dist/dts/components/MessageCards/ErrorMessage.js.map

@@ -1 +1 @@
-{"version":3,"file":"ErrorMessage.js","sourceRoot":"","sources":["../../../../src/components/MessageCards/ErrorMessage.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;AAMtC,IAAM,YAAY,GAAgC,UAAC,EAE/B;QADlB,OAAO,aAAA;IACgB,OAAA,CACvB,gBAAM,SAAS,EAAC,2CAA2C,aACzD,KAAC,IAAI,IAAC,IAAI,EAAC,aAAa,EAAC,MAAM,EAAC,MAAM,GAAG,EACxC,OAAO,IACH,CACR;AALwB,CAKxB,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"ErrorMessage.js","sourceRoot":"","sources":["../../../../src/components/MessageCards/ErrorMessage.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAM3C,IAAM,YAAY,GAAgC,UAAC,EAE/B;QADlB,OAAO,aAAA;IACgB,OAAA,CACvB,gBAAM,SAAS,EAAC,2CAA2C,aACzD,KAAC,IAAI,IAAC,IAAI,EAAC,aAAa,EAAC,MAAM,EAAC,MAAM,GAAG,EACxC,OAAO,IACH,CACR;AALwB,CAKxB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/dts/components/Providers/Gen3Provider.d.ts

@@ -9,10 +9,147 @@ interface Gen3ProviderProps {
     modalsConfig: ModalsConfig;
     children?: ReactNode | undefined;
 }
-export declare const createMantineTheme: (fonts: Fonts, colors: Record<string, TenStringArray>) => import("type-fest/source/partial-deep").PartialObjectDeep<import("@mantine/core").MantineTheme, {
-    recurseIntoArrays: false;
-    allowUndefinedInNonTupleArrays: true;
-}>;
+export declare const createMantineTheme: (fonts: Fonts, colors: Record<string, TenStringArray>) => {
+    focusRing?: "auto" | "always" | "never" | undefined;
+    scale?: number | undefined;
+    fontSmoothing?: boolean | undefined;
+    white?: string | undefined;
+    black?: string | undefined;
+    colors?: {
+        [x: string & {}]: import("@mantine/core").MantineColorsTuple | undefined;
+        dark?: import("@mantine/core").MantineColorsTuple | undefined;
+        gray?: import("@mantine/core").MantineColorsTuple | undefined;
+        red?: import("@mantine/core").MantineColorsTuple | undefined;
+        pink?: import("@mantine/core").MantineColorsTuple | undefined;
+        grape?: import("@mantine/core").MantineColorsTuple | undefined;
+        violet?: import("@mantine/core").MantineColorsTuple | undefined;
+        indigo?: import("@mantine/core").MantineColorsTuple | undefined;
+        blue?: import("@mantine/core").MantineColorsTuple | undefined;
+        cyan?: import("@mantine/core").MantineColorsTuple | undefined;
+        green?: import("@mantine/core").MantineColorsTuple | undefined;
+        lime?: import("@mantine/core").MantineColorsTuple | undefined;
+        yellow?: import("@mantine/core").MantineColorsTuple | undefined;
+        orange?: import("@mantine/core").MantineColorsTuple | undefined;
+        teal?: import("@mantine/core").MantineColorsTuple | undefined;
+    } | undefined;
+    primaryShade?: import("@mantine/core").MantineColorShade | {
+        light?: import("@mantine/core").MantineColorShade | undefined;
+        dark?: import("@mantine/core").MantineColorShade | undefined;
+    } | undefined;
+    primaryColor?: string | undefined;
+    variantColorResolver?: import("@mantine/core").VariantColorsResolver | undefined;
+    autoContrast?: boolean | undefined;
+    luminanceThreshold?: number | undefined;
+    fontFamily?: string | undefined;
+    fontFamilyMonospace?: string | undefined;
+    headings?: {
+        fontFamily?: string | undefined;
+        fontWeight?: string | undefined;
+        textWrap?: "wrap" | "balance" | "nowrap" | "pretty" | "stable" | undefined;
+        sizes?: {
+            h1?: {
+                fontSize?: string | undefined;
+                fontWeight?: string | undefined;
+                lineHeight?: string | undefined;
+            } | undefined;
+            h2?: {
+                fontSize?: string | undefined;
+                fontWeight?: string | undefined;
+                lineHeight?: string | undefined;
+            } | undefined;
+            h3?: {
+                fontSize?: string | undefined;
+                fontWeight?: string | undefined;
+                lineHeight?: string | undefined;
+            } | undefined;
+            h4?: {
+                fontSize?: string | undefined;
+                fontWeight?: string | undefined;
+                lineHeight?: string | undefined;
+            } | undefined;
+            h5?: {
+                fontSize?: string | undefined;
+                fontWeight?: string | undefined;
+                lineHeight?: string | undefined;
+            } | undefined;
+            h6?: {
+                fontSize?: string | undefined;
+                fontWeight?: string | undefined;
+                lineHeight?: string | undefined;
+            } | undefined;
+        } | undefined;
+    } | undefined;
+    radius?: {
+        [x: string & {}]: string | undefined;
+        xl?: string | undefined;
+        xs?: string | undefined;
+        sm?: string | undefined;
+        md?: string | undefined;
+        lg?: string | undefined;
+    } | undefined;
+    defaultRadius?: import("@mantine/core").MantineRadius | undefined;
+    spacing?: {
+        [x: number]: string | undefined;
+        [x: string & {}]: string | undefined;
+        xl?: string | undefined;
+        xs?: string | undefined;
+        sm?: string | undefined;
+        md?: string | undefined;
+        lg?: string | undefined;
+    } | undefined;
+    fontSizes?: {
+        [x: string & {}]: string | undefined;
+        xl?: string | undefined;
+        xs?: string | undefined;
+        sm?: string | undefined;
+        md?: string | undefined;
+        lg?: string | undefined;
+    } | undefined;
+    lineHeights?: {
+        [x: string & {}]: string | undefined;
+        xl?: string | undefined;
+        xs?: string | undefined;
+        sm?: string | undefined;
+        md?: string | undefined;
+        lg?: string | undefined;
+    } | undefined;
+    breakpoints?: {
+        [x: string & {}]: string | undefined;
+        xl?: string | undefined;
+        xs?: string | undefined;
+        sm?: string | undefined;
+        md?: string | undefined;
+        lg?: string | undefined;
+    } | undefined;
+    shadows?: {
+        [x: string & {}]: string | undefined;
+        xl?: string | undefined;
+        xs?: string | undefined;
+        sm?: string | undefined;
+        md?: string | undefined;
+        lg?: string | undefined;
+    } | undefined;
+    respectReducedMotion?: boolean | undefined;
+    cursorType?: "default" | "pointer" | undefined;
+    defaultGradient?: {
+        from?: string | undefined;
+        to?: string | undefined;
+        deg?: number | undefined;
+    } | undefined;
+    activeClassName?: string | undefined;
+    focusClassName?: string | undefined;
+    components?: {
+        [x: string]: {
+            classNames?: any;
+            styles?: any;
+            vars?: any;
+            defaultProps?: any;
+        } | undefined;
+    } | undefined;
+    other?: {
+        [x: string]: any;
+    } | undefined;
+};
 /**
  * Gen3Provider wraps around the entire app and provides general configurations
  * for the whole website like color scheme, icons, fonts, and sessionConfigs like

package/dist/dts/components/Providers/Gen3Provider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Gen3Provider.d.ts","sourceRoot":"","sources":["../../../../src/components/Providers/Gen3Provider.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAa,SAAS,EAAE,MAAM,OAAO,CAAC;AAGpD,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAE7C,OAAO,EAAE,KAAK,eAAe,EAAE,KAAK,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAI3E,OAAO,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAC/D,OAAO,EAAsB,KAAK,YAAY,EAAE,MAAM,WAAW,CAAC;AAElE,UAAU,iBAAiB;IACzB,KAAK,EAAE,KAAK,CAAC,eAAe,CAAC,CAAC;IAC9B,aAAa,EAAE,oBAAoB,CAAC;IACpC,YAAY,EAAE,YAAY,CAAC;IAC3B,QAAQ,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CAClC;AAGD,eAAO,MAAM,kBAAkB,GAC7B,OAAO,KAAK,EACZ,QAAQ,MAAM,CAAC,MAAM,EAAE,cAAc,CAAC;;;EAkDvC,CAAC;AAEF;;;;GAIG;AACH,QAAA,MAAM,YAAY,GAAI,mDAKnB,iBAAiB,4CAiBnB,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"Gen3Provider.d.ts","sourceRoot":"","sources":["../../../../src/components/Providers/Gen3Provider.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAa,SAAS,EAAE,MAAM,OAAO,CAAC;AAGpD,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAE7C,OAAO,EAAE,KAAK,eAAe,EAAE,KAAK,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAI3E,OAAO,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAC/D,OAAO,EAAsB,KAAK,YAAY,EAAE,MAAM,WAAW,CAAC;AAElE,UAAU,iBAAiB;IACzB,KAAK,EAAE,KAAK,CAAC,eAAe,CAAC,CAAC;IAC9B,aAAa,EAAE,oBAAoB,CAAC;IACpC,YAAY,EAAE,YAAY,CAAC;IAC3B,QAAQ,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CAClC;AAGD,eAAO,MAAM,kBAAkB,GAC7B,OAAO,KAAK,EACZ,QAAQ,MAAM,CAAC,MAAM,EAAE,cAAc,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkDvC,CAAC;AAEF;;;;GAIG;AACH,QAAA,MAAM,YAAY,GAAI,mDAKnB,iBAAiB,4CAiBnB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/dts/components/charts/Charts.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Charts.d.ts","sourceRoot":"","sources":["../../../../src/components/charts/Charts.tsx"],"names":[],"mappings":"AACA,OAAO,EAEL,gBAAgB,EAEjB,MAAM,YAAY,CAAC;AAmBpB,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAQvC,UAAU,WAAW;IACnB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC;IACrC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,gBAAgB,CAAC;IACvB,SAAS,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAeD,QAAA,MAAM,MAAM,GAAI,mEAQb,WAAW,4CA0Mb,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Charts.d.ts","sourceRoot":"","sources":["../../../../src/components/charts/Charts.tsx"],"names":[],"mappings":"AACA,OAAO,EAEL,gBAAgB,EAEjB,MAAM,YAAY,CAAC;AAoBpB,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAQvC,UAAU,WAAW;IACnB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC;IACrC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,gBAAgB,CAAC;IACvB,SAAS,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAwHD,QAAA,MAAM,MAAM,GAAI,mEAQb,WAAW,4CAkGb,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/dist/dts/components/charts/Charts.js

@@ -3,9 +3,7 @@ import React from 'react';
 import { fieldNameToTitle, } from '@gen3/core';
 import { Icon } from '@iconify-icon/react';
 import { useDisclosure } from '@mantine/hooks';
-import { 
-// ActionIcon,
-Card, Grid, Group, Text, LoadingOverlay, Table, ColorSwatch, Modal, Button, useMantineTheme, } from '@mantine/core';
+import { Card, Grid, Group, Text, LoadingOverlay, Table, ColorSwatch, Modal, Button, useMantineTheme, } from '@mantine/core';
 import { createChart } from './createChart';
 import { computeRowSpan } from './utils';
 import ErrorCard from '../../components/MessageCards/ErrorCard';
@@ -23,6 +21,28 @@ var chartColors = [
     '#9a60b4',
     '#ea7ccc',
 ];
+var LegendRows = function (_a) {
+    var data = _a.data;
+    var moreThanMaxRows = data.length > MAX_LEGEND_ROWS;
+    var limitedRows = moreThanMaxRows ? data.slice(0, MAX_LEGEND_ROWS) : data;
+    return limitedRows.map(function (element, elIndex) { return (_jsxs(Table.Tr, { children: [_jsxs(Table.Td, { children: [_jsx(ColorSwatch, { className: "inline-block mr-2 align-middle", size: "1em", radius: "xs", color: (chartColors === null || chartColors === void 0 ? void 0 : chartColors[elIndex % chartColors.length]) || '' }), element.key] }), _jsx(Table.Td, { className: "text-right", children: element.count })] }, elIndex)); });
+};
+var LegendOverflow = function (_a) {
+    var _b;
+    var chart = _a.chart, data = _a.data, chartTitle = _a.chartTitle, counts = _a.counts;
+    var _c = useDisclosure(false), openedMoreRows = _c[0], _d = _c[1], openMoreRows = _d.open, closeMoreRows = _d.close;
+    var theme = useMantineTheme();
+    return (_jsxs(React.Fragment, { children: [_jsx(Modal, { opened: openedMoreRows, onClose: closeMoreRows, title: chartTitle, size: "xl", children: _jsxs(Grid, { children: [_jsx(Grid.Col, { span: 6, children: createChart(chart.chartType, {
+                                data: data === undefined ? [] : data,
+                                total: counts !== null && counts !== void 0 ? counts : 1,
+                                valueType: (_b = chart.valueType) !== null && _b !== void 0 ? _b : 'count',
+                                label: chart.label,
+                                showLegendInChart: chart.showLegendInChart,
+                            }) }, "modal-col-1"), _jsx(Grid.Col, { span: 6, children: _jsx("div", { className: "border-solid border-[1px] border-[var(--mantine-color-gray-3)] h-full p-1", children: _jsx(Table, { withRowBorders: false, classNames: {
+                                        table: '',
+                                        td: 'p-1 leading-3',
+                                    }, children: _jsx(Table.Tbody, { children: data.map(function (element, elIndex) { return (_jsxs(Table.Tr, { children: [_jsxs(Table.Td, { children: [_jsx(ColorSwatch, { className: "inline-block mr-2 align-middle", size: "1em", radius: "xs", color: (chartColors === null || chartColors === void 0 ? void 0 : chartColors[elIndex % chartColors.length]) || '' }), element.key] }), _jsx(Table.Td, { className: "text-right", children: element.count })] }, elIndex)); }) }) }) }) }, "modal-col-2")] }) }), _jsxs(Button, { variant: "subtle", onClick: openMoreRows, leftSection: _jsx(Icon, { icon: "gen3:open-in-modal", height: 24, width: 24, color: theme.colors.accent[5] }), className: "text-black hover:text-black", children: [data.length - MAX_LEGEND_ROWS, " more"] })] }));
+};
 //The Charts component maps the data from ChartsProps into a grid of createChart() ReactNodes
 var Charts = function (_a) {
     var _b;
@@ -35,43 +55,19 @@ var Charts = function (_a) {
         if (Object.keys(data).length > 0 && !(field in data)) {
             return _jsx(ErrorCard, { message: "".concat(field, " not found in data") });
         }
-        var LegendRows = function (_a) {
-            var data = _a.data;
-            var moreThanMaxRows = data.length > MAX_LEGEND_ROWS;
-            var limitedRows = moreThanMaxRows
-                ? data.slice(0, MAX_LEGEND_ROWS)
-                : data;
-            return limitedRows.map(function (element, elIndex) { return (_jsxs(Table.Tr, { children: [_jsxs(Table.Td, { children: [_jsx(ColorSwatch, { className: "inline-block mr-2 align-middle", size: "1em", radius: "xs", color: (chartColors === null || chartColors === void 0 ? void 0 : chartColors[elIndex % chartColors.length]) || '' }), element.key] }), _jsx(Table.Td, { className: "text-right", children: element.count })] }, elIndex)); });
-        };
-        var LegendOverflow = function (_a) {
-            var _b;
-            var chart = _a.chart, data = _a.data, chartTitle = _a.chartTitle;
-            var _c = useDisclosure(false), openedMoreRows = _c[0], _d = _c[1], openMoreRows = _d.open, closeMoreRows = _d.close;
-            var theme = useMantineTheme();
-            return (_jsxs(React.Fragment, { children: [_jsx(Modal, { opened: openedMoreRows, onClose: closeMoreRows, title: chartTitle, size: "xl", children: _jsxs(Grid, { children: [_jsx(Grid.Col, { span: 6, children: createChart(chart.chartType, {
-                                        data: data === undefined ? [] : data,
-                                        total: counts !== null && counts !== void 0 ? counts : 1,
-                                        valueType: (_b = chart.valueType) !== null && _b !== void 0 ? _b : 'count',
-                                        label: chart.label,
-                                        showLegendInChart: chart.showLegendInChart,
-                                    }) }, "modal-col-1"), _jsx(Grid.Col, { span: 6, children: _jsx("div", { className: "border-solid border-[1px] border-[var(--mantine-color-gray-3)] h-full p-1", children: _jsx(Table, { withRowBorders: false, classNames: {
-                                                table: '',
-                                                td: 'p-1 leading-3',
-                                            }, children: _jsx(Table.Tbody, { children: data.map(function (element, elIndex) { return (_jsxs(Table.Tr, { children: [_jsxs(Table.Td, { children: [_jsx(ColorSwatch, { className: "inline-block mr-2 align-middle", size: "1em", radius: "xs", color: (chartColors === null || chartColors === void 0 ? void 0 : chartColors[elIndex % chartColors.length]) ||
-                                                                        '' }), element.key] }), _jsx(Table.Td, { className: "text-right", children: element.count })] }, elIndex)); }) }) }) }) }, "modal-col-2")] }) }), _jsxs(Button, { variant: "subtle", onClick: openMoreRows, leftSection: _jsx(Icon, { icon: "gen3:open-in-modal", height: 24, width: 24, color: theme.colors.accent[5] }), className: "text-black hover:text-black", children: [data.length - MAX_LEGEND_ROWS, " more"] })] }));
-        };
         var dataKeys = field in data && (data === null || data === void 0 ? void 0 : data[field].length) > 0
             ? Object.keys(data[field][0])
             : [];
         var chartTitle = (_a = charts[field].title) !== null && _a !== void 0 ? _a : fieldNameToTitle(field);
-        var moreThanMaxRows = (data === null || data === void 0 ? void 0 : data[field]) && data[field].length > MAX_LEGEND_ROWS;
+        var numberOfDataItems = (data === null || data === void 0 ? void 0 : data[field]) && data[field].length;
+        var moreThanMaxRows = numberOfDataItems > MAX_LEGEND_ROWS;
         return (_jsx(Grid.Col, { span: spans[indexNum], children: _jsxs(Card, { shadow: "md", withBorder: style === 'box', className: "h-full", children: [_jsx(Card.Section, { inheritPadding: true, py: "xs", withBorder: style === 'box', children: _jsx(Group, { justify: "space-between", children: _jsx(Text, { fw: 900, className: "".concat(style === 'box' ? 'font-bold [text-shadow:_1px_0_#000]' : ''), children: chartTitle }) }) }), _jsx(LoadingOverlay, { visible: !isSuccess }), createChart(charts[field].chartType, {
                         data: data === undefined ? [] : data[field],
                         total: counts !== null && counts !== void 0 ? counts : 1,
                         valueType: (_b = charts[field].valueType) !== null && _b !== void 0 ? _b : 'count',
                         label: charts[field].label,
                         showLegendInChart: charts[field].showLegendInChart,
-                    }), showLegends && (_jsx(Card.Section, { inheritPadding: true, py: "xs", withBorder: style === 'box', children: _jsxs(Table, { withRowBorders: false, classNames: {
+                    }), numberOfDataItems > 0 && showLegends && (_jsx(Card.Section, { inheritPadding: true, py: "xs", withBorder: style === 'box', children: _jsxs(Table, { withRowBorders: false, classNames: {
                                 td: 'p-1 leading-3',
                                 th: 'p-1 leading-3 [text-shadow:_1px_0_#000]',
                                 thead: 'border-b',
@@ -79,7 +75,7 @@ var Charts = function (_a) {
                             }, children: [_jsx(Table.Thead, { children: _jsx(Table.Tr, { children: dataKeys.map(function (el, i) {
                                             var _a, _b;
                                             return (_jsx(Table.Th, { className: "last:text-right", children: ((_b = (_a = charts[field]) === null || _a === void 0 ? void 0 : _a.dataLabels) === null || _b === void 0 ? void 0 : _b[el]) || (_jsx(React.Fragment, { children: "\u00A0" })) }, i));
-                                        }) }) }), _jsx(Table.Tbody, { children: data === undefined ? '' : _jsx(LegendRows, { data: data[field] }) })] }) })), showLegends && moreThanMaxRows && (_jsx(Card.Section, { inheritPadding: true, withBorder: style === 'box', className: "text-right p-1", children: _jsx(LegendOverflow, { chart: charts[field], data: data[field], chartTitle: chartTitle }) }))] }) }, "".concat(indexNum, "-charts-").concat(field, "-col")));
+                                        }) }) }), _jsx(Table.Tbody, { children: data === undefined ? '' : _jsx(LegendRows, { data: data[field] }) })] }) })), showLegends && moreThanMaxRows && (_jsx(Card.Section, { inheritPadding: true, withBorder: style === 'box', className: "text-right p-1", children: _jsx(LegendOverflow, { chart: charts[field], data: data[field], chartTitle: chartTitle, counts: counts !== null && counts !== void 0 ? counts : 0 }) }))] }) }, "".concat(indexNum, "-charts-").concat(field, "-col")));
     };
     return (_jsx(Grid, { className: "w-full", children: data && ((_b = Object.keys(charts)) === null || _b === void 0 ? void 0 : _b.map(chartCard)) }));
 };