playbook_ui 14.20.0.pre.alpha.PLAY2214checkboxhiddeninput8052 → 14.20.0.pre.alpha.PLAY21817891

data/lib/playbook/version.rb

@@ -2,5 +2,5 @@
 
 module Playbook
   PREVIOUS_VERSION = "14.20.0"
-  VERSION = "14.20.0.pre.alpha.PLAY2214checkboxhiddeninput8052"
+  VERSION = "14.20.0.pre.alpha.PLAY21817891"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 14.20.0.pre.alpha.PLAY2214checkboxhiddeninput8052
+  version: 14.20.0.pre.alpha.PLAY21817891
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-06-02 00:00:00.000000000 Z
+date: 2025-05-27 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -340,8 +340,6 @@ files:
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pagination.md
 - 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_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
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_responsive.md
@@ -715,7 +713,6 @@ files:
 - app/pb_kits/playbook/pb_checkbox/docs/_checkbox_checked.jsx
 - app/pb_kits/playbook/pb_checkbox/docs/_checkbox_custom.html.erb
 - app/pb_kits/playbook/pb_checkbox/docs/_checkbox_custom.jsx
-- app/pb_kits/playbook/pb_checkbox/docs/_checkbox_custom_rails.md
 - app/pb_kits/playbook/pb_checkbox/docs/_checkbox_default.html.erb
 - app/pb_kits/playbook/pb_checkbox/docs/_checkbox_default.jsx
 - app/pb_kits/playbook/pb_checkbox/docs/_checkbox_default_swift.md
@@ -724,11 +721,8 @@ files:
 - app/pb_kits/playbook/pb_checkbox/docs/_checkbox_error.html.erb
 - app/pb_kits/playbook/pb_checkbox/docs/_checkbox_error.jsx
 - app/pb_kits/playbook/pb_checkbox/docs/_checkbox_error_swift.md
-- app/pb_kits/playbook/pb_checkbox/docs/_checkbox_form.html.erb
-- app/pb_kits/playbook/pb_checkbox/docs/_checkbox_form.md
 - app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate.html.erb
 - app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate.jsx
-- app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate_rails.md
 - app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate_swift.md
 - app/pb_kits/playbook/pb_checkbox/docs/_checkbox_options.html.erb
 - app/pb_kits/playbook/pb_checkbox/docs/_checkbox_props_swift.md
@@ -737,7 +731,6 @@ files:
 - app/pb_kits/playbook/pb_checkbox/docs/_description.md
 - app/pb_kits/playbook/pb_checkbox/docs/example.yml
 - app/pb_kits/playbook/pb_checkbox/docs/index.js
-- app/pb_kits/playbook/pb_checkbox/index.js
 - app/pb_kits/playbook/pb_circle_chart/ChartsTypes.ts
 - app/pb_kits/playbook/pb_circle_chart/_circle_chart.scss
 - app/pb_kits/playbook/pb_circle_chart/_circle_chart.tsx
@@ -1331,8 +1324,6 @@ files:
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection.jsx
 - 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_close_on_select.jsx
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_close_on_select.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
@@ -2420,9 +2411,6 @@ files:
 - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_default.html.erb
 - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_default.jsx
 - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_default.md
-- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_exclude_countries.html.erb
-- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_exclude_countries.jsx
-- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_exclude_countries.md
 - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_format.html.erb
 - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_format.jsx
 - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_format.md
@@ -2674,9 +2662,6 @@ files:
 - app/pb_kits/playbook/pb_select/docs/_select_blank.jsx
 - app/pb_kits/playbook/pb_select/docs/_select_custom_select.html.erb
 - app/pb_kits/playbook/pb_select/docs/_select_custom_select.jsx
-- app/pb_kits/playbook/pb_select/docs/_select_custom_select_subheaders.html.erb
-- app/pb_kits/playbook/pb_select/docs/_select_custom_select_subheaders.jsx
-- app/pb_kits/playbook/pb_select/docs/_select_custom_select_subheaders.md
 - app/pb_kits/playbook/pb_select/docs/_select_default.html.erb
 - app/pb_kits/playbook/pb_select/docs/_select_default.jsx
 - app/pb_kits/playbook/pb_select/docs/_select_default_swift.md
@@ -3607,11 +3592,11 @@ files:
 - app/pb_kits/playbook/utilities/test/globalProps/truncate.test.js
 - app/pb_kits/playbook/utilities/text.ts
 - app/pb_kits/playbook/utilities/validEmojiChecker.ts
-- dist/chunks/_typeahead-CoOpeYom.js
-- dist/chunks/_weekday_stacked-BppvLxTS.js
+- dist/chunks/_typeahead-BmOWdDtp.js
+- dist/chunks/_weekday_stacked-CvcuQyr9.js
 - dist/chunks/lazysizes-B7xYodB-.js
-- dist/chunks/lib-D7Va7yqa.js
-- dist/chunks/pb_form_validation-DSkdRDMf.js
+- dist/chunks/lib-D5R1BjUn.js
+- dist/chunks/pb_form_validation-BZ2AVAi_.js
 - dist/chunks/vendor.js
 - dist/menu.yml
 - dist/playbook-doc.js

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

