@hh.ru/magritte-ui-date-picker 3.1.2

package/InfiniteScroll.js

@@ -0,0 +1,173 @@
+import './index.css';
+import { jsx } from 'react/jsx-runtime';
+import { useRef, useState, useContext, useMemo, useCallback, useEffect, useLayoutEffect, Fragment } from 'react';
+import { initTouchHandlers } from '@hh.ru/magritte-internal-inertial-scroll';
+import { AsyncDataContext } from './AsyncDataContext.js';
+import { s as styles } from './date-picker-47a3d918.js';
+
+const InfiniteScroll = ({ initialRenderedItems, invisibleThreshold, visibleThreshold, makeItemFunc, renderItemFunc, onVisibleItemChange, }) => {
+    const stateRef = useRef({
+        items: new Map([...Array(initialRenderedItems).keys()].map((index) => [index, makeItemFunc(index)])),
+        firstRenderedKey: 0,
+        lastRenderedKey: initialRenderedItems - 1,
+        needScrollCorrection: false,
+    });
+    const [stateKey, setStateKey] = useState(0);
+    const asyncDataContext = useContext(AsyncDataContext);
+    const boundariesRef = useRef(null);
+    const itemElementsRef = useRef(new Map());
+    const translateYRef = useRef(0);
+    const visibleAreaMetricsRef = useRef(null);
+    const visibleItemKeyRef = useRef(0);
+    const wrapperRef = useRef(null);
+    const itemRefCallbacks = useMemo(() => {
+        return new Map([...stateRef.current.items.entries()].map(([key]) => {
+            const callback = ((ref) => {
+                if (ref !== null) {
+                    itemElementsRef.current.set(key, ref);
+                }
+            });
+            return [key, callback];
+        }));
+    }, [stateKey]); // eslint-disable-line react-hooks/exhaustive-deps
+    const addItemsIfNeeded = useCallback((scrollDirection) => {
+        if (!visibleAreaMetricsRef.current) {
+            return;
+        }
+        const { items, firstRenderedKey, lastRenderedKey } = stateRef.current;
+        // скролл вверх
+        if (scrollDirection === 'up') {
+            // самый верхний видимый айтем близко к верхнему краю экрана — нужно рендерить еще один сверху
+            const firstRenderedItemElement = itemElementsRef.current.get(firstRenderedKey);
+            if (firstRenderedItemElement) {
+                const firstRenderedItemMetrics = firstRenderedItemElement.getBoundingClientRect();
+                if (visibleAreaMetricsRef.current.top - firstRenderedItemMetrics.top < invisibleThreshold) {
+                    if (!items.has(firstRenderedKey - 1)) {
+                        stateRef.current.items = new Map([
+                            [firstRenderedKey - 1, makeItemFunc(firstRenderedKey - 1)],
+                            ...items.entries(),
+                        ]);
+                        stateRef.current.needScrollCorrection = true;
+                    }
+                    stateRef.current.firstRenderedKey = firstRenderedKey - 1;
+                    stateRef.current.lastRenderedKey = lastRenderedKey - 1;
+                    setStateKey(Math.random());
+                }
+            }
+            // последний пересекший верхнюю границу видимой области запоминаем как visible item
+            for (let key = firstRenderedKey; key < lastRenderedKey; key += 1) {
+                if (stateRef.current.items.has(key) && itemElementsRef.current.has(key)) {
+                    const itemElement = itemElementsRef.current.get(key);
+                    if (itemElement.getBoundingClientRect().bottom - visibleAreaMetricsRef.current.top >
+                        visibleThreshold) {
+                        if (key !== visibleItemKeyRef.current) {
+                            onVisibleItemChange(stateRef.current.items.get(key), key);
+                            visibleItemKeyRef.current = key;
+                        }
+                        break;
+                    }
+                }
+            }
+        }
+        // скролл вниз
+        if (scrollDirection === 'down') {
+            // самый нижний видимый айтем близко к нижнему краю экрана — нужно рендерить еще один снизу
+            const lastRenderedItemElement = itemElementsRef.current.get(lastRenderedKey);
+            if (lastRenderedItemElement) {
+                const lastRenderedItemMetrics = lastRenderedItemElement.getBoundingClientRect();
+                if (lastRenderedItemMetrics.bottom - visibleAreaMetricsRef.current.bottom < invisibleThreshold) {
+                    if (!items.has(lastRenderedKey + 1)) {
+                        stateRef.current.items = new Map([
+                            ...items.entries(),
+                            [lastRenderedKey + 1, makeItemFunc(lastRenderedKey + 1)],
+                        ]);
+                    }
+                    stateRef.current.firstRenderedKey = firstRenderedKey + 1;
+                    stateRef.current.lastRenderedKey = lastRenderedKey + 1;
+                    setStateKey(Math.random());
+                }
+            }
+            // последний пересекший нижнюю границу видимой области запоминаем как visible item
+            for (let key = lastRenderedKey; key > firstRenderedKey; key -= 1) {
+                if (stateRef.current.items.has(key) && itemElementsRef.current.has(key)) {
+                    const itemElement = itemElementsRef.current.get(key);
+                    if (visibleAreaMetricsRef.current.bottom - itemElement.getBoundingClientRect().top >
+                        visibleThreshold) {
+                        if (key !== visibleItemKeyRef.current) {
+                            onVisibleItemChange(stateRef.current.items.get(key), key);
+                            visibleItemKeyRef.current = key;
+                        }
+                        break;
+                    }
+                }
+            }
+        }
+    }, [invisibleThreshold, visibleThreshold, makeItemFunc, onVisibleItemChange, setStateKey]);
+    useEffect(() => {
+        const wrapper = wrapperRef.current;
+        if (!wrapper) {
+            return void 0;
+        }
+        const handleTouchMove = (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+        };
+        wrapper.addEventListener('touchmove', handleTouchMove);
+        return () => wrapper.removeEventListener('touchmove', handleTouchMove);
+    }, []);
+    useEffect(() => {
+        return initTouchHandlers('vertical', wrapperRef, (event) => {
+            if (!wrapperRef.current) {
+                return;
+            }
+            // если достигнут лимит лоадеров, не даем скроллить за границы первого и последнего айтема
+            if (asyncDataContext !== null && asyncDataContext.isLimitExceeded() && boundariesRef.current !== null) {
+                const translateY = translateYRef.current + event.delta;
+                if (translateY > boundariesRef.current.bottom && translateY < boundariesRef.current.top) {
+                    translateYRef.current = translateY;
+                }
+            }
+            else {
+                translateYRef.current += event.delta;
+                addItemsIfNeeded(event.delta > 0 ? 'up' : 'down');
+            }
+            wrapperRef.current.style.transform = `translateY(${translateYRef.current}px)`;
+        });
+    }, [addItemsIfNeeded]); // eslint-disable-line react-hooks/exhaustive-deps
+    useLayoutEffect(() => {
+        if (!visualViewport || !wrapperRef.current) {
+            return;
+        }
+        if (!visibleAreaMetricsRef.current) {
+            visibleAreaMetricsRef.current = { top: wrapperRef.current.offsetTop, bottom: visualViewport.height };
+        }
+        const { firstRenderedKey, lastRenderedKey, needScrollCorrection } = stateRef.current;
+        const firstRenderedItemElement = itemElementsRef.current.get(firstRenderedKey);
+        const lastRenderedItemElement = itemElementsRef.current.get(lastRenderedKey);
+        if (firstRenderedItemElement && lastRenderedItemElement) {
+            // если мы добавили айтем сверху, чтобы скролл не прыгал, компенсируем его на высоту самого верхнего айтема
+            if (needScrollCorrection) {
+                stateRef.current.needScrollCorrection = false;
+                translateYRef.current -= firstRenderedItemElement.clientHeight;
+                if (boundariesRef.current !== null) {
+                    boundariesRef.current.top -= firstRenderedItemElement.clientHeight;
+                }
+                wrapperRef.current.style.transform = `translateY(${translateYRef.current}px)`;
+            }
+            // если достигнут лимит лоадеров, запоминаем границы первого и последнего айтема и не даем скроллить за них
+            if (asyncDataContext !== null && !asyncDataContext.isLimitExceeded()) {
+                const top = translateYRef.current +
+                    visibleAreaMetricsRef.current.top -
+                    firstRenderedItemElement.getBoundingClientRect().top;
+                const bottom = translateYRef.current +
+                    visibleAreaMetricsRef.current.bottom -
+                    lastRenderedItemElement.getBoundingClientRect().bottom;
+                boundariesRef.current = { top, bottom };
+            }
+        }
+    }, [stateKey]); // eslint-disable-line react-hooks/exhaustive-deps
+    return (jsx("div", { className: styles.infiniteScrollWrapper, ref: wrapperRef, children: [...stateRef.current.items.entries()].map(([key, item]) => (jsx(Fragment, { children: key >= stateRef.current.firstRenderedKey && key <= stateRef.current.lastRenderedKey ? (jsx("div", { ref: itemRefCallbacks.get(key), children: renderItemFunc(item) })) : (jsx("div", { style: { height: `${itemElementsRef.current.get(key)?.clientHeight}px` } })) }, `${item}`))) }));
+};
+
+export { InfiniteScroll };
+//# sourceMappingURL=InfiniteScroll.js.map

