dockview-react 6.2.2 → 6.4.0

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

@@ -1,13 +1,13 @@
 /**
  * dockview-react
- * @version 6.2.2
+ * @version 6.4.0
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
 import{DockviewDisposable as e,PROPERTY_KEYS_DOCKVIEW as t,createDockview as n,PROPERTY_KEYS_SPLITVIEW as o,createSplitview as r,PROPERTY_KEYS_GRIDVIEW as a,createGridview as i,PROPERTY_KEYS_PANEVIEW as s,createPaneview as c,DockviewEmitter as p,SplitviewPanel as l,SplitviewApi as d,GridviewPanel as u,GridviewApi as m,DockviewMutableDisposable as h,DockviewCompositeDisposable as f}from"dockview-core";export*from"dockview-core";import v from"react";import C from"react-dom";
 /**
  * dockview
- * @version 6.2.2
+ * @version 6.4.0
  * @link https://github.com/mathuo/dockview
  * @license MIT
- */const P=(e,t)=>{const[,n]=v.useState(0),o=v.useRef(e.componentProps);return v.useImperativeHandle(t,()=>({update:e=>{o.current=Object.assign(Object.assign({},o.current),e),n(e=>e+1)}}),[]),v.createElement(e.component,o.current)};P.displayName="DockviewReactJsBridge";const w=(()=>{let e=1;return{next:()=>`dockview_react_portal_key_${(e++).toString()}`}})(),b=v.createContext({});class g{constructor(e,t,n,o,r){this.parent=e,this.portalStore=t,this.component=n,this.parameters=o,this.context=r,this._initialProps={},this.disposed=!1,this.createPortal()}update(e){if(this.disposed)throw new Error("invalid operation: resource is already disposed");this.componentInstance?this.componentInstance.update(e):this._initialProps=Object.assign(Object.assign({},this._initialProps),e)}createPortal(){if(this.disposed)throw new Error("invalid operation: resource is already disposed");if(!y(this.component))throw new Error("Dockview: Only React.memo(...), React.ForwardRef(...) and functional components are accepted as components");const e=v.createElement(v.forwardRef(P),{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?v.createElement(b.Provider,{value:this.context},e):e,n=C.createPortal(t,this.parent,w.next());this.ref={portal:n,disposable:this.portalStore.addPortal(n)}}dispose(){var e;null===(e=this.ref)||void 0===e||e.disposable.dispose(),this.disposed=!0}}const _=()=>{const[t,n]=v.useState([]);v.useDebugValue(`Portal count: ${t.length}`);return[t,v.useCallback(t=>{n(e=>[...e,t]);let o=!1;return e.from(()=>{if(o)throw new Error("invalid operation: resource already disposed");o=!0,n(e=>e.filter(e=>e!==t))})},[])]};function y(e){return"function"==typeof e||!!(null==e?void 0:e.$$typeof)}class E{get element(){return this._element}constructor(e,t,n){this.id=e,this.component=t,this.reactPortalStore=n,this._onDidFocus=new p,this.onDidFocus=this._onDidFocus.event,this._onDidBlur=new p,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 g(this.element,this.reactPortalStore,this.component,{params:e.params,api:e.api,containerApi:e.containerApi})}update(e){var t;null===(t=this.part)||void 0===t||t.update({params:e.params})}layout(e,t){}dispose(){var e;this._onDidFocus.dispose(),this._onDidBlur.dispose(),null===(e=this.part)||void 0===e||e.dispose()}}class D{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 g(this.element,this.reactPortalStore,this.component,{params:e.params,api:e.api,containerApi:e.containerApi,tabLocation:e.tabLocation})}update(e){var t;null===(t=this.part)||void 0===t||t.update({params:e.params})}layout(e,t){}dispose(){var e;null===(e=this.part)||void 0===e||e.dispose()}}class A{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 g(this.element,this.reactPortalStore,this.component,{group:e.group,containerApi:e.containerApi})}focus(){}update(e){var t,n,o;this.parameters&&(this.parameters.params=e.params),null===(t=this.part)||void 0===t||t.update({params:null!==(o=null===(n=this.parameters)||void 0===n?void 0:n.params)&&void 0!==o?o:{}})}layout(e,t){}dispose(){var e;null===(e=this.part)||void 0===e||e.dispose()}}class O{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 h,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 f(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 g(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(),null===(e=this._part)||void 0===e||e.dispose()}update(e){var t;null===(t=this._part)||void 0===t||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}})}}class R{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 g(this._element,this.reactPortalStore,this.component,e)}dispose(){var e;null===(e=this.part)||void 0===e||e.dispose()}}class S{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 g(this._element,this.reactPortalStore,this.component,{tabGroup:e.tabGroup,api:e.api})}update(e){var t;null===(t=this.part)||void 0===t||t.update({tabGroup:e.tabGroup})}dispose(){var e;null===(e=this.part)||void 0===e||e.dispose()}}function H(e,t){return e?n=>new O(e,t,n):void 0}const k="props.defaultTabComponent";const L=v.forwardRef((e,o)=>{const r=v.useRef(null),a=v.useRef(void 0),[i,s]=_();v.useImperativeHandle(o,()=>r.current,[]);const c=v.useRef({});return v.useEffect(()=>{const n={};t.forEach(t=>{const o=t,r=e[o];o in e&&r!==c.current[o]&&(n[o]=r)}),a.current&&a.current.updateOptions(n),c.current=e},t.map(t=>e[t])),v.useEffect(()=>{var o;if(!r.current)return;const i=null!==(o=e.tabComponents)&&void 0!==o?o:{};e.defaultTabComponent&&(i[k]=e.defaultTabComponent);const c={createLeftHeaderActionComponent:H(e.leftHeaderActionsComponent,{addPortal:s}),createRightHeaderActionComponent:H(e.rightHeaderActionsComponent,{addPortal:s}),createPrefixHeaderActionComponent:H(e.prefixHeaderActionsComponent,{addPortal:s}),createComponent:t=>new E(t.id,e.components[t.name],{addPortal:s}),createTabComponent:e=>new D(e.id,i[e.name],{addPortal:s}),createWatermarkComponent:e.watermarkComponent?()=>new A("watermark",e.watermarkComponent,{addPortal:s}):void 0,defaultTabComponent:e.defaultTabComponent?k:void 0,createContextMenuItemComponent:e=>{if(e.component)return new R(e.id,e.component,{addPortal:s})}},p=function(e){return t.reduce((t,n)=>(n in e&&(t[n]=e[n]),t),{})}(e);if(e.tabGroupChipComponent){const t=e.tabGroupChipComponent;p.createTabGroupChipComponent=()=>new S(t,{addPortal:s})}const l=n(r.current,Object.assign(Object.assign({},p),c)),{clientWidth:d,clientHeight:u}=r.current;return l.layout(d,u),e.onReady&&e.onReady({api:l}),a.current=l,()=>{a.current=void 0,l.dispose()}},[]),v.useEffect(()=>{if(!a.current)return()=>{};const t=a.current.onDidDrop(t=>{e.onDidDrop&&e.onDidDrop(t)});return()=>{t.dispose()}},[e.onDidDrop]),v.useEffect(()=>{if(!a.current)return()=>{};const t=a.current.onWillDrop(t=>{e.onWillDrop&&e.onWillDrop(t)});return()=>{t.dispose()}},[e.onWillDrop]),v.useEffect(()=>{a.current&&a.current.updateOptions({createTabGroupChipComponent:e.tabGroupChipComponent?()=>new S(e.tabGroupChipComponent,{addPortal:s}):void 0})},[e.tabGroupChipComponent]),v.useEffect(()=>{a.current&&a.current.updateOptions({createComponent:t=>new E(t.id,e.components[t.name],{addPortal:s})})},[e.components]),v.useEffect(()=>{var t;if(!a.current)return;const n=null!==(t=e.tabComponents)&&void 0!==t?t:{};e.defaultTabComponent&&(n[k]=e.defaultTabComponent),a.current.updateOptions({defaultTabComponent:e.defaultTabComponent?k:void 0,createTabComponent:e=>new D(e.id,n[e.name],{addPortal:s})})},[e.tabComponents,e.defaultTabComponent]),v.useEffect(()=>{a.current&&a.current.updateOptions({createWatermarkComponent:e.watermarkComponent?()=>new A("watermark",e.watermarkComponent,{addPortal:s}):void 0})},[e.watermarkComponent]),v.useEffect(()=>{a.current&&a.current.updateOptions({createRightHeaderActionComponent:H(e.rightHeaderActionsComponent,{addPortal:s})})},[e.rightHeaderActionsComponent]),v.useEffect(()=>{a.current&&a.current.updateOptions({createLeftHeaderActionComponent:H(e.leftHeaderActionsComponent,{addPortal:s})})},[e.leftHeaderActionsComponent]),v.useEffect(()=>{a.current&&a.current.updateOptions({createPrefixHeaderActionComponent:H(e.prefixHeaderActionsComponent,{addPortal:s})})},[e.prefixHeaderActionsComponent]),v.createElement("div",{style:{height:"100%",width:"100%"},ref:r},i)});L.displayName="DockviewComponent","function"==typeof SuppressedError&&SuppressedError;const x=()=>v.createElement("svg",{height:"11",width:"11",viewBox:"0 0 28 28","aria-hidden":"false",focusable:!1,className:"dv-svg"},v.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"}));const j=e=>{var{api:t,containerApi:n,params:o,hideClose:r,closeActionOverride:a,onPointerDown:i,onPointerUp:s,onPointerLeave:c,tabLocation:p}=e,l=function(e,t){var n={};for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&t.indexOf(o)<0&&(n[o]=e[o]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(o=Object.getOwnPropertySymbols(e);r<o.length;r++)t.indexOf(o[r])<0&&Object.prototype.propertyIsEnumerable.call(e,o[r])&&(n[o[r]]=e[o[r]])}return n}(e,["api","containerApi","params","hideClose","closeActionOverride","onPointerDown","onPointerUp","onPointerLeave","tabLocation"]);const d=function(e){const[t,n]=v.useState(e.title);return v.useEffect(()=>{const o=e.onDidTitleChange(e=>{n(e.title)});return t!==e.title&&n(e.title),()=>{o.dispose()}},[e]),t}(t),u=v.useRef(!1),m=v.useCallback(e=>{e.preventDefault(),a?a():t.close()},[t,a]),h=v.useCallback(e=>{e.preventDefault()},[]),f=v.useCallback(e=>{u.current=1===e.button,null==i||i(e)},[i]),C=v.useCallback(e=>{u&&1===e.button&&!r&&(u.current=!1,m(e)),null==s||s(e)},[s,m,r]),P=v.useCallback(e=>{u.current=!1,null==c||c(e)},[c]);return v.createElement("div",Object.assign({"data-testid":"dockview-dv-default-tab"},l,{onPointerDown:f,onPointerUp:C,onPointerLeave:P,className:"dv-default-tab"}),v.createElement("span",{className:"dv-default-tab-content"},d),!r&&v.createElement("div",{className:"dv-default-tab-action",onPointerDown:h,onClick:m},v.createElement(x,null)))};class G extends l{constructor(e,t,n,o){super(e,t),this.reactComponent=n,this.reactPortalStore=o}getComponent(){var e,t;return new g(this.element,this.reactPortalStore,this.reactComponent,{params:null!==(t=null===(e=this._params)||void 0===e?void 0:e.params)&&void 0!==t?t:{},api:this.api,containerApi:new d(this._params.accessor)})}}const N=v.forwardRef((e,t)=>{const n=v.useRef(null),a=v.useRef(void 0),[i,s]=_();v.useImperativeHandle(t,()=>n.current,[]);const c=v.useRef({});return v.useEffect(()=>{const t={};o.forEach(n=>{const o=n,r=e[o];o in e&&r!==c.current[o]&&(t[o]=r)}),a.current&&a.current.updateOptions(t),c.current=e},o.map(t=>e[t])),v.useEffect(()=>{if(!n.current)return()=>{};const t={createComponent:t=>new G(t.id,t.name,e.components[t.name],{addPortal:s})},i=r(n.current,Object.assign(Object.assign({},function(e){return o.reduce((t,n)=>(n in e&&(t[n]=e[n]),t),{})}(e)),t)),{clientWidth:c,clientHeight:p}=n.current;return i.layout(c,p),e.onReady&&e.onReady({api:i}),a.current=i,()=>{a.current=void 0,i.dispose()}},[]),v.useEffect(()=>{a.current&&a.current.updateOptions({createComponent:t=>new G(t.id,t.name,e.components[t.name],{addPortal:s})})},[e.components]),v.createElement("div",{style:{height:"100%",width:"100%"},ref:n},i)});N.displayName="SplitviewComponent";class T extends u{constructor(e,t,n,o){super(e,t),this.reactComponent=n,this.reactPortalStore=o}getComponent(){var e,t;return new g(this.element,this.reactPortalStore,this.reactComponent,{params:null!==(t=null===(e=this._params)||void 0===e?void 0:e.params)&&void 0!==t?t:{},api:this.api,containerApi:new m(this._params.accessor)})}}const I=v.forwardRef((e,t)=>{const n=v.useRef(null),o=v.useRef(void 0),[r,s]=_();v.useImperativeHandle(t,()=>n.current,[]);const c=v.useRef({});return v.useEffect(()=>{const t={};a.forEach(n=>{const o=n,r=e[o];o in e&&r!==c.current[o]&&(t[o]=r)}),o.current&&o.current.updateOptions(t),c.current=e},a.map(t=>e[t])),v.useEffect(()=>{if(!n.current)return()=>{};const t={createComponent:t=>new T(t.id,t.name,e.components[t.name],{addPortal:s})},r=i(n.current,Object.assign(Object.assign({},function(e){return a.reduce((t,n)=>(n in e&&(t[n]=e[n]),t),{})}(e)),t)),{clientWidth:c,clientHeight:p}=n.current;return r.layout(c,p),e.onReady&&e.onReady({api:r}),o.current=r,()=>{o.current=void 0,r.dispose()}},[]),v.useEffect(()=>{o.current&&o.current.updateOptions({createComponent:t=>new T(t.id,t.name,e.components[t.name],{addPortal:s})})},[e.components]),v.createElement("div",{style:{height:"100%",width:"100%"},ref:n},r)});I.displayName="GridviewComponent";class W{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 g(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;null===(t=this.part)||void 0===t||t.update(e.params)}dispose(){var e;null===(e=this.part)||void 0===e||e.dispose()}}const B=v.forwardRef((e,t)=>{const n=v.useRef(null),o=v.useRef(void 0),[r,a]=_();v.useImperativeHandle(t,()=>n.current,[]);const i=v.useRef({});return v.useEffect(()=>{const t={};s.forEach(n=>{const o=n,r=e[o];o in e&&r!==i.current[o]&&(t[o]=r)}),o.current&&o.current.updateOptions(t),i.current=e},s.map(t=>e[t])),v.useEffect(()=>{var t;if(!n.current)return()=>{};const r=null!==(t=e.headerComponents)&&void 0!==t?t:{},i={createComponent:t=>new W(t.id,e.components[t.name],{addPortal:a}),createHeaderComponent:e=>new W(e.id,r[e.name],{addPortal:a})},p=c(n.current,Object.assign(Object.assign({},function(e){return s.reduce((t,n)=>(n in e&&(t[n]=e[n]),t),{})}(e)),i)),{clientWidth:l,clientHeight:d}=n.current;return p.layout(l,d),e.onReady&&e.onReady({api:p}),o.current=p,()=>{o.current=void 0,p.dispose()}},[]),v.useEffect(()=>{o.current&&o.current.updateOptions({createComponent:t=>new W(t.id,e.components[t.name],{addPortal:a})})},[e.components]),v.useEffect(()=>{var t;if(!o.current)return;const n=null!==(t=e.headerComponents)&&void 0!==t?t:{};o.current.updateOptions({createHeaderComponent:e=>new W(e.id,n[e.name],{addPortal:a})})},[e.headerComponents]),v.useEffect(()=>{if(!o.current)return()=>{};const t=o.current.onDidDrop(t=>{e.onDidDrop&&e.onDidDrop(t)});return()=>{t.dispose()}},[e.onDidDrop]),v.createElement("div",{style:{height:"100%",width:"100%"},ref:n},r)});B.displayName="PaneviewComponent";export{j as DockviewDefaultTab,L as DockviewReact,I as GridviewReact,B as PaneviewReact,g as ReactPart,b as ReactPartContext,N as SplitviewReact,y as isReactComponent,_ as usePortalsLifecycle};
+ */const P=(e,t)=>{const[,n]=v.useState(0),o=v.useRef(e.componentProps);return v.useImperativeHandle(t,()=>({update:e=>{o.current=Object.assign(Object.assign({},o.current),e),n(e=>e+1)}}),[]),v.createElement(e.component,o.current)};P.displayName="DockviewReactJsBridge";const g=(()=>{let e=1;return{next:()=>`dockview_react_portal_key_${(e++).toString()}`}})(),w=v.createContext({});class _{constructor(e,t,n,o,r){this.parent=e,this.portalStore=t,this.component=n,this.parameters=o,this.context=r,this._initialProps={},this.disposed=!1,this.createPortal()}update(e){if(this.disposed)throw new Error("invalid operation: resource is already disposed");this.componentInstance?this.componentInstance.update(e):this._initialProps=Object.assign(Object.assign({},this._initialProps),e)}createPortal(){if(this.disposed)throw new Error("invalid operation: resource is already disposed");if(!y(this.component))throw new Error("Dockview: Only React.memo(...), React.ForwardRef(...) and functional components are accepted as components");const e=v.createElement(v.forwardRef(P),{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?v.createElement(w.Provider,{value:this.context},e):e,n=C.createPortal(t,this.parent,g.next());this.ref={portal:n,disposable:this.portalStore.addPortal(n)}}dispose(){var e;null===(e=this.ref)||void 0===e||e.disposable.dispose(),this.disposed=!0}}const b=()=>{const[t,n]=v.useState([]);v.useDebugValue(`Portal count: ${t.length}`);return[t,v.useCallback(t=>{n(e=>[...e,t]);let o=!1;return e.from(()=>{if(o)throw new Error("invalid operation: resource already disposed");o=!0,n(e=>e.filter(e=>e!==t))})},[])]};function y(e){return"function"==typeof e||!!(null==e?void 0:e.$$typeof)}class E{get element(){return this._element}constructor(e,t,n){this.id=e,this.component=t,this.reactPortalStore=n,this._onDidFocus=new p,this.onDidFocus=this._onDidFocus.event,this._onDidBlur=new p,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 _(this.element,this.reactPortalStore,this.component,{params:e.params,api:e.api,containerApi:e.containerApi})}update(e){var t;null===(t=this.part)||void 0===t||t.update({params:e.params})}layout(e,t){}dispose(){var e;this._onDidFocus.dispose(),this._onDidBlur.dispose(),null===(e=this.part)||void 0===e||e.dispose()}}class D{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 _(this.element,this.reactPortalStore,this.component,{params:e.params,api:e.api,containerApi:e.containerApi,tabLocation:e.tabLocation})}update(e){var t;null===(t=this.part)||void 0===t||t.update({params:e.params})}layout(e,t){}dispose(){var e;null===(e=this.part)||void 0===e||e.dispose()}}class O{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 _(this.element,this.reactPortalStore,this.component,{group:e.group,containerApi:e.containerApi})}focus(){}update(e){var t,n,o;this.parameters&&(this.parameters.params=e.params),null===(t=this.part)||void 0===t||t.update({params:null!==(o=null===(n=this.parameters)||void 0===n?void 0:n.params)&&void 0!==o?o:{}})}layout(e,t){}dispose(){var e;null===(e=this.part)||void 0===e||e.dispose()}}class A{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 h,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 f(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 _(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(),null===(e=this._part)||void 0===e||e.dispose()}update(e){var t;null===(t=this._part)||void 0===t||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}})}}class R{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 _(this._element,this.reactPortalStore,this.component,e)}dispose(){var e;null===(e=this.part)||void 0===e||e.dispose()}}class S{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 _(this._element,this.reactPortalStore,this.component,{tabGroup:e.tabGroup,api:e.api})}update(e){var t;null===(t=this.part)||void 0===t||t.update({tabGroup:e.tabGroup})}dispose(){var e;null===(e=this.part)||void 0===e||e.dispose()}}class H{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 _(this._element,this.reactPortalStore,this.component,{group:e.group,api:e.api})}dispose(){var e;null===(e=this.part)||void 0===e||e.dispose()}}function k(e,t){return e?n=>new A(e,t,n):void 0}const G="props.defaultTabComponent";const L=v.forwardRef((e,o)=>{const r=v.useRef(null),a=v.useRef(void 0),[i,s]=b();v.useImperativeHandle(o,()=>r.current,[]);const c=v.useRef({});return v.useEffect(()=>{const n={};t.forEach(t=>{const o=t,r=e[o];o in e&&r!==c.current[o]&&(n[o]=r)}),a.current&&a.current.updateOptions(n),c.current=e},t.map(t=>e[t])),v.useEffect(()=>{var o;if(!r.current)return;const i=null!==(o=e.tabComponents)&&void 0!==o?o:{};e.defaultTabComponent&&(i[G]=e.defaultTabComponent);const c={createLeftHeaderActionComponent:k(e.leftHeaderActionsComponent,{addPortal:s}),createRightHeaderActionComponent:k(e.rightHeaderActionsComponent,{addPortal:s}),createPrefixHeaderActionComponent:k(e.prefixHeaderActionsComponent,{addPortal:s}),createComponent:t=>new E(t.id,e.components[t.name],{addPortal:s}),createTabComponent:e=>new D(e.id,i[e.name],{addPortal:s}),createWatermarkComponent:e.watermarkComponent?()=>new O("watermark",e.watermarkComponent,{addPortal:s}):void 0,defaultTabComponent:e.defaultTabComponent?G:void 0,createContextMenuItemComponent:e=>{if(e.component)return new R(e.id,e.component,{addPortal:s})}},p=function(e){return t.reduce((t,n)=>(n in e&&(t[n]=e[n]),t),{})}(e);if(e.tabGroupChipComponent){const t=e.tabGroupChipComponent;p.createTabGroupChipComponent=()=>new S(t,{addPortal:s})}if(e.groupDragGhostComponent){const t=e.groupDragGhostComponent;p.createGroupDragGhostComponent=()=>new H(t,{addPortal:s})}const l=n(r.current,Object.assign(Object.assign({},p),c)),{clientWidth:d,clientHeight:u}=r.current;return l.layout(d,u),e.onReady&&e.onReady({api:l}),a.current=l,()=>{a.current=void 0,l.dispose()}},[]),v.useEffect(()=>{if(!a.current)return()=>{};const t=a.current.onDidDrop(t=>{e.onDidDrop&&e.onDidDrop(t)});return()=>{t.dispose()}},[e.onDidDrop]),v.useEffect(()=>{if(!a.current)return()=>{};const t=a.current.onWillDrop(t=>{e.onWillDrop&&e.onWillDrop(t)});return()=>{t.dispose()}},[e.onWillDrop]),v.useEffect(()=>{a.current&&a.current.updateOptions({createTabGroupChipComponent:e.tabGroupChipComponent?()=>new S(e.tabGroupChipComponent,{addPortal:s}):void 0})},[e.tabGroupChipComponent]),v.useEffect(()=>{a.current&&a.current.updateOptions({createGroupDragGhostComponent:e.groupDragGhostComponent?()=>new H(e.groupDragGhostComponent,{addPortal:s}):void 0})},[e.groupDragGhostComponent]),v.useEffect(()=>{a.current&&a.current.updateOptions({createComponent:t=>new E(t.id,e.components[t.name],{addPortal:s})})},[e.components]),v.useEffect(()=>{var t;if(!a.current)return;const n=null!==(t=e.tabComponents)&&void 0!==t?t:{};e.defaultTabComponent&&(n[G]=e.defaultTabComponent),a.current.updateOptions({defaultTabComponent:e.defaultTabComponent?G:void 0,createTabComponent:e=>new D(e.id,n[e.name],{addPortal:s})})},[e.tabComponents,e.defaultTabComponent]),v.useEffect(()=>{a.current&&a.current.updateOptions({createWatermarkComponent:e.watermarkComponent?()=>new O("watermark",e.watermarkComponent,{addPortal:s}):void 0})},[e.watermarkComponent]),v.useEffect(()=>{a.current&&a.current.updateOptions({createRightHeaderActionComponent:k(e.rightHeaderActionsComponent,{addPortal:s})})},[e.rightHeaderActionsComponent]),v.useEffect(()=>{a.current&&a.current.updateOptions({createLeftHeaderActionComponent:k(e.leftHeaderActionsComponent,{addPortal:s})})},[e.leftHeaderActionsComponent]),v.useEffect(()=>{a.current&&a.current.updateOptions({createPrefixHeaderActionComponent:k(e.prefixHeaderActionsComponent,{addPortal:s})})},[e.prefixHeaderActionsComponent]),v.createElement("div",{style:{height:"100%",width:"100%"},ref:r},i)});L.displayName="DockviewComponent","function"==typeof SuppressedError&&SuppressedError;const x=()=>v.createElement("svg",{height:"11",width:"11",viewBox:"0 0 28 28","aria-hidden":"false",focusable:!1,className:"dv-svg"},v.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"}));const j=e=>{var{api:t,containerApi:n,params:o,hideClose:r,closeActionOverride:a,onPointerDown:i,onPointerUp:s,onPointerLeave:c,tabLocation:p}=e,l=function(e,t){var n={};for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&t.indexOf(o)<0&&(n[o]=e[o]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(o=Object.getOwnPropertySymbols(e);r<o.length;r++)t.indexOf(o[r])<0&&Object.prototype.propertyIsEnumerable.call(e,o[r])&&(n[o[r]]=e[o[r]])}return n}(e,["api","containerApi","params","hideClose","closeActionOverride","onPointerDown","onPointerUp","onPointerLeave","tabLocation"]);const d=function(e){const[t,n]=v.useState(e.title);return v.useEffect(()=>{const o=e.onDidTitleChange(e=>{n(e.title)});return t!==e.title&&n(e.title),()=>{o.dispose()}},[e]),t}(t),u=v.useRef(!1),m=v.useCallback(e=>{e.preventDefault(),a?a():t.close()},[t,a]),h=v.useCallback(e=>{e.preventDefault()},[]),f=v.useCallback(e=>{u.current=1===e.button,null==i||i(e)},[i]),C=v.useCallback(e=>{u&&1===e.button&&!r&&(u.current=!1,m(e)),null==s||s(e)},[s,m,r]),P=v.useCallback(e=>{u.current=!1,null==c||c(e)},[c]);return v.createElement("div",Object.assign({"data-testid":"dockview-dv-default-tab"},l,{onPointerDown:f,onPointerUp:C,onPointerLeave:P,className:"dv-default-tab"}),v.createElement("span",{className:"dv-default-tab-content"},d),!r&&v.createElement("div",{className:"dv-default-tab-action",onPointerDown:h,onClick:m},v.createElement(x,null)))};class N extends l{constructor(e,t,n,o){super(e,t),this.reactComponent=n,this.reactPortalStore=o}getComponent(){var e,t;return new _(this.element,this.reactPortalStore,this.reactComponent,{params:null!==(t=null===(e=this._params)||void 0===e?void 0:e.params)&&void 0!==t?t:{},api:this.api,containerApi:new d(this._params.accessor)})}}const T=v.forwardRef((e,t)=>{const n=v.useRef(null),a=v.useRef(void 0),[i,s]=b();v.useImperativeHandle(t,()=>n.current,[]);const c=v.useRef({});return v.useEffect(()=>{const t={};o.forEach(n=>{const o=n,r=e[o];o in e&&r!==c.current[o]&&(t[o]=r)}),a.current&&a.current.updateOptions(t),c.current=e},o.map(t=>e[t])),v.useEffect(()=>{if(!n.current)return()=>{};const t={createComponent:t=>new N(t.id,t.name,e.components[t.name],{addPortal:s})},i=r(n.current,Object.assign(Object.assign({},function(e){return o.reduce((t,n)=>(n in e&&(t[n]=e[n]),t),{})}(e)),t)),{clientWidth:c,clientHeight:p}=n.current;return i.layout(c,p),e.onReady&&e.onReady({api:i}),a.current=i,()=>{a.current=void 0,i.dispose()}},[]),v.useEffect(()=>{a.current&&a.current.updateOptions({createComponent:t=>new N(t.id,t.name,e.components[t.name],{addPortal:s})})},[e.components]),v.createElement("div",{style:{height:"100%",width:"100%"},ref:n},i)});T.displayName="SplitviewComponent";class I extends u{constructor(e,t,n,o){super(e,t),this.reactComponent=n,this.reactPortalStore=o}getComponent(){var e,t;return new _(this.element,this.reactPortalStore,this.reactComponent,{params:null!==(t=null===(e=this._params)||void 0===e?void 0:e.params)&&void 0!==t?t:{},api:this.api,containerApi:new m(this._params.accessor)})}}const W=v.forwardRef((e,t)=>{const n=v.useRef(null),o=v.useRef(void 0),[r,s]=b();v.useImperativeHandle(t,()=>n.current,[]);const c=v.useRef({});return v.useEffect(()=>{const t={};a.forEach(n=>{const o=n,r=e[o];o in e&&r!==c.current[o]&&(t[o]=r)}),o.current&&o.current.updateOptions(t),c.current=e},a.map(t=>e[t])),v.useEffect(()=>{if(!n.current)return()=>{};const t={createComponent:t=>new I(t.id,t.name,e.components[t.name],{addPortal:s})},r=i(n.current,Object.assign(Object.assign({},function(e){return a.reduce((t,n)=>(n in e&&(t[n]=e[n]),t),{})}(e)),t)),{clientWidth:c,clientHeight:p}=n.current;return r.layout(c,p),e.onReady&&e.onReady({api:r}),o.current=r,()=>{o.current=void 0,r.dispose()}},[]),v.useEffect(()=>{o.current&&o.current.updateOptions({createComponent:t=>new I(t.id,t.name,e.components[t.name],{addPortal:s})})},[e.components]),v.createElement("div",{style:{height:"100%",width:"100%"},ref:n},r)});W.displayName="GridviewComponent";class B{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 _(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;null===(t=this.part)||void 0===t||t.update(e.params)}dispose(){var e;null===(e=this.part)||void 0===e||e.dispose()}}const F=v.forwardRef((e,t)=>{const n=v.useRef(null),o=v.useRef(void 0),[r,a]=b();v.useImperativeHandle(t,()=>n.current,[]);const i=v.useRef({});return v.useEffect(()=>{const t={};s.forEach(n=>{const o=n,r=e[o];o in e&&r!==i.current[o]&&(t[o]=r)}),o.current&&o.current.updateOptions(t),i.current=e},s.map(t=>e[t])),v.useEffect(()=>{var t;if(!n.current)return()=>{};const r=null!==(t=e.headerComponents)&&void 0!==t?t:{},i={createComponent:t=>new B(t.id,e.components[t.name],{addPortal:a}),createHeaderComponent:e=>new B(e.id,r[e.name],{addPortal:a})},p=c(n.current,Object.assign(Object.assign({},function(e){return s.reduce((t,n)=>(n in e&&(t[n]=e[n]),t),{})}(e)),i)),{clientWidth:l,clientHeight:d}=n.current;return p.layout(l,d),e.onReady&&e.onReady({api:p}),o.current=p,()=>{o.current=void 0,p.dispose()}},[]),v.useEffect(()=>{o.current&&o.current.updateOptions({createComponent:t=>new B(t.id,e.components[t.name],{addPortal:a})})},[e.components]),v.useEffect(()=>{var t;if(!o.current)return;const n=null!==(t=e.headerComponents)&&void 0!==t?t:{};o.current.updateOptions({createHeaderComponent:e=>new B(e.id,n[e.name],{addPortal:a})})},[e.headerComponents]),v.useEffect(()=>{if(!o.current)return()=>{};const t=o.current.onDidDrop(t=>{e.onDidDrop&&e.onDidDrop(t)});return()=>{t.dispose()}},[e.onDidDrop]),v.createElement("div",{style:{height:"100%",width:"100%"},ref:n},r)});F.displayName="PaneviewComponent";export{j as DockviewDefaultTab,L as DockviewReact,W as GridviewReact,F as PaneviewReact,_ as ReactPart,w as ReactPartContext,T as SplitviewReact,y as isReactComponent,b as usePortalsLifecycle};

package/dist/package/main.esm.mjs

@@ -1,6 +1,6 @@
 /**
  * dockview-react
- * @version 6.2.2
+ * @version 6.4.0
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */

package/dist/styles/dockview.css

@@ -2344,6 +2344,16 @@
   /* Enhanced GPU acceleration during drag */
   will-change: transform, opacity;
 }
