@hero-design/rn 8.12.0-rc.0 → 8.12.1

package/src/components/Select/MultiSelect/__tests__/index.spec.tsx

@@ -198,6 +198,26 @@ describe('rendering', () => {
     expect(getByText('Custom daemon')).toBeTruthy();
   });
 
+  it('does not render custom value when value is empty', () => {
+    const { queryByText } = renderWithTheme(
+      <MultiSelect<string, CustomOptionType>
+        label="Choose collaborators"
+        footerLabel="Confirm"
+        options={collaboratorSections}
+        value={[]}
+        onConfirm={jest.fn()}
+        renderSelectedValue={(selectedValue, _inputProps) => (
+          <>
+            {selectedValue.map(() => (
+              <Typography.Text>Custom value</Typography.Text>
+            ))}
+          </>
+        )}
+      />
+    );
+    expect(queryByText('Custom value')).toBeNull();
+  });
+
   it('allows custom footer', () => {
     const { getByText, queryByText } = renderWithTheme(
       <MultiSelect<string, CustomOptionType>

package/src/components/Select/MultiSelect/index.tsx

@@ -111,7 +111,7 @@ function MultiSelect<V, T extends OptionType<V>>({
               style={style}
               testID={testID}
               renderInputValue={
-                renderSelectedValue !== undefined
+                renderSelectedValue !== undefined && displayedValue?.length > 0
                   ? (props) => renderSelectedValue(value, props)
                   : undefined
               }

package/src/components/Select/SingleSelect/OptionList.tsx

@@ -1,5 +1,9 @@
 import React from 'react';
-import type { SectionListRenderItemInfo, SectionList } from 'react-native';
+import {
+  SectionListRenderItemInfo,
+  SectionList,
+  Dimensions,
+} from 'react-native';
 import Option from './Option';
 import type { SingleSelectProps } from '.';
 import type { OptionType, SectionType } from '../types';
@@ -64,6 +68,9 @@ const OptionList = <V, T extends OptionType<V>>({
       sections={sections}
       renderItem={renderItem}
       sectionListRef={sectionListRef}
+      style={{
+        ...(onQueryChange ? { height: Dimensions.get('screen').height } : {}),
+      }}
       {...rest}
     />
   );

package/src/components/Select/SingleSelect/__tests__/__snapshots__/Option.spec.tsx.snap

@@ -8,7 +8,6 @@ exports[`Option renders correctly 1`] = `
     }
   }
   accessible={true}
-  collapsable={false}
   focusable={true}
   onClick={[Function]}
   onResponderGrant={[Function]}
@@ -18,14 +17,17 @@ exports[`Option renders correctly 1`] = `
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
   style={
-    Object {
-      "alignItems": "center",
-      "backgroundColor": "#ece8ef",
-      "borderRadius": 4,
-      "flexDirection": "row",
-      "opacity": 1,
-      "padding": 16,
-    }
+    Array [
+      Object {
+        "alignItems": "center",
+        "backgroundColor": "#ece8ef",
+        "borderRadius": 4,
+        "flexDirection": "row",
+        "opacity": 1,
+        "padding": 16,
+      },
+      undefined,
+    ]
   }
 >
   <View

package/src/components/Select/SingleSelect/__tests__/__snapshots__/OptionList.spec.tsx.snap

@@ -70,7 +70,7 @@ exports[`OptionList render isLoading correctly 1`] = `
         Object {
           "paddingBottom": 16,
         },
-        undefined,
+        Object {},
       ],
     ]
   }
@@ -198,7 +198,6 @@ exports[`OptionList render isLoading correctly 1`] = `
             }
           }
           accessible={true}
-          collapsable={false}
           focusable={true}
           onClick={[Function]}
           onResponderGrant={[Function]}
@@ -208,14 +207,17 @@ exports[`OptionList render isLoading correctly 1`] = `
           onResponderTerminationRequest={[Function]}
           onStartShouldSetResponder={[Function]}
           style={
-            Object {
-              "alignItems": "center",
-              "backgroundColor": "#ece8ef",
-              "borderRadius": 4,
-              "flexDirection": "row",
-              "opacity": 1,
-              "padding": 16,
-            }
+            Array [
+              Object {
+                "alignItems": "center",
+                "backgroundColor": "#ece8ef",
+                "borderRadius": 4,
+                "flexDirection": "row",
+                "opacity": 1,
+                "padding": 16,
+              },
+              undefined,
+            ]
           }
         >
           <View
@@ -421,7 +423,6 @@ exports[`OptionList render isLoading correctly 1`] = `
             }
           }
           accessible={true}
-          collapsable={false}
           focusable={true}
           onClick={[Function]}
           onResponderGrant={[Function]}
@@ -431,14 +432,17 @@ exports[`OptionList render isLoading correctly 1`] = `
           onResponderTerminationRequest={[Function]}
           onStartShouldSetResponder={[Function]}
           style={
-            Object {
-              "alignItems": "center",
-              "backgroundColor": "#ffffff",
-              "borderRadius": 4,
-              "flexDirection": "row",
-              "opacity": 1,
-              "padding": 16,
-            }
+            Array [
+              Object {
+                "alignItems": "center",
+                "backgroundColor": "#ffffff",
+                "borderRadius": 4,
+                "flexDirection": "row",
+                "opacity": 1,
+                "padding": 16,
+              },
+              undefined,
+            ]
           }
         >
           <View
@@ -536,7 +540,6 @@ exports[`OptionList render isLoading correctly 1`] = `
             }
           }
           accessible={true}
