🧑‍💻 Datepicker type: allow standard html attributes (#3509)

* Datepicker type: allow standard html attributes
equinor · Jun 14, 2024 · 06c3166 · 06c3166
1 parent baf7e51
commit 06c3166
Show file tree

Hide file tree

Showing 2 changed files with 87 additions and 82 deletions.
diff --git a/packages/eds-core-react/src/components/Datepicker/DatePicker.tsx b/packages/eds-core-react/src/components/Datepicker/DatePicker.tsx
@@ -50,6 +50,8 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
       disabled: isDisabled,
       readOnly: isReadOnly,
       formatOptions,
+      helperProps,
+      variant,
       ...props
     }: DatePickerProps,
     forwardedRef: RefObject<HTMLDivElement>,
@@ -119,7 +121,8 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
     const { locale } = useLocale()
 
     const dateCreateProps = {
-      ...props,
+      helperProps,
+      variant,
       isDisabled,
       value: _value,
       hideTimeZone: true,
@@ -138,7 +141,7 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
     const { groupProps, buttonProps, fieldProps, calendarProps } =
       useDatePicker(dateCreateProps, pickerState, ref)
 
-    const helperProps = pickerState.displayValidation.isInvalid
+    const helperPropsInvalid = pickerState.displayValidation.isInvalid
       ? {
           text: pickerState.displayValidation.validationErrors.join('\n'),
           color: tokens.colors.interactive.warning__text.rgba,
@@ -154,6 +157,7 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
     return (
       <DatePickerProvider timezone={timezone} formatOptions={formatOptions}>
         <FieldWrapper
+          {...props}
           isOpen={isOpen}
           readonly={fieldProps.isReadOnly}
           pickerRef={pickerRef}
@@ -170,8 +174,8 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
           }
           disabled={isDisabled}
           readOnly={isReadOnly}
-          color={pickerState.isInvalid ? 'warning' : props.variant}
-          helperProps={helperProps ?? props.helperProps}
+          color={pickerState.isInvalid ? 'warning' : variant}
+          helperProps={helperPropsInvalid ?? helperProps}
         >
           <DateField
             fieldProps={fieldProps}
@@ -195,7 +199,7 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
                 })}
               />
             }
-            variant={props.variant}
+            variant={variant}
           />
         </FieldWrapper>
       </DatePickerProvider>

diff --git a/packages/eds-core-react/src/components/Datepicker/props.ts b/packages/eds-core-react/src/components/Datepicker/props.ts
@@ -1,4 +1,4 @@
-import { MutableRefObject, ReactNode } from 'react'
+import { MutableRefObject, ReactNode, HTMLAttributes } from 'react'
 import { CalendarState, RangeCalendarState } from '@react-stately/calendar'
 import { Variants } from '../types'
 import { HelperTextProps } from '../InputWrapper/HelperText'
@@ -14,82 +14,83 @@ export type HeaderFooterProps<T = CalendarState | RangeCalendarState> = {
   state: T
 }
 
-export type DatePickerProps = Partial<{
-  /**
-   * The variant / state of the datepicker field
-   * @default undefined
-   */
-  variant: Variants
-  /**
-   * Whether the datepicker field is disabled
-   * @default false
-   */
-  disabled?: boolean
-  // eslint-disable-next-line react/no-unused-prop-types
-  readOnly?: boolean
-  /**
-   * Props to set the helper text
-   */
-  helperProps?: HelperTextProps
-  /**
-   * Controlled value
-   */
-  value: Date | null
-  /**
-   * The function to call when the datepicker field value changes
-   */
-  onChange: (date: Date | null) => void
-  /**
-   * The field label
-   */
-  label: string
-  /**
-   * minValue sets a limit to how far back the datepicker allows you to go
-   * note: this does not prevent you from typing in a date that is before the minValue
-   * @default undefined
-   */
-  minValue: Date
-  /**
-   * maxValue sets a limit to how far back the datepicker allows you to go
-   * note: this does not prevent you from typing in a date that is after the maxValue
-   * @default undefined
-   */
-  maxValue: Date
-  /**
-   * isDateUnavailable is used to disable specific dates (e.g. weekends)
-   */
-  isDateUnavailable?: (v: Date) => boolean
-  /**
-   * An optional footer to display below the calendar, useful for e.g. presets
-   */
-  Footer: (props: HeaderFooterProps<CalendarState>) => ReactNode
-  /**
-   * An optional header to display above the calendar, can be used to override the default
-   * The component is fed with enough props to be able to control the calendar-view
-   */
-  Header: (props: HeaderFooterProps<CalendarState>) => ReactNode
-  /**
-   * Whether to allow picking the time as well as the date
-   */
-  showTimeInput?: boolean
-  /**
-   * Uncontrolled value
-   */
-  defaultValue?: Date | null
-  /**
-   * Timezone to use for the datepicker
-   */
-  timezone: string
-  /**
-   * Granularity of the time field if enabled
-   */
-  granularity?: 'hour' | 'minute' | 'second'
-  /**
-   * Format options for the datepicker input field
-   * Only applies when input is blurred
-   */
-  formatOptions?: DateFormatterOptions
-}>
+export type DatePickerProps = Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> &
+  Partial<{
+    /**
+     * The variant / state of the datepicker field
+     * @default undefined
+     */
+    variant: Variants
+    /**
+     * Whether the datepicker field is disabled
+     * @default false
+     */
+    disabled?: boolean
+    // eslint-disable-next-line react/no-unused-prop-types
+    readOnly?: boolean
+    /**
+     * Props to set the helper text
+     */
+    helperProps?: HelperTextProps
+    /**
+     * Controlled value
+     */
+    value: Date | null
+    /**
+     * The function to call when the datepicker field value changes
+     */
+    onChange: (date: Date | null) => void
+    /**
+     * The field label
+     */
+    label: string
+    /**
+     * minValue sets a limit to how far back the datepicker allows you to go
+     * note: this does not prevent you from typing in a date that is before the minValue
+     * @default undefined
+     */
+    minValue: Date
+    /**
+     * maxValue sets a limit to how far back the datepicker allows you to go
+     * note: this does not prevent you from typing in a date that is after the maxValue
+     * @default undefined
+     */
+    maxValue: Date
+    /**
+     * isDateUnavailable is used to disable specific dates (e.g. weekends)
+     */
+    isDateUnavailable?: (v: Date) => boolean
+    /**
+     * An optional footer to display below the calendar, useful for e.g. presets
+     */
+    Footer: (props: HeaderFooterProps<CalendarState>) => ReactNode
+    /**
+     * An optional header to display above the calendar, can be used to override the default
+     * The component is fed with enough props to be able to control the calendar-view
+     */
+    Header: (props: HeaderFooterProps<CalendarState>) => ReactNode
+    /**
+     * Whether to allow picking the time as well as the date
+     */
+    showTimeInput?: boolean
+    /**
+     * Uncontrolled value
+     */
+    defaultValue?: Date | null
+    /**
+     * Timezone to use for the datepicker
+     */
+    timezone: string
+    /**
+     * Granularity of the time field if enabled
+     */
+    granularity?: 'hour' | 'minute' | 'second'
+    /**
+     * Format options for the datepicker input field
+     * Only applies when input is blurred
+     */
+    formatOptions?: DateFormatterOptions
+  }>
 
 export type DateTimePickerProps = Omit<
   DatePickerProps,