@cwellt_software/cwellt-reactjs-lib 1.4.6 → 1.4.7

package/dist/index.cjs.js

@@ -1757,7 +1757,9 @@ var styles$n = {"card":"cw-card-module__card__HJUT0","clickable":"cw-card-module
 *   <p>This is the main content of the card.</p>
 * </CwCard>
 **/
-const CwCard = ({ id, title, subtitle, alignment = 'center', children, footer, onEdit, onDelete, extraActions, className = '', clickable = false, onClick, isLoading = false, disabled = false, style, chips = [], variant = "border", direction = "column", }) => {
+const CwCard = ({ id, title, subtitle, alignment = 'center', children, footer, onEdit, onDelete, extraActions, className = '', clickable = false, onClick, isLoading = false, disabled = false, style, chips = [], variant = "border", direction = "column", layout, }) => {
+    const resolvedDirection = layout?.direction ?? direction;
+    const resolvedAlign = layout?.align ?? (alignment === 'left' ? 'start' : 'center');
     // Construct class names using CSS modules
     const cardClassNames = [
         'cw-card',
@@ -1776,23 +1778,77 @@ const CwCard = ({ id, title, subtitle, alignment = 'center', children, footer, o
     // Determine if actions should be rendered
     const hasActions = onEdit || onDelete || extraActions;
     // Determine if header should be rendered
-    const hasHeader = title || subtitle || (hasActions && direction === "column");
+    const hasHeader = title || subtitle || (hasActions && resolvedDirection === "column");
     // Determine if chips should be rendered
     const hasChips = chips.length > 0;
     // Determine if footer should be rendered
-    const hasFooter = hasChips || footer || (hasActions && direction === "row");
+    const hasFooter = hasChips || footer || (hasActions && resolvedDirection === "row");
     // Actions component to reuse
     const ActionsComponent = hasActions && !disabled ? (jsxRuntime.jsxs("div", { className: styles$n.actions, children: [extraActions ?? null, onEdit && jsxRuntime.jsx(CwButton, { variant: "icon", icon: "edit", onClick: onEdit }), onDelete && jsxRuntime.jsx(CwButton, { variant: "icon", icon: "delete", color: "danger", onClick: onDelete })] })) : null;
     return (jsxRuntime.jsxs("div", { ...(id && { id }), className: cardClassNames, ...(style && { style }), ...(clickable && {
             role: 'button',
             tabIndex: 0,
             onClick: handleClick,
-        }), "data-variant": variant, "data-direction": direction, children: [hasHeader && (jsxRuntime.jsxs("header", { children: [(title || subtitle) && (jsxRuntime.jsxs("div", { className: styles$n.headerContent, "data-alignment": alignment, children: [title && jsxRuntime.jsx("h5", { children: title }), subtitle && jsxRuntime.jsx("strong", { children: subtitle })] })), direction === "column" && ActionsComponent] })), jsxRuntime.jsx("div", { className: styles$n.content, children: children }), hasFooter && (jsxRuntime.jsxs("footer", { children: [hasChips && (jsxRuntime.jsx("div", { className: styles$n.footerTags, children: chips.map((chip, index) => (jsxRuntime.jsx(CwChip, { label: chip.label, colorScheme: chip.colorScheme, className: styles$n.chip, ...(chip.customColor && { customColor: chip.customColor }), ...(chip.variant && { variant: chip.variant }), ...(chip.icon && { icon: chip.icon }) }, index))) })), footer && (jsxRuntime.jsx("div", { className: styles$n.footerContent, children: footer }))] })), direction === "row" && ActionsComponent, isLoading && (jsxRuntime.jsx("div", { className: styles$n.loadingOverlay, children: jsxRuntime.jsx(CwLoading, { isLoading: isLoading, size: "small" }) }))] }));
+        }), "data-variant": variant, "data-direction": resolvedDirection, children: [hasHeader && (jsxRuntime.jsxs("header", { children: [(title || subtitle) && (jsxRuntime.jsxs("div", { className: styles$n.headerContent, "data-align": resolvedAlign, children: [title && jsxRuntime.jsx("h5", { children: title }), subtitle && jsxRuntime.jsx("strong", { children: subtitle })] })), resolvedDirection === "column" && ActionsComponent] })), jsxRuntime.jsx("div", { className: styles$n.content, children: children }), hasFooter && (jsxRuntime.jsxs("footer", { children: [hasChips && (jsxRuntime.jsx("div", { className: styles$n.footerTags, children: chips.map((chip, index) => (jsxRuntime.jsx(CwChip, { label: chip.label, colorScheme: chip.colorScheme, className: styles$n.chip, ...(chip.customColor && { customColor: chip.customColor }), ...(chip.variant && { variant: chip.variant }), ...(chip.icon && { icon: chip.icon }) }, index))) })), footer && (jsxRuntime.jsx("div", { className: styles$n.footerContent, children: footer }))] })), resolvedDirection === "row" && ActionsComponent, isLoading && (jsxRuntime.jsx("div", { className: styles$n.loadingOverlay, children: jsxRuntime.jsx(CwLoading, { isLoading: isLoading, size: "small" }) }))] }));
 };
 
