@os-design/core 1.0.158 → 1.0.159

package/dist/cjs/DatePicker/DatePickerCalendar.js

@@ -90,12 +90,12 @@ var DatePickerCalendar = function DatePickerCalendar(_ref) {
       'aria-label': (0, _datePickerUtils.getAccessibilityDateLabel)(date, locale),
       onClick: function onClick() {
         if (!onChangeRef.current) return;
-        onChangeRef.current(date.getTime() / 1000);
+        onChangeRef.current(date);
       },
       onKeyDown: function onKeyDown(e) {
         if (!onChangeRef.current) return;
         if (['Enter', ' '].includes(e.key)) {
-          onChangeRef.current(date.getTime() / 1000);
+          onChangeRef.current(date);
           e.preventDefault();
         }
       },

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

@@ -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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"}
+{"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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"}

package/dist/cjs/DatePicker/index.js

@@ -5,18 +5,18 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _utils = require("@os-design/utils");
+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 _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 }; }
 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); }
@@ -71,8 +71,8 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     forwardedValue = _useForwardedState2[0],
     setForwardedValue = _useForwardedState2[1];
   var formattedValue = (0, _react.useMemo)(function () {
-    if (!forwardedValue) return forwardedValue;
-    return format(new Date(forwardedValue * 1000), locale);
+    if (!forwardedValue) return null;
+    return format(forwardedValue, locale);
   }, [forwardedValue, format, locale]);
   var closeHandler = (0, _react.useCallback)(function () {
     setOpened(false);
@@ -143,7 +143,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

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

@@ -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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"}
+{"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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"}

package/dist/esm/DatePicker/DatePickerCalendar.js

@@ -100,12 +100,12 @@ const DatePickerCalendar = ({
     'aria-label': getAccessibilityDateLabel(date, locale),
     onClick: () => {
       if (!onChangeRef.current) return;
-      onChangeRef.current(date.getTime() / 1000);
+      onChangeRef.current(date);
     },
     onKeyDown: e => {
       if (!onChangeRef.current) return;
       if (['Enter', ' '].includes(e.key)) {
-        onChangeRef.current(date.getTime() / 1000);
+        onChangeRef.current(date);
         e.preventDefault();
       }
     },

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

@@ -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","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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"}
+{"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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"}

package/dist/esm/DatePicker/index.js

@@ -1,16 +1,16 @@
 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, { forwardRef, useCallback, useMemo, useState } from 'react';
-import { useForwardedRef, useForwardedState, useKeyPress } from '@os-design/utils';
+import { defaultFormat, defaultLocale, getAccessibilityDateLabel } from '@os-design/date-picker-utils';
 import { Down, Up } from '@os-design/icons';
 import { useIsMinWidth } from '@os-design/media';
-import { defaultLocale, defaultFormat, getAccessibilityDateLabel } from '@os-design/date-picker-utils';
 import { ThemeOverrider } from '@os-design/theming';
-import { SelectContainer } from '../Select';
-import { Content, LeftAddon, RightAddon, ClearIcon, IconContainer, Placeholder, Title } from '../Select/SelectToggle';
-import Popover from '../Popover';
+import { useForwardedRef, useForwardedState, useKeyPress } from '@os-design/utils';
+import React, { forwardRef, useCallback, useMemo, useState } from 'react';
+import Button from '../Button';
 import Modal from '../Modal';
+import Popover from '../Popover';
+import { SelectContainer } from '../Select';
+import { ClearIcon, Content, IconContainer, LeftAddon, Placeholder, RightAddon, Title } from '../Select/SelectToggle';
 import DatePickerCalendar from './DatePickerCalendar';
-import Button from '../Button';
 /**
  * The component to choose a date.
  */
@@ -38,8 +38,8 @@ const DatePicker = /*#__PURE__*/forwardRef(({
     onChange
   });
   const formattedValue = useMemo(() => {
-    if (!forwardedValue) return forwardedValue;
-    return format(new Date(forwardedValue * 1000), locale);
+    if (!forwardedValue) return null;
+    return format(forwardedValue, locale);
   }, [forwardedValue, format, locale]);
   const closeHandler = useCallback(() => {
     setOpened(false);
@@ -106,7 +106,7 @@ const DatePicker = /*#__PURE__*/forwardRef(({
     },
     onMouseDown: e => e.preventDefault(),
     role: "combobox",
-    "aria-label": forwardedValue !== undefined && forwardedValue !== null ? getAccessibilityDateLabel(new Date(forwardedValue * 1000), locale) : undefined,
+    "aria-label": forwardedValue ? getAccessibilityDateLabel(forwardedValue, locale) : undefined,
     "aria-disabled": disabled
   }, rest, {
     ref: mergedContainerRef

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","forwardRef","useCallback","useMemo","useState","useForwardedRef","useForwardedState","useKeyPress","Down","Up","useIsMinWidth","defaultLocale","defaultFormat","getAccessibilityDateLabel","ThemeOverrider","SelectContainer","Content","LeftAddon","RightAddon","ClearIcon","IconContainer","Placeholder","Title","Popover","Modal","DatePickerCalendar","Button","DatePicker","left","leftHasPadding","right","rightHasPadding","placeholder","disabled","format","firstDayOfWeek","locale","value","defaultValue","onChange","size","rest","ref","containerRef","mergedContainerRef","opened","setOpened","forwardedValue","setForwardedValue","formattedValue","Date","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 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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"}
+{"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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"}

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

@@ -3,8 +3,8 @@ import { DatePickerLocale } from '@os-design/date-picker-utils';
 interface DatePickerCalendarProps {
     firstDayOfWeek: 'sunday' | 'monday';
     locale: DatePickerLocale;
-    value?: number | null;
-    onChange?: (value: number) => void;
+    value?: Date | null;
+    onChange?: (value: Date) => void;
 }
 declare const DatePickerCalendar: React.FC<DatePickerCalendarProps>;
 export default DatePickerCalendar;

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

@@ -1 +1 @@
-{"version":3,"file":"DatePickerCalendar.d.ts","sourceRoot":"","sources":["../../../src/DatePicker/DatePickerCalendar.tsx"],"names":[],"mappings":"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,MAAM,GAAG,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAgFD,QAAA,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAyGzD,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
+{"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"}

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

@@ -1,6 +1,6 @@
-import React from 'react';
-import { WithSize } from '@os-design/styles';
 import { DatePickerLocale } from '@os-design/date-picker-utils';
+import { WithSize } from '@os-design/styles';
+import React from 'react';
 declare type JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'value' | 'defaultValue' | 'onChange' | 'ref'>;
 export interface DatePickerProps extends JsxDivProps, WithSize {
     left?: React.ReactNode;
@@ -12,9 +12,9 @@ export interface DatePickerProps extends JsxDivProps, WithSize {
     format?: (date: Date) => string;
     firstDayOfWeek?: 'sunday' | 'monday';
     locale?: DatePickerLocale;
-    value?: number | null;
-    defaultValue?: number | null;
-    onChange?: (value: number | null) => void;
+    value?: Date | null;
+    defaultValue?: Date | null;
+    onChange?: (value: Date | null) => void;
 }
 declare const DatePicker: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<HTMLDivElement>>;
 export default DatePicker;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/DatePicker/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqD,MAAM,OAAO,CAAC;AAC1E,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAQ7C,OAAO,EAEL,gBAAgB,EAGjB,MAAM,8BAA8B,CAAC;AAiBtC,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,MAAM,GAAG,IAAI,CAAC;IAKtB,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAK7B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CAC3C;AAKD,QAAA,MAAM,UAAU,wFAwMf,CAAC;AAIF,eAAe,UAAU,CAAC"}
+{"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@os-design/core",
-  "version": "1.0.158",
+  "version": "1.0.159",
   "license": "UNLICENSED",
   "repository": "git@gitlab.com:os-team/libs/os-design.git",
   "main": "dist/cjs/index.js",
@@ -29,7 +29,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@os-design/date-picker-utils": "^1.0.9",
+    "@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",
@@ -58,5 +58,5 @@
     "react": ">=18",
     "react-dom": ">=18"
   },
-  "gitHead": "1f7502d2714949d3dabaa8e103a4e315fda8e2f8"
+  "gitHead": "8081e5c34fd6411d7ca98a699f97fa726e32ce0b"
 }