playbook_ui 18.2.0 → 18.3.0.pre.alpha.PLAY3342advancedtablereactmulticolumnselectablerow21082

data/dist/ai/kits/text_input.schema.json

@@ -11,7 +11,8 @@
       "type": "boolean",
       "platforms": [
         "react"
-      ]
+      ],
+      "default": false
     },
     "disabled": {
       "type": "boolean",
@@ -64,12 +65,22 @@
         "react",
         "rails"
       ],
-      "values": [
-        "currency",
-        "zipCode",
-        "postalCode",
-        "ssn"
-      ],
+      "values": {
+        "react": [
+          "currency",
+          "zipCode",
+          "postalCode",
+          "ssn"
+        ],
+        "rails": [
+          "currency",
+          "zip_code",
+          "postal_code",
+          "ssn",
+          "credit_card",
+          "cvv"
+        ]
+      },
       "default": null
     },
     "onChange": {
@@ -114,7 +125,8 @@
       "platforms": [
         "react",
         "rails"
-      ]
+      ],
+      "default": ""
     },
     "addOn": {
       "type": {
@@ -130,7 +142,8 @@
       "type": "boolean | string",
       "platforms": [
         "react"
-      ]
+      ],
+      "default": true
     },
     "autocomplete": {
       "platforms": [

data/dist/ai/kits/time.schema.json

@@ -46,10 +46,18 @@
         "react",
         "rails"
       ],
-      "values": [
-        "md",
-        "sm"
-      ],
+      "values": {
+        "react": [
+          "md",
+          "sm"
+        ],
+        "rails": [
+          "xs",
+          "sm",
+          "md",
+          "lg"
+        ]
+      },
       "default": "sm"
     },
     "showTimezone": {

data/dist/ai/kits/time_picker.schema.json

@@ -42,7 +42,8 @@
       "platforms": [
         "react",
         "rails"
-      ]
+      ],
+      "default": {}
     },
     "label": {
       "type": "string",

data/dist/ai/kits/time_range_inline.schema.json

@@ -13,11 +13,18 @@
         "react",
         "rails"
       ],
-      "values": [
-        "left",
-        "center",
-        "vertical"
-      ],
+      "values": {
+        "react": [
+          "left",
+          "center",
+          "vertical"
+        ],
+        "rails": [
+          "left",
+          "center",
+          "right"
+        ]
+      },
       "default": "left"
     },
     "size": {
@@ -72,6 +79,7 @@
     }
   },
   "globalProps": true,
+  "globalEventProps": true,
   "usage": {
     "react": {
       "import": "import { TimeRangeInline } from 'playbook-ui'",

data/dist/ai/kits/time_stacked.schema.json

@@ -53,6 +53,7 @@
     }
   },
   "globalProps": true,
+  "globalEventProps": true,
   "usage": {
     "react": {
       "import": "import { TimeStacked } from 'playbook-ui'",

data/dist/ai/kits/timestamp.schema.json

@@ -121,6 +121,7 @@
     }
   },
   "globalProps": true,
+  "globalEventProps": true,
   "usage": {
     "react": {
       "import": "import { Timestamp } from 'playbook-ui'",

data/dist/ai/kits/title.schema.json

@@ -61,16 +61,29 @@
         "react",
         "rails"
       ],
-      "values": [
-        "h1",
-        "h2",
-        "h3",
-        "h4",
-        "h5",
-        "h6",
-        "div",
-        "span"
-      ],
+      "values": {
+        "react": [
+          "h1",
+          "h2",
+          "h3",
+          "h4",
+          "h5",
+          "h6",
+          "div",
+          "span"
+        ],
+        "rails": [
+          "h1",
+          "h2",
+          "h3",
+          "h4",
+          "h5",
+          "h6",
+          "p",
+          "div",
+          "span"
+        ]
+      },
       "default": "h3"
     },
     "text": {

data/dist/ai/kits/title_count.schema.json

@@ -31,7 +31,8 @@
       "type": "boolean",
       "platforms": [
         "react"
-      ]
+      ],
+      "default": false
     },
     "title": {
       "type": "string",

data/dist/ai/kits/tooltip.schema.json

@@ -19,7 +19,8 @@
       "type": "number | Partial<{open: number; close: number}>",
       "platforms": [
         "react"
-      ]
+      ],
+      "default": 0
     },
     "height": {
       "type": "string",
@@ -32,7 +33,8 @@
       "type": "string",
       "platforms": [
         "react"
-      ]
+      ],
+      "default": null
     },
     "interaction": {
       "type": "boolean",
@@ -85,7 +87,8 @@
       "values": [
         "absolute",
         "fixed"
-      ]
+      ],
+      "default": "absolute"
     },
     "text": {
       "type": "string",
@@ -104,13 +107,15 @@
       "type": "boolean",
       "platforms": [
         "react"
-      ]
+      ],
+      "default": true
     },
     "forceOpenTooltip": {
       "type": "boolean",
       "platforms": [
         "react"
-      ]
+      ],
+      "default": false
     },
     "dark": {
       "platforms": [

data/dist/ai/kits/typeahead.schema.json

@@ -222,7 +222,7 @@
       ],
       "default": false
     },
-    "showPillIndex": {
+    "externalDragHandle": {
       "type": "boolean",
       "platforms": [
         "react",
@@ -230,13 +230,13 @@
       ],
       "default": false
     },
-    "pillDragHandle": {
+    "showPillIndex": {
       "type": "boolean",
       "platforms": [
         "react",
         "rails"
       ],
-      "default": true
+      "default": false
     },
     "styles": {
       "type": "TypeaheadStylesConfig",

data/dist/ai/kits/user.schema.json

@@ -47,7 +47,8 @@
       "type": "boolean",
       "platforms": [
         "react"
-      ]
+      ],
+      "default": false
     },
     "avatarGrayscale": {
       "type": "boolean",
@@ -115,14 +116,16 @@
       "platforms": [
         "react",
         "rails"
-      ]
+      ],
+      "default": ""
     },
     "title": {
       "type": "string",
       "platforms": [
         "react",
         "rails"
-      ]
+      ],
+      "default": ""
     },
     "titleStyle": {
       "type": "enum",
@@ -130,16 +133,24 @@
         "react",
         "rails"
       ],
-      "values": [
-        "title",
-        "body",
-        "caption",
-        "detail"
-      ],
+      "values": {
+        "react": [
+          "title",
+          "body",
+          "caption",
+          "detail"
+        ],
+        "rails": [
+          "body",
+          "caption",
+          "detail"
+        ]
+      },
       "default": "body"
     }
   },
   "globalProps": true,
+  "globalEventProps": true,
   "usage": {
     "react": {
       "import": "import { User } from 'playbook-ui'",

data/dist/ai/kits/user_badge.schema.json

@@ -34,6 +34,7 @@
     }
   },
   "globalProps": true,
+  "globalEventProps": true,
   "usage": {
     "react": {
       "import": "import { UserBadge } from 'playbook-ui'",

data/dist/ai/kits/weekday_stacked.schema.json

@@ -24,7 +24,8 @@
       "type": "boolean",
       "platforms": [
         "react"
-      ]
+      ],
+      "default": false
     },
     "date": {
       "type": "Date",
@@ -56,6 +57,7 @@
     }
   },
   "globalProps": true,
