playbook_ui 14.13.0.pre.alpha.PBNTR5596029 → 14.13.0.pre.alpha.play1753updatepbcontenttags6065

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 520a725d004f38fd119945b399c5e1dc6bcf5ca9929821965555ac8f72c3ffa1
-  data.tar.gz: '0490ed67775bcb53cefe0bbedcaca9d2482cf47e899b5cd0e16fc382f0bb014c'
+  metadata.gz: 2d0764cca01762f5a87e25a2e3c174e0c5d1bd324f082cc4d98d67faa32e32e0
+  data.tar.gz: d5ce3ad7b56b369cd89fba8e415f75586caa94e21e3e43766a4685e343e982ed
 SHA512:
-  metadata.gz: 479d29aca4903e65fbaff26957ab48561ebd5a1d59e032c299a83cff41aae40e20ff195eb6d70e1fada990b7a79611ebfe19ec6984fc38e90fb058bc545ab05a
-  data.tar.gz: 17394761a8b8756c5bbb557c7245d28f597514f5e301a5857e56bb860f233a4b23224d58f122c64c6488a0ab766e97c7e0936958f36e20236942b2e5f00585c4
+  metadata.gz: 26d1187b6cb391a565ce62290f85ff4368b64f4ce78e7d4220c514ab799b7f03f56aad13fa0f12aea8115ee0784302e71f052c6ce6d365fb3894ab1f5efd7ecf
+  data.tar.gz: 0fac8140f1032b96f606209d9e852ad0b79a2cbe91611c88856e921e646cd48766357ab4dc3a17d00e8c55d23824f3a75450f01c516122ba1324f538fd0ce836

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_icon_button/docs/_icon_button_default.html.erb

@@ -1,3 +1,2 @@
 <%= pb_rails("icon_button") %>
-</br>
-<%= pb_rails("icon_button", props: {variant: "link"}) %>
+<%= pb_rails("icon_button", props: {variant: "link", margin_top: "md" }) %>

data/app/pb_kits/playbook/pb_icon_button/docs/_icon_button_sizes.html.erb

@@ -0,0 +1,27 @@
+<%= pb_rails("flex", props: { align: "center"}) do %>
+  <%= pb_rails("icon_button", props: {size: "lg"}) %> <span>Large</span>
+<% end %>
+
+<%= pb_rails("flex", props: { align: "center" }) do %>
+  <%= pb_rails("icon_button", props: {size: "sm"}) %> <span>Small</span>
+<% end %>
+
+<%= pb_rails("flex", props: { align: "center" }) do %>
+  <%= pb_rails("icon_button", props: {size: "xs"}) %> <span>XSmall</span>
+<% end %>
+
+<%= pb_rails("flex", props: { align: "center", margin_top: "md" }) do %>
+  <%= pb_rails("icon_button", props: {size: "1x"}) %> <span>1x</span>
+<% end %>
+
+<%= pb_rails("flex", props: { align: "center" }) do %>
+  <%= pb_rails("icon_button", props: {size: "2x"}) %> <span>2x</span>
+<% end %>
+
+<%= pb_rails("flex", props: { align: "center" }) do %>
+  <%= pb_rails("icon_button", props: {size: "3x"}) %> <span>3x</span>
+<% end %>
+
+<%= pb_rails("flex", props: { align: "center" }) do %>
+  <%= pb_rails("icon_button", props: {size: "4x"}) %> <span>4x</span>
+<% end %>

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

@@ -2,6 +2,4 @@ examples:
   
   rails:
   - icon_button_default: Default
-  
-  
-  
+  - icon_button_sizes: Sizes

data/app/pb_kits/playbook/pb_icon_button/icon_button.html.erb

@@ -8,7 +8,7 @@
   <%= pb_rails("icon", props: { icon: object.icon,
                                 fixed_width: true,
                                 dark: object.dark,
-                                size: "2x",
+                                size: object.size,
                                 color: "text_lt_default",
                                 classname: "icon_button_icon",
                                 padding_x: "xxs", padding_y: "xs" }) %>

data/app/pb_kits/playbook/pb_icon_button/icon_button.rb

@@ -14,6 +14,9 @@ module Playbook
       prop :variant, type: Playbook::Props::Enum,
                      values: %w[default link],
                      default: "default"
