playbook_ui 14.5.0.pre.alpha.javascriptassets3939 → 14.5.0.pre.alpha.play1549upgradereactmodal4130

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c2ca4e8e8c3df9cdee7d02f68c3a611611053345876eb602efcdb91a16b4b076
-  data.tar.gz: fb337ad2f116c3f991969c8e59c06ba697828ae5af32cde1c01cb49bf06b6ee6
+  metadata.gz: 3b8a672af22a9302b6752bc50a7f480de55857b1b401f331acac9ec60e6e7f21
+  data.tar.gz: 23084a1367cd91f2ad2e5ccdf968694689451fc57ab9c5400158376760ef3731
 SHA512:
-  metadata.gz: c833f8f4d32140a79a374f9d2b2b642fff7341defb6fc781122288238ba851c62281797eb4307ad9859c3a5004fd756c37e25dea8aa73434ac0dc6952b345fe9
-  data.tar.gz: 468fdf29ec022656bedceb21a0f7e165aee5de1d469ebd541e09a0587a642f91dbee263fe8c7932b5cd06fa9cac6f73efd4852edeab71757d93f1ffd561638f2
+  metadata.gz: 4d17a50894a07d422cd6fc0f39f4f48a744806860a994cfd651942a0bdba1528ec7afeb3c5e7ff5298c4c720fd0b4215f3f220a4d873a0bbe8705136c2942890
+  data.tar.gz: 9ba7f171d87b4f0d37ec3cc39da147ddad9e3d21062c1d78cd74f692a49bf306379dc21b6e71d98692bfa580b164d8ffe2d90bc67e66bfa9feefc0eedb99a672

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

@@ -13,9 +13,20 @@ export default class PbAdvancedTable extends PbEnhancedElement {
   get target() {
     return document.querySelector(CONTENT_SELECTOR.replace("id", this.element.id))
   }
+  
+  static expandedRows = new Set()
+  static isCollapsing = false
 
   connect() {
     this.element.addEventListener('click', () => {
+      if (!PbAdvancedTable.isCollapsing) {
+        const isExpanded = this.element.querySelector(UP_ARROW_SELECTOR).style.display === 'inline-block'
+        if (!isExpanded) {
+          PbAdvancedTable.expandedRows.add(this.element.id)
+        } else {
+          PbAdvancedTable.expandedRows.delete(this.element.id)
+        }
+      }
       this.toggleElement(this.target)
     })
   }
@@ -75,4 +86,53 @@ export default class PbAdvancedTable extends PbEnhancedElement {
     this.element.querySelector(UP_ARROW_SELECTOR).style.display = 'inline-block'
     this.element.querySelector(DOWN_ARROW_SELECTOR).style.display = 'none'
   }
+
+  static handleToggleAllHeaders(element) {
+    const table = element.closest('.pb_table')
+    const firstLevelButtons = table.querySelectorAll('.pb_advanced_table_body > .pb_table_tr [data-advanced-table]')
+    
+    const expandedRows = Array.from(firstLevelButtons).filter(button => 
+      button.querySelector(UP_ARROW_SELECTOR).style.display === 'inline-block'
+    )
+  
+    if (expandedRows.length === firstLevelButtons.length) {
+      expandedRows.forEach(button => {
+        button.click()
+      })
+      this.expandedRows.clear()
+    } else {
+      firstLevelButtons.forEach(button => {
+        if (!this.expandedRows.has(button.id)) {
+          button.click()
+        }
+      })
+    }
+  }
+  static handleToggleAllSubRows(element, rowDepth) {
+    const parentElement = element.closest(".toggle-content")
+    const subrowButtons = parentElement.querySelectorAll('.depth-sub-row-' + rowDepth + ' [data-advanced-table]')
+    
+    const expandedSubRows = Array.from(subrowButtons).filter(button => 
+      button.querySelector(UP_ARROW_SELECTOR).style.display === 'inline-block'
+    )
+  
+    if (expandedSubRows.length === subrowButtons.length) {
+      expandedSubRows.forEach(button => {
+        button.click()
+      })
+    } else {
+      subrowButtons.forEach(button => {
+        if (!this.expandedRows.has(button.id)) {
+          button.click()
+        }
+      })
+    }
+  }
+}
+
+window.expandAllRows = (element) => {
+  PbAdvancedTable.handleToggleAllHeaders(element)
 }
