primereact 10.2.1 → 10.3.1

package/dock/dock.esm.js

@@ -4,7 +4,7 @@ import { PrimeReactContext } from 'primereact/api';
 import { ComponentBase, useHandleStyle } from 'primereact/componentbase';
 import { useMountEffect } from 'primereact/hooks';
 import { Ripple } from 'primereact/ripple';
-import { classNames, UniqueComponentId, mergeProps, ObjectUtils, IconUtils } from 'primereact/utils';
+import { classNames, UniqueComponentId, mergeProps, ObjectUtils, DomHandler, IconUtils } from 'primereact/utils';
 
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -62,6 +62,37 @@ function _defineProperty(obj, key, value) {
   return obj;
 }
 
+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;
+}
+
+function _arrayWithoutHoles(arr) {
+  if (Array.isArray(arr)) return _arrayLikeToArray(arr);
+}
+
+function _iterableToArray(iter) {
+  if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
+}
+
+function _unsupportedIterableToArray(o, minLen) {
+  if (!o) return;
+  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+  var n = Object.prototype.toString.call(o).slice(8, -1);
+  if (n === "Object" && o.constructor) n = o.constructor.name;
+  if (n === "Map" || n === "Set") return Array.from(o);
+  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+}
+
+function _nonIterableSpread() {
+  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+
+function _toConsumableArray(arr) {
+  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
+}
+
 function _arrayWithHoles(arr) {
   if (Array.isArray(arr)) return arr;
 }
@@ -94,21 +125,6 @@ function _iterableToArrayLimit(r, l) {
   }
 }
 
-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;
-}
-
-function _unsupportedIterableToArray(o, minLen) {
-  if (!o) return;
-  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
-  var n = Object.prototype.toString.call(o).slice(8, -1);
-  if (n === "Object" && o.constructor) n = o.constructor.name;
-  if (n === "Map" || n === "Set") return Array.from(o);
-  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
-}
-
 function _nonIterableRest() {
   throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
@@ -127,15 +143,18 @@ var classes = {
   },
   menuitem: function menuitem(_ref2) {
     var currentIndexState = _ref2.currentIndexState,
-      index = _ref2.index;
+      index = _ref2.index,
+      active = _ref2.active;
     return classNames('p-dock-item', {
       'p-dock-item-second-prev': currentIndexState - 2 === index,
       'p-dock-item-prev': currentIndexState - 1 === index,
       'p-dock-item-current': currentIndexState === index,
       'p-dock-item-next': currentIndexState + 1 === index,
-      'p-dock-item-second-next': currentIndexState + 2 === index
+      'p-dock-item-second-next': currentIndexState + 2 === index,
+      'p-focus': active
     });
   },
+  content: 'p-menuitem-content',
   header: 'p-dock-header',
   menu: 'p-dock-list',
   footer: 'p-dock-footer',
@@ -145,9 +164,9 @@ var classes = {
       'p-dock-magnification': props.magnification
     });
   },
-  container: 'p-dock-container'
+  container: 'p-dock-list-container'
 };
