playbook_ui 14.13.0.pre.alpha.play1753updatepbcontenttags6065 → 14.13.0.pre.alpha.play1851checkboxreacthook6083

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2d0764cca01762f5a87e25a2e3c174e0c5d1bd324f082cc4d98d67faa32e32e0
-  data.tar.gz: d5ce3ad7b56b369cd89fba8e415f75586caa94e21e3e43766a4685e343e982ed
+  metadata.gz: bb3a9002f9a8764511848a3c3d772fadf25f5f54630059aa06c9a4369335179d
+  data.tar.gz: a6a46c5bfdb0e7a0a93957852210185c6e9eece5faa63454c1815b5b75e6c63d
 SHA512:
-  metadata.gz: 26d1187b6cb391a565ce62290f85ff4368b64f4ce78e7d4220c514ab799b7f03f56aad13fa0f12aea8115ee0784302e71f052c6ce6d365fb3894ab1f5efd7ecf
-  data.tar.gz: 0fac8140f1032b96f606209d9e852ad0b79a2cbe91611c88856e921e646cd48766357ab4dc3a17d00e8c55d23824f3a75450f01c516122ba1324f538fd0ce836
+  metadata.gz: 9224cd88c0f6759480689ee6637464d0a05ff61e69093a1f834f5b1a0477543883204e81b0cce35d67b0ca66b6d00bfc2bcd2f5302e15bd4c008d21c2e3fc352
+  data.tar.gz: 70771f474c26f416e72a5906f06e4b8b36109daa5d492bc21a5e2a8b8cbb0ac49eb7e4c68ab36a6952dbc8d3be99db7d835390987d8ccc647304b61c8d0cebce

data/app/pb_kits/playbook/pb_checkbox/_checkbox.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react'
+import React, { useEffect, useRef, forwardRef } from 'react'
 import Body from '../pb_body/_body'
 import Icon from '../pb_icon/_icon'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
@@ -24,7 +24,7 @@ type CheckboxProps = {
   value?: string,
 } & GlobalProps
 
-const Checkbox = (props: CheckboxProps): React.ReactElement => {
+const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => {
   const {
     aria = {},
     checked = false,
@@ -44,7 +44,15 @@ const Checkbox = (props: CheckboxProps): React.ReactElement => {
     value = '',
   } = props
 
-  const checkRef = useRef(null)
+  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
+    }
+  }
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
@@ -56,9 +64,9 @@ const Checkbox = (props: CheckboxProps): React.ReactElement => {
   )
 
   useEffect(() => {
-    if (checkRef.current) {
-      checkRef.current.checked = checked
-      checkRef.current.indeterminate = indeterminate
+    if (internalRef.current) {
+      internalRef.current.checked = checked
+      internalRef.current.indeterminate = indeterminate
     }
   }, [indeterminate, checked])
 
@@ -72,7 +80,7 @@ const Checkbox = (props: CheckboxProps): React.ReactElement => {
         disabled={disabled}
         name={name}
         onChange={onChange}
-        ref={checkRef}
+        ref={setRefs}
         tabIndex={tabIndex}
         type="checkbox"
         value={value}
@@ -119,6 +127,7 @@ const Checkbox = (props: CheckboxProps): React.ReactElement => {
       </Body>
     </label>
   )
-}
+})
 
+Checkbox.displayName = "Checkbox"
 export default Checkbox

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

@@ -106,3 +106,19 @@ 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/_checkbox_react_hook.jsx

@@ -0,0 +1,69 @@
+import React, { useState } from "react"
+import { useForm } from "react-hook-form"
+import { Button, Checkbox, Flex, Body } from "playbook-ui"
+
+const CheckboxReactHook = () => {
+  const { register, handleSubmit } = useForm({
+    defaultValues: {
+      Small: false,
+      Medium: false,
+      Large: false,
+    },
+  })
+
+  const [submittedData, setSubmittedData] = useState({
+    Small: false,
+    Medium: false,
+    Large: false,
+  })
+
+  const onSubmit = (data) => {
+    setSubmittedData(data)
+  }
+
+  return (
+    <Flex orientation="row">
+      <Flex align="start"
+          orientation="column"
+          paddingRight="lg"
+      >
+        <form onSubmit={handleSubmit(onSubmit)}>
+          <Checkbox padding="xs"
+              text="Small"
+              {...register("Small")}
+          />
+          <br />
+          <Checkbox padding="xs"
+              text="Medium"
+              {...register("Medium")}
+          />
+          <br />
+          <Checkbox padding="xs"
+              text="Large"
+              {...register("Large")}
+          />
+          <br />
+          <Button htmlType="submit"
+              marginTop="sm"
+              text="submit"
+          />
+        </form>
+      </Flex>
+      <Flex align="start"
+          orientation="column"
+      >
+        <Body padding="xs"
+            text={`Small: ${submittedData.Small ? "true" : "false"}`}
+        />
+        <Body padding="xs"
+            text={`Medium: ${submittedData.Medium ? "true" : "false"}`}
+        />
+        <Body padding="xs"
+            text={`Large: ${submittedData.Large ? "true" : "false"}`}
+        />
+      </Flex>
+    </Flex>
+  )
+}
+
+export default CheckboxReactHook

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_react_hook.md

