zkit-ui 1.0.0

package/dist/ui/LinkedScroll/index.d.ts

@@ -0,0 +1,78 @@
+import * as React from 'react';
+import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
+import type { FlashListProps } from '@shopify/flash-list';
+export type LinkedScrollValue = string | number;
+export type LinkedScrollItem<Value extends LinkedScrollValue = LinkedScrollValue, Data = unknown> = {
+    value: Value;
+    label: React.ReactNode;
+    disabled?: boolean;
+    data?: Data;
+    accessibilityLabel?: string;
+};
+export type LinkedScrollChangeSource = 'menu' | 'content';
+export type LinkedScrollChangeMeta<Value extends LinkedScrollValue = LinkedScrollValue, Data = unknown> = {
+    source: LinkedScrollChangeSource;
+    item: LinkedScrollItem<Value, Data>;
+    index: number;
+};
+export type LinkedScrollMenuItemRenderContext<Value extends LinkedScrollValue = LinkedScrollValue, Data = unknown> = {
+    item: LinkedScrollItem<Value, Data>;
+    index: number;
+    selected: boolean;
+    disabled: boolean;
+    press: () => void;
+};
+export type LinkedScrollSectionRenderContext<Value extends LinkedScrollValue = LinkedScrollValue, Data = unknown> = {
+    item: LinkedScrollItem<Value, Data>;
+    index: number;
+    selected: boolean;
+};
+type ContentListReservedProps = 'data' | 'extraData' | 'horizontal' | 'keyExtractor' | 'renderItem' | 'onViewableItemsChanged' | 'viewabilityConfig' | 'viewabilityConfigCallbackPairs';
+type MenuListReservedProps = 'data' | 'extraData' | 'horizontal' | 'keyExtractor' | 'renderItem';
+export type LinkedScrollProps<Value extends LinkedScrollValue = LinkedScrollValue, Data = unknown> = {
+    items: ReadonlyArray<LinkedScrollItem<Value, Data>>;
+    renderSection: (context: LinkedScrollSectionRenderContext<Value, Data>) => React.ReactNode;
+    value?: Value;
+    defaultValue?: Value;
+    onChange?: (value: Value, item: LinkedScrollItem<Value, Data>, meta: LinkedScrollChangeMeta<Value, Data>) => void;
+    disabled?: boolean;
+    menuPosition?: 'left' | 'right';
+    menuWidth?: number;
+    menuItemHeight?: number;
+    menuScrollViewPosition?: number;
+    contentScrollViewPosition?: number;
+    contentScrollViewOffset?: number;
+    sectionGap?: number;
+    contentPaddingHorizontal?: number;
+    contentPaddingVertical?: number;
+    activeViewAreaCoveragePercentThreshold?: number;
+    programmaticScrollGuardDuration?: number;
+    activeColor?: string;
+    inactiveColor?: string;
+    disabledColor?: string;
+    activeBackgroundColor?: string;
+    menuBackgroundColor?: string;
+    contentBackgroundColor?: string;
+    keyExtractor?: (item: LinkedScrollItem<Value, Data>, index: number) => string;
+    renderMenuItem?: (context: LinkedScrollMenuItemRenderContext<Value, Data>) => React.ReactNode;
+    getMenuItemType?: FlashListProps<LinkedScrollItem<Value, Data>>['getItemType'];
+    getSectionType?: FlashListProps<LinkedScrollItem<Value, Data>>['getItemType'];
+    viewabilityConfig?: FlashListProps<LinkedScrollItem<Value, Data>>['viewabilityConfig'];
+    style?: StyleProp<ViewStyle>;
+    menuStyle?: StyleProp<ViewStyle>;
+    contentStyle?: StyleProp<ViewStyle>;
+    menuItemStyle?: StyleProp<ViewStyle>;
+    activeMenuItemStyle?: StyleProp<ViewStyle>;
+    disabledMenuItemStyle?: StyleProp<ViewStyle>;
+    menuItemTextStyle?: StyleProp<TextStyle>;
+    activeMenuItemTextStyle?: StyleProp<TextStyle>;
+    disabledMenuItemTextStyle?: StyleProp<TextStyle>;
+    sectionStyle?: StyleProp<ViewStyle>;
+    activeSectionStyle?: StyleProp<ViewStyle>;
+    menuListProps?: Omit<FlashListProps<LinkedScrollItem<Value, Data>>, MenuListReservedProps>;
+    contentListProps?: Omit<FlashListProps<LinkedScrollItem<Value, Data>>, ContentListReservedProps>;
+    testID?: string;
+};
+export declare function LinkedScroll<Value extends LinkedScrollValue = LinkedScrollValue, Data = unknown>({ items, renderSection, value: valueProp, defaultValue, onChange, disabled, menuPosition, menuWidth, menuItemHeight, menuScrollViewPosition, contentScrollViewPosition, contentScrollViewOffset, sectionGap, contentPaddingHorizontal, contentPaddingVertical, activeViewAreaCoveragePercentThreshold, programmaticScrollGuardDuration, activeColor, inactiveColor, disabledColor, activeBackgroundColor, menuBackgroundColor, contentBackgroundColor, keyExtractor, renderMenuItem, getMenuItemType, getSectionType, viewabilityConfig, style, menuStyle, contentStyle, menuItemStyle, activeMenuItemStyle, disabledMenuItemStyle, menuItemTextStyle, activeMenuItemTextStyle, disabledMenuItemTextStyle, sectionStyle, activeSectionStyle, menuListProps, contentListProps, testID, }: LinkedScrollProps<Value, Data>): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/ui/LinkedScroll/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/LinkedScroll/index.tsx"],"names":[],"mappings":"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"}

