@qoretechnologies/reqore 0.67.6 → 0.68.1

package/dist/esm/components/Table/row.js

@@ -0,0 +1,176 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/* @flow */
+import { get, isFunction, isString } from 'lodash';
+import React, { memo, useCallback, useMemo } from 'react';
+import styled, { css } from 'styled-components';
+import { ReqoreButton, ReqoreControlGroup, ReqoreIcon } from '../..';
+import { SIZE_TO_PX } from '../../constants/sizes';
+import { ReqoreH4 } from '../Header';
+import { ReqoreP } from '../Paragraph';
+import ReqoreTag from '../Tag';
+import { TimeAgo } from '../TimeAgo';
+import { ReqoreTableBodyCell } from './cell';
+import { calculatePinOffsets, getReorderedLeaves, getTotalColumnsWidth, } from './helpers';
+export const StyledTableRow = styled.div `
+  ${({ size, wrap, minWidth }) => css `
+    display: flex;
+    ${wrap
+    ? css `
+          min-height: ${SIZE_TO_PX[size]}px;
+        `
+    : css `
+          height: ${SIZE_TO_PX[size]}px;
+        `}
+    ${minWidth
+    ? css `
+          min-width: ${minWidth}px;
+        `
+    : ''}
+  `}
+`;
+const ReqoreTableRow = memo(({ data: { data, columns, selectable, onSelectClick, selected, onRowClick, striped, size, selectedRowIntent, flat, wrap, maxCellHeight, expandHeightButtonProps, cellComponent, rowComponent, tableWidth, }, style, index, }) => {
+    const isSelected = data[index]._selectId &&
+        selected.find((selectId) => selectId.toString() === data[index]._selectId.toString());
+    const CellComponent = cellComponent || ReqoreTableBodyCell;
+    const RowComponent = rowComponent || StyledTableRow;
+    const pinOffsets = useMemo(() => calculatePinOffsets(columns), [columns]);
+    const totalColumnsWidth = useMemo(() => getTotalColumnsWidth(columns), [columns]);
+    const rowWrap = useMemo(() => {
+        if (wrap) {
+            return true;
+        }
+        return columns.some(function check(column) {
+            if (column.header?.columns) {
+                return column.header.columns.some(check);
+            }
+            return column.cell?.wrap === true;
+        });
+    }, [columns, wrap]);
+    const renderContent = useCallback((cell, data, dataId, align) => {
+        if (cell?.actions) {
+            return (_jsx(ReqoreControlGroup, { size: size, stack: true, fill: true, fluid: true, style: { height: '100%' }, rounded: false, children: cell.actions(data).map((action, index) => (_jsx(ReqoreButton, { rounded: false, iconsAlign: align === 'center' ? 'center' : 'sides', textAlign: align, flat: true, ...action, onClick: (e) => {
+                        e.stopPropagation();
+                        action.onClick?.(e);
+                    } }, index))) }));
+        }
+        let content = cell?.content;
+        if (isFunction(content)) {
+            // Check what type does the content function return
+            if (React.isValidElement(content(data))) {
+                const Content = content;
+                // If it's a react element, return it
+                return _jsx(Content, { ...data, _size: size, _dataId: dataId, isSelected: isSelected });
+            }
+            // If it's a function, call it and return the result
+            content = content(data);
+        }
+        const datum = get(data, dataId);
+        if (isString(content)) {
+            // Separate the content string by colon
+            const [type, intentOrColorOrIconName] = content.split(':');
+            // Check if the intent starts with hash for tags
+            const intent = intentOrColorOrIconName?.startsWith('#')
+                ? undefined
+                : intentOrColorOrIconName;
+            const color = intentOrColorOrIconName?.startsWith('#') && type === 'tag'
+                ? intentOrColorOrIconName
+                : undefined;
+            // Render content based on the type
+            switch (type) {
+                case 'time-ago':
+                    return (_jsx(ReqoreP, { className: 'reqore-table-text', intent: intent, size: size, children: _jsx(TimeAgo, { time: datum }) }));
+                case 'tag':
+                    return (_jsx(ReqoreTag, { label: datum, size: size, intent: intent, color: color }));
+                case 'title':
+                    return _jsx(ReqoreH4, { intent: intent, children: datum });
+                case 'text':
+                    return (_jsx(ReqoreP, { className: 'reqore-table-text', intent: intent, size: size, children: datum }));
+                case 'number':
+                    return (_jsx(ReqoreP, { className: 'reqore-table-text', intent: intent, size: size, effect: { italic: true }, children: datum }));
+                case 'boolean':
+                    return datum ? (_jsx(ReqoreIcon, { icon: 'CheckLine', size: size, intent: 'success' })) : (_jsx(ReqoreIcon, { icon: 'CloseLine', size: size, intent: 'danger' }));
+                case 'icon':
+                    return _jsx(ReqoreIcon, { size: size, icon: intentOrColorOrIconName });
+                default:
+                    return (_jsx(ReqoreP, { className: 'reqore-table-text', size: size, children: content }));
+            }
+        }
+        return _jsx(ReqoreP, { className: 'reqore-table-text', children: datum });
+    }, []);
+    const reorderedLeaves = useMemo(() => getReorderedLeaves(columns, tableWidth), [columns, tableWidth]);
+    const renderCells = useCallback(() => reorderedLeaves.map(({ width, minWidth, maxWidth, resizedWidth, grow, dataId, cell, align, intent }) => {
+        const datum = get(data[index], dataId);
+        // Build the tooltip
+        const tooltip = cell?.tooltip
+            ? typeof cell?.tooltip(datum) !== 'object'
+                ? {
+                    content: cell.tooltip(datum),
+                }
+                : cell.tooltip(datum)
+            : {};
+        const pinInfo = pinOffsets[dataId];
+        const cellWrap = cell?.wrap ?? wrap;
+        const cellMaxHeight = cell?.maxHeight ?? data[index]._maxHeight ?? maxCellHeight;
+        return (_jsx(CellComponent, { ...{
+                width: resizedWidth || width,
+                minWidth,
+                maxWidth,
+                grow,
+                align,
+                size,
+                striped,
+                tooltip,
+                padded: cell?.padded,
+                disabled: data[index]._disabled,
+                selected: !!isSelected,
+                selectedIntent: selectedRowIntent,
+                flat,
+                wrap: cellWrap,
+                maxHeight: cellMaxHeight,
+                expandHeightButtonProps,
+                pin: pinInfo?.pin,
+                pinOffset: pinInfo?.offset,
+                pinEdge: pinInfo?.isEdge,
+                even: index % 2 === 0 ? true : false,
+                intent: cell?.intent || data[index]._intent || intent,
+                interactive: !!cell?.onClick || !!onRowClick,
+                interactiveCell: !!cell?.onClick,
+                onClick: (e) => {
+                    if (cell?.onClick) {
+                        e.stopPropagation();
+                        cell.onClick(data[index]);
+                    }
+                    else if (onRowClick) {
+                        e.stopPropagation();
+                        onRowClick(data[index]);
+                    }
+                    else if (selectable && data[index]._selectId) {
+                        // Otherwise select the row if selectable
+                        onSelectClick(data[index]._selectId);
+                    }
+                },
+                className: 'reqore-table-cell',
+            }, children: renderContent(cell, data[index], dataId, align) }, dataId));
+    }), [
+        reorderedLeaves,
+        data,
+        index,
+        isSelected,
+        onRowClick,
+        selectable,
+        pinOffsets,
+        wrap,
+        maxCellHeight,
+        expandHeightButtonProps,
+        size,
+        striped,
+        selectedRowIntent,
+        flat,
+        CellComponent,
+        onSelectClick,
+        renderContent,
+    ]);
+    return (_jsx(RowComponent, { style: style, className: 'reqore-table-row', interactive: !!onRowClick && !data[index]._disabled, size: size, wrap: rowWrap, minWidth: totalColumnsWidth, children: renderCells() }));
+});
+export default ReqoreTableRow;
+//# sourceMappingURL=row.js.map

