npm - @os-design/core - Versions diffs - 1.0.159 → 1.0.162 - Mend

@os-design/core 1.0.159 → 1.0.162

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (18) hide show

package/dist/cjs/DatePicker/DatePickerCalendar.js +36 -25
package/dist/cjs/DatePicker/DatePickerCalendar.js.map +1 -1
package/dist/cjs/DatePicker/index.js +54 -10
package/dist/cjs/DatePicker/index.js.map +1 -1
package/dist/cjs/TimePicker/index.js +48 -24
package/dist/cjs/TimePicker/index.js.map +1 -1
package/dist/esm/DatePicker/DatePickerCalendar.js +26 -18
package/dist/esm/DatePicker/DatePickerCalendar.js.map +1 -1
package/dist/esm/DatePicker/index.js +45 -8
package/dist/esm/DatePicker/index.js.map +1 -1
package/dist/esm/TimePicker/index.js +40 -22
package/dist/esm/TimePicker/index.js.map +1 -1
package/dist/types/DatePicker/DatePickerCalendar.d.ts +1 -1
package/dist/types/DatePicker/DatePickerCalendar.d.ts.map +1 -1
package/dist/types/DatePicker/index.d.ts +2 -0
package/dist/types/DatePicker/index.d.ts.map +1 -1
package/dist/types/TimePicker/index.d.ts.map +1 -1
package/package.json +12 -12

package/dist/cjs/DatePicker/DatePickerCalendar.js CHANGED Viewed

@@ -5,18 +5,17 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _react = _interopRequireWildcard(require("react"));
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-var _styles = require("@os-design/styles");
+var _datePickerUtils = require("@os-design/date-picker-utils");
 var _icons = require("@os-design/icons");
+var _styles = require("@os-design/styles");
 var _theming = require("@os-design/theming");
-var _media = require("@os-design/media");
-var _datePickerUtils = require("@os-design/date-picker-utils");
+var _react = _interopRequireWildcard(require("react"));
 var _Button = _interopRequireDefault(require("../Button"));
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 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 _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -25,22 +24,19 @@ function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symb
 function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-var Container = _styled["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  // For popover\n  ", " {\n    padding: ", "em;\n  }\n"])), _media.m.min.xs, function (p) {
-  return p.theme.datePickerPadding;
-});
-var MonthContainer = _styled["default"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  margin-bottom: 0.5em;\n"])));
-var Month = _styled["default"].div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  flex-grow: 1;\n  font-weight: 500;\n  text-align: center;\n  padding: 0 0.4em;\n  ", ";\n"])), _styles.ellipsisStyles);
-var Calendar = _styled["default"].div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: grid;\n  grid-template-columns: repeat(7, ", "em);\n  grid-auto-rows: ", "em;\n  justify-content: space-between;\n  overflow-x: auto;\n"])), function (p) {
+var MonthContainer = _styled["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  margin-bottom: 0.5em;\n"])));
+var Month = _styled["default"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  flex-grow: 1;\n  font-weight: 500;\n  text-align: center;\n  padding: 0 0.4em;\n  ", ";\n"])), _styles.ellipsisStyles);
+var Calendar = _styled["default"].div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: grid;\n  grid-template-columns: repeat(7, ", "em);\n  grid-auto-rows: ", "em;\n  justify-content: space-between;\n  overflow-x: auto;\n"])), function (p) {
   return p.theme.datePickerCellSize;
 }, function (p) {
   return p.theme.datePickerCellSize;
 });
-var DayOfWeek = _styled["default"].div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  justify-self: center;\n  align-self: center;\n  color: ", ";\n  font-size: ", "em;\n"])), function (p) {
+var DayOfWeek = _styled["default"].div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  justify-self: center;\n  align-self: center;\n  color: ", ";\n  font-size: ", "em;\n"])), function (p) {
   return (0, _theming.clr)(p.theme.datePickerDayOfWeekColorText);
 }, function (p) {
   return p.theme.sizes.small;
 });
