@unicef/material-ui 2.0.1 → 2.0.3

package/lib/prod.js

@@ -7523,7 +7523,72 @@ function ThemeProvider({
   });
 }
 
-var unicef = {
+// default
+const enUS$1 = {
+  /*
+  components: {
+    MuiBreadcrumbs: { defaultProps: {
+      expandText: 'Show path',
+    }},
+    MuiTablePagination: { defaultProps: {
+      getItemAriaLabel: (type) => {
+        if (type === 'first') {
+          return 'Go to first page';
+        }
+        if (type === 'last') {
+          return 'Go to last page';
+        }
+        if (type === 'next') {
+          return 'Go to next page';
+        }
+        // if (type === 'previous') {
+        return 'Go to previous page';
+      },
+      labelRowsPerPage: 'Rows per page:',
+      labelDisplayedRows: ({ from, to, count }) =>
+  `${from}–${to} of ${count !== -1 ? count : `more than ${to}`}`,
+    }},
+    MuiRating: { defaultProps: {
+      getLabelText: value => `${value} Star${value !== 1 ? 's' : ''}`,
+      emptyLabelText: 'Empty',
+    }},
+    MuiAutocomplete: { defaultProps: {
+      clearText: 'Clear',
+      closeText: 'Close',
+      loadingText: 'Loading…',
+      noOptionsText: 'No options',
+      openText: 'Open',
+    }},
+    MuiAlert: { defaultProps: {
+      closeText: 'Close',
+    }},
+    MuiPagination: {  defaultProps: {
+      'aria-label': 'Pagination navigation',
+      getItemAriaLabel: (type, page, selected) => {
+        if (type === 'page') {
+          return `${selected ? '' : 'Go to '}page ${page}`;
+        }
+        if (type === 'first') {
+          return 'Go to first page';
+        }
+        if (type === 'last') {
+          return 'Go to last page';
+        }
+        if (type === 'next') {
+          return 'Go to next page';
+        }
+        // if (type === 'previous') {
+        return 'Go to previous page';
+      },
+    }},
+  },
+  */
+};
+
+/**
+ * UNICEF color palette.
+ */
+var unicefColors = {
   blue: '#1CABE2',
   darkBlue: '#374EA2',
   purple: '#6A3674',
@@ -7534,70 +7599,99 @@ var unicef = {
   green: '#80BD41',
   darkGreen: '#00833D'
 };
-var theme = createTheme({
-  typography: {
-    useNextVariants: true,
-    fontFamily: ['Roboto', 'Helvetica', 'Arial', 'sans-serif'].join(',')
-  },
-  spacing: 8,
-  palette: {
-    primary: {
-      main: unicef.darkBlue
+
+/**
+ * Creates a customized MUI theme with UNICEF color palette.
+ *
+ * Applies UNICEF color palette, typography, and component overrides
+ * on top of MUI's default theme. Supports locale-specific configurations
+ * for internationalized applications.
+ *
+ * @param {object} [locale=enUS] - MUI locale object for localized component text.
+ * @returns A fully configured MUI theme instance.
+ *
+ * @example
+ * import { createUnicefMuiTheme } from '@unicef/material-ui'
+ * import { frFR } from '@mui/material/locale'
+ *
+ * const theme = createUnicefMuiTheme(frFR)
+ */
+var createUnicefMuiTheme = function createUnicefMuiTheme() {
+  var locale = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : enUS$1;
+  var theme = createTheme({
+    typography: {
+      useNextVariants: true,
+      fontFamily: ['Roboto', 'Helvetica', 'Arial', 'sans-serif'].join(',')
     },
-    secondary: {
-      main: unicef.blue
+    spacing: 8,
+    palette: {
+      primary: {
+        main: unicefColors.darkBlue
+      },
+      secondary: {
+        main: unicefColors.blue
+      },
+      error: {
+        main: unicefColors.red
+      },
+      unicef: unicefColors,
+      unicefBlue: unicefColors.blue
     },
-    error: {
-      main: unicef.red
+    unicefBlue: unicefColors.blue,
+    mixins: {
+      toolbar: {}
     },
-    unicef: unicef,
-    unicefBlue: unicef.blue
-  },
-  unicefBlue: unicef.blue,
-  mixins: {
-    toolbar: {}
-  },
-  shape: {
-    borderRadius: 4
-  },
-  components: {
-    // Name of the component
-    MuiButtonBase: {
-      defaultProps: {
-        // The props to change the default for.
-        disableRipple: true // No more ripple, on the whole application 💣!
-      }
+    shape: {
+      borderRadius: 4
     },
-    MuiDrawer: {
-      styleOverrides: {
-        paper: {
-          minWidth: 256
+    // Component-level style overrides and default prop customizations
+    components: {
+      MuiButtonBase: {
+        defaultProps: {
+          // The props to change the default for.
+          disableRipple: true // No more ripple, on the whole application 💣!
         }
-      }
-    },
-    MuiInputBase: {
-      styleOverrides: {
-        root: {
-          backgroundColor: 'white'
+      },
+      MuiDrawer: {
+        styleOverrides: {
+          paper: {
+            minWidth: 256
+          }
         }
-      }
-    },
-    MuiTab: {
-      styleOverrides: {
-        root: {
-          minWidth: 160
+      },
+      MuiInputBase: {
+        styleOverrides: {
+          root: {
+            backgroundColor: 'white'
+          }
         }
-      }
-    },
-    MuiAppBar: {
-      styleOverrides: {
-        root: {
-          zIndex: 1200
+      },
+      MuiTab: {
+        styleOverrides: {
+          root: {
+            minWidth: 160
+          }
+        }
+      },
+      MuiAppBar: {
+        styleOverrides: {
+          root: {
+            zIndex: 1200
+          }
         }
       }
     }
-  }
-});
+  }, locale);
+  return theme;
+};
+
+/**
+ * Default UNICEF MUI theme instance (English locale).
+ *
+ * Wrap your application with `<ThemeProvider theme={theme}>` to apply
+ * UNICEF brand styles throughout the component tree.
+ */
+var theme = createUnicefMuiTheme();
 
 ClassNameGenerator$1.configure(function (componentName) {
   return "Uni-".concat(componentName);
@@ -33055,14 +33149,13 @@ var classes$k = {
 };
 var StyledChip = styled$1(Chip$1)(function (_ref) {
   var theme = _ref.theme;
-  return _defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, "&.".concat(classes$k.chip), {
+  return _defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, "&.".concat(classes$k.chip), _defineProperty$1({
     marginRight: theme.spacing(0.5),
     marginTop: theme.spacing(0.25),
-    maxWidth: '90%',
-    '& .Uni-MuiChip-deleteIcon': {
-      display: 'flex'
-    }
-  }), "&.".concat(classes$k.chipFocused), {
+    maxWidth: '90%'
+  }, "& .".concat(chipClasses$1.deleteIcon), {
+    display: 'flex'
+  })), "&.".concat(classes$k.chipFocused), {
     backgroundColor: emphasize(theme.palette.mode === 'light' ? theme.palette.grey[300] : theme.palette.grey[700], 0.08)
   }), "& .".concat(classes$k.avatar), {
     width: 24,
@@ -61399,7 +61492,9 @@ function UInfiniteScroll(_ref) {
     onEndOfScroll = _ref.onEndOfScroll;
   var divElement = useRef();
   useEffect(function () {
-    window.onscroll = function () {
+    // Guard against SSR environments where window is not available
+    if (typeof window === 'undefined') return;
+    var handleScroll = function handleScroll() {
       //window.innerHeight: is the height of the window
       //window.pageYOffset is the current scroll offset position
       // counting from the the top of the screen
@@ -61409,7 +61504,11 @@ function UInfiniteScroll(_ref) {
         onEndOfScroll();
       }
     };
-  });
+    window.addEventListener('scroll', handleScroll);
+    return function () {
+      window.removeEventListener('scroll', handleScroll);
+    };
+  }, [offset, onEndOfScroll]);
   return /*#__PURE__*/React__default.createElement(Box$1, {
     ref: divElement
   });
@@ -62985,5 +63084,5 @@ UAriaHiddenText.propTypes = {
   text: PropTypes.string
 };
 
-export { ActiveAutoComplete, ActiveCurrencyField, ActiveDatePicker, ActiveDateTimePicker, ActiveDesktopDatePicker, ActiveDesktopDateTimePicker, ActiveDesktopTimePicker, ActiveFormCoordinateField, ActiveFormPositiveInteger, ActiveFormSelect, ActiveFormTextField, ActiveMobileDatePicker, ActiveMobileDateTimePicker, ActiveMobileTimePicker, ActiveTimePicker, UAriaHiddenText, UAriaLive, UAsyncBadge, UAutoComplete, UAvatarImage, UBreadcrumbs, UButton, UConfirmationButton, UContent, UCoordinateField, UCurrencyField, UDatePicker, UDateTimePicker, UDesktopDatePicker, UDesktopDateTimePicker, UDesktopTimePicker, UErrorAlert, UGraphPeoplePicker, UHeader, UHeaderLeftMenu, UHeaderMainMenu, UHeaderRightButtons, UIconPicker, UInfiniteScroll, ULayout, UMobileDatePicker, UMobileDateTimePicker, UMobileTimePicker, UNICEFStyleProvider, UNavbarCenter, UPageLoadingProgress, UPeoplePicker, UPositiveInteger, URadioButtons, USearchBox, USelectPicker, USideBar, UTextField, UTimePicker, UValidatorComponent, UValidatorForm, theme };
+export { ActiveAutoComplete, ActiveCurrencyField, ActiveDatePicker, ActiveDateTimePicker, ActiveDesktopDatePicker, ActiveDesktopDateTimePicker, ActiveDesktopTimePicker, ActiveFormCoordinateField, ActiveFormPositiveInteger, ActiveFormSelect, ActiveFormTextField, ActiveMobileDatePicker, ActiveMobileDateTimePicker, ActiveMobileTimePicker, ActiveTimePicker, UAriaHiddenText, UAriaLive, UAsyncBadge, UAutoComplete, UAvatarImage, UBreadcrumbs, UButton, UConfirmationButton, UContent, UCoordinateField, UCurrencyField, UDatePicker, UDateTimePicker, UDesktopDatePicker, UDesktopDateTimePicker, UDesktopTimePicker, UErrorAlert, UGraphPeoplePicker, UHeader, UHeaderLeftMenu, UHeaderMainMenu, UHeaderRightButtons, UIconPicker, UInfiniteScroll, ULayout, UMobileDatePicker, UMobileDateTimePicker, UMobileTimePicker, UNICEFStyleProvider, UNavbarCenter, UPageLoadingProgress, UPeoplePicker, UPositiveInteger, URadioButtons, USearchBox, USelectPicker, USideBar, UTextField, UTimePicker, UValidatorComponent, UValidatorForm, createUnicefMuiTheme, theme, unicefColors };
 //# sourceMappingURL=prod.js.map