-var styles$m = {"cardContainer":"cw-card-list-module__cardContainer__l3YEh","pagination":"cw-card-list-module__pagination__5Ay78","pageInfo":"cw-card-list-module__pageInfo__uiMel","loading":"cw-card-list-module__loading__cYpND","emptyState":"cw-card-list-module__emptyState__RlqiS","sortControls":"cw-card-list-module__sortControls__mWgZA"};
+var styles$m = {"cardContainer":"cw-card-list-module__cardContainer__l3YEh","pagination":"cw-card-list-module__pagination__5Ay78","pageInfo":"cw-card-list-module__pageInfo__uiMel","loading":"cw-card-list-module__loading__cYpND","emptyState":"cw-card-list-module__emptyState__RlqiS"};
 
-function CwCardList({ items, renderCard, pageSize = 10, layout = 'grid', defaultCardWidth = 320, cardGap = 16, isLoading = false, emptyState, sortOptions = [], defaultSortKey, ...htmlProps }) {
+/**
+ * Option to display in the CwSelect
+ * @remarks
+ * Must be child of CwSelect
+ * @example
+ * <CwSelect>
+ *   <CwOption>A</CwOption>
+ *   <CwOption color="#4a90d9">Blue option</CwOption>
+ *   <CwOption>C</CwOption>
+ * </CwSelect>
+ */
+function CwOption(props) {
+    const { text, color, style, ...optionProps } = props;
+    const mergedStyle = color
+        ? { ...style, backgroundColor: color, color: getContrastColor(color) }
+        : style;
+    return (jsxRuntime.jsx("option", { className: "cw-option", style: mergedStyle, ...optionProps, children: optionProps.children ?? text }));
+}
+
+/**
+ * Input for selecting an option from a list
+ * @remarks
+ * ```txt
+ * CwIcon  CwLabel     CwSelect        CwButton
+ *  ↑      ↑           ↑               ↑
+ *              ╭────────────────────╮╭════╮
+ *  ⌂   Cat:    │  Choose a cat   ╲╱ │║ Ok ║
+ *              ╰────────────────────╯╰════╯
+ *              │ Orange             │ ← CwOption
+ *              ├────────────────────┤
+ *              │ Black              │ ← CwOption
+ *              ├────────────────────┤
+ *              │ White              │ ← CwOption
+ *              ╰────────────────────╯
+ * ```
+ * @example
+ * <CwSelect name="cat" iconProps={{iconId:"pet"}} labelProps={{children:"Cat:"}}>
+ *   <CwOption value="" > - Choose a cat - </CwOption>
+ *   <CwOption value="o" >Orange</CwOption>
+ *   <CwOption value="b" >Black</CwOption>
+ *   <CwOption value="w" >White</CwOption>
+ * </CwSelect>
+ */
+function CwSelect(props) {
+    const { alignProps, labelProps, buttonProps, iconProps, placeholder, feedback, children, style, className, ...selectProps } = props;
+    const feedbackMessages = feedback
+        ? Array.isArray(feedback) ? feedback : [feedback]
+        : [];
+    const flexDirection = alignProps?.flexDirection ?? "row";
+    const dataDirection = { 'data-direction': flexDirection };
+    const { backgroundColor, color: textColor, ...wrapperStyle } = style ?? {};
+    return (jsxRuntime.jsxs("div", { className: `cw-select${className ? ` ${className}` : ''}`, ...dataDirection, style: wrapperStyle, children: [jsxRuntime.jsxs(CwAlign, { ...alignProps, itemProp: selectProps.required === true ? "required" : "", children: [labelProps && (jsxRuntime.jsxs(CwLabel, { ...labelProps, children: [iconProps && jsxRuntime.jsx(CwIcon, { ...iconProps }), labelProps.text] })), jsxRuntime.jsxs("div", { className: "cw-flex-row cw-gap-small cw-flex-grow", children: [jsxRuntime.jsxs("select", { ...selectProps, style: backgroundColor ? { backgroundColor, color: textColor } : undefined, children: [placeholder && jsxRuntime.jsx(CwOption, { value: "", children: placeholder }), children] }), buttonProps && jsxRuntime.jsx(CwButton, { ...buttonProps })] })] }), feedbackMessages.map((feedbackItem, index) => (jsxRuntime.jsx("p", { className: "cw-input-info", "data-color": feedbackItem.type, children: feedbackItem.message }, index)))] }));
+}
+
+function CwCardList({ items, renderCard, pageSize = 10, layout = 'grid', defaultCardWidth = 320, cardGap = 16, isLoading = false, emptyState, sortOptions = [], defaultSortKey, keyExtractor, ...htmlProps }) {
     const [currentPage, setCurrentPage] = React.useState(1);
     const [sortKey, setSortKey] = React.useState(defaultSortKey || sortOptions[0]?.key || '');
     const [sortDirection, setSortDirection] = React.useState('asc');
@@ -1824,7 +1880,12 @@ function CwCardList({ items, renderCard, pageSize = 10, layout = 'grid', default
         '--card-width': `${defaultCardWidth}px`,
         '--card-gap': `${cardGap}px`
     };
-    return (jsxRuntime.jsxs("div", { ...htmlProps, children: [sortOptions.length > 0 && (jsxRuntime.jsxs("div", { className: styles$m.sortControls, children: [jsxRuntime.jsx("label", { htmlFor: "cardlist-sort-select", children: "Sort by:" }), jsxRuntime.jsx("select", { id: "cardlist-sort-select", value: sortKey, onChange: (e) => handleSortChange(e.target.value), className: styles$m.sortSelect, children: sortOptions.map(option => (jsxRuntime.jsx("option", { value: option.key, children: option.label }, option.key))) }), jsxRuntime.jsx("button", { onClick: () => setSortDirection(prev => prev === 'asc' ? 'desc' : 'asc'), className: `cw-button-icon ${sortDirection === 'asc' ? 'cwi-arrow-up' : 'cwi-arrow-down'}`, title: `Sort ${sortDirection === 'asc' ? 'descending' : 'ascending'}` })] })), isLoading ? (jsxRuntime.jsx("div", { className: styles$m.loading, children: jsxRuntime.jsx(CwLoading, { isLoading: isLoading }) })) : sortedItems.length === 0 ? (jsxRuntime.jsx("div", { className: styles$m.emptyState, children: emptyState || jsxRuntime.jsx("p", { children: "No items to display" }) })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: `${styles$m.cardContainer}`, "data-layout": layout, style: gridStyle, children: visibleItems.map((item, index) => (jsxRuntime.jsx("div", { className: styles$m.cardWrapper, children: renderCard(item, index) }, index))) }), totalPages > 1 && (jsxRuntime.jsxs("div", { className: styles$m.pagination, children: [jsxRuntime.jsx("button", { disabled: currentPage === 1, onClick: () => setCurrentPage(p => Math.max(1, p - 1)), className: "cw-button-icon cwi-chevron-left" }), jsxRuntime.jsxs("span", { className: styles$m.pageInfo, children: [currentPage, " of ", totalPages] }), jsxRuntime.jsx("button", { disabled: currentPage === totalPages, onClick: () => setCurrentPage(p => Math.min(totalPages, p + 1)), className: "cw-button-icon cwi-chevron-right" })] }))] }))] }));
+    return (jsxRuntime.jsxs("div", { ...htmlProps, children: [sortOptions.length > 0 && (jsxRuntime.jsx("header", { className: "cw-flex-row cw-align-right-center cw-margin-bottom-small", children: jsxRuntime.jsx(CwSelect, { labelProps: { text: 'Sort by:', labelWidth: "4rem" }, alignProps: { alignItems: 'center' }, buttonProps: {
+                        variant: 'icon',
+                        icon: sortDirection === 'asc' ? 'arrow-up' : 'arrow-down',
+                        onClick: () => setSortDirection(prev => prev === 'asc' ? 'desc' : 'asc'),
+                        title: `Sort ${sortDirection === 'asc' ? 'descending' : 'ascending'}`,
+                    }, value: sortKey, onChange: (e) => handleSortChange(e.target.value), children: sortOptions.map(option => (jsxRuntime.jsx(CwOption, { value: option.key, children: option.label }, option.key))) }) })), isLoading ? (jsxRuntime.jsx("div", { className: styles$m.loading, children: jsxRuntime.jsx(CwLoading, { isLoading: isLoading }) })) : sortedItems.length === 0 ? (jsxRuntime.jsx("div", { className: styles$m.emptyState, children: emptyState || jsxRuntime.jsx("p", { children: "No items to display" }) })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: `${styles$m.cardContainer}`, "data-layout": layout, style: gridStyle, children: visibleItems.map((item, index) => (jsxRuntime.jsx(React.Fragment, { children: renderCard(item, index) }, keyExtractor ? keyExtractor(item, index) : index))) }), totalPages > 1 && (jsxRuntime.jsxs("div", { className: styles$m.pagination, children: [jsxRuntime.jsx(CwButton, { variant: "icon", icon: "chevron-left", disabled: currentPage === 1, onClick: () => setCurrentPage(p => Math.max(1, p - 1)) }), jsxRuntime.jsxs("span", { className: styles$m.pageInfo, children: [currentPage, " / ", totalPages] }), jsxRuntime.jsx(CwButton, { variant: "icon", icon: "chevron-right", disabled: currentPage === totalPages, onClick: () => setCurrentPage(p => Math.min(totalPages, p + 1)) })] }))] }))] }));
 }
 
 var styles$l = {"cw-accordion":"cw-accordion-module__cw-accordion__ErvlW","cw-accordion-body":"cw-accordion-module__cw-accordion-body__xlI8b"};