-var Day = _styled["default"].div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  ", ";\n  justify-self: center;\n  align-self: center;\n\n  width: ", "em;\n  height: ", "em;\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  border-radius: ", "em;\n  cursor: pointer;\n\n  @media (hover: hover) {\n    &:hover,\n    &:focus {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n\n  ", ";\n"])), _styles.resetFocusStyles, function (p) {
+var Day = _styled["default"].div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  ", ";\n  justify-self: center;\n  align-self: center;\n\n  width: ", "em;\n  height: ", "em;\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  border-radius: ", "em;\n  cursor: pointer;\n\n  @media (hover: hover) {\n    &:hover,\n    &:focus {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n\n  ", ";\n"])), _styles.resetFocusStyles, function (p) {
   return p.theme.datePickerDaySize;
 }, function (p) {
   return p.theme.datePickerDaySize;
@@ -51,17 +47,17 @@ var Day = _styled["default"].div(_templateObject6 || (_templateObject6 = _tagged
 }, function (p) {
   return (0, _theming.clr)(p.theme.datePickerDayColorTextHover);
 }, (0, _styles.transitionStyles)('background-color', 'color'));
-var DayAnotherMonth = (0, _styled["default"])(Day)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  color: ", ";\n"])), function (p) {
+var DayAnotherMonth = (0, _styled["default"])(Day)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  color: ", ";\n"])), function (p) {
   return (0, _theming.clr)(p.theme.datePickerDayAnotherMonthColorText);
 });
-var Today = (0, _styled["default"])(Day)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  color: ", ";\n  border: 1px solid ", ";\n  box-sizing: border-box;\n"])), function (p) {
+var Today = (0, _styled["default"])(Day)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  color: ", ";\n  border: 1px solid ", ";\n  box-sizing: border-box;\n"])), function (p) {
   return (0, _theming.clr)(p.theme.datePickerTodayColorBg);
 }, function (p) {
   return (0, _theming.clr)(p.theme.datePickerTodayColorText);
 }, function (p) {
   return (0, _theming.clr)(p.theme.datePickerTodayColorBorder);
 });
-var SelectedDay = (0, _styled["default"])(Day)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  color: ", ";\n"])), function (p) {
+var SelectedDay = (0, _styled["default"])(Day)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  color: ", ";\n"])), function (p) {
   return (0, _theming.clr)(p.theme.datePickerSelectedDayColorBg);
 }, function (p) {
   return (0, _theming.clr)(p.theme.datePickerSelectedDayColorText);
@@ -72,10 +68,27 @@ var DatePickerCalendar = function DatePickerCalendar(_ref) {
     value = _ref.value,
     _ref$onChange = _ref.onChange,
     onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange;
-  var onChangeRef = (0, _react.useRef)(onChange);
-  (0, _react.useCallback)(function () {
-    onChangeRef.current = onChange;
+  var valueRef = (0, _react.useRef)(value);
+  (0, _react.useEffect)(function () {
+    valueRef.current = value;
+  }, [value]);
+  var changeHandler = (0, _react.useCallback)(function (date) {
+    var d = new Date(0);
+    d.setFullYear(date.getFullYear());
+    d.setMonth(date.getMonth());
+    d.setDate(date.getDate());
+    d.setHours(0);
+    d.setMinutes(0);
+    if (valueRef.current) {
+      d.setHours(valueRef.current.getHours());
+      d.setMinutes(valueRef.current.getMinutes());
+    }
+    onChange(d);
   }, [onChange]);
+  var changeHandlerRef = (0, _react.useRef)(changeHandler);
+  (0, _react.useEffect)(function () {
+    changeHandlerRef.current = changeHandler;
+  }, [changeHandler]);
   var _useDatePickerCalenda = (0, _datePickerUtils.useDatePickerCalendar)({
       value: value,
       firstDayOfWeek: firstDayOfWeek
@@ -89,13 +102,11 @@ var DatePickerCalendar = function DatePickerCalendar(_ref) {
       role: 'button',
       'aria-label': (0, _datePickerUtils.getAccessibilityDateLabel)(date, locale),
       onClick: function onClick() {
-        if (!onChangeRef.current) return;
-        onChangeRef.current(date);
+        changeHandlerRef.current(date);
       },
       onKeyDown: function onKeyDown(e) {
-        if (!onChangeRef.current) return;
         if (['Enter', ' '].includes(e.key)) {
-          onChangeRef.current(date);
+          changeHandlerRef.current(date);
           e.preventDefault();
         }
       },
@@ -104,7 +115,7 @@ var DatePickerCalendar = function DatePickerCalendar(_ref) {
       }
     };
   }, [locale]);
-  return /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement(MonthContainer, null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(MonthContainer, null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
     type: "ghost",
     wide: "never",
     size: "small",

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

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

package/dist/cjs/DatePicker/index.js CHANGED Viewed

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _datePickerUtils = require("@os-design/date-picker-utils");
 var _icons = require("@os-design/icons");
 var _media = require("@os-design/media");
@@ -16,12 +17,17 @@ var _Modal = _interopRequireDefault(require("../Modal"));
 var _Popover = _interopRequireDefault(require("../Popover"));
 var _Select = require("../Select");
 var _SelectToggle = require("../Select/SelectToggle");
+var _TimePicker = _interopRequireDefault(require("../TimePicker"));
 var _DatePickerCalendar = _interopRequireDefault(require("./DatePickerCalendar"));
-var _excluded = ["left", "leftHasPadding", "right", "rightHasPadding", "placeholder", "disabled", "format", "firstDayOfWeek", "locale", "value", "defaultValue", "onChange", "size"];
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var _excluded = ["left", "leftHasPadding", "right", "rightHasPadding", "placeholder", "disabled", "format", "firstDayOfWeek", "locale", "showTime", "timeNotation", "value", "defaultValue", "onChange", "size"];
+var _templateObject, _templateObject2;
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 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); }
@@ -30,6 +36,12 @@ 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; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+var StyledPopover = (0, _styled["default"])(_Popover["default"])(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding: ", "em;\n"])), function (p) {
+  return p.theme.datePickerPadding;
+});
+var TimeContainer = _styled["default"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin-top: 0.5em;\n"])));
 /**
  * The component to choose a date.
  */
@@ -43,12 +55,15 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     placeholder = _ref.placeholder,
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-    _ref$format = _ref.format,
-    format = _ref$format === void 0 ? _datePickerUtils.defaultFormat : _ref$format,
+    formatFn = _ref.format,
     _ref$firstDayOfWeek = _ref.firstDayOfWeek,
     firstDayOfWeek = _ref$firstDayOfWeek === void 0 ? 'sunday' : _ref$firstDayOfWeek,
     _ref$locale = _ref.locale,
     locale = _ref$locale === void 0 ? _datePickerUtils.defaultLocale : _ref$locale,
+    _ref$showTime = _ref.showTime,
+    showTime = _ref$showTime === void 0 ? false : _ref$showTime,
+    _ref$timeNotation = _ref.timeNotation,
+    timeNotation = _ref$timeNotation === void 0 ? '12-hour' : _ref$timeNotation,
     value = _ref.value,
     defaultValue = _ref.defaultValue,
     onChange = _ref.onChange,
@@ -70,10 +85,24 @@ 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;
+    return function (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'
+      } : {}));
+    };
+  }, [formatFn, showTime, timeNotation]);
   var formattedValue = (0, _react.useMemo)(function () {
     if (!forwardedValue) return null;
-    return format(forwardedValue, locale);
-  }, [forwardedValue, format, locale]);
+    return format(forwardedValue);
+  }, [forwardedValue, format]);
   var closeHandler = (0, _react.useCallback)(function () {
     setOpened(false);
   }, []);
