playbook_ui 15.3.0.pre.alpha.PLAY260211784 → 15.3.0.pre.alpha.play2464flexitemcantusehtmloptions12226

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.
+

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

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

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

@@ -0,0 +1 @@
+To set a default value for the Dropdown, you can use the label of the range you want set as default, for example "This Year", "Today", etc. 

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

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

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

@@ -0,0 +1 @@
+The optional `rangeEndsToday` prop can be used with the quickpick variant to set end date on all ranges that start with 'this' to today's date. For instance, by default 'This Year' will set end day to 12/31/(current year), but if `rangeEndsToday` prop is used, end date on that range will be today's date.

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

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

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_with_date_pickers.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_dropdown/docs/_dropdown_with_custom_active_style_options_react.md

@@ -1,4 +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
+`fontColor` **Type**: String | **Values**: primary | all [Playbook Text Colors](https://playbook.powerapp.cloud/global_props/colors) | **Default**: (no selection) is white

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

@@ -49,4 +49,9 @@ examples:
   - dropdown_clear_selection: Clear Selection
   - dropdown_separators_hidden: Separators Hidden
   - dropdown_with_external_control: useDropdown Hook
+  - dropdown_quickpick: Quick Pick Variant
+  - dropdown_quickpick_range_end: Quick Pick Variant (Range Ends Today)
+  - dropdown_quickpick_default_dates: Quick Pick Variant (Default Dates)
+  - dropdown_quickpick_with_date_pickers: Quick Pick Variant with Date Pickers
+
 

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

@@ -22,4 +22,8 @@ export { default as DropdownMultiSelectWithDefault } from './_dropdown_multi_sel
 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 DropdownWithCustomActiveStyleOptions} from './_dropdown_with_custom_active_style_options.jsx'
+export {default as DropdownWithCustomActiveStyleOptions} from './_dropdown_with_custom_active_style_options.jsx'
+export { default as DropdownQuickpick } from './_dropdown_quickpick.jsx'
+export { default as DropdownQuickpickRangeEnd } from './_dropdown_quickpick_range_end.jsx'
+export { default as DropdownQuickpickDefaultDates } from './_dropdown_quickpick_default_dates.jsx'
+export { default as DropdownQuickpickWithDatePickers } from './_dropdown_quickpick_with_date_pickers.jsx'

data/app/pb_kits/playbook/pb_dropdown/dropdown.test.jsx

@@ -1,4 +1,4 @@
-import React from "react"
+import React, { useState } from "react"
 import { render, screen, fireEvent } from "../utilities/test-utils"
 
 import { Dropdown, Icon, IconCircle } from 'playbook-ui'
