playbook_ui 16.5.0.pre.alpha.testingplayground15744 → 16.5.0.pre.alpha.typeaheadrailscreateable15620

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2984d147358c9fa3f66376dd0d958fab0def034dd0d5240924c9237d4b2e9bc4
-  data.tar.gz: 8098d5f240ff38dd1c879473a7d70833e8f34e77e6aa637081920861ac58dd22
+  metadata.gz: b741edda0fbf190e36d2c45cd3c326606f329fdf44815028299a302073df5eb5
+  data.tar.gz: 207cd40ce174a8291e0bfc870dcbb71ccc3edf5435602de6b1963b97a70d52d8
 SHA512:
-  metadata.gz: 2037082fe5090907ab6bf8689e04c4d1db2a1a72e4e2483a3d12aacdd6215b5381a8142459a5921c24c69e17fe2efdcf1609f7a1959471aa62e1c888c4d7d2f5
-  data.tar.gz: 25a37a564b93cd765a91877ba21763420a475dd71641af93709d25da2529929798968e4f202381fd73322601d8098af4d091cde0d8f309b2f745a33eb7d61383
+  metadata.gz: bfdce9c095261f380cea8340098fd85436f2380953030481eb5a02274214de51fdcc9b7df9394f0c61796d245e9a2284729a69e3afb4200945f37788eab53063
+  data.tar.gz: c0d8a229c0ebc32669b0c6262b005951b52dbc2631ce7538e5eb7df1b37fab57ff50b1a7963c46faa3ddab6cc00cf98bc790cd0443c2d9c5ca29d077bc9c2876

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

@@ -37,12 +37,13 @@ type AdvancedTableProps = {
   columnDefinitions: GenericObject[]
   columnGroupBorderColor?: "text_lt_default" | "text_lt_light" | "text_lt_lighter" | "text_dk_default" | "text_dk_light" | "text_dk_lighter"
   columnVisibilityControl?: GenericObject
-  customSort?: boolean
+  customSort?:boolean;
+  dark?: boolean
   data?: { [key: string]: string }
   enableToggleExpansion?: "all" | "header" | "none"
   enableSortingRemoval?: boolean
   expandedControl?: GenericObject
-  expandByDepth?: GenericObject[]
+  expandByDepth?: { [key: string]: string | number }
   onExpandByDepthClick?: (arg: number, arg1: any) => void
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string
@@ -66,7 +67,6 @@ type AdvancedTableProps = {
   persistToggleExpansionButton?: boolean,
   sortControl?: GenericObject
   sortParentOnly?: boolean
-  stickyLeftColumn?: string[]
   tableData: GenericObject[]
   tableOptions?: GenericObject
   tableProps?: GenericObject
@@ -78,18 +78,6 @@ type AdvancedTableProps = {
   fullScreenControl?: (controls: FullscreenControls) => void
 } & GlobalProps;
 
-/**
- * Subcomponent props (AdvancedTable.Header / AdvancedTable.Body). Must be a plain `type NameProps = { ... }` block—
- * `yarn generate-ai-metadata` only parses that shape in this file (not Omit<> / intersection).
- * Not used on the root component; playground routes these via propTargets.
- */
-type _AdvancedTableSubkitSchemaProps = {
-  enableSorting?: boolean
-  sortIcon?: string | string[]
-  collapsibleTrail?: boolean
-  subRowHeaders?: string[]
-}
-
 const AdvancedTable = (props: AdvancedTableProps) => {
   const {
     aria = {},

data/app/pb_kits/playbook/pb_advanced_table/kit.schema.json

@@ -50,7 +50,7 @@
       ]
     },
     "customSort": {
-      "type": "boolean",
+      "type": "boolean;",
       "platforms": [
         "react"
       ]
@@ -81,7 +81,7 @@
       ]
     },
     "expandByDepth": {
-      "type": "array",
+      "type": "{ [key: string]: string | number }",
       "platforms": [
         "react"
       ]
@@ -114,22 +114,6 @@
       ],
       "default": false
     },
