playbook_ui_docs 16.2.0.pre.alpha.PLAY2828alphafortempo14533 → 16.2.0.pre.alpha.advancedtablecascadingcollapsereact14676

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: dba382af845079eb51f32c8b30f272d05652db3d1486b5b0ba9dd51395d3034b
-  data.tar.gz: 1fcc8a09a87f8cdde2a64292466a4756ad0179156c6253c2906fd1c29281da0d
+  metadata.gz: 73e2f8cce80f7ddc8558342b713df9cb8e2c412dc6f0e20ab7938f6a87fbb5d8
+  data.tar.gz: 77c66654417cc37daadc19a69929edbbf7377e0a0b3bd8a21122830198541e8d
 SHA512:
-  metadata.gz: 98938caa218a20d0745c35709d7d6a2f9fdc2e4a2feb09f4af14c29686f1c462b64fb8ea5374f4e85dbb07fc9572f709f21d3a237e61e66542416a0240c404b3
-  data.tar.gz: 31dea61fa066d644a8d560b5b821604652631554726619e6d4a3b189dfb4353915d266ebda7fb379d1433b874af6fcf0bf5d2bb7bc7ed38bb61a41b379b5250c
+  metadata.gz: 475ec9994431041e30b8e62b3fd8641da128a00306c2e9a257b75cb97ce7f6854037db6c533cfb3c464ebbda945d461cd540a656680c6e28904cc3ec8f82e234
+  data.tar.gz: 6723887c0ae7938db6332aac37f29ed6691e20736241eadcf62de368a58a61c74aedba47d98b395869a4bb9839fc874ec2474c564e85d554151abe638cfb6131

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

