@ovotech/element-native 3.3.1 → 3.3.2-canary-51af19f-615

package/dist/components/NavHeader/NavHeader.styles.js

@@ -0,0 +1,72 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledIconButtonL = exports.StyledIconButtonS = exports.IconButtonWrapper = exports.CollapsedTitle = exports.CollapsedTitleWrapper = exports.ExpandedTitle = exports.NavWrapper = exports.NavContainer = void 0;
+var react_native_reanimated_1 = __importDefault(require("react-native-reanimated"));
+var styled_native_1 = __importStar(require("../../styled.native"));
+var react_native_1 = require("react-native");
+exports.NavContainer = (0, styled_native_1.default)(react_native_reanimated_1.default.View)(function (_a) {
+    var semantic = _a.theme.semantic;
+    return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    width: 100%;\n    background-color: ", ";\n  "], ["\n    width: 100%;\n    background-color: ", ";\n  "])), semantic.surface.base);
+});
+exports.NavWrapper = (0, styled_native_1.default)(react_native_1.View)(function (_a) {
+    var core = _a.theme.core;
+    return (0, styled_native_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    width: 100%;\n    padding: ", ";\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    flex-wrap: wrap;\n  "], ["\n    width: 100%;\n    padding: ", ";\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    flex-wrap: wrap;\n  "])), core.space[2]);
+});
+exports.ExpandedTitle = (0, styled_native_1.default)(react_native_reanimated_1.default.Text)(function (_a) {
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, hasBackButton = _a.hasBackButton, fullWidth = _a.fullWidth;
+    return (0, styled_native_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    width: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    height: ", ";\n    color: ", ";\n  "], ["\n    width: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    height: ", ";\n    color: ", ";\n  "])), fullWidth ? '100%' : '65%', core.fontFamily.heading.native, core.fontSize.heading1[hasBackButton ? 'small' : 'large'], hasBackButton
+        ? core.lineHeight.heading1.small
+        : core.space[13], hasBackButton ? core.lineHeight.heading1.small : core.space[13], semantic.message.branded);
+});
+exports.CollapsedTitleWrapper = (0, styled_native_1.default)(react_native_reanimated_1.default.View)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  align-items: center;\n  justify-content: center;\n  width: 33.3%;\n  height: ", ";\n"], ["\n  align-items: center;\n  justify-content: center;\n  width: 33.3%;\n  height: ", ";\n"])), function (_a) {
+    var core = _a.theme.core;
+    return core.lineHeight.heading4.small;
+});
+exports.CollapsedTitle = (0, styled_native_1.default)(react_native_reanimated_1.default.Text)(function (_a) {
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic;
+    return (0, styled_native_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n  "], ["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n  "])), core.fontFamily.heading.native, core.fontSize.heading4.small, core.lineHeight.heading4.small, semantic.message.branded);
+});
+exports.IconButtonWrapper = styled_native_1.default.View(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  width: 33.3%;\n  flex-direction: row;\n  justify-content: flex-end;\n"], ["\n  width: 33.3%;\n  flex-direction: row;\n  justify-content: flex-end;\n"])));
+var iconButtonSharedStyles = (0, styled_native_1.css)(function (_a) {
+    var semantic = _a.theme.semantic;
+    return "\n    border-radius: 100px;\n    background-color: ".concat(semantic.inverted.surface, ";\n    align-items: center;\n    justify-content: center;\n");
+});
+exports.StyledIconButtonS = (0, styled_native_1.default)(react_native_reanimated_1.default.View)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  width: 28px;\n  height: 28px;\n  opacity: ", ";\n  ", ";\n"], ["\n  width: 28px;\n  height: 28px;\n  opacity: ", ";\n  ", ";\n"])), function (_a) {
+    var $pressed = _a.$pressed;
+    return ($pressed ? 0.8 : 1);
+}, iconButtonSharedStyles);
+exports.StyledIconButtonL = (0, styled_native_1.default)(react_native_reanimated_1.default.View)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  width: 36px;\n  height: 36px;\n  opacity: ", ";\n  ", ";\n"], ["\n  width: 36px;\n  height: 36px;\n  opacity: ", ";\n  ", ";\n"])), function (_a) {
+    var $pressed = _a.$pressed;
+    return ($pressed ? 0.8 : 1);
+}, iconButtonSharedStyles);
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

