playbook_ui 16.3.0.pre.alpha.fixdatepickermonthsdropdownreset14888 → 16.3.0.pre.alpha.play274314771

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3f5c3e22d3872b4b287c759a888ebc1b7d3ee7b9eeeb50d1262033cdb041231b
-  data.tar.gz: 7e6dca0282b5a4cb6faf9b9e30916259cf976d44b2bd283d689c0378738e881a
+  metadata.gz: 3ddd7f3e4ea23c36481d2c86c6c225b12f374da8dabd1920092b73f8de3dacd9
+  data.tar.gz: cfec86cf912e4340e25b9e9c6d7193f34422b78b3ec2bd9447d2d71d140534f7
 SHA512:
-  metadata.gz: e6d79cf66190fe54c8d4c53d72b7afbc5cc37ffde9212d51ad9492c0d1ee52e294aeb9f7386f701d34f5a63a1a97282cbcaf56a65e1e0543ee7968fbd47b8487
-  data.tar.gz: 33fdb0d49f3577c1d2002b104e4df03e64c7ebe032e8b7f5c511c438e6fb1b9dec79c4fa3ee51c65638930ea5a2e98ee6af99d49c32c4def1d7c98f352454a69
+  metadata.gz: caae25a59bcb8c663dda62594ea096c85e14345a395536592384fe693b04fd5beb414d326920f7a1d3d914d2b6b014abf5e9d07b97c6c766c70731daa3c51b40
+  data.tar.gz: 3748d9efc6844631946106421191872b06c2e5ad6d0d38aa19d2947cc9abb4083cfb086b1d4a212b498ca39a8a0eea8cd32b817764127033bacf2a84480661bf

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

@@ -1,6 +1,5 @@
 import PbEnhancedElement from "../pb_enhanced_element";
 import { updateSelectionActionBar } from "./advanced_table_action_bar";
-import { setArrowVisibility, toggleVisibility } from "../utilities/domHelpers";
 
 const ADVANCED_TABLE_SELECTOR = "[data-advanced-table]";
 const DOWN_ARROW_SELECTOR = "#advanced-table_open_icon";
@@ -21,18 +20,10 @@ export default class PbAdvancedTable extends PbEnhancedElement {
     this.childRowsMap = new Map();
   }
 
