@skbkontur/react-ui 0.0.0-7dc91ef93e → 0.0.0-7f260475fb

package/components/ResponsiveLayout/__tests__/ResponsiveLayout-test.js

@@ -0,0 +1,72 @@
+import { addResponsiveLayoutListener, eventListenersMap } from '../ResponsiveLayoutEvents.js';
+describe('ResponsiveLayoutListeners', function () {
+    it('test func', function () {
+        var _a;
+        var firstMediaQuery = '(min-width: 1px)';
+        var secondMediaQuery = '(min-width: 5px)';
+        var thirdMediaQuery = '(min-width: 10px)';
+        var firstCallback = vi.fn();
+        var secondCallback = vi.fn();
+        var thirdCallback = vi.fn();
+        // создаем два слушателя по первому медиа-запросу
+        var firstMQListeners = [];
+        firstMQListeners.push(addResponsiveLayoutListener(firstMediaQuery, firstCallback));
+        firstMQListeners.push(addResponsiveLayoutListener(firstMediaQuery, secondCallback));
+        expect(firstMQListeners).toHaveLength(2);
+        expect(eventListenersMap.size).toBe(1);
+        var firstValue = eventListenersMap.get(firstMediaQuery);
+        expect(firstValue).toBeDefined();
+        expect(firstValue === null || firstValue === void 0 ? void 0 : firstValue.mql.media).toBe(firstMediaQuery);
+        expect(firstValue === null || firstValue === void 0 ? void 0 : firstValue.listeners).toHaveLength(2);
+        expect(firstValue === null || firstValue === void 0 ? void 0 : firstValue.listeners[0]).toBe(firstCallback);
+        expect(firstValue === null || firstValue === void 0 ? void 0 : firstValue.listeners[1]).toBe(secondCallback);
+        // добавляем одного слушателя по второму медиа-запросу
+        var secondMQListeners = [];
+        secondMQListeners.push(addResponsiveLayoutListener(secondMediaQuery, secondCallback));
+        expect(secondMQListeners).toHaveLength(1);
+        expect(eventListenersMap.size).toBe(2);
+        var secondValue = eventListenersMap.get(secondMediaQuery);
+        expect(secondValue).toBeDefined();
+        expect(secondValue === null || secondValue === void 0 ? void 0 : secondValue.mql.media).toBe(secondMediaQuery);
+        expect(secondValue === null || secondValue === void 0 ? void 0 : secondValue.listeners).toHaveLength(1);
+        expect(secondValue === null || secondValue === void 0 ? void 0 : secondValue.listeners[0]).toBe(secondCallback);
+        expect(secondValue === null || secondValue === void 0 ? void 0 : secondValue.listeners[1]).toBeUndefined();
+        // добавляем три слушателя на третий медиа-запрос
+        var thirdMQListeners = [];
+        thirdMQListeners.push(addResponsiveLayoutListener(thirdMediaQuery, firstCallback));
+        thirdMQListeners.push(addResponsiveLayoutListener(thirdMediaQuery, secondCallback));
+        thirdMQListeners.push(addResponsiveLayoutListener(thirdMediaQuery, thirdCallback));
+        expect(thirdMQListeners).toHaveLength(3);
+        expect(eventListenersMap.size).toBe(3);
+        var thirdValue = eventListenersMap.get(thirdMediaQuery);
+        expect(thirdValue).toBeDefined();
+        expect(thirdValue === null || thirdValue === void 0 ? void 0 : thirdValue.mql.media).toBe(thirdMediaQuery);
+        expect(thirdValue === null || thirdValue === void 0 ? void 0 : thirdValue.listeners).toHaveLength(3);
+        expect(thirdValue === null || thirdValue === void 0 ? void 0 : thirdValue.listeners[0]).toBe(firstCallback);
+        expect(thirdValue === null || thirdValue === void 0 ? void 0 : thirdValue.listeners[1]).toBe(secondCallback);
+        expect(thirdValue === null || thirdValue === void 0 ? void 0 : thirdValue.listeners[2]).toBe(thirdCallback);
+        expect(secondValue === null || secondValue === void 0 ? void 0 : secondValue.listeners[3]).toBeUndefined();
+        // удаляем слушателя по второму медиа-запросу. Размер словаря должен стать два
+        secondMQListeners[0].remove();
+        expect(eventListenersMap.size).toBe(2);
+        expect(eventListenersMap.get(secondMediaQuery)).toBeUndefined();
+        // удаляем одного слушателя по первому медиа-запросу
+        firstMQListeners[0].remove();
+        expect(eventListenersMap.size).toBe(2);
+        var updatedFirstValue = eventListenersMap.get(firstMediaQuery);
+        expect(updatedFirstValue).toBeDefined();
+        expect(updatedFirstValue === null || updatedFirstValue === void 0 ? void 0 : updatedFirstValue.mql.media).toBe(firstMediaQuery);
+        expect(updatedFirstValue === null || updatedFirstValue === void 0 ? void 0 : updatedFirstValue.listeners).toHaveLength(1);
+        expect(updatedFirstValue === null || updatedFirstValue === void 0 ? void 0 : updatedFirstValue.listeners[0]).toBe(secondCallback);
+        // удаляем всех слушателей
+        firstMQListeners[1].remove();
+        expect(eventListenersMap.size).toBe(1);
+        thirdMQListeners[0].remove();
+        thirdMQListeners[1].remove();
+        expect(eventListenersMap.size).toBe(1);
+        expect((_a = eventListenersMap.get(thirdMediaQuery)) === null || _a === void 0 ? void 0 : _a.listeners).toHaveLength(1);
+        thirdMQListeners[2].remove();
+        expect(eventListenersMap.size).toBe(0);
+    });
+});
+//# sourceMappingURL=ResponsiveLayout-test.js.map

