playbook_ui 15.3.0.pre.alpha.play2464flexitemcantusehtmloptions12226 → 15.3.0.pre.alpha.play2541phonenumberkitvalidation12084

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 13ab1cd2e99a6db7d9007be1bb0e3ee1aff66e794af76324a923251f8c567bfa
-  data.tar.gz: 3fa66c1aa6633de614cba11750edb57b1ba09b40c9ebbd816319f4b09fa48556
+  metadata.gz: 3a2b8cf9c37f01a2d2aed6fba947a7b981f2953cf405c747b05a4ff8d6c014ce
+  data.tar.gz: ecbc438f4a2df675e214dc49470538c246e621a2a8ff46a73c8b870dddee616d
 SHA512:
-  metadata.gz: 52584a8aed660bc4f3d79231ef4a584f944fda35a85d246ead3245f97b844e363e8aab0a7f33dc7955d374fbbae9ad81368d8d38bece773fcd8418fb987c5ddd
-  data.tar.gz: 1085897cb143905c00c80d33aa484ea5c95be9ebaf7d67263cd50246fbb680d4e86b839e83eb35752afb90f0c6e42d64f5061d2642b921cac891fb3d9edd2689
+  metadata.gz: 8c79cd5742a9ba46ea88bff370d16a9f2722e17c6ef3c72465c5b4933a7fb77433f29c5bef0c3567b2a667feb97a59360a93ede054b07d31e7d76d8d66ba166c
+  data.tar.gz: 2e436919a7289d438582fd112a8c243479118adc029cdcfc9e4f3b0f3c52d18ca50bc43283031b619553844a7a0e3373d9a8fa99aff55cf2f4c2061f244be2a1

data/app/pb_kits/playbook/pb_advanced_table/Utilities/RowUtils.ts

@@ -17,7 +17,7 @@ export const getRowColorClass = (
     (inlineRowLoading && (rowHasNoChildren || row.getCanExpand()))
   );
 
