playbook_ui 14.20.0 → 14.21.0.pre.rc.1

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate.html.erb

@@ -9,11 +9,10 @@
     <tr>
       <th>
         <%= pb_rails("checkbox", props: {
-          checked: true,
           text: "Uncheck All",
           value: "checkbox-value",
           name: "main-checkbox",
-          indeterminate: true,
+          indeterminate_main: true,
           id: "indeterminate-checkbox"
         }) %>
       </th>
@@ -30,55 +29,10 @@
             value: checkbox[:id],
             name: "#{checkbox[:id]}-indeterminate-checkbox",
             id: "#{checkbox[:id]}-indeterminate-checkbox",
+            indeterminate_parent: "indeterminate-checkbox",
           }) %>
         </td>
       </tr>
     <% end %>
   </tbody>
 <% end %>
-
-<script>
-  document.addEventListener('DOMContentLoaded', function() {
-    const mainCheckboxWrapper = document.getElementById('indeterminate-checkbox');
-    const mainCheckbox = document.getElementsByName("main-checkbox")[0];
-    const childCheckboxes = document.querySelectorAll('input[type="checkbox"][id$="indeterminate-checkbox"]');
-
-    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 main checkbox label based on the number of checked checkboxes
-      const text = checkedCount === 0 ? 'Check All' : 'Uncheck All';
-
-      // 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';
-
-      // Update main checkbox label
-      mainCheckboxWrapper.getElementsByClassName('pb_body_kit')[0].textContent = text;
-      
-      // 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);
-    };
-
-    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_checkbox/docs/_checkbox_indeterminate_rails.md

@@ -0,0 +1 @@
+If you want to use indeterminate, "check/uncheck all" checkboxes, add `indeterminate_main: true` and an `id` to the main checkbox. Then, add an `indeterminate_parent` prop with the main checkbox's `id` to the children checkboxes.

data/app/pb_kits/playbook/pb_checkbox/index.js

@@ -0,0 +1,56 @@
+import PbEnhancedElement from "../pb_enhanced_element"
+
+const INDETERMINATE_MAIN_CHECKBOX_SELECTOR = "[data-pb-checkbox-indeterminate-main='true']"
+
+export default class PbCheckbox extends PbEnhancedElement {
+  static get selector() {
+    return INDETERMINATE_MAIN_CHECKBOX_SELECTOR
+  }
+
+  connect() {
+    const mainCheckboxWrapper = this.element;
+    const mainCheckbox = mainCheckboxWrapper.querySelector('input')
+    const childCheckboxes = document.querySelectorAll(`[data-pb-checkbox-indeterminate-parent="${this.element.id}"] input[type="checkbox"]`);
+
+    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 main checkbox label based on the number of checked checkboxes
+      const text = checkedCount === 0 ? 'Check All' : 'Uncheck All';
+
+      // 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';
+
+      // Update main checkbox label
+      mainCheckboxWrapper.getElementsByClassName('pb_body_kit')[0].textContent = text;
+      
+      // 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);
+    };
+
+    // Set indeterminate icon on main checkbox if initial children checkboxes are checked
+    updateMainCheckbox();
+
+    this.element.querySelector('input').addEventListener('change', function() {
+      childCheckboxes.forEach(cb => cb.checked = this.checked);
+      updateMainCheckbox();
+    });
+
+    childCheckboxes.forEach(cb => {
+      cb.addEventListener('change', updateMainCheckbox);
+    });
+  }
+}

data/app/pb_kits/playbook/pb_dropdown/dropdown.test.jsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { render, screen } from "../utilities/test-utils"
+import { render, screen, fireEvent } from "../utilities/test-utils"
 
 import { Dropdown, Icon, IconCircle } from 'playbook-ui'
 
