@cwellt_software/cwellt-reactjs-lib 1.4.1 → 1.4.3

package/dist/index.es.js

@@ -2266,7 +2266,7 @@ function CwSortableTable({ columns, data, rowKey = "key", onReorder, loading = f
  *
  * @returns React component
  */
-function CwTableServerSide({ columns, data, totalItems, pagination = false, pageSizeOptions = [5, 10, 20, 50], expandedRowRender, onExpand, className, classNameRow, style, classNameContainer, id, testId, textNoData = "No data available at the moment", rowKey = "key", loading = false, scrollHeight, stickyHeader = false, rowSelection, onChange, serverState, }) {
+function CwTableServerSide({ columns, data, totalItems, pagination = false, pageSizeOptions = [5, 10, 20, 50], pageLabel = "page", expandedRowRender, onExpand, className, classNameRow, style, classNameContainer, id, testId, textNoData = "No data available at the moment", rowKey = "key", loading = false, scrollHeight, stickyHeader = false, rowSelection, onChange, serverState, }) {
     const [internalState, setInternalState] = useState({
         page: 1,
         pageSize: pageSizeOptions[0],
@@ -2415,7 +2415,7 @@ function CwTableServerSide({ columns, data, totalItems, pagination = false, page
                             if (isNaN(value) || value < 1 || value > totalPages) {
                                 handlePageChange(1);
                             }
-                        }, min: 1, max: totalPages }), jsxs("span", { children: ["of ", totalPages] }), jsx("button", { onClick: () => handlePageChange(state.page + 1), disabled: state.page === totalPages || totalPages === 1, className: "cw-button-icon cwi-chevron-right", title: "Next" }), jsx("button", { onClick: () => handlePageChange(totalPages), disabled: state.page === totalPages || totalPages === 1, className: "cw-button-icon cwi-chevron-right-double", title: "Last" }), jsx("select", { value: state.pageSize, onChange: handleItemsPerPageChange, children: pageSizeOptions.map((size) => (jsxs("option", { value: size, children: [size, " / page"] }, size))) })] }))] }));
+                        }, min: 1, max: totalPages }), jsxs("span", { children: ["of ", totalPages] }), jsx("button", { onClick: () => handlePageChange(state.page + 1), disabled: state.page === totalPages || totalPages === 1, className: "cw-button-icon cwi-chevron-right", title: "Next" }), jsx("button", { onClick: () => handlePageChange(totalPages), disabled: state.page === totalPages || totalPages === 1, className: "cw-button-icon cwi-chevron-right-double", title: "Last" }), jsx("select", { value: state.pageSize, onChange: handleItemsPerPageChange, children: pageSizeOptions.map((size) => (jsx("option", { value: size, children: pageLabel ? `${size} / ${pageLabel}` : size }, size))) })] }))] }));
 }
 
 var styles$i = {"cw-tabs":"cw-tabs-module__cw-tabs__1pmji","badge":"cw-tabs-module__badge__AmVxW","cw-tabs-content":"cw-tabs-module__cw-tabs-content__HTp8d"};
@@ -3752,7 +3752,7 @@ function parseDateParts(dateStr, format) {
         return null;
     }
 }
