@ovotech/element-native 3.0.0 → 3.1.0-canary-394fb2a-106

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

@@ -2,4 +2,4 @@ import { ComponentClass, ComponentType } from 'react';
 import { AnimateProps } from 'react-native-reanimated';
 import { AccordionProps } from './types';
 export declare function withAnimated<T extends object>(WrappedComponent: ComponentType<T>): ComponentClass<AnimateProps<T>>;
-export declare const Accordion: ({ expanded, first, headingComponent, last, title, children, onToggle, }: AccordionProps) => JSX.Element;
+export declare const Accordion: ({ expanded, first, last, title, children, onToggle, }: AccordionProps) => JSX.Element;

package/dist/components/Accordion/Accordion.js

@@ -56,6 +56,7 @@ var react_native_reanimated_1 = __importStar(require("react-native-reanimated"))
 var styled_native_1 = require("../../styled.native");
 var utils_1 = require("../../utils");
 var Heading_1 = require("../Heading");
+var Group_1 = require("./Group");
 var Icon_1 = require("./Icon");
 var hooks_1 = require("./hooks");
 var styles_1 = require("./styles");
@@ -77,13 +78,15 @@ function withAnimated(WrappedComponent) {
 }
 exports.withAnimated = withAnimated;
 var Accordion = function (_a) {
-    var _b = _a.expanded, expanded = _b === void 0 ? false : _b, first = _a.first, _c = _a.headingComponent, headingComponent = _c === void 0 ? Heading_1.Heading4 : _c, last = _a.last, title = _a.title, children = _a.children, onToggle = _a.onToggle;
-    var _d = (0, react_1.useContext)(styled_native_1.ThemeContext), core = _d.core, semantic = _d.semantic;
-    var AnimatedHeading = (0, react_1.useMemo)(function () { return withAnimated(headingComponent); }, [
-        headingComponent,
+    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;
+    var _c = (0, react_1.useContext)(styled_native_1.ThemeContext), core = _c.core, semantic = _c.semantic;
+    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 _e = (0, hooks_1.useLayout)(0), layout = _e[0], onLayout = _e[1];
-    var _f = (0, react_1.useState)(expanded), open = _f[0], setOpen = _f[1];
+    var _d = (0, hooks_1.useLayout)(0), layout = _d[0], onLayout = _d[1];
+    var _e = (0, react_1.useState)(expanded), open = _e[0], setOpen = _e[1];
     var handleHeightContent = (0, react_1.useMemo)(function () { return layout.height || 100; }, [
         layout.height,
     ]);

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

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

package/dist/components/Accordion/Group.js

@@ -1,19 +1,33 @@
 "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.AccordionGroup = void 0;
+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;
+    var children = _a.children, headingComponent = _a.headingComponent;
     var childCount = react_1.Children.count(children);
-    return ((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;
-        }) }));
+    return ((0, jsx_runtime_1.jsx)(exports.AccordionGroupContext.Provider, __assign({ 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/styles.d.ts

@@ -226,7 +226,7 @@ export declare const StyledAccordion: import("styled-components").StyledComponen
             };
         };
     };
-}, {
+} & object, {
     first?: boolean | undefined;
     last?: boolean | undefined;
 }, never>;
@@ -457,7 +457,7 @@ export declare const StyledAccordionHeader: import("styled-components").StyledCo
             };
         };
     };
-}, {}, never>;
+} & object, {}, never>;
 export declare const StyledContainer: import("styled-components").StyledComponent<typeof import("react-native").View, import("../../theme/theme").Theme & {
     core: {
         radius: Record<"small" | "medium" | "large" | "max", string>;
@@ -685,4 +685,4 @@ export declare const StyledContainer: import("styled-components").StyledComponen
             };
         };
     };
-}, {}, never>;
+} & object, {}, never>;

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

@@ -5,17 +5,17 @@ export declare type AccordionProps = PropsWithChildren<{
     children?: ReactNode;
     onToggle?: CallableFunction;
     /**
-     * @deprecated as it no longer affects styling
+     * @deprecated inline prop is no longer affects styling
      */
     inline?: boolean;
-    headingComponent?: React.ComponentType<any>;
     first?: boolean;
     last?: boolean;
     testId?: string;
 }>;
 export declare type AccordionGroupProps = {
     /**
-     * @deprecated as it no longer affects styling
+     * @deprecated inline prop is no longer affects styling
      */
     inline?: boolean;
+    headingComponent?: React.ComponentType<any>;
 };

package/dist/components/ActionList/ActionList.d.ts

