playbook_ui_docs 16.10.0.pre.alpha.typeaheaddraggablepills17453 → 16.10.0.pre.alpha.typeaheaddraggablepills17538

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: bcd2df77ad2ade21904f5a4d6e502213b8651180b556cac9f54b20da328db651
-  data.tar.gz: 4ab0319cb9cae9e28a5781e657521cf51b2b39922c8fd0217f07e5f06356677a
+  metadata.gz: ec021cfb22a91d4ba0c2d4cd44d28053c7f81c84f796d04b9bfda6b9b8f1f517
+  data.tar.gz: fe729b6b4bc95f977763306fbed56b7799dedc069b4d8629e7c3aaf67e7dbaf2
 SHA512:
-  metadata.gz: 3d687856944c4239ef22a934c182f7cfb2c425b2f0ed341d300a42f339b42cc186896e40ec94f32048adf41728295d3ebbd81e0e8f1d78e4a81e0504167d4b2c
-  data.tar.gz: 8f5dd2e1127fb5870419d93457ac187cad555a5a88a5ab822952bf27fb21a83e3b73d6a7504fd057a94e258765b982e47bde3b0aa263b12b6fd90bccbb7a4f3e
+  metadata.gz: 2cb5b03fdc6787af2c8e828d56ad435986a35437a935d3bb9c47f2ca3ff777569e382fa77e5a674a8a80e6408d8d5c3efd01935936fab644cbd7d80d4a96793b
+  data.tar.gz: 6e1c4566ad54fb845bdbf4d958c16b839e6509165975548f7256fcbadff9911e7bd387ac4ef9f774faab07d31b61d8efc7c47d3bfdd4d981717a5008d666061b

data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_remove_replace.html.erb

@@ -0,0 +1,66 @@
+<div id="file-upload-remove-replace">
+  <%= pb_rails("list", props: { id: "selected-files-list", margin_bottom: "sm" }) %>
+
+  <%= pb_rails("file_upload", props: {
+    id: "remove_replace",
+    input_options: { multiple: true },
+  }) %>
+</div>
+
+<template id="file-list-item-template">
+  <%= pb_rails("list/item") do %>
+    <%= pb_rails("flex", props: { align: "center", justify: "between", width: "100%" }) do %>
+      <%= pb_rails("body", props: { data: { file_name: true } }) %>
+      <%= pb_rails("circle_icon_button", props: {
+        icon: "times",
+        variant: "secondary",
+        input_options: { classname: "remove-file-button" },
+      }) %>
+    <% end %>
+  <% end %>
+</template>
+
+<%= javascript_tag defer: "defer" do %>
+  document.addEventListener("DOMContentLoaded", function () {
+    const fileInput = document.getElementById("upload-remove_replace")
+    const list = document.getElementById("selected-files-list")
+    const template = document.getElementById("file-list-item-template")
+    let files = []
+
+    if (!fileInput || !list || !template) return
+
+    function syncInput() {
+      const dataTransfer = new DataTransfer()
+      files.forEach((file) => dataTransfer.items.add(file))
+      fileInput.files = dataTransfer.files
+    }
+
+    function render() {
+      list.innerHTML = ""
+
+      files.forEach((file, index) => {
+        const clone = template.content.cloneNode(true)
+        const nameElement = clone.querySelector("[data-file-name]")
+        const removeButton = clone.querySelector(".remove-file-button")
+
+        nameElement.textContent = file.name
+        removeButton.addEventListener("click", function (event) {
+          event.preventDefault()
+          event.stopPropagation()
+          files = files.filter((_, fileIndex) => fileIndex !== index)
+          syncInput()
+          render()
+        })
+
+        list.appendChild(clone)
+      })
+    }
+
+    fileInput.addEventListener("change", function () {
+      const newFiles = Array.from(fileInput.files)
+      files = [...files, ...newFiles]
+      syncInput()
+      render()
+    })
+  })
+<% end %>

data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_remove_replace.jsx

