rsuite 5.48.0 → 5.49.0

package/esm/Calendar/CalendarContainer.d.ts

@@ -6,6 +6,8 @@ import { CalendarState } from './useCalendarState';
 export interface CalendarProps extends WithAsProps, Omit<HTMLAttributes<HTMLDivElement>, 'onSelect' | 'onChange' | 'onMouseMove'>, CalendarHeaderProps {
     /** The panel render based on date range */
     dateRange?: Date[];
+    /** The Id of the target element that triggers the opening of the calendar */
+    targetId?: string;
     /** Date displayed on the current page */
     calendarDate: Date;
     /** Whether to show week numbers */

package/esm/Calendar/CalendarContainer.js

@@ -9,7 +9,7 @@ import TimeDropdown from './TimeDropdown';
 import CalendarBody from './CalendarBody';
 import CalendarHeader from './CalendarHeader';
 import { useClassNames } from '../utils';
-import { disabledTime, addMonths, shouldRenderDate, shouldRenderTime, shouldRenderMonth, isSameMonth, calendarOnlyProps, omitHideDisabledProps } from '../utils/dateUtils';
+import { disabledTime, addMonths, shouldRenderDate, shouldRenderTime, shouldRenderMonth, isSameMonth, calendarOnlyProps, omitHideDisabledProps, isValid } from '../utils/dateUtils';
 import { CalendarProvider } from './CalendarContext';
 import useCalendarState, { CalendarState } from './useCalendarState';
 import AngleUpIcon from '@rsuite/icons/legacy/AngleUp';
@@ -28,6 +28,7 @@ var CalendarContainer = /*#__PURE__*/React.forwardRef(function (props, ref) {
     hoverRangeValue = props.hoverRangeValue,
     _props$isoWeek = props.isoWeek,
     isoWeek = _props$isoWeek === void 0 ? false : _props$isoWeek,
+    targetId = props.targetId,
     limitEndYear = props.limitEndYear,
     limitStartYear = props.limitStartYear,
     locale = props.locale,
@@ -40,7 +41,7 @@ var CalendarContainer = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onToggleMeridian = props.onToggleMeridian,
     onToggleMonthDropdown = props.onToggleMonthDropdown,
     onToggleTimeDropdown = props.onToggleTimeDropdown,
-    calendarDate = props.calendarDate,
+    calendarDateProp = props.calendarDate,
     cellClassName = props.cellClassName,
     renderCell = props.renderCell,
     renderTitle = props.renderTitle,
@@ -48,7 +49,7 @@ var CalendarContainer = /*#__PURE__*/React.forwardRef(function (props, ref) {
     showMeridian = props.showMeridian,
     showWeekNumbers = props.showWeekNumbers,
     inline = props.inline,
-    rest = _objectWithoutPropertiesLoose(props, ["as", "className", "classPrefix", "dateRange", "disabledBackward", "defaultState", "disabledDate", "disabledForward", "format", "hoverRangeValue", "isoWeek", "limitEndYear", "limitStartYear", "locale", "onChangeMonth", "onChangeTime", "onMouseMove", "onMoveBackward", "onMoveForward", "onSelect", "onToggleMeridian", "onToggleMonthDropdown", "onToggleTimeDropdown", "calendarDate", "cellClassName", "renderCell", "renderTitle", "renderToolbar", "showMeridian", "showWeekNumbers", "inline"]);
+    rest = _objectWithoutPropertiesLoose(props, ["as", "className", "classPrefix", "dateRange", "disabledBackward", "defaultState", "disabledDate", "disabledForward", "format", "hoverRangeValue", "isoWeek", "targetId", "limitEndYear", "limitStartYear", "locale", "onChangeMonth", "onChangeTime", "onMouseMove", "onMoveBackward", "onMoveForward", "onSelect", "onToggleMeridian", "onToggleMonthDropdown", "onToggleTimeDropdown", "calendarDate", "cellClassName", "renderCell", "renderTitle", "renderToolbar", "showMeridian", "showWeekNumbers", "inline"]);
   var _useClassNames = useClassNames(classPrefix),
     withClassPrefix = _useClassNames.withClassPrefix,
     merge = _useClassNames.merge,
@@ -58,6 +59,9 @@ var CalendarContainer = /*#__PURE__*/React.forwardRef(function (props, ref) {
     reset = _useCalendarState.reset,
     openMonth = _useCalendarState.openMonth,
     openTime = _useCalendarState.openTime;
+  var calendarDate = useMemo(function () {
+    return isValid(calendarDateProp) ? calendarDateProp : new Date();
+  }, [calendarDateProp]);
   var isDisabledDate = useCallback(function (date) {
     var _disabledDate;
     return (_disabledDate = disabledDate === null || disabledDate === void 0 ? void 0 : disabledDate(date)) !== null && _disabledDate !== void 0 ? _disabledDate : false;
@@ -123,6 +127,7 @@ var CalendarContainer = /*#__PURE__*/React.forwardRef(function (props, ref) {
       hoverRangeValue: hoverRangeValue,
       inSameMonth: inSameThisMonthDate,
       isoWeek: isoWeek,
+      targetId: targetId,
       locale: locale,
       onChangeMonth: handleChangeMonth,
       onChangeTime: onChangeTime,
@@ -133,10 +138,12 @@ var CalendarContainer = /*#__PURE__*/React.forwardRef(function (props, ref) {
       showWeekNumbers: showWeekNumbers,
       inline: inline
     };
-  }, [calendarDate, dateRange, format, handleChangeMonth, hoverRangeValue, inSameThisMonthDate, inline, isDisabledDate, isoWeek, locale, onChangeTime, onMouseMove, onSelect, cellClassName, renderCell, showWeekNumbers]);
+  }, [calendarDate, dateRange, format, handleChangeMonth, hoverRangeValue, inSameThisMonthDate, inline, isDisabledDate, isoWeek, targetId, locale, onChangeTime, onMouseMove, onSelect, cellClassName, renderCell, showWeekNumbers]);
   return /*#__PURE__*/React.createElement(CalendarProvider, {
     value: contextValue
-  }, /*#__PURE__*/React.createElement(Component, _extends({}, omitHideDisabledProps(rest), {
+  }, /*#__PURE__*/React.createElement(Component, _extends({
+    "data-testid": "calendar"
+  }, omitHideDisabledProps(rest), {
     className: calendarClasses,
     ref: ref
   }), /*#__PURE__*/React.createElement(CalendarHeader, {

package/esm/Calendar/CalendarHeader.js

@@ -122,6 +122,7 @@ var CalendarHeader = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }), hasMonth && monthToolbar, showTime && /*#__PURE__*/React.createElement("div", {
     className: prefix('time-toolbar')
   }, /*#__PURE__*/React.createElement(Button, _extends({}, btnProps, {
+    "aria-label": "Select time",
     className: timeTitleClasses,
     onClick: onToggleTimeDropdown,
     disabled: disableSelectTime
@@ -129,6 +130,7 @@ var CalendarHeader = /*#__PURE__*/React.forwardRef(function (props, ref) {
     date: date,
     formatStr: getTimeFormat()
   })), showMeridian && /*#__PURE__*/React.createElement(Button, _extends({}, btnProps, {
+    "aria-label": "Toggle meridian",
     className: prefix('meridian'),
     onClick: onToggleMeridian,
     disabled: disableSelectTime

package/esm/Calendar/MonthDropdown.js

@@ -35,7 +35,8 @@ var MonthDropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
     rest = _objectWithoutPropertiesLoose(props, ["as", "className", "classPrefix", "limitStartYear", "limitEndYear", "show", "height", "width", "disabledMonth"]);
   var _useCalendarContext = useCalendarContext(),
     _useCalendarContext$d = _useCalendarContext.date,
-    date = _useCalendarContext$d === void 0 ? new Date() : _useCalendarContext$d;
+    date = _useCalendarContext$d === void 0 ? new Date() : _useCalendarContext$d,
+    targetId = _useCalendarContext.targetId;
   var _useClassNames = useClassNames(classPrefix),
     prefix = _useClassNames.prefix,
     merge = _useClassNames.merge,
@@ -69,6 +70,7 @@ var MonthDropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
     return /*#__PURE__*/React.createElement("div", {
       className: rowClassName,
       role: "row",
+      "aria-label": "" + year,
       style: style
     }, /*#__PURE__*/React.createElement("div", {
       className: titleClassName,
@@ -92,7 +94,10 @@ var MonthDropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var initialItemIndex = DateUtils.getYear(date) - startYear;
   var initialScrollOffset = itemSize * initialItemIndex;
   return /*#__PURE__*/React.createElement(Component, _extends({
-    role: "menu"
+    role: "grid",
+    "aria-label": "Select month",
+    tabIndex: -1,
+    id: targetId ? targetId + "-" + classPrefix : undefined
   }, rest, {
     ref: ref,
     className: classes

package/esm/Calendar/MonthDropdownItem.js

@@ -55,8 +55,8 @@ var MonthDropdownItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
   return /*#__PURE__*/React.createElement(Component, _extends({
     key: month,
     role: "gridcell",
-    "aria-selected": active ? true : undefined,
-    "aria-disabled": disabled ? true : undefined,
+    "aria-selected": active,
+    "aria-disabled": disabled,
     "aria-label": ariaLabel,
     tabIndex: active ? 0 : -1,
     ref: ref,

package/esm/Calendar/Table.js

@@ -6,6 +6,7 @@ import PropTypes from 'prop-types';
 import TableRow from './TableRow';
 import TableHeaderRow from './TableHeaderRow';
 import { useClassNames } from '../utils';
+import { useCalendarContext } from './CalendarContext';
 var Table = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _props$as = props.as,
     Component = _props$as === void 0 ? 'div' : _props$as,
@@ -19,8 +20,12 @@ var Table = /*#__PURE__*/React.forwardRef(function (props, ref) {
     merge = _useClassNames.merge,
     withClassPrefix = _useClassNames.withClassPrefix;
   var classes = merge(className, withClassPrefix());
+  var _useCalendarContext = useCalendarContext(),
+    targetId = _useCalendarContext.targetId;
   return /*#__PURE__*/React.createElement(Component, _extends({
-    role: "grid"
+    role: "grid",
+    tabIndex: -1,
+    id: targetId ? targetId + "-" + classPrefix : undefined
   }, rest, {
     ref: ref,
     className: classes

package/esm/Calendar/TimeDropdown.js

@@ -90,7 +90,8 @@ var TimeDropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
     locale = _useCalendarContext.locale,
     format = _useCalendarContext.format,
     date = _useCalendarContext.date,
-    onSelect = _useCalendarContext.onChangeTime;
+    onSelect = _useCalendarContext.onChangeTime,
+    targetId = _useCalendarContext.targetId;
   var rowRef = useRef(null);
   useEffect(function () {
     var time = getTime({
@@ -141,24 +142,26 @@ var TimeDropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
         });
         items.push( /*#__PURE__*/React.createElement("li", {
           key: i,
-          role: "menuitem"
-        }, /*#__PURE__*/React.createElement("a", {
-          role: "button",
-          className: itemClasses,
+          role: "option",
           tabIndex: -1,
+          "aria-label": i + " " + type,
+          "aria-selected": active === i,
+          "aria-disabled": disabled,
           "data-key": type + "-" + i,
           onClick: !disabled ? partial(handleClick, type, i) : undefined
+        }, /*#__PURE__*/React.createElement("span", {
+          className: itemClasses
         }, showMeridian && type === 'hours' && i === 0 ? '12' : i)));
       }
     }
     return /*#__PURE__*/React.createElement("div", {
-      className: prefix('column'),
-      role: "listitem"
+      className: prefix('column')
     }, /*#__PURE__*/React.createElement("div", {
       className: prefix('column-title')
     }, locale === null || locale === void 0 ? void 0 : locale[type]), /*#__PURE__*/React.createElement("ul", {
       "data-type": type,
-      role: "menu"
+      role: "listbox",
+      "aria-label": "Select " + type
     }, items));
   };
   var time = getTime({
@@ -166,9 +169,13 @@ var TimeDropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
     date: date,
     showMeridian: showMeridian
   });
-  var classes = merge(className, rootPrefix(classPrefix));
+  var classes = merge(className, rootPrefix(classPrefix), {
+    show: show
+  });
   return /*#__PURE__*/React.createElement(Component, _extends({
-    role: "list"
+    role: "group",
+    tabIndex: -1,
+    id: targetId ? targetId + "-" + classPrefix : undefined
   }, DateUtils.omitHideDisabledProps(rest), {
     ref: ref,
     className: classes

package/esm/Calendar/types.d.ts

@@ -16,6 +16,7 @@ export interface CalendarInnerContextValue {
     cellClassName?: (date: Date) => string | undefined;
     showWeekNumbers?: boolean;
     inline?: boolean;
+    targetId?: string;
 }
 export interface CalendarContextValue extends CalendarInnerContextValue {
     locale: CalendarLocale;

package/esm/CustomProvider/CustomProvider.d.ts

@@ -67,6 +67,19 @@ declare const CustomContext: React.Context<CustomProviderProps<{
         more: string;
         prev: string;
         next: string;
+        /**
+         * Return the date parsed from string using the given format string.
+         *
+         * Example:
+         *
+         *  import parse from 'date-fns/parse';
+         *  import eo from 'date-fns/locale/eo'
+         *
+         *  function parseDate(date, formatStr) {
+         *    return parse(date, formatStr, new Date(), { locale: eo });
+         *  }
+         *
+         * */
         first: string;
         last: string;
         limit: string;

package/esm/CustomProvider/CustomProvider.js

@@ -1,11 +1,11 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import React, { useEffect } from 'react';
+import React from 'react';
 import { getClassNamePrefix, prefix } from '../utils/prefix';
 import { addClass, removeClass, canUseDOM } from '../DOMHelper';
 import ToastContainer, { toastPlacements } from '../toaster/ToastContainer';
-import { usePortal } from '../utils';
+import { usePortal, useIsomorphicLayoutEffect } from '../utils';
 var CustomContext = /*#__PURE__*/React.createContext({});
 var themes = ['light', 'dark', 'high-contrast'];
 
@@ -36,7 +36,7 @@ var CustomProvider = function CustomProvider(props) {
       disableRipple: disableRipple
     }, rest);
   }, [classPrefix, theme, disableRipple, rest]);
-  useEffect(function () {
+  useIsomorphicLayoutEffect(function () {
     if (canUseDOM && theme) {
       addClass(document.body, prefix(classPrefix, "theme-" + theme));
 

package/esm/DateInput/DateField.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { type Locale } from 'date-fns';
+import type { Locale } from 'date-fns';
 export declare const patternMap: {
     y: string;
     M: string;
@@ -22,9 +22,12 @@ export declare class DateField extends Object {
     hour: number | null;
     minute: number | null;
     second: number | null;
-    meridian: 'AM' | 'PM' | null;
     constructor(format: string, value?: Date | null);
 }
+interface Action {
+    type: string;
+    value: any;
+}
 export declare const useDateField: (format: string, localize: Locale['localize'], date?: Date | null) => {
     dateField: {
         year: any;
@@ -38,7 +41,6 @@ export declare const useDateField: (format: string, localize: Locale['localize']
         hour: number | null;
         minute: number | null;
         second: number | null;
-        meridian: 'AM' | 'PM' | null;
         constructor: Function;
         toString(): string;
         toLocaleString(): string;
@@ -59,7 +61,6 @@ export declare const useDateField: (format: string, localize: Locale['localize']
         hour: number | null;
         minute: number | null;
         second: number | null;
-        meridian: 'AM' | 'PM' | null;
         constructor: Function;
         toString(): string;
         toLocaleString(): string;
@@ -80,7 +81,6 @@ export declare const useDateField: (format: string, localize: Locale['localize']
         hour: number | null;
         minute: number | null;
         second: number | null;
-        meridian: 'AM' | 'PM' | null;
         constructor: Function;
         toString(): string;
         toLocaleString(): string;
@@ -101,7 +101,6 @@ export declare const useDateField: (format: string, localize: Locale['localize']
         day: number | null;
         minute: number | null;
         second: number | null;
-        meridian: 'AM' | 'PM' | null;
         constructor: Function;
         toString(): string;
         toLocaleString(): string;
@@ -122,7 +121,6 @@ export declare const useDateField: (format: string, localize: Locale['localize']
         day: number | null;
         hour: number | null;
         second: number | null;
-        meridian: 'AM' | 'PM' | null;
         constructor: Function;
         toString(): string;
         toLocaleString(): string;
@@ -143,28 +141,6 @@ export declare const useDateField: (format: string, localize: Locale['localize']
         day: number | null;
         hour: number | null;
         minute: number | null;
-        meridian: 'AM' | 'PM' | null;
-        constructor: Function;
-        toString(): string;
-        toLocaleString(): string;
-        valueOf(): Object;
-        hasOwnProperty(v: PropertyKey): boolean;
-        isPrototypeOf(v: Object): boolean;
-        propertyIsEnumerable(v: PropertyKey): boolean;
-        should: Chai.Assertion;
-    } | {
-        meridian: any;
-        format: string;
-        patternArray: {
-            pattern: string;
-            key: string;
-        }[];
-        year: number | null;
-        month: number | null;
-        day: number | null;
-        hour: number | null;
-        minute: number | null;
-        second: number | null;
         constructor: Function;
         toString(): string;
         toLocaleString(): string;
@@ -174,7 +150,9 @@ export declare const useDateField: (format: string, localize: Locale['localize']
         propertyIsEnumerable(v: PropertyKey): boolean;
         should: Chai.Assertion;
     };
-    dispatch: import("react").Dispatch<any>;
-    toDate: (type: string, value: number | null) => Date;
+    dispatch: import("react").Dispatch<Action>;
+    toDate: (type?: string, value?: number | null) => Date | null;
     toDateString: () => string;
+    isEmptyValue: (type?: string, value?: number | null) => boolean | undefined;
 };
+export {};

package/esm/DateInput/DateField.js

@@ -3,6 +3,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
 import _wrapNativeSuper from "@babel/runtime/helpers/esm/wrapNativeSuper";
 import { useReducer } from 'react';
+import isValid from 'date-fns/isValid';
 import { modifyDate } from './utils';
 export var patternMap = {
   y: 'year',
@@ -27,7 +28,6 @@ export var DateField = /*#__PURE__*/function (_Object) {
     _this.hour = null;
     _this.minute = null;
     _this.second = null;
-    _this.meridian = null;
     _this.format = format;
     var formatArray = format.match(new RegExp('([y|d|M|H|h|m|s|a])+', 'ig')) || [];
     _this.patternArray = formatArray.map(function (pattern) {
@@ -36,14 +36,13 @@ export var DateField = /*#__PURE__*/function (_Object) {
         key: patternMap[pattern[0]]
       };
     });
-    if (value) {
+    if (value && isValid(value)) {
       _this.year = value.getFullYear();
       _this.month = value.getMonth() + 1;
       _this.day = value.getDate();
       _this.hour = value.getHours();
       _this.minute = value.getMinutes();
       _this.second = value.getSeconds();
-      _this.meridian = value.getHours() > 12 ? 'PM' : 'AM';
     }
     return _this;
   }
@@ -91,10 +90,8 @@ export var useDateField = function useDateField(format, localize, date) {
           return _extends({}, state, {
             second: action.value
           });
-        case 'setMeridian':
-          return _extends({}, state, {
-            meridian: action.value
-          });
+        case 'setNewDate':
+          return new DateField(format, action.value);
         default:
           return state;
       }
@@ -106,6 +103,7 @@ export var useDateField = function useDateField(format, localize, date) {
     dateField.patternArray.forEach(function (item) {
       var key = item.key,
         pattern = item.pattern;
+      var hour = dateField.hour;
       var value = dateField[key];
       if (value !== null) {
         if (pattern === 'MMM' && typeof value === 'number') {
@@ -116,8 +114,12 @@ export var useDateField = function useDateField(format, localize, date) {
           value = localize === null || localize === void 0 ? void 0 : localize.month(value - 1, {
             width: 'wide'
           });
-        } else if (pattern === 'aa' && typeof value === 'number') {
-          value = value === 0 ? 'AM' : 'PM';
+        } else if (pattern === 'aa') {
+          if (typeof hour === 'number') {
+            value = hour > 12 ? 'PM' : 'AM';
+          } else {
+            value = 'aa';
+          }
         } else if (pattern === 'hh' && typeof value === 'number') {
           value = value === 0 ? 12 : value > 12 ? value - 12 : value;
         }
@@ -129,16 +131,63 @@ export var useDateField = function useDateField(format, localize, date) {
     });
     return str;
   };
+
+  // Check if the field value is valid.
+  var validFieldValue = function validFieldValue(type, value) {
+    var _format$match;
+    var isValid = true;
+    (_format$match = format.match(new RegExp('([y|d|M|H|h|m|s])+', 'ig'))) === null || _format$match === void 0 ? void 0 : _format$match.forEach(function (pattern) {
+      var key = patternMap[pattern[0]];
+      var fieldValue = type === key ? value : dateField[key];
+      if (fieldValue === null) {
+        isValid = false;
+        return;
+      }
+    });
+    return isValid;
+  };
+  var isEmptyValue = function isEmptyValue(type, value) {
+    var _format$match2;
+    var checkValueArray = (_format$match2 = format.match(new RegExp('([y|d|M|H|h|m|s])+', 'ig'))) === null || _format$match2 === void 0 ? void 0 : _format$match2.map(function (pattern) {
+      var key = patternMap[pattern[0]];
+      var fieldValue = type === key ? value : dateField[key];
+      return fieldValue !== null;
+    });
+    return checkValueArray === null || checkValueArray === void 0 ? void 0 : checkValueArray.every(function (item) {
+      return item === false;
+    });
+  };
   var toDate = function toDate(type, value) {
-    if (value === null) {
+    var year = dateField.year,
+      month = dateField.month,
+      day = dateField.day,
+      hour = dateField.hour,
+      minute = dateField.minute,
+      second = dateField.second;
+    var date = new Date(year || 0, typeof month === 'number' ? month - 1 : 0,
+    // The default day is 1 when the value is null, otherwise it becomes the last day of the month.
+    day || 1, hour || 0, minute || 0, second || 0);
+    if (typeof type === 'undefined' || typeof value === 'undefined') {
+      return date;
+    }
+    if (value === null || !validFieldValue(type, value)) {
+      if (isEmptyValue(type, value)) {
+        return null;
+      }
       return new Date('');
     }
-    return modifyDate(new Date(dateField.year, dateField.month ? dateField.month - 1 : 0, dateField.day, dateField.hour, dateField.minute, dateField.second), type, value);
+    if (type === 'meridian' && typeof hour === 'number') {
+      var newHour = hour > 12 ? hour - 12 : hour + 12;
+      type = 'hour';
+      value = newHour;
+    }
+    return modifyDate(date, type, value);
   };
   return {
     dateField: dateField,
     dispatch: dispatch,
     toDate: toDate,
-    toDateString: toDateString
+    toDateString: toDateString,
+    isEmptyValue: isEmptyValue
   };
 };

package/esm/DateInput/DateInput.d.ts

@@ -3,11 +3,16 @@ import { InputProps } from '../Input';
 import { FormControlBaseProps } from '../@types/common';
 export interface DateInputProps extends Omit<InputProps, 'value' | 'onChange' | 'defaultValue'>, FormControlBaseProps<Date | null> {
     /**
-     * Format of the date when rendered in the input.
-     * Format of the string is based on Unicode Technical Standard: https://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table
+     * Format of the date when rendered in the input. Format of the string is based on Unicode Technical Standard.
+     *
+     * @see https://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table
      * @default 'yyyy-MM-dd'
      **/
     format?: string;
+    /**
+     * The `placeholder` prop defines the text displayed in a form control when the control has no value.
+     */
+    placeholder?: string;
 }
 /**
  * The DateInput component lets users select a date with the keyboard.