playbook_ui 14.20.0 → 14.21.0.pre.alpha.PLAY2167advtablenitrorowborderdoubling8097

data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx

@@ -25,6 +25,7 @@ type DropdownProps = {
     blankSelection?: string;
     children?: React.ReactChild[] | React.ReactChild | React.ReactElement[];
     className?: string;
+    closeOnSelection?: boolean;
     formPillProps?: GenericObject;
     dark?: boolean;
     data?: { [key: string]: string };
@@ -55,6 +56,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
         blankSelection = '',
         children,
         className,
+        closeOnSelection = true,
         dark = false,
         data = {},
         defaultValue = {},
@@ -152,7 +154,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
         if (!multiSelect) return optionsWithBlankSelection;
         return optionsWithBlankSelection.filter((option: GenericObject) => !selectedArray.some((sel) => sel.label === option.label));
     }, [optionsWithBlankSelection, selectedArray, multiSelect]);
-    
+
     const filteredOptions = useMemo(() => {
           return availableOptions.filter((opt: GenericObject) =>
             String(opt.label).toLowerCase().includes(filterItem.toLowerCase())
@@ -192,12 +194,18 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
                        return next;
                    });
                    setFilterItem("");
-                   setIsDropDownClosed(true);
+                   // Only close dropdown if closeOnSelection is true
+                   if (closeOnSelection) {
+                       setIsDropDownClosed(true);
+                   }
                } else {
                    setSelected(clickedItem);
                    setFilterItem("");
-                   setIsDropDownClosed(true);
                    onSelect && onSelect(clickedItem);
+                   // Only close dropdown if closeOnSelection is true
+                   if (closeOnSelection) {
+                       setIsDropDownClosed(true);
+                   }
             }
              };
 