-          collapsable={false}
           focusable={true}
           onClick={[Function]}
           onResponderGrant={[Function]}
@@ -546,14 +549,17 @@ exports[`OptionList render isLoading correctly 1`] = `
           onResponderTerminationRequest={[Function]}
           onStartShouldSetResponder={[Function]}
           style={
-            Object {
-              "alignItems": "center",
-              "backgroundColor": "#ffffff",
-              "borderRadius": 4,
-              "flexDirection": "row",
-              "opacity": 1,
-              "padding": 16,
-            }
+            Array [
+              Object {
+                "alignItems": "center",
+                "backgroundColor": "#ffffff",
+                "borderRadius": 4,
+                "flexDirection": "row",
+                "opacity": 1,
+                "padding": 16,
+              },
+              undefined,
+            ]
           }
         >
           <View
@@ -852,7 +858,7 @@ exports[`OptionList renders correctly 1`] = `
         Object {
           "paddingBottom": 16,
         },
-        undefined,
+        Object {},
       ],
     ]
   }
@@ -980,7 +986,6 @@ exports[`OptionList renders correctly 1`] = `
             }
           }
           accessible={true}
-          collapsable={false}
           focusable={true}
           onClick={[Function]}
           onResponderGrant={[Function]}
@@ -990,14 +995,17 @@ exports[`OptionList renders correctly 1`] = `
           onResponderTerminationRequest={[Function]}
           onStartShouldSetResponder={[Function]}
           style={
-            Object {
-              "alignItems": "center",
-              "backgroundColor": "#ece8ef",
-              "borderRadius": 4,
-              "flexDirection": "row",
-              "opacity": 1,
-              "padding": 16,
-            }
+            Array [
+              Object {
+                "alignItems": "center",
+                "backgroundColor": "#ece8ef",
+                "borderRadius": 4,
+                "flexDirection": "row",
+                "opacity": 1,
+                "padding": 16,
+              },
+              undefined,
+            ]
           }
         >
           <View