package/dist/components/SummaryList/SummaryList.d.ts

@@ -0,0 +1,14 @@
+import { ComponentProps, ReactNode } from 'react';
+import { Dd, Dl } from '../List';
+declare type SummaryListProps = ComponentProps<typeof Dl>;
+/**
+ * @deprecated This component has been deprecated and will be removed in a future release.
+ * Please use the Description List (List/Dl) component instead.
+ * */
+declare const SummaryList: ({ children, ...rest }: SummaryListProps) => JSX.Element;
+declare type SummaryItemProps = ComponentProps<typeof Dd> & {
+    label: ReactNode;
+    index?: number;
+};
+declare const SummaryItem: ({ label, children, index, ...rest }: SummaryItemProps) => JSX.Element;
+export { SummaryList, SummaryItem };

package/dist/components/SummaryList/SummaryList.js

@@ -0,0 +1,47 @@
+"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.SummaryItem = exports.SummaryList = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var List_1 = require("../List");
+/**
+ * @deprecated This component has been deprecated and will be removed in a future release.
+ * Please use the Description List (List/Dl) component instead.
+ * */
+var SummaryList = function (_a) {
+    var children = _a.children, rest = __rest(_a, ["children"]);
+    console.warn('SummaryList component has been deprecated and will be removed in a future release. Please use the DescriptionList component instead.');
+    return ((0, jsx_runtime_1.jsx)(List_1.Dl, __assign({}, rest, { children: react_1.Children.map(children, function (child, index) {
+            return (0, react_1.cloneElement)(child, {
+                index: index,
+            });
+        }) })));
+};
+exports.SummaryList = SummaryList;
+var SummaryItem = function (_a) {
+    var label = _a.label, children = _a.children, index = _a.index, rest = __rest(_a, ["label", "children", "index"]);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(List_1.Dt, __assign({ style: index === 0 ? { marginTop: 0 } : undefined }, { children: label })), (0, jsx_runtime_1.jsx)(List_1.Dd, __assign({}, rest, { children: children }))] }));
+};
+exports.SummaryItem = SummaryItem;

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

@@ -0,0 +1 @@
+export { SummaryList, SummaryItem } from './SummaryList';

package/dist/components/SummaryList/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SummaryItem = exports.SummaryList = void 0;
+var SummaryList_1 = require("./SummaryList");
+Object.defineProperty(exports, "SummaryList", { enumerable: true, get: function () { return SummaryList_1.SummaryList; } });
+Object.defineProperty(exports, "SummaryItem", { enumerable: true, get: function () { return SummaryList_1.SummaryItem; } });

package/dist/esm/components/Accordion/Accordion.js

@@ -27,12 +27,12 @@ var __assign = (this && this.__assign) || function () {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Component, useCallback, useContext, useEffect, useMemo, useState, } from 'react';
 import Animated, { interpolateColor, runOnUI, useAnimatedStyle, useDerivedValue, useSharedValue, withTiming, } from 'react-native-reanimated';
+import { useLayout } from '../../hooks/use-layout';
 import { ThemeContext } from '../../styled.native';
 import { pxToNumber } from '../../utils';
 import { Heading4 } from '../Heading';
 import { AccordionGroupContext } from './Group';
 import { AccordionIcon } from './Icon';
