@ovotech/element-native 5.2.1 → 5.3.0-canary-9e22bfd-413

package/dist/src/styled.native.js

@@ -0,0 +1,4 @@
+import * as styledComponents from 'styled-components/native';
+const { default: styled, css, ThemeProvider, ThemeContext, useTheme, } = styledComponents;
+export { ThemeContext, ThemeProvider, css, useTheme };
+export default styled;

package/dist/src/theme/index.js

@@ -0,0 +1 @@
+export * from '@ovotech/element-core';

package/dist/src/utils/index.js

@@ -0,0 +1 @@
+export * from './utils';

package/dist/src/utils/utils.d.ts

@@ -0,0 +1,15 @@
+import { ComponentType, ReactElement, ReactNode, Ref, RefCallback, RefObject } from 'react';
+import { View, ViewProps } from 'react-native';
+import { BreakpointNames, Breakpoints } from '../hooks';
+declare function mergeRefs<T>(...refs: Array<RefObject<T> | Ref<T> | undefined>): RefCallback<T>;
+declare function getText(children: ReactNode): string;
+declare function styledComponentWithBreakpoints<T = ViewProps, C = View>(Component: ComponentType<T>): (props: Omit<T, BreakpointNames> & (C extends ComponentType<any> ? import("react").ComponentProps<C> : object)) => import("react/jsx-runtime").JSX.Element;
+declare function responsiveStyle(property: string, value: any, breakpoints: Breakpoints, formatter?: (v: any) => string): any;
+declare function getErrorMessage(id: string, errors: Array<{
+    id: string;
+    message: ReactNode;
+}>): null | ReactNode;
+declare function callAll(...fns: Array<Function | undefined>): (...args: any[]) => void;
+declare function filterChildrenByType(children: ReactNode, type: ComponentType): ReactElement<any, string | import("react").JSXElementConstructor<any>>[];
+declare function getValidChildren(children: ReactNode): ReactNode;
+export { callAll, filterChildrenByType, getErrorMessage, getText, getValidChildren, mergeRefs, responsiveStyle, styledComponentWithBreakpoints, };

package/dist/src/utils/utils.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Children, } from 'react';
+import { useBreakpoint } from '../hooks';
+function mergeRefs(...refs) {
+    return value => {
+        refs.forEach(ref => {
+            assignRef(ref, value);
+        });
+    };
+}
+function assignRef(ref, element) {
+    if (typeof ref === 'function') {
+        ref(element);
+    }
+    else if (ref) {
+        ref.current = element;
+    }
+}
+function getText(children) {
+    if (!Boolean(children) && typeof children !== 'number') {
+        return '';
+    }
+    if (typeof children === 'object' &&
+        children.props) {
+        return Children.map(children.props.children, child => getText(child)).join('');
+    }
+    return String(children);
+}
+function styledComponentWithBreakpoints(Component) {
+    return (props) => {
+        const breakpoints = useBreakpoint();
+        // @ts-ignore.
+        return _jsx(Component, { ...props, ...breakpoints, ref: props.ref });
+    };
+}
+function responsiveStyle(property, value, breakpoints, formatter) {
+    let values;
+    if (Array.isArray(value)) {
+        values = value;
+    }
+    else {
+        values = [value];
+    }
+    const ascMediaQueries = [
+        breakpoints.xsmallAndUp,
+        breakpoints.smallAndUp,
+        breakpoints.mediumAndUp,
+        breakpoints.largeAndUp,
+    ];
+    const [base, ...rest] = values;
+    return rest.reduce((acc, val, i) => ascMediaQueries[i]
+        ? `${property}: ${formatter ? formatter(val) : val};`
+        : acc, `${property}: ${formatter ? formatter(base) : base};`);
+}
+function getErrorMessage(id, errors) {
+    return (errors.find(({ id: errorId }) => id === errorId) || { message: null })
+        .message;
+}
+// eslint-disable-next-line @typescript-eslint/ban-types
+function callAll(...fns) {
+    return (...args) => fns.forEach(fn => fn && fn(...args));
+}
+function filterChildrenByType(children, type) {
+    return Children.toArray(children).filter(child => child?.type === type);
+}
+function getValidChildren(children) {
+    return Children.toArray(children).filter(Boolean);
+}
+export { callAll, filterChildrenByType, getErrorMessage, getText, getValidChildren, mergeRefs, responsiveStyle, styledComponentWithBreakpoints, };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ovotech/element-native",
-  "version": "5.2.1",
+  "version": "5.3.0-canary-9e22bfd-413",
   "main": "dist/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/index.d.ts",
