@ovotech/element-native 5.5.0 → 5.7.0

package/dist/components/Rail/useRailPaging.js

@@ -0,0 +1,95 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useRailPaging = useRailPaging;
+const react_1 = require("react");
+//Epsilon allowable margin for nearly equal comparisons
+const EPS = 0.5;
+function nearlyEqual(a, b, eps = EPS) {
+    return Math.abs(a - b) <= eps;
+}
+function clamp(n, lo, hi) {
+    return Math.max(lo, Math.min(n, hi));
+}
+function uniqueNearlyEqual(values, eps = EPS) {
+    const out = [];
+    for (const v of values) {
+        if (out.length === 0 || !nearlyEqual(out[out.length - 1], v, eps))
+            out.push(v);
+    }
+    return out;
+}
+function useRailPaging({ itemCount }) {
+    const safeItemCount = Math.max(0, itemCount);
+    const [containerWidth, setContainerWidth] = (0, react_1.useState)(0);
+    const [contentWidth, setContentWidth] = (0, react_1.useState)(0);
+    const [itemWidth, setItemWidth] = (0, react_1.useState)(0);
+    const [activeStartIndex, setActiveStartIndex] = (0, react_1.useState)(0);
+    const stride = itemWidth;
+    const isScrollable = containerWidth > 0 && contentWidth > containerWidth + 1;
+    const visibleCount = (0, react_1.useMemo)(() => {
+        const maxVisible = Math.max(1, safeItemCount);
+        if (safeItemCount === 0)
+            return 1;
+        if (containerWidth <= 0 || stride <= 0)
+            return 1;
+        return clamp(Math.ceil(containerWidth / stride), 1, maxVisible);
+    }, [containerWidth, stride, safeItemCount]);
+    const maxStartIndex = (0, react_1.useMemo)(() => {
+        if (safeItemCount <= 0)
+            return 0;
+        return clamp(safeItemCount - visibleCount, 0, safeItemCount - 1);
+    }, [safeItemCount, visibleCount]);
+    (0, react_1.useEffect)(() => {
+        setActiveStartIndex(prev => clamp(prev, 0, maxStartIndex));
+    }, [maxStartIndex]);
+    (0, react_1.useEffect)(() => {
+        setActiveStartIndex(0);
+    }, [safeItemCount]);
+    const snapOffsets = (0, react_1.useMemo)(() => {
+        var _a;
+        if (safeItemCount === 0)
+            return [0];
+        if (containerWidth <= 0 || contentWidth <= 0 || stride <= 0)
+            return [0];
+        const maxScrollX = Math.max(0, contentWidth - containerWidth);
+        const offsets = [];
+        for (let index = 0; index <= maxStartIndex; index++) {
+            offsets.push(index * stride);
+        }
+        const last = (_a = offsets[offsets.length - 1]) !== null && _a !== void 0 ? _a : 0;
+        if (!nearlyEqual(last, maxScrollX))
+            offsets.push(maxScrollX);
+        return uniqueNearlyEqual(offsets);
+    }, [safeItemCount, containerWidth, contentWidth, stride, maxStartIndex]);
+    const onContainerLayout = (0, react_1.useCallback)((width) => {
+        setContainerWidth(width > 0 ? width : 0);
+    }, []);
+    const onContentSizeChange = (0, react_1.useCallback)((width) => {
+        setContentWidth(width > 0 ? width : 0);
+    }, []);
+    /**
+     * NOTE: This measures ONE item width (e.g. the first child) and assumes all
+     * items are the same width.
+     */
+    const onItemLayout = (0, react_1.useCallback)((width) => {
+        if (width > 0)
+            setItemWidth(width);
+    }, []);
+    const onMomentumEnd = (0, react_1.useCallback)((offsetX) => {
+        if (stride <= 0)
+            return;
+        const raw = Math.round(offsetX / stride);
+        const nextStart = clamp(raw, 0, maxStartIndex);
+        setActiveStartIndex(prev => (prev === nextStart ? prev : nextStart));
+    }, [stride, maxStartIndex]);
+    return {
+        snapOffsets,
+        isScrollable,
+        activeStartIndex,
+        visibleCount,
+        onContainerLayout,
+        onContentSizeChange,
+        onItemLayout,
+        onMomentumEnd,
+    };
+}

