@hero-design/rn 8.92.0 → 8.92.1

package/.turbo/turbo-build.log

@@ -1,4 +1,4 @@
-(node:3019) ExperimentalWarning: Importing JSON modules is an experimental feature and might change at any time
+(node:3004) ExperimentalWarning: Importing JSON modules is an experimental feature and might change at any time
 (Use `node --trace-warnings ...` to show where the warning was created)
 
 src/index.ts → lib/index.js, es/index.js...
@@ -10,4 +10,4 @@
                                      ~~~~~~~~~~~~~~~~~~~
 
 (!) [plugin node-resolve] preferring built-in module 'events' over local alternative at '/home/runner/work/hero-design/hero-design/node_modules/events/events.js', pass 'preferBuiltins: false' to disable this behavior or 'preferBuiltins: true' to disable this warning.or passing a function to 'preferBuiltins' to provide more fine-grained control over which built-in modules to prefer.
-created lib/index.js, es/index.js in 52.9s
+created lib/index.js, es/index.js in 53.1s

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @hero-design/rn
 
+## 8.92.1
+
+### Patch Changes
+
+- [#3731](https://github.com/Thinkei/hero-design/pull/3731) [`65b0238dcab7d2397c913fd36aec5690171f950b`](https://github.com/Thinkei/hero-design/commit/65b0238dcab7d2397c913fd36aec5690171f950b) Thanks [@vinhphan-eh](https://github.com/vinhphan-eh)! - [SingleSelect] Support rendering display value with object
+
 ## 8.92.0
 
 ### Minor Changes

package/es/index.js

@@ -18710,6 +18710,38 @@ var useKeyboard = function useKeyboard() {
     keyboardHeight: keyboardHeight
   };
 };