@@ -13,56 +13,60 @@
     "url": "@ovotech/element"
   },
   "dependencies": {
-    "@backpackapp-io/react-native-toast": "^0.10.0",
+    "@backpackapp-io/react-native-toast": "^0.14.0",
+    "@ovotech/element-core": "4.2.0-canary-9e22bfd-413",
     "deepmerge": "^4.2.2",
     "lodash.groupby": "^4.6.0",
+    "react-native-error-boundary": "^3.0.0",
     "react-native-reanimated-carousel": "^3.5.1",
-    "@ovotech/element-core": "4.1.1"
+    "react-native-svg": "^15.12.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.11.5",
+    "@babel/core": "^7.25.2",
+    "@babel/plugin-transform-flow-strip-types": "^7.27.1",
+    "@babel/plugin-transform-private-methods": "^7.27.1",
     "@react-native-masked-view/masked-view": "^0.3.2",
-    "@testing-library/dom": "^8.20.0",
-    "@testing-library/react": "^13.4.0",
-    "@testing-library/react-native": "^11.5.2",
-    "@testing-library/user-event": "^14.4.3",
-    "@types/jest": "^28.1.1",
+    "@testing-library/jest-dom": "^6.6.4",
+    "@testing-library/react": "^16.1.0",
+    "@testing-library/react-native": "^13.3.3",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/jest": "^29.5.4",
     "@types/lodash.groupby": "^4.6.9",
-    "@types/react": "18.2.6",
-    "@types/react-is": "^18.3.0",
+    "@types/react": "^19.1.0",
+    "@types/react-is": "^19.1.0",
     "@types/react-router-dom": "^5.1.5",
     "@types/styled-components": "^5.1.34",
     "@types/styled-components-react-native": "^5.1.1",
-    "babel-jest": "^28.0.0",
+    "babel-jest": "^29.7.0",
     "babel-plugin-require-context-hook": "^1.0.0",
-    "jest": "^28.1.1",
-    "jest-styled-components": "^7.0.3",
+    "babel-preset-expo": "^54.0.3",
+    "jest": "^29.7.0",
+    "jest-styled-components": "^7.2.0",
     "metro-react-native-babel-preset": "^0.77.0",
-    "postcss-styled-syntax": "^0.6.4",
-    "react": "18.3.1",
-    "react-is": "^18.3.1",
-    "react-native": "0.72.3",
-    "react-native-gesture-handler": "^2.16.2",
-    "react-native-reanimated": "^3.5.4",
-    "react-native-safe-area-context": "^4.7.4",
-    "react-native-svg": "^13.6.0",
-    "react-router-dom": "^6.0.0",
-    "react-test-renderer": "^18.2.0",
+    "postcss-styled-syntax": "^0.7.1",
+    "react": "^19.1.0",
+    "react-is": "^19.1.0",
+    "react-native": "0.81.0",
+    "react-native-gesture-handler": "^2.28.0",
+    "react-native-reanimated": "^3.19.1",
+    "react-native-safe-area-context": "^5.6.1",
+    "react-router-dom": "^6.11.2",
+    "react-test-renderer": "^19.1.0",
     "styled-components": "^5.3.11",
-    "stylelint": "^16.2.0",
-    "stylelint-config-standard": "^36.0.1",
-    "ts-jest": "^28.0.5",
-    "ts-loader": "^9.5.1",
-    "typescript": "^5.3.3"
+    "stylelint": "^16.24.0",
+    "stylelint-config-standard": "^39.0.0",
+    "ts-jest": "^29.4.1",
+    "ts-loader": "^9.5.4",
+    "typescript": "^5.8.3"
   },
   "peerDependencies": {
     "@react-native-masked-view/masked-view": "^0.3.2",
-    "react": "^16.9.0 || ^17.0.0 || ^18.2.0",
-    "react-native": "^0.63.3 || ^0.71.0 || ^0.74.2",
-    "react-native-gesture-handler": "^2.16.2",
-    "react-native-reanimated": "^3.5.4",
-    "react-native-safe-area-context": "^4.7.4",
-    "react-native-svg": "^13.6.0",
+    "react": "^19.1.0",
+    "react-native": "^0.74.2 | ^0.81.0",
+    "react-native-gesture-handler": "^2.28.0",
+    "react-native-reanimated": "^3.19.1",
+    "react-native-safe-area-context": "^5.6.1",
+    "react-native-svg": "^15.12.1",
     "styled-components": "^5.3.11"
   },
   "sideEffects": false,

