playbook_ui 16.8.0.pre.alpha.PLAY296916758 → 16.8.0.pre.alpha.PLAY298516633

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 90d3f24d9b712247bfd1f98152216cf8677f2e479b6bcc3c41fd6d5b8e7bd3f3
-  data.tar.gz: 07d19fe6dbce4f09207d76da40552a143acf8554dc40f9d531037a540741a21c
+  metadata.gz: 0c5280f5836774dc50feecbf9578d7e722119d6fd9ff513a84b876a35951df9c
+  data.tar.gz: 0ab41db8c2fd90bf1eaee79e802026c72ea3284f1b9d1087585c8360baa4bf8b
 SHA512:
-  metadata.gz: bb8b1924408a0f70f8cd6d8fa68b0e8cdac329ba7ce8477e337527f44012fbc30a350f7b3fc1a403e900fdd85d2ae326e3276c5dcd724ccfa2e33fc29d102038
-  data.tar.gz: 679a8bbd8292b31d80cf2001881eec260e16459fea1711df3c1742246481b47e3330704513bdad9d332b642f5417bf2bfeb62462dd1e8907b129195f147db02c
+  metadata.gz: ead83210669d997f2038e735566712e0e14c85d441da394b7f4cb44d84bf09daab2410d2ef9f46d07702b1bba39c3a58036b849fcb2bf05db9b8a198a1afe460
+  data.tar.gz: 4ebba7adbd63c76bfef5aea82be2fa03b1f2226eb07fc8efb1bce065a9ffb14f33f0d16d7e45f0d83f8c0aa209ee9e17cba9a1a02b257da4d0a402391728a731

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

@@ -1,21 +1,13 @@
 import React from "react"
 import AdvancedTable from '../../pb_advanced_table/_advanced_table'
