react-native-ui-lib 7.40.1 → 7.41.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-ui-lib",
-  "version": "7.40.1",
+  "version": "7.41.0",
   "main": "src/index.js",
   "types": "src/index.d.ts",
   "author": "Ethan Sharabi <ethan.shar@gmail.com>",

package/scripts/docs/buildDocsCommon.js

@@ -26,7 +26,8 @@ const VALID_COMPONENTS_CATEGORIES = [
   'incubator',
   'infra',
   // non components categories
-  'services'
+  'services',
+  'dev' // development category for components we don't want to render in our docs (used in test.api.json)
 ];
 
 function buildDocs(apiFolders, componentsPreProcess) {

package/scripts/release/prReleaseNotesCommon.js

@@ -196,7 +196,7 @@ async function generateReleaseNotes(latestVersion,
   newVersion,
   fileNamePrefix,
   repo,
-  header = '',
+  getHeader = () => '',
   tagPrefix = '',
   categories = []) {
   let latestVer, newVer;
@@ -214,6 +214,7 @@ async function generateReleaseNotes(latestVersion,
   });
 
   rl.on('close', () => {
+    const header = getHeader(newVer);
     console.info(`Current latest version is v${latestVer}`);
     console.info(`Generating release notes out or PRs for v${newVer}`);
     _generateReleaseNotes(latestVer, newVer, fileNamePrefix, repo, header, tagPrefix, categories);

package/src/components/WheelPicker/Item.d.ts

@@ -17,6 +17,7 @@ interface InternalProps<T> extends WheelPickerItemProps<T> {
     inactiveColor?: string;
     style?: TextStyle;
     onSelect: (index: number) => void;
+    onPress?: () => void;
     centerH?: boolean;
     fakeLabel?: string;
     fakeLabelStyle?: TextStyle;

package/src/components/WheelPicker/Item.js

@@ -18,6 +18,7 @@ const WheelPickerItem = props => {
     fakeLabelProps,
     itemHeight,
     onSelect,
+    onPress,
     offset,
     activeColor = Colors.$textPrimary,
     inactiveColor = Colors.$textNeutralHeavy,
@@ -52,8 +53,12 @@ const WheelPickerItem = props => {
   const textStyle = useMemo(() => {
     return [animatedColorStyle, style, fakeLabel ? textWithLabelPaddingStyle : styles.textPadding];
   }, [style, fakeLabel, animatedColorStyle, textWithLabelPaddingStyle]);
+  const _onPress = useCallback(() => {
+    selectItem();
+    onPress?.();
+  }, [onPress, selectItem]);
   const _fakeLabelStyle = useMemo(() => StyleSheet.flatten([fakeLabelStyle, styles.hidden]), [fakeLabelStyle]);
-  return <AnimatedTouchableOpacity activeOpacity={1} style={containerStyle} key={index} centerV centerH={align ? align === WheelPickerAlign.CENTER : centerH} right={align ? align === WheelPickerAlign.RIGHT : !centerH} left={align === WheelPickerAlign.LEFT} onPress={selectItem}
+  return <AnimatedTouchableOpacity activeOpacity={1} style={containerStyle} key={index} centerV centerH={align ? align === WheelPickerAlign.CENTER : centerH} right={align ? align === WheelPickerAlign.RIGHT : !centerH} left={align === WheelPickerAlign.LEFT} onPress={_onPress}
   // @ts-ignore reanimated2
   index={index} testID={testID} row>
       <AnimatedText text60R testID={`${testID}.text`} numberOfLines={1} style={textStyle} recorderTag={'unmask'}>

package/src/components/WheelPicker/wheelPicker.api.json

@@ -6,16 +6,58 @@
   "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/WheelPickerScreen.tsx",
   "images": [],
   "props": [
-    {"name": "initialValue", "type": "number | string", "description": "Initial value (uncontrolled)"},
-    {"name": "items", "type": "WheelPickerItemProps[]", "description": "Data source for WheelPicker"},
-    {"name": "itemHeight", "type": "number", "description": "Height of each item in the WheelPicker", "default": "44"},
-    {"name": "numberOfVisibleRows", "type": "number", "description": "Number of rows visible", "default": "5"},
-    {"name": "activeTextColor", "type": "string", "description": "Text color for the focused row"},
-    {"name": "inactiveTextColor", "type": "string", "description": "Text color for other, non-focused rows"},
-    {"name": "textStyle", "type": "TextStyle", "description": "Row text custom style"},
-    {"name": "label", "type": "string", "description": "Additional label to render next to the items text"},
-    {"name": "labelStyle", "type": "TextStyle", "description": "Additional label's style"},
-    {"name": "labelProps", "type": "TextProps", "description": "Additional label's props"},
+    {
+      "name": "initialValue",
+      "type": "number | string",
+      "description": "Initial value (uncontrolled)"
+    },
+    {
+      "name": "items",
+      "type": "WheelPickerItemProps[]",
+      "description": "Data source for WheelPicker"
+    },
+    {
+      "name": "itemHeight",
+      "type": "number",
+      "description": "Height of each item in the WheelPicker",
+      "default": "44"
+    },
+    {
+      "name": "numberOfVisibleRows",
+      "type": "number",
+      "description": "Number of rows visible",
+      "default": "5"
+    },
+    {
+      "name": "activeTextColor",
+      "type": "string",
+      "description": "Text color for the focused row"
+    },
+    {
+      "name": "inactiveTextColor",
+      "type": "string",
+      "description": "Text color for other, non-focused rows"
+    },
+    {
+      "name": "textStyle",
+      "type": "TextStyle",
+      "description": "Row text custom style"
+    },
+    {
+      "name": "label",
+      "type": "string",
+      "description": "Additional label to render next to the items text"
+    },
+    {
+      "name": "labelStyle",
+      "type": "TextStyle",
+      "description": "Additional label's style"
+    },
+    {
+      "name": "labelProps",
+      "type": "TextProps",
+      "description": "Additional label's props"
+    },
     {
       "name": "onChange",
       "type": "(item: string | number, index: number) => void",
@@ -33,8 +75,16 @@
       "description": "Align the content to center, right ot left",
       "default": "center"
     },
-    {"name": "separatorsStyle", "type": "ViewStyle", "description": "Extra style for the separators"},
-    {"name": "testID", "type": "string", "description": "test identifier"},
+    {
+      "name": "separatorsStyle",
+      "type": "ViewStyle",
+      "description": "Extra style for the separators"
+    },
+    {
+      "name": "testID",
+      "type": "string",
+      "description": "test identifier"
+    },
     {
       "name": "flatListProps",
       "type": "FlatListProps",
@@ -47,5 +97,27 @@
     "  initialValue={'yes'$2}",
     "  onChange={() => console.log('changed')$3}",
     "/>"
-  ]
+  ],
+  "docs": {
+    "hero": {
+      "title": "WheelPicker",
+      "description": "A customizable WheelPicker component"
+    },
+    "tabs": [
+      {
+        "title": "UX Guidelines",
+        "sections": [
+          {
+            "type": "section",
+            "content": [
+              {
+                "value": "https://embed.figma.com/design/Krv1pLl7kq2L52vMRwd498/MADS-Guidelines?node-id=13-134250&embed-host=share",
+                "height": 1600
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  }
 }

package/src/components/chip/chip.api.json

@@ -53,6 +53,12 @@
     {"name": "testID", "type": "string", "description": "The test id for e2e tests"}
   ],
   "snippet": [
-    "<Chip label={'Chip'$1} onPress={() => console.log('pressed')$2}/>"
+    "<View flex center gap-s4>",
+    "<Chip label={'Chip'} onPress={() => console.log('pressed')}/>",
+    "<Chip label={'Square'} borderRadius={2} backgroundColor={Colors.blue50}/>",
+    "<Chip label={'Badge'} badgeProps={{label: '2', backgroundColor: Colors.red30}}/>",
+    "<Chip label={'Avatar'} avatarProps={{source: {uri: 'https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/icons/icon%20examples%20for%20docs/avatar_1.jpg'}}}/>",
+    "<Chip label={'Accessories'} rightElement={<Icon source={Assets.icons.demo.chevronRight}/>}/>",
+    "</View>"
   ]
 }

package/src/components/chipsInput/chipsInput.api.json

@@ -2,12 +2,22 @@
   "name": "ChipsInput",
   "category": "form",
   "description": "A chips input",
-  "extends": ["form/TextField"],
-  "modifiers": ["margin", "color", "typography"],
+  "extends": [
+    "form/TextField"
+  ],
+  "modifiers": [
+    "margin",
+    "color",
+    "typography"
+  ],
   "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/ChipsInputScreen.tsx",
   "images": [],
   "props": [
-    {"name": "chips", "type": "ChipProps[]", "description": "List of chips to render"},
+    {
+      "name": "chips",
+      "type": "ChipProps[]",
+      "description": "List of chips to render"
+    },
     {
       "name": "defaultChipProps",
       "type": "ChipProps",
@@ -18,12 +28,48 @@
       "type": "(newChips, changeReason, updatedChip) => void",
       "description": "Callback for chips change (adding or removing chip)"
     },
-    {"name": "maxChips", "type": "number", "description": "The maximum chips to allow adding"}
+    {
+      "name": "maxChips",
+      "type": "number",
+      "description": "The maximum chips to allow adding"
+    }
   ],
   "snippet": [
-    "<ChipsInput",
-    "  placeholder={'Placeholder'$1}",
-    "  chips={[{label: 'Falcon 9'}, {label: 'Enterprise'}, {label: 'Challenger', borderRadius: 0}]$2}",
-    "/>"
-  ]
+    "function Example(props) {",
+    "  const [chips, setChips] = useState([{label: 'Falcon 9'}, {label: 'Enterprise'}]);",
+  
+    "  return (",
+    "    <View flex padding-s5>",
+    "      <ChipsInput",
+    "        onChange={setChips}",
+    "        placeholder={'Placeholder'}",
+    "        defaultChipProps={{borderRadius: 0}}",
+    "        chips={chips}",
+    "      />",
+    "    </View>",
+    "  );",
+    "}"
+  ],
+  "docs": {
+    "hero": {
+      "title": "ChipsInput",
+      "description": "A chips input"
+    },
+    "tabs": [
+      {
+        "title": "UX Guidelines",
+        "sections": [
+          {
+            "type": "section",
+            "content": [
+              {
+                "value": "https://embed.figma.com/design/Krv1pLl7kq2L52vMRwd498/MADS-Guidelines?node-id=13-114418&embed-host=share",
+                "height": 1600
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  }
 }

package/src/components/colorPalette/ColorPalette.api.json

@@ -79,11 +79,18 @@
     }
   ],
   "snippet": [
-    "<ColorPalette",
-    " colors={['transparent', Colors.green30, Colors.yellow30, Colors.red30]$1}",
-    " value={selectedColor$2}",
-    " onValueChange={() => console.log('value changed')$3}",
-    "/>"
+    "function Example(props) {",
+    "  const [value, setValue] = useState(Colors.yellow30);",
+    "  return (",
+    "    <View flex padding-s5 gap-s4>",
+    "      <ColorPalette",
+    "        colors={['transparent', Colors.green30, Colors.yellow30, Colors.red30]}",
+    "        value={value}",
+    "        onValueChange={setValue}",
+    "      />",
+    "    </View>",
+    "  );",
+    "}"
   ],
   "docs": {
     "hero": {

package/src/components/colorPicker/colorPicker.api.json

@@ -47,14 +47,22 @@
     }
   ],
   "snippet": [
-    "<ColorPicker",
-    " colors={[Colors.green10, Colors.green20, Colors.green30, Colors.green40, Colors.green50, Colors.green60, Colors.green70]$1}",
-    " initialColor={Colors.green10$2}",
-    " value={currentColor$3}",
-    " onDismiss={() => console.log('dismissed')$4}",
-    " onSubmit={() => console.log('submit')$5}",
-    " onValueChange={() => console.log('value changed')$6}",
-    "/>"
+    "function Example(props) {",
+    "  const [colors, setColors] = useState([Colors.green30, Colors.yellow30, Colors.red30]);",
+    "  const [color, setColor] = useState();",
+    "  return (",
+    "    <View flex padding-s5>",
+    "     <ColorPicker",
+    "       colors={colors}",
+    "       initialColor={Colors.green10}",
+    "       value={color}",
+    "       onDismiss={() => console.log('dismissed')}",
+    "       onSubmit={(newColor) => setColors([newColor, ...colors])}",
+    "       onValueChange={setColor}",
+    "     />",
+    "    </View>",
+    "  );",
+    "}"
   ],
   "docs": {
     "hero": {
@@ -77,7 +85,7 @@
             "items": [
               {
                 "title": "",
-                "description": "markdown:1. Tapping 'Add New' in the Color Palette opens a color picker dialog.
  \n2. Using HLS controls (or even typing actual HEX value) user can achieve any color. ",
+                "description": "markdown:  1. Tapping 'Add New' in the Color Palette opens a color picker dialog.
    \n2. Using HLS controls (or even typing actual HEX value) user can achieve any color. ",
                 "content": [
                   {
                     "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ColorPicker/ColorPicker_usage1.png"
@@ -113,7 +121,7 @@
             "items": [
               {
                 "title": "",
-                "description": "markdown:1. Tapping on the HEX value will “activate” the input field (Main Input) and display the keyboard. New color can be created either by typing a hex value or by pasting a specific value.  \n2. Until new valid hex value is provided, the initial color background is kept. Hex value is highlighted with either white at 25% or black at 25%, depending on the background color. ",
+                "description": "markdown:  1. Tapping on the HEX value will “activate” the input field (Main Input) and display the keyboard. New color can be created either by typing a hex value or by pasting a specific value.  \n2. Until new valid hex value is provided, the initial color background is kept. Hex value is highlighted with either white at 25% or black at 25%, depending on the background color. ",
                 "content": [
                   {
                     "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ColorPicker/ColorPicker_hex1.png"
@@ -122,7 +130,7 @@
               },
               {
                 "title": "",
-                "description": "markdown:3. ‘#’ symbol is permanent and cant be deleted.  \n4. Once hex value is valid (6 characters), background color changes accordingly. ",
+                "description": "markdown:  3. ‘#’ symbol is permanent and cant be deleted.  \n4. Once hex value is valid (6 characters), background color changes accordingly. ",
                 "content": [
                   {
                     "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ColorPicker/ColorPicker_hex2.png"

package/src/components/drawer/drawer.api.json

@@ -3,7 +3,9 @@
   "category": "lists",
   "description": "Drawer Component",
   "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/DrawerScreen.tsx",
-  "images": ["https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Drawer/Drawer.gif?raw=true"],
+  "images": [
+    "https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Drawer/Drawer.gif?raw=true"
+  ],
   "props": [
     {
       "name": "rightItems",
@@ -15,20 +17,53 @@
       "type": "ItemProps",
       "description": "The bottom layer's item to appear when opened from the left (a single item)"
     },
-    {"name": "bounciness", "type": "number", "description": "The drawer animation bounciness"},
-    {"name": "itemsMinWidth", "type": "number", "description": "Set a different minimum width"},
+    {
+      "name": "bounciness",
+      "type": "number",
+      "description": "The drawer animation bounciness"
+    },
+    {
+      "name": "itemsMinWidth",
+      "type": "number",
+      "description": "Set a different minimum width"
+    },
     {
       "name": "itemsTintColor",
       "type": "string",
       "description": "The color for the text and icon tint of the items",
       "default": "Colors.white"
     },
-    {"name": "itemsIconSize", "type": "number", "description": "The items' icon size", "default": "24"},
-    {"name": "itemsTextStyle", "type": "TextStyle", "description": "The items' text style"},
-    {"name": "useNativeAnimations", "type": "boolean", "description": "Perform the animation in natively"},
-    {"name": "fullSwipeLeft", "type": "boolean", "description": "Whether to allow a full left swipe"},
-    {"name": "fullLeftThreshold", "type": "number", "description": "Threshold for a left full swipe (0-1)"},
-    {"name": "onFullSwipeLeft", "type": "() => void", "description": "Callback for left item full swipe"},
+    {
+      "name": "itemsIconSize",
+      "type": "number",
+      "description": "The items' icon size",
+      "default": "24"
+    },
+    {
+      "name": "itemsTextStyle",
+      "type": "TextStyle",
+      "description": "The items' text style"
+    },
+    {
+      "name": "useNativeAnimations",
+      "type": "boolean",
+      "description": "Perform the animation in natively"
+    },
+    {
+      "name": "fullSwipeLeft",
+      "type": "boolean",
+      "description": "Whether to allow a full left swipe"
+    },
+    {
+      "name": "fullLeftThreshold",
+      "type": "number",
+      "description": "Threshold for a left full swipe (0-1)"
+    },
+    {
+      "name": "onFullSwipeLeft",
+      "type": "() => void",
+      "description": "Callback for left item full swipe"
+    },
     {
       "name": "onWillFullSwipeLeft",
       "type": "() => void",
@@ -39,24 +74,82 @@
       "type": "() => {rowWidth, leftWidth, dragX, resetItemPosition}",
       "description": "Callback for left item toggle swipe"
     },
-    {"name": "fullSwipeRight", "type": "boolean", "description": "Whether to allow a full right swipe"},
-    {"name": "fullRightThreshold", "type": "number", "description": "Threshold for a right full swipe (0-1)"},
-    {"name": "onFullSwipeRight", "type": "() => void", "description": "Callback for right item full swipe"},
+    {
+      "name": "fullSwipeRight",
+      "type": "boolean",
+      "description": "Whether to allow a full right swipe"
+    },
+    {
+      "name": "fullRightThreshold",
+      "type": "number",
+      "description": "Threshold for a right full swipe (0-1)"
+    },
+    {
+      "name": "onFullSwipeRight",
+      "type": "() => void",
+      "description": "Callback for right item full swipe"
+    },
     {
       "name": "onWillFullSwipeRight",
       "type": "() => void",
       "description": "Callback for just before right item full swipe"
     },
-    {"name": "disableHaptic", "type": "boolean", "description": "Whether to disable the haptic"},
-    {"name": "onDragStart", "type": "() => any", "description": "Called when drag gesture starts"},
-    {"name": "onSwipeableWillOpen", "type": "() => void", "description": "Callback for open action"},
-    {"name": "onSwipeableWillClose", "type": "() => void", "description": "Callback for close action"},
+    {
+      "name": "disableHaptic",
+      "type": "boolean",
+      "description": "Whether to disable the haptic"
+    },
+    {
+      "name": "onDragStart",
+      "type": "() => any",
+      "description": "Called when drag gesture starts"
+    },
+    {
+      "name": "onSwipeableWillOpen",
+      "type": "() => void",
+      "description": "Callback for open action"
+    },
+    {
+      "name": "onSwipeableWillClose",
+      "type": "() => void",
+      "description": "Callback for close action"
+    },
     {
       "name": "customValue",
       "type": "any",
       "description": "Custom value of any type to pass on to the component and receive back in the action callbacks"
     },
-    {"name": "style", "type": "ViewStyle", "description": "Component's style"},
-    {"name": "testID", "type": "string", "description": "The test id for e2e tests"}
-  ]
+    {
+      "name": "style",
+      "type": "ViewStyle",
+      "description": "Component's style"
+    },
+    {
+      "name": "testID",
+      "type": "string",
+      "description": "The test id for e2e tests"
+    }
+  ],
+  "docs": {
+    "hero": {
+      "title": "Drawer",
+      "description": "Drawer Component"
+    },
+    "tabs": [
+      {
+        "title": "UX Guidelines",
+        "sections": [
+          {
+            "type": "section",
+            "content": [
+              {
+                "value": "https://embed.figma.com/design/Krv1pLl7kq2L52vMRwd498/MADS-Guidelines?node-id=5958-379805&embed-host=share",
+                "height": 1600
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  }
 }

package/src/components/drawer/index.d.ts

@@ -5,7 +5,9 @@ interface DrawerItemProps {
     width?: number;
     background?: string;
     text?: string;
+    textColor?: string;
     icon?: number;
+    iconColor?: string;
     onPress?: Function;
     keepOpen?: boolean;
     style?: ViewStyle;

package/src/components/drawer/index.js

@@ -229,14 +229,14 @@ class Drawer extends PureComponent {
         {!item.customElement && item.icon && <Animated.Image source={item.icon} style={[styles.actionIcon, {
         width: itemsIconSize,
         height: itemsIconSize,
-        tintColor: itemsTintColor,
+        tintColor: item.iconColor || itemsTintColor,
         opacity,
         transform: [{
           scale
         }]
       }]} />}
         {!item.customElement && item.text && <Animated.Text style={[styles.actionText, {
-        color: itemsTintColor,
+        color: item.textColor || itemsTintColor,
         opacity,
         transform: [{
           scale