playbook_ui 18.2.0 → 18.3.0.pre.alpha.PLAY3342advancedtablereactmulticolumnselectablerow21082

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

@@ -24,7 +24,8 @@
       "type": "boolean",
       "platforms": [
         "react"
-      ]
+      ],
+      "default": false
     },
     "showDayOfWeek": {
       "type": "boolean",
@@ -56,11 +57,19 @@
         "react",
         "rails"
       ],
-      "values": [
-        "sm",
-        "md",
-        "lg"
-      ],
+      "values": {
+        "react": [
+          "sm",
+          "md",
+          "lg"
+        ],
+        "rails": [
+          "lg",
+          "md",
+          "sm",
+          "xs"
+        ]
+      },
       "default": "md"
     },
     "unstyled": {
@@ -90,6 +99,7 @@
     }
   },
   "globalProps": true,
+  "globalEventProps": true,
   "usage": {
     "react": {
       "import": "import { Date } from 'playbook-ui'",

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

@@ -51,7 +51,8 @@
       "platforms": [
         "react",
         "rails"
-      ]
+      ],
+      "default": null
     },
     "disableInput": {
       "type": "boolean",
@@ -66,14 +67,16 @@
       "platforms": [
         "react",
         "rails"
-      ]
+      ],
+      "default": null
     },
     "disableWeekdays": {
       "type": "array",
       "platforms": [
         "react",
         "rails"
-      ]
+      ],
+      "default": null
     },
     "enableTime": {
       "type": "boolean",
@@ -118,27 +121,31 @@
       "type": "boolean",
       "platforms": [
         "react"
-      ]
+      ],
+      "default": false
     },
     "inLine": {
       "type": "boolean",
       "platforms": [
         "react"
-      ]
+      ],
+      "default": false
     },
     "inputAria": {
       "type": "GenericObject",
       "platforms": [
         "react",
         "rails"
-      ]
+      ],
+      "default": {}
     },
     "inputData": {
       "type": "GenericObject",
       "platforms": [
         "react",
         "rails"
-      ]
+      ],
+      "default": {}
     },
     "inputOnChange": {
       "type": "function",
@@ -227,12 +234,23 @@
         "react",
         "rails"
       ],
-      "values": [
-        "month",
-        "week",
-        "quickpick"
-      ],
-      "default": "none"
+      "values": {
+        "react": [
+          "month",
+          "week",
+          "quickpick"
+        ],
+        "rails": [
+          "week",
+          "month",
+          "quickpick",
+          "none"
+        ]
+      },
+      "default": {
+        "react": "",
+        "rails": "none"
+      }
     },
     "showTimezone": {
       "type": "boolean",

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

@@ -40,7 +40,8 @@
       "platforms": [
         "react",
         "rails"
-      ]
+      ],
+      "default": false
     },
     "size": {
       "type": "enum",
@@ -71,6 +72,7 @@
     }
   },
   "globalProps": true,
+  "globalEventProps": true,
   "usage": {
     "react": {
       "import": "import { DateRangeInline } from 'playbook-ui'",

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

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

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

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

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

@@ -66,7 +66,8 @@
       "type": "string",
       "platforms": [
         "react"
-      ]
+      ],
+      "default": "America/New_York"
     },
     "date": {
       "platforms": [
@@ -90,6 +91,7 @@
     }
   },
   "globalProps": true,
+  "globalEventProps": true,
   "usage": {
     "react": {
       "import": "import { DateTime } from 'playbook-ui'",

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

@@ -32,7 +32,8 @@
       "type": "string",
       "platforms": [
         "react"
-      ]
+      ],
+      "default": "America/New_York"
     },
     "showCurrentYear": {
       "type": "boolean",
@@ -57,6 +58,7 @@
     }
   },
   "globalProps": true,
+  "globalEventProps": true,
   "usage": {
     "react": {
       "import": "import { DateTimeStacked } from 'playbook-ui'",

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

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

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

@@ -61,7 +61,8 @@
       "platforms": [
         "react",
         "rails"
-      ]
+      ],
+      "default": ""
     }
   },
   "globalProps": true,

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

