@hero-design/rn 8.92.0 → 8.92.1-alpha.2

package/es/index.js

@@ -13204,11 +13204,11 @@ var setStartOrEndDate = function setStartOrEndDate(_ref2) {
   var date = _ref2.date,
     startDate = _ref2.startDate,
     endDate = _ref2.endDate;
-  // Prevent selecting same date when both dates are set
+  // If both dates are set, selecting start or end date will set the same date
   if (startDate && endDate && (isEqDate(date, startDate) || isEqDate(date, endDate))) {
     return {
-      startDate: startDate,
-      endDate: endDate
+      startDate: date,
+      endDate: date
     };
   }
   // No start date yet - set as start
@@ -13235,13 +13235,10 @@ var setStartOrEndDate = function setStartOrEndDate(_ref2) {
       endDate: undefined
     };
   }
-  // Clicking outside range - extend range
-  return date < startDate ? {
+  // Clicking outside range - reset range
+  return {
     startDate: date,
-    endDate: endDate
-  } : {
-    startDate: startDate,
-    endDate: date
+    endDate: undefined
   };
 };
 
@@ -18710,6 +18707,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 +19067,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 +19138,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

@@ -13232,11 +13232,11 @@ var setStartOrEndDate = function setStartOrEndDate(_ref2) {
   var date = _ref2.date,
     startDate = _ref2.startDate,
     endDate = _ref2.endDate;
-  // Prevent selecting same date when both dates are set
+  // If both dates are set, selecting start or end date will set the same date
   if (startDate && endDate && (isEqDate(date, startDate) || isEqDate(date, endDate))) {
     return {
-      startDate: startDate,
-      endDate: endDate
+      startDate: date,
+      endDate: date
     };
   }
   // No start date yet - set as start
@@ -13263,13 +13263,10 @@ var setStartOrEndDate = function setStartOrEndDate(_ref2) {
       endDate: undefined
     };
   }
-  // Clicking outside range - extend range
-  return date < startDate ? {
+  // Clicking outside range - reset range
+  return {
     startDate: date,
-    endDate: endDate
-  } : {
-    startDate: startDate,
-    endDate: date
+    endDate: undefined
   };
 };
 
@@ -18738,6 +18735,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 +19095,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 +19166,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-alpha.2",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -95,5 +95,6 @@
     "ts-jest": "^29.1.1",
     "typescript": "^5.7.3"
   },
-  "prettier": "prettier-config-hd"
+  "prettier": "prettier-config-hd",
+  "react-native": "src/index.ts"
 }

package/src/components/Calendar/__tests__/CalendarRange.spec.tsx

