@seedgrid/fe-components 0.2.4

package/dist/inputs/SgAutocomplete.js

@@ -0,0 +1,241 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { ChevronDown } from "lucide-react";
+import { Controller } from "react-hook-form";
+import { SgInputText } from "./SgInputText";
+import { t, useComponentsI18n } from "../i18n";
+function isPromise(value) {
+    return typeof value?.then === "function";
+}
+export function SgAutocomplete(props) {
+    const { control, name, ...rest } = props;
+    if (control && name) {
+        return (_jsx(Controller, { name: name, control: control, render: ({ field, fieldState }) => (_jsx(SgAutocompleteBase, { ...rest, error: rest.error ?? fieldState.error?.message, value: field.value ?? "", onChange: (value) => field.onChange(value) })) }));
+    }
+    return _jsx(SgAutocompleteBase, { ...rest });
+}
+function SgAutocompleteBase(props) {
+    const { value, onChange, source, mapItem, minLengthForSearch = 2, delay = 300, maxResult = 50, cacheEnabled = true, cacheTTL = 5 * 60 * 1000, showDropDownButton = false, openOnFocus = false, clearOnSelect = false, allowCustomValue = false, grouped, groupped, placeholderEmpty: placeholderEmptyProp, loadingText: loadingTextProp, onSelect, onSearch, onOpenChange, renderItem, renderGroupHeader, renderFooter, renderEmpty, formatSelection, itemTooltip, inputProps, iconButtons, enabled, readOnly, ...rest } = props;
+    const i18n = useComponentsI18n();
+    const placeholderEmpty = placeholderEmptyProp ?? t(i18n, "components.autocomplete.empty");
+    const loadingText = loadingTextProp ?? t(i18n, "components.autocomplete.loading");
+    const effectiveGrouped = grouped ?? groupped ?? false;
+    const [inputValue, setInputValue] = React.useState(value ?? "");
+    const [items, setItems] = React.useState([]);
+    const [loading, setLoading] = React.useState(false);
+    const [open, setOpen] = React.useState(false);
+    const wrapperRef = React.useRef(null);
+    const ignoreBlurRef = React.useRef(false);
+    const [activeIndex, setActiveIndex] = React.useState(-1);
+    const [lastSelected, setLastSelected] = React.useState("");
+    const cacheRef = React.useRef(new Map());
+    const requestIdRef = React.useRef(0);
+    const openRef = React.useRef(false);
+    openRef.current = open;
+    React.useEffect(() => {
+        if (value === undefined)
+            return;
+        setInputValue(value);
+        setLastSelected(value);
+    }, [value]);
+    const toItem = React.useCallback((raw) => {
+        if (mapItem)
+            return mapItem(raw);
+        return raw;
+    }, [mapItem]);
+    const runSearch = React.useCallback((query, forceOpen) => {
+        const trimmed = query ?? "";
+        if (trimmed.length < minLengthForSearch && !forceOpen) {
+            setItems([]);
+            setLoading(false);
+            setOpen(false);
+            onOpenChange?.(false);
+            return;
+        }
+        onSearch?.(trimmed);
+        setLoading(true);
+        const now = Date.now();
+        if (cacheEnabled) {
+            const cached = cacheRef.current.get(trimmed);
+            if (cached && now - cached.ts < cacheTTL) {
+                setItems(cached.items);
+                setLoading(false);
+                setOpen(true);
+                onOpenChange?.(true);
+                return;
+            }
+        }
+        const currentRequest = ++requestIdRef.current;
+        const result = source(trimmed);
+        const handle = (data) => {
+            if (currentRequest !== requestIdRef.current)
+                return;
+            const mapped = data.map(toItem).slice(0, maxResult);
+            if (cacheEnabled) {
+                cacheRef.current.set(trimmed, { ts: Date.now(), items: mapped });
+            }
+            setItems(mapped);
+            setLoading(false);
+            setOpen(true);
+            onOpenChange?.(true);
+        };
+        if (isPromise(result)) {
+            result.then(handle).catch(() => {
+                if (currentRequest !== requestIdRef.current)
+                    return;
+                setItems([]);
+                setLoading(false);
+                setOpen(true);
+                onOpenChange?.(true);
+            });
+        }
+        else {
+            handle(result);
+        }
+    }, [cacheEnabled, cacheTTL, maxResult, minLengthForSearch, onOpenChange, onSearch, source, toItem]);
+    React.useEffect(() => {
+        if (!openRef.current && !openOnFocus)
+            return;
+        const handler = setTimeout(() => runSearch(inputValue), delay);
+        return () => clearTimeout(handler);
+    }, [delay, inputValue, openOnFocus, runSearch]);
+    const selectItem = (item) => {
+        if (item.disabled)
+            return;
+        const selection = formatSelection ? formatSelection(item) : item.label;
+        setInputValue(selection);
+        onChange?.(selection);
+        setLastSelected(selection);
+        onSelect?.(item);
+        setOpen(false);
+        onOpenChange?.(false);
+        if (clearOnSelect) {
+            setInputValue("");
+            onChange?.("");
+        }
+    };
+    const handleInputChange = (next) => {
+        setInputValue(next);
+        onChange?.(next);
+        if (!open && (openOnFocus || next.length >= minLengthForSearch)) {
+            setOpen(true);
+            onOpenChange?.(true);
+        }
+        setActiveIndex(-1);
+    };
+    const handleBlur = (event) => {
+        if (event?.relatedTarget && wrapperRef.current?.contains(event.relatedTarget)) {
+            return;
+        }
+        if (ignoreBlurRef.current) {
+            setTimeout(() => {
+                ignoreBlurRef.current = false;
+            }, 0);
+            return;
+        }
+        if (!allowCustomValue && lastSelected && inputValue !== lastSelected) {
+            setInputValue(lastSelected);
+            onChange?.(lastSelected);
+        }
+        setOpen(false);
+        onOpenChange?.(false);
+    };
+    const handleFocus = () => {
+        if (openOnFocus) {
+            setOpen(true);
+            onOpenChange?.(true);
+            runSearch(inputValue, true);
+        }
+    };
+    const handleKeyDown = (event) => {
+        if (!open)
+            return;
+        if (event.key === "ArrowDown") {
+            event.preventDefault();
+            setActiveIndex((prev) => Math.min(prev + 1, items.length - 1));
+        }
+        else if (event.key === "ArrowUp") {
+            event.preventDefault();
+            setActiveIndex((prev) => Math.max(prev - 1, 0));
+        }
+        else if (event.key === "Enter") {
+            event.preventDefault();
+            const item = items[activeIndex];
+            if (item)
+                selectItem(item);
+        }
+        else if (event.key === "Escape") {
+            setOpen(false);
+            onOpenChange?.(false);
+        }
+    };
+    const dropdownButton = showDropDownButton ? (_jsx("button", { type: "button", className: "text-foreground/60 hover:text-foreground", onMouseDown: (event) => {
+            event.preventDefault();
+            ignoreBlurRef.current = true;
+        }, onClick: () => {
+            if (open) {
+                setOpen(false);
+                onOpenChange?.(false);
+                return;
+            }
+            setOpen(true);
+            onOpenChange?.(true);
+            runSearch(inputValue, true);
+        }, "aria-label": "Abrir lista", children: _jsx(ChevronDown, { size: 16 }) })) : null;
+    const mergedIconButtons = dropdownButton ? [...(iconButtons ?? []), dropdownButton] : iconButtons;
+    const groupedItems = React.useMemo(() => {
+        if (!effectiveGrouped)
+            return null;
+        const map = new Map();
+        items.forEach((item) => {
+            const key = item.group ?? "";
+            if (!map.has(key))
+                map.set(key, []);
+            map.get(key)?.push(item);
+        });
+        return Array.from(map.entries()).map(([group, list]) => ({ group, list }));
+    }, [effectiveGrouped, items]);
+    const listContent = () => {
+        if (loading) {
+            return _jsx("div", { className: "px-3 py-2 text-sm text-muted-foreground", children: loadingText });
+        }
+        if (items.length === 0) {
+            return renderEmpty ? renderEmpty(inputValue) : _jsx("div", { className: "px-3 py-2 text-sm text-muted-foreground", children: placeholderEmpty });
+        }
+        if (groupedItems) {
+            return groupedItems.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((item, index) => {
+                        const flatIndex = items.indexOf(item);
+                        const isActive = flatIndex === activeIndex;
+                        return (_jsxs("div", { className: `group relative cursor-pointer px-3 py-2 text-sm ${isActive ? "bg-muted/60" : ""} ${item.disabled ? "opacity-50 cursor-not-allowed" : "hover:bg-muted/40"}`, onMouseEnter: () => setActiveIndex(flatIndex), onMouseDown: (event) => {
+                                event.preventDefault();
+                                ignoreBlurRef.current = true;
+                            }, onClick: () => selectItem(item), children: [renderItem ? renderItem(item, isActive) : 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(item) })) : null] }, item.id));
+                    })] }, group || "default")));
+        }
+        return items.map((item, index) => {
+            const isActive = index === activeIndex;
+            return (_jsxs("div", { className: `group relative cursor-pointer px-3 py-2 text-sm ${isActive ? "bg-muted/60" : ""} ${item.disabled ? "opacity-50 cursor-not-allowed" : "hover:bg-muted/40"}`, onMouseEnter: () => setActiveIndex(index), onMouseDown: (event) => {
+                    event.preventDefault();
+                    ignoreBlurRef.current = true;
+                }, onClick: () => selectItem(item), children: [renderItem ? renderItem(item, isActive) : 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(item) })) : null] }, item.id));
+        });
+    };
+    return (_jsxs("div", { className: "relative", ref: wrapperRef, children: [_jsx(SgInputText, { ...rest, enabled: enabled, readOnly: readOnly, iconButtons: mergedIconButtons, inputProps: {
+                    ...inputProps,
+                    value: inputValue,
+                    onChange: (event) => handleInputChange(event.currentTarget.value),
+                    onBlur: (event) => {
+                        inputProps?.onBlur?.(event);
+                        handleBlur(event);
+                    },
+                    onFocus: (event) => {
+                        inputProps?.onFocus?.(event);
+                        handleFocus();
+                    },
+                    onKeyDown: (event) => {
+                        inputProps?.onKeyDown?.(event);
+                        handleKeyDown(event);
+                    }
+                } }), open && !(enabled === false || readOnly) ? (_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: listContent() }), renderFooter ? (_jsx("div", { className: "border-t border-border bg-white px-3 py-2", children: renderFooter(inputValue, items.length > 0) })) : null] })) : null] }));
+}

