@seedgrid/fe-components 2026.6.7 → 2026.6.8

package/dist/inputs/SgMultiSelectChips.meta.js

@@ -0,0 +1,55 @@
+export const sgMeta = {
+    version: "0.1",
+    componentId: "form.input.multiselectchips",
+    package: "@seedgrid/fe-components",
+    exportName: "SgMultiSelectChips",
+    slug: "sg-multi-select-chips",
+    displayName: "SgMultiSelectChips",
+    category: "input",
+    subcategory: "multiselect",
+    description: "Variante do multi-select onde os itens selecionados viram chips removiveis no trigger; o dropdown com checkboxes e a busca sao iguais ao SgMultiSelect.",
+    tags: ["form", "multiselect", "chips", "tags", "checkbox", "rhf"],
+    capabilities: ["multi-selection", "chips", "search", "clearable", "max-selected", "keyboard"],
+    fieldSemantics: ["structuredChoice", "multiChoice", "tags", "categories"],
+    props: [
+        { name: "id", type: "string", required: true, description: "Identificador unico do campo.", semanticRole: "data", bindable: false },
+        { name: "label", type: "string", description: "Rotulo exibido ao usuario.", semanticRole: "label", bindable: true },
+        { name: "options", type: "{ label: string; value: string | number; disabled?: boolean }[]", description: "Lista de opcoes disponiveis.", semanticRole: "data", bindable: false },
+        { name: "value", type: "(string | number)[]", description: "Array de valores selecionados.", semanticRole: "value", bindable: true },
+        { name: "onChange", type: "(value: (string | number)[]) => void", description: "Callback com o array atualizado de valores.", semanticRole: "event", bindable: false },
+        { name: "searchable", type: "boolean", default: false, description: "Exibe campo de busca no topo do dropdown.", semanticRole: "behavior", bindable: true },
+        { name: "clearable", type: "boolean", default: false, description: "Exibe botao para limpar toda a selecao.", semanticRole: "behavior", bindable: true },
+        { name: "maxSelected", type: "number", description: "Limite maximo de itens selecionaveis.", semanticRole: "validation", bindable: true },
+        { name: "placeholder", type: "string", description: "Texto exibido quando nada esta selecionado.", semanticRole: "label", bindable: true },
+        { name: "required", type: "boolean", default: false, description: "Marca o campo como obrigatorio.", semanticRole: "validation", bindable: true },
+        { name: "onEnter", type: "() => void", description: "Disparado ao focar o campo.", semanticRole: "event", bindable: false },
+        { name: "onExit", type: "() => void", description: "Disparado ao sair do campo.", semanticRole: "event", bindable: false }
+    ],
+    states: ["default", "focused", "open", "disabled", "error"],
+    showcase: { route: "/components/sg-multi-select-chips", hasPlayground: false, hasPropsTable: true },
+    sdui: {
+        rendererType: "field.multiselectchips",
+        acceptsDataBinding: true,
+        defaultProps: { searchable: false, clearable: false }
+    }
+};
+export const aiHints = {
+    version: "0.1",
+    preferredUseCases: [
+        "Selecao de varias opcoes onde e util ver e remover cada item escolhido individualmente (ex.: tags, destinatarios, empresas).",
+        "Filtros multi-valor em que o usuario precisa enxergar tudo o que ja selecionou.",
+        "Campos relacionais N:N em formularios CRUD com poucos itens visiveis por vez."
+    ],
+    avoidUseCases: [
+        "Escolha unica; nesses casos prefira SgCombobox ou SgRadioGroup.",
+        "Selecoes muito numerosas onde os chips ocupariam espaco demais; nesses casos prefira SgMultiSelect (resumo 'N selecionadas').",
+        "Listas com busca remota assincrona; nesses casos prefira SgAutocomplete."
+    ],
+    synonyms: ["multi select chips", "multiselect tags", "selecao multipla com chips", "tag input select", "chips dropdown"],
+    relatedEntityFields: ["empresas", "categorias", "tags", "permissoes", "roles", "destinatarios"],
+    compositionHints: [
+        "Usar dentro de SgPanel ou SgGroupBox em formularios.",
+        "Preferir a SgMultiSelect quando o numero de selecoes for grande e os chips poluirem o layout."
+    ],
+    rankingSignals: { freeText: 0.1, structuredChoice: 0.95, date: 0, number: 0, denseLayout: 0.6 }
+};