@@ -1203,7 +1211,6 @@ exports[`OptionList renders correctly 1`] = `
             }
           }
           accessible={true}
-          collapsable={false}
           focusable={true}
           onClick={[Function]}
           onResponderGrant={[Function]}
@@ -1213,14 +1220,17 @@ exports[`OptionList renders correctly 1`] = `
           onResponderTerminationRequest={[Function]}
           onStartShouldSetResponder={[Function]}
           style={
-            Object {
-              "alignItems": "center",
-              "backgroundColor": "#ffffff",
-              "borderRadius": 4,
-              "flexDirection": "row",
-              "opacity": 1,
-              "padding": 16,
-            }
+            Array [
+              Object {
+                "alignItems": "center",
+                "backgroundColor": "#ffffff",
+                "borderRadius": 4,
+                "flexDirection": "row",
+                "opacity": 1,
+                "padding": 16,
+              },
+              undefined,
+            ]
           }
         >
           <View
@@ -1318,7 +1328,6 @@ exports[`OptionList renders correctly 1`] = `
             }
           }
           accessible={true}
-          collapsable={false}
           focusable={true}
           onClick={[Function]}
           onResponderGrant={[Function]}
@@ -1328,14 +1337,17 @@ exports[`OptionList renders correctly 1`] = `
           onResponderTerminationRequest={[Function]}
           onStartShouldSetResponder={[Function]}
           style={
-            Object {
-              "alignItems": "center",
-              "backgroundColor": "#ffffff",
-              "borderRadius": 4,
-              "flexDirection": "row",
-              "opacity": 1,
-              "padding": 16,
-            }
+            Array [
+              Object {
+                "alignItems": "center",
+                "backgroundColor": "#ffffff",
+                "borderRadius": 4,
+                "flexDirection": "row",
+                "opacity": 1,
+                "padding": 16,
+              },
+              undefined,
+            ]
           }
         >
           <View
@@ -1481,7 +1493,7 @@ exports[`OptionList trigger onPress correctly on select new value 1`] = `
         Object {
           "paddingBottom": 16,
         },
-        undefined,
+        Object {},
       ],
     ]
   }
@@ -1609,7 +1621,6 @@ exports[`OptionList trigger onPress correctly on select new value 1`] = `
             }
           }
           accessible={true}
-          collapsable={false}
           focusable={true}
           onClick={[Function]}
           onResponderGrant={[Function]}
@@ -1619,14 +1630,17 @@ exports[`OptionList trigger onPress correctly on select new value 1`] = `
           onResponderTerminationRequest={[Function]}
           onStartShouldSetResponder={[Function]}
           style={
-            Object {
-              "alignItems": "center",
-              "backgroundColor": "#ece8ef",
-              "borderRadius": 4,
-              "flexDirection": "row",
-              "opacity": 1,
-              "padding": 16,
-            }
+            Array [
+              Object {
+                "alignItems": "center",
+                "backgroundColor": "#ece8ef",
+                "borderRadius": 4,
+                "flexDirection": "row",
+                "opacity": 1,
+                "padding": 16,
+              },
+              undefined,
+            ]
           }
         >
           <View
@@ -1832,7 +1846,6 @@ exports[`OptionList trigger onPress correctly on select new value 1`] = `
             }
           }
           accessible={true}
-          collapsable={false}
           focusable={true}
           onClick={[Function]}
           onResponderGrant={[Function]}
@@ -1842,14 +1855,17 @@ exports[`OptionList trigger onPress correctly on select new value 1`] = `
           onResponderTerminationRequest={[Function]}
           onStartShouldSetResponder={[Function]}
           style={
-            Object {
-              "alignItems": "center",
-              "backgroundColor": "#ffffff",
-              "borderRadius": 4,
-              "flexDirection": "row",
-              "opacity": 1,
-              "padding": 16,
-            }
+            Array [
+              Object {
+                "alignItems": "center",
+                "backgroundColor": "#ffffff",
+                "borderRadius": 4,
+                "flexDirection": "row",
+                "opacity": 1,
+                "padding": 16,
+              },
+              undefined,
+            ]
           }
         >
           <View
@@ -1947,7 +1963,6 @@ exports[`OptionList trigger onPress correctly on select new value 1`] = `
             }
           }
           accessible={true}
-          collapsable={false}
           focusable={true}
           onClick={[Function]}
           onResponderGrant={[Function]}
