playbook_ui 14.19.0.pre.alpha.PLAY2171advancedtable7832 → 14.19.0.pre.alpha.PLAY2172homeaddressstreetundefinedstatebug7716

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 62cd720222bdb3019a6caaf80b1830c3dc79f86e5494453686ff3c2aeec6b05b
-  data.tar.gz: 39802a3cb498a500e28e4df930c6335715556321c56baf35620cc44bfa5b5710
+  metadata.gz: 179c2af6fd3485ed04bdcf2e4dba6c201309860e7ebab6bc27f3c5bdf78b4119
+  data.tar.gz: baeae47fc2895f60c94a0240255545fbd130754b0aaea296d52e06c991fa5df4
 SHA512:
-  metadata.gz: b2dc5eac17ce563cbbf67ae68d0593ba9248b4bd979119406791aad10c68629eeaf4ca65b4068fc3f262101feb541f9f8214ebea3070b60673ca0255dfce251c
-  data.tar.gz: 620f2b58b4d4be27b8cd8e3739ddd21cfa034aadd0b5779262f3d39d51279c6ba35f674a98b69bf05641dfa442ed9075f7ef33c8780549d7f89dc3e014caa0fa
+  metadata.gz: 0ee00f8f9f6c6a289588dff01b1b0d549287fad06a680bff17000ca5f9f69b5425fd91c6773a0466b92e94ac5c2339c01afba1177b7cf90434314363cd9f7310
+  data.tar.gz: 83978c3f1cc2cf665eaf15c9fc25637c67115d7956793356e72c5512f4ceac85b6354d8140d92041486abd61252caa0ac30693c1a2e61046b4af145f5b92b62e

data/app/pb_kits/playbook/pb_advanced_table/Components/TableActionBar.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useContext, useState } from "react";
+import React, { useEffect, useRef, useContext } from "react";
 
 import AdvancedTableContext from "../Context/AdvancedTableContext";
 import { buildVisibilityTree } from "../Utilities/VisibilityTree";
@@ -7,11 +7,13 @@ import Card from "../../pb_card/_card";
 import Caption from "../../pb_caption/_caption";
 import Flex from "../../pb_flex/_flex";
 import FlexItem from "../../pb_flex/_flex_item";
+import Dropdown from "../../pb_dropdown/_dropdown";
+import DropdownContainer from "../../pb_dropdown/subcomponents/DropdownContainer";
+import DropdownTrigger from "../../pb_dropdown/subcomponents/DropdownTrigger";
 import Icon from "../../pb_icon/_icon";
 import Checkbox from "../../pb_checkbox/_checkbox";
 import SectionSeparator from "../../pb_section_separator/_section_separator";
 import Tooltip from "../../pb_tooltip/_tooltip";