+var deepCompareValue = function deepCompareValue(a, b) {
+  // Handle strict equality first (handles primitives, null, undefined)
+  if (a === b) return true;
+  // Special handling for NaN (NaN !== NaN in JS)
+  if (typeof a === 'number' && typeof b === 'number' && Number.isNaN(a) && Number.isNaN(b)) {
+    return false;
+  }
+  // If either is null or undefined (but they are not strictly equal), return false
+  if (a == null || b == null) return false;
+  // If types don't match, they can't be equal
+  if (_typeof(a) !== _typeof(b)) return false;
+  // Handle array comparison
+  if (Array.isArray(a) && Array.isArray(b)) {
+    if (a.length !== b.length) return false;
+    return a.every(function (val, index) {
+      return deepCompareValue(val, b[index]);
+    });
+  }
+  // If one is array and the other isn't, return false
+  if (Array.isArray(a) !== Array.isArray(b)) return false;
+  // Handle object comparison
+  if (_typeof(a) === 'object' && _typeof(b) === 'object') {
+    var keysA = Object.keys(a);
+    var keysB = Object.keys(b);
+    if (keysA.length !== keysB.length) return false;
+    return keysA.every(function (key) {
+      return keysB.includes(key) && deepCompareValue(a[key], b[key]);
+    });
+  }
+  // If none of the above conditions matched, they're not equal
+  return false;
+};
 
 var SectionSpacer = index$a(View)(function (_ref) {
   var theme = _ref.theme;
@@ -19038,7 +19070,7 @@ var OptionList = function OptionList(_ref) {
     rest = _objectWithoutProperties(_ref, _excluded$c);
   var renderItem = function renderItem(info) {
     var item = info.item;
-    var selected = item.value === value;
+    var selected = deepCompareValue(item.value, value);
     var onItemPress = function onItemPress() {
       if (value === item.value) {
         onPress(null);
@@ -19109,7 +19141,7 @@ var SingleSelect = function SingleSelect(_ref) {
   var sections = toSections(options);
   var flatOptions = toFlatOptions(options);
   var displayedValue = (_flatOptions$find = flatOptions.find(function (opt) {
-    return value === opt.value;
+    return deepCompareValue(opt.value, value);
   })) === null || _flatOptions$find === void 0 ? void 0 : _flatOptions$find.text;
   var rawValue = value ? String(value) : undefined;
   var bottomSheetVariant = bottomSheetConfig.variant,

package/lib/index.js

@@ -18738,6 +18738,38 @@ var useKeyboard = function useKeyboard() {
     keyboardHeight: keyboardHeight
   };
 };
+var deepCompareValue = function deepCompareValue(a, b) {
+  // Handle strict equality first (handles primitives, null, undefined)
+  if (a === b) return true;
+  // Special handling for NaN (NaN !== NaN in JS)
+  if (typeof a === 'number' && typeof b === 'number' && Number.isNaN(a) && Number.isNaN(b)) {
+    return false;
+  }
+  // If either is null or undefined (but they are not strictly equal), return false
+  if (a == null || b == null) return false;
+  // If types don't match, they can't be equal
+  if (_typeof(a) !== _typeof(b)) return false;
+  // Handle array comparison
+  if (Array.isArray(a) && Array.isArray(b)) {
+    if (a.length !== b.length) return false;
+    return a.every(function (val, index) {
+      return deepCompareValue(val, b[index]);
+    });
+  }
+  // If one is array and the other isn't, return false
+  if (Array.isArray(a) !== Array.isArray(b)) return false;
+  // Handle object comparison
+  if (_typeof(a) === 'object' && _typeof(b) === 'object') {
+    var keysA = Object.keys(a);
+    var keysB = Object.keys(b);
+    if (keysA.length !== keysB.length) return false;
+    return keysA.every(function (key) {
+      return keysB.includes(key) && deepCompareValue(a[key], b[key]);
+    });
+  }
+  // If none of the above conditions matched, they're not equal
+  return false;
+};
 
 var SectionSpacer = index$a(reactNative.View)(function (_ref) {
   var theme = _ref.theme;
@@ -19066,7 +19098,7 @@ var OptionList = function OptionList(_ref) {
     rest = _objectWithoutProperties(_ref, _excluded$c);
   var renderItem = function renderItem(info) {
     var item = info.item;
-    var selected = item.value === value;
+    var selected = deepCompareValue(item.value, value);
     var onItemPress = function onItemPress() {
       if (value === item.value) {
         onPress(null);
@@ -19137,7 +19169,7 @@ var SingleSelect = function SingleSelect(_ref) {
   var sections = toSections(options);
   var flatOptions = toFlatOptions(options);
   var displayedValue = (_flatOptions$find = flatOptions.find(function (opt) {
-    return value === opt.value;
+    return deepCompareValue(opt.value, value);
   })) === null || _flatOptions$find === void 0 ? void 0 : _flatOptions$find.text;
   var rawValue = value ? String(value) : undefined;
   var bottomSheetVariant = bottomSheetConfig.variant,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.92.0",
+  "version": "8.92.1",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",

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

@@ -1,14 +1,15 @@
 import React from 'react';
 import {
-  SectionListRenderItemInfo,
-  SectionList,
   Dimensions,
+  SectionList,
+  SectionListRenderItemInfo,
 } from 'react-native';
-import Option from './Option';
 import type { SingleSelectProps } from '.';
+import { BaseOptionListProps } from '../BaseOptionList';
+import { deepCompareValue } from '../helpers';
 import type { OptionType, SectionType } from '../types';
+import Option from './Option';
 import { StyledOptionList } from './StyledSingleSelect';
-import { BaseOptionListProps } from '../BaseOptionList';
 
 type OptionListProps<V, T extends OptionType<V>> = Pick<
   SingleSelectProps<V, T>,
@@ -37,7 +38,7 @@ const OptionList = <V, T extends OptionType<V>>({
 }: OptionListProps<V, T>) => {
   const renderItem = (info: SectionListRenderItemInfo<T, SectionType>) => {
     const { item } = info;
-    const selected = item.value === value;
+    const selected = deepCompareValue(item.value, value);
     const onItemPress = () => {
       if (value === item.value) {
         onPress(null);

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

@@ -58,4 +58,28 @@ describe('OptionList', () => {
     );
     expect(toJSON()).toMatchSnapshot();
   });
+
+  it('render object value correctly', () => {
+    const sectionsWithObjectValue = [
+      {
+        category: 'A',
+        data: [{ text: 'Item 1', value: { id: '1', label: 'Item 1' } }],
+      },
+      {
+        category: 'B',
+        data: [{ text: 'Item 2', value: { id: '2', label: 'Item 2' } }],
+      },
+    ];
+    const pressFn = jest.fn();
+    const { toJSON, getByText } = renderWithTheme(
+      <OptionList
+        sections={sectionsWithObjectValue}
+        value={sectionsWithObjectValue[0].data[0].value}
+        onPress={pressFn}
+      />
+    );
+    expect(toJSON()).toMatchSnapshot();
+    expect(getByText('Item 1')).toBeTruthy();
+    expect(getByText('Item 2')).toBeTruthy();
+  });
 });