primereact 8.7.2 → 9.0.0-beta.1

package/dialog/dialog.esm.js

@@ -4,20 +4,18 @@ import { CSSTransition } from 'primereact/csstransition';
 import { useEventListener, useMountEffect, useUpdateEffect, useUnmountEffect } from 'primereact/hooks';
 import { Portal } from 'primereact/portal';
 import { Ripple } from 'primereact/ripple';
-import { DomHandler, UniqueComponentId, ZIndexUtils, ObjectUtils, classNames } from 'primereact/utils';
+import { UniqueComponentId, DomHandler, ZIndexUtils, ObjectUtils, classNames } from 'primereact/utils';
 
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
-
       for (var key in source) {
         if (Object.prototype.hasOwnProperty.call(source, key)) {
           target[key] = source[key];
         }
       }
     }
-
     return target;
   };
   return _extends.apply(this, arguments);
@@ -25,11 +23,9 @@ function _extends() {
 
 function _arrayLikeToArray(arr, len) {
   if (len == null || len > arr.length) len = arr.length;
-
   for (var i = 0, arr2 = new Array(len); i < len; i++) {
     arr2[i] = arr[i];
   }
-
   return arr2;
 }
 
@@ -63,33 +59,33 @@ function _arrayWithHoles(arr) {
 }
 
 function _iterableToArrayLimit(arr, i) {
-  var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
-
-  if (_i == null) return;
-  var _arr = [];
-  var _n = true;
-  var _d = false;
-
-  var _s, _e;
-
-  try {
-    for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
-      _arr.push(_s.value);
-
-      if (i && _arr.length === i) break;
-    }
-  } catch (err) {
-    _d = true;
-    _e = err;
-  } finally {
+  var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"];
+  if (null != _i) {
+    var _s,
+      _e,
+      _x,
+      _r,
+      _arr = [],
+      _n = !0,
+      _d = !1;
     try {
-      if (!_n && _i["return"] != null) _i["return"]();
+      if (_x = (_i = _i.call(arr)).next, 0 === i) {
+        if (Object(_i) !== _i) return;
+        _n = !1;
+      } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0) {
+        ;
+      }
+    } catch (err) {
+      _d = !0, _e = err;
     } finally {
-      if (_d) throw _e;
+      try {
+        if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return;
+      } finally {
+        if (_d) throw _e;
+      }
     }
+    return _arr;
   }
-
-  return _arr;
 }
 
 function _nonIterableRest() {
@@ -101,26 +97,23 @@ function _slicedToArray(arr, i) {
 }
 
 var Dialog = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var _React$useState = React.useState(props.id),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      idState = _React$useState2[0],
-      setIdState = _React$useState2[1];
-
+  var uniqueId = props.id ? props.id : UniqueComponentId();
+  var _React$useState = React.useState(uniqueId),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    idState = _React$useState2[0];
+    _React$useState2[1];
   var _React$useState3 = React.useState(false),
-      _React$useState4 = _slicedToArray(_React$useState3, 2),
-      maskVisibleState = _React$useState4[0],
-      setMaskVisibleState = _React$useState4[1];
-
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    maskVisibleState = _React$useState4[0],
+    setMaskVisibleState = _React$useState4[1];
   var _React$useState5 = React.useState(false),
-      _React$useState6 = _slicedToArray(_React$useState5, 2),
-      visibleState = _React$useState6[0],
-      setVisibleState = _React$useState6[1];
-
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    visibleState = _React$useState6[0],
+    setVisibleState = _React$useState6[1];
   var _React$useState7 = React.useState(props.maximized),
-      _React$useState8 = _slicedToArray(_React$useState7, 2),
-      maximizedState = _React$useState8[0],
-      setMaximizedState = _React$useState8[1];
-
+    _React$useState8 = _slicedToArray(_React$useState7, 2),
+    maximizedState = _React$useState8[0],
+    setMaximizedState = _React$useState8[1];
   var dialogRef = React.useRef(null);
   var maskRef = React.useRef(null);
   var contentRef = React.useRef(null);
@@ -132,93 +125,82 @@ var Dialog = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var lastPageX = React.useRef(null);
   var lastPageY = React.useRef(null);
   var styleElement = React.useRef(null);
-  var attributeSelector = React.useRef('');
+  var attributeSelector = React.useRef(uniqueId);
   var maximized = props.onMaximize ? props.maximized : maximizedState;
-
   var _useEventListener = useEventListener({
-    type: 'keydown',
-    listener: function listener(event) {
-      return onKeyDown(event);
-    }
-  }),
-      _useEventListener2 = _slicedToArray(_useEventListener, 2),
-      bindDocumentKeyDownListener = _useEventListener2[0],
-      unbindDocumentKeyDownListener = _useEventListener2[1];
-
+      type: 'keydown',
+      listener: function listener(event) {
+        return onKeyDown(event);
+      }
+    }),
+    _useEventListener2 = _slicedToArray(_useEventListener, 2),
+    bindDocumentKeyDownListener = _useEventListener2[0],
+    unbindDocumentKeyDownListener = _useEventListener2[1];
   var _useEventListener3 = useEventListener({
-    type: 'mousemove',
-    target: function target() {
-      return window.document;
-    },
-    listener: function listener(event) {
-      return onResize(event);
-    }
-  }),
-      _useEventListener4 = _slicedToArray(_useEventListener3, 2),
-      bindDocumentResizeListener = _useEventListener4[0],
-      unbindDocumentResizeListener = _useEventListener4[1];
-
+      type: 'mousemove',
+      target: function target() {
+        return window.document;
+      },
+      listener: function listener(event) {
+        return onResize(event);
+      }
+    }),
+    _useEventListener4 = _slicedToArray(_useEventListener3, 2),
+    bindDocumentResizeListener = _useEventListener4[0],
+    unbindDocumentResizeListener = _useEventListener4[1];
   var _useEventListener5 = useEventListener({
-    type: 'mouseup',
-    target: function target() {
-      return window.document;
-    },
-    listener: function listener(event) {
-      return onResizeEnd(event);
-    }
-  }),
-      _useEventListener6 = _slicedToArray(_useEventListener5, 2),
-      bindDocumentResizeEndListener = _useEventListener6[0],
-      unbindDocumentResizEndListener = _useEventListener6[1];
-
+      type: 'mouseup',
+      target: function target() {
+        return window.document;
+      },
+      listener: function listener(event) {
+        return onResizeEnd(event);
+      }
+    }),
+    _useEventListener6 = _slicedToArray(_useEventListener5, 2),
+    bindDocumentResizeEndListener = _useEventListener6[0],
+    unbindDocumentResizEndListener = _useEventListener6[1];
   var _useEventListener7 = useEventListener({
-    type: 'mousemove',
-    target: function target() {
-      return window.document;
-    },
-    listener: function listener(event) {
-      return onDrag(event);
-    }
-  }),
-      _useEventListener8 = _slicedToArray(_useEventListener7, 2),
-      bindDocumentDragListener = _useEventListener8[0],
-      unbindDocumentDragListener = _useEventListener8[1];
-
+      type: 'mousemove',
+      target: function target() {
+        return window.document;
+      },
+      listener: function listener(event) {
+        return onDrag(event);
+      }
+    }),
+    _useEventListener8 = _slicedToArray(_useEventListener7, 2),
+    bindDocumentDragListener = _useEventListener8[0],
+    unbindDocumentDragListener = _useEventListener8[1];
   var _useEventListener9 = useEventListener({
-    type: 'mouseup',
-    target: function target() {
-      return window.document;
-    },
-    listener: function listener(event) {
-      return onDragEnd(event);
-    }
-  }),
-      _useEventListener10 = _slicedToArray(_useEventListener9, 2),
-      bindDocumentDragEndListener = _useEventListener10[0],
-      unbindDocumentDragEndListener = _useEventListener10[1];
-
+      type: 'mouseup',
+      target: function target() {
+        return window.document;
+      },
+      listener: function listener(event) {
+        return onDragEnd(event);
+      }
+    }),
+    _useEventListener10 = _slicedToArray(_useEventListener9, 2),
+    bindDocumentDragEndListener = _useEventListener10[0],
+    unbindDocumentDragEndListener = _useEventListener10[1];
   var onClose = function onClose(event) {
     props.onHide();
     event.preventDefault();
   };
