playbook_ui 14.13.0.pre.alpha.play1852reacthookformsupportradio6213 → 14.13.0.pre.alpha.play1884progresspill6064

data/app/pb_kits/playbook/pb_progress_step/progress_step.html.erb

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

data/app/pb_kits/playbook/pb_progress_step/progress_step_item.html.erb

@@ -1,4 +1,8 @@
-<%= pb_content_tag(:li) do %>
+<%= content_tag(:li,
+  id: object.id,
+  data: object.data,
+  class: object.classname,
+  **combined_html_options) do %>
   <div class="box" style="max-width: min-content;" id="<%= object.tooltip_trigger_class %>">
     <div class="circle">
       <%= pb_rails("icon", props: { icon: object.icon, size: "xs" }) if object.icon.present? %>

data/app/pb_kits/playbook/pb_radio/_radio.tsx

@@ -1,4 +1,6 @@
-import React, { useRef, forwardRef } from 'react'
+/*eslint-disable react/no-multi-comp */
+
+import React, { forwardRef, useRef } from 'react'
 import Body from '../pb_body/_body'
 import Flex from '../pb_flex/_flex'
 import classnames from 'classnames'
@@ -22,10 +24,10 @@ type RadioProps = {
   name?: string,
   value?: string,
   text?: string,
-  onChange?: (event: React.FormEvent<HTMLInputElement> | null) => void,
+  onChange: (event: React.FormEvent<HTMLInputElement> | null) => void,
 } & GlobalProps
 
-const Radio = forwardRef<HTMLInputElement, RadioProps>(({
+const Radio = ({
   aria = {},
   alignment,
   children,
@@ -41,124 +43,110 @@ const Radio = forwardRef<HTMLInputElement, RadioProps>(({
   name = 'radio_name',
   text = 'Radio Text',
   value = 'radio_text',
-  checked = false,
   onChange = () => { void 0 },
   ...props
-}, ref) => {
-  const internalRef = useRef<HTMLInputElement>(null)
-  const setRefs = (el: HTMLInputElement) => {
-    internalRef.current = el
-    if (typeof ref === 'function') {
-      ref(el)
-    } else if (ref) {
-      (ref as React.MutableRefObject<HTMLInputElement | null>).current = el
-    }
-  }
-
-  // Since we're using defaultChecked for uncontrolled input,
-  // we no longer need to sync the checked state with useEffect.
-
-  const ariaProps = buildAriaProps(aria)
-  const dataProps = buildDataProps(data)
-  const htmlProps = buildHtmlProps(htmlOptions)
+}: RadioProps, ref: any) => {
+  const radioRef = useRef(null);
 
+  const ariaProps = buildAriaProps(aria);
+  const dataProps = buildDataProps(data);
+  const htmlProps = buildHtmlProps(htmlOptions);
   const classes = classnames(
     buildCss('pb_radio_kit', alignment),
     dark ? 'dark' : null,
     error ? 'error' : null,
     globalProps(props),
     className
-  )
+  );
 
   const classesCustom = classnames(
     dark ? 'dark' : null,
     error ? 'error' : null,
     globalProps(props),
     className
-  )
+  );
 
-  const displayRadio = (inputProps: any) => {
-    if (children && customChildren === false)
-      return children
+  const displayRadio = (props: RadioProps & any) => {
+    if (children && customChildren == false)
+      return (children)
     else
-      return (
-        <input
-            defaultChecked={checked}
-            disabled={disabled}
-            id={id}
-            name={name}
-            onChange={onChange}
-            ref={setRefs}
-            type="radio"
-            value={value}
-            {...inputProps}
-        />
-      )
-  }
+    return (
+    <input
+        disabled={disabled}
+        id={id}
+        name={name}
+        onChange={onChange}
+        ref={ref}
+        text={text}
+        type="radio"
+        value={value}
+        {...props}
+    />
+  )}
 
   const handleContainerClick = (event: React.MouseEvent<HTMLDivElement, MouseEvent> | undefined) => {
     if (event) {
-      const target = event.target as HTMLElement
+      const target = event.target as HTMLElement;
       if (
         target.id === 'pb-radio-children-wrapper' ||
         target.closest('#pb-radio-children-wrapper')
       ) {
-        internalRef.current?.click()
+        radioRef.current?.click();
       }
     }
-  }
+  };
 
-  return customChildren ? (
-    <Flex
-        {...ariaProps}
-        {...dataProps}
-        {...htmlProps}
-        align="center"
-        className={classesCustom}
-        cursor="pointer"
-        htmlFor={id}
-        htmlOptions={{
-          onClick: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
-            handleContainerClick(event)
-          }) as unknown as () => void
-        }}
-        id="radio-container"
-    >
-      <label className={buildCss('pb_radio_kit', alignment)}>
+  return (
+    customChildren ? (
+      <Flex 
+          {...ariaProps}
+          {...dataProps}
+          {...htmlProps}
+          align='center'
+          className={classesCustom}
+          cursor='pointer'
+          htmlFor={id}
+          htmlOptions={{
+            onClick: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+              handleContainerClick(event);
+            }) as unknown as () => void
+          }}
+          id="radio-container"
+      >
+        <label className={buildCss('pb_radio_kit', alignment)}>
         <input
-            defaultChecked={checked}
             disabled={disabled}
             id={id}
             name={name}
             onChange={onChange}
-            ref={setRefs}
+            ref={radioRef}
             type="radio"
             value={value}
             {...props}
         />
+          <span className="pb_radio_button" />
+        </label>
+        <div id="pb-radio-children-wrapper"> {children} </div>
+      </Flex>
+    ) : (
+        <label
+            {...ariaProps}
+            {...dataProps}
+            {...htmlProps}
+            className={classes}
+            htmlFor={id}
+        >
+        <>{displayRadio(props)}</>
         <span className="pb_radio_button" />
+        <Body
+            dark={dark}
+            status={error ? 'negative' : null}
+            text={label}
+            variant={null}
+        />
       </label>
-      <div id="pb-radio-children-wrapper"> {children} </div>
-    </Flex>
-  ) : (
-    <label
-        {...ariaProps}
-        {...dataProps}
-        {...htmlProps}
-        className={classes}
-        htmlFor={id}
-    >
-      {displayRadio(props)}
-      <span className="pb_radio_button" />
-      <Body
-          dark={dark}
-          status={error ? 'negative' : null}
-          text={label}
-          variant={null}
-      />
-    </label>
-  )
-})
+    )
+  );
+};
 