+.dv-resize-container .dv-resize-handle-top,
+.dv-resize-container .dv-resize-handle-bottom,
+.dv-resize-container .dv-resize-handle-left,
+.dv-resize-container .dv-resize-handle-right,
+.dv-resize-container .dv-resize-handle-topleft,
+.dv-resize-container .dv-resize-handle-topright,
+.dv-resize-container .dv-resize-handle-bottomleft,
+.dv-resize-container .dv-resize-handle-bottomright {
+  touch-action: none;
+}
 .dv-resize-container .dv-resize-handle-top {
   height: 4px;
   width: calc(100% - 8px);
@@ -2416,6 +2426,55 @@
   position: absolute;
   cursor: se-resize;
 }
+@media (pointer: coarse) {
+  .dv-resize-container .dv-resize-handle-top,
+  .dv-resize-container .dv-resize-handle-bottom {
+    height: 16px;
+    width: calc(100% - 48px);
+    left: 24px;
+  }
+  .dv-resize-container .dv-resize-handle-top {
+    top: -10px;
+  }
+  .dv-resize-container .dv-resize-handle-bottom {
+    bottom: -10px;
+  }
+  .dv-resize-container .dv-resize-handle-left,
+  .dv-resize-container .dv-resize-handle-right {
+    width: 16px;
+    height: calc(100% - 48px);
+    top: 24px;
+  }
+  .dv-resize-container .dv-resize-handle-left {
+    left: -10px;
+  }
+  .dv-resize-container .dv-resize-handle-right {
+    right: -10px;
+  }
+  .dv-resize-container .dv-resize-handle-topleft,
+  .dv-resize-container .dv-resize-handle-topright,
+  .dv-resize-container .dv-resize-handle-bottomleft,
+  .dv-resize-container .dv-resize-handle-bottomright {
+    height: 24px;
+    width: 24px;
+  }
+  .dv-resize-container .dv-resize-handle-topleft {
+    top: -12px;
+    left: -12px;
+  }
+  .dv-resize-container .dv-resize-handle-topright {
+    top: -12px;
+    right: -12px;
+  }
+  .dv-resize-container .dv-resize-handle-bottomleft {
+    bottom: -12px;
+    left: -12px;
+  }
+  .dv-resize-container .dv-resize-handle-bottomright {
+    bottom: -12px;
+    right: -12px;
+  }
+}
 .dv-render-overlay {
   --dv-overlay-z-index: var(--dv-overlay-z-index, 999);
   position: absolute;
@@ -2633,6 +2692,25 @@
   transition-duration: var(--dv-active-sash-transition-duration, 0.1s);
   transition-delay: var(--dv-active-sash-transition-delay, 0.5s);
 }