package/dist/components/SelectField/Select.d.ts

@@ -1,4 +1,6 @@
 import { TouchableOpacityProps } from 'react-native';
+import { InputProps } from '../Input/Input';
+import { SelectOption } from './styled';
 type SelectOption = {
     label: string;
     value: string;
@@ -10,585 +12,9 @@ export type SelectProps = {
     noOptionMessage?: string;
     hasError?: boolean;
     onSelected?(value: SelectOption): void;
+    size?: 'medium' | 'small';
     testID?: string;
     ref?: React.RefObject<TouchableOpacityProps | null>;
-};
-declare const SelectOption: import("styled-components").StyledComponent<typeof import("react-native").TouchableOpacity, {
-    color: {
-        neutral: {
-            "20": string;
-            "30": string;
-            "40": string;
-            "50": string;
-            "60": string;
-            "70": string;
-            "80": string;
-            white: string;
-            black: string;
-        };
-        red: {
-            "20": string;
-            "30": string;
-            "40": string;
-            "50": string;
-            "60": string;
-            "70": string;
-            "80": string;
-        };
-        orange: {
-            "20": string;
-            "30": string;
-            "40": string;
-            "50": string;
-            "60": string;
-            "70": string;
-        };
-        yellow: {
-            "70": string;
-            "80": string;
-        };
-        green: {
-            "20": string;
-            "30": string;
-            "40": string;
-            "50": string;
-            "56": string;
-            "60": string;
-            "70": string;
-            "80": string;
-            "90": string;
-        };
-        blue: {
-            "20": string;
-            "30": string;
-            "40": string;
-            "50": string;
-            "60": string;
-            "70": string;
-        };
-        alert: {
-            success: string;
-            successTint: string;
-            warning: string;
-            warningTint: string;
-            error: string;
-            errorTint: string;
-            info: string;
-            infoTint: string;
-            neutral: string;
-            neutralTint: string;
-            border: string;
-        };
-        input: {
-            borderDim: string;
-        };
-        brand: {
-            brand: string;
-            dark: string;
-            dim: string;
-            bold: string;
-            bright: string;
-            gradientFrom: string;
-            gradientTo: string;
-            onBrand: string;
-            onBrandVariant: string;
-            aiGradientFrom: string;
-            aiGradientTo: string;
-            fixed: {
-                brand: string;
-                dark: string;
-                dim: string;
-                bold: string;
-                bright: string;
-                onBrand: string;
-                onBrandVariant: string;
-            };
-        };
-        outline: {
-            outer: string;
-            inner: string;
-        };
-        surface: {
-            surface: string;
-            bright: string;
-            dim: string;
-            onSurface: string;
-            onSurfaceVariant: string;
-            border: string;
-            borderDim: string;
-            link: string;
-            electricity: string;
-            gas: string;
-            fadeFrom: string;
-            fadeTo: string;
-            fixed: {
-                onSurface: string;
-                bright: string;
-            };
-        };
-    };
-    transition: {
-        duration: {
-            fast: number;
-            medium: number;
-            slow: number;
-        };
-    };
-    unit: {
-        "0": number;
-        "25": number;
-        "50": number;
-        "100": number;
-        "200": number;
-        "300": number;
-        "350": number;
-        "400": number;
-        "450": number;
-        "500": number;
-        "550": number;
-        "600": number;
-        "700": number;
-        "800": number;
-        "900": number;
-        "1000": number;
-        "1100": number;
-        "1200": number;
-        "1300": number;
-        "1400": number;
-        "1500": number;
-        "1600": number;
-        "1800": number;
-        "2000": number;
-        "2400": number;
-        "3000": number;
-        "3500": number;
-    };
-    border: {
-        radius: {
-            xs: number;
-            sm: number;
-            md: number;
-            lg: number;
-            xl: number;
-            "2xl": number;
-            "3xl": number;
-        };
-        width: {
-            sm: number;
-            md: number;
-            lg: number;
-        };
-    };
-    breakpoint: {
-        xsmall: number;
-        small: number;
-        medium: number;
-        large: number;
-    };
-    native: {
-        font: {
-            family: {
-                black: string;
-                book: string;
-                bold: string;
-            };
-        };
-    };
-    web: {
-        font: {
-            family: string;
-        };
-    };
-    font: {
-        letterSpacing: {
-            d1: {
-                mediaQuery: {
-                    sm: number;
-                    lg: number;
-                };
-            };
-            d2: {
-                mediaQuery: {
-                    sm: number;
-                    lg: number;
-                };
-            };
-            d3: {
-                mediaQuery: {
-                    sm: number;
-                    lg: number;
-                };
-            };
-            d4: {
-                mediaQuery: {
-                    sm: number;
-                    lg: number;
-                };
-            };
-            "4xl": {
-                mediaQuery: {
-                    sm: number;
-                    lg: number;
-                };
-            };
-            "3xl": {
-                mediaQuery: {
-                    sm: number;
-                    lg: number;
-                };
-            };
-            "2xl": {
-                mediaQuery: {
-                    sm: number;
-                    lg: number;
-                };
-            };
-            xl: {
-                mediaQuery: {
-                    sm: number;
-                    lg: number;
-                };
-            };
-            lg: {
-                mediaQuery: {
-                    sm: number;
-                    lg: number;
-                };
-            };
-            md: {
-                mediaQuery: {
-                    sm: number;
-                    lg: number;
-                };
-            };
-            sm: {
-                mediaQuery: {
-                    sm: number;
-                    lg: number;
-                };
-            };
-            xs: {
-                mediaQuery: {
-                    sm: number;
-                    lg: number;
-                };
-            };
-        };
-        lineHeight: {
-            d1: {
-                mediaQuery: {
-                    sm: number;
-                    lg: number;
-                };
-            };
-            d2: {
-                mediaQuery: {
-                    sm: number;
-                    lg: number;
-                };
-            };
-            d3: {
-                mediaQuery: {
-                    sm: number;
-                    lg: number;
-                };
-            };
-            d4: {
-                mediaQuery: {
-                    sm: number;
-                    lg: number;
-                };
-            };
-            "4xl": {
-                mediaQuery: {
-                    sm: number;
-                    lg: number;
-                };
-            };
-            "3xl": {
-                mediaQuery: {
-                    sm: number;
-                    lg: number;
-                };
-            };
-            "2xl": {
-                mediaQuery: {
-                    sm: number;
-                    lg: number;
-                };
-            };
-            xl: {
-                mediaQuery: {
-                    sm: number;
-                    lg: number;
-                };
-            };
-            lg: {
-                mediaQuery: {
-                    sm: number;
-                    lg: number;
-                };
-            };
-            md: {
-                mediaQuery: {
-                    sm: number;
-                    lg: number;
-                };
-            };
-            sm: {
-                mediaQuery: {
-                    sm: number;
-                    lg: number;
-                };
-            };
-            xs: {
-                mediaQuery: {
-                    sm: number;
-                    lg: number;
-                };
-            };
-        };
-        paragraphSpace: {
-            d1: {
-                mediaQuery: {
-                    sm: number;
-                    lg: number;
-                };
-            };
-            d2: {
-                mediaQuery: {
-                    sm: number;
-                    lg: number;
-                };
-            };
-            d3: {
-                mediaQuery: {
-                    sm: number;
-                    lg: number;
-                };
-            };
-            d4: {
-                mediaQuery: {
-                    sm: number;
-                    lg: number;
-                };
-            };
-            "4xl": {
-                mediaQuery: {
-                    sm: number;
-                    lg: number;
-                };
-            };
-            "3xl": {
-                mediaQuery: {
-                    sm: number;
-                    lg: number;
-                };
-            };
-            "2xl": {
-                mediaQuery: {
-                    sm: number;
-                    lg: number;
-                };
-            };
-            xl: {
-                mediaQuery: {
-                    sm: number;
-                    lg: number;
-                };
-            };
-            lg: {
-                mediaQuery: {
-                    sm: number;
-                    lg: number;
-                };
-            };
-            md: {
-                mediaQuery: {
-                    sm: number;
-                    lg: number;
-                };
-            };
-            sm: {
-                mediaQuery: {
-                    sm: number;
-                    lg: number;
-                };
-            };
-            xs: {
-                mediaQuery: {
-                    sm: number;
-                    lg: number;
-                };
-            };
-        };
-        size: {
-            d1: {
-                mediaQuery: {
-                    sm: number;
-                    lg: number;
-                };
-            };
-            d2: {
-                mediaQuery: {
-                    sm: number;
-                    lg: number;
-                };
-            };
-            d3: {
-                mediaQuery: {
-                    sm: number;
-                    lg: number;
-                };
-            };
-            d4: {
-                mediaQuery: {
-                    sm: number;
-                    lg: number;
-                };
-            };
-            "4xl": {
-                mediaQuery: {
-                    sm: number;
-                    lg: number;
-                };
-            };
-            "3xl": {
-                mediaQuery: {
-                    sm: number;
-                    lg: number;
-                };
-            };
-            "2xl": {
-                mediaQuery: {
-                    sm: number;
-                    lg: number;
-                };
-            };
-            xl: {
-                mediaQuery: {
-                    sm: number;
-                    lg: number;
-                };
-            };
-            lg: {
-                mediaQuery: {
-                    sm: number;
-                    lg: number;
-                };
-            };
-            md: {
-                mediaQuery: {
-                    sm: number;
-                    lg: number;
-                };
-            };
-            sm: {
-                mediaQuery: {
-                    sm: number;
-                    lg: number;
-                };
-            };
-            xs: {
-                mediaQuery: {
-                    sm: number;
-                    lg: number;
-                };
-            };
-        };
-        weight: {
-            book: number;
-            bold: number;
-            black: number;
-        };
-    };
-    mediaQuery: {
-        xsmall: number;
-        small: number;
-        medium: number;
-        large: number;
-    };
-    customMediaQuery: {
-        "xsmall-and-up": number;
-        "small-and-up": number;
-        "medium-and-up": number;
-        "large-and-up": number;
-    };
-    opacity: {
-        solid: number;
-        translucent: number;
-        transparent: number;
-    };
-    space: {
-        "0": number;
-        "25": number;
-        "50": number;
-        "100": number;
-        "150": number;
-        "200": number;
-        "250": number;
-        "300": number;
-        "350": number;
-        "400": number;
-        "450": number;
-        "500": number;
-        "550": number;
-        "600": number;
-        "700": number;
-        "800": number;
-        "900": number;
-        "1000": number;
-        "1100": number;
-        "1200": number;
-        "1300": number;
-        "1400": number;
-        "1500": number;
-        "1600": number;
-        "1800": number;
-        "2000": number;
-        "2400": number;
-        "3000": number;
-        "3500": number;
-        base: number;
-    };
-    button: {
-        color: {
-            focus: {
-                blue: string;
-                white: string;
-            };
-        };
-        surface: {
-            color: {
-                fg: string;
-                bg: string;
-                bgVariant: string;
-                bgHover: string;
-                fgInverted: string;
-                bgInverted: string;
-                bgInvertedHover: string;
-            };
-        };
-        destructive: {
-            color: {
-                fg: string;
-                bg: string;
-                bgHover: string;
-            };
-        };
-    };
-    input: {
-        color: {
-            label: string;
-            border: string;
-            borderError: string;
-            hint: string;
-            selected: string;
-            selectedTint: string;
-        };
-    };
-}, {
-    isLastOption: boolean;
-}, never>;
-export declare const Select: ({ options, defaultSelected, noOptionMessage, onSelected, hasError, testID, ref, }: SelectProps) => import("react/jsx-runtime").JSX.Element;
+} & Pick<InputProps, 'selected'>;
+export declare const Select: ({ options, defaultSelected, noOptionMessage, onSelected, hasError, selected, size, testID, ref, }: SelectProps) => import("react/jsx-runtime").JSX.Element;
 export {};