@os-design/core 1.0.163 → 1.0.164

package/dist/cjs/DatePicker/DatePickerCalendar.js

@@ -65,50 +65,20 @@ var SelectedDay = (0, _styled["default"])(Day)(_templateObject8 || (_templateObj
 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;
+    _ref$onSelect = _ref.onSelect,
+    onSelect = _ref$onSelect === void 0 ? function () {} : _ref$onSelect;
   var valueRef = (0, _react.useRef)(value);
   (0, _react.useEffect)(function () {
     valueRef.current = value;
   }, [value]);
-  var rangeStartedRef = (0, _react.useRef)(false);
-  var changeHandler = (0, _react.useCallback)(function (date) {
-    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, range]);
-  var changeHandlerRef = (0, _react.useRef)(changeHandler);
+  var onSelectRef = (0, _react.useRef)(onSelect);
   (0, _react.useEffect)(function () {
-    changeHandlerRef.current = changeHandler;
-  }, [changeHandler]);
+    onSelectRef.current = onSelect;
+  }, [onSelect]);
   var _useDatePickerCalenda = (0, _datePickerUtils.useDatePickerCalendar)({
       value: value,
       firstDayOfWeek: firstDayOfWeek
@@ -122,11 +92,11 @@ var DatePickerCalendar = function DatePickerCalendar(_ref) {
       role: 'button',
       'aria-label': (0, _datePickerUtils.getAccessibilityDateLabel)(date, locale),
       onClick: function onClick() {
-        changeHandlerRef.current(date);
+        onSelectRef.current(date);
       },
       onKeyDown: function onKeyDown(e) {
         if (['Enter', ' '].includes(e.key)) {
-          changeHandlerRef.current(date);
+          onSelectRef.current(date);
           e.preventDefault();
         }
       },

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","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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"}
+{"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","DatePickerCalendar","firstDayOfWeek","locale","value","onSelect","valueRef","useRef","useEffect","current","onSelectRef","useDatePickerCalendar","selectedMonth","updateMonth","days","getDayProps","useCallback","date","tabIndex","role","getAccessibilityDateLabel","onClick","onKeyDown","e","includes","key","preventDefault","onMouseDown","prevMonthLabel","months","month","year","nextMonthLabel","shortDaysOfWeek","map","item","type","toISOString","getDate"],"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  value?: Date | [Date, Date] | null;\n  onSelect?: (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 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 DatePickerCalendar: React.FC<DatePickerCalendarProps> = ({\n  firstDayOfWeek,\n  locale,\n  value,\n  onSelect = () => {},\n}) => {\n  const valueRef = useRef(value);\n  useEffect(() => {\n    valueRef.current = value;\n  }, [value]);\n\n  const onSelectRef = useRef(onSelect);\n  useEffect(() => {\n    onSelectRef.current = onSelect;\n  }, [onSelect]);\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        onSelectRef.current(date);\n      },\n      onKeyDown: (e) => {\n        if (['Enter', ' '].includes(e.key)) {\n          onSelectRef.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

@@ -25,9 +25,6 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 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 }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
@@ -45,6 +42,24 @@ var Dash = _styled["default"].div(_templateObject3 || (_templateObject3 = _tagge
   return p.theme.baseHeight;
 });
 var StyledTimePicker = (0, _styled["default"])(_TimePicker["default"])(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  width: 2.5em;\n  text-align: center;\n"])));
+var timePickerStyle = {
+  style: {
+    width: 'auto'
+  }
+};
+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;
+};
 
 /**
  * The component to choose a date.
@@ -59,7 +74,7 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     placeholder = _ref.placeholder,
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-    formatFn = _ref.format,
+    format = _ref.format,
     _ref$firstDayOfWeek = _ref.firstDayOfWeek,
     firstDayOfWeek = _ref$firstDayOfWeek === void 0 ? 'sunday' : _ref$firstDayOfWeek,
     _ref$locale = _ref.locale,
@@ -92,29 +107,12 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     _useForwardedState2 = _slicedToArray(_useForwardedState, 2),
     forwardedValue = _useForwardedState2[0],
     setForwardedValue = _useForwardedState2[1];
-  var format = (0, _react.useMemo)(function () {
-    if (formatFn) return formatFn;
-    var dateToStr = function dateToStr(date) {
-      return date.toLocaleString(undefined, _objectSpread({
-        year: 'numeric',
-        month: '2-digit',
-        day: '2-digit'
-      }, showTime ? {
-        hour: '2-digit',
-        minute: '2-digit',
-        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;
-    return format(forwardedValue);
-  }, [forwardedValue, format]);
+  var formattedValue = (0, _datePickerUtils.useFormattedValue)({
+    forwardedValue: forwardedValue,
+    format: format,
+    showTime: showTime,
+    timeNotation: timeNotation
+  });
   var closeHandler = (0, _react.useCallback)(function () {
     setOpened(false);
   }, []);
@@ -123,6 +121,10 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var valueIsSpecified = (0, _react.useMemo)(function () {
     return formattedValue !== undefined && formattedValue !== null;
   }, [formattedValue]);
+  var rightHasPaddingValue = (0, _react.useMemo)(function () {
+    if (valueIsSpecified) return false;
+    return right ? rightHasPadding : true;
+  }, [right, rightHasPadding, valueIsSpecified]);
   var rightValue = (0, _react.useMemo)(function () {
     if (valueIsSpecified) {
       return /*#__PURE__*/_react["default"].createElement("div", {
@@ -151,44 +153,61 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     }
     return right || /*#__PURE__*/_react["default"].createElement(_SelectToggle.IconContainer, null, opened ? /*#__PURE__*/_react["default"].createElement(_icons.Up, null) : /*#__PURE__*/_react["default"].createElement(_icons.Down, null));
   }, [containerRef, disabled, locale.clearLabel, opened, right, setForwardedValue, valueIsSpecified]);
-  var rightHasPaddingValue = (0, _react.useMemo)(function () {
-    if (valueIsSpecified) return false;
-    return right ? rightHasPadding : true;
-  }, [right, rightHasPadding, valueIsSpecified]);
+  var firstTimePickerRef = (0, _react.useRef)(null);
+  var secondTimePickerRef = (0, _react.useRef)(null);
+  var rangeStartedRef = (0, _react.useRef)(false);
+  (0, _react.useEffect)(function () {
+    rangeStartedRef.current = false;
+  }, [opened]);
+  var changeHandler = (0, _react.useCallback)(function (date) {
+    setForwardedValue(function (prev) {
+      if (!range) return createDate(date, prev);
+      var d = createDate(date);
+      var nextValue = prev && Array.isArray(prev) && rangeStartedRef.current ? [new Date(prev[0].getTime()), createDate(date, prev[1])] : [d, d];
+      rangeStartedRef.current = !rangeStartedRef.current;
+      return nextValue.sort(function (a, b) {
+        return a.getTime() - b.getTime();
+      });
+    });
+  }, [range, setForwardedValue]);
   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) {
+      onSelect: function onSelect(v) {
+        var _firstTimePickerRef$c;
+        changeHandler(v);
+        (_firstTimePickerRef$c = firstTimePickerRef.current) === null || _firstTimePickerRef$c === void 0 ? void 0 : _firstTimePickerRef$c.focus();
+        if (!showTime && (!range || !rangeStartedRef.current)) {
           closeHandler();
         }
       }
     });