@@ -85,7 +114,7 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     value: forwardedValue,
     onChange: function onChange(v) {
       setForwardedValue(v);
-      closeHandler();
+      if (!showTime) closeHandler();
     }
   });
   var valueIsSpecified = (0, _react.useMemo)(function () {
@@ -123,6 +152,21 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     if (valueIsSpecified) return false;
     return right ? rightHasPadding : true;
   }, [right, rightHasPadding, valueIsSpecified]);
+  var timeComponent = (0, _react.useMemo)(function () {
+    return showTime && forwardedValue ? /*#__PURE__*/_react["default"].createElement(TimeContainer, null, /*#__PURE__*/_react["default"].createElement(_TimePicker["default"], {
+      autoFocus: true,
+      disabled: disabled,
+      notation: timeNotation,
+      value: forwardedValue,
+      onChange: setForwardedValue,
+      onKeyDown: function onKeyDown(e) {
+        if (disabled) return;
+        if (e.key === 'Enter') {
+          setOpened(!opened);
+        }
+      }
+    })) : null;
+  }, [disabled, forwardedValue, opened, setForwardedValue, showTime, timeNotation]);
   return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Select.SelectContainer, _extends({
     opened: opened,
     disabled: disabled,
@@ -171,19 +215,19 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     }
   }, /*#__PURE__*/_react["default"].createElement(_SelectToggle.RightAddon, {
     hasPadding: rightHasPaddingValue
-  }, rightValue))), isMinXs ? /*#__PURE__*/_react["default"].createElement(_Popover["default"], {
+  }, rightValue))), isMinXs ? /*#__PURE__*/_react["default"].createElement(StyledPopover, {
     trigger: containerRef,
     placement: "bottom-start",
     visible: opened,
     onClose: closeHandler,
     size: size
-  }, calendar) : /*#__PURE__*/_react["default"].createElement(_Modal["default"], {
+  }, calendar, timeComponent) : /*#__PURE__*/_react["default"].createElement(_Modal["default"], {
     title: placeholder,
     footer: null,
     visible: opened,
     onClose: closeHandler,
     size: size
-  }, calendar));
+  }, calendar, timeComponent));
 });
 DatePicker.displayName = 'DatePicker';
 var _default = DatePicker;

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

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

package/dist/cjs/TimePicker/index.js CHANGED Viewed

@@ -10,7 +10,7 @@ var _utils = require("@os-design/utils");
 var _react = _interopRequireWildcard(require("react"));
 var _Button = _interopRequireDefault(require("../Button"));
 var _Input = _interopRequireDefault(require("../Input"));
