Skip to content

Releases: yusufarsln98/react-zeugma

react-zeugma@7.1.1

Choose a tag to compare

@github-actions github-actions released this 09 Oct 14:19
6e1917b

Patch Changes

  • Resolve security audit findings, harden supply chain, and enhance drag/resize resilience:
    • Add pointercancel and blur event handlers to drag sessions and cleanup refs in useResizer to prevent stuck resizing states when pointers are interrupted.
    • Wrap localStorage access in try/catch and add schema validation (isValidTreeNode) in useZeugmaPersistence to guard against corrupted or invalid stored layouts.
    • Add WeakSet cycle detection and recursion depth guard in compare.ts to 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 useZeugmaPopouts and guard against SSR ReferenceError.
    • Export isValidTreeNode utility from react-zeugma/utils.

react-zeugma@7.1.0

Choose a tag to compare

@github-actions github-actions released this 21 Aug 10:35
e6cf7bb

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 via addTab(tabId, targetPaneId?, metadata?) and preserved across layout actions.

react-zeugma@7.0.0

Choose a tag to compare

@github-actions github-actions released this 21 Aug 08:39
5ec13a8

Major Changes

  • Decoupled Tab Metadata & Isolated Reactivity:
    • Removed tabsMetadata from PaneNode and the layout TreeNode hierarchy. Layout trees now represent pure spatial topology (id, tabIds, activeTabId, locked).
    • Introduced fine-grained metadata store backed by React 18/19 useSyncExternalStore (useTabMetadata(tabId) and useAllMetadata()).
    • 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 triggering onChange(layout).
    • Added controlled metadata options (initialMetadata, metadata, onMetadataChange) to useZeugma().
    • Added automatic metadata persistence to localStorage when persist is enabled.

react-zeugma@6.9.12

Choose a tag to compare

@github-actions github-actions released this 04 Aug 08:23
456653f

Patch Changes

  • fix: always force widget remounting on popout transitions to prevent style/context/DOM side effects

react-zeugma@6.9.11

Choose a tag to compare

@github-actions github-actions released this 03 Aug 12:14
a8f1918

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 useZeugmaPopouts with standard styles and rename the class to zeugma-popout-container.

6.9.8

Patch Changes

  • Restore renderPopoutWrapper callback 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 (RenderCounterBadge and RenderCounterFooter) 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 renderPopoutWrapper callback prop to allow wrapping popped-out widgets with custom style/context providers (e.g. styled-components StyleSheetManager or antd ConfigProvider).
  • Add remountOnPopout option to TabDetails to force-remount specific widgets during window transitions instead of using adoptNode (essential for context-bound libraries like Leaflet or AG Grid).
  • Implement dynamic style syncing via MutationObserver on 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.adoptNode and window redirection, preventing components from unmounting and keeping widget runtime states completely intact.
    • Added the useZeugmaPopouts hook 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) and dockTab(tabId) actions, poppedOutTabIds state, and isTabPoppedOut(tabId) queries via useZeugmaContext and usePaneContext.
    • Added a placeholder screen in empty/popped-out panes allowing users to dock panels back manually.
    • Integrated popout/dock controls and a new interactive MapPanel widget 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 swapPreview custom classname in ZeugmaClassNames to 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 tabs to tabIds in TreeNode interface.
    • Updated renderTabs function to take a singleton tab details.
  • 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 persist prop on <Zeugma> component, allowing configuring persistence as a boolean (to enable layout saving/restoring with the default key 'zeugma-layout') or as a ZeugmaPersistOptions object (supporting custom key and enabled flag).
    • Isolated the persistence logic into a dedicated useZeugmaPersistence custom hook.
  • 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 renderingLayout instead of the logical layout.
  • 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). setLayout now always force-synchronizes renderingLayout to the committed layout structure.
  • 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 logical layout structure when they match the active dragging ID.

6.6.2

Patch Changes

  • Layout State Decoupling:
    • Decoupled the logical layout from the internal renderingLayout so the context layout remains stable and unchanged until the user drops the widget.
    • Excluded renderingLayout from the public ZeugmaController interface to keep internal transitions encapsulated.
  • 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 smooth 150ms cubic-bezier transition) when there is an active drag-to-dismiss gesture, with no other style overrides.
    • Set transformOrigin to top left to ensure correct cursor alignment.

6.6.1

Patch Changes

  • Custom Drag Preview ClassNames:
    • Exposed paneDragPreview and tabDragPreview keys under classNames on <Zeugma> to allow styling cursor-following drag preview overlays without default or fallback class names.
    • Updated stableClassNames shallow memoization list inside <Zeugma> to include the new preview class names.
    • Updated API references in README.md and the react-zeugma documentation article.

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 activeIdRef in 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 controller prop in ZeugmaProps and enforced renderPane placement directly on <PaneTree> component in provider mode, restricting <Zeugma> from accepting renderPane when nested children are present.

6.5.1

