primereact 10.2.1 → 10.3.1

package/sidebar/sidebar.d.ts

@@ -41,7 +41,7 @@ export interface SidebarPassThroughOptions {
     /**
      * Uses to pass attributes to the close button's DOM element.
      */
-    closeButton?: SidebarPassThroughType<React.HTMLAttributes<HTMLButtonElement>>;
+    closeButtonIcon?: SidebarPassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
     /**
      * Uses to pass attributes to the close icon's DOM element.
      */
@@ -80,11 +80,27 @@ export interface SidebarState {
     containerVisible: boolean;
 }
 
+/**
+ * Defines current content values and refs for headless development.
+ * @see {@link SidebarProps.content}
+ */
+interface ContentProps {
+    /**
+     * Allows you to specify the close button of the sidebar.
+     */
+    closeIconRef: React.RefObject<HTMLButtonElement | HTMLElement>;
+    /**
+     * Callback for hiding the sidebar.
+     * @param {React.SyntheticEvent} event - Used to get the event of the element.
+     */
+    hide(event: React.SyntheticEvent): void;
+}
+
 /**
  * Defines valid properties in Sidebar component. In addition to these, all properties of HTMLDivElement can be used in this component.
  * @group Properties
  */
-export interface SidebarProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref'> {
+export interface SidebarProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref' | 'content'> {
     /**
      * Inline style of the mask.
      */
@@ -161,7 +177,7 @@ export interface SidebarProps extends Omit<React.DetailedHTMLProps<React.HTMLAtt
      * DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and self. The self value is used to render a component where it is located.
      * @defaultValue document.body
      */
-    appendTo?: 'self' | HTMLElement | null | undefined;
+    appendTo?: 'self' | HTMLElement | undefined | null | (() => HTMLElement);
     /**
      * The properties of CSSTransition can be customized, except for "nodeRef" and "in" properties.
      * @type {CSSTransitionProps}
@@ -195,6 +211,12 @@ export interface SidebarProps extends Omit<React.DetailedHTMLProps<React.HTMLAtt
      * @defaultValue false
      */
     unstyled?: boolean;
+    /**
+     * Specifies a custom content for the sidebar. For more complex markup, use the "content" slot instead.
+     * @param {ContentProps} props - The values of sidebar.
+     * @return {React.ReactNode}
+     */
+    content?: React.ReactNode | ((props: ContentProps) => React.ReactNode);
 }
 
 /**

package/sidebar/sidebar.esm.js

@@ -1,13 +1,13 @@
 'use client';
 import * as React from 'react';
-import { DomHandler, ObjectUtils, classNames, ZIndexUtils, mergeProps, IconUtils } from 'primereact/utils';
 import PrimeReact, { PrimeReactContext, localeOption } from 'primereact/api';
 import { ComponentBase, useHandleStyle } from 'primereact/componentbase';
 import { CSSTransition } from 'primereact/csstransition';
-import { useEventListener as useEventListener$1, useMountEffect, useUpdateEffect, useUnmountEffect as useUnmountEffect$1 } from 'primereact/hooks';
+import { useDisplayOrder, useGlobalOnEscapeKey, ESC_KEY_HANDLING_PRIORITIES, useEventListener, useMountEffect, useUpdateEffect, useUnmountEffect } from 'primereact/hooks';
 import { TimesIcon } from 'primereact/icons/times';
 import { Portal } from 'primereact/portal';
 import { Ripple } from 'primereact/ripple';
+import { classNames, ZIndexUtils, mergeProps, DomHandler, ObjectUtils, IconUtils } from 'primereact/utils';
 
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -120,104 +120,6 @@ function _slicedToArray(arr, i) {
   return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
 }
 
-var usePrevious = function usePrevious(newValue) {
-  var ref = React.useRef(undefined);
-  React.useEffect(function () {
-    ref.current = newValue;
-  });
-  return ref.current;
-};
-
-/* eslint-disable */
-var useUnmountEffect = function useUnmountEffect(fn) {
-  return React.useEffect(function () {
-    return fn;
-  }, []);
-};
-/* eslint-enable */
-
-/* eslint-disable */
-var useEventListener = function useEventListener(_ref) {
-  var _ref$target = _ref.target,
-    target = _ref$target === void 0 ? 'document' : _ref$target,
-    type = _ref.type,
-    listener = _ref.listener,
-    options = _ref.options,
-    _ref$when = _ref.when,
-    when = _ref$when === void 0 ? true : _ref$when;
-  var targetRef = React.useRef(null);
-  var listenerRef = React.useRef(null);
-  var prevOptions = usePrevious(options);
-  var bind = function bind() {
-    var bindOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    if (ObjectUtils.isNotEmpty(bindOptions.target)) {
-      unbind();
-      (bindOptions.when || when) && (targetRef.current = DomHandler.getTargetElement(bindOptions.target));
-    }
-    if (!listenerRef.current && targetRef.current) {
-      listenerRef.current = function (event) {
-        return listener && listener(event);
-      };
-      targetRef.current.addEventListener(type, listenerRef.current, options);
-    }
-  };
-  var unbind = function unbind() {
-    if (listenerRef.current) {
-      targetRef.current.removeEventListener(type, listenerRef.current, options);
-      listenerRef.current = null;
-    }
-  };
-  React.useEffect(function () {
-    if (when) {
-      targetRef.current = DomHandler.getTargetElement(target);
-    } else {
-      unbind();
-      targetRef.current = null;
-    }
-  }, [target, when]);
-  React.useEffect(function () {
-    if (listenerRef.current && (listenerRef.current !== listener || prevOptions !== options)) {
-      unbind();
-      when && bind();
-    }
-  }, [listener, options]);
-  useUnmountEffect(function () {
-    unbind();
-  });
-  return [bind, unbind];
-};
-/* eslint-enable */
-
-var useOnEscapeKey = function useOnEscapeKey(ref, condition, callback) {
-  var handleEsc = function handleEsc(event) {
-    if (event.key === 'Esc' || event.key === 'Escape') {
-      event.stopImmediatePropagation();
-      callback(event);
-    }
-    return;
-  };
-  var _useEventListener = useEventListener({
-      type: 'keydown',
-      listener: handleEsc
-    }),
-    _useEventListener2 = _slicedToArray(_useEventListener, 2),
-    bindKeyDownListener = _useEventListener2[0],
-    unbindKeyDownListener = _useEventListener2[1];
-  React.useEffect(function () {
-    if (!condition) {
-      return;
-    }
-    if (!ref.current) {
-      return;
-    }
-    bindKeyDownListener();
-    return function () {
-      unbindKeyDownListener();
-    };
-  });
-  return [ref, callback];
-};
-
 var classes = {
   closeButton: 'p-sidebar-close p-sidebar-icon p-link',
   closeIcon: 'p-sidebar-close-icon',
@@ -331,12 +233,15 @@ var Sidebar = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
   var sidebarRef = React.useRef(null);
   var maskRef = React.useRef(null);
   var closeIconRef = React.useRef(null);
-  useOnEscapeKey(maskRef, props.closeOnEscape, function (event) {
-    if (ZIndexUtils.get(maskRef.current) === ZIndexUtils.getCurrent('modal', context && context.autoZIndex || PrimeReact.autoZIndex)) {
+  var sidebarDisplayOrder = useDisplayOrder('sidebar', visibleState);
+  useGlobalOnEscapeKey({
+    callback: function callback(event) {
       onClose(event);
-    }
+    },
+    when: visibleState && props.closeOnEscape,
+    priority: [ESC_KEY_HANDLING_PRIORITIES.SIDEBAR, sidebarDisplayOrder]
   });
-  var _useEventListener = useEventListener$1({
+  var _useEventListener = useEventListener({
       type: 'click',
       listener: function listener(event) {
         if (event.button !== 0) {
@@ -357,7 +262,7 @@ var Sidebar = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
   var focus = function focus() {
     var activeElement = document.activeElement;
     var isActiveElementInDialog = activeElement && sidebarRef && sidebarRef.current.contains(activeElement);
-    if (!isActiveElementInDialog && props.showCloseIcon) {
+    if (!isActiveElementInDialog && props.showCloseIcon && closeIconRef.current) {
       closeIconRef.current.focus();
     }
   };
@@ -441,11 +346,12 @@ var Sidebar = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
       }
     }
   }, [props.dismissable, props.modal, visibleState]);
-  useUnmountEffect$1(function () {
+  useUnmountEffect(function () {
     disableDocumentSettings();
     maskRef.current && ZIndexUtils.clear(maskRef.current);
   });
   var createCloseIcon = function createCloseIcon() {
+    var ariaLabel = props.ariaCloseLabel || localeOption('close');
     var closeButtonProps = mergeProps({
       type: 'button',
       ref: closeIconRef,
@@ -462,7 +368,6 @@ var Sidebar = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
     var closeIcon = IconUtils.getJSXIcon(icon, _objectSpread({}, closeIconProps), {
       props: props
     });
-    var ariaLabel = props.ariaCloseLabel || localeOption('close');
     if (props.showCloseIcon) {
       return /*#__PURE__*/React.createElement("button", closeButtonProps, closeIcon, /*#__PURE__*/React.createElement(Ripple, null));
     }
@@ -474,51 +379,62 @@ var Sidebar = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
   var createIcons = function createIcons() {
     return props.icons ? ObjectUtils.getJSXElement(props.icons, props) : null;
   };
+  var maskProps = mergeProps({
+    ref: maskRef,
+    style: sx('mask'),
+    className: cx('mask', {
+      maskVisibleState: maskVisibleState
+    }),
+    onMouseDown: function onMouseDown(e) {
+      return onMaskClick(e);
+    }
+  }, ptm('mask'));
+  var rootProps = mergeProps({
+    id: props.id,
+    className: cx('root', {
+      context: context
+    }),
+    style: props.style,
+    role: 'complementary'
+  }, SidebarBase.getOtherProps(props), ptm('root'));
+  var headerProps = mergeProps({
+    className: cx('header')
+  }, ptm('header'));
+  var contentProps = mergeProps({
+    className: cx('content')
+  }, ptm('content'));
+  var iconsProps = mergeProps({
+    className: cx('icons')
+  }, ptm('icons'));
+  var transitionTimeout = {
+    enter: props.fullScreen ? 150 : 300,
+    exit: props.fullScreen ? 150 : 300
+  };
+  var transitionProps = mergeProps({
+    classNames: cx('transition'),
+    "in": visibleState,
+    timeout: transitionTimeout,
+    options: props.transitionOptions,
+    unmountOnExit: true,
+    onEntered: onEntered,
+    onExiting: onExiting,
+    onExited: onExited
+  }, ptm('transition'));
+  var createTemplateElement = function createTemplateElement() {
+    var templateElementProps = {
+      closeIconRef: closeIconRef,
+      hide: onClose
+    };
+    return /*#__PURE__*/React.createElement("div", maskProps, /*#__PURE__*/React.createElement(CSSTransition, _extends({
+      nodeRef: sidebarRef
+    }, transitionProps), /*#__PURE__*/React.createElement("div", _extends({
+      ref: sidebarRef
+    }, rootProps), ObjectUtils.getJSXElement(inProps.content, templateElementProps))));
+  };
   var createElement = function createElement() {
     var closeIcon = createCloseIcon();
     var icons = createIcons();
     var header = createHeader();
-    var transitionTimeout = {
-      enter: props.fullScreen ? 150 : 300,
-      exit: props.fullScreen ? 150 : 300
-    };
-    var maskProps = mergeProps({
-      ref: maskRef,
-      style: sx('mask'),
-      className: cx('mask', {
-        maskVisibleState: maskVisibleState
-      }),
-      onMouseDown: function onMouseDown(e) {
-        return onMaskClick(e);
-      }
-    }, ptm('mask'));
-    var rootProps = mergeProps({
-      id: props.id,
-      className: cx('root', {
-        context: context
-      }),
-      style: props.style,
-      role: 'complementary'
-    }, SidebarBase.getOtherProps(props), ptm('root'));
-    var headerProps = mergeProps({
-      className: cx('header')
-    }, ptm('header'));
-    var contentProps = mergeProps({
-      className: cx('content')
-    }, ptm('content'));
-    var iconsProps = mergeProps({
-      className: cx('icons')
-    }, ptm('icons'));
-    var transitionProps = mergeProps({
-      classNames: cx('transition'),
-      "in": visibleState,
-      timeout: transitionTimeout,
-      options: props.transitionOptions,
-      unmountOnExit: true,
-      onEntered: onEntered,
-      onExiting: onExiting,
-      onExited: onExited
-    }, ptm('transition'));
     return /*#__PURE__*/React.createElement("div", maskProps, /*#__PURE__*/React.createElement(CSSTransition, _extends({
       nodeRef: sidebarRef
     }, transitionProps), /*#__PURE__*/React.createElement("div", _extends({
@@ -526,7 +442,7 @@ var Sidebar = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
     }, rootProps), /*#__PURE__*/React.createElement("div", headerProps, header, /*#__PURE__*/React.createElement("div", iconsProps, icons, closeIcon)), /*#__PURE__*/React.createElement("div", contentProps, props.children))));
   };
   var createSidebar = function createSidebar() {
-    var element = createElement();
+    var element = inProps !== null && inProps !== void 0 && inProps.content ? createTemplateElement() : createElement();
     return /*#__PURE__*/React.createElement(Portal, {
       element: element,
       appendTo: props.appendTo,

package/sidebar/sidebar.esm.min.js

@@ -1 +1 @@
-import*as e from"react";import{DomHandler as n,ObjectUtils as t,classNames as r,ZIndexUtils as i,mergeProps as o,IconUtils as a}from"primereact/utils";import s,{PrimeReactContext as l,localeOption as c}from"primereact/api";import{ComponentBase as p,useHandleStyle as d}from"primereact/componentbase";import{CSSTransition as u}from"primereact/csstransition";import{useEventListener as b,useMountEffect as f,useUpdateEffect as m,useUnmountEffect as v}from"primereact/hooks";import{TimesIcon as h}from"primereact/icons/times";import{Portal as y}from"primereact/portal";import{Ripple as g}from"primereact/ripple";function x(){return x=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},x.apply(this,arguments)}function w(e){return w="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},w(e)}function S(e,n){if("object"!==w(e)||null===e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var r=t.call(e,n||"default");if("object"!==w(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===n?String:Number)(e)}function E(e){var n=S(e,"string");return"symbol"===w(n)?n:String(n)}function k(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,i,o,a,s=[],l=!0,c=!1;try{if(o=(t=t.call(e)).next,0===n){if(Object(t)!==t)return;l=!1}else for(;!(l=(r=o.call(t)).done)&&(s.push(r.value),s.length!==n);l=!0);}catch(e){c=!0,i=e}finally{try{if(!l&&null!=t.return&&(a=t.return(),Object(a)!==a))return}finally{if(c)throw i}}return s}}function j(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 I(e,n){if(e){if("string"==typeof e)return j(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)?j(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 N(e,n){return k(e)||O(e,n)||I(e,n)||P()}var C=function(r){var i,o,a,s=r.target,l=void 0===s?"document":s,c=r.type,p=r.listener,d=r.options,u=r.when,b=void 0===u||u,f=e.useRef(null),m=e.useRef(null),v=(i=d,o=e.useRef(void 0),e.useEffect((function(){o.current=i})),o.current),h=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};t.isNotEmpty(e.target)&&(y(),(e.when||b)&&(f.current=n.getTargetElement(e.target))),!m.current&&f.current&&(m.current=function(e){return p&&p(e)},f.current.addEventListener(c,m.current,d))},y=function(){m.current&&(f.current.removeEventListener(c,m.current,d),m.current=null)};return e.useEffect((function(){b?f.current=n.getTargetElement(l):(y(),f.current=null)}),[l,b]),e.useEffect((function(){!m.current||m.current===p&&v===d||(y(),b&&h())}),[p,d]),a=function(){y()},e.useEffect((function(){return a}),[]),[h,y]},R=function(n,t,r){var i=N(C({type:"keydown",listener:function(e){"Esc"!==e.key&&"Escape"!==e.key||(e.stopImmediatePropagation(),r(e))}}),2),o=i[0],a=i[1];return e.useEffect((function(){if(t&&n.current)return o(),function(){a()}})),[n,r]},T=p.extend({defaultProps:{__TYPE:"Sidebar",id:null,style:null,className:null,maskStyle:null,maskClassName:null,visible:!1,position:"left",fullScreen:!1,blockScroll:!1,baseZIndex:0,dismissable:!0,showCloseIcon:!0,closeIcon:null,ariaCloseLabel:null,closeOnEscape:!0,icons:null,modal:!0,appendTo:null,transitionOptions:null,onShow:null,onHide:null,children:void 0},css:{classes:{closeButton:"p-sidebar-close p-sidebar-icon p-link",closeIcon:"p-sidebar-close-icon",mask:function(e){var n=e.props,t=e.maskVisibleState,i=["left","right","top","bottom"].find((function(e){return e===n.position}));return r("p-sidebar-mask",i&&!n.fullScreen?"p-sidebar-".concat(i):"",{"p-component-overlay p-component-overlay-enter":n.modal,"p-sidebar-mask-scrollblocker":n.blockScroll,"p-sidebar-visible":t,"p-sidebar-full":n.fullScreen},n.maskClassName)},header:function(e){return r("p-sidebar-header",{"p-sidebar-custom-header":e.props.header})},content:"p-sidebar-content",icons:"p-sidebar-icons",root:function(e){var n=e.context;return r("p-sidebar p-component",e.props.className,{"p-input-filled":n&&"filled"===n.inputStyle||"filled"===s.inputStyle,"p-ripple-disabled":n&&!1===n.ripple||!1===s.ripple})},transition:"p-sidebar"},styles:"\n@layer primereact {\n    .p-sidebar-mask {\n        display: none;\n        justify-content: center;\n        align-items: center;\n        pointer-events: none;\n        background-color: transparent;\n        transition-property: background-color;\n    }\n    \n    .p-sidebar-visible {\n        display: flex;\n    }\n    \n    .p-sidebar-mask.p-component-overlay {\n        pointer-events: auto;\n    }\n    \n    .p-sidebar {\n        display: flex;\n        flex-direction: column;\n        pointer-events: auto;\n        transform: translate3d(0px, 0px, 0px);\n        position: relative;\n    }\n    \n    .p-sidebar-content {\n        overflow-y: auto;\n        flex-grow: 1;\n    }\n    \n    .p-sidebar-header {\n        display: flex;\n        align-items: center;\n        justify-content: flex-end;\n    }\n    \n    .p-sidebar-custom-header {\n        justify-content: space-between;\n    }\n    \n    .p-sidebar-icons {\n        display: flex;\n        align-items: center;\n        flex-shrink: 0;\n    }\n    \n    .p-sidebar-icon {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        overflow: hidden;\n        position: relative;\n    }\n    \n    .p-sidebar-full .p-sidebar {\n        transition: none;\n        transform: none;\n        width: 100vw;\n        height: 100vh;\n        max-height: 100%;\n        top: 0px;\n        left: 0px;\n    }\n    \n    /* Animation */\n    /* Top, Bottom, Left and Right */\n    .p-sidebar-top .p-sidebar-enter,\n    .p-sidebar-top .p-sidebar-exit-active {\n        transform: translate3d(0px, -100%, 0px);\n    }\n    \n    .p-sidebar-bottom .p-sidebar-enter,\n    .p-sidebar-bottom .p-sidebar-exit-active {\n        transform: translate3d(0px, 100%, 0px);\n    }\n    \n    .p-sidebar-left .p-sidebar-enter,\n    .p-sidebar-left .p-sidebar-exit-active {\n        transform: translate3d(-100%, 0px, 0px);\n    }\n    \n    .p-sidebar-right .p-sidebar-enter,\n    .p-sidebar-right .p-sidebar-exit-active {\n        transform: translate3d(100%, 0px, 0px);\n    }\n    \n    .p-sidebar-top .p-sidebar-enter-active,\n    .p-sidebar-bottom .p-sidebar-enter-active,\n    .p-sidebar-left .p-sidebar-enter-active,\n    .p-sidebar-right .p-sidebar-enter-active {\n        transform: translate3d(0px, 0px, 0px);\n        transition: all 0.3s;\n    }\n    \n    .p-sidebar-top .p-sidebar-enter-done,\n    .p-sidebar-bottom .p-sidebar-enter-done,\n    .p-sidebar-left .p-sidebar-enter-done,\n    .p-sidebar-right .p-sidebar-enter-done {\n        transform: none;\n    }\n    \n    .p-sidebar-top .p-sidebar-exit-active,\n    .p-sidebar-bottom .p-sidebar-exit-active,\n    .p-sidebar-left .p-sidebar-exit-active,\n    .p-sidebar-right .p-sidebar-exit-active {\n        transition: all 0.3s;\n    }\n    \n    /* Full */\n    .p-sidebar-full .p-sidebar-enter {\n        opacity: 0;\n        transform: scale(0.5);\n    }\n    \n    .p-sidebar-full .p-sidebar-enter-active {\n        opacity: 1;\n        transform: scale(1);\n        transition: all 0.15s cubic-bezier(0, 0, 0.2, 1);\n    }\n    \n    .p-sidebar-full .p-sidebar-enter-done {\n        transform: none;\n    }\n    \n    .p-sidebar-full .p-sidebar-exit-active {\n        opacity: 0;\n        transform: scale(0.5);\n        transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);\n    }\n    \n    /* Size */\n    .p-sidebar-left .p-sidebar {\n        width: 20rem;\n        height: 100%;\n    }\n    \n    .p-sidebar-right .p-sidebar {\n        width: 20rem;\n        height: 100%;\n    }\n    \n    .p-sidebar-top .p-sidebar {\n        height: 10rem;\n        width: 100%;\n    }\n    \n    .p-sidebar-bottom .p-sidebar {\n        height: 10rem;\n        width: 100%;\n    }\n    \n    .p-sidebar-left .p-sidebar-sm,\n    .p-sidebar-right .p-sidebar-sm {\n        width: 20rem;\n    }\n    \n    .p-sidebar-left .p-sidebar-md,\n    .p-sidebar-right .p-sidebar-md {\n        width: 40rem;\n    }\n    \n    .p-sidebar-left .p-sidebar-lg,\n    .p-sidebar-right .p-sidebar-lg {\n        width: 60rem;\n    }\n    \n    .p-sidebar-top .p-sidebar-sm,\n    .p-sidebar-bottom .p-sidebar-sm {\n        height: 10rem;\n    }\n    \n    .p-sidebar-top .p-sidebar-md,\n    .p-sidebar-bottom .p-sidebar-md {\n        height: 20rem;\n    }\n    \n    .p-sidebar-top .p-sidebar-lg,\n    .p-sidebar-bottom .p-sidebar-lg {\n        height: 30rem;\n    }\n    \n    .p-sidebar-left .p-sidebar-view,\n    .p-sidebar-right .p-sidebar-view,\n    .p-sidebar-top .p-sidebar-view,\n    .p-sidebar-bottom .p-sidebar-view {\n        width: 100%;\n        height: 100%;\n    }\n    \n    .p-sidebar-left .p-sidebar-content,\n    .p-sidebar-right .p-sidebar-content,\n    .p-sidebar-top .p-sidebar-content,\n    .p-sidebar-bottom .p-sidebar-content {\n        width: 100%;\n        height: 100%;\n    }\n    \n    @media screen and (max-width: 64em) {\n        .p-sidebar-left .p-sidebar-lg,\n        .p-sidebar-left .p-sidebar-md,\n        .p-sidebar-right .p-sidebar-lg,\n        .p-sidebar-right .p-sidebar-md {\n            width: 20rem;\n        }\n    }        \n}\n",inlineStyles:{mask:function(e){var n=e.props;return{position:"fixed",height:"100%",width:"100%",left:0,top:0,display:"flex",justifyContent:"left"===n.position?"flex-start":"right"===n.position?"flex-end":"center",alignItems:"top"===n.position?"flex-start":"bottom"===n.position?"flex-end":"center"}}}}});function A(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 D(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?A(Object(t),!0).forEach((function(n){var r,i,o;r=e,o=t[n],(i=E(i=n))in r?Object.defineProperty(r,i,{value:o,enumerable:!0,configurable:!0,writable:!0}):r[i]=o})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):A(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}var B=e.forwardRef((function(r,p){var w=e.useContext(l),S=T.getProps(r,w),E=N(e.useState(!1),2),k=E[0],O=E[1],j=N(e.useState(!1),2),I=j[0],P=j[1],C=T.setMetaData({props:S,state:{containerVisible:k}}),A=C.ptm,B=C.cx,L=C.sx;d(T.css.styles,C.isUnstyled,{name:"sidebar"});var Z=e.useRef(null),z=e.useRef(null),M=e.useRef(null);R(z,S.closeOnEscape,(function(e){i.get(z.current)===i.getCurrent("modal",w&&w.autoZIndex||s.autoZIndex)&&X(e)}));var H=N(b({type:"click",listener:function(e){0===e.button&&V(e)&&X(e)}}),2),J=H[0],U=H[1],V=function(e){return Z&&Z.current&&!Z.current.contains(e.target)},X=function(e){S.onHide(),e.preventDefault()},_=function(){var e;S.onShow&&S.onShow(),!((e=document.activeElement)&&Z&&Z.current.contains(e))&&S.showCloseIcon&&M.current.focus(),$()},F=function(){S.modal&&n.addClass(z.current,"p-component-overlay-leave")},Y=function(){i.clear(z.current),O(!1),q()},$=function(){S.dismissable&&!S.modal&&J(),S.blockScroll&&n.blockBodyScroll()},q=function(){U(),S.blockScroll&&n.unblockBodyScroll()};e.useImperativeHandle(p,(function(){return{props:S,getElement:function(){return Z.current},gteMask:function(){return z.current},getCloseIcon:function(){return M.current}}})),f((function(){S.visible&&O(!0)})),m((function(){S.visible&&!k&&O(!0),S.visible!==I&&k&&P(S.visible)})),m((function(){k&&(i.set("modal",z.current,w&&w.autoZIndex||s.autoZIndex,S.baseZIndex||w&&w.zIndex.modal||s.zIndex.modal),P(!0))}),[k]),m((function(){I&&(U(),S.dismissable&&!S.modal&&J())}),[S.dismissable,S.modal,I]),v((function(){q(),z.current&&i.clear(z.current)}));var G,K,Q,W,ee,ne,te,re,ie,oe,ae,se=function(){var n=o({type:"button",ref:M,className:B("closeButton"),onClick:function(e){return X(e)},"aria-label":i},A("closeButton")),t=o({className:B("closeIcon")},A("closeIcon")),r=a.getJSXIcon(S.closeIcon||e.createElement(h,t),D({},t),{props:S}),i=S.ariaCloseLabel||c("close");return S.showCloseIcon?e.createElement("button",n,r,e.createElement(g,null)):null};return k&&(G=se(),K=S.icons?t.getJSXElement(S.icons,S):null,Q=S.header?t.getJSXElement(S.header,S):null,W={enter:S.fullScreen?150:300,exit:S.fullScreen?150:300},ee=o({ref:z,style:L("mask"),className:B("mask",{maskVisibleState:k}),onMouseDown:function(e){return n=e,void(S.dismissable&&S.modal&&z.current===n.target&&X(n));var n}},A("mask")),ne=o({id:S.id,className:B("root",{context:w}),style:S.style,role:"complementary"},T.getOtherProps(S),A("root")),te=o({className:B("header")},A("header")),re=o({className:B("content")},A("content")),ie=o({className:B("icons")},A("icons")),oe=o({classNames:B("transition"),in:I,timeout:W,options:S.transitionOptions,unmountOnExit:!0,onEntered:_,onExiting:F,onExited:Y},A("transition")),ae=e.createElement("div",ee,e.createElement(u,x({nodeRef:Z},oe),e.createElement("div",x({ref:Z},ne),e.createElement("div",te,Q,e.createElement("div",ie,K,G)),e.createElement("div",re,S.children)))),e.createElement(y,{element:ae,appendTo:S.appendTo,visible:!0}))}));B.displayName="Sidebar";export{B as Sidebar};
+import*as e from"react";import n,{PrimeReactContext as t,localeOption as r}from"primereact/api";import{ComponentBase as i,useHandleStyle as a}from"primereact/componentbase";import{CSSTransition as o}from"primereact/csstransition";import{useDisplayOrder as s,useGlobalOnEscapeKey as l,ESC_KEY_HANDLING_PRIORITIES as p,useEventListener as c,useMountEffect as d,useUpdateEffect as b,useUnmountEffect as u}from"primereact/hooks";import{TimesIcon as m}from"primereact/icons/times";import{Portal as f}from"primereact/portal";import{Ripple as h}from"primereact/ripple";import{classNames as v,ZIndexUtils as y,mergeProps as g,DomHandler as x,ObjectUtils as w,IconUtils as S}from"primereact/utils";function O(){return O=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},O.apply(this,arguments)}function k(e){return k="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},k(e)}function E(e,n){if("object"!==k(e)||null===e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var r=t.call(e,n||"default");if("object"!==k(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===n?String:Number)(e)}function j(e){var n=E(e,"string");return"symbol"===k(n)?n:String(n)}function I(e){if(Array.isArray(e))return e}function P(e,n){var t=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=t){var r,i,a,o,s=[],l=!0,p=!1;try{if(a=(t=t.call(e)).next,0===n){if(Object(t)!==t)return;l=!1}else for(;!(l=(r=a.call(t)).done)&&(s.push(r.value),s.length!==n);l=!0);}catch(e){p=!0,i=e}finally{try{if(!l&&null!=t.return&&(o=t.return(),Object(o)!==o))return}finally{if(p)throw i}}return s}}function N(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 C(e,n){if(e){if("string"==typeof e)return N(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)?N(e,n):void 0}}function R(){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 A(e,n){return I(e)||P(e,n)||C(e,n)||R()}var D=i.extend({defaultProps:{__TYPE:"Sidebar",id:null,style:null,className:null,maskStyle:null,maskClassName:null,visible:!1,position:"left",fullScreen:!1,blockScroll:!1,baseZIndex:0,dismissable:!0,showCloseIcon:!0,closeIcon:null,ariaCloseLabel:null,closeOnEscape:!0,icons:null,modal:!0,appendTo:null,transitionOptions:null,onShow:null,onHide:null,children:void 0},css:{classes:{closeButton:"p-sidebar-close p-sidebar-icon p-link",closeIcon:"p-sidebar-close-icon",mask:function(e){var n=e.props,t=e.maskVisibleState,r=["left","right","top","bottom"].find((function(e){return e===n.position}));return v("p-sidebar-mask",r&&!n.fullScreen?"p-sidebar-".concat(r):"",{"p-component-overlay p-component-overlay-enter":n.modal,"p-sidebar-mask-scrollblocker":n.blockScroll,"p-sidebar-visible":t,"p-sidebar-full":n.fullScreen},n.maskClassName)},header:function(e){return v("p-sidebar-header",{"p-sidebar-custom-header":e.props.header})},content:"p-sidebar-content",icons:"p-sidebar-icons",root:function(e){var t=e.context;return v("p-sidebar p-component",e.props.className,{"p-input-filled":t&&"filled"===t.inputStyle||"filled"===n.inputStyle,"p-ripple-disabled":t&&!1===t.ripple||!1===n.ripple})},transition:"p-sidebar"},styles:"\n@layer primereact {\n    .p-sidebar-mask {\n        display: none;\n        justify-content: center;\n        align-items: center;\n        pointer-events: none;\n        background-color: transparent;\n        transition-property: background-color;\n    }\n    \n    .p-sidebar-visible {\n        display: flex;\n    }\n    \n    .p-sidebar-mask.p-component-overlay {\n        pointer-events: auto;\n    }\n    \n    .p-sidebar {\n        display: flex;\n        flex-direction: column;\n        pointer-events: auto;\n        transform: translate3d(0px, 0px, 0px);\n        position: relative;\n    }\n    \n    .p-sidebar-content {\n        overflow-y: auto;\n        flex-grow: 1;\n    }\n    \n    .p-sidebar-header {\n        display: flex;\n        align-items: center;\n        justify-content: flex-end;\n    }\n    \n    .p-sidebar-custom-header {\n        justify-content: space-between;\n    }\n    \n    .p-sidebar-icons {\n        display: flex;\n        align-items: center;\n        flex-shrink: 0;\n    }\n    \n    .p-sidebar-icon {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        overflow: hidden;\n        position: relative;\n    }\n    \n    .p-sidebar-full .p-sidebar {\n        transition: none;\n        transform: none;\n        width: 100vw;\n        height: 100vh;\n        max-height: 100%;\n        top: 0px;\n        left: 0px;\n    }\n    \n    /* Animation */\n    /* Top, Bottom, Left and Right */\n    .p-sidebar-top .p-sidebar-enter,\n    .p-sidebar-top .p-sidebar-exit-active {\n        transform: translate3d(0px, -100%, 0px);\n    }\n    \n    .p-sidebar-bottom .p-sidebar-enter,\n    .p-sidebar-bottom .p-sidebar-exit-active {\n        transform: translate3d(0px, 100%, 0px);\n    }\n    \n    .p-sidebar-left .p-sidebar-enter,\n    .p-sidebar-left .p-sidebar-exit-active {\n        transform: translate3d(-100%, 0px, 0px);\n    }\n    \n    .p-sidebar-right .p-sidebar-enter,\n    .p-sidebar-right .p-sidebar-exit-active {\n        transform: translate3d(100%, 0px, 0px);\n    }\n    \n    .p-sidebar-top .p-sidebar-enter-active,\n    .p-sidebar-bottom .p-sidebar-enter-active,\n    .p-sidebar-left .p-sidebar-enter-active,\n    .p-sidebar-right .p-sidebar-enter-active {\n        transform: translate3d(0px, 0px, 0px);\n        transition: all 0.3s;\n    }\n    \n    .p-sidebar-top .p-sidebar-enter-done,\n    .p-sidebar-bottom .p-sidebar-enter-done,\n    .p-sidebar-left .p-sidebar-enter-done,\n    .p-sidebar-right .p-sidebar-enter-done {\n        transform: none;\n    }\n    \n    .p-sidebar-top .p-sidebar-exit-active,\n    .p-sidebar-bottom .p-sidebar-exit-active,\n    .p-sidebar-left .p-sidebar-exit-active,\n    .p-sidebar-right .p-sidebar-exit-active {\n        transition: all 0.3s;\n    }\n    \n    /* Full */\n    .p-sidebar-full .p-sidebar-enter {\n        opacity: 0;\n        transform: scale(0.5);\n    }\n    \n    .p-sidebar-full .p-sidebar-enter-active {\n        opacity: 1;\n        transform: scale(1);\n        transition: all 0.15s cubic-bezier(0, 0, 0.2, 1);\n    }\n    \n    .p-sidebar-full .p-sidebar-enter-done {\n        transform: none;\n    }\n    \n    .p-sidebar-full .p-sidebar-exit-active {\n        opacity: 0;\n        transform: scale(0.5);\n        transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);\n    }\n    \n    /* Size */\n    .p-sidebar-left .p-sidebar {\n        width: 20rem;\n        height: 100%;\n    }\n    \n    .p-sidebar-right .p-sidebar {\n        width: 20rem;\n        height: 100%;\n    }\n    \n    .p-sidebar-top .p-sidebar {\n        height: 10rem;\n        width: 100%;\n    }\n    \n    .p-sidebar-bottom .p-sidebar {\n        height: 10rem;\n        width: 100%;\n    }\n    \n    .p-sidebar-left .p-sidebar-sm,\n    .p-sidebar-right .p-sidebar-sm {\n        width: 20rem;\n    }\n    \n    .p-sidebar-left .p-sidebar-md,\n    .p-sidebar-right .p-sidebar-md {\n        width: 40rem;\n    }\n    \n    .p-sidebar-left .p-sidebar-lg,\n    .p-sidebar-right .p-sidebar-lg {\n        width: 60rem;\n    }\n    \n    .p-sidebar-top .p-sidebar-sm,\n    .p-sidebar-bottom .p-sidebar-sm {\n        height: 10rem;\n    }\n    \n    .p-sidebar-top .p-sidebar-md,\n    .p-sidebar-bottom .p-sidebar-md {\n        height: 20rem;\n    }\n    \n    .p-sidebar-top .p-sidebar-lg,\n    .p-sidebar-bottom .p-sidebar-lg {\n        height: 30rem;\n    }\n    \n    .p-sidebar-left .p-sidebar-view,\n    .p-sidebar-right .p-sidebar-view,\n    .p-sidebar-top .p-sidebar-view,\n    .p-sidebar-bottom .p-sidebar-view {\n        width: 100%;\n        height: 100%;\n    }\n    \n    .p-sidebar-left .p-sidebar-content,\n    .p-sidebar-right .p-sidebar-content,\n    .p-sidebar-top .p-sidebar-content,\n    .p-sidebar-bottom .p-sidebar-content {\n        width: 100%;\n        height: 100%;\n    }\n    \n    @media screen and (max-width: 64em) {\n        .p-sidebar-left .p-sidebar-lg,\n        .p-sidebar-left .p-sidebar-md,\n        .p-sidebar-right .p-sidebar-lg,\n        .p-sidebar-right .p-sidebar-md {\n            width: 20rem;\n        }\n    }        \n}\n",inlineStyles:{mask:function(e){var n=e.props;return{position:"fixed",height:"100%",width:"100%",left:0,top:0,display:"flex",justifyContent:"left"===n.position?"flex-start":"right"===n.position?"flex-end":"center",alignItems:"top"===n.position?"flex-start":"bottom"===n.position?"flex-end":"center"}}}}});function B(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 T(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?B(Object(t),!0).forEach((function(n){var r,i,a;r=e,a=t[n],(i=j(i=n))in r?Object.defineProperty(r,i,{value:a,enumerable:!0,configurable:!0,writable:!0}):r[i]=a})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):B(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}var z=e.forwardRef((function(i,v){var k=e.useContext(t),E=D.getProps(i,k),j=A(e.useState(!1),2),I=j[0],P=j[1],N=A(e.useState(!1),2),C=N[0],R=N[1],B=D.setMetaData({props:E,state:{containerVisible:I}}),z=B.ptm,J=B.cx,M=B.sx;a(D.css.styles,B.isUnstyled,{name:"sidebar"});var X=e.useRef(null),Z=e.useRef(null),H=e.useRef(null),L=s("sidebar",C);l({callback:function(e){Y(e)},when:C&&E.closeOnEscape,priority:[p.SIDEBAR,L]});var V=A(c({type:"click",listener:function(e){0===e.button&&F(e)&&Y(e)}}),2),U=V[0],_=V[1],F=function(e){return X&&X.current&&!X.current.contains(e.target)},Y=function(e){E.onHide(),e.preventDefault()},$=function(){E.dismissable&&!E.modal&&U(),E.blockScroll&&x.blockBodyScroll()},q=function(){_(),E.blockScroll&&x.unblockBodyScroll()};e.useImperativeHandle(v,(function(){return{props:E,getElement:function(){return X.current},gteMask:function(){return Z.current},getCloseIcon:function(){return H.current}}})),d((function(){E.visible&&P(!0)})),b((function(){E.visible&&!I&&P(!0),E.visible!==C&&I&&R(E.visible)})),b((function(){I&&(y.set("modal",Z.current,k&&k.autoZIndex||n.autoZIndex,E.baseZIndex||k&&k.zIndex.modal||n.zIndex.modal),R(!0))}),[I]),b((function(){C&&(_(),E.dismissable&&!E.modal&&U())}),[E.dismissable,E.modal,C]),u((function(){q(),Z.current&&y.clear(Z.current)}));var G,K,Q,W,ee,ne=function(){var n=E.ariaCloseLabel||r("close"),t=g({type:"button",ref:H,className:J("closeButton"),onClick:function(e){return Y(e)},"aria-label":n},z("closeButton")),i=g({className:J("closeIcon")},z("closeIcon")),a=S.getJSXIcon(E.closeIcon||e.createElement(m,i),T({},i),{props:E});return E.showCloseIcon?e.createElement("button",t,a,e.createElement(h,null)):null},te=g({ref:Z,style:M("mask"),className:J("mask",{maskVisibleState:I}),onMouseDown:function(e){return n=e,void(E.dismissable&&E.modal&&Z.current===n.target&&Y(n));var n}},z("mask")),re=g({id:E.id,className:J("root",{context:k}),style:E.style,role:"complementary"},D.getOtherProps(E),z("root")),ie=g({className:J("header")},z("header")),ae=g({className:J("content")},z("content")),oe=g({className:J("icons")},z("icons")),se={enter:E.fullScreen?150:300,exit:E.fullScreen?150:300},le=g({classNames:J("transition"),in:C,timeout:se,options:E.transitionOptions,unmountOnExit:!0,onEntered:function(){var e;E.onShow&&E.onShow(),!((e=document.activeElement)&&X&&X.current.contains(e))&&E.showCloseIcon&&H.current&&H.current.focus(),$()},onExiting:function(){E.modal&&x.addClass(Z.current,"p-component-overlay-leave")},onExited:function(){y.clear(Z.current),P(!1),q()}},z("transition"));return I&&(ee=null!=i&&i.content?(W={closeIconRef:H,hide:Y},e.createElement("div",te,e.createElement(o,O({nodeRef:X},le),e.createElement("div",O({ref:X},re),w.getJSXElement(i.content,W))))):(G=ne(),K=E.icons?w.getJSXElement(E.icons,E):null,Q=E.header?w.getJSXElement(E.header,E):null,e.createElement("div",te,e.createElement(o,O({nodeRef:X},le),e.createElement("div",O({ref:X},re),e.createElement("div",ie,Q,e.createElement("div",oe,K,G)),e.createElement("div",ae,E.children))))),e.createElement(f,{element:ee,appendTo:E.appendTo,visible:!0}))}));z.displayName="Sidebar";export{z as Sidebar};