@cwellt_software/cwellt-reactjs-lib 1.5.3 → 1.5.4

package/dist/index.cjs.js

@@ -4986,21 +4986,29 @@ var styles$b = {"cw-multi-filter-catalog-container":"cw-multi-filter-module__cw-
  * @param {CwMultiFilterProps} props
  * @returns Set the `onChange` callback to a function to check for changes in the selected filters
  */
-const CwMultiFilter = ({ allTags, id, onChangeSelectedTags, selectedTags, placeholder = "Write to filter", allCategoriesLabel = "ALL CATEGORIES", className, style }) => {
+const CwMultiFilter = ({ allTags, id, onChangeSelectedTags, selectedTags, placeholder = "Write to filter", allCategoriesLabel = "ALL CATEGORIES", className, style, testId, initialTagVisibility = "all" }) => {
     const [inputTextValue, setInputTextValue] = React.useState("");
     const [isPanelOpen, setIsPanelOpen] = React.useState(false);
     const [selectedCategory, setSelectedCategory] = React.useState("All");
+    // True once the user touches the current opening (any category click or a search); gates the cascade.
+    const [hasInteracted, setHasInteracted] = React.useState(false);
     const componentRef = React.useRef(null);
     const inputRef = React.useRef(null);
     const wrapperRef = React.useRef(null);
     const { panelRef, panelStyle, renderPanel } = useDropdownPortal({
         anchorRef: wrapperRef,
         isOpen: isPanelOpen,
-        onClose: () => { setIsPanelOpen(false); setSelectedCategory("All"); setInputTextValue(""); },
+        onClose: () => setIsPanelOpen(false),
     });
+    // Single reset point for all transient panel state on close, whatever closed it - the clear-all
+    // button closes the panel directly and bypasses onClose, so resetting here covers every path.
     React.useEffect(() => {
-        // Outside-click is now handled by useDropdownPortal
-    }, []);
+        if (!isPanelOpen) {
+            setHasInteracted(false);
+            setSelectedCategory("All");
+            setInputTextValue("");
+        }
+    }, [isPanelOpen]);
     const categoriesMappedToTags = () => {
         const categoriesMap = new Map();
         allTags.forEach(tag => {
@@ -5011,6 +5019,9 @@ const CwMultiFilter = ({ allTags, id, onChangeSelectedTags, selectedTags, placeh
         return categoriesMap;
     };
     const displayTags = React.useMemo(() => {
+        if (initialTagVisibility === "afterCategoryOrSearch" && !hasInteracted) {
+            return [];
+        }
         let tags = Array.from(allTags);
         if (selectedCategory !== "All") {
             tags = tags.filter(t => t.Category === selectedCategory);
@@ -5020,8 +5031,9 @@ const CwMultiFilter = ({ allTags, id, onChangeSelectedTags, selectedTags, placeh
             tags = tags.filter(t => t.Name.replaceAll(" ", "").toLowerCase().includes(input));
         }
         return tags;
-    }, [allTags, selectedCategory, inputTextValue]);
+    }, [allTags, selectedCategory, inputTextValue, initialTagVisibility, hasInteracted]);
     const handleClickCategory = (category) => {
+        setHasInteracted(true);
         setSelectedCategory(category);
     };
     const rgbAString = (r, g, b) => {
@@ -5046,6 +5058,8 @@ const CwMultiFilter = ({ allTags, id, onChangeSelectedTags, selectedTags, placeh
     const handleInputText = (input) => {
         if (selectedCategory !== "All")
             setSelectedCategory("All");
+        if (input.trim() !== "")
+            setHasInteracted(true);
         setInputTextValue(input.trimStart());
     };
     const addTag = (newTag) => {
@@ -5072,7 +5086,7 @@ const CwMultiFilter = ({ allTags, id, onChangeSelectedTags, selectedTags, placeh
             inputRef.current?.focus();
         }
     };
-    return (jsxRuntime.jsxs("form", { ref: componentRef, id: id, className: `${styles$b["cw-multi-filter"]}${className ? ` ${className}` : ""}`, style: style, onSubmit: (e) => {
+    return (jsxRuntime.jsxs("form", { ref: componentRef, id: id, "data-testid": testId, className: `${styles$b["cw-multi-filter"]}${className ? ` ${className}` : ""}`, style: style, onSubmit: (e) => {
             e.preventDefault();
         }, children: [jsxRuntime.jsxs("div", { onClick: handleDivClick, ref: wrapperRef, className: styles$b["cw-multi-filter-search"], style: isPanelOpen ? { outline: "1px solid var(--cw-color-outline-variant)" } : {}, children: [jsxRuntime.jsxs("ul", { id: id + "_selected_filters", children: [Array.from(selectedTags).map(tag => (React.createElement(CwMultiFilterTag, { ...tag, key: tag.ID, Selectable: false, Removable: true, OnRemove: () => removeTag(tag.ID) }))), jsxRuntime.jsx("input", { type: "text", id: id + "_input", ref: inputRef, value: inputTextValue, spellCheck: false, onFocus: () => setIsPanelOpen(true), onChange: e => handleInputText(e.currentTarget.value), autoComplete: "off", placeholder: selectedTags.size === 0 ? placeholder : "", onKeyDown: e => {
                                     switch (e.key) {