@mui/utils 5.15.13 → 5.15.20

package/deepmerge/deepmerge.js

@@ -23,11 +23,9 @@ export default function deepmerge(target, source, options = {
   const output = options.clone ? _extends({}, target) : target;
   if (isPlainObject(target) && isPlainObject(source)) {
     Object.keys(source).forEach(key => {
+      if (isPlainObject(source[key]) &&
       // Avoid prototype pollution
-      if (key === '__proto__') {
-        return;
-      }
-      if (isPlainObject(source[key]) && key in target && isPlainObject(target[key])) {
+      Object.prototype.hasOwnProperty.call(target, key) && isPlainObject(target[key])) {
         // Since `output` is a clone of `target` and we have narrowed `target` in this block we can cast to the same type.
         output[key] = deepmerge(target[key], source[key], options);
       } else if (options.clone) {

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/utils v5.15.13
+ * @mui/utils v5.15.20
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/legacy/deepmerge/deepmerge.js

@@ -25,11 +25,9 @@ export default function deepmerge(target, source) {
   var output = options.clone ? _extends({}, target) : target;
   if (isPlainObject(target) && isPlainObject(source)) {
     Object.keys(source).forEach(function (key) {
+      if (isPlainObject(source[key]) &&
       // Avoid prototype pollution
-      if (key === '__proto__') {
-        return;
-      }
-      if (isPlainObject(source[key]) && key in target && isPlainObject(target[key])) {
+      Object.prototype.hasOwnProperty.call(target, key) && isPlainObject(target[key])) {
         // Since `output` is a clone of `target` and we have narrowed `target` in this block we can cast to the same type.
         output[key] = deepmerge(target[key], source[key], options);
       } else if (options.clone) {

package/legacy/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/utils v5.15.13
+ * @mui/utils v5.15.20
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/legacy/useControlled/useControlled.js

@@ -24,7 +24,7 @@ export default function useControlled(_ref) {
     var _React$useRef2 = React.useRef(defaultProp),
       defaultValue = _React$useRef2.current;
     React.useEffect(function () {
-      if (!isControlled && defaultValue !== defaultProp) {
+      if (!isControlled && !Object.is(defaultValue, defaultProp)) {
         console.error(["MUI: A component is changing the default ".concat(state, " state of an uncontrolled ").concat(name, " after being initialized. ") + "To suppress this warning opt to use a controlled ".concat(name, ".")].join('\n'));
       }
     }, [JSON.stringify(defaultProp)]);

package/legacy/useLocalStorageState/index.js

@@ -0,0 +1 @@
+export { default } from './useLocalStorageState';

package/legacy/useLocalStorageState/useLocalStorageState.js

@@ -0,0 +1,121 @@
+'use client';
+
+import * as React from 'react';
+
+// storage events only work across tabs, we'll use an event emitter to announce within the current tab
+var currentTabChangeListeners = new Map();
+function onCurrentTabStorageChange(key, handler) {
+  var listeners = currentTabChangeListeners.get(key);
+  if (!listeners) {
+    listeners = new Set();
+    currentTabChangeListeners.set(key, listeners);
+  }
+  listeners.add(handler);
+}
+function offCurrentTabStorageChange(key, handler) {
+  var listeners = currentTabChangeListeners.get(key);
+  if (!listeners) {
+    return;
+  }
+  listeners.delete(handler);
+  if (listeners.size === 0) {
+    currentTabChangeListeners.delete(key);
+  }
+}
+function emitCurrentTabStorageChange(key) {
+  var listeners = currentTabChangeListeners.get(key);
+  if (listeners) {
+    listeners.forEach(function (listener) {
+      return listener();
+    });
+  }
+}
+function subscribe(area, key, callbark) {
+  if (!key) {
+    return function () {};
+  }
+  var storageHandler = function storageHandler(event) {
+    if (event.storageArea === area && event.key === key) {
+      callbark();
+    }
+  };
+  window.addEventListener('storage', storageHandler);
+  onCurrentTabStorageChange(key, callbark);
+  return function () {
+    window.removeEventListener('storage', storageHandler);
+    offCurrentTabStorageChange(key, callbark);
+  };
+}
+function getSnapshot(area, key) {
+  if (!key) {
+    return null;
+  }
+  try {
+    return area.getItem(key);
+  } catch (_unused) {
+    // ignore
+    // See https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API#feature-detecting_localstorage
+    return null;
+  }
+}
+function setValue(area, key, value) {
+  if (!key) {
+    return;
+  }
+  try {
+    if (value === null) {
+      area.removeItem(key);
+    } else {
+      area.setItem(key, String(value));
+    }
+  } catch (_unused2) {
+    // ignore
+    // See https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API#feature-detecting_localstorage
+    return;
+  }
+  emitCurrentTabStorageChange(key);
+}
+var serverValue = [null, function () {}];
+function useLocalStorageStateServer() {
+  return serverValue;
+}
+
+/**
+ * Sync state to local storage so that it persists through a page refresh. Usage is
+ * similar to useState except we pass in a storage key so that we can default
+ * to that value on page load instead of the specified initial value.
+ *
+ * Since the storage API isn't available in server-rendering environments, we
+ * return null during SSR and hydration.
+ */
+function useLocalStorageStateBrowser(key) {
+  var initializer = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+  var _React$useState = React.useState(initializer),
+    initialValue = _React$useState[0];
+  var area = window.localStorage;
+  var subscribeKey = React.useCallback(function (callbark) {
+    return subscribe(area, key, callbark);
+  }, [area, key]);
+  var getKeySnapshot = React.useCallback(function () {
+    var _getSnapshot;
+    return (_getSnapshot = getSnapshot(area, key)) != null ? _getSnapshot : initialValue;
+  }, [area, initialValue, key]);
+
+  // Start with null for the hydration, and then switch to the actual value.
+  var getKeyServerSnapshot = function getKeyServerSnapshot() {
+    return null;
+  };
+  var storedValue = React.useSyncExternalStore(subscribeKey, getKeySnapshot, getKeyServerSnapshot);
+  var setStoredValue = React.useCallback(function (value) {
+    var valueToStore = value instanceof Function ? value(storedValue) : value;
+    setValue(area, key, valueToStore);
+  }, [area, key, storedValue]);
+  var _React$useState2 = React.useState(initialValue),
+    nonStoredValue = _React$useState2[0],
+    setNonStoredValue = _React$useState2[1];
+  if (!key) {
+    return [nonStoredValue, setNonStoredValue];
+  }
+  return [storedValue, setStoredValue];
+}
+export default typeof window === 'undefined' ? useLocalStorageStateServer : useLocalStorageStateBrowser;

package/modern/deepmerge/deepmerge.js

@@ -23,11 +23,9 @@ export default function deepmerge(target, source, options = {
   const output = options.clone ? _extends({}, target) : target;
   if (isPlainObject(target) && isPlainObject(source)) {
     Object.keys(source).forEach(key => {
+      if (isPlainObject(source[key]) &&
       // Avoid prototype pollution
-      if (key === '__proto__') {
-        return;
-      }
-      if (isPlainObject(source[key]) && key in target && isPlainObject(target[key])) {
+      Object.prototype.hasOwnProperty.call(target, key) && isPlainObject(target[key])) {
         // Since `output` is a clone of `target` and we have narrowed `target` in this block we can cast to the same type.
         output[key] = deepmerge(target[key], source[key], options);
       } else if (options.clone) {

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/utils v5.15.13
+ * @mui/utils v5.15.20
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/useControlled/useControlled.js

@@ -24,7 +24,7 @@ export default function useControlled({
       current: defaultValue
     } = React.useRef(defaultProp);
     React.useEffect(() => {
-      if (!isControlled && defaultValue !== defaultProp) {
+      if (!isControlled && !Object.is(defaultValue, defaultProp)) {
         console.error([`MUI: A component is changing the default ${state} state of an uncontrolled ${name} after being initialized. ` + `To suppress this warning opt to use a controlled ${name}.`].join('\n'));
       }
     }, [JSON.stringify(defaultProp)]);

package/modern/useLocalStorageState/index.js

@@ -0,0 +1 @@
+export { default } from './useLocalStorageState';

package/modern/useLocalStorageState/useLocalStorageState.js

@@ -0,0 +1,108 @@
+'use client';
+
+import * as React from 'react';
+
+// storage events only work across tabs, we'll use an event emitter to announce within the current tab
+const currentTabChangeListeners = new Map();
+function onCurrentTabStorageChange(key, handler) {
+  let listeners = currentTabChangeListeners.get(key);
+  if (!listeners) {
+    listeners = new Set();
+    currentTabChangeListeners.set(key, listeners);
+  }
+  listeners.add(handler);
+}
+function offCurrentTabStorageChange(key, handler) {
+  const listeners = currentTabChangeListeners.get(key);
+  if (!listeners) {
+    return;
+  }
+  listeners.delete(handler);
+  if (listeners.size === 0) {
+    currentTabChangeListeners.delete(key);
+  }
+}
+function emitCurrentTabStorageChange(key) {
+  const listeners = currentTabChangeListeners.get(key);
+  if (listeners) {
+    listeners.forEach(listener => listener());
+  }
+}
+function subscribe(area, key, callbark) {
+  if (!key) {
+    return () => {};
+  }
+  const storageHandler = event => {
+    if (event.storageArea === area && event.key === key) {
+      callbark();
+    }
+  };
+  window.addEventListener('storage', storageHandler);
+  onCurrentTabStorageChange(key, callbark);
+  return () => {
+    window.removeEventListener('storage', storageHandler);
+    offCurrentTabStorageChange(key, callbark);
+  };
+}
+function getSnapshot(area, key) {
+  if (!key) {
+    return null;
+  }
+  try {
+    return area.getItem(key);
+  } catch {
+    // ignore
+    // See https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API#feature-detecting_localstorage
+    return null;
+  }
+}
+function setValue(area, key, value) {
+  if (!key) {
+    return;
+  }
+  try {
+    if (value === null) {
+      area.removeItem(key);
+    } else {
+      area.setItem(key, String(value));
+    }
+  } catch {
+    // ignore
+    // See https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API#feature-detecting_localstorage
+    return;
+  }
+  emitCurrentTabStorageChange(key);
+}
+const serverValue = [null, () => {}];
+function useLocalStorageStateServer() {
+  return serverValue;
+}
+
+/**
+ * Sync state to local storage so that it persists through a page refresh. Usage is
+ * similar to useState except we pass in a storage key so that we can default
+ * to that value on page load instead of the specified initial value.
+ *
+ * Since the storage API isn't available in server-rendering environments, we
+ * return null during SSR and hydration.
+ */
+function useLocalStorageStateBrowser(key, initializer = null) {
+  const [initialValue] = React.useState(initializer);
+  const area = window.localStorage;
+  const subscribeKey = React.useCallback(callbark => subscribe(area, key, callbark), [area, key]);
+  const getKeySnapshot = React.useCallback(() => getSnapshot(area, key) ?? initialValue, [area, initialValue, key]);
+
+  // Start with null for the hydration, and then switch to the actual value.
+  const getKeyServerSnapshot = () => null;
+  const storedValue = React.useSyncExternalStore(subscribeKey, getKeySnapshot, getKeyServerSnapshot);
+  const setStoredValue = React.useCallback(value => {
+    const valueToStore = value instanceof Function ? value(storedValue) : value;
+    setValue(area, key, valueToStore);
+  }, [area, key, storedValue]);
+  const [nonStoredValue, setNonStoredValue] = React.useState(initialValue);
+  if (!key) {
+    return [nonStoredValue, setNonStoredValue];
+  }
+  return [storedValue, setStoredValue];
+}
+export default typeof window === 'undefined' ? useLocalStorageStateServer : useLocalStorageStateBrowser;

package/node/deepmerge/deepmerge.js

@@ -31,11 +31,9 @@ function deepmerge(target, source, options = {
   const output = options.clone ? (0, _extends2.default)({}, target) : target;
   if (isPlainObject(target) && isPlainObject(source)) {
     Object.keys(source).forEach(key => {
+      if (isPlainObject(source[key]) &&
       // Avoid prototype pollution
-      if (key === '__proto__') {
-        return;
-      }
-      if (isPlainObject(source[key]) && key in target && isPlainObject(target[key])) {
+      Object.prototype.hasOwnProperty.call(target, key) && isPlainObject(target[key])) {
         // Since `output` is a clone of `target` and we have narrowed `target` in this block we can cast to the same type.
         output[key] = deepmerge(target[key], source[key], options);
       } else if (options.clone) {

package/node/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/utils v5.15.13
+ * @mui/utils v5.15.20
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/node/useControlled/useControlled.js

@@ -31,7 +31,7 @@ function useControlled({
       current: defaultValue
     } = React.useRef(defaultProp);
     React.useEffect(() => {
-      if (!isControlled && defaultValue !== defaultProp) {
+      if (!isControlled && !Object.is(defaultValue, defaultProp)) {
         console.error([`MUI: A component is changing the default ${state} state of an uncontrolled ${name} after being initialized. ` + `To suppress this warning opt to use a controlled ${name}.`].join('\n'));
       }
     }, [JSON.stringify(defaultProp)]);

package/node/useLocalStorageState/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _useLocalStorageState.default;
+  }
+});
+var _useLocalStorageState = _interopRequireDefault(require("./useLocalStorageState"));

package/node/useLocalStorageState/useLocalStorageState.js

@@ -0,0 +1,117 @@
+"use strict";
+'use client';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+// storage events only work across tabs, we'll use an event emitter to announce within the current tab
+const currentTabChangeListeners = new Map();
+function onCurrentTabStorageChange(key, handler) {
+  let listeners = currentTabChangeListeners.get(key);
+  if (!listeners) {
+    listeners = new Set();
+    currentTabChangeListeners.set(key, listeners);
+  }
+  listeners.add(handler);
+}
+function offCurrentTabStorageChange(key, handler) {
+  const listeners = currentTabChangeListeners.get(key);
+  if (!listeners) {
+    return;
+  }
+  listeners.delete(handler);
+  if (listeners.size === 0) {
+    currentTabChangeListeners.delete(key);
+  }
+}
+function emitCurrentTabStorageChange(key) {
+  const listeners = currentTabChangeListeners.get(key);
+  if (listeners) {
+    listeners.forEach(listener => listener());
+  }
+}
+function subscribe(area, key, callbark) {
+  if (!key) {
+    return () => {};
+  }
+  const storageHandler = event => {
+    if (event.storageArea === area && event.key === key) {
+      callbark();
+    }
+  };
+  window.addEventListener('storage', storageHandler);
+  onCurrentTabStorageChange(key, callbark);
+  return () => {
+    window.removeEventListener('storage', storageHandler);
+    offCurrentTabStorageChange(key, callbark);
+  };
+}
+function getSnapshot(area, key) {
+  if (!key) {
+    return null;
+  }
+  try {
+    return area.getItem(key);
+  } catch {
+    // ignore
+    // See https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API#feature-detecting_localstorage
+    return null;
+  }
+}
+function setValue(area, key, value) {
+  if (!key) {
+    return;
+  }
+  try {
+    if (value === null) {
+      area.removeItem(key);
+    } else {
+      area.setItem(key, String(value));
+    }
+  } catch {
+    // ignore
+    // See https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API#feature-detecting_localstorage
+    return;
+  }
+  emitCurrentTabStorageChange(key);
+}
+const serverValue = [null, () => {}];
+function useLocalStorageStateServer() {
+  return serverValue;
+}
+
+/**
+ * Sync state to local storage so that it persists through a page refresh. Usage is
+ * similar to useState except we pass in a storage key so that we can default
+ * to that value on page load instead of the specified initial value.
+ *
+ * Since the storage API isn't available in server-rendering environments, we
+ * return null during SSR and hydration.
+ */
+function useLocalStorageStateBrowser(key, initializer = null) {
+  const [initialValue] = React.useState(initializer);
+  const area = window.localStorage;
+  const subscribeKey = React.useCallback(callbark => subscribe(area, key, callbark), [area, key]);
+  const getKeySnapshot = React.useCallback(() => {
+    var _getSnapshot;
+    return (_getSnapshot = getSnapshot(area, key)) != null ? _getSnapshot : initialValue;
+  }, [area, initialValue, key]);
+
+  // Start with null for the hydration, and then switch to the actual value.
+  const getKeyServerSnapshot = () => null;
+  const storedValue = React.useSyncExternalStore(subscribeKey, getKeySnapshot, getKeyServerSnapshot);
+  const setStoredValue = React.useCallback(value => {
+    const valueToStore = value instanceof Function ? value(storedValue) : value;
+    setValue(area, key, valueToStore);
+  }, [area, key, storedValue]);
+  const [nonStoredValue, setNonStoredValue] = React.useState(initialValue);
+  if (!key) {
+    return [nonStoredValue, setNonStoredValue];
+  }
+  return [storedValue, setStoredValue];
+}
+var _default = exports.default = typeof window === 'undefined' ? useLocalStorageStateServer : useLocalStorageStateBrowser;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/utils",
-  "version": "5.15.13",
+  "version": "5.15.20",
   "private": false,
   "author": "MUI Team",
   "description": "Utility functions for React components.",

package/useControlled/useControlled.js

@@ -24,7 +24,7 @@ export default function useControlled({
       current: defaultValue
     } = React.useRef(defaultProp);
     React.useEffect(() => {
-      if (!isControlled && defaultValue !== defaultProp) {
+      if (!isControlled && !Object.is(defaultValue, defaultProp)) {
         console.error([`MUI: A component is changing the default ${state} state of an uncontrolled ${name} after being initialized. ` + `To suppress this warning opt to use a controlled ${name}.`].join('\n'));
       }
     }, [JSON.stringify(defaultProp)]);

package/useLocalStorageState/index.d.ts

@@ -0,0 +1 @@
+export { default } from './useLocalStorageState';

package/useLocalStorageState/index.js

@@ -0,0 +1 @@
+export { default } from './useLocalStorageState';

package/useLocalStorageState/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../node/useLocalStorageState/index.js",
+  "types": "./index.d.ts"
+}

package/useLocalStorageState/useLocalStorageState.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+type Initializer = () => string | null;
+type UseStorageStateHookResult = [
+    string | null,
+    React.Dispatch<React.SetStateAction<string | null>>
+];
+/**
+ * Sync state to local storage so that it persists through a page refresh. Usage is
+ * similar to useState except we pass in a storage key so that we can default
+ * to that value on page load instead of the specified initial value.
+ *
+ * Since the storage API isn't available in server-rendering environments, we
+ * return null during SSR and hydration.
+ */
+declare function useLocalStorageStateBrowser(key: string | null, initializer?: string | null | Initializer): UseStorageStateHookResult;
+declare const _default: typeof useLocalStorageStateBrowser;
+export default _default;

package/useLocalStorageState/useLocalStorageState.js

@@ -0,0 +1,111 @@
+'use client';
+
+import * as React from 'react';
+
+// storage events only work across tabs, we'll use an event emitter to announce within the current tab
+const currentTabChangeListeners = new Map();
+function onCurrentTabStorageChange(key, handler) {
+  let listeners = currentTabChangeListeners.get(key);
+  if (!listeners) {
+    listeners = new Set();
+    currentTabChangeListeners.set(key, listeners);
+  }
+  listeners.add(handler);
+}
+function offCurrentTabStorageChange(key, handler) {
+  const listeners = currentTabChangeListeners.get(key);
+  if (!listeners) {
+    return;
+  }
+  listeners.delete(handler);
+  if (listeners.size === 0) {
+    currentTabChangeListeners.delete(key);
+  }
+}
+function emitCurrentTabStorageChange(key) {
+  const listeners = currentTabChangeListeners.get(key);
+  if (listeners) {
+    listeners.forEach(listener => listener());
+  }
+}
+function subscribe(area, key, callbark) {
+  if (!key) {
+    return () => {};
+  }
+  const storageHandler = event => {
+    if (event.storageArea === area && event.key === key) {
+      callbark();
+    }
+  };
+  window.addEventListener('storage', storageHandler);
+  onCurrentTabStorageChange(key, callbark);
+  return () => {
+    window.removeEventListener('storage', storageHandler);
+    offCurrentTabStorageChange(key, callbark);
+  };
+}
+function getSnapshot(area, key) {
+  if (!key) {
+    return null;
+  }
+  try {
+    return area.getItem(key);
+  } catch {
+    // ignore
+    // See https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API#feature-detecting_localstorage
+    return null;
+  }
+}
+function setValue(area, key, value) {
+  if (!key) {
+    return;
+  }
+  try {
+    if (value === null) {
+      area.removeItem(key);
+    } else {
+      area.setItem(key, String(value));
+    }
+  } catch {
+    // ignore
+    // See https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API#feature-detecting_localstorage
+    return;
+  }
+  emitCurrentTabStorageChange(key);
+}
+const serverValue = [null, () => {}];
+function useLocalStorageStateServer() {
+  return serverValue;
+}
+
+/**
+ * Sync state to local storage so that it persists through a page refresh. Usage is
+ * similar to useState except we pass in a storage key so that we can default
+ * to that value on page load instead of the specified initial value.
+ *
+ * Since the storage API isn't available in server-rendering environments, we
+ * return null during SSR and hydration.
+ */
+function useLocalStorageStateBrowser(key, initializer = null) {
+  const [initialValue] = React.useState(initializer);
+  const area = window.localStorage;
+  const subscribeKey = React.useCallback(callbark => subscribe(area, key, callbark), [area, key]);
+  const getKeySnapshot = React.useCallback(() => {
+    var _getSnapshot;
+    return (_getSnapshot = getSnapshot(area, key)) != null ? _getSnapshot : initialValue;
+  }, [area, initialValue, key]);
+
+  // Start with null for the hydration, and then switch to the actual value.
+  const getKeyServerSnapshot = () => null;
+  const storedValue = React.useSyncExternalStore(subscribeKey, getKeySnapshot, getKeyServerSnapshot);
+  const setStoredValue = React.useCallback(value => {
+    const valueToStore = value instanceof Function ? value(storedValue) : value;
+    setValue(area, key, valueToStore);
+  }, [area, key, storedValue]);
+  const [nonStoredValue, setNonStoredValue] = React.useState(initialValue);
+  if (!key) {
+    return [nonStoredValue, setNonStoredValue];
+  }
+  return [storedValue, setStoredValue];
+}
+export default typeof window === 'undefined' ? useLocalStorageStateServer : useLocalStorageStateBrowser;