@utilitywarehouse/hearth-react-native 0.16.0 → 0.16.2

package/src/components/DateInput/DateInput.docs.mdx

@@ -26,6 +26,7 @@ The `DateInput` component allows users to enter dates manually using separate in
   - [Flexible Segments](#flexible-segments)
   - [Grouping Inputs](#grouping-inputs)
   - [With State](#with-state)
+  - [Overriding Styles](#overriding-styles)
 - [Accessibility](#accessibility)
 
 ## Playground
@@ -65,35 +66,38 @@ const MyComponent = () => {
 
 ### DateInputProps
 
-| Prop               | Type                                | Default     | Description                                           |
-| ------------------ | ----------------------------------- | ----------- | ----------------------------------------------------- |
-| `label`            | `string`                            | -           | Label text displayed above the inputs                 |
-| `helperText`       | `string`                            | -           | Helper text displayed below the inputs                |
-| `helperIcon`       | `ComponentType`                     | -           | Icon component to display with helper/validation text |
-| `validationStatus` | `'initial' \| 'valid' \| 'invalid'` | `'initial'` | Validation status of the input                        |
-| `validText`        | `string`                            | -           | Text to display when validation status is valid       |
-| `invalidText`      | `string`                            | -           | Text to display when validation status is invalid     |
-| `required`         | `boolean`                           | `false`     | Whether the input is required                         |
-| `disabled`         | `boolean`                           | `false`     | Whether the input is disabled                         |
-| `readonly`         | `boolean`                           | `false`     | Whether the input is read-only                        |
-| `hideDay`          | `boolean`                           | `false`     | Whether to hide the day segment                       |
-| `hideMonth`        | `boolean`                           | `false`     | Whether to hide the month segment                     |
-| `hideYear`         | `boolean`                           | `false`     | Whether to hide the year segment                      |
-| `dayPlaceholder`   | `string`                            | `'DD'`      | Placeholder text for the day segment                  |
-| `monthPlaceholder` | `string`                            | `'MM'`      | Placeholder text for the month segment                |
-| `yearPlaceholder`  | `string`                            | `'YYYY'`    | Placeholder text for the year segment                 |
-| `dayValue`         | `string`                            | -           | Controlled value for the day segment                  |
-| `monthValue`       | `string`                            | -           | Controlled value for the month segment                |
-| `yearValue`        | `string`                            | -           | Controlled value for the year segment                 |
-| `onDayChange`      | `(text: string) => void`            | -           | Callback fired when the day value changes             |
-| `onMonthChange`    | `(text: string) => void`            | -           | Callback fired when the month value changes           |
-| `onYearChange`     | `(text: string) => void`            | -           | Callback fired when the year value changes            |
-| `onDayFocus`       | `(e: NativeSyntheticEvent) => void` | -           | Callback fired when the day segment receives focus    |
-| `onMonthFocus`     | `(e: NativeSyntheticEvent) => void` | -           | Callback fired when the month segment receives focus  |
-| `onYearFocus`      | `(e: NativeSyntheticEvent) => void` | -           | Callback fired when the year segment receives focus   |
-| `onDayBlur`        | `(e: NativeSyntheticEvent) => void` | -           | Callback fired when the day segment loses focus       |
-| `onMonthBlur`      | `(e: NativeSyntheticEvent) => void` | -           | Callback fired when the month segment loses focus     |
-| `onYearBlur`       | `(e: NativeSyntheticEvent) => void` | -           | Callback fired when the year segment loses focus      |
+| Prop                  | Type                                | Default     | Description                                           |
+| --------------------- | ----------------------------------- | ----------- | ----------------------------------------------------- |
+| `label`               | `string`                            | -           | Label text displayed above the inputs                 |
+| `helperText`          | `string`                            | -           | Helper text displayed below the inputs                |
+| `helperIcon`          | `ComponentType`                     | -           | Icon component to display with helper/validation text |
+| `validationStatus`    | `'initial' \| 'valid' \| 'invalid'` | `'initial'` | Validation status of the input                        |
+| `validText`           | `string`                            | -           | Text to display when validation status is valid       |
+| `invalidText`         | `string`                            | -           | Text to display when validation status is invalid     |
+| `required`            | `boolean`                           | `false`     | Whether the input is required                         |
+| `disabled`            | `boolean`                           | `false`     | Whether the input is disabled                         |
+| `readonly`            | `boolean`                           | `false`     | Whether the input is read-only                        |
+| `hideDay`             | `boolean`                           | `false`     | Whether to hide the day segment                       |
+| `hideMonth`           | `boolean`                           | `false`     | Whether to hide the month segment                     |
+| `hideYear`            | `boolean`                           | `false`     | Whether to hide the year segment                      |
+| `dayPlaceholder`      | `string`                            | `'DD'`      | Placeholder text for the day segment                  |
+| `monthPlaceholder`    | `string`                            | `'MM'`      | Placeholder text for the month segment                |
+| `yearPlaceholder`     | `string`                            | `'YYYY'`    | Placeholder text for the year segment                 |
+| `dayValue`            | `string`                            | -           | Controlled value for the day segment                  |
+| `monthValue`          | `string`                            | -           | Controlled value for the month segment                |
+| `yearValue`           | `string`                            | -           | Controlled value for the year segment                 |
+| `onDayChange`         | `(text: string) => void`            | -           | Callback fired when the day value changes             |
+| `onMonthChange`       | `(text: string) => void`            | -           | Callback fired when the month value changes           |
+| `onYearChange`        | `(text: string) => void`            | -           | Callback fired when the year value changes            |
+| `onDayFocus`          | `(e: NativeSyntheticEvent) => void` | -           | Callback fired when the day segment receives focus    |
+| `onMonthFocus`        | `(e: NativeSyntheticEvent) => void` | -           | Callback fired when the month segment receives focus  |
+| `onYearFocus`         | `(e: NativeSyntheticEvent) => void` | -           | Callback fired when the year segment receives focus   |
+| `onDayBlur`           | `(e: NativeSyntheticEvent) => void` | -           | Callback fired when the day segment loses focus       |
+| `onMonthBlur`         | `(e: NativeSyntheticEvent) => void` | -           | Callback fired when the month segment loses focus     |
+| `onYearBlur`          | `(e: NativeSyntheticEvent) => void` | -           | Callback fired when the year segment loses focus      |
+| `inputContainerStyle` | `ViewStyle`                         | -           | Custom style for each input container                 |
+| `inputStyle`          | `ViewStyle`                         | -           | Custom style for each input field                     |
+| `inputLabelStyle`     | `TextStyle`                         | -           | Custom style for each input label                     |
 
 ## Examples
 
@@ -155,6 +159,20 @@ Programmatically control date values:
 
 <Canvas of={Stories.WithState} />
 
+### Overriding Styles
+
+You can override the styles of the input containers, input fields, and input labels using the `inputContainerStyle`, `inputStyle`, and `inputLabelStyle` props respectively:
+
+<Canvas of={Stories.CustomWidth} />
+
+```tsx
+<DateInput
+  label="Custom width date input"
+  helperText="Date input with custom width"
+  inputContainerStyle={{ maxWidth: 'auto' }}
+/>
+```
+
 ## Accessibility
 
 - Each segment has a descriptive label ("Day", "Month", "Year") for screen readers

package/src/components/DateInput/DateInput.figma.tsx

@@ -1,60 +1,72 @@
-import React from "react"
-import DateInput from "./DateInput"
-import figma from "@figma/code-connect"
-
-/**
- * -- This file was auto-generated by Code Connect --
- * `props` includes a mapping from your code props to Figma properties.
- * You should check this is correct, and update the `example` function
- * to return the code example you'd like to see in Figma
- */
+import figma from '@figma/code-connect';
+import { DateInput } from '../';
 
 figma.connect(
   DateInput,
-  "https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=2277%3A14708",
+  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=2277%3A14708',
   {
     props: {
-      // These props were automatically mapped based on your linked code:
-      hideDay: figma.boolean("Day?"),
-      hideMonth: figma.boolean("Month?"),
-      monthPlaceholder: figma.string("Month value"),
-      yearPlaceholder: figma.string("Year value"),
-      dayValue: figma.string("Day value"),
-      monthValue: figma.string("Month value"),
-      yearValue: figma.string("Year value"),
-      disabled: figma.enum("State", {
+      hideDay: figma.boolean('Day?', {
+        true: false,
+        false: true,
+      }),
+      hideMonth: figma.boolean('Month?', {
+        true: false,
+        false: true,
+      }),
+      // hideYear: figma.boolean('Year?'),
+      monthPlaceholder: figma.enum('Value type', {
+        Placeholder: figma.boolean('Month?', {
+          true: figma.string('Month value'),
+        }),
+      }),
+      yearPlaceholder: figma.enum('Value type', {
+        Placeholder: figma.string('Year value'),
+      }),
+      dayPlaceholder: figma.enum('Value type', {
+        Placeholder: figma.boolean('Day?', {
+          true: figma.string('Day value'),
+        }),
+      }),
+      dayValue: figma.enum('Value type', {
+        Filled: figma.boolean('Day?', {
+          true: figma.string('Day value'),
+        }),
+      }),
+      monthValue: figma.enum('Value type', {
+        Filled: figma.boolean('Month?', {
+          true: figma.string('Month value'),
+        }),
+      }),
+      yearValue: figma.enum('Value type', {
+        Filled: figma.string('Year value'),
+      }),
+      disabled: figma.enum('State', {
         Disabled: true,
       }),
-      readonly: figma.enum("State", {
-        "Read-only": true,
+      readonly: figma.enum('State', {
+        'Read-only': true,
+      }),
+      label: figma.string('Label'),
+      helperText: figma.string('Helper text'),
+      validText: figma.enum('State', {
+        Valid: figma.string('Validation'),
+      }),
+      invalidText: figma.enum('State', {
+        Invalid: figma.string('Validation'),
+      }),
+      validationStatus: figma.enum('State', {
+        Default: undefined,
+        Valid: 'valid',
+        Invalid: 'invalid',
       }),
-      label: figma.string("Label"),
-      helperText: figma.string("Helper text"),
-      validText: figma.string("Validation"),
-      invalidText: figma.string("Helper text"),
       // No matching props could be found for these Figma properties:
-      // "helperText": figma.boolean('Helper text?'),
-      // "label": figma.string('Label'),
-      // "validation": figma.string('Validation'),
-      // "helperText": figma.string('Helper text'),
-      // "dayValue": figma.string('Day value'),
-      // "day": figma.boolean('Day?'),
-      // "month": figma.boolean('Month?'),
-      // "monthValue": figma.string('Month value'),
-      // "yearValue": figma.string('Year value'),
-      // "optional": figma.boolean('Optional?'),
-      // "valueType": figma.enum('Value type', {
-      //   "Empty": "empty",
-      //   "Placeholder": "placeholder",
-      //   "Filled": "filled"
-      // }),
-      // "focus": figma.boolean('Focus?'),
       // "labelVariant": figma.enum('Label variant', {
       //   "Body": "body",
       //   "Heading": "heading"
       // })
     },
-    example: (props) => (
+    example: props => (
       <DateInput
         hideDay={props.hideDay}
         hideMonth={props.hideMonth}
@@ -69,7 +81,8 @@ figma.connect(
         helperText={props.helperText}
         validText={props.validText}
         invalidText={props.invalidText}
+        validationStatus={props.validationStatus}
       />
     ),
-  },
-)
+  }
+);

package/src/components/DateInput/DateInput.props.ts

@@ -1,5 +1,6 @@
-import type { TextInputProps } from 'react-native';
+import type { TextInputProps, ViewProps } from 'react-native';
 import type { FormFieldBaseProps } from '../FormField/FormField.props';
+import LabelProps from '../Label/Label.props';
 
 export interface DateInputProps extends FormFieldBaseProps {
   /**
@@ -77,4 +78,34 @@ export interface DateInputProps extends FormFieldBaseProps {
    * Callback fired when the year segment loses focus.
    */
   onYearBlur?: TextInputProps['onBlur'];
+  /*
+   * Style for all the input segment's container.
+   */
+  inputContainerStyle?: ViewProps['style'];
+  /*
+   * Style for all the input segment's TextInput.
+   */
+  inputStyle?: ViewProps['style'];
+  /*
+   * Style for all the input segment's label.
+   */
+  inputLabelStyle?: LabelProps['style'];
+}
+
+export interface DateInputSegmentProps {
+  label: string;
+  placeholder?: string;
+  value?: string;
+  onChange?: (text: string) => void;
+  onFocus?: DateInputProps['onDayFocus'];
+  onBlur?: DateInputProps['onDayBlur'];
+  disabled?: boolean;
+  required?: boolean;
+  validationStatus?: DateInputProps['validationStatus'];
+  maxLength?: number;
+  readonly?: boolean;
+  testID?: string;
+  inputContainerStyle?: ViewProps['style'];
+  inputStyle?: ViewProps['style'];
+  inputLabelStyle?: LabelProps['style'];
 }

package/src/components/DateInput/DateInput.stories.tsx

@@ -267,3 +267,13 @@ export const WithState: Story = {
     );
   },
 };
+
+export const CustomWidth: Story = {
+  render: () => (
+    <DateInput
+      label="Custom width date input"
+      helperText="Date input with custom width"
+      inputContainerStyle={{ maxWidth: 'auto' }}
+    />
+  ),
+};

package/src/components/DateInput/DateInput.tsx

@@ -32,6 +32,9 @@ const DateInput = ({
   onDayBlur,
   onMonthBlur,
   onYearBlur,
+  inputLabelStyle,
+  inputContainerStyle,
+  inputStyle,
   ...props
 }: DateInputProps) => {
   return (
@@ -63,6 +66,9 @@ const DateInput = ({
             validationStatus={validationStatus}
             maxLength={2}
             testID="date-input-day"
+            inputContainerStyle={inputContainerStyle}
+            inputStyle={inputStyle}
+            inputLabelStyle={inputLabelStyle}
           />
         )}
         {!hideMonth && (
@@ -79,6 +85,9 @@ const DateInput = ({
             validationStatus={validationStatus}
             maxLength={2}
             testID="date-input-month"
+            inputContainerStyle={inputContainerStyle}
+            inputStyle={inputStyle}
+            inputLabelStyle={inputLabelStyle}
           />
         )}
         {!hideYear && (
@@ -95,6 +104,9 @@ const DateInput = ({
             validationStatus={validationStatus}
             maxLength={4}
             testID="date-input-year"
+            inputContainerStyle={inputContainerStyle}
+            inputStyle={inputStyle}
+            inputLabelStyle={inputLabelStyle}
           />
         )}
       </View>

package/src/components/DateInput/DateInputSegment.tsx

@@ -2,22 +2,7 @@ import { View } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { BodyText } from '../BodyText';
 import { Input } from '../Input';
-import type { DateInputProps } from './DateInput.props';
-
-interface DateInputSegmentProps {
-  label: string;
-  placeholder?: string;
-  value?: string;
-  onChange?: (text: string) => void;
-  onFocus?: DateInputProps['onDayFocus'];
-  onBlur?: DateInputProps['onDayBlur'];
-  disabled?: boolean;
-  required?: boolean;
-  validationStatus?: DateInputProps['validationStatus'];
-  maxLength?: number;
-  readonly?: boolean;
-  testID?: string;
-}
+import type { DateInputSegmentProps } from './DateInput.props';
 
 const DateInputSegment = ({
   label,
@@ -31,11 +16,14 @@ const DateInputSegment = ({
   maxLength,
   readonly,
   testID,
+  inputContainerStyle,
+  inputStyle,
+  inputLabelStyle,
 }: DateInputSegmentProps) => {
   styles.useVariants({ disabled });
   return (
-    <View style={styles.container}>
-      <BodyText size="md" style={styles.label}>
+    <View style={[styles.container, inputContainerStyle]}>
+      <BodyText size="md" style={[styles.label, inputLabelStyle]}>
         {label}
       </BodyText>
       <Input
@@ -51,7 +39,7 @@ const DateInputSegment = ({
         disabled={disabled}
         validationStatus={validationStatus}
         readonly={readonly}
-        style={styles.input}
+        style={inputStyle}
       />
     </View>
   );
@@ -74,9 +62,6 @@ const styles = StyleSheet.create(theme => ({
       },
     },
   },
-  input: {
-    maxWidth: 96,
-  },
 }));
 
 export default DateInputSegment;

package/src/components/DatePicker/DatePicker.figma.tsx

@@ -0,0 +1,47 @@
+import figma from '@figma/code-connect';
+import { DatePicker } from '../';
+
+const selectedDate = '';
+const handlePickerChange = () => {
+  // Placeholder for onChange handler
+};
+const handleCancel = () => {
+  // Placeholder for onCancel handler
+};
+
+const pickerRef = () => null;
+
+figma.connect(
+  DatePicker,
+  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=3797-6383&m=dev',
+  {
+    props: {
+      // "grabber": figma.boolean('Grabber?'),
+      header: figma.boolean('Header?', {
+        true: false,
+        false: true,
+      }),
+      footer: figma.boolean('Footer?', {
+        true: false,
+        false: true,
+      }),
+      initialView: figma.enum('Type', {
+        Day: undefined,
+        Month: 'month',
+        Year: 'year',
+      }),
+    },
+    example: props => (
+      <DatePicker
+        ref={pickerRef}
+        mode="single"
+        date={selectedDate}
+        hideFooter={props.footer}
+        hideHeader={props.header}
+        initialView={props.initialView}
+        onChange={handlePickerChange}
+        onCancel={handleCancel}
+      />
+    ),
+  }
+);

package/src/components/DatePicker/DatePicker.tsx

@@ -52,6 +52,7 @@ export interface DatePickerMultipleProps extends DatePickerBaseProps {
 const DateTimePicker = (
   props: DatePickerSingleProps | DatePickerRangeProps | DatePickerMultipleProps
 ) => {
+  // eslint-disable-next-line @typescript-eslint/prefer-as-const
   const numerals: 'latn' = 'latn';
   const {
     mode = 'single',
@@ -216,26 +217,29 @@ const DateTimePicker = (
           ...prevState,
           currentYear: action.payload,
         };
-      case CalendarActionKind.CHANGE_SELECTED_DATE:
+      case CalendarActionKind.CHANGE_SELECTED_DATE: {
         const { date: selectedDate } = action.payload;
         return {
           ...prevState,
           date: selectedDate,
           currentDate: selectedDate,
         };
-      case CalendarActionKind.CHANGE_SELECTED_RANGE:
+      }
+      case CalendarActionKind.CHANGE_SELECTED_RANGE: {
         const { startDate: start, endDate: end } = action.payload;
         return {
           ...prevState,
           startDate: start,
           endDate: end,
         };
-      case CalendarActionKind.CHANGE_SELECTED_MULTIPLE:
+      }
+      case CalendarActionKind.CHANGE_SELECTED_MULTIPLE: {
         const { dates: selectedDates } = action.payload;
         return {
           ...prevState,
           dates: selectedDates,
         };
+      }
       case CalendarActionKind.RESET_STATE:
         return action.payload;
       default:
@@ -363,7 +367,7 @@ const DateTimePicker = (
           });
         } else if (mode === 'range') {
           // set time to 00:00:00
-          let start = removeTime(stateRef.current.startDate, timeZone);
+          const start = removeTime(stateRef.current.startDate, timeZone);
           let end = removeTime(stateRef.current.endDate, timeZone);
           const selected = removeTime(selectedDate, timeZone);
           let isStart: boolean = true;

package/src/components/DatePicker/DatePickerHeader/DatePickerHeader.props.ts

@@ -6,5 +6,3 @@ export type HeaderProps = {
   NextIcon?: React.ReactNode;
   navigationPosition?: NavigationPosition;
 };
-
-export type NavigationProps = {};

package/src/components/DatePicker/DatePickerHeader/index.tsx

@@ -1,12 +1,12 @@
 import { memo } from 'react';
 import { View } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
-import type { HeaderProps, NavigationProps } from './DatePickerHeader.props';
+import type { HeaderProps } from './DatePickerHeader.props';
 import NextButton from './DatePickerNextButton';
 import PrevButton from './DatePickerPrevButton';
 import Selectors from './DatePickerSelectors';
 
-const NavigationButtons = ({}: NavigationProps) => (
+const NavigationButtons = () => (
   <View style={styles.navigation}>
     <PrevButton />
     <NextButton />

package/src/components/DatePicker/index.ts

@@ -1,6 +1,8 @@
 import 'dayjs/locale/en';
 import './polyfill';
 
+export type { BottomSheetMethods as DatePickerMethods } from '@gorhom/bottom-sheet/lib/typescript/types';
+
 export type {
   CalendarDay,
   CalendarMode,

package/src/components/DatePicker/polyfill.ts

@@ -1,6 +1,6 @@
-// @ts-ignore
+// @ts-expect-error - Polyfill for Date.toLocaleString to support timeZone option in React Native environment.
 Date.prototype._toLocaleString = Date.prototype.toLocaleString;
-// @ts-ignore
+// @ts-expect-error - Polyfill for Date.toLocaleString to support timeZone option in React Native environment.
 Date.prototype.toLocaleString = function (a, b) {
   if (b && Object.keys(b).length === 1 && 'timeZone' in b && a === 'en-US') {
     return Intl.DateTimeFormat('en-us', {
@@ -16,6 +16,6 @@ Date.prototype.toLocaleString = function (a, b) {
       .format(this)
       .replace(/(\d{2})\/(\d{2})\/(\d{4}),/g, '$3-$1-$2');
   }
-  // @ts-ignore
+  // @ts-expect-error - Polyfill for Date.toLocaleString to support timeZone option in React Native environment.
   return this._toLocaleString(a, b);
 };

package/src/components/DatePicker/time-picker/wheel-web.tsx

@@ -121,7 +121,6 @@ const WheelWeb = ({ value, setValue = () => {}, items }: WheelProps) => {
         return (
           <Animated.View
             key={`${displayValue?.text}-${index}`}
-            // eslint-disable-next-line react-native/no-inline-styles
             style={{
               position: 'absolute',
               height: ITEM_HEIGHT - 10,

package/src/components/DatePickerInput/DatePickerInput.figma.tsx

@@ -1,62 +1,34 @@
 import figma from '@figma/code-connect';
-import DatePickerInput from './DatePickerInput';
-
-/**
- * -- This file was auto-generated by Code Connect --
- * `props` includes a mapping from your code props to Figma properties.
- * You should check this is correct, and update the `example` function
- * to return the code example you'd like to see in Figma
- */
+import { DatePickerInput } from '../';
 
 figma.connect(
   DatePickerInput,
   'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=3917%3A7057',
   {
     props: {
-      // These props were automatically mapped based on your linked code:
       disabled: figma.enum('Variant', {
         Disabled: true,
       }),
-      readonly: figma.enum('Variant', {
-        'Read-only': true,
+      validationStatus: figma.enum('Variant', {
+        Default: undefined,
+        Valid: 'valid',
+        Invalid: 'invalid',
       }),
-      focused: figma.boolean('Focus?'),
-      placeholder: figma.string('Label'),
-      autoFocus: figma.boolean('Focus?'),
-      defaultValue: figma.string('Value'),
-      readOnly: figma.enum('Variant', {
-        'Read-only': true,
+      readonly: figma.enum('Variant', { Readonly: true }),
+      label: figma.string('Label'),
+      validText: figma.enum('Variant', {
+        Valid: figma.string('Validation'),
       }),
-      focusable: figma.boolean('Focus?'),
-      hasTVPreferredFocus: figma.boolean('Focus?'),
-      'aria-disabled': figma.enum('Variant', {
-        Disabled: true,
+      invalidText: figma.enum('Variant', {
+        Invalid: figma.string('Validation'),
+      }),
+      placeholder: figma.enum('Value type', {
+        Placeholder: figma.string('Value'),
+      }),
+      value: figma.enum('Value type', {
+        Filled: figma.string('Value'),
       }),
-      // No matching props could be found for these Figma properties:
-      // "helperText": figma.boolean('Helper  text?'),
-      // "label": figma.string('Label'),
-      // "validation": figma.string('Validation'),
-      // "helperText": figma.string('Helper text'),
-      // "value": figma.string('Value'),
-      // "icon": figma.boolean('Icon?'),
-      // "calendar": figma.boolean('Calendar?'),
-      // "valueType": figma.enum('Value type', {
-      //   "Empty": "empty",
-      //   "Placeholder": "placeholder",
-      //   "Filled": "filled"
-      // })
     },
-    example: props => (
-      <DatePickerInput
-        disabled={props.disabled}
-        readonly={props.readonly}
-        focused={props.focused}
-        placeholder={props.placeholder}
-        autoFocus={props.autoFocus}
-        defaultValue={props.defaultValue}
-        readOnly={props.readOnly}
-        focusable={props.focusable}
-      />
-    ),
+    example: props => <DatePickerInput {...props} />,
   }
 );

package/src/components/DatePickerInput/DatePickerInput.tsx

@@ -53,7 +53,6 @@ const DatePickerInput = ({
   ...rest
 }: DatePickerInputProps) => {
   const formFieldContext = useFormFieldContext();
-  const validationStatusFromContext = formFieldContext?.validationStatus ?? validationStatus;
   const isDisabled = formFieldContext?.disabled ?? disabled;
   const isReadonly = formFieldContext?.readonly ?? readonly;
 
@@ -168,7 +167,6 @@ const DatePickerInput = ({
     accessibilityHint: accessibilityHintProp,
     accessibilityLabel: accessibilityLabelProp,
     accessible: accessibleProp,
-    accessibilityRole: accessibilityRoleProp,
     importantForAccessibility: importantForAccessibilityProp,
     ...textInputProps
   } = rest;