@refraktor/dates 0.0.1

package/src/components/month-input/month-input.tsx

@@ -0,0 +1,363 @@
+import { useId, useUncontrolled } from "@refraktor/utils";
+import { useCallback, useMemo } from "react";
+import {
+    createClassNamesConfig,
+    createComponentConfig,
+    factory,
+    Input,
+    Transition,
+    useClassNames,
+    useProps,
+    useTheme
+} from "@refraktor/core";
+import {
+    autoUpdate,
+    flip,
+    FloatingFocusManager,
+    FloatingPortal,
+    inline,
+    Middleware,
+    offset,
+    shift,
+    useDismiss,
+    useFloating,
+    useFocus,
+    useInteractions,
+    useRole
+} from "@floating-ui/react";
+import { useDates } from "../dates-provider";
+import { MonthPicker } from "../month-picker";
+import {
+    MonthInputClassNames,
+    MonthInputFactoryPayload,
+    MonthInputProps
+} from "./month-input.types";
+
+const DEFAULT_COLUMNS = 3;
+const DEFAULT_YEAR_PICKER_YEARS_PER_PAGE = 9;
+const DEFAULT_YEAR_PICKER_COLUMNS = 3;
+const DEFAULT_VALUE_FORMAT = "MMMM YYYY";
+
+const defaultProps = {
+    columns: DEFAULT_COLUMNS,
+    yearPickerYearsPerPage: DEFAULT_YEAR_PICKER_YEARS_PER_PAGE,
+    yearPickerColumns: DEFAULT_YEAR_PICKER_COLUMNS,
+    valueFormat: DEFAULT_VALUE_FORMAT,
+    disabled: false,
+    size: "md",
+    radius: "default",
+    positioning: {
+        placement: "bottom-start",
+        offset: 4
+    },
+    middlewares: {
+        flip: true,
+        shift: true
+    },
+    withinPortal: true,
+    closeOnClickOutside: true,
+    closeOnEscape: true
+} satisfies Partial<MonthInputProps>;
+
+const isValidDate = (value: unknown): value is Date =>
+    value instanceof Date && !Number.isNaN(value.getTime());
+
+const normalizeMonthValue = (value: Date | undefined) => {
+    if (!isValidDate(value)) {
+        return undefined;
+    }
+
+    const normalizedValue = new Date(value);
+    normalizedValue.setDate(1);
+    normalizedValue.setHours(0, 0, 0, 0);
+    return normalizedValue;
+};
+
+const MonthInput = factory<MonthInputFactoryPayload>((_props, ref) => {
+    const { cx, getRadius } = useTheme();
+    const { createDate } = useDates();
+    const {
+        id,
+        value,
+        defaultValue,
+        onChange,
+        opened,
+        defaultOpened,
+        onOpenedChange,
+        minYear,
+        maxYear,
+        columns,
+        yearPickerYearsPerPage,
+        yearPickerColumns,
+        getMonthLabel,
+        getMonthAriaLabel,
+        getHeaderLabel,
+        getNavigationAriaLabel,
+        valueFormat,
+        disabled,
+        size,
+        radius,
+        positioning,
+        middlewares,
+        withinPortal,
+        closeOnClickOutside,
+        closeOnEscape,
+        transitionProps,
+        inputClassNames,
+        className,
+        classNames,
+        onFocus,
+        onBlur,
+        onClick,
+        onKeyDown,
+        ...inputProps
+    } = useProps("MonthInput", defaultProps, _props);
+    const classes = useClassNames("MonthInput", classNames);
+
+    const _id = useId(id);
+    const dropdownId = `${_id}-dropdown`;
+
+    const [selectedMonthState, setSelectedMonth] = useUncontrolled<
+        Date | undefined
+    >({
+        value,
+        defaultValue,
+        finalValue: undefined,
+        onChange: (nextMonth) => {
+            if (nextMonth !== undefined) {
+                onChange?.(nextMonth);
+            }
+        }
+    });
+
+    const [isOpenState, setIsOpen] = useUncontrolled<boolean>({
+        value: opened,
+        defaultValue: defaultOpened,
+        finalValue: false,
+        onChange: onOpenedChange
+    });
+
+    const isOpen = isOpenState && !disabled;
+
+    const middleware = useMemo(() => {
+        const middlewareList: Middleware[] = [];
+
+        middlewareList.push(offset(positioning?.offset ?? 4));
+
+        if (middlewares?.flip ?? true) {
+            middlewareList.push(
+                flip(
+                    typeof middlewares?.flip === "boolean"
+                        ? undefined
+                        : middlewares.flip
+                )
+            );
+        }
+
+        if (middlewares?.shift ?? true) {
+            middlewareList.push(
+                shift(
+                    typeof middlewares?.shift === "boolean"
+                        ? undefined
+                        : middlewares.shift
+                )
+            );
+        }
+
+        if (middlewares?.inline) {
+            middlewareList.push(
+                inline(
+                    typeof middlewares.inline === "boolean"
+                        ? undefined
+                        : middlewares.inline
+                )
+            );
+        }
+
+        return middlewareList;
+    }, [middlewares, positioning?.offset]);
+
+    const handleOpenChange = useCallback(
+        (nextOpen: boolean) => {
+            if (disabled && nextOpen) {
+                return;
+            }
+
+            setIsOpen(nextOpen);
+        },
+        [disabled, setIsOpen]
+    );
+
+    const floating = useFloating({
+        placement: positioning?.placement ?? "bottom-start",
+        open: isOpen,
+        onOpenChange: handleOpenChange,
+        middleware,
+        whileElementsMounted: autoUpdate
+    });
+
+    const focus = useFocus(floating.context, {
+        enabled: !disabled
+    });
+
+    const dismiss = useDismiss(floating.context, {
+        outsidePress: closeOnClickOutside,
+        escapeKey: closeOnEscape
+    });
+
+    const role = useRole(floating.context, {
+        role: "dialog"
+    });
+
+    const { getReferenceProps, getFloatingProps } = useInteractions([
+        focus,
+        dismiss,
+        role
+    ]);
+
+    const setInputRef = useCallback(
+        (node: HTMLInputElement | null) => {
+            floating.refs.setReference(node);
+
+            if (typeof ref === "function") {
+                ref(node);
+            } else if (ref) {
+                ref.current = node;
+            }
+        },
+        [floating.refs, ref]
+    );
+
+    const handleInputKeyDown = useCallback(
+        (event: React.KeyboardEvent<HTMLInputElement>) => {
+            onKeyDown?.(event);
+
+            if (event.defaultPrevented || disabled) {
+                return;
+            }
+
+            if (
+                event.key === "ArrowDown" ||
+                event.key === "Enter" ||
+                event.key === " "
+            ) {
+                event.preventDefault();
+                setIsOpen(true);
+                return;
+            }
+
+            if (event.key === "Escape") {
+                event.preventDefault();
+                setIsOpen(false);
+            }
+        },
+        [disabled, onKeyDown, setIsOpen]
+    );
+
+    const handleMonthChange = useCallback(
+        (nextMonth: Date) => {
+            setSelectedMonth(nextMonth);
+            setIsOpen(false);
+        },
+        [setIsOpen, setSelectedMonth]
+    );
+
+    const selectedMonth = normalizeMonthValue(selectedMonthState);
+    const inputValue =
+        selectedMonth === undefined ? "" : createDate(selectedMonth).format(valueFormat);
+
+    const mergedReferenceProps = getReferenceProps({
+        onFocus,
+        onBlur,
+        onClick,
+        onKeyDown: handleInputKeyDown
+    });
+
+    const dropdownContent = (
+        <Transition
+            transition="fade"
+            duration={150}
+            mounted={isOpen}
+            {...transitionProps}
+        >
+            <div
+                ref={floating.refs.setFloating}
+                id={dropdownId}
+                style={{
+                    ...floating.floatingStyles
+                }}
+                className={cx(
+                    "w-72 z-50 border border-[var(--refraktor-border)] bg-[var(--refraktor-bg)] p-2 text-[var(--refraktor-text)] shadow-md",
+                    getRadius(radius),
+                    classes.dropdown
+                )}
+                {...getFloatingProps()}
+            >
+                <MonthPicker
+                    value={selectedMonth}
+                    onChange={handleMonthChange}
+                    minYear={minYear}
+                    maxYear={maxYear}
+                    columns={columns}
+                    yearPickerYearsPerPage={yearPickerYearsPerPage}
+                    yearPickerColumns={yearPickerColumns}
+                    disabled={disabled}
+                    size={size}
+                    radius={radius}
+                    getMonthLabel={getMonthLabel}
+                    getMonthAriaLabel={getMonthAriaLabel}
+                    getHeaderLabel={getHeaderLabel}
+                    getNavigationAriaLabel={getNavigationAriaLabel}
+                    className={cx("bg-transparent p-0", classes.monthPicker)}
+                />
+            </div>
+        </Transition>
+    );
+
+    const wrappedContent = isOpen ? (
+        <FloatingFocusManager
+            context={floating.context}
+            modal={false}
+            initialFocus={-1}
+            returnFocus={false}
+        >
+            {dropdownContent}
+        </FloatingFocusManager>
+    ) : (
+        dropdownContent
+    );
+
+    return (
+        <>
+            <Input
+                ref={setInputRef}
+                id={_id}
+                readOnly
+                value={inputValue}
+                disabled={disabled}
+                size={size}
+                radius={radius}
+                role="combobox"
+                aria-haspopup="dialog"
+                aria-expanded={isOpen}
+                aria-controls={isOpen ? dropdownId : undefined}
+                className={cx(classes.input, className)}
+                classNames={inputClassNames}
+                {...inputProps}
+                {...(mergedReferenceProps as any)}
+            />
+
+            {withinPortal ? (
+                <FloatingPortal>{wrappedContent}</FloatingPortal>
+            ) : (
+                wrappedContent
+            )}
+        </>
+    );
+});
+
+MonthInput.displayName = "@refraktor/dates/MonthInput";
+MonthInput.configure = createComponentConfig<MonthInputProps>();
+MonthInput.classNames = createClassNamesConfig<MonthInputClassNames>();
+
+export default MonthInput;

