@skbkontur/react-ui 0.0.0-2eafa74fd6 → 0.0.0-301cfd6872

package/components/ResponsiveLayout/ResponsiveLayout.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import type { EmptyObject, MediaQueriesType, ResponsiveLayoutFlags } from './types';
+interface ResponsiveLayoutProps<T extends MediaQueriesType = EmptyObject> {
+    /** Задает функцию, которая вызывается при изменении лейаута. */
+    onLayoutChange?: (layout: ResponsiveLayoutFlags<T>) => void;
+    /** @ignore */
+    children?: React.ReactNode | ((currentLayout: ResponsiveLayoutFlags<T>) => React.ReactNode);
+    /** Позволяет кастомизировать возвращаемые флаги. */
+    customMediaQueries?: T;
+}
+/**
+ * Компонент `ResponsiveLayout` для определения текущего лэйаута.
+ */
+export declare function ResponsiveLayout<T extends MediaQueriesType = EmptyObject>(props: ResponsiveLayoutProps<T>): React.JSX.Element;
+export declare namespace ResponsiveLayout {
+    var __KONTUR_REACT_UI__: string;
+    var displayName: string;
+}
+export {};

package/components/ResponsiveLayout/ResponsiveLayout.md

@@ -0,0 +1,75 @@
+### Вспомогательный интерфейс
+```ts static
+interface ResponsiveLayoutFlags {
+  isMobile: boolean;
+}
+```
+
+### Компонент ожидает в себя функцию, в которую аргументом передается объект с флагом лэйаута.
+
+```jsx static
+import { ResponsiveLayout } from '@skbkontur/react-ui';
+
+class SomeComponent {
+  public render() {
+    return (
+      <ResponsiveLayout>
+        {
+          ({ isMobile }) => {
+            /* ... */
+          }
+        }
+      </ResponsiveLayout>
+    )
+  }
+}
+```
+
+### Также существует проп `onLayoutChange`, который вызывает переданный в него коллбэк при изменении лэйаута. Аргументом передается объект с флагом.
+
+```jsx static
+import { ResponsiveLayout } from '@skbkontur/react-ui';
+
+class SomeComponent {
+  public render() {
+    return (
+      <div>
+        <ResponsiveLayout onLayoutChange={({ isMobile }) => console.log(isMobile)} />
+      </div>
+    )
+  }
+}
+```
+
+### В компонент можно передать проп `customMediaQueries: MediaQueriesType`, который позволяет кастомизировать возвращаемые флаги:
+```ts static
+type MediaQueriesType = Record<string, string>;
+```
+1. Без кастомизации есть только флаг isMobile
+2. Поля из `customMediaQueries` дополняют список возвращаемых флагов в `ResponsiveLayoutFlags`
+3. При добавлении кастомного флага isMobile, значение дефолтного флага перезаписывается в пользу кастомного
+
+```jsx static
+import { ResponsiveLayout } from '@skbkontur/react-ui';
+
+const customMediaQueries = {
+  isTablet: '(min-width: 577px)',
+  isDesktop: '(min-width: 1280px)',
+};
+
+class SomeComponent {
+  public render() {
+    return (
+      <ResponsiveLayout customMediaQueries={customMediaQueries}>
+        {
+          ({ isMobile, isTablet, isDesktop }) => {
+            /* ... */
+          }
+        }
+      </ResponsiveLayout>
+    )
+  }
+}
+```
+
+Как альтернативу можно использовать хук [useResponsiveLayout](#/Mobiles).

package/components/ResponsiveLayout/ResponsiveLayoutEvents/ResponsiveLayoutEvents.js

@@ -0,0 +1,80 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { globalObject } from '@skbkontur/global-object';
+export var eventListenersMap = new Map();
+export function addResponsiveLayoutListener(mediaQuery, callback) {
+  if (eventListenersMap.has(mediaQuery)) {
+    addCallbackToMQListener(mediaQuery, callback);
+  } else {
+    createMQListener(mediaQuery, callback);
+  }
+  return {
+    remove: function remove() {
+      removeCallbackFromMQListener(mediaQuery, callback);
+    }
+  };
+}
+function addCallbackToMQListener(mediaQuery, callback) {
+  var eventListener = eventListenersMap.get(mediaQuery);
+  if (eventListener) {
+    eventListenersMap.set(mediaQuery, _extends({}, eventListener, {
+      listeners: [].concat(eventListener.listeners, [callback])
+    }));
+  }
+}
+function createMQListener(mediaQuery, callback) {
+  var mql = globalObject.matchMedia == null ? void 0 : globalObject.matchMedia(mediaQuery);
+  if (mql) {
+    var newMediaQueryInfo = {
+      mql: mql,
+      listeners: [callback]
+    };
+    eventListenersMap.set(mediaQuery, newMediaQueryInfo);
+    if (mql.addEventListener) {
+      mql.addEventListener('change', changeCallback);
+    } else {
+      mql.addListener(changeCallback);
+    }
+  }
+}
+function removeCallbackFromMQListener(mediaQuery, callback) {
+  if (eventListenersMap.has(mediaQuery)) {
+    var eventListener = eventListenersMap.get(mediaQuery);
+    if (eventListener) {
+      var newListeners = eventListener.listeners.filter(function (listener) {
+        return listener !== callback;
+      });
+      if (newListeners.length === 0) {
+        if (eventListener.mql.removeEventListener) {
+          eventListener.mql.removeEventListener('change', changeCallback);
+        } else {
+          eventListener.mql.removeListener(changeCallback);
+        }
+        eventListenersMap["delete"](mediaQuery);
+        return;
+      }
+      eventListenersMap.set(mediaQuery, _extends({}, eventListener, {
+        listeners: [].concat(newListeners)
+      }));
+    }
+  }
+}
+export function checkMatches(mediaQuery) {
+  var _eventListener$mql$ma;
+  if (!globalObject.matchMedia) {
+    return false;
+  }
+  if (!eventListenersMap.has(mediaQuery)) {
+    var _globalObject$matchMe;
+    return !!((_globalObject$matchMe = globalObject.matchMedia(mediaQuery)) != null && _globalObject$matchMe.matches);
+  }
+  var eventListener = eventListenersMap.get(mediaQuery);
+  return (_eventListener$mql$ma = eventListener == null ? void 0 : eventListener.mql.matches) != null ? _eventListener$mql$ma : false;
+}
+function changeCallback(e) {
+  var eventListener = eventListenersMap.get(e.media);
+  if (eventListener) {
+    eventListener.listeners.forEach(function (listener) {
+      listener(e);
+    });
+  }
+}

package/components/ResponsiveLayout/ResponsiveLayoutEvents/ResponsiveLayoutEvents.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["globalObject","eventListenersMap","Map","addResponsiveLayoutListener","mediaQuery","callback","has","addCallbackToMQListener","createMQListener","remove","removeCallbackFromMQListener","eventListener","get","set","_extends","listeners","concat","mql","matchMedia","newMediaQueryInfo","addEventListener","changeCallback","addListener","newListeners","filter","listener","length","removeEventListener","removeListener","checkMatches","_eventListener$mql$ma","_globalObject$matchMe","matches","e","media","forEach"],"sources":["ResponsiveLayoutEvents.ts"],"sourcesContent":["import { globalObject } from '@skbkontur/global-object';\n\ninterface mediaQueryData {\n  mql: MediaQueryList;\n  listeners: Array<(e: MediaQueryListEvent) => void>;\n}\n\nexport interface listenerToken {\n  remove: () => void;\n}\n\nexport const eventListenersMap = new Map<string, mediaQueryData>();\n\nexport function addResponsiveLayoutListener(\n  mediaQuery: string,\n  callback: (e: MediaQueryListEvent) => void,\n): listenerToken {\n  if (eventListenersMap.has(mediaQuery)) {\n    addCallbackToMQListener(mediaQuery, callback);\n  } else {\n    createMQListener(mediaQuery, callback);\n  }\n\n  return {\n    remove() {\n      removeCallbackFromMQListener(mediaQuery, callback);\n    },\n  };\n}\n\nfunction addCallbackToMQListener(mediaQuery: string, callback: (e: MediaQueryListEvent) => void) {\n  const eventListener = eventListenersMap.get(mediaQuery);\n\n  if (eventListener) {\n    eventListenersMap.set(mediaQuery, {\n      ...eventListener,\n      listeners: [...eventListener.listeners, callback],\n    });\n  }\n}\n\nfunction createMQListener(mediaQuery: string, callback: (e: MediaQueryListEvent) => void) {\n  const mql = globalObject.matchMedia?.(mediaQuery);\n  if (mql) {\n    const newMediaQueryInfo: mediaQueryData = { mql, listeners: [callback] };\n\n    eventListenersMap.set(mediaQuery, newMediaQueryInfo);\n    if (mql.addEventListener) {\n      mql.addEventListener('change', changeCallback);\n    } else {\n      mql.addListener(changeCallback);\n    }\n  }\n}\n\nfunction removeCallbackFromMQListener(mediaQuery: string, callback: (e: MediaQueryListEvent) => void) {\n  if (eventListenersMap.has(mediaQuery)) {\n    const eventListener = eventListenersMap.get(mediaQuery);\n\n    if (eventListener) {\n      const newListeners = eventListener.listeners.filter((listener) => listener !== callback);\n\n      if (newListeners.length === 0) {\n        if (eventListener.mql.removeEventListener) {\n          eventListener.mql.removeEventListener('change', changeCallback);\n        } else {\n          eventListener.mql.removeListener(changeCallback);\n        }\n        eventListenersMap.delete(mediaQuery);\n        return;\n      }\n\n      eventListenersMap.set(mediaQuery, {\n        ...eventListener,\n        listeners: [...newListeners],\n      });\n    }\n  }\n}\n\nexport function checkMatches(mediaQuery: string) {\n  if (!globalObject.matchMedia) {\n    return false;\n  }\n\n  if (!eventListenersMap.has(mediaQuery)) {\n    return !!globalObject.matchMedia(mediaQuery)?.matches;\n  }\n\n  const eventListener = eventListenersMap.get(mediaQuery);\n  return eventListener?.mql.matches ?? false;\n}\n\nfunction changeCallback(e: MediaQueryListEvent) {\n  const eventListener = eventListenersMap.get(e.media);\n\n  if (eventListener) {\n    eventListener.listeners.forEach((listener) => {\n      listener(e);\n    });\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/components/ResponsiveLayout/ResponsiveLayoutEvents/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/ResponsiveLayout/ResponsiveLayoutEvents.js",
+  "module": "ResponsiveLayoutEvents",
+  "types": "../ResponsiveLayoutEvents.d.ts",
+  "sideEffects": false
+}

package/components/ResponsiveLayout/ResponsiveLayoutEvents.d.ts

@@ -0,0 +1,11 @@
+interface mediaQueryData {
+    mql: MediaQueryList;
+    listeners: Array<(e: MediaQueryListEvent) => void>;
+}
+export interface listenerToken {
+    remove: () => void;
+}
+export declare const eventListenersMap: Map<string, mediaQueryData>;
+export declare function addResponsiveLayoutListener(mediaQuery: string, callback: (e: MediaQueryListEvent) => void): listenerToken;
+export declare function checkMatches(mediaQuery: string): boolean;
+export {};

package/components/ResponsiveLayout/decorator/decorator.js

@@ -0,0 +1,47 @@
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+import React from 'react';
+import { ResponsiveLayout } from "../ResponsiveLayout";
+export function responsiveLayout(WrappedComp) {
+  var ComponentWithLayout = /*#__PURE__*/function (_WrappedComp) {
+    function ComponentWithLayout() {
+      var _this;
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+      _this = _WrappedComp.call.apply(_WrappedComp, [this].concat(args)) || this;
+      _this.renderWithLayout = function (currentLayout) {
+        _this.layout = currentLayout;
+        return _WrappedComp.prototype.render.call(_this);
+      };
+      return _this;
+    }
+    _inheritsLoose(ComponentWithLayout, _WrappedComp);
+    var _proto = ComponentWithLayout.prototype;
+    _proto.render = function render() {
+      return /*#__PURE__*/React.createElement(ResponsiveLayout, null, this.renderWithLayout);
+    };
+    return _createClass(ComponentWithLayout, [{
+      key: "currentLayout",
+      get: function get() {
+        return this.layout;
+      },
+      set: function set(value) {//
+      }
+    }, {
+      key: "isMobileLayout",
+      get: function get() {
+        return this.layout.isMobile;
+      },
+      set: function set(value) {//
+      }
+    }]);
+  }(WrappedComp);
+  var nameDescriptor = Object.getOwnPropertyDescriptor(ComponentWithLayout, 'name');
+  if (!nameDescriptor || nameDescriptor.configurable) {
+    Object.defineProperty(ComponentWithLayout, 'name', {
+      value: WrappedComp.name
+    });
+  }
+  return ComponentWithLayout;
+}

package/components/ResponsiveLayout/decorator/decorator.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","ResponsiveLayout","responsiveLayout","WrappedComp","ComponentWithLayout","_WrappedComp","_this","_len","arguments","length","args","Array","_key","call","apply","concat","renderWithLayout","currentLayout","layout","prototype","render","_inheritsLoose","_proto","createElement","_createClass","key","get","set","value","isMobile","nameDescriptor","Object","getOwnPropertyDescriptor","configurable","defineProperty","name"],"sources":["decorator.tsx"],"sourcesContent":["import React from 'react';\n\nimport { ResponsiveLayout } from './ResponsiveLayout';\nimport type { ResponsiveLayoutFlags } from './types';\n\nexport function responsiveLayout<T extends new (...args: any[]) => React.Component>(WrappedComp: T) {\n  const ComponentWithLayout = class extends WrappedComp {\n    public layout!: ResponsiveLayoutFlags;\n\n    public get currentLayout(): ResponsiveLayoutFlags {\n      return this.layout;\n    }\n\n    public set currentLayout(value: ResponsiveLayoutFlags) {\n      //\n    }\n\n    public get isMobileLayout(): boolean {\n      return this.layout.isMobile;\n    }\n\n    public set isMobileLayout(value: boolean) {\n      //\n    }\n\n    public renderWithLayout = (currentLayout: ResponsiveLayoutFlags) => {\n      this.layout = currentLayout;\n\n      return super.render();\n    };\n\n    public render() {\n      return <ResponsiveLayout>{this.renderWithLayout}</ResponsiveLayout>;\n    }\n  };\n\n  const nameDescriptor = Object.getOwnPropertyDescriptor(ComponentWithLayout, 'name');\n\n  if (!nameDescriptor || nameDescriptor.configurable) {\n    Object.defineProperty(ComponentWithLayout, 'name', { value: WrappedComp.name });\n  }\n\n  return ComponentWithLayout;\n}\n"],"mappings":"wIAAA,OAAOA,KAAK,MAAM,OAAO;;AAEzB,SAASC,gBAAgB,QAAQ,oBAAoB;;;AAGrD,OAAO,SAASC,gBAAgBA,CAAoDC,WAAc,EAAE;EAClG,IAAMC,mBAAmB,0BAAAC,YAAA,YAAAD,oBAAA,OAAAE,KAAA,UAAAC,IAAA,GAAAC,SAAA,CAAAC,MAAA,EAAAC,IAAA,OAAAC,KAAA,CAAAJ,IAAA,GAAAK,IAAA,MAAAA,IAAA,GAAAL,IAAA,EAAAK,IAAA,KAAAF,IAAA,CAAAE,IAAA,IAAAJ,SAAA,CAAAI,IAAA,GAAAN,KAAA,GAAAD,YAAA,CAAAQ,IAAA,CAAAC,KAAA,CAAAT,YAAA,SAAAU,MAAA,CAAAL,IAAA,WAAAJ,KAAA;;;;;;;;;;;;;;;;;;;MAmBhBU,gBAAgB,GAAG,UAACC,aAAoC,EAAK;QAClEX,KAAA,CAAKY,MAAM,GAAGD,aAAa;;QAE3B,OAAAZ,YAAA,CAAAc,SAAA,CAAaC,MAAM,CAAAP,IAAA,CAAAP,KAAA;MACrB,CAAC,QAAAA,KAAA,EAAAe,cAAA,CAAAjB,mBAAA,EAAAC,YAAA,MAAAiB,MAAA,GAAAlB,mBAAA,CAAAe,SAAA,CAAAG,MAAA;;IAEMF,MAAM,GAAb,SAAAA,OAAA,EAAgB;MACd,oBAAOpB,KAAA,CAAAuB,aAAA,CAACtB,gBAAgB,QAAE,IAAI,CAACe,gBAAmC,CAAC;IACrE,CAAC,QAAAQ,YAAA,CAAApB,mBAAA,KAAAqB,GAAA,mBAAAC,GAAA,EAxBD,SAAAA,IAAA,EAAkD,CAChD,OAAO,IAAI,CAACR,MAAM,CACpB,CAAC,EAAAS,GAAA,EAED,SAAAA,IAAyBC,KAA4B,EAAE,CACrD;MAAA,CACD,MAAAH,GAAA,oBAAAC,GAAA,EAED,SAAAA,IAAA,EAAqC,CACnC,OAAO,IAAI,CAACR,MAAM,CAACW,QAAQ,CAC7B,CAAC,EAAAF,GAAA,EAED,SAAAA,IAA0BC,KAAc,EAAE,CACxC;MAAA,CACD,OAjBuCzB,WAAW,CA4BpD;EAED,IAAM2B,cAAc,GAAGC,MAAM,CAACC,wBAAwB,CAAC5B,mBAAmB,EAAE,MAAM,CAAC;;EAEnF,IAAI,CAAC0B,cAAc,IAAIA,cAAc,CAACG,YAAY,EAAE;IAClDF,MAAM,CAACG,cAAc,CAAC9B,mBAAmB,EAAE,MAAM,EAAE,EAAEwB,KAAK,EAAEzB,WAAW,CAACgC,IAAI,CAAC,CAAC,CAAC;EACjF;;EAEA,OAAO/B,mBAAmB;AAC5B","ignoreList":[]}

package/components/ResponsiveLayout/decorator/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/ResponsiveLayout/decorator.js",
+  "module": "decorator",
+  "types": "../decorator.d.ts",
+  "sideEffects": false
+}

package/components/ResponsiveLayout/decorator.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+import type { ResponsiveLayoutFlags } from './types';
+export declare function responsiveLayout<T extends new (...args: any[]) => React.Component>(WrappedComp: T): {
+    new (...args: any[]): {
+        layout: ResponsiveLayoutFlags;
+        currentLayout: ResponsiveLayoutFlags<import("./types").EmptyObject>;
+        isMobileLayout: boolean;
+        renderWithLayout: (currentLayout: ResponsiveLayoutFlags) => React.ReactNode;
+        render(): React.JSX.Element;
+        context: unknown;
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<{}>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<{}>;
+        state: Readonly<{}>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        componentDidMount?(): void;
+        shouldComponentUpdate?(nextProps: Readonly<{}>, nextState: Readonly<{}>, nextContext: any): boolean;
+        componentWillUnmount?(): void;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<{}>, prevState: Readonly<{}>): any;
+        componentDidUpdate?(prevProps: Readonly<{}>, prevState: Readonly<{}>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<{}>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<{}>, nextState: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<{}>, nextState: Readonly<{}>, nextContext: any): void;
+    };
+} & T;

package/components/ResponsiveLayout/index/index.js

@@ -0,0 +1,3 @@
+export * from "../ResponsiveLayout";
+export * from "../useResponsiveLayout";
+export * from "../types";

package/components/ResponsiveLayout/index/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["index.tsx"],"sourcesContent":["export * from './ResponsiveLayout';\nexport * from './useResponsiveLayout';\nexport * from './types';\n"],"mappings":"AAAA,cAAc,oBAAoB;AAClC,cAAc,uBAAuB;AACrC,cAAc,SAAS","ignoreList":[]}

package/components/ResponsiveLayout/index/package.json

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

package/components/ResponsiveLayout/index.d.ts

@@ -0,0 +1,3 @@
+export * from './ResponsiveLayout';
+export * from './useResponsiveLayout';
+export * from './types';

package/components/ResponsiveLayout/package.json

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

package/components/ResponsiveLayout/types/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/ResponsiveLayout/types.js",
+  "module": "types",
+  "types": "../types.d.ts",
+  "sideEffects": false
+}