-
   var focus = function focus() {
     var activeElement = document.activeElement;
     var isActiveElementInDialog = activeElement && dialogRef.current && dialogRef.current.contains(activeElement);
-
     if (!isActiveElementInDialog && props.closable && props.showHeader) {
       closeRef.current.focus();
     }
   };
-
   var onMaskClick = function onMaskClick(event) {
     if (props.dismissableMask && props.modal && maskRef.current === event.target) {
       onClose(event);
     }
-
     props.onMaskClick && props.onMaskClick(event);
   };
-
   var toggleMaximize = function toggleMaximize(event) {
     if (props.onMaximize) {
       props.onMaximize({
@@ -230,27 +212,20 @@ var Dialog = /*#__PURE__*/React.forwardRef(function (props, ref) {
         return !prevMaximized;
       });
     }
-
     event.preventDefault();
   };
-
   var onKeyDown = function onKeyDown(event) {
     var currentTarget = event.currentTarget;
-
     if (!currentTarget || !currentTarget.primeDialogParams) {
       return;
     }
-
     var params = currentTarget.primeDialogParams;
     var paramLength = params.length;
     var dialogId = params[paramLength - 1] ? params[paramLength - 1].id : undefined;
-
     if (dialogId !== idState) {
       return;
     }
-
     var dialog = document.getElementById(dialogId);
-
     if (props.closable && props.closeOnEscape && event.key === 'Escape') {
       onClose(event);
       event.stopImmediatePropagation();
@@ -258,13 +233,11 @@ var Dialog = /*#__PURE__*/React.forwardRef(function (props, ref) {
     } else if (event.key === 'Tab') {
       event.preventDefault();
       var focusableElements = DomHandler.getFocusableElements(dialog);
-
       if (focusableElements && focusableElements.length > 0) {
         if (!document.activeElement) {
           focusableElements[0].focus();
         } else {
           var focusedIndex = focusableElements.indexOf(document.activeElement);
-
           if (event.shiftKey) {
             if (focusedIndex === -1 || focusedIndex === 0) focusableElements[focusableElements.length - 1].focus();else focusableElements[focusedIndex - 1].focus();
           } else {
@@ -274,12 +247,10 @@ var Dialog = /*#__PURE__*/React.forwardRef(function (props, ref) {
       }
     }
   };
-
   var onDragStart = function onDragStart(event) {
     if (DomHandler.hasClass(event.target, 'p-dialog-header-icon') || DomHandler.hasClass(event.target.parentElement, 'p-dialog-header-icon')) {
       return;
     }
-
     if (props.draggable) {
       dragging.current = true;
       lastPageX.current = event.pageX;
@@ -289,7 +260,6 @@ var Dialog = /*#__PURE__*/React.forwardRef(function (props, ref) {
       props.onDragStart && props.onDragStart(event);
     }
   };
-
   var onDrag = function onDrag(event) {
     if (dragging.current) {
       var width = DomHandler.getOuterWidth(dialogRef.current);
@@ -301,13 +271,11 @@ var Dialog = /*#__PURE__*/React.forwardRef(function (props, ref) {
       var topPos = offset.top + deltaY;
       var viewport = DomHandler.getViewport();
       dialogRef.current.style.position = 'fixed';
-
       if (props.keepInViewport) {
         if (leftPos >= props.minX && leftPos + width < viewport.width) {
           lastPageX.current = event.pageX;
           dialogRef.current.style.left = leftPos + 'px';
         }
-
         if (topPos >= props.minY && topPos + height < viewport.height) {
           lastPageY.current = event.pageY;
           dialogRef.current.style.top = topPos + 'px';
@@ -318,11 +286,9 @@ var Dialog = /*#__PURE__*/React.forwardRef(function (props, ref) {
         lastPageY.current = event.pageY;
         dialogRef.current.style.top = topPos + 'px';
       }
-
       props.onDrag && props.onDrag(event);
     }
   };
-
   var onDragEnd = function onDragEnd(event) {
     if (dragging.current) {
       dragging.current = false;
@@ -330,7 +296,6 @@ var Dialog = /*#__PURE__*/React.forwardRef(function (props, ref) {
       props.onDragEnd && props.onDragEnd(event);
     }
   };
-
   var onResizeStart = function onResizeStart(event) {
     if (props.resizable) {
       resizing.current = true;
@@ -340,18 +305,14 @@ var Dialog = /*#__PURE__*/React.forwardRef(function (props, ref) {
       props.onResizeStart && props.onResizeStart(event);
     }
   };
-
   var convertToPx = function convertToPx(value, property, viewport) {
     !viewport && (viewport = DomHandler.getViewport());
     var val = parseInt(value);
-
     if (/^(\d+|(\.\d+))(\.\d+)?%$/.test(value)) {
       return val * (viewport[property] / 100);
     }
-
     return val;
   };
-
   var onResize = function onResize(event) {
     if (resizing.current) {
       var deltaX = event.pageX - lastPageX.current;
@@ -365,26 +326,21 @@ var Dialog = /*#__PURE__*/React.forwardRef(function (props, ref) {
       var minHeight = convertToPx(dialogRef.current.style.minHeight, 'height', viewport);
       var newWidth = width + deltaX;
       var newHeight = height + deltaY;
-
       if (hasBeenDragged) {
         newWidth += deltaX;
         newHeight += deltaY;
       }
-
       if ((!minWidth || newWidth > minWidth) && offset.left + newWidth < viewport.width) {
         dialogRef.current.style.width = newWidth + 'px';
       }
-
       if ((!minHeight || newHeight > minHeight) && offset.top + newHeight < viewport.height) {
         dialogRef.current.style.height = newHeight + 'px';
       }
-
       lastPageX.current = event.pageX;
       lastPageY.current = event.pageY;
       props.onResize && props.onResize(event);
     }
   };
-
   var onResizeEnd = function onResizeEnd(event) {
     if (resizing.current) {
       resizing.current = false;
@@ -392,14 +348,12 @@ var Dialog = /*#__PURE__*/React.forwardRef(function (props, ref) {
       props.onResizeEnd && props.onResizeEnd(event);
     }
   };
-
   var resetPosition = function resetPosition() {
     dialogRef.current.style.position = '';
     dialogRef.current.style.left = '';
     dialogRef.current.style.top = '';
     dialogRef.current.style.margin = '';
   };
-
   var getPositionClass = function getPositionClass() {
     var positions = ['center', 'left', 'right', 'top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right'];
     var pos = positions.find(function (item) {
@@ -407,55 +361,43 @@ var Dialog = /*#__PURE__*/React.forwardRef(function (props, ref) {
     });
     return pos ? "p-dialog-".concat(pos) : '';
   };
-
   var onEnter = function onEnter() {
     dialogRef.current.setAttribute(attributeSelector.current, '');
   };
-
   var onEntered = function onEntered() {
     props.onShow && props.onShow();
-
     if (props.focusOnShow) {
       focus();
     }
-
     enableDocumentSettings();
   };
-
   var onExiting = function onExiting() {
     if (props.modal) {
       DomHandler.addClass(maskRef.current, 'p-component-overlay-leave');
     }
-
     if (props.blockScroll) {
       DomHandler.removeClass(document.body, 'p-overflow-hidden');
     }
   };
-
   var onExited = function onExited() {
     dragging.current = false;
     ZIndexUtils.clear(maskRef.current);
     setMaskVisibleState(false);
     disableDocumentSettings();
   };
-
   var enableDocumentSettings = function enableDocumentSettings() {
     bindGlobalListeners();
-
     if (props.blockScroll || props.maximizable && maximized) {
       DomHandler.addClass(document.body, 'p-overflow-hidden');
     }
   };
-
   var disableDocumentSettings = function disableDocumentSettings() {
     unbindGlobalListeners();
     var isMaximized = props.maximizable && maximized;
-
     if (props.modal) {
       var hasBlockScroll = document.primeDialogParams && document.primeDialogParams.some(function (param) {
         return param.hasBlockScroll;
       });
-
       if (hasBlockScroll || isMaximized) {
         DomHandler.removeClass(document.body, 'p-overflow-hidden');
       }
@@ -463,18 +405,15 @@ var Dialog = /*#__PURE__*/React.forwardRef(function (props, ref) {
       DomHandler.removeClass(document.body, 'p-overflow-hidden');
     }
   };
-
   var bindGlobalListeners = function bindGlobalListeners() {
     if (props.draggable) {
       bindDocumentDragListener();
       bindDocumentDragEndListener();
     }
-
     if (props.resizable) {
       bindDocumentResizeListener();
       bindDocumentResizeEndListener();
     }
-
     bindDocumentKeyDownListener();
     var newParam = {
       id: idState,
@@ -482,7 +421,6 @@ var Dialog = /*#__PURE__*/React.forwardRef(function (props, ref) {
     };
     document.primeDialogParams = document.primeDialogParams ? [].concat(_toConsumableArray(document.primeDialogParams), [newParam]) : [newParam];
   };
-
   var unbindGlobalListeners = function unbindGlobalListeners() {
     unbindDocumentDragListener();
     unbindDocumentDragEndListener();
@@ -493,42 +431,24 @@ var Dialog = /*#__PURE__*/React.forwardRef(function (props, ref) {
       return param.id !== idState;
     });
   };
-
   var createStyle = function createStyle() {
-    if (!styleElement.current) {
-      styleElement.current = DomHandler.createInlineStyle(PrimeReact.nonce);
-      var innerHTML = '';
-
-      for (var breakpoint in props.breakpoints) {
-        innerHTML += "\n                    @media screen and (max-width: ".concat(breakpoint, ") {\n                        .p-dialog[").concat(attributeSelector.current, "] {\n                            width: ").concat(props.breakpoints[breakpoint], " !important;\n                        }\n                    }\n                ");
-      }
-
-      styleElement.current.innerHTML = innerHTML;
+    styleElement.current = DomHandler.createInlineStyle(PrimeReact.nonce);
+    var innerHTML = '';
+    for (var breakpoint in props.breakpoints) {
+      innerHTML += "\n                @media screen and (max-width: ".concat(breakpoint, ") {\n                    .p-dialog[").concat(attributeSelector.current, "] {\n                        width: ").concat(props.breakpoints[breakpoint], " !important;\n                    }\n                }\n            ");
     }
+    styleElement.current.innerHTML = innerHTML;
   };
-
   var changeScrollOnMaximizable = function changeScrollOnMaximizable() {
     if (!props.blockScroll) {
       var funcName = maximized ? 'addClass' : 'removeClass';
       DomHandler[funcName](document.body, 'p-overflow-hidden');
     }
   };
-
   useMountEffect(function () {
-    var unqiueId = UniqueComponentId();
-
-    if (!idState) {
-      setIdState(unqiueId);
-    }
-
-    if (!attributeSelector.current) {
-      attributeSelector.current = unqiueId;
-    }
-
     if (props.visible) {
       setMaskVisibleState(true);
     }
-
     if (props.breakpoints) {
       createStyle();
     }
@@ -537,7 +457,6 @@ var Dialog = /*#__PURE__*/React.forwardRef(function (props, ref) {
     if (props.visible && !maskVisibleState) {
       setMaskVisibleState(true);
     }
-
     if (props.visible !== visibleState && maskVisibleState) {
       setVisibleState(props.visible);
     }
@@ -580,7 +499,6 @@ var Dialog = /*#__PURE__*/React.forwardRef(function (props, ref) {
       }
     };
   });
-
   var createCloseIcon = function createCloseIcon() {
     if (props.closable) {
       var ariaLabel = props.ariaCloseIconLabel || localeOption('close');
@@ -595,16 +513,13 @@ var Dialog = /*#__PURE__*/React.forwardRef(function (props, ref) {
         "aria-hidden": "true"
       }), /*#__PURE__*/React.createElement(Ripple, null));
     }
-
     return null;
   };
-
   var createMaximizeIcon = function createMaximizeIcon() {
     var iconClassName = classNames('p-dialog-header-maximize-icon pi', {
       'pi-window-maximize': !maximized,
       'pi-window-minimize': maximized
     });
-
     if (props.maximizable) {
       return /*#__PURE__*/React.createElement("button", {
         type: "button",
@@ -614,10 +529,8 @@ var Dialog = /*#__PURE__*/React.forwardRef(function (props, ref) {
         className: iconClassName
       }), /*#__PURE__*/React.createElement(Ripple, null));
     }
-
     return null;
   };
-
   var createHeader = function createHeader() {
     if (props.showHeader) {
       var closeIcon = createCloseIcon();
@@ -638,10 +551,8 @@ var Dialog = /*#__PURE__*/React.forwardRef(function (props, ref) {
         className: "p-dialog-header-icons"
       }, icons, maximizeIcon, closeIcon));
     }
-
     return null;
   };
-
   var createContent = function createContent() {
     var className = classNames('p-dialog-content', props.contentClassName);
     var contentId = idState + '_content';
@@ -652,7 +563,6 @@ var Dialog = /*#__PURE__*/React.forwardRef(function (props, ref) {
       style: props.contentStyle
     }, props.children);
   };
-
   var createFooter = function createFooter() {
     var footer = ObjectUtils.getJSXElement(props.footer, props);
     return footer && /*#__PURE__*/React.createElement("div", {
@@ -660,7 +570,6 @@ var Dialog = /*#__PURE__*/React.forwardRef(function (props, ref) {
       className: "p-dialog-footer"
     }, footer);
   };
-
   var createResizer = function createResizer() {
     if (props.resizable) {
       return /*#__PURE__*/React.createElement("span", {
@@ -671,15 +580,16 @@ var Dialog = /*#__PURE__*/React.forwardRef(function (props, ref) {
         onMouseDown: onResizeStart
       });
     }
-
     return null;
   };
-
   var createElement = function createElement() {
     var otherProps = ObjectUtils.findDiffKeys(props, Dialog.defaultProps);
     var className = classNames('p-dialog p-component', props.className, {
       'p-dialog-rtl': props.rtl,
-      'p-dialog-maximized': maximized
+      'p-dialog-maximized': maximized,
+      'p-dialog-default': !maximized,
+      'p-input-filled': PrimeReact.inputStyle === 'filled',
+      'p-ripple-disabled': PrimeReact.ripple === false
     });
     var maskClassName = classNames('p-dialog-mask', getPositionClass(), {
       'p-component-overlay p-component-overlay-enter': props.modal,
@@ -726,7 +636,6 @@ var Dialog = /*#__PURE__*/React.forwardRef(function (props, ref) {
       "aria-modal": props.modal
     }), header, content, footer, resizer)));
   };
-
   var createDialog = function createDialog() {
     var element = createElement();
     return /*#__PURE__*/React.createElement(Portal, {
@@ -735,7 +644,6 @@ var Dialog = /*#__PURE__*/React.forwardRef(function (props, ref) {
       visible: true
     });
   };
-
   return maskVisibleState && createDialog();
 });
 Dialog.displayName = 'Dialog';