@ovotech/element-native 4.0.2-canary-e5d087a-257 → 4.0.2-canary-9474c73-259

package/dist/components/NavHeader/NavHeader.js

@@ -25,7 +25,6 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.NavHeader = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
-var element_core_1 = require("@ovotech/element-core");
 var react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
 var ActionList_1 = require("../ActionList");
 var IconButton_1 = require("./IconButton");
@@ -34,6 +33,7 @@ var FADE_ANIMATION_DURATION = 200;
 var NavHeader = function (_a) {
     var title = _a.title, scrolled = _a.scrolled, canGoBack = _a.canGoBack, rightActionConfig = _a.rightActionConfig, _b = _a.topOffset, topOffset = _b === void 0 ? 0 : _b, _c = _a.backButtonText, backButtonText = _c === void 0 ? 'Back' : _c, onHeaderHeightChange = _a.onHeaderHeightChange, onBackButtonPress = _a.onBackButtonPress;
     var hasRightAction = !!rightActionConfig;
+    var hasTitle = title !== undefined && (title === null || title === void 0 ? void 0 : title.length) > 0;
     var layoutHeight = (0, react_native_reanimated_1.useSharedValue)(0);
     var animatedHeightStyle = (0, react_native_reanimated_1.useAnimatedStyle)(function () {
         return {
@@ -56,14 +56,12 @@ var NavHeader = function (_a) {
     };
     // NavWrapper will recieve height of the NavContainer and animate it
     // content inside NavContainer is the only dynamic part of NavHeader
-    return ((0, jsx_runtime_1.jsx)(NavHeader_styles_1.NavWrapper, { collapsed: scrolled, style: animatedHeightStyle, children: (0, jsx_runtime_1.jsxs)(NavHeader_styles_1.NavContainer, { topOffset: topOffset, onLayout: onLayout, children: [(0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: {
+    return ((0, jsx_runtime_1.jsx)(NavHeader_styles_1.NavWrapper, { collapsed: scrolled, style: animatedHeightStyle, children: (0, jsx_runtime_1.jsxs)(NavHeader_styles_1.NavContainer, { topOffset: topOffset, onLayout: onLayout, titleVisible: hasTitle, children: [(0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: {
                         width: scrolled ? '33.3%' : '100%',
-                        // when back button is off we have small margin top for title, to write less code we can just set height
-                        height: !canGoBack ? parseInt(element_core_1.theme.core.space[10]) : undefined,
-                    }, children: canGoBack && ((0, jsx_runtime_1.jsx)(NavHeader_styles_1.ActionWrapper, { collapsed: scrolled, children: (0, jsx_runtime_1.jsx)(ActionList_1.Action, { iconLeft: "chevron-left-small", inline: true, onPress: onBackButtonPress, children: backButtonText }) })) }), scrolled ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(NavHeader_styles_1.CollapsedTitleWrapper, { children: (0, jsx_runtime_1.jsx)(NavHeader_styles_1.CollapsedTitle, { numberOfLines: 1, ellipsizeMode: "tail", entering: react_native_reanimated_1.FadeInDown.delay(FADE_ANIMATION_DURATION), exiting: react_native_reanimated_1.FadeOutDown.duration(FADE_ANIMATION_DURATION), children: title }) }), (0, jsx_runtime_1.jsx)(NavHeader_styles_1.IconButtonWrapper, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { rightActionConfig: rightActionConfig, size: "small", animation: react_native_reanimated_1.FadeInDown.delay(FADE_ANIMATION_DURATION) }) })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(NavHeader_styles_1.ExpandedTitle
+                    }, children: canGoBack && ((0, jsx_runtime_1.jsx)(NavHeader_styles_1.ActionWrapper, { collapsed: scrolled, children: (0, jsx_runtime_1.jsx)(ActionList_1.Action, { iconLeft: "chevron-left-small", inline: true, onPress: onBackButtonPress, children: backButtonText }) })) }), scrolled ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(NavHeader_styles_1.CollapsedTitleWrapper, { titleVisible: hasTitle, children: (0, jsx_runtime_1.jsx)(NavHeader_styles_1.CollapsedTitle, { numberOfLines: 1, ellipsizeMode: "tail", entering: react_native_reanimated_1.FadeInDown.delay(FADE_ANIMATION_DURATION), exiting: react_native_reanimated_1.FadeOutDown.duration(FADE_ANIMATION_DURATION), children: title }) }), (0, jsx_runtime_1.jsx)(NavHeader_styles_1.IconButtonWrapper, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { rightActionConfig: rightActionConfig, size: "small", animation: react_native_reanimated_1.FadeInDown.delay(FADE_ANIMATION_DURATION) }) })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(NavHeader_styles_1.ExpandedTitle
                         // if we don't have right action leave more space for the title text in expanded state
                         , { 
                             // if we don't have right action leave more space for the title text in expanded state
-                            fullWidth: !scrolled && !hasRightAction, numberOfLines: 2, ellipsizeMode: "tail", hasBackButton: canGoBack, entering: react_native_reanimated_1.FadeInUp.delay(FADE_ANIMATION_DURATION), exiting: react_native_reanimated_1.FadeOutUp.duration(FADE_ANIMATION_DURATION), children: title }), (0, jsx_runtime_1.jsx)(NavHeader_styles_1.IconButtonWrapper, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { rightActionConfig: rightActionConfig, size: "large", animation: react_native_reanimated_1.FadeInUp.delay(FADE_ANIMATION_DURATION) }) })] }))] }) }));
+                            fullWidth: !scrolled && !hasRightAction, numberOfLines: 2, ellipsizeMode: "tail", hasBackButton: canGoBack, titleVisible: hasTitle, entering: react_native_reanimated_1.FadeInUp.delay(FADE_ANIMATION_DURATION), exiting: react_native_reanimated_1.FadeOutUp.duration(FADE_ANIMATION_DURATION), children: title }), (0, jsx_runtime_1.jsx)(NavHeader_styles_1.IconButtonWrapper, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { rightActionConfig: rightActionConfig, size: "large", animation: react_native_reanimated_1.FadeInUp.delay(FADE_ANIMATION_DURATION) }) })] }))] }) }));
 };
 exports.NavHeader = NavHeader;