package/InfiniteScroll.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InfiniteScroll.js","sources":["../src/InfiniteScroll.tsx"],"sourcesContent":["import {\n    Fragment,\n    ReactElement,\n    RefCallback,\n    useCallback,\n    useContext,\n    useEffect,\n    useLayoutEffect,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\n\nimport { initTouchHandlers } from '@hh.ru/magritte-internal-inertial-scroll';\nimport { AsyncDataContext } from '@hh.ru/magritte-ui-date-picker/AsyncDataContext';\n\nimport styles from './date-picker.less';\n\ninterface InfiniteScrollState<ItemType> {\n    items: Map<number, ItemType>;\n    firstRenderedKey: number;\n    lastRenderedKey: number;\n    needScrollCorrection: boolean;\n}\n\ninterface InfiniteScrollProps<ItemType> {\n    initialRenderedItems: number;\n    /** Высота невидимой части айтема, при достижении которой нужно рендерить еще один айтем за ним */\n    invisibleThreshold: number;\n    /** Высота видимой части айтема, при достижении которой вызывается колбек onVisibleItemChange с этим айтемом в параметрах */\n    visibleThreshold: number;\n    makeItemFunc: (key: number) => ItemType;\n    renderItemFunc: (item: ItemType) => ReactElement;\n    onVisibleItemChange: (item: ItemType, key: number) => void;\n}\n\nexport const InfiniteScroll = <ItemType,>({\n    initialRenderedItems,\n    invisibleThreshold,\n    visibleThreshold,\n    makeItemFunc,\n    renderItemFunc,\n    onVisibleItemChange,\n}: InfiniteScrollProps<ItemType>): ReactElement => {\n    const stateRef = useRef<InfiniteScrollState<ItemType>>({\n        items: new Map([...Array(initialRenderedItems).keys()].map((index) => [index, makeItemFunc(index)])),\n        firstRenderedKey: 0,\n        lastRenderedKey: initialRenderedItems - 1,\n        needScrollCorrection: false,\n    });\n    const [stateKey, setStateKey] = useState(0);\n\n    const asyncDataContext = useContext(AsyncDataContext);\n    const boundariesRef = useRef<{ top: number; bottom: number } | null>(null);\n    const itemElementsRef = useRef<Map<number, HTMLDivElement>>(new Map());\n    const translateYRef = useRef(0);\n    const visibleAreaMetricsRef = useRef<{ top: number; bottom: number } | null>(null);\n    const visibleItemKeyRef = useRef(0);\n    const wrapperRef = useRef<HTMLDivElement | null>(null);\n\n    const itemRefCallbacks = useMemo<Map<number, RefCallback<HTMLDivElement>>>(() => {\n        return new Map(\n            [...stateRef.current.items.entries()].map(([key]) => {\n                const callback = ((ref) => {\n                    if (ref !== null) {\n                        itemElementsRef.current.set(key, ref);\n                    }\n                }) as RefCallback<HTMLDivElement>;\n                return [key, callback];\n            })\n        );\n    }, [stateKey]); // eslint-disable-line react-hooks/exhaustive-deps\n\n    const addItemsIfNeeded = useCallback(\n        (scrollDirection: 'up' | 'down') => {\n            if (!visibleAreaMetricsRef.current) {\n                return;\n            }\n\n            const { items, firstRenderedKey, lastRenderedKey } = stateRef.current;\n\n            // скролл вверх\n            if (scrollDirection === 'up') {\n                // самый верхний видимый айтем близко к верхнему краю экрана — нужно рендерить еще один сверху\n                const firstRenderedItemElement = itemElementsRef.current.get(firstRenderedKey);\n                if (firstRenderedItemElement) {\n                    const firstRenderedItemMetrics = firstRenderedItemElement.getBoundingClientRect();\n                    if (visibleAreaMetricsRef.current.top - firstRenderedItemMetrics.top < invisibleThreshold) {\n                        if (!items.has(firstRenderedKey - 1)) {\n                            stateRef.current.items = new Map([\n                                [firstRenderedKey - 1, makeItemFunc(firstRenderedKey - 1)],\n                                ...items.entries(),\n                            ]);\n                            stateRef.current.needScrollCorrection = true;\n                        }\n                        stateRef.current.firstRenderedKey = firstRenderedKey - 1;\n                        stateRef.current.lastRenderedKey = lastRenderedKey - 1;\n                        setStateKey(Math.random());\n                    }\n                }\n\n                // последний пересекший верхнюю границу видимой области запоминаем как visible item\n                for (let key = firstRenderedKey; key < lastRenderedKey; key += 1) {\n                    if (stateRef.current.items.has(key) && itemElementsRef.current.has(key)) {\n                        const itemElement = itemElementsRef.current.get(key) as HTMLElement;\n                        if (\n                            itemElement.getBoundingClientRect().bottom - visibleAreaMetricsRef.current.top >\n                            visibleThreshold\n                        ) {\n                            if (key !== visibleItemKeyRef.current) {\n                                onVisibleItemChange(stateRef.current.items.get(key) as ItemType, key);\n                                visibleItemKeyRef.current = key;\n                            }\n                            break;\n                        }\n                    }\n                }\n            }\n\n            // скролл вниз\n            if (scrollDirection === 'down') {\n                // самый нижний видимый айтем близко к нижнему краю экрана — нужно рендерить еще один снизу\n                const lastRenderedItemElement = itemElementsRef.current.get(lastRenderedKey);\n                if (lastRenderedItemElement) {\n                    const lastRenderedItemMetrics = lastRenderedItemElement.getBoundingClientRect();\n                    if (lastRenderedItemMetrics.bottom - visibleAreaMetricsRef.current.bottom < invisibleThreshold) {\n                        if (!items.has(lastRenderedKey + 1)) {\n                            stateRef.current.items = new Map([\n                                ...items.entries(),\n                                [lastRenderedKey + 1, makeItemFunc(lastRenderedKey + 1)],\n                            ]);\n                        }\n                        stateRef.current.firstRenderedKey = firstRenderedKey + 1;\n                        stateRef.current.lastRenderedKey = lastRenderedKey + 1;\n                        setStateKey(Math.random());\n                    }\n                }\n\n                // последний пересекший нижнюю границу видимой области запоминаем как visible item\n                for (let key = lastRenderedKey; key > firstRenderedKey; key -= 1) {\n                    if (stateRef.current.items.has(key) && itemElementsRef.current.has(key)) {\n                        const itemElement = itemElementsRef.current.get(key) as HTMLElement;\n                        if (\n                            visibleAreaMetricsRef.current.bottom - itemElement.getBoundingClientRect().top >\n                            visibleThreshold\n                        ) {\n                            if (key !== visibleItemKeyRef.current) {\n                                onVisibleItemChange(stateRef.current.items.get(key) as ItemType, key);\n                                visibleItemKeyRef.current = key;\n                            }\n                            break;\n                        }\n                    }\n                }\n            }\n        },\n        [invisibleThreshold, visibleThreshold, makeItemFunc, onVisibleItemChange, setStateKey]\n    );\n\n    useEffect(() => {\n        const wrapper = wrapperRef.current;\n        if (!wrapper) {\n            return void 0;\n        }\n\n        const handleTouchMove = (event: TouchEvent) => {\n            event.preventDefault();\n            event.stopPropagation();\n        };\n\n        wrapper.addEventListener('touchmove', handleTouchMove);\n        return () => wrapper.removeEventListener('touchmove', handleTouchMove);\n    }, []);\n\n    useEffect(() => {\n        return initTouchHandlers('vertical', wrapperRef, (event) => {\n            if (!wrapperRef.current) {\n                return;\n            }\n\n            // если достигнут лимит лоадеров, не даем скроллить за границы первого и последнего айтема\n            if (asyncDataContext !== null && asyncDataContext.isLimitExceeded() && boundariesRef.current !== null) {\n                const translateY = translateYRef.current + event.delta;\n                if (translateY > boundariesRef.current.bottom && translateY < boundariesRef.current.top) {\n                    translateYRef.current = translateY;\n                }\n            } else {\n                translateYRef.current += event.delta;\n                addItemsIfNeeded(event.delta > 0 ? 'up' : 'down');\n            }\n\n            wrapperRef.current.style.transform = `translateY(${translateYRef.current}px)`;\n        });\n    }, [addItemsIfNeeded]); // eslint-disable-line react-hooks/exhaustive-deps\n\n    useLayoutEffect(() => {\n        if (!visualViewport || !wrapperRef.current) {\n            return;\n        }\n\n        if (!visibleAreaMetricsRef.current) {\n            visibleAreaMetricsRef.current = { top: wrapperRef.current.offsetTop, bottom: visualViewport.height };\n        }\n\n        const { firstRenderedKey, lastRenderedKey, needScrollCorrection } = stateRef.current;\n        const firstRenderedItemElement = itemElementsRef.current.get(firstRenderedKey);\n        const lastRenderedItemElement = itemElementsRef.current.get(lastRenderedKey);\n        if (firstRenderedItemElement && lastRenderedItemElement) {\n            // если мы добавили айтем сверху, чтобы скролл не прыгал, компенсируем его на высоту самого верхнего айтема\n            if (needScrollCorrection) {\n                stateRef.current.needScrollCorrection = false;\n                translateYRef.current -= firstRenderedItemElement.clientHeight;\n                if (boundariesRef.current !== null) {\n                    boundariesRef.current.top -= firstRenderedItemElement.clientHeight;\n                }\n                wrapperRef.current.style.transform = `translateY(${translateYRef.current}px)`;\n            }\n\n            // если достигнут лимит лоадеров, запоминаем границы первого и последнего айтема и не даем скроллить за них\n            if (asyncDataContext !== null && !asyncDataContext.isLimitExceeded()) {\n                const top =\n                    translateYRef.current +\n                    visibleAreaMetricsRef.current.top -\n                    firstRenderedItemElement.getBoundingClientRect().top;\n                const bottom =\n                    translateYRef.current +\n                    visibleAreaMetricsRef.current.bottom -\n                    lastRenderedItemElement.getBoundingClientRect().bottom;\n                boundariesRef.current = { top, bottom };\n            }\n        }\n    }, [stateKey]); // eslint-disable-line react-hooks/exhaustive-deps\n\n    return (\n        <div className={styles.infiniteScrollWrapper} ref={wrapperRef}>\n            {[...stateRef.current.items.entries()].map(([key, item]) => (\n                <Fragment key={`${item}`}>\n                    {key >= stateRef.current.firstRenderedKey && key <= stateRef.current.lastRenderedKey ? (\n                        <div ref={itemRefCallbacks.get(key)}>{renderItemFunc(item)}</div>\n                    ) : (\n                        <div style={{ height: `${itemElementsRef.current.get(key)?.clientHeight}px` }} />\n                    )}\n                </Fragment>\n            ))}\n        </div>\n    );\n};\n"],"names":["_jsx"],"mappings":";;;;;;AAoCa,MAAA,cAAc,GAAG,CAAY,EACtC,oBAAoB,EACpB,kBAAkB,EAClB,gBAAgB,EAChB,YAAY,EACZ,cAAc,EACd,mBAAmB,GACS,KAAkB;IAC9C,MAAM,QAAQ,GAAG,MAAM,CAAgC;AACnD,QAAA,KAAK,EAAE,IAAI,GAAG,CAAC,CAAC,GAAG,KAAK,CAAC,oBAAoB,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,KAAK,CAAC,KAAK,EAAE,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;AACpG,QAAA,gBAAgB,EAAE,CAAC;QACnB,eAAe,EAAE,oBAAoB,GAAG,CAAC;AACzC,QAAA,oBAAoB,EAAE,KAAK;AAC9B,KAAA,CAAC,CAAC;IACH,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;AAE5C,IAAA,MAAM,gBAAgB,GAAG,UAAU,CAAC,gBAAgB,CAAC,CAAC;AACtD,IAAA,MAAM,aAAa,GAAG,MAAM,CAAyC,IAAI,CAAC,CAAC;IAC3E,MAAM,eAAe,GAAG,MAAM,CAA8B,IAAI,GAAG,EAAE,CAAC,CAAC;AACvE,IAAA,MAAM,aAAa,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;AAChC,IAAA,MAAM,qBAAqB,GAAG,MAAM,CAAyC,IAAI,CAAC,CAAC;AACnF,IAAA,MAAM,iBAAiB,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;AACpC,IAAA,MAAM,UAAU,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;AAEvD,IAAA,MAAM,gBAAgB,GAAG,OAAO,CAA2C,MAAK;QAC5E,OAAO,IAAI,GAAG,CACV,CAAC,GAAG,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,KAAI;AAChD,YAAA,MAAM,QAAQ,IAAI,CAAC,GAAG,KAAI;gBACtB,IAAI,GAAG,KAAK,IAAI,EAAE;oBACd,eAAe,CAAC,OAAO,CAAC,GAAG,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;AACzC,iBAAA;AACL,aAAC,CAAgC,CAAC;AAClC,YAAA,OAAO,CAAC,GAAG,EAAE,QAAQ,CAAC,CAAC;SAC1B,CAAC,CACL,CAAC;AACN,KAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;AAEf,IAAA,MAAM,gBAAgB,GAAG,WAAW,CAChC,CAAC,eAA8B,KAAI;AAC/B,QAAA,IAAI,CAAC,qBAAqB,CAAC,OAAO,EAAE;YAChC,OAAO;AACV,SAAA;QAED,MAAM,EAAE,KAAK,EAAE,gBAAgB,EAAE,eAAe,EAAE,GAAG,QAAQ,CAAC,OAAO,CAAC;;QAGtE,IAAI,eAAe,KAAK,IAAI,EAAE;;YAE1B,MAAM,wBAAwB,GAAG,eAAe,CAAC,OAAO,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;AAC/E,YAAA,IAAI,wBAAwB,EAAE;AAC1B,gBAAA,MAAM,wBAAwB,GAAG,wBAAwB,CAAC,qBAAqB,EAAE,CAAC;gBAClF,IAAI,qBAAqB,CAAC,OAAO,CAAC,GAAG,GAAG,wBAAwB,CAAC,GAAG,GAAG,kBAAkB,EAAE;oBACvF,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,gBAAgB,GAAG,CAAC,CAAC,EAAE;AAClC,wBAAA,QAAQ,CAAC,OAAO,CAAC,KAAK,GAAG,IAAI,GAAG,CAAC;4BAC7B,CAAC,gBAAgB,GAAG,CAAC,EAAE,YAAY,CAAC,gBAAgB,GAAG,CAAC,CAAC,CAAC;4BAC1D,GAAG,KAAK,CAAC,OAAO,EAAE;AACrB,yBAAA,CAAC,CAAC;AACH,wBAAA,QAAQ,CAAC,OAAO,CAAC,oBAAoB,GAAG,IAAI,CAAC;AAChD,qBAAA;oBACD,QAAQ,CAAC,OAAO,CAAC,gBAAgB,GAAG,gBAAgB,GAAG,CAAC,CAAC;oBACzD,QAAQ,CAAC,OAAO,CAAC,eAAe,GAAG,eAAe,GAAG,CAAC,CAAC;AACvD,oBAAA,WAAW,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;AAC9B,iBAAA;AACJ,aAAA;;AAGD,YAAA,KAAK,IAAI,GAAG,GAAG,gBAAgB,EAAE,GAAG,GAAG,eAAe,EAAE,GAAG,IAAI,CAAC,EAAE;AAC9D,gBAAA,IAAI,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,IAAI,eAAe,CAAC,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE;oBACrE,MAAM,WAAW,GAAG,eAAe,CAAC,OAAO,CAAC,GAAG,CAAC,GAAG,CAAgB,CAAC;oBACpE,IACI,WAAW,CAAC,qBAAqB,EAAE,CAAC,MAAM,GAAG,qBAAqB,CAAC,OAAO,CAAC,GAAG;AAC9E,wBAAA,gBAAgB,EAClB;AACE,wBAAA,IAAI,GAAG,KAAK,iBAAiB,CAAC,OAAO,EAAE;AACnC,4BAAA,mBAAmB,CAAC,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,CAAa,EAAE,GAAG,CAAC,CAAC;AACtE,4BAAA,iBAAiB,CAAC,OAAO,GAAG,GAAG,CAAC;AACnC,yBAAA;wBACD,MAAM;AACT,qBAAA;AACJ,iBAAA;AACJ,aAAA;AACJ,SAAA;;QAGD,IAAI,eAAe,KAAK,MAAM,EAAE;;YAE5B,MAAM,uBAAuB,GAAG,eAAe,CAAC,OAAO,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;AAC7E,YAAA,IAAI,uBAAuB,EAAE;AACzB,gBAAA,MAAM,uBAAuB,GAAG,uBAAuB,CAAC,qBAAqB,EAAE,CAAC;gBAChF,IAAI,uBAAuB,CAAC,MAAM,GAAG,qBAAqB,CAAC,OAAO,CAAC,MAAM,GAAG,kBAAkB,EAAE;oBAC5F,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,eAAe,GAAG,CAAC,CAAC,EAAE;AACjC,wBAAA,QAAQ,CAAC,OAAO,CAAC,KAAK,GAAG,IAAI,GAAG,CAAC;4BAC7B,GAAG,KAAK,CAAC,OAAO,EAAE;4BAClB,CAAC,eAAe,GAAG,CAAC,EAAE,YAAY,CAAC,eAAe,GAAG,CAAC,CAAC,CAAC;AAC3D,yBAAA,CAAC,CAAC;AACN,qBAAA;oBACD,QAAQ,CAAC,OAAO,CAAC,gBAAgB,GAAG,gBAAgB,GAAG,CAAC,CAAC;oBACzD,QAAQ,CAAC,OAAO,CAAC,eAAe,GAAG,eAAe,GAAG,CAAC,CAAC;AACvD,oBAAA,WAAW,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;AAC9B,iBAAA;AACJ,aAAA;;AAGD,YAAA,KAAK,IAAI,GAAG,GAAG,eAAe,EAAE,GAAG,GAAG,gBAAgB,EAAE,GAAG,IAAI,CAAC,EAAE;AAC9D,gBAAA,IAAI,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,IAAI,eAAe,CAAC,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE;oBACrE,MAAM,WAAW,GAAG,eAAe,CAAC,OAAO,CAAC,GAAG,CAAC,GAAG,CAAgB,CAAC;oBACpE,IACI,qBAAqB,CAAC,OAAO,CAAC,MAAM,GAAG,WAAW,CAAC,qBAAqB,EAAE,CAAC,GAAG;AAC9E,wBAAA,gBAAgB,EAClB;AACE,wBAAA,IAAI,GAAG,KAAK,iBAAiB,CAAC,OAAO,EAAE;AACnC,4BAAA,mBAAmB,CAAC,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,CAAa,EAAE,GAAG,CAAC,CAAC;AACtE,4BAAA,iBAAiB,CAAC,OAAO,GAAG,GAAG,CAAC;AACnC,yBAAA;wBACD,MAAM;AACT,qBAAA;AACJ,iBAAA;AACJ,aAAA;AACJ,SAAA;AACL,KAAC,EACD,CAAC,kBAAkB,EAAE,gBAAgB,EAAE,YAAY,EAAE,mBAAmB,EAAE,WAAW,CAAC,CACzF,CAAC;IAEF,SAAS,CAAC,MAAK;AACX,QAAA,MAAM,OAAO,GAAG,UAAU,CAAC,OAAO,CAAC;QACnC,IAAI,CAAC,OAAO,EAAE;YACV,OAAO,KAAK,CAAC,CAAC;AACjB,SAAA;AAED,QAAA,MAAM,eAAe,GAAG,CAAC,KAAiB,KAAI;YAC1C,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,KAAK,CAAC,eAAe,EAAE,CAAC;AAC5B,SAAC,CAAC;AAEF,QAAA,OAAO,CAAC,gBAAgB,CAAC,WAAW,EAAE,eAAe,CAAC,CAAC;QACvD,OAAO,MAAM,OAAO,CAAC,mBAAmB,CAAC,WAAW,EAAE,eAAe,CAAC,CAAC;KAC1E,EAAE,EAAE,CAAC,CAAC;IAEP,SAAS,CAAC,MAAK;QACX,OAAO,iBAAiB,CAAC,UAAU,EAAE,UAAU,EAAE,CAAC,KAAK,KAAI;AACvD,YAAA,IAAI,CAAC,UAAU,CAAC,OAAO,EAAE;gBACrB,OAAO;AACV,aAAA;;AAGD,YAAA,IAAI,gBAAgB,KAAK,IAAI,IAAI,gBAAgB,CAAC,eAAe,EAAE,IAAI,aAAa,CAAC,OAAO,KAAK,IAAI,EAAE;gBACnG,MAAM,UAAU,GAAG,aAAa,CAAC,OAAO,GAAG,KAAK,CAAC,KAAK,CAAC;AACvD,gBAAA,IAAI,UAAU,GAAG,aAAa,CAAC,OAAO,CAAC,MAAM,IAAI,UAAU,GAAG,aAAa,CAAC,OAAO,CAAC,GAAG,EAAE;AACrF,oBAAA,aAAa,CAAC,OAAO,GAAG,UAAU,CAAC;AACtC,iBAAA;AACJ,aAAA;AAAM,iBAAA;AACH,gBAAA,aAAa,CAAC,OAAO,IAAI,KAAK,CAAC,KAAK,CAAC;AACrC,gBAAA,gBAAgB,CAAC,KAAK,CAAC,KAAK,GAAG,CAAC,GAAG,IAAI,GAAG,MAAM,CAAC,CAAC;AACrD,aAAA;AAED,YAAA,UAAU,CAAC,OAAO,CAAC,KAAK,CAAC,SAAS,GAAG,CAAA,WAAA,EAAc,aAAa,CAAC,OAAO,CAAA,GAAA,CAAK,CAAC;AAClF,SAAC,CAAC,CAAC;AACP,KAAC,EAAE,CAAC,gBAAgB,CAAC,CAAC,CAAC;IAEvB,eAAe,CAAC,MAAK;AACjB,QAAA,IAAI,CAAC,cAAc,IAAI,CAAC,UAAU,CAAC,OAAO,EAAE;YACxC,OAAO;AACV,SAAA;AAED,QAAA,IAAI,CAAC,qBAAqB,CAAC,OAAO,EAAE;AAChC,YAAA,qBAAqB,CAAC,OAAO,GAAG,EAAE,GAAG,EAAE,UAAU,CAAC,OAAO,CAAC,SAAS,EAAE,MAAM,EAAE,cAAc,CAAC,MAAM,EAAE,CAAC;AACxG,SAAA;QAED,MAAM,EAAE,gBAAgB,EAAE,eAAe,EAAE,oBAAoB,EAAE,GAAG,QAAQ,CAAC,OAAO,CAAC;QACrF,MAAM,wBAAwB,GAAG,eAAe,CAAC,OAAO,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;QAC/E,MAAM,uBAAuB,GAAG,eAAe,CAAC,OAAO,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;QAC7E,IAAI,wBAAwB,IAAI,uBAAuB,EAAE;;AAErD,YAAA,IAAI,oBAAoB,EAAE;AACtB,gBAAA,QAAQ,CAAC,OAAO,CAAC,oBAAoB,GAAG,KAAK,CAAC;AAC9C,gBAAA,aAAa,CAAC,OAAO,IAAI,wBAAwB,CAAC,YAAY,CAAC;AAC/D,gBAAA,IAAI,aAAa,CAAC,OAAO,KAAK,IAAI,EAAE;oBAChC,aAAa,CAAC,OAAO,CAAC,GAAG,IAAI,wBAAwB,CAAC,YAAY,CAAC;AACtE,iBAAA;AACD,gBAAA,UAAU,CAAC,OAAO,CAAC,KAAK,CAAC,SAAS,GAAG,CAAA,WAAA,EAAc,aAAa,CAAC,OAAO,CAAA,GAAA,CAAK,CAAC;AACjF,aAAA;;YAGD,IAAI,gBAAgB,KAAK,IAAI,IAAI,CAAC,gBAAgB,CAAC,eAAe,EAAE,EAAE;AAClE,gBAAA,MAAM,GAAG,GACL,aAAa,CAAC,OAAO;oBACrB,qBAAqB,CAAC,OAAO,CAAC,GAAG;AACjC,oBAAA,wBAAwB,CAAC,qBAAqB,EAAE,CAAC,GAAG,CAAC;AACzD,gBAAA,MAAM,MAAM,GACR,aAAa,CAAC,OAAO;oBACrB,qBAAqB,CAAC,OAAO,CAAC,MAAM;AACpC,oBAAA,uBAAuB,CAAC,qBAAqB,EAAE,CAAC,MAAM,CAAC;gBAC3D,aAAa,CAAC,OAAO,GAAG,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC;AAC3C,aAAA;AACJ,SAAA;AACL,KAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,QACIA,GAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,qBAAqB,EAAE,GAAG,EAAE,UAAU,EAAA,QAAA,EACxD,CAAC,GAAG,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,IAAI,CAAC,MACnDA,GAAC,CAAA,QAAQ,EACJ,EAAA,QAAA,EAAA,GAAG,IAAI,QAAQ,CAAC,OAAO,CAAC,gBAAgB,IAAI,GAAG,IAAI,QAAQ,CAAC,OAAO,CAAC,eAAe,IAChFA,GAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,gBAAgB,CAAC,GAAG,CAAC,GAAG,CAAC,EAAA,QAAA,EAAG,cAAc,CAAC,IAAI,CAAC,EAAA,CAAO,KAEjEA,GAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,EAAE,MAAM,EAAE,CAAA,EAAG,eAAe,CAAC,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,YAAY,CAAA,EAAA,CAAI,EAAE,EAAI,CAAA,CACpF,EALU,EAAA,CAAA,EAAG,IAAI,CAAA,CAAE,CAMb,CACd,CAAC,EACA,CAAA,EACR;AACN;;;;"}

package/InfoDatePicker.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { InfoDatePickerProps } from './types';
+export declare const InfoDatePicker: FC<InfoDatePickerProps>;
+export declare const UncontrolledInfoDatePicker: FC<InfoDatePickerProps>;

package/InfoDatePicker.js

@@ -0,0 +1,49 @@
+import './index.css';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useCallback } from 'react';
+import { InfoDayPicker } from './DayPicker.js';
+import { Header } from './Header.js';
+import { MonthPicker } from './MonthPicker.js';
+import { Weekdays } from './Weekdays.js';
+import { YearPicker } from './YearPicker.js';
+import { useDatePickerControls } from './useDatePickerControls.js';
+import { useDisplayDate } from './utils.js';
+import { Divider } from '@hh.ru/magritte-ui-divider';
+import { s as styles } from './date-picker-47a3d918.js';
+import 'classnames';
+import 'date-fns';
+import 'date-fns/constants';
+import '@hh.ru/magritte-common-use-disabled';
+import '@hh.ru/magritte-ui-bottom-sheet';
+import './useDisabledDatesFunc.js';
+import './AsyncDataContext.js';
+import './useIntervalPicker.js';
+import '@hh.ru/magritte-ui-icon/icon';
+import '@hh.ru/magritte-ui-navigation-bar';
+import '@hh.ru/magritte-ui-spacing';
+import '@hh.ru/magritte-ui-tooltip';
+import '@hh.ru/magritte-ui-typography';
+import '@hh.ru/magritte-ui-action';
+
+const InfoDatePicker = ({ 
+// настройки функциональности
+displayDate: _displayDate, enabledCalendars, holidays, shortWorkdays, 
+// колбеки
+onDisplayDateChange, 
+// настройки внешнего вида
+activeHeader, alignHeader, headerMonthFormat, locale, showControls, showDivider = true, showHeader = true, showHeaderDate, showWeekdays = true, }) => {
+    const displayDate = useDisplayDate(_displayDate);
+    const { calendar, switchCalendar, zoomIntoMonth, zoomIntoYear, goToNextPeriod, goToPrevPeriod } = useDatePickerControls(enabledCalendars, displayDate, onDisplayDateChange);
+    return (jsx("div", { className: styles.layout, children: jsxs("div", { className: styles.datePicker, children: [showHeader && (jsx(Header, { calendar: calendar, displayDate: displayDate, activeHeader: activeHeader, alignHeader: alignHeader, goToNextPeriod: goToNextPeriod, goToPrevPeriod: goToPrevPeriod, headerMonthFormat: headerMonthFormat, locale: locale, showControls: showControls, showHeaderDate: showHeaderDate, switchCalendar: switchCalendar })), showWeekdays && calendar === 'day' && jsx(Weekdays, { locale: locale }), showDivider && (showHeader || showWeekdays) && jsx(Divider, {}), calendar === 'day' && (jsx(InfoDayPicker, { displayDate: displayDate, holidays: holidays, shortWorkdays: shortWorkdays })), calendar === 'month' && (jsx(MonthPicker, { locale: locale, displayDate: displayDate, onDateSelect: zoomIntoMonth })), calendar === 'year' && jsx(YearPicker, { displayDate: displayDate, onDateSelect: zoomIntoYear })] }) }));
+};
+const UncontrolledInfoDatePicker = ({ displayDate: initialDisplayDate, onDisplayDateChange, ...props }) => {
+    const [displayDate, setDisplayDate] = useState(useDisplayDate(initialDisplayDate));
+    const handleDisplayDateChange = useCallback((value) => {
+        onDisplayDateChange?.(value);
+        setDisplayDate(value);
+    }, [onDisplayDateChange, setDisplayDate]);
+    return jsx(InfoDatePicker, { ...props, displayDate: displayDate, onDisplayDateChange: handleDisplayDateChange });
+};
+
+export { InfoDatePicker, UncontrolledInfoDatePicker };
+//# sourceMappingURL=InfoDatePicker.js.map

package/InfoDatePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InfoDatePicker.js","sources":["../src/InfoDatePicker.tsx"],"sourcesContent":["import { FC, useCallback, useState } from 'react';\n\nimport { InfoDayPicker } from '@hh.ru/magritte-ui-date-picker/DayPicker';\nimport { Header } from '@hh.ru/magritte-ui-date-picker/Header';\nimport { MonthPicker } from '@hh.ru/magritte-ui-date-picker/MonthPicker';\nimport { Weekdays } from '@hh.ru/magritte-ui-date-picker/Weekdays';\nimport { YearPicker } from '@hh.ru/magritte-ui-date-picker/YearPicker';\nimport { DateType, InfoDatePickerProps } from '@hh.ru/magritte-ui-date-picker/types';\nimport { useDatePickerControls } from '@hh.ru/magritte-ui-date-picker/useDatePickerControls';\nimport { useDisplayDate } from '@hh.ru/magritte-ui-date-picker/utils';\nimport { Divider } from '@hh.ru/magritte-ui-divider';\n\nimport styles from './date-picker.less';\n\nexport const InfoDatePicker: FC<InfoDatePickerProps> = ({\n    // настройки функциональности\n    displayDate: _displayDate,\n    enabledCalendars,\n    holidays,\n    shortWorkdays,\n    // колбеки\n    onDisplayDateChange,\n    // настройки внешнего вида\n    activeHeader,\n    alignHeader,\n    headerMonthFormat,\n    locale,\n    showControls,\n    showDivider = true,\n    showHeader = true,\n    showHeaderDate,\n    showWeekdays = true,\n}) => {\n    const displayDate = useDisplayDate(_displayDate);\n    const { calendar, switchCalendar, zoomIntoMonth, zoomIntoYear, goToNextPeriod, goToPrevPeriod } =\n        useDatePickerControls(enabledCalendars, displayDate, onDisplayDateChange);\n\n    return (\n        <div className={styles.layout}>\n            <div className={styles.datePicker}>\n                {showHeader && (\n                    <Header\n                        calendar={calendar}\n                        displayDate={displayDate}\n                        activeHeader={activeHeader}\n                        alignHeader={alignHeader}\n                        goToNextPeriod={goToNextPeriod}\n                        goToPrevPeriod={goToPrevPeriod}\n                        headerMonthFormat={headerMonthFormat}\n                        locale={locale}\n                        showControls={showControls}\n                        showHeaderDate={showHeaderDate}\n                        switchCalendar={switchCalendar}\n                    />\n                )}\n                {showWeekdays && calendar === 'day' && <Weekdays locale={locale} />}\n                {showDivider && (showHeader || showWeekdays) && <Divider />}\n                {calendar === 'day' && (\n                    <InfoDayPicker displayDate={displayDate} holidays={holidays} shortWorkdays={shortWorkdays} />\n                )}\n                {calendar === 'month' && (\n                    <MonthPicker locale={locale} displayDate={displayDate} onDateSelect={zoomIntoMonth} />\n                )}\n                {calendar === 'year' && <YearPicker displayDate={displayDate} onDateSelect={zoomIntoYear} />}\n            </div>\n        </div>\n    );\n};\n\nexport const UncontrolledInfoDatePicker: FC<InfoDatePickerProps> = ({\n    displayDate: initialDisplayDate,\n    onDisplayDateChange,\n    ...props\n}) => {\n    const [displayDate, setDisplayDate] = useState<DateType>(useDisplayDate(initialDisplayDate));\n\n    const handleDisplayDateChange = useCallback(\n        (value: DateType) => {\n            onDisplayDateChange?.(value);\n            setDisplayDate(value);\n        },\n        [onDisplayDateChange, setDisplayDate]\n    );\n\n    return <InfoDatePicker {...props} displayDate={displayDate} onDisplayDateChange={handleDisplayDateChange} />;\n};\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAcO,MAAM,cAAc,GAA4B,CAAC;AACpD;AACA,WAAW,EAAE,YAAY,EACzB,gBAAgB,EAChB,QAAQ,EACR,aAAa;AACb;AACA,mBAAmB;AACnB;AACA,YAAY,EACZ,WAAW,EACX,iBAAiB,EACjB,MAAM,EACN,YAAY,EACZ,WAAW,GAAG,IAAI,EAClB,UAAU,GAAG,IAAI,EACjB,cAAc,EACd,YAAY,GAAG,IAAI,GACtB,KAAI;AACD,IAAA,MAAM,WAAW,GAAG,cAAc,CAAC,YAAY,CAAC,CAAC;IACjD,MAAM,EAAE,QAAQ,EAAE,cAAc,EAAE,aAAa,EAAE,YAAY,EAAE,cAAc,EAAE,cAAc,EAAE,GAC3F,qBAAqB,CAAC,gBAAgB,EAAE,WAAW,EAAE,mBAAmB,CAAC,CAAC;AAE9E,IAAA,QACIA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,MAAM,EACzB,QAAA,EAAAC,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,UAAU,aAC5B,UAAU,KACPD,GAAA,CAAC,MAAM,EACH,EAAA,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,YAAY,EAC1B,WAAW,EAAE,WAAW,EACxB,cAAc,EAAE,cAAc,EAC9B,cAAc,EAAE,cAAc,EAC9B,iBAAiB,EAAE,iBAAiB,EACpC,MAAM,EAAE,MAAM,EACd,YAAY,EAAE,YAAY,EAC1B,cAAc,EAAE,cAAc,EAC9B,cAAc,EAAE,cAAc,GAChC,CACL,EACA,YAAY,IAAI,QAAQ,KAAK,KAAK,IAAIA,GAAA,CAAC,QAAQ,EAAC,EAAA,MAAM,EAAE,MAAM,GAAI,EAClE,WAAW,KAAK,UAAU,IAAI,YAAY,CAAC,IAAIA,IAAC,OAAO,EAAA,EAAA,CAAG,EAC1D,QAAQ,KAAK,KAAK,KACfA,GAAA,CAAC,aAAa,EAAC,EAAA,WAAW,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAE,aAAa,EAAE,aAAa,EAAI,CAAA,CAChG,EACA,QAAQ,KAAK,OAAO,KACjBA,GAAC,CAAA,WAAW,EAAC,EAAA,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,EAAE,aAAa,GAAI,CACzF,EACA,QAAQ,KAAK,MAAM,IAAIA,GAAA,CAAC,UAAU,EAAA,EAAC,WAAW,EAAE,WAAW,EAAE,YAAY,EAAE,YAAY,EAAA,CAAI,CAC1F,EAAA,CAAA,EAAA,CACJ,EACR;AACN,EAAE;AAEW,MAAA,0BAA0B,GAA4B,CAAC,EAChE,WAAW,EAAE,kBAAkB,EAC/B,mBAAmB,EACnB,GAAG,KAAK,EACX,KAAI;AACD,IAAA,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAW,cAAc,CAAC,kBAAkB,CAAC,CAAC,CAAC;AAE7F,IAAA,MAAM,uBAAuB,GAAG,WAAW,CACvC,CAAC,KAAe,KAAI;AAChB,QAAA,mBAAmB,GAAG,KAAK,CAAC,CAAC;QAC7B,cAAc,CAAC,KAAK,CAAC,CAAC;AAC1B,KAAC,EACD,CAAC,mBAAmB,EAAE,cAAc,CAAC,CACxC,CAAC;AAEF,IAAA,OAAOA,GAAC,CAAA,cAAc,EAAK,EAAA,GAAA,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,mBAAmB,EAAE,uBAAuB,GAAI,CAAC;AACjH;;;;"}

package/IntervalDatePicker.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { IntervalDatePickerProps } from './types';
+export declare const IntervalDatePicker: FC<IntervalDatePickerProps>;
+export declare const UncontrolledIntervalDatePicker: FC<IntervalDatePickerProps>;

package/IntervalDatePicker.js

@@ -0,0 +1,125 @@
+import './index.css';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef, useState, useMemo, useCallback, useRef, useEffect } from 'react';
+import { add } from 'date-fns';
+import { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';
+import { AsyncDataLoader } from './AsyncDataLoader.js';
+import { AsyncDataStore } from './AsyncDataStore.js';
+import { IntervalDayPicker } from './DayPicker.js';
+import { Header } from './Header.js';
+import { InfiniteScroll } from './InfiniteScroll.js';
+import { IntervalMonthPicker } from './MonthPicker.js';
+import { Weekdays } from './Weekdays.js';
+import { WithArrowNavigationHOC } from './WithArrowNavigationHOC.js';
+import { IntervalYearPicker } from './YearPicker.js';
+import { useDatePickerControls } from './useDatePickerControls.js';
+import { useDisplayDate } from './utils.js';
+import { Divider } from '@hh.ru/magritte-ui-divider';
+import { s as styles } from './date-picker-47a3d918.js';
+import 'classnames';
+import './AsyncDataContext.js';
+import '@hh.ru/magritte-ui-loader';
+import 'date-fns/constants';
+import '@hh.ru/magritte-common-use-disabled';
+import '@hh.ru/magritte-ui-bottom-sheet';
+import './useDisabledDatesFunc.js';
+import './useIntervalPicker.js';
+import '@hh.ru/magritte-ui-icon/icon';
+import '@hh.ru/magritte-ui-navigation-bar';
+import '@hh.ru/magritte-ui-spacing';
+import '@hh.ru/magritte-ui-tooltip';
+import '@hh.ru/magritte-ui-typography';
+import '@hh.ru/magritte-ui-action';
+import '@hh.ru/magritte-internal-inertial-scroll';
+import '@hh.ru/magritte-common-keyboard';
+import '@hh.ru/magritte-common-use-multiple-refs';
+
+const SingleLayoutIntervalDatePickerRenderFunc = forwardRef(({ 
+// настройки функциональности
+disabledDates, disabledDatesFunc, displayDate: _displayDate, enabledCalendars, minDate, maxDate, selectionStart, selectionEnd, 
+// колбеки
+onDisplayDateChange, onStartSelect, onEndSelect, 
+// настройки внешнего вида
+activeHeader, alignHeader, headerMonthFormat, locale, showAdjacentDays = true, showControls, showDivider = true, showHeader = true, showHeaderDate, showWeekdays = true, }, ref) => {
+    const displayDate = useDisplayDate(_displayDate, selectionStart);
+    const [hoveredDate, setHoveredDate] = useState(null);
+    const [dragState, setDragState] = useState(null);
+    const { calendar, switchCalendar, zoomIntoMonth, zoomIntoYear, goToNextPeriod, goToPrevPeriod } = useDatePickerControls(enabledCalendars, displayDate, onDisplayDateChange);
+    return (jsx("div", { className: styles.layout, ref: ref, children: jsx(AsyncDataStore, { disabledDatesFunc: disabledDatesFunc, children: jsxs(AsyncDataLoader, { children: [showHeader && (jsx(Header, { calendar: calendar, displayDate: displayDate, activeHeader: activeHeader, alignHeader: alignHeader, goToNextPeriod: goToNextPeriod, goToPrevPeriod: goToPrevPeriod, headerMonthFormat: headerMonthFormat, locale: locale, showControls: showControls, showHeaderDate: showHeaderDate, switchCalendar: switchCalendar })), showWeekdays && calendar === 'day' && jsx(Weekdays, { locale: locale }), showDivider && (showHeader || showWeekdays) && jsx(Divider, {}), calendar === 'day' && (jsx(IntervalDayPicker, { disabledDates: disabledDates, displayDate: displayDate, selectionStart: selectionStart, selectionEnd: selectionEnd, hoveredDate: hoveredDate, dragState: dragState, onDateHover: setHoveredDate, onDateDrag: setDragState, onStartSelect: onStartSelect, onEndSelect: onEndSelect, showAdjacentDays: showAdjacentDays, minDate: minDate, maxDate: maxDate })), calendar === 'month' && (jsx(IntervalMonthPicker, { locale: locale, displayDate: displayDate, selectionStart: selectionStart, selectionEnd: selectionEnd, onStartSelect: zoomIntoMonth, onEndSelect: zoomIntoMonth })), calendar === 'year' && (jsx(IntervalYearPicker, { displayDate: displayDate, selectionStart: selectionStart, selectionEnd: selectionEnd, onStartSelect: zoomIntoYear, onEndSelect: zoomIntoYear }))] }) }) }));
+});
+SingleLayoutIntervalDatePickerRenderFunc.displayName = 'SingleLayoutIntervalDatePickerRenderFunc';
+const SingleLayoutIntervalDatePicker = WithArrowNavigationHOC(SingleLayoutIntervalDatePickerRenderFunc);
+const MobileMultiLayoutIntervalDatePicker = ({ 
+// настройки функциональности
+disabledDates, disabledDatesFunc, displayDate: _displayDate, selectionStart, selectionEnd, 
+// колбеки
+onStartSelect, onEndSelect, 
+// настройки внешнего вида
+headerMonthFormat, locale, showDivider = true, showHeader = true, showWeekdays = true, }) => {
+    const displayDate = useDisplayDate(_displayDate, selectionStart);
+    const makeDate = useCallback((index) => add(displayDate, { months: index }), [displayDate]);
+    const stickyRef = useRef(null);
+    const [visibleDate, setVisibleDate] = useState(displayDate);
+    const renderDate = useCallback((date) => {
+        return (jsxs(AsyncDataLoader, { children: [jsx(Header, { calendar: "day", displayDate: date, activeHeader: false, alignHeader: "left", headerMonthFormat: headerMonthFormat, locale: locale, showControls: false }), jsx(IntervalDayPicker, { disabledDates: disabledDates, displayDate: date, selectionStart: selectionStart, selectionEnd: selectionEnd, onStartSelect: onStartSelect, onEndSelect: onEndSelect, showAdjacentDays: false })] }));
+    }, [disabledDates, headerMonthFormat, locale, selectionStart, selectionEnd, onStartSelect, onEndSelect]);
+    const onVisibleItemChange = useCallback((date) => {
+        setVisibleDate(date);
+    }, [setVisibleDate]);
+    useEffect(() => {
+        if (stickyRef.current !== null) {
+            stickyRef.current.style.setProperty('--sticky-top', `${Math.floor(stickyRef.current.offsetTop)}px`);
+        }
+    }, []);
+    return (jsxs("div", { className: styles.layoutVertical, children: [jsxs("div", { className: styles.stickyWrapper, ref: stickyRef, children: [showHeader && (jsx(Header, { calendar: "month", displayDate: visibleDate, activeHeader: false, alignHeader: "left", locale: locale, showControls: false })), showWeekdays && jsx(Weekdays, { locale: locale }), showDivider && (showHeader || showWeekdays) && jsx(Divider, {})] }), jsx(AsyncDataStore, { disabledDatesFunc: disabledDatesFunc, parallelLoadersLimit: 1, children: jsx(InfiniteScroll, { initialRenderedItems: 5, invisibleThreshold: 300, visibleThreshold: 100, makeItemFunc: makeDate, renderItemFunc: renderDate, onVisibleItemChange: onVisibleItemChange }) })] }));
+};
+const DesktopMultiLayoutIntervalDatePickerRenderFunc = forwardRef(({ 
+// настройки функциональности
+disabledDates, disabledDatesFunc, displayDate, enabledCalendars, selectionStart, selectionEnd, 
+// колбеки
+onDisplayDateChange, onStartSelect, onEndSelect, 
+// настройки внешнего вида
+headerMonthFormat, locale, showControls, showDivider = true, showHeader = true, showHeaderDate, showWeekdays = true, }, ref) => {
+    const leftDisplayDate = useDisplayDate(displayDate, selectionStart);
+    const rightDisplayDate = useMemo(() => add(leftDisplayDate, { months: 1 }), [leftDisplayDate]);
+    const [hoveredDate, setHoveredDate] = useState(null);
+    const [dragState, setDragState] = useState(null);
+    const { goToNextPeriod, goToPrevPeriod } = useDatePickerControls(enabledCalendars, leftDisplayDate, onDisplayDateChange);
+    return (jsx("div", { className: styles.layoutHorizontal, ref: ref, children: jsxs(AsyncDataStore, { disabledDatesFunc: disabledDatesFunc, children: [jsxs(AsyncDataLoader, { children: [showHeader && (jsx(Header, { calendar: "day", displayDate: leftDisplayDate, activeHeader: false, alignHeader: "center", goToPrevPeriod: goToPrevPeriod, headerMonthFormat: headerMonthFormat, locale: locale, showControls: showControls, showHeaderDate: showHeaderDate, showNextControl: false })), showWeekdays && jsx(Weekdays, { locale: locale }), showDivider && (showHeader || showWeekdays) && jsx(Divider, {}), jsx(IntervalDayPicker, { disabledDates: disabledDates, displayDate: leftDisplayDate, selectionStart: selectionStart, selectionEnd: selectionEnd, hoveredDate: hoveredDate, dragState: dragState, onStartSelect: onStartSelect, onEndSelect: onEndSelect, onDateHover: setHoveredDate, onDateDrag: setDragState, showAdjacentDays: false })] }), jsxs(AsyncDataLoader, { children: [showHeader && (jsx(Header, { calendar: "day", displayDate: rightDisplayDate, activeHeader: false, alignHeader: "center", goToNextPeriod: goToNextPeriod, headerMonthFormat: headerMonthFormat, locale: locale, showControls: showControls, showHeaderDate: showHeaderDate, showPrevControl: false })), showWeekdays && jsx(Weekdays, { locale: locale }), showDivider && (showHeader || showWeekdays) && jsx(Divider, {}), jsx(IntervalDayPicker, { disabledDates: disabledDates, displayDate: rightDisplayDate, selectionStart: selectionStart, selectionEnd: selectionEnd, hoveredDate: hoveredDate, dragState: dragState, onStartSelect: onStartSelect, onEndSelect: onEndSelect, onDateHover: setHoveredDate, onDateDrag: setDragState, showAdjacentDays: false })] })] }) }));
+});
+DesktopMultiLayoutIntervalDatePickerRenderFunc.displayName = 'DesktopMultiLayoutIntervalDatePickerRenderFunc';
+const DesktopMultiLayoutIntervalDatePicker = WithArrowNavigationHOC(DesktopMultiLayoutIntervalDatePickerRenderFunc);
+const IntervalDatePicker = ({ layout = 'single', ...props }) => {
+    const { isMobile } = useBreakpoint();
+    if (layout === 'single') {
+        return jsx(SingleLayoutIntervalDatePicker, { ...props });
+    }
+    if (layout === 'multi' && isMobile) {
+        return jsx(MobileMultiLayoutIntervalDatePicker, { ...props });
+    }
+    if (layout === 'multi' && !isMobile) {
+        return jsx(DesktopMultiLayoutIntervalDatePicker, { ...props });
+    }
+    return null;
+};
+const UncontrolledIntervalDatePicker = ({ displayDate: initialDisplayDate, selectionStart: initialSelectionStart, selectionEnd: initialSelectionEnd, onDisplayDateChange, onStartSelect, onEndSelect, ...props }) => {
+    const [displayDate, setDisplayDate] = useState(useDisplayDate(initialDisplayDate, initialSelectionStart));
+    const [selectionStart, setSelectionStart] = useState(initialSelectionStart ?? null);
+    const [selectionEnd, setSelectionEnd] = useState(initialSelectionEnd ?? null);
+    const handleDisplayDateChange = useCallback((value) => {
+        onDisplayDateChange?.(value);
+        setDisplayDate(value);
+    }, [onDisplayDateChange, setDisplayDate]);
+    const handleStartSelect = useCallback((value) => {
+        onStartSelect?.(value);
+        setSelectionStart(value);
+    }, [onStartSelect, setSelectionStart]);
+    const handleEndSelect = useCallback((value) => {
+        onEndSelect?.(value);
+        setSelectionEnd(value);
+    }, [onEndSelect, setSelectionEnd]);
+    return (jsx(IntervalDatePicker, { ...props, displayDate: displayDate, onDisplayDateChange: handleDisplayDateChange, selectionStart: selectionStart, selectionEnd: selectionEnd, onStartSelect: handleStartSelect, onEndSelect: handleEndSelect }));
+};
+
+export { IntervalDatePicker, UncontrolledIntervalDatePicker };
+//# sourceMappingURL=IntervalDatePicker.js.map

package/IntervalDatePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IntervalDatePicker.js","sources":["../src/IntervalDatePicker.tsx"],"sourcesContent":["import { FC, forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { add } from 'date-fns';\n\nimport { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';\nimport { AsyncDataLoader } from '@hh.ru/magritte-ui-date-picker/AsyncDataLoader';\nimport { AsyncDataStore } from '@hh.ru/magritte-ui-date-picker/AsyncDataStore';\nimport { IntervalDayPicker } from '@hh.ru/magritte-ui-date-picker/DayPicker';\nimport { Header } from '@hh.ru/magritte-ui-date-picker/Header';\nimport { InfiniteScroll } from '@hh.ru/magritte-ui-date-picker/InfiniteScroll';\nimport { IntervalMonthPicker } from '@hh.ru/magritte-ui-date-picker/MonthPicker';\nimport { Weekdays } from '@hh.ru/magritte-ui-date-picker/Weekdays';\nimport { WithArrowNavigationHOC } from '@hh.ru/magritte-ui-date-picker/WithArrowNavigationHOC';\nimport { IntervalYearPicker } from '@hh.ru/magritte-ui-date-picker/YearPicker';\nimport { DateType, DragState, IntervalDatePickerProps } from '@hh.ru/magritte-ui-date-picker/types';\nimport { useDatePickerControls } from '@hh.ru/magritte-ui-date-picker/useDatePickerControls';\nimport { useDisplayDate } from '@hh.ru/magritte-ui-date-picker/utils';\nimport { Divider } from '@hh.ru/magritte-ui-divider';\n\nimport styles from './date-picker.less';\n\nconst SingleLayoutIntervalDatePickerRenderFunc = forwardRef<HTMLDivElement, Omit<IntervalDatePickerProps, 'layout'>>(\n    (\n        {\n            // настройки функциональности\n            disabledDates,\n            disabledDatesFunc,\n            displayDate: _displayDate,\n            enabledCalendars,\n            minDate,\n            maxDate,\n            selectionStart,\n            selectionEnd,\n            // колбеки\n            onDisplayDateChange,\n            onStartSelect,\n            onEndSelect,\n            // настройки внешнего вида\n            activeHeader,\n            alignHeader,\n            headerMonthFormat,\n            locale,\n            showAdjacentDays = true,\n            showControls,\n            showDivider = true,\n            showHeader = true,\n            showHeaderDate,\n            showWeekdays = true,\n        },\n        ref\n    ) => {\n        const displayDate = useDisplayDate(_displayDate, selectionStart);\n        const [hoveredDate, setHoveredDate] = useState<DateType | null>(null);\n        const [dragState, setDragState] = useState<DragState | null>(null);\n        const { calendar, switchCalendar, zoomIntoMonth, zoomIntoYear, goToNextPeriod, goToPrevPeriod } =\n            useDatePickerControls(enabledCalendars, displayDate, onDisplayDateChange);\n\n        return (\n            <div className={styles.layout} ref={ref}>\n                <AsyncDataStore disabledDatesFunc={disabledDatesFunc}>\n                    <AsyncDataLoader>\n                        {showHeader && (\n                            <Header\n                                calendar={calendar}\n                                displayDate={displayDate}\n                                activeHeader={activeHeader}\n                                alignHeader={alignHeader}\n                                goToNextPeriod={goToNextPeriod}\n                                goToPrevPeriod={goToPrevPeriod}\n                                headerMonthFormat={headerMonthFormat}\n                                locale={locale}\n                                showControls={showControls}\n                                showHeaderDate={showHeaderDate}\n                                switchCalendar={switchCalendar}\n                            />\n                        )}\n                        {showWeekdays && calendar === 'day' && <Weekdays locale={locale} />}\n                        {showDivider && (showHeader || showWeekdays) && <Divider />}\n                        {calendar === 'day' && (\n                            <IntervalDayPicker\n                                disabledDates={disabledDates}\n                                displayDate={displayDate}\n                                selectionStart={selectionStart}\n                                selectionEnd={selectionEnd}\n                                hoveredDate={hoveredDate}\n                                dragState={dragState}\n                                onDateHover={setHoveredDate}\n                                onDateDrag={setDragState}\n                                onStartSelect={onStartSelect}\n                                onEndSelect={onEndSelect}\n                                showAdjacentDays={showAdjacentDays}\n                                minDate={minDate}\n                                maxDate={maxDate}\n                            />\n                        )}\n                        {calendar === 'month' && (\n                            <IntervalMonthPicker\n                                locale={locale}\n                                displayDate={displayDate}\n                                selectionStart={selectionStart}\n                                selectionEnd={selectionEnd}\n                                onStartSelect={zoomIntoMonth}\n                                onEndSelect={zoomIntoMonth}\n                            />\n                        )}\n                        {calendar === 'year' && (\n                            <IntervalYearPicker\n                                displayDate={displayDate}\n                                selectionStart={selectionStart}\n                                selectionEnd={selectionEnd}\n                                onStartSelect={zoomIntoYear}\n                                onEndSelect={zoomIntoYear}\n                            />\n                        )}\n                    </AsyncDataLoader>\n                </AsyncDataStore>\n            </div>\n        );\n    }\n);\n\nSingleLayoutIntervalDatePickerRenderFunc.displayName = 'SingleLayoutIntervalDatePickerRenderFunc';\n\nconst SingleLayoutIntervalDatePicker = WithArrowNavigationHOC(SingleLayoutIntervalDatePickerRenderFunc);\n\nconst MobileMultiLayoutIntervalDatePicker: FC<Omit<IntervalDatePickerProps, 'layout'>> = ({\n    // настройки функциональности\n    disabledDates,\n    disabledDatesFunc,\n    displayDate: _displayDate,\n    selectionStart,\n    selectionEnd,\n    // колбеки\n    onStartSelect,\n    onEndSelect,\n    // настройки внешнего вида\n    headerMonthFormat,\n    locale,\n    showDivider = true,\n    showHeader = true,\n    showWeekdays = true,\n}) => {\n    const displayDate = useDisplayDate(_displayDate, selectionStart);\n    const makeDate = useCallback((index: number) => add(displayDate, { months: index }), [displayDate]);\n    const stickyRef = useRef<HTMLDivElement | null>(null);\n    const [visibleDate, setVisibleDate] = useState(displayDate);\n\n    const renderDate = useCallback(\n        (date: DateType) => {\n            return (\n                <AsyncDataLoader>\n                    <Header\n                        calendar=\"day\"\n                        displayDate={date}\n                        activeHeader={false}\n                        alignHeader=\"left\"\n                        headerMonthFormat={headerMonthFormat}\n                        locale={locale}\n                        showControls={false}\n                    />\n                    <IntervalDayPicker\n                        disabledDates={disabledDates}\n                        displayDate={date}\n                        selectionStart={selectionStart}\n                        selectionEnd={selectionEnd}\n                        onStartSelect={onStartSelect}\n                        onEndSelect={onEndSelect}\n                        showAdjacentDays={false}\n                    />\n                </AsyncDataLoader>\n            );\n        },\n        [disabledDates, headerMonthFormat, locale, selectionStart, selectionEnd, onStartSelect, onEndSelect]\n    );\n\n    const onVisibleItemChange = useCallback(\n        (date: DateType) => {\n            setVisibleDate(date);\n        },\n        [setVisibleDate]\n    );\n\n    useEffect(() => {\n        if (stickyRef.current !== null) {\n            stickyRef.current.style.setProperty('--sticky-top', `${Math.floor(stickyRef.current.offsetTop)}px`);\n        }\n    }, []);\n\n    return (\n        <div className={styles.layoutVertical}>\n            <div className={styles.stickyWrapper} ref={stickyRef}>\n                {showHeader && (\n                    <Header\n                        calendar=\"month\"\n                        displayDate={visibleDate}\n                        activeHeader={false}\n                        alignHeader=\"left\"\n                        locale={locale}\n                        showControls={false}\n                    />\n                )}\n                {showWeekdays && <Weekdays locale={locale} />}\n                {showDivider && (showHeader || showWeekdays) && <Divider />}\n            </div>\n            <AsyncDataStore disabledDatesFunc={disabledDatesFunc} parallelLoadersLimit={1}>\n                <InfiniteScroll\n                    initialRenderedItems={5}\n                    invisibleThreshold={300}\n                    visibleThreshold={100}\n                    makeItemFunc={makeDate}\n                    renderItemFunc={renderDate}\n                    onVisibleItemChange={onVisibleItemChange}\n                />\n            </AsyncDataStore>\n        </div>\n    );\n};\n\nconst DesktopMultiLayoutIntervalDatePickerRenderFunc = forwardRef<\n    HTMLDivElement,\n    Omit<IntervalDatePickerProps, 'layout'>\n>(\n    (\n        {\n            // настройки функциональности\n            disabledDates,\n            disabledDatesFunc,\n            displayDate,\n            enabledCalendars,\n            selectionStart,\n            selectionEnd,\n            // колбеки\n            onDisplayDateChange,\n            onStartSelect,\n            onEndSelect,\n            // настройки внешнего вида\n            headerMonthFormat,\n            locale,\n            showControls,\n            showDivider = true,\n            showHeader = true,\n            showHeaderDate,\n            showWeekdays = true,\n        },\n        ref\n    ) => {\n        const leftDisplayDate = useDisplayDate(displayDate, selectionStart);\n        const rightDisplayDate = useMemo(() => add(leftDisplayDate, { months: 1 }), [leftDisplayDate]);\n        const [hoveredDate, setHoveredDate] = useState<DateType | null>(null);\n        const [dragState, setDragState] = useState<DragState | null>(null);\n        const { goToNextPeriod, goToPrevPeriod } = useDatePickerControls(\n            enabledCalendars,\n            leftDisplayDate,\n            onDisplayDateChange\n        );\n\n        return (\n            <div className={styles.layoutHorizontal} ref={ref}>\n                <AsyncDataStore disabledDatesFunc={disabledDatesFunc}>\n                    <AsyncDataLoader>\n                        {showHeader && (\n                            <Header\n                                calendar=\"day\"\n                                displayDate={leftDisplayDate}\n                                activeHeader={false}\n                                alignHeader=\"center\"\n                                goToPrevPeriod={goToPrevPeriod}\n                                headerMonthFormat={headerMonthFormat}\n                                locale={locale}\n                                showControls={showControls}\n                                showHeaderDate={showHeaderDate}\n                                showNextControl={false}\n                            />\n                        )}\n                        {showWeekdays && <Weekdays locale={locale} />}\n                        {showDivider && (showHeader || showWeekdays) && <Divider />}\n                        <IntervalDayPicker\n                            disabledDates={disabledDates}\n                            displayDate={leftDisplayDate}\n                            selectionStart={selectionStart}\n                            selectionEnd={selectionEnd}\n                            hoveredDate={hoveredDate}\n                            dragState={dragState}\n                            onStartSelect={onStartSelect}\n                            onEndSelect={onEndSelect}\n                            onDateHover={setHoveredDate}\n                            onDateDrag={setDragState}\n                            showAdjacentDays={false}\n                        />\n                    </AsyncDataLoader>\n                    <AsyncDataLoader>\n                        {showHeader && (\n                            <Header\n                                calendar=\"day\"\n                                displayDate={rightDisplayDate}\n                                activeHeader={false}\n                                alignHeader=\"center\"\n                                goToNextPeriod={goToNextPeriod}\n                                headerMonthFormat={headerMonthFormat}\n                                locale={locale}\n                                showControls={showControls}\n                                showHeaderDate={showHeaderDate}\n                                showPrevControl={false}\n                            />\n                        )}\n                        {showWeekdays && <Weekdays locale={locale} />}\n                        {showDivider && (showHeader || showWeekdays) && <Divider />}\n                        <IntervalDayPicker\n                            disabledDates={disabledDates}\n                            displayDate={rightDisplayDate}\n                            selectionStart={selectionStart}\n                            selectionEnd={selectionEnd}\n                            hoveredDate={hoveredDate}\n                            dragState={dragState}\n                            onStartSelect={onStartSelect}\n                            onEndSelect={onEndSelect}\n                            onDateHover={setHoveredDate}\n                            onDateDrag={setDragState}\n                            showAdjacentDays={false}\n                        />\n                    </AsyncDataLoader>\n                </AsyncDataStore>\n            </div>\n        );\n    }\n);\n\nDesktopMultiLayoutIntervalDatePickerRenderFunc.displayName = 'DesktopMultiLayoutIntervalDatePickerRenderFunc';\n\nconst DesktopMultiLayoutIntervalDatePicker = WithArrowNavigationHOC(DesktopMultiLayoutIntervalDatePickerRenderFunc);\n\nexport const IntervalDatePicker: FC<IntervalDatePickerProps> = ({ layout = 'single', ...props }) => {\n    const { isMobile } = useBreakpoint();\n\n    if (layout === 'single') {\n        return <SingleLayoutIntervalDatePicker {...props} />;\n    }\n\n    if (layout === 'multi' && isMobile) {\n        return <MobileMultiLayoutIntervalDatePicker {...props} />;\n    }\n\n    if (layout === 'multi' && !isMobile) {\n        return <DesktopMultiLayoutIntervalDatePicker {...props} />;\n    }\n\n    return null;\n};\n\nexport const UncontrolledIntervalDatePicker: FC<IntervalDatePickerProps> = ({\n    displayDate: initialDisplayDate,\n    selectionStart: initialSelectionStart,\n    selectionEnd: initialSelectionEnd,\n    onDisplayDateChange,\n    onStartSelect,\n    onEndSelect,\n    ...props\n}) => {\n    const [displayDate, setDisplayDate] = useState<DateType>(useDisplayDate(initialDisplayDate, initialSelectionStart));\n    const [selectionStart, setSelectionStart] = useState<DateType | null>(initialSelectionStart ?? null);\n    const [selectionEnd, setSelectionEnd] = useState<DateType | null>(initialSelectionEnd ?? null);\n\n    const handleDisplayDateChange = useCallback(\n        (value: DateType) => {\n            onDisplayDateChange?.(value);\n            setDisplayDate(value);\n        },\n        [onDisplayDateChange, setDisplayDate]\n    );\n\n    const handleStartSelect = useCallback(\n        (value: DateType | null) => {\n            onStartSelect?.(value);\n            setSelectionStart(value);\n        },\n        [onStartSelect, setSelectionStart]\n    );\n\n    const handleEndSelect = useCallback(\n        (value: DateType | null) => {\n            onEndSelect?.(value);\n            setSelectionEnd(value);\n        },\n        [onEndSelect, setSelectionEnd]\n    );\n\n    return (\n        <IntervalDatePicker\n            {...props}\n            displayDate={displayDate}\n            onDisplayDateChange={handleDisplayDateChange}\n            selectionStart={selectionStart}\n            selectionEnd={selectionEnd}\n            onStartSelect={handleStartSelect}\n            onEndSelect={handleEndSelect}\n        />\n    );\n};\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/MonthPicker.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { MonthPickerProps, IntervalMonthPickerProps } from './types';
+export declare const MonthPicker: FC<MonthPickerProps>;
+export declare const IntervalMonthPicker: FC<IntervalMonthPickerProps>;

package/MonthPicker.js

@@ -0,0 +1,54 @@
+import './index.css';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import classnames from 'classnames';
+import { eachMonthOfInterval, startOfYear, endOfYear, isSameMonth, format, startOfMonth, endOfMonth } from 'date-fns';
+import { useDisabled } from '@hh.ru/magritte-common-use-disabled';
+import { useIntervalPicker } from './useIntervalPicker.js';
+import { s as styles } from './date-picker-47a3d918.js';
+import 'react';
+
+const MONTHS_IN_ROW = 3;
+const MonthPicker = ({ displayDate, selectedDate, onDateSelect, locale }) => {
+    const dates = eachMonthOfInterval({ start: startOfYear(displayDate), end: endOfYear(displayDate) });
+    const forceDisabled = useDisabled();
+    return (jsx("div", { className: classnames(styles.calendar, styles.calendarMonths), "data-qa": "date-picker-months", children: dates.map((date) => {
+            const isSelected = !!selectedDate && isSameMonth(date, selectedDate);
+            return (jsx("div", { className: styles.item, children: jsx("button", { className: classnames(styles.text, {
+                        [styles.textDisabled]: forceDisabled,
+                        [styles.textSelected]: isSelected,
+                        [styles.textToday]: isSameMonth(date, Date.now()),
+                        [styles.textUnselected]: !forceDisabled && !isSelected,
+                    }), onClick: () => onDateSelect?.(date), children: format(date, 'LLLL', { locale }) }) }, `${date}`));
+        }) }));
+};
+const IntervalMonthPicker = ({ displayDate, selectionStart, selectionEnd, onStartSelect, onEndSelect, locale, }) => {
+    const dates = eachMonthOfInterval({ start: startOfYear(displayDate), end: endOfYear(displayDate) });
+    const datesProps = useIntervalPicker({
+        dates,
+        selectionStart: selectionStart && startOfMonth(selectionStart),
+        selectionEnd: selectionEnd && endOfMonth(selectionEnd),
+        onStartSelect,
+        onEndSelect,
+        isEqual: isSameMonth,
+    });
+    return (jsx("div", { className: classnames(styles.calendar, styles.calendarMonths), "data-qa": "date-picker-months", children: dates.map((date, index) => {
+            const { isDisabled, isIntervalStart, isIntervalEnd, isSelected, isWithinInterval, mouseHandlers } = datesProps[index];
+            const isIntervalRowStart = isWithinInterval && !isIntervalStart && index % MONTHS_IN_ROW === 0;
+            const isIntervalRowEnd = isWithinInterval && !isIntervalEnd && index % MONTHS_IN_ROW === MONTHS_IN_ROW - 1;
+            return (jsxs("div", { className: classnames(styles.item, {
+                    [styles.itemInterval]: isWithinInterval,
+                    [styles.itemIntervalStart]: isIntervalStart,
+                    [styles.itemIntervalEnd]: isIntervalEnd,
+                    [styles.itemIntervalRowStart]: isIntervalRowStart,
+                    [styles.itemIntervalRowEnd]: isIntervalRowEnd,
+                }), children: [jsx("button", { ...mouseHandlers, className: classnames(styles.text, {
+                            [styles.textDisabled]: isDisabled,
+                            [styles.textSelected]: isSelected,
+                            [styles.textToday]: isSameMonth(date, Date.now()),
+                            [styles.textUnselected]: !isDisabled && !isSelected,
+                        }), children: format(date, 'LLLL', { locale }) }), isWithinInterval && jsx("div", { className: styles.substrate })] }, `${date}`));
+        }) }));
+};
+
+export { IntervalMonthPicker, MonthPicker };
+//# sourceMappingURL=MonthPicker.js.map

package/MonthPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MonthPicker.js","sources":["../src/MonthPicker.tsx"],"sourcesContent":["import { FC } from 'react';\nimport classnames from 'classnames';\nimport { format, eachMonthOfInterval, isSameMonth, startOfMonth, endOfMonth, startOfYear, endOfYear } from 'date-fns';\n\nimport { useDisabled } from '@hh.ru/magritte-common-use-disabled';\nimport { MonthPickerProps, IntervalMonthPickerProps } from '@hh.ru/magritte-ui-date-picker/types';\nimport { useIntervalPicker } from '@hh.ru/magritte-ui-date-picker/useIntervalPicker';\n\nimport styles from './date-picker.less';\n\nconst MONTHS_IN_ROW = 3;\n\nexport const MonthPicker: FC<MonthPickerProps> = ({ displayDate, selectedDate, onDateSelect, locale }) => {\n    const dates = eachMonthOfInterval({ start: startOfYear(displayDate), end: endOfYear(displayDate) });\n    const forceDisabled = useDisabled();\n\n    return (\n        <div className={classnames(styles.calendar, styles.calendarMonths)} data-qa=\"date-picker-months\">\n            {dates.map((date) => {\n                const isSelected = !!selectedDate && isSameMonth(date, selectedDate);\n\n                return (\n                    <div className={styles.item} key={`${date}`}>\n                        <button\n                            className={classnames(styles.text, {\n                                [styles.textDisabled]: forceDisabled,\n                                [styles.textSelected]: isSelected,\n                                [styles.textToday]: isSameMonth(date, Date.now()),\n                                [styles.textUnselected]: !forceDisabled && !isSelected,\n                            })}\n                            onClick={() => onDateSelect?.(date)}\n                        >\n                            {format(date, 'LLLL', { locale })}\n                        </button>\n                    </div>\n                );\n            })}\n        </div>\n    );\n};\n\nexport const IntervalMonthPicker: FC<IntervalMonthPickerProps> = ({\n    displayDate,\n    selectionStart,\n    selectionEnd,\n    onStartSelect,\n    onEndSelect,\n    locale,\n}) => {\n    const dates = eachMonthOfInterval({ start: startOfYear(displayDate), end: endOfYear(displayDate) });\n\n    const datesProps = useIntervalPicker({\n        dates,\n        selectionStart: selectionStart && startOfMonth(selectionStart),\n        selectionEnd: selectionEnd && endOfMonth(selectionEnd),\n        onStartSelect,\n        onEndSelect,\n        isEqual: isSameMonth,\n    });\n\n    return (\n        <div className={classnames(styles.calendar, styles.calendarMonths)} data-qa=\"date-picker-months\">\n            {dates.map((date, index) => {\n                const { isDisabled, isIntervalStart, isIntervalEnd, isSelected, isWithinInterval, mouseHandlers } =\n                    datesProps[index];\n                const isIntervalRowStart = isWithinInterval && !isIntervalStart && index % MONTHS_IN_ROW === 0;\n                const isIntervalRowEnd =\n                    isWithinInterval && !isIntervalEnd && index % MONTHS_IN_ROW === MONTHS_IN_ROW - 1;\n\n                return (\n                    <div\n                        className={classnames(styles.item, {\n                            [styles.itemInterval]: isWithinInterval,\n                            [styles.itemIntervalStart]: isIntervalStart,\n                            [styles.itemIntervalEnd]: isIntervalEnd,\n                            [styles.itemIntervalRowStart]: isIntervalRowStart,\n                            [styles.itemIntervalRowEnd]: isIntervalRowEnd,\n                        })}\n                        key={`${date}`}\n                    >\n                        <button\n                            {...mouseHandlers}\n                            className={classnames(styles.text, {\n                                [styles.textDisabled]: isDisabled,\n                                [styles.textSelected]: isSelected,\n                                [styles.textToday]: isSameMonth(date, Date.now()),\n                                [styles.textUnselected]: !isDisabled && !isSelected,\n                            })}\n                        >\n                            {format(date, 'LLLL', { locale })}\n                        </button>\n                        {isWithinInterval && <div className={styles.substrate} />}\n                    </div>\n                );\n            })}\n        </div>\n    );\n};\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/Weekdays.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { Locale } from 'date-fns';
+export declare const Weekdays: FC<{
+    locale: Locale;
+}>;

package/Weekdays.js

@@ -0,0 +1,11 @@
+import './index.css';
+import { jsx } from 'react/jsx-runtime';
+import { s as styles } from './date-picker-47a3d918.js';
+
+const DAYS = [1, 2, 3, 4, 5, 6, 0];
+const Weekdays = ({ locale }) => {
+    return (jsx("div", { className: styles.weekdays, "data-qa": "date-picker-weekdays", children: DAYS.map((eachWeekday) => (jsx("div", { className: styles.weekday, children: locale.localize.day(eachWeekday, { width: 'short' }) }, `${eachWeekday}`))) }));
+};
+
+export { Weekdays };
+//# sourceMappingURL=Weekdays.js.map

package/Weekdays.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Weekdays.js","sources":["../src/Weekdays.tsx"],"sourcesContent":["import { FC } from 'react';\nimport { Day, Locale } from 'date-fns';\n\nimport styles from './date-picker.less';\n\nconst DAYS: Day[] = [1, 2, 3, 4, 5, 6, 0];\n\nexport const Weekdays: FC<{ locale: Locale }> = ({ locale }) => {\n    return (\n        <div className={styles.weekdays} data-qa=\"date-picker-weekdays\">\n            {DAYS.map((eachWeekday) => (\n                <div className={styles.weekday} key={`${eachWeekday}`}>\n                    {locale.localize.day(eachWeekday, { width: 'short' })}\n                </div>\n            ))}\n        </div>\n    );\n};\n"],"names":["_jsx"],"mappings":";;;AAKA,MAAM,IAAI,GAAU,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;MAE7B,QAAQ,GAA2B,CAAC,EAAE,MAAM,EAAE,KAAI;IAC3D,QACIA,aAAK,SAAS,EAAE,MAAM,CAAC,QAAQ,EAAU,SAAA,EAAA,sBAAsB,EAC1D,QAAA,EAAA,IAAI,CAAC,GAAG,CAAC,CAAC,WAAW,MAClBA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,OAAO,EACzB,QAAA,EAAA,MAAM,CAAC,QAAQ,CAAC,GAAG,CAAC,WAAW,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC,EADpB,EAAA,CAAA,EAAG,WAAW,CAAA,CAAE,CAE/C,CACT,CAAC,EACA,CAAA,EACR;AACN;;;;"}

package/WithArrowNavigationHOC.d.ts

@@ -0,0 +1,2 @@
+import { ComponentType, ForwardRefExoticComponent } from 'react';
+export declare const WithArrowNavigationHOC: <Props>(Component: ForwardRefExoticComponent<Props>) => ComponentType<Props>;