-    "maxHeight": {
-      "type": "enum",
-      "platforms": [
-        "react"
-      ],
-      "values": [
-        "auto",
-        "xs",
-        "sm",
-        "md",
-        "lg",
-        "xl",
-        "xxl",
-        "xxxl"
-      ]
-    },
     "onRowToggleClick": {
       "type": "function",
       "platforms": [
@@ -149,18 +133,11 @@
       ]
     },
     "paginationProps": {
-      "type": "GenericObject",
+      "type": "function",
       "platforms": [
         "react"
       ]
     },
-    "pinnedRows": {
-      "type": "GenericObject",
-      "platforms": [
-        "react",
-        "rails"
-      ]
-    },
     "responsive": {
       "type": "enum",
       "platforms": [
@@ -224,12 +201,6 @@
         "react"
       ]
     },
-    "stickyLeftColumn": {
-      "type": "array",
-      "platforms": [
-        "react"
-      ]
-    },
     "tableData": {
       "type": "array",
       "platforms": [
@@ -286,29 +257,11 @@
         "react"
       ]
     },
-    "enableSorting": {
-      "type": "boolean",
-      "platforms": [
-        "react"
-      ]
-    },
-    "sortIcon": {
-      "type": "string | string[]",
-      "platforms": [
-        "react"
-      ]
-    },
-    "collapsibleTrail": {
-      "type": "boolean",
-      "platforms": [
-        "react"
-      ]
-    },
-    "subRowHeaders": {
-      "type": "array",
+    "pinnedRows": {
       "platforms": [
-        "react"
-      ]
+        "rails"
+      ],
+      "type": "string"
     }
   },
   "globalProps": true,

data/app/pb_kits/playbook/pb_advanced_table/table_header.html.erb

@@ -7,7 +7,7 @@
       <% header_row.each_with_index do |cell, cell_index| %>
         <% header_component = object.header_component_info(cell, cell_index, row_index) %>
         <%= pb_rails(header_component[:name], props: header_component[:props]) do %>
-          <%= pb_rails("flex", props: { align: "center", justify: object.header_flex_justify(cell, cell_index, row_index), text_align: object.header_flex_text_align(cell) }) do %>
+          <%= pb_rails("flex", props: { align: "center", justify: cell_index.zero? ? "start" : row_index === header_rows.size - 1 ? "end" : "center", text_align: (cell[:header_alignment] || "end") }) do %>
             <% if cell_index.zero? && row_index === header_rows.size - 1 %>
               <% if object.selectable_rows && object.enable_toggle_expansion != "none" %>
                 <%= pb_rails("flex/flex_item", props: { padding_right: "xs" }) do %>

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

@@ -192,19 +192,6 @@ module Playbook
         { name: component_name, props: component_props }
       end
 
-      # Flex justify for header cells: column_styling header_alignment when present (otherwisedefault by column/row index)
-      def header_flex_justify(cell, cell_index, row_index)
-        ha = cell[:header_alignment]
-        return header_alignment_to_justify(ha) if ha.present?
-
-        default_header_flex_justify(cell_index, row_index)
-      end
-
-      # Flex text_align from column_styling header_alignment (default is end)
-      def header_flex_text_align(cell)
-        (cell[:header_alignment].presence || "end").to_s
-      end
-
     private
 
       # Find the original column definition for a cell
@@ -364,26 +351,6 @@ module Playbook
           row[:children] || row["children"]
         end
       end
-
-      # 2 header alignment helper methods
-      def header_alignment_to_justify(header_alignment)
-        case header_alignment.to_s
-        when "left" then "start"
-        when "center" then "center"
-        when "right" then "end"
-        else "end"
-        end
-      end
-
-      def default_header_flex_justify(cell_index, row_index)
-        if cell_index.zero?
-          "start"
-        elsif row_index == header_rows.size - 1
-          "end"
-        else
-          "center"
-        end
-      end
     end
   end
 end

data/app/pb_kits/playbook/pb_avatar/kit.schema.json

