Merge branch 'master' into v9

Author: M-i-k-e-l

.github/workflows/block-merge-label-check.yml

@@ -0,0 +1,36 @@
+name: Block Merge Label Check
+
+on:
+  pull_request:
+    types: [opened, synchronize, reopened, labeled, unlabeled]
+
+jobs:
+  check-do-not-merge-label:
+    runs-on: ubuntu-latest
+    name: Check Do Not Merge Label
+    
+    steps:
+      - name: Check for Do Not Merge label
+        uses: actions/github-script@f28e40c7f34bde8b3046d885e986cb6290c5673b # v7.1.0
+        with:
+          script: |
+            const prNumber = context.payload.pull_request.number;
+            console.log(`Checking labels for PR #${prNumber}...`);
+            
+            // Get all labels on the PR
+            const { data: labels } = await github.rest.issues.listLabelsOnIssue({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              issue_number: prNumber,
+            });
+            
+            // Check if "Do Not Merge!" label exists
+            const doNotMergeLabel = labels.find(label => label.name === 'Do Not Merge!');
+            
+            if (doNotMergeLabel) {
+              console.log('❌ Found "Do Not Merge!" label - blocking merge');
+              core.setFailed('PR has "Do Not Merge!" label - cannot merge');
+            } else {
+              console.log('✅ No "Do Not Merge!" label found - PR can be merged');
+            }
+

.github/workflows/deployDocs.yml

@@ -14,16 +14,16 @@ jobs:
 
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v4
+        uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4.3.1
 
       - name: Setup Node.js
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4.4.0
         with:
           node-version-file: '.nvmrc'
           cache: 'yarn'
 
       - name: Install dependencies
-        run: yarn install
+        run: NPQ_PKG_MGR=yarn npx npq install --immutable
 
       - name: Build documentation
         run: yarn docs:build
@@ -38,7 +38,7 @@ jobs:
           git config --global user.email "github-actions[bot]@users.noreply.github.com"
           git config --global user.name "github-actions[bot]"
           cd docuilib
-          yarn install
+          NPQ_PKG_MGR=yarn npx npq install --immutable
           yarn deploy
 
       - name: Deploy disclaimer

.github/workflows/label-waiting-for-response.yml

@@ -21,7 +21,7 @@ jobs:
     steps:
       - name: Check if commenter is maintainer
         id: check-maintainer
