@refraktor/dates 0.0.3 → 0.0.5

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

@@ -1,379 +0,0 @@
-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 { DatePicker } from "../date-picker";
-import {
-    DateInputClassNames,
-    DateInputFactoryPayload,
-    DateInputProps
-} from "./date-input.types";
-
-const DEFAULT_MONTH_PICKER_COLUMNS = 3;
-const DEFAULT_YEAR_PICKER_YEARS_PER_PAGE = 9;
-const DEFAULT_YEAR_PICKER_COLUMNS = 3;
-const DEFAULT_VALUE_FORMAT = "MMMM D, YYYY";
-
-const defaultProps = {
-    monthPickerColumns: DEFAULT_MONTH_PICKER_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<DateInputProps>;
-
-const isValidDate = (value: unknown): value is Date =>
-    value instanceof Date && !Number.isNaN(value.getTime());
-
-const normalizeDateValue = (value: Date | undefined) => {
-    if (!isValidDate(value)) {
-        return undefined;
-    }
-
-    const normalizedValue = new Date(value);
-    normalizedValue.setHours(0, 0, 0, 0);
-    return normalizedValue;
-};
-
-const DateInput = factory<DateInputFactoryPayload>((_props, ref) => {
-    const { cx, getRadius } = useTheme();
-    const { createDate } = useDates();
-    const {
-        id,
-        value,
-        defaultValue,
-        onChange,
-        opened,
-        defaultOpened,
-        onOpenedChange,
-        minDate,
-        maxDate,
-        monthPickerColumns,
-        yearPickerYearsPerPage,
-        yearPickerColumns,
-        getWeekdayLabel,
-        getDayLabel,
-        getDayAriaLabel,
-        getHeaderLabel,
-        getNavigationAriaLabel,
-        getMonthLabel,
-        getMonthAriaLabel,
-        getMonthHeaderLabel,
-        getMonthNavigationAriaLabel,
-        valueFormat,
-        disabled,
-        size,
-        radius,
-        positioning,
-        middlewares,
-        withinPortal,
-        closeOnClickOutside,
-        closeOnEscape,
-        transitionProps,
-        inputClassNames,
-        className,
-        classNames,
-        onFocus,
-        onBlur,
-        onClick,
-        onKeyDown,
-        ...inputProps
-    } = useProps("DateInput", defaultProps, _props);
-    const classes = useClassNames("DateInput", classNames);
-
-    const _id = useId(id);
-    const dropdownId = `${_id}-dropdown`;
-
-    const [selectedDateState, setSelectedDate] = useUncontrolled<Date | undefined>({
-        value,
-        defaultValue,
-        finalValue: undefined,
-        onChange: (nextDate) => {
-            if (nextDate !== undefined) {
-                onChange?.(nextDate);
-            }
-        }
-    });
-
-    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,
-        strategy: "fixed"
-    });
-
-    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 handleDateChange = useCallback(
-        (nextDate: Date) => {
-            const normalizedDate = normalizeDateValue(nextDate);
-
-            if (normalizedDate === undefined) {
-                return;
-            }
-
-            setSelectedDate(normalizedDate);
-            setIsOpen(false);
-        },
-        [setIsOpen, setSelectedDate]
-    );
-
-    const selectedDate = normalizeDateValue(selectedDateState);
-    const inputValue =
-        selectedDate === undefined ? "" : createDate(selectedDate).format(valueFormat);
-
-    const mergedReferenceProps = getReferenceProps({
-        onFocus,
-        onBlur,
-        onClick,
-        onKeyDown: handleInputKeyDown
-    });
-
-    const dropdownContent = (
-        <Transition
-            transition="fade"
-            duration={150}
-            mounted={isOpen}
-            style={{ position: "relative", zIndex: 1000 }}
-            {...transitionProps}
-        >
-            <div
-                ref={floating.refs.setFloating}
-                id={dropdownId}
-                style={{
-                    ...floating.floatingStyles,
-                    zIndex: 1000
-                }}
-                className={cx(
-                    "w-80 z-50 border border-[var(--refraktor-border)] bg-[var(--refraktor-bg)] p-2 text-[var(--refraktor-text)] shadow-md",
-                    getRadius(radius),
-                    classes.dropdown
-                )}
-                {...getFloatingProps()}
-            >
-                <DatePicker
-                    value={selectedDate}
-                    onChange={handleDateChange}
-                    minDate={minDate}
-                    maxDate={maxDate}
-                    monthPickerColumns={monthPickerColumns}
-                    yearPickerYearsPerPage={yearPickerYearsPerPage}
-                    yearPickerColumns={yearPickerColumns}
-                    disabled={disabled}
-                    size={size}
-                    radius={radius}
-                    getWeekdayLabel={getWeekdayLabel}
-                    getDayLabel={getDayLabel}
-                    getDayAriaLabel={getDayAriaLabel}
-                    getHeaderLabel={getHeaderLabel}
-                    getNavigationAriaLabel={getNavigationAriaLabel}
-                    getMonthLabel={getMonthLabel}
-                    getMonthAriaLabel={getMonthAriaLabel}
-                    getMonthHeaderLabel={getMonthHeaderLabel}
-                    getMonthNavigationAriaLabel={getMonthNavigationAriaLabel}
-                    className={cx("bg-transparent p-0", classes.datePicker)}
-                />
-            </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
-            )}
-        </>
-    );
-});
-
-DateInput.displayName = "@refraktor/dates/DateInput";
-DateInput.configure = createComponentConfig<DateInputProps>();
-DateInput.classNames = createClassNamesConfig<DateInputClassNames>();
-
-export default DateInput;

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

