rsuite 5.71.0 → 5.72.0

package/cjs/Calendar/{TableCell.js → Grid/GridCell.js}

@@ -8,12 +8,12 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _react = _interopRequireDefault(require("react"));
 var _partial = _interopRequireDefault(require("lodash/partial"));
-var _date = require("../internals/utils/date");
-var _hooks = require("../internals/hooks");
-var _CalendarContext = require("./CalendarContext");
-var _utils = require("./utils");
+var _date = require("../../internals/utils/date");
+var _hooks = require("../../internals/hooks");
+var _hooks2 = require("../hooks");
+var _utils = require("../utils");
 var _excluded = ["as", "classPrefix", "disabled", "selected", "date", "onSelect", "unSameMonth", "rangeStart", "rangeEnd", "inRange"];
-var TableCell = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+var GridCell = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var _props$as = props.as,
     Component = _props$as === void 0 ? 'div' : _props$as,
     _props$classPrefix = props.classPrefix,
@@ -27,12 +27,12 @@ var TableCell = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     rangeEnd = props.rangeEnd,
     inRange = props.inRange,
     rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  var _useCalendarContext = (0, _CalendarContext.useCalendarContext)(),
-    onMouseMove = _useCalendarContext.onMouseMove,
-    cellClassName = _useCalendarContext.cellClassName,
-    renderCell = _useCalendarContext.renderCell,
-    renderCellOnPicker = _useCalendarContext.renderCellOnPicker,
-    overrideLocale = _useCalendarContext.locale;
+  var _useCalendar = (0, _hooks2.useCalendar)(),
+    onMouseMove = _useCalendar.onMouseMove,
+    cellClassName = _useCalendar.cellClassName,
+    renderCell = _useCalendar.renderCell,
+    renderCellOnPicker = _useCalendar.renderCellOnPicker,
+    overrideLocale = _useCalendar.locale;
   var _useClassNames = (0, _hooks.useClassNames)(classPrefix),
     prefix = _useClassNames.prefix,
     merge = _useClassNames.merge;
@@ -69,5 +69,5 @@ var TableCell = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     className: prefix('cell-day')
   }, (0, _date.getDate)(date)), renderCell === null || renderCell === void 0 ? void 0 : renderCell(date)));
 });
-TableCell.displayName = 'CalendarTableCell';
-var _default = exports.default = TableCell;
+GridCell.displayName = 'CalendarGridCell';
+var _default = exports.default = GridCell;

package/cjs/Calendar/Grid/GridHeaderRow.d.ts

@@ -0,0 +1,4 @@
+import { RsRefForwardingComponent, WithAsProps } from '../../internals/types';
+export type GridHeaderRowProps = WithAsProps;
+declare const GridHeaderRow: RsRefForwardingComponent<'div', GridHeaderRowProps>;
+export default GridHeaderRow;

package/cjs/Calendar/{TableHeaderRow.js → Grid/GridHeaderRow.js}

@@ -8,22 +8,22 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _react = _interopRequireDefault(require("react"));
 var _upperFirst = _interopRequireDefault(require("lodash/upperFirst"));
-var _date = require("../internals/utils/date");
-var _hooks = require("../internals/hooks");
-var _CalendarContext = require("./CalendarContext");
+var _date = require("../../internals/utils/date");
+var _hooks = require("../../internals/hooks");
+var _hooks2 = require("../hooks");
 var _excluded = ["as", "className", "classPrefix"];
-var TableHeaderRow = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+var GridHeaderRow = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var _props$as = props.as,
     Component = _props$as === void 0 ? 'div' : _props$as,
     className = props.className,
     _props$classPrefix = props.classPrefix,
     classPrefix = _props$classPrefix === void 0 ? 'calendar-table' : _props$classPrefix,
     rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  var _useCalendarContext = (0, _CalendarContext.useCalendarContext)(),
