playbook_ui 14.12.0.pre.alpha.PBNTR779railsdraggablecrosscontainer5863 → 14.12.0.pre.alpha.PBNTR8335906

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 765d089ccf2865b636f00f2731f259d3251554090ba8cf345d1b96c887af523a
-  data.tar.gz: d2027d84bedb2da3000a272b5c85e8c108dbf4fac0c612653a8ce7f943924f51
+  metadata.gz: 8cf75667a14a1b95b256c86ea1eaf7a60a5d7ceaf90cc8c5a46431a53953a38a
+  data.tar.gz: 547d77e91c2b02c0f5f76bbe4b0425b467d2f5a6dedd405b43ab823de2072e79
 SHA512:
-  metadata.gz: 5927b36c0974b0d951da24d21a0afbae2f1e4949ec0e73e299491f7bb33e378b6be3eb573c0e090edc94efb924753b9117a310d12c6ff43da62c79cd21edbc17
-  data.tar.gz: 123324d5d23872521397b16043be4df25028beb28731e8cf7e2a79ff4c49058aa4a902a1908677d0533163256ea5860861d2cdb629971be3599a61b55192c95d
+  metadata.gz: 72370309aa5412ddfbf7cbc16c1c21b12d01462dd13124b55cbf72f83e5d73e89168bd3e3736adc3770b9f7973de51c7d1a83aef7ca9cc258985eeba09ef7cfb
+  data.tar.gz: 6fa47007e8a6bf5761db259053351149175fb86b0dc1a2cc3bd5be752bf78acc203d1a9ad63db47f0cdefa24da22819330db2918c535e763ee4905d9313de19f

data/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx

@@ -39,8 +39,15 @@ export const TableHeaderCell = ({
   sortIcon,
   table
 }: TableHeaderCellProps) => {
-  const { sortControl, responsive, selectableRows, hasAnySubRows, showActionsBar, inlineRowLoading } =
-    useContext(AdvancedTableContext);
+  const {
+    sortControl,
+    responsive,
+    selectableRows,
+    hasAnySubRows,
+    showActionsBar,
+    inlineRowLoading,
+    isActionBarVisible,
+  } = useContext(AdvancedTableContext);
 
   type justifyTypes = "none" | "center" | "start" | "end" | "between" | "around" | "evenly"
   
@@ -65,7 +72,7 @@ export const TableHeaderCell = ({
  
 const cellClassName = classnames(
   "table-header-cells",
-  `${showActionsBar && "header-cells-with-actions"}`,
+  `${showActionsBar && isActionBarVisible && "header-cells-with-actions"}`,
   `${isChrome() ? "chrome-styles" : ""}`,
   `${enableSorting ? "table-header-cells-active" : ""}`,
   { "pinned-left": responsive === "scroll" && isPinnedLeft },

data/app/pb_kits/playbook/pb_advanced_table/Utilities/ActionBarAnimationHelper.ts

@@ -0,0 +1,26 @@
+export const showActionBar = (elem: HTMLElement) => {
+  elem.style.display = "block";
+  const height = elem.scrollHeight + "px";
+  elem.style.height = height;
+  elem.classList.add("is-visible");
+  elem.style.overflow = "hidden";
+
+  window.setTimeout(() => {
+    if (elem.classList.contains("is-visible")) {
+      elem.style.height = "";
+      elem.style.overflow = "visible";
+    }
+  }, 300);
+};
+
+export const hideActionBar = (elem: HTMLElement) => {
+  elem.style.height = elem.scrollHeight + "px";
+  elem.offsetHeight;
+  window.setTimeout(() => {
+    elem.style.height = "0";
+    elem.style.overflow = "hidden";
+  }, 10);
+  window.setTimeout(() => {
+    elem.classList.remove("is-visible");
+  }, 300);
+};

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss

@@ -31,12 +31,12 @@
     width: 100%;
   }
 
-  .row-selection-actions-card {
-    border-bottom-right-radius: 0px !important;
-    border-bottom-left-radius: 0px !important;
-    border-bottom-color: transparent;
-  }
-
+    .row-selection-actions-card {
+      border-bottom-right-radius: 0px !important;
+      border-bottom-left-radius: 0px !important;
+      border-bottom-color: transparent;
+      transition: height 300ms ease;
+    }
   .table-header-cells:first-child {
     min-width: 180px;
   }

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback } from "react"
+import React, { useState, useEffect, useCallback, useRef } from "react"
 import classnames from "classnames"
 
 import { GenericObject } from "../types"
@@ -27,6 +27,7 @@ import FlexItem from "../pb_flex/_flex_item"
 import AdvancedTableContext from "./Context/AdvancedTableContext"
 
 import { updateExpandAndCollapseState } from "./Utilities/ExpansionControlHelpers"
+import { showActionBar, hideActionBar } from "./Utilities/ActionBarAnimationHelper"
 
 import { CustomCell } from "./Components/CustomCell"
 import { TableHeader } from "./SubKits/TableHeader"
@@ -295,6 +296,20 @@ const AdvancedTable = (props: AdvancedTableProps) => {
   const onPageChange = (page: number) => {
     table.setPageIndex(page - 1)
   }
+//When to show the actions bar as a whole
+  const isActionBarVisible = selectableRows && showActionsBar && selectedRowsLength > 0
+
+  //Ref and useEffect for animating the actions bar
+  const cardRef = useRef(null);
+  useEffect(() => {
+    if (cardRef.current) {
+      if (isActionBarVisible) {
+        showActionBar(cardRef.current);
+      } else {
+        hideActionBar(cardRef.current);
+      }
+    }
+  }, [isActionBarVisible]);
 
   return (
     <div {...ariaProps} 
@@ -311,6 +326,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
             expandedControl,
             handleExpandOrCollapse,
             inlineRowLoading,
+            isActionBarVisible,
             loading,
             responsive,
             setExpanded,
@@ -333,27 +349,24 @@ const AdvancedTable = (props: AdvancedTableProps) => {
                   total={table.getPageCount()}
                   />
           }
-          {
-            selectableRows && showActionsBar && (
-              <Card className="row-selection-actions-card"
-                  padding="xs"
+          <Card
+              borderNone={!isActionBarVisible}
+              className={`${isActionBarVisible && "show-action-card row-selection-actions-card"}`}
+              htmlOptions={{ ref: cardRef as any }}
+              padding={`${isActionBarVisible ? "xs" : "none"}`}
+          >
+            <Flex alignItems="center" 
+                justify="between"
+            >
+              <Caption color="light" 
+                  paddingLeft="xs" 
+                  size="xs"
               >
-                <Flex alignItems="center"
-                    justify="between"
-                >
-                    <Caption color="light"
-                        paddingLeft="xs"
-                        size="xs"
-                    >
-                      {selectedRowsLength} Selected
-                    </Caption>
-                    <FlexItem>
-                    {actions}
-                    </FlexItem>
-                </Flex>
-              </Card>
-            )
-          }
+                {selectedRowsLength} Selected
+              </Caption>
+              <FlexItem>{actions}</FlexItem>
+            </Flex>
+          </Card>
           <Table
               className={`${loading ? "content-loading" : ""}`}
               dark={dark}

data/app/pb_kits/playbook/pb_copy_button/_copy_button.scss

@@ -1,3 +1,4 @@
 .pb_copy_button_kit {
-
+  width: fit-content;
+  height: fit-content;
 }

data/app/pb_kits/playbook/pb_copy_button/copy_button.html.erb

@@ -0,0 +1,15 @@
+<%= pb_content_tag do %>
+    <%= pb_rails("button", props: { icon: "copy" }) do %>
+      <%= object.text %>
+    <% end %>
+  <% if object.id %> 
+  <%= pb_rails("tooltip", props: {
+      trigger_element_selector: "##{object.id}",
+      position: object.tooltip_position,
+      tooltip_id: "#{object.id}_tooltip",
+      trigger_method: "click"
+    }) do %>
+        <%= object.tooltip_text %> 
+    <% end %>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_copy_button/copy_button.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbCopyButton
+    class CopyButton < ::Playbook::KitBase
+      prop :text
+      prop :tooltip_position,
+           type: Playbook::Props::Enum,
+           values: %w[top right bottom left],
+           default: "top"
+      prop :tooltip_text, type: Playbook::Props::String,
+                          default: "Copied!"
+      prop :value
+      prop :from
+
+      def classname
+        generate_classname("pb_copy_button_kit")
+      end
+
+      def data
+        Hash(values[:data]).merge(
+          "copy-value": value,
+          "from": from
+        )
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_default.html.erb

@@ -0,0 +1,2 @@
+<%= pb_rails("copy_button", props: { id: "default-copy-button", text: "Copy Text", value: "Playbook makes it easy to support bleeding edge, or legacy systems. Use Playbook’s 200+ components and end-to-end design language to create simple, intuitive and beautiful experiences with ease." } ) %>
+<%= pb_rails("textarea", props: { margin_top: "xs", placeholder: "Copy and paste here" }) %>

data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_from.html.erb

@@ -0,0 +1,5 @@
+<%= pb_rails("body", props: { id: "body", text: "Copy this body text!"}) %>
+<%= pb_rails("copy_button", props: { text: "Copy Body text", from: "body", id: "copy-body-button" }) %>
+<%= pb_rails("text_input", props: { margin_top: "xs", placeholder: "Copy and paste here" }) %>
+<%= pb_rails("copy_button", props: { text: "Copy Text Input", from: "copy-input", id: "copy-input-button" }) %>
+<%= pb_rails("text_input", props: { margin_top: "xs", id: "copy-input" , value: "Copy and paste here" }) %>

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

@@ -1,8 +1,8 @@
 examples:
-  
+  rails:
+  - copy_button_default: Default
+  - copy_button_from: Copy From
   
   react:
   - copy_button_default: Default
   - copy_button_from: Copy From
-  
-  

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

@@ -0,0 +1,47 @@
+import PbEnhancedElement from "../pb_enhanced_element"
+
+export default class PbCopyButton extends PbEnhancedElement {
+  static get selector() {
+    return '.pb_copy_button_kit'
+  }
+
+  connect() {
+    this.handleClick = this.handleClick.bind(this)
+    this.button = this.element.querySelector('button')
+    if (this.button) {
+      this.button.addEventListener('click', this.handleClick)
+    }
+  }
+
+  disconnect() {
+    if (this.button) {
+      this.button.removeEventListener('click', this.handleClick)
+    }
+  }
+
+  handleClick() {
+    const fromId = this.element.getAttribute('data-from')
+    if (fromId) {
+      const fromElement = document.querySelector(`#${fromId}`)
+      if (fromElement) {
+        let contentToCopy = ''
+        if (fromElement.tagName.toLowerCase() === 'input') {
+          contentToCopy = fromElement.value
+        } else {
+          contentToCopy = fromElement.innerText
+        }
+        navigator.clipboard.writeText(contentToCopy)
+          .catch(err => console.error('Failed to copy text', err))
+        return
+      }
+    }
+
+    const textToCopy = this.element.getAttribute('data-copy-value')
+    if (textToCopy) {
+      navigator.clipboard.writeText(textToCopy)
+        .catch(err => console.error('Failed to copy text', err))
+    } else {
+      console.warn('No data-copy-value attribute found or data-from element')
+    }
+  }
+}

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

@@ -1,14 +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_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_multiple_containers_rails: Dragging Across Multiple Containers
 
+
+  

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

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

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

@@ -3,9 +3,6 @@
 module Playbook
   module PbDraggable
     class DraggableContainer < ::Playbook::KitBase
-      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.rb

@@ -5,8 +5,6 @@ module Playbook
     class DraggableItem < ::Playbook::KitBase
       prop :drag_id, type: Playbook::Props::String,
                      default: ""
-      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,32 +9,11 @@ export default class PbDraggable extends PbEnhancedElement {
   }
 
   connect() {
-    this.state = {
-      items: [],
-      dragData: { id: "", initialGroup: "" },
-      isDragging: "",
-      activeContainer: ""
-    };
-
     this.draggedItem = null;
     this.draggedItemId = null;
-
     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() {
     // Needed to prevent images within draggable items from being independently draggable
     // Needed if using Image kit in draggable items
@@ -48,11 +27,11 @@ export default class PbDraggable extends PbEnhancedElement {
       item.addEventListener("dragenter", this.handleDragEnter.bind(this));
     });
 
-    const containers = this.element.querySelectorAll(DRAGGABLE_CONTAINER);
-    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) {
@@ -62,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);
@@ -91,14 +64,6 @@ export default class PbDraggable extends PbEnhancedElement {
 
     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 draggedIndex = items.indexOf(this.draggedItem);
     const targetIndex = items.indexOf(targetItem);
 
@@ -111,82 +76,45 @@ export default class PbDraggable extends PbEnhancedElement {
 
   handleDragOver(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.setState({ activeContainer: container.id });
       container.classList.add("active_container");
     }
   }
 
   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 (!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,  // Changed from reorderedItems to items to match setState
-      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_home_address_street/_home_address_street.tsx

@@ -18,7 +18,6 @@ type HomeAddressStreetProps = {
   className?: string,
   data?: { [key: string]: string },
   dark?: boolean,
-  preserveCase?: boolean,
   emphasis: "street" | "city" | "none",
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   homeId: string,
@@ -44,7 +43,6 @@ const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement =>
     htmlOptions = {},
     homeId,
     homeUrl,
-    preserveCase = false,
     target,
     newWindow,
     houseStyle,
@@ -79,8 +77,6 @@ const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement =>
     return null
   }
 
-  const formatStreetAdr = (address: string): string => preserveCase ? address : titleize(address)
-
   return (
     <div
         className={classes(className, dark)}
@@ -95,7 +91,7 @@ const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement =>
               dark={dark}
               size={4}
           >
-            {joinPresent([formatStreetAdr(address), houseStyle], ' · ')}
+            {joinPresent([titleize(address), houseStyle], ' · ')}
           </Title>
           <Title
               className="pb_home_address_street_address"
@@ -105,14 +101,14 @@ const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement =>
             {titleize(addressCont)}
           </Title>
           <Body color="light">
-            {`${titleize(city)}, ${state.toUpperCase()} ${zipcode}`}
+            {`${titleize(city)}, ${state} ${zipcode}`}
           </Body>
         </div>
       }
       {emphasis == 'city' &&
         <div>
           <Body color="light">
-            {joinPresent([formatStreetAdr(address), houseStyle], ' · ')}
+            {joinPresent([titleize(address), houseStyle], ' · ')}
           </Body>
           <Body color="light">{titleize(addressCont)}</Body>
           <div>
@@ -122,7 +118,7 @@ const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement =>
                 size={4}
                 tag="span"
             >
-              {`${titleize(city)}, ${state.toUpperCase()}`}
+              {`${titleize(city)}, ${state}`}
             </Title>
             <Body
                 color="light"
@@ -136,15 +132,15 @@ const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement =>
       {emphasis == 'none' &&
         <div>
           <Body dark={dark}>
-            {joinPresent([formatStreetAdr(address), houseStyle], ' · ')}
+            {joinPresent([titleize(address), houseStyle], ' · ')}
           </Body>
-          <Body dark={dark}>{formatStreetAdr(addressCont)}</Body>
+          <Body dark={dark}>{titleize(addressCont)}</Body>
           <div>
             <Body
                 color="light"
                 dark={dark}
               >
-            {`${titleize(city)}, ${state.toUpperCase()} ${zipcode}`}
+            {`${titleize(city)}, ${state} ${zipcode}`}
           </Body>
           </div>
         </div>

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

@@ -5,14 +5,12 @@ examples:
   - home_address_street_emphasis: Emphasis
   - home_address_street_modified: Modified
   - home_address_street_link: Link
-  - home_address_street_formatting: Formatting
 
   react:
   - home_address_street_default: Default
   - home_address_street_emphasis: Emphasis
   - home_address_street_modified: Modified
   - home_address_street_link: Link
-  - home_address_street_formatting: Formatting
 
   swift:
   - home_address_street_default_swift: Default

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

@@ -2,4 +2,3 @@ export { default as HomeAddressStreetDefault } from './_home_address_street_defa
 export { default as HomeAddressStreetEmphasis } from './_home_address_street_emphasis.jsx'
 export { default as HomeAddressStreetModified } from './_home_address_street_modified.jsx'
 export { default as HomeAddressStreetLink } from './_home_address_street_link.jsx'
-export { default as HomeAddressStreetFormatting } from './_home_address_street_formatting.jsx'

data/app/pb_kits/playbook/pb_home_address_street/home_address_street.rb

@@ -18,7 +18,6 @@ module Playbook
       prop :state
       prop :zipcode
       prop :territory
-      prop :preserve_case, default: false
       prop :dark, type: Playbook::Props::Boolean, default: false
 
       def classname
@@ -30,7 +29,7 @@ module Playbook
       end
 
       def city_state
-        [city&.titleize, state&.upcase].join(", ")
+        [city&.titleize, state].join(", ")
       end
 
       def zip
@@ -38,7 +37,7 @@ module Playbook
       end
 
       def address_house_style
-        [format_street_address, house_style].join(separator)
+        [address&.titleize, house_style].join(separator)
       end
 
       def address_house_style2
@@ -49,14 +48,6 @@ module Playbook
         house_style ? " \u00b7 " : ""
       end
 
-      def format_street_address
-        preserve_case ? address : custom_titleize(address)
-      end
-
-      def custom_titleize(str)
-        str.split(" ").map(&:capitalize).join(" ")
-      end
-
       def city_emphasis_props
         {
           address_house_style: address_house_style,