playbook_ui 15.4.0.pre.rc.1 → 15.4.0.pre.rc.3

data/app/pb_kits/playbook/pb_badge/_badge.tsx

@@ -20,11 +20,12 @@ type BadgeProps = {
     onTouchEnd?: React.TouchEventHandler<HTMLSpanElement>,
   },
   data?: {[key: string]: string},
-  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void) | ((event: any) => void) | any},
   id?: string,
   removeIcon?: boolean,
   removeOnClick?: React.MouseEventHandler<HTMLSpanElement>,
   rounded?: boolean,
+  tabIndex?: number,
   text?: string,
   variant?: "error" | "info" | "neutral" | "notification" | "notificationError" | "primary" | "success" | "warning",
 } & GlobalProps
@@ -39,6 +40,7 @@ const Badge = (props: BadgeProps): React.ReactElement => {
     removeIcon = false,
     removeOnClick,
     rounded = false,
+    tabIndex,
     text,
     variant = 'neutral',
   } = props
@@ -61,6 +63,7 @@ const Badge = (props: BadgeProps): React.ReactElement => {
         {...htmlProps}
         className={css}
         id={id}
+        tabIndex={tabIndex}
     >
       <span>
         {text}

data/app/pb_kits/playbook/pb_badge/badge.test.js

@@ -112,3 +112,16 @@ test('displays notification variants', () => {
     cleanup()
   })
 })
+
+test('should allow tabIndex to be set', () => {
+  render(
+    <Badge
+        data={{ testid: testId }}
+        tabIndex={0}
+        text="+1"
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  expect(kit).toHaveAttribute('tabIndex', '0')
+})

data/app/pb_kits/playbook/pb_card/docs/_card_background.md

@@ -1 +1 @@
-Add a background color by passing the color name to background. List of all colors can be viewed <a href="https://playbook.powerapp.cloud/visual_guidelines" target="_blank">here</a> under Product Colors and Status: Subtle Variations.
+Add a background color by passing the color name to background. List of all colors can be viewed <a href="https://playbook.powerapp.cloud/tokens/colors" target="_blank">here</a> under Product Colors and Status: Subtle Variations.

data/app/pb_kits/playbook/pb_card/docs/_card_header.md

@@ -1 +1 @@
-Card headers pass category, product, status and background colors only. List of all category, product, status and background colors can be viewed <a href="https://playbook.powerapp.cloud/visual_guidelines/colors" target="_blank">here</a>.
+Card headers pass category, product, status and background colors only. List of all category, product, status and background colors can be viewed <a href="https://playbook.powerapp.cloud/token/colors" target="_blank">here</a>.

data/app/pb_kits/playbook/pb_card/docs/_card_highlight.md

@@ -1 +1 @@
-Card highlight can pass status, product, and category colors. List of all colors can be viewed <a href="https://playbook.powerapp.cloud/visual_guidelines/colors" target="_blank">here</a>.
+Card highlight can pass status, product, and category colors. List of all colors can be viewed <a href="https://playbook.powerapp.cloud/token/colors" target="_blank">here</a>.

data/app/pb_kits/playbook/pb_card/docs/_card_light.md

@@ -1 +1 @@
-Card can leverage the max-width property. Learn more in our <a href="https://playbook.powerapp.cloud/visual_guidelines" target="_blank">visual guidelines.</a>  
+Card can leverage the max-width property. Learn more in our <a href="https://playbook.powerapp.cloud/global_props/max_width" target="_blank">visual guidelines.</a>  

data/app/pb_kits/playbook/pb_currency/_currency.tsx

@@ -11,7 +11,7 @@ import Title from '../pb_title/_title'
 type CurrencyProps = {
   abbreviate?: boolean,
   align?: 'center' | 'left' | 'right',
-  amount: string,
+  amount: string | number,
   aria?: {[key:string]:string},
   className?: string,
   dark?: boolean,
@@ -59,6 +59,19 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
     commaSeparator = false,
   } = props
 
+  // Convert numeric input to string format
+  const convertAmount = (input: string | number): string => {
+    if (typeof input === 'number') {
+      if (input === 0 && !nullDisplay) {
+        return ""
+      }
+      return input.toFixed(2)
+    }
+    return input
+  }
+
+  const currencyAmount = convertAmount(amount)
+
   const emphasizedClass = emphasized ? '' : '_deemphasized'
 
   let variantClass
@@ -68,7 +81,7 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
     variantClass = '_bold'
   }
 
