playbook_ui 14.23.0.pre.rc.3 → 14.24.0.pre.alpha.PLAY1972validatemissingareacodeandrepeatcountrycode9457

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

@@ -10,47 +10,239 @@ export default class PbCheckbox extends PbEnhancedElement {
   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 directChildCheckboxes = 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;
+    // Helper function to get all descendant checkboxes
+    const getAllDescendantCheckboxes = () => {
+      const descendants = [];
+      const queue = [...directChildCheckboxes];
+      
+      // Breadth-first search to find all nested descendants
+      while (queue.length > 0) {
+        const checkbox = queue.shift();
+        descendants.push(checkbox);
+        
+        // Find children of this checkbox
+        const checkboxWrapper = checkbox.closest('[data-pb-checkbox-indeterminate-main="true"]');
+        if (checkboxWrapper) {
+          const childCheckboxes = document.querySelectorAll(`[data-pb-checkbox-indeterminate-parent="${checkboxWrapper.id}"] input[type="checkbox"]`);
+          queue.push(...childCheckboxes);
+        }
+      }
+      
+      // Also include any non-"main" checkboxes that have this as a parent
+      const nonMainChildCheckboxes = document.querySelectorAll(`[data-pb-checkbox-indeterminate-parent="${this.element.id}"] input[type="checkbox"]`);
+      nonMainChildCheckboxes.forEach(cb => {
+        if (!descendants.includes(cb)) {
+          descendants.push(cb);
+        }
+      });
+      
+      return descendants;
+    };
+
+    // Helper function to determine checkbox state
+    const getCheckboxState = (checkboxes) => {
+      const checkedCount = checkboxes.filter(cb => cb.checked).length;
+      const totalCount = checkboxes.length;
       
-      // Set the main checkbox states
-      mainCheckbox.indeterminate = indeterminate;
-      mainCheckbox.checked = checkedCount > 0;
+      return {
+        allChecked: checkedCount === totalCount,
+        noneChecked: checkedCount === 0,
+        indeterminate: !(checkedCount === totalCount || checkedCount === 0),
+        checkedCount,
+        totalCount
+      };
+    };
 
-      // Determine the main checkbox label based on the number of checked checkboxes
-      const text = checkedCount === 0 ? 'Check All' : 'Uncheck All';
+    // Helper function to update checkbox visual state
+    const updateCheckboxVisualState = (checkbox, isIndeterminate, isChecked) => {
+      checkbox.indeterminate = isIndeterminate;
+      checkbox.checked = isChecked;
+    };
 
-      // 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';
+    // Helper function to update checkbox label and icons
+    const updateCheckboxLabelAndIcons = (wrapper, isIndeterminate, checkedCount) => {
+      const checkAllLabel = wrapper.dataset.pbCheckboxIndeterminateMainLabelCheck ?? 'Check All';
+      const uncheckAllLabel = wrapper.dataset.pbCheckboxIndeterminateMainLabelUncheck ?? 'Uncheck All';
+      const text = checkedCount === 0 ? checkAllLabel : uncheckAllLabel;
 
-      // Update main checkbox label
-      mainCheckboxWrapper.getElementsByClassName('pb_body_kit')[0].textContent = text;
+      // Update label
+      const bodyKitElement = wrapper.getElementsByClassName('pb_body_kit')[0];
+      if (bodyKitElement) {
+        bodyKitElement.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);
+      // Update icons
+      const iconSpan = wrapper.querySelector('[data-pb-checkbox-icon-span]');
+      if (iconSpan) {
+        const iconClassToAdd = isIndeterminate ? 'pb_checkbox_indeterminate' : 'pb_checkbox_checkmark';
+        const iconClassToRemove = isIndeterminate ? 'pb_checkbox_checkmark' : 'pb_checkbox_indeterminate';
+        iconSpan.classList.add(iconClassToAdd);
+        iconSpan.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);
+      // Toggle icon visibility
+      const indeterminateIcon = wrapper.getElementsByClassName("indeterminate_icon")[0];
+      const checkIcon = wrapper.getElementsByClassName("check_icon")[0];
+      
+      if (indeterminateIcon) {
+        indeterminateIcon.classList.toggle('hidden', !isIndeterminate);
+      }
+      if (checkIcon) {
+        checkIcon.classList.toggle('hidden', isIndeterminate);
+      }
+    };
+
+    // Main function to update this checkbox's state
+    const updateMainCheckbox = () => {
+      const allDescendantCheckboxes = getAllDescendantCheckboxes();
+      const state = getCheckboxState(allDescendantCheckboxes);
+      
+      updateCheckboxVisualState(mainCheckbox, state.indeterminate, state.allChecked);
+      updateCheckboxLabelAndIcons(mainCheckboxWrapper, state.indeterminate, state.checkedCount);
+    };
+
+    // Function to update parent checkboxes recursively
+    const updateParentCheckboxes = () => {
+      const parentId = mainCheckboxWrapper.dataset.pbCheckboxIndeterminateParent;
+      if (parentId) {
+        const parentCheckbox = document.getElementById(parentId);
+        if (parentCheckbox) {
+          const parentWrapper = parentCheckbox.closest('[data-pb-checkbox-indeterminate-main="true"]');
+          if (parentWrapper) {
+            const parentInstance = parentWrapper.pbCheckboxInstance;
+            if (parentInstance && parentInstance.updateMainCheckbox) {
+              parentInstance.updateMainCheckbox();
+              parentInstance.updateParentCheckboxes();
+            }
+          }
+        }
+      }
     };
 
-    // Set indeterminate icon on main checkbox if initial children checkboxes are checked
+    // Function to update non-main checkboxes when their children change
+    const setupNonMainCheckboxUpdates = () => {
+      const allCheckboxesWithChildren = document.querySelectorAll('input[type="checkbox"]');
+      allCheckboxesWithChildren.forEach(cb => {
+        const checkboxWrapper = cb.closest('[data-pb-checkbox-indeterminate-main="true"]');
+        if (checkboxWrapper && checkboxWrapper !== mainCheckboxWrapper) {
+          return; // Skip different "main" checkboxes
+        }
+        
+        const childCheckboxes = document.querySelectorAll(`[data-pb-checkbox-indeterminate-parent="${cb.id}"] input[type="checkbox"]`);
+        if (childCheckboxes.length > 0) {
+          childCheckboxes.forEach(childCb => {
+            childCb.addEventListener('change', () => {
+              const state = getCheckboxState(Array.from(childCheckboxes));
+              updateCheckboxVisualState(cb, state.indeterminate, state.allChecked);
+              
+              // Trigger updates on all main checkboxes that might be affected
+              const mainCheckboxes = document.querySelectorAll('[data-pb-checkbox-indeterminate-main="true"]');
+              mainCheckboxes.forEach(mainCb => {
+                const mainInstance = mainCb.pbCheckboxInstance;
+                if (mainInstance && mainInstance.updateMainCheckbox) {
+                  setTimeout(() => {
+                    mainInstance.updateMainCheckbox();
+                  }, 0);
+                }
+              });
+            });
+          });
+        }
+      });
+    };
+
+
+
+    // Initialize checkbox state
     updateMainCheckbox();
 
-    this.element.querySelector('input').addEventListener('change', function() {
-      childCheckboxes.forEach(cb => cb.checked = this.checked);
+    // Handle main checkbox change - propagate to all descendants
+    mainCheckbox.addEventListener('change', function() {
+      const allDescendantCheckboxes = getAllDescendantCheckboxes();
+      const state = getCheckboxState(allDescendantCheckboxes);
+      
+      if (state.indeterminate) {
+        // If indeterminate, uncheck all descendants and the parent
+        allDescendantCheckboxes.forEach(cb => {
+          cb.checked = false;
+          // Dispatch custom event for programmatic changes- change styles in advanced table
+          cb.dispatchEvent(new Event('checkbox-programmatic-change', { bubbles: true }));
+        });
+        this.checked = false;
+      } else {
+        // Otherwise, set all descendants to the same state as this checkbox
+        allDescendantCheckboxes.forEach(cb => {
+          cb.checked = this.checked;
+          // Dispatch custom event for programmatic changes- change styles in advanced table
+          cb.dispatchEvent(new Event('checkbox-programmatic-change', { bubbles: true }));
+        });
+      }
+      
+      // Update this checkbox first, then parents after a delay
       updateMainCheckbox();
+      setTimeout(() => {
+        updateParentCheckboxes();
+      }, 0);
+      
+      // Also trigger updates on all main checkboxes to ensure proper state propagation
+      triggerAllMainCheckboxUpdates();
     });
 
-    childCheckboxes.forEach(cb => {
+    // Handle child checkbox changes
+    directChildCheckboxes.forEach(cb => {
       cb.addEventListener('change', updateMainCheckbox);
     });
+
+    // Handle deeper descendant changes
+    const allDescendantCheckboxes = getAllDescendantCheckboxes();
+    allDescendantCheckboxes.forEach(cb => {
+      if (!Array.from(directChildCheckboxes).includes(cb)) {
+        cb.addEventListener('change', updateMainCheckbox);
+      }
+    });
+
+    // Handle non-main child checkboxes
+    const allChildCheckboxes = document.querySelectorAll(`[data-pb-checkbox-indeterminate-parent="${this.element.id}"] input[type="checkbox"]`);
+    allChildCheckboxes.forEach(cb => {
+      if (!allDescendantCheckboxes.includes(cb)) {
+        cb.addEventListener('change', updateMainCheckbox);
+      }
+    });
+    
+    // Also trigger updates on all main checkboxes when any checkbox changes
+    let updateTimeout = null;
+    const triggerAllMainCheckboxUpdates = () => {
+      // Debounce the updates to prevent excessive calls
+      if (updateTimeout) {
+        clearTimeout(updateTimeout);
+      }
+      updateTimeout = setTimeout(() => {
+        const mainCheckboxes = document.querySelectorAll('[data-pb-checkbox-indeterminate-main="true"]');
+        mainCheckboxes.forEach(mainCb => {
+          const mainInstance = mainCb.pbCheckboxInstance;
+          if (mainInstance && mainInstance.updateMainCheckbox) {
+            mainInstance.updateMainCheckbox();
+          }
+        });
+      }, 10); // Small delay to batch updates
+    };
+    
+    // Store the original updateMainCheckbox function and create a new one that also triggers updates
+    const originalUpdateMainCheckbox = updateMainCheckbox;
+    const enhancedUpdateMainCheckbox = () => {
+      originalUpdateMainCheckbox();
+      triggerAllMainCheckboxUpdates();
+    };
+    
+    // Replace the updateMainCheckbox function
+    mainCheckboxWrapper.pbCheckboxInstance = {
+      updateMainCheckbox: enhancedUpdateMainCheckbox,
+      updateParentCheckboxes
+    };
+
+    // Setup updates for non-main checkboxes with children
+    setupNonMainCheckboxUpdates();
   }
 }

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.md

@@ -1,7 +1,7 @@
 ##### Prop
 
 `align` **Type**: String | **Values**: left | center | right (defaults to center)
-`verticalAlign` **Type**: String | **Values**: top | middle | bottom (defaults middle)
+`verticalAlign` **Type**: String | **Values**: top | middle | bottom (defaults to bottom)
 `layout` **Type**: String | **Values**: horizontal | vertical | proximate (defaults to horizontal)
 `x` **Type**: Number (defaults to 0)
 `y` **Type**: Number (defaults to 0)

data/app/pb_kits/playbook/pb_date/_date.tsx

@@ -19,6 +19,7 @@ type PbDateProps = {
   htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
   id?: string;
   showDayOfWeek?: boolean;
+  showCurrentYear?: boolean;
   showIcon?: boolean;
   size?: "sm" | "md" | "lg";
   unstyled?: boolean;
@@ -35,6 +36,7 @@ const PbDate = (props: PbDateProps): React.ReactElement => {
     htmlOptions = {},
     id,
     showDayOfWeek = false,
+    showCurrentYear = false,
     showIcon = false,
     size = "md",
     unstyled = false,
@@ -90,7 +92,7 @@ const PbDate = (props: PbDateProps): React.ReactElement => {
                 {month} {day}
               </span>
 
-              {currentYear != year && <span>{`, ${year}`}</span>}
+              {(currentYear !== year || showCurrentYear) && <span>{`, ${year}`}</span>}
             </span>
           </>
         : size == "md" || size == "lg"
@@ -124,7 +126,7 @@ const PbDate = (props: PbDateProps): React.ReactElement => {
               <span>
                 {month} {day}
               </span>
-              {currentYear != year && <span>{`, ${year}`}</span>}
+              {(currentYear !== year || showCurrentYear) && <span>{`, ${year}`}</span>}
             </Title>
             )
           : (
@@ -158,7 +160,7 @@ const PbDate = (props: PbDateProps): React.ReactElement => {
                 <Caption dark={dark}
                     tag="span">
                   {month} {day}
-                  {currentYear != year && <>{`, ${year}`}</>}
+                  {(currentYear !== year || showCurrentYear) && <>{`, ${year}`}</>}
                 </Caption>
               </>
             )}

data/app/pb_kits/playbook/pb_date/date.html.erb

@@ -13,8 +13,8 @@
     <% end %>
 
     <!-- month day, year -->
-    <%# if not current year %>
-    <% if object.year.to_s == DateTime.now.year.to_s %>
+    <%# if not current year or show_current_year is false %>
+    <% if object.year.to_s == DateTime.now.year.to_s && !object.show_current_year %>
       <span><%= "#{object.month} #{object.day}" %></span>
     <%# if is current year %>
     <% else %>
@@ -44,8 +44,8 @@
 
     <!-- month day, year -->
 
-    <%# if not current year %>
-    <% if object.year.to_s == DateTime.now.year.to_s %>
+    <%# if not current year or show_current_year is false %>
+    <% if object.year.to_s == DateTime.now.year.to_s  && !object.show_current_year  %>
       <%= pb_rails("title", props: { tag: "div", text: "#{object.month} #{object.day}", size: 4 }) %>
     <%# if is current year %>
     <% else %>
@@ -74,8 +74,8 @@
 
     <!-- month day, year -->
 
-    <%# if not current year %>
-    <% if object.year.to_s == DateTime.now.year.to_s %>
+    <%# if not current year or show_current_year is false %>
+    <% if object.year.to_s == DateTime.now.year.to_s  && !object.show_current_year %>
       <%= pb_rails("caption", props: { tag: "span", text: "#{object.month} #{object.day}" }) %>
     <%# if is current year %>
     <% else %>

data/app/pb_kits/playbook/pb_date/date.rb

@@ -11,6 +11,8 @@ module Playbook
                        default: false
       prop :show_day_of_week, type: Playbook::Props::Boolean,
                               default: false
+      prop :show_current_year, type: Playbook::Props::Boolean,
+                               default: false
       prop :size, type: Playbook::Props::Enum,
                   values: %w[lg md sm xs],
                   default: "md"

data/app/pb_kits/playbook/pb_date/docs/_date_with_show_current_year.html.erb

@@ -0,0 +1,4 @@
+<%= pb_rails("date", props: {
+  date: Date.today,
+  show_current_year: true
+}) %>

data/app/pb_kits/playbook/pb_date/docs/_date_with_show_current_year.jsx

@@ -0,0 +1,17 @@
+import React from 'react'
+
+import FormattedDate from '../../pb_date/_date'
+
+const DateWithShowCurrentYear = (props) => {
+  return (
+    <>
+      <FormattedDate
+          showCurrentYear
+          value={new Date()}
+          {...props}
+      />
+    </>
+  )
+}
+
+export default DateWithShowCurrentYear

data/app/pb_kits/playbook/pb_date/docs/_date_with_show_current_year.md

@@ -0,0 +1 @@
+By default, the Date kit does NOT display the year if it is the current year. If you want to display the current year you can do so by setting `showCurrentYear`/`show_current_year` to true as shown here. 

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

@@ -5,12 +5,14 @@ examples:
   - date_variants: Variants
   - date_alignment: Alignment
   - date_timezone: Timezones
+  - date_with_show_current_year: Show Current Year
   - date_unstyled: Unstyled
 
   react:
   - date_default: Default
   - date_variants: Variants
   - date_alignment: Alignment
+  - date_with_show_current_year: Show Current Year
   - date_unstyled: Unstyled
 
   swift:

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

@@ -2,3 +2,4 @@ export { default as DateDefault } from './_date_default.jsx'
 export { default as DateVariants } from './_date_variants.jsx'
 export { default as DateAlignment } from './_date_alignment.jsx'
 export { default as DateUnstyled } from './_date_unstyled.jsx'
+export { default as DateWithShowCurrentYear } from './_date_with_show_current_year.jsx'

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

@@ -8,6 +8,7 @@
 @import "../pb_textarea/textarea_mixin";
 
 @import "./scss_partials/dropdown_animation";
+@import "dropdown_mixin";
 
 [class*="pb_dropdown"] {
   .dropdown_wrapper {
@@ -98,9 +99,23 @@
           [class^="pb_title_kit"], a {
             color: $white !important;
           }
+          border-bottom: 1px solid $border_light;
           &:hover {
-            background-color: $product_1_background !important;
+            background-color: $product_1_background;
+          }
+ 
+          // activeStyle font color map
+          @each $name, $color in $font-colors {
+            &.font-#{$name} {
+              @include apply-font-color($color);
+            }
           }
+          // activeStyle background color map (no difference between selected and selected+hover custom colors)
+          @each $name, $bg in $background-colors {
+            &.bg-#{$name} {
+              background-color: $bg;
+            }
+          }     
         }
       }
 
@@ -267,6 +282,7 @@
         }
         &[class*="selected"] {
           background-color: $primary;
+          border-bottom: rgba($white, 0.15);
         }
       }
     }

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

@@ -39,6 +39,10 @@ type DropdownProps = {
     options: GenericObject;
     separators?: boolean;
     variant?: "default" | "subtle";
+    activeStyle?: {
+      backgroundColor?: string;
+      fontColor?: string;
+    };
 };
 
 interface DropdownComponent
@@ -69,6 +73,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
         options,
         separators = true,
         variant = "default",
+        activeStyle,
     } = props;
 
     const ariaProps = buildAriaProps(aria);