package/dist/inputs/SgCurrencyEdit.d.ts

@@ -0,0 +1,56 @@
+import React from "react";
+import type { FieldValues, RegisterOptions, UseFormRegister } from "react-hook-form";
+import type { RhfFieldProps } from "../rhf";
+export type SgCurrencyEditProps = {
+    id: string;
+    label?: string;
+    labelText?: string;
+    hintText?: string;
+    prefixText?: string;
+    suffixText?: string;
+    decimals?: number;
+    allowNegative?: boolean;
+    emptyValue?: "null" | "zero";
+    currency?: string;
+    locale?: string;
+    currencyDisplay?: "symbol" | "narrowSymbol" | "code" | "name";
+    currencySymbolOverride?: string;
+    currencySymbolPlacement?: "auto" | "prefix" | "suffix";
+    showCurrencySymbol?: boolean;
+    useGrouping?: boolean;
+    error?: string;
+    type?: React.HTMLInputTypeAttribute;
+    placeholder?: string;
+    className?: string;
+    labelClassName?: string;
+    inputProps?: (React.InputHTMLAttributes<HTMLInputElement> & {
+        ref?: React.Ref<HTMLInputElement>;
+    });
+    maxValue?: number;
+    minValue?: number;
+    minValueMessage?: string;
+    maxValueMessage?: string;
+    prefixIcon?: React.ReactNode;
+    width?: number | string;
+    clearButton?: boolean;
+    filled?: boolean;
+    enabled?: boolean;
+    textInputType?: React.InputHTMLAttributes<HTMLInputElement>["inputMode"];
+    onEnter?: () => void;
+    onExit?: () => void;
+    onChange?: (value: string) => void;
+    onClear?: () => void;
+    withBorder?: boolean;
+    borderRadius?: number | string;
+    required?: boolean;
+    requiredMessage?: string;
+    iconButtons?: React.ReactNode[];
+    readOnly?: boolean;
+    validation?: (value: string) => string | null;
+    validateOnBlur?: boolean;
+    onValidation?: (message: string | null) => void;
+    register?: UseFormRegister<FieldValues>;
+    rules?: RegisterOptions<FieldValues>;
+} & RhfFieldProps;
+export declare function SgCurrencyEdit(props: SgCurrencyEditProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SgCurrencyEdit.d.ts.map

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

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