playbook_ui 14.13.0.pre.alpha.rails8compatible6232 → 14.13.0.pre.rc.0

data/app/pb_kits/playbook/pb_checkbox/checkbox.test.js

@@ -106,19 +106,3 @@ test('has disabled attribute', () => {
   const input = kit.querySelector('input')
   expect(input).toHaveAttribute('disabled')
 }) 
-
-test('has ref in the input element', () => {
-  const ref = React.createRef()
-    render(
-      <Checkbox
-          data={{ testid: testId }}
-          name="checkbox-name"
-          ref={ref}
-          text="Checkbox"
-          value="check-box value"
-      />
-  )
-
-  expect(ref.current).not.toBeNull()
-  expect(ref.current?.tagName).toBe('INPUT')
-})

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

@@ -11,7 +11,6 @@ examples:
   react:
   - checkbox_default: Default
   - checkbox_checked: Load as checked
-  - checkbox_react_hook: React Hook Form
   - checkbox_custom: Custom Checkbox
   - checkbox_error: Default w/ Error
   - checkbox_indeterminate: Indeterminate Checkbox
@@ -22,4 +21,4 @@ examples:
     - checkbox_error_swift: Default w/ Error
     - checkbox_indeterminate_swift: Indeterminate Checkbox
     - checkbox_props_swift: ""
-    
+    

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

@@ -1,6 +1,5 @@
 export { default as CheckboxDefault } from './_checkbox_default.jsx'
 export { default as CheckboxCustom } from './_checkbox_custom.jsx'
-export { default as CheckboxReactHook } from './_checkbox_react_hook.jsx'
 export { default as CheckboxError } from './_checkbox_error.jsx'
 export { default as CheckboxChecked } from './_checkbox_checked.jsx'
 export { default as CheckboxIndeterminate } from './_checkbox_indeterminate.jsx'

data/app/pb_kits/playbook/pb_date/_date.tsx

