@os-design/core 1.0.162 → 1.0.164

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: /*#__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

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":["TimePicker","forwardRef","ref","notation","value","defaultValue","onChange","onSelect","onKeyDown","disabled","right","rest","useForwardedRef","inputRef","mergedInputRef","useForwardedState","forwardedValue","setForwardedValue","useState","start","end","selection","setSelection","useTime","time","isPm","changePeriod","keyHandler","rightComponent","useMemo","keyDownHandler","useCallback","e","key","metaKey","preventDefault","useEffect","current","setSelectionRange","selectHandler","currentTarget","selectionStart","selectionEnd","displayName"],"sources":["../../../src/TimePicker/index.tsx"],"sourcesContent":["import { useTime } from '@os-design/time-picker-utils';\nimport { useForwardedRef, useForwardedState } from '@os-design/utils';\nimport React, {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\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\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 { time, isPm, changePeriod, keyHandler } = useTime({\n      notation,\n      selection,\n      setSelection,\n      forwardedValue,\n      setForwardedValue,\n    });\n\n    const rightComponent = useMemo(() => {\n      if (notation !== '12-hour' && !right) return null;\n      return (\n        <>\n          {notation === '12-hour' && (\n            <Button\n              type='ghost'\n              wide='never'\n              size='small'\n              disabled={disabled}\n              onClick={changePeriod}\n            >\n              {isPm ? 'PM' : 'AM'}\n            </Button>\n          )}\n          {right}\n        </>\n      );\n    }, [changePeriod, disabled, isPm, notation, right]);\n\n    const keyDownHandler = useCallback(\n      (e) => {\n        keyHandler(e.key, e.metaKey);\n        onKeyDown(e);\n        e.preventDefault();\n      },\n      [keyHandler, onKeyDown]\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 selectHandler = useCallback(\n      (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      [onSelect]\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={rightComponent}\n        onSelect={selectHandler}\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,33 +69,23 @@ 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 DatePickerCalendar = ({
   firstDayOfWeek,
   locale,
   value,
-  onChange = () => {}
+  onSelect = () => {}
 }) => {
   const valueRef = useRef(value);
   useEffect(() => {
     valueRef.current = value;
   }, [value]);
-  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());
-    }
-    onChange(d);
-  }, [onChange]);
-  const changeHandlerRef = useRef(changeHandler);
+  const onSelectRef = useRef(onSelect);
   useEffect(() => {
-    changeHandlerRef.current = changeHandler;
-  }, [changeHandler]);
+    onSelectRef.current = onSelect;
+  }, [onSelect]);
   const {
     selectedMonth,
     updateMonth,
@@ -109,11 +99,11 @@ const DatePickerCalendar = ({
     role: 'button',
     'aria-label': getAccessibilityDateLabel(date, locale),
     onClick: () => {
-      changeHandlerRef.current(date);
+      onSelectRef.current(date);
     },
     onKeyDown: e => {
       if (['Enter', ' '].includes(e.key)) {
-        changeHandlerRef.current(date);
+        onSelectRef.current(date);
         e.preventDefault();
       }
     },
@@ -147,6 +137,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","DatePickerCalendar","firstDayOfWeek","locale","value","onSelect","valueRef","current","onSelectRef","selectedMonth","updateMonth","days","getDayProps","date","tabIndex","role","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/esm/DatePicker/index.js

@@ -1,11 +1,11 @@
 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); }
 import styled from '@emotion/styled';
-import { defaultLocale, getAccessibilityDateLabel } from '@os-design/date-picker-utils';
+import { defaultLocale, getAccessibilityDateLabel, useFormattedValue } from '@os-design/date-picker-utils';
 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, useEffect, useMemo, useRef, useState } from 'react';
 import Button from '../Button';
 import Modal from '../Modal';
 import Popover from '../Popover';
@@ -17,8 +17,36 @@ 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;
+`;
+const timePickerStyle = {
+  style: {
+    width: 'auto'
+  }
+};
+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;
+};
 
 /**
  * The component to choose a date.
@@ -30,11 +58,12 @@ const DatePicker = /*#__PURE__*/forwardRef(({
   rightHasPadding = false,
   placeholder,
   disabled = false,
-  format: formatFn,
+  format,
   firstDayOfWeek = 'sunday',
   locale = defaultLocale,
   showTime = false,
   timeNotation = '12-hour',
+  range = false,
   value,
   defaultValue,
   onChange,
@@ -43,43 +72,28 @@ 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,
     onChange
   });
-  const format = useMemo(() => {
-    if (formatFn) return formatFn;
-    return date => date.toLocaleString(undefined, {
-      year: 'numeric',
-      month: '2-digit',
-      day: '2-digit',
-      ...(showTime ? {
-        hour: '2-digit',
-        minute: '2-digit',
-        hour12: timeNotation === '12-hour'
-      } : {})
-    });
-  }, [formatFn, showTime, timeNotation]);
-  const formattedValue = useMemo(() => {
-    if (!forwardedValue) return null;
-    return format(forwardedValue);
-  }, [forwardedValue, format]);
+  const formattedValue = useFormattedValue({
+    forwardedValue,
+    format,
+    showTime,
+    timeNotation
+  });
   const closeHandler = useCallback(() => {
     setOpened(false);
   }, []);
   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 rightHasPaddingValue = useMemo(() => {
+    if (valueIsSpecified) return false;
+    return right ? rightHasPadding : true;
+  }, [right, rightHasPadding, valueIsSpecified]);
   const rightValue = useMemo(() => {
     if (valueIsSpecified) {
       return /*#__PURE__*/React.createElement("div", {
@@ -108,14 +122,81 @@ const DatePicker = /*#__PURE__*/forwardRef(({
     }
     return right || /*#__PURE__*/React.createElement(IconContainer, null, opened ? /*#__PURE__*/React.createElement(Up, null) : /*#__PURE__*/React.createElement(Down, null));
   }, [containerRef, disabled, locale.clearLabel, opened, right, setForwardedValue, valueIsSpecified]);
-  const rightHasPaddingValue = useMemo(() => {
-    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 firstTimePickerRef = useRef(null);
+  const secondTimePickerRef = useRef(null);
+  const rangeStartedRef = useRef(false);
+  useEffect(() => {
+    rangeStartedRef.current = false;
+  }, [opened]);
+  const changeHandler = useCallback(date => {
+    setForwardedValue(prev => {
+      if (!range) return createDate(date, prev);
+      const d = createDate(date);
+      const 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((a, b) => a.getTime() - b.getTime());
+    });
+  }, [range, setForwardedValue]);
+  const calendarComponent = useMemo(() => /*#__PURE__*/React.createElement(DatePickerCalendar, {
+    firstDayOfWeek: firstDayOfWeek,
+    locale: locale,
+    value: forwardedValue,
+    onSelect: v => {
+      changeHandler(v);
+      firstTimePickerRef.current?.focus();
+      if (!showTime && (!range || !rangeStartedRef.current)) {
+        closeHandler();
+      }
+    }
+  }), [changeHandler, closeHandler, firstDayOfWeek, forwardedValue, locale, range, showTime]);
+  const tabOnInputComplete = useCallback(e => {
+    if (e.target.selectionStart < 5) return;
+    secondTimePickerRef.current?.focus();
+    setForwardedValue(([from]) => {
+      const nextTo = new Date(from.getTime());
+      nextTo.setHours(nextTo.getHours() + 1);
+      return [from, nextTo];
+    });
+  }, [setForwardedValue]);
+  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, {
+    ref: firstTimePickerRef,
     autoFocus: true,
     disabled: disabled,
     notation: timeNotation,
+    containerProps: timePickerStyle,
+    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: timePickerStyle,
+    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, {
+    ref: firstTimePickerRef,
+    autoFocus: true,
+    disabled: disabled,
+    notation: timeNotation,
+    containerProps: timePickerStyle,
     value: forwardedValue,
     onChange: setForwardedValue,
     onKeyDown: e => {
@@ -123,8 +204,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 +255,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;