@@ -393,4 +393,150 @@ test("applies activeStyle backgroundColor and fontColor when selected", () => {
     expect(selected).toBeInTheDocument()
     expect(selected).toHaveClass("bg-bg_light")
     expect(selected).toHaveClass("font-primary")
-  })
+  })
+
+test("renders quickpick variant with auto-generated options", () => {
+  render(
+    <Dropdown
+        data={{ testid: testId }}
+        variant="quickpick"
+    />
+  )
+  
+  const kit = screen.getByTestId(testId)
+  expect(kit).toHaveClass('pb_dropdown_quickpick')
+  
+  // Check that quickpick options are generated
+  const options = kit.querySelectorAll('.pb_dropdown_option_list')
+  expect(options.length).toBe(10)
+  expect(options[0]).toHaveTextContent("Today")
+})
+
+test("quickpick variant accepts string defaultValue", () => {
+  render(
+    <Dropdown
+        data={{ testid: testId }}
+        defaultValue="This Month"
+        variant="quickpick"
+    />
+  )
+  
+  const kit = screen.getByTestId(testId)
+  const trigger = kit.querySelector('.pb_dropdown_trigger')
+  
+  expect(trigger).toHaveTextContent("This Month")
+})
+
+test("quickpick attaches _dropdownRef to DOM element when id is provided", () => {
+  render(
+    <Dropdown
+        data={{ testid: testId }}
+        id="test-quickpick"
+        variant="quickpick"
+    />
+  )
+  
+  const kit = screen.getByTestId(testId)
+  
+  // Check that the element has the _dropdownRef attached
+  expect(kit._dropdownRef).toBeDefined()
+  expect(kit._dropdownRef.current).toBeDefined()
+  expect(kit._dropdownRef.current.clearSelected).toBeDefined()
+})
+
+test("quickpick clears selection when clicking X icon", () => {
+  render(
+    <Dropdown
+        data={{ testid: testId }}
+        defaultValue="This Week"
+        variant="quickpick"
+    />
+  )
+  
+  const kit = screen.getByTestId(testId)
+  const trigger = kit.querySelector('.pb_dropdown_trigger')
+  
+  expect(trigger).toHaveTextContent("This Week")
+  
+  const clearIcon = kit.querySelector('[aria-label="times icon"]')
+  expect(clearIcon).toBeInTheDocument()
+  
+  fireEvent.click(clearIcon.parentElement)
+  
+  expect(trigger).toHaveTextContent("Select...")
+})
+
+test("quickpick returns date array values when option selected", () => {
+  const TestComponent = () => {
+    const [selected, setSelected] = useState(null)
+    return (
+      <>
+        <Dropdown
+            data={{ testid: testId }}
+            onSelect={(item) => setSelected(item)}
+            variant="quickpick"
+        />
+        {selected && (
+          <div data-testid="selected-value">
+            {JSON.stringify({
+              label: selected.label,
+              hasValue: !!selected.value,
+              isArray: Array.isArray(selected.value),
+              valueLength: selected.value?.length
+            })}
+          </div>
+        )}
+      </>
+    )
+  }
+
+  render(<TestComponent />)
+  
+  const kit = screen.getByTestId(testId)
+  const options = kit.querySelectorAll('.pb_dropdown_option_list')
+  
+  fireEvent.click(options[0])
+  
+  const selectedValue = screen.getByTestId('selected-value')
+  const data = JSON.parse(selectedValue.textContent)
+  
+  expect(data.label).toBe("Today")
+  expect(data.hasValue).toBe(true)
+  expect(data.isArray).toBe(true)
+  expect(data.valueLength).toBe(2)
+})
+
+test("quickpick option values are Date objects", () => {
+  const onSelectMock = jest.fn()
+  
+  render(
+    <Dropdown
+        data={{ testid: testId }}
+        onSelect={onSelectMock}
+        variant="quickpick"
+    />
+  )
+  
+  const kit = screen.getByTestId(testId)
+  const options = kit.querySelectorAll('.pb_dropdown_option_list')
+  
+  const thisMonthOption = Array.from(options).find(opt => opt.textContent === 'This Month')
+  fireEvent.click(thisMonthOption)
+  
+  const selectedItem = onSelectMock.mock.calls[0][0]
+  
+  expect(selectedItem.label).toBe("This Month")
+  expect(selectedItem.value).toBeDefined()
+  expect(Array.isArray(selectedItem.value)).toBe(true)
+  expect(selectedItem.value.length).toBe(2)
+  
+  const [startDate, endDate] = selectedItem.value
+  
+  expect(startDate instanceof Date).toBe(true)
+  expect(endDate instanceof Date).toBe(true)
+  
+  expect(startDate.getTime()).not.toBeNaN()
+  expect(endDate.getTime()).not.toBeNaN()
+  
+  expect(endDate.getTime()).toBeGreaterThanOrEqual(startDate.getTime())
+})

data/app/pb_kits/playbook/pb_dropdown/quickpick/index.ts