-var _excluded = ["notation", "value", "defaultValue", "onChange", "onSelect", "right"];
+var _excluded = ["notation", "value", "defaultValue", "onChange", "onSelect", "onKeyDown", "disabled", "right"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -23,6 +23,11 @@ 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.
  */
@@ -35,6 +40,10 @@ var TimePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
     _ref$onSelect = _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,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     right = _ref.right,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useForwardedRef = (0, _utils.useForwardedRef)(ref),
@@ -56,28 +65,41 @@ var TimePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     _useState2 = _slicedToArray(_useState, 2),
     selection = _useState2[0],
     setSelection = _useState2[1];
-  var _useState3 = (0, _react.useState)(null),
-    _useState4 = _slicedToArray(_useState3, 2),
-    period = _useState4[0],
-    setPeriod = _useState4[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 () {
-    if (notation === '12-hour') {
-      setPeriod('AM');
-    }
-  }, [notation]);
+    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]);
   // Update the selection
   (0, _react.useEffect)(function () {
     if (!inputRef.current) return;
     inputRef.current.setSelectionRange(selection.start, selection.end);
   }, [inputRef, selection]);
-  var time = (0, _react.useMemo)(function () {
-    if (!forwardedValue) return notation === '12-hour' ? '12:00' : '00:00';
-    var hour = forwardedValue.getHours().toString().padStart(2, '0');
-    var minute = forwardedValue.getMinutes().toString().padStart(2, '0');
-    return "".concat(hour, ":").concat(minute);
-  }, [forwardedValue, notation]);
-  var onKeyDown = (0, _react.useCallback)(function (e) {
+  var keyDownHandler = (0, _react.useCallback)(function (e) {
     var nextCaret = selection.start;
     if (e.key === 'ArrowUp' || e.key === 'ArrowLeft' && e.metaKey) {
       nextCaret = 0;
@@ -88,36 +110,38 @@ var TimePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     } else if (e.key === 'ArrowRight') {
       nextCaret = selection.start < 5 ? selection.start + 1 : 5;
     } else if (e.key === 'Backspace') {
-      setForwardedValue((0, _timePickerUtils.timeToDate)('00:00', period));
+      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;
-      var nextTime = (0, _timePickerUtils.replaceChar)(time, pos, e.key);
-      setForwardedValue((0, _timePickerUtils.timeToDate)(nextTime, period));
+      setTimeRef.current((0, _timePickerUtils.replaceChar)(time, pos, e.key));
       nextCaret = pos < 5 ? pos + 1 : 5;
     }
     setSelection({
       start: nextCaret,
       end: nextCaret
     });
+    onKeyDown(e);
     e.preventDefault();
-  }, [period, selection.start, setForwardedValue, time]);
+  }, [onKeyDown, selection.start, time]);
   return /*#__PURE__*/_react["default"].createElement(_Input["default"], _extends({
     type: "text",
     inputMode: "decimal",
     role: "spinbutton",
     minLength: 5,
     maxLength: 5,
+    disabled: disabled,
     value: time,
-    right: /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+    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 setPeriod(period === 'AM' ? 'PM' : 'AM');
+        return changePeriod(!isPm);
       }
-    }, period), right),
+    }, isPm ? 'PM' : 'AM'), right),
     onSelect: function onSelect(e) {
       // Update the selection state.
       var _e$currentTarget = e.currentTarget,
@@ -129,7 +153,7 @@ var TimePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       });
       _onSelect(e);
     },
