react-native-ui-lib 7.40.1-snapshot.6861 → 7.40.1-snapshot.6870

package/package.json

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

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/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/switch/switch.api.json

@@ -81,17 +81,13 @@
   "snippet": [
     "function Example(props) {",
     "  const [value, setValue] = useState(false$1);",
-    "  return (",
-    "    <div>",
-    "      <Switch value={value$2} onValueChange={setValue$3}/>",
-    "    </div>",
-    "  );",
+    "  return <Switch margin-20 value={value$2} onValueChange={setValue$3}/>;",
     "}"
   ],
   "docs": {
     "hero": {
       "title": "Switch",
-      "description": "Use switches to toggle a single option on or off, activate or deactivate, and switch between two different states.  \n\nConsider using switch instead of checkbox, when appropriate. \nConsider using switch instead of radio buttons if there’s only two  options to choose from. ",
+      "description": "Use switches to toggle a single option on or off, activate or deactivate, and switch between two different states. \n\nConsider using switch instead of checkbox, when appropriate. \nConsider using switch instead of radio buttons if there’s only two  options to choose from. ",
       "type": "hero",
       "layout": "horizontal",
       "content": [
@@ -125,7 +121,8 @@
                 "description": "",
                 "content": [
                   {
-                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Switch/switch_overview_style_light.png"
+                    "background": "#A6ACB1",
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Switch/SwitchLight.png"
                   }
                 ]
               }
@@ -149,7 +146,8 @@
                     "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Switch/switch_overview_state_default_on.png"
                   },
                   {
-                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Switch/switch_overview_state_light_on.png"
+                    "background": "#A6ACB1",
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Switch/SwitchLight.png"
                   }
                 ]
               },
@@ -161,7 +159,8 @@
                     "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Switch/switch_overview_state_default_off.png"
                   },
                   {
-                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Switch/switch_overview_state_light_off.png"
+                    "background": "#A6ACB1",
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Switch/SwitchLightOff.png"
                   }
                 ]
               },
@@ -173,7 +172,8 @@
                     "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Switch/switch_overview_state_default_disabledOn.png"
                   },
                   {
-                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Switch/switch_overview_state_light_disabledOn.png"
+                    "background": "#A6ACB1",
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Switch/SwitchLightDisabled.png"
                   }
                 ]
               },
@@ -185,7 +185,8 @@
                     "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Switch/switch_overview_state_default_disabledOff.png"
                   },
                   {
-                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Switch/switch_overview_state_light_disabledOff.png"
+                    "background": "#A6ACB1",
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Switch/SwitchLightDisabledOff.png"
                   }
                 ]
               }
@@ -197,17 +198,21 @@
             "type": "list",
             "items": [
               {
-                "title": "",
-                "description": "markdown: \n### Size  \nOne size ",
+                "title": "Size",
+                "description": "Currently, only one size available for the ToggleSwitch.",
                 "content": [
                   {
-                    "value": "https://embed.figma.com/design/xFjvYNkGTmYTGYMLrmz9Ir/Docs-Assets?node-id=52-7459&embed-host=share"
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Switch/switch_overview_spec_size.png"
                   }
                 ]
               },
               {
-                "title": "",
-                "description": "markdown: \n### Haptic  \nHaptic is played on tap.\nHaptic preset: [impactMedium]",
+                "title": "Colors",
+                "description": "markdown:<b>ON</b><br>Background color: $backgroundPrimaryHeavy<br>Knob color: $iconDefaultLight<br><b>OFF</b><br>Background color: $backgroundNeutralHeavy<br>Knob color: $iconDefaultLight<br><b>Disabled</b><br>Background color: $backgroundDisabled<br>Knob color: $iconDefaultLight"
+              },
+              {
+                "title": "Haptic ",
+                "description": "Haptic is played on tap. Haptic preset: [impactMedium]",
                 "content": [
                   {
                     "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Switch/switch_overview_spec_haptic.png"