@hero-design/rn 8.103.6 → 8.104.0

package/package.json

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

package/src/components/DatePicker/DatePickerAndroid.tsx

@@ -1,10 +1,11 @@
-import React, { useState } from 'react';
-import { TouchableOpacity, View } from 'react-native';
+import React, { useState, useCallback } from 'react';
+import { View } from 'react-native';
 
 import TextInput from '../TextInput';
 import AndroidDatePickerDialog from './Dialog/AndroidDialog';
 import useCalculateDate from './hooks/useCalculateDate';
 import useFormatDate from './hooks/useFormatDate';
+import { StyledTouchableOpacity } from './StyledDatePicker';
 import type { InternalDatePickerProps } from './types';
 
 type DatePickerAndroidProps = Omit<
@@ -31,6 +32,8 @@ const DatePickerAndroid = ({
   renderSelectedValue,
   locale,
   TextInputComponent,
+  inputProps,
+  groupStyleEnabled = false,
 }: DatePickerAndroidProps) => {
   const [open, setOpen] = useState(false);
 
@@ -44,10 +47,21 @@ const DatePickerAndroid = ({
 
   const InputComponent = TextInputComponent || TextInput;
 
+  const onPress = useCallback(() => {
+    setOpen(true);
+  }, []);
+
   return (
-    <TouchableOpacity onPress={() => setOpen(true)} disabled={disabled}>
+    <StyledTouchableOpacity
+      onPress={onPress}
+      disabled={disabled}
+      themeGroupStyleEnabled={groupStyleEnabled}
+      themeHasError={!!error}
+      testID="date-picker-android-touchable-opacity"
+    >
       <View pointerEvents="none" testID="datePickerInputAndroid">
         <InputComponent
+          {...inputProps}
           label={label}
           value={displayValue}
           suffix="calendar-dates-outlined"
@@ -81,7 +95,7 @@ const DatePickerAndroid = ({
         onChange={onChange}
         variant={variant}
       />
-    </TouchableOpacity>
+    </StyledTouchableOpacity>
   );
 };
 

package/src/components/DatePicker/DatePickerCalendar.tsx

@@ -1,5 +1,5 @@
-import React, { useState } from 'react';
-import { Platform, ScrollView, TouchableOpacity, View } from 'react-native';
+import React, { useState, useCallback } from 'react';
+import { Platform, ScrollView, View } from 'react-native';
 
 import BottomSheet from '../BottomSheet';
 import Button from '../Button';
@@ -7,6 +7,7 @@ import Calendar, { CalendarProps } from '../Calendar';
 import TextInput from '../TextInput';
 import useCalculateDate from './hooks/useCalculateDate';
 import useFormatDate from './hooks/useFormatDate';
+import { StyledTouchableOpacity } from './StyledDatePicker';
 import type { InternalDatePickerProps } from './types';
 
 const InternalCalendar = ({
@@ -81,6 +82,8 @@ const DatePickerCalendar = ({
   renderSelectedValue,
   locale,
   TextInputComponent,
+  inputProps,
+  groupStyleEnabled = false,
 }: Omit<InternalDatePickerProps, 'variant'>) => {
   const [open, setOpen] = useState(false);
   const [monthPickerVisible, setMonthPickerVisible] = useState(false);
@@ -98,10 +101,21 @@ const DatePickerCalendar = ({
 
   const InputComponent = TextInputComponent || TextInput;
 
+  const onPress = useCallback(() => {
+    setOpen(true);
+  }, []);
+
   return (
-    <TouchableOpacity onPress={() => setOpen(true)} disabled={disabled}>
+    <StyledTouchableOpacity
+      onPress={onPress}
+      disabled={disabled}
+      themeGroupStyleEnabled={groupStyleEnabled}
+      themeHasError={!!error}
+      testID="date-picker-calendar-touchable-opacity"
+    >
       <View pointerEvents="none" testID="datePickerCalendar">
         <InputComponent
+          {...inputProps}
           label={label}
           value={displayValue}
           suffix="calendar-dates-outlined"
@@ -158,7 +172,7 @@ const DatePickerCalendar = ({
           />
         </ScrollView>
       </BottomSheet>
-    </TouchableOpacity>
+    </StyledTouchableOpacity>
   );
 };
 

package/src/components/DatePicker/DatePickerIOS.tsx

@@ -1,11 +1,12 @@
-import React, { useState } from 'react';
-import { TouchableOpacity, View } from 'react-native';
+import React, { useState, useCallback } from 'react';
+import { View } from 'react-native';
 
 import { useLocale } from '../LocaleProvider/hooks';
 import TextInput from '../TextInput';
 import IOSDatePickerDialog from './Dialog/IOSDialog';
 import useCalculateDate from './hooks/useCalculateDate';
 import useFormatDate from './hooks/useFormatDate';
+import { StyledTouchableOpacity } from './StyledDatePicker';
 import type { InternalDatePickerProps } from './types';
 
 type DatePickerIOSProps = Omit<
@@ -34,6 +35,8 @@ const DatePickerIOS = ({
   locale,
   renderSelectedValue,
   TextInputComponent,
+  inputProps,
+  groupStyleEnabled = false,
 }: DatePickerIOSProps) => {
   const [open, setOpen] = useState(false);
   const { lang: defaultLocale } = useLocale();
@@ -47,10 +50,21 @@ const DatePickerIOS = ({
 
   const InputComponent = TextInputComponent || TextInput;
 
+  const onPress = useCallback(() => {
+    setOpen(true);
+  }, []);
+
   return (
-    <TouchableOpacity onPress={() => setOpen(true)} disabled={disabled}>
+    <StyledTouchableOpacity
+      onPress={onPress}
+      disabled={disabled}
+      themeGroupStyleEnabled={groupStyleEnabled}
+      themeHasError={!!error}
+      testID="date-picker-ios-touchable-opacity"
+    >
       <View pointerEvents="none" testID="datePickerInputIOS">
         <InputComponent
+          {...inputProps}
           label={label}
           value={displayValue}
           suffix="calendar-dates-outlined"
@@ -88,7 +102,7 @@ const DatePickerIOS = ({
         minDate={minDate}
         maxDate={maxDate}
       />
-    </TouchableOpacity>
+    </StyledTouchableOpacity>
   );
 };
 

package/src/components/DatePicker/StyledDatePicker.tsx

@@ -1,5 +1,5 @@
 import styled from '@emotion/native';
-import { View } from 'react-native';
+import { View, TouchableOpacity } from 'react-native';
 import type { ViewProps } from 'react-native';
 
 const StyledPickerWrapper = styled(View)<ViewProps>(({ theme }) => ({
@@ -7,4 +7,21 @@ const StyledPickerWrapper = styled(View)<ViewProps>(({ theme }) => ({
   alignItems: 'center',
 }));
 
-export { StyledPickerWrapper };
+const getZIndexByState = ({ themeHasError }: { themeHasError: boolean }) => {
+  if (themeHasError) {
+    return 1;
+  }
+
+  return 0;
+};
+
+const StyledTouchableOpacity = styled(TouchableOpacity)<{
+  themeGroupStyleEnabled: boolean;
+  themeHasError: boolean;
+}>(({ themeGroupStyleEnabled, themeHasError }) => ({
+  ...(themeGroupStyleEnabled && {
+    zIndex: getZIndexByState({ themeHasError }),
+  }),
+}));
+
+export { StyledPickerWrapper, StyledTouchableOpacity };

package/src/components/DatePicker/__tests__/DatePicker.spec.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import { Platform } from 'react-native';
 import { fireEvent } from '@testing-library/react-native';
-import DatePicker from '..';
+// Use internal import for full prop support
+import DatePicker from '../index.internal';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
 import { Button, Typography } from '../../..';
 
@@ -57,6 +58,106 @@ describe('DatePicker', () => {
     expect(getByTestId('datePickerCalendar')).toBeDefined();
   });
 
+  it('renders correctly when inputProps loading is true', () => {
+    Platform.OS = 'ios';
+    const { getByTestId } = renderWithTheme(
+      <DatePicker
+        label="Start date"
+        value={new Date('1995-12-17T00:00:00.000Z')}
+        minDate={new Date('1994-12-17T00:00:00.000Z')}
+        maxDate={new Date('1996-12-17T00:00:00.000Z')}
+        confirmLabel="Confirm"
+        inputProps={{ loading: true }}
+        onChange={jest.fn()}
+      />
+    );
+
+    expect(getByTestId('input-suffix')).toHaveProp('name', 'loading');
+  });
+
+  it('renders correctly when groupStyleEnabled is true and no error', () => {
+    Platform.OS = 'ios';
+    const { getByTestId } = renderWithTheme(
+      <DatePicker
+        label="Start date"
+        value={new Date('1995-12-17T00:00:00.000Z')}
+        minDate={new Date('1994-12-17T00:00:00.000Z')}
+        maxDate={new Date('1996-12-17T00:00:00.000Z')}
+        confirmLabel="Confirm"
+        groupStyleEnabled
+        onChange={jest.fn()}
+      />
+    );
+
+    const touchableOpacity = getByTestId('date-picker-ios-touchable-opacity');
+    expect(touchableOpacity).toBeTruthy();
+    expect(touchableOpacity.props.style).toHaveProperty('zIndex', 0);
+  });
+
+  it('renders correctly when groupStyleEnabled is true and has error', () => {
+    Platform.OS = 'ios';
+    const { getByTestId } = renderWithTheme(
+      <DatePicker
+        label="Start date"
+        value={new Date('1995-12-17T00:00:00.000Z')}
+        minDate={new Date('1994-12-17T00:00:00.000Z')}
+        maxDate={new Date('1996-12-17T00:00:00.000Z')}
+        confirmLabel="Confirm"
+        groupStyleEnabled
+        error="This field is required"
+        onChange={jest.fn()}
+      />
+    );
+
+    const touchableOpacity = getByTestId('date-picker-ios-touchable-opacity');
+    expect(touchableOpacity).toBeTruthy();
+    expect(touchableOpacity.props.style).toHaveProperty('zIndex', 1);
+  });
+
+  it('renders correctly when groupStyleEnabled is true and has error for Android', () => {
+    Platform.OS = 'android';
+    const { getByTestId } = renderWithTheme(
+      <DatePicker
+        label="Start date"
+        value={new Date('1995-12-17T00:00:00.000Z')}
+        minDate={new Date('1994-12-17T00:00:00.000Z')}
+        maxDate={new Date('1996-12-17T00:00:00.000Z')}
+        confirmLabel="Confirm"
+        groupStyleEnabled
+        error="This field is required"
+        onChange={jest.fn()}
+      />
+    );
+
+    const touchableOpacity = getByTestId(
+      'date-picker-android-touchable-opacity'
+    );
+    expect(touchableOpacity).toBeTruthy();
+    expect(touchableOpacity.props.style).toHaveProperty('zIndex', 1);
+  });
+
+  it('renders correctly when groupStyleEnabled is true and has error for Calendar variant', () => {
+    const { getByTestId } = renderWithTheme(
+      <DatePicker
+        label="Start date"
+        value={new Date('1995-12-17T00:00:00.000Z')}
+        minDate={new Date('1994-12-17T00:00:00.000Z')}
+        maxDate={new Date('1996-12-17T00:00:00.000Z')}
+        confirmLabel="Confirm"
+        variant="calendar"
+        groupStyleEnabled
+        error="This field is required"
+        onChange={jest.fn()}
+      />
+    );
+
+    const touchableOpacity = getByTestId(
+      'date-picker-calendar-touchable-opacity'
+    );
+    expect(touchableOpacity).toBeTruthy();
+    expect(touchableOpacity.props.style).toHaveProperty('zIndex', 1);
+  });
+
   it.each`
     OS           | variant
     ${'ios'}     | ${'calendar'}

package/src/components/DatePicker/__tests__/__snapshots__/DatePicker.spec.tsx.snap

@@ -41,6 +41,7 @@ exports[`DatePicker renders DatePickerAndroid when OS is android 1`] = `
         "opacity": 1,
       }
     }
+    testID="date-picker-android-touchable-opacity"
   >
     <View
       pointerEvents="none"
@@ -328,6 +329,7 @@ exports[`DatePicker renders DatePickerIOS when OS is iOS 1`] = `
         "opacity": 1,
       }
     }
+    testID="date-picker-ios-touchable-opacity"
   >
     <View
       pointerEvents="none"
@@ -615,6 +617,7 @@ exports[`DatePicker renders variant Calendar 1`] = `
         "opacity": 1,
       }
     }
+    testID="date-picker-calendar-touchable-opacity"
   >
     <View
       pointerEvents="none"

package/src/components/DatePicker/__tests__/__snapshots__/DatePickerAndroid.spec.tsx.snap

@@ -41,6 +41,7 @@ exports[`DatePickerAndroid renders correctly 1`] = `
         "opacity": 1,
       }
     }
+    testID="date-picker-android-touchable-opacity"
   >
     <View
       pointerEvents="none"

package/src/components/DatePicker/__tests__/__snapshots__/DatePickerCalendar.spec.tsx.snap

@@ -41,6 +41,7 @@ exports[`DatePickerCalendar renders correctly 1`] = `
         "opacity": 1,
       }
     }
+    testID="date-picker-calendar-touchable-opacity"
   >
     <View
       pointerEvents="none"

package/src/components/DatePicker/__tests__/__snapshots__/DatePickerIOS.spec.tsx.snap

@@ -41,6 +41,7 @@ exports[`DatePickerIOS renders correctly 1`] = `
         "opacity": 1,
       }
     }
+    testID="date-picker-ios-touchable-opacity"
   >
     <View
       pointerEvents="none"
@@ -711,6 +712,7 @@ exports[`DatePickerIOS renders correctly with custom locale 1`] = `
         "opacity": 1,
       }
     }
+    testID="date-picker-ios-touchable-opacity"
   >
     <View
       pointerEvents="none"

package/src/components/DatePicker/types.ts

@@ -104,5 +104,16 @@ export interface DatePickerProps {
 
 // Add an internal prop type for TextInputComponent, not exported
 export interface InternalDatePickerProps extends DatePickerProps {
+  /**
+   * Props that are passed to TextInput.
+   */
+  inputProps?: Pick<TextInputProps, 'loading' | 'numberOfLines'>;
+  /**
+   * Whether the component is used within a FormGroup for styling purposes.
+   */
+  groupStyleEnabled?: boolean;
+  /**
+   * Input component to use instead of the default TextInput.
+   */
   TextInputComponent?: React.ComponentType<TextInputProps>;
 }

package/src/components/FilterTrigger/StyledFilterTrigger.tsx

@@ -0,0 +1,104 @@
+import styled from '@emotion/native';
+import { TouchableOpacity } from 'react-native';
+import { Theme } from '../../theme';
+import Badge from '../Badge';
+import Typography from '../Typography';
+
+type Variant = 'filled' | 'outlined' | 'ghost';
+
+const getBackgroundColor = (
+  theme: Theme,
+  themeIsActive: boolean,
+  themeHasLabel: boolean,
+  themeVariant: Variant
+): string => {
+  const { colors } = theme.__hd__.filterTrigger;
+
+  if (themeIsActive && !themeHasLabel && themeVariant === 'filled') {
+    return colors.wrapper.background.active.filledLabeless;
+  }
+
+  const state = themeIsActive ? 'active' : 'inactive';
+  return colors.wrapper.background[state][themeVariant];
+};
+
+const getBorderStyles = (
+  theme: Theme,
+  themeIsActive: boolean,
+  themeHasLabel: boolean,
+  themeVariant: Variant
+) => {
+  const { colors, borderWidths, radii } = theme.__hd__.filterTrigger;
+
+  let borderColor: string;
+  if (themeIsActive && !themeHasLabel && themeVariant === 'filled') {
+    borderColor = colors.wrapper.border.active.filledLabeless;
+  } else {
+    const state = themeIsActive ? 'active' : 'inactive';
+    borderColor = colors.wrapper.border[state][themeVariant];
+  }
+
+  return {
+    borderWidth: borderWidths.wrapper[themeVariant],
+    borderColor,
+    borderRadius: themeHasLabel
+      ? radii.wrapper.default
+      : radii.wrapper.labeless,
+  };
+};
+
+const getSpacingStyles = (theme: Theme, themeHasLabel: boolean) => {
+  const { space } = theme.__hd__.filterTrigger;
+  const paddingConfig = themeHasLabel
+    ? space.wrapper.default
+    : space.wrapper.labeless;
+
+  return {
+    gap: space.wrapper.itemGap,
+    paddingHorizontal: paddingConfig.paddingHorizontal,
+    paddingVertical: paddingConfig.paddingVertical,
+  };
+};
+
+export const StyledFilterWrapper = styled(TouchableOpacity)<{
+  themeActive: boolean;
+  themeVariant: Variant;
+  themeHasLabel: boolean;
+}>(({ theme, themeActive, themeVariant, themeHasLabel }) => ({
+  position: 'relative',
+  flexDirection: 'row',
+  alignItems: 'center',
+  justifyContent: 'center',
+  alignSelf: 'flex-start',
+  height: theme.__hd__.filterTrigger.sizes.wrapperHeight,
+  backgroundColor: getBackgroundColor(
+    theme,
+    themeActive,
+    themeHasLabel,
+    themeVariant
+  ),
+  ...getBorderStyles(theme, themeActive, themeHasLabel, themeVariant),
+  ...getSpacingStyles(theme, themeHasLabel),
+}));
+
+export const StyledBadge = styled(Badge)<{ themeHasLabel: boolean }>(
+  ({ theme, themeHasLabel }) => ({
+    position: 'absolute',
+
+    ...(themeHasLabel
+      ? {
+          right: 0,
+          bottom: 0,
+        }
+      : {
+          right: -theme.__hd__.filterTrigger.space.badge.labelessRight,
+          bottom: -theme.__hd__.filterTrigger.space.badge.labelessBottom,
+        }),
+  })
+);
+
+export const StyledText = styled(Typography.Body)(({ theme }) => ({
+  lineHeight: theme.__hd__.filterTrigger.lineHeights.text,
+  textAlignVertical: 'center',
+  includeFontPadding: false,
+}));