+      prop :size, type: Playbook::Props::Enum,
+                  values: %w[1x 2x 3x 4x 5x 6x 7x 8x 9x 10x xs sm lg],
+                  default: "2x"
       def classname
         generate_classname("pb_icon_button_kit", variant)
       end

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/docs/_table_with_clickable_rows.html.erb

@@ -0,0 +1,47 @@
+<%= pb_rails("table", props: { size: "sm" }) do %>
+    <%= pb_rails("table/table_head") do %>
+      <%= pb_rails("table/table_row") do %>
+        <%= pb_rails("table/table_header", props: { text: "Column 1" }) %>
+        <%= pb_rails("table/table_header", props: { text: "Column 2" }) %>
+        <%= pb_rails("table/table_header", props: { text: "Column 3" }) %>
+        <%= pb_rails("table/table_header", props: { text: "Column 4" }) %>
+        <%= pb_rails("table/table_header", props: { text: "Column 5" }) %>
+        <%= pb_rails("table/table_header", props: { text: "" }) %>
+      <% end %>
+    <% end %>
+    <%= pb_rails("table/table_body") do %>
+      <%= pb_rails("table/table_row", props: { cursor: "pointer", html_options: { onclick: "alert('Row 1 clicked')" } }) do %>
+        <%= pb_rails("table/table_cell", props: { text: "Value 1" }) %>
+        <%= pb_rails("table/table_cell", props: { text: "Value 2" }) %>
+        <%= pb_rails("table/table_cell", props: { text: "Value 3" }) %>
+        <%= pb_rails("table/table_cell", props: { text: "Value 4" }) %>
+        <%= pb_rails("table/table_cell", props: { text: "Value 5" }) %>
+        <%= pb_rails("table/table_cell", props: { text_align: "right" }) do %>
+          <%= pb_rails("icon", props: { color: "primary_action", fixed_width: true, icon: "chevron-right", size: "xs" }) %>
+        <% end %>
+      <% end %>
+  
+      <%= pb_rails("table/table_row", props: { cursor: "pointer", html_options: { onclick: "alert('Row 2 clicked')" } }) do %>
+        <%= pb_rails("table/table_cell", props: { text: "Value 1" }) %>
+        <%= pb_rails("table/table_cell", props: { text: "Value 2" }) %>
+        <%= pb_rails("table/table_cell", props: { text: "Value 3" }) %>
+        <%= pb_rails("table/table_cell", props: { text: "Value 4" }) %>
+        <%= pb_rails("table/table_cell", props: { text: "Value 5" }) %>
+        <%= pb_rails("table/table_cell", props: { text_align: "right" }) do %>
+          <%= pb_rails("icon", props: { color: "primary_action", fixed_width: true, icon: "chevron-right", size: "xs" }) %>
+        <% end %>
+      <% end %>
+  
+      <%= pb_rails("table/table_row", props: { cursor: "pointer", html_options: { onclick: "alert('Row 3 clicked')" } }) do %>
+        <%= pb_rails("table/table_cell", props: { text: "Value 1" }) %>
+        <%= pb_rails("table/table_cell", props: { text: "Value 2" }) %>
+        <%= pb_rails("table/table_cell", props: { text: "Value 3" }) %>
+        <%= pb_rails("table/table_cell", props: { text: "Value 4" }) %>
+        <%= pb_rails("table/table_cell", props: { text: "Value 5" }) %>
+        <%= pb_rails("table/table_cell", props: { text_align: "right" }) do %>
+          <%= pb_rails("icon", props: { color: "primary_action", fixed_width: true, icon: "chevron-right", size: "xs" }) %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+  

data/app/pb_kits/playbook/pb_table/docs/_table_with_clickable_rows.jsx

