playbook_ui 14.13.0.pre.alpha.PBNTR5596029 → 14.13.0.pre.alpha.play1753updatepbcontenttags6060

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 520a725d004f38fd119945b399c5e1dc6bcf5ca9929821965555ac8f72c3ffa1
-  data.tar.gz: '0490ed67775bcb53cefe0bbedcaca9d2482cf47e899b5cd0e16fc382f0bb014c'
+  metadata.gz: be948d956effebe6bd723330f238c06683deb12734fb5c6c51fb55a3cdae412c
+  data.tar.gz: a150187785493cd22293f7930cb57b9c79ac6d79394b98eda99c03f93be4416d
 SHA512:
-  metadata.gz: 479d29aca4903e65fbaff26957ab48561ebd5a1d59e032c299a83cff41aae40e20ff195eb6d70e1fada990b7a79611ebfe19ec6984fc38e90fb058bc545ab05a
-  data.tar.gz: 17394761a8b8756c5bbb557c7245d28f597514f5e301a5857e56bb860f233a4b23224d58f122c64c6488a0ab766e97c7e0936958f36e20236942b2e5f00585c4
+  metadata.gz: 731ddadd00c5dbd2ca6924ee913507defa5da15a6ed0b30f9d2d639cd6ea1a3c72b3bab94fb2b40211a1329b7fae4a2259e566f11b24f622e8ab5fad279aaa6a
+  data.tar.gz: 430c8a15af6fef2bc5c879612fa9ab7a3c5b5ff6aebb71e7c1381619155769a667ef4b67a5f999af8e954f3cad6a60d96c0e9346a9ae0cafe1084ae3576a6f48

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

@@ -5,8 +5,6 @@ examples:
   - draggable_with_selectable_list: Draggable with SelectableList Kit
   - draggable_with_cards: Draggable with Cards
   - draggable_multiple_containers: Dragging Across Multiple Containers
-  - draggable_with_table_react: Draggable with Table
-
   rails:
   - draggable_default_rails: Default
   - draggable_with_list_rails: Draggable with List Kit

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/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_multi_level_select/multi_level_select.html.erb

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

data/app/pb_kits/playbook/pb_nav/item.html.erb

@@ -1,15 +1,9 @@
   <% if object.collapsible %>
     <%= pb_rails("collapsible", props: { name: "collapsible-nav-example", classname: object.collapsible_nav_classname }) do %>
       <%= pb_rails("collapsible/collapsible_main", props: { name: "default-collapsible-nav", icon: object.collapsible_icons, size: "xs", dark: object.dark, classname:object.margin_classes }) do %>