package/components/ResponsiveLayout/types/types.js

@@ -0,0 +1 @@
+export {};

package/components/ResponsiveLayout/types/types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["types.ts"],"sourcesContent":["export type MediaQueriesType = Record<string, string>;\nexport type EmptyObject = Record<never, never>;\n\nexport interface ResponsiveLayoutOptions<MQ extends MediaQueriesType> {\n  customMediaQueries?: MQ;\n}\n\nexport type ResponsiveLayoutFlags<T extends MediaQueriesType = EmptyObject> = {\n  [K in keyof T]?: boolean;\n} & ResponsiveLayoutFlagsInternal;\n\nexport interface ResponsiveLayoutFlagsInternal {\n  isMobile: boolean;\n}\n"],"mappings":"","ignoreList":[]}

package/components/ResponsiveLayout/types.d.ts

@@ -0,0 +1,11 @@
+export type MediaQueriesType = Record<string, string>;
+export type EmptyObject = Record<never, never>;
+export interface ResponsiveLayoutOptions<MQ extends MediaQueriesType> {
+    customMediaQueries?: MQ;
+}
+export type ResponsiveLayoutFlags<T extends MediaQueriesType = EmptyObject> = {
+    [K in keyof T]?: boolean;
+} & ResponsiveLayoutFlagsInternal;
+export interface ResponsiveLayoutFlagsInternal {
+    isMobile: boolean;
+}

