playbook_ui 16.10.0.pre.alpha.typeaheaddraggablepills17453 → 16.10.0.pre.alpha.typeaheaddraggablepills17538

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 9813a5d3b8f49d64419ccf58e1670ebe721d5ec9a9bee688c735df8c8cd2ef29
-  data.tar.gz: 303a9e54e1c32eedba41305da7eb18be2ec2320397497c1fac2de8ec5e610ed9
+  metadata.gz: bca235e7dee62e26ea422c46150b0c5cb156eeddf2020efa6d4e6e00c81a3467
+  data.tar.gz: 9e4bc1641b834261e19e6190eb285bc90ce1552add02b46692275639955f900e
 SHA512:
-  metadata.gz: 48c13c5b2881a1112171426c4a21cb061d8994c9443bbfd61b6f3ebcf4284282da7e85044627a039566d2f1c97e49e5935f951e6b221006bb217fde1f9b9b910
-  data.tar.gz: 5f60cc90744120fab8cea5e570e683e45ecbb43bf262d0d2367250a0ccfc055eb0cb9d35d55a084ab419e6758007ef7d0b3fb4cea094b1752fc01dd321608646
+  metadata.gz: 71a8eb45f4aa9472fadaba3c0bbb606e8aef5c394499015c8a03b0b551b89fd9a96bf3e05c8af969e3ad3d9339c9273f549d791113a16faab9171f2921d329e3
+  data.tar.gz: a554ab79224396230c9703bc581ba133bc5c03f3899238114e98ae14500bae9eaeeca311897e0cc40f5933d76e8a38f62221e433fb19d553ffd7b46291594836

data/app/pb_kits/playbook/pb_draggable/utilities/touchDrag.ts

@@ -157,6 +157,8 @@ const runDragPointerMove = (
   dragId: string,
   container: string | undefined,
   handlers: TouchDragHandlers,
+  // Typeahead pointer-drag only. Regular Draggable/touch keeps simple elementFromPoint.
+  useEnhancedHorizontalTargeting = false,
 ) => {
   if (!state.dragging) {
     const deltaX = clientX - state.startX;
@@ -168,11 +170,27 @@ const runDragPointerMove = (
     handlers.onDragStart(dragId, container);
   }
 
-  const { targetDragId, targetContainer } = resolvePointerDragTarget(clientX, clientY, dragId);
+  let targetDragId: string | null;
+  let targetContainer: string | undefined;
+
+  if (useEnhancedHorizontalTargeting) {
+    ({ targetDragId, targetContainer } = resolvePointerDragTarget(clientX, clientY, dragId));
+  } else {
+    const elementBelow = typeof document.elementFromPoint === 'function'
+      ? document.elementFromPoint(clientX, clientY)
+      : null;
+    targetDragId = getDragIdFromElement(elementBelow);
+    targetContainer = getContainerFromElement(elementBelow);
+  }
 
-  if (!targetDragId || targetDragId === dragId) {
-    state.lastTargetDragId = null;
-  } else if (targetDragId !== state.lastTargetDragId) {
+  if (useEnhancedHorizontalTargeting) {
+    if (!targetDragId || targetDragId === dragId) {
+      state.lastTargetDragId = null;
+    } else if (targetDragId !== state.lastTargetDragId) {
+      state.lastTargetDragId = targetDragId;
+      handlers.onDragEnter(targetDragId, targetContainer ?? container);
+    }
+  } else if (targetDragId && targetDragId !== dragId && targetDragId !== state.lastTargetDragId) {
     state.lastTargetDragId = targetDragId;
     handlers.onDragEnter(targetDragId, targetContainer ?? container);
   }
@@ -337,7 +355,7 @@ export const bindMousePointerDrag = ({
   const handleMouseMove = (event: MouseEvent) => {
     if (!state.active) return;
 
-    if (runDragPointerMove(state, event.clientX, event.clientY, dragId, container, handlers)) {
+    if (runDragPointerMove(state, event.clientX, event.clientY, dragId, container, handlers, true)) {
       event.preventDefault();
     }
   };

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'