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