@ansible/ansible-ui-framework 0.0.258 → 0.0.260

package/{mjs → cjs}/index.d.ts

@@ -18,6 +18,7 @@ export * from './PageTableCards';
 export * from './PageTabs';
 export * from './PageToolbar';
 export * from './TypedActions';
+export * from './useInMemoryView';
 export * from './useSelectDialog';
 export * from './useTableItems';
 export * from './utils/compare';

package/cjs/index.js

@@ -34,6 +34,7 @@ __exportStar(require("./PageTableCards"), exports);
 __exportStar(require("./PageTabs"), exports);
 __exportStar(require("./PageToolbar"), exports);
 __exportStar(require("./TypedActions"), exports);
+__exportStar(require("./useInMemoryView"), exports);
 __exportStar(require("./useSelectDialog"), exports);
 __exportStar(require("./useTableItems"), exports);
 __exportStar(require("./utils/compare"), exports);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ansible/ansible-ui-framework",
   "description": "Framework for building consistent responsive web applications using PatternFly.",
-  "version": "0.0.258",
+  "version": "0.0.260",
   "author": "Red Hat",
   "license": "MIT",
   "repository": {
@@ -9,16 +9,8 @@
     "url": "https://github.com/ansible/ansible-ui.git"
   },
   "homepage": "https://github.com/ansible/ansible-ui/tree/main/framework#readme",