package/dist/components/Accordion/Accordion.d.ts

@@ -1,4 +0,0 @@
-import { ComponentType } from 'react';
-import { AccordionProps } from './types';
-export declare function withAnimated<T extends object>(WrappedComponent: ComponentType<T>): any;
-export declare const Accordion: ({ expanded, first, last, title, children, onToggle, variant, }: AccordionProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Accordion/Accordion.js

@@ -1,136 +0,0 @@
-"use strict";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-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 (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Accordion = exports.withAnimated = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
-var use_layout_1 = require("../../hooks/use-layout");
-var styled_native_1 = require("../../styled.native");
-var Heading_1 = require("../Heading");
-var Group_1 = require("./Group");
-var Icon_1 = require("./Icon");
-var styles_1 = require("./styles");
-function withAnimated(WrappedComponent) {
-    var displayName = WrappedComponent.displayName || WrappedComponent.name || 'Component';
-    // eslint-disable-next-line react/prefer-stateless-function
-    var WithAnimated = /** @class */ (function (_super) {
-        __extends(WithAnimated, _super);
-        function WithAnimated() {
-            return _super !== null && _super.apply(this, arguments) || this;
-        }
-        WithAnimated.prototype.render = function () {
-            return (0, jsx_runtime_1.jsx)(WrappedComponent, __assign({}, this.props));
-        };
-        WithAnimated.displayName = "WithAnimated(".concat(displayName, ")");
-        return WithAnimated;
-    }(react_1.Component));
-    return react_native_reanimated_1.default.createAnimatedComponent(WithAnimated);
-}
-exports.withAnimated = withAnimated;
-var Accordion = function (_a) {
-    var _b = _a.expanded, expanded = _b === void 0 ? false : _b, first = _a.first, last = _a.last, title = _a.title, children = _a.children, onToggle = _a.onToggle, _c = _a.variant, variant = _c === void 0 ? 'default' : _c;
-    var theme = (0, react_1.useContext)(styled_native_1.ThemeContext);
-    var Header = (0, react_1.useContext)(Group_1.AccordionGroupContext).Header;
-    var AccordionHeading = Header !== null && Header !== void 0 ? Header : Heading_1.Heading4;
-    var AnimatedHeading = (0, react_1.useMemo)(function () { return withAnimated(AccordionHeading); }, [AccordionHeading]);
-    var _d = (0, use_layout_1.useLayout)(0), layout = _d[0], onLayout = _d[1];
-    var _e = (0, react_1.useState)(expanded), open = _e[0], setOpen = _e[1];
-    var initialHeadingColor = variant === 'default'
-        ? theme.color.brand.brand
-        : theme.color.surface.onSurface;
-    var handleHeightContent = (0, react_1.useMemo)(function () { return layout.height || 100; }, [layout.height]);
-    var size = (0, react_native_reanimated_1.useSharedValue)(handleHeightContent);
-    (0, react_1.useEffect)(function () {
-        (0, react_native_reanimated_1.runOnUI)(function () {
-            'worklet';
-            if (expanded && handleHeightContent) {
-                size.value = handleHeightContent;
-            }
-        })();
-    }, [handleHeightContent, expanded, size]);
-    (0, react_1.useEffect)(function () {
-        (0, react_native_reanimated_1.runOnUI)(function () {
-            'worklet';
-            if (handleHeightContent) {
-                size.value = handleHeightContent;
-            }
-        })();
-    }, [handleHeightContent, size]);
-    var progress = (0, react_native_reanimated_1.useDerivedValue)(function () { return (0, react_native_reanimated_1.withTiming)(open ? 1 : 0); });
-    var style = (0, react_native_reanimated_1.useAnimatedStyle)(function () { return ({
-        height: size.value * progress.value + 1,
-    }); }, [progress, size]);
-    var toggleOpen = (0, react_1.useCallback)(function () {
-        onToggle === null || onToggle === void 0 ? void 0 : onToggle(!open);
-        if (size.value === 0) {
-            (0, react_native_reanimated_1.runOnUI)(function () {
-                'worklet';
-                size.value = handleHeightContent;
-            })();
-        }
-        setOpen(function (o) { return !o; });
-    }, [handleHeightContent, open, size]);
-    var containerAnimatedStyle = (0, react_1.useMemo)(function () { return [{ overflow: 'hidden' }, style]; }, [style]);
-    var headerStyle = (0, react_native_reanimated_1.useAnimatedStyle)(function () { return ({
-        color: (0, react_native_reanimated_1.interpolateColor)(progress.value, [0, 1], [initialHeadingColor, theme.color.surface.onSurface]),
-    }); }, [progress]);
-    return ((0, jsx_runtime_1.jsxs)(styles_1.StyledAccordion, { first: first, last: last, isExpanded: open, "$variant": variant, children: [(0, jsx_runtime_1.jsxs)(styles_1.StyledAccordionHeader, { accessibilityState: { expanded: open }, onPress: toggleOpen, testID: "accordionTitle", children: [(0, jsx_runtime_1.jsx)(AnimatedHeading, { style: [
-                            headerStyle,
-                            {
-                                paddingRight: theme.space[300],
-                                marginTop: 0,
-                                marginBottom: 0,
-                                flexShrink: 1,
-                            },
-                        ], children: title }), (0, jsx_runtime_1.jsx)(Icon_1.AccordionIcon, { animationTiming: progress, "$variant": variant })] }), (0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: containerAnimatedStyle, children: (0, jsx_runtime_1.jsx)(styles_1.StyledContainer, { onLayout: onLayout, children: children }) })] }));
-};
-exports.Accordion = Accordion;

package/dist/components/Accordion/Group.d.ts

@@ -1,6 +0,0 @@
-import { PropsWithChildren } from 'react';
-import { AccordionGroupProps } from './types';
-export declare const AccordionGroupContext: import("react").Context<{
-    Header?: AccordionGroupProps['headingComponent'];
-}>;
-export declare const AccordionGroup: ({ children, headingComponent, }: PropsWithChildren<AccordionGroupProps>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Accordion/Group.js

@@ -1,22 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AccordionGroup = exports.AccordionGroupContext = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var react_native_1 = require("react-native");
-exports.AccordionGroupContext = (0, react_1.createContext)({
-    Header: undefined,
-});
-var AccordionGroup = function (_a) {
-    var children = _a.children, headingComponent = _a.headingComponent;
-    var childCount = react_1.Children.count(children);
-    return ((0, jsx_runtime_1.jsx)(exports.AccordionGroupContext.Provider, { value: { Header: headingComponent }, children: (0, jsx_runtime_1.jsx)(react_native_1.View, { children: react_1.Children.map(children, function (child, i) {
-                return (0, react_1.isValidElement)(child)
-                    ? (0, react_1.cloneElement)(child, {
-                        first: i === 0,
-                        last: i === childCount - 1,
-                    })
-                    : child;
-            }) }) }));
-};
-exports.AccordionGroup = AccordionGroup;

package/dist/components/Accordion/Icon.js

@@ -1,65 +0,0 @@
-"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 (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AccordionIcon = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
-var react_native_svg_1 = require("react-native-svg");
-var styled_native_1 = require("../../styled.native");
-var OVO_LOGO_ANGLE = 105;
-var AnimatedPath = react_native_reanimated_1.default.createAnimatedComponent(react_native_svg_1.Path);
-function AccordionIcon(_a) {
-    var animationTiming = _a.animationTiming, $variant = _a.$variant;
-    var color = (0, react_1.useContext)(styled_native_1.ThemeContext).color;
-    var initialBgColor = $variant === 'default' ? color.surface.borderDim : color.brand.dark;
-    var expandedBgColor = $variant === 'default' ? color.brand.brand : color.brand.dark;
-    var initialIconColor = $variant === 'default' ? color.surface.onSurface : color.brand.onBrand;
-    var outerAnimatedStyles = (0, react_native_reanimated_1.useAnimatedStyle)(function () { return ({
-        backgroundColor: (0, react_native_reanimated_1.interpolateColor)(animationTiming.value, [0, 1], [initialBgColor, expandedBgColor]),
-        height: 32 - animationTiming.value,
-        margin: 2 * animationTiming.value,
-        transform: [{ rotateZ: animationTiming.value * -OVO_LOGO_ANGLE + 'deg' }],
-    }); }, [animationTiming]);
-    var innerAnimatedStyles = (0, react_native_reanimated_1.useAnimatedStyle)(function () { return ({
-        transform: [{ rotateZ: animationTiming.value * OVO_LOGO_ANGLE + 'deg' }],
-    }); }, [animationTiming]);
-    var plusAnimatedProps = (0, react_native_reanimated_1.useAnimatedProps)(function () { return ({
-        opacity: 1 - animationTiming.value,
-    }); }, [animationTiming]);
-    var minusAnimatedProps = (0, react_native_reanimated_1.useAnimatedProps)(function () { return ({
-        opacity: animationTiming.value,
-    }); }, [animationTiming]);
-    return ((0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: [
-            {
-                backgroundColor: color.surface.dim,
-                aspectRatio: 1,
-                alignItems: 'center',
-                justifyContent: 'center',
-            },
-            outerAnimatedStyles,
-        ], children: (0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: innerAnimatedStyles, children: (0, jsx_runtime_1.jsxs)(react_native_svg_1.Svg, { width: "14", height: "14", viewBox: "0 0 16 16", children: [(0, jsx_runtime_1.jsx)(AnimatedPath, { animatedProps: plusAnimatedProps, d: "M9 9H16V6.99H9V0H6.99V7H0V9.01H7V16.01H9.01V9.01L9 9Z", fill: initialIconColor }), (0, jsx_runtime_1.jsx)(AnimatedPath, { animatedProps: minusAnimatedProps, d: "M16.3826 9.66663V7.66663H0.462646V9.66663H16.3826Z", fill: color.brand.onBrand })] }) }) }));
-}
-exports.AccordionIcon = AccordionIcon;

package/dist/components/Accordion/index.js

@@ -1,9 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AccordionIcon = exports.AccordionGroup = exports.Accordion = void 0;
-var Accordion_1 = require("./Accordion");
-Object.defineProperty(exports, "Accordion", { enumerable: true, get: function () { return Accordion_1.Accordion; } });
-var Group_1 = require("./Group");
-Object.defineProperty(exports, "AccordionGroup", { enumerable: true, get: function () { return Group_1.AccordionGroup; } });
-var Icon_1 = require("./Icon");
-Object.defineProperty(exports, "AccordionIcon", { enumerable: true, get: function () { return Icon_1.AccordionIcon; } });