@@ -42,7 +42,8 @@
       "platforms": [
         "react",
         "rails"
-      ]
+      ],
+      "default": false
     },
     "onCancel": {
       "type": "function",
@@ -123,14 +124,26 @@
         "react",
         "rails"
       ],
-      "values": [
-        "info",
-        "caution",
-        "delete",
-        "error",
-        "success"
-      ],
-      "default": ""
+      "values": {
+        "react": [
+          "info",
+          "caution",
+          "delete",
+          "error",
+          "success"
+        ],
+        "rails": [
+          "info",
+          "caution",
+          "delete",
+          "error",
+          "success",
+          "default"
+        ]
+      },
+      "default": {
+        "rails": ""
+      }
     },
     "text": {
       "type": "string",

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

@@ -12,7 +12,8 @@
       "platforms": [
         "react",
         "rails"
-      ]
+      ],
+      "default": []
     },
     "size": {
       "type": "enum",

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

@@ -7,6 +7,14 @@
     "rails"
   ],
   "props": {
+    "allowOptionCreation": {
+      "type": "boolean",
+      "platforms": [
+        "react",
+        "rails"
+      ],
+      "default": false
+    },
     "async": {
       "type": "boolean",
       "platforms": [
@@ -25,19 +33,22 @@
       "type": "boolean | GenericObject[]",
       "platforms": [
         "react"
-      ]
+      ],
+      "default": false
     },
     "cacheOptions": {
       "type": "boolean",
       "platforms": [
         "react"
-      ]
+      ],
+      "default": false
     },
     "loading": {
       "type": "boolean",
       "platforms": [
         "react"
-      ]
+      ],
+      "default": false
     },
     "onInputChange": {
       "type": "function",
@@ -131,14 +142,16 @@
       "type": "boolean",
       "platforms": [
         "react"
-      ]
+      ],
+      "default": false
     },
     "defaultValue": {
       "type": "GenericObject",
       "platforms": [
         "react",
         "rails"
-      ]
+      ],
+      "default": {}
     },
     "error": {
       "type": "string",
@@ -147,11 +160,35 @@
         "rails"
       ]
     },
+    "enableFormSupport": {
+      "type": "boolean",
+      "platforms": [
+        "react"
+      ],
+      "default": false
+    },
+    "enablePillReorder": {
+      "type": "boolean",
+      "platforms": [
+        "react",
+        "rails"
+      ],
+      "default": false
+    },
+    "externalDragHandle": {
+      "type": "boolean",
+      "platforms": [
+        "react",
+        "rails"
+      ],
+      "default": false
+    },
     "isClosed": {
       "type": "boolean",
       "platforms": [
         "react"
-      ]
+      ],
+      "default": true
     },
     "label": {
       "type": "string",
@@ -219,6 +256,14 @@
       ],
       "default": true
     },
