primereact 8.1.0 → 8.1.1

package/primereact.all.esm.js

@@ -3025,9 +3025,25 @@ var useInterval = function useInterval(fn) {
 
 var useStorage = function useStorage(initialValue, key) {
   var storage = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'local';
-  // Since the local storage API isn't available in server-rendering environments, 
+  // Since the local storage API isn't available in server-rendering environments,
   // we check that typeof window !== 'undefined' to make SSR and SSG work properly.
-  var storageAvailable = typeof window !== 'undefined';
+  var storageAvailable = typeof window !== 'undefined'; // subscribe to window storage event so changes in one tab to a stored value
+  // are properly reflected in all tabs
+
+  var _useEventListener = useEventListener({
+    target: 'window',
+    type: 'storage',
+    listener: function listener(event) {
+      var area = storage === 'local' ? window.localStorage : window.sessionStorage;
+
+      if (event.storageArea === area && event.key === key) {
+        setStoredValue(event.newValue || undefined);
+      }
+    }
+  }),
+      _useEventListener2 = _slicedToArray(_useEventListener, 2),
+      bindWindowStorageListener = _useEventListener2[0],
+      unbindWindowStorageListener = _useEventListener2[1];
 
   var _React$useState = React.useState(function () {
     if (!storageAvailable) {
@@ -3061,8 +3077,36 @@ var useStorage = function useStorage(initialValue, key) {
     }
   };
 
+  React.useEffect(function () {
+    bindWindowStorageListener();
+    return function () {
+      return unbindWindowStorageListener();
+    };
+  }, []);
   return [storedValue, setValue];
 };
+/**
+ * Hook to wrap around useState that stores the value in the browser local storage.
+ *
+ * @param {any} initialValue the initial value to store
+ * @param {string} key the key to store the value in local storage
+ * @returns a stateful value, and a function to update it.
+ */
+
+var useLocalStorage = function useLocalStorage(initialValue, key) {
+  return useStorage(initialValue, key, 'local');
+};
+/**
+ * Hook to wrap around useState that stores the value in the browser session storage.
+ *
+ * @param {any} initialValue the initial value to store
+ * @param {string} key the key to store the value in session storage
+ * @returns a stateful value, and a function to update it.
+ */
+
+var useSessionStorage = function useSessionStorage(initialValue, key) {
+  return useStorage(initialValue, key, 'session');
+};
 /* eslint-enable */
 
 /* eslint-disable */
@@ -5372,7 +5416,8 @@ var AutoComplete = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functi
 
   var onOverlayEntering = function onOverlayEntering() {
     if (props.autoHighlight && props.suggestions && props.suggestions.length) {
-      DomHandler.addClass(overlayRef.current.firstChild.firstChild, 'p-highlight');
+      var element = getScrollableElement().firstChild.firstChild;
+      DomHandler.addClass(element, 'p-highlight');
     }
   };
 
@@ -5445,7 +5490,7 @@ var AutoComplete = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functi
             if (nextElement) {
               DomHandler.addClass(nextElement, 'p-highlight');
               DomHandler.removeClass(highlightItem, 'p-highlight');
-              DomHandler.scrollInView(overlayRef.current, nextElement);
+              DomHandler.scrollInView(getScrollableElement(), nextElement);
             }
           } else {
             highlightItem = DomHandler.findSingle(overlayRef.current, 'li');
@@ -5470,7 +5515,7 @@ var AutoComplete = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functi
             if (previousElement) {
               DomHandler.addClass(previousElement, 'p-highlight');
               DomHandler.removeClass(highlightItem, 'p-highlight');
-              DomHandler.scrollInView(overlayRef.current, previousElement);
+              DomHandler.scrollInView(getScrollableElement(), previousElement);
             }
           }
 
@@ -5603,6 +5648,10 @@ var AutoComplete = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functi
     }) : -1;
   };
 
+  var getScrollableElement = function getScrollableElement() {
+    return virtualScrollerRef.current ? overlayRef.current.firstChild : overlayRef.current;
+  };
+
   var getOptionGroupLabel = function getOptionGroupLabel(optionGroup) {
     return props.optionGroupLabel ? ObjectUtils.resolveFieldData(optionGroup, props.optionGroupLabel) : optionGroup;
   };
@@ -9407,7 +9456,7 @@ var Calendar = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     onExit: onOverlayExit,
     onExited: onOverlayExited,
     transitionOptions: props.transitionOptions
