@progress/kendo-react-dateinputs 10.2.0-develop.6 → 10.2.0-develop.8

package/index.d.mts

@@ -246,109 +246,240 @@ export declare const CalendarPropsContext: React_2.Context<(p: CalendarProps<any
 export declare interface CalendarSettings {
     /**
      * Defines the bottommost view to which the user can navigate.
+     * ([see example]({% slug navigation_calendar %}#toc-bottom-view)).
+     *
+     ** @example
+     * ```jsx
+     * <Calendar bottomView="month" />
+     * ```
      */
     bottomView?: ActiveView;
     /**
      * Sets the `className` of the Calendar.
+     *
+     ** @example
+     * ```jsx
+     * <Calendar className="custom-class" />
+     * ```
      */
     className?: string;
     /**
      * Sets the default active view of the Calendar.
      * If not set, the Calendar will display the month view.
+     * ([see example]({% slug views_calendar %}#toc-default-active-view)).
+     *
+     ** @example
+     * ```jsx
+     * <Calendar defaultActiveView="year" />
+     * ```
      */
     defaultActiveView?: ActiveView;
     /**
      * Determines whether the Calendar is disabled.
+     * ([see example]({% slug disabled_calendar %})).
+     *
+     ** @example
+     * ```jsx
+     * <Calendar disabled={true} />
+     * ```
      */
     disabled?: boolean;
     /**
      * Sets the initial focused date of the Calendar.
+     * ([see example]({% slug focuseddate_calendar %})).
+     *
+     ** @example
+     * ```jsx
+     * <Calendar focusedDate={new Date()} />
+     * ```
      */
     focusedDate?: Date;
     /**
      * Sets the `id` of the Calendar.
+     *
+     ** @example
+     * ```jsx
+     * <Calendar id="calendar-id" />
+     * ```
      */
     id?: string;
     /**
      * Identifies the element(s) which will describe the component, similar to [HTML aria-describedby attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute).
-     * For example these elements could contain error or hint message.
+     * For example, these elements could contain error or hint messages.
+     *
+     ** @example
+     * ```jsx
+     * <Calendar ariaDescribedBy="description-id" />
+     * ```
      */
     ariaDescribedBy?: string;
     /**
      * Identifies the element(s) which will label the component.
+     *
+     ** @example
+     * ```jsx
+     * <Calendar ariaLabelledBy="label-id" />
+     * ```
      */
     ariaLabelledBy?: string;
     /**
      * Sets the maximum allowed date of the Calendar. Defaults to `2099-12-31`.
+     * ([see example]({% slug dateranges_calendar %}#toc-max-date)).
+     *
+     ** @example
+     * ```jsx
+     * <Calendar max={new Date(2099, 11, 31)} />
+     * ```
      */
     max?: Date;
     /**
      * Sets the minimum allowed date of the Calendar. Defaults to `1900-1-1`.
+     * ([see example]({% slug dateranges_calendar %}#toc-min-date)).
+     *
+     ** @example
+     * ```jsx
+     * <Calendar min={new Date(1900, 0, 1)} />
+     * ```
      */
     min?: Date;
     /**
      * Determines if the navigation sidebar will be displayed.
+     * ([see example]({% slug navigation_calendar %}#toc-sidebar)).
+     *
+     ** @example
+     * ```jsx
+     * <Calendar navigation={true} />
+     * ```
      */
     navigation?: boolean;
     /**
      * **Deprecated**
      *
      * Toggles the smooth scroll animation on navigation item click. By default, the animation is enabled in React 17.
+     *
+     ** @example
+     * ```jsx
+     * <Calendar smoothScroll={false} />
+     * ```
      */
     smoothScroll?: boolean;
     /**
      * Fires each time the Calendar is blurred.
+     *
+     ** @example
+     * ```jsx
+     * <Calendar onBlur={(event) => console.log('Blur event:', event)} />
+     * ```
      */
     onBlur?: (event: React.FocusEvent<any>) => void;
     /**
      * Fires each time the Calendar is focused.
+     *
+     ** @example
+     * ```jsx
+     * <Calendar onFocus={(event) => console.log('Focus event:', event)} />
+     * ```
      */
     onFocus?: (event: React.FocusEvent<any>) => void;
     /**
      * Sets the `tabIndex` property of the Calendar.
+     *
+     ** @example
+     * ```jsx
+     * <Calendar tabIndex={0} />
+     * ```
      */
     tabIndex?: number;
     /**
      * Defines the topmost view to which the user can navigate.
+     * ([see example]({% slug navigation_calendar %}#toc-top-view)).
+     *
+     ** @example
+     * ```jsx
+     * <Calendar topView="decade" />
+     * ```
      */
     topView?: ActiveView;
     /**
      * Specifies the possible format options for the displayed Calendar week days' names.
+     * ([see example]({% slug weeknames_calendar %})).
      *
      * @default short
+     *
+     ** @example
+     * ```jsx
+     * <Calendar weekDaysFormat="short" />
+     * ```
      */
     weekDaysFormat?: WeekDaysFormat;
     /**
      * Determines if the week number column will be displayed.
+     * ([see example]({% slug weeknumbers_calendar %})).
+     *
+     ** @example
+     * ```jsx
+     * <Calendar weekNumber={true} />
+     * ```
      */
     weekNumber?: boolean;
     /**
      * Displays the days that fall out of the current month.
+     * ([see example]({% slug othermonthdays_calendar %})).
+     *
+     ** @example
+     * ```jsx
+     * <Calendar showOtherMonthDays={true} />
+     * ```
      */
     showOtherMonthDays?: boolean;
     /**
-     * Enables the customization or the override of the default Calendar cell
+     * Enables the customization or the override of the default Calendar cell.
      * ([see example]({% slug custom_rendering_calendar %}#toc-cells-inside-the-view)).
+     *
+     ** @example
+     * ```jsx
+     * <Calendar cell={CustomCell} />
+     * ```
      */
     cell?: React.ComponentType<CalendarCellProps>;
     /**
-     * Enables the customization or the override of the default week-column cell in the Calendar
+     * Enables the customization or the override of the default week-column cell in the Calendar.
      * ([see example]({% slug custom_rendering_calendar %}#toc-cells-inside-the-week-column)).
+     *
+     ** @example
+     * ```jsx
+     * <Calendar weekCell={CustomWeekCell} />
+     * ```
      */
     weekCell?: React.ComponentType<CalendarWeekCellProps>;
     /**
-     * Enables the customization or the override of the default header title in the Calendar
+     * Enables the customization or the override of the default header title in the Calendar.
      * ([see example]({% slug custom_rendering_calendar %}#toc-titles-of-current-views)).
+     *
+     ** @example
+     * ```jsx
+     * <Calendar headerTitle={CustomHeaderTitle} />
+     * ```
      */
     headerTitle?: React.ComponentType<CalendarHeaderTitleProps>;
     /**
-     * Enables the customization or the override of the default header title in the Calendar
+     * Enables the customization or the override of the default header in the Calendar.
      * ([see example]({% slug custom_rendering_calendar %}#toc-titles-of-current-views)).
+     *
+     ** @example
+     * ```jsx
+     * <Calendar header={CustomHeader} />
+     * ```
      */
     header?: React.ComponentType<CalendarHeaderProps>;
     /**
-     * Enables the customization or the override of the default navigation item in the Calendar
+     * Enables the customization or the override of the default navigation item in the Calendar.
      * ([see example]({% slug custom_rendering_calendar %}#toc-items-in-the-side-navigation)).
+     *
+     ** @example
+     * ```jsx
+     * <Calendar navigationItem={CustomNavigationItem} />
+     * ```
      */
     navigationItem?: React.ComponentType<CalendarNavigationItemProps>;
 }
@@ -770,6 +901,12 @@ declare interface DateInputOptions {
      * [placeholders]({% slug placeholders_dateinput %}).
      */
     placeholder?: string | null;
+    /**
+     * Example usage of the `placeholder` property:
+     * ```jsx
+     * <DateInput placeholder="Enter a date" />
+     * ```
+     */
     /**
      * Determines wether should select the previous segment on backspace.
      *
@@ -1350,82 +1487,158 @@ export declare interface DatePickerSettings {
     /**
      * Enables the customization or the override of the default Toggle button which is rendered by the DatePicker
      * ([see example]({% slug custom_rendering_datepicker %}#toc-customizing-the-toggle-button)).
+     * Example usage of the `toggleButton` property:
+     * ```jsx
+     * <DatePicker toggleButton={CustomToggleButton} />
+     * ```
      */
     toggleButton?: React.ComponentType<ToggleButtonProps>;
     /**
      * Enables the customization or the override of the default Calendar which is rendered by the DatePicker
      * ([see example]({% slug custom_rendering_datepicker %}#toc-customizing-the-calendar)).
+     * Example usage of the `calendar` property:
+     * ```jsx
+     * <DatePicker calendar={CustomCalendar} />
+     * ```
      */
     calendar?: React.ComponentType<CalendarProps<any>> | React.ComponentType<MultiViewCalendarProps<any>>;
     /**
      * Enables the customization or the override of the default Popup which is rendered by the DatePicker
      * ([see example]({% slug custom_rendering_datepicker %}#toc-customizing-the-popup)).
+     * Example usage of the `popup` property:
+     * ```jsx
+     * <DatePicker popup={CustomPopup} />
+     * ```
      */
     popup?: React.ComponentType<PopupProps>;
     /**
      * Enables the customization or the override of the default DateInput which is rendered by the DatePicker
      * ([see example]({% slug custom_rendering_datepicker %}#toc-customizing-the-dateinput)).
+     * Example usage of the `dateInput` property:
+     * ```jsx
+     * <DatePicker dateInput={CustomDateInput} />
+     * ```
      */
     dateInput?: React.ComponentType<DateInputProps<any>>;
     /**
      * Sets the `className` of the DatePicker.
+     * Example usage of the `className` property:
+     * ```jsx
+     * <DatePicker className="custom-class" />
+     * ```
      */
     className?: string;
     /**
      * Sets the default state of the DatePicker upon render ([see example]({% slug default_value_datepicker %})).
+     * Example usage of the `defaultShow` property:
+     * ```jsx
+     * <DatePicker defaultShow={true} />
+     * ```
      */
     defaultShow?: boolean;
     /**
      * Determines whether the DatePicker is disabled ([see example]({% slug disabled_datepicker %})).
+     * Example usage of the `disabled` property:
+     * ```jsx
+     * <DatePicker disabled={true} />
+     * ```
      */
     disabled?: boolean;
     /**
      * Specifies the focused date of the DatePicker ([see example]({% slug dates_datepicker %})).
+     * Example usage of the `focusedDate` property:
+     * ```jsx
+     * <DatePicker focusedDate={new Date()} />
+     * ```
      */
     focusedDate?: Date;
     /**
      * Specifies the date format that is used to display the input value ([see example]({% slug formats_datepicker %})).
+     * Example usage of the `format` property:
+     * ```jsx
+     * <DatePicker format="MM/dd/yyyy" />
+     * ```
      */
     format?: string | DateFormatOptions;
     /**
      * Defines the descriptions of the format sections in the input field ([more information and examples]({% slug placeholders_datepicker %})).
+     * Example usage of the `formatPlaceholder` property:
+     * ```jsx
+     * <DatePicker formatPlaceholder="Enter date" />
+     * ```
      */
     formatPlaceholder?: DateInputFormatPlaceholder;
     /**
      * Specifies the `id` of the DatePicker.
+     * Example usage of the `id` property:
+     * ```jsx
+     * <DatePicker id="datepicker-id" />
+     * ```
      */
     id?: string;
     /**
      * Identifies the element(s) which will describe the component, similar to [HTML aria-describedby attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute).
      * For example these elements could contain error or hint message.
+     * Example usage of the `ariaDescribedBy` property:
+     * ```jsx
+     * <DatePicker ariaDescribedBy="description-id" />
+     * ```
      */
     ariaDescribedBy?: string;
     /**
      * Identifies the element(s) which will label the component.
+     * Example usage of the `ariaLabelledBy` property:
+     * ```jsx
+     * <DatePicker ariaLabelledBy="label-id" />
+     * ```
      */
     ariaLabelledBy?: string;
     /**
      * The accessible label of the component.
+     * Example usage of the `ariaLabel` property:
+     * ```jsx
+     * <DatePicker ariaLabel="Date Picker" />
+     * ```
      */
     ariaLabel?: string;
     /**
      * Specifies the greatest valid date ([see example]({% slug dateranges_datepicker %})).
+     * Example usage of the `max` property:
+     * ```jsx
+     * <DatePicker max={new Date(2099, 11, 31)} />
+     * ```
      */
     max?: Date;
     /**
      * Specifies the smallest valid date ([see example]({% slug dateranges_datepicker %})).
+     * Example usage of the `min` property:
+     * ```jsx
+     * <DatePicker min={new Date(1900, 0, 1)} />
+     * ```
      */
     min?: Date;
     /**
      * Specifies the `name` property of the `input` DOM element.
+     * Example usage of the `name` property:
+     * ```jsx
+     * <DatePicker name="datepicker-name" />
+     * ```
      */
     name?: string;
     /**
      * Fires each time any of the DatePicker elements gets blurred.
+     * Example usage of the `onBlur` property:
+     * ```jsx
+     * <DatePicker onBlur={(event) => console.log('Blur event:', event)} />
+     * ```
      */
     onBlur?: (event: React.FocusEvent<HTMLSpanElement | HTMLDivElement>) => void;
     /**
      * Fires each time the user focuses any of the DatePicker elements.
+     * Example usage of the `onFocus` property:
+     * ```jsx
+     * <DatePicker onFocus={(event) => console.log('Focus event:', event)} />
+     * ```
      */
     onFocus?: (event: React.FocusEvent<HTMLSpanElement | HTMLDivElement>) => void;
     /**
@@ -1435,36 +1648,68 @@ export declare interface DatePickerSettings {
      * - `animate: Boolean`&mdash;Controls the popup animation. By default, the open and close animations are enabled.
      * - `appendTo`: &mdash; Defines the container to which the Popup will be appended. Defaults to [`body`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body).
      * - `popupClass: String`&mdash;Specifies a list of CSS classes that are used to style the popup.
+     * Example usage of the `popupSettings` property:
+     * ```jsx
+     * <DatePicker popupSettings={{ animate: true, popupClass: 'custom-popup' }} />
+     * ```
      */
     popupSettings?: DateInputsPopupSettings;
     /**
      * Specifies if the calendar will be displayed ([see example]({% slug controlled_datepicker %}#toc-controlling-the-popup-state)).
+     * Example usage of the `show` property:
+     * ```jsx
+     * <DatePicker show={true} />
+     * ```
      */
     show?: boolean;
     /**
      * Sets the `tabIndex` property of the DatePicker.
+     * Example usage of the `tabIndex` property:
+     * ```jsx
+     * <DatePicker tabIndex={0} />
+     * ```
      */
     tabIndex?: number;
     /**
      * Sets the title of the `input` element of the DatePicker.
+     * Example usage of the `title` property:
+     * ```jsx
+     * <DatePicker title="Date Picker Title" />
+     * ```
      */
     title?: string;
     /**
      * Determines whether to display a week number column in the `month` view of the Calendar ([see example]({% slug weeknumcolumn_datepicker %})).
+     * Example usage of the `weekNumber` property:
+     * ```jsx
+     * <DatePicker weekNumber={true} />
+     * ```
      */
     weekNumber?: boolean;
     /**
      * Specifies the width of the DatePicker.
+     * Example usage of the `width` property:
+     * ```jsx
+     * <DatePicker width="300px" />
+     * ```
      */
     width?: number | string;
     /**
      * Renders a floating label for the DatePicker.
+     * Example usage of the `label` property:
+     * ```jsx
+     * <DatePicker label="Date Picker Label" />
+     * ```
      */
     label?: string;
     /**
      * Specifies the hint the DateInput displays when its value is `null` or there is no partial selection.
      * For more information, refer to the article on
      * [placeholders]({% slug placeholders_datepicker %}).
+     * Example usage of the `placeholder` property:
+     * ```jsx
+     * <DatePicker placeholder="Enter a date" />
+     * ```
      */
     placeholder?: string | null;
 }