RubyGems - playbook_ui - Versions diffs - 14.20.0.pre.alpha.PLAY2214checkboxhiddeninput8052 → 14.20.0.pre.alpha.PLAY21817891 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (65) hide show

data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownTrigger.tsx CHANGED Viewed

@@ -44,7 +44,6 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
   const {
     autocomplete,
-    closeOnSelection,
     filterItem,
     handleBackspace,
     handleChange,
@@ -55,7 +54,6 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
     isInputFocused,
     multiSelect,
     selected,
-    setIsDropDownClosed,
     setIsInputFocused,
     toggleDropdown,
   } = useContext(DropdownContext);
@@ -105,26 +103,11 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
     ? placeholder
     : "Select...";
-  // Click handler that respects closeOnSelection
-  const handleInputClick = (e: React.MouseEvent) => {
-    e.stopPropagation(); // keep the wrapper's handler from firing
-    if (isDropDownClosed) {
-      // Always open if closed
-      setIsDropDownClosed(false);
-    } else if (!closeOnSelection) {
-      // Keep open if closeOnSelection is false
-      return;
-    } else {
-      // Default behavior - toggle
-      toggleDropdown();
-    }
-  };
   return (
-    <div {...ariaProps}
-        {...dataProps}
+    <div {...ariaProps}
+        {...dataProps}
         {...htmlProps}
-        className={classes}
+        className={classes}
         id={id}
     >
       {
@@ -162,7 +145,7 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
                     {customDisplay ? (
                       <Flex align="center">
                         {customDisplay}
-                        <Body dark={dark}
+                        <Body dark={dark}
                             paddingLeft={`${joinedLabels ? "xs" : "none"}`}
                         >
                           {customDisplayPlaceholder}
@@ -181,7 +164,10 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
                           <input
                               className="dropdown_input"
                               onChange={handleChange}
-                              onClick={handleInputClick}
+                              onClick={(e) => {
+                                e.stopPropagation();// keep the wrapper’s handler from firing
+                                toggleDropdown();
+                              }}
                               onFocus={() => setIsInputFocused(true)}
                               onKeyDown={(e) => {
                                  handleKeyDown(e);
@@ -200,8 +186,8 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
                         )}
                         </>
                       ) : (
-                        <Body dark={dark}
-                            text={defaultDisplayPlaceholder}
+                        <Body dark={dark}
+                            text={defaultDisplayPlaceholder}
                         />
                       )
                     )}
@@ -209,7 +195,10 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
                       <input
                           className="dropdown_input"
                           onChange={handleChange}
-                          onClick={handleInputClick}
+                          onClick={(e) => {
+                            e.stopPropagation();// keep the wrapper’s handler from firing
+                            toggleDropdown();
+                          }}
                           onFocus={() => setIsInputFocused(true)}
                           onKeyDown={handleKeyDown}
                           placeholder={
@@ -234,7 +223,7 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
                         onClick: (e: Event) => {e.stopPropagation();handleWrapperClick()}
                       }}
                       key={`${isDropDownClosed ? "chevron-down" : "chevron-up"}`}
