@cwellt_software/cwellt-reactjs-lib 1.5.3 → 1.5.4

package/dist/index.es.js

@@ -4966,21 +4966,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] = useState("");
     const [isPanelOpen, setIsPanelOpen] = useState(false);
     const [selectedCategory, setSelectedCategory] = useState("All");
+    // True once the user touches the current opening (any category click or a search); gates the cascade.
+    const [hasInteracted, setHasInteracted] = useState(false);
     const componentRef = useRef(null);
     const inputRef = useRef(null);
     const wrapperRef = 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.
     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 => {
@@ -4991,6 +4999,9 @@ const CwMultiFilter = ({ allTags, id, onChangeSelectedTags, selectedTags, placeh
         return categoriesMap;
     };
     const displayTags = useMemo(() => {
+        if (initialTagVisibility === "afterCategoryOrSearch" && !hasInteracted) {
+            return [];
+        }
         let tags = Array.from(allTags);
         if (selectedCategory !== "All") {
             tags = tags.filter(t => t.Category === selectedCategory);
@@ -5000,8 +5011,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) => {
@@ -5026,6 +5038,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) => {
@@ -5052,7 +5066,7 @@ const CwMultiFilter = ({ allTags, id, onChangeSelectedTags, selectedTags, placeh
             inputRef.current?.focus();
         }
     };
-    return (jsxs("form", { ref: componentRef, id: id, className: `${styles$b["cw-multi-filter"]}${className ? ` ${className}` : ""}`, style: style, onSubmit: (e) => {
+    return (jsxs("form", { ref: componentRef, id: id, "data-testid": testId, className: `${styles$b["cw-multi-filter"]}${className ? ` ${className}` : ""}`, style: style, onSubmit: (e) => {
             e.preventDefault();
         }, children: [jsxs("div", { onClick: handleDivClick, ref: wrapperRef, className: styles$b["cw-multi-filter-search"], style: isPanelOpen ? { outline: "1px solid var(--cw-color-outline-variant)" } : {}, children: [jsxs("ul", { id: id + "_selected_filters", children: [Array.from(selectedTags).map(tag => (createElement(CwMultiFilterTag, { ...tag, key: tag.ID, Selectable: false, Removable: true, OnRemove: () => removeTag(tag.ID) }))), 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) {

package/dist/src/components/control/action/button/CwButton.stories.d.ts

@@ -0,0 +1,28 @@
+import type { StoryObj } from "@storybook/react-vite";
+declare const meta: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<import("./CwButton").CwButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+    args: {
+        text: string;
+        variant: "solid";
+        color: "primary";
+        size: "medium";
+        icon: string;
+        disabled: false;
+    };
+    argTypes: {
+        onClick: {
+            action: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+/** Square button with the icon alone; the tooltip carries the label. Shown at rest and pressed. */
+export declare const IconOnly: Story;
+/** The badge overlays the top-right corner of any variant. */
+export declare const WithBadge: Story;
+/** Every variant crossed with every color, at the selected size. */
+export declare const Matrix: Story;
+//# sourceMappingURL=CwButton.stories.d.ts.map

package/dist/src/components/control/action/button/CwButton.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CwButton.stories.d.ts","sourceRoot":"","sources":["../../../../../../src/components/control/action/button/CwButton.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAM5D,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;CAcuB,CAAC;AAElC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,mGAAmG;AACnG,eAAO,MAAM,QAAQ,EAAE,KAStB,CAAC;AAEF,8DAA8D;AAC9D,eAAO,MAAM,SAAS,EAAE,KAEvB,CAAC;AAEF,oEAAoE;AACpE,eAAO,MAAM,MAAM,EAAE,KAoBpB,CAAC"}

package/dist/src/components/control/choice/multi-filter/CwMultiFilter.d.ts

@@ -16,6 +16,17 @@ export interface CwMultiFilterProps {
     /** Additional CSS class for the container */
     className?: string;
     style?: React.CSSProperties;
+    /** `data-testid` on the root `<form>`, for e2e/Selenium anchoring. */
+    testId?: string;
+    /**
+     * Tag list shown when the panel opens.
+     * - `"all"` (default): the full list shows immediately.
+     * - `"afterCategoryOrSearch"`: the list opens empty until the user's first interaction (any
+     *   category button, ALL CATEGORIES included, or a search term), then stays visible until the
+     *   panel is closed and reopened. Category buttons stay visible throughout. Useful when one
+     *   category holds a directory large enough to overload the panel.
+     */
+    initialTagVisibility?: "all" | "afterCategoryOrSearch";
 }
 /**
  * A multiple filter selector, a MULTI-SELECT even. Allows users to select and filter items based on tags.

package/dist/src/components/control/choice/multi-filter/CwMultiFilter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CwMultiFilter.d.ts","sourceRoot":"","sources":["../../../../../../src/components/control/choice/multi-filter/CwMultiFilter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,EAAwC,MAAM,OAAO,CAAC;AAIxE,OAAO,EAAoB,qBAAqB,EAAE,KAAK,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AAGpH,MAAM,WAAW,kBAAkB;IAClC,qDAAqD;IACrD,EAAE,EAAE,MAAM,CAAC;IACX,sGAAsG;IACtG,oBAAoB,EAAE,CAAC,YAAY,EAAE,GAAG,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IACrE,uCAAuC;IACvC,OAAO,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAC;IAChC,4CAA4C;IAC5C,YAAY,EAAE,GAAG,CAAC,qBAAqB,CAAC,CAAC;IACzC,4CAA4C;IAC5C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,4CAA4C;IAC5C,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0IG;AACH,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CA0OhD,CAAC"}
+{"version":3,"file":"CwMultiFilter.d.ts","sourceRoot":"","sources":["../../../../../../src/components/control/choice/multi-filter/CwMultiFilter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,EAAwC,MAAM,OAAO,CAAC;AAIxE,OAAO,EAAoB,qBAAqB,EAAE,KAAK,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AAGpH,MAAM,WAAW,kBAAkB;IAClC,qDAAqD;IACrD,EAAE,EAAE,MAAM,CAAC;IACX,sGAAsG;IACtG,oBAAoB,EAAE,CAAC,YAAY,EAAE,GAAG,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IACrE,uCAAuC;IACvC,OAAO,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAC;IAChC,4CAA4C;IAC5C,YAAY,EAAE,GAAG,CAAC,qBAAqB,CAAC,CAAC;IACzC,4CAA4C;IAC5C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,4CAA4C;IAC5C,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,sEAAsE;IACtE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;;;;OAOG;IACH,oBAAoB,CAAC,EAAE,KAAK,GAAG,uBAAuB,CAAC;CACvD;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0IG;AACH,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CA0PhD,CAAC"}