@seedgrid/fe-components 0.2.8 → 0.2.10

package/dist/inputs/SgCombobox.js

@@ -0,0 +1,349 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { ChevronDown } from "lucide-react";
+import { SgInputText } from "./SgInputText";
+import { t, useComponentsI18n } from "../i18n";
+const TYPEAHEAD_RESET_MS = 700;
+function defaultMapItem(raw) {
+    if (typeof raw === "string" || typeof raw === "number") {
+        return {
+            id: String(raw),
+            label: String(raw)
+        };
+    }
+    if (raw && typeof raw === "object") {
+        const asRecord = raw;
+        const id = asRecord.id ?? asRecord.value ?? asRecord.key ?? asRecord.label;
+        const label = asRecord.label ?? asRecord.name ?? asRecord.description ?? asRecord.title ?? id;
+        return {
+            id: typeof id === "string" || typeof id === "number" ? id : String(id ?? ""),
+            label: String(label ?? "")
+        };
+    }
+    return {
+        id: String(raw ?? ""),
+        label: String(raw ?? "")
+    };
+}
+function idEquals(left, right) {
+    if (right == null)
+        return false;
+    return String(left) === String(right);
+}
+function findTypeAheadMatchIndex(entries, query, startIndex) {
+    const normalized = query.trim().toLowerCase();
+    if (!normalized)
+        return -1;
+    if (!entries.length)
+        return -1;
+    for (let offset = 1; offset <= entries.length; offset += 1) {
+        const index = (startIndex + offset + entries.length) % entries.length;
+        const entry = entries[index];
+        if (!entry || entry.item.disabled)
+            continue;
+        const label = entry.item.label?.toLowerCase() ?? "";
+        if (label.startsWith(normalized))
+            return index;
+    }
+    return -1;
+}
+export function SgCombobox(props) {
+    const { source, mapItem: mapItemProp, value, onValueChange, grouped, groupped, loadingText: loadingTextProp, emptyText: emptyTextProp, openOnFocus = false, onSelect, renderItem, renderGroupHeader, renderFooter, itemTooltip, inputProps, enabled, ...rest } = props;
+    const i18n = useComponentsI18n();
+    const loadingText = loadingTextProp ?? t(i18n, "components.autocomplete.loading");
+    const emptyText = emptyTextProp ?? t(i18n, "components.autocomplete.empty");
+    const effectiveGrouped = grouped ?? groupped ?? false;
+    const isControlled = value !== undefined;
+    const wrapperRef = React.useRef(null);
+    const ignoreBlurRef = React.useRef(false);
+    const requestIdRef = React.useRef(0);
+    const typeAheadRef = React.useRef({
+        buffer: "",
+        ts: 0
+    });
+    const [open, setOpen] = React.useState(false);
+    const [loading, setLoading] = React.useState(false);
+    const [entries, setEntries] = React.useState([]);
+    const [activeIndex, setActiveIndex] = React.useState(-1);
+    const [internalValue, setInternalValue] = React.useState(null);
+    const [lastSelectedLabel, setLastSelectedLabel] = React.useState("");
+    const resolvedValue = isControlled ? value : internalValue;
+    const isDisabled = enabled === false;
+    const mapItem = React.useCallback((raw) => {
+        if (mapItemProp)
+            return mapItemProp(raw);
+        return defaultMapItem(raw);
+    }, [mapItemProp]);
+    const refreshFromSource = React.useCallback(async () => {
+        if (Array.isArray(source)) {
+            const nextEntries = source.map((raw) => ({
+                item: mapItem(raw),
+                raw
+            }));
+            setEntries(nextEntries);
+            return nextEntries;
+        }
+        setLoading(true);
+        const currentRequest = ++requestIdRef.current;
+        try {
+            const result = source("");
+            const data = typeof result?.then === "function"
+                ? await result
+                : result;
+            if (currentRequest !== requestIdRef.current)
+                return [];
+            const nextEntries = data.map((raw) => ({
+                item: mapItem(raw),
+                raw
+            }));
+            setEntries(nextEntries);
+            return nextEntries;
+        }
+        catch {
+            if (currentRequest !== requestIdRef.current)
+                return [];
+            setEntries([]);
+            return [];
+        }
+        finally {
+            if (currentRequest === requestIdRef.current) {
+                setLoading(false);
+            }
+        }
+    }, [mapItem, source]);
+    React.useEffect(() => {
+        if (!Array.isArray(source))
+            return;
+        setEntries(source.map((raw) => ({
+            item: mapItem(raw),
+            raw
+        })));
+    }, [mapItem, source]);
+    const selectedEntry = React.useMemo(() => entries.find((entry) => idEquals(entry.item.id, resolvedValue)), [entries, resolvedValue]);
+    React.useEffect(() => {
+        if (resolvedValue == null || resolvedValue === "") {
+            if (lastSelectedLabel !== "") {
+                setLastSelectedLabel("");
+            }
+            return;
+        }
+        if (selectedEntry) {
+            if (lastSelectedLabel !== selectedEntry.item.label) {
+                setLastSelectedLabel(selectedEntry.item.label);
+            }
+            return;
+        }
+        if (lastSelectedLabel !== "") {
+            setLastSelectedLabel("");
+        }
+        void refreshFromSource();
+    }, [lastSelectedLabel, refreshFromSource, resolvedValue, selectedEntry]);
+    const displayedValue = resolvedValue == null || resolvedValue === ""
+        ? ""
+        : selectedEntry?.item.label ?? lastSelectedLabel;
+    const setSelectedValue = React.useCallback((nextValue) => {
+        if (!isControlled) {
+            setInternalValue(nextValue);
+        }
+        onValueChange?.(nextValue);
+    }, [isControlled, onValueChange]);
+    const closeDropdown = React.useCallback(() => {
+        setOpen(false);
+        setActiveIndex(-1);
+        typeAheadRef.current = { buffer: "", ts: 0 };
+    }, []);
+    const openDropdown = React.useCallback(() => {
+        if (isDisabled)
+            return;
+        setOpen(true);
+        void refreshFromSource();
+    }, [isDisabled, refreshFromSource]);
+    const selectIndex = React.useCallback((index) => {
+        const entry = entries[index];
+        if (!entry || entry.item.disabled)
+            return;
+        setSelectedValue(entry.item.id);
+        setLastSelectedLabel(entry.item.label);
+        onSelect?.(entry.raw);
+        closeDropdown();
+    }, [closeDropdown, entries, onSelect, setSelectedValue]);
+    const handleTypeAhead = React.useCallback(async (typedKey) => {
+        const key = typedKey.toLowerCase();
+        const now = Date.now();
+        const previous = typeAheadRef.current;
+        const buffer = now - previous.ts > TYPEAHEAD_RESET_MS
+            ? key
+            : `${previous.buffer}${key}`;
+        typeAheadRef.current = {
+            buffer,
+            ts: now
+        };
+        let availableEntries = entries;
+        if (!availableEntries.length) {
+            availableEntries = await refreshFromSource();
+        }
+        if (!availableEntries.length)
+            return;
+        const selectedIndex = availableEntries.findIndex((entry) => idEquals(entry.item.id, resolvedValue));
+        const baseIndex = selectedIndex >= 0 ? selectedIndex : activeIndex;
+        let nextIndex = findTypeAheadMatchIndex(availableEntries, buffer, baseIndex);
+        if (nextIndex < 0 && buffer.length > 1) {
+            typeAheadRef.current = { buffer: key, ts: now };
+            nextIndex = findTypeAheadMatchIndex(availableEntries, key, baseIndex);
+        }
+        if (nextIndex < 0)
+            return;
+        const nextEntry = availableEntries[nextIndex];
+        if (!nextEntry || nextEntry.item.disabled)
+            return;
+        setSelectedValue(nextEntry.item.id);
+        setLastSelectedLabel(nextEntry.item.label);
+        onSelect?.(nextEntry.raw);
+        if (open) {
+            setActiveIndex(nextIndex);
+        }
+    }, [activeIndex, entries, onSelect, open, refreshFromSource, resolvedValue, setSelectedValue]);
+    React.useEffect(() => {
+        if (!open)
+            return;
+        const handleOutside = (event) => {
+            if (wrapperRef.current?.contains(event.target))
+                return;
+            closeDropdown();
+        };
+        document.addEventListener("mousedown", handleOutside);
+        return () => document.removeEventListener("mousedown", handleOutside);
+    }, [closeDropdown, open]);
+    React.useEffect(() => {
+        if (!open)
+            return;
+        if (!entries.length) {
+            setActiveIndex(-1);
+            return;
+        }
+        const selectedIndex = entries.findIndex((entry) => idEquals(entry.item.id, resolvedValue));
+        if (selectedIndex >= 0) {
+            setActiveIndex(selectedIndex);
+            return;
+        }
+        setActiveIndex(0);
+    }, [entries, open, resolvedValue]);
+    const groupedEntries = React.useMemo(() => {
+        if (!effectiveGrouped)
+            return null;
+        const map = new Map();
+        entries.forEach((entry, index) => {
+            const groupKey = entry.item.group ?? "";
+            if (!map.has(groupKey))
+                map.set(groupKey, []);
+            map.get(groupKey)?.push({ entry, index });
+        });
+        return Array.from(map.entries()).map(([group, list]) => ({
+            group,
+            list
+        }));
+    }, [effectiveGrouped, entries]);
+    const dropdownButton = (_jsx("button", { type: "button", className: "text-foreground/60 hover:text-foreground", onMouseDown: (event) => {
+            event.preventDefault();
+            ignoreBlurRef.current = true;
+        }, onClick: () => {
+            if (open) {
+                closeDropdown();
+                return;
+            }
+            openDropdown();
+        }, "aria-label": "Abrir lista", children: _jsx(ChevronDown, { size: 16 }) }));
+    return (_jsxs("div", { className: "relative", ref: wrapperRef, children: [_jsx(SgInputText, { ...rest, enabled: enabled, clearButton: false, readOnly: true, iconButtons: [dropdownButton], inputProps: {
+                    ...inputProps,
+                    value: displayedValue,
+                    onMouseDown: (event) => {
+                        inputProps?.onMouseDown?.(event);
+                        if (isDisabled)
+                            return;
+                        if (!open) {
+                            openDropdown();
+                        }
+                    },
+                    onFocus: (event) => {
+                        inputProps?.onFocus?.(event);
+                        if (openOnFocus) {
+                            openDropdown();
+                        }
+                    },
+                    onBlur: (event) => {
+                        inputProps?.onBlur?.(event);
+                        if (event.relatedTarget && wrapperRef.current?.contains(event.relatedTarget)) {
+                            return;
+                        }
+                        if (ignoreBlurRef.current) {
+                            setTimeout(() => {
+                                ignoreBlurRef.current = false;
+                            }, 0);
+                            return;
+                        }
+                        closeDropdown();
+                    },
+                    onKeyDown: (event) => {
+                        inputProps?.onKeyDown?.(event);
+                        if (event.defaultPrevented)
+                            return;
+                        if (isDisabled)
+                            return;
+                        if (!event.ctrlKey && !event.altKey && !event.metaKey && event.key.length === 1 && event.key !== " ") {
+                            event.preventDefault();
+                            void handleTypeAhead(event.key);
+                            return;
+                        }
+                        if (event.key === "Tab") {
+                            closeDropdown();
+                            return;
+                        }
+                        if (event.key === "Escape") {
+                            event.preventDefault();
+                            closeDropdown();
+                            return;
+                        }
+                        if (event.key === "ArrowDown") {
+                            event.preventDefault();
+                            if (!open) {
+                                openDropdown();
+                                return;
+                            }
+                            setActiveIndex((prev) => Math.min(prev + 1, entries.length - 1));
+                            return;
+                        }
+                        if (event.key === "ArrowUp") {
+                            event.preventDefault();
+                            if (!open) {
+                                openDropdown();
+                                return;
+                            }
+                            setActiveIndex((prev) => Math.max(prev - 1, 0));
+                            return;
+                        }
+                        if (event.key === "Enter" || event.key === " ") {
+                            event.preventDefault();
+                            if (!open) {
+                                openDropdown();
+                                return;
+                            }
+                            if (activeIndex >= 0) {
+                                selectIndex(activeIndex);
+                            }
+                        }
+                    }
+                } }), open && !isDisabled ? (_jsxs("div", { className: "absolute left-0 right-0 z-30 mt-1 overflow-hidden rounded-md border border-border bg-white shadow-lg", children: [_jsx("div", { className: "max-h-64 overflow-auto", children: loading ? (_jsx("div", { className: "px-3 py-2 text-sm text-muted-foreground", children: loadingText })) : entries.length === 0 ? (_jsx("div", { className: "px-3 py-2 text-sm text-muted-foreground", children: emptyText })) : groupedEntries ? (groupedEntries.map(({ group, list }) => (_jsxs("div", { className: "border-b border-border last:border-b-0", children: [_jsx("div", { className: "px-3 py-1 text-xs font-semibold text-muted-foreground", children: renderGroupHeader ? renderGroupHeader(group) : group || " " }), list.map(({ entry, index }) => {
+                                    const isActive = activeIndex === index;
+                                    return (_jsxs("div", { className: `group relative cursor-pointer px-3 py-2 text-sm ${isActive ? "bg-muted/60" : ""} ${entry.item.disabled ? "cursor-not-allowed opacity-50" : "hover:bg-muted/40"}`, onMouseEnter: () => setActiveIndex(index), onMouseDown: (event) => {
+                                            event.preventDefault();
+                                            ignoreBlurRef.current = true;
+                                        }, onClick: () => selectIndex(index), children: [renderItem ? renderItem(entry.item, isActive) : entry.item.label, itemTooltip ? (_jsx("div", { className: "pointer-events-none absolute left-full top-1/2 z-20 ml-2 -translate-y-1/2 rounded border border-border bg-white px-2 py-1 text-xs shadow-md opacity-0 transition-opacity group-hover:opacity-100", children: itemTooltip(entry.item) })) : null] }, entry.item.id));
+                                })] }, group || "default")))) : (entries.map((entry, index) => {
+                            const isActive = activeIndex === index;
+                            return (_jsxs("div", { className: `group relative cursor-pointer px-3 py-2 text-sm ${isActive ? "bg-muted/60" : ""} ${entry.item.disabled ? "cursor-not-allowed opacity-50" : "hover:bg-muted/40"}`, onMouseEnter: () => setActiveIndex(index), onMouseDown: (event) => {
+                                    event.preventDefault();
+                                    ignoreBlurRef.current = true;
+                                }, onClick: () => selectIndex(index), children: [renderItem ? renderItem(entry.item, isActive) : entry.item.label, itemTooltip ? (_jsx("div", { className: "pointer-events-none absolute left-full top-1/2 z-20 ml-2 -translate-y-1/2 rounded border border-border bg-white px-2 py-1 text-xs shadow-md opacity-0 transition-opacity group-hover:opacity-100", children: itemTooltip(entry.item) })) : null] }, entry.item.id));
+                        })) }), renderFooter ? (_jsx("div", { className: "border-t border-border bg-white px-3 py-2", children: renderFooter("", entries.length > 0) })) : null] })) : null] }));
+}