@@ -1957,14 +1972,17 @@ exports[`OptionList trigger onPress correctly on select new value 1`] = `
           onResponderTerminationRequest={[Function]}
           onStartShouldSetResponder={[Function]}
           style={
-            Object {
-              "alignItems": "center",
-              "backgroundColor": "#ffffff",
-              "borderRadius": 4,
-              "flexDirection": "row",
-              "opacity": 1,
-              "padding": 16,
-            }
+            Array [
+              Object {
+                "alignItems": "center",
+                "backgroundColor": "#ffffff",
+                "borderRadius": 4,
+                "flexDirection": "row",
+                "opacity": 1,
+                "padding": 16,
+              },
+              undefined,
+            ]
           }
         >
           <View
@@ -2110,7 +2128,7 @@ exports[`OptionList trigger onPress correctly on unselect current value 1`] = `
         Object {
           "paddingBottom": 16,
         },
-        undefined,
+        Object {},
       ],
     ]
   }
@@ -2238,7 +2256,6 @@ exports[`OptionList trigger onPress correctly on unselect current value 1`] = `
             }
           }
           accessible={true}
-          collapsable={false}
           focusable={true}
           onClick={[Function]}
           onResponderGrant={[Function]}
@@ -2248,14 +2265,17 @@ exports[`OptionList trigger onPress correctly on unselect current value 1`] = `
           onResponderTerminationRequest={[Function]}
           onStartShouldSetResponder={[Function]}
           style={
-            Object {
-              "alignItems": "center",
-              "backgroundColor": "#ece8ef",
-              "borderRadius": 4,
-              "flexDirection": "row",
-              "opacity": 1,
-              "padding": 16,
-            }
+            Array [
+              Object {
+                "alignItems": "center",
+                "backgroundColor": "#ece8ef",
+                "borderRadius": 4,
+                "flexDirection": "row",
+                "opacity": 1,
+                "padding": 16,
+              },
+              undefined,
+            ]
           }
         >
           <View
@@ -2461,7 +2481,6 @@ exports[`OptionList trigger onPress correctly on unselect current value 1`] = `
             }
           }
           accessible={true}
-          collapsable={false}
           focusable={true}
           onClick={[Function]}
           onResponderGrant={[Function]}
@@ -2471,14 +2490,17 @@ exports[`OptionList trigger onPress correctly on unselect current value 1`] = `
           onResponderTerminationRequest={[Function]}
           onStartShouldSetResponder={[Function]}
           style={
-            Object {
-              "alignItems": "center",
-              "backgroundColor": "#ffffff",
-              "borderRadius": 4,
-              "flexDirection": "row",
-              "opacity": 1,
-              "padding": 16,
-            }
+            Array [
+              Object {
+                "alignItems": "center",
+                "backgroundColor": "#ffffff",
+                "borderRadius": 4,
+                "flexDirection": "row",
+                "opacity": 1,
+                "padding": 16,
+              },
+              undefined,
+            ]
           }
         >
           <View
@@ -2576,7 +2598,6 @@ exports[`OptionList trigger onPress correctly on unselect current value 1`] = `
             }
           }
           accessible={true}
-          collapsable={false}
           focusable={true}
           onClick={[Function]}
           onResponderGrant={[Function]}
@@ -2586,14 +2607,17 @@ exports[`OptionList trigger onPress correctly on unselect current value 1`] = `
           onResponderTerminationRequest={[Function]}
           onStartShouldSetResponder={[Function]}
           style={
-            Object {
-              "alignItems": "center",
-              "backgroundColor": "#ffffff",
-              "borderRadius": 4,
-              "flexDirection": "row",
-              "opacity": 1,
-              "padding": 16,
-            }
+            Array [
+              Object {
+                "alignItems": "center",
+                "backgroundColor": "#ffffff",
+                "borderRadius": 4,
+                "flexDirection": "row",
+                "opacity": 1,
+                "padding": 16,
+              },
+              undefined,
+            ]
           }
         >
           <View