fix!(DatePicker): add renderInputElement prop (#745)

* fix!(DatePicker): change `renderInputElement` prop to be a function

This allows users to use datepicker hooks in their custom input component.
Currently, if `useDatepicker` hook is used in the custom input element,
react will throw (since the custom component is instantiated without a datepicker parent)

* feat: ensure backwards compatibility for DatePicker inputElement prop

react/src/DatePicker/DatePicker.stories.tsx

@@ -96,12 +96,12 @@ const CustomInputButton = forwardRef<object, 'button'>((_props, ref) => {
 
 export const CustomInput = Template.bind({})
 CustomInput.args = {
-  inputElement: <CustomInputButton />,
+  renderInputElement: () => <CustomInputButton />,
 }
 
 export const MobileCustomInput = Template.bind({})
 MobileCustomInput.args = {
-  inputElement: <CustomInputButton />,
+  renderInputElement: () => <CustomInputButton />,
 }
 MobileCustomInput.parameters = getMobileViewParameters()
 

react/src/DatePicker/DatePickerContext.tsx

@@ -48,6 +48,7 @@ interface DatePickerContextReturn {
   colorScheme?: ThemingProps<'DatePicker'>['colorScheme']
   size?: ThemingProps<'DatePicker'>['size']
   disclosureProps: UseDisclosureReturn
+  renderInputElement?: () => React.ReactNode
   inputElement?: React.ReactNode
   innerRef?: React.Ref<HTMLElement>
   calendarProps: Pick<
@@ -114,6 +115,7 @@ const useProvideDatePicker = ({
   size,
   experimental_forceIosNumberKeyboard,
   inputElement,
+  renderInputElement,
   innerRef,
   ...props
 }: DatePickerProviderProps): DatePickerContextReturn => {
@@ -287,6 +289,7 @@ const useProvideDatePicker = ({
     calendarProps,
     inputPattern,
     inputElement,
+    renderInputElement,
     innerRef,
   }
 }

react/src/DatePicker/components/DatePickerWrapper.tsx

@@ -12,12 +12,13 @@ export const DatePickerWrapper = ({ children }: PropsWithChildren) => {
     initialFocusRef,
     closeCalendarOnChange,
     isMobile,
+    renderInputElement,
     inputElement,
   } = useDatePicker()
 
   const inputToRender = useMemo(() => {
-    return inputElement ?? <DatePickerInput />
-  }, [inputElement])
+    return renderInputElement?.() ?? inputElement ?? <DatePickerInput />
+  }, [inputElement, renderInputElement])
 
   if (isMobile) {
     return (

react/src/DatePicker/types.ts

@@ -48,5 +48,14 @@ export interface DatePickerBaseProps
   refocusOnClose?: boolean
   /** date-fns's Locale of the date to be applied if provided. */
   locale?: Locale
+  /**
+   * @deprecated use `renderInputElement` instead. If `renderInputElement` is provided,
+   * that will take precedence over `inputElement`.
+   */
   inputElement?: React.ReactElement
+  /**
+   * If provided, the value will be used instead of the default `DatePickerInput` component.
+   * @returns
+   */
+  renderInputElement?: () => React.ReactElement
 }