@g4rcez/components 3.0.0 → 3.0.1

package/dist/components/floating/wizard.jsx

@@ -1,161 +0,0 @@
-"use client";
-import { arrow, autoUpdate, flip, FloatingArrow, FloatingPortal, offset, shift, useFloating, useInteractions, useRole, } from "@floating-ui/react";
-import { AnimatePresence, motion } from "motion/react";
-import React, { Fragment, useEffect, useLayoutEffect, useRef, useState } from "react";
-import { useResizeObserver } from "../../hooks/use-resize-observer";
-import { useTranslations } from "../../hooks/use-translations";
-import { useWindowSize } from "../../hooks/use-window-size";
-import { noop } from "../../lib/fns";
-import { Button } from "../core/button";
-const getRect = (element) => {
-    if (!element)
-        return { top: 0, left: 0, width: 0, height: 0, bottom: 0, right: 0 };
-    return element.getBoundingClientRect();
-};
-const resolveElement = (element) => {
-    if (typeof element === "string") {
-        return document.querySelector(element);
-    }
-    if ("current" in element) {
-        return element.current;
-    }
-    return element;
-};
-export const Wizard = ({ steps, active = false, onClose = noop, onFinish = noop, onChange = noop, labels: labelsProp }) => {
-    const translation = useTranslations();
-    const [index, setIndex] = useState(0);
-    const currentStep = steps[index];
-    const [element, setElement] = useState(null);
-    const [rect, setRect] = useState(getRect(null));
-    const [isOverlayReady, setIsOverlayReady] = useState(false);
-    const arrowRef = useRef(null);
-    const { width, height } = useWindowSize();
-    const labels = {
-        next: labelsProp?.next ?? translation.driverNext,
-        previous: labelsProp?.previous ?? translation.driverPrevious,
-        finish: labelsProp?.finish ?? translation.driverFinish,
-        skip: labelsProp?.skip ?? translation.driverSkip,
-    };
-    const { refs, floatingStyles, context } = useFloating({
-        open: active && isOverlayReady,
-        placement: currentStep?.side || "bottom",
-        whileElementsMounted: autoUpdate,
-        middleware: [offset(10), flip(), shift(), arrow({ element: arrowRef })],
-    });
-    const { getFloatingProps } = useInteractions([useRole(context)]);
-    useEffect(() => {
-        if (active) {
-            setIndex(0);
-        }
-    }, [active]);
-    useEffect(() => {
-        setIsOverlayReady(false);
-    }, [index, active]);
-    useEffect(() => {
-        if (!active || !currentStep)
-            return;
-        const el = resolveElement(currentStep.element);
-        if (el) {
-            currentStep.onEnter?.();
-            setTimeout(() => {
-                setRect(el.getBoundingClientRect());
-                refs.setReference(el);
-                setElement(el);
-            }, 100);
-        }
-        else {
-            console.warn(`Driver: Element not found:`, currentStep.element);
-            setElement(null);
-            setRect({ top: 0, left: 0, width: 0, height: 0, bottom: 0, right: 0 });
-        }
-    }, [index, active, currentStep, refs]);
-    useLayoutEffect(() => {
-        if (!element)
-            return;
-        const update = () => setRect(element.getBoundingClientRect());
-        update();
-        window.addEventListener("scroll", update, { capture: true, passive: true });
-        window.addEventListener("resize", update, { capture: true, passive: true });
-        return () => {
-            window.removeEventListener("scroll", update, { capture: true });
-            window.removeEventListener("resize", update, { capture: true });
-        };
-    }, [element, width, height]);
-    useResizeObserver(element, (entry) => {
-        setRect(entry.target.getBoundingClientRect());
-    });
-    const handleNext = () => {
-        currentStep.onNext?.();
-        setTimeout(() => {
-            if (index < steps.length - 1) {
-                setIndex((i) => i + 1);
-                onChange(index + 1);
-            }
-            else {
-                onFinish();
-                onClose();
-            }
-        }, 0);
-    };
-    const handlePrevious = () => {
-        currentStep.onPrevious?.();
-        if (index > 0) {
-            setIndex((i) => i - 1);
-            onChange(index - 1);
-        }
-    };
-    if (!active)
-        return null;
-    const hasNext = index < steps.length - 1;
-    const hasPrevious = index > 0;
-    return (<FloatingPortal>
-            <div className="pointer-events-none fixed inset-0 z-wizard">
-                <svg className="absolute inset-0 h-full w-full fill-current text-floating-overlay/70" xmlns="http://www.w3.org/2000/svg">
-                    <defs>
-                        <mask id="driver-mask">
-                            <rect x="0" y="0" width="100%" height="100%" fill="white"/>
-                            <motion.rect rx="4" fill="black" initial={false} onAnimationComplete={() => setIsOverlayReady(true)} transition={{ type: "spring", duration: 0.5, ease: "easeInOut" }} animate={{
-            x: rect.left - 5,
-            y: rect.top - 5,
-            width: rect.width + 10,
-            height: rect.height + 10,
-        }}/>
-                        </mask>
-                    </defs>
-                    <rect x="0" y="0" width="100%" height="100%" mask="url(#driver-mask)" className="pointer-events-auto"/>
-                </svg>
-                <AnimatePresence mode="wait">
-                    {currentStep && isOverlayReady && (<div {...getFloatingProps()} ref={refs.setFloating} style={element
-                ? floatingStyles
-                : {
-                    position: "fixed",
-                    top: "50%",
-                    left: "50%",
-                    transform: "translate(-50%, -50%)",
-                }} className="pointer-events-auto outline-none">
-                            <motion.div transition={{ duration: 0.2 }} exit={{ opacity: 0, scale: 0.9 }} animate={{ opacity: 1, scale: 1 }} initial={{ opacity: 0, scale: 0.9 }} className="flex w-80 max-w-sm flex-col gap-3 rounded-lg border border-floating-border bg-floating-background p-4 shadow-lg">
-                                {element && (<FloatingArrow ref={arrowRef} context={context} className="fill-floating-background stroke-floating-border"/>)}
-                                {currentStep.title && <h3>{currentStep.title}</h3>}
-                                {currentStep.description && <Fragment>{currentStep.description}</Fragment>}
-                                <div className="mt-2 flex items-center justify-between border-t border-floating-border pt-2">
-                                    <Button theme="raw" size="small" onClick={onClose} className="text-xs text-muted-foreground hover:text-foreground">
-                                        {labels.skip}
-                                    </Button>
-                                    <div className="flex gap-2">
-                                        {hasPrevious && (<Button size="small" theme="ghost-muted" onClick={handlePrevious}>
-                                                {labels.previous}
-                                            </Button>)}
-                                        <Button size="small" onClick={handleNext}>
-                                            {hasNext ? labels.next : labels.finish}
-                                        </Button>
-                                    </div>
-                                </div>
-                                <div className="absolute right-2 top-2 text-xs text-muted-foreground">
-                                    {index + 1} / {steps.length}
-                                </div>
-                            </motion.div>
-                        </div>)}
-                </AnimatePresence>
-            </div>
-        </FloatingPortal>);
-};

