@tactics/toddle-styleguide 5.4.45 → 5.4.46

package/babel.config.js

@@ -15,6 +15,8 @@ module.exports = function (api) {
         },
       ],
     ],
-    plugins: [],
+    plugins: [
+      'react-native-reanimated/plugin',
+    ],
   };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tactics/toddle-styleguide",
-  "version": "5.4.45",
+  "version": "5.4.46",
   "main": "index.tsx",
   "types": "index.d.ts",
   "prepublish": "tsc",
@@ -64,7 +64,9 @@
     "react-native-web": "~0.21.0",
     "react-native-wheel-picker-expo": "^0.5.4",
     "react-native-wheely": "^0.6.0",
-    "typescript": "~5.9.3"
+    "typescript": "~5.9.3",
+    "react-native-reanimated": "~4.1.6",
+    "react-native-worklets": "0.5.1"
   },
   "resolutions": {
     "@react-native-picker/picker": "2.11.1"
@@ -82,11 +84,12 @@
   },
   "scripts": {
     "preinstall": "npx only-allow pnpm",
-    "start": "./node_modules/.bin/tsc && ./node_modules/.bin/expo start",
+    "start": "./node_modules/.bin/tsc && ./node_modules/.bin/expo start -c",
     "format": "./node_modules/.bin/prettier --write src/.",
     "types": "./node_modules/.bin/tsc index.tsx --declaration --allowJs --emitDeclarationOnly --esModuleInterop --jsx react-native --skipLibCheck --target es5",
-    "android": "expo run:android",
-    "ios": "expo run:ios",
+    "prebuild": "npx expo prebuild --clean",
+    "android": "npx expo run:android",
+    "ios": "npx expo run:ios",
     "release:patch": "pnpm version patch --git-tag-version=false",
     "release:minor": "pnpm version minor --git-tag-version=false",
     "release:major": "pnpm version major --git-tag-version=false"

package/src/components/atoms/backdrop/backdrop.component.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {useContext, useMemo} from 'react';
+import {useContext, useEffect, useRef} from 'react';
 
 import {ThemeCtx} from '../../../context/theme.context';
 import {Animated} from 'react-native';
@@ -12,34 +12,24 @@ type PopoverBackdropProps = {
 
 const Backdrop = ({isVisible, touchBackDrop}: PopoverBackdropProps) => {
   const context = useContext(ThemeCtx);
-  const opacity = useMemo(() => new Animated.Value(0), []);
+  const opacity = useRef(new Animated.Value(0)).current;
 
   const styles = Stylesheet(context);
 
-  const open = () => {
+  useEffect(() => {
     Animated.timing(opacity, {
-      toValue: 0.75,
-      duration: 80,
+      toValue: isVisible ? 0.75 : 0,
+      duration: isVisible ? 120 : 300,
       useNativeDriver: true,
     }).start();
-  };
-
-  const close = () => {
-    Animated.timing(opacity, {
-      toValue: 0,
-      duration: 600,
-      useNativeDriver: true,
-    }).start();
-  };
-
-  if (isVisible) {
-    open();
-  } else {
-    close();
-  }
+  }, [isVisible, opacity]);
 
   return (
     <Animated.View
+      accessible={true}
+      accessibilityRole="button"
+      accessibilityLabel="Close modal"
+      onAccessibilityTap={() => (touchBackDrop ? touchBackDrop(false) : null)}
       onTouchStart={() => (touchBackDrop ? touchBackDrop(false) : null)}
       style={[styles.element, {opacity: opacity}]}
     />

package/src/components/atoms/check-switch/check-switch.component.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {useContext, useRef} from 'react';
+import {useContext, useEffect, useRef} from 'react';
 
 import {View, Animated, Pressable, Easing} from 'react-native';
 import {ThemeCtx} from '../../../context/theme.context';
@@ -21,12 +21,14 @@ export const Check = ({value, onToggle}: CheckProps) => {
     outputRange: [0, 27],
   });
 
-  Animated.timing(positionButton, {
-    toValue: value ? 1 : 0,
-    duration: 200,
-    easing: Easing.linear,
-    useNativeDriver: true,
-  }).start();
+  useEffect(() => {
+    Animated.timing(positionButton, {
+      toValue: value ? 1 : 0,
+      duration: 200,
+      easing: Easing.linear,
+      useNativeDriver: true,
+    }).start();
+  }, [value, positionButton]);
 
   const animatedStyle = {
     transform: [
@@ -38,7 +40,13 @@ export const Check = ({value, onToggle}: CheckProps) => {
 
   return (
     <View style={styles.container}>
-      <Pressable onPress={onToggle}>
+      <Pressable
+        onPress={onToggle}
+        accessible={true}
+        accessibilityRole="switch"
+        accessibilityState={{ checked: value }}
+        accessibilityLabel="Toggle"
+      >
         <View style={styles.toggleContainer}>
           <Animated.View style={[styles.thumbStyle, animatedStyle]} />
         </View>

package/src/components/templates/popover/components/modal/modal.component.d.ts

@@ -6,7 +6,7 @@ type PopoverModalProps = {
     isVisible: boolean;
     children: React.ReactNode;
     windowHeight: number;
-    disableSrollContent?: boolean;
+    disableScrollContent?: boolean;
 };
-declare const Modal: ({ isVisible, title, subtitle, onClose, children, windowHeight, disableSrollContent, }: PopoverModalProps) => React.JSX.Element;
+declare const Modal: ({ isVisible, title, subtitle, onClose, children, windowHeight, disableScrollContent, }: PopoverModalProps) => React.JSX.Element;
 export { Modal as Modal };

package/src/components/templates/popover/components/modal/modal.component.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {useContext, useMemo, useState} from 'react';
+import {useContext, useEffect, useRef, useState} from 'react';
 import {Animated, View} from 'react-native';
 import {Stylesheet} from './modal.styles';
 import {Close} from './close/close.component';
@@ -14,7 +14,7 @@ type PopoverModalProps = {
   isVisible: boolean;
   children: React.ReactNode;
   windowHeight: number;
-  disableSrollContent?: boolean;
+  disableScrollContent?: boolean;
 };
 
 const Modal = ({
@@ -24,7 +24,7 @@ const Modal = ({
   onClose,
   children,
   windowHeight,
-  disableSrollContent,
+  disableScrollContent,
 }: PopoverModalProps) => {
   // Keep element and window size in local state.
   const [elementSize, setElementSize] = useState({width: 0, height: 0});
@@ -40,32 +40,23 @@ const Modal = ({
 
   const saveHeight = elementHeight > maxHeight ? maxHeight : elementHeight;
 
-  const translateY = useMemo(
-    () => new Animated.Value(translateYStartingPoint),
-    [translateYStartingPoint]
-  );
-
-  const open = () => {
-    Animated.timing(translateY, {
-      toValue: translateYStartingPoint - saveHeight,
-      duration: 500,
-      useNativeDriver: true,
-    }).start();
-  };
+  const translateY = useRef(new Animated.Value(translateYStartingPoint)).current;
 
-  const close = () => {
+  // Animate when visibility changes
+  useEffect(() => {
     Animated.timing(translateY, {
-      toValue: translateYStartingPoint,
+      toValue: isVisible ? translateYStartingPoint - saveHeight : translateYStartingPoint,
       duration: 500,
       useNativeDriver: true,
     }).start();
-  };
+  }, [isVisible, saveHeight, translateYStartingPoint, translateY]);
 
-  if (isVisible) {
-    open();
-  } else {
-    close();
-  }
+  // If height changes while visible, jump to new position without replaying from bottom
+  useEffect(() => {
+    if (!isVisible) return;
+    // @ts-ignore setValue exists on Animated.Value
+    translateY.setValue(translateYStartingPoint - saveHeight);
+  }, [saveHeight, translateYStartingPoint, isVisible, translateY]);
 
   const transform = [{translateY: translateY}];
 
@@ -76,11 +67,14 @@ const Modal = ({
         const {width, height} = event.nativeEvent.layout;
         setElementSize({width: width, height: height});
       }}
+      accessibilityViewIsModal={true}
+      importantForAccessibility="yes"
+      accessibilityLabel={title}
     >
       <Close onPress={onClose} />
       <Animated.View style={styles.inner}>
         {title ? <Heading title={title} subtitle={subtitle} /> : null}
-        {disableSrollContent ? (
+        {disableScrollContent ? (
           <View>{children}</View>
         ) : (
           <ScrollContent>{children}</ScrollContent>

package/src/components/templates/popover/popover.component.tsx

@@ -56,7 +56,7 @@ const Popover = ({
           onClose={onClose}
           title={title}
           subtitle={subtitle}
-          disableSrollContent={disableScrollContent}
+          disableScrollContent={disableScrollContent}
         >
           {children}
         </Modal>

package/src/components/templates/popover-action/popover-action.component.tsx

@@ -115,14 +115,11 @@ export const PopOverAction = ({
   const styles = Stylesheet(context);
 
   const elementHeight = Math.round(elementSize.height);
-  const maxHeight = Math.round(windowHeight * 0.8);
+  const maxHeight = Math.round(windowHeight * 0.9);
   const translateYStartingPoint = windowHeight;
   const saveHeight = elementHeight > maxHeight ? maxHeight : elementHeight;
 
-  const translateY = useMemo(
-    () => new Animated.Value(translateYStartingPoint),
-    [translateYStartingPoint]
-  );
+  const translateY = React.useRef(new Animated.Value(translateYStartingPoint)).current;
 
   const open = () => {
     Animated.timing(translateY, {
@@ -143,7 +140,17 @@ export const PopOverAction = ({
   useEffect(() => {
     if (isVisible) open();
     else close();
-  }, [isVisible, saveHeight]);
+  }, [isVisible]);
+
+  // When the content height changes while the popover is open, adjust the position
+  // instantly to match the new height instead of replaying the open animation.
+  useEffect(() => {
+    if (!isVisible) return;
+    // Jump to the new position without animating from the bottom again
+    translateY.stopAnimation?.(() => {});
+    // @ts-ignore - setValue exists on Animated.Value
+    translateY.setValue(translateYStartingPoint - saveHeight);
+  }, [saveHeight, isVisible, translateYStartingPoint]);
 
   const transform = [{ translateY }];
 
@@ -153,13 +160,12 @@ export const PopOverAction = ({
       pointerEvents={isVisible ? 'box-none' : 'none'}
     >
       <Backdrop isVisible={isVisible} touchBackDrop={touchBackDrop} />
-
       <Animated.View
-        style={[
-          styles.slidePanelContainer,
-          { maxHeight },
-          { transform },
-        ]}
+        style={[styles.slidePanelContainer, {maxHeight: maxHeight}, {transform: transform}]}
+        onLayout={(event) => {
+          const {width, height} = event.nativeEvent.layout;
+          setElementSize({width: width, height: height});
+        }}
       >
         <Swipe onIndexChange={handleChildIndexChange}>
           {renderChildrenWithLayout(children, handleChildLayout)}