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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,5 +1,5 @@
1
1
  import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { Avatar, DialogActions, DialogContent, Divider, Grid, Stack, Typography, } from '@mui/material';
2
+ import { Avatar, DialogActions, DialogContent, Divider, Grid2 as Grid, Stack, Typography, } from '@mui/material';
3
3
  import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
4
4
  import { FALLBACK_LOGO_UNKNOWN_DEVICE, isUrlAccessible, stripVersionBuild, } from './utils';
5
5
  import { GENERIC_X86_MINIMUM_SUPPORTED_SECUREBOOT_VERSION, GENERIC_X86_SLUG, ImageForm, } from './ImageForm';
@@ -1,17 +1,17 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
2
- import { Grid } from '@mui/material';
2
+ import Grid from '@mui/material/Grid';
3
3
  import { canExpand, descriptionId, getTemplate, getUiOptions, titleId, } from '@rjsf/utils';
4
4
  export const ObjectFieldTemplate = (props) => {
5
5
  var _a, _b;
6
- const { description, title, properties, required, disabled, readonly, uiSchema, fieldPathId, schema, formData, onAddProperty, registry, } = props;
6
+ const { description, title, properties, required, disabled, readonly, uiSchema, idSchema, schema, formData, onAddClick, registry, } = props;
7
7
  const uiOptions = getUiOptions(uiSchema);
8
8
  const TitleFieldTemplate = getTemplate('TitleFieldTemplate', registry, uiOptions);
9
9
  const DescriptionFieldTemplate = getTemplate('DescriptionFieldTemplate', registry, uiOptions);
10
10
  const { ButtonTemplates: { AddButton }, } = registry.templates;
11
- 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) => {
11
+ 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) => {
12
12
  var _a, _b, _c, _d, _e, _f, _g;
13
13
  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));
14
- }), canExpand(schema, uiSchema, formData) && (_jsx(Grid, { container: true, justifyContent: "flex-end", children: _jsx(Grid, { children: _jsx(AddButton, { className: "object-property-expand", onClick: onAddProperty,
14
+ }), 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),
15
15
  // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing -- If `disabled` is false, we still want to disable the button if `readonly` is true
16
16
  disabled: disabled || readonly, uiSchema: uiSchema, registry: registry }) }) }))] }))] }));
17
17
  };
@@ -16,7 +16,7 @@ const internalWidgets = {
16
16
  };