@@ -1,57 +0,0 @@
-import React, { useState } from "react"
-import AdvancedTable from '../_advanced_table'
-import MOCK_DATA from "./advanced_table_mock_data_with_id.json"
-
-const AdvancedTableRowPinning = (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",
-    },
-  ]
-
-  const [pinnedRows, setPinnedRows] = useState({top: ["8", "9", "10", "11", "12", "13", "14"]})
-
-  return (
-    <div>
-      <AdvancedTable
-          columnDefinitions={columnDefinitions}
-          maxHeight="xs"
-          pinnedRows={{value: pinnedRows, onChange: setPinnedRows}}
-          tableData={MOCK_DATA}
-          tableProps={{sticky: true}}
-          {...props}
-      >
-        <AdvancedTable.Header enableSorting />
-        <AdvancedTable.Body />
-      </AdvancedTable>
-    </div>
-  )
-}
-
-export default AdvancedTableRowPinning

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

@@ -1,5 +0,0 @@
-Use the `pinnedRows` 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 reorganizing via sorting.
-
-**NOTE:** This prop is in Beta. Current Requirements for V1:
-- Sticky header required: Pinned rows must be used with `sticky: true` via `tableProps` (works with both responsive and non-responsive tables)
-- Row ids required: Pass an array of row ids to the `top` property. For expandable rows, both parent and all its child row ids must be included individually

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_custom_rails.md

@@ -1 +0,0 @@
-When using a custom checkbox wrapped in the Checkbox kit, hidden inputs are not automatically included and cannot be prop enabled. Manually add a hidden input before the checkbox if necessary to submit a value when the checkbox is unchecked (as is standard in Rails forms).

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_form.html.erb

@@ -1,22 +0,0 @@
-
-<%= pb_form_with(scope: :example, url: "", method: :get) do |form| %>
-  <%=pb_rails("flex", props: { gap: "sm", orientation: "column"}) do %>
-    <%= pb_rails("checkbox" , props: {
-      text: "1. pb_rails(\"checkbox\") Checkbox from kit",
-      value: "checkbox-value",
-      name: "checkbox-name",
-      hidden_input: true
-      }) %>
-    <%= form.check_box :example_checkbox,
-      data: { field1: "value1", field2: "value2" },
-      props: { text: "2. form.check_box Checkbox from Form Builder" },
-      unchecked_value: "no",
-      id: "checkbox-id",
-      name: "checkbox-name",
-      class: "checkbox-class"
-    %>
-    <%= form.actions do |action| %>
-      <%= action.button props: { type: "submit", text: "Submit", variant: "primary" } %>
-    <% end %>   
-  <% end %>
-<% end %>

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_form.md