@@ -7,19 +7,6 @@
     "rails"
   ],
   "props": {
-    "componentOverlay": {
-      "type": "GenericObject",
-      "platforms": [
-        "react",
-        "rails"
-      ]
-    },
-    "dark": {
-      "type": "boolean",
-      "platforms": [
-        "react"
-      ]
-    },
     "grayscale": {
       "type": "boolean",
       "platforms": [
@@ -78,6 +65,11 @@
         "offline",
         "online"
       ]
+    },
+    "componentOverlay": {
+      "platforms": [
+        "rails"
+      ]
     }
   },
   "globalProps": true,

data/app/pb_kits/playbook/pb_background/kit.schema.json

@@ -156,20 +156,6 @@
       ],
       "default": null
     },
-    "padding": {
-      "type": "enum",
-      "platforms": [
-        "react"
-      ],
-      "values": [
-        "none",
-        "xs",
-        "sm",
-        "md",
-        "lg",
-        "xl"
-      ]
-    },
     "tag": {
       "type": "enum",
       "platforms": [

data/app/pb_kits/playbook/pb_badge/kit.schema.json

@@ -7,12 +7,6 @@
     "rails"
   ],
   "props": {
-    "closeProps": {
-      "type": "GenericObject",
-      "platforms": [
-        "react"
-      ]
-    },
     "removeIcon": {
       "type": "boolean",
       "platforms": [

data/app/pb_kits/playbook/pb_body/kit.schema.json

@@ -23,12 +23,6 @@
       ],
       "default": "default"
     },
-    "dark": {
-      "type": "boolean",
-      "platforms": [
-        "react"
-      ]
-    },
     "highlightedText": {
       "type": "array",
       "platforms": [

data/app/pb_kits/playbook/pb_bread_crumbs/_bread_crumbs.tsx

@@ -15,6 +15,7 @@ type BreadCrumbsProps = {
   data?: {[key: string]: string},
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
+  text?: string,
   children?: React.ReactChild[] | React.ReactNode,
 }
 const BreadCrumbs = (props: BreadCrumbsProps): React.ReactElement => {

data/app/pb_kits/playbook/pb_button_toolbar/_button_toolbar.tsx

@@ -9,6 +9,7 @@ type ButtonToolbarProps = {
   aria?: {[key: string]: string},
   children?: React.ReactChild[] | React.ReactChild,
   className?: string,
+  connected?: boolean,
   data?: {[key: string]: string},
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,

data/app/pb_kits/playbook/pb_button_toolbar/kit.schema.json

@@ -7,6 +7,14 @@
     "rails"
   ],
   "props": {
+    "connected": {
+      "type": "boolean",
+      "platforms": [
+        "react",
+        "rails"
+      ],
+      "default": false
+    },
     "onClick": {
       "type": "ReactNode",
       "platforms": [
@@ -43,13 +51,6 @@
         "secondary"
       ],
       "default": "primary"
-    },
-    "connected": {
-      "platforms": [
-        "rails"
-      ],
-      "type": "boolean",
-      "default": false
     }
   },
   "globalProps": true,

data/app/pb_kits/playbook/pb_card/kit.schema.json

@@ -61,21 +61,6 @@
       ],
       "default": false
     },
-    "borderRadius": {
-      "type": "enum",
-      "platforms": [
-        "react"
-      ],
-      "values": [
-        "xs",
-        "sm",
-        "md",
-        "lg",
-        "xl",
-        "none",
-        "rounded"
-      ]
-    },
     "dragId": {
       "type": "string",
       "platforms": [
@@ -99,25 +84,12 @@
       ],
       "default": true
     },
-    "highlight": {
-      "type": "GenericObject",
-      "platforms": [
-        "react",
-        "rails"
-      ]
-    },
     "length": {
       "type": "number",
       "platforms": [
         "react"
       ]
     },
-    "padding": {
-      "type": "string",
-      "platforms": [
-        "react"
-      ]
-    },
     "selected": {
       "type": "boolean",
       "platforms": [
@@ -158,6 +130,12 @@
       ],
       "default": false
     },
+    "highlight": {
+      "platforms": [
+        "rails"
+      ],
+      "type": "string"
+    },
     "items": {
       "platforms": [
         "rails"
@@ -180,11 +158,11 @@
   "usage": {
     "react": {
       "import": "import { Card } from 'playbook-ui'",
-      "example": "<Card background=\"white\" borderRadius=\"xs\"></Card>"
+      "example": "<Card background=\"white\" tag=\"div\"></Card>"
     },
     "rails": {
       "import": null,
-      "example": "<%= pb_rails(\"card\", props: { background: \"white\", border_radius: \"xs\" }) %>"
+      "example": "<%= pb_rails(\"card\", props: { background: \"white\", tag: \"div\" }) %>"
     }
   }
 }

data/app/pb_kits/playbook/pb_checkbox/kit.schema.json

@@ -15,12 +15,6 @@
       ],
       "default": false
     },
-    "dark": {
-      "type": "boolean",
-      "platforms": [
-        "react"
-      ]
-    },
     "disabled": {
       "type": "boolean",
       "platforms": [

data/app/pb_kits/playbook/pb_circle_icon_button/kit.schema.json

@@ -7,12 +7,6 @@
     "rails"
   ],
   "props": {
-    "dark": {
-      "type": "boolean",
-      "platforms": [
-        "react"
-      ]
-    },
     "disabled": {
       "type": "boolean",
       "platforms": [

data/app/pb_kits/playbook/pb_collapsible/kit.schema.json

@@ -34,24 +34,9 @@
       ]
     },
     "iconSize": {
-      "type": "enum",
+      "type": "IconSizes",
       "platforms": [
         "react"
-      ],
-      "values": [
-        "lg",
-        "xs",
-        "sm",
-        "1x",
-        "2x",
-        "3x",
-        "4x",
-        "5x",
-        "6x",
-        "7x",
-        "8x",
-        "9x",
-        "10x"
       ]
     },
     "onIconClick": {
@@ -95,11 +80,11 @@
   "usage": {
     "react": {
       "import": "import { Collapsible } from 'playbook-ui'",
-      "example": "<Collapsible iconColor=\"default\" iconSize=\"lg\"></Collapsible>"
+      "example": "<Collapsible iconColor=\"default\" tag=\"h1\"></Collapsible>"
     },
     "rails": {
       "import": null,
-      "example": "<%= pb_rails(\"collapsible\", props: { icon_color: \"default\", icon_size: \"lg\" }) %>"
+      "example": "<%= pb_rails(\"collapsible\", props: { icon_color: \"default\", tag: \"h1\" }) %>"
     }
   }
 }

data/app/pb_kits/playbook/pb_contact/kit.schema.json

@@ -28,12 +28,6 @@
         "rails"
       ]
     },
-    "dark": {
-      "type": "boolean",
-      "platforms": [
-        "react"
-      ]
-    },
     "iconEnabled": {
       "type": "boolean",
       "platforms": [

data/app/pb_kits/playbook/pb_currency/kit.schema.json

@@ -35,12 +35,6 @@
         "rails"
       ]
     },
-    "dark": {
-      "type": "boolean",
-      "platforms": [
-        "react"
-      ]
-    },
     "decimals": {
       "type": "enum",
       "platforms": [

data/app/pb_kits/playbook/pb_dashboard_value/kit.schema.json

@@ -20,26 +20,24 @@
       ],
       "default": "left"
     },
-    "statChange": {
-      "type": "GenericObject",
+    "statLabel": {
+      "type": "string statValue?: { unit?: string value?: string | number",
       "platforms": [
         "react",
         "rails"
       ]
     },
-    "statLabel": {
-      "type": "string",
+    "statChange": {
       "platforms": [
-        "react",
         "rails"
-      ]
+      ],
+      "type": "string"
     },
     "statValue": {
-      "type": "GenericObject",
       "platforms": [
-        "react",
         "rails"
-      ]
+      ],
+      "type": "string"
     }
   },
   "globalProps": true,

data/app/pb_kits/playbook/pb_date/kit.schema.json

@@ -8,7 +8,7 @@
   ],
   "props": {
     "alignment": {
-      "type": "enum",
+      "type": "\"left\" | \"center\" | \"right\";",
       "platforms": [
         "react",
         "rails"
@@ -20,14 +20,8 @@
       ],
       "default": "left"
     },
-    "dark": {
-      "type": "boolean",
-      "platforms": [
-        "react"
-      ]
-    },
     "showDayOfWeek": {
-      "type": "boolean",
+      "type": "boolean;",
       "platforms": [
         "react",
         "rails"
@@ -35,7 +29,7 @@
       "default": false
     },
     "showCurrentYear": {
-      "type": "boolean",
+      "type": "boolean;",
       "platforms": [
         "react",
         "rails"
@@ -43,7 +37,7 @@
       "default": false
     },
     "showIcon": {
-      "type": "boolean",
+      "type": "boolean;",
       "platforms": [
         "react",
         "rails"
@@ -51,20 +45,21 @@
       "default": false
     },
     "size": {
-      "type": "enum",
+      "type": "\"sm\" | \"md\" | \"lg\";",
       "platforms": [
         "react",
         "rails"
       ],
       "values": [
-        "sm",
+        "lg",
         "md",
-        "lg"
+        "sm",
+        "xs"
       ],
       "default": "md"
     },
     "unstyled": {
-      "type": "boolean",
+      "type": "boolean;",
       "platforms": [
         "react",
         "rails"
@@ -72,7 +67,7 @@
       "default": false
     },
     "value": {
-      "type": "Date",
+      "type": "Date;",
       "platforms": [
         "react"
       ]
@@ -93,11 +88,11 @@
   "usage": {
     "react": {
       "import": "import { Date } from 'playbook-ui'",
-      "example": "<Date alignment=\"left\" size=\"sm\"></Date>"
+      "example": "<Date alignment=\"left\" size=\"lg\"></Date>"
     },
     "rails": {
       "import": null,
-      "example": "<%= pb_rails(\"date\", props: { alignment: \"left\", size: \"sm\" }) %>"
+      "example": "<%= pb_rails(\"date\", props: { alignment: \"left\", size: \"lg\" }) %>"
     }
   }
 }

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

@@ -612,41 +612,6 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
   }
 // === End of Automatic Sync Logic ===
 
-  // Label click toggles calendar: stop pointer bubbling to document, then toggle (avoids flatpickr close + input-focus reopen).
-  const datePickerLabel = document.querySelector(`label[for="${pickerId}"]`)
-  if (datePickerLabel) {
-    type LabelHandlerRefs = { stopPointer?: (e: Event) => void, click?: (e: MouseEvent) => void }
-    const labelWithRefs = datePickerLabel as HTMLElement & { _pbDatePickerLabelHandlers?: LabelHandlerRefs }
-    const prev = labelWithRefs._pbDatePickerLabelHandlers
-    if (prev?.stopPointer) {
-      datePickerLabel.removeEventListener('mousedown', prev.stopPointer)
-      datePickerLabel.removeEventListener('touchstart', prev.stopPointer)
-    }
-    if (prev?.click) {
-      datePickerLabel.removeEventListener('click', prev.click)
-    }
-
-    const stopPointerForFlatpickrDocClose = (e: Event) => {
-      e.stopPropagation()
-    }
-    const onDatePickerLabelClick = (e: MouseEvent) => {
-      e.preventDefault()
-      e.stopPropagation()
-      if (picker.input.disabled) return
-      picker.toggle()
-      if (picker.isOpen) {
-        picker.input.focus()
-      }
-    }
-    datePickerLabel.addEventListener('mousedown', stopPointerForFlatpickrDocClose)
-    datePickerLabel.addEventListener('touchstart', stopPointerForFlatpickrDocClose, { passive: true })
-    datePickerLabel.addEventListener('click', onDatePickerLabelClick)
-
-    labelWithRefs._pbDatePickerLabelHandlers = {
-      stopPointer: stopPointerForFlatpickrDocClose,
-      click: onDatePickerLabelClick,
-    }
-  }
 
   // Adding dropdown icons to year and month select
   dropdown.insertAdjacentHTML('afterend', `<i class="year-dropdown-icon">${angleDown}</i>`)