@cwellt_software/cwellt-reactjs-lib 1.6.2 → 1.6.3

package/dist/index.cjs.js

@@ -1952,7 +1952,7 @@ function CwAlign(props) {
         }, children: props.children }));
 }
 
-var styles$t = {"card":"cw-card-module__card__HJUT0","clickable":"cw-card-module__clickable__Y-V3X","disabled":"cw-card-module__disabled__0wHh1","content":"cw-card-module__content__ma9qy","headerContent":"cw-card-module__headerContent__x4Jfl","footerTags":"cw-card-module__footerTags__80sSW"};
+var styles$t = {"card":"cw-card-module__card__HJUT0","content":"cw-card-module__content__ma9qy","clickable":"cw-card-module__clickable__Y-V3X","disabled":"cw-card-module__disabled__0wHh1","headerContent":"cw-card-module__headerContent__x4Jfl","footerTags":"cw-card-module__footerTags__80sSW"};
 
 /**
 * CwCard - A simple card component for displaying content in a contained format
@@ -1965,8 +1965,8 @@ var styles$t = {"card":"cw-card-module__card__HJUT0","clickable":"cw-card-module
 *   onDelete={confirmDeletion}
 *   footer="Last updated: 2 days ago"
 *   chips={[
-*     { label: 'Important', colorScheme: 'danger' },
-*     { label: 'Custom', colorScheme: 'custom', customColor: '#8a2be2' }
+*     { label: 'Important', color: 'danger' },
+*     { label: 'Custom', color: 'custom', customColor: '#8a2be2' }
 *   ]}
 * >
 *   <p>This is the main content of the card.</p>
@@ -2004,7 +2004,7 @@ const CwCard = ({ id, title, subtitle, alignment = 'center', children, footer, o
             role: 'button',
             tabIndex: 0,
             onClick: handleClick,
-        }), "data-variant": variant, "data-direction": resolvedDirection, "aria-busy": isLoading || undefined, children: [isLoading ? (jsxRuntime.jsxs("header", { children: [jsxRuntime.jsx("div", { className: styles$t.headerContent, "data-align": resolvedAlign, children: jsxRuntime.jsx(CwSkeleton, { width: "8rem", height: "1.5em" }) }), resolvedDirection === "column" && ActionsComponent] })) : (hasHeader && (jsxRuntime.jsxs("header", { children: [(title || subtitle) && (jsxRuntime.jsxs("div", { className: styles$t.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$t.content, children: isLoading ? jsxRuntime.jsx(CwSkeleton, { count: normalizeSkeletonCount(skeletonLines, 3) }) : children }), hasFooter && (isLoading ? (jsxRuntime.jsx("footer", { children: jsxRuntime.jsx("div", { className: styles$t.footerTags, children: jsxRuntime.jsx(CwSkeleton, { variant: "rect", width: "4rem", height: "1.5em", radius: "1rem" }) }) })) : (jsxRuntime.jsxs("footer", { children: [hasChips && (jsxRuntime.jsx("div", { className: styles$t.footerTags, children: chips.map((chip, index) => (jsxRuntime.jsx(CwChip, { label: chip.label, colorScheme: chip.colorScheme, className: styles$t.chip, ...(chip.customColor && { customColor: chip.customColor }), ...(chip.variant && { variant: chip.variant }), ...(chip.icon && { icon: chip.icon }) }, index))) })), footer && (jsxRuntime.jsx("div", { className: styles$t.footerContent, children: footer }))] }))), resolvedDirection === "row" && ActionsComponent] }));
+        }), "data-variant": variant, "data-direction": resolvedDirection, "aria-busy": isLoading || undefined, children: [isLoading ? (jsxRuntime.jsxs("header", { children: [jsxRuntime.jsx("div", { className: styles$t.headerContent, "data-align": resolvedAlign, children: jsxRuntime.jsx(CwSkeleton, { width: "8rem", height: "1.5em" }) }), resolvedDirection === "column" && ActionsComponent] })) : (hasHeader && (jsxRuntime.jsxs("header", { children: [(title || subtitle) && (jsxRuntime.jsxs("div", { className: styles$t.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$t.content, children: isLoading ? jsxRuntime.jsx(CwSkeleton, { count: normalizeSkeletonCount(skeletonLines, 3) }) : children }), hasFooter && (isLoading ? (jsxRuntime.jsx("footer", { children: jsxRuntime.jsx("div", { className: styles$t.footerTags, children: jsxRuntime.jsx(CwSkeleton, { variant: "rect", width: "4rem", height: "1.5em", radius: "1rem" }) }) })) : (jsxRuntime.jsxs("footer", { children: [hasChips && (jsxRuntime.jsx("div", { className: styles$t.footerTags, children: chips.map((chip, index) => (jsxRuntime.jsx(CwChip, { label: chip.label, color: chip.color, colorScheme: chip.colorScheme, className: styles$t.chip, ...(chip.customColor && { customColor: chip.customColor }), ...(chip.variant && { variant: chip.variant }), ...(chip.icon && { icon: chip.icon }) }, index))) })), footer && (jsxRuntime.jsx("div", { className: styles$t.footerContent, children: footer }))] }))), resolvedDirection === "row" && ActionsComponent] }));
 };
 
 var styles$s = {"cardContainer":"cw-card-list-module__cardContainer__l3YEh","pagination":"cw-card-list-module__pagination__5Ay78","pageInfo":"cw-card-list-module__pageInfo__uiMel","emptyState":"cw-card-list-module__emptyState__RlqiS"};
@@ -2221,9 +2221,6 @@ function CwTable({ columns, data, pagination = false, pageSizeOptions = [5, 10,
         return acc;
     }, {}));
     const [selectedKeys, setSelectedKeys] = React.useState(new Set(rowSelection?.selectedRowKeys || []));
-    React.useEffect(() => {
-        setCurrentPage(1);
-    }, [data]);
     React.useEffect(() => {
         setSelectedKeys(new Set(rowSelection?.selectedRowKeys || []));
     }, [rowSelection?.selectedRowKeys]);
@@ -2309,20 +2306,27 @@ function CwTable({ columns, data, pagination = false, pageSizeOptions = [5, 10,
             return newSet;
         });
     }, [rowSelection, rowKey, sortedData]);
+    const totalPages = React.useMemo(() => {
+        return pagination ? Math.ceil(sortedData.length / localItemsPerPage) : 1;
+    }, [sortedData, localItemsPerPage, pagination]);
+    // Keep the page when data changes (e.g. a row was edited); only clamp it when it no longer exists.
+    // Derived in render so a shrunk data set never shows an empty page for a frame.
+    const page = Math.min(currentPage, Math.max(1, totalPages));
+    React.useEffect(() => {
+        if (page !== currentPage)
+            setCurrentPage(page);
+    }, [page, currentPage]);
     const paginatedData = React.useMemo(() => {
         if (!sortedData)
             return [];
         if (!pagination)
             return sortedData;
-        const start = (currentPage - 1) * localItemsPerPage;
+        const start = (page - 1) * localItemsPerPage;
         return sortedData.slice(start, start + localItemsPerPage);
-    }, [sortedData, currentPage, localItemsPerPage, pagination]);
-    const totalPages = React.useMemo(() => {
-        return pagination ? Math.ceil(sortedData.length / localItemsPerPage) : 1;
-    }, [sortedData, localItemsPerPage, pagination]);
-    const handlePageChange = (page) => {
-        if (page >= 1 && page <= totalPages)
-            setCurrentPage(page);
+    }, [sortedData, page, localItemsPerPage, pagination]);
+    const handlePageChange = (target) => {
+        if (target >= 1 && target <= totalPages)
+            setCurrentPage(target);
     };
     const startResize = (e, key) => {
         e.preventDefault();
@@ -2383,7 +2387,7 @@ function CwTable({ columns, data, pagination = false, pageSizeOptions = [5, 10,
                                                         ? "sortable"
                                                         : sortConfig.direction === "asc"
                                                             ? "sortable-asc"
-                                                            : "sortable-desc" }))] }), jsxRuntime.jsx("span", { onMouseDown: (e) => startResize(e, col.key), className: "th-column-resizer" })] }, col.key)))] }) }), jsxRuntime.jsx("tbody", { children: renderTableBody() })] }), pagination && data.length > pageSizeOptions[0] && (jsxRuntime.jsxs("footer", { className: "cw-table-pagination", children: [jsxRuntime.jsxs("div", { className: "cw-table-pagination-size", children: [jsxRuntime.jsx(CwIcon, { iconId: "list" }), jsxRuntime.jsx("select", { value: localItemsPerPage, onChange: handleItemsPerPageChange, children: pageSizeOptions.map(size => (jsxRuntime.jsx("option", { value: size, children: pageLabel ? `${size} / ${pageLabel}` : size }, size))) })] }), jsxRuntime.jsxs("div", { className: "cw-table-pagination-nav", children: [jsxRuntime.jsx(CwButton, { onClick: () => handlePageChange(1), disabled: currentPage === 1 || totalPages <= 1, variant: "icon", icon: "chevron-left-double" }), jsxRuntime.jsx(CwButton, { onClick: () => handlePageChange(currentPage - 1), disabled: currentPage === 1 || totalPages <= 1, variant: "icon", icon: "chevron-left" }), jsxRuntime.jsx("input", { type: "text", inputMode: "numeric", value: totalPages === 0 ? 0 : currentPage, disabled: totalPages === 0, onChange: (e) => {
+                                                            : "sortable-desc" }))] }), jsxRuntime.jsx("span", { onMouseDown: (e) => startResize(e, col.key), className: "th-column-resizer" })] }, col.key)))] }) }), jsxRuntime.jsx("tbody", { children: renderTableBody() })] }), pagination && data.length > pageSizeOptions[0] && (jsxRuntime.jsxs("footer", { className: "cw-table-pagination", children: [jsxRuntime.jsxs("div", { className: "cw-table-pagination-size", children: [jsxRuntime.jsx(CwIcon, { iconId: "list" }), jsxRuntime.jsx("select", { value: localItemsPerPage, onChange: handleItemsPerPageChange, children: pageSizeOptions.map(size => (jsxRuntime.jsx("option", { value: size, children: pageLabel ? `${size} / ${pageLabel}` : size }, size))) })] }), jsxRuntime.jsxs("div", { className: "cw-table-pagination-nav", children: [jsxRuntime.jsx(CwButton, { onClick: () => handlePageChange(1), disabled: page === 1 || totalPages <= 1, variant: "icon", icon: "chevron-left-double" }), jsxRuntime.jsx(CwButton, { onClick: () => handlePageChange(page - 1), disabled: page === 1 || totalPages <= 1, variant: "icon", icon: "chevron-left" }), jsxRuntime.jsx("input", { type: "text", inputMode: "numeric", value: totalPages === 0 ? 0 : page, disabled: totalPages === 0, onChange: (e) => {
                                     const value = parseInt(e.target.value, 10);
                                     if (!isNaN(value))
                                         handlePageChange(value);
@@ -2392,7 +2396,7 @@ function CwTable({ columns, data, pagination = false, pageSizeOptions = [5, 10,
                                     if (isNaN(value) || value < 1 || value > totalPages) {
                                         handlePageChange(1);
                                     }
-                                }, min: 1, max: totalPages }), jsxRuntime.jsx("span", { children: "/" }), jsxRuntime.jsx("span", { children: totalPages }), jsxRuntime.jsx(CwButton, { onClick: () => handlePageChange(currentPage + 1), disabled: currentPage === totalPages || totalPages <= 1, variant: "icon", icon: "chevron-right" }), jsxRuntime.jsx(CwButton, { onClick: () => handlePageChange(totalPages), disabled: currentPage === totalPages || totalPages <= 1, variant: "icon", icon: "chevron-right-double" })] })] }))] }));
+                                }, min: 1, max: totalPages }), jsxRuntime.jsx("span", { children: "/" }), jsxRuntime.jsx("span", { children: totalPages }), jsxRuntime.jsx(CwButton, { onClick: () => handlePageChange(page + 1), disabled: page === totalPages || totalPages <= 1, variant: "icon", icon: "chevron-right" }), jsxRuntime.jsx(CwButton, { onClick: () => handlePageChange(totalPages), disabled: page === totalPages || totalPages <= 1, variant: "icon", icon: "chevron-right-double" })] })] }))] }));
 }
 
 var styles$q = {"dropIndicator":"cw-sortable-table-module__dropIndicator__ov-Jz","dragging":"cw-sortable-table-module__dragging__MrLrz","saveBar":"cw-sortable-table-module__saveBar__3OdoZ cw-flex-row cw-align-center-center cw-gap-small"};
@@ -5222,6 +5226,11 @@ function CwTagSelector({ id, options, value, onChange, labelProps, iconProps, al
         isOpen: open,
         onClose: () => { setOpen(false); setFocusedIndex(-1); },
     });
+    // Disabling while the panel is open closes it (state adjusted during render, no effect pass).
+    if (disabled && open) {
+        setOpen(false);
+        setFocusedIndex(-1);
+    }
     const selectedSet = React.useMemo(() => new Set(value), [value]);
     const filtered = React.useMemo(() => {
         if (!search)
@@ -5231,17 +5240,23 @@ function CwTagSelector({ id, options, value, onChange, labelProps, iconProps, al
     }, [options, selectedSet, search]);
     const selectedOptions = React.useMemo(() => value.map(v => options.find(o => o.value === v)).filter(Boolean), [value, options]);
     const handleSelect = React.useCallback((optionValue) => {
+        if (disabled)
+            return;
         onChange([...value, optionValue]);
         setSearch("");
         setFocusedIndex(-1);
         inputRef.current?.focus();
-    }, [value, onChange]);
+    }, [disabled, value, onChange]);
     const handleRemove = React.useCallback((optionValue) => {
+        if (disabled)
+            return;
         onChange(value.filter(v => v !== optionValue));
         inputRef.current?.focus();
-    }, [value, onChange]);
+    }, [disabled, value, onChange]);
     const allSelected = options.length > 0 && options.every(o => selectedSet.has(o.value));
     const handleToggleAll = React.useCallback(() => {
+        if (disabled)
+            return;
         if (allSelected) {
             onChange([]);
         }
@@ -5251,7 +5266,7 @@ function CwTagSelector({ id, options, value, onChange, labelProps, iconProps, al
         setSearch("");
         setFocusedIndex(-1);
         inputRef.current?.focus();
-    }, [allSelected, options, onChange]);
+    }, [disabled, allSelected, options, onChange]);
     const handleInputChange = React.useCallback((e) => {
         setSearch(e.currentTarget.value);
         if (!open)
@@ -5263,6 +5278,8 @@ function CwTagSelector({ id, options, value, onChange, labelProps, iconProps, al
             setOpen(true);
     }, [disabled]);
     const handleKeyDown = React.useCallback((e) => {
+        if (disabled)
+            return;
         if (e.key === "Backspace" && !search && value.length > 0) {
             onChange(value.slice(0, -1));
             return;
@@ -5307,7 +5324,7 @@ function CwTagSelector({ id, options, value, onChange, labelProps, iconProps, al
             e.preventDefault();
             setFocusedIndex(prev => (prev > 0 ? prev - 1 : 0));
         }
-    }, [open, search, value, filtered, focusedIndex, onChange, handleSelect]);
+    }, [disabled, open, search, value, filtered, focusedIndex, onChange, handleSelect]);
     // Scroll focused item into view
     React.useEffect(() => {
         if (focusedIndex >= 0 && listRef.current) {
@@ -9211,7 +9228,7 @@ function getStartEnd(day) {
     };
 }
 
-var styles$2 = {"hide-scrollbar":"new-scheduler-module__hide-scrollbar__33GG9","scheduler-event":"new-scheduler-module__scheduler-event__gphwn","scheduler-event-container":"new-scheduler-module__scheduler-event-container__-h1xm","time-marker":"new-scheduler-module__time-marker__2BejU","color-bars":"new-scheduler-module__color-bars__MhMF7","scheduler-event-text":"new-scheduler-module__scheduler-event-text__zjvd7"};
+var styles$2 = {"hide-scrollbar":"new-scheduler-module__hide-scrollbar__33GG9","scheduler-event":"new-scheduler-module__scheduler-event__gphwn","scheduler-event-container":"new-scheduler-module__scheduler-event-container__-h1xm","time-marker":"new-scheduler-module__time-marker__2BejU","underlay":"new-scheduler-module__underlay__RVCnV","label-halo":"new-scheduler-module__label-halo__84c7e","corner-marker":"new-scheduler-module__corner-marker__w7o90","color-bars":"new-scheduler-module__color-bars__MhMF7","scheduler-event-text":"new-scheduler-module__scheduler-event-text__zjvd7"};
 
 const BackgroundEvent = ({ value, heightRem }) => {
     const backColor = getHSLColor(value.color, value.alpha ?? 0.5);
@@ -9412,7 +9429,7 @@ const DefaultRowHeader = ({ value, width, onEvent }) => {
     return (jsxRuntime.jsxs("div", { style: {
             width: width,
             flexShrink: 0,
-            // background: color,
+            background: value.highlightColor,
         }, onClick: (_) => {
             onEvent(new OnClickRowHeader(value.rowId));
         }, className: styles$1["scheduler-row-header"], children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("strong", { children: value.title }), value.title2 && jsxRuntime.jsxs("span", { children: ["-", value.title2] }), " ", jsxRuntime.jsx("strong", { children: value.subtitle })] }), value.subtitle && jsxRuntime.jsxs("div", { style: { opacity: 0.5 }, children: [value.title3 && jsxRuntime.jsxs("span", { className: styles$1["scheduler-crewmember-functions"], children: ["(", value.title3, ")"] }), value.subtitle2 && jsxRuntime.jsxs("span", { children: ["-", value.subtitle2] })] })] }));
@@ -9505,7 +9522,7 @@ const SchedulerEvent = ({ value, heightRem, onEvent, maxEventHeightRem }) => {
                                 height: `calc(${effectiveHeight}rem - 4px)`,
                                 opacity: eventTransparent ? 0.5 : 1,
                                 ...value.style,
-                            }, className: styles$2["scheduler-event"], children: [jsxRuntime.jsxs("div", { style: {
+                            }, className: styles$2["scheduler-event"], "data-underlay": value.underlay ? true : undefined, children: [value.underlay && jsxRuntime.jsx("div", { className: styles$2["underlay"], children: value.underlay }), jsxRuntime.jsxs("div", { style: {
                                         display: "flex",
                                         flexDirection: "row",
                                         alignItems: "stretch",
@@ -9522,20 +9539,26 @@ const SchedulerEvent = ({ value, heightRem, onEvent, maxEventHeightRem }) => {
                                                         alignItems: "center",
                                                         whiteSpace: "nowrap",
                                                         color: textColor,
-                                                    }, children: value.icons }), jsxRuntime.jsx("span", { style: {
+                                                    }, children: value.icons }), jsxRuntime.jsx("span", { className: value.underlay ? styles$2["label-halo"] : undefined, style: {
                                                         padding: "0.1rem",
                                                         color: textColor,
                                                         display: "flex",
                                                         flex: 1,
                                                         alignItems: "center",
                                                         width: "100%",
-                                                    }, children: value.rectangleColors && value.rectangleColors.length > 0 ? (jsxRuntime.jsx("div", { className: styles$2["color-bars"], children: value.rectangleColors.map((item, i) => (jsxRuntime.jsx("div", { style: { backgroundColor: item } }, value.id + "_" + i))) })) : (value.name) })] }), value.isResizable && (jsxRuntime.jsx(EventSideDrag, { heightRem: effectiveHeight * 0.7, onStartEvent: () => {
+                                                        ...(value.underlay && { "--label-halo-color": backColor }),
+                                                    }, children: value.rectangleColors && value.rectangleColors.length > 0 ? (jsxRuntime.jsx("div", { className: styles$2["color-bars"], children: value.rectangleColors.map((item, i) => (jsxRuntime.jsx("div", { style: { backgroundColor: item } }, value.id + "_" + i))) })) : (value.label ?? value.name) })] }), value.isResizable && (jsxRuntime.jsx(EventSideDrag, { heightRem: effectiveHeight * 0.7, onStartEvent: () => {
                                                 onEvent(new OnRightDragStart(value.id));
                                             } }))] }), value.primaryTimeMarkerColor && (jsxRuntime.jsx("div", { className: styles$2["time-marker"], style: {
                                         backgroundColor: value.primaryTimeMarkerColor,
                                     } })), value.secondaryTimeMarkerColor && (jsxRuntime.jsx("div", { className: styles$2["time-marker"], style: {
                                         backgroundColor: value.secondaryTimeMarkerColor,
-                                    } }))] }) }) }, value.id) })] }));
+                                    } }))] }) }) }, value.id) }), value.cornerMarker && (jsxRuntime.jsx("div", { className: styles$2["corner-marker"], style: {
+                    top: `${topOffsetPx}px`,
+                    left: `${value.left}%`,
+                    width: `${value.width}%`,
+                    height: `calc(${effectiveHeight}rem - 4px)`,
+                }, children: jsxRuntime.jsx("span", { "data-interactive": value.cornerMarker.tooltip ? true : undefined, "data-pulse": value.cornerMarker.pulse ? true : undefined, children: value.cornerMarker.tooltip ? (jsxRuntime.jsx(CwTooltipNew, { content: value.cornerMarker.tooltip, position: "top", showDelay: 200, hide: isOnDrag, displayInline: true, children: jsxRuntime.jsx(CwBadge, { color: value.cornerMarker.color, size: "medium" }) })) : (jsxRuntime.jsx(CwBadge, { color: value.cornerMarker.color, size: "medium" })) }) }))] }));
 };
 
 const SchedulerRow = React.memo((props) => {