@balena/ui-shared-components 0.13.2 → 0.13.3

package/dist/components/Form/index.js

@@ -23,7 +23,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Form from '@rjsf/mui';
 import ajvValidator from '@rjsf/validator-ajv8';
-import { Box, Button } from '@mui/material';
+import { Box, Button, styled } from '@mui/material';
 import { PasswordWidget } from './Widgets/PasswordWidget';
 import { SelectWidget } from './Widgets/SelectWidget';
 import { FileWidget } from './Widgets/FileWidget';
@@ -34,10 +34,16 @@ var internalWidgets = {
     SelectWidget: SelectWidget,
     FileWidget: FileWidget,
 };
+var FormWrapper = styled('div')({
+    // Target the Paper component within the array container
+    '& .field-array .MuiPaper-root.MuiPaper-elevation': {
+        boxShadow: 'none',
+    },
+});
 export var RJSForm = function (_a) {
     var hideSubmitButton = _a.hideSubmitButton, submitButtonProps = _a.submitButtonProps, actionButtons = _a.actionButtons, _b = _a.validator, validator = _b === void 0 ? ajvValidator : _b, widgets = _a.widgets, children = _a.children, ref = _a.ref, sx = _a.sx, onFocus = _a.onFocus, onBlur = _a.onBlur, templates = _a.templates, otherProps = __rest(_a, ["hideSubmitButton", "submitButtonProps", "actionButtons", "validator", "widgets", "children", "ref", "sx", "onFocus", "onBlur", "templates"]);
     // paddingY is resolving an outline glitch that is truncated when inside a container.
-    return (_jsx(Box, __assign({ sx: __assign({ paddingY: '1px' }, sx), onFocus: onFocus, onBlur: onBlur }, { children: _jsxs(Form, __assign({ ref: ref, validator: validator, showErrorList: false, widgets: __assign(__assign({}, internalWidgets), (widgets || {})), templates: __assign({ ObjectFieldTemplate: ObjectFieldTemplate }, templates) }, otherProps, { children: [hideSubmitButton && _jsx(Fragment, {}), actionButtons === null || actionButtons === void 0 ? void 0 : actionButtons.map(function (buttonProps) { return (_jsx(Button, __assign({}, buttonProps))); }), !hideSubmitButton && (_jsx(Button, __assign({ children: 'Submit', 
-                    // TODO: remove once we migrate buttons
-                    disableRipple: true }, submitButtonProps, { color: "customBlue", variant: "contained", type: "submit" }))), children] })) })));
+    return (_jsx(FormWrapper, { children: _jsx(Box, __assign({ sx: __assign({ paddingY: '1px' }, sx), onFocus: onFocus, onBlur: onBlur }, { children: _jsxs(Form, __assign({ ref: ref, validator: validator, showErrorList: false, widgets: __assign(__assign({}, internalWidgets), (widgets || {})), templates: __assign({ ObjectFieldTemplate: ObjectFieldTemplate }, templates) }, otherProps, { children: [hideSubmitButton && _jsx(Fragment, {}), actionButtons === null || actionButtons === void 0 ? void 0 : actionButtons.map(function (buttonProps) { return (_jsx(Button, __assign({}, buttonProps))); }), !hideSubmitButton && (_jsx(Button, __assign({ children: 'Submit', 
+                        // TODO: remove once we migrate buttons
+                        disableRipple: true }, submitButtonProps, { color: "customBlue", variant: "contained", type: "submit" }))), children] })) })) }));
 };

package/dist/theme.js

@@ -316,14 +316,6 @@ export var theme = createTheme({
                 },
             },
         },