@@ -0,0 +1,60 @@
+// QuickPick default options for Dropdown
+// This provides date range options similar to the DatePicker QuickPick functionality
+
+import DateTime from '../../pb_kit/dateTime';
+
+type QuickPickOption = {
+  label: string;
+  value: Date[];
+  formattedStartDate?: string;
+  formattedEndDate?: string;
+  id?: string;
+};
+
+// Helper to get QuickPick options with date ranges
+const getQuickPickOptions = (rangeEndsToday = false): QuickPickOption[] => {
+  const today = new Date();
+  const yesterday = DateTime.getYesterdayDate(new Date());
+
+  const thisWeekStartDate = DateTime.getFirstDayOfWeek(new Date());
+  const thisWeekEndDate = rangeEndsToday ? new Date() : DateTime.getLastDayOfWeek(new Date());
+  const lastWeekStartDate = DateTime.getPreviousWeekStartDate(new Date());
+  const lastWeekEndDate = DateTime.getPreviousWeekEndDate(new Date());
+
+  const thisMonthStartDate = DateTime.getMonthStartDate(new Date());
+  const thisMonthEndDate = rangeEndsToday ? new Date() : DateTime.getMonthEndDate(new Date());
+  const lastMonthStartDate = DateTime.getPreviousMonthStartDate(new Date());
+  const lastMonthEndDate = DateTime.getPreviousMonthEndDate(new Date());
+
+  const thisQuarterStartDate = DateTime.getQuarterStartDate(new Date());
+  const thisQuarterEndDate = rangeEndsToday ? new Date() : DateTime.getQuarterEndDate(new Date());
+  const lastQuarterStartDate = DateTime.getPreviousQuarterStartDate(new Date());
+  const lastQuarterEndDate = DateTime.getPreviousQuarterEndDate(new Date());
+
+  const thisYearStartDate = DateTime.getYearStartDate(new Date());
+  const thisYearEndDate = rangeEndsToday ? new Date() : DateTime.getYearEndDate(new Date());
+  const lastYearStartDate = DateTime.getPreviousYearStartDate(new Date());
+  const lastYearEndDate = DateTime.getPreviousYearEndDate(new Date());
+
+  const formatDate = (date: Date) => {
+  const day = String(date.getDate()).padStart(2, "0")
+  const month = String(date.getMonth() + 1).padStart(2, "0")
+  const year = date.getFullYear()
+
+  return `${month}/${day}/${year}`
+}
+  return [
+    { label: 'Today', value: [today, today], id: 'quickpick-today' },
+    { label: 'Yesterday', value: [yesterday, yesterday], formattedStartDate: `${formatDate(yesterday)}`, formattedEndDate: `${formatDate(yesterday)}`, id: 'quickpick-yesterday' },
+    { label: 'This Week', value: [thisWeekStartDate, thisWeekEndDate], formattedStartDate: `${formatDate(thisWeekStartDate)}`, formattedEndDate: `${formatDate(thisWeekEndDate)}`, id: 'quickpick-this-week' },
+    { label: 'This Month', value: [thisMonthStartDate, thisMonthEndDate], formattedStartDate: `${formatDate(thisMonthStartDate)}`, formattedEndDate: `${formatDate(thisMonthEndDate)}`, id: 'quickpick-this-month' },
+    { label: 'This Quarter', value: [thisQuarterStartDate, thisQuarterEndDate], formattedStartDate: `${formatDate(thisQuarterStartDate)}`, formattedEndDate: `${formatDate(thisQuarterEndDate)}`, id: 'quickpick-this-quarter' },
+    { label: 'This Year', value: [thisYearStartDate, thisYearEndDate], formattedStartDate: `${formatDate(thisYearStartDate)}`, formattedEndDate: `${formatDate(thisYearEndDate)}`, id: 'quickpick-this-year' },
+    { label: 'Last Week', value: [lastWeekStartDate, lastWeekEndDate], formattedStartDate: `${formatDate(lastWeekStartDate)}`, formattedEndDate: `${formatDate(lastWeekEndDate)}`, id: 'quickpick-last-week' },
+    { label: 'Last Month', value: [lastMonthStartDate, lastMonthEndDate], formattedStartDate: `${formatDate(lastMonthStartDate)}`, formattedEndDate: `${formatDate(lastMonthEndDate)}`, id: 'quickpick-last-month' },
+    { label: 'Last Quarter', value: [lastQuarterStartDate, lastQuarterEndDate], formattedStartDate: `${formatDate(lastQuarterStartDate)}`, formattedEndDate: `${formatDate(lastQuarterEndDate)}`, id: 'quickpick-last-quarter' },
+    { label: 'Last Year', value: [lastYearStartDate, lastYearEndDate], formattedStartDate: `${formatDate(lastYearStartDate)}`, formattedEndDate: `${formatDate(lastYearEndDate)}`, id: 'quickpick-last-year' },
+  ];
+};
+
+export default getQuickPickOptions

data/app/pb_kits/playbook/pb_filter/docs/_filter_max_width.md

@@ -1 +1 @@
-Filter can leverage the max-width property. Learn more in our <a href="https://playbook.powerapp.cloud/visual_guidelines" target="_blank">visual guidelines.</a>
+Filter 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_fixed_confirmation_toast/docs/_fixed_confirmation_toast_auto_close.html.erb

@@ -22,13 +22,27 @@
 }) %>
 
 <script>
+// Hide toasts immediately
+const hideAutoToasts = () => {
+  const toastAuto = document.getElementById('toast-auto-close');
+  const toastAutoCloseable = document.getElementById('toast-auto-close-closeable');
+  if (toastAuto) toastAuto.style.display = 'none';
+  if (toastAutoCloseable) toastAutoCloseable.style.display = 'none';
+}
+hideAutoToasts();
+
+// Handle various page load/restore events
+window.addEventListener('pageshow', hideAutoToasts)
+document.addEventListener('turbolinks:load', hideAutoToasts)
+document.addEventListener('turbo:load', hideAutoToasts)
+
 document.addEventListener('DOMContentLoaded', () => {
   // Initialize toast elements and buttons
   const toasts = {
     '#toast-auto-close': document.querySelector("#toast-auto-close"),
     '#toast-auto-close-closeable': document.querySelector("#toast-auto-close-closeable")
   }
-  
+
   const buttons = {
     '#toast-auto-close': document.querySelector("button[data-toast='#toast-auto-close']"),
     '#toast-auto-close-closeable': document.querySelector("button[data-toast='#toast-auto-close-closeable']")