@ovotech/element-native 5.6.0 → 5.7.0

package/dist/esm/components/Rail/styles.js

@@ -0,0 +1,49 @@
+import { View } from 'react-native';
+import Animated from 'react-native-reanimated';
+import styled from '../../styled.native';
+export const StyledRail = styled(Animated.ScrollView)(({ theme, hasIndicator }) => ({
+    paddingVertical: theme.space[350],
+    paddingHorizontal: theme.space[50],
+    marginBottom: hasIndicator ? 0 : theme.space[900],
+}));
+export const RailItemWrapper = styled.View(({ theme }) => ({
+    paddingHorizontal: theme.space[100],
+}));
+export const RailIndicatorContainer = styled.View(({ theme }) => ({
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    alignSelf: 'center',
+    backgroundColor: theme.color.surface.dim,
+    borderRadius: theme.border.radius['2xl'],
+    padding: theme.space[350],
+    gap: theme.space[200],
+}));
+export const DotContainer = styled(Animated.View)(({ theme, isActive }) => ({
+    height: theme.space[200],
+    width: theme.space[200],
+    borderRadius: 9999,
+    backgroundColor: isActive
+        ? theme.color.surface.onSurface
+        : theme.color.surface.onSurfaceVariant,
+}));
+export const Header = styled(View)(({ theme }) => ({
+    flexDirection: 'row',
+    gap: theme.space[300],
+    marginBottom: -theme.space[100],
+    marginLeft: theme.space[100],
+}));
+export const HeadingText = styled(View)({
+    flex: 1,
+    flexShrink: 1,
+});
+export const IconContainer = styled(View)(({ theme }) => ({
+    borderRadius: theme.border.radius['2xl'],
+    backgroundColor: theme.color.surface.bright,
+    borderWidth: 0,
+    padding: theme.space[200],
+    width: theme.space[1100],
+    height: theme.space[1100],
+    alignItems: 'center',
+    justifyContent: 'center',
+}));

package/dist/esm/components/Rail/useRailPaging.js