+window.expandAllSubRows = (element, rowDepth) => {
+  PbAdvancedTable.handleToggleAllSubRows(element, rowDepth)
+}

data/app/pb_kits/playbook/pb_advanced_table/table_header.html.erb

@@ -13,12 +13,4 @@
                 <% end %>
             <% end %>
         <% end %>
-<% end %>
-
-<script type="text/javascript">
-    var expandAllRows = (element) => {
-        element.closest('.pb_table').querySelectorAll('.pb_advanced_table_body > .pb_table_tr [data-advanced-table]').forEach((button) => {
-            button.dispatchEvent(new Event('click'));
-        });
-    };
-</script>
+<% end %>

data/app/pb_kits/playbook/pb_advanced_table/table_subrow_header.html.erb

@@ -23,12 +23,4 @@
                 <% end %>
             <% end %>
         <% end %>
-<% end %>
-
-<script type="text/javascript">
-    var expandAllSubRows = (element, rowDepth) => {
-        element.closest(".toggle-content").querySelectorAll('.depth-sub-row-' + rowDepth + ' [data-advanced-table]').forEach((button) => {
-            button.dispatchEvent(new Event('click'));
-        });
-    };
-</script>
+<% end %>

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

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect } from "react";
+import React, { useState, useRef, useEffect, forwardRef, useImperativeHandle } from "react";
 import classnames from "classnames";
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
 import { globalProps } from "../utilities/globalProps";
@@ -38,7 +38,14 @@ type DropdownProps = {
     triggerRef?: any;
 };
 