-                  >
+                  >
                   {
                     selectedArray.length > 0 && (
                       <div onClick={(e)=>{e.stopPropagation();handleBackspace()}}>

data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb CHANGED Viewed

@@ -101,7 +101,7 @@
   <%= form.dropdown_field :example_dropdown_validation_multi, props: { label: true, options: example_dropdown_options, multi_select: true, required: true } %>
   <%= form.select :example_select_validation, [ ["Yes", 1], ["No", 2] ], props: { label: true, blank_selection: "Select One...", required: true, validation_message: "Please, select an option." } %>
   <%= form.collection_select :example_collection_select_validation, example_collection, :value, :name, props: { label: true, blank_selection: "Select One...", required: true } %>
-  <%= form.check_box :example_checkbox_validation, props: { text: "Example Checkbox Validation", label: true, required: true }, checked_value: "1", unchecked_value: "0" %>
+  <%= form.check_box :example_checkbox, props: { text: "Example Checkbox", label: true, required: true } %>
   <%= form.date_picker :example_date_picker_2, props: { label: true, required: true, validation_message: "Please, select a date.", allow_input: true } %>
   <%= form.star_rating_field :example_star_rating_validation, props: { variant: "interactive", label: true, required: true } %>
   <%= form.time_zone_select_field :example_time_zone_select, ActiveSupport::TimeZone.us_zones, { default: "Eastern Time (US & Canada)" }, props: { label: true, blank_selection: "Select a Time Zone...", required: true } %>

data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx CHANGED Viewed

@@ -33,7 +33,6 @@ type PhoneNumberInputProps = {
   onChange?: (e: React.FormEvent<HTMLInputElement>) => void,
   onValidate?: Callback<boolean, void>,
   onlyCountries: string[],
-  excludeCountries: string[],
   preferredCountries?: string[],
   required?: boolean,
   value?: string,
@@ -89,7 +88,6 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
     },
     onValidate = () => null,
     onlyCountries = [],
-    excludeCountries = [],
     required = false,
     preferredCountries = [],
     value = "",
@@ -236,7 +234,6 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
   const fallbackCountry =
     preferredCountries.length > 0 ? preferredCountries[0] :
       onlyCountries.length > 0 ? onlyCountries.sort()[0] :
-      excludeCountries.length > 0 ? excludeCountries.sort()[0] :
         "af";
   useEffect(() => {
@@ -247,7 +244,6 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
       autoInsertDialCode: false,
       initialCountry: initialCountry || fallbackCountry,
       onlyCountries,
-      excludeCountries,
       countrySearch: countrySearch,
       fixDropdownWidth: false,
       formatAsYouType: formatAsYouType,

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_only_countries.jsx CHANGED Viewed

@@ -6,7 +6,7 @@ const PhoneNumberInputOnlyCountries = (props) => (
     <PhoneNumberInput
         id='only'
         onlyCountries={['us', 'br']}
-        {...props}
+        {...props}
     />
   </>
 )

data/app/pb_kits/playbook/pb_phone_number_input/docs/example.yml CHANGED Viewed

@@ -4,8 +4,7 @@ examples:
   - phone_number_input_default: Default
   - phone_number_input_preferred_countries: Preferred Countries
   - phone_number_input_initial_country: Initial Country
-  - phone_number_input_only_countries: Only Countries
-  - phone_number_input_exclude_countries: Exclude Countries
+  - phone_number_input_only_countries: Limited Countries
   - phone_number_input_validation: Form Validation
   - phone_number_input_clear_field: Clearing the Input Field
   - phone_number_input_access_input_element: Accessing the Input Element
@@ -16,9 +15,9 @@ examples:
   - phone_number_input_default: Default
   - phone_number_input_preferred_countries: Preferred Countries
   - phone_number_input_initial_country: Initial Country
-  - phone_number_input_only_countries: Only Countries
-  - phone_number_input_exclude_countries: Exclude Countries
+  - phone_number_input_only_countries: Limited Countries
   - phone_number_input_validation: Form Validation
   - phone_number_input_format: Format as You Type
   - phone_number_input_hidden_inputs: Hidden Inputs
   - phone_number_input_country_search: Country Search

data/app/pb_kits/playbook/pb_phone_number_input/docs/index.js CHANGED Viewed

@@ -2,7 +2,6 @@ export { default as PhoneNumberInputDefault } from './_phone_number_input_defaul
 export { default as PhoneNumberInputPreferredCountries } from './_phone_number_input_preferred_countries'
 export { default as PhoneNumberInputInitialCountry } from './_phone_number_input_initial_country'
 export { default as PhoneNumberInputOnlyCountries } from './_phone_number_input_only_countries'
-export { default as PhoneNumberInputExcludeCountries } from './_phone_number_input_exclude_countries'
 export { default as PhoneNumberInputValidation } from './_phone_number_input_validation'
 export { default as PhoneNumberInputClearField } from './_phone_number_input_clear_field'
 export { default as PhoneNumberInputAccessInputElement } from './_phone_number_input_access_input_element'

data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.rb CHANGED Viewed

@@ -15,8 +15,6 @@ module Playbook
                   default: ""
       prop :only_countries, type: Playbook::Props::Array,
                             default: []
-      prop :exclude_countries, type: Playbook::Props::Array,
-                               default: []
       prop :preferred_countries, type: Playbook::Props::Array,
                                  default: []
       prop :error, type: Playbook::Props::String,
@@ -46,7 +44,6 @@ module Playbook
           label: label,
           name: name,
           onlyCountries: only_countries,
-          excludeCountries: exclude_countries,
           preferredCountries: preferred_countries,
           required: required,
           value: value,

data/app/pb_kits/playbook/pb_popover/index.ts CHANGED Viewed

@@ -13,24 +13,19 @@ export default class PbPopover extends PbEnhancedElement {
   }
   moveTooltip() {
-    let container: HTMLElement | null = document.querySelector('body');
+    let container: HTMLElement | null;
     if (this.appendTo === "parent") {
-      container = this.element.parentElement && this.element.parentElement
+      container = this.element.parentElement;
     } else if (this.appendTo) {
-      container = document.querySelector(this.appendTo)
+      container = document.querySelector(this.appendTo);
     }
-    container.appendChild(this.tooltip);
+    (container || document.body).appendChild(this.tooltip);
   }
   connect() {
-    if (!this.triggerElement || !this.tooltip) {
-      console.warn('Popover requires both trigger and tooltip elements to be defined.')
-      return
-    }
     this.moveTooltip()
     this.popper = createPopper (this.triggerElement, this.tooltip, {
       placement: this.position as Placement,
       strategy: 'fixed',

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

@@ -8,7 +8,6 @@ examples:
   - select_required: Required Select Field
   - select_value_text_same: Equal option value and value text
   - select_custom_select: Custom Select
-  - select_custom_select_subheaders: Custom Select Subheaders
   - select_error: Select w/ Error
   - select_inline: Select Inline
   - select_inline_show_arrow: Select Inline (Always Show Arrow)
@@ -26,7 +25,6 @@ examples:
   - select_required: Required Select Field
   - select_value_text_same: Equal option value and value text
   - select_custom_select: Custom Select
-  - select_custom_select_subheaders: Custom Select Subheaders
   - select_error: Select w/ Error
   - select_inline: Select Inline
   - select_inline_show_arrow: Select Inline (Always Show Arrow)

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

@@ -11,4 +11,3 @@ export { default as SelectInlineShowArrow } from './_select_inline_show_arrow.js
 export { default as SelectInlineCompact } from './_select_inline_compact.jsx'
 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'

data/app/pb_kits/playbook/pb_table/docs/_table_with_selectable_rows.html.erb CHANGED Viewed

@@ -18,7 +18,7 @@
                     checked: true,
                     value: "checkbox-value",
                     name: "main-checkbox-selectable",
-                    indeterminate_main: true,
+                    indeterminate: true,
                     id: "checkbox-selectable"
                 }) %>
             <% end %>
@@ -33,7 +33,7 @@
         <% checkboxes.each_with_index do |checkbox, index| %>
             <%= pb_rails("table/table_row") do %>
                 <%= pb_rails("table/table_cell") do %>
-                    <%= pb_rails("checkbox", props: { checked: checkbox[:checked], id: "#{checkbox[:id]}-selectable-checkbox", name: "#{checkbox[:id]}-selectable-checkbox", on_change: "updateCheckboxes(#{index})", value: "check-box value", indeterminate_parent: "checkbox-selectable" }) %>
+                    <%= pb_rails("checkbox", props: { checked: checkbox[:checked], id: "#{checkbox[:id]}-selectable-checkbox", name: "#{checkbox[:id]}-selectable-checkbox", on_change: "updateCheckboxes(#{index})", value: "check-box value" }) %>
                 <% end %>
                 <%= pb_rails("table/table_cell") do %>
                     <%= pb_rails("image", props: { alt: "picture of a misty forest", size: "xs", url: "https://unsplash.it/500/400/?image=634" }) %>
@@ -45,4 +45,52 @@
             <% end %>
         <% end %>
     <% end %>
-<% end %>
+<% end %>
+<script>
+    document.addEventListener('DOMContentLoaded', function() {
+        const mainCheckboxWrapper = document.getElementById('checkbox-selectable');
+        const mainCheckbox = document.getElementsByName("main-checkbox-selectable")[0];
+        const childCheckboxes = document.querySelectorAll('input[type="checkbox"][id$="selectable-checkbox"]');
+        const deleteButton = document.getElementById('delete-button');
+        const updateDeleteButton = () => {
+            const anyChecked = Array.from(childCheckboxes).some(checkbox => checkbox.checked);
+            deleteButton.style.display = anyChecked ? 'block' : 'none';
+        };
+        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 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';
+          // 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);
+          updateDeleteButton();
+        };
+        mainCheckbox.addEventListener('change', function() {
+          childCheckboxes.forEach(cb => cb.checked = this.checked);
+          updateMainCheckbox();
+        });
+        childCheckboxes.forEach(cb => {
+          cb.addEventListener('change', updateMainCheckbox);
+        });
+    });
+</script>

data/app/pb_kits/playbook/pb_table/styles/_mobile_collapse.scss CHANGED Viewed

@@ -3,7 +3,7 @@
 @import "../../pb_caption/caption_mixin";
 @media only screen and (max-width: $screen-xs-max) {
-  [class^=pb_table]:not(.table-responsive-scroll) {
+  [class^=pb_table] {
     &.table-sm.table-collapse-sm,
     &.table-md.table-collapse-sm,
     &.table-lg.table-collapse-sm {