-    locale = _useCalendarContext.locale,
-    showWeekNumbers = _useCalendarContext.showWeekNumbers,
-    isoWeek = _useCalendarContext.isoWeek,
-    weekStart = _useCalendarContext.weekStart;
+  var _useCalendar = (0, _hooks2.useCalendar)(),
+    locale = _useCalendar.locale,
+    showWeekNumbers = _useCalendar.showWeekNumbers,
+    isoWeek = _useCalendar.isoWeek,
+    weekStart = _useCalendar.weekStart;
   var _useClassNames = (0, _hooks.useClassNames)(classPrefix),
     merge = _useClassNames.merge,
     prefix = _useClassNames.prefix;
@@ -48,5 +48,5 @@ var TableHeaderRow = /*#__PURE__*/_react.default.forwardRef(function (props, ref
     }, locale === null || locale === void 0 ? void 0 : locale[key]));
   }));
 });
-TableHeaderRow.displayName = 'CalendarTableHeaderRow';
-var _default = exports.default = TableHeaderRow;
+GridHeaderRow.displayName = 'CalendarGridHeaderRow';
+var _default = exports.default = GridHeaderRow;

package/cjs/Calendar/Grid/GridRow.d.ts

@@ -0,0 +1,7 @@
+import { RsRefForwardingComponent, WithAsProps } from '../../internals/types';
+export interface GridRowProps extends WithAsProps {
+    weekendDate?: Date;
+    rowIndex?: number;
+}
+declare const GridRow: RsRefForwardingComponent<'div', GridRowProps>;
+export default GridRow;

package/cjs/Calendar/{TableRow.js → Grid/GridRow.js}

@@ -7,15 +7,15 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _react = _interopRequireWildcard(require("react"));
-var _date = require("../internals/utils/date");
-var _constants = require("../internals/constants");
-var _hooks = require("../internals/hooks");
-var _CalendarContext = require("./CalendarContext");
-var _TableCell = _interopRequireDefault(require("./TableCell"));
+var _date = require("../../internals/utils/date");
+var _constants = require("../../internals/constants");
+var _hooks = require("../../internals/hooks");
+var _hooks2 = require("../hooks");
+var _GridCell = _interopRequireDefault(require("./GridCell"));
 var _excluded = ["as", "className", "classPrefix", "weekendDate", "rowIndex"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-var TableRow = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+var GridRow = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var _locale$dateLocale$op, _locale$dateLocale;
   var _props$as = props.as,
     Component = _props$as === void 0 ? 'div' : _props$as,
@@ -26,18 +26,18 @@ var TableRow = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     weekendDate = _props$weekendDate === void 0 ? new Date() : _props$weekendDate,
     rowIndex = props.rowIndex,
     rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  var _useCalendarContext = (0, _CalendarContext.useCalendarContext)(),
-    _useCalendarContext$d = _useCalendarContext.date,
-    selected = _useCalendarContext$d === void 0 ? new Date() : _useCalendarContext$d,
-    dateRange = _useCalendarContext.dateRange,
-    hoverRangeValue = _useCalendarContext.hoverRangeValue,
-    isoWeek = _useCalendarContext.isoWeek,
-    weekStart = _useCalendarContext.weekStart,
-    showWeekNumbers = _useCalendarContext.showWeekNumbers,
-    locale = _useCalendarContext.locale,
-    inSameMonth = _useCalendarContext.inSameMonth,
-    disabledDate = _useCalendarContext.disabledDate,
-    onSelect = _useCalendarContext.onSelect;
+  var _useCalendar = (0, _hooks2.useCalendar)(),
+    _useCalendar$date = _useCalendar.date,
+    selected = _useCalendar$date === void 0 ? new Date() : _useCalendar$date,
+    dateRange = _useCalendar.dateRange,
+    hoverRangeValue = _useCalendar.hoverRangeValue,
+    isoWeek = _useCalendar.isoWeek,
+    weekStart = _useCalendar.weekStart,
+    showWeekNumbers = _useCalendar.showWeekNumbers,
+    locale = _useCalendar.locale,
+    inSameMonth = _useCalendar.inSameMonth,
+    disabledDate = _useCalendar.disabledDate,
+    onSelect = _useCalendar.onSelect;
   var _useClassNames = (0, _hooks.useClassNames)(classPrefix),
     prefix = _useClassNames.prefix,
     merge = _useClassNames.merge;
@@ -86,7 +86,7 @@ var TableRow = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
           inRange = true;
         }
       }