@@ -263,4 +263,110 @@ test("searchbar prop to render TextInput in container", () => {
   const kit = screen.getByTestId(testId)
   const searchbar = kit.querySelector('.pb_text_input_kit')
   expect(searchbar).toBeInTheDocument()
-})
+})
+
+test("MultiSelect prop to allow multiple selections + add correct Form Pills", () => {
+  render(
+    <Dropdown 
+        data={{ testid: testId }} 
+        multiSelect 
+        options={options} 
+    />
+ );
+
+  const kit = screen.getByTestId(testId);
+  const option = Array.from(kit.querySelectorAll(".pb_dropdown_option_list"));
+  fireEvent.click(option[0]); // Select first option
+  fireEvent.click(option[1]); // Select second option
+  const formPills = kit.querySelectorAll(".pb_form_pill_kit_primary");
+  expect(formPills.length).toBe(2);
+  expect(formPills[0]).toHaveTextContent("United States");
+  expect(formPills[1]).toHaveTextContent("Canada");
+});
+
+ test("hides each selected option from the dropdown", () => {
+
+    render(
+      <Dropdown 
+          data={{ testid: testId }} 
+          multiSelect 
+          options={options} 
+      />
+    );
+
+  const kit = screen.getByTestId(testId);
+  const option = Array.from(kit.querySelectorAll(".pb_dropdown_option_list"));
+  const firstOpt = options[0].label
+  fireEvent.click(option[0]);
+  const option2 = Array.from(kit.querySelectorAll(".pb_dropdown_option_list"));
+  expect(option2[0]).not.toHaveTextContent(firstOpt)
+  })
+
+test("renders form pills inside trigger", () => {
+      render(
+        <Dropdown 
+            data={{ testid: testId }} 
+            multiSelect 
+            options={options} 
+        />
+      );
+
+  const kit = screen.getByTestId(testId)
+  const option = kit.querySelector('.pb_dropdown_option_list')
+  fireEvent.click(option)
+  const formPill = kit.querySelector(".pb_form_pill_kit_primary")
+  expect(formPill).toBeInTheDocument()
+  })
+
+test("multiSelect and autocomplete to work together", () => {
+  render (
+    <Dropdown
+        autocomplete
+        data={{ testid: testId }}
+        multiSelect
+        options={options}
+    />   
+  )
+
+  const kit = screen.getByTestId(testId)
+  const input = kit.querySelector('.dropdown_input')
+  expect(input).toBeInTheDocument()
+    const option = kit.querySelector('.pb_dropdown_option_list')
+  fireEvent.click(option)
+  const formPill = kit.querySelector(".pb_form_pill_kit_primary")
+  expect(formPill).toBeInTheDocument()
+})
+
+test("renders form pills with size and color", () => {
+      render(
+        <Dropdown 
+            data={{ testid: testId }} 
+            formPillProps={{ size: "small", color: "neutral" }}
+            multiSelect 
+            options={options} 
+        />
+      );
+
+  const kit = screen.getByTestId(testId)
+  const option = kit.querySelector('.pb_dropdown_option_list')
+  fireEvent.click(option)
+  const formPill = kit.querySelector(".pb_form_pill_kit_neutral")
+  expect(formPill).toBeInTheDocument()
+  expect(formPill).toHaveClass("small")
+  })
+
+test("defaultValue works with multiSelect", () => {
+    render(
+      <Dropdown
+          data={{ testid: testId }}
+          defaultValue={[options[0], options[2]]}
+          multiSelect
+          options={options}
+      />
+    )
+    const kit = screen.getByTestId(testId)
+    expect(kit.querySelectorAll(".pb_form_pill_kit_primary")).toHaveLength(2)
+    const option2 = Array.from(kit.querySelectorAll(".pb_dropdown_option_list"));
+    const firstOpt = options[0].label
+    expect(option2[0]).not.toHaveTextContent(firstOpt)
+  })

data/app/pb_kits/playbook/pb_dropdown/index.js

