@ovotech/element-native 4.0.2-canary-e5d087a-257 → 4.0.2-canary-957f338-258

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/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-957f338-258",
   "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-957f338-258",
     "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 {};