package/dist/inputs/SgMultiSelectDropdown.d.ts

@@ -0,0 +1,28 @@
+import React from "react";
+import type { SgMultiSelectOption, SgMultiSelectOptionValue } from "./useSgMultiSelect";
+export type SgMultiSelectDropdownProps = {
+    dropdownRef: React.RefObject<HTMLDivElement | null>;
+    searchRef: React.RefObject<HTMLInputElement | null>;
+    ignoreBlurRef: React.MutableRefObject<boolean>;
+    dropdownStyle: React.CSSProperties;
+    searchable: boolean;
+    searchPlaceholder?: string;
+    query: string;
+    setQuery: (value: string) => void;
+    setActiveIndex: (index: number) => void;
+    activeIndex: number;
+    visibleOptions: SgMultiSelectOption[];
+    emptyText: string;
+    isSelected: (value: SgMultiSelectOptionValue) => boolean;
+    resolvedValueLength: number;
+    maxSelected?: number;
+    toggleOption: (option: SgMultiSelectOption) => void;
+    onKeyDown: (event: React.KeyboardEvent) => void;
+};
+/**
+ * Dropdown compartilhado por SgMultiSelect e SgMultiSelectChips: lista de
+ * opcoes com checkbox, busca opcional, scroll e marcacao. Mantem a lista
+ * aberta enquanto o usuario marca/desmarca.
+ */
+export declare function SgMultiSelectDropdown(props: Readonly<SgMultiSelectDropdownProps>): React.ReactPortal | null;
+//# sourceMappingURL=SgMultiSelectDropdown.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SgMultiSelectDropdown.d.ts","sourceRoot":"","sources":["../../src/inputs/SgMultiSelectDropdown.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EAAE,mBAAmB,EAAE,wBAAwB,EAAE,MAAM,oBAAoB,CAAC;AAExF,MAAM,MAAM,0BAA0B,GAAG;IACvC,WAAW,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACpD,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAC;IACpD,aAAa,EAAE,KAAK,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAC/C,aAAa,EAAE,KAAK,CAAC,aAAa,CAAC;IACnC,UAAU,EAAE,OAAO,CAAC;IACpB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,mBAAmB,EAAE,CAAC;IACtC,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,CAAC,KAAK,EAAE,wBAAwB,KAAK,OAAO,CAAC;IACzD,mBAAmB,EAAE,MAAM,CAAC;IAC5B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,CAAC,MAAM,EAAE,mBAAmB,KAAK,IAAI,CAAC;IACpD,SAAS,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,KAAK,IAAI,CAAC;CACjD,CAAC;AAEF;;;;GAIG;AACH,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,QAAQ,CAAC,0BAA0B,CAAC,4BAiFhF"}

package/dist/inputs/SgMultiSelectDropdown.js