package/dist/esm/components/Table/row.js.map

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

package/dist/esm/components/Table/value.js

@@ -0,0 +1,19 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { memo } from 'react';
+import ReqoreIcon from '../Icon';
+import { ReqoreP } from '../Paragraph';
+export const ReqoreTableValue = memo(({ value }) => {
+    if (value === undefined || value === null) {
+        return _jsx(_Fragment, { children: "-" });
+    }
+    switch (typeof value) {
+        case 'string':
+        case 'number':
+            return _jsx(ReqoreP, { className: 'reqore-table-text', children: value });
+        case 'boolean':
+            return (_jsx(ReqoreIcon, { icon: value ? 'CheckLine' : 'CloseLine', intent: value ? 'success' : 'danger' }));
+        default:
+            return _jsx(ReqoreP, { className: 'reqore-table-text', children: JSON.stringify(value) });
+    }
+});
+//# sourceMappingURL=value.js.map

package/dist/esm/components/Table/value.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"value.js","sourceRoot":"","sources":["../../../../src/components/Table/value.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AAC7B,OAAO,UAAU,MAAM,SAAS,CAAC;AACjC,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAMvC,MAAM,CAAC,MAAM,gBAAgB,GAAG,IAAI,CAAC,CAAC,EAAE,KAAK,EAA0B,EAAE,EAAE;IACzE,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,IAAI,EAAE;QACzC,OAAO,kCAAM,CAAC;KACf;IAED,QAAQ,OAAO,KAAK,EAAE;QACpB,KAAK,QAAQ,CAAC;QACd,KAAK,QAAQ;YACX,OAAO,KAAC,OAAO,IAAC,SAAS,EAAC,mBAAmB,YAAE,KAAK,GAAW,CAAC;QAClE,KAAK,SAAS;YACZ,OAAO,CACL,KAAC,UAAU,IACT,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW,EACvC,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,GACpC,CACH,CAAC;QACJ;YACE,OAAO,KAAC,OAAO,IAAC,SAAS,EAAC,mBAAmB,YAAE,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,GAAW,CAAC;KACnF;AACH,CAAC,CAAC,CAAC"}

