playbook_ui 15.4.0.pre.rc.2 → 15.4.0.pre.rc.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8756195b79021a48424cf2bd8a089948bebbf4c613c04a66960f680d891d79f6
-  data.tar.gz: 904bdd2056ff5dd877f4d96d131a6548a05e9b601e83e8a9de77256a4265b08d
+  metadata.gz: 7a975771e592077ab2a8652b98d0c50e77edd015d6e5c964d2c3e7fe0d890e09
+  data.tar.gz: 4c8a3c69a78fa1d417f713593e5faa75e9010845cccd8f5be2dad9a5af238743
 SHA512:
-  metadata.gz: 375ba6253df92a3e7f304d214d60cbe0c0a19b663362be0499349704516a2307d810acd570cf2c8124148352d45f7c46bb178c6563802eb24501a701a557e11e
-  data.tar.gz: a5d7cce19c57a82b4cd3328bdec7b902d891d0930541d41fc4789adb93eb3b8910ba3284bd4ae8963f36f63b85cb1eabe9da3a7de6cc7a89dd878103419a66a9
+  metadata.gz: a36fe08a2d86ba2bb19c793924278976be3cad2c41ef906d1cac3e5a141be6ed88aadae46cbc15e1a3f47da0d98ccd3cb2b7a7deba78d262a3bbe9568884e6b5
+  data.tar.gz: 9b75de07f0692daa2d4a8e72187c3b13f877442be7237853589fda95ad1b27c27f978bed809e40c83947c3e2d224cf9dac6edefc44cf7c83d0610d21d4fe14b3

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