+  "globalEventProps": true,
   "usage": {
     "react": {
       "import": "import { WeekdayStacked } from 'playbook-ui'",

data/dist/ai/playgrounds/advanced_table.json

@@ -1 +1 @@
-{"presets":[{"name":"Default","props":{"columnDefinitions":[{"accessor":"year","label":"Year","cellAccessors":["quarter","month"]},{"accessor":"newEnrollments","label":"New Enrollments"},{"accessor":"attendanceRate","label":"Attendance Rate"}],"tableData":[{"year":"2021","quarter":null,"month":null,"newEnrollments":"20","attendanceRate":"51%","children":[{"year":"2021","quarter":"Q1","month":null,"newEnrollments":"2","attendanceRate":"32%","children":[{"year":"2021","quarter":"Q1","month":"January","newEnrollments":"16","attendanceRate":"11%"}]}]},{"year":"2022","quarter":null,"month":null,"newEnrollments":"35","attendanceRate":"64%"}]},"dataPreset":"default"},{"name":"With Sorting","props":{"columnDefinitions":[{"accessor":"year","label":"Year","cellAccessors":["quarter","month"]},{"accessor":"newEnrollments","label":"New Enrollments"},{"accessor":"attendanceRate","label":"Attendance Rate"}],"tableData":[{"year":"2021","quarter":null,"month":null,"newEnrollments":"20","attendanceRate":"51%","children":[{"year":"2021","quarter":"Q1","month":null,"newEnrollments":"2","attendanceRate":"32%","children":[{"year":"2021","quarter":"Q1","month":"January","newEnrollments":"16","attendanceRate":"11%"}]}]},{"year":"2022","quarter":null,"month":null,"newEnrollments":"35","attendanceRate":"64%"}],"enableSorting":true},"dataPreset":"default"},{"name":"Selectable Rows","props":{"columnDefinitions":[{"accessor":"year","label":"Year","cellAccessors":["quarter","month"]},{"accessor":"newEnrollments","label":"New Enrollments"},{"accessor":"attendanceRate","label":"Attendance Rate"}],"tableData":[{"year":"2021","quarter":null,"month":null,"newEnrollments":"20","attendanceRate":"51%","children":[{"year":"2021","quarter":"Q1","month":null,"newEnrollments":"2","attendanceRate":"32%","children":[{"year":"2021","quarter":"Q1","month":"January","newEnrollments":"16","attendanceRate":"11%"}]}]},{"year":"2022","quarter":null,"month":null,"newEnrollments":"35","attendanceRate":"64%"}],"selectableRows":true,"showActionsBar":true}},{"name":"Subrow Headers","structureMode":"explicit","props":{"columnDefinitions":[{"accessor":"year","label":"Year","cellAccessors":["quarter","month"]},{"accessor":"newEnrollments","label":"New Enrollments"},{"accessor":"attendanceRate","label":"Attendance Rate"}],"tableData":[{"year":"2021","quarter":null,"month":null,"newEnrollments":"20","attendanceRate":"51%","children":[{"year":"2021","quarter":"Q1","month":null,"newEnrollments":"2","attendanceRate":"32%","children":[{"year":"2021","quarter":"Q1","month":"January","newEnrollments":"16","attendanceRate":"11%"}]}]},{"year":"2022","quarter":null,"month":null,"newEnrollments":"35","attendanceRate":"64%"}],"subRowHeaders":["Quarter","Month","Day"]},"dataPreset":"default"},{"name":"Loading State","props":{"columnDefinitions":[{"accessor":"year","label":"Year","cellAccessors":["quarter","month"]},{"accessor":"newEnrollments","label":"New Enrollments"},{"accessor":"attendanceRate","label":"Attendance Rate"}],"tableData":[{"year":"2021","quarter":null,"month":null,"newEnrollments":"20","attendanceRate":"51%","children":[{"year":"2021","quarter":"Q1","month":null,"newEnrollments":"2","attendanceRate":"32%","children":[{"year":"2021","quarter":"Q1","month":"January","newEnrollments":"16","attendanceRate":"11%"}]}]},{"year":"2022","quarter":null,"month":null,"newEnrollments":"35","attendanceRate":"64%"}],"loading":true,"initialLoadingRowsCount":5},"dataPreset":"default"},{"name":"Sorting by Column","structureMode":"explicit","props":{"columnDefinitions":[{"accessor":"year","label":"Year","cellAccessors":["quarter","month"]},{"accessor":"newEnrollments","label":"New Enrollments","enableSort":true},{"accessor":"attendanceRate","label":"Attendance Rate","enableSort":true}],"tableData":[{"year":"2021","quarter":null,"month":null,"newEnrollments":"20","attendanceRate":"51%","children":[{"year":"2021","quarter":"Q1","month":null,"newEnrollments":"2","attendanceRate":"32%","children":[{"year":"2021","quarter":"Q1","month":"January","newEnrollments":"16","attendanceRate":"11%"}]}]},{"year":"2022","quarter":null,"month":null,"newEnrollments":"35","attendanceRate":"64%"}],"enableSorting":true},"dataPreset":"column_sort"},{"name":"Column Styling","structureMode":"explicit","props":{"columnDefinitions":[{"accessor":"year","label":"Year","cellAccessors":["quarter","month"]},{"accessor":"newEnrollments","label":"New Enrollments"},{"accessor":"attendanceRate","label":"Attendance Rate"}],"tableData":[{"year":"2021","quarter":null,"month":null,"newEnrollments":"20","attendanceRate":"51%","children":[{"year":"2021","quarter":"Q1","month":null,"newEnrollments":"2","attendanceRate":"32%","children":[{"year":"2021","quarter":"Q1","month":"January","newEnrollments":"16","attendanceRate":"11%"}]}]},{"year":"2022","quarter":null,"month":null,"newEnrollments":"35","attendanceRate":"64%"}]},"dataPreset":"column_styling"}],"hints":{"advanced_table_import":{"when":{},"message":"AdvancedTable is imported from playbook-ui/advanced-table so apps can keep TanStack out of the main playbook-ui bundle until this kit is used.","type":"info"},"sorting_info":{"when":{"enableSortingRemoval":true},"message":"Click column headers to sort. Click again to remove sorting.","type":"info"},"header_sorting_info":{"when":{"enableSorting":true},"message":"Header sorting UI is only applied in \"Subcomponent Structure\" mode (explicit Header and Body). For sorting by column, pass columnDefinitions with enableSort: true to the columnDefinitions array. Click 'sorting by column' to see an example.","type":"info"},"selectable_info":{"when":{"selectableRows":true},"message":"Use onRowSelectionChange to handle selection changes. showActionsBar controls the action bar visibility.","type":"info"},"loading_info":{"when":{"loading":true},"message":"Use state to control the loading state.","type":"info"},"column_sort_info":{"when":{"columnDefinitions":{"enableSort":true}},"message":"For sorting by column, pass columnDefinitions with enableSort: true to the columnDefinitions array. Click 'sorting by column' to see an example.","type":"info"},"custom_sort_info":{"when":{"customSort":true},"message":"Use customSort to implement custom sorting logic. The customSort prop must be used in conjunction with the subRowHeaders prop. The customSort DOES NOT handle the sort logic, this must be handled on the frontend using the callback provided.","type":"info"},"cascade_collapse_info":{"when":{"cascadeCollapse":true},"message":"When cascadeCollapse is true, collapsing any parent row itself or by using the toggle expansion buttons in any header or subheader row also collapses all descendants and clears their expansion state. Re-expanding then shows only direct children until the user expands deeper levels again.","type":"info"},"column_styling_info":{"presetName":"Column Styling","message":"This sample uses columnStyling on column definitions. Year uses width for a fixed hierarchy column; other columns show background colors. See the Column Styling Width doc for minWidth and min/pref/max bands.","type":"info"}},"conditionals":{"initialLoadingRowsCount":{"requires":{"loading":true}},"onRowSelectionChange":{"requires":{"selectableRows":true}},"showActionsBar":{"requires":{"selectableRows":true}},"actions":{"requires":{"selectableRows":true,"showActionsBar":true}},"enableSorting":{"structureMode":"explicit"},"sortIcon":{"structureMode":"explicit","requires":{"enableSorting":true}},"collapsibleTrail":{"structureMode":"explicit"},"subRowHeaders":{"structureMode":"explicit"},"onExpandByDepthClick":{"requires":"expandByDepth"},"onCustomSortClick":{"requires":{"customSort":true}},"enableSortingRemoval":{"requires":{"enableSorting":true}},"sortControl":{"requires":{"enableSorting":true}},"customSort":{"requires":{"enableSorting":true}},"sortParentOnly":{"requires":{"enableSorting":true}}},"structureModes":{"default":"implicit","modes":{"implicit":{"label":"Default","template":"<AdvancedTable\n  columnDefinitions={columnDefinitions}\n  tableData={tableData}\n{{props}}\n/>","propTargets":{"collapsibleTrail":"props","subRowHeaders":"props"}},"explicit":{"label":"Subcomponent Structure","template":"<AdvancedTable\n  columnDefinitions={columnDefinitions}\n  tableData={tableData}{{props}}\n>\n  <AdvancedTable.Header{{AdvancedTable.Header.props}} />\n  <AdvancedTable.Body\n{{AdvancedTable.Body.props}}\n  />\n</AdvancedTable>"}}},"template":"<AdvancedTable\n  columnDefinitions={columnDefinitions}\n  tableData={tableData}\n{{props}}\n/>","children":{"editable":false,"default":""},"propTargets":{"enableSorting":"AdvancedTable.Header.props","sortIcon":"AdvancedTable.Header.props","collapsibleTrail":"AdvancedTable.Body.props","subRowHeaders":"AdvancedTable.Body.props"},"externalImports":["import { AdvancedTable } from 'playbook-ui/advanced-table'"],"samples":{"description":"Tiny synthetic AdvancedTable datasets for AI codegen. Prefer these shapes over inventing column/row structures. Nested rows use a children array; cellAccessors list sub-row label fields for the first column.","columnDefinitions":[{"accessor":"year","label":"Year","cellAccessors":["quarter","month"]},{"accessor":"newEnrollments","label":"New Enrollments"},{"accessor":"attendanceRate","label":"Attendance Rate"}],"columnDefinitionsSortable":[{"accessor":"year","label":"Year","cellAccessors":["quarter","month"]},{"accessor":"newEnrollments","label":"New Enrollments","enableSort":true},{"accessor":"attendanceRate","label":"Attendance Rate","enableSort":true}],"tableDataNested":[{"year":"2021","quarter":null,"month":null,"newEnrollments":"20","attendanceRate":"51%","children":[{"year":"2021","quarter":"Q1","month":null,"newEnrollments":"2","attendanceRate":"32%","children":[{"year":"2021","quarter":"Q1","month":"January","newEnrollments":"16","attendanceRate":"11%"}]}]},{"year":"2022","quarter":null,"month":null,"newEnrollments":"35","attendanceRate":"64%"}],"tableDataFlat":[{"year":"2021","newEnrollments":"20","attendanceRate":"51%"},{"year":"2022","newEnrollments":"35","attendanceRate":"64%"}]},"requiredProps":{"columnDefinitions":[{"accessor":"year","label":"Year","cellAccessors":["quarter","month"]},{"accessor":"newEnrollments","label":"New Enrollments"},{"accessor":"attendanceRate","label":"Attendance Rate"}],"tableData":[{"year":"2021","quarter":null,"month":null,"newEnrollments":"20","attendanceRate":"51%","children":[{"year":"2021","quarter":"Q1","month":null,"newEnrollments":"2","attendanceRate":"32%","children":[{"year":"2021","quarter":"Q1","month":"January","newEnrollments":"16","attendanceRate":"11%"}]}]},{"year":"2022","quarter":null,"month":null,"newEnrollments":"35","attendanceRate":"64%"}]},"dataPresets":{"note":"Full website mock datasets are not shipped. Each key maps to the tiny samples below (or samples.*).","keys":["default","flat_no_subrows","with_ids","inline_loading","grouped_headers","grouped_headers_double_nested","with_ids_standard","column_sort","column_styling"],"presets":{"default":{"label":"Default","columnDefinitions":[{"accessor":"year","label":"Year","cellAccessors":["quarter","month"]},{"accessor":"newEnrollments","label":"New Enrollments"},{"accessor":"attendanceRate","label":"Attendance Rate"}],"tableData":[{"year":"2021","quarter":null,"month":null,"newEnrollments":"20","attendanceRate":"51%","children":[{"year":"2021","quarter":"Q1","month":null,"newEnrollments":"2","attendanceRate":"32%","children":[{"year":"2021","quarter":"Q1","month":"January","newEnrollments":"16","attendanceRate":"11%"}]}]},{"year":"2022","quarter":null,"month":null,"newEnrollments":"35","attendanceRate":"64%"}]},"flat_no_subrows":{"label":"Flat rows (no sub-rows)","columnDefinitions":[{"accessor":"year","label":"Year","cellAccessors":["quarter","month"]},{"accessor":"newEnrollments","label":"New Enrollments"},{"accessor":"attendanceRate","label":"Attendance Rate"}],"tableData":[{"year":"2021","newEnrollments":"20","attendanceRate":"51%"},{"year":"2022","newEnrollments":"35","attendanceRate":"64%"}]},"with_ids":{"label":"Data with row IDs","columnDefinitions":[{"accessor":"year","label":"Year","cellAccessors":["quarter","month"]},{"accessor":"newEnrollments","label":"New Enrollments"},{"accessor":"attendanceRate","label":"Attendance Rate"}],"tableData":[{"year":"2021","quarter":null,"month":null,"newEnrollments":"20","attendanceRate":"51%","children":[{"year":"2021","quarter":"Q1","month":null,"newEnrollments":"2","attendanceRate":"32%","children":[{"year":"2021","quarter":"Q1","month":"January","newEnrollments":"16","attendanceRate":"11%"}]}]},{"year":"2022","quarter":null,"month":null,"newEnrollments":"35","attendanceRate":"64%"}]},"inline_loading":{"label":"Inline row loading","columnDefinitions":[{"accessor":"year","label":"Year","cellAccessors":["quarter","month"]},{"accessor":"newEnrollments","label":"New Enrollments"},{"accessor":"attendanceRate","label":"Attendance Rate"}],"tableData":[{"year":"2021","quarter":null,"month":null,"newEnrollments":"20","attendanceRate":"51%","children":[{"year":"2021","quarter":"Q1","month":null,"newEnrollments":"2","attendanceRate":"32%","children":[{"year":"2021","quarter":"Q1","month":"January","newEnrollments":"16","attendanceRate":"11%"}]}]},{"year":"2022","quarter":null,"month":null,"newEnrollments":"35","attendanceRate":"64%"}]},"grouped_headers":{"label":"Grouped headers (nested columns)","columnDefinitions":[{"accessor":"year","label":"Year","cellAccessors":["quarter","month"]},{"accessor":"newEnrollments","label":"New Enrollments"},{"accessor":"attendanceRate","label":"Attendance Rate"}],"tableData":[{"year":"2021","quarter":null,"month":null,"newEnrollments":"20","attendanceRate":"51%","children":[{"year":"2021","quarter":"Q1","month":null,"newEnrollments":"2","attendanceRate":"32%","children":[{"year":"2021","quarter":"Q1","month":"January","newEnrollments":"16","attendanceRate":"11%"}]}]},{"year":"2022","quarter":null,"month":null,"newEnrollments":"35","attendanceRate":"64%"}]},"grouped_headers_double_nested":{"label":"Grouped headers (double nested columns)","columnDefinitions":[{"accessor":"year","label":"Year","cellAccessors":["quarter","month"]},{"accessor":"newEnrollments","label":"New Enrollments"},{"accessor":"attendanceRate","label":"Attendance Rate"}],"tableData":[{"year":"2021","quarter":null,"month":null,"newEnrollments":"20","attendanceRate":"51%","children":[{"year":"2021","quarter":"Q1","month":null,"newEnrollments":"2","attendanceRate":"32%","children":[{"year":"2021","quarter":"Q1","month":"January","newEnrollments":"16","attendanceRate":"11%"}]}]},{"year":"2022","quarter":null,"month":null,"newEnrollments":"35","attendanceRate":"64%"}]},"with_ids_standard":{"label":"Column definitions with IDs","columnDefinitions":[{"accessor":"year","label":"Year","cellAccessors":["quarter","month"]},{"accessor":"newEnrollments","label":"New Enrollments"},{"accessor":"attendanceRate","label":"Attendance Rate"}],"tableData":[{"year":"2021","quarter":null,"month":null,"newEnrollments":"20","attendanceRate":"51%","children":[{"year":"2021","quarter":"Q1","month":null,"newEnrollments":"2","attendanceRate":"32%","children":[{"year":"2021","quarter":"Q1","month":"January","newEnrollments":"16","attendanceRate":"11%"}]}]},{"year":"2022","quarter":null,"month":null,"newEnrollments":"35","attendanceRate":"64%"}]},"column_sort":{"label":"Column Definitions with Sorting","columnDefinitions":[{"accessor":"year","label":"Year","cellAccessors":["quarter","month"]},{"accessor":"newEnrollments","label":"New Enrollments","enableSort":true},{"accessor":"attendanceRate","label":"Attendance Rate","enableSort":true}],"tableData":[{"year":"2021","quarter":null,"month":null,"newEnrollments":"20","attendanceRate":"51%","children":[{"year":"2021","quarter":"Q1","month":null,"newEnrollments":"2","attendanceRate":"32%","children":[{"year":"2021","quarter":"Q1","month":"January","newEnrollments":"16","attendanceRate":"11%"}]}]},{"year":"2022","quarter":null,"month":null,"newEnrollments":"35","attendanceRate":"64%"}]},"column_styling":{"label":"Column Styling","columnDefinitions":[{"accessor":"year","label":"Year","cellAccessors":["quarter","month"]},{"accessor":"newEnrollments","label":"New Enrollments"},{"accessor":"attendanceRate","label":"Attendance Rate"}],"tableData":[{"year":"2021","quarter":null,"month":null,"newEnrollments":"20","attendanceRate":"51%","children":[{"year":"2021","quarter":"Q1","month":null,"newEnrollments":"2","attendanceRate":"32%","children":[{"year":"2021","quarter":"Q1","month":"January","newEnrollments":"16","attendanceRate":"11%"}]}]},{"year":"2022","quarter":null,"month":null,"newEnrollments":"35","attendanceRate":"64%"}]}}}}
+{"presets":[{"name":"Default","props":{"columnDefinitions":[{"accessor":"year","label":"Year","cellAccessors":["quarter","month"]},{"accessor":"newEnrollments","label":"New Enrollments"},{"accessor":"attendanceRate","label":"Attendance Rate"}],"tableData":[{"year":"2021","quarter":null,"month":null,"newEnrollments":"20","attendanceRate":"51%","children":[{"year":"2021","quarter":"Q1","month":null,"newEnrollments":"2","attendanceRate":"32%","children":[{"year":"2021","quarter":"Q1","month":"January","newEnrollments":"16","attendanceRate":"11%"}]}]},{"year":"2022","quarter":null,"month":null,"newEnrollments":"35","attendanceRate":"64%"}]},"dataPreset":"default"},{"name":"With Sorting","props":{"columnDefinitions":[{"accessor":"year","label":"Year","cellAccessors":["quarter","month"]},{"accessor":"newEnrollments","label":"New Enrollments"},{"accessor":"attendanceRate","label":"Attendance Rate"}],"tableData":[{"year":"2021","quarter":null,"month":null,"newEnrollments":"20","attendanceRate":"51%","children":[{"year":"2021","quarter":"Q1","month":null,"newEnrollments":"2","attendanceRate":"32%","children":[{"year":"2021","quarter":"Q1","month":"January","newEnrollments":"16","attendanceRate":"11%"}]}]},{"year":"2022","quarter":null,"month":null,"newEnrollments":"35","attendanceRate":"64%"}],"enableSorting":true},"dataPreset":"default"},{"name":"Selectable Rows","props":{"columnDefinitions":[{"accessor":"year","label":"Year","cellAccessors":["quarter","month"]},{"accessor":"newEnrollments","label":"New Enrollments"},{"accessor":"attendanceRate","label":"Attendance Rate"}],"tableData":[{"year":"2021","quarter":null,"month":null,"newEnrollments":"20","attendanceRate":"51%","children":[{"year":"2021","quarter":"Q1","month":null,"newEnrollments":"2","attendanceRate":"32%","children":[{"year":"2021","quarter":"Q1","month":"January","newEnrollments":"16","attendanceRate":"11%"}]}]},{"year":"2022","quarter":null,"month":null,"newEnrollments":"35","attendanceRate":"64%"}],"selectableRows":true,"showActionsBar":true}},{"name":"Subrow Headers","structureMode":"explicit","props":{"columnDefinitions":[{"accessor":"year","label":"Year","cellAccessors":["quarter","month"]},{"accessor":"newEnrollments","label":"New Enrollments"},{"accessor":"attendanceRate","label":"Attendance Rate"}],"tableData":[{"year":"2021","quarter":null,"month":null,"newEnrollments":"20","attendanceRate":"51%","children":[{"year":"2021","quarter":"Q1","month":null,"newEnrollments":"2","attendanceRate":"32%","children":[{"year":"2021","quarter":"Q1","month":"January","newEnrollments":"16","attendanceRate":"11%"}]}]},{"year":"2022","quarter":null,"month":null,"newEnrollments":"35","attendanceRate":"64%"}],"subRowHeaders":["Quarter","Month","Day"]},"dataPreset":"default"},{"name":"Loading State","props":{"columnDefinitions":[{"accessor":"year","label":"Year","cellAccessors":["quarter","month"]},{"accessor":"newEnrollments","label":"New Enrollments"},{"accessor":"attendanceRate","label":"Attendance Rate"}],"tableData":[{"year":"2021","quarter":null,"month":null,"newEnrollments":"20","attendanceRate":"51%","children":[{"year":"2021","quarter":"Q1","month":null,"newEnrollments":"2","attendanceRate":"32%","children":[{"year":"2021","quarter":"Q1","month":"January","newEnrollments":"16","attendanceRate":"11%"}]}]},{"year":"2022","quarter":null,"month":null,"newEnrollments":"35","attendanceRate":"64%"}],"loading":true,"initialLoadingRowsCount":5},"dataPreset":"default"},{"name":"Sorting by Column","structureMode":"explicit","props":{"columnDefinitions":[{"accessor":"year","label":"Year","cellAccessors":["quarter","month"]},{"accessor":"newEnrollments","label":"New Enrollments","enableSort":true},{"accessor":"attendanceRate","label":"Attendance Rate","enableSort":true}],"tableData":[{"year":"2021","quarter":null,"month":null,"newEnrollments":"20","attendanceRate":"51%","children":[{"year":"2021","quarter":"Q1","month":null,"newEnrollments":"2","attendanceRate":"32%","children":[{"year":"2021","quarter":"Q1","month":"January","newEnrollments":"16","attendanceRate":"11%"}]}]},{"year":"2022","quarter":null,"month":null,"newEnrollments":"35","attendanceRate":"64%"}],"enableSorting":true},"dataPreset":"column_sort"},{"name":"Column Styling","structureMode":"explicit","props":{"columnDefinitions":[{"accessor":"year","label":"Year","cellAccessors":["quarter","month"]},{"accessor":"newEnrollments","label":"New Enrollments"},{"accessor":"attendanceRate","label":"Attendance Rate"}],"tableData":[{"year":"2021","quarter":null,"month":null,"newEnrollments":"20","attendanceRate":"51%","children":[{"year":"2021","quarter":"Q1","month":null,"newEnrollments":"2","attendanceRate":"32%","children":[{"year":"2021","quarter":"Q1","month":"January","newEnrollments":"16","attendanceRate":"11%"}]}]},{"year":"2022","quarter":null,"month":null,"newEnrollments":"35","attendanceRate":"64%"}]},"dataPreset":"column_styling"}],"hints":{"advanced_table_import":{"when":{},"message":"AdvancedTable is imported from playbook-ui/advanced-table so apps can keep TanStack out of the main playbook-ui bundle until this kit is used.","type":"info"},"sorting_info":{"when":{"enableSortingRemoval":true},"message":"Click column headers to sort. Click again to remove sorting.","type":"info"},"header_sorting_info":{"when":{"enableSorting":true},"message":"Header sorting UI is only applied in \"Subcomponent Structure\" mode (explicit Header and Body). For sorting by column, pass columnDefinitions with enableSort: true to the columnDefinitions array. Click 'sorting by column' to see an example.","type":"info"},"selectable_info":{"when":{"selectableRows":true},"message":"Use onRowSelectionChange to handle selection changes. showActionsBar controls the action bar visibility.","type":"info"},"loading_info":{"when":{"loading":true},"message":"Use state to control the loading state.","type":"info"},"column_sort_info":{"when":{"columnDefinitions":{"enableSort":true}},"message":"For sorting by column, pass columnDefinitions with enableSort: true to the columnDefinitions array. Click 'sorting by column' to see an example.","type":"info"},"custom_sort_info":{"when":{"customSort":true},"message":"Use customSort to implement custom sorting logic. The customSort prop must be used in conjunction with the subRowHeaders prop. The customSort DOES NOT handle the sort logic, this must be handled on the frontend using the callback provided.","type":"info"},"cascade_collapse_info":{"when":{"cascadeCollapse":true},"message":"When cascadeCollapse is true, collapsing any parent row itself or by using the toggle expansion buttons in any header or subheader row also collapses all descendants and clears their expansion state. Re-expanding then shows only direct children until the user expands deeper levels again.","type":"info"},"group_separators_info":{"when":{"groupSeparators":true},"message":"groupSeparators adds a 2px higher-contrast bottom border on the last visible row of each nested child group. Expand multi-level rows to see separators between sibling groups.","type":"info"},"column_styling_info":{"presetName":"Column Styling","message":"This sample uses columnStyling on column definitions. Year uses width for a fixed hierarchy column; other columns show background colors. See the Column Styling Width doc for minWidth and min/pref/max bands.","type":"info"}},"conditionals":{"initialLoadingRowsCount":{"requires":{"loading":true}},"onRowSelectionChange":{"requires":{"selectableRows":true}},"showActionsBar":{"requires":{"selectableRows":true}},"actions":{"requires":{"selectableRows":true,"showActionsBar":true}},"enableSorting":{"structureMode":"explicit"},"sortIcon":{"structureMode":"explicit","requires":{"enableSorting":true}},"collapsibleTrail":{"structureMode":"explicit"},"subRowHeaders":{"structureMode":"explicit"},"onExpandByDepthClick":{"requires":"expandByDepth"},"onCustomSortClick":{"requires":{"customSort":true}},"enableSortingRemoval":{"requires":{"enableSorting":true}},"sortControl":{"requires":{"enableSorting":true}},"customSort":{"requires":{"enableSorting":true}},"sortParentOnly":{"requires":{"enableSorting":true}}},"structureModes":{"default":"implicit","modes":{"implicit":{"label":"Default","template":"<AdvancedTable\n  columnDefinitions={columnDefinitions}\n  tableData={tableData}\n{{props}}\n/>","propTargets":{"collapsibleTrail":"props","subRowHeaders":"props"}},"explicit":{"label":"Subcomponent Structure","template":"<AdvancedTable\n  columnDefinitions={columnDefinitions}\n  tableData={tableData}{{props}}\n>\n  <AdvancedTable.Header{{AdvancedTable.Header.props}} />\n  <AdvancedTable.Body\n{{AdvancedTable.Body.props}}\n  />\n</AdvancedTable>"}}},"template":"<AdvancedTable\n  columnDefinitions={columnDefinitions}\n  tableData={tableData}\n{{props}}\n/>","children":{"editable":false,"default":""},"propTargets":{"enableSorting":"AdvancedTable.Header.props","sortIcon":"AdvancedTable.Header.props","collapsibleTrail":"AdvancedTable.Body.props","subRowHeaders":"AdvancedTable.Body.props"},"externalImports":["import { AdvancedTable } from 'playbook-ui/advanced-table'"],"samples":{"description":"Tiny synthetic AdvancedTable datasets for AI codegen. Prefer these shapes over inventing column/row structures. Nested rows use a children array; cellAccessors list sub-row label fields for the first column.","columnDefinitions":[{"accessor":"year","label":"Year","cellAccessors":["quarter","month"]},{"accessor":"newEnrollments","label":"New Enrollments"},{"accessor":"attendanceRate","label":"Attendance Rate"}],"columnDefinitionsSortable":[{"accessor":"year","label":"Year","cellAccessors":["quarter","month"]},{"accessor":"newEnrollments","label":"New Enrollments","enableSort":true},{"accessor":"attendanceRate","label":"Attendance Rate","enableSort":true}],"tableDataNested":[{"year":"2021","quarter":null,"month":null,"newEnrollments":"20","attendanceRate":"51%","children":[{"year":"2021","quarter":"Q1","month":null,"newEnrollments":"2","attendanceRate":"32%","children":[{"year":"2021","quarter":"Q1","month":"January","newEnrollments":"16","attendanceRate":"11%"}]}]},{"year":"2022","quarter":null,"month":null,"newEnrollments":"35","attendanceRate":"64%"}],"tableDataFlat":[{"year":"2021","newEnrollments":"20","attendanceRate":"51%"},{"year":"2022","newEnrollments":"35","attendanceRate":"64%"}]},"requiredProps":{"columnDefinitions":[{"accessor":"year","label":"Year","cellAccessors":["quarter","month"]},{"accessor":"newEnrollments","label":"New Enrollments"},{"accessor":"attendanceRate","label":"Attendance Rate"}],"tableData":[{"year":"2021","quarter":null,"month":null,"newEnrollments":"20","attendanceRate":"51%","children":[{"year":"2021","quarter":"Q1","month":null,"newEnrollments":"2","attendanceRate":"32%","children":[{"year":"2021","quarter":"Q1","month":"January","newEnrollments":"16","attendanceRate":"11%"}]}]},{"year":"2022","quarter":null,"month":null,"newEnrollments":"35","attendanceRate":"64%"}]},"dataPresets":{"note":"Full website mock datasets are not shipped. Each key maps to the tiny samples below (or samples.*).","keys":["default","flat_no_subrows","with_ids","inline_loading","grouped_headers","grouped_headers_double_nested","with_ids_standard","column_sort","column_styling"],"presets":{"default":{"label":"Default","columnDefinitions":[{"accessor":"year","label":"Year","cellAccessors":["quarter","month"]},{"accessor":"newEnrollments","label":"New Enrollments"},{"accessor":"attendanceRate","label":"Attendance Rate"}],"tableData":[{"year":"2021","quarter":null,"month":null,"newEnrollments":"20","attendanceRate":"51%","children":[{"year":"2021","quarter":"Q1","month":null,"newEnrollments":"2","attendanceRate":"32%","children":[{"year":"2021","quarter":"Q1","month":"January","newEnrollments":"16","attendanceRate":"11%"}]}]},{"year":"2022","quarter":null,"month":null,"newEnrollments":"35","attendanceRate":"64%"}]},"flat_no_subrows":{"label":"Flat rows (no sub-rows)","columnDefinitions":[{"accessor":"year","label":"Year","cellAccessors":["quarter","month"]},{"accessor":"newEnrollments","label":"New Enrollments"},{"accessor":"attendanceRate","label":"Attendance Rate"}],"tableData":[{"year":"2021","newEnrollments":"20","attendanceRate":"51%"},{"year":"2022","newEnrollments":"35","attendanceRate":"64%"}]},"with_ids":{"label":"Data with row IDs","columnDefinitions":[{"accessor":"year","label":"Year","cellAccessors":["quarter","month"]},{"accessor":"newEnrollments","label":"New Enrollments"},{"accessor":"attendanceRate","label":"Attendance Rate"}],"tableData":[{"year":"2021","quarter":null,"month":null,"newEnrollments":"20","attendanceRate":"51%","children":[{"year":"2021","quarter":"Q1","month":null,"newEnrollments":"2","attendanceRate":"32%","children":[{"year":"2021","quarter":"Q1","month":"January","newEnrollments":"16","attendanceRate":"11%"}]}]},{"year":"2022","quarter":null,"month":null,"newEnrollments":"35","attendanceRate":"64%"}]},"inline_loading":{"label":"Inline row loading","columnDefinitions":[{"accessor":"year","label":"Year","cellAccessors":["quarter","month"]},{"accessor":"newEnrollments","label":"New Enrollments"},{"accessor":"attendanceRate","label":"Attendance Rate"}],"tableData":[{"year":"2021","quarter":null,"month":null,"newEnrollments":"20","attendanceRate":"51%","children":[{"year":"2021","quarter":"Q1","month":null,"newEnrollments":"2","attendanceRate":"32%","children":[{"year":"2021","quarter":"Q1","month":"January","newEnrollments":"16","attendanceRate":"11%"}]}]},{"year":"2022","quarter":null,"month":null,"newEnrollments":"35","attendanceRate":"64%"}]},"grouped_headers":{"label":"Grouped headers (nested columns)","columnDefinitions":[{"accessor":"year","label":"Year","cellAccessors":["quarter","month"]},{"accessor":"newEnrollments","label":"New Enrollments"},{"accessor":"attendanceRate","label":"Attendance Rate"}],"tableData":[{"year":"2021","quarter":null,"month":null,"newEnrollments":"20","attendanceRate":"51%","children":[{"year":"2021","quarter":"Q1","month":null,"newEnrollments":"2","attendanceRate":"32%","children":[{"year":"2021","quarter":"Q1","month":"January","newEnrollments":"16","attendanceRate":"11%"}]}]},{"year":"2022","quarter":null,"month":null,"newEnrollments":"35","attendanceRate":"64%"}]},"grouped_headers_double_nested":{"label":"Grouped headers (double nested columns)","columnDefinitions":[{"accessor":"year","label":"Year","cellAccessors":["quarter","month"]},{"accessor":"newEnrollments","label":"New Enrollments"},{"accessor":"attendanceRate","label":"Attendance Rate"}],"tableData":[{"year":"2021","quarter":null,"month":null,"newEnrollments":"20","attendanceRate":"51%","children":[{"year":"2021","quarter":"Q1","month":null,"newEnrollments":"2","attendanceRate":"32%","children":[{"year":"2021","quarter":"Q1","month":"January","newEnrollments":"16","attendanceRate":"11%"}]}]},{"year":"2022","quarter":null,"month":null,"newEnrollments":"35","attendanceRate":"64%"}]},"with_ids_standard":{"label":"Column definitions with IDs","columnDefinitions":[{"accessor":"year","label":"Year","cellAccessors":["quarter","month"]},{"accessor":"newEnrollments","label":"New Enrollments"},{"accessor":"attendanceRate","label":"Attendance Rate"}],"tableData":[{"year":"2021","quarter":null,"month":null,"newEnrollments":"20","attendanceRate":"51%","children":[{"year":"2021","quarter":"Q1","month":null,"newEnrollments":"2","attendanceRate":"32%","children":[{"year":"2021","quarter":"Q1","month":"January","newEnrollments":"16","attendanceRate":"11%"}]}]},{"year":"2022","quarter":null,"month":null,"newEnrollments":"35","attendanceRate":"64%"}]},"column_sort":{"label":"Column Definitions with Sorting","columnDefinitions":[{"accessor":"year","label":"Year","cellAccessors":["quarter","month"]},{"accessor":"newEnrollments","label":"New Enrollments","enableSort":true},{"accessor":"attendanceRate","label":"Attendance Rate","enableSort":true}],"tableData":[{"year":"2021","quarter":null,"month":null,"newEnrollments":"20","attendanceRate":"51%","children":[{"year":"2021","quarter":"Q1","month":null,"newEnrollments":"2","attendanceRate":"32%","children":[{"year":"2021","quarter":"Q1","month":"January","newEnrollments":"16","attendanceRate":"11%"}]}]},{"year":"2022","quarter":null,"month":null,"newEnrollments":"35","attendanceRate":"64%"}]},"column_styling":{"label":"Column Styling","columnDefinitions":[{"accessor":"year","label":"Year","cellAccessors":["quarter","month"]},{"accessor":"newEnrollments","label":"New Enrollments"},{"accessor":"attendanceRate","label":"Attendance Rate"}],"tableData":[{"year":"2021","quarter":null,"month":null,"newEnrollments":"20","attendanceRate":"51%","children":[{"year":"2021","quarter":"Q1","month":null,"newEnrollments":"2","attendanceRate":"32%","children":[{"year":"2021","quarter":"Q1","month":"January","newEnrollments":"16","attendanceRate":"11%"}]}]},{"year":"2022","quarter":null,"month":null,"newEnrollments":"35","attendanceRate":"64%"}]}}}}

data/dist/ai/playgrounds/dropdown.json

@@ -1 +1 @@
-{"presets":[{"name":"Async search","structureMode":"async","props":{}},{"name":"Rich results and selection","structureMode":"rich","props":{}},{"name":"Controlled selection","structureMode":"controlled","props":{}},{"name":"External search","structureMode":"external","props":{}},{"name":"Default trigger","props":{"variant":"default","placeholder":"Select a country"}},{"name":"With label","props":{"label":"Select a Country","placeholder":"Choose a country"}},{"name":"Disabled options","props":{"label":"Select a Country","placeholder":"Choose a country"}},{"name":"Subtle Variant","props":{"variant":"subtle","separators":false}},{"name":"Quick pick","props":{"variant":"quickpick","label":"Date Range","placeholder":"Select a Date Range"}},{"name":"Quick pick custom","props":{"variant":"quickpick","label":"Date Range","customQuickPickDates":{"dates":[{"label":"Last 15 months","value":{"timePeriod":"months","amount":15}},{"label":"First Week of June 2022","value":["06/01/2022","06/07/2022"]}]}}},{"name":"Quick pick append defaults","props":{"variant":"quickpick","label":"Date Range","customQuickPickDates":{"dates":[{"label":"Last 15 months","value":{"timePeriod":"months","amount":15}},{"label":"First Week of June 2022","value":["06/01/2022","06/07/2022"]}],"override":false}}},{"name":"Multi-select","props":{"variant":"default","multiSelect":true,"placeholder":"Select countries"}},{"name":"Multi-select with pills","props":{"variant":"default","multiSelect":true,"placeholder":"Select countries","formPillProps":{"size":"small","color":"neutral"},"defaultValue":[{"label":"United States","value":"unitedStates"},{"label":"Italy","value":"italy"}]}},{"name":"With error","props":{"variant":"default","label":"Required field","placeholder":"Required field","error":"Please make a selection."}},{"name":"Search (autocomplete)","props":{"variant":"default","autocomplete":true,"placeholder":"Search..."}},{"name":"Constrained height","props":{"label":"Choose an Option","constrainHeight":true}}],"hints":{"async_search_info":{"when":{"async":true},"message":"Async examples search the public DummyJSON sample-user API. Try Emily or Michael, or an unmatched term for the empty state. defaultOptions preloads results; cacheOptions reuses successful searches. Use the Async search structure with autocomplete off and searchbar on to search inside the menu.","type":"info"},"external_search_info":{"presetName":"External search","message":"The wrapper owns a 250ms debounce, a three-character minimum, request cancellation, options, and loading. onInputChange reports input/clear; onSelect receives the complete option. Inspect the generated code for the integration.","type":"info"},"rich_results_info":{"presetName":"Rich results and selection","message":"renderOption customizes results; the existing Trigger customDisplay renders selected company details. The selected option shown below retains custom company data.","type":"info"},"quickpick_scope":{"when":{"variant":"quickpick"},"message":"Quick pick uses preset date-range options. Use customQuickPickDates to replace or extend them, and pair controlsStartId / controlsEndId with DatePicker when you need synced date inputs.","type":"info"},"multi_options":{"when":{"multiSelect":true},"message":"Multi-select returns arrays of selected options. Use formPillProps to adjust the selected-pill appearance and clearable to let users reset the selection.","type":"info"},"autocomplete_info":{"when":{"autocomplete":true,"async":false},"message":"Autocomplete filters the provided options list in place. It works especially well with longer option sets.","type":"info"},"quickpick_custom_info":{"presetName":"Quick pick custom","message":"When override is omitted or true, customQuickPickDates replaces the default quick-pick menu.","type":"info"},"quickpick_append_info":{"presetName":"Quick pick append defaults","message":"Set customQuickPickDates.override to false to append your custom ranges to the built-in quick-pick options.","type":"info"},"constrained_height_info":{"presetName":"Constrained height","message":"constrainHeight restricts the height of the dropdown menu and enables vertical scrolling when the content exceeds this height. This prevents long dropdown lists from rendering off-screen.","type":"info"},"disabled_options_info":{"presetName":"Disabled options","message":"Set disabled: true on individual option objects to keep them visible while preventing selection.","type":"info"},"subcomponent_structure_info":{"message":"Switch Structure to “With Subcomponents” to see the explicit Dropdown.Trigger, Dropdown.Container, and Dropdown.Option composition API.","type":"info"}},"conditionals":{"loadOptions":{"requires":"async"},"defaultOptions":{"requires":"async"},"cacheOptions":{"requires":"async"},"loading":{"requires":"async"},"searchbar":{"structureMode":"async"},"requiredIndicator":{"requires":"label"},"formPillProps":{"requires":"multiSelect"},"rangeEndsToday":{"requires":{"variant":"quickpick"}},"controlsStartId":{"requires":{"variant":"quickpick"}},"controlsEndId":{"requires":{"variant":"quickpick"}},"customQuickPickDates":{"requires":{"variant":"quickpick"}}},"structureModes":{"default":"simple","modes":{"simple":{"label":"Simple","template":"<Dropdown options={options}{{props}} />","children":""},"async":{"label":"Async search","template":"<Dropdown options={options}{{props}}>\n  <Dropdown.Trigger />\n  <Dropdown.Container{{Container.props}} />\n</Dropdown>","children":"","props":{"async":true,"autocomplete":true,"options":[],"label":"User","placeholder":"Try Emily or Michael","loadOptions":"loadUsers","defaultOptions":true,"cacheOptions":true},"wrapper":"const loadUsers = (term) => fetch(`https://dummyjson.com/users/search?${new URLSearchParams({ q: term, limit: '10', select: 'firstName,lastName,company' })}`, { credentials: 'omit' })\n  .then((response) => {\n    if (!response.ok) throw new Error('Search failed')\n    return response.json()\n  })\n  .then(({ users }) => users.map((user) => ({\n    ...user,\n    label: `${user.firstName} ${user.lastName}`,\n    value: user.id,\n  })));\n\n{{component}}"},"rich":{"label":"Rich async results","template":"<Dropdown options={options}{{props}}>\n  <Dropdown.Trigger customDisplay={selected && <Detail text={companyDetail(selected)} />} />\n  <Dropdown.Container{{Container.props}} />\n</Dropdown>","children":"","props":{"async":true,"autocomplete":true,"options":[],"label":"User","placeholder":"Try Emily or Michael","loadOptions":"loadUsers","renderOption":"renderUser","onSelect":"setSelected","value":{"__playgroundCode":"selected"}},"externalImports":["import React, { useState } from 'react'"],"wrapper":"const loadUsers = (term) => fetch(`https://dummyjson.com/users/search?${new URLSearchParams({ q: term, limit: '10', select: 'firstName,lastName,company' })}`, { credentials: 'omit' })\n  .then((response) => {\n    if (!response.ok) throw new Error('Search failed')\n    return response.json()\n  })\n  .then(({ users }) => users.map((user) => ({\n    ...user,\n    label: `${user.firstName} ${user.lastName}`,\n    value: user.id,\n  })))\n\nconst companyDetail = (user) => [user.company?.title, user.company?.department].filter(Boolean).join(' · ')\n\nconst renderUser = (user) => (\n  <div>\n    <Body text={user.label} />\n    <Detail text={companyDetail(user)} />\n  </div>\n)\n\nconst RichDropdownPlayground = () => {\n  const [selected, setSelected] = useState(null)\n  return (\n    <>\n      {{component}}\n      <Detail text={selected ? JSON.stringify(selected) : \"Select a user to inspect the complete option object.\"} />\n    </>\n  )\n};\n\n<RichDropdownPlayground />"},"controlled":{"label":"Controlled selection","template":"<Dropdown options={options}{{props}} />","children":"","props":{"multiSelect":true,"label":"Countries","value":{"__playgroundCode":"selected"},"onSelect":"setSelected"},"externalImports":["import React, { useState } from 'react'"],"wrapper":"const ControlledDropdownPlayground = () => {\n  const [selected, setSelected] = useState([])\n  return (\n    <>\n      {{component}}\n      <Flex gap=\"xs\" marginTop=\"sm\">\n        <Button text=\"Select all enabled\" onClick={() => setSelected(options.filter((option) => !option.disabled))} />\n        <Button text=\"Clear\" variant=\"secondary\" onClick={() => setSelected([])} />\n      </Flex>\n    </>\n  )\n};\n\n<ControlledDropdownPlayground />"},"external":{"label":"External async search","template":"<Dropdown options={options}{{props}}>\n  <Dropdown.Trigger />\n  <Dropdown.Container{{Container.props}} />\n</Dropdown>","children":"","props":{"async":true,"autocomplete":true,"options":[],"label":"User","placeholder":"Type at least 3 characters","loading":{"__playgroundCode":"loading"},"value":{"__playgroundCode":"selected"},"onInputChange":"(text, { reason }) => setQuery(reason === 'input' ? text : '')","onSelect":"(option) => { setSelected(option); setQuery('') }"},"externalImports":["import React, { useEffect, useState } from 'react'"],"wrapper":"const ExternalDropdownPlayground = () => {\n  const [query, setQuery] = useState('')\n  const [options, setOptions] = useState([])\n  const [loading, setLoading] = useState(false)\n  const [selected, setSelected] = useState(null)\n\n  useEffect(() => {\n    const controller = new AbortController()\n    setOptions([])\n    setLoading(false)\n    if (query.length < 3) return () => controller.abort()\n    setLoading(true)\n    const timer = setTimeout(() => {\n      const params = new URLSearchParams({ q: query, limit: '10', select: 'firstName,lastName' })\n      fetch(`https://dummyjson.com/users/search?${params}`, { signal: controller.signal, credentials: 'omit' })\n        .then((response) => {\n          if (!response.ok) throw new Error('Search failed')\n          return response.json()\n        })\n        .then(({ users }) => {\n          if (!controller.signal.aborted) setOptions(users.map((user) => ({\n            ...user,\n            label: `${user.firstName} ${user.lastName}`,\n            value: user.id,\n          })))\n        })\n        .catch(() => { if (!controller.signal.aborted) setOptions([]) })\n        .finally(() => { if (!controller.signal.aborted) setLoading(false) })\n    }, 250)\n    return () => { clearTimeout(timer); controller.abort() }\n  }, [query])\n\n  return ({{component}})\n};\n\n<ExternalDropdownPlayground />"},"subcomponents":{"label":"With Subcomponents","template":"<Dropdown options={options}{{props}}>\n  <Dropdown.Trigger />\n  <Dropdown.Container{{Container.props}}>\n    {options.map((option) => (\n      <Dropdown.Option key={option.id} option={option} />\n    ))}\n  </Dropdown.Container>\n</Dropdown>","children":""}}},"template":"<Dropdown{{props}} />","customProps":{"loadOptions":{"type":"function","platforms":["react"],"description":"Promise or callback loader. Receives the search term; return options with id, label, and value plus any custom data."},"searchbar":{"type":"boolean","default":false,"platforms":["react"],"description":"Show a search input inside Dropdown.Container. Turn autocomplete off to try this mode."},"options":{"type":"array","platforms":["react","rails"],"description":"Dropdown option data with label, value, id, and optional disabled state."}},"propTargets":{"searchbar":"Container.props","options":"Options.data"}}
+{"presets":[{"name":"Create tags","props":{"allowOptionCreation":true,"multiSelect":true,"name":"tags[]","label":"Tags"}},{"name":"Async search","structureMode":"async","props":{}},{"name":"Rich results and selection","structureMode":"rich","props":{}},{"name":"Controlled selection","structureMode":"controlled","props":{}},{"name":"External search","structureMode":"external","props":{}},{"name":"Default trigger","props":{"variant":"default","placeholder":"Select a country"}},{"name":"With label","props":{"label":"Select a Country","placeholder":"Choose a country"}},{"name":"Disabled options","props":{"label":"Select a Country","placeholder":"Choose a country"}},{"name":"Subtle Variant","props":{"variant":"subtle","separators":false}},{"name":"Quick pick","props":{"variant":"quickpick","label":"Date Range","placeholder":"Select a Date Range"}},{"name":"Quick pick custom","props":{"variant":"quickpick","label":"Date Range","customQuickPickDates":{"dates":[{"label":"Last 15 months","value":{"timePeriod":"months","amount":15}},{"label":"First Week of June 2022","value":["06/01/2022","06/07/2022"]}]}}},{"name":"Quick pick append defaults","props":{"variant":"quickpick","label":"Date Range","customQuickPickDates":{"dates":[{"label":"Last 15 months","value":{"timePeriod":"months","amount":15}},{"label":"First Week of June 2022","value":["06/01/2022","06/07/2022"]}],"override":false}}},{"name":"Multi-select","props":{"variant":"default","multiSelect":true,"placeholder":"Select countries"}},{"name":"Multi-select with pills","props":{"variant":"default","multiSelect":true,"placeholder":"Select countries","formPillProps":{"size":"small","color":"neutral"},"defaultValue":[{"label":"United States","value":"unitedStates"},{"label":"Italy","value":"italy"}]}},{"name":"With error","props":{"variant":"default","label":"Required field","placeholder":"Required field","error":"Please make a selection."}},{"name":"Search (autocomplete)","props":{"variant":"default","autocomplete":true,"placeholder":"Search..."}},{"name":"Constrained height","props":{"label":"Choose an Option","constrainHeight":true}}],"hints":{"async_search_info":{"when":{"async":true},"message":"Async examples search the public DummyJSON sample-user API. Try Emily or Michael, or an unmatched term for the empty state. defaultOptions preloads results; cacheOptions reuses successful searches. Use the Async search structure with autocomplete off and searchbar on to search inside the menu.","type":"info"},"external_search_info":{"presetName":"External search","message":"The wrapper owns a 250ms debounce, a three-character minimum, request cancellation, options, and loading. onInputChange reports input/clear; onSelect receives the complete option. Inspect the generated code for the integration.","type":"info"},"rich_results_info":{"presetName":"Rich results and selection","message":"renderOption customizes results; the existing Trigger customDisplay renders selected company details. The selected option shown below retains custom company data.","type":"info"},"quickpick_scope":{"when":{"variant":"quickpick"},"message":"Quick pick uses preset date-range options. Use customQuickPickDates to replace or extend them, and pair controlsStartId / controlsEndId with DatePicker when you need synced date inputs.","type":"info"},"multi_options":{"when":{"multiSelect":true},"message":"Multi-select returns arrays of selected options. Use formPillProps to adjust the selected-pill appearance and clearable to let users reset the selection. Opt into enablePillReorder to drag pills into a new priority order.","type":"info"},"autocomplete_info":{"when":{"autocomplete":true,"async":false},"message":"Autocomplete filters the provided options list in place. It works especially well with longer option sets.","type":"info"},"quickpick_custom_info":{"presetName":"Quick pick custom","message":"When override is omitted or true, customQuickPickDates replaces the default quick-pick menu.","type":"info"},"quickpick_append_info":{"presetName":"Quick pick append defaults","message":"Set customQuickPickDates.override to false to append your custom ranges to the built-in quick-pick options.","type":"info"},"constrained_height_info":{"presetName":"Constrained height","message":"constrainHeight restricts the height of the dropdown menu and enables vertical scrolling when the content exceeds this height. This prevents long dropdown lists from rendering off-screen.","type":"info"},"disabled_options_info":{"presetName":"Disabled options","message":"Set disabled: true on individual option objects to keep them visible while preventing selection.","type":"info"},"subcomponent_structure_info":{"message":"Switch Structure to “With Subcomponents” to see the explicit Dropdown.Trigger, Dropdown.Container, and Dropdown.Option composition API.","type":"info"}},"conditionals":{"loadOptions":{"requires":"async"},"defaultOptions":{"requires":"async"},"cacheOptions":{"requires":"async"},"loading":{"requires":"async"},"searchbar":{"structureMode":"async"},"requiredIndicator":{"requires":"label"},"formPillProps":{"requires":"multiSelect"},"enablePillReorder":{"requires":"multiSelect"},"externalDragHandle":{"requires":"enablePillReorder"},"showPillIndex":{"requires":"multiSelect"},"rangeEndsToday":{"requires":{"variant":"quickpick"}},"controlsStartId":{"requires":{"variant":"quickpick"}},"controlsEndId":{"requires":{"variant":"quickpick"}},"customQuickPickDates":{"requires":{"variant":"quickpick"}}},"structureModes":{"default":"simple","modes":{"simple":{"label":"Simple","template":"<Dropdown options={options}{{props}} />","children":""},"async":{"label":"Async search","template":"<Dropdown options={options}{{props}}>\n  <Dropdown.Trigger />\n  <Dropdown.Container{{Container.props}} />\n</Dropdown>","children":"","props":{"async":true,"autocomplete":true,"options":[],"label":"User","placeholder":"Try Emily or Michael","loadOptions":"loadUsers","defaultOptions":true,"cacheOptions":true},"wrapper":"const loadUsers = (term) => fetch(`https://dummyjson.com/users/search?${new URLSearchParams({ q: term, limit: '10', select: 'firstName,lastName,company' })}`, { credentials: 'omit' })\n  .then((response) => {\n    if (!response.ok) throw new Error('Search failed')\n    return response.json()\n  })\n  .then(({ users }) => users.map((user) => ({\n    ...user,\n    label: `${user.firstName} ${user.lastName}`,\n    value: user.id,\n  })));\n\n{{component}}"},"rich":{"label":"Rich async results","template":"<Dropdown options={options}{{props}}>\n  <Dropdown.Trigger customDisplay={selected && <Detail text={companyDetail(selected)} />} />\n  <Dropdown.Container{{Container.props}} />\n</Dropdown>","children":"","props":{"async":true,"autocomplete":true,"options":[],"label":"User","placeholder":"Try Emily or Michael","loadOptions":"loadUsers","renderOption":"renderUser","onSelect":"setSelected","value":{"__playgroundCode":"selected"}},"externalImports":["import React, { useState } from 'react'"],"wrapper":"const loadUsers = (term) => fetch(`https://dummyjson.com/users/search?${new URLSearchParams({ q: term, limit: '10', select: 'firstName,lastName,company' })}`, { credentials: 'omit' })\n  .then((response) => {\n    if (!response.ok) throw new Error('Search failed')\n    return response.json()\n  })\n  .then(({ users }) => users.map((user) => ({\n    ...user,\n    label: `${user.firstName} ${user.lastName}`,\n    value: user.id,\n  })))\n\nconst companyDetail = (user) => [user.company?.title, user.company?.department].filter(Boolean).join(' · ')\n\nconst renderUser = (user) => (\n  <div>\n    <Body text={user.label} />\n    <Detail text={companyDetail(user)} />\n  </div>\n)\n\nconst RichDropdownPlayground = () => {\n  const [selected, setSelected] = useState(null)\n  return (\n    <>\n      {{component}}\n      <Detail text={selected ? JSON.stringify(selected) : \"Select a user to inspect the complete option object.\"} />\n    </>\n  )\n};\n\n<RichDropdownPlayground />"},"controlled":{"label":"Controlled selection","template":"<Dropdown options={options}{{props}} />","children":"","props":{"multiSelect":true,"label":"Countries","value":{"__playgroundCode":"selected"},"onSelect":"setSelected"},"externalImports":["import React, { useState } from 'react'"],"wrapper":"const ControlledDropdownPlayground = () => {\n  const [selected, setSelected] = useState([])\n  return (\n    <>\n      {{component}}\n      <Flex gap=\"xs\" marginTop=\"sm\">\n        <Button text=\"Select all enabled\" onClick={() => setSelected(options.filter((option) => !option.disabled))} />\n        <Button text=\"Clear\" variant=\"secondary\" onClick={() => setSelected([])} />\n      </Flex>\n    </>\n  )\n};\n\n<ControlledDropdownPlayground />"},"external":{"label":"External async search","template":"<Dropdown options={options}{{props}}>\n  <Dropdown.Trigger />\n  <Dropdown.Container{{Container.props}} />\n</Dropdown>","children":"","props":{"async":true,"autocomplete":true,"options":[],"label":"User","placeholder":"Type at least 3 characters","loading":{"__playgroundCode":"loading"},"value":{"__playgroundCode":"selected"},"onInputChange":"(text, { reason }) => setQuery(reason === 'input' ? text : '')","onSelect":"(option) => { setSelected(option); setQuery('') }"},"externalImports":["import React, { useEffect, useState } from 'react'"],"wrapper":"const ExternalDropdownPlayground = () => {\n  const [query, setQuery] = useState('')\n  const [options, setOptions] = useState([])\n  const [loading, setLoading] = useState(false)\n  const [selected, setSelected] = useState(null)\n\n  useEffect(() => {\n    const controller = new AbortController()\n    setOptions([])\n    setLoading(false)\n    if (query.length < 3) return () => controller.abort()\n    setLoading(true)\n    const timer = setTimeout(() => {\n      const params = new URLSearchParams({ q: query, limit: '10', select: 'firstName,lastName' })\n      fetch(`https://dummyjson.com/users/search?${params}`, { signal: controller.signal, credentials: 'omit' })\n        .then((response) => {\n          if (!response.ok) throw new Error('Search failed')\n          return response.json()\n        })\n        .then(({ users }) => {\n          if (!controller.signal.aborted) setOptions(users.map((user) => ({\n            ...user,\n            label: `${user.firstName} ${user.lastName}`,\n            value: user.id,\n          })))\n        })\n        .catch(() => { if (!controller.signal.aborted) setOptions([]) })\n        .finally(() => { if (!controller.signal.aborted) setLoading(false) })\n    }, 250)\n    return () => { clearTimeout(timer); controller.abort() }\n  }, [query])\n\n  return ({{component}})\n};\n\n<ExternalDropdownPlayground />"},"subcomponents":{"label":"With Subcomponents","template":"<Dropdown options={options}{{props}}>\n  <Dropdown.Trigger />\n  <Dropdown.Container{{Container.props}}>\n    {options.map((option) => (\n      <Dropdown.Option key={option.id} option={option} />\n    ))}\n  </Dropdown.Container>\n</Dropdown>","children":""}}},"template":"<Dropdown{{props}} />","customProps":{"loadOptions":{"type":"function","platforms":["react"],"description":"Promise or callback loader. Receives the search term; return options with id, label, and value plus any custom data."},"searchbar":{"type":"boolean","default":false,"platforms":["react"],"description":"Show a search input inside Dropdown.Container. Turn autocomplete off to try this mode."},"options":{"type":"array","platforms":["react","rails"],"description":"Dropdown option data with label, value, id, and optional disabled state."}},"propTargets":{"searchbar":"Container.props","options":"Options.data"}}