@@ -1,5 +0,0 @@
-The way to access hidden inputs for form submission depends on which version of the kit being used within the form context.
-
-If using the Rails Checkbox version of the kit, set `hidden_input: true`. Inspect Checkbox #1 in the example above to see the hidden input in the DOM. 
-
-If using the Form Builder version of the kit (reference the [Form kit page](https://playbook.powerapp.cloud/kits/form) for more on these), the hidden input will appear if the input has a set `unchecked_value`. Inspect Checkbox #2 in the example above (and the two checkbox examples on the Form kit page) to see the hidden input in the DOM. See the [Rails check_box FormHelper docs](https://api.rubyonrails.org/classes/ActionView/Helpers/FormHelper.html#method-i-check_box) for more.

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate_rails.md

@@ -1 +0,0 @@
-If you want to use indeterminate, "check/uncheck all" checkboxes, add `indeterminate_main: true` and an `id` to the main checkbox. Then, add an `indeterminate_parent` prop with the main checkbox's `id` to the children checkboxes.

data/app/pb_kits/playbook/pb_checkbox/index.js

@@ -1,56 +0,0 @@
-import PbEnhancedElement from "../pb_enhanced_element"
-
-const INDETERMINATE_MAIN_CHECKBOX_SELECTOR = "[data-pb-checkbox-indeterminate-main='true']"
-
-export default class PbCheckbox extends PbEnhancedElement {
-  static get selector() {
-    return INDETERMINATE_MAIN_CHECKBOX_SELECTOR
-  }
-
-  connect() {
-    const mainCheckboxWrapper = this.element;
-    const mainCheckbox = mainCheckboxWrapper.querySelector('input')
-    const childCheckboxes = document.querySelectorAll(`[data-pb-checkbox-indeterminate-parent="${this.element.id}"] input[type="checkbox"]`);
-
-    const updateMainCheckbox = () => {
-      // Count the number of checked child checkboxes
-      const checkedCount = Array.from(childCheckboxes).filter(cb => cb.checked).length;
-      // Determine if the main checkbox should be in an indeterminate state
-      const indeterminate = checkedCount > 0 && checkedCount < childCheckboxes.length;
-      
-      // Set the main checkbox states
-      mainCheckbox.indeterminate = indeterminate;
-      mainCheckbox.checked = checkedCount > 0;
-
-      // Determine the main checkbox label based on the number of checked checkboxes
-      const text = checkedCount === 0 ? 'Check All' : 'Uncheck All';
-
-      // Determine the icon class to add and remove based on the number of checked checkboxes
-      const iconClassToAdd = checkedCount === 0 ? 'pb_checkbox_checkmark' : 'pb_checkbox_indeterminate';
-      const iconClassToRemove = checkedCount === 0 ? 'pb_checkbox_indeterminate' : 'pb_checkbox_checkmark';
-
-      // Update main checkbox label
-      mainCheckboxWrapper.getElementsByClassName('pb_body_kit')[0].textContent = text;
-      
-      // Add and remove the icon class to the main checkbox wrapper
-      mainCheckboxWrapper.querySelector('[data-pb-checkbox-icon-span]').classList.add(iconClassToAdd);
-      mainCheckboxWrapper.querySelector('[data-pb-checkbox-icon-span]').classList.remove(iconClassToRemove);
-      
-      // Toggle the visibility of the checkbox icon based on the indeterminate state
-      mainCheckboxWrapper.getElementsByClassName("indeterminate_icon")[0].classList.toggle('hidden', !indeterminate);
-      mainCheckboxWrapper.getElementsByClassName("check_icon")[0].classList.toggle('hidden', indeterminate);
-    };
-
-    // Set indeterminate icon on main checkbox if initial children checkboxes are checked
-    updateMainCheckbox();
-
-    this.element.querySelector('input').addEventListener('change', function() {
-      childCheckboxes.forEach(cb => cb.checked = this.checked);
-      updateMainCheckbox();
-    });
-
-    childCheckboxes.forEach(cb => {
-      cb.addEventListener('change', updateMainCheckbox);
-    });
-  }
-}

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

@@ -1,42 +0,0 @@
-import React from 'react'
-import Dropdown from '../../pb_dropdown/_dropdown'
-
-const DropdownCloseOnSelect = (props) => {
-
-  const options = [
-    {
-      label: "United States",
-      value: "United States",
-    },
-    {
-      label: "Canada",
-      value: "Canada",
-    },
-    {
-      label: "Pakistan",
-      value: "Pakistan",
-    }
-  ];
-
-
-  return (
-  <div>
-    <Dropdown
-        closeOnSelection={false}
-        label="Default"
-        options={options}
-        {...props}
-    />
-    <br />
-    <Dropdown
-        closeOnSelection={false}
-        label="Multi Select"
-        multiSelect
-        options={options}
-        {...props}
-    />
-  </div>
-  )
-}
-
-export default DropdownCloseOnSelect

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

@@ -1 +0,0 @@
-By default, the dropdown menu will close when a selection is made. You can prevent this behavior by using the `closeOnSelection` prop, which will leave the menu open after a selection is made when set to 'false'.

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_exclude_countries.html.erb

@@ -1,4 +0,0 @@
-<%= pb_rails("phone_number_input", props: {
-    initial_country: 'gb',
-    exclude_countries: ['us', 'br']
-}) %>

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_exclude_countries.jsx

@@ -1,15 +0,0 @@
-import React from 'react'
-import PhoneNumberInput from '../../pb_phone_number_input/_phone_number_input'
-
-const PhoneNumberInputExcludeCountries = (props) => (
-  <>
-    <PhoneNumberInput
-        excludeCountries={['us', 'br']}
-        id='exclude'
-        initialCountry='gb'
-        {...props}
-    />
-  </>
-)
-
-export default PhoneNumberInputExcludeCountries

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_exclude_countries.md

@@ -1 +0,0 @@
-Excluding countries removes the selected countries from the dropdown.

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

@@ -1,12 +0,0 @@
-<%= pb_rails("select", props: { label: "Favorite Animal" }) do %>
-  <select name="animal" id="animal">
-    <optgroup label="Mammal">
-      <option value="1">Cat</option>
-      <option value="2">Dog</option>
-    </optgroup>
-    <optgroup label="Amphibian">
-      <option value="3">Frog</option>
-      <option value="4">Salamander</option>
-    </optgroup>
-  </select>
-<% end %>

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

@@ -1,31 +0,0 @@
-import React from 'react'
-
-import Select from '../_select'
-
-const SelectCustomSelectSubheaders = (props) => {
-  return (
-    <div>
-      <Select
-          label="Favorite Animal"
-          {...props}
-      >
-        <select
-            id="animal"
-            name="animal"
-            {...props}
-        >
-          <optgroup label="Mammal">
-            <option value="1">{'Cat'}</option>
-            <option value="2">{'Dog'}</option>
-          </optgroup>
-          <optgroup label="Amphibian">
-            <option value="3">{'Frog'}</option>
-            <option value="4">{'Salamander'}</option>
-          </optgroup>
-        </select>
-      </Select>
-    </div>
-  )
-}
-
-export default SelectCustomSelectSubheaders

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

@@ -1 +0,0 @@
-To create a select with non-selectable subheaders, use a Custom Select component to render a native `<select>` containing `<optgroup>` elements. The [optgroup HTML element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/optgroup) groups related options under a non-selectable label in the dropdown.