@seedgrid/fe-components 2026.6.7 → 2026.7.0

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
+    };
+}

package/dist/layout/SgMenu.d.ts.map

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

package/dist/layout/SgMenu.js

@@ -826,7 +826,7 @@ export function SgMenu(props) {
                     if (menuStyle === "hybrid" && next)
                         setDrawerOpen(false);
                 }, "aria-label": pinnedState ? t(i18n, "components.menu.unpin") : t(i18n, "components.menu.pin"), className: cn("inline-flex size-8 shrink-0 items-center justify-center rounded-md border border-border", "bg-background hover:bg-muted/60", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/35"), children: _jsx(PinIcon, { pinned: pinnedState }) })) : null, !collapseOnLeft ? collapseButton : null] })) : null;
-    const shellContentArea = (_jsxs(_Fragment, { children: [searchEnabled && !isCollapsed ? (_jsx("div", { className: cn("border-b border-border", densityCfg.section), children: _jsx(SgAutocomplete, { id: `${searchInputId}-menu-search`, label: search?.placeholder ?? t(i18n, "components.actions.search"), placeholder: search?.placeholder ?? t(i18n, "components.actions.search"), value: searchValue, onChange: setSearchValue, source: autocompleteSource, minLengthForSearch: 0, openOnFocus: true, showDropDownButton: true, clearOnSelect: true, grouped: true, onSelect: (item) => {
+    const shellContentArea = (_jsxs(_Fragment, { children: [searchEnabled && !isCollapsed ? (_jsx("div", { className: cn("border-b border-border", densityCfg.section), children: _jsx(SgAutocomplete, { id: `${searchInputId}-menu-search`, label: search?.placeholder ?? t(i18n, "components.actions.search"), placeholder: search?.placeholder ?? t(i18n, "components.actions.search"), value: searchValue, onChange: setSearchValue, source: autocompleteSource, allowCustomValue: true, minLengthForSearch: 0, openOnFocus: true, showDropDownButton: true, clearOnSelect: true, grouped: true, onSelect: (item) => {
                         const nodeId = item.data?.nodeId;
                         if (!nodeId)
                             return;