-  "type": "module",
-  "exports": {
-    ".": {
-      "types": "./mjs/index.d.ts",
-      "import": "./mjs/index.js",
-      "require": "./cjs/index.cjs"
-    }
-  },
-  "main": "mjs/index.js",
-  "types": "mjs/index.d.ts",
+  "main": "cjs/index.js",
+  "types": "cjs/index.d.ts",
   "peerDependencies": {
     "@hookform/resolvers": "^2.0.0",
     "@patternfly/patternfly": "^4.0.0",

package/mjs/BulkActionDialog.js

@@ -1,104 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, Checkbox, Modal, ModalBoxBody, ModalVariant, Progress, ProgressMeasureLocation, ProgressSize, ProgressVariant, } from '@patternfly/react-core';
-import { CheckCircleIcon, ExclamationCircleIcon, PendingIcon } from '@patternfly/react-icons';
-import pLimit from 'p-limit';
-import { useCallback, useState } from 'react';
-import { Collapse } from './components/Collapse';
-import { usePageDialog } from './PageDialog';
-import { PageTable } from './PageTable';
-import { useFrameworkTranslations } from './useFrameworkTranslations';
-import { usePaged } from './useTableItems';
-export function BulkActionDialog(props) {
-    const [_, setDialog] = usePageDialog();
-    const [translations] = useFrameworkTranslations();
-    const [isSubmitting, setSubmitting] = useState(false);
-    const [isSubmited, setSubmited] = useState(false);
-    const [progress, setProgress] = useState(0);
-    const [error, setError] = useState('');
-    const [statuses, setStatuses] = useState();
-    const onClose = useCallback(() => {
-        props.onClose?.(props.items.filter((item) => statuses?.[props.keyFn(item)] === null));
-        setDialog(undefined);
-    }, [props, setDialog, statuses]);
-    const onConfirm = () => {
-        async function handleConfirm() {
-            const limit = pLimit(5);
-            setSubmitting(true);
-            let progress = 0;
-            await Promise.all(props.items.map((item) => limit(async () => {
-                const key = props.keyFn(item);
-                try {
-                    await props.action(item);
-                    setStatuses((statuses) => ({ ...(statuses ?? {}), [key]: null }));
-                }
-                catch (err) {
-                    if (err instanceof Error) {
-                        const message = err.message;
-                        setStatuses((statuses) => ({ ...(statuses ?? {}), [key]: message }));
-                    }
-                    else {
-                        setStatuses((statuses) => ({
-                            ...(statuses ?? {}),
-                            [key]: `Unknown error`,
-                        }));
-                    }
-                    setError(props.error);
-                }
-                finally {
-                    setProgress(++progress);
-                }
-            })));
-            setSubmitting(false);
-            setSubmited(true);
-        }
-        void handleConfirm();
-    };
-    const { paged, page, perPage, setPage, setPerPage } = usePaged(props.items);
-    const [confirmed, setConfirmed] = useState(!props.confirmText);
-    return (_jsx(Modal, { titleIconVariant: props.isDanger ? 'warning' : undefined, title: props.title, variant: ModalVariant.medium, isOpen: true, onClose: onClose, actions: !isSubmited
-            ? [
-                _jsx(Button, { variant: props.isDanger ? 'danger' : 'primary', onClick: onConfirm, isDisabled: !confirmed || isSubmitting || isSubmited, isLoading: isSubmitting, children: isSubmitting
-                        ? props.submitting ?? translations.submittingText
-                        : props.submitText ?? translations.submitText }, "submit"),
-                _jsx(Button, { variant: "link", onClick: onClose, children: props.cancelText ?? translations.cancelText }, "cancel"),
-            ]
-            : [
-                _jsx(Button, { variant: "secondary", onClick: onClose, children: props.closeText ?? translations.closeText }, "close"),
-            ], description: _jsx(Collapse, { open: !isSubmitting && !isSubmited, children: props.prompt }), hasNoBodyWrapper: true, children: _jsxs(ModalBoxBody, { style: { paddingLeft: 0, paddingRight: 0 }, children: [_jsx(Collapse, { open: isSubmitting || isSubmited, children: _jsx(ModalBoxBody, { style: { paddingTop: 0 }, children: _jsx(Progress, { value: (progress / props.items.length) * 100, title: error
-                                ? props.error
-                                : progress === props.items.length
-                                    ? props.successText ?? translations.successText
-                                    : props.submittingTitle, size: ProgressSize.lg, variant: error
-                                ? ProgressVariant.danger
-                                : progress === props.items.length
-                                    ? ProgressVariant.success
-                                    : undefined, measureLocation: error && progress === props.items.length ? ProgressMeasureLocation.none : undefined }) }) }), _jsx("div", { style: {
-                        display: 'flex',
-                        flexDirection: 'column',
-                        maxHeight: 500,
-                        overflow: 'hidden',
-                        borderTop: 'thin solid var(--pf-global--BorderColor--100)',
-                    }, children: !isSubmitting && !isSubmited ? (_jsx(PageTable, { pageItems: paged, itemCount: props.items.length, tableColumns: props.columns, keyFn: props.keyFn, page: page, perPage: perPage, setPage: setPage, setPerPage: setPerPage, compact: true, errorStateTitle: "Error", emptyStateTitle: "No items", disableBodyPadding: true }, "items")) : (_jsx(PageTable, { pageItems: [...paged], itemCount: props.items.length, tableColumns: [
-                            ...props.errorColumns,
-                            {
-                                header: 'Status',
-                                cell: (item) => {
-                                    const key = props.keyFn(item);
-                                    const status = statuses?.[key];
-                                    if (status === undefined) {
-                                        return (_jsxs("span", { style: {
-                                                color: 'var(--pf-global--info-color--100)',
-                                            }, children: [_jsx(PendingIcon, {}), "\u00A0 ", props.pendingText ?? translations.pendingText, ' ', JSON.stringify(status)] }));
-                                    }
-                                    if (status === null) {
-                                        return (_jsxs("span", { style: {
-                                                color: 'var(--pf-global--success-color--100)',
-                                            }, children: [_jsx(CheckCircleIcon, {}), "\u00A0", ' ', props.successText ?? translations.successText] }));
-                                    }
-                                    return (_jsxs("span", { style: {
-                                            color: 'var(--pf-global--danger-color--100)',
-                                        }, children: [_jsx(ExclamationCircleIcon, {}), "\u00A0 ", statuses?.[key]] }));
-                                },
-                            },
-                        ], keyFn: props.keyFn, page: page, perPage: perPage, setPage: setPage, setPerPage: setPerPage, compact: true, errorStateTitle: "", emptyStateTitle: "No items", disableBodyPadding: true }, "status")) }), props.confirmText && (_jsx(Collapse, { open: !isSubmitting && !isSubmited, children: _jsx("div", { style: { marginLeft: 32, marginTop: 0, marginBottom: 8 }, children: _jsx(Checkbox, { id: "confirm", label: props.confirmText, isChecked: confirmed, onChange: setConfirmed }) }) }))] }) }));
-}

package/mjs/BulkProgressDialog.js