-Radio.displayName = "Radio"
-export default Radio
+export default forwardRef(Radio);

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

@@ -16,7 +16,6 @@ examples:
   - radio_alignment: Alignment
   - radio_disabled: Disabled
   - radio_custom_children: Custom Children
-  - radio_react_hook: React Hook Form
 
   swift:
   - radio_default_swift: Default
@@ -27,4 +26,4 @@ examples:
   - radio_spacing_swift: Spacing
   - radio_padding_swift: Padding
   - radio_subtitle_swift: Subtitle
-  - radio_props_swift: ""
+  - radio_props_swift: ""

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

@@ -4,4 +4,3 @@ export { default as RadioError } from './_radio_error.jsx'
 export { default as RadioAlignment } from './_radio_alignment.jsx'
 export { default as RadioDisabled } from './_radio_disabled.jsx'
 export { default as RadioCustomChildren } from './_radio_custom_children.jsx'
-export { default as RadioReactHook } from './_radio_react_hook.jsx'

data/app/pb_kits/playbook/pb_radio/radio.html.erb

@@ -7,21 +7,26 @@
     data: object.data,
     **combined_html_options
   }) do %>
-    <%= pb_content_tag(:label,
+    <%= content_tag(:label,
       'data-pb-radio-children': 'true',
       checked: object.checked,
-      value: object.value
-      ) do %>
+      class: object.classname,
+      id: object.id,
+      value: object.value) do %>
       <%= input %>
       <span class="pb_radio_button"></span>
     <% end %>
     <div data-pb-radio-children-wrapper="true"> <%= content %> </div>
   <% end %>
 <% else %>
-  <%= pb_content_tag(:label,
+  <%= content_tag(:label,
+      aria: object.aria,
       checked: object.checked,
+      class: object.classname,
+      data: object.data,
+      id: object.id,
       value: object.value,
-      ) do %>
+      **combined_html_options) do %>
 
       <% if content.present? %>
         <%= content %>