-function formatPlainDate(pd, format) {
+function formatPlainDate$1(pd, format) {
     const dd = pd.day.toString().padStart(2, "0");
     const mm = pd.month.toString().padStart(2, "0");
     const yyyy = pd.year.toString().padStart(4, "0");
@@ -3793,7 +3793,7 @@ function CwInputDateText(props) {
     const width = size ?? 12;
     const formattedDate = (date, inFormat, outFormat) => {
         const pd = parseDateParts(date, inFormat);
-        return pd ? formatPlainDate(pd, outFormat) : "";
+        return pd ? formatPlainDate$1(pd, outFormat) : "";
     };
     const [date, setDate] = useState("");
     const [displayedDate, setDisplayedDate] = useState("");
@@ -3814,7 +3814,7 @@ function CwInputDateText(props) {
         setDisplayedDate(newDate);
         const pd = parseDateParts(newDate, format);
         if (pd) {
-            setDate(formatPlainDate(pd, internalFormat));
+            setDate(formatPlainDate$1(pd, internalFormat));
         }
         else {
             setDate("");
@@ -3825,7 +3825,7 @@ function CwInputDateText(props) {
         setDate(newDate);
         const pd = parseDateParts(newDate, internalFormat);
         if (pd)
-            setDisplayedDate(formatPlainDate(pd, format));
+            setDisplayedDate(formatPlainDate$1(pd, format));
         else
             setDisplayedDate("");
     };
@@ -4248,7 +4248,247 @@ function CwSelect(props) {
     const flexDirection = alignProps?.flexDirection ?? "row";
     const dataDirection = { 'data-direction': flexDirection };
     const { backgroundColor, color: textColor, ...wrapperStyle } = style ?? {};
-    return (jsxs("div", { className: `cw-select${className ? ` ${className}` : ''}`, ...dataDirection, style: wrapperStyle, children: [jsxs(CwAlign, { ...alignProps, itemProp: selectProps.required === true ? "required" : "", children: [labelProps && (jsxs(CwLabel, { ...labelProps, children: [iconProps && jsx(CwIcon, { ...iconProps }), labelProps.text] })), jsxs("div", { className: "cw-flex-row cw-gap-small cw-flex-grow", children: [jsxs("select", { ...selectProps, style: backgroundColor ? { backgroundColor, color: textColor } : undefined, children: [placeholder && jsx(CwOption, { value: "", children: placeholder }), children] }), buttonProps && jsx(CwButton, { ...buttonProps })] })] }), feedbackMessages.map((feedbackItem, index) => (jsx("p", { className: "cw-input-info", "data-type": feedbackItem.type, children: feedbackItem.message }, index)))] }));
+    return (jsxs("div", { className: `cw-select${className ? ` ${className}` : ''}`, ...dataDirection, style: wrapperStyle, children: [jsxs(CwAlign, { ...alignProps, itemProp: selectProps.required === true ? "required" : "", children: [labelProps && (jsxs(CwLabel, { ...labelProps, children: [iconProps && jsx(CwIcon, { ...iconProps }), labelProps.text] })), jsxs("div", { className: "cw-flex-row cw-gap-small cw-flex-grow", children: [jsxs("select", { ...selectProps, style: backgroundColor ? { backgroundColor, color: textColor } : undefined, children: [placeholder && jsx(CwOption, { value: "", children: placeholder }), children] }), buttonProps && jsx(CwButton, { ...buttonProps })] })] }), feedbackMessages.map((feedbackItem, index) => (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;
+    const spaceBelow = window.innerHeight - anchorRect.bottom;
+    const top = spaceBelow >= panelH + 4
+        ? anchorRect.bottom + 4
+        : Math.max(4, anchorRect.top - panelH);
+    const width = anchorRect.width;
+    const left = Math.max(4, Math.min(anchorRect.left, window.innerWidth - width - 4));
+    return { top, left, width };
+}
+// ─── Hook ─────────────────────────────────────────────────────────────────────
+/**
+ * Generic portal-based dropdown panel hook.
+ *
+ * Renders the panel as a direct child of `<body>` via `createPortal` so it
+ * escapes any `overflow: hidden/auto` ancestor (dialogs, tabs, cards, etc.).
+ * Positions the panel with `position: fixed` computed from the anchor element's
+ * `getBoundingClientRect()`, and repositions on scroll and resize.
+ *
+ * The fix pattern is the same as {@link usePickerPopup} used by `CwDatePicker`.
+ *
+ * > **Future migration note:** Once the project's minimum browser baseline
+ * > reaches Firefox 147 / Safari 26 (CSS Anchor Positioning — Baseline 2026),
+ * > this hook can be replaced with `popover="manual"` + CSS `anchor()` with
+ * > zero JS positioning.
+ *
+ * @example
+ * ```tsx
+ * const wrapperRef = useRef<HTMLDivElement>(null);
+ * const { panelRef, panelStyle, renderPanel } = useDropdownPortal({
+ *   anchorRef: wrapperRef,
+ *   isOpen,
+ *   onClose: () => setIsOpen(false),
+ * });
+ *
+ * return (
+ *   <div ref={wrapperRef}>
+ *     <input ... />
+ *     {renderPanel(
+ *       <div ref={panelRef} style={panelStyle} className={styles.dropdown}>
+ *         {options}
+ *       </div>
+ *     )}
+ *   </div>
+ * );
+ * ```
+ */
+function useDropdownPortal({ anchorRef, isOpen, onClose, positionStrategy = defaultPositionStrategy, }) {
+    const panelRef = useRef(null);
+    const [style, setStyle] = useState({
+        position: "fixed",
+        top: 0,
+        left: 0,
+        width: "auto",
+        zIndex: 1000,
+        right: "auto",
+        marginLeft: 0,
+    });
+    const reposition = useCallback(() => {
+        const anchor = anchorRef.current;
+        if (!anchor)
+            return;
+        const anchorRect = anchor.getBoundingClientRect();
+        const panelRect = panelRef.current?.getBoundingClientRect() ?? null;
+        const { top, left, width } = positionStrategy(anchorRect, panelRect);
+        setStyle({
+            position: "fixed",
+            top,
+            left,
+            width: width ?? "auto",
+            zIndex: 1000,
+            right: "auto",
+            marginLeft: 0,
+        });
+    }, [anchorRef, positionStrategy]);
+    // Reposition when opened; re-measure after first paint to get real panel size
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        reposition();
+        const raf = requestAnimationFrame(reposition);
+        const handleUpdate = () => reposition();
+        window.addEventListener("resize", handleUpdate);
+        // Capture phase catches scroll on all scrollable ancestors
+        window.addEventListener("scroll", handleUpdate, true);
+        return () => {
+            cancelAnimationFrame(raf);
+            window.removeEventListener("resize", handleUpdate);
+            window.removeEventListener("scroll", handleUpdate, true);
+        };
+    }, [isOpen, reposition]);
+    // Close when the anchor scrolls out of view in any overflow container
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const anchor = anchorRef.current;
+        if (!anchor)
+            return;
+        const observer = new IntersectionObserver(([entry]) => { if (!entry.isIntersecting)
+            onClose(); }, { threshold: 0 });
+        observer.observe(anchor);
+        return () => observer.disconnect();
+    }, [isOpen, anchorRef, onClose]);
+    // Close on outside click (anchor + panel are both considered "inside")
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const handleMouseDown = (e) => {
+            const target = e.target;
+            if (anchorRef.current?.contains(target) || panelRef.current?.contains(target))
+                return;
+            onClose();
+        };
+        document.addEventListener("mousedown", handleMouseDown);
+        return () => document.removeEventListener("mousedown", handleMouseDown);
+    }, [isOpen, onClose, anchorRef, panelRef]);
+    const renderPanel = useCallback((children) => {
+        if (!isOpen)
+            return null;
+        return createPortal(children, document.body);
+    }, [isOpen]);
+    return { panelRef, panelStyle: style, renderPanel };
+}
+
+var dropdownStyles = {"dropdown":"cw-choice-dropdown-module__dropdown__P0b4j","option":"cw-choice-dropdown-module__option__uR-ro","optionFocused":"cw-choice-dropdown-module__optionFocused__BYMxj","optionSelected":"cw-choice-dropdown-module__optionSelected__Lt8Xg","optionDisabled":"cw-choice-dropdown-module__optionDisabled__n3scM","searchBox":"cw-choice-dropdown-module__searchBox__0gox7","searchInput":"cw-choice-dropdown-module__searchInput__G5oRs","emptyState":"cw-choice-dropdown-module__emptyState__HO0Y7","colorCircle":"cw-choice-dropdown-module__colorCircle__x7mI9"};
+
+/**
+ * Custom dropdown component with colour-coded options, optional search filter, and full
+ * keyboard navigation (↑ ↓ Enter Esc Tab).
+ *
+ * Use `CwDropdown` instead of the native `<select>` when options need colour indicators or
+ * when inline search filtering is required.
+ *
+ * @example
+ * <CwDropdown
+ *   options={[{ value: 'a', label: 'Option A', color: '#1976D2' }]}
+ *   value={selected}
+ *   onChange={setSelected}
+ *   labelProps={{ text: 'My Label' }}
+ * />
+ */
+function CwDropdown({ options, value, onChange, labelProps, alignProps, placeholder = "Select...", allowSearch = false, disabled = false, required = false, feedback, className, style, ...otherProps }) {
+    const [isOpen, setIsOpen] = useState(false);
+    const [searchText, setSearchText] = useState("");
+    const [highlightedIndex, setHighlightedIndex] = useState(-1);
+    const containerRef = useRef(null);
+    const wrapperRef = useRef(null);
+    const inputRef = useRef(null);
+    const highlightedItemRef = useRef(null);
+    const { panelRef, panelStyle, renderPanel } = useDropdownPortal({
+        anchorRef: wrapperRef,
+        isOpen,
+        onClose: () => { setIsOpen(false); setSearchText(""); setHighlightedIndex(-1); },
+    });
+    const selectedOption = options.find(opt => opt.value === value);
+    // Filter options based on search
+    const filteredOptions = searchText
+        ? options.filter(opt => opt.label.toLowerCase().includes(searchText.toLowerCase()))
+        : options;
+    // Feedback handling
+    const feedbackMessages = feedback
+        ? Array.isArray(feedback) ? feedback : [feedback]
+        : [];
+    // Scroll highlighted item into view
+    useEffect(() => {
+        if (isOpen && highlightedItemRef.current) {
+            highlightedItemRef.current.scrollIntoView({
+                block: "nearest",
+                behavior: "smooth",
+            });
+        }
+    }, [highlightedIndex, isOpen]);
+    const handleTriggerClick = useCallback(() => {
+        if (!disabled) {
+            setIsOpen(!isOpen);
+            setHighlightedIndex(-1);
+            if (!isOpen && allowSearch) {
+                setTimeout(() => inputRef.current?.focus(), 0);
+            }
+        }
+    }, [isOpen, disabled, allowSearch]);
+    const handleOptionSelect = useCallback((optionValue) => {
+        const selected = options.find(opt => opt.value === optionValue);
+        if (selected && !selected.disabled) {
+            onChange?.(optionValue);
+            setIsOpen(false);
+            setSearchText("");
+            setHighlightedIndex(-1);
+        }
+    }, [options, onChange]);
+    const handleSearchChange = useCallback((e) => {
+        setSearchText(e.target.value);
+        setHighlightedIndex(-1);
+    }, []);
+    const handleKeyDown = useCallback((e) => {
+        if (!isOpen) {
+            if (e.key === "Enter" || e.key === " " || e.key === "ArrowDown") {
+                e.preventDefault();
+                setIsOpen(true);
+            }
+            return;
+        }
+        switch (e.key) {
+            case "ArrowDown":
+                e.preventDefault();
+                setHighlightedIndex(prev => prev < filteredOptions.length - 1 ? prev + 1 : 0);
+                break;
+            case "ArrowUp":
+                e.preventDefault();
+                setHighlightedIndex(prev => prev > 0 ? prev - 1 : filteredOptions.length - 1);
+                break;
+            case "Enter":
+                e.preventDefault();
+                if (highlightedIndex >= 0 && highlightedIndex < filteredOptions.length) {
+                    handleOptionSelect(filteredOptions[highlightedIndex].value);
+                }
+                break;
+            case "Escape":
+                e.preventDefault();
+                setIsOpen(false);
+                setSearchText("");
+                setHighlightedIndex(-1);
+                break;
+            case "Tab":
+                setIsOpen(false);
+                setSearchText("");
+                setHighlightedIndex(-1);
+                break;
+        }
+    }, [isOpen, highlightedIndex, filteredOptions, handleOptionSelect]);
+    const flexDirection = alignProps?.flexDirection ?? "row";
+    return (jsxs("div", { ref: containerRef, className: `cw-dropdown${className ? ` ${className}` : ""}`, "data-direction": flexDirection, style: style, ...otherProps, children: [jsxs(CwAlign, { ...alignProps, itemProp: required ? "required" : "", children: [labelProps && (jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsxs("div", { className: "cw-dropdown-wrapper", ref: wrapperRef, children: [jsx("button", { type: "button", className: "cw-dropdown-trigger", onClick: handleTriggerClick, onKeyDown: handleKeyDown, disabled: disabled, "aria-haspopup": "listbox", "aria-expanded": isOpen, "aria-label": selectedOption?.label || placeholder, children: jsx("div", { className: "cw-dropdown-trigger-content", children: selectedOption ? (jsxs(Fragment, { children: [selectedOption.color && (jsx("span", { className: dropdownStyles.colorCircle, style: { backgroundColor: selectedOption.color } })), jsx("span", { children: selectedOption.label })] })) : (jsx("span", { className: "cw-dropdown-placeholder", children: placeholder })) }) }), jsx("div", { style: { display: "flex", alignItems: "center", paddingRight: "0.5rem", flexShrink: 0, cursor: disabled ? "not-allowed" : "pointer" }, onClick: handleTriggerClick, children: jsx(CwIcon, { iconId: "chevron-down", size: "small" }) }), renderPanel(jsxs("div", { ref: panelRef, className: dropdownStyles.dropdown, style: panelStyle, role: "listbox", onKeyDown: handleKeyDown, children: [allowSearch && (jsx("div", { className: dropdownStyles.searchBox, children: jsx("input", { ref: inputRef, type: "text", placeholder: "Search...", value: searchText, onChange: handleSearchChange, onKeyDown: handleKeyDown, className: dropdownStyles.searchInput, autoComplete: "off" }) })), jsx("ul", { children: filteredOptions.length > 0 ? (filteredOptions.map((option, index) => (jsxs("li", { ref: highlightedIndex === index ? highlightedItemRef : null, className: [
+                                                dropdownStyles.option,
+                                                value === option.value ? dropdownStyles.optionSelected : "",
+                                                highlightedIndex === index ? dropdownStyles.optionFocused : "",
+                                                option.disabled ? dropdownStyles.optionDisabled : "",
+                                            ].filter(Boolean).join(" "), onClick: () => !option.disabled && handleOptionSelect(option.value), onMouseEnter: () => setHighlightedIndex(index), role: "option", "aria-selected": value === option.value, "aria-disabled": option.disabled, children: [option.color && (jsx("span", { className: dropdownStyles.colorCircle, style: { backgroundColor: option.color } })), jsx("span", { children: option.label })] }, option.value)))) : (jsx("li", { className: dropdownStyles.emptyState, children: "No options available" })) })] }))] })] }), feedbackMessages.map((item, index) => (jsx("p", { className: "cw-input-info", "data-color": item.type, children: item.message }, index)))] }));
 }
 
 function CwDropdownFilter(props) {
@@ -4490,19 +4730,14 @@ const CwMultiFilter = ({ allTags, id, onChangeSelectedTags, selectedTags, placeh
     const [selectedCategory, setSelectedCategory] = useState("All");
     const componentRef = useRef(null);
     const inputRef = useRef(null);
+    const wrapperRef = useRef(null);
+    const { panelRef, panelStyle, renderPanel } = useDropdownPortal({
+        anchorRef: wrapperRef,
+        isOpen: isPanelOpen,
+        onClose: () => { setIsPanelOpen(false); setFilteredTags(getUnselectedAll()); setSelectedCategory("All"); setInputTextValue(""); },
+    });
     useEffect(() => {
-        function handleClickOutside(event) {
-            if (componentRef.current && !componentRef.current.contains(event.target)) {
-                setIsPanelOpen(false);
-                setFilteredTags(new Set());
-                setSelectedCategory("All");
-                setInputTextValue("");
-            }
-        }
-        document.addEventListener("mousedown", handleClickOutside);
-        return () => {
-            document.removeEventListener("mousedown", handleClickOutside);
-        };
+        // Outside-click is now handled by useDropdownPortal
     }, []);
     const categoriesMappedToTags = () => {
         const categoriesMap = new Map();
@@ -4513,9 +4748,10 @@ 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 handleClickCategory = (category) => {
         setSelectedCategory(category);
-        setFilteredTags(category != "All" ? (categoriesMappedToTags().get(category) ?? new Set()) : new Set());
+        setFilteredTags(category !== "All" ? (categoriesMappedToTags().get(category) ?? new Set()) : getUnselectedAll());
     };
     const rgbAString = (r, g, b) => {
         return `rgb(${r}, ${g}, ${b})`;
@@ -4547,7 +4783,7 @@ const CwMultiFilter = ({ allTags, id, onChangeSelectedTags, selectedTags, placeh
             setFilteredTags(new Set(newFilterTags));
         }
         else {
-            setFilteredTags(new Set());
+            setFilteredTags(getUnselectedAll());
         }
     };
     const addTag = (newTag) => {
@@ -4561,7 +4797,13 @@ const CwMultiFilter = ({ allTags, id, onChangeSelectedTags, selectedTags, placeh
             const updatedTags = new Set(selectedTags).add(newTag);
             onChangeSelectedTags(updatedTags);
             setInputTextValue("");
-            //setFilteredTags(allTags);
+            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 removeTag = (id) => {
@@ -4587,7 +4829,7 @@ const CwMultiFilter = ({ allTags, id, onChangeSelectedTags, selectedTags, placeh
     };
     return (jsxs("form", { ref: componentRef, id: id, className: `${styles$8["cw-multi-filter"]}${className ? ` ${className}` : ""}`, style: style, onSubmit: (e) => {
             e.preventDefault();
-        }, children: [jsxs("div", { onClick: handleDivClick, className: styles$8["cw-multi-filter-search"], style: isPanelOpen ? { outline: "1px solid var(--cw-color-primary)", outlineOffset: "-2px" } : {}, 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 => {
+        }, children: [jsxs("div", { onClick: handleDivClick, ref: wrapperRef, className: styles$8["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) {
                                         case "Enter":
                                         case "Tab": {
@@ -4614,18 +4856,10 @@ const CwMultiFilter = ({ allTags, id, onChangeSelectedTags, selectedTags, placeh
                                             break;
                                         }
                                     }
-                                } })] }), selectedTags.size > 0 && (jsx(CwButton, { type: "button", variant: "icon", color: "neutral", icon: "close", onMouseDown: e => e.preventDefault(), onClick: () => onChangeSelectedTags(new Set()), tabIndex: -1, "aria-label": "Clear all" }))] }), jsxs("section", { className: styles$8["cw-multi-filter-catalog-container"], "data-display-none": !isPanelOpen, children: [jsxs("nav", { children: [jsx("button", { className: selectedCategory === "All" ? styles$8["category-selected"] : undefined, onClick: () => handleClickCategory("All"), children: allCategoriesLabel }), Array.from(categoriesMappedToTags().keys()).map(category => (jsx("button", { style: selectedCategory === category
-                                    ? {
-                                        backgroundColor: getColor(category).primary,
-                                        color: getColor(category).onPrimary,
-                                        outline: "2px solid " + getColor(category).onPrimary,
-                                        outlineOffset: "-2px",
-                                        fontWeight: 400
-                                    }
-                                    : {
-                                        backgroundColor: getColor(category).primary,
-                                        color: getColor(category).onPrimary,
-                                    }, onClick: () => handleClickCategory(category), children: category }, category)))] }), jsx("ul", { children: Array.from(filteredTags)
+                                } })] }), selectedTags.size > 0 && (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(jsxs("section", { ref: panelRef, className: styles$8["cw-multi-filter-catalog-container"], style: panelStyle, children: [jsxs("nav", { children: [jsx("button", { className: selectedCategory === "All" ? styles$8["category-selected"] : undefined, onClick: () => handleClickCategory("All"), children: allCategoriesLabel }), Array.from(categoriesMappedToTags().keys()).map(category => (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)))] }), jsx("ul", { children: Array.from(filteredTags)
                             .sort((a, b) => {
                             const input = inputTextValue.trim().toLowerCase();
                             const aName = a.Name.trim().toLowerCase();
@@ -4645,10 +4879,10 @@ const CwMultiFilter = ({ allTags, id, onChangeSelectedTags, selectedTags, placeh
                                     removeTag(props.ID);
                                 else
                                     addTag(props);
-                            } }, props.ID))) })] })] }));
+                            } }, props.ID))) })] }))] }));
 };
 