@@ -0,0 +1,92 @@
+import { useCallback, useEffect, useMemo, useState } from '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;
+}
+export function useRailPaging({ itemCount }) {
+    const safeItemCount = Math.max(0, itemCount);
+    const [containerWidth, setContainerWidth] = useState(0);
+    const [contentWidth, setContentWidth] = useState(0);
+    const [itemWidth, setItemWidth] = useState(0);
+    const [activeStartIndex, setActiveStartIndex] = useState(0);
+    const stride = itemWidth;
+    const isScrollable = containerWidth > 0 && contentWidth > containerWidth + 1;
+    const visibleCount = 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 = useMemo(() => {
+        if (safeItemCount <= 0)
+            return 0;
+        return clamp(safeItemCount - visibleCount, 0, safeItemCount - 1);
+    }, [safeItemCount, visibleCount]);
+    useEffect(() => {
+        setActiveStartIndex(prev => clamp(prev, 0, maxStartIndex));
+    }, [maxStartIndex]);
+    useEffect(() => {
+        setActiveStartIndex(0);
+    }, [safeItemCount]);
+    const snapOffsets = 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 = useCallback((width) => {
+        setContainerWidth(width > 0 ? width : 0);
+    }, []);
+    const onContentSizeChange = 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 = useCallback((width) => {
+        if (width > 0)
+            setItemWidth(width);
+    }, []);
+    const onMomentumEnd = 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/esm/components/Toast/Toast.js

@@ -1,3 +1,14 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { toast, ToastPosition, Toasts, } from '@backpackapp-io/react-native-toast';
 import { numToPx } from '@ovotech/element-core';
@@ -8,7 +19,13 @@ import styled, { css } from '../../styled.native';
 import { Action } from '../ActionList';
 import { Icon } from '../Icon';
 import { P } from '../P';
-export const ToastsContainer = ({ top = -80 }) => (_jsx(Toasts, { extraInsets: { top } }));
+const TOAST_PADDING = 20;
+export const ToastsContainer = (_a) => {
+    var { top = -80, left, inModal = false } = _a, rest = __rest(_a, ["top", "left", "inModal"]);
+    // Extra right inset if in modal, unless it's been explicitly passed
+    const leftInset = inModal ? -20 : left !== null && left !== void 0 ? left : 0;
+    return _jsx(Toasts, Object.assign({ extraInsets: { top, left: leftInset } }, rest));
+};
 const StyledView = styled.View(({ theme, variant }) => css `
     background-color: ${variant === 'default'
     ? theme.color.alert.success
@@ -39,29 +56,24 @@ const StyledCloseIcon = styled(TouchableOpacity)(({ theme }) => css `
     align-items: center;
     justify-content: center;
   `);
-export const showToast = ({ message, dismissible = false, action, actionTitle, variant = 'default', duration = 5000, }) => {
-    return action || dismissible
-        ? toast.loading(message, {
-            id: 'clipboard',
-            position: ToastPosition.BOTTOM,
-            disableShadow: true,
-            customToast: t => (_jsx(CustomToast, Object.assign({}, t, { dismissible: dismissible, action: action, actionTitle: actionTitle, variant: variant }), message)),
-        })
-        : toast(message, {
-            id: 'clipboard',
-            position: ToastPosition.BOTTOM,
-            duration,
-            disableShadow: true,
-            customToast: t => (_jsx(CustomToastWithTimeIndicator, Object.assign({}, t, { variant: variant }), message)),
-        });
+export const showToast = ({ message, dismissible = false, action, actionTitle, inlineContent, variant = 'default', duration = 5000, providerKey = 'DEFAULT', }) => {
+    const baseToastProps = {
+        id: 'clipboard',
+        position: ToastPosition.BOTTOM,
+        disableShadow: true,
+        providerKey,
+    };
+    // Uses toast.loading for manual dismissal with action or dismiss
+    // Otherwise, use regular toast for auto-hiding with time indicator.
+    action || dismissible
+        ? toast.loading(message, Object.assign(Object.assign({}, baseToastProps), { duration: 0, customToast: t => (_jsx(CustomToast, Object.assign({}, t, { dismissible: dismissible, action: action, actionTitle: actionTitle, variant: variant, inline: inlineContent }), message)) }))
+        : toast(message, Object.assign(Object.assign({}, baseToastProps), { duration, customToast: t => (_jsx(CustomToastWithTimeIndicator, Object.assign({}, t, { variant: variant, inline: inlineContent }), message)) }));
 };
-const CustomToastWithTimeIndicator = ({ message, duration = 5000, variant, }) => {
-    const toastPadding = 20;
+const CustomToastWithTimeIndicator = ({ message, duration = 5000, variant, inline = false, }) => {
     const textRef = useRef(null);
     const [textHeight, setTextHeight] = useState(0);
     const windowWidth = Dimensions.get('window').width;
-    const screenPadding = 32;
-    const toastWidth = windowWidth - screenPadding;
+    const toastWidth = windowWidth - TOAST_PADDING * 2;
     const sharedWidth = useSharedValue(toastWidth);
     const style = useAnimatedStyle(() => {
         return {
@@ -76,8 +88,9 @@ const CustomToastWithTimeIndicator = ({ message, duration = 5000, variant, }) =>
     }, []);
     return (_jsxs(StyledView, { variant: variant, style: {
             width: toastWidth,
-            height: textHeight + toastPadding,
+            height: textHeight + TOAST_PADDING,
             flexWrap: 'wrap',
+            flexDirection: inline ? 'row' : 'column',
         }, children: [_jsx(StyledP, { ref: textRef, onLayout: () => {
                     var _a;
                     (_a = textRef.current) === null || _a === void 0 ? void 0 : _a.measureInWindow((_x, _y, _width, height) => {
@@ -85,13 +98,13 @@ const CustomToastWithTimeIndicator = ({ message, duration = 5000, variant, }) =>
                     });
                 }, children: message }), _jsx(View, { style: { position: 'absolute', bottom: 0 }, children: _jsx(StyledBorder, { variant: variant, style: style }) })] }));
 };
-const CustomToast = ({ id, message, dismissible, action, actionTitle, width, variant, }) => {
-    const toastPadding = 20;
+const CustomToast = ({ id, message, dismissible, action, actionTitle, inline = false, width, variant, }) => {
     const textRef = useRef(null);
     const actionRef = useRef(null);
     const [textHeight, setTextHeight] = useState(0);
     const [actionHeight, setActionHeight] = useState(0);
     const toastHeight = textHeight + actionHeight;
+    const hasAction = action && actionTitle;
     const handleAction = () => {
         if (action && actionTitle) {
             action();
@@ -100,10 +113,10 @@ const CustomToast = ({ id, message, dismissible, action, actionTitle, width, var
     };
     return (_jsxs(StyledView, { variant: variant, style: {
             width,
-            height: toastHeight + toastPadding,
-            alignItems: action ? 'flex-start' : 'center',
+            height: toastHeight + TOAST_PADDING,
+            alignItems: dismissible ? 'flex-start' : 'center',
         }, children: [_jsxs(View, { style: {
-                    flexDirection: 'row',
+                    flexDirection: inline ? 'row' : 'column',
                     flexWrap: 'wrap',
                     justifyContent: 'space-between',
                     flex: 1,
@@ -112,7 +125,7 @@ const CustomToast = ({ id, message, dismissible, action, actionTitle, width, var
                             (_a = textRef.current) === null || _a === void 0 ? void 0 : _a.measureInWindow((_x, _y, _width, height) => {
                                 setTextHeight(height);
                             });
-                        }, children: message }), action && actionTitle ? (_jsx(Action, { ref: actionRef, style: { width: 'auto' }, inverted: true, standalone: true, iconRight: "chevron-right-small", onPress: handleAction, onLayout: () => {
+                        }, children: message }), hasAction ? (_jsx(Action, { ref: actionRef, style: Object.assign({ width: 'auto', paddingBottom: 0 }, (inline ? { paddingTop: 0 } : {})), inverted: true, standalone: true, iconRight: "chevron-right-small", onPress: handleAction, onLayout: () => {
                             var _a;
                             (_a = actionRef.current) === null || _a === void 0 ? void 0 : _a.measureInWindow((_x, _y, _width, height) => {
                                 setActionHeight(height);

package/dist/esm/components/index.js

@@ -2,6 +2,7 @@ export * from './Accordion';
 export * from './ActionCard';
 export * from './ActionList';
 export * from './Badge';
+export * from './BottomActionBar';
 export * from './Button';
 export * from './Card';
 export * from './Cards';
@@ -40,6 +41,7 @@ export * from './PhoneInput';
 export * from './Pictogram';
 export * from './Radio';
 export * from './RadioCard';
+export * from './Rail';
 export * from './RemoteImage';
 export * from './ScreenView';
 export * from './SegmentedControls';