@@ -4257,60 +4318,6 @@ function CwToggle(props) {
                     type: "checkbox", ...inputProps })] }) }));
 }
 
-/**
- * Option to display in the CwSelect
- * @remarks
- * Must be child of CwSelect
- * @example
- * <CwSelect>
- *   <CwOption>A</CwOption>
- *   <CwOption color="#4a90d9">Blue option</CwOption>
- *   <CwOption>C</CwOption>
- * </CwSelect>
- */
-function CwOption(props) {
-    const { text, color, style, ...optionProps } = props;
-    const mergedStyle = color
-        ? { ...style, backgroundColor: color, color: getContrastColor(color) }
-        : style;
-    return (jsxRuntime.jsx("option", { className: "cw-option", style: mergedStyle, ...optionProps, children: optionProps.children ?? text }));
-}
-
-/**
- * Input for selecting an option from a list
- * @remarks
- * ```txt
- * CwIcon  CwLabel     CwSelect        CwButton
- *  ↑      ↑           ↑               ↑
- *              ╭────────────────────╮╭════╮
- *  ⌂   Cat:    │  Choose a cat   ╲╱ │║ Ok ║
- *              ╰────────────────────╯╰════╯
- *              │ Orange             │ ← CwOption
- *              ├────────────────────┤
- *              │ Black              │ ← CwOption
- *              ├────────────────────┤
- *              │ White              │ ← CwOption
- *              ╰────────────────────╯
- * ```
- * @example
- * <CwSelect name="cat" iconProps={{iconId:"pet"}} labelProps={{children:"Cat:"}}>
- *   <CwOption value="" > - Choose a cat - </CwOption>
- *   <CwOption value="o" >Orange</CwOption>
- *   <CwOption value="b" >Black</CwOption>
- *   <CwOption value="w" >White</CwOption>
- * </CwSelect>
- */
-function CwSelect(props) {
-    const { alignProps, labelProps, buttonProps, iconProps, placeholder, feedback, children, style, className, ...selectProps } = props;
-    const feedbackMessages = feedback
-        ? Array.isArray(feedback) ? feedback : [feedback]
-        : [];
-    const flexDirection = alignProps?.flexDirection ?? "row";
-    const dataDirection = { 'data-direction': flexDirection };
-    const { backgroundColor, color: textColor, ...wrapperStyle } = style ?? {};
-    return (jsxRuntime.jsxs("div", { className: `cw-select${className ? ` ${className}` : ''}`, ...dataDirection, style: wrapperStyle, children: [jsxRuntime.jsxs(CwAlign, { ...alignProps, itemProp: selectProps.required === true ? "required" : "", children: [labelProps && (jsxRuntime.jsxs(CwLabel, { ...labelProps, children: [iconProps && jsxRuntime.jsx(CwIcon, { ...iconProps }), labelProps.text] })), jsxRuntime.jsxs("div", { className: "cw-flex-row cw-gap-small cw-flex-grow", children: [jsxRuntime.jsxs("select", { ...selectProps, style: backgroundColor ? { backgroundColor, color: textColor } : undefined, children: [placeholder && jsxRuntime.jsx(CwOption, { value: "", children: placeholder }), children] }), buttonProps && jsxRuntime.jsx(CwButton, { ...buttonProps })] })] }), feedbackMessages.map((feedbackItem, index) => (jsxRuntime.jsx("p", { className: "cw-input-info", "data-color": feedbackItem.type, children: feedbackItem.message }, index)))] }));
-}
-
 // ─── Default strategy: below anchor, match width, flip above if needed ────────
 function defaultPositionStrategy(anchorRect, panelRect) {
     const panelH = panelRect?.height ?? 200;
@@ -4784,7 +4791,6 @@ var styles$8 = {"cw-multi-filter-catalog-container":"cw-multi-filter-module__cw-
  * @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 [filteredTags, setFilteredTags] = React.useState(new Set());
     const [inputTextValue, setInputTextValue] = React.useState("");
     const [isPanelOpen, setIsPanelOpen] = React.useState(false);
     const [selectedCategory, setSelectedCategory] = React.useState("All");
@@ -4794,7 +4800,7 @@ const CwMultiFilter = ({ allTags, id, onChangeSelectedTags, selectedTags, placeh
     const { panelRef, panelStyle, renderPanel } = useDropdownPortal({
         anchorRef: wrapperRef,
         isOpen: isPanelOpen,
-        onClose: () => { setIsPanelOpen(false); setFilteredTags(getUnselectedAll()); setSelectedCategory("All"); setInputTextValue(""); },
+        onClose: () => { setIsPanelOpen(false); setSelectedCategory("All"); setInputTextValue(""); },
     });
     React.useEffect(() => {
         // Outside-click is now handled by useDropdownPortal
@@ -4808,10 +4814,19 @@ const CwMultiFilter = ({ allTags, id, onChangeSelectedTags, selectedTags, placeh
         });
         return categoriesMap;
     };
-    const getUnselectedAll = (excluded = selectedTags) => new Set(Array.from(allTags).filter(tag => !Array.from(excluded).some(t => t.ID === tag.ID)));
+    const displayTags = React.useMemo(() => {
+        let tags = Array.from(allTags);
+        if (selectedCategory !== "All") {
+            tags = tags.filter(t => t.Category === selectedCategory);
+        }
+        if (inputTextValue.trim() !== "") {
+            const input = inputTextValue.trim().replaceAll(" ", "").toLowerCase();
+            tags = tags.filter(t => t.Name.replaceAll(" ", "").toLowerCase().includes(input));
+        }
+        return tags;
+    }, [allTags, selectedCategory, inputTextValue]);
     const handleClickCategory = (category) => {
         setSelectedCategory(category);
-        setFilteredTags(category !== "All" ? (categoriesMappedToTags().get(category) ?? new Set()) : getUnselectedAll());
     };
     const rgbAString = (r, g, b) => {
         return `rgb(${r}, ${g}, ${b})`;
@@ -4835,36 +4850,15 @@ const CwMultiFilter = ({ allTags, id, onChangeSelectedTags, selectedTags, placeh
     const handleInputText = (input) => {
         if (selectedCategory !== "All")
             setSelectedCategory("All");
-        input = input.trimStart();
-        setInputTextValue(input);
-        if (input !== "") {
-            const newFilterTags = Array.from(allTags).filter(tag => !Array.from(selectedTags).some(t => t.ID === tag.ID) &&
-                tag.Name.replaceAll(" ", "").toLowerCase().includes(input.replaceAll(" ", "").toLowerCase()));
-            setFilteredTags(new Set(newFilterTags));
-        }
-        else {
-            setFilteredTags(getUnselectedAll());
-        }
+        setInputTextValue(input.trimStart());
     };
     const addTag = (newTag) => {
-        newTag.Selected = true;
-        newTag.Removable = true;
-        newTag.Selectable = false;
         if (selectedTags.has(newTag) || Array.from(selectedTags).some(t => t.ID === newTag.ID)) {
             return;
         }
-        else {
-            const updatedTags = new Set(selectedTags).add(newTag);
-            onChangeSelectedTags(updatedTags);
-            setInputTextValue("");
-            setFilteredTags(selectedCategory === "All" ? getUnselectedAll(updatedTags) : prev => {
-                const next = new Set(prev);
-                const toRemove = Array.from(next).find(t => t.ID === newTag.ID);
-                if (toRemove)
-                    next.delete(toRemove);
-                return next;
-            });
-        }
+        const updatedTags = new Set(selectedTags).add(newTag);
+        onChangeSelectedTags(updatedTags);
+        setInputTextValue("");
     };
     const removeTag = (id) => {
         const updatedTags = new Set(selectedTags);
@@ -4877,11 +4871,6 @@ const CwMultiFilter = ({ allTags, id, onChangeSelectedTags, selectedTags, placeh
         }
         onChangeSelectedTags(updatedTags);
     };
-    React.useEffect(() => {
-        // force to load all tags on first render
-        if (selectedCategory === "All" && filteredTags.size === 0)
-            setFilteredTags(new Set());
-    }, [allTags]);
     const handleDivClick = () => {
         if (inputRef !== null) {
             inputRef.current?.focus();
@@ -4893,9 +4882,9 @@ const CwMultiFilter = ({ allTags, id, onChangeSelectedTags, selectedTags, placeh
                                     switch (e.key) {
                                         case "Enter":
                                         case "Tab": {
-                                            if (inputTextValue.trim().length > 0 && filteredTags.size > 0) {
+                                            if (inputTextValue.trim().length > 0 && displayTags.length > 0) {
                                                 const input = inputTextValue.trim().toLowerCase();
-                                                const tagsArr = Array.from(filteredTags);
+                                                const tagsArr = displayTags;
                                                 let foundTag = tagsArr.find(tag => tag.Name.trim().toLowerCase() === input);
                                                 if (!foundTag) {
                                                     foundTag = tagsArr.find(tag => tag.Name.trim().toLowerCase().startsWith(input));
@@ -4919,7 +4908,7 @@ const CwMultiFilter = ({ allTags, id, onChangeSelectedTags, selectedTags, placeh
                                 } })] }), selectedTags.size > 0 && (jsxRuntime.jsx(CwButton, { type: "button", variant: "icon", color: "neutral", icon: "close", onMouseDown: e => e.preventDefault(), onClick: (e) => { e.stopPropagation(); onChangeSelectedTags(new Set()); setIsPanelOpen(false); }, tabIndex: -1, "aria-label": "Clear all" }))] }), renderPanel(jsxRuntime.jsxs("section", { ref: panelRef, className: styles$8["cw-multi-filter-catalog-container"], style: panelStyle, children: [jsxRuntime.jsxs("nav", { children: [jsxRuntime.jsx("button", { className: selectedCategory === "All" ? styles$8["category-selected"] : undefined, onClick: () => handleClickCategory("All"), children: allCategoriesLabel }), Array.from(categoriesMappedToTags().keys()).map(category => (jsxRuntime.jsx("button", { className: selectedCategory === category ? styles$8["category-selected"] : undefined, style: {
                                     backgroundColor: getColor(category).primary,
                                     color: getColor(category).onPrimary,
-                                }, onClick: () => handleClickCategory(category), children: category }, category)))] }), jsxRuntime.jsx("ul", { children: Array.from(filteredTags)
+                                }, onClick: () => handleClickCategory(category), children: category }, category)))] }), jsxRuntime.jsx("ul", { children: displayTags
                             .sort((a, b) => {
                             const input = inputTextValue.trim().toLowerCase();
                             const aName = a.Name.trim().toLowerCase();