@@ -1,131 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, Modal, ModalBoxBody, ModalVariant, Progress, ProgressSize, ProgressVariant, } from '@patternfly/react-core';
-import { CheckCircleIcon, ExclamationCircleIcon, PendingIcon } from '@patternfly/react-icons';
-import pLimit from 'p-limit';
-import { useCallback, useEffect, useState } from 'react';
-import { usePageDialog } from './PageDialog';
-import { PageTable } from './PageTable';
-import { useFrameworkTranslations } from './useFrameworkTranslations';
-import { usePaged } from './useTableItems';
-export function BulkProgressDialog(props) {
-    const { title, keyFn, items, columns, actionFn, onClose, processingText, errorText, itemPendingText, itemSuccessText, successText, cancelText, closeText, isDanger, } = props;
-    const [translations] = useFrameworkTranslations();
-    const [isProcessing, setProcessing] = useState(true);
-    const [progress, setProgress] = useState(0);
-    const [error, setError] = useState('');
-    const [statuses, setStatuses] = useState();
-    const [abortController] = useState(() => new AbortController());
-    const onCancelClicked = useCallback(() => {
-        abortController.abort();
-        setProcessing(false);
-    }, [abortController]);
-    const onCloseClicked = useCallback(() => {
-        onClose?.(items.filter((item) => statuses?.[keyFn(item)] === null));
-    }, [items, keyFn, onClose, statuses]);
-    useEffect(() => {
-        async function process() {
-            const limit = pLimit(5);
-            let progress = 0;
-            await Promise.all(items.map((item) => limit(async () => {
-                if (abortController.signal.aborted)
-                    return;
-                const key = keyFn(item);
-                try {
-                    await actionFn(item, abortController.signal);
-                    if (!abortController.signal.aborted) {
-                        setStatuses((statuses) => ({ ...(statuses ?? {}), [key]: null }));
-                    }
-                }
-                catch (err) {
-                    if (!abortController.signal.aborted) {
-                        if (err instanceof Error) {
-                            const message = err.message;
-                            setStatuses((statuses) => ({
-                                ...(statuses ?? {}),
-                                [key]: message,
-                            }));
-                        }
-                        else {
-                            setStatuses((statuses) => ({
-                                ...(statuses ?? {}),
-                                [key]: `Unknown error`,
-                            }));
-                        }
-                        setError(errorText ?? translations.errorText);
-                    }
-                }
-                finally {
-                    if (!abortController.signal.aborted) {
-                        setProgress(++progress);
-                    }
-                }
-            })));
-            if (!abortController.signal.aborted) {
-                setProcessing(false);
-            }
-        }
-        void process();
-    }, [abortController, actionFn, errorText, items, keyFn, translations.errorText]);
-    const { paged, page, perPage, setPage, setPerPage } = usePaged(items);
-    return (_jsxs(Modal, { titleIconVariant: isDanger ? 'warning' : undefined, title: title, variant: ModalVariant.medium, isOpen: true, onClose: () => {
-            onCancelClicked();
-            onCloseClicked();
-        }, actions: isProcessing
-            ? [
-                _jsx(Button, { variant: "link", onClick: onCancelClicked, children: cancelText ?? translations.cancelText }, "cancel"),
-            ]
-            : [
-                _jsx(Button, { variant: "secondary", onClick: onCloseClicked, children: closeText ?? translations.closeText }, "close"),
-            ], hasNoBodyWrapper: true, children: [_jsx(ModalBoxBody, { children: _jsx(Progress, { value: (progress / items.length) * 100, title: abortController.signal.aborted
-                        ? 'Cancelled'
-                        : error
-                            ? errorText ?? translations.errorText
-                            : progress === items.length
-                                ? successText ?? translations.successText
-                                : processingText ?? translations.processingText, size: ProgressSize.lg, variant: error
-                        ? ProgressVariant.danger
-                        : progress === items.length
-                            ? ProgressVariant.success
-                            : undefined }) }), _jsx("div", { style: {
-                    display: 'flex',
-                    flexDirection: 'column',
-                    maxHeight: 560,
-                    overflow: 'hidden',
-                    paddingTop: 16,
-                }, children: _jsx(PageTable, { pageItems: [...paged], itemCount: items.length, tableColumns: [
-                        ...columns,
-                        {
-                            header: 'Status',
-                            cell: (item) => {
-                                const key = keyFn(item);
-                                const status = statuses?.[key];
-                                if (status === undefined) {
-                                    return (_jsxs("span", { style: { color: 'var(--pf-global--info-color--100)' }, children: [_jsx(PendingIcon, {}), "\u00A0 ", itemPendingText ?? translations.pendingText, ' ', JSON.stringify(status)] }));
-                                }
-                                if (status === null) {
-                                    return (_jsxs("span", { style: {
-                                            color: 'var(--pf-global--success-color--100)',
-                                        }, children: [_jsx(CheckCircleIcon, {}), "\u00A0 ", itemSuccessText ?? translations.successText] }));
-                                }
-                                return (_jsxs("span", { style: { color: 'var(--pf-global--danger-color--100)' }, children: [_jsx(ExclamationCircleIcon, {}), "\u00A0 ", statuses?.[key]] }));
-                            },
-                        },
-                    ], keyFn: keyFn, page: page, perPage: perPage, setPage: setPage, setPerPage: setPerPage, compact: true, errorStateTitle: "", emptyStateTitle: "No items" }, "status") })] }));
-}
-export function useBulkProgressDialog() {
-    const [_, setDialog] = usePageDialog();
-    const [props, setProps] = useState();
-    useEffect(() => {
-        if (props) {
-            const onCloseHandler = (items) => {
-                setProps(undefined);
-                props.onClose?.(items);
-            };
-            setDialog(_jsx(BulkProgressDialog, { ...props, onClose: onCloseHandler }));
-        }
-        else {
-            setDialog(undefined);
-        }
-    }, [props, setDialog]);
-    return setProps;
-}