-var styles$7 = {"container":"cw-tag-selector-module__container__-do8i","inputBox":"cw-tag-selector-module__inputBox__3NGz9 cw-choice-input-box-module__inputBox__gHY9d","disabled":"cw-tag-selector-module__disabled__vbud9 cw-choice-input-box-module__disabled__TFAnC","dropdown":"cw-tag-selector-module__dropdown__X6Dob cw-choice-dropdown-module__dropdown__P0b4j","option":"cw-tag-selector-module__option__2UQ7g cw-choice-dropdown-module__option__uR-ro","optionFocused":"cw-tag-selector-module__optionFocused__8-lv8 cw-choice-dropdown-module__optionFocused__BYMxj","optionDot":"cw-tag-selector-module__optionDot__CdFlG","selectAll":"cw-tag-selector-module__selectAll__HyvMA"};
+var styles$7 = {"container":"cw-tag-selector-module__container__-do8i","inputBox":"cw-tag-selector-module__inputBox__3NGz9 cw-choice-input-box-module__inputBox__gHY9d","disabled":"cw-tag-selector-module__disabled__vbud9 cw-choice-input-box-module__disabled__TFAnC","dropdown":"cw-tag-selector-module__dropdown__X6Dob cw-choice-dropdown-module__dropdown__P0b4j","option":"cw-tag-selector-module__option__2UQ7g cw-choice-dropdown-module__option__uR-ro","optionFocused":"cw-tag-selector-module__optionFocused__8-lv8 cw-choice-dropdown-module__optionFocused__BYMxj","optionDot":"cw-tag-selector-module__optionDot__CdFlG cw-choice-dropdown-module__colorCircle__x7mI9","selectAll":"cw-tag-selector-module__selectAll__HyvMA"};
 
 /**
  * Multi-select input with chip tags and searchable dropdown.
@@ -4678,8 +4912,14 @@ function CwTagSelector({ id, options, value, onChange, labelProps, iconProps, al
     const [open, setOpen] = useState(false);
     const [focusedIndex, setFocusedIndex] = useState(-1);
     const containerRef = useRef(null);
+    const inputBoxRef = useRef(null);
     const inputRef = useRef(null);
     const listRef = useRef(null);
+    const { panelRef, panelStyle, renderPanel } = useDropdownPortal({
+        anchorRef: inputBoxRef,
+        isOpen: open,
+        onClose: () => { setOpen(false); setFocusedIndex(-1); },
+    });
     const selectedSet = useMemo(() => new Set(value), [value]);
     const filtered = useMemo(() => {
         if (!search)
@@ -4773,21 +5013,12 @@ function CwTagSelector({ id, options, value, onChange, labelProps, iconProps, al
             item?.scrollIntoView({ block: "nearest" });
         }
     }, [focusedIndex]);
-    // Close on outside click
-    useEffect(() => {
-        const handler = (e) => {
-            if (containerRef.current && !containerRef.current.contains(e.target)) {
-                setOpen(false);
-                setFocusedIndex(-1);
-            }
-        };
-        document.addEventListener("mousedown", handler);
-        return () => document.removeEventListener("mousedown", handler);
-    }, []);
+    // Close on outside click — now handled by useDropdownPortal
+    // Keeping containerRef for any other potential use
     const direction = alignProps?.flexDirection ?? "row";
     const feedbackMessages = feedback ? (Array.isArray(feedback) ? feedback : [feedback]) : [];
-    return (jsxs("div", { ref: containerRef, className: `${styles$7.container}${className ? ` ${className}` : ""}`, style: style, id: id, "data-direction": direction, children: [jsxs(CwAlign, { ...alignProps, children: [labelProps && (jsxs(CwLabel, { ...labelProps, children: [iconProps && jsx(CwIcon, { ...iconProps }), labelProps.text] })), jsxs("div", { className: `${styles$7.inputBox}${disabled ? ` ${styles$7.disabled}` : ""}`, onClick: () => { if (!disabled)
-                            inputRef.current?.focus(); }, children: [selectedOptions.map(opt => (jsx(CwChip, { label: opt.label, colorScheme: opt.color ? "custom" : "info", customColor: opt.color, closable: !disabled, onClose: () => handleRemove(opt.value) }, opt.value))), jsx("input", { ref: inputRef, type: "text", value: search, onChange: handleInputChange, onFocus: handleInputFocus, onKeyDown: handleKeyDown, placeholder: selectedOptions.length === 0 ? placeholder : "", disabled: disabled, autoComplete: "off" }), value.length > 0 && !disabled && (jsx(CwButton, { type: "button", variant: "icon", color: "neutral", icon: "close", onMouseDown: (e) => e.preventDefault(), onClick: () => { onChange([]); setSearch(""); inputRef.current?.focus(); }, tabIndex: -1, "aria-label": "Clear all" }))] })] }), feedbackMessages.map((fb, i) => (jsx("p", { className: "cw-input-info", "data-color": fb.type, children: fb.message }, i))), open && (showSelectAll || filtered.length > 0) && (jsxs("div", { className: styles$7.dropdown, children: [showSelectAll && !search && (jsxs("div", { className: styles$7.selectAll, onMouseDown: (e) => e.preventDefault(), onClick: handleToggleAll, children: [jsx("input", { type: "checkbox", checked: allSelected, readOnly: true, tabIndex: -1 }), allSelected ? "Deselect all" : "Select all"] })), jsx("ul", { ref: listRef, children: filtered.map((opt, idx) => (jsxs("li", { className: `${styles$7.option}${idx === focusedIndex ? ` ${styles$7.optionFocused}` : ""}`, onMouseDown: (e) => e.preventDefault(), onClick: () => handleSelect(opt.value), onMouseEnter: () => setFocusedIndex(idx), title: opt.tooltip, children: [opt.color && jsx("span", { className: styles$7.optionDot, style: { backgroundColor: opt.color } }), opt.label] }, opt.value))) })] }))] }));
+    return (jsxs("div", { ref: containerRef, className: `${styles$7.container}${className ? ` ${className}` : ""}`, style: style, id: id, "data-direction": direction, children: [jsxs(CwAlign, { ...alignProps, children: [labelProps && (jsxs(CwLabel, { ...labelProps, children: [iconProps && jsx(CwIcon, { ...iconProps }), labelProps.text] })), jsxs("div", { className: `${styles$7.inputBox}${disabled ? ` ${styles$7.disabled}` : ""}`, ref: inputBoxRef, onClick: () => { if (!disabled)
+                            inputRef.current?.focus(); }, children: [selectedOptions.map(opt => (jsx(CwChip, { label: opt.label, colorScheme: opt.color ? "custom" : "info", customColor: opt.color, closable: !disabled, onClose: () => handleRemove(opt.value) }, opt.value))), jsx("input", { ref: inputRef, type: "text", value: search, onChange: handleInputChange, onFocus: handleInputFocus, onKeyDown: handleKeyDown, placeholder: selectedOptions.length === 0 ? placeholder : "", disabled: disabled, autoComplete: "off" }), value.length > 0 && !disabled && (jsx(CwButton, { type: "button", variant: "icon", color: "neutral", icon: "close", onMouseDown: (e) => e.preventDefault(), onClick: (e) => { e.stopPropagation(); onChange([]); setSearch(""); setOpen(false); }, tabIndex: -1, "aria-label": "Clear all" }))] })] }), feedbackMessages.map((fb, i) => (jsx("p", { className: "cw-input-info", "data-color": fb.type, children: fb.message }, i))), renderPanel((showSelectAll || filtered.length > 0) ? (jsxs("div", { ref: panelRef, className: styles$7.dropdown, style: panelStyle, children: [showSelectAll && !search && (jsxs("div", { className: styles$7.selectAll, onMouseDown: (e) => e.preventDefault(), onClick: handleToggleAll, children: [jsx("input", { type: "checkbox", checked: allSelected, readOnly: true, tabIndex: -1 }), allSelected ? "Deselect all" : "Select all"] })), jsx("ul", { ref: listRef, children: filtered.map((opt, idx) => (jsxs("li", { className: `${styles$7.option}${idx === focusedIndex ? ` ${styles$7.optionFocused}` : ""}`, onMouseDown: (e) => e.preventDefault(), onClick: () => handleSelect(opt.value), onMouseEnter: () => setFocusedIndex(idx), title: opt.tooltip, children: [opt.color && jsx("span", { className: styles$7.optionDot, style: { backgroundColor: opt.color } }), opt.label] }, opt.value))) })] })) : null)] }));
 }
 
 var styles$6 = {"tree-container":"cw-tree-view-module__tree-container__NN-HJ","tree-wrapper":"cw-tree-view-module__tree-wrapper__keBZI","tree-item":"cw-tree-view-module__tree-item__prE9N","tree-node":"cw-tree-view-module__tree-node__wfro9","selected":"cw-tree-view-module__selected__XJQ0w","non-selectable":"cw-tree-view-module__non-selectable__YuPSx","tree-children":"cw-tree-view-module__tree-children__ji8CZ","empty-state":"cw-tree-view-module__empty-state__yvRjo","tree-label":"cw-tree-view-module__tree-label__ss3Nf","tree-spacer":"cw-tree-view-module__tree-spacer__E9Ud2"};
@@ -4896,12 +5127,30 @@ function CwTreeView({ data, onSelect, allowParentSelection = false, selectedId:
     return (jsxs("div", { className: `cw-tree-view ${styles$6["tree-container"]}`, children: [jsxs("header", { children: [jsx("input", { type: "text", placeholder: "Search in tree...", value: search, onChange: (e) => setSearch(e.target.value) }), search && (jsx(CwButton, { onClick: () => setSearch(""), type: "button", icon: "close", variant: "icon", color: "neutral" }))] }), jsx("div", { className: styles$6["tree-wrapper"], children: filteredData.length > 0 ? (filteredData.map((node) => renderNode(node))) : (jsxs("div", { className: styles$6["empty-state"], children: [jsx(CwIcon, { iconId: "comment" }), search ? "No results found" : "There are no items"] })) })] }));
 }
 
+/**
+ * Text input with a live-filtered suggestion dropdown backed by a local `CwSelectList` array.
+ * Use `CwFindAirport` or `CwFindCrewmember` for API-backed search inputs.
+ *
+ * @example
+ * <CwSearchInput
+ *   selectList={myItems}
+ *   handleChange={(id) => console.log('selected', id)}
+ *   labelProps={{ text: 'Employee' }}
+ *   placeholder="Search by name…"
+ * />
+ */
 function CwSearchInput(optionsProps) {
     const [searchText, setSearchText] = useState("");
     const [filteredOptions, setFilteredOptions] = useState([]);
     const [_selectedOption, setSelectedOption] = useState(null);
     const [showDropdown, setShowDropdown] = useState(false);
     const [isLoading, setIsLoading] = useState(false);
+    const wrapperRef = useRef(null);
+    const { panelRef, panelStyle, renderPanel } = useDropdownPortal({
+        anchorRef: wrapperRef,
+        isOpen: showDropdown && filteredOptions.length > 0,
+        onClose: () => setShowDropdown(false),
+    });
     // Extract props
     const { labelProps, iconProps, alignProps, selectList, handleChange, placeholder = "Search…", disabled, renderOption, style, id, className, defaultValue, ...otherProps } = optionsProps;
     // Get direction for data attribute
@@ -4952,9 +5201,8 @@ function CwSearchInput(optionsProps) {
         }
     };
     const handleInputBlur = () => {
-        setTimeout(() => {
-            setShowDropdown(false);
-        }, 150);
+        // Dropdown is closed by useDropdownPortal's outside-click handler.
+        // Blur alone must not close it — clicking an option would lose focus before the click fires.
     };
     const handleOptionSelect = (option) => {
         setSearchText(option.description);
@@ -4972,7 +5220,7 @@ function CwSearchInput(optionsProps) {
             handleChange("");
         }
     };