@@ -0,0 +1,22 @@
+import { ComponentProps, PropsWithChildren, Ref } from 'react';
+import { AccessibilityRole, View, ViewProps } from 'react-native';
+import { IconName } from '../../providers';
+import { StyledActionList } from './styled';
+declare const ACTION_TYPES: {
+    [key: string]: IconName;
+};
+declare type ActionListProps = ComponentProps<typeof StyledActionList>;
+declare type ActionProps = PropsWithChildren<ViewProps & {
+    accessibilityRole?: AccessibilityRole;
+    actionType?: keyof typeof ACTION_TYPES;
+    iconLeft?: IconName | 'off';
+    iconRight?: IconName | 'off';
+    inverted?: boolean;
+    onPress?: () => void;
+    fullWidth?: 'always' | 'never' | 'small';
+    ref?: Ref<View>;
+    testID?: string;
+}>;
+declare const ActionList: ({ children, inverted, ...rest }: ActionListProps) => JSX.Element;
+declare const Action: ({ accessibilityRole, actionType, children, inverted, onPress, testID, ...rest }: ActionProps) => JSX.Element;
+export { ActionList, Action };

package/dist/components/ActionList/ActionList.js

@@ -0,0 +1,60 @@
+"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.Action = exports.ActionList = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var react_native_1 = require("react-native");
+var hooks_1 = require("../../hooks");
+var styled_1 = require("./styled");
+var ACTION_TYPES = {
+    back: 'chevron-left-small',
+    // edit: 'arrow-right', /* TODO: add pencil + paper icon */
+    external: 'new-window',
+    link: 'chevron-right-small',
+};
+var ActionList = function (_a) {
+    var children = _a.children, inverted = _a.inverted, rest = __rest(_a, ["children", "inverted"]);
+    var childCount = children.length;
+    return ((0, jsx_runtime_1.jsx)(styled_1.StyledActionList, __assign({}, rest, { children: react_1.Children.map(children, function (child, index) {
+            var _a;
+            return (0, react_1.cloneElement)(child, {
+                index: index,
+                hasBorder: childCount > 1 && index !== childCount - 1,
+                inList: childCount !== 1 ? true : false,
+                inverted: (_a = child.props.inverted) !== null && _a !== void 0 ? _a : inverted, // prioritise child prop
+            });
+        }) })));
+};
+exports.ActionList = ActionList;
+var ActionWrapper = function (_a) {
+    var children = _a.children, accessibilityRole = _a.accessibilityRole, _b = _a.activeOpacity, activeOpacity = _b === void 0 ? 0.75 : _b, _c = _a.hasBorder, hasBorder = _c === void 0 ? false : _c, _d = _a.inList, inList = _d === void 0 ? false : _d, _e = _a.inverted, inverted = _e === void 0 ? false : _e, onPress = _a.onPress, testID = _a.testID, rest = __rest(_a, ["children", "accessibilityRole", "activeOpacity", "hasBorder", "inList", "inverted", "onPress", "testID"]);
+    return ((0, jsx_runtime_1.jsx)(styled_1.StyledActionWrapper, __assign({ hasBorder: hasBorder, inList: inList, inverted: inverted, testID: testID }, rest, { children: (0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, __assign({ activeOpacity: activeOpacity, accessibilityRole: accessibilityRole, onPress: onPress }, { children: (0, jsx_runtime_1.jsx)(styled_1.StyledActionInner, { children: children }) })) })));
+};
+var Action = function (_a) {
+    var _b = _a.accessibilityRole, accessibilityRole = _b === void 0 ? 'link' : _b, _c = _a.actionType, actionType = _c === void 0 ? 'link' : _c, children = _a.children, _d = _a.inverted, inverted = _d === void 0 ? false : _d, onPress = _a.onPress, testID = _a.testID, rest = __rest(_a, ["accessibilityRole", "actionType", "children", "inverted", "onPress", "testID"]);
+    var smallAndUp = (0, hooks_1.useBreakpoint)().smallAndUp;
+    return ((0, jsx_runtime_1.jsxs)(ActionWrapper, __assign({ accessibilityRole: accessibilityRole, inverted: inverted, onPress: onPress, testID: testID }, rest, { children: [actionType === 'back' ? ((0, jsx_runtime_1.jsx)(styled_1.StyledLeftIcon, { inverted: inverted, name: ACTION_TYPES['back'], size: 16 })) : null, (0, jsx_runtime_1.jsx)(styled_1.StyledActionText, __assign({ smallAndUp: smallAndUp, inverted: inverted }, { children: children })), actionType !== 'back' ? ((0, jsx_runtime_1.jsx)(styled_1.StyledRightIcon, { inverted: inverted, name: ACTION_TYPES[actionType], marginTop: actionType === 'link' ? 1 : 0, size: 16 })) : null] })));
+};
+exports.Action = Action;

package/dist/components/ActionList/index.d.ts

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

package/dist/components/ActionList/index.js

@@ -0,0 +1,17 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./ActionList"), exports);