@wordpress/components
Version:
UI components for WordPress.
59 lines • 1.87 kB
JavaScript
/**
* External dependencies
*/
import { DayPicker } from 'react-day-picker';
import { enUS } from 'react-day-picker/locale';
/**
* WordPress dependencies
*/
import { useCallback } from '@wordpress/element';
/**
* Internal dependencies
*/
import { COMMON_PROPS } from '../utils/constants';
import { clampNumberOfMonths } from '../utils/misc';
import { useControlledValue } from '../../utils/hooks';
import { useLocalizationProps } from '../utils/use-localization-props';
import { jsx as _jsx } from "react/jsx-runtime";
/**
* `DateCalendar` is a React component that provides a customizable calendar
* interface for **single date** selection.
*
* The component is built with accessibility in mind and follows ARIA best
* practices for calendar widgets. It provides keyboard navigation, screen reader
* support, and customizable labels for internationalization.
*/
export const DateCalendar = ({
defaultSelected,
selected: selectedProp,
onSelect,
numberOfMonths = 1,
locale = enUS,
timeZone,
...props
}) => {
const localizationProps = useLocalizationProps({
locale,
timeZone,
mode: 'single'
});
const onChange = useCallback((selected, triggerDate, modifiers, e) => {
// Convert internal `null` to `undefined` for the public event handler.
onSelect?.(selected !== null && selected !== void 0 ? selected : undefined, triggerDate, modifiers, e);
}, [onSelect]);
const [selected, setSelected] = useControlledValue({
defaultValue: defaultSelected,
value: selectedProp,
onChange
});
return /*#__PURE__*/_jsx(DayPicker, {
...COMMON_PROPS,
...localizationProps,
...props,
mode: "single",
numberOfMonths: clampNumberOfMonths(numberOfMonths),
selected: selected !== null && selected !== void 0 ? selected : undefined,
onSelect: setSelected
});
};
//# sourceMappingURL=index.js.map