-    return (jsxs("div", { className: `cw-search-input ${className || ""}`, style: style, id: id, ...otherProps, "data-direction": direction, children: [jsxs(CwAlign, { ...alignProps, children: [labelProps && (jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsxs("div", { className: "cw-search-input-wrapper", children: [jsx("input", { type: "text", value: searchText, onChange: handleInputChange, onFocus: handleInputFocus, onBlur: handleInputBlur, placeholder: placeholder, className: "cw-input-search", disabled: disabled }), isLoading && (jsx("div", { className: "cw-search-input-loading", children: jsx(CwIcon, { iconId: "spinner" }) })), jsx("div", { className: "cw-search-input-icons", children: searchText && !disabled && !isLoading ? (jsx(CwButton, { type: "button", onClick: handleClearClick, "aria-label": "Clear search", variant: "icon", icon: "close", color: "neutral" })) : (iconProps ? jsx(CwIcon, { ...iconProps }) : jsx(CwIcon, { iconId: "search" })) })] })] }), showDropdown && filteredOptions.length > 0 && (jsx("div", { className: "cw-input-search-dropdown", children: jsx("ul", { children: filteredOptions.map((option) => (jsx("li", { onClick: () => handleOptionSelect(option), onMouseDown: (e) => e.preventDefault(), children: renderOption ? renderOption(option) : option.description }, option.id))) }) }))] }));
+    return (jsxs("div", { className: `cw-search-input ${className || ""}`, style: style, id: id, ...otherProps, "data-direction": direction, children: [jsxs(CwAlign, { ...alignProps, children: [labelProps && (jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsxs("div", { className: "cw-search-input-wrapper", ref: wrapperRef, children: [jsx("input", { type: "text", value: searchText, onChange: handleInputChange, onFocus: handleInputFocus, onBlur: handleInputBlur, placeholder: placeholder, className: "cw-input-search", disabled: disabled }), isLoading && (jsx("div", { className: "cw-search-input-loading", children: jsx(CwIcon, { iconId: "spinner" }) })), jsx("div", { className: "cw-search-input-icons", children: searchText && !disabled && !isLoading ? (jsx(CwButton, { type: "button", onClick: handleClearClick, "aria-label": "Clear search", variant: "icon", icon: "close", color: "neutral" })) : (iconProps ? jsx(CwIcon, { ...iconProps }) : jsx(CwIcon, { iconId: "search" })) })] })] }), renderPanel(jsx("div", { ref: panelRef, className: dropdownStyles.dropdown, style: panelStyle, children: jsx("ul", { children: filteredOptions.map((option) => (jsx("li", { className: dropdownStyles.option, onClick: () => handleOptionSelect(option), onMouseDown: (e) => e.preventDefault(), children: renderOption ? renderOption(option) : option.description }, option.id))) }) }))] }));
 }
 
 var styles$5 = {"menu":"cw-context-menu-module__menu__tXmun","item":"cw-context-menu-module__item__-ko8L","arrow":"cw-context-menu-module__arrow__LHZmQ"};
@@ -5229,81 +5477,49 @@ var styles$4 = {"pickerWrapper":"cw-pickers-base-module__pickerWrapper__Fb9Zo","
 /**
  * Renders a picker popup in a portal so it escapes overflow containers.
  * Positions itself relative to the anchor element.
+ *
+ * Thin wrapper around {@link useDropdownPortal} that adds directional
+ * preference logic ("left-bottom", "right-top", etc.) for calendar popups.
+ * The public API is unchanged — existing callers (`CwDatePicker`, etc.) need
+ * no modifications.
  */
 function usePickerPopup({ anchorRef, isOpen, onClose, position = "left-bottom" }) {
-    const popupRef = useRef(null);
-    const [style, setStyle] = useState({ position: "fixed", top: 0, left: 0, zIndex: 1000 });
-    const reposition = useCallback(() => {
-        const anchor = anchorRef.current;
-        const popup = popupRef.current;
-        if (!anchor || !popup)
-            return;
-        const rect = anchor.getBoundingClientRect();
-        const popupRect = popup.getBoundingClientRect();
-        // Determine vertical placement
+    const pickerStrategy = useCallback((anchorRect, panelRect) => {
+        const popupH = panelRect?.height ?? 300;
+        const popupW = panelRect?.width ?? 300;
         const preferTop = position.includes("top");
-        const spaceBelow = window.innerHeight - rect.bottom;
-        const spaceAbove = rect.top;
-        const popupH = popupRect.height || 300; // fallback for first render
+        const spaceBelow = window.innerHeight - anchorRect.bottom;
+        const spaceAbove = anchorRect.top;
         let top;
         if (preferTop && spaceAbove >= popupH) {
-            top = rect.top - popupH;
+            top = anchorRect.top - popupH;
         }
         else if (!preferTop && spaceBelow >= popupH + 4) {
-            top = rect.bottom + 4;
+            top = anchorRect.bottom + 4;
         }
         else {
-            // Flip if preferred side doesn't fit
-            top = spaceBelow >= popupH + 4 ? rect.bottom + 4 : rect.top - popupH;
+            top = spaceBelow >= popupH + 4 ? anchorRect.bottom + 4 : anchorRect.top - popupH;
         }
-        // Determine horizontal placement
         let left;
         if (position.includes("right")) {
-            left = rect.right - (popupRect.width || rect.width);
+            left = anchorRect.right - popupW;
         }
         else {
-            left = rect.left;
+            left = anchorRect.left;
         }
-        // Clamp to viewport
-        left = Math.max(4, Math.min(left, window.innerWidth - (popupRect.width || 200) - 4));
+        left = Math.max(4, Math.min(left, window.innerWidth - popupW - 4));
         top = Math.max(4, top);
-        setStyle({ position: "fixed", top, left, zIndex: 1000 });
-    }, [anchorRef, position]);
-    // Reposition on open + observe scroll/resize on all ancestors
-    useEffect(() => {
-        if (!isOpen)
-            return;
-        reposition();
-        // Re-measure after the popup renders to get its actual size
-        requestAnimationFrame(reposition);
-        const handleUpdate = () => reposition();
-        window.addEventListener("resize", handleUpdate);
-        window.addEventListener("scroll", handleUpdate, true); // capture phase catches all scrollable ancestors
-        return () => {
-            window.removeEventListener("resize", handleUpdate);
-            window.removeEventListener("scroll", handleUpdate, true);
-        };
-    }, [isOpen, reposition]);
-    // Close on outside click — checks both anchor and popup
-    useEffect(() => {
-        if (!isOpen)
-            return;
-        const handleMouseDown = (e) => {
-            const target = e.target;
-            if (anchorRef.current?.contains(target) ||
-                popupRef.current?.contains(target))
-                return;
-            onClose();
-        };
-        document.addEventListener("mousedown", handleMouseDown);
-        return () => document.removeEventListener("mousedown", handleMouseDown);
-    }, [isOpen, onClose, anchorRef]);
-    const renderPopup = useCallback((children) => {
-        if (!isOpen)
-            return null;
-        return createPortal(children, document.body);
-    }, [isOpen]);
-    return { popupRef, popupStyle: style, renderPopup };
+        // No width override — the calendar has its own intrinsic size
+        return { top, left };
+    }, [position]);
+    const { panelRef, panelStyle, renderPanel } = useDropdownPortal({
+        anchorRef,
+        isOpen,
+        onClose,
+        positionStrategy: pickerStrategy,
+    });
+    // Expose original API names so CwDatePicker needs zero changes
+    return { popupRef: panelRef, popupStyle: panelStyle, renderPopup: renderPanel };
 }
 
 function CwDatePicker({ value, onChange, minDate, maxDate, disabledDates, disabledMatcher, defaultMonth, labelProps, alignProps, placeholder = "Select a date", displayFormat = "dd.MM.yyyy", disabled, required, className, showClear = true, popupPosition = "left-bottom", numberOfMonths = 1, showTodayButton = false, locale = enGB, todayLabel = "Today", feedback, }) {
@@ -6818,6 +7034,208 @@ function CwDateTimePickerCompact({ value, onChange, minDateTime, maxDateTime, di
                                             }) })] })] }))] })] }) }));
 }
 