package/mjs/FilterDrawer.js

@@ -1,24 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/* eslint-disable @typescript-eslint/no-non-null-assertion */
-/* eslint-disable @typescript-eslint/no-empty-function */
-import { Checkbox, DrawerPanelBody, DrawerPanelContent, DrawerSection, Stack, Title, } from '@patternfly/react-core';
-import { Fragment, useCallback } from 'react';
-export function FilterDrawer(props) {
-    let { t } = props;
-    t = t ? t : (t) => t;
-    const { filters, filterState, setFilterValues } = props;
-    const toggleFilterValue = useCallback((filter, filterValues, option) => {
-        if (filterValues?.includes(option)) {
-            setFilterValues(filter, filterValues.filter((o) => o !== option));
-        }
-        else {
-            setFilterValues(filter, [...(filterValues ?? []), option]);
-        }
-    }, [setFilterValues]);
-    if (!filters)
-        return _jsx(Fragment, {});
-    return (_jsx(DrawerPanelContent, { minSize: "250px", defaultSize: "250px", maxSize: "250px", children: _jsxs(DrawerPanelBody, { children: [_jsx(Title, { headingLevel: "h2", style: { paddingBottom: 24 }, children: t('Filters') }), filters?.map((filter) => {
-                    const filterValues = filterState[filter.label];
-                    return (_jsx(DrawerSection, { style: { paddingBottom: 32 }, children: _jsxs(Stack, { hasGutter: true, children: [_jsx(Title, { headingLevel: "h4", children: filter.label }), filter.options.map((option) => (_jsx(Checkbox, { id: option.label, isChecked: filterValues?.includes(option.value), onChange: () => toggleFilterValue(filter, filterValues, option.value), label: option.label }, option.label)))] }) }, filter.label));
-                })] }) }));
-}

package/mjs/PageAlertToaster.js