package/components/ResponsiveLayout/useResponsiveLayout/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/ResponsiveLayout/useResponsiveLayout.js",
+  "module": "useResponsiveLayout",
+  "types": "../useResponsiveLayout.d.ts",
+  "sideEffects": false
+}

package/components/ResponsiveLayout/useResponsiveLayout/useResponsiveLayout.js

@@ -0,0 +1,71 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { createRef, useCallback, useContext, useEffect, useState } from 'react';
+import { ThemeContext } from "../../../lib/theming/ThemeContext";
+import { addResponsiveLayoutListener, checkMatches } from "../ResponsiveLayoutEvents";
+export function useResponsiveLayout(_temp) {
+  var _ref = _temp === void 0 ? {} : _temp,
+    customMediaQueries = _ref.customMediaQueries;
+  var theme = useContext(ThemeContext);
+  var allMediaQueries = Object.entries(_extends({
+    isMobile: theme.mobileMediaQuery
+  }, customMediaQueries)).map(function (_ref2) {
+    var key = _ref2[0],
+      value = _ref2[1];
+    return {
+      flag: key,
+      query: value,
+      ref: /*#__PURE__*/createRef()
+    };
+  });
+  var getLayoutFromGlobal = function getLayoutFromGlobal() {
+    return allMediaQueries.reduce(function (result, mediaQuery) {
+      var _Object$assign;
+      return Object.assign(result, (_Object$assign = {}, _Object$assign[mediaQuery.flag] = checkMatches(mediaQuery.query), _Object$assign));
+    }, {});
+  };
+  var _useState = useState(getLayoutFromGlobal()),
+    state = _useState[0],
+    setState = _useState[1];
+  var prepareMediaQueries = useCallback(function () {
+    if (!theme) {
+      return;
+    }
+    allMediaQueries.forEach(function (mediaQuery) {
+      return mediaQuery.ref.current = addResponsiveLayoutListener(mediaQuery.query, checkLayoutsMediaQueries);
+    });
+
+    // Checking for SSR use case
+    var globalLayout = getLayoutFromGlobal();
+    var hasChangedQuery = Object.entries(globalLayout).find(function (_ref3) {
+      var key = _ref3[0],
+        value = _ref3[1];
+      return state[key] !== value;
+    });
+    if (hasChangedQuery) {
+      setState(globalLayout);
+    }
+  }, [theme]);
+  var checkLayoutsMediaQueries = useCallback(function (e) {
+    if (!theme) {
+      return;
+    }
+    allMediaQueries.forEach(function (mediaQuery) {
+      if (e.media === mediaQuery.query) {
+        setState(function (prevState) {
+          var _extends2;
+          return _extends({}, prevState, (_extends2 = {}, _extends2[mediaQuery.flag] = e.matches, _extends2));
+        });
+      }
+    });
+  }, [theme]);
+  useEffect(function () {
+    prepareMediaQueries();
+    return function () {
+      allMediaQueries.forEach(function (mediaQuery) {
+        var _mediaQuery$ref$curre;
+        return (_mediaQuery$ref$curre = mediaQuery.ref.current) == null ? void 0 : _mediaQuery$ref$curre.remove();
+      });
+    };
+  }, []);
+  return state;
+}

