@panneau/modal-dialog 4.0.39 → 4.0.40-alpha.1

package/dist/index.d.ts

@@ -1,19 +1,24 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode } from 'react';
 import { Label, Button } from '@panneau/core';
+import { ModalProps } from '@panneau/element-modal';
 
-interface ModalDialogProps {
-    id: string | number;
+interface ModalDialogProps extends Omit<ModalProps, 'title'> {
+    id: string;
     title?: Label | null;
     size?: string | null;
     header?: ReactNode | null;
     children?: ReactNode | null;
     footer?: ReactNode | null;
     buttons?: Button[] | null;
-    onClose?: (() => void) | null;
     withCloseOutside?: boolean;
+    withoutClose?: boolean;
     className?: string | null;
+    headerClassName?: string | null;
+    bodyClassName?: string | null;
+    footerClassName?: string | null;
+    buttonsClassName?: string | null;
 }
-declare function ModalDialog({ id, title, size, header, children, buttons, footer, onClose, withCloseOutside, className, }: ModalDialogProps): react_jsx_runtime.JSX.Element;
+declare function ModalDialog({ id, title, size, header, children, buttons, footer, requestClose, withoutClose, withCloseOutside, className, headerClassName, bodyClassName, footerClassName, buttonsClassName, ...props }: ModalDialogProps): react_jsx_runtime.JSX.Element;
 
 export { ModalDialog as default };

package/dist/index.js

@@ -1,4 +1,3 @@
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import classNames from 'classnames';
 import { isMessage } from '@panneau/core/utils';
 import Button from '@panneau/element-button';
@@ -7,67 +6,64 @@ import Label from '@panneau/element-label';
 import Modal from '@panneau/element-modal';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
-var styles = {"container":"panneau-modal-dialog-container","closeOutside":"panneau-modal-dialog-closeOutside","closeOutsideButton":"panneau-modal-dialog-closeOutsideButton"};
-
-function ModalDialog(_ref) {
-  var id = _ref.id,
-    _ref$title = _ref.title,
-    title = _ref$title === void 0 ? null : _ref$title,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? null : _ref$size,
-    _ref$header = _ref.header,
-    header = _ref$header === void 0 ? null : _ref$header,
-    _ref$children = _ref.children,
-    children = _ref$children === void 0 ? null : _ref$children,
-    _ref$buttons = _ref.buttons,
-    buttons = _ref$buttons === void 0 ? null : _ref$buttons,
-    _ref$footer = _ref.footer,
-    footer = _ref$footer === void 0 ? null : _ref$footer,
-    _ref$onClose = _ref.onClose,
-    onClose = _ref$onClose === void 0 ? null : _ref$onClose,
-    _ref$withCloseOutside = _ref.withCloseOutside,
-    withCloseOutside = _ref$withCloseOutside === void 0 ? false : _ref$withCloseOutside,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? null : _ref$className;
-  var onCloseButtonOutside = header === null && title === null && onClose !== null || withCloseOutside && onClose !== null;
+function ModalDialog({
+  id,
+  title = null,
+  size = null,
+  header = null,
+  children = null,
+  buttons = null,
+  footer = null,
+  requestClose = null,
+  withoutClose = false,
+  withCloseOutside = false,
+  className = null,
+  headerClassName = null,
+  bodyClassName = null,
+  footerClassName = null,
+  buttonsClassName = null,
+  ...props
+}) {
+  const onCloseButtonOutside = header === null && title === null || withCloseOutside;
   return /*#__PURE__*/jsx(Modal, {
     id: id,
-    onClose: onClose,
+    requestClose: requestClose,
+    ...props,
     children: /*#__PURE__*/jsx("div", {
-      className: classNames(['modal-dialog', styles.container, _defineProperty(_defineProperty({}, "modal-".concat(size), size !== null), styles.closeOutside, onCloseButtonOutside), className]),
+      className: classNames(['modal-dialog', {
+        [`modal-${size}`]: size !== null
+      }, className]),
       role: "dialog",
       children: /*#__PURE__*/jsxs("div", {
         className: "modal-content",
-        children: [onCloseButtonOutside ? /*#__PURE__*/jsx(Button, {
+        children: [onCloseButtonOutside && !withoutClose ? /*#__PURE__*/jsx(Button, {
           type: "button",
-          className: classNames([styles.closeOutsideButton, 'btn', 'btn-close', 'bg-light',
-          // 'btn-close-white',
-          'btn-secondary', 'p-2']),
+          className: classNames(['btn', 'btn-close', 'bg-light', 'position-absolute', 'start-100', 'ms-1']),
           "aria-label": "Close",
-          onClick: onClose
+          onClick: requestClose
         }) : null, header !== null ? header : /*#__PURE__*/jsxs("div", {
           className: classNames([{
             'modal-header': title !== null
-          }]),
+          }, headerClassName]),
           children: [title !== null ? /*#__PURE__*/jsx("h5", {
             className: "modal-title pe-2",
             children: isMessage(title) ? /*#__PURE__*/jsx(Label, {
               children: title
             }) : title
-          }) : null, title !== null && onClose !== null ? /*#__PURE__*/jsx(Button, {
+          }) : null, title !== null && !withoutClose && !onCloseButtonOutside ? /*#__PURE__*/jsx(Button, {
             type: "button",
-            className: classNames(['btn-close', 'close']),
+            className: "btn-close",
             "aria-label": "Close",
-            onClick: onClose
+            onClick: requestClose
           }) : null]
         }), /*#__PURE__*/jsx("div", {
-          className: classNames(['modal-body', styles.body]),
+          className: classNames(['modal-body', bodyClassName]),
           children: children
         }), footer !== null || buttons !== null ? /*#__PURE__*/jsxs("div", {
-          className: classNames(['modal-footer', styles.footer]),
+          className: classNames(['modal-footer', footerClassName]),
           children: [footer !== null ? footer : null, buttons !== null ? /*#__PURE__*/jsx(Buttons, {
             items: buttons,
-            className: styles.buttons
+            className: buttonsClassName
           }) : null]
         }) : null]
       })

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@panneau/modal-dialog",
-    "version": "4.0.39",
+    "version": "4.0.40-alpha.1",
     "description": "Default modal",
     "keywords": [
         "javascript"
@@ -36,15 +36,11 @@
     "type": "module",
     "module": "dist/index.js",
     "types": "dist/index.d.ts",
-    "style": "assets/css/styles.css",
     "exports": {
         ".": {
             "types": "./dist/index.d.ts",
-            "style": "./assets/css/styles.css",
             "default": "./dist/index.js"
-        },
-        "./assets/css/styles": "./assets/css/styles.css",
-        "./assets/css/styles.css": "./assets/css/styles.css"
+        }
     },
     "files": [
         "dist",
@@ -64,12 +60,12 @@
     },
     "dependencies": {
         "@babel/runtime": "^7.28.6",
-        "@panneau/core": "^4.0.38",
-        "@panneau/element-button": "^4.0.39",
-        "@panneau/element-buttons": "^4.0.39",
-        "@panneau/element-label": "^4.0.38",
-        "@panneau/element-modal": "^4.0.39",
-        "@panneau/themes": "^4.0.38",
+        "@panneau/core": "^4.0.40-alpha.1",
+        "@panneau/element-button": "^4.0.40-alpha.1",
+        "@panneau/element-buttons": "^4.0.40-alpha.1",
+        "@panneau/element-label": "^4.0.40-alpha.1",
+        "@panneau/element-modal": "^4.0.40-alpha.1",
+        "@panneau/themes": "^4.0.40-alpha.1",
         "classnames": "^2.5.1",
         "lodash": "^4.17.21",
         "react-intl": "^6.0.0 || ^7.0.0 || ^8.0.0 || ^10.0.0"
@@ -77,5 +73,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "621c5233f083c1ba95cd46cd427c38361723d5d6"
+    "gitHead": "66520f92373b3aa371222b354d60ed3cf3d20c96"
 }

package/assets/css/styles.css

@@ -1 +0,0 @@
-.panneau-modal-dialog-container{cursor:auto;display:block;margin:0 auto;opacity:1}.panneau-modal-dialog-container.panneau-modal-dialog-closeOutside{margin-top:20px}.panneau-modal-dialog-container .panneau-modal-dialog-closeOutsideButton{border:1px solid var(--bs-body-color);left:auto;position:absolute;right:-40px;top:0;-webkit-transform:translateZ(1px);transform:translateZ(1px);z-index:10002}