+/**
+ * Resolves a 2-digit year into a 4-digit year using a sliding window
+ * based on the current year. The window spans from (currentYear - 80)
+ * to (currentYear + 19), so two-digit years are always mapped to the
+ * nearest century within that 100-year range.
+ *
+ * Example (currentYear = 2026):
+ *   00–46 → 2000–2046
+ *   47–99 → 1947–1999
+ */
+function resolveTwoDigitYear(twoDigitYear, currentYear) {
+    const refYear = Temporal.Now.plainDateISO().year;
+    const windowEnd = refYear + 20;
+    const century = Math.floor(windowEnd / 100) * 100;
+    const cutoff = windowEnd % 100;
+    if (twoDigitYear <= cutoff) {
+        return century + twoDigitYear;
+    }
+    return century - 100 + twoDigitYear;
+}
+const parseDate = (dateString, formatStr) => {
+    try {
+        if (dateString.length < 10) {
+            return undefined;
+        }
+        const cleanString = dateString.trim();
+        if (!cleanString)
+            return undefined;
+        const parts = cleanString.split(/[\/\-.]/);
+        if (parts.length !== 3)
+            return undefined;
+        let day;
+        let month;
+        let year;
+        const formatLower = formatStr.toLowerCase();
+        const dayIndex = formatLower.indexOf("dd");
+        const monthIndex = formatLower.indexOf("mm");
+        const yearIndex = formatLower.indexOf("yyyy") !== -1
+            ? formatLower.indexOf("yyyy")
+            : formatLower.indexOf("yy");
+        const positions = [
+            { type: "day", index: dayIndex },
+            { type: "month", index: monthIndex },
+            { type: "year", index: yearIndex },
+        ].sort((a, b) => a.index - b.index);
+        positions.forEach((pos, idx) => {
+            const v = parseInt(parts[idx], 10);
+            if (pos.type === "day")
+                day = v;
+            else if (pos.type === "month")
+                month = v;
+            else if (pos.type === "year")
+                year = v;
+        });
+        if (day === undefined || month === undefined || year === undefined)
+            return undefined;
+        if (isNaN(day) || isNaN(month) || isNaN(year))
+            return undefined;
+        if (year < 100) {
+            year = resolveTwoDigitYear(year);
+        }
+        return Temporal.PlainDate.from({ year, month, day });
+    }
+    catch {
+        return undefined;
+    }
+};
+const validate = (parsed, minDate, maxDate) => {
+    if (!parsed)
+        return false;
+    const isValid = (!minDate || Temporal.PlainDate.compare(parsed, minDate) >= 0)
+        && (!maxDate || Temporal.PlainDate.compare(parsed, maxDate) <= 0);
+    return parsed && isValid;
+};
+/** Temporal.PlainDate -> JS Date (for DayPicker interop) */
+function plainDateToJsDate(pd) {
+    return new Date(pd.year, pd.month - 1, pd.day);
+}
+/** JS Date -> Temporal.PlainDate */
+function jsDateToPlainDate(d) {
+    return Temporal.PlainDate.from({
+        year: d.getFullYear(),
+        month: d.getMonth() + 1,
+        day: d.getDate(),
+    });
+}
+/** Format a PlainDate using a simple format string (dd, MM, yyyy tokens) */
+function formatPlainDate(pd, fmt) {
+    return fmt
+        .replace("yyyy", String(pd.year).padStart(4, "0"))
+        .replace("yy", String(pd.year % 100).padStart(2, "0"))
+        .replace("MM", String(pd.month).padStart(2, "0"))
+        .replace("dd", String(pd.day).padStart(2, "0"));
+}
+
+function CwDatePickerTemporal({ value, onChange, minDate, maxDate, disabledDates, disabledMatcher, defaultMonth, labelProps, alignProps, placeholder = "Select a date", displayFormat = "dd.MM.yyyy", disabled, required, className, showClear = true, popupPosition = "left-bottom", numberOfMonths = 1, showTodayButton = false, todayLabel = "Today", feedback, }) {
+    const [isOpen, setIsOpen] = useState(false);
+    const [inputValue, setInputValue] = useState();
+    const containerRef = useRef(null);
+    const feedbackMessages = feedback
+        ? Array.isArray(feedback) ? feedback : [feedback]
+        : [];
+    const wrapperRef = useRef(null);
+    const inputRef = useRef(null);
+    const prevValueRef = useRef(undefined);
+    const prevDisplayFormatRef = useRef(displayFormat);
+    const formatInputValue = useCallback((date) => {
+        return date ? formatPlainDate(date, displayFormat) : "";
+    }, [displayFormat]);
+    const handleClose = useCallback(() => setIsOpen(false), []);
+    const { popupRef, popupStyle, renderPopup } = usePickerPopup({
+        anchorRef: wrapperRef,
+        isOpen,
+        onClose: handleClose,
+        position: popupPosition,
+    });
+    // Sync input value with prop value
+    useEffect(() => {
+        const currentStr = value?.toString();
+        const prevStr = prevValueRef.current?.toString();
+        if (currentStr !== prevStr || prevDisplayFormatRef.current !== displayFormat) {
+            prevValueRef.current = value;
+            prevDisplayFormatRef.current = displayFormat;
+            setInputValue(formatInputValue(value));
+        }
+    }, [value, displayFormat, formatInputValue]);
+    const handleDaySelect = useCallback((date) => {
+        if (date) {
+            onChange(jsDateToPlainDate(date));
+        }
+        else {
+            onChange(undefined);
+        }
+        setIsOpen(false);
+        inputRef.current?.blur();
+    }, [onChange]);
+    const handleClear = useCallback((e) => {
+        e.stopPropagation();
+        onChange(undefined);
+        setInputValue(formatInputValue());
+    }, [formatInputValue, onChange]);
+    const handleInputClick = useCallback(() => {
+        if (!disabled) {
+            setIsOpen(true);
+        }
+    }, [disabled]);
+    const handleInputChange = useCallback((e) => {
+        const newValue = e.target.value;
+        setInputValue(newValue);
+        const parsed = parseDate(newValue, displayFormat);
+        const valid = validate(parsed, minDate, maxDate);
+        onChange(valid ? parsed : undefined);
+    }, [displayFormat, minDate, maxDate, onChange]);
+    const handleInputBlur = useCallback(() => {
+        const trimmedValue = inputValue?.trim();
+        if (trimmedValue) {
+            const parsed = parseDate(trimmedValue, displayFormat);
+            if (validate(parsed, minDate, maxDate)) {
+                onChange(parsed);
+                setInputValue(formatInputValue(parsed));
+                return;
+            }
+        }
+        setInputValue(formatInputValue(value));
+    }, [displayFormat, formatInputValue, inputValue, minDate, maxDate, onChange, value]);
+    const handleInputKeyDown = useCallback((e) => {
+        if (e.key === "Enter") {
+            e.preventDefault();
+            inputRef.current?.blur();
+            setIsOpen(false);
+        }
+        else if (e.key === "Escape") {
+            setIsOpen(false);
+            inputRef.current?.blur();
+        }
+    }, []);
+    const handleTodayClick = useCallback(() => {
+        const today = Temporal.Now.plainDateISO();
+        const isTodayValid = validate(today, minDate, maxDate);
+        if (isTodayValid) {
+            onChange(today);
+            setIsOpen(false);
+        }
+    }, [minDate, maxDate, onChange]);
+    // Memoize disabled days (convert PlainDate[] to Date[] for DayPicker)
+    const disabledDays = useMemo(() => [
+        ...(disabledDates?.map(plainDateToJsDate) || []),
+        ...(minDate ? [{ before: plainDateToJsDate(minDate) }] : []),
+        ...(maxDate ? [{ after: plainDateToJsDate(maxDate) }] : []),
+        ...(disabledMatcher ? [disabledMatcher] : []),
+    ], [disabledDates, minDate, maxDate, disabledMatcher]);
+    const selectedJsDate = value ? plainDateToJsDate(value) : undefined;
+    const defaultMonthJsDate = defaultMonth
+        ? new Date(defaultMonth.year, defaultMonth.month - 1, 1)
+        : selectedJsDate;
+    return (jsxs("div", { ref: containerRef, className: `cw-datepicker ${className || ""}`, children: [jsxs(CwAlign, { ...alignProps, itemProp: required ? "required" : "", children: [labelProps && (jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsxs("div", { ref: wrapperRef, className: styles$4.pickerWrapper, children: [jsx("input", { ref: inputRef, type: "text", value: inputValue, placeholder: placeholder, onChange: handleInputChange, onBlur: handleInputBlur, onClick: handleInputClick, onKeyDown: handleInputKeyDown, disabled: disabled, required: required }), jsx("div", { className: styles$4.pickerIcons, children: showClear && value && !disabled ? (jsx(CwButton, { type: "button", variant: "icon", color: "neutral", icon: "close", onClick: handleClear, tabIndex: -1, "aria-label": "Clear date" })) : (jsx(CwIcon, { iconId: "calendar" })) }), renderPopup(jsxs("div", { ref: popupRef, className: styles$4.pickerPopup, style: popupStyle, children: [jsx(DayPicker, { mode: "single", selected: selectedJsDate, defaultMonth: defaultMonthJsDate, onSelect: handleDaySelect, disabled: disabledDays, numberOfMonths: numberOfMonths, modifiers: {
+                                            today: new Date(),
+                                        }, modifiersClassNames: {
+                                            today: "rdp-day-today",
+                                        } }), showTodayButton && (jsx("footer", { className: "cw-flex-row cw-align-right-center", children: jsx(CwButton, { type: "button", variant: "outline", onClick: handleTodayClick, text: todayLabel }) }))] }))] })] }), feedbackMessages.map((feedbackItem, index) => (jsx("p", { className: "cw-input-info", "data-color": feedbackItem.type, children: feedbackItem.message }, index)))] }));
+}
+
 const ResourcesTitleList = ({ resources, canBePinned, includesPinned, onCrewPinning, onClickResourceContextMenu, ResourceTitleComponent, }) => {
     const onClickContextMenu = useCallback((key, resource) => {
         if (onClickResourceContextMenu) {
@@ -9304,6 +9722,24 @@ const SuperScheduler = ({ id, state, header, rows, events, pinnedOrderCategory,
                             }, children: "Clear pinned" }) })] })), jsx(Scheduler, { id: `${id}-notPinned`, state: { ...state, isHeaderVisible: !isFirstVisible }, header: header, rows: notPinnedRows, events: events, backgroundEvents: backgroundEvents, indicatorRows: indicatorRows, contextMenuItems: contextMenuItems, orderCategories: unPinnedOrderCategory, onEvent: onEvent, EventComp: SchedulerEvent, RowTitleComp: PinRowHeader, rowHeightRem: rowHeightRem })] }));
 };
 