-  const [whole, decimal = '00'] = amount.split('.')
+  const [whole, decimal = '00'] = currencyAmount.split('.')
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
@@ -92,19 +105,19 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
     return isAmount ? num.slice(0, -1) : isUnit ? num.slice(-1) : ''
   }
 
-  const getMatchingDecimalAmount = decimals === "matching" ? amount : whole
+  const getMatchingDecimalAmount = decimals === "matching" ? currencyAmount : whole
   const getMatchingDecimalValue = decimals === "matching" ? '' : `.${decimal}`
 
   const formatAmount = (amount: string) => {
     if (!commaSeparator) return amount;
-    
+
     const [wholePart, decimalPart] = amount.split('.');
     const formattedWhole = new Intl.NumberFormat('en-US').format(parseInt(wholePart));
     return decimalPart ? `${formattedWhole}.${decimalPart}` : formattedWhole;
   }
 
   const swapNegative = size === "sm" && symbol !== ""
-  const handleNegative = amount.startsWith("-") && swapNegative ? "-" : ""
+  const handleNegative = currencyAmount.startsWith("-") && swapNegative ? "-" : ""
   const getAbsoluteAmount = (amountString: string) => amountString.replace(/^-/,'')
   const getAbbrOrFormatAmount = abbreviate ? getAbbreviatedValue('amount') : formatAmount(getMatchingDecimalAmount)
   const getAmount = swapNegative ? getAbsoluteAmount(getAbbrOrFormatAmount) : getAbbrOrFormatAmount
@@ -152,7 +165,7 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
               >
                 {handleNegative}{symbol}
               </Body>
-      
+
               <Title
                   className="pb_currency_value"
                   dark={dark}
@@ -160,7 +173,7 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
               >
                 {getAmount}
               </Title>
-      
+
               <Body
                   className="unit"
                   color="light"

data/app/pb_kits/playbook/pb_currency/currency.rb

@@ -17,8 +17,7 @@ module Playbook
       prop :symbol, type: Playbook::Props::String,
                     default: "$"
 
-      prop :amount, type: Playbook::Props::String,
-                    required: true
+      prop :amount, required: true
 
       prop :unit, type: Playbook::Props::String,
                   required: false
@@ -92,7 +91,7 @@ module Playbook
       end
 
       def negative_sign
-        amount.starts_with?("-") && swap_negative ? "-" : ""
+        currency_amount.starts_with?("-") && swap_negative ? "-" : ""
       end
 
       def body_props
@@ -117,10 +116,32 @@ module Playbook
         end
       end
 
+      def currency_amount
+        @currency_amount ||= convert_amount(amount)
+      end
+
     private
 
+      # Convert numeric input to string format
+      def convert_amount(input)
+        if input.is_a?(Numeric)
+          if input.zero? && null_display.nil?
+            ""
+          else
+            format("%.2f", input)
+          end
+        # Handle string representations of zero
+        elsif input.to_s.strip.match?(/^-?0+(\.0+)?$/) && null_display.nil?
+          ""
+        else
+          input.to_s
+        end
+      end
+
       def whole_value
-        value = amount.split(".").first
+        return "" if currency_amount.blank?
+
+        value = currency_amount.split(".").first
         if comma_separator
           number_with_delimiter(value.gsub(",", ""))
         else
@@ -129,7 +150,9 @@ module Playbook
       end
 
       def decimal_value
-        amount.split(".")[1] || "00"
+        return "00" if currency_amount.blank?
+
+        currency_amount.split(".")[1] || "00"
       end
 
       def units_element
@@ -147,7 +170,9 @@ module Playbook
       end
 
       def abbreviated_value(index = 0..-2)
-        value = amount.split(".").first.gsub(",", "").to_i
+        return "" if currency_amount.blank?
+
+        value = currency_amount.split(".").first.gsub(",", "").to_i
         abbreviated_num = number_to_human(value, units: { thousand: "K", million: "M", billion: "B", trillion: "T" }).gsub(/\s+/, "")
         abbreviated_num[index]
       end
