@dnb/eufemia 9.33.0 → 9.34.1

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to @dnb/eufemia will be documented in this file. See
 [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [9.34.1](https://github.com/dnbexperience/eufemia/compare/v9.34.0...v9.34.1) (2022-10-24)
+
+
+### Bug Fixes
+
+* **Breadcrumb:** support null as children ([#1661](https://github.com/dnbexperience/eufemia/issues/1661)) ([c459ca1](https://github.com/dnbexperience/eufemia/commit/c459ca1f6e48ecd06ae2899ecf50c8b7c90497b4))
+
+# [9.34.0](https://github.com/dnbexperience/eufemia/compare/v9.33.0...v9.34.0) (2022-10-24)
+
+
+### Bug Fixes
+
+* **Upload:** make import paths valid in released version ([#1659](https://github.com/dnbexperience/eufemia/issues/1659)) ([4eb622a](https://github.com/dnbexperience/eufemia/commit/4eb622a01bf4c8727057e84af380033c332fc480))
+
+
+### Features
+
+* **useMedia:** add React Hook to handle Eufemia layout breakpoints ([#1650](https://github.com/dnbexperience/eufemia/issues/1650)) ([d41f7dd](https://github.com/dnbexperience/eufemia/commit/d41f7dda7a6c803a6578b5021a405141608f39e8))
+
 # [9.33.0](https://github.com/dnbexperience/eufemia/compare/v9.32.1...v9.33.0) (2022-10-23)
 
 

package/cjs/components/breadcrumb/BreadcrumbMultiple.js

@@ -9,6 +9,10 @@ exports.BreadcrumbMultiple = void 0;
 
 require("core-js/modules/es.array.map.js");
 
+require("core-js/modules/es.array.filter.js");
+
+require("core-js/modules/es.object.to-string.js");
+
 var _react = _interopRequireDefault(require("react"));
 
 var _HeightAnimation = _interopRequireDefault(require("../height-animation/HeightAnimation"));
@@ -41,7 +45,9 @@ var BreadcrumbMultiple = function BreadcrumbMultiple(_ref) {
       variant: i == 0 && 'home' || i == data.length - 1 && 'current' || null,
       itemNr: i
     }, breadcrumbItem));
-  }), items === null || items === void 0 ? void 0 : items.map(function (item, i) {
+  }), items === null || items === void 0 ? void 0 : items.filter(function (item) {
+    return _react.default.isValidElement(item);
+  }).map(function (item, i) {
     return _react.default.cloneElement(item, {
       key: i,
       itemNr: i

package/cjs/components/upload/UploadFileListCell.js

@@ -45,7 +45,7 @@ var _FormStatus2 = _interopRequireDefault(require("../../components/FormStatus")
 
 var _progressIndicator = _interopRequireDefault(require("../../components/progress-indicator"));
 
-var _P = _interopRequireDefault(require("../../../src/elements/P"));
+var _P = _interopRequireDefault(require("../../elements/P"));
 
 var _icons = require("../../icons");
 

package/cjs/components/upload/useUpload.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _componentHelper = require("../../../src/shared/component-helper");
+var _componentHelper = require("../../shared/component-helper");
 
 function useUpload(id) {
   var _useEventEmitter = (0, _componentHelper.useEventEmitter)(id),

package/cjs/shared/Eufemia.js

@@ -21,7 +21,7 @@ function init() {
       _createClass(Eufemia, [{
         key: "version",
         get: function get() {
-          return '9.33.0';
+          return '9.34.1';
         }
       }]);
 

package/cjs/shared/MediaQuery.d.ts

@@ -1,16 +1,18 @@
 import React from 'react';
+import { ContextProps } from './Context';
 import { onMediaQueryChange } from './MediaQueryUtils';
 import type { MediaQueryProps, MediaQueryState, MediaQueryListener } from './MediaQueryUtils';
 export type { MediaQueryProps };
 export { onMediaQueryChange };
 export default class MediaQuery extends React.PureComponent<MediaQueryProps, MediaQueryState> {
-    static contextType: React.Context<import("./Context").ContextProps>;
+    static contextType: React.Context<ContextProps>;
     listener: MediaQueryListener;
+    context: ContextProps;
     state: {
         match: any;
         mediaQueryList: any;
     };
-    constructor(props: any, context: any);
+    constructor(props: MediaQueryProps, context: ContextProps);
     componentDidMount(): void;
     componentWillUnmount(): void;
     componentDidUpdate(props: any): void;

package/cjs/shared/MediaQuery.js

@@ -81,6 +81,8 @@ var MediaQuery = function (_React$PureComponent) {
 
     _defineProperty(_assertThisInitialized(_this), "listener", void 0);
 
+    _defineProperty(_assertThisInitialized(_this), "context", void 0);
+
     _defineProperty(_assertThisInitialized(_this), "state", {
       match: null,
       mediaQueryList: null

package/cjs/shared/MediaQueryUtils.d.ts

@@ -32,6 +32,10 @@ export declare type MediaQueryProperties = {
      * If set to true, no MediaQuery will be used.
      */
     disabled?: boolean;
+    /**
+     * If set to true, no Eufemia warning will be shown when window.matchMedia is undefined
+     */
+    dismissWarning?: boolean;
     /**
      * For debugging
      */
@@ -80,7 +84,7 @@ export declare const isMatchMediaSupported: () => boolean;
  * @property {boolean} log - print used query to console
  * @returns MediaQueryList type
  */
-export declare function makeMediaQueryList({ query, when, not, log, disabled, }?: MediaQueryProperties, breakpoints?: MediaQueryBreakpoints): MediaQueryList;
+export declare function makeMediaQueryList({ query, when, not, log, disabled, dismissWarning, }?: MediaQueryProperties, breakpoints?: MediaQueryBreakpoints): MediaQueryList;
 /**
  * Adds a listener to the window.matchMedia Browser API
  *
@@ -88,7 +92,7 @@ export declare function makeMediaQueryList({ query, when, not, log, disabled, }?
  * @param {function} callback callback function
  * @returns function to remove listeners when called
  */
-export declare function createMediaQueryListener(mediaQueryList: MediaQueryList, callback: (matches: boolean, event: any) => void): MediaQueryListener;
+export declare function createMediaQueryListener(mediaQueryList: MediaQueryList, callback: (matches: boolean, event: Partial<MediaQueryListEvent>) => void): MediaQueryListener;
 /**
  * Builds a valid media query we can use on window.matchMedia(...)
  *

package/cjs/shared/MediaQueryUtils.js

@@ -136,11 +136,18 @@ function makeMediaQueryList() {
       _ref2$log = _ref2.log,
       log = _ref2$log === void 0 ? false : _ref2$log,
       _ref2$disabled = _ref2.disabled,
-      disabled = _ref2$disabled === void 0 ? false : _ref2$disabled;
+      disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
+      _ref2$dismissWarning = _ref2.dismissWarning,
+      dismissWarning = _ref2$dismissWarning === void 0 ? false : _ref2$dismissWarning;
 
   var breakpoints = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+  var isSupported = isMatchMediaSupported();
+
+  if (disabled || !isSupported) {
+    if (!dismissWarning && !isSupported) {
+      (0, _helpers.warn)('window.matchMedia is "undefined"');
+    }
 
-  if (disabled || !isMatchMediaSupported()) {
     return null;
   }
 
@@ -156,7 +163,7 @@ function makeMediaQueryList() {
   var mediaQueryList = window.matchMedia(mediaQueryString);
 
   if (log) {
-    console.log('MediaQuery:', mediaQueryString);
+    (0, _helpers.warn)('MediaQuery:', mediaQueryString);
   }
 
   return mediaQueryList;
@@ -164,7 +171,6 @@ function makeMediaQueryList() {
 
 function createMediaQueryListener(mediaQueryList, callback) {
   if (!mediaQueryList) {
-    (0, _componentHelper.warn)('Invalid MediaQueryList was given');
     return function () {
       return null;
     };

package/cjs/shared/index.d.ts

@@ -3,4 +3,5 @@ import Context from "./Context";
 import Provider from "./Provider";
 import MediaQuery from "./MediaQuery";
 import useMediaQuery from "./useMediaQuery";
-export { Context, Provider, MediaQuery, useMediaQuery };
+import useMedia from "./useMedia";
+export { Context, Provider, MediaQuery, useMediaQuery, useMedia };

package/cjs/shared/index.js

@@ -13,7 +13,8 @@ var _exportNames = {
   Context: true,
   Provider: true,
   MediaQuery: true,
-  useMediaQuery: true
+  useMediaQuery: true,
+  useMedia: true
 };
 Object.defineProperty(exports, "Context", {
   enumerable: true,
@@ -33,6 +34,12 @@ Object.defineProperty(exports, "Provider", {
     return _Provider.default;
   }
 });
+Object.defineProperty(exports, "useMedia", {
+  enumerable: true,
+  get: function get() {
+    return _useMedia.default;
+  }
+});
 Object.defineProperty(exports, "useMediaQuery", {
   enumerable: true,
   get: function get() {
@@ -48,6 +55,8 @@ var _MediaQuery = _interopRequireDefault(require("./MediaQuery"));
 
 var _useMediaQuery = _interopRequireDefault(require("./useMediaQuery"));
 
+var _useMedia = _interopRequireDefault(require("./useMedia"));
+
 var _SpacingHelper = require("./SpacingHelper");
 
 Object.keys(_SpacingHelper).forEach(function (key) {

package/cjs/shared/useMedia.d.ts

@@ -0,0 +1,25 @@
+import { MediaQueryCondition } from './MediaQueryUtils';
+export declare type UseMediaProps = {
+    /**
+     * If set to true, no MediaQuery will be used.
+     * Default: false
+     */
+    disabled?: boolean;
+    /**
+     * For debugging
+     */
+    log?: boolean;
+};
+export declare type UseMediaQueries = {
+    small: MediaQueryCondition;
+    medium: MediaQueryCondition;
+    large: MediaQueryCondition;
+};
+export declare const queries: UseMediaQueries;
+export declare type UseMediaResult = {
+    isSmall: boolean;
+    isMedium: boolean;
+    isLarge: boolean;
+    isSSR: boolean;
+};
+export default function useMedia(props?: UseMediaProps): UseMediaResult;

package/cjs/shared/useMedia.js

@@ -0,0 +1,185 @@
+"use strict";
+
+require("core-js/modules/es.symbol.js");
+
+require("core-js/modules/es.symbol.description.js");
+
+require("core-js/modules/es.symbol.iterator.js");
+
+require("core-js/modules/es.array.iterator.js");
+
+require("core-js/modules/es.string.iterator.js");
+
+require("core-js/modules/web.dom-collections.iterator.js");
+
+require("core-js/modules/es.array.slice.js");
+
+require("core-js/modules/es.array.from.js");
+
+require("core-js/modules/es.regexp.exec.js");
+
+require("core-js/modules/es.object.keys.js");
+
+require("core-js/modules/es.array.filter.js");
+
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+
+require("core-js/modules/es.object.get-own-property-descriptors.js");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useMedia;
+exports.queries = void 0;
+
+require("core-js/modules/es.array.reduce.js");
+
+require("core-js/modules/es.object.to-string.js");
+
+require("core-js/modules/es.object.entries.js");
+
+require("core-js/modules/es.function.name.js");
+
+require("core-js/modules/web.dom-collections.for-each.js");
+
+require("core-js/modules/es.object.values.js");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Context = _interopRequireDefault(require("./Context"));
+
+var _MediaQueryUtils = require("./MediaQueryUtils");
+
+var _componentHelper = require("./component-helper");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+var queries = {
+  small: {
+    min: 0,
+    max: 'small'
+  },
+  medium: {
+    min: 'small',
+    max: 'medium'
+  },
+  large: {
+    min: 'medium'
+  }
+};
+exports.queries = queries;
+
+function useMedia() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var disabled = props.disabled,
+      log = props.log;
+
+  var makeResult = function makeResult() {
+    return Object.entries(queries).reduce(function (acc, _ref) {
+      var _item$mediaQueryList;
+
+      var _ref2 = _slicedToArray(_ref, 2),
+          key = _ref2[0],
+          when = _ref2[1];
+
+      var name = "is".concat((0, _componentHelper.toPascalCase)(key));
+
+      if (disabled) {
+        acc[name] = false;
+        return acc;
+      }
+
+      defaults.current[name] = false;
+      var item = runQuery({
+        name: name,
+        when: when
+      });
+      acc[name] = (item === null || item === void 0 ? void 0 : (_item$mediaQueryList = item.mediaQueryList) === null || _item$mediaQueryList === void 0 ? void 0 : _item$mediaQueryList.matches) || false;
+      refs.current[key] = item;
+      return acc;
+    }, {
+      isSSR: !(0, _MediaQueryUtils.isMatchMediaSupported)()
+    });
+  };
+
+  var runQuery = function runQuery(_ref3) {
+    var when = _ref3.when,
+        name = _ref3.name;
+
+    if (!(0, _MediaQueryUtils.isMatchMediaSupported)()) {
+      return;
+    }
+
+    var mediaQueryList = (0, _MediaQueryUtils.makeMediaQueryList)({
+      when: when,
+      disabled: disabled,
+      log: log,
+      dismissWarning: true
+    }, context.breakpoints);
+    var event = (0, _MediaQueryUtils.createMediaQueryListener)(mediaQueryList, function (match) {
+      if (!disabledRef.current && match) {
+        var state = _objectSpread(_objectSpread({}, defaults.current), {}, {
+          isSSR: result.isSSR
+        });
+
+        state[name] = match;
+        updateRerender(state);
+      }
+    });
+    return {
+      event: event,
+      mediaQueryList: mediaQueryList
+    };
+  };
+
+  _react.default.useEffect(function () {
+    if (disabledRef.current && !disabled) {
+      updateRerender(makeResult());
+    }
+
+    disabledRef.current = disabled;
+  }, [disabled]);
+
+  _react.default.useEffect(function () {
+    return removeListeners;
+  }, []);
+
+  var context = _react.default.useContext(_Context.default);
+
+  var refs = _react.default.useRef({});
+
+  var defaults = _react.default.useRef({});
+
+  var disabledRef = _react.default.useRef(disabled);
+
+  var _React$useState = _react.default.useState(makeResult),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      result = _React$useState2[0],
+      updateRerender = _React$useState2[1];
+
+  var removeListeners = function removeListeners() {
+    Object.values(refs.current).forEach(function (item) {
+      return (item === null || item === void 0 ? void 0 : item.event) && item.event();
+    });
+  };
+
+  return result;
+}

package/components/breadcrumb/BreadcrumbMultiple.js

@@ -1,5 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import "core-js/modules/es.array.map.js";
+import "core-js/modules/es.array.filter.js";
+import "core-js/modules/es.object.to-string.js";
 import React from 'react';
 import HeightAnimation from '../height-animation/HeightAnimation';
 import Section from '../section/Section';
@@ -24,7 +26,9 @@ export var BreadcrumbMultiple = function BreadcrumbMultiple(_ref) {
       variant: i == 0 && 'home' || i == data.length - 1 && 'current' || null,
       itemNr: i
     }, breadcrumbItem));
-  }), items === null || items === void 0 ? void 0 : items.map(function (item, i) {
+  }), items === null || items === void 0 ? void 0 : items.filter(function (item) {
+    return React.isValidElement(item);
+  }).map(function (item, i) {
     return React.cloneElement(item, {
       key: i,
       itemNr: i

package/components/upload/UploadFileListCell.js

@@ -14,7 +14,7 @@ import Button from '../button/Button';
 import Icon from '../../components/Icon';
 import FormStatus from '../../components/FormStatus';
 import ProgressIndicator from '../../components/progress-indicator';
-import P from '../../../src/elements/P';
+import P from '../../elements/P';
 import { trash as TrashIcon, exclamation_medium as ExclamationIcon, file_pdf_medium as pdf, file_xls_medium as xls, file_ppt_medium as ppt, file_csv_medium as csv, file_txt_medium as txt, file_xml_medium as xml, file_medium as file } from '../../icons';
 import { getPreviousSibling, warn } from '../../shared/component-helper';
 var images = {

package/components/upload/useUpload.js

@@ -1,4 +1,4 @@
-import { useEventEmitter } from '../../../src/shared/component-helper';
+import { useEventEmitter } from '../../shared/component-helper';
 
 function useUpload(id) {
   var _useEventEmitter = useEventEmitter(id),

package/es/components/breadcrumb/BreadcrumbMultiple.js

@@ -24,7 +24,7 @@ export const BreadcrumbMultiple = ({
       variant: i == 0 && 'home' || i == data.length - 1 && 'current' || null,
       itemNr: i
     }, breadcrumbItem));
-  }), items === null || items === void 0 ? void 0 : items.map((item, i) => React.cloneElement(item, {
+  }), items === null || items === void 0 ? void 0 : items.filter(item => React.isValidElement(item)).map((item, i) => React.cloneElement(item, {
     key: i,
     itemNr: i
   }))));

package/es/components/upload/UploadFileListCell.js

@@ -5,7 +5,7 @@ import Button from '../button/Button';
 import Icon from '../../components/Icon';
 import FormStatus from '../../components/FormStatus';
 import ProgressIndicator from '../../components/progress-indicator';
-import P from '../../../src/elements/P';
+import P from '../../elements/P';
 import { trash as TrashIcon, exclamation_medium as ExclamationIcon, file_pdf_medium as pdf, file_xls_medium as xls, file_ppt_medium as ppt, file_csv_medium as csv, file_txt_medium as txt, file_xml_medium as xml, file_medium as file } from '../../icons';
 import { getPreviousSibling, warn } from '../../shared/component-helper';
 const images = {

package/es/components/upload/useUpload.js

@@ -1,4 +1,4 @@
-import { useEventEmitter } from '../../../src/shared/component-helper';
+import { useEventEmitter } from '../../shared/component-helper';
 
 function useUpload(id) {
   const {

package/es/shared/Eufemia.js

@@ -2,7 +2,7 @@ export function init() {
   if (typeof window !== 'undefined') {
     class Eufemia {
       get version() {
-        return '9.33.0';
+        return '9.34.1';
       }
 
     }

package/es/shared/MediaQuery.d.ts

@@ -1,16 +1,18 @@
 import React from 'react';
+import { ContextProps } from './Context';
 import { onMediaQueryChange } from './MediaQueryUtils';
 import type { MediaQueryProps, MediaQueryState, MediaQueryListener } from './MediaQueryUtils';
 export type { MediaQueryProps };
 export { onMediaQueryChange };
 export default class MediaQuery extends React.PureComponent<MediaQueryProps, MediaQueryState> {
-    static contextType: React.Context<import("./Context").ContextProps>;
+    static contextType: React.Context<ContextProps>;
     listener: MediaQueryListener;
+    context: ContextProps;
     state: {
         match: any;
         mediaQueryList: any;
     };
-    constructor(props: any, context: any);
+    constructor(props: MediaQueryProps, context: ContextProps);
     componentDidMount(): void;
     componentWillUnmount(): void;
     componentDidUpdate(props: any): void;

package/es/shared/MediaQuery.js

@@ -10,6 +10,8 @@ export default class MediaQuery extends React.PureComponent {
 
     _defineProperty(this, "listener", void 0);
 
+    _defineProperty(this, "context", void 0);
+
     _defineProperty(this, "state", {
       match: null,
       mediaQueryList: null

package/es/shared/MediaQueryUtils.d.ts

@@ -32,6 +32,10 @@ export declare type MediaQueryProperties = {
      * If set to true, no MediaQuery will be used.
      */
     disabled?: boolean;
+    /**
+     * If set to true, no Eufemia warning will be shown when window.matchMedia is undefined
+     */
+    dismissWarning?: boolean;
     /**
      * For debugging
      */
@@ -80,7 +84,7 @@ export declare const isMatchMediaSupported: () => boolean;
  * @property {boolean} log - print used query to console
  * @returns MediaQueryList type
  */
-export declare function makeMediaQueryList({ query, when, not, log, disabled, }?: MediaQueryProperties, breakpoints?: MediaQueryBreakpoints): MediaQueryList;
+export declare function makeMediaQueryList({ query, when, not, log, disabled, dismissWarning, }?: MediaQueryProperties, breakpoints?: MediaQueryBreakpoints): MediaQueryList;
 /**
  * Adds a listener to the window.matchMedia Browser API
  *
@@ -88,7 +92,7 @@ export declare function makeMediaQueryList({ query, when, not, log, disabled, }?
  * @param {function} callback callback function
  * @returns function to remove listeners when called
  */
-export declare function createMediaQueryListener(mediaQueryList: MediaQueryList, callback: (matches: boolean, event: any) => void): MediaQueryListener;
+export declare function createMediaQueryListener(mediaQueryList: MediaQueryList, callback: (matches: boolean, event: Partial<MediaQueryListEvent>) => void): MediaQueryListener;
 /**
  * Builds a valid media query we can use on window.matchMedia(...)
  *

package/es/shared/MediaQueryUtils.js

@@ -4,8 +4,8 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-import { isTrue, toKebabCase, warn } from './component-helper';
-import { IS_IE11 } from './helpers';
+import { isTrue, toKebabCase } from './component-helper';
+import { IS_IE11, warn } from './helpers';
 export const defaultBreakpoints = {
   small: '40em',
   medium: '50em',
@@ -46,9 +46,16 @@ export function makeMediaQueryList({
   when,
   not = null,
   log = false,
-  disabled = false
+  disabled = false,
+  dismissWarning = false
 } = {}, breakpoints = null) {
-  if (disabled || !isMatchMediaSupported()) {
+  const isSupported = isMatchMediaSupported();
+
+  if (disabled || !isSupported) {
+    if (!dismissWarning && !isSupported) {
+      warn('window.matchMedia is "undefined"');
+    }
+
     return null;
   }
 
@@ -64,14 +71,13 @@ export function makeMediaQueryList({
   const mediaQueryList = window.matchMedia(mediaQueryString);
 
   if (log) {
-    console.log('MediaQuery:', mediaQueryString);
+    warn('MediaQuery:', mediaQueryString);
   }
 
   return mediaQueryList;
 }
 export function createMediaQueryListener(mediaQueryList, callback) {
   if (!mediaQueryList) {
-    warn('Invalid MediaQueryList was given');
     return () => null;
   }
 

package/es/shared/index.d.ts

@@ -3,4 +3,5 @@ import Context from "./Context";
 import Provider from "./Provider";
 import MediaQuery from "./MediaQuery";
 import useMediaQuery from "./useMediaQuery";
-export { Context, Provider, MediaQuery, useMediaQuery };
+import useMedia from "./useMedia";
+export { Context, Provider, MediaQuery, useMediaQuery, useMedia };

package/es/shared/index.js

@@ -2,5 +2,6 @@ import Context from './Context';
 import Provider from './Provider';
 import MediaQuery from './MediaQuery';
 import useMediaQuery from './useMediaQuery';
+import useMedia from './useMedia';
 export * from './SpacingHelper';
-export { Context, Provider, MediaQuery, useMediaQuery };
+export { Context, Provider, MediaQuery, useMediaQuery, useMedia };

package/es/shared/useMedia.d.ts

@@ -0,0 +1,25 @@
+import { MediaQueryCondition } from './MediaQueryUtils';
+export declare type UseMediaProps = {
+    /**
+     * If set to true, no MediaQuery will be used.
+     * Default: false
+     */
+    disabled?: boolean;
+    /**
+     * For debugging
+     */
+    log?: boolean;
+};
+export declare type UseMediaQueries = {
+    small: MediaQueryCondition;
+    medium: MediaQueryCondition;
+    large: MediaQueryCondition;
+};
+export declare const queries: UseMediaQueries;
+export declare type UseMediaResult = {
+    isSmall: boolean;
+    isMedium: boolean;
+    isLarge: boolean;
+    isSSR: boolean;
+};
+export default function useMedia(props?: UseMediaProps): UseMediaResult;