@@ -76,6 +76,22 @@ const columnDefinitions = [
         {
           label: "Attendance",
           id: "attendance",
+          header: () => (
+            <Flex alignItems="center" 
+                justifyContent="center"
+            >
+              <Caption marginRight="xs">Attendance</Caption>
+              <Tooltip placement="top" 
+                  text="Whoa. I'm a Tooltip Too!" 
+                  zIndex={10}
+              >
+                <Icon cursor="pointer" 
+                    icon="info"
+                    size="xs" 
+                />
+              </Tooltip>
+            </Flex>
+          ),  
           columns: [
             {
               accessor: "attendanceRate",

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

@@ -0,0 +1,104 @@
+<%
+  column_definitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      id: "year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      label: "Enrollment Data",
+      id: "enrollmentData",
+      header: ->(cell, label) {
+        capture do
+          pb_rails("flex", props: { align_items: "center", justify_content: "center" }) do
+            pb_rails("caption", props: { margin_right: "xs", text: "Enrollment Data" }) +
+            pb_rails("icon", props: { id: "tooltip-interact-multi", icon: "info", size: "xs", cursor: "pointer" }) +
+            pb_rails("tooltip", props: {
+              trigger_element_id: "tooltip-interact-multi",
+              tooltip_id: "example-custom-tooltip-multi",
+              position: "top",
+              z_index: "10"
+            }) do
+              "Whoa. I'm a Tooltip"
+            end
+          end
+        end
+      },
+      columns: [
+        {
+          label: "Enrollment Stats",
+          id: "enrollmentStats",
+          columns: [
+            {
+              accessor: "newEnrollments",
+              id: "newEnrollments",
+              label: "New Enrollments",
+            },
+            {
+              accessor: "scheduledMeetings",
+              id: "scheduledMeetings",
+              label: "Scheduled Meetings",
+            },
+          ],
+        },
+      ],
+    },
+    {
+      label: "Performance Data",
+      id: "performanceData",
+      columns: [
+        {
+          label: "Completion Metrics",
+          id: "completionMetrics",
+          columns: [
+            {
+              accessor: "completedClasses",
+              id: "completedClasses",
+              label: "Completed Classes",
+            },
+            {
+              accessor: "classCompletionRate",
+              id: "classCompletionRate",
+              label: "Class Completion Rate",
+            },
+          ],
+        },
+        {
+          label: "Attendance",
+          id: "attendance",
+          header: ->(cell, label) {
+            capture do
+              pb_rails("flex", props: { align_items: "center", justify_content: "center" }) do
+                pb_rails("caption", props: { margin_right: "xs", text: "Attendance" }) +
+                pb_rails("icon", props: { id: "tooltip-interact-multi-2", icon: "info", size: "xs", cursor: "pointer" }) +
+                pb_rails("tooltip", props: {
+                  trigger_element_id: "tooltip-interact-multi-2",
+                  tooltip_id: "example-custom-tooltip-multi-2",
+                  position: "top",
+                  z_index: "10"
+                }) do
+                  "Whoa. I'm a Tooltip Too!"
+                end
+              end
+            end
+          },
+          columns: [
+            {
+              accessor: "attendanceRate",
+              id: "attendanceRate",
+              label: "Attendance Rate",
+            },
+            {
+              accessor: "scheduledMeetings",
+              id: "scheduledMeetings",
+              label: "Scheduled Meetings",
+            },
+          ],
+        },
+      ],
+    },
+  ]
+%>
+
+<%= pb_rails("advanced_table", props: { id: "custom_header_multi_header_table", table_data: @table_data, column_definitions: column_definitions }) %>

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

@@ -0,0 +1 @@
+The optional `header` item within `column_definitions` can also be used with multi headers as seen here. 

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

@@ -12,7 +12,7 @@
         capture do
           pb_rails("flex", props: { align_items: "center", justify_content: "center" }) do
             pb_rails("caption", props: { margin_right: "xs", text: "New Enrollments" }) +
-            pb_rails("icon", props: { id: "tooltip-interact", icon: "info", size: "xs" }) +
+            pb_rails("icon", props: { id: "tooltip-interact", icon: "info", size: "xs", cursor: "pointer" }) +
             pb_rails("tooltip", props: {
               trigger_element_id: "tooltip-interact",
               tooltip_id: "example-custom-tooltip",

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

@@ -11,6 +11,7 @@ examples:
   - advanced_table_responsive: Responsive Tables
   - advanced_table_custom_cell_rails: Custom Components for Cells
   - advanced_table_with_custom_header_rails: Custom Header Cell
+  - advanced_table_with_custom_header_multi_header_rails: Custom Header with Multiple Headers
   - advanced_table_column_headers: Multi-Header Columns
   - advanced_table_column_headers_multiple: Multi-Header Columns (Multiple Levels)
   - advanced_table_column_headers_vertical_border: Multi-Header Columns with Vertical Borders

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

@@ -82,32 +82,62 @@ module Playbook
         end
       end
 
-      # Get original column definition for custom rendering
+      # Get original column definition for custom rendering by accessor
       def find_original_column_def(accessor)
         find_column_def_by_accessor(column_definitions, accessor)
       end
 
+      # Get original column definition for custom rendering by id
+      def find_original_column_def_by_id(id)
+        find_column_def_by_id(column_definitions, id)
+      end
+
       # Check if a header cell has a custom renderer
       def has_header_renderer?(cell)
-        return false unless cell[:accessor].present?
-
-        original_def = find_original_column_def(cell[:accessor])
-        original_def && original_def[:header].present?
+        original_def = find_original_column_def_for_cell(cell)
+        original_def&.dig(:header).present?
+      rescue
+        false
       end
 
       # Render custom header content
       def render_header(cell)
         return cell[:label] unless has_header_renderer?(cell)
 
-        original_def = find_original_column_def(cell[:accessor])
+        original_def = find_original_column_def_for_cell(cell)
+        return cell[:label] unless original_def
+
         custom_renderer = original_def[:header]
+        return cell[:label] unless custom_renderer
 
         # Call the custom renderer with the cell data and label
-        custom_renderer.call(cell, cell[:label])
+        begin
+          result = custom_renderer.call(cell, cell[:label])
+          result.present? ? result.to_s : cell[:label]
+        rescue
+          cell[:label]
+        end
       end
 
     private
 
+      # Find the original column definition for a cell
+      def find_original_column_def_for_cell(cell)
+        # Try accessor first (for leaf columns)
+        if cell[:accessor].present?
+          found = find_original_column_def(cell[:accessor])
+          return found if found
+        end
+
+        # Try id if accessor lookup didn't find it (for grouped columns or leaf columns with id)
+        if cell[:id].present?
+          found = find_original_column_def_by_id(cell[:id])
+          return found if found
+        end
+
+        nil
+      end
+
       def compute_max_depth(columns)
         columns.map do |col|
           col[:columns] ? 1 + compute_max_depth(col[:columns]) : 1
@@ -118,21 +148,24 @@ module Playbook
         total_columns = columns.size
         columns.each_with_index do |col, index|
           is_last = index == total_columns - 1
-          if col[:columns]
-            colspan = compute_leaf_columns(col[:columns])
-            rows[current_depth] << {
+          nested_columns = col[:columns]
+          if nested_columns
+            colspan = compute_leaf_columns(nested_columns)
+            cell_hash = {
               label: col[:label],
               colspan: colspan,
               is_last_in_group: is_last && current_depth.positive?,
             }
+            cell_hash[:id] = col[:id] if col[:id].present?
+            rows[current_depth] << cell_hash
 
-            process_columns(col[:columns], rows, current_depth + 1, max_depth)
+            process_columns(nested_columns, rows, current_depth + 1, max_depth)
           else
-            raw_styling       = col[:column_styling] || {}
-            header_alignment  = raw_styling[:header_alignment]
+            raw_styling = col[:column_styling] || {}
+            header_alignment = raw_styling[:header_alignment]
 
             colspan = 1
-            rows[current_depth] << {
+            cell_hash = {
               label: col[:label],
               colspan: colspan,
               accessor: col[:accessor],
@@ -140,6 +173,8 @@ module Playbook
               is_last_in_group: is_last && current_depth.positive?,
               header_alignment: header_alignment,
             }
+            cell_hash[:id] = col[:id] if col[:id].present?
+            rows[current_depth] << cell_hash
           end
         end
       end
@@ -154,11 +189,15 @@ module Playbook
         max_depth = compute_max_depth(column_definitions)
 
         column_definitions.map do |col|
-          if col.key?(:columns)
-            {
+          if col[:columns]
+            nested_columns = col[:columns]
+            wrapped = {
               label: col[:label],
-              columns: wrap_leaf_columns(col[:columns]),
+              columns: wrap_leaf_columns(nested_columns),
             }
+            wrapped[:id] = col[:id] if col[:id].present?
+            wrapped[:header] = col[:header] if col[:header].present?
+            wrapped
           else
             # For leaf columns, wrap with empty labels up to max depth to get proper structure
             wrap_leaf_column(col, max_depth)
@@ -173,6 +212,7 @@ module Playbook
           sort_menu: col[:sort_menu] || nil,
           column_styling: col[:column_styling] || {},
         }
+        wrapped[:id] = col[:id] if col[:id].present?
         (max_depth - 1).times do
           wrapped = { label: "", columns: [wrapped] }
         end
@@ -180,11 +220,41 @@ module Playbook
       end
 
       def find_column_def_by_accessor(defs, target_accessor)
+        return nil if target_accessor.blank?
+
         defs.each do |col|
-          return col if col[:accessor] == target_accessor
+          col_accessor = col[:accessor]
+          next if col_accessor.blank?
+
+          return col if col_accessor.to_s == target_accessor.to_s
+
+          nested_columns = col[:columns]
+          if nested_columns.is_a?(Array)
+            found = find_column_def_by_accessor(nested_columns, target_accessor)
+            return found if found
+          end
+        end
+        nil
+      end
+
+      def find_column_def_by_id(defs, target_id)
+        return nil if target_id.blank?
+
+        defs.each do |col|
+          col_id = col[:id]
+
+          return col if col_id.present? && col_id.to_s == target_id.to_s
+
+          # Recursively search nested columns, even if current col has no id or doesn't match
+          nested_columns = col[:columns]
+
+          next unless nested_columns.present?
+
+          # Convert to array if needed (for edge cases where is_a?(Array) might fail)
+          array_columns = Array(nested_columns)
 
-          if col[:columns].is_a?(Array)
-            found = find_column_def_by_accessor(col[:columns], target_accessor)
+          if array_columns.any?
+            found = find_column_def_by_id(array_columns, target_id)
             return found if found
           end
         end

data/app/pb_kits/playbook/pb_badge/_badge.tsx

@@ -20,11 +20,12 @@ type BadgeProps = {
     onTouchEnd?: React.TouchEventHandler<HTMLSpanElement>,
   },
   data?: {[key: string]: string},
-  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void) | ((event: any) => void) | any},
   id?: string,
   removeIcon?: boolean,
   removeOnClick?: React.MouseEventHandler<HTMLSpanElement>,
   rounded?: boolean,
+  tabIndex?: number,
   text?: string,
   variant?: "error" | "info" | "neutral" | "notification" | "notificationError" | "primary" | "success" | "warning",
 } & GlobalProps
@@ -39,6 +40,7 @@ const Badge = (props: BadgeProps): React.ReactElement => {
     removeIcon = false,
     removeOnClick,
     rounded = false,
+    tabIndex,
     text,
     variant = 'neutral',
   } = props
@@ -61,6 +63,7 @@ const Badge = (props: BadgeProps): React.ReactElement => {
         {...htmlProps}
         className={css}
         id={id}
+        tabIndex={tabIndex}
     >
       <span>
         {text}

data/app/pb_kits/playbook/pb_badge/badge.test.js

@@ -112,3 +112,16 @@ test('displays notification variants', () => {
     cleanup()
   })
 })
+
+test('should allow tabIndex to be set', () => {
+  render(
+    <Badge
+        data={{ testid: testId }}
+        tabIndex={0}
+        text="+1"
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  expect(kit).toHaveAttribute('tabIndex', '0')
+})

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