@@ -1,161 +0,0 @@
-import type {
-    FlipOptions,
-    InlineOptions,
-    Placement,
-    ShiftOptions
-} from "@floating-ui/react";
-import {
-    createClassNamesConfig,
-    createComponentConfig,
-    FactoryPayload,
-    InputFieldClassNames,
-    InputProps,
-    RefraktorRadius,
-    RefraktorSize,
-    TransitionProps
-} from "@refraktor/core";
-import type {
-    DatePickerGetDayAriaLabel,
-    DatePickerGetDayLabel,
-    DatePickerGetHeaderLabel,
-    DatePickerGetNavigationAriaLabel,
-    DatePickerGetWeekdayLabel
-} from "../date-picker";
-import type {
-    MonthPickerGetHeaderLabel,
-    MonthPickerGetMonthAriaLabel,
-    MonthPickerGetMonthLabel,
-    MonthPickerGetNavigationAriaLabel
-} from "../month-picker";
-
-export type DateInputValue = Date;
-export type DateInputSize = RefraktorSize;
-export type DateInputRadius = RefraktorRadius;
-export type DateInputOnChange = (value: DateInputValue) => void;
-export type DateInputValueFormat = string;
-
-export type DateInputPositioning = {
-    /** 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 DateInputMiddlewares = {
-    shift?: boolean | ShiftOptions;
-    flip?: boolean | FlipOptions;
-    inline?: boolean | InlineOptions;
-};
-
-export type DateInputClassNames = {
-    input?: string;
-    dropdown?: string;
-    datePicker?: string;
-};
-
-interface _DateInputProps {
-    /** Selected date (controlled). */
-    value?: DateInputValue;
-
-    /** Initial selected date (uncontrolled). */
-    defaultValue?: DateInputValue;
-
-    /** Callback called when selected date changes. */
-    onChange?: DateInputOnChange;
-
-    /** 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 date. */
-    minDate?: Date;
-
-    /** Maximum selectable date. */
-    maxDate?: Date;
-
-    /** Month picker columns @default `3` */
-    monthPickerColumns?: number;
-
-    /** Year picker years rendered in one page @default `9` */
-    yearPickerYearsPerPage?: number;
-
-    /** Year picker columns @default `3` */
-    yearPickerColumns?: number;
-
-    /** Custom weekday label renderer. */
-    getWeekdayLabel?: DatePickerGetWeekdayLabel;
-
-    /** Custom day label renderer. */
-    getDayLabel?: DatePickerGetDayLabel;
-
-    /** Custom aria-label generator for day buttons. */
-    getDayAriaLabel?: DatePickerGetDayAriaLabel;
-
-    /** Custom header label renderer for visible month. */
-    getHeaderLabel?: DatePickerGetHeaderLabel;
-
-    /** Custom aria-label generator for previous/next controls. */
-    getNavigationAriaLabel?: DatePickerGetNavigationAriaLabel;
-
-    /** Custom month label renderer in month view. */
-    getMonthLabel?: MonthPickerGetMonthLabel;
-
-    /** Custom aria-label generator for month buttons in month view. */
-    getMonthAriaLabel?: MonthPickerGetMonthAriaLabel;
-
-    /** Custom header label renderer in month view. */
-    getMonthHeaderLabel?: MonthPickerGetHeaderLabel;
-
-    /** Custom aria-label generator for month view navigation controls. */
-    getMonthNavigationAriaLabel?: MonthPickerGetNavigationAriaLabel;
-
-    /** Dayjs format used to render selected date in the input @default `MMMM D, YYYY` */
-    valueFormat?: DateInputValueFormat;
-
-    /** Positioning settings for the dropdown. */
-    positioning?: DateInputPositioning;
-
-    /** Floating middleware settings. */
-    middlewares?: DateInputMiddlewares;
-
-    /** 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 DateInput parts. */
-    classNames?: DateInputClassNames;
-}
-
-export type DateInputProps = _DateInputProps &
-    Omit<
-        InputProps,
-        "value" | "defaultValue" | "onChange" | "readOnly" | "classNames"
-    >;
-
-export interface DateInputFactoryPayload extends FactoryPayload {
-    props: DateInputProps;
-    ref: HTMLInputElement;
-    compound: {
-        configure: ReturnType<typeof createComponentConfig<DateInputProps>>;
-        classNames: ReturnType<
-            typeof createClassNamesConfig<DateInputClassNames>
-        >;
-    };
-}

package/src/components/date-input/index.ts

@@ -1,13 +0,0 @@
-export { default as DateInput } from "./date-input";
-export type {
-    DateInputClassNames,
-    DateInputFactoryPayload,
-    DateInputMiddlewares,
-    DateInputOnChange,
-    DateInputPositioning,
-    DateInputProps,
-    DateInputRadius,
-    DateInputSize,
-    DateInputValue,
-    DateInputValueFormat
-} from "./date-input.types";