@@ -115,6 +115,7 @@ export default class PbDropdown extends PbEnhancedElement {
 
   handleSearch(term = "") {
     const lcTerm = term.toLowerCase();
+    let hasMatch = false
     this.element.querySelectorAll(OPTION_SELECTOR).forEach((opt) => {
       //make it so that if the option is selected, it will not show up in the search results
       if (this.isMultiSelect && this.selectedOptions.has(opt.dataset.dropdownOptionLabel)) {
@@ -128,9 +129,32 @@ export default class PbDropdown extends PbEnhancedElement {
       // hide or show option
       const match = label.includes(lcTerm);
       opt.style.display = match ? "" : "none";
+      if (match) hasMatch = true
     });
 
     this.adjustDropdownHeight();
+
+    this.removeNoOptionsMessage()
+    if (!hasMatch) {
+      this.showNoOptionsMessage()
+    }
+  }
+
+  showNoOptionsMessage() {
+    if (this.element.querySelector(".dropdown_no_options")) return;
+
+    const noOptionElement = document.createElement("div");
+    noOptionElement.className = "pb_body_kit_light dropdown_no_options pb_item_kit p_xs display_flex justify_content_center";
+    noOptionElement.textContent = "no option";
+
+    this.target.appendChild(noOptionElement);
+  }
+
+  removeNoOptionsMessage() {
+    const existing = this.element.querySelector(".dropdown_no_options");
+    if (existing) {
+      existing.remove();
+    }
   }
 
   handleOptionClick(event) {

data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx

@@ -33,6 +33,7 @@ type PhoneNumberInputProps = {
   onChange?: (e: React.FormEvent<HTMLInputElement>) => void,
   onValidate?: Callback<boolean, void>,
   onlyCountries: string[],
+  excludeCountries: string[],
   preferredCountries?: string[],
   required?: boolean,
   value?: string,
@@ -88,6 +89,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
     },
     onValidate = () => null,
     onlyCountries = [],
+    excludeCountries = [],
     required = false,
     preferredCountries = [],
     value = "",
@@ -234,6 +236,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
   const fallbackCountry =
     preferredCountries.length > 0 ? preferredCountries[0] :
       onlyCountries.length > 0 ? onlyCountries.sort()[0] :
+      excludeCountries.length > 0 ? excludeCountries.sort()[0] :
         "af";
 
   useEffect(() => {
@@ -244,6 +247,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
       autoInsertDialCode: false,
       initialCountry: initialCountry || fallbackCountry,
       onlyCountries,
+      excludeCountries,
       countrySearch: countrySearch,
       fixDropdownWidth: false,
       formatAsYouType: formatAsYouType,

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_exclude_countries.html.erb

@@ -0,0 +1,4 @@
+<%= pb_rails("phone_number_input", props: {
+    initial_country: 'gb',
+    exclude_countries: ['us', 'br']
+}) %>

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_exclude_countries.jsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import PhoneNumberInput from '../../pb_phone_number_input/_phone_number_input'
+
+const PhoneNumberInputExcludeCountries = (props) => (
+  <>
+    <PhoneNumberInput
+        excludeCountries={['us', 'br']}
+        id='exclude'
+        initialCountry='gb'
+        {...props}
+    />
+  </>
+)
+
+export default PhoneNumberInputExcludeCountries

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_exclude_countries.md

@@ -0,0 +1 @@
+Excluding countries removes the selected countries from the dropdown.

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_only_countries.jsx

@@ -6,7 +6,7 @@ const PhoneNumberInputOnlyCountries = (props) => (
     <PhoneNumberInput
         id='only'
         onlyCountries={['us', 'br']}
-        {...props} 
+        {...props}
     />
   </>
 )

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

@@ -4,7 +4,8 @@ examples:
   - phone_number_input_default: Default
   - phone_number_input_preferred_countries: Preferred Countries
   - phone_number_input_initial_country: Initial Country
-  - phone_number_input_only_countries: Limited Countries
+  - phone_number_input_only_countries: Only Countries
+  - phone_number_input_exclude_countries: Exclude Countries
   - phone_number_input_validation: Form Validation
   - phone_number_input_clear_field: Clearing the Input Field
   - phone_number_input_access_input_element: Accessing the Input Element
@@ -15,9 +16,9 @@ examples:
   - phone_number_input_default: Default
   - phone_number_input_preferred_countries: Preferred Countries
   - phone_number_input_initial_country: Initial Country
-  - phone_number_input_only_countries: Limited Countries
+  - phone_number_input_only_countries: Only Countries
+  - phone_number_input_exclude_countries: Exclude Countries
   - phone_number_input_validation: Form Validation
   - phone_number_input_format: Format as You Type
   - phone_number_input_hidden_inputs: Hidden Inputs
   - phone_number_input_country_search: Country Search
-  

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

@@ -2,6 +2,7 @@ export { default as PhoneNumberInputDefault } from './_phone_number_input_defaul
 export { default as PhoneNumberInputPreferredCountries } from './_phone_number_input_preferred_countries'
 export { default as PhoneNumberInputInitialCountry } from './_phone_number_input_initial_country'
 export { default as PhoneNumberInputOnlyCountries } from './_phone_number_input_only_countries'
+export { default as PhoneNumberInputExcludeCountries } from './_phone_number_input_exclude_countries'
 export { default as PhoneNumberInputValidation } from './_phone_number_input_validation'
 export { default as PhoneNumberInputClearField } from './_phone_number_input_clear_field'
 export { default as PhoneNumberInputAccessInputElement } from './_phone_number_input_access_input_element'

data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.rb

@@ -15,6 +15,8 @@ module Playbook
                   default: ""
       prop :only_countries, type: Playbook::Props::Array,
                             default: []
+      prop :exclude_countries, type: Playbook::Props::Array,
+                               default: []
       prop :preferred_countries, type: Playbook::Props::Array,
                                  default: []
       prop :error, type: Playbook::Props::String,
@@ -44,6 +46,7 @@ module Playbook
           label: label,
           name: name,
           onlyCountries: only_countries,
+          excludeCountries: exclude_countries,
           preferredCountries: preferred_countries,
           required: required,
           value: value,

data/app/pb_kits/playbook/pb_select/docs/_select_custom_select_subheaders.html.erb

@@ -0,0 +1,12 @@
+<%= pb_rails("select", props: { label: "Favorite Animal" }) do %>
+  <select name="animal" id="animal">
+    <optgroup label="Mammal">
+      <option value="1">Cat</option>
+      <option value="2">Dog</option>
+    </optgroup>
+    <optgroup label="Amphibian">
+      <option value="3">Frog</option>
+      <option value="4">Salamander</option>
+    </optgroup>
+  </select>
+<% end %>

data/app/pb_kits/playbook/pb_select/docs/_select_custom_select_subheaders.jsx

@@ -0,0 +1,31 @@
+import React from 'react'
+
+import Select from '../_select'
+
+const SelectCustomSelectSubheaders = (props) => {
+  return (
+    <div>
+      <Select
+          label="Favorite Animal"
+          {...props}
+      >
+        <select
+            id="animal"
+            name="animal"
+            {...props}
+        >
+          <optgroup label="Mammal">
+            <option value="1">{'Cat'}</option>
+            <option value="2">{'Dog'}</option>
+          </optgroup>
+          <optgroup label="Amphibian">
+            <option value="3">{'Frog'}</option>
+            <option value="4">{'Salamander'}</option>
+          </optgroup>
+        </select>
+      </Select>
+    </div>
+  )
+}
+
+export default SelectCustomSelectSubheaders

data/app/pb_kits/playbook/pb_select/docs/_select_custom_select_subheaders.md

@@ -0,0 +1 @@
+To create a select with non-selectable subheaders, use a Custom Select component to render a native `<select>` containing `<optgroup>` elements. The [optgroup HTML element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/optgroup) groups related options under a non-selectable label in the dropdown.

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

@@ -8,6 +8,7 @@ examples:
   - select_required: Required Select Field
   - select_value_text_same: Equal option value and value text
   - select_custom_select: Custom Select
+  - select_custom_select_subheaders: Custom Select Subheaders
   - select_error: Select w/ Error
   - select_inline: Select Inline
   - select_inline_show_arrow: Select Inline (Always Show Arrow)
@@ -25,6 +26,7 @@ examples:
   - select_required: Required Select Field
   - select_value_text_same: Equal option value and value text
   - select_custom_select: Custom Select
+  - select_custom_select_subheaders: Custom Select Subheaders
   - select_error: Select w/ Error
   - select_inline: Select Inline
   - select_inline_show_arrow: Select Inline (Always Show Arrow)

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

@@ -11,3 +11,4 @@ export { default as SelectInlineShowArrow } from './_select_inline_show_arrow.js
 export { default as SelectInlineCompact } from './_select_inline_compact.jsx'
 export { default as SelectMultiple } from './_select_multiple.jsx'
 export { default as SelectReactHook } from './_select_react_hook.jsx'
+export { default as SelectCustomSelectSubheaders } from './_select_custom_select_subheaders.jsx'