@os-design/core 1.0.163 → 1.0.165

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["styled","defaultLocale","getAccessibilityDateLabel","Down","Up","useIsMinWidth","ThemeOverrider","useForwardedRef","useForwardedState","useKeyPress","React","forwardRef","useCallback","useMemo","useRef","useState","Button","Modal","Popover","SelectContainer","ClearIcon","Content","IconContainer","LeftAddon","Placeholder","RightAddon","Title","TimePicker","DatePickerCalendar","StyledPopover","p","theme","datePickerPadding","TimeContainer","div","Dash","baseHeight","StyledTimePicker","DatePicker","left","leftHasPadding","right","rightHasPadding","placeholder","disabled","format","formatFn","firstDayOfWeek","locale","showTime","timeNotation","range","value","defaultValue","onChange","size","rest","ref","containerRef","mergedContainerRef","opened","setOpened","forwardedValue","setForwardedValue","dateToStr","date","toLocaleString","undefined","year","month","day","hour","minute","hour12","v","Array","isArray","map","item","join","formattedValue","closeHandler","window","isMinXs","valueIsSpecified","rightValue","e","stopPropagation","includes","key","current","focus","preventDefault","clearLabel","rightHasPaddingValue","calendarComponent","secondTimePickerRef","tabOnInputComplete","target","selectionStart","closeOnInputComplete","timeComponent","style","width","t","buttonPaddingHorizontal","selectToggleListItemHeight","sizes","small","displayName"],"sources":["../../../src/DatePicker/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport {\n  DatePickerLocale,\n  defaultLocale,\n  getAccessibilityDateLabel,\n} from '@os-design/date-picker-utils';\nimport { Down, Up } from '@os-design/icons';\nimport { useIsMinWidth } from '@os-design/media';\nimport { WithSize } from '@os-design/styles';\nimport { ThemeOverrider } from '@os-design/theming';\nimport {\n  useForwardedRef,\n  useForwardedState,\n  useKeyPress,\n} from '@os-design/utils';\nimport React, {\n  forwardRef,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport Button from '../Button';\nimport Modal from '../Modal';\nimport Popover from '../Popover';\nimport { SelectContainer } from '../Select';\nimport {\n  ClearIcon,\n  Content,\n  IconContainer,\n  LeftAddon,\n  Placeholder,\n  RightAddon,\n  Title,\n} from '../Select/SelectToggle';\nimport TimePicker from '../TimePicker';\nimport DatePickerCalendar from './DatePickerCalendar';\n\ntype JsxDivProps = Omit<\n  JSX.IntrinsicElements['div'],\n  'value' | 'defaultValue' | 'onChange' | 'ref'\n>;\ninterface BaseDatePickerProps<T> extends JsxDivProps, WithSize {\n  /**\n   * The component located on the left side.\n   * @default undefined\n   */\n  left?: React.ReactNode;\n  /**\n   * Adds padding to the left component.\n   * It can be useful when passing an icon or text in the left component.\n   * @default false\n   */\n  leftHasPadding?: boolean;\n  /**\n   * The component located on the right side.\n   * @default undefined\n   */\n  right?: React.ReactNode;\n  /**\n   * Adds padding to the right component.\n   * It can be useful when passing an icon or text in the right component.\n   * @default false\n   */\n  rightHasPadding?: boolean;\n  /**\n   * The placeholder of the date picker.\n   * @default undefined\n   */\n  placeholder?: string;\n  /**\n   * Whether the date picker is disabled.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * The format of the date.\n   * @default undefined\n   */\n  format?: (value: T) => string;\n  /**\n   * The first day of the week.\n   * @default sunday\n   */\n  firstDayOfWeek?: 'sunday' | 'monday';\n  /**\n   * The locale of the date picker.\n   * @default undefined\n   */\n  locale?: DatePickerLocale;\n  /**\n   * Whether the time is shown.\n   * @default false\n   */\n  showTime?: boolean;\n  /**\n   * The time notation.\n   * @default 12-hour\n   */\n  timeNotation?: '12-hour' | '24-hour';\n  /**\n   * Selected date.\n   * @default undefined\n   */\n  value?: T | null;\n  /**\n   * The default value.\n   * @default undefined\n   */\n  defaultValue?: T | null;\n  /**\n   * The change event handler.\n   * @default undefined\n   */\n  onChange?: (value: T | null) => void;\n}\ninterface DateNotRangePickerProps extends BaseDatePickerProps<Date> {\n  /**\n   * Whether the value is a range.\n   * @default false\n   */\n  range?: false;\n}\ninterface DateRangePickerProps extends BaseDatePickerProps<[Date, Date]> {\n  /**\n   * Whether the value is a range.\n   * @default false\n   */\n  range: true;\n}\nexport type DatePickerProps = DateNotRangePickerProps | DateRangePickerProps;\n\nconst StyledPopover = styled(Popover)`\n  padding: ${(p) => p.theme.datePickerPadding}em;\n`;\n\nconst TimeContainer = styled.div`\n  display: flex;\n  justify-content: center;\n  margin-top: 0.5em;\n`;\n\nconst Dash = styled.div`\n  margin: 0 0.5em;\n  line-height: ${(p) => p.theme.baseHeight}em;\n`;\n\nconst StyledTimePicker = styled(TimePicker)`\n  width: 2.5em;\n  text-align: center;\n`;\n\n/**\n * The component to choose a date.\n */\nconst DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(\n  (\n    {\n      left,\n      leftHasPadding = false,\n      right,\n      rightHasPadding = false,\n      placeholder,\n      disabled = false,\n      format: formatFn,\n      firstDayOfWeek = 'sunday',\n      locale = defaultLocale,\n      showTime = false,\n      timeNotation = '12-hour',\n      range = false,\n      value,\n      defaultValue,\n      onChange,\n      size,\n      ...rest\n    },\n    ref\n  ) => {\n    const [containerRef, mergedContainerRef] = useForwardedRef(ref);\n    const [opened, setOpened] = useState(false);\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    const [forwardedValue, setForwardedValue] = useForwardedState<any>({\n      value,\n      defaultValue,\n      onChange,\n    });\n\n    const format = useMemo(() => {\n      if (formatFn) return formatFn;\n\n      const dateToStr = (date: Date) =>\n        date.toLocaleString(undefined, {\n          year: 'numeric',\n          month: '2-digit',\n          day: '2-digit',\n          ...(showTime\n            ? {\n                hour: '2-digit',\n                minute: '2-digit',\n                hour12: timeNotation === '12-hour',\n              }\n            : {}),\n        });\n\n      return (v: Date | [Date, Date]) =>\n        Array.isArray(v)\n          ? v.map((item) => dateToStr(item)).join(' - ')\n          : dateToStr(v);\n    }, [formatFn, showTime, timeNotation]);\n\n    const formattedValue = useMemo(() => {\n      if (!forwardedValue) return null;\n      return format(forwardedValue);\n    }, [forwardedValue, format]);\n\n    const closeHandler = useCallback(() => {\n      setOpened(false);\n    }, []);\n\n    useKeyPress(\n      (typeof window !== 'undefined' ? window : undefined) as EventTarget,\n      'Escape',\n      closeHandler\n    );\n    const isMinXs = useIsMinWidth('xs');\n\n    const valueIsSpecified = useMemo(\n      () => formattedValue !== undefined && formattedValue !== null,\n      [formattedValue]\n    );\n\n    const rightValue = useMemo(() => {\n      if (valueIsSpecified) {\n        return (\n          <div aria-hidden>\n            <Button\n              type='ghost'\n              wide='never'\n              size='small'\n              disabled={disabled}\n              onClick={(e) => {\n                setForwardedValue(null);\n                e.stopPropagation();\n              }}\n              onKeyDown={(e) => {\n                if (disabled) return;\n                if (['Enter', ' '].includes(e.key)) {\n                  setForwardedValue(null);\n                  if (!containerRef.current) return;\n                  containerRef.current.focus();\n                  e.preventDefault();\n                  e.stopPropagation();\n                }\n              }}\n              aria-label={locale.clearLabel}\n            >\n              <ClearIcon />\n            </Button>\n          </div>\n        );\n      }\n      return (\n        right || <IconContainer>{opened ? <Up /> : <Down />}</IconContainer>\n      );\n    }, [\n      containerRef,\n      disabled,\n      locale.clearLabel,\n      opened,\n      right,\n      setForwardedValue,\n      valueIsSpecified,\n    ]);\n\n    const rightHasPaddingValue = useMemo(() => {\n      if (valueIsSpecified) return false;\n      return right ? rightHasPadding : true;\n    }, [right, rightHasPadding, valueIsSpecified]);\n\n    const calendarComponent = useMemo(\n      () => (\n        <DatePickerCalendar\n          firstDayOfWeek={firstDayOfWeek}\n          locale={locale}\n          range={range}\n          value={forwardedValue}\n          onChange={(v) => {\n            setForwardedValue(v);\n            if (!showTime && !range) {\n              closeHandler();\n            }\n          }}\n        />\n      ),\n      [\n        closeHandler,\n        firstDayOfWeek,\n        forwardedValue,\n        locale,\n        range,\n        setForwardedValue,\n        showTime,\n      ]\n    );\n\n    const secondTimePickerRef = useRef<HTMLInputElement>(null);\n\n    const tabOnInputComplete = useCallback((e) => {\n      if (e.target.selectionStart < 5) return;\n      secondTimePickerRef.current?.focus();\n    }, []);\n\n    const closeOnInputComplete = useCallback(\n      (e) => {\n        if (e.target.selectionStart < 5) return;\n        closeHandler();\n      },\n      [closeHandler]\n    );\n\n    const timeComponent = useMemo(\n      () =>\n        showTime && forwardedValue ? (\n          <TimeContainer>\n            {Array.isArray(forwardedValue) ? (\n              <>\n                <StyledTimePicker\n                  autoFocus\n                  disabled={disabled}\n                  notation={timeNotation}\n                  containerProps={{ style: { width: 'auto' } }}\n                  value={forwardedValue[0]}\n                  onChange={(v) => setForwardedValue([v, forwardedValue[1]])}\n                  onKeyDown={(e) => {\n                    if (disabled) return;\n                    if (e.key === 'Enter') {\n                      setOpened(!opened);\n                    }\n                  }}\n                  onKeyUp={tabOnInputComplete}\n                />\n                <Dash>–</Dash>\n                <StyledTimePicker\n                  ref={secondTimePickerRef}\n                  disabled={disabled}\n                  notation={timeNotation}\n                  containerProps={{ style: { width: 'auto' } }}\n                  value={forwardedValue[1]}\n                  onChange={(v) => setForwardedValue([forwardedValue[0], v])}\n                  onKeyDown={(e) => {\n                    if (disabled) return;\n                    if (e.key === 'Enter') {\n                      setOpened(!opened);\n                    }\n                  }}\n                  onKeyUp={closeOnInputComplete}\n                />\n              </>\n            ) : (\n              <StyledTimePicker\n                autoFocus\n                disabled={disabled}\n                notation={timeNotation}\n                containerProps={{ style: { width: 'auto' } }}\n                value={forwardedValue}\n                onChange={setForwardedValue}\n                onKeyDown={(e) => {\n                  if (disabled) return;\n                  if (e.key === 'Enter') {\n                    setOpened(!opened);\n                  }\n                }}\n                onKeyUp={closeOnInputComplete}\n              />\n            )}\n          </TimeContainer>\n        ) : null,\n      [\n        closeOnInputComplete,\n        disabled,\n        forwardedValue,\n        opened,\n        setForwardedValue,\n        showTime,\n        tabOnInputComplete,\n        timeNotation,\n      ]\n    );\n\n    return (\n      <>\n        <SelectContainer\n          opened={opened}\n          disabled={disabled}\n          size={size}\n          tabIndex={!disabled ? 0 : -1}\n          onClick={() => {\n            if (disabled) return;\n            setOpened(!opened);\n          }}\n          onKeyDown={(e) => {\n            if (disabled) return;\n            if (['Enter', ' '].includes(e.key)) {\n              setOpened(!opened);\n              e.preventDefault();\n            }\n          }}\n          onMouseDown={(e) => e.preventDefault()}\n          role='combobox'\n          aria-label={\n            forwardedValue\n              ? getAccessibilityDateLabel(forwardedValue, locale)\n              : undefined\n          }\n          aria-disabled={disabled}\n          {...rest}\n          ref={mergedContainerRef}\n        >\n          {left && (\n            <ThemeOverrider\n              overrides={(t) => ({\n                buttonPaddingHorizontal: 0.8,\n                baseHeight: t.selectToggleListItemHeight / t.sizes.small,\n              })}\n            >\n              <LeftAddon hasPadding={leftHasPadding}>{left}</LeftAddon>\n            </ThemeOverrider>\n          )}\n\n          <Content hasLeft={!!left} hasRight={!!right}>\n            {valueIsSpecified ? (\n              <Title disabled={disabled} aria-hidden>\n                {formattedValue}\n              </Title>\n            ) : (\n              <Placeholder>{placeholder}</Placeholder>\n            )}\n          </Content>\n\n          {rightValue && (\n            <ThemeOverrider\n              overrides={(t) => ({\n                buttonPaddingHorizontal: 0.8,\n                baseHeight: t.selectToggleListItemHeight / t.sizes.small,\n              })}\n            >\n              <RightAddon hasPadding={rightHasPaddingValue}>\n                {rightValue}\n              </RightAddon>\n            </ThemeOverrider>\n          )}\n        </SelectContainer>\n\n        {isMinXs ? (\n          <StyledPopover\n            trigger={containerRef}\n            placement='bottom-start'\n            visible={opened}\n            onClose={closeHandler}\n            size={size}\n          >\n            {calendarComponent}\n            {timeComponent}\n          </StyledPopover>\n        ) : (\n          <Modal\n            title={placeholder}\n            header={null}\n            footer={null}\n            visible={opened}\n            onClose={closeHandler}\n            size={size}\n          >\n            {calendarComponent}\n            {timeComponent}\n          </Modal>\n        )}\n      </>\n    );\n  }\n);\n\nDatePicker.displayName = 'DatePicker';\n\nexport default DatePicker;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["styled","defaultLocale","getAccessibilityDateLabel","useFormattedValue","Down","Up","useIsMinWidth","ThemeOverrider","useForwardedRef","useForwardedState","useKeyPress","React","forwardRef","useCallback","useEffect","useMemo","useRef","useState","Button","Modal","Popover","SelectContainer","ClearIcon","Content","IconContainer","LeftAddon","Placeholder","RightAddon","Title","TimePicker","DatePickerCalendar","StyledPopover","p","theme","datePickerPadding","TimeContainer","div","Dash","baseHeight","StyledTimePicker","timePickerStyle","style","width","createDate","date","time","d","Date","setFullYear","getFullYear","setMonth","getMonth","setDate","getDate","setHours","setMinutes","getHours","getMinutes","DatePicker","left","leftHasPadding","right","rightHasPadding","placeholder","disabled","autoFocus","format","firstDayOfWeek","locale","showTime","timeNotation","range","value","defaultValue","onChange","size","rest","ref","containerRef","mergedContainerRef","opened","setOpened","forwardedValue","setForwardedValue","current","focus","formattedValue","closeHandler","window","undefined","isMinXs","valueIsSpecified","rightHasPaddingValue","rightValue","e","stopPropagation","includes","key","preventDefault","clearLabel","firstTimePickerRef","secondTimePickerRef","rangeStartedRef","changeHandler","prev","nextValue","Array","isArray","getTime","sort","a","b","calendarComponent","v","tabOnInputComplete","target","selectionStart","from","nextTo","closeOnInputComplete","timeComponent","console","log","t","buttonPaddingHorizontal","selectToggleListItemHeight","sizes","small","displayName"],"sources":["../../../src/DatePicker/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport {\n  DatePickerLocale,\n  defaultLocale,\n  getAccessibilityDateLabel,\n  useFormattedValue,\n} from '@os-design/date-picker-utils';\nimport { Down, Up } from '@os-design/icons';\nimport { useIsMinWidth } from '@os-design/media';\nimport { WithSize } from '@os-design/styles';\nimport { ThemeOverrider } from '@os-design/theming';\nimport {\n  useForwardedRef,\n  useForwardedState,\n  useKeyPress,\n} from '@os-design/utils';\nimport React, {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport Button from '../Button';\nimport Modal from '../Modal';\nimport Popover from '../Popover';\nimport { SelectContainer } from '../Select';\nimport {\n  ClearIcon,\n  Content,\n  IconContainer,\n  LeftAddon,\n  Placeholder,\n  RightAddon,\n  Title,\n} from '../Select/SelectToggle';\nimport TimePicker from '../TimePicker';\nimport DatePickerCalendar from './DatePickerCalendar';\n\ntype JsxDivProps = Omit<\n  JSX.IntrinsicElements['div'],\n  'value' | 'defaultValue' | 'onChange' | 'ref'\n>;\ninterface BaseDatePickerProps<T> extends JsxDivProps, WithSize {\n  /**\n   * The component located on the left side.\n   * @default undefined\n   */\n  left?: React.ReactNode;\n  /**\n   * Adds padding to the left component.\n   * It can be useful when passing an icon or text in the left component.\n   * @default false\n   */\n  leftHasPadding?: boolean;\n  /**\n   * The component located on the right side.\n   * @default undefined\n   */\n  right?: React.ReactNode;\n  /**\n   * Adds padding to the right component.\n   * It can be useful when passing an icon or text in the right component.\n   * @default false\n   */\n  rightHasPadding?: boolean;\n  /**\n   * The placeholder of the date picker.\n   * @default undefined\n   */\n  placeholder?: string;\n  /**\n   * Whether the date picker is disabled.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * Whether the component have a focus.\n   * @default false\n   */\n  autoFocus?: boolean;\n  /**\n   * The format of the date.\n   * @default undefined\n   */\n  format?: (value: T) => string;\n  /**\n   * The first day of the week.\n   * @default sunday\n   */\n  firstDayOfWeek?: 'sunday' | 'monday';\n  /**\n   * The locale of the date picker.\n   * @default undefined\n   */\n  locale?: DatePickerLocale;\n  /**\n   * Whether the time is shown.\n   * @default false\n   */\n  showTime?: boolean;\n  /**\n   * The time notation.\n   * @default 12-hour\n   */\n  timeNotation?: '12-hour' | '24-hour';\n  /**\n   * Selected date.\n   * @default undefined\n   */\n  value?: T | null;\n  /**\n   * The default value.\n   * @default undefined\n   */\n  defaultValue?: T | null;\n  /**\n   * The change event handler.\n   * @default undefined\n   */\n  onChange?: (value: T | null) => void;\n}\ninterface DateNotRangePickerProps extends BaseDatePickerProps<Date> {\n  /**\n   * Whether the value is a range.\n   * @default false\n   */\n  range?: false;\n}\ninterface DateRangePickerProps extends BaseDatePickerProps<[Date, Date]> {\n  /**\n   * Whether the value is a range.\n   * @default false\n   */\n  range: true;\n}\nexport type DatePickerProps = DateNotRangePickerProps | DateRangePickerProps;\n\nconst StyledPopover = styled(Popover)`\n  padding: ${(p) => p.theme.datePickerPadding}em;\n`;\n\nconst TimeContainer = styled.div`\n  display: flex;\n  justify-content: center;\n  margin-top: 0.5em;\n`;\n\nconst Dash = styled.div`\n  margin: 0 0.5em;\n  line-height: ${(p) => p.theme.baseHeight}em;\n`;\n\nconst StyledTimePicker = styled(TimePicker)`\n  width: 2.5em;\n  text-align: center;\n`;\n\nconst timePickerStyle = { style: { width: 'auto' } };\n\nconst createDate = (date: Date, time?: Date | null) => {\n  const d = new Date(0);\n  d.setFullYear(date.getFullYear());\n  d.setMonth(date.getMonth());\n  d.setDate(date.getDate());\n  d.setHours(0);\n  d.setMinutes(0);\n  if (time) {\n    d.setHours(time.getHours());\n    d.setMinutes(time.getMinutes());\n  }\n  return d;\n};\n\n/**\n * The component to choose a date.\n */\nconst DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(\n  (\n    {\n      left,\n      leftHasPadding = false,\n      right,\n      rightHasPadding = false,\n      placeholder,\n      disabled = false,\n      autoFocus = false,\n      format,\n      firstDayOfWeek = 'sunday',\n      locale = defaultLocale,\n      showTime = false,\n      timeNotation = '12-hour',\n      range = false,\n      value,\n      defaultValue,\n      onChange,\n      size,\n      ...rest\n    },\n    ref\n  ) => {\n    const [containerRef, mergedContainerRef] = useForwardedRef(ref);\n    const [opened, setOpened] = useState(false);\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    const [forwardedValue, setForwardedValue] = useForwardedState<any>({\n      value,\n      defaultValue,\n      onChange,\n    });\n\n    useEffect(() => {\n      if (autoFocus) containerRef.current?.focus();\n    }, [autoFocus, containerRef]);\n\n    const formattedValue = useFormattedValue({\n      forwardedValue,\n      format,\n      showTime,\n      timeNotation,\n    });\n\n    const closeHandler = useCallback(() => {\n      setOpened(false);\n    }, []);\n\n    useKeyPress(\n      (typeof window !== 'undefined' ? window : undefined) as EventTarget,\n      'Escape',\n      closeHandler\n    );\n    const isMinXs = useIsMinWidth('xs');\n\n    const valueIsSpecified = useMemo(\n      () => formattedValue !== undefined && formattedValue !== null,\n      [formattedValue]\n    );\n\n    const rightHasPaddingValue = useMemo(() => {\n      if (valueIsSpecified) return false;\n      return right ? rightHasPadding : true;\n    }, [right, rightHasPadding, valueIsSpecified]);\n\n    const rightValue = useMemo(() => {\n      if (valueIsSpecified) {\n        return (\n          <div aria-hidden>\n            <Button\n              type='ghost'\n              wide='never'\n              size='small'\n              disabled={disabled}\n              onClick={(e) => {\n                setForwardedValue(null);\n                e.stopPropagation();\n              }}\n              onKeyDown={(e) => {\n                if (disabled) return;\n                if (['Enter', ' '].includes(e.key)) {\n                  setForwardedValue(null);\n                  if (!containerRef.current) return;\n                  containerRef.current.focus();\n                  e.preventDefault();\n                  e.stopPropagation();\n                }\n              }}\n              aria-label={locale.clearLabel}\n            >\n              <ClearIcon />\n            </Button>\n          </div>\n        );\n      }\n      return (\n        right || <IconContainer>{opened ? <Up /> : <Down />}</IconContainer>\n      );\n    }, [\n      containerRef,\n      disabled,\n      locale.clearLabel,\n      opened,\n      right,\n      setForwardedValue,\n      valueIsSpecified,\n    ]);\n\n    const firstTimePickerRef = useRef<HTMLInputElement>(null);\n    const secondTimePickerRef = useRef<HTMLInputElement>(null);\n    const rangeStartedRef = useRef(false);\n\n    useEffect(() => {\n      rangeStartedRef.current = false;\n    }, [opened]);\n\n    const changeHandler = useCallback(\n      (date: Date) => {\n        setForwardedValue((prev) => {\n          if (!range) return createDate(date, prev);\n\n          const d = createDate(date);\n          const nextValue =\n            prev && Array.isArray(prev) && rangeStartedRef.current\n              ? [new Date(prev[0].getTime()), createDate(date, prev[1])]\n              : [d, d];\n\n          rangeStartedRef.current = !rangeStartedRef.current;\n          return nextValue.sort(\n            (a: Date, b: Date) => a.getTime() - b.getTime()\n          );\n        });\n      },\n      [range, setForwardedValue]\n    );\n\n    const calendarComponent = useMemo(\n      () => (\n        <DatePickerCalendar\n          firstDayOfWeek={firstDayOfWeek}\n          locale={locale}\n          value={forwardedValue}\n          onSelect={(v) => {\n            changeHandler(v);\n            firstTimePickerRef.current?.focus();\n            if (!showTime && (!range || !rangeStartedRef.current)) {\n              closeHandler();\n            }\n          }}\n        />\n      ),\n      [\n        changeHandler,\n        closeHandler,\n        firstDayOfWeek,\n        forwardedValue,\n        locale,\n        range,\n        showTime,\n      ]\n    );\n\n    const tabOnInputComplete = useCallback(\n      (e) => {\n        if (e.target.selectionStart < 5) return;\n        secondTimePickerRef.current?.focus();\n        setForwardedValue(([from]) => {\n          const nextTo = new Date(from.getTime());\n          nextTo.setHours(nextTo.getHours() + 1);\n          return [from, nextTo];\n        });\n      },\n      [setForwardedValue]\n    );\n\n    const closeOnInputComplete = useCallback(\n      (e) => {\n        if (e.target.selectionStart < 5) return;\n        closeHandler();\n      },\n      [closeHandler]\n    );\n\n    const timeComponent = useMemo(\n      () =>\n        showTime && forwardedValue ? (\n          <TimeContainer>\n            {Array.isArray(forwardedValue) ? (\n              <>\n                <StyledTimePicker\n                  ref={firstTimePickerRef}\n                  autoFocus\n                  disabled={disabled}\n                  notation={timeNotation}\n                  containerProps={timePickerStyle}\n                  value={forwardedValue[0]}\n                  onChange={(v) => setForwardedValue([v, forwardedValue[1]])}\n                  onKeyDown={(e) => {\n                    if (disabled) return;\n                    if (e.key === 'Enter') {\n                      setOpened(!opened);\n                    }\n                  }}\n                  onKeyUp={tabOnInputComplete}\n                />\n                <Dash>–</Dash>\n                <StyledTimePicker\n                  ref={secondTimePickerRef}\n                  disabled={disabled}\n                  notation={timeNotation}\n                  containerProps={timePickerStyle}\n                  value={forwardedValue[1]}\n                  onChange={(v) => setForwardedValue([forwardedValue[0], v])}\n                  onKeyDown={(e) => {\n                    if (disabled) return;\n                    if (e.key === 'Enter') {\n                      setOpened(!opened);\n                    }\n                  }}\n                  onKeyUp={closeOnInputComplete}\n                />\n              </>\n            ) : (\n              <StyledTimePicker\n                ref={firstTimePickerRef}\n                autoFocus\n                disabled={disabled}\n                notation={timeNotation}\n                containerProps={timePickerStyle}\n                value={forwardedValue}\n                onChange={setForwardedValue}\n                onKeyDown={(e) => {\n                  if (disabled) return;\n                  if (e.key === 'Enter') {\n                    setOpened(!opened);\n                  }\n                }}\n                onKeyUp={closeOnInputComplete}\n              />\n            )}\n          </TimeContainer>\n        ) : null,\n      [\n        closeOnInputComplete,\n        disabled,\n        forwardedValue,\n        opened,\n        setForwardedValue,\n        showTime,\n        tabOnInputComplete,\n        timeNotation,\n      ]\n    );\n\n    return (\n      <>\n        <SelectContainer\n          onBlur={() => console.log('onBlur')}\n          opened={opened}\n          disabled={disabled}\n          size={size}\n          tabIndex={!disabled ? 0 : -1}\n          onClick={() => {\n            if (disabled) return;\n            setOpened(!opened);\n          }}\n          onKeyDown={(e) => {\n            if (disabled) return;\n            if (['Enter', ' '].includes(e.key)) {\n              setOpened(!opened);\n              e.preventDefault();\n            }\n          }}\n          onMouseDown={(e) => e.preventDefault()}\n          role='combobox'\n          aria-label={\n            forwardedValue\n              ? getAccessibilityDateLabel(forwardedValue, locale)\n              : undefined\n          }\n          aria-disabled={disabled}\n          {...rest}\n          ref={mergedContainerRef}\n        >\n          {left && (\n            <ThemeOverrider\n              overrides={(t) => ({\n                buttonPaddingHorizontal: 0.8,\n                baseHeight: t.selectToggleListItemHeight / t.sizes.small,\n              })}\n            >\n              <LeftAddon hasPadding={leftHasPadding}>{left}</LeftAddon>\n            </ThemeOverrider>\n          )}\n\n          <Content hasLeft={!!left} hasRight={!!right}>\n            {valueIsSpecified ? (\n              <Title disabled={disabled} aria-hidden>\n                {formattedValue}\n              </Title>\n            ) : (\n              <Placeholder>{placeholder}</Placeholder>\n            )}\n          </Content>\n\n          {rightValue && (\n            <ThemeOverrider\n              overrides={(t) => ({\n                buttonPaddingHorizontal: 0.8,\n                baseHeight: t.selectToggleListItemHeight / t.sizes.small,\n              })}\n            >\n              <RightAddon hasPadding={rightHasPaddingValue}>\n                {rightValue}\n              </RightAddon>\n            </ThemeOverrider>\n          )}\n        </SelectContainer>\n\n        {isMinXs ? (\n          <StyledPopover\n            trigger={containerRef}\n            placement='bottom-start'\n            visible={opened}\n            onClose={closeHandler}\n            size={size}\n          >\n            {calendarComponent}\n            {timeComponent}\n          </StyledPopover>\n        ) : (\n          <Modal\n            title={placeholder}\n            header={null}\n            footer={null}\n            visible={opened}\n            onClose={closeHandler}\n            size={size}\n          >\n            {calendarComponent}\n            {timeComponent}\n          </Modal>\n        )}\n      </>\n    );\n  }\n);\n\nDatePicker.displayName = 'DatePicker';\n\nexport default DatePicker;\n"],"mappings":"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"}

package/dist/esm/TimePicker/index.js

@@ -1,12 +1,9 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-import { isDigitKey, replaceChar, parseTime } from '@os-design/time-picker-utils';
+import { useTime } from '@os-design/time-picker-utils';
 import { useForwardedRef, useForwardedState } from '@os-design/utils';
-import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { forwardRef, useCallback, useEffect, useMemo, useState } from 'react';
 import Button from '../Button';
 import Input from '../Input';
-const pad = n => n.toString().padStart(2, '0');
-const HOURS_12 = 12 * 60 * 60 * 1000;
-
 /**
  * The component to choose a time.
  */
@@ -31,61 +28,51 @@ const TimePicker = /*#__PURE__*/forwardRef(({
     start: 0,
     end: 0
   });
-  const isPm = useMemo(() => !!forwardedValue && forwardedValue.getHours() >= 12, [forwardedValue]);
-  const setTime = useCallback(time => {
-    const [h, m] = parseTime(time, notation, isPm);
-    const nextValue = new Date(forwardedValue ? forwardedValue.getTime() : 0);
-    nextValue.setHours(h);
-    nextValue.setMinutes(m);
-    setForwardedValue(nextValue);
-  }, [forwardedValue, isPm, notation, setForwardedValue]);
-  const setTimeRef = useRef(setTime);
-  useEffect(() => {
-    setTimeRef.current = setTime;
-  }, [setTime]);
-  const time = useMemo(() => {
-    if (!forwardedValue) return notation === '12-hour' ? '12:00' : '00:00';
-    const hour = notation === '12-hour' ? forwardedValue.getHours() % 12 || 12 : forwardedValue.getHours();
-    const minute = forwardedValue.getMinutes();
-    return `${pad(hour)}:${pad(minute)}`;
-  }, [forwardedValue, notation]);
-  const changePeriod = useCallback(nextIsPm => {
-    if (!forwardedValue) return;
-    const nextValue = new Date(forwardedValue.getTime() + HOURS_12 * (nextIsPm ? 1 : -1));
-    setForwardedValue(nextValue);
-  }, [forwardedValue, setForwardedValue]);
+  const {
+    time,
+    isPm,
+    changePeriod,
+    keyHandler
+  } = useTime({
+    notation,
+    selection,
+    setSelection,
+    forwardedValue,
+    setForwardedValue
+  });
+  const rightComponent = useMemo(() => {
+    if (notation !== '12-hour' && !right) return null;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, notation === '12-hour' && /*#__PURE__*/React.createElement(Button, {
+      type: "ghost",
+      wide: "never",
+      size: "small",
+      disabled: disabled,
+      onClick: changePeriod
+    }, isPm ? 'PM' : 'AM'), right);
+  }, [changePeriod, disabled, isPm, notation, right]);
+  const keyDownHandler = useCallback(e => {
+    keyHandler(e.key, e.metaKey);
+    onKeyDown(e);
+    e.preventDefault();
+  }, [keyHandler, onKeyDown]);
 
   // Update the selection
   useEffect(() => {
     if (!inputRef.current) return;
     inputRef.current.setSelectionRange(selection.start, selection.end);
   }, [inputRef, selection]);
-  const keyDownHandler = useCallback(e => {
-    let nextCaret = selection.start;
-    if (e.key === 'ArrowUp' || e.key === 'ArrowLeft' && e.metaKey) {
-      nextCaret = 0;
-    } else if (e.key === 'ArrowDown' || e.key === 'ArrowRight' && e.metaKey) {
-      nextCaret = 5;
-    } else if (e.key === 'ArrowLeft') {
-      nextCaret = selection.start > 0 ? selection.start - 1 : 0;
-    } else if (e.key === 'ArrowRight') {
-      nextCaret = selection.start < 5 ? selection.start + 1 : 5;
-    } else if (e.key === 'Backspace') {
-      setTimeRef.current('00:00');
-      nextCaret = 0;
-    } else if (isDigitKey(e.key)) {
-      let pos = selection.start === 2 ? 3 : selection.start;
-      if (pos === 5) pos = 0;
-      setTimeRef.current(replaceChar(time, pos, e.key));
-      nextCaret = pos < 5 ? pos + 1 : 5;
-    }
+  const selectHandler = useCallback(e => {
+    // Update the selection state.
+    const {
+      selectionStart,
+      selectionEnd
+    } = e.currentTarget;
     setSelection({
-      start: nextCaret,
-      end: nextCaret
+      start: selectionStart || 0,
+      end: selectionEnd || 0
     });
-    onKeyDown(e);
-    e.preventDefault();
-  }, [onKeyDown, selection.start, time]);
+    onSelect(e);
+  }, [onSelect]);
   return /*#__PURE__*/React.createElement(Input, _extends({
     type: "text",
     inputMode: "decimal",
@@ -94,25 +81,8 @@ const TimePicker = /*#__PURE__*/forwardRef(({
     maxLength: 5,
     disabled: disabled,
     value: time,
-    right: (notation === '12-hour' || right) && /*#__PURE__*/React.createElement(React.Fragment, null, notation === '12-hour' && /*#__PURE__*/React.createElement(Button, {
-      type: "ghost",
-      wide: "never",
-      size: "small",
-      disabled: disabled,
-      onClick: () => changePeriod(!isPm)
-    }, isPm ? 'PM' : 'AM'), right),
-    onSelect: e => {
-      // Update the selection state.
-      const {
-        selectionStart,
-        selectionEnd
-      } = e.currentTarget;
-      setSelection({
-        start: selectionStart || 0,
-        end: selectionEnd || 0
-      });
-      onSelect(e);
-    },
+    right: rightComponent,
+    onSelect: selectHandler,
     onKeyDown: keyDownHandler
   }, rest, {
     ref: mergedInputRef

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

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

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

@@ -3,9 +3,8 @@ import React from 'react';
 interface DatePickerCalendarProps {
     firstDayOfWeek: 'sunday' | 'monday';
     locale: DatePickerLocale;
-    range: boolean;
     value?: Date | [Date, Date] | null;
-    onChange?: (value: Date | [Date, Date]) => void;
+    onSelect?: (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":"AACA,OAAO,EACL,gBAAgB,EAGjB,MAAM,8BAA8B,CAAC;AAQtC,OAAO,KAAyD,MAAM,OAAO,CAAC;AAG9E,UAAU,uBAAuB;IAC/B,cAAc,EAAE,QAAQ,GAAG,QAAQ,CAAC;IACpC,MAAM,EAAE,gBAAgB,CAAC;IACzB,KAAK,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,IAAI,GAAG,CAAC,IAAI,EAAE,IAAI,CAAC,GAAG,IAAI,CAAC;IACnC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,GAAG,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,IAAI,CAAC;CACjD;AA+FD,QAAA,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CA+IzD,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"DatePickerCalendar.d.ts","sourceRoot":"","sources":["../../../src/DatePicker/DatePickerCalendar.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,gBAAgB,EAGjB,MAAM,8BAA8B,CAAC;AAQtC,OAAO,KAAyD,MAAM,OAAO,CAAC;AAG9E,UAAU,uBAAuB;IAC/B,cAAc,EAAE,QAAQ,GAAG,QAAQ,CAAC;IACpC,MAAM,EAAE,gBAAgB,CAAC;IACzB,KAAK,CAAC,EAAE,IAAI,GAAG,CAAC,IAAI,EAAE,IAAI,CAAC,GAAG,IAAI,CAAC;IACnC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,KAAK,IAAI,CAAC;CAClC;AAiFD,QAAA,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAkHzD,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

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

@@ -9,6 +9,7 @@ interface BaseDatePickerProps<T> extends JsxDivProps, WithSize {
     rightHasPadding?: boolean;
     placeholder?: string;
     disabled?: boolean;
+    autoFocus?: boolean;
     format?: (value: T) => string;
     firstDayOfWeek?: 'sunday' | 'monday';
     locale?: DatePickerLocale;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/DatePicker/index.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,gBAAgB,EAGjB,MAAM,8BAA8B,CAAC;AAGtC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAO7C,OAAO,KAMN,MAAM,OAAO,CAAC;AAiBf,aAAK,WAAW,GAAG,IAAI,CACrB,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAC5B,OAAO,GAAG,cAAc,GAAG,UAAU,GAAG,KAAK,CAC9C,CAAC;AACF,UAAU,mBAAmB,CAAC,CAAC,CAAE,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,KAAK,EAAE,CAAC,KAAK,MAAM,CAAC;IAK9B,cAAc,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAKrC,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAK1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IAKnB,YAAY,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAKrC,KAAK,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC;IAKjB,YAAY,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC;IAKxB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,GAAG,IAAI,KAAK,IAAI,CAAC;CACtC;AACD,UAAU,uBAAwB,SAAQ,mBAAmB,CAAC,IAAI,CAAC;IAKjE,KAAK,CAAC,EAAE,KAAK,CAAC;CACf;AACD,UAAU,oBAAqB,SAAQ,mBAAmB,CAAC,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;IAKtE,KAAK,EAAE,IAAI,CAAC;CACb;AACD,oBAAY,eAAe,GAAG,uBAAuB,GAAG,oBAAoB,CAAC;AAyB7E,QAAA,MAAM,UAAU,wFAqUf,CAAC;AAIF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/DatePicker/index.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,gBAAgB,EAIjB,MAAM,8BAA8B,CAAC;AAGtC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAO7C,OAAO,KAON,MAAM,OAAO,CAAC;AAiBf,aAAK,WAAW,GAAG,IAAI,CACrB,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAC5B,OAAO,GAAG,cAAc,GAAG,UAAU,GAAG,KAAK,CAC9C,CAAC;AACF,UAAU,mBAAmB,CAAC,CAAC,CAAE,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,SAAS,CAAC,EAAE,OAAO,CAAC;IAKpB,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,MAAM,CAAC;IAK9B,cAAc,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAKrC,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAK1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IAKnB,YAAY,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAKrC,KAAK,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC;IAKjB,YAAY,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC;IAKxB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,GAAG,IAAI,KAAK,IAAI,CAAC;CACtC;AACD,UAAU,uBAAwB,SAAQ,mBAAmB,CAAC,IAAI,CAAC;IAKjE,KAAK,CAAC,EAAE,KAAK,CAAC;CACf;AACD,UAAU,oBAAqB,SAAQ,mBAAmB,CAAC,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;IAKtE,KAAK,EAAE,IAAI,CAAC;CACb;AACD,oBAAY,eAAe,GAAG,uBAAuB,GAAG,oBAAoB,CAAC;AAyC7E,QAAA,MAAM,UAAU,wFA0Vf,CAAC;AAIF,eAAe,UAAU,CAAC"}

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@os-design/core",
-  "version": "1.0.163",
+  "version": "1.0.165",
   "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.13",
+    "@os-design/date-picker-utils": "^1.0.14",
     "@os-design/icons": "^1.0.42",
     "@os-design/input-number-utils": "^1.0.17",
     "@os-design/media": "^1.0.16",
@@ -37,7 +37,7 @@
     "@os-design/portal": "^1.0.7",
     "@os-design/styles": "^1.0.40",
     "@os-design/theming": "^1.0.38",
-    "@os-design/time-picker-utils": "^1.0.4",
+    "@os-design/time-picker-utils": "^1.0.5",
     "@os-design/utils": "^1.0.56",
     "@os-team/password-score": "^1.0.3",
     "facepaint": "^1.2.1",
@@ -58,5 +58,5 @@
     "react": ">=18",
     "react-dom": ">=18"
   },
-  "gitHead": "47a4e8f4442745e2b279b13b84525270cf4a21b0"
+  "gitHead": "1aeb297d51a0d5c458d90c666fd487c804d13b5c"
 }