playbook_ui 15.6.0.pre.alpha.draggableask12907 → 15.6.0.pre.alpha.play263913015

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4b0f188b0fa59810bc278d4f0fd8211ec8488472f38d61f3cf422edacdb4e918
-  data.tar.gz: 8b4daf06eead8575f94da3c2307c6df40bb49cf17128b765d7a234bbacaa895c
+  metadata.gz: 526e2a456a333473009406a753d4a9513b99a33bef1a69e92410d94cdc23c3aa
+  data.tar.gz: 0b7ef7af65efedfcf5f2f1da554acd8e9d04ab95361feaf3425d5285171946b8
 SHA512:
-  metadata.gz: 4c2cb58e0e5f3891d8c15954fc83e9a0e5904d71600883654d15a9ffd339c399d9f19bb4688401d2f735c3adaa557e57108a43ac6c743df9587e8d2f99032913
-  data.tar.gz: a939b477c9565c5bdb334fd8bab4cc7abc507ff2f4b6e30a18e422b22233db8598df43811066c443253094e9f8609f0ca3e0058409a1beeed20a9f9d5264c348
+  metadata.gz: 1775155366eab8937dfac61095faa4a4281dfe3981a6839c97e7e35fb233716da18b8b1285d1a88ff8529c0a0560858c22808e0ba0df43102ff6cbdb02efc38e
+  data.tar.gz: 36ae7bbfcd1182ff97a85c018ecef7232877fabf931d30428fa8ac7b69890fd31e714f0bd9e644698665a644f5d14d2eaf8dcf2f88788050a6665fdec2aad9d4

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

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

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

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

data/app/pb_kits/playbook/pb_collapsible/__snapshots__/collapsible.test.js.snap

@@ -25,11 +25,11 @@ exports[`html structure is correct 1`] = `
           >
             <div
               class="icon_wrapper"
-              style="vertical-align: middle; color: rgb(193, 205, 214);"
+              style="vertical-align: middle;"
             >
               <svg
                 aria-label="chevron-down icon"
-                class="pb_custom_icon svg-inline--fa svg_lg svg_fw"
+                class="pb_custom_icon svg-inline--fa color_text_lt_lighter svg_lg svg_fw"
                 color="currentColor"
                 fill="none"
                 height="auto"

data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleIcon.tsx

@@ -27,12 +27,12 @@ type colorMap = {
 };
 
 const colorMap = {
-  default: "#242B42",
-  light: "#687887",
-  lighter: "#C1CDD6",
-  link: "#0056CF",
-  error: "#FF2229",
-  success: "#00CA74",
+  default:"text_lt_default",
+  light: "text_lt_light",
+  lighter: "text_lt_lighter",
+  link: "primary",
+  error: "error",
+  success: "text_dk_success_sm",
 };
 
 const CollapsibleIcon = ({
@@ -68,9 +68,10 @@ const CollapsibleIcon = ({
               className="icon_wrapper"
               key={icon ? showIcon(icon)[0] : "chevron-down"}
               onClick={(e) => handleIconClick(e)}
-              style={{ verticalAlign: "middle", color: color }}
+              style={{ verticalAlign: "middle"}}
           >
             <Icon
+                color={color}
                 icon={icon ? showIcon(icon)[0] : "chevron-down"}
                 size={iconSize}
             />
@@ -80,9 +81,10 @@ const CollapsibleIcon = ({
               className="icon_wrapper"
               key={icon ? showIcon(icon)[1] : "chevron-up"}
               onClick={(e) => handleIconClick(e)}
-              style={{ verticalAlign: "middle", color: color }}
+              style={{ verticalAlign: "middle" }}
           >
             <Icon
+                color={color}
                 icon={icon ? showIcon(icon)[1] : "chevron-up"}
                 size={iconSize}
             />

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_icons.jsx

@@ -7,7 +7,6 @@ const CollapsibleIcons = (props) => {
   <>
   <Collapsible
       icon={['plus','minus']}
-      iconColor='white'
   >
     <Collapsible.Main {...props}>
       <div>{'Main Section'}</div>

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_state.jsx

@@ -22,7 +22,6 @@ const CollapsibleState = (props) => {
     <Collapsible
         collapsed={isCollapsed}
         icon={["plus", "minus"]}
-        iconColor='white'
         padding="none"
     >
       <Collapsible.Main padding="sm" 
@@ -41,7 +40,6 @@ const CollapsibleState = (props) => {
     <Collapsible
         collapsed={isCollapsed}
         icon={["plus", "minus"]}
-        iconColor='white'
         padding="none"
     >
       <Collapsible.Main padding="sm" 
@@ -60,7 +58,6 @@ const CollapsibleState = (props) => {
     <Collapsible
         collapsed={isCollapsed}
         icon={["plus", "minus"]}
-        iconColor='white'
         padding="none"
     >
         <Collapsible.Main padding="sm" 

data/app/pb_kits/playbook/pb_date_picker/date_picker.test.js

@@ -251,4 +251,28 @@ describe('DatePicker Kit', () => {
       expect(input).toHaveValue(DateTime.getYearStartDate(new Date()).formatDate() + " to " + new Date().formatDate())
     })
   })
+
+
+  test('displays defaultDate when it is later than maxDate', async () => {
+    const testId = 'datepicker-out-of-range-after'
+    const futureDateString = '01/15/2020'
+    const maxDateString = '01/10/2020'
+    
+    render(
+      <DatePicker
+          data={{ testid: testId }}
+          defaultDate={futureDateString}
+          format="m/d/Y"
+          maxDate={maxDateString}
+          pickerId="date-picker-out-of-range-after"
+      />
+    )
+
+    const kit = screen.getByTestId(testId)
+    const input = within(kit).getByPlaceholderText('Select Date')
+
+    await waitFor(() => {
+      expect(input).toHaveValue('01/15/2020')
+    }, { timeout: 5000 })
+  })
 })

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

@@ -275,6 +275,80 @@ 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,
@@ -286,11 +360,32 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     locale: {
       rangeSeparator: ' to '
     },
-    maxDate: setMaxDate,
-    minDate: setMinDate,
+    maxDate: effectiveMaxDate,
+    minDate: effectiveMinDate,
     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)
@@ -303,12 +398,30 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
       if (!staticPosition && scrollContainer) attachToScroll(scrollContainer)
       positionCalendarIfNeeded(fp)
     }],
-    onClose: [(selectedDates, dateStr) => {
+    onClose: [(selectedDates, dateStr, fp) => {
       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) => {
@@ -330,6 +443,71 @@ 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>`
 

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/token/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/tokens/colors) for reference.