package/dist/esm/components/Tabs/content.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled from 'styled-components';
+import { PADDING_FROM_SIZE } from '../../constants/sizes';
+const StyledTabsContent = styled.div `
+  display: flex;
+  flex-flow: column;
+  overflow: hidden;
+  flex: 1;
+  padding: ${({ padded, size }) => padded === 'none' || padded === false
+    ? undefined
+    : `${padded === 'both' || padded === true || padded === 'vertical'
+        ? `${PADDING_FROM_SIZE[size]}px`
+        : 0} ${padded === 'both' || padded === true || padded === 'horizontal'
+        ? `${PADDING_FROM_SIZE[size]}px`
+        : 0}`};
+  padding-top: ${({ padded, size }) => padded === 'top' ? `${PADDING_FROM_SIZE[size]}px` : undefined};
+  padding-bottom: ${({ padded, size }) => padded === 'bottom' ? `${PADDING_FROM_SIZE[size]}px` : undefined};
+  padding-left: ${({ padded, size }) => padded === 'left' ? `${PADDING_FROM_SIZE[size]}px` : undefined};
+  padding-right: ${({ padded, size }) => padded === 'right' ? `${PADDING_FROM_SIZE[size]}px` : undefined};
+`;
+const ReqoreTabsContent = ({ children, className, padded = true, size = 'normal', ...rest }) => (_jsx(StyledTabsContent, { ...rest, size: size, padded: padded, className: `${className || ''} reqore-tabs-content`, children: children }));
+export default ReqoreTabsContent;
+//# sourceMappingURL=content.js.map

