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

Calendars, date and time pickers based on Mantine components

{"version":3,"file":"MonthPicker.mjs","names":["classes"],"sources":["../../../src/components/MonthPicker/MonthPicker.tsx"],"sourcesContent":["import { 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 { Calendar, CalendarBaseProps, pickCalendarProps } from '../Calendar';\nimport { DecadeLevelBaseSettings } from '../DecadeLevel';\nimport { DecadeLevelGroupStylesNames } from '../DecadeLevelGroup';\nimport { YearLevelBaseSettings } from '../YearLevel';\nimport { YearLevelGroupStylesNames } from '../YearLevelGroup';\nimport classes from './MonthPicker.module.css';\n\nexport interface MonthPickerPreset<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 MonthPickerCssVariables = {\n  monthPickerRoot: '--preset-font-size';\n};\n\nexport type MonthPickerStylesNames =\n  | DecadeLevelGroupStylesNames\n  | YearLevelGroupStylesNames\n  | 'presetsList'\n  | 'presetButton'\n  | 'monthPickerRoot';\n\ntype MonthPickerLevel = Exclude<CalendarLevel, 'month'>;\n\nexport interface MonthPickerBaseProps<Type extends DatePickerType = 'default'>\n  extends\n    PickerBaseProps<Type>,\n    DecadeLevelBaseSettings,\n    YearLevelBaseSettings,\n    Omit<CalendarBaseProps, 'onNextMonth' | 'onPreviousMonth' | 'hasNextLevel'> {\n  /** Max level that user can go up to @default 'decade' */\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: MonthPickerLevel) => void;\n\n  /** Predefined values to pick from */\n  presets?: MonthPickerPreset<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 MonthPickerProps<Type extends DatePickerType = 'default'>\n  extends\n    BoxProps,\n    MonthPickerBaseProps<Type>,\n    StylesApiProps<MonthPickerFactory>,\n    ElementProps<'div', 'onChange' | 'value' | 'defaultValue'> {\n  /** Called when month is selected */\n  onMonthSelect?: (date: DateStringValue) => void;\n}\n\nexport type MonthPickerFactory = Factory<{\n  props: MonthPickerProps;\n  ref: HTMLDivElement;\n  stylesNames: MonthPickerStylesNames;\n  vars: MonthPickerCssVariables;\n}>;\n\nconst varsResolver = createVarsResolver<MonthPickerFactory>((_, { size }) => ({\n  monthPickerRoot: {\n    '--preset-font-size': getFontSize(size),\n  },\n}));\n\nconst defaultProps = {\n  type: 'default',\n} satisfies Partial<MonthPickerProps>;\n\ntype MonthPickerComponent = (<Type extends DatePickerType = 'default'>(\n  props: MonthPickerProps<Type> & { ref?: React.Ref<HTMLDivElement> }\n) => React.JSX.Element) & {\n  displayName?: string;\n} & MantineComponentStaticProperties<MonthPickerFactory>;\n\nexport const MonthPicker: MonthPickerComponent = factory<MonthPickerFactory>((_props) => {\n  const props = useProps('MonthPicker', defaultProps, _props);\n  const {\n    classNames,\n    styles,\n    vars,\n    type,\n    defaultValue,\n    value,\n    onChange,\n    __staticSelector,\n    getMonthControlProps,\n    allowSingleDateInRange,\n    allowDeselect,\n    onMouseLeave,\n    onMonthSelect,\n    __updateDateOnMonthSelect,\n    __onPresetSelect,\n    __stopPropagation,\n    presets,\n    className,\n    style,\n    unstyled,\n    size,\n    attributes,\n    onLevelChange,\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<MonthPickerFactory>({\n    name: __staticSelector || 'MonthPicker',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    rootSelector: presets ? 'monthPickerRoot' : undefined,\n    varsResolver,\n    vars,\n  });\n\n  const { onDateChange, onRootMouseLeave, onHoveredDateChange, getControlProps, setValue } =\n    useDatesState({\n      type: type as any,\n      level: 'month',\n      allowDeselect,\n      allowSingleDateInRange,\n      value,\n      defaultValue,\n      onChange: onChange as any,\n      onMouseLeave,\n    });\n\n  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<MonthPickerFactory>({\n    classNames,\n    styles,\n    props,\n  });\n\n  const calendar = (\n    <Calendar\n      classNames={resolvedClassNames}\n      styles={resolvedStyles}\n      size={size}\n      {...calendarProps}\n      {...(!presets ? others : {})}\n      minLevel=\"year\"\n      __updateDateOnMonthSelect={__updateDateOnMonthSelect ?? false}\n      __staticSelector={__staticSelector || 'MonthPicker'}\n      onMouseLeave={onRootMouseLeave}\n      onMonthMouseEnter={(_event, date) => onHoveredDateChange(date)}\n      onMonthSelect={(date) => {\n        onDateChange(date);\n        onMonthSelect?.(date);\n      }}\n      getMonthControlProps={(date) => ({\n        ...getControlProps(date),\n        ...getMonthControlProps?.(date),\n      })}\n      onLevelChange={onLevelChange as any}\n      __setDateRef={setDateRef}\n      __setLevelRef={setLevelRef}\n      __stopPropagation={__stopPropagation}\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?.('year');\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('monthPickerRoot')} size={size} {...others}>\n      <div {...getStyles('presetsList')}>{presetButtons}</div>\n      {calendar}\n    </Box>\n  );\n}) as any;\n\nMonthPicker.classes = { ...Calendar.classes, ...classes };\nMonthPicker.varsResolver = varsResolver;\nMonthPicker.displayName = '@mantine/dates/MonthPicker';\n\nexport namespace MonthPicker {\n  export type Props<Type extends DatePickerType = 'default'> = MonthPickerProps<Type>;\n  export type StylesNames = MonthPickerStylesNames;\n  export type Factory = MonthPickerFactory;\n}\n"],"mappings":";;;;;;;;;AAiGA,MAAM,eAAe,oBAAwC,GAAG,EAAE,YAAY,EAC5E,iBAAiB,EACf,sBAAsB,YAAY,IAAI,EACxC,EACF,EAAE;AAEF,MAAM,eAAe,EACnB,MAAM,UACR;AAQA,MAAa,cAAoC,SAA6B,WAAW;CACvF,MAAM,QAAQ,SAAS,eAAe,cAAc,MAAM;CAC1D,MAAM,EACJ,YACA,QACA,MACA,MACA,cACA,OACA,UACA,kBACA,sBACA,wBACA,eACA,cACA,eACA,2BACA,kBACA,mBACA,SACA,WACA,OACA,UACA,MACA,YACA,eACA,GAAG,SACD;CAEJ,MAAM,EAAE,eAAe,WAAW,kBAAkB,IAAI;CACxD,MAAM,aAAa,OAA2C,IAAI;CAClE,MAAM,cAAc,OAAgD,IAAI;CAExE,MAAM,YAAY,UAA8B;EAC9C,MAAM,oBAAoB;EAC1B,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,cAAc,UAAU,oBAAoB,KAAA;EAC5C;EACA;CACF,CAAC;CAED,MAAM,EAAE,cAAc,kBAAkB,qBAAqB,iBAAiB,aAC5E,cAAc;EACN;EACN,OAAO;EACP;EACA;EACA;EACA;EACU;EACV;CACF,CAAC;CAEH,MAAM,EAAE,oBAAoB,mBAAmB,qBAAyC;EACtF;EACA;EACA;CACF,CAAC;CAED,MAAM,WACJ,oBAAC,UAAD;EACE,YAAY;EACZ,QAAQ;EACF;EACN,GAAI;EACJ,GAAK,CAAC,UAAU,SAAS,CAAC;EAC1B,UAAS;EACT,2BAA2B,6BAA6B;EACxD,kBAAkB,oBAAoB;EACtC,cAAc;EACd,oBAAoB,QAAQ,SAAS,oBAAoB,IAAI;EAC7D,gBAAgB,SAAS;GACvB,aAAa,IAAI;GACjB,gBAAgB,IAAI;EACtB;EACA,uBAAuB,UAAU;GAC/B,GAAG,gBAAgB,IAAI;GACvB,GAAG,uBAAuB,IAAI;EAChC;EACe;EACf,cAAc;EACd,eAAe;EACI;EACP;EACZ,GAAK,CAAC,UAAU;GAAE;GAAW;EAAM,IAAI,CAAC;CACzC,CAAA;CAGH,IAAI,CAAC,SACH,OAAO;CAGT,MAAM,sBACJ,QACG;EACH,MAAM,OAAO,MAAM,QAAQ,GAAG,IAAI,IAAI,KAAK;EAC3C,IAAI,SAAS,KAAA,GAAW;GACtB,WAAW,UAAU,IAAI;GACzB,YAAY,UAAU,MAAM;GAC5B,mBAAmB,iBAAiB,GAAG,IAAI,SAAS,GAAG;EACzD;CACF;CAEA,MAAM,gBAAgB,QAAQ,KAAK,QAAQ,UACzC,oBAAC,gBAAD;EAEE,GAAI,UAAU,cAAc;EAC5B,eAAe,mBAAmB,OAAO,KAAK;EAC9C,cAAc,UAAU,MAAM,eAAe;EAC7C,iCAA+B,qBAAqB,KAAA;YAEnD,OAAO;CACM,GAPT,KAOS,CACjB;CAED,OACE,qBAAC,KAAD;EAAK,GAAI,UAAU,iBAAiB;EAAS;EAAM,GAAI;YAAvD,CACE,oBAAC,OAAD;GAAK,GAAI,UAAU,aAAa;aAAI;EAAmB,CAAA,GACtD,QACE;;AAET,CAAC;AAED,YAAY,UAAU;CAAE,GAAG,SAAS;CAAS,GAAGA;AAAQ;AACxD,YAAY,eAAe;AAC3B,YAAY,cAAc"}