package/dist/components/NavHeader/NavHeader.styles.d.ts

@@ -971,8 +971,8 @@ export declare const NavContainer: import("styled-components").StyledComponent<t
         };
     };
 }, {
-    collapsed: boolean;
     topOffset: number;
+    titleVisible?: boolean | undefined;
 }, never>;
 export declare const ExpandedTitle: import("styled-components").StyledComponent<import("react").ComponentClass<import("react-native-reanimated").AnimateProps<import("react-native").TextProps>, any>, {
     core: {
@@ -1461,6 +1461,7 @@ export declare const ExpandedTitle: import("styled-components").StyledComponent<
 }, {
     hasBackButton?: boolean | undefined;
     fullWidth: boolean;
+    titleVisible?: boolean | undefined;
 }, never>;
 export declare const CollapsedTitleWrapper: import("styled-components").StyledComponent<import("react").ComponentClass<import("react-native-reanimated").AnimateProps<import("react-native").ViewProps>, any>, {
     core: {
@@ -1946,7 +1947,9 @@ export declare const CollapsedTitleWrapper: import("styled-components").StyledCo
             };
         };
     };
-}, {}, never>;
+}, {
+    titleVisible?: boolean | undefined;
+}, never>;
 export declare const CollapsedTitle: import("styled-components").StyledComponent<import("react").ComponentClass<import("react-native-reanimated").AnimateProps<import("react-native").TextProps>, any>, {
     core: {
         color: {

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

@@ -41,33 +41,36 @@ exports.NavWrapper = (0, styled_native_1.default)(react_native_reanimated_1.defa
         ? (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n          border-bottom-width: ", ";\n          border-bottom-style: solid;\n          border-bottom-color: ", ";\n        "], ["\n          border-bottom-width: ", ";\n          border-bottom-style: solid;\n          border-bottom-color: ", ";\n        "])), (0, element_core_1.numToPx)(core.borderWidth.small), semantic.border.differentiated) : '');
 });
 exports.NavContainer = styled_native_1.default.View(function (_a) {
-    var core = _a.theme.core, topOffset = _a.topOffset;
-    return (0, styled_native_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    position: absolute;\n\n    /* NavWrapper zIndex + 1 so it is always on top of the wrapper */\n    z-index: ", ";\n    width: 100%;\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    flex-wrap: wrap;\n    padding: ", " ", ";\n    padding-top: ", ";\n  "], ["\n    position: absolute;\n\n    /* NavWrapper zIndex + 1 so it is always on top of the wrapper */\n    z-index: ", ";\n    width: 100%;\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    flex-wrap: wrap;\n    padding: ", " ", ";\n    padding-top: ", ";\n  "])), Z_INDEX + 1, (0, element_core_1.numToPx)(core.space[2]), (0, element_core_1.numToPx)(core.space[4]), (0, element_core_1.numToPx)(topOffset ? topOffset : core.space[2]));
+    var core = _a.theme.core, topOffset = _a.topOffset, titleVisible = _a.titleVisible;
+    return (0, styled_native_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    position: absolute;\n\n    /* NavWrapper zIndex + 1 so it is always on top of the wrapper */\n    z-index: ", ";\n    width: ", ";\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    flex-wrap: wrap;\n    padding-top: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n    padding-right: ", ";\n  "], ["\n    position: absolute;\n\n    /* NavWrapper zIndex + 1 so it is always on top of the wrapper */\n    z-index: ", ";\n    width: ", ";\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    flex-wrap: wrap;\n    padding-top: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n    padding-right: ", ";\n  "])), Z_INDEX + 1, titleVisible ? '100%' : '50%', (0, element_core_1.numToPx)(core.space[(topOffset !== null && topOffset !== void 0 ? topOffset : titleVisible) ? 2 : 4]), (0, element_core_1.numToPx)(core.space[titleVisible ? 2 : 4]), (0, element_core_1.numToPx)(core.space[4]), (0, element_core_1.numToPx)(core.space[4]));
 });
 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_4 || (templateObject_4 = __makeTemplateObject(["\n    width: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n  "], ["\n    width: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n  "])), fullWidth ? '100%' : '65%', core.fontFamily.heading.native, (0, element_core_1.numToPx)(core.fontSize.heading1[hasBackButton ? 'small' : 'large']), (0, element_core_1.numToPx)(hasBackButton ? core.lineHeight.heading1.small : core.space[13]), semantic.message.branded);
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, hasBackButton = _a.hasBackButton, fullWidth = _a.fullWidth, titleVisible = _a.titleVisible;
+    return (0, styled_native_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    width: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n    ", ";\n  "], ["\n    width: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n    ", ";\n  "])), fullWidth ? '100%' : '65%', core.fontFamily.heading.native, (0, element_core_1.numToPx)(core.fontSize.heading1[hasBackButton ? 'small' : 'large']), (0, element_core_1.numToPx)(hasBackButton ? core.lineHeight.heading1.small : core.space[13]), semantic.message.branded, !titleVisible && 'height: 0;');
+});
+exports.CollapsedTitleWrapper = (0, styled_native_1.default)(react_native_reanimated_1.default.View)(function (_a) {
+    var titleVisible = _a.titleVisible;
+    return "\n  width: ".concat(titleVisible ? '33.3%' : '0', ";\n  align-items: center;\n  justify-content: center;\n");
 });
-exports.CollapsedTitleWrapper = (0, styled_native_1.default)(react_native_reanimated_1.default.View)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  width: 33.3%;\n  align-items: center;\n  justify-content: center;\n"], ["\n  width: 33.3%;\n  align-items: center;\n  justify-content: center;\n"])));
 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_6 || (templateObject_6 = __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, (0, element_core_1.numToPx)(core.fontSize.heading4.small), (0, element_core_1.numToPx)(core.lineHeight.heading4.small), semantic.message.branded);
+    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, (0, element_core_1.numToPx)(core.fontSize.heading4.small), (0, element_core_1.numToPx)(core.lineHeight.heading4.small), semantic.message.branded);
 });
