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

package/es/index.js

@@ -13204,11 +13204,17 @@ 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 (startDate && endDate && (isEqDate(date, startDate) || isEqDate(date, endDate))) {
+  // If both dates are set, selecting start or end date will set the same date
+  if (startDate && endDate && isEqDate(date, startDate)) {
     return {
-      startDate: startDate,
-      endDate: endDate
+      startDate: date,
+      endDate: date
+    };
+  }
+  if (startDate && endDate && isEqDate(date, endDate)) {
+    return {
+      startDate: date,
+      endDate: date
     };
   }
   // No start date yet - set as start
@@ -13235,13 +13241,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 +18713,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 +19073,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 +19144,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,17 @@ 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 (startDate && endDate && (isEqDate(date, startDate) || isEqDate(date, endDate))) {
+  // If both dates are set, selecting start or end date will set the same date
+  if (startDate && endDate && isEqDate(date, startDate)) {
     return {
-      startDate: startDate,
-      endDate: endDate
+      startDate: date,
+      endDate: date
+    };
+  }
+  if (startDate && endDate && isEqDate(date, endDate)) {
+    return {
+      startDate: date,
+      endDate: date
     };
   }
   // No start date yet - set as start
@@ -13263,13 +13269,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 +18741,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 +19101,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 +19172,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.0",
   "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/helpers.ts

@@ -54,15 +54,18 @@ export const setStartOrEndDate = ({
   startDate?: Date;
   endDate?: Date;
 }) => {
-  // Prevent selecting same date when both dates are set
-  if (
-    startDate &&
-    endDate &&
-    (isEqDate(date, startDate) || isEqDate(date, endDate))
-  ) {
+  // If both dates are set, selecting start or end date will set the same date
+  if (startDate && endDate && isEqDate(date, startDate)) {
     return {
-      startDate,
-      endDate,
+      startDate: date,
+      endDate: date,
+    };
+  }
+
+  if (startDate && endDate && isEqDate(date, endDate)) {
+    return {
+      startDate: date,
+      endDate: date,
     };
   }
 
@@ -95,14 +98,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();
+  });
 });

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

package/src/components/Select/helpers.tsx

@@ -99,3 +99,48 @@ export const useKeyboard = () => {
 
   return { isKeyboardVisible, keyboardHeight };
 };
+
+export const deepCompareValue = <V,>(a: V, b: V): boolean => {
+  // 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((val, index) => 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') {
+    const keysA = Object.keys(a) as (keyof V)[];
+    const keysB = Object.keys(b) as (keyof V)[];
+
+    if (keysA.length !== keysB.length) return false;
+
+    return keysA.every(
+      (key) => keysB.includes(key) && deepCompareValue(a[key], b[key])
+    );
+  }
+
+  // If none of the above conditions matched, they're not equal
+  return false;
+};

package/types/components/Select/SingleSelect/OptionList.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
 import { SectionList } from 'react-native';
 import type { SingleSelectProps } from '.';
-import type { OptionType, SectionType } from '../types';
 import { BaseOptionListProps } from '../BaseOptionList';
+import type { OptionType, SectionType } from '../types';
 type OptionListProps<V, T extends OptionType<V>> = Pick<SingleSelectProps<V, T>, 'keyExtractor' | 'loading' | 'onEndReached' | 'onQueryChange' | 'value' | 'renderOption'> & {
     onPress: (value: V | null) => void;
     sectionListRef?: React.RefObject<SectionList<T, SectionType>>;

package/types/components/Select/helpers.d.ts

@@ -12,3 +12,4 @@ export declare const useKeyboard: () => {
     isKeyboardVisible: boolean;
     keyboardHeight: number;
 };
+export declare const deepCompareValue: <V>(a: V, b: V) => boolean;

package/types/theme/global/shadows/shadows.d.ts

@@ -0,0 +1,9 @@
+import type { ShadowPalette } from './types';
+declare const getShadows: (shadowPalette: ShadowPalette) => {
+    default: import("./types").ShadowStyles;
+    cardDrawer: import("./types").ShadowStyles;
+    tabBar: import("./types").ShadowStyles;
+};
+type Shadows = ReturnType<typeof getShadows>;
+export { getShadows };
+export type { Shadows };

package/types/theme/global/shadows/swagLight.d.ts

@@ -0,0 +1,3 @@
+import type { ShadowPalette } from './types';
+declare const swagLightShadowPalette: ShadowPalette;
+export default swagLightShadowPalette;

package/types/theme/global/shadows/swagLightJobs.d.ts

@@ -0,0 +1,3 @@
+import type { ShadowPalette } from './types';
+declare const swagLightJobsShadowPalette: ShadowPalette;
+export default swagLightJobsShadowPalette;

package/types/theme/global/shadows.d.ts

@@ -0,0 +1,16 @@
+import type { SystemPalette } from '.';
+declare const getShadows: (systemPalette: SystemPalette) => {
+    default: {
+        shadowOffset: {
+            width: number;
+            height: number;
+        };
+        shadowColor: string;
+        shadowOpacity: number;
+        shadowRadius: number;
+        elevation: number;
+    };
+};
+type Shadows = ReturnType<typeof getShadows>;
+export { getShadows };
+export type { Shadows };

package/.turbo/turbo-build.log

@@ -1,13 +0,0 @@
-(node:3019) 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...
-(!) [plugin replace] @rollup/plugin-replace: 'preventAssignment' currently defaults to false. It is recommended to set this option to `true`, as the next major version will default this option to `true`.
-(!) [plugin typescript] src/components/RichTextEditor/__tests__/RichTextEditor.spec.tsx (61:35): @rollup/plugin-typescript TS2307: Cannot find module '../../../../types' or its corresponding type declarations.
-/home/runner/work/hero-design/hero-design/packages/rn/src/components/RichTextEditor/__tests__/RichTextEditor.spec.tsx:61:35
-
-61 import { RichTextEditorRef } from "../../../../types";
-                                     ~~~~~~~~~~~~~~~~~~~
-
-(!) [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