data/app/pb_kits/playbook/pb_filter/Filter/FilterBackground.tsx

@@ -6,10 +6,10 @@ import { GlobalProps, globalProps } from '../../utilities/globalProps'
 import Card from '../../pb_card/_card'
 
 export type FilterBackgroundProps = {
-  background: boolean,
-  className: string,
+  background?: boolean,
+  className?: string,
   children?: React.ReactChild[] | React.ReactChild,
-  dark: boolean,
+  dark?: boolean,
 } & GlobalProps
 
 const FilterBackground = (props: FilterBackgroundProps): React.ReactElement => {

data/app/pb_kits/playbook/pb_select/_select.tsx

@@ -29,6 +29,7 @@ type SelectProps = {
   id?: string,
   includeBlank?: string,
   inline?: boolean,
+  inputOptions?: {[key: string]: string | number | boolean | (() => void)},
   label?: string,
   margin: string,
   marginBottom: string,
@@ -63,6 +64,7 @@ const Select = ({
   label,
   htmlOptions = {},
   inline = false,
+  inputOptions = {},
   multiple = false,
   name,
   onChange = () => undefined,
@@ -94,14 +96,17 @@ const Select = ({
   const angleDown = getAllIcons()["angleDown"].icon as unknown as { [key: string]: SVGElement }
 
   const selectWrapperClass = classnames(buildCss('pb_select_kit_wrapper'), { error }, className)
+  const selectId = (inputOptions?.id as string) || name
+
   const selectBody =(() =>{
     if (children) return children
     return (
       <select
           {...htmlOptions}
           {...domSafeProps(props)}
+          {...inputOptions}
           disabled={disabled}
-          id={name}
+          id={selectId}
           multiple={multiple}
           name={name}
           onChange={onChange}
@@ -125,7 +130,7 @@ const Select = ({
       {label &&
         <label
             className="pb_select_kit_label"
-            htmlFor={name}
+            htmlFor={selectId}
         >
           <Caption 
               dark={props.dark}
@@ -135,7 +140,7 @@ const Select = ({
       }
       <label
           className={selectWrapperClass}
-          htmlFor={name}
+          htmlFor={selectId}
       >
         {selectBody}
         { multiple !== true ?

data/app/pb_kits/playbook/pb_select/docs/_select_input_options.html.erb

@@ -0,0 +1,16 @@
+<%= pb_rails("select", props: {
+  label: "Favorite Food",
+  name: "favorite_food",
+  options: [
+    { value: "pizza", value_text: "Pizza" },
+    { value: "tacos", value_text: "Tacos" },
+    { value: "sushi", value_text: "Sushi" }
+  ],
+  input_options: {
+    'aria-label': "Select your favorite food",
+    class: "custom-select-class",
+    data: { controller: "search", action: "change->search#filter" },
+    id: "favorite-food-select"
+  }
+}) %>
+

data/app/pb_kits/playbook/pb_select/docs/_select_input_options.jsx

@@ -0,0 +1,30 @@
+import React from 'react'
+
+import Select from '../_select'
+
+const SelectInputOptions = (props) => {
+  const options = [
+    { value: 'pizza', text: 'Pizza' },
+    { value: 'tacos', text: 'Tacos' },
+    { value: 'sushi', text: 'Sushi' },
+  ]
+
+  return (
+    <>
+      <Select
+          inputOptions={{
+            'aria-label': 'Select your favorite food',
+            className: 'custom-select-class',
+            id: 'favorite-food-select',
+          }}
+          label="Favorite Food"
+          name="favorite_food"
+          options={options}
+          {...props}
+      />
+    </>
+  )
+}
+
+export default SelectInputOptions
+

data/app/pb_kits/playbook/pb_select/docs/_select_input_options.md

@@ -0,0 +1 @@
+Use the `input_options` / `inputOptions` prop to pass additional attributes directly to the underlying `<select>` element instead of the outer wrapper. This is useful for applying data attributes, custom IDs, or other HTML attributes that need to be on the select element itself.

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

@@ -15,6 +15,7 @@ examples:
   - select_inline_compact: Select Inline Compact
   - select_attributes: Select W/ Attributes
   - select_multiple: Select Multiple
+  - select_input_options: Input Options
 
 
 
@@ -33,6 +34,7 @@ examples:
   - select_inline_compact: Select Inline Compact
   - select_multiple: Select Multiple
   - select_react_hook: React Hook
+  - select_input_options: Input Options
 
   swift:
   - select_default_swift: Default

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

@@ -12,3 +12,4 @@ export { default as SelectInlineCompact } from './_select_inline_compact.jsx'
 export { default as SelectMultiple } from './_select_multiple.jsx'
 export { default as SelectReactHook } from './_select_react_hook.jsx'
 export { default as SelectCustomSelectSubheaders } from './_select_custom_select_subheaders.jsx'
+export { default as SelectInputOptions } from './_select_input_options.jsx'

data/app/pb_kits/playbook/pb_select/select.html.erb

@@ -2,11 +2,11 @@
   id: nil,
   class: object.classnames ) do %>
   <% if object.label %>
-    <label class="pb_select_kit_label" for="<%= object.name %>">
+    <label class="pb_select_kit_label" for="<%= object.input_options[:id] || object.name %>">
       <%= pb_rails("caption", props: { text: object.label, dark: object.dark }) %>
     </label>
   <% end %>
-  <label class="<%= object.select_wrapper_class %>" for="<%= object.name %>">
+  <label class="<%= object.select_wrapper_class %>" for="<%= object.input_options[:id] || object.name %>">
     <% if content.present? %>
       <%= content %>
       <%= pb_rails("body", props: { status: "negative", text: object.error }) %>

data/app/pb_kits/playbook/pb_select/select.rb

@@ -14,6 +14,8 @@ module Playbook
       prop :error
       prop :include_blank
       prop :inline, type: Playbook::Props::Boolean, default: false
+      prop :input_options, type: Playbook::Props::HashProp,
+                           default: {}
       prop :label
       prop :multiple, type: Playbook::Props::Boolean, default: false
       prop :name
@@ -38,7 +40,7 @@ module Playbook
           multiple: multiple,
           onchange: onchange,
           include_blank: include_blank,
-        }.merge(attributes)
+        }.merge(attributes).merge(input_options)
       end
 
       def classname

data/app/pb_kits/playbook/pb_select/select.test.js

@@ -65,4 +65,27 @@ test('returns multiple variant', () => {
   const selectElement = kit.querySelector('select');
 
   expect(selectElement).toHaveAttribute('multiple', '');
+});
+
+test('inputOptions are passed to select element', () => {
+  render(
+    <Select
+        data={{ testid: testId }}
+        inputOptions={{
+          id: 'custom-select-id',
+          className: 'custom-select-class',
+          'aria-label': 'Custom aria label',
+        }}
+        label="Favorite Food"
+        name="food"
+        options={options}
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  const selectElement = kit.querySelector('select')
+
+  expect(selectElement).toHaveAttribute('id', 'custom-select-id')
+  expect(selectElement).toHaveClass('custom-select-class')
+  expect(selectElement).toHaveAttribute('aria-label', 'Custom aria label')
 });