@@ -0,0 +1 @@
+You can pass react hook props to the checkbox kit.

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

@@ -11,6 +11,7 @@ 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
@@ -21,4 +22,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,5 +1,6 @@
 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_picker/_date_picker.tsx

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

data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.html.erb

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

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

@@ -1,9 +1,15 @@
   <% 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 %>
-        <%= pb_content_tag( object.tag,
-            href: object.link && object.link,
-            target: object.link && object.target
+        <%= 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
           ) do %>
           <% if object.image_url %>
             <%= pb_rails("image", props: { url: object.image_url, classname: "pb_nav_img_wrapper_collapsible" }) %>
@@ -14,16 +20,22 @@
           <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 %>
-    <%= pb_content_tag( object.tag,
-        href: object.link && object.link,
-        target: object.link && object.target
+    <%= 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
       ) 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,7 +1,12 @@
-<%= pb_content_tag(:nav) do %>
+<%= content_tag(:nav,
+    aria: object.aria,
+    class: object.classname,
+    data: object.data,
+    id: object.id,
+    **combined_html_options) do %>
   <% if object.title %>
-    <%= pb_content_tag do %>
-      <%= pb_content_tag(:a) do %>
+    <%= content_tag(:div, class: "pb_nav_list_title") do %>
+      <%= content_tag(:a, class: "pb_nav_list_item_link_text", href: object.link) 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,2 +1,7 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    aria: object.aria.merge!(label: object.status),
+    class: object.classname,
+    data: object.data,
+    id: object.id,
+    **combined_html_options) do %>
 <% end %>

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

@@ -1,4 +1,9 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+  aria: object.aria,
+  class: object.classname,
+  data: object.data,
+  id: object.id,
+  **combined_html_options) 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_selectable_rows.html.erb

@@ -0,0 +1,96 @@
+<% checkboxes = [
+  { name: 'Coffee', id: 'coffee', checked: false },
+  { name: 'Ice Cream', id: 'ice-cream', checked: false },
+  { name: 'Chocolate', id: 'chocolate', checked: true }
+] %>
+
+<%= pb_rails("flex", props: { justify: "end", margin_bottom: "sm" }) do %>
+    <%= pb_rails("flex", props: { justify: "end", margin_bottom: "sm" }) do %>
+        <%= pb_rails("button", props: { text: "Delete", id: "delete-button" }) %>
+    <% end %>
+<% end %>
+
+<%= pb_rails("table", props: { size: "sm" }) do %>
+    <%= pb_rails("table/table_head") do %>
+        <%= pb_rails("table/table_row") do %>
+            <%= pb_rails("table/table_header") do %>
+                <%= pb_rails("checkbox", props: {
+                    checked: true,
+                    value: "checkbox-value",
+                    name: "main-checkbox-selectable",
+                    indeterminate: true,
+                    id: "checkbox-selectable"
+                }) %>
+            <% end %>
+            <%= 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" }) %>
+        <% end %>
+    <% end %>
+    <%= pb_rails("table/table_body") do %>
+        <% checkboxes.each_with_index do |checkbox, index| %>
+            <%= pb_rails("table/table_row") do %>
+                <%= pb_rails("table/table_cell") do %>
+                    <%= pb_rails("checkbox", props: { checked: checkbox[:checked], id: "#{checkbox[:id]}-selectable-checkbox", name: "#{checkbox[:id]}-selectable-checkbox", on_change: "updateCheckboxes(#{index})", value: "check-box value" }) %>
+                <% end %>
+                <%= pb_rails("table/table_cell") do %>
+                    <%= pb_rails("image", props: { alt: "picture of a misty forest", size: "xs", url: "https://unsplash.it/500/400/?image=634" }) %>
+                <% end %>
+                <%= 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" }) %>
+            <% end %>
+        <% end %>
+    <% end %>
+<% end %>
+
+<script>
+    document.addEventListener('DOMContentLoaded', function() {
+        const mainCheckboxWrapper = document.getElementById('checkbox-selectable');
+        const mainCheckbox = document.getElementsByName("main-checkbox-selectable")[0];
+        const childCheckboxes = document.querySelectorAll('input[type="checkbox"][id$="selectable-checkbox"]');
+        const deleteButton = document.getElementById('delete-button');
+
+        const updateDeleteButton = () => {
+            const anyChecked = Array.from(childCheckboxes).some(checkbox => checkbox.checked);
+            deleteButton.style.display = anyChecked ? 'block' : 'none';
+        };
+    
+        const updateMainCheckbox = () => {
+          // Count the number of checked child checkboxes
+          const checkedCount = Array.from(childCheckboxes).filter(cb => cb.checked).length;
+          // Determine if the main checkbox should be in an indeterminate state
+          const indeterminate = checkedCount > 0 && checkedCount < childCheckboxes.length;
+          
+          // Set the main checkbox states
+          mainCheckbox.indeterminate = indeterminate;
+          mainCheckbox.checked = checkedCount > 0;
+    
+          // Determine the icon class to add and remove based on the number of checked checkboxes
+          const iconClassToAdd = checkedCount === 0 ? 'pb_checkbox_checkmark' : 'pb_checkbox_indeterminate';
+          const iconClassToRemove = checkedCount === 0 ? 'pb_checkbox_indeterminate' : 'pb_checkbox_checkmark';
+          
+          // Add and remove the icon class to the main checkbox wrapper
+          mainCheckboxWrapper.querySelector('[data-pb-checkbox-icon-span]').classList.add(iconClassToAdd);
+          mainCheckboxWrapper.querySelector('[data-pb-checkbox-icon-span]').classList.remove(iconClassToRemove);
+          
+          // Toggle the visibility of the checkbox icon based on the indeterminate state
+          mainCheckboxWrapper.getElementsByClassName("indeterminate_icon")[0].classList.toggle('hidden', !indeterminate);
+          mainCheckboxWrapper.getElementsByClassName("check_icon")[0].classList.toggle('hidden', indeterminate);
+
+          updateDeleteButton();
+        };
+    
+        mainCheckbox.addEventListener('change', function() {
+          childCheckboxes.forEach(cb => cb.checked = this.checked);
+          updateMainCheckbox();
+        });
+    
+        childCheckboxes.forEach(cb => {
+          cb.addEventListener('change', updateMainCheckbox);
+        });
+    });
+</script>

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

