@balena/ui-shared-components 15.2.3-build-remove-column-management-experimental-code-de33678223e6bf951dd9f3c088b22117fa13bf0a-1 → 15.2.3-build-material-7-36076d224af2d4134f2375ef50f71e060cce68e0-1

package/dist/components/DownloadImageDialog/index.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Avatar, DialogActions, DialogContent, Divider, Grid2 as Grid, Stack, Typography, } from '@mui/material';
+import { Avatar, DialogActions, DialogContent, Divider, Grid, Stack, Typography, } from '@mui/material';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { FALLBACK_LOGO_UNKNOWN_DEVICE, isUrlAccessible, stripVersionBuild, } from './utils';
 import { GENERIC_X86_MINIMUM_SUPPORTED_SECUREBOOT_VERSION, GENERIC_X86_SLUG, ImageForm, } from './ImageForm';

package/dist/components/Form/FieldTemplates/ObjectFieldTemplate.js

@@ -1,17 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import Grid from '@mui/material/Grid';
+import { Grid } from '@mui/material';
 import { canExpand, descriptionId, getTemplate, getUiOptions, titleId, } from '@rjsf/utils';
 export const ObjectFieldTemplate = (props) => {
     var _a, _b;
-    const { description, title, properties, required, disabled, readonly, uiSchema, idSchema, schema, formData, onAddClick, registry, } = props;
+    const { description, title, properties, required, disabled, readonly, uiSchema, fieldPathId, schema, formData, onAddProperty, registry, } = props;
     const uiOptions = getUiOptions(uiSchema);
     const TitleFieldTemplate = getTemplate('TitleFieldTemplate', registry, uiOptions);
     const DescriptionFieldTemplate = getTemplate('DescriptionFieldTemplate', registry, uiOptions);
     const { ButtonTemplates: { AddButton }, } = registry.templates;
-    return (_jsxs(_Fragment, { children: [title && (_jsx(TitleFieldTemplate, { id: titleId(idSchema), title: title, required: required, schema: schema, uiSchema: uiSchema, registry: registry })), description && (_jsx(DescriptionFieldTemplate, { id: descriptionId(idSchema), description: description, schema: schema, uiSchema: uiSchema, registry: registry })), _jsxs(Grid, Object.assign({ container: true, spacing: 2, style: { marginTop: '10px' } }, ((_b = (_a = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema['ui:grid']) === null || _a === void 0 ? void 0 : _a.container) !== null && _b !== void 0 ? _b : {}), { children: [properties.map((element, index) => {
+    return (_jsxs(_Fragment, { children: [title && (_jsx(TitleFieldTemplate, { id: titleId(fieldPathId), title: title, required: required, schema: schema, uiSchema: uiSchema, registry: registry })), description && (_jsx(DescriptionFieldTemplate, { id: descriptionId(fieldPathId), description: description, schema: schema, uiSchema: uiSchema, registry: registry })), _jsxs(Grid, Object.assign({ container: true, spacing: 2, style: { marginTop: '10px' } }, ((_b = (_a = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema['ui:grid']) === null || _a === void 0 ? void 0 : _a.container) !== null && _b !== void 0 ? _b : {}), { children: [properties.map((element, index) => {
                         var _a, _b, _c, _d, _e, _f, _g;
-                        return element.hidden ? (element.content) : (_jsx(Grid, Object.assign({ item: true, xs: 12, sx: { marginBottom: '10px' } }, ((_g = (_e = (_c = (_b = (_a = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema[element.name]) === null || _a === void 0 ? void 0 : _a['ui:grid']) === null || _b === void 0 ? void 0 : _b.item) !== null && _c !== void 0 ? _c : (_d = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema['ui:grid']) === null || _d === void 0 ? void 0 : _d[element.name]) !== null && _e !== void 0 ? _e : (_f = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema['ui:grid']) === null || _f === void 0 ? void 0 : _f.item) !== null && _g !== void 0 ? _g : {}), { children: element.content }), index));
-                    }), canExpand(schema, uiSchema, formData) && (_jsx(Grid, { container: true, justifyContent: "flex-end", children: _jsx(Grid, { item: true, children: _jsx(AddButton, { className: "object-property-expand", onClick: onAddClick(schema), 
+                        return element.hidden ? (element.content) : (_jsx(Grid, Object.assign({ item: true, size: 12, sx: { marginBottom: '10px' } }, ((_g = (_e = (_c = (_b = (_a = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema[element.name]) === null || _a === void 0 ? void 0 : _a['ui:grid']) === null || _b === void 0 ? void 0 : _b.item) !== null && _c !== void 0 ? _c : (_d = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema['ui:grid']) === null || _d === void 0 ? void 0 : _d[element.name]) !== null && _e !== void 0 ? _e : (_f = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema['ui:grid']) === null || _f === void 0 ? void 0 : _f.item) !== null && _g !== void 0 ? _g : {}), { children: element.content }), index));
+                    }), canExpand(schema, uiSchema, formData) && (_jsx(Grid, { container: true, justifyContent: "flex-end", children: _jsx(Grid, { children: _jsx(AddButton, { className: "object-property-expand", onClick: onAddProperty, 
                                 // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing -- If `disabled` is false, we still want to disable the button if `readonly` is true
                                 disabled: disabled || readonly, uiSchema: uiSchema, registry: registry }) }) }))] }))] }));
 };

package/dist/components/Form/index.js

@@ -7,7 +7,6 @@ import { PasswordWidget } from './Widgets/PasswordWidget';
 import { SelectWidget } from './Widgets/SelectWidget';
 import { FileWidget } from './Widgets/FileWidget';
 import { Fragment, forwardRef } from 'react';
-import { ObjectFieldTemplate } from './FieldTemplates/ObjectFieldTemplate';
 import { Templates } from '@rjsf/mui';
 const internalWidgets = {
     PasswordWidget,
@@ -16,14 +15,14 @@ const internalWidgets = {
 };
 const FormWrapper = styled('div')({
     // Target the Paper component within the array container
-    '& .field-array .MuiPaper-root.MuiPaper-elevation': {
+    '& .rjsf-field-array .MuiPaper-root.MuiPaper-elevation': {
         boxShadow: 'none',
     },
 });
 export const RJSForm = forwardRef(function RJSForm(_a, ref) {
     var { hideSubmitButton, submitButtonProps, actionButtons, validator = ajvValidator, widgets, children, sx, onFocus, onBlur, onClick, templates } = _a, otherProps = __rest(_a, ["hideSubmitButton", "submitButtonProps", "actionButtons", "validator", "widgets", "children", "sx", "onFocus", "onBlur", "onClick", "templates"]);
     // paddingY is resolving an outline glitch that is truncated when inside a container.
-    return (_jsx(FormWrapper, { children: _jsx(Box, { sx: Object.assign({ paddingY: '1px' }, sx), onFocus: onFocus, onBlur: onBlur, onClick: onClick, children: _jsxs(Form, Object.assign({ ref: ref, validator: validator, showErrorList: false, widgets: Object.assign(Object.assign({}, internalWidgets), (widgets !== null && widgets !== void 0 ? widgets : {})), templates: Object.assign({ ObjectFieldTemplate }, templates) }, otherProps, { children: [hideSubmitButton && _jsx(Fragment, {}), actionButtons === null || actionButtons === void 0 ? void 0 : actionButtons.map((_a, index) => {
+    return (_jsx(FormWrapper, { children: _jsx(Box, { sx: Object.assign({ paddingY: '1px' }, sx), onFocus: onFocus, onBlur: onBlur, onClick: onClick, children: _jsxs(Form, Object.assign({ ref: ref, validator: validator, showErrorList: false, widgets: Object.assign(Object.assign({}, internalWidgets), (widgets !== null && widgets !== void 0 ? widgets : {})), templates: templates }, otherProps, { children: [hideSubmitButton && _jsx(Fragment, {}), actionButtons === null || actionButtons === void 0 ? void 0 : actionButtons.map((_a, index) => {
                         var { sx: actionButtonSx } = _a, buttonProps = __rest(_a, ["sx"]);
                         return (_jsx(Button, Object.assign({ sx: [
                                 {

package/dist/components/RJST/components/Filters/FilterDescription.js

@@ -14,7 +14,7 @@ const transformToReadableValue = (parsedFilterDescription) => {
         return dateFormat(value, 'PPPppp');
     }
     const schemaEnum = findInObject(schema, 'enum');
-    const schemaEnumNames = findInObject(schema, 'enumNames');
+    const schemaEnumNames = findInObject(schema, 'ui:enumNames');
     if (schemaEnum && schemaEnumNames) {
         const index = schemaEnum.findIndex((a) => isEqual(a, value));
         return schemaEnumNames[index];

package/dist/components/RJST/components/Filters/FiltersDialog.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { useTranslation } from '../../../../hooks/useTranslations';
 import { getDataModel, getPropertySchemaAndModel } from '../../DataTypes';
@@ -13,28 +13,31 @@ import { findInObject } from '../../utils';
 import { getRefSchema } from '../../schemaOps';
 import { DialogWithCloseButton } from '../../../DialogWithCloseButton';
 import { RJSForm } from '../../../Form';
+import { ObjectFieldTemplate } from '../../../Form/FieldTemplates/ObjectFieldTemplate';
 const ArrayFieldTemplate = ({ items, canAdd, onAddClick, }) => {
     const { t } = useTranslation();
-    return (_jsx(_Fragment, { children: items === null || items === void 0 ? void 0 : items.map((element, index) => {
-            return (_jsxs(Box, { children: [index > 0 && (_jsx(Typography, { sx: {
-                            width: 'calc(100% - 50px)',
-                            textAlign: 'center',
-                            fontWeight: 'bold',
-                        }, children: t('commons.or').toUpperCase() })), _jsxs(Box, { sx: {
-                            display: 'flex',
-                            '& .form-group.field.field-object': {
-                                display: 'flex',
-                                flex: 1,
-                            },
-                            '& label': {
-                                display: 'none',
-                            },
-                            // This is necessary to remove the gap of Tags label. RJSF render nested objects  with multi label levels.
-                            '.MuiGrid-root > .form-group.field.field-object > .MuiFormControl-root > .MuiGrid-root.MuiGrid-container.MuiGrid-spacing-xs-2': {
-                                marginTop: '-8px!important',
-                            },
-                        }, children: [element.children, _jsx(Box, { display: "flex", width: "50px", alignItems: "center", justifyContent: "center", children: index !== 0 && (_jsx(IconButton, { "aria-label": t('actions.remove_filter'), onClick: element.onDropIndexClick(element.index), sx: { mt: 2 }, children: _jsx(FontAwesomeIcon, { icon: faTimes }) })) })] }), _jsx(Box, { display: "flex", my: 2, children: canAdd && index === items.length - 1 && (_jsx(Button, { "aria-label": t('aria_labels.add_filter_in_or'), variant: "text", color: "primary", onClick: onAddClick, startIcon: _jsx(FontAwesomeIcon, { icon: faPlus }), children: t('actions.add_alternative') })) })] }, element.key));
-        }) }));
+    return (_jsxs(Box, { className: "array", children: [items, canAdd && (_jsx(Box, { className: "rjsf-array-item-add", children: _jsx(Button, { "aria-label": t('aria_labels.add_filter_in_or'), variant: "text", color: "primary", onClick: onAddClick, startIcon: _jsx(FontAwesomeIcon, { icon: faPlus }), children: t('actions.add_alternative') }) }))] }));
+};
+const ArrayFieldItemTemplate = ({ children, buttonsProps, itemKey, index, }) => {
+    const { t } = useTranslation();
+    return (_jsxs(Box, { className: "rjsf-array-item", children: [index > 0 && (_jsx(Typography, { sx: {
+                    width: 'calc(100% - 50px)',
+                    textAlign: 'center',
+                    fontWeight: 'bold',
+                }, children: t('commons.or').toUpperCase() })), _jsxs(Box, { sx: {
+                    display: 'flex',
+                    '& .rjsf-field.rjsf-field-object': {
+                        display: 'flex',
+                        flex: 1,
+                    },
+                    '& label': {
+                        display: 'none',
+                    },
+                    // This is necessary to remove the gap of Tags label. RJSF render nested objects  with multi label levels.
+                    '.MuiGrid-root > .rjsf-field.rjsf-field-object > .MuiFormControl-root > .MuiGrid-root.MuiGrid-container.MuiGrid-spacing-xs-2': {
+                        marginTop: '-8px!important',
+                    },
+                }, children: [children, _jsx(Box, { display: "flex", width: "50px", alignItems: "center", justifyContent: "center", children: index !== 0 && (_jsx(IconButton, { "aria-label": t('actions.remove_filter'), onClick: buttonsProps.onRemoveItem, sx: { mt: 2 }, className: "rjsf-array-item-remove", children: _jsx(FontAwesomeIcon, { icon: faTimes }) })) })] })] }, itemKey));
 };
 const widgets = {
     CheckboxWidget: SelectWidget,
@@ -151,9 +154,9 @@ export const FiltersDialog = ({ schema, data = initialFormData, onClose, }) => {
                 },
                 uiSchema: {
                     'ui:grid': {
-                        field: { xs: 4, sm: 4 },
-                        operator: { xs: 4, sm: 4 },
-                        value: { xs: 4, sm: 4 },
+                        field: { size: { xs: 4, sm: 4 } },
+                        operator: { size: { xs: 4, sm: 4 } },
+                        value: { size: { xs: 4, sm: 4 } },
                     },
                     field: {
                         'ui:readonly': true,
@@ -175,11 +178,12 @@ export const FiltersDialog = ({ schema, data = initialFormData, onClose, }) => {
         }));
         const uiSchema = {
             'ui:ArrayFieldTemplate': ArrayFieldTemplate,
+            'ui:ArrayFieldItemTemplate': ArrayFieldItemTemplate,
             items: {
                 'ui:grid': {
-                    field: { xs: 4, sm: 4 },
-                    operator: { xs: 4, sm: 4 },
-                    value: { xs: 4, sm: 4 },
+                    field: { size: { xs: 4, sm: 4 } },
+                    operator: { size: { xs: 4, sm: 4 } },
+                    value: { size: { xs: 4, sm: 4 } },
                 },
                 value: {},
             },
@@ -241,5 +245,5 @@ export const FiltersDialog = ({ schema, data = initialFormData, onClose, }) => {
                     onClick: () => {
                         setIsFirstValidation(false);
                     },
-                } })) }) }));
+                }, templates: { ObjectFieldTemplate } })) }) }));
 };

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

@@ -8,20 +8,25 @@ import { token } from '../../../../utils/token';
 import { DndContext } from '@dnd-kit/core';
 import { CSS } from '@dnd-kit/utilities';
 import { arrayMove, SortableContext, useSortable } from '@dnd-kit/sortable';
+import { useAnalyticsContext } from '../../../../contexts/AnalyticsContext';
 const SortableItem = ({ column, handleColumnSelection, }) => {
+    var _a, _b, _c, _d;
+    const { state: analyticsState } = useAnalyticsContext();
     const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id: column.key });
-    return (_jsxs(MenuItem, Object.assign({ ref: setNodeRef }, attributes, { sx: { transform: CSS.Transform.toString(transform), transition }, children: [_jsx(ListItemIcon, Object.assign({}, listeners, { sx: {
+    return (_jsxs(MenuItem, Object.assign({ ref: setNodeRef }, attributes, { sx: { transform: CSS.Transform.toString(transform), transition }, children: [(((_b = (_a = analyticsState.featureFlags) === null || _a === void 0 ? void 0 : _a['column-ordering']) === null || _b === void 0 ? void 0 : _b.value) === 'on' ||
+                ((_d = (_c = analyticsState.featureFlags) === null || _c === void 0 ? void 0 : _c['reduced-default-device-columns-and-reordering']) === null || _d === void 0 ? void 0 : _d.value) === 'on') && (_jsx(ListItemIcon, Object.assign({}, listeners, { sx: {
                     cursor: 'grab',
                     pr: 2,
                     mx: 0,
                     minWidth: 'auto !important',
-                }, children: _jsx(FontAwesomeIcon, { icon: faGripVertical }) })), _jsx(FormControlLabel, { sx: { flex: 1, width: '100%', m: 0 }, control: _jsx(Checkbox, { sx: { m: 0 }, onClick: () => {
+                }, children: _jsx(FontAwesomeIcon, { icon: faGripVertical }) }))), _jsx(FormControlLabel, { sx: { flex: 1, width: '100%', m: 0 }, control: _jsx(Checkbox, { sx: { m: 0 }, onClick: () => {
                         handleColumnSelection(column);
                     }, checked: column.selected }), label: typeof column.label === 'string' ? column.label : column.title })] })));
 };
 export const TableActions = ({ columns, actions, onColumnPreferencesChange, onManageColumnsOpen, }) => {
     const [anchorEl, setAnchorEl] = React.useState();
     const theme = useTheme();
+    const { state: analyticsState } = useAnalyticsContext();
     const matches = useMediaQuery(theme.breakpoints.up('sm'));
     const open = Boolean(anchorEl);
     const handleClick = (event) => {
@@ -43,8 +48,13 @@ export const TableActions = ({ columns, actions, onColumnPreferencesChange, onMa
         onColumnPreferencesChange(newColumns, 'display');
     }, [columns, onColumnPreferencesChange]);
     const handleDragEnd = (event) => {
+        var _a, _b, _c, _d;
         const { active, over } = event;
-        if (!active || !over || !onColumnPreferencesChange) {
+        if (!active ||
+            !over ||
+            !onColumnPreferencesChange ||
+            (!(((_b = (_a = analyticsState.featureFlags) === null || _a === void 0 ? void 0 : _a['column-reordering']) === null || _b === void 0 ? void 0 : _b.value) === 'on') &&
+                !(((_d = (_c = analyticsState.featureFlags) === null || _c === void 0 ? void 0 : _c['reduced-default-device-columns-and-reordering']) === null || _d === void 0 ? void 0 : _d.value) === 'on'))) {
             return;
         }
         const oldIndex = columns.findIndex((c) => c.key === active.id);

package/dist/theme.d.ts

@@ -1,5 +1,4 @@
 import type { PaletteColorOptions, TypographyStyle } from '@mui/material';
-import type { TypographyStyleOptions } from '@mui/material/styles/createTypography';
 import type { ColorTokens, ShapeTokens, SpacingTokens, TypographyTokens } from '@balena/design-tokens';
 import { type IconDefinition } from '@fortawesome/free-solid-svg-icons';
 export type Severity = 'info' | 'success' | 'warning' | 'danger';
@@ -45,16 +44,16 @@ declare module '@mui/material/styles' {
         codeSm: TypographyStyle;
     }
     interface TypographyVariantsOptions {
-        bodyLg: TypographyStyleOptions | undefined;
-        body: TypographyStyleOptions | undefined;
-        bodySm: TypographyStyleOptions | undefined;
-        titleLg: TypographyStyleOptions | undefined;
-        title: TypographyStyleOptions | undefined;
-        titleSm: TypographyStyleOptions | undefined;
-        display: TypographyStyleOptions | undefined;
-        codeLg: TypographyStyleOptions | undefined;
-        code: TypographyStyleOptions | undefined;
-        codeSm: TypographyStyleOptions | undefined;
+        bodyLg: TypographyStyle | undefined;
+        body: TypographyStyle | undefined;
+        bodySm: TypographyStyle | undefined;
+        titleLg: TypographyStyle | undefined;
+        title: TypographyStyle | undefined;
+        titleSm: TypographyStyle | undefined;
+        display: TypographyStyle | undefined;
+        codeLg: TypographyStyle | undefined;
+        code: TypographyStyle | undefined;
+        codeSm: TypographyStyle | undefined;
     }
     interface TypeText {
         primary: string;

package/dist/theme.js

@@ -1152,7 +1152,7 @@ export const theme = createTheme({
                 },
             },
         },
-        MuiGrid2: {
+        MuiGrid: {
             // We should only apply this spacing to Grid components with `container`
             // But MUI does not currently support that for defaultProps
             // See: https://github.com/mui/material-ui/issues/34812

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@balena/ui-shared-components",
-  "version": "15.2.3-build-remove-column-management-experimental-code-de33678223e6bf951dd9f3c088b22117fa13bf0a-1",
+  "version": "15.2.3-build-material-7-36076d224af2d4134f2375ef50f71e060cce68e0-1",
   "main": "./dist/index.js",
   "sideEffects": false,
   "files": [
@@ -18,15 +18,15 @@
     "@emotion/styled": "^11.10.6",
     "@fortawesome/free-solid-svg-icons": "^7.1.0",
     "@fortawesome/react-fontawesome": "^3.1.0",
-    "@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",
+    "@mui/lab": "7.0.0-beta.14",
+    "@mui/material": "^7.3.5",
+    "@mui/styled-engine-sc": "^7.3.5",
+    "@mui/x-data-grid": "^7.29.8",
     "@react-google-maps/api": "^2.18.1",
-    "@rjsf/core": "^5.24.1",
-    "@rjsf/mui": "^5.24.1",
-    "@rjsf/utils": "^5.24.1",
-    "@rjsf/validator-ajv8": "^5.24.1",
+    "@rjsf/core": "^6.0.1",
+    "@rjsf/mui": "^6.0.1",
+    "@rjsf/utils": "^6.0.1",
+    "@rjsf/validator-ajv8": "^6.0.1",
     "@tanstack/react-query": "^5.64.2",
     "@types/jest": "^29.5.14",
     "ajv": "^8.17.1",
@@ -45,6 +45,7 @@
     "react-dom": "^18.2.0",
     "react-dropzone": "^14.2.3",
     "react-helmet": "^6.1.0",
+    "react-is": "^18.2.0",
     "react-markdown": "^10.0.0",
     "react-router-dom": "^6.28.0",
     "remark-breaks": "^4.0.0",
@@ -134,9 +135,10 @@
   },
   "homepage": "https://github.com/balena-io/ui-shared-components#readme",
   "versionist": {
-    "publishedAt": "2025-11-06T09:45:42.965Z"
+    "publishedAt": "2025-11-06T17:55:54.553Z"
   },
   "overrides": {
-    "storybook": "$storybook"
+    "storybook": "$storybook",
+    "react-is": "^18.2.0"
   }
 }