@wordpress/components/build/date-time/date/index.cjs.map

UI components for WordPress.

{
  "version": 3,
  "sources": ["../../../src/date-time/date/index.tsx"],
  "sourcesContent": ["/**\n * External dependencies\n */\nimport { isSameDay, subMonths, addMonths, isEqual, addDays, subDays, subWeeks, addWeeks, isSameMonth } from 'date-fns';\n/**\n * WordPress dependencies\n */\nimport { __, _n, sprintf, isRTL } from '@wordpress/i18n';\nimport { arrowLeft, arrowRight } from '@wordpress/icons';\nimport { dateI18n, date as formatDate, getSettings } from '@wordpress/date';\nimport { useState, useRef, useEffect } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { useLilius } from './use-lilius';\nimport { Wrapper, Navigator, ViewPreviousMonthButton, ViewNextMonthButton, NavigatorHeading, Calendar, DayOfWeek, DayButton } from './styles';\nimport { inputToDate, setInConfiguredTimezone, startOfDayInConfiguredTimezone } from '../utils';\nimport { TIMEZONELESS_FORMAT } from '../constants';\n\n/**\n * DatePicker is a React component that renders a calendar for date selection.\n *\n * ```jsx\n * import { DatePicker } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyDatePicker = () => {\n *   const [ date, setDate ] = useState( new Date() );\n *\n *   return (\n *     <DatePicker\n *       currentDate={ date }\n *       onChange={ ( newDate ) => setDate( newDate ) }\n *     />\n *   );\n * };\n * ```\n */\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nexport function DatePicker({\n  currentDate,\n  onChange,\n  events = [],\n  isInvalidDate,\n  onMonthPreviewed,\n  startOfWeek: weekStartsOn = 0\n}) {\n  const date = inputToDate(currentDate ?? new Date());\n  const {\n    calendar,\n    viewing,\n    setSelected,\n    setViewing,\n    isSelected,\n    viewPreviousMonth,\n    viewNextMonth\n  } = useLilius({\n    selected: [startOfDayInConfiguredTimezone(date)],\n    viewing: startOfDayInConfiguredTimezone(date),\n    weekStartsOn\n  });\n\n  // Used to implement a roving tab index. Tracks the day that receives focus\n  // when the user tabs into the calendar.\n  const [focusable, setFocusable] = useState(startOfDayInConfiguredTimezone(date));\n\n  // Allows us to only programmatically focus() a day when focus was already\n  // within the calendar. This stops us stealing focus from e.g. a TimePicker\n  // input.\n  const [isFocusWithinCalendar, setIsFocusWithinCalendar] = useState(false);\n\n  // Update internal state when currentDate prop changes.\n  const [prevCurrentDate, setPrevCurrentDate] = useState(currentDate);\n  if (currentDate !== prevCurrentDate) {\n    setPrevCurrentDate(currentDate);\n    setSelected([startOfDayInConfiguredTimezone(date)]);\n    setViewing(startOfDayInConfiguredTimezone(date));\n    setFocusable(startOfDayInConfiguredTimezone(date));\n  }\n  return /*#__PURE__*/_jsxs(Wrapper, {\n    className: \"components-datetime__date\",\n    role: \"application\",\n    \"aria-label\": __('Calendar'),\n    children: [/*#__PURE__*/_jsxs(Navigator, {\n      children: [/*#__PURE__*/_jsx(ViewPreviousMonthButton, {\n        icon: isRTL() ? arrowRight : arrowLeft,\n        variant: \"tertiary\",\n        \"aria-label\": __('View previous month'),\n        onClick: () => {\n          viewPreviousMonth();\n          setFocusable(subMonths(focusable, 1));\n          const prevMonth = subMonths(viewing, 1);\n          onMonthPreviewed?.(dateI18n(TIMEZONELESS_FORMAT, prevMonth, -prevMonth.getTimezoneOffset()));\n        },\n        size: \"compact\"\n      }), /*#__PURE__*/_jsxs(NavigatorHeading, {\n        level: 3,\n        children: [/*#__PURE__*/_jsx(\"strong\", {\n          children: dateI18n('F', viewing, -viewing.getTimezoneOffset())\n        }), ' ', dateI18n('Y', viewing, -viewing.getTimezoneOffset())]\n      }), /*#__PURE__*/_jsx(ViewNextMonthButton, {\n        icon: isRTL() ? arrowLeft : arrowRight,\n        variant: \"tertiary\",\n        \"aria-label\": __('View next month'),\n        onClick: () => {\n          viewNextMonth();\n          setFocusable(addMonths(focusable, 1));\n          const nextMonth = addMonths(viewing, 1);\n          onMonthPreviewed?.(dateI18n(TIMEZONELESS_FORMAT, nextMonth, -nextMonth.getTimezoneOffset()));\n        },\n        size: \"compact\"\n      })]\n    }), /*#__PURE__*/_jsxs(Calendar, {\n      onFocus: () => setIsFocusWithinCalendar(true),\n      onBlur: () => setIsFocusWithinCalendar(false),\n      children: [calendar[0][0].map(day => /*#__PURE__*/_jsx(DayOfWeek, {\n        children: dateI18n('D', day, -day.getTimezoneOffset())\n      }, day.toString())), calendar[0].map(week => week.map((day, index) => {\n        if (!isSameMonth(day, viewing)) {\n          return null;\n        }\n        return /*#__PURE__*/_jsx(Day, {\n          day: day,\n          column: index + 1,\n          isSelected: isSelected(day),\n          isFocusable: isEqual(day, focusable),\n          isFocusAllowed: isFocusWithinCalendar,\n          isToday: isSameDay(day, startOfDayInConfiguredTimezone(new Date())),\n          isInvalid: isInvalidDate ? isInvalidDate(day) : false,\n          numEvents: events.filter(event => isSameDay(event.date, day)).length,\n          onClick: () => {\n            setSelected([day]);\n            setFocusable(day);\n            const newDate = setInConfiguredTimezone(date, {\n              year: day.getFullYear(),\n              month: day.getMonth(),\n              date: day.getDate()\n            });\n            onChange?.(formatDate(TIMEZONELESS_FORMAT, newDate));\n          },\n          onKeyDown: event => {\n            let nextFocusable;\n            if (event.key === 'ArrowLeft') {\n              nextFocusable = addDays(day, isRTL() ? 1 : -1);\n            }\n            if (event.key === 'ArrowRight') {\n              nextFocusable = addDays(day, isRTL() ? -1 : 1);\n            }\n            if (event.key === 'ArrowUp') {\n              nextFocusable = subWeeks(day, 1);\n            }\n            if (event.key === 'ArrowDown') {\n              nextFocusable = addWeeks(day, 1);\n            }\n            if (event.key === 'PageUp') {\n              nextFocusable = subMonths(day, 1);\n            }\n            if (event.key === 'PageDown') {\n              nextFocusable = addMonths(day, 1);\n            }\n            if (event.key === 'Home') {\n              const dayOfWeek = day.getDay();\n              const daysToSubtract = (dayOfWeek - weekStartsOn + 7) % 7;\n              nextFocusable = subDays(day, daysToSubtract);\n            }\n            if (event.key === 'End') {\n              const dayOfWeek = day.getDay();\n              const daysToAdd = (weekStartsOn + 6 - dayOfWeek) % 7;\n              nextFocusable = addDays(day, daysToAdd);\n            }\n            if (nextFocusable) {\n              event.preventDefault();\n              setFocusable(nextFocusable);\n              if (!isSameMonth(nextFocusable, viewing)) {\n                setViewing(nextFocusable);\n                onMonthPreviewed?.(dateI18n(TIMEZONELESS_FORMAT, nextFocusable, -nextFocusable.getTimezoneOffset()));\n              }\n            }\n          }\n        }, day.toString());\n      }))]\n    })]\n  });\n}\nfunction Day({\n  day,\n  column,\n  isSelected,\n  isFocusable,\n  isFocusAllowed,\n  isToday,\n  isInvalid,\n  numEvents,\n  onClick,\n  onKeyDown\n}) {\n  const ref = useRef(null);\n\n  // Focus the day when it becomes focusable, e.g. because an arrow key is\n  // pressed. Only do this if focus is allowed - this stops us stealing focus\n  // from e.g. a TimePicker input.\n  useEffect(() => {\n    if (ref.current && isFocusable && isFocusAllowed) {\n      ref.current.focus();\n    }\n    // isFocusAllowed is not a dep as there is no point calling focus() on\n    // an already focused element.\n  }, [isFocusable]);\n  return /*#__PURE__*/_jsx(DayButton, {\n    __next40pxDefaultSize: true,\n    ref: ref,\n    className: \"components-datetime__date__day\" // Unused, for backwards compatibility.\n    ,\n    disabled: isInvalid,\n    tabIndex: isFocusable ? 0 : -1,\n    \"aria-label\": getDayLabel(day, isSelected, isToday, numEvents),\n    column: column,\n    isSelected: isSelected,\n    isToday: isToday,\n    hasEvents: numEvents > 0,\n    onClick: onClick,\n    onKeyDown: onKeyDown,\n    children: dateI18n('j', day, -day.getTimezoneOffset())\n  });\n}\nfunction getDayLabel(date, isSelected, isToday, numEvents) {\n  const {\n    formats\n  } = getSettings();\n  const localizedDate = dateI18n(formats.date, date, -date.getTimezoneOffset());\n  const parts = [localizedDate];\n  if (isSelected) {\n    parts.push(__('Selected'));\n  }\n  if (isToday) {\n    parts.push(__('Today'));\n  }\n  if (numEvents > 0) {\n    parts.push(sprintf(\n    // translators: %d: Number of events on the calendar date.\n    _n('There is %d event', 'There are %d events', numEvents), numEvents));\n  }\n  return parts.join('. ');\n}\nexport default DatePicker;"],
  "mappings": "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",
  "names": ["_jsxs", "_jsx", "formatDate"]
}