@balena/ui-shared-components 15.2.12-build-renovate-npm-storybook-vulnerability-5ad2ac0ff70811ea0461826283039a47e6ea3c99-1 → 15.3.0-build-add-mui-x-date-pickers-bd5d9a1317fa9206941bbff64a55425b7d23439c-1

package/dist/hooks/useDayjsAdapterLocale.d.ts

@@ -0,0 +1 @@
+export declare function useDayjsAdapterLocale(fallback?: string): string;

package/dist/hooks/useDayjsAdapterLocale.js

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import dayjs from 'dayjs';
+const getBrowserBaseLocale = (fallback = 'en') => {
+    const lang = navigator.language || fallback;
+    return lang.toLowerCase().split('-')[0];
+};
+const loaded = new Set();
+async function ensureDayjsLocale(locale) {
+    if (loaded.has(locale)) {
+        return;
+    }
+    await import(`dayjs/locale/${locale}.js`);
+    loaded.add(locale);
+}
+export function useDayjsAdapterLocale(fallback = 'en') {
+    const [adapterLocale, setAdapterLocale] = React.useState(fallback);
+    React.useEffect(() => {
+        const browserLocale = getBrowserBaseLocale(fallback);
+        void (async () => {
+            try {
+                await ensureDayjsLocale(browserLocale);
+                dayjs.locale(browserLocale);
+                setAdapterLocale(browserLocale);
+            }
+            catch (_a) {
+                dayjs.locale(fallback);
+                setAdapterLocale(fallback);
+            }
+        })();
+    }, [fallback]);
+    return adapterLocale;
+}

package/dist/index.d.ts

@@ -91,7 +91,10 @@ export * as MaterialLab from '@mui/lab';
 export * as MaterialDataGrid from '@mui/x-data-grid';
 export { enqueueSnackbar, closeSnackbar } from 'notistack';
 export { useRandomUUID } from './hooks/useRandomUUID';
+export { useDayjsAdapterLocale } from './hooks/useDayjsAdapterLocale';
 export { token } from './utils/token';
 export { uniq, toArray } from './utils/arrays';
 export * as designTokens from '@balena/design-tokens';
 export * as ReactQuery from '@tanstack/react-query';
+export { default as dayjs } from 'dayjs';
+export * as XDatePickers from '@mui/x-date-pickers';

package/dist/index.js

@@ -52,7 +52,10 @@ export * as MaterialLab from '@mui/lab';
 export * as MaterialDataGrid from '@mui/x-data-grid';
 export { enqueueSnackbar, closeSnackbar } from 'notistack';
 export { useRandomUUID } from './hooks/useRandomUUID';
+export { useDayjsAdapterLocale } from './hooks/useDayjsAdapterLocale';
 export { token } from './utils/token';
 export { uniq, toArray } from './utils/arrays';
 export * as designTokens from '@balena/design-tokens';
 export * as ReactQuery from '@tanstack/react-query';
+export { default as dayjs } from 'dayjs';
+export * as XDatePickers from '@mui/x-date-pickers';

package/dist/theme.js

@@ -9,61 +9,6 @@ export const severityIcons = {
     warning: faWarning,
     danger: faExclamationCircle,
 };