-      days.push( /*#__PURE__*/_react.default.createElement(_TableCell.default, {
+      days.push( /*#__PURE__*/_react.default.createElement(_GridCell.default, {
         key: (0, _date.format)(thisDate, 'yyyy-MM-dd'),
         date: thisDate,
         disabled: disabled,
@@ -120,5 +120,5 @@ var TableRow = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     className: prefix('cell-week-number')
   }, week), renderDays());
 });
-TableRow.displayName = 'CalendarTableRow';
-var _default = exports.default = TableRow;
+GridRow.displayName = 'CalendarGridRow';
+var _default = exports.default = GridRow;

package/cjs/Calendar/Grid/index.d.ts

@@ -0,0 +1,2 @@
+import Grid from './Grid';
+export default Grid;

package/cjs/Calendar/Grid/index.js

@@ -0,0 +1,8 @@
+'use client';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _Grid = _interopRequireDefault(require("./Grid"));
+var _default = exports.default = _Grid.default;

package/cjs/Calendar/MonthDropdown.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import { RsRefForwardingComponent, WithAsProps } from '../internals/types';
 export interface MonthDropdownProps extends WithAsProps {
     show?: boolean;
@@ -8,20 +7,6 @@ export interface MonthDropdownProps extends WithAsProps {
     width?: number;
     disabledMonth?: (date: Date) => boolean;
 }
-export interface RowProps {
-    /** Index of row */
-    index: number;
-    /** The List is currently being scrolled */
-    isScrolling: boolean;
-    /** This row is visible within the List (eg it is not an overscanned row) */
-    isVisible: boolean;
-    /** Unique key within array of rendered rows */
-    key?: any;
-    /** Reference to the parent List (instance) */
-    parent: any;
-    /** Style object to be applied to row (to position it); */
-    style?: React.CSSProperties;
-}
 export declare function isEveryDateInMonth(year: number, month: number, predicate: (date: Date) => boolean): boolean;
 declare const MonthDropdown: RsRefForwardingComponent<'div', MonthDropdownProps>;
 export default MonthDropdown;

package/cjs/Calendar/MonthDropdown.js

@@ -12,7 +12,7 @@ var _date = require("../internals/utils/date");
 var _Windowing = require("../internals/Windowing");
 var _hooks = require("../internals/hooks");
 var _MonthDropdownItem = _interopRequireDefault(require("./MonthDropdownItem"));
-var _CalendarContext = require("./CalendarContext");
+var _hooks2 = require("./hooks");
 var _excluded = ["as", "className", "classPrefix", "limitStartYear", "limitEndYear", "show", "height", "width", "disabledMonth"],
   _excluded2 = ["className", "itemClassName", "as", "itemAs"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
@@ -43,11 +43,11 @@ var MonthDropdown = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     defaultWidth = _props$width === void 0 ? 256 : _props$width,
     disabledMonth = props.disabledMonth,
     rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  var _useCalendarContext = (0, _CalendarContext.useCalendarContext)(),
-    _useCalendarContext$d = _useCalendarContext.date,
-    date = _useCalendarContext$d === void 0 ? new Date() : _useCalendarContext$d,
-    targetId = _useCalendarContext.targetId,
-    monthDropdownProps = _useCalendarContext.monthDropdownProps;
+  var _useCalendar = (0, _hooks2.useCalendar)(),
+    _useCalendar$date = _useCalendar.date,
+    date = _useCalendar$date === void 0 ? new Date() : _useCalendar$date,
+    targetId = _useCalendar.targetId,
+    monthDropdownProps = _useCalendar.monthDropdownProps;
   var _useClassNames = (0, _hooks.useClassNames)(classPrefix),
     prefix = _useClassNames.prefix,
     merge = _useClassNames.merge,

package/cjs/Calendar/MonthDropdownItem.js

@@ -10,7 +10,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _date = require("../internals/utils/date");
 var _hooks = require("../internals/hooks");
 var _utils = require("../internals/utils");
-var _CalendarContext = require("./CalendarContext");
+var _hooks2 = require("./hooks");
 var _utils2 = require("./utils");
 var _excluded = ["as", "className", "classPrefix", "active", "disabled", "month", "year"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
@@ -27,9 +27,9 @@ var MonthDropdownItem = /*#__PURE__*/_react.default.forwardRef(function (props,
     month = _props$month === void 0 ? 0 : _props$month,
     year = props.year,
     rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  var _useCalendarContext = (0, _CalendarContext.useCalendarContext)(),
-    date = _useCalendarContext.date,
-    onSelect = _useCalendarContext.onChangeMonth;
+  var _useCalendar = (0, _hooks2.useCalendar)(),
+    date = _useCalendar.date,
+    onSelect = _useCalendar.onChangeMonth;
   var _useCustom = (0, _hooks.useCustom)('Calendar'),
     locale = _useCustom.locale,
     formatDate = _useCustom.formatDate;
@@ -44,12 +44,12 @@ var MonthDropdownItem = /*#__PURE__*/_react.default.forwardRef(function (props,
     }
     return date;
   }, [date, month, year]);
-  var handleClick = (0, _react.useCallback)(function (event) {
+  var handleClick = (0, _hooks.useEventCallback)(function (event) {
     if (disabled) {
       return;
     }
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(currentMonth, event);
-  }, [currentMonth, disabled, onSelect]);
+  });
   var _useClassNames = (0, _hooks.useClassNames)(classPrefix),
     prefix = _useClassNames.prefix,
     merge = _useClassNames.merge,

package/cjs/Calendar/TimeDropdown/TimeColumn.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface TimeColumnProps {
+    prefix: (name: string) => string;
+    title: React.ReactNode;
+    children: React.ReactNode;
+}
+declare const TimeColumn: (props: TimeColumnProps) => React.JSX.Element;
+export default TimeColumn;

package/cjs/Calendar/TimeDropdown/TimeColumn.js

@@ -0,0 +1,27 @@
+'use client';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _react = _interopRequireDefault(require("react"));
+var _ScrollView = _interopRequireDefault(require("../../internals/ScrollView"));
+var _excluded = ["prefix", "title", "children"];
+var TimeColumn = function TimeColumn(props) {
+  var prefix = props.prefix,
+    title = props.title,
+    children = props.children,
+    rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: prefix('column')
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: prefix('column-title')
+  }, title), /*#__PURE__*/_react.default.createElement(_ScrollView.default, (0, _extends2.default)({
+    customScrollbar: true,
+    as: "ul",
+    role: "listbox"
+  }, rest), children));
+};
+var _default = exports.default = TimeColumn;

package/{esm/Calendar → cjs/Calendar/TimeDropdown}/TimeDropdown.d.ts

@@ -1,7 +1,7 @@
-import { RsRefForwardingComponent, WithAsProps } from '../internals/types';
+import { RsRefForwardingComponent, WithAsProps } from '../../internals/types';
 export interface TimeDropdownProps extends WithAsProps {
     show?: boolean;
-    showMeridian?: boolean;
+    showMeridiem?: boolean;
     disabledDate?: (date: Date) => boolean;
     disabledHours?: (hour: number, date: Date) => boolean;
     disabledMinutes?: (minute: number, date: Date) => boolean;
@@ -10,28 +10,5 @@ export interface TimeDropdownProps extends WithAsProps {
     hideMinutes?: (minute: number, date: Date) => boolean;
     hideSeconds?: (second: number, date: Date) => boolean;
 }
-/**
- * Get the effective range of hours, minutes and seconds
- * @param meridian
- */
-export declare function getRanges(meridian: boolean): {
-    hours: {
-        start: number;
-        end: number;
-    };
-    minutes: {
-        start: number;
-        end: number;
-    };
-    seconds: {
-        start: number;
-        end: number;
-    };
-};
-/**
- * Convert the 24-hour clock to the 12-hour clock
- * @param hours
- */
-export declare function getMeridianHours(hours: number): number;
 declare const TimeDropdown: RsRefForwardingComponent<'div', TimeDropdownProps>;
 export default TimeDropdown;

package/cjs/Calendar/{TimeDropdown.js → TimeDropdown/TimeDropdown.js}

@@ -4,89 +4,20 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
 exports.default = void 0;
-exports.getMeridianHours = getMeridianHours;
-exports.getRanges = getRanges;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _react = _interopRequireWildcard(require("react"));
-var _getPosition = _interopRequireDefault(require("dom-lib/getPosition"));
-var _scrollTop = _interopRequireDefault(require("dom-lib/scrollTop"));
 var _partial = _interopRequireDefault(require("lodash/partial"));
 var _camelCase = _interopRequireDefault(require("lodash/camelCase"));
 var _isNumber = _interopRequireDefault(require("lodash/isNumber"));
-var _utils = require("../internals/utils");
-var _hooks = require("../internals/hooks");
-var DateUtils = _interopRequireWildcard(require("../internals/utils/date"));
-var _CalendarContext = require("./CalendarContext");
-var _excluded = ["as", "className", "classPrefix", "show", "showMeridian"];
+var _hooks = require("../../internals/hooks");
+var _date = require("../../internals/utils/date");
+var _hooks2 = require("../hooks");
+var _TimeColumn = _interopRequireDefault(require("./TimeColumn"));
+var _utils = require("./utils");
+var _excluded = ["as", "className", "classPrefix", "show", "showMeridiem"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-/**
- * Get the effective range of hours, minutes and seconds
- * @param meridian
- */
-function getRanges(meridian) {
-  return {
-    hours: {
-      start: 0,
-      end: meridian ? 11 : 23
-    },
-    minutes: {
-      start: 0,
-      end: 59
-    },
-    seconds: {
-      start: 0,
-      end: 59
-    }
-  };
-}
-
-/**
- * Convert the 24-hour clock to the 12-hour clock
- * @param hours
- */
-function getMeridianHours(hours) {
-  return hours >= 12 ? hours - 12 : hours;
-}
-var getTime = function getTime(props) {
-  var format = props.format,
-    date = props.date,
-    showMeridian = props.showMeridian;
-  var time = date || new Date();
-  var nextTime = {};
-  if (!format) {
-    return nextTime;
-  }
-  if (/(H|h)/.test(format)) {
-    var hours = DateUtils.getHours(time);
-    nextTime.hours = showMeridian ? getMeridianHours(hours) : hours;
-  }
-  if (/m/.test(format)) {
-    nextTime.minutes = DateUtils.getMinutes(time);
-  }
-  if (/s/.test(format)) {
-    nextTime.seconds = DateUtils.getSeconds(time);
-  }
-  return nextTime;
-};
-var scrollTo = function scrollTo(time, row) {
-  if (!row) {
-    return;
-  }
-  Object.entries(time).forEach(function (_ref) {
-    var type = _ref[0],
-      value = _ref[1];
-    var container = row.querySelector("[data-type=\"" + type + "\"]");
-    var node = container === null || container === void 0 ? void 0 : container.querySelector("[data-key=\"" + type + "-" + value + "\"]");
-    if (node && container) {
-      var position = (0, _getPosition.default)(node, container);
-      if (position) {
-        (0, _utils.scrollTopAnimation)(container, position.top, (0, _scrollTop.default)(container) !== 0);
-      }
-    }
-  });
-};
 var TimeDropdown = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var _props$as = props.as,
     Component = _props$as === void 0 ? 'div' : _props$as,
@@ -94,53 +25,67 @@ var TimeDropdown = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     _props$classPrefix = props.classPrefix,
     classPrefix = _props$classPrefix === void 0 ? 'calendar-time-dropdown' : _props$classPrefix,
     show = props.show,
-    _props$showMeridian = props.showMeridian,
-    showMeridian = _props$showMeridian === void 0 ? false : _props$showMeridian,
+    _props$showMeridiem = props.showMeridiem,
+    showMeridiem = _props$showMeridiem === void 0 ? false : _props$showMeridiem,
     rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  var _useCalendarContext = (0, _CalendarContext.useCalendarContext)(),
-    locale = _useCalendarContext.locale,
-    format = _useCalendarContext.format,
-    date = _useCalendarContext.date,
-    onSelect = _useCalendarContext.onChangeTime,
-    targetId = _useCalendarContext.targetId;
+  var _useCalendar = (0, _hooks2.useCalendar)(),
+    locale = _useCalendar.locale,
+    format = _useCalendar.format,
+    date = _useCalendar.date,
+    onSelect = _useCalendar.onChangeTime,
+    targetId = _useCalendar.targetId;
   var rowRef = (0, _react.useRef)(null);
   (0, _react.useEffect)(function () {
-    var time = getTime({
+    var time = (0, _utils.getClockTime)({
       format: format,
       date: date,
-      showMeridian: showMeridian
+      showMeridiem: showMeridiem
     });
     // The currently selected time scrolls to the visible range.
     if (show && rowRef.current) {
-      scrollTo(time, rowRef.current);
+      (0, _utils.scrollToTime)(time, rowRef.current);
     }
-  }, [date, format, show, showMeridian]);
-  var handleClick = function handleClick(type, d, event) {
-    var nextDate = date || new Date();
+  }, [date, format, show, showMeridiem]);
+  var handleClick = (0, _hooks.useEventCallback)(function (type, d, event) {
+    var nextDate = date || (0, _date.startOfToday)();
     switch (type) {
       case 'hours':
-        nextDate = DateUtils.setHours(date, showMeridian && DateUtils.getHours(nextDate) >= 12 ? d + 12 : d);
+        nextDate = (0, _date.setHours)(nextDate, showMeridiem && (0, _date.getHours)(nextDate) >= 12 ? d + 12 : d);
         break;
       case 'minutes':
-        nextDate = DateUtils.setMinutes(date, d);
+        nextDate = (0, _date.setMinutes)(nextDate, d);
         break;
       case 'seconds':
-        nextDate = DateUtils.setSeconds(date, d);
+        nextDate = (0, _date.setSeconds)(nextDate, d);
         break;
     }
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(nextDate, event);
-  };
+  });
+  var handleClickMeridiem = (0, _hooks.useEventCallback)(function (meridiem, event) {
+    var tempDate = date || (0, _date.startOfToday)();
+    var hours = (0, _date.getHours)(tempDate);
+    var isAM = hours < 12;
+    var adjustHours = function adjustHours(meridiem, hours) {
+      if (meridiem === 'AM') {
+        return isAM ? hours : hours - 12;
+      }
+      return isAM ? hours + 12 : hours;
+    };
+    var nextHours = adjustHours(meridiem, hours);
+    var nextDate = (0, _date.setHours)(tempDate, nextHours);
+    onSelect === null || onSelect === void 0 ? void 0 : onSelect(nextDate, event);
+  });
   var _useClassNames = (0, _hooks.useClassNames)(classPrefix),
     prefix = _useClassNames.prefix,
     rootPrefix = _useClassNames.rootPrefix,
     merge = _useClassNames.merge;
-  var renderColumn = function renderColumn(type, active) {
-    if (!(0, _isNumber.default)(active)) {
+  var renderColumn = function renderColumn(type, value) {
+    if (!(0, _isNumber.default)(value)) {
       return null;
     }
-    var _getRanges$type = getRanges(showMeridian)[type],
-      start = _getRanges$type.start,
-      end = _getRanges$type.end;
+    var _getTimeLimits$type = (0, _utils.getTimeLimits)(showMeridiem)[type],
+      start = _getTimeLimits$type.start,
+      end = _getTimeLimits$type.end;
     var items = [];
     var hideFunc = props[(0, _camelCase.default)("hide_" + type)];
     var disabledFunc = props[(0, _camelCase.default)("disabled_" + type)];
@@ -148,7 +93,7 @@ var TimeDropdown = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       if (!(hideFunc !== null && hideFunc !== void 0 && hideFunc(i, date))) {
         var disabled = disabledFunc === null || disabledFunc === void 0 ? void 0 : disabledFunc(i, date);
         var itemClasses = prefix('cell', {
-          'cell-active': active === i,
+          'cell-active': value === i,
           'cell-disabled': disabled
         });
         items.push( /*#__PURE__*/_react.default.createElement("li", {
@@ -156,29 +101,51 @@ var TimeDropdown = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
           role: "option",
           tabIndex: -1,
           "aria-label": i + " " + type,
-          "aria-selected": active === i,
+          "aria-selected": value === 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)));
+        }, showMeridiem && type === 'hours' && i === 0 ? 12 : (0, _utils.formatWithLeadingZero)(i))));
       }
     }
-    return /*#__PURE__*/_react.default.createElement("div", {
-      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", {
+    return /*#__PURE__*/_react.default.createElement(_TimeColumn.default, {
+      prefix: prefix,
+      title: locale === null || locale === void 0 ? void 0 : locale[type],
       "data-type": type,
-      role: "listbox",
       "aria-label": "Select " + type
-    }, items));
+    }, items);
+  };
+  var renderMeridiemColumn = function renderMeridiemColumn() {
+    var columns = ['AM', 'PM'];
+    return /*#__PURE__*/_react.default.createElement(_TimeColumn.default, {
+      prefix: prefix,
+      title: 'AM/PM',
+      "data-type": "meridiem",
+      "aria-label": "Select meridiem"
+    }, columns.map(function (meridiem, index) {
+      var ampm = date && ((0, _date.getHours)(date) >= 12 ? 'PM' : 'AM');
+      var itemClasses = prefix('cell', {
+        'cell-active': ampm === meridiem
+      });
+      return /*#__PURE__*/_react.default.createElement("li", {
+        key: index,
+        role: "option",
+        tabIndex: -1,
+        "aria-label": meridiem,
+        "aria-selected": ampm === meridiem,
+        "data-key": "meridiem-" + meridiem,
+        onClick: (0, _partial.default)(handleClickMeridiem, meridiem)
+      }, /*#__PURE__*/_react.default.createElement("span", {
+        className: itemClasses
+      }, meridiem));
+    }));
   };