package/dist/ui/LinkedScroll/index.js

@@ -0,0 +1,470 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LinkedScroll = LinkedScroll;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const flash_list_1 = require("@shopify/flash-list");
+const zkit_tools_1 = require("zkit-tools");
+const useTheme_1 = require("../../theme/useTheme");
+const Text_1 = require("../Text");
+const DEFAULT_MENU_WIDTH = (0, zkit_tools_1.wp)(96);
+const DEFAULT_MENU_ITEM_HEIGHT = (0, zkit_tools_1.wp)(52);
+const DEFAULT_SECTION_GAP = (0, zkit_tools_1.wp)(12);
+const DEFAULT_CONTENT_PADDING_HORIZONTAL = (0, zkit_tools_1.wp)(12);
+const DEFAULT_CONTENT_PADDING_VERTICAL = (0, zkit_tools_1.wp)(12);
+const MIN_MENU_WIDTH = (0, zkit_tools_1.wp)(64);
+const MIN_TOUCH_TARGET = (0, zkit_tools_1.wp)(44);
+const ONE_PX = (0, zkit_tools_1.wp)(1);
+const DEFAULT_VIEW_AREA_THRESHOLD = 1;
+const DEFAULT_PROGRAMMATIC_GUARD_DURATION = 2200;
+const PROGRAMMATIC_SETTLE_DURATION = 120;
+const DEFAULT_MINIMUM_VIEW_TIME = 32;
+const DISABLED_OPACITY = 0.45;
+const PRESSED_OPACITY = 0.72;
+const MENU_VISIBLE_INDEX_BUFFER = 1;
+const DISABLED_MAINTAIN_VISIBLE_CONTENT_POSITION = { disabled: true };
+function clampNumber(value, min, max) {
+    if (!Number.isFinite(value))
+        return min;
+    return Math.min(Math.max(value, min), max);
+}
+function resolveNonNegative(value, fallback) {
+    if (value == null || !Number.isFinite(value))
+        return fallback;
+    return Math.max(0, value);
+}
+function resolvePositive(value, fallback, min) {
+    if (value == null || !Number.isFinite(value))
+        return fallback;
+    return Math.max(min, value);
+}
+function findIndexByValue(items, value) {
+    if (value === undefined)
+        return -1;
+    return items.findIndex((item) => Object.is(item.value, value));
+}
+function findInitialIndex(items) {
+    const enabledIndex = items.findIndex((item) => !item.disabled);
+    if (enabledIndex >= 0)
+        return enabledIndex;
+    return items.length > 0 ? 0 : -1;
+}
+function renderDefaultMenuLabel(label, style) {
+    if (typeof label === 'string' || typeof label === 'number') {
+        return ((0, jsx_runtime_1.jsx)(Text_1.Text, { numberOfLines: 1, style: style, children: label }));
+    }
+    return (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.menuLabelNode, children: label });
+}
+function LinkedScroll({ items, renderSection, value: valueProp, defaultValue, onChange, disabled = false, menuPosition = 'left', menuWidth, menuItemHeight, menuScrollViewPosition = 0.5, contentScrollViewPosition = 0, contentScrollViewOffset, sectionGap, contentPaddingHorizontal, contentPaddingVertical, activeViewAreaCoveragePercentThreshold, programmaticScrollGuardDuration = DEFAULT_PROGRAMMATIC_GUARD_DURATION, activeColor, inactiveColor, disabledColor, activeBackgroundColor, menuBackgroundColor, contentBackgroundColor, keyExtractor, renderMenuItem, getMenuItemType, getSectionType, viewabilityConfig, style, menuStyle, contentStyle, menuItemStyle, activeMenuItemStyle, disabledMenuItemStyle, menuItemTextStyle, activeMenuItemTextStyle, disabledMenuItemTextStyle, sectionStyle, activeSectionStyle, menuListProps, contentListProps, testID, }) {
+    const theme = (0, useTheme_1.useTheme)();
+    const isControlled = valueProp !== undefined;
+    const [uncontrolledValue, setUncontrolledValue] = React.useState(() => {
+        var _a;
+        if (defaultValue !== undefined)
+            return defaultValue;
+        const initialIndex = findInitialIndex(items);
+        return initialIndex >= 0 ? (_a = items[initialIndex]) === null || _a === void 0 ? void 0 : _a.value : undefined;
+    });
+    const currentValue = isControlled ? valueProp : uncontrolledValue;
+    const rawActiveIndex = findIndexByValue(items, currentValue);
+    const fallbackActiveIndex = findInitialIndex(items);
+    const activeIndex = rawActiveIndex >= 0 ? rawActiveIndex : fallbackActiveIndex;
+    const activeItem = activeIndex >= 0 ? items[activeIndex] : undefined;
+    const activeValue = activeItem === null || activeItem === void 0 ? void 0 : activeItem.value;
+    const resolvedMenuWidth = resolvePositive(menuWidth, DEFAULT_MENU_WIDTH, MIN_MENU_WIDTH);
+    const resolvedMenuItemHeight = resolvePositive(menuItemHeight, DEFAULT_MENU_ITEM_HEIGHT, MIN_TOUCH_TARGET);
+    const resolvedSectionGap = resolveNonNegative(sectionGap, DEFAULT_SECTION_GAP);
+    const resolvedContentPaddingHorizontal = resolveNonNegative(contentPaddingHorizontal, DEFAULT_CONTENT_PADDING_HORIZONTAL);
+    const resolvedContentPaddingVertical = resolveNonNegative(contentPaddingVertical, DEFAULT_CONTENT_PADDING_VERTICAL);
+    const resolvedContentScrollViewOffset = resolveNonNegative(contentScrollViewOffset, 0);
+    const resolvedMenuScrollViewPosition = clampNumber(menuScrollViewPosition, 0, 1);
+    const resolvedContentScrollViewPosition = clampNumber(contentScrollViewPosition, 0, 1);
+    const resolvedViewAreaThreshold = clampNumber(activeViewAreaCoveragePercentThreshold !== null && activeViewAreaCoveragePercentThreshold !== void 0 ? activeViewAreaCoveragePercentThreshold : DEFAULT_VIEW_AREA_THRESHOLD, 0, 100);
+    const resolvedProgrammaticGuardDuration = Math.max(0, Number.isFinite(programmaticScrollGuardDuration) ? programmaticScrollGuardDuration : 0);
+    const resolvedActiveColor = activeColor !== null && activeColor !== void 0 ? activeColor : theme.colors.primary;
+    const resolvedInactiveColor = inactiveColor !== null && inactiveColor !== void 0 ? inactiveColor : theme.colors.muted;
+    const resolvedDisabledColor = disabledColor !== null && disabledColor !== void 0 ? disabledColor : theme.colors.disabled;
+    const resolvedActiveBackgroundColor = activeBackgroundColor !== null && activeBackgroundColor !== void 0 ? activeBackgroundColor : theme.colors.secondary;
+    const resolvedMenuBackgroundColor = menuBackgroundColor !== null && menuBackgroundColor !== void 0 ? menuBackgroundColor : '#F7F8FA';
+    const resolvedContentBackgroundColor = contentBackgroundColor !== null && contentBackgroundColor !== void 0 ? contentBackgroundColor : theme.colors.surface;
+    const menuListRef = React.useRef(null);
+    const contentListRef = React.useRef(null);
+    const pendingProgrammaticValueRef = React.useRef(null);
+    const programmaticTimerRef = React.useRef(null);
+    const programmaticSettleTimerRef = React.useRef(null);
+    const programmaticScrollIdRef = React.useRef(0);
+    const activeValueRef = React.useRef(activeValue);
+    const disabledRef = React.useRef(disabled);
+    const lastInternalCommitValueRef = React.useRef(null);
+    const lastChangeSourceRef = React.useRef('external');
+    const didInitialContentSyncRef = React.useRef(false);
+    const didInitialMenuSyncRef = React.useRef(false);
+    const itemsRef = React.useRef(items);
+    itemsRef.current = items;
+    activeValueRef.current = activeValue;
+    disabledRef.current = disabled;
+    const clearProgrammaticTimer = React.useCallback(() => {
+        if (programmaticTimerRef.current == null)
+            return;
+        clearTimeout(programmaticTimerRef.current);
+        programmaticTimerRef.current = null;
+    }, []);
+    const clearProgrammaticSettleTimer = React.useCallback(() => {
+        if (programmaticSettleTimerRef.current == null)
+            return;
+        clearTimeout(programmaticSettleTimerRef.current);
+        programmaticSettleTimerRef.current = null;
+    }, []);
+    const releaseProgrammaticSync = React.useCallback((scrollId) => {
+        if (scrollId != null && scrollId !== programmaticScrollIdRef.current)
+            return;
+        pendingProgrammaticValueRef.current = null;
+        clearProgrammaticTimer();
+        clearProgrammaticSettleTimer();
+    }, [clearProgrammaticSettleTimer, clearProgrammaticTimer]);
+    const releaseProgrammaticSyncRef = React.useRef(releaseProgrammaticSync);
+    releaseProgrammaticSyncRef.current = releaseProgrammaticSync;
+    const setProgrammaticTarget = React.useCallback((nextValue) => {
+        const scrollId = programmaticScrollIdRef.current + 1;
+        programmaticScrollIdRef.current = scrollId;
+        pendingProgrammaticValueRef.current = nextValue;
+        clearProgrammaticTimer();
+        if (resolvedProgrammaticGuardDuration <= 0)
+            return scrollId;
+        programmaticTimerRef.current = setTimeout(() => {
+            if (scrollId !== programmaticScrollIdRef.current)
+                return;
+            pendingProgrammaticValueRef.current = null;
+            programmaticTimerRef.current = null;
+        }, resolvedProgrammaticGuardDuration);
+        return scrollId;
+    }, [clearProgrammaticTimer, resolvedProgrammaticGuardDuration]);
+    const finishProgrammaticSync = React.useCallback((scrollId) => {
+        if (scrollId == null)
+            return;
+        clearProgrammaticSettleTimer();
+        programmaticSettleTimerRef.current = setTimeout(() => {
+            programmaticSettleTimerRef.current = null;
+            releaseProgrammaticSyncRef.current(scrollId);
+        }, PROGRAMMATIC_SETTLE_DURATION);
+    }, [clearProgrammaticSettleTimer]);
+    React.useEffect(() => {
+        return () => {
+            clearProgrammaticTimer();
+            clearProgrammaticSettleTimer();
+        };
+    }, [clearProgrammaticSettleTimer, clearProgrammaticTimer]);
+    React.useEffect(() => {
+        if (isControlled || rawActiveIndex >= 0 || activeItem == null)
+            return;
+        setUncontrolledValue(activeItem.value);
+    }, [activeItem, isControlled, rawActiveIndex]);
+    const commitValue = React.useCallback((nextValue, item, index, source) => {
+        if (Object.is(activeValueRef.current, nextValue))
+            return;
+        lastInternalCommitValueRef.current = nextValue;
+        lastChangeSourceRef.current = source;
+        if (!isControlled) {
+            activeValueRef.current = nextValue;
+            setUncontrolledValue(nextValue);
+        }
+        onChange === null || onChange === void 0 ? void 0 : onChange(nextValue, item, { source, item, index });
+    }, [isControlled, onChange]);
+    const commitValueRef = React.useRef(commitValue);
+    commitValueRef.current = commitValue;
+    const resolvedKeyExtractor = React.useCallback((item, index) => {
+        var _a;
+        return (_a = keyExtractor === null || keyExtractor === void 0 ? void 0 : keyExtractor(item, index)) !== null && _a !== void 0 ? _a : String(item.value);
+    }, [keyExtractor]);
+    const scrollMenuToIndex = React.useCallback((index, animated) => {
+        var _a, _b;
+        if (index < 0)
+            return Promise.resolve();
+        return (_b = (_a = menuListRef.current) === null || _a === void 0 ? void 0 : _a.scrollToIndex({
+            index,
+            animated,
+            viewPosition: resolvedMenuScrollViewPosition,
+        })) !== null && _b !== void 0 ? _b : Promise.resolve();
+    }, [resolvedMenuScrollViewPosition]);
+    const isMenuIndexComfortablyVisible = React.useCallback((index) => {
+        var _a;
+        if (index < 0)
+            return true;
+        const visibleRange = (_a = menuListRef.current) === null || _a === void 0 ? void 0 : _a.computeVisibleIndices();
+        if (!visibleRange)
+            return false;
+        const { startIndex, endIndex } = visibleRange;
+        if (!Number.isFinite(startIndex) || !Number.isFinite(endIndex))
+            return false;
+        if (startIndex < 0 || endIndex < 0)
+            return false;
+        return (index >= startIndex + MENU_VISIBLE_INDEX_BUFFER &&
+            index <= endIndex - MENU_VISIBLE_INDEX_BUFFER);
+    }, []);
+    const scrollContentToIndex = React.useCallback((index, animated) => {
+        var _a, _b;
+        if (index < 0)
+            return Promise.resolve();
+        return (_b = (_a = contentListRef.current) === null || _a === void 0 ? void 0 : _a.scrollToIndex({
+            index,
+            animated,
+            viewPosition: resolvedContentScrollViewPosition,
+            viewOffset: resolvedContentScrollViewOffset,
+        })) !== null && _b !== void 0 ? _b : Promise.resolve();
+    }, [resolvedContentScrollViewOffset, resolvedContentScrollViewPosition]);
+    React.useEffect(() => {
+        if (activeIndex < 0)
+            return;
+        const didInitialMenuSync = didInitialMenuSyncRef.current;
+        didInitialMenuSyncRef.current = true;
+        const source = activeValue !== undefined && Object.is(lastInternalCommitValueRef.current, activeValue)
+            ? lastChangeSourceRef.current
+            : 'external';
+        const frame = requestAnimationFrame(() => {
+            if (!didInitialMenuSync || source === 'external' || source === 'menu') {
+                void scrollMenuToIndex(activeIndex, didInitialMenuSync);
+                return;
+            }
+            if (!isMenuIndexComfortablyVisible(activeIndex)) {
+                void scrollMenuToIndex(activeIndex, false);
+            }
+        });
+        return () => cancelAnimationFrame(frame);
+    }, [activeIndex, activeValue, isMenuIndexComfortablyVisible, scrollMenuToIndex]);
+    React.useEffect(() => {
+        if (activeIndex < 0 || activeValue === undefined)
+            return;
+        if (!didInitialContentSyncRef.current) {
+            didInitialContentSyncRef.current = true;
+            if (activeIndex <= 0)
+                return;
+            const frame = requestAnimationFrame(() => scrollContentToIndex(activeIndex, false));
+            return () => cancelAnimationFrame(frame);
+        }
+        if (!isControlled || valueProp === undefined || rawActiveIndex < 0)
+            return;
+        if (Object.is(lastInternalCommitValueRef.current, valueProp))
+            return;
+        const scrollId = setProgrammaticTarget(valueProp);
+        const frame = requestAnimationFrame(() => {
+            void scrollContentToIndex(rawActiveIndex, true).then(() => finishProgrammaticSync(scrollId));
+        });
+        return () => cancelAnimationFrame(frame);
+    }, [
+        activeIndex,
+        activeValue,
+        isControlled,
+        rawActiveIndex,
+        finishProgrammaticSync,
+        scrollContentToIndex,
+        setProgrammaticTarget,
+        valueProp,
+    ]);
+    const handleMenuPress = React.useCallback((item, index) => {
+        if (disabled || item.disabled)
+            return;
+        const scrollId = setProgrammaticTarget(item.value);
+        commitValue(item.value, item, index, 'menu');
+        void scrollMenuToIndex(index, true);
+        void scrollContentToIndex(index, true).then(() => finishProgrammaticSync(scrollId));
+    }, [
+        commitValue,
+        disabled,
+        finishProgrammaticSync,
+        scrollContentToIndex,
+        scrollMenuToIndex,
+        setProgrammaticTarget,
+    ]);
+    const viewabilityConfigRef = React.useRef(viewabilityConfig !== null && viewabilityConfig !== void 0 ? viewabilityConfig : {
+        minimumViewTime: DEFAULT_MINIMUM_VIEW_TIME,
+        viewAreaCoveragePercentThreshold: resolvedViewAreaThreshold,
+    });
+    const handleViewableItemsChanged = React.useRef(({ viewableItems }) => {
+        if (disabledRef.current || viewableItems.length === 0)
+            return;
+        const candidates = viewableItems
+            .filter((token) => token.isViewable && token.index != null)
+            .sort((a, b) => { var _a, _b; return ((_a = a.index) !== null && _a !== void 0 ? _a : 0) - ((_b = b.index) !== null && _b !== void 0 ? _b : 0); });
+        const candidate = candidates[0];
+        if ((candidate === null || candidate === void 0 ? void 0 : candidate.item) == null || candidate.index == null)
+            return;
+        if (pendingProgrammaticValueRef.current != null)
+            return;
+        commitValueRef.current(candidate.item.value, candidate.item, candidate.index, 'content');
+    }).current;
+    const { contentContainerStyle: menuContentContainerStyle, style: menuListStyle, onScrollBeginDrag: onMenuScrollBeginDrag, drawDistance: menuDrawDistance = (0, zkit_tools_1.wp)(240), maintainVisibleContentPosition: menuMaintainVisibleContentPosition = DISABLED_MAINTAIN_VISIBLE_CONTENT_POSITION, scrollEnabled: menuScrollEnabled = true, showsVerticalScrollIndicator: menuShowsVerticalScrollIndicator = false, ...restMenuListProps } = menuListProps !== null && menuListProps !== void 0 ? menuListProps : {};
+    const { contentContainerStyle: contentListContentContainerStyle, style: contentListStyle, onScrollBeginDrag: onContentScrollBeginDrag, onScrollEndDrag: onContentScrollEndDrag, onMomentumScrollEnd: onContentMomentumScrollEnd, drawDistance: contentDrawDistance = (0, zkit_tools_1.wp)(640), maintainVisibleContentPosition: contentMaintainVisibleContentPosition = DISABLED_MAINTAIN_VISIBLE_CONTENT_POSITION, scrollEnabled: contentScrollEnabled = true, showsVerticalScrollIndicator: contentShowsVerticalScrollIndicator = false, ...restContentListProps } = contentListProps !== null && contentListProps !== void 0 ? contentListProps : {};
+    const handleMenuScrollBeginDrag = React.useCallback((event) => {
+        releaseProgrammaticSync();
+        onMenuScrollBeginDrag === null || onMenuScrollBeginDrag === void 0 ? void 0 : onMenuScrollBeginDrag(event);
+    }, [onMenuScrollBeginDrag, releaseProgrammaticSync]);
+    const handleContentScrollBeginDrag = React.useCallback((event) => {
+        releaseProgrammaticSync();
+        onContentScrollBeginDrag === null || onContentScrollBeginDrag === void 0 ? void 0 : onContentScrollBeginDrag(event);
+    }, [onContentScrollBeginDrag, releaseProgrammaticSync]);
+    const handleContentScrollEndDrag = React.useCallback((event) => {
+        onContentScrollEndDrag === null || onContentScrollEndDrag === void 0 ? void 0 : onContentScrollEndDrag(event);
+    }, [onContentScrollEndDrag]);
+    const handleContentMomentumScrollEnd = React.useCallback((event) => {
+        onContentMomentumScrollEnd === null || onContentMomentumScrollEnd === void 0 ? void 0 : onContentMomentumScrollEnd(event);
+    }, [onContentMomentumScrollEnd]);
+    const renderMenuListItem = React.useCallback(({ item, index }) => {
+        const selected = activeValue !== undefined && Object.is(item.value, activeValue);
+        const itemDisabled = disabled || !!item.disabled;
+        const press = () => handleMenuPress(item, index);
+        if (renderMenuItem) {
+            return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: renderMenuItem({
+                    item,
+                    index,
+                    selected,
+                    disabled: itemDisabled,
+                    press,
+                }) }));
+        }
+        return ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { accessibilityLabel: item.accessibilityLabel, accessibilityRole: "button", accessibilityState: { selected, disabled: itemDisabled }, disabled: itemDisabled, onPress: press, style: ({ pressed }) => [
+                styles.menuItem,
+                {
+                    height: resolvedMenuItemHeight,
+                    backgroundColor: selected ? resolvedActiveBackgroundColor : 'transparent',
+                    opacity: itemDisabled ? DISABLED_OPACITY : pressed ? PRESSED_OPACITY : 1,
+                },
+                menuItemStyle,
+                selected ? activeMenuItemStyle : null,
+                itemDisabled ? disabledMenuItemStyle : null,
+            ], children: renderDefaultMenuLabel(item.label, [
+                styles.menuItemText,
+                {
+                    color: itemDisabled
+                        ? resolvedDisabledColor
+                        : selected
+                            ? resolvedActiveColor
+                            : resolvedInactiveColor,
+                },
+                menuItemTextStyle,
+                selected ? activeMenuItemTextStyle : null,
+                itemDisabled ? disabledMenuItemTextStyle : null,
+            ]) }));
+    }, [
+        activeMenuItemStyle,
+        activeMenuItemTextStyle,
+        activeValue,
+        disabled,
+        disabledMenuItemStyle,
+        disabledMenuItemTextStyle,
+        handleMenuPress,
+        menuItemStyle,
+        menuItemTextStyle,
+        renderMenuItem,
+        resolvedActiveBackgroundColor,
+        resolvedActiveColor,
+        resolvedDisabledColor,
+        resolvedInactiveColor,
+        resolvedMenuItemHeight,
+    ]);
+    const renderContentListItem = React.useCallback(({ item, index }) => {
+        const selected = activeValue !== undefined && Object.is(item.value, activeValue);
+        const isLast = index === itemsRef.current.length - 1;
+        return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
+                styles.section,
+                !isLast && resolvedSectionGap > 0 ? { marginBottom: resolvedSectionGap } : null,
+                sectionStyle,
+                selected ? activeSectionStyle : null,
+            ], children: renderSection({ item, index, selected }) }));
+    }, [activeSectionStyle, activeValue, renderSection, resolvedSectionGap, sectionStyle]);
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { testID: testID, style: [
+            styles.root,
+            menuPosition === 'right' ? styles.rootReverse : null,
+            { backgroundColor: resolvedContentBackgroundColor },
+            style,
+        ], children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
+                    styles.menuFrame,
+                    {
+                        width: resolvedMenuWidth,
+                        backgroundColor: resolvedMenuBackgroundColor,
+                        borderColor: theme.colors.border,
+                        borderRightWidth: menuPosition === 'left' ? ONE_PX : 0,
+                        borderLeftWidth: menuPosition === 'right' ? ONE_PX : 0,
+                    },
+                    menuStyle,
+                ], children: (0, jsx_runtime_1.jsx)(flash_list_1.FlashList, { ...restMenuListProps, ref: menuListRef, data: items, drawDistance: menuDrawDistance, extraData: activeValue, getItemType: getMenuItemType, keyExtractor: resolvedKeyExtractor, maintainVisibleContentPosition: menuMaintainVisibleContentPosition, onScrollBeginDrag: handleMenuScrollBeginDrag, renderItem: renderMenuListItem, scrollEnabled: !disabled && menuScrollEnabled, showsVerticalScrollIndicator: menuShowsVerticalScrollIndicator, style: [styles.list, menuListStyle], contentContainerStyle: menuContentContainerStyle }) }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.contentFrame, contentStyle], children: (0, jsx_runtime_1.jsx)(flash_list_1.FlashList, { ...restContentListProps, ref: contentListRef, data: items, drawDistance: contentDrawDistance, extraData: activeValue, getItemType: getSectionType, keyExtractor: resolvedKeyExtractor, maintainVisibleContentPosition: contentMaintainVisibleContentPosition, onMomentumScrollEnd: handleContentMomentumScrollEnd, onScrollBeginDrag: handleContentScrollBeginDrag, onScrollEndDrag: handleContentScrollEndDrag, onViewableItemsChanged: handleViewableItemsChanged, renderItem: renderContentListItem, scrollEnabled: !disabled && contentScrollEnabled, showsVerticalScrollIndicator: contentShowsVerticalScrollIndicator, style: [styles.list, contentListStyle], contentContainerStyle: [
+                        {
+                            paddingHorizontal: resolvedContentPaddingHorizontal,
+                            paddingVertical: resolvedContentPaddingVertical,
+                        },
+                        contentListContentContainerStyle,
+                    ], viewabilityConfig: viewabilityConfigRef.current }) })] }));
+}
+const styles = react_native_1.StyleSheet.create({
+    root: {
+        flex: 1,
+        minHeight: 0,
+        flexDirection: 'row',
+    },
+    rootReverse: {
+        flexDirection: 'row-reverse',
+    },
+    menuFrame: {
+        overflow: 'hidden',
+    },
+    contentFrame: {
+        flex: 1,
+        minWidth: 0,
+    },
+    list: {
+        flex: 1,
+    },
+    menuItem: {
+        position: 'relative',
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingHorizontal: (0, zkit_tools_1.wp)(10),
+    },
+    menuItemText: {
+        fontSize: (0, zkit_tools_1.wp)(15),
+        lineHeight: (0, zkit_tools_1.wp)(20),
+        fontWeight: '500',
+        includeFontPadding: false,
+    },
+    menuLabelNode: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        minWidth: 0,
+    },
+    section: {
+        width: '100%',
+    },
+});

package/dist/ui/LoadingSpinner/index.d.ts

@@ -0,0 +1,8 @@
+export type LoadingSpinnerProps = {
+    size?: number;
+    color?: string;
+    animating?: boolean;
+    speed?: number;
+};
+export declare function LoadingSpinner({ size, color, animating, speed }: LoadingSpinnerProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=index.d.ts.map

package/dist/ui/LoadingSpinner/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/LoadingSpinner/index.tsx"],"names":[],"mappings":"AAsFA,MAAM,MAAM,mBAAmB,GAAG;IAChC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,wBAAgB,cAAc,CAAC,EAAE,IAAU,EAAE,KAAe,EAAE,SAAgB,EAAE,KAAS,EAAE,EAAE,mBAAmB,kDAU/G"}