package/src/components/month-input/month-input.types.ts

@@ -0,0 +1,139 @@
+import type {
+    FlipOptions,
+    InlineOptions,
+    Placement,
+    ShiftOptions
+} from "@floating-ui/react";
+import {
+    createClassNamesConfig,
+    createComponentConfig,
+    FactoryPayload,
+    InputFieldClassNames,
+    InputProps,
+    RefraktorRadius,
+    RefraktorSize,
+    TransitionProps
+} from "@refraktor/core";
+import type {
+    MonthPickerGetHeaderLabel,
+    MonthPickerGetMonthAriaLabel,
+    MonthPickerGetMonthLabel,
+    MonthPickerGetNavigationAriaLabel
+} from "../month-picker";
+
+export type MonthInputValue = Date;
+export type MonthInputSize = RefraktorSize;
+export type MonthInputRadius = RefraktorRadius;
+export type MonthInputOnChange = (value: MonthInputValue) => void;
+export type MonthInputValueFormat = string;
+
+export type MonthInputPositioning = {
+    /** The placement of the dropdown relative to the input @default `bottom-start` */
+    placement?: Placement;
+
+    /** Offset distance from the input in pixels @default `4` */
+    offset?: number;
+};
+
+export type MonthInputMiddlewares = {
+    shift?: boolean | ShiftOptions;
+    flip?: boolean | FlipOptions;
+    inline?: boolean | InlineOptions;
+};
+
+export type MonthInputClassNames = {
+    input?: string;
+    dropdown?: string;
+    monthPicker?: string;
+};
+
+interface _MonthInputProps {
+    /** Selected month (controlled). */
+    value?: MonthInputValue;
+
+    /** Initial selected month (uncontrolled). */
+    defaultValue?: MonthInputValue;
+
+    /** Callback called when selected month changes. */
+    onChange?: MonthInputOnChange;
+
+    /** Dropdown open state (controlled). */
+    opened?: boolean;
+
+    /** Initial dropdown open state (uncontrolled). */
+    defaultOpened?: boolean;
+
+    /** Callback called when dropdown open state changes. */
+    onOpenedChange?: (opened: boolean) => void;
+
+    /** Minimum selectable year in month and year views. */
+    minYear?: number;
+
+    /** Maximum selectable year in month and year views. */
+    maxYear?: number;
+
+    /** Grid columns used by the month list @default `3` */
+    columns?: number;
+
+    /** Year picker years rendered in one page @default `9` */
+    yearPickerYearsPerPage?: number;
+
+    /** Year picker columns @default `3` */
+    yearPickerColumns?: number;
+
+    /** Custom month label renderer. */
+    getMonthLabel?: MonthPickerGetMonthLabel;
+
+    /** Custom aria-label generator for month buttons. */
+    getMonthAriaLabel?: MonthPickerGetMonthAriaLabel;
+
+    /** Custom header label renderer for visible year. */
+    getHeaderLabel?: MonthPickerGetHeaderLabel;
+
+    /** Custom aria-label generator for previous/next controls. */
+    getNavigationAriaLabel?: MonthPickerGetNavigationAriaLabel;
+
+    /** Dayjs format used to render selected month in the input @default `MMMM YYYY` */
+    valueFormat?: MonthInputValueFormat;
+
+    /** Positioning settings for the dropdown. */
+    positioning?: MonthInputPositioning;
+
+    /** Floating middleware settings. */
+    middlewares?: MonthInputMiddlewares;
+
+    /** Whether to render dropdown in a portal @default `true` */
+    withinPortal?: boolean;
+
+    /** Whether to close on click outside @default `true` */
+    closeOnClickOutside?: boolean;
+
+    /** Whether to close on Escape key @default `true` */
+    closeOnEscape?: boolean;
+
+    /** Transition props for dropdown, uses Transition internally */
+    transitionProps?: Omit<TransitionProps, "children" | "mounted">;
+
+    /** Used for styling the core Input field parts. */
+    inputClassNames?: InputFieldClassNames;
+
+    /** Used for styling MonthInput parts. */
+    classNames?: MonthInputClassNames;
+}
+
+export type MonthInputProps = _MonthInputProps &
+    Omit<
+        InputProps,
+        "value" | "defaultValue" | "onChange" | "readOnly" | "classNames"
+    >;
+
+export interface MonthInputFactoryPayload extends FactoryPayload {
+    props: MonthInputProps;
+    ref: HTMLInputElement;
+    compound: {
+        configure: ReturnType<typeof createComponentConfig<MonthInputProps>>;
+        classNames: ReturnType<
+            typeof createClassNamesConfig<MonthInputClassNames>
+        >;
+    };
+}

package/src/components/month-picker/index.ts

@@ -0,0 +1,14 @@
+export { default as MonthPicker } from "./month-picker";
+export type {
+    MonthPickerClassNames,
+    MonthPickerGetHeaderLabel,
+    MonthPickerGetMonthAriaLabel,
+    MonthPickerGetMonthLabel,
+    MonthPickerGetNavigationAriaLabel,
+    MonthPickerNavigationDirection,
+    MonthPickerOnChange,
+    MonthPickerProps,
+    MonthPickerRadius,
+    MonthPickerSize,
+    MonthPickerValue
+} from "./month-picker.types";