react-native-ui-lib 7.40.1 → 7.41.0

package/src/components/image/image.api.json

@@ -2,10 +2,16 @@
   "name": "Image",
   "category": "media",
   "description": "Image wrapper with extra functionality like source transform and assets support",
-  "extends": ["Image"],
-  "extendsLink": ["https://reactnative.dev/docs/image"],
+  "extends": [
+    "Image"
+  ],
+  "extendsLink": [
+    "https://reactnative.dev/docs/image"
+  ],
   "note": "please note that for SVG support you need to add both `react-native-svg` and `react-native-svg-transformer` and also configure them (see `metro.config.js`)",
-  "modifiers": ["margin"],
+  "modifiers": [
+    "margin"
+  ],
   "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/ImageScreen.tsx",
   "props": [
     {
@@ -13,9 +19,21 @@
       "type": "(props: any) => ImageSourcePropType",
       "description": "custom source transform handler for manipulating the image source (great for size control)"
     },
-    {"name": "assetName", "type": "string", "description": "if provided image source will be driven from asset name"},
-    {"name": "assetGroup", "type": "string", "description": "the asset group, default is icons"},
-    {"name": "tintColor", "type": "string", "description": "the asset tint"},
+    {
+      "name": "assetName",
+      "type": "string",
+      "description": "if provided image source will be driven from asset name"
+    },
+    {
+      "name": "assetGroup",
+      "type": "string",
+      "description": "the asset group, default is icons"
+    },
+    {
+      "name": "tintColor",
+      "type": "string",
+      "description": "the asset tint"
+    },
     {
       "name": "supportRTL",
       "type": "boolean",
@@ -26,7 +44,11 @@
       "type": "boolean",
       "description": "Show image as a cover, full width, image (according to aspect ratio, default: 16:8)"
     },
-    {"name": "aspectRatio", "type": "number", "description": "The aspect ratio for the image"},
+    {
+      "name": "aspectRatio",
+      "type": "number",
+      "description": "The aspect ratio for the image"
+    },
     {
       "name": "overlayType",
       "type": "VERTICAL | TOP | BOTTOM | SOLID",
@@ -39,14 +61,60 @@
       "description": "OverlayIntensityType",
       "default": "Image.overlayIntensityType.LOW"
     },
-    {"name": "overlayColor", "type": "string", "description": "Pass a custom color for the overlay"},
-    {"name": "customOverlayContent", "type": "JSX.Element", "description": "Render an overlay with custom content"},
-    {"name": "errorSource", "type": "ImageSourcePropType", "description": "Default image source in case of an error"},
-    {"name": "imageId", "type": "string", "description": "An imageId that can be used in sourceTransformer logic"},
-    {"name": "recorderTag", "type": "'mask' | 'unmask'", "description": "Recorder Tag"},
-    {"name": "useBackgroundContainer", "type": "boolean", "description": "Use a container for the Image, this can solve issues on Android when animation needs to be performed on the same view; i.e. animation related crashes on Android."}
+    {
+      "name": "overlayColor",
+      "type": "string",
+      "description": "Pass a custom color for the overlay"
+    },
+    {
+      "name": "customOverlayContent",
+      "type": "JSX.Element",
+      "description": "Render an overlay with custom content"
+    },
+    {
+      "name": "errorSource",
+      "type": "ImageSourcePropType",
+      "description": "Default image source in case of an error"
+    },
+    {
+      "name": "imageId",
+      "type": "string",
+      "description": "An imageId that can be used in sourceTransformer logic"
+    },
+    {
+      "name": "recorderTag",
+      "type": "'mask' | 'unmask'",
+      "description": "Recorder Tag"
+    },
+    {
+      "name": "useBackgroundContainer",
+      "type": "boolean",
+      "description": "Use a container for the Image, this can solve issues on Android when animation needs to be performed on the same view; i.e. animation related crashes on Android."
+    }
   ],
   "snippet": [
     "<Image width={50} height={50} source={{uri: 'https://images.pexels.com/photos/748837/pexels-photo-748837.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260'}$1}/>"
-  ]
+  ],
+  "docs": {
+    "hero": {
+      "title": "Image",
+      "description": "Image wrapper with extra functionality like source transform and assets support"
+    },
+    "tabs": [
+      {
+        "title": "UX Guidelines",
+        "sections": [
+          {
+            "type": "section",
+            "content": [
+              {
+                "value": "https://embed.figma.com/design/Krv1pLl7kq2L52vMRwd498/MADS-Guidelines?node-id=10088-640358&embed-host=share",
+                "height": 1600
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  }
 }

package/src/components/numberInput/numberInput.api.json

@@ -22,11 +22,31 @@
       "description": "Number of digits after the decimal point. Must be in the range 0 - 20, inclusive.",
       "default": "2"
     },
-    {"name": "leadingText", "type": "string", "description": "A leading text"},
-    {"name": "leadingTextStyle", "type": "TextStyle", "description": "The style of the leading text"},
-    {"name": "trailingText", "type": "string", "description": "A trailing text"},
-    {"name": "trailingTextStyle", "type": "TextStyle", "description": "The style of the trailing text"},
-    {"name": "containerStyle", "type": "ViewStyle", "description": "Container style of the whole component"},
+    {
+      "name": "leadingText",
+      "type": "string",
+      "description": "A leading text"
+    },
+    {
+      "name": "leadingTextStyle",
+      "type": "TextStyle",
+      "description": "The style of the leading text"
+    },
+    {
+      "name": "trailingText",
+      "type": "string",
+      "description": "A trailing text"
+    },
+    {
+      "name": "trailingTextStyle",
+      "type": "TextStyle",
+      "description": "The style of the trailing text"
+    },
+    {
+      "name": "containerStyle",
+      "type": "ViewStyle",
+      "description": "Container style of the whole component"
+    },
     {
       "name": "contextMenuHidden",
       "type": "boolean",
@@ -40,5 +60,29 @@
       "description": "Most of TextField's props can be applied, except for ones that are passed directly via named props."
     }
   ],
-  "snippet": ["<NumberInput initialValue={1506$1} onChange={onChange$2} placeholder={'Price$3'}/>"]
+  "snippet": [
+    "<NumberInput initialValue={1506$1} onChange={onChange$2} placeholder={'Price$3'}/>"
+  ],
+  "docs": {
+    "hero": {
+      "title": "NumberInput",
+      "description": "Number Input to create an input with a formatted number"
+    },
+    "tabs": [
+      {
+        "title": "UX Guidelines",
+        "sections": [
+          {
+            "type": "section",
+            "content": [
+              {
+                "value": "https://embed.figma.com/design/Krv1pLl7kq2L52vMRwd498/MADS-Guidelines?node-id=8539-460248&embed-host=share",
+                "height": 1600
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  }
 }

package/src/components/pageControl/pageControl.api.json

@@ -3,7 +3,9 @@
   "category": "navigation",
   "description": "Page indicator, typically used in paged scroll-views",
   "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/PageControlScreen.tsx",
-  "images": ["https://user-images.githubusercontent.com/1780255/107114259-2e278d00-686d-11eb-866c-59f3d410d6c3.gif"],
+  "images": [
+    "https://user-images.githubusercontent.com/1780255/107114259-2e278d00-686d-11eb-866c-59f3d410d6c3.gif"
+  ],
   "props": [
     {
       "name": "limitShownPages",
@@ -15,8 +17,18 @@
       "type": "ViewStyle",
       "description": "Additional styles for the top container"
     },
-    {"name": "numOfPages", "required": true, "type": "number", "description": "Total number of pages"},
-    {"name": "currentPage", "required": true, "type": "number", "description": "Zero-based index of the current page"},
+    {
+      "name": "numOfPages",
+      "required": true,
+      "type": "number",
+      "description": "Total number of pages"
+    },
+    {
+      "name": "currentPage",
+      "required": true,
+      "type": "number",
+      "description": "Zero-based index of the current page"
+    },
     {
       "name": "onPagePress",
       "type": "(index: number) => void",
@@ -51,9 +63,35 @@
       "description": "The space between the siblings page indicators",
       "default": "4"
     },
-    {"name": "testID", "type": "string", "description": "Used to identify the pageControl in tests"}
+    {
+      "name": "testID",
+      "type": "string",
+      "description": "Used to identify the pageControl in tests"
+    }
   ],
   "snippet": [
     "<PageControl numOfPages={5$1} currentPage={0$2}/>"
-  ]
+  ],
+  "docs": {
+    "hero": {
+      "title": "PageControl",
+      "description": "Page indicator, typically used in paged scroll-views"
+    },
+    "tabs": [
+      {
+        "title": "UX Guidelines",
+        "sections": [
+          {
+            "type": "section",
+            "content": [
+              {
+                "value": "https://embed.figma.com/design/Krv1pLl7kq2L52vMRwd498/MADS-Guidelines?node-id=22898-649490&embed-host=share",
+                "height": 1600
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  }
 }

package/src/components/picker/PickerItemsList.js

@@ -94,6 +94,9 @@ const PickerItemsList = props => {
           </Text> : cancelButtonProps ? <Button key={'cancel-button'} link onPress={onCancel} {...cancelButtonProps} /> : undefined}
       </>;
   };
+  const onDonePress = useCallback(() => {
+    context.onPress(wheelPickerValue);
+  }, [context.onPress, wheelPickerValue]);
   const renderPickerHeader = () => {
     const {
       cancelButtonProps,
@@ -114,7 +117,7 @@ const PickerItemsList = props => {
       return <View row spread padding-page style={containerStyle}>
           {(cancelButtonProps || cancelLabel) && renderCancel()}
           <Text style={titleStyle}>{title}</Text>
-          <Text text70 $textPrimary accessibilityRole={'button'} onPress={() => context.onPress(wheelPickerValue)}>
+          <Text text70 $textPrimary accessibilityElementsHidden={useWheelPicker} importantForAccessibility={useWheelPicker ? 'no' : 'yes'} accessibilityRole={'button'} onPress={onDonePress}>
             {doneLabel ?? 'Select'}
           </Text>
         </View>;

package/src/components/picker/index.js

@@ -117,6 +117,12 @@ const Picker = React.forwardRef((props, ref) => {
     mode,
     items
   });
+  const accessibleFilteredItems = useMemo(() => {
+    return filteredItems.map(item => ({
+      ...item,
+      onPress: useWheelPicker && Constants.accessibility.isScreenReaderEnabled ? () => onDoneSelecting(item.value) : undefined
+    }));
+  }, [useWheelPicker, filteredItems, onDoneSelecting]);
   const {
     label,
     accessibilityInfo
@@ -205,14 +211,14 @@ const Picker = React.forwardRef((props, ref) => {
   };
   const expandableModalContent = useMemo(() => {
     const useItems = useWheelPicker || propItems;
-    return <PickerItemsList testID={`${testID}.modal`} useWheelPicker={useWheelPicker} mode={mode} useDialog={useDialog} items={useItems ? filteredItems : undefined} topBarProps={{
+    return <PickerItemsList testID={`${testID}.modal`} useWheelPicker={useWheelPicker} mode={mode} useDialog={useDialog} items={useItems ? accessibleFilteredItems : undefined} topBarProps={{
       ...topBarProps,
       onCancel: cancelSelect,
       onDone: mode === PickerModes.MULTI ? () => onDoneSelecting(multiDraftValue) : undefined
     }} showSearch={showSearch} searchStyle={searchStyle} searchPlaceholder={searchPlaceholder} onSearchChange={_onSearchChange} renderCustomSearch={renderCustomSearch} renderHeader={renderHeader} listProps={listProps} useSafeArea={useSafeArea} showLoader={showLoader} customLoaderElement={customLoaderElement} renderCustomTopElement={renderCustomTopElement} selectionStatus={selectionStatus}>
-        {filteredItems}
+        {accessibleFilteredItems}
       </PickerItemsList>;
-  }, [testID, mode, useDialog, selectedItemPosition, topBarProps, cancelSelect, onDoneSelecting, multiDraftValue, showSearch, searchStyle, searchPlaceholder, _onSearchChange, renderCustomSearch, renderHeader, listProps, filteredItems, useSafeArea, useWheelPicker, items, showLoader]);
+  }, [testID, mode, useDialog, selectedItemPosition, topBarProps, cancelSelect, onDoneSelecting, multiDraftValue, showSearch, searchStyle, searchPlaceholder, _onSearchChange, renderCustomSearch, renderHeader, listProps, accessibleFilteredItems, useSafeArea, useWheelPicker, items, showLoader]);
   return <PickerContext.Provider value={contextValue}>
       {<ExpandableOverlay ref={pickerExpandable} useDialog={useDialog || useWheelPicker} dialogProps={DEFAULT_DIALOG_PROPS} migrateDialog expandableContent={expandableModalContent} renderCustomOverlay={renderOverlay ? _renderOverlay : undefined} onPress={onPress} testID={testID} {...customPickerProps} disabled={themeProps.editable === false}>
           {renderTextField()}

package/src/components/pieChart/pieChart.api.json

@@ -4,12 +4,50 @@
   "description": "Pie Chart",
   "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/PieChartScreen.tsx",
   "props": [
-    {"name": "segments", "type": "PieChartSegmentProps[]", "description": "Pie chart segments array"},
-    {"name": "diameter", "type": "number", "description": "Pie chart diameter"},
-    {"name": "dividerWidth", "type": "number", "description": "The width of the divider between the segments"},
-    {"name": "dividerColor", "type": "ColorValue", "description": "The color of the divider between the segments"}
+    {
+      "name": "segments",
+      "type": "PieChartSegmentProps[]",
+      "description": "Pie chart segments array"
+    },
+    {
+      "name": "diameter",
+      "type": "number",
+      "description": "Pie chart diameter"
+    },
+    {
+      "name": "dividerWidth",
+      "type": "number",
+      "description": "The width of the divider between the segments"
+    },
+    {
+      "name": "dividerColor",
+      "type": "ColorValue",
+      "description": "The color of the divider between the segments"
+    }
   ],
   "snippet": [
     "<PieChart segments={[{percentage: 50, color: Colors.blue30}, {percentage: 30, color: Colors.red30}, {percentage: 20, color: Colors.green30}]} diameter={144}/>"
-  ]
+  ],
+  "docs": {
+    "hero": {
+      "title": "PieChart",
+      "description": "Pie Chart"
+    },
+    "tabs": [
+      {
+        "title": "UX Guidelines",
+        "sections": [
+          {
+            "type": "section",
+            "content": [
+              {
+                "value": "https://embed.figma.com/design/Krv1pLl7kq2L52vMRwd498/MADS-Guidelines?node-id=22898-888932&embed-host=share",
+                "height": 1600
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  }
 }

package/src/components/radioButton/radioButton.api.json

@@ -87,11 +87,15 @@
   ],
   "snippet": [
     "function Example(props) {",
-    "  const [value, setValue] = useState(false$1);",
+    "  const [value, setValue] = useState(false);",
+    "  const [value2, setValue2] = useState(false);",
+    "  const [value3, setValue3] = useState(false);",
     "  return (",
-    "    <div>",
-    "      <RadioButton label={'Individual Radio Button'} selected={value$2} onPress={() => setValue(!value)$3}/>",
-    "    </div>",
+    "    <View flex padding-s5 gap-s4>",
+    "      <RadioButton label={'Radio Button'} selected={value} onPress={() => setValue(!value)}/>",
+    "      <RadioButton label={'Green Radio Button'} color={Colors.green30} selected={value2} onPress={() => setValue2(!value2)}/>",
+    "      <RadioButton label={'Square Radio Button'} borderRadius={0} size={20} selected={value3} onPress={() => setValue3(!value3)}/>",
+    "    </View>",
     "  );",
     "}"
   ],

package/src/components/radioGroup/radioGroup.api.json

@@ -23,14 +23,15 @@
   ],
   "snippet": [
     "function Example(props) {",
-    "  const [currentValue, setCurrentValue] = useState('yes'$1);",
+    "  const [currentValue, setCurrentValue] = useState('yes');",
     "  return (",
-    "    <div>",
-    "      <RadioGroup initialValue={currentValue$2} onValueChange={setCurrentValue$3}>",
-    "        <RadioButton value={'yes'$4} label={'Yes'$5}/>",
-    "        <RadioButton marginT-10 value={'no'$6} label={'No'$7}/>",
+    "    <View flex padding-s5>",
+    "      <RadioGroup initialValue={currentValue} onValueChange={setCurrentValue} gap-s4>",
+    "        <RadioButton value={'yes'} label={'Yes'}/>",
+    "        <RadioButton value={'no'} label={'No'}/>",
+    "        <RadioButton value={'maybe'} label={'Maybe'}/>",
     "      </RadioGroup>",
-    "    </div>",
+    "    </View>",
     "  );",
     "}"
   ]

package/src/components/segmentedControl/segmentedControl.api.json

@@ -96,18 +96,22 @@
       "description": "Pass props for the SegmentedControl label"
     },
     {
-      "name":"preset",
+      "name": "preset",
       "type": "SegmentedControlPreset",
       "description": "Preset of the SegmentedControl [default, form]"
     }
   ],
   "snippet": [
-    "<SegmentedControl segments={[{label: '1st'}, {label: '2nd'}]$1}/>"
+    "<View flex padding-s5 gap-s4>",
+    "<SegmentedControl segments={[{label: '1st'}, {label: '2nd'}, {label: '3rd'}]}/>",
+    "<SegmentedControl segments={[{label: '1st'}, {label: '2nd'}, {label: '3rd'}]} preset='form'/>",
+    "<SegmentedControl segments={[{label: '1st'}, {label: '2nd'}, {label: '3rd'}]} borderRadius={12} outlineColor={Colors.yellow30} outlineWidth={3} activeColor={Colors.yellow20}/>",
+    "</View>"
   ],
   "docs": {
     "hero": {
       "title": "SegmentedControl",
-      "description": "A segmented control is a linear set of two or more segments.
Segmented control is often used to display and switch between different views.",
+      "description": "A segmented control is a linear set of two or more segments.
Segmented control is often used to display and switch between different views.",
       "type": "hero",
       "layout": "horizontal",
       "content": [
@@ -131,10 +135,7 @@
           },
           {
             "type": "table",
-            "columns": [
-              "Property",
-              "Preview"
-            ],
+            "columns": ["Property", "Preview"],
             "items": [
               {
                 "title": "Default",
@@ -147,7 +148,7 @@
               },
               {
                 "title": "Form",
-                "description": "markdown:\nSuitable for form or settings screens, matches with other related components such as textField, Picker and others.  \n    preset=\"form\"",
+                "description": "Suitable for form or settings screens, matches with other related components such as textField, Picker and others.  \n    preset=\"form\"",
                 "content": [
                   {
                     "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/SegmentedControl/segmentedControl_style_form.png"
@@ -159,10 +160,7 @@
           },
           {
             "type": "table",
-            "columns": [
-              "Property",
-              "Preview"
-            ],
+            "columns": ["Property", "Preview"],
             "items": [
               {
                 "title": "Full width",

package/src/components/slider/slider.api.json

@@ -227,7 +227,7 @@
               }
             ],
             "title": "Spec",
-            "description": "Markdown:\n\n**Linear slider**\n\n**Default**\nThumb: 24px  \nOutline: 1.5px\n\n**On tap**\nThumb: 40px\nOutline: 1.5px\n\n**Disabled**"
+            "description": "markdown:\n\n**Linear slider**\n\n**Default**\nThumb: 24px  \nOutline: 1.5px\n\n**On tap**\nThumb: 40px\nOutline: 1.5px\n\n**Disabled**"
           },
           {
             "type": "section",
@@ -237,7 +237,7 @@
                 "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Slider/slider_spec_range.png"
               }
             ],
-            "description": "Markdown:\n\n**Range slider**\n\n**Initial state**\nWidest range is displayed by default.\n\n**Thumbs**\nThumbs should not cross each other and keep minimum distance between them of S2 (8px). Thumbs shouldn’t overlap each other when idle.\n\n**Spacing**\nMinimum spacing between idle Thumbs - S2"
+            "description": "markdown:\n\n**Range slider**\n\n**Initial state**\nWidest range is displayed by default.\n\n**Thumbs**\nThumbs should not cross each other and keep minimum distance between them of S2 (8px). Thumbs shouldn’t overlap each other when idle.\n\n**Spacing**\nMinimum spacing between idle Thumbs - S2"
           }
         ]
       }

package/src/components/sortableGridList/sortableGridList.api.json

@@ -3,7 +3,9 @@
   "category": "lists",
   "description": "An sortable grid list (based on GridList component)",
   "note": "This component supports square items only",
-  "extends": ["lists/GridList"],
+  "extends": [
+    "lists/GridList"
+  ],
   "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/SortableGridListScreen.tsx",
   "props": [
     {
@@ -12,7 +14,11 @@
       "note": "Do not update 'data' in 'onOrderChange' (i.e. for each order change); only update it when you change the items (i.g. adding and removing an item).",
       "description": "Data of items with an id prop as unique identifier"
     },
-    {"name": "renderItem", "type": "FlatListProps['renderItem']", "description": "Custom render item callback"},
+    {
+      "name": "renderItem",
+      "type": "FlatListProps['renderItem']",
+      "description": "Custom render item callback"
+    },
     {
       "name": "onOrderChange",
       "type": "(newData: T[], newOrder: ItemsOrder) => void",
@@ -73,5 +79,27 @@
     "      </View>",
     "  );",
     "}"
-  ]
+  ],
+  "docs": {
+    "hero": {
+      "title": "SortableGridList",
+      "description": "An sortable grid list (based on GridList component)"
+    },
+    "tabs": [
+      {
+        "title": "UX Guidelines",
+        "sections": [
+          {
+            "type": "section",
+            "content": [
+              {
+                "value": "https://embed.figma.com/design/Krv1pLl7kq2L52vMRwd498/MADS-Guidelines?node-id=16685-543834&embed-host=share",
+                "height": 1600
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  }
 }

package/src/components/stepper/stepper.api.json

@@ -58,7 +58,9 @@
     }
   ],
   "snippet": [
-    "<Stepper$1/>"
+    "<View flex center>",
+    "<Stepper minValue={0} maxValue={5}/>",
+    "</View>"
   ],
   "docs": {
     "hero": {