rsuite 5.48.1 → 5.49.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [5.49.0](https://github.com/rsuite/rsuite/compare/v5.48.1...v5.49.0) (2023-12-29)
+
+### Bug Fixes
+
+- **CSS Reset:** fix `rsuite-no-reset.css` overrides the default styles of the app ([#3527](https://github.com/rsuite/rsuite/issues/3527)) ([dff5804](https://github.com/rsuite/rsuite/commit/dff5804f81c00dfe4f4bb02eac92e070fabcc4f8))
+- **CustomProvider:** fix the flicker when initializing in Dark mode ([#3528](https://github.com/rsuite/rsuite/issues/3528)) ([2bd67fd](https://github.com/rsuite/rsuite/commit/2bd67fd60ddaec9a5925d22e7cee126425b6ad78))
+- **DateRangePicker:** fix layout misalignment due to missing min-width ([#3523](https://github.com/rsuite/rsuite/issues/3523)) ([464af79](https://github.com/rsuite/rsuite/commit/464af7964fe5fb8e434c7113084e6597726f3db6))
+
+### Features
+
+- **DatePicker:** supports date selection by using keyboard ([#3515](https://github.com/rsuite/rsuite/issues/3515)) ([bc56cb3](https://github.com/rsuite/rsuite/commit/bc56cb33fb15854a0d3f6c3c3bb6ee3b4036aef5))
+- **DateRangeInput:** add support for DateRangeInput ([#3525](https://github.com/rsuite/rsuite/issues/3525)) ([074245a](https://github.com/rsuite/rsuite/commit/074245a2f5f18028426d896584690d1738606d1c))
+- **Input:** add support for htmlSize prop ([#3526](https://github.com/rsuite/rsuite/issues/3526)) ([62de8ca](https://github.com/rsuite/rsuite/commit/62de8ca14eb2aaf8dde904b3667035cb3f060c23))
+
 ## [5.48.1](https://github.com/rsuite/rsuite/compare/v5.48.0...v5.48.1) (2023-12-22)
 
 ### Bug Fixes

package/Cascader/styles/index.less

@@ -80,6 +80,7 @@
     margin: 0;
     padding: 0;
     list-style: none;
+    font-size: @font-size-base;
   }
 }
 

package/DatePicker/styles/index.less

@@ -8,17 +8,6 @@
 // DatePicker Picker
 // ----------------------
 
-// Change the <caret/> & <clean/> vertical position make it align middle.
-.rs-picker-date,
-.rs-picker-daterange {
-  &.rs-picker-default {
-    .rs-picker-toggle-caret,
-    .rs-picker-toggle-clean {
-      top: @padding-y - @picker-default-toggle-border-width;
-    }
-  }
-}
-
 // Toolbar
 .rs-picker-toolbar {
   padding: @calendar-picker-padding;
@@ -34,6 +23,24 @@
       height: 286px;
     }
   }
+
+  .rs-input-group-addon {
+    color: var(--rs-text-secondary);
+
+    .rs-btn-close {
+      padding: 0;
+    }
+  }
+
+  &.rs-picker-subtle {
+    .rs-input-group {
+      border-color: transparent;
+    }
+  }
+
+  > .rs-input-group.rs-input-group-inside .rs-input {
+    padding-right: 0;
+  }
 }
 
 // Predefined Ranges

package/DateRangeInput/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "rsuite/DateRangeInput",
+  "private": true,
+  "main": "../cjs/DateRangeInput/index.js",
+  "module": "../esm/DateRangeInput/index.js",
+  "types": "../esm/DateRangeInput/index.d.ts"
+}

package/DateRangePicker/styles/index.less

@@ -4,6 +4,16 @@
 @import '../../DatePicker/styles/index';
 @import '../../Calendar/styles/index';
 
+// Change the <caret/> & <clean/> vertical position make it align middle.
+.rs-picker-daterange {
+  &.rs-picker-default {
+    .rs-picker-toggle-caret,
+    .rs-picker-toggle-clean {
+      top: @padding-y - @picker-default-toggle-border-width;
+    }
+  }
+}
+
 // Date range Picker
 // ----------------------
 

package/InputGroup/styles/index.less

@@ -35,6 +35,7 @@
 
   & & {
     outline: none !important;
+    border-color: transparent !important;
   }
 
   .rs-input-number,

package/Picker/styles/index.less

@@ -80,6 +80,26 @@
   &.rs-picker-focused {
     box-shadow: var(--rs-state-focus-shadow);
   }
+
+  &-label.rs-input-group-addon {
+    color: var(--rs-text-primary);
+    padding-right: 4px !important;
+  }
+
+  &-loader {
+    width: 14px;
+    height: 14px;
+    display: flex;
+    align-items: center;
+  }
+
+  &-error > .rs-input-group {
+    border-color: var(--rs-state-error) !important;
+
+    &:focus-within {
+      outline: var(--rs-state-error-outline) !important;
+    }
+  }
 }
 
 .rs-picker-toggle {

package/README.md

@@ -8,11 +8,13 @@ English | [中文版][readm-cn]
 
 [![npm][npm-svg]][npm-home]
 [![GitHub Actions][actions-svg]][actions-home]
-[![codecov](https://codecov.io/gh/rsuite/rsuite/branch/main/graph/badge.svg?token=HGeKd0BD3t)](https://codecov.io/gh/rsuite/rsuite)
+[![npm bundle size][npm-bundle-size-img]][npm-bundle-size]
+[![rsuite.min.js][rsuite-min-js-img]][rsuite-min-js]
+[![codecov][codecov-img]][codecov]
 [![Discord][discord-svg]][discord-invite]
 [![Gitter][gitter-svg]][gitter]
 [![Gitter][gitter-cn-svg]][gitter-cn]
-[![Gitpod ready-to-code](https://img.shields.io/badge/Gitpod-ready--to--code-blue?logo=gitpod)](https://gitpod.io/#https://github.com/rsuite/rsuite)
+[![Gitpod ready-to-code][gitpod-img]][gitpod]
 
 React Suite is a set of react component libraries for enterprise system products. It is a well-thought-out and developer-friendly UI framework.
 
@@ -145,11 +147,15 @@ This project exists thanks to all the people who contribute.
 
 React Suite is [MIT licensed][license]. Copyright (c) 2016-present, HYPERS.
 
-[readm-cn]: https://github.com/rsuite/rsuite/blob/master/README_zh.md
+[readm-cn]: https://github.com/rsuite/rsuite/blob/main/README_zh.md
 [npm-svg]: https://img.shields.io/npm/v/rsuite
 [npm-home]: https://www.npmjs.com/package/rsuite
-[actions-svg]: https://github.com/rsuite/rsuite/workflows/Node.js%20CI/badge.svg?branch=master
-[actions-home]: https://github.com/rsuite/rsuite/actions?query=branch%3Amaster+workflow%3A%22Node.js+CI%22
+[npm-bundle-size-img]: https://badgen.net/bundlephobia/minzip/rsuite?icon=npm
+[npm-bundle-size]: https://bundlephobia.com/package/rsuite
+[rsuite-min-js-img]: https://img.badgesize.io/https:/unpkg.com/rsuite/dist/rsuite.min.js?label=rsuite.min.js&compression=gzip
+[rsuite-min-js]: https://unpkg.com/browse/rsuite/dist/rsuite.min.js
+[actions-svg]: https://github.com/rsuite/rsuite/workflows/Node.js%20CI/badge.svg?branch=main
+[actions-home]: https://github.com/rsuite/rsuite/actions?query=branch%3Amain+workflow%3A%22Node.js+CI%22
 [discord-svg]: https://img.shields.io/badge/Discord-Join%20chat%20%E2%86%92-738bd7.svg
 [discord-invite]: https://discord.gg/R8mnjwh
 [rsuite-design]: https://rsuitejs.com/design/default
@@ -160,30 +166,34 @@ React Suite is [MIT licensed][license]. Copyright (c) 2016-present, HYPERS.
 [rsuite-doc-guide-rtl]: https://rsuitejs.com/en/guide/rtl
 [rsuite-components-overview]: https://rsuitejs.com/en/components/overview
 [release-notes]: https://github.com/rsuite/rsuite/releases
-[contributing]: https://github.com/rsuite/rsuite/blob/master/CONTRIBUTING.md
+[contributing]: https://github.com/rsuite/rsuite/blob/main/CONTRIBUTING.md
 [prettierrc]: https://github.com/rsuite/rsuite/wiki/.prettierrc
 [issues-11]: https://github.com/rsuite/rsuite/issues/11
 [opencollective-svg]: https://opencollective.com/rsuite/tiers/backer.svg?avatarHeight=36
 [opencollective-home]: https://opencollective.com/rsuite
-[license]: https://github.com/rsuite/rsuite/blob/master/LICENSE
+[license]: https://github.com/rsuite/rsuite/blob/main/LICENSE
 [rsuite-sample]: https://sample.rsuitejs.com/
 [gitter]: https://gitter.im/rsuite/rsuite?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge
 [gitter-svg]: https://img.shields.io/gitter/room/rsuite/rsuite?label=chat-english
 [gitter-cn]: https://gitter.im/rsuite/rsuite-CN?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge
 [gitter-cn-svg]: https://img.shields.io/gitter/room/rsuite/rsuite?label=chat-chinese
 [demo-admin]: https://github.com/rsuite/rsuite-management-system
-[demo-modular-import]: https://github.com/rsuite/rsuite/tree/master/examples/with-babel-preset-rsuite
-[demo-cdn]: https://github.com/rsuite/rsuite/tree/master/examples/cdn
-[demo-create-react-app]: https://github.com/rsuite/rsuite/tree/master/examples/create-react-app
-[demo-electron]: https://github.com/rsuite/rsuite/tree/master/examples/with-electron
-[demo-intl-app]: https://github.com/rsuite/rsuite/tree/master/examples/custom-i18n
-[demo-multiple-themes]: https://github.com/rsuite/rsuite/tree/master/examples/custom-multiple-themes
-[demo-flow-app]: https://github.com/rsuite/rsuite/tree/master/examples/with-flow
-[demo-typescript-app]: https://github.com/rsuite/rsuite/tree/master/examples/with-typescript
-[demo-nextjs]: https://github.com/rsuite/rsuite/tree/master/examples/with-nextjs
-[demo-umi-app]: https://github.com/rsuite/rsuite/tree/master/examples/with-umi
-[demo-rtlcss]: https://github.com/rsuite/rsuite/tree/master/examples/with-rtlcss
-[demo-postcss-rtl]: https://github.com/rsuite/rsuite/tree/master/examples/with-postcss-rtl
-[demo-nextjs-typescript]: https://github.com/rsuite/rsuite/tree/master/examples/with-nextjs-typescript
-[demo-snowpack]: https://github.com/rsuite/rsuite/tree/master/examples/with-snowpack
-[demo-vite]: https://github.com/rsuite/rsuite/tree/master/examples/with-vite
+[demo-modular-import]: https://github.com/rsuite/rsuite/tree/main/examples/with-babel-preset-rsuite
+[demo-cdn]: https://github.com/rsuite/rsuite/tree/main/examples/cdn
+[demo-create-react-app]: https://github.com/rsuite/rsuite/tree/main/examples/create-react-app
+[demo-electron]: https://github.com/rsuite/rsuite/tree/main/examples/with-electron
+[demo-intl-app]: https://github.com/rsuite/rsuite/tree/main/examples/custom-i18n
+[demo-multiple-themes]: https://github.com/rsuite/rsuite/tree/main/examples/custom-multiple-themes
+[demo-flow-app]: https://github.com/rsuite/rsuite/tree/main/examples/with-flow
+[demo-typescript-app]: https://github.com/rsuite/rsuite/tree/main/examples/with-typescript
+[demo-nextjs]: https://github.com/rsuite/rsuite/tree/main/examples/with-nextjs
+[demo-umi-app]: https://github.com/rsuite/rsuite/tree/main/examples/with-umi
+[demo-rtlcss]: https://github.com/rsuite/rsuite/tree/main/examples/with-rtlcss
+[demo-postcss-rtl]: https://github.com/rsuite/rsuite/tree/main/examples/with-postcss-rtl
+[demo-nextjs-typescript]: https://github.com/rsuite/rsuite/tree/main/examples/with-nextjs-typescript
+[demo-snowpack]: https://github.com/rsuite/rsuite/tree/main/examples/with-snowpack
+[demo-vite]: https://github.com/rsuite/rsuite/tree/main/examples/with-vite
+[codecov]: https://codecov.io/gh/rsuite/rsuite
+[codecov-img]: https://codecov.io/gh/rsuite/rsuite/branch/main/graph/badge.svg?token=HGeKd0BD3t
+[gitpod]: https://gitpod.io/#https://github.com/rsuite/rsuite
+[gitpod-img]: https://img.shields.io/badge/Gitpod-ready--to--code-blue?logo=gitpod

package/Sidenav/styles/index.less

@@ -49,6 +49,7 @@
       background: none;
       padding-right: (@sidenav-padding-horizontal + @sidenav-dropdown-toggle-caret-width);
       position: relative;
+      border-width: 0;
 
       .rs-sidenav-collapse-in & {
         padding-left: @sidenav-level2-retract;
@@ -178,6 +179,7 @@
   display: block;
   outline: 0;
   overflow: hidden;
+  text-decoration: none;
 
   &:hover,
   &:focus {

package/cjs/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/cjs/Calendar/CalendarContainer.js

@@ -34,6 +34,7 @@ var CalendarContainer = /*#__PURE__*/_react.default.forwardRef(function (props,
     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,
@@ -46,7 +47,7 @@ var CalendarContainer = /*#__PURE__*/_react.default.forwardRef(function (props,
     onToggleMeridian = props.onToggleMeridian,
     onToggleMonthDropdown = props.onToggleMonthDropdown,
     onToggleTimeDropdown = props.onToggleTimeDropdown,
-    calendarDate = props.calendarDate,
+    calendarDateProp = props.calendarDate,
     cellClassName = props.cellClassName,
     renderCell = props.renderCell,
     renderTitle = props.renderTitle,
@@ -54,7 +55,7 @@ var CalendarContainer = /*#__PURE__*/_react.default.forwardRef(function (props,
     showMeridian = props.showMeridian,
     showWeekNumbers = props.showWeekNumbers,
     inline = props.inline,
-    rest = (0, _objectWithoutPropertiesLoose2.default)(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 = (0, _objectWithoutPropertiesLoose2.default)(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 = (0, _utils.useClassNames)(classPrefix),
     withClassPrefix = _useClassNames.withClassPrefix,
     merge = _useClassNames.merge,
@@ -64,6 +65,9 @@ var CalendarContainer = /*#__PURE__*/_react.default.forwardRef(function (props,
     reset = _useCalendarState.reset,
     openMonth = _useCalendarState.openMonth,
     openTime = _useCalendarState.openTime;
+  var calendarDate = (0, _react.useMemo)(function () {
+    return (0, _dateUtils.isValid)(calendarDateProp) ? calendarDateProp : new Date();
+  }, [calendarDateProp]);
   var isDisabledDate = (0, _react.useCallback)(function (date) {
     var _disabledDate;
     return (_disabledDate = disabledDate === null || disabledDate === void 0 ? void 0 : disabledDate(date)) !== null && _disabledDate !== void 0 ? _disabledDate : false;
@@ -129,6 +133,7 @@ var CalendarContainer = /*#__PURE__*/_react.default.forwardRef(function (props,
       hoverRangeValue: hoverRangeValue,
       inSameMonth: inSameThisMonthDate,
       isoWeek: isoWeek,
+      targetId: targetId,
       locale: locale,
       onChangeMonth: handleChangeMonth,
       onChangeTime: onChangeTime,
@@ -139,10 +144,12 @@ var CalendarContainer = /*#__PURE__*/_react.default.forwardRef(function (props,
       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.default.createElement(_CalendarContext.CalendarProvider, {
     value: contextValue
-  }, /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, (0, _dateUtils.omitHideDisabledProps)(rest), {
+  }, /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+    "data-testid": "calendar"
+  }, (0, _dateUtils.omitHideDisabledProps)(rest), {
     className: calendarClasses,
     ref: ref
   }), /*#__PURE__*/_react.default.createElement(_CalendarHeader.default, {

package/cjs/Calendar/CalendarHeader.js

@@ -128,6 +128,7 @@ var CalendarHeader = /*#__PURE__*/_react.default.forwardRef(function (props, ref
   }), hasMonth && monthToolbar, showTime && /*#__PURE__*/_react.default.createElement("div", {
     className: prefix('time-toolbar')
   }, /*#__PURE__*/_react.default.createElement(_Button.default, (0, _extends2.default)({}, btnProps, {
+    "aria-label": "Select time",
     className: timeTitleClasses,
     onClick: onToggleTimeDropdown,
     disabled: disableSelectTime
@@ -135,6 +136,7 @@ var CalendarHeader = /*#__PURE__*/_react.default.forwardRef(function (props, ref
     date: date,
     formatStr: getTimeFormat()
   })), showMeridian && /*#__PURE__*/_react.default.createElement(_Button.default, (0, _extends2.default)({}, btnProps, {
+    "aria-label": "Toggle meridian",
     className: prefix('meridian'),
     onClick: onToggleMeridian,
     disabled: disableSelectTime

package/cjs/Calendar/MonthDropdown.js

@@ -42,7 +42,8 @@ var MonthDropdown = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "className", "classPrefix", "limitStartYear", "limitEndYear", "show", "height", "width", "disabledMonth"]);
   var _useCalendarContext = (0, _CalendarContext.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 = (0, _utils.useClassNames)(classPrefix),
     prefix = _useClassNames.prefix,
     merge = _useClassNames.merge,
@@ -76,6 +77,7 @@ var MonthDropdown = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     return /*#__PURE__*/_react.default.createElement("div", {
       className: rowClassName,
       role: "row",
+      "aria-label": "" + year,
       style: style
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: titleClassName,
@@ -99,7 +101,10 @@ var MonthDropdown = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
   var initialItemIndex = _utils.DateUtils.getYear(date) - startYear;
   var initialScrollOffset = itemSize * initialItemIndex;
   return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
-    role: "menu"
+    role: "grid",
+    "aria-label": "Select month",
+    tabIndex: -1,
+    id: targetId ? targetId + "-" + classPrefix : undefined
   }, rest, {
     ref: ref,
     className: classes

package/cjs/Calendar/MonthDropdownItem.js

@@ -61,8 +61,8 @@ var MonthDropdownItem = /*#__PURE__*/_react.default.forwardRef(function (props,
   return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
     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/cjs/Calendar/Table.js

@@ -11,6 +11,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _TableRow = _interopRequireDefault(require("./TableRow"));
 var _TableHeaderRow = _interopRequireDefault(require("./TableHeaderRow"));
 var _utils = require("../utils");
+var _CalendarContext = require("./CalendarContext");
 var Table = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var _props$as = props.as,
     Component = _props$as === void 0 ? 'div' : _props$as,
@@ -24,8 +25,12 @@ var Table = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     merge = _useClassNames.merge,
     withClassPrefix = _useClassNames.withClassPrefix;
   var classes = merge(className, withClassPrefix());
+  var _useCalendarContext = (0, _CalendarContext.useCalendarContext)(),
+    targetId = _useCalendarContext.targetId;
   return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
-    role: "grid"
+    role: "grid",
+    tabIndex: -1,
+    id: targetId ? targetId + "-" + classPrefix : undefined
   }, rest, {
     ref: ref,
     className: classes

package/cjs/Calendar/TimeDropdown.js

@@ -98,7 +98,8 @@ var TimeDropdown = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     locale = _useCalendarContext.locale,
     format = _useCalendarContext.format,
     date = _useCalendarContext.date,
-    onSelect = _useCalendarContext.onChangeTime;
+    onSelect = _useCalendarContext.onChangeTime,
+    targetId = _useCalendarContext.targetId;
   var rowRef = (0, _react.useRef)(null);
   (0, _react.useEffect)(function () {
     var time = getTime({
@@ -149,24 +150,26 @@ var TimeDropdown = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
         });
         items.push( /*#__PURE__*/_react.default.createElement("li", {
           key: i,
-          role: "menuitem"
-        }, /*#__PURE__*/_react.default.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 ? (0, _partial.default)(handleClick, type, i) : undefined
+        }, /*#__PURE__*/_react.default.createElement("span", {
+          className: itemClasses
         }, showMeridian && type === 'hours' && i === 0 ? '12' : i)));
       }
     }
     return /*#__PURE__*/_react.default.createElement("div", {
-      className: prefix('column'),
-      role: "listitem"
+      className: prefix('column')
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: prefix('column-title')
     }, locale === null || locale === void 0 ? void 0 : locale[type]), /*#__PURE__*/_react.default.createElement("ul", {
       "data-type": type,
-      role: "menu"
+      role: "listbox",
+      "aria-label": "Select " + type
     }, items));
   };
   var time = getTime({
@@ -174,9 +177,13 @@ var TimeDropdown = /*#__PURE__*/_react.default.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.default.createElement(Component, (0, _extends2.default)({
-    role: "list"
+    role: "group",
+    tabIndex: -1,
+    id: targetId ? targetId + "-" + classPrefix : undefined
   }, _utils.DateUtils.omitHideDisabledProps(rest), {
     ref: ref,
     className: classes

package/cjs/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/cjs/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/cjs/CustomProvider/CustomProvider.js

@@ -7,7 +7,7 @@ exports.__esModule = true;
 exports.default = exports.CustomContext = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _prefix = require("../utils/prefix");
 var _DOMHelper = require("../DOMHelper");
 var _ToastContainer = _interopRequireWildcard(require("../toaster/ToastContainer"));
@@ -43,7 +43,7 @@ var CustomProvider = function CustomProvider(props) {
       disableRipple: disableRipple
     }, rest);
   }, [classPrefix, theme, disableRipple, rest]);
-  (0, _react.useEffect)(function () {
+  (0, _utils.useIsomorphicLayoutEffect)(function () {
     if (_DOMHelper.canUseDOM && theme) {
       (0, _DOMHelper.addClass)(document.body, (0, _prefix.prefix)(classPrefix, "theme-" + theme));
 

package/cjs/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 {};