playbook_ui 15.3.0.pre.alpha.PLAY2569advancedtablecolumnstylingfontcolor11977 → 15.3.0.pre.alpha.PLAY258611978

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f7027d2274da1d6dfe8a9a052e05a16cc070fbaf06eabfda49503f29921061e1
-  data.tar.gz: 2da447f782a24df2caefdc1d1fdfca1d7d00c59b4d183b81019bbd14329e5a42
+  metadata.gz: a1a62cafaa16e4da926d69ebca037e59cce874784adfe55e1650cd94f7152f08
+  data.tar.gz: c3689d869441ef31917edf4c5e124e0a0a1b42f66d9753fea748897b15a20d2e
 SHA512:
-  metadata.gz: 676423ddeb1ef4fd2ce294e898b9743737c49653cf20ce175b9030c56aaf9188dce399d0154fb86aeba902069042bdc4d30e346c41ea878fbe9f006363d977e3
-  data.tar.gz: d2c1a619d69683cc0f1d8673f6b704cbaa2ad89d0d3520f7288e72129b4136b709acd7b81dc3cfcd968301be5dc3ccf51ecab300251c2f57916aae38d8b2f26d
+  metadata.gz: f1274d98903345d89ebb1ab7cf7aa5d07f138aa90fd36e6f5d6fdee3ce3ca242999a02b4f97bfc338408d1f33628c01c0d0277a266ce1abe50b8518c7d298eb7
+  data.tar.gz: be5e89b4822ed1af5030fa5abcc219e36c6cb97fd95b6b414ac91c2e4814686ad834e7b8dca0da3cdaaf0e7ba27abb27911b5247ce54381bf5385f199fb34c81

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

