@vidispine/vdt-mui 22.3.1-pre.1 → 22.4.0-pre.2

package/dist/index.es.js

@@ -3,7 +3,7 @@ import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
-import { Fragment, forwardRef, createElement, useMemo, createContext, useState, useCallback, useContext, useRef } from 'react';
+import { Fragment, forwardRef, createElement, useMemo, useState, useCallback, useEffect, useContext, createContext, useRef } from 'react';
 import clsx from 'clsx';
 import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import PropTypes from 'prop-types';
@@ -12,6 +12,7 @@ import VidispinePropTypes from '@vidispine/proptypes';
 import { parseMetadataType } from '@vidispine/vdt-js';
 import { Folder, NoteAdd, Audiotrack, Image, Movie, InsertDriveFile, LibraryBooks, LibraryMusic, VideoLibrary, PhotoLibrary, Delete } from '@mui/icons-material';
 import CssBaseline from '@mui/material/CssBaseline';
+import useMediaQuery from '@mui/material/useMediaQuery';
 
 var uuidv4 = function uuidv4() {
   return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, function (c) {
@@ -1472,7 +1473,7 @@ var Component$c = withStyles(styles$c, {
 })(ComponentWithOverrides$c);
 Component$c.displayName = 'EntityList';
 
-var _excluded$3 = ["themes", "defaultPaletteKey", "localStoragePaletteKey", "MuiThemeProviderProps", "CssBaselineProps", "children"];
+var _excluded$3 = ["themes", "defaultPaletteKey", "lightPaletteKey", "darkPaletteKey", "systemPaletteKey", "localStoragePaletteKey", "MuiThemeProviderProps", "CssBaselineProps", "children"];
 
 function ownKeys$f(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -1487,30 +1488,24 @@ var dark = createTheme({
     type: 'dark'
   }
 });
-var ThemeContext = /*#__PURE__*/createContext({
-  theme: undefined,
-  palette: undefined,
-  togglePalette: function togglePalette() {
-    return null;
-  }
-});
+var ThemeContext = /*#__PURE__*/createContext();
+
 function ThemeProvider(_ref) {
-  var _ref$themes = _ref.themes,
-      themes = _ref$themes === void 0 ? {
-    light: light,
-    dark: dark
-  } : _ref$themes,
-      _ref$defaultPaletteKe = _ref.defaultPaletteKey,
-      defaultPaletteKey = _ref$defaultPaletteKe === void 0 ? 'light' : _ref$defaultPaletteKe,
-      _ref$localStoragePale = _ref.localStoragePaletteKey,
-      localStoragePaletteKey = _ref$localStoragePale === void 0 ? 'DEFAULT_PALETTE' : _ref$localStoragePale,
-      _ref$MuiThemeProvider = _ref.MuiThemeProviderProps,
-      MuiThemeProviderProps = _ref$MuiThemeProvider === void 0 ? {} : _ref$MuiThemeProvider,
-      _ref$CssBaselineProps = _ref.CssBaselineProps,
-      CssBaselineProps = _ref$CssBaselineProps === void 0 ? {} : _ref$CssBaselineProps,
+  var themes = _ref.themes,
+      defaultPaletteKey = _ref.defaultPaletteKey,
+      lightPaletteKey = _ref.lightPaletteKey,
+      darkPaletteKey = _ref.darkPaletteKey,
+      systemPaletteKey = _ref.systemPaletteKey,
+      localStoragePaletteKey = _ref.localStoragePaletteKey,
+      MuiThemeProviderProps = _ref.MuiThemeProviderProps,
+      CssBaselineProps = _ref.CssBaselineProps,
       children = _ref.children,
       props = _objectWithoutProperties(_ref, _excluded$3);
 
+  var prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
+  var preferredMode = useMemo(function () {
+    return prefersDarkMode ? darkPaletteKey : lightPaletteKey;
+  }, [darkPaletteKey, lightPaletteKey, prefersDarkMode]);
   var initialPaletteKey = localStorage.getItem(localStoragePaletteKey) || defaultPaletteKey;
 
   var _useState = useState(initialPaletteKey),
@@ -1526,15 +1521,20 @@ function ThemeProvider(_ref) {
       setTheme = _useState4[1];
 
   var updatePalette = useCallback(function (newPaletteKey) {
-    if (!Object.keys(themes).includes(newPaletteKey)) {
-      throw new Error("Invalid theme (".concat(newPaletteKey, ") selected"));
+    var newPalette = newPaletteKey === systemPaletteKey ? preferredMode : newPaletteKey;
+
+    if (!Object.keys(themes).includes(newPalette)) {
+      throw new Error("Invalid theme (".concat(newPalette, ") selected"));
     }
 
-    var newTheme = themes[newPaletteKey];
+    var newTheme = themes[newPalette];
     setTheme(newTheme);
     setPalette(newPaletteKey);
     localStorage.setItem(localStoragePaletteKey, newPaletteKey);
-  }, [localStoragePaletteKey, themes]);
+  }, [localStoragePaletteKey, preferredMode, systemPaletteKey, themes]);
+  useEffect(function () {
+    if (palette === systemPaletteKey) updatePalette(systemPaletteKey); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [preferredMode]);
   var togglePalette = useCallback(function () {
     var paletteKeys = Object.keys(themes);
     var newPaletteKey = paletteKeys[0];
@@ -1568,7 +1568,8 @@ function ThemeProvider(_ref) {
     }))
   });
 }
-function useThemeContext() {
+
+var useThemeContext = function useThemeContext() {
   var context = useContext(ThemeContext);
 
   if (context === undefined) {
@@ -1576,7 +1577,33 @@ function useThemeContext() {
   }
 
   return context;
-}
+};
+
+ThemeProvider.propTypes = {
+  themes: PropTypes.objectOf(PropTypes.any),
+  defaultPaletteKey: PropTypes.string,
+  lightPaletteKey: PropTypes.string,
+  darkPaletteKey: PropTypes.string,
+  systemPaletteKey: PropTypes.string,
+  localStoragePaletteKey: PropTypes.string,
+  MuiThemeProviderProps: PropTypes.objectOf(PropTypes.any),
+  CssBaselineProps: PropTypes.objectOf(PropTypes.any),
+  children: PropTypes.objectOf(PropTypes.any)
+};
+ThemeProvider.defaultProps = {
+  themes: {
+    light: light,
+    dark: dark
+  },
+  defaultPaletteKey: 'system',
+  lightPaletteKey: 'light',
+  darkPaletteKey: 'dark',
+  systemPaletteKey: 'system',
+  localStoragePaletteKey: 'DEFAULT_PALETTE',
+  MuiThemeProviderProps: {},
+  CssBaselineProps: {},
+  children: null
+};
 
 function ownKeys$e(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -5246,4 +5273,4 @@ var Component = withStyles(styles, {
 })(ComponentWithOverrides);
 Component.displayName = 'NumberInput';
 
-export { Component$9 as CheckboxGroupInput, Component$3 as CheckboxInput, Component$e as CollectionList, Component$f as CollectionListItem, Component$2 as DateTimeInput, Component$g as EntityAvatar, Component$h as EntityIcon, Component$c as EntityList, Component$b as ImageCollage, Component$a as ItemList, Component$d as ItemListItem, Component$i as MediaIcon, Component as NumberInput, Component$5 as RadioGroupInput, Component$8 as SelectInput, Component$1 as SliderInput, Component$4 as SwitchInput, Component$6 as TagInput, Component$7 as TextInput, ThemeContext, ThemeProvider, useThemeContext };
+export { Component$9 as CheckboxGroupInput, Component$3 as CheckboxInput, Component$e as CollectionList, Component$f as CollectionListItem, Component$2 as DateTimeInput, Component$g as EntityAvatar, Component$h as EntityIcon, Component$c as EntityList, Component$b as ImageCollage, Component$a as ItemList, Component$d as ItemListItem, Component$i as MediaIcon, Component as NumberInput, Component$5 as RadioGroupInput, Component$8 as SelectInput, Component$1 as SliderInput, Component$4 as SwitchInput, Component$6 as TagInput, Component$7 as TextInput, ThemeProvider, useThemeContext };

package/dist/index.js

@@ -16,6 +16,7 @@ var VidispinePropTypes = require('@vidispine/proptypes');
 var vdtJs = require('@vidispine/vdt-js');
 var iconsMaterial = require('@mui/icons-material');
 var CssBaseline = require('@mui/material/CssBaseline');
+var useMediaQuery = require('@mui/material/useMediaQuery');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -27,6 +28,7 @@ var clsx__default = /*#__PURE__*/_interopDefaultLegacy(clsx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var VidispinePropTypes__default = /*#__PURE__*/_interopDefaultLegacy(VidispinePropTypes);
 var CssBaseline__default = /*#__PURE__*/_interopDefaultLegacy(CssBaseline);
+var useMediaQuery__default = /*#__PURE__*/_interopDefaultLegacy(useMediaQuery);
 
 var uuidv4 = function uuidv4() {
   return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, function (c) {
@@ -1487,7 +1489,7 @@ var Component$c = styles$j.withStyles(styles$c, {
 })(ComponentWithOverrides$c);
 Component$c.displayName = 'EntityList';
 
-var _excluded$3 = ["themes", "defaultPaletteKey", "localStoragePaletteKey", "MuiThemeProviderProps", "CssBaselineProps", "children"];
+var _excluded$3 = ["themes", "defaultPaletteKey", "lightPaletteKey", "darkPaletteKey", "systemPaletteKey", "localStoragePaletteKey", "MuiThemeProviderProps", "CssBaselineProps", "children"];
 
 function ownKeys$f(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -1502,30 +1504,24 @@ var dark = material.createTheme({
     type: 'dark'
   }
 });
-var ThemeContext = /*#__PURE__*/react.createContext({
-  theme: undefined,
-  palette: undefined,
-  togglePalette: function togglePalette() {
-    return null;
-  }
-});
+var ThemeContext = /*#__PURE__*/react.createContext();
+
 function ThemeProvider(_ref) {
-  var _ref$themes = _ref.themes,
-      themes = _ref$themes === void 0 ? {
-    light: light,
-    dark: dark
-  } : _ref$themes,
-      _ref$defaultPaletteKe = _ref.defaultPaletteKey,
-      defaultPaletteKey = _ref$defaultPaletteKe === void 0 ? 'light' : _ref$defaultPaletteKe,
-      _ref$localStoragePale = _ref.localStoragePaletteKey,
-      localStoragePaletteKey = _ref$localStoragePale === void 0 ? 'DEFAULT_PALETTE' : _ref$localStoragePale,
-      _ref$MuiThemeProvider = _ref.MuiThemeProviderProps,
-      MuiThemeProviderProps = _ref$MuiThemeProvider === void 0 ? {} : _ref$MuiThemeProvider,
-      _ref$CssBaselineProps = _ref.CssBaselineProps,
-      CssBaselineProps = _ref$CssBaselineProps === void 0 ? {} : _ref$CssBaselineProps,
+  var themes = _ref.themes,
+      defaultPaletteKey = _ref.defaultPaletteKey,
+      lightPaletteKey = _ref.lightPaletteKey,
+      darkPaletteKey = _ref.darkPaletteKey,
+      systemPaletteKey = _ref.systemPaletteKey,
+      localStoragePaletteKey = _ref.localStoragePaletteKey,
+      MuiThemeProviderProps = _ref.MuiThemeProviderProps,
+      CssBaselineProps = _ref.CssBaselineProps,
       children = _ref.children,
       props = _objectWithoutProperties__default["default"](_ref, _excluded$3);
 
+  var prefersDarkMode = useMediaQuery__default["default"]('(prefers-color-scheme: dark)');
+  var preferredMode = react.useMemo(function () {
+    return prefersDarkMode ? darkPaletteKey : lightPaletteKey;
+  }, [darkPaletteKey, lightPaletteKey, prefersDarkMode]);
   var initialPaletteKey = localStorage.getItem(localStoragePaletteKey) || defaultPaletteKey;
 
   var _useState = react.useState(initialPaletteKey),
@@ -1541,15 +1537,20 @@ function ThemeProvider(_ref) {
       setTheme = _useState4[1];
 
   var updatePalette = react.useCallback(function (newPaletteKey) {
-    if (!Object.keys(themes).includes(newPaletteKey)) {
-      throw new Error("Invalid theme (".concat(newPaletteKey, ") selected"));
+    var newPalette = newPaletteKey === systemPaletteKey ? preferredMode : newPaletteKey;
+
+    if (!Object.keys(themes).includes(newPalette)) {
+      throw new Error("Invalid theme (".concat(newPalette, ") selected"));
     }
 
-    var newTheme = themes[newPaletteKey];
+    var newTheme = themes[newPalette];
     setTheme(newTheme);
     setPalette(newPaletteKey);
     localStorage.setItem(localStoragePaletteKey, newPaletteKey);
-  }, [localStoragePaletteKey, themes]);
+  }, [localStoragePaletteKey, preferredMode, systemPaletteKey, themes]);
+  react.useEffect(function () {
+    if (palette === systemPaletteKey) updatePalette(systemPaletteKey); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [preferredMode]);
   var togglePalette = react.useCallback(function () {
     var paletteKeys = Object.keys(themes);
     var newPaletteKey = paletteKeys[0];
@@ -1583,7 +1584,8 @@ function ThemeProvider(_ref) {
     }))
   });
 }
-function useThemeContext() {
+
+var useThemeContext = function useThemeContext() {
   var context = react.useContext(ThemeContext);
 
   if (context === undefined) {
@@ -1591,7 +1593,33 @@ function useThemeContext() {
   }
 
   return context;
-}
+};
+
+ThemeProvider.propTypes = {
+  themes: PropTypes__default["default"].objectOf(PropTypes__default["default"].any),
+  defaultPaletteKey: PropTypes__default["default"].string,
+  lightPaletteKey: PropTypes__default["default"].string,
+  darkPaletteKey: PropTypes__default["default"].string,
+  systemPaletteKey: PropTypes__default["default"].string,
+  localStoragePaletteKey: PropTypes__default["default"].string,
+  MuiThemeProviderProps: PropTypes__default["default"].objectOf(PropTypes__default["default"].any),
+  CssBaselineProps: PropTypes__default["default"].objectOf(PropTypes__default["default"].any),
+  children: PropTypes__default["default"].objectOf(PropTypes__default["default"].any)
+};
+ThemeProvider.defaultProps = {
+  themes: {
+    light: light,
+    dark: dark
+  },
+  defaultPaletteKey: 'system',
+  lightPaletteKey: 'light',
+  darkPaletteKey: 'dark',
+  systemPaletteKey: 'system',
+  localStoragePaletteKey: 'DEFAULT_PALETTE',
+  MuiThemeProviderProps: {},
+  CssBaselineProps: {},
+  children: null
+};
 
 function ownKeys$e(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -5280,6 +5308,5 @@ exports.SliderInput = Component$1;
 exports.SwitchInput = Component$4;
 exports.TagInput = Component$6;
 exports.TextInput = Component$7;
-exports.ThemeContext = ThemeContext;
 exports.ThemeProvider = ThemeProvider;
 exports.useThemeContext = useThemeContext;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vidispine/vdt-mui",
-  "version": "22.3.1-pre.1",
+  "version": "22.4.0-pre.2",
   "license": "SEE LICENSE IN LICENSE.md",
   "publishConfig": {
     "access": "public"
@@ -29,11 +29,11 @@
     "@mui/lab": "^5.0.0-alpha.95",
     "@mui/material": "^5.10.1",
     "@mui/styles": "^5.9.3",
-    "@vidispine/proptypes": "22.3.1-pre.1",
-    "@vidispine/vdt-api": "22.3.1-pre.1",
-    "@vidispine/vdt-js": "22.3.1-pre.1",
-    "@vidispine/vdt-react": "22.3.1-pre.1",
-    "@vidispine/vdt-videojs-react": "22.3.1-pre.1",
+    "@vidispine/proptypes": "22.4.0-pre.2",
+    "@vidispine/vdt-api": "22.4.0-pre.2",
+    "@vidispine/vdt-js": "22.4.0-pre.2",
+    "@vidispine/vdt-react": "22.4.0-pre.2",
+    "@vidispine/vdt-videojs-react": "22.4.0-pre.2",
     "clsx": "^1.2.1",
     "prop-types": "^15.8.1"
   },
@@ -52,11 +52,11 @@
     "@svgr/rollup": "6.3.1",
     "@testing-library/jest-dom": "5.16.5",
     "@testing-library/react": "12.1.5",
-    "@vidispine/eslint-config-mdx": "22.3.1-pre.1",
-    "@vidispine/eslint-config-react": "22.3.1-pre.1",
-    "@vidispine/eslint-config-storybook": "22.3.1-pre.1",
-    "@vidispine/prettier-config": "22.3.1-pre.1",
-    "@vidispine/vdt-storybook": "22.3.1-pre.1",
+    "@vidispine/eslint-config-mdx": "22.4.0-pre.2",
+    "@vidispine/eslint-config-react": "22.4.0-pre.2",
+    "@vidispine/eslint-config-storybook": "22.4.0-pre.2",
+    "@vidispine/prettier-config": "22.4.0-pre.2",
+    "@vidispine/vdt-storybook": "22.4.0-pre.2",
     "eslint": "8.23.1",
     "hygen": "6.2.11",
     "prettier": "2.7.1",