@ovotech/element-native 3.5.0 → 3.6.0-canary-0ed6e33-174

package/dist/components/List/List.d.ts

@@ -1,249 +1,8 @@
 import { PropsWithChildren } from 'react';
 import { TextProps, ViewProps } from 'react-native';
-declare const ListWrapper: import("react").ForwardRefExoticComponent<Pick<Omit<{
-    [x: string]: any;
-    [x: number]: any;
-    [x: symbol]: any;
-} & {
-    theme?: {
-        core: {
-            radius: Record<"small" | "medium" | "large" | "max", string>;
-            borderWidth: Record<"small" | "medium" | "large", string>;
-            breakpoint: Record<"small" | "medium" | "large", string | number>;
-            mediaQuery: Record<"small" | "medium" | "large", string>;
-            space: Record<0 | 2 | 1 | 3 | 4 | 5 | 10 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | 15, string>;
-            transition: Record<"medium" | "slow" | "fast", string>;
-            opacity: Record<"solid" | "transparent" | "translucent", string | number>;
-            color: Record<"neutral" | "red" | "orange" | "yellow" | "green" | "blue", {
-                lightest: string;
-                lighter: string;
-                light: string;
-                base: string;
-                dark: string;
-                darker: string;
-                darkest: string;
-            }> & {
-                brand: Record<string, string>;
-            };
-            fontFamily: Record<"body" | "mono" | "heading" | "bodyBold", {
-                native: string;
-                web: string;
-            }>;
-            fontWeight: Record<"bold" | "book" | "black", string | number>;
-            fontSize: Record<"small" | "body" | "label" | "heading1" | "heading2" | "heading3" | "heading4" | "lead", {
-                small: string | number;
-                large: string | number;
-            }>;
-            lineHeight: Record<"small" | "body" | "label" | "heading1" | "heading2" | "heading3" | "heading4" | "lead", {
-                small: string | number;
-                large: string | number;
-            }>;
-            letterSpacing: Record<"base" | "compressed" | "extraCompressed", number>;
-        };
-        semantic: {
-            surface: Record<"base" | "cutout" | "elevated", string>;
-            message: Record<"base" | "link" | "secondary" | "error" | "branded", string>;
-            border: Record<"graphic" | "differentiated" | "functional", string>;
-            focus: Record<"surface" | "outline" | "hover", string>;
-            inverted: Record<"surface" | "border", string> & {
-                message: Record<"base" | "link" | "secondary" | "branded", string>;
-            };
-            success: {
-                border: string;
-                surface: string;
-                surfaceEmphasis: string;
-                message: string;
-                messageOnEmphasis: string;
-            };
-            warning: {
-                border: string;
-                surface: string;
-                surfaceEmphasis: string;
-                message: string;
-                messageOnEmphasis: string;
-            };
-            error: {
-                border: string;
-                surface: string;
-                surfaceEmphasis: string;
-                message: string;
-                messageOnEmphasis: string;
-            };
-            info: {
-                border: string;
-                surface: string;
-                surfaceEmphasis: string;
-                message: string;
-                messageOnEmphasis: string;
-            };
-            data: Record<"branded" | "gas" | "electric", Record<2 | 1 | 3 | 4, string>>;
-        };
-        component: {
-            heading1: {
-                fontFamily: string;
-                fontWeight: string | number;
-                fontSize: {
-                    small: string | number;
-                    large: string | number;
-                };
-                lineHeight: {
-                    small: string | number;
-                    large: string | number;
-                };
-            };
-            heading2: {
-                fontFamily: string;
-                fontWeight: string | number;
-                fontSize: {
-                    small: string | number;
-                    large: string | number;
-                };
-                lineHeight: {
-                    small: string | number;
-                    large: string | number;
-                };
-            };
-            heading3: {
-                fontFamily: string;
-                fontWeight: string | number;
-                fontSize: {
-                    small: string | number;
-                    large: string | number;
-                };
-                lineHeight: {
-                    small: string | number;
-                    large: string | number;
-                };
-            };
-            heading4: {
-                fontFamily: string;
-                fontWeight: string | number;
-                fontSize: {
-                    small: string | number;
-                    large: string | number;
-                };
-                lineHeight: {
-                    small: string | number;
-                    large: string | number;
-                };
-            };
-            lead: {
-                fontFamily: string;
-                fontWeight: string | number;
-                fontSize: {
-                    small: string | number;
-                    large: string | number;
-                };
-                lineHeight: {
-                    small: string | number;
-                    large: string | number;
-                };
-            };
-            body: {
-                fontFamily: string;
-                fontWeight: string | number;
-                fontSize: {
-                    small: string | number;
-                    large: string | number;
-                };
-                lineHeight: {
-                    small: string | number;
-                    large: string | number;
-                };
-            };
-            small: {
-                fontFamily: string;
-                fontWeight: string | number;
-                fontSize: {
-                    small: string | number;
-                    large: string | number;
-                };
-                lineHeight: {
-                    small: string | number;
-                    large: string | number;
-                };
-            };
-            label: {
-                fontFamily: string;
-                fontWeight: string | number;
-                fontSize: {
-                    small: string | number;
-                    large: string | number;
-                };
-                lineHeight: {
-                    small: string | number;
-                    large: string | number;
-                };
-            };
-            cta: {
-                primary: {
-                    message: string;
-                    surface: string;
-                    messageHover: string;
-                    surfaceHover: string;
-                    messageFocused: string;
-                    surfaceFocused: string;
-                    outlineFocused: string;
-                    backgroundFocused: string;
-                };
-                secondary: {
-                    message: string;
-                    surface: string;
-                    messageHover: string;
-                    surfaceHover: string;
-                    messageFocused: string;
-                    surfaceFocused: string;
-                    outlineFocused: string;
-                    backgroundFocused: string;
-                };
-                destructive: {
-                    message: string;
-                    surface: string;
-                    messageHover: string;
-                    surfaceHover: string;
-                    messageFocused: string;
-                    surfaceFocused: string;
-                    outlineFocused: string;
-                    backgroundFocused: string;
-                };
-            };
-            badge: {
-                variants: {
-                    neutral: {
-                        foreground: string;
-                        background: string;
-                    };
-                    red: {
-                        foreground: string;
-                        background: string;
-                    };
-                    orange: {
-                        foreground: string;
-                        background: string;
-                    };
-                    yellow: {
-                        foreground: string;
-                        background: string;
-                    };
-                    green: {
-                        foreground: string;
-                        background: string;
-                    };
-                    blue: {
-                        foreground: string;
-                        background: string;
-                    };
-                };
-            };
-        };
-    } | undefined;
-} & {
-    as?: string | import("react").ComponentType<any> | undefined;
-    forwardedAs?: string | import("react").ComponentType<any> | undefined;
-}, import("../../hooks").BreakpointNames>, string | number | symbol> & import("react").RefAttributes<import("react-native/types").View>>;
-declare const Li: ({ children, ...rest }: PropsWithChildren<TextProps>) => JSX.Element;
-declare const Ul: ({ children, showBullets, ...rest }: PropsWithChildren<ViewProps & {
+declare const Li: ({ children }: PropsWithChildren<TextProps>) => JSX.Element;
+declare const Ul: (props: PropsWithChildren<ViewProps & {
     showBullets?: boolean | undefined;
 }>) => JSX.Element;
-declare const Ol: ({ children, ...rest }: PropsWithChildren<ViewProps>) => JSX.Element;
-export { Ul, Ol, Li, ListWrapper };
+declare const Ol: (props: PropsWithChildren<ViewProps>) => JSX.Element;
+export { Li, Ol, Ul };

package/dist/components/List/List.js

@@ -10,85 +10,36 @@ var __assign = (this && this.__assign) || function () {
     };
     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.ListWrapper = exports.Li = exports.Ol = exports.Ul = void 0;
+exports.Ul = exports.Ol = exports.Li = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
-var utils_1 = require("../../utils");
-var P_1 = require("../P");
+var react_native_1 = require("react-native");
+var Margin_1 = require("../Margin");
 var Stack_1 = require("../Stack");
 var styled_1 = require("./styled");
-var Bullet = (0, utils_1.styledComponentWithBreakpoints)(styled_1.StyledBullet);
-var ListWrapper = (0, utils_1.styledComponentWithBreakpoints)(styled_1.StyledList);
-exports.ListWrapper = ListWrapper;
-var ListBulletItem = function (_a) {
-    var children = _a.children, _b = _a.showBullets, showBullets = _b === void 0 ? true : _b, level = _a.level;
-    return ((0, jsx_runtime_1.jsxs)(styled_1.StyledUlItem, __assign({ level: level }, { children: [(0, jsx_runtime_1.jsx)(styled_1.UlBullet, { visible: showBullets }), children] })));
-};
-var ListNumberedItem = function (_a) {
-    var children = _a.children, prefix = _a.prefix, level = _a.level;
-    return ((0, jsx_runtime_1.jsxs)(styled_1.StyledOlItem, __assign({ level: level }, { children: [(0, jsx_runtime_1.jsx)(Bullet, { children: prefix }), children] })));
+var ListItem = function (_a) {
+    var children = _a.children, _b = _a.showBullets, showBullets = _b === void 0 ? true : _b, prefix = _a.prefix;
+    return ((0, jsx_runtime_1.jsxs)(styled_1.FlexRow, { children: [prefix ? ((0, jsx_runtime_1.jsx)(styled_1.TextBullet, { children: prefix })) : ((0, jsx_runtime_1.jsx)(styled_1.SquareBullet, { visible: showBullets })), (0, jsx_runtime_1.jsx)(styled_1.LiContent, { children: children })] }));
 };
 var renderList = function (_a) {
-    var arrayChildren = _a.arrayChildren, _b = _a.level, level = _b === void 0 ? 0 : _b, showBullets = _a.showBullets, listType = _a.listType;
-    return react_1.Children.map(arrayChildren, function (child, index) {
-        var _a;
-        var lvl = level;
-        var PADDING = 3;
-        lvl = lvl + PADDING;
-        // @ts-ignore doesn't recognise child props.
-        var nestedChildren = ((_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.children) || {};
-        var nestedLists = [];
-        var childrenToRender = Array.from(nestedChildren).filter(function (ch) {
-            var _a, _b;
-            if (typeof ch == 'object' &&
-                // @ts-ignore Missing types for React Children
-                (((_a = ch === null || ch === void 0 ? void 0 : ch.type) === null || _a === void 0 ? void 0 : _a.name) === 'Ul' || ((_b = ch === null || ch === void 0 ? void 0 : ch.type) === null || _b === void 0 ? void 0 : _b.name) === 'Ol')) {
-                nestedLists.push(ch);
-                return false;
-            }
-            else {
-                return true;
-            }
-        });
-        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [childrenToRender.length > 0 && listType === 'ul' ? ((0, jsx_runtime_1.jsx)(ListBulletItem, __assign({ showBullets: showBullets, level: level }, { children: (0, jsx_runtime_1.jsx)(P_1.P, { children: childrenToRender }) }))) : null, childrenToRender.length > 0 && listType === 'ol' ? ((0, jsx_runtime_1.jsx)(ListNumberedItem, __assign({ level: level, prefix: "".concat(index + 1, ".") }, { children: (0, jsx_runtime_1.jsx)(P_1.P, { children: childrenToRender }) }))) : null, nestedLists.length > 0
-                    ? nestedLists.map(function (obj) {
-                        var _a, _b, _c, _d;
-                        return renderList({
-                            //@ts-ignore
-                            arrayChildren: (_b = (_a = obj === null || obj === void 0 ? void 0 : obj.props) === null || _a === void 0 ? void 0 : _a.children) !== null && _b !== void 0 ? _b : obj,
-                            level: lvl,
-                            showBullets: showBullets,
-                            //@ts-ignore
-                            listType: (_d = (_c = obj.type) === null || _c === void 0 ? void 0 : _c.name) === null || _d === void 0 ? void 0 : _d.toLowerCase(),
-                        });
-                    })
-                    : null] }));
+    var children = _a.children, listType = _a.listType, showBullets = _a.showBullets;
+    return react_1.Children.map(children, function (child, index) {
+        return ((0, jsx_runtime_1.jsx)(ListItem, __assign({ prefix: listType === 'ol' ? "".concat(index + 1, ".") : undefined, showBullets: showBullets }, { children: child })));
     });
 };
 var Li = function (_a) {
-    var children = _a.children, rest = __rest(_a, ["children"]);
-    return (0, jsx_runtime_1.jsx)(styled_1.StyledLi, __assign({}, rest, { children: children }));
+    var children = _a.children;
+    return (0, jsx_runtime_1.jsx)(react_native_1.View, __assign({ style: { flexDirection: 'column' } }, { children: children }));
 };
 exports.Li = Li;
-var Ul = function (_a) {
-    var children = _a.children, _b = _a.showBullets, showBullets = _b === void 0 ? true : _b, rest = __rest(_a, ["children", "showBullets"]);
-    return ((0, jsx_runtime_1.jsx)(ListWrapper, __assign({}, rest, { children: (0, jsx_runtime_1.jsx)(Stack_1.Stack, __assign({ spaceBetween: 2 }, { children: renderList({ arrayChildren: children, listType: 'ul', showBullets: showBullets }) })) })));
+var Ul = function (props) {
+    var children = props.children, showBullets = props.showBullets;
+    return ((0, jsx_runtime_1.jsx)(Margin_1.Margin, __assign({ top: 2 }, { children: (0, jsx_runtime_1.jsx)(Stack_1.Stack, __assign({ spaceBetween: 2 }, { children: renderList({ children: children, listType: 'ul', showBullets: showBullets }) })) })));
 };
 exports.Ul = Ul;
-var Ol = function (_a) {
-    var children = _a.children, rest = __rest(_a, ["children"]);
-    return ((0, jsx_runtime_1.jsx)(ListWrapper, __assign({}, rest, { children: (0, jsx_runtime_1.jsx)(Stack_1.Stack, __assign({ spaceBetween: 2 }, { children: renderList({ arrayChildren: children, listType: 'ol' }) })) })));
+var Ol = function (props) {
+    var children = props.children;
+    return ((0, jsx_runtime_1.jsx)(Margin_1.Margin, __assign({ top: 2 }, { children: (0, jsx_runtime_1.jsx)(Stack_1.Stack, __assign({ spaceBetween: 2 }, { children: renderList({ children: children, listType: 'ol' }) })) })));
 };
 exports.Ol = Ol;