package/dist/inputs/SgInputOTP.d.ts

@@ -0,0 +1,74 @@
+import React from "react";
+import type { FieldValues, RegisterOptions, UseFormRegister } from "react-hook-form";
+import type { RhfFieldProps } from "../rhf";
+export type SgInputOTPRef = {
+    focus: (slotIndex?: number) => void;
+    clear: () => void;
+    getRawValue: () => string;
+    getMaskedValue: () => string;
+};
+export type SgInputOTPProps = {
+    id: string;
+    label?: string;
+    hintText?: string;
+    mask?: string;
+    value?: string;
+    defaultValue?: string;
+    error?: string;
+    className?: string;
+    groupClassName?: string;
+    slotClassName?: string;
+    separatorClassName?: string;
+    inputProps?: Omit<React.InputHTMLAttributes<HTMLInputElement>, "value" | "defaultValue"> & {
+        ref?: React.Ref<HTMLInputElement>;
+    };
+    width?: number | string;
+    enabled?: boolean;
+    readOnly?: boolean;
+    required?: boolean;
+    requiredMessage?: string;
+    validation?: (rawValue: string, maskedValue: string) => string | null;
+    validateOnBlur?: boolean;
+    onValidation?: (message: string | null) => void;
+    onChange?: (maskedValue: string) => void;
+    onRawChange?: (rawValue: string) => void;
+    onComplete?: (value: string) => void;
+    onEnter?: () => void;
+    onExit?: () => void;
+    onClear?: () => void;
+    register?: UseFormRegister<FieldValues>;
+    rules?: RegisterOptions<FieldValues>;
+} & RhfFieldProps;
+export declare const SgInputOTP: React.ForwardRefExoticComponent<{
+    id: string;
+    label?: string;
+    hintText?: string;
+    mask?: string;
+    value?: string;
+    defaultValue?: string;
+    error?: string;
+    className?: string;
+    groupClassName?: string;
+    slotClassName?: string;
+    separatorClassName?: string;
+    inputProps?: Omit<React.InputHTMLAttributes<HTMLInputElement>, "value" | "defaultValue"> & {
+        ref?: React.Ref<HTMLInputElement>;
+    };
+    width?: number | string;
+    enabled?: boolean;
+    readOnly?: boolean;
+    required?: boolean;
+    requiredMessage?: string;
+    validation?: (rawValue: string, maskedValue: string) => string | null;
+    validateOnBlur?: boolean;
+    onValidation?: (message: string | null) => void;
+    onChange?: (maskedValue: string) => void;
+    onRawChange?: (rawValue: string) => void;
+    onComplete?: (value: string) => void;
+    onEnter?: () => void;
+    onExit?: () => void;
+    onClear?: () => void;
+    register?: UseFormRegister<FieldValues>;
+    rules?: RegisterOptions<FieldValues>;
+} & RhfFieldProps & React.RefAttributes<SgInputOTPRef>>;
+//# sourceMappingURL=SgInputOTP.d.ts.map

package/dist/inputs/SgInputOTP.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SgInputOTP.d.ts","sourceRoot":"","sources":["../../src/inputs/SgInputOTP.tsx"],"names":[],"mappings":"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"}