package/dist/components/form/autocomplete.jsx

@@ -1,279 +0,0 @@
-"use client";
-import { autoPlacement, autoUpdate, FloatingFocusManager, FloatingPortal, offset, size, useDismiss, useFloating, useInteractions, useListNavigation, useRole, useTransitionStyles, } from "@floating-ui/react";
-import { ChevronDown } from "lucide-react";
-import { AnimatePresence, motion } from "motion/react";
-import React, { forwardRef, Fragment, useEffect, useRef, useState } from "react";
-import { flushSync } from "react-dom";
-import { Virtuoso } from "react-virtuoso";
-import { Is } from "sidekicker";
-import { useRemoveScroll } from "../../hooks/use-remove-scroll";
-import { useTranslations } from "../../hooks/use-translations";
-import { css, dispatchInput, getRemainingSize, initializeInputDataset, mergeRefs } from "../../lib/dom";
-import { safeRegex } from "../../lib/fns";
-import { fzf } from "../../lib/fzf";
-import { InputField } from "./input-field";
-const Frag = (props) => <Fragment>{props.children}</Fragment>;
-const transitionStyles = {
-    duration: 200,
-    open: { transform: "scaleY(1)", opacity: 1 },
-    close: { transform: "scaleY(0)", opacity: 0 },
-    initial: { transform: "scaleY(0)", opacity: 0.2 },
-};
-const emptyRef = [];
-const List = forwardRef(function VirtualList(props, ref) {
-    return (<motion.ul {...props} ref={ref} className="max-h-96 w-full overscroll-contain rounded-lg">
-            <AnimatePresence>{props.children}</AnimatePresence>
-        </motion.ul>);
-});
-const Item = forwardRef(function VirtualItem({ item, context, ...props }, ref) {
-    return <motion.li {...props} ref={ref} className="first:rounded-t-lg last:rounded-t-lg"/>;
-});
-const components = { List, Item };
-const MIN_SIZE = 40;
-export const Autocomplete = forwardRef(({ left, error, right, loading, options, container, rightLabel, interactive, emptyMessage, optionalText, labelClassName, feedback = null, hideLeft = false, required = false, dynamicOption = false, ...props }, externalRef) => {
-    const scroller = useRef(null);
-    const fieldset = useRef(null);
-    const virtuoso = useRef(null);
-    const defaults = props.value ?? props.defaultValue ?? "";
-    const translation = useTranslations();
-    const [h, setH] = useState(() => Math.min(320, MIN_SIZE * options.length));
-    const [open, setOpen] = useState(false);
-    const [shadow, setShadow] = useState("");
-    const [value, setValue] = useState(defaults);
-    const [label, setLabel] = useState(() => options.find((x) => x.value === defaults)?.label ?? defaults);
-    const [index, setIndex] = useState(null);
-    const listRef = useRef(emptyRef);
-    const removeScrollRef = useRemoveScroll(open, "block-only");
-    const innerOptions = dynamicOption && shadow !== ""
-        ? [
-            {
-                value: shadow,
-                label: shadow,
-                "data-dynamic": "true",
-            },
-            ...options,
-        ]
-        : options;
-    const openDropdown = () => flushSync(() => setOpen(true));
-    const list = shadow
-        ? fzf(innerOptions, "value", [
-            { key: "value", value: shadow },
-            { key: "label", value: shadow },
-        ])
-        : innerOptions;
-    const setClosed = () => {
-        setOpen(false);
-        setH(0);
-    };
-    const displayList = list.filter((x) => x.hidden !== true);
-    const pattern = dynamicOption
-        ? undefined
-        : `^(${options.map((x) => `${safeRegex(x.value)}${x.label ? "|" + safeRegex(x.label) : ""}`).join("|")})$`;
-    const { x, y, strategy, refs, context, placement } = useFloating({
-        open,
-        transform: true,
-        onOpenChange: setOpen,
-        placement: "bottom-start",
-        whileElementsMounted: autoUpdate,
-        middleware: [
-            offset(4),
-            autoPlacement({ allowedPlacements: ["top-start", "bottom-start"], alignment: "start" }),
-            size({
-                padding: 10,
-                elementContext: "reference",
-                apply(args) {
-                    const ul = args.elements.floating.querySelector("ul");
-                    const fullSize = ul?.getBoundingClientRect().height || 0;
-                    const DEFAULT_SIZE = getRemainingSize(refs.reference.current, window.innerHeight);
-                    const maxH = Math.min(fullSize < MIN_SIZE ? DEFAULT_SIZE : fullSize, DEFAULT_SIZE, args.availableHeight);
-                    const size = displayList.length === 0 ? MIN_SIZE : Math.min(maxH, DEFAULT_SIZE, fullSize);
-                    const mw = `${fieldset.current?.getBoundingClientRect().width || DEFAULT_SIZE}px`;
-                    Object.assign(args.elements.floating.style, { width: mw, maxWidth: mw, height: size });
-                },
-            }),
-        ],
-    });
-    const transitions = useTransitionStyles(context, transitionStyles);
-    const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([
-        useRole(context, { role: "listbox" }),
-        useDismiss(context),
-        useListNavigation(context, {
-            cols: 0,
-            listRef,
-            loop: true,
-            virtual: true,
-            allowEscape: true,
-            activeIndex: index,
-            selectedIndex: index,
-            focusItemOnOpen: "auto",
-            openOnArrowKeyDown: true,
-            scrollItemIntoView: true,
-        }),
-    ]);
-    useEffect(() => {
-        if (props.value) {
-            const item = options.find((x) => x.value === props.value);
-            if (item) {
-                setLabel(item.label ?? item.value);
-                setValue(props.value);
-            }
-        }
-    }, [props.value, options.length]);
-    useEffect(() => {
-        if (!open)
-            return setH(0);
-        const inputRef = refs.reference;
-        if (inputRef.current === null)
-            return;
-        const s = getRemainingSize(inputRef.current, window.innerHeight);
-        setTimeout(() => setH(Math.min(s, displayList.length * MIN_SIZE)), 100);
-    }, [shadow, open, refs.reference, displayList.length]);
-    useEffect(() => {
-        const input = refs.reference.current;
-        if (!input)
-            return;
-        return initializeInputDataset(input);
-    }, []);
-    const onSelect = (opt, i) => {
-        setValue(opt.value);
-        const input = refs.reference.current;
-        if (!input)
-            return;
-        input?.setAttribute("data-value", opt.value);
-        input.value = opt.value;
-        const event = new Event("change", { bubbles: false, cancelable: true });
-        input.dispatchEvent(event);
-        if (props.onChange)
-            props.onChange(event);
-        setLabel(opt.label ?? "");
-        setClosed();
-        setShadow("");
-        setIndex(i);
-    };
-    const onChange = (event) => {
-        const value = event.target.value;
-        setShadow(value);
-        if (!open && value === "")
-            return setOpen(true);
-        event.target.name = props.name || "";
-        return value ? setOpen(true) : props.onChange?.(event);
-    };
-    const onCaretDownClick = () => {
-        openDropdown();
-        setShadow("");
-        refs.reference.current?.focus();
-    };
-    const onFocus = () => {
-        setIndex((prev) => (prev === null ? 0 : prev));
-        openDropdown();
-        setShadow("");
-    };
-    const onClose = () => {
-        refs.reference.current?.setAttribute("data-value", "");
-        setShadow("");
-        setValue("");
-        setLabel("");
-        dispatchInput(refs.reference.current);
-        setClosed();
-    };
-    const id = props.id || props.name;
-    const shadowId = `${id}-shadow`;
-    const isEmpty = displayList.length === 0;
-    const isTopPlacement = placement === "top" || placement === "top-start";
-    return (<InputField {...props} left={left} error={error} ref={fieldset} form={props.form} loading={loading} name={props.name} feedback={open && isTopPlacement ? props.title : feedback} hideLeft={hideLeft} required={required} title={props.title} container={container} rightLabel={rightLabel} interactive={interactive} id={shadowId} optionalText={optionalText} componentName="autocomplete" labelClassName={labelClassName} placeholder={props.placeholder} right={<span className="flex items-center gap-0.5">
-                        {right}
-                        <button type="button" className="p-2 transition-colors link:text-primary md:p-1" onClick={onCaretDownClick}>
-                            <ChevronDown size={20}/>
-                            <span className="sr-only">{translation.inputCaretDown}</span>
-                        </button>
-                        {value ? (<button type="button" onClick={onClose} className="p-2 transition-colors link:text-danger md:p-1">
-                                <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-                                    <path d="M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z" fill="currentColor" fillRule="evenodd" clipRule="evenodd"/>
-                                </svg>
-                            </button>) : null}
-                    </span>}>
-                <input data-shadow="true" {...getReferenceProps({
-        ...props,
-        onFocus,
-        pattern,
-        onChange,
-        id: shadowId,
-        name: shadowId,
-        ref: refs.setReference,
-        onClick: (e) => e.currentTarget.focus(),
-        onKeyDown(event) {
-            if (event.key === "Escape") {
-                event.currentTarget.blur();
-                return setClosed();
-            }
-            if (!open)
-                return;
-            if (event.key === "ArrowDown") {
-                let next = Is.number(index) ? index + 1 : 0;
-                if (next > displayList.length - 1)
-                    next = 0;
-                virtuoso.current?.scrollIntoView({ index: next });
-                return setIndex(next);
-            }
-            if (event.key === "ArrowUp") {
-                let next = Is.number(index) ? index - 1 : displayList.length - 1;
-                if (next < 0)
-                    next = displayList.length - 1;
-                virtuoso.current?.scrollIntoView({ index: next });
-                return setIndex(next);
-            }
-            if (event.key === "Enter") {
-                if (index !== null && displayList[index]) {
-                    event.preventDefault();
-                    return onSelect(displayList[index], index);
-                }
-                if (displayList.length === 1) {
-                    event.preventDefault();
-                    return onSelect(displayList[0], 0);
-                }
-            }
-        },
-    })} data-value={value} data-error={!!error} data-name={id} data-target={id} required={required} value={open ? shadow : options.length === 0 ? "" : label || value} aria-autocomplete="list" autoComplete="off" className={css("input placeholder-input-mask group h-input-height w-full flex-1", "rounded-md bg-transparent px-input-x py-input-y text-foreground", "outline-none transition-colors focus:ring-2 focus:ring-inset focus:ring-primary", "group-error:text-danger group-error:placeholder-input-mask-error", "text-base group-focus-within:border-primary group-hover:border-primary", props.className)}/>
-                <input id={id} name={id} type="hidden" data-origin={id} ref={externalRef} required={required} defaultValue={props.value || value || undefined}/>
-                <FloatingPortal preserveTabOrder>
-                    {open ? (<FloatingFocusManager modal guards returnFocus={false} context={context} initialFocus={-1} visuallyHiddenDismiss>
-                            <motion.div {...getFloatingProps({
-            ref: mergeRefs(removeScrollRef, refs.setFloating),
-            style: { ...transitions.styles, left: x, top: y ?? 0, position: strategy, height: "auto" },
-        })} initial={false} data-floating="true" animate={{ height: isEmpty ? "auto" : h }} className={css("shadow-floating isolate z-floating m-0 max-h-80 origin-[top_center] list-none overscroll-contain rounded-b-lg rounded-t-lg border border-floating-border bg-floating-background p-0 text-foreground ease-in-out", isTopPlacement ? "origin-[bottom_center]" : "origin-[top_center]")} onAnimationComplete={() => {
-                if (!open)
-                    return setH(0);
-                const ul = refs.floating.current;
-                const li = ul.querySelectorAll("li").item(0);
-                const sum = (li ? li.getBoundingClientRect().height : MIN_SIZE) * displayList.length;
-                return flushSync(() => setH(sum + 2));
-            }}>
-                                {isEmpty ? (<div role="option" className="w-full border-b border-tooltip-border">
-                                        <span className="flex w-full justify-between p-2 text-left text-disabled">
-                                            {emptyMessage || translation.autocompleteEmpty}
-                                        </span>
-                                    </div>) : null}
-                                <Virtuoso overscan={40} ref={virtuoso} hidden={isEmpty} data={displayList} style={{ height: h }} defaultItemHeight={MIN_SIZE} components={components} scrollerRef={(e) => void (scroller.current = e)} className="border-floating max-h-full overscroll-contain rounded-lg bg-floating-background p-0 text-foreground" itemContent={(i, option) => {
-                const Label = option.Render ?? Frag;
-                const active = value === option.value || value === option.label;
-                const selected = index === i;
-                const children = option.label ?? option.value;
-                return (<button data-value={option.value} {...getItemProps({
-                    ref: (node) => void (listRef.current[i] = node),
-                    role: "option",
-                    type: "button",
-                    "aria-checked": active,
-                    "aria-current": active,
-                    "aria-selected": active,
-                    "aria-busy": option.disabled,
-                    onClick: () => onSelect(option, i),
-                    className: `cursor-pointer min-h-10 hover:bg-floating-hover w-full p-2 text-left ${active ? "bg-primary-hover text-primary-foreground" : ""} ${selected ? "bg-floating-hover text-floating-foreground" : ""}`,
-                })}>
-                                                <Label {...props} label={option.label} value={option.value} children={children}/>
-                                            </button>);
-            }}/>
-                            </motion.div>
-                        </FloatingFocusManager>) : null}
-                </FloatingPortal>
-            </InputField>);
-});