-        // This is needed for RJSForm. If it gives any problem, we can remove this rule and override the behavior using the ArrayField field.
-        MuiPaper: {
-            styleOverrides: {
-                root: {
-                    boxShadow: 'none',
-                },
-            },
-        },
         MuiTooltip: {
             defaultProps: {
                 arrow: true,

package/dist_esm5/components/Form/index.js

@@ -2,7 +2,7 @@ import { __assign, __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Form from '@rjsf/mui';
 import ajvValidator from '@rjsf/validator-ajv8';
-import { Box, Button } from '@mui/material';
+import { Box, Button, styled } from '@mui/material';
 import { PasswordWidget } from './Widgets/PasswordWidget';
 import { SelectWidget } from './Widgets/SelectWidget';
 import { FileWidget } from './Widgets/FileWidget';
@@ -13,10 +13,16 @@ var internalWidgets = {
     SelectWidget: SelectWidget,
     FileWidget: FileWidget,
 };
+var FormWrapper = styled('div')({
+    // Target the Paper component within the array container
+    '& .field-array .MuiPaper-root.MuiPaper-elevation': {
+        boxShadow: 'none',
+    },
+});
 export var RJSForm = function (_a) {
     var hideSubmitButton = _a.hideSubmitButton, submitButtonProps = _a.submitButtonProps, actionButtons = _a.actionButtons, _b = _a.validator, validator = _b === void 0 ? ajvValidator : _b, widgets = _a.widgets, children = _a.children, ref = _a.ref, sx = _a.sx, onFocus = _a.onFocus, onBlur = _a.onBlur, templates = _a.templates, otherProps = __rest(_a, ["hideSubmitButton", "submitButtonProps", "actionButtons", "validator", "widgets", "children", "ref", "sx", "onFocus", "onBlur", "templates"]);
     // paddingY is resolving an outline glitch that is truncated when inside a container.
-    return (_jsx(Box, __assign({ sx: __assign({ paddingY: '1px' }, sx), onFocus: onFocus, onBlur: onBlur }, { children: _jsxs(Form, __assign({ ref: ref, validator: validator, showErrorList: false, widgets: __assign(__assign({}, internalWidgets), (widgets || {})), templates: __assign({ ObjectFieldTemplate: ObjectFieldTemplate }, templates) }, otherProps, { children: [hideSubmitButton && _jsx(Fragment, {}), actionButtons === null || actionButtons === void 0 ? void 0 : actionButtons.map(function (buttonProps) { return (_jsx(Button, __assign({}, buttonProps))); }), !hideSubmitButton && (_jsx(Button, __assign({ children: 'Submit', 
-                    // TODO: remove once we migrate buttons
-                    disableRipple: true }, submitButtonProps, { color: "customBlue", variant: "contained", type: "submit" }))), children] })) })));
+    return (_jsx(FormWrapper, { children: _jsx(Box, __assign({ sx: __assign({ paddingY: '1px' }, sx), onFocus: onFocus, onBlur: onBlur }, { children: _jsxs(Form, __assign({ ref: ref, validator: validator, showErrorList: false, widgets: __assign(__assign({}, internalWidgets), (widgets || {})), templates: __assign({ ObjectFieldTemplate: ObjectFieldTemplate }, templates) }, otherProps, { children: [hideSubmitButton && _jsx(Fragment, {}), actionButtons === null || actionButtons === void 0 ? void 0 : actionButtons.map(function (buttonProps) { return (_jsx(Button, __assign({}, buttonProps))); }), !hideSubmitButton && (_jsx(Button, __assign({ children: 'Submit', 
+                        // TODO: remove once we migrate buttons
+                        disableRipple: true }, submitButtonProps, { color: "customBlue", variant: "contained", type: "submit" }))), children] })) })) }));
 };

package/dist_esm5/theme.js

@@ -316,14 +316,6 @@ export var theme = createTheme({
                 },
             },
         },
-        // This is needed for RJSForm. If it gives any problem, we can remove this rule and override the behavior using the ArrayField field.
-        MuiPaper: {
-            styleOverrides: {
-                root: {
-                    boxShadow: 'none',
-                },
-            },
-        },
         MuiTooltip: {
             defaultProps: {
                 arrow: true,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@balena/ui-shared-components",
-  "version": "0.13.2",
+  "version": "0.13.3",
   "main": "./dist/index.js",
   "module": "./dist_esm5/index.js",
   "sideEffects": false,
@@ -112,6 +112,6 @@
   },
   "homepage": "https://github.com/balena-io/ui-shared-components#readme",
   "versionist": {
-    "publishedAt": "2023-11-28T10:34:39.906Z"
+    "publishedAt": "2023-11-28T13:42:45.922Z"
   }
 }