-        <%= content_tag(object.tag,
-          aria: object.aria,
-          class: object.classname,
-          data: object.data,
-          dark: object.dark,
-          id: object.id,
-          href: object.link && object.link,
-          target: object.link && object.target,
-          **combined_html_options
+        <%= pb_content_tag( object.tag,
+            href: object.link && object.link,
+            target: object.link && object.target
           ) do %>
           <% if object.image_url %>
             <%= pb_rails("image", props: { url: object.image_url, classname: "pb_nav_img_wrapper_collapsible" }) %>
@@ -20,22 +14,16 @@
           <span class="pb_nav_list_item_text_collapsible">
             <%= object.text %>
           </span>
-        <% end %>    
+        <% end %>
        <% end %>
       <%= pb_rails("collapsible/collapsible_content", props: {collapsed: object.collapsed}) do %>
         <%= content.presence %>
       <% end %>
     <% end %>
   <% else %>
-    <%= content_tag(object.tag,
-      aria: object.aria,
-      class: object.classname,
-      **combined_html_options,
-      data: object.data,
-      dark: object.dark,
-      id: object.id,
-      href: object.link && object.link,
-      target: object.link && object.target
+    <%= pb_content_tag( object.tag,
+        href: object.link && object.link,
+        target: object.link && object.target
       ) do %>
       <% if object.image_url %>
         <%= pb_rails("image", props: { url: object.image_url, classname: "pb_nav_img_wrapper" }) %>

data/app/pb_kits/playbook/pb_nav/nav.html.erb

@@ -1,12 +1,7 @@
-<%= content_tag(:nav,
-    aria: object.aria,
-    class: object.classname,
-    data: object.data,
-    id: object.id,
-    **combined_html_options) do %>
+<%= pb_content_tag(:nav) do %>
   <% if object.title %>
-    <%= content_tag(:div, class: "pb_nav_list_title") do %>
-      <%= content_tag(:a, class: "pb_nav_list_item_link_text", href: object.link) do %>
+    <%= pb_content_tag do %>
+      <%= pb_content_tag(:a) do %>
         <%= pb_rails("caption", props: { text: object.title, dark: dark }) %>
       <% end %>
     <% end %>

data/app/pb_kits/playbook/pb_online_status/online_status.html.erb

@@ -1,7 +1,2 @@
-<%= content_tag(:div,
-    aria: object.aria.merge!(label: object.status),
-    class: object.classname,
-    data: object.data,
-    id: object.id,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
 <% end %>

data/app/pb_kits/playbook/pb_popover/popover.html.erb

@@ -1,9 +1,4 @@
-<%= content_tag(:div,
-  aria: object.aria,
-  class: object.classname,
-  data: object.data,
-  id: object.id,
-  **combined_html_options) do %>
+<%= pb_content_tag do %>
   <div class="pb_popover_tooltip hide" id="<%= object.tooltip_id %>" role="tooltip" style="<%= object.z_index_helper %>">
     <div class="pb_popover_body <%= object.width_height_class_helper %> <%= object.popover_spacing_helper %>" style="<%= object.width_height_helper %>">
       <%= content.presence %>

data/app/pb_kits/playbook/pb_table/subcomponents/_table_body.tsx

@@ -7,14 +7,11 @@ import {
 } from "../../utilities/props";
 import { globalProps } from "../../utilities/globalProps";
 
-import Draggable from "../../pb_draggable/_draggable"
-
 type TableBodyPropTypes = {
   aria?: { [key: string]: string };
   children: React.ReactNode[] | React.ReactNode;
   className: string;
   data?: { [key: string]: string };
-  draggableContainer?: boolean;
   htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
   id?: string;
   tag?: "table" | "div";
@@ -26,7 +23,6 @@ const TableBody = (props: TableBodyPropTypes): React.ReactElement => {
     children,
     className,
     data = {},
-    draggableContainer = false,
     htmlOptions = {},
     id,
     tag = "table",
@@ -41,30 +37,7 @@ const TableBody = (props: TableBodyPropTypes): React.ReactElement => {
   return (
     <>
       {isTableTag ? (
-        draggableContainer ? (
-          <Draggable.Container
-              {...ariaProps}
-              {...dataProps}
-              {...htmlProps}
-              className={classes}
-              id={id}
-              tag="tbody"
-          >
-            {children}
-          </Draggable.Container>
-        ) : (
-          <tbody
-              {...ariaProps}
-              {...dataProps}
-              {...htmlProps}
-              className={classes}
-              id={id}
-          >
-            {children}
-          </tbody>
-        )
-      ) : draggableContainer ? (
-        <Draggable.Container
+        <tbody
             {...ariaProps}
             {...dataProps}
             {...htmlProps}
@@ -72,7 +45,7 @@ const TableBody = (props: TableBodyPropTypes): React.ReactElement => {
             id={id}
         >
           {children}
-        </Draggable.Container>
+        </tbody>
       ) : (
         <div
             {...ariaProps}

data/app/pb_kits/playbook/pb_table/subcomponents/_table_row.tsx

@@ -9,7 +9,6 @@ import {
 import { globalProps } from "../../utilities/globalProps";
 import Collapsible from "../../pb_collapsible/_collapsible";
 import useCollapsible from "../../pb_collapsible/useCollapsible";
-import Draggable from "../../pb_draggable/_draggable";
 
 type TableRowPropTypes = {
   aria?: { [key: string]: string };
@@ -20,8 +19,6 @@ type TableRowPropTypes = {
   collapsibleSideHighlight?: boolean;
   data?: { [key: string]: string };
   dark?: boolean;
-  dragId?: string;
-  draggableItem?: boolean;
   htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
   id?: string;
   toggleCellId?: string;
@@ -39,8 +36,6 @@ const TableRow = (props: TableRowPropTypes): React.ReactElement => {
     className,
     data = {},
     dark = false,
-    dragId,
-    draggableItem = false,
     htmlOptions = {},
     id,
     toggleCellId,
@@ -157,38 +152,15 @@ const TableRow = (props: TableRowPropTypes): React.ReactElement => {
           </>
         )
       ) : isTableTag ? (
-        draggableItem ? (
-          <Draggable.Item
-              {...ariaProps}
-              {...dataProps}
-              {...htmlProps}
-              className={classes}
-              dragId={dragId}
-              tag="tr"
-          >
-            {children}
-          </Draggable.Item>
-        ) : (
-          <tr
-              {...ariaProps}
-              {...dataProps}
-              {...htmlProps}
-              className={classes}
-              id={id}
-          >
-            {children}
-          </tr>
-        )
-      ) : draggableItem ? (
-        <Draggable.Item
+        <tr
             {...ariaProps}
             {...dataProps}
             {...htmlProps}
             className={classes}
-            dragId={dragId}
+            id={id}
         >
           {children}
-        </Draggable.Item>
+        </tr>
       ) : (
         <div
             {...ariaProps}