@@ -1,48 +0,0 @@
-import { createElement as _createElement } from "react";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Alert, AlertActionCloseButton, AlertGroup } from '@patternfly/react-core';
-import { createContext, useContext, useState } from 'react';
-export const PageAlertToasterContext = createContext({
-    addAlert: () => null,
-    removeAlert: () => null,
-    replaceAlert: () => null,
-    removeAlerts: () => null,
-});
-export function usePageAlertToaster() {
-    return useContext(PageAlertToasterContext);
-}
-export function PageAlertToasterProvider(props) {
-    const [toasterAlerts, setToasterAlerts] = useState([]);
-    const [pageAlertToaster] = useState(() => {
-        function removeAlerts(filter) {
-            setToasterAlerts((alerts) => (filter ? alerts.filter(filter) : []));
-        }
-        function removeAlert(alert) {
-            setToasterAlerts((alerts) => alerts.filter((a) => a !== alert));
-        }
-        function addAlert(alert) {
-            if (Number.isInteger(alert.timeout)) {
-                setTimeout(() => removeAlert(alert), alert.timeout);
-                delete alert.timeout;
-            }
-            setToasterAlerts((alerts) => [...alerts, alert]);
-        }
-        function replaceAlert(oldAlert, alert) {
-            setToasterAlerts((alerts) => {
-                const oldAlertIndex = alerts.findIndex((a) => a === oldAlert);
-                if (oldAlertIndex !== -1) {
-                    if (Number.isInteger(alert.timeout)) {
-                        setTimeout(() => removeAlert(alert), alert.timeout);
-                        delete alert.timeout;
-                    }
-                    const newAlerts = [...alerts];
-                    newAlerts[oldAlertIndex] = alert;
-                    return newAlerts;
-                }
-                return alerts;
-            });
-        }
-        return { addAlert, removeAlert, removeAlerts, replaceAlert };
-    });
-    return (_jsxs(PageAlertToasterContext.Provider, { value: pageAlertToaster, children: [_jsx(AlertGroup, { isToast: true, isLiveRegion: true, children: toasterAlerts.map((alertProps, index) => (_createElement(Alert, { ...alertProps, key: alertProps.key ?? alertProps.id ?? index, actionClose: _jsx(AlertActionCloseButton, { onClose: () => pageAlertToaster.removeAlert(alertProps) }) }))) }), props.children] }));
-}

package/mjs/PageBody.js

@@ -1,29 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useTranslation } from 'react-i18next';
-import { useBreakpoint } from '.';
-import ErrorBoundary from './components/ErrorBoundary';
-import { useSettings } from './Settings';
-export function PageBody(props) {
-    const usePadding = useBreakpoint('xxl') && props.disablePadding !== true;
-    const settings = useSettings();
-    const { t } = useTranslation();
-    return (_jsx(ErrorBoundary, { message: t('Error'), children: _jsx("div", { style: {
-                display: 'flex',
-                flexDirection: 'column',
-                height: '100%',
-                maxHeight: '100%',
-                overflow: 'hidden',
-                backgroundColor: 'var(--pf-c-page__main-section--BackgroundColor)',
-            }, children: _jsx("div", { style: {
-                    display: 'flex',
-                    flexDirection: 'column',
-                    height: '100%',
-                    maxHeight: '100%',
-                    margin: usePadding ? 24 : 0,
-                    overflow: 'hidden',
-                    border: settings.borders && usePadding
-                        ? 'thin solid var(--pf-global--BorderColor--100)'
-                        : undefined,
-                    backgroundColor: 'var(--pf-global--BackgroundColor--100)',
-                }, children: props.children }) }) }));
-}

package/mjs/PageCells.js

