playbook_ui 15.3.0.pre.alpha.PLAY2601advancedtablecustomcellmultiheaderrails12030 → 15.3.0.pre.alpha.PLAY2624stickyColumnnullerror12217

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_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']")

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.html.erb

@@ -24,7 +24,6 @@
   horizontal: "center"
 }) %>
 
-
 <script type="text/javascript">
   const multitoasts = document.querySelectorAll(".multitoast-to-hide")
   const multibuttons = document.querySelectorAll("button[data-multitoast]")
@@ -35,6 +34,15 @@
     })
   }
 
+  // Hide toasts immediately
+  hideMultiToasts()
+
+  // Handle various page load/restore events
+  window.addEventListener('pageshow', hideMultiToasts)
+  document.addEventListener('DOMContentLoaded', hideMultiToasts)
+  document.addEventListener('turbolinks:load', hideMultiToasts)
+  document.addEventListener('turbo:load', hideMultiToasts)
+
   multibuttons.forEach((button) => {
     button.onclick = () => {
       hideMultiToasts()
@@ -46,10 +54,3 @@
     }
   })
 </script>
-
-<!-- hiding toast on page load -->
-<style>
-  #toast-long, #toast-short {
-    display: none;
-  }
-</style>

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_positions.html.erb

@@ -69,27 +69,28 @@
   const toasts = document.querySelectorAll(".toast-to-hide")
   const buttons = document.querySelectorAll("button[data-toast]")
 
-  const hideToasts = () => {
+  const hidePositionToasts = () => {
     toasts.forEach((toast) => {
       toast.style.display = "none"
     })
   }
 
+  // Hide toasts immediately
+  hidePositionToasts()
+
+  // Handle various page load/restore events
+  window.addEventListener('pageshow', hidePositionToasts)
+  document.addEventListener('DOMContentLoaded', hidePositionToasts)
+  document.addEventListener('turbolinks:load', hidePositionToasts)
+  document.addEventListener('turbo:load', hidePositionToasts)
+
   buttons.forEach((button) => {
     button.onclick = () => {
-      hideToasts()
+      hidePositionToasts()
       let toast = document.querySelector(button.getAttribute("data-toast"))
-
       if (toast) {
         toast.style.display = "flex"
       }
     }
   })
 </script>
-
-<!-- hiding toast on page load -->
-<style>
-  #toast-top-center, #toast-top-right, #toast-top-left, #toast-bottom-center, #toast-bottom-right, #toast-bottom-left {
-    display: none;
-  }
-</style>

data/app/pb_kits/playbook/pb_form/pb_form_validation.js

@@ -8,13 +8,13 @@ const ERROR_MESSAGE_SELECTOR   = '.pb_body_kit_negative'
 // Validation selectors
 const FORM_SELECTOR            = 'form[data-pb-form-validation="true"]'
 const REQUIRED_FIELDS_SELECTOR = 'input[required],textarea[required],select[required]'
+const PHONE_NUMBER_VALIDATION_ERROR_SELECTOR = '[data-pb-phone-validation-error="true"]'
 
 const FIELD_EVENTS = [
   'change',
   'valid',
   'invalid',
 ]
-
 class PbFormValidation extends PbEnhancedElement {
   static get selector() {
     return FORM_SELECTOR
@@ -22,12 +22,27 @@ class PbFormValidation extends PbEnhancedElement {
 
   connect() {
     this.formValidationFields.forEach((field) => {
+      // Skip phone number inputs - they handle their own validation
+      const isPhoneNumberInput = field.closest('.pb_phone_number_input')
+      if (isPhoneNumberInput) return
+
       FIELD_EVENTS.forEach((e) => {
         field.addEventListener(e, debounce((event) => {
           this.validateFormField(event)
         }, 250), false)
       })
     })
+
+    // Add event listener to check for phone number validation errors
+    this.element.addEventListener('submit', (event) => {
+      // Use setTimeout to ensure React state updates have completed
+      setTimeout(() => {
+        if (this.hasPhoneNumberValidationErrors()) {
+          event.preventDefault()
+          return false
+        }
+      }, 0)
+    })
   }
 
   validateFormField(event) {
@@ -45,40 +60,58 @@ class PbFormValidation extends PbEnhancedElement {
 
   showValidationMessage(target) {
     const { parentElement } = target
+    const kitElement = parentElement.closest(KIT_SELECTOR)
+
+    // FIX: Add null check for kitElement
+    if (!kitElement) return
+
+    // Check if this is a phone number input
+    const isPhoneNumberInput = kitElement.classList.contains('pb_phone_number_input')
 
     // ensure clean error message state
     this.clearError(target)
-    parentElement.closest(KIT_SELECTOR).classList.add('error')
+    kitElement.classList.add('error')
 
-    // set the error message element
-    const errorMessageContainer = this.errorMessageContainer
+    // Only add error message if it's NOT a phone number input
+    if (!isPhoneNumberInput) {
+      // set the error message element
+      const errorMessageContainer = this.errorMessageContainer
 
-    if (target.dataset.message) target.setCustomValidity(target.dataset.message)
+      if (target.dataset.message) target.setCustomValidity(target.dataset.message)
 
-    errorMessageContainer.innerHTML = target.validationMessage
+      errorMessageContainer.innerHTML = target.validationMessage
 
-    // add the error message element to the dom tree
-    parentElement.appendChild(errorMessageContainer)
+      // add the error message element to the dom tree
+      parentElement.appendChild(errorMessageContainer)
+    }
   }
 
   clearError(target) {
     const { parentElement } = target
-    parentElement.closest(KIT_SELECTOR).classList.remove('error')
+    const kitElement = parentElement.closest(KIT_SELECTOR)
+    // Remove error class from kit element
+    if (kitElement) kitElement.classList.remove('error')
+    // Remove error message from parent element
     const errorMessageContainer = parentElement.querySelector(ERROR_MESSAGE_SELECTOR)
     if (errorMessageContainer) errorMessageContainer.remove()
   }
 
+  // Check if there are phone number input errors
+  hasPhoneNumberValidationErrors() {
+    const phoneNumberErrors = this.element.querySelectorAll(PHONE_NUMBER_VALIDATION_ERROR_SELECTOR)
+    return phoneNumberErrors.length > 0
+  }
+
   get errorMessageContainer() {
     const errorContainer = document.createElement('div')
     const kitClassName = ERROR_MESSAGE_SELECTOR.replace(/\./, '')
     errorContainer.classList.add(kitClassName)
     return errorContainer
   }
-
   get formValidationFields() {
     return this._formValidationFields =
       this._formValidationFields || this.element.querySelectorAll(REQUIRED_FIELDS_SELECTOR)
   }
 }
 
-window.PbFormValidation = PbFormValidation
+window.PbFormValidation = PbFormValidation

data/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx

@@ -9,7 +9,7 @@ import { buildDataProps, buildHtmlProps } from '../utilities/props'
 
 type FormPillProps = {
   className?: string,
-  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void) | ((event: any) => void) | any},
   id?: string,
   text: string,
   name?: string,