@cwellt_software/cwellt-reactjs-lib 1.4.14 → 1.4.15
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/index.cjs.js +284 -89
- package/dist/index.css +2 -2
- package/dist/index.d.ts +227 -20
- package/dist/index.es.js +283 -91
- package/dist/src/common/hooks/useRovingSingleSelect.d.ts +28 -0
- package/dist/src/common/hooks/useRovingSingleSelect.d.ts.map +1 -0
- package/dist/src/components/control/action/button/CwButton.d.ts +14 -4
- package/dist/src/components/control/action/button/CwButton.d.ts.map +1 -1
- package/dist/src/components/control/action/button/CwButtonSplit.d.ts +52 -0
- package/dist/src/components/control/action/button/CwButtonSplit.d.ts.map +1 -0
- package/dist/src/components/control/action/button/CwButtonSwitch.d.ts +65 -0
- package/dist/src/components/control/action/button/CwButtonSwitch.d.ts.map +1 -0
- package/dist/src/components/control/choice/checkbox/CwCheck.d.ts +6 -5
- package/dist/src/components/control/choice/checkbox/CwCheck.d.ts.map +1 -1
- package/dist/src/components/control/choice/checkbox/CwCheckboxGroup.d.ts +30 -7
- package/dist/src/components/control/choice/checkbox/CwCheckboxGroup.d.ts.map +1 -1
- package/dist/src/components/control/choice/checkbox/CwRadio.d.ts +10 -0
- package/dist/src/components/control/choice/checkbox/CwRadio.d.ts.map +1 -0
- package/dist/src/components/control/choice/checkbox/CwRadioGroup.d.ts +58 -0
- package/dist/src/components/control/choice/checkbox/CwRadioGroup.d.ts.map +1 -0
- package/dist/src/components/control/choice/toggle/CwToggle.d.ts +6 -5
- package/dist/src/components/control/choice/toggle/CwToggle.d.ts.map +1 -1
- package/dist/src/index.d.ts +3 -0
- package/dist/src/index.d.ts.map +1 -1
- package/dist/src/playground/PlaygroundApp.d.ts.map +1 -1
- package/dist/src/playground/PlaygroundSection.d.ts +13 -0
- package/dist/src/playground/PlaygroundSection.d.ts.map +1 -0
- package/dist/src/playground/pages/CwButtonPage.d.ts +3 -0
- package/dist/src/playground/pages/CwButtonPage.d.ts.map +1 -0
- package/dist/src/playground/pages/CwButtonSplitPage.d.ts +3 -0
- package/dist/src/playground/pages/CwButtonSplitPage.d.ts.map +1 -0
- package/dist/src/playground/pages/CwButtonSwitchPage.d.ts +3 -0
- package/dist/src/playground/pages/CwButtonSwitchPage.d.ts.map +1 -0
- package/dist/src/playground/pages/CwCheckboxGroupPage.d.ts +3 -0
- package/dist/src/playground/pages/CwCheckboxGroupPage.d.ts.map +1 -0
- package/dist/src/playground/pages/CwRadioGroupPage.d.ts +3 -0
- package/dist/src/playground/pages/CwRadioGroupPage.d.ts.map +1 -0
- package/dist/test/common/hooks/useRovingSingleSelect.test.d.ts +2 -0
- package/dist/test/common/hooks/useRovingSingleSelect.test.d.ts.map +1 -0
- package/package.json +1 -1
package/dist/index.es.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
2
2
|
import * as React from 'react';
|
|
3
|
-
import React__default, { useState, useRef, useEffect, useCallback, useLayoutEffect, createContext, useContext, cloneElement, useMemo, forwardRef, useImperativeHandle,
|
|
3
|
+
import React__default, { useState, useRef, useEffect, useCallback, useLayoutEffect, createContext, useContext, cloneElement, useMemo, forwardRef, useImperativeHandle, useId, createElement, memo, Fragment as Fragment$1, Component } from 'react';
|
|
4
4
|
import { createPortal } from 'react-dom';
|
|
5
5
|
import { createRoot } from 'react-dom/client';
|
|
6
6
|
import Draggable from 'react-draggable';
|
|
@@ -166,7 +166,7 @@ const SVG_ICONS = {
|
|
|
166
166
|
'sortable-desc': (jsxs("svg", { width: "16", height: "16", viewBox: "0 0 128 128", fill: "currentColor", children: [jsx("path", { d: "M93.1675 73.1739C94.5691 74.5758 94.7323 76.7924 93.5515 78.3846L93.1675 78.8326L63.6741 108.326L34.1755 78.8326C32.6908 77.3518 32.6014 74.9761 33.9708 73.3881C35.3401 71.8001 37.7033 71.5391 39.3861 72.7899L39.8341 73.1739L63.6741 97.0137L87.5088 73.1739C88.9104 71.7726 91.1274 71.6092 92.7194 72.7899L93.1674 73.1739H93.1675Z", opacity: "1" }), jsx("path", { d: "M34.1714 55.1518C32.7697 53.7499 32.6066 51.5333 33.7874 49.9411L34.1714 49.4931L63.6647 20L93.1634 49.4931C94.6481 50.9739 94.7375 53.3496 93.3681 54.9376C91.9987 56.5256 89.6356 56.7866 87.9527 55.5358L87.5047 55.1517L63.6647 31.312L39.8301 55.1518C38.4285 56.5531 36.2115 56.7165 34.6195 55.5358L34.1715 55.1518L34.1714 55.1518Z", opacity: "0.3" })] })),
|
|
167
167
|
};
|
|
168
168
|
|
|
169
|
-
var styles$
|
|
169
|
+
var styles$u = {"cw-tooltip-content":"cw-tooltip-module__cw-tooltip-content__RZczd","cw-tooltip":"cw-tooltip-module__cw-tooltip__1KYig"};
|
|
170
170
|
|
|
171
171
|
// Constants
|
|
172
172
|
const margin$1 = 16;
|
|
@@ -456,7 +456,7 @@ const CwTooltipManager = () => {
|
|
|
456
456
|
if (!state.isVisible || !state.content) {
|
|
457
457
|
return null;
|
|
458
458
|
}
|
|
459
|
-
return createPortal(jsx("div", { ref: tooltipRef, className: styles$
|
|
459
|
+
return createPortal(jsx("div", { ref: tooltipRef, className: styles$u["cw-tooltip-content"], "data-position": actualPosition, "data-visible": state.isVisible, "data-inline": state.displayInline, style: {
|
|
460
460
|
top: `${tooltipPosition.top}px`,
|
|
461
461
|
left: `${tooltipPosition.left}px`,
|
|
462
462
|
opacity: (isPositioned && !isMeasuring) ? 1 : 0,
|
|
@@ -537,7 +537,7 @@ const CwTooltipNew = ({ children, content = null, position = "right", dissapears
|
|
|
537
537
|
useEffect(() => {
|
|
538
538
|
ensureTooltipManager();
|
|
539
539
|
}, []);
|
|
540
|
-
return (jsx("div", { ref: containerRef, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, style: overlayStyle, "data-inline": displayInline, className: styles$
|
|
540
|
+
return (jsx("div", { ref: containerRef, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, style: overlayStyle, "data-inline": displayInline, className: styles$u["cw-tooltip"], children: children }));
|
|
541
541
|
};
|
|
542
542
|
|
|
543
543
|
function CwIcon(props) {
|
|
@@ -1000,7 +1000,7 @@ function CwLoadingSmall(CwelltLoadingAppointements) {
|
|
|
1000
1000
|
return (jsx("div", { children: CwelltLoadingAppointements.isLoading === true ? (jsx("div", { className: "cw-loading-container", children: jsx("div", { className: "cw-loading" }) })) : (jsx("div", {})) }));
|
|
1001
1001
|
}
|
|
1002
1002
|
|
|
1003
|
-
var styles$
|
|
1003
|
+
var styles$t = {"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"};
|
|
1004
1004
|
|
|
1005
1005
|
// Constants moved outside to prevent recreation
|
|
1006
1006
|
const margin = 16;
|
|
@@ -1123,12 +1123,12 @@ const CwGenericTooltip = ({ children, content = null, position = defaultPosition
|
|
|
1123
1123
|
const { setTooltipTimeout, clearTooltipTimeout } = useTooltipDelay(() => {
|
|
1124
1124
|
setIsVisible(true);
|
|
1125
1125
|
}, showDelay);
|
|
1126
|
-
const { position: tooltipPosition, actualPosition } = useTooltipPosition(isVisible, containerRef, position, styles$
|
|
1126
|
+
const { position: tooltipPosition, actualPosition } = useTooltipPosition(isVisible, containerRef, position, styles$t["cw-generic-tooltip-content"]);
|
|
1127
1127
|
// Memoize tooltip content creation
|
|
1128
1128
|
const tooltipContent = useMemo(() => {
|
|
1129
1129
|
if (hide || !isVisible || !content)
|
|
1130
1130
|
return null;
|
|
1131
|
-
return createPortal(jsx("div", { className: styles$
|
|
1131
|
+
return createPortal(jsx("div", { className: styles$t["cw-generic-tooltip-content"], "data-position": actualPosition, "data-visible": isVisible, "data-inline": displayInline, style: {
|
|
1132
1132
|
position: 'fixed',
|
|
1133
1133
|
top: `${tooltipPosition.top}px`,
|
|
1134
1134
|
left: `${tooltipPosition.left}px`,
|
|
@@ -1143,10 +1143,10 @@ const CwGenericTooltip = ({ children, content = null, position = defaultPosition
|
|
|
1143
1143
|
clearTooltipTimeout();
|
|
1144
1144
|
setIsVisible(false);
|
|
1145
1145
|
}, [clearTooltipTimeout]);
|
|
1146
|
-
return (jsxs("div", { ref: containerRef, className: styles$
|
|
1146
|
+
return (jsxs("div", { ref: containerRef, className: styles$t["cw-generic-tooltip"], onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, style: overlayStyle, "data-inline": displayInline, children: [tooltipContent, children] }));
|
|
1147
1147
|
};
|
|
1148
1148
|
|
|
1149
|
-
function CwButton({ text, variant = 'solid', color = 'primary', className = '', icon = "", title, tooltipPosition = "bottom", children, ...buttonProps }) {
|
|
1149
|
+
const CwButton = React__default.forwardRef(function CwButton({ text, variant = 'solid', color = 'primary', size = 'medium', iconPosition = 'left', pressed, className = '', icon = "", title, tooltipPosition = "bottom", children, ...buttonProps }, ref) {
|
|
1150
1150
|
// Build CSS classes based on variant and props
|
|
1151
1151
|
let buttonClass = `cw-button-${variant}`;
|
|
1152
1152
|
// Add icon class only for icon variant without children
|
|
@@ -1157,9 +1157,18 @@ function CwButton({ text, variant = 'solid', color = 'primary', className = '',
|
|
|
1157
1157
|
buttonClass += ` ${className}`;
|
|
1158
1158
|
}
|
|
1159
1159
|
const tooltipContent = title || (variant === 'icon' && text ? text : undefined);
|
|
1160
|
-
const
|
|
1160
|
+
const iconElement = icon ? jsx(CwIcon, { iconId: icon }) : null;
|
|
1161
|
+
const textElement = text ? jsx("strong", { children: text }) : null;
|
|
1162
|
+
// Only emit toggle attributes when `pressed` is defined; otherwise output stays identical to a normal button.
|
|
1163
|
+
const pressedProps = pressed !== undefined
|
|
1164
|
+
? { "aria-pressed": pressed, "data-pressed": pressed ? "true" : undefined }
|
|
1165
|
+
: {};
|
|
1166
|
+
const buttonElement = (jsx("button", { ref: ref, type: "button", className: buttonClass, ...buttonProps, "data-color": color, "data-size": size, ...pressedProps, "aria-label": tooltipContent ?? buttonProps["aria-label"], children: variant === 'icon' ? null : (children ?? (iconPosition === 'right'
|
|
1167
|
+
? jsxs(Fragment, { children: [textElement, iconElement] })
|
|
1168
|
+
: jsxs(Fragment, { children: [iconElement, textElement] }))) }));
|
|
1161
1169
|
return tooltipContent ? (jsx(CwTooltipNew, { content: tooltipContent, position: tooltipPosition, displayInline: true, children: buttonElement })) : (buttonElement);
|
|
1162
|
-
}
|
|
1170
|
+
});
|
|
1171
|
+
CwButton.displayName = "CwButton";
|
|
1163
1172
|
|
|
1164
1173
|
// Reference for draggable modal
|
|
1165
1174
|
/**
|
|
@@ -1196,7 +1205,7 @@ function CwModal(custModalProps) {
|
|
|
1196
1205
|
return (jsx("div", { children: custModalProps.modalState && (jsxs("div", { className: custModalProps.classNameModalOverlay + " cwelltModalOverlay", children: [jsx("div", { className: "cwelltModalOverlayBg", onClick: custModalProps.onCloseModal }), jsx(Draggable, { disabled: isModalDisabled, axis: "both", nodeRef: draggableRef, children: jsxs("div", { className: custModalProps.classNameModal + " cwelltContainerModal", ref: draggableRef, style: widthModalDef !== "40em" ? modalStyle.widthCustomStyle : modalStyle.widthDefStyle, children: [jsxs("div", { className: "cwelltModalHeader", onMouseOver: cwelltOnMouseOverModal, onMouseOut: cwelltOnMouseOutModal, children: [jsx("div", { className: "cwelltModalTitle", children: custModalProps.titleModal }), jsx("button", { className: "cwelltBtnCloseModal", onClick: custModalProps.onCloseModal, children: jsx("span", { className: "cwelltCloseIcon" }) })] }), jsx("div", { className: "cwelltModalBody", children: jsx("div", { className: "cwelltContainerModalBody", style: { position: "relative" }, children: custModalProps.children }) }), isHide === false ? (jsx("footer", { className: "legacy-modal-footer", onMouseOver: cwelltOnMouseOverModal, onMouseOut: cwelltOnMouseOutModal, children: jsx(CwButton, { variant: "icon", icon: "save", title: "Save", onClick: custModalProps.onSaveModal, form: custModalProps.formSaveModal, hidden: custModalProps.HideBtnModal, type: custModalProps.HtmlSubmitModal }) })) : (jsx("div", { style: { display: "none" } }))] }) })] })) }));
|
|
1197
1206
|
}
|
|
1198
1207
|
|
|
1199
|
-
var styles$
|
|
1208
|
+
var styles$s = {"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"};
|
|
1200
1209
|
|
|
1201
1210
|
function CwConfirmationPopup(props) {
|
|
1202
1211
|
const { isOpen, onConfirm, onCancel, message = "Are you sure you want to proceed?", confirmText = "Confirm", cancelText = "Cancel", placement = 'bottom', children } = props;
|
|
@@ -1260,15 +1269,15 @@ function CwConfirmationPopup(props) {
|
|
|
1260
1269
|
onCancel();
|
|
1261
1270
|
}
|
|
1262
1271
|
};
|
|
1263
|
-
return (jsxs(Fragment, { children: [renderChildren(), isOpen && (jsx("div", { className: styles$
|
|
1272
|
+
return (jsxs(Fragment, { children: [renderChildren(), isOpen && (jsx("div", { className: styles$s.overlayPositioned, onClick: handleOverlayClick, children: jsxs("div", { ref: popupRef, className: styles$s.popup, style: {
|
|
1264
1273
|
position: 'absolute',
|
|
1265
1274
|
top: `${position.top}px`,
|
|
1266
1275
|
left: `${position.left}px`,
|
|
1267
1276
|
transform: 'none'
|
|
1268
|
-
}, children: [jsx("p", { className: styles$
|
|
1277
|
+
}, children: [jsx("p", { className: styles$s.message, children: message }), jsxs("div", { className: styles$s.buttons, children: [jsx("button", { className: `${styles$s.button} ${styles$s.confirmButton}`, onClick: onConfirm, children: confirmText }), jsx("button", { className: `${styles$s.button} ${styles$s.cancelButton}`, onClick: onCancel, children: cancelText })] })] }) }))] }));
|
|
1269
1278
|
}
|
|
1270
1279
|
|
|
1271
|
-
var styles$
|
|
1280
|
+
var styles$r = {"cw-dialog-main":"cw-dialog-module__cw-dialog-main__cHxHt","cw-dialog-button-close":"cw-dialog-module__cw-dialog-button-close__9GRd8"};
|
|
1272
1281
|
|
|
1273
1282
|
// Helper function to parse size values
|
|
1274
1283
|
const parseSize = (size) => {
|
|
@@ -1541,7 +1550,7 @@ const CwDialog = props => {
|
|
|
1541
1550
|
}
|
|
1542
1551
|
}
|
|
1543
1552
|
}, [open]);
|
|
1544
|
-
const header = useMemo(() => (jsxs("header", { onMouseDown: handleMouseDown, children: [jsx("span", { children: headline }), customHeader || (jsx("button", { className: styles$
|
|
1553
|
+
const header = useMemo(() => (jsxs("header", { onMouseDown: handleMouseDown, children: [jsx("span", { children: headline }), customHeader || (jsx("button", { className: styles$r["cw-dialog-button-close"], onClick: onClose }))] })), [handleMouseDown, headline, customHeader, onClose]);
|
|
1545
1554
|
const content = useMemo(() => (jsx("section", { children: children })), [children]);
|
|
1546
1555
|
const footer = useMemo(() => (jsx("footer", { children: customFooter || (jsx(CwButton, { variant: "icon", icon: "save", title: "Save", onClick: onSave, tooltipPosition: "top", disabled: disableSave, "data-testid": "cw-dialog-save" })) })), [customFooter, onSave, disableSave]);
|
|
1547
1556
|
const resizeHandles = useMemo(() => size.autoHeight
|
|
@@ -1568,7 +1577,7 @@ const CwDialog = props => {
|
|
|
1568
1577
|
: `${convertFromPx(size.height, size.heightUnit)}${size.heightUnit}`;
|
|
1569
1578
|
return { displayWidth, displayHeight };
|
|
1570
1579
|
}, [size.width, size.height, size.widthUnit, size.heightUnit, size.autoHeight]);
|
|
1571
|
-
const dialogContent = (jsx("div", { "data-has-scrim": hasScrim, className: styles$
|
|
1580
|
+
const dialogContent = (jsx("div", { "data-has-scrim": hasScrim, className: styles$r["cw-dialog-main"], onMouseDown: handleScrimMouseDown, onMouseUp: handleScrimMouseUpOrLeave, onMouseLeave: handleScrimMouseUpOrLeave, "data-pressing": isPressingScrim, children: jsxs("dialog", { ...domProps, ref: dialogRef, style: {
|
|
1572
1581
|
left: `${position.x}px`,
|
|
1573
1582
|
top: `${position.y}px`,
|
|
1574
1583
|
width: displayDimensions.displayWidth,
|
|
@@ -1729,7 +1738,7 @@ function CwAlign(props) {
|
|
|
1729
1738
|
}, children: props.children }));
|
|
1730
1739
|
}
|
|
1731
1740
|
|
|
1732
|
-
var styles$
|
|
1741
|
+
var styles$q = {"card":"cw-card-module__card__HJUT0","clickable":"cw-card-module__clickable__Y-V3X","disabled":"cw-card-module__disabled__0wHh1","loading":"cw-card-module__loading__-fzlx","content":"cw-card-module__content__ma9qy","headerContent":"cw-card-module__headerContent__x4Jfl","footerTags":"cw-card-module__footerTags__80sSW","loadingOverlay":"cw-card-module__loadingOverlay__8-zVV"};
|
|
1733
1742
|
|
|
1734
1743
|
/**
|
|
1735
1744
|
* CwCard - A simple card component for displaying content in a contained format
|
|
@@ -1755,11 +1764,11 @@ const CwCard = ({ id, title, subtitle, alignment = 'center', children, footer, o
|
|
|
1755
1764
|
// Construct class names using CSS modules
|
|
1756
1765
|
const cardClassNames = [
|
|
1757
1766
|
'cw-card',
|
|
1758
|
-
styles$
|
|
1767
|
+
styles$q.card,
|
|
1759
1768
|
className,
|
|
1760
|
-
clickable ? styles$
|
|
1761
|
-
disabled ? styles$
|
|
1762
|
-
isLoading ? styles$
|
|
1769
|
+
clickable ? styles$q.clickable : '',
|
|
1770
|
+
disabled ? styles$q.disabled : '',
|
|
1771
|
+
isLoading ? styles$q.loading : '',
|
|
1763
1772
|
].filter(Boolean).join(' ');
|
|
1764
1773
|
// Handle click event when card is clickable
|
|
1765
1774
|
const handleClick = () => {
|
|
@@ -1776,15 +1785,15 @@ const CwCard = ({ id, title, subtitle, alignment = 'center', children, footer, o
|
|
|
1776
1785
|
// Determine if footer should be rendered
|
|
1777
1786
|
const hasFooter = hasChips || footer || (hasActions && resolvedDirection === "row");
|
|
1778
1787
|
// Actions component to reuse
|
|
1779
|
-
const ActionsComponent = hasActions && !disabled ? (jsxs("div", { className: styles$
|
|
1788
|
+
const ActionsComponent = hasActions && !disabled ? (jsxs("div", { className: styles$q.actions, children: [extraActions ?? null, onEdit && jsx(CwButton, { variant: "icon", icon: "edit", onClick: onEdit }), onDelete && jsx(CwButton, { variant: "icon", icon: "delete", color: "danger", onClick: onDelete })] })) : null;
|
|
1780
1789
|
return (jsxs("div", { ...(id && { id }), className: cardClassNames, ...(style && { style }), ...(clickable && {
|
|
1781
1790
|
role: 'button',
|
|
1782
1791
|
tabIndex: 0,
|
|
1783
1792
|
onClick: handleClick,
|
|
1784
|
-
}), "data-variant": variant, "data-direction": resolvedDirection, children: [hasHeader && (jsxs("header", { children: [(title || subtitle) && (jsxs("div", { className: styles$
|
|
1793
|
+
}), "data-variant": variant, "data-direction": resolvedDirection, children: [hasHeader && (jsxs("header", { children: [(title || subtitle) && (jsxs("div", { className: styles$q.headerContent, "data-align": resolvedAlign, children: [title && jsx("h5", { children: title }), subtitle && jsx("strong", { children: subtitle })] })), resolvedDirection === "column" && ActionsComponent] })), jsx("div", { className: styles$q.content, children: children }), hasFooter && (jsxs("footer", { children: [hasChips && (jsx("div", { className: styles$q.footerTags, children: chips.map((chip, index) => (jsx(CwChip, { label: chip.label, colorScheme: chip.colorScheme, className: styles$q.chip, ...(chip.customColor && { customColor: chip.customColor }), ...(chip.variant && { variant: chip.variant }), ...(chip.icon && { icon: chip.icon }) }, index))) })), footer && (jsx("div", { className: styles$q.footerContent, children: footer }))] })), resolvedDirection === "row" && ActionsComponent, isLoading && (jsx("div", { className: styles$q.loadingOverlay, children: jsx(CwLoading, { isLoading: isLoading, size: "small" }) }))] }));
|
|
1785
1794
|
};
|
|
1786
1795
|
|
|
1787
|
-
var styles$
|
|
1796
|
+
var styles$p = {"cardContainer":"cw-card-list-module__cardContainer__l3YEh","pagination":"cw-card-list-module__pagination__5Ay78","pageInfo":"cw-card-list-module__pageInfo__uiMel","loading":"cw-card-list-module__loading__cYpND","emptyState":"cw-card-list-module__emptyState__RlqiS"};
|
|
1788
1797
|
|
|
1789
1798
|
/**
|
|
1790
1799
|
* Option to display in the CwSelect
|
|
@@ -1879,10 +1888,10 @@ function CwCardList({ items, renderCard, pageSize = 10, layout = 'grid', default
|
|
|
1879
1888
|
icon: sortDirection === 'asc' ? 'arrow-up' : 'arrow-down',
|
|
1880
1889
|
onClick: () => setSortDirection(prev => prev === 'asc' ? 'desc' : 'asc'),
|
|
1881
1890
|
title: `Sort ${sortDirection === 'asc' ? 'descending' : 'ascending'}`,
|
|
1882
|
-
}, value: sortKey, onChange: (e) => handleSortChange(e.target.value), children: sortOptions.map(option => (jsx(CwOption, { value: option.key, children: option.label }, option.key))) }) })), isLoading ? (jsx("div", { className: styles$
|
|
1891
|
+
}, value: sortKey, onChange: (e) => handleSortChange(e.target.value), children: sortOptions.map(option => (jsx(CwOption, { value: option.key, children: option.label }, option.key))) }) })), isLoading ? (jsx("div", { className: styles$p.loading, children: jsx(CwLoading, { isLoading: isLoading }) })) : sortedItems.length === 0 ? (jsx("div", { className: styles$p.emptyState, children: emptyState || jsx("p", { children: "No items to display" }) })) : (jsxs(Fragment, { children: [jsx("div", { className: `${styles$p.cardContainer}`, "data-layout": layout, style: gridStyle, children: visibleItems.map((item, index) => (jsx(React__default.Fragment, { children: renderCard(item, index) }, keyExtractor ? keyExtractor(item, index) : index))) }), totalPages > 1 && (jsxs("div", { className: styles$p.pagination, children: [jsx(CwButton, { variant: "icon", icon: "chevron-left", disabled: currentPage === 1, onClick: () => setCurrentPage(p => Math.max(1, p - 1)) }), jsxs("span", { className: styles$p.pageInfo, children: [currentPage, " / ", totalPages] }), jsx(CwButton, { variant: "icon", icon: "chevron-right", disabled: currentPage === totalPages, onClick: () => setCurrentPage(p => Math.min(totalPages, p + 1)) })] }))] }))] }));
|
|
1883
1892
|
}
|
|
1884
1893
|
|
|
1885
|
-
var styles$
|
|
1894
|
+
var styles$o = {"cw-accordion":"cw-accordion-module__cw-accordion__ErvlW","cw-accordion-body":"cw-accordion-module__cw-accordion-body__xlI8b"};
|
|
1886
1895
|
|
|
1887
1896
|
/**
|
|
1888
1897
|
*
|
|
@@ -1899,7 +1908,7 @@ function CwAccordionContainer(CwelltAccordionContainerProps) {
|
|
|
1899
1908
|
setVisible_accordionBody(!isVisible_accordionBody);
|
|
1900
1909
|
};
|
|
1901
1910
|
// #endregion
|
|
1902
|
-
return (jsxs("div", { className: styles$
|
|
1911
|
+
return (jsxs("div", { className: styles$o["cw-accordion"], style: CwelltAccordionContainerProps.style, "data-open": isVisible_accordionBody, children: [jsxs("header", { onClick: () => showAccordionBody(), children: [jsx("div", { children: CwelltAccordionContainerProps.desc_text }), jsx("button", { className: "cw-button-icon" })] }), jsx("div", { className: styles$o["cw-accordion-body"], children: CwelltAccordionContainerProps.children })] }));
|
|
1903
1912
|
}
|
|
1904
1913
|
|
|
1905
1914
|
/**
|
|
@@ -2157,7 +2166,7 @@ function CwTable({ columns, data, pagination = false, pageSizeOptions = [5, 10,
|
|
|
2157
2166
|
}, min: 1, max: totalPages }), jsx("span", { children: "/" }), jsx("span", { children: totalPages }), jsx(CwButton, { onClick: () => handlePageChange(currentPage + 1), disabled: currentPage === totalPages || totalPages <= 1, variant: "icon", icon: "chevron-right" }), jsx(CwButton, { onClick: () => handlePageChange(totalPages), disabled: currentPage === totalPages || totalPages <= 1, variant: "icon", icon: "chevron-right-double" })] })] }))] }));
|
|
2158
2167
|
}
|
|
2159
2168
|
|
|
2160
|
-
var styles$
|
|
2169
|
+
var styles$n = {"dropIndicator":"cw-sortable-table-module__dropIndicator__ov-Jz","dragging":"cw-sortable-table-module__dragging__MrLrz","skeletonRow":"cw-sortable-table-module__skeletonRow__vyD0M","skeleton":"cw-sortable-table-module__skeleton__QGXAD","saveBar":"cw-sortable-table-module__saveBar__3OdoZ cw-flex-row cw-align-center-center cw-gap-small"};
|
|
2161
2170
|
|
|
2162
2171
|
/**
|
|
2163
2172
|
* Hook that provides state management for CwSortableTable.
|
|
@@ -2220,9 +2229,9 @@ function useSortableTable(initialItems) {
|
|
|
2220
2229
|
}
|
|
2221
2230
|
|
|
2222
2231
|
// ─── Drop indicator row ───────────────────────────────────────────────────────
|
|
2223
|
-
const DropIndicatorRow = ({ colSpan }) => (jsx("tr", { className: styles$
|
|
2232
|
+
const DropIndicatorRow = ({ colSpan }) => (jsx("tr", { className: styles$n.dropIndicator, "aria-hidden": true, children: jsx("td", { colSpan: colSpan, children: jsx("div", {}) }) }));
|
|
2224
2233
|
// ─── Loading skeleton ─────────────────────────────────────────────────────────
|
|
2225
|
-
const LoadingRows = ({ colSpan }) => (jsx(Fragment, { children: Array.from({ length: 4 }).map((_, i) => (jsx("tr", { className: styles$
|
|
2234
|
+
const LoadingRows = ({ colSpan }) => (jsx(Fragment, { children: Array.from({ length: 4 }).map((_, i) => (jsx("tr", { className: styles$n.skeletonRow, children: jsx("td", { colSpan: colSpan, children: jsx("div", { className: styles$n.skeleton }) }) }, i))) }));
|
|
2226
2235
|
// ─── Component ────────────────────────────────────────────────────────────────
|
|
2227
2236
|
/**
|
|
2228
2237
|
* CwSortableTable
|
|
@@ -2309,11 +2318,11 @@ function CwSortableTable({ columns, data, rowKey = "key", onReorder, loading = f
|
|
|
2309
2318
|
return items.map((item, index) => {
|
|
2310
2319
|
const key = item[rowKey];
|
|
2311
2320
|
const isDragging = draggedItem?.[rowKey] === key;
|
|
2312
|
-
return (jsxs(React__default.Fragment, { children: [dropIndicatorIndex === index && (jsx(DropIndicatorRow, { colSpan: totalCols })), jsxs("tr", { draggable: true, onDragStart: (e) => handleDragStart(e, item), onDragOver: (e) => handleDragOver(e, index), onDragEnd: handleDragEnd, className: isDragging ? styles$
|
|
2321
|
+
return (jsxs(React__default.Fragment, { children: [dropIndicatorIndex === index && (jsx(DropIndicatorRow, { colSpan: totalCols })), jsxs("tr", { draggable: true, onDragStart: (e) => handleDragStart(e, item), onDragOver: (e) => handleDragOver(e, index), onDragEnd: handleDragEnd, className: isDragging ? styles$n.dragging : "", children: [showHandle && (jsx("td", { className: "cw-table-col-action", children: jsx(CwIcon, { iconId: "grip-dots", color: "neutral", style: { opacity: 0.75 } }) })), columns.map(col => (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 && (jsx(DropIndicatorRow, { colSpan: totalCols }))] }, String(key)));
|
|
2313
2322
|
});
|
|
2314
2323
|
};
|
|
2315
2324
|
// ── Render ──────────────────────────────────────────────────────────────
|
|
2316
|
-
return (jsxs("div", { className: `cw-table-container ${className ?? ""}`, style: containerStyle, children: [jsxs("table", { className: `cw-table cw-sortable-table ${tableClassName ?? ""}`, style: { width: "100%" }, children: [jsx("thead", { children: jsxs("tr", { children: [showHandle && jsx("th", { className: "cw-table-col-action" }), columns.map(col => (jsx("th", { className: col.className ?? "", style: col.width ? { width: col.width, minWidth: 50 } : undefined, children: col.title }, col.key)))] }) }), jsx("tbody", { children: renderBody() })] }), hasChanges && (jsxs("footer", { className: styles$
|
|
2325
|
+
return (jsxs("div", { className: `cw-table-container ${className ?? ""}`, style: containerStyle, children: [jsxs("table", { className: `cw-table cw-sortable-table ${tableClassName ?? ""}`, style: { width: "100%" }, children: [jsx("thead", { children: jsxs("tr", { children: [showHandle && jsx("th", { className: "cw-table-col-action" }), columns.map(col => (jsx("th", { className: col.className ?? "", style: col.width ? { width: col.width, minWidth: 50 } : undefined, children: col.title }, col.key)))] }) }), jsx("tbody", { children: renderBody() })] }), hasChanges && (jsxs("footer", { className: styles$n.saveBar, children: [jsx(CwButton, { variant: "outline", color: "neutral", icon: "undo", text: discardLabel, onClick: handleDiscard }), jsx(CwButton, { variant: "solid", color: "primary", icon: "save", text: saveLabel, onClick: () => handleSave(onReorder) })] }))] }));
|
|
2317
2326
|
}
|
|
2318
2327
|
|
|
2319
2328
|
/**
|
|
@@ -2512,7 +2521,7 @@ function CwTableServerSide({ columns, data, totalItems, pagination = false, page
|
|
|
2512
2521
|
}, min: 1, max: totalPages }), jsx("span", { children: "/" }), jsx("span", { children: totalPages }), jsx(CwButton, { onClick: () => handlePageChange(state.page + 1), disabled: state.page === totalPages || totalPages <= 1, variant: "icon", icon: "chevron-right" }), jsx(CwButton, { onClick: () => handlePageChange(totalPages), disabled: state.page === totalPages || totalPages <= 1, variant: "icon", icon: "chevron-right-double" })] })] }))] }));
|
|
2513
2522
|
}
|
|
2514
2523
|
|
|
2515
|
-
var styles$
|
|
2524
|
+
var styles$m = {"cw-tabs":"cw-tabs-module__cw-tabs__1pmji","badge":"cw-tabs-module__badge__AmVxW","cw-tabs-content":"cw-tabs-module__cw-tabs-content__HTp8d"};
|
|
2516
2525
|
|
|
2517
2526
|
const TabIcon = ({ icon }) => {
|
|
2518
2527
|
if (!icon)
|
|
@@ -2562,7 +2571,7 @@ function CwTabs(CwTabsProps) {
|
|
|
2562
2571
|
const tabsListStyle = position === 'left' && CwTabsProps.tabsListWidth
|
|
2563
2572
|
? { minWidth: CwTabsProps.tabsListWidth }
|
|
2564
2573
|
: undefined;
|
|
2565
|
-
return (jsxs("div", { id: CwTabsProps.id, "data-testid": CwTabsProps.testId, className: styles$
|
|
2574
|
+
return (jsxs("div", { id: CwTabsProps.id, "data-testid": CwTabsProps.testId, className: styles$m['cw-tabs'] + (CwTabsProps.className ? ` ${CwTabsProps.className}` : "") + "", style: CwTabsProps.style, "data-tabs-position": position, children: [jsx("ul", { style: tabsListStyle, children: CwTabsProps.tabs.map(tab => (jsxs("li", { className: `${tab.key === activeTab ? "cw-tab-active" : ""}`, onClick: () => handleTabClick(tab), "data-active": tab.key === activeTab, "data-tab-key": tab.key, children: [jsx(TabIcon, { icon: tab.icon }), tab.title, (tab.badge !== undefined || tab.badgeColor) && (jsx("span", { className: styles$m['badge'], style: tab.badgeColor ? { backgroundColor: tab.badgeColor, color: getContrastColor(tab.badgeColor) } : undefined, children: tab.badge }))] }, tab.key))) }), jsx("div", { className: styles$m['cw-tabs-content'], "data-active-tab-key": activeTab ?? undefined, children: activeTab !== null && CwTabsProps.tabs.find(tab => tab.key === activeTab)?.content })] }));
|
|
2566
2575
|
}
|
|
2567
2576
|
|
|
2568
2577
|
/**
|
|
@@ -2589,7 +2598,7 @@ const CwExpandable = ({ briefing, onToggle, onOpen, onClose, children, ...detail
|
|
|
2589
2598
|
return (jsxs("details", { ref: myRef, ...detailsProps, className: "cw-expandable", children: [jsx("summary", { children: briefing }), children && jsx("section", { children: children })] }));
|
|
2590
2599
|
};
|
|
2591
2600
|
|
|
2592
|
-
var styles$
|
|
2601
|
+
var styles$l = {"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","detail-empty":"cw-master-detail-module__detail-empty__KFScK"};
|
|
2593
2602
|
|
|
2594
2603
|
const CwMasterDetail = ({ id, className, style, items, selectedKey, onSelect, detailContent, emptyDetail, searchPlaceholder = 'Search...', onSearch, masterHeader, masterFooter, masterWidth: initialWidth = 320, minMasterWidth = 240, maxMasterWidth = 500, resizable = true, showSearch = true, }) => {
|
|
2595
2604
|
const [masterWidth, setMasterWidth] = useState(initialWidth);
|
|
@@ -2625,10 +2634,10 @@ const CwMasterDetail = ({ id, className, style, items, selectedKey, onSelect, de
|
|
|
2625
2634
|
document.body.style.userSelect = '';
|
|
2626
2635
|
};
|
|
2627
2636
|
}, [isResizing, minMasterWidth, maxMasterWidth]);
|
|
2628
|
-
const rootClassName = [styles$
|
|
2629
|
-
return (jsxs("div", { id: id, ref: containerRef, className: rootClassName, style: style, children: [jsxs("aside", { style: { width: masterWidth, minWidth: masterWidth }, children: [showSearch && (jsx("search", { children: jsx("input", { type: "text", placeholder: searchPlaceholder, onChange: (e) => onSearch?.(e.target.value) }) })), masterHeader && (jsx("header", { children: masterHeader })), jsx("ul", { children: items.map((item) => (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 && (jsx("footer", { children: masterFooter }))] }), resizable && (jsx("div", { className: styles$
|
|
2637
|
+
const rootClassName = [styles$l['cw-master-detail'], className].filter(Boolean).join(' ');
|
|
2638
|
+
return (jsxs("div", { id: id, ref: containerRef, className: rootClassName, style: style, children: [jsxs("aside", { style: { width: masterWidth, minWidth: masterWidth }, children: [showSearch && (jsx("search", { children: jsx("input", { type: "text", placeholder: searchPlaceholder, onChange: (e) => onSearch?.(e.target.value) }) })), masterHeader && (jsx("header", { children: masterHeader })), jsx("ul", { children: items.map((item) => (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 && (jsx("footer", { children: masterFooter }))] }), resizable && (jsx("div", { className: styles$l.resizer, "data-resizing": isResizing, onMouseDown: handleMouseDown })), jsx("section", { className: styles$l.detail, children: selectedKey && detailContent
|
|
2630
2639
|
? detailContent
|
|
2631
|
-
: (jsx("div", { className: styles$
|
|
2640
|
+
: (jsx("div", { className: styles$l['detail-empty'], children: emptyDetail ?? 'Select an item to view details' })) })] }));
|
|
2632
2641
|
};
|
|
2633
2642
|
|
|
2634
2643
|
/**
|
|
@@ -2653,7 +2662,7 @@ const CwKeyValueList = ({ items, className = "", emptyValue = "-", direction = "
|
|
|
2653
2662
|
: emptyValue })] }, item.key))) }));
|
|
2654
2663
|
};
|
|
2655
2664
|
|
|
2656
|
-
var styles$
|
|
2665
|
+
var styles$k = {"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"};
|
|
2657
2666
|
|
|
2658
2667
|
function CwSortableList({ items, onReorder, renderItem, className = '', movedItems = new Set(), emptyMessage = "No elements to show", readOnly = false, maxHeight = "300px", }) {
|
|
2659
2668
|
const [draggedItem, setDraggedItem] = useState(null);
|
|
@@ -2716,15 +2725,15 @@ function CwSortableList({ items, onReorder, renderItem, className = '', movedIte
|
|
|
2716
2725
|
}
|
|
2717
2726
|
};
|
|
2718
2727
|
if (items.length === 0) {
|
|
2719
|
-
return (jsx("div", { className: `${styles$
|
|
2728
|
+
return (jsx("div", { className: `${styles$k.sortableList} ${styles$k.emptyState} ${className}`, children: jsx("div", { className: styles$k.emptyMessage, children: emptyMessage }) }));
|
|
2720
2729
|
}
|
|
2721
|
-
return (jsx("div", { className: `${styles$
|
|
2730
|
+
return (jsx("div", { className: `${styles$k.sortableList} ${className}`, style: { maxHeight }, children: items.map((item, index) => {
|
|
2722
2731
|
const { title, extraContent, actions, showHandle = true, expandedContent } = renderItem(item);
|
|
2723
2732
|
const isDragging = draggedItem?.id === item.id;
|
|
2724
2733
|
const isMoved = movedItems.has(item.id);
|
|
2725
2734
|
const canExpand = Boolean(expandedContent);
|
|
2726
2735
|
const isExpanded = expandedItems.has(item.id);
|
|
2727
|
-
return (jsxs(React__default.Fragment, { children: [dropIndicatorIndex === index && jsx("div", { className: styles$
|
|
2736
|
+
return (jsxs(React__default.Fragment, { children: [dropIndicatorIndex === index && jsx("div", { className: styles$k.dropIndicator }), jsxs("div", { className: `${styles$k.sortableItem} ${isDragging ? styles$k.dragging : ''} ${isMoved ? styles$k.moved : ''} ${readOnly ? styles$k.readOnly : ''}`, draggable: !readOnly, onDragStart: (e) => handleDragStart(e, item), onDragOver: (e) => handleDragOver(e, index), onDragEnd: handleDragEnd, children: [jsxs("header", { children: [canExpand ? (jsx(CwButton, { variant: "icon", onClick: () => toggleExpanded(item.id), type: "button", title: isExpanded ? "Collapse" : "Expand", icon: isExpanded ? "chevron-up" : "chevron-down" })) : showHandle ? (jsx("div", { className: styles$k.sortableHandle, children: jsx(CwIcon, { iconId: "grip-dots" }) })) : null, jsxs("div", { className: styles$k.sortableContent, children: [jsx("div", { className: styles$k.sortableTitle, children: title }), extraContent && jsx("div", { className: styles$k.sortableExtraContent, children: extraContent })] }), jsx("div", { className: styles$k.sortableActions, children: actions })] }), isExpanded && expandedContent && (jsx("div", { className: styles$k.expandedContent, children: expandedContent }))] }), !readOnly && dropIndicatorIndex === items.length && index === items.length - 1 && (jsx("div", { className: styles$k.dropIndicator }))] }, item.id));
|
|
2728
2737
|
}) }));
|
|
2729
2738
|
}
|
|
2730
2739
|
|
|
@@ -2901,7 +2910,7 @@ function CwFileUpload(fileUploadProps) {
|
|
|
2901
2910
|
return (jsxs("div", { children: [jsxs("div", { className: "row", children: [jsx("input", { className: "cw-button", type: "file", accept: fileUploadProps.accept, readOnly: true, placeholder: "No file selected...", onChange: handleFileChange }), previewURL && (jsx("div", { className: "row", children: jsx("img", { src: previewURL, alt: "Preview", style: { maxWidth: "200px", maxHeight: "200px" } }) }))] }), error && jsx("div", { className: "row error", children: error }), jsx("div", { className: "row", children: jsxs("label", { children: ["Please note: File/image has to be in ", fileUploadProps.acceptString, " format", fileUploadProps.sizeString && `, ${fileUploadProps.sizeString}`] }) })] }));
|
|
2902
2911
|
}
|
|
2903
2912
|
|
|
2904
|
-
var styles$
|
|
2913
|
+
var styles$j = {"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"};
|
|
2905
2914
|
|
|
2906
2915
|
const DEFAULT_LABELS = {
|
|
2907
2916
|
uploadDisabled: 'Upload disabled',
|
|
@@ -3068,12 +3077,12 @@ function CwFileUploadMultiple(fileUploadProps) {
|
|
|
3068
3077
|
}
|
|
3069
3078
|
}
|
|
3070
3079
|
};
|
|
3071
|
-
return (jsxs("div", { className: `${styles$
|
|
3080
|
+
return (jsxs("div", { className: `${styles$j.fileUploadContainer} ${fileUploadProps.className}`, children: [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$j.hiddenInput }), selectedFiles.length === 0 && !existingFile ? (jsxs("div", { className: `${styles$j.uploadArea} ${fileUploadProps.disabled ? styles$j.uploadAreaDisabled : ''}`, onDragOver: handleDragOver, onDrop: handleDrop, onClick: !fileUploadProps.disabled ? handleButtonClick : undefined, children: [jsx(CwIcon, { iconId: "upload" }), jsx("p", { className: `${styles$j.uploadTitle}`, children: fileUploadProps.disabled ? labels.uploadDisabled : labels.clickToUpload }), jsxs("p", { className: `${styles$j.uploadSubtitle}`, children: [fileUploadProps.accept ? labels.acceptedFiles(fileUploadProps.accept) : labels.allTypesAccepted, !fileUploadProps.multiple && ` ${labels.singleFileOnly}`] })] })) : selectedFiles.length === 0 && existingFile ? (jsxs("div", { className: styles$j.filesContainer, children: [jsxs("div", { className: styles$j.fileItem, children: [jsxs("div", { className: styles$j.fileIcon, children: [jsx(CwIcon, { iconId: "page" }), jsx("span", { className: styles$j.fileExtension, children: getFileExtension(existingFile) })] }), jsx("div", { className: styles$j.fileInfo, children: jsx("p", { className: styles$j.fileName, children: existingFile }) }), jsx(CwButton, { variant: "icon", icon: "close", color: "neutral", onClick: () => {
|
|
3072
3081
|
setExistingFile(undefined);
|
|
3073
3082
|
if (fileUploadProps.onSelect) {
|
|
3074
3083
|
fileUploadProps.onSelect(null);
|
|
3075
3084
|
}
|
|
3076
|
-
}, disabled: fileUploadProps.disabled, className: styles$
|
|
3085
|
+
}, disabled: fileUploadProps.disabled, className: styles$j.smallButton })] }), jsx(CwButton, { text: labels.changeFile, icon: "refresh", onClick: handleButtonClick, disabled: fileUploadProps.disabled })] })) : (jsxs("div", { className: styles$j.filesContainer, children: [jsxs("div", { className: "cw-flex-row cw-align-between-center", children: [jsx("small", { className: styles$j.filesCount, children: labels.filesSelected(selectedFiles.length) }), !fileUploadProps.hideClearAll && (jsx(CwButton, { onClick: removeAllFiles, disabled: fileUploadProps.disabled, color: "danger", variant: "outline", icon: "delete", text: labels.clearAll }))] }), selectedFiles.map((file, index) => (jsxs("div", { className: styles$j.fileItem, children: [jsxs("div", { className: styles$j.fileIcon, children: [jsx(CwIcon, { iconId: "page" }), jsx("span", { className: styles$j.fileExtension, children: getFileExtension(file.name) })] }), jsxs("div", { className: styles$j.fileInfo, children: [jsx("p", { className: styles$j.fileName, children: file.name }), jsxs("p", { className: styles$j.fileSize, children: [(file.size / 1024).toFixed(1), " KB"] })] }), jsx(CwButton, { variant: "icon", icon: "close", color: "neutral", onClick: () => removeFile(index), className: styles$j.smallButton })] }, index))), fileUploadProps.multiple && (jsx(CwButton, { text: labels.addMoreFiles, icon: "plus", variant: "outline", onClick: handleButtonClick, disabled: fileUploadProps.disabled })), !fileUploadProps.multiple && (jsx(CwButton, { text: labels.changeFile, icon: "refresh", onClick: handleButtonClick, disabled: fileUploadProps.disabled }))] }))] }));
|
|
3077
3086
|
}
|
|
3078
3087
|
|
|
3079
3088
|
function CwInput(CwInputProps) {
|
|
@@ -3114,7 +3123,7 @@ function CwDigit(props) {
|
|
|
3114
3123
|
return (jsx("div", { className: "cw-input-text", children: jsxs(CwAlign, { ...alignProps, itemProp: inputProps.required === true ? "required" : "", children: [labelProps && (jsxs(CwLabel, { ...labelProps, children: [iconProps && jsx(CwIcon, { ...iconProps }), labelProps.text] })), jsx("input", { type: "number", ...inputProps }), buttonProps && jsx(CwButton, { ...buttonProps })] }) }));
|
|
3115
3124
|
}
|
|
3116
3125
|
|
|
3117
|
-
var styles$
|
|
3126
|
+
var styles$i = {"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"};
|
|
3118
3127
|
|
|
3119
3128
|
const CwColorPicker = ({ initialColor, onChange, previewText = "Color preview" }) => {
|
|
3120
3129
|
const [rgb, setRgb] = useState({ r: 255, g: 255, b: 255 });
|
|
@@ -3317,13 +3326,13 @@ const CwColorPicker = ({ initialColor, onChange, previewText = "Color preview" }
|
|
|
3317
3326
|
// Calculate background color for the main area based on current hue
|
|
3318
3327
|
const hueColor = hsvToRgb(hsv.h, 100, 100);
|
|
3319
3328
|
const hueHex = rgbToHex(hueColor.r, hueColor.g, hueColor.b);
|
|
3320
|
-
return (jsxs("div", { className: "cw-flex-column cw-gap-small", children: [jsxs("div", { className: "cw-flex-row cw-align-between-center cw-gap-small", children: [jsx("div", { className: styles$
|
|
3329
|
+
return (jsxs("div", { className: "cw-flex-column cw-gap-small", children: [jsxs("div", { className: "cw-flex-row cw-align-between-center cw-gap-small", children: [jsx("div", { className: styles$i.colorPreview, style: { backgroundColor: hexColor, color: getContrastColor(hexColor) }, children: previewText }), jsx("button", { type: "button", className: "cw-button", onClick: toggleInputMode, style: { minWidth: "3ch" }, children: inputMode === 'hex' ? 'RGB' : 'HEX' })] }), jsx("div", { className: "color-inputs-row", children: inputMode === 'hex' ? (jsx("input", { type: "text", value: hexColor, onChange: handleHexChange })) : (jsxs("div", { className: "cw-grid-base-3 cw-gap-small", children: [jsxs("div", { children: [jsx("label", { children: "R:" }), jsx("input", { type: "number", name: "r", min: "0", max: "255", value: rgb.r, onChange: handleRgbChange })] }), jsxs("div", { children: [jsx("label", { children: "G:" }), jsx("input", { type: "number", name: "g", min: "0", max: "255", value: rgb.g, onChange: handleRgbChange })] }), jsxs("div", { children: [jsx("label", { children: "B:" }), jsx("input", { type: "number", name: "b", min: "0", max: "255", value: rgb.b, onChange: handleRgbChange })] })] })) }), jsxs("div", { className: styles$i.colorPickerInteractiveArea, children: [jsx("div", { className: styles$i.hueBar, ref: hueBarRef, onClick: handleHueBarClick, children: jsx("div", { className: styles$i.hueBarSlider, style: { top: `${(360 - hsv.h) / 360 * 100}%` } }) }), jsxs("div", { className: styles$i.colorArea, ref: colorAreaRef, onClick: handleColorAreaClick, children: [jsxs("div", { className: styles$i.colorAreaOverlay, children: [jsx("div", { className: styles$i.hueBackground, style: { backgroundColor: hueHex } }), jsx("div", { className: styles$i.whiteGradient }), jsx("div", { className: styles$i.blackGradient })] }), jsx("div", { className: styles$i.colorAreaCursor, style: {
|
|
3321
3330
|
left: `${hsv.s}%`,
|
|
3322
3331
|
top: `${100 - hsv.v}%`
|
|
3323
3332
|
} })] })] })] }));
|
|
3324
3333
|
};
|
|
3325
3334
|
|
|
3326
|
-
var styles$
|
|
3335
|
+
var styles$h = {"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"};
|
|
3327
3336
|
|
|
3328
3337
|
const CwInputColor = ({ value, onChange, previewText = "Color preview", disabled = false, readOnly = false, width = '4rem', height = '2rem', labelProps, layoutProps, }) => {
|
|
3329
3338
|
const [isOpen, setIsOpen] = useState(false);
|
|
@@ -3456,11 +3465,11 @@ const CwInputColor = ({ value, onChange, previewText = "Color preview", disabled
|
|
|
3456
3465
|
break;
|
|
3457
3466
|
}
|
|
3458
3467
|
};
|
|
3459
|
-
return (jsxs("div", { className: `cw-input-color ${styles$
|
|
3468
|
+
return (jsxs("div", { className: `cw-input-color ${styles$h.container}`, "data-direction": layoutProps?.direction ?? "row", "data-align": layoutProps?.align, children: [labelProps && (jsx(CwLabel, { ...labelProps })), jsx("div", { ref: containerRef, onClick: handleToggle, className: `${styles$h.selectColor} ${disabled ? styles$h.disabled : ''} ${readOnly ? styles$h.readOnly : ''}`, style: {
|
|
3460
3469
|
width,
|
|
3461
3470
|
height,
|
|
3462
3471
|
backgroundColor: value,
|
|
3463
|
-
}, "aria-label": "Open color picker", "aria-expanded": isOpen, "aria-haspopup": "dialog", "aria-readonly": readOnly, role: "button", tabIndex: disabled ? -1 : 0, onKeyDown: handleKeyDown }), isOpen && createPortal(jsx("div", { ref: dropdownRef, className: styles$
|
|
3472
|
+
}, "aria-label": "Open color picker", "aria-expanded": isOpen, "aria-haspopup": "dialog", "aria-readonly": readOnly, role: "button", tabIndex: disabled ? -1 : 0, onKeyDown: handleKeyDown }), isOpen && createPortal(jsx("div", { ref: dropdownRef, className: styles$h.colorDropdown, style: dropdownStyle, role: "dialog", "aria-modal": "true", "aria-label": "Color picker", children: jsx(CwColorPicker, { initialColor: value, onChange: handleColorChange, previewText: previewText }) }), document.body)] }));
|
|
3464
3473
|
};
|
|
3465
3474
|
|
|
3466
3475
|
/**
|
|
@@ -3710,7 +3719,7 @@ function CwInputDateText(props) {
|
|
|
3710
3719
|
return (jsx("div", { className: "cw-input-date-text", children: jsxs(CwAlign, { ...alignProps, itemProp: required ? "required" : "", children: [labelProps && (jsxs(CwLabel, { ...labelProps, children: [iconProps && jsx(CwIcon, { ...iconProps }), labelProps.text] })), jsxs("div", { children: [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 }), jsxs("span", { children: [jsx(CwIcon, { iconId: "calendar" }), jsx("input", { type: "date", disabled: disabled, onChange: onChangeInputDate, readOnly: readOnly, ref: dateInputRef, tabIndex: -1, value: date, ...inputProps })] })] }), buttonProps && jsx(CwButton, { ...buttonProps })] }) }));
|
|
3711
3720
|
}
|
|
3712
3721
|
|
|
3713
|
-
var styles$
|
|
3722
|
+
var styles$g = {"dropZone":"cw-input-image-module__dropZone__ygrGu"};
|
|
3714
3723
|
|
|
3715
3724
|
function CwInputImage(props) {
|
|
3716
3725
|
const [_uploadedImage, setUploadedImage] = useState(null);
|
|
@@ -3758,7 +3767,7 @@ function CwInputImage(props) {
|
|
|
3758
3767
|
const file = e.target.files?.[0];
|
|
3759
3768
|
handleFile(file ?? null);
|
|
3760
3769
|
};
|
|
3761
|
-
return (jsxs("div", { className: "cw-input-image", children: [jsxs("div", { onDragOver: (e) => e.preventDefault(), onDrop: handleDrop, className: styles$
|
|
3770
|
+
return (jsxs("div", { className: "cw-input-image", children: [jsxs("div", { onDragOver: (e) => e.preventDefault(), onDrop: handleDrop, className: styles$g.dropZone, children: [jsx("p", { children: "Drop image here" }), jsxs("small", { children: ["(", allowedFormats.join(", ").replace(/image\//g, ""), ")"] })] }), jsxs("div", { className: "cw-flex-row cw-align-center-center cw-gap-small", children: [jsx(CwButton, { onClick: onPasteButtonClick, icon: "paste", text: "Paste" }), jsx(CwButton, { onClick: () => inputRef.current?.click(), icon: "folder-open", text: "Browse" })] }), jsx("input", { ref: inputRef, type: "file", accept: allowedFormats.join(","), onChange: handleFileChange, style: { display: "none" }, ...inputProps })] }));
|
|
3762
3771
|
}
|
|
3763
3772
|
|
|
3764
3773
|
/**
|
|
@@ -3890,7 +3899,7 @@ const CwImageArea = forwardRef((props, ref) => {
|
|
|
3890
3899
|
});
|
|
3891
3900
|
CwImageArea.displayName = "CwImageArea";
|
|
3892
3901
|
|
|
3893
|
-
var styles$
|
|
3902
|
+
var styles$f = {"cw-weekday-selector":"cw-weekday-selector-module__cw-weekday-selector__Iz4GZ"};
|
|
3894
3903
|
|
|
3895
3904
|
/**
|
|
3896
3905
|
* This class represents a week where days can be selected or unselected
|
|
@@ -4030,15 +4039,16 @@ const CwWeekdaySelector = ({ value = "", onChange, disabled = false }) => {
|
|
|
4030
4039
|
setSelectedDays(newWeekdays);
|
|
4031
4040
|
onChange?.(newWeekdays.toString());
|
|
4032
4041
|
};
|
|
4033
|
-
return (jsx("div", { className: styles$
|
|
4042
|
+
return (jsx("div", { className: styles$f["cw-weekday-selector"], children: Weekdays.getFullWeek().map(day => (jsx("input", { type: "checkbox", "data-day": day, checked: selectedDays.toArray().includes(day), onChange: (e) => handleChange(day, e.target.checked), disabled: disabled }, day))) }));
|
|
4034
4043
|
};
|
|
4035
4044
|
|
|
4036
|
-
var styles$
|
|
4045
|
+
var styles$e = {"check-container":"cw-check-module__check-container__4nscZ","group":"cw-check-module__group__6JCQo","options":"cw-check-module__options__-g9LF"};
|
|
4037
4046
|
|
|
4038
4047
|
function CwCheck(props) {
|
|
4039
|
-
const { labelProps, labelText,
|
|
4040
|
-
const
|
|
4041
|
-
|
|
4048
|
+
const { labelProps, labelText, direction, alignment, className, ...inputProps } = props;
|
|
4049
|
+
const resolvedDirection = direction ?? alignment ?? "row";
|
|
4050
|
+
const displayText = labelProps?.text ?? labelText;
|
|
4051
|
+
return (jsx("div", { className: `cw-check ${styles$e["check-container"]}${className ? ` ${className}` : ''}`, children: jsxs("label", { "data-direction": resolvedDirection, children: [jsx("input", { type: "checkbox", ...inputProps }), displayText && (jsx("span", { className: "cw-icon-text", children: displayText }))] }) }));
|
|
4042
4052
|
}
|
|
4043
4053
|
|
|
4044
4054
|
function CwCheckbox(CwCheckboxProps) {
|
|
@@ -4056,7 +4066,16 @@ function CwCheckbox(CwCheckboxProps) {
|
|
|
4056
4066
|
: "cw_checkboxContent cwellt_flex_row" + " " + CwCheckboxProps.classNameContainer, style: CwCheckboxProps.styleContainer, children: [inputElement, CwCheckboxProps.labelName ? (jsx("label", { htmlFor: CwCheckboxProps.id, className: CwCheckboxProps.labelClassName, children: CwCheckboxProps.labelName })) : null] }));
|
|
4057
4067
|
}
|
|
4058
4068
|
|
|
4059
|
-
|
|
4069
|
+
/**
|
|
4070
|
+
* CwCheckboxGroup - Multi-select group of native checkbox inputs.
|
|
4071
|
+
*
|
|
4072
|
+
* Use for selecting any number of values from a list of options. Layout follows the
|
|
4073
|
+
* CwKeyValueList / CwRadioGroup convention with two nested {@link CwLayoutProps} axes applied as
|
|
4074
|
+
* `data-*` attributes: `groupLayout` positions the label relative to the group block (root grid),
|
|
4075
|
+
* `itemLayout` controls how the checkboxes flow among themselves (options container) and, on the
|
|
4076
|
+
* opposite axis, each checkbox's own box-to-text layout.
|
|
4077
|
+
*/
|
|
4078
|
+
function CwCheckboxGroup({ options, value = [], onChange, labelProps, groupLayout, itemLayout, required, disabled, className, feedback, alignProps, optionsAlignment, "data-testid": dataTestId, }) {
|
|
4060
4079
|
const handleChange = (optionValue, checked) => {
|
|
4061
4080
|
if (checked) {
|
|
4062
4081
|
onChange([...value, optionValue]);
|
|
@@ -4068,15 +4087,57 @@ function CwCheckboxGroup({ options, value = [], onChange, labelProps, alignProps
|
|
|
4068
4087
|
const feedbackMessages = feedback
|
|
4069
4088
|
? Array.isArray(feedback) ? feedback : [feedback]
|
|
4070
4089
|
: [];
|
|
4071
|
-
|
|
4072
|
-
|
|
4073
|
-
|
|
4090
|
+
// Effective layout — precedence: new `groupLayout`/`itemLayout` > legacy-derived > default.
|
|
4091
|
+
// Legacy `alignProps.flexDirection` drove the label-vs-options axis (default "row" = label
|
|
4092
|
+
// beside the options); map it to `groupLayout.direction`.
|
|
4093
|
+
const groupDirection = groupLayout?.direction
|
|
4094
|
+
?? (alignProps?.flexDirection === "column" ? "column" : "row");
|
|
4095
|
+
// Legacy `optionsAlignment` is inverted relative to the options flow: "row" stacked the options
|
|
4096
|
+
// (column flow) with each check internally row; "column" laid them inline (row flow) with each
|
|
4097
|
+
// check internally column. Default reproduces the legacy `optionsAlignment="row"` case.
|
|
4098
|
+
const itemDirection = itemLayout?.direction
|
|
4099
|
+
?? (optionsAlignment === "column" ? "row" : "column");
|
|
4100
|
+
// Each checkbox's box-to-text layout is the opposite of the options flow, mirroring CwRadioGroup.
|
|
4101
|
+
const checkDirection = itemDirection === "row" ? "column" : "row";
|
|
4102
|
+
return (jsxs("div", { className: `cw-checkbox-group ${styles$e.group}${className ? ` ${className}` : ""}`, "data-testid": dataTestId, "data-direction": labelProps ? groupDirection : "column", "data-align": groupLayout?.align, "data-gap": groupLayout?.gap, children: [labelProps && (jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsx("div", { className: styles$e.options, role: "group", "aria-label": labelProps?.text, "aria-required": required || undefined, "data-direction": itemDirection, "data-gap": itemLayout?.gap, children: options.map((option) => (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) => (jsx("p", { className: "cw-input-info", "data-color": feedbackItem.type, children: feedbackItem.message }, index)))] }));
|
|
4103
|
+
}
|
|
4104
|
+
|
|
4105
|
+
var styles$d = {"radio":"cw-radio-module__radio__5sh7a","group":"cw-radio-module__group__br-HM","options":"cw-radio-module__options__LSw7M"};
|
|
4106
|
+
|
|
4107
|
+
/** Single native radio input. Building block for CwRadioGroup. */
|
|
4108
|
+
function CwRadio({ label, direction = "row", className, ...inputProps }) {
|
|
4109
|
+
return (jsxs("label", { className: `cw-radio ${styles$d.radio}${className ? ` ${className}` : ""}`, "data-direction": direction, children: [jsx("input", { type: "radio", ...inputProps }), label && jsx("span", { children: label })] }));
|
|
4110
|
+
}
|
|
4111
|
+
|
|
4112
|
+
/**
|
|
4113
|
+
* CwRadioGroup - Single-select group of native radio inputs.
|
|
4114
|
+
*
|
|
4115
|
+
* Built on `<input type="radio">` sharing one `name`, so the browser provides radio-group
|
|
4116
|
+
* semantics (roving tabindex, arrow-key navigation) natively. Use for a single choice from a
|
|
4117
|
+
* list of options; for 2–3 options shown as a strip use CwButtonSwitch.
|
|
4118
|
+
*
|
|
4119
|
+
* Layout follows the CwKeyValueList convention with two nested {@link CwLayoutProps} axes
|
|
4120
|
+
* applied as `data-*` attributes: `groupLayout` positions the label relative to the radiogroup
|
|
4121
|
+
* block (root grid), `itemLayout` controls how the radios flow among themselves (options
|
|
4122
|
+
* container) and, on the opposite axis, each radio's own circle-to-text layout.
|
|
4123
|
+
*/
|
|
4124
|
+
function CwRadioGroup({ options, value, onChange, labelProps, groupLayout, itemLayout, required, disabled, className, feedback, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "data-testid": dataTestId, }) {
|
|
4125
|
+
const groupName = useId();
|
|
4126
|
+
const feedbackMessages = feedback
|
|
4127
|
+
? Array.isArray(feedback) ? feedback : [feedback]
|
|
4128
|
+
: [];
|
|
4129
|
+
// Each radio's circle-to-text layout is the opposite of the options flow: a stacked list
|
|
4130
|
+
// (itemLayout column) reads best with the circle beside the text; a side-by-side row reads
|
|
4131
|
+
// best with the circle above the text.
|
|
4132
|
+
const radioDirection = itemLayout?.direction === "row" ? "column" : "row";
|
|
4133
|
+
return (jsxs("div", { className: `cw-radio-group ${styles$d.group}${className ? ` ${className}` : ""}`, "data-testid": dataTestId, "data-direction": labelProps ? (groupLayout?.direction ?? "column") : "column", "data-align": groupLayout?.align, "data-gap": groupLayout?.gap, children: [labelProps && (jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsx("div", { className: styles$d.options, role: "radiogroup", "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) => (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) => (jsx("p", { className: "cw-input-info", "data-color": feedbackItem.type, children: feedbackItem.message }, index)))] }));
|
|
4074
4134
|
}
|
|
4075
4135
|
|
|
4076
4136
|
function CwToggle(props) {
|
|
4077
|
-
const { labelProps, labelText,
|
|
4078
|
-
const
|
|
4079
|
-
|
|
4137
|
+
const { labelProps, labelText, direction, alignment, className, style, ...inputProps } = props;
|
|
4138
|
+
const resolvedDirection = direction ?? alignment ?? "row";
|
|
4139
|
+
const displayText = labelProps?.text ?? labelText;
|
|
4140
|
+
return (jsx("div", { className: `cw-toggle ${className ? ` ${className}` : ''}`, style: style, children: jsxs("label", { className: "cw-toggle-label", "data-direction": resolvedDirection, children: [displayText && (jsx("span", { className: "cw-icon-text", children: displayText })), jsx("input", {
|
|
4080
4141
|
//data-color={color}
|
|
4081
4142
|
type: "checkbox", ...inputProps })] }) }));
|
|
4082
4143
|
}
|
|
@@ -4335,7 +4396,7 @@ function CwDropdownFilter(props) {
|
|
|
4335
4396
|
return (jsxs("div", { id: props.IdContent, className: containerClassName, children: [props.children, isVisible && (jsx("nav", { className: "cw-dropdown-menu", style: inlineStyles, onMouseLeave: props.onMouseLeave, id: props.idDropDownFilter, role: "menu", children: jsx("ul", { role: "none", children: props.DataSourceDropDownItem?.map((item) => (jsx("li", { id: item.IdDropDown_filter, role: "menuitem", children: item.dropDownFilter_desc }, item.IdDropDown_filter))) }) }))] }));
|
|
4336
4397
|
}
|
|
4337
4398
|
|
|
4338
|
-
var styles$
|
|
4399
|
+
var styles$c = {"container":"cw-popover-button-module__container__YSWQU","panel":"cw-popover-button-module__panel__C-BTn"};
|
|
4339
4400
|
|
|
4340
4401
|
/**
|
|
4341
4402
|
* Button that toggles a floating panel with arbitrary children.
|
|
@@ -4414,7 +4475,7 @@ function CwPopoverButton({ children, panelWidth = "auto", placement = "bottom-st
|
|
|
4414
4475
|
}
|
|
4415
4476
|
panel.showPopover();
|
|
4416
4477
|
}, [placement]);
|
|
4417
|
-
return (jsxs("div", { ref: containerRef, className: styles$
|
|
4478
|
+
return (jsxs("div", { ref: containerRef, className: styles$c.container, children: [jsx(CwButton, { ...buttonProps, onClick: handleClick }), jsx("div", { ref: panelCallbackRef, className: `${styles$c.panel}${panelClassName ? ` ${panelClassName}` : ""}`, style: { width: panelWidth }, children: children })] }));
|
|
4418
4479
|
}
|
|
4419
4480
|
|
|
4420
4481
|
function itemsToMultiFilterTags(items, nameKey, valueKey, category, primaryColor, onPrimaryColor) {
|
|
@@ -4432,13 +4493,13 @@ function itemsToMultiFilterTags(items, nameKey, valueKey, category, primaryColor
|
|
|
4432
4493
|
return result;
|
|
4433
4494
|
}
|
|
4434
4495
|
|
|
4435
|
-
var styles$
|
|
4496
|
+
var styles$b = {"cw-multifilter-tag":"cw-multi-filter-tag-module__cw-multifilter-tag__Epda-"};
|
|
4436
4497
|
|
|
4437
4498
|
const CwMultiFilterTag = props => {
|
|
4438
4499
|
const { ID, Name, Value, Category, Removable, PrimaryColor, Selectable, Selected } = props;
|
|
4439
4500
|
const backgroundColor = `rgb(${PrimaryColor.r},${PrimaryColor.g},${PrimaryColor.b})`;
|
|
4440
4501
|
const isOutlineMode = Selected && !Removable;
|
|
4441
|
-
return (jsx("li", { className: styles$
|
|
4502
|
+
return (jsx("li", { className: styles$b["cw-multifilter-tag"], id: ID, "data-value": Value, "data-category": Category, "data-selected": !!Selected, title: props.tooltip ?? Name, onClick: () => {
|
|
4442
4503
|
if (Selectable)
|
|
4443
4504
|
props.OnSelect?.(props);
|
|
4444
4505
|
}, children: jsx(CwChip, { label: Name, colorScheme: "custom", customColor: backgroundColor, variant: isOutlineMode ? "outline" : "soft", closable: Removable, onClose: () => props.OnRemove?.(props),
|
|
@@ -4448,7 +4509,7 @@ const CwMultiFilterTag = props => {
|
|
|
4448
4509
|
} : undefined }) }));
|
|
4449
4510
|
};
|
|
4450
4511
|
|
|
4451
|
-
var styles$
|
|
4512
|
+
var styles$a = {"cw-multi-filter-catalog-container":"cw-multi-filter-module__cw-multi-filter-catalog-container__S3nsq","cw-multi-filter":"cw-multi-filter-module__cw-multi-filter__zipBK","category-selected":"cw-multi-filter-module__category-selected__eYbes","cw-multi-filter-search":"cw-multi-filter-module__cw-multi-filter-search__eyHr0 cw-choice-input-box-module__inputBox__gHY9d"};
|
|
4452
4513
|
|
|
4453
4514
|
/**
|
|
4454
4515
|
* A multiple filter selector, a MULTI-SELECT even. Allows users to select and filter items based on tags.
|
|
@@ -4675,9 +4736,9 @@ const CwMultiFilter = ({ allTags, id, onChangeSelectedTags, selectedTags, placeh
|
|
|
4675
4736
|
inputRef.current?.focus();
|
|
4676
4737
|
}
|
|
4677
4738
|
};
|
|
4678
|
-
return (jsxs("form", { ref: componentRef, id: id, className: `${styles$
|
|
4739
|
+
return (jsxs("form", { ref: componentRef, id: id, className: `${styles$a["cw-multi-filter"]}${className ? ` ${className}` : ""}`, style: style, onSubmit: (e) => {
|
|
4679
4740
|
e.preventDefault();
|
|
4680
|
-
}, children: [jsxs("div", { onClick: handleDivClick, ref: wrapperRef, className: styles$
|
|
4741
|
+
}, children: [jsxs("div", { onClick: handleDivClick, ref: wrapperRef, className: styles$a["cw-multi-filter-search"], style: isPanelOpen ? { outline: "1px solid var(--cw-color-outline-variant)" } : {}, children: [jsxs("ul", { id: id + "_selected_filters", children: [Array.from(selectedTags).map(tag => (createElement(CwMultiFilterTag, { ...tag, key: tag.ID, Selectable: false, Removable: true, OnRemove: () => removeTag(tag.ID) }))), jsx("input", { type: "text", id: id + "_input", ref: inputRef, value: inputTextValue, spellCheck: false, onFocus: () => setIsPanelOpen(true), onChange: e => handleInputText(e.currentTarget.value), autoComplete: "off", placeholder: selectedTags.size === 0 ? placeholder : "", onKeyDown: e => {
|
|
4681
4742
|
switch (e.key) {
|
|
4682
4743
|
case "Enter":
|
|
4683
4744
|
case "Tab": {
|
|
@@ -4704,7 +4765,7 @@ const CwMultiFilter = ({ allTags, id, onChangeSelectedTags, selectedTags, placeh
|
|
|
4704
4765
|
break;
|
|
4705
4766
|
}
|
|
4706
4767
|
}
|
|
4707
|
-
} })] }), selectedTags.size > 0 && (jsx(CwButton, { type: "button", variant: "icon", color: "neutral", icon: "close", onMouseDown: e => e.preventDefault(), onClick: (e) => { e.stopPropagation(); onChangeSelectedTags(new Set()); setIsPanelOpen(false); }, tabIndex: -1, "aria-label": "Clear all" }))] }), renderPanel(jsxs("section", { ref: panelRef, className: styles$
|
|
4768
|
+
} })] }), selectedTags.size > 0 && (jsx(CwButton, { type: "button", variant: "icon", color: "neutral", icon: "close", onMouseDown: e => e.preventDefault(), onClick: (e) => { e.stopPropagation(); onChangeSelectedTags(new Set()); setIsPanelOpen(false); }, tabIndex: -1, "aria-label": "Clear all" }))] }), renderPanel(jsxs("section", { ref: panelRef, className: styles$a["cw-multi-filter-catalog-container"], style: panelStyle, children: [jsxs("nav", { children: [jsx("button", { className: selectedCategory === "All" ? styles$a["category-selected"] : undefined, onClick: () => handleClickCategory("All"), children: allCategoriesLabel }), Array.from(categoriesMappedToTags().keys()).map(category => (jsx("button", { className: selectedCategory === category ? styles$a["category-selected"] : undefined, style: {
|
|
4708
4769
|
backgroundColor: getColor(category).primary,
|
|
4709
4770
|
color: getColor(category).onPrimary,
|
|
4710
4771
|
}, onClick: () => handleClickCategory(category), children: category }, category)))] }), jsx("ul", { children: displayTags
|
|
@@ -4730,7 +4791,7 @@ const CwMultiFilter = ({ allTags, id, onChangeSelectedTags, selectedTags, placeh
|
|
|
4730
4791
|
} }, props.ID))) })] }))] }));
|
|
4731
4792
|
};
|
|
4732
4793
|
|
|
4733
|
-
var styles$
|
|
4794
|
+
var styles$9 = {"container":"cw-tag-selector-module__container__-do8i","inputBox":"cw-tag-selector-module__inputBox__3NGz9 cw-choice-input-box-module__inputBox__gHY9d","disabled":"cw-tag-selector-module__disabled__vbud9 cw-choice-input-box-module__disabled__TFAnC","dropdown":"cw-tag-selector-module__dropdown__X6Dob cw-choice-dropdown-module__dropdown__P0b4j","option":"cw-tag-selector-module__option__2UQ7g cw-choice-dropdown-module__option__uR-ro","optionFocused":"cw-tag-selector-module__optionFocused__8-lv8 cw-choice-dropdown-module__optionFocused__BYMxj","optionDot":"cw-tag-selector-module__optionDot__CdFlG cw-choice-dropdown-module__colorCircle__x7mI9","selectAll":"cw-tag-selector-module__selectAll__HyvMA"};
|
|
4734
4795
|
|
|
4735
4796
|
/**
|
|
4736
4797
|
* Multi-select input with chip tags and searchable dropdown.
|
|
@@ -4865,11 +4926,11 @@ function CwTagSelector({ id, options, value, onChange, labelProps, iconProps, al
|
|
|
4865
4926
|
// Keeping containerRef for any other potential use
|
|
4866
4927
|
const direction = alignProps?.flexDirection ?? "row";
|
|
4867
4928
|
const feedbackMessages = feedback ? (Array.isArray(feedback) ? feedback : [feedback]) : [];
|
|
4868
|
-
return (jsxs("div", { ref: containerRef, className: `${styles$
|
|
4869
|
-
inputRef.current?.focus(); }, children: [selectedOptions.map(opt => (jsx(CwChip, { label: opt.label, colorScheme: opt.color ? "custom" : "info", customColor: opt.color, closable: !disabled, onClose: () => handleRemove(opt.value) }, opt.value))), jsx("input", { ref: inputRef, type: "text", value: search, onChange: handleInputChange, onFocus: handleInputFocus, onKeyDown: handleKeyDown, placeholder: selectedOptions.length === 0 ? placeholder : "", disabled: disabled, autoComplete: "off" }), value.length > 0 && !disabled && (jsx(CwButton, { type: "button", variant: "icon", color: "neutral", icon: "close", onMouseDown: (e) => e.preventDefault(), onClick: (e) => { e.stopPropagation(); onChange([]); setSearch(""); setOpen(false); }, tabIndex: -1, "aria-label": "Clear all" }))] })] }), feedbackMessages.map((fb, i) => (jsx("p", { className: "cw-input-info", "data-color": fb.type, children: fb.message }, i))), renderPanel((showSelectAll || filtered.length > 0) ? (jsxs("div", { ref: panelRef, className: styles$
|
|
4929
|
+
return (jsxs("div", { ref: containerRef, className: `${styles$9.container}${className ? ` ${className}` : ""}`, style: style, id: id, "data-direction": direction, children: [jsxs(CwAlign, { ...alignProps, children: [labelProps && (jsxs(CwLabel, { ...labelProps, children: [iconProps && jsx(CwIcon, { ...iconProps }), labelProps.text] })), jsxs("div", { className: `${styles$9.inputBox}${disabled ? ` ${styles$9.disabled}` : ""}`, ref: inputBoxRef, onClick: () => { if (!disabled)
|
|
4930
|
+
inputRef.current?.focus(); }, children: [selectedOptions.map(opt => (jsx(CwChip, { label: opt.label, colorScheme: opt.color ? "custom" : "info", customColor: opt.color, closable: !disabled, onClose: () => handleRemove(opt.value) }, opt.value))), jsx("input", { ref: inputRef, type: "text", value: search, onChange: handleInputChange, onFocus: handleInputFocus, onKeyDown: handleKeyDown, placeholder: selectedOptions.length === 0 ? placeholder : "", disabled: disabled, autoComplete: "off" }), value.length > 0 && !disabled && (jsx(CwButton, { type: "button", variant: "icon", color: "neutral", icon: "close", onMouseDown: (e) => e.preventDefault(), onClick: (e) => { e.stopPropagation(); onChange([]); setSearch(""); setOpen(false); }, tabIndex: -1, "aria-label": "Clear all" }))] })] }), feedbackMessages.map((fb, i) => (jsx("p", { className: "cw-input-info", "data-color": fb.type, children: fb.message }, i))), renderPanel((showSelectAll || filtered.length > 0) ? (jsxs("div", { ref: panelRef, className: styles$9.dropdown, style: panelStyle, children: [showSelectAll && !search && (jsxs("div", { className: styles$9.selectAll, onMouseDown: (e) => e.preventDefault(), onClick: handleToggleAll, children: [jsx("input", { type: "checkbox", checked: allSelected, readOnly: true, tabIndex: -1 }), allSelected ? "Deselect all" : "Select all"] })), jsx("ul", { ref: listRef, children: filtered.map((opt, idx) => (jsxs("li", { className: `${styles$9.option}${idx === focusedIndex ? ` ${styles$9.optionFocused}` : ""}`, onMouseDown: (e) => e.preventDefault(), onClick: () => handleSelect(opt.value), onMouseEnter: () => setFocusedIndex(idx), title: opt.tooltip, children: [opt.color && jsx("span", { className: styles$9.optionDot, style: { backgroundColor: opt.color } }), opt.label] }, opt.value))) })] })) : null)] }));
|
|
4870
4931
|
}
|
|
4871
4932
|
|
|
4872
|
-
var styles$
|
|
4933
|
+
var styles$8 = {"tree-container":"cw-tree-view-module__tree-container__NN-HJ","tree-wrapper":"cw-tree-view-module__tree-wrapper__keBZI","tree-item":"cw-tree-view-module__tree-item__prE9N","tree-node":"cw-tree-view-module__tree-node__wfro9","selected":"cw-tree-view-module__selected__XJQ0w","non-selectable":"cw-tree-view-module__non-selectable__YuPSx","tree-children":"cw-tree-view-module__tree-children__ji8CZ","empty-state":"cw-tree-view-module__empty-state__yvRjo","tree-label":"cw-tree-view-module__tree-label__ss3Nf","tree-spacer":"cw-tree-view-module__tree-spacer__E9Ud2"};
|
|
4873
4934
|
|
|
4874
4935
|
function CwTreeView({ data, onSelect, allowParentSelection = false, selectedId: initialSelectedId = null }) {
|
|
4875
4936
|
const [expanded, setExpanded] = useState(new Set());
|
|
@@ -4936,10 +4997,10 @@ function CwTreeView({ data, onSelect, allowParentSelection = false, selectedId:
|
|
|
4936
4997
|
const isLeaf = !hasChildren;
|
|
4937
4998
|
const isSelected = selectedId?.toString().toLowerCase() === node.id.toString().toLowerCase();
|
|
4938
4999
|
const selectable = allowParentSelection || isLeaf;
|
|
4939
|
-
return (jsxs("div", { className: styles$
|
|
4940
|
-
styles$
|
|
4941
|
-
isSelected && styles$
|
|
4942
|
-
!selectable && styles$
|
|
5000
|
+
return (jsxs("div", { className: styles$8["tree-item"], children: [jsxs("div", { className: [
|
|
5001
|
+
styles$8["tree-node"],
|
|
5002
|
+
isSelected && styles$8["selected"],
|
|
5003
|
+
!selectable && styles$8["non-selectable"]
|
|
4943
5004
|
].filter(Boolean).join(' '), style: { paddingLeft: `${depth * 24 + 8}px` }, onClick: () => {
|
|
4944
5005
|
if (selectable) {
|
|
4945
5006
|
setSelectedId(node.id);
|
|
@@ -4948,7 +5009,7 @@ function CwTreeView({ data, onSelect, allowParentSelection = false, selectedId:
|
|
|
4948
5009
|
else {
|
|
4949
5010
|
toggleExpand(node.id);
|
|
4950
5011
|
}
|
|
4951
|
-
}, children: [hasChildren && (jsx(CwIcon, { size: "large", iconId: isExpanded ? "chevron-down" : "chevron-right" })), jsx("div", { className: `${styles$
|
|
5012
|
+
}, children: [hasChildren && (jsx(CwIcon, { size: "large", iconId: isExpanded ? "chevron-down" : "chevron-right" })), jsx("div", { className: `${styles$8["tree-label"]} ${!hasChildren ? styles$8["tree-spacer"] : ''}`, children: node.label })] }), hasChildren && isExpanded && (jsx("div", { className: styles$8["tree-children"], children: node.children.map((child) => renderNode(child, depth + 1)) }))] }, node.id));
|
|
4952
5013
|
};
|
|
4953
5014
|
// Function to search for nodes that match the search term
|
|
4954
5015
|
const searchInTree = (nodes, searchTerm) => {
|
|
@@ -4972,7 +5033,7 @@ function CwTreeView({ data, onSelect, allowParentSelection = false, selectedId:
|
|
|
4972
5033
|
return results;
|
|
4973
5034
|
};
|
|
4974
5035
|
const filteredData = searchInTree(data, search);
|
|
4975
|
-
return (jsxs("div", { className: `cw-tree-view ${styles$
|
|
5036
|
+
return (jsxs("div", { className: `cw-tree-view ${styles$8["tree-container"]}`, children: [jsxs("header", { children: [jsx("input", { type: "text", placeholder: "Search in tree...", value: search, onChange: (e) => setSearch(e.target.value) }), search && (jsx(CwButton, { onClick: () => setSearch(""), type: "button", icon: "close", variant: "icon", color: "neutral" }))] }), jsx("div", { className: styles$8["tree-wrapper"], children: filteredData.length > 0 ? (filteredData.map((node) => renderNode(node))) : (jsxs("div", { className: styles$8["empty-state"], children: [jsx(CwIcon, { iconId: "comment" }), search ? "No results found" : "There are no items"] })) })] }));
|
|
4976
5037
|
}
|
|
4977
5038
|
|
|
4978
5039
|
/**
|
|
@@ -5330,7 +5391,7 @@ const CwSearchAsync = ({ onSearch, onChange, value, onResolveInitial, onResolveS
|
|
|
5330
5391
|
}, "data-direction": direction, children: [jsxs(CwAlign, { ...alignProps, itemProp: required ? "required" : "", children: [labelProps && (jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsxs("div", { className: "cw-search-input-wrapper", ref: wrapperRef, children: [jsx("input", { ref: inputRef, type: "text", value: inputValue, onChange: handleInputChange, onKeyDown: handleKeyDown, onFocus: handleInputFocus, placeholder: isInitialLoading ? "Loading…" : placeholder, disabled: disabled, required: required, autoComplete: "off", role: "combobox", "aria-haspopup": "listbox", "aria-expanded": showDropdown, "aria-controls": listboxId, "aria-activedescendant": highlightedIndex >= 0 ? optionId(highlightedIndex) : undefined, title: tooltipText }), (isLoading || isInitialLoading) && (jsx("div", { className: "cw-search-input-loading", children: jsx(CwIcon, { iconId: "spinner" }) })), jsx("div", { className: "cw-search-input-icons", children: inputValue && !disabled && !isInitialLoading ? (jsx(CwButton, { type: "button", onClick: handleClear, "aria-label": "Clear selection", variant: "icon", icon: "close", color: "neutral" })) : (icon ? jsx(CwIcon, { ...icon }) : jsx(CwIcon, { iconId: "search" })) })] })] }), renderPanel(jsx("div", { ref: panelRef, id: listboxId, className: dropdownStyles.dropdown, style: panelStyle, role: "listbox", children: jsx("ul", { children: options.map((option, index) => (jsx("li", { id: optionId(index), className: `${dropdownStyles.option}${index === highlightedIndex ? ` ${dropdownStyles.optionFocused}` : ""}`, onClick: () => handleOptionSelect(option.id), onMouseDown: (e) => e.preventDefault(), onMouseEnter: () => setHighlightedIndex(index), role: "option", "aria-selected": index === highlightedIndex, children: option.subLabel ? (jsxs("span", { className: "cw-search-async-option-lines", children: [jsx("span", { children: option.label }), jsx("span", { className: "cw-search-async-option-sub", children: option.subLabel })] })) : (option.label) }, option.id))) }) }))] }));
|
|
5331
5392
|
};
|
|
5332
5393
|
|
|
5333
|
-
var styles$
|
|
5394
|
+
var styles$7 = {"menu":"cw-context-menu-module__menu__tXmun","item":"cw-context-menu-module__item__-ko8L","arrow":"cw-context-menu-module__arrow__LHZmQ"};
|
|
5334
5395
|
|
|
5335
5396
|
const ARROW_SIZE = 8;
|
|
5336
5397
|
const SAFETY_MARGIN = 8;
|
|
@@ -5471,14 +5532,14 @@ const CwAnchoredMenu = ({ children, options, onSelect, placement = 'bottom', ope
|
|
|
5471
5532
|
document.removeEventListener("keydown", handleEscape);
|
|
5472
5533
|
};
|
|
5473
5534
|
}, [isOpen]);
|
|
5474
|
-
return (jsxs(Fragment, { children: [jsx("div", { ref: triggerRef, onContextMenu: handleContextMenu, style: { display: "contents" }, children: children }), isOpen && normalizedOptions.length > 0 && createPortal(jsxs("div", { ref: menuRef, className: styles$
|
|
5535
|
+
return (jsxs(Fragment, { children: [jsx("div", { ref: triggerRef, onContextMenu: handleContextMenu, style: { display: "contents" }, children: children }), isOpen && normalizedOptions.length > 0 && createPortal(jsxs("div", { ref: menuRef, className: styles$7["menu"], style: {
|
|
5475
5536
|
top: `${position.y}px`,
|
|
5476
5537
|
left: `${position.x}px`,
|
|
5477
|
-
}, "data-has-arrow": "true", children: [jsx("div", { ref: arrowRef, className: styles$
|
|
5538
|
+
}, "data-has-arrow": "true", children: [jsx("div", { ref: arrowRef, className: styles$7["arrow"], "data-placement": placement }), normalizedOptions.map(option => (jsxs("div", { onClick: (e) => {
|
|
5478
5539
|
e.stopPropagation();
|
|
5479
5540
|
e.preventDefault();
|
|
5480
5541
|
handleOptionClick(option);
|
|
5481
|
-
}, className: `${styles$
|
|
5542
|
+
}, className: `${styles$7["item"]} ${option.disabled ? styles$7["disabled"] : ""}`, "data-disabled": option.disabled, children: [option.icon && jsx("span", { className: styles$7["icon"], children: option.icon }), option.label] }, option.key)))] }), document.body)] }));
|
|
5482
5543
|
};
|
|
5483
5544
|
|
|
5484
5545
|
/**
|
|
@@ -5551,12 +5612,143 @@ const CwContextMenu = ({ children, options, offset = DEFAULT_OFFSET, onSelect })
|
|
|
5551
5612
|
document.removeEventListener("keydown", handleEscape);
|
|
5552
5613
|
};
|
|
5553
5614
|
}, [isOpen]);
|
|
5554
|
-
return (jsxs(Fragment, { children: [jsx("div", { onContextMenu: handleContextMenu, children: children }), isOpen && createPortal(jsx("div", { ref: menuRef, className: styles$
|
|
5615
|
+
return (jsxs(Fragment, { children: [jsx("div", { onContextMenu: handleContextMenu, children: children }), isOpen && createPortal(jsx("div", { ref: menuRef, className: styles$7["menu"], style: {
|
|
5555
5616
|
top: `${position.y}px`,
|
|
5556
5617
|
left: `${position.x}px`,
|
|
5557
|
-
}, children: options.map(option => (jsx("div", { onClick: () => handleOptionClick(option), className: styles$
|
|
5618
|
+
}, children: options.map(option => (jsx("div", { onClick: () => handleOptionClick(option), className: styles$7["item"], children: option }, option))) }), document.body)] }));
|
|
5558
5619
|
};
|
|
5559
5620
|
|
|
5621
|
+
var styles$6 = {"split":"cw-button-split-module__split__B2KbU","menu":"cw-button-split-module__menu__mKDlt","item":"cw-button-split-module__item__Aqw6f"};
|
|
5622
|
+
|
|
5623
|
+
/**
|
|
5624
|
+
* CwButtonSplit - A primary action joined to a dropdown of alternative actions.
|
|
5625
|
+
*
|
|
5626
|
+
* Composes a main {@link CwButton} with a {@link CwPopoverButton} chevron whose
|
|
5627
|
+
* panel holds a vertical menu of alternatives (rendered as `variant="ghost"` rows).
|
|
5628
|
+
* Both parts share variant, color and size and read as one joined control.
|
|
5629
|
+
*
|
|
5630
|
+
* @example
|
|
5631
|
+
* <CwButtonSplit
|
|
5632
|
+
* text="Save"
|
|
5633
|
+
* icon="save"
|
|
5634
|
+
* onClick={handleSave}
|
|
5635
|
+
* actions={[
|
|
5636
|
+
* { key: "saveAs", label: "Save as…", icon: "copy" },
|
|
5637
|
+
* { key: "saveAndClose", label: "Save and close" },
|
|
5638
|
+
* ]}
|
|
5639
|
+
* onSelect={handleSelect}
|
|
5640
|
+
* />
|
|
5641
|
+
*/
|
|
5642
|
+
function CwButtonSplit({ text, icon, onClick, actions, onSelect, variant = "solid", color = "primary", size = "medium", disabled = false, placement = "bottom-end", "data-testid": dataTestId, }) {
|
|
5643
|
+
const handleSelect = (action) => (event) => {
|
|
5644
|
+
onSelect(action.key);
|
|
5645
|
+
event.currentTarget.closest("[popover]")?.hidePopover();
|
|
5646
|
+
};
|
|
5647
|
+
return (jsxs("div", { className: styles$6.split, "data-variant": variant, "data-testid": dataTestId, children: [jsx(CwButton, { text: text, icon: icon, variant: variant, color: color, size: size, onClick: onClick, disabled: disabled }), jsx(CwPopoverButton, { icon: "chevron-down", title: "More actions", variant: variant, color: color, size: size, disabled: disabled, placement: placement, children: jsx("div", { className: styles$6.menu, children: actions.map((action) => (jsx(CwButton, { variant: "ghost", color: "neutral", text: action.label, icon: action.icon, disabled: action.disabled, className: styles$6.item, onClick: handleSelect(action) }, action.key))) }) })] }));
|
|
5648
|
+
}
|
|
5649
|
+
|
|
5650
|
+
/**
|
|
5651
|
+
* Roving-tabindex single-select behaviour for a custom radio group (e.g. a segmented
|
|
5652
|
+
* button strip that has no native grouping). The active segment is the selected one,
|
|
5653
|
+
* or the first enabled option when nothing is selected. Arrow keys (Right/Down = next,
|
|
5654
|
+
* Left/Up = previous) move focus and select, wrapping around and skipping disabled
|
|
5655
|
+
* options; Space/Enter selects the focused segment.
|
|
5656
|
+
*
|
|
5657
|
+
* Native form controls (e.g. `<input type="radio">` sharing a name) already get this
|
|
5658
|
+
* behaviour from the browser — use this hook only for non-native custom groups.
|
|
5659
|
+
*/
|
|
5660
|
+
function useRovingSingleSelect(options, value, onChange) {
|
|
5661
|
+
const elementRefs = useRef([]);
|
|
5662
|
+
const selectedIndex = options.findIndex((option) => option.value === value);
|
|
5663
|
+
const firstEnabledIndex = options.findIndex((option) => !option.disabled);
|
|
5664
|
+
// If the selected option is disabled it cannot hold the tab stop (disabled elements are out of
|
|
5665
|
+
// the tab order), so fall back to the first enabled option to keep the group reachable by Tab.
|
|
5666
|
+
const activeIndex = selectedIndex >= 0 && !options[selectedIndex]?.disabled ? selectedIndex : firstEnabledIndex;
|
|
5667
|
+
const focusAndSelect = useCallback((index) => {
|
|
5668
|
+
const option = options[index];
|
|
5669
|
+
if (!option || option.disabled)
|
|
5670
|
+
return;
|
|
5671
|
+
onChange(option.value);
|
|
5672
|
+
elementRefs.current[index]?.focus();
|
|
5673
|
+
}, [options, onChange]);
|
|
5674
|
+
const moveFocus = useCallback((fromIndex, direction) => {
|
|
5675
|
+
const count = options.length;
|
|
5676
|
+
if (count === 0)
|
|
5677
|
+
return;
|
|
5678
|
+
let nextIndex = fromIndex;
|
|
5679
|
+
for (let step = 0; step < count; step++) {
|
|
5680
|
+
nextIndex = (nextIndex + direction + count) % count;
|
|
5681
|
+
if (!options[nextIndex]?.disabled) {
|
|
5682
|
+
focusAndSelect(nextIndex);
|
|
5683
|
+
return;
|
|
5684
|
+
}
|
|
5685
|
+
}
|
|
5686
|
+
}, [options, focusAndSelect]);
|
|
5687
|
+
const getSegmentProps = useCallback((index) => ({
|
|
5688
|
+
tabIndex: index === activeIndex ? 0 : -1,
|
|
5689
|
+
ref: (element) => {
|
|
5690
|
+
elementRefs.current[index] = element;
|
|
5691
|
+
},
|
|
5692
|
+
onKeyDown: (event) => {
|
|
5693
|
+
switch (event.key) {
|
|
5694
|
+
case "ArrowRight":
|
|
5695
|
+
case "ArrowDown":
|
|
5696
|
+
event.preventDefault();
|
|
5697
|
+
moveFocus(index, 1);
|
|
5698
|
+
break;
|
|
5699
|
+
case "ArrowLeft":
|
|
5700
|
+
case "ArrowUp":
|
|
5701
|
+
event.preventDefault();
|
|
5702
|
+
moveFocus(index, -1);
|
|
5703
|
+
break;
|
|
5704
|
+
case " ":
|
|
5705
|
+
case "Enter":
|
|
5706
|
+
event.preventDefault();
|
|
5707
|
+
focusAndSelect(index);
|
|
5708
|
+
break;
|
|
5709
|
+
}
|
|
5710
|
+
},
|
|
5711
|
+
}), [activeIndex, moveFocus, focusAndSelect]);
|
|
5712
|
+
return { activeIndex, getSegmentProps };
|
|
5713
|
+
}
|
|
5714
|
+
|
|
5715
|
+
var styles$5 = {"switch":"cw-button-switch-module__switch__vdWV-","segment":"cw-button-switch-module__segment__JmVla","iconOnly":"cw-button-switch-module__iconOnly__-kCwj"};
|
|
5716
|
+
|
|
5717
|
+
/**
|
|
5718
|
+
* CwButtonSwitch - Segmented single-select control: a strip of joined CwButtons.
|
|
5719
|
+
*
|
|
5720
|
+
* The selected segment renders `solid`, the others `outline`, both sharing the `color`
|
|
5721
|
+
* theme (`primary` default, `danger`, or `neutral`). It is a proper ARIA radiogroup with
|
|
5722
|
+
* roving tabindex (one tab stop) and arrow-key navigation, provided by
|
|
5723
|
+
* {@link useRovingSingleSelect}. Use for 2–3 mutually-exclusive options that benefit from
|
|
5724
|
+
* being shown side by side; for a longer list use CwRadioGroup.
|
|
5725
|
+
*
|
|
5726
|
+
* `direction="column"` renders the strip vertically (stacked, full-width segments) instead of
|
|
5727
|
+
* the default horizontal `row`; arrow-key navigation handles both orientations.
|
|
5728
|
+
*
|
|
5729
|
+
* Set `iconOnly` to render just each option's icon; the option's `label` is still required
|
|
5730
|
+
* and is passed as the segment title, so it becomes the tooltip and the accessible name.
|
|
5731
|
+
*
|
|
5732
|
+
* It is an inline control with no form label — if a caption is needed, place it next to the
|
|
5733
|
+
* control at the call site, and pass `aria-label` (or `aria-labelledby`) to name the radiogroup
|
|
5734
|
+
* for screen readers.
|
|
5735
|
+
*
|
|
5736
|
+
* @example
|
|
5737
|
+
* <CwButtonSwitch
|
|
5738
|
+
* options={[{ value: "list", label: "List", icon: "list" }, { value: "grid", label: "Grid", icon: "grid" }]}
|
|
5739
|
+
* value={view}
|
|
5740
|
+
* onChange={setView}
|
|
5741
|
+
* />
|
|
5742
|
+
*/
|
|
5743
|
+
function CwButtonSwitch({ options, value, onChange, size = "medium", color = "primary", iconOnly = false, direction = "row", disabled = false, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "data-testid": dataTestId, }) {
|
|
5744
|
+
const { getSegmentProps } = useRovingSingleSelect(options, value, onChange);
|
|
5745
|
+
return (jsx("div", { className: `cw-button-switch ${styles$5.switch}`, role: "radiogroup", "aria-labelledby": ariaLabelledby, "aria-label": ariaLabelledby ? undefined : ariaLabel, "data-direction": direction, "data-testid": dataTestId, children: options.map((option, index) => {
|
|
5746
|
+
const selected = option.value === value;
|
|
5747
|
+
const segmentProps = getSegmentProps(index);
|
|
5748
|
+
return (jsx(CwButton, { text: iconOnly ? undefined : option.label, title: iconOnly ? option.label : undefined, icon: option.icon, size: size, color: color, variant: selected ? "solid" : "outline", role: "radio", "aria-checked": selected, disabled: disabled || option.disabled, onClick: () => onChange(option.value), className: `${styles$5.segment}${iconOnly ? ` ${styles$5.iconOnly}` : ""}`, tabIndex: segmentProps.tabIndex, ref: segmentProps.ref, onKeyDown: segmentProps.onKeyDown }, option.value));
|
|
5749
|
+
}) }));
|
|
5750
|
+
}
|
|
5751
|
+
|
|
5560
5752
|
/**
|
|
5561
5753
|
* Save button wrapper (6 uses pending delete)
|
|
5562
5754
|
* @deprecated Use <CwButton variant="icon" icon="save" onClick={...} /> instead
|
|
@@ -11100,4 +11292,4 @@ const CwFindCrewmember = ({ handleChange, placeHolder = "Search crew…", requir
|
|
|
11100
11292
|
}, "data-direction": direction, children: [jsxs(CwAlign, { ...alignProps, itemProp: required ? "required" : "", children: [labelProps && (jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsxs("div", { className: "cw-search-input-wrapper", ref: wrapperRef, children: [jsx("input", { ref: inputRef, type: "text", value: inputValue, onChange: handleInputChange, onKeyDown: handleKeyDown, onFocus: handleInputFocus, placeholder: isInitialLoading ? "Loading…" : placeHolder, disabled: disabled, required: required, autoComplete: "off", "aria-expanded": showDropdown, "aria-haspopup": "listbox", role: "combobox", title: tooltipText }), (isLoading || isInitialLoading) && (jsx("div", { className: "cw-search-input-loading", children: jsx(CwIcon, { iconId: "spinner" }) })), jsx("div", { className: "cw-search-input-icons", children: inputValue && !disabled && !isInitialLoading ? (jsx(CwButton, { type: "button", onClick: handleClear, "aria-label": "Clear selected crewmember", variant: "icon", icon: "close", color: "neutral" })) : (jsx(CwIcon, { iconId: "person" })) })] })] }), renderPanel(jsx("div", { ref: panelRef, className: dropdownStyles.dropdown, style: panelStyle, role: "listbox", children: jsx("ul", { children: options.map((option, index) => (jsx("li", { className: `${dropdownStyles.option}${index === highlightedIndex ? ` ${dropdownStyles.optionFocused}` : ""}`, onClick: () => handleOptionSelect(option.value), onMouseDown: (e) => e.preventDefault(), onMouseEnter: () => setHighlightedIndex(index), role: "option", "aria-selected": index === highlightedIndex, children: option.text }, option.value))) }) }))] }));
|
|
11101
11293
|
};
|
|
11102
11294
|
|
|
11103
|
-
export { CblDragAndDrop, CwAccordionContainer, CwAlign, CwAnchoredMenu, CwBtnApprove, CwBtnCancel, CwBtnDelete, CwBtnEdit, CwBtnSave, CwButton, CwCard, CwCardList, CwCheck, CwCheckbox, CwCheckboxGroup, CwChip, CwColorPicker, CwConfirmationPopup, CwContextMenu, CwDatePicker, CwDatePickerTemporal, CwDateRangePicker, CwDateRangePickerTemporal, CwDateTimePicker, CwDateTimePickerCompact, CwDateTimePickerTemporal, CwDialog, CwDigit, CwDisplayMessage, CwDropdown, CwDropdownFilter, CwExpandable, CwFileUpload, CwFileUploadMultiple, CwFindAirport, CwFindCrewmember, CwGenericTooltip, CwHeadingMain, CwHeadingSecond, CwIcon, CwImageArea, CwImageGallery, CwImageZoom, CwInput, CwInputColor, CwInputDateText, CwInputDatetime, CwInputImage, CwInputNumber, CwInputPhone, CwInputText, CwKeyValueList, CwLabel, CwLoading, CwLoadingSmall, CwMasterDetail, CwMessage, CwMessageManager, CwMessageType, CwModal, CwModalHover, CwModalReportFunctional, CwMultiFilter, CwMultiFilterTag, CwNote, CwOption, CwPopoverButton, CwReportModal, CwScheduler, CwSearchAsync, CwSearchInput, CwSelect, CwSelectList, CwSelectListItems, CwSortableList, CwSortableTable, CwSuperScheduler, CwTable, CwTableGrouped, CwTableServerSide, CwTabs, CwTagSelector, CwTextArea, CwTime, CwTimePicker, CwToggle, CwTooltipManager, CwTooltipNew, CwTreeView, CwWeekdaySelector, DefaultRowHeader, OnClearPinned, OnClickContextMenu, OnClickEvent, OnClickRowEvent, OnClickRowHeader, OnClickUtc, OnDoubleClickEvent, OnDoubleClickRowEvent, OnDragEvent, OnDropCtrlEvent, OnDropEvent, OnEndClickHeaderEvent, OnLeftDragStart, OnMultiClickEvent, OnPinRow, OnRangeClickEvent, OnRightClickEvent, OnRightClickRow, OnRightDragStart, OnStartClickHeaderEvent, OnUnpinRow, PRESET_LIBRARY_TEMPORAL, PinRowHeader, Resource, Scheduler, SchedulerEvent, SuperScheduler, TooltipConstraintContext, UiEvent, Weekdays, cblEvent, eventIsVisible, filterVisibleEvents, getDefaultDivisions, getEventSizes, getPresetsByKeysTemporal, itemsToMultiFilterTags, useCwMessage, useSortableList, useSortableTable, useTooltipConstraint };
|
|
11295
|
+
export { CblDragAndDrop, CwAccordionContainer, CwAlign, CwAnchoredMenu, CwBtnApprove, CwBtnCancel, CwBtnDelete, CwBtnEdit, CwBtnSave, CwButton, CwButtonSplit, CwButtonSwitch, CwCard, CwCardList, CwCheck, CwCheckbox, CwCheckboxGroup, CwChip, CwColorPicker, CwConfirmationPopup, CwContextMenu, CwDatePicker, CwDatePickerTemporal, CwDateRangePicker, CwDateRangePickerTemporal, CwDateTimePicker, CwDateTimePickerCompact, CwDateTimePickerTemporal, CwDialog, CwDigit, CwDisplayMessage, CwDropdown, CwDropdownFilter, CwExpandable, CwFileUpload, CwFileUploadMultiple, CwFindAirport, CwFindCrewmember, CwGenericTooltip, CwHeadingMain, CwHeadingSecond, CwIcon, CwImageArea, CwImageGallery, CwImageZoom, CwInput, CwInputColor, CwInputDateText, CwInputDatetime, CwInputImage, CwInputNumber, CwInputPhone, CwInputText, CwKeyValueList, CwLabel, CwLoading, CwLoadingSmall, CwMasterDetail, CwMessage, CwMessageManager, CwMessageType, CwModal, CwModalHover, CwModalReportFunctional, CwMultiFilter, CwMultiFilterTag, CwNote, CwOption, CwPopoverButton, CwRadioGroup, CwReportModal, CwScheduler, CwSearchAsync, CwSearchInput, CwSelect, CwSelectList, CwSelectListItems, CwSortableList, CwSortableTable, CwSuperScheduler, CwTable, CwTableGrouped, CwTableServerSide, CwTabs, CwTagSelector, CwTextArea, CwTime, CwTimePicker, CwToggle, CwTooltipManager, CwTooltipNew, CwTreeView, CwWeekdaySelector, DefaultRowHeader, OnClearPinned, OnClickContextMenu, OnClickEvent, OnClickRowEvent, OnClickRowHeader, OnClickUtc, OnDoubleClickEvent, OnDoubleClickRowEvent, OnDragEvent, OnDropCtrlEvent, OnDropEvent, OnEndClickHeaderEvent, OnLeftDragStart, OnMultiClickEvent, OnPinRow, OnRangeClickEvent, OnRightClickEvent, OnRightClickRow, OnRightDragStart, OnStartClickHeaderEvent, OnUnpinRow, PRESET_LIBRARY_TEMPORAL, PinRowHeader, Resource, Scheduler, SchedulerEvent, SuperScheduler, TooltipConstraintContext, UiEvent, Weekdays, cblEvent, eventIsVisible, filterVisibleEvents, getDefaultDivisions, getEventSizes, getPresetsByKeysTemporal, itemsToMultiFilterTags, useCwMessage, useSortableList, useSortableTable, useTooltipConstraint };
|