@ovotech/element-native 4.4.9 → 4.5.0

package/dist/utils/utils.js

@@ -1,33 +1,18 @@
-"use strict";
-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);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.styledComponentWithBreakpoints = exports.responsiveStyle = exports.mergeRefs = exports.getText = exports.getValidChildren = exports.getErrorMessage = exports.filterChildrenByType = exports.callAll = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var hooks_1 = require("../hooks");
-function mergeRefs(ref1, ref2) {
-    return function (element) {
-        assignRef(ref1, element);
-        assignRef(ref2, element);
+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);
+        });
     };
 }
-exports.mergeRefs = mergeRefs;
 function assignRef(ref, element) {
     if (typeof ref === 'function') {
         ref(element);
     }
     else if (ref) {
-        // @ts-ignore
         ref.current = element;
     }
 }
@@ -35,71 +20,49 @@ function getText(children) {
     if (!Boolean(children) && typeof children !== 'number') {
         return '';
     }
-    if (typeof children === 'object' && children.props) {
-        return react_1.Children.map(children.props.children, function (child) {
-            return getText(child);
-        }).join('');
+    if (typeof children === 'object' &&
+        children.props) {
+        return Children.map(children.props.children, child => getText(child)).join('');
     }
     return String(children);
 }
-exports.getText = getText;
 function styledComponentWithBreakpoints(Component) {
-    return (0, react_1.forwardRef)(function (props, ref) {
-        var breakpoints = (0, hooks_1.useBreakpoint)();
+    return (props) => {
+        const breakpoints = useBreakpoint();
         // @ts-ignore.
-        return (0, jsx_runtime_1.jsx)(Component, __assign({}, props, breakpoints, { ref: ref }));
-    });
+        return _jsx(Component, { ...props, ...breakpoints, ref: props.ref });
+    };
 }
-exports.styledComponentWithBreakpoints = styledComponentWithBreakpoints;
 function responsiveStyle(property, value, breakpoints, formatter) {
-    var values;
+    let values;
     if (Array.isArray(value)) {
         values = value;
     }
     else {
         values = [value];
     }
-    var ascMediaQueries = [
+    const ascMediaQueries = [
         breakpoints.smallAndUp,
         breakpoints.mediumAndUp,
         breakpoints.largeAndUp,
     ];
-    var base = values[0], rest = values.slice(1);
-    return rest.reduce(function (acc, val, i) {
-        return ascMediaQueries[i]
-            ? "".concat(property, ": ").concat(formatter ? formatter(val) : val, ";")
-            : acc;
-    }, "".concat(property, ": ").concat(formatter ? formatter(base) : base, ";"));
+    const [base, ...rest] = values;
+    return rest.reduce((acc, val, i) => ascMediaQueries[i]
+        ? `${property}: ${formatter ? formatter(val) : val};`
+        : acc, `${property}: ${formatter ? formatter(base) : base};`);
 }
-exports.responsiveStyle = responsiveStyle;
 function getErrorMessage(id, errors) {
-    return (errors.find(function (_a) {
-        var errorId = _a.id;
-        return id === errorId;
-    }) || { message: null })
+    return (errors.find(({ id: errorId }) => id === errorId) || { message: null })
         .message;
 }
-exports.getErrorMessage = getErrorMessage;
 // eslint-disable-next-line @typescript-eslint/ban-types
-function callAll() {
-    var fns = [];
-    for (var _i = 0; _i < arguments.length; _i++) {
-        fns[_i] = arguments[_i];
-    }
-    return function () {
-        var args = [];
-        for (var _i = 0; _i < arguments.length; _i++) {
-            args[_i] = arguments[_i];
-        }
-        return fns.forEach(function (fn) { return fn && fn.apply(void 0, args); });
-    };
+function callAll(...fns) {
+    return (...args) => fns.forEach(fn => fn && fn(...args));
 }
-exports.callAll = callAll;
 function filterChildrenByType(children, type) {
-    return react_1.Children.toArray(children).filter(function (child) { return (child === null || child === void 0 ? void 0 : child.type) === type; });
+    return Children.toArray(children).filter(child => child?.type === type);
 }
-exports.filterChildrenByType = filterChildrenByType;
 function getValidChildren(children) {
-    return react_1.Children.toArray(children).filter(Boolean);
+    return Children.toArray(children).filter(Boolean);
 }
-exports.getValidChildren = getValidChildren;
+export { callAll, filterChildrenByType, getErrorMessage, getValidChildren, getText, mergeRefs, responsiveStyle, styledComponentWithBreakpoints, };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ovotech/element-native",
-  "version": "4.4.9",
+  "version": "4.5.0",
   "main": "dist/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/index.d.ts",
@@ -20,49 +20,52 @@
     "@ovotech/element-core": "3.2.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.11.5",
-    "@react-native-masked-view/masked-view": "^0.3.0",
-    "@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",
+    "@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/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-native-svg": "^15.12.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.0",
-    "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/Button/Button.d.ts

@@ -1,28 +0,0 @@
-import { ComponentProps, PropsWithChildren, Ref } from 'react';
-import { TouchableOpacity, TouchableOpacityProps } from 'react-native';
-import { IconName } from '../../providers/icons-types';
-export type ButtonVariantName = 'surface' | 'destructive' | 'outline' | 'outline-variant';
-type ButtonBase = PropsWithChildren<TouchableOpacityProps & {
-    variant?: ButtonVariantName;
-    ref?: Ref<TouchableOpacity>;
-    inverted?: boolean;
-    size?: 'default' | 'large';
-    fullWidth?: boolean;
-}>;
-type ButtonWithText = ButtonBase & {
-    children: React.ReactNode;
-    iconLeft?: IconName;
-    iconRight?: IconName;
-};
-type ButtonIconOnly = ButtonBase & {
-    children?: never;
-    iconLeft?: IconName;
-    iconRight?: IconName;
-};
-export type ButtonProps = ButtonWithText | ButtonIconOnly;
-declare const Button: ({ iconLeft, iconRight, children, fullWidth, variant, inverted, size, ...rest }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
-type OmittedButtonProps = Omit<ComponentProps<typeof Button>, 'variant' | 'ref'> & {
-    ref: Ref<TouchableOpacity>;
-};
-declare const ButtonDestructive: import("react").ForwardRefExoticComponent<Omit<OmittedButtonProps, "ref"> & import("react").RefAttributes<TouchableOpacity>>;
-export { Button, ButtonDestructive };

package/dist/components/Button/Button.js

@@ -1,43 +0,0 @@
-"use strict";
-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 __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;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ButtonDestructive = exports.Button = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var element_core_1 = require("@ovotech/element-core");
-var react_1 = require("react");
-var hooks_1 = require("../../hooks");
-var Button_styles_1 = require("./Button.styles");
-var ButtonWrapper = function (_a) {
-    var children = _a.children, _b = _a.accessibilityRole, accessibilityRole = _b === void 0 ? 'button' : _b, _c = _a.activeOpacity, activeOpacity = _c === void 0 ? 0.8 : _c, rest = __rest(_a, ["children", "accessibilityRole", "activeOpacity"]);
-    return ((0, jsx_runtime_1.jsx)(Button_styles_1.StyledButtonWrapper, __assign({ accessible: true, accessibilityRole: accessibilityRole, activeOpacity: activeOpacity }, rest, { children: children })));
-};
-var Button = function (_a) {
-    var iconLeft = _a.iconLeft, iconRight = _a.iconRight, children = _a.children, _b = _a.fullWidth, fullWidth = _b === void 0 ? false : _b, _c = _a.variant, variant = _c === void 0 ? 'surface' : _c, _d = _a.inverted, inverted = _d === void 0 ? false : _d, _e = _a.size, size = _e === void 0 ? 'default' : _e, rest = __rest(_a, ["iconLeft", "iconRight", "children", "fullWidth", "variant", "inverted", "size"]);
-    var smallAndUp = (0, hooks_1.useBreakpoint)().smallAndUp;
-    var isIconOnly = !children;
-    return ((0, jsx_runtime_1.jsx)(ButtonWrapper, __assign({}, rest, { children: (0, jsx_runtime_1.jsxs)(Button_styles_1.StyledInner, { fullWidth: fullWidth, variant: variant, inverted: inverted, size: size, iconLeft: iconLeft, iconRight: iconRight, iconOnly: isIconOnly, children: [iconLeft && ((0, jsx_runtime_1.jsx)(Button_styles_1.StyledButtonIcon, { iconLeft: true, iconOnly: isIconOnly, name: iconLeft, inverted: inverted, variant: variant, size: size === 'default' ? (0, element_core_1.numToPx)(16) : (0, element_core_1.numToPx)(20) })), children ? ((0, jsx_runtime_1.jsx)(Button_styles_1.StyledButtonText, { smallAndUp: smallAndUp, variant: variant, inverted: inverted, size: size, children: children })) : null, iconRight && ((0, jsx_runtime_1.jsx)(Button_styles_1.StyledButtonIcon, { iconRight: true, iconOnly: isIconOnly, name: iconRight, inverted: inverted, variant: variant, size: size === 'default' ? (0, element_core_1.numToPx)(16) : (0, element_core_1.numToPx)(20) }))] }) })));
-};
-exports.Button = Button;
-var ButtonDestructive = (0, react_1.forwardRef)(function (props, ref) { return ((0, jsx_runtime_1.jsx)(Button, __assign({ variant: "destructive" }, props, { ref: ref }))); });
-exports.ButtonDestructive = ButtonDestructive;