+/**
+ * API-backed airport search input for WinOps.
+ *
+ * Fetches matching airports from the WinOps backend as the user types (debounced).
+ * Renders results in a shared `cw-choice-dropdown` styled panel with keyboard navigation.
+ * Supports pre-selecting an airport by `value` (AptKey) and customising the displayed text
+ * format via `displayMode`.
+ *
+ * Requires a running WinOps backend — set `cblConfig` to its base URL.
+ *
+ * @example
+ * <CwFindAirport
+ *   cblConfig="https://localhost:44300"
+ *   handleChange={(key) => setAirportKey(key)}
+ *   labelProps={{ text: 'Departure Airport' }}
+ *   displayMode="iata-only"
+ * />
+ */
 const CwFindAirport = ({ handleChange, searchType = "OnlyDatabase", placeHolder = "Search airport…", required = false, cblConfig, className = "", value, disabled = false, displayMode, initialDisplayText, labelProps, alignProps, width }) => {
     // State
     const [inputValue, setInputValue] = useState("");
@@ -9316,8 +9752,13 @@ const CwFindAirport = ({ handleChange, searchType = "OnlyDatabase", placeHolder
     const [tooltipText, setTooltipText] = useState("");
     // Refs
     const inputRef = useRef(null);
-    const dropdownRef = useRef(null);
+    const wrapperRef = useRef(null);
     const searchTimeoutRef = useRef();
+    const { panelRef, panelStyle, renderPanel } = useDropdownPortal({
+        anchorRef: wrapperRef,
+        isOpen: showDropdown && options.length > 0,
+        onClose: () => { setShowDropdown(false); setHighlightedIndex(-1); },
+    });
     // Utility function to extract ICAO from DisplayAirportText
     const extractIcao = useCallback((displayText) => {
         const match = displayText.match(/^([A-Z]{4})\(/);
@@ -9494,19 +9935,7 @@ const CwFindAirport = ({ handleChange, searchType = "OnlyDatabase", placeHolder
                 break;
         }
     };
-    // Handle clicks outside dropdown
-    useEffect(() => {
-        const handleClickOutside = (event) => {
-            if (dropdownRef.current &&
-                !dropdownRef.current.contains(event.target) &&
-                !inputRef.current?.contains(event.target)) {
-                setShowDropdown(false);
-                setHighlightedIndex(-1);
-            }
-        };
-        document.addEventListener("mousedown", handleClickOutside);
-        return () => document.removeEventListener("mousedown", handleClickOutside);
-    }, []);
+    // Handle clicks outside dropdown — now handled by useDropdownPortal
     // Load initial value
     useEffect(() => {
         if (value && value !== 0 && value !== -1) {
@@ -9548,9 +9977,25 @@ const CwFindAirport = ({ handleChange, searchType = "OnlyDatabase", placeHolder
     return (jsxs("div", { className: `cw-search-input ${className}`, style: {
             ...(width ? { width } : {}),
             ...(labelProps?.labelWidth ? { '--label-width': labelProps.labelWidth } : {})
-        }, "data-direction": direction, children: [jsxs(CwAlign, { ...alignProps, itemProp: required ? "required" : "", children: [labelProps && (jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsxs("div", { className: "cw-search-input-wrapper", children: [jsx("input", { ref: inputRef, type: "text", value: inputValue, onChange: handleInputChange, onKeyDown: handleKeyDown, onFocus: handleInputFocus, placeholder: isInitialLoading ? "Loading…" : placeHolder, disabled: disabled, required: required, autoComplete: "off", "aria-expanded": showDropdown, "aria-haspopup": "listbox", role: "combobox", title: tooltipText }), (isLoading || isInitialLoading) && (jsx("div", { className: "cw-search-input-loading", children: jsx(CwIcon, { iconId: "spinner" }) })), jsx("div", { className: "cw-search-input-icons", children: inputValue && !disabled && !isInitialLoading ? (jsx(CwButton, { type: "button", onClick: handleClear, "aria-label": "Clear selected airport", variant: "icon", icon: "close", color: "neutral" })) : (jsx(CwIcon, { iconId: "control-tower" })) })] })] }), showDropdown && options.length > 0 && (jsx("div", { ref: dropdownRef, className: "cw-input-search-dropdown", role: "listbox", children: jsx("ul", { children: options.map((option, index) => (jsx("li", { className: index === highlightedIndex ? "highlighted" : "", onClick: () => handleOptionSelect(option.value), onMouseDown: (e) => e.preventDefault(), role: "option", "aria-selected": index === highlightedIndex, children: option.text }, option.value))) }) }))] }));
+        }, "data-direction": direction, children: [jsxs(CwAlign, { ...alignProps, itemProp: required ? "required" : "", children: [labelProps && (jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsxs("div", { className: "cw-search-input-wrapper", ref: wrapperRef, children: [jsx("input", { ref: inputRef, type: "text", value: inputValue, onChange: handleInputChange, onKeyDown: handleKeyDown, onFocus: handleInputFocus, placeholder: isInitialLoading ? "Loading…" : placeHolder, disabled: disabled, required: required, autoComplete: "off", "aria-expanded": showDropdown, "aria-haspopup": "listbox", role: "combobox", title: tooltipText }), (isLoading || isInitialLoading) && (jsx("div", { className: "cw-search-input-loading", children: jsx(CwIcon, { iconId: "spinner" }) })), jsx("div", { className: "cw-search-input-icons", children: inputValue && !disabled && !isInitialLoading ? (jsx(CwButton, { type: "button", onClick: handleClear, "aria-label": "Clear selected airport", variant: "icon", icon: "close", color: "neutral" })) : (jsx(CwIcon, { iconId: "control-tower" })) })] })] }), renderPanel(jsx("div", { ref: panelRef, className: dropdownStyles.dropdown, style: panelStyle, role: "listbox", children: jsx("ul", { children: options.map((option, index) => (jsx("li", { className: `${dropdownStyles.option}${index === highlightedIndex ? ` ${dropdownStyles.optionFocused}` : ""}`, onClick: () => handleOptionSelect(option.value), onMouseDown: (e) => e.preventDefault(), onMouseEnter: () => setHighlightedIndex(index), role: "option", "aria-selected": index === highlightedIndex, children: option.text }, option.value))) }) }))] }));
 };
 
+/**
+ * API-backed crewmember search input for WinOps.
+ *
+ * Fetches matching crewmembers from the WinOps backend as the user types (debounced).
+ * Renders results in a shared `cw-choice-dropdown` styled panel with keyboard navigation.
+ * Supports pre-selecting a crewmember by numeric `value` (ID).
+ *
+ * Requires a running WinOps backend — set `cblConfig` to its base URL.
+ *
+ * @example
+ * <CwFindCrewmember
+ *   cblConfig="https://localhost:44300"
+ *   handleChange={(id) => setCrewId(id)}
+ *   labelProps={{ text: 'Crew Member' }}
+ * />
+ */
 const CwFindCrewmember = ({ handleChange, placeHolder = "Search crew…", required = false, cblConfig, className = "", value, disabled = false, initialDisplayText, labelProps, alignProps, width }) => {
     const [inputValue, setInputValue] = useState("");
     const [options, setOptions] = useState([]);
@@ -9561,8 +10006,13 @@ const CwFindCrewmember = ({ handleChange, placeHolder = "Search crew…", requir
     const [highlightedIndex, setHighlightedIndex] = useState(-1);
     const [tooltipText, setTooltipText] = useState("");
     const inputRef = useRef(null);
-    const dropdownRef = useRef(null);
+    const wrapperRef = useRef(null);
     const searchTimeoutRef = useRef();
+    const { panelRef, panelStyle, renderPanel } = useDropdownPortal({
+        anchorRef: wrapperRef,
+        isOpen: showDropdown && options.length > 0,
+        onClose: () => { setShowDropdown(false); setHighlightedIndex(-1); },
+    });
     const getDisplayText = useCallback((crew) => {
         return `${crew.threeLetterCode} - ${crew.lastName} ${crew.firstName}`;
     }, []);
@@ -9664,16 +10114,7 @@ const CwFindCrewmember = ({ handleChange, placeHolder = "Search crew…", requir
         }
     };
     useEffect(() => {
-        const handleClickOutside = (event) => {
-            if (dropdownRef.current &&
-                !dropdownRef.current.contains(event.target) &&
-                !inputRef.current?.contains(event.target)) {
-                setShowDropdown(false);
-                setHighlightedIndex(-1);
-            }
-        };
-        document.addEventListener("mousedown", handleClickOutside);
-        return () => document.removeEventListener("mousedown", handleClickOutside);
+        // Outside-click is now handled by useDropdownPortal
     }, []);
     useEffect(() => {
         if (value && value !== 0 && value !== -1) {
@@ -9712,7 +10153,7 @@ const CwFindCrewmember = ({ handleChange, placeHolder = "Search crew…", requir
     return (jsxs("div", { className: `cw-search-input ${className}`, style: {
             ...(width ? { width } : {}),
             ...(labelProps?.labelWidth ? { '--label-width': labelProps.labelWidth } : {})
-        }, "data-direction": direction, children: [jsxs(CwAlign, { ...alignProps, itemProp: required ? "required" : "", children: [labelProps && (jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsxs("div", { className: "cw-search-input-wrapper", children: [jsx("input", { ref: inputRef, type: "text", value: inputValue, onChange: handleInputChange, onKeyDown: handleKeyDown, onFocus: handleInputFocus, placeholder: isInitialLoading ? "Loading…" : placeHolder, disabled: disabled, required: required, autoComplete: "off", "aria-expanded": showDropdown, "aria-haspopup": "listbox", role: "combobox", title: tooltipText }), (isLoading || isInitialLoading) && (jsx("div", { className: "cw-search-input-loading", children: jsx(CwIcon, { iconId: "spinner" }) })), jsx("div", { className: "cw-search-input-icons", children: inputValue && !disabled && !isInitialLoading ? (jsx(CwButton, { type: "button", onClick: handleClear, "aria-label": "Clear selected crewmember", variant: "icon", icon: "close", color: "neutral" })) : (jsx(CwIcon, { iconId: "person" })) })] })] }), showDropdown && options.length > 0 && (jsx("div", { ref: dropdownRef, className: "cw-input-search-dropdown", role: "listbox", children: jsx("ul", { children: options.map((option, index) => (jsx("li", { className: index === highlightedIndex ? "highlighted" : "", onClick: () => handleOptionSelect(option.value), onMouseDown: (e) => e.preventDefault(), role: "option", "aria-selected": index === highlightedIndex, children: option.text }, option.value))) }) }))] }));
+        }, "data-direction": direction, children: [jsxs(CwAlign, { ...alignProps, itemProp: required ? "required" : "", children: [labelProps && (jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsxs("div", { className: "cw-search-input-wrapper", ref: wrapperRef, children: [jsx("input", { ref: inputRef, type: "text", value: inputValue, onChange: handleInputChange, onKeyDown: handleKeyDown, onFocus: handleInputFocus, placeholder: isInitialLoading ? "Loading…" : placeHolder, disabled: disabled, required: required, autoComplete: "off", "aria-expanded": showDropdown, "aria-haspopup": "listbox", role: "combobox", title: tooltipText }), (isLoading || isInitialLoading) && (jsx("div", { className: "cw-search-input-loading", children: jsx(CwIcon, { iconId: "spinner" }) })), jsx("div", { className: "cw-search-input-icons", children: inputValue && !disabled && !isInitialLoading ? (jsx(CwButton, { type: "button", onClick: handleClear, "aria-label": "Clear selected crewmember", variant: "icon", icon: "close", color: "neutral" })) : (jsx(CwIcon, { iconId: "person" })) })] })] }), renderPanel(jsx("div", { ref: panelRef, className: dropdownStyles.dropdown, style: panelStyle, role: "listbox", children: jsx("ul", { children: options.map((option, index) => (jsx("li", { className: `${dropdownStyles.option}${index === highlightedIndex ? ` ${dropdownStyles.optionFocused}` : ""}`, onClick: () => handleOptionSelect(option.value), onMouseDown: (e) => e.preventDefault(), onMouseEnter: () => setHighlightedIndex(index), role: "option", "aria-selected": index === highlightedIndex, children: option.text }, option.value))) }) }))] }));
 };
 
-export { CblDragAndDrop, CwAccordionContainer, CwAlign, CwAnchoredMenu, CwBtnDelete, CwBtnEdit, CwBtnSave, CwButton, CwCard, CwCardList, CwCheck, CwCheckbox, CwCheckboxGroup, CwChip, CwColorPicker, CwConfirmationPopup, CwContextMenu, CwDatePicker, CwDateRangePicker, CwDateTimePicker, CwDateTimePickerCompact, CwDialog, CwDialogManager, CwDigit, CwDisplayMessage, CwDropdownFilter, CwExpandable, CwFileUpload, CwFileUploadMultiple, CwFindAirport, CwFindCrewmember, CwGenericTooltip, CwHeadingMain, CwHeadingSecond, CwIcon, CwImageArea, CwImageGallery, CwImageZoom, CwInput, CwInputColor, CwInputDate, CwInputDatePicker, CwInputDateText, CwInputDatetime, CwInputImage, CwInputNumber, CwInputPhone, CwInputText, CwKeyValueList, CwLabel, CwLoading, CwLoadingSmall, CwMasterDetail, CwMessage, CwMessageManager, CwMessageType, CwModal, CwModalHover, CwModalReportFunctional, CwMultiFilter, CwMultiFilterTag, CwNote, CwOption, CwPopoverButton, CwReportModal, CwScheduler, CwSearchInput, CwSelect, CwSelectList, CwSelectListItems, CwSortableList, CwSortableTable, CwSuperScheduler, CwTable, CwTableGrouped, CwTableServerSide, CwTabs, CwTagSelector, CwTextArea, CwTime, CwTimePicker, CwToggle, CwTooltipManager, CwTooltipNew, CwTreeView, CwWeekdaySelector, DefaultRowHeader, OnClearPinned, OnClickContextMenu, OnClickEvent, OnClickRowEvent, OnClickRowHeader, OnClickUtc, OnDoubleClickEvent, OnDoubleClickRowEvent, OnDragEvent, OnDropCtrlEvent, OnDropEvent, OnEndClickHeaderEvent, OnLeftDragStart, OnMultiClickEvent, OnPinRow, OnRangeClickEvent, OnRightClickEvent, OnRightClickRow, OnRightDragStart, OnStartClickHeaderEvent, OnUnpinRow, PinRowHeader, Resource, Scheduler, SchedulerEvent, SuperScheduler, UiEvent, Weekdays, cblEvent, eventIsVisible, filterVisibleEvents, getDefaultDivisions, getEventSizes, itemsToMultiFilterTags, useCwMessage, useSortableList, useSortableTable };
+export { CblDragAndDrop, CwAccordionContainer, CwAlign, CwAnchoredMenu, CwBtnDelete, CwBtnEdit, CwBtnSave, CwButton, CwCard, CwCardList, CwCheck, CwCheckbox, CwCheckboxGroup, CwChip, CwColorPicker, CwConfirmationPopup, CwContextMenu, CwDatePicker, CwDatePickerTemporal, CwDateRangePicker, CwDateTimePicker, CwDateTimePickerCompact, CwDialog, CwDialogManager, CwDigit, CwDisplayMessage, CwDropdown, CwDropdownFilter, CwExpandable, CwFileUpload, CwFileUploadMultiple, CwFindAirport, CwFindCrewmember, CwGenericTooltip, CwHeadingMain, CwHeadingSecond, CwIcon, CwImageArea, CwImageGallery, CwImageZoom, CwInput, CwInputColor, CwInputDate, CwInputDatePicker, CwInputDateText, CwInputDatetime, CwInputImage, CwInputNumber, CwInputPhone, CwInputText, CwKeyValueList, CwLabel, CwLoading, CwLoadingSmall, CwMasterDetail, CwMessage, CwMessageManager, CwMessageType, CwModal, CwModalHover, CwModalReportFunctional, CwMultiFilter, CwMultiFilterTag, CwNote, CwOption, CwPopoverButton, CwReportModal, CwScheduler, CwSearchInput, CwSelect, CwSelectList, CwSelectListItems, CwSortableList, CwSortableTable, CwSuperScheduler, CwTable, CwTableGrouped, CwTableServerSide, CwTabs, CwTagSelector, CwTextArea, CwTime, CwTimePicker, CwToggle, CwTooltipManager, CwTooltipNew, CwTreeView, CwWeekdaySelector, DefaultRowHeader, OnClearPinned, OnClickContextMenu, OnClickEvent, OnClickRowEvent, OnClickRowHeader, OnClickUtc, OnDoubleClickEvent, OnDoubleClickRowEvent, OnDragEvent, OnDropCtrlEvent, OnDropEvent, OnEndClickHeaderEvent, OnLeftDragStart, OnMultiClickEvent, OnPinRow, OnRangeClickEvent, OnRightClickEvent, OnRightClickRow, OnRightDragStart, OnStartClickHeaderEvent, OnUnpinRow, PinRowHeader, Resource, Scheduler, SchedulerEvent, SuperScheduler, UiEvent, Weekdays, cblEvent, eventIsVisible, filterVisibleEvents, getDefaultDivisions, getEventSizes, itemsToMultiFilterTags, useCwMessage, useSortableList, useSortableTable };