-import PbReactPopover from "../../pb_popover/_popover";
 
 import {
   showActionBar,
@@ -54,24 +56,11 @@ const TableActionBar: React.FC<TableActionBarProps> = ({
     const col   = table.getColumn(id);
     const show  = col.getIsVisible();
 
-    const handleVisibilityChange = () => {
-      col.toggleVisibility();
-      if (columnVisibilityControl?.onColumnVisibilityChange) {
-        const updatedVisibilityState = {
-          ...table.getAllColumns().reduce((acc: { [x: string]: any; }, col: { id: string | number; getIsVisible: () => any; }) => {
-            acc[col.id] = col.getIsVisible();
-            return acc;
-          }, {}),
-        };
-        columnVisibilityControl?.onColumnVisibilityChange(updatedVisibilityState);
-      }
-    };
-
     return (
       <Checkbox
           checked={show}
           key={id}
-          onChange={handleVisibilityChange}
+          onChange={() => col.toggleVisibility()}
           paddingBottom="xs"
           text={label}
       />
@@ -91,24 +80,16 @@ const TableActionBar: React.FC<TableActionBarProps> = ({
     const allOn    = visibleArray.every(Boolean);
     const someOn   = visibleArray.some(Boolean);
 
-       const handleGroupVisibilityChange = () => {
-      leaves.forEach((id) => table.getColumn(id).toggleVisibility(!allOn));
-      if (columnVisibilityControl?.onColumnVisibilityChange) {
-        const updatedVisibilityState = {
-          ...table.getAllColumns().reduce((acc: { [x: string]: any; }, col: { id: string | number; getIsVisible: () => any; }) => {
-            acc[col.id] = col.getIsVisible();
-            return acc;
-          }, {}),
-        };
-        columnVisibilityControl?.onColumnVisibilityChange(updatedVisibilityState);
-      }
-    };
     return (
       <>
         <Checkbox
             checked={allOn}
             indeterminate={!allOn && someOn}
-            onChange={handleGroupVisibilityChange}
+            onChange={() =>
+              leaves.forEach((id) =>
+                table.getColumn(id).toggleVisibility(!allOn),
+              )
+            }
             paddingBottom="xs"
             text={node.label}
         />
@@ -132,28 +113,7 @@ const TableActionBar: React.FC<TableActionBarProps> = ({
         hideActionBar(cardRef.current);
       }
     }
-  }, [isVisible, type]);
-
-  const [showPopover, setShowPopover] = useState(false)
-
-  const togglePopover = () => setShowPopover((prev) => !prev)
-  const handleShouldClose = (shouldClose: boolean) =>
-    setShowPopover(!shouldClose)
-
-  const popoverReference = (
-    <Tooltip 
-        placement="top" 
-        text="Column Configuration"
-    >
-      <div onClick={togglePopover}>
-      <Icon
-          color="primary"
-          cursor="pointer"
-          icon="sliders-h"
-      />
-      </div>
-    </Tooltip>
-  )
+  }, [isVisible]);
 
   return (
     <Card
@@ -179,17 +139,30 @@ const TableActionBar: React.FC<TableActionBarProps> = ({
             <FlexItem>{actions}</FlexItem>
           </>
         ) : (
-          <PbReactPopover
-              closeOnClick="outside"
-              placement="bottom-end"
-              reference={popoverReference}
-              shouldClosePopover={handleShouldClose}
-              show={showPopover}
-              zIndex={3}
+          <Dropdown
+              className="column-visibility-dropdown-wrapper"
+              options={columnDefinitions}
           >
-            <>
+            <DropdownTrigger>
+            <Tooltip 
+                placement='top' 
+                text="Column Configuration" 
+                zIndex={10}
+            >
+                <Icon 
+                    color="primary" 
+                    cursor="pointer" 
+                    icon="sliders-h" 
+                />
+            </Tooltip>
+            </DropdownTrigger>
+            <DropdownContainer
+                className="column-visibility-dropdown"
+                paddingTop="sm"
+            >
+              <>
               <Caption 
-                  paddingY="sm" 
+                  paddingBottom="sm" 
                   text="Columns Config"
                   textAlign="center" 
               />
@@ -204,7 +177,8 @@ const TableActionBar: React.FC<TableActionBarProps> = ({
                 </Flex>
               ))}
               </>
-          </PbReactPopover>
+            </DropdownContainer>
+          </Dropdown>
         )}
       </Flex>
     </Card>

data/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useState } from "react"
+import React, { useContext } from "react"
 import classnames from "classnames"
 import { flexRender, Header, Table, RowModel } from "@tanstack/react-table"
 
@@ -8,8 +8,10 @@ import { GlobalProps } from "../../utilities/globalProps"
 
 import Flex from "../../pb_flex/_flex"
 import Checkbox from "../../pb_checkbox/_checkbox"
-import SectionSeparator from "../../pb_section_separator/_section_separator"
-import PbReactPopover from "../../pb_popover/_popover";
+import Dropdown from "../../pb_dropdown/_dropdown"
+import DropdownTrigger from "../../pb_dropdown/subcomponents/DropdownTrigger"
+import DropdownOption from "../../pb_dropdown/subcomponents/DropdownOption"
+import DropdownContainer from "../../pb_dropdown/subcomponents/DropdownContainer"
 import Icon from "../../pb_icon/_icon"
 
 import { SortIconButton } from "./SortIconButton"
@@ -134,20 +136,6 @@ const isToggleExpansionEnabled =
     justifyHeader = isLeafColumn ? "end" : "center";
   }
   
-  const [showPopover, setShowPopover] = useState(false)
-
-  const togglePopover = () => setShowPopover((prev) => !prev)
-  const handleShouldClose = (shouldClose: boolean) =>
-    setShowPopover(!shouldClose)
-
-  const popoverReference = (
-      <div className="gray-icon toggle-all-icon" 
-          onClick={togglePopover}
-      >
-          <Icon icon={displayIcon(toggleExpansionIcon)[0]} />
-      </div>
-  )
-
   const handleExpandDepth = (depth: number) => {
     if (onExpandByDepthClick) {
       const flatRows = table?.getRowModel().flatRows
@@ -203,33 +191,31 @@ const isToggleExpansionEnabled =
               <ToggleIconButton onClick={handleExpandOrCollapse} />
             )}
           {isToggleExpansionEnabled && hasAnySubRows && expandByDepth && (
-
-                    <PbReactPopover
-                        closeOnClick="any"
-                        placement="bottom-start"
-                        reference={popoverReference}
-                        shouldClosePopover={handleShouldClose}
-                        show={showPopover}
-                        zIndex={3}
+              <Dropdown className="expand-by-depth-dropdown-wrapper" 
+                  options={expandByDepth}
+              >
+                <DropdownTrigger className="gray-icon toggle-all-icon">
+                  <Icon icon={displayIcon(toggleExpansionIcon)[0]} />
+                </DropdownTrigger>
+                <DropdownContainer className="expand-by-depth-dropdown">
+                  {expandByDepth.map((option:{ [key: string]: any }, index: number) => (
+                    <DropdownOption
+                        key={index}
+                        option={option}
+                        padding="none"
                     > 
-                    {expandByDepth.map((option:{ [key: string]: any }, index: number) => (
-                      <>
                       <Flex
                           alignItems="center"
-                          className="pb-advanced-table-popover-option"
-                          cursor="pointer"
                           htmlOptions={{onClick: () => {handleExpandDepth(option.depth)} }}
                           paddingX="sm"
                           paddingY="xs"
                           >
                             {option.label}
-                      </Flex>
-                      {index !== expandByDepth.length - 1 && <SectionSeparator/>}
-                      </>
-                        ))}
-                    </PbReactPopover>
-                 
-
+                          </Flex>
+                    </DropdownOption>
+                  ))}
+                </DropdownContainer>
+              </Dropdown>
             )}
 
           {isToggleExpansionEnabledLoading &&(

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss

@@ -53,6 +53,15 @@
     width: 100%;
   }
 
+  .column-visibility-dropdown-wrapper {
+    position: unset !important;
+  }
+  .column-visibility-dropdown {
+    width: unset !important;
+    right: $space_xxs;
+    text-align: left;
+  }
+
   // Virtualized table styles
   .virtualized-table-row {
     display: table !important;
@@ -150,6 +159,13 @@
         box-sizing: border-box !important;
       }
     }
+    .expand-by-depth-dropdown-wrapper {
+      position: unset !important;
+    }
+    .expand-by-depth-dropdown {
+      width: unset !important;
+      text-align: left;
+    }
   }
 
   .pb_advanced_table_body {
@@ -538,12 +554,14 @@
       background-color: $white;
       box-shadow: $shadow_deep;
     }
