react-dockable-desktop 5.2.1 → 5.3.0
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 +1 -1
- package/dist/index.cjs +4 -4
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +36 -9
- package/dist/index.d.ts +36 -9
- package/dist/index.js +4 -4
- package/dist/index.js.map +1 -1
- package/dist/styles.css +68 -24
- package/package.json +1 -1
package/dist/styles.css
CHANGED
|
@@ -1892,23 +1892,46 @@ body.rdd-dragging-active {
|
|
|
1892
1892
|
padding-top: 0;
|
|
1893
1893
|
}
|
|
1894
1894
|
|
|
1895
|
+
/* When a footerAction is present, it owns its own bottom spacing (see .rdd-sidebar-footer-area
|
|
1896
|
+
below) — the strip's own bottom padding no longer applies. */
|
|
1897
|
+
.rdd-sidebar-tabs-strip.rdd-sidebar-tabs-strip--has-footer-action {
|
|
1898
|
+
padding-bottom: 0;
|
|
1899
|
+
}
|
|
1900
|
+
|
|
1895
1901
|
/* Wraps `headerAction` — independent of .rdd-sidebar-tabs-list's own gap, so a consumer can
|
|
1896
|
-
tune spacing/effective height around their button (default
|
|
1897
|
-
touching inter-tab spacing. Layout-only values, so no light/dark variant is
|
|
1902
|
+
tune spacing/effective height around their button(s) (default, custom-rendered, or a mix with
|
|
1903
|
+
real tabs) without touching inter-tab spacing. Layout-only values, so no light/dark variant is
|
|
1904
|
+
needed. Column + gap so multiple entries stack — visually identical to before for the single-
|
|
1905
|
+
entry case. */
|
|
1898
1906
|
.rdd-sidebar-header-area {
|
|
1899
1907
|
display: flex;
|
|
1908
|
+
flex-direction: column;
|
|
1900
1909
|
align-items: center;
|
|
1901
|
-
|
|
1910
|
+
gap: 8px;
|
|
1902
1911
|
padding-top: var(--rdd-sidebar-header-area-padding-top, 8px);
|
|
1903
1912
|
padding-bottom: var(--rdd-sidebar-header-area-padding-bottom, 8px);
|
|
1904
1913
|
}
|
|
1905
1914
|
|
|
1906
|
-
/*
|
|
1915
|
+
/* Mirror of .rdd-sidebar-header-area for `footerAction` — pinned to the bottom of the strip via
|
|
1916
|
+
.rdd-sidebar-tabs-list's flex: 1 below. */
|
|
1917
|
+
.rdd-sidebar-footer-area {
|
|
1918
|
+
display: flex;
|
|
1919
|
+
flex-direction: column;
|
|
1920
|
+
align-items: center;
|
|
1921
|
+
gap: 8px;
|
|
1922
|
+
padding-top: var(--rdd-sidebar-footer-area-padding-top, 8px);
|
|
1923
|
+
padding-bottom: var(--rdd-sidebar-footer-area-padding-bottom, 8px);
|
|
1924
|
+
}
|
|
1925
|
+
|
|
1926
|
+
/* Wraps the tabs only — owns the gap that used to live on .rdd-sidebar-tabs-strip itself.
|
|
1927
|
+
flex: 1 absorbs remaining space so a following .rdd-sidebar-footer-area is pushed to the
|
|
1928
|
+
bottom of the strip regardless of tab count. */
|
|
1907
1929
|
.rdd-sidebar-tabs-list {
|
|
1908
1930
|
display: flex;
|
|
1909
1931
|
flex-direction: column;
|
|
1910
1932
|
align-items: center;
|
|
1911
1933
|
gap: 8px;
|
|
1934
|
+
flex: 1;
|
|
1912
1935
|
}
|
|
1913
1936
|
|
|
1914
1937
|
/* Position-specific tab strip border alignment */
|
|
@@ -1956,28 +1979,28 @@ body.rdd-dragging-active {
|
|
|
1956
1979
|
}
|
|
1957
1980
|
|
|
1958
1981
|
.rdd-sidebar-tab-btn.rdd-active {
|
|
1959
|
-
width: var(--tab-btn-active-width) !important;
|
|
1982
|
+
width: var(--tab-btn-active-width, 100%) !important;
|
|
1960
1983
|
color: var(--tab-icon-active) !important;
|
|
1961
1984
|
background-color: var(--tab-btn-active-bg) !important;
|
|
1962
1985
|
border-top: 1px solid var(--sidebar-border) !important;
|
|
1963
1986
|
border-bottom: 1px solid var(--sidebar-border) !important;
|
|
1964
|
-
border-radius: var(--tab-btn-active-radius) !important;
|
|
1965
|
-
box-shadow: var(--tab-btn-active-shadow);
|
|
1966
|
-
filter: var(--tab-btn-active-glow);
|
|
1987
|
+
border-radius: var(--tab-btn-active-radius, 0px) !important;
|
|
1988
|
+
box-shadow: var(--tab-btn-active-shadow, none);
|
|
1989
|
+
filter: var(--tab-btn-active-glow, none);
|
|
1967
1990
|
z-index: 6;
|
|
1968
1991
|
transition: color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
|
|
1969
1992
|
}
|
|
1970
1993
|
|
|
1971
1994
|
/* Position-specific active button border & margin alignments */
|
|
1972
1995
|
.rdd-sidebar-tabs-strip.rdd-left .rdd-sidebar-tab-btn.rdd-active {
|
|
1973
|
-
border-left: var(--tab-accent-bar-width) solid var(--tab-icon-active) !important;
|
|
1996
|
+
border-left: var(--tab-accent-bar-width, 3px) solid var(--tab-icon-active) !important;
|
|
1974
1997
|
border-right: none !important;
|
|
1975
1998
|
margin-right: -2px !important;
|
|
1976
1999
|
margin-left: 0 !important;
|
|
1977
2000
|
}
|
|
1978
2001
|
.rdd-sidebar-tabs-strip.rdd-right .rdd-sidebar-tab-btn.rdd-active {
|
|
1979
2002
|
border-left: none !important;
|
|
1980
|
-
border-right: var(--tab-accent-bar-width) solid var(--tab-icon-active) !important;
|
|
2003
|
+
border-right: var(--tab-accent-bar-width, 3px) solid var(--tab-icon-active) !important;
|
|
1981
2004
|
margin-left: -2px !important;
|
|
1982
2005
|
margin-right: 0 !important;
|
|
1983
2006
|
}
|
|
@@ -2489,13 +2512,13 @@ html.rdd-no-animations [class*="rdd-"]::after {
|
|
|
2489
2512
|
|
|
2490
2513
|
[dir="rtl"] .rdd-sidebar-tabs-strip.rdd-left .rdd-sidebar-tab-btn.rdd-active {
|
|
2491
2514
|
border-left: none !important;
|
|
2492
|
-
border-right: var(--tab-accent-bar-width) solid var(--tab-icon-active) !important;
|
|
2515
|
+
border-right: var(--tab-accent-bar-width, 3px) solid var(--tab-icon-active) !important;
|
|
2493
2516
|
margin-left: -2px !important;
|
|
2494
2517
|
margin-right: 0 !important;
|
|
2495
2518
|
}
|
|
2496
2519
|
[dir="rtl"] .rdd-sidebar-tabs-strip.rdd-right .rdd-sidebar-tab-btn.rdd-active {
|
|
2497
2520
|
border-right: none !important;
|
|
2498
|
-
border-left: var(--tab-accent-bar-width) solid var(--tab-icon-active) !important;
|
|
2521
|
+
border-left: var(--tab-accent-bar-width, 3px) solid var(--tab-icon-active) !important;
|
|
2499
2522
|
margin-right: -2px !important;
|
|
2500
2523
|
margin-left: 0 !important;
|
|
2501
2524
|
}
|
|
@@ -2727,6 +2750,27 @@ html.rdd-no-animations [class*="rdd-"]::after {
|
|
|
2727
2750
|
min-height: 38px;
|
|
2728
2751
|
}
|
|
2729
2752
|
|
|
2753
|
+
/* Optional close button (showCloseButton) — an extra way to collapse the sidebar besides
|
|
2754
|
+
clicking the active tab's own icon again. */
|
|
2755
|
+
.rdd-sidebar-drawer-close-button {
|
|
2756
|
+
background: transparent;
|
|
2757
|
+
border: none;
|
|
2758
|
+
color: var(--sidebar-text-muted, var(--rdd-text-secondary));
|
|
2759
|
+
cursor: pointer;
|
|
2760
|
+
padding: 4px;
|
|
2761
|
+
display: flex;
|
|
2762
|
+
align-items: center;
|
|
2763
|
+
justify-content: center;
|
|
2764
|
+
border-radius: 4px;
|
|
2765
|
+
transition: all 0.15s ease;
|
|
2766
|
+
flex-shrink: 0;
|
|
2767
|
+
}
|
|
2768
|
+
|
|
2769
|
+
.rdd-sidebar-drawer-close-button:hover {
|
|
2770
|
+
background-color: var(--sidebar-btn-hover-bg);
|
|
2771
|
+
color: var(--sidebar-text-title);
|
|
2772
|
+
}
|
|
2773
|
+
|
|
2730
2774
|
/* Sidebar drawer content body */
|
|
2731
2775
|
.rdd-sidebar-drawer-body {
|
|
2732
2776
|
flex-grow: 1;
|
|
@@ -3045,15 +3089,15 @@ html.rdd-no-animations [class*="rdd-"]::after {
|
|
|
3045
3089
|
.rdd-toolbar-btn-radio.rdd-active {
|
|
3046
3090
|
color: var(--tab-icon-active);
|
|
3047
3091
|
background-color: var(--toolbar-btn-radio-active-bg);
|
|
3048
|
-
box-shadow: var(--toolbar-btn-active-shadow);
|
|
3049
|
-
filter: var(--toolbar-btn-active-glow);
|
|
3092
|
+
box-shadow: var(--toolbar-btn-active-shadow, none);
|
|
3093
|
+
filter: var(--toolbar-btn-active-glow, none);
|
|
3050
3094
|
transition: color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
|
|
3051
3095
|
}
|
|
3052
3096
|
|
|
3053
|
-
.rdd-toolbar-strip.rdd-left .rdd-toolbar-btn-radio.rdd-active { border-left: var(--toolbar-accent-bar-width) solid var(--tab-icon-active); border-radius: 0 6px 6px 0; }
|
|
3054
|
-
.rdd-toolbar-strip.rdd-right .rdd-toolbar-btn-radio.rdd-active { border-right: var(--toolbar-accent-bar-width) solid var(--tab-icon-active); border-radius: 6px 0 0 6px; }
|
|
3055
|
-
.rdd-toolbar-strip.rdd-top .rdd-toolbar-btn-radio.rdd-active { border-bottom: var(--toolbar-accent-bar-width) solid var(--tab-icon-active); border-radius: 6px 6px 0 0; }
|
|
3056
|
-
.rdd-toolbar-strip.rdd-bottom .rdd-toolbar-btn-radio.rdd-active { border-top: var(--toolbar-accent-bar-width) solid var(--tab-icon-active); border-radius: 0 0 6px 6px; }
|
|
3097
|
+
.rdd-toolbar-strip.rdd-left .rdd-toolbar-btn-radio.rdd-active { border-left: var(--toolbar-accent-bar-width, 3px) solid var(--tab-icon-active); border-radius: 0 6px 6px 0; }
|
|
3098
|
+
.rdd-toolbar-strip.rdd-right .rdd-toolbar-btn-radio.rdd-active { border-right: var(--toolbar-accent-bar-width, 3px) solid var(--tab-icon-active); border-radius: 6px 0 0 6px; }
|
|
3099
|
+
.rdd-toolbar-strip.rdd-top .rdd-toolbar-btn-radio.rdd-active { border-bottom: var(--toolbar-accent-bar-width, 3px) solid var(--tab-icon-active); border-radius: 6px 6px 0 0; }
|
|
3100
|
+
.rdd-toolbar-strip.rdd-bottom .rdd-toolbar-btn-radio.rdd-active { border-top: var(--toolbar-accent-bar-width, 3px) solid var(--tab-icon-active); border-radius: 0 0 6px 6px; }
|
|
3057
3101
|
|
|
3058
3102
|
/* Toggle active — lighter tint, no directional border */
|
|
3059
3103
|
.rdd-toolbar-btn-toggle.rdd-active {
|
|
@@ -3083,15 +3127,15 @@ html.rdd-no-animations [class*="rdd-"]::after {
|
|
|
3083
3127
|
.rdd-toolbar-btn-group.rdd-active {
|
|
3084
3128
|
color: var(--tab-icon-active);
|
|
3085
3129
|
background-color: var(--toolbar-btn-radio-active-bg);
|
|
3086
|
-
box-shadow: var(--toolbar-btn-active-shadow);
|
|
3087
|
-
filter: var(--toolbar-btn-active-glow);
|
|
3130
|
+
box-shadow: var(--toolbar-btn-active-shadow, none);
|
|
3131
|
+
filter: var(--toolbar-btn-active-glow, none);
|
|
3088
3132
|
transition: color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
|
|
3089
3133
|
}
|
|
3090
3134
|
|
|
3091
|
-
.rdd-toolbar-strip.rdd-left .rdd-toolbar-btn-group.rdd-active { border-left: var(--toolbar-accent-bar-width) solid var(--tab-icon-active); border-radius: 0 6px 6px 0; }
|
|
3092
|
-
.rdd-toolbar-strip.rdd-right .rdd-toolbar-btn-group.rdd-active { border-right: var(--toolbar-accent-bar-width) solid var(--tab-icon-active); border-radius: 6px 0 0 6px; }
|
|
3093
|
-
.rdd-toolbar-strip.rdd-top .rdd-toolbar-btn-group.rdd-active { border-bottom: var(--toolbar-accent-bar-width) solid var(--tab-icon-active); border-radius: 6px 6px 0 0; }
|
|
3094
|
-
.rdd-toolbar-strip.rdd-bottom .rdd-toolbar-btn-group.rdd-active { border-top: var(--toolbar-accent-bar-width) solid var(--tab-icon-active); border-radius: 0 0 6px 6px; }
|
|
3135
|
+
.rdd-toolbar-strip.rdd-left .rdd-toolbar-btn-group.rdd-active { border-left: var(--toolbar-accent-bar-width, 3px) solid var(--tab-icon-active); border-radius: 0 6px 6px 0; }
|
|
3136
|
+
.rdd-toolbar-strip.rdd-right .rdd-toolbar-btn-group.rdd-active { border-right: var(--toolbar-accent-bar-width, 3px) solid var(--tab-icon-active); border-radius: 6px 0 0 6px; }
|
|
3137
|
+
.rdd-toolbar-strip.rdd-top .rdd-toolbar-btn-group.rdd-active { border-bottom: var(--toolbar-accent-bar-width, 3px) solid var(--tab-icon-active); border-radius: 6px 6px 0 0; }
|
|
3138
|
+
.rdd-toolbar-strip.rdd-bottom .rdd-toolbar-btn-group.rdd-active { border-top: var(--toolbar-accent-bar-width, 3px) solid var(--tab-icon-active); border-radius: 0 0 6px 6px; }
|
|
3095
3139
|
|
|
3096
3140
|
/* Separators */
|
|
3097
3141
|
.rdd-toolbar-strip.rdd-left .rdd-toolbar-separator,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-dockable-desktop",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.3.0",
|
|
4
4
|
"description": "A premium, state-of-the-art window manager and dockable layout engine for React. Supports fluid grid splits, tabbed groups, floating resizable windows, zero-unmount state preservation, context menus, and internationalization.",
|
|
5
5
|
"main": "dist/index.cjs",
|
|
6
6
|
"module": "dist/index.js",
|