playbook_ui_docs 16.2.0.pre.alpha.PLAY2719atpinnedrowsrails14418 → 16.2.0.pre.alpha.PLAY2791closeonclick14636

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 41dcbb8c171b1b8083532c83aacae5f106dae3827f545ebc35c3f8d566037439
-  data.tar.gz: 208a1dcae2ef4c0f2ae5cc62c12d5591c075b4ab263e0ee2de8874a2879462bd
+  metadata.gz: f28014e56f7d88c4a128c187a99e3a8cb6998c2100c981a5be083099ef5c3a06
+  data.tar.gz: 235156c257aa4d3aead400013fe16d0ce63816c9b84d0f2dba4cce76ed4d11c1
 SHA512:
-  metadata.gz: 7d7cd020f1853dd2b9871a1aabf75033db91f1e2efa7fc4bcec2a473d3b0a13552282f8899f72ec03c4fe88e67adb93a57488e9e6dfa51f7002247af38d757ab
-  data.tar.gz: dcfbf162d9a4680423a51edaedc3381f5f9f699c424977449a7582306c6a9c0bbacc015a4773cb3dab757fbbefe69cddde24cc814460b3d63c54200c2688c229
+  metadata.gz: 3fffcdb55840825b309fdaec95e422fff66932112a3a370190e0fda4880a0a20608424eb3cffff8e77c38e13e79644e0fc4950b431b927d0093afba316fc67c7
+  data.tar.gz: 37c4450d7dee9857d5733729b698f6361047a75807da7ae6ec0a70e7e29acbe1c4268381eee1ba1d109d6c953e23434533ca96157d7fd3153dc404a2a8fb0bc1

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

@@ -7,7 +7,6 @@ examples:
   - advanced_table_table_props: Table Props
   - advanced_table_sticky_header_rails: Sticky Header
   - advanced_table_table_props_sticky_header: Sticky Header for Responsive Table
-  - advanced_table_pinned_rows_rails: Pinned Rows
   - advanced_table_beta_sort: Enable Sorting
   - advanced_table_responsive: Responsive Tables
   - advanced_table_custom_cell_rails: Custom Components for Cells

data/app/pb_kits/playbook/pb_caption/docs/_caption_colors.html.erb

@@ -1,4 +1,6 @@
-<%= pb_rails("caption", props: { text: "Test colors" }) %>
-<%= pb_rails("caption", props: { text: "Test colors", color: "success" }) %>
-<%= pb_rails("caption", props: { text: "Test colors", color: "error" }) %>
-<%= pb_rails("caption", props: { text: "Test colors", color: "link" }) %>
+<%= pb_rails("caption", props: { text: "Caption light" }) %>
+<%= pb_rails("caption", props: { text: "Caption default", color: "default" }) %>
+<%= pb_rails("caption", props: { text: "Caption lighter", color: "lighter" }) %>
+<%= pb_rails("caption", props: { text: "Caption success", color: "success" }) %>
+<%= pb_rails("caption", props: { text: "Caption error", color: "error" }) %>
+<%= pb_rails("caption", props: { text: "Caption link", color: "link" }) %>

data/app/pb_kits/playbook/pb_caption/docs/_caption_colors.jsx