Patch Changes

  • Refactored <Zeugma> component to behave strictly as a provider when children are 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 ZeugmaProvider context 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 removePane action and checking whether the dragged node is a tab or a pane container.

6.4.1

Patch Changes

  • Refactored ZeugmaProviderProps to extend ZeugmaProps using TypeScript Omit utility instead of duplicating all configuration/callback prop definitions.
  • Refactored <Zeugma> component into <ZeugmaProvider> and <ZeugmaRenderer> to support wrappi...
Read more

react-zeugma@6.9.9

Choose a tag to compare

@github-actions github-actions released this 30 Jul 07:45
05ceabf

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 useZeugmaPopouts with standard styles and rename the class to zeugma-popout-container.

react-zeugma@6.9.10

Choose a tag to compare

@github-actions github-actions released this 30 Jul 09:55
66ea040

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 useZeugmaPopouts with standard styles and rename the class to zeugma-popout-container.

6.9.8

Patch Changes

  • Restore renderPopoutWrapper callback 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 (RenderCounterBadge and RenderCounterFooter) 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 renderPopoutWrapper callback prop to allow wrapping popped-out widgets with custom style/context providers (e.g. styled-components StyleSheetManager or antd ConfigProvider).
  • Add remountOnPopout option to TabDetails to force-remount specific widgets during window transitions instead of using adoptNode (essential for context-bound libraries like Leaflet or AG Grid).
  • Implement dynamic style syncing via MutationObserver on 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.adoptNode and window redirection, preventing components from unmounting and keeping widget runtime states completely intact.
    • Added the useZeugmaPopouts hook 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) and dockTab(tabId) actions, poppedOutTabIds state, and isTabPoppedOut(tabId) queries via useZeugmaContext and usePaneContext.
    • Added a placeholder screen in empty/popped-out panes allowing users to dock panels back manually.
    • Integrated popout/dock controls and a new interactive MapPanel widget 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 swapPreview custom classname in ZeugmaClassNames to 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 tabs to tabIds in TreeNode interface.
    • Updated renderTabs function to take a singleton tab details.
  • 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 persist prop on <Zeugma> component, allowing configuring persistence as a boolean (to enable layout saving/restoring with the default key 'zeugma-layout') or as a ZeugmaPersistOptions object (supporting custom key and enabled flag).
    • Isolated the persistence logic into a dedicated useZeugmaPersistence custom hook.
  • 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 renderingLayout instead of the logical layout.
  • 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). setLayout now always force-synchronizes renderingLayout to the committed layout structure.
  • 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 logical layout structure when they match the active dragging ID.

6.6.2

Patch Changes

  • Layout State Decoupling:
    • Decoupled the logical layout from the internal renderingLayout so the context layout remains stable and unchanged until the user drops the widget.
    • Excluded renderingLayout from the public ZeugmaController interface to keep internal transitions encapsulated.
  • 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 smooth 150ms cubic-bezier transition) when there is an active drag-to-dismiss gesture, with no other style overrides.
    • Set transformOrigin to top left to ensure correct cursor alignment.

6.6.1

Patch Changes

  • Custom Drag Preview ClassNames:
    • Exposed paneDragPreview and tabDragPreview keys under classNames on <Zeugma> to allow styling cursor-following drag preview overlays without default or fallback class names.
    • Updated stableClassNames shallow memoization list inside <Zeugma> to include the new preview class names.
    • Updated API references in README.md and the react-zeugma documentation article.

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 activeIdRef in 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 controller prop in ZeugmaProps and enforced renderPane placement directly on <PaneTree> component in provider mode, restricting <Zeugma> from accepting renderPane when nested children are present.

6.5.1

Patch Changes

  • Refactored <Zeugma> component to behave strictly as a provider when children are 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 ZeugmaProvider context 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 removePane action and checking whether the dragged node is a tab or a pane container.

6.4.1

Patch Changes

  • Refactored ZeugmaProviderProps to extend ZeugmaProps using TypeScript Omit utility instead of duplicating all configuration/callback prop definitions.
  • Refactored <Zeugma> component into <ZeugmaProvider> and <ZeugmaRenderer> to support wrappi...
Read more

react-zeugma@6.9.8

Choose a tag to compare

@github-actions github-actions released this 29 Jul 15:49
5ca5ab5

Patch Changes

  • Restore renderPopoutWrapper callback 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

Choose a tag to compare

@github-actions github-actions released this 29 Jul 15:31
3ce154a

Patch Changes

  • Remove hardcoded default Tailwind CSS classes from DevTools components (RenderCounterBadge and RenderCounterFooter) to keep them completely style-agnostic and unstyled for consumer applications.

react-zeugma@6.9.6

Choose a tag to compare

@github-actions github-actions released this 29 Jul 14:33
70774cb

Patch Changes

  • Add built-in DevTools utilities (react-zeugma/devtools) featuring React 18/19 StrictMode-safe mount and render counters (useRenderCounter, <RenderCounterBadge>, <RenderCounterFooter>).