-
     @include advanced-table-sticky-mixin(
       $border_light,
       $white,
       lighten($silver, $opacity_7)
     );
+
+    // Apply border colors for sticky columns
+    @include apply-sticky-colors("light");
   }
 
   // Responsive Styles
@@ -809,8 +827,3 @@
     }
   }
 }
-
-// Outside of the pb_advanced_table class for popover
-.pb-advanced-table-popover-option:hover {
-  background-color: $bg_light;
-}

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_visibility_with_state.jsx

@@ -49,7 +49,6 @@ const AdvancedTableColumnVisibilityWithState = (props) => {
   const columnVisibilityControl = {
     value: columnVisibility,
     onChange: setColumnVisibility,
-    onColumnVisibilityChange: (currentState) => console.log(currentState),
   }
   return (
     <div>

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_visibility_with_state.md

@@ -1,3 +1 @@
-The `columnVisibilityControl` prop also allows for greater control over the columnVisibility state. Devs can manage state themselves by passing in `value` and `onChange` as shown.
-
-The additional `onColumnVisibilityChange` provides a callback with the current state as the argument if needed. 
+The `columnVisibilityControl` prop also allows for greater control over the columnVisibility state. Devs can manage state themselves by passing in `value` and `onChange` as shown.

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

@@ -15,7 +15,7 @@
       @include pb_body;
       border: 1px solid $border_light;
       background-color: $white;
-      min-height: 45px;
+      height: 45px;
       @media (hover: hover) {
         &:hover,
         &:active,

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

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect, forwardRef, useImperativeHandle, useMemo } from "react";
+import React, { useState, useRef, useEffect, forwardRef, useImperativeHandle } from "react";
 import classnames from "classnames";
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
 import { globalProps } from "../utilities/globalProps";
@@ -25,7 +25,6 @@ type DropdownProps = {
     blankSelection?: string;
     children?: React.ReactChild[] | React.ReactChild | React.ReactElement[];
     className?: string;
-    formPillProps?: GenericObject;
     dark?: boolean;
     data?: { [key: string]: string };
     defaultValue?: GenericObject;
@@ -34,7 +33,6 @@ type DropdownProps = {
     id?: string;
     isClosed?: boolean;
     label?: string;
-    multiSelect?: boolean;
     onSelect?: (arg: GenericObject) => null;
     options: GenericObject;
     separators?: boolean;
@@ -63,8 +61,6 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
         id,
         isClosed = true,
         label,
-        multiSelect = false,
-        formPillProps,
         onSelect,
         options,
         separators = true,
@@ -84,20 +80,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
     const [isDropDownClosed, setIsDropDownClosed, toggleDropdown] = useDropdown(isClosed);
 
     const [filterItem, setFilterItem] = useState("");
-    const initialSelected = useMemo(() => {
-      if (multiSelect) {
-        if (Array.isArray(defaultValue)) return defaultValue;
-        return defaultValue && Object.keys(defaultValue).length
-          ? [defaultValue]
-          : [];
-      }
-      return defaultValue || {};
-    }, [multiSelect, defaultValue]);
-
-    const [selected, setSelected] = useState<GenericObject | GenericObject[]>(
-      initialSelected
-    );
-
+    const [selected, setSelected] = useState<GenericObject>(defaultValue);
     const [isInputFocused, setIsInputFocused] = useState(false);
     const [hasTriggerSubcomponent, setHasTriggerSubcomponent] = useState(true);
     const [hasContainerSubcomponent, setHasContainerSubcomponent] =
@@ -110,12 +93,6 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
     const inputWrapperRef = useRef(null);
     const dropdownContainerRef = useRef(null);
 
-    const selectedArray = Array.isArray(selected)
-    ? selected
-    : selected && Object.keys(selected).length
-    ? [selected]
-    : [];
-
     const { trigger, container, otherChildren } =
         separateChildComponents(children);
 
@@ -147,23 +124,16 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
 
     const blankSelectionOption: GenericObject = blankSelection ? [{ label: blankSelection, value: "" }] : [];
     const optionsWithBlankSelection = blankSelectionOption.concat(options);
-
-    const availableOptions = useMemo(()=> {
-        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())
-          );
-        }, [availableOptions, filterItem]);
+    const filteredOptions = optionsWithBlankSelection?.filter((option: GenericObject) => {
+        const label = typeof option.label === 'string' ? option.label.toLowerCase() : option.label;
+        return String(label).toLowerCase().includes(filterItem.toLowerCase());
+    });
 
     // For keyboard accessibility: Set focus within dropdown to selected item if it exists
     useEffect(() => {
         if (!isDropDownClosed) {
             let newIndex = 0;
-            if (selected && !Array.isArray(selected) && selected.label) {
+            if (selected && selected?.label) {
                 const selectedIndex = filteredOptions.findIndex((option: GenericObject) => option.label === selected.label);
                 if (selectedIndex >= 0) {
                     newIndex = selectedIndex;
@@ -179,27 +149,12 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
         setIsDropDownClosed(false);
     };
 
-
-      const handleOptionClick = (clickedItem: GenericObject) => {
-                if (multiSelect) {
-                    setSelected((prev) => {
-                       const list = prev as GenericObject[];
-                       const exists = list.find((option) => option.value === clickedItem.value);
-                       const next = exists
-                       ? list.filter((option) => option.value !== clickedItem.value)
-                           : [...list, clickedItem];
-                   onSelect && onSelect(next);
-                       return next;
-                   });
-                   setFilterItem("");
-                   setIsDropDownClosed(true);
-               } else {
-                   setSelected(clickedItem);
-                   setFilterItem("");
-                   setIsDropDownClosed(true);
-                   onSelect && onSelect(clickedItem);
-            }
-             };
+    const handleOptionClick = (selectedItem: GenericObject) => {
+        setSelected(selectedItem);
+        setFilterItem("");
+        setIsDropDownClosed(true);
+        onSelect && onSelect(selectedItem);
+    };
 
     const handleWrapperClick = () => {
         autocomplete && inputRef?.current?.focus();
@@ -207,14 +162,9 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
     };
 
     const handleBackspace = () => {
-      if (multiSelect) {
-        setSelected([]);
-        onSelect && onSelect([]);
-      } else {
         setSelected({});
         onSelect && onSelect(null);
         setFocusedOptionIndex(-1);
-      }
     };
 
     const componentsToRender = prepareSubcomponents({
@@ -228,17 +178,12 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
     });
 
     useImperativeHandle(ref, () => ({
-      clearSelected: () => {
-        if (multiSelect) {
-          setSelected([]);
-          onSelect && onSelect([]);
-        } else {
-          setSelected({});
-          onSelect && onSelect(null);
-        }
-        setFilterItem("");
-        setIsDropDownClosed(true);
-      },
+        clearSelected: () => {
+            setSelected({});
+            setFilterItem("");
+            setIsDropDownClosed(true);
+            onSelect && onSelect(null);
+        },
     }));
 
     return (
@@ -256,7 +201,6 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
                     filteredOptions,
                     filterItem,
                     focusedOptionIndex,
-                    formPillProps,
                     handleBackspace,
                     handleChange,
                     handleOptionClick,
@@ -265,8 +209,6 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
                     inputWrapperRef,
                     isDropDownClosed,
                     isInputFocused,
-                    multiSelect,
-                    onSelect,
                     optionsWithBlankSelection,
                     selected,
                     setFocusedOptionIndex,

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.html.erb

@@ -0,0 +1,10 @@
+<% 
+  options = [
+    { label: 'United States', value: 'United States', id: 'us' },
+    { label: 'Canada', value: 'Canada', id: 'ca' },
+    { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
+  ]
+
+%>
+
+<%= pb_rails("dropdown", props: {options: options}) %>

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

@@ -6,7 +6,6 @@ import Flex from '../../pb_flex/_flex'
 import FlexItem from '../../pb_flex/_flex_item'
 import Avatar from '../../pb_avatar/_avatar'
 import User from '../../pb_user/_user'
-import Body from '../../pb_body/_body'
 
 const DropdownWithCustomDisplay = (props) => {
   const [selectedOption, setSelectedOption] = useState();
@@ -51,20 +50,10 @@ const DropdownWithCustomDisplay = (props) => {
       <>
       {
         selectedOption && (
-          <Flex align="center">
             <Avatar
                 name={selectedOption.label}
                 size="xs"
             />
-            <Body 
-                marginX="xs"
-                text={selectedOption.label} 
-            />
-            <Badge 
-                text={selectedOption.status} 
-                variant={selectedOption.status == "Offline" ? "neutral" : selectedOption.status == "Online" ? "success" : "warning"}
-            />
-          </Flex>
         )
       }
     </>

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

@@ -1,4 +1,4 @@
-Optionally utilize `customDisplay` on the `Dropdown.Trigger` subcomponent to customize its content after an option is selected. Pass in any combination of kits to create a custom display. When a user clicks on an option, the kits passed into `customDisplay` will display as the selected option.
+Optionally utilize `customDisplay` on the `Dropdown.Trigger` subcomponent to customize its content after an option is selected. The component passed to customDisplay will be rendered to the left of the default text-based display. In this example the Avatar kit is being used.
 
 The `placeholder` prop can also be used to customize the placeholder text for the default `Dropdown.Trigger`. 
 

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display_rails.html.erb

@@ -38,11 +38,7 @@
 
 <%
   custom_display = capture do
-    pb_rails("flex", props: { align: "center" }) do
-      concat(pb_rails("avatar", props: { name: "", size: "xs", id: "dropdown-avatar" }))
-      concat(pb_rails("body", props: { text: "", size: "xs", margin_x: "xs", id: "dropdown-avatar-name" }))
-      concat(pb_rails("badge", props: { text: "", id: "dropdown-avatar-status" }))
-    end
+    pb_rails("avatar", props: { name: "Courtney Long", size: "xs" })
   end
 %>
 
@@ -66,31 +62,4 @@
             <% end %>
         <% end %>
     <% end %>
-<% end %>
-
-
-<script>
-  document.addEventListener("pb:dropdown:selected", (e) => {
-    const option   = e.detail;
-    const dropdown = e.target;
-
-    const display = dropdown.querySelector("#dropdown_trigger_custom_display");
-    if (!display) return;
-
-    const nameEl = display.querySelector("#dropdown-avatar-name");
-    if (nameEl) nameEl.textContent = option.label;
-
-    const avatarEl = display.querySelector("#dropdown-avatar").querySelector(".avatar_wrapper");
-    const initials = (option.label[0] + option.label.split(" ").pop()[0]).toUpperCase();
-    if (avatarEl) {
-      avatarEl.dataset.name = option.label;
-      avatarEl.setAttribute("data-initials", initials);
-    }
-    const badgeEl   = display.querySelector("#dropdown-avatar-status");
-    const variant = option.status === "Online"  ? "success" : option.status === "Offline" ? "neutral" : "warning";
-    if (badgeEl) {
-      badgeEl.querySelector("span").textContent = option.status;
-      badgeEl.className = 'pb_badge_kit_' + variant;
-    }
-  });
-</script>
+<% end %>

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

@@ -1,6 +1,4 @@
-Optionally utilize `custom_display` on the `dropdown/dropdown_trigger` subcomponent to customize its content after an option is selected. Pass in any combination of kits to create a custom display. When a user clicks on an option, the kits passed into `custom_display` will display as the selected option.
-
-Make use of a script to help set the custom_display with the correct value. By using the pb:dropdown:selected event listener, you can target the kits with a querySelector and update them dynamically with the values needed to match the selected option. Make sure to add an ID to the kits being passed in.
+Optionally utilize `custom_display` on the `dropdown/dropdown_trigger` subcomponent to customize its content after an option is selected. The component passed to custom_display will be rendered to the left of the default text-based display. In this example the Avatar kit is being used.
 
 The `placeholder` prop can also be used to customize the placeholder text for the default `dropdown/dropdown_trigger`.