-    onKeyDown: onKeyDown
+    onKeyDown: keyDownHandler
   }, rest, {
     ref: mergedInputRef
   }));

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","names":["TimePicker","forwardRef","ref","notation","value","defaultValue","onChange","onSelect","right","rest","useForwardedRef","inputRef","mergedInputRef","useForwardedState","forwardedValue","setForwardedValue","useState","start","end","selection","setSelection","period","setPeriod","useEffect","current","setSelectionRange","time","useMemo","hour","getHours","toString","padStart","minute","getMinutes","onKeyDown","useCallback","e","nextCaret","key","metaKey","timeToDate","isDigitKey","pos","nextTime","replaceChar","preventDefault","currentTarget","selectionStart","selectionEnd","displayName"],"sources":["../../../src/TimePicker/index.tsx"],"sourcesContent":["import {\n isDigitKey,\n replaceChar,\n timeToDate,\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 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 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 const [period, setPeriod] = useState<'AM' \| 'PM' \| null>(null);\n\n useEffect(() => {\n if (notation === '12-hour') {\n setPeriod('AM');\n }\n }, [notation]);\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 time = useMemo(() => {\n if (!forwardedValue) return notation === '12-hour' ? '12:00' : '00:00';\n const hour = forwardedValue.getHours().toString().padStart(2, '0');\n const minute = forwardedValue.getMinutes().toString().padStart(2, '0');\n return `${hour}:${minute}`;\n }, [forwardedValue, notation]);\n\n const onKeyDown = 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 setForwardedValue(timeToDate('00:00', period));\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 const nextTime = replaceChar(time, pos, e.key);\n setForwardedValue(timeToDate(nextTime, period));\n nextCaret = pos < 5 ? pos + 1 : 5;\n }\n setSelection({ start: nextCaret, end: nextCaret });\n e.preventDefault();\n },\n [period, selection.start, setForwardedValue, time]\n );\n\n return (\n <Input\n type='text'\n inputMode='decimal'\n role='spinbutton'\n minLength={5}\n maxLength={5}\n value={time}\n right={\n <>\n <Button\n type='ghost'\n wide='never'\n size='small'\n onClick={() => setPeriod(period === 'AM' ? 'PM' : 'AM')}\n >\n {period}\n </Button>\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={onKeyDown}\n {...rest}\n ref={mergedInputRef}\n />\n );\n }\n);\n\nTimePicker.displayName = 'TimePicker';\n\nexport default TimePicker;\n"],"mappings":"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"}
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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"}

package/dist/esm/DatePicker/DatePickerCalendar.js CHANGED Viewed

@@ -1,18 +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 React, { useCallback, useRef } from 'react';
 import styled from '@emotion/styled';
-import { ellipsisStyles, resetFocusStyles, transitionStyles } from '@os-design/styles';
+import { getAccessibilityDateLabel, useDatePickerCalendar } from '@os-design/date-picker-utils';
 import { Left, Right } from '@os-design/icons';
+import { ellipsisStyles, resetFocusStyles, transitionStyles } from '@os-design/styles';
 import { clr } from '@os-design/theming';
-import { m } from '@os-design/media';
-import { getAccessibilityDateLabel, useDatePickerCalendar } from '@os-design/date-picker-utils';
+import React, { useCallback, useEffect, useRef } from 'react';
 import Button from '../Button';
-const Container = styled.div`
-  // For popover
-  ${m.min.xs} {
-    padding: ${p => p.theme.datePickerPadding}em;
-  }
-`;
 const MonthContainer = styled.div`
   display: flex;
   align-items: center;
@@ -82,10 +75,27 @@ const DatePickerCalendar = ({
   value,
   onChange = () => {}
 }) => {
-  const onChangeRef = useRef(onChange);
-  useCallback(() => {
-    onChangeRef.current = onChange;
+  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);
+  useEffect(() => {
+    changeHandlerRef.current = changeHandler;
+  }, [changeHandler]);
   const {
     selectedMonth,
     updateMonth,
@@ -99,19 +109,17 @@ const DatePickerCalendar = ({
     role: 'button',
     'aria-label': getAccessibilityDateLabel(date, locale),
     onClick: () => {
-      if (!onChangeRef.current) return;
-      onChangeRef.current(date);
+      changeHandlerRef.current(date);
     },
     onKeyDown: e => {
-      if (!onChangeRef.current) return;
       if (['Enter', ' '].includes(e.key)) {
-        onChangeRef.current(date);
+        changeHandlerRef.current(date);
         e.preventDefault();
       }
     },
     onMouseDown: e => e.preventDefault()
   }), [locale]);
-  return /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(MonthContainer, null, /*#__PURE__*/React.createElement(Button, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MonthContainer, null, /*#__PURE__*/React.createElement(Button, {
     type: "ghost",
     wide: "never",
     size: "small",

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

	@@ -1 +1 @@
1	- {"version":3,"file":"DatePickerCalendar.js","names":["React","useCallback","useRef","styled","ellipsisStyles","resetFocusStyles","transitionStyles","Left","Right","clr","m","getAccessibilityDateLabel","useDatePickerCalendar","Button","Container","div","min","xs","p","theme","datePickerPadding","MonthContainer","Month","Calendar","datePickerCellSize","DayOfWeek","datePickerDayOfWeekColorText","sizes","small","Day","datePickerDaySize","borderRadius","datePickerDayColorBgHover","datePickerDayColorTextHover","DayAnotherMonth","datePickerDayAnotherMonthColorText","Today","datePickerTodayColorBg","datePickerTodayColorText","datePickerTodayColorBorder","SelectedDay","datePickerSelectedDayColorBg","datePickerSelectedDayColorText","DatePickerCalendar","firstDayOfWeek","locale","value","onChange","onChangeRef","current","selectedMonth","updateMonth","days","getDayProps","date","tabIndex","role","onClick","onKeyDown","e","includes","key","preventDefault","onMouseDown","prevMonthLabel","months","month","year","nextMonthLabel","shortDaysOfWeek","slice","map","item","type","toISOString","getDate"],"sources":["../../../src/DatePicker/DatePickerCalendar.tsx"],"sourcesContent":["import React, { HTMLAttributes, useCallback, useRef } from 'react';\nimport styled from '@emotion/styled';\nimport {\n ellipsisStyles,\n resetFocusStyles,\n transitionStyles,\n} from '@os-design/styles';\nimport { Left, Right } from '@os-design/icons';\nimport { clr } from '@os-design/theming';\nimport { m } from '@os-design/media';\nimport {\n DatePickerLocale,\n getAccessibilityDateLabel,\n useDatePickerCalendar,\n} from '@os-design/date-picker-utils';\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 Container = styled.div`\n // For popover\n ${m.min.xs} {\n padding: ${(p) => p.theme.datePickerPadding}em;\n }\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 onChangeRef = useRef(onChange);\n\n useCallback(() => {\n onChangeRef.current = onChange;\n }, [onChange]);\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 if (!onChangeRef.current) return;\n onChangeRef.current(date);\n },\n onKeyDown: (e) => {\n if (!onChangeRef.current) return;\n if (['Enter', ' '].includes(e.key)) {\n onChangeRef.current(date);\n e.preventDefault();\n }\n },\n onMouseDown: (e) => e.preventDefault(),\n }),\n [locale]\n );\n\n return (\n <Container>\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 </Container>\n );\n};\n\nexport default DatePickerCalendar;\n"],"mappings":"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"}
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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"}