@@ -1,102 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Button, ClipboardCopy, Flex, FlexItem, Label, LabelGroup, Split, SplitItem, Tooltip, Truncate, } from '@patternfly/react-core';
-import { DateTime } from 'luxon';
-import { useEffect, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Link } from 'react-router-dom';
-import { IconWrapper } from './components/IconWrapper';
-import { getPatternflyColor } from './components/patternfly-colors';
-import { useSettings } from './Settings';
-export function LabelsCell(props) {
-    return (_jsx(LabelGroup, { numLabels: 999, style: { flexWrap: 'nowrap' }, children: props.labels.map((label) => (_jsx(Label, { children: label }, label))) }));
-}
-export function DateCell(props) {
-    const date = new Date(props.value);
-    return (_jsxs(Split, { hasGutter: true, children: [_jsx(SplitItem, { children: date.toLocaleDateString() }), _jsx(SplitItem, { children: date.toLocaleTimeString() })] }));
-}
-export function TextCell(props) {
-    return (_jsxs(Split, { children: [props.icon && (_jsx(SplitItem, { children: _jsx(IconWrapper, { size: props.iconSize ?? 'md', children: props.icon }) })), props.to ? (_jsx(SplitItem, { children: _jsx(Tooltip, { content: props.text ?? '', children: _jsx("div", { style: {
-                            maxWidth: 300,
-                            whiteSpace: 'nowrap',
-                            textOverflow: 'ellipsis',
-                            overflow: 'hidden',
-                        }, children: _jsx(Link, { to: props.to, children: props.text ?? '' }) }) }) })) : props.onClick !== undefined ? (_jsx(SplitItem, { onClick: props.onClick, children: _jsx(Button, { variant: "link", isInline: true, style: {
-                        whiteSpace: 'nowrap',
-                    }, children: props.text }) })) : (_jsx(SplitItem, { style: {
-                    color: props.textColor ? getPatternflyColor(props.textColor) : undefined,
-                }, children: _jsx(Tooltip, { content: props.text ?? '', children: _jsx("div", { style: {
-                            maxWidth: 300,
-                            whiteSpace: 'nowrap',
-                            textOverflow: 'ellipsis',
-                            overflow: 'hidden',
-                        }, children: props.text ?? '' }) }) }))] }));
-}
-export function CopyCell(props) {
-    if (!props.text)
-        return _jsx(_Fragment, {});
-    return (_jsx(ClipboardCopy, { hoverTip: "Copy", clickTip: "Copied", variant: "inline-compact", style: { display: 'flex', flexWrap: 'nowrap', borderRadius: 4 }, onCopy: () => {
-            void navigator.clipboard.writeText(props.text ?? '');
-        }, children: _jsx(Truncate, { content: props.text, style: { minWidth: props.minWidth } }) }));
-}
-export function SinceCell(props) {
-    let { t } = props;
-    t = t ? t : (t) => t;
-    const { author, onClick } = props;
-    const [dateTime, setDateTime] = useState(null);
-    useEffect(() => {
-        if (props.value) {
-            setDateTime(DateTime.fromISO(props.value).toRelative());
-        }
-        const timeout = setInterval(() => {
-            if (props.value) {
-                setDateTime(DateTime.fromISO(props.value).toRelative());
-            }
-        }, 1000);
-        return () => clearTimeout(timeout);
-    }, [props.value]);
-    if (props.value === undefined)
-        return _jsx(_Fragment, {});
-    return (_jsxs("span", { style: { whiteSpace: 'nowrap' }, children: [dateTime, author && _jsxs("span", { children: ["\u00A0", t('by'), "\u00A0"] }), onClick ? (_jsx(Button, { variant: "link", isInline: true, onClick: onClick, children: author })) : (_jsx("span", { children: author }))] }));
-}
-export function CapacityCell(props) {
-    const { t } = useTranslation();
-    const settings = useSettings();
-    const ratio = props.used / props.capacity;
-    if (props.capacity === 0)
-        return _jsx(_Fragment, {});
-    const base = ratio >= 0.8
-        ? 'var(--pf-global--palette--red'
-        : ratio >= 0.5
-            ? 'var(--pf-global--palette--gold'
-            : 'var(--pf-global--palette--green';
-    const color1 = settings.theme === 'light' ? `${base}-100)` : `${base}-600)`;
-    const color2 = settings.theme === 'light' ? `${base}-400)` : `${base}-200)`;
-    const borderColor = settings.theme === 'light' ? `#0002` : `#fff2`;
-    return (_jsxs(Flex, { alignItems: { default: 'alignItemsBaseline' }, spaceItems: { default: 'spaceItemsSm' }, children: [props.capacity > 0 && (_jsx(FlexItem, { children: _jsx("div", { style: {
-                        width: 18,
-                        height: 25,
-                        background: color1,
-                        marginBottom: -9,
-                        paddingTop: Math.max(0, Math.min(25, (25 * (props.capacity - props.used)) / props.capacity)),
-                        borderRadius: 2,
-                        border: `thin solid ${borderColor}`,
-                    }, children: _jsx("div", { style: {
-                            width: '100%',
-                            height: '100%',
-                            background: color2,
-                            borderRadius: 2,
-                        } }) }) })), props.format ? (_jsx(FlexItem, { children: props.format
-                    .replace('{used}', props.used.toString())
-                    .replace('{capacity}', props.capacity.toString()) })) : (_jsxs(FlexItem, { children: [props.used, t(' of '), props.capacity] }))] }));
-}
-export function BytesCell(props) {
-    const { bytes } = props;
-    if (!+bytes)
-        return _jsx(_Fragment, {});
-    const k = 1024;
-    const decimals = props.decimals ? props.decimals : 0;
-    const dm = decimals < 0 ? 0 : decimals;
-    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
-    const i = Math.floor(Math.log(bytes) / Math.log(k));
-    return _jsx(_Fragment, { children: `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}` });
-}