@@ -4,23 +4,33 @@ import Caption from "../../pb_caption/_caption"
 const CaptionColors = (props) => {
   return (
     <div>
+      <Caption 
+          text="Caption light"
+          {...props}
+      />
+      <Caption
+          color="default"
+          text="Caption default"
+          {...props}
+      />
       <Caption
-          text="Test colors"
+          color="lighter"
+          text="Caption lighter"
           {...props}
       />
       <Caption
           color="success"
-          text="Test colors"
+          text="Caption success"
           {...props}
       />
       <Caption
           color="error"
-          text="Test colors"
+          text="Caption error"
           {...props}
       />
       <Caption
           color="link"
-          text="Test colors"
+          text="Caption link"
           {...props}
       />
     </div>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_positions.md

@@ -1,6 +1,7 @@
 Datepicker supports `position` options from [Flatpickr Options Documentation](https://flatpickr.js.org/options/). There are multiple positioning options to choose from.
 
 **Note:** In order for the above prop to work properly, you must also send `staticPosition={false}` to your Datepicker kit instance.
+If you are using the Datepicker within a Dialog, you cannot use the `staticPosition`/`static_position` prop.
 
 #### Affix Datepicker Upon Scrolling
 

data/app/pb_kits/playbook/pb_detail/docs/_detail_colors.html.erb

@@ -1,24 +1,6 @@
-<%= pb_rails("detail", props: {
-  text: "I am a detail kit",
-  color: "default"
-}) %>
-
-<%= pb_rails("detail", props: {
-  text: "I am a detail kit",
-  color: "lighter"
-}) %>
-
-<%= pb_rails("detail", props: {
-  text: "I am a detail kit",
-  color: "link"
-}) %>
-
-<%= pb_rails("detail", props: {
-  text: "I am a detail kit",
-  color: "error"
-}) %>
-
-<%= pb_rails("detail", props: {
-  text: "I am a detail kit",
-  color: "success"
-}) %>
+<%= pb_rails("detail", props: { text: "I am a detail kit" }) %>
+<%= pb_rails("detail", props: { text: "I am a detail kit", color: "default" }) %>
+<%= pb_rails("detail", props: { text: "I am a detail kit", color: "lighter" }) %>
+<%= pb_rails("detail", props: { text: "I am a detail kit", color: "link" }) %>
+<%= pb_rails("detail", props: { text: "I am a detail kit", color: "error" }) %>
+<%= pb_rails("detail", props: { text: "I am a detail kit", color: "success" }) %>

data/app/pb_kits/playbook/pb_detail/docs/_detail_colors.jsx

@@ -1,38 +1,40 @@
 import React from 'react'
 import Detail from '../../pb_detail/_detail'
 
-const DetailColors = (props) => (
-  <div>
-    <Detail
-        color="default"
-        text="I am a detail kit"
-        {...props}
-    />
-
-    <Detail
-        color="lighter"
-        text="I am a detail kit"
-        {...props}
-    />
-
-    <Detail
-        color="link"
-        text="I am a detail kit"
-        {...props}
-    />
-
-    <Detail
-        color="error"
-        text="I am a detail kit"
-        {...props}
-    />
-
-    <Detail
-        color="success"
-        text="I am a detail kit"
-        {...props}
-    />
-  </div>
-)
+const DetailColors = (props) => {
+  return (
+    <div>
+      <Detail
+          text="I am a detail kit"
+          {...props}
+      />
+      <Detail
+          color="default"
+          text="I am a detail kit"
+          {...props}
+      />
+      <Detail
+          color="lighter"
+          text="I am a detail kit"
+          {...props}
+      />
+      <Detail
+          color="link"
+          text="I am a detail kit"
+          {...props}
+      />
+      <Detail
+          color="error"
+          text="I am a detail kit"
+          {...props}
+      />
+      <Detail
+          color="success"
+          text="I am a detail kit"
+          {...props}
+      />
+    </div>
+  )
+}
 
 export default DetailColors

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.md

@@ -1,4 +1,6 @@
 The dialog kit also supports customizing your dialog with a [compound component](https://kentcdodds.com/blog/compound-components-with-react-hooks) structure.
 This allows for greater flexibility and more complex dialogs.
 
-For the Rails version, when using the kit as a compound component it is necessary to pass the same value as the id for the dialog, the dialog header and the dialog footer in order for the opening and closing of the dialog to function as expected.
+For the Rails version, when using the kit as a compound component it is necessary to pass the same value as the id for the dialog, the dialog header and the dialog footer in order for the opening and closing of the dialog to function as expected.
+
+If you are using the datepicker within the Rails dialog, do not use the `static_position` prop on the datepicker.

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_closing_options.jsx

@@ -0,0 +1,63 @@
+import React from 'react'
+import Dropdown from '../../pb_dropdown/_dropdown'
+import Caption from '../../pb_caption/_caption'
+
+const DropdownClosingOptions = (props) => {
+    const options = [
+        {
+            label: "United States",
+            value: "unitedStates",
+            id: "us"
+        },
+        {
+            label: "Canada",
+            value: "canada",
+            id: "ca"
+        },
+        {
+            label: "Pakistan",
+            value: "pakistan",
+            id: "pk"
+        }
+    ];
+
+    return (
+        <>
+            <Caption 
+                marginBottom="xs" 
+                text="Any"
+            />
+            <Dropdown
+                closeOnClick='any'
+                options={options}
+                {...props}
+            />
+
+            <br />
+                
+            <Caption 
+                marginBottom="xs" 
+                text="Outside"
+            />
+            <Dropdown
+                closeOnClick='outside'
+                options={options}
+                {...props}
+            />
+
+            <br />
+
+            <Caption 
+                marginBottom="xs" 
+                text="Inside"
+            />
+            <Dropdown
+                closeOnClick='inside'
+                options={options}
+                {...props}
+            />
+        </>
+    )
+}
+
+export default DropdownClosingOptions

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_closing_options.md

@@ -0,0 +1 @@
+The `closeOnClick` prop allows you to control when the Dropdown closes in response to click interactions. The value `any` reflects the default behavior, where the dropdown will close after any click. Set it to `outside` to ensure interactive elements as dropdown options are able to be interacted with or modified. Set it to `inside` for a dropdown that only closes when the input or dropdown menu is clicked.

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_closing_options_rails.html.erb

@@ -0,0 +1,16 @@
+<%
+  options = [
+    { label: "United States", value: "unitedStates", id: "us" },
+    { label: "Canada", value: "canada", id: "ca" },
+    { label: "Pakistan", value: "pakistan", id: "pk" },
+  ]
+%>
+
+<%= pb_rails("caption", props: { margin_bottom: "xs", text: "Any" }) %>
+<%= pb_rails("dropdown", props: { options: options, close_on_click: "any", margin_bottom: "md" }) %>
+
+<%= pb_rails("caption", props: { margin_bottom: "xs", text: "Outside" }) %>
+<%= pb_rails("dropdown", props: { options: options, close_on_click: "outside", margin_bottom: "md" }) %>
+
+<%= pb_rails("caption", props: { margin_bottom: "xs", text: "Inside" }) %>
+<%= pb_rails("dropdown", props: { options: options, close_on_click: "inside" }) %>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_closing_options_rails.md

@@ -0,0 +1 @@
+The `close_on_click` prop allows you to control when the Dropdown closes in response to click interactions. The value `any` reflects the default behavior, where the dropdown will close after any click. Set it to `outside` to ensure interactive elements as dropdown options are able to be interacted with or modified. Set it to `inside` for a dropdown that only closes when the input or dropdown menu is clicked.

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

@@ -25,6 +25,7 @@ examples:
   - dropdown_separators_hidden: Separators Hidden
   - dropdown_with_clearable: Clearable
   - dropdown_with_constrain_height_rails: Constrain Height
+  - dropdown_closing_options_rails: Closing Options
   - dropdown_quickpick_rails: Quick Pick Variant
   - dropdown_quickpick_range_end_rails: Quick Pick Variant (Range Ends Today)
   - dropdown_quickpick_default_dates: Quick Pick Variant (Default Dates)
@@ -62,6 +63,7 @@ examples:
   - dropdown_with_constrain_height: Constrain Height
   - dropdown_separators_hidden: Separators Hidden
   - dropdown_with_external_control: useDropdown Hook
+  - dropdown_closing_options: Closing Options
   - dropdown_quickpick: Quick Pick Variant
   - dropdown_quickpick_range_end: Quick Pick Variant (Range Ends Today)
   - dropdown_quickpick_default_dates: Quick Pick Variant (Default Dates)

data/app/pb_kits/playbook/pb_dropdown/docs/index.js

@@ -31,4 +31,5 @@ export { default as DropdownQuickpickWithDatePickers } from './_dropdown_quickpi
 export { default as DropdownQuickpickCustom } from './_dropdown_quickpick_custom.jsx'
 export { default as DropdownWithClearable } from './_dropdown_with_clearable.jsx'
 export { default as DropdownWithConstrainHeight } from './_dropdown_with_constrain_height.jsx'
+export { default as DropdownClosingOptions } from './_dropdown_closing_options.jsx'
 export { default as DropdownRequiredIndicator } from "./_dropdown_required_indicator.jsx";

data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb

@@ -92,7 +92,8 @@
   <%= form.typeahead :example_typeahead, props: { data: { typeahead_example1: true, user: {} }, label: true, placeholder: "Search for a user" } %>
   <%= form.text_field :example_text_field, props: { label: true } %>
   <%= form.text_field :example_text_field_2, props: { label: "Text Field Custom Label" } %>
-  <%= form.phone_number_field :example_phone_number_field, props: { label: "Example phone field", hidden_inputs: true } %>
+  <%= form.phone_number_field :example_phone_number_field, props: { label: true, hidden_inputs: true} %>
+  <%= form.intl_telephone :example_intl_telephone, props: { label: true, hidden_inputs: true } %>
   <%= form.email_field :example_email_field, props: { label: true } %>
   <%= form.number_field :example_number_field, props: { label: true } %>
   <%= form.search_field :example_search_field, props: { label: true } %>

data/app/pb_kits/playbook/pb_form/docs/_form_with_required_indicator.html.erb

@@ -146,6 +146,8 @@
   <%= form.time_picker :example_time_picker_required_indicator, props: { label: true, required: true, required_indicator: true } %>
   <%= form.date_picker :example_date_picker_required_indicator, props: { label: true, required: true, required_indicator: true } %>
   <%= form.date_picker :example_date_picker_required_indicator_custom, props: { label: "Custom Date Picker Label", required: true, required_indicator: true } %>
+  <%= form.select :example_select_required_indicator, [["Yes", 1], ["No", 2]], props: { label: true, required: true, required_indicator: true } %>
+  <%= form.select :example_select_required_indicator_2, [["Yes", 1], ["No", 2]], props: { label: "Example Select Field", required: true, required_indicator: true } %>
   <%= form.multi_level_select :example_multi_level_select_required_indicator, props: {
     label: true,
     margin_y: 'sm',

data/app/pb_kits/playbook/pb_link/docs/_link_underline.jsx

@@ -4,7 +4,37 @@ import Link from '../../pb_link/_link'
 const LinkUnderline = (props) => (
   <div>
     <Link
-        href="#underline"
+        href="#underline1"
+        text="link example"
+        underline
+        {...props}
+    />
+
+    <br />
+
+    <Link
+        color="body"
+        href="#underline2"
+        text="link example"
+        underline
+        {...props}
+    />
+
+    <br />
+
+    <Link
+        color="muted"
+        href="#underline3"
+        text="link example"
+        underline
+        {...props}
+    />
+
+    <br />
+
+    <Link
+        color="destructive"
+        href="#underline4"
         text="link example"
         underline
         {...props}

data/app/pb_kits/playbook/pb_select/docs/_select_required_indicator.html.erb

@@ -0,0 +1,24 @@
+<%= pb_rails("select", props: {
+  label: "Favorite Snacks",
+  name: "food",
+  required_indicator: true,
+  options: [
+    {
+      value: "1",
+      value_text: "Popcorn",
+    },
+    {
+      value: "2",
+      selected: true,
+      value_text: "Chips",
+    },
+    {
+      value: "3",
+      value_text: "Twizzlers",
+    },
+    {
+      value: "4",
+      value_text: "Cookies",
+    },
+  ]
+}) %>

data/app/pb_kits/playbook/pb_select/docs/_select_required_indicator.jsx

@@ -0,0 +1,33 @@
+import React from "react";
+
+import { Select } from "playbook-ui";
+
+const SelectRequiredIndicator = () => {
+  const options = [
+    {
+      value: "1",
+      text: "Popcorn",
+    },
+    {
+      value: "2",
+      text: "Chips",
+    },
+    {
+      value: "3",
+      text: "Twizzlers",
+    },
+  ];
+
+  return (
+    <div>
+      <Select
+          label="Favorite Snack"
+          name="food"
+          options={options}
+          requiredIndicator
+      />
+    </div>
+  );
+};
+
+export default SelectRequiredIndicator;

data/app/pb_kits/playbook/pb_select/docs/_select_required_indicator.md

@@ -0,0 +1,3 @@
+The `requiredIndicator`/`required_indicator` prop displays a red asterisk (\*) next to the label, visually indicating that the field is required. This is purely visual and does not enforce validation.
+
+You can use `requiredIndicator`/`required_indicator` with any validation approach: HTML5 validation via the `required` prop, client-side validation, or backend validation. For this reason, it works independently and doesn't need to be paired with the `required` prop.

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

@@ -16,7 +16,7 @@ examples:
   - select_attributes: Select W/ Attributes
   - select_multiple: Select Multiple
   - select_input_options: Input Options
-
+  - select_required_indicator: Required Indicator
 
 
   react:
@@ -35,8 +35,9 @@ examples:
   - select_multiple: Select Multiple
   - select_react_hook: React Hook
   - select_input_options: Input Options
+  - select_required_indicator: Required Indicator
 
   swift:
   - select_default_swift: Default
   - select_error_swift: Error
-  - select_props_table: ""
+  - select_props_table: ""

data/app/pb_kits/playbook/pb_select/docs/index.js

@@ -13,3 +13,4 @@ export { default as SelectMultiple } from './_select_multiple.jsx'
 export { default as SelectReactHook } from './_select_react_hook.jsx'
 export { default as SelectCustomSelectSubheaders } from './_select_custom_select_subheaders.jsx'
 export { default as SelectInputOptions } from './_select_input_options.jsx'
+export { default as SelectRequiredIndicator } from './_select_required_indicator.jsx'

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_disabled.jsx

@@ -2,19 +2,17 @@ import React from 'react'
 
 import TextInput from '../_text_input'
 
-class TextInputDisabled extends React.Component {
-  render(props) {
-    return (
-      <div>
-        <TextInput
-            disabled
-            label="Last Name"
-            placeholder="Enter last name"
-            {...props}
-        />
-      </div>
-    )
-  }
+const TextInputDisabled = (props) => {
+  return (
+    <div>
+      <TextInput
+          disabled
+          label="Last Name"
+          placeholder="Enter last name"
+          {...props}
+      />
+    </div>
+  )
 }
 
 export default TextInputDisabled

data/app/pb_kits/playbook/pb_textarea/docs/_textarea_disabled.html.erb

@@ -0,0 +1,10 @@
+<%= pb_rails("textarea", props: { label: "Disabled", rows: 4, id: "disabled-example-1", disabled: true }) %>
+
+<br/>
+
+<%= pb_rails("textarea", props: {
+  label: "Disabled with Placeholder",
+  placeholder: "Placeholder text",
+  id: "disabled-example-2",
+  disabled: true
+}) %>

data/app/pb_kits/playbook/pb_textarea/docs/_textarea_disabled.jsx

@@ -0,0 +1,27 @@
+import React from 'react'
+
+import Textarea from '../_textarea'
+
+const TextareaDefault = (props) => {
+  return (
+    <>
+      <Textarea
+          disabled
+          id="disabled-example"
+          label="Disabled"
+          {...props}
+          rows={4}
+      />
+      <Textarea
+          disabled
+          id="disabled-example-with-placeholder"
+          label="Disabled with Placeholder"
+          placeholder="Content goes here"
+          {...props}
+          rows={4}
+      />
+    </>
+  )
+}
+
+export default TextareaDefault

data/app/pb_kits/playbook/pb_textarea/docs/_textarea_input_options.jsx

@@ -0,0 +1,68 @@
+import React, { useState } from "react"
+
+import Textarea from "../_textarea"
+
+const TextareaInputOptions = (props) => {
+  const [value1, setValue1] = useState("")
+  const [value2, setValue2] = useState("")
+  const [value3, setValue3] = useState("")
+  const [value4, setValue4] = useState("")
+
+  return (
+    <div>
+      <Textarea
+          id="container-id"
+          label="ID on Container"
+          name="comment"
+          onChange={(e) => setValue1(e.target.value)}
+          rows={4}
+          value={value1}
+          {...props}
+      />
+
+      <br />
+
+      <Textarea
+          inputOptions={{ id: "textarea-id" }}
+          label="ID on Textarea via inputOptions"
+          name="comment"
+          onChange={(e) => setValue2(e.target.value)}
+          rows={4}
+          value={value2}
+          {...props}
+      />
+
+      <br />
+
+      <Textarea
+          id="container-id-2"
+          inputOptions={{ id: "textarea-id-2" }}
+          label="Both Container and Textarea IDs"
+          name="comment"
+          onChange={(e) => setValue3(e.target.value)}
+          rows={4}
+          value={value3}
+          {...props}
+      />
+
+      <br />
+
+      <Textarea
+          inputOptions={{
+          "aria-label": "Enter description",
+          "aria-describedby": "help-text",
+          data: { controller: "textarea", action: "focus->handleFocus" },
+          id: "description-textarea"
+        }}
+          label="Data and ARIA Attributes"
+          name="description"
+          onChange={(e) => setValue4(e.target.value)}
+          rows={4}
+          value={value4}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default TextareaInputOptions

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

@@ -10,6 +10,7 @@ examples:
   - textarea_emoji_mask: Emoji Mask
   - textarea_required_indicator: Required Indicator
   - textarea_input_options: Input Options
+  - textarea_disabled: Disabled
 
   react:
   - textarea_default: Default
@@ -20,6 +21,8 @@ examples:
   - textarea_inline: Inline
   - textarea_emoji_mask: Emoji Mask
   - textarea_required_indicator: Required Indicator
+  - textarea_input_options: Input Options
+  - textarea_disabled: Disabled
 
   swift:
   - textarea_default_swift: Default

data/app/pb_kits/playbook/pb_textarea/docs/index.js

@@ -1,4 +1,5 @@
 export { default as TextareaDefault } from './_textarea_default.jsx'
+export { default as TextareaDisabled } from './_textarea_disabled.jsx'
 export { default as TextareaResize } from './_textarea_resize.jsx'
 export { default as TextareaCustom } from './_textarea_custom.jsx'
 export { default as TextareaError } from './_textarea_error.jsx'
@@ -6,3 +7,4 @@ export { default as TextareaCharacterCounter } from './_textarea_character_count
 export { default as TextareaInline } from './_textarea_inline.jsx'
 export { default as TextareaEmojiMask } from './_textarea_emoji_mask.jsx'
 export { default as TextareaRequiredIndicator } from './_textarea_required_indicator.jsx'
+export { default as TextareaInputOptions } from "./_textarea_input_options.jsx"

data/app/pb_kits/playbook/pb_title/docs/_title_colors.html.erb

@@ -1,4 +1,6 @@
 <%= pb_rails("title", props: { text: "Default Color", tag: "h1", size: 3 }) %>
+<%= pb_rails("title", props: { text: "Title Color", tag: "h1", size: 3, color: "light" }) %>
+<%= pb_rails("title", props: { text: "Title Color", tag: "h1", size: 3, color: "lighter" }) %>
 <%= pb_rails("title", props: { text: "Title Color", tag: "h1", size: 3, color: "link" }) %> 
 <%= pb_rails("title", props: { text: "Title Color", tag: "h1", size: 3, color: "success" }) %>
 <%= pb_rails("title", props: { text: "Title Color", tag: "h1", size: 3, color: "error" }) %>

data/app/pb_kits/playbook/pb_title/docs/_title_colors.jsx

@@ -9,6 +9,20 @@ const TitleColors = (props) => {
           text="Default Color"
           {...props}
       />
+      <Title
+          color="light"
+          size={3}
+          tag="h1"
+          text="Title Color"
+          {...props}
+      />
+      <Title
+          color="lighter"
+          size={3}
+          tag="h1"
+          text="Title Color"
+          {...props}
+      />
       <Title
           color="link"
           size={3}

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui_docs
 version: !ruby/object:Gem::Version
-  version: 16.2.0.pre.alpha.PLAY2719atpinnedrowsrails14418
+  version: 16.2.0.pre.alpha.PLAY2791closeonclick14636
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2026-02-13 00:00:00.000000000 Z
+date: 2026-02-24 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: playbook_ui
@@ -123,8 +123,6 @@ files:
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pagination_with_props.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pagination_with_props.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pinned_rows.jsx
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pinned_rows_rails.html.erb
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pinned_rows_rails.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pinned_rows_react.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_responsive.html.erb
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_responsive.jsx
@@ -859,6 +857,10 @@ files:
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection_react.md
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.jsx
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.md
+- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_closing_options.jsx
+- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_closing_options.md
+- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_closing_options_rails.html.erb
+- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_closing_options_rails.md
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.jsx
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.md
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default_rails.html.erb
@@ -2060,6 +2062,9 @@ files:
 - app/pb_kits/playbook/pb_select/docs/_select_react_hook.md
 - app/pb_kits/playbook/pb_select/docs/_select_required.html.erb
 - app/pb_kits/playbook/pb_select/docs/_select_required.jsx
+- app/pb_kits/playbook/pb_select/docs/_select_required_indicator.html.erb
+- app/pb_kits/playbook/pb_select/docs/_select_required_indicator.jsx
+- app/pb_kits/playbook/pb_select/docs/_select_required_indicator.md
 - app/pb_kits/playbook/pb_select/docs/_select_value_text_same.html.erb
 - app/pb_kits/playbook/pb_select/docs/_select_value_text_same.jsx
 - app/pb_kits/playbook/pb_select/docs/example.yml
@@ -2374,6 +2379,8 @@ files:
 - app/pb_kits/playbook/pb_textarea/docs/_textarea_default.jsx
 - app/pb_kits/playbook/pb_textarea/docs/_textarea_default.md
 - app/pb_kits/playbook/pb_textarea/docs/_textarea_default_swift.md
+- app/pb_kits/playbook/pb_textarea/docs/_textarea_disabled.html.erb
+- app/pb_kits/playbook/pb_textarea/docs/_textarea_disabled.jsx
 - app/pb_kits/playbook/pb_textarea/docs/_textarea_emoji_mask.html.erb
 - app/pb_kits/playbook/pb_textarea/docs/_textarea_emoji_mask.jsx
 - app/pb_kits/playbook/pb_textarea/docs/_textarea_emoji_mask.md
@@ -2384,6 +2391,7 @@ files:
 - app/pb_kits/playbook/pb_textarea/docs/_textarea_inline.html.erb
 - app/pb_kits/playbook/pb_textarea/docs/_textarea_inline.jsx
 - app/pb_kits/playbook/pb_textarea/docs/_textarea_input_options.html.erb
+- app/pb_kits/playbook/pb_textarea/docs/_textarea_input_options.jsx
 - app/pb_kits/playbook/pb_textarea/docs/_textarea_input_options.md
 - app/pb_kits/playbook/pb_textarea/docs/_textarea_props_swift.md
 - app/pb_kits/playbook/pb_textarea/docs/_textarea_required_indicator.html.erb

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

@@ -1,57 +0,0 @@
-<%# Example sort method for demonstration purposes %>
-<% if params["sort"] %>
-  <% sort_param = params["sort"].gsub(/_(asc|desc)\z/, "") %>
-  <% sort_direction = params["sort"].end_with?("_asc") ? 1 : -1 %>
-  <% @table_data_with_id.sort! do |a, b|
-    value_a = a[sort_param] || a[sort_param.to_sym]
-    value_b = b[sort_param] || b[sort_param.to_sym]
-
-    value_a = value_a.to_i if value_a.is_a?(String) && value_a.match?(/^\d+$/)
-    value_b = value_b.to_i if value_b.is_a?(String) && value_b.match?(/^\d+$/)
-
-    sort_direction * (value_a <=> value_b)
-  end %>
-<% end %>
-
-<% column_definitions = [
-    {
-      accessor: "year",
-      label: "Year",
-      cellAccessors: ["quarter", "month", "day"],
-      sort_menu: [
-        { item: "Year", link: "?sort=year_asc#pinned_rows_table", active: params["sort"] == "year_asc", direction: "asc" },
-        { item: "Year", link: "?sort=year_desc#pinned_rows_table", active: params["sort"] == "year_desc", direction: "desc" }
-      ],
-    },
-    {
-      accessor: "newEnrollments",
-      label: "New Enrollments",
-    },
-    {
-      accessor: "scheduledMeetings",
-      label: "Scheduled Meetings",
-    },
-    {
-      accessor: "attendanceRate",
-      label: "Attendance Rate",
-    },
-    {
-      accessor: "completedClasses",
-      label: "Completed Classes",
-    },
-    {
-      accessor: "classCompletionRate",
-      label: "Class Completion Rate",
-    },
-    {
-      accessor: "graduatedStudents",
-      label: "Graduated Students",
-    }
-] %>
-
-<% pinned_rows = { top: ["8"] } %>
-
-<%= pb_rails("advanced_table", props: { id: "pinned_rows_table", table_data: @table_data_with_id, column_definitions: column_definitions, max_height: "xs", pinned_rows: pinned_rows, responsive: "none", table_props: { sticky: true }}) do %>
-  <%= pb_rails("advanced_table/table_header", props: { table_id: "pinned_rows_table", column_definitions: column_definitions }) %>
-  <%= pb_rails("advanced_table/table_body", props: { table_id: "pinned_rows_table", table_data: @table_data_with_id, column_definitions: column_definitions, pinned_rows: pinned_rows }) %>
-<% end %>

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

@@ -1,7 +0,0 @@
-Use the `pinned_rows` prop to pin specific rows to the top of an Advanced Table. Pinned rows will remain at the top when scrolling through table data and will not change position if sorting is used.
-
-**NOTE:**
-- Sticky header required: Pinned rows must be used with `sticky: true` via `table_props` (works with both responsive and non-responsive tables)
-- Row ids required: Each object within the `table_data` array must contain a unique `id` in order to attach an id to all Rows for this to function.
-- `pinned_rows` takes a hash with a `top` key containing an array of row ids, as shown in the code snippet below.
-- For expandable rows, use the parent id in `pinned_rows[:top]`; all its children will automatically be pinned with it. If a child id is passed without the parent being pinned, nothing will be pinned.