-const Dropdown = (props: DropdownProps) => {
+interface DropdownComponent
+    extends React.ForwardRefExoticComponent<DropdownProps & React.RefAttributes<unknown>> {
+    Option: typeof DropdownOption;
+    Trigger: typeof DropdownTrigger;
+    Container: typeof DropdownContainer;
+}
+
+const Dropdown = forwardRef((props: DropdownProps, ref: any) => {
     const {
         aria = {},
         autocomplete = false,
@@ -125,7 +132,7 @@ const Dropdown = (props: DropdownProps) => {
     const filteredOptions = optionsWithBlankSelection?.filter((option: GenericObject) => {
         const label = typeof option.label === 'string' ? option.label.toLowerCase() : option.label;
         return String(label).toLowerCase().includes(filterItem.toLowerCase());
-    });    
+    });
 
     // For keyboard accessibility: Set focus within dropdown to selected item if it exists
     useEffect(() => {
@@ -175,6 +182,14 @@ const Dropdown = (props: DropdownProps) => {
         dark
     });
 
+    useImperativeHandle(ref, () => ({
+        clearSelected: () => {
+            setSelected({});
+            setFilterItem("");
+            setIsDropDownClosed(true);
+            onSelect && onSelect(null);
+        },
+    }));
 
     return (
         <div {...ariaProps}
@@ -258,8 +273,9 @@ const Dropdown = (props: DropdownProps) => {
             </DropdownContext.Provider>
         </div>
     )
-};
+}) as DropdownComponent
 
+Dropdown.displayName = "Dropdown";
 Dropdown.Option = DropdownOption;
 Dropdown.Trigger = DropdownTrigger;
 Dropdown.Container = DropdownContainer;

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

@@ -0,0 +1,45 @@
+import React, { useRef } from 'react'
+import { Button, Dropdown } from 'playbook-ui'
+
+const options = [
+    {
+        label: "United States",
+        value: "United States",
+    },
+    {
+        label: "Canada",
+        value: "Canada",
+    },
+    {
+        label: "Pakistan",
+        value: "Pakistan",
+    }
+]
+
+const DropdownClearSelection = (props) => {
+    const dropdownRef = useRef(null)
+
+    const handleReset = () => {
+        if (dropdownRef.current) {
+            dropdownRef.current.clearSelected()
+        }
+    }
+
+    return (
+        <>
+            <Dropdown
+                defaultValue={options[2]}
+                options={options}
+                ref={dropdownRef}
+                {...props}
+            />
+            <Button
+                marginTop="md"
+                onClick={handleReset}
+                text="Reset"
+            />
+        </>
+    )
+}
+
+export default DropdownClearSelection

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

@@ -0,0 +1 @@
+To use an external control (like a reset button) to clear Dropdown selection, you can make use of the `useRef` hook. You must pass a ref to the Dropdown component and use that ref within the onClick for the external control in the way shown in the code snippet below.

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

@@ -22,6 +22,7 @@ examples:
   - dropdown_error: Dropdown with Error
   - dropdown_default_value: Default Value
   - dropdown_blank_selection: Blank Selection
+  - dropdown_clear_selection: Clear Selection
   # - dropdown_with_autocomplete: Autocomplete
   # - dropdown_with_autocomplete_and_custom_display: Autocomplete with Custom Display
   # - dropdown_with_external_control: useDropdown Hook

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

@@ -12,3 +12,4 @@ export { default as DropdownSubcomponentStructure } from './_dropdown_subcompone
 export { default as DropdownError } from './_dropdown_error.jsx'
 export { default as DropdownDefaultValue } from './_dropdown_default_value.jsx'
 export { default as DropdownBlankSelection } from './_dropdown_blank_selection.jsx'
+export { default as DropdownClearSelection } from './_dropdown_clear_selection.jsx'

data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx

@@ -62,7 +62,7 @@ const DropdownOption = (props: DropdownOptionProps) => {
   const focusedClass = isFocused && "focused";
 
   const selectedClass = `${
-    selected.label === option.label
+    selected?.label === option.label
       ? "selected"
       : "list"
   }`;

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

@@ -73,7 +73,7 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
     !autocomplete && "select_only"
   );
 
-  const customDisplayPlaceholder = selected.label ? (
+  const customDisplayPlaceholder = selected?.label ? (
     <b>{selected.label}</b>
   ) : autocomplete ? (
     ""
@@ -83,7 +83,7 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
     "Select..."
   );
 
-  const defaultDisplayPlaceholder = selected.label
+  const defaultDisplayPlaceholder = selected?.label
     ? selected.label
     : autocomplete
     ? ""

data/app/pb_kits/playbook/pb_enhanced_element/{element_observer.js → element_observer.ts}

@@ -1,34 +1,47 @@
+// eslint-disable-next-line
+// @ts-nocheck
+import PbEnhancedElement from "./index"
+
 export default class ElementObserver {
-  constructor(matchDelegate, target = document) {
+  matchDelegate: PbEnhancedElement
+  target: Document
+  _mutationObserver: MutationObserver
+
+  constructor(matchDelegate: PbEnhancedElement, target = document) {
     this.matchDelegate = matchDelegate
     this.target = target
   }
 
-  start() {
+  get mutationObserver(): MutationObserver {
+    return this._mutationObserver =
+      this._mutationObserver || new MutationObserver((mutationList) => this.processMutationList(mutationList))
+  }
+
+  start(): void {
     this.mutationObserver.observe(this.target, { attributes: true, childList: true, subtree: true })
     this.catchup()
   }
 
-  stop() {
+  stop(): void {
     this.mutationObserverdisconnect()
   }
 
-  catchup() {
-    this.handleAdditions(this.matchDelegate.matches(this.target))
+  catchup(): void {
+    this.handleAdditions(this.matchDelegate.matches(this.target as unknown as Element))
   }
 
-  processMutationList(mutationList) {
+  processMutationList(mutationList: Array<MutationRecord>): void {
     for (const mutation of mutationList) {
       if (mutation.type == 'attributes') {
-        this.processAttributeChange(mutation.target)
+        this.processAttributeChange(mutation.target as Element)
       } else if (mutation.type == 'childList') {
-        this.processRemovedNodes(Array.from(mutation.removedNodes))
-        this.processAddedNodes(Array.from(mutation.addedNodes))
+        this.processRemovedNodes(Array.from(mutation.removedNodes) as Array<Element>)
+        this.processAddedNodes(Array.from(mutation.addedNodes) as Array<Element>)
       }
     }
   }
 
-  processAttributeChange(node) {
+  processAttributeChange(node: Element): void | Array<Element> {
     if (node.nodeType !== Node.ELEMENT_NODE) return
 
     const matches = this.matchDelegate.matches(node)
@@ -38,30 +51,25 @@ export default class ElementObserver {
     this.handleAdditions(matches)
   }
 
-  processRemovedNodes(nodes) {
+  processRemovedNodes(nodes: Array<Element>): void {
     for (const node of nodes) {
       if (node.nodeType !== Node.ELEMENT_NODE) continue
       this.handleRemovals(this.matchDelegate.matches(node))
     }
   }
 
-  processAddedNodes(nodes) {
+  processAddedNodes(nodes: Array<Element>): void {
     for (const node of nodes) {
       if (node.nodeType !== Node.ELEMENT_NODE) continue
       this.handleAdditions(this.matchDelegate.matches(node))
     }
   }
 
-  handleRemovals(elements) {
+  handleRemovals(elements: Array<Element>): void {
     for (const element of elements) this.matchDelegate.removeMatch(element)
   }
 
-  handleAdditions(elements) {
+  handleAdditions(elements: Array<Element>): void {
     for (const element of elements) this.matchDelegate.addMatch(element)
   }
-
-  get mutationObserver() {
-    return this._mutationObserver =
-      this._mutationObserver || new MutationObserver((mutationList) => this.processMutationList(mutationList))
-  }
 }

data/app/pb_kits/playbook/pb_enhanced_element/{index.js → index.ts}

@@ -1,21 +1,31 @@
-import ElementObserver from './element_observer.js'
+// eslint-disable-next-line
+// @ts-nocheck
+import ElementObserver from './element_observer'
 
 export default class PbEnhancedElement {
-  static get elements() {
+  static _elements: Map<Element, PbEnhancedElement>
+  static _observer: ElementObserver
+  element: Element
+
+  constructor(element?: Element) {
+    this.element = element
+  }
+
+  static get elements(): Map<Element, PbEnhancedElement> {
     return this._elements = (this._elements || new Map)
   }
 
-  static get observer() {
+  static get observer(): ElementObserver {
     return this._observer = (this._observer || new ElementObserver(this))
   }
 
-  static get selector() {
+  static get selector(): string {
     // eslint-disable-next-line no-console
     console.warn('Define a static property for selector or redefine the matches function in a subclass.', this)
     return null
   }
 
-  static matches(node) {
+  static matches(node: Element): Array<Element> {
     if (!this.selector) return []
 
     const matches = []
@@ -25,7 +35,7 @@ export default class PbEnhancedElement {
     return (matches)
   }
 
-  static addMatch(element) {
+  static addMatch(element: Element): void {
     if (element._pbEnhanced || this.elements.has(element)) return
 
     const enhansedElement = new this(element)
@@ -34,7 +44,7 @@ export default class PbEnhancedElement {
     element._pbEnhanced = enhansedElement
   }
 
-  static removeMatch(element) {
+  static removeMatch(element: Element): void {
     if (!this.elements.has(element)) return
 
     const enhansedElement = this.elements.get(element)
@@ -42,22 +52,19 @@ export default class PbEnhancedElement {
     this.elements.delete(element)
   }
 
-  static start() {
+  static start(): void {
     this.observer.start()
   }
 
-  static stop() {
+  static stop(): void {
     this.mutationObserver.stop()
   }
 
-  constructor(element) {
-    this.element = element
-  }
-
-  connect() {
+  connect(): void {
     // eslint-disable-next-line no-console
     console.warn('Redefine the connect function in a subclass.', this)
   }
 
-  disconnect() { }
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  disconnect(): void {}
 }

data/app/pb_kits/playbook/pb_filter/Filter/ResultsCount.tsx

@@ -13,6 +13,7 @@ type ResultsCountProps = {
 const ResultsCount = ({ dark, results, title }: ResultsCountProps): React.ReactElement => {
   
   const resultTitle = () => {
+    if (results == null) return null
     return (
       <TitleCount
           align="center"
@@ -24,6 +25,7 @@ const ResultsCount = ({ dark, results, title }: ResultsCountProps): React.ReactE
   }
 
   const justResults = () => {
+    if (results == null) return null
     return (
       <Caption
           className="filter-results"
@@ -35,13 +37,13 @@ const ResultsCount = ({ dark, results, title }: ResultsCountProps): React.ReactE
   }
 
   const displayResultsCount = () => {
-    if (results && title) {
+    if (results != null && results >=0 && title) {
       return (
         <>
           {resultTitle()}
         </>
       )
-    } else if (results) {
+    } else if (results !=null && results >=0 ) {
       return (
         <>
           {justResults()}

data/app/pb_kits/playbook/pb_filter/docs/_filter_default.jsx

@@ -78,7 +78,7 @@ const FilterDefault = (props) => {
           double
           minWidth="375px"
           onSortChange={SortingChangeCallback}
-          results={1}
+          results={0}
           sortOptions={{
             popularity: 'Popularity',
             // eslint-disable-next-line

data/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx

@@ -47,9 +47,13 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
 
   const iconClass = icon ? "_icon" : ""
   const closeIconSize = size === "small" ? "xs" : "sm"
+
+  const filteredProps: FormPillProps = {...props}
+  delete filteredProps.truncate
+
   const css = classnames(
     `pb_form_pill_kit_${color}${iconClass}`,
-    globalProps(props),
+    globalProps(filteredProps),
     className,
     size === 'small' ? 'small' : null,
     textTransform,
@@ -77,6 +81,7 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
               className="pb_form_pill_text"
               size={4}
               text={name}
+              truncate={props.truncate}
           />
         </>
       )}
@@ -92,6 +97,7 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
               className="pb_form_pill_text"
               size={4}
               text={name}
+              truncate={props.truncate}
           />
           <Icon
               className="pb_form_pill_icon"
@@ -111,6 +117,7 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
               className="pb_form_pill_tag"
               size={4}
               text={text}
+              truncate={props.truncate}
           />
         </>
       )}
@@ -119,6 +126,7 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
             className="pb_form_pill_tag"
             size={4}
             text={text}
+            truncate={props.truncate}
         />
       )}
       <div

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.html.erb

@@ -0,0 +1,19 @@
+<%
+  names = [
+    { label: 'Alexander Nathaniel Montgomery', value: 'Alexander Nathaniel Montgomery' },
+    { label: 'Isabella Anastasia Wellington', value: 'Isabella Anastasia Wellington' },
+    { label: 'Christopher Maximilian Harrington', value: 'Christopher Maximilian Harrington' },
+    { label: 'Elizabeth Seraphina Kensington', value: 'Elizabeth Seraphina Kensington' },
+    { label: 'Theodore Jonathan Abernathy', value: 'Theodore Jonathan Abernathy' },
+  ]
+%>
+
+<%= pb_rails("typeahead", props: {
+    html_options: { style: { maxWidth: "240px" }},
+    id: "typeahead-form-pill",
+    is_multi: true,
+    options: names,
+    label: "Names",
+    pills: true,
+    truncate: 1,
+}) %>

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.jsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import Typeahead from '../../pb_typeahead/_typeahead'
+
+const names = [
+  { label: 'Alexander Nathaniel Montgomery', value: 'Alexander Nathaniel Montgomery' },
+  { label: 'Isabella Anastasia Wellington', value: 'Isabella Anastasia Wellington' },
+  { label: 'Christopher Maximilian Harrington', value: 'Christopher Maximilian Harrington' },
+  { label: 'Elizabeth Seraphina Kensington', value: 'Elizabeth Seraphina Kensington' },
+  { label: 'Theodore Jonathan Abernathy', value: 'Theodore Jonathan Abernathy' },
+]
+
+const FormPillTruncatedText = (props) => {
+  return (
+    <>
+      <Typeahead
+          htmlOptions={{ style: { maxWidth: "240px" }}}
+          isMulti
+          label="Names"
+          options={names}
+          truncate={1}
+          {...props}
+      />
+    </>
+  )
+}
+
+export default FormPillTruncatedText

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.md

@@ -0,0 +1 @@
+For pills with longer text, the `truncate` global prop can be used to truncate the label within each Form Pill. See [here](https://playbook.powerapp.cloud/visual_guidelines/truncate) for more information on the truncate global prop.

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

@@ -3,6 +3,7 @@ examples:
   rails:
   - form_pill_user: Form Pill User
   - form_pill_size: Form Pill Size
+  - form_pill_truncated_text: Truncated Text
   - form_pill_tag: Form Pill Tag
   - form_pill_example: Example
   - form_pill_icon: Form Pill Icon
@@ -11,6 +12,7 @@ examples:
   react:
   - form_pill_user: Form Pill User
   - form_pill_size: Form Pill Size
+  - form_pill_truncated_text: Truncated Text
   - form_pill_tag: Form Pill Tag
   - form_pill_example: Example
   - form_pill_icon: Form Pill Icon

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

@@ -4,3 +4,4 @@ export { default as FormPillTag } from './_form_pill_tag.jsx'
 export { default as FormPillExample } from './_form_pill_example.jsx'
 export { default as FormPillIcon } from './_form_pill_icon.jsx'
 export { default as FormPillColors } from './_form_pill_colors.jsx'
+export { default as FormPillTruncatedText } from './_form_pill_truncated_text.jsx'