@semcore/date-picker 3.4.5 → 3.4.7

package/lib/es6/components/index.js

@@ -7,6 +7,7 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { assignProps as _assignProps8 } from "@semcore/core";
 import { assignProps as _assignProps7 } from "@semcore/core";
 import { assignProps as _assignProps6 } from "@semcore/core";
 import { assignProps as _assignProps5 } from "@semcore/core";
@@ -34,60 +35,77 @@ import ChevronLeft from '@semcore/icon/ChevronLeft/m';
 import ChevronRight from '@semcore/icon/ChevronRight/m';
 import { callAllEventHandlers } from '@semcore/utils/lib/assignProps';
 import ButtonTrigger from './ButtonTrigger';
+import InputTriggerBase from './InputTrigger';
+/** @deprecated `DatePicker.Trigger` is deprecated, consider migrating to `DatePicker.InputTrigger` instead */
+
 export function Trigger() {
   var _ref = arguments[0];
   return /*#__PURE__*/React.createElement(Dropdown.Trigger, _assignProps({
     "tag": ButtonTrigger
   }, _ref));
 }
+export function InputTrigger() {
+  var _ref2 = arguments[0];
+  return /*#__PURE__*/React.createElement(Dropdown.Trigger, _assignProps2({
+    "tag": InputTriggerBase,
+    "__excludeProps": ['role', 'aria-haspopup', 'onChange', 'value']
+  }, _ref2));
+}
+InputTrigger.Indicator = InputTriggerBase.Indicator;
+InputTrigger.MaskedInput = InputTriggerBase.MaskedInput;
+InputTrigger.Addon = InputTriggerBase.Addon;
+InputTrigger.SingleDateInput = InputTriggerBase.SingleDateInput;
+InputTrigger.DateRange = InputTriggerBase.DateRange;
+InputTrigger.DateRangeFromInput = InputTriggerBase.DateRangeFromInput;
+InputTrigger.DateRangeToInput = InputTriggerBase.DateRangeToInput;
 export function Popper(props) {
-  var _ref2 = arguments[0],
-      _ref8;
+  var _ref3 = arguments[0],
+      _ref9;
 
   var SPopper = Dropdown.Popper;
-  return _ref8 = sstyled(props.styles), /*#__PURE__*/React.createElement(SPopper, _ref8.cn("SPopper", _objectSpread({}, _assignProps2({
+  return _ref9 = sstyled(props.styles), /*#__PURE__*/React.createElement(SPopper, _ref9.cn("SPopper", _objectSpread({}, _assignProps3({
     "role": "region",
     "aria-label": "calendar-container"
-  }, _ref2))));
+  }, _ref3))));
 }
 export function Header(props) {
-  var _ref3 = arguments[0],
-      _ref9;
+  var _ref4 = arguments[0],
+      _ref10;
 
   var SHeader = Box;
-  return _ref9 = sstyled(props.styles), /*#__PURE__*/React.createElement(SHeader, _ref9.cn("SHeader", _objectSpread({}, _assignProps3({}, _ref3))));
+  return _ref10 = sstyled(props.styles), /*#__PURE__*/React.createElement(SHeader, _ref10.cn("SHeader", _objectSpread({}, _assignProps4({}, _ref4))));
 }
