@cwellt_software/cwellt-reactjs-lib 1.5.5 → 1.6.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/content/icons/IconLibrary.stories.tsx +18 -0
- package/dist/index.cjs.js +117 -93
- package/dist/index.css +2 -2
- package/dist/index.d.ts +63 -42
- package/dist/index.es.js +117 -93
- package/dist/src/components/control/action/contextmenu/CwAnchoredMenu.d.ts +1 -1
- package/dist/src/components/control/action/contextmenu/CwAnchoredMenu.d.ts.map +1 -1
- package/dist/src/components/control/action/contextmenu/CwContextMenu.d.ts +2 -3
- package/dist/src/components/control/action/contextmenu/CwContextMenu.d.ts.map +1 -1
- package/dist/src/components/control/choice/dropdown/CwDropdownFilter.d.ts +4 -0
- package/dist/src/components/control/choice/dropdown/CwDropdownFilter.d.ts.map +1 -1
- package/dist/src/components/control/input/any/CwInput.d.ts +4 -0
- package/dist/src/components/control/input/any/CwInput.d.ts.map +1 -1
- package/dist/src/components/control/input/color/CwColorPicker.d.ts +2 -3
- package/dist/src/components/control/input/color/CwColorPicker.d.ts.map +1 -1
- package/dist/src/components/control/input/color/CwInputColor.d.ts +1 -2
- package/dist/src/components/control/input/color/CwInputColor.d.ts.map +1 -1
- package/dist/src/components/control/input/date-text/CwInputDateText.d.ts +4 -0
- package/dist/src/components/control/input/date-text/CwInputDateText.d.ts.map +1 -1
- package/dist/src/components/control/input/file/CwFileUploadMultiple.d.ts +1 -2
- package/dist/src/components/control/input/file/CwFileUploadMultiple.d.ts.map +1 -1
- package/dist/src/components/control/input/new-dates/CwDatePicker.d.ts +0 -1
- package/dist/src/components/control/input/new-dates/CwDatePicker.d.ts.map +1 -1
- package/dist/src/components/control/input/new-dates/CwDatePickerTemporal.d.ts +0 -1
- package/dist/src/components/control/input/new-dates/CwDatePickerTemporal.d.ts.map +1 -1
- package/dist/src/components/control/input/new-dates/CwDateRangePickerTemporal.d.ts +0 -1
- package/dist/src/components/control/input/new-dates/CwDateRangePickerTemporal.d.ts.map +1 -1
- package/dist/src/components/control/input/new-dates/CwDateTimePickerCompact.d.ts +0 -1
- package/dist/src/components/control/input/new-dates/CwDateTimePickerCompact.d.ts.map +1 -1
- package/dist/src/components/control/input/text/CwInputText.d.ts +3 -4
- package/dist/src/components/control/input/text/CwInputText.d.ts.map +1 -1
- package/dist/src/components/control/input/text-area/CwTextArea.d.ts +1 -1
- package/dist/src/components/control/input/text-area/CwTextArea.d.ts.map +1 -1
- package/dist/src/components/control/input/weekday/CwWeekdaySelector.d.ts +1 -2
- package/dist/src/components/control/input/weekday/CwWeekdaySelector.d.ts.map +1 -1
- package/dist/src/components/display/data/accordion/CwAccordionContainer.d.ts +2 -4
- package/dist/src/components/display/data/accordion/CwAccordionContainer.d.ts.map +1 -1
- package/dist/src/components/display/data/generic_tooltip/CwGenericTooltip.d.ts +4 -0
- package/dist/src/components/display/data/generic_tooltip/CwGenericTooltip.d.ts.map +1 -1
- package/dist/src/components/display/data/tooltip_manager/CwTooltip.d.ts +1 -2
- package/dist/src/components/display/data/tooltip_manager/CwTooltip.d.ts.map +1 -1
- package/dist/src/components/display/graphics/loading/CwLoading.d.ts +1 -1
- package/dist/src/components/display/graphics/loading/CwLoading.d.ts.map +1 -1
- package/dist/src/components/display/text/tag/CwChip.d.ts +9 -9
- package/dist/src/components/display/text/tag/CwChip.d.ts.map +1 -1
- package/dist/src/components/layout/card/CwCard.d.ts +17 -17
- package/dist/src/components/layout/card/CwCard.d.ts.map +1 -1
- package/dist/src/components/layout/confirmation-popup/CwConfirmationPopup.d.ts +5 -0
- package/dist/src/components/layout/confirmation-popup/CwConfirmationPopup.d.ts.map +1 -1
- package/dist/src/components/layout/dialog/CwDialog.d.ts +1 -1
- package/dist/src/components/layout/dialog/CwDialog.d.ts.map +1 -1
- package/dist/src/components/layout/list/details/CwExpandable.d.ts +2 -1
- package/dist/src/components/layout/list/details/CwExpandable.d.ts.map +1 -1
- package/dist/src/components/layout/modal/hover/CwModalHover.d.ts +2 -1
- package/dist/src/components/layout/modal/hover/CwModalHover.d.ts.map +1 -1
- package/dist/src/components/layout/table/grouped/CwTableGrouped.d.ts +1 -0
- package/dist/src/components/layout/table/grouped/CwTableGrouped.d.ts.map +1 -1
- package/package.json +11 -3
package/dist/index.cjs.js
CHANGED
|
@@ -8,7 +8,6 @@ var Draggable = require('react-draggable');
|
|
|
8
8
|
var dateFns = require('date-fns');
|
|
9
9
|
var locale = require('date-fns/locale');
|
|
10
10
|
var reactDayPicker = require('react-day-picker');
|
|
11
|
-
require('react-day-picker/dist/style.css');
|
|
12
11
|
var reactWindow = require('react-window');
|
|
13
12
|
|
|
14
13
|
function _interopNamespaceDefault(e) {
|
|
@@ -195,7 +194,7 @@ function getContrastColor(color) {
|
|
|
195
194
|
return `hsl(${hsl.h}, ${contrastS}%, ${targetL}%)`;
|
|
196
195
|
}
|
|
197
196
|
|
|
198
|
-
var styles$
|
|
197
|
+
var styles$z = {"cw-tooltip-content":"cw-tooltip-module__cw-tooltip-content__RZczd","cw-tooltip":"cw-tooltip-module__cw-tooltip__1KYig"};
|
|
199
198
|
|
|
200
199
|
// Constants
|
|
201
200
|
const margin$1 = 16;
|
|
@@ -485,7 +484,7 @@ const CwTooltipManager = () => {
|
|
|
485
484
|
if (!state.isVisible || !state.content) {
|
|
486
485
|
return null;
|
|
487
486
|
}
|
|
488
|
-
return reactDom.createPortal(jsxRuntime.jsx("div", { ref: tooltipRef, className: styles$
|
|
487
|
+
return reactDom.createPortal(jsxRuntime.jsx("div", { ref: tooltipRef, className: styles$z["cw-tooltip-content"], "data-position": actualPosition, "data-visible": state.isVisible, "data-inline": state.displayInline, style: {
|
|
489
488
|
top: `${tooltipPosition.top}px`,
|
|
490
489
|
left: `${tooltipPosition.left}px`,
|
|
491
490
|
opacity: (isPositioned && !isMeasuring) ? 1 : 0,
|
|
@@ -566,7 +565,7 @@ const CwTooltipNew = ({ children, content = null, position = "right", dissapears
|
|
|
566
565
|
React.useEffect(() => {
|
|
567
566
|
ensureTooltipManager();
|
|
568
567
|
}, []);
|
|
569
|
-
return (jsxRuntime.jsx("div", { ref: containerRef, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, style: overlayStyle, "data-inline": displayInline, className: styles$
|
|
568
|
+
return (jsxRuntime.jsx("div", { ref: containerRef, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, style: overlayStyle, "data-inline": displayInline, className: styles$z["cw-tooltip"], children: children }));
|
|
570
569
|
};
|
|
571
570
|
|
|
572
571
|
const SVG_ICONS = {
|
|
@@ -686,7 +685,7 @@ function resolveBadgeAria(label, loading, hasText) {
|
|
|
686
685
|
return hasText ? {} : { 'aria-hidden': 'true' };
|
|
687
686
|
}
|
|
688
687
|
|
|
689
|
-
var styles$
|
|
688
|
+
var styles$y = {"badge":"cw-badge-module__badge__PKlak"};
|
|
690
689
|
|
|
691
690
|
/**
|
|
692
691
|
* CwBadge - the small coloured circle with a number, used for alert and notification counts.
|
|
@@ -715,7 +714,7 @@ const CwBadge = ({ count, content, color = 'info', variant = 'solid', size = 'sm
|
|
|
715
714
|
? formatBadgeCount(count, max)
|
|
716
715
|
: undefined;
|
|
717
716
|
const isDot = !loading && !hasContent && count === undefined;
|
|
718
|
-
const badgeClassNames = ['cw-badge', styles$
|
|
717
|
+
const badgeClassNames = ['cw-badge', styles$y.badge, className].filter(Boolean).join(' ');
|
|
719
718
|
return (jsxRuntime.jsx("span", { className: badgeClassNames, "data-color": color, "data-variant": variant, "data-size": size, "data-loading": loading ? 'true' : undefined, "data-dot": isDot ? 'true' : undefined, ...resolveBadgeAria(label, loading, !loading && (hasContent || countText !== undefined)), style: style, children: loading ? jsxRuntime.jsx(CwIcon, { iconId: "spinner", size: "small" }) : hasContent ? content : countText }));
|
|
720
719
|
};
|
|
721
720
|
|
|
@@ -1103,7 +1102,7 @@ function CwLoading({ isLoading = false, text = '', size = 'regular', iconPositio
|
|
|
1103
1102
|
return (jsxRuntime.jsxs("div", { "aria-busy": isLoading, className: "cw-loading-container", "data-children": !!children, children: [overlay, jsxRuntime.jsx("div", { className: "cw-loading-disabled-content", children: children })] }));
|
|
1104
1103
|
}
|
|
1105
1104
|
|
|
1106
|
-
var styles$
|
|
1105
|
+
var styles$x = {"skeleton":"cw-skeleton-module__skeleton__Jvx2x","group":"cw-skeleton-module__group__Cm8AU"};
|
|
1107
1106
|
|
|
1108
1107
|
/*
|
|
1109
1108
|
* Internal helper for skeleton allocations (CwSkeleton, tables, cards).
|
|
@@ -1145,8 +1144,8 @@ function CwSkeleton({ variant = 'text', width, height, count = 1, radius, gap })
|
|
|
1145
1144
|
};
|
|
1146
1145
|
// The un-hashed cw-skeleton / cw-skeleton-group classes carry no styles in the
|
|
1147
1146
|
// library - they are stable public hooks for exceptional external overrides.
|
|
1148
|
-
const skeletonClassName = ['cw-skeleton', styles$
|
|
1149
|
-
const groupClassName = ['cw-skeleton-group', styles$
|
|
1147
|
+
const skeletonClassName = ['cw-skeleton', styles$x.skeleton].filter(Boolean).join(' ');
|
|
1148
|
+
const groupClassName = ['cw-skeleton-group', styles$x.group].filter(Boolean).join(' ');
|
|
1150
1149
|
const lineCount = normalizeSkeletonCount(count, 1);
|
|
1151
1150
|
if (lineCount <= 1) {
|
|
1152
1151
|
return (jsxRuntime.jsx("span", { className: skeletonClassName, "data-variant": variant, "aria-hidden": "true", style: style }));
|
|
@@ -1158,7 +1157,7 @@ function CwSkeleton({ variant = 'text', width, height, count = 1, radius, gap })
|
|
|
1158
1157
|
return (jsxRuntime.jsx("span", { className: groupClassName, "aria-hidden": "true", style: groupStyle, children: skeletonElements }));
|
|
1159
1158
|
}
|
|
1160
1159
|
|
|
1161
|
-
var styles$
|
|
1160
|
+
var styles$w = {"progress":"cw-progress-module__progress__d-g2-","value":"cw-progress-module__value__Q-DrH","header":"cw-progress-module__header__mv5ct","label":"cw-progress-module__label__jwOWp","track":"cw-progress-module__track__572-3","fill":"cw-progress-module__fill__fX1UA"};
|
|
1162
1161
|
|
|
1163
1162
|
/**
|
|
1164
1163
|
* CwProgress - a determinate or indeterminate progress bar.
|
|
@@ -1182,17 +1181,17 @@ function CwProgress({ value, indeterminate = false, label, rightLabel, size = 'r
|
|
|
1182
1181
|
const valueText = rightLabel ?? (percent !== undefined ? `${percent}%` : '');
|
|
1183
1182
|
// The un-hashed cw-progress class carries no styles in the library - a stable
|
|
1184
1183
|
// public hook for exceptional external overrides only.
|
|
1185
|
-
const rootClassName = ['cw-progress', styles$
|
|
1186
|
-
const labelSpan = label ? jsxRuntime.jsx("span", { className: styles$
|
|
1187
|
-
const valueLabel = showValue ? (jsxRuntime.jsx("span", { className: styles$
|
|
1188
|
-
return (jsxRuntime.jsxs("div", { className: rootClassName, "data-layout": layout, "data-size": size, "data-color": color, "data-prominent": prominent || undefined, "data-indeterminate": indeterminate || undefined, children: [layout === 'column' && (labelSpan || valueLabel) && (jsxRuntime.jsxs("header", { className: styles$
|
|
1184
|
+
const rootClassName = ['cw-progress', styles$w.progress, className].filter(Boolean).join(' ');
|
|
1185
|
+
const labelSpan = label ? jsxRuntime.jsx("span", { className: styles$w.label, id: labelId, children: label }) : null;
|
|
1186
|
+
const valueLabel = showValue ? (jsxRuntime.jsx("span", { className: styles$w.value, "data-mono": monoValue || undefined, children: valueText })) : null;
|
|
1187
|
+
return (jsxRuntime.jsxs("div", { className: rootClassName, "data-layout": layout, "data-size": size, "data-color": color, "data-prominent": prominent || undefined, "data-indeterminate": indeterminate || undefined, children: [layout === 'column' && (labelSpan || valueLabel) && (jsxRuntime.jsxs("header", { className: styles$w.header, children: [labelSpan, valueLabel] })), layout === 'row' && labelSpan, jsxRuntime.jsx("div", { className: styles$w.track, role: "progressbar", ...(label && { 'aria-labelledby': labelId }), ...(!indeterminate && percent !== undefined && {
|
|
1189
1188
|
'aria-valuenow': percent,
|
|
1190
1189
|
'aria-valuemin': 0,
|
|
1191
1190
|
'aria-valuemax': 100
|
|
1192
|
-
}), children: jsxRuntime.jsx("div", { className: styles$
|
|
1191
|
+
}), children: jsxRuntime.jsx("div", { className: styles$w.fill, style: !indeterminate && clamped !== undefined ? { width: `${clamped}%` } : undefined }) }), layout === 'row' && valueLabel] }));
|
|
1193
1192
|
}
|
|
1194
1193
|
|
|
1195
|
-
var styles$
|
|
1194
|
+
var styles$v = {"cw-generic-tooltip-content":"cw-generic-tooltip-module__cw-generic-tooltip-content__la-Si","cw-generic-tooltip":"cw-generic-tooltip-module__cw-generic-tooltip__Ij76M"};
|
|
1196
1195
|
|
|
1197
1196
|
// Constants moved outside to prevent recreation
|
|
1198
1197
|
const margin = 16;
|
|
@@ -1309,18 +1308,22 @@ const useTooltipPosition = (isVisible, containerRef, preferredPosition, tooltipC
|
|
|
1309
1308
|
*
|
|
1310
1309
|
* @see CwTooltipNew
|
|
1311
1310
|
*/
|
|
1311
|
+
/**
|
|
1312
|
+
* Portal-per-instance tooltip.
|
|
1313
|
+
* @deprecated Use {@link CwTooltipNew}: same API, one shared portal for every tooltip on the page.
|
|
1314
|
+
*/
|
|
1312
1315
|
const CwGenericTooltip = ({ children, content = null, position = defaultPosition, dissapearsWhenHover = false, hide = false, overlayStyle = {}, showDelay = 0, displayInline = false, }) => {
|
|
1313
1316
|
const [isVisible, setIsVisible] = React.useState(false);
|
|
1314
1317
|
const containerRef = React.useRef(null);
|
|
1315
1318
|
const { setTooltipTimeout, clearTooltipTimeout } = useTooltipDelay(() => {
|
|
1316
1319
|
setIsVisible(true);
|
|
1317
1320
|
}, showDelay);
|
|
1318
|
-
const { position: tooltipPosition, actualPosition } = useTooltipPosition(isVisible, containerRef, position, styles$
|
|
1321
|
+
const { position: tooltipPosition, actualPosition } = useTooltipPosition(isVisible, containerRef, position, styles$v["cw-generic-tooltip-content"]);
|
|
1319
1322
|
// Memoize tooltip content creation
|
|
1320
1323
|
const tooltipContent = React.useMemo(() => {
|
|
1321
1324
|
if (hide || !isVisible || !content)
|
|
1322
1325
|
return null;
|
|
1323
|
-
return reactDom.createPortal(jsxRuntime.jsx("div", { className: styles$
|
|
1326
|
+
return reactDom.createPortal(jsxRuntime.jsx("div", { className: styles$v["cw-generic-tooltip-content"], "data-position": actualPosition, "data-visible": isVisible, "data-inline": displayInline, style: {
|
|
1324
1327
|
position: 'fixed',
|
|
1325
1328
|
top: `${tooltipPosition.top}px`,
|
|
1326
1329
|
left: `${tooltipPosition.left}px`,
|
|
@@ -1335,7 +1338,7 @@ const CwGenericTooltip = ({ children, content = null, position = defaultPosition
|
|
|
1335
1338
|
clearTooltipTimeout();
|
|
1336
1339
|
setIsVisible(false);
|
|
1337
1340
|
}, [clearTooltipTimeout]);
|
|
1338
|
-
return (jsxRuntime.jsxs("div", { ref: containerRef, className: styles$
|
|
1341
|
+
return (jsxRuntime.jsxs("div", { ref: containerRef, className: styles$v["cw-generic-tooltip"], onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, style: overlayStyle, "data-inline": displayInline, children: [tooltipContent, children] }));
|
|
1339
1342
|
};
|
|
1340
1343
|
|
|
1341
1344
|
const CwButton = React.forwardRef(function CwButton({ text, variant = 'solid', color = 'primary', size = 'medium', iconPosition = 'left', pressed, className = '', icon = "", title, tooltipPosition = "bottom", badge, children, ...buttonProps }, ref) {
|
|
@@ -1403,8 +1406,13 @@ function CwModal(custModalProps) {
|
|
|
1403
1406
|
return (jsxRuntime.jsx("div", { children: custModalProps.modalState && (jsxRuntime.jsxs("div", { className: custModalProps.classNameModalOverlay + " cwelltModalOverlay", children: [jsxRuntime.jsx("div", { className: "cwelltModalOverlayBg", onClick: custModalProps.onCloseModal }), jsxRuntime.jsx(Draggable, { disabled: isModalDisabled, axis: "both", nodeRef: draggableRef, children: jsxRuntime.jsxs("div", { className: custModalProps.classNameModal + " cwelltContainerModal", ref: draggableRef, style: widthModalDef !== "40em" ? modalStyle.widthCustomStyle : modalStyle.widthDefStyle, children: [jsxRuntime.jsxs("div", { className: "cwelltModalHeader", onMouseOver: cwelltOnMouseOverModal, onMouseOut: cwelltOnMouseOutModal, children: [jsxRuntime.jsx("div", { className: "cwelltModalTitle", children: custModalProps.titleModal }), jsxRuntime.jsx("button", { className: "cwelltBtnCloseModal", onClick: custModalProps.onCloseModal, children: jsxRuntime.jsx("span", { className: "cwelltCloseIcon" }) })] }), jsxRuntime.jsx("div", { className: "cwelltModalBody", children: jsxRuntime.jsx("div", { className: "cwelltContainerModalBody", style: { position: "relative" }, children: custModalProps.children }) }), isHide === false ? (jsxRuntime.jsx("footer", { className: "legacy-modal-footer", onMouseOver: cwelltOnMouseOverModal, onMouseOut: cwelltOnMouseOutModal, children: jsxRuntime.jsx(CwButton, { variant: "icon", icon: "save", title: "Save", onClick: custModalProps.onSaveModal, form: custModalProps.formSaveModal, hidden: custModalProps.HideBtnModal, type: custModalProps.HtmlSubmitModal }) })) : (jsxRuntime.jsx("div", { style: { display: "none" } }))] }) })] })) }));
|
|
1404
1407
|
}
|
|
1405
1408
|
|
|
1406
|
-
var styles$
|
|
1409
|
+
var styles$u = {"overlayPositioned":"CwConfirmationPopup-module__overlayPositioned__11qYB","popup":"CwConfirmationPopup-module__popup__ahPjM","message":"CwConfirmationPopup-module__message__MnNL4","buttons":"CwConfirmationPopup-module__buttons__fGYYE","button":"CwConfirmationPopup-module__button__ugYQE","confirmButton":"CwConfirmationPopup-module__confirmButton__rTP4S","cancelButton":"CwConfirmationPopup-module__cancelButton__Ry694"};
|
|
1407
1410
|
|
|
1411
|
+
/**
|
|
1412
|
+
* Small anchored confirmation for a destructive action.
|
|
1413
|
+
*
|
|
1414
|
+
* Preferably avoid using it, it needs a refactor.
|
|
1415
|
+
*/
|
|
1408
1416
|
function CwConfirmationPopup(props) {
|
|
1409
1417
|
const { isOpen, onConfirm, onCancel, message = "Are you sure you want to proceed?", confirmText = "Confirm", cancelText = "Cancel", placement = 'bottom', children } = props;
|
|
1410
1418
|
const triggerRef = React.useRef(null);
|
|
@@ -1467,15 +1475,15 @@ function CwConfirmationPopup(props) {
|
|
|
1467
1475
|
onCancel();
|
|
1468
1476
|
}
|
|
1469
1477
|
};
|
|
1470
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [renderChildren(), isOpen && (jsxRuntime.jsx("div", { className: styles$
|
|
1478
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [renderChildren(), isOpen && (jsxRuntime.jsx("div", { className: styles$u.overlayPositioned, onClick: handleOverlayClick, children: jsxRuntime.jsxs("div", { ref: popupRef, className: styles$u.popup, style: {
|
|
1471
1479
|
position: 'absolute',
|
|
1472
1480
|
top: `${position.top}px`,
|
|
1473
1481
|
left: `${position.left}px`,
|
|
1474
1482
|
transform: 'none'
|
|
1475
|
-
}, children: [jsxRuntime.jsx("p", { className: styles$
|
|
1483
|
+
}, children: [jsxRuntime.jsx("p", { className: styles$u.message, children: message }), jsxRuntime.jsxs("div", { className: styles$u.buttons, children: [jsxRuntime.jsx("button", { className: `${styles$u.button} ${styles$u.confirmButton}`, onClick: onConfirm, children: confirmText }), jsxRuntime.jsx("button", { className: `${styles$u.button} ${styles$u.cancelButton}`, onClick: onCancel, children: cancelText })] })] }) }))] }));
|
|
1476
1484
|
}
|
|
1477
1485
|
|
|
1478
|
-
var styles$
|
|
1486
|
+
var styles$t = {"cw-dialog-main":"cw-dialog-module__cw-dialog-main__cHxHt","cw-dialog-button-close":"cw-dialog-module__cw-dialog-button-close__9GRd8"};
|
|
1479
1487
|
|
|
1480
1488
|
// Helper function to parse size values
|
|
1481
1489
|
const parseSize = (size) => {
|
|
@@ -1748,7 +1756,7 @@ const CwDialog = props => {
|
|
|
1748
1756
|
}
|
|
1749
1757
|
}
|
|
1750
1758
|
}, [open]);
|
|
1751
|
-
const header = React.useMemo(() => (jsxRuntime.jsxs("header", { onMouseDown: handleMouseDown, children: [jsxRuntime.jsx("span", { children: headline }), customHeader || (jsxRuntime.jsx("button", { className: styles$
|
|
1759
|
+
const header = React.useMemo(() => (jsxRuntime.jsxs("header", { onMouseDown: handleMouseDown, children: [jsxRuntime.jsx("span", { children: headline }), customHeader || (jsxRuntime.jsx("button", { className: styles$t["cw-dialog-button-close"], onClick: onClose }))] })), [handleMouseDown, headline, customHeader, onClose]);
|
|
1752
1760
|
const content = React.useMemo(() => (jsxRuntime.jsx("section", { children: children })), [children]);
|
|
1753
1761
|
const footer = React.useMemo(() => (jsxRuntime.jsx("footer", { children: customFooter || (jsxRuntime.jsx(CwButton, { variant: "icon", icon: "save", title: "Save", onClick: onSave, tooltipPosition: "top", disabled: disableSave, "data-testid": "cw-dialog-save" })) })), [customFooter, onSave, disableSave]);
|
|
1754
1762
|
const resizeHandles = React.useMemo(() => size.autoHeight
|
|
@@ -1775,7 +1783,7 @@ const CwDialog = props => {
|
|
|
1775
1783
|
: `${convertFromPx(size.height, size.heightUnit)}${size.heightUnit}`;
|
|
1776
1784
|
return { displayWidth, displayHeight };
|
|
1777
1785
|
}, [size.width, size.height, size.widthUnit, size.heightUnit, size.autoHeight]);
|
|
1778
|
-
const dialogContent = (jsxRuntime.jsx("div", { "data-has-scrim": hasScrim, className: styles$
|
|
1786
|
+
const dialogContent = (jsxRuntime.jsx("div", { "data-has-scrim": hasScrim, className: styles$t["cw-dialog-main"], onMouseDown: handleScrimMouseDown, onMouseUp: handleScrimMouseUpOrLeave, onMouseLeave: handleScrimMouseUpOrLeave, "data-pressing": isPressingScrim, children: jsxRuntime.jsxs("dialog", { ...domProps, ref: dialogRef, style: {
|
|
1779
1787
|
left: `${position.x}px`,
|
|
1780
1788
|
top: `${position.y}px`,
|
|
1781
1789
|
width: displayDimensions.displayWidth,
|
|
@@ -1828,7 +1836,8 @@ class CwReportModal extends React__namespace.Component {
|
|
|
1828
1836
|
}
|
|
1829
1837
|
|
|
1830
1838
|
/**
|
|
1831
|
-
* A modal that appears when an element is hovered
|
|
1839
|
+
* A modal that appears when an element is hovered.
|
|
1840
|
+
* Preferably avoid using it, it needs a refactor.
|
|
1832
1841
|
* @param children Contents of the modal
|
|
1833
1842
|
* @param hovereable Element to hover to display the modal
|
|
1834
1843
|
* @param onFirstOpened Function to run only once when the modal opens for the first time
|
|
@@ -1936,7 +1945,7 @@ function CwAlign(props) {
|
|
|
1936
1945
|
}, children: props.children }));
|
|
1937
1946
|
}
|
|
1938
1947
|
|
|
1939
|
-
var styles$
|
|
1948
|
+
var styles$s = {"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"};
|
|
1940
1949
|
|
|
1941
1950
|
/**
|
|
1942
1951
|
* CwCard - A simple card component for displaying content in a contained format
|
|
@@ -1962,10 +1971,10 @@ const CwCard = ({ id, title, subtitle, alignment = 'center', children, footer, o
|
|
|
1962
1971
|
// Construct class names using CSS modules
|
|
1963
1972
|
const cardClassNames = [
|
|
1964
1973
|
'cw-card',
|
|
1965
|
-
styles$
|
|
1974
|
+
styles$s.card,
|
|
1966
1975
|
className,
|
|
1967
|
-
clickable ? styles$
|
|
1968
|
-
disabled ? styles$
|
|
1976
|
+
clickable ? styles$s.clickable : '',
|
|
1977
|
+
disabled ? styles$s.disabled : '',
|
|
1969
1978
|
].filter(Boolean).join(' ');
|
|
1970
1979
|
// Handle click event when card is clickable
|
|
1971
1980
|
const handleClick = () => {
|
|
@@ -1983,15 +1992,15 @@ const CwCard = ({ id, title, subtitle, alignment = 'center', children, footer, o
|
|
|
1983
1992
|
const hasFooter = hasChips || footer || (hasActions && resolvedDirection === "row");
|
|
1984
1993
|
// Actions component to reuse. While loading, each provided action renders a circular
|
|
1985
1994
|
// ghost sized to the CwButton icon footprint (2rem) - no interactive buttons.
|
|
1986
|
-
const ActionsComponent = hasActions && !disabled ? (jsxRuntime.jsx("div", { className: styles$
|
|
1995
|
+
const ActionsComponent = hasActions && !disabled ? (jsxRuntime.jsx("div", { className: styles$s.actions, children: isLoading ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [extraActions && jsxRuntime.jsx(CwSkeleton, { variant: "circle", height: "2rem" }), onEdit && jsxRuntime.jsx(CwSkeleton, { variant: "circle", height: "2rem" }), onDelete && jsxRuntime.jsx(CwSkeleton, { variant: "circle", height: "2rem" })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [extraActions ?? null, onEdit && jsxRuntime.jsx(CwButton, { variant: "icon", icon: "edit", onClick: onEdit }), onDelete && jsxRuntime.jsx(CwButton, { variant: "icon", icon: "delete", color: "danger", onClick: onDelete })] })) })) : null;
|
|
1987
1996
|
return (jsxRuntime.jsxs("div", { ...(id && { id }), className: cardClassNames, ...(style && { style }), ...(clickable && !isLoading && {
|
|
1988
1997
|
role: 'button',
|
|
1989
1998
|
tabIndex: 0,
|
|
1990
1999
|
onClick: handleClick,
|
|
1991
|
-
}), "data-variant": variant, "data-direction": resolvedDirection, "aria-busy": isLoading || undefined, children: [isLoading ? (jsxRuntime.jsxs("header", { children: [jsxRuntime.jsx("div", { className: styles$
|
|
2000
|
+
}), "data-variant": variant, "data-direction": resolvedDirection, "aria-busy": isLoading || undefined, children: [isLoading ? (jsxRuntime.jsxs("header", { children: [jsxRuntime.jsx("div", { className: styles$s.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$s.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$s.content, children: isLoading ? jsxRuntime.jsx(CwSkeleton, { count: normalizeSkeletonCount(skeletonLines, 3) }) : children }), hasFooter && (isLoading ? (jsxRuntime.jsx("footer", { children: jsxRuntime.jsx("div", { className: styles$s.footerTags, children: jsxRuntime.jsx(CwSkeleton, { variant: "rect", width: "4rem", height: "1.5em", radius: "1rem" }) }) })) : (jsxRuntime.jsxs("footer", { children: [hasChips && (jsxRuntime.jsx("div", { className: styles$s.footerTags, children: chips.map((chip, index) => (jsxRuntime.jsx(CwChip, { label: chip.label, colorScheme: chip.colorScheme, className: styles$s.chip, ...(chip.customColor && { customColor: chip.customColor }), ...(chip.variant && { variant: chip.variant }), ...(chip.icon && { icon: chip.icon }) }, index))) })), footer && (jsxRuntime.jsx("div", { className: styles$s.footerContent, children: footer }))] }))), resolvedDirection === "row" && ActionsComponent] }));
|
|
1992
2001
|
};
|
|
1993
2002
|
|
|
1994
|
-
var styles$
|
|
2003
|
+
var styles$r = {"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"};
|
|
1995
2004
|
|
|
1996
2005
|
/**
|
|
1997
2006
|
* Option to display in the CwSelect
|
|
@@ -2086,16 +2095,14 @@ function CwCardList({ items, renderCard, pageSize = 10, layout = 'grid', default
|
|
|
2086
2095
|
icon: sortDirection === 'asc' ? 'arrow-up' : 'arrow-down',
|
|
2087
2096
|
onClick: () => setSortDirection(prev => prev === 'asc' ? 'desc' : 'asc'),
|
|
2088
2097
|
title: `Sort ${sortDirection === 'asc' ? 'descending' : 'ascending'}`,
|
|
2089
|
-
}, value: sortKey, onChange: (e) => handleSortChange(e.target.value), children: sortOptions.map(option => (jsxRuntime.jsx(CwOption, { value: option.key, children: option.label }, option.key))) }) })), isLoading ? (jsxRuntime.jsx("div", { className: `${styles$
|
|
2098
|
+
}, value: sortKey, onChange: (e) => handleSortChange(e.target.value), children: sortOptions.map(option => (jsxRuntime.jsx(CwOption, { value: option.key, children: option.label }, option.key))) }) })), isLoading ? (jsxRuntime.jsx("div", { className: `${styles$r.cardContainer}`, "data-layout": layout, style: gridStyle, "aria-busy": true, children: Array.from({ length: normalizeSkeletonCount(skeletonCards, 6) }, (_, index) => (jsxRuntime.jsx(CwCard, { isLoading: true, children: null }, `skeleton_${index}`))) })) : sortedItems.length === 0 ? (jsxRuntime.jsx("div", { className: styles$r.emptyState, children: emptyState || jsxRuntime.jsx("p", { children: "No items to display" }) })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: `${styles$r.cardContainer}`, "data-layout": layout, style: gridStyle, children: visibleItems.map((item, index) => (jsxRuntime.jsx(React.Fragment, { children: renderCard(item, index) }, keyExtractor ? keyExtractor(item, index) : index))) }), totalPages > 1 && (jsxRuntime.jsxs("div", { className: styles$r.pagination, children: [jsxRuntime.jsx(CwButton, { variant: "icon", icon: "chevron-left", disabled: currentPage === 1, onClick: () => setCurrentPage(p => Math.max(1, p - 1)) }), jsxRuntime.jsxs("span", { className: styles$r.pageInfo, children: [currentPage, " / ", totalPages] }), jsxRuntime.jsx(CwButton, { variant: "icon", icon: "chevron-right", disabled: currentPage === totalPages, onClick: () => setCurrentPage(p => Math.min(totalPages, p + 1)) })] }))] }))] }));
|
|
2090
2099
|
}
|
|
2091
2100
|
|
|
2092
|
-
var styles$
|
|
2101
|
+
var styles$q = {"cw-accordion":"cw-accordion-module__cw-accordion__ErvlW","cw-accordion-body":"cw-accordion-module__cw-accordion-body__xlI8b"};
|
|
2093
2102
|
|
|
2094
2103
|
/**
|
|
2095
|
-
*
|
|
2096
|
-
* @
|
|
2097
|
-
* @remarks Previously CwAccordionContainer
|
|
2098
|
-
* @returns
|
|
2104
|
+
* Legacy collapsible section with its own header markup.
|
|
2105
|
+
* @deprecated Use {@link CwExpandable} instead.
|
|
2099
2106
|
*/
|
|
2100
2107
|
function CwAccordionContainer(CwelltAccordionContainerProps) {
|
|
2101
2108
|
// #region Hooks
|
|
@@ -2106,7 +2113,7 @@ function CwAccordionContainer(CwelltAccordionContainerProps) {
|
|
|
2106
2113
|
setVisible_accordionBody(!isVisible_accordionBody);
|
|
2107
2114
|
};
|
|
2108
2115
|
// #endregion
|
|
2109
|
-
return (jsxRuntime.jsxs("div", { className: styles$
|
|
2116
|
+
return (jsxRuntime.jsxs("div", { className: styles$q["cw-accordion"], style: CwelltAccordionContainerProps.style, "data-open": isVisible_accordionBody, children: [jsxRuntime.jsxs("header", { onClick: () => showAccordionBody(), children: [jsxRuntime.jsx("div", { children: CwelltAccordionContainerProps.desc_text }), jsxRuntime.jsx("button", { className: "cw-button-icon" })] }), jsxRuntime.jsx("div", { className: styles$q["cw-accordion-body"], children: CwelltAccordionContainerProps.children })] }));
|
|
2110
2117
|
}
|
|
2111
2118
|
|
|
2112
2119
|
/*
|
|
@@ -2348,7 +2355,7 @@ function CwTable({ columns, data, pagination = false, pageSizeOptions = [5, 10,
|
|
|
2348
2355
|
: classNameRow ?? "";
|
|
2349
2356
|
return (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsxs("tr", { className: `${dynamicClassName} ${hasClassNameRow(item) ? item.classNameRow : ""} ${isSelected ? "cw-table-row-selected" : ""}`, onClick: (e) => rowSelection && handleRowClick(item, e), "data-row-key": itemKey != null ? String(itemKey) : undefined, style: {
|
|
2350
2357
|
cursor: rowSelection ? "pointer" : "default",
|
|
2351
|
-
backgroundColor: isSelected ? "var(--cw-
|
|
2358
|
+
backgroundColor: isSelected ? "var(--cw-table-row-selected-background)" : undefined,
|
|
2352
2359
|
transition: "background-color 0.2s ease",
|
|
2353
2360
|
}, children: [expandedRowRender && (jsxRuntime.jsx("td", { className: "cw-table-col-action cw-table-col-expand", children: jsxRuntime.jsx("button", { onClick: () => handleRowExpand(item), className: `cw-button-icon ${expandedRowKey === itemKey
|
|
2354
2361
|
? "cwi-chevron-down"
|
|
@@ -2381,7 +2388,7 @@ function CwTable({ columns, data, pagination = false, pageSizeOptions = [5, 10,
|
|
|
2381
2388
|
}, 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" })] })] }))] }));
|
|
2382
2389
|
}
|
|
2383
2390
|
|
|
2384
|
-
var styles$
|
|
2391
|
+
var styles$p = {"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"};
|
|
2385
2392
|
|
|
2386
2393
|
/**
|
|
2387
2394
|
* Hook that provides state management for CwSortableTable.
|
|
@@ -2444,7 +2451,7 @@ function useSortableTable(initialItems) {
|
|
|
2444
2451
|
}
|
|
2445
2452
|
|
|
2446
2453
|
// ─── Drop indicator row ───────────────────────────────────────────────────────
|
|
2447
|
-
const DropIndicatorRow = ({ colSpan }) => (jsxRuntime.jsx("tr", { className: styles$
|
|
2454
|
+
const DropIndicatorRow = ({ colSpan }) => (jsxRuntime.jsx("tr", { className: styles$p.dropIndicator, "aria-hidden": true, children: jsxRuntime.jsx("td", { colSpan: colSpan, children: jsxRuntime.jsx("div", {}) }) }));
|
|
2448
2455
|
// ─── Loading skeleton ─────────────────────────────────────────────────────────
|
|
2449
2456
|
// Plain td cells (no local class): the ghost cells get the same global cw-table
|
|
2450
2457
|
// padding as real body cells, so row heights match the loaded rows exactly.
|
|
@@ -2547,11 +2554,11 @@ function CwSortableTable({ columns, data, rowKey = "key", onReorder, loading = f
|
|
|
2547
2554
|
return items.map((item, index) => {
|
|
2548
2555
|
const key = item[rowKey];
|
|
2549
2556
|
const isDragging = draggedItem?.[rowKey] === key;
|
|
2550
|
-
return (jsxRuntime.jsxs(React.Fragment, { children: [dropIndicatorIndex === index && (jsxRuntime.jsx(DropIndicatorRow, { colSpan: totalCols })), jsxRuntime.jsxs("tr", { draggable: true, onDragStart: (e) => handleDragStart(e, item), onDragOver: (e) => handleDragOver(e, index), onDragEnd: handleDragEnd, className: isDragging ? styles$
|
|
2557
|
+
return (jsxRuntime.jsxs(React.Fragment, { children: [dropIndicatorIndex === index && (jsxRuntime.jsx(DropIndicatorRow, { colSpan: totalCols })), jsxRuntime.jsxs("tr", { draggable: true, onDragStart: (e) => handleDragStart(e, item), onDragOver: (e) => handleDragOver(e, index), onDragEnd: handleDragEnd, className: isDragging ? styles$p.dragging : "", children: [showHandle && (jsxRuntime.jsx("td", { className: "cw-table-col-action", children: jsxRuntime.jsx(CwIcon, { iconId: "grip-dots", color: "neutral", style: { opacity: 0.75 } }) })), columns.map(col => (jsxRuntime.jsx("td", { className: col.className ?? "", style: col.width ? { width: col.width } : undefined, children: renderCell(item, col) }, `${String(key)}_${col.key}`)))] }), index === items.length - 1 && dropIndicatorIndex === items.length && (jsxRuntime.jsx(DropIndicatorRow, { colSpan: totalCols }))] }, String(key)));
|
|
2551
2558
|
});
|
|
2552
2559
|
};
|
|
2553
2560
|
// ── Render ──────────────────────────────────────────────────────────────
|
|
2554
|
-
return (jsxRuntime.jsxs("div", { className: `cw-table-container ${className ?? ""}`, style: containerStyle, "aria-busy": loading || undefined, children: [jsxRuntime.jsxs("table", { className: `cw-table cw-sortable-table ${tableClassName ?? ""}`, style: { width: "100%" }, children: [jsxRuntime.jsx("thead", { children: jsxRuntime.jsxs("tr", { children: [showHandle && jsxRuntime.jsx("th", { className: "cw-table-col-action" }), columns.map(col => (jsxRuntime.jsx("th", { className: col.className ?? "", style: col.width ? { width: col.width, minWidth: 50 } : undefined, children: col.title }, col.key)))] }) }), jsxRuntime.jsx("tbody", { children: renderBody() })] }), !loading && hasChanges && (jsxRuntime.jsxs("footer", { className: styles$
|
|
2561
|
+
return (jsxRuntime.jsxs("div", { className: `cw-table-container ${className ?? ""}`, style: containerStyle, "aria-busy": loading || undefined, children: [jsxRuntime.jsxs("table", { className: `cw-table cw-sortable-table ${tableClassName ?? ""}`, style: { width: "100%" }, children: [jsxRuntime.jsx("thead", { children: jsxRuntime.jsxs("tr", { children: [showHandle && jsxRuntime.jsx("th", { className: "cw-table-col-action" }), columns.map(col => (jsxRuntime.jsx("th", { className: col.className ?? "", style: col.width ? { width: col.width, minWidth: 50 } : undefined, children: col.title }, col.key)))] }) }), jsxRuntime.jsx("tbody", { children: renderBody() })] }), !loading && hasChanges && (jsxRuntime.jsxs("footer", { className: styles$p.saveBar, children: [jsxRuntime.jsx(CwButton, { variant: "outline", color: "neutral", icon: "undo", text: discardLabel, onClick: handleDiscard }), jsxRuntime.jsx(CwButton, { variant: "solid", color: "primary", icon: "save", text: saveLabel, onClick: () => handleSave(onReorder) })] }))] }));
|
|
2555
2562
|
}
|
|
2556
2563
|
|
|
2557
2564
|
/**
|
|
@@ -2723,7 +2730,7 @@ function CwTableServerSide({ columns, data, totalItems, pagination = false, page
|
|
|
2723
2730
|
const dynamicClassName = typeof classNameRow === "function" ? classNameRow(item) : (classNameRow ?? "");
|
|
2724
2731
|
return (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsxs("tr", { className: `${dynamicClassName} ${hasClassNameRow(item) ? item.classNameRow : ""} ${isSelected ? "cw-table-row-selected" : ""}`, onClick: (e) => rowSelection && handleRowClick(item, e), "data-row-key": itemKey != null ? String(itemKey) : undefined, style: {
|
|
2725
2732
|
cursor: rowSelection ? "pointer" : "default",
|
|
2726
|
-
backgroundColor: isSelected ? "var(--cw-
|
|
2733
|
+
backgroundColor: isSelected ? "var(--cw-table-row-selected-background)" : undefined,
|
|
2727
2734
|
transition: "background-color 0.2s ease",
|
|
2728
2735
|
}, children: [expandedRowRender && (jsxRuntime.jsx("td", { className: "cw-table-col-action cw-table-col-expand", children: jsxRuntime.jsx("button", { onClick: () => handleRowExpand(item), className: `cw-button-icon ${expandedRowKey === itemKey ? "cwi-chevron-down" : "cwi-chevron-right"}` }) })), columns.map((col) => (jsxRuntime.jsx("td", { className: col.className ?? "", children: col.render ? col.render(item) : col.dataIndex ? String(item[col.dataIndex] ?? "") : "" }, `${itemKey}_${col.key}`)))] }), expandedRowRender && expandedRowKey === itemKey && (jsxRuntime.jsx("tr", { className: "cw-table-row-expanded", children: jsxRuntime.jsx("td", { colSpan: getColSpan(), children: expandedRowRender(item) }) }))] }, String(itemKey)));
|
|
2729
2736
|
});
|
|
@@ -2752,7 +2759,7 @@ function CwTableServerSide({ columns, data, totalItems, pagination = false, page
|
|
|
2752
2759
|
}, min: 1, max: totalPages }), jsxRuntime.jsx("span", { children: "/" }), jsxRuntime.jsx("span", { children: totalPages }), jsxRuntime.jsx(CwButton, { onClick: () => handlePageChange(state.page + 1), disabled: state.page === totalPages || totalPages <= 1, variant: "icon", icon: "chevron-right" }), jsxRuntime.jsx(CwButton, { onClick: () => handlePageChange(totalPages), disabled: state.page === totalPages || totalPages <= 1, variant: "icon", icon: "chevron-right-double" })] })] }))] }));
|
|
2753
2760
|
}
|
|
2754
2761
|
|
|
2755
|
-
var styles$
|
|
2762
|
+
var styles$o = {"cw-tabs":"cw-tabs-module__cw-tabs__1pmji","cw-tabs-content":"cw-tabs-module__cw-tabs-content__HTp8d"};
|
|
2756
2763
|
|
|
2757
2764
|
const BADGE_COLOR_SCHEMES = ['primary', 'danger', 'warning', 'success', 'info', 'neutral'];
|
|
2758
2765
|
function isBadgeColorScheme(value) {
|
|
@@ -2806,15 +2813,16 @@ function CwTabs(CwTabsProps) {
|
|
|
2806
2813
|
const tabsListStyle = position === 'left' && CwTabsProps.tabsListWidth
|
|
2807
2814
|
? { minWidth: CwTabsProps.tabsListWidth }
|
|
2808
2815
|
: undefined;
|
|
2809
|
-
return (jsxRuntime.jsxs("div", { id: CwTabsProps.id, "data-testid": CwTabsProps.testId, className: styles$
|
|
2816
|
+
return (jsxRuntime.jsxs("div", { id: CwTabsProps.id, "data-testid": CwTabsProps.testId, className: styles$o['cw-tabs'] + (CwTabsProps.className ? ` ${CwTabsProps.className}` : "") + "", style: CwTabsProps.style, "data-tabs-position": position, children: [jsxRuntime.jsx("ul", { style: tabsListStyle, children: CwTabsProps.tabs.map(tab => {
|
|
2810
2817
|
const badgeScheme = tab.badgeColor && isBadgeColorScheme(tab.badgeColor) ? tab.badgeColor : undefined;
|
|
2811
2818
|
const rawBadgeColor = tab.badgeColor && !badgeScheme ? tab.badgeColor : undefined;
|
|
2812
2819
|
return (jsxRuntime.jsxs("li", { className: `${tab.key === activeTab ? "cw-tab-active" : ""}`, onClick: () => handleTabClick(tab), "data-active": tab.key === activeTab, "data-tab-key": tab.key, "data-badge-themed": tab.badgeColor ? "true" : undefined, children: [jsxRuntime.jsx(TabIcon, { icon: tab.icon }), tab.title, (tab.badge !== undefined || tab.badgeColor) && (jsxRuntime.jsx(CwBadge, { count: typeof tab.badge === 'number' ? tab.badge : undefined, content: typeof tab.badge === 'string' ? tab.badge : undefined, size: "medium", color: badgeScheme ?? 'primary', variant: badgeScheme ? 'solid' : 'soft', style: rawBadgeColor ? { backgroundColor: rawBadgeColor, color: getContrastColor(rawBadgeColor) } : undefined }))] }, tab.key));
|
|
2813
|
-
}) }), jsxRuntime.jsx("div", { className: styles$
|
|
2820
|
+
}) }), jsxRuntime.jsx("div", { className: styles$o['cw-tabs-content'], "data-active-tab-key": activeTab ?? undefined, style: CwTabsProps.contentHeight ? { '--tabs-height': CwTabsProps.contentHeight } : undefined, children: activeTab !== null && CwTabsProps.tabs.find(tab => tab.key === activeTab)?.content })] }));
|
|
2814
2821
|
}
|
|
2815
2822
|
|
|
2816
2823
|
/**
|
|
2817
|
-
* An expandable element with briefing and children displayed when clicked
|
|
2824
|
+
* An expandable element with briefing and children displayed when clicked.
|
|
2825
|
+
* Preferably avoid using it, it needs a refactor.
|
|
2818
2826
|
* @param briefing Title of the expandable
|
|
2819
2827
|
* @param onToggle Function to run when expandable is toggled open/closed
|
|
2820
2828
|
* @param onClose Function to run when expandable is closed
|
|
@@ -2837,7 +2845,7 @@ const CwExpandable = ({ briefing, onToggle, onOpen, onClose, children, ...detail
|
|
|
2837
2845
|
return (jsxRuntime.jsxs("details", { ref: myRef, ...detailsProps, className: "cw-expandable", children: [jsxRuntime.jsx("summary", { children: briefing }), children && jsxRuntime.jsx("section", { children: children })] }));
|
|
2838
2846
|
};
|
|
2839
2847
|
|
|
2840
|
-
var styles$
|
|
2848
|
+
var styles$n = {"cw-master-detail":"cw-master-detail-module__cw-master-detail__O8-FA","resizer":"cw-master-detail-module__resizer__hvGhL","detail":"cw-master-detail-module__detail__BG4Dm","skeletonRow":"cw-master-detail-module__skeletonRow__6BUgt","detailSkeleton":"cw-master-detail-module__detailSkeleton__GcDS4","detail-empty":"cw-master-detail-module__detail-empty__KFScK"};
|
|
2841
2849
|
|
|
2842
2850
|
/*
|
|
2843
2851
|
* Fixed rem widths for the ghosts: the master rows and detail panel size their
|
|
@@ -2881,12 +2889,12 @@ const CwMasterDetail = ({ id, className, style, items, selectedKey, onSelect, de
|
|
|
2881
2889
|
document.body.style.userSelect = '';
|
|
2882
2890
|
};
|
|
2883
2891
|
}, [isResizing, minMasterWidth, maxMasterWidth]);
|
|
2884
|
-
const rootClassName = [styles$
|
|
2892
|
+
const rootClassName = [styles$n['cw-master-detail'], className].filter(Boolean).join(' ');
|
|
2885
2893
|
return (jsxRuntime.jsxs("div", { id: id, ref: containerRef, className: rootClassName, style: style, "aria-busy": loading || undefined, children: [jsxRuntime.jsxs("aside", { style: { width: masterWidth, minWidth: masterWidth }, children: [showSearch && (jsxRuntime.jsx("search", { children: jsxRuntime.jsx("input", { type: "text", placeholder: searchPlaceholder, onChange: (e) => onSearch?.(e.target.value) }) })), masterHeader && (jsxRuntime.jsx("header", { children: masterHeader })), jsxRuntime.jsx("ul", { children: loading
|
|
2886
|
-
? Array.from({ length: skeletonRows }, (_unused, rowIndex) => (jsxRuntime.jsxs("li", { "aria-hidden": "true", children: [jsxRuntime.jsx(CwSkeleton, { variant: "circle", height: "2rem" }), jsxRuntime.jsxs("div", { className: styles$
|
|
2887
|
-
: items.map((item) => (jsxRuntime.jsx("li", { "data-master-key": item.key, "data-selected": item.key === selectedKey, "data-disabled": item.disabled, onClick: () => onSelect?.(item.key), children: item.content }, item.key))) }), masterFooter && (jsxRuntime.jsx("footer", { children: masterFooter }))] }), resizable && (jsxRuntime.jsx("div", { className: styles$
|
|
2894
|
+
? Array.from({ length: skeletonRows }, (_unused, rowIndex) => (jsxRuntime.jsxs("li", { "aria-hidden": "true", children: [jsxRuntime.jsx(CwSkeleton, { variant: "circle", height: "2rem" }), jsxRuntime.jsxs("div", { className: styles$n.skeletonRow, children: [jsxRuntime.jsx(CwSkeleton, { variant: "text", width: MASTER_TITLE_WIDTHS[rowIndex % MASTER_TITLE_WIDTHS.length] }), jsxRuntime.jsx(CwSkeleton, { variant: "text", width: MASTER_SUBTITLE_WIDTH })] })] }, `skeleton_${rowIndex}`)))
|
|
2895
|
+
: items.map((item) => (jsxRuntime.jsx("li", { "data-master-key": item.key, "data-selected": item.key === selectedKey, "data-disabled": item.disabled, onClick: () => onSelect?.(item.key), children: item.content }, item.key))) }), masterFooter && (jsxRuntime.jsx("footer", { children: masterFooter }))] }), resizable && (jsxRuntime.jsx("div", { className: styles$n.resizer, "data-resizing": isResizing, onMouseDown: handleMouseDown })), jsxRuntime.jsx("section", { className: styles$n.detail, children: loading ? (jsxRuntime.jsxs("div", { className: styles$n.detailSkeleton, "aria-hidden": "true", children: [jsxRuntime.jsx(CwSkeleton, { variant: "text", width: "14rem", height: "1.5em" }), jsxRuntime.jsx(CwSkeleton, { variant: "text", width: "22rem" }), jsxRuntime.jsx(CwSkeleton, { variant: "text", width: "18rem" }), jsxRuntime.jsx(CwSkeleton, { variant: "text", width: "20rem" })] })) : selectedKey && detailContent
|
|
2888
2896
|
? detailContent
|
|
2889
|
-
: (jsxRuntime.jsx("div", { className: styles$
|
|
2897
|
+
: (jsxRuntime.jsx("div", { className: styles$n['detail-empty'], children: emptyDetail ?? 'Select an item to view details' })) })] }));
|
|
2890
2898
|
};
|
|
2891
2899
|
|
|
2892
2900
|
/*
|
|
@@ -2926,7 +2934,7 @@ const CwKeyValueList = ({ items, className = "", emptyValue = "-", direction = "
|
|
|
2926
2934
|
return (jsxRuntime.jsx("dl", { className: `cw-keyvalue-list ${className}`, "data-direction": groupLayout?.direction, "data-align": groupLayout?.align, "data-justify": groupLayout?.justify, "data-gap": groupLayout?.gap, "aria-busy": loading || undefined, ...htmlProps, children: renderItems() }));
|
|
2927
2935
|
};
|
|
2928
2936
|
|
|
2929
|
-
var styles$
|
|
2937
|
+
var styles$m = {"sortableList":"cw-sortable-list-module__sortableList__PyLO-","sortableItem":"cw-sortable-list-module__sortableItem__FAnn2","readOnly":"cw-sortable-list-module__readOnly__r7GcH","dragging":"cw-sortable-list-module__dragging__MD715","moved":"cw-sortable-list-module__moved__sE6-N","expandedContent":"cw-sortable-list-module__expandedContent__Kocna","sortableHandle":"cw-sortable-list-module__sortableHandle__HvYBK","sortableContent":"cw-sortable-list-module__sortableContent__C6JhR","sortableTitle":"cw-sortable-list-module__sortableTitle__EgWXr","sortableExtraContent":"cw-sortable-list-module__sortableExtraContent__s4LSv","sortableActions":"cw-sortable-list-module__sortableActions__gwQOU","dropIndicator":"cw-sortable-list-module__dropIndicator__MNSF-","emptyMessage":"cw-sortable-list-module__emptyMessage__gMpaL"};
|
|
2930
2938
|
|
|
2931
2939
|
function CwSortableList({ items, onReorder, renderItem, className = '', movedItems = new Set(), emptyMessage = "No elements to show", readOnly = false, maxHeight = "300px", }) {
|
|
2932
2940
|
const [draggedItem, setDraggedItem] = React.useState(null);
|
|
@@ -2989,15 +2997,15 @@ function CwSortableList({ items, onReorder, renderItem, className = '', movedIte
|
|
|
2989
2997
|
}
|
|
2990
2998
|
};
|
|
2991
2999
|
if (items.length === 0) {
|
|
2992
|
-
return (jsxRuntime.jsx("div", { className: `${styles$
|
|
3000
|
+
return (jsxRuntime.jsx("div", { className: `${styles$m.sortableList} ${styles$m.emptyState} ${className}`, children: jsxRuntime.jsx("div", { className: styles$m.emptyMessage, children: emptyMessage }) }));
|
|
2993
3001
|
}
|
|
2994
|
-
return (jsxRuntime.jsx("div", { className: `${styles$
|
|
3002
|
+
return (jsxRuntime.jsx("div", { className: `${styles$m.sortableList} ${className}`, style: { maxHeight }, children: items.map((item, index) => {
|
|
2995
3003
|
const { title, extraContent, actions, showHandle = true, expandedContent } = renderItem(item);
|
|
2996
3004
|
const isDragging = draggedItem?.id === item.id;
|
|
2997
3005
|
const isMoved = movedItems.has(item.id);
|
|
2998
3006
|
const canExpand = Boolean(expandedContent);
|
|
2999
3007
|
const isExpanded = expandedItems.has(item.id);
|
|
3000
|
-
return (jsxRuntime.jsxs(React.Fragment, { children: [dropIndicatorIndex === index && jsxRuntime.jsx("div", { className: styles$
|
|
3008
|
+
return (jsxRuntime.jsxs(React.Fragment, { children: [dropIndicatorIndex === index && jsxRuntime.jsx("div", { className: styles$m.dropIndicator }), jsxRuntime.jsxs("div", { className: `${styles$m.sortableItem} ${isDragging ? styles$m.dragging : ''} ${isMoved ? styles$m.moved : ''} ${readOnly ? styles$m.readOnly : ''}`, draggable: !readOnly, onDragStart: (e) => handleDragStart(e, item), onDragOver: (e) => handleDragOver(e, index), onDragEnd: handleDragEnd, children: [jsxRuntime.jsxs("header", { children: [canExpand ? (jsxRuntime.jsx(CwButton, { variant: "icon", onClick: () => toggleExpanded(item.id), type: "button", title: isExpanded ? "Collapse" : "Expand", icon: isExpanded ? "chevron-up" : "chevron-down" })) : showHandle ? (jsxRuntime.jsx("div", { className: styles$m.sortableHandle, children: jsxRuntime.jsx(CwIcon, { iconId: "grip-dots" }) })) : null, jsxRuntime.jsxs("div", { className: styles$m.sortableContent, children: [jsxRuntime.jsx("div", { className: styles$m.sortableTitle, children: title }), extraContent && jsxRuntime.jsx("div", { className: styles$m.sortableExtraContent, children: extraContent })] }), jsxRuntime.jsx("div", { className: styles$m.sortableActions, children: actions })] }), isExpanded && expandedContent && (jsxRuntime.jsx("div", { className: styles$m.expandedContent, children: expandedContent }))] }), !readOnly && dropIndicatorIndex === items.length && index === items.length - 1 && (jsxRuntime.jsx("div", { className: styles$m.dropIndicator }))] }, item.id));
|
|
3001
3009
|
}) }));
|
|
3002
3010
|
}
|
|
3003
3011
|
|
|
@@ -3056,6 +3064,7 @@ function useSortableList(initialItems) {
|
|
|
3056
3064
|
|
|
3057
3065
|
/**
|
|
3058
3066
|
* A table with expandable row groups.
|
|
3067
|
+
* Preferably avoid using it, it needs a refactor.
|
|
3059
3068
|
* @param props The data to display
|
|
3060
3069
|
* @example
|
|
3061
3070
|
* const sampleTableData: CwTableGroupedData = {
|
|
@@ -3123,7 +3132,7 @@ const CwTableGrouped = props => {
|
|
|
3123
3132
|
group.rows.map((child, j) => (jsxRuntime.jsx("tr", { "data-row": true, "data-row-last-of-group": j == group.rows.length - 1, children: child.cells.map((cell, k) => (jsxRuntime.jsx("td", { children: cell.content }, k))) }, j)))] }, i))) }), jsxRuntime.jsx("tfoot", {})] }) }));
|
|
3124
3133
|
};
|
|
3125
3134
|
|
|
3126
|
-
var styles$
|
|
3135
|
+
var styles$l = {"fileUploadContainer":"cw-file-upload-multiple-module__fileUploadContainer__liEc1","hiddenInput":"cw-file-upload-multiple-module__hiddenInput__TZBBI","uploadArea":"cw-file-upload-multiple-module__uploadArea__DdOhs","uploadAreaDisabled":"cw-file-upload-multiple-module__uploadAreaDisabled__VWeFX","uploadTitle":"cw-file-upload-multiple-module__uploadTitle__gjRk8","uploadSubtitle":"cw-file-upload-multiple-module__uploadSubtitle__Z0S5t","filesContainer":"cw-file-upload-multiple-module__filesContainer__g44PY","fileItem":"cw-file-upload-multiple-module__fileItem__w27Dg","fileIcon":"cw-file-upload-multiple-module__fileIcon__iJJUX","fileExtension":"cw-file-upload-multiple-module__fileExtension__vOuHv","fileInfo":"cw-file-upload-multiple-module__fileInfo__R5ZTv","fileName":"cw-file-upload-multiple-module__fileName__DjepK","fileSize":"cw-file-upload-multiple-module__fileSize__b8GSm","smallButton":"cw-file-upload-multiple-module__smallButton__siUAh"};
|
|
3127
3136
|
|
|
3128
3137
|
const DEFAULT_LABELS$1 = {
|
|
3129
3138
|
uploadDisabled: 'Upload disabled',
|
|
@@ -3309,12 +3318,12 @@ function CwFileUploadMultiple(fileUploadProps) {
|
|
|
3309
3318
|
}
|
|
3310
3319
|
}
|
|
3311
3320
|
};
|
|
3312
|
-
return (jsxRuntime.jsxs("div", { className: `${styles$
|
|
3321
|
+
return (jsxRuntime.jsxs("div", { className: `${styles$l.fileUploadContainer} ${fileUploadProps.className}`, children: [jsxRuntime.jsx("input", { ref: fileInputRef, type: "file", name: fileUploadProps.name, accept: fileUploadProps.accept, multiple: fileUploadProps.multiple, onChange: handleFileSelectInternal, disabled: fileUploadProps.disabled, "aria-label": "files", className: styles$l.hiddenInput }), selectedFiles.length === 0 && !existingFile ? (jsxRuntime.jsxs("div", { className: `${styles$l.uploadArea} ${fileUploadProps.disabled ? styles$l.uploadAreaDisabled : ''}`, onDragOver: handleDragOver, onDrop: handleDrop, onClick: !fileUploadProps.disabled ? handleButtonClick : undefined, children: [jsxRuntime.jsx(CwIcon, { iconId: "upload" }), jsxRuntime.jsx("p", { className: `${styles$l.uploadTitle}`, children: fileUploadProps.disabled ? labels.uploadDisabled : labels.clickToUpload }), jsxRuntime.jsxs("p", { className: `${styles$l.uploadSubtitle}`, children: [fileUploadProps.accept ? labels.acceptedFiles(fileUploadProps.accept) : labels.allTypesAccepted, !fileUploadProps.multiple && ` ${labels.singleFileOnly}`] })] })) : selectedFiles.length === 0 && existingFile ? (jsxRuntime.jsxs("div", { className: styles$l.filesContainer, children: [jsxRuntime.jsxs("div", { className: styles$l.fileItem, children: [jsxRuntime.jsxs("div", { className: styles$l.fileIcon, children: [jsxRuntime.jsx(CwIcon, { iconId: "page" }), jsxRuntime.jsx("span", { className: styles$l.fileExtension, children: getFileExtension(existingFile) })] }), jsxRuntime.jsx("div", { className: styles$l.fileInfo, children: jsxRuntime.jsx("p", { className: styles$l.fileName, children: existingFile }) }), jsxRuntime.jsx(CwButton, { variant: "icon", icon: "close", color: "neutral", onClick: () => {
|
|
3313
3322
|
setExistingFile(undefined);
|
|
3314
3323
|
if (fileUploadProps.onSelect) {
|
|
3315
3324
|
fileUploadProps.onSelect(null);
|
|
3316
3325
|
}
|
|
3317
|
-
}, disabled: fileUploadProps.disabled, className: styles$
|
|
3326
|
+
}, disabled: fileUploadProps.disabled, className: styles$l.smallButton })] }), jsxRuntime.jsx(CwButton, { text: labels.changeFile, icon: "refresh", onClick: handleButtonClick, disabled: fileUploadProps.disabled })] })) : (jsxRuntime.jsxs("div", { className: styles$l.filesContainer, children: [jsxRuntime.jsxs("header", { className: "cw-flex-row cw-align-between-center cw-flex-wrap", children: [jsxRuntime.jsx("small", { className: styles$l.filesCount, children: fileUploadProps.statusText ?? labels.filesSelected(selectedFiles.length) }), jsxRuntime.jsxs("div", { className: "cw-flex-row", children: [fileUploadProps.onConfirm && selectedFiles.length > 0 && (jsxRuntime.jsx(CwButton, { onClick: () => {
|
|
3318
3327
|
let files = fileInputRef.current?.files ?? null;
|
|
3319
3328
|
if (!files) {
|
|
3320
3329
|
const dataTransfer = new DataTransfer();
|
|
@@ -3322,9 +3331,13 @@ function CwFileUploadMultiple(fileUploadProps) {
|
|
|
3322
3331
|
files = dataTransfer.files;
|
|
3323
3332
|
}
|
|
3324
3333
|
fileUploadProps.onConfirm?.(files);
|
|
3325
|
-
}, disabled: fileUploadProps.disabled || fileUploadProps.confirmDisabled, icon: "upload", text: fileUploadProps.confirmLabel ?? labels.upload })), !fileUploadProps.hideClearAll && (jsxRuntime.jsx(CwButton, { onClick: removeAllFiles, disabled: fileUploadProps.disabled, color: "danger", variant: "outline", icon: "delete", text: labels.clearAll }))] })] }), selectedFiles.map((file, index) => (jsxRuntime.jsxs("div", { className: styles$
|
|
3334
|
+
}, disabled: fileUploadProps.disabled || fileUploadProps.confirmDisabled, icon: "upload", text: fileUploadProps.confirmLabel ?? labels.upload })), !fileUploadProps.hideClearAll && (jsxRuntime.jsx(CwButton, { onClick: removeAllFiles, disabled: fileUploadProps.disabled, color: "danger", variant: "outline", icon: "delete", text: labels.clearAll }))] })] }), selectedFiles.map((file, index) => (jsxRuntime.jsxs("div", { className: styles$l.fileItem, children: [jsxRuntime.jsxs("div", { className: styles$l.fileIcon, children: [jsxRuntime.jsx(CwIcon, { iconId: "page" }), jsxRuntime.jsx("span", { className: styles$l.fileExtension, children: getFileExtension(file.name) })] }), jsxRuntime.jsxs("div", { className: styles$l.fileInfo, children: [jsxRuntime.jsx("p", { className: styles$l.fileName, children: file.name }), jsxRuntime.jsxs("p", { className: styles$l.fileSize, children: [(file.size / 1024).toFixed(1), " KB"] })] }), jsxRuntime.jsx(CwButton, { variant: "icon", icon: "close", color: "neutral", onClick: () => removeFile(index), className: styles$l.smallButton })] }, `${file.name}-${file.size}`))), fileUploadProps.multiple && (jsxRuntime.jsx(CwButton, { text: labels.addMoreFiles, icon: "plus", variant: "outline", onClick: handleButtonClick, disabled: fileUploadProps.disabled })), !fileUploadProps.multiple && (jsxRuntime.jsx(CwButton, { text: labels.changeFile, icon: "refresh", onClick: handleButtonClick, disabled: fileUploadProps.disabled }))] }))] }));
|
|
3326
3335
|
}
|
|
3327
3336
|
|
|
3337
|
+
/**
|
|
3338
|
+
* Legacy text input with its own label markup, predating the design system.
|
|
3339
|
+
* @deprecated Use {@link CwInputText} instead.
|
|
3340
|
+
*/
|
|
3328
3341
|
function CwInput(CwInputProps) {
|
|
3329
3342
|
const handleChange = (e) => {
|
|
3330
3343
|
CwInputProps.onChange(e.target.value);
|
|
@@ -3371,7 +3384,7 @@ function CwDigit(props) {
|
|
|
3371
3384
|
return (jsxRuntime.jsxs("div", { className: "cw-input-text", "data-direction": labelProps ? flexDirection : "column", "data-feedback-position": feedbackPosition, children: [jsxRuntime.jsxs(CwAlign, { ...alignProps, itemProp: inputProps.required === true ? "required" : "", children: [labelProps && (jsxRuntime.jsxs(CwLabel, { ...labelProps, children: [iconProps && jsxRuntime.jsx(CwIcon, { ...iconProps }), labelProps.text] })), jsxRuntime.jsxs("div", { className: "cw-input-button", children: [jsxRuntime.jsx("input", { type: "number", ...inputProps, "aria-describedby": describedBy }), buttonProps && jsxRuntime.jsx(CwButton, { ...buttonProps })] })] }), feedbackMessages.map((feedbackItem, index) => (jsxRuntime.jsx("p", { id: feedbackIds[index], className: "cw-input-info", "data-color": feedbackItem.type, "aria-live": "polite", children: feedbackItem.message }, index)))] }));
|
|
3372
3385
|
}
|
|
3373
3386
|
|
|
3374
|
-
var styles$
|
|
3387
|
+
var styles$k = {"colorPreview":"cw-color-picker-module__colorPreview__ylJcD","hueBar":"cw-color-picker-module__hueBar__bFhyC","hueBarSlider":"cw-color-picker-module__hueBarSlider__D53IV","colorPickerInteractiveArea":"cw-color-picker-module__colorPickerInteractiveArea__KZFR1","colorArea":"cw-color-picker-module__colorArea__xgpSE","colorAreaOverlay":"cw-color-picker-module__colorAreaOverlay__pmgOc","hueBackground":"cw-color-picker-module__hueBackground__Mks78","whiteGradient":"cw-color-picker-module__whiteGradient__Bt-fU","blackGradient":"cw-color-picker-module__blackGradient__VnEKJ","colorAreaCursor":"cw-color-picker-module__colorAreaCursor__lotg3"};
|
|
3375
3388
|
|
|
3376
3389
|
const CwColorPicker = ({ initialColor, onChange, previewText = "Color preview" }) => {
|
|
3377
3390
|
const [rgb, setRgb] = React.useState({ r: 255, g: 255, b: 255 });
|
|
@@ -3574,13 +3587,13 @@ const CwColorPicker = ({ initialColor, onChange, previewText = "Color preview" }
|
|
|
3574
3587
|
// Calculate background color for the main area based on current hue
|
|
3575
3588
|
const hueColor = hsvToRgb(hsv.h, 100, 100);
|
|
3576
3589
|
const hueHex = rgbToHex(hueColor.r, hueColor.g, hueColor.b);
|
|
3577
|
-
return (jsxRuntime.jsxs("div", { className: "cw-flex-column cw-gap-small", children: [jsxRuntime.jsxs("div", { className: "cw-flex-row cw-align-between-center cw-gap-small", children: [jsxRuntime.jsx("div", { className: styles$
|
|
3590
|
+
return (jsxRuntime.jsxs("div", { className: "cw-flex-column cw-gap-small", children: [jsxRuntime.jsxs("div", { className: "cw-flex-row cw-align-between-center cw-gap-small", children: [jsxRuntime.jsx("div", { className: styles$k.colorPreview, style: { backgroundColor: hexColor, color: getContrastColor(hexColor) }, children: previewText }), jsxRuntime.jsx("button", { type: "button", className: "cw-button", onClick: toggleInputMode, style: { minWidth: "3ch" }, children: inputMode === 'hex' ? 'RGB' : 'HEX' })] }), jsxRuntime.jsx("div", { className: "color-inputs-row", children: inputMode === 'hex' ? (jsxRuntime.jsx("input", { type: "text", value: hexColor, onChange: handleHexChange })) : (jsxRuntime.jsxs("div", { className: "cw-grid-base-3 cw-gap-small", children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("label", { children: "R:" }), jsxRuntime.jsx("input", { type: "number", name: "r", min: "0", max: "255", value: rgb.r, onChange: handleRgbChange })] }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("label", { children: "G:" }), jsxRuntime.jsx("input", { type: "number", name: "g", min: "0", max: "255", value: rgb.g, onChange: handleRgbChange })] }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("label", { children: "B:" }), jsxRuntime.jsx("input", { type: "number", name: "b", min: "0", max: "255", value: rgb.b, onChange: handleRgbChange })] })] })) }), jsxRuntime.jsxs("div", { className: styles$k.colorPickerInteractiveArea, children: [jsxRuntime.jsx("div", { className: styles$k.hueBar, ref: hueBarRef, onClick: handleHueBarClick, children: jsxRuntime.jsx("div", { className: styles$k.hueBarSlider, style: { top: `${(360 - hsv.h) / 360 * 100}%` } }) }), jsxRuntime.jsxs("div", { className: styles$k.colorArea, ref: colorAreaRef, onClick: handleColorAreaClick, children: [jsxRuntime.jsxs("div", { className: styles$k.colorAreaOverlay, children: [jsxRuntime.jsx("div", { className: styles$k.hueBackground, style: { backgroundColor: hueHex } }), jsxRuntime.jsx("div", { className: styles$k.whiteGradient }), jsxRuntime.jsx("div", { className: styles$k.blackGradient })] }), jsxRuntime.jsx("div", { className: styles$k.colorAreaCursor, style: {
|
|
3578
3591
|
left: `${hsv.s}%`,
|
|
3579
3592
|
top: `${100 - hsv.v}%`
|
|
3580
3593
|
} })] })] })] }));
|
|
3581
3594
|
};
|
|
3582
3595
|
|
|
3583
|
-
var styles$
|
|
3596
|
+
var styles$j = {"container":"cw-input-color-module__container__x7gpk","selectColor":"cw-input-color-module__selectColor__DTo3V","disabled":"cw-input-color-module__disabled__O1fK5","readOnly":"cw-input-color-module__readOnly__HL-Bz","colorDropdown":"cw-input-color-module__colorDropdown__pX2bc"};
|
|
3584
3597
|
|
|
3585
3598
|
const CwInputColor = ({ value, onChange, previewText = "Color preview", disabled = false, readOnly = false, width = '4rem', height = '2rem', labelProps, layoutProps, className, style, }) => {
|
|
3586
3599
|
const [isOpen, setIsOpen] = React.useState(false);
|
|
@@ -3713,11 +3726,11 @@ const CwInputColor = ({ value, onChange, previewText = "Color preview", disabled
|
|
|
3713
3726
|
break;
|
|
3714
3727
|
}
|
|
3715
3728
|
};
|
|
3716
|
-
return (jsxRuntime.jsxs("div", { className: `cw-input-color ${styles$
|
|
3729
|
+
return (jsxRuntime.jsxs("div", { className: `cw-input-color ${styles$j.container}${className ? ` ${className}` : ''}`, style: style, "data-direction": layoutProps?.direction ?? "row", "data-align": layoutProps?.align, children: [labelProps && (jsxRuntime.jsx(CwLabel, { ...labelProps })), jsxRuntime.jsx("div", { ref: containerRef, onClick: handleToggle, className: `${styles$j.selectColor} ${disabled ? styles$j.disabled : ''} ${readOnly ? styles$j.readOnly : ''}`, style: {
|
|
3717
3730
|
width,
|
|
3718
3731
|
height,
|
|
3719
3732
|
backgroundColor: value,
|
|
3720
|
-
}, "aria-label": "Open color picker", "aria-expanded": isOpen, "aria-haspopup": "dialog", "aria-readonly": readOnly, role: "button", tabIndex: disabled ? -1 : 0, onKeyDown: handleKeyDown }), isOpen && reactDom.createPortal(jsxRuntime.jsx("div", { ref: dropdownRef, className: styles$
|
|
3733
|
+
}, "aria-label": "Open color picker", "aria-expanded": isOpen, "aria-haspopup": "dialog", "aria-readonly": readOnly, role: "button", tabIndex: disabled ? -1 : 0, onKeyDown: handleKeyDown }), isOpen && reactDom.createPortal(jsxRuntime.jsx("div", { ref: dropdownRef, className: styles$j.colorDropdown, style: dropdownStyle, role: "dialog", "aria-modal": "true", "aria-label": "Color picker", children: jsxRuntime.jsx(CwColorPicker, { initialColor: value, onChange: handleColorChange, previewText: previewText }) }), document.body)] }));
|
|
3721
3734
|
};
|
|
3722
3735
|
|
|
3723
3736
|
/**
|
|
@@ -3733,7 +3746,6 @@ const CwInputColor = ({ value, onChange, previewText = "Color preview", disabled
|
|
|
3733
3746
|
* @example
|
|
3734
3747
|
* ```tsx
|
|
3735
3748
|
* <CwInputText
|
|
3736
|
-
* iconProps={{ id: "home" }}
|
|
3737
3749
|
* labelProps={{ children: "Name", width: "100px" }}
|
|
3738
3750
|
* buttonProps={{ children: "Ok", onclick:()=>{alert("hi")} }}
|
|
3739
3751
|
* feedback={{ type: "danger", message: "This field is required" }}
|
|
@@ -3784,13 +3796,15 @@ function CwInputNumber(CwInputNumberProps) {
|
|
|
3784
3796
|
}
|
|
3785
3797
|
|
|
3786
3798
|
function CwTextArea(props) {
|
|
3787
|
-
const { alignProps, buttonProps, iconProps, labelProps, resize, feedback, style, ...textareaProps } = props;
|
|
3799
|
+
const { alignProps, buttonProps, iconProps, labelProps, resize, feedback, style, className, ...textareaProps } = props;
|
|
3800
|
+
// Like CwInputText: className lands on the container, not on the textarea.
|
|
3801
|
+
const containerClassName = className ? `cw-text-area ${className}` : "cw-text-area";
|
|
3788
3802
|
const feedbackMessages = feedback
|
|
3789
3803
|
? Array.isArray(feedback) ? feedback : [feedback]
|
|
3790
3804
|
: [];
|
|
3791
3805
|
const flexDirection = alignProps?.flexDirection ?? "row";
|
|
3792
3806
|
const dataDirection = { 'data-direction': flexDirection };
|
|
3793
|
-
return (jsxRuntime.jsxs("div", { className:
|
|
3807
|
+
return (jsxRuntime.jsxs("div", { className: containerClassName, ...dataDirection, style: style, children: [jsxRuntime.jsxs(CwAlign, { ...alignProps, children: [labelProps && (jsxRuntime.jsxs(CwLabel, { ...labelProps, children: [iconProps && jsxRuntime.jsx(CwIcon, { ...iconProps }), labelProps.text] })), jsxRuntime.jsx("textarea", { ...textareaProps, itemProp: textareaProps.required === true ? "required" : "", style: { resize: resize } }), buttonProps && jsxRuntime.jsx(CwButton, { ...buttonProps })] }), feedbackMessages.map((feedbackItem, index) => (jsxRuntime.jsx("p", { className: "cw-input-info", "data-color": feedbackItem.type, children: feedbackItem.message }, index)))] }));
|
|
3794
3808
|
}
|
|
3795
3809
|
|
|
3796
3810
|
/**
|
|
@@ -3906,6 +3920,10 @@ function formatPlainDate$1(pd, format) {
|
|
|
3906
3920
|
* />
|
|
3907
3921
|
* ```
|
|
3908
3922
|
*/
|
|
3923
|
+
/**
|
|
3924
|
+
* Text date input with a native picker fallback, predating the calendar pickers.
|
|
3925
|
+
* @deprecated Use {@link CwDatePickerTemporal} (or {@link CwDatePicker} at a JS Date boundary) instead.
|
|
3926
|
+
*/
|
|
3909
3927
|
function CwInputDateText(props) {
|
|
3910
3928
|
const displayFormat = "DD.MM.YYYY";
|
|
3911
3929
|
const internalFormat = "YYYY-MM-DD";
|
|
@@ -3967,7 +3985,7 @@ function CwInputDateText(props) {
|
|
|
3967
3985
|
return (jsxRuntime.jsx("div", { className: "cw-input-date-text", children: jsxRuntime.jsxs(CwAlign, { ...alignProps, itemProp: required ? "required" : "", children: [labelProps && (jsxRuntime.jsxs(CwLabel, { ...labelProps, children: [iconProps && jsxRuntime.jsx(CwIcon, { ...iconProps }), labelProps.text] })), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("input", { type: "text", disabled: disabled, maxLength: 10, onChange: onChangeInputText, pattern: "^$ --|[.0-9\\/\\-]{10}", placeholder: format.toLowerCase(), readOnly: readOnly, ref: textInputRef, required: required, size: width, tabIndex: tabIndex, value: displayedDate }), jsxRuntime.jsxs("span", { children: [jsxRuntime.jsx(CwIcon, { iconId: "calendar" }), jsxRuntime.jsx("input", { type: "date", disabled: disabled, onChange: onChangeInputDate, readOnly: readOnly, ref: dateInputRef, tabIndex: -1, value: date, ...inputProps })] })] }), buttonProps && jsxRuntime.jsx(CwButton, { ...buttonProps })] }) }));
|
|
3968
3986
|
}
|
|
3969
3987
|
|
|
3970
|
-
var styles$
|
|
3988
|
+
var styles$i = {"hiddenInput":"cw-input-image-module__hiddenInput__pS7hb","dropZone":"cw-input-image-module__dropZone__ygrGu","title":"cw-input-image-module__title__Rji5M","subtitle":"cw-input-image-module__subtitle__djYYu","container":"cw-input-image-module__container__qh7Tm"};
|
|
3971
3989
|
|
|
3972
3990
|
const DEFAULT_LABELS = {
|
|
3973
3991
|
dropImageHere: "Drop image here",
|
|
@@ -4046,7 +4064,7 @@ function CwInputImage(props) {
|
|
|
4046
4064
|
const file = e.currentTarget.files?.[0];
|
|
4047
4065
|
void handleFile(file ?? null);
|
|
4048
4066
|
};
|
|
4049
|
-
return (jsxRuntime.jsxs("div", { className: `cw-input-image ${styles$
|
|
4067
|
+
return (jsxRuntime.jsxs("div", { className: `cw-input-image ${styles$i.container}`, "data-size": size, children: [jsxRuntime.jsxs("div", { onDragOver: (e) => e.preventDefault(), onDrop: handleDrop, className: styles$i.dropZone, children: [jsxRuntime.jsx(CwIcon, { iconId: "upload" }), jsxRuntime.jsxs("div", { className: "cw-flex-column cw-gap-tiny", children: [jsxRuntime.jsx("p", { className: styles$i.title, children: labels.dropImageHere }), jsxRuntime.jsx("p", { className: styles$i.subtitle, children: labels.acceptedFormats(allowedFormats.join(", ").replace(/image\//g, "")) })] })] }), jsxRuntime.jsxs("div", { className: "cw-flex-row cw-align-center-center cw-gap-small", children: [jsxRuntime.jsx(CwButton, { onClick: onPasteButtonClick, icon: "paste", text: labels.paste, size: size }), jsxRuntime.jsx(CwButton, { onClick: () => inputRef.current?.click(), icon: "folder-open", text: labels.browse, size: size })] }), jsxRuntime.jsx("input", { ref: inputRef, type: "file", accept: allowedFormats.join(","), onChange: handleFileChange, className: styles$i.hiddenInput, ...inputProps })] }));
|
|
4050
4068
|
}
|
|
4051
4069
|
|
|
4052
4070
|
/**
|
|
@@ -4178,7 +4196,7 @@ const CwImageArea = React.forwardRef((props, ref) => {
|
|
|
4178
4196
|
});
|
|
4179
4197
|
CwImageArea.displayName = "CwImageArea";
|
|
4180
4198
|
|
|
4181
|
-
var styles$
|
|
4199
|
+
var styles$h = {"container":"cw-weekday-selector-module__container__pwcvx","days":"cw-weekday-selector-module__days__Dd3RH"};
|
|
4182
4200
|
|
|
4183
4201
|
/* 2024-01-01 was a Monday. Formatted in UTC so a negative browser offset cannot shift a day. */
|
|
4184
4202
|
const MONDAY_UTC = Date.UTC(2024, 0, 1);
|
|
@@ -4376,16 +4394,16 @@ const CwWeekdaySelector = ({ value = "mtwrfsu", onChange, disabled = false, labe
|
|
|
4376
4394
|
// Points at the label element rather than copying its text, which also covers a labelProps that
|
|
4377
4395
|
// carries children instead of `text`.
|
|
4378
4396
|
const labelId = labelProps?.id ?? `${feedbackId}-label`;
|
|
4379
|
-
return (jsxRuntime.jsxs("div", { className: `cw-weekday-selector ${styles$
|
|
4397
|
+
return (jsxRuntime.jsxs("div", { className: `cw-weekday-selector ${styles$h.container}${className ? ` ${className}` : ""}`, "data-direction": labelProps ? layout?.direction ?? "row" : "column", "data-align": layout?.align, "data-gap": layout?.gap, children: [labelProps && jsxRuntime.jsx(CwLabel, { id: labelId, ...labelProps }), jsxRuntime.jsx("div", { role: "group", className: styles$h.days, "aria-labelledby": labelProps ? labelId : undefined, "aria-describedby": describedBy, children: Weekdays.getFullWeek().map(day => (jsxRuntime.jsx("input", { type: "checkbox", "data-day": day, "data-letter": dayNames[day].letter, "aria-label": dayNames[day].full, title: dayNames[day].full, checked: selectedDays.includes(day), onChange: (e) => handleChange(day, e.target.checked), disabled: disabled }, day))) }), feedbackMessages.map((feedbackItem, index) => (jsxRuntime.jsx("p", { id: feedbackIds[index], className: "cw-input-feedback", "data-color": feedbackItem.type, "aria-live": "polite", children: feedbackItem.message }, index)))] }));
|
|
4380
4398
|
};
|
|
4381
4399
|
|
|
4382
|
-
var styles$
|
|
4400
|
+
var styles$g = {"check-container":"cw-check-module__check-container__4nscZ","group":"cw-check-module__group__6JCQo","options":"cw-check-module__options__-g9LF"};
|
|
4383
4401
|
|
|
4384
4402
|
function CwCheck(props) {
|
|
4385
4403
|
const { labelProps, labelText, direction, alignment, className, ...inputProps } = props;
|
|
4386
4404
|
const resolvedDirection = direction ?? alignment ?? "row";
|
|
4387
4405
|
const displayText = labelProps?.text ?? labelText;
|
|
4388
|
-
return (jsxRuntime.jsx("div", { className: `cw-check ${styles$
|
|
4406
|
+
return (jsxRuntime.jsx("div", { className: `cw-check ${styles$g["check-container"]}${className ? ` ${className}` : ''}`, children: jsxRuntime.jsxs("label", { "data-direction": resolvedDirection, children: [jsxRuntime.jsx("input", { type: "checkbox", ...inputProps }), displayText && (jsxRuntime.jsx("span", { className: "cw-icon-text", children: displayText }))] }) }));
|
|
4389
4407
|
}
|
|
4390
4408
|
|
|
4391
4409
|
function CwCheckbox(CwCheckboxProps) {
|
|
@@ -4439,14 +4457,14 @@ function CwCheckboxGroup({ options, value = [], onChange, labelProps, groupLayou
|
|
|
4439
4457
|
?? (optionsAlignment === "column" ? "row" : "column");
|
|
4440
4458
|
// Each checkbox's box-to-text layout is the opposite of the options flow, mirroring CwRadioGroup.
|
|
4441
4459
|
const checkDirection = itemDirection === "row" ? "column" : "row";
|
|
4442
|
-
return (jsxRuntime.jsxs("div", { className: `cw-checkbox-group ${styles$
|
|
4460
|
+
return (jsxRuntime.jsxs("div", { className: `cw-checkbox-group ${styles$g.group}${className ? ` ${className}` : ""}`, "data-testid": dataTestId, "data-direction": labelProps ? groupDirection : "column", "data-align": groupLayout?.align, "data-gap": groupLayout?.gap, children: [labelProps && (jsxRuntime.jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsxRuntime.jsx("div", { className: styles$g.options, role: "group", "aria-label": labelProps?.text, "aria-describedby": describedBy, "aria-required": required || undefined, "data-direction": itemDirection, "data-gap": itemLayout?.gap, children: options.map((option) => (jsxRuntime.jsx(CwCheck, { labelProps: { text: option.label }, checked: value.includes(option.value), disabled: disabled || option.disabled, direction: checkDirection, onChange: (e) => handleChange(option.value, e.currentTarget.checked) }, option.value))) }), feedbackMessages.map((feedbackItem, index) => (jsxRuntime.jsx("p", { id: feedbackIds[index], className: "cw-input-feedback", "data-color": feedbackItem.type, "aria-live": "polite", children: feedbackItem.message }, index)))] }));
|
|
4443
4461
|
}
|
|
4444
4462
|
|
|
4445
|
-
var styles$
|
|
4463
|
+
var styles$f = {"radio":"cw-radio-module__radio__5sh7a","group":"cw-radio-module__group__br-HM","options":"cw-radio-module__options__LSw7M"};
|
|
4446
4464
|
|
|
4447
4465
|
/** Single native radio input. Building block for CwRadioGroup. */
|
|
4448
4466
|
function CwRadio({ label, direction = "row", className, ...inputProps }) {
|
|
4449
|
-
return (jsxRuntime.jsxs("label", { className: `cw-radio ${styles$
|
|
4467
|
+
return (jsxRuntime.jsxs("label", { className: `cw-radio ${styles$f.radio}${className ? ` ${className}` : ""}`, "data-direction": direction, children: [jsxRuntime.jsx("input", { type: "radio", ...inputProps }), label && jsxRuntime.jsx("span", { children: label })] }));
|
|
4450
4468
|
}
|
|
4451
4469
|
|
|
4452
4470
|
/**
|
|
@@ -4473,7 +4491,7 @@ function CwRadioGroup({ options, value, onChange, labelProps, groupLayout, itemL
|
|
|
4473
4491
|
// (itemLayout column) reads best with the circle beside the text; a side-by-side row reads
|
|
4474
4492
|
// best with the circle above the text.
|
|
4475
4493
|
const radioDirection = itemLayout?.direction === "row" ? "column" : "row";
|
|
4476
|
-
return (jsxRuntime.jsxs("div", { className: `cw-radio-group ${styles$
|
|
4494
|
+
return (jsxRuntime.jsxs("div", { className: `cw-radio-group ${styles$f.group}${className ? ` ${className}` : ""}`, "data-testid": dataTestId, "data-direction": labelProps ? (groupLayout?.direction ?? "column") : "column", "data-align": groupLayout?.align, "data-gap": groupLayout?.gap, children: [labelProps && (jsxRuntime.jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsxRuntime.jsx("div", { className: styles$f.options, role: "radiogroup", "aria-describedby": describedBy, "aria-labelledby": ariaLabelledby, "aria-label": ariaLabelledby ? undefined : (ariaLabel ?? labelProps?.text), "aria-required": required || undefined, "data-direction": itemLayout?.direction ?? "column", "data-gap": itemLayout?.gap, children: options.map((option) => (jsxRuntime.jsx(CwRadio, { name: groupName, label: option.label, direction: radioDirection, checked: value === option.value, required: required, disabled: disabled || option.disabled, onChange: () => onChange(option.value) }, option.value))) }), feedbackMessages.map((feedbackItem, index) => (jsxRuntime.jsx("p", { id: feedbackIds[index], className: "cw-input-feedback", "data-color": feedbackItem.type, "aria-live": "polite", children: feedbackItem.message }, index)))] }));
|
|
4477
4495
|
}
|
|
4478
4496
|
|
|
4479
4497
|
function CwToggle(props) {
|
|
@@ -4614,7 +4632,7 @@ function useDropdownPortal({ anchorRef, isOpen, onClose, positionStrategy = defa
|
|
|
4614
4632
|
return { panelRef, panelStyle: style, renderPanel };
|
|
4615
4633
|
}
|
|
4616
4634
|
|
|
4617
|
-
var
|
|
4635
|
+
var styles$e = {"dropdown":"cw-dropdown-module__dropdown__EFZ9M cw-choice-dropdown-module__dropdown__P0b4j","option":"cw-dropdown-module__option__TuMdI cw-choice-dropdown-module__option__uR-ro","optionFocused":"cw-dropdown-module__optionFocused__7LGaC cw-choice-dropdown-module__optionFocused__BYMxj","optionSelected":"cw-dropdown-module__optionSelected__OiXIc cw-choice-dropdown-module__optionSelected__Lt8Xg","optionDisabled":"cw-dropdown-module__optionDisabled__lYM6w cw-choice-dropdown-module__optionDisabled__n3scM","emptyState":"cw-dropdown-module__emptyState__gp8KT cw-choice-dropdown-module__emptyState__HO0Y7","searchBox":"cw-dropdown-module__searchBox__Bx0JE cw-choice-dropdown-module__searchBox__0gox7","searchInput":"cw-dropdown-module__searchInput__JrxCK cw-choice-dropdown-module__searchInput__G5oRs","value":"cw-dropdown-module__value__i-7IN","colorCircle":"cw-dropdown-module__colorCircle__5kgiT cw-choice-dropdown-module__colorCircle__x7mI9"};
|
|
4618
4636
|
|
|
4619
4637
|
/**
|
|
4620
4638
|
* Custom dropdown component with colour-coded options, optional search filter, and full
|
|
@@ -4728,14 +4746,18 @@ function CwDropdown({ options, value, onChange, labelProps, alignProps, placehol
|
|
|
4728
4746
|
}
|
|
4729
4747
|
}, [isOpen, highlightedIndex, filteredOptions, handleOptionSelect]);
|
|
4730
4748
|
const flexDirection = alignProps?.flexDirection ?? "row";
|
|
4731
|
-
return (jsxRuntime.jsx("div", { ref: containerRef, className: `cw-dropdown${className ? ` ${className}` : ""}`, "data-direction": flexDirection, style: style, ...otherProps, children: jsxRuntime.jsxs(CwAlign, { ...alignProps, itemProp: required ? "required" : "", children: [labelProps && jsxRuntime.jsx(CwLabel, { id: labelId, ...labelProps }), jsxRuntime.jsxs("div", { className:
|
|
4732
|
-
|
|
4733
|
-
value === option.value ?
|
|
4734
|
-
highlightedIndex === index ?
|
|
4735
|
-
option.disabled ?
|
|
4736
|
-
].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 && (jsxRuntime.jsx("span", { className:
|
|
4749
|
+
return (jsxRuntime.jsx("div", { ref: containerRef, className: `cw-dropdown${className ? ` ${className}` : ""}`, "data-direction": flexDirection, style: style, ...otherProps, children: jsxRuntime.jsxs(CwAlign, { ...alignProps, itemProp: required ? "required" : "", children: [labelProps && jsxRuntime.jsx(CwLabel, { id: labelId, ...labelProps }), jsxRuntime.jsxs("div", { className: styles$e.value, children: [jsxRuntime.jsxs("div", { className: "cw-dropdown-wrapper", ref: wrapperRef, children: [jsxRuntime.jsxs("button", { type: "button", className: "cw-dropdown-trigger", onClick: handleTriggerClick, onKeyDown: handleKeyDown, disabled: disabled, "aria-haspopup": "listbox", "aria-expanded": isOpen, "aria-labelledby": labelProps ? `${labelId} ${valueId}` : undefined, "aria-label": labelProps ? undefined : (selectedOption?.label || placeholder), "aria-describedby": describedBy, children: [jsxRuntime.jsx("div", { className: "cw-dropdown-trigger-content", id: valueId, children: selectedOption ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [selectedOption.color && (jsxRuntime.jsx("span", { className: styles$e.colorCircle, style: { backgroundColor: selectedOption.color } })), jsxRuntime.jsx("span", { children: selectedOption.label })] })) : (jsxRuntime.jsx("span", { className: "cw-dropdown-placeholder", children: placeholder })) }), jsxRuntime.jsx(CwIcon, { iconId: "chevron-down", size: "small" })] }), renderPanel(jsxRuntime.jsxs("div", { ref: panelRef, className: styles$e.dropdown, style: panelStyle, role: "listbox", onKeyDown: handleKeyDown, children: [allowSearch && (jsxRuntime.jsx("div", { className: styles$e.searchBox, children: jsxRuntime.jsx("input", { ref: inputRef, type: "text", placeholder: "Search...", value: searchText, onChange: handleSearchChange, onKeyDown: handleKeyDown, className: styles$e.searchInput, autoComplete: "off" }) })), jsxRuntime.jsx("ul", { children: filteredOptions.length > 0 ? (filteredOptions.map((option, index) => (jsxRuntime.jsxs("li", { ref: highlightedIndex === index ? highlightedItemRef : null, className: [
|
|
4750
|
+
styles$e.option,
|
|
4751
|
+
value === option.value ? styles$e.optionSelected : "",
|
|
4752
|
+
highlightedIndex === index ? styles$e.optionFocused : "",
|
|
4753
|
+
option.disabled ? styles$e.optionDisabled : "",
|
|
4754
|
+
].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 && (jsxRuntime.jsx("span", { className: styles$e.colorCircle, style: { backgroundColor: option.color } })), jsxRuntime.jsx("span", { children: option.label })] }, option.value)))) : (jsxRuntime.jsx("li", { className: styles$e.emptyState, children: "No options available" })) })] }))] }), feedbackMessages.map((item, index) => (jsxRuntime.jsx("p", { id: feedbackIds[index], className: "cw-input-feedback", "data-color": item.type, "aria-live": "polite", children: item.message }, index)))] })] }) }));
|
|
4737
4755
|
}
|
|
4738
4756
|
|
|
4757
|
+
/**
|
|
4758
|
+
* Legacy action menu with a fixed item shape and caller-owned open state.
|
|
4759
|
+
* @deprecated Use {@link CwPopoverButton} with your own content instead.
|
|
4760
|
+
*/
|
|
4739
4761
|
function CwDropdownFilter(props) {
|
|
4740
4762
|
// Determine visibility state
|
|
4741
4763
|
const isVisible = props.DropDownFilterState ?? false;
|
|
@@ -5064,8 +5086,8 @@ const CwMultiFilter = ({ allTags, id, onChangeSelectedTags, selectedTags, placeh
|
|
|
5064
5086
|
}
|
|
5065
5087
|
else {
|
|
5066
5088
|
return {
|
|
5067
|
-
onPrimary: "var(--cw-
|
|
5068
|
-
primary: "var(--cw-
|
|
5089
|
+
onPrimary: "var(--cw-text-on-primary)",
|
|
5090
|
+
primary: "var(--cw-accent-primary)"
|
|
5069
5091
|
};
|
|
5070
5092
|
}
|
|
5071
5093
|
};
|
|
@@ -5102,7 +5124,7 @@ const CwMultiFilter = ({ allTags, id, onChangeSelectedTags, selectedTags, placeh
|
|
|
5102
5124
|
};
|
|
5103
5125
|
return (jsxRuntime.jsxs("form", { ref: componentRef, id: id, "data-testid": testId, className: `${styles$b["cw-multi-filter"]}${className ? ` ${className}` : ""}`, style: style, onSubmit: (e) => {
|
|
5104
5126
|
e.preventDefault();
|
|
5105
|
-
}, children: [jsxRuntime.jsxs("div", { onClick: handleDivClick, ref: wrapperRef, className: styles$b["cw-multi-filter-search"], style: isPanelOpen ? { outline: "1px solid var(--cw-
|
|
5127
|
+
}, children: [jsxRuntime.jsxs("div", { onClick: handleDivClick, ref: wrapperRef, className: styles$b["cw-multi-filter-search"], style: isPanelOpen ? { outline: "1px solid var(--cw-outline-variant)" } : {}, children: [jsxRuntime.jsxs("ul", { id: id + "_selected_filters", children: [Array.from(selectedTags).map(tag => (React.createElement(CwMultiFilterTag, { ...tag, key: tag.ID, Selectable: false, Removable: true, OnRemove: () => removeTag(tag.ID) }))), jsxRuntime.jsx("input", { type: "text", id: id + "_input", ref: inputRef, value: inputTextValue, spellCheck: false, onFocus: () => setIsPanelOpen(true), onChange: e => handleInputText(e.currentTarget.value), autoComplete: "off", placeholder: selectedTags.size === 0 ? placeholder : "", onKeyDown: e => {
|
|
5106
5128
|
switch (e.key) {
|
|
5107
5129
|
case "Enter":
|
|
5108
5130
|
case "Tab": {
|
|
@@ -5489,6 +5511,8 @@ function CwNavMenu({ items, loading = false, isActive, renderLink = defaultRende
|
|
|
5489
5511
|
: visibleItems.map(item => renderItem(item, 1)) }), showEmptyMessage && jsxRuntime.jsx("p", { className: styles$8.emptyMessage, children: emptyMessage })] }));
|
|
5490
5512
|
}
|
|
5491
5513
|
|
|
5514
|
+
var dropdownStyles = {"dropdown":"cw-choice-dropdown-module__dropdown__P0b4j","option":"cw-choice-dropdown-module__option__uR-ro","optionFocused":"cw-choice-dropdown-module__optionFocused__BYMxj"};
|
|
5515
|
+
|
|
5492
5516
|
/**
|
|
5493
5517
|
* Pure keyboard-navigation resolver shared by the `CwSearchInput` combobox.
|
|
5494
5518
|
* Kept side-effect-free so the arrow/home/end/enter/escape behaviour can be unit
|
|
@@ -9904,8 +9928,8 @@ const Scheduler = (props) => {
|
|
|
9904
9928
|
timeLinePercentage: timeLinePercentage,
|
|
9905
9929
|
isUtc: isUtc
|
|
9906
9930
|
};
|
|
9907
|
-
const evenColor = "var(--cw-
|
|
9908
|
-
const oddColor = "var(--cw-
|
|
9931
|
+
const evenColor = "var(--cw-surface-neutral-low)";
|
|
9932
|
+
const oddColor = "var(--cw-surface-neutral-medium)";
|
|
9909
9933
|
const weekendsLines = React.useMemo(() => getWeekendLinesByDatesVisible(selectedDate, visibleDays), [selectedDate, visibleDays]);
|
|
9910
9934
|
const divisionLines = React.useMemo(() => getLinesByDivisions(divisions), [divisions, visibleDays]);
|
|
9911
9935
|
// Timeline percentage calculation
|