package/dist/esm/components/Tabs/content.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"content.js","sourceRoot":"","sources":["../../../../src/components/Tabs/content.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,iBAAiB,EAAU,MAAM,uBAAuB,CAAC;AAqBlE,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;aAKvB,CAAC,EAAE,MAAM,EAAE,IAAI,EAAsB,EAAE,EAAE,CAClD,MAAM,KAAK,MAAM,IAAI,MAAM,KAAK,KAAK;IACnC,CAAC,CAAC,SAAS;IACX,CAAC,CAAC,GACE,MAAM,KAAK,MAAM,IAAI,MAAM,KAAK,IAAI,IAAI,MAAM,KAAK,UAAU;QAC3D,CAAC,CAAC,GAAG,iBAAiB,CAAC,IAAI,CAAC,IAAI;QAChC,CAAC,CAAC,CACN,IACE,MAAM,KAAK,MAAM,IAAI,MAAM,KAAK,IAAI,IAAI,MAAM,KAAK,YAAY;QAC7D,CAAC,CAAC,GAAG,iBAAiB,CAAC,IAAI,CAAC,IAAI;QAChC,CAAC,CAAC,CACN,EAAE;iBACO,CAAC,EAAE,MAAM,EAAE,IAAI,EAAsB,EAAE,EAAE,CACtD,MAAM,KAAK,KAAK,CAAC,CAAC,CAAC,GAAG,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS;oBAC7C,CAAC,EAAE,MAAM,EAAE,IAAI,EAAsB,EAAE,EAAE,CACzD,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS;kBAClD,CAAC,EAAE,MAAM,EAAE,IAAI,EAAsB,EAAE,EAAE,CACvD,MAAM,KAAK,MAAM,CAAC,CAAC,CAAC,GAAG,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS;mBAC/C,CAAC,EAAE,MAAM,EAAE,IAAI,EAAsB,EAAE,EAAE,CACxD,MAAM,KAAK,OAAO,CAAC,CAAC,CAAC,GAAG,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS;CAClE,CAAC;AAEF,MAAM,iBAAiB,GAAG,CAAC,EACzB,QAAQ,EACR,SAAS,EACT,MAAM,GAAG,IAAI,EACb,IAAI,GAAG,QAAQ,EACf,GAAG,IAAI,EACY,EAAE,EAAE,CAAC,CACxB,KAAC,iBAAiB,OACZ,IAAI,EACR,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,GAAG,SAAS,IAAI,EAAE,sBAAsB,YAElD,QAAQ,GACS,CACrB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/esm/components/Tabs/index.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useCallback, useState } from 'react';
+import { useUpdateEffect } from 'react-use';
+import styled, { css } from 'styled-components';
+import { ReqoreErrorBoundary } from '../..';
+import ReqoreTabsList from './list';
+const StyledTabs = styled.div `
+  display: flex;
+  ${({ vertical, fillParent, width }) => css `
+    width: ${width ? `${width}px` : '100%'};
+    height: ${fillParent ? '100%' : undefined};
+    flex-flow: ${vertical ? 'row' : 'column'};
+  `}
+`;
+const ReqoreTabs = ({ tabs, activeTab, children, className, onTabChange, fill, _testWidth, vertical, activeTabIntent, flat = true, size = 'normal', width, wrapTabNames, customTheme, intent, padded, tabsPadding, unMountOnTabChange = true, loadingIconType, useReactTransition = true, errorBoundaryOptions, ...rest }) => {
+    const [_activeTab, setActiveTab] = useState(activeTab || tabs[0].id);
+    useUpdateEffect(() => {
+        if (activeTab || activeTab === 0) {
+            setActiveTab(activeTab);
+            if (onTabChange) {
+                onTabChange(activeTab);
+            }
+        }
+    }, [activeTab]);
+    const handleTabChange = useCallback((tabId) => {
+        setActiveTab(tabId);
+        if (onTabChange) {
+            onTabChange(tabId);
+        }
+    }, [onTabChange]);
+    return (_jsx(ReqoreErrorBoundary, { ...errorBoundaryOptions, children: _jsxs(StyledTabs, { ...rest, width: width, vertical: vertical, className: `${className || ''} reqore-tabs`, children: [_jsx(ReqoreTabsList, { tabs: tabs, padded: padded, flat: flat, fill: fill, size: size, width: width, vertical: vertical, _testWidth: _testWidth, activeTab: _activeTab, wrapTabNames: wrapTabNames, activeTabIntent: activeTabIntent, customTheme: customTheme, intent: intent, onTabChange: handleTabChange, loadingIconType: loadingIconType, useReactTransition: useReactTransition }), React.Children.map(children, (child) => child &&
+                    tabs.find((tab) => tab.id === child.props?.tabId)?.show !== false &&
+                    (child.props?.tabId === _activeTab || !unMountOnTabChange)
+                    ? React.cloneElement(child, {
+                        padded: child.props?.padded || tabsPadding,
+                        key: child.props?.tabId,
+                        style: child.props?.tabId === _activeTab
+                            ? child.props.style
+                            : { ...(child.props.style || {}), display: 'none' },
+                    })
+                    : null)] }) }));
+};
+export default ReqoreTabs;
+//# sourceMappingURL=index.js.map

package/dist/esm/components/Tabs/index.js.map

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

package/dist/esm/components/Tabs/item.js

@@ -0,0 +1,122 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { omit } from 'lodash';
+import { forwardRef, memo, useState, useTransition } from 'react';
+import { useUnmount, useUpdateEffect } from 'react-use';
+import styled, { css } from 'styled-components';
+import { useCombinedRefs } from '../../hooks/useCombinedRefs';
+import { useReqoreTheme } from '../../hooks/useTheme';
+import ReqoreButton, { StyledButton } from '../Button';
+import ReqoreControlGroup from '../ControlGroup';
+export const StyledTabListItem = styled.div `
+  ${({ disabled, vertical, fill, fixed, padded }) => {
+    return css `
+      display: flex;
+      flex-shrink: 0;
+      position: relative;
+      align-items: center;
+      width: ${vertical ? `100%` : undefined};
+
+      ${vertical
+        ? css `
+            ${StyledButton}:last-child {
+              border-right: 0;
+            }
+            ${StyledButton}:last-child {
+              border-top-right-radius: 0 !important;
+              border-bottom-right-radius: 0 !important;
+            }
+
+            ${padded === false &&
+            css `
+              &:first-child {
+                padding-top: 0;
+              }
+              &:last-child {
+                padding-bottom: 0;
+              }
+            `}
+          `
+        : css `
+            ${StyledButton} {
+              border-bottom: 0;
+            }
+            ${StyledButton}:first-child {
+              border-bottom-left-radius: 0 !important;
+            }
+            ${StyledButton}:last-child {
+              border-bottom-right-radius: 0 !important;
+            }
+
+            ${padded === false &&
+            css `
+              &:first-child {
+                padding-left: 0;
+              }
+              &:last-child {
+                padding-right: 0;
+              }
+            `}
+          `}
+
+      ${fill && !fixed
+        ? css `
+            flex: 1 0 auto;
+          `
+        : undefined}
+
+      ${disabled &&
+        css `
+        cursor: not-allowed;
+        > * {
+          opacity: 0.5;
+        }
+      `}
+    `;
+}}
+
+  a {
+    text-decoration: none;
+
+    &:hover > * {
+      text-decoration: underline;
+    }
+  }
+`;
+const ReqoreTabsListItem = memo(forwardRef(({ tooltip, label, props, icon, active, as, disabled, vertical, onClick, activeIntent, onCloseClick, fill, intent, size = 'normal', closeIcon, customTheme, className, flat = true, wrapTabNames, padded, useReactTransition, ...rest }, ref) => {
+    const [isPending, startTransition] = useTransition();
+    const [isStillPending, setStillPending] = useState(false);
+    const [loadingTimer, setLoadingTimer] = useState(null);
+    const { targetRef } = useCombinedRefs(ref);
+    const theme = useReqoreTheme('main', customTheme, undefined);
+    useUpdateEffect(() => {
+        if (isPending) {
+            setLoadingTimer(setTimeout(() => {
+                setStillPending(() => true);
+            }, 300));
+        }
+        else {
+            clearTimeout(loadingTimer);
+            setStillPending(false);
+            setLoadingTimer(null);
+        }
+    }, [isPending]);
+    useUnmount(() => {
+        clearTimeout(loadingTimer);
+    });
+    const handleClick = (event) => {
+        if (!useReactTransition) {
+            onClick?.(event);
+            return;
+        }
+        startTransition(() => {
+            onClick?.(event);
+        });
+    };
+    const renderButton = () => (_jsx(ReqoreButton, { flat: intent ? false : flat, fluid: fill || vertical, icon: icon, minimal: true, wrap: wrapTabNames, intent: active ? activeIntent || intent : intent, active: active, disabled: disabled, onClick: handleClick, tooltip: tooltip, customTheme: theme, className: `reqore-tabs-list-item ${active ? 'reqore-tabs-list-item-active' : ''}`, size: size, ...omit(rest, ['id']), loading: isStillPending || rest.loading, children: label }));
+    return (_jsx(StyledTabListItem, { ref: targetRef, ...props, className: className, intent: intent, as: as, size: size, active: active, disabled: disabled, vertical: vertical, theme: theme, fill: fill, fixed: rest.fixed, padded: padded, children: !onCloseClick || disabled ? (renderButton()) : (_jsxs(ReqoreControlGroup, { stack: true, size: size, fluid: fill || vertical, fill: wrapTabNames, children: [renderButton(), onCloseClick && !disabled ? (_jsx(ReqoreButton, { fixed: true, flat: intent ? false : flat, icon: closeIcon || 'CloseLine', intent: active ? activeIntent || intent : intent, minimal: true, wrap: wrapTabNames, active: active, className: 'reqore-tabs-list-item-close', customTheme: theme, size: size, onClick: (event) => {
+                        event.stopPropagation();
+                        onCloseClick?.();
+                    } })) : null] })) }));
+}));
+export default ReqoreTabsListItem;
+//# sourceMappingURL=item.js.map

package/dist/esm/components/Tabs/item.js.map

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

package/dist/esm/components/Tabs/list.js

@@ -0,0 +1,208 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
+import { isArray, isObject } from 'lodash';
+import React, { useMemo } from 'react';
+import { useMeasure } from 'react-use';
+import styled, { css } from 'styled-components';
+import { ReqorePopover } from '../..';
+import { CONTROL_TEXT_FROM_SIZE, GAP_FROM_SIZE, ICON_FROM_SIZE, PADDING_FROM_SIZE, } from '../../constants/sizes';
+import ReqoreThemeProvider from '../../containers/ThemeProvider';
+import { changeLightness, getColorFromMaybeString, getNthGradientColor, } from '../../helpers/colors';
+import { calculateStringSizeInPixels, getOneLessSize } from '../../helpers/utils';
+import { useReqoreTheme } from '../../hooks/useTheme';
+import { getPrimaryGradient } from '../Effect';
+import ReqoreMenu from '../Menu';
+import ReqoreMenuItem from '../Menu/item';
+import { StyledPopover } from '../Popover';
+import ReqoreTabsListItem, { StyledTabListItem } from './item';
+export const StyledReqoreTabsList = styled.div `
+  ${({ fill, vertical, size, padded, flat, currentTabColor, width }) => css `
+    height: ${vertical ? '100%' : undefined};
+    width: ${vertical ? width || '200px' : '100%'};
+    flex-flow: ${vertical ? 'column' : 'row'};
+    display: flex;
+    align-items: center;
+
+    gap: ${GAP_FROM_SIZE[size]}px;
+
+    ${padded &&
+    css `
+      padding: 0 ${PADDING_FROM_SIZE[size]}px;
+    `}
+
+    ${!flat &&
+    css `
+    border-${vertical ? 'right' : 'bottom'}: 1px solid ${changeLightness(currentTabColor, 0.175)};
+    `}
+
+
+    ${fill &&
+    css `
+      justify-content: space-around;
+    `}
+
+    ${StyledPopover} {
+      > ${StyledTabListItem} {
+        height: 100%;
+      }
+    }
+  `}
+`;
+const isTabHidden = (items, activeTab) => items.find((item) => item?.id === activeTab);
+const getMoreLabel = (items, activeTab) => {
+    if (isTabHidden(items, activeTab)) {
+        return isTabHidden(items, activeTab)?.label;
+    }
+    return 'More';
+};
+const getBadgeLength = (badge, tabsSize = 'normal') => {
+    if (!badge) {
+        return 0;
+    }
+    if (isArray(badge)) {
+        return badge.reduce((len, b) => len + getBadgeLength(b), 0);
+    }
+    if (isObject(badge)) {
+        return getLabelLength(badge, undefined, getOneLessSize(tabsSize)) + PADDING_FROM_SIZE[tabsSize];
+    }
+    return (calculateStringSizeInPixels(badge.toString(), CONTROL_TEXT_FROM_SIZE[getOneLessSize(tabsSize)]) + PADDING_FROM_SIZE[tabsSize]);
+};
+export const getLabelLength = (item, activeTab, tabsSize = 'normal') => {
+    if (!item) {
+        return 0;
+    }
+    const label = isArray(item) ? getMoreLabel(item, activeTab) : item.label;
+    const icon = isArray(item) || item.icon ? ICON_FROM_SIZE[tabsSize] + PADDING_FROM_SIZE[tabsSize] : 0;
+    const rightIcon = item.rightIcon
+        ? ICON_FROM_SIZE[tabsSize] + PADDING_FROM_SIZE[tabsSize]
+        : 0;
+    const closeIconSize = isArray(item) ||
+        !item.onCloseClick ||
+        !item.onRemoveClick
+        ? 0
+        : ICON_FROM_SIZE[tabsSize] * 2;
+    const badgeLength = isArray(item)
+        ? 0
+        : getBadgeLength(item.badge, tabsSize);
+    const descriptionLength = isArray(item)
+        ? 0
+        : calculateStringSizeInPixels(item?.description?.toString(), CONTROL_TEXT_FROM_SIZE[getOneLessSize(tabsSize)]);
+    const topLabelLength = calculateStringSizeInPixels(label?.toString(), CONTROL_TEXT_FROM_SIZE[tabsSize], item.effect?.spaced) +
+        icon +
+        rightIcon +
+        closeIconSize +
+        badgeLength;
+    const maxWidth = isArray(item)
+        ? 0
+        : item?.maxWidth
+            ? parseInt(item.maxWidth, 10)
+            : 0;
+    return maxWidth || Math.max(topLabelLength, descriptionLength);
+};
+/**
+ * This function returns the total width or height of the tabs.
+ * @param items the items that will be rendered in the tabs
+ * @param type the type of calculation, either width or height
+ * @param activeTab the currently active tab
+ * @param tabsSize the size of the tabs
+ * @returns the total width or height of the tabs
+ */
+export const getTabsLength = (items, type = 'width', activeTab, tabsSize) => items.reduce((len, item) => {
+    if (type === 'height') {
+        const rows = getLabelLength(item, activeTab, tabsSize) / 4 || 1;
+        return len + rows * 15 + 10;
+    }
+    const labelLength = PADDING_FROM_SIZE[tabsSize] +
+        GAP_FROM_SIZE[tabsSize] +
+        getLabelLength(item, activeTab, tabsSize);
+    return len + labelLength;
+}, 0);
+const getTransformedItems = (items, size, type = 'width', activeTab, tabsSize) => {
+    if (!size) {
+        return items;
+    }
+    let newItems = [...items];
+    while (getTabsLength(newItems, type, activeTab, tabsSize) > size && newItems.length > 1) {
+        if (isArray(newItems[newItems.length - 1])) {
+            newItems[newItems.length - 1].unshift(newItems[newItems.length - 2]);
+            newItems[newItems.length - 2] = undefined;
+        }
+        else {
+            const lastItem = newItems[newItems.length - 1];
+            newItems[newItems.length - 1] = [
+                lastItem,
+            ];
+        }
+        newItems = newItems.filter((i) => i);
+    }
+    return newItems.filter((i) => i);
+};
+const ReqoreTabsList = ({ tabs, onTabChange, activeTab, _testWidth, fill, vertical, activeTabIntent, customTheme, wrapTabNames, flat, size, intent, padded, loadingIconType, useReactTransition, ...rest }) => {
+    const [ref, { width }] = useMeasure();
+    const theme = useReqoreTheme('main', customTheme, intent);
+    const activeTabData = tabs.find((tab) => tab.id === activeTab);
+    const currentTabColor = activeTabIntent || activeTabData?.intent
+        ? theme.intents[activeTabIntent || activeTabData.intent]
+        : getNthGradientColor(theme, getPrimaryGradient(activeTabData?.effect?.gradient)?.colors) ||
+            getColorFromMaybeString(theme, activeTabData?.customTheme?.main || theme.main);
+    const filteredItems = tabs.filter((item) => item.show !== false);
+    const transformedItems = useMemo(() => vertical
+        ? filteredItems
+        : getTransformedItems(filteredItems, _testWidth || width, 'width', activeTab, size), [filteredItems, _testWidth, width, vertical, activeTab, size]);
+    return (_jsx(ReqoreThemeProvider, { theme: theme, customTheme: customTheme, children: _jsx(StyledReqoreTabsList, { ...rest, size: size, fill: fill, vertical: vertical, className: `${rest.className || ''} reqore-tabs-list`, ref: ref, flat: flat, theme: theme, currentTabColor: currentTabColor, children: transformedItems.map((item, index) => isArray(item) ? (_jsx(React.Fragment, { children: _jsx(ReqorePopover, { component: ReqoreTabsListItem, componentProps: {
+                        icon: 'ArrowDownSLine',
+                        id: 'showMore',
+                        label: getMoreLabel(item, activeTab),
+                        active: !!isTabHidden(item, activeTab),
+                        activeIntent: activeTabIntent,
+                        intent: !!isTabHidden(item, activeTab) ? activeTabData?.intent : undefined,
+                        effect: !!isTabHidden(item, activeTab) ? activeTabData?.effect : undefined,
+                        customTheme: !!isTabHidden(item, activeTab)
+                            ? activeTabData?.customTheme
+                            : theme,
+                        vertical,
+                        flat,
+                        size,
+                        padded,
+                        className: 'reqore-tabs-list-item-menu',
+                    }, closeOnOutsideClick: true, isReqoreComponent: true, noWrapper: true, handler: 'hoverStay', content: _jsx(ReqoreMenu, { customTheme: theme, children: item.map(({ icon, label, as, tooltip, props, disabled, id, onCloseClick, intent, activeIntent, closeIcon, ...rest }) => (_createElement(ReqoreMenuItem, { ...{
+                                ...props,
+                                icon,
+                                as,
+                                intent: activeTab === id ? activeIntent || intent : intent,
+                                disabled,
+                                rightAction: onCloseClick
+                                    ? {
+                                        disabled,
+                                        icon: closeIcon || 'CloseLine',
+                                        onClick: (_itemId, _event, closePopover) => {
+                                            onCloseClick(id);
+                                            closePopover?.();
+                                        },
+                                    }
+                                    : undefined,
+                                selected: activeTab === id,
+                                onClick: (event, _itemId, closePopover) => {
+                                    if (!disabled) {
+                                        onTabChange?.(id);
+                                        closePopover?.();
+                                        if (props?.onClick) {
+                                            props.onClick(event);
+                                        }
+                                    }
+                                },
+                            }, tooltip: tooltip, ...rest, key: index + label?.toString() }, label))) }) }, index) }, index)) : (_jsx(React.Fragment, { children: _createElement(ReqoreTabsListItem, { customTheme: theme, fill: fill, size: size, flat: flat, padded: padded, activeIntent: activeTabIntent, wrapTabNames: wrapTabNames, loadingIconType: loadingIconType, useReactTransition: useReactTransition, ...item, key: index, vertical: vertical, active: activeTab === item.id || item.props?.active, onClick: (event) => {
+                        if (!item.disabled) {
+                            onTabChange?.(item.id);
+                            if (item.props?.onClick) {
+                                item.props.onClick(event);
+                            }
+                        }
+                    }, onCloseClick: item.onCloseClick
+                        ? () => {
+                            item.onCloseClick?.(item.id);
+                        }
+                        : undefined }) }, index))) }) }));
+};
+export default ReqoreTabsList;
+//# sourceMappingURL=list.js.map