Fix #7015: Calendar passthrough type definition and docs

components/doc/calendar/theming/tailwinddoc.js

@@ -24,14 +24,14 @@ const Tailwind = {
                 'opacity-60 select-none pointer-events-none cursor-default': props.disabled
             })
         }),
-        input: {
-            root: ({ parent }) => ({
+        input: ({ props }) => ({
+            root: {
                 className: classNames('font-sans text-base text-gray-600 dark:text-white/80 bg-white dark:bg-gray-900 p-3 border border-gray-300 dark:border-blue-900/40 transition-colors duration-200 appearance-none', 'hover:border-blue-500', {
-                    'rounded-lg': !parent.props.showIcon,
-                    'border-r-0 rounded-l-lg': parent.props.showIcon
+                    'rounded-lg': !props.showIcon,
+                    'border-r-0 rounded-l-lg': props.showIcon
                 })
-            })
-        },
+            }
+        }),
         dropdownButton: {
             root: ({ props }) => ({
                 className: classNames({ 'rounded-l-none': props.icon })
@@ -53,7 +53,7 @@ const Tailwind = {
                 'hover:text-gray-700 dark:hover:text-white/80 hover:border-transparent hover:bg-gray-200 dark:hover:bg-gray-800/80 '
             )
         },
-        title: 'leading-8 mx-auto',
+        title: { className: 'leading-8 mx-auto' },
         monthTitle: {
             className: classNames('text-gray-700 dark:text-white/80 transition duration-200 font-semibold p-2', 'mr-2', 'hover:text-blue-500')
         },
@@ -70,9 +70,9 @@ const Tailwind = {
         table: {
             className: classNames('border-collapse w-full', 'my-2')
         },
-        tableHeaderCell: 'p-2',
-        weekday: 'text-gray-600 dark:text-white/70',
-        day: 'p-2',
+        tableHeaderCell: { className: 'p-2' },
+        weekday: { className: 'text-gray-600 dark:text-white/70' },
+        day: { className: 'p-2' },
         dayLabel: ({ context }) => ({
             className: classNames(
                 'w-10 h-10 rounded-full transition-shadow duration-200 border-transparent border',
@@ -88,7 +88,7 @@ const Tailwind = {
                 }
             )
         }),
-        monthPicker: 'my-2',
+        monthPicker: { className: 'my-2' },
         month: ({ context }) => ({
             className: classNames(
                 'w-1/3 inline-flex items-center justify-center cursor-pointer overflow-hidden relative',
@@ -114,11 +114,11 @@ const Tailwind = {
         timePicker: {
             className: classNames('flex justify-center items-center', 'border-t-1 border-solid border-gray-300 p-2')
         },
-        separatorContainer: 'flex items-center flex-col px-2',
-        separator: 'text-xl',
-        hourPicker: 'flex items-center flex-col px-2',
-        minutePicker: 'flex items-center flex-col px-2',
-        ampmPicker: 'flex items-center flex-col px-2',
+        separatorContainer: { className: 'flex items-center flex-col px-2' },
+        separator: { className: 'text-xl' },
+        hourPicker: { className: 'flex items-center flex-col px-2' },
+        minutePicker: { className: 'flex items-center flex-col px-2' },
+        ampmPicker: { className: 'flex items-center flex-col px-2' },
         incrementButton: {
             className: classNames(
                 'flex items-center justify-center cursor-pointer overflow-hidden relative',
@@ -133,7 +133,7 @@ const Tailwind = {
                 'hover:text-gray-700 dark:hover:text-white/80 hover:border-transparent hover:bg-gray-200 dark:hover:bg-gray-800/80 '
             )
         },
-        groupContainer: 'flex',
+        groupContainer: { className: 'flex' },
         group: {
             className: classNames('flex-1', 'border-l border-gray-300 pr-0.5 pl-0.5 pt-0 pb-0', 'first:pl-0 first:border-l-0')
         },

components/doc/common/apidoc/index.json

@@ -7120,7 +7120,7 @@
                             "name": "input",
                             "optional": true,
                             "readonly": false,
-                            "type": "InputTextPassThroughOptions",
+                            "type": "CalendarPassThroughType<HTMLAttributes<HTMLInputElement>>",
                             "description": "Uses to pass attributes to the InputText component."
                         },
                         {

components/lib/calendar/calendar.d.ts

@@ -11,7 +11,6 @@ import * as React from 'react';
 import { CSSTransitionProps as ReactCSSTransitionProps } from 'react-transition-group/CSSTransition';
 import { ComponentHooks } from '../componentbase/componentbase';
 import { CSSTransitionProps } from '../csstransition';
-import { InputText, InputTextPassThroughOptions } from '../inputtext/inputtext';
 import { PassThroughOptions } from '../passthrough';
 import { TooltipOptions } from '../tooltip/tooltipoptions';
 import { FormEvent, Nullable } from '../ts-helpers';
@@ -40,12 +39,10 @@ export interface CalendarPassThroughOptions {
     root?: CalendarPassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
     /**
      * Uses to pass attributes to the InputText component.
-     * @see {@link CalendarPassThroughType}
      */
-    input?: InputTextPassThroughOptions;
+    input?: CalendarPassThroughType<React.HTMLAttributes<HTMLInputElement>>;
     /**
      * Uses to pass attributes to the Button component.
-     * @see {@link CalendarPassThroughType}
      */
     dropdownButton?: CalendarPassThroughType<React.HTMLAttributes<HTMLButtonElement>>;
     /**
@@ -1080,9 +1077,9 @@ export declare class Calendar extends React.Component<CalendarProps, any> {
     public getElement(): HTMLSpanElement;
     /**
      * Used to get input element.
-     * @return {InputText} Input element
+     * @return {HTMLInputElement} Input element
      */
-    public getInput(): typeof InputText;
+    public getInput(): HTMLInputElement;
     /**
      * Used to get overlay element.
      * @return {HTMLElement} Overlay element