@@ -0,0 +1,53 @@
+
+import React, { useState } from 'react'
+
+import Body from '../../pb_body/_body'
+import CircleIconButton from '../../pb_circle_icon_button/_circle_icon_button'
+import FileUpload from '../../pb_file_upload/_file_upload'
+import Flex from '../../pb_flex/_flex'
+import List from '../../pb_list/_list'
+import ListItem from '../../pb_list/_list_item'
+
+const FileUploadRemoveReplace = (props) => {
+  const [filesToUpload, setFilesToUpload] = useState([])
+
+  const handleOnFilesAccepted = (files) => {
+    setFilesToUpload([...filesToUpload, ...files])
+  }
+
+  const handleRemoveFile = (index) => {
+    setFilesToUpload(filesToUpload.filter((_, fileIndex) => fileIndex !== index))
+  }
+
+  return (
+    <div>
+      {filesToUpload.length > 0 && (
+        <List marginBottom="sm">
+          {filesToUpload.map((file, index) => (
+            <ListItem key={`${file.name}-${index}`}>
+              <Flex
+                  align="center"
+                  justify="between"
+                  width="100%"
+              >
+                <Body text={file.name} />
+                <CircleIconButton
+                    aria={{ label: `Remove ${file.name}` }}
+                    icon="times"
+                    onClick={() => handleRemoveFile(index)}
+                    variant="secondary"
+                />
+              </Flex>
+            </ListItem>
+          ))}
+        </List>
+      )}
+      <FileUpload
+          onFilesAccepted={handleOnFilesAccepted}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default FileUploadRemoveReplace

data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_remove_replace.md

@@ -0,0 +1,5 @@
+The File Upload kit does not include built-in remove or replace behavior. Manage selected files in application state and compose the kit with other Playbook components.
+
+**Remove** — Track accepted files in state and filter out the file to remove. In React, pair `List` with `CircleIconButton`. In Rails, listen for `change` on the file input, keep files in a JavaScript array, and use `DataTransfer` to sync the input when a file is removed.
+
+**Replace** — Selecting a new file on the native Rails input replaces the current selection. For single-file React workflows, set state to the newly accepted files instead of appending: `setFilesToUpload(files)`.

data/app/pb_kits/playbook/pb_file_upload/docs/example.yml

@@ -4,6 +4,7 @@ examples:
   - file_upload_default: File Upload
   - file_upload_custom: Custom
   - file_upload_error: Error
+  - file_upload_remove_replace: Remove and Replace
 
   react:
   - file_upload_default: Default List of files to upload
@@ -11,4 +12,5 @@ examples:
   - file_upload_custom_message: Add a custom message
   - file_upload_custom_description: Add your one accepted files description
   - file_upload_max_size: Set a file size limit
-  - file_upload_error: Error
+  - file_upload_error: Error
+  - file_upload_remove_replace: Remove and Replace

data/app/pb_kits/playbook/pb_file_upload/docs/index.js

@@ -4,3 +4,4 @@ export { default as FileUploadCustomMessage } from './_file_upload_custom_messag
 export { default as FileUploadCustomDescription } from './_file_upload_custom_description.jsx'
 export { default as FileUploadMaxSize } from './_file_upload_max_size.jsx'
 export { default as FileUploadError } from './_file_upload_error.jsx'
+export { default as FileUploadRemoveReplace } from './_file_upload_remove_replace.jsx'

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui_docs
 version: !ruby/object:Gem::Version
-  version: 16.10.0.pre.alpha.typeaheaddraggablepills17453
+  version: 16.10.0.pre.alpha.typeaheaddraggablepills17538
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2026-07-06 00:00:00.000000000 Z
+date: 2026-07-08 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: playbook_ui
@@ -1092,6 +1092,9 @@ files:
 - app/pb_kits/playbook/pb_file_upload/docs/_file_upload_error.html.erb
 - app/pb_kits/playbook/pb_file_upload/docs/_file_upload_error.jsx
 - app/pb_kits/playbook/pb_file_upload/docs/_file_upload_max_size.jsx
+- app/pb_kits/playbook/pb_file_upload/docs/_file_upload_remove_replace.html.erb
+- app/pb_kits/playbook/pb_file_upload/docs/_file_upload_remove_replace.jsx
+- app/pb_kits/playbook/pb_file_upload/docs/_file_upload_remove_replace.md
 - app/pb_kits/playbook/pb_file_upload/docs/_playground.json
 - app/pb_kits/playbook/pb_file_upload/docs/_playground.overrides.json
 - app/pb_kits/playbook/pb_file_upload/docs/example.yml