-import { useLayout } from './hooks';
 import { StyledAccordion, StyledAccordionHeader, StyledContainer, } from './styles';
 export function withAnimated(WrappedComponent) {
     var displayName = WrappedComponent.displayName || WrappedComponent.name || 'Component';

package/dist/esm/components/List/List.js

@@ -71,14 +71,14 @@ var Ul = function (_a) {
     var renderList = function (arrayChildren, level) {
         if (level === void 0) { level = 0; }
         return Children.map(arrayChildren, function (child) {
-            var _a, _b;
+            var _a, _b, _c;
             // @ts-ignore It complains that child props doesn't exist. Weird.
-            if (Array.isArray((_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.children)) {
+            if (Array.isArray((_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.children) && ((_b = child === null || child === void 0 ? void 0 : child.type) === null || _b === void 0 ? void 0 : _b.name) === 'Ul') {
                 var lvl = level;
                 var PADDING = 3;
                 lvl = lvl + PADDING;
                 // @ts-ignore It complains that child props doesn't exist. Weird.
-                return renderList((_b = child === null || child === void 0 ? void 0 : child.props) === null || _b === void 0 ? void 0 : _b.children, lvl);
+                return renderList((_c = child === null || child === void 0 ? void 0 : child.props) === null || _c === void 0 ? void 0 : _c.children, lvl);
             }
             else {
                 return (_jsx(ListBulletItem, __assign({ showBullets: showBullets, level: level }, { children: child })));

package/dist/esm/components/NavHeader/NavHeader.js

@@ -1,7 +1,3 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -13,51 +9,53 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { TouchableOpacity, View } from 'react-native';
-import Animated, { FadeIn, FadeOut, Layout } from 'react-native-reanimated';
-import { Path, Svg } from 'react-native-svg';
-import styled, { css } from '../../styled.native';
-import { Heading3, Heading4 } from '../Heading';
-var BackIcon = function () {
-    return (_jsx(Svg, __assign({ width: "10", height: "16", viewBox: "0 0 10 16" }, { children: _jsx(Path, { d: "M0.579956 8L8.57996 16L9.99996 14.58L3.41996 8L9.99996 1.42L8.57996 0L0.579956 8Z", fill: "white" }) })));
-};
-var StyledText = styled.Text(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic;
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    color: ", ";\n    font-size: ", ";\n    font-family: ", ";\n  "], ["\n    color: ", ";\n    font-size: ", ";\n    font-family: ", ";\n  "])), semantic.inverted.message.base, core.fontSize.small.small, core.fontFamily.body.native);
-});
-var LeftHeaderText = styled(StyledText)(function (_a) {
-    var core = _a.theme.core;
-    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    padding-left: ", ";\n  "], ["\n    padding-left: ", ";\n  "])), core.space[2]);
-});
-var HeadlineView = styled(Animated.View)(function (_a) {
-    var core = _a.theme.core;
-    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    padding: 0 ", " ", ";\n  "], ["\n    padding: 0 ", " ", ";\n  "])), core.space[3], core.space[3]);
-});
-var RootView = styled.View(function (_a) {
-    var semantic = _a.theme.semantic;
-    return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    background-color: ", ";\n    overflow: hidden;\n  "], ["\n    background-color: ", ";\n    overflow: hidden;\n  "])), semantic.message.branded);
-});
-var StyledView = styled(Animated.View)(function (_a) {
-    var core = _a.theme.core, marginTop = _a.marginTop;
-    return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    padding: ", ";\n    padding-bottom: ", ";\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    margin-top: ", ";\n  "], ["\n    padding: ", ";\n    padding-bottom: ", ";\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    margin-top: ", ";\n  "])), core.space[3], core.space[2], marginTop !== null && marginTop !== void 0 ? marginTop : 0);
-});
-var StyledHeading4 = styled(Heading4)(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, textAlign = _a.textAlign;
-    return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    font-family: ", ";\n    margin-top: 0;\n    margin-bottom: 0;\n    color: ", ";\n    text-align: ", ";\n  "], ["\n    font-family: ", ";\n    margin-top: 0;\n    margin-bottom: 0;\n    color: ", ";\n    text-align: ", ";\n  "])), core.fontFamily.bodyBold.native, semantic.inverted.message.base, textAlign);
-});
-var StyledHeading3 = styled(Heading3)(function (_a) {
-    var semantic = _a.theme.semantic;
-    return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    margin-top: 0;\n    margin-bottom: 0;\n    padding-top: 0;\n    color: ", ";\n    text-align: left;\n  "], ["\n    margin-top: 0;\n    margin-bottom: 0;\n    padding-top: 0;\n    color: ", ";\n    text-align: left;\n  "])), semantic.inverted.message.base);
-});
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { theme } from '@ovotech/element-core';
+import { useEffect } from 'react';
+import { Pressable } from 'react-native';
+import Animated, { FadeInDown, FadeInUp, FadeOutDown, FadeOutUp, Layout, runOnUI, useAnimatedStyle, useSharedValue, withTiming, } from 'react-native-reanimated';
+import { useLayout } from '../../hooks/use-layout';
+import { Action } from '../ActionList';
+import { Icon } from '../Icon';
+import { CollapsedTitleWrapper, ExpandedTitle, IconButtonWrapper, NavContainer, StyledIconButtonL, StyledIconButtonS, CollapsedTitle, NavWrapper, } from './NavHeader.styles';
+// calculated based on layout with maximum possible height
+var INITIAL_HEADER_HEIGHT = 115;
+var FADE_ANIMATION_DURATION = 250; // ms
 export var NavHeader = function (_a) {
-    var options = _a.options, headline = _a.headline;
-    return (_jsxs(RootView, __assign({ layout: Layout === null || Layout === void 0 ? void 0 : Layout.duration(150) }, { children: [_jsxs(StyledView, __assign({ marginTop: options === null || options === void 0 ? void 0 : options.statusBarHeight }, { children: [(options === null || options === void 0 ? void 0 : options.headerLeft) ? (options === null || options === void 0 ? void 0 : options.headerLeft()) : (options === null || options === void 0 ? void 0 : options.canGoBack()) ? (_jsxs(TouchableOpacity, __assign({ style: {
-                            flexDirection: 'row',
-                            alignItems: 'center',
-                            flex: 1,
-                            flexGrow: 1,
-                            flexShrink: 1,
-                        }, onPress: options === null || options === void 0 ? void 0 : options.goBack }, { children: [_jsx(BackIcon, {}), _jsx(LeftHeaderText, { children: "Back" })] }))) : null, _jsx(Animated.View, __assign({ entering: FadeIn, exiting: FadeOut, style: { flex: 1, flexGrow: 3, flexShrink: 1 } }, { children: _jsx(StyledHeading4, __assign({ textAlign: (options === null || options === void 0 ? void 0 : options.canGoBack()) ? 'center' : 'left', numberOfLines: 1 }, { children: !headline ? options === null || options === void 0 ? void 0 : options.title : ' ' })) })), _jsx(View, __assign({ style: { flex: 1, flexGrow: 1, flexShrink: 1 } }, { children: options.headerRight ? options.headerRight() : null }))] })), headline ? (_jsx(HeadlineView, __assign({ entering: FadeIn, exiting: FadeOut }, { children: (options === null || options === void 0 ? void 0 : options.title) ? (_jsx(StyledHeading3, { children: options.title })) : null }))) : null] })));
+    var title = _a.title, scrolled = _a.scrolled, rightActionConfig = _a.rightActionConfig, canGoBack = _a.canGoBack, goBack = _a.goBack;
+    var _b = useLayout(INITIAL_HEADER_HEIGHT), layout = _b[0], onLayout = _b[1];
+    var navHeight = useSharedValue(layout.height); // initial value
+    var animatedNavHeight = useAnimatedStyle(function () {
+        return {
+            height: navHeight.value,
+        };
+    });
+    // take children calculated height and change NavContainer height accordingly but with animation
+    useEffect(function () {
+        runOnUI(function () {
+            'worklet';
+            navHeight.value = withTiming(Math.floor(layout.height), {
+                duration: FADE_ANIMATION_DURATION,
+            });
+        })();
+    }, [layout.height]);
+    // NavContainer is animated view, height transition will be smooth
+    // in order to tell NavContainer which height it children have we need another NavWrapper
+    // back-button, title and right-action has wrappers with 33.3% and they are always rendered
+    // we need it for correct placing of the title when either back-button or right-action missing
+    return (_jsx(NavContainer, __assign({ style: animatedNavHeight }, { children: _jsxs(NavWrapper, __assign({ onLayout: onLayout }, { children: [_jsx(Animated.View, __assign({ style: {
+                        width: scrolled ? '33.3%' : '100%',
+                        height: !canGoBack ? parseInt(theme.core.space[10]) : undefined,
+                    }, layout: Layout.delay(FADE_ANIMATION_DURATION) }, { children: canGoBack && (_jsx(Action, __assign({ actionType: "back", onPress: goBack }, { children: "Back" }))) })), scrolled ? (_jsxs(_Fragment, { children: [_jsx(CollapsedTitleWrapper, { children: _jsx(CollapsedTitle, __assign({ numberOfLines: 1, ellipsizeMode: "tail", entering: FadeInDown.delay(FADE_ANIMATION_DURATION), exiting: FadeOutDown.duration(FADE_ANIMATION_DURATION) }, { children: title })) }), _jsx(IconButtonWrapper, { children: _jsx(IconButton, { rightActionConfig: rightActionConfig, size: "small", animation: FadeInDown.delay(FADE_ANIMATION_DURATION) }) })] })) : (_jsxs(_Fragment, { children: [_jsx(ExpandedTitle, __assign({ fullWidth: !scrolled && !rightActionConfig, numberOfLines: 1, ellipsizeMode: "tail", hasBackButton: canGoBack, entering: FadeInUp.delay(FADE_ANIMATION_DURATION), exiting: FadeOutUp.duration(FADE_ANIMATION_DURATION) }, { children: title })), _jsx(IconButtonWrapper, { children: _jsx(IconButton, { rightActionConfig: rightActionConfig, size: "large", animation: FadeInUp.delay(FADE_ANIMATION_DURATION) }) })] }))] })) })));
+};
+var IconButton = function (_a) {
+    var size = _a.size, animation = _a.animation, rightActionConfig = _a.rightActionConfig;
+    var ButtonStyled = size === 'small' ? StyledIconButtonS : StyledIconButtonL;
+    if (!rightActionConfig || !(rightActionConfig === null || rightActionConfig === void 0 ? void 0 : rightActionConfig.iconName)) {
+        return null;
+    }
+    return (_jsx(Pressable, __assign({ hitSlop: 44, pressRetentionOffset: 44, onPress: rightActionConfig === null || rightActionConfig === void 0 ? void 0 : rightActionConfig.onActionPress }, { children: function (_a) {
+            var pressed = _a.pressed;
+            return (_jsx(ButtonStyled, __assign({ entering: animation, "$pressed": pressed }, { children: _jsx(Icon, { name: rightActionConfig.iconName, size: size === 'small' ? 16 : 18, color: theme.semantic.inverted.message.base }) })));
+        } })));
 };
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

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

@@ -0,0 +1,43 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import Animated from 'react-native-reanimated';
+import styled, { css } from '../../styled.native';
+import { View } from 'react-native';
+export var NavContainer = styled(Animated.View)(function (_a) {
+    var semantic = _a.theme.semantic;
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    width: 100%;\n    background-color: ", ";\n  "], ["\n    width: 100%;\n    background-color: ", ";\n  "])), semantic.surface.base);
+});
+export var NavWrapper = styled(View)(function (_a) {
+    var core = _a.theme.core;
+    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    width: 100%;\n    padding: ", ";\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    flex-wrap: wrap;\n  "], ["\n    width: 100%;\n    padding: ", ";\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    flex-wrap: wrap;\n  "])), core.space[2]);
+});
+export var ExpandedTitle = styled(Animated.Text)(function (_a) {
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, hasBackButton = _a.hasBackButton, fullWidth = _a.fullWidth;
+    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    width: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    height: ", ";\n    color: ", ";\n  "], ["\n    width: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    height: ", ";\n    color: ", ";\n  "])), fullWidth ? '100%' : '65%', core.fontFamily.heading.native, core.fontSize.heading1[hasBackButton ? 'small' : 'large'], hasBackButton
+        ? core.lineHeight.heading1.small
+        : core.space[13], hasBackButton ? core.lineHeight.heading1.small : core.space[13], semantic.message.branded);
+});
+export var CollapsedTitleWrapper = styled(Animated.View)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  align-items: center;\n  justify-content: center;\n  width: 33.3%;\n  height: ", ";\n"], ["\n  align-items: center;\n  justify-content: center;\n  width: 33.3%;\n  height: ", ";\n"])), function (_a) {
+    var core = _a.theme.core;
+    return core.lineHeight.heading4.small;
+});
+export var CollapsedTitle = styled(Animated.Text)(function (_a) {
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic;
+    return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n  "], ["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n  "])), core.fontFamily.heading.native, core.fontSize.heading4.small, core.lineHeight.heading4.small, semantic.message.branded);
+});
+export var IconButtonWrapper = styled.View(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  width: 33.3%;\n  flex-direction: row;\n  justify-content: flex-end;\n"], ["\n  width: 33.3%;\n  flex-direction: row;\n  justify-content: flex-end;\n"])));
+var iconButtonSharedStyles = css(function (_a) {
+    var semantic = _a.theme.semantic;
+    return "\n    border-radius: 100px;\n    background-color: ".concat(semantic.inverted.surface, ";\n    align-items: center;\n    justify-content: center;\n");
+});
+export var StyledIconButtonS = styled(Animated.View)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  width: 28px;\n  height: 28px;\n  opacity: ", ";\n  ", ";\n"], ["\n  width: 28px;\n  height: 28px;\n  opacity: ", ";\n  ", ";\n"])), function (_a) {
+    var $pressed = _a.$pressed;
+    return ($pressed ? 0.8 : 1);
+}, iconButtonSharedStyles);
+export var StyledIconButtonL = styled(Animated.View)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  width: 36px;\n  height: 36px;\n  opacity: ", ";\n  ", ";\n"], ["\n  width: 36px;\n  height: 36px;\n  opacity: ", ";\n  ", ";\n"])), function (_a) {
+    var $pressed = _a.$pressed;
+    return ($pressed ? 0.8 : 1);
+}, iconButtonSharedStyles);
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

package/dist/esm/components/SummaryList/SummaryList.js

@@ -0,0 +1,43 @@
+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;
+};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, cloneElement } from 'react';
+import { Dd, Dl, Dt } from '../List';
+/**
+ * @deprecated This component has been deprecated and will be removed in a future release.
+ * Please use the Description List (List/Dl) component instead.
+ * */
+var SummaryList = function (_a) {
+    var children = _a.children, rest = __rest(_a, ["children"]);
+    console.warn('SummaryList component has been deprecated and will be removed in a future release. Please use the DescriptionList component instead.');
+    return (_jsx(Dl, __assign({}, rest, { children: Children.map(children, function (child, index) {
+            return cloneElement(child, {
+                index: index,
+            });
+        }) })));
+};
+var SummaryItem = function (_a) {
+    var label = _a.label, children = _a.children, index = _a.index, rest = __rest(_a, ["label", "children", "index"]);
+    return (_jsxs(_Fragment, { children: [_jsx(Dt, __assign({ style: index === 0 ? { marginTop: 0 } : undefined }, { children: label })), _jsx(Dd, __assign({}, rest, { children: children }))] }));
+};
+export { SummaryList, SummaryItem };

package/dist/esm/components/SummaryList/index.js

@@ -0,0 +1 @@
+export { SummaryList, SummaryItem } from './SummaryList';

package/dist/esm/hooks/use-layout.js

@@ -0,0 +1,16 @@
+import { useCallback, useState } from 'react';
+export var useLayout = function (defaultHeight) {
+    var _a = useState({ height: defaultHeight || 0, width: 0, measured: false }), layout = _a[0], setLayout = _a[1];
+    var onLayout = useCallback(function (e) {
+        var _a = e.nativeEvent.layout, height = _a.height, width = _a.width;
+        if (height === layout.height && width === layout.width) {
+            return;
+        }
+        setLayout({
+            height: height,
+            width: width,
+            measured: true,
+        });
+    }, [layout.height, layout.width]);
+    return [layout, onLayout];
+};