@@ -252,6 +260,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
             <DropdownContext.Provider
                 value={{
                     autocomplete,
+                    closeOnSelection,
                     dropdownContainerRef,
                     filteredOptions,
                     filterItem,

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_close_on_select.jsx

@@ -0,0 +1,42 @@
+import React from 'react'
+import Dropdown from '../../pb_dropdown/_dropdown'
+
+const DropdownCloseOnSelect = (props) => {
+
+  const options = [
+    {
+      label: "United States",
+      value: "United States",
+    },
+    {
+      label: "Canada",
+      value: "Canada",
+    },
+    {
+      label: "Pakistan",
+      value: "Pakistan",
+    }
+  ];
+
+
+  return (
+  <div>
+    <Dropdown
+        closeOnSelection={false}
+        label="Default"
+        options={options}
+        {...props}
+    />
+    <br />
+    <Dropdown
+        closeOnSelection={false}
+        label="Multi Select"
+        multiSelect
+        options={options}
+        {...props}
+    />
+  </div>
+  )
+}
+
+export default DropdownCloseOnSelect

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_close_on_select.md

@@ -0,0 +1 @@
+By default, the dropdown menu will close when a selection is made. You can prevent this behavior by using the `closeOnSelection` prop, which will leave the menu open after a selection is made when set to 'false'.

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

@@ -44,4 +44,6 @@ examples:
   - dropdown_clear_selection: Clear Selection
   - dropdown_separators_hidden: Separators Hidden
   - dropdown_with_external_control: useDropdown Hook
+  - dropdown_close_on_select: Close On Selection
+
 

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

@@ -19,4 +19,5 @@ export { default as DropdownMultiSelect } from './_dropdown_multi_select.jsx'
 export { default as DropdownMultiSelectDisplay } from './_dropdown_multi_select_display.jsx'
 export { default as DropdownMultiSelectWithAutocomplete } from './_dropdown_multi_select_with_autocomplete.jsx'
 export { default as DropdownMultiSelectWithDefault } from './_dropdown_multi_select_with_default.jsx'
-export { default as DropdownMultiSelectWithCustomOptions } from './_dropdown_multi_select_with_custom_options.jsx'
+export { default as DropdownMultiSelectWithCustomOptions } from './_dropdown_multi_select_with_custom_options.jsx'
+export { default as DropdownCloseOnSelect } from './_dropdown_close_on_select.jsx'

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_dropdown/subcomponents/DropdownOption.tsx

@@ -25,7 +25,7 @@ type DropdownOptionProps = {
   key?: string | number;
   option?: GenericObject;
   padding?: string;
-}  & GlobalProps;
+} & GlobalProps;
 
 const DropdownOption = (props: DropdownOptionProps) => {
   const {
@@ -56,16 +56,17 @@ const DropdownOption = (props: DropdownOptionProps) => {
 
   // When multiSelect, then if an option is selected, remove from dropdown
   const isSelected = Array.isArray(selected)
-   ? selected.some((item) => item.label === option?.label)
-   : (selected as GenericObject)?.label === option?.label;
+    ? selected.some((item) => item.label === option?.label)
+    : (selected as GenericObject)?.label === option?.label;
 
-  
   if (!isItemMatchingFilter(option) || (multiSelect && isSelected)) {
     return null;
   }
+
   const isFocused =
     focusedOptionIndex >= 0 &&
     filteredOptions[focusedOptionIndex].label === option?.label;
+
   const focusedClass = isFocused && "focused";
 
   const selectedClass = isSelected ? "selected" : "list";
@@ -91,7 +92,10 @@ const DropdownOption = (props: DropdownOptionProps) => {
         className={classes}
         id={id}
         key={key}
-        onClick= {() => handleOptionClick(option)}
+        onClick={(e) => {
+            e.stopPropagation();
+            handleOptionClick(option);
+        }}
     >
       <ListItem
           cursor="pointer"
@@ -100,12 +104,12 @@ const DropdownOption = (props: DropdownOptionProps) => {
           key={option?.label}
           padding="none"
       >
-          {children ? 
+        {children ?
           <div className="dropdown_option_wrapper">{children}</div> :
-              <Body dark={dark} 
-                  text={option?.label} 
-              />
-          }
+          <Body dark={dark}
+              text={option?.label}
+          />
+        }
       </ListItem>
     </div>
   );

data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownTrigger.tsx

@@ -44,6 +44,7 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
 
   const {
     autocomplete,
+    closeOnSelection,
     filterItem,
     handleBackspace,
     handleChange,
@@ -54,6 +55,7 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
     isInputFocused,
     multiSelect,
     selected,
+    setIsDropDownClosed,
     setIsInputFocused,
     toggleDropdown,
   } = useContext(DropdownContext);
@@ -103,11 +105,26 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
     ? placeholder
     : "Select...";
 
+  // Click handler that respects closeOnSelection
+  const handleInputClick = (e: React.MouseEvent) => {
+    e.stopPropagation(); // keep the wrapper's handler from firing
+    if (isDropDownClosed) {
+      // Always open if closed
+      setIsDropDownClosed(false);
+    } else if (!closeOnSelection) {
+      // Keep open if closeOnSelection is false
+      return;
+    } else {
+      // Default behavior - toggle
+      toggleDropdown();
+    }
+  };
+
   return (
-    <div {...ariaProps} 
-        {...dataProps} 
+    <div {...ariaProps}
+        {...dataProps}
         {...htmlProps}
-        className={classes} 
+        className={classes}
         id={id}
     >
       {
@@ -145,7 +162,7 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
                     {customDisplay ? (
                       <Flex align="center">
                         {customDisplay}
-                        <Body dark={dark} 
+                        <Body dark={dark}
                             paddingLeft={`${joinedLabels ? "xs" : "none"}`}
                         >
                           {customDisplayPlaceholder}
@@ -164,10 +181,7 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
                           <input
                               className="dropdown_input"
                               onChange={handleChange}
-                              onClick={(e) => {
-                                e.stopPropagation();// keep the wrapper’s handler from firing
-                                toggleDropdown();
-                              }}
+                              onClick={handleInputClick}
                               onFocus={() => setIsInputFocused(true)}
                               onKeyDown={(e) => {
                                  handleKeyDown(e);
@@ -186,8 +200,8 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
                         )}
                         </>
                       ) : (
-                        <Body dark={dark} 
-                            text={defaultDisplayPlaceholder} 
+                        <Body dark={dark}
+                            text={defaultDisplayPlaceholder}
                         />
                       )
                     )}
@@ -195,10 +209,7 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
                       <input
                           className="dropdown_input"
                           onChange={handleChange}
-                          onClick={(e) => {
-                            e.stopPropagation();// keep the wrapper’s handler from firing
-                            toggleDropdown();
-                          }}
+                          onClick={handleInputClick}
                           onFocus={() => setIsInputFocused(true)}
                           onKeyDown={handleKeyDown}
                           placeholder={
@@ -223,7 +234,7 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
                         onClick: (e: Event) => {e.stopPropagation();handleWrapperClick()}
                       }}
                       key={`${isDropDownClosed ? "chevron-down" : "chevron-up"}`}
-                  > 
+                  >
                   {
                     selectedArray.length > 0 && (
                       <div onClick={(e)=>{e.stopPropagation();handleBackspace()}}>

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_popover/index.ts

@@ -13,19 +13,24 @@ export default class PbPopover extends PbEnhancedElement {
   }
 
   moveTooltip() {
-    let container: HTMLElement | null;
+    let container: HTMLElement | null = document.querySelector('body');
 
     if (this.appendTo === "parent") {
-      container = this.element.parentElement;
+      container = this.element.parentElement && this.element.parentElement
     } else if (this.appendTo) {
-      container = document.querySelector(this.appendTo);
+      container = document.querySelector(this.appendTo)
     }
 
-    (container || document.body).appendChild(this.tooltip);
+    container.appendChild(this.tooltip);
   }
 
   connect() {
+    if (!this.triggerElement || !this.tooltip) {
+      console.warn('Popover requires both trigger and tooltip elements to be defined.')
+      return
+    }
     this.moveTooltip()
+
     this.popper = createPopper (this.triggerElement, this.tooltip, {
       placement: this.position as Placement,
       strategy: 'fixed',

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'