+@media (pointer: coarse) {
+  .dv-split-view-container .dv-sash-container > .dv-sash:not(.dv-disabled)::before {
+    content: "";
+    position: absolute;
+    background: transparent;
+  }
+  .dv-split-view-container.dv-horizontal > .dv-sash-container > .dv-sash:not(.dv-disabled)::before {
+    top: 0;
+    bottom: 0;
+    left: -10px;
+    right: -10px;
+  }
+  .dv-split-view-container.dv-vertical > .dv-sash-container > .dv-sash:not(.dv-disabled)::before {
+    left: 0;
+    right: 0;
+    top: -10px;
+    bottom: -10px;
+  }
+}
 .dv-split-view-container .dv-view-container {
   position: relative;
   height: 100%;
@@ -2704,6 +2782,11 @@
 .dv-tab.dv-inactive-tab .dv-default-tab:hover .dv-default-tab-action {
   visibility: visible;
 }
+@media (hover: none) {
+  .dv-tab.dv-inactive-tab .dv-default-tab .dv-default-tab-action {
+    visibility: visible;
+  }
+}
 .dv-tab .dv-default-tab {
   position: relative;
   height: 100%;
@@ -2728,6 +2811,11 @@
   border-radius: 2px;
   background-color: var(--dv-icon-hover-background-color);
 }
+@media (pointer: coarse) {
+  .dv-tab .dv-default-tab .dv-default-tab-action {
+    padding: 8px;
+  }
+}
 .dv-tabs-overflow-dropdown-default {
   height: 100%;
   color: var(--dv-activegroup-hiddenpanel-tab-color);
@@ -2748,6 +2836,7 @@
   border-radius: 2px;
   background-color: var(--dv-icon-hover-background-color);
 }
+@charset "UTF-8";
 .dv-tabs-container {
   display: flex;
   position: relative;
@@ -2757,12 +2846,29 @@
   /* GPU optimizations for smooth scrolling */
   will-change: scroll-position;
   transform: translate3d(0, 0, 0);
+  /**
+   * Stop scroll-chaining at the tab strip so that wheel / trackpad
+   * overscroll past the strip's edges doesn't trigger the browser's
+   * swipe-to-go-back-or-forward gesture (and doesn't scroll the page
+   * either). `contain` keeps the native bounce visuals; `none` would
+   * also disable them.
+   */
+  overscroll-behavior: contain;
+  /**
+   * Empty space between tabs (and the scrollbar lane) keeps pan-x so a
+   * flick on those areas produces native momentum scroll. The tab and
+   * chip elements themselves opt out (`touch-action: none`) so the
+   * pointer drag source owns the gesture from pointerdown — a flick on
+   * a tab or chip always becomes a drag, regardless of direction.
+   */
+  touch-action: pan-x;
 }
 .dv-tabs-container.dv-tabs-container-vertical {
   width: 100%;
   height: fit-content;
   max-height: 100%;
   writing-mode: vertical-rl;
+  touch-action: pan-y;
 }
 .dv-tabs-container.dv-horizontal .dv-tab:not(:first-child)::before, .dv-tabs-container.dv-vertical .dv-tab:not(:first-child)::before {
   content: " ";
@@ -2802,7 +2908,10 @@
 }
 
 .dv-tab {
-  -webkit-user-drag: element;
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
   outline: none;
   padding: 0.25rem 0.5rem;
   cursor: pointer;
@@ -2810,6 +2919,7 @@
   box-sizing: border-box;
   font-size: var(--dv-tab-font-size);
   margin: var(--dv-tab-margin);
+  touch-action: none;
 }
 .dv-tab.dv-tab--shifting {
   will-change: transform, margin-left, margin-right, margin-top, margin-bottom;
@@ -2860,6 +2970,7 @@
   white-space: nowrap;
   box-sizing: border-box;
   line-height: 1;
+  touch-action: none;
   background-color: var(--dv-tab-group-color);
   color: white;
 }
@@ -3037,6 +3148,11 @@
 .dv-tabs-and-actions-container .dv-void-container {
   display: flex;
   flex-grow: 1;
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  touch-action: none;
 }
 .dv-tabs-and-actions-container .dv-void-container.dv-draggable {
   cursor: grab;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "dockview-react",
-    "version": "6.2.2",
+    "version": "6.4.0",
     "description": "React docking layout manager — tabs, groups, grids, splitviews, drag and drop, floating panels",
     "keywords": [
         "splitview",
@@ -20,6 +20,8 @@
         "drag-and-drop",
         "drag",
         "drop",
+        "touch",
+        "mobile",
         "typescript",
         "zero-dependency",
         "ide-layout",
@@ -68,6 +70,6 @@
         "format:check": "prettier --check 'src/**/*.{ts,tsx,js,jsx}'"
     },
     "dependencies": {
-        "dockview": "^6.2.2"
+        "dockview": "^6.4.0"
     }
 }