react-dockable-desktop 5.2.1 → 5.3.0

package/dist/index.d.cts

@@ -1501,10 +1501,13 @@ interface SidebarTab {
     renderContent: (tabId: string, onClose: () => void, onOpen: () => void) => React$1.ReactNode;
 }
 /**
- * Simple case for `SidebarProps.headerAction`: the library renders a default-styled icon
- * button (visually consistent with the regular tab buttons) and forwards the click.
+ * Simple case for `SidebarProps.headerAction`/`footerAction`: the library renders a
+ * default-styled icon button (visually consistent with the regular tab buttons) and forwards
+ * the click.
  */
 interface SidebarHeaderActionButton {
+    /** Only needed when used inside a `SidebarRailEntry[]` array, for the React key. */
+    id?: string;
     icon: React$1.ReactNode;
     /** Tooltip and aria-label — same convention as `SidebarTab.label`. */
     label: string;
@@ -1512,12 +1515,14 @@ interface SidebarHeaderActionButton {
     disabled?: boolean;
 }
 /**
- * Full-control case for `SidebarProps.headerAction`: the consumer supplies their own markup
- * (a Material UI `IconButton`, a Bootstrap `Button`, a Tailwind-styled `<button>`, or anything
- * else) wholesale. The library renders exactly what this returns, unwrapped, so the consumer's
- * own hover/active/focus/ripple behavior and click handling are untouched.
+ * Full-control case for `SidebarProps.headerAction`/`footerAction`: the consumer supplies their
+ * own markup (a Material UI `IconButton`, a Bootstrap `Button`, a Tailwind-styled `<button>`, or
+ * anything else) wholesale. The library renders exactly what this returns, unwrapped, so the
+ * consumer's own hover/active/focus/ripple behavior and click handling are untouched.
  */
 interface SidebarHeaderActionCustom {
+    /** Only needed when used inside a `SidebarRailEntry[]` array, for the React key. */
+    id?: string;
     render: () => React$1.ReactNode;
 }
 /**
@@ -1527,17 +1532,34 @@ interface SidebarHeaderActionCustom {
  * is entirely up to the consumer.
  */
 type SidebarHeaderAction = SidebarHeaderActionButton | SidebarHeaderActionCustom;
+/**
+ * A single entry inside `SidebarProps.headerAction`/`footerAction` when used as an array: either
+ * a non-toggling action button/custom render (see `SidebarHeaderAction`), or a real `SidebarTab`
+ * that behaves exactly like a main-list tab — it mounts, activates, and closes through the same
+ * lifecycle, so e.g. a "Settings" entry pinned to the footer can expand like any other tab.
+ */
+type SidebarRailEntry = SidebarTab | SidebarHeaderActionButton | SidebarHeaderActionCustom;
 interface SidebarProps {
     /** Which side the activity bar and drawer appear on. Default: 'right' */
     position?: 'left' | 'right';
     tabs: SidebarTab[];
     /**
-     * A single non-toggling action button (e.g. a hamburger menu) shown above the tabs, in its
-     * own `.rdd-sidebar-header-area` — independent of the tabs' own inter-item gap. Override
+     * One or more non-toggling action buttons and/or real tabs shown above the tabs, in their
+     * own `.rdd-sidebar-header-area` — independent of the tabs' own inter-item gap. Pass a single
+     * `{ icon, label, onClick }`/`{ render }` object (the common case), or an array mixing action
+     * buttons, custom renders, and `SidebarTab` entries — a tab entry here behaves exactly like a
+     * main-list tab (mounts, activates, closes through the same lifecycle). Override
      * `--rdd-sidebar-header-area-padding-top`/`--rdd-sidebar-header-area-padding-bottom`
      * (both default `8px`) to control its spacing/effective height.
      */
-    headerAction?: SidebarHeaderAction;
+    headerAction?: SidebarRailEntry | SidebarRailEntry[];
+    /**
+     * Mirror of `headerAction`, pinned to the bottom of the tab strip via its own
+     * `.rdd-sidebar-footer-area` — e.g. a "Settings" tab that should always sit at the bottom
+     * regardless of tab count. Override `--rdd-sidebar-footer-area-padding-top`/
+     * `--rdd-sidebar-footer-area-padding-bottom` (both default `8px`) to control its spacing.
+     */
+    footerAction?: SidebarRailEntry | SidebarRailEntry[];
     /** Initial drawer width in pixels. Default: 280 */
     defaultWidth?: number;
     /** Minimum drawer width in pixels during drag-resize. Default: 150 */
@@ -1558,6 +1580,11 @@ interface SidebarProps {
     stripVisible?: boolean;
     /** Called when showStrip/hideStrip is invoked on the imperative handle. */
     onStripVisibilityChange?: (visible: boolean) => void;
+    /**
+     * Show an "X" close button in the expanded drawer's header, as an additional way to collapse
+     * the sidebar (equivalent to clicking the active tab's own icon again). Opt-in. Default: false
+     */
+    showCloseButton?: boolean;
     /** Main workspace content rendered alongside the sidebar. */
     children?: React$1.ReactNode;
 }

package/dist/index.d.ts

@@ -1501,10 +1501,13 @@ interface SidebarTab {
     renderContent: (tabId: string, onClose: () => void, onOpen: () => void) => React$1.ReactNode;
 }
 /**
- * Simple case for `SidebarProps.headerAction`: the library renders a default-styled icon
- * button (visually consistent with the regular tab buttons) and forwards the click.
+ * Simple case for `SidebarProps.headerAction`/`footerAction`: the library renders a
+ * default-styled icon button (visually consistent with the regular tab buttons) and forwards
+ * the click.
  */
 interface SidebarHeaderActionButton {
+    /** Only needed when used inside a `SidebarRailEntry[]` array, for the React key. */
+    id?: string;
     icon: React$1.ReactNode;
     /** Tooltip and aria-label — same convention as `SidebarTab.label`. */
     label: string;
@@ -1512,12 +1515,14 @@ interface SidebarHeaderActionButton {
     disabled?: boolean;
 }
 /**
- * Full-control case for `SidebarProps.headerAction`: the consumer supplies their own markup
- * (a Material UI `IconButton`, a Bootstrap `Button`, a Tailwind-styled `<button>`, or anything
- * else) wholesale. The library renders exactly what this returns, unwrapped, so the consumer's
- * own hover/active/focus/ripple behavior and click handling are untouched.
+ * Full-control case for `SidebarProps.headerAction`/`footerAction`: the consumer supplies their
+ * own markup (a Material UI `IconButton`, a Bootstrap `Button`, a Tailwind-styled `<button>`, or
+ * anything else) wholesale. The library renders exactly what this returns, unwrapped, so the
+ * consumer's own hover/active/focus/ripple behavior and click handling are untouched.
  */
 interface SidebarHeaderActionCustom {
+    /** Only needed when used inside a `SidebarRailEntry[]` array, for the React key. */
+    id?: string;
     render: () => React$1.ReactNode;
 }
 /**
@@ -1527,17 +1532,34 @@ interface SidebarHeaderActionCustom {
  * is entirely up to the consumer.
  */
 type SidebarHeaderAction = SidebarHeaderActionButton | SidebarHeaderActionCustom;
+/**
+ * A single entry inside `SidebarProps.headerAction`/`footerAction` when used as an array: either
+ * a non-toggling action button/custom render (see `SidebarHeaderAction`), or a real `SidebarTab`
+ * that behaves exactly like a main-list tab — it mounts, activates, and closes through the same
+ * lifecycle, so e.g. a "Settings" entry pinned to the footer can expand like any other tab.
+ */
+type SidebarRailEntry = SidebarTab | SidebarHeaderActionButton | SidebarHeaderActionCustom;
 interface SidebarProps {
     /** Which side the activity bar and drawer appear on. Default: 'right' */
     position?: 'left' | 'right';
     tabs: SidebarTab[];
     /**
-     * A single non-toggling action button (e.g. a hamburger menu) shown above the tabs, in its
-     * own `.rdd-sidebar-header-area` — independent of the tabs' own inter-item gap. Override
+     * One or more non-toggling action buttons and/or real tabs shown above the tabs, in their
+     * own `.rdd-sidebar-header-area` — independent of the tabs' own inter-item gap. Pass a single
+     * `{ icon, label, onClick }`/`{ render }` object (the common case), or an array mixing action
+     * buttons, custom renders, and `SidebarTab` entries — a tab entry here behaves exactly like a
+     * main-list tab (mounts, activates, closes through the same lifecycle). Override
      * `--rdd-sidebar-header-area-padding-top`/`--rdd-sidebar-header-area-padding-bottom`
      * (both default `8px`) to control its spacing/effective height.
      */
-    headerAction?: SidebarHeaderAction;
+    headerAction?: SidebarRailEntry | SidebarRailEntry[];
+    /**
+     * Mirror of `headerAction`, pinned to the bottom of the tab strip via its own
+     * `.rdd-sidebar-footer-area` — e.g. a "Settings" tab that should always sit at the bottom
+     * regardless of tab count. Override `--rdd-sidebar-footer-area-padding-top`/
+     * `--rdd-sidebar-footer-area-padding-bottom` (both default `8px`) to control its spacing.
+     */
+    footerAction?: SidebarRailEntry | SidebarRailEntry[];
     /** Initial drawer width in pixels. Default: 280 */
     defaultWidth?: number;
     /** Minimum drawer width in pixels during drag-resize. Default: 150 */
@@ -1558,6 +1580,11 @@ interface SidebarProps {
     stripVisible?: boolean;
     /** Called when showStrip/hideStrip is invoked on the imperative handle. */
     onStripVisibilityChange?: (visible: boolean) => void;
+    /**
+     * Show an "X" close button in the expanded drawer's header, as an additional way to collapse
+     * the sidebar (equivalent to clicking the active tab's own icon again). Opt-in. Default: false
+     */
+    showCloseButton?: boolean;
     /** Main workspace content rendered alongside the sidebar. */
     children?: React$1.ReactNode;
 }