@@ -0,0 +1,41 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+import { Check } from "lucide-react";
+import { t, useComponentsI18n } from "../i18n";
+/**
+ * Dropdown compartilhado por SgMultiSelect e SgMultiSelectChips: lista de
+ * opcoes com checkbox, busca opcional, scroll e marcacao. Mantem a lista
+ * aberta enquanto o usuario marca/desmarca.
+ */
+export function SgMultiSelectDropdown(props) {
+    const i18n = useComponentsI18n();
+    if (typeof document === "undefined")
+        return null;
+    return createPortal(_jsxs("div", { ref: props.dropdownRef, className: "z-[1100] overflow-hidden rounded-md border border-border bg-[rgb(var(--sg-surface,var(--sg-bg)))] text-[rgb(var(--sg-text,var(--sg-fg)))] shadow-lg", style: props.dropdownStyle, role: "listbox", "aria-multiselectable": "true", onKeyDown: props.onKeyDown, children: [props.searchable ? (_jsx("div", { className: "border-b border-border p-2", children: _jsx("input", { ref: props.searchRef, type: "text", value: props.query, placeholder: props.searchPlaceholder ?? t(i18n, "components.actions.search"), className: "h-8 w-full rounded border border-border bg-[var(--sg-input-bg,hsl(var(--background)))] px-2 text-sm text-[var(--sg-input-fg,hsl(var(--foreground)))] focus:outline-none focus:ring-2 focus:ring-[hsl(var(--primary)/0.25)]", onChange: (event) => {
+                        props.setQuery(event.currentTarget.value);
+                        props.setActiveIndex(0);
+                    }, onMouseDown: () => {
+                        props.ignoreBlurRef.current = true;
+                    } }) })) : null, _jsx("div", { className: "max-h-64 overflow-auto py-1", children: props.visibleOptions.length === 0 ? (_jsx("div", { className: "px-3 py-2 text-sm text-muted-foreground", children: props.emptyText })) : (props.visibleOptions.map((option, index) => {
+                    const checked = props.isSelected(option.value);
+                    const isActive = props.activeIndex === index;
+                    const reachedMax = !checked &&
+                        props.maxSelected !== undefined &&
+                        props.resolvedValueLength >= props.maxSelected;
+                    const optionDisabled = option.disabled || reachedMax;
+                    return (_jsxs("div", { role: "option", "aria-selected": checked, className: [
+                            "flex cursor-pointer items-center gap-2 px-3 py-2 text-sm",
+                            isActive ? "bg-muted/60" : "",
+                            optionDisabled ? "cursor-not-allowed opacity-50" : "hover:bg-muted/40"
+                        ].join(" "), onMouseEnter: () => props.setActiveIndex(index), onMouseDown: (event) => {
+                            event.preventDefault();
+                            props.ignoreBlurRef.current = true;
+                        }, onClick: () => props.toggleOption(option), children: [_jsx("span", { "aria-hidden": "true", className: [
+                                    "flex h-4 w-4 shrink-0 items-center justify-center rounded border",
+                                    checked
+                                        ? "border-[hsl(var(--primary))] bg-[hsl(var(--primary))] text-[hsl(var(--primary-foreground))]"
+                                        : "border-border bg-[var(--sg-input-bg,hsl(var(--background)))]"
+                                ].join(" "), children: checked ? _jsx(Check, { size: 12, strokeWidth: 3 }) : null }), _jsx("span", { className: "truncate", children: option.label })] }, String(option.value)));
+                })) })] }), document.body);
+}

package/dist/inputs/useSgMultiSelect.d.ts

@@ -0,0 +1,48 @@
+import React from "react";
+export type SgMultiSelectOptionValue = string | number;
+export type SgMultiSelectOption = {
+    label: string;
+    value: SgMultiSelectOptionValue;
+    disabled?: boolean;
+};
+export declare function valueEquals(left: SgMultiSelectOptionValue, right: SgMultiSelectOptionValue): boolean;
+export type UseSgMultiSelectParams = {
+    options: SgMultiSelectOption[];
+    value?: SgMultiSelectOptionValue[];
+    onChange?: (value: SgMultiSelectOptionValue[]) => void;
+    searchable?: boolean;
+    maxSelected?: number;
+    isDisabled: boolean;
+    borderRadius?: number | string;
+};
+/**
+ * Logica compartilhada entre SgMultiSelect e SgMultiSelectChips: estado de
+ * abertura, selecao, busca, posicionamento do dropdown via portal e navegacao
+ * por teclado. Os componentes apenas renderizam o trigger e reaproveitam o
+ * dropdown a partir do que este hook expoe.
+ */
+export declare function useSgMultiSelect(params: UseSgMultiSelectParams): {
+    readonly wrapperRef: React.RefObject<HTMLDivElement | null>;
+    readonly inputRef: React.RefObject<HTMLInputElement | null>;
+    readonly dropdownRef: React.RefObject<HTMLDivElement | null>;
+    readonly searchRef: React.RefObject<HTMLInputElement | null>;
+    readonly ignoreBlurRef: React.RefObject<boolean>;
+    readonly open: boolean;
+    readonly activeIndex: number;
+    readonly query: string;
+    readonly dropdownStyle: React.CSSProperties;
+    readonly resolvedValue: SgMultiSelectOptionValue[];
+    readonly selectedLabels: string[];
+    readonly selectedOptions: SgMultiSelectOption[];
+    readonly visibleOptions: SgMultiSelectOption[];
+    readonly setQuery: React.Dispatch<React.SetStateAction<string>>;
+    readonly setActiveIndex: React.Dispatch<React.SetStateAction<number>>;
+    readonly isSelected: (optionValue: SgMultiSelectOptionValue) => boolean;
+    readonly toggleOption: (option: SgMultiSelectOption) => void;
+    readonly removeValue: (optionValue: SgMultiSelectOptionValue) => void;
+    readonly clearSelection: () => void;
+    readonly closeDropdown: () => void;
+    readonly openDropdown: () => void;
+    readonly handleListKeyDown: (event: React.KeyboardEvent) => void;
+};
+//# sourceMappingURL=useSgMultiSelect.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useSgMultiSelect.d.ts","sourceRoot":"","sources":["../../src/inputs/useSgMultiSelect.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,MAAM,wBAAwB,GAAG,MAAM,GAAG,MAAM,CAAC;AAEvD,MAAM,MAAM,mBAAmB,GAAG;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,wBAAwB,CAAC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,wBAAgB,WAAW,CAAC,IAAI,EAAE,wBAAwB,EAAE,KAAK,EAAE,wBAAwB,WAE1F;AAED,MAAM,MAAM,sBAAsB,GAAG;IACnC,OAAO,EAAE,mBAAmB,EAAE,CAAC;IAC/B,KAAK,CAAC,EAAE,wBAAwB,EAAE,CAAC;IACnC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,wBAAwB,EAAE,KAAK,IAAI,CAAC;IACvD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAChC,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAAC,MAAM,EAAE,sBAAsB;;;;;;;;;;;;;;;;uCAyB7C,wBAAwB;oCA6C7B,mBAAmB;wCAgBd,wBAAwB;;;;wCA4E9B,KAAK,CAAC,aAAa;EAiE9B"}