-  return row.getIsSelected() ? "bg-row-selection" : shouldShowExpandedBackground ? "bg-silver" : "pb-bg-row-white";
+  return row.getIsSelected() ? "bg-row-selection" : shouldShowExpandedBackground ? "bg-silver" : "bg-white";
 }
 
 /**

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss

@@ -51,7 +51,7 @@
     background-color: lighten($silver, $opacity_7);
   }
 
-  .pb-bg-row-white {
+  .bg-white {
     background-color: $white;
   }
 
@@ -278,7 +278,7 @@
         }
       }
 
-      &.pb-bg-row-white {
+      &.bg-white {
         td:first-child {
           background-color: $white;
         }
@@ -756,7 +756,7 @@
       border-bottom-color: $border_dark !important;
     }
 
-    .pb-bg-row-white {
+    .bg-white {
       background: $bg_dark_card;
     }
 
@@ -766,7 +766,7 @@
 
     // Dark mode virtualized rows
     .virtualized-table-row {
-      &.pb-bg-row-white {
+      &.bg-white {
         background: $bg_dark_card !important;
 
         td:first-child {

data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx

@@ -308,10 +308,10 @@ test("Row toggle button exists and toggles subrows open and closed", () => {
   const kit = screen.getByTestId(testId)
   const rowButton = kit.querySelector(".gray-icon.expand-toggle-icon")
   expect(rowButton).toBeInTheDocument()
-  const subRow1 = kit.querySelector(".pb-bg-row-white.depth-sub-row-1")
+  const subRow1 = kit.querySelector(".bg-white.depth-sub-row-1")
   expect(subRow1).not.toBeInTheDocument()
   rowButton.click()
-  const subRow = kit.querySelector(".pb-bg-row-white.depth-sub-row-1")
+  const subRow = kit.querySelector(".bg-white.depth-sub-row-1")
   expect(subRow).toBeInTheDocument()
 })
 
@@ -328,13 +328,13 @@ test("toggleExpansionAll button exists and toggles subrows open and closed", asy
   const toggleButton = kit.querySelector(".gray-icon.toggle-all-icon");
   expect(toggleButton).toBeInTheDocument();
 
-  const subRow1 = kit.querySelector(".pb-bg-row-white.depth-sub-row-1");
+  const subRow1 = kit.querySelector(".bg-white.depth-sub-row-1");
   expect(subRow1).not.toBeInTheDocument();
 
   toggleButton.click();
 
   await waitFor(() => {
-    const subRow = kit.querySelector(".pb-bg-row-white.depth-sub-row-1");
+    const subRow = kit.querySelector(".bg-white.depth-sub-row-1");
     expect(subRow).toBeInTheDocument();
   })
 })
@@ -385,7 +385,7 @@ test("expandControl prop works as expected", () => {
   render (<AdvancedTableExpandControl/>)
 
   const kit = screen.getByTestId(testId)
-  const subRow = kit.querySelector(".pb-bg-row-white.depth-sub-row-1")
+  const subRow = kit.querySelector(".bg-white.depth-sub-row-1")
   expect(subRow).toBeInTheDocument()
 })
 

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

@@ -76,22 +76,6 @@ 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_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", cursor: "pointer" }) +
+            pb_rails("icon", props: { id: "tooltip-interact", icon: "info", size: "xs" }) +
             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,7 +11,6 @@ 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/flat_advanced_table.js

@@ -51,7 +51,7 @@ export default class PbFlatAdvancedTable extends PbEnhancedElement {
 
         const tr = rowCb.closest("tr");
         tr?.classList.toggle("bg-row-selection", rowCb.checked);
-        tr?.classList.toggle("pb-bg-row-white", !rowCb.checked);
+        tr?.classList.toggle("bg-white", !rowCb.checked);
       }
 
       if (allCb) {
@@ -62,7 +62,7 @@ export default class PbFlatAdvancedTable extends PbEnhancedElement {
           cb.checked = checked;
           const tr = cb.closest("tr");
           tr?.classList.toggle("bg-row-selection", checked);
-          tr?.classList.toggle("pb-bg-row-white", !checked);
+          tr?.classList.toggle("bg-white", !checked);
           const id = cb.id;
           if (checked) this.selectedRows.add(id);
           else this.selectedRows.delete(id);

data/app/pb_kits/playbook/pb_advanced_table/index.js

@@ -76,7 +76,7 @@ export default class PbAdvancedTable extends PbEnhancedElement {
         // Only apply styling if the checkbox is inside a table row
         if (rowEl) {
           rowEl.classList.add("bg-row-selection");
-          rowEl.classList.remove("pb-bg-row-white", "bg-silver");
+          rowEl.classList.remove("bg-white", "bg-silver");
         }
       } else {
         // Only apply styling if the checkbox is inside a table row
@@ -85,9 +85,9 @@ export default class PbAdvancedTable extends PbEnhancedElement {
           
           if (this.isRowExpanded(rowEl)) {
             rowEl.classList.remove("bg-silver");
-            rowEl.classList.add("pb-bg-row-white");
+            rowEl.classList.add("bg-white");
           } else {
-            rowEl.classList.remove("pb-bg-row-white");
+            rowEl.classList.remove("bg-white");
             rowEl.classList.add("bg-silver");
           }
         }
@@ -120,7 +120,7 @@ export default class PbAdvancedTable extends PbEnhancedElement {
     if (isChecked) {
       PbAdvancedTable.selectedRows.add(rowId);
       rowEl.classList.add("bg-row-selection");
-      rowEl.classList.remove("pb-bg-row-white", "bg-silver");
+      rowEl.classList.remove("bg-white", "bg-silver");
     } else {
       PbAdvancedTable.selectedRows.delete(rowId);
     }
@@ -130,9 +130,9 @@ export default class PbAdvancedTable extends PbEnhancedElement {
 
       if (this.isRowExpanded(rowEl)) {
         rowEl.classList.remove("bg-silver");
-        rowEl.classList.add("pb-bg-row-white");
+        rowEl.classList.add("bg-white");
       } else {
-        rowEl.classList.remove("pb-bg-row-white");
+        rowEl.classList.remove("bg-white");
         rowEl.classList.add("bg-silver");
       }
     }
@@ -407,7 +407,7 @@ export default class PbAdvancedTable extends PbEnhancedElement {
     const row = this.element.closest("tr");
     if (row) {
       row.classList.toggle("bg-silver", !isVisible);
-      row.classList.toggle("pb-bg-row-white", isVisible);
+      row.classList.toggle("bg-white", isVisible);
     }
 
     this.addBorderRadiusOnLastVisibleRow();

data/app/pb_kits/playbook/pb_advanced_table/scss_partials/advanced_table_sticky_mixin.scss

@@ -52,7 +52,7 @@
     }
   }
 
-  .pb-bg-row-white {
+  .bg-white {
     td:first-child,
     .sticky-left {
       background-color: $bg-main;
@@ -63,7 +63,7 @@
     &.bg-silver td:first-child {
       background-color: $bg-secondary;
     }
-    &.pb-bg-row-white td:first-child {
+    &.bg-white td:first-child {
       background-color: $bg-main;
     }
     &.bg-row-selection td:first-child {

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

@@ -82,62 +82,32 @@ module Playbook
         end
       end
 
-      # Get original column definition for custom rendering by accessor
+      # Get original column definition for custom rendering
       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)
-        original_def = find_original_column_def_for_cell(cell)
-        original_def&.dig(:header).present?
-      rescue
-        false
+        return false unless cell[:accessor].present?
+
+        original_def = find_original_column_def(cell[:accessor])
+        original_def && original_def[:header].present?
       end
 
       # Render custom header content
       def render_header(cell)
         return cell[:label] unless has_header_renderer?(cell)
 
-        original_def = find_original_column_def_for_cell(cell)
-        return cell[:label] unless original_def
-
+        original_def = find_original_column_def(cell[:accessor])
         custom_renderer = original_def[:header]
-        return cell[:label] unless custom_renderer
 
         # Call the custom renderer with the cell data and label
-        begin
-          result = custom_renderer.call(cell, cell[:label])
-          result.present? ? result.to_s : cell[:label]
-        rescue
-          cell[:label]
-        end
+        custom_renderer.call(cell, cell[:label])
       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
@@ -148,24 +118,21 @@ module Playbook
         total_columns = columns.size
         columns.each_with_index do |col, index|
           is_last = index == total_columns - 1
-          nested_columns = col[:columns]
-          if nested_columns
-            colspan = compute_leaf_columns(nested_columns)
-            cell_hash = {
+          if col[:columns]
+            colspan = compute_leaf_columns(col[:columns])
+            rows[current_depth] << {
               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(nested_columns, rows, current_depth + 1, max_depth)
+            process_columns(col[: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
-            cell_hash = {
+            rows[current_depth] << {
               label: col[:label],
               colspan: colspan,
               accessor: col[:accessor],
@@ -173,8 +140,6 @@ 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
@@ -189,15 +154,11 @@ module Playbook
         max_depth = compute_max_depth(column_definitions)
 
         column_definitions.map do |col|
-          if col[:columns]
-            nested_columns = col[:columns]
-            wrapped = {
+          if col.key?(:columns)
+            {
               label: col[:label],
-              columns: wrap_leaf_columns(nested_columns),
+              columns: wrap_leaf_columns(col[: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)
@@ -212,7 +173,6 @@ 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
@@ -220,41 +180,11 @@ module Playbook
       end
 
       def find_column_def_by_accessor(defs, target_accessor)
-        return nil if target_accessor.blank?
-
         defs.each do |col|
-          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)
+          return col if col[:accessor] == target_accessor
 
-          if array_columns.any?
-            found = find_column_def_by_id(array_columns, target_id)
+          if col[:columns].is_a?(Array)
+            found = find_column_def_by_accessor(col[:columns], target_accessor)
             return found if found
           end
         end

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

@@ -39,7 +39,7 @@ module Playbook
       end
 
       def classname
-        generate_classname("pb_table_tr", "pb-bg-row-white", subrow_depth_classname, separator: " ")
+        generate_classname("pb_table_tr", "bg-white", subrow_depth_classname, separator: " ")
       end
 
       def td_classname(column, index)

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

@@ -20,12 +20,11 @@ type BadgeProps = {
     onTouchEnd?: React.TouchEventHandler<HTMLSpanElement>,
   },
   data?: {[key: string]: string},
-  htmlOptions?: {[key: string]: string | number | boolean | (() => void) | ((event: any) => void) | any},
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   removeIcon?: boolean,
   removeOnClick?: React.MouseEventHandler<HTMLSpanElement>,
   rounded?: boolean,
-  tabIndex?: number,
   text?: string,
   variant?: "error" | "info" | "neutral" | "notification" | "notificationError" | "primary" | "success" | "warning",
 } & GlobalProps
@@ -40,7 +39,6 @@ const Badge = (props: BadgeProps): React.ReactElement => {
     removeIcon = false,
     removeOnClick,
     rounded = false,
-    tabIndex,
     text,
     variant = 'neutral',
   } = props
@@ -63,7 +61,6 @@ 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,16 +112,3 @@ 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,14 +350,8 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
   if (syncStartWith) {
     picker.config.onClose.push((selectedDates: string) => {
       if (selectedDates?.length) {
-        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();
-        }
+        const quickpick = (document.querySelector(`#${syncStartWith}`) as HTMLElement & { _flatpickr?: any })?._flatpickr;
+        quickpick?.clear();
       }
     });
   }
@@ -366,14 +360,8 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
   if (syncEndWith) {
     picker.config.onClose.push((selectedDates: string) => {
       if (selectedDates?.length) {
-        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();
-        }
+        const quickpick = (document.querySelector(`#${syncEndWith}`) as HTMLElement & { _flatpickr?: any })?._flatpickr;
+        quickpick?.clear();
       }
     });
   }

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

@@ -48,8 +48,7 @@ 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_and_dropdown_range: Range with Dropdown and 2 Date Pickers
+  - date_picker_range_pattern: Range with 2 Date Pickers and a Quick Pick
   - 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,5 +26,4 @@ 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 DatePickerAndDropdownRange } from './_date_picker_and_dropdown_range.jsx'
+export { default as DatePickerRangePattern } from './_date_picker_range_pattern'

data/app/pb_kits/playbook/pb_dropdown/_dropdown.scss

@@ -12,7 +12,6 @@
 
 .pb_dropdown_default,
 .pb_dropdown_subtle,
-.pb_dropdown_quickpick,
 .pb_dropdown_default_separators_hidden,
 .pb_dropdown_subtle_separators_hidden {
   .dropdown_wrapper {