-  get table() {
-    return this.cachedTable || (this.cachedTable = this.element.closest("table"));
-  }
-
-  get mainTable() {
-    return this.cachedMainTable || (this.cachedMainTable = this.element.closest(".pb_advanced_table"));
-  }
-
   // Fetch and cache child rows for a given parent row ID
   childRowsFor(parentId) {
     if (!this.childRowsMap.has(parentId)) {
-      const table = this.table;
+      const table = this.element.closest("table");
       const rows = Array.from(
         table.querySelectorAll(`tr[data-row-parent="${parentId}"]`)
       );
@@ -42,8 +33,7 @@ export default class PbAdvancedTable extends PbEnhancedElement {
   }
 
   updateTableSelectedRowsAttribute() {
-    const mainTable = this.mainTable;
-    if (!mainTable) return;
+    const mainTable = this.element.closest(".pb_advanced_table");
     mainTable.dataset.selectedRows = JSON.stringify(
       Array.from(PbAdvancedTable.selectedRows)
     );
@@ -51,8 +41,7 @@ export default class PbAdvancedTable extends PbEnhancedElement {
 
   // Recalculate selected count based on all checked checkboxes
   recalculateSelectedCount() {
-    const table = this.table;
-    if (!table) return;
+    const table = this.element.closest("table");
     
     // Get all checkboxes that could be part of the selection
     // This includes row checkboxes and any parent checkboxes that might be programmatically checked
@@ -106,7 +95,7 @@ export default class PbAdvancedTable extends PbEnhancedElement {
     });
     
     this.updateTableSelectedRowsAttribute();
-    updateSelectionActionBar(this.mainTable, PbAdvancedTable.selectedRows.size);
+    updateSelectionActionBar(table.closest(".pb_advanced_table"), PbAdvancedTable.selectedRows.size);
     
     // Sync header select-all state
     if (selectAllCheckbox) {
@@ -150,7 +139,7 @@ export default class PbAdvancedTable extends PbEnhancedElement {
 
     this.updateTableSelectedRowsAttribute();
 
-    const table = this.table;
+    const table = checkbox.closest("table");
     const selectAllCheckbox = table.querySelector("#select-all-rows");
 
     if (selectAllCheckbox) {
@@ -164,7 +153,7 @@ export default class PbAdvancedTable extends PbEnhancedElement {
       );
       selectAllInput.checked = allChecked;
     }
-    updateSelectionActionBar(this.mainTable, PbAdvancedTable.selectedRows.size);
+    updateSelectionActionBar(table.closest(".pb_advanced_table"), PbAdvancedTable.selectedRows.size);
   }
 
   get target() {
@@ -172,11 +161,10 @@ export default class PbAdvancedTable extends PbEnhancedElement {
   }
 
   connect() {
-    const table = this.table;
-    if (!table) return;
+    const table = this.element.closest("table");
 
     this.hideCloseIcon();
-    const mainTable = this.mainTable;
+    const mainTable = this.element.closest(".pb_advanced_table");
     
     // This so it is hidden on first render
     if (mainTable) {
@@ -283,7 +271,9 @@ export default class PbAdvancedTable extends PbEnhancedElement {
       }
 
       // Find direct child rows
-      const childRows = this.childRowsFor(toggleBtn.id);
+      const childRows = Array.from(
+        table.querySelectorAll(`[data-row-parent="${toggleBtn.id}"]`)
+      );
       this.toggleElement(childRows);
 
       // Restore original element context
@@ -294,8 +284,7 @@ export default class PbAdvancedTable extends PbEnhancedElement {
   }
 
   addBorderRadiusOnLastVisibleRow() {
-    const parentElement = this.mainTable;
-    if (!parentElement) return;
+    const parentElement = this.element.closest(".pb_advanced_table");
 
     const table = document.getElementById(parentElement.id);
 
@@ -327,9 +316,11 @@ export default class PbAdvancedTable extends PbEnhancedElement {
     elements.forEach((elem) => {
       elem.style.display = "table-row";
       elem.classList.add("is-visible");
-      const childRowsAll = this.table.querySelectorAll(
-        `[data-advanced-table-content^="${elem.dataset.advancedTableContent}-"]`
-      );
+      const childRowsAll = this.element
+        .closest("table")
+        .querySelectorAll(
+          `[data-advanced-table-content^="${elem.dataset.advancedTableContent}-"]`
+        );
 
       childRowsAll.forEach((childRow) => {
         const dataContent = childRow.dataset.advancedTableContent;
@@ -391,7 +382,8 @@ export default class PbAdvancedTable extends PbEnhancedElement {
       const currentDepth = parseInt(elem.dataset.rowDepth);
       if (childrenArray.length > currentDepth) {
         // Find the child rows corresponding to this parent row
-        const childRows = this.table
+        const childRows = this.element
+          .closest("table")
           .querySelectorAll(
             `[data-advanced-table-content^="${elem.dataset.advancedTableContent}-"]`
           );
@@ -409,39 +401,28 @@ export default class PbAdvancedTable extends PbEnhancedElement {
 
     const isVisible = elements[0].classList.contains("is-visible");
 
-    const isExpanded = toggleVisibility({
-      isVisible,
-      onHide: () => this.hideElement(elements),
-      onShow: () => this.showElement(elements),
-    });
-
-    isExpanded ? this.displayUpArrow() : this.displayDownArrow();
+    isVisible ? this.hideElement(elements) : this.showElement(elements);
+    isVisible ? this.displayDownArrow() : this.displayUpArrow();
 
     const row = this.element.closest("tr");
     if (row) {
-      row.classList.toggle("bg-silver", isExpanded);
-      row.classList.toggle("pb-bg-row-white", !isExpanded);
+      row.classList.toggle("bg-silver", !isVisible);
+      row.classList.toggle("pb-bg-row-white", isVisible);
     }
 
     this.addBorderRadiusOnLastVisibleRow();
   }
 
   displayDownArrow() {
-    setArrowVisibility({
-      rootElement: this.element,
-      downSelector: DOWN_ARROW_SELECTOR,
-      upSelector: UP_ARROW_SELECTOR,
-      showDownArrow: true,
-    });
+    this.element.querySelector(DOWN_ARROW_SELECTOR).style.display =
+      "inline-block";
+    this.element.querySelector(UP_ARROW_SELECTOR).style.display = "none";
   }
 
   displayUpArrow() {
-    setArrowVisibility({
-      rootElement: this.element,
-      downSelector: DOWN_ARROW_SELECTOR,
-      upSelector: UP_ARROW_SELECTOR,
-      showDownArrow: false,
-    });
+    this.element.querySelector(UP_ARROW_SELECTOR).style.display =
+      "inline-block";
+    this.element.querySelector(DOWN_ARROW_SELECTOR).style.display = "none";
   }
 
   static handleToggleAllHeaders(element) {

data/app/pb_kits/playbook/pb_button/_button_mixins.scss

@@ -57,7 +57,7 @@ $pb_button_border_width: 0px;
   }
 
   .loading-icon {
-    position: static;
+    position: absolute;
     display: none;
   }
   .pb_button_content {
@@ -158,15 +158,10 @@ $pb_button_border_width: 0px;
 // Loading =====================
 @mixin pb_button_loading($loading: false) {
   @if $loading == true {
-    display: inline-grid;
-    place-items: center;
-
     .loading-icon {
-      grid-area: 1 / 1;
       display: block;
     }
     .pb_button_content {
-      grid-area: 1 / 1;
       visibility: hidden;
     }
   }

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

@@ -1,5 +1,4 @@
 import PbEnhancedElement from '../pb_enhanced_element'
-import { getElementHeight, setArrowVisibility, toggleVisibility } from '../utilities/domHelpers'
 
 const MAIN_SELECTOR = '[data-collapsible-main]'
 const CONTENT_SELECTOR = '[data-collapsible-content]'
@@ -44,7 +43,15 @@ export default class PbCollapsible extends PbEnhancedElement {
   }
 
   showElement(elem) {
-    const height = getElementHeight(elem)
+  // Get the natural height of the element
+    const getHeight = () => {
+      elem.style.display = 'block'
+      const height = elem.scrollHeight + 'px' // Get it's height
+      elem.style.display = '' //  Hide it again
+      return height
+    }
+
+    const height = getHeight()
     elem.classList.add('is-visible')
     elem.style.height = height // Update the max-height
     elem.style.overflow = "hidden"
@@ -75,22 +82,26 @@ export default class PbCollapsible extends PbEnhancedElement {
   }
 
   toggleElement(elem) {
-    const isExpanded = toggleVisibility({
-      isVisible: elem.classList.contains('is-visible'),
-      onHide: () => this.hideElement(elem),
-      onShow: () => this.showElement(elem),
-    })
-
-    isExpanded ? this.displayUpArrow() : this.displayDownArrow()
+    if (elem.classList.contains('is-visible')) {
+      this.hideElement(elem)
+      this.displayDownArrow()
+      return
+    }
+    // Otherwise, show it
+    this.showElement(elem)
+    this.displayUpArrow()
   }
 
   toggleArrows(showDownArrow) {
-    setArrowVisibility({
-      rootElement: this.element,
-      downSelector: DOWN_ARROW_SELECTOR,
-      upSelector: UP_ARROW_SELECTOR,
-      showDownArrow,
-    })
+    const downArrow = this.element.querySelector(DOWN_ARROW_SELECTOR);
+    const upArrow = this.element.querySelector(UP_ARROW_SELECTOR);
+  
+    if (downArrow) {
+      downArrow.style.display = showDownArrow ? 'inline-block' : 'none';
+    }
+    if (upArrow) {
+      upArrow.style.display = showDownArrow ? 'none' : 'inline-block';
+    }
   }
   
   displayDownArrow() {

data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts

@@ -535,9 +535,7 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
       // Code block triggers after form.reset() is called and executed
       setTimeout(() => {
         dropdown.value = picker.currentYear
-        if (picker.monthsDropdownContainer) {
-          picker.monthsDropdownContainer.value = picker.currentMonth
-        }
+        picker.monthsDropdownContainer.value = picker.currentMonth
 
         /* Reset date picker to default value on form.reset() */
         if (defaultDate){

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

@@ -30,6 +30,7 @@ const DialogCompound = () => {
               label="Description"
               rows={4}
           />
+          <Caption marginBottom="xs">{'Description'}</Caption>
           <br />
           <Caption>
             {

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_default.html.erb

@@ -1,20 +1,11 @@
 <%= pb_rails("button", props: { text: "Open Dialog", data: {"open-dialog": "dialog-1"} }) %>
 
-<%= pb_rails("dialog", props: {
-        id:"dialog-1",
-        size: "md",
-        title: "Header Title is the Title Prop"
-}) do %>
-    <%= pb_rails("dialog/dialog_body") do %>
-        <%= pb_rails("button", props: { aria: { label: "Loading" }, loading: true, margin_right: "lg", text: "Button Primary" }) %>
-        <div style="height: 800px; background-color: lightgray;"></div>
-        <%= pb_rails("button", props: { loading: true, text: "Loading..." }) %>
-    <% end %>
-
-    <%= pb_rails("dialog/dialog_footer") do %>
-        <%= pb_rails("flex", props: { spacing: "between", padding_x: "md", padding_bottom: "md", padding: "sm" }) do %>
-            <%= pb_rails("button", props: { loading: true, text: "Send My Issue" }) %>
-            <%= pb_rails("button", props: { text: "Back", variant: "link", data: {"close-dialog": "dialog-1"} }) %>
-        <% end %>
-    <% end %>
-<% end %>
+<%= pb_rails("dialog", props: { 
+    id:"dialog-1", 
+    size: "sm", 
+    title: "Header Title is the Title Prop", 
+    text: "Hello Body Text, Nice to meet ya.", 
+    cancel_button: "Cancel Button", 
+    confirm_button: "Okay", 
+    confirm_button_id: "confirm-button-1"
+}) %>

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_default.jsx

@@ -12,35 +12,16 @@ const DialogDefault = () => {
     <>
       <Button onClick={open}>{'Open Dialog'}</Button>
       <Dialog
+          cancelButton="Cancel Button"
+          confirmButton="Okay"
           onCancel={close}
           onClose={close}
           onConfirm={close}
           opened={isOpen}
-          size="md"
+          size="sm"
+          text="Hello Body Text, Nice to meet ya."
           title="Header Title is the Title Prop"
-      >
-        <Dialog.Body>
-            <Button
-                aria={{ label: 'Loading' }}
-                loading
-                text="Button Primary"
-            />
-            <div style={{height: '800px', backgroundColor: 'lightgray'}} />
-            <Button
-                loading
-                text="Loading..."
-            />
-          </Dialog.Body>
-          <Dialog.Footer>
-            <Button
-                loading
-                text="Send My Issue"
-            />
-            <Button  variant="link">
-              {"Back"}
-            </Button>
-          </Dialog.Footer>
-        </Dialog>
+      />
     </>
   )
 }

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height_placement.jsx

@@ -5,7 +5,7 @@ import Button from '../../pb_button/_button'
 import Dialog from '../../pb_dialog/_dialog'
 import Flex from '../../pb_flex/_flex'
 import Caption from '../../pb_caption/_caption'
-import Textarea from "../../pb_textarea/_textarea";
+import Textarea from "../../pb_textarea";
 import Typeahead from '../../pb_typeahead/_typeahead'
 
 const useDialog = (visible = false) => {
@@ -77,7 +77,7 @@ const DialogFullHeightPlacement = () => {
             </Dialog.Header>
             <Dialog.Body>
               <Textarea
-                  id={`default-example-2-${index}`}
+                  id="default-example-2"
                   label="Description"
                   rows={4}
               />

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

@@ -15,9 +15,6 @@
 .pb_dropdown_quickpick,
 .pb_dropdown_default_separators_hidden,
 .pb_dropdown_subtle_separators_hidden {
-  label {
-    display: block !important;
-  }
   .dropdown_wrapper {
     .dropdown_trigger_wrapper,
     .dropdown_trigger_wrapper_focus,

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

@@ -441,7 +441,6 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
                 value={{
                     activeStyle,
                     autocomplete,
-                    blankSelection,
                     clearable,
                     dropdownContainerRef,
                     error,

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

@@ -25,7 +25,6 @@ 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)

data/app/pb_kits/playbook/pb_dropdown/dropdown.rb

@@ -39,9 +39,6 @@ module Playbook
                                default: ""
       prop :clearable, type: Playbook::Props::Boolean,
                        default: true
-      prop :close_on_click, type: Playbook::Props::Enum,
-                            values: %w[outside inside any],
-                            default: "any"
       prop :start_date_id, type: Playbook::Props::String,
                            default: "start_date_id"
       prop :start_date_name, type: Playbook::Props::String,
@@ -62,7 +59,6 @@ module Playbook
           pb_dropdown_multi_select: multi_select,
           pb_dropdown_variant: variant,
           pb_dropdown_clearable: clearable,
-          pb_dropdown_close_on_click: close_on_click,
           form_pill_props: form_pill_props.to_json,
           start_date_id: variant == "quickpick" ? start_date_id : nil,
           end_date_id: variant == "quickpick" ? end_date_id : nil,