playbook_ui 15.6.0.pre.alpha.play266913088 → 15.6.0.pre.rc.0

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

@@ -275,80 +275,6 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
 
   const { setMinDate, setMaxDate } = getMinMaxDates()
 
-  // Default Date + Min/Max Date Initialization Helper Functions section ----/
-  const toDateObject = (dateValue: any): Date | null => {
-    if (!dateValue) return null
-    if (dateValue instanceof Date) return dateValue
-    if (typeof dateValue === 'string') {
-      const parsed = new Date(dateValue)
-      return isNaN(parsed.getTime()) ? null : parsed
-    }
-    if (typeof dateValue === 'number') {
-      return new Date(dateValue)
-    }
-    return null
-  }
-
-  // Formatting Date for Flatpickr
-  const formatDateForFlatpickr = (dateValue: any): string | null => {
-    const dateObj = toDateObject(dateValue)
-    if (!dateObj) return null
-    
-    const year = dateObj.getFullYear()
-    const month = String(dateObj.getMonth() + 1).padStart(2, '0')
-    const day = String(dateObj.getDate()).padStart(2, '0')
-    return `${year}-${month}-${day}`
-  }
-
-  // Helper to check if defaultDate is earlier than minDate
-  const isDefaultDateBeforeMinDate = (defaultDateValue: any, minDateValue: any): boolean => {
-    if (!defaultDateValue || !minDateValue) return false
-    
-    const defaultDateObj = toDateObject(defaultDateValue)
-    const minDateObj = toDateObject(minDateValue)
-    
-    if (!defaultDateObj || !minDateObj) return false
-
-    const defaultDateOnly = new Date(defaultDateObj.getFullYear(), defaultDateObj.getMonth(), defaultDateObj.getDate())
-    const minDateOnly = new Date(minDateObj.getFullYear(), minDateObj.getMonth(), minDateObj.getDate())
-    
-    return defaultDateOnly < minDateOnly
-  }
-
-  // Helper to check if defaultDate is later than maxDate
-  const isDefaultDateAfterMaxDate = (defaultDateValue: any, maxDateValue: any): boolean => {
-    if (!defaultDateValue || !maxDateValue) return false
-    
-    const defaultDateObj = toDateObject(defaultDateValue)
-    const maxDateObj = toDateObject(maxDateValue)
-    
-    if (!defaultDateObj || !maxDateObj) return false
-    
-    const defaultDateOnly = new Date(defaultDateObj.getFullYear(), defaultDateObj.getMonth(), defaultDateObj.getDate())
-    const maxDateOnly = new Date(maxDateObj.getFullYear(), maxDateObj.getMonth(), maxDateObj.getDate())
-    
-    return defaultDateOnly > maxDateOnly
-  }
-
-  const defaultDateValue: any = defaultDateGetter()
-  // Only check for and out-of-range if user actually provided minDate/maxDate constraints
-  const isBeforeMin = minDate && isDefaultDateBeforeMinDate(defaultDateValue, setMinDate)
-  const isAfterMax = maxDate && isDefaultDateAfterMaxDate(defaultDateValue, setMaxDate)
-  
-  // Store these values for use in onClose handler
-  const hasOutOfRangeDefault = (isBeforeMin || isAfterMax) && defaultDateValue
-  
-  // Temporarily adjust minDate/maxDate to allow defaultDate to render if it's out of range via user provided minDate/maxDate constraints
-  const effectiveMinDate = isBeforeMin && defaultDateValue && minDate
-    ? formatDateForFlatpickr(defaultDateValue) || setMinDate
-    : setMinDate
-  
-  const effectiveMaxDate = isAfterMax && defaultDateValue && maxDate
-    ? formatDateForFlatpickr(defaultDateValue) || setMaxDate
-    : setMaxDate
-  
-  // End of Default Date + Min/Max Date Initialization Helper Functions section ----/
-  
   flatpickr(`#${pickerId}`, {
     allowInput,
     closeOnSelect,
@@ -360,32 +286,11 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     locale: {
       rangeSeparator: ' to '
     },
-    maxDate: effectiveMaxDate,
-    minDate: effectiveMinDate,
+    maxDate: setMaxDate,
+    minDate: setMinDate,
     mode,
     nextArrow: '<i class="far fa-angle-right"></i>',
     onOpen: [(_selectedDates, _dateStr, fp) => {
-      // If defaultDate was out of range of a dev set min/max date, restore it when calendar opens (in situation where the input was manually cleared or the calendar was closed without selection)
-      if (hasOutOfRangeDefault) {
-        const dateObj = toDateObject(defaultDateValue)
-        if (dateObj) {
-          const inputIsBlank = !fp.input.value || fp.input.value.trim() === ''
-          const noSelection = !fp.selectedDates || fp.selectedDates.length === 0
-          
-          if (inputIsBlank || noSelection) {
-            const formattedDate = fp.formatDate(dateObj, getDateFormat())
-            if (formattedDate) {
-              fp.input.value = formattedDate
-            }
-            fp.selectedDates = [dateObj]
-            fp.jumpToDate(dateObj)
-            setTimeout(() => {
-              yearChangeHook(fp)
-            }, 0)
-          }
-        }
-      }
-      
       calendarResizer()
       if (resizeRepositionHandlerRef) {
         window.removeEventListener('resize', resizeRepositionHandlerRef)
@@ -398,30 +303,12 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
       if (!staticPosition && scrollContainer) attachToScroll(scrollContainer)
       positionCalendarIfNeeded(fp)
     }],
-    onClose: [(selectedDates, dateStr, fp) => {
+    onClose: [(selectedDates, dateStr) => {
       if (resizeRepositionHandlerRef) {
         window.removeEventListener('resize', resizeRepositionHandlerRef)
         resizeRepositionHandlerRef = null
       }
       if (!staticPosition && scrollContainer) detachFromScroll(scrollContainer as HTMLElement)
-      
-      // If defaultDate was out of range and no date was selected, preserve the default date
-      if (hasOutOfRangeDefault && (!selectedDates || selectedDates.length === 0)) {
-        const dateObj = toDateObject(defaultDateValue)
-        if (dateObj && fp.input) {
-          const formattedDate = fp.formatDate(dateObj, getDateFormat())
-          if (formattedDate) {
-            setTimeout(() => {
-              if (fp.input && (!fp.selectedDates || fp.selectedDates.length === 0)) {
-                fp.input.value = formattedDate
-                fp.selectedDates = [dateObj]
-                fp.jumpToDate(dateObj)
-              }
-            }, 0)
-          }
-        }
-      }
-      
       onClose(selectedDates, dateStr)
     }],
     onChange: [(selectedDates, dateStr, fp) => {
@@ -443,71 +330,6 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
   const picker = document.querySelector<HTMLElement & { [x: string]: any }>(`#${pickerId}`)._flatpickr
   picker.innerContainer.parentElement.id = `cal-${pickerId}`
 
-  // If defaultDate was out of range, restore the original minDate/maxDate after initialization (defaultDate displayed, still cannot select dates outside the actual range via user provided minDate/maxDate constraints)
-  if ((isBeforeMin || isAfterMax) && defaultDateValue) {
-    const dateObj = toDateObject(defaultDateValue)
-    const formattedDate = dateObj ? picker.formatDate(dateObj, getDateFormat()) : null
-    
-    setTimeout(() => {
-      if (!dateObj || !picker.input || !formattedDate) return
-
-      picker.setDate(dateObj, false)
-
-      if (isBeforeMin && setMinDate && minDate) {
-        picker.set('minDate', setMinDate)
-      }
-      if (isAfterMax && setMaxDate && maxDate) {
-        picker.set('maxDate', setMaxDate)
-      }
-      picker.input.value = formattedDate
-
-      picker.selectedDates = [dateObj]
-      
-      setTimeout(() => {
-        yearChangeHook(picker)
-      }, 0)
-      
-      // Restore function for out-of-range default dates
-      const restoreOutOfRangeValue = () => {
-        if (!picker.input) return
-        
-        const inputIsBlank = !picker.input.value || picker.input.value.trim() === ''
-        const noSelection = !picker.selectedDates || picker.selectedDates.length === 0
-        
-        if (inputIsBlank || noSelection) {
-          setTimeout(() => {
-            if (picker.input && (!picker.input.value || picker.input.value.trim() === '')) {
-              picker.input.value = formattedDate
-            }
-            if (!picker.selectedDates || picker.selectedDates.length === 0) {
-              picker.selectedDates = [dateObj]
-              if (picker.isOpen) {
-                picker.jumpToDate(dateObj)
-                picker.redraw()
-                setTimeout(() => {
-                  yearChangeHook(picker)
-                }, 0)
-              }
-            }
-          }, 0)
-        }
-      }
-      
-      const originalClear = picker.clear.bind(picker)
-      picker.clear = function(...args: any[]) {
-        const result = originalClear(...args)
-        setTimeout(() => restoreOutOfRangeValue(), 0)
-        return result
-      }
-
-      picker.input.addEventListener('input', restoreOutOfRangeValue)
-      
-      picker.config.onClose.push(() => {
-        restoreOutOfRangeValue()
-      })
-    }, 10)
-  }
-
   // replace year selector with dropdown
   picker.yearElements[0].parentElement.innerHTML = `<select class="numInput cur-year" type="number" tabIndex="-1" aria-label="Year" id="year-${pickerId}"></select>`
 
@@ -570,16 +392,10 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     picker.config.onClose.push((selectedDates: string) => {
       if (selectedDates?.length) {
         const element = document.querySelector(`#${syncStartWith}`) as any;
-        // Check if it's a React Dropdown (has _dropdownRef)
+        // Check if it's a Dropdown QuickPick (has _dropdownRef) or DatePicker QuickPick (has _flatpickr)
         if (element?._dropdownRef?.current) {
           element._dropdownRef.current.clearSelected();
-        }
-        // Check if it's a Rails Dropdown (has _pbDropdownInstance)
-        else if (element?._pbDropdownInstance) {
-          element._pbDropdownInstance.clearSelected();
-        }
-        // Check if it's a DatePicker QuickPick (has _flatpickr)
-        else {
+        } else {
           const quickpick = element?._flatpickr;
           quickpick?.clear();
         }
@@ -592,16 +408,10 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     picker.config.onClose.push((selectedDates: string) => {
       if (selectedDates?.length) {
         const element = document.querySelector(`#${syncEndWith}`) as any;
-        // Check if it's a React Dropdown (has _dropdownRef)
+        // Check if it's a Dropdown QuickPick (has _dropdownRef) or DatePicker QuickPick (has _flatpickr)
         if (element?._dropdownRef?.current) {
           element._dropdownRef.current.clearSelected();
-        }
-        // Check if it's a Rails Dropdown (has _pbDropdownInstance)
-        else if (element?._pbDropdownInstance) {
-          element._pbDropdownInstance.clearSelected();
-        }
-        // Check if it's a DatePicker QuickPick (has _flatpickr)
-        else {
+        } else {
           const quickpick = element?._flatpickr;
           quickpick?.clear();
         }

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern_rails.html.erb

@@ -1,29 +1,20 @@
-<%= pb_rails("dropdown", props: {
-  id: "dropdown-quickpick-with-date-pickers-1",
-  label: "Date Range",
-  name: "date_range",
-  margin_bottom: "sm",
-  variant: "quickpick",
-  controls_start_id: "start-date-picker-1",
-  controls_end_id: "end-date-picker-1",
-  start_date_id: "quickpick_start_date_1",
-  start_date_name: "start_date",
-  end_date_id: "quickpick_end_date_1",
-  end_date_name: "end_date"
+<%= pb_rails("date_picker", props: {
+  mode: "range",
+  picker_id: "quick-pick-date-range",
+  placeholder: "Select a Date Range",
+  selection_type: "quickpick",
+  controls_end_id: "quick-pick-date-range-end",
+  controls_start_id: "quick-pick-date-range-start",
 }) %>
 
 <%= pb_rails("date_picker", props: {
-  picker_id: "start-date-picker-1",
-  label: "Start Date",
-  name: "start_date_picker",
-  placeholder: "Select Start Date",
-  sync_start_with: "dropdown-quickpick-with-date-pickers-1"
+  picker_id: "quick-pick-date-range-start",
+  placeholder: "Select a Start Date",
+  sync_start_with:"quick-pick-date-range",
 }) %>
 
 <%= pb_rails("date_picker", props: {
-  picker_id: "end-date-picker-1",
-  label: "End Date",
-  name: "end_date_picker",
-  placeholder: "Select End Date",
-  sync_end_with: "dropdown-quickpick-with-date-pickers-1"
-}) %>
+  picker_id: "quick-pick-date-range-end",
+  placeholder: "Select an End Date",
+  sync_end_with:"quick-pick-date-range",
+}) %>

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

@@ -1,4 +1,4 @@
-You can link a Quickpick Dropdown to standard DatePickers using the following props:
+You can link a Quickpick DatePicker to standard DatePickers using the following props:
 
 **For the Quickpick DatePicker**:
 `controls_start_id`: ID of the DatePicker that should receive the start date.

data/app/pb_kits/playbook/pb_dialog/_dialog.tsx

@@ -51,7 +51,6 @@ const Dialog = (props: DialogProps): React.ReactElement => {
     cancelButton,
     confirmButton,
     className,
-    closeable,
     data = {},
     htmlOptions = {},
     id,
@@ -188,7 +187,7 @@ const Dialog = (props: DialogProps): React.ReactElement => {
             style={{ content: dynamicInlineProps }}
         >
           <>
-            {title && !status ? <Dialog.Header closeable={closeable}>{title}</Dialog.Header> : null}
+            {title && !status ? <Dialog.Header>{title}</Dialog.Header> : null}
             {!status && text ? <Dialog.Body>{text}</Dialog.Body> : null}
             {status && (
               <Dialog.Body

data/app/pb_kits/playbook/pb_dialog/dialog.html.erb

@@ -14,7 +14,7 @@
 >
     <%= pb_content_tag(:dialog, role: "dialog", "aria-modal": "true", "aria-label": "Dialog") do %>
             <% if object.status === "" && object.title %>
-                <%= pb_rails("dialog/dialog_header", props: { title: object.title, id: object.id, closeable: object.closeable }) %>
+                <%= pb_rails("dialog/dialog_header", props: { title: object.title, id: object.id }) %>
             <% end %>
             <% if object.status === "" && object.text %>
                 <%= pb_rails("dialog/dialog_body", props: { text: object.text }) %>

data/app/pb_kits/playbook/pb_dialog/dialog.rb

@@ -23,7 +23,6 @@ module Playbook
                     default: ""
       prop :custom_event_type, type: Playbook::Props::String,
                                default: ""
-      prop :closeable, type: Playbook::Props::Boolean, default: true
 
       def classname
         generate_classname("pb_dialog pb_dialog_rails pb_dialog_#{size}_#{placement}")

data/app/pb_kits/playbook/pb_dialog/dialog.test.jsx

@@ -129,17 +129,3 @@ test('renders loading dialog with disabled buttons', async () => {
 
   cleanup()
 })
-
-test('renders dialog without close button when closeable is false', async () => {
-
-  const { queryByText, container } = render(<DialogTest closeable={false} />);
-
-  fireEvent.click(queryByText('Open Dialog'));
-
-  await waitFor(() => expect(queryByText("Header Title is the Title Prop")));
-
-  const closeBtn = container.querySelector('.pb_dialog_close_icon');
-  expect(closeBtn).not.toBeInTheDocument();
-
-  cleanup()
-})

data/app/pb_kits/playbook/pb_dialog/dialog_header.html.erb

@@ -1,11 +1,10 @@
 <%= pb_content_tag(:div, class: object.sticky_header) do %>
         <%= pb_rails("flex", props: {classname:object.classname, spacing:"between", padding:"sm", align:"center"}) do %>
             <%= content.presence || object.title %>
-            <% if object.closeable %>
-                <button class="dialog-button-class pb_dialog_close_icon" type="button" data-close-dialog= <%= object.id %> aria-label="Close Dialog" >
-                    <%= pb_rails("icon", props: { custom_icon: Playbook::Engine::root.join(times_icon), aria: { hidden: true } }) %>
-                </button>
-            <% end %>
+
+            <button class="dialog-button-class pb_dialog_close_icon" type="button" data-close-dialog= <%= object.id %> aria-label="Close Dialog" >
+                <%= pb_rails("icon", props: { custom_icon: Playbook::Engine::root.join(times_icon), aria: { hidden: true } }) %>
+            </button>
         <% end %>
         <%= pb_rails("section_separator") %>
 <% end %>

data/app/pb_kits/playbook/pb_dialog/dialog_header.rb

@@ -4,8 +4,6 @@ module Playbook
   module PbDialog
     class DialogHeader < Playbook::KitBase
       prop :title
-      prop :closeable, type: Playbook::Props::Boolean,
-                       default: true
 
       def classname
         generate_classname("dialog_header")

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.html.erb

@@ -1,24 +1,3 @@
-<% 
-  options = [
-    {
-      label: "United States",
-      value: "unitedStates",
-      id: "us"
-    },
-    {
-      label: "United Kingdom",
-      value: "unitedKingdom",
-      id: "gb"
-    },
-    {
-      label: "Pakistan",
-      value: "pakistan",
-      id: "pk"
-    }
-  ]
-%>
-
-
 <%= pb_rails("button", props: { text: "Open Complex Dialog", data:{"open-dialog": "dialog-complex"} }) %>
 
 <%= pb_rails("dialog", props: { id:"dialog-complex", size: "lg", full_height: true }) do %>
@@ -31,16 +10,6 @@
         <%= pb_rails("rich_text_editor", props: {id: "default", value: "Add your text here"}) %>
         <%= pb_rails("caption", props: { text: "Type in a word or term too help find tickets later. ex. training, phone setup, hr", margin_bottom: "xs", margin_top: "sm" }) %>
         <%= pb_rails("typeahead", props: { placeholder: "Tags.."}) %>
-        <%= pb_rails("dropdown", props: {options: options, autocomplete: true}) %>
-        <%= pb_rails("typeahead", props: {
-        id: "typeahead-default",
-        placeholder: "Select one...",
-        options: options,
-        name: :foo,
-        margin_top: "sm",
-        is_multi: false
-      })
-%>
 
     <% end %>
     <%= pb_rails("dialog/dialog_footer", props: {cancel_button: "Back", confirm_button: "Send my Issue", confirm_button_id:"confirm-complex", id: "dialog-complex"}) %>

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

@@ -12,8 +12,6 @@ examples:
   - dialog_full_height_placement: Full Height Placement
   - dialog_loading: Loading
   - dialog_turbo_frames: Within Turbo Frames
-  - dialog_overflow_visible: Overflow Visible
-  - dialog_closeable: Close Button in Header
 
 
   react:
@@ -27,8 +25,6 @@ examples:
   - dialog_full_height: Full Height
   - dialog_full_height_placement: Full Height Placement
   - dialog_loading: Loading
-  - dialog_overflow_visible: Overflow Visible
-  - dialog_closeable: Close Button in Header
 
   swift:
   - dialog_default_swift: Simple

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

@@ -8,6 +8,4 @@ export { default as DialogStatus } from './_dialog_status.jsx'
 export { default as DialogStackedAlert } from './_dialog_stacked_alert.jsx'
 export { default as DialogFullHeight } from './_dialog_full_height.jsx'
 export { default as DialogFullHeightPlacement } from './_dialog_full_height_placement.jsx'
-export { default as DialogLoading } from './_dialog_loading.jsx'
-export { default as DialogOverflowVisible } from './_dialog_overflow_visible.jsx'
-export { default as DialogCloseable } from './_dialog_closeable.jsx'
+export { default as DialogLoading } from './_dialog_loading.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](https://playbook.powerapp.cloud/tokens/colors) 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.