playbook_ui 14.13.0.pre.alpha.play1834depupdatesass6024 → 14.13.0.pre.alpha.play1852reacthookformsupportradio6153

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

@@ -1,6 +1,4 @@
-/*eslint-disable react/no-multi-comp */
-
-import React, { forwardRef, useRef } from 'react'
+import React, { useRef, forwardRef } from 'react'
 import Body from '../pb_body/_body'
 import Flex from '../pb_flex/_flex'
 import classnames from 'classnames'
@@ -24,10 +22,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 = ({
+const Radio = forwardRef<HTMLInputElement, RadioProps>(({
   aria = {},
   alignment,
   children,
@@ -43,110 +41,124 @@ const Radio = ({
   name = 'radio_name',
   text = 'Radio Text',
   value = 'radio_text',
+  checked = false,
   onChange = () => { void 0 },
   ...props
-}: RadioProps, ref: any) => {
-  const radioRef = useRef(null);
+}, 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)
 
-  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 = (props: RadioProps & any) => {
-    if (children && customChildren == false)
-      return (children)
+  const displayRadio = (inputProps: any) => {
+    if (children && customChildren === false)
+      return children
     else
-    return (
-    <input
-        disabled={disabled}
-        id={id}
-        name={name}
-        onChange={onChange}
-        ref={ref}
-        text={text}
-        type="radio"
-        value={value}
-        {...props}
-    />
-  )}
+      return (
+        <input
+            defaultChecked={checked}
+            disabled={disabled}
+            id={id}
+            name={name}
+            onChange={onChange}
+            ref={setRefs}
+            type="radio"
+            value={value}
+            {...inputProps}
+        />
+      )
+  }
 
   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')
       ) {
-        radioRef.current?.click();
+        internalRef.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={radioRef}
+            ref={setRefs}
             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>
+  )
+})
 
-export default forwardRef(Radio);
+Radio.displayName = "Radio"
+export default Radio

data/app/pb_kits/playbook/pb_radio/docs/_radio_react_hook.jsx

@@ -0,0 +1,60 @@
+import React from "react"
+import { useForm } from "react-hook-form"
+import { Radio, Flex, Body } from "playbook-ui"
+
+const RadioReactHook = () => {
+  const { register, watch } = useForm({
+    defaultValues: {
+      size: "Small",
+    },
+  })
+
+  const selectedSize = watch("size", "Small")
+
+  return (
+    <Flex orientation="row">
+      <Flex
+          align="start"
+          orientation="column"
+          paddingRight="lg"
+        >
+        <Radio
+            alignment="left"
+            label="Small"
+            marginBottom='sm'
+            name="size"
+            value="Small"
+            {...register("size")}
+        />
+        <br />
+        <Radio
+            alignment="left"
+            label="Medium"
+            marginBottom='sm'
+            name="size"
+            value="Medium"
+            {...register("size")}
+        />
+        <br />
+        <Radio
+            alignment="left"
+            label="Large"
+            marginBottom='sm'
+            name="size"
+            value="Large"
+            {...register("size")}
+        />
+      </Flex>
+      <Flex
+          align="start"
+          orientation="column"
+      >
+        <Body
+            text={`Selected Size: ${selectedSize}`}
+        />
+      </Flex>
+    </Flex>
+  )
+}
+
+export default RadioReactHook

data/app/pb_kits/playbook/pb_radio/docs/_radio_react_hook.md

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

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

@@ -16,6 +16,7 @@ examples:
   - radio_alignment: Alignment
   - radio_disabled: Disabled
   - radio_custom_children: Custom Children
+  - radio_react_hook: React Hook Form
 
   swift:
   - radio_default_swift: Default
@@ -26,4 +27,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,3 +4,4 @@ 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.test.js

@@ -86,3 +86,19 @@ 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_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/_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/_table_with_collapsible_with_custom_click.html.erb

@@ -0,0 +1,51 @@
+<% content = capture do %>
+    <%= pb_rails("card", props: { border_none: true, border_radius: "none", padding: "md" }) do %>
+        <%= pb_rails("body", props: { text: "Nested content inside a Table Row" }) %>
+    <% 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", 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: { collapsible: true, collapsible_content: content, collapsible_side_highlight: true, toggle_cell_id: "cell-1", id: "5" }) 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", id: "cell-1", cursor: "pointer" }) do %>
+            <%= pb_rails("icon", props: { icon: "chevron-down", fixed_width: true, color: "primary" }) %>
+          <% end %>
+      <% end %>
+     <%= pb_rails("table/table_row", props: { collapsible: true, collapsible_content: content, collapsible_side_highlight: true, toggle_cell_id: "cell-2", id: "6" }) 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", id: "cell-2", cursor: "pointer" }) do %>
+            <%= pb_rails("icon", props: { icon: "chevron-down", fixed_width: true, color: "primary" }) %>
+          <% end %>
+      <% end %>
+    <%= pb_rails("table/table_row", props: { collapsible: true, collapsible_content: content, collapsible_side_highlight: true, toggle_cell_id: "cell-3", id: "7" }) 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", id: "cell-3", cursor: "pointer" }) do %>
+            <%= pb_rails("icon", props: { icon: "chevron-down", fixed_width: true, color: "primary" }) %>
+          <% end %>
+      <% end %>
+  <% end %>
+<% end %>
+  

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

@@ -0,0 +1,2 @@
+When using the `collapsible` prop, the default functionality is that the entire Row will be clickable to toggle the Row. To limit the click event to a specific Table Cell, you can use the `toggle_cell_id` prop to pass in the id of the Cell you want to use as the trigger.
+__NOTE__: `toggle_cell_id` and the `id` on the Cell you want to use as the trigger MUST be the same. Please also be aware that you will need to pass in an `id` to any Table Rows you want to be collapsible. Make sure every `id` is unique if you are using multipe collapsibles.

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>