package/dist/esm/DatePicker/index.js CHANGED Viewed

@@ -1,5 +1,6 @@
 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 { defaultFormat, defaultLocale, getAccessibilityDateLabel } from '@os-design/date-picker-utils';
+import styled from '@emotion/styled';
+import { defaultLocale, getAccessibilityDateLabel } 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';
@@ -10,7 +11,15 @@ import Modal from '../Modal';
 import Popover from '../Popover';
 import { SelectContainer } from '../Select';
 import { ClearIcon, Content, IconContainer, LeftAddon, Placeholder, RightAddon, Title } from '../Select/SelectToggle';
+import TimePicker from '../TimePicker';
 import DatePickerCalendar from './DatePickerCalendar';
+const StyledPopover = styled(Popover)`
+  padding: ${p => p.theme.datePickerPadding}em;
+`;
+const TimeContainer = styled.div`
+  margin-top: 0.5em;
+`;
 /**
  * The component to choose a date.
  */
@@ -21,9 +30,11 @@ const DatePicker = /*#__PURE__*/forwardRef(({
   rightHasPadding = false,
   placeholder,
   disabled = false,
-  format = defaultFormat,
+  format: formatFn,
   firstDayOfWeek = 'sunday',
   locale = defaultLocale,
+  showTime = false,
+  timeNotation = '12-hour',
   value,
   defaultValue,
   onChange,
@@ -37,10 +48,23 @@ const DatePicker = /*#__PURE__*/forwardRef(({
     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, locale);
-  }, [forwardedValue, format, locale]);
+    return format(forwardedValue);
+  }, [forwardedValue, format]);
   const closeHandler = useCallback(() => {
     setOpened(false);
   }, []);
@@ -52,7 +76,7 @@ const DatePicker = /*#__PURE__*/forwardRef(({
     value: forwardedValue,
     onChange: v => {
       setForwardedValue(v);
-      closeHandler();
+      if (!showTime) closeHandler();
     }
   });
   const valueIsSpecified = useMemo(() => formattedValue !== undefined && formattedValue !== null, [formattedValue]);
@@ -88,6 +112,19 @@ const DatePicker = /*#__PURE__*/forwardRef(({
     if (valueIsSpecified) return false;
     return right ? rightHasPadding : true;
   }, [right, rightHasPadding, valueIsSpecified]);
+  const timeComponent = useMemo(() => showTime && forwardedValue ? /*#__PURE__*/React.createElement(TimeContainer, null, /*#__PURE__*/React.createElement(TimePicker, {
+    autoFocus: true,
+    disabled: disabled,
+    notation: timeNotation,
+    value: forwardedValue,
+    onChange: setForwardedValue,
+    onKeyDown: e => {
+      if (disabled) return;
+      if (e.key === 'Enter') {
+        setOpened(!opened);
+      }
+    }
+  })) : null, [disabled, forwardedValue, opened, setForwardedValue, showTime, timeNotation]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SelectContainer, _extends({
     opened: opened,
     disabled: disabled,
@@ -130,19 +167,19 @@ const DatePicker = /*#__PURE__*/forwardRef(({
     })
   }, /*#__PURE__*/React.createElement(RightAddon, {
     hasPadding: rightHasPaddingValue
-  }, rightValue))), isMinXs ? /*#__PURE__*/React.createElement(Popover, {
+  }, rightValue))), isMinXs ? /*#__PURE__*/React.createElement(StyledPopover, {
     trigger: containerRef,
     placement: "bottom-start",
     visible: opened,
     onClose: closeHandler,
     size: size
-  }, calendar) : /*#__PURE__*/React.createElement(Modal, {
+  }, calendar, timeComponent) : /*#__PURE__*/React.createElement(Modal, {
     title: placeholder,
     footer: null,
     visible: opened,
     onClose: closeHandler,
     size: size
-  }, calendar));
+  }, calendar, timeComponent));
 });
 DatePicker.displayName = 'DatePicker';
 export default DatePicker;

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

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