-        uses: actions/github-script@v7
+        uses: actions/github-script@f28e40c7f34bde8b3046d885e986cb6290c5673b # v7.1.0
         with:
           script: |
             const response = await github.rest.repos.getCollaboratorPermissionLevel({
@@ -35,7 +35,7 @@ jobs:
             
       - name: Add waiting-for-response label
         if: steps.check-maintainer.outputs.result == 'true'
-        uses: actions/github-script@v7
+        uses: actions/github-script@f28e40c7f34bde8b3046d885e986cb6290c5673b # v7.1.0
         with:
           script: |
             await github.rest.issues.addLabels({
@@ -53,7 +53,7 @@ jobs:
     
     steps:
       - name: Process all open issues
-        uses: actions/github-script@v7
+        uses: actions/github-script@f28e40c7f34bde8b3046d885e986cb6290c5673b # v7.1.0
         with:
           script: |
             async function isMaintianer(username) {

.github/workflows/pr-description-check.yml

@@ -11,7 +11,7 @@ jobs:
 
     steps:
       - name: Validate PR Description
-        uses: actions/github-script@v7
+        uses: actions/github-script@f28e40c7f34bde8b3046d885e986cb6290c5673b # v7.1.0
         with:
           script: |
             const prBody = context.payload.pull_request.body || '';

demo/src/screens/componentScreens/FloatingButtonScreen.tsx

@@ -1,13 +1,14 @@
 import React, {Component} from 'react';
 import {View, StyleSheet, Alert, ScrollView} from 'react-native';
-import {Colors, Text, FloatingButton, FloatingButtonLayouts} from 'react-native-ui-lib';
+import {Colors, Text, FloatingButton, FloatingButtonLayouts, Keyboard} from 'react-native-ui-lib';
 import {renderBooleanOption} from '../ExampleScreenPresenter';
 
 interface State {
   showButton: boolean;
   showPrimary: boolean;
   showSecondary: boolean;
   showVertical: boolean;
+  withTrackingView: boolean;
 }
 
 export default class FloatingButtonScreen extends Component<{}, State> {
@@ -16,7 +17,8 @@ export default class FloatingButtonScreen extends Component<{}, State> {
     showPrimary: true,
     showSecondary: true,
     showVertical: true,
-    fullWidth: false
+    fullWidth: false,
+    withTrackingView: false
   };
 
   notNow = () => {
@@ -30,7 +32,8 @@ export default class FloatingButtonScreen extends Component<{}, State> {
   };
 
   render() {
-    const {showSecondary, showVertical} = this.state;
+    const {showSecondary, showVertical, withTrackingView} = this.state;
+    const Container = withTrackingView ? Keyboard.KeyboardTrackingView : React.Fragment;
     return (
       <View style={styles.container}>
         <Text text60 center $textDefault marginB-s4>
@@ -41,6 +44,7 @@ export default class FloatingButtonScreen extends Component<{}, State> {
         {renderBooleanOption.call(this, 'Show Primary Button', 'showPrimary')}
         {renderBooleanOption.call(this, 'Show Secondary Button', 'showSecondary')}
         {renderBooleanOption.call(this, 'Button Layout Vertical', 'showVertical')}
+        {renderBooleanOption.call(this, 'With tracking view', 'withTrackingView')}
 
         <ScrollView showsVerticalScrollIndicator={false}>
           <View paddingT-20>
@@ -67,30 +71,32 @@ export default class FloatingButtonScreen extends Component<{}, State> {
           </View>
         </ScrollView>
 
-        <FloatingButton
-          visible={this.state.showButton}
-          fullWidth={this.state.fullWidth}
-          button={
-            this.state.showPrimary
-              ? {
-                label: 'Approve',
-                onPress: this.close
-              }
-              : undefined
-          }
-          secondaryButton={
-            showSecondary
-              ? {
-                label: 'Not now',
-                onPress: this.notNow
-              }
-              : undefined
-          }
-          buttonLayout={showVertical ? FloatingButtonLayouts.VERTICAL : FloatingButtonLayouts.HORIZONTAL}
-          // bottomMargin={80}
-          // hideBackgroundOverlay
-          // withoutAnimation
-        />
+        <Container>
+          <FloatingButton
+            visible={this.state.showButton}
+            fullWidth={this.state.fullWidth}
+            button={
+              this.state.showPrimary
+                ? {
+                  label: 'Approve',
+                  onPress: this.close
+                }
+                : undefined
+            }
+            secondaryButton={
+              showSecondary
+                ? {
+                  label: 'Not now',
+                  onPress: this.notNow
+                }
+                : undefined
+            }
+            buttonLayout={showVertical ? FloatingButtonLayouts.VERTICAL : FloatingButtonLayouts.HORIZONTAL}
+            // bottomMargin={80}
+            // hideBackgroundOverlay
+            // withoutAnimation
+          />
+        </Container>
       </View>
     );
   }

demo/src/screens/componentScreens/ProgressBarScreen.tsx

@@ -2,9 +2,7 @@ import React, {Component} from 'react';
 import {StyleSheet, ScrollView} from 'react-native';
 import {View, Text, ProgressBar, Colors, Spacings} from 'react-native-ui-lib';//eslint-disable-line
 
-
 export default class ProgressBarScreen extends Component {
-
   state = {
     progresses: [0, 0, 0, 0]
   };
@@ -53,15 +51,15 @@ export default class ProgressBarScreen extends Component {
           </Text>
           <ProgressBar
             progress={progresses[0]}
-            style={styles.progressBar}
+            containerStyle={styles.progressBar}
           />
 
           <Text $textDefault text70 style={styles.text}>
             FullWidth
           </Text>
           <ProgressBar
             progress={progresses[1]}
-            style={styles.fullWidthProgressBar}
+            containerStyle={styles.fullWidthProgressBar}
             fullWidth
           />
 
@@ -70,7 +68,7 @@ export default class ProgressBarScreen extends Component {
           </Text>
           <ProgressBar
             progress={progresses[2]}
-            style={[styles.progressBar, styles.styledProgressBar]}
+            containerStyle={[styles.progressBar, styles.styledProgressBar]}
             progressColor={Colors.purple70}
           />
 
@@ -79,9 +77,18 @@ export default class ProgressBarScreen extends Component {
           </Text>
           <ProgressBar
             progress={progresses[0]}
-            style={styles.progressBar}
+            containerStyle={styles.progressBar}
             customElement={this.customElement}
           />
+
+          <Text $textDefault text70 style={styles.text}>
+            Custom Style - No Border Radius, 50% progress
+          </Text>
+          <ProgressBar
+            progress={50}
+            containerStyle={[styles.progressBar, styles.styledProgressBar, {borderRadius: 0}]}
+            progressStyle={{borderRadius: 0, backgroundColor: Colors.purple70}}
+          />
         </View>
       </ScrollView>
     );

packages/react-native-ui-lib/src/components/floatingButton/index.tsx

@@ -254,9 +254,9 @@ class FloatingButton extends PureComponent<FloatingButtonProps> {
 
 const styles = StyleSheet.create({
   container: {
-    ...StyleSheet.absoluteFillObject,
+    // ...StyleSheet.absoluteFillObject, // TODO: this is breaking scenarios where the FloatingButton is inside a KeyboardTrackingView
     top: undefined,
-    zIndex: Constants.isAndroid ? 99 : undefined
+    zIndex: 99
   },
   image: {
     ...StyleSheet.absoluteFillObject,

packages/react-native-ui-lib/src/components/gridListItem/index.tsx

@@ -208,9 +208,9 @@ class GridListItem extends Component<GridListItemProps> {
     return (
       <Container
         style={[styles.container, {alignItems}, {width}, containerStyle]}
+        accessible={renderCustomItem ? true : undefined}
         {...otherContainerProps}
         onPress={onPress && this.onItemPress}
-        accessible={renderCustomItem ? true : undefined}
         {...Modifiers.extractAccessibilityProps(this.props)}
       >
         {imageProps && <Image {...imageProps} style={[itemSize, imageProps?.style]} customOverlayContent={children}/>}

packages/react-native-ui-lib/src/components/progressBar/index.tsx

@@ -27,8 +27,17 @@ interface Props {
   fullWidth?: boolean;
   /**
    * Override container style
+   * @deprecated Use containerStyle instead
    */
   style?: StyleProp<ViewStyle>;
+  /**
+   * Override container style
+   */
+  containerStyle?: StyleProp<ViewStyle>;
+  /**
+   * Override progress style
+   */
+  progressStyle?: StyleProp<ViewStyle>;
   /**
    * Progress color
    */
@@ -136,23 +145,25 @@ class ProgressBar extends PureComponent<Props, State> {
   }
 
   render() {
-    const {style, testID} = this.props;
+    const {style, containerStyle, testID, progressStyle} = this.props;
     const {containerWidth = 0} = this.state;
     const outputRange = Constants.isRTL ? [containerWidth, 0] : [0, containerWidth];
     const newProgress = this.progressAnimation.interpolate({
       inputRange: [0, 100],
       outputRange
     });
 
+    const animatedStyle = {transform: [{translateX: newProgress}]};
+
     return (
       <View
         onLayout={this.getContainerWidth}
-        style={[styles.container, this.getContainerStyle(), style]}
+        style={[styles.container, this.getContainerStyle(), style, containerStyle]}
         {...this.getAccessibilityProps()}
         testID={testID}
       >
         {!!containerWidth && (
-          <Animated.View style={[styles.progress, this.getProgressStyle(), {transform: [{translateX: newProgress}]}]}>
+          <Animated.View style={[styles.progress, this.getProgressStyle(), progressStyle, animatedStyle]}>
             {this.renderCustomElement()}
           </Animated.View>
         )}

packages/react-native-ui-lib/src/components/progressBar/progressBar.api.json

@@ -16,10 +16,15 @@
       "description": "FullWidth Ui preset"
     },
     {
-      "name": "style",
+      "name": "containerStyle",
       "type": "ViewStyle",
       "description": "Override container style"
     },
+    {
+      "name": "progressStyle",
+      "type": "ViewStyle",
+      "description": "Override progress style"
+    },
     {
       "name": "progressColor",
       "type": "string",