dry-ux 1.88.0 → 1.89.0

package/dist/styles/modal.css

@@ -72,6 +72,35 @@
     cursor: move;
 }
 
+.dry-ux-modal .modal-header .dry-ux-modal-header-right {
+    float: right;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    margin-top: -2px;
+}
+
+.dry-ux-modal .modal-header .dry-ux-modal-header-right .close {
+    float: none;
+    margin-top: 0;
+}
+
+.dry-ux-modal .modal-header .dry-ux-modal-header-action {
+    background: none;
+    border: none;
+    padding: 0 3px;
+    cursor: pointer;
+    line-height: 1;
+    color: inherit;
+    opacity: 0.4;
+    display: flex;
+    align-items: center;
+}
+
+.dry-ux-modal .modal-header .dry-ux-modal-header-action:hover {
+    opacity: 1;
+}
+
 .dry-ux-modal-backdrop {
     position: fixed!important;
     top: 0!important;

package/dist/ui-utils/Modal.js

@@ -12,7 +12,7 @@ const useDraggable_1 = require("./useDraggable");
  * @param {ModalProps} props - The props for the Modal component.
  * @returns {JSX.Element} The Modal component.
  */
-const Modal = ({ id, instance: { handleClose, toggleOverlay, shown, overlay, key: instanceKey, options: { content, footerContent, cssClass = "", closeBtn, title, width, onClose, titleCloseBtn = true, centered, trackingId, draggable, actions = [], }, }, config: { defaultModalStyles = false, styles = {}, centered: globalCentered, draggable: globalDraggable, onOpen, onClose: globalOnClose, }, providerId, debug, }) => {
+const Modal = ({ id, instance: { handleClose, toggleOverlay, shown, overlay, key: instanceKey, options: { content, footerContent, cssClass = "", closeBtn, title, width, onClose, titleCloseBtn = true, centered, trackingId, draggable, actions = [], headerActions = [], }, }, config: { defaultModalStyles = false, styles = {}, centered: globalCentered, draggable: globalDraggable, onOpen, onClose: globalOnClose, }, providerId, debug, }) => {
     const isCentered = centered !== null && centered !== void 0 ? centered : globalCentered;
     const isDraggable = !!(draggable !== null && draggable !== void 0 ? draggable : globalDraggable) && !!title;
     const draggableClass = isDraggable ? `dry-ux-draggable-${id}` : "";
@@ -78,8 +78,15 @@ const Modal = ({ id, instance: { handleClose, toggleOverlay, shown, overlay, key
     return (React.createElement(react_bootstrap_1.Modal, { onHide: onHide, show: shown, animation: true, autoFocus: true, keyboard: false, className: modalCssClass, backdropClassName: "dry-ux-modal-backdrop", backdrop: "static" },
         overlay && (React.createElement("div", { className: "dry-ux-overlay" },
             React.createElement("div", { className: "dry-ux-overlay-content" }, overlay))),
-        !!title && (React.createElement(react_bootstrap_1.Modal.Header, { closeButton: titleCloseBtn, onHide: onHide },
-            React.createElement(react_bootstrap_1.Modal.Title, null, title))),
+        (!!title || !!(headerActions === null || headerActions === void 0 ? void 0 : headerActions.length)) && (React.createElement(react_bootstrap_1.Modal.Header, { closeButton: !(headerActions === null || headerActions === void 0 ? void 0 : headerActions.length) && titleCloseBtn, onHide: onHide },
+            !!(headerActions === null || headerActions === void 0 ? void 0 : headerActions.length) && (React.createElement("div", { className: "dry-ux-modal-header-right" },
+                headerActions.map(({ content: actionContent, onClick, title: actionTitle, className = "" }, index) => (React.createElement("button", { key: index, className: (0, classSet_1.classSet)({
+                        "dry-ux-modal-header-action": true,
+                        [className]: !!className,
+                    }), onClick: onClick, title: actionTitle, type: "button" }, actionContent))),
+                titleCloseBtn && (React.createElement("button", { type: "button", className: "close", onClick: onHide },
+                    React.createElement("span", { "aria-hidden": "true" }, "\u00D7"))))),
+            !!title && React.createElement(react_bootstrap_1.Modal.Title, null, title))),
         React.createElement(react_bootstrap_1.Modal.Body, null, contentToRender),
         showFooter && (React.createElement(react_bootstrap_1.Modal.Footer, null,
             footerContent,

package/dist/ui-utils/UIUtil.interface.d.ts

@@ -91,6 +91,27 @@ export type PopUpInstance = {
      */
     toggleOverlay: (id: string, content?: Content) => void;
 };
+/**
+ * Represents an action displayed in the modal header (next to the close button).
+ */
+export type PopUpHeaderAction = {
+    /**
+     * The content to display in the header action button.
+     */
+    content: Content;
+    /**
+     * Function to call when the header action is clicked.
+     */
+    onClick?: () => void;
+    /**
+     * Tooltip text for the header action button.
+     */
+    title?: string;
+    /**
+     * Additional CSS class for the header action button.
+     */
+    className?: string;
+};
 /**
  * Represents an action for a PopUp.
  */
@@ -172,6 +193,10 @@ export type PopUpOptions = {
      * If true, the modal will be shown.
      */
     actions?: PopUpAction[];
+    /**
+     * Actions rendered in the modal header, next to the close button.
+     */
+    headerActions?: PopUpHeaderAction[];
 };
 /**
  * Represents a utility for managing UI modals.

package/dist/ui-utils/ViewportDetect.js

@@ -77,18 +77,18 @@ const breakpoints = [
  * @returns {null} This component renders nothing.
  */
 exports.ViewportDetect = React.memo(({ onChange }) => {
+    const onChangeRef = React.useRef(onChange);
+    onChangeRef.current = onChange;
     React.useEffect(() => {
         const listeners = [];
         breakpoints.forEach(({ viewport, query }) => {
             const mql = window.matchMedia(query);
             const handler = (e) => {
                 if (e.matches) {
-                    onChange(new CurrentViewport(viewport));
+                    onChangeRef.current(new CurrentViewport(viewport));
                 }
             };
-            // Check initial state
             handler(mql);
-            // Listen for changes
             mql.addEventListener("change", handler);
             listeners.push({ mql, handler });
         });
@@ -97,6 +97,6 @@ exports.ViewportDetect = React.memo(({ onChange }) => {
                 mql.removeEventListener("change", handler);
             });
         };
-    }, [onChange]);
+    }, []);
     return null;
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dry-ux",
-  "version": "1.88.0",
+  "version": "1.89.0",
   "description": "",
   "main": "dist/index",
   "scripts": {