@hero-design/rn 8.92.0 → 8.92.1

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

@@ -863,6 +863,600 @@ exports[`OptionList render isLoading correctly 1`] = `
 </View>
 `;
 
+exports[`OptionList render object value correctly 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <RCTScrollView
+    ListFooterComponent={null}
+    data={
+      [
+        {
+          "category": "A",
+          "data": [
+            {
+              "text": "Item 1",
+              "value": {
+                "id": "1",
+                "label": "Item 1",
+              },
+            },
+          ],
+        },
+        {
+          "category": "B",
+          "data": [
+            {
+              "text": "Item 2",
+              "value": {
+                "id": "2",
+                "label": "Item 2",
+              },
+            },
+          ],
+        },
+      ]
+    }
+    getItem={[Function]}
+    getItemCount={[Function]}
+    keyExtractor={[Function]}
+    onContentSizeChange={[Function]}
+    onEndReached={[Function]}
+    onEndReachedThreshold={0.1}
+    onLayout={[Function]}
+    onMomentumScrollBegin={[Function]}
+    onMomentumScrollEnd={[Function]}
+    onScroll={[Function]}
+    onScrollBeginDrag={[Function]}
+    onScrollEndDrag={[Function]}
+    renderItem={[Function]}
+    scrollEventThrottle={0.0001}
+    stickyHeaderIndices={
+      [
+        0,
+        3,
+      ]
+    }
+    style={
+      [
+        {
+          "paddingHorizontal": 12,
+        },
+        [
+          {
+            "paddingBottom": 16,
+          },
+          {},
+        ],
+      ]
+    }
+  >
+    <View>
+      <View
+        onFocusCapture={[Function]}
+        onLayout={[Function]}
+        style={null}
+      >
+        <View
+          style={
+            [
+              {
+                "alignContent": "center",
+                "backgroundColor": "#f6f6f7",
+                "display": "flex",
+                "flexDirection": "row",
+                "justifyContent": "space-between",
+                "marginBottom": 16,
+                "paddingHorizontal": 16,
+                "paddingVertical": 8,
+              },
+              {
+                "marginBottom": 0,
+              },
+            ]
+          }
+          themeSize="medium"
+        >
+          <View
+            style={
+              [
+                {
+                  "alignItems": "center",
+                  "display": "flex",
+                  "flexDirection": "row",
+                },
+                undefined,
+              ]
+            }
+          >
+            <View
+              style={
+                [
+                  {
+                    "marginRight": 12,
+                  },
+                  undefined,
+                ]
+              }
+            />
+            <Text
+              allowFontScaling={false}
+              style={
+                [
+                  {
+                    "color": "#001f23",
+                    "fontFamily": "BeVietnamPro-Regular",
+                    "fontSize": 14,
+                    "letterSpacing": 0.48,
+                    "lineHeight": 22,
+                  },
+                  undefined,
+                ]
+              }
+              themeIntent="body"
+              themeTypeface="neutral"
+              themeVariant="small"
+            >
+              A
+            </Text>
+          </View>
+        </View>
+      </View>
+      <View
+        onFocusCapture={[Function]}
+        onLayout={[Function]}
+        style={null}
+      >
+        <View>
+          <View
+            highlighted={false}
+            section={
+              {
+                "category": "A",
+                "data": [
+                  {
+                    "text": "Item 1",
+                    "value": {
+                      "id": "1",
+                      "label": "Item 1",
+                    },
+                  },
+                ],
+              }
+            }
+            style={
+              [
+                {
+                  "marginTop": 12,
+                },
+                undefined,
+              ]
+            }
+            trailingItem={
+              {
+                "text": "Item 1",
+                "value": {
+                  "id": "1",
+                  "label": "Item 1",
+                },
+              }
+            }
+            trailingSection={
+              {
+                "category": "B",
+                "data": [
+                  {
+                    "text": "Item 2",
+                    "value": {
+                      "id": "2",
+                      "label": "Item 2",
+                    },
+                  },
+                ],
+              }
+            }
+          />
+          <View
+            accessibilityState={
+              {
+                "disabled": false,
+              }
+            }
+            accessibilityValue={
+              {
+                "max": undefined,
+                "min": undefined,
+                "now": undefined,
+                "text": undefined,
+              }
+            }
+            accessible={true}
+            focusable={true}
+            onClick={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
+              [
+                {
+                  "alignItems": "center",
+                  "backgroundColor": undefined,
+                  "borderRadius": 4,
+                  "flexDirection": "row",
+                  "opacity": 1,
+                  "padding": 16,
+                },
+                undefined,
+              ]
+            }
+          >
+            <View
+              style={
+                [
+                  {
+                    "flex": 1,
+                  },
+                  undefined,
+                ]
+              }
+            >
+              <Text
+                allowFontScaling={false}
+                style={
+                  [
+                    {
+                      "color": "#001f23",
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 16,
+                      "letterSpacing": 0.48,
+                      "lineHeight": 24,
+                    },
+                    undefined,
+                  ]
+                }
+                themeIntent="body"
+                themeTypeface="neutral"
+                themeVariant="regular"
+              >
+                Item 1
+              </Text>
+            </View>
+          </View>
+          <View
+            highlighted={false}
+            leadingItem={
+              {
+                "text": "Item 1",
+                "value": {
+                  "id": "1",
+                  "label": "Item 1",
+                },
+              }
+            }
+            section={
+              {
+                "category": "A",
+                "data": [
+                  {
+                    "text": "Item 1",
+                    "value": {
+                      "id": "1",
+                      "label": "Item 1",
+                    },
+                  },
+                ],
+              }
+            }
+            style={
+              [
+                {
+                  "marginTop": 12,
+                },
+                undefined,
+              ]
+            }
+            trailingSection={
+              {
+                "category": "B",
+                "data": [
+                  {
+                    "text": "Item 2",
+                    "value": {
+                      "id": "2",
+                      "label": "Item 2",
+                    },
+                  },
+                ],
+              }
+            }
+          />
+        </View>
+      </View>
+      <View
+        onFocusCapture={[Function]}
+        onLayout={[Function]}
+        style={null}
+      />
+      <View
+        onFocusCapture={[Function]}
+        onLayout={[Function]}
+        style={null}
+      >
+        <View
+          style={
+            [
+              {
+                "alignContent": "center",
+                "backgroundColor": "#f6f6f7",
+                "display": "flex",
+                "flexDirection": "row",
+                "justifyContent": "space-between",
+                "marginBottom": 16,
+                "paddingHorizontal": 16,
+                "paddingVertical": 8,
+              },
+              {
+                "marginBottom": 0,
+              },
+            ]
+          }
+          themeSize="medium"
+        >
+          <View
+            style={
+              [
+                {
+                  "alignItems": "center",
+                  "display": "flex",
+                  "flexDirection": "row",
+                },
+                undefined,
+              ]
+            }
+          >
+            <View
+              style={
+                [
+                  {
+                    "marginRight": 12,
+                  },
+                  undefined,
+                ]
+              }
+            />
+            <Text
+              allowFontScaling={false}
+              style={
+                [
+                  {
+                    "color": "#001f23",
+                    "fontFamily": "BeVietnamPro-Regular",
+                    "fontSize": 14,
+                    "letterSpacing": 0.48,
+                    "lineHeight": 22,
+                  },
+                  undefined,
+                ]
+              }
+              themeIntent="body"
+              themeTypeface="neutral"
+              themeVariant="small"
+            >
+              B
+            </Text>
+          </View>
+        </View>
+      </View>
+      <View
+        onFocusCapture={[Function]}
+        onLayout={[Function]}
+        style={null}
+      >
+        <View>
+          <View
+            highlighted={false}
+            leadingSection={
+              {
+                "category": "A",
+                "data": [
+                  {
+                    "text": "Item 1",
+                    "value": {
+                      "id": "1",
+                      "label": "Item 1",
+                    },
+                  },
+                ],
+              }
+            }
+            section={
+              {
+                "category": "B",
+                "data": [
+                  {
+                    "text": "Item 2",
+                    "value": {
+                      "id": "2",
+                      "label": "Item 2",
+                    },
+                  },
+                ],
+              }
+            }
+            style={
+              [
+                {
+                  "marginTop": 12,
+                },
+                undefined,
+              ]
+            }
+            trailingItem={
+              {
+                "text": "Item 2",
+                "value": {
+                  "id": "2",
+                  "label": "Item 2",
+                },
+              }
+            }
+          />
+          <View
+            accessibilityState={
+              {
+                "disabled": false,
+              }
+            }
+            accessibilityValue={
+              {
+                "max": undefined,
+                "min": undefined,
+                "now": undefined,
+                "text": undefined,
+              }
+            }
+            accessible={true}
+            focusable={true}
+            onClick={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
+              [
+                {
+                  "alignItems": "center",
+                  "backgroundColor": "#ffffff",
+                  "borderRadius": 4,
+                  "flexDirection": "row",
+                  "opacity": 1,
+                  "padding": 16,
+                },
+                undefined,
+              ]
+            }
+          >
+            <View
+              style={
+                [
+                  {
+                    "flex": 1,
+                  },
+                  undefined,
+                ]
+              }
+            >
+              <Text
+                allowFontScaling={false}
+                style={
+                  [
+                    {
+                      "color": "#001f23",
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 16,
+                      "letterSpacing": 0.48,
+                      "lineHeight": 24,
+                    },
+                    undefined,
+                  ]
+                }
+                themeIntent="body"
+                themeTypeface="neutral"
+                themeVariant="regular"
+              >
+                Item 2
+              </Text>
+            </View>
+          </View>
+          <View
+            highlighted={false}
+            leadingItem={
+              {
+                "text": "Item 2",
+                "value": {
+                  "id": "2",
+                  "label": "Item 2",
+                },
+              }
+            }
+            leadingSection={
+              {
+                "category": "A",
+                "data": [
+                  {
+                    "text": "Item 1",
+                    "value": {
+                      "id": "1",
+                      "label": "Item 1",
+                    },
+                  },
+                ],
+              }
+            }
+            section={
+              {
+                "category": "B",
+                "data": [
+                  {
+                    "text": "Item 2",
+                    "value": {
+                      "id": "2",
+                      "label": "Item 2",
+                    },
+                  },
+                ],
+              }
+            }
+            style={
+              [
+                {
+                  "marginTop": 12,
+                },
+                undefined,
+              ]
+            }
+          />
+        </View>
+      </View>
+      <View
+        onFocusCapture={[Function]}
+        onLayout={[Function]}
+        style={null}
+      />
+    </View>
+  </RCTScrollView>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
 exports[`OptionList renders correctly 1`] = `
 <View
   style={

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

@@ -267,6 +267,32 @@ describe('rendering', () => {
     expect(getByText('Monday')).toBeTruthy();
     expect(toJSON()).toMatchSnapshot();
   });
+
+  it('renders correct value when value is an object', () => {
+    const optionsWithObjectValue = [
+      {
+        value: { id: '1', label: 'Item 1' },
+        text: 'Option with object value 1',
+      },
+      {
+        value: { id: '2', label: 'Item 2' },
+        text: 'Option with object value 2',
+      },
+    ];
+    const { getByText, getByTestId } = renderWithTheme(
+      <SingleSelect
+        options={optionsWithObjectValue}
+        value={optionsWithObjectValue[0].value}
+        onConfirm={jest.fn()}
+        label="Select an item"
+      />
+    );
+
+    fireEvent.press(getByTestId('text-input'));
+
+    expect(getByText('Option with object value 1')).toBeVisible();
+    expect(getByText('Option with object value 2')).toBeVisible();
+  });
 });
 
 describe('behavior', () => {

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

@@ -7,6 +7,7 @@ import { TouchableOpacity, View } from 'react-native';
 import BottomSheet from '../../BottomSheet';
 import TextInput from '../../TextInput';
 import {
+  deepCompareValue,
   getScrollParams,
   toFlatOptions,
   toSections,
@@ -66,7 +67,10 @@ const SingleSelect = <V, T extends OptionType<V>>({
   const sectionListRef = useRef<SectionList<T, SectionType>>(null);
   const sections = toSections(options);
   const flatOptions = toFlatOptions(options);
-  const displayedValue = flatOptions.find((opt) => value === opt.value)?.text;
+  const displayedValue = flatOptions.find((opt) =>
+    deepCompareValue(opt.value, value)
+  )?.text;
+
   const rawValue = value ? String(value) : undefined;
   const { variant: bottomSheetVariant, header: bottomSheetHeader } =
     bottomSheetConfig;

package/src/components/Select/__tests__/helpers.spec.tsx

@@ -1,4 +1,5 @@
 import {
+  deepCompareValue,
   getScrollParams,
   isSections,
   toFlatOptions,
@@ -72,3 +73,38 @@ describe('getScrollParams', () => {
     });
   });
 });
+
+describe('deepCompareValue', () => {
+  it.each`
+    a                  | b                  | expected
+    ${1}               | ${1}               | ${true}
+    ${'test'}          | ${'test'}          | ${true}
+    ${true}            | ${true}            | ${true}
+    ${null}            | ${null}            | ${true}
+    ${undefined}       | ${undefined}       | ${true}
+    ${1}               | ${2}               | ${false}
+    ${'test'}          | ${'other'}         | ${false}
+    ${true}            | ${false}           | ${false}
+    ${null}            | ${undefined}       | ${false}
+    ${NaN}             | ${NaN}             | ${false}
+    ${1}               | ${NaN}             | ${false}
+    ${[1, 2, 3]}       | ${[1, 2, 3]}       | ${true}
+    ${['a', 'b']}      | ${['a', 'b']}      | ${true}
+    ${[]}              | ${[]}              | ${true}
+    ${[1, 2]}          | ${[1, 2, 3]}       | ${false}
+    ${[1, 2]}          | ${[2, 1]}          | ${false}
+    ${[1, [2, 3]]}     | ${[1, [2, 3]]}     | ${true}
+    ${[1, [2, 3]]}     | ${[1, [2, 4]]}     | ${false}
+    ${{ a: 1, b: 2 }}  | ${{ a: 1, b: 2 }}  | ${true}
+    ${{}}              | ${{}}              | ${true}
+    ${{ a: 1 }}        | ${{ a: 2 }}        | ${false}
+    ${{ a: 1 }}        | ${{ b: 1 }}        | ${false}
+    ${{ a: 1 }}        | ${{ a: 1, b: 2 }}  | ${false}
+    ${{ a: { b: 1 } }} | ${{ a: { b: 1 } }} | ${true}
+    ${{ a: { b: 1 } }} | ${{ a: { b: 2 } }} | ${false}
+    ${1}               | ${'1'}             | ${false}
+    ${[]}              | ${{}}              | ${false}
+  `('should compare $a and $b correctly', ({ a, b, expected }) => {
+    expect(deepCompareValue(a, b)).toBe(expected);
+  });
+});