playbook_ui 16.9.0 → 16.10.0.pre.alpha.PLAY3053advancedtablebottompinnedrowsreact17469

data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownContainer.tsx

@@ -1,4 +1,5 @@
 import React, { useContext } from "react";
+import { createPortal } from "react-dom";
 import classnames from "classnames";
 import {
   buildAriaProps,
@@ -9,6 +10,7 @@ import {
 import { globalProps, GlobalProps } from "../../utilities/globalProps";
 
 import DropdownContext from "../context";
+import { setFloatingOwnerAttribute } from "../../utilities/floatingPortalHosts";
 
 import List from "../../pb_list/_list";
 import ListItem from "../../pb_list/_list_item";
@@ -42,11 +44,15 @@ const DropdownContainer = (props: DropdownContainerProps) => {
 
   const {
     dropdownContainerRef,
+    error,
     filteredOptions,
     filterItem,
+    floatingOwnerId,
+    floatingShellClasses,
     handleChange,
     inputRef,
     isDropDownClosed,
+    portalHost,
     setFocusedOptionIndex,
   } = useContext(DropdownContext);
 
@@ -61,15 +67,16 @@ const DropdownContainer = (props: DropdownContainerProps) => {
     className
   );
 
-  return (
+  const inner = (
     <div {...ariaProps} 
         {...dataProps} 
         {...htmlProps}
         className={classes} 
+        data-pb-dropdown-portal={portalHost ? "true" : undefined}
         id={id}
         onMouseEnter={() => setFocusedOptionIndex(-1)}
         ref={dropdownContainerRef}
-        style={{ position: "absolute"}}
+        style={portalHost ? undefined : { position: "absolute"}}
     >
       {searchbar && (
         <TextInput dark={dark}
@@ -106,6 +113,36 @@ const DropdownContainer = (props: DropdownContainerProps) => {
         </List>
     </div>
   );
+
+  if (portalHost) {
+    if (isDropDownClosed) {
+      return null;
+    }
+    return createPortal(
+      <div
+          className={floatingShellClasses}
+          ref={(node) => setFloatingOwnerAttribute(node, floatingOwnerId)}
+      >
+        <div
+            className={classnames("dropdown_wrapper", error && "error")}
+            style={{
+              background: "transparent",
+              border: "none",
+              boxShadow: "none",
+              margin: 0,
+              minHeight: 0,
+              padding: 0,
+              position: "static",
+            }}
+        >
+          {inner}
+        </div>
+      </div>,
+      portalHost,
+    );
+  }
+
+  return inner;
 };
 
 export default DropdownContainer;

data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx

@@ -42,6 +42,7 @@ const DropdownOption = (props: DropdownOptionProps) => {
 
   const {
     activeStyle,
+    disabled,
     filteredOptions,
     filterItem,
     focusedOptionIndex,
@@ -60,13 +61,17 @@ const DropdownOption = (props: DropdownOptionProps) => {
    ? selected.some((item) => item.label === option?.label)
    : (selected as GenericObject)?.label === option?.label;
 
+
+  const isOptionDisabled = option?.disabled === true;
+  const isDisabled = disabled || isOptionDisabled;
+
   if (!isItemMatchingFilter(option) || (multiSelect && isSelected)) {
     return null;
   }
   const isFocused =
     focusedOptionIndex >= 0 &&
     filteredOptions[focusedOptionIndex].label === option?.label;
-  const focusedClass = isFocused && "focused";
+  const focusedClass = isFocused ? "focused" : "";
 
   const selectedClass = isSelected ? "selected" : "list";
 
@@ -87,31 +92,37 @@ const DropdownOption = (props: DropdownOptionProps) => {
       selectedClass,
       focusedClass,
     ),
+    isDisabled && "disabled",
     bgTokenClass, 
     fontTokenClass,
     globalProps(props),
     className
   );
+  const optionWrapperClass = classnames(
+    "dropdown_option_wrapper",
+    isDisabled && "disabled"
+  );
 
   return (
     <div
         {...ariaProps}
         {...dataProps}
         {...htmlProps}
+        aria-disabled={isDisabled}
         className={classes}
         id={id}
         key={key}
-        onClick= {() => handleOptionClick(option)}
+        onClick={isDisabled ? undefined : () => handleOptionClick(option)}
     >
       <ListItem
-          cursor="pointer"
+          cursor={disabled ? "default" : "pointer"}
           dark={dark}
           data-name={option?.value}
           key={option?.label}
           padding="none"
       >
           {children ? 
-          <div className="dropdown_option_wrapper">{children}</div> :
+          <div className={optionWrapperClass}>{children}</div> :
               <Body dark={dark} 
                   text={option?.label} 
               />

data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownTrigger.tsx

@@ -46,6 +46,7 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
     autocomplete,
     blankSelection,
     clearable,
+    disabled,
     error,
     errorId,
     filterItem,
@@ -113,6 +114,9 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
   const triggerAriaLabel = contextLabel
     ? (children ? contextLabel : `${contextLabel}, ${defaultDisplayPlaceholder}`)
     : undefined;
+  const disabledTriggerProps = disabled
+    ? { "aria-disabled": true, tabIndex: -1 }
+    : { tabIndex: 0 };
 
   return (
     <div {...ariaProps} 
@@ -128,11 +132,11 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
                 aria-invalid={!!error}
                 aria-label={triggerAriaLabel}
                 id={selectId}
-                onClick={() => toggleDropdown()}
-                onKeyDown= {handleKeyDown}
+                onClick={() => !disabled && toggleDropdown()}
+                onKeyDown= {(e) => !disabled && handleKeyDown(e)}
                 ref={inputWrapperRef}
                 style={{ display: "inline-block" }}
-                tabIndex= {0}
+                {...disabledTriggerProps}
             >
               {children}
             </div>
@@ -142,15 +146,16 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
                   align="center"
                   borderRadius="lg"
                   className={triggerWrapperClasses}
-                  cursor={`${autocomplete ? "text" : "pointer"}`}
+                  cursor={disabled ? "default" : `${autocomplete ? "text" : "pointer"}`}
                   htmlOptions={{
                     "aria-describedby": errorId,
+                    "aria-disabled": disabled,
                     "aria-invalid": !!error,
                     "aria-label": triggerAriaLabel,
                     id: selectId,
-                    onClick: () => handleWrapperClick(),
-                    onKeyDown: handleKeyDown,
-                    tabIndex: "0",
+                    onClick: () => !disabled && handleWrapperClick(),
+                    onKeyDown: (e: React.KeyboardEvent) => !disabled && handleKeyDown(e),
+                    tabIndex: disabled ? "-1" : "0",
                     ref:inputWrapperRef
                   }}
                   justify="between"
@@ -182,12 +187,14 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
                         {autocomplete && (
                           <input
                               className="dropdown_input"
+                              disabled={disabled}
                               onChange={handleChange}
                               onClick={(e) => {
                                 e.stopPropagation();// keep the wrapper’s handler from firing
+                                if (disabled) return;
                                 toggleDropdown();
                               }}
-                              onFocus={() => setIsInputFocused(true)}
+                              onFocus={() => !disabled && setIsInputFocused(true)}
                               onKeyDown={(e) => {
                                  handleKeyDown(e);
                                  e.stopPropagation(); //Fixes issue with keyboard accessibility
@@ -213,12 +220,14 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
                     {autocomplete && !multiSelect && (
                       <input
                           className="dropdown_input"
+                          disabled={disabled}
                           onChange={handleChange}
                           onClick={(e) => {
                             e.stopPropagation();// keep the wrapper’s handler from firing
+                            if (disabled) return;
                             toggleDropdown();
                           }}
-                          onFocus={() => setIsInputFocused(true)}
+                          onFocus={() => !disabled && setIsInputFocused(true)}
                           onKeyDown={handleKeyDown}
                           placeholder={
                             joinedLabels
@@ -239,16 +248,16 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
                       dark={dark}
                       display="flex"
                       htmlOptions={{
-                        onClick: (e: Event) => {e.stopPropagation();handleWrapperClick()}
+                        onClick: (e: Event) => {e.stopPropagation(); !disabled && handleWrapperClick()}
                       }}
                       key={`${isDropDownClosed ? "chevron-down" : "chevron-up"}`}
                   >
                     {(!blankSelection || selected?.value !== optionsWithBlankSelection?.[0]?.value) && (
                       <>
                         {clearable !== false && selectedArray.length > 0 && (
-                          <div onClick={(e)=>{e.stopPropagation();handleBackspace()}}>
+                          <div onClick={(e)=>{e.stopPropagation(); !disabled && handleBackspace()}}>
                             <Icon
-                                cursor="pointer"
+                                cursor={disabled ? "default" : "pointer"}
                                 dark={dark}
                                 icon="times"
                                 paddingRight="xs"
@@ -259,7 +268,7 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
                       </>
                     )}
                     <Icon
-                        cursor="pointer"
+                        cursor={disabled ? "default" : "pointer"}
                         dark={dark}
                         icon={`${isDropDownClosed ? "chevron-down" : "chevron-up"}`}
                         size="sm"

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/_playground.json

@@ -2,7 +2,8 @@
   "template": "<FileUpload{{props}} />",
   "propTargets": {},
   "defaults": {
-    "accept": {}
+    "accept": {},
+    "dark": false
   },
   "groups": [
     {

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'

data/app/pb_kits/playbook/pb_file_upload/kit.schema.json

@@ -8,7 +8,7 @@
   ],
   "props": {
     "accept": {
-      "type": "Record<string, string[]>",
+      "type": "GenericObject",
       "platforms": [
         "react",
         "rails"
@@ -40,7 +40,7 @@
       ]
     },
     "onFilesAccepted": {
-      "type": "Callback<File, File>",
+      "type": "function",
       "platforms": [
         "react"
       ]
@@ -113,7 +113,7 @@
       "platforms": [
         "rails"
       ],
-      "type": "string"
+      "type": "GenericObject"
     }
   },
   "globalProps": true,

data/app/pb_kits/playbook/pb_filter/Filter/CurrentFilters.tsx

@@ -1,22 +1,32 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import { isEmpty, omitBy, map } from '../../utilities/object'
 
 import Body from '../../pb_body/_body'
 import Caption from '../../pb_caption/_caption'
 import Title from '../../pb_title/_title'
+import InteractiveFilter, { InteractiveFilterConfig } from './InteractiveFilter'
 
 export type FilterDescription = {
   [key: string]: string | null | boolean,
 }
 
+export type InteractiveFilters = {
+  [key: string]: InteractiveFilterConfig,
+}
+
 export type CurrentFiltersProps = {
   dark: boolean,
   filters: FilterDescription,
+  interactiveFilters?: InteractiveFilters,
 }
 
 const hiddenFilters = (value: any) => isEmpty(value) && value !== true
 
-const CurrentFilters = ({ dark, filters }: CurrentFiltersProps): React.ReactElement => {
+const CurrentFilters = ({
+  dark,
+  filters,
+  interactiveFilters = {},
+}: CurrentFiltersProps): React.ReactElement => {
   const displayableFilters = omitBy(filters, hiddenFilters)
 
   return (
@@ -35,33 +45,50 @@ const CurrentFilters = ({ dark, filters }: CurrentFiltersProps): React.ReactElem
       { !isEmpty(filters) &&
         <div className="filters">
           <div className="left_gradient" />
-            {map(displayableFilters, (value, name) => (
-              <div
-                  className="filter"
-                  key={`filter-${name}`}
-              >
-                { value === true ?
-                <Title
-                    dark={dark}
-                    size={4}
-                    tag="h4"
-                    text={`${name}`}
-                /> :
-                <div>
-                  <Caption
-                      dark={dark}
-                      text={`${name}`}
-                  />
-                  <Title
-                      dark={dark}
-                      size={4}
-                      tag="h4"
-                      text={value}
-                  />
+            {map(displayableFilters, (value, name) => {
+              const interactiveConfig = interactiveFilters[name]
+              return (
+                <div
+                    className={`filter${interactiveConfig ? ' interactive' : ''}`}
+                    key={`filter-${name}`}
+                >
+                  { interactiveConfig ?
+                    <InteractiveFilter
+                        config={interactiveConfig}
+                        dark={dark}
+                        editorValue={interactiveConfig.editorValue}
+                        name={String(name)}
+                        value={
+                          interactiveConfig.value !== undefined
+                            ? interactiveConfig.value
+                            : value === true
+                              ? ''
+                              : (value as string)
+                        }
+                    /> :
+                    value === true ?
+                    <Title
+                        dark={dark}
+                        size={4}
+                        tag="h4"
+                        text={`${name}`}
+                    /> :
+                    <div>
+                      <Caption
+                          dark={dark}
+                          text={`${name}`}
+                      />
+                      <Title
+                          dark={dark}
+                          size={4}
+                          tag="h4"
+                          text={value}
+                      />
+                    </div>
+                  }
                 </div>
-                }
-              </div>
-            ))}
+              )
+            })}
           <div className="right_gradient" />
         </div>
       }

data/app/pb_kits/playbook/pb_filter/Filter/FilterDouble.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import CurrentFilters, { FilterDescription } from './CurrentFilters'
+import CurrentFilters, { FilterDescription, InteractiveFilters } from './CurrentFilters'
 import FilterBackground, { FilterBackgroundProps } from './FilterBackground'
 import FiltersPopover from './FiltersPopover'
 import ResultsCount from './ResultsCount'
@@ -17,6 +17,7 @@ import SectionSeparator from '../../pb_section_separator/_section_separator'
 export type FilterDoubleProps = {
   children?: React.ReactChild[] | React.ReactChild,
   filters?: FilterDescription,
+  interactiveFilters?: InteractiveFilters,
   onSortChange?: SortingChangeCallback,
   results?: number,
   sortOptions?: SortOptions,
@@ -28,6 +29,7 @@ const FilterDouble = ({
   sortOptions,
   sortValue,
   filters,
+  interactiveFilters,
   results,
   children,
   dark,
@@ -57,6 +59,7 @@ const FilterDouble = ({
       <CurrentFilters
           dark={dark}
           filters={filters}
+          interactiveFilters={interactiveFilters}
       />
     </Flex>
     <SectionSeparator dark={dark} />

data/app/pb_kits/playbook/pb_filter/Filter/FilterSingle.tsx

@@ -3,7 +3,7 @@ import { isEmpty } from '../../utilities/object'
 
 import Flex from '../../pb_flex/_flex'
 
-import CurrentFilters, { FilterDescription } from './CurrentFilters'
+import CurrentFilters, { FilterDescription, InteractiveFilters } from './CurrentFilters'
 import FilterBackground, { FilterBackgroundProps } from './FilterBackground'
 import FiltersPopover from './FiltersPopover'
 import ResultsCount from './ResultsCount'
@@ -16,6 +16,7 @@ import SortMenu, {
 export type FilterSingleProps = {
   children?: React.ReactChild[] | React.ReactChild,
   filters?: FilterDescription,
+  interactiveFilters?: InteractiveFilters,
   onSortChange?: SortingChangeCallback,
   results?: number,
   sortOptions?: SortOptions,
@@ -27,6 +28,7 @@ const FilterSingle = ({
   sortOptions,
   sortValue,
   filters,
+  interactiveFilters,
   results,
   children,
   dark,
@@ -60,6 +62,7 @@ const FilterSingle = ({
             <CurrentFilters
                 dark={dark}
                 filters={filters}
+                interactiveFilters={interactiveFilters}
             />
           </>
         }