@@ -174,9 +199,11 @@ module Playbook
 
         if decimals == "matching"
           if comma_separator
-            number_with_delimiter(amount.gsub(",", ""))
+            return "" if currency_amount.blank?
+
+            number_with_delimiter(currency_amount.gsub(",", ""))
           else
-            amount
+            currency_amount
           end
         else
           whole_value

data/app/pb_kits/playbook/pb_currency/currency.test.js

@@ -133,3 +133,50 @@ test('handles negative amounts correctly', () => {
   expect(screen.getByTestId('test-negative-no-symbol')).toHaveTextContent('-400.50')
   expect(screen.getByTestId('test-negative-medium-size')).toHaveTextContent('$-500.55')
 })
+
+test('handles numeric amounts correctly', () => {
+  render(
+    <>
+      <Currency
+          amount={320}
+          data={{ testid: 'test-numeric-default' }}
+      />
+      <Currency
+          abbreviate
+          amount={3200000}
+          data={{ testid: 'test-numeric-millions' }}
+      />
+      <Currency
+          amount={123456.78}
+          commaSeparator
+          data={{ testid: 'test-numeric-comma-decimals' }}
+      />
+      <Currency
+          amount={400.50}
+          data={{ testid: 'test-numeric-no-symbol' }}
+          symbol=""
+      />
+      <Currency
+          amount={500.55}
+          data={{ testid: 'test-numeric-medium-size' }}
+          size="md"
+      />
+      <Currency
+          amount={-600.70}
+          data={{ testid: 'test-numeric-negative' }}
+      />
+      <Currency
+          amount={0.00}
+          data={{ testid: 'test-numeric-null' }}
+      />
+    </>
+  )
+
+  expect(screen.getByTestId('test-numeric-default')).toHaveTextContent('$320')
+  expect(screen.getByTestId('test-numeric-millions')).toHaveTextContent('$3.2M')
+  expect(screen.getByTestId('test-numeric-comma-decimals')).toHaveTextContent('$123,456.78')
+  expect(screen.getByTestId('test-numeric-no-symbol')).toHaveTextContent('400.50')
+  expect(screen.getByTestId('test-numeric-medium-size')).toHaveTextContent('$500.55')
+  expect(screen.getByTestId('test-numeric-negative')).toHaveTextContent('-$600.70')
+  expect(screen.getByTestId('test-numeric-null')).toHaveTextContent('$.00')
+})

data/app/pb_kits/playbook/pb_currency/docs/_currency_variants.html.erb

