@os-design/core 1.0.161 → 1.0.163

package/dist/cjs/DatePicker/DatePickerCalendar.js

@@ -12,7 +12,7 @@ var _styles = require("@os-design/styles");
 var _theming = require("@os-design/theming");
 var _react = _interopRequireWildcard(require("react"));
 var _Button = _interopRequireDefault(require("../Button"));
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -62,9 +62,26 @@ var SelectedDay = (0, _styled["default"])(Day)(_templateObject8 || (_templateObj
 }, function (p) {
   return (0, _theming.clr)(p.theme.datePickerSelectedDayColorText);
 });
+var DayInRange = (0, _styled["default"])(Day)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  background-color: ", ";\n"])), function (p) {
+  return (0, _theming.clr)([].concat(_toConsumableArray(p.theme.colorText.slice(0, 3)), [(p.theme.colorText[3] || 1) * 0.05]));
+});
+var createDate = function createDate(date, time) {
+  var d = new Date(0);
+  d.setFullYear(date.getFullYear());
+  d.setMonth(date.getMonth());
+  d.setDate(date.getDate());
+  d.setHours(0);
+  d.setMinutes(0);
+  if (time) {
+    d.setHours(time.getHours());
+    d.setMinutes(time.getMinutes());
+  }
+  return d;
+};
 var DatePickerCalendar = function DatePickerCalendar(_ref) {
   var firstDayOfWeek = _ref.firstDayOfWeek,
     locale = _ref.locale,
+    range = _ref.range,
     value = _ref.value,
     _ref$onChange = _ref.onChange,
     onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange;
@@ -72,19 +89,22 @@ var DatePickerCalendar = function DatePickerCalendar(_ref) {
   (0, _react.useEffect)(function () {
     valueRef.current = value;
   }, [value]);
+  var rangeStartedRef = (0, _react.useRef)(false);
   var changeHandler = (0, _react.useCallback)(function (date) {
-    var d = new Date(0);
-    d.setFullYear(date.getFullYear());
-    d.setMonth(date.getMonth());
-    d.setDate(date.getDate());
-    d.setHours(0);
-    d.setMinutes(0);
-    if (valueRef.current) {
-      d.setHours(valueRef.current.getHours());
-      d.setMinutes(valueRef.current.getMinutes());
+    if (range) {
+      var dateWithoutTime = createDate(date);
+      var dateIndex = rangeStartedRef.current ? 1 : 0;
+      var nextValue = valueRef.current && Array.isArray(valueRef.current) && rangeStartedRef.current ? valueRef.current.map(function (item, index) {
+        return index === dateIndex ? createDate(date, item) : new Date(item.getTime());
+      }).sort(function (a, b) {
+        return a.getTime() - b.getTime();
+      }) : [dateWithoutTime, dateWithoutTime];
+      rangeStartedRef.current = !rangeStartedRef.current;
+      onChange(nextValue);
+    } else if (!Array.isArray(valueRef.current)) {
+      onChange(createDate(date, valueRef.current));
     }
-    onChange(d);
-  }, [onChange]);
+  }, [onChange, range]);
   var changeHandlerRef = (0, _react.useRef)(changeHandler);
   (0, _react.useEffect)(function () {
     changeHandlerRef.current = changeHandler;
@@ -148,6 +168,11 @@ var DatePickerCalendar = function DatePickerCalendar(_ref) {
         key: date.toISOString()
       }, getDayProps(date)), date.getDate());
     }
+    if (type === 'dayInRange') {
+      return /*#__PURE__*/_react["default"].createElement(DayInRange, _extends({
+        key: date.toISOString()
+      }, getDayProps(date)), date.getDate());
+    }
     if (type === 'today') {
       return /*#__PURE__*/_react["default"].createElement(Today, _extends({
         key: date.toISOString()

package/dist/cjs/DatePicker/DatePickerCalendar.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePickerCalendar.js","names":["MonthContainer","styled","div","Month","ellipsisStyles","Calendar","p","theme","datePickerCellSize","DayOfWeek","clr","datePickerDayOfWeekColorText","sizes","small","Day","resetFocusStyles","datePickerDaySize","borderRadius","datePickerDayColorBgHover","datePickerDayColorTextHover","transitionStyles","DayAnotherMonth","datePickerDayAnotherMonthColorText","Today","datePickerTodayColorBg","datePickerTodayColorText","datePickerTodayColorBorder","SelectedDay","datePickerSelectedDayColorBg","datePickerSelectedDayColorText","DatePickerCalendar","firstDayOfWeek","locale","value","onChange","valueRef","useRef","useEffect","current","changeHandler","useCallback","date","d","Date","setFullYear","getFullYear","setMonth","getMonth","setDate","getDate","setHours","setMinutes","getHours","getMinutes","changeHandlerRef","useDatePickerCalendar","selectedMonth","updateMonth","days","getDayProps","tabIndex","role","getAccessibilityDateLabel","onClick","onKeyDown","e","includes","key","preventDefault","onMouseDown","prevMonthLabel","months","month","year","nextMonthLabel","shortDaysOfWeek","slice","map","item","type","toISOString"],"sources":["../../../src/DatePicker/DatePickerCalendar.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport {\n  DatePickerLocale,\n  getAccessibilityDateLabel,\n  useDatePickerCalendar,\n} from '@os-design/date-picker-utils';\nimport { Left, Right } from '@os-design/icons';\nimport {\n  ellipsisStyles,\n  resetFocusStyles,\n  transitionStyles,\n} from '@os-design/styles';\nimport { clr } from '@os-design/theming';\nimport React, { HTMLAttributes, useCallback, useEffect, useRef } from 'react';\nimport Button from '../Button';\n\ninterface DatePickerCalendarProps {\n  firstDayOfWeek: 'sunday' | 'monday';\n  locale: DatePickerLocale;\n  value?: Date | null;\n  onChange?: (value: Date) => void;\n}\n\nconst MonthContainer = styled.div`\n  display: flex;\n  align-items: center;\n  margin-bottom: 0.5em;\n`;\n\nconst Month = styled.div`\n  flex-grow: 1;\n  font-weight: 500;\n  text-align: center;\n  padding: 0 0.4em;\n  ${ellipsisStyles};\n`;\n\nconst Calendar = styled.div`\n  display: grid;\n  grid-template-columns: repeat(7, ${(p) => p.theme.datePickerCellSize}em);\n  grid-auto-rows: ${(p) => p.theme.datePickerCellSize}em;\n  justify-content: space-between;\n  overflow-x: auto;\n`;\n\nconst DayOfWeek = styled.div`\n  justify-self: center;\n  align-self: center;\n  color: ${(p) => clr(p.theme.datePickerDayOfWeekColorText)};\n  font-size: ${(p) => p.theme.sizes.small}em;\n`;\n\nconst Day = styled.div`\n  ${resetFocusStyles};\n  justify-self: center;\n  align-self: center;\n\n  width: ${(p) => p.theme.datePickerDaySize}em;\n  height: ${(p) => p.theme.datePickerDaySize}em;\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  border-radius: ${(p) => p.theme.borderRadius}em;\n  cursor: pointer;\n\n  @media (hover: hover) {\n    &:hover,\n    &:focus {\n      background-color: ${(p) => clr(p.theme.datePickerDayColorBgHover)};\n      color: ${(p) => clr(p.theme.datePickerDayColorTextHover)};\n    }\n  }\n\n  ${transitionStyles('background-color', 'color')};\n`;\n\nconst DayAnotherMonth = styled(Day)`\n  color: ${(p) => clr(p.theme.datePickerDayAnotherMonthColorText)};\n`;\n\nconst Today = styled(Day)`\n  background-color: ${(p) => clr(p.theme.datePickerTodayColorBg)};\n  color: ${(p) => clr(p.theme.datePickerTodayColorText)};\n  border: 1px solid ${(p) => clr(p.theme.datePickerTodayColorBorder)};\n  box-sizing: border-box;\n`;\n\nconst SelectedDay = styled(Day)`\n  background-color: ${(p) => clr(p.theme.datePickerSelectedDayColorBg)};\n  color: ${(p) => clr(p.theme.datePickerSelectedDayColorText)};\n`;\n\nconst DatePickerCalendar: React.FC<DatePickerCalendarProps> = ({\n  firstDayOfWeek,\n  locale,\n  value,\n  onChange = () => {},\n}) => {\n  const valueRef = useRef(value);\n  useEffect(() => {\n    valueRef.current = value;\n  }, [value]);\n\n  const changeHandler = useCallback(\n    (date: Date) => {\n      const d = new Date(0);\n      d.setFullYear(date.getFullYear());\n      d.setMonth(date.getMonth());\n      d.setDate(date.getDate());\n      d.setHours(0);\n      d.setMinutes(0);\n      if (valueRef.current) {\n        d.setHours(valueRef.current.getHours());\n        d.setMinutes(valueRef.current.getMinutes());\n      }\n      onChange(d);\n    },\n    [onChange]\n  );\n\n  const changeHandlerRef = useRef(changeHandler);\n  useEffect(() => {\n    changeHandlerRef.current = changeHandler;\n  }, [changeHandler]);\n\n  const { selectedMonth, updateMonth, days } = useDatePickerCalendar({\n    value,\n    firstDayOfWeek,\n  });\n\n  const getDayProps = useCallback<\n    (date: Date) => HTMLAttributes<HTMLDivElement>\n  >(\n    (date: Date) => ({\n      tabIndex: 0,\n      role: 'button',\n      'aria-label': getAccessibilityDateLabel(date, locale),\n      onClick: () => {\n        changeHandlerRef.current(date);\n      },\n      onKeyDown: (e) => {\n        if (['Enter', ' '].includes(e.key)) {\n          changeHandlerRef.current(date);\n          e.preventDefault();\n        }\n      },\n      onMouseDown: (e) => e.preventDefault(),\n    }),\n    [locale]\n  );\n\n  return (\n    <>\n      <MonthContainer>\n        <Button\n          type='ghost'\n          wide='never'\n          size='small'\n          onClick={() => updateMonth(-1)}\n          aria-label={locale.prevMonthLabel}\n        >\n          <Left />\n        </Button>\n        <Month>\n          {locale.months[selectedMonth.month]} {selectedMonth.year}\n        </Month>\n        <Button\n          type='ghost'\n          wide='never'\n          size='small'\n          onClick={() => updateMonth(1)}\n          aria-label={locale.nextMonthLabel}\n        >\n          <Right />\n        </Button>\n      </MonthContainer>\n\n      <Calendar>\n        {(firstDayOfWeek === 'sunday'\n          ? locale.shortDaysOfWeek\n          : [...locale.shortDaysOfWeek.slice(1), locale.shortDaysOfWeek[0]]\n        ).map((item) => (\n          <DayOfWeek key={item}>{item}</DayOfWeek>\n        ))}\n\n        {days.map(({ type, date }) => {\n          if (type === 'dayAnotherMonth') {\n            return (\n              <DayAnotherMonth key={date.toISOString()} {...getDayProps(date)}>\n                {date.getDate()}\n              </DayAnotherMonth>\n            );\n          }\n          if (type === 'selectedDay') {\n            return (\n              <SelectedDay key={date.toISOString()} {...getDayProps(date)}>\n                {date.getDate()}\n              </SelectedDay>\n            );\n          }\n          if (type === 'today') {\n            return (\n              <Today key={date.toISOString()} {...getDayProps(date)}>\n                {date.getDate()}\n              </Today>\n            );\n          }\n          return (\n            <Day key={date.toISOString()} {...getDayProps(date)}>\n              {date.getDate()}\n            </Day>\n          );\n        })}\n      </Calendar>\n    </>\n  );\n};\n\nexport default DatePickerCalendar;\n"],"mappings":"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"}
+{"version":3,"file":"DatePickerCalendar.js","names":["MonthContainer","styled","div","Month","ellipsisStyles","Calendar","p","theme","datePickerCellSize","DayOfWeek","clr","datePickerDayOfWeekColorText","sizes","small","Day","resetFocusStyles","datePickerDaySize","borderRadius","datePickerDayColorBgHover","datePickerDayColorTextHover","transitionStyles","DayAnotherMonth","datePickerDayAnotherMonthColorText","Today","datePickerTodayColorBg","datePickerTodayColorText","datePickerTodayColorBorder","SelectedDay","datePickerSelectedDayColorBg","datePickerSelectedDayColorText","DayInRange","colorText","slice","createDate","date","time","d","Date","setFullYear","getFullYear","setMonth","getMonth","setDate","getDate","setHours","setMinutes","getHours","getMinutes","DatePickerCalendar","firstDayOfWeek","locale","range","value","onChange","valueRef","useRef","useEffect","current","rangeStartedRef","changeHandler","useCallback","dateWithoutTime","dateIndex","nextValue","Array","isArray","map","item","index","getTime","sort","a","b","changeHandlerRef","useDatePickerCalendar","selectedMonth","updateMonth","days","getDayProps","tabIndex","role","getAccessibilityDateLabel","onClick","onKeyDown","e","includes","key","preventDefault","onMouseDown","prevMonthLabel","months","month","year","nextMonthLabel","shortDaysOfWeek","type","toISOString"],"sources":["../../../src/DatePicker/DatePickerCalendar.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport {\n  DatePickerLocale,\n  getAccessibilityDateLabel,\n  useDatePickerCalendar,\n} from '@os-design/date-picker-utils';\nimport { Left, Right } from '@os-design/icons';\nimport {\n  ellipsisStyles,\n  resetFocusStyles,\n  transitionStyles,\n} from '@os-design/styles';\nimport { clr, Color } from '@os-design/theming';\nimport React, { HTMLAttributes, useCallback, useEffect, useRef } from 'react';\nimport Button from '../Button';\n\ninterface DatePickerCalendarProps {\n  firstDayOfWeek: 'sunday' | 'monday';\n  locale: DatePickerLocale;\n  range: boolean;\n  value?: Date | [Date, Date] | null;\n  onChange?: (value: Date | [Date, Date]) => void;\n}\n\nconst MonthContainer = styled.div`\n  display: flex;\n  align-items: center;\n  margin-bottom: 0.5em;\n`;\n\nconst Month = styled.div`\n  flex-grow: 1;\n  font-weight: 500;\n  text-align: center;\n  padding: 0 0.4em;\n  ${ellipsisStyles};\n`;\n\nconst Calendar = styled.div`\n  display: grid;\n  grid-template-columns: repeat(7, ${(p) => p.theme.datePickerCellSize}em);\n  grid-auto-rows: ${(p) => p.theme.datePickerCellSize}em;\n  justify-content: space-between;\n  overflow-x: auto;\n`;\n\nconst DayOfWeek = styled.div`\n  justify-self: center;\n  align-self: center;\n  color: ${(p) => clr(p.theme.datePickerDayOfWeekColorText)};\n  font-size: ${(p) => p.theme.sizes.small}em;\n`;\n\nconst Day = styled.div`\n  ${resetFocusStyles};\n  justify-self: center;\n  align-self: center;\n\n  width: ${(p) => p.theme.datePickerDaySize}em;\n  height: ${(p) => p.theme.datePickerDaySize}em;\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  border-radius: ${(p) => p.theme.borderRadius}em;\n  cursor: pointer;\n\n  @media (hover: hover) {\n    &:hover,\n    &:focus {\n      background-color: ${(p) => clr(p.theme.datePickerDayColorBgHover)};\n      color: ${(p) => clr(p.theme.datePickerDayColorTextHover)};\n    }\n  }\n\n  ${transitionStyles('background-color', 'color')};\n`;\n\nconst DayAnotherMonth = styled(Day)`\n  color: ${(p) => clr(p.theme.datePickerDayAnotherMonthColorText)};\n`;\n\nconst Today = styled(Day)`\n  background-color: ${(p) => clr(p.theme.datePickerTodayColorBg)};\n  color: ${(p) => clr(p.theme.datePickerTodayColorText)};\n  border: 1px solid ${(p) => clr(p.theme.datePickerTodayColorBorder)};\n  box-sizing: border-box;\n`;\n\nconst SelectedDay = styled(Day)`\n  background-color: ${(p) => clr(p.theme.datePickerSelectedDayColorBg)};\n  color: ${(p) => clr(p.theme.datePickerSelectedDayColorText)};\n`;\n\nconst DayInRange = styled(Day)`\n  background-color: ${(p) =>\n    clr([\n      ...p.theme.colorText.slice(0, 3),\n      (p.theme.colorText[3] || 1) * 0.05,\n    ] as Color)};\n`;\n\nconst createDate = (date: Date, time?: Date | null) => {\n  const d = new Date(0);\n  d.setFullYear(date.getFullYear());\n  d.setMonth(date.getMonth());\n  d.setDate(date.getDate());\n  d.setHours(0);\n  d.setMinutes(0);\n  if (time) {\n    d.setHours(time.getHours());\n    d.setMinutes(time.getMinutes());\n  }\n  return d;\n};\n\nconst DatePickerCalendar: React.FC<DatePickerCalendarProps> = ({\n  firstDayOfWeek,\n  locale,\n  range,\n  value,\n  onChange = () => {},\n}) => {\n  const valueRef = useRef(value);\n  useEffect(() => {\n    valueRef.current = value;\n  }, [value]);\n\n  const rangeStartedRef = useRef(false);\n\n  const changeHandler = useCallback(\n    (date: Date) => {\n      if (range) {\n        const dateWithoutTime = createDate(date);\n        const dateIndex = rangeStartedRef.current ? 1 : 0;\n        const nextValue =\n          valueRef.current &&\n          Array.isArray(valueRef.current) &&\n          rangeStartedRef.current\n            ? valueRef.current\n                .map((item, index) =>\n                  index === dateIndex\n                    ? createDate(date, item)\n                    : new Date(item.getTime())\n                )\n                .sort((a, b) => a.getTime() - b.getTime())\n            : [dateWithoutTime, dateWithoutTime];\n        rangeStartedRef.current = !rangeStartedRef.current;\n        onChange(nextValue as [Date, Date]);\n      } else if (!Array.isArray(valueRef.current)) {\n        onChange(createDate(date, valueRef.current));\n      }\n    },\n    [onChange, range]\n  );\n\n  const changeHandlerRef = useRef(changeHandler);\n  useEffect(() => {\n    changeHandlerRef.current = changeHandler;\n  }, [changeHandler]);\n\n  const { selectedMonth, updateMonth, days } = useDatePickerCalendar({\n    value,\n    firstDayOfWeek,\n  });\n\n  const getDayProps = useCallback<\n    (date: Date) => HTMLAttributes<HTMLDivElement>\n  >(\n    (date: Date) => ({\n      tabIndex: 0,\n      role: 'button',\n      'aria-label': getAccessibilityDateLabel(date, locale),\n      onClick: () => {\n        changeHandlerRef.current(date);\n      },\n      onKeyDown: (e) => {\n        if (['Enter', ' '].includes(e.key)) {\n          changeHandlerRef.current(date);\n          e.preventDefault();\n        }\n      },\n      onMouseDown: (e) => e.preventDefault(),\n    }),\n    [locale]\n  );\n\n  return (\n    <>\n      <MonthContainer>\n        <Button\n          type='ghost'\n          wide='never'\n          size='small'\n          onClick={() => updateMonth(-1)}\n          aria-label={locale.prevMonthLabel}\n        >\n          <Left />\n        </Button>\n        <Month>\n          {locale.months[selectedMonth.month]} {selectedMonth.year}\n        </Month>\n        <Button\n          type='ghost'\n          wide='never'\n          size='small'\n          onClick={() => updateMonth(1)}\n          aria-label={locale.nextMonthLabel}\n        >\n          <Right />\n        </Button>\n      </MonthContainer>\n\n      <Calendar>\n        {(firstDayOfWeek === 'sunday'\n          ? locale.shortDaysOfWeek\n          : [...locale.shortDaysOfWeek.slice(1), locale.shortDaysOfWeek[0]]\n        ).map((item) => (\n          <DayOfWeek key={item}>{item}</DayOfWeek>\n        ))}\n\n        {days.map(({ type, date }) => {\n          if (type === 'dayAnotherMonth') {\n            return (\n              <DayAnotherMonth key={date.toISOString()} {...getDayProps(date)}>\n                {date.getDate()}\n              </DayAnotherMonth>\n            );\n          }\n          if (type === 'selectedDay') {\n            return (\n              <SelectedDay key={date.toISOString()} {...getDayProps(date)}>\n                {date.getDate()}\n              </SelectedDay>\n            );\n          }\n          if (type === 'dayInRange') {\n            return (\n              <DayInRange key={date.toISOString()} {...getDayProps(date)}>\n                {date.getDate()}\n              </DayInRange>\n            );\n          }\n          if (type === 'today') {\n            return (\n              <Today key={date.toISOString()} {...getDayProps(date)}>\n                {date.getDate()}\n              </Today>\n            );\n          }\n          return (\n            <Day key={date.toISOString()} {...getDayProps(date)}>\n              {date.getDate()}\n            </Day>\n          );\n        })}\n      </Calendar>\n    </>\n  );\n};\n\nexport default DatePickerCalendar;\n"],"mappings":"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"}

package/dist/cjs/DatePicker/index.js

@@ -19,8 +19,8 @@ var _Select = require("../Select");
 var _SelectToggle = require("../Select/SelectToggle");
 var _TimePicker = _interopRequireDefault(require("../TimePicker"));
 var _DatePickerCalendar = _interopRequireDefault(require("./DatePickerCalendar"));
-var _excluded = ["left", "leftHasPadding", "right", "rightHasPadding", "placeholder", "disabled", "format", "firstDayOfWeek", "locale", "showTime", "timeNotation", "value", "defaultValue", "onChange", "size"];
-var _templateObject, _templateObject2;
+var _excluded = ["left", "leftHasPadding", "right", "rightHasPadding", "placeholder", "disabled", "format", "firstDayOfWeek", "locale", "showTime", "timeNotation", "range", "value", "defaultValue", "onChange", "size"];
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -40,7 +40,11 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
 var StyledPopover = (0, _styled["default"])(_Popover["default"])(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding: ", "em;\n"])), function (p) {
   return p.theme.datePickerPadding;
 });
-var TimeContainer = _styled["default"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin-top: 0.5em;\n"])));
+var TimeContainer = _styled["default"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  margin-top: 0.5em;\n"])));
+var Dash = _styled["default"].div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin: 0 0.5em;\n  line-height: ", "em;\n"])), function (p) {
+  return p.theme.baseHeight;
+});
+var StyledTimePicker = (0, _styled["default"])(_TimePicker["default"])(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  width: 2.5em;\n  text-align: center;\n"])));
 
 /**
  * The component to choose a date.
@@ -64,6 +68,8 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     showTime = _ref$showTime === void 0 ? false : _ref$showTime,
     _ref$timeNotation = _ref.timeNotation,
     timeNotation = _ref$timeNotation === void 0 ? '12-hour' : _ref$timeNotation,
+    _ref$range = _ref.range,
+    range = _ref$range === void 0 ? false : _ref$range,
     value = _ref.value,
     defaultValue = _ref.defaultValue,
     onChange = _ref.onChange,
@@ -77,6 +83,7 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     _useState2 = _slicedToArray(_useState, 2),
     opened = _useState2[0],
     setOpened = _useState2[1];
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   var _useForwardedState = (0, _utils.useForwardedState)({
       value: value,
       defaultValue: defaultValue,
@@ -87,7 +94,7 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     setForwardedValue = _useForwardedState2[1];
   var format = (0, _react.useMemo)(function () {
     if (formatFn) return formatFn;
-    return function (date) {
+    var dateToStr = function dateToStr(date) {
       return date.toLocaleString(undefined, _objectSpread({
         year: 'numeric',
         month: '2-digit',
@@ -98,6 +105,11 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
         hour12: timeNotation === '12-hour'
       } : {}));
     };
+    return function (v) {
+      return Array.isArray(v) ? v.map(function (item) {
+        return dateToStr(item);
+      }).join(' - ') : dateToStr(v);
+    };
   }, [formatFn, showTime, timeNotation]);
   var formattedValue = (0, _react.useMemo)(function () {
     if (!forwardedValue) return null;
@@ -108,15 +120,6 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   }, []);
   (0, _utils.useKeyPress)(typeof window !== 'undefined' ? window : undefined, 'Escape', closeHandler);
   var isMinXs = (0, _media.useIsMinWidth)('xs');
-  var calendar = /*#__PURE__*/_react["default"].createElement(_DatePickerCalendar["default"], {
-    firstDayOfWeek: firstDayOfWeek,
-    locale: locale,
-    value: forwardedValue,
-    onChange: function onChange(v) {
-      setForwardedValue(v);
-      if (!showTime) closeHandler();
-    }
-  });
   var valueIsSpecified = (0, _react.useMemo)(function () {
     return formattedValue !== undefined && formattedValue !== null;
   }, [formattedValue]);
@@ -152,11 +155,80 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     if (valueIsSpecified) return false;
     return right ? rightHasPadding : true;
   }, [right, rightHasPadding, valueIsSpecified]);
+  var calendarComponent = (0, _react.useMemo)(function () {
+    return /*#__PURE__*/_react["default"].createElement(_DatePickerCalendar["default"], {
+      firstDayOfWeek: firstDayOfWeek,
+      locale: locale,
+      range: range,
+      value: forwardedValue,
+      onChange: function onChange(v) {
+        setForwardedValue(v);
+        if (!showTime && !range) {
+          closeHandler();
+        }
+      }
+    });
+  }, [closeHandler, firstDayOfWeek, forwardedValue, locale, range, setForwardedValue, showTime]);
+  var secondTimePickerRef = (0, _react.useRef)(null);
+  var tabOnInputComplete = (0, _react.useCallback)(function (e) {
+    var _secondTimePickerRef$;
+    if (e.target.selectionStart < 5) return;
+    (_secondTimePickerRef$ = secondTimePickerRef.current) === null || _secondTimePickerRef$ === void 0 ? void 0 : _secondTimePickerRef$.focus();
+  }, []);
+  var closeOnInputComplete = (0, _react.useCallback)(function (e) {
+    if (e.target.selectionStart < 5) return;
+    closeHandler();
+  }, [closeHandler]);
   var timeComponent = (0, _react.useMemo)(function () {
-    return showTime && forwardedValue ? /*#__PURE__*/_react["default"].createElement(TimeContainer, null, /*#__PURE__*/_react["default"].createElement(_TimePicker["default"], {
+    return showTime && forwardedValue ? /*#__PURE__*/_react["default"].createElement(TimeContainer, null, Array.isArray(forwardedValue) ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(StyledTimePicker, {
+      autoFocus: true,
+      disabled: disabled,
+      notation: timeNotation,
+      containerProps: {
+        style: {
+          width: 'auto'
+        }
+      },
+      value: forwardedValue[0],
+      onChange: function onChange(v) {
+        return setForwardedValue([v, forwardedValue[1]]);
+      },
+      onKeyDown: function onKeyDown(e) {
+        if (disabled) return;
+        if (e.key === 'Enter') {
+          setOpened(!opened);
+        }
+      },
+      onKeyUp: tabOnInputComplete
+    }), /*#__PURE__*/_react["default"].createElement(Dash, null, "\u2013"), /*#__PURE__*/_react["default"].createElement(StyledTimePicker, {
+      ref: secondTimePickerRef,
+      disabled: disabled,
+      notation: timeNotation,
+      containerProps: {
+        style: {
+          width: 'auto'
+        }
+      },
+      value: forwardedValue[1],
+      onChange: function onChange(v) {
+        return setForwardedValue([forwardedValue[0], v]);
+      },
+      onKeyDown: function onKeyDown(e) {
+        if (disabled) return;
+        if (e.key === 'Enter') {
+          setOpened(!opened);
+        }
+      },
+      onKeyUp: closeOnInputComplete
+    })) : /*#__PURE__*/_react["default"].createElement(StyledTimePicker, {
       autoFocus: true,
       disabled: disabled,
       notation: timeNotation,
+      containerProps: {
+        style: {
+          width: 'auto'
+        }
+      },
       value: forwardedValue,
       onChange: setForwardedValue,
       onKeyDown: function onKeyDown(e) {
@@ -164,9 +236,10 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
         if (e.key === 'Enter') {
           setOpened(!opened);
         }
-      }
+      },
+      onKeyUp: closeOnInputComplete
     })) : null;
-  }, [disabled, forwardedValue, opened, setForwardedValue, showTime, timeNotation]);
+  }, [closeOnInputComplete, disabled, forwardedValue, opened, setForwardedValue, showTime, tabOnInputComplete, timeNotation]);
   return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Select.SelectContainer, _extends({
     opened: opened,
     disabled: disabled,
@@ -221,13 +294,14 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     visible: opened,
     onClose: closeHandler,
     size: size
-  }, calendar, timeComponent) : /*#__PURE__*/_react["default"].createElement(_Modal["default"], {
+  }, calendarComponent, timeComponent) : /*#__PURE__*/_react["default"].createElement(_Modal["default"], {
     title: placeholder,
+    header: null,
     footer: null,
     visible: opened,
     onClose: closeHandler,
     size: size
-  }, calendar, timeComponent));
+  }, calendarComponent, timeComponent));
 });
 DatePicker.displayName = 'DatePicker';
 var _default = DatePicker;