17
17
  const FormWrapper = styled('div')({
18
18
  // Target the Paper component within the array container
19
- '& .rjsf-field-array .MuiPaper-root.MuiPaper-elevation': {
19
+ '& .field-array .MuiPaper-root.MuiPaper-elevation': {
20
20
  boxShadow: 'none',
21
21
  },
22
22
  });
@@ -14,7 +14,7 @@ const transformToReadableValue = (parsedFilterDescription) => {
14
14
  return dateFormat(value, 'PPPppp');
15
15
  }
16
16
  const schemaEnum = findInObject(schema, 'enum');
17
- const schemaEnumNames = findInObject(schema, 'ui:enumNames');
17
+ const schemaEnumNames = findInObject(schema, 'enumNames');
18
18
  if (schemaEnum && schemaEnumNames) {
19
19
  const index = schemaEnum.findIndex((a) => isEqual(a, value));
20
20
  return schemaEnumNames[index];
@@ -1,4 +1,4 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
1
+ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
2
2
  import React from 'react';
3
3
  import { useTranslation } from '../../../../hooks/useTranslations';
4
4
  import { getDataModel, getPropertySchemaAndModel } from '../../DataTypes';
@@ -13,28 +13,28 @@ import { findInObject } from '../../utils';
13
13
  import { getRefSchema } from '../../schemaOps';
14
14
  import { DialogWithCloseButton } from '../../../DialogWithCloseButton';
15
15
  import { RJSForm } from '../../../Form';
16
- const ArrayFieldItemTemplate = ({ children, buttonsProps, itemKey, index, totalItems, }) => {
16
+ const ArrayFieldTemplate = ({ items, canAdd, onAddClick, }) => {
17
17
  const { t } = useTranslation();
18
- return (_jsxs(Box, { children: [index > 0 && (_jsx(Typography, { sx: {
19
- width: 'calc(100% - 50px)',
20
- textAlign: 'center',
21
- fontWeight: 'bold',
22
- }, children: t('commons.or').toUpperCase() })), _jsxs(Box, { sx: {
23
- display: 'flex',
24
- '& .form-group.field.rjsf-field-object': {
25
- display: 'flex',
26
- flex: 1,
27
- },
28
- '& label': {
29
- display: 'none',
30
- },
31
- // This is necessary to remove the gap of Tags label. RJSF render nested objects with multi label levels.
32
- '.MuiGrid-root > .form-group.field.rjsf-field-object > .MuiFormControl-root > .MuiGrid-root.MuiGrid-container.MuiGrid-spacing-xs-2': {
33
- marginTop: '-8px!important',
34
- },
35
- }, children: [children, _jsx(Box, { display: "flex", width: "50px", alignItems: "center", justifyContent: "center", children: index !== 0 && (_jsx(IconButton, { "aria-label": t('actions.remove_filter'),
36
- // @ts-expect-error The typing of the current version of @rjsf/utils does not show that `onDropIndexClick` exists, even though it does
37
- onClick: element.onDropIndexClick(element.index), sx: { mt: 2 }, children: _jsx(FontAwesomeIcon, { icon: faTimes }) })) })] }), _jsx(Box, { display: "flex", my: 2, children: buttonsProps.canAdd && index === totalItems - 1 && (_jsx(Button, { "aria-label": t('aria_labels.add_filter_in_or'), variant: "text", color: "primary", onClick: buttonsProps.onAddItem, startIcon: _jsx(FontAwesomeIcon, { icon: faPlus }), children: t('actions.add_alternative') })) })] }, itemKey));
18
+ return (_jsx(_Fragment, { children: items === null || items === void 0 ? void 0 : items.map((element, index) => {
19
+ return (_jsxs(Box, { children: [index > 0 && (_jsx(Typography, { sx: {
20
+ width: 'calc(100% - 50px)',
21
+ textAlign: 'center',
22
+ fontWeight: 'bold',
23
+ }, children: t('commons.or').toUpperCase() })), _jsxs(Box, { sx: {
24
+ display: 'flex',
25
+ '& .form-group.field.field-object': {
26
+ display: 'flex',
27
+ flex: 1,
28
+ },
29
+ '& label': {
30
+ display: 'none',
31
+ },
32
+ // This is necessary to remove the gap of Tags label. RJSF render nested objects with multi label levels.
33
+ '.MuiGrid-root > .form-group.field.field-object > .MuiFormControl-root > .MuiGrid-root.MuiGrid-container.MuiGrid-spacing-xs-2': {
34
+ marginTop: '-8px!important',
35
+ },
36
+ }, 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));
37
+ }) }));
38
38
  };
39
39
  const widgets = {
40
40
  CheckboxWidget: SelectWidget,
@@ -174,7 +174,7 @@ export const FiltersDialog = ({ schema, data = initialFormData, onClose, }) => {
174
174
  const: key,
175
175
  }));
176
176
  const uiSchema = {
177
- 'ui:ArrayFieldItemTemplate': ArrayFieldItemTemplate,
177
+ 'ui:ArrayFieldTemplate': ArrayFieldTemplate,
178
178
  items: {
179
179
  'ui:grid': {
180
180
  field: { xs: 4, sm: 4 },
@@ -8,25 +8,20 @@ import { token } from '../../../../utils/token';
8
8
  import { DndContext } from '@dnd-kit/core';
9
9
  import { CSS } from '@dnd-kit/utilities';
10
10
  import { arrayMove, SortableContext, useSortable } from '@dnd-kit/sortable';
11
- import { useAnalyticsContext } from '../../../../contexts/AnalyticsContext';
12
11
  const SortableItem = ({ column, handleColumnSelection, }) => {
13
- var _a, _b, _c, _d;
14
- const { state: analyticsState } = useAnalyticsContext();
15
12
  const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id: column.key });
16
- 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' ||
17
- ((_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: {
13
+ return (_jsxs(MenuItem, Object.assign({ ref: setNodeRef }, attributes, { sx: { transform: CSS.Transform.toString(transform), transition }, children: [_jsx(ListItemIcon, Object.assign({}, listeners, { sx: {
18
14
  cursor: 'grab',
19
15
  pr: 2,
20
16
  mx: 0,
21
17
  minWidth: 'auto !important',
22
- }, children: _jsx(FontAwesomeIcon, { icon: faGripVertical }) }))), _jsx(FormControlLabel, { sx: { flex: 1, width: '100%', m: 0 }, control: _jsx(Checkbox, { sx: { m: 0 }, onClick: () => {
18
+ }, children: _jsx(FontAwesomeIcon, { icon: faGripVertical }) })), _jsx(FormControlLabel, { sx: { flex: 1, width: '100%', m: 0 }, control: _jsx(Checkbox, { sx: { m: 0 }, onClick: () => {
23
19
  handleColumnSelection(column);
24
20
  }, checked: column.selected }), label: typeof column.label === 'string' ? column.label : column.title })] })));
25
21
  };
26
22
  export const TableActions = ({ columns, actions, onColumnPreferencesChange, onManageColumnsOpen, }) => {
27
23
  const [anchorEl, setAnchorEl] = React.useState();
28
24
  const theme = useTheme();
29
- const { state: analyticsState } = useAnalyticsContext();
30
25
  const matches = useMediaQuery(theme.breakpoints.up('sm'));
31
26
  const open = Boolean(anchorEl);
32
27
  const handleClick = (event) => {
@@ -48,13 +43,8 @@ export const TableActions = ({ columns, actions, onColumnPreferencesChange, onMa
48
43
  onColumnPreferencesChange(newColumns, 'display');
49
44
  }, [columns, onColumnPreferencesChange]);
50
45
  const handleDragEnd = (event) => {
51
- var _a, _b, _c, _d;
52
46
  const { active, over } = event;
53
- if (!active ||
54
- !over ||
55
- !onColumnPreferencesChange ||
56
- (!(((_b = (_a = analyticsState.featureFlags) === null || _a === void 0 ? void 0 : _a['column-reordering']) === null || _b === void 0 ? void 0 : _b.value) === 'on') &&
57
- !(((_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'))) {
47
+ if (!active || !over || !onColumnPreferencesChange) {
58
48
  return;
59
49
  }
60
50
  const oldIndex = columns.findIndex((c) => c.key === active.id);
package/dist/theme.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import type { PaletteColorOptions, TypographyStyle } from '@mui/material';
2
+ import type { TypographyStyleOptions } from '@mui/material/styles/createTypography';
2
3
  import type { ColorTokens, ShapeTokens, SpacingTokens, TypographyTokens } from '@balena/design-tokens';
3
4
  import { type IconDefinition } from '@fortawesome/free-solid-svg-icons';
4
5
  export type Severity = 'info' | 'success' | 'warning' | 'danger';
@@ -44,16 +45,16 @@ declare module '@mui/material/styles' {
44
45
  codeSm: TypographyStyle;
45
46
  }
46
47
  interface TypographyVariantsOptions {
47
- bodyLg: TypographyStyle | undefined;
48
- body: TypographyStyle | undefined;
49
- bodySm: TypographyStyle | undefined;
50
- titleLg: TypographyStyle | undefined;
51
- title: TypographyStyle | undefined;
52
- titleSm: TypographyStyle | undefined;
53
- display: TypographyStyle | undefined;
54
- codeLg: TypographyStyle | undefined;
55
- code: TypographyStyle | undefined;
56
- codeSm: TypographyStyle | undefined;
48
+ bodyLg: TypographyStyleOptions | undefined;
49
+ body: TypographyStyleOptions | undefined;
50
+ bodySm: TypographyStyleOptions | undefined;
51
+ titleLg: TypographyStyleOptions | undefined;
52
+ title: TypographyStyleOptions | undefined;
53
+ titleSm: TypographyStyleOptions | undefined;
54
+ display: TypographyStyleOptions | undefined;
55
+ codeLg: TypographyStyleOptions | undefined;
56
+ code: TypographyStyleOptions | undefined;
57
+ codeSm: TypographyStyleOptions | undefined;
57
58
  }
58
59
  interface TypeText {
59
60
  primary: string;
package/dist/theme.js CHANGED
@@ -1152,7 +1152,7 @@ export const theme = createTheme({
1152
1152
  },
1153
1153
  },
1154
1154
  },
1155
- MuiGrid: {
1155
+ MuiGrid2: {
1156
1156
  // We should only apply this spacing to Grid components with `container`
1157
1157
  // But MUI does not currently support that for defaultProps
1158
1158
  // See: https://github.com/mui/material-ui/issues/34812
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@balena/ui-shared-components",
3
- "version": "15.2.3-build-material-7-5e95793d6147d4a1afc46e013729544abfbea089-1",
3
+ "version": "15.2.3-build-remove-column-management-experimental-code-de33678223e6bf951dd9f3c088b22117fa13bf0a-1",
4
4
  "main": "./dist/index.js",
5
5
  "sideEffects": false,
6
6
  "files": [
@@ -18,15 +18,15 @@
18
18
  "@emotion/styled": "^11.10.6",
19
19
  "@fortawesome/free-solid-svg-icons": "^7.1.0",
20
20
  "@fortawesome/react-fontawesome": "^3.1.0",
21
- "@mui/lab": "7.0.0-beta.14",
22
- "@mui/material": "^7.0.0",
23
- "@mui/styled-engine-sc": "^7.0.0",
24
- "@mui/x-data-grid": "^7.29.8",
21
+ "@mui/lab": "6.0.0-beta.24",
22
+ "@mui/material": "^6.3.1",
23
+ "@mui/styled-engine-sc": "^6.3.1",
24
+ "@mui/x-data-grid": "^7.23.5",
25
25
  "@react-google-maps/api": "^2.18.1",
26
- "@rjsf/core": "^6.0.1",
27
- "@rjsf/mui": "^6.0.1",
28
- "@rjsf/utils": "^6.0.1",
29
- "@rjsf/validator-ajv8": "^6.0.1",
26
+ "@rjsf/core": "^5.24.1",
27
+ "@rjsf/mui": "^5.24.1",
28
+ "@rjsf/utils": "^5.24.1",
29
+ "@rjsf/validator-ajv8": "^5.24.1",
30
30
  "@tanstack/react-query": "^5.64.2",
31
31
  "@types/jest": "^29.5.14",
32
32
  "ajv": "^8.17.1",
@@ -45,7 +45,6 @@
45
45
  "react-dom": "^18.2.0",
46
46
  "react-dropzone": "^14.2.3",
47
47
  "react-helmet": "^6.1.0",
48
- "react-is": "^18.2.0",
49
48
  "react-markdown": "^10.0.0",
50
49
  "react-router-dom": "^6.28.0",
51
50
  "remark-breaks": "^4.0.0",
@@ -135,10 +134,9 @@
135
134
  },
136
135
  "homepage": "https://github.com/balena-io/ui-shared-components#readme",
137
136
  "versionist": {
138
- "publishedAt": "2025-11-05T14:44:38.208Z"
137
+ "publishedAt": "2025-11-06T09:45:42.965Z"
139
138
  },
140
139
  "overrides": {
141
- "storybook": "$storybook",
142
- "react-is": "^18.2.0"
140
+ "storybook": "$storybook"
143
141
  }
144
142
  }