package/components/ResponsiveLayout/useResponsiveLayout/useResponsiveLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["createRef","useCallback","useContext","useEffect","useState","ThemeContext","addResponsiveLayoutListener","checkMatches","useResponsiveLayout","_temp","_ref","customMediaQueries","theme","allMediaQueries","Object","entries","_extends","isMobile","mobileMediaQuery","map","_ref2","key","value","flag","query","ref","getLayoutFromGlobal","reduce","result","mediaQuery","_Object$assign","assign","_useState","state","setState","prepareMediaQueries","forEach","current","checkLayoutsMediaQueries","globalLayout","hasChangedQuery","find","_ref3","e","media","prevState","_extends2","matches","_mediaQuery$ref$curre","remove"],"sources":["useResponsiveLayout.ts"],"sourcesContent":["import type React from 'react';\nimport { createRef, useCallback, useContext, useEffect, useState } from 'react';\n\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\n\nimport type { EmptyObject, MediaQueriesType, ResponsiveLayoutFlags, ResponsiveLayoutOptions } from './types';\nimport { addResponsiveLayoutListener, checkMatches } from './ResponsiveLayoutEvents';\n\nexport function useResponsiveLayout<T extends MediaQueriesType = EmptyObject>({\n  customMediaQueries,\n}: ResponsiveLayoutOptions<T> = {}) {\n  const theme = useContext(ThemeContext);\n\n  const allMediaQueries = Object.entries({\n    isMobile: theme.mobileMediaQuery,\n    ...customMediaQueries,\n  }).map(([key, value]) => ({\n    flag: key,\n    query: value,\n    ref: createRef() as React.MutableRefObject<{ remove: () => void } | null>,\n  }));\n\n  const getLayoutFromGlobal = (): ResponsiveLayoutFlags<T> => {\n    return allMediaQueries.reduce(\n      (result, mediaQuery) => Object.assign(result, { [mediaQuery.flag]: checkMatches(mediaQuery.query) }),\n      {},\n    ) as ResponsiveLayoutFlags<T>;\n  };\n\n  const [state, setState] = useState(getLayoutFromGlobal());\n\n  const prepareMediaQueries = useCallback(() => {\n    if (!theme) {\n      return;\n    }\n\n    allMediaQueries.forEach(\n      (mediaQuery) =>\n        (mediaQuery.ref.current = addResponsiveLayoutListener(mediaQuery.query, checkLayoutsMediaQueries)),\n    );\n\n    // Checking for SSR use case\n    const globalLayout = getLayoutFromGlobal();\n    const hasChangedQuery = Object.entries(globalLayout).find(([key, value]) => state[key] !== value);\n\n    if (hasChangedQuery) {\n      setState(globalLayout);\n    }\n  }, [theme]);\n\n  const checkLayoutsMediaQueries = useCallback(\n    (e: MediaQueryListEvent) => {\n      if (!theme) {\n        return;\n      }\n\n      allMediaQueries.forEach((mediaQuery) => {\n        if (e.media === mediaQuery.query) {\n          setState((prevState: ResponsiveLayoutFlags<T>) => ({\n            ...prevState,\n            [mediaQuery.flag]: e.matches,\n          }));\n        }\n      });\n    },\n    [theme],\n  );\n\n  useEffect(() => {\n    prepareMediaQueries();\n\n    return () => {\n      allMediaQueries.forEach((mediaQuery) => mediaQuery.ref.current?.remove());\n    };\n  }, []);\n\n  return state;\n}\n"],"mappings":"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","ignoreList":[]}

package/components/ResponsiveLayout/useResponsiveLayout.d.ts

@@ -0,0 +1,2 @@
+import type { EmptyObject, MediaQueriesType, ResponsiveLayoutFlags, ResponsiveLayoutOptions } from './types';
+export declare function useResponsiveLayout<T extends MediaQueriesType = EmptyObject>({ customMediaQueries, }?: ResponsiveLayoutOptions<T>): ResponsiveLayoutFlags<T>;