-  }, datePicker, timePicker, buttonBar, footer, monthPicker, yearPicker));
+  }, datePicker, timePicker, monthPicker, yearPicker, buttonBar, footer));
 }));
 Calendar.displayName = 'Calendar';
 Calendar.defaultProps = {
@@ -12619,9 +12668,11 @@ var Dialog = /*#__PURE__*/React.forwardRef(function (props, ref) {
       var icons = ObjectUtils.getJSXElement(props.icons, props);
       var header = ObjectUtils.getJSXElement(props.header, props);
       var headerId = idState + '_header';
+      var headerClassName = classNames('p-dialog-header', props.headerClassName);
       return /*#__PURE__*/React.createElement("div", {
         ref: headerRef,
-        className: "p-dialog-header",
+        style: props.headerStyle,
+        className: headerClassName,
         onMouseDown: onDragStart
       }, /*#__PURE__*/React.createElement("div", {
         id: headerId,
@@ -12743,6 +12794,8 @@ Dialog.defaultProps = {
   modal: true,
   onHide: null,
   onShow: null,
+  headerStyle: null,
+  headerClassName: null,
   contentStyle: null,
   contentClassName: null,
   closeOnEscape: true,
@@ -16127,7 +16180,7 @@ var Dropdown = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     if (highlightItem && highlightItem.scrollIntoView) {
       highlightItem.scrollIntoView({
         block: 'nearest',
-        inline: 'start'
+        inline: 'nearest'
       });
     }
   };
@@ -35424,8 +35477,7 @@ var StyleClass = /*#__PURE__*/React.forwardRef(function (props, ref) {
       }
 
       animating.current = false;
-    },
-    when: false
+    }
   }),
       _useEventListener2 = _slicedToArray(_useEventListener, 2),
       bindTargetEnterListener = _useEventListener2[0],
@@ -35442,8 +35494,7 @@ var StyleClass = /*#__PURE__*/React.forwardRef(function (props, ref) {
 
       unbindTargetLeaveListener();
       animating.current = false;
-    },
-    when: false
+    }
   }),
       _useEventListener4 = _slicedToArray(_useEventListener3, 2),
       bindTargetLeaveListener = _useEventListener4[0],
@@ -35458,7 +35509,7 @@ var StyleClass = /*#__PURE__*/React.forwardRef(function (props, ref) {
         leave();
       }
     },
-    when: false
+    when: props.hideOnOutsideClick
   }),
       _useEventListener6 = _slicedToArray(_useEventListener5, 2),
       bindDocumentClickListener = _useEventListener6[0],
@@ -35474,8 +35525,7 @@ var StyleClass = /*#__PURE__*/React.forwardRef(function (props, ref) {
       } else {
         if (targetRef.current.offsetParent === null) enter();else leave();
       }
-    },
-    when: false
+    }
   }),
       _useEventListener8 = _slicedToArray(_useEventListener7, 2),
       bindClickListener = _useEventListener8[0],
@@ -35501,8 +35551,7 @@ var StyleClass = /*#__PURE__*/React.forwardRef(function (props, ref) {
         }
 
         bindTargetEnterListener({
-          target: targetRef.current,
-          when: true
+          target: targetRef.current
         });
       }
     } else {
@@ -35516,8 +35565,7 @@ var StyleClass = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }
 
     bindDocumentClickListener({
-      target: elementRef.current && elementRef.current.ownerDocument,
-      when: props.hideOnOutsideClick
+      target: elementRef.current && elementRef.current.ownerDocument
     });
   };
 
@@ -35532,8 +35580,7 @@ var StyleClass = /*#__PURE__*/React.forwardRef(function (props, ref) {
         }
 
         bindTargetLeaveListener({
-          target: targetRef.current,
-          when: true
+          target: targetRef.current
         });
       }
     } else {
@@ -35577,8 +35624,7 @@ var StyleClass = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var init = function init() {
     elementRef.current = ObjectUtils.getRefElement(props.nodeRef);
     bindClickListener({
-      target: elementRef.current,
-      when: true
+      target: elementRef.current
     });
   };
 
@@ -35600,9 +35646,11 @@ var StyleClass = /*#__PURE__*/React.forwardRef(function (props, ref) {
     init();
   });
   useUpdateEffect(function () {
-    destroy();
     init();
-  }, [props.nodeRef]);
+    return function () {
+      unbindClickListener();
+    };
+  });
   useUnmountEffect(function () {
     destroy();
   });
@@ -40098,12 +40146,12 @@ var TreeTableHeader = /*#__PURE__*/React.memo(function (props) {
     }
   };
 