@@ -14,7 +14,6 @@ type PbDateProps = {
   alignment?: "left" | "center" | "right";
   aria?: { [key: string]: string };
   className?: string;
-  dark?: boolean;
   data?: { [key: string]: string };
   htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
   id?: string;
@@ -30,7 +29,6 @@ const PbDate = (props: PbDateProps): React.ReactElement => {
     aria = {},
     alignment = "left",
     className,
-    dark = false,
     data = {},
     htmlOptions = {},
     id,
@@ -58,7 +56,7 @@ const PbDate = (props: PbDateProps): React.ReactElement => {
   );
 
   return (
-    <div
+    <div 
         {...ariaProps}
         {...dataProps}
         {...htmlProps}
@@ -95,9 +93,7 @@ const PbDate = (props: PbDateProps): React.ReactElement => {
           </>
         : size == "md" || size == "lg"
           ? (
-            <Title
-                dark={dark}
-                size={4}
+            <Title size={4}
                 tag="h4"
             >
               {showIcon && (
@@ -131,7 +127,6 @@ const PbDate = (props: PbDateProps): React.ReactElement => {
               <>
                 {showIcon && (
                   <Caption className="pb_icon_kit_container"
-                      dark={dark}
                       tag="span"
                   >
                     <Icon fixedWidth
@@ -143,20 +138,15 @@ const PbDate = (props: PbDateProps): React.ReactElement => {
 
                 {showDayOfWeek && (
                   <>
-                    <Caption dark={dark}
-                        tag="div">
-                        {weekday}
-                    </Caption>
+                    <Caption tag="div">{weekday}</Caption>
                     <Caption color="light"
-                        dark={dark}
                         tag="div"
                         text=" • "
                     />
                   </>
                 )}
 
-                <Caption dark={dark}
-                    tag="span">
+                <Caption tag="span">
                   {month} {day}
                   {currentYear != year && <>{`, ${year}`}</>}
                 </Caption>

data/app/pb_kits/playbook/pb_date/docs/_date_default.jsx

@@ -18,7 +18,7 @@ const DateDefault = (props) => {
             value={"2012-08-03"}
             {...props}
         />
-        <Caption {...props}>{"(Hyphenated Date)"}</Caption>
+        <Caption>{"(Hyphenated Date)"}</Caption>
       </div>
 
       <br />
@@ -56,7 +56,6 @@ const DateDefault = (props) => {
         <Title
             size={4}
             text={"(Hyphenated Date)"}
-            {...props}
         />
       </div>
 

data/app/pb_kits/playbook/pb_date/docs/_date_unstyled.jsx

@@ -4,8 +4,7 @@ import { Caption, Date as FormattedDate, Title } from 'playbook-ui'
 const DateUnstyled = (props) => {
   return (
     <>
-      <Caption {...props}
-          size="xs"
+      <Caption size="xs"
           text="Basic unstyled example"
       />
       <FormattedDate
@@ -16,14 +15,10 @@ const DateUnstyled = (props) => {
 
       <br />
 
-      <Caption {...props}
-
-          size="xs"
+      <Caption size="xs"
           text="Example with wrapping typography kit"
       />
-      <Title {...props}
-          size={1}
-      >
+      <Title size={1}>
         <FormattedDate
             unstyled
             value={new Date('25 Dec 1995')}
@@ -33,13 +28,10 @@ const DateUnstyled = (props) => {
 
       <br />
 
-      <Caption {...props}
-          size="xs"
+      <Caption size="xs"
           text="Example with icon + subcaption"
       />
-      <Caption {...props}
-          size="xs"
-      >
+      <Caption size="xs">
         <FormattedDate
             showDayOfWeek
             showIcon

data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx

@@ -29,7 +29,6 @@ type DatePickerProps = {
   hideLabel?: boolean,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
-  initializeOnce?: boolean,
   inLine?: boolean,
   inputAria?: { [key: string]: string },
   inputData?: { [key: string]: string },
@@ -74,7 +73,6 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
     hideLabel = false,
     htmlOptions = {},
     id,
-    initializeOnce = false,
     inLine = false,
     inputAria = {},
     inputData = {},
@@ -136,7 +134,7 @@ useEffect(() => {
     yearRange,
     required: false,
   }, scrollContainer)
-}, initializeOnce ? [] : undefined)
+})
   const filteredProps = {...props}
   if (filteredProps.marginBottom === undefined) {
     filteredProps.marginBottom = "sm"

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

@@ -1,17 +1,18 @@
 examples:
+  
+  
   react:
   - draggable_default: Default
   - draggable_with_list: Draggable with List Kit
   - draggable_with_selectable_list: Draggable with SelectableList Kit
   - draggable_with_cards: Draggable with Cards
-  - draggable_with_table_react: Draggable with Table
   - draggable_multiple_containers: Dragging Across Multiple Containers
-
+  
   rails:
   - draggable_default_rails: Default
   - draggable_with_list_rails: Draggable with List Kit
   - draggable_with_selectable_list_rails: Draggable with SelectableList Kit
   - draggable_with_cards_rails: Draggable with Cards
-  - draggable_with_table: Draggable with Table
-  - draggable_multiple_containers_rails: Dragging Across Multiple Containers
 
+
+  

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

@@ -2,5 +2,4 @@ export { default as DraggableDefault } from './_draggable_default.jsx'
 export { default as DraggableWithCards } from './_draggable_with_cards.jsx'
 export { default as DraggableWithList } from './_draggable_with_list.jsx'
 export { default as DraggableWithSelectableList } from './_draggable_with_selectable_list.jsx'
-export { default as DraggableMultipleContainers } from './_draggable_multiple_containers.jsx'
-export { default as DraggableWithTableReact } from './_draggable_with_table_react.jsx'
+export { default as DraggableMultipleContainers } from './_draggable_multiple_containers.jsx'

data/app/pb_kits/playbook/pb_draggable/draggable_container.html.erb

@@ -1,3 +1,3 @@
-<%= pb_content_tag(object.tag) do %>
+<%= pb_content_tag do %>
     <%= content.presence %>
-  <% end %>
+  <% end %>

data/app/pb_kits/playbook/pb_draggable/draggable_container.rb

@@ -3,11 +3,6 @@
 module Playbook
   module PbDraggable
     class DraggableContainer < ::Playbook::KitBase
-      prop :tag, type: Playbook::Props::String,
-                 default: "div"
-      prop :container, type: Playbook::Props::String,
-                       default: ""
-
       def data
         Hash(prop(:data)).merge(pb_draggable_container: true)
       end

data/app/pb_kits/playbook/pb_draggable/draggable_item.html.erb

@@ -1,4 +1,4 @@
-<%= pb_content_tag(object.tag, {
+<%= pb_content_tag(:div, {
 id: "item_#{object.drag_id}",
 draggable: true
 }) do %>

data/app/pb_kits/playbook/pb_draggable/draggable_item.rb

@@ -5,10 +5,6 @@ module Playbook
     class DraggableItem < ::Playbook::KitBase
       prop :drag_id, type: Playbook::Props::String,
                      default: ""
-      prop :tag, type: Playbook::Props::String,
-                 default: "div"
-      prop :container, type: Playbook::Props::String,
-                       default: ""
 
       def data
         Hash(prop(:data)).merge(pb_draggable_item: true)

data/app/pb_kits/playbook/pb_draggable/index.js

@@ -9,38 +9,12 @@ export default class PbDraggable extends PbEnhancedElement {
   }
 
   connect() {
-    this.state = {
-      items: [],
-      dragData: { id: "", initialGroup: "" },
-      isDragging: "",
-      activeContainer: ""
-    };
-
     this.draggedItem = null;
     this.draggedItemId = null;
-    this.hasMultipleContainers = false;
-
     document.addEventListener("DOMContentLoaded", () => this.bindEventListeners());
   }
 
-  setState(newState) {
-    this.state = { ...this.state, ...newState };
-    if (newState.items) {
-      const customEvent = new CustomEvent('pb-draggable-reorder', {
-        detail: {
-          reorderedItems: this.state.items,
-          containerId: this.element.querySelector(DRAGGABLE_CONTAINER).id
-        }
-      });
-      this.element.dispatchEvent(customEvent);
-    }
-  }
-
   bindEventListeners() {
-    // Check for multiple containers
-    const containers = this.element.querySelectorAll(DRAGGABLE_CONTAINER);
-    this.hasMultipleContainers = containers.length > 1;
-
     // Needed to prevent images within draggable items from being independently draggable
     // Needed if using Image kit in draggable items
     this.element.querySelectorAll(".pb_draggable_item img").forEach(img => {
@@ -53,10 +27,11 @@ export default class PbDraggable extends PbEnhancedElement {
       item.addEventListener("dragenter", this.handleDragEnter.bind(this));
     });
 
-    containers.forEach(container => {
+    const container = this.element.querySelector(DRAGGABLE_CONTAINER);
+    if (container) {
       container.addEventListener("dragover", this.handleDragOver.bind(this));
       container.addEventListener("drop", this.handleDrop.bind(this));
-    });
+    }
   }
 
   handleDragStart(event) {
@@ -66,17 +41,11 @@ export default class PbDraggable extends PbEnhancedElement {
       event.preventDefault();
       return;
     }
-
-    const container = event.target.closest(DRAGGABLE_CONTAINER);
+    
     this.draggedItem = event.target;
     this.draggedItemId = event.target.id;
-
-    this.setState({
-      dragData: { id: this.draggedItemId, initialGroup: container.id },
-      isDragging: this.draggedItemId
-    });
-
     event.target.classList.add("is_dragging");
+
     if (event.dataTransfer) {
       event.dataTransfer.effectAllowed = 'move';
       event.dataTransfer.setData('text/plain', this.draggedItemId);
@@ -90,20 +59,11 @@ export default class PbDraggable extends PbEnhancedElement {
   handleDragEnter(event) {
     if (!this.draggedItem || event.target === this.draggedItem) return;
 
-    if (this.hasMultipleContainers) {
-      this.handleMultiContainerDragEnter(event);
-    } else {
-      this.handleSingleContainerDragEnter(event);
-    }
-  }
-
-  handleSingleContainerDragEnter(event) {
     const targetItem = event.target.closest('.pb_draggable_item');
     if (!targetItem) return;
 
     const container = targetItem.parentNode;
     const items = Array.from(container.children);
-
     const draggedIndex = items.indexOf(this.draggedItem);
     const targetIndex = items.indexOf(targetItem);
 
@@ -114,143 +74,47 @@ export default class PbDraggable extends PbEnhancedElement {
     }
   }
 
-  handleMultiContainerDragEnter(event) {
-    const targetContainer = event.target.closest(DRAGGABLE_CONTAINER);
-    const targetItem = event.target.closest('.pb_draggable_item');
-
-    if (!targetContainer) return;
-
-    // If we're entering a container directly or there's no target item
-    if (!targetItem) {
-      const lastItem = targetContainer.querySelector('.pb_draggable_item:last-child');
-      if (lastItem) {
-        targetContainer.insertBefore(this.draggedItem, lastItem.nextSibling);
-      } else {
-        targetContainer.appendChild(this.draggedItem);
-      }
-      return;
-    }
-
-    const container = targetItem.parentNode;
-    const items = Array.from(container.children);
-
-    const newItems = [...items].map(item => ({
-      id: item.id,
-      container: container.id
-    }));
-
-    this.setState({ items: newItems });
-
-    const rect = targetItem.getBoundingClientRect();
-    const middleY = rect.top + rect.height / 2;
-
-    if (event.clientY < middleY) {
-      container.insertBefore(this.draggedItem, targetItem);
-    } else {
-      container.insertBefore(this.draggedItem, targetItem.nextSibling);
-    }
-  }
-
   handleDragOver(event) {
     event.preventDefault();
-    event.stopPropagation();
-
-    if (this.hasMultipleContainers) {
-      this.handleMultiContainerDragOver(event);
-    } else {
-      this.handleSingleContainerDragOver(event);
-    }
-  }
-
-  handleSingleContainerDragOver(event) {
     const container = event.target.closest(DRAGGABLE_CONTAINER);
-    if (container) {
-      container.classList.add("active_container");
-    }
-  }
-
-  handleMultiContainerDragOver(event) {
-    let container;
-    if (event.target.matches(DRAGGABLE_CONTAINER)) {
-      container = event.target;
-    } else {
-      container = event.target.closest(DRAGGABLE_CONTAINER);
-    }
 
     if (container) {
-      this.setState({ activeContainer: container.id });
       container.classList.add("active_container");
-
-      // If dragging over empty container or below last item
-      const lastItem = container.querySelector('.pb_draggable_item:last-child');
-      if (!lastItem || (lastItem && event.clientY > lastItem.getBoundingClientRect().bottom)) {
-        if (this.draggedItem && this.draggedItem.parentNode !== container) {
-          container.appendChild(this.draggedItem);
-        }
-      }
     }
   }
 
   handleDrop(event) {
     event.preventDefault();
-    event.stopPropagation();
-
-    let container;
-    if (event.target.matches(DRAGGABLE_CONTAINER)) {
-      container = event.target;
-    } else {
-      container = event.target.closest(DRAGGABLE_CONTAINER);
-    }
-
+    const container = event.target.closest(DRAGGABLE_CONTAINER);
     if (!container || !this.draggedItem) return;
-
+  
     container.classList.remove("active_container");
     this.draggedItem.style.opacity = '1';
-
-    // Handle empty containers
-    if (this.hasMultipleContainers && !container.querySelector('.pb_draggable_item')) {
-      container.appendChild(this.draggedItem);
-    }
-
+  
     // Updated order of items as an array of item IDs
-    const reorderedItems = Array.from(
-      this.element.querySelectorAll('.pb_draggable_item')
-    ).map(item => ({
-      id: item.id,
-      container: item.closest(DRAGGABLE_CONTAINER).id
-    }));
-
+    const reorderedItems = Array.from(container.children)
+      .filter(item => item.classList.contains("pb_draggable_item"))
+      .map(item => item.id.replace("item_", "")); 
+  
     // Store reordered items in a data attribute on the container
     container.setAttribute("data-reordered-items", JSON.stringify(reorderedItems));
-
+  
     const customEvent = new CustomEvent('pb-draggable-reorder', {
       detail: {
         reorderedItems,
         containerId: container.id,
       }
     });
-
     this.element.dispatchEvent(customEvent);
-
-    this.setState({
-      items: reorderedItems,
-      isDragging: "",
-      activeContainer: ""
-    });
-
+  
     this.draggedItem = null;
     this.draggedItemId = null;
   }
+  
 
   handleDragEnd(event) {
     event.target.classList.remove("is_dragging");
     event.target.style.opacity = '1';
-
-    this.setState({
-      isDragging: "",
-      activeContainer: ""
-    });
-
     this.draggedItem = null;
     this.draggedItemId = null;
 

data/app/pb_kits/playbook/pb_draggable/subcomponents/DraggableContainer.tsx

@@ -17,11 +17,10 @@ type DraggableContainerProps = {
   data?: { [key: string]: string };
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string;
-  tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div' | 'tr' | 'th' | 'td' | 'thead' | 'col' | 'tbody',
 };
 
 const DraggableContainer = (props: DraggableContainerProps) => {
-  const { aria = {}, children, className, container, data = {}, htmlOptions = {}, id, tag="div" } = props;
+  const { aria = {}, children, className, container, data = {}, htmlOptions = {}, id } = props;
 
   const { handleDragOver, handleDrop, activeContainer } = DraggableContext();
 
@@ -29,8 +28,6 @@ const DraggableContainer = (props: DraggableContainerProps) => {
   const dataProps = buildDataProps(data);
   const htmlProps = buildHtmlProps(htmlOptions);
 
-  const Tag: React.ReactElement | any = `${tag}`;
-
   const classes = classnames(
     buildCss("pb_draggable_container"),
     `${activeContainer === container ? "active" : ""}`,
@@ -39,18 +36,18 @@ const DraggableContainer = (props: DraggableContainerProps) => {
   );
 
   return (
-    <Tag
+    <div
         {...ariaProps}
         {...dataProps}
         {...htmlProps}
         className={classes}
         id={id}
         key={container}
-        onDragOver={(e: Event) => handleDragOver(e, container)}
+        onDragOver={(e) => handleDragOver(e, container)}
         onDrop={() => handleDrop(container)}
     >
       {children}
-    </Tag>
+    </div>
   );
 };
 

data/app/pb_kits/playbook/pb_draggable/subcomponents/DraggableItem.tsx

@@ -18,11 +18,10 @@ type DraggableItemProps = {
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string;
   dragId?: string;
-  tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div' | 'tr' | 'th' | 'td' | 'thead' | 'col' | 'tbody',
 };
 
 const DraggableItem = (props: DraggableItemProps) => {
-  const { aria = {}, children, className, container, data = {}, htmlOptions = {},  id, dragId, tag="div" } = props;
+  const { aria = {}, children, className, container, data = {}, htmlOptions = {},  id, dragId } = props;
 
   const { isDragging, handleDragStart, handleDragEnter, handleDragEnd } =
     DraggableContext();
@@ -31,8 +30,6 @@ const DraggableItem = (props: DraggableItemProps) => {
   const dataProps = buildDataProps(data);
   const htmlProps = buildHtmlProps(htmlOptions);
 
-  const Tag: React.ReactElement | any = `${tag}`;
-  
   const classes = classnames(
     buildCss("pb_draggable_item"),
     `${isDragging === dragId ? "is_dragging" : ""}`,
@@ -41,7 +38,7 @@ const DraggableItem = (props: DraggableItemProps) => {
   );
 
   return (
-    <Tag
+    <div
         {...ariaProps}
         {...dataProps}
         {...htmlProps}
@@ -54,7 +51,7 @@ const DraggableItem = (props: DraggableItemProps) => {
         onDragStart={() => handleDragStart(dragId, container)}
     >
       {children}
-    </Tag>
+    </div>
   );
 };
 

data/app/pb_kits/playbook/pb_file_upload/file_upload.html.erb

@@ -1,4 +1,9 @@
-<%= pb_content_tag(:div) do %>
+<%= content_tag("div",
+    aria: object.aria,
+    class: object.classname,
+    data: object.data,
+    id: object.id,
+    **combined_html_options) do %>
       <%= pb_rails("form_group", props: {cursor: "pointer", full_width: object.full_width}) do %>
         <label
           for="upload-<%= object.id %>"

data/app/pb_kits/playbook/pb_filter/filter.html.erb

@@ -1,4 +1,8 @@
-<%= pb_content_tag(:div) do %>
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
     <%= object.wrapper do %>
       <%= pb_rails("flex", props: { orientation: "row", padding_right: "lg", vertical: "center" }) do %>
         <% if (object.template != "sort_only") %>

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

@@ -5,7 +5,6 @@ examples:
   - fixed_confirmation_toast_multi_line: Multi Line
   - fixed_confirmation_toast_close: Click to Close
   - fixed_confirmation_toast_positions: Click to Show Positions
-  - fixed_confirmation_toast_auto_close: Click to Show Auto Close
   - fixed_confirmation_toast_children: Children
   - fixed_confirmation_toast_custom_icon: Custom Icon
   

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/index.js

@@ -2,18 +2,16 @@ import PbEnhancedElement from '../pb_enhanced_element'
 
 export default class PbFixedConfirmationToast extends PbEnhancedElement {
   static get selector() {
-    return '[class*="pb_fixed_confirmation_toast_kit"]'
+    return '.remove_toast'
   }
 
   connect() {
     this.self = this.element
     this.autoCloseToast(this.self)
 
-    if (this.self.classList.contains('remove_toast')) {
-      this.self.addEventListener('click', () => {
-        this.removeToast(this.self)
-      })
-    }
+    this.self.addEventListener('click', () => {
+      this.removeToast(this.self)
+    })
   }
 
   removeToast(elem) {
@@ -34,4 +32,4 @@ export default class PbFixedConfirmationToast extends PbEnhancedElement {
       }, autoCloseIntValue)
     }
   }
-}
+}

data/app/pb_kits/playbook/pb_form_group/form_group.html.erb

@@ -1,3 +1,8 @@
-<%= pb_content_tag(:div) do %>
+<%= content_tag(:div,
+    aria: object.aria,
+    class: object.classname,
+    data: object.data,
+    id: object.id,
+    **combined_html_options) do %>
   <%= content.presence %>
 <% end %>

data/app/pb_kits/playbook/pb_form_pill/form_pill.html.erb

@@ -1,4 +1,4 @@
-<%= pb_content_tag(:div, class: object.classname + object.size_class, tabindex: object.tabindex) do %>
+<%= content_tag(:div, id: object.id, data: object.data, class: object.classname + object.size_class, tabindex: object.tabindex, **combined_html_options) do %>
   <% if object.name.present? %>
     <%= pb_rails("avatar", props: { name: object.name, image_url: object.avatar_url, size: "xxs" }) %>
     <% if object.truncate %>