-export var Title = function Title(_ref12) {
-  var _ref4 = arguments[0],
-      _ref10;
+export 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 = Box;
-  return _ref10 = sstyled(styles), /*#__PURE__*/React.createElement(STitle, _ref10.cn("STitle", _objectSpread({}, _assignProps4({}, _ref4))), /*#__PURE__*/React.createElement(Children, _ref10.cn("Children", {})));
+  return _ref11 = sstyled(styles), /*#__PURE__*/React.createElement(STitle, _ref11.cn("STitle", _objectSpread({}, _assignProps5({}, _ref5))), /*#__PURE__*/React.createElement(Children, _ref11.cn("Children", {})));
 };
 export function Prev() {
-  var _ref5 = arguments[0];
-  return /*#__PURE__*/React.createElement(Button, _assignProps5({
+  var _ref6 = arguments[0];
+  return /*#__PURE__*/React.createElement(Button, _assignProps6({
     "use": "tertiary",
     "theme": "muted",
     "size": "l",
     "tabIndex": -1,
     "aria-label": "Prev period"
-  }, _ref5));
+  }, _ref6));
 }
 Prev.defaultProps = {
   children: /*#__PURE__*/React.createElement(ChevronLeft, null)
 };
 export function Next() {
-  var _ref6 = arguments[0];
-  return /*#__PURE__*/React.createElement(Button, _assignProps6({
+  var _ref7 = arguments[0];
+  return /*#__PURE__*/React.createElement(Button, _assignProps7({
     "use": "tertiary",
     "theme": "muted",
     "size": "l",
     "tabIndex": -1,
     "aria-label": "Next period"
-  }, _ref6));
+  }, _ref7));
 }
 Next.defaultProps = {
   children: /*#__PURE__*/React.createElement(ChevronRight, null)
@@ -96,12 +114,12 @@ var stylesBtn = (
 /*__reshadow_css_start__*/
 sstyled.insert(
 /*__inner_css_start__*/
-"\n  .___SInner_wlun7_gg_ {\n    justify-content: flex-start;\n  }\n"
+".___SInner_1j7ls_gg_{justify-content:flex-start}"
 /*__inner_css_end__*/
-, "wlun7_gg_")
+, "1j7ls_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SInner": "___SInner_wlun7_gg_"
+  "__SInner": "___SInner_1j7ls_gg_"
 });
 export var Period = /*#__PURE__*/function (_Component) {
   _inherits(Period, _Component);
@@ -143,8 +161,8 @@ export var Period = /*#__PURE__*/function (_Component) {
   _createClass(Period, [{
     key: "render",
     value: function render() {
-      var _ref7 = this.asProps,
-          _ref11,
+      var _ref8 = this.asProps,
+          _ref12,
           _this2 = this;
 
       var SPeriod = Box;
@@ -155,12 +173,12 @@ export var Period = /*#__PURE__*/function (_Component) {
           periods = _this$asProps.periods,
           onHighlightedChange = _this$asProps.onHighlightedChange,
           onDisplayedPeriodChange = _this$asProps.onDisplayedPeriodChange;
-      return _ref11 = sstyled(styles), /*#__PURE__*/React.createElement(SPeriod, _ref11.cn("SPeriod", _objectSpread({}, _assignProps7({}, _ref7))), periods.map(function (_ref13, i) {
-        var period = _ref13.value,
-            onClick = _ref13.onClick,
-            onMouseEnter = _ref13.onMouseEnter,
-            onMouseLeave = _ref13.onMouseLeave,
-            other = _objectWithoutProperties(_ref13, _excluded);
+      return _ref12 = sstyled(styles), /*#__PURE__*/React.createElement(SPeriod, _ref12.cn("SPeriod", _objectSpread({}, _assignProps8({}, _ref8))), periods.map(function (_ref14, i) {
+        var period = _ref14.value,
+            onClick = _ref14.onClick,
+            onMouseEnter = _ref14.onMouseEnter,
+            onMouseLeave = _ref14.onMouseLeave,
+            other = _objectWithoutProperties(_ref14, _excluded);
 
         return /*#__PURE__*/React.createElement(Button, _extends({
           use: "tertiary",

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","dayjs","Component","Root","sstyled","Dropdown","Box","Button","ChevronLeft","ChevronRight","callAllEventHandlers","ButtonTrigger","Trigger","Popper","props","SPopper","styles","Header","SHeader","Title","Children","STitle","Prev","defaultProps","children","Next","stylesBtn","Period","period","value","compareMonth","monthOne","monthTwo","isSame","Array","isArray","length","SPeriod","asProps","onChange","periods","onHighlightedChange","onDisplayedPeriodChange","map","i","onClick","onMouseEnter","onMouseLeave","other","getActiveControl","toDate","Date"],"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":["React","dayjs","Component","Root","sstyled","Dropdown","Box","Button","ChevronLeft","ChevronRight","callAllEventHandlers","ButtonTrigger","InputTriggerBase","Trigger","InputTrigger","Indicator","MaskedInput","Addon","SingleDateInput","DateRange","DateRangeFromInput","DateRangeToInput","Popper","props","SPopper","styles","Header","SHeader","Title","Children","STitle","Prev","defaultProps","children","Next","stylesBtn","Period","period","value","compareMonth","monthOne","monthTwo","isSame","Array","isArray","length","SPeriod","asProps","onChange","periods","onHighlightedChange","onDisplayedPeriodChange","map","i","onClick","onMouseEnter","onMouseLeave","other","getActiveControl","toDate","Date"],"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/es6/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/es6/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/types/index.d.ts

@@ -1,4 +1,4 @@
-import React, { ComponentProps } from 'react';
+import React, { ChangeEvent, ComponentProps } from 'react';
 import dayjs from 'dayjs';
 import { Box, IBoxProps } from '@semcore/flex-box';
 import Button from '@semcore/button';
@@ -6,6 +6,8 @@ import { CProps, Merge, PropGetterFn, ReturnEl } from '@semcore/core';
 import Dropdown, { IDropdownProps } from '@semcore/dropdown';
 import { IWithI18nEnhanceProps } from '@semcore/utils/lib/enhances/i18nEnhance';
 import BaseTrigger from '@semcore/base-trigger';
+import Input from '@semcore/input';
+import InputMask from '@semcore/input-mask';
 
 export type DateConstructorParams = string | number | Date;
 
@@ -17,7 +19,7 @@ export interface ICalendarProps extends IBoxProps {
   locale?: NavigatorLanguage['language'];
   /**
    * Array of dates blocked for selection
-   * Accepts the date, the range of dates or `falsICalendarPropse` for specifying infinity ([Date | false, Date | false]), crontab( 6,7)
+   * Accepts the date or the range of dates for specifying infinity ([Date | false, Date | false]), crontab(6,7)
    * */
   disabled?: (Date | (Date | false)[] | string)[];
   /**
@@ -225,15 +227,69 @@ export interface IDatePickerHandlers {
   visible: (index: boolean) => void;
 }
 
+export interface IInputTriggerProps {
+  value: Date;
+  /**
+   * Date input placeholder characters
+   * @default { year: 'Y'; month: 'M'; day: 'D' }
+   */
+  placeholders: { year: string; month: string; day: string };
+  onChange: (date: Date, event: ChangeEvent) => void;
+  locale: string;
+  onDisplayedPeriodChange: (date: Date) => void;
+}
+
+export interface ISingleDateInputProps extends IInputTriggerProps {}
+
+export interface IDateRangeProps extends IInputTriggerProps {}
+
+export interface IDatePickerMaskedInputProps {
+  date: Date;
+  onDateChange: (date: Date, event: ChangeEvent) => void;
+  onDisplayedPeriodChange: (date: Date) => void;
+  locale: string;
+  parts: { year: Boolean; month: Boolean; day: Boolean };
+  disabledDates: (Date | (Date | false)[] | string)[];
+}
+
+declare const InputTrigger: (<T>(
+  props: Merge<ComponentProps<typeof Dropdown.Trigger>, IInputTriggerProps> & T,
+) => ReturnEl) & {
+  Addon: typeof Input.Addon;
+  Value: typeof Input.Value;
+  SingleDateInput: (<T>(
+    props: Merge<ComponentProps<typeof InputMask>, ISingleDateInputProps> & T,
+  ) => ReturnEl) & {
+    Indicator: typeof Input.Addon;
+    MaskedInput: <T>(
+      props: Merge<ComponentProps<typeof InputMask.Value>, IDatePickerMaskedInputProps> & T,
+    ) => ReturnEl;
+  };
+  DateRange: (<T>(
+    props: Merge<ComponentProps<typeof InputMask>, IDateRangeProps> & T,
+  ) => ReturnEl) & {
+    Indicator: typeof Input.Addon;
+    RangeSep: typeof Input.Addon;
+    FromMaskedInput: <T>(
+      props: Merge<ComponentProps<typeof InputMask.Value>, IDatePickerMaskedInputProps> & T,
+    ) => ReturnEl;
+    ToMaskedInput: <T>(
+      props: Merge<ComponentProps<typeof InputMask.Value>, IDatePickerMaskedInputProps> & T,
+    ) => ReturnEl;
+  };
+};
+
 declare const DatePicker: ((
   props: CProps<IDatePickerProps, IDatePickerContext & ICalendarDaysContext, IDatePickerHandlers>,
 ) => ReturnEl) & {
+  /** @deprecated `DatePicker.Trigger` is deprecated, consider migrating to `DatePicker.InputTrigger` instead */
   Trigger: (<T>(
     props: Merge<ComponentProps<typeof Dropdown.Trigger>, ComponentProps<typeof BaseTrigger>> & T,
   ) => ReturnEl) & {
     Addon: typeof BaseTrigger.Addon;
     Text: typeof BaseTrigger.Text;
   };
+  InputTrigger: InputTrigger;
   Popper: typeof Dropdown.Popper;
   Header: typeof Box;
   Title: <T>(props: CProps<IDatePickerProps & IBoxProps & T, IDatePickerContext>) => ReturnEl;
@@ -263,12 +319,14 @@ declare const DateRangePicker: ((
     IDatePickerHandlers
   >,
 ) => ReturnEl) & {
+  /** @deprecated `DatePicker.Trigger` is deprecated, consider migrating to `DatePicker.InputTrigger` instead */
   Trigger: (<T>(
     props: Merge<ComponentProps<typeof Dropdown.Trigger>, ComponentProps<typeof BaseTrigger>> & T,
   ) => ReturnEl) & {
     Addon: typeof BaseTrigger.Addon;
     Text: typeof BaseTrigger.Text;
   };
+  InputTrigger: InputTrigger;
   Popper: <T>(props: ComponentProps<typeof Dropdown.Popper> & T) => ReturnEl;
   Header: typeof Box;
   Title: <T>(
@@ -301,12 +359,14 @@ declare const MonthPicker: ((
     IDatePickerHandlers
   >,
 ) => ReturnEl) & {
+  /** @deprecated `DatePicker.Trigger` is deprecated, consider migrating to `DatePicker.InputTrigger` instead */
   Trigger: (<T>(
     props: Merge<ComponentProps<typeof Dropdown.Trigger>, ComponentProps<typeof BaseTrigger>> & T,
   ) => ReturnEl) & {
     Addon: typeof BaseTrigger.Addon;
     Text: typeof BaseTrigger.Text;
   };
+  InputTrigger: InputTrigger;
   Popper: typeof Dropdown.Popper;
   Header: typeof Box;
   Title: <T>(props: CProps<IDatePickerProps & IBoxProps & T, IMonthPickerContext>) => ReturnEl;
@@ -335,12 +395,14 @@ declare const MonthRangePicker: ((
     IDatePickerHandlers
   >,
 ) => ReturnEl) & {
+  /** @deprecated `DatePicker.Trigger` is deprecated, consider migrating to `DatePicker.InputTrigger` instead */
   Trigger: (<T>(
     props: Merge<ComponentProps<typeof Dropdown.Trigger>, ComponentProps<typeof BaseTrigger>> & T,
   ) => ReturnEl) & {
     Addon: typeof BaseTrigger.Addon;
     Text: typeof BaseTrigger.Text;
   };
+  InputTrigger: InputTrigger;
   Popper: typeof Dropdown.Popper;
   Header: typeof Box;
   Title: <T>(

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@semcore/date-picker",
   "description": "Semrush DatePicker Component",
-  "version": "3.4.5",
+  "version": "3.4.7",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
@@ -11,16 +11,19 @@
   "dependencies": {
     "@semcore/utils": "^3.29",
     "@semcore/base-trigger": "^3.0.0",
-    "@semcore/flex-box": "^4",
     "@semcore/button": "^4",
     "@semcore/divider": "^3",
-    "@semcore/icon": "2.16 - 3",
     "@semcore/dropdown": "^3",
+    "@semcore/flex-box": "^4",
+    "@semcore/icon": "2.16 - 3",
+    "@semcore/input": "^3.0.15",
+    "@semcore/input-mask": "^4.3.2",
+    "@semcore/neighbor-location": "^3",
     "@semcore/typography": "^4",
     "dayjs": "1.8.36"
   },
   "peerDependencies": {
-    "@semcore/core": "^1.12",
+    "@semcore/core": "^1.11",
     "react": "16.8 - 18"
   },
   "jest": {
@@ -34,7 +37,9 @@
   "devDependencies": {
     "@types/react": "18.0.21",
     "@semcore/jest-preset-ui": "1.0.0",
-    "jest": "29.0.1"
+    "jest": "29.0.1",
+    "@guidepup/playwright": "0.6.1",
+    "@playwright/test": "1.25.1"
   },
   "scripts": {
     "build": "pnpm semcore-builder --source=js",