@@ -0,0 +1,101 @@
+import React, { useState } from 'react'
+import { Table, Checkbox, Image, Flex, Button } from 'playbook-ui'
+
+const TableWithSelectableRows = (props) => {
+    const [checkboxes, setCheckboxes] = useState([
+        { name: "Coffee", checked: false },
+        { name: "Ice Cream", checked: false },
+        { name: "Chocolate", checked: true },
+    ]);
+
+    const isAllChecked = !checkboxes.find((checkbox) => !checkbox.checked);
+    const isNoneChecked = !checkboxes.find((checkbox) => checkbox.checked);
+
+    const processCheckboxes = (checked) =>
+        checkboxes.slice(0).map((checkbox) => {
+            checkbox.checked = checked;
+            return checkbox;
+        });
+
+    const onToggleAll = () => {
+        setCheckboxes(
+            isNoneChecked ? processCheckboxes(true) : processCheckboxes(false)
+        );
+    };
+
+    const updateCheckboxes = (checkbox, index) => {
+        const newCheckboxes = checkboxes.slice(0);
+        newCheckboxes[index].checked = !checkbox.checked;
+        setCheckboxes(newCheckboxes);
+    };
+
+    return (
+        <>
+            <Flex
+                justify="end"
+                marginBottom="sm"
+            >
+                {!isNoneChecked && (
+                    <Flex
+                        justify="end"
+                        marginBottom="sm"
+                    >
+                        <Button>Delete</Button>
+                    </Flex>
+                )}
+            </Flex>
+            <Table
+                size="sm"
+                {...props}
+            >
+                <Table.Head>
+                    <Table.Row>
+                        <Table.Header>
+                            <Checkbox
+                                checked={isAllChecked}
+                                indeterminate={!isAllChecked && !isNoneChecked}
+                                name="checkbox-name"
+                                onChange={onToggleAll}
+                                value="check-box value"
+                            />
+                        </Table.Header>
+                        <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.Row>
+                </Table.Head>
+                <Table.Body>
+                    {checkboxes.map((checkbox, index) => (
+                        <Table.Row key={index}>
+                            <Table.Cell>
+                                <Checkbox
+                                    checked={checkbox.checked}
+                                    name={checkbox.name}
+                                    onChange={() => {
+                                        updateCheckboxes(checkbox, index);
+                                    }}
+                                    value="check-box value"
+                                />
+                            </Table.Cell>
+                            <Table.Cell>
+                                <Image
+                                    alt="picture of a misty forest"
+                                    size="xs"
+                                    url="https://unsplash.it/500/400/?image=634"
+                                />
+                            </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.Row>
+                    ))}
+                </Table.Body>
+            </Table>
+        </>
+    )
+}
+
+export default TableWithSelectableRows

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

@@ -0,0 +1 @@
+Use the Checkbox kit with the Table to achieve the selectable row functionality seen here.

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

@@ -35,6 +35,7 @@ examples:
     - 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
@@ -71,4 +72,5 @@ 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_clickable_rows: Table with Clickable Rows
+    - table_with_selectable_rows: Table with Selectable Rows

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

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