playbook_ui_docs 14.12.0.pre.alpha.PBNTR456fixedconftoastrailsautoclose5728 → 14.12.0.pre.alpha.PBNTR456fixedconftoastrailsautoclose5754

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3af0ff71182babeb005dc738eaffeca12951d2663aaa3f5cc8c875c4c401b09a
-  data.tar.gz: 30f6df3ec10a18ed615b8a31aeb6b5f2407a67daa3239ab8f10e2ac30a848dae
+  metadata.gz: 78ad68a3a8cb94bf9de6d6caefa6d3918a6d6c469471e4dc32c88802a109feca
+  data.tar.gz: 65febeef99376d292a64ae2f677c65bbca8c9814a939d0d4d1c549347f6ec2dc
 SHA512:
-  metadata.gz: 8b4391f49afba440279c0351303438ce9837a8615d09bcfeb08777af702375e03b5ffdaff68fd8f6f2f358d3ca0fe3f1e4ad4f6b7fb35eebd2e449433e7ce006
-  data.tar.gz: 55f848fb3a82c882edaae29cb775d2a5da2b5be5692c9bf179b8e7937c4cc1819a1df8cc4b594e1f6f45a7dc293370663d9268390d52e0669cf0c24c2b9a1830
+  metadata.gz: ace02b69d3058994e0bf8b61569192e963feaf17b0b489b0285864ccb42f2b8580498c1a2d68654555de5e98d096d27e46fc4fc0e53e57bf8c5a26999947c484
+  data.tar.gz: cf1b1991c3ababd471f2bcc3404cd92b215d967ca0a473d2cac65e5b48646f3391b3b401479a6d03efa9215af844bd5c341ae9109f324409c66ab029487f163b

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_auto_close.html.erb

@@ -3,6 +3,7 @@
 
 <%= pb_rails("fixed_confirmation_toast", props: {
   auto_close: 3000,
+  classname: "toast-to-hide",
   id: "toast-auto-close",
   text: "I will disappear in 3 seconds.",
   status: "tip",
@@ -21,54 +22,37 @@
 }) %>
 
 <script>
-  document.addEventListener('DOMContentLoaded', () => {
-    const toasts = {
-      '#toast-auto-close': document.querySelector("#toast-auto-close"),
-      '#toast-auto-close-closeable': document.querySelector("#toast-auto-close-closeable")
+document.addEventListener('DOMContentLoaded', () => {
+  // Initialize toast elements and buttons
+  const toasts = {
+    '#toast-auto-close': document.querySelector("#toast-auto-close"),
+    '#toast-auto-close-closeable': document.querySelector("#toast-auto-close-closeable")
+  }
+  
+  const buttons = {
+    '#toast-auto-close': document.querySelector("button[data-toast='#toast-auto-close']"),
+    '#toast-auto-close-closeable': document.querySelector("button[data-toast='#toast-auto-close-closeable']")
+  }
+
+  // Store original toasts and remove them from DOM
+  const originalToasts = {}
+  Object.entries(toasts).forEach(([id, toast]) => {
+    if (toast) {
+      originalToasts[id] = toast.cloneNode(true)
+      toast.remove()
     }
-    
-    const buttons = {
-      '#toast-auto-close': document.querySelector("button[data-toast='#toast-auto-close']"),
-      '#toast-auto-close-closeable': document.querySelector("button[data-toast='#toast-auto-close-closeable']")
-    }
-
-    const hideAllToastsUponPageLoad = () => {
-      Object.values(toasts).forEach(toast => {
-        if (toast) toast.style.display = "none"
-      })
-    }
-
-    const showAndAutoCloseToast = (toastId) => {
-      hideAllToastsUponPageLoad()
-      const toast = toasts[toastId]
-
-      if (toast) {
-        toast.style.display = "flex"  // Show the selected toast
-
-        const autoCloseClass = Array.from(toast.classList).find(cls => cls.startsWith('auto_close_'))
-        if (autoCloseClass) {
-          const duration = parseInt(autoCloseClass.split('_')[2]) || 0;  // Use 0 as fallback if parsing fails
-
-          if (toast.autoCloseTimeout) {
-            clearTimeout(toast.autoCloseTimeout)
-          }
+  })
 
-          toast.autoCloseTimeout = setTimeout(() => {
-            toast.style.display = "none"
-          }, duration)
-        }
+  // Set up button click handlers
+  Object.keys(buttons).forEach((toastId) => {
+    const button = buttons[toastId]
+    if (button) {
+      button.onclick = () => {
+        const newToast = originalToasts[toastId].cloneNode(true)
+        newToast.style.display = "flex"
+        document.body.appendChild(newToast)
       }
     }
-
-    Object.keys(buttons).forEach((key) => {
-      const button = buttons[key]
-      if (button) {
-        button.onclick = () => {
-          showAndAutoCloseToast(key)
-        }
-      }
-    })
-
-    hideAllToastsUponPageLoad()
   })
-</script>
+})
+</script>

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_auto_close_rails.md

@@ -1,3 +1,3 @@
-Auto close is used when you want the confirmation toast to close automatically after a certain time. `auto_close` property will be a delay number in ms.
+Auto close is used when you want the confirmation toast to close automatically after a certain time. `auto_close` property will be a delay number in ms. The `auto_close` property currently only works in rails when it is a closeable one (`closeable: true`).
 
-Script tag in code snippet is for demonstration purposes only. It provides the functionality needed to show and hide the toaster in response to user interaction, and hides them from appearing upon initial page load. In a typical production environment this functionality would be handled by a controller or a separate javascript file.
+The script tag in this code snippet is for demonstration purposes only. It clones the toast in order to have it appear with a button click prompt and not upon initial page load. In a typical production environment the event triggering a fixed confirmation toast to appear would be handled by a controller or a separate javascript file.

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui_docs
 version: !ruby/object:Gem::Version
-  version: 14.12.0.pre.alpha.PBNTR456fixedconftoastrailsautoclose5728
+  version: 14.12.0.pre.alpha.PBNTR456fixedconftoastrailsautoclose5754
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-01-29 00:00:00.000000000 Z
+date: 2025-01-30 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: playbook_ui