sx

web/packages/base/components/utils/sx.ts

@@ -0,0 +1,25 @@
+import { type SxProps, type Theme } from "@mui/material";
+import { type SystemStyleObject } from "@mui/system";
+
+/**
+ * Wrapper over Array.isArray that retains the TypeScript type for SxProps when
+ * trying to spread them.
+ *
+ * The recommended pattern to use sx props in our own component (whilst
+ * forwarding them to the underyling MUI component) is to:
+ *
+ *    ...(Array.isArray(sx) ? sx : [sx])
+ *
+ * However, currently (as of MUI v6), this runs afoul of the
+ * 'no-unsafe-assignment' eslint rule. This function provides a workaround, and
+ * can be used as a drop-in replacement of Array.isArray in the above pattern.
+ *
+ * Ref: https://github.com/mui/material-ui/issues/37730
+ */
+export const isSxArray = (
+    sx: SxProps<Theme>,
+): sx is readonly (
+    | boolean
+    | SystemStyleObject<Theme>
+    | ((theme: Theme) => SystemStyleObject<Theme>)
+)[] => Array.isArray(sx);