@balena/ui-shared-components 12.2.0-build-add-horizontal-bar-chart-6ee5a259ba1b19526e22819624d07c39f1e8b246-1 → 12.2.0

package/dist/components/RJST/Lenses/types/table.js

@@ -161,7 +161,12 @@ const TableRenderer = ({ filtered, selected, properties, hasUpdateActions, check
                         columns: columnsAnalyticsObject,
                         changeType,
                     });
-                }, actions: actions !== null && actions !== void 0 ? actions : [] })), showAddTagDialog && (tagKeys === null || tagKeys === void 0 ? void 0 : tagKeys.length) && (_jsx(AddTagHandler, { columns: columns, tagKeys: tagKeys, onClose: handleAddTagClose }))] }));
+                }, actions: actions !== null && actions !== void 0 ? actions : [], onManageColumnsOpen: () => {
+                    var _a;
+                    (_a = analytics.webTracker) === null || _a === void 0 ? void 0 : _a.track('Open manage columns', {
+                        resource: model.resource,
+                    });
+                } })), showAddTagDialog && (tagKeys === null || tagKeys === void 0 ? void 0 : tagKeys.length) && (_jsx(AddTagHandler, { columns: columns, tagKeys: tagKeys, onClose: handleAddTagClose }))] }));
 };
 export const table = {
     slug: 'table',

package/dist/components/RJST/components/Table/TableActions.d.ts

@@ -5,6 +5,7 @@ interface TableActionsProps<T> {
     columns: Array<RJSTEntityPropertyDefinition<T>>;
     actions?: MenuItemProps[];
     onColumnPreferencesChange?: ColumnPreferencesChangeProp<T>;
+    onManageColumnsOpen?: () => void;
 }
-export declare const TableActions: <T extends object>({ columns, actions, onColumnPreferencesChange, }: TableActionsProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const TableActions: <T extends object>({ columns, actions, onColumnPreferencesChange, onManageColumnsOpen, }: TableActionsProps<T>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/RJST/components/Table/TableActions.js

@@ -22,7 +22,7 @@ const SortableItem = ({ column, handleColumnSelection, }) => {
                         handleColumnSelection(column);
                     }, checked: column.selected }), label: typeof column.label === 'string' ? column.label : column.title })] })));
 };
-export const TableActions = ({ columns, actions, onColumnPreferencesChange, }) => {
+export const TableActions = ({ columns, actions, onColumnPreferencesChange, onManageColumnsOpen, }) => {
     const [anchorEl, setAnchorEl] = React.useState();
     const theme = useTheme();
     const { state: analyticsState } = useAnalyticsContext();
@@ -30,6 +30,7 @@ export const TableActions = ({ columns, actions, onColumnPreferencesChange, }) =
     const open = Boolean(anchorEl);
     const handleClick = (event) => {
         setAnchorEl(event.currentTarget);
+        onManageColumnsOpen === null || onManageColumnsOpen === void 0 ? void 0 : onManageColumnsOpen();
     };
     const handleClose = () => {
         setAnchorEl(undefined);

package/dist/components/RJST/components/Table/TableToolbar.d.ts

@@ -5,7 +5,8 @@ interface TableToolbarProps<T> {
     numSelected?: number;
     columns: Array<RJSTEntityPropertyDefinition<T>>;
     actions?: MenuItemProps[];
+    onManageColumnsOpen?: () => void;
     onColumnPreferencesChange?: ColumnPreferencesChangeProp<T>;
 }
-export declare const TableToolbar: <T extends object>({ numSelected, columns, actions, onColumnPreferencesChange, }: TableToolbarProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const TableToolbar: <T extends object>({ numSelected, columns, actions, onManageColumnsOpen, onColumnPreferencesChange, }: TableToolbarProps<T>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/RJST/components/Table/TableToolbar.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Stack, Typography } from '@mui/material';
 import { TableActions } from './TableActions';
 import { token } from '../../../../utils/token';
-export const TableToolbar = ({ numSelected = 0, columns, actions, onColumnPreferencesChange, }) => {
+export const TableToolbar = ({ numSelected = 0, columns, actions, onManageColumnsOpen, onColumnPreferencesChange, }) => {
     return (_jsxs(Stack, { direction: "row", children: [numSelected > 0 && (_jsxs(Typography, { color: "inherit", variant: "bodySm", component: "div", sx: (theme) => ({
                     alignSelf: 'flex-end',
                     px: theme.spacing(2),
@@ -10,5 +10,5 @@ export const TableToolbar = ({ numSelected = 0, columns, actions, onColumnPrefer
                     borderRadius: `${token('shape.borderRadius.sm')} ${token('shape.borderRadius.sm')} 0 0`,
                     background: token('color.bg.subtle'),
                     boxShadow: 'inset 0px -1px 1px rgba(0,0,0,0.05)',
-                }), children: [_jsx("strong", { children: numSelected }), " selected"] })), _jsx(TableActions, { columns: columns, actions: actions, onColumnPreferencesChange: onColumnPreferencesChange })] }));
+                }), children: [_jsx("strong", { children: numSelected }), " selected"] })), _jsx(TableActions, { columns: columns, actions: actions, onColumnPreferencesChange: onColumnPreferencesChange, onManageColumnsOpen: onManageColumnsOpen })] }));
 };