@@ -32,4 +37,4 @@
       <span class="pb_radio_button"></span>
       <%= pb_rails("body", props: { status: object.body_status, text: object.text, dark: object.dark }) %>
   <% end %>
-<% end %>
+<% end %>

data/app/pb_kits/playbook/pb_radio/radio.test.js

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

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

@@ -16,7 +16,7 @@ const TableWithCollapsible = (props) => {
     );
   };
 
-  return (
+return (
       <Table
           size="sm"
           {...props}

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

@@ -31,12 +31,10 @@ examples:
     - table_with_subcomponents_as_divs: Table with Sub Components (Divs)
     - table_outer_padding: Outer Padding
     - table_with_collapsible: Table with Collapsible
-    - table_with_collapsible_with_custom_click: Table with Collapsible with Custom Click
     - 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
-    - table_with_selectable_rows: Table with Selectable Rows
 
   react:
     - table_sm: Small
@@ -73,5 +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
-    - table_with_selectable_rows: Table with Selectable Rows
+    - table_with_clickable_rows: Table with Clickable Rows

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

@@ -33,5 +33,4 @@ export { default as TableWithCollapsibleWithCustomContent } from './_table_with_
 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 TableWithSelectableRows } from './_table_with_selectable_rows.jsx'
-export { default as TableWithClickableRows } from './_table_with_clickable_rows.jsx'
+export { default as TableWithClickableRows } from './_table_with_clickable_rows.jsx'

data/app/pb_kits/playbook/pb_table/index.ts

@@ -2,7 +2,6 @@ import PbEnhancedElement from '../pb_enhanced_element'
 
 const TABLE_WRAPPER_SELECTOR = "[data-pb-table-wrapper]";
 const TABLE_COLLAPSIBLE_WRAPPER_SELECTOR = "[data-pb-table-collapsible-wrapper]";
-const TABLE_COLLAPSIBLE_CELL_SELECTOR = "[data-pb-table-collapsible-cell-id]";
 
 export default class PbTable extends PbEnhancedElement {
   stickyLeftColumns: string[] = [];
@@ -159,49 +158,18 @@ export default class PbTable extends PbEnhancedElement {
   }
 
   handleCollapsibleClick() {
-    const cells = this.element.querySelectorAll(TABLE_COLLAPSIBLE_CELL_SELECTOR);
     const collapsibleElements = this.element.querySelectorAll(TABLE_COLLAPSIBLE_WRAPPER_SELECTOR);
-
-    if (cells.length > 0) {
-      cells.forEach((cell) => {
-        const cellId = (cell as HTMLElement).dataset.pbTableCollapsibleCellId;
-
-        Array.from(cell.children).forEach((child) => {
-          if (child.id === cellId) {
-            Array.from(child.children).forEach((svgChild) => {
-              svgChild.id = cellId; // Assign cellId to SVG child
-              Array.from(svgChild.children).forEach((pathChild) => {
-                pathChild.id = cellId; // Assign cellId to path child
-              });
-            });
-          }
-        });
-        cell.addEventListener('click', (event) => {
-          if ((event.target as HTMLElement).id) {
-            document.dispatchEvent(new CustomEvent(`collapsed-toggle${(event.currentTarget as HTMLElement).id}`));
-
-            const toggleElements = this.element.querySelectorAll(`.collapsible_border_toggle${(event.currentTarget as HTMLElement).id}`);
-            toggleElements.forEach((element) => {
-              element.classList.toggle('no-border');
-              element.classList.toggle('border-active');
-            });
-          }
+    collapsibleElements.forEach((collapsibleElement) => {
+      collapsibleElement.addEventListener('click', (event) => {
+        document.dispatchEvent(new CustomEvent(`collapsed-toggle${(event.currentTarget as HTMLElement).id}`))
+
+        const toggleElements = this.element.querySelectorAll(`.collapsible_border_toggle${(event.currentTarget as HTMLElement).id}`);
+        toggleElements.forEach(element => {
+          element.classList.toggle('no-border');
+          element.classList.toggle('border-active');
         });
-      });
-
-    } else {
-      collapsibleElements.forEach((collapsibleElement) => {
-        collapsibleElement.addEventListener('click', (event) => {
-          document.dispatchEvent(new CustomEvent(`collapsed-toggle${(event.currentTarget as HTMLElement).id}`))
-
-          const toggleElements = this.element.querySelectorAll(`.collapsible_border_toggle${(event.currentTarget as HTMLElement).id}`);
-          toggleElements.forEach(element => {
-            element.classList.toggle('no-border');
-            element.classList.toggle('border-active');
-          });
-        })
       })
-    }
+    })
   }
 
   handleCollapsibleRow() {

data/app/pb_kits/playbook/pb_table/styles/_collapsible.scss

@@ -37,10 +37,6 @@
     cursor: pointer;
   }
 
-  .collapsible_cell {
-    cursor: default;
-  }
-
   .no-border {
     border-bottom: none !important;
   }

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}

data/app/pb_kits/playbook/pb_table/table_body.html.erb

@@ -1,17 +1,11 @@
 <% if object.tag == "table" %>
-    <% if object.draggable_container %>
-      <%= pb_rails("draggable/draggable_container", props: { tag: "tbody", classname: object.classname, data: object.data }) do %>
-        <%= content.presence %>
-      <% end %>
-    <% else %>
-      <%= content_tag(:tbody,
-        aria: object.aria,
-        class: object.classname,
-        data: object.data,
-        id: object.id,
-        **combined_html_options) do %>
-        <%= content.presence %>
-      <% end %>
+    <%= content_tag(:tbody,
+      aria: object.aria,
+      class: object.classname,
+      data: object.data,
+      id: object.id,
+      **combined_html_options) do %>
+      <%= content.presence %>
     <% end %>
 <% else %>
     <%= content_tag(:div,

data/app/pb_kits/playbook/pb_table/table_body.rb

@@ -6,8 +6,6 @@ module Playbook
       prop :tag, type: Playbook::Props::Enum,
                  values: %w[table div],
                  default: "table"
-      prop :draggable_container, type: Playbook::Props::Boolean,
-                                 default: false
 
       def classname
         generate_classname("pb_table_tbody")

data/app/pb_kits/playbook/pb_table/table_row.html.erb

@@ -5,7 +5,6 @@
     data: object.data.merge(id: object.id),  
     id: object.id,
     'data-pb-table-collapsible-wrapper' => true,
-    'data-pb-table-collapsible-cell-id' => object.toggle_cell_id,
     **combined_html_options) do %>
     <%= content.presence %>
   <% end %>
@@ -19,19 +18,13 @@
     <% end %>  
   </tr>
 <% elsif object.tag == "table" %>
-    <% if object.draggable_item %>
-      <%= pb_rails("draggable/draggable_item", props:{ drag_id: object.drag_id, tag: "tr", classname: object.classname, data: object.data }) do %>
-        <%= content.presence %>
-      <% end %>
-    <% else %>
-      <%= content_tag(:tr,
-        aria: object.aria,
-        class: object.classname,
-        data: object.data,
-        id: object.id,
-        **combined_html_options) do %>
-        <%= content.presence %>
-      <% end %>
+    <%= content_tag(:tr,
+      aria: object.aria,
+      class: object.classname,
+      data: object.data,
+      id: object.id,
+      **combined_html_options) do %>
+      <%= content.presence %>
     <% end %>
 <% else %>
     <%= content_tag(:div,

data/app/pb_kits/playbook/pb_table/table_row.rb

@@ -13,14 +13,9 @@ module Playbook
       prop :collapsible_content
       prop :collapsible_side_highlight, type: Playbook::Props::Boolean,
                                         default: true
-      prop :toggle_cell_id, type: Playbook::Props::String
-      prop :draggable_item, type: Playbook::Props::Boolean,
-                            default: false
-      prop :drag_id, type: Playbook::Props::String,
-                     default: nil
 
       def classname
-        generate_classname("pb_table_row_kit", side_highlight_class) + tag_class + collapsible_cell_class
+        generate_classname("pb_table_row_kit", side_highlight_class) + tag_class
       end
 
       def side_highlight_class
@@ -30,14 +25,6 @@ module Playbook
       def tag_class
         " pb_table_tr"
       end
-
-      def collapsible_cell_class
-        if toggle_cell_id
-          " collapsible_cell"
-        else
-          ""
-        end
-      end
     end
   end
 end