package/dist/esm/TimePicker/index.js CHANGED Viewed

@@ -1,9 +1,12 @@
 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 { isDigitKey, replaceChar, timeToDate } from '@os-design/time-picker-utils';
+import { isDigitKey, replaceChar, parseTime } from '@os-design/time-picker-utils';
 import { useForwardedRef, useForwardedState } from '@os-design/utils';
-import React, { forwardRef, useCallback, useEffect, useMemo, useState } from 'react';
+import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import Button from '../Button';
 import Input from '../Input';
+const pad = n => n.toString().padStart(2, '0');
+const HOURS_12 = 12 * 60 * 60 * 1000;
 /**
  * The component to choose a time.
  */
@@ -13,6 +16,8 @@ const TimePicker = /*#__PURE__*/forwardRef(({
   defaultValue,
   onChange = () => {},
   onSelect = () => {},
+  onKeyDown = () => {},
+  disabled = false,
   right,
   ...rest
 }, ref) => {
@@ -26,25 +31,36 @@ const TimePicker = /*#__PURE__*/forwardRef(({
     start: 0,
     end: 0
   });
-  const [period, setPeriod] = useState(null);
+  const isPm = useMemo(() => !!forwardedValue && forwardedValue.getHours() >= 12, [forwardedValue]);
+  const setTime = useCallback(time => {
+    const [h, m] = parseTime(time, notation, isPm);
+    const nextValue = new Date(forwardedValue ? forwardedValue.getTime() : 0);
+    nextValue.setHours(h);
+    nextValue.setMinutes(m);
+    setForwardedValue(nextValue);
+  }, [forwardedValue, isPm, notation, setForwardedValue]);
+  const setTimeRef = useRef(setTime);
   useEffect(() => {
-    if (notation === '12-hour') {
-      setPeriod('AM');
-    }
-  }, [notation]);
+    setTimeRef.current = setTime;
+  }, [setTime]);
+  const time = useMemo(() => {
+    if (!forwardedValue) return notation === '12-hour' ? '12:00' : '00:00';
+    const hour = notation === '12-hour' ? forwardedValue.getHours() % 12 || 12 : forwardedValue.getHours();
+    const minute = forwardedValue.getMinutes();
+    return `${pad(hour)}:${pad(minute)}`;
+  }, [forwardedValue, notation]);
+  const changePeriod = useCallback(nextIsPm => {
+    if (!forwardedValue) return;
+    const nextValue = new Date(forwardedValue.getTime() + HOURS_12 * (nextIsPm ? 1 : -1));
+    setForwardedValue(nextValue);
+  }, [forwardedValue, setForwardedValue]);
   // Update the selection
   useEffect(() => {
     if (!inputRef.current) return;
     inputRef.current.setSelectionRange(selection.start, selection.end);
   }, [inputRef, selection]);
-  const time = useMemo(() => {
-    if (!forwardedValue) return notation === '12-hour' ? '12:00' : '00:00';
-    const hour = forwardedValue.getHours().toString().padStart(2, '0');
-    const minute = forwardedValue.getMinutes().toString().padStart(2, '0');
-    return `${hour}:${minute}`;
-  }, [forwardedValue, notation]);
-  const onKeyDown = useCallback(e => {
+  const keyDownHandler = useCallback(e => {
     let nextCaret = selection.start;
     if (e.key === 'ArrowUp' || e.key === 'ArrowLeft' && e.metaKey) {
       nextCaret = 0;
@@ -55,34 +71,36 @@ const TimePicker = /*#__PURE__*/forwardRef(({
     } else if (e.key === 'ArrowRight') {
       nextCaret = selection.start < 5 ? selection.start + 1 : 5;
     } else if (e.key === 'Backspace') {
-      setForwardedValue(timeToDate('00:00', period));
+      setTimeRef.current('00:00');
       nextCaret = 0;
     } else if (isDigitKey(e.key)) {
       let pos = selection.start === 2 ? 3 : selection.start;
       if (pos === 5) pos = 0;
-      const nextTime = replaceChar(time, pos, e.key);
-      setForwardedValue(timeToDate(nextTime, period));
+      setTimeRef.current(replaceChar(time, pos, e.key));
       nextCaret = pos < 5 ? pos + 1 : 5;
     }
     setSelection({
       start: nextCaret,
       end: nextCaret
     });
+    onKeyDown(e);
     e.preventDefault();
-  }, [period, selection.start, setForwardedValue, time]);
+  }, [onKeyDown, selection.start, time]);
   return /*#__PURE__*/React.createElement(Input, _extends({
     type: "text",
     inputMode: "decimal",
     role: "spinbutton",
     minLength: 5,
     maxLength: 5,
+    disabled: disabled,
     value: time,
-    right: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
+    right: /*#__PURE__*/React.createElement(React.Fragment, null, notation === '12-hour' && /*#__PURE__*/React.createElement(Button, {
       type: "ghost",
       wide: "never",
       size: "small",
-      onClick: () => setPeriod(period === 'AM' ? 'PM' : 'AM')
-    }, period), right),
+      disabled: disabled,
+      onClick: () => changePeriod(!isPm)
+    }, isPm ? 'PM' : 'AM'), right),
     onSelect: e => {
       // Update the selection state.
       const {
@@ -95,7 +113,7 @@ const TimePicker = /*#__PURE__*/forwardRef(({
       });
       onSelect(e);
     },
-    onKeyDown: onKeyDown
+    onKeyDown: keyDownHandler
   }, rest, {
     ref: mergedInputRef
   }));

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

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

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

@@ -1,5 +1,5 @@
-import React from 'react';
 import { DatePickerLocale } from '@os-design/date-picker-utils';
+import React from 'react';
 interface DatePickerCalendarProps {
     firstDayOfWeek: 'sunday' | 'monday';
     locale: DatePickerLocale;

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

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

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

@@ -12,6 +12,8 @@ export interface DatePickerProps extends JsxDivProps, WithSize {
     format?: (date: Date) => string;
     firstDayOfWeek?: 'sunday' | 'monday';
     locale?: DatePickerLocale;
+    showTime?: boolean;
+    timeNotation?: '12-hour' | '24-hour';
     value?: Date | null;
     defaultValue?: Date | null;
     onChange?: (value: Date | null) => void;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/DatePicker/index.tsx"],"names":[],"mappings":"~~AAAA~~,OAAO,EACL,gBAAgB,~~EAIjB~~,MAAM,8BAA8B,CAAC;AAGtC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAO7C,OAAO,KAAqD,MAAM,OAAO,CAAC;~~AAgB1E~~,aAAK,WAAW,GAAG,IAAI,CACrB,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAC5B,OAAO,GAAG,cAAc,GAAG,UAAU,GAAG,KAAK,CAC9C,CAAC;AACF,MAAM,WAAW,eAAgB,SAAQ,WAAW,EAAE,QAAQ;IAK5D,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAMvB,cAAc,CAAC,EAAE,OAAO,CAAC;IAKzB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAMxB,eAAe,CAAC,EAAE,OAAO,CAAC;IAK1B,WAAW,CAAC,EAAE,MAAM,CAAC;IAKrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAKnB,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,MAAM,CAAC;IAKhC,cAAc,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAKrC,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAK1B,KAAK,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAKpB,YAAY,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAK3B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAC;CACzC;~~AAKD~~,QAAA,MAAM,UAAU,~~wFAqMf~~,CAAC;AAIF,eAAe,UAAU,CAAC"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/DatePicker/index.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,gBAAgB,EAGjB,MAAM,8BAA8B,CAAC;AAGtC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAO7C,OAAO,KAAqD,MAAM,OAAO,CAAC;AAiB1E,aAAK,WAAW,GAAG,IAAI,CACrB,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAC5B,OAAO,GAAG,cAAc,GAAG,UAAU,GAAG,KAAK,CAC9C,CAAC;AACF,MAAM,WAAW,eAAgB,SAAQ,WAAW,EAAE,QAAQ;IAK5D,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAMvB,cAAc,CAAC,EAAE,OAAO,CAAC;IAKzB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAMxB,eAAe,CAAC,EAAE,OAAO,CAAC;IAK1B,WAAW,CAAC,EAAE,MAAM,CAAC;IAKrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAKnB,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,MAAM,CAAC;IAKhC,cAAc,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAKrC,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAK1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IAKnB,YAAY,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAKrC,KAAK,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAKpB,YAAY,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAK3B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAC;CACzC;AAaD,QAAA,MAAM,UAAU,wFAuPf,CAAC;AAIF,eAAe,UAAU,CAAC"}

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

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

package/package.json CHANGED Viewed

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