@ciromaciel/dashboard-kit 1.10.0 → 1.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ciromaciel/dashboard-kit",
-    "version": "1.10.0",
+    "version": "1.11.0",
     "license": "MIT",
     "type": "module",
     "description": "The components every dashboard shares: table, empty state, loading state, destructive confirm, danger zone and wordmark.",

package/src/components/DeleteModal.jsx

@@ -313,36 +313,44 @@ export function DeleteModal({
              * is also the modal's only rule: above it everything that is read
              * and typed, below it the act.
              *
-             * Destructive on the LEFT — §Formulários: "Submit à direita;
-             * destrutivo à esquerda". The submit position is reserved for what
-             * moves forward, and this does the opposite.
+             * Until 14/10/2026 the destructive button sat on the LEFT, filled,
+             * by the forms rule "destrutivo à esquerda". That rule is for a
+             * form whose main act is saving; here deleting IS the act, and the
+             * alert rule applies instead.
              */}
             <Box
                 px={{ base: 24, md: 32 }}
                 py={20}
                 style={{ borderTop: 'var(--rlg-border)' }}
             >
+                {/* Cancel on the leading side, the destructive act on the
+                    trailing one, outlined — Apple's alert rule, decided with
+                    the Ciro on 14/10/2026. The destructive button keeps its
+                    colour (it says what kind of act this is) but not the fill
+                    of a primary action: deleting is never the step the screen
+                    pushes toward. */}
                 <Group
-                    justify="space-between"
+                    justify="flex-end"
                     gap={8}
                 >
+                    <Button
+                        variant="subtle"
+                        color="gray.7"
+                        onClick={onClose}
+                        disabled={loading}
+                    >
+                        Cancelar
+                    </Button>
                     <Button
                         className="rlg-danger"
                         color="red.7"
+                        variant="outline"
                         onClick={confirm}
                         disabled={!canDelete}
                         loading={loading}
                     >
                         {confirmLabel}
                     </Button>
-                    <Button
-                        variant="subtle"
-                        color="gray.7"
-                        onClick={onClose}
-                        disabled={loading}
-                    >
-                        Cancelar
-                    </Button>
                 </Group>
             </Box>
         </Modal>

package/src/components/undoable.jsx

@@ -0,0 +1,131 @@
+import { Button, Group, Text } from '@mantine/core'
+import { notifications } from '@mantine/notifications'
+
+import { notify } from './notify'
+
+/** How long the undo stays on offer. Long enough to read one line and reach the button. */
+export const UNDO_MS = 6000
+
+let sequence = 0
+const pending = []
+
+/**
+ * Delete now, offer Desfazer, send the request only when the offer ends.
+ *
+ * Apple's rule (decided with the Ciro on 14/10/2026): for an action people
+ * perform often, undo beats confirmation. A dialog or a hold is friction paid on
+ * every delete to protect the rare mistake; undo charges nothing and still
+ * catches the mistake — after it happens, when the person can see it.
+ *
+ * Nothing is sent to the server while the offer stands. The item leaves the
+ * screen (`onHide`), the request (`onCommit`) waits `ms`, and Desfazer only puts
+ * the item back (`onRestore`). If the request fails, the item comes back too and
+ * the error stays on screen.
+ *
+ * ⌘Z / Ctrl+Z undoes the latest pending delete, outside text fields — the
+ * shortcut every Apple app gives undo.
+ *
+ * Closing the toast keeps the delete and sends it at once. Leaving the page
+ * sends every pending delete (`pagehide`).
+ *
+ * NOT for credentials or connections: revoking a key or a webhook has to take
+ * effect at once, and those keep the hold. See `10-modal-de-exclusao.md`.
+ *
+ * @param {object}   options
+ * @param {string}   options.message    What left, in a few words: "Campo excluído".
+ * @param {Function} options.onCommit   Sends the delete. May return a promise.
+ * @param {Function} [options.onHide]   Takes the item off the screen.
+ * @param {Function} [options.onRestore] Puts it back.
+ * @param {number}   [options.ms]
+ * @returns {{ undo: Function, commit: Function }}
+ */
+export function undoable({ message, onCommit, onHide, onRestore, ms = UNDO_MS }) {
+    const id = `rlg-undo-${++sequence}`
+    let isSettled = false
+
+    const settle = () => {
+        isSettled = true
+        clearTimeout(timer)
+        const index = pending.indexOf(entry)
+        if (index >= 0) pending.splice(index, 1)
+        notifications.hide(id)
+    }
+
+    const commit = async () => {
+        if (isSettled) return
+        settle()
+        try {
+            await onCommit()
+        } catch (error) {
+            onRestore?.()
+            notify.error('Não excluiu', error?.message || 'Tente de novo.')
+        }
+    }
+
+    const undo = () => {
+        if (isSettled) return
+        settle()
+        onRestore?.()
+    }
+
+    const entry = { undo, commit }
+    onHide?.()
+    pending.push(entry)
+    listen()
+    const timer = setTimeout(commit, ms)
+
+    notifications.show({
+        id,
+        color: 'gray',
+        autoClose: false,
+        onClose: commit,
+        message: (
+            <Group
+                justify="space-between"
+                wrap="nowrap"
+                gap={12}
+            >
+                <Text
+                    fz={13}
+                    c="inherit"
+                >
+                    {message}
+                </Text>
+                <Button
+                    size="compact-sm"
+                    variant="subtle"
+                    color="gray.9"
+                    onClick={undo}
+                >
+                    Desfazer
+                </Button>
+            </Group>
+        ),
+    })
+
+    return entry
+}
+
+let isListening = false
+
+function listen() {
+    if (isListening || typeof window === 'undefined') return
+    isListening = true
+
+    window.addEventListener('keydown', event => {
+        if (!(event.metaKey || event.ctrlKey) || event.shiftKey || event.key.toLowerCase() !== 'z') return
+        if (pending.length === 0 || isEditable(event.target)) return
+        event.preventDefault()
+        pending.at(-1).undo()
+    })
+
+    window.addEventListener('pagehide', () => {
+        for (const entry of [...pending]) entry.commit()
+    })
+}
+
+/** A text field keeps its own ⌘Z: it undoes typing, not a delete. */
+function isEditable(target) {
+    if (!target || typeof target.closest !== 'function') return false
+    return Boolean(target.closest('input, textarea, select, [contenteditable=""], [contenteditable="true"]'))
+}

package/src/index.js

@@ -64,6 +64,7 @@ export { DangerZone } from './components/DangerZone'
 export { ZenLabel } from './components/ZenLabel'
 export { Tag } from './components/Tag'
 export { notify } from './components/notify'
+export { undoable, UNDO_MS } from './components/undoable'
 export { NOTIFICATIONS_PROPS, NOTIFY_DESCRIPTION_CSS, notificationTheme } from './components/notify-theme'
 export { panelTheme } from './theme'
 export { Wordmark } from './components/Wordmark'