package/dist/cjs/DatePicker/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["StyledPopover","styled","Popover","p","theme","datePickerPadding","TimeContainer","div","DatePicker","forwardRef","ref","left","leftHasPadding","right","rightHasPadding","placeholder","disabled","formatFn","format","firstDayOfWeek","locale","defaultLocale","showTime","timeNotation","value","defaultValue","onChange","size","rest","useForwardedRef","containerRef","mergedContainerRef","useState","opened","setOpened","useForwardedState","forwardedValue","setForwardedValue","useMemo","date","toLocaleString","undefined","year","month","day","hour","minute","hour12","formattedValue","closeHandler","useCallback","useKeyPress","window","isMinXs","useIsMinWidth","calendar","v","valueIsSpecified","rightValue","e","stopPropagation","includes","key","current","focus","preventDefault","clearLabel","rightHasPaddingValue","timeComponent","getAccessibilityDateLabel","t","buttonPaddingHorizontal","baseHeight","selectToggleListItemHeight","sizes","small","displayName"],"sources":["../../../src/DatePicker/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport {\n  DatePickerLocale,\n  defaultLocale,\n  getAccessibilityDateLabel,\n} from '@os-design/date-picker-utils';\nimport { Down, Up } from '@os-design/icons';\nimport { useIsMinWidth } from '@os-design/media';\nimport { WithSize } from '@os-design/styles';\nimport { ThemeOverrider } from '@os-design/theming';\nimport {\n  useForwardedRef,\n  useForwardedState,\n  useKeyPress,\n} from '@os-design/utils';\nimport React, { forwardRef, useCallback, useMemo, useState } from 'react';\nimport Button from '../Button';\nimport Modal from '../Modal';\nimport Popover from '../Popover';\nimport { SelectContainer } from '../Select';\nimport {\n  ClearIcon,\n  Content,\n  IconContainer,\n  LeftAddon,\n  Placeholder,\n  RightAddon,\n  Title,\n} from '../Select/SelectToggle';\nimport TimePicker from '../TimePicker';\nimport DatePickerCalendar from './DatePickerCalendar';\n\ntype JsxDivProps = Omit<\n  JSX.IntrinsicElements['div'],\n  'value' | 'defaultValue' | 'onChange' | 'ref'\n>;\nexport interface DatePickerProps extends JsxDivProps, WithSize {\n  /**\n   * The component located on the left side.\n   * @default undefined\n   */\n  left?: React.ReactNode;\n  /**\n   * Adds padding to the left component.\n   * It can be useful when passing an icon or text in the left component.\n   * @default false\n   */\n  leftHasPadding?: boolean;\n  /**\n   * The component located on the right side.\n   * @default undefined\n   */\n  right?: React.ReactNode;\n  /**\n   * Adds padding to the right component.\n   * It can be useful when passing an icon or text in the right component.\n   * @default false\n   */\n  rightHasPadding?: boolean;\n  /**\n   * The placeholder of the date picker.\n   * @default undefined\n   */\n  placeholder?: string;\n  /**\n   * Whether the date picker is disabled.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * The format of the date.\n   * @default undefined\n   */\n  format?: (date: Date) => string;\n  /**\n   * The first day of the week.\n   * @default sunday\n   */\n  firstDayOfWeek?: 'sunday' | 'monday';\n  /**\n   * The locale of the date picker.\n   * @default undefined\n   */\n  locale?: DatePickerLocale;\n  /**\n   * Whether the time is shown.\n   * @default false\n   */\n  showTime?: boolean;\n  /**\n   * The time notation.\n   * @default 12-hour\n   */\n  timeNotation?: '12-hour' | '24-hour';\n  /**\n   * Selected date.\n   * @default undefined\n   */\n  value?: Date | null;\n  /**\n   * The default value.\n   * @default undefined\n   */\n  defaultValue?: Date | null;\n  /**\n   * The change event handler.\n   * @default undefined\n   */\n  onChange?: (value: Date | null) => void;\n}\n\nconst StyledPopover = styled(Popover)`\n  padding: ${(p) => p.theme.datePickerPadding}em;\n`;\n\nconst TimeContainer = styled.div`\n  margin-top: 0.5em;\n`;\n\n/**\n * The component to choose a date.\n */\nconst DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(\n  (\n    {\n      left,\n      leftHasPadding = false,\n      right,\n      rightHasPadding = false,\n      placeholder,\n      disabled = false,\n      format: formatFn,\n      firstDayOfWeek = 'sunday',\n      locale = defaultLocale,\n      showTime = false,\n      timeNotation = '12-hour',\n      value,\n      defaultValue,\n      onChange,\n      size,\n      ...rest\n    },\n    ref\n  ) => {\n    const [containerRef, mergedContainerRef] = useForwardedRef(ref);\n    const [opened, setOpened] = useState(false);\n    const [forwardedValue, setForwardedValue] = useForwardedState({\n      value,\n      defaultValue,\n      onChange,\n    });\n\n    const format = useMemo(() => {\n      if (formatFn) return formatFn;\n      return (date: Date) =>\n        date.toLocaleString(undefined, {\n          year: 'numeric',\n          month: '2-digit',\n          day: '2-digit',\n          ...(showTime\n            ? {\n                hour: '2-digit',\n                minute: '2-digit',\n                hour12: timeNotation === '12-hour',\n              }\n            : {}),\n        });\n    }, [formatFn, showTime, timeNotation]);\n\n    const formattedValue = useMemo(() => {\n      if (!forwardedValue) return null;\n      return format(forwardedValue);\n    }, [forwardedValue, format]);\n\n    const closeHandler = useCallback(() => {\n      setOpened(false);\n    }, []);\n\n    useKeyPress(\n      (typeof window !== 'undefined' ? window : undefined) as EventTarget,\n      'Escape',\n      closeHandler\n    );\n    const isMinXs = useIsMinWidth('xs');\n\n    const calendar = (\n      <DatePickerCalendar\n        firstDayOfWeek={firstDayOfWeek}\n        locale={locale}\n        value={forwardedValue}\n        onChange={(v) => {\n          setForwardedValue(v);\n          if (!showTime) closeHandler();\n        }}\n      />\n    );\n\n    const valueIsSpecified = useMemo(\n      () => formattedValue !== undefined && formattedValue !== null,\n      [formattedValue]\n    );\n\n    const rightValue = useMemo(() => {\n      if (valueIsSpecified) {\n        return (\n          <div aria-hidden>\n            <Button\n              type='ghost'\n              wide='never'\n              size='small'\n              disabled={disabled}\n              onClick={(e) => {\n                setForwardedValue(null);\n                e.stopPropagation();\n              }}\n              onKeyDown={(e) => {\n                if (disabled) return;\n                if (['Enter', ' '].includes(e.key)) {\n                  setForwardedValue(null);\n                  if (!containerRef.current) return;\n                  containerRef.current.focus();\n                  e.preventDefault();\n                  e.stopPropagation();\n                }\n              }}\n              aria-label={locale.clearLabel}\n            >\n              <ClearIcon />\n            </Button>\n          </div>\n        );\n      }\n      return (\n        right || <IconContainer>{opened ? <Up /> : <Down />}</IconContainer>\n      );\n    }, [\n      containerRef,\n      disabled,\n      locale.clearLabel,\n      opened,\n      right,\n      setForwardedValue,\n      valueIsSpecified,\n    ]);\n\n    const rightHasPaddingValue = useMemo(() => {\n      if (valueIsSpecified) return false;\n      return right ? rightHasPadding : true;\n    }, [right, rightHasPadding, valueIsSpecified]);\n\n    const timeComponent = useMemo(\n      () =>\n        showTime && forwardedValue ? (\n          <TimeContainer>\n            <TimePicker\n              autoFocus\n              disabled={disabled}\n              notation={timeNotation}\n              value={forwardedValue}\n              onChange={setForwardedValue}\n              onKeyDown={(e) => {\n                if (disabled) return;\n                if (e.key === 'Enter') {\n                  setOpened(!opened);\n                }\n              }}\n            />\n          </TimeContainer>\n        ) : null,\n      [\n        disabled,\n        forwardedValue,\n        opened,\n        setForwardedValue,\n        showTime,\n        timeNotation,\n      ]\n    );\n\n    return (\n      <>\n        <SelectContainer\n          opened={opened}\n          disabled={disabled}\n          size={size}\n          tabIndex={!disabled ? 0 : -1}\n          onClick={() => {\n            if (disabled) return;\n            setOpened(!opened);\n          }}\n          onKeyDown={(e) => {\n            if (disabled) return;\n            if (['Enter', ' '].includes(e.key)) {\n              setOpened(!opened);\n              e.preventDefault();\n            }\n          }}\n          onMouseDown={(e) => e.preventDefault()}\n          role='combobox'\n          aria-label={\n            forwardedValue\n              ? getAccessibilityDateLabel(forwardedValue, locale)\n              : undefined\n          }\n          aria-disabled={disabled}\n          {...rest}\n          ref={mergedContainerRef}\n        >\n          {left && (\n            <ThemeOverrider\n              overrides={(t) => ({\n                buttonPaddingHorizontal: 0.8,\n                baseHeight: t.selectToggleListItemHeight / t.sizes.small,\n              })}\n            >\n              <LeftAddon hasPadding={leftHasPadding}>{left}</LeftAddon>\n            </ThemeOverrider>\n          )}\n\n          <Content hasLeft={!!left} hasRight={!!right}>\n            {valueIsSpecified ? (\n              <Title disabled={disabled} aria-hidden>\n                {formattedValue}\n              </Title>\n            ) : (\n              <Placeholder>{placeholder}</Placeholder>\n            )}\n          </Content>\n\n          {rightValue && (\n            <ThemeOverrider\n              overrides={(t) => ({\n                buttonPaddingHorizontal: 0.8,\n                baseHeight: t.selectToggleListItemHeight / t.sizes.small,\n              })}\n            >\n              <RightAddon hasPadding={rightHasPaddingValue}>\n                {rightValue}\n              </RightAddon>\n            </ThemeOverrider>\n          )}\n        </SelectContainer>\n\n        {isMinXs ? (\n          <StyledPopover\n            trigger={containerRef}\n            placement='bottom-start'\n            visible={opened}\n            onClose={closeHandler}\n            size={size}\n          >\n            {calendar}\n            {timeComponent}\n          </StyledPopover>\n        ) : (\n          <Modal\n            title={placeholder}\n            footer={null}\n            visible={opened}\n            onClose={closeHandler}\n            size={size}\n          >\n            {calendar}\n            {timeComponent}\n          </Modal>\n        )}\n      </>\n    );\n  }\n);\n\nDatePicker.displayName = 'DatePicker';\n\nexport default DatePicker;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["StyledPopover","styled","Popover","p","theme","datePickerPadding","TimeContainer","div","Dash","baseHeight","StyledTimePicker","TimePicker","DatePicker","forwardRef","ref","left","leftHasPadding","right","rightHasPadding","placeholder","disabled","formatFn","format","firstDayOfWeek","locale","defaultLocale","showTime","timeNotation","range","value","defaultValue","onChange","size","rest","useForwardedRef","containerRef","mergedContainerRef","useState","opened","setOpened","useForwardedState","forwardedValue","setForwardedValue","useMemo","dateToStr","date","toLocaleString","undefined","year","month","day","hour","minute","hour12","v","Array","isArray","map","item","join","formattedValue","closeHandler","useCallback","useKeyPress","window","isMinXs","useIsMinWidth","valueIsSpecified","rightValue","e","stopPropagation","includes","key","current","focus","preventDefault","clearLabel","rightHasPaddingValue","calendarComponent","secondTimePickerRef","useRef","tabOnInputComplete","target","selectionStart","closeOnInputComplete","timeComponent","style","width","getAccessibilityDateLabel","t","buttonPaddingHorizontal","selectToggleListItemHeight","sizes","small","displayName"],"sources":["../../../src/DatePicker/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport {\n  DatePickerLocale,\n  defaultLocale,\n  getAccessibilityDateLabel,\n} from '@os-design/date-picker-utils';\nimport { Down, Up } from '@os-design/icons';\nimport { useIsMinWidth } from '@os-design/media';\nimport { WithSize } from '@os-design/styles';\nimport { ThemeOverrider } from '@os-design/theming';\nimport {\n  useForwardedRef,\n  useForwardedState,\n  useKeyPress,\n} from '@os-design/utils';\nimport React, {\n  forwardRef,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport Button from '../Button';\nimport Modal from '../Modal';\nimport Popover from '../Popover';\nimport { SelectContainer } from '../Select';\nimport {\n  ClearIcon,\n  Content,\n  IconContainer,\n  LeftAddon,\n  Placeholder,\n  RightAddon,\n  Title,\n} from '../Select/SelectToggle';\nimport TimePicker from '../TimePicker';\nimport DatePickerCalendar from './DatePickerCalendar';\n\ntype JsxDivProps = Omit<\n  JSX.IntrinsicElements['div'],\n  'value' | 'defaultValue' | 'onChange' | 'ref'\n>;\ninterface BaseDatePickerProps<T> extends JsxDivProps, WithSize {\n  /**\n   * The component located on the left side.\n   * @default undefined\n   */\n  left?: React.ReactNode;\n  /**\n   * Adds padding to the left component.\n   * It can be useful when passing an icon or text in the left component.\n   * @default false\n   */\n  leftHasPadding?: boolean;\n  /**\n   * The component located on the right side.\n   * @default undefined\n   */\n  right?: React.ReactNode;\n  /**\n   * Adds padding to the right component.\n   * It can be useful when passing an icon or text in the right component.\n   * @default false\n   */\n  rightHasPadding?: boolean;\n  /**\n   * The placeholder of the date picker.\n   * @default undefined\n   */\n  placeholder?: string;\n  /**\n   * Whether the date picker is disabled.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * The format of the date.\n   * @default undefined\n   */\n  format?: (value: T) => string;\n  /**\n   * The first day of the week.\n   * @default sunday\n   */\n  firstDayOfWeek?: 'sunday' | 'monday';\n  /**\n   * The locale of the date picker.\n   * @default undefined\n   */\n  locale?: DatePickerLocale;\n  /**\n   * Whether the time is shown.\n   * @default false\n   */\n  showTime?: boolean;\n  /**\n   * The time notation.\n   * @default 12-hour\n   */\n  timeNotation?: '12-hour' | '24-hour';\n  /**\n   * Selected date.\n   * @default undefined\n   */\n  value?: T | null;\n  /**\n   * The default value.\n   * @default undefined\n   */\n  defaultValue?: T | null;\n  /**\n   * The change event handler.\n   * @default undefined\n   */\n  onChange?: (value: T | null) => void;\n}\ninterface DateNotRangePickerProps extends BaseDatePickerProps<Date> {\n  /**\n   * Whether the value is a range.\n   * @default false\n   */\n  range?: false;\n}\ninterface DateRangePickerProps extends BaseDatePickerProps<[Date, Date]> {\n  /**\n   * Whether the value is a range.\n   * @default false\n   */\n  range: true;\n}\nexport type DatePickerProps = DateNotRangePickerProps | DateRangePickerProps;\n\nconst StyledPopover = styled(Popover)`\n  padding: ${(p) => p.theme.datePickerPadding}em;\n`;\n\nconst TimeContainer = styled.div`\n  display: flex;\n  justify-content: center;\n  margin-top: 0.5em;\n`;\n\nconst Dash = styled.div`\n  margin: 0 0.5em;\n  line-height: ${(p) => p.theme.baseHeight}em;\n`;\n\nconst StyledTimePicker = styled(TimePicker)`\n  width: 2.5em;\n  text-align: center;\n`;\n\n/**\n * The component to choose a date.\n */\nconst DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(\n  (\n    {\n      left,\n      leftHasPadding = false,\n      right,\n      rightHasPadding = false,\n      placeholder,\n      disabled = false,\n      format: formatFn,\n      firstDayOfWeek = 'sunday',\n      locale = defaultLocale,\n      showTime = false,\n      timeNotation = '12-hour',\n      range = false,\n      value,\n      defaultValue,\n      onChange,\n      size,\n      ...rest\n    },\n    ref\n  ) => {\n    const [containerRef, mergedContainerRef] = useForwardedRef(ref);\n    const [opened, setOpened] = useState(false);\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    const [forwardedValue, setForwardedValue] = useForwardedState<any>({\n      value,\n      defaultValue,\n      onChange,\n    });\n\n    const format = useMemo(() => {\n      if (formatFn) return formatFn;\n\n      const dateToStr = (date: Date) =>\n        date.toLocaleString(undefined, {\n          year: 'numeric',\n          month: '2-digit',\n          day: '2-digit',\n          ...(showTime\n            ? {\n                hour: '2-digit',\n                minute: '2-digit',\n                hour12: timeNotation === '12-hour',\n              }\n            : {}),\n        });\n\n      return (v: Date | [Date, Date]) =>\n        Array.isArray(v)\n          ? v.map((item) => dateToStr(item)).join(' - ')\n          : dateToStr(v);\n    }, [formatFn, showTime, timeNotation]);\n\n    const formattedValue = useMemo(() => {\n      if (!forwardedValue) return null;\n      return format(forwardedValue);\n    }, [forwardedValue, format]);\n\n    const closeHandler = useCallback(() => {\n      setOpened(false);\n    }, []);\n\n    useKeyPress(\n      (typeof window !== 'undefined' ? window : undefined) as EventTarget,\n      'Escape',\n      closeHandler\n    );\n    const isMinXs = useIsMinWidth('xs');\n\n    const valueIsSpecified = useMemo(\n      () => formattedValue !== undefined && formattedValue !== null,\n      [formattedValue]\n    );\n\n    const rightValue = useMemo(() => {\n      if (valueIsSpecified) {\n        return (\n          <div aria-hidden>\n            <Button\n              type='ghost'\n              wide='never'\n              size='small'\n              disabled={disabled}\n              onClick={(e) => {\n                setForwardedValue(null);\n                e.stopPropagation();\n              }}\n              onKeyDown={(e) => {\n                if (disabled) return;\n                if (['Enter', ' '].includes(e.key)) {\n                  setForwardedValue(null);\n                  if (!containerRef.current) return;\n                  containerRef.current.focus();\n                  e.preventDefault();\n                  e.stopPropagation();\n                }\n              }}\n              aria-label={locale.clearLabel}\n            >\n              <ClearIcon />\n            </Button>\n          </div>\n        );\n      }\n      return (\n        right || <IconContainer>{opened ? <Up /> : <Down />}</IconContainer>\n      );\n    }, [\n      containerRef,\n      disabled,\n      locale.clearLabel,\n      opened,\n      right,\n      setForwardedValue,\n      valueIsSpecified,\n    ]);\n\n    const rightHasPaddingValue = useMemo(() => {\n      if (valueIsSpecified) return false;\n      return right ? rightHasPadding : true;\n    }, [right, rightHasPadding, valueIsSpecified]);\n\n    const calendarComponent = useMemo(\n      () => (\n        <DatePickerCalendar\n          firstDayOfWeek={firstDayOfWeek}\n          locale={locale}\n          range={range}\n          value={forwardedValue}\n          onChange={(v) => {\n            setForwardedValue(v);\n            if (!showTime && !range) {\n              closeHandler();\n            }\n          }}\n        />\n      ),\n      [\n        closeHandler,\n        firstDayOfWeek,\n        forwardedValue,\n        locale,\n        range,\n        setForwardedValue,\n        showTime,\n      ]\n    );\n\n    const secondTimePickerRef = useRef<HTMLInputElement>(null);\n\n    const tabOnInputComplete = useCallback((e) => {\n      if (e.target.selectionStart < 5) return;\n      secondTimePickerRef.current?.focus();\n    }, []);\n\n    const closeOnInputComplete = useCallback(\n      (e) => {\n        if (e.target.selectionStart < 5) return;\n        closeHandler();\n      },\n      [closeHandler]\n    );\n\n    const timeComponent = useMemo(\n      () =>\n        showTime && forwardedValue ? (\n          <TimeContainer>\n            {Array.isArray(forwardedValue) ? (\n              <>\n                <StyledTimePicker\n                  autoFocus\n                  disabled={disabled}\n                  notation={timeNotation}\n                  containerProps={{ style: { width: 'auto' } }}\n                  value={forwardedValue[0]}\n                  onChange={(v) => setForwardedValue([v, forwardedValue[1]])}\n                  onKeyDown={(e) => {\n                    if (disabled) return;\n                    if (e.key === 'Enter') {\n                      setOpened(!opened);\n                    }\n                  }}\n                  onKeyUp={tabOnInputComplete}\n                />\n                <Dash>–</Dash>\n                <StyledTimePicker\n                  ref={secondTimePickerRef}\n                  disabled={disabled}\n                  notation={timeNotation}\n                  containerProps={{ style: { width: 'auto' } }}\n                  value={forwardedValue[1]}\n                  onChange={(v) => setForwardedValue([forwardedValue[0], v])}\n                  onKeyDown={(e) => {\n                    if (disabled) return;\n                    if (e.key === 'Enter') {\n                      setOpened(!opened);\n                    }\n                  }}\n                  onKeyUp={closeOnInputComplete}\n                />\n              </>\n            ) : (\n              <StyledTimePicker\n                autoFocus\n                disabled={disabled}\n                notation={timeNotation}\n                containerProps={{ style: { width: 'auto' } }}\n                value={forwardedValue}\n                onChange={setForwardedValue}\n                onKeyDown={(e) => {\n                  if (disabled) return;\n                  if (e.key === 'Enter') {\n                    setOpened(!opened);\n                  }\n                }}\n                onKeyUp={closeOnInputComplete}\n              />\n            )}\n          </TimeContainer>\n        ) : null,\n      [\n        closeOnInputComplete,\n        disabled,\n        forwardedValue,\n        opened,\n        setForwardedValue,\n        showTime,\n        tabOnInputComplete,\n        timeNotation,\n      ]\n    );\n\n    return (\n      <>\n        <SelectContainer\n          opened={opened}\n          disabled={disabled}\n          size={size}\n          tabIndex={!disabled ? 0 : -1}\n          onClick={() => {\n            if (disabled) return;\n            setOpened(!opened);\n          }}\n          onKeyDown={(e) => {\n            if (disabled) return;\n            if (['Enter', ' '].includes(e.key)) {\n              setOpened(!opened);\n              e.preventDefault();\n            }\n          }}\n          onMouseDown={(e) => e.preventDefault()}\n          role='combobox'\n          aria-label={\n            forwardedValue\n              ? getAccessibilityDateLabel(forwardedValue, locale)\n              : undefined\n          }\n          aria-disabled={disabled}\n          {...rest}\n          ref={mergedContainerRef}\n        >\n          {left && (\n            <ThemeOverrider\n              overrides={(t) => ({\n                buttonPaddingHorizontal: 0.8,\n                baseHeight: t.selectToggleListItemHeight / t.sizes.small,\n              })}\n            >\n              <LeftAddon hasPadding={leftHasPadding}>{left}</LeftAddon>\n            </ThemeOverrider>\n          )}\n\n          <Content hasLeft={!!left} hasRight={!!right}>\n            {valueIsSpecified ? (\n              <Title disabled={disabled} aria-hidden>\n                {formattedValue}\n              </Title>\n            ) : (\n              <Placeholder>{placeholder}</Placeholder>\n            )}\n          </Content>\n\n          {rightValue && (\n            <ThemeOverrider\n              overrides={(t) => ({\n                buttonPaddingHorizontal: 0.8,\n                baseHeight: t.selectToggleListItemHeight / t.sizes.small,\n              })}\n            >\n              <RightAddon hasPadding={rightHasPaddingValue}>\n                {rightValue}\n              </RightAddon>\n            </ThemeOverrider>\n          )}\n        </SelectContainer>\n\n        {isMinXs ? (\n          <StyledPopover\n            trigger={containerRef}\n            placement='bottom-start'\n            visible={opened}\n            onClose={closeHandler}\n            size={size}\n          >\n            {calendarComponent}\n            {timeComponent}\n          </StyledPopover>\n        ) : (\n          <Modal\n            title={placeholder}\n            header={null}\n            footer={null}\n            visible={opened}\n            onClose={closeHandler}\n            size={size}\n          >\n            {calendarComponent}\n            {timeComponent}\n          </Modal>\n        )}\n      </>\n    );\n  }\n);\n\nDatePicker.displayName = 'DatePicker';\n\nexport default DatePicker;\n"],"mappings":";;;;;;;AAAA;AACA;AAKA;AACA;AAEA;AACA;AAKA;AAOA;AACA;AACA;AACA;AACA;AASA;AACA;AAAsD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgGtD,IAAMA,aAAa,GAAG,IAAAC,kBAAM,EAACC,mBAAO,CAAC,4FACxB,UAACC,CAAC;EAAA,OAAKA,CAAC,CAACC,KAAK,CAACC,iBAAiB;AAAA,EAC5C;AAED,IAAMC,aAAa,GAAGL,kBAAM,CAACM,GAAG,6IAI/B;AAED,IAAMC,IAAI,GAAGP,kBAAM,CAACM,GAAG,sHAEN,UAACJ,CAAC;EAAA,OAAKA,CAAC,CAACC,KAAK,CAACK,UAAU;AAAA,EACzC;AAED,IAAMC,gBAAgB,GAAG,IAAAT,kBAAM,EAACU,sBAAU,CAAC,iHAG1C;;AAED;AACA;AACA;AACA,IAAMC,UAAU,gBAAG,IAAAC,iBAAU,EAC3B,gBAoBEC,GAAG,EACA;EAAA,IAnBDC,IAAI,QAAJA,IAAI;IAAA,2BACJC,cAAc;IAAdA,cAAc,oCAAG,KAAK;IACtBC,KAAK,QAALA,KAAK;IAAA,4BACLC,eAAe;IAAfA,eAAe,qCAAG,KAAK;IACvBC,WAAW,QAAXA,WAAW;IAAA,qBACXC,QAAQ;IAARA,QAAQ,8BAAG,KAAK;IACRC,QAAQ,QAAhBC,MAAM;IAAA,2BACNC,cAAc;IAAdA,cAAc,oCAAG,QAAQ;IAAA,mBACzBC,MAAM;IAANA,MAAM,4BAAGC,8BAAa;IAAA,qBACtBC,QAAQ;IAARA,QAAQ,8BAAG,KAAK;IAAA,yBAChBC,YAAY;IAAZA,YAAY,kCAAG,SAAS;IAAA,kBACxBC,KAAK;IAALA,KAAK,2BAAG,KAAK;IACbC,KAAK,QAALA,KAAK;IACLC,YAAY,QAAZA,YAAY;IACZC,QAAQ,QAARA,QAAQ;IACRC,IAAI,QAAJA,IAAI;IACDC,IAAI;EAIT,uBAA2C,IAAAC,sBAAe,EAACpB,GAAG,CAAC;IAAA;IAAxDqB,YAAY;IAAEC,kBAAkB;EACvC,gBAA4B,IAAAC,eAAQ,EAAC,KAAK,CAAC;IAAA;IAApCC,MAAM;IAAEC,SAAS;EACxB;EACA,yBAA4C,IAAAC,wBAAiB,EAAM;MACjEX,KAAK,EAALA,KAAK;MACLC,YAAY,EAAZA,YAAY;MACZC,QAAQ,EAARA;IACF,CAAC,CAAC;IAAA;IAJKU,cAAc;IAAEC,iBAAiB;EAMxC,IAAMpB,MAAM,GAAG,IAAAqB,cAAO,EAAC,YAAM;IAC3B,IAAItB,QAAQ,EAAE,OAAOA,QAAQ;IAE7B,IAAMuB,SAAS,GAAG,SAAZA,SAAS,CAAIC,IAAU;MAAA,OAC3BA,IAAI,CAACC,cAAc,CAACC,SAAS;QAC3BC,IAAI,EAAE,SAAS;QACfC,KAAK,EAAE,SAAS;QAChBC,GAAG,EAAE;MAAS,GACVxB,QAAQ,GACR;QACEyB,IAAI,EAAE,SAAS;QACfC,MAAM,EAAE,SAAS;QACjBC,MAAM,EAAE1B,YAAY,KAAK;MAC3B,CAAC,GACD,CAAC,CAAC,EACN;IAAA;IAEJ,OAAO,UAAC2B,CAAsB;MAAA,OAC5BC,KAAK,CAACC,OAAO,CAACF,CAAC,CAAC,GACZA,CAAC,CAACG,GAAG,CAAC,UAACC,IAAI;QAAA,OAAKd,SAAS,CAACc,IAAI,CAAC;MAAA,EAAC,CAACC,IAAI,CAAC,KAAK,CAAC,GAC5Cf,SAAS,CAACU,CAAC,CAAC;IAAA;EACpB,CAAC,EAAE,CAACjC,QAAQ,EAAEK,QAAQ,EAAEC,YAAY,CAAC,CAAC;EAEtC,IAAMiC,cAAc,GAAG,IAAAjB,cAAO,EAAC,YAAM;IACnC,IAAI,CAACF,cAAc,EAAE,OAAO,IAAI;IAChC,OAAOnB,MAAM,CAACmB,cAAc,CAAC;EAC/B,CAAC,EAAE,CAACA,cAAc,EAAEnB,MAAM,CAAC,CAAC;EAE5B,IAAMuC,YAAY,GAAG,IAAAC,kBAAW,EAAC,YAAM;IACrCvB,SAAS,CAAC,KAAK,CAAC;EAClB,CAAC,EAAE,EAAE,CAAC;EAEN,IAAAwB,kBAAW,EACR,OAAOC,MAAM,KAAK,WAAW,GAAGA,MAAM,GAAGjB,SAAS,EACnD,QAAQ,EACRc,YAAY,CACb;EACD,IAAMI,OAAO,GAAG,IAAAC,oBAAa,EAAC,IAAI,CAAC;EAEnC,IAAMC,gBAAgB,GAAG,IAAAxB,cAAO,EAC9B;IAAA,OAAMiB,cAAc,KAAKb,SAAS,IAAIa,cAAc,KAAK,IAAI;EAAA,GAC7D,CAACA,cAAc,CAAC,CACjB;EAED,IAAMQ,UAAU,GAAG,IAAAzB,cAAO,EAAC,YAAM;IAC/B,IAAIwB,gBAAgB,EAAE;MACpB,oBACE;QAAK;MAAW,gBACd,gCAAC,kBAAM;QACL,IAAI,EAAC,OAAO;QACZ,IAAI,EAAC,OAAO;QACZ,IAAI,EAAC,OAAO;QACZ,QAAQ,EAAE/C,QAAS;QACnB,OAAO,EAAE,iBAACiD,CAAC,EAAK;UACd3B,iBAAiB,CAAC,IAAI,CAAC;UACvB2B,CAAC,CAACC,eAAe,EAAE;QACrB,CAAE;QACF,SAAS,EAAE,mBAACD,CAAC,EAAK;UAChB,IAAIjD,QAAQ,EAAE;UACd,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,CAACmD,QAAQ,CAACF,CAAC,CAACG,GAAG,CAAC,EAAE;YAClC9B,iBAAiB,CAAC,IAAI,CAAC;YACvB,IAAI,CAACP,YAAY,CAACsC,OAAO,EAAE;YAC3BtC,YAAY,CAACsC,OAAO,CAACC,KAAK,EAAE;YAC5BL,CAAC,CAACM,cAAc,EAAE;YAClBN,CAAC,CAACC,eAAe,EAAE;UACrB;QACF,CAAE;QACF,cAAY9C,MAAM,CAACoD;MAAW,gBAE9B,gCAAC,uBAAS,OAAG,CACN,CACL;IAEV;IACA,OACE3D,KAAK,iBAAI,gCAAC,2BAAa,QAAEqB,MAAM,gBAAG,gCAAC,SAAE,OAAG,gBAAG,gCAAC,WAAI,OAAG,CAAiB;EAExE,CAAC,EAAE,CACDH,YAAY,EACZf,QAAQ,EACRI,MAAM,CAACoD,UAAU,EACjBtC,MAAM,EACNrB,KAAK,EACLyB,iBAAiB,EACjByB,gBAAgB,CACjB,CAAC;EAEF,IAAMU,oBAAoB,GAAG,IAAAlC,cAAO,EAAC,YAAM;IACzC,IAAIwB,gBAAgB,EAAE,OAAO,KAAK;IAClC,OAAOlD,KAAK,GAAGC,eAAe,GAAG,IAAI;EACvC,CAAC,EAAE,CAACD,KAAK,EAAEC,eAAe,EAAEiD,gBAAgB,CAAC,CAAC;EAE9C,IAAMW,iBAAiB,GAAG,IAAAnC,cAAO,EAC/B;IAAA,oBACE,gCAAC,8BAAkB;MACjB,cAAc,EAAEpB,cAAe;MAC/B,MAAM,EAAEC,MAAO;MACf,KAAK,EAAEI,KAAM;MACb,KAAK,EAAEa,cAAe;MACtB,QAAQ,EAAE,kBAACa,CAAC,EAAK;QACfZ,iBAAiB,CAACY,CAAC,CAAC;QACpB,IAAI,CAAC5B,QAAQ,IAAI,CAACE,KAAK,EAAE;UACvBiC,YAAY,EAAE;QAChB;MACF;IAAE,EACF;EAAA,CACH,EACD,CACEA,YAAY,EACZtC,cAAc,EACdkB,cAAc,EACdjB,MAAM,EACNI,KAAK,EACLc,iBAAiB,EACjBhB,QAAQ,CACT,CACF;EAED,IAAMqD,mBAAmB,GAAG,IAAAC,aAAM,EAAmB,IAAI,CAAC;EAE1D,IAAMC,kBAAkB,GAAG,IAAAnB,kBAAW,EAAC,UAACO,CAAC,EAAK;IAAA;IAC5C,IAAIA,CAAC,CAACa,MAAM,CAACC,cAAc,GAAG,CAAC,EAAE;IACjC,yBAAAJ,mBAAmB,CAACN,OAAO,0DAA3B,sBAA6BC,KAAK,EAAE;EACtC,CAAC,EAAE,EAAE,CAAC;EAEN,IAAMU,oBAAoB,GAAG,IAAAtB,kBAAW,EACtC,UAACO,CAAC,EAAK;IACL,IAAIA,CAAC,CAACa,MAAM,CAACC,cAAc,GAAG,CAAC,EAAE;IACjCtB,YAAY,EAAE;EAChB,CAAC,EACD,CAACA,YAAY,CAAC,CACf;EAED,IAAMwB,aAAa,GAAG,IAAA1C,cAAO,EAC3B;IAAA,OACEjB,QAAQ,IAAIe,cAAc,gBACxB,gCAAC,aAAa,QACXc,KAAK,CAACC,OAAO,CAACf,cAAc,CAAC,gBAC5B,+EACE,gCAAC,gBAAgB;MACf,SAAS;MACT,QAAQ,EAAErB,QAAS;MACnB,QAAQ,EAAEO,YAAa;MACvB,cAAc,EAAE;QAAE2D,KAAK,EAAE;UAAEC,KAAK,EAAE;QAAO;MAAE,CAAE;MAC7C,KAAK,EAAE9C,cAAc,CAAC,CAAC,CAAE;MACzB,QAAQ,EAAE,kBAACa,CAAC;QAAA,OAAKZ,iBAAiB,CAAC,CAACY,CAAC,EAAEb,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC;MAAA,CAAC;MAC3D,SAAS,EAAE,mBAAC4B,CAAC,EAAK;QAChB,IAAIjD,QAAQ,EAAE;QACd,IAAIiD,CAAC,CAACG,GAAG,KAAK,OAAO,EAAE;UACrBjC,SAAS,CAAC,CAACD,MAAM,CAAC;QACpB;MACF,CAAE;MACF,OAAO,EAAE2C;IAAmB,EAC5B,eACF,gCAAC,IAAI,iBAAS,eACd,gCAAC,gBAAgB;MACf,GAAG,EAAEF,mBAAoB;MACzB,QAAQ,EAAE3D,QAAS;MACnB,QAAQ,EAAEO,YAAa;MACvB,cAAc,EAAE;QAAE2D,KAAK,EAAE;UAAEC,KAAK,EAAE;QAAO;MAAE,CAAE;MAC7C,KAAK,EAAE9C,cAAc,CAAC,CAAC,CAAE;MACzB,QAAQ,EAAE,kBAACa,CAAC;QAAA,OAAKZ,iBAAiB,CAAC,CAACD,cAAc,CAAC,CAAC,CAAC,EAAEa,CAAC,CAAC,CAAC;MAAA,CAAC;MAC3D,SAAS,EAAE,mBAACe,CAAC,EAAK;QAChB,IAAIjD,QAAQ,EAAE;QACd,IAAIiD,CAAC,CAACG,GAAG,KAAK,OAAO,EAAE;UACrBjC,SAAS,CAAC,CAACD,MAAM,CAAC;QACpB;MACF,CAAE;MACF,OAAO,EAAE8C;IAAqB,EAC9B,CACD,gBAEH,gCAAC,gBAAgB;MACf,SAAS;MACT,QAAQ,EAAEhE,QAAS;MACnB,QAAQ,EAAEO,YAAa;MACvB,cAAc,EAAE;QAAE2D,KAAK,EAAE;UAAEC,KAAK,EAAE;QAAO;MAAE,CAAE;MAC7C,KAAK,EAAE9C,cAAe;MACtB,QAAQ,EAAEC,iBAAkB;MAC5B,SAAS,EAAE,mBAAC2B,CAAC,EAAK;QAChB,IAAIjD,QAAQ,EAAE;QACd,IAAIiD,CAAC,CAACG,GAAG,KAAK,OAAO,EAAE;UACrBjC,SAAS,CAAC,CAACD,MAAM,CAAC;QACpB;MACF,CAAE;MACF,OAAO,EAAE8C;IAAqB,EAEjC,CACa,GACd,IAAI;EAAA,GACV,CACEA,oBAAoB,EACpBhE,QAAQ,EACRqB,cAAc,EACdH,MAAM,EACNI,iBAAiB,EACjBhB,QAAQ,EACRuD,kBAAkB,EAClBtD,YAAY,CACb,CACF;EAED,oBACE,+EACE,gCAAC,uBAAe;IACd,MAAM,EAAEW,MAAO;IACf,QAAQ,EAAElB,QAAS;IACnB,IAAI,EAAEY,IAAK;IACX,QAAQ,EAAE,CAACZ,QAAQ,GAAG,CAAC,GAAG,CAAC,CAAE;IAC7B,OAAO,EAAE,mBAAM;MACb,IAAIA,QAAQ,EAAE;MACdmB,SAAS,CAAC,CAACD,MAAM,CAAC;IACpB,CAAE;IACF,SAAS,EAAE,mBAAC+B,CAAC,EAAK;MAChB,IAAIjD,QAAQ,EAAE;MACd,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,CAACmD,QAAQ,CAACF,CAAC,CAACG,GAAG,CAAC,EAAE;QAClCjC,SAAS,CAAC,CAACD,MAAM,CAAC;QAClB+B,CAAC,CAACM,cAAc,EAAE;MACpB;IACF,CAAE;IACF,WAAW,EAAE,qBAACN,CAAC;MAAA,OAAKA,CAAC,CAACM,cAAc,EAAE;IAAA,CAAC;IACvC,IAAI,EAAC,UAAU;IACf,cACElC,cAAc,GACV,IAAA+C,0CAAyB,EAAC/C,cAAc,EAAEjB,MAAM,CAAC,GACjDuB,SACL;IACD,iBAAe3B;EAAS,GACpBa,IAAI;IACR,GAAG,EAAEG;EAAmB,IAEvBrB,IAAI,iBACH,gCAAC,uBAAc;IACb,SAAS,EAAE,mBAAC0E,CAAC;MAAA,OAAM;QACjBC,uBAAuB,EAAE,GAAG;QAC5BjF,UAAU,EAAEgF,CAAC,CAACE,0BAA0B,GAAGF,CAAC,CAACG,KAAK,CAACC;MACrD,CAAC;IAAA;EAAE,gBAEH,gCAAC,uBAAS;IAAC,UAAU,EAAE7E;EAAe,GAAED,IAAI,CAAa,CAE5D,eAED,gCAAC,qBAAO;IAAC,OAAO,EAAE,CAAC,CAACA,IAAK;IAAC,QAAQ,EAAE,CAAC,CAACE;EAAM,GACzCkD,gBAAgB,gBACf,gCAAC,mBAAK;IAAC,QAAQ,EAAE/C,QAAS;IAAC;EAAW,GACnCwC,cAAc,CACT,gBAER,gCAAC,yBAAW,QAAEzC,WAAW,CAC1B,CACO,EAETiD,UAAU,iBACT,gCAAC,uBAAc;IACb,SAAS,EAAE,mBAACqB,CAAC;MAAA,OAAM;QACjBC,uBAAuB,EAAE,GAAG;QAC5BjF,UAAU,EAAEgF,CAAC,CAACE,0BAA0B,GAAGF,CAAC,CAACG,KAAK,CAACC;MACrD,CAAC;IAAA;EAAE,gBAEH,gCAAC,wBAAU;IAAC,UAAU,EAAEhB;EAAqB,GAC1CT,UAAU,CACA,CAEhB,CACe,EAEjBH,OAAO,gBACN,gCAAC,aAAa;IACZ,OAAO,EAAE9B,YAAa;IACtB,SAAS,EAAC,cAAc;IACxB,OAAO,EAAEG,MAAO;IAChB,OAAO,EAAEuB,YAAa;IACtB,IAAI,EAAE7B;EAAK,GAEV8C,iBAAiB,EACjBO,aAAa,CACA,gBAEhB,gCAAC,iBAAK;IACJ,KAAK,EAAElE,WAAY;IACnB,MAAM,EAAE,IAAK;IACb,MAAM,EAAE,IAAK;IACb,OAAO,EAAEmB,MAAO;IAChB,OAAO,EAAEuB,YAAa;IACtB,IAAI,EAAE7B;EAAK,GAEV8C,iBAAiB,EACjBO,aAAa,CAEjB,CACA;AAEP,CAAC,CACF;AAEDzE,UAAU,CAACkF,WAAW,GAAG,YAAY;AAAC,eAEvBlF,UAAU;AAAA"}

package/dist/cjs/TimePicker/index.js

@@ -133,7 +133,7 @@ var TimePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     maxLength: 5,
     disabled: disabled,
     value: time,
-    right: /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, notation === '12-hour' && /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+    right: (notation === '12-hour' || right) && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, notation === '12-hour' && /*#__PURE__*/_react["default"].createElement(_Button["default"], {
       type: "ghost",
       wide: "never",
       size: "small",

package/dist/cjs/TimePicker/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["pad","n","toString","padStart","HOURS_12","TimePicker","forwardRef","ref","notation","value","defaultValue","onChange","onSelect","onKeyDown","disabled","right","rest","useForwardedRef","inputRef","mergedInputRef","useForwardedState","forwardedValue","setForwardedValue","useState","start","end","selection","setSelection","isPm","useMemo","getHours","setTime","useCallback","time","parseTime","h","m","nextValue","Date","getTime","setHours","setMinutes","setTimeRef","useRef","useEffect","current","hour","minute","getMinutes","changePeriod","nextIsPm","setSelectionRange","keyDownHandler","e","nextCaret","key","metaKey","isDigitKey","pos","replaceChar","preventDefault","currentTarget","selectionStart","selectionEnd","displayName"],"sources":["../../../src/TimePicker/index.tsx"],"sourcesContent":["import {\n  isDigitKey,\n  replaceChar,\n  parseTime,\n} from '@os-design/time-picker-utils';\nimport { useForwardedRef, useForwardedState } from '@os-design/utils';\nimport React, {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport Button from '../Button';\nimport Input, { InputProps } from '../Input';\n\nexport interface TimePickerProps\n  extends Omit<InputProps, 'type' | 'value' | 'defaultValue' | 'onChange'> {\n  /**\n   * The time notation.\n   * @default 12-hour\n   */\n  notation?: '12-hour' | '24-hour';\n  /**\n   * The selected date.\n   * @default undefined\n   */\n  value?: Date;\n  /**\n   * The default value.\n   * @default undefined\n   */\n  defaultValue?: Date;\n  /**\n   * The change event handler.\n   * @default undefined\n   */\n  onChange?: (value: Date) => void;\n}\n\ninterface Selection {\n  start: number;\n  end: number;\n}\n\nconst pad = (n: number) => n.toString().padStart(2, '0');\nconst HOURS_12 = 12 * 60 * 60 * 1000;\n\n/**\n * The component to choose a time.\n */\nconst TimePicker = forwardRef<HTMLInputElement, TimePickerProps>(\n  (\n    {\n      notation = '12-hour',\n      value,\n      defaultValue,\n      onChange = () => {},\n      onSelect = () => {},\n      onKeyDown = () => {},\n      disabled = false,\n      right,\n      ...rest\n    },\n    ref\n  ) => {\n    const [inputRef, mergedInputRef] = useForwardedRef(ref);\n    const [forwardedValue, setForwardedValue] = useForwardedState({\n      value,\n      defaultValue,\n      onChange,\n    });\n    const [selection, setSelection] = useState<Selection>({ start: 0, end: 0 });\n\n    const isPm = useMemo(\n      () => !!forwardedValue && forwardedValue.getHours() >= 12,\n      [forwardedValue]\n    );\n\n    const setTime = useCallback(\n      (time: string) => {\n        const [h, m] = parseTime(time, notation, isPm);\n        const nextValue = new Date(\n          forwardedValue ? forwardedValue.getTime() : 0\n        );\n        nextValue.setHours(h);\n        nextValue.setMinutes(m);\n        setForwardedValue(nextValue);\n      },\n      [forwardedValue, isPm, notation, setForwardedValue]\n    );\n\n    const setTimeRef = useRef(setTime);\n    useEffect(() => {\n      setTimeRef.current = setTime;\n    }, [setTime]);\n\n    const time = useMemo(() => {\n      if (!forwardedValue) return notation === '12-hour' ? '12:00' : '00:00';\n      const hour =\n        notation === '12-hour'\n          ? forwardedValue.getHours() % 12 || 12\n          : forwardedValue.getHours();\n      const minute = forwardedValue.getMinutes();\n      return `${pad(hour)}:${pad(minute)}`;\n    }, [forwardedValue, notation]);\n\n    const changePeriod = useCallback(\n      (nextIsPm: boolean) => {\n        if (!forwardedValue) return;\n        const nextValue = new Date(\n          forwardedValue.getTime() + HOURS_12 * (nextIsPm ? 1 : -1)\n        );\n        setForwardedValue(nextValue);\n      },\n      [forwardedValue, setForwardedValue]\n    );\n\n    // Update the selection\n    useEffect(() => {\n      if (!inputRef.current) return;\n      inputRef.current.setSelectionRange(selection.start, selection.end);\n    }, [inputRef, selection]);\n\n    const keyDownHandler = useCallback(\n      (e) => {\n        let nextCaret = selection.start;\n        if (e.key === 'ArrowUp' || (e.key === 'ArrowLeft' && e.metaKey)) {\n          nextCaret = 0;\n        } else if (\n          e.key === 'ArrowDown' ||\n          (e.key === 'ArrowRight' && e.metaKey)\n        ) {\n          nextCaret = 5;\n        } else if (e.key === 'ArrowLeft') {\n          nextCaret = selection.start > 0 ? selection.start - 1 : 0;\n        } else if (e.key === 'ArrowRight') {\n          nextCaret = selection.start < 5 ? selection.start + 1 : 5;\n        } else if (e.key === 'Backspace') {\n          setTimeRef.current('00:00');\n          nextCaret = 0;\n        } else if (isDigitKey(e.key)) {\n          let pos = selection.start === 2 ? 3 : selection.start;\n          if (pos === 5) pos = 0;\n          setTimeRef.current(replaceChar(time, pos, e.key));\n          nextCaret = pos < 5 ? pos + 1 : 5;\n        }\n        setSelection({ start: nextCaret, end: nextCaret });\n        onKeyDown(e);\n        e.preventDefault();\n      },\n      [onKeyDown, selection.start, time]\n    );\n\n    return (\n      <Input\n        type='text'\n        inputMode='decimal'\n        role='spinbutton'\n        minLength={5}\n        maxLength={5}\n        disabled={disabled}\n        value={time}\n        right={\n          <>\n            {notation === '12-hour' && (\n              <Button\n                type='ghost'\n                wide='never'\n                size='small'\n                disabled={disabled}\n                onClick={() => changePeriod(!isPm)}\n              >\n                {isPm ? 'PM' : 'AM'}\n              </Button>\n            )}\n\n            {right}\n          </>\n        }\n        onSelect={(e) => {\n          // Update the selection state.\n          const { selectionStart, selectionEnd } = e.currentTarget;\n          setSelection({ start: selectionStart || 0, end: selectionEnd || 0 });\n          onSelect(e);\n        }}\n        onKeyDown={keyDownHandler}\n        {...rest}\n        ref={mergedInputRef}\n      />\n    );\n  }\n);\n\nTimePicker.displayName = 'TimePicker';\n\nexport default TimePicker;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["pad","n","toString","padStart","HOURS_12","TimePicker","forwardRef","ref","notation","value","defaultValue","onChange","onSelect","onKeyDown","disabled","right","rest","useForwardedRef","inputRef","mergedInputRef","useForwardedState","forwardedValue","setForwardedValue","useState","start","end","selection","setSelection","isPm","useMemo","getHours","setTime","useCallback","time","parseTime","h","m","nextValue","Date","getTime","setHours","setMinutes","setTimeRef","useRef","useEffect","current","hour","minute","getMinutes","changePeriod","nextIsPm","setSelectionRange","keyDownHandler","e","nextCaret","key","metaKey","isDigitKey","pos","replaceChar","preventDefault","currentTarget","selectionStart","selectionEnd","displayName"],"sources":["../../../src/TimePicker/index.tsx"],"sourcesContent":["import {\n  isDigitKey,\n  replaceChar,\n  parseTime,\n} from '@os-design/time-picker-utils';\nimport { useForwardedRef, useForwardedState } from '@os-design/utils';\nimport React, {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport Button from '../Button';\nimport Input, { InputProps } from '../Input';\n\nexport interface TimePickerProps\n  extends Omit<InputProps, 'type' | 'value' | 'defaultValue' | 'onChange'> {\n  /**\n   * The time notation.\n   * @default 12-hour\n   */\n  notation?: '12-hour' | '24-hour';\n  /**\n   * The selected date.\n   * @default undefined\n   */\n  value?: Date;\n  /**\n   * The default value.\n   * @default undefined\n   */\n  defaultValue?: Date;\n  /**\n   * The change event handler.\n   * @default undefined\n   */\n  onChange?: (value: Date) => void;\n}\n\ninterface Selection {\n  start: number;\n  end: number;\n}\n\nconst pad = (n: number) => n.toString().padStart(2, '0');\nconst HOURS_12 = 12 * 60 * 60 * 1000;\n\n/**\n * The component to choose a time.\n */\nconst TimePicker = forwardRef<HTMLInputElement, TimePickerProps>(\n  (\n    {\n      notation = '12-hour',\n      value,\n      defaultValue,\n      onChange = () => {},\n      onSelect = () => {},\n      onKeyDown = () => {},\n      disabled = false,\n      right,\n      ...rest\n    },\n    ref\n  ) => {\n    const [inputRef, mergedInputRef] = useForwardedRef(ref);\n    const [forwardedValue, setForwardedValue] = useForwardedState({\n      value,\n      defaultValue,\n      onChange,\n    });\n    const [selection, setSelection] = useState<Selection>({ start: 0, end: 0 });\n\n    const isPm = useMemo(\n      () => !!forwardedValue && forwardedValue.getHours() >= 12,\n      [forwardedValue]\n    );\n\n    const setTime = useCallback(\n      (time: string) => {\n        const [h, m] = parseTime(time, notation, isPm);\n        const nextValue = new Date(\n          forwardedValue ? forwardedValue.getTime() : 0\n        );\n        nextValue.setHours(h);\n        nextValue.setMinutes(m);\n        setForwardedValue(nextValue);\n      },\n      [forwardedValue, isPm, notation, setForwardedValue]\n    );\n\n    const setTimeRef = useRef(setTime);\n    useEffect(() => {\n      setTimeRef.current = setTime;\n    }, [setTime]);\n\n    const time = useMemo(() => {\n      if (!forwardedValue) return notation === '12-hour' ? '12:00' : '00:00';\n      const hour =\n        notation === '12-hour'\n          ? forwardedValue.getHours() % 12 || 12\n          : forwardedValue.getHours();\n      const minute = forwardedValue.getMinutes();\n      return `${pad(hour)}:${pad(minute)}`;\n    }, [forwardedValue, notation]);\n\n    const changePeriod = useCallback(\n      (nextIsPm: boolean) => {\n        if (!forwardedValue) return;\n        const nextValue = new Date(\n          forwardedValue.getTime() + HOURS_12 * (nextIsPm ? 1 : -1)\n        );\n        setForwardedValue(nextValue);\n      },\n      [forwardedValue, setForwardedValue]\n    );\n\n    // Update the selection\n    useEffect(() => {\n      if (!inputRef.current) return;\n      inputRef.current.setSelectionRange(selection.start, selection.end);\n    }, [inputRef, selection]);\n\n    const keyDownHandler = useCallback(\n      (e) => {\n        let nextCaret = selection.start;\n        if (e.key === 'ArrowUp' || (e.key === 'ArrowLeft' && e.metaKey)) {\n          nextCaret = 0;\n        } else if (\n          e.key === 'ArrowDown' ||\n          (e.key === 'ArrowRight' && e.metaKey)\n        ) {\n          nextCaret = 5;\n        } else if (e.key === 'ArrowLeft') {\n          nextCaret = selection.start > 0 ? selection.start - 1 : 0;\n        } else if (e.key === 'ArrowRight') {\n          nextCaret = selection.start < 5 ? selection.start + 1 : 5;\n        } else if (e.key === 'Backspace') {\n          setTimeRef.current('00:00');\n          nextCaret = 0;\n        } else if (isDigitKey(e.key)) {\n          let pos = selection.start === 2 ? 3 : selection.start;\n          if (pos === 5) pos = 0;\n          setTimeRef.current(replaceChar(time, pos, e.key));\n          nextCaret = pos < 5 ? pos + 1 : 5;\n        }\n        setSelection({ start: nextCaret, end: nextCaret });\n        onKeyDown(e);\n        e.preventDefault();\n      },\n      [onKeyDown, selection.start, time]\n    );\n\n    return (\n      <Input\n        type='text'\n        inputMode='decimal'\n        role='spinbutton'\n        minLength={5}\n        maxLength={5}\n        disabled={disabled}\n        value={time}\n        right={\n          (notation === '12-hour' || right) && (\n            <>\n              {notation === '12-hour' && (\n                <Button\n                  type='ghost'\n                  wide='never'\n                  size='small'\n                  disabled={disabled}\n                  onClick={() => changePeriod(!isPm)}\n                >\n                  {isPm ? 'PM' : 'AM'}\n                </Button>\n              )}\n              {right}\n            </>\n          )\n        }\n        onSelect={(e) => {\n          // Update the selection state.\n          const { selectionStart, selectionEnd } = e.currentTarget;\n          setSelection({ start: selectionStart || 0, end: selectionEnd || 0 });\n          onSelect(e);\n        }}\n        onKeyDown={keyDownHandler}\n        {...rest}\n        ref={mergedInputRef}\n      />\n    );\n  }\n);\n\nTimePicker.displayName = 'TimePicker';\n\nexport default TimePicker;\n"],"mappings":"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"}

package/dist/esm/DatePicker/DatePickerCalendar.js

@@ -69,9 +69,26 @@ const SelectedDay = styled(Day)`
   background-color: ${p => clr(p.theme.datePickerSelectedDayColorBg)};
   color: ${p => clr(p.theme.datePickerSelectedDayColorText)};
 `;
+const DayInRange = styled(Day)`
+  background-color: ${p => clr([...p.theme.colorText.slice(0, 3), (p.theme.colorText[3] || 1) * 0.05])};
+`;
+const createDate = (date, time) => {
+  const d = new Date(0);
+  d.setFullYear(date.getFullYear());
+  d.setMonth(date.getMonth());
+  d.setDate(date.getDate());
+  d.setHours(0);
+  d.setMinutes(0);
+  if (time) {
+    d.setHours(time.getHours());
+    d.setMinutes(time.getMinutes());
+  }
+  return d;
+};
 const DatePickerCalendar = ({
   firstDayOfWeek,
   locale,
+  range,
   value,
   onChange = () => {}
 }) => {
@@ -79,19 +96,18 @@ const DatePickerCalendar = ({
   useEffect(() => {
     valueRef.current = value;
   }, [value]);
+  const rangeStartedRef = useRef(false);
   const changeHandler = useCallback(date => {
-    const d = new Date(0);
-    d.setFullYear(date.getFullYear());
-    d.setMonth(date.getMonth());
-    d.setDate(date.getDate());
-    d.setHours(0);
-    d.setMinutes(0);
-    if (valueRef.current) {
-      d.setHours(valueRef.current.getHours());
-      d.setMinutes(valueRef.current.getMinutes());
+    if (range) {
+      const dateWithoutTime = createDate(date);
+      const dateIndex = rangeStartedRef.current ? 1 : 0;
+      const nextValue = valueRef.current && Array.isArray(valueRef.current) && rangeStartedRef.current ? valueRef.current.map((item, index) => index === dateIndex ? createDate(date, item) : new Date(item.getTime())).sort((a, b) => a.getTime() - b.getTime()) : [dateWithoutTime, dateWithoutTime];
+      rangeStartedRef.current = !rangeStartedRef.current;
+      onChange(nextValue);
+    } else if (!Array.isArray(valueRef.current)) {
+      onChange(createDate(date, valueRef.current));
     }
-    onChange(d);
-  }, [onChange]);
+  }, [onChange, range]);
   const changeHandlerRef = useRef(changeHandler);
   useEffect(() => {
     changeHandlerRef.current = changeHandler;
@@ -147,6 +163,11 @@ const DatePickerCalendar = ({
         key: date.toISOString()
       }, getDayProps(date)), date.getDate());
     }
+    if (type === 'dayInRange') {
+      return /*#__PURE__*/React.createElement(DayInRange, _extends({
+        key: date.toISOString()
+      }, getDayProps(date)), date.getDate());
+    }
     if (type === 'today') {
       return /*#__PURE__*/React.createElement(Today, _extends({
         key: date.toISOString()

package/dist/esm/DatePicker/DatePickerCalendar.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePickerCalendar.js","names":["styled","getAccessibilityDateLabel","useDatePickerCalendar","Left","Right","ellipsisStyles","resetFocusStyles","transitionStyles","clr","React","useCallback","useEffect","useRef","Button","MonthContainer","div","Month","Calendar","p","theme","datePickerCellSize","DayOfWeek","datePickerDayOfWeekColorText","sizes","small","Day","datePickerDaySize","borderRadius","datePickerDayColorBgHover","datePickerDayColorTextHover","DayAnotherMonth","datePickerDayAnotherMonthColorText","Today","datePickerTodayColorBg","datePickerTodayColorText","datePickerTodayColorBorder","SelectedDay","datePickerSelectedDayColorBg","datePickerSelectedDayColorText","DatePickerCalendar","firstDayOfWeek","locale","value","onChange","valueRef","current","changeHandler","date","d","Date","setFullYear","getFullYear","setMonth","getMonth","setDate","getDate","setHours","setMinutes","getHours","getMinutes","changeHandlerRef","selectedMonth","updateMonth","days","getDayProps","tabIndex","role","onClick","onKeyDown","e","includes","key","preventDefault","onMouseDown","prevMonthLabel","months","month","year","nextMonthLabel","shortDaysOfWeek","slice","map","item","type","toISOString"],"sources":["../../../src/DatePicker/DatePickerCalendar.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport {\n  DatePickerLocale,\n  getAccessibilityDateLabel,\n  useDatePickerCalendar,\n} from '@os-design/date-picker-utils';\nimport { Left, Right } from '@os-design/icons';\nimport {\n  ellipsisStyles,\n  resetFocusStyles,\n  transitionStyles,\n} from '@os-design/styles';\nimport { clr } from '@os-design/theming';\nimport React, { HTMLAttributes, useCallback, useEffect, useRef } from 'react';\nimport Button from '../Button';\n\ninterface DatePickerCalendarProps {\n  firstDayOfWeek: 'sunday' | 'monday';\n  locale: DatePickerLocale;\n  value?: Date | null;\n  onChange?: (value: Date) => void;\n}\n\nconst MonthContainer = styled.div`\n  display: flex;\n  align-items: center;\n  margin-bottom: 0.5em;\n`;\n\nconst Month = styled.div`\n  flex-grow: 1;\n  font-weight: 500;\n  text-align: center;\n  padding: 0 0.4em;\n  ${ellipsisStyles};\n`;\n\nconst Calendar = styled.div`\n  display: grid;\n  grid-template-columns: repeat(7, ${(p) => p.theme.datePickerCellSize}em);\n  grid-auto-rows: ${(p) => p.theme.datePickerCellSize}em;\n  justify-content: space-between;\n  overflow-x: auto;\n`;\n\nconst DayOfWeek = styled.div`\n  justify-self: center;\n  align-self: center;\n  color: ${(p) => clr(p.theme.datePickerDayOfWeekColorText)};\n  font-size: ${(p) => p.theme.sizes.small}em;\n`;\n\nconst Day = styled.div`\n  ${resetFocusStyles};\n  justify-self: center;\n  align-self: center;\n\n  width: ${(p) => p.theme.datePickerDaySize}em;\n  height: ${(p) => p.theme.datePickerDaySize}em;\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  border-radius: ${(p) => p.theme.borderRadius}em;\n  cursor: pointer;\n\n  @media (hover: hover) {\n    &:hover,\n    &:focus {\n      background-color: ${(p) => clr(p.theme.datePickerDayColorBgHover)};\n      color: ${(p) => clr(p.theme.datePickerDayColorTextHover)};\n    }\n  }\n\n  ${transitionStyles('background-color', 'color')};\n`;\n\nconst DayAnotherMonth = styled(Day)`\n  color: ${(p) => clr(p.theme.datePickerDayAnotherMonthColorText)};\n`;\n\nconst Today = styled(Day)`\n  background-color: ${(p) => clr(p.theme.datePickerTodayColorBg)};\n  color: ${(p) => clr(p.theme.datePickerTodayColorText)};\n  border: 1px solid ${(p) => clr(p.theme.datePickerTodayColorBorder)};\n  box-sizing: border-box;\n`;\n\nconst SelectedDay = styled(Day)`\n  background-color: ${(p) => clr(p.theme.datePickerSelectedDayColorBg)};\n  color: ${(p) => clr(p.theme.datePickerSelectedDayColorText)};\n`;\n\nconst DatePickerCalendar: React.FC<DatePickerCalendarProps> = ({\n  firstDayOfWeek,\n  locale,\n  value,\n  onChange = () => {},\n}) => {\n  const valueRef = useRef(value);\n  useEffect(() => {\n    valueRef.current = value;\n  }, [value]);\n\n  const changeHandler = useCallback(\n    (date: Date) => {\n      const d = new Date(0);\n      d.setFullYear(date.getFullYear());\n      d.setMonth(date.getMonth());\n      d.setDate(date.getDate());\n      d.setHours(0);\n      d.setMinutes(0);\n      if (valueRef.current) {\n        d.setHours(valueRef.current.getHours());\n        d.setMinutes(valueRef.current.getMinutes());\n      }\n      onChange(d);\n    },\n    [onChange]\n  );\n\n  const changeHandlerRef = useRef(changeHandler);\n  useEffect(() => {\n    changeHandlerRef.current = changeHandler;\n  }, [changeHandler]);\n\n  const { selectedMonth, updateMonth, days } = useDatePickerCalendar({\n    value,\n    firstDayOfWeek,\n  });\n\n  const getDayProps = useCallback<\n    (date: Date) => HTMLAttributes<HTMLDivElement>\n  >(\n    (date: Date) => ({\n      tabIndex: 0,\n      role: 'button',\n      'aria-label': getAccessibilityDateLabel(date, locale),\n      onClick: () => {\n        changeHandlerRef.current(date);\n      },\n      onKeyDown: (e) => {\n        if (['Enter', ' '].includes(e.key)) {\n          changeHandlerRef.current(date);\n          e.preventDefault();\n        }\n      },\n      onMouseDown: (e) => e.preventDefault(),\n    }),\n    [locale]\n  );\n\n  return (\n    <>\n      <MonthContainer>\n        <Button\n          type='ghost'\n          wide='never'\n          size='small'\n          onClick={() => updateMonth(-1)}\n          aria-label={locale.prevMonthLabel}\n        >\n          <Left />\n        </Button>\n        <Month>\n          {locale.months[selectedMonth.month]} {selectedMonth.year}\n        </Month>\n        <Button\n          type='ghost'\n          wide='never'\n          size='small'\n          onClick={() => updateMonth(1)}\n          aria-label={locale.nextMonthLabel}\n        >\n          <Right />\n        </Button>\n      </MonthContainer>\n\n      <Calendar>\n        {(firstDayOfWeek === 'sunday'\n          ? locale.shortDaysOfWeek\n          : [...locale.shortDaysOfWeek.slice(1), locale.shortDaysOfWeek[0]]\n        ).map((item) => (\n          <DayOfWeek key={item}>{item}</DayOfWeek>\n        ))}\n\n        {days.map(({ type, date }) => {\n          if (type === 'dayAnotherMonth') {\n            return (\n              <DayAnotherMonth key={date.toISOString()} {...getDayProps(date)}>\n                {date.getDate()}\n              </DayAnotherMonth>\n            );\n          }\n          if (type === 'selectedDay') {\n            return (\n              <SelectedDay key={date.toISOString()} {...getDayProps(date)}>\n                {date.getDate()}\n              </SelectedDay>\n            );\n          }\n          if (type === 'today') {\n            return (\n              <Today key={date.toISOString()} {...getDayProps(date)}>\n                {date.getDate()}\n              </Today>\n            );\n          }\n          return (\n            <Day key={date.toISOString()} {...getDayProps(date)}>\n              {date.getDate()}\n            </Day>\n          );\n        })}\n      </Calendar>\n    </>\n  );\n};\n\nexport default DatePickerCalendar;\n"],"mappings":"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"}
+{"version":3,"file":"DatePickerCalendar.js","names":["styled","getAccessibilityDateLabel","useDatePickerCalendar","Left","Right","ellipsisStyles","resetFocusStyles","transitionStyles","clr","React","useCallback","useEffect","useRef","Button","MonthContainer","div","Month","Calendar","p","theme","datePickerCellSize","DayOfWeek","datePickerDayOfWeekColorText","sizes","small","Day","datePickerDaySize","borderRadius","datePickerDayColorBgHover","datePickerDayColorTextHover","DayAnotherMonth","datePickerDayAnotherMonthColorText","Today","datePickerTodayColorBg","datePickerTodayColorText","datePickerTodayColorBorder","SelectedDay","datePickerSelectedDayColorBg","datePickerSelectedDayColorText","DayInRange","colorText","slice","createDate","date","time","d","Date","setFullYear","getFullYear","setMonth","getMonth","setDate","getDate","setHours","setMinutes","getHours","getMinutes","DatePickerCalendar","firstDayOfWeek","locale","range","value","onChange","valueRef","current","rangeStartedRef","changeHandler","dateWithoutTime","dateIndex","nextValue","Array","isArray","map","item","index","getTime","sort","a","b","changeHandlerRef","selectedMonth","updateMonth","days","getDayProps","tabIndex","role","onClick","onKeyDown","e","includes","key","preventDefault","onMouseDown","prevMonthLabel","months","month","year","nextMonthLabel","shortDaysOfWeek","type","toISOString"],"sources":["../../../src/DatePicker/DatePickerCalendar.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport {\n  DatePickerLocale,\n  getAccessibilityDateLabel,\n  useDatePickerCalendar,\n} from '@os-design/date-picker-utils';\nimport { Left, Right } from '@os-design/icons';\nimport {\n  ellipsisStyles,\n  resetFocusStyles,\n  transitionStyles,\n} from '@os-design/styles';\nimport { clr, Color } from '@os-design/theming';\nimport React, { HTMLAttributes, useCallback, useEffect, useRef } from 'react';\nimport Button from '../Button';\n\ninterface DatePickerCalendarProps {\n  firstDayOfWeek: 'sunday' | 'monday';\n  locale: DatePickerLocale;\n  range: boolean;\n  value?: Date | [Date, Date] | null;\n  onChange?: (value: Date | [Date, Date]) => void;\n}\n\nconst MonthContainer = styled.div`\n  display: flex;\n  align-items: center;\n  margin-bottom: 0.5em;\n`;\n\nconst Month = styled.div`\n  flex-grow: 1;\n  font-weight: 500;\n  text-align: center;\n  padding: 0 0.4em;\n  ${ellipsisStyles};\n`;\n\nconst Calendar = styled.div`\n  display: grid;\n  grid-template-columns: repeat(7, ${(p) => p.theme.datePickerCellSize}em);\n  grid-auto-rows: ${(p) => p.theme.datePickerCellSize}em;\n  justify-content: space-between;\n  overflow-x: auto;\n`;\n\nconst DayOfWeek = styled.div`\n  justify-self: center;\n  align-self: center;\n  color: ${(p) => clr(p.theme.datePickerDayOfWeekColorText)};\n  font-size: ${(p) => p.theme.sizes.small}em;\n`;\n\nconst Day = styled.div`\n  ${resetFocusStyles};\n  justify-self: center;\n  align-self: center;\n\n  width: ${(p) => p.theme.datePickerDaySize}em;\n  height: ${(p) => p.theme.datePickerDaySize}em;\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  border-radius: ${(p) => p.theme.borderRadius}em;\n  cursor: pointer;\n\n  @media (hover: hover) {\n    &:hover,\n    &:focus {\n      background-color: ${(p) => clr(p.theme.datePickerDayColorBgHover)};\n      color: ${(p) => clr(p.theme.datePickerDayColorTextHover)};\n    }\n  }\n\n  ${transitionStyles('background-color', 'color')};\n`;\n\nconst DayAnotherMonth = styled(Day)`\n  color: ${(p) => clr(p.theme.datePickerDayAnotherMonthColorText)};\n`;\n\nconst Today = styled(Day)`\n  background-color: ${(p) => clr(p.theme.datePickerTodayColorBg)};\n  color: ${(p) => clr(p.theme.datePickerTodayColorText)};\n  border: 1px solid ${(p) => clr(p.theme.datePickerTodayColorBorder)};\n  box-sizing: border-box;\n`;\n\nconst SelectedDay = styled(Day)`\n  background-color: ${(p) => clr(p.theme.datePickerSelectedDayColorBg)};\n  color: ${(p) => clr(p.theme.datePickerSelectedDayColorText)};\n`;\n\nconst DayInRange = styled(Day)`\n  background-color: ${(p) =>\n    clr([\n      ...p.theme.colorText.slice(0, 3),\n      (p.theme.colorText[3] || 1) * 0.05,\n    ] as Color)};\n`;\n\nconst createDate = (date: Date, time?: Date | null) => {\n  const d = new Date(0);\n  d.setFullYear(date.getFullYear());\n  d.setMonth(date.getMonth());\n  d.setDate(date.getDate());\n  d.setHours(0);\n  d.setMinutes(0);\n  if (time) {\n    d.setHours(time.getHours());\n    d.setMinutes(time.getMinutes());\n  }\n  return d;\n};\n\nconst DatePickerCalendar: React.FC<DatePickerCalendarProps> = ({\n  firstDayOfWeek,\n  locale,\n  range,\n  value,\n  onChange = () => {},\n}) => {\n  const valueRef = useRef(value);\n  useEffect(() => {\n    valueRef.current = value;\n  }, [value]);\n\n  const rangeStartedRef = useRef(false);\n\n  const changeHandler = useCallback(\n    (date: Date) => {\n      if (range) {\n        const dateWithoutTime = createDate(date);\n        const dateIndex = rangeStartedRef.current ? 1 : 0;\n        const nextValue =\n          valueRef.current &&\n          Array.isArray(valueRef.current) &&\n          rangeStartedRef.current\n            ? valueRef.current\n                .map((item, index) =>\n                  index === dateIndex\n                    ? createDate(date, item)\n                    : new Date(item.getTime())\n                )\n                .sort((a, b) => a.getTime() - b.getTime())\n            : [dateWithoutTime, dateWithoutTime];\n        rangeStartedRef.current = !rangeStartedRef.current;\n        onChange(nextValue as [Date, Date]);\n      } else if (!Array.isArray(valueRef.current)) {\n        onChange(createDate(date, valueRef.current));\n      }\n    },\n    [onChange, range]\n  );\n\n  const changeHandlerRef = useRef(changeHandler);\n  useEffect(() => {\n    changeHandlerRef.current = changeHandler;\n  }, [changeHandler]);\n\n  const { selectedMonth, updateMonth, days } = useDatePickerCalendar({\n    value,\n    firstDayOfWeek,\n  });\n\n  const getDayProps = useCallback<\n    (date: Date) => HTMLAttributes<HTMLDivElement>\n  >(\n    (date: Date) => ({\n      tabIndex: 0,\n      role: 'button',\n      'aria-label': getAccessibilityDateLabel(date, locale),\n      onClick: () => {\n        changeHandlerRef.current(date);\n      },\n      onKeyDown: (e) => {\n        if (['Enter', ' '].includes(e.key)) {\n          changeHandlerRef.current(date);\n          e.preventDefault();\n        }\n      },\n      onMouseDown: (e) => e.preventDefault(),\n    }),\n    [locale]\n  );\n\n  return (\n    <>\n      <MonthContainer>\n        <Button\n          type='ghost'\n          wide='never'\n          size='small'\n          onClick={() => updateMonth(-1)}\n          aria-label={locale.prevMonthLabel}\n        >\n          <Left />\n        </Button>\n        <Month>\n          {locale.months[selectedMonth.month]} {selectedMonth.year}\n        </Month>\n        <Button\n          type='ghost'\n          wide='never'\n          size='small'\n          onClick={() => updateMonth(1)}\n          aria-label={locale.nextMonthLabel}\n        >\n          <Right />\n        </Button>\n      </MonthContainer>\n\n      <Calendar>\n        {(firstDayOfWeek === 'sunday'\n          ? locale.shortDaysOfWeek\n          : [...locale.shortDaysOfWeek.slice(1), locale.shortDaysOfWeek[0]]\n        ).map((item) => (\n          <DayOfWeek key={item}>{item}</DayOfWeek>\n        ))}\n\n        {days.map(({ type, date }) => {\n          if (type === 'dayAnotherMonth') {\n            return (\n              <DayAnotherMonth key={date.toISOString()} {...getDayProps(date)}>\n                {date.getDate()}\n              </DayAnotherMonth>\n            );\n          }\n          if (type === 'selectedDay') {\n            return (\n              <SelectedDay key={date.toISOString()} {...getDayProps(date)}>\n                {date.getDate()}\n              </SelectedDay>\n            );\n          }\n          if (type === 'dayInRange') {\n            return (\n              <DayInRange key={date.toISOString()} {...getDayProps(date)}>\n                {date.getDate()}\n              </DayInRange>\n            );\n          }\n          if (type === 'today') {\n            return (\n              <Today key={date.toISOString()} {...getDayProps(date)}>\n                {date.getDate()}\n              </Today>\n            );\n          }\n          return (\n            <Day key={date.toISOString()} {...getDayProps(date)}>\n              {date.getDate()}\n            </Day>\n          );\n        })}\n      </Calendar>\n    </>\n  );\n};\n\nexport default DatePickerCalendar;\n"],"mappings":"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"}

package/dist/esm/DatePicker/index.js

@@ -5,7 +5,7 @@ import { Down, Up } from '@os-design/icons';
 import { useIsMinWidth } from '@os-design/media';
 import { ThemeOverrider } from '@os-design/theming';
 import { useForwardedRef, useForwardedState, useKeyPress } from '@os-design/utils';
-import React, { forwardRef, useCallback, useMemo, useState } from 'react';
+import React, { forwardRef, useCallback, useMemo, useRef, useState } from 'react';
 import Button from '../Button';
 import Modal from '../Modal';
 import Popover from '../Popover';
@@ -17,8 +17,18 @@ const StyledPopover = styled(Popover)`
   padding: ${p => p.theme.datePickerPadding}em;
 `;
 const TimeContainer = styled.div`
+  display: flex;
+  justify-content: center;
   margin-top: 0.5em;
 `;
+const Dash = styled.div`
+  margin: 0 0.5em;
+  line-height: ${p => p.theme.baseHeight}em;
+`;
+const StyledTimePicker = styled(TimePicker)`
+  width: 2.5em;
+  text-align: center;
+`;
 
 /**
  * The component to choose a date.
@@ -35,6 +45,7 @@ const DatePicker = /*#__PURE__*/forwardRef(({
   locale = defaultLocale,
   showTime = false,
   timeNotation = '12-hour',
+  range = false,
   value,
   defaultValue,
   onChange,
@@ -43,6 +54,7 @@ const DatePicker = /*#__PURE__*/forwardRef(({
 }, ref) => {
   const [containerRef, mergedContainerRef] = useForwardedRef(ref);
   const [opened, setOpened] = useState(false);
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const [forwardedValue, setForwardedValue] = useForwardedState({
     value,
     defaultValue,
@@ -50,7 +62,7 @@ const DatePicker = /*#__PURE__*/forwardRef(({
   });
   const format = useMemo(() => {
     if (formatFn) return formatFn;
-    return date => date.toLocaleString(undefined, {
+    const dateToStr = date => date.toLocaleString(undefined, {
       year: 'numeric',
       month: '2-digit',
       day: '2-digit',
@@ -60,6 +72,7 @@ const DatePicker = /*#__PURE__*/forwardRef(({
         hour12: timeNotation === '12-hour'
       } : {})
     });
+    return v => Array.isArray(v) ? v.map(item => dateToStr(item)).join(' - ') : dateToStr(v);
   }, [formatFn, showTime, timeNotation]);
   const formattedValue = useMemo(() => {
     if (!forwardedValue) return null;
@@ -70,15 +83,6 @@ const DatePicker = /*#__PURE__*/forwardRef(({
   }, []);
   useKeyPress(typeof window !== 'undefined' ? window : undefined, 'Escape', closeHandler);
   const isMinXs = useIsMinWidth('xs');
-  const calendar = /*#__PURE__*/React.createElement(DatePickerCalendar, {
-    firstDayOfWeek: firstDayOfWeek,
-    locale: locale,
-    value: forwardedValue,
-    onChange: v => {
-      setForwardedValue(v);
-      if (!showTime) closeHandler();
-    }
-  });
   const valueIsSpecified = useMemo(() => formattedValue !== undefined && formattedValue !== null, [formattedValue]);
   const rightValue = useMemo(() => {
     if (valueIsSpecified) {
@@ -112,10 +116,72 @@ const DatePicker = /*#__PURE__*/forwardRef(({
     if (valueIsSpecified) return false;
     return right ? rightHasPadding : true;
   }, [right, rightHasPadding, valueIsSpecified]);
-  const timeComponent = useMemo(() => showTime && forwardedValue ? /*#__PURE__*/React.createElement(TimeContainer, null, /*#__PURE__*/React.createElement(TimePicker, {
+  const calendarComponent = useMemo(() => /*#__PURE__*/React.createElement(DatePickerCalendar, {
+    firstDayOfWeek: firstDayOfWeek,
+    locale: locale,
+    range: range,
+    value: forwardedValue,
+    onChange: v => {
+      setForwardedValue(v);
+      if (!showTime && !range) {
+        closeHandler();
+      }
+    }
+  }), [closeHandler, firstDayOfWeek, forwardedValue, locale, range, setForwardedValue, showTime]);
+  const secondTimePickerRef = useRef(null);
+  const tabOnInputComplete = useCallback(e => {
+    if (e.target.selectionStart < 5) return;
+    secondTimePickerRef.current?.focus();
+  }, []);
+  const closeOnInputComplete = useCallback(e => {
+    if (e.target.selectionStart < 5) return;
+    closeHandler();
+  }, [closeHandler]);
+  const timeComponent = useMemo(() => showTime && forwardedValue ? /*#__PURE__*/React.createElement(TimeContainer, null, Array.isArray(forwardedValue) ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledTimePicker, {
+    autoFocus: true,
+    disabled: disabled,
+    notation: timeNotation,
+    containerProps: {
+      style: {
+        width: 'auto'
+      }
+    },
+    value: forwardedValue[0],
+    onChange: v => setForwardedValue([v, forwardedValue[1]]),
+    onKeyDown: e => {
+      if (disabled) return;
+      if (e.key === 'Enter') {
+        setOpened(!opened);
+      }
+    },
+    onKeyUp: tabOnInputComplete
+  }), /*#__PURE__*/React.createElement(Dash, null, "\u2013"), /*#__PURE__*/React.createElement(StyledTimePicker, {
+    ref: secondTimePickerRef,
+    disabled: disabled,
+    notation: timeNotation,
+    containerProps: {
+      style: {
+        width: 'auto'
+      }
+    },
+    value: forwardedValue[1],
+    onChange: v => setForwardedValue([forwardedValue[0], v]),
+    onKeyDown: e => {
+      if (disabled) return;
+      if (e.key === 'Enter') {
+        setOpened(!opened);
+      }
+    },
+    onKeyUp: closeOnInputComplete
+  })) : /*#__PURE__*/React.createElement(StyledTimePicker, {
     autoFocus: true,
     disabled: disabled,
     notation: timeNotation,
+    containerProps: {
+      style: {
+        width: 'auto'
+      }
+    },
     value: forwardedValue,
     onChange: setForwardedValue,
     onKeyDown: e => {
@@ -123,8 +189,9 @@ const DatePicker = /*#__PURE__*/forwardRef(({
       if (e.key === 'Enter') {
         setOpened(!opened);
       }
-    }
-  })) : null, [disabled, forwardedValue, opened, setForwardedValue, showTime, timeNotation]);
+    },
+    onKeyUp: closeOnInputComplete
+  })) : null, [closeOnInputComplete, disabled, forwardedValue, opened, setForwardedValue, showTime, tabOnInputComplete, timeNotation]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SelectContainer, _extends({
     opened: opened,
     disabled: disabled,
@@ -173,13 +240,14 @@ const DatePicker = /*#__PURE__*/forwardRef(({
     visible: opened,
     onClose: closeHandler,
     size: size
-  }, calendar, timeComponent) : /*#__PURE__*/React.createElement(Modal, {
+  }, calendarComponent, timeComponent) : /*#__PURE__*/React.createElement(Modal, {
     title: placeholder,
+    header: null,
     footer: null,
     visible: opened,
     onClose: closeHandler,
     size: size
-  }, calendar, timeComponent));
+  }, calendarComponent, timeComponent));
 });
 DatePicker.displayName = 'DatePicker';
 export default DatePicker;

package/dist/esm/DatePicker/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["styled","defaultLocale","getAccessibilityDateLabel","Down","Up","useIsMinWidth","ThemeOverrider","useForwardedRef","useForwardedState","useKeyPress","React","forwardRef","useCallback","useMemo","useState","Button","Modal","Popover","SelectContainer","ClearIcon","Content","IconContainer","LeftAddon","Placeholder","RightAddon","Title","TimePicker","DatePickerCalendar","StyledPopover","p","theme","datePickerPadding","TimeContainer","div","DatePicker","left","leftHasPadding","right","rightHasPadding","placeholder","disabled","format","formatFn","firstDayOfWeek","locale","showTime","timeNotation","value","defaultValue","onChange","size","rest","ref","containerRef","mergedContainerRef","opened","setOpened","forwardedValue","setForwardedValue","date","toLocaleString","undefined","year","month","day","hour","minute","hour12","formattedValue","closeHandler","window","isMinXs","calendar","v","valueIsSpecified","rightValue","e","stopPropagation","includes","key","current","focus","preventDefault","clearLabel","rightHasPaddingValue","timeComponent","t","buttonPaddingHorizontal","baseHeight","selectToggleListItemHeight","sizes","small","displayName"],"sources":["../../../src/DatePicker/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport {\n  DatePickerLocale,\n  defaultLocale,\n  getAccessibilityDateLabel,\n} from '@os-design/date-picker-utils';\nimport { Down, Up } from '@os-design/icons';\nimport { useIsMinWidth } from '@os-design/media';\nimport { WithSize } from '@os-design/styles';\nimport { ThemeOverrider } from '@os-design/theming';\nimport {\n  useForwardedRef,\n  useForwardedState,\n  useKeyPress,\n} from '@os-design/utils';\nimport React, { forwardRef, useCallback, useMemo, useState } from 'react';\nimport Button from '../Button';\nimport Modal from '../Modal';\nimport Popover from '../Popover';\nimport { SelectContainer } from '../Select';\nimport {\n  ClearIcon,\n  Content,\n  IconContainer,\n  LeftAddon,\n  Placeholder,\n  RightAddon,\n  Title,\n} from '../Select/SelectToggle';\nimport TimePicker from '../TimePicker';\nimport DatePickerCalendar from './DatePickerCalendar';\n\ntype JsxDivProps = Omit<\n  JSX.IntrinsicElements['div'],\n  'value' | 'defaultValue' | 'onChange' | 'ref'\n>;\nexport interface DatePickerProps extends JsxDivProps, WithSize {\n  /**\n   * The component located on the left side.\n   * @default undefined\n   */\n  left?: React.ReactNode;\n  /**\n   * Adds padding to the left component.\n   * It can be useful when passing an icon or text in the left component.\n   * @default false\n   */\n  leftHasPadding?: boolean;\n  /**\n   * The component located on the right side.\n   * @default undefined\n   */\n  right?: React.ReactNode;\n  /**\n   * Adds padding to the right component.\n   * It can be useful when passing an icon or text in the right component.\n   * @default false\n   */\n  rightHasPadding?: boolean;\n  /**\n   * The placeholder of the date picker.\n   * @default undefined\n   */\n  placeholder?: string;\n  /**\n   * Whether the date picker is disabled.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * The format of the date.\n   * @default undefined\n   */\n  format?: (date: Date) => string;\n  /**\n   * The first day of the week.\n   * @default sunday\n   */\n  firstDayOfWeek?: 'sunday' | 'monday';\n  /**\n   * The locale of the date picker.\n   * @default undefined\n   */\n  locale?: DatePickerLocale;\n  /**\n   * Whether the time is shown.\n   * @default false\n   */\n  showTime?: boolean;\n  /**\n   * The time notation.\n   * @default 12-hour\n   */\n  timeNotation?: '12-hour' | '24-hour';\n  /**\n   * Selected date.\n   * @default undefined\n   */\n  value?: Date | null;\n  /**\n   * The default value.\n   * @default undefined\n   */\n  defaultValue?: Date | null;\n  /**\n   * The change event handler.\n   * @default undefined\n   */\n  onChange?: (value: Date | null) => void;\n}\n\nconst StyledPopover = styled(Popover)`\n  padding: ${(p) => p.theme.datePickerPadding}em;\n`;\n\nconst TimeContainer = styled.div`\n  margin-top: 0.5em;\n`;\n\n/**\n * The component to choose a date.\n */\nconst DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(\n  (\n    {\n      left,\n      leftHasPadding = false,\n      right,\n      rightHasPadding = false,\n      placeholder,\n      disabled = false,\n      format: formatFn,\n      firstDayOfWeek = 'sunday',\n      locale = defaultLocale,\n      showTime = false,\n      timeNotation = '12-hour',\n      value,\n      defaultValue,\n      onChange,\n      size,\n      ...rest\n    },\n    ref\n  ) => {\n    const [containerRef, mergedContainerRef] = useForwardedRef(ref);\n    const [opened, setOpened] = useState(false);\n    const [forwardedValue, setForwardedValue] = useForwardedState({\n      value,\n      defaultValue,\n      onChange,\n    });\n\n    const format = useMemo(() => {\n      if (formatFn) return formatFn;\n      return (date: Date) =>\n        date.toLocaleString(undefined, {\n          year: 'numeric',\n          month: '2-digit',\n          day: '2-digit',\n          ...(showTime\n            ? {\n                hour: '2-digit',\n                minute: '2-digit',\n                hour12: timeNotation === '12-hour',\n              }\n            : {}),\n        });\n    }, [formatFn, showTime, timeNotation]);\n\n    const formattedValue = useMemo(() => {\n      if (!forwardedValue) return null;\n      return format(forwardedValue);\n    }, [forwardedValue, format]);\n\n    const closeHandler = useCallback(() => {\n      setOpened(false);\n    }, []);\n\n    useKeyPress(\n      (typeof window !== 'undefined' ? window : undefined) as EventTarget,\n      'Escape',\n      closeHandler\n    );\n    const isMinXs = useIsMinWidth('xs');\n\n    const calendar = (\n      <DatePickerCalendar\n        firstDayOfWeek={firstDayOfWeek}\n        locale={locale}\n        value={forwardedValue}\n        onChange={(v) => {\n          setForwardedValue(v);\n          if (!showTime) closeHandler();\n        }}\n      />\n    );\n\n    const valueIsSpecified = useMemo(\n      () => formattedValue !== undefined && formattedValue !== null,\n      [formattedValue]\n    );\n\n    const rightValue = useMemo(() => {\n      if (valueIsSpecified) {\n        return (\n          <div aria-hidden>\n            <Button\n              type='ghost'\n              wide='never'\n              size='small'\n              disabled={disabled}\n              onClick={(e) => {\n                setForwardedValue(null);\n                e.stopPropagation();\n              }}\n              onKeyDown={(e) => {\n                if (disabled) return;\n                if (['Enter', ' '].includes(e.key)) {\n                  setForwardedValue(null);\n                  if (!containerRef.current) return;\n                  containerRef.current.focus();\n                  e.preventDefault();\n                  e.stopPropagation();\n                }\n              }}\n              aria-label={locale.clearLabel}\n            >\n              <ClearIcon />\n            </Button>\n          </div>\n        );\n      }\n      return (\n        right || <IconContainer>{opened ? <Up /> : <Down />}</IconContainer>\n      );\n    }, [\n      containerRef,\n      disabled,\n      locale.clearLabel,\n      opened,\n      right,\n      setForwardedValue,\n      valueIsSpecified,\n    ]);\n\n    const rightHasPaddingValue = useMemo(() => {\n      if (valueIsSpecified) return false;\n      return right ? rightHasPadding : true;\n    }, [right, rightHasPadding, valueIsSpecified]);\n\n    const timeComponent = useMemo(\n      () =>\n        showTime && forwardedValue ? (\n          <TimeContainer>\n            <TimePicker\n              autoFocus\n              disabled={disabled}\n              notation={timeNotation}\n              value={forwardedValue}\n              onChange={setForwardedValue}\n              onKeyDown={(e) => {\n                if (disabled) return;\n                if (e.key === 'Enter') {\n                  setOpened(!opened);\n                }\n              }}\n            />\n          </TimeContainer>\n        ) : null,\n      [\n        disabled,\n        forwardedValue,\n        opened,\n        setForwardedValue,\n        showTime,\n        timeNotation,\n      ]\n    );\n\n    return (\n      <>\n        <SelectContainer\n          opened={opened}\n          disabled={disabled}\n          size={size}\n          tabIndex={!disabled ? 0 : -1}\n          onClick={() => {\n            if (disabled) return;\n            setOpened(!opened);\n          }}\n          onKeyDown={(e) => {\n            if (disabled) return;\n            if (['Enter', ' '].includes(e.key)) {\n              setOpened(!opened);\n              e.preventDefault();\n            }\n          }}\n          onMouseDown={(e) => e.preventDefault()}\n          role='combobox'\n          aria-label={\n            forwardedValue\n              ? getAccessibilityDateLabel(forwardedValue, locale)\n              : undefined\n          }\n          aria-disabled={disabled}\n          {...rest}\n          ref={mergedContainerRef}\n        >\n          {left && (\n            <ThemeOverrider\n              overrides={(t) => ({\n                buttonPaddingHorizontal: 0.8,\n                baseHeight: t.selectToggleListItemHeight / t.sizes.small,\n              })}\n            >\n              <LeftAddon hasPadding={leftHasPadding}>{left}</LeftAddon>\n            </ThemeOverrider>\n          )}\n\n          <Content hasLeft={!!left} hasRight={!!right}>\n            {valueIsSpecified ? (\n              <Title disabled={disabled} aria-hidden>\n                {formattedValue}\n              </Title>\n            ) : (\n              <Placeholder>{placeholder}</Placeholder>\n            )}\n          </Content>\n\n          {rightValue && (\n            <ThemeOverrider\n              overrides={(t) => ({\n                buttonPaddingHorizontal: 0.8,\n                baseHeight: t.selectToggleListItemHeight / t.sizes.small,\n              })}\n            >\n              <RightAddon hasPadding={rightHasPaddingValue}>\n                {rightValue}\n              </RightAddon>\n            </ThemeOverrider>\n          )}\n        </SelectContainer>\n\n        {isMinXs ? (\n          <StyledPopover\n            trigger={containerRef}\n            placement='bottom-start'\n            visible={opened}\n            onClose={closeHandler}\n            size={size}\n          >\n            {calendar}\n            {timeComponent}\n          </StyledPopover>\n        ) : (\n          <Modal\n            title={placeholder}\n            footer={null}\n            visible={opened}\n            onClose={closeHandler}\n            size={size}\n          >\n            {calendar}\n            {timeComponent}\n          </Modal>\n        )}\n      </>\n    );\n  }\n);\n\nDatePicker.displayName = 'DatePicker';\n\nexport default DatePicker;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["styled","defaultLocale","getAccessibilityDateLabel","Down","Up","useIsMinWidth","ThemeOverrider","useForwardedRef","useForwardedState","useKeyPress","React","forwardRef","useCallback","useMemo","useRef","useState","Button","Modal","Popover","SelectContainer","ClearIcon","Content","IconContainer","LeftAddon","Placeholder","RightAddon","Title","TimePicker","DatePickerCalendar","StyledPopover","p","theme","datePickerPadding","TimeContainer","div","Dash","baseHeight","StyledTimePicker","DatePicker","left","leftHasPadding","right","rightHasPadding","placeholder","disabled","format","formatFn","firstDayOfWeek","locale","showTime","timeNotation","range","value","defaultValue","onChange","size","rest","ref","containerRef","mergedContainerRef","opened","setOpened","forwardedValue","setForwardedValue","dateToStr","date","toLocaleString","undefined","year","month","day","hour","minute","hour12","v","Array","isArray","map","item","join","formattedValue","closeHandler","window","isMinXs","valueIsSpecified","rightValue","e","stopPropagation","includes","key","current","focus","preventDefault","clearLabel","rightHasPaddingValue","calendarComponent","secondTimePickerRef","tabOnInputComplete","target","selectionStart","closeOnInputComplete","timeComponent","style","width","t","buttonPaddingHorizontal","selectToggleListItemHeight","sizes","small","displayName"],"sources":["../../../src/DatePicker/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport {\n  DatePickerLocale,\n  defaultLocale,\n  getAccessibilityDateLabel,\n} from '@os-design/date-picker-utils';\nimport { Down, Up } from '@os-design/icons';\nimport { useIsMinWidth } from '@os-design/media';\nimport { WithSize } from '@os-design/styles';\nimport { ThemeOverrider } from '@os-design/theming';\nimport {\n  useForwardedRef,\n  useForwardedState,\n  useKeyPress,\n} from '@os-design/utils';\nimport React, {\n  forwardRef,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport Button from '../Button';\nimport Modal from '../Modal';\nimport Popover from '../Popover';\nimport { SelectContainer } from '../Select';\nimport {\n  ClearIcon,\n  Content,\n  IconContainer,\n  LeftAddon,\n  Placeholder,\n  RightAddon,\n  Title,\n} from '../Select/SelectToggle';\nimport TimePicker from '../TimePicker';\nimport DatePickerCalendar from './DatePickerCalendar';\n\ntype JsxDivProps = Omit<\n  JSX.IntrinsicElements['div'],\n  'value' | 'defaultValue' | 'onChange' | 'ref'\n>;\ninterface BaseDatePickerProps<T> extends JsxDivProps, WithSize {\n  /**\n   * The component located on the left side.\n   * @default undefined\n   */\n  left?: React.ReactNode;\n  /**\n   * Adds padding to the left component.\n   * It can be useful when passing an icon or text in the left component.\n   * @default false\n   */\n  leftHasPadding?: boolean;\n  /**\n   * The component located on the right side.\n   * @default undefined\n   */\n  right?: React.ReactNode;\n  /**\n   * Adds padding to the right component.\n   * It can be useful when passing an icon or text in the right component.\n   * @default false\n   */\n  rightHasPadding?: boolean;\n  /**\n   * The placeholder of the date picker.\n   * @default undefined\n   */\n  placeholder?: string;\n  /**\n   * Whether the date picker is disabled.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * The format of the date.\n   * @default undefined\n   */\n  format?: (value: T) => string;\n  /**\n   * The first day of the week.\n   * @default sunday\n   */\n  firstDayOfWeek?: 'sunday' | 'monday';\n  /**\n   * The locale of the date picker.\n   * @default undefined\n   */\n  locale?: DatePickerLocale;\n  /**\n   * Whether the time is shown.\n   * @default false\n   */\n  showTime?: boolean;\n  /**\n   * The time notation.\n   * @default 12-hour\n   */\n  timeNotation?: '12-hour' | '24-hour';\n  /**\n   * Selected date.\n   * @default undefined\n   */\n  value?: T | null;\n  /**\n   * The default value.\n   * @default undefined\n   */\n  defaultValue?: T | null;\n  /**\n   * The change event handler.\n   * @default undefined\n   */\n  onChange?: (value: T | null) => void;\n}\ninterface DateNotRangePickerProps extends BaseDatePickerProps<Date> {\n  /**\n   * Whether the value is a range.\n   * @default false\n   */\n  range?: false;\n}\ninterface DateRangePickerProps extends BaseDatePickerProps<[Date, Date]> {\n  /**\n   * Whether the value is a range.\n   * @default false\n   */\n  range: true;\n}\nexport type DatePickerProps = DateNotRangePickerProps | DateRangePickerProps;\n\nconst StyledPopover = styled(Popover)`\n  padding: ${(p) => p.theme.datePickerPadding}em;\n`;\n\nconst TimeContainer = styled.div`\n  display: flex;\n  justify-content: center;\n  margin-top: 0.5em;\n`;\n\nconst Dash = styled.div`\n  margin: 0 0.5em;\n  line-height: ${(p) => p.theme.baseHeight}em;\n`;\n\nconst StyledTimePicker = styled(TimePicker)`\n  width: 2.5em;\n  text-align: center;\n`;\n\n/**\n * The component to choose a date.\n */\nconst DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(\n  (\n    {\n      left,\n      leftHasPadding = false,\n      right,\n      rightHasPadding = false,\n      placeholder,\n      disabled = false,\n      format: formatFn,\n      firstDayOfWeek = 'sunday',\n      locale = defaultLocale,\n      showTime = false,\n      timeNotation = '12-hour',\n      range = false,\n      value,\n      defaultValue,\n      onChange,\n      size,\n      ...rest\n    },\n    ref\n  ) => {\n    const [containerRef, mergedContainerRef] = useForwardedRef(ref);\n    const [opened, setOpened] = useState(false);\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    const [forwardedValue, setForwardedValue] = useForwardedState<any>({\n      value,\n      defaultValue,\n      onChange,\n    });\n\n    const format = useMemo(() => {\n      if (formatFn) return formatFn;\n\n      const dateToStr = (date: Date) =>\n        date.toLocaleString(undefined, {\n          year: 'numeric',\n          month: '2-digit',\n          day: '2-digit',\n          ...(showTime\n            ? {\n                hour: '2-digit',\n                minute: '2-digit',\n                hour12: timeNotation === '12-hour',\n              }\n            : {}),\n        });\n\n      return (v: Date | [Date, Date]) =>\n        Array.isArray(v)\n          ? v.map((item) => dateToStr(item)).join(' - ')\n          : dateToStr(v);\n    }, [formatFn, showTime, timeNotation]);\n\n    const formattedValue = useMemo(() => {\n      if (!forwardedValue) return null;\n      return format(forwardedValue);\n    }, [forwardedValue, format]);\n\n    const closeHandler = useCallback(() => {\n      setOpened(false);\n    }, []);\n\n    useKeyPress(\n      (typeof window !== 'undefined' ? window : undefined) as EventTarget,\n      'Escape',\n      closeHandler\n    );\n    const isMinXs = useIsMinWidth('xs');\n\n    const valueIsSpecified = useMemo(\n      () => formattedValue !== undefined && formattedValue !== null,\n      [formattedValue]\n    );\n\n    const rightValue = useMemo(() => {\n      if (valueIsSpecified) {\n        return (\n          <div aria-hidden>\n            <Button\n              type='ghost'\n              wide='never'\n              size='small'\n              disabled={disabled}\n              onClick={(e) => {\n                setForwardedValue(null);\n                e.stopPropagation();\n              }}\n              onKeyDown={(e) => {\n                if (disabled) return;\n                if (['Enter', ' '].includes(e.key)) {\n                  setForwardedValue(null);\n                  if (!containerRef.current) return;\n                  containerRef.current.focus();\n                  e.preventDefault();\n                  e.stopPropagation();\n                }\n              }}\n              aria-label={locale.clearLabel}\n            >\n              <ClearIcon />\n            </Button>\n          </div>\n        );\n      }\n      return (\n        right || <IconContainer>{opened ? <Up /> : <Down />}</IconContainer>\n      );\n    }, [\n      containerRef,\n      disabled,\n      locale.clearLabel,\n      opened,\n      right,\n      setForwardedValue,\n      valueIsSpecified,\n    ]);\n\n    const rightHasPaddingValue = useMemo(() => {\n      if (valueIsSpecified) return false;\n      return right ? rightHasPadding : true;\n    }, [right, rightHasPadding, valueIsSpecified]);\n\n    const calendarComponent = useMemo(\n      () => (\n        <DatePickerCalendar\n          firstDayOfWeek={firstDayOfWeek}\n          locale={locale}\n          range={range}\n          value={forwardedValue}\n          onChange={(v) => {\n            setForwardedValue(v);\n            if (!showTime && !range) {\n              closeHandler();\n            }\n          }}\n        />\n      ),\n      [\n        closeHandler,\n        firstDayOfWeek,\n        forwardedValue,\n        locale,\n        range,\n        setForwardedValue,\n        showTime,\n      ]\n    );\n\n    const secondTimePickerRef = useRef<HTMLInputElement>(null);\n\n    const tabOnInputComplete = useCallback((e) => {\n      if (e.target.selectionStart < 5) return;\n      secondTimePickerRef.current?.focus();\n    }, []);\n\n    const closeOnInputComplete = useCallback(\n      (e) => {\n        if (e.target.selectionStart < 5) return;\n        closeHandler();\n      },\n      [closeHandler]\n    );\n\n    const timeComponent = useMemo(\n      () =>\n        showTime && forwardedValue ? (\n          <TimeContainer>\n            {Array.isArray(forwardedValue) ? (\n              <>\n                <StyledTimePicker\n                  autoFocus\n                  disabled={disabled}\n                  notation={timeNotation}\n                  containerProps={{ style: { width: 'auto' } }}\n                  value={forwardedValue[0]}\n                  onChange={(v) => setForwardedValue([v, forwardedValue[1]])}\n                  onKeyDown={(e) => {\n                    if (disabled) return;\n                    if (e.key === 'Enter') {\n                      setOpened(!opened);\n                    }\n                  }}\n                  onKeyUp={tabOnInputComplete}\n                />\n                <Dash>–</Dash>\n                <StyledTimePicker\n                  ref={secondTimePickerRef}\n                  disabled={disabled}\n                  notation={timeNotation}\n                  containerProps={{ style: { width: 'auto' } }}\n                  value={forwardedValue[1]}\n                  onChange={(v) => setForwardedValue([forwardedValue[0], v])}\n                  onKeyDown={(e) => {\n                    if (disabled) return;\n                    if (e.key === 'Enter') {\n                      setOpened(!opened);\n                    }\n                  }}\n                  onKeyUp={closeOnInputComplete}\n                />\n              </>\n            ) : (\n              <StyledTimePicker\n                autoFocus\n                disabled={disabled}\n                notation={timeNotation}\n                containerProps={{ style: { width: 'auto' } }}\n                value={forwardedValue}\n                onChange={setForwardedValue}\n                onKeyDown={(e) => {\n                  if (disabled) return;\n                  if (e.key === 'Enter') {\n                    setOpened(!opened);\n                  }\n                }}\n                onKeyUp={closeOnInputComplete}\n              />\n            )}\n          </TimeContainer>\n        ) : null,\n      [\n        closeOnInputComplete,\n        disabled,\n        forwardedValue,\n        opened,\n        setForwardedValue,\n        showTime,\n        tabOnInputComplete,\n        timeNotation,\n      ]\n    );\n\n    return (\n      <>\n        <SelectContainer\n          opened={opened}\n          disabled={disabled}\n          size={size}\n          tabIndex={!disabled ? 0 : -1}\n          onClick={() => {\n            if (disabled) return;\n            setOpened(!opened);\n          }}\n          onKeyDown={(e) => {\n            if (disabled) return;\n            if (['Enter', ' '].includes(e.key)) {\n              setOpened(!opened);\n              e.preventDefault();\n            }\n          }}\n          onMouseDown={(e) => e.preventDefault()}\n          role='combobox'\n          aria-label={\n            forwardedValue\n              ? getAccessibilityDateLabel(forwardedValue, locale)\n              : undefined\n          }\n          aria-disabled={disabled}\n          {...rest}\n          ref={mergedContainerRef}\n        >\n          {left && (\n            <ThemeOverrider\n              overrides={(t) => ({\n                buttonPaddingHorizontal: 0.8,\n                baseHeight: t.selectToggleListItemHeight / t.sizes.small,\n              })}\n            >\n              <LeftAddon hasPadding={leftHasPadding}>{left}</LeftAddon>\n            </ThemeOverrider>\n          )}\n\n          <Content hasLeft={!!left} hasRight={!!right}>\n            {valueIsSpecified ? (\n              <Title disabled={disabled} aria-hidden>\n                {formattedValue}\n              </Title>\n            ) : (\n              <Placeholder>{placeholder}</Placeholder>\n            )}\n          </Content>\n\n          {rightValue && (\n            <ThemeOverrider\n              overrides={(t) => ({\n                buttonPaddingHorizontal: 0.8,\n                baseHeight: t.selectToggleListItemHeight / t.sizes.small,\n              })}\n            >\n              <RightAddon hasPadding={rightHasPaddingValue}>\n                {rightValue}\n              </RightAddon>\n            </ThemeOverrider>\n          )}\n        </SelectContainer>\n\n        {isMinXs ? (\n          <StyledPopover\n            trigger={containerRef}\n            placement='bottom-start'\n            visible={opened}\n            onClose={closeHandler}\n            size={size}\n          >\n            {calendarComponent}\n            {timeComponent}\n          </StyledPopover>\n        ) : (\n          <Modal\n            title={placeholder}\n            header={null}\n            footer={null}\n            visible={opened}\n            onClose={closeHandler}\n            size={size}\n          >\n            {calendarComponent}\n            {timeComponent}\n          </Modal>\n        )}\n      </>\n    );\n  }\n);\n\nDatePicker.displayName = 'DatePicker';\n\nexport default DatePicker;\n"],"mappings":"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"}

package/dist/esm/TimePicker/index.js

@@ -94,7 +94,7 @@ const TimePicker = /*#__PURE__*/forwardRef(({
     maxLength: 5,
     disabled: disabled,
     value: time,
-    right: /*#__PURE__*/React.createElement(React.Fragment, null, notation === '12-hour' && /*#__PURE__*/React.createElement(Button, {
+    right: (notation === '12-hour' || right) && /*#__PURE__*/React.createElement(React.Fragment, null, notation === '12-hour' && /*#__PURE__*/React.createElement(Button, {
       type: "ghost",
       wide: "never",
       size: "small",

package/dist/esm/TimePicker/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["isDigitKey","replaceChar","parseTime","useForwardedRef","useForwardedState","React","forwardRef","useCallback","useEffect","useMemo","useRef","useState","Button","Input","pad","n","toString","padStart","HOURS_12","TimePicker","notation","value","defaultValue","onChange","onSelect","onKeyDown","disabled","right","rest","ref","inputRef","mergedInputRef","forwardedValue","setForwardedValue","selection","setSelection","start","end","isPm","getHours","setTime","time","h","m","nextValue","Date","getTime","setHours","setMinutes","setTimeRef","current","hour","minute","getMinutes","changePeriod","nextIsPm","setSelectionRange","keyDownHandler","e","nextCaret","key","metaKey","pos","preventDefault","selectionStart","selectionEnd","currentTarget","displayName"],"sources":["../../../src/TimePicker/index.tsx"],"sourcesContent":["import {\n  isDigitKey,\n  replaceChar,\n  parseTime,\n} from '@os-design/time-picker-utils';\nimport { useForwardedRef, useForwardedState } from '@os-design/utils';\nimport React, {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport Button from '../Button';\nimport Input, { InputProps } from '../Input';\n\nexport interface TimePickerProps\n  extends Omit<InputProps, 'type' | 'value' | 'defaultValue' | 'onChange'> {\n  /**\n   * The time notation.\n   * @default 12-hour\n   */\n  notation?: '12-hour' | '24-hour';\n  /**\n   * The selected date.\n   * @default undefined\n   */\n  value?: Date;\n  /**\n   * The default value.\n   * @default undefined\n   */\n  defaultValue?: Date;\n  /**\n   * The change event handler.\n   * @default undefined\n   */\n  onChange?: (value: Date) => void;\n}\n\ninterface Selection {\n  start: number;\n  end: number;\n}\n\nconst pad = (n: number) => n.toString().padStart(2, '0');\nconst HOURS_12 = 12 * 60 * 60 * 1000;\n\n/**\n * The component to choose a time.\n */\nconst TimePicker = forwardRef<HTMLInputElement, TimePickerProps>(\n  (\n    {\n      notation = '12-hour',\n      value,\n      defaultValue,\n      onChange = () => {},\n      onSelect = () => {},\n      onKeyDown = () => {},\n      disabled = false,\n      right,\n      ...rest\n    },\n    ref\n  ) => {\n    const [inputRef, mergedInputRef] = useForwardedRef(ref);\n    const [forwardedValue, setForwardedValue] = useForwardedState({\n      value,\n      defaultValue,\n      onChange,\n    });\n    const [selection, setSelection] = useState<Selection>({ start: 0, end: 0 });\n\n    const isPm = useMemo(\n      () => !!forwardedValue && forwardedValue.getHours() >= 12,\n      [forwardedValue]\n    );\n\n    const setTime = useCallback(\n      (time: string) => {\n        const [h, m] = parseTime(time, notation, isPm);\n        const nextValue = new Date(\n          forwardedValue ? forwardedValue.getTime() : 0\n        );\n        nextValue.setHours(h);\n        nextValue.setMinutes(m);\n        setForwardedValue(nextValue);\n      },\n      [forwardedValue, isPm, notation, setForwardedValue]\n    );\n\n    const setTimeRef = useRef(setTime);\n    useEffect(() => {\n      setTimeRef.current = setTime;\n    }, [setTime]);\n\n    const time = useMemo(() => {\n      if (!forwardedValue) return notation === '12-hour' ? '12:00' : '00:00';\n      const hour =\n        notation === '12-hour'\n          ? forwardedValue.getHours() % 12 || 12\n          : forwardedValue.getHours();\n      const minute = forwardedValue.getMinutes();\n      return `${pad(hour)}:${pad(minute)}`;\n    }, [forwardedValue, notation]);\n\n    const changePeriod = useCallback(\n      (nextIsPm: boolean) => {\n        if (!forwardedValue) return;\n        const nextValue = new Date(\n          forwardedValue.getTime() + HOURS_12 * (nextIsPm ? 1 : -1)\n        );\n        setForwardedValue(nextValue);\n      },\n      [forwardedValue, setForwardedValue]\n    );\n\n    // Update the selection\n    useEffect(() => {\n      if (!inputRef.current) return;\n      inputRef.current.setSelectionRange(selection.start, selection.end);\n    }, [inputRef, selection]);\n\n    const keyDownHandler = useCallback(\n      (e) => {\n        let nextCaret = selection.start;\n        if (e.key === 'ArrowUp' || (e.key === 'ArrowLeft' && e.metaKey)) {\n          nextCaret = 0;\n        } else if (\n          e.key === 'ArrowDown' ||\n          (e.key === 'ArrowRight' && e.metaKey)\n        ) {\n          nextCaret = 5;\n        } else if (e.key === 'ArrowLeft') {\n          nextCaret = selection.start > 0 ? selection.start - 1 : 0;\n        } else if (e.key === 'ArrowRight') {\n          nextCaret = selection.start < 5 ? selection.start + 1 : 5;\n        } else if (e.key === 'Backspace') {\n          setTimeRef.current('00:00');\n          nextCaret = 0;\n        } else if (isDigitKey(e.key)) {\n          let pos = selection.start === 2 ? 3 : selection.start;\n          if (pos === 5) pos = 0;\n          setTimeRef.current(replaceChar(time, pos, e.key));\n          nextCaret = pos < 5 ? pos + 1 : 5;\n        }\n        setSelection({ start: nextCaret, end: nextCaret });\n        onKeyDown(e);\n        e.preventDefault();\n      },\n      [onKeyDown, selection.start, time]\n    );\n\n    return (\n      <Input\n        type='text'\n        inputMode='decimal'\n        role='spinbutton'\n        minLength={5}\n        maxLength={5}\n        disabled={disabled}\n        value={time}\n        right={\n          <>\n            {notation === '12-hour' && (\n              <Button\n                type='ghost'\n                wide='never'\n                size='small'\n                disabled={disabled}\n                onClick={() => changePeriod(!isPm)}\n              >\n                {isPm ? 'PM' : 'AM'}\n              </Button>\n            )}\n\n            {right}\n          </>\n        }\n        onSelect={(e) => {\n          // Update the selection state.\n          const { selectionStart, selectionEnd } = e.currentTarget;\n          setSelection({ start: selectionStart || 0, end: selectionEnd || 0 });\n          onSelect(e);\n        }}\n        onKeyDown={keyDownHandler}\n        {...rest}\n        ref={mergedInputRef}\n      />\n    );\n  }\n);\n\nTimePicker.displayName = 'TimePicker';\n\nexport default TimePicker;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["isDigitKey","replaceChar","parseTime","useForwardedRef","useForwardedState","React","forwardRef","useCallback","useEffect","useMemo","useRef","useState","Button","Input","pad","n","toString","padStart","HOURS_12","TimePicker","notation","value","defaultValue","onChange","onSelect","onKeyDown","disabled","right","rest","ref","inputRef","mergedInputRef","forwardedValue","setForwardedValue","selection","setSelection","start","end","isPm","getHours","setTime","time","h","m","nextValue","Date","getTime","setHours","setMinutes","setTimeRef","current","hour","minute","getMinutes","changePeriod","nextIsPm","setSelectionRange","keyDownHandler","e","nextCaret","key","metaKey","pos","preventDefault","selectionStart","selectionEnd","currentTarget","displayName"],"sources":["../../../src/TimePicker/index.tsx"],"sourcesContent":["import {\n  isDigitKey,\n  replaceChar,\n  parseTime,\n} from '@os-design/time-picker-utils';\nimport { useForwardedRef, useForwardedState } from '@os-design/utils';\nimport React, {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport Button from '../Button';\nimport Input, { InputProps } from '../Input';\n\nexport interface TimePickerProps\n  extends Omit<InputProps, 'type' | 'value' | 'defaultValue' | 'onChange'> {\n  /**\n   * The time notation.\n   * @default 12-hour\n   */\n  notation?: '12-hour' | '24-hour';\n  /**\n   * The selected date.\n   * @default undefined\n   */\n  value?: Date;\n  /**\n   * The default value.\n   * @default undefined\n   */\n  defaultValue?: Date;\n  /**\n   * The change event handler.\n   * @default undefined\n   */\n  onChange?: (value: Date) => void;\n}\n\ninterface Selection {\n  start: number;\n  end: number;\n}\n\nconst pad = (n: number) => n.toString().padStart(2, '0');\nconst HOURS_12 = 12 * 60 * 60 * 1000;\n\n/**\n * The component to choose a time.\n */\nconst TimePicker = forwardRef<HTMLInputElement, TimePickerProps>(\n  (\n    {\n      notation = '12-hour',\n      value,\n      defaultValue,\n      onChange = () => {},\n      onSelect = () => {},\n      onKeyDown = () => {},\n      disabled = false,\n      right,\n      ...rest\n    },\n    ref\n  ) => {\n    const [inputRef, mergedInputRef] = useForwardedRef(ref);\n    const [forwardedValue, setForwardedValue] = useForwardedState({\n      value,\n      defaultValue,\n      onChange,\n    });\n    const [selection, setSelection] = useState<Selection>({ start: 0, end: 0 });\n\n    const isPm = useMemo(\n      () => !!forwardedValue && forwardedValue.getHours() >= 12,\n      [forwardedValue]\n    );\n\n    const setTime = useCallback(\n      (time: string) => {\n        const [h, m] = parseTime(time, notation, isPm);\n        const nextValue = new Date(\n          forwardedValue ? forwardedValue.getTime() : 0\n        );\n        nextValue.setHours(h);\n        nextValue.setMinutes(m);\n        setForwardedValue(nextValue);\n      },\n      [forwardedValue, isPm, notation, setForwardedValue]\n    );\n\n    const setTimeRef = useRef(setTime);\n    useEffect(() => {\n      setTimeRef.current = setTime;\n    }, [setTime]);\n\n    const time = useMemo(() => {\n      if (!forwardedValue) return notation === '12-hour' ? '12:00' : '00:00';\n      const hour =\n        notation === '12-hour'\n          ? forwardedValue.getHours() % 12 || 12\n          : forwardedValue.getHours();\n      const minute = forwardedValue.getMinutes();\n      return `${pad(hour)}:${pad(minute)}`;\n    }, [forwardedValue, notation]);\n\n    const changePeriod = useCallback(\n      (nextIsPm: boolean) => {\n        if (!forwardedValue) return;\n        const nextValue = new Date(\n          forwardedValue.getTime() + HOURS_12 * (nextIsPm ? 1 : -1)\n        );\n        setForwardedValue(nextValue);\n      },\n      [forwardedValue, setForwardedValue]\n    );\n\n    // Update the selection\n    useEffect(() => {\n      if (!inputRef.current) return;\n      inputRef.current.setSelectionRange(selection.start, selection.end);\n    }, [inputRef, selection]);\n\n    const keyDownHandler = useCallback(\n      (e) => {\n        let nextCaret = selection.start;\n        if (e.key === 'ArrowUp' || (e.key === 'ArrowLeft' && e.metaKey)) {\n          nextCaret = 0;\n        } else if (\n          e.key === 'ArrowDown' ||\n          (e.key === 'ArrowRight' && e.metaKey)\n        ) {\n          nextCaret = 5;\n        } else if (e.key === 'ArrowLeft') {\n          nextCaret = selection.start > 0 ? selection.start - 1 : 0;\n        } else if (e.key === 'ArrowRight') {\n          nextCaret = selection.start < 5 ? selection.start + 1 : 5;\n        } else if (e.key === 'Backspace') {\n          setTimeRef.current('00:00');\n          nextCaret = 0;\n        } else if (isDigitKey(e.key)) {\n          let pos = selection.start === 2 ? 3 : selection.start;\n          if (pos === 5) pos = 0;\n          setTimeRef.current(replaceChar(time, pos, e.key));\n          nextCaret = pos < 5 ? pos + 1 : 5;\n        }\n        setSelection({ start: nextCaret, end: nextCaret });\n        onKeyDown(e);\n        e.preventDefault();\n      },\n      [onKeyDown, selection.start, time]\n    );\n\n    return (\n      <Input\n        type='text'\n        inputMode='decimal'\n        role='spinbutton'\n        minLength={5}\n        maxLength={5}\n        disabled={disabled}\n        value={time}\n        right={\n          (notation === '12-hour' || right) && (\n            <>\n              {notation === '12-hour' && (\n                <Button\n                  type='ghost'\n                  wide='never'\n                  size='small'\n                  disabled={disabled}\n                  onClick={() => changePeriod(!isPm)}\n                >\n                  {isPm ? 'PM' : 'AM'}\n                </Button>\n              )}\n              {right}\n            </>\n          )\n        }\n        onSelect={(e) => {\n          // Update the selection state.\n          const { selectionStart, selectionEnd } = e.currentTarget;\n          setSelection({ start: selectionStart || 0, end: selectionEnd || 0 });\n          onSelect(e);\n        }}\n        onKeyDown={keyDownHandler}\n        {...rest}\n        ref={mergedInputRef}\n      />\n    );\n  }\n);\n\nTimePicker.displayName = 'TimePicker';\n\nexport default TimePicker;\n"],"mappings":";AAAA,SACEA,UAAU,EACVC,WAAW,EACXC,SAAS,QACJ,8BAA8B;AACrC,SAASC,eAAe,EAAEC,iBAAiB,QAAQ,kBAAkB;AACrE,OAAOC,KAAK,IACVC,UAAU,EACVC,WAAW,EACXC,SAAS,EACTC,OAAO,EACPC,MAAM,EACNC,QAAQ,QACH,OAAO;AACd,OAAOC,MAAM,MAAM,WAAW;AAC9B,OAAOC,KAAK,MAAsB,UAAU;AA+B5C,MAAMC,GAAG,GAAIC,CAAS,IAAKA,CAAC,CAACC,QAAQ,EAAE,CAACC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC;AACxD,MAAMC,QAAQ,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,IAAI;;AAEpC;AACA;AACA;AACA,MAAMC,UAAU,gBAAGb,UAAU,CAC3B,CACE;EACEc,QAAQ,GAAG,SAAS;EACpBC,KAAK;EACLC,YAAY;EACZC,QAAQ,GAAG,MAAM,CAAC,CAAC;EACnBC,QAAQ,GAAG,MAAM,CAAC,CAAC;EACnBC,SAAS,GAAG,MAAM,CAAC,CAAC;EACpBC,QAAQ,GAAG,KAAK;EAChBC,KAAK;EACL,GAAGC;AACL,CAAC,EACDC,GAAG,KACA;EACH,MAAM,CAACC,QAAQ,EAAEC,cAAc,CAAC,GAAG5B,eAAe,CAAC0B,GAAG,CAAC;EACvD,MAAM,CAACG,cAAc,EAAEC,iBAAiB,CAAC,GAAG7B,iBAAiB,CAAC;IAC5DiB,KAAK;IACLC,YAAY;IACZC;EACF,CAAC,CAAC;EACF,MAAM,CAACW,SAAS,EAAEC,YAAY,CAAC,GAAGxB,QAAQ,CAAY;IAAEyB,KAAK,EAAE,CAAC;IAAEC,GAAG,EAAE;EAAE,CAAC,CAAC;EAE3E,MAAMC,IAAI,GAAG7B,OAAO,CAClB,MAAM,CAAC,CAACuB,cAAc,IAAIA,cAAc,CAACO,QAAQ,EAAE,IAAI,EAAE,EACzD,CAACP,cAAc,CAAC,CACjB;EAED,MAAMQ,OAAO,GAAGjC,WAAW,CACxBkC,IAAY,IAAK;IAChB,MAAM,CAACC,CAAC,EAAEC,CAAC,CAAC,GAAGzC,SAAS,CAACuC,IAAI,EAAErB,QAAQ,EAAEkB,IAAI,CAAC;IAC9C,MAAMM,SAAS,GAAG,IAAIC,IAAI,CACxBb,cAAc,GAAGA,cAAc,CAACc,OAAO,EAAE,GAAG,CAAC,CAC9C;IACDF,SAAS,CAACG,QAAQ,CAACL,CAAC,CAAC;IACrBE,SAAS,CAACI,UAAU,CAACL,CAAC,CAAC;IACvBV,iBAAiB,CAACW,SAAS,CAAC;EAC9B,CAAC,EACD,CAACZ,cAAc,EAAEM,IAAI,EAAElB,QAAQ,EAAEa,iBAAiB,CAAC,CACpD;EAED,MAAMgB,UAAU,GAAGvC,MAAM,CAAC8B,OAAO,CAAC;EAClChC,SAAS,CAAC,MAAM;IACdyC,UAAU,CAACC,OAAO,GAAGV,OAAO;EAC9B,CAAC,EAAE,CAACA,OAAO,CAAC,CAAC;EAEb,MAAMC,IAAI,GAAGhC,OAAO,CAAC,MAAM;IACzB,IAAI,CAACuB,cAAc,EAAE,OAAOZ,QAAQ,KAAK,SAAS,GAAG,OAAO,GAAG,OAAO;IACtE,MAAM+B,IAAI,GACR/B,QAAQ,KAAK,SAAS,GAClBY,cAAc,CAACO,QAAQ,EAAE,GAAG,EAAE,IAAI,EAAE,GACpCP,cAAc,CAACO,QAAQ,EAAE;IAC/B,MAAMa,MAAM,GAAGpB,cAAc,CAACqB,UAAU,EAAE;IAC1C,OAAQ,GAAEvC,GAAG,CAACqC,IAAI,CAAE,IAAGrC,GAAG,CAACsC,MAAM,CAAE,EAAC;EACtC,CAAC,EAAE,CAACpB,cAAc,EAAEZ,QAAQ,CAAC,CAAC;EAE9B,MAAMkC,YAAY,GAAG/C,WAAW,CAC7BgD,QAAiB,IAAK;IACrB,IAAI,CAACvB,cAAc,EAAE;IACrB,MAAMY,SAAS,GAAG,IAAIC,IAAI,CACxBb,cAAc,CAACc,OAAO,EAAE,GAAG5B,QAAQ,IAAIqC,QAAQ,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,CAC1D;IACDtB,iBAAiB,CAACW,SAAS,CAAC;EAC9B,CAAC,EACD,CAACZ,cAAc,EAAEC,iBAAiB,CAAC,CACpC;;EAED;EACAzB,SAAS,CAAC,MAAM;IACd,IAAI,CAACsB,QAAQ,CAACoB,OAAO,EAAE;IACvBpB,QAAQ,CAACoB,OAAO,CAACM,iBAAiB,CAACtB,SAAS,CAACE,KAAK,EAAEF,SAAS,CAACG,GAAG,CAAC;EACpE,CAAC,EAAE,CAACP,QAAQ,EAAEI,SAAS,CAAC,CAAC;EAEzB,MAAMuB,cAAc,GAAGlD,WAAW,CAC/BmD,CAAC,IAAK;IACL,IAAIC,SAAS,GAAGzB,SAAS,CAACE,KAAK;IAC/B,IAAIsB,CAAC,CAACE,GAAG,KAAK,SAAS,IAAKF,CAAC,CAACE,GAAG,KAAK,WAAW,IAAIF,CAAC,CAACG,OAAQ,EAAE;MAC/DF,SAAS,GAAG,CAAC;IACf,CAAC,MAAM,IACLD,CAAC,CAACE,GAAG,KAAK,WAAW,IACpBF,CAAC,CAACE,GAAG,KAAK,YAAY,IAAIF,CAAC,CAACG,OAAQ,EACrC;MACAF,SAAS,GAAG,CAAC;IACf,CAAC,MAAM,IAAID,CAAC,CAACE,GAAG,KAAK,WAAW,EAAE;MAChCD,SAAS,GAAGzB,SAAS,CAACE,KAAK,GAAG,CAAC,GAAGF,SAAS,CAACE,KAAK,GAAG,CAAC,GAAG,CAAC;IAC3D,CAAC,MAAM,IAAIsB,CAAC,CAACE,GAAG,KAAK,YAAY,EAAE;MACjCD,SAAS,GAAGzB,SAAS,CAACE,KAAK,GAAG,CAAC,GAAGF,SAAS,CAACE,KAAK,GAAG,CAAC,GAAG,CAAC;IAC3D,CAAC,MAAM,IAAIsB,CAAC,CAACE,GAAG,KAAK,WAAW,EAAE;MAChCX,UAAU,CAACC,OAAO,CAAC,OAAO,CAAC;MAC3BS,SAAS,GAAG,CAAC;IACf,CAAC,MAAM,IAAI3D,UAAU,CAAC0D,CAAC,CAACE,GAAG,CAAC,EAAE;MAC5B,IAAIE,GAAG,GAAG5B,SAAS,CAACE,KAAK,KAAK,CAAC,GAAG,CAAC,GAAGF,SAAS,CAACE,KAAK;MACrD,IAAI0B,GAAG,KAAK,CAAC,EAAEA,GAAG,GAAG,CAAC;MACtBb,UAAU,CAACC,OAAO,CAACjD,WAAW,CAACwC,IAAI,EAAEqB,GAAG,EAAEJ,CAAC,CAACE,GAAG,CAAC,CAAC;MACjDD,SAAS,GAAGG,GAAG,GAAG,CAAC,GAAGA,GAAG,GAAG,CAAC,GAAG,CAAC;IACnC;IACA3B,YAAY,CAAC;MAAEC,KAAK,EAAEuB,SAAS;MAAEtB,GAAG,EAAEsB;IAAU,CAAC,CAAC;IAClDlC,SAAS,CAACiC,CAAC,CAAC;IACZA,CAAC,CAACK,cAAc,EAAE;EACpB,CAAC,EACD,CAACtC,SAAS,EAAES,SAAS,CAACE,KAAK,EAAEK,IAAI,CAAC,CACnC;EAED,oBACE,oBAAC,KAAK;IACJ,IAAI,EAAC,MAAM;IACX,SAAS,EAAC,SAAS;IACnB,IAAI,EAAC,YAAY;IACjB,SAAS,EAAE,CAAE;IACb,SAAS,EAAE,CAAE;IACb,QAAQ,EAAEf,QAAS;IACnB,KAAK,EAAEe,IAAK;IACZ,KAAK,EACH,CAACrB,QAAQ,KAAK,SAAS,IAAIO,KAAK,kBAC9B,0CACGP,QAAQ,KAAK,SAAS,iBACrB,oBAAC,MAAM;MACL,IAAI,EAAC,OAAO;MACZ,IAAI,EAAC,OAAO;MACZ,IAAI,EAAC,OAAO;MACZ,QAAQ,EAAEM,QAAS;MACnB,OAAO,EAAE,MAAM4B,YAAY,CAAC,CAAChB,IAAI;IAAE,GAElCA,IAAI,GAAG,IAAI,GAAG,IAAI,CAEtB,EACAX,KAAK,CAGX;IACD,QAAQ,EAAG+B,CAAC,IAAK;MACf;MACA,MAAM;QAAEM,cAAc;QAAEC;MAAa,CAAC,GAAGP,CAAC,CAACQ,aAAa;MACxD/B,YAAY,CAAC;QAAEC,KAAK,EAAE4B,cAAc,IAAI,CAAC;QAAE3B,GAAG,EAAE4B,YAAY,IAAI;MAAE,CAAC,CAAC;MACpEzC,QAAQ,CAACkC,CAAC,CAAC;IACb,CAAE;IACF,SAAS,EAAED;EAAe,GACtB7B,IAAI;IACR,GAAG,EAAEG;EAAe,GACpB;AAEN,CAAC,CACF;AAEDZ,UAAU,CAACgD,WAAW,GAAG,YAAY;AAErC,eAAehD,UAAU"}

package/dist/types/DatePicker/DatePickerCalendar.d.ts

@@ -3,8 +3,9 @@ import React from 'react';
 interface DatePickerCalendarProps {
     firstDayOfWeek: 'sunday' | 'monday';
     locale: DatePickerLocale;
-    value?: Date | null;
-    onChange?: (value: Date) => void;
+    range: boolean;
+    value?: Date | [Date, Date] | null;
+    onChange?: (value: Date | [Date, Date]) => void;
 }
 declare const DatePickerCalendar: React.FC<DatePickerCalendarProps>;
 export default DatePickerCalendar;

package/dist/types/DatePicker/DatePickerCalendar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DatePickerCalendar.d.ts","sourceRoot":"","sources":["../../../src/DatePicker/DatePickerCalendar.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,gBAAgB,EAGjB,MAAM,8BAA8B,CAAC;AAQtC,OAAO,KAAyD,MAAM,OAAO,CAAC;AAG9E,UAAU,uBAAuB;IAC/B,cAAc,EAAE,QAAQ,GAAG,QAAQ,CAAC;IACpC,MAAM,EAAE,gBAAgB,CAAC;IACzB,KAAK,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,KAAK,IAAI,CAAC;CAClC;AAyED,QAAA,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CA4HzD,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"DatePickerCalendar.d.ts","sourceRoot":"","sources":["../../../src/DatePicker/DatePickerCalendar.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,gBAAgB,EAGjB,MAAM,8BAA8B,CAAC;AAQtC,OAAO,KAAyD,MAAM,OAAO,CAAC;AAG9E,UAAU,uBAAuB;IAC/B,cAAc,EAAE,QAAQ,GAAG,QAAQ,CAAC;IACpC,MAAM,EAAE,gBAAgB,CAAC;IACzB,KAAK,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,IAAI,GAAG,CAAC,IAAI,EAAE,IAAI,CAAC,GAAG,IAAI,CAAC;IACnC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,GAAG,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,IAAI,CAAC;CACjD;AA+FD,QAAA,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CA+IzD,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/dist/types/DatePicker/index.d.ts

@@ -2,22 +2,29 @@ import { DatePickerLocale } from '@os-design/date-picker-utils';
 import { WithSize } from '@os-design/styles';
 import React from 'react';
 declare type JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'value' | 'defaultValue' | 'onChange' | 'ref'>;
-export interface DatePickerProps extends JsxDivProps, WithSize {
+interface BaseDatePickerProps<T> extends JsxDivProps, WithSize {
     left?: React.ReactNode;
     leftHasPadding?: boolean;
     right?: React.ReactNode;
     rightHasPadding?: boolean;
     placeholder?: string;
     disabled?: boolean;
-    format?: (date: Date) => string;
+    format?: (value: T) => string;
     firstDayOfWeek?: 'sunday' | 'monday';
     locale?: DatePickerLocale;
     showTime?: boolean;
     timeNotation?: '12-hour' | '24-hour';
-    value?: Date | null;
-    defaultValue?: Date | null;
-    onChange?: (value: Date | null) => void;
+    value?: T | null;
+    defaultValue?: T | null;
+    onChange?: (value: T | null) => void;
 }
+interface DateNotRangePickerProps extends BaseDatePickerProps<Date> {
+    range?: false;
+}
+interface DateRangePickerProps extends BaseDatePickerProps<[Date, Date]> {
+    range: true;
+}
+export declare type DatePickerProps = DateNotRangePickerProps | DateRangePickerProps;
 declare const DatePicker: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<HTMLDivElement>>;
 export default DatePicker;
 //# sourceMappingURL=index.d.ts.map

package/dist/types/DatePicker/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/DatePicker/index.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,gBAAgB,EAGjB,MAAM,8BAA8B,CAAC;AAGtC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAO7C,OAAO,KAAqD,MAAM,OAAO,CAAC;AAiB1E,aAAK,WAAW,GAAG,IAAI,CACrB,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAC5B,OAAO,GAAG,cAAc,GAAG,UAAU,GAAG,KAAK,CAC9C,CAAC;AACF,MAAM,WAAW,eAAgB,SAAQ,WAAW,EAAE,QAAQ;IAK5D,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAMvB,cAAc,CAAC,EAAE,OAAO,CAAC;IAKzB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAMxB,eAAe,CAAC,EAAE,OAAO,CAAC;IAK1B,WAAW,CAAC,EAAE,MAAM,CAAC;IAKrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAKnB,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,MAAM,CAAC;IAKhC,cAAc,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAKrC,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAK1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IAKnB,YAAY,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAKrC,KAAK,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAKpB,YAAY,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAK3B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAC;CACzC;AAaD,QAAA,MAAM,UAAU,wFAuPf,CAAC;AAIF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/DatePicker/index.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,gBAAgB,EAGjB,MAAM,8BAA8B,CAAC;AAGtC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAO7C,OAAO,KAMN,MAAM,OAAO,CAAC;AAiBf,aAAK,WAAW,GAAG,IAAI,CACrB,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAC5B,OAAO,GAAG,cAAc,GAAG,UAAU,GAAG,KAAK,CAC9C,CAAC;AACF,UAAU,mBAAmB,CAAC,CAAC,CAAE,SAAQ,WAAW,EAAE,QAAQ;IAK5D,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAMvB,cAAc,CAAC,EAAE,OAAO,CAAC;IAKzB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAMxB,eAAe,CAAC,EAAE,OAAO,CAAC;IAK1B,WAAW,CAAC,EAAE,MAAM,CAAC;IAKrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAKnB,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,MAAM,CAAC;IAK9B,cAAc,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAKrC,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAK1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IAKnB,YAAY,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAKrC,KAAK,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC;IAKjB,YAAY,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC;IAKxB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,GAAG,IAAI,KAAK,IAAI,CAAC;CACtC;AACD,UAAU,uBAAwB,SAAQ,mBAAmB,CAAC,IAAI,CAAC;IAKjE,KAAK,CAAC,EAAE,KAAK,CAAC;CACf;AACD,UAAU,oBAAqB,SAAQ,mBAAmB,CAAC,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;IAKtE,KAAK,EAAE,IAAI,CAAC;CACb;AACD,oBAAY,eAAe,GAAG,uBAAuB,GAAG,oBAAoB,CAAC;AAyB7E,QAAA,MAAM,UAAU,wFAqUf,CAAC;AAIF,eAAe,UAAU,CAAC"}

package/dist/types/TimePicker/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/TimePicker/index.tsx"],"names":[],"mappings":"AAMA,OAAO,KAON,MAAM,OAAO,CAAC;AAEf,OAAc,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAE7C,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,UAAU,EAAE,MAAM,GAAG,OAAO,GAAG,cAAc,GAAG,UAAU,CAAC;IAKxE,QAAQ,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAKjC,KAAK,CAAC,EAAE,IAAI,CAAC;IAKb,YAAY,CAAC,EAAE,IAAI,CAAC;IAKpB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,KAAK,IAAI,CAAC;CAClC;AAaD,QAAA,MAAM,UAAU,0FA6If,CAAC;AAIF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/TimePicker/index.tsx"],"names":[],"mappings":"AAMA,OAAO,KAON,MAAM,OAAO,CAAC;AAEf,OAAc,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAE7C,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,UAAU,EAAE,MAAM,GAAG,OAAO,GAAG,cAAc,GAAG,UAAU,CAAC;IAKxE,QAAQ,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAKjC,KAAK,CAAC,EAAE,IAAI,CAAC;IAKb,YAAY,CAAC,EAAE,IAAI,CAAC;IAKpB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,KAAK,IAAI,CAAC;CAClC;AAaD,QAAA,MAAM,UAAU,0FA8If,CAAC;AAIF,eAAe,UAAU,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@os-design/core",
-  "version": "1.0.161",
+  "version": "1.0.163",
   "license": "UNLICENSED",
   "repository": "git@gitlab.com:os-team/libs/os-design.git",
   "main": "dist/cjs/index.js",
@@ -29,16 +29,16 @@
     "access": "public"
   },
   "dependencies": {
-    "@os-design/date-picker-utils": "^1.0.11",
-    "@os-design/icons": "^1.0.41",
-    "@os-design/input-number-utils": "^1.0.16",
-    "@os-design/media": "^1.0.15",
-    "@os-design/menu-utils": "^1.0.10",
-    "@os-design/portal": "^1.0.6",
-    "@os-design/styles": "^1.0.39",
-    "@os-design/theming": "^1.0.37",
-    "@os-design/time-picker-utils": "^1.0.2",
-    "@os-design/utils": "^1.0.55",
+    "@os-design/date-picker-utils": "^1.0.13",
+    "@os-design/icons": "^1.0.42",
+    "@os-design/input-number-utils": "^1.0.17",
+    "@os-design/media": "^1.0.16",
+    "@os-design/menu-utils": "^1.0.11",
+    "@os-design/portal": "^1.0.7",
+    "@os-design/styles": "^1.0.40",
+    "@os-design/theming": "^1.0.38",
+    "@os-design/time-picker-utils": "^1.0.4",
+    "@os-design/utils": "^1.0.56",
     "@os-team/password-score": "^1.0.3",
     "facepaint": "^1.2.1",
     "react-focus-lock": "^2.9.1",
@@ -58,5 +58,5 @@
     "react": ">=18",
     "react-dom": ">=18"
   },
-  "gitHead": "31c4695c79833264fa8193e19e317c7fcf59efaa"
+  "gitHead": "47a4e8f4442745e2b279b13b84525270cf4a21b0"
 }