package/dist/components/RJST/components/Table/index.d.ts

@@ -18,6 +18,7 @@ interface TableProps<T> {
     onRowClick?: (entity: T, event: React.MouseEvent<HTMLAnchorElement>) => void;
     onPageChange?: (page: number, itemsPerPage: number) => void;
     onColumnPreferencesChange?: ColumnPreferencesChangeProp<T>;
+    onManageColumnsOpen?: () => void;
 }
-export declare const Table: <T extends object>({ rowKey, data, checkedItems, checkedState, columns, pagination, sort, actions, onCheck, onSort, onRowClick, getRowHref, onPageChange, onColumnPreferencesChange, }: TableProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const Table: <T extends object>({ rowKey, data, checkedItems, checkedState, columns, pagination, onManageColumnsOpen, sort, actions, onCheck, onSort, onRowClick, getRowHref, onPageChange, onColumnPreferencesChange, }: TableProps<T>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/RJST/components/Table/index.js

@@ -20,7 +20,7 @@ const StyledMaterialTable = styled(MaterialTable)(() => ({
         zIndex: 10,
     },
 }));
-export const Table = ({ rowKey, data, checkedItems = [], checkedState, columns, pagination, sort, actions, onCheck, onSort, onRowClick, getRowHref, onPageChange, onColumnPreferencesChange, }) => {
+export const Table = ({ rowKey, data, checkedItems = [], checkedState, columns, pagination, onManageColumnsOpen, sort, actions, onCheck, onSort, onRowClick, getRowHref, onPageChange, onColumnPreferencesChange, }) => {
     var _a;
     const { state: analytics } = useAnalyticsContext();
     const lastSelected = React.useRef();
@@ -122,7 +122,7 @@ export const Table = ({ rowKey, data, checkedItems = [], checkedState, columns,
             onCheck === null || onCheck === void 0 ? void 0 : onCheck(filteredArray, filteredArray.length > 0 ? 'some' : 'none');
         };
     }, [visibleRowsMap, checkedRowsMap, rowKey, checkedState, onCheck]);
-    return (_jsxs(Box, { sx: { width: '100%' }, children: [_jsx(TableToolbar, { numSelected: numSelected, columns: columns, actions: actions, onColumnPreferencesChange: onColumnPreferencesChange }), _jsx(TableContainer, { sx: { maxHeight: '70vh' }, children: _jsxs(StyledMaterialTable, { stickyHeader: true, children: [_jsx(TableHeader, { "data-display": "table-head", columns: columns, data: data, isServerSide: pagination === null || pagination === void 0 ? void 0 : pagination.serverSide, numSelected: numSelected, checkedState: checkedState, order: sort.direction, orderBy: sort.key, onSelectAllClick: onCheck, onRequestSort: handleOnSort, rowCount: totalItems }), _jsx(TableBody, { "data-display": "table-body", children: visibleRows.map((row, rowIndex) => {
+    return (_jsxs(Box, { sx: { width: '100%' }, children: [_jsx(TableToolbar, { numSelected: numSelected, columns: columns, actions: actions, onColumnPreferencesChange: onColumnPreferencesChange, onManageColumnsOpen: onManageColumnsOpen }), _jsx(TableContainer, { sx: { maxHeight: '70vh' }, children: _jsxs(StyledMaterialTable, { stickyHeader: true, children: [_jsx(TableHeader, { "data-display": "table-head", columns: columns, data: data, isServerSide: pagination === null || pagination === void 0 ? void 0 : pagination.serverSide, numSelected: numSelected, checkedState: checkedState, order: sort.direction, orderBy: sort.key, onSelectAllClick: onCheck, onRequestSort: handleOnSort, rowCount: totalItems }), _jsx(TableBody, { "data-display": "table-body", children: visibleRows.map((row, rowIndex) => {
                                 const labelId = `enhanced-table-checkbox-${rowIndex}`;
                                 const checked = isChecked(row);
                                 const href = getRowHref === null || getRowHref === void 0 ? void 0 : getRowHref(row);

package/dist/hooks/useTranslations.js

@@ -59,8 +59,6 @@ const translationMap = {
     'labels.views': 'Views',
     'labels.filter_one': 'Filter',
     'labels.filter_other': 'Filters',
-    'labels.total_devices_one': '{{count}} device',
-    'labels.total_devices_other': '{{count}} devices',
     'labels.save_current_view': 'Save current view',
     'aria_labels.remove_view': 'Delete the selected view',
     'aria_labels.create_view': 'Create named view',

package/dist/index.d.ts

@@ -17,7 +17,6 @@ export { FileWidget } from './components/Form/Widgets/FileWidget';
 export type { OnFileReadParams } from './components/Form/Widgets/FileWidget';
 export { PasswordWidget } from './components/Form/Widgets/PasswordWidget';
 export { SelectWidget } from './components/Form/Widgets/SelectWidget';
-export { HorizontalBarChart } from './components/HorizontalBarChart';
 export { Code } from './components/Code';
 export { CookiesBanner } from './components/CookiesBanner';
 export type { CollapsedListProps } from './components/CollapsedList';

package/dist/index.js

@@ -7,7 +7,6 @@ export { RJSForm, Templates as RjsfTemplates } from './components/Form';
 export { FileWidget } from './components/Form/Widgets/FileWidget';
 export { PasswordWidget } from './components/Form/Widgets/PasswordWidget';
 export { SelectWidget } from './components/Form/Widgets/SelectWidget';
-export { HorizontalBarChart } from './components/HorizontalBarChart';
 export { Code } from './components/Code';
 export { CookiesBanner } from './components/CookiesBanner';
 export { CollapsedList } from './components/CollapsedList';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@balena/ui-shared-components",
-  "version": "12.2.0-build-add-horizontal-bar-chart-6ee5a259ba1b19526e22819624d07c39f1e8b246-1",
+  "version": "12.2.0",
   "main": "./dist/index.js",
   "sideEffects": false,
   "files": [
@@ -18,7 +18,7 @@
     "@fortawesome/free-solid-svg-icons": "^6.5.1",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@mui/icons-material": "^6.3.1",
-    "@mui/lab": "^6.0.0-beta.22",
+    "@mui/lab": "6.0.0-beta.24",
     "@mui/material": "^6.3.1",
     "@mui/styled-engine-sc": "^6.3.1",
     "@mui/x-data-grid": "^7.23.5",
@@ -138,6 +138,6 @@
   },
   "homepage": "https://github.com/balena-io/ui-shared-components#readme",
   "versionist": {
-    "publishedAt": "2025-04-10T20:57:05.228Z"
+    "publishedAt": "2025-04-15T13:56:03.369Z"
   }
 }

package/dist/components/HorizontalBarChart/index.d.ts

@@ -1,8 +0,0 @@
-export interface HorizontalBarChartProps {
-    items: Array<{
-        color: string;
-        title: string;
-        count: number;
-    }>;
-}
-export declare const HorizontalBarChart: ({ items }: HorizontalBarChartProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/HorizontalBarChart/index.js

@@ -1,51 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Stack, styled, Tooltip, Typography } from '@mui/material';
-import { token } from '../../utils/token';
-import { useTranslation } from '../../hooks/useTranslations';
-import { useMemo } from 'react';
-const Bar = styled('div')({
-    width: '100%',
-    height: 24,
-    display: 'flex',
-    borderRadius: token('shape.borderRadius.sm'),
-    overflow: 'hidden',
-    gap: 2,
-});
-const BarItem = styled('span')({
-    minWidth: 3,
-});
-const Legend = styled('ul')({
-    display: 'inline',
-    listStyle: 'none',
-    padding: 0,
-    margin: 0,
-});
-const LegendItem = styled('li')({
-    display: 'inline-flex',
-    marginRight: token('spacing.2'),
-    alignItems: 'center',
-    '&:before': {
-        content: '""',
-        backgroundColor: 'currentColor',
-        borderRadius: '50%',
-        width: '10px',
-        height: '10px',
-        display: 'inline-block',
-        marginRight: token('spacing.1'),
-    },
-});
-export const HorizontalBarChart = ({ items }) => {
-    const { t } = useTranslation();
-    const totalItems = useMemo(() => items.reduce((sum, item) => sum + item.count, 0), [items]);
-    const getTotalDevicesLabel = (count) => count > 1
-        ? t('labels.total_devices_other', { count })
-        : t('labels.total_devices_one', { count });
-    return (_jsxs(Stack, { sx: { gap: token('spacing.2') }, children: [_jsx(Bar, { children: items
-                    .filter((item) => item.count > 0)
-                    .map((item) => (_jsx(Tooltip, { title: `${item.title}: ${getTotalDevicesLabel(item.count)}`, children: _jsx(BarItem, { sx: {
-                            backgroundColor: item.color,
-                            width: `${(item.count / totalItems) * 100}%`,
-                        } }) }, item.title))) }), _jsx(Legend, { children: items
-                    .filter((item) => item.count > 0)
-                    .map((item) => (_jsx(Tooltip, { title: getTotalDevicesLabel(item.count), children: _jsx(LegendItem, { style: { color: item.color }, children: _jsx(Typography, { variant: "bodySm", color: token('color.text.subtle'), children: item.title }) }) }, item.title))) })] }));
-};