@cwellt_software/cwellt-reactjs-lib 1.5.3 → 1.5.5

package/dist/index.cjs.js

@@ -113,13 +113,27 @@ function colorToHSL(color) {
         l: Math.round(l * 100)
     };
 }
+const HEX_CACHE_LIMIT = 500;
+const hexCache = new Map();
+let canvasContext = null;
 function colorToHEX(color) {
-    const canvas = document.createElement('canvas');
-    const context = canvas.getContext('2d');
-    if (!context)
-        throw new Error('Could not create canvas context');
-    context.fillStyle = color;
-    return context.fillStyle;
+    const cached = hexCache.get(color);
+    if (cached !== undefined)
+        return cached;
+    if (!canvasContext) {
+        canvasContext = document.createElement('canvas').getContext('2d');
+        if (!canvasContext)
+            throw new Error('Could not create canvas context');
+    }
+    // A reused context keeps its previous fillStyle when the new color is invalid; reset it to the
+    // fresh-canvas default so an invalid color still gives black instead of the last valid color.
+    canvasContext.fillStyle = '#000000';
+    canvasContext.fillStyle = color;
+    const hex = canvasContext.fillStyle;
+    if (hexCache.size >= HEX_CACHE_LIMIT)
+        hexCache.clear();
+    hexCache.set(color, hex);
+    return hex;
 }
 function getHSLColor(color, alpha = 1) {
     const hsl = colorToHSL(color);
@@ -4986,21 +5000,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 +5033,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 +5045,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 +5072,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 +5100,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) {
@@ -9003,18 +9031,16 @@ const getNow$1 = (isUtc) => {
     return now;
 };
 const TimeLine = ({ left, top = "0px", height, color, width = "2px", zIndexNumber = 0, isHeader, isUtc = false }) => {
-    const [currentTime, setCurrentTime] = React.useState(getNow$1(isUtc));
+    const [currentTime, setCurrentTime] = React.useState(() => getNow$1(isUtc));
     React.useEffect(() => {
+        if (!isHeader) {
+            return;
+        }
         const interval = setInterval(() => {
             setCurrentTime(getNow$1(isUtc));
-        }, 60000); // Actualiza cada minuto
+        }, 60000);
         return () => clearInterval(interval);
-    }, [isUtc]);
-    const timeString = currentTime.toLocaleTimeString([], {
-        hour: '2-digit',
-        minute: '2-digit',
-        hour12: false
-    });
+    }, [isUtc, isHeader]);
     return (jsxRuntime.jsx("div", { style: {
             position: "absolute",
             top: top,
@@ -9026,7 +9052,11 @@ const TimeLine = ({ left, top = "0px", height, color, width = "2px", zIndexNumbe
             zIndex: zIndexNumber,
         }, className: styles$3["scheduler-timeline-now"], children: isHeader && (jsxRuntime.jsx("span", { style: {
                 color: color,
-            }, className: styles$3["scheduler-timeline-label"], children: timeString })) }));
+            }, className: styles$3["scheduler-timeline-label"], children: currentTime.toLocaleTimeString([], {
+                hour: '2-digit',
+                minute: '2-digit',
+                hour12: false
+            }) })) }));
 };
 
 function isToday(startDate, endDate) {
@@ -9221,7 +9251,7 @@ const eventsCollide = (event1, event2) => {
     return eventInsideOther || eventCollideStart || eventCollideEnd;
 };
 // Function to separate events into non-colliding rows
-const separateEventsToInnerRows = (events) => {
+const computeInnerRows = (events) => {
     const sortedEvents = [...events].sort((a, b) => {
         const aOrder = a.order ?? Number.MAX_SAFE_INTEGER;
         const bOrder = b.order ?? Number.MAX_SAFE_INTEGER;
@@ -9246,15 +9276,44 @@ const separateEventsToInnerRows = (events) => {
     }
     return rows;
 };
+// The scheduler asks for the same row's lanes several times per repaint (total height, virtual-list
+// item size, row render). Row event arrays keep their identity until their events change, so the
+// array itself is the cache key.
+const innerRowsCache = new WeakMap();
+const separateEventsToInnerRows = (events) => {
+    const cached = innerRowsCache.get(events);
+    if (cached) {
+        return cached;
+    }
+    const rows = computeInnerRows(events);
+    innerRowsCache.set(events, rows);
+    return rows;
+};
 
 const DivisionLine = ({ left, top = "0px", height, isDayBoundary }) => {
-    const color = isDayBoundary ? "rgba(255,255,255,1)" : "rgba(255,255,255,0.8)";
-    const width = isDayBoundary ? "2px" : "1px";
-    return (jsxRuntime.jsx(TimeLine, { color: color, left: left + "%", height: height, width: width, top: top }));
+    return (jsxRuntime.jsx("div", { style: {
+            position: "absolute",
+            top: top,
+            height: height,
+            left: left + "%",
+            width: isDayBoundary ? "2px" : "1px",
+            background: isDayBoundary ? "rgba(255,255,255,1)" : "rgba(255,255,255,0.8)",
+            pointerEvents: "none",
+            zIndex: 0,
+        } }));
 };
 
 const WeekEndLine = ({ left, top = "0px", height, widthPercentage }) => {
-    return (jsxRuntime.jsx(TimeLine, { color: "rgba(0,0,0,0.05)", left: left + "%", height: height, width: widthPercentage + "%", top: top }));
+    return (jsxRuntime.jsx("div", { style: {
+            position: "absolute",
+            top: top,
+            height: height,
+            left: left + "%",
+            width: widthPercentage + "%",
+            background: "rgba(0,0,0,0.05)",
+            pointerEvents: "none",
+            zIndex: 0,
+        } }));
 };
 
 var styles$1 = {"scheduler-row-header":"scheduler-row-module__scheduler-row-header__S-iv4"};