@@ -47,17 +47,32 @@ describe('CalendarRange', () => {
     expect(queryAllByTestId('calendar-disabled-cell')).toHaveLength(0);
     expect(queryAllByTestId('calendar-date-mark')).toHaveLength(5);
 
-    // Test range selection
-    fireEvent.press(queryAllByText('11')[0]); // Select start date
+    // Select outside range
+    fireEvent.press(queryAllByText('11')[0]);
     expect(onChange).toHaveBeenCalledWith({
       startDate: new Date('2022-10-11'),
-      endDate: new Date('2022-10-15'),
+      endDate: undefined,
     });
 
-    fireEvent.press(queryAllByText('20')[0]); // Select end date
+    // Select start date
+    fireEvent.press(queryAllByText('12')[0]);
     expect(onChange).toHaveBeenCalledWith({
       startDate: new Date('2022-10-12'),
-      endDate: new Date('2022-10-20'),
+      endDate: new Date('2022-10-12'),
+    });
+
+    // Select end date
+    fireEvent.press(queryAllByText('15')[0]);
+    expect(onChange).toHaveBeenCalledWith({
+      startDate: new Date('2022-10-15'),
+      endDate: new Date('2022-10-15'),
+    });
+
+    // Select inside range
+    fireEvent.press(queryAllByText('13')[0]);
+    expect(onChange).toHaveBeenCalledWith({
+      startDate: new Date('2022-10-13'),
+      endDate: undefined,
     });
 
     fireEvent.press(queryByTestId('previous-icon-button'));
@@ -129,14 +144,14 @@ describe('CalendarRange', () => {
     // Test range selection within constraints
     fireEvent.press(getByText('17')); // Select start date
     expect(onChange).toHaveBeenCalledWith({
-      startDate: new Date('2022-10-12'),
-      endDate: new Date('2022-10-17'),
+      startDate: new Date('2022-10-17'),
+      endDate: undefined,
     });
 
     fireEvent.press(getByText('11')); // Select end date
     expect(onChange).toHaveBeenCalledWith({
       startDate: new Date('2022-10-11'),
-      endDate: new Date('2022-10-15'),
+      endDate: undefined,
     });
   });
 
@@ -156,14 +171,14 @@ describe('CalendarRange', () => {
     fireEvent.press(getByText('11'));
     expect(onChange).toHaveBeenCalledWith({
       startDate: new Date('2022-10-11'),
-      endDate: new Date('2022-10-15'),
+      endDate: undefined,
     });
 
     // Select end date
     fireEvent.press(getByText('20'));
     expect(onChange).toHaveBeenCalledWith({
-      startDate: new Date('2022-10-12'),
-      endDate: new Date('2022-10-20'),
+      startDate: new Date('2022-10-20'),
+      endDate: undefined,
     });
 
     // Select new start date (should clear end date)

package/src/components/Calendar/__tests__/helper.spec.ts

@@ -73,99 +73,106 @@ describe('isDateInRange', () => {
 });
 
 describe('setStartOrEndDate', () => {
-  // Test case 1: Prevent selecting same date when both dates are set
-  it('should not change dates when selecting same date as start date and both dates are set', () => {
-    const date = new Date('2024-03-15');
-    const startDate = new Date('2024-03-15');
-    const endDate = new Date('2024-03-20');
-
-    const result = setStartOrEndDate({ date, startDate, endDate });
-    expect(result).toEqual({ startDate, endDate });
+  const today = new Date('2024-01-01');
+  const tomorrow = new Date('2024-01-02');
+  const nextWeek = new Date('2024-01-08');
+
+  it('should set start date when no dates are selected', () => {
+    const result = setStartOrEndDate({
+      date: today,
+    });
+
+    expect(result).toEqual({
+      startDate: today,
+      endDate: undefined,
+    });
   });
 
-  // Test case 2: Allow selecting same date as start date when only start date is set
-  it('should allow selecting same date as start date when only start date is set', () => {
-    const date = new Date('2024-03-15');
-    const startDate = new Date('2024-03-15');
+  it('should set end date when only start date is selected', () => {
+    const result = setStartOrEndDate({
+      date: tomorrow,
+      startDate: today,
+    });
 
-    const result = setStartOrEndDate({ date, startDate });
     expect(result).toEqual({
-      startDate: new Date('2024-03-15'),
-      endDate: new Date('2024-03-15'),
+      startDate: today,
+      endDate: tomorrow,
     });
   });
 
-  // Test case 3: Initial selection (no start date)
-  it('should set start date when no dates are selected', () => {
-    const date = new Date('2024-03-15');
+  it('should set start date when date is before current start date', () => {
+    const result = setStartOrEndDate({
+      date: today,
+      startDate: tomorrow,
+    });
 
-    const result = setStartOrEndDate({ date });
     expect(result).toEqual({
-      startDate: new Date('2024-03-15'),
-      endDate: undefined,
+      startDate: today,
+      endDate: tomorrow,
     });
   });
 
-  // Test case 4: Setting end date after start date
-  it('should set end date when start date exists and selected date is after', () => {
-    const date = new Date('2024-03-20');
-    const startDate = new Date('2024-03-15');
+  it('should set end date when date is after current start date', () => {
+    const result = setStartOrEndDate({
+      date: tomorrow,
+      startDate: today,
+    });
 
-    const result = setStartOrEndDate({ date, startDate });
     expect(result).toEqual({
-      startDate: new Date('2024-03-15'),
-      endDate: new Date('2024-03-20'),
+      startDate: today,
+      endDate: tomorrow,
     });
   });
 
-  // Test case 5: Setting end date before start date (should reorder)
-  it('should reorder dates when end date is selected before start date', () => {
-    const date = new Date('2024-03-10');
-    const startDate = new Date('2024-03-15');
+  it('should reset selection when clicking within range', () => {
+    const result = setStartOrEndDate({
+      date: tomorrow,
+      startDate: today,
+      endDate: nextWeek,
+    });
 
-    const result = setStartOrEndDate({ date, startDate });
     expect(result).toEqual({
-      startDate: new Date('2024-03-10'),
-      endDate: new Date('2024-03-15'),
+      startDate: tomorrow,
+      endDate: undefined,
     });
   });
 
-  // Test case 6: Clicking within existing range
-  it('should start new selection when clicking within existing range', () => {
-    const date = new Date('2024-03-17');
-    const startDate = new Date('2024-03-15');
-    const endDate = new Date('2024-03-20');
+  it('should reset selection when clicking outside range', () => {
+    const result = setStartOrEndDate({
+      date: nextWeek,
+      startDate: today,
+      endDate: tomorrow,
+    });
 
-    const result = setStartOrEndDate({ date, startDate, endDate });
     expect(result).toEqual({
-      startDate: new Date('2024-03-17'),
+      startDate: nextWeek,
       endDate: undefined,
     });
   });
 
-  // Test case 7: Extending range before start date
-  it('should extend range when clicking before start date', () => {
-    const date = new Date('2024-03-10');
-    const startDate = new Date('2024-03-15');
-    const endDate = new Date('2024-03-20');
+  it('should set same date for both start and end when clicking start date', () => {
+    const result = setStartOrEndDate({
+      date: today,
+      startDate: today,
+      endDate: tomorrow,
+    });
 
-    const result = setStartOrEndDate({ date, startDate, endDate });
     expect(result).toEqual({
-      startDate: new Date('2024-03-10'),
-      endDate: new Date('2024-03-20'),
+      startDate: today,
+      endDate: today,
     });
   });
 
-  // Test case 8: Extending range after end date
-  it('should extend range when clicking after end date', () => {
-    const date = new Date('2024-03-25');
-    const startDate = new Date('2024-03-15');
-    const endDate = new Date('2024-03-20');
+  it('should set same date for both start and end when clicking end date', () => {
+    const result = setStartOrEndDate({
+      date: tomorrow,
+      startDate: today,
+      endDate: tomorrow,
+    });
 
-    const result = setStartOrEndDate({ date, startDate, endDate });
     expect(result).toEqual({
-      startDate: new Date('2024-03-15'),
-      endDate: new Date('2024-03-25'),
+      startDate: tomorrow,
+      endDate: tomorrow,
     });
   });
 });

package/src/components/Calendar/helpers.ts

@@ -54,15 +54,15 @@ export const setStartOrEndDate = ({
   startDate?: Date;
   endDate?: Date;
 }) => {
-  // Prevent selecting same date when both dates are set
+  // If both dates are set, selecting start or end date will set the same date
   if (
     startDate &&
     endDate &&
     (isEqDate(date, startDate) || isEqDate(date, endDate))
   ) {
     return {
-      startDate,
-      endDate,
+      startDate: date,
+      endDate: date,
     };
   }
 
@@ -95,14 +95,9 @@ export const setStartOrEndDate = ({
     };
   }
 
-  // Clicking outside range - extend range
-  return date < startDate
-    ? {
-        startDate: date,
-        endDate,
-      }
-    : {
-        startDate,
-        endDate: date,
-      };
+  // Clicking outside range - reset range
+  return {
+    startDate: date,
+    endDate: undefined,
+  };
 };

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();
+  });
 });