react-dockable-desktop 5.1.2 → 5.1.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +20 -53
- package/dist/index.cjs +5 -5
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +5 -5
- package/dist/index.js.map +1 -1
- package/dist/styles.css +20 -6
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,12 +1,14 @@
|
|
|
1
1
|
# React Dockable Desktop
|
|
2
2
|
|
|
3
|
-
[](https://www.npmjs.com/package/react-dockable-desktop)
|
|
4
4
|
[](https://www.typescriptlang.org/)
|
|
5
5
|
[](#touch--mobile)
|
|
6
6
|
[](#license)
|
|
7
7
|
[](https://felipecarrillo100.github.io/react-dockable-desktop/demo/)
|
|
8
8
|
[](https://felipecarrillo100.github.io/react-dockable-desktop/)
|
|
9
9
|
|
|
10
|
+
[](https://github.com/sponsors/felipecarrillo100)
|
|
11
|
+
|
|
10
12
|
A premium dockable layout engine for React. Build desktop-class applications with fluid split-docking grids, tabbed panels, resizable floating windows, and **zero-unmount DOM preservation** — by default, across docking, floating, *and* tab-switching alike, so WebGL contexts, live maps, and stateful editors never lose their state no matter how a panel is moved.
|
|
11
13
|
|
|
12
14
|
**[Live Demo](https://felipecarrillo100.github.io/react-dockable-desktop/demo/)** |
|
|
@@ -47,7 +49,7 @@ Import styles in your app entry file:
|
|
|
47
49
|
import 'react-dockable-desktop/styles.css';
|
|
48
50
|
```
|
|
49
51
|
|
|
50
|
-
**Requirements:** React ≥ 16.8
|
|
52
|
+
**Requirements:** React ≥ 16.8 (hooks required). No other runtime dependencies.
|
|
51
53
|
|
|
52
54
|
---
|
|
53
55
|
|
|
@@ -405,58 +407,11 @@ All built-in skins include dark and light variants. Create your own skin by over
|
|
|
405
407
|
|
|
406
408
|
## What's New
|
|
407
409
|
|
|
408
|
-
|
|
409
|
-
-
|
|
410
|
-
|
|
411
|
-
- **`getDimensions()` on `FormContainerContract`** — synchronous getter returning the current `{width, height}` of the panel (or `null` before first layout); reads from the same `ResizeObserver` that drives `onResize`.
|
|
412
|
-
- **`requestMinimize()` on `FormContainerContract`** — imperative counterpart to `requestClose()`; minimizes the panel without needing `useWindowManagerActions`.
|
|
413
|
-
- **`'floating-window'` ContainerType value** — `containerType` now correctly reports `'dockable-panel'` for docked panels and `'floating-window'` for panels in detached floating windows.
|
|
414
|
-
|
|
415
|
-
### v4.0.0
|
|
416
|
-
- **Built-in `<ContextMenu>`** — zero-dependency context menu, portal-rendered and styled with design tokens. No extra package or CSS import needed.
|
|
417
|
-
- **`ContextMenuAdapter` interface** — swap the default menu for your own design-system implementation via `<WindowManager contextMenuAdapter={...} />`.
|
|
418
|
-
- **New exports** — `ContextMenu`, `DefaultContextMenuAdapter`, `ContextMenuHandle`, `ContextMenuAdapter`, `ShowContextMenuOptions`.
|
|
419
|
-
- **Panel Overlay system** — `PanelOverlayRoot`, `PanelToolbar`, `PanelFloatingWindow`, and `usePanelFloatingWindowManager` bring per-panel toolbars and dynamically-spawned corner-anchored floating info windows to any panel.
|
|
420
|
-
- **`usePanelFloatingWindowManager()`** — imperative hook for opening N named floating windows from data or event handlers; all windows share z-ordering, drag, and corner-docking infrastructure.
|
|
421
|
-
- **Toolbar primitives** — `ToolbarButton`, `ToolbarToggle`, `PanelToolbarSeparator`, `ToolbarSpacer`, `ToolbarCenter`, `ToolbarSearchInput` compose panel toolbar content.
|
|
422
|
-
- **Toast Notifications** — zero-dependency `toast.info/success/warning/error/promise()` singleton. `<ToastContainer>` renders via `createPortal`; supports configurable position, width, max-visible queue, pause-on-hover, opt-in progress bar, and auto-dismiss. `ToastAdapter` lets you delegate to Ant Design, MUI, Sonner, or any other notification library without changing call sites.
|
|
423
|
-
- **Workspace corner anchor zones** — drag any panel (floating or docked tab) to a workspace corner to pin it there. Four 80×80 px snap zones appear during drag; anchored windows stack with 8 px gaps and reposition automatically on viewport resize.
|
|
424
|
-
- **`anchor` option on `openPanel` and `floatPanel`** — spawn a new floating window pre-anchored: `openPanel('id', 'comp', { initialTarget: 'floating', anchor: 'top-right' })` or `floatPanel('id', undefined, 'bottom-left')`.
|
|
425
|
-
- **`defaultAnchor` in panel registry** — set `defaultAnchor: 'top-left'` in `PanelRegistryEntry.defaultOptions` so every instance of that component opens anchored.
|
|
426
|
-
- **Full RTL support** — floating window drop zones, edge triggers, and corner snap zones all mirror correctly when `dir="rtl"`.
|
|
427
|
-
- **Removed:** `openPanel` options `stickyRight` / `stickyBottom` (replaced by `anchor`). Saved layouts are automatically migrated.
|
|
428
|
-
|
|
429
|
-
### v3.2.0
|
|
430
|
-
- **Per-skin active state design language** — Sidebar tabs and Toolbar buttons now use a per-skin visual pattern (transparent bar, floating chip, pill, line, neon glow), driven by new CSS design tokens — fully overridable in custom skins. CSS-only, no API changes.
|
|
431
|
-
- **Documentation overhaul** — All guides updated to cover the full v3.1.0 API surface.
|
|
432
|
-
|
|
433
|
-
### v3.1.0
|
|
434
|
-
- **`<Toolbar>` component** — Vertical/horizontal strip hosting `action`, `radio`, `toggle`, `group`, and `separator` items. `useToolbar()` reads/writes state from any panel. `ToolbarGroupItem` adds a collapsed tool-family flyout with controlled mode support.
|
|
435
|
-
- **`<WindowManager taskbarVisibility>`** — Three modes: `'always'` (permanent bar, new default), `'compact'` (shows only with minimized panels), `'autohide'` (overlay bar with 8 px peek strip).
|
|
436
|
-
- **Sidebar resizable drawer** — Drag the drawer edge to resize. Props: `defaultWidth` (px), `minWidth`, `maxWidth`, `onWidthChange`. `drawerWidth` (string) deprecated.
|
|
437
|
-
- **Sidebar `visible` / `stripVisible`** — `visible` collapses the entire sidebar; `stripVisible` collapses only the activity bar. New handle methods: `showStrip()`, `hideStrip()`, `setWidth(px)`, `getWidth()`.
|
|
438
|
-
- **`useSidebar()` / `useSidebarTab()` hooks** — Programmatic Sidebar control from any component in the tree.
|
|
439
|
-
- **`usePanelContextMenu()` hook** — Inject dynamic right-click context menu items from inside a panel component.
|
|
440
|
-
- **Touch & iPad/Android support** — Pointer Events migration; long-press (300 ms) activates tab drag; taskbar chips support hover preview and long-press context menu on touch.
|
|
441
|
-
- **8-direction resize handles** — Floating windows now have N, NE, E, SE, S, SW, W, NW resize handles.
|
|
442
|
-
- **Skin scope fix** — `data-workspace-skin` now applied to `document.documentElement` so Toolbar and Sidebar always inherit the correct skin.
|
|
443
|
-
|
|
444
|
-
### v3.0.0
|
|
445
|
-
- **`DockableDesktopProvider`** — single composite provider replaces the manual `WindowManagerProvider + PanelProvider` nesting
|
|
446
|
-
- **RTL support** — `dir` prop on provider; `setDirection()` on client; full mirroring of all controls
|
|
447
|
-
- **State selectors** — `useWindowManagerState(s => s.activePanelId)` for surgical re-renders
|
|
448
|
-
- **Dynamic ModalStack** — clean overlay system with dirty-state close guards
|
|
449
|
-
- **`usePanelId()` hook** — zero-prop-drilling panel identity
|
|
450
|
-
- **Typed event bus** — `WorkspaceClient<AppEvents>` for type-safe inter-panel messaging
|
|
451
|
-
|
|
452
|
-
### v2.0.0 — Breaking Changes
|
|
453
|
-
|
|
454
|
-
| Removed | Replacement |
|
|
455
|
-
| :--- | :--- |
|
|
456
|
-
| `bringToFront(id)` | `focusPanel(id)` — works for both floating and docked panels |
|
|
457
|
-
| `setActivePanel(id)` | `focusPanel(id)` |
|
|
410
|
+
Every release is documented in one place — see the
|
|
411
|
+
**[CHANGELOG](https://github.com/felipecarrillo100/react-dockable-desktop/blob/main/CHANGELOG.md)**
|
|
412
|
+
for the full, up-to-date history of additions, fixes, and breaking changes.
|
|
458
413
|
|
|
459
|
-
|
|
414
|
+
Upgrading across a major version? See the [Migration Guide](https://felipecarrillo100.github.io/react-dockable-desktop/guide/migration).
|
|
460
415
|
|
|
461
416
|
---
|
|
462
417
|
|
|
@@ -503,3 +458,15 @@ npm run build # build dist/
|
|
|
503
458
|
## License
|
|
504
459
|
|
|
505
460
|
MIT — free to use, adapt, and build upon.
|
|
461
|
+
|
|
462
|
+
---
|
|
463
|
+
|
|
464
|
+
## Donations & Sponsoring
|
|
465
|
+
|
|
466
|
+
Creating and maintaining open-source libraries is a passion of mine. If you find this library useful and it saves you time, please consider supporting its development. Your contributions help keep the project active and motivated!
|
|
467
|
+
|
|
468
|
+
Every bit of support—whether it's sponsoring on GitHub, a coffee, a star, or a shout-out, is deeply appreciated. Thank you for being part of the community!
|
|
469
|
+
|
|
470
|
+
[<img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" name="buy-me-a-coffee" alt="Buy Me A Coffee" width="180">](https://buymeacoffee.com/felipecarrillo100)
|
|
471
|
+
|
|
472
|
+
[](https://github.com/sponsors/felipecarrillo100)
|