@@ -251,6 +256,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
         >
             <DropdownContext.Provider
                 value={{
+                    activeStyle,
                     autocomplete,
                     dropdownContainerRef,
                     filteredOptions,

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

@@ -0,0 +1,36 @@
+@import "../tokens/colors";
+
+// activeStyle fontColor sass map to go through text colors + set of custom colors
+$custom-font-colors: (
+  primary: $primary
+);
+
+$merged-font-colors: map-merge($text_colors, $custom-font-colors);
+
+$font-colors: ();
+
+@each $key, $val in $merged-font-colors {
+  $font-colors: map-merge($font-colors, ($key: $val));
+}
+
+@mixin apply-font-color($color) {
+  color: $color;
+
+  [class^="pb_body"],
+  [class^="pb_title_kit"],
+  a {
+    color: $color !important;
+  }
+}
+
+// activeStyle backgroundColor map (set of custom colors)
+$custom-background-colors: (
+  "bg_light": $bg_light,
+  "white": $white,
+);
+
+$background-colors: ();
+
+@each $key, $val in $custom-background-colors {
+  $background-colors: map-merge($background-colors, ($key: $val));
+}

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

@@ -0,0 +1,90 @@
+import React from 'react'
+import Dropdown from '../_dropdown'
+
+const DropdownCustomActiveStyleOptions = (props) => {
+
+
+  const options = [
+    {
+      label: "United States",
+      value: "unitedStates",
+      id: "us"
+    },
+    {
+      label: "Canada",
+      value: "canada",
+      id: "ca"
+    },
+    {
+      label: "Pakistan",
+      value: "pakistan",
+      id: "pk"
+    }
+  ];  
+
+
+  return (
+  <div>
+    <Dropdown
+        activeStyle={{
+          backgroundColor: "bg_light",
+          fontColor: "primary",
+        }}
+        label="Background Color: bg_light; Font Color: primary"
+        marginBottom="sm"
+        options={options}
+        {...props}
+    >
+      <Dropdown.Trigger/>
+      <Dropdown.Container>
+        {options.map((option) => (
+          <Dropdown.Option key={option.id} 
+              option={option}
+          />
+        ))}
+      </Dropdown.Container>
+    </Dropdown>
+    <Dropdown
+        activeStyle={{
+          backgroundColor: "white",
+          fontColor: "primary",
+        }}
+        label="Background Color: white; Font Color: primary"
+        marginBottom="sm"
+        options={options}
+        {...props}
+    />
+    <Dropdown
+        activeStyle={{
+          backgroundColor: "bg_light",
+          fontColor: "text_lt_default",
+        }}
+        autocomplete
+        label="Background Color: bg_light; Font Color: text_lt_default"
+        marginBottom="sm"
+        options={options}
+        {...props}
+    />
+    <Dropdown
+        activeStyle={{
+          fontColor: "text_lt_lighter",
+        }}
+        label="Font Color: text_lt_lighter"
+        marginBottom="sm"
+        options={options}
+        {...props}
+    >
+      <Dropdown.Trigger/>
+      <Dropdown.Container>
+        {options.map((option) => (
+          <Dropdown.Option key={option.id} 
+              option={option}
+          />
+        ))}
+      </Dropdown.Container>
+    </Dropdown>
+  </div>
+  )
+}
+
+export default  DropdownCustomActiveStyleOptions

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

@@ -0,0 +1,4 @@
+The `activeStyle` prop can be used to customize the appearance of the dropdown selection indicator. It accepts an object with the following keys: `backgroundColor` sets the background color of the selected item (and its hover state); `fontColor` sets the font color of the selected item.
+
+`backgroundColor` **Type**: String | **Values**: bg_light | white | **Default**: (no selection) is primary
+`fontColor` **Type**: String | **Values**: primary | all [Playbook Text Colors](https://playbook.powerapp.cloud/visual_guidelines/colors) | **Default**: (no selection) is white

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

@@ -18,6 +18,7 @@ const DropdownCustomRadioOptions = (props) => {
   return (
   <div>
       <Dropdown
+          activeStyle={{ backgroundColor: "bg_light", fontColor: "text_lt_default" }}
           label="Select Item"
           onSelect={(selectedItem) => setSelectedValue(selectedItem?.value)}
           options={options}

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

@@ -1 +1 @@
-Radio inputs can be used inside `Dropdown.Option` for a custom layout that mimics form-like selection within a dropdown.
+Radio inputs can be used inside `Dropdown.Option` for a custom layout that mimics form-like selection within a dropdown. Use the [activeStyle](https://playbook.powerapp.cloud/kits/dropdown/react#custom-active-style-options) `backgroundColor` and `fontColor` props to create contrast between the Radio selection indicator and the Dropdown selection background indicator.

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

@@ -16,7 +16,7 @@ examples:
   - dropdown_with_search_rails: Custom Trigger Dropdown with Search
   - dropdown_with_custom_padding: Custom Option Padding
   - dropdown_with_custom_icon_options: Custom Icon Options
-  # - dropdown_with_custom_radio_options: Custom Radio Options # TODO: Update and publish doc ex in [PLAY-2146](https://runway.powerhrg.com/backlog_items/PLAY-2146) (remove this comment afterwards)
+  # - dropdown_with_custom_radio_options: Custom Radio Options # TODO: Update and publish doc ex in the Rails follow up to [PLAY-2146](https://runway.powerhrg.com/backlog_items/PLAY-2146) (remove this comment afterwards)
   - dropdown_error: Dropdown with Error
   - dropdown_default_value: Default Value
   - dropdown_multi_select_with_default: Multi Select Default Value
@@ -39,8 +39,9 @@ examples:
   - dropdown_with_custom_trigger: Custom Trigger
   - dropdown_with_search: Custom Trigger Dropdown with Search
   - dropdown_with_custom_padding: Custom Option Padding
+  - dropdown_with_custom_active_style_options: Custom Active Style Options
   - dropdown_with_custom_icon_options: Custom Icon Options
-  # - dropdown_with_custom_radio_options: Custom Radio Options # TODO: Update and publish doc ex in [PLAY-2146](https://runway.powerhrg.com/backlog_items/PLAY-2146) (remove this comment afterwards)
+  - dropdown_with_custom_radio_options: Custom Radio Options
   - dropdown_error: Dropdown with Error
   - dropdown_default_value: Default Value
   - dropdown_multi_select_with_default: Multi Select Default Value

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

@@ -21,4 +21,5 @@ export { default as DropdownMultiSelectWithAutocomplete } from './_dropdown_mult
 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 DropdownWithCustomIconOptions} from './_dropdown_with_custom_icon_options.jsx'
-export {default as DropdownWithCustomRadioOptions} from './_dropdown_with_custom_radio_options.jsx'
+export {default as DropdownWithCustomRadioOptions} from './_dropdown_with_custom_radio_options.jsx'
+export {default as DropdownWithCustomActiveStyleOptions} from './_dropdown_with_custom_active_style_options.jsx'