-
-const tableData = Array.from({ length: 15 }, (_, index) => ({
-  year: String(2020 + index),
-  newEnrollments: String(20 + index),
-  scheduledMeetings: String(10 + index),
-  attendanceRate: `${50 + index}%`,
-  completedClasses: String(3 + index),
-  classCompletionRate: `${30 + index}%`,
-  graduatedStudents: String(19 + index),
-}))
+import MOCK_DATA from "./advanced_table_mock_data.json"
 
 const AdvancedTableStickyHeader = (props) => {
   const columnDefinitions = [
     {
       accessor: "year",
       label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
     },
     {
       accessor: "newEnrollments",
@@ -48,11 +40,11 @@ const AdvancedTableStickyHeader = (props) => {
   }
 
   return (
-    <div style={{ maxHeight: "320px", overflowY: "auto" }}>
+    <div>
       <AdvancedTable
           columnDefinitions={columnDefinitions}
           responsive="none"
-          tableData={tableData}
+          tableData={MOCK_DATA}
           tableProps={tableProps}
           {...props}
       />

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

@@ -1,7 +1,3 @@
 The `TableProps` prop can also be used to render a sticky header for the Advanced Table.
 
-This doc example uses a scroll container with flat rows so sticky behavior is visible in the docs without expanding subrows. Scroll inside the preview to see the header stick.
-
-This example builds flat table data inline for the docs preview. For typical `tableData` setup, see [Default (Required Props)](/kits/advanced_table/default/react#advanced_table_default).
-
 This doc example showcases how to set a sticky header for a nonresponsive table (see the `responsive` prop set to "none"). To achieve sticky header AND responsive functionality, see the "Sticky Header for Responsive Table" doc example below.

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

@@ -2,6 +2,7 @@
     {
       accessor: "year",
       label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
     },
     {
       accessor: "newEnrollments",
@@ -29,19 +30,4 @@
     }
 ] %>
 
-<% table_data = 15.times.map do |index|
-  {
-    year: (2020 + index).to_s,
-    id: (2020 + index).to_s,
-    newEnrollments: (20 + index).to_s,
-    scheduledMeetings: (10 + index).to_s,
-    attendanceRate: "#{50 + index}%",
-    completedClasses: (3 + index).to_s,
-    classCompletionRate: "#{30 + index}%",
-    graduatedStudents: (19 + index).to_s,
-  }
-end %>
-
-<div style="max-height: 320px; overflow-y: auto;">
-  <%= pb_rails("advanced_table", props: { id: "sticky_header_table", table_data: table_data, column_definitions: column_definitions, responsive: "none", table_props: { sticky: true }}) %>
-</div>
+<%= pb_rails("advanced_table", props: { id: "sticky_header_table", table_data: @table_data, column_definitions: column_definitions, responsive: "none", table_props: { sticky: true }}) %>

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

@@ -1,7 +1,3 @@
 The `table_props` prop can also be used to render a sticky header for the Advanced Table.
 
-This doc example uses a scroll container with flat rows so sticky behavior is visible in the docs without expanding subrows. Scroll inside the preview to see the header stick.
-
-This example builds flat table data inline for the docs preview. For typical `table_data` setup, see [Default (Required Props)](/kits/advanced_table/default/rails#advanced_table_beta).
-
 This doc example showcases how to set a sticky header for a nonresponsive table (see the `responsive` prop set to "none"). To achieve sticky header AND responsive functionality, see the "[Sticky Header for Responsive Table](https://playbook.powerapp.cloud/kits/advanced_table/react#sticky-header-for-responsive-table)" doc example below.

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

@@ -2,6 +2,7 @@
     {
       accessor: "year",
       label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
     },
     {
       accessor: "newEnrollments",
@@ -29,19 +30,4 @@
     }
 ] %>
 
-<% table_data = 15.times.map do |index|
-  {
-    year: (2020 + index).to_s,
-    id: (2020 + index).to_s,
-    newEnrollments: (20 + index).to_s,
-    scheduledMeetings: (10 + index).to_s,
-    attendanceRate: "#{50 + index}%",
-    completedClasses: (3 + index).to_s,
-    classCompletionRate: "#{30 + index}%",
-    graduatedStudents: (19 + index).to_s,
-  }
-end %>
-
-<div style="max-height: 320px; overflow-y: auto;">
-  <%= pb_rails("advanced_table", props: { id: "table_props_sticky_table", table_data: table_data, column_definitions: column_definitions, table_props: { sticky: true }}) %>
-</div>
+<%= pb_rails("advanced_table", props: { id: "table_props_sticky_table", table_data: @table_data, column_definitions: column_definitions, max_height: "xs", table_props: { sticky: true }}) %>

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

@@ -1,21 +1,13 @@
 import React from "react"
 import AdvancedTable from '../../pb_advanced_table/_advanced_table'
-
-const tableData = Array.from({ length: 15 }, (_, index) => ({
-  year: String(2020 + index),
-  newEnrollments: String(20 + index),
-  scheduledMeetings: String(10 + index),
-  attendanceRate: `${50 + index}%`,
-  completedClasses: String(3 + index),
-  classCompletionRate: `${30 + index}%`,
-  graduatedStudents: String(19 + index),
-}))
+import MOCK_DATA from "./advanced_table_mock_data.json"
 
 const AdvancedTableTablePropsStickyHeader = (props) => {
   const columnDefinitions = [
     {
       accessor: "year",
       label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
     },
     {
       accessor: "newEnrollments",
@@ -48,10 +40,11 @@ const AdvancedTableTablePropsStickyHeader = (props) => {
   }
 
   return (
-    <div style={{ maxHeight: "320px", overflowY: "auto" }}>
+    <div>
       <AdvancedTable
           columnDefinitions={columnDefinitions}
-          tableData={tableData}
+          maxHeight="xs"
+          tableData={MOCK_DATA}
           tableProps={tableProps}
           {...props}
       />

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

@@ -2,10 +2,6 @@ Create a sticky header that works for responsive Advanced Tables by setting `sti
 
 **NOTE**: This behavior requires a `max_height` to work. The header is sticky within the table container, allowing for it to work along with the first column stickiness of a responsive table on smaller screen sizes.
 
-Scroll inside the table preview to see the header stick.
-
-This example builds flat table data inline for the docs preview. For typical `table_data` setup, see [Default (Required Props)](/kits/advanced_table/default/rails#advanced_table_beta).
-
 Expand the table above to see this in action.
 
 A sticky header on a nonresponsive table is demonstrated in the ["Sticky Header"](https://playbook.powerapp.cloud/kits/advanced_table#sticky-header) doc example above.

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

@@ -1,9 +1,7 @@
-Create a sticky header that works for responsive Advanced Tables by setting `sticky: true` via `tableProps` and wrapping the table in a scroll container (or using `maxHeight`).
+Create a sticky header that works for responsive Advanced Tables by setting `sticky: true` via `tableProps` and giving the AdvancedTable a `maxHeight` using our [Max Height](https://playbook.powerapp.cloud/global_props/max_height) global prop. 
 
-**NOTE**: The header is sticky within the table scroll area. The live example uses flat rows so you can scroll inside the preview without expanding subrows.
+**NOTE**: This behavior requires a `maxHeight` to work. The header is sticky within the table container, allowing for it to work along with the first column stickiness of a responsive table on smaller screen sizes.
 
-This example builds flat table data inline for the docs preview. For typical `tableData` setup, see [Default (Required Props)](/kits/advanced_table/default/react#advanced_table_default).
-
-Expand the table above to see responsive behavior in action.
+Expand the table above to see this in action.
 
 A sticky header on a nonresponsive table is demonstrated in the ["Sticky Header"](https://playbook.powerapp.cloud/kits/advanced_table/react#sticky-header) doc example above.

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

@@ -3,7 +3,6 @@ examples:
   - advanced_table_beta: Default (Required Props)
   - advanced_table_loading: Loading State
   - advanced_table_beta_subrow_headers: SubRow Headers
-  - advanced_table_enable_toggle_expansion_rails: Enable Toggle Expansion
   - advanced_table_collapsible_trail_rails: Collapsible Trail
   - advanced_table_table_props: Table Props
   - advanced_table_sticky_header_rails: Sticky Header
@@ -53,7 +52,6 @@ examples:
   - advanced_table_table_props_sticky_header: Sticky Header for Responsive Table
   - advanced_table_sticky_columns: Sticky Columns
   - advanced_table_sticky_columns_and_header: Sticky Columns with Sticky Header
-  - advanced_table_sticky_scroll_limitation: Sticky Header and Column Scroll Limitation
   - advanced_table_responsive: Responsive Tables
   - advanced_table_custom_cell: Custom Components for Cells
   - advanced_table_with_custom_header: Custom Header Cell

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

@@ -27,7 +27,6 @@ export { default as AdvancedTableFullscreen } from './_advanced_table_fullscreen
 export { default as AdvancedTableStickyColumns } from './_advanced_table_sticky_columns.jsx'
 export { default as AdvancedTableStickyHeader } from './_advanced_table_sticky_header.jsx'
 export { default as AdvancedTableStickyColumnsAndHeader } from './_advanced_table_sticky_columns_and_header.jsx'
-export { default as AdvancedTableStickyScrollLimitation } from './_advanced_table_sticky_scroll_limitation.jsx'
 export { default as AdvancedTableExpandByDepth } from './_advanced_table_expand_by_depth.jsx'
 export { default as AdvancedTableColumnBorderColor} from './_advanced_table_column_border_color.jsx'
 export { default as AdvancedTableColumnVisibility } from './_advanced_table_column_visibility.jsx'

data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb

@@ -79,57 +79,42 @@
 
   <%= javascript_tag do %>
     (function() {
-      const initQuickPickChangeListener = (input) => {
-        if (!<%= object.selection_type == "quickpick" %>) return
-        if (input.dataset.quickpickInitialized) return
-
-        input.dataset.quickpickInitialized = "true"
-        input.addEventListener("change", ({ target }) => {
-          const startDate = document.getElementById("<%= object.start_date_id %>")
-          const endDate = document.getElementById("<%= object.end_date_id %>")
-          const splittedValue = target.value.split(" to ")
-          startDate.value = splittedValue[0]
-          endDate.value = splittedValue[1] ? splittedValue[1] : splittedValue[0]
-        })
-      }
-
       const loadDatePicker = () => {
-        const input = document.getElementById("<%= object.picker_id %>")
-
-        if (!input || input._flatpickr) return true
-        if (typeof window.datePickerHelper !== "function") return false
-
-        window.datePickerHelper(<%= object.date_picker_config %>, "<%= object.scroll_container %>")
-        initQuickPickChangeListener(input)
-
-        return true
-      }
-
-      let attempts = 0
-      const retryLoad = () => {
-        if (loadDatePicker()) return
+        const input = document.getElementById("<%= object.picker_id %>");
+        if (input && !input._flatpickr) {
+          datePickerHelper(<%= object.date_picker_config %>, "<%= object.scroll_container %>")
 
-        if (attempts++ < 20) {
-          setTimeout(retryLoad, 100)
+          if (<%= object.selection_type == "quickpick" %>) {
+            document.getElementById("<%= object.picker_id %>").addEventListener("change", ({ target }) => {
+              const startDate = document.getElementById("<%= object.start_date_id %>")
+              const endDate = document.getElementById("<%= object.end_date_id %>")
+              const splittedValue = target.value.split(" to ")
+              startDate.value = splittedValue[0]
+              endDate.value = splittedValue[1] ? splittedValue[1] : splittedValue[0]
+            })
+          }
         }
       }
 
+      // Try to initialize immediately if DOM is ready
       if (document.readyState === "loading") {
-        window.addEventListener("DOMContentLoaded", retryLoad)
+        window.addEventListener("DOMContentLoaded", loadDatePicker)
       } else {
-        retryLoad()
+        loadDatePicker()
       }
 
       // For dynamically added content (modals, etc.), check again after a brief delay
       setTimeout(() => {
-        const input = document.getElementById("<%= object.picker_id %>")
+        const input = document.getElementById("<%= object.picker_id %>");
         if (input && !input._flatpickr) {
-          retryLoad()
+          loadDatePicker();
         }
-      }, 100)
+      }, 100);
 
       if (<%= !object.custom_event_type.empty? %>) {
-        window.addEventListener("<%= object.custom_event_type %>", retryLoad)
+        window.addEventListener("<%= object.custom_event_type %>", () => {
+          loadDatePicker()
+        })
       }
     })()
   <% end %>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_dialog_submission.jsx

@@ -36,10 +36,10 @@ const DatePickerDialogSubmission = () => {
                 <Dialog.Body>
                     <DatePicker
                         defaultDate={dateFixed || undefined}
-                        key={"fixed-" + pickerInstance}
+                        key={`fixed-${pickerInstance}`}
                         label="Date"
                         onChange={(dateStr) => setDateFixed(dateStr || "")}
-                        pickerId={"datePickerFixed-" + pickerInstance}
+                        pickerId={`datePickerFixed-${pickerInstance}`}
                         staticPosition={false}
                     />
                 </Dialog.Body>

data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx

@@ -21,6 +21,58 @@ import {
     handleClickOutside,
 } from "./utilities";
 
+function serializeDropdownFilterResetDefault(
+    variant: "default" | "subtle" | "quickpick" | undefined,
+    multiSelect: boolean,
+    defaultValue: GenericObject | GenericObject[] | string | undefined,
+    dropdownOptions: GenericObject[] | GenericObject | undefined,
+): string | undefined {
+    const optionList: GenericObject[] = Array.isArray(dropdownOptions)
+        ? dropdownOptions
+        : [];
+    const optionDefaultId = (option: GenericObject | undefined): string | undefined => {
+        if (!option) return undefined;
+
+        const id = option.id;
+        if (id != null && id !== "") return String(id);
+
+        const matched = optionList.find((listOption: GenericObject) => (
+            (option.value != null && listOption.value === option.value) ||
+            (option.label != null && listOption.label === option.label)
+        ));
+
+        if (matched?.id != null && matched.id !== "") return String(matched.id);
+        return undefined;
+    };
+
+    if (variant === "quickpick") {
+        if (typeof defaultValue === "string" && defaultValue) {
+            const matched = optionList.find(
+                (opt: GenericObject) => opt.label?.toLowerCase() === defaultValue.toLowerCase()
+            );
+            if (matched?.id != null && matched.id !== "") return String(matched.id);
+        }
+        return undefined;
+    }
+    if (multiSelect) {
+        const arr = Array.isArray(defaultValue)
+            ? defaultValue
+            : defaultValue && typeof defaultValue === "object" && Object.keys(defaultValue).length
+                ? [defaultValue as GenericObject]
+                : [];
+        if (!arr.length) return undefined;
+        const ids = arr
+            .map((v) => optionDefaultId(v as GenericObject))
+            .filter((id) => id != null && id !== "");
+        return ids.length ? ids.join(",") : undefined;
+    }
+    if (defaultValue && typeof defaultValue === "object" && !Array.isArray(defaultValue)) {
+        const id = optionDefaultId(defaultValue as GenericObject);
+        if (id) return id;
+    }
+    return undefined;
+}
+
 type CustomQuickPickDate = {
     label: string;
     value: string[] | { timePeriod: string; amount: number };
@@ -157,6 +209,11 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
       initialSelected
     );
 
+    const filterResetDefaultSerialized = useMemo(
+        () => serializeDropdownFilterResetDefault(variant, multiSelect, defaultValue, dropdownOptions),
+        [variant, multiSelect, defaultValue, dropdownOptions]
+    );
+
     const [isInputFocused, setIsInputFocused] = useState(false);
     const [hasTriggerSubcomponent, setHasTriggerSubcomponent] = useState(true);
     const [hasContainerSubcomponent, setHasContainerSubcomponent] =
@@ -432,6 +489,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
         <div {...ariaProps}
             {...dataProps}
             {...htmlProps}
+            {...(filterResetDefaultSerialized ? { "data-default-value": filterResetDefaultSerialized } : {})}
             className={classes}
             id={id}
             ref={outerDivRef}

data/app/pb_kits/playbook/pb_dropdown/dropdown.html.erb

@@ -12,7 +12,9 @@
     <% end %>
     <div class="dropdown_wrapper<%= error_class %>" style="position: relative">
         <input
+            <% if input_default_value.present? %>
             data-default-value="<%= input_default_value %>"
+            <% end %>
             data-dropdown-selected-option
             name="<%= object.name %><%= '[]' if object.multi_select %>"
             style="display: none"

data/app/pb_kits/playbook/pb_dropdown/dropdown.test.jsx

@@ -51,6 +51,7 @@ test('generated default kit and classname', () => {
   const kit = screen.getByTestId(testId)
   expect(kit).toBeInTheDocument()
   expect(kit).toHaveClass('pb_dropdown_default')
+  expect(kit).not.toHaveAttribute('data-default-value')
 })
 
 test('generated default Trigger and Container when none passed in', () => {
@@ -433,12 +434,16 @@ test("defaultValue works with multiSelect", () => {
     render(
       <Dropdown
           data={{ testid: testId }}
-          defaultValue={[options[0], options[2]]}
+          defaultValue={[
+            { label: options[0].label, value: options[0].value },
+            { label: options[2].label, value: options[2].value },
+          ]}
           multiSelect
           options={options}
       />
     )
     const kit = screen.getByTestId(testId)
+    expect(kit).toHaveAttribute("data-default-value", "United-states,pakistan")
     expect(kit.querySelectorAll(".pb_form_pill_kit.pb_form_pill_primary")).toHaveLength(2)
     const option2 = Array.from(kit.querySelectorAll(".pb_dropdown_option_list"));
     const firstOpt = options[0].label
@@ -499,6 +504,7 @@ test("quickpick variant accepts string defaultValue", () => {
   const trigger = kit.querySelector('.pb_dropdown_trigger')
   
   expect(trigger).toHaveTextContent("This Month")
+  expect(kit).toHaveAttribute("data-default-value", "quickpick-this-month")
 })
 
 test("quickpick attaches _dropdownRef to DOM element when id is provided", () => {

data/app/pb_kits/playbook/pb_icon/_icon.scss

@@ -69,10 +69,9 @@ svg {
       transform: scaleX(-1) scaleY(-1);
     }
     &.svg-inline--fa {
-      box-sizing: content-box;
       height: 1em;
       overflow: visible;
-      vertical-align: -.125em;
+      vertical-align: -.125em
     }
     &.svg_inverse {
       color: #fff;

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

@@ -84,19 +84,6 @@
         "react",
         "rails"
       ]
-    },
-    "required": {
-      "platforms": [
-        "rails"
-      ],
-      "type": "boolean",
-      "default": false
-    },
-    "minLength": {
-      "platforms": [
-        "rails"
-      ],
-      "type": "number"
     }
   },
   "globalProps": true,

data/app/pb_kits/playbook/pb_passphrase/passphrase.html.erb

@@ -1,70 +1 @@
-<%= pb_content_tag(:div) do %>
-  <label>
-    <%= pb_rails("flex", props: { align: "baseline", margin_bottom: show_label? ? "xs" : nil }.compact) do %>
-      <% if show_label? %>
-        <% if show_required_indicator? %>
-          <%= pb_rails("caption", props: { dark: object.dark, classname: "passphrase-label", color: "lighter" }) do %>
-            <%= object.display_label %> <span class="required_indicator">*</span>
-          <% end %>
-        <% else %>
-          <%= pb_rails("caption", props: {
-            dark: object.dark,
-            classname: "passphrase-label",
-            color: "lighter",
-            text: object.display_label,
-          }) %>
-        <% end %>
-      <% end %>
-
-      <% if object.show_tips? %>
-        <%= pb_rails("circle_icon_button", props: {
-          classname: object.tips_button_class,
-          dark: object.dark,
-          icon: "info-circle",
-          id: object.tips_trigger_id,
-          variant: "link",
-        }) %>
-        <%= pb_rails("popover", props: {
-          close_on_click: "outside",
-          position: "right",
-          trigger_element_id: object.tips_trigger_id,
-          tooltip_id: object.tips_tooltip_id,
-        }) do %>
-          <%= pb_rails("flex", props: { align: "center", orientation: "column" }) do %>
-            <%= pb_rails("caption", props: {
-              color: "lighter",
-              margin_bottom: "xs",
-              text: "Tips for a good passphrase",
-            }) %>
-            <div>
-              <% object.tips.each do |tip| %>
-                <%= pb_rails("flex", props: { align: "center", margin_bottom: "xs" }) do %>
-                  <%= pb_rails("icon", props: { icon: "shield-check", margin_right: "xs" }) %>
-                  <%= pb_rails("caption", props: { color: "lighter", size: "xs", text: tip }) %>
-                <% end %>
-              <% end %>
-            </div>
-          <% end %>
-        <% end %>
-      <% end %>
-    <% end %>
-
-    <div class="passphrase-text-input-wrapper">
-      <%= pb_rails("text_input", props: object.text_input_props) %>
-      <span
-        aria-label="Passphrase currently hidden. Click icon to reveal password"
-        aria-pressed="false"
-        class="show-passphrase-icon"
-        role="button"
-        tabindex="0"
-      >
-        <%= pb_rails("body", props: { classname: "passphrase-toggle-icon", color: "light", dark: object.dark }) do %>
-          <%= pb_rails("icon", props: { aria: { label: "eye icon" }, icon: "eye-slash" }) %>
-        <% end %>
-        <%= pb_rails("body", props: { classname: "passphrase-toggle-icon hide-icon", color: "light", dark: object.dark }) do %>
-          <%= pb_rails("icon", props: { aria: { label: "eye icon" }, icon: "eye" }) %>
-        <% end %>
-      </span>
-    </div>
-  </label>
-<% end %>
+  <%= react_component('Passphrase', object.passphrase_options, class: object.classname, **combined_html_options) %>

data/app/pb_kits/playbook/pb_passphrase/passphrase.rb

@@ -11,69 +11,12 @@ module Playbook
                              default: "always"
       prop :tips, type: Playbook::Props::Array, default: []
       prop :required_indicator, type: Playbook::Props::Boolean, default: false
-      prop :required, type: Playbook::Props::Boolean, default: false
-      prop :min_length, type: Playbook::Props::Number
       prop :value, type: Playbook::Props::String
 
       def classname
         generate_classname("pb_passphrase")
       end
 
-      def data
-        Hash(values[:data]).merge(pb_passphrase: true)
-      end
-
-      def display_label
-        return label if label.present?
-        return "Confirm Passphrase" if confirmation
-
-        "Passphrase"
-      end
-
-      def show_label?
-        display_label.present?
-      end
-
-      def show_required_indicator?
-        required_indicator || required
-      end
-
-      def show_tips?
-        tips.present? && !confirmation
-      end
-
-      def tips_trigger_id
-        @tips_trigger_id ||= "passphrase-tips-trigger-#{dom_id_suffix}"
-      end
-
-      def tips_tooltip_id
-        @tips_tooltip_id ||= "passphrase-tips-tooltip-#{dom_id_suffix}"
-      end
-
-      def tips_button_class
-        classes = %w[passphrase-popover passphrase-tips]
-        classes << "show-below-#{show_tips_below}" unless show_tips_below == "always"
-        classes.join(" ")
-      end
-
-      def text_input_props
-        {
-          dark: dark,
-          data: text_input_data,
-          margin_bottom: "none",
-          classname: "passphrase-text-input",
-          placeholder: "Enter a passphrase...",
-          required: required,
-          type: "password",
-          value: value,
-          input_options: merged_input_options,
-        }.compact
-      end
-
-      def text_input_data
-        input_props.with_indifferent_access.fetch(:data, {}).to_h
-      end
-
       def passphrase_options
         {
           dark: dark,
@@ -88,19 +31,6 @@ module Playbook
           value: value,
         }.compact
       end
-
-    private
-
-      def dom_id_suffix
-        id.presence || object_id
-      end
-
-      def merged_input_options
-        options = input_props.deep_dup.with_indifferent_access.except(:data)
-        options[:class] = [options[:class], options.delete(:classname)].compact.join(" ").strip.presence
-        options[:minlength] = min_length if min_length.present?
-        options
-      end
     end
   end
 end

data/app/pb_kits/playbook/pb_select/select.rb

@@ -50,9 +50,18 @@ module Playbook
       def validation_data
         fields = input_options[:data] || {}
         fields[:message] = validation_message unless validation_message.blank?
+        dv = filter_reset_default_value
+        fields[:default_value] = dv if dv.present?
         fields
       end
 
+      def filter_reset_default_value
+        s = selected
+        return if s.blank?
+
+        s.join(",")
+      end
+
       # Same resolved id as the native +<select>+ (+all_attributes[:id]+) for label +for+.
       def select_input_id
         all_attributes[:id].presence