@hh.ru/magritte-ui-picker-wheel 1.0.3 → 1.0.5

package/PickerWheel.js

@@ -1,15 +1,18 @@
 import './index.css';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useRef, useState, useEffect, useCallback, useLayoutEffect, useMemo } from 'react';
+import { useRef, useContext, useState, useEffect, useCallback, useLayoutEffect } from 'react';
 import classnames from 'classnames';
 import { initScrollHandlers } from '@hh.ru/magritte-internal-custom-scroll';
+import { BottomSheetContext } from '@hh.ru/magritte-ui-bottom-sheet';
 import { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';
 
-var styles = {"picker-wheel":"magritte-picker-wheel___VaPvG_1-0-3","pickerWheel":"magritte-picker-wheel___VaPvG_1-0-3","selected-item-background":"magritte-selected-item-background___UnBPm_1-0-3","selectedItemBackground":"magritte-selected-item-background___UnBPm_1-0-3","columns":"magritte-columns___I7bCB_1-0-3","touch-events-overlay":"magritte-touch-events-overlay___c3YOp_1-0-3","touchEventsOverlay":"magritte-touch-events-overlay___c3YOp_1-0-3","fixed-height":"magritte-fixed-height___BLw9W_1-0-3","fixedHeight":"magritte-fixed-height___BLw9W_1-0-3","column-wrapper":"magritte-column-wrapper___yRwai_1-0-3","columnWrapper":"magritte-column-wrapper___yRwai_1-0-3","circular-column-wrapper":"magritte-circular-column-wrapper___4KG7c_1-0-3","circularColumnWrapper":"magritte-circular-column-wrapper___4KG7c_1-0-3","wide-column-wrapper":"magritte-wide-column-wrapper___nvecx_1-0-3","wideColumnWrapper":"magritte-wide-column-wrapper___nvecx_1-0-3","full-width-column-wrapper":"magritte-full-width-column-wrapper___oxhh1_1-0-3","fullWidthColumnWrapper":"magritte-full-width-column-wrapper___oxhh1_1-0-3","column":"magritte-column___IMYca_1-0-3","item":"magritte-item___4RQVs_1-0-3","align-left":"magritte-align-left___PXJt0_1-0-3","alignLeft":"magritte-align-left___PXJt0_1-0-3","align-right":"magritte-align-right___0yc2S_1-0-3","alignRight":"magritte-align-right___0yc2S_1-0-3","disabled":"magritte-disabled___d3ukm_1-0-3","selected":"magritte-selected___Nar3H_1-0-3"};
+var styles = {"picker-wheel":"magritte-picker-wheel___VaPvG_1-0-5","pickerWheel":"magritte-picker-wheel___VaPvG_1-0-5","selected-item-background":"magritte-selected-item-background___UnBPm_1-0-5","selectedItemBackground":"magritte-selected-item-background___UnBPm_1-0-5","columns":"magritte-columns___I7bCB_1-0-5","touch-events-overlay":"magritte-touch-events-overlay___c3YOp_1-0-5","touchEventsOverlay":"magritte-touch-events-overlay___c3YOp_1-0-5","fixed-height":"magritte-fixed-height___BLw9W_1-0-5","fixedHeight":"magritte-fixed-height___BLw9W_1-0-5","column-wrapper":"magritte-column-wrapper___yRwai_1-0-5","columnWrapper":"magritte-column-wrapper___yRwai_1-0-5","column-position-wrapper":"magritte-column-position-wrapper___wQTIu_1-0-5","columnPositionWrapper":"magritte-column-position-wrapper___wQTIu_1-0-5","wide-column-wrapper":"magritte-wide-column-wrapper___nvecx_1-0-5","wideColumnWrapper":"magritte-wide-column-wrapper___nvecx_1-0-5","full-width-column-wrapper":"magritte-full-width-column-wrapper___oxhh1_1-0-5","fullWidthColumnWrapper":"magritte-full-width-column-wrapper___oxhh1_1-0-5","column":"magritte-column___IMYca_1-0-5","item":"magritte-item___4RQVs_1-0-5","align-left":"magritte-align-left___PXJt0_1-0-5","alignLeft":"magritte-align-left___PXJt0_1-0-5","align-right":"magritte-align-right___0yc2S_1-0-5","alignRight":"magritte-align-right___0yc2S_1-0-5","disabled":"magritte-disabled___d3ukm_1-0-5","selected":"magritte-selected___Nar3H_1-0-5"};
 
+const FIXED_HEIGHT_ITEMS = 7;
 const ITEM_HEIGHT = 48;
 const COLUMN_WIDTH = 64;
 const WIDE_COLUMN_WIDTH = 105;
+const SELECTED_ITEM_SCALE = 22 / 18;
 /**
  * Превращает массив точек в массив интервалов
  * [0, 50, 100, 200] => [{ left: 0, right: 50 }, { left: 50, right: 100 }, { left: 100, right: 200 }]
@@ -50,247 +53,307 @@ const makeScrollAreas = (columnCount, containerWidth, showDelimiter) => {
             throw new Error('Unexpected column count');
     }
 };
+const floorToOdd = (value) => (value % 2 !== 1 ? value - 1 : value);
 const range = (start, end) => {
     return [...Array(end - start).keys()].map((_, index) => index + start);
 };
 const translateY = (value) => `translate3d(0, ${value}px, 0)`;
-const useArrayOfRefs = (length) => {
-    const refs = useRef([]);
-    const refCallbacks = useMemo(() => {
-        return [...Array(length).keys()].map((index) => {
-            return (element) => {
-                refs.current[index] = element;
-            };
-        });
-    }, [length]);
-    return [refs, refCallbacks];
-};
 const makeInitialState = (columns) => {
     return {
-        activeColumnsIndex: null,
+        activeColumnIndex: null,
         animations: [],
         containerMetrics: null,
-        columns: columns.map((column) => ({
-            circular: column.circular,
-            firstCloneIndex: 0,
-            lastCloneIndex: 0,
-            itemCount: column.items.length,
-            translateY: 0,
-            translateYCorrection: null,
-        })),
+        columns: columns.map((column) => {
+            const itemElementCallbacks = new Map();
+            const columnState = {
+                circular: column.circular,
+                cloneCount: 1,
+                disabledItems: new Set(),
+                itemCount: column.items.length,
+                translateY: 0,
+                visibleItemCount: null,
+                columnElement: null,
+                columnElementCallback: (element) => (columnState.columnElement = element),
+                columnWrapper: null,
+                columnWrapperCallback: (element) => (columnState.columnWrapper = element),
+                itemElements: new Map(),
+                itemElementCallbacks: {
+                    get: (itemIndex) => {
+                        if (!itemElementCallbacks.has(itemIndex)) {
+                            itemElementCallbacks.set(itemIndex, (element) => {
+                                columnState.itemElements.set(itemIndex, element);
+                            });
+                        }
+                        return itemElementCallbacks.get(itemIndex);
+                    },
+                },
+            };
+            return columnState;
+        }),
         scrollAreas: null,
+        scrollDirection: null,
     };
 };
 const PickerWheel = ({ columns, fixedHeight, onChange, selectedIndexes, showDelimiter, }) => {
+    if (columns.length !== selectedIndexes.length) {
+        throw new Error('selectedIndexes.length does not match columns.length');
+    }
     const stateRef = useRef(makeInitialState(columns));
-    const [stateKey, setStateKey] = useState(0);
+    if (columns.length !== stateRef.current.columns.length ||
+        columns.some((column, columnIndex) => {
+            return (column.items.length !== stateRef.current.columns[columnIndex].itemCount ||
+                column.circular !== stateRef.current.columns[columnIndex].circular);
+        })) {
+        stateRef.current = makeInitialState(columns);
+    }
+    columns.forEach((column, columnIndex) => (stateRef.current.columns[columnIndex].disabledItems = new Set(column.items.reduce((result, item, itemIndex) => (item.disabled ? [...result, itemIndex] : result), []))));
+    const bottomSheetContext = useContext(BottomSheetContext);
     const containerRef = useRef(null);
+    const isFixedHeight = bottomSheetContext.height !== 'full-screen' || fixedHeight;
     const onChangeRef = useRef(onChange);
     onChangeRef.current = onChange;
     const selectedIndexesRef = useRef(selectedIndexes);
     selectedIndexesRef.current = selectedIndexes;
+    const [_, setStateKey] = useState(0);
+    const [touchActionActive, setTouchActionActive] = useState(false);
     const visible = useBreakpoint().isMobile;
-    const [columnWrapperRefs, columnWrapperRefCallbacks] = useArrayOfRefs(columns.length);
-    const [columnRefs, columnRefCallbacks] = useArrayOfRefs(columns.length);
     useEffect(() => {
         const container = containerRef.current;
         if (!container) {
             return void 0;
         }
         // вычисляем колонку, которую пользователь начал скроллить
-        const handleTouchStart = (event) => {
-            event.preventDefault();
-            event.stopPropagation();
-            if (event.changedTouches.length === 1 && stateRef.current.containerMetrics !== null) {
-                stateRef.current.activeColumnsIndex =
+        const setActiveColumn = (clientX) => {
+            const containerMetrics = stateRef.current.containerMetrics;
+            if (containerMetrics !== null) {
+                stateRef.current.activeColumnIndex =
                     stateRef.current.scrollAreas?.findIndex((interval) => {
-                        const relativeX = event.changedTouches[0].clientX - stateRef.current.containerMetrics.left;
+                        const relativeX = clientX - containerMetrics.left;
                         return relativeX >= interval.left && relativeX <= interval.right;
                     }) ?? null;
             }
         };
-        // предотвращаем скролл боттомшита
+        const handleTouchStart = (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            event.changedTouches.length === 1 && setActiveColumn(event.changedTouches[0].clientX);
+        };
         const handleTouchMove = (event) => {
             event.preventDefault();
             event.stopPropagation();
         };
+        const handleWheel = (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            setActiveColumn(event.clientX);
+        };
         container.addEventListener('touchstart', handleTouchStart, { passive: false });
         container.addEventListener('touchmove', handleTouchMove, { passive: false });
+        container.addEventListener('wheel', handleWheel, { passive: false });
         return () => {
             container.removeEventListener('touchstart', handleTouchStart);
             container.removeEventListener('touchmove', handleTouchMove);
+            container.removeEventListener('wheel', handleWheel);
         };
     }, []);
-    /**
-     * Верхний край колонки близко к верхнему краю враппера — клонируем айтемы сверху
-     * */
-    const cloneItemsBefore = useCallback((columnState) => {
-        if (columnState.translateY > -100) {
-            columnState.firstCloneIndex -= 1;
-            columnState.translateYCorrection = -columnState.itemCount * ITEM_HEIGHT;
-            setStateKey((stateKey) => stateKey + 1);
-        }
-    }, [setStateKey]);
-    /**
-     * Нижний край колонки близко к нижнему краю враппера – клонируем айтемы снизу
-     * */
-    const cloneItemsAfter = useCallback((columnState, columnElement, columnWrapper) => {
-        if (columnElement.clientHeight + columnState.translateY - columnWrapper.clientHeight < 100) {
-            columnState.lastCloneIndex += 1;
-            setStateKey((stateKey) => stateKey + 1);
-        }
-    }, [setStateKey]);
     useEffect(() => {
-        return initScrollHandlers({
-            axis: 'vertical',
-            wrapperRef: containerRef,
-            onTouchMove: (event) => {
-                // TODO cache layout metrics
-                if (stateRef.current.activeColumnsIndex !== null) {
-                    const columnIndex = stateRef.current.activeColumnsIndex;
-                    const columnState = stateRef.current?.columns[columnIndex];
-                    const columnElement = columnRefs.current?.[columnIndex];
-                    const columnWrapper = columnWrapperRefs.current?.[columnIndex];
-                    if (!columnState || !columnElement || !columnWrapper) {
-                        return;
+        const handleScroll = (event) => {
+            if (stateRef.current.activeColumnIndex !== null && stateRef.current.containerMetrics !== null) {
+                const columnIndex = stateRef.current.activeColumnIndex;
+                const columnState = stateRef.current?.columns[columnIndex];
+                const { columnElement, columnWrapper } = columnState;
+                if (!columnState || !columnState.visibleItemCount || !columnElement || !columnWrapper) {
+                    return;
+                }
+                stateRef.current.scrollDirection = event.delta > 0 ? 'up' : 'down';
+                columnState.translateY += event.delta;
+                // бесконечный скролл
+                if (columnState.circular) {
+                    // скролл вверх
+                    // верхний край колонки близко к верхнему краю враппера
+                    if (event.delta > 0 &&
+                        stateRef.current.containerMetrics.height / 2 + columnState.translateY > -100) {
+                        columnState.translateY -= columnState.itemCount * ITEM_HEIGHT;
                     }
-                    columnState.translateY += event.delta;
-                    // бесконечный скролл — добавляем айтемы по мере необходимости
-                    if (columnState.circular) {
-                        // скролл вверх
-                        if (event.delta > 0) {
-                            cloneItemsBefore(columnState);
-                        }
-                        // скролл вниз
-                        if (event.delta < 0) {
-                            cloneItemsAfter(columnState, columnElement, columnWrapper);
-                        }
+                    // скролл вниз
+                    // нижний край колонки близко к нижнему краю враппера
+                    if (event.delta < 0 &&
+                        columnState.cloneCount * columnState.itemCount * ITEM_HEIGHT +
+                            columnState.translateY -
+                            stateRef.current.containerMetrics.height / 2 <
+                            100) {
+                        columnState.translateY += columnState.itemCount * ITEM_HEIGHT;
                     }
-                    // скролл ограничен — делаем чтобы колонку было нельзя проскроллить за допустимые границы
-                    if (!columnState.circular) {
-                        // скролл вверх
-                        if (event.delta > 0) {
-                            // translateY, когда колонка проскроллена в самый верх (выбран первый айтем)
-                            const minAllowedTranslateY = columnWrapper.clientHeight / 2 - ITEM_HEIGHT / 2;
-                            columnState.translateY = Math.min(columnState.translateY, minAllowedTranslateY);
+                }
+                // скролл ограничен — делаем чтобы колонку было нельзя проскроллить за допустимые границы
+                if (!columnState.circular) {
+                    // скролл вверх
+                    if (event.delta > 0) {
+                        // translateY, когда колонка проскроллена в самый верх (выбран первый айтем)
+                        const minAllowedTranslateY = 0;
+                        columnState.translateY = Math.min(columnState.translateY, minAllowedTranslateY);
+                    }
+                    // скролл вниз
+                    if (event.delta < 0) {
+                        // translateY, когда колонка проскроллена в самый низ (выбран последний айтем)
+                        const maxAllowedTranslateY = (columnState.itemCount - 1) * ITEM_HEIGHT;
+                        columnState.translateY = Math.max(columnState.translateY, -maxAllowedTranslateY);
+                    }
+                }
+                // анимация увеличения ближайшего к центру айтема
+                const selectedItemIndex = Math.round(-columnState.translateY / ITEM_HEIGHT);
+                if (columnState.itemElements.has(selectedItemIndex)) {
+                    const halfItemHeight = ITEM_HEIGHT / 2;
+                    columnState.itemElements.get(selectedItemIndex).style.transform =
+                        `scale(${1 + (SELECTED_ITEM_SCALE - 1) * Math.abs((Math.abs(columnState.translateY % ITEM_HEIGHT) - halfItemHeight) / halfItemHeight)})`;
+                }
+                columnElement.style.transform = translateY(columnState.translateY);
+                setTouchActionActive(true);
+            }
+        };
+        const handleScrollEnd = () => {
+            if (stateRef.current.activeColumnIndex !== null) {
+                const columnIndex = stateRef.current.activeColumnIndex;
+                const columnState = stateRef.current?.columns[columnIndex];
+                const { columnElement, columnWrapper } = columnState;
+                if (!columnState || !columnElement || !columnWrapper) {
+                    return;
+                }
+                // если колонка зациклена, у нее могут быть отрендерены клоны для бесконечного скролла
+                // поэтому нужно взять остаток от деления на количество айтемов в колонке
+                const _selectedItemIndex = Math.round(Math.abs(columnState.translateY) / ITEM_HEIGHT) % columnState.itemCount;
+                let selectedItemIndex = _selectedItemIndex;
+                // если выбранный айтем disabled, ищем ближайший не disabled в направлении скролла
+                if (columnState.disabledItems.has(selectedItemIndex)) {
+                    do {
+                        if (stateRef.current.scrollDirection === 'up') {
+                            selectedItemIndex -= 1;
+                            if (selectedItemIndex < 0) {
+                                selectedItemIndex = columnState.itemCount - 1;
+                            }
                         }
-                        // скролл вниз
-                        if (event.delta < 0) {
-                            // translateY, когда колонка проскроллена в самый низ (выбран последний айтем)
-                            const maxAllowedTranslateY = columnWrapper.clientHeight / 2 - columnElement.clientHeight + ITEM_HEIGHT / 2;
-                            columnState.translateY = Math.max(columnState.translateY, maxAllowedTranslateY);
+                        else if (stateRef.current.scrollDirection === 'down') {
+                            selectedItemIndex += 1;
+                            if (selectedItemIndex > columnState.itemCount - 1) {
+                                selectedItemIndex = 0;
+                            }
                         }
-                    }
-                    columnElement.style.transform = translateY(columnState.translateY);
+                        else {
+                            break;
+                        }
+                    } while (columnState.disabledItems.has(selectedItemIndex) &&
+                        selectedItemIndex !== _selectedItemIndex);
                 }
-            },
-            onTouchEnd: () => {
-                if (stateRef.current.activeColumnsIndex !== null) {
-                    const columnIndex = stateRef.current.activeColumnsIndex;
-                    const columnState = stateRef.current?.columns[columnIndex];
-                    const columnElement = columnRefs.current?.[columnIndex];
-                    const columnWrapper = columnWrapperRefs.current?.[columnIndex];
-                    if (!columnState || !columnElement || !columnWrapper) {
-                        return;
-                    }
-                    if (columnState.translateYCorrection !== null) ;
-                    // TODO запретить останавливать скролл на disabled айтемах
-                    // translateY, когда колонка проскроллена в самый верх (выбран первый айтем)
-                    const minAllowedTranslateY = columnWrapper.clientHeight / 2 - ITEM_HEIGHT / 2;
-                    const _selectedItemIndex = Math.round((minAllowedTranslateY - columnState.translateY) / ITEM_HEIGHT);
-                    // если колонка зациклена, у нее могут быть отрендерены клоны для бесконечного скролла
-                    // поэтому нужно взять остаток от деления на количество айтемов в колонке
-                    const selectedItemIndex = _selectedItemIndex % columnState.itemCount;
-                    const _selectedIndexes = [...selectedIndexesRef.current];
-                    _selectedIndexes[columnIndex] = selectedItemIndex;
-                    onChangeRef.current?.(_selectedIndexes);
-                    stateRef.current.activeColumnsIndex = null;
+                const _selectedIndexes = [...selectedIndexesRef.current];
+                _selectedIndexes[columnIndex] = selectedItemIndex;
+                onChangeRef.current?.(_selectedIndexes);
+                stateRef.current.activeColumnIndex = null;
+                stateRef.current.scrollDirection = null;
+                setTouchActionActive(false);
+            }
+        };
+        let timeoutId = null;
+        return initScrollHandlers({
+            axis: 'vertical',
+            wrapperRef: containerRef,
+            onTouchMove: handleScroll,
+            onTouchEnd: handleScrollEnd,
+            onWheelMove: (event) => {
+                handleScroll(event);
+                if (timeoutId !== null) {
+                    clearTimeout(timeoutId);
                 }
+                timeoutId = setTimeout(handleScrollEnd, 50);
             },
         });
-    }, [columnRefs, columnWrapperRefs, cloneItemsBefore, cloneItemsAfter]);
-    /**
-     * Вычисляем layout-метрики
-     */
-    useEffect(() => {
-        if (containerRef.current !== null) {
-            stateRef.current.containerMetrics = containerRef.current.getBoundingClientRect();
-            stateRef.current.scrollAreas = makeScrollAreas(stateRef.current.columns.length, stateRef.current.containerMetrics.width, showDelimiter);
+    }, [setTouchActionActive]);
+    const recalcLayoutMetrics = useCallback(() => {
+        if (!containerRef.current) {
+            return;
         }
-        stateRef.current.columns.forEach((columnState, columnIndex) => {
-            const columnWrapper = columnWrapperRefs.current?.[columnIndex];
-            if (!columnWrapper) {
+        stateRef.current.containerMetrics = containerRef.current.getBoundingClientRect();
+        stateRef.current.scrollAreas = makeScrollAreas(stateRef.current.columns.length, stateRef.current.containerMetrics.width, showDelimiter);
+        const containerHeight = stateRef.current.containerMetrics.height;
+        stateRef.current.columns.forEach((columnState) => {
+            const { columnElement, columnWrapper } = columnState;
+            if (!columnElement || !columnWrapper) {
                 return;
             }
             if (columnState.circular) {
-                columnWrapper.style.maxHeight = `${columnWrapper.clientHeight}px`;
+                const cloneCount = Math.max(Math.ceil(containerHeight / (columnState.itemCount * ITEM_HEIGHT)), 1) * 2 + 1;
+                if (columnState.cloneCount !== cloneCount) {
+                    columnState.cloneCount = cloneCount;
+                    columnState.translateY -=
+                        Math.floor(columnState.cloneCount / 2) * columnState.itemCount * ITEM_HEIGHT;
+                    columnElement.style.transform = translateY(columnState.translateY);
+                    setStateKey((stateKey) => stateKey + 1);
+                }
             }
+            columnState.visibleItemCount = Math.min(columnState.circular ? columnState.itemCount : columnState.itemCount * 2 - 1, floorToOdd(Math.floor(containerHeight / ITEM_HEIGHT)), fixedHeight ? FIXED_HEIGHT_ITEMS : Infinity);
+            const gradientStartPoint = (containerHeight - columnState.visibleItemCount * ITEM_HEIGHT) / 2;
+            const gradientEndPoint = containerHeight / 2 + (columnState.visibleItemCount * ITEM_HEIGHT) / 2;
+            columnWrapper.style.maskImage = `linear-gradient(
+                to bottom,
+                transparent ${gradientStartPoint}px,
+                #000 ${gradientStartPoint + 60}px,
+                #000 ${gradientEndPoint - 60}px,
+                transparent ${gradientEndPoint}px
+            )`;
         });
-    }, [showDelimiter, columnWrapperRefs]);
-    /**
-     * Скроллим к initial значению либо округляем позицию скролла до ближайшего айтема после завершения анимации инерции скролла
-     */
+    }, [fixedHeight, showDelimiter, setStateKey]);
+    useLayoutEffect(() => {
+        if (stateRef.current.containerMetrics !== null) {
+            recalcLayoutMetrics();
+        }
+    }, [recalcLayoutMetrics]);
+    useLayoutEffect(() => {
+        if (stateRef.current.containerMetrics === null) {
+            recalcLayoutMetrics();
+        }
+    });
+    // Скроллим к initial значению либо округляем позицию скролла до ближайшего айтема после завершения анимации инерции скролла
     useEffect(() => {
-        selectedIndexes.forEach((selectedItemIndex, columnIndex) => {
-            const columnState = stateRef.current.columns[columnIndex];
-            const columnElement = columnRefs.current?.[columnIndex];
-            const columnWrapper = columnWrapperRefs.current?.[columnIndex];
-            if (!columnState || !columnElement || !columnWrapper) {
+        stateRef.current.columns.forEach((columnState, columnIndex) => {
+            const { columnElement, columnWrapper } = columnState;
+            if (!columnElement || !columnWrapper) {
                 return;
             }
-            // высота колонки либо клона
-            const columnHeight = columnState.itemCount * ITEM_HEIGHT;
-            // translateY, если бы текущий видимый клон был в дефолтной позиции (проскроллен до середины)
-            const translateYAtDefaultPosition = Math.sign(columnState.translateY) *
-                Math.floor(Math.abs(columnState.translateY) / columnHeight) *
-                columnHeight;
-            // translateY, когда колонка проскроллена в самый верх (выбран первый айтем)
-            const minAllowedTranslateY = columnWrapper.clientHeight / 2 - ITEM_HEIGHT / 2;
             columnState.translateY =
-                translateYAtDefaultPosition + (minAllowedTranslateY - selectedItemIndex * ITEM_HEIGHT);
+                -(Math.floor(columnState.cloneCount / 2) * columnState.itemCount * ITEM_HEIGHT) -
+                    selectedIndexes[columnIndex] * ITEM_HEIGHT;
             columnElement.style.transform = translateY(columnState.translateY);
-            if (columnState.circular) {
-                cloneItemsBefore(columnState);
-                cloneItemsAfter(columnState, columnElement, columnWrapper);
-            }
-        });
-    }, [selectedIndexes, columnRefs, columnWrapperRefs, cloneItemsBefore, cloneItemsAfter]);
-    /**
-     * Если мы склонировали айтемы сверху для бесконечного скролла, корректируем translateY на высоту склонированных айтемов
-     */
-    useLayoutEffect(() => {
-        stateRef.current.columns.forEach((columnState, columnIndex) => {
-            const columnElement = columnRefs.current?.[columnIndex];
-            if (!columnElement) {
-                return;
-            }
-            if (columnState.translateYCorrection !== null) {
-                columnState.translateY += columnState.translateYCorrection;
-                columnState.translateYCorrection = null;
-                columnElement.style.transform = translateY(columnState.translateY);
-            }
+            columnState.itemElements.forEach((itemElement) => {
+                if (itemElement !== null) {
+                    itemElement.style.transform = ``;
+                }
+            });
         });
-    }, [stateKey, columnRefs]);
+    }, [selectedIndexes]);
     if (!visible) {
         return null;
     }
     const renderColumns = (startIndex, endIndex) => {
-        return range(startIndex, endIndex).map((columnIndex) => (jsx("div", { className: classnames(styles.columnWrapper, {
-                [styles.circularColumnWrapper]: columns[columnIndex].circular,
-                [styles.wideColumnWrapper]: columns.length < 4 && columns.length > 1,
-                [styles.fullWidthColumnWrapper]: columns.length === 1,
-            }), ref: columnWrapperRefCallbacks[columnIndex], children: jsx("div", { className: styles.column, ref: columnRefCallbacks[columnIndex], children: stateRef.current?.columns[columnIndex] &&
-                    range(stateRef.current.columns[columnIndex].firstCloneIndex, stateRef.current.columns[columnIndex].lastCloneIndex + 1).flatMap((columnCloneIndex) => columns[columnIndex].items.map((item) => (jsx("div", { className: classnames(styles.item, {
-                            [styles.alignLeft]: columns[columnIndex].align === 'left',
-                            [styles.alignRight]: columns[columnIndex].align === 'right',
-                            [styles.disabled]: item.disabled,
-                        }), children: item.text }, `${columnCloneIndex}-${columns[columnIndex].items.length}-${item.key ?? item.text}`)))) }) }, `${columns.length}-${columnIndex}`)));
+        return range(startIndex, endIndex).map((columnIndex) => {
+            const columnState = stateRef.current.columns[columnIndex];
+            return (jsx("div", { className: classnames(styles.columnWrapper, {
+                    [styles.wideColumnWrapper]: columns.length < 4 && columns.length > 1,
+                    [styles.fullWidthColumnWrapper]: columns.length === 1,
+                }), ref: columnState.columnWrapperCallback, children: jsx("div", { className: styles.columnPositionWrapper, children: jsx("div", { className: styles.column, ref: columnState.columnElementCallback, children: [...Array(columnState.cloneCount).keys()].flatMap((columnCloneIndex) => columns[columnIndex].items.map((item, itemIndex) => (jsx("div", { className: classnames(styles.item, {
+                                [styles.alignLeft]: columns[columnIndex].align === 'left',
+                                [styles.alignRight]: columns[columnIndex].align === 'right',
+                                [styles.disabled]: item.disabled,
+                                [styles.selected]: itemIndex === selectedIndexes[columnIndex] &&
+                                    (!touchActionActive ||
+                                        columnIndex !== stateRef.current.activeColumnIndex),
+                            }), ref: columnState.itemElementCallbacks?.get(columnCloneIndex * columnState.itemCount + itemIndex), children: item.text }, `${columnCloneIndex}-${columns[columnIndex].items.length}-${item.key ?? item.text}`)))) }) }) }, `${columns.length}-${columnIndex}`));
+        });
     };
-    if (showDelimiter) {
-        return (jsxs("div", { className: classnames(styles.pickerWheel), ref: containerRef, children: [jsx("div", { className: styles.selectedItemBackground }), jsxs("div", { className: classnames(styles.columns, { [styles.fixedHeight]: fixedHeight }), children: [renderColumns(0, columns.length / 2), jsx("div", { className: styles.columnWrapper, children: jsx("div", { className: styles.column, children: jsx("div", { className: styles.item, children: "\u2013" }) }) }), renderColumns(columns.length / 2, columns.length)] }), jsx("div", { className: styles.touchEventsOverlay })] }));
+    if (showDelimiter && columns.length % 2 === 0) {
+        return (jsxs("div", { className: classnames(styles.pickerWheel, { [styles.fixedHeight]: isFixedHeight }), ref: containerRef, children: [jsx("div", { className: styles.selectedItemBackground }), jsxs("div", { className: classnames(styles.columns), children: [renderColumns(0, columns.length / 2), jsx("div", { className: styles.columnWrapper, children: jsx("div", { className: styles.columnPositionWrapper, children: jsx("div", { className: styles.column, children: jsx("div", { className: classnames(styles.item, styles.selected), children: "\u2013" }) }) }) }), renderColumns(columns.length / 2, columns.length)] }), jsx("div", { className: styles.touchEventsOverlay })] }));
     }
-    return (jsxs("div", { className: styles.pickerWheel, ref: containerRef, children: [jsx("div", { className: styles.selectedItemBackground }), jsx("div", { className: classnames(styles.columns, { [styles.fixedHeight]: fixedHeight }), children: renderColumns(0, columns.length) }), jsx("div", { className: styles.touchEventsOverlay })] }));
+    return (jsxs("div", { className: classnames(styles.pickerWheel, { [styles.fixedHeight]: isFixedHeight }), ref: containerRef, children: [jsx("div", { className: styles.selectedItemBackground }), jsx("div", { className: classnames(styles.columns), children: renderColumns(0, columns.length) }), jsx("div", { className: styles.touchEventsOverlay })] }));
 };
+PickerWheel.isFullHeightBottomSheetContent = true;
 
 export { PickerWheel };
 //# sourceMappingURL=PickerWheel.js.map

package/PickerWheel.js.map

@@ -1 +1 @@
-{"version":3,"file":"PickerWheel.js","sources":["../src/PickerWheel.tsx"],"sourcesContent":["import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport classnames from 'classnames';\n\nimport { initScrollHandlers } from '@hh.ru/magritte-internal-custom-scroll';\nimport { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';\nimport { PickerWheelColumn, PickerWheelComponent } from '@hh.ru/magritte-ui-picker-wheel/types';\n\nimport styles from './picker-wheel.less';\n\nconst ITEM_HEIGHT = 48;\nconst COLUMN_WIDTH = 64;\nconst WIDE_COLUMN_WIDTH = 105;\n\n/**\n * Превращает массив точек в массив интервалов\n * [0, 50, 100, 200] => [{ left: 0, right: 50 }, { left: 50, right: 100 }, { left: 100, right: 200 }]\n */\nconst makeIntervalsFromPoints = (...points: Array<number>) => {\n    return points\n        .flatMap((point, index) => {\n            if (index !== 0 && index !== points.length - 1) {\n                return [point, point];\n            }\n            return point;\n        })\n        .reduce(\n            (intervals, point, index) => {\n                if (index % 2 === 0) {\n                    return [...intervals, { left: point }];\n                }\n                const interval = { ...intervals[intervals.length - 1], right: point };\n                return [...intervals.slice(0, intervals.length - 1), interval];\n            },\n            [] as Array<{ left: number; right?: number }>\n        ) as Array<{ left: number; right: number }>;\n};\n\n/**\n * Генерирует горизонтальные границы в пикселях относительно контейнера, в которых колонки должны реагировать на скролл\n */\nconst makeScrollAreas = (\n    columnCount: number,\n    containerWidth: number,\n    showDelimiter?: boolean\n): Array<{ left: number; right: number }> => {\n    switch (columnCount) {\n        case 1:\n            return makeIntervalsFromPoints(0, containerWidth);\n        case 2:\n            return makeIntervalsFromPoints(0, containerWidth / 2, containerWidth);\n        case 3:\n            return makeIntervalsFromPoints(\n                0,\n                (containerWidth - WIDE_COLUMN_WIDTH) / 2,\n                (containerWidth + WIDE_COLUMN_WIDTH) / 2,\n                containerWidth\n            );\n        case 4:\n            if (showDelimiter) {\n                return makeIntervalsFromPoints(\n                    0,\n                    containerWidth / 2 - COLUMN_WIDTH * 1.5,\n                    containerWidth / 2,\n                    containerWidth / 2 + COLUMN_WIDTH * 1.5,\n                    containerWidth\n                );\n            }\n            return makeIntervalsFromPoints(\n                0,\n                containerWidth / 2 - COLUMN_WIDTH,\n                containerWidth / 2,\n                containerWidth / 2 + COLUMN_WIDTH,\n                containerWidth\n            );\n        default:\n            throw new Error('Unexpected column count');\n    }\n};\n\nconst range = (start: number, end: number) => {\n    return [...Array(end - start).keys()].map((_, index) => index + start);\n};\n\nconst translateY = (value: number) => `translate3d(0, ${value}px, 0)`;\n\nconst useArrayOfRefs = <ElementType,>(\n    length: number\n): [React.RefObject<Array<ElementType | null>>, Array<React.RefCallback<ElementType | null>>] => {\n    const refs = useRef<Array<ElementType | null>>([]);\n    const refCallbacks = useMemo(() => {\n        return [...Array(length).keys()].map((index) => {\n            return (element: ElementType | null) => {\n                refs.current[index] = element;\n            };\n        });\n    }, [length]);\n    return [refs, refCallbacks];\n};\n\ninterface ColumnState {\n    circular?: boolean;\n    /**\n     * Если колонка не зациклена (circular), всегда 0\n     * Если колонка зациклена, это индекс самого первого клона колонки сверху для бесконечного скролла (начинается с -1 и уменьшается)\n     */\n    firstCloneIndex: number;\n    /**\n     * Если колонка не зациклена (circular), всегда 0\n     * Если колонка зациклена, это индекс самого последнего клона колонки снизу для бесконечного скролла (начинается с 1 и увеличивается)\n     */\n    lastCloneIndex: number;\n    /** Количество айтемов колонки, копируется из props.columns чтобы не нужно было добавлять props.columns в зависимости */\n    itemCount: number;\n    /** translateY для эмуляции скролла */\n    translateY: number;\n    /** Коррекция translateY, которую нужно применить в следующем layout эффекте, прежде чем отрендерятся новые айтемы сверху */\n    translateYCorrection: number | null;\n}\n\ninterface PickerWheelState {\n    activeColumnsIndex: number | null;\n    animations: Array<{ renderedKey: number; itemIndex: number }>;\n    containerMetrics: DOMRect | null;\n    columns: Array<ColumnState>;\n    scrollAreas: Array<{ left: number; right: number }> | null;\n}\n\nconst makeInitialState = (columns: Array<PickerWheelColumn>): PickerWheelState => {\n    return {\n        activeColumnsIndex: null,\n        animations: [],\n        containerMetrics: null,\n        columns: columns.map((column) => ({\n            circular: column.circular,\n            firstCloneIndex: 0,\n            lastCloneIndex: 0,\n            itemCount: column.items.length,\n            translateY: 0,\n            translateYCorrection: null,\n        })),\n        scrollAreas: null,\n    };\n};\n\nexport const PickerWheel: PickerWheelComponent = ({\n    columns,\n    fixedHeight,\n    onChange,\n    selectedIndexes,\n    showDelimiter,\n}) => {\n    const stateRef = useRef<PickerWheelState>(makeInitialState(columns));\n    const [stateKey, setStateKey] = useState(0);\n\n    const containerRef = useRef<HTMLDivElement>(null);\n    const onChangeRef = useRef(onChange);\n    onChangeRef.current = onChange;\n    const selectedIndexesRef = useRef(selectedIndexes);\n    selectedIndexesRef.current = selectedIndexes;\n    const visible = useBreakpoint().isMobile;\n    const [columnWrapperRefs, columnWrapperRefCallbacks] = useArrayOfRefs<HTMLDivElement>(columns.length);\n    const [columnRefs, columnRefCallbacks] = useArrayOfRefs<HTMLDivElement>(columns.length);\n\n    useEffect(() => {\n        const container = containerRef.current;\n        if (!container) {\n            return void 0;\n        }\n\n        // вычисляем колонку, которую пользователь начал скроллить\n        const handleTouchStart = (event: TouchEvent) => {\n            event.preventDefault();\n            event.stopPropagation();\n\n            if (event.changedTouches.length === 1 && stateRef.current.containerMetrics !== null) {\n                stateRef.current.activeColumnsIndex =\n                    stateRef.current.scrollAreas?.findIndex((interval) => {\n                        const relativeX =\n                            event.changedTouches[0].clientX - (stateRef.current.containerMetrics as DOMRect).left;\n                        return relativeX >= interval.left && relativeX <= interval.right;\n                    }) ?? null;\n            }\n        };\n\n        // предотвращаем скролл боттомшита\n        const handleTouchMove = (event: TouchEvent) => {\n            event.preventDefault();\n            event.stopPropagation();\n        };\n\n        container.addEventListener('touchstart', handleTouchStart, { passive: false });\n        container.addEventListener('touchmove', handleTouchMove, { passive: false });\n        return () => {\n            container.removeEventListener('touchstart', handleTouchStart);\n            container.removeEventListener('touchmove', handleTouchMove);\n        };\n    }, []);\n\n    /**\n     * Верхний край колонки близко к верхнему краю враппера — клонируем айтемы сверху\n     * */\n    const cloneItemsBefore = useCallback(\n        (columnState: ColumnState) => {\n            if (columnState.translateY > -100) {\n                columnState.firstCloneIndex -= 1;\n                columnState.translateYCorrection = -columnState.itemCount * ITEM_HEIGHT;\n                setStateKey((stateKey) => stateKey + 1);\n            }\n        },\n        [setStateKey]\n    );\n\n    /**\n     * Нижний край колонки близко к нижнему краю враппера – клонируем айтемы снизу\n     * */\n    const cloneItemsAfter = useCallback(\n        (columnState: ColumnState, columnElement: HTMLDivElement, columnWrapper: HTMLDivElement) => {\n            if (columnElement.clientHeight + columnState.translateY - columnWrapper.clientHeight < 100) {\n                columnState.lastCloneIndex += 1;\n                setStateKey((stateKey) => stateKey + 1);\n            }\n        },\n        [setStateKey]\n    );\n\n    useEffect(() => {\n        return initScrollHandlers({\n            axis: 'vertical',\n            wrapperRef: containerRef,\n            onTouchMove: (event) => {\n                // TODO cache layout metrics\n                if (stateRef.current.activeColumnsIndex !== null) {\n                    const columnIndex = stateRef.current.activeColumnsIndex;\n                    const columnState = stateRef.current?.columns[columnIndex];\n                    const columnElement = columnRefs.current?.[columnIndex];\n                    const columnWrapper = columnWrapperRefs.current?.[columnIndex];\n                    if (!columnState || !columnElement || !columnWrapper) {\n                        return;\n                    }\n\n                    columnState.translateY += event.delta;\n\n                    // бесконечный скролл — добавляем айтемы по мере необходимости\n                    if (columnState.circular) {\n                        // скролл вверх\n                        if (event.delta > 0) {\n                            cloneItemsBefore(columnState);\n                        }\n\n                        // скролл вниз\n                        if (event.delta < 0) {\n                            cloneItemsAfter(columnState, columnElement, columnWrapper);\n                        }\n                    }\n\n                    // скролл ограничен — делаем чтобы колонку было нельзя проскроллить за допустимые границы\n                    if (!columnState.circular) {\n                        // скролл вверх\n                        if (event.delta > 0) {\n                            // translateY, когда колонка проскроллена в самый верх (выбран первый айтем)\n                            const minAllowedTranslateY = columnWrapper.clientHeight / 2 - ITEM_HEIGHT / 2;\n                            columnState.translateY = Math.min(columnState.translateY, minAllowedTranslateY);\n                        }\n\n                        // скролл вниз\n                        if (event.delta < 0) {\n                            // translateY, когда колонка проскроллена в самый низ (выбран последний айтем)\n                            const maxAllowedTranslateY =\n                                columnWrapper.clientHeight / 2 - columnElement.clientHeight + ITEM_HEIGHT / 2;\n                            columnState.translateY = Math.max(columnState.translateY, maxAllowedTranslateY);\n                        }\n                    }\n\n                    columnElement.style.transform = translateY(columnState.translateY);\n                }\n            },\n            onTouchEnd: () => {\n                if (stateRef.current.activeColumnsIndex !== null) {\n                    const columnIndex = stateRef.current.activeColumnsIndex;\n                    const columnState = stateRef.current?.columns[columnIndex];\n                    const columnElement = columnRefs.current?.[columnIndex];\n                    const columnWrapper = columnWrapperRefs.current?.[columnIndex];\n                    if (!columnState || !columnElement || !columnWrapper) {\n                        return;\n                    }\n\n                    if (columnState.translateYCorrection !== null) {\n                        // TODO хз что делать\n                    }\n\n                    // TODO запретить останавливать скролл на disabled айтемах\n\n                    // translateY, когда колонка проскроллена в самый верх (выбран первый айтем)\n                    const minAllowedTranslateY = columnWrapper.clientHeight / 2 - ITEM_HEIGHT / 2;\n                    const _selectedItemIndex = Math.round(\n                        (minAllowedTranslateY - columnState.translateY) / ITEM_HEIGHT\n                    );\n                    // если колонка зациклена, у нее могут быть отрендерены клоны для бесконечного скролла\n                    // поэтому нужно взять остаток от деления на количество айтемов в колонке\n                    const selectedItemIndex = _selectedItemIndex % columnState.itemCount;\n\n                    const _selectedIndexes = [...selectedIndexesRef.current];\n                    _selectedIndexes[columnIndex] = selectedItemIndex;\n                    onChangeRef.current?.(_selectedIndexes as typeof selectedIndexes);\n\n                    stateRef.current.activeColumnsIndex = null;\n                }\n            },\n        });\n    }, [columnRefs, columnWrapperRefs, cloneItemsBefore, cloneItemsAfter]);\n\n    /**\n     * Вычисляем layout-метрики\n     */\n    useEffect(() => {\n        if (containerRef.current !== null) {\n            stateRef.current.containerMetrics = containerRef.current.getBoundingClientRect();\n            stateRef.current.scrollAreas = makeScrollAreas(\n                stateRef.current.columns.length,\n                stateRef.current.containerMetrics.width,\n                showDelimiter\n            );\n        }\n\n        stateRef.current.columns.forEach((columnState, columnIndex) => {\n            const columnWrapper = columnWrapperRefs.current?.[columnIndex];\n            if (!columnWrapper) {\n                return;\n            }\n\n            if (columnState.circular) {\n                columnWrapper.style.maxHeight = `${columnWrapper.clientHeight}px`;\n            }\n        });\n    }, [showDelimiter, columnWrapperRefs]);\n\n    /**\n     * Скроллим к initial значению либо округляем позицию скролла до ближайшего айтема после завершения анимации инерции скролла\n     */\n    useEffect(() => {\n        selectedIndexes.forEach((selectedItemIndex, columnIndex) => {\n            const columnState = stateRef.current.columns[columnIndex];\n            const columnElement = columnRefs.current?.[columnIndex];\n            const columnWrapper = columnWrapperRefs.current?.[columnIndex];\n            if (!columnState || !columnElement || !columnWrapper) {\n                return;\n            }\n\n            // высота колонки либо клона\n            const columnHeight = columnState.itemCount * ITEM_HEIGHT;\n            // translateY, если бы текущий видимый клон был в дефолтной позиции (проскроллен до середины)\n            const translateYAtDefaultPosition =\n                Math.sign(columnState.translateY) *\n                Math.floor(Math.abs(columnState.translateY) / columnHeight) *\n                columnHeight;\n            // translateY, когда колонка проскроллена в самый верх (выбран первый айтем)\n            const minAllowedTranslateY = columnWrapper.clientHeight / 2 - ITEM_HEIGHT / 2;\n            columnState.translateY =\n                translateYAtDefaultPosition + (minAllowedTranslateY - selectedItemIndex * ITEM_HEIGHT);\n            columnElement.style.transform = translateY(columnState.translateY);\n\n            if (columnState.circular) {\n                cloneItemsBefore(columnState);\n                cloneItemsAfter(columnState, columnElement, columnWrapper);\n            }\n        });\n    }, [selectedIndexes, columnRefs, columnWrapperRefs, cloneItemsBefore, cloneItemsAfter]);\n\n    /**\n     * Если мы склонировали айтемы сверху для бесконечного скролла, корректируем translateY на высоту склонированных айтемов\n     */\n    useLayoutEffect(() => {\n        stateRef.current.columns.forEach((columnState, columnIndex) => {\n            const columnElement = columnRefs.current?.[columnIndex];\n            if (!columnElement) {\n                return;\n            }\n\n            if (columnState.translateYCorrection !== null) {\n                columnState.translateY += columnState.translateYCorrection;\n                columnState.translateYCorrection = null;\n                columnElement.style.transform = translateY(columnState.translateY);\n            }\n        });\n    }, [stateKey, columnRefs]);\n\n    if (!visible) {\n        return null;\n    }\n\n    const renderColumns = (startIndex: number, endIndex: number) => {\n        return range(startIndex, endIndex).map((columnIndex) => (\n            <div\n                className={classnames(styles.columnWrapper, {\n                    [styles.circularColumnWrapper]: columns[columnIndex].circular,\n                    [styles.wideColumnWrapper]: columns.length < 4 && columns.length > 1,\n                    [styles.fullWidthColumnWrapper]: columns.length === 1,\n                })}\n                key={`${columns.length}-${columnIndex}`}\n                ref={columnWrapperRefCallbacks[columnIndex]}\n            >\n                <div className={styles.column} ref={columnRefCallbacks[columnIndex]}>\n                    {/* Если колонка зациклена, у нее могут быть клоны сверху или снизу от оригинальной колонки для бесконечного скролла */}\n                    {/* У клона нет собственного DOM-элемента, это просто копия всех айтемов колонки */}\n                    {stateRef.current?.columns[columnIndex] &&\n                        range(\n                            stateRef.current.columns[columnIndex].firstCloneIndex,\n                            stateRef.current.columns[columnIndex].lastCloneIndex + 1\n                        ).flatMap((columnCloneIndex) =>\n                            columns[columnIndex].items.map((item) => (\n                                <div\n                                    className={classnames(styles.item, {\n                                        [styles.alignLeft]: columns[columnIndex].align === 'left',\n                                        [styles.alignRight]: columns[columnIndex].align === 'right',\n                                        [styles.disabled]: item.disabled,\n                                    })}\n                                    key={`${columnCloneIndex}-${columns[columnIndex].items.length}-${item.key ?? item.text}`}\n                                >\n                                    {item.text}\n                                </div>\n                            ))\n                        )}\n                </div>\n            </div>\n        ));\n    };\n\n    if (showDelimiter) {\n        return (\n            <div className={classnames(styles.pickerWheel)} ref={containerRef}>\n                <div className={styles.selectedItemBackground} />\n                <div className={classnames(styles.columns, { [styles.fixedHeight]: fixedHeight })}>\n                    {renderColumns(0, columns.length / 2)}\n                    <div className={styles.columnWrapper}>\n                        <div className={styles.column}>\n                            <div className={styles.item}>–</div>\n                        </div>\n                    </div>\n                    {renderColumns(columns.length / 2, columns.length)}\n                </div>\n                <div className={styles.touchEventsOverlay} />\n            </div>\n        );\n    }\n\n    return (\n        <div className={styles.pickerWheel} ref={containerRef}>\n            <div className={styles.selectedItemBackground} />\n            <div className={classnames(styles.columns, { [styles.fixedHeight]: fixedHeight })}>\n                {renderColumns(0, columns.length)}\n            </div>\n            <div className={styles.touchEventsOverlay} />\n        </div>\n    );\n};\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
+{"version":3,"file":"PickerWheel.js","sources":["../src/PickerWheel.tsx"],"sourcesContent":["import { useCallback, useContext, useEffect, useLayoutEffect, useRef, useState } from 'react';\nimport classnames from 'classnames';\n\nimport { initScrollHandlers, ScrollGestureEvent } from '@hh.ru/magritte-internal-custom-scroll';\nimport { BottomSheetContext } from '@hh.ru/magritte-ui-bottom-sheet';\nimport { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';\nimport { PickerWheelColumn, PickerWheelComponent } from '@hh.ru/magritte-ui-picker-wheel/types';\n\nimport styles from './picker-wheel.less';\n\nconst FIXED_HEIGHT_ITEMS = 7;\nconst ITEM_HEIGHT = 48;\nconst COLUMN_WIDTH = 64;\nconst WIDE_COLUMN_WIDTH = 105;\nconst SELECTED_ITEM_SCALE = 22 / 18;\n\n/**\n * Превращает массив точек в массив интервалов\n * [0, 50, 100, 200] => [{ left: 0, right: 50 }, { left: 50, right: 100 }, { left: 100, right: 200 }]\n */\nconst makeIntervalsFromPoints = (...points: Array<number>) => {\n    return points\n        .flatMap((point, index) => {\n            if (index !== 0 && index !== points.length - 1) {\n                return [point, point];\n            }\n            return point;\n        })\n        .reduce(\n            (intervals, point, index) => {\n                if (index % 2 === 0) {\n                    return [...intervals, { left: point }];\n                }\n                const interval = { ...intervals[intervals.length - 1], right: point };\n                return [...intervals.slice(0, intervals.length - 1), interval];\n            },\n            [] as Array<{ left: number; right?: number }>\n        ) as Array<{ left: number; right: number }>;\n};\n\n/**\n * Генерирует горизонтальные границы в пикселях относительно контейнера, в которых колонки должны реагировать на скролл\n */\nconst makeScrollAreas = (\n    columnCount: number,\n    containerWidth: number,\n    showDelimiter?: boolean\n): Array<{ left: number; right: number }> => {\n    switch (columnCount) {\n        case 1:\n            return makeIntervalsFromPoints(0, containerWidth);\n        case 2:\n            return makeIntervalsFromPoints(0, containerWidth / 2, containerWidth);\n        case 3:\n            return makeIntervalsFromPoints(\n                0,\n                (containerWidth - WIDE_COLUMN_WIDTH) / 2,\n                (containerWidth + WIDE_COLUMN_WIDTH) / 2,\n                containerWidth\n            );\n        case 4:\n            if (showDelimiter) {\n                return makeIntervalsFromPoints(\n                    0,\n                    containerWidth / 2 - COLUMN_WIDTH * 1.5,\n                    containerWidth / 2,\n                    containerWidth / 2 + COLUMN_WIDTH * 1.5,\n                    containerWidth\n                );\n            }\n            return makeIntervalsFromPoints(\n                0,\n                containerWidth / 2 - COLUMN_WIDTH,\n                containerWidth / 2,\n                containerWidth / 2 + COLUMN_WIDTH,\n                containerWidth\n            );\n        default:\n            throw new Error('Unexpected column count');\n    }\n};\n\nconst floorToOdd = (value: number) => (value % 2 !== 1 ? value - 1 : value);\n\nconst range = (start: number, end: number) => {\n    return [...Array(end - start).keys()].map((_, index) => index + start);\n};\n\nconst translateY = (value: number) => `translate3d(0, ${value}px, 0)`;\n\ninterface ColumnState {\n    circular?: boolean;\n    /**\n     * Если колонка не зациклена (circular), всегда 1\n     * Если зациклена, то это количество копий колонки, которое нужно отрендерить, чтобы заполнить контейнер целиком\n     */\n    cloneCount: number;\n    disabledItems: Set<number>;\n    /** Количество айтемов колонки, копируется из props.columns чтобы не нужно было добавлять props.columns в зависимости */\n    itemCount: number;\n    /** translateY для эмуляции скролла */\n    translateY: number;\n    /** Количество видимых айтемов, всегда нечетное */\n    visibleItemCount: number | null;\n    columnElement: HTMLDivElement | null;\n    columnElementCallback: React.RefCallback<HTMLDivElement | null>;\n    columnWrapper: HTMLDivElement | null;\n    columnWrapperCallback: React.RefCallback<HTMLDivElement | null>;\n    itemElements: Map<number, HTMLDivElement | null>;\n    itemElementCallbacks: Pick<Map<number, React.RefCallback<HTMLDivElement | null>>, 'get'>;\n}\n\ninterface PickerWheelState {\n    activeColumnIndex: number | null;\n    animations: Array<{ renderedKey: number; itemIndex: number }>;\n    containerMetrics: DOMRect | null;\n    columns: Array<ColumnState>;\n    scrollAreas: Array<{ left: number; right: number }> | null;\n    scrollDirection: 'up' | 'down' | null;\n}\n\nconst makeInitialState = (columns: Array<PickerWheelColumn>): PickerWheelState => {\n    return {\n        activeColumnIndex: null,\n        animations: [],\n        containerMetrics: null,\n        columns: columns.map((column) => {\n            const itemElementCallbacks: Map<number, React.RefCallback<HTMLDivElement | null>> = new Map();\n            const columnState: ColumnState = {\n                circular: column.circular,\n                cloneCount: 1,\n                disabledItems: new Set(),\n                itemCount: column.items.length,\n                translateY: 0,\n                visibleItemCount: null,\n                columnElement: null,\n                columnElementCallback: (element) => (columnState.columnElement = element),\n                columnWrapper: null,\n                columnWrapperCallback: (element) => (columnState.columnWrapper = element),\n                itemElements: new Map(),\n                itemElementCallbacks: {\n                    get: (itemIndex: number) => {\n                        if (!itemElementCallbacks.has(itemIndex)) {\n                            itemElementCallbacks.set(itemIndex, (element) => {\n                                columnState.itemElements.set(itemIndex, element);\n                            });\n                        }\n                        return itemElementCallbacks.get(itemIndex);\n                    },\n                },\n            };\n            return columnState;\n        }),\n        scrollAreas: null,\n        scrollDirection: null,\n    };\n};\n\nexport const PickerWheel: PickerWheelComponent = ({\n    columns,\n    fixedHeight,\n    onChange,\n    selectedIndexes,\n    showDelimiter,\n}) => {\n    if (columns.length !== selectedIndexes.length) {\n        throw new Error('selectedIndexes.length does not match columns.length');\n    }\n\n    const stateRef = useRef<PickerWheelState>(makeInitialState(columns));\n    if (\n        columns.length !== stateRef.current.columns.length ||\n        columns.some((column, columnIndex) => {\n            return (\n                column.items.length !== stateRef.current.columns[columnIndex].itemCount ||\n                column.circular !== stateRef.current.columns[columnIndex].circular\n            );\n        })\n    ) {\n        stateRef.current = makeInitialState(columns);\n    }\n    columns.forEach(\n        (column, columnIndex) =>\n            (stateRef.current.columns[columnIndex].disabledItems = new Set(\n                column.items.reduce(\n                    (result, item, itemIndex) => (item.disabled ? [...result, itemIndex] : result),\n                    [] as Array<number>\n                )\n            ))\n    );\n\n    const bottomSheetContext = useContext(BottomSheetContext);\n    const containerRef = useRef<HTMLDivElement>(null);\n    const isFixedHeight = bottomSheetContext.height !== 'full-screen' || fixedHeight;\n    const onChangeRef = useRef(onChange);\n    onChangeRef.current = onChange;\n    const selectedIndexesRef = useRef(selectedIndexes);\n    selectedIndexesRef.current = selectedIndexes;\n    const [_, setStateKey] = useState(0);\n    const [touchActionActive, setTouchActionActive] = useState(false);\n    const visible = useBreakpoint().isMobile;\n\n    useEffect(() => {\n        const container = containerRef.current;\n        if (!container) {\n            return void 0;\n        }\n\n        // вычисляем колонку, которую пользователь начал скроллить\n        const setActiveColumn = (clientX: number) => {\n            const containerMetrics = stateRef.current.containerMetrics;\n            if (containerMetrics !== null) {\n                stateRef.current.activeColumnIndex =\n                    stateRef.current.scrollAreas?.findIndex((interval) => {\n                        const relativeX = clientX - containerMetrics.left;\n                        return relativeX >= interval.left && relativeX <= interval.right;\n                    }) ?? null;\n            }\n        };\n\n        const handleTouchStart = (event: TouchEvent) => {\n            event.preventDefault();\n            event.stopPropagation();\n\n            event.changedTouches.length === 1 && setActiveColumn(event.changedTouches[0].clientX);\n        };\n\n        const handleTouchMove = (event: TouchEvent) => {\n            event.preventDefault();\n            event.stopPropagation();\n        };\n\n        const handleWheel = (event: WheelEvent) => {\n            event.preventDefault();\n            event.stopPropagation();\n\n            setActiveColumn(event.clientX);\n        };\n\n        container.addEventListener('touchstart', handleTouchStart, { passive: false });\n        container.addEventListener('touchmove', handleTouchMove, { passive: false });\n        container.addEventListener('wheel', handleWheel, { passive: false });\n        return () => {\n            container.removeEventListener('touchstart', handleTouchStart);\n            container.removeEventListener('touchmove', handleTouchMove);\n            container.removeEventListener('wheel', handleWheel);\n        };\n    }, []);\n\n    useEffect(() => {\n        const handleScroll = (event: ScrollGestureEvent) => {\n            if (stateRef.current.activeColumnIndex !== null && stateRef.current.containerMetrics !== null) {\n                const columnIndex = stateRef.current.activeColumnIndex;\n                const columnState = stateRef.current?.columns[columnIndex];\n                const { columnElement, columnWrapper } = columnState;\n                if (!columnState || !columnState.visibleItemCount || !columnElement || !columnWrapper) {\n                    return;\n                }\n\n                stateRef.current.scrollDirection = event.delta > 0 ? 'up' : 'down';\n                columnState.translateY += event.delta;\n\n                // бесконечный скролл\n                if (columnState.circular) {\n                    // скролл вверх\n                    // верхний край колонки близко к верхнему краю враппера\n                    if (\n                        event.delta > 0 &&\n                        stateRef.current.containerMetrics.height / 2 + columnState.translateY > -100\n                    ) {\n                        columnState.translateY -= columnState.itemCount * ITEM_HEIGHT;\n                    }\n\n                    // скролл вниз\n                    // нижний край колонки близко к нижнему краю враппера\n                    if (\n                        event.delta < 0 &&\n                        columnState.cloneCount * columnState.itemCount * ITEM_HEIGHT +\n                            columnState.translateY -\n                            stateRef.current.containerMetrics.height / 2 <\n                            100\n                    ) {\n                        columnState.translateY += columnState.itemCount * ITEM_HEIGHT;\n                    }\n                }\n\n                // скролл ограничен — делаем чтобы колонку было нельзя проскроллить за допустимые границы\n                if (!columnState.circular) {\n                    // скролл вверх\n                    if (event.delta > 0) {\n                        // translateY, когда колонка проскроллена в самый верх (выбран первый айтем)\n                        const minAllowedTranslateY = 0;\n                        columnState.translateY = Math.min(columnState.translateY, minAllowedTranslateY);\n                    }\n\n                    // скролл вниз\n                    if (event.delta < 0) {\n                        // translateY, когда колонка проскроллена в самый низ (выбран последний айтем)\n                        const maxAllowedTranslateY = (columnState.itemCount - 1) * ITEM_HEIGHT;\n                        columnState.translateY = Math.max(columnState.translateY, -maxAllowedTranslateY);\n                    }\n                }\n\n                // анимация увеличения ближайшего к центру айтема\n                const selectedItemIndex = Math.round(-columnState.translateY / ITEM_HEIGHT);\n                if (columnState.itemElements.has(selectedItemIndex)) {\n                    const halfItemHeight = ITEM_HEIGHT / 2;\n                    (columnState.itemElements.get(selectedItemIndex) as HTMLElement).style.transform =\n                        `scale(${1 + (SELECTED_ITEM_SCALE - 1) * Math.abs((Math.abs(columnState.translateY % ITEM_HEIGHT) - halfItemHeight) / halfItemHeight)})`;\n                }\n\n                columnElement.style.transform = translateY(columnState.translateY);\n                setTouchActionActive(true);\n            }\n        };\n\n        const handleScrollEnd = () => {\n            if (stateRef.current.activeColumnIndex !== null) {\n                const columnIndex = stateRef.current.activeColumnIndex;\n                const columnState = stateRef.current?.columns[columnIndex];\n                const { columnElement, columnWrapper } = columnState;\n                if (!columnState || !columnElement || !columnWrapper) {\n                    return;\n                }\n\n                // если колонка зациклена, у нее могут быть отрендерены клоны для бесконечного скролла\n                // поэтому нужно взять остаток от деления на количество айтемов в колонке\n                const _selectedItemIndex =\n                    Math.round(Math.abs(columnState.translateY) / ITEM_HEIGHT) % columnState.itemCount;\n                let selectedItemIndex = _selectedItemIndex;\n                // если выбранный айтем disabled, ищем ближайший не disabled в направлении скролла\n                if (columnState.disabledItems.has(selectedItemIndex)) {\n                    do {\n                        if (stateRef.current.scrollDirection === 'up') {\n                            selectedItemIndex -= 1;\n                            if (selectedItemIndex < 0) {\n                                selectedItemIndex = columnState.itemCount - 1;\n                            }\n                        } else if (stateRef.current.scrollDirection === 'down') {\n                            selectedItemIndex += 1;\n                            if (selectedItemIndex > columnState.itemCount - 1) {\n                                selectedItemIndex = 0;\n                            }\n                        } else {\n                            break;\n                        }\n                    } while (\n                        columnState.disabledItems.has(selectedItemIndex) &&\n                        selectedItemIndex !== _selectedItemIndex\n                    );\n                }\n\n                const _selectedIndexes = [...selectedIndexesRef.current];\n                _selectedIndexes[columnIndex] = selectedItemIndex;\n                onChangeRef.current?.(_selectedIndexes);\n\n                stateRef.current.activeColumnIndex = null;\n                stateRef.current.scrollDirection = null;\n                setTouchActionActive(false);\n            }\n        };\n\n        let timeoutId: ReturnType<typeof setTimeout> | null = null;\n\n        return initScrollHandlers({\n            axis: 'vertical',\n            wrapperRef: containerRef,\n            onTouchMove: handleScroll,\n            onTouchEnd: handleScrollEnd,\n            onWheelMove: (event) => {\n                handleScroll(event);\n                if (timeoutId !== null) {\n                    clearTimeout(timeoutId);\n                }\n                timeoutId = setTimeout(handleScrollEnd, 50);\n            },\n        });\n    }, [setTouchActionActive]);\n\n    const recalcLayoutMetrics = useCallback(() => {\n        if (!containerRef.current) {\n            return;\n        }\n\n        stateRef.current.containerMetrics = containerRef.current.getBoundingClientRect();\n        stateRef.current.scrollAreas = makeScrollAreas(\n            stateRef.current.columns.length,\n            stateRef.current.containerMetrics.width,\n            showDelimiter\n        );\n\n        const containerHeight = stateRef.current.containerMetrics.height;\n        stateRef.current.columns.forEach((columnState) => {\n            const { columnElement, columnWrapper } = columnState;\n            if (!columnElement || !columnWrapper) {\n                return;\n            }\n\n            if (columnState.circular) {\n                const cloneCount =\n                    Math.max(Math.ceil(containerHeight / (columnState.itemCount * ITEM_HEIGHT)), 1) * 2 + 1;\n                if (columnState.cloneCount !== cloneCount) {\n                    columnState.cloneCount = cloneCount;\n                    columnState.translateY -=\n                        Math.floor(columnState.cloneCount / 2) * columnState.itemCount * ITEM_HEIGHT;\n                    columnElement.style.transform = translateY(columnState.translateY);\n                    setStateKey((stateKey) => stateKey + 1);\n                }\n            }\n\n            columnState.visibleItemCount = Math.min(\n                columnState.circular ? columnState.itemCount : columnState.itemCount * 2 - 1,\n                floorToOdd(Math.floor(containerHeight / ITEM_HEIGHT)),\n                fixedHeight ? FIXED_HEIGHT_ITEMS : Infinity\n            );\n            const gradientStartPoint = (containerHeight - columnState.visibleItemCount * ITEM_HEIGHT) / 2;\n            const gradientEndPoint = containerHeight / 2 + (columnState.visibleItemCount * ITEM_HEIGHT) / 2;\n            columnWrapper.style.maskImage = `linear-gradient(\n                to bottom,\n                transparent ${gradientStartPoint}px,\n                #000 ${gradientStartPoint + 60}px,\n                #000 ${gradientEndPoint - 60}px,\n                transparent ${gradientEndPoint}px\n            )`;\n        });\n    }, [fixedHeight, showDelimiter, setStateKey]);\n\n    useLayoutEffect(() => {\n        if (stateRef.current.containerMetrics !== null) {\n            recalcLayoutMetrics();\n        }\n    }, [recalcLayoutMetrics]);\n\n    useLayoutEffect(() => {\n        if (stateRef.current.containerMetrics === null) {\n            recalcLayoutMetrics();\n        }\n    });\n\n    // Скроллим к initial значению либо округляем позицию скролла до ближайшего айтема после завершения анимации инерции скролла\n    useEffect(() => {\n        stateRef.current.columns.forEach((columnState, columnIndex) => {\n            const { columnElement, columnWrapper } = columnState;\n            if (!columnElement || !columnWrapper) {\n                return;\n            }\n\n            columnState.translateY =\n                -(Math.floor(columnState.cloneCount / 2) * columnState.itemCount * ITEM_HEIGHT) -\n                selectedIndexes[columnIndex] * ITEM_HEIGHT;\n            columnElement.style.transform = translateY(columnState.translateY);\n\n            columnState.itemElements.forEach((itemElement) => {\n                if (itemElement !== null) {\n                    itemElement.style.transform = ``;\n                }\n            });\n        });\n    }, [selectedIndexes]);\n\n    if (!visible) {\n        return null;\n    }\n\n    const renderColumns = (startIndex: number, endIndex: number) => {\n        return range(startIndex, endIndex).map((columnIndex) => {\n            const columnState = stateRef.current.columns[columnIndex];\n            return (\n                <div\n                    className={classnames(styles.columnWrapper, {\n                        [styles.wideColumnWrapper]: columns.length < 4 && columns.length > 1,\n                        [styles.fullWidthColumnWrapper]: columns.length === 1,\n                    })}\n                    key={`${columns.length}-${columnIndex}`}\n                    ref={columnState.columnWrapperCallback}\n                >\n                    <div className={styles.columnPositionWrapper}>\n                        <div className={styles.column} ref={columnState.columnElementCallback}>\n                            {[...Array(columnState.cloneCount).keys()].flatMap((columnCloneIndex) =>\n                                columns[columnIndex].items.map((item, itemIndex) => (\n                                    <div\n                                        className={classnames(styles.item, {\n                                            [styles.alignLeft]: columns[columnIndex].align === 'left',\n                                            [styles.alignRight]: columns[columnIndex].align === 'right',\n                                            [styles.disabled]: item.disabled,\n                                            [styles.selected]:\n                                                itemIndex === selectedIndexes[columnIndex] &&\n                                                (!touchActionActive ||\n                                                    columnIndex !== stateRef.current.activeColumnIndex),\n                                        })}\n                                        key={`${columnCloneIndex}-${columns[columnIndex].items.length}-${item.key ?? item.text}`}\n                                        ref={columnState.itemElementCallbacks?.get(\n                                            columnCloneIndex * columnState.itemCount + itemIndex\n                                        )}\n                                    >\n                                        {item.text}\n                                    </div>\n                                ))\n                            )}\n                        </div>\n                    </div>\n                </div>\n            );\n        });\n    };\n\n    if (showDelimiter && columns.length % 2 === 0) {\n        return (\n            <div className={classnames(styles.pickerWheel, { [styles.fixedHeight]: isFixedHeight })} ref={containerRef}>\n                <div className={styles.selectedItemBackground} />\n                <div className={classnames(styles.columns)}>\n                    {renderColumns(0, columns.length / 2)}\n                    <div className={styles.columnWrapper}>\n                        <div className={styles.columnPositionWrapper}>\n                            <div className={styles.column}>\n                                <div className={classnames(styles.item, styles.selected)}>–</div>\n                            </div>\n                        </div>\n                    </div>\n                    {renderColumns(columns.length / 2, columns.length)}\n                </div>\n                <div className={styles.touchEventsOverlay} />\n            </div>\n        );\n    }\n\n    return (\n        <div className={classnames(styles.pickerWheel, { [styles.fixedHeight]: isFixedHeight })} ref={containerRef}>\n            <div className={styles.selectedItemBackground} />\n            <div className={classnames(styles.columns)}>{renderColumns(0, columns.length)}</div>\n            <div className={styles.touchEventsOverlay} />\n        </div>\n    );\n};\n\nPickerWheel.isFullHeightBottomSheetContent = true;\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/UncontrolledPickerWheel.js

@@ -4,6 +4,7 @@ import { useState, useRef, useCallback } from 'react';
 import { PickerWheel } from './PickerWheel.js';
 import 'classnames';
 import '@hh.ru/magritte-internal-custom-scroll';
+import '@hh.ru/magritte-ui-bottom-sheet';
 import '@hh.ru/magritte-ui-breakpoint';
 
 const UncontrolledPickerWheel = ({ selectedIndexes: initialSelectedIndexes, onChange, ...props }) => {
@@ -16,6 +17,7 @@ const UncontrolledPickerWheel = ({ selectedIndexes: initialSelectedIndexes, onCh
     }, [setSelectedIndexes]);
     return jsx(PickerWheel, { selectedIndexes: selectedIndexes, onChange: handleChange, ...props });
 };
+UncontrolledPickerWheel.isFullHeightBottomSheetContent = true;
 
 export { UncontrolledPickerWheel };
 //# sourceMappingURL=UncontrolledPickerWheel.js.map

package/UncontrolledPickerWheel.js.map

@@ -1 +1 @@
-{"version":3,"file":"UncontrolledPickerWheel.js","sources":["../src/UncontrolledPickerWheel.tsx"],"sourcesContent":["import { useCallback, useRef, useState } from 'react';\n\nimport { PickerWheel } from '@hh.ru/magritte-ui-picker-wheel/PickerWheel';\nimport { PickerWheelComponent } from '@hh.ru/magritte-ui-picker-wheel/types';\n\nexport const UncontrolledPickerWheel: PickerWheelComponent = ({\n    selectedIndexes: initialSelectedIndexes,\n    onChange,\n    ...props\n}) => {\n    const [selectedIndexes, setSelectedIndexes] = useState(initialSelectedIndexes);\n    const onChangeRef = useRef(onChange);\n    onChangeRef.current = onChange;\n\n    const handleChange = useCallback(\n        (value: Array<number | null>) => {\n            onChangeRef.current?.(value as typeof initialSelectedIndexes);\n            setSelectedIndexes(value as typeof initialSelectedIndexes);\n        },\n        [setSelectedIndexes]\n    );\n\n    return <PickerWheel selectedIndexes={selectedIndexes} onChange={handleChange} {...props} />;\n};\n"],"names":["_jsx"],"mappings":";;;;;;;AAKa,MAAA,uBAAuB,GAAyB,CAAC,EAC1D,eAAe,EAAE,sBAAsB,EACvC,QAAQ,EACR,GAAG,KAAK,EACX,KAAI;IACD,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAC,sBAAsB,CAAC,CAAC;AAC/E,IAAA,MAAM,WAAW,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC;AACrC,IAAA,WAAW,CAAC,OAAO,GAAG,QAAQ,CAAC;AAE/B,IAAA,MAAM,YAAY,GAAG,WAAW,CAC5B,CAAC,KAA2B,KAAI;AAC5B,QAAA,WAAW,CAAC,OAAO,GAAG,KAAsC,CAAC,CAAC;QAC9D,kBAAkB,CAAC,KAAsC,CAAC,CAAC;AAC/D,KAAC,EACD,CAAC,kBAAkB,CAAC,CACvB,CAAC;AAEF,IAAA,OAAOA,GAAC,CAAA,WAAW,EAAC,EAAA,eAAe,EAAE,eAAe,EAAE,QAAQ,EAAE,YAAY,EAAM,GAAA,KAAK,GAAI,CAAC;AAChG;;;;"}
+{"version":3,"file":"UncontrolledPickerWheel.js","sources":["../src/UncontrolledPickerWheel.tsx"],"sourcesContent":["import { useCallback, useRef, useState } from 'react';\n\nimport { PickerWheel } from '@hh.ru/magritte-ui-picker-wheel/PickerWheel';\nimport { PickerWheelComponent } from '@hh.ru/magritte-ui-picker-wheel/types';\n\nexport const UncontrolledPickerWheel: PickerWheelComponent = ({\n    selectedIndexes: initialSelectedIndexes,\n    onChange,\n    ...props\n}) => {\n    const [selectedIndexes, setSelectedIndexes] = useState(initialSelectedIndexes);\n    const onChangeRef = useRef(onChange);\n    onChangeRef.current = onChange;\n\n    const handleChange = useCallback(\n        (value: Array<number>) => {\n            onChangeRef.current?.(value);\n            setSelectedIndexes(value);\n        },\n        [setSelectedIndexes]\n    );\n\n    return <PickerWheel selectedIndexes={selectedIndexes} onChange={handleChange} {...props} />;\n};\n\nUncontrolledPickerWheel.isFullHeightBottomSheetContent = true;\n"],"names":["_jsx"],"mappings":";;;;;;;;AAKa,MAAA,uBAAuB,GAAyB,CAAC,EAC1D,eAAe,EAAE,sBAAsB,EACvC,QAAQ,EACR,GAAG,KAAK,EACX,KAAI;IACD,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAC,sBAAsB,CAAC,CAAC;AAC/E,IAAA,MAAM,WAAW,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC;AACrC,IAAA,WAAW,CAAC,OAAO,GAAG,QAAQ,CAAC;AAE/B,IAAA,MAAM,YAAY,GAAG,WAAW,CAC5B,CAAC,KAAoB,KAAI;AACrB,QAAA,WAAW,CAAC,OAAO,GAAG,KAAK,CAAC,CAAC;QAC7B,kBAAkB,CAAC,KAAK,CAAC,CAAC;AAC9B,KAAC,EACD,CAAC,kBAAkB,CAAC,CACvB,CAAC;AAEF,IAAA,OAAOA,GAAC,CAAA,WAAW,EAAC,EAAA,eAAe,EAAE,eAAe,EAAE,QAAQ,EAAE,YAAY,EAAM,GAAA,KAAK,GAAI,CAAC;AAChG,EAAE;AAEF,uBAAuB,CAAC,8BAA8B,GAAG,IAAI;;;;"}

package/index.css

@@ -4,14 +4,6 @@
   --magritte-color-component-time-picker-background-selection-v21-3-2:#F1F4F9;
 }
 :root{
-  --magritte-typography-title-4-semibold-font-family-v21-3-2:"hh sans";
-  --magritte-typography-title-4-semibold-font-weight-v21-3-2:500;
-  --magritte-typography-title-4-semibold-line-height-v21-3-2:32px;
-  --magritte-typography-title-4-semibold-font-size-v21-3-2:22px;
-  --magritte-typography-title-4-semibold-letter-spacing-v21-3-2:-0.0075em;
-  --magritte-typography-title-4-semibold-text-indent-v21-3-2:0px;
-  --magritte-typography-title-4-semibold-text-transform-v21-3-2:none;
-  --magritte-typography-title-4-semibold-text-decoration-v21-3-2:none;
   --magritte-typography-label-1-regular-font-family-v21-3-2:"hh sans";
   --magritte-typography-label-1-regular-font-weight-v21-3-2:400;
   --magritte-typography-label-1-regular-line-height-v21-3-2:26px;
@@ -26,47 +18,49 @@
   --magritte-color-text-state-primary-disabled-v21-3-2:#ababab7a;
   --magritte-color-component-time-picker-background-selection-v21-3-2:#262626;
 }
-.magritte-picker-wheel___VaPvG_1-0-3{
+.magritte-picker-wheel___VaPvG_1-0-5{
   position:relative;
+  height:100%;
 }
-.magritte-selected-item-background___UnBPm_1-0-3{
+.magritte-selected-item-background___UnBPm_1-0-5{
   position:absolute;
-  inset:calc(50% - 48px / 2) 16px;
+  inset:calc(50% - 48px / 2) 0;
   background-color:var(--magritte-color-component-time-picker-background-selection-v21-3-2);
 }
-.magritte-columns___I7bCB_1-0-3{
+.magritte-columns___I7bCB_1-0-5{
   position:relative;
+  height:100%;
   display:flex;
-  align-items:center;
+  align-items:stretch;
   justify-content:center;
-  overflow:clip;
 }
-.magritte-touch-events-overlay___c3YOp_1-0-3{
+.magritte-touch-events-overlay___c3YOp_1-0-5{
   position:absolute;
   inset:0;
 }
-.magritte-fixed-height___BLw9W_1-0-3{
+.magritte-fixed-height___BLw9W_1-0-5{
   height:336px;
 }
-.magritte-column-wrapper___yRwai_1-0-3{
-  position:relative;
+.magritte-column-wrapper___yRwai_1-0-5{
   flex:0 0 64px;
-  max-height:100%;
+  position:relative;
 }
-.magritte-circular-column-wrapper___4KG7c_1-0-3{
-  overflow:clip;
+.magritte-column-position-wrapper___wQTIu_1-0-5{
+  position:relative;
+  top:50%;
+  margin-top:-24px;
 }
-.magritte-wide-column-wrapper___nvecx_1-0-3{
+.magritte-wide-column-wrapper___nvecx_1-0-5{
   flex:0 0 105px;
 }
-.magritte-full-width-column-wrapper___oxhh1_1-0-3{
+.magritte-full-width-column-wrapper___oxhh1_1-0-5{
   flex:0 0 100%;
 }
-.magritte-column___IMYca_1-0-3{
+.magritte-column___IMYca_1-0-5{
   will-change:transform;
   transform:translate3d(0, 0, 0);
 }
-.magritte-item___4RQVs_1-0-3{
+.magritte-item___4RQVs_1-0-5{
   font-family:var(--magritte-typography-label-1-regular-font-family-v21-3-2);
   font-weight:var(--magritte-typography-label-1-regular-font-weight-v21-3-2);
   line-height:var(--magritte-typography-label-1-regular-line-height-v21-3-2);
@@ -76,27 +70,27 @@
   text-transform:var(--magritte-typography-label-1-regular-text-transform-v21-3-2);
   text-decoration:var(--magritte-typography-label-1-regular-text-decoration-v21-3-2);
   color:var(--magritte-color-text-primary-v21-3-2);
-  height:48px;
-  line-height:48px;
+  height:18px;
+  line-height:18px;
+  padding:calc((48px - 18px) / 2) 0;
   text-align:center;
+  transform-origin:center center;
 }
-.magritte-item___4RQVs_1-0-3.magritte-align-left___PXJt0_1-0-3{
+.magritte-item___4RQVs_1-0-5.magritte-align-left___PXJt0_1-0-5{
   text-align:left;
+  transform-origin:left center;
 }
-.magritte-item___4RQVs_1-0-3.magritte-align-right___0yc2S_1-0-3{
+.magritte-item___4RQVs_1-0-5.magritte-align-right___0yc2S_1-0-5{
   text-align:right;
+  transform-origin:right center;
 }
-.magritte-item___4RQVs_1-0-3.magritte-disabled___d3ukm_1-0-3{
+.magritte-item___4RQVs_1-0-5.magritte-disabled___d3ukm_1-0-5{
   color:var(--magritte-color-text-state-primary-disabled-v21-3-2);
 }
-.magritte-item___4RQVs_1-0-3.magritte-selected___Nar3H_1-0-3{
-  font-family:var(--magritte-typography-title-4-semibold-font-family-v21-3-2);
-  font-weight:var(--magritte-typography-title-4-semibold-font-weight-v21-3-2);
-  line-height:var(--magritte-typography-title-4-semibold-line-height-v21-3-2);
-  font-size:var(--magritte-typography-title-4-semibold-font-size-v21-3-2);
-  letter-spacing:var(--magritte-typography-title-4-semibold-letter-spacing-v21-3-2);
-  text-indent:var(--magritte-typography-title-4-semibold-text-indent-v21-3-2);
-  text-transform:var(--magritte-typography-title-4-semibold-text-transform-v21-3-2);
-  text-decoration:var(--magritte-typography-title-4-semibold-text-decoration-v21-3-2);
-  line-height:48px;
+.magritte-item___4RQVs_1-0-5.magritte-selected___Nar3H_1-0-5{
+  font-weight:500;
+  height:22px;
+  line-height:22px;
+  padding:calc((48px - 22px) / 2) 0;
+  transform:scale(1.22222222);
 }

package/index.d.ts

@@ -1,4 +1,5 @@
 export * from '@hh.ru/magritte-ui-theme-provider';
 export * from '@hh.ru/magritte-ui-picker-wheel/types';
+export * from '@hh.ru/magritte-ui-picker-wheel/itemsFromRange';
 export { PickerWheel } from '@hh.ru/magritte-ui-picker-wheel/PickerWheel';
 export { UncontrolledPickerWheel } from '@hh.ru/magritte-ui-picker-wheel/UncontrolledPickerWheel';

package/index.js

@@ -1,10 +1,12 @@
 import './index.css';
 export * from '@hh.ru/magritte-ui-theme-provider';
+export { itemsFromRange } from './itemsFromRange.js';
 export { PickerWheel } from './PickerWheel.js';
 export { UncontrolledPickerWheel } from './UncontrolledPickerWheel.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'classnames';
 import '@hh.ru/magritte-internal-custom-scroll';
+import '@hh.ru/magritte-ui-bottom-sheet';
 import '@hh.ru/magritte-ui-breakpoint';
 //# sourceMappingURL=index.js.map

package/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}

package/itemsFromRange.d.ts

@@ -0,0 +1,2 @@
+import { PickerWheelItem } from '@hh.ru/magritte-ui-picker-wheel/types';
+export declare const itemsFromRange: (start: number, end: number, discreteness?: number) => Array<PickerWheelItem>;

package/itemsFromRange.js

@@ -0,0 +1,11 @@
+import './index.css';
+const itemsFromRange = (start, end, discreteness = 1) => {
+    const result = [];
+    for (let i = start; discreteness > 0 ? i <= end : i > discreteness; i += discreteness) {
+        result.push({ text: `${i}` });
+    }
+    return result;
+};
+
+export { itemsFromRange };
+//# sourceMappingURL=itemsFromRange.js.map

package/itemsFromRange.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"itemsFromRange.js","sources":["../src/itemsFromRange.ts"],"sourcesContent":["import { PickerWheelItem } from '@hh.ru/magritte-ui-picker-wheel/types';\n\nexport const itemsFromRange = (start: number, end: number, discreteness: number = 1): Array<PickerWheelItem> => {\n    const result = [];\n    for (let i = start; discreteness > 0 ? i <= end : i > discreteness; i += discreteness) {\n        result.push({ text: `${i}` });\n    }\n    return result;\n};\n"],"names":[],"mappings":"AAEO,MAAM,cAAc,GAAG,CAAC,KAAa,EAAE,GAAW,EAAE,YAAA,GAAuB,CAAC,KAA4B;IAC3G,MAAM,MAAM,GAAG,EAAE,CAAC;IAClB,KAAK,IAAI,CAAC,GAAG,KAAK,EAAE,YAAY,GAAG,CAAC,GAAG,CAAC,IAAI,GAAG,GAAG,CAAC,GAAG,YAAY,EAAE,CAAC,IAAI,YAAY,EAAE;QACnF,MAAM,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,CAAA,EAAG,CAAC,CAAA,CAAE,EAAE,CAAC,CAAC;KACjC;AACD,IAAA,OAAO,MAAM,CAAC;AAClB;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hh.ru/magritte-ui-picker-wheel",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "main": "index.js",
   "types": "index.d.ts",
   "sideEffects": [
@@ -22,9 +22,11 @@
   "dependencies": {
     "@hh.ru/magritte-design-tokens": "21.3.2",
     "@hh.ru/magritte-internal-custom-scroll": "1.4.0",
+    "@hh.ru/magritte-types": "5.0.1",
+    "@hh.ru/magritte-ui-bottom-sheet": "7.1.3",
     "@hh.ru/magritte-ui-breakpoint": "5.0.0",
     "@hh.ru/magritte-ui-theme-provider": "1.1.41",
-    "@hh.ru/magritte-ui-typography": "3.0.31"
+    "@hh.ru/magritte-ui-typography": "3.0.32"
   },
   "peerDependencies": {
     "classnames": ">=2.3.2",
@@ -33,5 +35,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "701d9de63f5201fe61f21bbc9f0252a59201c9e3"
+  "gitHead": "d12e0d9910ca5fb5323a5312386cb48255aa5ca6"
 }

package/types.d.ts

@@ -1,6 +1,4 @@
-export type ArrayWithLength<Item, Length> = Array<Item> & {
-    length: Length;
-};
+import { FcWithFlag } from '@hh.ru/magritte-types';
 export interface PickerWheelItem {
     disabled?: boolean;
     key?: React.Key;
@@ -11,14 +9,15 @@ export interface PickerWheelColumn {
     circular?: boolean;
     items: Array<PickerWheelItem>;
 }
-export interface PickerWheelProps<ColumnCount extends 1 | 2 | 3 | 4> {
-    /** Устанавливает фиксированную высоту в 7 айтемов. Нужно использовать, если компонент используется вне боттомшита */
+export interface PickerWheelProps {
+    /** Форсирует фиксированную высоту в 7 айтемов внутри боттомшита с height='full-screen' */
     fixedHeight?: boolean;
-    columns: ArrayWithLength<PickerWheelColumn, ColumnCount>;
-    onChange?: (selectedIndexes: ArrayWithLength<number, ColumnCount>) => void;
-    selectedIndexes: ArrayWithLength<number, ColumnCount>;
-    showDelimiter?: ColumnCount extends 2 | 4 ? boolean : false;
-}
-export interface PickerWheelComponent {
-    <ColumnCount extends 1 | 2 | 3 | 4>(props: PickerWheelProps<ColumnCount>): React.ReactElement | null;
+    /** Массив колонок длиной 1..4 */
+    columns: Array<PickerWheelColumn>;
+    onChange?: (selectedIndexes: Array<number>) => void;
+    /** Массив выбранных индексов, совпадающий по длине с columns */
+    selectedIndexes: Array<number>;
+    /** Показывать ли разделитель, работает только при длине columns равной 2 или 4 */
+    showDelimiter?: boolean;
 }
+export type PickerWheelComponent = FcWithFlag<PickerWheelProps, 'isFullHeightBottomSheetContent'>;