npm - @os-design/core - Versions diffs - 1.0.158 → 1.0.161 - Mend

@os-design/core 1.0.158 → 1.0.161

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 +62 -18
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 +53 -16
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 +3 -3
package/dist/types/DatePicker/DatePickerCalendar.d.ts.map +1 -1
package/dist/types/DatePicker/index.d.ts +7 -5
package/dist/types/DatePicker/index.d.ts.map +1 -1
package/dist/types/TimePicker/index.d.ts.map +1 -1
package/package.json +4 -4

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.getTime() / 1000);
+        changeHandlerRef.current(date);
       },
       onKeyDown: function onKeyDown(e) {
-        if (!onChangeRef.current) return;
         if (['Enter', ' '].includes(e.key)) {
-          onChangeRef.current(date.getTime() / 1000);
+          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","getTime","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?: number \| null;\n onChange?: (value: number) => 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.getTime() / 1000);\n },\n onKeyDown: (e) => {\n if (!onChangeRef.current) return;\n if (['Enter', ' '].includes(e.key)) {\n onChangeRef.current(date.getTime() / 1000);\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,23 +5,29 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _utils = require("@os-design/utils");
+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");
-var _datePickerUtils = require("@os-design/date-picker-utils");
 var _theming = require("@os-design/theming");
+var _utils = require("@os-design/utils");
+var _react = _interopRequireWildcard(require("react"));
+var _Button = _interopRequireDefault(require("../Button"));
+var _Modal = _interopRequireDefault(require("../Modal"));
+var _Popover = _interopRequireDefault(require("../Popover"));
 var _Select = require("../Select");
 var _SelectToggle = require("../Select/SelectToggle");
-var _Popover = _interopRequireDefault(require("../Popover"));
-var _Modal = _interopRequireDefault(require("../Modal"));
+var _TimePicker = _interopRequireDefault(require("../TimePicker"));
 var _DatePickerCalendar = _interopRequireDefault(require("./DatePickerCalendar"));
-var _Button = _interopRequireDefault(require("../Button"));
-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 forwardedValue;
-    return format(new Date(forwardedValue * 1000), locale);
-  }, [forwardedValue, format, locale]);
+    if (!forwardedValue) return null;
+    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,
@@ -143,7 +187,7 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       return e.preventDefault();
     },
     role: "combobox",
-    "aria-label": forwardedValue !== undefined && forwardedValue !== null ? (0, _datePickerUtils.getAccessibilityDateLabel)(new Date(forwardedValue * 1000), locale) : undefined,
+    "aria-label": forwardedValue ? (0, _datePickerUtils.getAccessibilityDateLabel)(forwardedValue, locale) : undefined,
     "aria-disabled": disabled
   }, rest, {
     ref: mergedContainerRef
@@ -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","Date","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 React, { forwardRef, useCallback, useMemo, useState } from 'react';\nimport { WithSize } from '@os-design/styles';\nimport {\n useForwardedRef,\n useForwardedState,\n useKeyPress,\n} from '@os-design/utils';\nimport { Down, Up } from '@os-design/icons';\nimport { useIsMinWidth } from '@os-design/media';\nimport {\n defaultLocale,\n DatePickerLocale,\n defaultFormat,\n getAccessibilityDateLabel,\n} from '@os-design/date-picker-utils';\nimport { ThemeOverrider } from '@os-design/theming';\nimport { SelectContainer } from '../Select';\nimport {\n Content,\n LeftAddon,\n RightAddon,\n ClearIcon,\n IconContainer,\n Placeholder,\n Title,\n} from '../Select/SelectToggle';\nimport Popover from '../Popover';\nimport Modal from '../Modal';\nimport DatePickerCalendar from './DatePickerCalendar';\nimport Button from '../Button';\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?: number \| null;\n /\n The default value.\n * @default undefined\n /\n defaultValue?: number \| null;\n /\n The change event handler.\n * @default undefined\n /\n onChange?: (value: number \| 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 forwardedValue;\n return format(new Date(forwardedValue 1000), 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 !== undefined && forwardedValue !== null\n ? getAccessibilityDateLabel(\n new Date(forwardedValue * 1000),\n locale\n )\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
   }));