UNPKG

@yamada-ui/react

Version:

React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion

1 lines • 19.1 kB
{"version":3,"file":"calendar.cjs","names":["createSlotComponent","calendarStyle","useCalendar","CalendarDescendantsContext","CalendarContext","styled","useCalendarContext","ChevronLeftIcon","ChevronRightIcon","resetFieldProps","useCalendarDay"],"sources":["../../../../src/components/calendar/calendar.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement } from \"react\"\nimport type { GenericsComponent, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { ReactNodeOrFunction } from \"../../utils\"\nimport type { CalendarStyle } from \"./calendar.style\"\nimport type {\n UseCalendarDayProps,\n UseCalendarProps,\n UseCalendarReturn,\n} from \"./use-calendar\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { runIfFn } from \"../../utils\"\nimport { resetFieldProps } from \"../field\"\nimport { ChevronLeftIcon, ChevronRightIcon } from \"../icon\"\nimport { Select } from \"../select\"\nimport { calendarStyle } from \"./calendar.style\"\nimport {\n CalendarContext,\n CalendarDescendantsContext,\n useCalendar,\n useCalendarContext,\n useCalendarDay,\n} from \"./use-calendar\"\n\ninterface ComponentContext\n extends Pick<\n UseCalendarReturn,\n | \"getMonthProps\"\n | \"getMonthSelectProps\"\n | \"getNavigationProps\"\n | \"getNextButtonProps\"\n | \"getPrevButtonProps\"\n | \"getStatusProps\"\n | \"getWeekdayProps\"\n | \"getYearSelectProps\"\n | \"monthDays\"\n | \"monthItems\"\n | \"weekdays\"\n | \"yearItems\"\n >,\n Pick<\n CalendarRootProps,\n | \"buttonProps\"\n | \"controlProps\"\n | \"day\"\n | \"dayProps\"\n | \"monthProps\"\n | \"monthSelectProps\"\n | \"navigationProps\"\n | \"nextButtonProps\"\n | \"prevButtonProps\"\n | \"selectProps\"\n | \"weekdayProps\"\n | \"weekdaysProps\"\n | \"weekProps\"\n | \"weeksProps\"\n | \"yearSelectProps\"\n > {}\n\nexport interface CalendarRootProps<\n Multiple extends boolean = false,\n Range extends boolean = false,\n> extends Omit<HTMLStyledProps, \"defaultValue\" | \"onChange\">,\n ThemeProps<CalendarStyle>,\n UseCalendarProps<Multiple, Range>,\n Pick<CalendarMonthProps, \"day\"> {\n /**\n * Props for the button component.\n */\n buttonProps?: HTMLStyledProps<\"button\">\n /**\n * Props for the control component.\n */\n controlProps?: CalendarControlProps\n /**\n * Props for the day component.\n */\n dayProps?: Omit<CalendarDayProps, \"value\">\n /**\n * Props for the month component.\n */\n monthProps?: CalendarMonthProps\n /**\n * Props for the month select component.\n */\n monthSelectProps?: CalendarMonthSelectProps\n /**\n * Props for the navigation component.\n */\n navigationProps?: Omit<CalendarNavigationProps, \"children\">\n /**\n * Props for the next button component.\n */\n nextButtonProps?: CalendarNextButtonProps\n /**\n * Props for the prev button component.\n */\n prevButtonProps?: CalendarPrevButtonProps\n /**\n * Props for the select component.\n */\n selectProps?: Select.RootProps\n /**\n * Props for the weekday component.\n */\n weekdayProps?: HTMLStyledProps<\"th\">\n /**\n * Props for the weekdays component.\n */\n weekdaysProps?: HTMLStyledProps<\"tr\">\n /**\n * Props for the week component.\n */\n weekProps?: HTMLStyledProps<\"tr\">\n /**\n * Props for the weeks component.\n */\n weeksProps?: HTMLStyledProps<\"tbody\">\n /**\n * Props for the year select component.\n */\n yearSelectProps?: CalendarYearSelectProps\n}\n\nconst {\n ComponentContext,\n PropsContext: CalendarPropsContext,\n useComponentContext,\n usePropsContext: useCalendarPropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<CalendarRootProps, CalendarStyle, ComponentContext>(\n \"calendar\",\n calendarStyle,\n)\n\nexport { CalendarPropsContext, useCalendarPropsContext }\n\n/**\n * `Calendar` is a component for displaying or selecting dates in a calendar.\n *\n * @see https://yamada-ui.com/docs/components/calendar\n */\nexport const CalendarRoot = withProvider(\n <Multiple extends boolean = false, Range extends boolean = false>({\n children,\n day,\n buttonProps,\n controlProps,\n dayProps,\n monthProps,\n monthSelectProps,\n navigationProps,\n nextButtonProps,\n prevButtonProps,\n selectProps,\n weekdayProps,\n weekdaysProps,\n weekProps,\n weeksProps,\n yearSelectProps,\n ...props\n }: CalendarRootProps<Multiple, Range>) => {\n const {\n descendants,\n disabled,\n endOfMonth,\n excludeDate,\n holidays,\n locale,\n max,\n maxDate,\n minDate,\n month,\n monthDays,\n monthItems,\n multiple,\n range,\n startDayOfWeek,\n startOfMonth,\n today,\n value,\n weekdays,\n weekendDays,\n yearItems,\n getMonthProps,\n getMonthSelectProps,\n getNavigationProps,\n getNextButtonProps,\n getPrevButtonProps,\n getRootProps,\n getStatusProps,\n getWeekdayProps,\n getYearSelectProps,\n onChange,\n onMonthChange,\n onNextMonth,\n onPrevMonth,\n } = useCalendar(props)\n const calendarContext = useMemo(\n () => ({\n disabled,\n endOfMonth,\n excludeDate,\n holidays,\n locale,\n max,\n maxDate,\n minDate,\n month,\n multiple,\n range,\n startDayOfWeek,\n startOfMonth,\n today,\n value,\n weekendDays,\n onChange,\n onMonthChange,\n onNextMonth,\n onPrevMonth,\n }),\n [\n disabled,\n endOfMonth,\n excludeDate,\n holidays,\n locale,\n max,\n maxDate,\n minDate,\n month,\n multiple,\n range,\n startDayOfWeek,\n startOfMonth,\n today,\n value,\n weekendDays,\n onChange,\n onMonthChange,\n onNextMonth,\n onPrevMonth,\n ],\n )\n const componentContext = useMemo(\n () => ({\n day,\n monthDays,\n monthItems,\n weekdays,\n yearItems,\n buttonProps,\n controlProps,\n dayProps,\n getMonthProps,\n getMonthSelectProps,\n getNavigationProps,\n getNextButtonProps,\n getPrevButtonProps,\n getStatusProps,\n getWeekdayProps,\n getYearSelectProps,\n monthProps,\n monthSelectProps,\n navigationProps,\n nextButtonProps,\n prevButtonProps,\n selectProps,\n weekdayProps,\n weekdaysProps,\n weekProps,\n weeksProps,\n yearSelectProps,\n }),\n [\n day,\n monthDays,\n monthItems,\n weekdays,\n yearItems,\n buttonProps,\n controlProps,\n dayProps,\n getMonthProps,\n getMonthSelectProps,\n getNavigationProps,\n getNextButtonProps,\n getPrevButtonProps,\n getStatusProps,\n getWeekdayProps,\n getYearSelectProps,\n monthProps,\n monthSelectProps,\n navigationProps,\n nextButtonProps,\n prevButtonProps,\n selectProps,\n weekdayProps,\n weekdaysProps,\n weekProps,\n weeksProps,\n yearSelectProps,\n ],\n )\n\n return (\n <CalendarDescendantsContext value={descendants}>\n <CalendarContext value={calendarContext}>\n <ComponentContext value={componentContext}>\n <styled.div {...getRootProps()}>\n {children ?? (\n <>\n <CalendarNavigation />\n <CalendarMonth />\n </>\n )}\n </styled.div>\n </ComponentContext>\n </CalendarContext>\n </CalendarDescendantsContext>\n )\n },\n \"root\",\n)() as GenericsComponent<{\n <Multiple extends boolean = false, Range extends boolean = false>(\n props: CalendarRootProps<Multiple, Range>,\n ): ReactElement\n}>\n\nexport interface CalendarNavigationProps extends HTMLStyledProps<\"nav\"> {}\n\nexport const CalendarNavigation = withContext<\"nav\", CalendarNavigationProps>(\n \"nav\",\n [\"row\", \"navigation\"],\n)(undefined, ({ children, ...rest }) => {\n const { getNavigationProps, navigationProps } = useComponentContext()\n\n const computedChildren = useMemo(() => {\n if (children) return children\n\n return (\n <>\n <CalendarPrevButton />\n <CalendarControl />\n <CalendarNextButton />\n </>\n )\n }, [children])\n\n return {\n ...getNavigationProps({ ...navigationProps, ...rest }),\n children: computedChildren,\n }\n})\n\nexport interface CalendarControlProps\n extends Omit<HTMLStyledProps, \"children\"> {\n /**\n * The control children to use.\n */\n children?: ReactNodeOrFunction<{ month: Date }>\n}\n\nexport const CalendarControl = withContext<\"div\", CalendarControlProps>(\n \"div\",\n \"control\",\n)(undefined, ({ children, ...rest }) => {\n const { month } = useCalendarContext()\n const { controlProps, getStatusProps } = useComponentContext()\n\n const computedChildren = useMemo(() => {\n if (children) return runIfFn(children, { month })\n\n return (\n <>\n <CalendarMonthSelect />\n <CalendarYearSelect />\n </>\n )\n }, [children, month])\n\n return {\n ...controlProps,\n ...rest,\n children: (\n <>\n {computedChildren}\n <styled.div {...getStatusProps()} />\n </>\n ),\n }\n})\n\nexport interface CalendarPrevButtonProps extends HTMLStyledProps<\"button\"> {}\n\nexport const CalendarPrevButton = withContext<\n \"button\",\n CalendarPrevButtonProps\n>(\"button\", [\"button\", \"prev\"])(\n undefined,\n ({ children = <ChevronLeftIcon />, ...rest }) => {\n const { buttonProps, getPrevButtonProps, prevButtonProps } =\n useComponentContext()\n\n return {\n children,\n ...getPrevButtonProps({ ...buttonProps, ...prevButtonProps, ...rest }),\n }\n },\n)\n\nexport interface CalendarNextButtonProps extends HTMLStyledProps<\"button\"> {}\n\nexport const CalendarNextButton = withContext<\n \"button\",\n CalendarNextButtonProps\n>(\"button\", [\"button\", \"next\"])(\n undefined,\n ({ children = <ChevronRightIcon />, ...rest }) => {\n const { buttonProps, getNextButtonProps, nextButtonProps } =\n useComponentContext()\n\n return {\n children,\n ...getNextButtonProps({ ...buttonProps, ...nextButtonProps, ...rest }),\n }\n },\n)\n\nexport interface CalendarSeparatorProps extends HTMLStyledProps<\"span\"> {}\n\nexport const CalendarSeparator = withContext<\"span\", CalendarSeparatorProps>(\n \"span\",\n \"separator\",\n)({ children: \"/\", role: \"separator\" })\n\nexport interface CalendarYearSelectProps extends Select.RootProps {}\n\nexport const CalendarYearSelect = withContext<\"div\", CalendarYearSelectProps>(\n (props) => {\n const { yearItems, getYearSelectProps, selectProps, yearSelectProps } =\n useComponentContext()\n const { contentProps, rootProps, ...rest } = {\n ...selectProps,\n ...yearSelectProps,\n ...props,\n }\n\n return (\n <Select.Root\n variant=\"plain\"\n items={yearItems}\n minH=\"{cell-size}\"\n contentProps={{ minW: \"{select-content-size}\", ...contentProps }}\n rootProps={{\n fontSize: \"{select-font-size}\",\n w: \"{select-root-size}\",\n ...rootProps,\n }}\n {...resetFieldProps}\n {...getYearSelectProps(rest)}\n />\n )\n },\n [\"select\", \"years\"],\n)()\n\nexport interface CalendarMonthSelectProps extends Select.RootProps {}\n\nexport const CalendarMonthSelect = withContext<\"div\", CalendarMonthSelectProps>(\n (props) => {\n const { monthItems, getMonthSelectProps, monthSelectProps, selectProps } =\n useComponentContext()\n const { contentProps, rootProps, ...rest } = {\n ...selectProps,\n ...monthSelectProps,\n ...props,\n }\n\n return (\n <Select.Root\n variant=\"plain\"\n items={monthItems}\n minH=\"{cell-size}\"\n contentProps={{ minW: \"{select-content-size}\", ...contentProps }}\n rootProps={{\n fontSize: \"{select-font-size}\",\n w: \"{select-root-size}\",\n ...rootProps,\n }}\n {...resetFieldProps}\n {...getMonthSelectProps(rest)}\n />\n )\n },\n [\"select\", \"months\"],\n)()\n\nexport interface CalendarMonthProps\n extends Omit<HTMLStyledProps<\"table\">, \"children\"> {\n /**\n * The day component to use.\n */\n day?: ReactNodeOrFunction<{ value: Date }>\n}\n\nexport const CalendarMonth = withContext<\"table\", CalendarMonthProps>(\n \"table\",\n \"month\",\n)(undefined, ({ day: dayProp, ...rest }) => {\n const {\n day,\n monthDays,\n weekdays,\n dayProps,\n getMonthProps,\n getWeekdayProps,\n monthProps,\n weekdayProps,\n weekdaysProps,\n weekProps,\n weeksProps,\n } = useComponentContext()\n\n dayProp ??= day\n\n const children = (\n <>\n <styled.thead aria-hidden>\n <CalendarWeekDays {...weekdaysProps}>\n {weekdays.map(({ label, value }, index) => (\n <CalendarWeekday\n key={index}\n {...getWeekdayProps({ ...weekdayProps, value })}\n >\n {label}\n </CalendarWeekday>\n ))}\n </CalendarWeekDays>\n </styled.thead>\n\n <CalendarWeeks {...weeksProps}>\n {monthDays.map((week, index) => (\n <CalendarWeek key={index} {...weekProps}>\n {week.map(({ label, value }) => (\n <CalendarDay\n key={value.toDateString()}\n {...{ ...dayProps, value }}\n >\n {runIfFn(dayProp, { value }) ?? (\n <styled.span>{label}</styled.span>\n )}\n </CalendarDay>\n ))}\n </CalendarWeek>\n ))}\n </CalendarWeeks>\n </>\n )\n\n return {\n ...getMonthProps({ ...monthProps, ...rest }),\n children,\n }\n})\n\nconst CalendarWeekDays = withContext(\"tr\", [\"row\", \"weekdays\"])()\n\nconst CalendarWeekday = withContext(\"th\", [\"cell\", \"weekday\"])()\n\nconst CalendarWeeks = withContext(\"tbody\", \"weeks\")()\n\nconst CalendarWeek = withContext(\"tr\", [\"row\", \"week\"])()\n\ninterface CalendarDayProps\n extends Omit<HTMLStyledProps<\"td\">, \"value\">,\n UseCalendarDayProps {}\n\nconst CalendarDay = withContext<\"td\", CalendarDayProps>(\"td\", [\"cell\", \"day\"])(\n undefined,\n (props) => {\n const { getDayProps } = useCalendarDay(props)\n\n return getDayProps()\n },\n)\n"],"mappings":";;;;;;;;;;;;;;;;;;;AA8HA,MAAM,EACJ,kBACA,cAAc,sBACd,qBACA,iBAAiB,yBACjB,aACA,iBACEA,6CACF,YACAC,qCACD;;;;;;AASD,MAAa,eAAe,cACwC,EAChE,UACA,KACA,aACA,cACA,UACA,YACA,kBACA,iBACA,iBACA,iBACA,aACA,cACA,eACA,WACA,YACA,gBACA,GAAG,YACqC;CACxC,MAAM,EACJ,aACA,UACA,YACA,aACA,UACA,QACA,KACA,SACA,SACA,OACA,WACA,YACA,UACA,OACA,gBACA,cACA,OACA,OACA,UACA,aACA,WACA,eACA,qBACA,oBACA,oBACA,oBACA,cACA,gBACA,iBACA,oBACA,UACA,eACA,aACA,gBACEC,iCAAY,MAAM;AA4GtB,QACE,2CAACC;EAA2B,OAAO;YACjC,2CAACC;GAAgB,iCA5GZ;IACL;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACD,GACD;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACD,CACF;aAiEK,2CAAC;IAAiB,iCA/Df;KACL;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACD,GACD;KACE;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACD,CACF;cAMO,2CAACC,uBAAO;KAAI,GAAI,cAAc;eAC3B,YACC,qFACE,2CAAC,uBAAqB,EACtB,2CAAC,kBAAgB,IAChB;MAEM;KACI;IACH;GACS;GAGjC,OACD,EAAE;AAQH,MAAa,qBAAqB,YAChC,OACA,CAAC,OAAO,aAAa,CACtB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"}