@@ -66,7 +66,6 @@ const TableCellRenderer = ({
         // Find the “owning” colDefinition by accessor. Needed for multi column logic
         const colDef = findColumnDefByAccessor(columnDefinitions ?? [], column.id)
         const cellAlignment = colDef?.columnStyling?.cellAlignment ?? "right"
-        const cellFontColor = colDef?.columnStyling?.fontColor
         const paddingValue = colDef?.columnStyling?.cellPadding ?? customRowStyle?.cellPadding
         const paddingClass = paddingValue ? `p_${paddingValue}` : undefined
 
@@ -89,7 +88,7 @@ const TableCellRenderer = ({
                     : `${column.getStart("left")}px`
                   : undefined,
                   backgroundColor: i === 0 && customRowStyle?.backgroundColor,
-                  color: cellFontColor || customRowStyle?.fontColor,
+                  color: customRowStyle?.fontColor,
             }}
           >
             {collapsibleTrail && i === 0 && row.depth > 0 && renderCollapsibleTrail(row.depth)}

data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx

@@ -740,69 +740,6 @@ test("columnStyling.cellPadding sets cell padding", () => {
   expect(firstEnrollmentCell).toHaveClass('p_none')
 });
 
-test("columnStyling.fontColor sets cell font color", () => {
-  const styledColumnDefs = [
-    {
-      accessor: "year",
-      label: "Year",
-      cellAccessors: ["quarter", "month", "day"],
-    },
-    {
-      accessor: "newEnrollments",
-      label: "New Enrollments",
-      columnStyling: { fontColor: colors.category_1 },
-    },
-    {
-      accessor: "scheduledMeetings",
-      label: "Scheduled Meetings",
-    },
-  ];
-
-  render(
-    <AdvancedTable
-        columnDefinitions={styledColumnDefs}
-        data={{ testid: testId }}
-        tableData={MOCK_DATA}
-    />
-  );
-
-  const firstEnrollmentCell = screen.getAllByText("20")[0].closest("td");
-  expect(firstEnrollmentCell).toHaveStyle({ color: colors.category_1 });
-});
-
-test("columnStyling.fontColor works with background color", () => {
-  const styledColumnDefs = [
-    {
-      accessor: "year",
-      label: "Year",
-      cellAccessors: ["quarter", "month", "day"],
-    },
-    {
-      accessor: "newEnrollments",
-      label: "New Enrollments",
-      columnStyling: { 
-        cellBackgroundColor: (row) => row.newEnrollments > 20 ? "success_secondary" : "warning_secondary",
-        fontColor: colors.white 
-      },
-    },
-    {
-      accessor: "scheduledMeetings",
-      label: "Scheduled Meetings",
-    },
-  ];
-
-  render(
-    <AdvancedTable
-        columnDefinitions={styledColumnDefs}
-        data={{ testid: testId }}
-        tableData={MOCK_DATA}
-    />
-  );
-
-  const firstEnrollmentCell = screen.getAllByText("20")[0].closest("td");
-  expect(firstEnrollmentCell).toHaveStyle({ color: colors.white });
-});
-
 test("renders virtualized table rows and header", () => {
   render(
     <AdvancedTable

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_background_control_rails.html.erb

@@ -26,10 +26,6 @@
     {
       accessor: "classCompletionRate",
       label: "Class Completion Rate",
-      column_styling: { 
-        cell_background_color: "category_1",
-        font_color: "white"
-      }
     },
     {
       accessor: "graduatedStudents",

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

@@ -1 +1 @@
-`column_styling` can also be used to control the background color on all cells in a given column via the use of the `cell_background_color` key/value pair. Use `cell_background_color` to achieve custom background colors for individual cells as seen here. Use `font_color` to achieve better contrast between cell content and background for darker backgrounds.
+`column_styling` can also be used to control the background color on all cells in a given column via the use of the `cell_background_color` key/value pair. Use `cell_background_color` to achieve custom background colors for individual cells as seen here.

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

@@ -1,8 +1,7 @@
 import React from "react"
-import { AdvancedTable, colors } from "playbook-ui"
+import AdvancedTable from '../../pb_advanced_table/_advanced_table'
 import MOCK_DATA from "./advanced_table_mock_data.json"
 
-
 const AdvancedTableColumnStyling = (props) => {
   const columnDefinitions = [
     {
@@ -35,7 +34,6 @@ const AdvancedTableColumnStyling = (props) => {
     {
       accessor: "graduatedStudents",
       label: "Graduated Students",
-      columnStyling:{fontColor: colors.data_8},
     },
   ]
 

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

@@ -4,6 +4,4 @@ The `columnStyling` prop is an optional item that can be used within `columnDefi
 
 2) `cellAlignment`: This will allow you to control alignment of content within all cells in the given column. This is set to right aligned by default. you can set this to `left`, `right` or `center`.
 
-3) `fontColor`: This will allow you to control the font color for a given column.
-
 `columnStyling` can be used within the columnDefinition of all the columns or some of them, as shown. Each column has its own individual control in this way. 

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { AdvancedTable, Background,colors } from "playbook-ui";
+import AdvancedTable from '../../pb_advanced_table/_advanced_table';
 import MOCK_DATA from "./advanced_table_mock_data.json";
 
 const AdvancedTableColumnStylingColumnHeaders = (props) => {
@@ -38,24 +38,11 @@ const AdvancedTableColumnStylingColumnHeaders = (props) => {
             {
               accessor: "completedClasses",
               label: "Completed Classes",
-              columnStyling:{
-                headerAlignment: "center", 
-                cellAlignment: "center",
-                fontColor: colors.success,
-              },
+              columnStyling:{headerAlignment: "center", cellAlignment: "center"},
             },
             {
               accessor: "classCompletionRate",
               label: "Class Completion Rate",
-              columnStyling: { cellPadding: "none", fontColor: colors.error },
-              customRenderer: (row, value) => (
-                <Background 
-                    backgroundColor={"warning_secondary"}
-                    padding="xs" 
-                >
-                {value}
-                </Background>
-              ), 
             },
           ],
         },
@@ -65,7 +52,6 @@ const AdvancedTableColumnStylingColumnHeaders = (props) => {
             {
               accessor: "attendanceRate",
               label: "Attendance Rate",
-              columnStyling: { fontColor: colors.category_1 },
             },
             {
               accessor: "scheduledMeetings",

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_column_headers_rails.html.erb

@@ -32,15 +32,11 @@
           {
             accessor: "completedClasses",
             label: "Completed Classes",
-            column_styling:{header_alignment:"center", cell_alignment:"center", font_color:"#28A745"}
+            column_styling:{header_alignment:"center", cell_alignment:"center"}
           },
           {
             accessor: "classCompletionRate",
             label: "Class Completion Rate",
-            column_styling: { 
-              cell_background_color: "warning_secondary",
-              font_color: "red"
-            }
           },
         ],
       },
@@ -50,7 +46,6 @@
           {
             accessor: "attendanceRate",
             label: "Attendance Rate",
-            column_styling: { font_color: "#0056CF" }
           },
           {
             accessor: "scheduledMeetings",

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_rails.html.erb

@@ -29,7 +29,6 @@
     {
       accessor: "graduatedStudents",
       label: "Graduated Students",
-      column_styling: { font_color: "red" }
     }
 ] %>
 

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

@@ -4,6 +4,4 @@ The `column_styling` prop is an optional item that can be used within `column_de
 
 2) `cell_alignment`: This will allow you to control alignment of content within all cells in the given column. This is set to right aligned by default. you can set this to `left`, `right` or `center`.
 
-3) `font_color`: This will allow you to control the font color for a given column.
-
 `column_styling` can be used within the column_definition of all the columns or some of them, as shown. Each column has its own individual control in this way. 

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

@@ -22,6 +22,7 @@ const AdvancedTablePaddingControl = (props) => {
          {value}
         </Background>
       ), 
+
     },
     {
       accessor: "scheduledMeetings",
@@ -38,15 +39,6 @@ const AdvancedTablePaddingControl = (props) => {
     {
       accessor: "classCompletionRate",
       label: "Class Completion Rate",
-      columnStyling:{cellPadding: "none", fontColor: "white"},
-      customRenderer: (row, value) => (
-        <Background 
-            backgroundColor={"category_1"}
-            padding="xs" 
-        >
-         {value}
-        </Background>
-      ), 
     },
     {
       accessor: "graduatedStudents",

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

@@ -1,3 +1,3 @@
 `columnStyling` can also be used to control padding on all cells in a given column via the use of the `cellPadding` key/value pair. `cellPadding` lets you use 'xxs', 'xs', 'sm', 'md', 'lg', 'xl' and 'none'.  
 
-This control can be used in conjunction with the `customRenderer` item within each columnDefinition to achieve custom background colors for individual cells as seen here. Use `fontColor` to achieve better contrast between cell content and background for darker backgrounds.
+This control can be used in conjunction with the `customRenderer` item within each columnDefinition to achieve custom background colors for individual cells as seen here. 

data/app/pb_kits/playbook/pb_advanced_table/table_row.rb

@@ -79,44 +79,15 @@ module Playbook
         cell_background_color(column).present?
       end
 
-      def cell_font_color(column)
-        return nil unless column[:accessor].present?
-
-        orig_def = find_column_def_by_accessor(column_definitions, column[:accessor])
-        if orig_def && orig_def[:column_styling].is_a?(Hash) && orig_def[:column_styling][:font_color].present?
-          font_color = orig_def[:column_styling][:font_color]
-          if font_color.respond_to?(:call)
-            font_color.call(row)
-          else
-            font_color
-          end
-        end
-      end
-
       # Uses a regular table/table_cell component if there is no custom background color; if there is a cell_background_color uses a background component with tag "td"
       def cell_component_info(column, index, bg_color, font_color)
-        column_font_color = cell_font_color(column)
-        effective_font_color = column_font_color || font_color
-
         if has_custom_background_color?(column)
           custom_bg_color = cell_background_color(column)
           component_name = "background"
-          component_props = {
-            background_color: custom_bg_color,
-            tag: "td",
-            classname: td_classname(column, index),
-          }
-          component_props[:html_options] = { style: { color: effective_font_color } } if effective_font_color.present?
+          component_props = { background_color: custom_bg_color, tag: "td", classname: td_classname(column, index) }
         else
           component_name = "table/table_cell"
-          style_hash = { "background-color": bg_color }
-          style_hash[:color] = effective_font_color if effective_font_color.present?
-          component_props = {
-            html_options: {
-              style: style_hash,
-            },
-            classname: td_classname(column, index),
-          }
+          component_props = { html_options: { style: { "background-color": bg_color, color: font_color } }, classname: td_classname(column, index) }
         end
 
         { name: component_name, props: component_props }

data/app/pb_kits/playbook/pb_background/background.html.erb

@@ -1,11 +1,3 @@
-<% 
-  html_options_style = ""
-  if object.html_options[:style].is_a?(Hash)
-    html_options_style = object.html_options[:style].map { |k, v| "#{k.to_s.tr('_', '-')}: #{v}" }.join("; ")
-  elsif object.html_options[:style].is_a?(String)
-    html_options_style = object.html_options[:style]
-  end
-%>
 <% if object.image_url.present? %>
   <%= pb_content_tag(object.tag,
       style: "background-image: url('#{object.image_url}');
@@ -17,8 +9,8 @@
   <% end %>
 <% else %>
   <%= pb_content_tag(object.tag,
-      style: "#{object.custom_background_color}#{html_options_style.present? ? "; #{html_options_style}" : ""}"
+      style: object.custom_background_color
   ) do %>
     <%= content.presence %>
   <% end %>
-<% end %>
+<% end %>

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..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/_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/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_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