File size: 2,103 Bytes
cf86710 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 | import React, { type SelectHTMLAttributes } from "react";
import type { ClassNames, CustomComponents } from "../types/index.js";
import { UI } from "../UI.js";
/** An option to use in the dropdown. Maps to the `<option>` HTML element. */
export type DropdownOption = {
/** The value of the option. */
value: number;
/** The label of the option. */
label: string;
/** Whether the dropdown option is disabled (e.g., out of the calendar range). */
disabled: boolean;
};
/**
* Render a dropdown component for navigation in the calendar.
*
* @group Components
* @see https://daypicker.dev/guides/custom-components
*/
export function Dropdown(
props: {
/**
* @deprecated Use {@link useDayPicker} hook to get the list of internal
* components.
*/
components: CustomComponents;
/**
* @deprecated Use {@link useDayPicker} hook to get the list of internal
* class names.
*/
classNames: ClassNames;
/** The options to display in the dropdown. */
options?: DropdownOption[] | undefined;
} & Omit<SelectHTMLAttributes<HTMLSelectElement>, "children">,
) {
const { options, className, components, classNames, ...selectProps } = props;
const cssClassSelect = [classNames[UI.Dropdown], className].join(" ");
const selectedOption = options?.find(
({ value }) => value === selectProps.value,
);
return (
<span
data-disabled={selectProps.disabled}
className={classNames[UI.DropdownRoot]}
>
<components.Select className={cssClassSelect} {...selectProps}>
{options?.map(({ value, label, disabled }) => (
<components.Option key={value} value={value} disabled={disabled}>
{label}
</components.Option>
))}
</components.Select>
<span className={classNames[UI.CaptionLabel]} aria-hidden>
{selectedOption?.label}
<components.Chevron
orientation="down"
size={18}
className={classNames[UI.Chevron]}
/>
</span>
</span>
);
}
export type DropdownProps = Parameters<typeof Dropdown>[0];
|