primereact 9.4.0 → 9.6.0

package/tieredmenu/tieredmenu.d.ts

@@ -10,13 +10,89 @@
 import * as React from 'react';
 import { CSSTransitionProps } from '../csstransition';
 import { MenuItem } from '../menuitem';
-import { IconType } from '../utils/utils';
+import { IconType, PassThroughType } from '../utils/utils';
+
+export declare type TieredMenuPassThroughType<T> = PassThroughType<T, TieredMenuPassThroughMethodOptions>;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface TieredMenuPassThroughMethodOptions {
+    props: TieredMenuProps;
+    state: TieredMenuState;
+    context: TieredMenuContext;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link TieredMenuProps.pt}
+ */
+export interface TieredMenuPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: TieredMenuPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the list's DOM element.
+     */
+    menu?: TieredMenuPassThroughType<React.HTMLAttributes<HTMLUListElement>>;
+    /**
+     * Uses to pass attributes to the list item's DOM element.
+     */
+    menuitem?: TieredMenuPassThroughType<React.HTMLAttributes<HTMLLIElement>>;
+    /**
+     * Uses to pass attributes to the action's DOM element.
+     */
+    action?: TieredMenuPassThroughType<React.HTMLAttributes<HTMLAnchorElement>>;
+    /**
+     * Uses to pass attributes to the icon's DOM element.
+     */
+    icon?: TieredMenuPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the label's DOM element.
+     */
+    label?: TieredMenuPassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the submenu icon's DOM element.
+     */
+    submenuIcon?: TieredMenuPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the separator's DOM element.
+     */
+    separator?: TieredMenuPassThroughType<React.HTMLAttributes<HTMLLIElement>>;
+}
+
+/**
+ * Defines current inline state in TieredMenu component.
+ */
+export interface TieredMenuState {
+    /**
+     * Current attributeSelector visible state as a string.
+     */
+    attributeSelector: string;
+    /**
+     * Current visible state as a boolean.
+     * @defaultValue true
+     */
+    visible: boolean;
+}
+
+/**
+ * Defines current options in TieredMenu component.
+ */
+export interface TieredMenuContext {
+    /**
+     * Current active state of menuitem as a boolean.
+     * @defaultValue false
+     */
+    active: boolean;
+}
 
 /**
  * Defines valid properties in TieredMenu component. In addition to these, all properties of HTMLDivElement can be used in this component.
  * @group Properties
  */
-export interface TieredMenuProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref'> {
+export interface TieredMenuProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref' | 'pt'> {
     /**
      * An array of menuitems.
      */
@@ -74,6 +150,11 @@ export interface TieredMenuProps extends Omit<React.DetailedHTMLProps<React.HTML
      * @readonly
      */
     children?: React.ReactNode | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {TieredMenuPassThroughOptions}
