@ovotech/element-native 4.5.0 → 5.0.0-canary-bcb1788-338

package/dist/components/RadioCard/index.js

@@ -1 +1,5 @@
-export { RadioCard } from './RadioCard';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RadioCard = void 0;
+var RadioCard_1 = require("./RadioCard");
+Object.defineProperty(exports, "RadioCard", { enumerable: true, get: function () { return RadioCard_1.RadioCard; } });

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

@@ -1,4 +1,3 @@
-import type { JSX } from 'react';
 import { ViewProps } from 'react-native';
 export type Segment = {
     key: string;

package/dist/components/SegmentedControls/SegmentedControls.js

@@ -1,48 +1,100 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Animated, { useAnimatedStyle, useSharedValue, withSpring, } from 'react-native-reanimated';
-import styled, { useTheme } from '../../styled.native';
-import { SegmentButton } from './components/SegmentButton';
+"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 __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 __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.SegmentedControls = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
+var styled_native_1 = __importStar(require("../../styled.native"));
+var SegmentButton_1 = require("./components/SegmentButton");
 /* These settings were found to be nice and fast whilst maintaining spring */
-const springSettings = {
+var springSettings = {
     damping: 25,
     mass: 0.25,
 };
-export const SegmentedControls = ({ activeSegment, setActiveSegment, segments, inline = false, multipleRows, size = 'large', ...rest }) => {
-    const animatedX = useSharedValue(0);
-    const animatedY = useSharedValue(0);
-    const animatedHeight = useSharedValue(0);
-    const animatedWidth = useSharedValue(0);
-    const theme = useTheme();
-    const animatedBackgroundStyle = useAnimatedStyle(() => ({
-        left: animatedX.value,
-        top: animatedY.value + theme.core.space[size === 'small' ? 2 : 3],
+var SegmentedControls = function (_a) {
+    var activeSegment = _a.activeSegment, setActiveSegment = _a.setActiveSegment, segments = _a.segments, _b = _a.inline, inline = _b === void 0 ? false : _b, multipleRows = _a.multipleRows, _c = _a.size, size = _c === void 0 ? 'large' : _c, rest = __rest(_a, ["activeSegment", "setActiveSegment", "segments", "inline", "multipleRows", "size"]);
+    var animatedX = (0, react_native_reanimated_1.useSharedValue)(0);
+    var animatedY = (0, react_native_reanimated_1.useSharedValue)(0);
+    var animatedHeight = (0, react_native_reanimated_1.useSharedValue)(0);
+    var animatedWidth = (0, react_native_reanimated_1.useSharedValue)(0);
+    var theme = (0, styled_native_1.useTheme)();
+    var animatedBackgroundStyle = (0, react_native_reanimated_1.useAnimatedStyle)(function () { return ({
+        transform: [
+            {
+                translateX: animatedX.value,
+            },
+            {
+                translateY: animatedY.value + theme.space[size === 'small' ? 100 : 200],
+            } /* accounting for margin from top & bottom */,
+        ],
         width: animatedWidth.value,
         height: animatedHeight.value,
         position: 'absolute',
-        borderRadius: theme.core.radius.max,
-        backgroundColor: theme.semantic.surface.elevated,
-    }), [animatedX, animatedY, animatedWidth, animatedHeight]);
-    return (_jsxs(SegmentsContainer, { "$inline": inline, "$multipleRows": multipleRows, ...rest, children: [_jsx(Animated.View, { style: animatedBackgroundStyle }), segments.map(segment => (_jsx(SegmentButton, { isSelected: activeSegment.key === segment.key, label: segment.label, accessibilityLabel: segment.accessibilityLabel, accessibilityHint: segment.accessibilityHint, setAnimatedValues: (x, y, width) => {
-                    animatedX.value = withSpring(x, springSettings);
-                    animatedY.value = withSpring(y, springSettings);
-                    animatedWidth.value = width;
-                }, onPress: () => setActiveSegment(segment), onLayout: (width, height, x, y) => {
-                    if (activeSegment.key === segment.key) {
-                        animatedX.value = x;
-                        animatedY.value = y;
-                        animatedHeight.value = height;
+        borderRadius: theme.border.radius['2xl'],
+        backgroundColor: theme.color.surface.bright,
+    }); }, [animatedX, animatedY, animatedWidth, animatedHeight]);
+    return ((0, jsx_runtime_1.jsxs)(SegmentsContainer, __assign({ "$inline": inline, "$multipleRows": multipleRows }, rest, { children: [(0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: animatedBackgroundStyle }), segments.map(function (segment) {
+                var _a, _b;
+                return ((0, jsx_runtime_1.jsx)(SegmentButton_1.SegmentButton, { isSelected: activeSegment.key === segment.key, label: segment.label, accessibilityLabel: segment.accessibilityLabel, accessibilityHint: segment.accessibilityHint, setAnimatedValues: function (x, y, width) {
+                        animatedX.value = (0, react_native_reanimated_1.withSpring)(x, springSettings);
+                        animatedY.value = (0, react_native_reanimated_1.withSpring)(y, springSettings);
                         animatedWidth.value = width;
-                    }
-                }, multipleRows: multipleRows, size: size, inline: inline, testID: `${rest.testID ?? 'segment'}-${segment.key}`, segmentCount: segments.length ?? 0 }, segment.key)))] }));
+                    }, onPress: function () { return setActiveSegment(segment); }, onLayout: function (width, height, x, y) {
+                        if (activeSegment.key === segment.key) {
+                            animatedX.value = x;
+                            animatedY.value = y;
+                            animatedHeight.value = height;
+                            animatedWidth.value = width;
+                        }
+                    }, multipleRows: multipleRows, size: size, inline: inline, testID: "".concat((_a = rest.testID) !== null && _a !== void 0 ? _a : 'segment', "-").concat(segment.key), segmentCount: (_b = segments.length) !== null && _b !== void 0 ? _b : 0 }, segment.key));
+            })] })));
 };
-const SegmentsContainer = styled.View(({ theme: { core, semantic }, $inline, $multipleRows }) => `
-  flex-direction: row;
-  flex-wrap: ${$multipleRows ? '' : 'no-'}wrap;
-  justify-content: ${$multipleRows ? 'space-between' : 'space-around'};
-  align-items: center;
-  width: ${$inline ? 'auto' : '100%'};
-  align-self: ${$inline ? 'flex-start' : 'stretch'};
-  padding: ${core.space[1]}px;
-  background-color: ${semantic.surface.cutout};
-  border-radius: ${core.radius.max}px;
-`);
+exports.SegmentedControls = SegmentedControls;
+var SegmentsContainer = styled_native_1.default.View(function (_a) {
+    var theme = _a.theme, $inline = _a.$inline, $multipleRows = _a.$multipleRows;
+    return "\n  flex-direction: row;\n  flex-wrap: ".concat($multipleRows ? '' : 'no-', "wrap;\n  justify-content: ").concat($multipleRows ? 'space-between' : 'space-around', ";\n  align-items: center;\n  width: ").concat($inline ? 'auto' : '100%', ";\n  align-self: ").concat($inline ? 'flex-start' : 'stretch', ";\n  padding: ").concat(theme.space[100], "px;\n  background-color: ").concat(theme.color.surface.dim, ";\n  border-radius: ").concat(theme.border.radius['2xl'], "px;\n");
+});

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

@@ -1,4 +1,3 @@
-import { type JSX } from 'react';
 type SegmentButtonProps = {
     isSelected: boolean;
     label: string;

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

@@ -1,78 +1,119 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef } from 'react';
-import { Pressable, useWindowDimensions, } from 'react-native';
-import Animated, { useAnimatedStyle, useSharedValue, withTiming, } from 'react-native-reanimated';
-import styled from '../../../styled.native';
-import { P } from '../../P';
-const AnimatedP = Animated.createAnimatedComponent(P);
-const textSizeProps = {
+"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 __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.SegmentButton = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var react_native_1 = require("react-native");
+var react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
+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 textSizeProps = {
     numberOfLines: 1,
     adjustsFontSizeToFit: true,
     minimumFontScale: 0.95,
     maxFontSizeMultiplier: 1.75,
 };
-export const SegmentButton = ({ accessibilityLabel, accessibilityHint, inline, isSelected, label, multipleRows, onLayout, onPress, setAnimatedValues, segmentCount, size = 'large', testID, }) => {
-    const xRef = useRef(0);
-    const yRef = useRef(0);
-    const widthRef = useRef(0);
-    const heightRef = useRef(0);
-    const hitslopVal = size === 'small' ? 8 : 4;
-    const fontScale = useWindowDimensions().fontScale;
-    const fontWeightAnim = useSharedValue(isSelected ? 1 : 0);
-    const animatedStyleNormal = useAnimatedStyle(() => {
+var SegmentButton = function (_a) {
+    var accessibilityLabel = _a.accessibilityLabel, accessibilityHint = _a.accessibilityHint, inline = _a.inline, isSelected = _a.isSelected, label = _a.label, multipleRows = _a.multipleRows, onLayout = _a.onLayout, onPress = _a.onPress, setAnimatedValues = _a.setAnimatedValues, segmentCount = _a.segmentCount, _b = _a.size, size = _b === void 0 ? 'large' : _b, testID = _a.testID;
+    var xRef = (0, react_1.useRef)(0);
+    var yRef = (0, react_1.useRef)(0);
+    var widthRef = (0, react_1.useRef)(0);
+    var heightRef = (0, react_1.useRef)(0);
+    var hitslopVal = size === 'small' ? 8 : 4;
+    var fontScale = (0, react_native_1.useWindowDimensions)().fontScale;
+    var fontWeightAnim = (0, react_native_reanimated_1.useSharedValue)(isSelected ? 1 : 0);
+    var animatedStyleNormal = (0, react_native_reanimated_1.useAnimatedStyle)(function () {
         return {
             opacity: 1 - fontWeightAnim.value,
             position: 'absolute',
         };
     }, [fontWeightAnim]);
-    const animatedStyleBold = useAnimatedStyle(() => {
+    var animatedStyleBold = (0, react_native_reanimated_1.useAnimatedStyle)(function () {
         return {
             opacity: fontWeightAnim.value,
             position: 'absolute',
         };
     }, [fontWeightAnim]);
-    useEffect(() => {
-        fontWeightAnim.value = withTiming(isSelected ? 1 : 0);
+    (0, react_1.useEffect)(function () {
+        fontWeightAnim.value = (0, react_native_reanimated_1.withTiming)(isSelected ? 1 : 0);
     }, [fontWeightAnim, isSelected]);
-    useEffect(() => {
+    (0, react_1.useEffect)(function () {
         if (!isSelected) {
             return;
         }
         setAnimatedValues(xRef.current, yRef.current, widthRef.current);
     }, [isSelected]);
-    const handleLayout = (event) => {
-        const { width, height, x, y } = event.nativeEvent.layout;
+    var handleLayout = function (event) {
+        var _a = event.nativeEvent.layout, width = _a.width, height = _a.height, x = _a.x, y = _a.y;
         xRef.current = x;
         // (adrian.pop) - I couldn't figure out how to make the positioning work once the
         // choices go on the second row. The only way I could get it to work
         // was to hardcode the denominator to 3 for the single row ones
         // and 1.1 for the multiple row ones.
-        yRef.current = y - height / ((multipleRows ? 2.5 : 3) * fontScale);
+        yRef.current = y - height / (multipleRows ? 1.1 : 3 * fontScale);
         heightRef.current = height;
         widthRef.current = width;
         onLayout(width, height, x, yRef.current);
     };
-    return (_jsx(Pressable, { onLayout: handleLayout, onPress: onPress, accessible: true, accessibilityRole: "checkbox", accessibilityState: { checked: isSelected }, accessibilityLabel: accessibilityLabel || label, accessibilityHint: accessibilityHint, hitSlop: {
+    return ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { onLayout: handleLayout, onPress: onPress, accessible: true, accessibilityRole: "checkbox", accessibilityState: { checked: isSelected }, accessibilityLabel: accessibilityLabel || label, accessibilityHint: accessibilityHint, hitSlop: {
             top: hitslopVal,
             bottom: hitslopVal,
         }, style: {
             flexGrow: inline || multipleRows ? undefined : 1,
-            width: inline || multipleRows ? 'auto' : `${100 / segmentCount}%`,
-        }, testID: testID, children: _jsxs(SSegmentsWrapper, { "$isSelected": isSelected, "$size": size, multiline: multipleRows, children: [_jsx(SSegmentText, { style: {
+            width: inline || multipleRows ? 'auto' : "".concat(100 / segmentCount, "%"),
+        }, testID: testID, children: (0, jsx_runtime_1.jsxs)(SSegmentsWrapper, { "$isSelected": isSelected, "$size": size, multiline: multipleRows, children: [(0, jsx_runtime_1.jsx)(SSegmentText, __assign({ style: {
                         opacity: 0,
                         fontWeight: '900',
-                    }, "$isSelected": false, ...textSizeProps, children: label }), _jsx(SSegmentText, { style: animatedStyleNormal, "$isSelected": false, ...textSizeProps, children: label }), _jsx(SSegmentText, { style: animatedStyleBold, "$isSelected": true, ...textSizeProps, children: label })] }) }));
+                    }, "$isSelected": false }, textSizeProps, { children: label })), (0, jsx_runtime_1.jsx)(SSegmentText, __assign({ style: animatedStyleNormal, "$isSelected": false }, textSizeProps, { children: label })), (0, jsx_runtime_1.jsx)(SSegmentText, __assign({ style: animatedStyleBold, "$isSelected": true }, textSizeProps, { children: label }))] }) }));
 };
-const SSegmentsWrapper = styled.View(({ theme, $size, multiline }) => `
-  ${multiline
-    ? `padding: 4px ${theme.core.space[$size === 'small' ? 4 : 6]}px;`
-    : `padding: ${$size === 'small' ? 2 : 8}px ${theme.core.space[$size === 'small' ? 3 : 4]}px;`}
-  align-items: center;
-  justify-content: center;
-`);
-const SSegmentText = styled(AnimatedP)(({ $isSelected, theme }) => `
-    font-family: ${$isSelected
-    ? theme.core.fontFamily.bodyBold.native
-    : theme.core.fontFamily.body.native};
-    color: ${theme.semantic.message.base};
-  `);
+exports.SegmentButton = SegmentButton;
+var SSegmentsWrapper = styled_native_1.default.View(function (_a) {
+    var theme = _a.theme, $size = _a.$size, multiline = _a.multiline;
+    return "\n  ".concat(multiline
+        ? "padding: 4px ".concat(theme.space[$size === 'small' ? 400 : 600], "px;")
+        : "padding: ".concat($size === 'small' ? 2 : 8, "px ").concat(theme.space[$size === 'small' ? 300 : 400], "px;"), "\n  align-items: center;\n  justify-content: center;\n");
+});
+var SSegmentText = (0, styled_native_1.default)(AnimatedP)(function (_a) {
+    var $isSelected = _a.$isSelected, theme = _a.theme;
+    return "\n    font-family: ".concat($isSelected
+        ? theme.native.font.family.bold
+        : theme.native.font.family.book, ";\n    color: ").concat(theme.color.surface.onSurface, ";\n  ");
+});

package/dist/components/SegmentedControls/index.js

@@ -1,2 +1,5 @@
-import { SegmentedControls } from './SegmentedControls';
-export { SegmentedControls };
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SegmentedControls = void 0;
+var SegmentedControls_1 = require("./SegmentedControls");
+Object.defineProperty(exports, "SegmentedControls", { enumerable: true, get: function () { return SegmentedControls_1.SegmentedControls; } });