@hero-design/rn 8.78.1 → 8.79.2-test.0

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

@@ -234,6 +234,39 @@ describe('rendering', () => {
 
     expect(getByText('Selected: Jack')).toBeTruthy();
   });
+
+  it('renders correct custom bottom sheet header', () => {
+    const { getByTestId, getByText } = renderWithTheme(
+      <SingleSelect
+        label="Allow notifications"
+        options={options}
+        value="mon"
+        onConfirm={jest.fn()}
+        bottomSheetConfig={{
+          header: <Typography.Body>Custom header</Typography.Body>,
+        }}
+      />
+    );
+
+    fireEvent.press(getByTestId('text-input'));
+    expect(getByText('Custom header')).toBeTruthy();
+  });
+
+  it('renders correct floating bottom sheet variant', () => {
+    const { toJSON, getByTestId, getByText } = renderWithTheme(
+      <SingleSelect
+        label="Allow notifications"
+        options={options}
+        value="mon"
+        onConfirm={jest.fn()}
+        bottomSheetConfig={{ variant: 'floating' }}
+      />
+    );
+
+    fireEvent.press(getByTestId('text-input'));
+    expect(getByText('Monday')).toBeTruthy();
+    expect(toJSON()).toMatchSnapshot();
+  });
 });
 
 describe('behavior', () => {

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

@@ -59,6 +59,7 @@ const SingleSelect = <V, T extends OptionType<V>>({
   testID,
   value,
   supportedOrientations = ['portrait'],
+  bottomSheetConfig = {},
 }: SingleSelectProps<V, T>) => {
   const { isKeyboardVisible, keyboardHeight } = useKeyboard();
   const [open, setOpen] = useState(false);
@@ -67,6 +68,8 @@ const SingleSelect = <V, T extends OptionType<V>>({
   const flatOptions = toFlatOptions(options);
   const displayedValue = flatOptions.find((opt) => value === opt.value)?.text;
   const rawValue = value ? String(value) : undefined;
+  const { variant: bottomSheetVariant, header: bottomSheetHeader } =
+    bottomSheetConfig;
 
   return (
     <>
@@ -103,12 +106,13 @@ const SingleSelect = <V, T extends OptionType<V>>({
         </TouchableOpacity>
       </View>
       <BottomSheet
+        variant={bottomSheetVariant || 'fixed'}
         open={open}
         onRequestClose={() => {
           onDismiss?.();
           setOpen(false);
         }}
-        header={label}
+        header={bottomSheetHeader || label}
         style={{
           paddingBottom: isKeyboardVisible ? keyboardHeight : 0,
         }}

package/src/components/Select/types.ts

@@ -6,6 +6,7 @@ import type {
   StyleProp,
   ViewStyle,
 } from 'react-native';
+import { BottomSheetProps } from '../BottomSheet';
 import type { TextInputProps } from '../TextInput';
 
 export type OptionType<V> = {
@@ -94,4 +95,11 @@ export interface SelectProps<V, T extends OptionType<V>>
    * Testing id of the component.
    */
   testID?: string;
+  /**
+   *  Config for the bottom sheet.
+   */
+  bottomSheetConfig?: {
+    variant?: BottomSheetProps['variant'];
+    header?: BottomSheetProps['header'];
+  };
 }

package/src/theme/global/colors/__tests__/__snapshots__/swagLightJobs.spec.ts.snap

@@ -41,6 +41,7 @@ exports[`swagLightJobs returns correct theme object 1`] = `
   "primary": "#460078",
   "primaryOutline": "#121214",
   "secondary": "#40d1ff",
+  "secondaryHighlightedSurface": "#ecfaff",
   "secondaryOutline": "#e8e9ea",
   "success": "#5ace7d",
   "successSurface": "#f0fef4",

package/src/theme/global/colors/swagLightJobs.ts

@@ -4,6 +4,7 @@ const swagLightJobsSystemPalette = {
   ...swagLightSystemPalette,
   secondary: '#40d1ff',
   onSecondary: '#460078',
+  secondaryHighlightedSurface: '#ecfaff',
   decorativeSecondary: '#fdfbff',
   decorativeSecondarySurface: '#d9f6ff',
 };

package/src/theme/global/colors/types.ts

@@ -49,6 +49,7 @@ export type BrandSystemPalette = {
   onSecondary: string;
   defaultSurface: string;
   highlightedSurface: string;
+  secondaryHighlightedSurface?: string;
   pressedSurface: string;
 
   decorativePrimary: string;