-// SVG calendar icon used for date inputs
-const calendarSvg = `
-	<svg
-		xmlns="http://www.w3.org/2000/svg"
-		viewBox="0 0 24 24"
-		fill="none"
-		stroke="#000"
-		stroke-width="2"
-		stroke-linecap="round"
-		stroke-linejoin="round"
-	>
-		<path d="M5 4 H19 A2 2 0 0 1 21 6 V8 H3 V6 A2 2 0 0 1 5 4 Z" fill="#000" />
-		<line x1="16" y1="2" x2="16" y2="6" />
-		<line x1="8" y1="2" x2="8" y2="6" />
-		<path d="M3 8 H21 V18 A2 2 0 0 1 19 20 H5 A2 2 0 0 1 3 18 V8 Z" />
-	</svg>
-`;
-const calendarDataUrl = `url("data:image/svg+xml;utf8,${encodeURIComponent(calendarSvg)}")`;
-// Fix placeholder text for date inputs in Safari: https://github.com/mui/material-ui/issues/37226
-const safariEmptyDateBugFix = {
-    '@supports (font: -apple-system-body) and (-webkit-appearance: none)': {
-        '&:has(input[type="date"][value=""]):not(:focus-within), &:has(input[type="datetime-local"][value=""]):not(:focus-within)': {
-            color: 'rgba(0,0,0,0)',
-            position: 'relative',
-            minWidth: 120,
-        },
-        '&:has(input[type="date"][value=""]):not(:focus-within)::before': {
-            content: '"dd / mm / yyyy"',
-            left: 16,
-            color: '#333',
-            display: 'inline-block',
-            position: 'absolute',
-        },
-        '&:has(input[type="datetime-local"][value=""]):not(:focus-within)::before': {
-            content: '"dd / mm / yyyy, --:--"',
-            left: 16,
-            color: '#333',
-            display: 'inline-block',
-            position: 'absolute',
-        },
-        '&:has(input[type="date"])::after, &:has(input[type="datetime-local"])::after': {
-            content: '""',
-            position: 'absolute',
-            right: 10,
-            top: '50%',
-            transform: 'translateY(-50%)',
-            width: 16,
-            height: 16,
-            pointerEvents: 'none',
-            backgroundImage: calendarDataUrl,
-            backgroundRepeat: 'no-repeat',
-            backgroundSize: '16px 16px',
-        },
-    },
-};
 export const theme = createTheme({
     cssVariables: true,
     unstable_sxConfig: {
@@ -1106,19 +1051,24 @@ export const theme = createTheme({
                 notched: false,
             },
             styleOverrides: {
-                root: ({ theme }) => (Object.assign(Object.assign({ background: 'white' }, safariEmptyDateBugFix), { legend: {
+                root: ({ theme }) => ({
+                    background: 'white',
+                    legend: {
                         // We should be able to remove this but there is a css override somewhere that
                         // set the fieldset > legend max-width to 100%, and this invalidate the notched: false rule for some inputs.
                         maxWidth: 0,
-                    }, fieldset: {
+                    },
+                    fieldset: {
                         borderColor: color.border.value,
                         '&:hover': {
                             borderColor: color.border.strong.value,
                         },
-                    }, '[type="color"]': {
+                    },
+                    '[type="color"]': {
                         padding: theme.spacing(1),
                         height: '20px',
-                    } })),
+                    },
+                }),
                 input: {
                     '&:not(.MuiInputBase-inputMultiline)': {
                         paddingTop: '14px',
@@ -1133,13 +1083,17 @@ export const theme = createTheme({
         },
         MuiInput: {
             styleOverrides: {
-                root: Object.assign(Object.assign({}, safariEmptyDateBugFix), { '&::before': {
+                root: {
+                    '&::before': {
                         borderBottom: `1px solid ${color.border.value}`,
-                    }, '&::after': {
+                    },
+                    '&::after': {
                         borderBottomColor: color.border.accent.value,
-                    }, '&:hover:not(.Mui-disabled, .Mui-error)::before': {
+                    },
+                    '&:hover:not(.Mui-disabled, .Mui-error)::before': {
                         borderBottom: `solid 1px ${color.border.strong.value}`,
-                    } }),
+                    },
+                },
             },
         },
         MuiInputLabel: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@balena/ui-shared-components",
-  "version": "15.2.12-build-renovate-npm-storybook-vulnerability-5ad2ac0ff70811ea0461826283039a47e6ea3c99-1",
+  "version": "15.3.0-build-add-mui-x-date-pickers-bd5d9a1317fa9206941bbff64a55425b7d23439c-1",
   "main": "./dist/index.js",
   "sideEffects": false,
   "files": [
@@ -22,6 +22,7 @@
     "@mui/material": "^7.3.5",
     "@mui/styled-engine-sc": "^7.3.5",
     "@mui/x-data-grid": "^7.29.8",
+    "@mui/x-date-pickers": "^8.22.0",
     "@react-google-maps/api": "^2.18.1",
     "@rjsf/core": "^6.0.1",
     "@rjsf/mui": "^6.0.1",
@@ -37,6 +38,7 @@
     "color": "^5.0.0",
     "color-hash": "^2.0.2",
     "date-fns": "^4.1.0",
+    "dayjs": "^1.11.19",
     "jest": "^29.7.0",
     "lodash": "^4.17.21",
     "notistack": "^3.0.1",
@@ -135,7 +137,7 @@
   },
   "homepage": "https://github.com/balena-io/ui-shared-components#readme",
   "versionist": {
-    "publishedAt": "2025-12-18T19:12:46.272Z"
+    "publishedAt": "2025-12-18T12:35:39.646Z"
   },
   "overrides": {
     "storybook": "$storybook",