+    "showPillIndex": {
+      "type": "boolean",
+      "platforms": [
+        "react",
+        "rails"
+      ],
+      "default": false
+    },
     "variant": {
       "type": "enum",
       "platforms": [
@@ -272,18 +317,23 @@
       "default": false
     },
     "required": {
+      "type": "boolean",
       "platforms": [
+        "react",
         "rails"
       ],
-      "type": "boolean",
       "default": false
     },
     "validationMessage": {
+      "type": "string",
       "platforms": [
+        "react",
         "rails"
       ],
-      "type": "string",
-      "default": ""
+      "default": {
+        "react": "Please fill out this field.",
+        "rails": ""
+      }
     },
     "searchTermMinimumLength": {
       "platforms": [
@@ -371,13 +421,13 @@
   "usage": {
     "react": {
       "import": "import { Dropdown } from 'playbook-ui'",
-      "example": "<Dropdown />",
-      "preset": "Async search"
+      "example": "<Dropdown allowOptionCreation multiSelect name=\"tags[]\" label=\"Tags\" />",
+      "preset": "Create tags"
     },
     "rails": {
       "import": null,
-      "example": "<%= pb_rails(\"dropdown\") %>",
-      "preset": "Async search"
+      "example": "<%= pb_rails(\"dropdown\", props: { allow_option_creation: true, multi_select: true, name: \"tags[]\", label: \"Tags\" }) %>",
+      "preset": "Create tags"
     }
   },
   "category": "form_selection",
@@ -420,7 +470,7 @@
             "submission": {
               "submits": true,
               "value": "Selected option id in a CSS-hidden input (not input type=hidden).",
-              "multi": "Comma-joining is only the default-value encoding (data-default-value and a temporary baseInput.value). After kit JS runs, syncHiddenInputs emits one input type=\"hidden\" per selected id, all named name[] (the CSS-hidden input already has [] appended), then clears that original CSS-hidden input. Rails receives separate array entries such as [\"ca\",\"us\"], not \"ca,us\".",
+              "multi": "syncHiddenInputs emits one hidden input per selected id in selection order, adds [] to the name only if absent and clears the original CSS-hidden input and removes its name while selections exist, so no blank array entry is submitted. When empty, the original name and required state are restored, including after Turbo reconnects. These submission fixes apply whether or not allow_option_creation is enabled. With enable_pill_reorder, drag or keyboard reordering updates that same selection order before syncHiddenInputs runs, so submitted values and pb:dropdown:reordered / pb:dropdown:selected details match the pill order. Comma-joining is used for default-value encoding, not as an additional submitted selection.",
               "dynamicOptions": "props.options_by_context with props.context_selector replaces the rendered options when the referenced element fires change, and props.clear_on_context_change (default true) then clears the selection, so a context change can submit an empty value. A pb:dropdown:updateOptions event, or an event named in props.options_event_type, replaces options the same way; clearSelection: false keeps only selections whose id exists in the replacement options."
             },
             "validation": {
@@ -554,6 +604,33 @@
         "form.rails.builder.simpleForm"
       ]
     },
+    {
+      "id": "dropdown.pill-reorder",
+      "platforms": [
+        "react",
+        "rails"
+      ],
+      "questions": [
+        "Can multi-select Dropdown pills be reordered?",
+        "How do I enable draggable pills on Dropdown?",
+        "Does pill reorder preserve form submission order?"
+      ],
+      "answer": "Opt in with enablePillReorder (Rails: enable_pill_reorder) on multi-select or multi-select + autocomplete. showPillIndex / show_pill_index numbers the pills. By default the whole pill is draggable with an in-pill grip; externalDragHandle / external_drag_handle requires an external grip. Focused pills reorder with ArrowLeft / ArrowRight. React onChange and Rails hidden inputs keep the new order; Rails also emits pb:dropdown:reordered (and pb:dropdown:selected) with the reordered array. Single-select is unaffected; reordering is off by default."
+    },
+    {
+      "id": "dropdown.option-creation",
+      "platforms": [
+        "react",
+        "rails"
+      ],
+      "questions": [
+        "How do I create new Dropdown options?"
+      ],
+      "answer": "Enable allowOptionCreation (Rails: allow_option_creation). The default trigger enables autocomplete. Custom Rails subcomponents must supply an autocomplete trigger or search bar. Creation supports single and multiple selections, including async, and is ignored for quickpick. A selectable Create row yields { id: text, label: text, value: text, __isNew__: true } through normal React selection callbacks, Rails pb:dropdown:selected events, and native form submission. Text is trimmed and blank or case-insensitive existing/selected labels, values and IDs are rejected. Exact ID or value matches keep the existing option selectable even if its label does not contain the query. Pending async searches and errors suppress creation. Creation only selects local text; the application owns persistence.",
+      "props": [
+        "allowOptionCreation"
+      ]
+    },
     {
       "id": "dropdown.builder-name",
       "platforms": [
@@ -563,7 +640,7 @@
         "Does dropdown_field scope country to user[country]?",
         "Does multi_select submit separate array values?"
       ],
-      "answer": "Pass the attribute (e.g. :country) so the builder can auto-bind default_value and errors from the model; pass user[country] explicitly when you need that nested parameter name instead. multi_select appends [] to the CSS-hidden input name. Comma-joining is only for default-value encoding. After kit JS runs, Playbook emits one type=\"hidden\" input per selected id (all named name[]), clears the original CSS-hidden input, and Rails receives separate array entries.",
+      "answer": "Pass the attribute (e.g. :country) so the builder can auto-bind default_value and errors from the model; pass user[country] explicitly when you need that nested parameter name instead. multi_select adds [] only if absent, preserves selection order and removes the original CSS-hidden input name while per-selection hidden inputs submit. When selection is empty, the original name and required state are restored, including after Turbo reconnects. These submission fixes apply whether or not allow_option_creation is enabled.",
       "contractPaths": [
         "form.rails.builder.methods"
       ],
@@ -665,7 +742,7 @@
         "How do I reset React Dropdown?",
         "Does cacheOptions remember an empty search?"
       ],
-      "answer": "Use onInputChange(text, { reason }) for input and clear notifications. Selection itself does not emit an input notification; use onSelect. In async mode, emptying single-select autocomplete proposes an empty selection even without onInputChange; emptying a multi-select or search-bar query preserves selection. With loadOptions, an empty query and a multi-select selection restore the defaultOptions results. A single-select autocomplete selection keeps that search result list and shows the selected label in the input; opening the menu again shows only results whose labels contain that text. Typing a character replaces the query only while the input still shows that label, including when a controlled value later arrives as null. Once the text has changed, further characters edit the query in place. Backspace and Delete remove one character and keep the selection until the query is empty. Escape, an outside click, or disabling the kit cancels an in-flight loadOptions request and ignores its late response. If that search had cleared the list, the last settled options return, or defaultOptions when nothing has settled yet. Opening the menu again searches for the query still in the input; ref.clearSelected() drops that retry. A search that already settled as an error or with no results keeps that message when the menu closes, and opening it again does not search again. Opening an async Dropdown with no source options, or a search that settles empty and has no earlier label matches, shows the empty message (noOptionsText, default \"No results found\"). When a search returns nothing, earlier results whose labels contain the query stay visible, including text typed after a space. cacheOptions stores the server response for that exact query, including an empty array. Each Dropdown keeps at most 100 queries. Errors are not cached. Repeating the query after a clear shows that cached response, so an empty search stays empty. Already-selected rows are hidden and do not count as an empty search, so a successful result list or an idle list that still contains options does not show that message when every remaining row is selected. blankSelection is not a search result: an empty async list shows the empty message instead of the blank row, and the blank row is included when results are present. Async options are identified by value, then id, then label. Reset controlled value through the application or form library, or call ref.clearSelected() for an uncontrolled selection. React Dropdown does not add native form-reset handling. For application-managed fetching, use async with options and loading without loadOptions; the application owns debounce, query thresholds, errors and stale-response protection. When the menu is open, a new result list focuses the first match so Enter selects it, for both loadOptions and application-managed options. ArrowDown and ArrowUp still move through that list.",
+      "answer": "Use onInputChange(text, { reason }) for input and clear notifications. Selection itself does not emit an input notification; use onSelect. In async mode, emptying single-select autocomplete proposes an empty selection even without onInputChange; emptying a multi-select or search-bar query preserves selection. With loadOptions, an empty query and a multi-select selection restore the defaultOptions results. A single-select autocomplete selection keeps that search result list and shows the selected label in the input; opening the menu again shows only results whose labels contain that text. Typing a character replaces the query only while the input still shows that label, including when a controlled value later arrives as null. Once the text has changed, further characters edit the query in place. Backspace and Delete remove one character and keep the selection until the query is empty. Escape, an outside click, or disabling the kit cancels an in-flight loadOptions request and ignores its late response. If that search had cleared the list, the last settled options return, or defaultOptions when nothing has settled yet. Opening the menu again searches for the query still in the input; ref.clearSelected() drops that retry. A search that already settled as an error or with no results keeps that message when the menu closes, and opening it again does not search again. Opening an async Dropdown with no source options, or a search that settles empty and has no earlier label matches, shows the empty message (noOptionsText, default \"No results found\"). When a search returns nothing, earlier results whose labels contain the query stay visible, including text typed after a space. cacheOptions stores the server response for that exact query, including an empty array. Each Dropdown keeps at most 100 queries. Errors are not cached. Repeating the query after a clear shows that cached response, so an empty search stays empty. Already-selected rows are hidden and do not count as an empty search, so a successful result list or an idle list that still contains options does not show that message when every remaining row is selected. blankSelection is not a search result: an empty async list shows the empty message instead of the blank row, and the blank row is included when results are present. Async options are identified by value, then id, then label. Reset controlled value through the application or form library, or call ref.clearSelected() for an uncontrolled selection. With enableFormSupport: true, native form reset restores defaultValue, clears the query and validation state, closes the menu, and reports the reset through selection callbacks. Controlled parents must accept the new value. Canceled resets preserve state. For application-managed fetching, use async with options and loading without loadOptions; the application owns debounce, query thresholds, errors and stale-response protection. When the menu is open, a new result list focuses the first match so Enter selects it, for both loadOptions and application-managed options. ArrowDown and ArrowUp still move through that list.",
       "props": [
         "onInputChange",
         "async",
@@ -688,12 +765,15 @@
         "Can I use Dropdown with react-hook-form?",
         "Does the React Dropdown submit a value?"
       ],
-      "answer": "Spread register(\"country\") onto Dropdown. It accepts name and onChange, and calls onChange with { target: { name, value } } in addition to any onSelect. value is the selected option object, an array for multiSelect and null or [] when cleared, so read value.value in form state. The ref from register resolves to the kit imperative handle, not an input, and no named input is rendered; the React kit has no native form submission.",
+      "answer": "Use a controlled form-library adapter with name, value, and onChange. It accepts name and onChange, and calls onChange with { target: { name, value } } in addition to any onSelect. value is the selected option object, an array for multiSelect and null or [] when cleared, so read value.value in form state. The ref resolves to the kit imperative handle, not an input. With enableFormSupport: true and name, native forms submit selected id (falling back to value) through hidden inputs; multiSelect emits one input per selection and adds [] only if absent. Disabled fields are omitted. enableFormSupport defaults to false, so name alone adds no native inputs or reset handling. With form support enabled, required validates the selection and validationMessage sets the inline required message. Native reset restores defaultValue through the normal callbacks; controlled parents must update value.",
       "props": [
         "name",
         "onChange",
         "onSelect",
-        "multiSelect"
+        "multiSelect",
+        "enableFormSupport",
+        "required",
+        "validationMessage"
       ]
     }
   ]

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

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

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