package/components/ResponsiveLayout/__tests__/ResponsiveLayout-test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResponsiveLayout-test.js","sourceRoot":"","sources":["../../../../components/ResponsiveLayout/__tests__/ResponsiveLayout-test.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { listenerToken } from '../ResponsiveLayoutEvents.js';\nimport { addResponsiveLayoutListener, eventListenersMap } from '../ResponsiveLayoutEvents.js';\n\ndescribe('ResponsiveLayoutListeners', () => {\n  it('test func', () => {\n    const firstMediaQuery = '(min-width: 1px)';\n    const secondMediaQuery = '(min-width: 5px)';\n    const thirdMediaQuery = '(min-width: 10px)';\n\n    const firstCallback = vi.fn();\n    const secondCallback = vi.fn();\n    const thirdCallback = vi.fn();\n\n    // создаем два слушателя по первому медиа-запросу\n\n    const firstMQListeners: listenerToken[] = [];\n    firstMQListeners.push(addResponsiveLayoutListener(firstMediaQuery, firstCallback));\n    firstMQListeners.push(addResponsiveLayoutListener(firstMediaQuery, secondCallback));\n\n    expect(firstMQListeners).toHaveLength(2);\n    expect(eventListenersMap.size).toBe(1);\n\n    const firstValue = eventListenersMap.get(firstMediaQuery);\n\n    expect(firstValue).toBeDefined();\n    expect(firstValue?.mql.media).toBe(firstMediaQuery);\n    expect(firstValue?.listeners).toHaveLength(2);\n\n    expect(firstValue?.listeners[0]).toBe(firstCallback);\n    expect(firstValue?.listeners[1]).toBe(secondCallback);\n\n    // добавляем одного слушателя по второму медиа-запросу\n\n    const secondMQListeners: listenerToken[] = [];\n\n    secondMQListeners.push(addResponsiveLayoutListener(secondMediaQuery, secondCallback));\n\n    expect(secondMQListeners).toHaveLength(1);\n    expect(eventListenersMap.size).toBe(2);\n\n    const secondValue = eventListenersMap.get(secondMediaQuery);\n\n    expect(secondValue).toBeDefined();\n    expect(secondValue?.mql.media).toBe(secondMediaQuery);\n    expect(secondValue?.listeners).toHaveLength(1);\n\n    expect(secondValue?.listeners[0]).toBe(secondCallback);\n    expect(secondValue?.listeners[1]).toBeUndefined();\n\n    // добавляем три слушателя на третий медиа-запрос\n\n    const thirdMQListeners: listenerToken[] = [];\n\n    thirdMQListeners.push(addResponsiveLayoutListener(thirdMediaQuery, firstCallback));\n    thirdMQListeners.push(addResponsiveLayoutListener(thirdMediaQuery, secondCallback));\n    thirdMQListeners.push(addResponsiveLayoutListener(thirdMediaQuery, thirdCallback));\n\n    expect(thirdMQListeners).toHaveLength(3);\n    expect(eventListenersMap.size).toBe(3);\n\n    const thirdValue = eventListenersMap.get(thirdMediaQuery);\n\n    expect(thirdValue).toBeDefined();\n    expect(thirdValue?.mql.media).toBe(thirdMediaQuery);\n    expect(thirdValue?.listeners).toHaveLength(3);\n\n    expect(thirdValue?.listeners[0]).toBe(firstCallback);\n    expect(thirdValue?.listeners[1]).toBe(secondCallback);\n    expect(thirdValue?.listeners[2]).toBe(thirdCallback);\n    expect(secondValue?.listeners[3]).toBeUndefined();\n\n    // удаляем слушателя по второму медиа-запросу. Размер словаря должен стать два\n\n    secondMQListeners[0].remove();\n\n    expect(eventListenersMap.size).toBe(2);\n    expect(eventListenersMap.get(secondMediaQuery)).toBeUndefined();\n\n    // удаляем одного слушателя по первому медиа-запросу\n\n    firstMQListeners[0].remove();\n    expect(eventListenersMap.size).toBe(2);\n\n    const updatedFirstValue = eventListenersMap.get(firstMediaQuery);\n\n    expect(updatedFirstValue).toBeDefined();\n    expect(updatedFirstValue?.mql.media).toBe(firstMediaQuery);\n    expect(updatedFirstValue?.listeners).toHaveLength(1);\n    expect(updatedFirstValue?.listeners[0]).toBe(secondCallback);\n\n    // удаляем всех слушателей\n\n    firstMQListeners[1].remove();\n    expect(eventListenersMap.size).toBe(1);\n\n    thirdMQListeners[0].remove();\n    thirdMQListeners[1].remove();\n\n    expect(eventListenersMap.size).toBe(1);\n    expect(eventListenersMap.get(thirdMediaQuery)?.listeners).toHaveLength(1);\n\n    thirdMQListeners[2].remove();\n\n    expect(eventListenersMap.size).toBe(0);\n  });\n});\n"]}

package/components/ResponsiveLayout/__tests__/useResponsiveLayout-test.d.ts

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

package/components/ResponsiveLayout/__tests__/useResponsiveLayout-test.js

@@ -0,0 +1,71 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { eventListenersMap } from '../ResponsiveLayoutEvents.js';
+import { useResponsiveLayout as useResponsiveLayoutOrigin } from '../useResponsiveLayout.js';
+import { LIGHT_THEME } from '../../../lib/theming/themes/LightTheme.js';
+function getUseResponsiveLayoutResult(options) {
+    var useResponsiveLayout = function () {
+        return useResponsiveLayoutOrigin(options);
+    };
+    var result = {};
+    function TestComponent() {
+        Object.assign(result, useResponsiveLayout());
+        return null;
+    }
+    render(React.createElement(TestComponent, null));
+    return result;
+}
+describe('useResponsiveLayoutCustomization', function () {
+    var calcMatches = function (query) { return query === LIGHT_THEME.mobileMediaQuery; };
+    var oldMatchMedia = window.matchMedia;
+    var matchMediaMock = vi.fn().mockImplementation(function (query) {
+        return {
+            matches: calcMatches(query),
+            media: query,
+            onchange: null,
+            addListener: vi.fn(),
+            removeListener: vi.fn(),
+            addEventListener: vi.fn(),
+            removeEventListener: vi.fn(),
+        };
+    });
+    beforeEach(function () {
+        window.matchMedia = matchMediaMock;
+    });
+    afterEach(function () {
+        window.matchMedia = oldMatchMedia;
+    });
+    it('has added custom media queries', function () {
+        var customMediaQueries = {
+            isTablet: '(min-width: 577px)',
+        };
+        calcMatches = function (query) { return query === customMediaQueries.isTablet; };
+        var result = getUseResponsiveLayoutResult({ customMediaQueries: customMediaQueries });
+        expect(result.isMobile).toBe(false);
+        expect(result.isTablet).toBe(true);
+        expect(matchMediaMock).toHaveBeenCalledWith(customMediaQueries.isTablet);
+        expect(matchMediaMock).toHaveBeenCalledWith(LIGHT_THEME.mobileMediaQuery);
+    });
+    it('rewrite result custom media queries', function () {
+        var customMediaQueries = {
+            isMobile: '(min-width: 360px)',
+        };
+        var result = getUseResponsiveLayoutResult({ customMediaQueries: customMediaQueries });
+        expect(result.isMobile).toBeFalsy();
+        expect(matchMediaMock).toHaveBeenCalledWith(customMediaQueries.isMobile);
+    });
+});
+describe('useResponsiveLayoutListeners', function () {
+    it('removes listeners after unmount', function () {
+        var WithResponsiveLayoutListener = function () {
+            var isMobile = useResponsiveLayoutOrigin().isMobile;
+            return React.createElement("i", null, isMobile);
+        };
+        eventListenersMap.clear();
+        var unmount = render(React.createElement(WithResponsiveLayoutListener, null)).unmount;
+        expect(eventListenersMap.size).toBe(1);
+        unmount();
+        expect(eventListenersMap.size).toBe(0);
+    });
+});
+//# sourceMappingURL=useResponsiveLayout-test.js.map

package/components/ResponsiveLayout/__tests__/useResponsiveLayout-test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useResponsiveLayout-test.js","sourceRoot":"","sources":["../../../../components/ResponsiveLayout/__tests__/useResponsiveLayout-test.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport { render } from '@testing-library/react';\n\nimport { eventListenersMap } from '../ResponsiveLayoutEvents.js';\nimport { useResponsiveLayout as useResponsiveLayoutOrigin } from '../useResponsiveLayout.js';\nimport type { MediaQueriesType, ResponsiveLayoutFlags, ResponsiveLayoutOptions } from '../types.js';\nimport { LIGHT_THEME } from '../../../lib/theming/themes/LightTheme.js';\n\nfunction getUseResponsiveLayoutResult<T extends MediaQueriesType>(options: ResponsiveLayoutOptions<T>) {\n  const useResponsiveLayout = () => {\n    return useResponsiveLayoutOrigin<T>(options);\n  };\n  const result = {};\n  function TestComponent() {\n    Object.assign(result, useResponsiveLayout());\n    return null;\n  }\n  render(<TestComponent />);\n  return result as ResponsiveLayoutFlags<T>;\n}\ndescribe('useResponsiveLayoutCustomization', () => {\n  let calcMatches = (query: string) => query === LIGHT_THEME.mobileMediaQuery;\n  const oldMatchMedia = window.matchMedia;\n  const matchMediaMock = vi.fn().mockImplementation((query) => {\n    return {\n      matches: calcMatches(query),\n      media: query,\n      onchange: null,\n      addListener: vi.fn(),\n      removeListener: vi.fn(),\n      addEventListener: vi.fn(),\n      removeEventListener: vi.fn(),\n    };\n  });\n\n  beforeEach(() => {\n    window.matchMedia = matchMediaMock;\n  });\n\n  afterEach(() => {\n    window.matchMedia = oldMatchMedia;\n  });\n\n  it('has added custom media queries', () => {\n    const customMediaQueries = {\n      isTablet: '(min-width: 577px)',\n    };\n\n    calcMatches = (query: string) => query === customMediaQueries.isTablet;\n    const result = getUseResponsiveLayoutResult({ customMediaQueries });\n\n    expect(result.isMobile).toBe(false);\n    expect(result.isTablet).toBe(true);\n    expect(matchMediaMock).toHaveBeenCalledWith(customMediaQueries.isTablet);\n    expect(matchMediaMock).toHaveBeenCalledWith(LIGHT_THEME.mobileMediaQuery);\n  });\n\n  it('rewrite result custom media queries', () => {\n    const customMediaQueries = {\n      isMobile: '(min-width: 360px)',\n    };\n    const result = getUseResponsiveLayoutResult({ customMediaQueries });\n\n    expect(result.isMobile).toBeFalsy();\n    expect(matchMediaMock).toHaveBeenCalledWith(customMediaQueries.isMobile);\n  });\n});\n\ndescribe('useResponsiveLayoutListeners', () => {\n  it('removes listeners after unmount', () => {\n    const WithResponsiveLayoutListener = () => {\n      const { isMobile } = useResponsiveLayoutOrigin();\n      return <i>{isMobile}</i>;\n    };\n    eventListenersMap.clear();\n\n    const { unmount } = render(<WithResponsiveLayoutListener />);\n    expect(eventListenersMap.size).toBe(1);\n\n    unmount();\n    expect(eventListenersMap.size).toBe(0);\n  });\n});\n"]}

package/components/ResponsiveLayout/decorator.d.ts

@@ -1,31 +1,33 @@
-import React from 'react';
-import { 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;
+import React from 'react';
+import type { ResponsiveLayoutFlags } from './types.js';
+export declare function responsiveLayout<T extends new (...args: any[]) => React.Component>(WrappedComp: T): {
+    new (...args: any[]): {
+        layout: ResponsiveLayoutFlags;
+        get currentLayout(): ResponsiveLayoutFlags;
+        set currentLayout(value: ResponsiveLayoutFlags);
+        get isMobileLayout(): boolean;
+        set isMobileLayout(value: 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/decorator.js

@@ -0,0 +1,60 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+import React from 'react';
+import { ResponsiveLayout } from './ResponsiveLayout.js';
+export function responsiveLayout(WrappedComp) {
+    var ComponentWithLayout = /** @class */ (function (_super) {
+        __extends(class_1, _super);
+        function class_1() {
+            var _this = _super !== null && _super.apply(this, arguments) || this;
+            _this.renderWithLayout = function (currentLayout) {
+                _this.layout = currentLayout;
+                return _super.prototype.render.call(_this);
+            };
+            return _this;
+        }
+        Object.defineProperty(class_1.prototype, "currentLayout", {
+            get: function () {
+                return this.layout;
+            },
+            set: function (value) {
+                //
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(class_1.prototype, "isMobileLayout", {
+            get: function () {
+                return this.layout.isMobile;
+            },
+            set: function (value) {
+                //
+            },
+            enumerable: false,
+            configurable: true
+        });
+        class_1.prototype.render = function () {
+            return React.createElement(ResponsiveLayout, null, this.renderWithLayout);
+        };
+        return class_1;
+    }(WrappedComp));
+    var nameDescriptor = Object.getOwnPropertyDescriptor(ComponentWithLayout, 'name');
+    if (!nameDescriptor || nameDescriptor.configurable) {
+        Object.defineProperty(ComponentWithLayout, 'name', { value: WrappedComp.name });
+    }
+    return ComponentWithLayout;
+}
+//# sourceMappingURL=decorator.js.map

package/components/ResponsiveLayout/decorator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"decorator.js","sourceRoot":"","sources":["../../../components/ResponsiveLayout/decorator.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAGzD,MAAM,UAAU,gBAAgB,CAAoD,WAAc;IAChG,IAAM,mBAAmB;QAAiB,2BAAW;QAAzB;;YAmBnB,sBAAgB,GAAG,UAAC,aAAoC;gBAC7D,KAAI,CAAC,MAAM,GAAG,aAAa,CAAC;gBAE5B,OAAO,gBAAK,CAAC,MAAM,YAAE,CAAC;YACxB,CAAC,CAAC;;QAKJ,CAAC;QAzBC,sBAAW,kCAAa;iBAAxB;gBACE,OAAO,IAAI,CAAC,MAAM,CAAC;YACrB,CAAC;iBAED,UAAyB,KAA4B;gBACnD,EAAE;YACJ,CAAC;;;WAJA;QAMD,sBAAW,mCAAc;iBAAzB;gBACE,OAAO,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC;YAC9B,CAAC;iBAED,UAA0B,KAAc;gBACtC,EAAE;YACJ,CAAC;;;WAJA;QAYM,wBAAM,GAAb;YACE,OAAO,oBAAC,gBAAgB,QAAE,IAAI,CAAC,gBAAgB,CAAoB,CAAC;QACtE,CAAC;QACH,cAAC;IAAD,CAAC,AA5B2B,CAAc,WAAW,EA4BpD,CAAC;IAEF,IAAM,cAAc,GAAG,MAAM,CAAC,wBAAwB,CAAC,mBAAmB,EAAE,MAAM,CAAC,CAAC;IAEpF,IAAI,CAAC,cAAc,IAAI,cAAc,CAAC,YAAY,EAAE,CAAC;QACnD,MAAM,CAAC,cAAc,CAAC,mBAAmB,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,WAAW,CAAC,IAAI,EAAE,CAAC,CAAC;IAClF,CAAC;IAED,OAAO,mBAAmB,CAAC;AAC7B,CAAC","sourcesContent":["import React from 'react';\n\nimport { ResponsiveLayout } from './ResponsiveLayout.js';\nimport type { ResponsiveLayoutFlags } from './types.js';\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"]}

package/components/ResponsiveLayout/index.d.ts

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

package/components/ResponsiveLayout/index.js

@@ -0,0 +1,4 @@
+export * from './ResponsiveLayout.js';
+export * from './useResponsiveLayout.js';
+export * from './types.js';
+//# sourceMappingURL=index.js.map

package/components/ResponsiveLayout/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../components/ResponsiveLayout/index.tsx"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,YAAY,CAAC","sourcesContent":["export * from './ResponsiveLayout.js';\nexport * from './useResponsiveLayout.js';\nexport * from './types.js';\n"]}

package/components/ResponsiveLayout/types.d.ts

@@ -1,11 +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;
-}
+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/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/components/ResponsiveLayout/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../components/ResponsiveLayout/types.ts"],"names":[],"mappings":"","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"]}

package/components/ResponsiveLayout/useResponsiveLayout.d.ts

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

package/components/ResponsiveLayout/useResponsiveLayout.js

@@ -0,0 +1,71 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { createRef, useCallback, useContext, useEffect, useState } from 'react';
+import { ThemeContext } from '../../lib/theming/ThemeContext.js';
+import { addResponsiveLayoutListener, checkMatches } from './ResponsiveLayoutEvents.js';
+export function useResponsiveLayout(_a) {
+    var _b = _a === void 0 ? {} : _a, customMediaQueries = _b.customMediaQueries;
+    var theme = useContext(ThemeContext);
+    var allMediaQueries = Object.entries(__assign({ isMobile: theme.mobileMediaQuery }, customMediaQueries)).map(function (_a) {
+        var key = _a[0], value = _a[1];
+        return ({
+            flag: key,
+            query: value,
+            ref: createRef(),
+        });
+    });
+    var getLayoutFromGlobal = function () {
+        return allMediaQueries.reduce(function (result, mediaQuery) {
+            var _a;
+            return Object.assign(result, (_a = {}, _a[mediaQuery.flag] = checkMatches(mediaQuery.query), _a));
+        }, {});
+    };
+    var _c = useState(getLayoutFromGlobal()), state = _c[0], setState = _c[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 (_a) {
+            var key = _a[0], value = _a[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 _a;
+                    return (__assign(__assign({}, prevState), (_a = {}, _a[mediaQuery.flag] = e.matches, _a)));
+                });
+            }
+        });
+    }, [theme]);
+    useEffect(function () {
+        prepareMediaQueries();
+        return function () {
+            allMediaQueries.forEach(function (mediaQuery) { var _a; return (_a = mediaQuery.ref.current) === null || _a === void 0 ? void 0 : _a.remove(); });
+        };
+    }, []);
+    return state;
+}
+//# sourceMappingURL=useResponsiveLayout.js.map

package/components/ResponsiveLayout/useResponsiveLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useResponsiveLayout.js","sourceRoot":"","sources":["../../../components/ResponsiveLayout/useResponsiveLayout.ts"],"names":[],"mappings":"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","sourcesContent":["import type React from 'react';\nimport { createRef, useCallback, useContext, useEffect, useState } from 'react';\n\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\n\nimport type { EmptyObject, MediaQueriesType, ResponsiveLayoutFlags, ResponsiveLayoutOptions } from './types.js';\nimport { addResponsiveLayoutListener, checkMatches } from './ResponsiveLayoutEvents.js';\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"]}

package/components/ScrollContainer/ScrollBar.d.ts

@@ -1,51 +1,51 @@
-import React from 'react';
-import { Nullable } from '../../typings/utility-types';
-import { ScrollContainerProps } from './ScrollContainer';
-export type ScrollAxis = 'x' | 'y';
-export type ScrollBarScrollState = 'begin' | 'middle' | 'end';
-export interface ScrollBarState {
-    active: boolean;
-    hover: boolean;
-    scrollingByMouseDrag: boolean;
-    size: number;
-    pos: number;
-    scrollState: ScrollBarScrollState;
-}
-export interface ScrollBarProps {
-    /** Инвертирует цвет скроллбара. */
-    invert: boolean;
-    /** Задает ось скроллбара. */
-    axis: ScrollAxis;
-    /** Задает HTML-атрибут class. */
-    className?: string;
-    /** Задает функцию, которая вызывается при скролле. */
-    onScroll?: (axis: ScrollAxis, state: ScrollBarScrollState, prevState: ScrollBarScrollState) => void;
-    /** Задает отступ от края экрана. */
-    offset: ScrollContainerProps['offsetY'] | ScrollContainerProps['offsetX'];
-    /** Отключает анимацию. */
-    disableAnimations?: boolean;
-    /** Определяет, виден ли скроллбар. */
-    isVisible: boolean;
-}
-export declare class ScrollBar extends React.Component<ScrollBarProps, ScrollBarState> {
-    private inner;
-    private containerRef;
-    private theme;
-    node: Nullable<HTMLElement>;
-    state: ScrollBarState;
-    componentDidMount(): void;
-    componentDidUpdate(): void;
-    render(): React.JSX.Element;
-    private renderMain;
-    reflow: () => void;
-    setInnerElement: (inner: Nullable<HTMLElement>) => void;
-    setHover(hover: boolean): void;
-    getHover(): boolean;
-    get scrollBarState(): ScrollBarScrollState;
-    private get scrollBarStyles();
-    private get scrollBarContainerClassNames();
-    private refScroll;
-    private handleScrollMouseDown;
-    private handleScrollWheel;
-    private getImmediateScrollState;
-}
+import React from 'react';
+import type { Nullable } from '../../typings/utility-types.js';
+import type { ScrollContainerProps } from './ScrollContainer.js';
+export type ScrollAxis = 'x' | 'y';
+export type ScrollBarScrollState = 'begin' | 'middle' | 'end';
+export interface ScrollBarState {
+    active: boolean;
+    hover: boolean;
+    scrollingByMouseDrag: boolean;
+    size: number;
+    pos: number;
+    scrollState: ScrollBarScrollState;
+}
+export interface ScrollBarProps {
+    /** Инвертирует цвет скроллбара. */
+    invert: boolean;
+    /** Задает ось скроллбара. */
+    axis: ScrollAxis;
+    /** Задает HTML-атрибут class. */
+    className?: string;
+    /** Задает функцию, которая вызывается при скролле. */
+    onScroll?: (axis: ScrollAxis, state: ScrollBarScrollState, prevState: ScrollBarScrollState) => void;
+    /** Задает отступ от края экрана. */
+    offset: ScrollContainerProps['offsetY'] | ScrollContainerProps['offsetX'];
+    /** Отключает анимацию. */
+    disableAnimations?: boolean;
+    /** Определяет, виден ли скроллбар. */
+    isVisible: boolean;
+}
+export declare class ScrollBar extends React.Component<ScrollBarProps, ScrollBarState> {
+    private inner;
+    private containerRef;
+    private theme;
+    node: Nullable<HTMLElement>;
+    state: ScrollBarState;
+    componentDidMount(): void;
+    componentDidUpdate(): void;
+    render(): React.JSX.Element;
+    private renderMain;
+    reflow: () => void;
+    setInnerElement: (inner: Nullable<HTMLElement>) => void;
+    setHover(hover: boolean): void;
+    getHover(): boolean;
+    get scrollBarState(): ScrollBarScrollState;
+    private get scrollBarStyles();
+    private get scrollBarContainerClassNames();
+    private refScroll;
+    private handleScrollMouseDown;
+    private handleScrollWheel;
+    private getImmediateScrollState;
+}