-  var getColumnProp = function getColumnProp() {
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
+  var getColumnProp = function getColumnProp(column) {
+    for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+      args[_key - 1] = arguments[_key];
     }
 
-    return props.column ? typeof args[0] === 'string' ? props.column.props[args[0]] : (args[0] || props.column).props[args[1]] : null;
+    return column ? typeof args[0] === 'string' ? column.props[args[0]] : (args[0] || column).props[args[1]] : null;
   };
 
   var createSortIcon = function createSortIcon(column, sorted, sortOrder) {
@@ -40179,7 +40227,7 @@ var TreeTableHeader = /*#__PURE__*/React.memo(function (props) {
       var className = classNames(column.props.headerClassName || column.props.className, {
         'p-sortable-column': column.props.sortable,
         'p-highlight': sorted,
-        'p-resizable-column': props.resizableColumns && getColumnProp('resizeable')
+        'p-resizable-column': props.resizableColumns && getColumnProp(column, 'resizeable')
       });
       var resizer = createResizer(column);
       return /*#__PURE__*/React.createElement("th", {
@@ -41722,4 +41770,4 @@ TriStateCheckbox.defaultProps = {
   onChange: null
 };
 
-export { Accordion, AccordionTab, AutoComplete, Avatar, AvatarGroup, Badge, BlockUI, BreadCrumb, Button, CSSTransition, Calendar, Captcha, Card, Carousel, CascadeSelect, Chart, Checkbox, Chip, Chips, ColorPicker, Column, ColumnGroup, ConfirmDialog, ConfirmPopup, ConnectedOverlayScrollHandler, ContextMenu, DataScroller, DataTable, DataView, DataViewItem, DataViewLayoutOptions, DeferredContent, Dialog, Divider, Dock, DomHandler, Dropdown, Editor, EventBus, Fieldset, FileUpload, FilterMatchMode, FilterOperator, FilterService, FullCalendar, GMap, Galleria, IconUtils, Image, Inplace, InplaceContent, InplaceDisplay, InputMask, InputNumber, InputSwitch, InputText, InputTextarea, KeyFilter, Knob, ListBox, MegaMenu, Mention, Menu, Menubar, Message, MessageSeverity, Messages, MultiSelect, MultiStateCheckbox, ObjectUtils, OrderList, OrganizationChart, OverlayPanel, OverlayService, Paginator, Panel, PanelMenu, Password, PickList, Portal, PrimeIcons, ProgressBar, ProgressSpinner, RadioButton, Rating, Ripple, Row, ScrollPanel, ScrollTop, SelectButton, Sidebar, Skeleton, SlideMenu, Slider, SpeedDial, SplitButton, Splitter, SplitterPanel, Steps, StyleClass, TabMenu, TabPanel, TabView, Tag, Terminal, TerminalService, TieredMenu, Timeline, Toast, ToggleButton, Toolbar, Tooltip, Tree, TreeSelect, TreeTable, TriStateCheckbox, UniqueComponentId, VirtualScroller, ZIndexUtils, addLocale, ariaLabel, classNames, confirmDialog, confirmPopup, PrimeReact as default, locale, localeOption, localeOptions, mask, updateLocaleOption, updateLocaleOptions, useEventListener, useInterval, useMountEffect, useOverlayListener, useOverlayScrollListener, usePrevious, useResizeListener, useStorage, useTimeout, useUnmountEffect, useUpdateEffect };
+export { Accordion, AccordionTab, AutoComplete, Avatar, AvatarGroup, Badge, BlockUI, BreadCrumb, Button, CSSTransition, Calendar, Captcha, Card, Carousel, CascadeSelect, Chart, Checkbox, Chip, Chips, ColorPicker, Column, ColumnGroup, ConfirmDialog, ConfirmPopup, ConnectedOverlayScrollHandler, ContextMenu, DataScroller, DataTable, DataView, DataViewItem, DataViewLayoutOptions, DeferredContent, Dialog, Divider, Dock, DomHandler, Dropdown, Editor, EventBus, Fieldset, FileUpload, FilterMatchMode, FilterOperator, FilterService, FullCalendar, GMap, Galleria, IconUtils, Image, Inplace, InplaceContent, InplaceDisplay, InputMask, InputNumber, InputSwitch, InputText, InputTextarea, KeyFilter, Knob, ListBox, MegaMenu, Mention, Menu, Menubar, Message, MessageSeverity, Messages, MultiSelect, MultiStateCheckbox, ObjectUtils, OrderList, OrganizationChart, OverlayPanel, OverlayService, Paginator, Panel, PanelMenu, Password, PickList, Portal, PrimeIcons, ProgressBar, ProgressSpinner, RadioButton, Rating, Ripple, Row, ScrollPanel, ScrollTop, SelectButton, Sidebar, Skeleton, SlideMenu, Slider, SpeedDial, SplitButton, Splitter, SplitterPanel, Steps, StyleClass, TabMenu, TabPanel, TabView, Tag, Terminal, TerminalService, TieredMenu, Timeline, Toast, ToggleButton, Toolbar, Tooltip, Tree, TreeSelect, TreeTable, TriStateCheckbox, UniqueComponentId, VirtualScroller, ZIndexUtils, addLocale, ariaLabel, classNames, confirmDialog, confirmPopup, PrimeReact as default, locale, localeOption, localeOptions, mask, updateLocaleOption, updateLocaleOptions, useEventListener, useInterval, useLocalStorage, useMountEffect, useOverlayListener, useOverlayScrollListener, usePrevious, useResizeListener, useSessionStorage, useStorage, useTimeout, useUnmountEffect, useUpdateEffect };