package/dist/inputs/useSgMultiSelect.js

@@ -0,0 +1,202 @@
+"use client";
+import React from "react";
+export function valueEquals(left, right) {
+    return String(left) === String(right);
+}
+/**
+ * Logica compartilhada entre SgMultiSelect e SgMultiSelectChips: estado de
+ * abertura, selecao, busca, posicionamento do dropdown via portal e navegacao
+ * por teclado. Os componentes apenas renderizam o trigger e reaproveitam o
+ * dropdown a partir do que este hook expoe.
+ */
+export function useSgMultiSelect(params) {
+    const { options, value, onChange, searchable = false, maxSelected, isDisabled, borderRadius } = params;
+    const isControlled = value !== undefined;
+    const wrapperRef = React.useRef(null);
+    const inputRef = React.useRef(null);
+    const dropdownRef = React.useRef(null);
+    const searchRef = React.useRef(null);
+    const ignoreBlurRef = React.useRef(false);
+    const [open, setOpen] = React.useState(false);
+    const [internalValue, setInternalValue] = React.useState([]);
+    const [activeIndex, setActiveIndex] = React.useState(-1);
+    const [query, setQuery] = React.useState("");
+    const [dropdownStyle, setDropdownStyle] = React.useState({});
+    const resolvedBorderRadius = React.useMemo(() => {
+        if (borderRadius === undefined)
+            return undefined;
+        return typeof borderRadius === "number" ? `${borderRadius}px` : borderRadius;
+    }, [borderRadius]);
+    const resolvedValue = isControlled ? (value ?? []) : internalValue;
+    const isSelected = React.useCallback((optionValue) => resolvedValue.some((entry) => valueEquals(entry, optionValue)), [resolvedValue]);
+    const visibleOptions = React.useMemo(() => {
+        if (!searchable || !query.trim())
+            return options;
+        const normalized = query.trim().toLowerCase();
+        return options.filter((option) => option.label.toLowerCase().includes(normalized));
+    }, [options, query, searchable]);
+    const selectedLabels = React.useMemo(() => {
+        return resolvedValue
+            .map((entry) => options.find((option) => valueEquals(option.value, entry))?.label)
+            .filter((label) => Boolean(label));
+    }, [options, resolvedValue]);
+    const selectedOptions = React.useMemo(() => {
+        return resolvedValue
+            .map((entry) => options.find((option) => valueEquals(option.value, entry)))
+            .filter((option) => Boolean(option));
+    }, [options, resolvedValue]);
+    const setSelectedValue = React.useCallback((nextValue) => {
+        if (!isControlled) {
+            setInternalValue(nextValue);
+        }
+        onChange?.(nextValue);
+    }, [isControlled, onChange]);
+    const closeDropdown = React.useCallback(() => {
+        setOpen(false);
+        setActiveIndex(-1);
+        setQuery("");
+    }, []);
+    const openDropdown = React.useCallback(() => {
+        if (isDisabled)
+            return;
+        setOpen(true);
+    }, [isDisabled]);
+    const toggleOption = React.useCallback((option) => {
+        if (option.disabled)
+            return;
+        const already = resolvedValue.some((entry) => valueEquals(entry, option.value));
+        if (already) {
+            setSelectedValue(resolvedValue.filter((entry) => !valueEquals(entry, option.value)));
+            return;
+        }
+        if (maxSelected !== undefined && resolvedValue.length >= maxSelected) {
+            return;
+        }
+        setSelectedValue([...resolvedValue, option.value]);
+    }, [maxSelected, resolvedValue, setSelectedValue]);
+    const removeValue = React.useCallback((optionValue) => {
+        setSelectedValue(resolvedValue.filter((entry) => !valueEquals(entry, optionValue)));
+    }, [resolvedValue, setSelectedValue]);
+    const clearSelection = React.useCallback(() => {
+        setSelectedValue([]);
+    }, [setSelectedValue]);
+    const syncDropdownPosition = React.useCallback(() => {
+        const anchor = wrapperRef.current?.querySelector("input") ?? inputRef.current ?? wrapperRef.current;
+        if (!anchor)
+            return;
+        const rect = anchor.getBoundingClientRect();
+        setDropdownStyle({
+            position: "fixed",
+            top: rect.bottom + 4,
+            left: rect.left,
+            minWidth: rect.width,
+            width: rect.width,
+            maxWidth: "min(32rem, calc(100vw - 24px))",
+            borderRadius: resolvedBorderRadius
+        });
+    }, [resolvedBorderRadius]);
+    React.useEffect(() => {
+        if (!open)
+            return;
+        const handleOutside = (event) => {
+            if (wrapperRef.current?.contains(event.target))
+                return;
+            if (dropdownRef.current?.contains(event.target))
+                return;
+            closeDropdown();
+        };
+        document.addEventListener("mousedown", handleOutside);
+        return () => document.removeEventListener("mousedown", handleOutside);
+    }, [closeDropdown, open]);
+    React.useEffect(() => {
+        if (!open)
+            return;
+        syncDropdownPosition();
+        const handleLayoutChange = () => {
+            syncDropdownPosition();
+        };
+        window.addEventListener("resize", handleLayoutChange);
+        window.addEventListener("scroll", handleLayoutChange, true);
+        return () => {
+            window.removeEventListener("resize", handleLayoutChange);
+            window.removeEventListener("scroll", handleLayoutChange, true);
+        };
+    }, [open, syncDropdownPosition]);
+    React.useEffect(() => {
+        if (!open) {
+            return;
+        }
+        if (searchable && searchRef.current) {
+            searchRef.current.focus();
+        }
+        setActiveIndex(visibleOptions.length > 0 ? 0 : -1);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [open, searchable]);
+    React.useEffect(() => {
+        if (!open)
+            return;
+        if (activeIndex >= visibleOptions.length) {
+            setActiveIndex(visibleOptions.length - 1);
+        }
+    }, [activeIndex, open, visibleOptions.length]);
+    const handleListKeyDown = React.useCallback((event) => {
+        if (isDisabled)
+            return;
+        if (event.key === "Escape") {
+            event.preventDefault();
+            closeDropdown();
+            inputRef.current?.focus();
+            return;
+        }
+        if (event.key === "Tab") {
+            closeDropdown();
+            return;
+        }
+        if (event.key === "ArrowDown") {
+            event.preventDefault();
+            setActiveIndex((prev) => Math.min(prev + 1, visibleOptions.length - 1));
+            return;
+        }
+        if (event.key === "ArrowUp") {
+            event.preventDefault();
+            setActiveIndex((prev) => Math.max(prev - 1, 0));
+            return;
+        }
+        if (event.key === "Enter" || event.key === " ") {
+            if (activeIndex < 0)
+                return;
+            const option = visibleOptions[activeIndex];
+            if (!option)
+                return;
+            event.preventDefault();
+            toggleOption(option);
+        }
+    }, [activeIndex, closeDropdown, isDisabled, toggleOption, visibleOptions]);
+    return {
+        // refs
+        wrapperRef,
+        inputRef,
+        dropdownRef,
+        searchRef,
+        ignoreBlurRef,
+        // state
+        open,
+        activeIndex,
+        query,
+        dropdownStyle,
+        resolvedValue,
+        selectedLabels,
+        selectedOptions,
+        visibleOptions,
+        // setters / actions
+        setQuery,
+        setActiveIndex,
+        isSelected,
+        toggleOption,
+        removeValue,
+        clearSelection,
+        closeDropdown,
+        openDropdown,
+        handleListKeyDown
+    };
+}