-  var time = getTime({
+  var time = (0, _utils.getClockTime)({
     format: format,
     date: date,
-    showMeridian: showMeridian
+    showMeridiem: showMeridiem
   });
   var classes = merge(className, rootPrefix(classPrefix), {
     show: show
@@ -187,7 +154,7 @@ var TimeDropdown = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     role: "group",
     tabIndex: -1,
     id: targetId ? targetId + "-" + classPrefix : undefined
-  }, DateUtils.omitHideDisabledProps(rest), {
+  }, (0, _date.omitHideDisabledProps)(rest), {
     ref: ref,
     className: classes
   }), /*#__PURE__*/_react.default.createElement("div", {
@@ -195,7 +162,7 @@ var TimeDropdown = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: prefix('row'),
     ref: rowRef
-  }, renderColumn('hours', time.hours), renderColumn('minutes', time.minutes), renderColumn('seconds', time.seconds))));
+  }, renderColumn('hours', time.hours), renderColumn('minutes', time.minutes), renderColumn('seconds', time.seconds), showMeridiem && renderMeridiemColumn())));
 });
 TimeDropdown.displayName = 'TimeDropdown';
 var _default = exports.default = TimeDropdown;

package/cjs/Calendar/TimeDropdown/index.d.ts

@@ -0,0 +1,2 @@
+import TimeDropdown from './TimeDropdown';
+export default TimeDropdown;

package/cjs/Calendar/TimeDropdown/index.js

@@ -0,0 +1,8 @@
+'use client';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _TimeDropdown = _interopRequireDefault(require("./TimeDropdown"));
+var _default = exports.default = _TimeDropdown.default;

package/cjs/Calendar/TimeDropdown/utils/formatWithLeadingZero.d.ts

@@ -0,0 +1 @@
+export declare const formatWithLeadingZero: (number: number) => string;