@mantine/dates/esm/components/DatePicker/DatePicker.mjs.map

Calendars, date and time pickers based on Mantine components

{"version":3,"file":"DatePicker.mjs","names":[],"sources":["../../../src/components/DatePicker/DatePicker.tsx"],"sourcesContent":["import dayjs from 'dayjs';\nimport { useRef } from 'react';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getFontSize,\n  MantineComponentStaticProperties,\n  StylesApiProps,\n  UnstyledButton,\n  useProps,\n  useResolvedStylesApi,\n  useStyles,\n} from '@mantine/core';\nimport { useDatesState } from '../../hooks';\nimport {\n  CalendarLevel,\n  DatePickerType,\n  DateStringValue,\n  DateValue,\n  PickerBaseProps,\n} from '../../types';\nimport {\n  Calendar,\n  CalendarBaseProps,\n  CalendarProps,\n  CalendarSettings,\n  CalendarStylesNames,\n  pickCalendarProps,\n} from '../Calendar';\nimport { DecadeLevelBaseSettings } from '../DecadeLevel';\nimport { isSameMonth } from '../Month';\nimport { MonthLevelBaseSettings } from '../MonthLevel';\nimport { YearLevelBaseSettings } from '../YearLevel';\nimport classes from './DatePicker.module.css';\n\nexport interface DatePickerPreset<Type extends DatePickerType> {\n  value: Type extends 'range'\n    ? [DateStringValue | null, DateStringValue | null]\n    : Type extends 'multiple'\n      ? DateStringValue[]\n      : DateStringValue | null;\n  label: React.ReactNode;\n}\n\nexport type DatePickerCssVariables = {\n  datePickerRoot: '--preset-font-size';\n};\n\nexport type DatePickerStylesNames =\n  | CalendarStylesNames\n  | 'presetsList'\n  | 'presetButton'\n  | 'datePickerRoot';\n\nexport interface DatePickerBaseProps<Type extends DatePickerType = 'default'>\n  extends\n    PickerBaseProps<Type>,\n    DecadeLevelBaseSettings,\n    YearLevelBaseSettings,\n    MonthLevelBaseSettings,\n    CalendarBaseProps,\n    Omit<CalendarSettings, 'hasNextLevel'>,\n    Pick<CalendarProps, 'enableKeyboardNavigation'> {\n  maxLevel?: CalendarLevel;\n\n  /** Initial displayed level (uncontrolled) */\n  defaultLevel?: CalendarLevel;\n\n  /** Current displayed level (controlled) */\n  level?: CalendarLevel;\n\n  /** Called when level changes */\n  onLevelChange?: (level: CalendarLevel) => void;\n\n  /** Predefined values to pick from */\n  presets?: DatePickerPreset<Type>[];\n\n  /** If defined, called with preset value, suppresses `onChange` call */\n  __onPresetSelect?: (\n    preset: DateStringValue | null | [DateStringValue | null, DateStringValue | null]\n  ) => void;\n}\n\nexport interface DatePickerProps<Type extends DatePickerType = 'default'>\n  extends\n    BoxProps,\n    DatePickerBaseProps<Type>,\n    StylesApiProps<DatePickerFactory>,\n    ElementProps<'div', 'onChange' | 'value' | 'defaultValue'> {}\n\nexport type DatePickerFactory = Factory<{\n  props: DatePickerProps;\n  ref: HTMLDivElement;\n  stylesNames: DatePickerStylesNames;\n  vars: DatePickerCssVariables;\n}>;\n\nconst varsResolver = createVarsResolver<DatePickerFactory>((_, { size }) => ({\n  datePickerRoot: {\n    '--preset-font-size': getFontSize(size),\n  },\n}));\n\nconst defaultProps = {\n  type: 'default',\n  defaultLevel: 'month',\n  numberOfColumns: 1,\n  size: 'sm',\n} satisfies Partial<DatePickerProps>;\n\ntype DatePickerComponent = (<Type extends DatePickerType = 'default'>(\n  props: DatePickerProps<Type> & { ref?: React.Ref<HTMLDivElement> }\n) => React.JSX.Element) & {\n  displayName?: string;\n} & MantineComponentStaticProperties<DatePickerFactory>;\n\nexport const DatePicker: DatePickerComponent = factory<DatePickerFactory>((_props) => {\n  const props = useProps('DatePicker', defaultProps, _props);\n  const {\n    allowDeselect,\n    allowSingleDateInRange,\n    value,\n    defaultValue,\n    onChange,\n    onMouseLeave,\n    classNames,\n    styles,\n    __staticSelector,\n    __onDayClick,\n    __onDayMouseEnter,\n    __onPresetSelect,\n    __stopPropagation,\n    presets,\n    className,\n    style,\n    unstyled,\n    size,\n    vars,\n    attributes,\n    fullWidth,\n    ...rest\n  } = props;\n\n  const { calendarProps, others } = pickCalendarProps(rest);\n  const setDateRef = useRef<((date: DateValue) => void) | null>(null);\n  const setLevelRef = useRef<((level: CalendarLevel) => void) | null>(null);\n\n  const getStyles = useStyles<DatePickerFactory>({\n    name: __staticSelector || 'DatePicker',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    rootSelector: presets ? 'datePickerRoot' : undefined,\n    varsResolver,\n    vars,\n  });\n\n  const { onDateChange, onRootMouseLeave, onHoveredDateChange, getControlProps, _value, setValue } =\n    useDatesState({\n      type: others.type as any,\n      level: 'day',\n      allowDeselect,\n      allowSingleDateInRange,\n      value,\n      defaultValue,\n      onChange: onChange as any,\n      onMouseLeave,\n    });\n\n  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<DatePickerFactory>({\n    classNames,\n    styles,\n    props,\n  });\n\n  const calendar = (\n    <Calendar\n      classNames={resolvedClassNames}\n      styles={resolvedStyles}\n      __staticSelector={__staticSelector || 'DatePicker'}\n      onMouseLeave={onRootMouseLeave}\n      size={size}\n      fullWidth={fullWidth}\n      {...calendarProps}\n      {...(!presets ? others : {})}\n      __stopPropagation={__stopPropagation}\n      __setDateRef={setDateRef}\n      __setLevelRef={setLevelRef}\n      minLevel={calendarProps.minLevel || 'month'}\n      __onDayMouseEnter={(_event, date) => {\n        onHoveredDateChange(date);\n        __onDayMouseEnter?.(_event, date);\n      }}\n      __onDayClick={(_event, date) => {\n        onDateChange(date);\n        __onDayClick?.(_event, date);\n      }}\n      getDayProps={(date) => ({\n        ...getControlProps(date),\n        ...calendarProps.getDayProps?.(date),\n      })}\n      getMonthControlProps={(date) => ({\n        selected: typeof _value === 'string' ? isSameMonth(date, _value) : false,\n        ...calendarProps.getMonthControlProps?.(date),\n      })}\n      getYearControlProps={(date) => ({\n        selected: typeof _value === 'string' ? dayjs(date).isSame(_value, 'year') : false,\n        ...calendarProps.getYearControlProps?.(date),\n      })}\n      hideOutsideDates={calendarProps.hideOutsideDates ?? calendarProps.numberOfColumns !== 1}\n      attributes={attributes}\n      {...(!presets ? { className, style } : {})}\n    />\n  );\n\n  if (!presets) {\n    return calendar;\n  }\n\n  const handlePresetSelect = (\n    val: DateStringValue | null | [DateStringValue | null, DateStringValue | null]\n  ) => {\n    const _val = Array.isArray(val) ? val[0] : val;\n    if (_val !== undefined) {\n      setDateRef.current?.(_val);\n      setLevelRef.current?.('month');\n      __onPresetSelect ? __onPresetSelect(val) : setValue(val);\n    }\n  };\n\n  const presetButtons = presets.map((preset, index) => (\n    <UnstyledButton\n      key={index}\n      {...getStyles('presetButton')}\n      onClick={() => handlePresetSelect(preset.value)}\n      onMouseDown={(event) => event.preventDefault()}\n      data-mantine-stop-propagation={__stopPropagation || undefined}\n    >\n      {preset.label}\n    </UnstyledButton>\n  ));\n\n  return (\n    <Box {...getStyles('datePickerRoot')} size={size} {...others}>\n      <div {...getStyles('presetsList')}>{presetButtons}</div>\n      {calendar}\n    </Box>\n  );\n}) as any;\n\nDatePicker.classes = Calendar.classes;\nDatePicker.varsResolver = varsResolver;\nDatePicker.displayName = '@mantine/dates/DatePicker';\n\nexport namespace DatePicker {\n  export type Props<Type extends DatePickerType> = DatePickerProps<Type>;\n  export type BaseProps = DatePickerBaseProps;\n  export type StylesNames = DatePickerStylesNames;\n  export type Factory = DatePickerFactory;\n  export type Preset<Type extends DatePickerType> = DatePickerPreset<Type>;\n  export type CssVariables = DatePickerCssVariables;\n}\n"],"mappings":"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"}