bonsaif-ui 0.1.14 → 0.1.16

package/CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## 0.1.15 - 2026-05-05
+
+- Add `Drawer` unsaved-changes guard props so internal close actions can require discard confirmation before closing.
+- Hide the `DataTable` pagination footer automatically when the current row count fits within one page.
+
 ## 0.1.8 - 2026-05-04
 
 - Normalize all `PageHeader` action buttons to a compact square icon-button chrome while preserving each button icon, tooltip, label, and action.

package/README.md

@@ -46,6 +46,84 @@ The package includes reusable components migrated from `prime-auth` and new shar
 - `Modal`, `Drawer`, `ConfirmDialog`: overlays and confirmations.
 - `MouseTooltip`: lightweight hover tooltip.
 
+#### Drawer Unsaved Changes Guard
+
+Use `hasUnsavedChanges` when a drawer edits data and must not close silently. When the prop is `true`, the drawer intercepts its own close controls: backdrop click, Escape, the X button, and the default Cancel button. It shows a confirmation modal and only calls `onClose` after the user confirms that unsaved data can be discarded.
+
+The guard is meant for local draft forms. Keep the saved value separate from the draft value, calculate whether the draft is dirty, and pass that boolean to `hasUnsavedChanges`.
+
+```tsx
+import { useState } from "react";
+import { Drawer, Textarea } from "bonsaif-ui";
+
+export function TeamNotesDrawer() {
+  const [open, setOpen] = useState(false);
+  const [savedNote, setSavedNote] = useState("Nota guardada del equipo.");
+  const [draftNote, setDraftNote] = useState(savedNote);
+  const hasUnsavedChanges = draftNote !== savedNote;
+
+  function openDrawer() {
+    setDraftNote(savedNote);
+    setOpen(true);
+  }
+
+  function saveDrawer() {
+    setSavedNote(draftNote);
+    setOpen(false);
+  }
+
+  return (
+    <>
+      <button type="button" onClick={openDrawer}>
+        Editar nota
+      </button>
+
+      <Drawer
+        open={open}
+        onClose={() => setOpen(false)}
+        title="Editar equipo"
+        onConfirm={saveDrawer}
+        hasUnsavedChanges={hasUnsavedChanges}
+        unsavedChangesTitle="Descartar cambios"
+        unsavedChangesDescription="Hay cambios sin guardar. Si cierras el drawer se perderan."
+        unsavedChangesConfirmLabel="Descartar"
+        unsavedChangesCancelLabel="Seguir editando"
+        onDiscardChanges={() => setDraftNote(savedNote)}
+      >
+        <Textarea
+          value={draftNote}
+          onChange={(event) => setDraftNote(event.currentTarget.value)}
+          className="min-h-28 w-full"
+        />
+      </Drawer>
+    </>
+  );
+}
+```
+
+`onDiscardChanges` can be used to clear local draft state right before `onClose` runs.
+
+Useful props:
+
+- `hasUnsavedChanges`: enables the discard confirmation when `true`.
+- `unsavedChangesTitle`: confirmation title.
+- `unsavedChangesDescription`: confirmation body copy.
+- `unsavedChangesConfirmLabel`: label for the destructive discard action.
+- `unsavedChangesCancelLabel`: label for the action that keeps editing.
+- `onDiscardChanges`: optional cleanup before `onClose` runs after discard confirmation.
+
+The playground includes a live drawer example: edit the note, then try closing with the `X`, backdrop, Escape, or Cancel button to see the discard modal.
+
+How it works:
+
+1. The consuming screen owns the saved value and draft value.
+2. The screen passes `hasUnsavedChanges={true}` when the draft differs from the saved value.
+3. Drawer close requests from backdrop click, Escape, the X button, and the default Cancel button are intercepted.
+4. The discard modal opens with a fade plus scale/slide animation.
+5. Choosing `Seguir editando` closes only the modal and keeps the drawer open.
+6. Choosing the discard action calls `onDiscardChanges` first, then calls `onClose`.
+7. If `hasUnsavedChanges` is `false`, close actions call `onClose` immediately.
+
 ### Feedback And Data
 
 - `Alert`, `StatusBadge`, `EmptyState`, `LoadingState`: visible states and feedback.
@@ -116,6 +194,10 @@ import { CopyButton, CopyLinkButton } from "bonsaif-ui";
 
 `DataTable` owns its horizontal and vertical scrolling. When a table is rendered inside a constrained panel, pass `minTableWidth` so the table keeps usable column widths and exposes its own internal horizontal scrollbar.
 
+When pagination is enabled with `pageSize`, the pagination footer is hidden automatically if the row count fits in a single page. For example, a table with `pageSize={25}` and 25 or fewer rows shows no pagination controls; once it has 26 rows, the footer appears.
+
+Header controls for column reordering, resizing, and visibility are floating controls. The drag handle and column visibility menu animate in on hover/focus and do not consume label width, so narrow headers keep as much readable text as possible.
+
 ```tsx
 <DataTable
   columns={columns}
@@ -123,6 +205,43 @@ import { CopyButton, CopyLinkButton } from "bonsaif-ui";
   getRowId={(row) => row.id}
   minTableWidth={810}
 />
+
+<DataTable
+  columns={columns}
+  data={rows.slice(0, 25)}
+  getRowId={(row) => row.id}
+  pageSize={25}
+/>
+```
+
+```tsx
+// No pagination footer: all rows fit in one page.
+<DataTable
+  columns={columns}
+  data={rows.slice(0, 25)}
+  getRowId={(row) => row.id}
+  pageSize={25}
+/>
+
+// Pagination footer appears: row 26 needs another page.
+<DataTable
+  columns={columns}
+  data={rows.slice(0, 26)}
+  getRowId={(row) => row.id}
+  pageSize={25}
+/>
+
+// Server-side mode uses totalRows for the same decision.
+<DataTable
+  columns={columns}
+  data={rows}
+  getRowId={(row) => row.id}
+  page={1}
+  pageSize={25}
+  totalRows={26}
+  onPageChange={setPage}
+  onPageSizeChange={setPageSize}
+/>
 ```
 
 ## StepWizard