react-native-ui-lib 7.43.0 → 7.44.0-snapshot.7204

package/src/components/stackAggregator/index.js

@@ -25,6 +25,7 @@ const StackAggregator = props => {
     collapsed = true,
     disablePresses = false,
     onItemPress,
+    backgroundColor,
     contentContainerStyle,
     itemBorderRadius = 0,
     onCollapseWillChange,
@@ -36,11 +37,11 @@ const StackAggregator = props => {
   useEffect(() => {
     setIsCollapsed(collapsed);
   }, [collapsed]);
-  useDidUpdate(() => {
+  useDidUpdate(async () => {
     onCollapseWillChange?.(isCollapsed);
-    animate();
+    await animate();
     onCollapseChanged?.(isCollapsed);
-  }, [isCollapsed, onCollapseWillChange, onCollapseChanged]);
+  }, [isCollapsed, itemsCount]);
 
   /** Animations */
 
@@ -52,10 +53,10 @@ const StackAggregator = props => {
   const easeOut = Easing.bezier(0, 0, 0.58, 1);
   const getItemScale = useCallback(index => {
     if (isCollapsed) {
-      if (index === itemsCount - 2) {
+      if (index === 1) {
         return 0.95;
       }
-      if (index === itemsCount - 1) {
+      if (index === 2) {
         return 0.9;
       }
     }
@@ -123,10 +124,10 @@ const StackAggregator = props => {
 
   const getTop = index => {
     let start = 0;
-    if (index === itemsCount - 2) {
+    if (index === 1) {
       start += PEEP;
     }
-    if (index === itemsCount - 1) {
+    if (index === 2) {
       start += PEEP * 2;
     }
     return start;
@@ -149,6 +150,11 @@ const StackAggregator = props => {
       zIndex: itemsCount
     }];
   }, [firstItemHeight, itemsCount]);
+  const cardStyle = useMemo(() => {
+    return backgroundColor ? [styles.card, {
+      backgroundColor
+    }] : styles.card;
+  }, [backgroundColor]);
 
   /** Events */
 
@@ -167,7 +173,7 @@ const StackAggregator = props => {
   /** Renders */
 
   const renderItem = (item, index) => {
-    return <Animated.View onLayout={index === 0 ? onLayout : undefined} style={[Constants.isIOS && styles.containerShadow, contentContainerStyle,
+    return <Animated.View onLayout={index === 0 ? onLayout : undefined} style={[Constants.isIOS && (index === 0 || index === 1 || index === 2 || !isCollapsed) && styles.containerShadow, contentContainerStyle,
     //@ts-expect-error 'position' doesn't match AnimatedInterpolation type
     getItemStyle(index), {
       borderRadius: Constants.isIOS ? itemBorderRadius : undefined,
@@ -179,7 +185,7 @@ const StackAggregator = props => {
       width: Constants.windowWidth - 40,
       height: isCollapsed ? firstItemHeight : undefined
     }]} collapsable={false}>
-        <Card style={styles.card} onPress={() => _onItemPress(index)} borderRadius={itemBorderRadius} elevation={5}>
+        <Card style={cardStyle} onPress={() => _onItemPress(index)} borderRadius={itemBorderRadius} elevation={5}>
           <Animated.View style={index !== 0 ? {
           opacity: animatedContentOpacity
         } : undefined} collapsable={false}>
@@ -231,8 +237,7 @@ const styles = StyleSheet.create({
   },
   card: {
     overflow: 'hidden',
-    flexShrink: 1,
-    backgroundColor: 'transparent'
+    flexShrink: 1
   },
   button: {
     zIndex: 100

package/src/components/textField/Input.js

@@ -81,7 +81,6 @@ const styles = StyleSheet.create({
     })
   },
   webStyle: {
-    // @ts-expect-error
     outlineWidth: 0
   }
 });

package/src/components/textField/presets/outline.d.ts

@@ -36,7 +36,7 @@ declare const _default: {
         fontFamily?: string | undefined;
         fontSize?: number | undefined;
         fontStyle?: "normal" | "italic" | undefined;
-        fontWeight?: "normal" | "bold" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | undefined;
+        fontWeight?: "black" | 900 | 600 | "light" | 100 | "normal" | "bold" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | 200 | 300 | 400 | 500 | 700 | 800 | "ultralight" | "thin" | "medium" | "regular" | "semibold" | "condensedBold" | "condensed" | "heavy" | undefined;
         letterSpacing?: number | undefined;
         textAlign?: "auto" | "left" | "right" | "center" | "justify" | undefined;
         textDecorationLine?: "none" | "underline" | "line-through" | "underline line-through" | undefined;
@@ -58,31 +58,41 @@ declare const _default: {
         borderBlockEndColor?: import("react-native").ColorValue | undefined;
         borderBlockStartColor?: import("react-native").ColorValue | undefined;
         borderBottomColor?: import("react-native").ColorValue | undefined;
-        borderBottomEndRadius?: import("react-native").AnimatableNumericValue | undefined;
-        borderBottomLeftRadius?: import("react-native").AnimatableNumericValue | undefined;
-        borderBottomRightRadius?: import("react-native").AnimatableNumericValue | undefined;
-        borderBottomStartRadius?: import("react-native").AnimatableNumericValue | undefined;
+        borderBottomEndRadius?: string | import("react-native").AnimatableNumericValue | undefined;
+        borderBottomLeftRadius?: string | import("react-native").AnimatableNumericValue | undefined;
+        borderBottomRightRadius?: string | import("react-native").AnimatableNumericValue | undefined;
+        borderBottomStartRadius?: string | import("react-native").AnimatableNumericValue | undefined;
         borderColor?: import("react-native").ColorValue | undefined;
         borderCurve?: "circular" | "continuous" | undefined;
         borderEndColor?: import("react-native").ColorValue | undefined;
-        borderEndEndRadius?: import("react-native").AnimatableNumericValue | undefined;
-        borderEndStartRadius?: import("react-native").AnimatableNumericValue | undefined;
+        borderEndEndRadius?: string | import("react-native").AnimatableNumericValue | undefined;
+        borderEndStartRadius?: string | import("react-native").AnimatableNumericValue | undefined;
         borderLeftColor?: import("react-native").ColorValue | undefined;
-        borderRadius?: import("react-native").AnimatableNumericValue | undefined;
+        borderRadius?: string | import("react-native").AnimatableNumericValue | undefined;
         borderRightColor?: import("react-native").ColorValue | undefined;
         borderStartColor?: import("react-native").ColorValue | undefined;
-        borderStartEndRadius?: import("react-native").AnimatableNumericValue | undefined;
-        borderStartStartRadius?: import("react-native").AnimatableNumericValue | undefined;
+        borderStartEndRadius?: string | import("react-native").AnimatableNumericValue | undefined;
+        borderStartStartRadius?: string | import("react-native").AnimatableNumericValue | undefined;
         borderStyle?: "solid" | "dotted" | "dashed" | undefined;
         borderTopColor?: import("react-native").ColorValue | undefined;
-        borderTopEndRadius?: import("react-native").AnimatableNumericValue | undefined;
-        borderTopLeftRadius?: import("react-native").AnimatableNumericValue | undefined;
-        borderTopRightRadius?: import("react-native").AnimatableNumericValue | undefined;
-        borderTopStartRadius?: import("react-native").AnimatableNumericValue | undefined;
+        borderTopEndRadius?: string | import("react-native").AnimatableNumericValue | undefined;
+        borderTopLeftRadius?: string | import("react-native").AnimatableNumericValue | undefined;
+        borderTopRightRadius?: string | import("react-native").AnimatableNumericValue | undefined;
+        borderTopStartRadius?: string | import("react-native").AnimatableNumericValue | undefined;
+        outlineColor?: import("react-native").ColorValue | undefined;
+        outlineOffset?: import("react-native").AnimatableNumericValue | undefined;
+        outlineStyle?: "solid" | "dotted" | "dashed" | undefined;
+        outlineWidth?: import("react-native").AnimatableNumericValue | undefined;
         opacity?: import("react-native").AnimatableNumericValue | undefined;
         elevation?: number | undefined;
         pointerEvents?: "auto" | "none" | "box-none" | "box-only" | undefined;
-        alignContent?: "center" | "flex-start" | "flex-end" | "stretch" | "space-between" | "space-around" | undefined;
+        isolation?: "auto" | "isolate" | undefined;
+        cursor?: import("react-native").CursorValue | undefined;
+        boxShadow?: string | readonly import("react-native").BoxShadowValue[] | undefined;
+        filter?: string | readonly import("react-native").FilterFunction[] | undefined;
+        mixBlendMode?: import("react-native").BlendMode | undefined;
+        experimental_backgroundImage?: string | readonly import("react-native").GradientValue[] | undefined;
+        alignContent?: "center" | "flex-start" | "flex-end" | "stretch" | "space-between" | "space-around" | "space-evenly" | undefined;
         alignItems?: import("react-native").FlexAlignType | undefined;
         alignSelf?: "auto" | import("react-native").FlexAlignType | undefined;
         aspectRatio?: string | number | undefined;
@@ -94,14 +104,15 @@ declare const _default: {
         borderTopWidth?: number | undefined;
         borderWidth?: number | undefined;
         bottom?: import("react-native").DimensionValue | undefined;
-        display?: "none" | "flex" | undefined;
+        boxSizing?: "border-box" | "content-box" | undefined;
+        display?: "none" | "flex" | "contents" | undefined;
         end?: import("react-native").DimensionValue | undefined;
         flex?: number | undefined;
         flexBasis?: import("react-native").DimensionValue | undefined;
         flexDirection?: "row" | "column" | "row-reverse" | "column-reverse" | undefined;
-        rowGap?: number | undefined;
-        gap?: number | undefined;
-        columnGap?: number | undefined;
+        rowGap?: string | number | undefined;
+        gap?: string | number | undefined;
+        columnGap?: string | number | undefined;
         flexGrow?: number | undefined;
         flexShrink?: number | undefined;
         flexWrap?: "wrap" | "nowrap" | "wrap-reverse" | undefined;
@@ -130,13 +141,32 @@ declare const _default: {
         paddingStart?: import("react-native").DimensionValue | undefined;
         paddingTop?: import("react-native").DimensionValue | undefined;
         paddingVertical?: import("react-native").DimensionValue | undefined;
-        position?: "absolute" | "relative" | undefined;
+        position?: "absolute" | "relative" | "static" | undefined;
         right?: import("react-native").DimensionValue | undefined;
         start?: import("react-native").DimensionValue | undefined;
         top?: import("react-native").DimensionValue | undefined;
         width?: import("react-native").DimensionValue | undefined;
         zIndex?: number | undefined;
         direction?: "ltr" | "rtl" | "inherit" | undefined;
+        inset?: import("react-native").DimensionValue | undefined;
+        insetBlock?: import("react-native").DimensionValue | undefined;
+        insetBlockEnd?: import("react-native").DimensionValue | undefined;
+        insetBlockStart?: import("react-native").DimensionValue | undefined;
+        insetInline?: import("react-native").DimensionValue | undefined;
+        insetInlineEnd?: import("react-native").DimensionValue | undefined;
+        insetInlineStart?: import("react-native").DimensionValue | undefined;
+        marginBlock?: import("react-native").DimensionValue | undefined;
+        marginBlockEnd?: import("react-native").DimensionValue | undefined;
+        marginBlockStart?: import("react-native").DimensionValue | undefined;
+        marginInline?: import("react-native").DimensionValue | undefined;
+        marginInlineEnd?: import("react-native").DimensionValue | undefined;
+        marginInlineStart?: import("react-native").DimensionValue | undefined;
+        paddingBlock?: import("react-native").DimensionValue | undefined;
+        paddingBlockEnd?: import("react-native").DimensionValue | undefined;
+        paddingBlockStart?: import("react-native").DimensionValue | undefined;
+        paddingInline?: import("react-native").DimensionValue | undefined;
+        paddingInlineEnd?: import("react-native").DimensionValue | undefined;
+        paddingInlineStart?: import("react-native").DimensionValue | undefined;
         shadowColor?: import("react-native").ColorValue | undefined;
         shadowOffset?: Readonly<{
             width: number;
@@ -144,7 +174,7 @@ declare const _default: {
         }> | undefined;
         shadowOpacity?: import("react-native").AnimatableNumericValue | undefined;
         shadowRadius?: number | undefined;
-        transform?: string | (({
+        transform?: string | readonly (({
             perspective: import("react-native").AnimatableNumericValue;
         } & {
             rotate?: undefined;
@@ -265,7 +295,7 @@ declare const _default: {
             skewY?: undefined;
             matrix?: undefined;
         }) | ({
-            translateX: import("react-native").AnimatableNumericValue;
+            translateX: import("react-native").AnimatableNumericValue | `${number}%`;
         } & {
             perspective?: undefined;
             rotate?: undefined;
@@ -280,7 +310,7 @@ declare const _default: {
             skewY?: undefined;
             matrix?: undefined;
         }) | ({
-            translateY: import("react-native").AnimatableNumericValue;
+            translateY: import("react-native").AnimatableNumericValue | `${number}%`;
         } & {
             perspective?: undefined;
             rotate?: undefined;
@@ -356,7 +386,7 @@ declare const _default: {
         fontFamily?: string | undefined;
         fontSize?: number | undefined;
         fontStyle?: "normal" | "italic" | undefined;
-        fontWeight?: "normal" | "bold" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | undefined;
+        fontWeight?: "black" | 900 | 600 | "light" | 100 | "normal" | "bold" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | 200 | 300 | 400 | 500 | 700 | 800 | "ultralight" | "thin" | "medium" | "regular" | "semibold" | "condensedBold" | "condensed" | "heavy" | undefined;
         letterSpacing?: number | undefined;
         lineHeight?: number | undefined;
         textAlign?: "auto" | "left" | "right" | "center" | "justify" | undefined;
@@ -379,31 +409,41 @@ declare const _default: {
         borderBlockEndColor?: import("react-native").ColorValue | undefined;
         borderBlockStartColor?: import("react-native").ColorValue | undefined;
         borderBottomColor?: import("react-native").ColorValue | undefined;
-        borderBottomEndRadius?: import("react-native").AnimatableNumericValue | undefined;
-        borderBottomLeftRadius?: import("react-native").AnimatableNumericValue | undefined;
-        borderBottomRightRadius?: import("react-native").AnimatableNumericValue | undefined;
-        borderBottomStartRadius?: import("react-native").AnimatableNumericValue | undefined;
+        borderBottomEndRadius?: string | import("react-native").AnimatableNumericValue | undefined;
+        borderBottomLeftRadius?: string | import("react-native").AnimatableNumericValue | undefined;
+        borderBottomRightRadius?: string | import("react-native").AnimatableNumericValue | undefined;
+        borderBottomStartRadius?: string | import("react-native").AnimatableNumericValue | undefined;
         borderColor?: import("react-native").ColorValue | undefined;
         borderCurve?: "circular" | "continuous" | undefined;
         borderEndColor?: import("react-native").ColorValue | undefined;
-        borderEndEndRadius?: import("react-native").AnimatableNumericValue | undefined;
-        borderEndStartRadius?: import("react-native").AnimatableNumericValue | undefined;
+        borderEndEndRadius?: string | import("react-native").AnimatableNumericValue | undefined;
+        borderEndStartRadius?: string | import("react-native").AnimatableNumericValue | undefined;
         borderLeftColor?: import("react-native").ColorValue | undefined;
-        borderRadius?: import("react-native").AnimatableNumericValue | undefined;
+        borderRadius?: string | import("react-native").AnimatableNumericValue | undefined;
         borderRightColor?: import("react-native").ColorValue | undefined;
         borderStartColor?: import("react-native").ColorValue | undefined;
-        borderStartEndRadius?: import("react-native").AnimatableNumericValue | undefined;
-        borderStartStartRadius?: import("react-native").AnimatableNumericValue | undefined;
+        borderStartEndRadius?: string | import("react-native").AnimatableNumericValue | undefined;
+        borderStartStartRadius?: string | import("react-native").AnimatableNumericValue | undefined;
         borderStyle?: "solid" | "dotted" | "dashed" | undefined;
         borderTopColor?: import("react-native").ColorValue | undefined;
-        borderTopEndRadius?: import("react-native").AnimatableNumericValue | undefined;
-        borderTopLeftRadius?: import("react-native").AnimatableNumericValue | undefined;
-        borderTopRightRadius?: import("react-native").AnimatableNumericValue | undefined;
-        borderTopStartRadius?: import("react-native").AnimatableNumericValue | undefined;
+        borderTopEndRadius?: string | import("react-native").AnimatableNumericValue | undefined;
+        borderTopLeftRadius?: string | import("react-native").AnimatableNumericValue | undefined;
+        borderTopRightRadius?: string | import("react-native").AnimatableNumericValue | undefined;
+        borderTopStartRadius?: string | import("react-native").AnimatableNumericValue | undefined;
+        outlineColor?: import("react-native").ColorValue | undefined;
+        outlineOffset?: import("react-native").AnimatableNumericValue | undefined;
+        outlineStyle?: "solid" | "dotted" | "dashed" | undefined;
+        outlineWidth?: import("react-native").AnimatableNumericValue | undefined;
         opacity?: import("react-native").AnimatableNumericValue | undefined;
         elevation?: number | undefined;
         pointerEvents?: "auto" | "none" | "box-none" | "box-only" | undefined;
-        alignContent?: "center" | "flex-start" | "flex-end" | "stretch" | "space-between" | "space-around" | undefined;
+        isolation?: "auto" | "isolate" | undefined;
+        cursor?: import("react-native").CursorValue | undefined;
+        boxShadow?: string | readonly import("react-native").BoxShadowValue[] | undefined;
+        filter?: string | readonly import("react-native").FilterFunction[] | undefined;
+        mixBlendMode?: import("react-native").BlendMode | undefined;
+        experimental_backgroundImage?: string | readonly import("react-native").GradientValue[] | undefined;
+        alignContent?: "center" | "flex-start" | "flex-end" | "stretch" | "space-between" | "space-around" | "space-evenly" | undefined;
         alignItems?: import("react-native").FlexAlignType | undefined;
         alignSelf?: "auto" | import("react-native").FlexAlignType | undefined;
         aspectRatio?: string | number | undefined;
@@ -415,14 +455,15 @@ declare const _default: {
         borderTopWidth?: number | undefined;
         borderWidth?: number | undefined;
         bottom?: import("react-native").DimensionValue | undefined;
-        display?: "none" | "flex" | undefined;
+        boxSizing?: "border-box" | "content-box" | undefined;
+        display?: "none" | "flex" | "contents" | undefined;
         end?: import("react-native").DimensionValue | undefined;
         flex?: number | undefined;
         flexBasis?: import("react-native").DimensionValue | undefined;
         flexDirection?: "row" | "column" | "row-reverse" | "column-reverse" | undefined;
-        rowGap?: number | undefined;
-        gap?: number | undefined;
-        columnGap?: number | undefined;
+        rowGap?: string | number | undefined;
+        gap?: string | number | undefined;
+        columnGap?: string | number | undefined;
         flexGrow?: number | undefined;
         flexShrink?: number | undefined;
         flexWrap?: "wrap" | "nowrap" | "wrap-reverse" | undefined;
@@ -452,13 +493,32 @@ declare const _default: {
         paddingStart?: import("react-native").DimensionValue | undefined;
         paddingTop?: import("react-native").DimensionValue | undefined;
         paddingVertical?: import("react-native").DimensionValue | undefined;
-        position?: "absolute" | "relative" | undefined;
+        position?: "absolute" | "relative" | "static" | undefined;
         right?: import("react-native").DimensionValue | undefined;
         start?: import("react-native").DimensionValue | undefined;
         top?: import("react-native").DimensionValue | undefined;
         width?: import("react-native").DimensionValue | undefined;
         zIndex?: number | undefined;
         direction?: "ltr" | "rtl" | "inherit" | undefined;
+        inset?: import("react-native").DimensionValue | undefined;
+        insetBlock?: import("react-native").DimensionValue | undefined;
+        insetBlockEnd?: import("react-native").DimensionValue | undefined;
+        insetBlockStart?: import("react-native").DimensionValue | undefined;
+        insetInline?: import("react-native").DimensionValue | undefined;
+        insetInlineEnd?: import("react-native").DimensionValue | undefined;
+        insetInlineStart?: import("react-native").DimensionValue | undefined;
+        marginBlock?: import("react-native").DimensionValue | undefined;
+        marginBlockEnd?: import("react-native").DimensionValue | undefined;
+        marginBlockStart?: import("react-native").DimensionValue | undefined;
+        marginInline?: import("react-native").DimensionValue | undefined;
+        marginInlineEnd?: import("react-native").DimensionValue | undefined;
+        marginInlineStart?: import("react-native").DimensionValue | undefined;
+        paddingBlock?: import("react-native").DimensionValue | undefined;
+        paddingBlockEnd?: import("react-native").DimensionValue | undefined;
+        paddingBlockStart?: import("react-native").DimensionValue | undefined;
+        paddingInline?: import("react-native").DimensionValue | undefined;
+        paddingInlineEnd?: import("react-native").DimensionValue | undefined;
+        paddingInlineStart?: import("react-native").DimensionValue | undefined;
         shadowColor?: import("react-native").ColorValue | undefined;
         shadowOffset?: Readonly<{
             width: number;
@@ -466,7 +526,7 @@ declare const _default: {
         }> | undefined;
         shadowOpacity?: import("react-native").AnimatableNumericValue | undefined;
         shadowRadius?: number | undefined;
-        transform?: string | (({
+        transform?: string | readonly (({
             perspective: import("react-native").AnimatableNumericValue;
         } & {
             rotate?: undefined;
@@ -587,7 +647,7 @@ declare const _default: {
             skewY?: undefined;
             matrix?: undefined;
         }) | ({
-            translateX: import("react-native").AnimatableNumericValue;
+            translateX: import("react-native").AnimatableNumericValue | `${number}%`;
         } & {
             perspective?: undefined;
             rotate?: undefined;
@@ -602,7 +662,7 @@ declare const _default: {
             skewY?: undefined;
             matrix?: undefined;
         }) | ({
-            translateY: import("react-native").AnimatableNumericValue;
+            translateY: import("react-native").AnimatableNumericValue | `${number}%`;
         } & {
             perspective?: undefined;
             rotate?: undefined;