Repository navigation
Releases: yusufarsln98/react-zeugma
Releases · yusufarsln98/react-zeugma
Release list
react-zeugma@7.1.1
Patch Changes
- Resolve security audit findings, harden supply chain, and enhance drag/resize resilience:
- Add
pointercancelandblurevent handlers to drag sessions and cleanup refs inuseResizerto prevent stuck resizing states when pointers are interrupted. - Wrap
localStorageaccess intry/catchand add schema validation (isValidTreeNode) inuseZeugmaPersistenceto guard against corrupted or invalid stored layouts. - Add
WeakSetcycle detection and recursion depth guard incompare.tsto prevent call stack overflow. - Clean up DevTools render counter store entries when listeners reach zero to eliminate memory leaks.
- Remove global window/document monkey-patching in
useZeugmaPopoutsand guard against SSR ReferenceError. - Export
isValidTreeNodeutility fromreact-zeugma/utils.
- Add
react-zeugma@7.1.0
Minor Changes
- Make tab and pane metadata strictly immutable and remove metadata mutation APIs (
updateMetadata,updateTabMetadata). Tab metadata is defined on initial layout declaration or viaaddTab(tabId, targetPaneId?, metadata?)and preserved across layout actions.
react-zeugma@7.0.0
Major Changes
- Decoupled Tab Metadata & Isolated Reactivity:
- Removed
tabsMetadatafromPaneNodeand the layoutTreeNodehierarchy. Layout trees now represent pure spatial topology (id,tabIds,activeTabId,locked). - Introduced fine-grained metadata store backed by React 18/19
useSyncExternalStore(useTabMetadata(tabId)anduseAllMetadata()). - Mutating tab metadata via
controller.updateMetadata(tabId, updater)re-renders only the targeted tab/widget without re-rendering the layout tree, split resizers, or sibling tabs, and without triggeringonChange(layout). - Added controlled metadata options (
initialMetadata,metadata,onMetadataChange) touseZeugma(). - Added automatic metadata persistence to
localStoragewhenpersistis enabled.
- Removed
react-zeugma@6.9.12
Patch Changes
- fix: always force widget remounting on popout transitions to prevent style/context/DOM side effects
react-zeugma@6.9.11
react-zeugma
6.9.9
Patch Changes
- Eliminate remaining Tailwind CSS inline utility classes in
<RenderCounterFooter>component and replace them with explicit inline style attributes. - Replace Tailwind styling on popout window root container in
useZeugmaPopoutswith standard styles and rename the class tozeugma-popout-container.
6.9.8
Patch Changes
- Restore
renderPopoutWrappercallback prop on<Zeugma>component to allow wrapping popped-out widgets with custom style/context providers (e.g. styled-components StyleSheetManager or antd ConfigProvider).
6.9.7
Patch Changes
- Remove hardcoded default Tailwind CSS classes from DevTools components (
RenderCounterBadgeandRenderCounterFooter) to keep them completely style-agnostic and unstyled for consumer applications.
6.9.6
Patch Changes
- Add built-in DevTools utilities (
react-zeugma/devtools) featuring React 18/19 StrictMode-safe mount and render counters (useRenderCounter,<RenderCounterBadge>,<RenderCounterFooter>).
6.9.5
Patch Changes
- Prevent layout modifications (closes, additions, splits, merges, resizes, and popouts) at the API level when a pane/tab is in fullscreen mode.
6.9.4
Patch Changes
- Automatically close and clean up active popout windows when the corresponding widget is removed from the layout tree.
6.9.3
Patch Changes
- Fix a regression where widgets were remounted when popped out into separate windows or docked back to the main layout. The portal wrapper element is now adopted to the target document rather than recreated, preserving React portal target references and keeping widget state intact.
6.9.2
Patch Changes
- Fix Ant Design dropdown positioning, theme CSS variables injection, and relative font/image asset resolution inside popout portal windows.
6.9.1
Patch Changes
- Add
renderPopoutWrappercallback prop to allow wrapping popped-out widgets with custom style/context providers (e.g. styled-components StyleSheetManager or antd ConfigProvider). - Add
remountOnPopoutoption to TabDetails to force-remount specific widgets during window transitions instead of usingadoptNode(essential for context-bound libraries like Leaflet or AG Grid). - Implement dynamic style syncing via
MutationObserveron the main document's head, mirroring newly added styles and absolute-resolved<link>elements to all open popouts in real-time. - Delay child window closures during docking by one frame to let React cleanly execute all portal unmount and cleanup hooks before the context is destroyed.
6.9.0
Minor Changes
- Popout Tabs (Open in a New Window):
- Re-introduced support for popping out tabs/widgets into separate browser window views.
- Implemented stable React portal target management using DOM-level
document.adoptNodeand window redirection, preventing components from unmounting and keeping widget runtime states completely intact. - Added the
useZeugmaPopoutshook to manage the lifecycle of popout windows, dynamically copy stylesheets, body classes, and background styles, and focus existing popouts. - Patched standard React hooks (
useEffect,useLayoutEffect,useInsertionEffect) and DOM APIs (createElement,getElementById,querySelector, etc.) dynamically inside popout contexts to support third-party libraries. - Exposed
popoutTab(tabId)anddockTab(tabId)actions,poppedOutTabIdsstate, andisTabPoppedOut(tabId)queries viauseZeugmaContextandusePaneContext. - Added a placeholder screen in empty/popped-out panes allowing users to dock panels back manually.
- Integrated popout/dock controls and a new interactive
MapPanelwidget into the homepage demo dashboard. - Updated library
README.md, developer API references, and AI skill configurations to cover popout APIs.
6.8.0
Minor Changes
- Tab Swapping Drop Zone:
- Added a 5th center drop zone to panes (active only when dragging a tab) that swaps the dragged tab with the active tab of the target pane.
- Exposed a new
swapPreviewcustom classname inZeugmaClassNamesto style the swap overlay.
6.7.4
Patch Changes
- Disable dragging and dropping of panes and tabs when a pane is zoomed to fullscreen.
6.7.3
Patch Changes
- Implement dragging pane directly into tabs.
6.7.2
Patch Changes
- Fix metadata being undefined
- Error on metadatas fixed when dragging a tab or pane in a multi-tabbed layout.
6.7.1
Patch Changes
- Refactor render tabs function
- Renamed
tabstotabIdsinTreeNodeinterface. - Updated renderTabs function to take a singleton tab details.
- Renamed
- Fix metadata being undefined
- Fixed the problem during the tab dragging.
6.7.0
Minor Changes
- Layout Persistence Support:
- Added support for layout persistence using
localStorage. - Introduced the
persistprop on<Zeugma>component, allowing configuring persistence as a boolean (to enable layout saving/restoring with the default key'zeugma-layout') or as aZeugmaPersistOptionsobject (supporting customkeyandenabledflag). - Isolated the persistence logic into a dedicated
useZeugmaPersistencecustom hook.
- Added support for layout persistence using
- Fixed Multi-Tab Drag Visibility:
- Fixed a bug where dragging a tab in a multi-tabbed pane did not visually remove it from the pane's tab list during the drag session. Pane components now resolve their tabs and state using the active
renderingLayoutinstead of the logicallayout.
- Fixed a bug where dragging a tab in a multi-tabbed pane did not visually remove it from the pane's tab list during the drag session. Pane components now resolve their tabs and state using the active
- Fixed Tab Drop Back No-Op State Desync:
- Fixed a bug where dropping a tab back to its original layout position did not restore it visually on screen (desync between logical layout and rendering layout due to identical/no-op layout state comparisons).
setLayoutnow always force-synchronizesrenderingLayoutto the committed layout structure.
- Fixed a bug where dropping a tab back to its original layout position did not restore it visually on screen (desync between logical layout and rendering layout due to identical/no-op layout state comparisons).
- Fixed Drag Preview Content Rendering:
- Fixed a bug where grabbing a tab or pane left the drag preview overlay empty (since the item is removed from the active
renderingLayout). Pane components now resolve their children and tabs using the original logicallayoutstructure when they match the active dragging ID.
- Fixed a bug where grabbing a tab or pane left the drag preview overlay empty (since the item is removed from the active
6.6.2
Patch Changes
- Layout State Decoupling:
- Decoupled the logical
layoutfrom the internalrenderingLayoutso the context layout remains stable and unchanged until the user drops the widget. - Excluded
renderingLayoutfrom the publicZeugmaControllerinterface to keep internal transitions encapsulated.
- Decoupled the logical
- Resizing Pointer Events Prevention:
- Globally disabled pointer events on all non-separator pane elements during resizing sessions to prevent iframe focus/cursor locking.
- Fixed Default Drag Dimensions:
- Removed dynamic bounding rect calculations on drag overlay and hardcoded default widget dimensions to 420px width and 260px height.
- Default Drag Overlay Scaling:
- Implemented automatic scaling of the cursor-following drag preview overlay to
0.8(using a smooth150mscubic-bezier transition) when there is an active drag-to-dismiss gesture, with no other style overrides. - Set
transformOrigintotop leftto ensure correct cursor alignment.
- Implemented automatic scaling of the cursor-following drag preview overlay to
6.6.1
Patch Changes
- Custom Drag Preview ClassNames:
- Exposed
paneDragPreviewandtabDragPreviewkeys underclassNameson<Zeugma>to allow styling cursor-following drag preview overlays without default or fallback class names. - Updated
stableClassNamesshallow memoization list inside<Zeugma>to include the new preview class names. - Updated API references in
README.mdand thereact-zeugmadocumentation article.
- Exposed
6.6.0
Minor Changes
- Drag Actual Node Previews & Style-Agnostic Refactoring:
- Implemented actual widget/pane content rendering inside the tab drag overlay by treating the dragged tab as a temporary single-tab pane, automatically portalling the live widget content.
- Sized the tab drag overlay container dynamically to match the parent pane it originated from.
- Prevented the tab header registration from being prematurely cleared on drag start by checking a shared
activeIdRefin the portal registry during tab unmount. - Refactored code by extracting large components and hooks into separate modules (
DragOverlayPreview,FlatSplitter,customCollisionDetection,useAllTabIds,useZeugmaDragMeasurement,useRegisterRenderPane). - Removed all non-positional inline styles (shadows, opacity, background, borders, border-radius) from default drag previews to keep the core library fully style-agnostic.
6.5.2
Patch Changes
- Required
controllerprop inZeugmaPropsand enforcedrenderPaneplacement directly on<PaneTree>component in provider mode, restricting<Zeugma>from acceptingrenderPanewhen nested children are present.
6.5.1
Patch Changes
- Refactored
<Zeugma>component to behave strictly as a provider whenchildrenare supplied, requiring the user to explicitly render<PaneTree />inside the children. When no children are provided, it automatically renders<PaneTree />in standalone mode.
6.5.0
Minor Changes
- Consolidated ZeugmaProvider and Zeugma into a single
<Zeugma>component that acts as a provider by default.
6.4.2
Patch Changes
- Refactored the homepage dashboard demo to consume the
ZeugmaProvidercontext directly, eliminating prop drilling for widget toggles and layout presets. - Fixed the drag-out-to-dismiss gesture ("drop to release") for pane-level drag inputs by passing the
removePaneaction and checking whether the dragged node is a tab or a pane container.
6.4.1
Patch Changes
- Refactored
ZeugmaProviderPropsto extendZeugmaPropsusing TypeScript Omit utility instead of duplicating all configuration/callback prop definitions. - Refactored
<Zeugma>component into<ZeugmaProvider>and<ZeugmaRenderer>to support wrappi...
react-zeugma@6.9.9
Patch Changes
- Eliminate remaining Tailwind CSS inline utility classes in
<RenderCounterFooter>component and replace them with explicit inline style attributes. - Replace Tailwind styling on popout window root container in
useZeugmaPopoutswith standard styles and rename the class tozeugma-popout-container.
react-zeugma@6.9.10
react-zeugma
6.9.9
Patch Changes
- Eliminate remaining Tailwind CSS inline utility classes in
<RenderCounterFooter>component and replace them with explicit inline style attributes. - Replace Tailwind styling on popout window root container in
useZeugmaPopoutswith standard styles and rename the class tozeugma-popout-container.
6.9.8
Patch Changes
- Restore
renderPopoutWrappercallback prop on<Zeugma>component to allow wrapping popped-out widgets with custom style/context providers (e.g. styled-components StyleSheetManager or antd ConfigProvider).
6.9.7
Patch Changes
- Remove hardcoded default Tailwind CSS classes from DevTools components (
RenderCounterBadgeandRenderCounterFooter) to keep them completely style-agnostic and unstyled for consumer applications.
6.9.6
Patch Changes
- Add built-in DevTools utilities (
react-zeugma/devtools) featuring React 18/19 StrictMode-safe mount and render counters (useRenderCounter,<RenderCounterBadge>,<RenderCounterFooter>).
6.9.5
Patch Changes
- Prevent layout modifications (closes, additions, splits, merges, resizes, and popouts) at the API level when a pane/tab is in fullscreen mode.
6.9.4
Patch Changes
- Automatically close and clean up active popout windows when the corresponding widget is removed from the layout tree.
6.9.3
Patch Changes
- Fix a regression where widgets were remounted when popped out into separate windows or docked back to the main layout. The portal wrapper element is now adopted to the target document rather than recreated, preserving React portal target references and keeping widget state intact.
6.9.2
Patch Changes
- Fix Ant Design dropdown positioning, theme CSS variables injection, and relative font/image asset resolution inside popout portal windows.
6.9.1
Patch Changes
- Add
renderPopoutWrappercallback prop to allow wrapping popped-out widgets with custom style/context providers (e.g. styled-components StyleSheetManager or antd ConfigProvider). - Add
remountOnPopoutoption to TabDetails to force-remount specific widgets during window transitions instead of usingadoptNode(essential for context-bound libraries like Leaflet or AG Grid). - Implement dynamic style syncing via
MutationObserveron the main document's head, mirroring newly added styles and absolute-resolved<link>elements to all open popouts in real-time. - Delay child window closures during docking by one frame to let React cleanly execute all portal unmount and cleanup hooks before the context is destroyed.
6.9.0
Minor Changes
- Popout Tabs (Open in a New Window):
- Re-introduced support for popping out tabs/widgets into separate browser window views.
- Implemented stable React portal target management using DOM-level
document.adoptNodeand window redirection, preventing components from unmounting and keeping widget runtime states completely intact. - Added the
useZeugmaPopoutshook to manage the lifecycle of popout windows, dynamically copy stylesheets, body classes, and background styles, and focus existing popouts. - Patched standard React hooks (
useEffect,useLayoutEffect,useInsertionEffect) and DOM APIs (createElement,getElementById,querySelector, etc.) dynamically inside popout contexts to support third-party libraries. - Exposed
popoutTab(tabId)anddockTab(tabId)actions,poppedOutTabIdsstate, andisTabPoppedOut(tabId)queries viauseZeugmaContextandusePaneContext. - Added a placeholder screen in empty/popped-out panes allowing users to dock panels back manually.
- Integrated popout/dock controls and a new interactive
MapPanelwidget into the homepage demo dashboard. - Updated library
README.md, developer API references, and AI skill configurations to cover popout APIs.
6.8.0
Minor Changes
- Tab Swapping Drop Zone:
- Added a 5th center drop zone to panes (active only when dragging a tab) that swaps the dragged tab with the active tab of the target pane.
- Exposed a new
swapPreviewcustom classname inZeugmaClassNamesto style the swap overlay.
6.7.4
Patch Changes
- Disable dragging and dropping of panes and tabs when a pane is zoomed to fullscreen.
6.7.3
Patch Changes
- Implement dragging pane directly into tabs.
6.7.2
Patch Changes
- Fix metadata being undefined
- Error on metadatas fixed when dragging a tab or pane in a multi-tabbed layout.
6.7.1
Patch Changes
- Refactor render tabs function
- Renamed
tabstotabIdsinTreeNodeinterface. - Updated renderTabs function to take a singleton tab details.
- Renamed
- Fix metadata being undefined
- Fixed the problem during the tab dragging.
6.7.0
Minor Changes
- Layout Persistence Support:
- Added support for layout persistence using
localStorage. - Introduced the
persistprop on<Zeugma>component, allowing configuring persistence as a boolean (to enable layout saving/restoring with the default key'zeugma-layout') or as aZeugmaPersistOptionsobject (supporting customkeyandenabledflag). - Isolated the persistence logic into a dedicated
useZeugmaPersistencecustom hook.
- Added support for layout persistence using
- Fixed Multi-Tab Drag Visibility:
- Fixed a bug where dragging a tab in a multi-tabbed pane did not visually remove it from the pane's tab list during the drag session. Pane components now resolve their tabs and state using the active
renderingLayoutinstead of the logicallayout.
- Fixed a bug where dragging a tab in a multi-tabbed pane did not visually remove it from the pane's tab list during the drag session. Pane components now resolve their tabs and state using the active
- Fixed Tab Drop Back No-Op State Desync:
- Fixed a bug where dropping a tab back to its original layout position did not restore it visually on screen (desync between logical layout and rendering layout due to identical/no-op layout state comparisons).
setLayoutnow always force-synchronizesrenderingLayoutto the committed layout structure.
- Fixed a bug where dropping a tab back to its original layout position did not restore it visually on screen (desync between logical layout and rendering layout due to identical/no-op layout state comparisons).
- Fixed Drag Preview Content Rendering:
- Fixed a bug where grabbing a tab or pane left the drag preview overlay empty (since the item is removed from the active
renderingLayout). Pane components now resolve their children and tabs using the original logicallayoutstructure when they match the active dragging ID.
- Fixed a bug where grabbing a tab or pane left the drag preview overlay empty (since the item is removed from the active
6.6.2
Patch Changes
- Layout State Decoupling:
- Decoupled the logical
layoutfrom the internalrenderingLayoutso the context layout remains stable and unchanged until the user drops the widget. - Excluded
renderingLayoutfrom the publicZeugmaControllerinterface to keep internal transitions encapsulated.
- Decoupled the logical
- Resizing Pointer Events Prevention:
- Globally disabled pointer events on all non-separator pane elements during resizing sessions to prevent iframe focus/cursor locking.
- Fixed Default Drag Dimensions:
- Removed dynamic bounding rect calculations on drag overlay and hardcoded default widget dimensions to 420px width and 260px height.
- Default Drag Overlay Scaling:
- Implemented automatic scaling of the cursor-following drag preview overlay to
0.8(using a smooth150mscubic-bezier transition) when there is an active drag-to-dismiss gesture, with no other style overrides. - Set
transformOrigintotop leftto ensure correct cursor alignment.
- Implemented automatic scaling of the cursor-following drag preview overlay to
6.6.1
Patch Changes
- Custom Drag Preview ClassNames:
- Exposed
paneDragPreviewandtabDragPreviewkeys underclassNameson<Zeugma>to allow styling cursor-following drag preview overlays without default or fallback class names. - Updated
stableClassNamesshallow memoization list inside<Zeugma>to include the new preview class names. - Updated API references in
README.mdand thereact-zeugmadocumentation article.
- Exposed
6.6.0
Minor Changes
- Drag Actual Node Previews & Style-Agnostic Refactoring:
- Implemented actual widget/pane content rendering inside the tab drag overlay by treating the dragged tab as a temporary single-tab pane, automatically portalling the live widget content.
- Sized the tab drag overlay container dynamically to match the parent pane it originated from.
- Prevented the tab header registration from being prematurely cleared on drag start by checking a shared
activeIdRefin the portal registry during tab unmount. - Refactored code by extracting large components and hooks into separate modules (
DragOverlayPreview,FlatSplitter,customCollisionDetection,useAllTabIds,useZeugmaDragMeasurement,useRegisterRenderPane). - Removed all non-positional inline styles (shadows, opacity, background, borders, border-radius) from default drag previews to keep the core library fully style-agnostic.
6.5.2
Patch Changes
- Required
controllerprop inZeugmaPropsand enforcedrenderPaneplacement directly on<PaneTree>component in provider mode, restricting<Zeugma>from acceptingrenderPanewhen nested children are present.
6.5.1
Patch Changes
- Refactored
<Zeugma>component to behave strictly as a provider whenchildrenare supplied, requiring the user to explicitly render<PaneTree />inside the children. When no children are provided, it automatically renders<PaneTree />in standalone mode.
6.5.0
Minor Changes
- Consolidated ZeugmaProvider and Zeugma into a single
<Zeugma>component that acts as a provider by default.
6.4.2
Patch Changes
- Refactored the homepage dashboard demo to consume the
ZeugmaProvidercontext directly, eliminating prop drilling for widget toggles and layout presets. - Fixed the drag-out-to-dismiss gesture ("drop to release") for pane-level drag inputs by passing the
removePaneaction and checking whether the dragged node is a tab or a pane container.
6.4.1
Patch Changes
- Refactored
ZeugmaProviderPropsto extendZeugmaPropsusing TypeScript Omit utility instead of duplicating all configuration/callback prop definitions. - Refactored
<Zeugma>component into<ZeugmaProvider>and<ZeugmaRenderer>to support wrappi...
react-zeugma@6.9.8
Patch Changes
- Restore
renderPopoutWrappercallback prop on<Zeugma>component to allow wrapping popped-out widgets with custom style/context providers (e.g. styled-components StyleSheetManager or antd ConfigProvider).
react-zeugma@6.9.7
Patch Changes
- Remove hardcoded default Tailwind CSS classes from DevTools components (
RenderCounterBadgeandRenderCounterFooter) to keep them completely style-agnostic and unstyled for consumer applications.
react-zeugma@6.9.6
Patch Changes
- Add built-in DevTools utilities (
react-zeugma/devtools) featuring React 18/19 StrictMode-safe mount and render counters (useRenderCounter,<RenderCounterBadge>,<RenderCounterFooter>).