-  }, [closeHandler, firstDayOfWeek, forwardedValue, locale, range, setForwardedValue, showTime]);
-  var secondTimePickerRef = (0, _react.useRef)(null);
+  }, [changeHandler, closeHandler, firstDayOfWeek, forwardedValue, locale, range, showTime]);
   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();
-  }, []);
+    setForwardedValue(function (_ref2) {
+      var _ref3 = _slicedToArray(_ref2, 1),
+        from = _ref3[0];
+      var nextTo = new Date(from.getTime());
+      nextTo.setHours(nextTo.getHours() + 1);
+      return [from, nextTo];
+    });
+  }, [setForwardedValue]);
   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, Array.isArray(forwardedValue) ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(StyledTimePicker, {
+      ref: firstTimePickerRef,
       autoFocus: true,
       disabled: disabled,
       notation: timeNotation,
-      containerProps: {
-        style: {
-          width: 'auto'
-        }
-      },
+      containerProps: timePickerStyle,
       value: forwardedValue[0],
       onChange: function onChange(v) {
         return setForwardedValue([v, forwardedValue[1]]);
@@ -204,11 +223,7 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       ref: secondTimePickerRef,
       disabled: disabled,
       notation: timeNotation,
-      containerProps: {
-        style: {
-          width: 'auto'
-        }
-      },
+      containerProps: timePickerStyle,
       value: forwardedValue[1],
       onChange: function onChange(v) {
         return setForwardedValue([forwardedValue[0], v]);
@@ -221,14 +236,11 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       },
       onKeyUp: closeOnInputComplete
     })) : /*#__PURE__*/_react["default"].createElement(StyledTimePicker, {
+      ref: firstTimePickerRef,
       autoFocus: true,
       disabled: disabled,
       notation: timeNotation,
-      containerProps: {
-        style: {
-          width: 'auto'
-        }
-      },
+      containerProps: timePickerStyle,
       value: forwardedValue,
       onChange: setForwardedValue,
       onKeyDown: function onKeyDown(e) {

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

@@ -1 +1 @@
-{"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"}
+{"version":3,"file":"index.js","names":["StyledPopover","styled","Popover","p","theme","datePickerPadding","TimeContainer","div","Dash","baseHeight","StyledTimePicker","TimePicker","timePickerStyle","style","width","createDate","date","time","d","Date","setFullYear","getFullYear","setMonth","getMonth","setDate","getDate","setHours","setMinutes","getHours","getMinutes","DatePicker","forwardRef","ref","left","leftHasPadding","right","rightHasPadding","placeholder","disabled","format","firstDayOfWeek","locale","defaultLocale","showTime","timeNotation","range","value","defaultValue","onChange","size","rest","useForwardedRef","containerRef","mergedContainerRef","useState","opened","setOpened","useForwardedState","forwardedValue","setForwardedValue","formattedValue","useFormattedValue","closeHandler","useCallback","useKeyPress","window","undefined","isMinXs","useIsMinWidth","valueIsSpecified","useMemo","rightHasPaddingValue","rightValue","e","stopPropagation","includes","key","current","focus","preventDefault","clearLabel","firstTimePickerRef","useRef","secondTimePickerRef","rangeStartedRef","useEffect","changeHandler","prev","nextValue","Array","isArray","getTime","sort","a","b","calendarComponent","v","tabOnInputComplete","target","selectionStart","from","nextTo","closeOnInputComplete","timeComponent","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  useFormattedValue,\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  useEffect,\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\nconst timePickerStyle = { style: { width: 'auto' } };\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\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,\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 formattedValue = useFormattedValue({\n      forwardedValue,\n      format,\n      showTime,\n      timeNotation,\n    });\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 rightHasPaddingValue = useMemo(() => {\n      if (valueIsSpecified) return false;\n      return right ? rightHasPadding : true;\n    }, [right, rightHasPadding, valueIsSpecified]);\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 firstTimePickerRef = useRef<HTMLInputElement>(null);\n    const secondTimePickerRef = useRef<HTMLInputElement>(null);\n    const rangeStartedRef = useRef(false);\n\n    useEffect(() => {\n      rangeStartedRef.current = false;\n    }, [opened]);\n\n    const changeHandler = useCallback(\n      (date: Date) => {\n        setForwardedValue((prev) => {\n          if (!range) return createDate(date, prev);\n\n          const d = createDate(date);\n          const nextValue =\n            prev && Array.isArray(prev) && rangeStartedRef.current\n              ? [new Date(prev[0].getTime()), createDate(date, prev[1])]\n              : [d, d];\n\n          rangeStartedRef.current = !rangeStartedRef.current;\n          return nextValue.sort(\n            (a: Date, b: Date) => a.getTime() - b.getTime()\n          );\n        });\n      },\n      [range, setForwardedValue]\n    );\n\n    const calendarComponent = useMemo(\n      () => (\n        <DatePickerCalendar\n          firstDayOfWeek={firstDayOfWeek}\n          locale={locale}\n          value={forwardedValue}\n          onSelect={(v) => {\n            changeHandler(v);\n            firstTimePickerRef.current?.focus();\n            if (!showTime && (!range || !rangeStartedRef.current)) {\n              closeHandler();\n            }\n          }}\n        />\n      ),\n      [\n        changeHandler,\n        closeHandler,\n        firstDayOfWeek,\n        forwardedValue,\n        locale,\n        range,\n        showTime,\n      ]\n    );\n\n    const tabOnInputComplete = useCallback(\n      (e) => {\n        if (e.target.selectionStart < 5) return;\n        secondTimePickerRef.current?.focus();\n        setForwardedValue(([from]) => {\n          const nextTo = new Date(from.getTime());\n          nextTo.setHours(nextTo.getHours() + 1);\n          return [from, nextTo];\n        });\n      },\n      [setForwardedValue]\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                  ref={firstTimePickerRef}\n                  autoFocus\n                  disabled={disabled}\n                  notation={timeNotation}\n                  containerProps={timePickerStyle}\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={timePickerStyle}\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                ref={firstTimePickerRef}\n                autoFocus\n                disabled={disabled}\n                notation={timeNotation}\n                containerProps={timePickerStyle}\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/cjs/TimePicker/index.js

@@ -23,11 +23,6 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-var pad = function pad(n) {
-  return n.toString().padStart(2, '0');
-};
-var HOURS_12 = 12 * 60 * 60 * 1000;
-
 /**
  * The component to choose a time.
  */
@@ -39,7 +34,7 @@ var TimePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     _ref$onChange = _ref.onChange,
     onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
     _ref$onSelect = _ref.onSelect,
-    _onSelect = _ref$onSelect === void 0 ? function () {} : _ref$onSelect,
+    onSelect = _ref$onSelect === void 0 ? function () {} : _ref$onSelect,
     _ref$onKeyDown = _ref.onKeyDown,
     onKeyDown = _ref$onKeyDown === void 0 ? function () {} : _ref$onKeyDown,
     _ref$disabled = _ref.disabled,
@@ -65,66 +60,49 @@ var TimePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     _useState2 = _slicedToArray(_useState, 2),
     selection = _useState2[0],
     setSelection = _useState2[1];
-  var isPm = (0, _react.useMemo)(function () {
-    return !!forwardedValue && forwardedValue.getHours() >= 12;
-  }, [forwardedValue]);
-  var setTime = (0, _react.useCallback)(function (time) {
-    var _parseTime = (0, _timePickerUtils.parseTime)(time, notation, isPm),
-      _parseTime2 = _slicedToArray(_parseTime, 2),
-      h = _parseTime2[0],
-      m = _parseTime2[1];
-    var nextValue = new Date(forwardedValue ? forwardedValue.getTime() : 0);
-    nextValue.setHours(h);
-    nextValue.setMinutes(m);
-    setForwardedValue(nextValue);
-  }, [forwardedValue, isPm, notation, setForwardedValue]);
-  var setTimeRef = (0, _react.useRef)(setTime);
-  (0, _react.useEffect)(function () {
-    setTimeRef.current = setTime;
-  }, [setTime]);
-  var time = (0, _react.useMemo)(function () {
-    if (!forwardedValue) return notation === '12-hour' ? '12:00' : '00:00';
-    var hour = notation === '12-hour' ? forwardedValue.getHours() % 12 || 12 : forwardedValue.getHours();
-    var minute = forwardedValue.getMinutes();
-    return "".concat(pad(hour), ":").concat(pad(minute));
-  }, [forwardedValue, notation]);
-  var changePeriod = (0, _react.useCallback)(function (nextIsPm) {
-    if (!forwardedValue) return;
-    var nextValue = new Date(forwardedValue.getTime() + HOURS_12 * (nextIsPm ? 1 : -1));
-    setForwardedValue(nextValue);
-  }, [forwardedValue, setForwardedValue]);
+  var _useTime = (0, _timePickerUtils.useTime)({
+      notation: notation,
+      selection: selection,
+      setSelection: setSelection,
+      forwardedValue: forwardedValue,
+      setForwardedValue: setForwardedValue
+    }),
+    time = _useTime.time,
+    isPm = _useTime.isPm,
+    changePeriod = _useTime.changePeriod,
+    keyHandler = _useTime.keyHandler;
+  var rightComponent = (0, _react.useMemo)(function () {
+    if (notation !== '12-hour' && !right) return null;
+    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, notation === '12-hour' && /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+      type: "ghost",
+      wide: "never",
+      size: "small",
+      disabled: disabled,
+      onClick: changePeriod
+    }, isPm ? 'PM' : 'AM'), right);
+  }, [changePeriod, disabled, isPm, notation, right]);
+  var keyDownHandler = (0, _react.useCallback)(function (e) {
+    keyHandler(e.key, e.metaKey);
+    onKeyDown(e);
+    e.preventDefault();
+  }, [keyHandler, onKeyDown]);
 
   // Update the selection
   (0, _react.useEffect)(function () {
     if (!inputRef.current) return;
     inputRef.current.setSelectionRange(selection.start, selection.end);
   }, [inputRef, selection]);
-  var keyDownHandler = (0, _react.useCallback)(function (e) {
-    var nextCaret = selection.start;
-    if (e.key === 'ArrowUp' || e.key === 'ArrowLeft' && e.metaKey) {
-      nextCaret = 0;
-    } else if (e.key === 'ArrowDown' || e.key === 'ArrowRight' && e.metaKey) {
-      nextCaret = 5;
-    } else if (e.key === 'ArrowLeft') {
-      nextCaret = selection.start > 0 ? selection.start - 1 : 0;
-    } else if (e.key === 'ArrowRight') {
-      nextCaret = selection.start < 5 ? selection.start + 1 : 5;
-    } else if (e.key === 'Backspace') {
-      setTimeRef.current('00:00');
-      nextCaret = 0;
-    } else if ((0, _timePickerUtils.isDigitKey)(e.key)) {
-      var pos = selection.start === 2 ? 3 : selection.start;
-      if (pos === 5) pos = 0;
-      setTimeRef.current((0, _timePickerUtils.replaceChar)(time, pos, e.key));
-      nextCaret = pos < 5 ? pos + 1 : 5;
-    }
+  var selectHandler = (0, _react.useCallback)(function (e) {
+    // Update the selection state.
+    var _e$currentTarget = e.currentTarget,
+      selectionStart = _e$currentTarget.selectionStart,
+      selectionEnd = _e$currentTarget.selectionEnd;
     setSelection({
-      start: nextCaret,
-      end: nextCaret
+      start: selectionStart || 0,
+      end: selectionEnd || 0
     });
-    onKeyDown(e);
-    e.preventDefault();
-  }, [onKeyDown, selection.start, time]);
+    onSelect(e);
+  }, [onSelect]);
   return /*#__PURE__*/_react["default"].createElement(_Input["default"], _extends({
     type: "text",
     inputMode: "decimal",
@@ -133,26 +111,8 @@ var TimePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     maxLength: 5,
     disabled: disabled,
     value: time,
-    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",
-      disabled: disabled,
-      onClick: function onClick() {
-        return changePeriod(!isPm);
-      }
-    }, isPm ? 'PM' : 'AM'), right),
-    onSelect: function onSelect(e) {
-      // Update the selection state.
-      var _e$currentTarget = e.currentTarget,
-        selectionStart = _e$currentTarget.selectionStart,
-        selectionEnd = _e$currentTarget.selectionEnd;
-      setSelection({
-        start: selectionStart || 0,
-        end: selectionEnd || 0
-      });
-      _onSelect(e);
-    },
+    right: rightComponent,
+    onSelect: selectHandler,
     onKeyDown: keyDownHandler
   }, rest, {
     ref: mergedInputRef