@@ -7,7 +7,7 @@
 }) %>
 
 <%= pb_rails("currency", props: {
-  amount: "342",
+  amount: 342,
   label: "Light",
   margin_bottom: "md",
   size: "sm",

data/app/pb_kits/playbook/pb_currency/docs/_currency_variants.jsx

@@ -14,7 +14,7 @@ const CurrencyVariants = (props) => {
           {...props}
       />
       <Currency
-          amount="342"
+          amount={342}
           label="Light"
           marginBottom="md"
           size="sm"

data/app/pb_kits/playbook/pb_currency/docs/_currency_variants.md

@@ -0,0 +1 @@
+**NOTE:** The value passed into the `amount` prop can be either a string or numeric value.

data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts

@@ -350,8 +350,14 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
   if (syncStartWith) {
     picker.config.onClose.push((selectedDates: string) => {
       if (selectedDates?.length) {
-        const quickpick = (document.querySelector(`#${syncStartWith}`) as HTMLElement & { _flatpickr?: any })?._flatpickr;
-        quickpick?.clear();
+        const element = document.querySelector(`#${syncStartWith}`) as any;
+        // Check if it's a Dropdown QuickPick (has _dropdownRef) or DatePicker QuickPick (has _flatpickr)
+        if (element?._dropdownRef?.current) {
+          element._dropdownRef.current.clearSelected();
+        } else {
+          const quickpick = element?._flatpickr;
+          quickpick?.clear();
+        }
       }
     });
   }
@@ -360,8 +366,14 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
   if (syncEndWith) {
     picker.config.onClose.push((selectedDates: string) => {
       if (selectedDates?.length) {
-        const quickpick = (document.querySelector(`#${syncEndWith}`) as HTMLElement & { _flatpickr?: any })?._flatpickr;
-        quickpick?.clear();
+        const element = document.querySelector(`#${syncEndWith}`) as any;
+        // Check if it's a Dropdown QuickPick (has _dropdownRef) or DatePicker QuickPick (has _flatpickr)
+        if (element?._dropdownRef?.current) {
+          element._dropdownRef.current.clearSelected();
+        } else {
+          const quickpick = element?._flatpickr;
+          quickpick?.clear();
+        }
       }
     });
   }

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_and_dropdown_range.jsx

@@ -0,0 +1,38 @@
+import React from "react";
+import Dropdown from "../../pb_dropdown/_dropdown";
+import DatePicker from "../../pb_date_picker/_date_picker";
+
+const DatePickerAndDropdownRange = (props) => {
+  return (
+    <>
+      <Dropdown
+          controlsEndId="end-date-picker1"
+          controlsStartId="start-date-picker1"
+          id="dropdown-as-quickpick"
+          label="Date Range"
+          marginBottom="sm"
+          placeholder="Select a Date Range"
+          variant="quickpick"
+          {...props}
+      /> 
+
+      <DatePicker
+          label="Start Date"
+          pickerId="start-date-picker1"
+          placeholder="Select a Start Date"
+          syncStartWith="dropdown-as-quickpick"
+          {...props}
+      />
+
+      <DatePicker
+          label="End Date"
+          pickerId="end-date-picker1"
+          placeholder="Select an End Date"
+          syncEndWith="dropdown-as-quickpick"
+          {...props}
+      />
+    </>
+  );
+};
+
+export default DatePickerAndDropdownRange;

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_and_dropdown_range.md

@@ -0,0 +1,14 @@
+You can link a Dropdown (`quickpick` variant) to standard DatePickers using the following props:
+
+**For the Dropdown**:
+`controlsStartId`: ID of the DatePicker that should receive the start date.
+
+`controlsEndId`: ID of the DatePicker that should receive the end date.
+
+When a quickpick option like “This Year” is selected, it automatically populates the linked start and end inputs.
+
+**For the Start/End DatePickers**:
+`syncStartWith`: ID of the quickpick this start date is synced to.
+`syncEndWith`: ID of the quickpick this end date is synced to.
+
+When a user manually edits the start or end date, it clears the selected quickpick to prevent conflicting values.

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

@@ -48,7 +48,8 @@ examples:
   - date_picker_quick_pick_custom: Custom Quick Pick Dates
   - date_picker_quick_pick_custom_override: Custom Quick Pick Dates (append to defaults)
   - date_picker_quick_pick_default_date: Range (Quick Pick w/ Default Date)
-  - date_picker_range_pattern: Range with 2 Date Pickers and a Quick Pick
+  # - date_picker_range_pattern: Range with 2 Date Pickers and a Quick Pick
+  - date_picker_and_dropdown_range: Range with Dropdown and 2 Date Pickers
   - date_picker_format: Format
   - date_picker_disabled: Disabled Dates
   - date_picker_min_max: Min Max

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

@@ -26,4 +26,5 @@ export { default as DatePickerOnClose } from './_date_picker_on_close.jsx'
 export { default as DatePickerQuickPickCustom } from './_date_picker_quick_pick_custom'
 export { default as DatePickerQuickPickCustomOverride } from './_date_picker_quick_pick_custom_override'
 export { default as DatePickerQuickPickDefaultDate } from './_date_picker_quick_pick_default_date'
-export { default as DatePickerRangePattern } from './_date_picker_range_pattern'
+export { default as DatePickerRangePattern } from './_date_picker_range_pattern'
+export { default as DatePickerAndDropdownRange } from './_date_picker_and_dropdown_range.jsx'

data/app/pb_kits/playbook/pb_distribution_bar/docs/_distribution_bar_custom_colors.md

@@ -1 +1 @@
-You can customize the order of the colors you would like to use by using the `colors` prop. Only the data and status colors will work for Playbook charts. See the [design page](/visual_guidelines) for reference.
+You can customize the order of the colors you would like to use by using the `colors` prop. Only the data and status colors will work for Playbook charts. See the [design page](https://playbook.powerapp.cloud/token/colors) for reference.

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

@@ -12,6 +12,7 @@
 
 .pb_dropdown_default,
 .pb_dropdown_subtle,
+.pb_dropdown_quickpick,
 .pb_dropdown_default_separators_hidden,
 .pb_dropdown_subtle_separators_hidden {
   .dropdown_wrapper {

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

@@ -12,6 +12,7 @@ import DropdownContext from "./context";
 import DropdownOption from "./subcomponents/DropdownOption";
 import DropdownTrigger from "./subcomponents/DropdownTrigger";
 import useDropdown from "./hooks/useDropdown";
+import  getQuickPickOptions from "./quickpick";
 
 import {
     separateChildComponents,
@@ -36,9 +37,12 @@ type DropdownProps = {
     label?: string;
     multiSelect?: boolean;
     onSelect?: (arg: GenericObject) => null;
-    options: GenericObject;
+    options?: GenericObject;
     separators?: boolean;
-    variant?: "default" | "subtle";
+    variant?: "default" | "subtle" | "quickpick";
+    rangeEndsToday?: boolean;
+    controlsStartId?: string;
+    controlsEndId?: string;
     activeStyle?: {
       backgroundColor?: string;
       fontColor?: string;
@@ -71,6 +75,9 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
         formPillProps,
         onSelect,
         options,
+        rangeEndsToday = false,
+        controlsStartId,
+        controlsEndId,
         separators = true,
         variant = "default",
         activeStyle,
@@ -85,11 +92,25 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
         globalProps(props),
         className
     );
+    // ------------- Quick Pick ---------------------------------
+    // Use QuickPick options when variant is "quickpick"
+    const dropdownOptions = variant === "quickpick" 
+        ? getQuickPickOptions(rangeEndsToday) 
+        : (options || []);
+    // ----------------------------------------------------------
 
     const [isDropDownClosed, setIsDropDownClosed, toggleDropdown] = useDropdown(isClosed);
 
     const [filterItem, setFilterItem] = useState("");
     const initialSelected = useMemo(() => {
+      // Handle quickpick variant with string defaultValue (e.g., "This Month")
+      if (variant === "quickpick" && typeof defaultValue === "string" && defaultValue) {
+        const matchedOption = dropdownOptions.find(
+          (opt: GenericObject) => opt.label?.toLowerCase() === (defaultValue as string).toLowerCase()
+        );
+        return matchedOption || {};
+      }
+      
       if (multiSelect) {
         if (Array.isArray(defaultValue)) return defaultValue;
         return defaultValue && Object.keys(defaultValue).length
@@ -97,7 +118,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
           : [];
       }
       return defaultValue || {};
-    }, [multiSelect, defaultValue]);
+    }, [multiSelect, defaultValue, variant, dropdownOptions]);
 
     const [selected, setSelected] = useState<GenericObject | GenericObject[]>(
       initialSelected
@@ -151,7 +172,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
     }, [isClosed])
 
     const blankSelectionOption: GenericObject = blankSelection ? [{ label: blankSelection, value: "" }] : [];
-    const optionsWithBlankSelection = blankSelectionOption.concat(options);
+    const optionsWithBlankSelection = blankSelectionOption.concat(dropdownOptions);
 
     const availableOptions = useMemo(()=> {
         if (!multiSelect) return optionsWithBlankSelection;
@@ -203,6 +224,21 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
                    setFilterItem("");
                    setIsDropDownClosed(true);
                    onSelect && onSelect(clickedItem);
+                   
+                   // Sync with DatePickers if this is a quickpick variant
+                   if (variant === "quickpick" && Array.isArray(clickedItem.value)) {
+                       const [start, end] = clickedItem.value;
+                       
+                       if (controlsStartId) {
+                           const startPicker = (document.querySelector(`#${controlsStartId}`) as HTMLElement & { _flatpickr?: any })?._flatpickr;
+                           startPicker?.setDate(start, true);
+                       }
+                       
+                       if (controlsEndId) {
+                           const endPicker = (document.querySelector(`#${controlsEndId}`) as HTMLElement & { _flatpickr?: any })?._flatpickr;
+                           endPicker?.setDate(end, true);
+                       }
+                   }
             }
              };
 
@@ -219,6 +255,19 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
         setSelected({});
         onSelect && onSelect(null);
         setFocusedOptionIndex(-1);
+        
+        // Clear linked DatePickers as well if this is a quickpick variant with controls
+        if (variant === "quickpick") {
+          if (controlsStartId) {
+            const startPicker = (document.querySelector(`#${controlsStartId}`) as HTMLElement & { _flatpickr?: any })?._flatpickr;
+            startPicker?.clear();
+          }
+          
+          if (controlsEndId) {
+            const endPicker = (document.querySelector(`#${controlsEndId}`) as HTMLElement & { _flatpickr?: any })?._flatpickr;
+            endPicker?.clear();
+          }
+        }
       }
     };
 
@@ -232,7 +281,8 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
         dark
     });
 
-    useImperativeHandle(ref, () => ({
+    // Create an internal ref object that holds the imperative handle methods
+    const imperativeRef = useRef({
       clearSelected: () => {
         if (multiSelect) {
           setSelected([]);
@@ -244,7 +294,61 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
         setFilterItem("");
         setIsDropDownClosed(true);
       },
-    }));
+    });
+
+    // Update imperativeRef whenever dependencies change
+    // (needed for external clearing of normal Dropdown + DatePicker-synced QuickPick Dropdown)
+    useEffect(() => {
+      imperativeRef.current = {
+        clearSelected: () => {
+          if (multiSelect) {
+            setSelected([]);
+            onSelect && onSelect([]);
+          } else {
+            setSelected({});
+            onSelect && onSelect(null);
+          }
+          setFilterItem("");
+          setIsDropDownClosed(true);
+        },
+      };
+    }, [multiSelect, onSelect, setSelected, setFilterItem, setIsDropDownClosed]);
+
+    useImperativeHandle(ref, () => imperativeRef.current);
+
+    // Create a ref to the outer div to attach the dropdown ref for DatePicker sync
+    const outerDivRef = useRef<HTMLDivElement>(null);
+    
+    useEffect(() => {
+      // Attach the ref to the DOM element so DatePicker can access it
+      if (outerDivRef.current && variant === "quickpick" && id) {
+        (outerDivRef.current as any)._dropdownRef = imperativeRef;
+      }
+    }, [variant, id]);
+
+    // Sync defaultValue with DatePickers on mount when 3 input pattern is used
+    useEffect(() => {
+      if (variant === "quickpick" && initialSelected && typeof initialSelected === "object" && !Array.isArray(initialSelected)) {
+        const value = initialSelected.value;
+        
+        if (Array.isArray(value) && value.length === 2) {
+          const [start, end] = value;
+          
+          // Wait for DatePickers to be initialized
+          setTimeout(() => {
+            if (controlsStartId) {
+              const startPicker = (document.querySelector(`#${controlsStartId}`) as HTMLElement & { _flatpickr?: any })?._flatpickr;
+              startPicker?.setDate(start, true);
+            }
+            
+            if (controlsEndId) {
+              const endPicker = (document.querySelector(`#${controlsEndId}`) as HTMLElement & { _flatpickr?: any })?._flatpickr;
+              endPicker?.setDate(end, true);
+            }
+          }, 0);
+        }
+      }
+    }, [variant, initialSelected, controlsStartId, controlsEndId]);
 
     return (
         <div {...ariaProps}
@@ -252,6 +356,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
             {...htmlProps}
             className={classes}
             id={id}
+            ref={outerDivRef}
             style={{position: "relative"}}
         >
             <DropdownContext.Provider

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

@@ -0,0 +1,18 @@
+import React from 'react'
+import Dropdown from '../../pb_dropdown/_dropdown'
+
+const DropdownQuickpick = (props) => {
+
+  return (
+    <div>
+      <Dropdown
+          label="Date Range"
+          onSelect={(selectedItem) => console.log(selectedItem)}
+          variant="quickpick"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default DropdownQuickpick

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

@@ -0,0 +1,4 @@
+The QuickPick variant provides predefined date based options when `variant="quickpick"` is used. 
+
+Open the Dropdown above to see the default options.
+