@@ -16,7 +16,10 @@
         "react",
         "rails"
       ],
-      "default": ""
+      "default": {
+        "react": {},
+        "rails": ""
+      }
     },
     "customMessage": {
       "type": "string",
@@ -30,13 +33,15 @@
       "type": "boolean",
       "platforms": [
         "react"
-      ]
+      ],
+      "default": false
     },
     "acceptedFilesDescription": {
       "type": "string",
       "platforms": [
         "react"
-      ]
+      ],
+      "default": ""
     },
     "maxSize": {
       "type": "number",

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

@@ -12,7 +12,8 @@
       "platforms": [
         "react",
         "rails"
-      ]
+      ],
+      "default": 0
     },
     "closeable": {
       "type": "boolean",
@@ -68,7 +69,8 @@
       "type": "boolean",
       "platforms": [
         "react"
-      ]
+      ],
+      "default": true
     },
     "status": {
       "type": "enum",
@@ -107,7 +109,8 @@
       "type": "number | string",
       "platforms": [
         "react"
-      ]
+      ],
+      "default": "max"
     }
   },
   "globalProps": true,

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

@@ -28,15 +28,27 @@
         "react",
         "rails"
       ],
-      "values": [
-        "start",
-        "center",
-        "end",
-        "around",
-        "between",
-        "evenly",
-        "none"
-      ],
+      "values": {
+        "react": [
+          "start",
+          "center",
+          "end",
+          "around",
+          "between",
+          "evenly",
+          "none"
+        ],
+        "rails": [
+          "start",
+          "center",
+          "end",
+          "stretch",
+          "around",
+          "between",
+          "evenly",
+          "none"
+        ]
+      },
       "default": "none"
     },
     "inline": {
@@ -118,21 +130,24 @@
       "platforms": [
         "react",
         "rails"
-      ]
+      ],
+      "default": "none"
     },
     "rowGap": {
       "type": "SizeType | SizeResponsiveType",
       "platforms": [
         "react",
         "rails"
-      ]
+      ],
+      "default": "none"
     },
     "columnGap": {
       "type": "SizeType | SizeResponsiveType",
       "platforms": [
         "react",
         "rails"
-      ]
+      ],
+      "default": "none"
     },
     "wrap": {
       "type": "boolean",