+     */
+    pt?: TieredMenuPassThroughOptions;
 }
 
 /**

package/tieredmenu/tieredmenu.esm.js

@@ -1,28 +1,14 @@
 import * as React from 'react';
-import PrimeReact from 'primereact/api';
+import PrimeReact, { PrimeReactContext } from 'primereact/api';
 import { CSSTransition } from 'primereact/csstransition';
 import { useEventListener, useResizeListener, useMountEffect, useUpdateEffect, useMatchMedia, useOverlayListener, useUnmountEffect } from 'primereact/hooks';
 import { OverlayService } from 'primereact/overlayservice';
 import { Portal } from 'primereact/portal';
-import { ObjectUtils, classNames, DomHandler, IconUtils, UniqueComponentId, ZIndexUtils } from 'primereact/utils';
+import { classNames, mergeProps, DomHandler, IconUtils, ObjectUtils, UniqueComponentId, ZIndexUtils } from 'primereact/utils';
+import { ComponentBase } from 'primereact/componentbase';
 import { Ripple } from 'primereact/ripple';
 import { AngleRightIcon } from 'primereact/icons/angleright';
 
-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);
-}
-
 function _arrayWithHoles(arr) {
   if (Array.isArray(arr)) return arr;
 }
@@ -78,7 +64,7 @@ function _slicedToArray(arr, i) {
   return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
 }
 
-var TieredMenuBase = {
+var TieredMenuBase = ComponentBase.extend({
   defaultProps: {
     __TYPE: 'TieredMenu',
     id: null,
@@ -96,21 +82,65 @@ var TieredMenuBase = {
     onHide: null,
     submenuIcon: null,
     children: undefined
-  },
-  getProps: function getProps(props) {
-    return ObjectUtils.getMergedProps(props, TieredMenuBase.defaultProps);
-  },
-  getOtherProps: function getOtherProps(props) {
-    return ObjectUtils.getDiffProps(props, TieredMenuBase.defaultProps);
   }
-};
+});
+
+function _typeof(obj) {
+  "@babel/helpers - typeof";
+
+  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
+    return typeof obj;
+  } : function (obj) {
+    return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+  }, _typeof(obj);
+}
+
+function _toPrimitive(input, hint) {
+  if (_typeof(input) !== "object" || input === null) return input;
+  var prim = input[Symbol.toPrimitive];
+  if (prim !== undefined) {
+    var res = prim.call(input, hint || "default");
+    if (_typeof(res) !== "object") return res;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return (hint === "string" ? String : Number)(input);
+}
 
+function _toPropertyKey(arg) {
+  var key = _toPrimitive(arg, "string");
+  return _typeof(key) === "symbol" ? key : String(key);
+}
+
+function _defineProperty(obj, key, value) {
+  key = _toPropertyKey(key);
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+  return obj;
+}
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var TieredMenuSub = /*#__PURE__*/React.memo(function (props) {
   var _React$useState = React.useState(null),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     activeItemState = _React$useState2[0],
     setActiveItemState = _React$useState2[1];
   var elementRef = React.useRef(null);
+  var getPTOptions = function getPTOptions(item, key) {
+    return props.ptm(key, {
+      context: {
+        active: activeItemState === item
+      }
+    });
+  };
   var _useEventListener = useEventListener({
       type: 'click',
       listener: function listener(event) {
@@ -251,11 +281,12 @@ var TieredMenuSub = /*#__PURE__*/React.memo(function (props) {
   }, [activeItemState]);
   var createSeparator = function createSeparator(index) {
     var key = 'separator_' + index;
-    return /*#__PURE__*/React.createElement("li", {
+    var separatorProps = mergeProps({
       key: key,
-      className: "p-menu-separator",
-      role: "separator"
-    });
+      className: 'p-menu-separator',
+      role: 'separator'
+    }, props.ptm('separator'));
+    return /*#__PURE__*/React.createElement("li", separatorProps);
   };
   var createSubmenu = function createSubmenu(item) {
     if (item.items) {
@@ -268,7 +299,8 @@ var TieredMenuSub = /*#__PURE__*/React.memo(function (props) {
         parentActive: item === activeItemState,
         isMobileMode: props.isMobileMode,
         onItemToggle: props.onItemToggle,
-        submenuIcon: props.submenuIcon
+        submenuIcon: props.submenuIcon,
+        ptm: props.ptm
       });
     }
     return null;
@@ -296,37 +328,39 @@ var TieredMenuSub = /*#__PURE__*/React.memo(function (props) {
       'p-disabled': disabled
     });
     var iconClassName = classNames('p-menuitem-icon', _icon);
-    var icon = IconUtils.getJSXIcon(_icon, {
-      className: 'p-menuitem-icon'
-    }, {
+    var iconProps = mergeProps({
+      className: iconClassName
+    }, getPTOptions(item, 'icon'));
+    var icon = IconUtils.getJSXIcon(_icon, _objectSpread({}, iconProps), {
       props: props.menuProps
     });
-    var label = _label && /*#__PURE__*/React.createElement("span", {
-      className: "p-menuitem-text"
-    }, _label);
+    var labelProps = mergeProps({
+      className: 'p-menuitem-text'
+    }, getPTOptions(item, 'label'));
+    var label = _label && /*#__PURE__*/React.createElement("span", labelProps, _label);
     var submenuIconClassName = 'p-submenu-icon';
-    var submenuIcon = item.items && IconUtils.getJSXIcon(props.submenuIcon || /*#__PURE__*/React.createElement(AngleRightIcon, {
+    var submenuIconProps = mergeProps({
       className: submenuIconClassName
-    }), {
-      className: submenuIconClassName
-    }, {
+    }, getPTOptions(item, 'submenuIcon'));
+    var submenuIcon = item.items && IconUtils.getJSXIcon(props.submenuIcon || /*#__PURE__*/React.createElement(AngleRightIcon, submenuIconProps), _objectSpread({}, submenuIconProps), {
       props: props.menuProps
     });
     var submenu = createSubmenu(item);
-    var content = /*#__PURE__*/React.createElement("a", {
+    var actionProps = mergeProps({
       href: url || '#',
       className: linkClassName,
       target: target,
-      role: "menuitem",
-      "aria-haspopup": items != null,
+      role: 'menuitem',
+      'aria-haspopup': items != null,
       onClick: function onClick(event) {
         return onItemClick(event, item);
       },
       onKeyDown: function onKeyDown(event) {
         return onItemKeyDown(event, item);
       },
-      "aria-disabled": disabled
-    }, icon, label, submenuIcon, /*#__PURE__*/React.createElement(Ripple, null));
+      'aria-disabled': disabled
+    }, getPTOptions(item, 'action'));
+    var content = /*#__PURE__*/React.createElement("a", actionProps, icon, label, submenuIcon, /*#__PURE__*/React.createElement(Ripple, null));
     if (template) {
       var defaultContentOptions = {
         onClick: function onClick(event) {
@@ -346,7 +380,7 @@ var TieredMenuSub = /*#__PURE__*/React.memo(function (props) {
       };
       content = ObjectUtils.getJSXElement(template, item, defaultContentOptions);
     }
-    return /*#__PURE__*/React.createElement("li", {
+    var menuitemProps = mergeProps({
       key: key,
       id: item.id,
       className: className,
@@ -354,8 +388,9 @@ var TieredMenuSub = /*#__PURE__*/React.memo(function (props) {
       onMouseEnter: function onMouseEnter(event) {
         return onItemMouseEnter(event, item);
       },
-      role: "none"
-    }, content, submenu);
+      role: 'none'
+    }, getPTOptions(item, 'menuitem'));
+    return /*#__PURE__*/React.createElement("li", menuitemProps, content, submenu);
   };
   var createItem = function createItem(item, index) {
     return item.separator ? createSeparator(index) : createMenuItem(item, index);
@@ -367,17 +402,19 @@ var TieredMenuSub = /*#__PURE__*/React.memo(function (props) {
     'p-submenu-list': !props.root
   });
   var submenu = createMenu();
-  return /*#__PURE__*/React.createElement("ul", {
+  var menuProps = mergeProps({
     ref: elementRef,
     className: className,
     role: props.root ? 'menubar' : 'menu',
-    "aria-orientation": "horizontal"
-  }, submenu);
+    'aria-orientation': 'horizontal'
+  }, props.ptm('menu'));
+  return /*#__PURE__*/React.createElement("ul", menuProps, submenu);
 });
 TieredMenuSub.displayName = 'TieredMenuSub';
 
 var TieredMenu = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inProps, ref) {
-  var props = TieredMenuBase.getProps(inProps);
+  var context = React.useContext(PrimeReactContext);
+  var props = TieredMenuBase.getProps(inProps, context);
   var _React$useState = React.useState(!props.popup),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     visibleState = _React$useState2[0],
@@ -386,6 +423,14 @@ var TieredMenu = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
     _React$useState4 = _slicedToArray(_React$useState3, 2),
     attributeSelectorState = _React$useState4[0],
     setAttributeSelectorState = _React$useState4[1];
+  var _TieredMenuBase$setMe = TieredMenuBase.setMetaData({
+      props: props,
+      state: {
+        visible: visibleState,
+        attributeSelector: attributeSelectorState
+      }
+    }),
+    ptm = _TieredMenuBase$setMe.ptm;
   var menuRef = React.useRef(null);
   var targetRef = React.useRef(null);
   var styleElementRef = React.useRef(null);
@@ -434,7 +479,7 @@ var TieredMenu = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
   };
   var createStyle = function createStyle() {
     if (!styleElementRef.current) {
-      styleElementRef.current = DomHandler.createInlineStyle(PrimeReact.nonce);
+      styleElementRef.current = DomHandler.createInlineStyle(context && context.nonce || PrimeReact.nonce);
       var selector = "".concat(attributeSelectorState);
       var innerHTML = "\n@media screen and (max-width: ".concat(props.breakpoint, ") {\n    .p-tieredmenu[").concat(selector, "] > ul {\n        max-height: ").concat(props.scrollHeight, ";\n        overflow: ").concat(props.scrollHeight ? 'auto' : '', ";\n    }\n\n    .p-tieredmenu[").concat(selector, "] .p-submenu-list {\n        position: relative;\n    }\n\n    .p-tieredmenu[").concat(selector, "] .p-menuitem-active > .p-submenu-list {\n        left: 0 !important;\n        box-shadow: none;\n        border-radius: 0;\n        padding: 0 0 0 calc(var(--inline-spacing) * 2); /* @todo */\n    }\n\n    .p-tieredmenu[").concat(selector, "] .p-menuitem-active > .p-menuitem-link > .p-submenu-icon {\n        transform: rotate(-180deg);\n    }\n\n    .p-tieredmenu[").concat(selector, "] .p-submenu-icon:before {\n        content: \"\\e930\";\n    }\n\n    ").concat(!props.popup ? ".p-tieredmenu[".concat(selector, "] { width: 100%; }") : '', "\n}\n");
       styleElementRef.current.innerHTML = innerHTML;
@@ -445,7 +490,7 @@ var TieredMenu = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
   };
   var onEnter = function onEnter() {
     if (props.autoZIndex) {
-      ZIndexUtils.set('menu', menuRef.current, PrimeReact.autoZIndex, props.baseZIndex || PrimeReact.zIndex['menu']);
+      ZIndexUtils.set('menu', menuRef.current, context && context.autoZIndex || PrimeReact.autoZIndex, props.baseZIndex || context && context.zIndex['menu'] || PrimeReact.zIndex['menu']);
     }
     DomHandler.absolutePosition(menuRef.current, targetRef.current);
     if (attributeSelectorState && props.breakpoint) {
@@ -493,12 +538,19 @@ var TieredMenu = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
     };
   });
   var createElement = function createElement() {
-    var otherProps = TieredMenuBase.getOtherProps(props);
+    TieredMenuBase.getOtherProps(props);
     var className = classNames('p-tieredmenu p-component', {
       'p-tieredmenu-overlay': props.popup,
-      'p-input-filled': PrimeReact.inputStyle === 'filled',
-      'p-ripple-disabled': PrimeReact.ripple === false
+      'p-input-filled': context && context.inputStyle === 'filled' || PrimeReact.inputStyle === 'filled',
+      'p-ripple-disabled': context && context.ripple === false || PrimeReact.ripple === false
     }, props.className);
+    var rootProps = mergeProps({
+      ref: menuRef,
+      id: props.id,
+      className: className,
+      style: props.style,
+      onClick: onPanelClick
+    }, TieredMenuBase.getOtherProps(props), ptm('root'));
     return /*#__PURE__*/React.createElement(CSSTransition, {
       nodeRef: menuRef,
       classNames: "p-connected-overlay",
@@ -513,14 +565,7 @@ var TieredMenu = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
       onEntered: onEntered,
       onExit: onExit,
       onExited: onExited
-    }, /*#__PURE__*/React.createElement("div", _extends({
-      ref: menuRef,
-      id: props.id,
-      className: className,
-      style: props.style
-    }, otherProps, {
-      onClick: onPanelClick
-    }), /*#__PURE__*/React.createElement(TieredMenuSub, {
+    }, /*#__PURE__*/React.createElement("div", rootProps, /*#__PURE__*/React.createElement(TieredMenuSub, {
       menuProps: props,
       model: props.model,
       root: true,
@@ -528,7 +573,8 @@ var TieredMenu = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
       onHide: hide,
       isMobileMode: isMobileMode,
       onItemToggle: onItemToggle,
-      submenuIcon: props.submenuIcon
+      submenuIcon: props.submenuIcon,
+      ptm: ptm
     })));
   };
   var element = createElement();

package/tieredmenu/tieredmenu.esm.min.js

@@ -1 +1 @@
-import*as e from"react";import n from"primereact/api";import{CSSTransition as t}from"primereact/csstransition";import{useEventListener as r,useResizeListener as o,useMountEffect as i,useUpdateEffect as u,useMatchMedia as l,useOverlayListener as a,useUnmountEffect as c}from"primereact/hooks";import{OverlayService as s}from"primereact/overlayservice";import{Portal as p}from"primereact/portal";import{ObjectUtils as m,classNames as f,DomHandler as d,IconUtils as b,UniqueComponentId as g,ZIndexUtils as h}from"primereact/utils";import{Ripple as v}from"primereact/ripple";import{AngleRightIcon as y}from"primereact/icons/angleright";function E(){return E=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e},E.apply(this,arguments)}function I(e){if(Array.isArray(e))return e}function w(e,n){var t=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=t){var r,o,i,u,l=[],a=!0,c=!1;try{if(i=(t=t.call(e)).next,0===n){if(Object(t)!==t)return;a=!1}else for(;!(a=(r=i.call(t)).done)&&(l.push(r.value),l.length!==n);a=!0);}catch(e){c=!0,o=e}finally{try{if(!a&&null!=t.return&&(u=t.return(),Object(u)!==u))return}finally{if(c)throw o}}return l}}function M(e,n){(null==n||n>e.length)&&(n=e.length);for(var t=0,r=new Array(n);t<n;t++)r[t]=e[t];return r}function S(e,n){if(e){if("string"==typeof e)return M(e,n);var t=Object.prototype.toString.call(e).slice(8,-1);return"Object"===t&&e.constructor&&(t=e.constructor.name),"Map"===t||"Set"===t?Array.from(e):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?M(e,n):void 0}}function k(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function x(e,n){return I(e)||w(e,n)||S(e,n)||k()}var N={defaultProps:{__TYPE:"TieredMenu",id:null,model:null,popup:!1,style:null,className:null,autoZIndex:!0,baseZIndex:0,breakpoint:void 0,scrollHeight:"400px",appendTo:null,transitionOptions:null,onShow:null,onHide:null,submenuIcon:null,children:void 0},getProps:function(e){return m.getMergedProps(e,N.defaultProps)},getOtherProps:function(e){return m.getDiffProps(e,N.defaultProps)}},P=e.memo((function(n){var t=x(e.useState(null),2),l=t[0],a=t[1],c=e.useRef(null),s=x(r({type:"click",listener:function(e){n.isMobileMode||!c.current||c.current.contains(e.target)||a(null)}}),1)[0],p=x(o({listener:function(){!n.isMobileMode&&a(null)}}),1)[0],g=function(){if(c.current){var e=c.current.parentElement,n=d.getOffset(e),t=d.getViewport(),r=c.current.offsetParent?c.current.offsetWidth:d.getHiddenElementOuterWidth(c.current),o=d.getOuterWidth(e.children[0]),i=parseInt(n.top,10)+c.current.offsetHeight-d.getWindowScrollTop();c.current.style.top=i>t.height?t.height-i+"px":"0px",parseInt(n.left,10)+o+r>t.width-d.calculateScrollbarWidth()&&d.addClass(c.current,"p-submenu-list-flipped")}},h=function(e,t){t.disabled||n.isMobileMode?e.preventDefault():n.root?(l||n.popup)&&a(t):a(t)},E=function(e,t){t.disabled?e.preventDefault():(t.url||e.preventDefault(),t.command&&t.command({originalEvent:e,item:t}),(n.root||n.isMobileMode)&&t.items&&a(l&&t===l?null:t),t.items||k(e))},I=function(e,t){var r=e.currentTarget.parentElement;switch(e.which){case 40:var o=M(r);o&&o.children[0].focus(),e.preventDefault();break;case 38:var i=S(r);i&&i.children[0].focus(),e.preventDefault();break;case 39:t.items&&(a(t),setTimeout((function(){r.children[1].children[0].children[0].focus()}),50)),e.preventDefault()}n.onKeyDown&&n.onKeyDown(e,r)},w=function(e,n){37===e.which&&(a(null),n.parentElement.previousElementSibling.focus())},M=function e(n){var t=n.nextElementSibling;return t?d.hasClass(t,"p-disabled")||!d.hasClass(t,"p-menuitem")?e(t):t:null},S=function e(n){var t=n.previousElementSibling;return t?d.hasClass(t,"p-disabled")||!d.hasClass(t,"p-menuitem")?e(t):t:null},k=function(e){n.isMobileMode&&!n.popup||(a(null),n.onLeafClick&&n.onLeafClick(e),n.onHide&&n.onHide(e))};i((function(){s(),p()})),u((function(){n.parentActive||a(null),n.root||!n.parentActive||n.isMobileMode||g()}),[n.parentActive]),u((function(){n.onItemToggle&&n.onItemToggle()}),[l]);var N=function(n){return e.createElement("li",{key:"separator_"+n,className:"p-menu-separator",role:"separator"})},T=function(t){return t.items?e.createElement(P,{menuProps:n.menuProps,model:t.items,onLeafClick:k,popup:n.popup,onKeyDown:w,parentActive:t===l,isMobileMode:n.isMobileMode,onItemToggle:n.onItemToggle,submenuIcon:n.submenuIcon}):null},O=function(t,r){if(!1===t.visible)return null;var o=t.style,i=t.disabled,u=t.icon,a=t.label,c=t.items,s=t.target,p=t.url,d=t.template,g=a+"_"+r,w=l===t,M=f("p-menuitem",{"p-menuitem-active":w},t.className),S=f("p-menuitem-link",{"p-disabled":i}),k=f("p-menuitem-icon",u),x=b.getJSXIcon(u,{className:"p-menuitem-icon"},{props:n.menuProps}),N=a&&e.createElement("span",{className:"p-menuitem-text"},a),P="p-submenu-icon",O=t.items&&b.getJSXIcon(n.submenuIcon||e.createElement(y,{className:P}),{className:P},{props:n.menuProps}),C=T(t),H=e.createElement("a",{href:p||"#",className:S,target:s,role:"menuitem","aria-haspopup":null!=c,onClick:function(e){return E(e,t)},onKeyDown:function(e){return I(e,t)},"aria-disabled":i},x,N,O,e.createElement(v,null));d&&(H=m.getJSXElement(d,t,{onClick:function(e){return E(e,t)},onKeyDown:function(e){return I(e,t)},className:S,labelClassName:"p-menuitem-text",iconClassName:k,submenuIconClassName:P,element:H,props:n,active:w,disabled:i}));return e.createElement("li",{key:g,id:t.id,className:M,style:o,onMouseEnter:function(e){return h(e,t)},role:"none"},H,C)},C=function(e,n){return e.separator?N(n):O(e,n)},H=f({"p-submenu-list":!n.root}),A=n.model?n.model.map(C):null;return e.createElement("ul",{ref:c,className:H,role:n.root?"menubar":"menu","aria-orientation":"horizontal"},A)}));P.displayName="TieredMenuSub";var T=e.memo(e.forwardRef((function(r,o){var m=N.getProps(r),b=x(e.useState(!m.popup),2),v=b[0],y=b[1],I=x(e.useState(null),2),w=I[0],M=I[1],S=e.useRef(null),k=e.useRef(null),T=e.useRef(null),O=l("screen and (max-width: ".concat(m.breakpoint,")"),!!m.breakpoint),C=x(a({target:k,overlay:S,listener:function(e,n){n.valid&&K(e)},when:v}),2),H=C[0],A=C[1],D=function(e){m.popup&&s.emit("overlay-click",{originalEvent:e,target:k.current})},j=function(e){m.popup&&(v?K(e):R(e))},R=function(e){k.current=e.currentTarget,y(!0),m.onShow&&m.onShow(e)},K=function(e){m.popup&&(k.current=e.currentTarget,y(!1),m.onHide&&m.onHide(e))},W=function(){m.popup&&O&&d.absolutePosition(S.current,k.current)},Z=function(){if(!T.current){T.current=d.createInlineStyle(n.nonce);var e="".concat(w),t="\n@media screen and (max-width: ".concat(m.breakpoint,") {\n    .p-tieredmenu[").concat(e,"] > ul {\n        max-height: ").concat(m.scrollHeight,";\n        overflow: ").concat(m.scrollHeight?"auto":"",";\n    }\n\n    .p-tieredmenu[").concat(e,"] .p-submenu-list {\n        position: relative;\n    }\n\n    .p-tieredmenu[").concat(e,"] .p-menuitem-active > .p-submenu-list {\n        left: 0 !important;\n        box-shadow: none;\n        border-radius: 0;\n        padding: 0 0 0 calc(var(--inline-spacing) * 2); /* @todo */\n    }\n\n    .p-tieredmenu[").concat(e,"] .p-menuitem-active > .p-menuitem-link > .p-submenu-icon {\n        transform: rotate(-180deg);\n    }\n\n    .p-tieredmenu[").concat(e,'] .p-submenu-icon:before {\n        content: "\\e930";\n    }\n\n    ').concat(m.popup?"":".p-tieredmenu[".concat(e,"] { width: 100%; }"),"\n}\n");T.current.innerHTML=t}},L=function(){T.current=d.removeInlineStyle(T.current)},_=function(){m.autoZIndex&&h.set("menu",S.current,n.autoZIndex,m.baseZIndex||n.zIndex.menu),d.absolutePosition(S.current,k.current),w&&m.breakpoint&&(S.current.setAttribute(w,""),Z())},J=function(){H()},X=function(){k.current=null,A()},z=function(){h.clear(S.current),L()};i((function(){m.breakpoint&&!w&&M(g())})),u((function(){return w&&S.current&&(S.current.setAttribute(w,""),Z()),function(){L()}}),[w,m.breakpoint]),c((function(){h.clear(S.current)})),e.useImperativeHandle(o,(function(){return{props:m,toggle:j,show:R,hide:K,getElement:function(){return S.current}}}));var U,V,Y=(U=N.getOtherProps(m),V=f("p-tieredmenu p-component",{"p-tieredmenu-overlay":m.popup,"p-input-filled":"filled"===n.inputStyle,"p-ripple-disabled":!1===n.ripple},m.className),e.createElement(t,{nodeRef:S,classNames:"p-connected-overlay",in:v,timeout:{enter:120,exit:100},options:m.transitionOptions,unmountOnExit:!0,onEnter:_,onEntered:J,onExit:X,onExited:z},e.createElement("div",E({ref:S,id:m.id,className:V,style:m.style},U,{onClick:D}),e.createElement(P,{menuProps:m,model:m.model,root:!0,popup:m.popup,onHide:K,isMobileMode:O,onItemToggle:W,submenuIcon:m.submenuIcon}))));return m.popup?e.createElement(p,{element:Y,appendTo:m.appendTo}):Y})));T.displayName="TieredMenu";export{T as TieredMenu};
+import*as e from"react";import n,{PrimeReactContext as t}from"primereact/api";import{CSSTransition as r}from"primereact/csstransition";import{useEventListener as o,useResizeListener as i,useMountEffect as u,useUpdateEffect as l,useMatchMedia as a,useOverlayListener as c,useUnmountEffect as p}from"primereact/hooks";import{OverlayService as s}from"primereact/overlayservice";import{Portal as m}from"primereact/portal";import{classNames as f,mergeProps as d,DomHandler as b,IconUtils as v,ObjectUtils as y,UniqueComponentId as g,ZIndexUtils as h}from"primereact/utils";import{ComponentBase as w}from"primereact/componentbase";import{Ripple as S}from"primereact/ripple";import{AngleRightIcon as E}from"primereact/icons/angleright";function I(e){if(Array.isArray(e))return e}function O(e,n){var t=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=t){var r,o,i,u,l=[],a=!0,c=!1;try{if(i=(t=t.call(e)).next,0===n){if(Object(t)!==t)return;a=!1}else for(;!(a=(r=i.call(t)).done)&&(l.push(r.value),l.length!==n);a=!0);}catch(e){c=!0,o=e}finally{try{if(!a&&null!=t.return&&(u=t.return(),Object(u)!==u))return}finally{if(c)throw o}}return l}}function x(e,n){(null==n||n>e.length)&&(n=e.length);for(var t=0,r=new Array(n);t<n;t++)r[t]=e[t];return r}function M(e,n){if(e){if("string"==typeof e)return x(e,n);var t=Object.prototype.toString.call(e).slice(8,-1);return"Object"===t&&e.constructor&&(t=e.constructor.name),"Map"===t||"Set"===t?Array.from(e):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?x(e,n):void 0}}function P(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function k(e,n){return I(e)||O(e,n)||M(e,n)||P()}var T=w.extend({defaultProps:{__TYPE:"TieredMenu",id:null,model:null,popup:!1,style:null,className:null,autoZIndex:!0,baseZIndex:0,breakpoint:void 0,scrollHeight:"400px",appendTo:null,transitionOptions:null,onShow:null,onHide:null,submenuIcon:null,children:void 0}});function j(e){return j="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},j(e)}function N(e,n){if("object"!==j(e)||null===e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var r=t.call(e,n||"default");if("object"!==j(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===n?String:Number)(e)}function C(e){var n=N(e,"string");return"symbol"===j(n)?n:String(n)}function D(e,n,t){return(n=C(n))in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function H(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function A(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?H(Object(t),!0).forEach((function(n){D(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):H(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}var R=e.memo((function(n){var t=k(e.useState(null),2),r=t[0],a=t[1],c=e.useRef(null),p=function(e,t){return n.ptm(t,{context:{active:r===e}})},s=k(o({type:"click",listener:function(e){n.isMobileMode||!c.current||c.current.contains(e.target)||a(null)}}),1)[0],m=k(i({listener:function(){!n.isMobileMode&&a(null)}}),1)[0],g=function(){if(c.current){var e=c.current.parentElement,n=b.getOffset(e),t=b.getViewport(),r=c.current.offsetParent?c.current.offsetWidth:b.getHiddenElementOuterWidth(c.current),o=b.getOuterWidth(e.children[0]),i=parseInt(n.top,10)+c.current.offsetHeight-b.getWindowScrollTop();c.current.style.top=i>t.height?t.height-i+"px":"0px",parseInt(n.left,10)+o+r>t.width-b.calculateScrollbarWidth()&&b.addClass(c.current,"p-submenu-list-flipped")}},h=function(e,t){t.disabled||n.isMobileMode?e.preventDefault():n.root?(r||n.popup)&&a(t):a(t)},w=function(e,t){t.disabled?e.preventDefault():(t.url||e.preventDefault(),t.command&&t.command({originalEvent:e,item:t}),(n.root||n.isMobileMode)&&t.items&&a(r&&t===r?null:t),t.items||P(e))},I=function(e,t){var r=e.currentTarget.parentElement;switch(e.which){case 40:var o=x(r);o&&o.children[0].focus(),e.preventDefault();break;case 38:var i=M(r);i&&i.children[0].focus(),e.preventDefault();break;case 39:t.items&&(a(t),setTimeout((function(){r.children[1].children[0].children[0].focus()}),50)),e.preventDefault()}n.onKeyDown&&n.onKeyDown(e,r)},O=function(e,n){37===e.which&&(a(null),n.parentElement.previousElementSibling.focus())},x=function e(n){var t=n.nextElementSibling;return t?b.hasClass(t,"p-disabled")||!b.hasClass(t,"p-menuitem")?e(t):t:null},M=function e(n){var t=n.previousElementSibling;return t?b.hasClass(t,"p-disabled")||!b.hasClass(t,"p-menuitem")?e(t):t:null},P=function(e){n.isMobileMode&&!n.popup||(a(null),n.onLeafClick&&n.onLeafClick(e),n.onHide&&n.onHide(e))};u((function(){s(),m()})),l((function(){n.parentActive||a(null),n.root||!n.parentActive||n.isMobileMode||g()}),[n.parentActive]),l((function(){n.onItemToggle&&n.onItemToggle()}),[r]);var T=function(t){var r=d({key:"separator_"+t,className:"p-menu-separator",role:"separator"},n.ptm("separator"));return e.createElement("li",r)},j=function(t){return t.items?e.createElement(R,{menuProps:n.menuProps,model:t.items,onLeafClick:P,popup:n.popup,onKeyDown:O,parentActive:t===r,isMobileMode:n.isMobileMode,onItemToggle:n.onItemToggle,submenuIcon:n.submenuIcon,ptm:n.ptm}):null},N=function(t,o){if(!1===t.visible)return null;var i=t.style,u=t.disabled,l=t.icon,a=t.label,c=t.items,s=t.target,m=t.url,b=t.template,g=a+"_"+o,O=r===t,x=f("p-menuitem",{"p-menuitem-active":O},t.className),M=f("p-menuitem-link",{"p-disabled":u}),P=f("p-menuitem-icon",l),k=d({className:P},p(t,"icon")),T=v.getJSXIcon(l,A({},k),{props:n.menuProps}),N=d({className:"p-menuitem-text"},p(t,"label")),C=a&&e.createElement("span",N,a),D="p-submenu-icon",H=d({className:D},p(t,"submenuIcon")),R=t.items&&v.getJSXIcon(n.submenuIcon||e.createElement(E,H),A({},H),{props:n.menuProps}),Z=j(t),K=d({href:m||"#",className:M,target:s,role:"menuitem","aria-haspopup":null!=c,onClick:function(e){return w(e,t)},onKeyDown:function(e){return I(e,t)},"aria-disabled":u},p(t,"action")),W=e.createElement("a",K,T,C,R,e.createElement(S,null));b&&(W=y.getJSXElement(b,t,{onClick:function(e){return w(e,t)},onKeyDown:function(e){return I(e,t)},className:M,labelClassName:"p-menuitem-text",iconClassName:P,submenuIconClassName:D,element:W,props:n,active:O,disabled:u}));var L=d({key:g,id:t.id,className:x,style:i,onMouseEnter:function(e){return h(e,t)},role:"none"},p(t,"menuitem"));return e.createElement("li",L,W,Z)},C=function(e,n){return e.separator?T(n):N(e,n)},D=f({"p-submenu-list":!n.root}),H=n.model?n.model.map(C):null,Z=d({ref:c,className:D,role:n.root?"menubar":"menu","aria-orientation":"horizontal"},n.ptm("menu"));return e.createElement("ul",Z,H)}));R.displayName="TieredMenuSub";var Z=e.memo(e.forwardRef((function(o,i){var v=e.useContext(t),y=T.getProps(o,v),w=k(e.useState(!y.popup),2),S=w[0],E=w[1],I=k(e.useState(null),2),O=I[0],x=I[1],M=T.setMetaData({props:y,state:{visible:S,attributeSelector:O}}).ptm,P=e.useRef(null),j=e.useRef(null),N=e.useRef(null),C=a("screen and (max-width: ".concat(y.breakpoint,")"),!!y.breakpoint),D=k(c({target:j,overlay:P,listener:function(e,n){n.valid&&L(e)},when:S}),2),H=D[0],A=D[1],Z=function(e){y.popup&&s.emit("overlay-click",{originalEvent:e,target:j.current})},K=function(e){y.popup&&(S?L(e):W(e))},W=function(e){j.current=e.currentTarget,E(!0),y.onShow&&y.onShow(e)},L=function(e){y.popup&&(j.current=e.currentTarget,E(!1),y.onHide&&y.onHide(e))},_=function(){y.popup&&C&&b.absolutePosition(P.current,j.current)},z=function(){if(!N.current){N.current=b.createInlineStyle(v&&v.nonce||n.nonce);var e="".concat(O),t="\n@media screen and (max-width: ".concat(y.breakpoint,") {\n    .p-tieredmenu[").concat(e,"] > ul {\n        max-height: ").concat(y.scrollHeight,";\n        overflow: ").concat(y.scrollHeight?"auto":"",";\n    }\n\n    .p-tieredmenu[").concat(e,"] .p-submenu-list {\n        position: relative;\n    }\n\n    .p-tieredmenu[").concat(e,"] .p-menuitem-active > .p-submenu-list {\n        left: 0 !important;\n        box-shadow: none;\n        border-radius: 0;\n        padding: 0 0 0 calc(var(--inline-spacing) * 2); /* @todo */\n    }\n\n    .p-tieredmenu[").concat(e,"] .p-menuitem-active > .p-menuitem-link > .p-submenu-icon {\n        transform: rotate(-180deg);\n    }\n\n    .p-tieredmenu[").concat(e,'] .p-submenu-icon:before {\n        content: "\\e930";\n    }\n\n    ').concat(y.popup?"":".p-tieredmenu[".concat(e,"] { width: 100%; }"),"\n}\n");N.current.innerHTML=t}},J=function(){N.current=b.removeInlineStyle(N.current)},X=function(){y.autoZIndex&&h.set("menu",P.current,v&&v.autoZIndex||n.autoZIndex,y.baseZIndex||v&&v.zIndex.menu||n.zIndex.menu),b.absolutePosition(P.current,j.current),O&&y.breakpoint&&(P.current.setAttribute(O,""),z())},U=function(){H()},V=function(){j.current=null,A()},Y=function(){h.clear(P.current),J()};u((function(){y.breakpoint&&!O&&x(g())})),l((function(){return O&&P.current&&(P.current.setAttribute(O,""),z()),function(){J()}}),[O,y.breakpoint]),p((function(){h.clear(P.current)})),e.useImperativeHandle(i,(function(){return{props:y,toggle:K,show:W,hide:L,getElement:function(){return P.current}}}));var $=function(){T.getOtherProps(y);var t=f("p-tieredmenu p-component",{"p-tieredmenu-overlay":y.popup,"p-input-filled":v&&"filled"===v.inputStyle||"filled"===n.inputStyle,"p-ripple-disabled":v&&!1===v.ripple||!1===n.ripple},y.className),o=d({ref:P,id:y.id,className:t,style:y.style,onClick:Z},T.getOtherProps(y),M("root"));return e.createElement(r,{nodeRef:P,classNames:"p-connected-overlay",in:S,timeout:{enter:120,exit:100},options:y.transitionOptions,unmountOnExit:!0,onEnter:X,onEntered:U,onExit:V,onExited:Y},e.createElement("div",o,e.createElement(R,{menuProps:y,model:y.model,root:!0,popup:y.popup,onHide:L,isMobileMode:C,onItemToggle:_,submenuIcon:y.submenuIcon,ptm:M})))}();return y.popup?e.createElement(m,{element:$,appendTo:y.appendTo}):$})));Z.displayName="TieredMenu";export{Z as TieredMenu};