@semcore/date-picker 3.4.5 → 3.4.6

package/lib/cjs/components/index.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Header = Header;
+exports.InputTrigger = InputTrigger;
 exports.Next = Next;
 exports.Period = void 0;
 exports.Popper = Popper;
@@ -47,10 +48,12 @@ var _m = _interopRequireDefault(require("@semcore/icon/ChevronLeft/m"));
 
 var _m2 = _interopRequireDefault(require("@semcore/icon/ChevronRight/m"));
 
-var _assignProps8 = require("@semcore/utils/lib/assignProps");
+var _assignProps9 = require("@semcore/utils/lib/assignProps");
 
 var _ButtonTrigger = _interopRequireDefault(require("./ButtonTrigger"));
 
+var _InputTrigger = _interopRequireDefault(require("./InputTrigger"));
+
 var _excluded = ["value", "onClick", "onMouseEnter", "onMouseLeave"];
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
@@ -61,6 +64,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
+/** @deprecated `DatePicker.Trigger` is deprecated, consider migrating to `DatePicker.InputTrigger` instead */
 function Trigger() {
   var _ref = arguments[0];
   return /*#__PURE__*/_react["default"].createElement(_dropdown["default"].Trigger, (0, _core.assignProps)({
@@ -68,46 +72,62 @@ function Trigger() {
   }, _ref));
 }
 
+function InputTrigger() {
+  var _ref2 = arguments[0];
+  return /*#__PURE__*/_react["default"].createElement(_dropdown["default"].Trigger, (0, _core.assignProps)({
+    "tag": _InputTrigger["default"],
+    "__excludeProps": ['role', 'aria-haspopup', 'onChange', 'value']
+  }, _ref2));
+}
+
+InputTrigger.Indicator = _InputTrigger["default"].Indicator;
+InputTrigger.MaskedInput = _InputTrigger["default"].MaskedInput;
+InputTrigger.Addon = _InputTrigger["default"].Addon;
+InputTrigger.SingleDateInput = _InputTrigger["default"].SingleDateInput;
+InputTrigger.DateRange = _InputTrigger["default"].DateRange;
+InputTrigger.DateRangeFromInput = _InputTrigger["default"].DateRangeFromInput;
+InputTrigger.DateRangeToInput = _InputTrigger["default"].DateRangeToInput;
+
 function Popper(props) {
-  var _ref2 = arguments[0],
-      _ref8;
+  var _ref3 = arguments[0],
+      _ref9;
 
   var SPopper = _dropdown["default"].Popper;
-  return _ref8 = (0, _core.sstyled)(props.styles), /*#__PURE__*/_react["default"].createElement(SPopper, _ref8.cn("SPopper", _objectSpread({}, (0, _core.assignProps)({
+  return _ref9 = (0, _core.sstyled)(props.styles), /*#__PURE__*/_react["default"].createElement(SPopper, _ref9.cn("SPopper", _objectSpread({}, (0, _core.assignProps)({
     "role": "region",
     "aria-label": "calendar-container"
-  }, _ref2))));
+  }, _ref3))));
 }
 
 function Header(props) {
-  var _ref3 = arguments[0],
-      _ref9;
+  var _ref4 = arguments[0],
+      _ref10;
 
   var SHeader = _flexBox.Box;
-  return _ref9 = (0, _core.sstyled)(props.styles), /*#__PURE__*/_react["default"].createElement(SHeader, _ref9.cn("SHeader", _objectSpread({}, (0, _core.assignProps)({}, _ref3))));
+  return _ref10 = (0, _core.sstyled)(props.styles), /*#__PURE__*/_react["default"].createElement(SHeader, _ref10.cn("SHeader", _objectSpread({}, (0, _core.assignProps)({}, _ref4))));
 }
 
-var Title = function Title(_ref12) {
-  var _ref4 = arguments[0],
-      _ref10;
+var Title = function Title(_ref13) {
+  var _ref5 = arguments[0],
+      _ref11;
 
-  var Children = _ref12.Children,
-      styles = _ref12.styles;
+  var Children = _ref13.Children,
+      styles = _ref13.styles;
   var STitle = _flexBox.Box;
-  return _ref10 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(STitle, _ref10.cn("STitle", _objectSpread({}, (0, _core.assignProps)({}, _ref4))), /*#__PURE__*/_react["default"].createElement(Children, _ref10.cn("Children", {})));
+  return _ref11 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(STitle, _ref11.cn("STitle", _objectSpread({}, (0, _core.assignProps)({}, _ref5))), /*#__PURE__*/_react["default"].createElement(Children, _ref11.cn("Children", {})));
 };
 
 exports.Title = Title;
 
 function Prev() {
-  var _ref5 = arguments[0];
+  var _ref6 = arguments[0];
   return /*#__PURE__*/_react["default"].createElement(_button["default"], (0, _core.assignProps)({
     "use": "tertiary",
     "theme": "muted",
     "size": "l",
     "tabIndex": -1,
     "aria-label": "Prev period"
-  }, _ref5));
+  }, _ref6));
 }
 
 Prev.defaultProps = {
@@ -115,14 +135,14 @@ Prev.defaultProps = {
 };
 
 function Next() {
-  var _ref6 = arguments[0];
+  var _ref7 = arguments[0];
   return /*#__PURE__*/_react["default"].createElement(_button["default"], (0, _core.assignProps)({
     "use": "tertiary",
     "theme": "muted",
     "size": "l",
     "tabIndex": -1,
     "aria-label": "Next period"
-  }, _ref6));
+  }, _ref7));
 }
 
 Next.defaultProps = {
@@ -132,12 +152,12 @@ var stylesBtn = (
 /*__reshadow_css_start__*/
 _core.sstyled.insert(
 /*__inner_css_start__*/
-"\n  .___SInner_wlun7_gg_ {\n    justify-content: flex-start;\n  }\n"
+".___SInner_1xtdk_gg_{justify-content:flex-start}"
 /*__inner_css_end__*/
-, "wlun7_gg_")
+, "1xtdk_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SInner": "___SInner_wlun7_gg_"
+  "__SInner": "___SInner_1xtdk_gg_"
 });
 
 var Period = /*#__PURE__*/function (_Component) {
@@ -178,8 +198,8 @@ var Period = /*#__PURE__*/function (_Component) {
   (0, _createClass2["default"])(Period, [{
     key: "render",
     value: function render() {
-      var _ref7 = this.asProps,
-          _ref11,
+      var _ref8 = this.asProps,
+          _ref12,
           _this2 = this;
 
       var SPeriod = _flexBox.Box;
@@ -190,26 +210,26 @@ var Period = /*#__PURE__*/function (_Component) {
           periods = _this$asProps.periods,
           onHighlightedChange = _this$asProps.onHighlightedChange,
           onDisplayedPeriodChange = _this$asProps.onDisplayedPeriodChange;
-      return _ref11 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SPeriod, _ref11.cn("SPeriod", _objectSpread({}, (0, _core.assignProps)({}, _ref7))), periods.map(function (_ref13, i) {
-        var period = _ref13.value,
-            onClick = _ref13.onClick,
-            onMouseEnter = _ref13.onMouseEnter,
-            onMouseLeave = _ref13.onMouseLeave,
-            other = (0, _objectWithoutProperties2["default"])(_ref13, _excluded);
+      return _ref12 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SPeriod, _ref12.cn("SPeriod", _objectSpread({}, (0, _core.assignProps)({}, _ref8))), periods.map(function (_ref14, i) {
+        var period = _ref14.value,
+            onClick = _ref14.onClick,
+            onMouseEnter = _ref14.onMouseEnter,
+            onMouseLeave = _ref14.onMouseLeave,
+            other = (0, _objectWithoutProperties2["default"])(_ref14, _excluded);
         return /*#__PURE__*/_react["default"].createElement(_button["default"], (0, _extends2["default"])({
           use: "tertiary",
           theme: "muted",
           styles: stylesBtn,
           key: i,
           active: _this2.getActiveControl(period, value),
-          onClick: (0, _assignProps8.callAllEventHandlers)(onClick, function () {
+          onClick: (0, _assignProps9.callAllEventHandlers)(onClick, function () {
             return onChange(period);
           }),
-          onMouseEnter: (0, _assignProps8.callAllEventHandlers)(onMouseEnter, function () {
+          onMouseEnter: (0, _assignProps9.callAllEventHandlers)(onMouseEnter, function () {
             onHighlightedChange(period);
             onDisplayedPeriodChange((0, _dayjs["default"])(period[0]).toDate());
           }),
-          onMouseLeave: (0, _assignProps8.callAllEventHandlers)(onMouseLeave, function () {
+          onMouseLeave: (0, _assignProps9.callAllEventHandlers)(onMouseLeave, function () {
             onHighlightedChange([]);
             onDisplayedPeriodChange(value[0] ? (0, _dayjs["default"])(value[0]).toDate() : new Date());
           })

package/lib/cjs/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Trigger","Dropdown","ButtonTrigger","Popper","props","SPopper","sstyled","styles","Header","SHeader","Box","Title","Children","STitle","Prev","Button","defaultProps","children","Next","stylesBtn","Period","period","value","compareMonth","monthOne","monthTwo","dayjs","isSame","Array","isArray","length","SPeriod","asProps","onChange","periods","onHighlightedChange","onDisplayedPeriodChange","map","i","onClick","onMouseEnter","onMouseLeave","other","getActiveControl","callAllEventHandlers","toDate","Date","Component"],"sources":["../../../src/components/index.jsx"],"sourcesContent":["import React from 'react';\nimport dayjs from 'dayjs';\nimport { Component, Root, sstyled } from '@semcore/core';\nimport Dropdown from '@semcore/dropdown';\nimport { Box } from '@semcore/flex-box';\nimport Button from '@semcore/button';\nimport ChevronLeft from '@semcore/icon/ChevronLeft/m';\nimport ChevronRight from '@semcore/icon/ChevronRight/m';\nimport { callAllEventHandlers } from '@semcore/utils/lib/assignProps';\nimport ButtonTrigger from './ButtonTrigger';\n\nexport function Trigger() {\n  return <Root render={Dropdown.Trigger} tag={ButtonTrigger} />;\n}\n\nexport function Popper(props) {\n  const SPopper = Root;\n  return sstyled(props.styles)(\n    <SPopper render={Dropdown.Popper} role=\"region\" aria-label=\"calendar-container\" />,\n  );\n}\n\nexport function Header(props) {\n  const SHeader = Root;\n  return sstyled(props.styles)(<SHeader render={Box} />);\n}\n\nexport const Title = ({ Children, styles }) => {\n  const STitle = Root;\n  return sstyled(styles)(\n    <STitle render={Box}>\n      <Children />\n    </STitle>,\n  );\n};\n\nexport function Prev() {\n  return (\n    <Root\n      render={Button}\n      use=\"tertiary\"\n      theme=\"muted\"\n      size=\"l\"\n      tabIndex={-1}\n      aria-label=\"Prev period\"\n    />\n  );\n}\n\nPrev.defaultProps = {\n  children: <ChevronLeft />,\n};\n\nexport function Next() {\n  return (\n    <Root\n      render={Button}\n      use=\"tertiary\"\n      theme=\"muted\"\n      size=\"l\"\n      tabIndex={-1}\n      aria-label=\"Next period\"\n    />\n  );\n}\n\nNext.defaultProps = {\n  children: <ChevronRight />,\n};\n\nconst stylesBtn = sstyled.css`\n  SInner {\n    justify-content: flex-start;\n  }\n`;\n\nexport class Period extends Component {\n  getActiveControl = (period = [], value) => {\n    function compareMonth(monthOne, monthTwo) {\n      return dayjs(monthOne).isSame(dayjs(monthTwo), 'date');\n    }\n\n    if (!period || !value) return false;\n    if (Array.isArray(value) && period.length !== value.length) return false;\n    if (Array.isArray(value)) {\n      return compareMonth(period[0], value[0]) && compareMonth(period[1], value[1]);\n    }\n\n    return compareMonth(period[0], value);\n  };\n\n  render() {\n    const SPeriod = Root;\n    const { styles, value, onChange, periods, onHighlightedChange, onDisplayedPeriodChange } =\n      this.asProps;\n\n    return sstyled(styles)(\n      <SPeriod render={Box}>\n        {periods.map(({ value: period, onClick, onMouseEnter, onMouseLeave, ...other }, i) => (\n          <Button\n            use=\"tertiary\"\n            theme=\"muted\"\n            styles={stylesBtn}\n            key={i}\n            active={this.getActiveControl(period, value)}\n            onClick={callAllEventHandlers(onClick, () => onChange(period))}\n            onMouseEnter={callAllEventHandlers(onMouseEnter, () => {\n              onHighlightedChange(period);\n              onDisplayedPeriodChange(dayjs(period[0]).toDate());\n            })}\n            onMouseLeave={callAllEventHandlers(onMouseLeave, () => {\n              onHighlightedChange([]);\n              onDisplayedPeriodChange(value[0] ? dayjs(value[0]).toDate() : new Date());\n            })}\n            {...other}\n          />\n        ))}\n      </SPeriod>,\n    );\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["Trigger","Dropdown","ButtonTrigger","InputTrigger","InputTriggerBase","Indicator","MaskedInput","Addon","SingleDateInput","DateRange","DateRangeFromInput","DateRangeToInput","Popper","props","SPopper","sstyled","styles","Header","SHeader","Box","Title","Children","STitle","Prev","Button","defaultProps","children","Next","stylesBtn","Period","period","value","compareMonth","monthOne","monthTwo","dayjs","isSame","Array","isArray","length","SPeriod","asProps","onChange","periods","onHighlightedChange","onDisplayedPeriodChange","map","i","onClick","onMouseEnter","onMouseLeave","other","getActiveControl","callAllEventHandlers","toDate","Date","Component"],"sources":["../../../src/components/index.jsx"],"sourcesContent":["import React from 'react';\nimport dayjs from 'dayjs';\nimport { Component, Root, sstyled } from '@semcore/core';\nimport Dropdown from '@semcore/dropdown';\nimport { Box } from '@semcore/flex-box';\nimport Button from '@semcore/button';\nimport ChevronLeft from '@semcore/icon/ChevronLeft/m';\nimport ChevronRight from '@semcore/icon/ChevronRight/m';\nimport { callAllEventHandlers } from '@semcore/utils/lib/assignProps';\nimport ButtonTrigger from './ButtonTrigger';\nimport InputTriggerBase from './InputTrigger';\n\n/** @deprecated `DatePicker.Trigger` is deprecated, consider migrating to `DatePicker.InputTrigger` instead */\nexport function Trigger() {\n  return <Root render={Dropdown.Trigger} tag={ButtonTrigger} />;\n}\n\nexport function InputTrigger() {\n  return (\n    <Root\n      render={Dropdown.Trigger}\n      tag={InputTriggerBase}\n      __excludeProps={['role', 'aria-haspopup', 'onChange', 'value']}\n    />\n  );\n}\nInputTrigger.Indicator = InputTriggerBase.Indicator;\nInputTrigger.MaskedInput = InputTriggerBase.MaskedInput;\nInputTrigger.Addon = InputTriggerBase.Addon;\nInputTrigger.SingleDateInput = InputTriggerBase.SingleDateInput;\nInputTrigger.DateRange = InputTriggerBase.DateRange;\nInputTrigger.DateRangeFromInput = InputTriggerBase.DateRangeFromInput;\nInputTrigger.DateRangeToInput = InputTriggerBase.DateRangeToInput;\n\nexport function Popper(props) {\n  const SPopper = Root;\n  return sstyled(props.styles)(\n    <SPopper render={Dropdown.Popper} role=\"region\" aria-label=\"calendar-container\" />,\n  );\n}\n\nexport function Header(props) {\n  const SHeader = Root;\n  return sstyled(props.styles)(<SHeader render={Box} />);\n}\n\nexport const Title = ({ Children, styles }) => {\n  const STitle = Root;\n  return sstyled(styles)(\n    <STitle render={Box}>\n      <Children />\n    </STitle>,\n  );\n};\n\nexport function Prev() {\n  return (\n    <Root\n      render={Button}\n      use=\"tertiary\"\n      theme=\"muted\"\n      size=\"l\"\n      tabIndex={-1}\n      aria-label=\"Prev period\"\n    />\n  );\n}\n\nPrev.defaultProps = {\n  children: <ChevronLeft />,\n};\n\nexport function Next() {\n  return (\n    <Root\n      render={Button}\n      use=\"tertiary\"\n      theme=\"muted\"\n      size=\"l\"\n      tabIndex={-1}\n      aria-label=\"Next period\"\n    />\n  );\n}\n\nNext.defaultProps = {\n  children: <ChevronRight />,\n};\n\nconst stylesBtn = sstyled.css`\n  SInner {\n    justify-content: flex-start;\n  }\n`;\n\nexport class Period extends Component {\n  getActiveControl = (period = [], value) => {\n    function compareMonth(monthOne, monthTwo) {\n      return dayjs(monthOne).isSame(dayjs(monthTwo), 'date');\n    }\n\n    if (!period || !value) return false;\n    if (Array.isArray(value) && period.length !== value.length) return false;\n    if (Array.isArray(value)) {\n      return compareMonth(period[0], value[0]) && compareMonth(period[1], value[1]);\n    }\n\n    return compareMonth(period[0], value);\n  };\n\n  render() {\n    const SPeriod = Root;\n    const { styles, value, onChange, periods, onHighlightedChange, onDisplayedPeriodChange } =\n      this.asProps;\n\n    return sstyled(styles)(\n      <SPeriod render={Box}>\n        {periods.map(({ value: period, onClick, onMouseEnter, onMouseLeave, ...other }, i) => (\n          <Button\n            use=\"tertiary\"\n            theme=\"muted\"\n            styles={stylesBtn}\n            key={i}\n            active={this.getActiveControl(period, value)}\n            onClick={callAllEventHandlers(onClick, () => onChange(period))}\n            onMouseEnter={callAllEventHandlers(onMouseEnter, () => {\n              onHighlightedChange(period);\n              onDisplayedPeriodChange(dayjs(period[0]).toDate());\n            })}\n            onMouseLeave={callAllEventHandlers(onMouseLeave, () => {\n              onHighlightedChange([]);\n              onDisplayedPeriodChange(value[0] ? dayjs(value[0]).toDate() : new Date());\n            })}\n            {...other}\n          />\n        ))}\n      </SPeriod>,\n    );\n  }\n}\n"],"mappings":"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"}

package/lib/cjs/index.d.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import React, { ComponentProps } from 'react';\nimport dayjs from 'dayjs';\nimport { Box, IBoxProps } from '@semcore/flex-box';\nimport Button from '@semcore/button';\nimport { CProps, Merge, PropGetterFn, ReturnEl } from '@semcore/core';\nimport Dropdown, { IDropdownProps } from '@semcore/dropdown';\nimport { IWithI18nEnhanceProps } from '@semcore/utils/lib/enhances/i18nEnhance';\nimport BaseTrigger from '@semcore/base-trigger';\n\nexport type DateConstructorParams = string | number | Date;\n\nexport interface ICalendarProps extends IBoxProps {\n  /**\n   * Locale for displaying the days of a week and months, to be transferred to `Intl`\n   * @default en\n   * */\n  locale?: NavigatorLanguage['language'];\n  /**\n   * Array of dates blocked for selection\n   * Accepts the date, the range of dates or `falsICalendarPropse` for specifying infinity ([Date | false, Date | false]), crontab( 6,7)\n   * */\n  disabled?: (Date | (Date | false)[] | string)[];\n  /**\n   * @ignore\n   * */\n  highlighted?: DateConstructorParams[];\n  /**\n   * @ignore\n   * */\n  onHighlightedChange?: (date: Date[]) => void;\n  /**\n   * The selected date, accepts everything which is accepted by `new Date()`\n   * */\n  value?: DateConstructorParams[];\n  /**\n   * To be activated upon selecting the date\n   * */\n  onChange?: (date: Date[]) => void;\n  /**\n   * Date for showing the necessary month\n   * @default new Date()\n   * */\n  displayedPeriod?: Date;\n}\n\nexport interface ICalendarDaysContext {\n  days: ICalendarUnitProps[];\n}\n\nexport interface ICalendarMonthsContext {\n  months: ICalendarUnitProps[];\n}\n\nexport interface ICalendarUnitProps extends IBoxProps {\n  selected?: boolean;\n  outdated?: boolean;\n  disabled?: boolean;\n  today?: boolean;\n  startSelected?: boolean;\n  endSelected?: boolean;\n  highlighted?: boolean;\n  startHighlighted?: boolean;\n  endHighlighted?: boolean;\n  children?: React.ReactNode;\n}\n\nexport interface ICalendarContext {\n  getUnitProps: PropGetterFn;\n}\n\ndeclare const Calendar: (<T>(\n  props: CProps<ICalendarProps & T, ICalendarContext, IAbstractDatePickerHandlers>,\n) => ReturnEl) & {\n  Unit: <T>(props: ICalendarUnitProps & T) => ReturnEl;\n};\n\nexport interface IDatePickerProps extends IDropdownProps, IWithI18nEnhanceProps {\n  /**\n   * The selected date, accepts everything which is accepted by `new Date()`\n   * */\n  value?: DateConstructorParams;\n  /**\n   * To be activated upon selecting the date\n   * */\n  onChange?: (date: Date) => void;\n  /**\n   * Array of dates blocked for selection\n   * */\n  disabled?: (Date | (Date | false)[] | string)[];\n  /**\n   * Date for showing the necessary month\n   * @default new Date()\n   * */\n  displayedPeriod?: DateConstructorParams;\n  /**\n   * To be activated upon changing the current shown month\n   * */\n  onDisplayedPeriodChange?: (date: Date) => void;\n  /**\n   * Component size\n   * @default m\n   */\n  size?: 'm' | 'l';\n  /**\n   * The selected date, accepts everything which is accepted by `new Date()`\n   * */\n  highlighted?: DateConstructorParams[];\n  /**\n   * Default value selected date, accepts everything which is accepted by `new Date()`\n   * */\n  defaultValue?: DateConstructorParams;\n  /**\n   * Default value date for showing the necessary month\n   * */\n  defaultDisplayedPeriod?: DateConstructorParams;\n  /**\n   * Default value selected date, accepts everything which is accepted by `new Date()`\n   * */\n  defaultHighlighted?: DateConstructorParams[];\n}\n\nexport interface IDateRangePickerProps extends IDropdownProps, IWithI18nEnhanceProps {\n  /**\n   * The selected date, accepts everything which is accepted by `new Date()`\n   * */\n  value?: DateConstructorParams[];\n  /**\n   * Default value selected date, accepts everything which is accepted by `new Date()`\n   * */\n  defaultValue?: DateConstructorParams[];\n  /**\n   * Default value date for showing the necessary month\n   * */\n  defaultDisplayedPeriod?: DateConstructorParams;\n  /**\n   * Default value selected date, accepts everything which is accepted by `new Date()`\n   * */\n  defaultHighlighted?: DateConstructorParams[];\n  /**\n   * To be activated upon selecting the date\n   * */\n  onChange?: (date: Date[]) => void;\n  /**\n   * Array of dates blocked for selection\n   * */\n  disabled?: (Date | (Date | false)[] | string)[];\n  /**\n   * Date for showing the necessary month\n   * @default new Date()\n   * */\n  displayedPeriod?: DateConstructorParams;\n  /**\n   * To be activated upon changing the current shown month\n   * */\n  onDisplayedPeriodChange?: (date: Date) => void;\n  /**\n   * Component size\n   * @default m\n   */\n  size?: 'm' | 'l' | 'xl';\n  /**\n   * The selected date, accepts everything which is accepted by `new Date()`\n   * */\n  highlighted?: DateConstructorParams[];\n  /**\n   * Remove the 'Reset' button\n   * */\n  unclearable?: boolean;\n  /**\n   * To be activated upon selecting the date\n   * */\n  onHighlightedChange?: (date: Date[]) => void;\n  /**\n   * Array of periods\n   * [{value: [new Date(), new Date()], children: \"Today\"}]\n   * @default Past 2 days / Past week / Past 2 week / Past month / Past 2 month\n   * */\n  periods?: (ComponentProps<typeof Button> & { value: Date[] })[];\n}\n\nexport interface IDateRangePickerPeriodProps extends IBoxProps {\n  /**\n   * Current selected period\n   * */\n  value?: DateConstructorParams[];\n  /**\n   * To be activated by clicking the button for switching the selected period.\n   * */\n  onChange?: (date: Date[]) => void;\n  /**\n   * To be activated by hovering a cursor over the button for changing the current displayed month.\n   * */\n  onDisplayedPeriodChange?: (date: Date) => void;\n  /**\n   * To be activated by hovering a cursor over the button for selecting the dates.\n   * */\n  onHighlightedChange?: (date: Date[]) => void;\n  /**\n   * Array of periods\n   * [{value: [new Date(), new Date()], children: \"Today\"}]\n   * @default Past 2 days / Past week / Past 2 week / Past month / Past 2 month\n   * */\n  periods?: (ComponentProps<typeof Button> & { value: Date[] })[];\n}\n\nexport interface IDatePickerContext {\n  getTriggerProps: PropGetterFn;\n  getPopperProps: PropGetterFn;\n  getHeaderProps: PropGetterFn;\n  getTitleProps: PropGetterFn;\n  getNextProps: PropGetterFn;\n  getPrevProps: PropGetterFn;\n  getCalendarProps: PropGetterFn;\n  getTodayProps: PropGetterFn;\n}\n\nexport interface IAbstractDatePickerHandlers {\n  displayedPeriod: (value: DateConstructorParams) => void;\n  visible: (index: boolean) => void;\n  highlighted: (list: DateConstructorParams[]) => void;\n  value: (index: DateConstructorParams) => void;\n}\n\nexport interface IDatePickerHandlers {\n  visible: (index: boolean) => void;\n}\n\ndeclare const DatePicker: ((\n  props: CProps<IDatePickerProps, IDatePickerContext & ICalendarDaysContext, IDatePickerHandlers>,\n) => ReturnEl) & {\n  Trigger: (<T>(\n    props: Merge<ComponentProps<typeof Dropdown.Trigger>, ComponentProps<typeof BaseTrigger>> & T,\n  ) => ReturnEl) & {\n    Addon: typeof BaseTrigger.Addon;\n    Text: typeof BaseTrigger.Text;\n  };\n  Popper: typeof Dropdown.Popper;\n  Header: typeof Box;\n  Title: <T>(props: CProps<IDatePickerProps & IBoxProps & T, IDatePickerContext>) => ReturnEl;\n  Prev: typeof Button;\n  Next: typeof Button;\n  Calendar: typeof Calendar;\n  Today: typeof Box;\n  add: (date: number | Date, amount: number, unit: dayjs.OpUnitType) => Date;\n  subtract: (date: number | Date, amount: number, unit: dayjs.OpUnitType) => Date;\n};\n\nexport interface IDateRangePickerContext {\n  getTriggerProps: PropGetterFn;\n  getPopperProps: PropGetterFn;\n  getHeaderProps: PropGetterFn;\n  getTitleProps: PropGetterFn;\n  getNextProps: PropGetterFn;\n  getPrevProps: PropGetterFn;\n  getCalendarProps: PropGetterFn;\n  getPeriodProps: PropGetterFn;\n}\n\ndeclare const DateRangePicker: ((\n  props: CProps<\n    IDateRangePickerProps,\n    IDateRangePickerContext & ICalendarDaysContext,\n    IDatePickerHandlers\n  >,\n) => ReturnEl) & {\n  Trigger: (<T>(\n    props: Merge<ComponentProps<typeof Dropdown.Trigger>, ComponentProps<typeof BaseTrigger>> & T,\n  ) => ReturnEl) & {\n    Addon: typeof BaseTrigger.Addon;\n    Text: typeof BaseTrigger.Text;\n  };\n  Popper: <T>(props: ComponentProps<typeof Dropdown.Popper> & T) => ReturnEl;\n  Header: typeof Box;\n  Title: <T>(\n    props: CProps<IDateRangePickerProps & IBoxProps & T, IDateRangePickerContext>,\n  ) => ReturnEl;\n  Prev: typeof Button;\n  Next: typeof Button;\n  Calendar: typeof Calendar;\n  Period: <T>(props: IDateRangePickerPeriodProps & T) => ReturnEl;\n  Apply: typeof Button;\n  Reset: typeof Button;\n  add: (date: number | Date, amount: number, unit: dayjs.OpUnitType) => Date;\n  subtract: (date: number | Date, amount: number, unit: dayjs.OpUnitType) => Date;\n};\n\nexport interface IMonthPickerContext {\n  getTriggerProps: PropGetterFn;\n  getPopperProps: PropGetterFn;\n  getHeaderProps: PropGetterFn;\n  getTitleProps: PropGetterFn;\n  getNextProps: PropGetterFn;\n  getPrevProps: PropGetterFn;\n  getCalendarProps: PropGetterFn;\n}\n\ndeclare const MonthPicker: ((\n  props: CProps<\n    IDatePickerProps,\n    IMonthPickerContext & ICalendarMonthsContext,\n    IDatePickerHandlers\n  >,\n) => ReturnEl) & {\n  Trigger: (<T>(\n    props: Merge<ComponentProps<typeof Dropdown.Trigger>, ComponentProps<typeof BaseTrigger>> & T,\n  ) => ReturnEl) & {\n    Addon: typeof BaseTrigger.Addon;\n    Text: typeof BaseTrigger.Text;\n  };\n  Popper: typeof Dropdown.Popper;\n  Header: typeof Box;\n  Title: <T>(props: CProps<IDatePickerProps & IBoxProps & T, IMonthPickerContext>) => ReturnEl;\n  Prev: typeof Button;\n  Next: typeof Button;\n  Calendar: typeof Calendar;\n  add: (date: number | Date, amount: number, unit: dayjs.OpUnitType) => Date;\n  subtract: (date: number | Date, amount: number, unit: dayjs.OpUnitType) => Date;\n};\n\nexport interface IMonthRangePickerContext {\n  getTriggerProps: PropGetterFn;\n  getPopperProps: PropGetterFn;\n  getHeaderProps: PropGetterFn;\n  getTitleProps: PropGetterFn;\n  getNextProps: PropGetterFn;\n  getPrevProps: PropGetterFn;\n  getCalendarProps: PropGetterFn;\n  getPeriodProps: PropGetterFn;\n}\n\ndeclare const MonthRangePicker: ((\n  props: CProps<\n    IDateRangePickerProps,\n    IMonthRangePickerContext & ICalendarMonthsContext,\n    IDatePickerHandlers\n  >,\n) => ReturnEl) & {\n  Trigger: (<T>(\n    props: Merge<ComponentProps<typeof Dropdown.Trigger>, ComponentProps<typeof BaseTrigger>> & T,\n  ) => ReturnEl) & {\n    Addon: typeof BaseTrigger.Addon;\n    Text: typeof BaseTrigger.Text;\n  };\n  Popper: typeof Dropdown.Popper;\n  Header: typeof Box;\n  Title: <T>(\n    props: CProps<IDateRangePickerProps & IBoxProps & T, IMonthRangePickerContext>,\n  ) => ReturnEl;\n  Prev: typeof Button;\n  Next: typeof Button;\n  Calendar: typeof Calendar;\n  Period: <T>(props: IDateRangePickerPeriodProps & T) => ReturnEl;\n  Apply: typeof Button;\n  Reset: typeof Button;\n  add: (date: number | Date, amount: number, unit: dayjs.OpUnitType) => Date;\n  subtract: (date: number | Date, amount: number, unit: dayjs.OpUnitType) => Date;\n};\n\nexport { DatePicker, DateRangePicker, MonthPicker, MonthRangePicker };\n"],"mappings":""}
+{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import React, { ChangeEvent, ComponentProps } from 'react';\nimport dayjs from 'dayjs';\nimport { Box, IBoxProps } from '@semcore/flex-box';\nimport Button from '@semcore/button';\nimport { CProps, Merge, PropGetterFn, ReturnEl } from '@semcore/core';\nimport Dropdown, { IDropdownProps } from '@semcore/dropdown';\nimport { IWithI18nEnhanceProps } from '@semcore/utils/lib/enhances/i18nEnhance';\nimport BaseTrigger from '@semcore/base-trigger';\nimport Input from '@semcore/input';\nimport InputMask from '@semcore/input-mask';\n\nexport type DateConstructorParams = string | number | Date;\n\nexport interface ICalendarProps extends IBoxProps {\n  /**\n   * Locale for displaying the days of a week and months, to be transferred to `Intl`\n   * @default en\n   * */\n  locale?: NavigatorLanguage['language'];\n  /**\n   * Array of dates blocked for selection\n   * Accepts the date or the range of dates for specifying infinity ([Date | false, Date | false]), crontab(6,7)\n   * */\n  disabled?: (Date | (Date | false)[] | string)[];\n  /**\n   * @ignore\n   * */\n  highlighted?: DateConstructorParams[];\n  /**\n   * @ignore\n   * */\n  onHighlightedChange?: (date: Date[]) => void;\n  /**\n   * The selected date, accepts everything which is accepted by `new Date()`\n   * */\n  value?: DateConstructorParams[];\n  /**\n   * To be activated upon selecting the date\n   * */\n  onChange?: (date: Date[]) => void;\n  /**\n   * Date for showing the necessary month\n   * @default new Date()\n   * */\n  displayedPeriod?: Date;\n}\n\nexport interface ICalendarDaysContext {\n  days: ICalendarUnitProps[];\n}\n\nexport interface ICalendarMonthsContext {\n  months: ICalendarUnitProps[];\n}\n\nexport interface ICalendarUnitProps extends IBoxProps {\n  selected?: boolean;\n  outdated?: boolean;\n  disabled?: boolean;\n  today?: boolean;\n  startSelected?: boolean;\n  endSelected?: boolean;\n  highlighted?: boolean;\n  startHighlighted?: boolean;\n  endHighlighted?: boolean;\n  children?: React.ReactNode;\n}\n\nexport interface ICalendarContext {\n  getUnitProps: PropGetterFn;\n}\n\ndeclare const Calendar: (<T>(\n  props: CProps<ICalendarProps & T, ICalendarContext, IAbstractDatePickerHandlers>,\n) => ReturnEl) & {\n  Unit: <T>(props: ICalendarUnitProps & T) => ReturnEl;\n};\n\nexport interface IDatePickerProps extends IDropdownProps, IWithI18nEnhanceProps {\n  /**\n   * The selected date, accepts everything which is accepted by `new Date()`\n   * */\n  value?: DateConstructorParams;\n  /**\n   * To be activated upon selecting the date\n   * */\n  onChange?: (date: Date) => void;\n  /**\n   * Array of dates blocked for selection\n   * */\n  disabled?: (Date | (Date | false)[] | string)[];\n  /**\n   * Date for showing the necessary month\n   * @default new Date()\n   * */\n  displayedPeriod?: DateConstructorParams;\n  /**\n   * To be activated upon changing the current shown month\n   * */\n  onDisplayedPeriodChange?: (date: Date) => void;\n  /**\n   * Component size\n   * @default m\n   */\n  size?: 'm' | 'l';\n  /**\n   * The selected date, accepts everything which is accepted by `new Date()`\n   * */\n  highlighted?: DateConstructorParams[];\n  /**\n   * Default value selected date, accepts everything which is accepted by `new Date()`\n   * */\n  defaultValue?: DateConstructorParams;\n  /**\n   * Default value date for showing the necessary month\n   * */\n  defaultDisplayedPeriod?: DateConstructorParams;\n  /**\n   * Default value selected date, accepts everything which is accepted by `new Date()`\n   * */\n  defaultHighlighted?: DateConstructorParams[];\n}\n\nexport interface IDateRangePickerProps extends IDropdownProps, IWithI18nEnhanceProps {\n  /**\n   * The selected date, accepts everything which is accepted by `new Date()`\n   * */\n  value?: DateConstructorParams[];\n  /**\n   * Default value selected date, accepts everything which is accepted by `new Date()`\n   * */\n  defaultValue?: DateConstructorParams[];\n  /**\n   * Default value date for showing the necessary month\n   * */\n  defaultDisplayedPeriod?: DateConstructorParams;\n  /**\n   * Default value selected date, accepts everything which is accepted by `new Date()`\n   * */\n  defaultHighlighted?: DateConstructorParams[];\n  /**\n   * To be activated upon selecting the date\n   * */\n  onChange?: (date: Date[]) => void;\n  /**\n   * Array of dates blocked for selection\n   * */\n  disabled?: (Date | (Date | false)[] | string)[];\n  /**\n   * Date for showing the necessary month\n   * @default new Date()\n   * */\n  displayedPeriod?: DateConstructorParams;\n  /**\n   * To be activated upon changing the current shown month\n   * */\n  onDisplayedPeriodChange?: (date: Date) => void;\n  /**\n   * Component size\n   * @default m\n   */\n  size?: 'm' | 'l' | 'xl';\n  /**\n   * The selected date, accepts everything which is accepted by `new Date()`\n   * */\n  highlighted?: DateConstructorParams[];\n  /**\n   * Remove the 'Reset' button\n   * */\n  unclearable?: boolean;\n  /**\n   * To be activated upon selecting the date\n   * */\n  onHighlightedChange?: (date: Date[]) => void;\n  /**\n   * Array of periods\n   * [{value: [new Date(), new Date()], children: \"Today\"}]\n   * @default Past 2 days / Past week / Past 2 week / Past month / Past 2 month\n   * */\n  periods?: (ComponentProps<typeof Button> & { value: Date[] })[];\n}\n\nexport interface IDateRangePickerPeriodProps extends IBoxProps {\n  /**\n   * Current selected period\n   * */\n  value?: DateConstructorParams[];\n  /**\n   * To be activated by clicking the button for switching the selected period.\n   * */\n  onChange?: (date: Date[]) => void;\n  /**\n   * To be activated by hovering a cursor over the button for changing the current displayed month.\n   * */\n  onDisplayedPeriodChange?: (date: Date) => void;\n  /**\n   * To be activated by hovering a cursor over the button for selecting the dates.\n   * */\n  onHighlightedChange?: (date: Date[]) => void;\n  /**\n   * Array of periods\n   * [{value: [new Date(), new Date()], children: \"Today\"}]\n   * @default Past 2 days / Past week / Past 2 week / Past month / Past 2 month\n   * */\n  periods?: (ComponentProps<typeof Button> & { value: Date[] })[];\n}\n\nexport interface IDatePickerContext {\n  getTriggerProps: PropGetterFn;\n  getPopperProps: PropGetterFn;\n  getHeaderProps: PropGetterFn;\n  getTitleProps: PropGetterFn;\n  getNextProps: PropGetterFn;\n  getPrevProps: PropGetterFn;\n  getCalendarProps: PropGetterFn;\n  getTodayProps: PropGetterFn;\n}\n\nexport interface IAbstractDatePickerHandlers {\n  displayedPeriod: (value: DateConstructorParams) => void;\n  visible: (index: boolean) => void;\n  highlighted: (list: DateConstructorParams[]) => void;\n  value: (index: DateConstructorParams) => void;\n}\n\nexport interface IDatePickerHandlers {\n  visible: (index: boolean) => void;\n}\n\nexport interface IInputTriggerProps {\n  value: Date;\n  /**\n   * Date input placeholder characters\n   * @default { year: 'Y'; month: 'M'; day: 'D' }\n   */\n  placeholders: { year: string; month: string; day: string };\n  onChange: (date: Date, event: ChangeEvent) => void;\n  locale: string;\n  onDisplayedPeriodChange: (date: Date) => void;\n}\n\nexport interface ISingleDateInputProps extends IInputTriggerProps {}\n\nexport interface IDateRangeProps extends IInputTriggerProps {}\n\nexport interface IDatePickerMaskedInputProps {\n  date: Date;\n  onDateChange: (date: Date, event: ChangeEvent) => void;\n  onDisplayedPeriodChange: (date: Date) => void;\n  locale: string;\n  parts: { year: Boolean; month: Boolean; day: Boolean };\n  disabledDates: (Date | (Date | false)[] | string)[];\n}\n\ndeclare const InputTrigger: (<T>(\n  props: Merge<ComponentProps<typeof Dropdown.Trigger>, IInputTriggerProps> & T,\n) => ReturnEl) & {\n  Addon: typeof Input.Addon;\n  Value: typeof Input.Value;\n  SingleDateInput: (<T>(\n    props: Merge<ComponentProps<typeof InputMask>, ISingleDateInputProps> & T,\n  ) => ReturnEl) & {\n    Indicator: typeof Input.Addon;\n    MaskedInput: <T>(\n      props: Merge<ComponentProps<typeof InputMask.Value>, IDatePickerMaskedInputProps> & T,\n    ) => ReturnEl;\n  };\n  DateRange: (<T>(\n    props: Merge<ComponentProps<typeof InputMask>, IDateRangeProps> & T,\n  ) => ReturnEl) & {\n    Indicator: typeof Input.Addon;\n    RangeSep: typeof Input.Addon;\n    FromMaskedInput: <T>(\n      props: Merge<ComponentProps<typeof InputMask.Value>, IDatePickerMaskedInputProps> & T,\n    ) => ReturnEl;\n    ToMaskedInput: <T>(\n      props: Merge<ComponentProps<typeof InputMask.Value>, IDatePickerMaskedInputProps> & T,\n    ) => ReturnEl;\n  };\n};\n\ndeclare const DatePicker: ((\n  props: CProps<IDatePickerProps, IDatePickerContext & ICalendarDaysContext, IDatePickerHandlers>,\n) => ReturnEl) & {\n  /** @deprecated `DatePicker.Trigger` is deprecated, consider migrating to `DatePicker.InputTrigger` instead */\n  Trigger: (<T>(\n    props: Merge<ComponentProps<typeof Dropdown.Trigger>, ComponentProps<typeof BaseTrigger>> & T,\n  ) => ReturnEl) & {\n    Addon: typeof BaseTrigger.Addon;\n    Text: typeof BaseTrigger.Text;\n  };\n  InputTrigger: InputTrigger;\n  Popper: typeof Dropdown.Popper;\n  Header: typeof Box;\n  Title: <T>(props: CProps<IDatePickerProps & IBoxProps & T, IDatePickerContext>) => ReturnEl;\n  Prev: typeof Button;\n  Next: typeof Button;\n  Calendar: typeof Calendar;\n  Today: typeof Box;\n  add: (date: number | Date, amount: number, unit: dayjs.OpUnitType) => Date;\n  subtract: (date: number | Date, amount: number, unit: dayjs.OpUnitType) => Date;\n};\n\nexport interface IDateRangePickerContext {\n  getTriggerProps: PropGetterFn;\n  getPopperProps: PropGetterFn;\n  getHeaderProps: PropGetterFn;\n  getTitleProps: PropGetterFn;\n  getNextProps: PropGetterFn;\n  getPrevProps: PropGetterFn;\n  getCalendarProps: PropGetterFn;\n  getPeriodProps: PropGetterFn;\n}\n\ndeclare const DateRangePicker: ((\n  props: CProps<\n    IDateRangePickerProps,\n    IDateRangePickerContext & ICalendarDaysContext,\n    IDatePickerHandlers\n  >,\n) => ReturnEl) & {\n  /** @deprecated `DatePicker.Trigger` is deprecated, consider migrating to `DatePicker.InputTrigger` instead */\n  Trigger: (<T>(\n    props: Merge<ComponentProps<typeof Dropdown.Trigger>, ComponentProps<typeof BaseTrigger>> & T,\n  ) => ReturnEl) & {\n    Addon: typeof BaseTrigger.Addon;\n    Text: typeof BaseTrigger.Text;\n  };\n  InputTrigger: InputTrigger;\n  Popper: <T>(props: ComponentProps<typeof Dropdown.Popper> & T) => ReturnEl;\n  Header: typeof Box;\n  Title: <T>(\n    props: CProps<IDateRangePickerProps & IBoxProps & T, IDateRangePickerContext>,\n  ) => ReturnEl;\n  Prev: typeof Button;\n  Next: typeof Button;\n  Calendar: typeof Calendar;\n  Period: <T>(props: IDateRangePickerPeriodProps & T) => ReturnEl;\n  Apply: typeof Button;\n  Reset: typeof Button;\n  add: (date: number | Date, amount: number, unit: dayjs.OpUnitType) => Date;\n  subtract: (date: number | Date, amount: number, unit: dayjs.OpUnitType) => Date;\n};\n\nexport interface IMonthPickerContext {\n  getTriggerProps: PropGetterFn;\n  getPopperProps: PropGetterFn;\n  getHeaderProps: PropGetterFn;\n  getTitleProps: PropGetterFn;\n  getNextProps: PropGetterFn;\n  getPrevProps: PropGetterFn;\n  getCalendarProps: PropGetterFn;\n}\n\ndeclare const MonthPicker: ((\n  props: CProps<\n    IDatePickerProps,\n    IMonthPickerContext & ICalendarMonthsContext,\n    IDatePickerHandlers\n  >,\n) => ReturnEl) & {\n  /** @deprecated `DatePicker.Trigger` is deprecated, consider migrating to `DatePicker.InputTrigger` instead */\n  Trigger: (<T>(\n    props: Merge<ComponentProps<typeof Dropdown.Trigger>, ComponentProps<typeof BaseTrigger>> & T,\n  ) => ReturnEl) & {\n    Addon: typeof BaseTrigger.Addon;\n    Text: typeof BaseTrigger.Text;\n  };\n  InputTrigger: InputTrigger;\n  Popper: typeof Dropdown.Popper;\n  Header: typeof Box;\n  Title: <T>(props: CProps<IDatePickerProps & IBoxProps & T, IMonthPickerContext>) => ReturnEl;\n  Prev: typeof Button;\n  Next: typeof Button;\n  Calendar: typeof Calendar;\n  add: (date: number | Date, amount: number, unit: dayjs.OpUnitType) => Date;\n  subtract: (date: number | Date, amount: number, unit: dayjs.OpUnitType) => Date;\n};\n\nexport interface IMonthRangePickerContext {\n  getTriggerProps: PropGetterFn;\n  getPopperProps: PropGetterFn;\n  getHeaderProps: PropGetterFn;\n  getTitleProps: PropGetterFn;\n  getNextProps: PropGetterFn;\n  getPrevProps: PropGetterFn;\n  getCalendarProps: PropGetterFn;\n  getPeriodProps: PropGetterFn;\n}\n\ndeclare const MonthRangePicker: ((\n  props: CProps<\n    IDateRangePickerProps,\n    IMonthRangePickerContext & ICalendarMonthsContext,\n    IDatePickerHandlers\n  >,\n) => ReturnEl) & {\n  /** @deprecated `DatePicker.Trigger` is deprecated, consider migrating to `DatePicker.InputTrigger` instead */\n  Trigger: (<T>(\n    props: Merge<ComponentProps<typeof Dropdown.Trigger>, ComponentProps<typeof BaseTrigger>> & T,\n  ) => ReturnEl) & {\n    Addon: typeof BaseTrigger.Addon;\n    Text: typeof BaseTrigger.Text;\n  };\n  InputTrigger: InputTrigger;\n  Popper: typeof Dropdown.Popper;\n  Header: typeof Box;\n  Title: <T>(\n    props: CProps<IDateRangePickerProps & IBoxProps & T, IMonthRangePickerContext>,\n  ) => ReturnEl;\n  Prev: typeof Button;\n  Next: typeof Button;\n  Calendar: typeof Calendar;\n  Period: <T>(props: IDateRangePickerPeriodProps & T) => ReturnEl;\n  Apply: typeof Button;\n  Reset: typeof Button;\n  add: (date: number | Date, amount: number, unit: dayjs.OpUnitType) => Date;\n  subtract: (date: number | Date, amount: number, unit: dayjs.OpUnitType) => Date;\n};\n\nexport { DatePicker, DateRangePicker, MonthPicker, MonthRangePicker };\n"],"mappings":""}

package/lib/cjs/style/date-picker.shadow.css

@@ -47,3 +47,51 @@ SPeriod {
   flex-direction: column;
   margin-bottom: 8px;
 }
+
+SSingleDateInput:hover SOutline,
+SSingleDateInput:focus-within SOutline,
+SSingleDateInput:active SOutline,
+SSingleDateInput[active] SOutline,
+SDateRange:hover SOutline,
+SDateRange:focus-within SOutline,
+SDateRange:active SOutline,
+SDateRange[active] SOutline {
+  background-color: color-mod(var(--gray-400) a(30%));
+}
+
+SIndicator {
+  color: var(--gray-500);
+}
+SHumanizedDate {
+  position: absolute;
+  pointer-events: none;
+}
+SSingleDateInput SValue,
+SDateRange SMask,
+SSingleDateInput SMask,
+SDateRange SValue {
+  opacity: 0;
+}
+SSingleDateInput:focus-within SHumanizedDate {
+  opacity: 0;
+  z-index: -1000;
+}
+SSingleDateInput:focus-within SValue,
+SSingleDateInput:focus-within SMask {
+  opacity: 1;
+}
+SDateRange SValue {
+  opacity: 0;
+}
+SDateRange:focus-within SHumanizedDate {
+  opacity: 0;
+  z-index: -1000;
+}
+SDateRange:focus-within SValue,
+SDateRange:focus-within SMask {
+  opacity: 1;
+}
+SInputMask[noHumanizedDate] SValue,
+SInputMask[noHumanizedDate] SMask {
+  opacity: 1;
+}

package/lib/es6/DatePicker.js

@@ -23,7 +23,7 @@ import { Box } from '@semcore/flex-box';
 import Button from '@semcore/button';
 import Divider from '@semcore/divider';
 import i18nEnhance from '@semcore/utils/lib/enhances/i18nEnhance';
-import { Header, Next, Popper, Prev, Title, Trigger } from './components';
+import { Header, Next, Popper, Prev, Title, Trigger, InputTrigger } from './components';
 import { CalendarDays as Calendar } from './components/Calendar';
 import PickerAbstract from './components/PickerAbstract';
 import { getLocaleDate } from './utils/formatDate';
@@ -72,6 +72,28 @@ export var DatePickerRoot = /*#__PURE__*/function (_PickerAbstract) {
         children: value ? getLocaleDate(value, locale) : null
       });
     }
+  }, {
+    key: "getInputTriggerProps",
+    value: function getInputTriggerProps() {
+      var _this$asProps2 = this.asProps,
+          value = _this$asProps2.value,
+          onChange = _this$asProps2.onChange,
+          onDisplayedPeriodChange = _this$asProps2.onDisplayedPeriodChange,
+          locale = _this$asProps2.locale,
+          disabled = _this$asProps2.disabled,
+          size = _this$asProps2.size;
+      return _objectSpread(_objectSpread({}, _get(_getPrototypeOf(DatePickerRoot.prototype), "getTriggerProps", this).call(this)), {}, {
+        value: value,
+        onChange: onChange,
+        onDisplayedPeriodChange: onDisplayedPeriodChange,
+        locale: locale,
+        w: size === 'm' ? 145 : 160,
+        disabledDates: disabled,
+        children: function children() {
+          return /*#__PURE__*/React.createElement(InputTrigger.SingleDateInput, null);
+        }
+      });
+    }
   }, {
     key: "getPopperProps",
     value: function getPopperProps() {
@@ -86,9 +108,9 @@ export var DatePickerRoot = /*#__PURE__*/function (_PickerAbstract) {
   }, {
     key: "getTitleProps",
     value: function getTitleProps() {
-      var _this$asProps2 = this.asProps,
-          displayedPeriod = _this$asProps2.displayedPeriod,
-          locale = _this$asProps2.locale;
+      var _this$asProps3 = this.asProps,
+          displayedPeriod = _this$asProps3.displayedPeriod,
+          locale = _this$asProps3.locale;
       return _objectSpread(_objectSpread({}, _get(_getPrototypeOf(DatePickerRoot.prototype), "getTitleProps", this).call(this)), {}, {
         children: new Intl.DateTimeFormat(locale, {
           month: 'long',
@@ -99,9 +121,9 @@ export var DatePickerRoot = /*#__PURE__*/function (_PickerAbstract) {
   }, {
     key: "getTodayProps",
     value: function getTodayProps() {
-      var _this$asProps3 = this.asProps,
-          i18n = _this$asProps3.i18n,
-          locale = _this$asProps3.locale;
+      var _this$asProps4 = this.asProps,
+          i18n = _this$asProps4.i18n,
+          locale = _this$asProps4.locale;
       return {
         i18n: i18n,
         locale: locale,
@@ -139,9 +161,9 @@ var Today = /*#__PURE__*/function (_Component) {
           _ref2;
 
       var SToday = Box;
-      var _this$asProps4 = this.asProps,
-          styles = _this$asProps4.styles,
-          getI18nText = _this$asProps4.getI18nText;
+      var _this$asProps5 = this.asProps,
+          styles = _this$asProps5.styles,
+          getI18nText = _this$asProps5.getI18nText;
       return _ref2 = sstyled(styles), /*#__PURE__*/React.createElement(SToday, _ref2.cn("SToday", _objectSpread({}, _assignProps({}, _ref))), /*#__PURE__*/React.createElement(Button, _ref2.cn("Button", {
         "use": "tertiary",
         "children": getI18nText('today')
@@ -156,6 +178,7 @@ _defineProperty(Today, "enhance", [i18nEnhance()]);
 
 var DatePicker = createComponent(DatePickerRoot, {
   Trigger: Trigger,
+  InputTrigger: InputTrigger,
   Popper: Popper,
   Header: Header,
   Title: Title,

package/lib/es6/DatePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.js","names":["React","dayjs","createComponent","Component","Root","sstyled","Box","Button","Divider","i18nEnhance","Header","Next","Popper","Prev","Title","Trigger","CalendarDays","Calendar","PickerAbstract","getLocaleDate","DatePickerRoot","handlers","value","Date","setHours","asProps","locale","placeholder","children","displayedPeriod","Intl","DateTimeFormat","month","year","format","startOf","toDate","i18n","onClick","handlerToday","props","defaultProps","Today","SToday","styles","getI18nText","DatePicker","parent"],"sources":["../../src/DatePicker.jsx"],"sourcesContent":["import React from 'react';\nimport dayjs from 'dayjs';\nimport createComponent, { Component, Root, sstyled } from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport Button from '@semcore/button';\nimport Divider from '@semcore/divider';\nimport i18nEnhance from '@semcore/utils/lib/enhances/i18nEnhance';\nimport { Header, Next, Popper, Prev, Title, Trigger } from './components';\nimport { CalendarDays as Calendar } from './components/Calendar';\nimport PickerAbstract from './components/PickerAbstract';\nimport { getLocaleDate } from './utils/formatDate';\n\nexport class DatePickerRoot extends PickerAbstract {\n  static displayName = 'DatePicker';\n\n  static defaultProps = (props) => ({\n    ...PickerAbstract.defaultProps(props),\n    children: (\n      <>\n        <DatePicker.Trigger />\n        <DatePicker.Popper />\n      </>\n    ),\n  });\n\n  navigateStep = 'month';\n  keyStep = 'day';\n  keyDiff = {\n    37: -1,\n    38: -7,\n    39: 1,\n    40: 7,\n  };\n\n  handlerToday = () => {\n    this.handlers.value(new Date(new Date().setHours(0, 0, 0, 0)));\n  };\n\n  getTriggerProps() {\n    const { value, locale } = this.asProps;\n    return {\n      ...super.getTriggerProps(),\n      placeholder: 'Select date',\n      children: value ? getLocaleDate(value, locale) : null,\n    };\n  }\n\n  getPopperProps() {\n    return {\n      ...super.getPopperProps(),\n      children: (\n        <>\n          <DatePicker.Header />\n          <DatePicker.Calendar />\n          <Divider ml={-4} mt={4} w=\"calc(100% + 32px)\" />\n          <DatePicker.Today />\n        </>\n      ),\n    };\n  }\n\n  getTitleProps() {\n    const { displayedPeriod, locale } = this.asProps;\n    return {\n      ...super.getTitleProps(),\n      children: new Intl.DateTimeFormat(locale, { month: 'long', year: 'numeric' }).format(\n        dayjs(displayedPeriod).startOf('month').toDate(),\n      ),\n    };\n  }\n\n  getTodayProps() {\n    const { i18n, locale } = this.asProps;\n    return {\n      i18n,\n      locale,\n      onClick: this.handlerToday,\n    };\n  }\n}\n\nclass Today extends Component {\n  static enhance = [i18nEnhance()];\n\n  render() {\n    const SToday = Root;\n    const { styles, getI18nText } = this.asProps;\n    return sstyled(styles)(\n      <SToday render={Box}>\n        <Button use=\"tertiary\" children={getI18nText('today')} />\n      </SToday>,\n    );\n  }\n}\n\nconst DatePicker = createComponent(\n  DatePickerRoot,\n  {\n    Trigger,\n    Popper,\n    Header,\n    Title,\n    Prev,\n    Next,\n    Calendar,\n    Today,\n  },\n  {\n    parent: Calendar,\n  },\n);\n\nexport default DatePicker;\n"],"mappings":"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"}
+{"version":3,"file":"DatePicker.js","names":["React","dayjs","createComponent","Component","Root","sstyled","Box","Button","Divider","i18nEnhance","Header","Next","Popper","Prev","Title","Trigger","InputTrigger","CalendarDays","Calendar","PickerAbstract","getLocaleDate","DatePickerRoot","handlers","value","Date","setHours","asProps","locale","placeholder","children","onChange","onDisplayedPeriodChange","disabled","size","w","disabledDates","displayedPeriod","Intl","DateTimeFormat","month","year","format","startOf","toDate","i18n","onClick","handlerToday","props","defaultProps","Today","SToday","styles","getI18nText","DatePicker","parent"],"sources":["../../src/DatePicker.jsx"],"sourcesContent":["import React from 'react';\nimport dayjs from 'dayjs';\nimport createComponent, { Component, Root, sstyled } from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport Button from '@semcore/button';\nimport Divider from '@semcore/divider';\nimport i18nEnhance from '@semcore/utils/lib/enhances/i18nEnhance';\nimport { Header, Next, Popper, Prev, Title, Trigger, InputTrigger } from './components';\nimport { CalendarDays as Calendar } from './components/Calendar';\nimport PickerAbstract from './components/PickerAbstract';\nimport { getLocaleDate } from './utils/formatDate';\n\nexport class DatePickerRoot extends PickerAbstract {\n  static displayName = 'DatePicker';\n\n  static defaultProps = (props) => ({\n    ...PickerAbstract.defaultProps(props),\n    children: (\n      <>\n        <DatePicker.Trigger />\n        <DatePicker.Popper />\n      </>\n    ),\n  });\n\n  navigateStep = 'month';\n  keyStep = 'day';\n  keyDiff = {\n    37: -1,\n    38: -7,\n    39: 1,\n    40: 7,\n  };\n\n  handlerToday = () => {\n    this.handlers.value(new Date(new Date().setHours(0, 0, 0, 0)));\n  };\n\n  getTriggerProps() {\n    const { value, locale } = this.asProps;\n    return {\n      ...super.getTriggerProps(),\n      placeholder: 'Select date',\n      children: value ? getLocaleDate(value, locale) : null,\n    };\n  }\n\n  getInputTriggerProps() {\n    const { value, onChange, onDisplayedPeriodChange, locale, disabled, size } = this.asProps;\n\n    return {\n      ...super.getTriggerProps(),\n      value,\n      onChange,\n      onDisplayedPeriodChange,\n      locale,\n      w: size === 'm' ? 145 : 160,\n      disabledDates: disabled,\n      children: () => <InputTrigger.SingleDateInput />,\n    };\n  }\n\n  getPopperProps() {\n    return {\n      ...super.getPopperProps(),\n      children: (\n        <>\n          <DatePicker.Header />\n          <DatePicker.Calendar />\n          <Divider ml={-4} mt={4} w=\"calc(100% + 32px)\" />\n          <DatePicker.Today />\n        </>\n      ),\n    };\n  }\n\n  getTitleProps() {\n    const { displayedPeriod, locale } = this.asProps;\n    return {\n      ...super.getTitleProps(),\n      children: new Intl.DateTimeFormat(locale, { month: 'long', year: 'numeric' }).format(\n        dayjs(displayedPeriod).startOf('month').toDate(),\n      ),\n    };\n  }\n\n  getTodayProps() {\n    const { i18n, locale } = this.asProps;\n    return {\n      i18n,\n      locale,\n      onClick: this.handlerToday,\n    };\n  }\n}\n\nclass Today extends Component {\n  static enhance = [i18nEnhance()];\n\n  render() {\n    const SToday = Root;\n    const { styles, getI18nText } = this.asProps;\n    return sstyled(styles)(\n      <SToday render={Box}>\n        <Button use=\"tertiary\" children={getI18nText('today')} />\n      </SToday>,\n    );\n  }\n}\n\nconst DatePicker = createComponent(\n  DatePickerRoot,\n  {\n    Trigger,\n    InputTrigger,\n    Popper,\n    Header,\n    Title,\n    Prev,\n    Next,\n    Calendar,\n    Today,\n  },\n  {\n    parent: Calendar,\n  },\n);\n\nexport default DatePicker;\n"],"mappings":"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"}

package/lib/es6/DateRangePicker.js

@@ -19,7 +19,7 @@ import React from 'react';
 import dayjs from 'dayjs';
 import createComponent from '@semcore/core';
 import shortDateRangeFormat from './utils/shortDateRangeFormat';
-import { Header, Next, Period, Popper, Prev, Title, Trigger } from './components';
+import { Header, Next, Period, Popper, Prev, Title, Trigger, InputTrigger } from './components';
 import { CalendarDays as Calendar } from './components/Calendar';
 import RangePickerAbstract, { Apply, Reset } from './components/RangePickerAbstract';
 
@@ -91,6 +91,28 @@ var DateRangePickerRoot = /*#__PURE__*/function (_RangePickerAbstract) {
         })
       });
     }
+  }, {
+    key: "getInputTriggerProps",
+    value: function getInputTriggerProps() {
+      var _this$asProps2 = this.asProps,
+          value = _this$asProps2.value,
+          onChange = _this$asProps2.onChange,
+          onDisplayedPeriodChange = _this$asProps2.onDisplayedPeriodChange,
+          locale = _this$asProps2.locale,
+          disabled = _this$asProps2.disabled,
+          size = _this$asProps2.size;
+      return _objectSpread(_objectSpread({}, _get(_getPrototypeOf(DateRangePickerRoot.prototype), "getTriggerProps", this).call(this)), {}, {
+        value: value,
+        onChange: onChange,
+        onDisplayedPeriodChange: onDisplayedPeriodChange,
+        locale: locale,
+        w: size === 'm' ? 270 : 300,
+        disabledDates: disabled,
+        children: function children() {
+          return /*#__PURE__*/React.createElement(InputTrigger.DateRange, null);
+        }
+      });
+    }
   }]);
 
   return DateRangePickerRoot;
@@ -106,6 +128,7 @@ _defineProperty(DateRangePickerRoot, "defaultProps", function (props) {
 
 var DateRangePicker = createComponent(DateRangePickerRoot, {
   Trigger: Trigger,
+  InputTrigger: InputTrigger,
   Popper: Popper,
   Header: Header,
   Title: Title,

package/lib/es6/DateRangePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateRangePicker.js","names":["React","dayjs","createComponent","shortDateRangeFormat","Header","Next","Period","Popper","Prev","Title","Trigger","CalendarDays","Calendar","RangePickerAbstract","Apply","Reset","DateRangePickerRoot","getI18nText","asProps","today","Date","setHours","children","value","subtract","toDate","locale","placeholder","day","month","year","props","defaultProps","DateRangePicker","parent"],"sources":["../../src/DateRangePicker.jsx"],"sourcesContent":["import React from 'react';\nimport dayjs from 'dayjs';\nimport createComponent from '@semcore/core';\nimport shortDateRangeFormat from './utils/shortDateRangeFormat';\nimport { Header, Next, Period, Popper, Prev, Title, Trigger } from './components';\nimport { CalendarDays as Calendar } from './components/Calendar';\nimport RangePickerAbstract, { Apply, Reset } from './components/RangePickerAbstract';\n\nclass DateRangePickerRoot extends RangePickerAbstract {\n  static displayName = 'DateRangePicker';\n  static defaultProps = (props) => {\n    return {\n      ...RangePickerAbstract.defaultProps(props),\n      children: (\n        <>\n          <DateRangePicker.Trigger />\n          <DateRangePicker.Popper />\n        </>\n      ),\n    };\n  };\n\n  navigateStep = 'month';\n  keyStep = 'day';\n  keyDiff = {\n    37: -1,\n    38: -7,\n    39: 1,\n    40: 7,\n  };\n\n  getDefaultPeriods() {\n    const { getI18nText } = this.asProps;\n    const today = new Date(new Date().setHours(0, 0, 0, 0));\n    return [\n      {\n        children: getI18nText('last2Days'),\n        value: [dayjs(today).subtract(1, 'day').toDate(), today],\n      },\n      {\n        children: getI18nText('lastWeek'),\n        value: [dayjs(today).subtract(6, 'day').toDate(), today],\n      },\n      {\n        children: getI18nText('last2Weeks'),\n        value: [dayjs(today).subtract(13, 'day').toDate(), today],\n      },\n      {\n        children: getI18nText('lastMonth'),\n        value: [dayjs(today).subtract(1, 'month').toDate(), today],\n      },\n      {\n        children: getI18nText('last2Months'),\n        value: [dayjs(today).subtract(2, 'month').toDate(), today],\n      },\n    ];\n  }\n\n  getTriggerProps() {\n    const { value, locale } = this.asProps;\n    return {\n      ...super.getTriggerProps(),\n      placeholder: 'Select date period',\n      children: shortDateRangeFormat(value, {\n        locale,\n        day: 'numeric',\n        month: 'short',\n        year: 'numeric',\n      }),\n    };\n  }\n}\n\nconst DateRangePicker = createComponent(\n  DateRangePickerRoot,\n  {\n    Trigger,\n    Popper,\n    Header,\n    Title,\n    Prev,\n    Next,\n    Calendar,\n    Period,\n    Apply,\n    Reset,\n  },\n  {\n    parent: Calendar,\n  },\n);\n\nexport default DateRangePicker;\n"],"mappings":"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"}
+{"version":3,"file":"DateRangePicker.js","names":["React","dayjs","createComponent","shortDateRangeFormat","Header","Next","Period","Popper","Prev","Title","Trigger","InputTrigger","CalendarDays","Calendar","RangePickerAbstract","Apply","Reset","DateRangePickerRoot","getI18nText","asProps","today","Date","setHours","children","value","subtract","toDate","locale","placeholder","day","month","year","onChange","onDisplayedPeriodChange","disabled","size","w","disabledDates","props","defaultProps","DateRangePicker","parent"],"sources":["../../src/DateRangePicker.jsx"],"sourcesContent":["import React from 'react';\nimport dayjs from 'dayjs';\nimport createComponent from '@semcore/core';\nimport shortDateRangeFormat from './utils/shortDateRangeFormat';\nimport { Header, Next, Period, Popper, Prev, Title, Trigger, InputTrigger } from './components';\nimport { CalendarDays as Calendar } from './components/Calendar';\nimport RangePickerAbstract, { Apply, Reset } from './components/RangePickerAbstract';\n\nclass DateRangePickerRoot extends RangePickerAbstract {\n  static displayName = 'DateRangePicker';\n  static defaultProps = (props) => {\n    return {\n      ...RangePickerAbstract.defaultProps(props),\n      children: (\n        <>\n          <DateRangePicker.Trigger />\n          <DateRangePicker.Popper />\n        </>\n      ),\n    };\n  };\n\n  navigateStep = 'month';\n  keyStep = 'day';\n  keyDiff = {\n    37: -1,\n    38: -7,\n    39: 1,\n    40: 7,\n  };\n\n  getDefaultPeriods() {\n    const { getI18nText } = this.asProps;\n    const today = new Date(new Date().setHours(0, 0, 0, 0));\n    return [\n      {\n        children: getI18nText('last2Days'),\n        value: [dayjs(today).subtract(1, 'day').toDate(), today],\n      },\n      {\n        children: getI18nText('lastWeek'),\n        value: [dayjs(today).subtract(6, 'day').toDate(), today],\n      },\n      {\n        children: getI18nText('last2Weeks'),\n        value: [dayjs(today).subtract(13, 'day').toDate(), today],\n      },\n      {\n        children: getI18nText('lastMonth'),\n        value: [dayjs(today).subtract(1, 'month').toDate(), today],\n      },\n      {\n        children: getI18nText('last2Months'),\n        value: [dayjs(today).subtract(2, 'month').toDate(), today],\n      },\n    ];\n  }\n\n  getTriggerProps() {\n    const { value, locale } = this.asProps;\n    return {\n      ...super.getTriggerProps(),\n      placeholder: 'Select date period',\n      children: shortDateRangeFormat(value, {\n        locale,\n        day: 'numeric',\n        month: 'short',\n        year: 'numeric',\n      }),\n    };\n  }\n\n  getInputTriggerProps() {\n    const { value, onChange, onDisplayedPeriodChange, locale, disabled, size } = this.asProps;\n\n    return {\n      ...super.getTriggerProps(),\n      value,\n      onChange,\n      onDisplayedPeriodChange,\n      locale,\n      w: size === 'm' ? 270 : 300,\n      disabledDates: disabled,\n      children: () => <InputTrigger.DateRange />,\n    };\n  }\n}\n\nconst DateRangePicker = createComponent(\n  DateRangePickerRoot,\n  {\n    Trigger,\n    InputTrigger,\n    Popper,\n    Header,\n    Title,\n    Prev,\n    Next,\n    Calendar,\n    Period,\n    Apply,\n    Reset,\n  },\n  {\n    parent: Calendar,\n  },\n);\n\nexport default DateRangePicker;\n"],"mappings":"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"}

package/lib/es6/MonthPicker.js

@@ -18,9 +18,14 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 import React from 'react';
 import dayjs from 'dayjs';
 import createComponent from '@semcore/core';
-import { Header, Next, Popper, Prev, Title, Trigger } from './components';
+import { Header, Next, Popper, Prev, Title, Trigger, InputTrigger } from './components';
 import { CalendarMonths as Calendar } from './components/Calendar';
 import PickerAbstract from './components/PickerAbstract';
+var dateParts = {
+  day: false,
+  month: true,
+  year: true
+};
 
 var MonthPickerRoot = /*#__PURE__*/function (_PickerAbstract) {
   _inherits(MonthPickerRoot, _PickerAbstract);
@@ -66,12 +71,35 @@ var MonthPickerRoot = /*#__PURE__*/function (_PickerAbstract) {
         }).format(dayjs(value).toDate()) : null
       });
     }
+  }, {
+    key: "getInputTriggerProps",
+    value: function getInputTriggerProps() {
+      var _this$asProps2 = this.asProps,
+          value = _this$asProps2.value,
+          onChange = _this$asProps2.onChange,
+          onDisplayedPeriodChange = _this$asProps2.onDisplayedPeriodChange,
+          locale = _this$asProps2.locale,
+          disabled = _this$asProps2.disabled,
+          size = _this$asProps2.size;
+      return _objectSpread(_objectSpread({}, _get(_getPrototypeOf(MonthPickerRoot.prototype), "getTriggerProps", this).call(this)), {}, {
+        value: value,
+        onChange: onChange,
+        onDisplayedPeriodChange: onDisplayedPeriodChange,
+        locale: locale,
+        w: size === 'm' ? 120 : 135,
+        parts: dateParts,
+        disabledDates: disabled,
+        children: function children() {
+          return /*#__PURE__*/React.createElement(InputTrigger.SingleDateInput, null);
+        }
+      });
+    }
   }, {
     key: "getTitleProps",
     value: function getTitleProps() {
-      var _this$asProps2 = this.asProps,
-          displayedPeriod = _this$asProps2.displayedPeriod,
-          locale = _this$asProps2.locale;
+      var _this$asProps3 = this.asProps,
+          displayedPeriod = _this$asProps3.displayedPeriod,
+          locale = _this$asProps3.locale;
       return _objectSpread(_objectSpread({}, _get(_getPrototypeOf(MonthPickerRoot.prototype), "getTitleProps", this).call(this)), {}, {
         children: new Intl.DateTimeFormat(locale, {
           year: 'numeric'
@@ -93,6 +121,7 @@ _defineProperty(MonthPickerRoot, "defaultProps", function (props) {
 
 var MonthPicker = createComponent(MonthPickerRoot, {
   Trigger: Trigger,
+  InputTrigger: InputTrigger,
   Popper: Popper,
   Header: Header,
   Title: Title,