-exports.IconButtonWrapper = styled_native_1.default.View(templateObject_7 || (templateObject_7 = __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"])));
+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_8 || (templateObject_8 = __makeTemplateObject(["\n  width: 28px;\n  height: 28px;\n  opacity: ", ";\n  ", ";\n"], ["\n  width: 28px;\n  height: 28px;\n  opacity: ", ";\n  ", ";\n"])), function (_a) {
+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_9 || (templateObject_9 = __makeTemplateObject(["\n  width: 36px;\n  height: 36px;\n  opacity: ", ";\n  ", ";\n"], ["\n  width: 36px;\n  height: 36px;\n  opacity: ", ";\n  ", ";\n"])), function (_a) {
+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);
 exports.ActionWrapper = styled_native_1.default.View(function (_a) {
     var core = _a.theme.core, collapsed = _a.collapsed;
-    return (0, styled_native_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n    margin-bottom: ", ";\n  "], ["\n    margin-bottom: ", ";\n  "])), collapsed ? '0' : (0, element_core_1.numToPx)(core.space[2]));
+    return (0, styled_native_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n    margin-bottom: ", ";\n  "], ["\n    margin-bottom: ", ";\n  "])), collapsed ? '0' : (0, element_core_1.numToPx)(core.space[2]));
 });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;

package/dist/components/SegmentedControls/SegmentedControls.d.ts

@@ -1,12 +1,16 @@
 import { Dispatch, SetStateAction } from 'react';
-import { SegmentTypes } from './constants';
-type SegmentedControlsProps<T extends keyof SegmentTypes> = {
-    activeSegment: SegmentTypes[T][number];
-    segments: SegmentTypes[T];
-    setActiveSegment: Dispatch<SetStateAction<SegmentTypes[T][number]>>;
+export type Segment = {
+    key: string;
+    label: string;
+    accessibilityLabel?: string;
+};
+type SegmentedControlsProps = {
+    activeSegment: Segment[][number];
+    segments: Segment[];
+    setActiveSegment: Dispatch<SetStateAction<Segment[][number]>>;
     inline?: boolean;
     multipleRows?: boolean;
     size?: 'small' | 'large';
 };
-export declare const SegmentedControls: <T extends keyof SegmentTypes>({ activeSegment, setActiveSegment, segments, inline, multipleRows, size, }: SegmentedControlsProps<T>) => JSX.Element;
+export declare const SegmentedControls: ({ activeSegment, setActiveSegment, segments, inline, multipleRows, size, }: SegmentedControlsProps) => JSX.Element;
 export {};

package/dist/components/SegmentedControls/SegmentedControls.js

@@ -53,7 +53,7 @@ var SegmentedControls = function (_a) {
         borderRadius: theme.core.radius.max,
         backgroundColor: theme.semantic.surface.elevated,
     }); }, [animatedX, animatedY, animatedWidth, animatedHeight]);
-    return ((0, jsx_runtime_1.jsxs)(SegmentsContainer, { "$inline": inline, "$multipleRows": multipleRows, children: [(0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: animatedBackgroundStyle }), segments.map(function (segment) { return ((0, jsx_runtime_1.jsx)(SegmentButton_1.SegmentButton, { isSelected: activeSegment.key === segment.key, label: segment.label, onPress: function (x, y, width) {
+    return ((0, jsx_runtime_1.jsxs)(SegmentsContainer, { "$inline": inline, "$multipleRows": multipleRows, children: [(0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: animatedBackgroundStyle }), segments.map(function (segment) { return ((0, jsx_runtime_1.jsx)(SegmentButton_1.SegmentButton, { isSelected: activeSegment.key === segment.key, label: segment.label, accessibilityLabel: segment.accessibilityLabel, onPress: function (x, y, width) {
                     setActiveSegment(segment);
                     animatedX.value = (0, react_native_reanimated_1.withSpring)(x, springSettings);
                     animatedY.value = (0, react_native_reanimated_1.withSpring)(y, springSettings);

package/dist/components/SegmentedControls/components/SegmentButton.d.ts

@@ -1,11 +1,12 @@
 type SegmentButtonProps = {
-    onPress: (x: number, y: number, width: number) => void;
-    onLayout: (width: number, height: number, x: number, y: number) => void;
     isSelected: boolean;
     label: string;
-    multipleRows?: boolean;
+    onPress: (x: number, y: number, width: number) => void;
+    onLayout: (width: number, height: number, x: number, y: number) => void;
+    accessibilityLabel?: string;
     inline?: boolean;
+    multipleRows?: boolean;
     size?: 'small' | 'large';
 };
-export declare const SegmentButton: ({ onPress, onLayout, inline, isSelected, label, multipleRows, size, }: SegmentButtonProps) => JSX.Element;
+export declare const SegmentButton: ({ accessibilityLabel, inline, isSelected, label, multipleRows, onLayout, onPress, size, }: SegmentButtonProps) => JSX.Element;
 export {};

package/dist/components/SegmentedControls/components/SegmentButton.js

@@ -35,7 +35,7 @@ var styled_native_1 = __importDefault(require("../../../styled.native"));
 var P_1 = require("../../P");
 var AnimatedP = react_native_reanimated_1.default.createAnimatedComponent(P_1.P);
 var SegmentButton = function (_a) {
-    var onPress = _a.onPress, onLayout = _a.onLayout, inline = _a.inline, isSelected = _a.isSelected, label = _a.label, multipleRows = _a.multipleRows, _b = _a.size, size = _b === void 0 ? 'large' : _b;
+    var accessibilityLabel = _a.accessibilityLabel, inline = _a.inline, isSelected = _a.isSelected, label = _a.label, multipleRows = _a.multipleRows, onLayout = _a.onLayout, onPress = _a.onPress, _b = _a.size, size = _b === void 0 ? 'large' : _b;
     var xRef = (0, react_1.useRef)(0);
     var yRef = (0, react_1.useRef)(0);
     var widthRef = (0, react_1.useRef)(0);
@@ -73,7 +73,7 @@ var SegmentButton = function (_a) {
         // and 1.1 for the multiple row ones.
         yRef.current - heightRef.current / (multipleRows ? 1.1 : 3), widthRef.current);
     };
-    return ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { onLayout: handleLayout, onPress: handlePress, accessibilityRole: "checkbox", accessibilityState: { selected: isSelected }, hitSlop: {
+    return ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { onLayout: handleLayout, onPress: handlePress, accessible: true, accessibilityRole: "checkbox", accessibilityState: { selected: isSelected }, accessibilityLabel: accessibilityLabel, hitSlop: {
             top: hitslopVal,
             bottom: hitslopVal,
         }, style: { flexGrow: inline || multipleRows ? undefined : 1 }, children: (0, jsx_runtime_1.jsxs)(SSegmentsWrapper, { "$isSelected": isSelected, "$size": size, children: [(0, jsx_runtime_1.jsx)(SSegmentText, { style: {

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

@@ -1,5 +1,4 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { theme } from '@ovotech/element-core';
 import Animated, { Easing, FadeInDown, FadeInUp, FadeOutDown, FadeOutUp, useAnimatedStyle, useSharedValue, withTiming, } from 'react-native-reanimated';
 import { Action } from '../ActionList';
 import { IconButton } from './IconButton';
@@ -8,6 +7,7 @@ var FADE_ANIMATION_DURATION = 200;
 export var NavHeader = function (_a) {
     var title = _a.title, scrolled = _a.scrolled, canGoBack = _a.canGoBack, rightActionConfig = _a.rightActionConfig, _b = _a.topOffset, topOffset = _b === void 0 ? 0 : _b, _c = _a.backButtonText, backButtonText = _c === void 0 ? 'Back' : _c, onHeaderHeightChange = _a.onHeaderHeightChange, onBackButtonPress = _a.onBackButtonPress;
     var hasRightAction = !!rightActionConfig;
+    var hasTitle = title !== undefined && (title === null || title === void 0 ? void 0 : title.length) > 0;
     var layoutHeight = useSharedValue(0);
     var animatedHeightStyle = useAnimatedStyle(function () {
         return {
@@ -30,13 +30,11 @@ export var NavHeader = function (_a) {
     };
     // NavWrapper will recieve height of the NavContainer and animate it
     // content inside NavContainer is the only dynamic part of NavHeader
-    return (_jsx(NavWrapper, { collapsed: scrolled, style: animatedHeightStyle, children: _jsxs(NavContainer, { topOffset: topOffset, onLayout: onLayout, children: [_jsx(Animated.View, { style: {
+    return (_jsx(NavWrapper, { collapsed: scrolled, style: animatedHeightStyle, children: _jsxs(NavContainer, { topOffset: topOffset, onLayout: onLayout, titleVisible: hasTitle, children: [_jsx(Animated.View, { style: {
                         width: scrolled ? '33.3%' : '100%',
-                        // when back button is off we have small margin top for title, to write less code we can just set height
-                        height: !canGoBack ? parseInt(theme.core.space[10]) : undefined,
-                    }, children: canGoBack && (_jsx(ActionWrapper, { collapsed: scrolled, children: _jsx(Action, { iconLeft: "chevron-left-small", inline: true, onPress: onBackButtonPress, children: backButtonText }) })) }), scrolled ? (_jsxs(_Fragment, { children: [_jsx(CollapsedTitleWrapper, { children: _jsx(CollapsedTitle, { 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
+                    }, children: canGoBack && (_jsx(ActionWrapper, { collapsed: scrolled, children: _jsx(Action, { iconLeft: "chevron-left-small", inline: true, onPress: onBackButtonPress, children: backButtonText }) })) }), scrolled ? (_jsxs(_Fragment, { children: [_jsx(CollapsedTitleWrapper, { titleVisible: hasTitle, children: _jsx(CollapsedTitle, { 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
                         // if we don't have right action leave more space for the title text in expanded state
                         , { 
                             // if we don't have right action leave more space for the title text in expanded state
-                            fullWidth: !scrolled && !hasRightAction, numberOfLines: 2, 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) }) })] }))] }) }));
+                            fullWidth: !scrolled && !hasRightAction, numberOfLines: 2, ellipsizeMode: "tail", hasBackButton: canGoBack, titleVisible: hasTitle, 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) }) })] }))] }) }));
 };

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

@@ -12,33 +12,36 @@ export var NavWrapper = styled(Animated.View)(function (_a) {
         ? css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n          border-bottom-width: ", ";\n          border-bottom-style: solid;\n          border-bottom-color: ", ";\n        "], ["\n          border-bottom-width: ", ";\n          border-bottom-style: solid;\n          border-bottom-color: ", ";\n        "])), numToPx(core.borderWidth.small), semantic.border.differentiated) : '');
 });
 export var NavContainer = styled.View(function (_a) {
-    var core = _a.theme.core, topOffset = _a.topOffset;
-    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    position: absolute;\n\n    /* NavWrapper zIndex + 1 so it is always on top of the wrapper */\n    z-index: ", ";\n    width: 100%;\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    flex-wrap: wrap;\n    padding: ", " ", ";\n    padding-top: ", ";\n  "], ["\n    position: absolute;\n\n    /* NavWrapper zIndex + 1 so it is always on top of the wrapper */\n    z-index: ", ";\n    width: 100%;\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    flex-wrap: wrap;\n    padding: ", " ", ";\n    padding-top: ", ";\n  "])), Z_INDEX + 1, numToPx(core.space[2]), numToPx(core.space[4]), numToPx(topOffset ? topOffset : core.space[2]));
+    var core = _a.theme.core, topOffset = _a.topOffset, titleVisible = _a.titleVisible;
+    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    position: absolute;\n\n    /* NavWrapper zIndex + 1 so it is always on top of the wrapper */\n    z-index: ", ";\n    width: ", ";\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    flex-wrap: wrap;\n    padding-top: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n    padding-right: ", ";\n  "], ["\n    position: absolute;\n\n    /* NavWrapper zIndex + 1 so it is always on top of the wrapper */\n    z-index: ", ";\n    width: ", ";\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    flex-wrap: wrap;\n    padding-top: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n    padding-right: ", ";\n  "])), Z_INDEX + 1, titleVisible ? '100%' : '50%', numToPx(core.space[(topOffset !== null && topOffset !== void 0 ? topOffset : titleVisible) ? 2 : 4]), numToPx(core.space[titleVisible ? 2 : 4]), numToPx(core.space[4]), numToPx(core.space[4]));
 });
 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_4 || (templateObject_4 = __makeTemplateObject(["\n    width: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n  "], ["\n    width: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n  "])), fullWidth ? '100%' : '65%', core.fontFamily.heading.native, numToPx(core.fontSize.heading1[hasBackButton ? 'small' : 'large']), numToPx(hasBackButton ? core.lineHeight.heading1.small : core.space[13]), semantic.message.branded);
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, hasBackButton = _a.hasBackButton, fullWidth = _a.fullWidth, titleVisible = _a.titleVisible;
+    return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    width: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n    ", ";\n  "], ["\n    width: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n    ", ";\n  "])), fullWidth ? '100%' : '65%', core.fontFamily.heading.native, numToPx(core.fontSize.heading1[hasBackButton ? 'small' : 'large']), numToPx(hasBackButton ? core.lineHeight.heading1.small : core.space[13]), semantic.message.branded, !titleVisible && 'height: 0;');
+});
+export var CollapsedTitleWrapper = styled(Animated.View)(function (_a) {
+    var titleVisible = _a.titleVisible;
+    return "\n  width: ".concat(titleVisible ? '33.3%' : '0', ";\n  align-items: center;\n  justify-content: center;\n");
 });
-export var CollapsedTitleWrapper = styled(Animated.View)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  width: 33.3%;\n  align-items: center;\n  justify-content: center;\n"], ["\n  width: 33.3%;\n  align-items: center;\n  justify-content: center;\n"])));
 export var CollapsedTitle = styled(Animated.Text)(function (_a) {
     var _b = _a.theme, core = _b.core, semantic = _b.semantic;
-    return css(templateObject_6 || (templateObject_6 = __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, numToPx(core.fontSize.heading4.small), numToPx(core.lineHeight.heading4.small), semantic.message.branded);
+    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, numToPx(core.fontSize.heading4.small), numToPx(core.lineHeight.heading4.small), semantic.message.branded);
 });
-export var IconButtonWrapper = styled.View(templateObject_7 || (templateObject_7 = __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"])));
+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_8 || (templateObject_8 = __makeTemplateObject(["\n  width: 28px;\n  height: 28px;\n  opacity: ", ";\n  ", ";\n"], ["\n  width: 28px;\n  height: 28px;\n  opacity: ", ";\n  ", ";\n"])), function (_a) {
+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_9 || (templateObject_9 = __makeTemplateObject(["\n  width: 36px;\n  height: 36px;\n  opacity: ", ";\n  ", ";\n"], ["\n  width: 36px;\n  height: 36px;\n  opacity: ", ";\n  ", ";\n"])), function (_a) {
+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);
 export var ActionWrapper = styled.View(function (_a) {
     var core = _a.theme.core, collapsed = _a.collapsed;
-    return css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n    margin-bottom: ", ";\n  "], ["\n    margin-bottom: ", ";\n  "])), collapsed ? '0' : numToPx(core.space[2]));
+    return css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n    margin-bottom: ", ";\n  "], ["\n    margin-bottom: ", ";\n  "])), collapsed ? '0' : numToPx(core.space[2]));
 });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;

package/dist/esm/components/SegmentedControls/SegmentedControls.js

@@ -27,7 +27,7 @@ export var SegmentedControls = function (_a) {
         borderRadius: theme.core.radius.max,
         backgroundColor: theme.semantic.surface.elevated,
     }); }, [animatedX, animatedY, animatedWidth, animatedHeight]);
-    return (_jsxs(SegmentsContainer, { "$inline": inline, "$multipleRows": multipleRows, children: [_jsx(Animated.View, { style: animatedBackgroundStyle }), segments.map(function (segment) { return (_jsx(SegmentButton, { isSelected: activeSegment.key === segment.key, label: segment.label, onPress: function (x, y, width) {
+    return (_jsxs(SegmentsContainer, { "$inline": inline, "$multipleRows": multipleRows, children: [_jsx(Animated.View, { style: animatedBackgroundStyle }), segments.map(function (segment) { return (_jsx(SegmentButton, { isSelected: activeSegment.key === segment.key, label: segment.label, accessibilityLabel: segment.accessibilityLabel, onPress: function (x, y, width) {
                     setActiveSegment(segment);
                     animatedX.value = withSpring(x, springSettings);
                     animatedY.value = withSpring(y, springSettings);

package/dist/esm/components/SegmentedControls/components/SegmentButton.js

@@ -6,7 +6,7 @@ import styled from '../../../styled.native';
 import { P } from '../../P';
 var AnimatedP = Animated.createAnimatedComponent(P);
 export var SegmentButton = function (_a) {
-    var onPress = _a.onPress, onLayout = _a.onLayout, inline = _a.inline, isSelected = _a.isSelected, label = _a.label, multipleRows = _a.multipleRows, _b = _a.size, size = _b === void 0 ? 'large' : _b;
+    var accessibilityLabel = _a.accessibilityLabel, inline = _a.inline, isSelected = _a.isSelected, label = _a.label, multipleRows = _a.multipleRows, onLayout = _a.onLayout, onPress = _a.onPress, _b = _a.size, size = _b === void 0 ? 'large' : _b;
     var xRef = useRef(0);
     var yRef = useRef(0);
     var widthRef = useRef(0);
@@ -44,7 +44,7 @@ export var SegmentButton = function (_a) {
         // and 1.1 for the multiple row ones.
         yRef.current - heightRef.current / (multipleRows ? 1.1 : 3), widthRef.current);
     };
-    return (_jsx(Pressable, { onLayout: handleLayout, onPress: handlePress, accessibilityRole: "checkbox", accessibilityState: { selected: isSelected }, hitSlop: {
+    return (_jsx(Pressable, { onLayout: handleLayout, onPress: handlePress, accessible: true, accessibilityRole: "checkbox", accessibilityState: { selected: isSelected }, accessibilityLabel: accessibilityLabel, hitSlop: {
             top: hitslopVal,
             bottom: hitslopVal,
         }, style: { flexGrow: inline || multipleRows ? undefined : 1 }, children: _jsxs(SSegmentsWrapper, { "$isSelected": isSelected, "$size": size, children: [_jsx(SSegmentText, { style: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ovotech/element-native",
-  "version": "4.0.2-canary-e5d087a-257",
+  "version": "4.0.2-canary-9474c73-259",
   "main": "dist/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/index.d.ts",
@@ -14,7 +14,7 @@
   },
   "dependencies": {
     "@backpackapp-io/react-native-toast": "^0.10.0",
-    "@ovotech/element-core": "3.0.1-canary-e5d087a-257",
+    "@ovotech/element-core": "3.0.1-canary-9474c73-259",
     "deepmerge": "^4.2.2",
     "lodash.groupby": "^4.6.0",
     "react-native-reanimated-carousel": "^3.5.1"

package/dist/components/SegmentedControls/constants.d.ts

@@ -1,33 +0,0 @@
-export type EnergyUseFilters = 'total' | 'electricity' | 'gas';
-export type PeriodFilters = 'day' | 'week' | 'month' | 'year';
-export type MeasurementFilters = 'consumption' | 'cost';
-export type ComparisonFilters = 'similar' | 'previous' | 'none';
-export type MeasurementUnit = '£' | 'kWh';
-export type SegmentTypes = {
-    ENERGY_USE: {
-        key: EnergyUseFilters;
-        label: string;
-        mainScreenLabel?: string;
-    }[];
-    PERIOD: {
-        key: PeriodFilters;
-        label: string;
-        mainScreenLabel?: string;
-    }[];
-    MEASUREMENT: {
-        key: MeasurementFilters;
-        label: string;
-        mainScreenLabel?: string;
-        unit: MeasurementUnit;
-    }[];
-    COMPARISON: {
-        key: ComparisonFilters;
-        label: string;
-        mainScreenLabel?: string;
-    }[];
-    CUSTOM: {
-        key: string;
-        label: string;
-        mainScreenLabel?: string;
-    }[];
-};

package/dist/components/SegmentedControls/constants.js

@@ -1,2 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });

package/dist/esm/components/SegmentedControls/constants.js

@@ -1 +0,0 @@
-export {};