dockview-react 8.7.1 → 8.8.1

package/dist/package/main.cjs.js

@@ -1,6 +1,6 @@
 /**
  * dockview-react
- * @version 8.7.1
+ * @version 8.8.1
  * @link https://github.com/dockview/dockview
  * @license MIT
  */
@@ -990,9 +990,9 @@ var PanePanelSection = class {
 	toJSON() {
 		return { id: this.id };
 	}
-	update(params) {
+	update(event) {
 		var _this$part;
-		(_this$part = this.part) === null || _this$part === void 0 || _this$part.update(params.params);
+		(_this$part = this.part) === null || _this$part === void 0 || _this$part.update({ params: event.params });
 	}
 	dispose() {
 		var _this$part2;

package/dist/package/main.cjs.min.js

@@ -1,7 +1,7 @@
 /**
 * dockview-react
-* @version 8.7.1
+* @version 8.8.1
 * @link https://github.com/dockview/dockview
 * @license MIT
 */
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=Object.getOwnPropertyNames,i=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty,o=(e,i,o,s)=>{if(i&&typeof i==`object`||typeof i==`function`)for(var c=r(i),l=0,u=c.length,d;l<u;l++)d=c[l],!a.call(e,d)&&d!==o&&t(e,d,{get:(e=>i[e]).bind(null,d),enumerable:!(s=n(i,d))||s.enumerable});return e},s=(n,r,a)=>(a=n==null?{}:e(i(n)),o(r||!n||!n.__esModule?t(a,`default`,{value:n,enumerable:!0}):a,n));let c=require("dockview"),l=require("react");l=s(l);let u=require("react-dom");u=s(u);function d(e){"@babel/helpers - typeof";return d=typeof Symbol==`function`&&typeof Symbol.iterator==`symbol`?function(e){return typeof e}:function(e){return e&&typeof Symbol==`function`&&e.constructor===Symbol&&e!==Symbol.prototype?`symbol`:typeof e},d(e)}function f(e,t){if(d(e)!=`object`||!e)return e;var n=e[Symbol.toPrimitive];if(n!==void 0){var r=n.call(e,t||`default`);if(d(r)!=`object`)return r;throw TypeError(`@@toPrimitive must return a primitive value.`)}return(t===`string`?String:Number)(e)}function p(e){var t=f(e,`string`);return d(t)==`symbol`?t:t+``}function m(e,t,n){return(t=p(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function h(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),n.push.apply(n,r)}return n}function g(e){for(var t=1;t<arguments.length;t++){var n=arguments[t]==null?{}:arguments[t];t%2?h(Object(n),!0).forEach(function(t){m(e,t,n[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):h(Object(n)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))})}return e}const _=(e,t)=>{let[,n]=l.default.useState(0),r=l.default.useRef(e.componentProps);return l.default.useImperativeHandle(t,()=>({update:e=>{r.current=g(g({},r.current),e),n(e=>e+1)}}),[]),l.default.createElement(e.component,r.current)};_.displayName=`DockviewReactJsBridge`;const v=(()=>{let e=1;return{next:()=>`dockview_react_portal_key_${(e++).toString()}`}})(),y=l.default.createContext({});var b=class{constructor(e,t,n,r,i){this.parent=e,this.portalStore=t,this.component=n,this.parameters=r,this.context=i,this._initialProps={},this.disposed=!1,this.createPortal()}update(e){if(this.disposed)throw Error(`invalid operation: resource is already disposed`);this.componentInstance?this.componentInstance.update(e):this._initialProps=g(g({},this._initialProps),e)}createPortal(){if(this.disposed)throw Error(`invalid operation: resource is already disposed`);if(!S(this.component))throw Error(`Dockview: Only React.memo(...), React.ForwardRef(...) and functional components are accepted as components`);let e=l.default.createElement(l.default.forwardRef(_),{component:this.component,componentProps:this.parameters,ref:e=>{this.componentInstance=e,Object.keys(this._initialProps).length>0&&(this.componentInstance.update(this._initialProps),this._initialProps={})}}),t=this.context?l.default.createElement(y.Provider,{value:this.context},e):e,n=u.default.createPortal(t,this.parent,v.next());this.ref={portal:n,disposable:this.portalStore.addPortal(n)}}dispose(){var e;(e=this.ref)==null||e.disposable.dispose(),this.disposed=!0}};const x=()=>{let[e,t]=l.default.useState([]);return l.default.useDebugValue(`Portal count: ${e.length}`),[e,l.default.useCallback(e=>{t(t=>[...t,e]);let n=!1;return c.DockviewDisposable.from(()=>{if(n)throw Error(`invalid operation: resource already disposed`);n=!0,t(t=>t.filter(t=>t!==e))})},[])]};function S(e){return typeof e==`function`||!!(e!=null&&e.$$typeof)}function C(e,t){let n=e=>e instanceof ShadowRoot?e.host:e.parentNode,r=new Set,i=new MutationObserver(n=>{if(!e.isConnected){i.disconnect(),t();return}for(let e of n)for(let t of e.removedNodes)if(r.has(t)){a();return}}),a=()=>{i.disconnect(),r.clear();for(let t=n(e);t;t=n(t))r.add(t),i.observe(t,{childList:!0})};return a(),c.DockviewDisposable.from(()=>i.disconnect())}const w=Number.parseInt(l.default.version,10)>=18;function T(e,t,n){let r=l.default.useRef(void 0);l.default.useEffect(()=>{var i,a;let o=e.current;if(!o)return;(i=r.current)==null||i.dispose(),r.current=void 0;let s=(a=t.current)==null?n(o):a;return t.current=s,()=>{let e=()=>{r.current=void 0,t.current=void 0,s.dispose()};w&&o.isConnected&&typeof MutationObserver<`u`?r.current=C(o,e):e()}},[])}function E(e){let t=l.default.useRef({instance:void 0,values:new Map});return l.default.useCallback(n=>{t.current.instance!==e.current&&(t.current={instance:e.current,values:new Map});let r=t.current.values,i=!0;for(let[e,t]of Object.entries(n))r.has(e)&&r.get(e)!==t&&(i=!1),r.set(e,t);return i},[e])}var D=class{get element(){return this._element}constructor(e,t,n){this.id=e,this.component=t,this.reactPortalStore=n,this._onDidFocus=new c.DockviewEmitter,this.onDidFocus=this._onDidFocus.event,this._onDidBlur=new c.DockviewEmitter,this.onDidBlur=this._onDidBlur.event,this._element=document.createElement(`div`),this._element.className=`dv-react-part`,this._element.style.height=`100%`,this._element.style.width=`100%`}focus(){}init(e){this.part=new b(this.element,this.reactPortalStore,this.component,{params:e.params,api:e.api,containerApi:e.containerApi})}update(e){var t;(t=this.part)==null||t.update({params:e.params})}layout(e,t){}dispose(){var e;this._onDidFocus.dispose(),this._onDidBlur.dispose(),(e=this.part)==null||e.dispose()}},O=class{get element(){return this._element}constructor(e,t,n){this.id=e,this.component=t,this.reactPortalStore=n,this._element=document.createElement(`div`),this._element.className=`dv-react-part`,this._element.style.height=`100%`,this._element.style.width=`100%`}focus(){}init(e){this.part=new b(this.element,this.reactPortalStore,this.component,{params:e.params,api:e.api,containerApi:e.containerApi,tabLocation:e.tabLocation})}update(e){var t;(t=this.part)==null||t.update({params:e.params})}layout(e,t){}dispose(){var e;(e=this.part)==null||e.dispose()}},k=class{get element(){return this._element}constructor(e,t,n){this.id=e,this.component=t,this.reactPortalStore=n,this._element=document.createElement(`div`),this._element.className=`dv-react-part`,this._element.style.height=`100%`,this._element.style.width=`100%`}init(e){this.part=new b(this.element,this.reactPortalStore,this.component,{group:e.group,containerApi:e.containerApi})}focus(){}update(e){var t,n,r;this.parameters&&(this.parameters.params=e.params),(t=this.part)==null||t.update({params:(n=(r=this.parameters)==null?void 0:r.params)==null?{}:n})}layout(e,t){}dispose(){var e;(e=this.part)==null||e.dispose()}},A=class{get element(){return this._element}get part(){return this._part}constructor(e,t,n){this.component=e,this.reactPortalStore=t,this._group=n,this.mutableDisposable=new c.DockviewMutableDisposable,this._element=document.createElement(`div`),this._element.className=`dv-react-part`,this._element.style.height=`100%`,this._element.style.width=`100%`}init(e){this.mutableDisposable.value=new c.DockviewCompositeDisposable(this._group.model.onDidAddPanel(()=>{this.updatePanels()}),this._group.model.onDidRemovePanel(()=>{this.updatePanels()}),this._group.model.onDidActivePanelChange(()=>{this.updateActivePanel()}),e.api.onDidActiveChange(()=>{this.updateGroupActive()}),e.api.onDidLocationChange(e=>{this.updateLocation(e.location)})),this._part=new b(this.element,this.reactPortalStore,this.component,{api:e.api,containerApi:e.containerApi,panels:this._group.model.panels,activePanel:this._group.model.activePanel,isGroupActive:this._group.api.isActive,group:this._group,headerPosition:this._group.model.headerPosition,location:e.api.location})}dispose(){var e;this.mutableDisposable.dispose(),(e=this._part)==null||e.dispose()}update(e){var t;(t=this._part)==null||t.update(e.params)}updatePanels(){this.update({params:{panels:this._group.model.panels}})}updateActivePanel(){this.update({params:{activePanel:this._group.model.activePanel}})}updateGroupActive(){this.update({params:{isGroupActive:this._group.api.isActive}})}updateLocation(e){this.update({params:{location:e}})}},j=class{get element(){return this._element}constructor(e,t,n){this.id=e,this.component=t,this.reactPortalStore=n,this._element=document.createElement(`div`),this._element.className=`dv-react-part`,this._element.style.height=`100%`,this._element.style.width=`100%`}init(e){this.part=new b(this._element,this.reactPortalStore,this.component,e)}dispose(){var e;(e=this.part)==null||e.dispose()}},M=class{get element(){return this._element}constructor(e,t){this.component=e,this.reactPortalStore=t,this._element=document.createElement(`div`),this._element.className=`dv-react-part`,this._element.style.display=`inline-flex`}init(e){this.part=new b(this._element,this.reactPortalStore,this.component,{tabGroup:e.tabGroup,api:e.api})}update(e){var t;(t=this.part)==null||t.update({tabGroup:e.tabGroup})}dispose(){var e;(e=this.part)==null||e.dispose()}},N=class{get element(){return this._element}constructor(e,t){this.component=e,this.reactPortalStore=t,this._element=document.createElement(`div`),this._element.className=`dv-react-part`,this._element.style.display=`inline-flex`}init(e){this.part=new b(this._element,this.reactPortalStore,this.component,{group:e.group,api:e.api})}dispose(){var e;(e=this.part)==null||e.dispose()}};function P(e,t){return e?n=>new A(e,t,n):void 0}const F=`props.defaultTabComponent`;function I(e){return c.PROPERTY_KEYS_DOCKVIEW.reduce((t,n)=>(n in e&&(t[n]=e[n]),t),{})}const L=l.default.forwardRef((e,t)=>{let n=l.default.useRef(null),r=l.default.useRef(void 0),[i,a]=x(),o=E(r);l.default.useImperativeHandle(t,()=>n.current,[]);let s=l.default.useRef({});return l.default.useEffect(()=>{let t={};c.PROPERTY_KEYS_DOCKVIEW.forEach(n=>{let r=n,i=e[r];r in e&&i!==s.current[r]&&(t[r]=i)}),r.current&&Object.keys(t).length>0&&r.current.updateOptions(t),s.current=e},c.PROPERTY_KEYS_DOCKVIEW.map(t=>e[t])),T(n,r,t=>{let n=g({},e.tabComponents);e.defaultTabComponent&&(n[F]=e.defaultTabComponent);let r={createLeftHeaderActionComponent:P(e.leftHeaderActionsComponent,{addPortal:a}),createRightHeaderActionComponent:P(e.rightHeaderActionsComponent,{addPortal:a}),createPrefixHeaderActionComponent:P(e.prefixHeaderActionsComponent,{addPortal:a}),createComponent:t=>new D(t.id,e.components[t.name],{addPortal:a}),createTabComponent(e){return new O(e.id,n[e.name],{addPortal:a})},createWatermarkComponent:e.watermarkComponent?()=>new k(`watermark`,e.watermarkComponent,{addPortal:a}):void 0,defaultTabComponent:e.defaultTabComponent?F:void 0,createContextMenuItemComponent:e=>{if(e.component)return new j(e.id,e.component,{addPortal:a})}},i=I(e);if(e.tabGroupChipComponent){let t=e.tabGroupChipComponent;i.createTabGroupChipComponent=()=>new M(t,{addPortal:a})}if(e.groupDragGhostComponent){let t=e.groupDragGhostComponent;i.createGroupDragGhostComponent=()=>new N(t,{addPortal:a})}let o=(0,c.createDockview)(t,g(g({},i),r)),{clientWidth:s,clientHeight:l}=t;return o.layout(s,l),e.onReady&&e.onReady({api:o}),o}),l.default.useEffect(()=>{if(!r.current)return()=>{};let t=r.current.onDidDrop(t=>{e.onDidDrop&&e.onDidDrop(t)});return()=>{t.dispose()}},[e.onDidDrop]),l.default.useEffect(()=>{if(!r.current)return()=>{};let t=r.current.onWillDrop(t=>{e.onWillDrop&&e.onWillDrop(t)});return()=>{t.dispose()}},[e.onWillDrop]),l.default.useEffect(()=>{!r.current||o({tabGroupChipComponent:e.tabGroupChipComponent})||r.current.updateOptions({createTabGroupChipComponent:e.tabGroupChipComponent?()=>new M(e.tabGroupChipComponent,{addPortal:a}):void 0})},[e.tabGroupChipComponent]),l.default.useEffect(()=>{!r.current||o({groupDragGhostComponent:e.groupDragGhostComponent})||r.current.updateOptions({createGroupDragGhostComponent:e.groupDragGhostComponent?()=>new N(e.groupDragGhostComponent,{addPortal:a}):void 0})},[e.groupDragGhostComponent]),l.default.useEffect(()=>{!r.current||o({components:e.components})||r.current.updateOptions({createComponent:t=>new D(t.id,e.components[t.name],{addPortal:a})})},[e.components]),l.default.useEffect(()=>{if(!r.current||o({tabComponents:e.tabComponents,defaultTabComponent:e.defaultTabComponent}))return;let t=g({},e.tabComponents);e.defaultTabComponent&&(t[F]=e.defaultTabComponent),r.current.updateOptions({defaultTabComponent:e.defaultTabComponent?F:void 0,createTabComponent(e){return new O(e.id,t[e.name],{addPortal:a})}})},[e.tabComponents,e.defaultTabComponent]),l.default.useEffect(()=>{!r.current||o({watermarkComponent:e.watermarkComponent})||r.current.updateOptions({createWatermarkComponent:e.watermarkComponent?()=>new k(`watermark`,e.watermarkComponent,{addPortal:a}):void 0})},[e.watermarkComponent]),l.default.useEffect(()=>{!r.current||o({rightHeaderActionsComponent:e.rightHeaderActionsComponent})||r.current.updateOptions({createRightHeaderActionComponent:P(e.rightHeaderActionsComponent,{addPortal:a})})},[e.rightHeaderActionsComponent]),l.default.useEffect(()=>{!r.current||o({leftHeaderActionsComponent:e.leftHeaderActionsComponent})||r.current.updateOptions({createLeftHeaderActionComponent:P(e.leftHeaderActionsComponent,{addPortal:a})})},[e.leftHeaderActionsComponent]),l.default.useEffect(()=>{!r.current||o({prefixHeaderActionsComponent:e.prefixHeaderActionsComponent})||r.current.updateOptions({createPrefixHeaderActionComponent:P(e.prefixHeaderActionsComponent,{addPortal:a})})},[e.prefixHeaderActionsComponent]),l.default.createElement(`div`,{style:{height:`100%`,width:`100%`},ref:n},i)});L.displayName=`DockviewComponent`;const R=()=>l.default.createElement(`svg`,{height:`11`,width:`11`,viewBox:`0 0 28 28`,"aria-hidden":`false`,focusable:!1,className:`dv-svg`},l.default.createElement(`path`,{d:`M2.1 27.3L0 25.2L11.55 13.65L0 2.1L2.1 0L13.65 11.55L25.2 0L27.3 2.1L15.75 13.65L27.3 25.2L25.2 27.3L13.65 15.75L2.1 27.3Z`})),ee=()=>l.default.createElement(`svg`,{height:`11`,width:`11`,viewBox:`0 0 24 24`,"aria-hidden":`false`,focusable:!1,className:`dv-svg`},l.default.createElement(`path`,{d:`M16 9V4h1c.55 0 1-.45 1-1s-.45-1-1-1H6c-.55 0-1 .45-1 1s.45 1 1 1h1v5c0 1.66-1.34 3-3 3v2h5.97v7l1 1 1-1v-7H19v-2c-1.66 0-3-1.34-3-3z`}));function z(e,t){if(e==null)return{};var n={};for(var r in e)if({}.hasOwnProperty.call(e,r)){if(t.includes(r))continue;n[r]=e[r]}return n}function B(e,t){if(e==null)return{};var n,r,i=z(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)n=a[r],t.includes(n)||{}.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}const V=[`api`,`containerApi`,`params`,`hideClose`,`closeActionOverride`,`onPointerDown`,`onPointerUp`,`onPointerLeave`,`tabLocation`];function H(e){let[t,n]=l.default.useState(e.title);return l.default.useEffect(()=>{let r=e.onDidTitleChange(e=>{n(e.title)});return t!==e.title&&n(e.title),()=>{r.dispose()}},[e]),t}function U(e){let[t,n]=l.default.useState(e.isPinned);return l.default.useEffect(()=>{let r=e.onDidChangePinned(e=>{n(e.isPinned)});return t!==e.isPinned&&n(e.isPinned),()=>{r.dispose()}},[e]),t}const W=e=>{let{api:t,containerApi:n,params:r,hideClose:i,closeActionOverride:a,onPointerDown:o,onPointerUp:s,onPointerLeave:c,tabLocation:u}=e,d=B(e,V),f=H(t),p=U(t),m=l.default.useRef(!1),h=l.default.useCallback(e=>{e.preventDefault(),a?a():t.close()},[t,a]),_=l.default.useCallback(e=>{e.preventDefault()},[]),v=l.default.useCallback(e=>{m.current=e.button===1,o==null||o(e)},[o]),y=l.default.useCallback(e=>{m.current&&e.button===1&&!i&&(m.current=!1,h(e)),s==null||s(e)},[s,h,i]),b=l.default.useCallback(e=>{m.current=!1,c==null||c(e)},[c]);return l.default.createElement(`div`,g(g({"data-testid":`dockview-dv-default-tab`},d),{},{onPointerDown:v,onPointerUp:y,onPointerLeave:b,className:`dv-default-tab`}),p&&l.default.createElement(`div`,{className:`dv-tab-pin`},l.default.createElement(ee,null)),l.default.createElement(`span`,{className:`dv-default-tab-content`},f),!i&&l.default.createElement(`button`,{type:`button`,className:`dv-default-tab-action`,"aria-label":`Close tab`,onPointerDown:_,onClick:h},l.default.createElement(R,null)))};var G=class extends c.SplitviewPanel{constructor(e,t,n,r){super(e,t),this.reactComponent=n,this.reactPortalStore=r}getComponent(){var e,t;return new b(this.element,this.reactPortalStore,this.reactComponent,{params:(e=(t=this._params)==null?void 0:t.params)==null?{}:e,api:this.api,containerApi:new c.SplitviewApi(this._params.accessor)})}};function K(e){return c.PROPERTY_KEYS_SPLITVIEW.reduce((t,n)=>(n in e&&(t[n]=e[n]),t),{})}const q=l.default.forwardRef((e,t)=>{let n=l.default.useRef(null),r=l.default.useRef(void 0),[i,a]=x(),o=E(r);l.default.useImperativeHandle(t,()=>n.current,[]);let s=l.default.useRef({});return l.default.useEffect(()=>{let t={};c.PROPERTY_KEYS_SPLITVIEW.forEach(n=>{let r=n,i=e[r];r in e&&i!==s.current[r]&&(t[r]=i)}),r.current&&Object.keys(t).length>0&&r.current.updateOptions(t),s.current=e},c.PROPERTY_KEYS_SPLITVIEW.map(t=>e[t])),T(n,r,t=>{let n=(0,c.createSplitview)(t,g(g({},K(e)),{createComponent:t=>new G(t.id,t.name,e.components[t.name],{addPortal:a})})),{clientWidth:r,clientHeight:i}=t;return n.layout(r,i),e.onReady&&e.onReady({api:n}),n}),l.default.useEffect(()=>{!r.current||o({components:e.components})||r.current.updateOptions({createComponent:t=>new G(t.id,t.name,e.components[t.name],{addPortal:a})})},[e.components]),l.default.createElement(`div`,{style:{height:`100%`,width:`100%`},ref:n},i)});q.displayName=`SplitviewComponent`;var J=class extends c.GridviewPanel{constructor(e,t,n,r){super(e,t),this.reactComponent=n,this.reactPortalStore=r}getComponent(){var e,t;return new b(this.element,this.reactPortalStore,this.reactComponent,{params:(e=(t=this._params)==null?void 0:t.params)==null?{}:e,api:this.api,containerApi:new c.GridviewApi(this._params.accessor)})}};function Y(e){return c.PROPERTY_KEYS_GRIDVIEW.reduce((t,n)=>(n in e&&(t[n]=e[n]),t),{})}const X=l.default.forwardRef((e,t)=>{let n=l.default.useRef(null),r=l.default.useRef(void 0),[i,a]=x(),o=E(r);l.default.useImperativeHandle(t,()=>n.current,[]);let s=l.default.useRef({});return l.default.useEffect(()=>{let t={};c.PROPERTY_KEYS_GRIDVIEW.forEach(n=>{let r=n,i=e[r];r in e&&i!==s.current[r]&&(t[r]=i)}),r.current&&Object.keys(t).length>0&&r.current.updateOptions(t),s.current=e},c.PROPERTY_KEYS_GRIDVIEW.map(t=>e[t])),T(n,r,t=>{let n=(0,c.createGridview)(t,g(g({},Y(e)),{createComponent:t=>new J(t.id,t.name,e.components[t.name],{addPortal:a})})),{clientWidth:r,clientHeight:i}=t;return n.layout(r,i),e.onReady&&e.onReady({api:n}),n}),l.default.useEffect(()=>{!r.current||o({components:e.components})||r.current.updateOptions({createComponent:t=>new J(t.id,t.name,e.components[t.name],{addPortal:a})})},[e.components]),l.default.createElement(`div`,{style:{height:`100%`,width:`100%`},ref:n},i)});X.displayName=`GridviewComponent`;var Z=class{get element(){return this._element}constructor(e,t,n){this.id=e,this.component=t,this.reactPortalStore=n,this._element=document.createElement(`div`),this._element.style.height=`100%`,this._element.style.width=`100%`}init(e){this.part=new b(this.element,this.reactPortalStore,this.component,{params:e.params,api:e.api,title:e.title,containerApi:e.containerApi})}toJSON(){return{id:this.id}}update(e){var t;(t=this.part)==null||t.update(e.params)}dispose(){var e;(e=this.part)==null||e.dispose()}};function Q(e){return c.PROPERTY_KEYS_PANEVIEW.reduce((t,n)=>(n in e&&(t[n]=e[n]),t),{})}const $=l.default.forwardRef((e,t)=>{let n=l.default.useRef(null),r=l.default.useRef(void 0),[i,a]=x(),o=E(r);l.default.useImperativeHandle(t,()=>n.current,[]);let s=l.default.useRef({});return l.default.useEffect(()=>{let t={};c.PROPERTY_KEYS_PANEVIEW.forEach(n=>{let r=n,i=e[r];r in e&&i!==s.current[r]&&(t[r]=i)}),r.current&&Object.keys(t).length>0&&r.current.updateOptions(t),s.current=e},c.PROPERTY_KEYS_PANEVIEW.map(t=>e[t])),T(n,r,t=>{var n;let r=(n=e.headerComponents)==null?{}:n,i=(0,c.createPaneview)(t,g(g({},Q(e)),{createComponent:t=>new Z(t.id,e.components[t.name],{addPortal:a}),createHeaderComponent:e=>new Z(e.id,r[e.name],{addPortal:a})})),{clientWidth:o,clientHeight:s}=t;return i.layout(o,s),e.onReady&&e.onReady({api:i}),i}),l.default.useEffect(()=>{!r.current||o({components:e.components})||r.current.updateOptions({createComponent:t=>new Z(t.id,e.components[t.name],{addPortal:a})})},[e.components]),l.default.useEffect(()=>{var t;if(!r.current||o({headerComponents:e.headerComponents}))return;let n=(t=e.headerComponents)==null?{}:t;r.current.updateOptions({createHeaderComponent:e=>new Z(e.id,n[e.name],{addPortal:a})})},[e.headerComponents]),l.default.useEffect(()=>{if(!r.current)return()=>{};let t=r.current.onDidDrop(t=>{e.onDidDrop&&e.onDidDrop(t)});return()=>{t.dispose()}},[e.onDidDrop]),l.default.createElement(`div`,{style:{height:`100%`,width:`100%`},ref:n},i)});$.displayName=`PaneviewComponent`,exports.DockviewDefaultTab=W,exports.DockviewReact=L,exports.GridviewReact=X,exports.PaneviewReact=$,exports.ReactPart=b,exports.ReactPartContext=y,exports.SplitviewReact=q,exports.isReactComponent=S,exports.useAppliedOptions=E,exports.useKeptInstance=T,exports.usePortalsLifecycle=x,Object.keys(c).forEach(function(e){e!=="default"&&!Object.prototype.hasOwnProperty.call(exports,e)&&Object.defineProperty(exports,e,{enumerable:!0,get:function(){return c[e]}})});
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=Object.getOwnPropertyNames,i=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty,o=(e,i,o,s)=>{if(i&&typeof i==`object`||typeof i==`function`)for(var c=r(i),l=0,u=c.length,d;l<u;l++)d=c[l],!a.call(e,d)&&d!==o&&t(e,d,{get:(e=>i[e]).bind(null,d),enumerable:!(s=n(i,d))||s.enumerable});return e},s=(n,r,a)=>(a=n==null?{}:e(i(n)),o(r||!n||!n.__esModule?t(a,`default`,{value:n,enumerable:!0}):a,n));let c=require("dockview"),l=require("react");l=s(l);let u=require("react-dom");u=s(u);function d(e){"@babel/helpers - typeof";return d=typeof Symbol==`function`&&typeof Symbol.iterator==`symbol`?function(e){return typeof e}:function(e){return e&&typeof Symbol==`function`&&e.constructor===Symbol&&e!==Symbol.prototype?`symbol`:typeof e},d(e)}function f(e,t){if(d(e)!=`object`||!e)return e;var n=e[Symbol.toPrimitive];if(n!==void 0){var r=n.call(e,t||`default`);if(d(r)!=`object`)return r;throw TypeError(`@@toPrimitive must return a primitive value.`)}return(t===`string`?String:Number)(e)}function p(e){var t=f(e,`string`);return d(t)==`symbol`?t:t+``}function m(e,t,n){return(t=p(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function h(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),n.push.apply(n,r)}return n}function g(e){for(var t=1;t<arguments.length;t++){var n=arguments[t]==null?{}:arguments[t];t%2?h(Object(n),!0).forEach(function(t){m(e,t,n[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):h(Object(n)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))})}return e}const _=(e,t)=>{let[,n]=l.default.useState(0),r=l.default.useRef(e.componentProps);return l.default.useImperativeHandle(t,()=>({update:e=>{r.current=g(g({},r.current),e),n(e=>e+1)}}),[]),l.default.createElement(e.component,r.current)};_.displayName=`DockviewReactJsBridge`;const v=(()=>{let e=1;return{next:()=>`dockview_react_portal_key_${(e++).toString()}`}})(),y=l.default.createContext({});var b=class{constructor(e,t,n,r,i){this.parent=e,this.portalStore=t,this.component=n,this.parameters=r,this.context=i,this._initialProps={},this.disposed=!1,this.createPortal()}update(e){if(this.disposed)throw Error(`invalid operation: resource is already disposed`);this.componentInstance?this.componentInstance.update(e):this._initialProps=g(g({},this._initialProps),e)}createPortal(){if(this.disposed)throw Error(`invalid operation: resource is already disposed`);if(!S(this.component))throw Error(`Dockview: Only React.memo(...), React.ForwardRef(...) and functional components are accepted as components`);let e=l.default.createElement(l.default.forwardRef(_),{component:this.component,componentProps:this.parameters,ref:e=>{this.componentInstance=e,Object.keys(this._initialProps).length>0&&(this.componentInstance.update(this._initialProps),this._initialProps={})}}),t=this.context?l.default.createElement(y.Provider,{value:this.context},e):e,n=u.default.createPortal(t,this.parent,v.next());this.ref={portal:n,disposable:this.portalStore.addPortal(n)}}dispose(){var e;(e=this.ref)==null||e.disposable.dispose(),this.disposed=!0}};const x=()=>{let[e,t]=l.default.useState([]);return l.default.useDebugValue(`Portal count: ${e.length}`),[e,l.default.useCallback(e=>{t(t=>[...t,e]);let n=!1;return c.DockviewDisposable.from(()=>{if(n)throw Error(`invalid operation: resource already disposed`);n=!0,t(t=>t.filter(t=>t!==e))})},[])]};function S(e){return typeof e==`function`||!!(e!=null&&e.$$typeof)}function C(e,t){let n=e=>e instanceof ShadowRoot?e.host:e.parentNode,r=new Set,i=new MutationObserver(n=>{if(!e.isConnected){i.disconnect(),t();return}for(let e of n)for(let t of e.removedNodes)if(r.has(t)){a();return}}),a=()=>{i.disconnect(),r.clear();for(let t=n(e);t;t=n(t))r.add(t),i.observe(t,{childList:!0})};return a(),c.DockviewDisposable.from(()=>i.disconnect())}const w=Number.parseInt(l.default.version,10)>=18;function T(e,t,n){let r=l.default.useRef(void 0);l.default.useEffect(()=>{var i,a;let o=e.current;if(!o)return;(i=r.current)==null||i.dispose(),r.current=void 0;let s=(a=t.current)==null?n(o):a;return t.current=s,()=>{let e=()=>{r.current=void 0,t.current=void 0,s.dispose()};w&&o.isConnected&&typeof MutationObserver<`u`?r.current=C(o,e):e()}},[])}function E(e){let t=l.default.useRef({instance:void 0,values:new Map});return l.default.useCallback(n=>{t.current.instance!==e.current&&(t.current={instance:e.current,values:new Map});let r=t.current.values,i=!0;for(let[e,t]of Object.entries(n))r.has(e)&&r.get(e)!==t&&(i=!1),r.set(e,t);return i},[e])}var D=class{get element(){return this._element}constructor(e,t,n){this.id=e,this.component=t,this.reactPortalStore=n,this._onDidFocus=new c.DockviewEmitter,this.onDidFocus=this._onDidFocus.event,this._onDidBlur=new c.DockviewEmitter,this.onDidBlur=this._onDidBlur.event,this._element=document.createElement(`div`),this._element.className=`dv-react-part`,this._element.style.height=`100%`,this._element.style.width=`100%`}focus(){}init(e){this.part=new b(this.element,this.reactPortalStore,this.component,{params:e.params,api:e.api,containerApi:e.containerApi})}update(e){var t;(t=this.part)==null||t.update({params:e.params})}layout(e,t){}dispose(){var e;this._onDidFocus.dispose(),this._onDidBlur.dispose(),(e=this.part)==null||e.dispose()}},O=class{get element(){return this._element}constructor(e,t,n){this.id=e,this.component=t,this.reactPortalStore=n,this._element=document.createElement(`div`),this._element.className=`dv-react-part`,this._element.style.height=`100%`,this._element.style.width=`100%`}focus(){}init(e){this.part=new b(this.element,this.reactPortalStore,this.component,{params:e.params,api:e.api,containerApi:e.containerApi,tabLocation:e.tabLocation})}update(e){var t;(t=this.part)==null||t.update({params:e.params})}layout(e,t){}dispose(){var e;(e=this.part)==null||e.dispose()}},k=class{get element(){return this._element}constructor(e,t,n){this.id=e,this.component=t,this.reactPortalStore=n,this._element=document.createElement(`div`),this._element.className=`dv-react-part`,this._element.style.height=`100%`,this._element.style.width=`100%`}init(e){this.part=new b(this.element,this.reactPortalStore,this.component,{group:e.group,containerApi:e.containerApi})}focus(){}update(e){var t,n,r;this.parameters&&(this.parameters.params=e.params),(t=this.part)==null||t.update({params:(n=(r=this.parameters)==null?void 0:r.params)==null?{}:n})}layout(e,t){}dispose(){var e;(e=this.part)==null||e.dispose()}},A=class{get element(){return this._element}get part(){return this._part}constructor(e,t,n){this.component=e,this.reactPortalStore=t,this._group=n,this.mutableDisposable=new c.DockviewMutableDisposable,this._element=document.createElement(`div`),this._element.className=`dv-react-part`,this._element.style.height=`100%`,this._element.style.width=`100%`}init(e){this.mutableDisposable.value=new c.DockviewCompositeDisposable(this._group.model.onDidAddPanel(()=>{this.updatePanels()}),this._group.model.onDidRemovePanel(()=>{this.updatePanels()}),this._group.model.onDidActivePanelChange(()=>{this.updateActivePanel()}),e.api.onDidActiveChange(()=>{this.updateGroupActive()}),e.api.onDidLocationChange(e=>{this.updateLocation(e.location)})),this._part=new b(this.element,this.reactPortalStore,this.component,{api:e.api,containerApi:e.containerApi,panels:this._group.model.panels,activePanel:this._group.model.activePanel,isGroupActive:this._group.api.isActive,group:this._group,headerPosition:this._group.model.headerPosition,location:e.api.location})}dispose(){var e;this.mutableDisposable.dispose(),(e=this._part)==null||e.dispose()}update(e){var t;(t=this._part)==null||t.update(e.params)}updatePanels(){this.update({params:{panels:this._group.model.panels}})}updateActivePanel(){this.update({params:{activePanel:this._group.model.activePanel}})}updateGroupActive(){this.update({params:{isGroupActive:this._group.api.isActive}})}updateLocation(e){this.update({params:{location:e}})}},j=class{get element(){return this._element}constructor(e,t,n){this.id=e,this.component=t,this.reactPortalStore=n,this._element=document.createElement(`div`),this._element.className=`dv-react-part`,this._element.style.height=`100%`,this._element.style.width=`100%`}init(e){this.part=new b(this._element,this.reactPortalStore,this.component,e)}dispose(){var e;(e=this.part)==null||e.dispose()}},M=class{get element(){return this._element}constructor(e,t){this.component=e,this.reactPortalStore=t,this._element=document.createElement(`div`),this._element.className=`dv-react-part`,this._element.style.display=`inline-flex`}init(e){this.part=new b(this._element,this.reactPortalStore,this.component,{tabGroup:e.tabGroup,api:e.api})}update(e){var t;(t=this.part)==null||t.update({tabGroup:e.tabGroup})}dispose(){var e;(e=this.part)==null||e.dispose()}},N=class{get element(){return this._element}constructor(e,t){this.component=e,this.reactPortalStore=t,this._element=document.createElement(`div`),this._element.className=`dv-react-part`,this._element.style.display=`inline-flex`}init(e){this.part=new b(this._element,this.reactPortalStore,this.component,{group:e.group,api:e.api})}dispose(){var e;(e=this.part)==null||e.dispose()}};function P(e,t){return e?n=>new A(e,t,n):void 0}const F=`props.defaultTabComponent`;function I(e){return c.PROPERTY_KEYS_DOCKVIEW.reduce((t,n)=>(n in e&&(t[n]=e[n]),t),{})}const L=l.default.forwardRef((e,t)=>{let n=l.default.useRef(null),r=l.default.useRef(void 0),[i,a]=x(),o=E(r);l.default.useImperativeHandle(t,()=>n.current,[]);let s=l.default.useRef({});return l.default.useEffect(()=>{let t={};c.PROPERTY_KEYS_DOCKVIEW.forEach(n=>{let r=n,i=e[r];r in e&&i!==s.current[r]&&(t[r]=i)}),r.current&&Object.keys(t).length>0&&r.current.updateOptions(t),s.current=e},c.PROPERTY_KEYS_DOCKVIEW.map(t=>e[t])),T(n,r,t=>{let n=g({},e.tabComponents);e.defaultTabComponent&&(n[F]=e.defaultTabComponent);let r={createLeftHeaderActionComponent:P(e.leftHeaderActionsComponent,{addPortal:a}),createRightHeaderActionComponent:P(e.rightHeaderActionsComponent,{addPortal:a}),createPrefixHeaderActionComponent:P(e.prefixHeaderActionsComponent,{addPortal:a}),createComponent:t=>new D(t.id,e.components[t.name],{addPortal:a}),createTabComponent(e){return new O(e.id,n[e.name],{addPortal:a})},createWatermarkComponent:e.watermarkComponent?()=>new k(`watermark`,e.watermarkComponent,{addPortal:a}):void 0,defaultTabComponent:e.defaultTabComponent?F:void 0,createContextMenuItemComponent:e=>{if(e.component)return new j(e.id,e.component,{addPortal:a})}},i=I(e);if(e.tabGroupChipComponent){let t=e.tabGroupChipComponent;i.createTabGroupChipComponent=()=>new M(t,{addPortal:a})}if(e.groupDragGhostComponent){let t=e.groupDragGhostComponent;i.createGroupDragGhostComponent=()=>new N(t,{addPortal:a})}let o=(0,c.createDockview)(t,g(g({},i),r)),{clientWidth:s,clientHeight:l}=t;return o.layout(s,l),e.onReady&&e.onReady({api:o}),o}),l.default.useEffect(()=>{if(!r.current)return()=>{};let t=r.current.onDidDrop(t=>{e.onDidDrop&&e.onDidDrop(t)});return()=>{t.dispose()}},[e.onDidDrop]),l.default.useEffect(()=>{if(!r.current)return()=>{};let t=r.current.onWillDrop(t=>{e.onWillDrop&&e.onWillDrop(t)});return()=>{t.dispose()}},[e.onWillDrop]),l.default.useEffect(()=>{!r.current||o({tabGroupChipComponent:e.tabGroupChipComponent})||r.current.updateOptions({createTabGroupChipComponent:e.tabGroupChipComponent?()=>new M(e.tabGroupChipComponent,{addPortal:a}):void 0})},[e.tabGroupChipComponent]),l.default.useEffect(()=>{!r.current||o({groupDragGhostComponent:e.groupDragGhostComponent})||r.current.updateOptions({createGroupDragGhostComponent:e.groupDragGhostComponent?()=>new N(e.groupDragGhostComponent,{addPortal:a}):void 0})},[e.groupDragGhostComponent]),l.default.useEffect(()=>{!r.current||o({components:e.components})||r.current.updateOptions({createComponent:t=>new D(t.id,e.components[t.name],{addPortal:a})})},[e.components]),l.default.useEffect(()=>{if(!r.current||o({tabComponents:e.tabComponents,defaultTabComponent:e.defaultTabComponent}))return;let t=g({},e.tabComponents);e.defaultTabComponent&&(t[F]=e.defaultTabComponent),r.current.updateOptions({defaultTabComponent:e.defaultTabComponent?F:void 0,createTabComponent(e){return new O(e.id,t[e.name],{addPortal:a})}})},[e.tabComponents,e.defaultTabComponent]),l.default.useEffect(()=>{!r.current||o({watermarkComponent:e.watermarkComponent})||r.current.updateOptions({createWatermarkComponent:e.watermarkComponent?()=>new k(`watermark`,e.watermarkComponent,{addPortal:a}):void 0})},[e.watermarkComponent]),l.default.useEffect(()=>{!r.current||o({rightHeaderActionsComponent:e.rightHeaderActionsComponent})||r.current.updateOptions({createRightHeaderActionComponent:P(e.rightHeaderActionsComponent,{addPortal:a})})},[e.rightHeaderActionsComponent]),l.default.useEffect(()=>{!r.current||o({leftHeaderActionsComponent:e.leftHeaderActionsComponent})||r.current.updateOptions({createLeftHeaderActionComponent:P(e.leftHeaderActionsComponent,{addPortal:a})})},[e.leftHeaderActionsComponent]),l.default.useEffect(()=>{!r.current||o({prefixHeaderActionsComponent:e.prefixHeaderActionsComponent})||r.current.updateOptions({createPrefixHeaderActionComponent:P(e.prefixHeaderActionsComponent,{addPortal:a})})},[e.prefixHeaderActionsComponent]),l.default.createElement(`div`,{style:{height:`100%`,width:`100%`},ref:n},i)});L.displayName=`DockviewComponent`;const R=()=>l.default.createElement(`svg`,{height:`11`,width:`11`,viewBox:`0 0 28 28`,"aria-hidden":`false`,focusable:!1,className:`dv-svg`},l.default.createElement(`path`,{d:`M2.1 27.3L0 25.2L11.55 13.65L0 2.1L2.1 0L13.65 11.55L25.2 0L27.3 2.1L15.75 13.65L27.3 25.2L25.2 27.3L13.65 15.75L2.1 27.3Z`})),ee=()=>l.default.createElement(`svg`,{height:`11`,width:`11`,viewBox:`0 0 24 24`,"aria-hidden":`false`,focusable:!1,className:`dv-svg`},l.default.createElement(`path`,{d:`M16 9V4h1c.55 0 1-.45 1-1s-.45-1-1-1H6c-.55 0-1 .45-1 1s.45 1 1 1h1v5c0 1.66-1.34 3-3 3v2h5.97v7l1 1 1-1v-7H19v-2c-1.66 0-3-1.34-3-3z`}));function z(e,t){if(e==null)return{};var n={};for(var r in e)if({}.hasOwnProperty.call(e,r)){if(t.includes(r))continue;n[r]=e[r]}return n}function B(e,t){if(e==null)return{};var n,r,i=z(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)n=a[r],t.includes(n)||{}.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}const V=[`api`,`containerApi`,`params`,`hideClose`,`closeActionOverride`,`onPointerDown`,`onPointerUp`,`onPointerLeave`,`tabLocation`];function H(e){let[t,n]=l.default.useState(e.title);return l.default.useEffect(()=>{let r=e.onDidTitleChange(e=>{n(e.title)});return t!==e.title&&n(e.title),()=>{r.dispose()}},[e]),t}function U(e){let[t,n]=l.default.useState(e.isPinned);return l.default.useEffect(()=>{let r=e.onDidChangePinned(e=>{n(e.isPinned)});return t!==e.isPinned&&n(e.isPinned),()=>{r.dispose()}},[e]),t}const W=e=>{let{api:t,containerApi:n,params:r,hideClose:i,closeActionOverride:a,onPointerDown:o,onPointerUp:s,onPointerLeave:c,tabLocation:u}=e,d=B(e,V),f=H(t),p=U(t),m=l.default.useRef(!1),h=l.default.useCallback(e=>{e.preventDefault(),a?a():t.close()},[t,a]),_=l.default.useCallback(e=>{e.preventDefault()},[]),v=l.default.useCallback(e=>{m.current=e.button===1,o==null||o(e)},[o]),y=l.default.useCallback(e=>{m.current&&e.button===1&&!i&&(m.current=!1,h(e)),s==null||s(e)},[s,h,i]),b=l.default.useCallback(e=>{m.current=!1,c==null||c(e)},[c]);return l.default.createElement(`div`,g(g({"data-testid":`dockview-dv-default-tab`},d),{},{onPointerDown:v,onPointerUp:y,onPointerLeave:b,className:`dv-default-tab`}),p&&l.default.createElement(`div`,{className:`dv-tab-pin`},l.default.createElement(ee,null)),l.default.createElement(`span`,{className:`dv-default-tab-content`},f),!i&&l.default.createElement(`button`,{type:`button`,className:`dv-default-tab-action`,"aria-label":`Close tab`,onPointerDown:_,onClick:h},l.default.createElement(R,null)))};var G=class extends c.SplitviewPanel{constructor(e,t,n,r){super(e,t),this.reactComponent=n,this.reactPortalStore=r}getComponent(){var e,t;return new b(this.element,this.reactPortalStore,this.reactComponent,{params:(e=(t=this._params)==null?void 0:t.params)==null?{}:e,api:this.api,containerApi:new c.SplitviewApi(this._params.accessor)})}};function K(e){return c.PROPERTY_KEYS_SPLITVIEW.reduce((t,n)=>(n in e&&(t[n]=e[n]),t),{})}const q=l.default.forwardRef((e,t)=>{let n=l.default.useRef(null),r=l.default.useRef(void 0),[i,a]=x(),o=E(r);l.default.useImperativeHandle(t,()=>n.current,[]);let s=l.default.useRef({});return l.default.useEffect(()=>{let t={};c.PROPERTY_KEYS_SPLITVIEW.forEach(n=>{let r=n,i=e[r];r in e&&i!==s.current[r]&&(t[r]=i)}),r.current&&Object.keys(t).length>0&&r.current.updateOptions(t),s.current=e},c.PROPERTY_KEYS_SPLITVIEW.map(t=>e[t])),T(n,r,t=>{let n=(0,c.createSplitview)(t,g(g({},K(e)),{createComponent:t=>new G(t.id,t.name,e.components[t.name],{addPortal:a})})),{clientWidth:r,clientHeight:i}=t;return n.layout(r,i),e.onReady&&e.onReady({api:n}),n}),l.default.useEffect(()=>{!r.current||o({components:e.components})||r.current.updateOptions({createComponent:t=>new G(t.id,t.name,e.components[t.name],{addPortal:a})})},[e.components]),l.default.createElement(`div`,{style:{height:`100%`,width:`100%`},ref:n},i)});q.displayName=`SplitviewComponent`;var J=class extends c.GridviewPanel{constructor(e,t,n,r){super(e,t),this.reactComponent=n,this.reactPortalStore=r}getComponent(){var e,t;return new b(this.element,this.reactPortalStore,this.reactComponent,{params:(e=(t=this._params)==null?void 0:t.params)==null?{}:e,api:this.api,containerApi:new c.GridviewApi(this._params.accessor)})}};function Y(e){return c.PROPERTY_KEYS_GRIDVIEW.reduce((t,n)=>(n in e&&(t[n]=e[n]),t),{})}const X=l.default.forwardRef((e,t)=>{let n=l.default.useRef(null),r=l.default.useRef(void 0),[i,a]=x(),o=E(r);l.default.useImperativeHandle(t,()=>n.current,[]);let s=l.default.useRef({});return l.default.useEffect(()=>{let t={};c.PROPERTY_KEYS_GRIDVIEW.forEach(n=>{let r=n,i=e[r];r in e&&i!==s.current[r]&&(t[r]=i)}),r.current&&Object.keys(t).length>0&&r.current.updateOptions(t),s.current=e},c.PROPERTY_KEYS_GRIDVIEW.map(t=>e[t])),T(n,r,t=>{let n=(0,c.createGridview)(t,g(g({},Y(e)),{createComponent:t=>new J(t.id,t.name,e.components[t.name],{addPortal:a})})),{clientWidth:r,clientHeight:i}=t;return n.layout(r,i),e.onReady&&e.onReady({api:n}),n}),l.default.useEffect(()=>{!r.current||o({components:e.components})||r.current.updateOptions({createComponent:t=>new J(t.id,t.name,e.components[t.name],{addPortal:a})})},[e.components]),l.default.createElement(`div`,{style:{height:`100%`,width:`100%`},ref:n},i)});X.displayName=`GridviewComponent`;var Z=class{get element(){return this._element}constructor(e,t,n){this.id=e,this.component=t,this.reactPortalStore=n,this._element=document.createElement(`div`),this._element.style.height=`100%`,this._element.style.width=`100%`}init(e){this.part=new b(this.element,this.reactPortalStore,this.component,{params:e.params,api:e.api,title:e.title,containerApi:e.containerApi})}toJSON(){return{id:this.id}}update(e){var t;(t=this.part)==null||t.update({params:e.params})}dispose(){var e;(e=this.part)==null||e.dispose()}};function Q(e){return c.PROPERTY_KEYS_PANEVIEW.reduce((t,n)=>(n in e&&(t[n]=e[n]),t),{})}const $=l.default.forwardRef((e,t)=>{let n=l.default.useRef(null),r=l.default.useRef(void 0),[i,a]=x(),o=E(r);l.default.useImperativeHandle(t,()=>n.current,[]);let s=l.default.useRef({});return l.default.useEffect(()=>{let t={};c.PROPERTY_KEYS_PANEVIEW.forEach(n=>{let r=n,i=e[r];r in e&&i!==s.current[r]&&(t[r]=i)}),r.current&&Object.keys(t).length>0&&r.current.updateOptions(t),s.current=e},c.PROPERTY_KEYS_PANEVIEW.map(t=>e[t])),T(n,r,t=>{var n;let r=(n=e.headerComponents)==null?{}:n,i=(0,c.createPaneview)(t,g(g({},Q(e)),{createComponent:t=>new Z(t.id,e.components[t.name],{addPortal:a}),createHeaderComponent:e=>new Z(e.id,r[e.name],{addPortal:a})})),{clientWidth:o,clientHeight:s}=t;return i.layout(o,s),e.onReady&&e.onReady({api:i}),i}),l.default.useEffect(()=>{!r.current||o({components:e.components})||r.current.updateOptions({createComponent:t=>new Z(t.id,e.components[t.name],{addPortal:a})})},[e.components]),l.default.useEffect(()=>{var t;if(!r.current||o({headerComponents:e.headerComponents}))return;let n=(t=e.headerComponents)==null?{}:t;r.current.updateOptions({createHeaderComponent:e=>new Z(e.id,n[e.name],{addPortal:a})})},[e.headerComponents]),l.default.useEffect(()=>{if(!r.current)return()=>{};let t=r.current.onDidDrop(t=>{e.onDidDrop&&e.onDidDrop(t)});return()=>{t.dispose()}},[e.onDidDrop]),l.default.createElement(`div`,{style:{height:`100%`,width:`100%`},ref:n},i)});$.displayName=`PaneviewComponent`,exports.DockviewDefaultTab=W,exports.DockviewReact=L,exports.GridviewReact=X,exports.PaneviewReact=$,exports.ReactPart=b,exports.ReactPartContext=y,exports.SplitviewReact=q,exports.isReactComponent=S,exports.useAppliedOptions=E,exports.useKeptInstance=T,exports.usePortalsLifecycle=x,Object.keys(c).forEach(function(e){e!=="default"&&!Object.prototype.hasOwnProperty.call(exports,e)&&Object.defineProperty(exports,e,{enumerable:!0,get:function(){return c[e]}})});

package/dist/package/main.esm.min.mjs

@@ -1,7 +1,7 @@
 /**
 * dockview-react
-* @version 8.7.1
+* @version 8.8.1
 * @link https://github.com/dockview/dockview
 * @license MIT
 */
-import{DockviewCompositeDisposable as e,DockviewDisposable as t,DockviewEmitter as n,DockviewMutableDisposable as r,GridviewApi as i,GridviewPanel as a,PROPERTY_KEYS_DOCKVIEW as o,PROPERTY_KEYS_GRIDVIEW as s,PROPERTY_KEYS_PANEVIEW as c,PROPERTY_KEYS_SPLITVIEW as l,SplitviewApi as u,SplitviewPanel as d,createDockview as f,createGridview as p,createPaneview as m,createSplitview as h}from"dockview";import g from"react";import _ from"react-dom";export*from"dockview";function v(e){"@babel/helpers - typeof";return v=typeof Symbol==`function`&&typeof Symbol.iterator==`symbol`?function(e){return typeof e}:function(e){return e&&typeof Symbol==`function`&&e.constructor===Symbol&&e!==Symbol.prototype?`symbol`:typeof e},v(e)}function y(e,t){if(v(e)!=`object`||!e)return e;var n=e[Symbol.toPrimitive];if(n!==void 0){var r=n.call(e,t||`default`);if(v(r)!=`object`)return r;throw TypeError(`@@toPrimitive must return a primitive value.`)}return(t===`string`?String:Number)(e)}function ee(e){var t=y(e,`string`);return v(t)==`symbol`?t:t+``}function te(e,t,n){return(t=ee(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function b(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),n.push.apply(n,r)}return n}function x(e){for(var t=1;t<arguments.length;t++){var n=arguments[t]==null?{}:arguments[t];t%2?b(Object(n),!0).forEach(function(t){te(e,t,n[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):b(Object(n)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))})}return e}const S=(e,t)=>{let[,n]=g.useState(0),r=g.useRef(e.componentProps);return g.useImperativeHandle(t,()=>({update:e=>{r.current=x(x({},r.current),e),n(e=>e+1)}}),[]),g.createElement(e.component,r.current)};S.displayName=`DockviewReactJsBridge`;const ne=(()=>{let e=1;return{next:()=>`dockview_react_portal_key_${(e++).toString()}`}})(),C=g.createContext({});var w=class{constructor(e,t,n,r,i){this.parent=e,this.portalStore=t,this.component=n,this.parameters=r,this.context=i,this._initialProps={},this.disposed=!1,this.createPortal()}update(e){if(this.disposed)throw Error(`invalid operation: resource is already disposed`);this.componentInstance?this.componentInstance.update(e):this._initialProps=x(x({},this._initialProps),e)}createPortal(){if(this.disposed)throw Error(`invalid operation: resource is already disposed`);if(!E(this.component))throw Error(`Dockview: Only React.memo(...), React.ForwardRef(...) and functional components are accepted as components`);let e=g.createElement(g.forwardRef(S),{component:this.component,componentProps:this.parameters,ref:e=>{this.componentInstance=e,Object.keys(this._initialProps).length>0&&(this.componentInstance.update(this._initialProps),this._initialProps={})}}),t=this.context?g.createElement(C.Provider,{value:this.context},e):e,n=_.createPortal(t,this.parent,ne.next());this.ref={portal:n,disposable:this.portalStore.addPortal(n)}}dispose(){var e;(e=this.ref)==null||e.disposable.dispose(),this.disposed=!0}};const T=()=>{let[e,n]=g.useState([]);return g.useDebugValue(`Portal count: ${e.length}`),[e,g.useCallback(e=>{n(t=>[...t,e]);let r=!1;return t.from(()=>{if(r)throw Error(`invalid operation: resource already disposed`);r=!0,n(t=>t.filter(t=>t!==e))})},[])]};function E(e){return typeof e==`function`||!!(e!=null&&e.$$typeof)}function D(e,n){let r=e=>e instanceof ShadowRoot?e.host:e.parentNode,i=new Set,a=new MutationObserver(t=>{if(!e.isConnected){a.disconnect(),n();return}for(let e of t)for(let t of e.removedNodes)if(i.has(t)){o();return}}),o=()=>{a.disconnect(),i.clear();for(let t=r(e);t;t=r(t))i.add(t),a.observe(t,{childList:!0})};return o(),t.from(()=>a.disconnect())}const re=Number.parseInt(g.version,10)>=18;function O(e,t,n){let r=g.useRef(void 0);g.useEffect(()=>{var i,a;let o=e.current;if(!o)return;(i=r.current)==null||i.dispose(),r.current=void 0;let s=(a=t.current)==null?n(o):a;return t.current=s,()=>{let e=()=>{r.current=void 0,t.current=void 0,s.dispose()};re&&o.isConnected&&typeof MutationObserver<`u`?r.current=D(o,e):e()}},[])}function k(e){let t=g.useRef({instance:void 0,values:new Map});return g.useCallback(n=>{t.current.instance!==e.current&&(t.current={instance:e.current,values:new Map});let r=t.current.values,i=!0;for(let[e,t]of Object.entries(n))r.has(e)&&r.get(e)!==t&&(i=!1),r.set(e,t);return i},[e])}var A=class{get element(){return this._element}constructor(e,t,r){this.id=e,this.component=t,this.reactPortalStore=r,this._onDidFocus=new n,this.onDidFocus=this._onDidFocus.event,this._onDidBlur=new n,this.onDidBlur=this._onDidBlur.event,this._element=document.createElement(`div`),this._element.className=`dv-react-part`,this._element.style.height=`100%`,this._element.style.width=`100%`}focus(){}init(e){this.part=new w(this.element,this.reactPortalStore,this.component,{params:e.params,api:e.api,containerApi:e.containerApi})}update(e){var t;(t=this.part)==null||t.update({params:e.params})}layout(e,t){}dispose(){var e;this._onDidFocus.dispose(),this._onDidBlur.dispose(),(e=this.part)==null||e.dispose()}},j=class{get element(){return this._element}constructor(e,t,n){this.id=e,this.component=t,this.reactPortalStore=n,this._element=document.createElement(`div`),this._element.className=`dv-react-part`,this._element.style.height=`100%`,this._element.style.width=`100%`}focus(){}init(e){this.part=new w(this.element,this.reactPortalStore,this.component,{params:e.params,api:e.api,containerApi:e.containerApi,tabLocation:e.tabLocation})}update(e){var t;(t=this.part)==null||t.update({params:e.params})}layout(e,t){}dispose(){var e;(e=this.part)==null||e.dispose()}},M=class{get element(){return this._element}constructor(e,t,n){this.id=e,this.component=t,this.reactPortalStore=n,this._element=document.createElement(`div`),this._element.className=`dv-react-part`,this._element.style.height=`100%`,this._element.style.width=`100%`}init(e){this.part=new w(this.element,this.reactPortalStore,this.component,{group:e.group,containerApi:e.containerApi})}focus(){}update(e){var t,n,r;this.parameters&&(this.parameters.params=e.params),(t=this.part)==null||t.update({params:(n=(r=this.parameters)==null?void 0:r.params)==null?{}:n})}layout(e,t){}dispose(){var e;(e=this.part)==null||e.dispose()}},N=class{get element(){return this._element}get part(){return this._part}constructor(e,t,n){this.component=e,this.reactPortalStore=t,this._group=n,this.mutableDisposable=new r,this._element=document.createElement(`div`),this._element.className=`dv-react-part`,this._element.style.height=`100%`,this._element.style.width=`100%`}init(t){this.mutableDisposable.value=new e(this._group.model.onDidAddPanel(()=>{this.updatePanels()}),this._group.model.onDidRemovePanel(()=>{this.updatePanels()}),this._group.model.onDidActivePanelChange(()=>{this.updateActivePanel()}),t.api.onDidActiveChange(()=>{this.updateGroupActive()}),t.api.onDidLocationChange(e=>{this.updateLocation(e.location)})),this._part=new w(this.element,this.reactPortalStore,this.component,{api:t.api,containerApi:t.containerApi,panels:this._group.model.panels,activePanel:this._group.model.activePanel,isGroupActive:this._group.api.isActive,group:this._group,headerPosition:this._group.model.headerPosition,location:t.api.location})}dispose(){var e;this.mutableDisposable.dispose(),(e=this._part)==null||e.dispose()}update(e){var t;(t=this._part)==null||t.update(e.params)}updatePanels(){this.update({params:{panels:this._group.model.panels}})}updateActivePanel(){this.update({params:{activePanel:this._group.model.activePanel}})}updateGroupActive(){this.update({params:{isGroupActive:this._group.api.isActive}})}updateLocation(e){this.update({params:{location:e}})}},ie=class{get element(){return this._element}constructor(e,t,n){this.id=e,this.component=t,this.reactPortalStore=n,this._element=document.createElement(`div`),this._element.className=`dv-react-part`,this._element.style.height=`100%`,this._element.style.width=`100%`}init(e){this.part=new w(this._element,this.reactPortalStore,this.component,e)}dispose(){var e;(e=this.part)==null||e.dispose()}},P=class{get element(){return this._element}constructor(e,t){this.component=e,this.reactPortalStore=t,this._element=document.createElement(`div`),this._element.className=`dv-react-part`,this._element.style.display=`inline-flex`}init(e){this.part=new w(this._element,this.reactPortalStore,this.component,{tabGroup:e.tabGroup,api:e.api})}update(e){var t;(t=this.part)==null||t.update({tabGroup:e.tabGroup})}dispose(){var e;(e=this.part)==null||e.dispose()}},F=class{get element(){return this._element}constructor(e,t){this.component=e,this.reactPortalStore=t,this._element=document.createElement(`div`),this._element.className=`dv-react-part`,this._element.style.display=`inline-flex`}init(e){this.part=new w(this._element,this.reactPortalStore,this.component,{group:e.group,api:e.api})}dispose(){var e;(e=this.part)==null||e.dispose()}};function I(e,t){return e?n=>new N(e,t,n):void 0}const L=`props.defaultTabComponent`;function R(e){return o.reduce((t,n)=>(n in e&&(t[n]=e[n]),t),{})}const z=g.forwardRef((e,t)=>{let n=g.useRef(null),r=g.useRef(void 0),[i,a]=T(),s=k(r);g.useImperativeHandle(t,()=>n.current,[]);let c=g.useRef({});return g.useEffect(()=>{let t={};o.forEach(n=>{let r=n,i=e[r];r in e&&i!==c.current[r]&&(t[r]=i)}),r.current&&Object.keys(t).length>0&&r.current.updateOptions(t),c.current=e},o.map(t=>e[t])),O(n,r,t=>{let n=x({},e.tabComponents);e.defaultTabComponent&&(n[L]=e.defaultTabComponent);let r={createLeftHeaderActionComponent:I(e.leftHeaderActionsComponent,{addPortal:a}),createRightHeaderActionComponent:I(e.rightHeaderActionsComponent,{addPortal:a}),createPrefixHeaderActionComponent:I(e.prefixHeaderActionsComponent,{addPortal:a}),createComponent:t=>new A(t.id,e.components[t.name],{addPortal:a}),createTabComponent(e){return new j(e.id,n[e.name],{addPortal:a})},createWatermarkComponent:e.watermarkComponent?()=>new M(`watermark`,e.watermarkComponent,{addPortal:a}):void 0,defaultTabComponent:e.defaultTabComponent?L:void 0,createContextMenuItemComponent:e=>{if(e.component)return new ie(e.id,e.component,{addPortal:a})}},i=R(e);if(e.tabGroupChipComponent){let t=e.tabGroupChipComponent;i.createTabGroupChipComponent=()=>new P(t,{addPortal:a})}if(e.groupDragGhostComponent){let t=e.groupDragGhostComponent;i.createGroupDragGhostComponent=()=>new F(t,{addPortal:a})}let o=f(t,x(x({},i),r)),{clientWidth:s,clientHeight:c}=t;return o.layout(s,c),e.onReady&&e.onReady({api:o}),o}),g.useEffect(()=>{if(!r.current)return()=>{};let t=r.current.onDidDrop(t=>{e.onDidDrop&&e.onDidDrop(t)});return()=>{t.dispose()}},[e.onDidDrop]),g.useEffect(()=>{if(!r.current)return()=>{};let t=r.current.onWillDrop(t=>{e.onWillDrop&&e.onWillDrop(t)});return()=>{t.dispose()}},[e.onWillDrop]),g.useEffect(()=>{!r.current||s({tabGroupChipComponent:e.tabGroupChipComponent})||r.current.updateOptions({createTabGroupChipComponent:e.tabGroupChipComponent?()=>new P(e.tabGroupChipComponent,{addPortal:a}):void 0})},[e.tabGroupChipComponent]),g.useEffect(()=>{!r.current||s({groupDragGhostComponent:e.groupDragGhostComponent})||r.current.updateOptions({createGroupDragGhostComponent:e.groupDragGhostComponent?()=>new F(e.groupDragGhostComponent,{addPortal:a}):void 0})},[e.groupDragGhostComponent]),g.useEffect(()=>{!r.current||s({components:e.components})||r.current.updateOptions({createComponent:t=>new A(t.id,e.components[t.name],{addPortal:a})})},[e.components]),g.useEffect(()=>{if(!r.current||s({tabComponents:e.tabComponents,defaultTabComponent:e.defaultTabComponent}))return;let t=x({},e.tabComponents);e.defaultTabComponent&&(t[L]=e.defaultTabComponent),r.current.updateOptions({defaultTabComponent:e.defaultTabComponent?L:void 0,createTabComponent(e){return new j(e.id,t[e.name],{addPortal:a})}})},[e.tabComponents,e.defaultTabComponent]),g.useEffect(()=>{!r.current||s({watermarkComponent:e.watermarkComponent})||r.current.updateOptions({createWatermarkComponent:e.watermarkComponent?()=>new M(`watermark`,e.watermarkComponent,{addPortal:a}):void 0})},[e.watermarkComponent]),g.useEffect(()=>{!r.current||s({rightHeaderActionsComponent:e.rightHeaderActionsComponent})||r.current.updateOptions({createRightHeaderActionComponent:I(e.rightHeaderActionsComponent,{addPortal:a})})},[e.rightHeaderActionsComponent]),g.useEffect(()=>{!r.current||s({leftHeaderActionsComponent:e.leftHeaderActionsComponent})||r.current.updateOptions({createLeftHeaderActionComponent:I(e.leftHeaderActionsComponent,{addPortal:a})})},[e.leftHeaderActionsComponent]),g.useEffect(()=>{!r.current||s({prefixHeaderActionsComponent:e.prefixHeaderActionsComponent})||r.current.updateOptions({createPrefixHeaderActionComponent:I(e.prefixHeaderActionsComponent,{addPortal:a})})},[e.prefixHeaderActionsComponent]),g.createElement(`div`,{style:{height:`100%`,width:`100%`},ref:n},i)});z.displayName=`DockviewComponent`;const B=()=>g.createElement(`svg`,{height:`11`,width:`11`,viewBox:`0 0 28 28`,"aria-hidden":`false`,focusable:!1,className:`dv-svg`},g.createElement(`path`,{d:`M2.1 27.3L0 25.2L11.55 13.65L0 2.1L2.1 0L13.65 11.55L25.2 0L27.3 2.1L15.75 13.65L27.3 25.2L25.2 27.3L13.65 15.75L2.1 27.3Z`})),V=()=>g.createElement(`svg`,{height:`11`,width:`11`,viewBox:`0 0 24 24`,"aria-hidden":`false`,focusable:!1,className:`dv-svg`},g.createElement(`path`,{d:`M16 9V4h1c.55 0 1-.45 1-1s-.45-1-1-1H6c-.55 0-1 .45-1 1s.45 1 1 1h1v5c0 1.66-1.34 3-3 3v2h5.97v7l1 1 1-1v-7H19v-2c-1.66 0-3-1.34-3-3z`}));function H(e,t){if(e==null)return{};var n={};for(var r in e)if({}.hasOwnProperty.call(e,r)){if(t.includes(r))continue;n[r]=e[r]}return n}function U(e,t){if(e==null)return{};var n,r,i=H(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)n=a[r],t.includes(n)||{}.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}const W=[`api`,`containerApi`,`params`,`hideClose`,`closeActionOverride`,`onPointerDown`,`onPointerUp`,`onPointerLeave`,`tabLocation`];function G(e){let[t,n]=g.useState(e.title);return g.useEffect(()=>{let r=e.onDidTitleChange(e=>{n(e.title)});return t!==e.title&&n(e.title),()=>{r.dispose()}},[e]),t}function K(e){let[t,n]=g.useState(e.isPinned);return g.useEffect(()=>{let r=e.onDidChangePinned(e=>{n(e.isPinned)});return t!==e.isPinned&&n(e.isPinned),()=>{r.dispose()}},[e]),t}const q=e=>{let{api:t,containerApi:n,params:r,hideClose:i,closeActionOverride:a,onPointerDown:o,onPointerUp:s,onPointerLeave:c,tabLocation:l}=e,u=U(e,W),d=G(t),f=K(t),p=g.useRef(!1),m=g.useCallback(e=>{e.preventDefault(),a?a():t.close()},[t,a]),h=g.useCallback(e=>{e.preventDefault()},[]),_=g.useCallback(e=>{p.current=e.button===1,o==null||o(e)},[o]),v=g.useCallback(e=>{p.current&&e.button===1&&!i&&(p.current=!1,m(e)),s==null||s(e)},[s,m,i]),y=g.useCallback(e=>{p.current=!1,c==null||c(e)},[c]);return g.createElement(`div`,x(x({"data-testid":`dockview-dv-default-tab`},u),{},{onPointerDown:_,onPointerUp:v,onPointerLeave:y,className:`dv-default-tab`}),f&&g.createElement(`div`,{className:`dv-tab-pin`},g.createElement(V,null)),g.createElement(`span`,{className:`dv-default-tab-content`},d),!i&&g.createElement(`button`,{type:`button`,className:`dv-default-tab-action`,"aria-label":`Close tab`,onPointerDown:h,onClick:m},g.createElement(B,null)))};var J=class extends d{constructor(e,t,n,r){super(e,t),this.reactComponent=n,this.reactPortalStore=r}getComponent(){var e,t;return new w(this.element,this.reactPortalStore,this.reactComponent,{params:(e=(t=this._params)==null?void 0:t.params)==null?{}:e,api:this.api,containerApi:new u(this._params.accessor)})}};function ae(e){return l.reduce((t,n)=>(n in e&&(t[n]=e[n]),t),{})}const Y=g.forwardRef((e,t)=>{let n=g.useRef(null),r=g.useRef(void 0),[i,a]=T(),o=k(r);g.useImperativeHandle(t,()=>n.current,[]);let s=g.useRef({});return g.useEffect(()=>{let t={};l.forEach(n=>{let r=n,i=e[r];r in e&&i!==s.current[r]&&(t[r]=i)}),r.current&&Object.keys(t).length>0&&r.current.updateOptions(t),s.current=e},l.map(t=>e[t])),O(n,r,t=>{let n=h(t,x(x({},ae(e)),{createComponent:t=>new J(t.id,t.name,e.components[t.name],{addPortal:a})})),{clientWidth:r,clientHeight:i}=t;return n.layout(r,i),e.onReady&&e.onReady({api:n}),n}),g.useEffect(()=>{!r.current||o({components:e.components})||r.current.updateOptions({createComponent:t=>new J(t.id,t.name,e.components[t.name],{addPortal:a})})},[e.components]),g.createElement(`div`,{style:{height:`100%`,width:`100%`},ref:n},i)});Y.displayName=`SplitviewComponent`;var X=class extends a{constructor(e,t,n,r){super(e,t),this.reactComponent=n,this.reactPortalStore=r}getComponent(){var e,t;return new w(this.element,this.reactPortalStore,this.reactComponent,{params:(e=(t=this._params)==null?void 0:t.params)==null?{}:e,api:this.api,containerApi:new i(this._params.accessor)})}};function oe(e){return s.reduce((t,n)=>(n in e&&(t[n]=e[n]),t),{})}const Z=g.forwardRef((e,t)=>{let n=g.useRef(null),r=g.useRef(void 0),[i,a]=T(),o=k(r);g.useImperativeHandle(t,()=>n.current,[]);let c=g.useRef({});return g.useEffect(()=>{let t={};s.forEach(n=>{let r=n,i=e[r];r in e&&i!==c.current[r]&&(t[r]=i)}),r.current&&Object.keys(t).length>0&&r.current.updateOptions(t),c.current=e},s.map(t=>e[t])),O(n,r,t=>{let n=p(t,x(x({},oe(e)),{createComponent:t=>new X(t.id,t.name,e.components[t.name],{addPortal:a})})),{clientWidth:r,clientHeight:i}=t;return n.layout(r,i),e.onReady&&e.onReady({api:n}),n}),g.useEffect(()=>{!r.current||o({components:e.components})||r.current.updateOptions({createComponent:t=>new X(t.id,t.name,e.components[t.name],{addPortal:a})})},[e.components]),g.createElement(`div`,{style:{height:`100%`,width:`100%`},ref:n},i)});Z.displayName=`GridviewComponent`;var Q=class{get element(){return this._element}constructor(e,t,n){this.id=e,this.component=t,this.reactPortalStore=n,this._element=document.createElement(`div`),this._element.style.height=`100%`,this._element.style.width=`100%`}init(e){this.part=new w(this.element,this.reactPortalStore,this.component,{params:e.params,api:e.api,title:e.title,containerApi:e.containerApi})}toJSON(){return{id:this.id}}update(e){var t;(t=this.part)==null||t.update(e.params)}dispose(){var e;(e=this.part)==null||e.dispose()}};function se(e){return c.reduce((t,n)=>(n in e&&(t[n]=e[n]),t),{})}const $=g.forwardRef((e,t)=>{let n=g.useRef(null),r=g.useRef(void 0),[i,a]=T(),o=k(r);g.useImperativeHandle(t,()=>n.current,[]);let s=g.useRef({});return g.useEffect(()=>{let t={};c.forEach(n=>{let r=n,i=e[r];r in e&&i!==s.current[r]&&(t[r]=i)}),r.current&&Object.keys(t).length>0&&r.current.updateOptions(t),s.current=e},c.map(t=>e[t])),O(n,r,t=>{var n;let r=(n=e.headerComponents)==null?{}:n,i=m(t,x(x({},se(e)),{createComponent:t=>new Q(t.id,e.components[t.name],{addPortal:a}),createHeaderComponent:e=>new Q(e.id,r[e.name],{addPortal:a})})),{clientWidth:o,clientHeight:s}=t;return i.layout(o,s),e.onReady&&e.onReady({api:i}),i}),g.useEffect(()=>{!r.current||o({components:e.components})||r.current.updateOptions({createComponent:t=>new Q(t.id,e.components[t.name],{addPortal:a})})},[e.components]),g.useEffect(()=>{var t;if(!r.current||o({headerComponents:e.headerComponents}))return;let n=(t=e.headerComponents)==null?{}:t;r.current.updateOptions({createHeaderComponent:e=>new Q(e.id,n[e.name],{addPortal:a})})},[e.headerComponents]),g.useEffect(()=>{if(!r.current)return()=>{};let t=r.current.onDidDrop(t=>{e.onDidDrop&&e.onDidDrop(t)});return()=>{t.dispose()}},[e.onDidDrop]),g.createElement(`div`,{style:{height:`100%`,width:`100%`},ref:n},i)});$.displayName=`PaneviewComponent`;export{q as DockviewDefaultTab,z as DockviewReact,Z as GridviewReact,$ as PaneviewReact,w as ReactPart,C as ReactPartContext,Y as SplitviewReact,E as isReactComponent,k as useAppliedOptions,O as useKeptInstance,T as usePortalsLifecycle};
+import{DockviewCompositeDisposable as e,DockviewDisposable as t,DockviewEmitter as n,DockviewMutableDisposable as r,GridviewApi as i,GridviewPanel as a,PROPERTY_KEYS_DOCKVIEW as o,PROPERTY_KEYS_GRIDVIEW as s,PROPERTY_KEYS_PANEVIEW as c,PROPERTY_KEYS_SPLITVIEW as l,SplitviewApi as u,SplitviewPanel as d,createDockview as f,createGridview as p,createPaneview as m,createSplitview as h}from"dockview";import g from"react";import _ from"react-dom";export*from"dockview";function v(e){"@babel/helpers - typeof";return v=typeof Symbol==`function`&&typeof Symbol.iterator==`symbol`?function(e){return typeof e}:function(e){return e&&typeof Symbol==`function`&&e.constructor===Symbol&&e!==Symbol.prototype?`symbol`:typeof e},v(e)}function y(e,t){if(v(e)!=`object`||!e)return e;var n=e[Symbol.toPrimitive];if(n!==void 0){var r=n.call(e,t||`default`);if(v(r)!=`object`)return r;throw TypeError(`@@toPrimitive must return a primitive value.`)}return(t===`string`?String:Number)(e)}function ee(e){var t=y(e,`string`);return v(t)==`symbol`?t:t+``}function te(e,t,n){return(t=ee(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function b(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),n.push.apply(n,r)}return n}function x(e){for(var t=1;t<arguments.length;t++){var n=arguments[t]==null?{}:arguments[t];t%2?b(Object(n),!0).forEach(function(t){te(e,t,n[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):b(Object(n)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))})}return e}const S=(e,t)=>{let[,n]=g.useState(0),r=g.useRef(e.componentProps);return g.useImperativeHandle(t,()=>({update:e=>{r.current=x(x({},r.current),e),n(e=>e+1)}}),[]),g.createElement(e.component,r.current)};S.displayName=`DockviewReactJsBridge`;const ne=(()=>{let e=1;return{next:()=>`dockview_react_portal_key_${(e++).toString()}`}})(),C=g.createContext({});var w=class{constructor(e,t,n,r,i){this.parent=e,this.portalStore=t,this.component=n,this.parameters=r,this.context=i,this._initialProps={},this.disposed=!1,this.createPortal()}update(e){if(this.disposed)throw Error(`invalid operation: resource is already disposed`);this.componentInstance?this.componentInstance.update(e):this._initialProps=x(x({},this._initialProps),e)}createPortal(){if(this.disposed)throw Error(`invalid operation: resource is already disposed`);if(!E(this.component))throw Error(`Dockview: Only React.memo(...), React.ForwardRef(...) and functional components are accepted as components`);let e=g.createElement(g.forwardRef(S),{component:this.component,componentProps:this.parameters,ref:e=>{this.componentInstance=e,Object.keys(this._initialProps).length>0&&(this.componentInstance.update(this._initialProps),this._initialProps={})}}),t=this.context?g.createElement(C.Provider,{value:this.context},e):e,n=_.createPortal(t,this.parent,ne.next());this.ref={portal:n,disposable:this.portalStore.addPortal(n)}}dispose(){var e;(e=this.ref)==null||e.disposable.dispose(),this.disposed=!0}};const T=()=>{let[e,n]=g.useState([]);return g.useDebugValue(`Portal count: ${e.length}`),[e,g.useCallback(e=>{n(t=>[...t,e]);let r=!1;return t.from(()=>{if(r)throw Error(`invalid operation: resource already disposed`);r=!0,n(t=>t.filter(t=>t!==e))})},[])]};function E(e){return typeof e==`function`||!!(e!=null&&e.$$typeof)}function D(e,n){let r=e=>e instanceof ShadowRoot?e.host:e.parentNode,i=new Set,a=new MutationObserver(t=>{if(!e.isConnected){a.disconnect(),n();return}for(let e of t)for(let t of e.removedNodes)if(i.has(t)){o();return}}),o=()=>{a.disconnect(),i.clear();for(let t=r(e);t;t=r(t))i.add(t),a.observe(t,{childList:!0})};return o(),t.from(()=>a.disconnect())}const re=Number.parseInt(g.version,10)>=18;function O(e,t,n){let r=g.useRef(void 0);g.useEffect(()=>{var i,a;let o=e.current;if(!o)return;(i=r.current)==null||i.dispose(),r.current=void 0;let s=(a=t.current)==null?n(o):a;return t.current=s,()=>{let e=()=>{r.current=void 0,t.current=void 0,s.dispose()};re&&o.isConnected&&typeof MutationObserver<`u`?r.current=D(o,e):e()}},[])}function k(e){let t=g.useRef({instance:void 0,values:new Map});return g.useCallback(n=>{t.current.instance!==e.current&&(t.current={instance:e.current,values:new Map});let r=t.current.values,i=!0;for(let[e,t]of Object.entries(n))r.has(e)&&r.get(e)!==t&&(i=!1),r.set(e,t);return i},[e])}var A=class{get element(){return this._element}constructor(e,t,r){this.id=e,this.component=t,this.reactPortalStore=r,this._onDidFocus=new n,this.onDidFocus=this._onDidFocus.event,this._onDidBlur=new n,this.onDidBlur=this._onDidBlur.event,this._element=document.createElement(`div`),this._element.className=`dv-react-part`,this._element.style.height=`100%`,this._element.style.width=`100%`}focus(){}init(e){this.part=new w(this.element,this.reactPortalStore,this.component,{params:e.params,api:e.api,containerApi:e.containerApi})}update(e){var t;(t=this.part)==null||t.update({params:e.params})}layout(e,t){}dispose(){var e;this._onDidFocus.dispose(),this._onDidBlur.dispose(),(e=this.part)==null||e.dispose()}},j=class{get element(){return this._element}constructor(e,t,n){this.id=e,this.component=t,this.reactPortalStore=n,this._element=document.createElement(`div`),this._element.className=`dv-react-part`,this._element.style.height=`100%`,this._element.style.width=`100%`}focus(){}init(e){this.part=new w(this.element,this.reactPortalStore,this.component,{params:e.params,api:e.api,containerApi:e.containerApi,tabLocation:e.tabLocation})}update(e){var t;(t=this.part)==null||t.update({params:e.params})}layout(e,t){}dispose(){var e;(e=this.part)==null||e.dispose()}},M=class{get element(){return this._element}constructor(e,t,n){this.id=e,this.component=t,this.reactPortalStore=n,this._element=document.createElement(`div`),this._element.className=`dv-react-part`,this._element.style.height=`100%`,this._element.style.width=`100%`}init(e){this.part=new w(this.element,this.reactPortalStore,this.component,{group:e.group,containerApi:e.containerApi})}focus(){}update(e){var t,n,r;this.parameters&&(this.parameters.params=e.params),(t=this.part)==null||t.update({params:(n=(r=this.parameters)==null?void 0:r.params)==null?{}:n})}layout(e,t){}dispose(){var e;(e=this.part)==null||e.dispose()}},N=class{get element(){return this._element}get part(){return this._part}constructor(e,t,n){this.component=e,this.reactPortalStore=t,this._group=n,this.mutableDisposable=new r,this._element=document.createElement(`div`),this._element.className=`dv-react-part`,this._element.style.height=`100%`,this._element.style.width=`100%`}init(t){this.mutableDisposable.value=new e(this._group.model.onDidAddPanel(()=>{this.updatePanels()}),this._group.model.onDidRemovePanel(()=>{this.updatePanels()}),this._group.model.onDidActivePanelChange(()=>{this.updateActivePanel()}),t.api.onDidActiveChange(()=>{this.updateGroupActive()}),t.api.onDidLocationChange(e=>{this.updateLocation(e.location)})),this._part=new w(this.element,this.reactPortalStore,this.component,{api:t.api,containerApi:t.containerApi,panels:this._group.model.panels,activePanel:this._group.model.activePanel,isGroupActive:this._group.api.isActive,group:this._group,headerPosition:this._group.model.headerPosition,location:t.api.location})}dispose(){var e;this.mutableDisposable.dispose(),(e=this._part)==null||e.dispose()}update(e){var t;(t=this._part)==null||t.update(e.params)}updatePanels(){this.update({params:{panels:this._group.model.panels}})}updateActivePanel(){this.update({params:{activePanel:this._group.model.activePanel}})}updateGroupActive(){this.update({params:{isGroupActive:this._group.api.isActive}})}updateLocation(e){this.update({params:{location:e}})}},ie=class{get element(){return this._element}constructor(e,t,n){this.id=e,this.component=t,this.reactPortalStore=n,this._element=document.createElement(`div`),this._element.className=`dv-react-part`,this._element.style.height=`100%`,this._element.style.width=`100%`}init(e){this.part=new w(this._element,this.reactPortalStore,this.component,e)}dispose(){var e;(e=this.part)==null||e.dispose()}},P=class{get element(){return this._element}constructor(e,t){this.component=e,this.reactPortalStore=t,this._element=document.createElement(`div`),this._element.className=`dv-react-part`,this._element.style.display=`inline-flex`}init(e){this.part=new w(this._element,this.reactPortalStore,this.component,{tabGroup:e.tabGroup,api:e.api})}update(e){var t;(t=this.part)==null||t.update({tabGroup:e.tabGroup})}dispose(){var e;(e=this.part)==null||e.dispose()}},F=class{get element(){return this._element}constructor(e,t){this.component=e,this.reactPortalStore=t,this._element=document.createElement(`div`),this._element.className=`dv-react-part`,this._element.style.display=`inline-flex`}init(e){this.part=new w(this._element,this.reactPortalStore,this.component,{group:e.group,api:e.api})}dispose(){var e;(e=this.part)==null||e.dispose()}};function I(e,t){return e?n=>new N(e,t,n):void 0}const L=`props.defaultTabComponent`;function R(e){return o.reduce((t,n)=>(n in e&&(t[n]=e[n]),t),{})}const z=g.forwardRef((e,t)=>{let n=g.useRef(null),r=g.useRef(void 0),[i,a]=T(),s=k(r);g.useImperativeHandle(t,()=>n.current,[]);let c=g.useRef({});return g.useEffect(()=>{let t={};o.forEach(n=>{let r=n,i=e[r];r in e&&i!==c.current[r]&&(t[r]=i)}),r.current&&Object.keys(t).length>0&&r.current.updateOptions(t),c.current=e},o.map(t=>e[t])),O(n,r,t=>{let n=x({},e.tabComponents);e.defaultTabComponent&&(n[L]=e.defaultTabComponent);let r={createLeftHeaderActionComponent:I(e.leftHeaderActionsComponent,{addPortal:a}),createRightHeaderActionComponent:I(e.rightHeaderActionsComponent,{addPortal:a}),createPrefixHeaderActionComponent:I(e.prefixHeaderActionsComponent,{addPortal:a}),createComponent:t=>new A(t.id,e.components[t.name],{addPortal:a}),createTabComponent(e){return new j(e.id,n[e.name],{addPortal:a})},createWatermarkComponent:e.watermarkComponent?()=>new M(`watermark`,e.watermarkComponent,{addPortal:a}):void 0,defaultTabComponent:e.defaultTabComponent?L:void 0,createContextMenuItemComponent:e=>{if(e.component)return new ie(e.id,e.component,{addPortal:a})}},i=R(e);if(e.tabGroupChipComponent){let t=e.tabGroupChipComponent;i.createTabGroupChipComponent=()=>new P(t,{addPortal:a})}if(e.groupDragGhostComponent){let t=e.groupDragGhostComponent;i.createGroupDragGhostComponent=()=>new F(t,{addPortal:a})}let o=f(t,x(x({},i),r)),{clientWidth:s,clientHeight:c}=t;return o.layout(s,c),e.onReady&&e.onReady({api:o}),o}),g.useEffect(()=>{if(!r.current)return()=>{};let t=r.current.onDidDrop(t=>{e.onDidDrop&&e.onDidDrop(t)});return()=>{t.dispose()}},[e.onDidDrop]),g.useEffect(()=>{if(!r.current)return()=>{};let t=r.current.onWillDrop(t=>{e.onWillDrop&&e.onWillDrop(t)});return()=>{t.dispose()}},[e.onWillDrop]),g.useEffect(()=>{!r.current||s({tabGroupChipComponent:e.tabGroupChipComponent})||r.current.updateOptions({createTabGroupChipComponent:e.tabGroupChipComponent?()=>new P(e.tabGroupChipComponent,{addPortal:a}):void 0})},[e.tabGroupChipComponent]),g.useEffect(()=>{!r.current||s({groupDragGhostComponent:e.groupDragGhostComponent})||r.current.updateOptions({createGroupDragGhostComponent:e.groupDragGhostComponent?()=>new F(e.groupDragGhostComponent,{addPortal:a}):void 0})},[e.groupDragGhostComponent]),g.useEffect(()=>{!r.current||s({components:e.components})||r.current.updateOptions({createComponent:t=>new A(t.id,e.components[t.name],{addPortal:a})})},[e.components]),g.useEffect(()=>{if(!r.current||s({tabComponents:e.tabComponents,defaultTabComponent:e.defaultTabComponent}))return;let t=x({},e.tabComponents);e.defaultTabComponent&&(t[L]=e.defaultTabComponent),r.current.updateOptions({defaultTabComponent:e.defaultTabComponent?L:void 0,createTabComponent(e){return new j(e.id,t[e.name],{addPortal:a})}})},[e.tabComponents,e.defaultTabComponent]),g.useEffect(()=>{!r.current||s({watermarkComponent:e.watermarkComponent})||r.current.updateOptions({createWatermarkComponent:e.watermarkComponent?()=>new M(`watermark`,e.watermarkComponent,{addPortal:a}):void 0})},[e.watermarkComponent]),g.useEffect(()=>{!r.current||s({rightHeaderActionsComponent:e.rightHeaderActionsComponent})||r.current.updateOptions({createRightHeaderActionComponent:I(e.rightHeaderActionsComponent,{addPortal:a})})},[e.rightHeaderActionsComponent]),g.useEffect(()=>{!r.current||s({leftHeaderActionsComponent:e.leftHeaderActionsComponent})||r.current.updateOptions({createLeftHeaderActionComponent:I(e.leftHeaderActionsComponent,{addPortal:a})})},[e.leftHeaderActionsComponent]),g.useEffect(()=>{!r.current||s({prefixHeaderActionsComponent:e.prefixHeaderActionsComponent})||r.current.updateOptions({createPrefixHeaderActionComponent:I(e.prefixHeaderActionsComponent,{addPortal:a})})},[e.prefixHeaderActionsComponent]),g.createElement(`div`,{style:{height:`100%`,width:`100%`},ref:n},i)});z.displayName=`DockviewComponent`;const B=()=>g.createElement(`svg`,{height:`11`,width:`11`,viewBox:`0 0 28 28`,"aria-hidden":`false`,focusable:!1,className:`dv-svg`},g.createElement(`path`,{d:`M2.1 27.3L0 25.2L11.55 13.65L0 2.1L2.1 0L13.65 11.55L25.2 0L27.3 2.1L15.75 13.65L27.3 25.2L25.2 27.3L13.65 15.75L2.1 27.3Z`})),V=()=>g.createElement(`svg`,{height:`11`,width:`11`,viewBox:`0 0 24 24`,"aria-hidden":`false`,focusable:!1,className:`dv-svg`},g.createElement(`path`,{d:`M16 9V4h1c.55 0 1-.45 1-1s-.45-1-1-1H6c-.55 0-1 .45-1 1s.45 1 1 1h1v5c0 1.66-1.34 3-3 3v2h5.97v7l1 1 1-1v-7H19v-2c-1.66 0-3-1.34-3-3z`}));function H(e,t){if(e==null)return{};var n={};for(var r in e)if({}.hasOwnProperty.call(e,r)){if(t.includes(r))continue;n[r]=e[r]}return n}function U(e,t){if(e==null)return{};var n,r,i=H(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)n=a[r],t.includes(n)||{}.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}const W=[`api`,`containerApi`,`params`,`hideClose`,`closeActionOverride`,`onPointerDown`,`onPointerUp`,`onPointerLeave`,`tabLocation`];function G(e){let[t,n]=g.useState(e.title);return g.useEffect(()=>{let r=e.onDidTitleChange(e=>{n(e.title)});return t!==e.title&&n(e.title),()=>{r.dispose()}},[e]),t}function K(e){let[t,n]=g.useState(e.isPinned);return g.useEffect(()=>{let r=e.onDidChangePinned(e=>{n(e.isPinned)});return t!==e.isPinned&&n(e.isPinned),()=>{r.dispose()}},[e]),t}const q=e=>{let{api:t,containerApi:n,params:r,hideClose:i,closeActionOverride:a,onPointerDown:o,onPointerUp:s,onPointerLeave:c,tabLocation:l}=e,u=U(e,W),d=G(t),f=K(t),p=g.useRef(!1),m=g.useCallback(e=>{e.preventDefault(),a?a():t.close()},[t,a]),h=g.useCallback(e=>{e.preventDefault()},[]),_=g.useCallback(e=>{p.current=e.button===1,o==null||o(e)},[o]),v=g.useCallback(e=>{p.current&&e.button===1&&!i&&(p.current=!1,m(e)),s==null||s(e)},[s,m,i]),y=g.useCallback(e=>{p.current=!1,c==null||c(e)},[c]);return g.createElement(`div`,x(x({"data-testid":`dockview-dv-default-tab`},u),{},{onPointerDown:_,onPointerUp:v,onPointerLeave:y,className:`dv-default-tab`}),f&&g.createElement(`div`,{className:`dv-tab-pin`},g.createElement(V,null)),g.createElement(`span`,{className:`dv-default-tab-content`},d),!i&&g.createElement(`button`,{type:`button`,className:`dv-default-tab-action`,"aria-label":`Close tab`,onPointerDown:h,onClick:m},g.createElement(B,null)))};var J=class extends d{constructor(e,t,n,r){super(e,t),this.reactComponent=n,this.reactPortalStore=r}getComponent(){var e,t;return new w(this.element,this.reactPortalStore,this.reactComponent,{params:(e=(t=this._params)==null?void 0:t.params)==null?{}:e,api:this.api,containerApi:new u(this._params.accessor)})}};function ae(e){return l.reduce((t,n)=>(n in e&&(t[n]=e[n]),t),{})}const Y=g.forwardRef((e,t)=>{let n=g.useRef(null),r=g.useRef(void 0),[i,a]=T(),o=k(r);g.useImperativeHandle(t,()=>n.current,[]);let s=g.useRef({});return g.useEffect(()=>{let t={};l.forEach(n=>{let r=n,i=e[r];r in e&&i!==s.current[r]&&(t[r]=i)}),r.current&&Object.keys(t).length>0&&r.current.updateOptions(t),s.current=e},l.map(t=>e[t])),O(n,r,t=>{let n=h(t,x(x({},ae(e)),{createComponent:t=>new J(t.id,t.name,e.components[t.name],{addPortal:a})})),{clientWidth:r,clientHeight:i}=t;return n.layout(r,i),e.onReady&&e.onReady({api:n}),n}),g.useEffect(()=>{!r.current||o({components:e.components})||r.current.updateOptions({createComponent:t=>new J(t.id,t.name,e.components[t.name],{addPortal:a})})},[e.components]),g.createElement(`div`,{style:{height:`100%`,width:`100%`},ref:n},i)});Y.displayName=`SplitviewComponent`;var X=class extends a{constructor(e,t,n,r){super(e,t),this.reactComponent=n,this.reactPortalStore=r}getComponent(){var e,t;return new w(this.element,this.reactPortalStore,this.reactComponent,{params:(e=(t=this._params)==null?void 0:t.params)==null?{}:e,api:this.api,containerApi:new i(this._params.accessor)})}};function oe(e){return s.reduce((t,n)=>(n in e&&(t[n]=e[n]),t),{})}const Z=g.forwardRef((e,t)=>{let n=g.useRef(null),r=g.useRef(void 0),[i,a]=T(),o=k(r);g.useImperativeHandle(t,()=>n.current,[]);let c=g.useRef({});return g.useEffect(()=>{let t={};s.forEach(n=>{let r=n,i=e[r];r in e&&i!==c.current[r]&&(t[r]=i)}),r.current&&Object.keys(t).length>0&&r.current.updateOptions(t),c.current=e},s.map(t=>e[t])),O(n,r,t=>{let n=p(t,x(x({},oe(e)),{createComponent:t=>new X(t.id,t.name,e.components[t.name],{addPortal:a})})),{clientWidth:r,clientHeight:i}=t;return n.layout(r,i),e.onReady&&e.onReady({api:n}),n}),g.useEffect(()=>{!r.current||o({components:e.components})||r.current.updateOptions({createComponent:t=>new X(t.id,t.name,e.components[t.name],{addPortal:a})})},[e.components]),g.createElement(`div`,{style:{height:`100%`,width:`100%`},ref:n},i)});Z.displayName=`GridviewComponent`;var Q=class{get element(){return this._element}constructor(e,t,n){this.id=e,this.component=t,this.reactPortalStore=n,this._element=document.createElement(`div`),this._element.style.height=`100%`,this._element.style.width=`100%`}init(e){this.part=new w(this.element,this.reactPortalStore,this.component,{params:e.params,api:e.api,title:e.title,containerApi:e.containerApi})}toJSON(){return{id:this.id}}update(e){var t;(t=this.part)==null||t.update({params:e.params})}dispose(){var e;(e=this.part)==null||e.dispose()}};function se(e){return c.reduce((t,n)=>(n in e&&(t[n]=e[n]),t),{})}const $=g.forwardRef((e,t)=>{let n=g.useRef(null),r=g.useRef(void 0),[i,a]=T(),o=k(r);g.useImperativeHandle(t,()=>n.current,[]);let s=g.useRef({});return g.useEffect(()=>{let t={};c.forEach(n=>{let r=n,i=e[r];r in e&&i!==s.current[r]&&(t[r]=i)}),r.current&&Object.keys(t).length>0&&r.current.updateOptions(t),s.current=e},c.map(t=>e[t])),O(n,r,t=>{var n;let r=(n=e.headerComponents)==null?{}:n,i=m(t,x(x({},se(e)),{createComponent:t=>new Q(t.id,e.components[t.name],{addPortal:a}),createHeaderComponent:e=>new Q(e.id,r[e.name],{addPortal:a})})),{clientWidth:o,clientHeight:s}=t;return i.layout(o,s),e.onReady&&e.onReady({api:i}),i}),g.useEffect(()=>{!r.current||o({components:e.components})||r.current.updateOptions({createComponent:t=>new Q(t.id,e.components[t.name],{addPortal:a})})},[e.components]),g.useEffect(()=>{var t;if(!r.current||o({headerComponents:e.headerComponents}))return;let n=(t=e.headerComponents)==null?{}:t;r.current.updateOptions({createHeaderComponent:e=>new Q(e.id,n[e.name],{addPortal:a})})},[e.headerComponents]),g.useEffect(()=>{if(!r.current)return()=>{};let t=r.current.onDidDrop(t=>{e.onDidDrop&&e.onDidDrop(t)});return()=>{t.dispose()}},[e.onDidDrop]),g.createElement(`div`,{style:{height:`100%`,width:`100%`},ref:n},i)});$.displayName=`PaneviewComponent`;export{q as DockviewDefaultTab,z as DockviewReact,Z as GridviewReact,$ as PaneviewReact,w as ReactPart,C as ReactPartContext,Y as SplitviewReact,E as isReactComponent,k as useAppliedOptions,O as useKeptInstance,T as usePortalsLifecycle};

package/dist/package/main.esm.mjs

@@ -1,6 +1,6 @@
 /**
  * dockview-react
- * @version 8.7.1
+ * @version 8.8.1
  * @link https://github.com/dockview/dockview
  * @license MIT
  */
@@ -962,9 +962,9 @@ var PanePanelSection = class {
 	toJSON() {
 		return { id: this.id };
 	}
-	update(params) {
+	update(event) {
 		var _this$part;
-		(_this$part = this.part) === null || _this$part === void 0 || _this$part.update(params.params);
+		(_this$part = this.part) === null || _this$part === void 0 || _this$part.update({ params: event.params });
 	}
 	dispose() {
 		var _this$part2;

package/dist/styles/dockview.css

@@ -1248,7 +1248,7 @@
   background-color: transparent !important;
 }
 .dv-pane-container .dv-view:not(:first-child) .dv-pane > .dv-pane-header {
-  border-top: 1px solid var(--dv-paneview-header-border-color);
+  border-top: 1px solid var(--dv-paneview-header-border-color, var(--dv-separator-border));
 }
 .dv-pane-container .dv-view .dv-default-header {
   background-color: var(--dv-group-view-background-color);
@@ -2001,6 +2001,7 @@
   --dv-inactivegroup-visiblepanel-tab-color: #8a9bbf;
   --dv-inactivegroup-hiddenpanel-tab-color: #5e6f8e;
   --dv-separator-border: var(--dv-color-nord-polar-3);
+  --dv-paneview-header-border-color: var(--dv-color-nord-polar-3);
   --dv-paneview-active-outline-color: var(--dv-color-nord-frost);
   --dv-active-sash-color: var(--dv-color-nord-frost);
   --dv-scrollbar-background-color: rgba(76, 86, 106, 0.5);
@@ -2247,6 +2248,7 @@
   --dv-inactivegroup-visiblepanel-tab-color: #8a9bbf;
   --dv-inactivegroup-hiddenpanel-tab-color: #5e6f8e;
   --dv-separator-border: transparent;
+  --dv-paneview-header-border-color: var(--dv-color-nord-polar-3);
   --dv-paneview-active-outline-color: var(--dv-color-nord-frost);
   --dv-active-sash-color: var(--dv-color-nord-frost);
   --dv-scrollbar-background-color: rgba(76, 86, 106, 0.5);
@@ -2338,6 +2340,7 @@
   --dv-inactivegroup-visiblepanel-tab-color: var(--dv-color-mocha-subtext0);
   --dv-inactivegroup-hiddenpanel-tab-color: rgba(166, 173, 200, 0.5);
   --dv-separator-border: var(--dv-color-mocha-surface1);
+  --dv-paneview-header-border-color: var(--dv-color-mocha-surface1);
   --dv-paneview-active-outline-color: var(--dv-color-mocha-mauve);
   --dv-active-sash-color: var(--dv-color-mocha-mauve);
   --dv-scrollbar-background-color: rgba(49, 50, 68, 0.8);
@@ -2586,6 +2589,7 @@
   --dv-inactivegroup-visiblepanel-tab-color: var(--dv-color-mocha-subtext0);
   --dv-inactivegroup-hiddenpanel-tab-color: rgba(166, 173, 200, 0.5);
   --dv-separator-border: transparent;
+  --dv-paneview-header-border-color: var(--dv-color-mocha-surface1);
   --dv-paneview-active-outline-color: var(--dv-color-mocha-mauve);
   --dv-active-sash-color: var(--dv-color-mocha-mauve);
   --dv-scrollbar-background-color: rgba(49, 50, 68, 0.8);
@@ -2668,6 +2672,7 @@
   --dv-inactivegroup-visiblepanel-tab-color: rgba(248, 248, 242, 0.5);
   --dv-inactivegroup-hiddenpanel-tab-color: rgba(117, 113, 94, 0.5);
   --dv-separator-border: var(--dv-color-monokai-bg-light);
+  --dv-paneview-header-border-color: var(--dv-color-monokai-bg-light);
   --dv-paneview-active-outline-color: var(--dv-color-monokai-green);
   --dv-active-sash-color: var(--dv-color-monokai-green);
   --dv-scrollbar-background-color: rgba(117, 113, 94, 0.5);
@@ -2774,6 +2779,7 @@
   --dv-inactivegroup-visiblepanel-tab-color: var(--dv-color-sol-base1);
   --dv-inactivegroup-hiddenpanel-tab-color: rgba(147, 161, 161, 0.6);
   --dv-separator-border: var(--dv-color-sol-base2);
+  --dv-paneview-header-border-color: var(--dv-color-sol-base2);
   --dv-paneview-active-outline-color: var(--dv-color-sol-blue);
   --dv-active-sash-color: var(--dv-color-sol-blue);
   --dv-scrollbar-background-color: rgba(101, 123, 131, 0.25);
@@ -2991,6 +2997,7 @@
   --dv-inactivegroup-visiblepanel-tab-color: var(--dv-color-sol-base1);
   --dv-inactivegroup-hiddenpanel-tab-color: rgba(147, 161, 161, 0.6);
   --dv-separator-border: transparent;
+  --dv-paneview-header-border-color: var(--dv-color-sol-base2);
   --dv-paneview-active-outline-color: var(--dv-color-sol-blue);
   --dv-active-sash-color: var(--dv-color-sol-blue);
   --dv-floating-box-shadow:
@@ -3084,6 +3091,7 @@
   --dv-inactivegroup-visiblepanel-tab-color: var(--dv-color-gh-fg-subtle);
   --dv-inactivegroup-hiddenpanel-tab-color: rgba(110, 118, 129, 0.5);
   --dv-separator-border: var(--dv-color-gh-border);
+  --dv-paneview-header-border-color: var(--dv-color-gh-border);
   --dv-paneview-active-outline-color: var(--dv-color-gh-accent);
   --dv-active-sash-color: var(--dv-color-gh-accent);
   --dv-scrollbar-background-color: rgba(48, 54, 61, 0.7);
@@ -3307,6 +3315,7 @@
   --dv-inactivegroup-visiblepanel-tab-color: var(--dv-color-gh-fg-subtle);
   --dv-inactivegroup-hiddenpanel-tab-color: rgba(110, 118, 129, 0.5);
   --dv-separator-border: transparent;
+  --dv-paneview-header-border-color: var(--dv-color-gh-border);
   --dv-paneview-active-outline-color: var(--dv-color-gh-accent);
   --dv-active-sash-color: var(--dv-color-gh-accent);
   --dv-scrollbar-background-color: rgba(48, 54, 61, 0.7);
@@ -3400,6 +3409,7 @@
   );
   --dv-inactivegroup-hiddenpanel-tab-color: rgba(110, 118, 129, 0.4);
   --dv-separator-border: var(--dv-color-gh-light-border);
+  --dv-paneview-header-border-color: var(--dv-color-gh-light-border);
   --dv-paneview-active-outline-color: var(--dv-color-gh-light-accent);
   --dv-active-sash-color: var(--dv-color-gh-light-accent);
   --dv-scrollbar-background-color: rgba(208, 215, 222, 0.5);
@@ -3628,6 +3638,7 @@
   );
   --dv-inactivegroup-hiddenpanel-tab-color: rgba(110, 118, 129, 0.4);
   --dv-separator-border: transparent;
+  --dv-paneview-header-border-color: var(--dv-color-gh-light-border);
   --dv-paneview-active-outline-color: var(--dv-color-gh-light-accent);
   --dv-active-sash-color: var(--dv-color-gh-light-accent);
   --dv-floating-box-shadow:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dockview-react",
-  "version": "8.7.1",
+  "version": "8.8.1",
   "description": "React docking layout manager — tabs, groups, grids, splitviews, drag and drop, floating panels",
   "keywords": [
     "splitview",
@@ -85,7 +85,7 @@
     "format:check": "biome format src"
   },
   "dependencies": {
-    "dockview": "^8.7.1"
+    "dockview": "^8.8.1"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",