@indico-data/design-system 2.60.15 → 3.0.0

package/lib/index.js

@@ -19224,7 +19224,7 @@ function Menu(_a) {
 }
 
 const Pill = (_a) => {
-    var { children, className, color = 'info', size = 'sm' } = _a, rest = __rest(_a, ["children", "className", "color", "size"]);
+    var { children, className, color = 'neutral', size = 'sm' } = _a, rest = __rest(_a, ["children", "className", "color", "size"]);
     const pillClasses = classNames('pill', className, {
         [`pill--${color}`]: color,
         [`pill--${size}`]: size,
@@ -21061,10 +21061,25 @@ var ReactModal = /*@__PURE__*/getDefaultExportFromCjs(libExports);
 const Modal = (_a) => {
     var { className = '', children, isOpen, onRequestClose, portalClassName, overlayClassName, appElement = document.getElementById('theme-root') ||
         document.getElementById('root') ||
-        document.body, shouldCloseOnOverlayClick, shouldCloseOnEsc, testId, contentElement, overlayElement, position = 'center', parentSelector } = _a, rest = __rest(_a, ["className", "children", "isOpen", "onRequestClose", "portalClassName", "overlayClassName", "appElement", "shouldCloseOnOverlayClick", "shouldCloseOnEsc", "testId", "contentElement", "overlayElement", "position", "parentSelector"]);
+        document.body, shouldCloseOnOverlayClick, shouldCloseOnEsc, testId, contentElement, overlayElement, position = 'center', parentSelector = () => document.getElementById('theme-root') || document.getElementById('root'), // default for our apps, storybook needs a different one
+    title, subtitle, footer, maxWidthInPixels } = _a, rest = __rest(_a, ["className", "children", "isOpen", "onRequestClose", "portalClassName", "overlayClassName", "appElement", "shouldCloseOnOverlayClick", "shouldCloseOnEsc", "testId", "contentElement", "overlayElement", "position", "parentSelector", "title", "subtitle", "footer", "maxWidthInPixels"]);
     const modalClasses = classNames('modal', `modal--${position}`, className);
     const overlayClasses = classNames('modal-overlay', overlayClassName);
-    return (jsxRuntime.jsx(ReactModal, Object.assign({ style: {}, className: modalClasses, overlayClassName: overlayClasses, testId: testId, isOpen: isOpen, onRequestClose: onRequestClose, portalClassName: portalClassName, appElement: appElement, parentSelector: parentSelector, shouldCloseOnOverlayClick: shouldCloseOnOverlayClick, shouldCloseOnEsc: shouldCloseOnEsc, contentElement: contentElement, overlayElement: overlayElement }, rest, { children: jsxRuntime.jsxs("div", { className: "modal-content", children: [jsxRuntime.jsx(Button$1, { className: "modal-close-button", onClick: onRequestClose, variant: "link", size: "md", iconLeft: "x-close", ariaLabel: "Close" }), jsxRuntime.jsx("div", { className: "modal-body", children: children })] }) })));
+    const hasHeader = title || subtitle;
+    return (jsxRuntime.jsx(ReactModal, Object.assign({ className: modalClasses, overlayClassName: overlayClasses, testId: testId, isOpen: isOpen, onRequestClose: onRequestClose, portalClassName: portalClassName, appElement: appElement, parentSelector: parentSelector, shouldCloseOnOverlayClick: shouldCloseOnOverlayClick, shouldCloseOnEsc: shouldCloseOnEsc, contentElement: contentElement, overlayElement: overlayElement }, rest, { children: jsxRuntime.jsxs("div", { className: "modal-content", style: { maxWidth: `${maxWidthInPixels}px` }, children: [jsxRuntime.jsx(Button$1, { className: "modal-close-button", onClick: onRequestClose, variant: "link", size: "md", iconLeft: "x-close", ariaLabel: "Close" }), hasHeader && (jsxRuntime.jsx("div", { className: "modal-header", children: jsxRuntime.jsx(Row, { justify: "between", align: "center", children: jsxRuntime.jsxs(Col, { children: [title && jsxRuntime.jsx("h2", { className: "modal-title", children: title }), subtitle && jsxRuntime.jsx("p", { className: "modal-subtitle", children: subtitle })] }) }) })), jsxRuntime.jsx("div", { className: "modal-body", children: children }), footer && jsxRuntime.jsx("div", { className: "modal-footer", children: footer })] }) })));
+};
+
+const defaultFooter = ({ onCancelRequest, onConfirmRequest, confirmationButtonText, confirmationButtonVariant, cancelButtonText, }) => (jsxRuntime.jsxs(Row, { gutterWidth: 12, justify: "end", align: "center", children: [jsxRuntime.jsx(Col, { xs: "content", children: jsxRuntime.jsx(Button$1, { onClick: onCancelRequest, ariaLabel: cancelButtonText || 'Cancel', variant: "outline", children: cancelButtonText }) }), jsxRuntime.jsx(Col, { xs: "content", children: jsxRuntime.jsx(Button$1, { onClick: onConfirmRequest, ariaLabel: confirmationButtonText || 'Confirm', variant: confirmationButtonVariant, children: confirmationButtonText }) })] }));
+const ConfirmationModal = ({ className, overlayClassName, testId, isOpen, onRequestClose, portalClassName, appElement, parentSelector, shouldCloseOnOverlayClick, shouldCloseOnEsc, contentElement, overlayElement, footer, children, onConfirmRequest, onCancelRequest, confirmationButtonText = 'Confirm', cancelButtonText = 'Cancel', confirmationButtonVariant = 'solid', icon, title, status = 'info', maxWidthInPixels, }) => {
+    const modalFooter = footer ||
+        defaultFooter({
+            onCancelRequest,
+            onConfirmRequest,
+            confirmationButtonText,
+            cancelButtonText,
+            confirmationButtonVariant,
+        });
+    return (jsxRuntime.jsxs(Modal, { className: classNames('confirmation-modal', className), overlayClassName: overlayClassName, testId: testId, isOpen: isOpen, onRequestClose: onRequestClose, portalClassName: portalClassName, appElement: appElement, parentSelector: parentSelector, shouldCloseOnOverlayClick: shouldCloseOnOverlayClick, shouldCloseOnEsc: shouldCloseOnEsc, contentElement: contentElement, overlayElement: overlayElement, footer: modalFooter, maxWidthInPixels: maxWidthInPixels, children: [icon && (jsxRuntime.jsx(Icon, { name: icon, className: classNames('confirmation-modal-icon', `color-${status}`), size: "xl" })), title && jsxRuntime.jsx("h2", { className: "confirmation-modal-title", children: title }), children] }));
 };
 
 /**
@@ -43041,7 +43056,11 @@ const h="react-tooltip-core-styles",w="react-tooltip-base-styles",b={core:!1,bas
 
 const Tooltip = (_a) => {
     var { id, clickToShow, delayShow, delayHide, children, zIndex = 1000, place = 'top' } = _a, rest = __rest(_a, ["id", "clickToShow", "delayShow", "delayHide", "children", "zIndex", "place"]);
-    return (jsxRuntime.jsx(M, Object.assign({ border: "solid 1px var(--pf-border-color)", id: id, place: place, openOnClick: clickToShow, delayShow: delayShow, delayHide: delayHide, style: { zIndex } }, rest, { children: children })));
+    return (jsxRuntime.jsx(M, Object.assign({ border: "solid var(--pf-border-thin)var(--pf-border-color)", style: {
+            backgroundColor: 'var(--pf-tooltip-background-color)',
+            color: 'var(--pf-tooltip-font-color)',
+            zIndex,
+        }, id: id, place: place, openOnClick: clickToShow, delayShow: delayShow, delayHide: delayHide }, rest, { children: children })));
 };
 
 function BarSpinner(_a) {
@@ -43199,7 +43218,7 @@ const Truncate = (_a) => {
     const truncateStyle = {
         '--line-clamp': lineClamp,
     };
-    return (jsxRuntime.jsxs("div", { className: "truncate-wrapper", style: truncateStyle, children: [jsxRuntime.jsx("span", Object.assign({ "data-testid": `truncate-${id}-${isTruncated ? 'truncated' : 'not-truncated'}`, "data-tooltip-id": id, "data-tooltip-content": isTruncated ? truncateString : undefined, className: lineClamp > 0 ? 'truncate-clip' : 'truncate' }, rest, { children: truncateString })), isTruncated && truncateString && hasTooltip && (jsxRuntime.jsx(Tooltip, { "data-tooltip-delay-hide": 100, id: id, border: "solid 1px var(--pf-border-color)", children: truncateString }))] }));
+    return (jsxRuntime.jsxs("div", { className: "truncate-wrapper", style: truncateStyle, children: [jsxRuntime.jsx("span", Object.assign({ "data-testid": `truncate-${id}-${isTruncated ? 'truncated' : 'not-truncated'}`, "data-tooltip-id": id, "data-tooltip-content": isTruncated ? truncateString : undefined, className: lineClamp > 0 ? 'truncate-clip' : 'truncate' }, rest, { children: truncateString })), isTruncated && truncateString && hasTooltip && (jsxRuntime.jsx(Tooltip, { "data-tooltip-delay-hide": 0, id: id, children: truncateString }))] }));
 };
 
 function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
@@ -43214,6 +43233,7 @@ exports.Card = Card;
 exports.Checkbox = Checkbox;
 exports.CirclePulse = CirclePulse;
 exports.Col = Col;
+exports.ConfirmationModal = ConfirmationModal;
 exports.Container = Container;
 exports.DatePicker = DatePicker;
 exports.FloatUI = FloatUI;