-var styles = "\n@layer primereact {\n    .p-dock {\n        position: absolute;\n        z-index: 1;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        pointer-events: none;\n    }\n    \n    .p-dock-container {\n        display: flex;\n        pointer-events: auto;\n    }\n    \n    .p-dock-list {\n        margin: 0;\n        padding: 0;\n        list-style: none;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        pointer-events: auto;\n    }\n    \n    .p-dock-magnification .p-dock-item {\n        transition: all .2s cubic-bezier(0.4, 0, 0.2, 1);\n        will-change: transform;\n    }\n    \n    .p-dock-action {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        position: relative;\n        overflow: hidden;\n        cursor: default;\n    }\n    \n    .p-dock-magnification .p-dock-item-second-prev,\n    .p-dock-magnification .p-dock-item-second-next {\n        transform: scale(1.2);\n    }\n    \n    .p-dock-magnification .p-dock-item-prev,\n    .p-dock-magnification .p-dock-item-next {\n        transform: scale(1.4);\n    }\n    \n    .p-dock-magnification .p-dock-item-current {\n        transform: scale(1.6);\n        z-index: 1;\n    }\n    \n    /* Position */\n    /* top */\n    .p-dock-top {\n        left: 0;\n        top: 0;\n        width: 100%;\n    }\n    \n    .p-dock-top.p-dock-magnification .p-dock-item {\n        transform-origin: center top;\n    }\n    \n    .p-dock-top .p-dock-container {\n        flex-direction: column-reverse;\n    }\n    \n    /* bottom */\n    .p-dock-bottom {\n        left: 0;\n        bottom: 0;\n        width: 100%;\n    }\n    \n    .p-dock-bottom.p-dock-magnification .p-dock-item {\n        transform-origin: center bottom;\n    }\n    \n    .p-dock-bottom .p-dock-container {\n        flex-direction: column;\n    }\n    \n    /* right */\n    .p-dock-right {\n        right: 0;\n        top: 0;\n        height: 100%;\n    }\n    \n    .p-dock-right.p-dock-magnification .p-dock-item {\n        transform-origin: center right;\n    }\n    \n    .p-dock-right .p-dock-list {\n        flex-direction: column;\n    }\n    \n    /* left */\n    .p-dock-left {\n        left: 0;\n        top: 0;\n        height: 100%;\n    }\n    \n    .p-dock-left.p-dock-magnification .p-dock-item {\n        transform-origin: center left;\n    }\n    \n    .p-dock-left .p-dock-list {\n        flex-direction: column;\n    }\n    \n    .p-dock-left .p-dock-container {\n        flex-direction: row-reverse;\n    }\n}\n";
+var styles = "\n@layer primereact {\n    .p-dock {\n        position: absolute;\n        z-index: 1;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        pointer-events: none;\n    }\n\n    .p-dock-list-container {\n        display: flex;\n        pointer-events: auto;\n    }\n\n    .p-dock-list {\n        margin: 0;\n        padding: 0;\n        list-style: none;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        pointer-events: auto;\n    }\n\n    .p-dock-magnification .p-dock-item {\n        transition: all .2s cubic-bezier(0.4, 0, 0.2, 1);\n        will-change: transform;\n    }\n\n    .p-dock-action {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        position: relative;\n        overflow: hidden;\n        cursor: default;\n    }\n\n    .p-dock-magnification .p-dock-item-second-prev,\n    .p-dock-magnification .p-dock-item-second-next {\n        transform: scale(1.2);\n    }\n\n    .p-dock-magnification .p-dock-item-prev,\n    .p-dock-magnification .p-dock-item-next {\n        transform: scale(1.4);\n    }\n\n    .p-dock-magnification .p-dock-item-current {\n        transform: scale(1.6);\n        z-index: 1;\n    }\n\n    /* Position */\n    /* top */\n    .p-dock-top {\n        left: 0;\n        top: 0;\n        width: 100%;\n    }\n\n    .p-dock-top.p-dock-magnification .p-dock-item {\n        transform-origin: center top;\n    }\n\n    .p-dock-top .p-dock-list-container {\n        flex-direction: column-reverse;\n    }\n\n    /* bottom */\n    .p-dock-bottom {\n        left: 0;\n        bottom: 0;\n        width: 100%;\n    }\n\n    .p-dock-bottom.p-dock-magnification .p-dock-item {\n        transform-origin: center bottom;\n    }\n\n    .p-dock-bottom .p-dock-list-container {\n        flex-direction: column;\n    }\n\n    /* right */\n    .p-dock-right {\n        right: 0;\n        top: 0;\n        height: 100%;\n    }\n\n    .p-dock-right.p-dock-magnification .p-dock-item {\n        transform-origin: center right;\n    }\n\n    .p-dock-right .p-dock-list {\n        flex-direction: column;\n    }\n\n    /* left */\n    .p-dock-left {\n        left: 0;\n        top: 0;\n        height: 100%;\n    }\n\n    .p-dock-left.p-dock-magnification .p-dock-item {\n        transform-origin: center left;\n    }\n\n    .p-dock-left .p-dock-list {\n        flex-direction: column;\n    }\n\n    .p-dock-left .p-dock-list-container {\n        flex-direction: row-reverse;\n    }\n}\n";
 var DockBase = ComponentBase.extend({
   defaultProps: {
     __TYPE: 'Dock',
@@ -155,6 +174,9 @@ var DockBase = ComponentBase.extend({
     style: null,
     className: null,
     model: null,
+    tabIndex: 0,
+    onFocus: null,
+    onBlur: null,
     position: 'bottom',
     magnification: true,
     header: null,
@@ -174,12 +196,20 @@ var Dock = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inPr
     _React$useState2 = _slicedToArray(_React$useState, 2),
     currentIndexState = _React$useState2[0],
     setCurrentIndexState = _React$useState2[1];
+  var _React$useState3 = React.useState(false),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    focused = _React$useState4[0],
+    setFocused = _React$useState4[1];
+  var _React$useState5 = React.useState(-1),
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    focusedOptionIndex = _React$useState6[0],
+    setFocusedOptionIndex = _React$useState6[1];
   var context = React.useContext(PrimeReactContext);
   var props = DockBase.getProps(inProps, context);
-  var _React$useState3 = React.useState(props.id),
-    _React$useState4 = _slicedToArray(_React$useState3, 2),
-    idState = _React$useState4[0],
-    setIdState = _React$useState4[1];
+  var _React$useState7 = React.useState(props.id),
+    _React$useState8 = _slicedToArray(_React$useState7, 2),
+    idState = _React$useState8[0],
+    setIdState = _React$useState8[1];
   var _DockBase$setMetaData = DockBase.setMetaData({
       props: props,
       state: {
@@ -191,6 +221,7 @@ var Dock = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inPr
     cx = _DockBase$setMetaData.cx,
     isUnstyled = _DockBase$setMetaData.isUnstyled;
   var elementRef = React.useRef(null);
+  var listRef = React.useRef(null);
   useHandleStyle(DockBase.css.styles, isUnstyled, {
     name: 'dock'
   });
@@ -217,6 +248,90 @@ var Dock = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inPr
     }
     e.preventDefault();
   };
+  var onListFocus = function onListFocus(event) {
+    setFocused(true);
+    changeFocusedOptionIndex(0);
+    props.onFocus && props.onFocus(event);
+  };
+  var onListBlur = function onListBlur(event) {
+    setFocused(false);
+    setFocusedOptionIndex(-1);
+    props.onBlur && props.onBlur(event);
+  };
+  var onListKeyDown = function onListKeyDown(event) {
+    switch (event.code) {
+      case 'ArrowDown':
+        if (props.position === 'left' || props.position === 'right') onArrowDownKey();
+        event.preventDefault();
+        break;
+      case 'ArrowUp':
+        if (props.position === 'left' || props.position === 'right') onArrowUpKey();
+        event.preventDefault();
+        break;
+      case 'ArrowRight':
+        if (props.position === 'top' || props.position === 'bottom') onArrowDownKey();
+        event.preventDefault();
+        break;
+      case 'ArrowLeft':
+        if (props.position === 'top' || props.position === 'bottom') onArrowUpKey();
+        event.preventDefault();
+        break;
+      case 'Home':
+        onHomeKey();
+        event.preventDefault();
+        break;
+      case 'End':
+        onEndKey();
+        event.preventDefault();
+        break;
+      case 'Enter':
+      case 'Space':
+        onSpaceKey();
+        event.preventDefault();
+        break;
+    }
+  };
+  var onArrowDownKey = function onArrowDownKey() {
+    var optionIndex = findNextOptionIndex(focusedOptionIndex);
+    changeFocusedOptionIndex(optionIndex);
+  };
+  var onArrowUpKey = function onArrowUpKey() {
+    var optionIndex = findPrevOptionIndex(focusedOptionIndex);
+    changeFocusedOptionIndex(optionIndex);
+  };
+  var onHomeKey = function onHomeKey() {
+    changeFocusedOptionIndex(0);
+  };
+  var onEndKey = function onEndKey() {
+    changeFocusedOptionIndex(DomHandler.find(listRef.current, 'li[data-pc-section="menuitem"][data-p-disabled="false"]').length - 1);
+  };
+  var onSpaceKey = function onSpaceKey() {
+    var element = DomHandler.findSingle(listRef.current, "li[id=\"".concat("".concat(focusedOptionIndex), "\"]"));
+    var anchorElement = element && DomHandler.findSingle(element, '[data-pc-section="action"]');
+    anchorElement ? anchorElement.click() : element && element.click();
+  };
+  var findNextOptionIndex = function findNextOptionIndex(index) {
+    var menuitems = DomHandler.find(listRef.current, 'li[data-pc-section="menuitem"][data-p-disabled="false"]');
+    var matchedOptionIndex = _toConsumableArray(menuitems).findIndex(function (link) {
+      return link.id === index;
+    });
+    return matchedOptionIndex > -1 ? matchedOptionIndex + 1 : 0;
+  };
+  var findPrevOptionIndex = function findPrevOptionIndex(index) {
+    var menuitems = DomHandler.find(listRef.current, 'li[data-pc-section="menuitem"][data-p-disabled="false"]');
+    var matchedOptionIndex = _toConsumableArray(menuitems).findIndex(function (link) {
+      return link.id === index;
+    });
+    return matchedOptionIndex > -1 ? matchedOptionIndex - 1 : 0;
+  };
+  var changeFocusedOptionIndex = function changeFocusedOptionIndex(index) {
+    var menuitems = DomHandler.find(listRef.current, 'li[data-pc-section="menuitem"][data-p-disabled="false"]');
+    var order = index >= menuitems.length ? menuitems.length - 1 : index < 0 ? 0 : index;
+    setFocusedOptionIndex(menuitems[order].getAttribute('id'));
+  };
+  var isItemActive = function isItemActive(id) {
+    return id === focusedOptionIndex;
+  };
   var createItem = function createItem(item, index) {
     if (item.visible === false) {
       return null;
@@ -240,10 +355,14 @@ var Dock = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inPr
     });
     var actionProps = mergeProps({
       href: url || '#',
-      role: 'menuitem',
+      onFocus: function onFocus(event) {
+        return event.stopPropagation();
+      },
       className: cx('action', {
         disabled: disabled
       }),
+      'aria-hidden': 'true',
+      tabIndex: -1,
       target: target,
       'data-pr-tooltip': label,
       onClick: function onClick(e) {
@@ -258,25 +377,35 @@ var Dock = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inPr
         },
         className: contentClassName,
         iconClassName: iconClassName,
+        'aria-hidden': 'true',
+        tabIndex: -1,
         element: content,
         props: props,
         index: index
       };
       content = ObjectUtils.getJSXElement(template, item, defaultContentOptions);
     }
-    var menuitemProps = mergeProps({
+    var contentProps = mergeProps({
+      className: cx('content')
+    }, getPTOptions('content', item, index));
+    var active = isItemActive(key);
+    var menuitemProps = mergeProps(_defineProperty(_defineProperty({
       id: key,
+      role: 'menuitem',
       key: key,
+      'aria-label': label,
+      'aria-disabled': disabled,
+      'data-p-focused': active,
+      'data-p-disabled': disabled || false,
       className: cx('menuitem', {
         currentIndexState: currentIndexState,
-        index: index
-      }),
-      role: 'none',
-      onMouseEnter: function onMouseEnter() {
-        return onItemMouseEnter(index);
-      }
-    }, getPTOptions('menuitem', item, index));
-    return /*#__PURE__*/React.createElement("li", menuitemProps, content);
+        index: index,
+        active: isItemActive(key)
+      })
+    }, "role", 'none'), "onMouseEnter", function onMouseEnter() {
+      return onItemMouseEnter(index);
+    }), getPTOptions('menuitem', item, index));
+    return /*#__PURE__*/React.createElement("li", menuitemProps, /*#__PURE__*/React.createElement("div", contentProps, content));
   };
   var createItems = function createItems() {
     return props.model ? props.model.map(createItem) : null;
@@ -296,8 +425,15 @@ var Dock = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inPr
   var createList = function createList() {
     var items = createItems();
     var menuProps = mergeProps({
+      ref: listRef,
       className: cx('menu'),
       role: 'menu',
+      'aria-orientation': props.position === 'bottom' || props.position === 'top' ? 'horizontal' : 'vertical',
+      'aria-activedescendant': focused ? focusedOptionIndex !== -1 ? focusedOptionIndex : null : undefined,
+      tabIndex: props.tabIndex || 0,
+      onFocus: onListFocus,
+      onBlur: onListBlur,
+      onKeyDown: onListKeyDown,
       onMouseLeave: onListMouseLeave
     }, ptm('menu'));
     return /*#__PURE__*/React.createElement("ul", menuProps, items);

package/dock/dock.esm.min.js

@@ -1 +1 @@
-import*as n from"react";import{PrimeReactContext as e}from"primereact/api";import{ComponentBase as t,useHandleStyle as o}from"primereact/componentbase";import{useMountEffect as r}from"primereact/hooks";import{Ripple as i}from"primereact/ripple";import{classNames as c,UniqueComponentId as a,mergeProps as l,ObjectUtils as p,IconUtils as m}from"primereact/utils";function u(){return u=Object.assign?Object.assign.bind():function(n){for(var e=1;e<arguments.length;e++){var t=arguments[e];for(var o in t)Object.prototype.hasOwnProperty.call(t,o)&&(n[o]=t[o])}return n},u.apply(this,arguments)}function s(n){return s="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(n){return typeof n}:function(n){return n&&"function"==typeof Symbol&&n.constructor===Symbol&&n!==Symbol.prototype?"symbol":typeof n},s(n)}function d(n,e){if("object"!==s(n)||null===n)return n;var t=n[Symbol.toPrimitive];if(void 0!==t){var o=t.call(n,e||"default");if("object"!==s(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===e?String:Number)(n)}function f(n){var e=d(n,"string");return"symbol"===s(e)?e:String(e)}function k(n){if(Array.isArray(n))return n}function y(n,e){var t=null==n?null:"undefined"!=typeof Symbol&&n[Symbol.iterator]||n["@@iterator"];if(null!=t){var o,r,i,c,a=[],l=!0,p=!1;try{if(i=(t=t.call(n)).next,0===e){if(Object(t)!==t)return;l=!1}else for(;!(l=(o=i.call(t)).done)&&(a.push(o.value),a.length!==e);l=!0);}catch(n){p=!0,r=n}finally{try{if(!l&&null!=t.return&&(c=t.return(),Object(c)!==c))return}finally{if(p)throw r}}return a}}function b(n,e){(null==e||e>n.length)&&(e=n.length);for(var t=0,o=new Array(e);t<e;t++)o[t]=n[t];return o}function g(n,e){if(n){if("string"==typeof n)return b(n,e);var t=Object.prototype.toString.call(n).slice(8,-1);return"Object"===t&&n.constructor&&(t=n.constructor.name),"Map"===t||"Set"===t?Array.from(n):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?b(n,e):void 0}}function v(){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 h(n,e){return k(n)||y(n,e)||g(n,e)||v()}var x=t.extend({defaultProps:{__TYPE:"Dock",id:null,style:null,className:null,model:null,position:"bottom",magnification:!0,header:null,footer:null,children:void 0},css:{classes:{icon:"p-dock-action-icon",action:function(n){return c("p-dock-action",{"p-disabled":n.disabled})},menuitem:function(n){var e=n.currentIndexState,t=n.index;return c("p-dock-item",{"p-dock-item-second-prev":e-2===t,"p-dock-item-prev":e-1===t,"p-dock-item-current":e===t,"p-dock-item-next":e+1===t,"p-dock-item-second-next":e+2===t})},header:"p-dock-header",menu:"p-dock-list",footer:"p-dock-footer",root:function(n){var e=n.props;return c("p-dock p-component p-dock-".concat(e.position),{"p-dock-magnification":e.magnification})},container:"p-dock-container"},styles:"\n@layer primereact {\n    .p-dock {\n        position: absolute;\n        z-index: 1;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        pointer-events: none;\n    }\n    \n    .p-dock-container {\n        display: flex;\n        pointer-events: auto;\n    }\n    \n    .p-dock-list {\n        margin: 0;\n        padding: 0;\n        list-style: none;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        pointer-events: auto;\n    }\n    \n    .p-dock-magnification .p-dock-item {\n        transition: all .2s cubic-bezier(0.4, 0, 0.2, 1);\n        will-change: transform;\n    }\n    \n    .p-dock-action {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        position: relative;\n        overflow: hidden;\n        cursor: default;\n    }\n    \n    .p-dock-magnification .p-dock-item-second-prev,\n    .p-dock-magnification .p-dock-item-second-next {\n        transform: scale(1.2);\n    }\n    \n    .p-dock-magnification .p-dock-item-prev,\n    .p-dock-magnification .p-dock-item-next {\n        transform: scale(1.4);\n    }\n    \n    .p-dock-magnification .p-dock-item-current {\n        transform: scale(1.6);\n        z-index: 1;\n    }\n    \n    /* Position */\n    /* top */\n    .p-dock-top {\n        left: 0;\n        top: 0;\n        width: 100%;\n    }\n    \n    .p-dock-top.p-dock-magnification .p-dock-item {\n        transform-origin: center top;\n    }\n    \n    .p-dock-top .p-dock-container {\n        flex-direction: column-reverse;\n    }\n    \n    /* bottom */\n    .p-dock-bottom {\n        left: 0;\n        bottom: 0;\n        width: 100%;\n    }\n    \n    .p-dock-bottom.p-dock-magnification .p-dock-item {\n        transform-origin: center bottom;\n    }\n    \n    .p-dock-bottom .p-dock-container {\n        flex-direction: column;\n    }\n    \n    /* right */\n    .p-dock-right {\n        right: 0;\n        top: 0;\n        height: 100%;\n    }\n    \n    .p-dock-right.p-dock-magnification .p-dock-item {\n        transform-origin: center right;\n    }\n    \n    .p-dock-right .p-dock-list {\n        flex-direction: column;\n    }\n    \n    /* left */\n    .p-dock-left {\n        left: 0;\n        top: 0;\n        height: 100%;\n    }\n    \n    .p-dock-left.p-dock-magnification .p-dock-item {\n        transform-origin: center left;\n    }\n    \n    .p-dock-left .p-dock-list {\n        flex-direction: column;\n    }\n    \n    .p-dock-left .p-dock-container {\n        flex-direction: row-reverse;\n    }\n}\n"}});function O(n,e){var t=Object.keys(n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(n);e&&(o=o.filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),t.push.apply(t,o)}return t}function j(n){for(var e=1;e<arguments.length;e++){var t=null!=arguments[e]?arguments[e]:{};e%2?O(Object(t),!0).forEach((function(e){var o,r,i;o=n,i=t[e],(r=f(r=e))in o?Object.defineProperty(o,r,{value:i,enumerable:!0,configurable:!0,writable:!0}):o[r]=i})):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(t)):O(Object(t)).forEach((function(e){Object.defineProperty(n,e,Object.getOwnPropertyDescriptor(t,e))}))}return n}var S=n.memo(n.forwardRef((function(t,s){var d=h(n.useState(-3),2),f=d[0],k=d[1],y=n.useContext(e),b=x.getProps(t,y),g=h(n.useState(b.id),2),v=g[0],O=g[1],S=x.setMetaData({props:b,state:{id:v,currentIndex:f}}),w=S.ptm,E=S.cx,P=S.isUnstyled,N=n.useRef(null);o(x.css.styles,P,{name:"dock"});var D=function(n,e,t){return w(n,{context:{index:t,item:e}})},I=function(){k(-3)},A=function(n){k(n)},C=function(n,e){e.command&&e.command({originalEvent:n,item:e}),n.preventDefault()},J=function(e,t){if(!1===e.visible)return null;var o=e.disabled,r=e.icon,a=e.label,u=e.template,s=e.url,d=e.target,k=e.id||v+"_"+t,y=c("p-dock-action",{"p-disabled":o}),g=c("p-dock-action-icon",r),h=l({className:E("icon")},D("icon",e,t)),x=m.getJSXIcon(r,j({},h),{props:b}),O=l({href:s||"#",role:"menuitem",className:E("action",{disabled:o}),target:d,"data-pr-tooltip":a,onClick:function(n){return C(n,e)}},D("action",e,t)),S=n.createElement("a",O,x,n.createElement(i,null));u&&(S=p.getJSXElement(u,e,{onClick:function(n){return C(n,e)},className:y,iconClassName:g,element:S,props:b,index:t}));var w=l({id:k,key:k,className:E("menuitem",{currentIndexState:f,index:t}),role:"none",onMouseEnter:function(){return A(t)}},D("menuitem",e,t));return n.createElement("li",w,S)};r((function(){v||O(a())})),n.useImperativeHandle(s,(function(){return{props:b,getElement:function(){return N.current}}}));var M,X,z=function(){if(b.header){var e=p.getJSXElement(b.header,{props:b}),t=l({className:E("header")},w("header"));return n.createElement("div",t,e)}return null}(),T=(M=b.model?b.model.map(J):null,X=l({className:E("menu"),role:"menu",onMouseLeave:I},w("menu")),n.createElement("ul",X,M)),_=function(){if(b.footer){var e=p.getJSXElement(b.footer,{props:b}),t=l({className:E("footer")},w("footer"));return n.createElement("div",t,e)}return null}(),R=l({className:c(b.className,E("root")),style:b.style},x.getOtherProps(b),w("root")),U=l({className:E("container")},w("container"));return n.createElement("div",u({id:b.id,ref:N},R),n.createElement("div",U,z,T,_))})));S.displayName="Dock";export{S as Dock};
+import*as n from"react";import{PrimeReactContext as e}from"primereact/api";import{ComponentBase as t,useHandleStyle as o}from"primereact/componentbase";import{useMountEffect as r}from"primereact/hooks";import{Ripple as i}from"primereact/ripple";import{classNames as c,UniqueComponentId as a,mergeProps as l,ObjectUtils as u,DomHandler as s,IconUtils as p}from"primereact/utils";function d(){return d=Object.assign?Object.assign.bind():function(n){for(var e=1;e<arguments.length;e++){var t=arguments[e];for(var o in t)Object.prototype.hasOwnProperty.call(t,o)&&(n[o]=t[o])}return n},d.apply(this,arguments)}function f(n){return f="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(n){return typeof n}:function(n){return n&&"function"==typeof Symbol&&n.constructor===Symbol&&n!==Symbol.prototype?"symbol":typeof n},f(n)}function m(n,e){if("object"!==f(n)||null===n)return n;var t=n[Symbol.toPrimitive];if(void 0!==t){var o=t.call(n,e||"default");if("object"!==f(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===e?String:Number)(n)}function b(n){var e=m(n,"string");return"symbol"===f(e)?e:String(e)}function v(n,e,t){return(e=b(e))in n?Object.defineProperty(n,e,{value:t,enumerable:!0,configurable:!0,writable:!0}):n[e]=t,n}function k(n,e){(null==e||e>n.length)&&(e=n.length);for(var t=0,o=new Array(e);t<e;t++)o[t]=n[t];return o}function y(n){if(Array.isArray(n))return k(n)}function g(n){if("undefined"!=typeof Symbol&&null!=n[Symbol.iterator]||null!=n["@@iterator"])return Array.from(n)}function h(n,e){if(n){if("string"==typeof n)return k(n,e);var t=Object.prototype.toString.call(n).slice(8,-1);return"Object"===t&&n.constructor&&(t=n.constructor.name),"Map"===t||"Set"===t?Array.from(n):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?k(n,e):void 0}}function x(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function S(n){return y(n)||g(n)||h(n)||x()}function w(n){if(Array.isArray(n))return n}function O(n,e){var t=null==n?null:"undefined"!=typeof Symbol&&n[Symbol.iterator]||n["@@iterator"];if(null!=t){var o,r,i,c,a=[],l=!0,u=!1;try{if(i=(t=t.call(n)).next,0===e){if(Object(t)!==t)return;l=!1}else for(;!(l=(o=i.call(t)).done)&&(a.push(o.value),a.length!==e);l=!0);}catch(n){u=!0,r=n}finally{try{if(!l&&null!=t.return&&(c=t.return(),Object(c)!==c))return}finally{if(u)throw r}}return a}}function j(){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 E(n,e){return w(n)||O(n,e)||h(n,e)||j()}var P=t.extend({defaultProps:{__TYPE:"Dock",id:null,style:null,className:null,model:null,tabIndex:0,onFocus:null,onBlur:null,position:"bottom",magnification:!0,header:null,footer:null,children:void 0},css:{classes:{icon:"p-dock-action-icon",action:function(n){return c("p-dock-action",{"p-disabled":n.disabled})},menuitem:function(n){var e=n.currentIndexState,t=n.index;return c("p-dock-item",{"p-dock-item-second-prev":e-2===t,"p-dock-item-prev":e-1===t,"p-dock-item-current":e===t,"p-dock-item-next":e+1===t,"p-dock-item-second-next":e+2===t,"p-focus":n.active})},content:"p-menuitem-content",header:"p-dock-header",menu:"p-dock-list",footer:"p-dock-footer",root:function(n){var e=n.props;return c("p-dock p-component p-dock-".concat(e.position),{"p-dock-magnification":e.magnification})},container:"p-dock-list-container"},styles:"\n@layer primereact {\n    .p-dock {\n        position: absolute;\n        z-index: 1;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        pointer-events: none;\n    }\n\n    .p-dock-list-container {\n        display: flex;\n        pointer-events: auto;\n    }\n\n    .p-dock-list {\n        margin: 0;\n        padding: 0;\n        list-style: none;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        pointer-events: auto;\n    }\n\n    .p-dock-magnification .p-dock-item {\n        transition: all .2s cubic-bezier(0.4, 0, 0.2, 1);\n        will-change: transform;\n    }\n\n    .p-dock-action {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        position: relative;\n        overflow: hidden;\n        cursor: default;\n    }\n\n    .p-dock-magnification .p-dock-item-second-prev,\n    .p-dock-magnification .p-dock-item-second-next {\n        transform: scale(1.2);\n    }\n\n    .p-dock-magnification .p-dock-item-prev,\n    .p-dock-magnification .p-dock-item-next {\n        transform: scale(1.4);\n    }\n\n    .p-dock-magnification .p-dock-item-current {\n        transform: scale(1.6);\n        z-index: 1;\n    }\n\n    /* Position */\n    /* top */\n    .p-dock-top {\n        left: 0;\n        top: 0;\n        width: 100%;\n    }\n\n    .p-dock-top.p-dock-magnification .p-dock-item {\n        transform-origin: center top;\n    }\n\n    .p-dock-top .p-dock-list-container {\n        flex-direction: column-reverse;\n    }\n\n    /* bottom */\n    .p-dock-bottom {\n        left: 0;\n        bottom: 0;\n        width: 100%;\n    }\n\n    .p-dock-bottom.p-dock-magnification .p-dock-item {\n        transform-origin: center bottom;\n    }\n\n    .p-dock-bottom .p-dock-list-container {\n        flex-direction: column;\n    }\n\n    /* right */\n    .p-dock-right {\n        right: 0;\n        top: 0;\n        height: 100%;\n    }\n\n    .p-dock-right.p-dock-magnification .p-dock-item {\n        transform-origin: center right;\n    }\n\n    .p-dock-right .p-dock-list {\n        flex-direction: column;\n    }\n\n    /* left */\n    .p-dock-left {\n        left: 0;\n        top: 0;\n        height: 100%;\n    }\n\n    .p-dock-left.p-dock-magnification .p-dock-item {\n        transform-origin: center left;\n    }\n\n    .p-dock-left .p-dock-list {\n        flex-direction: column;\n    }\n\n    .p-dock-left .p-dock-list-container {\n        flex-direction: row-reverse;\n    }\n}\n"}});function D(n,e){var t=Object.keys(n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(n);e&&(o=o.filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),t.push.apply(t,o)}return t}function I(n){for(var e=1;e<arguments.length;e++){var t=null!=arguments[e]?arguments[e]:{};e%2?D(Object(t),!0).forEach((function(e){v(n,e,t[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(t)):D(Object(t)).forEach((function(e){Object.defineProperty(n,e,Object.getOwnPropertyDescriptor(t,e))}))}return n}var N=n.memo(n.forwardRef((function(t,f){var m=E(n.useState(-3),2),b=m[0],k=m[1],y=E(n.useState(!1),2),g=y[0],h=y[1],x=E(n.useState(-1),2),w=x[0],O=x[1],j=n.useContext(e),D=P.getProps(t,j),N=E(n.useState(D.id),2),A=N[0],C=N[1],F=P.setMetaData({props:D,state:{id:A,currentIndex:b}}),z=F.ptm,B=F.cx,J=F.isUnstyled,M=n.useRef(null),R=n.useRef(null);o(P.css.styles,J,{name:"dock"});var T=function(n,e,t){return z(n,{context:{index:t,item:e}})},X=function(){k(-3)},U=function(n){k(n)},_=function(n,e){e.command&&e.command({originalEvent:n,item:e}),n.preventDefault()},H=function(n){h(!0),Z(0),D.onFocus&&D.onFocus(n)},L=function(n){h(!1),O(-1),D.onBlur&&D.onBlur(n)},K=function(n){switch(n.code){case"ArrowDown":"left"!==D.position&&"right"!==D.position||Y(),n.preventDefault();break;case"ArrowUp":"left"!==D.position&&"right"!==D.position||$(),n.preventDefault();break;case"ArrowRight":"top"!==D.position&&"bottom"!==D.position||Y(),n.preventDefault();break;case"ArrowLeft":"top"!==D.position&&"bottom"!==D.position||$(),n.preventDefault();break;case"Home":q(),n.preventDefault();break;case"End":G(),n.preventDefault();break;case"Enter":case"Space":Q(),n.preventDefault()}},Y=function(){var n=V(w);Z(n)},$=function(){var n=W(w);Z(n)},q=function(){Z(0)},G=function(){Z(s.find(R.current,'li[data-pc-section="menuitem"][data-p-disabled="false"]').length-1)},Q=function(){var n=s.findSingle(R.current,'li[id="'.concat("".concat(w),'"]')),e=n&&s.findSingle(n,'[data-pc-section="action"]');e?e.click():n&&n.click()},V=function(n){var e=S(s.find(R.current,'li[data-pc-section="menuitem"][data-p-disabled="false"]')).findIndex((function(e){return e.id===n}));return e>-1?e+1:0},W=function(n){var e=S(s.find(R.current,'li[data-pc-section="menuitem"][data-p-disabled="false"]')).findIndex((function(e){return e.id===n}));return e>-1?e-1:0},Z=function(n){var e=s.find(R.current,'li[data-pc-section="menuitem"][data-p-disabled="false"]');O(e[n>=e.length?e.length-1:n<0?0:n].getAttribute("id"))},nn=function(n){return n===w},en=function(e,t){if(!1===e.visible)return null;var o=e.disabled,r=e.icon,a=e.label,s=e.template,d=e.url,f=e.target,m=e.id||A+"_"+t,k=c("p-dock-action",{"p-disabled":o}),y=c("p-dock-action-icon",r),g=l({className:B("icon")},T("icon",e,t)),h=p.getJSXIcon(r,I({},g),{props:D}),x=l({href:d||"#",onFocus:function(n){return n.stopPropagation()},className:B("action",{disabled:o}),"aria-hidden":"true",tabIndex:-1,target:f,"data-pr-tooltip":a,onClick:function(n){return _(n,e)}},T("action",e,t)),S=n.createElement("a",x,h,n.createElement(i,null));s&&(S=u.getJSXElement(s,e,{onClick:function(n){return _(n,e)},className:k,iconClassName:y,"aria-hidden":"true",tabIndex:-1,element:S,props:D,index:t}));var w=l({className:B("content")},T("content",e,t)),O=nn(m),j=l(v(v({id:m,role:"menuitem",key:m,"aria-label":a,"aria-disabled":o,"data-p-focused":O,"data-p-disabled":o||!1,className:B("menuitem",{currentIndexState:b,index:t,active:nn(m)})},"role","none"),"onMouseEnter",(function(){return U(t)})),T("menuitem",e,t));return n.createElement("li",j,n.createElement("div",w,S))};r((function(){A||C(a())})),n.useImperativeHandle(f,(function(){return{props:D,getElement:function(){return M.current}}}));var tn,on,rn=function(){if(D.header){var e=u.getJSXElement(D.header,{props:D}),t=l({className:B("header")},z("header"));return n.createElement("div",t,e)}return null}(),cn=(tn=D.model?D.model.map(en):null,on=l({ref:R,className:B("menu"),role:"menu","aria-orientation":"bottom"===D.position||"top"===D.position?"horizontal":"vertical","aria-activedescendant":g?-1!==w?w:null:void 0,tabIndex:D.tabIndex||0,onFocus:H,onBlur:L,onKeyDown:K,onMouseLeave:X},z("menu")),n.createElement("ul",on,tn)),an=function(){if(D.footer){var e=u.getJSXElement(D.footer,{props:D}),t=l({className:B("footer")},z("footer"));return n.createElement("div",t,e)}return null}(),ln=l({className:c(D.className,B("root")),style:D.style},P.getOtherProps(D),z("root")),un=l({className:B("container")},z("container"));return n.createElement("div",d({id:D.id,ref:M},ln),n.createElement("div",un,rn,cn,an))})));N.displayName="Dock";export{N as Dock};