package/dist/components/form/checkbox.jsx

@@ -1,12 +0,0 @@
-import React, { forwardRef } from "react";
-import { css } from "../../lib/dom";
-export const Checkbox = forwardRef(({ children, asTask = false, labelClassName, loading, error, className = "", size, container, ...props }, ref) => {
-    const d = props.disabled || loading;
-    return (<label aria-disabled={d} data-disabled={d} data-task={asTask} data-component="checkbox" className={css("group flex w-fit flex-wrap items-center font-normal data-[disabled=true]:cursor-not-allowed", asTask ? "group-checkbox-checked:line-through" : "", container)}>
-                <input {...props} ref={ref} disabled={d} type="checkbox" data-task={asTask} className={css("form-checkbox mr-2 inline-block size-4 appearance-none rounded border-card-border bg-origin-border text-primary focus:ring-primary disabled:opacity-70 group-aria-disabled:cursor-not-allowed", className)}/>
-                {children}
-                <span data-name="checkbox-label" className={css("min-w-full flex-1 text-xs text-danger empty:mt-0 empty:hidden", labelClassName)}>
-                    {error}
-                </span>
-            </label>);
-});

package/dist/components/form/date-picker.jsx

@@ -1,115 +0,0 @@
-"use client";
-import { format, isValid, parse, startOfDay } from "date-fns";
-import { CalendarIcon } from "lucide-react";
-import React, { forwardRef, Fragment, useEffect, useId, useMemo, useState } from "react";
-import { Is } from "sidekicker";
-import { useLocale } from "../../hooks/use-locale";
-import { useTranslations } from "../../hooks/use-translations";
-import { Calendar } from "../display/calendar";
-import { Dropdown } from "../floating/dropdown";
-import { Input } from "./input";
-const fixedDate = new Date(1970, 11, 31);
-const parts = {
-    year: () => [/\d/, /\d/, /\d/, /\d/],
-    month: () => [/\d/, /\d/],
-    day: () => [/\d/, /\d/],
-    hour: () => [/\d/, /\d/],
-    minute: () => [/\d/, /\d/],
-    literal: (str) => str.split(""),
-};
-const placeholders = {
-    day: () => "dd",
-    hour: () => "HH",
-    month: () => "MM",
-    minute: () => "mm",
-    year: () => "yyyy",
-    literal: (str) => str,
-};
-const partValues = {
-    literal: (_, str) => str,
-    year: (date) => date.getFullYear().toString(),
-    day: (date) => date.getDate().toString().padStart(2, "0"),
-    hour: (date) => date.getHours().toString().padStart(2, "0"),
-    minute: (date) => date.getMinutes().toString().padStart(2, "0"),
-    month: (date) => (date.getMonth() + 1).toString().padStart(2, "0"),
-};
-const formatParts = (datetimeFormat, date) => {
-    try {
-        return datetimeFormat.formatToParts(date).map((x) => {
-            if (x.type === "literal" && x.value === ", ") {
-                return { type: x.type, value: " " };
-            }
-            return x;
-        });
-    }
-    catch (e) {
-        return [];
-    }
-};
-const DATE_TIME_FORMAT = { day: "numeric", month: "numeric", year: "numeric", hour: "numeric", minute: "numeric" };
-const DATE_FORMAT = { day: "numeric", month: "numeric", year: "numeric" };
-export const DatePicker = forwardRef(({ date, locale: inputLocal, disabledDate, onChange, markToday, clickToClose, floating = true, type, ...props }, externalRef) => {
-    const locale = useLocale(inputLocal);
-    const labelId = useId();
-    const translation = useTranslations();
-    const datetimeFormat = useMemo(() => new Intl.DateTimeFormat(locale, type === "datetime" ? DATE_TIME_FORMAT : DATE_FORMAT), [locale, type]);
-    const [innerDate, setInnerDate] = useState(date || undefined);
-    const [open, setOpen] = useState(false);
-    const mask = formatParts(datetimeFormat, fixedDate).flatMap((x) => (Is.keyof(parts, x.type) ? parts[x.type](x.value) : []));
-    const placeholder = useMemo(() => {
-        return formatParts(datetimeFormat, fixedDate).reduce((acc, x) => acc + (Is.keyof(placeholders, x.type) ? placeholders[x.type](x.value) : ""), "");
-    }, [datetimeFormat]);
-    const isoDateEffect = date?.toISOString();
-    const [value, setValue] = useState(!innerDate
-        ? ""
-        : formatParts(datetimeFormat, innerDate).reduce((acc, x) => acc + (Is.keyof(parts, x.type) ? partValues[x.type](innerDate, x.value) : ""), ""));
-    const onChangeDateInput = (e) => {
-        const v = e.target.value;
-        setValue(v);
-        if (mask.length === v.length) {
-            const matches = mask.every((x, i) => {
-                const c = v.charAt(i);
-                return typeof x === "string" ? c === x : x.test(c);
-            });
-            if (matches) {
-                const parsed = parse(v, placeholder, new Date());
-                const d = type === "datetime" ? parsed : startOfDay(parsed);
-                setInnerDate(d);
-                return onChange?.(d);
-            }
-        }
-        setInnerDate(undefined);
-        return onChange?.(undefined);
-    };
-    useEffect(() => {
-        if (isValid(date)) {
-            setInnerDate(date);
-            setValue(format(date, placeholder));
-        }
-    }, [isoDateEffect, placeholder]);
-    const onChangeDate = (d) => {
-        setInnerDate(d);
-        onChange?.(d);
-        if (clickToClose)
-            setOpen(false);
-        if (d)
-            return setValue(format(d, placeholder));
-        return setValue("");
-    };
-    const validDate = isValid(innerDate);
-    const htmlValue = validDate ? innerDate.toISOString() : undefined;
-    const CalendarComponent = (<Calendar {...props} type={type} locale={locale} changeOnlyOnClick markToday={markToday} onChange={onChangeDate} disabledDate={disabledDate} date={validDate ? innerDate : undefined}/>);
-    return (<Fragment>
-                <Input {...props} mask={mask} value={value} id={undefined} name={undefined} data-value={htmlValue} formNoValidate={!open} data-target={props.name} data-component="date-picker" onChange={onChangeDateInput} required={props.required ?? true} error={open ? undefined : props.error} placeholder={props.placeholder || translation.datepickerPlaceholder(placeholder)} right={floating ? (<Fragment>
-                                <input data-origin={props.name} defaultValue={htmlValue} form={props.form} hidden id={props.name} name={props.name} ref={externalRef} type="date"/>
-                                <Dropdown open={open} onChange={setOpen} buttonProps={{ "aria-describedby": labelId }} trigger={<span aria-labelledby={labelId}>
-                                            <span id={labelId} className="sr-only">
-                                                {translation.datePickerCalendarButtonLabel}
-                                            </span>
-                                            <CalendarIcon />
-                                        </span>}>
-                                    {CalendarComponent}
-                                </Dropdown>
-                            </Fragment>) : null}/>
-            </Fragment>);
-});