@@ -0,0 +1,88 @@
+import React from 'react'
+import { Table, Icon } from 'playbook-ui'
+
+const TableWithClickableRows = (props) => {
+
+
+  return (
+      <Table 
+          size="sm" 
+          {...props}
+      >
+          <Table.Head>
+              <Table.Row>
+                  <Table.Header>{"Column 1"}</Table.Header>
+                  <Table.Header>{"Column 2"}</Table.Header>
+                  <Table.Header>{"Column 3"}</Table.Header>
+                  <Table.Header>{"Column 4"}</Table.Header>
+                  <Table.Header>{"Column 5"}</Table.Header>
+                  <Table.Header>{""}</Table.Header>
+              </Table.Row>
+          </Table.Head>
+          <Table.Body>
+              <Table.Row
+                  cursor="pointer"
+                  htmlOptions={{ onClick: () => alert("Row 1 clicked") }}
+                  {...props}
+              >
+                <Table.Cell>{"Value 1"}</Table.Cell>
+                <Table.Cell>{"Value 2"}</Table.Cell>
+                <Table.Cell>{"Value 3"}</Table.Cell>
+                <Table.Cell>{"Value 4"}</Table.Cell>
+                <Table.Cell>{"Value 5"}</Table.Cell>
+                <Table.Cell textAlign="right">
+                    <Icon 
+                        color="primary_action"
+                        fixedWidth
+                        icon="chevron-right" 
+                        size="xs"
+                        {...props}
+                    />
+                </Table.Cell>
+              </Table.Row>
+              <Table.Row
+                  cursor="pointer"
+                  htmlOptions={{ onClick: () => alert("Row 2 clicked") }}
+                  {...props}
+              >
+                  <Table.Cell>{"Value 1"}</Table.Cell>
+                  <Table.Cell>{"Value 2"}</Table.Cell>
+                  <Table.Cell>{"Value 3"}</Table.Cell>
+                  <Table.Cell>{"Value 4"}</Table.Cell>
+                  <Table.Cell>{"Value 5"}</Table.Cell>
+                  <Table.Cell textAlign="right">
+                      <Icon 
+                          color="primary_action"
+                          fixedWidth
+                          icon="chevron-right" 
+                          size="xs"
+                          {...props}
+                      />                
+                  </Table.Cell>
+              </Table.Row>
+              <Table.Row
+                  cursor="pointer"
+                  htmlOptions={{ onClick: () => alert("Row 3 clicked") }}
+                  {...props}
+              >
+                  <Table.Cell>{"Value 1"}</Table.Cell>
+                  <Table.Cell>{"Value 2"}</Table.Cell>
+                  <Table.Cell>{"Value 3"}</Table.Cell>
+                  <Table.Cell>{"Value 4"}</Table.Cell>
+                  <Table.Cell>{"Value 5"}</Table.Cell>
+                  <Table.Cell textAlign="right">
+                      <Icon 
+                          color="primary_action"
+                          fixedWidth
+                          icon="chevron-right" 
+                          size="xs"
+                          {...props}
+                      />
+                  </Table.Cell>
+              </Table.Row>
+          </Table.Body>
+      </Table>
+  )
+}
+
+export default TableWithClickableRows

data/app/pb_kits/playbook/pb_table/docs/_table_with_clickable_rows.md

@@ -0,0 +1 @@
+Clickable table rows do not require any additional props. This doc example showcases how to set them up using `html_options`/`htmlOptions` and click events. Using the global prop for cursor to set it to "pointer" is also recommended for better UX.

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

@@ -34,6 +34,7 @@ examples:
     - table_with_collapsible_with_custom_content_rails: Table with Collapsible with Custom Content
     - table_with_collapsible_with_nested_rows_rails: Table with Collapsible with Nested Rows
     - table_with_collapsible_with_nested_table_rails: Table with Collapsible with Nested Table
+    - table_with_clickable_rows: Table with Clickable Rows
 
   react:
     - table_sm: Small
@@ -70,3 +71,4 @@ examples:
     - table_with_collapsible_with_custom_content: Table with Collapsible with Custom Content
     - table_with_collapsible_with_nested_rows: Table with Collapsible with Nested Rows
     - table_with_collapsible_with_nested_table: Table with Collapsible with Nested Table
+    - table_with_clickable_rows: Table with Clickable Rows

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

@@ -32,4 +32,5 @@ export { default as TableWithCollapsible } from './_table_with_collapsible.jsx'
 export { default as TableWithCollapsibleWithCustomContent } from './_table_with_collapsible_with_custom_content.jsx'
 export { default as TableWithCollapsibleWithNestedTable } from './_table_with_collapsible_with_nested_table.jsx'
 export { default as TableWithCollapsibleWithNestedRows } from './_table_with_collapsible_with_nested_rows.jsx'
-export { default as TableWithCollapsibleWithCustomClick } from './_table_with_collapsible_with_custom_click.jsx'
+export { default as TableWithCollapsibleWithCustomClick } from './_table_with_collapsible_with_custom_click.jsx'
+export { default as TableWithClickableRows } from './_table_with_clickable_rows.jsx'

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}