@@ -0,0 +1,50 @@
+import React from "react"
+import AdvancedTable from '../../pb_advanced_table/_advanced_table'
+import MOCK_DATA from "./advanced_table_mock_data.json"
+
+const AdvancedTableCascadeCollapse = (props) => {
+  const columnDefinitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      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",
+    },
+  ]
+
+  return (
+    <div>
+      <AdvancedTable
+          cascadeCollapse
+          columnDefinitions={columnDefinitions}
+          tableData={MOCK_DATA}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default AdvancedTableCascadeCollapse

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

@@ -0,0 +1 @@
+`cascadeCollapse` is an optional prop that is set to 'false' by default. If set to 'true', collapsing any parent row itself or by using the toggle exapansion 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.

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

@@ -42,6 +42,7 @@ examples:
   - advanced_table_expanded_control: Expanded Control
   - advanced_table_expand_by_depth: Expand by Depth
   - advanced_table_subrow_headers: SubRow Headers
+  - advanced_table_cascade_collapse: Cascade Collapse
   - advanced_table_collapsible_trail: Collapsible Trail
   - advanced_table_table_options: Table Options
   - advanced_table_table_props: Table Props

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

@@ -48,4 +48,5 @@ export { default as AdvancedTablePaddingControl } from './_advanced_table_paddin
 export { default as AdvancedTablePaddingControlPerRow } from './_advanced_table_padding_control_per_row.jsx'
 export { default as AdvancedTableColumnStylingBackground } from './_advanced_table_column_styling_background.jsx'
 export { default as AdvancedTableColumnStylingBackgroundMulti } from './_advanced_table_column_styling_background_multi.jsx'
-export { default as AdvancedTableColumnStylingBackgroundCustom } from './_advanced_table_column_styling_background_custom.jsx'
+export { default as AdvancedTableColumnStylingBackgroundCustom } from './_advanced_table_column_styling_background_custom.jsx'
+export { default as AdvancedTableCascadeCollapse } from './_advanced_table_cascade_collapse.jsx'

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_react_reset_key.jsx

@@ -0,0 +1,100 @@
+import React, { useState } from "react";
+import MultiLevelSelect from "../_multi_level_select";
+import { Button } from "playbook-ui";
+
+const treeData = [
+  {
+    label: "Power Home Remodeling",
+    value: "powerHomeRemodeling",
+    id: "100",
+    expanded: true,
+    children: [
+      {
+        label: "People",
+        value: "people",
+        id: "101",
+        expanded: true,
+        children: [
+          {
+            label: "Talent Acquisition",
+            value: "talentAcquisition",
+            id: "102",
+          },
+          {
+            label: "Business Affairs",
+            value: "businessAffairs",
+            id: "103",
+            children: [
+              {
+                label: "Initiatives",
+                value: "initiatives",
+                id: "104",
+              },
+              {
+                label: "Learning & Development",
+                value: "learningAndDevelopment",
+                id: "105",
+              },
+            ],
+          },
+          {
+            label: "People Experience",
+            value: "peopleExperience",
+            id: "106",
+          },
+        ],
+      },
+      {
+        label: "Contact Center",
+        value: "contactCenter",
+        id: "107",
+        children: [
+          {
+            label: "Appointment Management",
+            value: "appointmentManagement",
+            id: "108",
+          },
+          {
+            label: "Customer Service",
+            value: "customerService",
+            id: "109",
+          },
+          {
+            label: "Energy",
+            value: "energy",
+            id: "110",
+          },
+        ],
+      },
+    ],
+  },
+];
+
+const MultiLevelSelectReactResetKey = (props) => {
+  const [resetKey, setResetKey] = useState(0);
+
+  const handleReset = () => {
+    setResetKey((k) => k + 1);
+  };
+
+  return (
+    <>
+      <MultiLevelSelect
+          {...props}
+          id="multi-level-select-reset-example"
+          key={`multi-level-select-reset-${resetKey}`}
+          name="my_array"
+          returnAllSelected
+          treeData={treeData}
+      />
+      <Button
+          id="multilevelselect-reset-button"
+          marginTop="lg"
+          onClick={handleReset}
+          text="Reset"
+      />
+    </>
+  );
+};
+
+export default MultiLevelSelectReactResetKey;

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_react_reset_key.md

@@ -0,0 +1 @@
+When a parent resets a Multi Level Select (e.g., “Default” or “Clear”), the kit needs a `key` that changes with the selection because React uses the `key` to determine component identity and whether to preserve internal state. If the `key` doesn’t change, React reuses the existing instance and may keep showing the old selection instead of resetting to the new one.

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

@@ -39,3 +39,4 @@ examples:
     - multi_level_select_disabled_options_parent: Disabled Parent Option (Return All Selected)
     - multi_level_select_single_disabled: Disabled Options (Single Select)
     - multi_level_select_required_indicator: Required Indicator
+    - multi_level_select_react_reset_key: Reset with Key (React)

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

@@ -17,3 +17,4 @@ export { default as MultiLevelSelectDisabledOptionsDefault } from "./_multi_leve
 export { default as MultiLevelSelectLabel } from "./_multi_level_select_label.jsx"
 export { default as MultiLevelSelectSingleDisabled } from "./_multi_level_select_single_disabled.jsx"
 export { default as MultiLevelSelectRequiredIndicator } from "./_multi_level_select_required_indicator.jsx"
+export { default as MultiLevelSelectReactResetKey } from "./_multi_level_select_react_reset_key.jsx"

data/app/pb_kits/playbook/pb_pagination/docs/_pagination_default.jsx

@@ -9,7 +9,7 @@ const PaginationDefault = (props) => {
         <Pagination
             current={1}
             range={5}
-            total={10}
+            total={1000}
             {...props}
           />
       </>

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

@@ -21,6 +21,7 @@ examples:
   - textarea_inline: Inline
   - textarea_emoji_mask: Emoji Mask
   - textarea_required_indicator: Required Indicator
+  - textarea_input_options: Input Options
   - textarea_disabled: Disabled
 
   swift:

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

@@ -1,9 +1,10 @@
-export { default as TextareaDefault } from './_textarea_default.jsx'
+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'
-export { default as TextareaCharacterCounter } from './_textarea_character_counter.jsx'
-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 TextareaResize } from "./_textarea_resize.jsx"
+export { default as TextareaCustom } from "./_textarea_custom.jsx"
+export { default as TextareaError } from "./_textarea_error.jsx"
+export { default as TextareaCharacterCounter } from "./_textarea_character_counter.jsx"
+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"

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui_docs
 version: !ruby/object:Gem::Version
-  version: 16.2.0.pre.alpha.PLAY2828alphafortempo14533
+  version: 16.2.0.pre.alpha.advancedtablecascadingcollapsereact14676
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2026-02-18 00:00:00.000000000 Z
+date: 2026-02-25 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: playbook_ui
@@ -43,6 +43,8 @@ files:
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta_sort.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta_subrow_headers.html.erb
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta_subrow_headers.md
+- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_cascade_collapse.jsx
+- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_cascade_collapse.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_collapsible_trail.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_collapsible_trail.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_collapsible_trail_rails.html.erb
@@ -1449,6 +1451,8 @@ files:
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_label.md
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_react_hook.jsx
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_react_hook.md
+- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_react_reset_key.jsx
+- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_react_reset_key.md
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_required_indicator.html.erb
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_required_indicator.jsx
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_required_indicator.md
@@ -2389,6 +2393,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