playbook_ui 14.5.0.pre.alpha.PLAY1548intltelinputupdatelatest4037 → 14.5.0.pre.alpha.PLAY15814066

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a06ad76a5b0490f9a83f4327fd8a9dd388d2ed6fa1ee83dc72d6ca6a5071ae5c
-  data.tar.gz: 42bfb4eb362d27094685c06ad868c9c5bfb8ebb70960b50df06da156125b9fc1
+  metadata.gz: 16e2ee529fe689d2f505e3daeac5e4d71a2f33a29d8807153811992ea08f84d0
+  data.tar.gz: 8e263f4310c0ab98566668459a775d778064a98fffff801a831a178597350c2b
 SHA512:
-  metadata.gz: 4bafbfe0895af6e9f6548d7cced94e4c0b341f6a68957d81ea1d47c31ee00fd27b72e90e9028c27a23f6a990dbdc528651aca7e71fd81d0bcd996cc44537adbc
-  data.tar.gz: e632b6fc5da05678aed09cd65a0cc4a6e772e1dcfc5d556546dbd5356644813da9210ac1ab2765bec1f4a38efc9187d7b9a1969cbf9d19ed410004041190dbfb
+  metadata.gz: 1647e85a66a4ca5899ba11b6da51a1362aea04de67c1abbbc00a3cb981305e9206c4d38a247157aef0292a4c2a9de21216b52ef32423d36929480568213bfcc0
+  data.tar.gz: bac1ad6e22af011cc37f94d4b7c2ad32198e71bdee31e8c0c40005b1c3b252474dcce80cc49946b3a138f8a084f034f83dbe34bc63d25974b1ec8577827f178f

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_card/_card.tsx

@@ -5,7 +5,7 @@ import { get } from 'lodash'
 import classnames from 'classnames'
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
-import { GlobalProps, globalProps } from '../utilities/globalProps'
+import { GlobalProps, globalProps, globalInlineProps } from '../utilities/globalProps'
 import type { ProductColors, CategoryColors, BackgroundColors } from '../types/colors'
 
 import Icon from '../pb_icon/_icon'
@@ -49,6 +49,7 @@ type CardBodyProps = {
   padding?: string,
 } & GlobalProps
 
+
 // Header component
 const Header = (props: CardHeaderProps) => {
   const { children, className, headerColor = 'category_1', headerColorStriped = false } = props
@@ -107,6 +108,7 @@ const Card = (props: CardPropTypes): React.ReactElement => {
 
   // coerce to array
   const cardChildren = React.Children.toArray(children)
+  const inlineStyles = globalInlineProps(props);
 
   const subComponentTags = (tagName: string) => {
     return cardChildren.filter((c: string) => (
@@ -135,6 +137,7 @@ const Card = (props: CardPropTypes): React.ReactElement => {
             {...dataProps}
             {...htmlProps}
             className={classnames(cardCss, globalProps(props), className)}
+            style={inlineStyles}
         >
           {subComponentTags('Header')}
           {
@@ -163,6 +166,7 @@ const Card = (props: CardPropTypes): React.ReactElement => {
               {...dataProps}
               {...htmlProps}
               className={classnames(cardCss, globalProps(props), className)}
+              style={inlineStyles}
             >
               {subComponentTags('Header')}
               {nonHeaderChildren}

data/app/pb_kits/playbook/pb_dialog/_dialog.tsx

@@ -6,7 +6,7 @@ import classnames from "classnames";
 import Modal from "react-modal";
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
-import { globalProps } from "../utilities/globalProps";
+import { globalProps, globalInlineProps } from "../utilities/globalProps";
 
 import Body from "../pb_body/_body";
 import Button from "../pb_button/_button";
@@ -91,6 +91,8 @@ const Dialog = (props: DialogProps): React.ReactElement => {
     beforeClose: "pb_dialog_overlay_before_close",
   };
 
+  const inlineStyles = globalInlineProps(props); 
+
   const classes = classnames(
     buildCss("pb_dialog_wrapper"),
     globalProps(props),
@@ -184,6 +186,7 @@ const Dialog = (props: DialogProps): React.ReactElement => {
             overlayClassName={overlayClassNames}
             portalClassName={portalClassName}
             shouldCloseOnOverlayClick={shouldCloseOnOverlayClick && !loading}
+            style={{ content: inlineStyles }}
         >
           <>
             {title && !status ? <Dialog.Header>{title}</Dialog.Header> : null}
@@ -192,6 +195,7 @@ const Dialog = (props: DialogProps): React.ReactElement => {
               <Dialog.Body
                   className="dialog_status_text_align"
                   padding="md"
+              
               >
                 <Flex align="center"
                     orientation="column"

data/app/pb_kits/playbook/pb_flex/_flex.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import classnames from 'classnames'
 import { buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
-import { GlobalProps, globalProps } from '../utilities/globalProps'
+import { GlobalProps, globalProps, globalInlineProps } from '../utilities/globalProps'
 import { GenericObject, Sizes } from '../types'
 
 type FlexProps = {
@@ -61,6 +61,7 @@ const Flex = (props: FlexProps): React.ReactElement => {
   const alignSelfClass = alignSelf !== 'none' ? `align_self_${alignSelf}` : ''
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
+  const inlineStyles = globalInlineProps(props)
 
 
   return (
@@ -83,6 +84,7 @@ const Flex = (props: FlexProps): React.ReactElement => {
         globalProps(props),
         className
       )}
+        style={inlineStyles}
         {...dataProps}
         {...htmlProps}
     >

data/app/pb_kits/playbook/pb_flex/_flex_item.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import classnames from 'classnames'
 import { buildCss, buildHtmlProps } from '../utilities/props'
-import { globalProps, GlobalProps } from '../utilities/globalProps'
+import { globalProps, GlobalProps, globalInlineProps} from '../utilities/globalProps'
 type FlexItemPropTypes = {
   children: React.ReactNode[] | React.ReactNode,
   fixedSize?: string,
@@ -35,14 +35,20 @@ const FlexItem = (props: FlexItemPropTypes): React.ReactElement => {
   const fixedStyle =
     fixedSize !== undefined ? { flexBasis: `${fixedSize}` } : null
   const orderClass = order !== 'none' ? `order_${order}` : null
+  const inlineStyles = globalInlineProps(props)
+  const combinedStyles = {
+    ...fixedStyle,
+    ...inlineStyles
+  }
 
   const htmlProps = buildHtmlProps(htmlOptions)
 
+
   return (
     <div
         {...htmlProps}
         className={classnames(buildCss('pb_flex_item_kit', growClass, shrinkClass, flexClass, displayFlexClass), orderClass, alignSelfClass, globalProps(props), className)}
-        style={fixedStyle}
+        style={combinedStyles}
     >
       {children}
     </div>

data/app/pb_kits/playbook/pb_flex/flex_item.html.erb

@@ -1,8 +1,5 @@
-<%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    style: object.style_value,
-    **combined_html_options) do %>
+<%= pb_content_tag(:div, 
+  style: object.inline_styles
+) do %> 
   <%= content.presence %>
 <% end %>

data/app/pb_kits/playbook/pb_flex/flex_item.rb

@@ -20,8 +20,13 @@ module Playbook
         generate_classname("pb_flex_item_kit", fixed_size_class, grow_class, shrink_class, display_flex_class) + align_self_class
       end
 
-      def style_value
-        "flex-basis: #{fixed_size};" if fixed_size.present?
+      def inline_styles
+        styles = []
+        styles << "flex-basis: #{fixed_size};" if fixed_size.present?
+        styles << "height: #{height};" if height.present?
+        styles << "min-height: #{min_height};" if min_height.present?
+        styles << "max-height: #{max_height};" if max_height.present?
+        styles.join(" ")
       end
 
     private

data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss

@@ -6,30 +6,6 @@ $dropdown-min-width: 340px;
 $flag-min-resolution: 192dpi;
 
 .pb_phone_number_input {
-  .iti {
-    width: 100%;
-  }
-
-  .iti__flag {
-    margin-right: 6px;
-  }
-
-  .iti__a11y-text {
-    display: none;
-  }
-
-  .iti__selected-dial-code {
-    font-family: $font_family_base;
-    font-size: $font_base;
-    line-height: 1.5;
-    letter-spacing: $lspace_normal;
-    font-weight: $regular;
-    font-style: normal;
-    text-rendering: optimizeLegibility;
-    -moz-font-feature-settings: "liga" on;
-    color: $charcoal;
-  }
-
   input::placeholder {
     color: $focus_input_light;
   }
@@ -39,7 +15,7 @@ $flag-min-resolution: 192dpi;
       border-color: $primary !important;
     }
 
-    .iti__selected-country:focus-visible {
+    .iti__selected-flag:focus-visible {
       outline-style: none;
     }
   }
@@ -53,26 +29,7 @@ $flag-min-resolution: 192dpi;
     border-bottom: 1px solid $border_light !important;  
   }
 
-  .iti__selected-country-primary {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin-right: 10px;
-    .iti__flag {
-      margin-right: 0;
-    }
-  }
-
-  .iti__selected-country {
-    position: absolute;
-    z-index: 2;
-    top: 0;
-    display: flex;
-    height: 100%;
-    justify-content: center;
-    align-items: center;
-    border-width: 0;
-
+  .iti__selected-flag {
     padding: 0 $space_xxs 0 $space_sm;
     border-radius: $space_xxs; 
 
@@ -94,11 +51,11 @@ $flag-min-resolution: 192dpi;
     }
   }
 
-  .iti--allow-dropdown .iti__country-container:hover .iti__selected-country {
+  .iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag {
     background-color: $focus_input_light;
   }
 
-  .iti__country-container:hover + .text_input {
+  .iti__flag-container:hover + .text_input {
     background-color: $focus_input_light;
   }
 
@@ -107,14 +64,11 @@ $flag-min-resolution: 192dpi;
     border-radius: 1px;
   }
 
-  .iti__flag.iti__globe {
-    background-image: url("https://unpkg.com/intl-tel-input@21.1.4/build/img/globe.png");
-    background-position: center;
-    height: 20px;
-    background-size: 20px 20px;
+  .iti--separate-dial-code {
+    width: 100%;
   }
 
-  .iti--show-flags .iti__selected-country {
+  .iti--separate-dial-code .iti__selected-flag {
     background-color: rgba($white, $opacity_1);
   }
 
@@ -141,14 +95,14 @@ $flag-min-resolution: 192dpi;
     position: relative;
     vertical-align: top;
     width: $space_xxs + 1px;
-    top: $space_xs - 1px;
+    top: $space_xs + 2px;
     transform: rotate($transform-rotate-deg);
     color: $slate;
   }
 
   .iti__arrow.iti__arrow--up::before {
     transform: rotate(-($transform-rotate-deg/3));
-    top: $space_xs + 1px;
+    top: $space_xs + 4px;
     color: $primary_action;
   }
 
@@ -182,13 +136,10 @@ $flag-min-resolution: 192dpi;
   .iti__dropdown-content {
     border-radius: $space_xs; 
     border: 1px solid $border_light !important;
-    position: absolute;
-    z-index: 2;
-    top: 100%;
   }
 
   &.dark {
-    .iti--allow-dropdown .iti__country-container {
+    .iti--allow-dropdown .iti__flag-container {
       background-color: rgba($white, 0);
 
       &:hover {
@@ -198,13 +149,13 @@ $flag-min-resolution: 192dpi;
           background-color: rgba($white, 0.15);
         }
 
-        .iti__selected-country {
+        .iti__selected-flag {
           background-color: rgba($white, 0);
         }
       }
     }
 
-    .iti__selected-country {
+    .iti__selected-flag {
       background-color: rgba($white, 0);
       color: $white;
     }

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

@@ -1,7 +1,8 @@
 import React, { forwardRef, useEffect, useRef, useState, useImperativeHandle } from 'react'
 import classnames from 'classnames'
 
-import intlTelInput from 'intl-tel-input/build/js/intlTelInputWithUtils.js'
+import intlTelInput from 'intl-tel-input'
+import 'intl-tel-input/build/js/utils.js'
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
@@ -49,7 +50,7 @@ const formatToGlobalCountryName = (countryName: string) => {
 }
 
 const formatAllCountries = () => {
-  const countryData = intlTelInput.getCountryData()
+  const countryData = window.intlTelInputGlobals.getCountryData()
 
   for (let i = 0; i < countryData.length; i++) {
     const country = countryData[i]
@@ -213,24 +214,14 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
   // This also Fixes things for our react_component rendering on the Rails Side
   useEffect(formatAllCountries, [])
 
-  // If an initial country is not specified, the "globe" icon will show
-  // Always set a country
-  const fallbackCountry =
-    preferredCountries.length > 0 ? preferredCountries[0] :
-      onlyCountries.length > 0 ? onlyCountries.sort()[0] :
-        "af";
-
   useEffect(() => {
     const telInputInit = intlTelInput(inputRef.current, {
       separateDialCode: true,
-      countryOrder: preferredCountries,
+      preferredCountries,
       allowDropdown: !disabled,
       autoInsertDialCode: false,
-      initialCountry: initialCountry || fallbackCountry,
-      onlyCountries,
-      countrySearch: false,
-      fixDropdownWidth: false,
-      formatAsYouType: false,
+      initialCountry,
+      onlyCountries
     })
 
     inputRef.current.addEventListener("countrychange", (evt: Event) => {

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

@@ -1 +1 @@
-Preferred countries will display in the order they are listed with the first country preselected, and all non-preferred countries listed alphabetically below in the remaining dropdown.
+Preferred countries will display in the order they are listed with the first country preselected, and all non-preferred countries listed alphabetically below a section separator within the remaining dropdown.

data/app/pb_kits/playbook/pb_phone_number_input/intlTelInput.scss

@@ -1,6 +1,4 @@
 /* @import "intl-tel-input/build/css/intlTelInput.css"; */
-// Taken from 18.5.3, but with background-image replaced with PLAY-1527
-// https://unpkg.com/browse/intl-tel-input@18.5.3/build/css/intlTelInput.css
 .iti {
   position: relative;
   display: inline-block;

data/app/pb_kits/playbook/pb_phone_number_input/types.d.ts

@@ -1,4 +1 @@
-declare module 'intl-tel-input/build/js/intlTelInputWithUtils.js' {
-    const intlTelInput: any;
-    export default intlTelInput;
-}
+declare module 'intl-tel-input'

data/app/pb_kits/playbook/pb_popover/_popover.tsx

@@ -21,7 +21,7 @@ import classnames from "classnames";
 import { globalProps, GlobalProps } from "../utilities/globalProps";
 import { uniqueId } from 'lodash';
 
-type ModifiedGlobalProps = Omit<GlobalProps, 'minWidth'>
+type ModifiedGlobalProps = Omit<GlobalProps, 'minWidth' | 'maxHeight' | 'minHeight'>
 
 type PbPopoverProps = {
   aria?: { [key: string]: string };

data/app/pb_kits/playbook/utilities/globalPropNames.mjs

@@ -1,4 +1,7 @@
 export default [
+  "minHeight",
+  "maxHeight",
+  "height",
   "left",
   "bottom",
   "right",

data/app/pb_kits/playbook/utilities/globalProps.ts

@@ -170,12 +170,24 @@ type ZIndex = {
   zIndex?: ZIndexType,
 } | ZIndexResponsiveType
 
+type Height = {
+  height?: string 
+}
+
+type MaxHeight = {
+  maxHeight?: string
+}
+
+type MinHeight = {
+  minHeight?: string
+}
+
 // keep this as the last type definition
 export type GlobalProps = AlignContent & AlignItems & AlignSelf &
   BorderRadius & Cursor & Dark & Display & DisplaySizes & Flex & FlexDirection &
   FlexGrow & FlexShrink & FlexWrap & JustifyContent & JustifySelf &
   LineHeight & Margin & MinWidth & MaxWidth & NumberSpacing & Order & Overflow & Padding &
-  Position & Shadow & TextAlign & Truncate & VerticalAlign & ZIndex & { hover?: string } & Top & Right & Bottom & Left;
+  Position & Shadow & TextAlign & Truncate & VerticalAlign & ZIndex & { hover?: string } & Top & Right & Bottom & Left & Height & MaxHeight & MinHeight;
 
 const getResponsivePropClasses = (prop: {[key: string]: string}, classPrefix: string) => {
   const keys: string[] = Object.keys(prop)
@@ -498,7 +510,22 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
     } else {
       return verticalAlign ? `vertical_align_${verticalAlign} ` : ''
     }
-  }
+  },
+
+}
+
+const PROP_INLINE_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => {[key: string]: any}} = {
+  heightProps: ({ height }: Height) => {
+    return height ? { height } : {}; 
+  },
+
+  maxHeightProps: ({ maxHeight }: MaxHeight) => {
+    return maxHeight ? { maxHeight } : {};
+  },
+
+  minHeightProps: ({ minHeight }: MinHeight) => {
+    return minHeight ? { minHeight } : {}; 
+  },
 }
 
 type DefaultProps = {[key: string]: string} | Record<string, unknown>
@@ -510,6 +537,16 @@ export const globalProps = (props: GlobalProps, defaultProps: DefaultProps = {})
   }).filter((value) => value?.length > 0).join(" ")
 }
 
+// New function for inline styles
+export const globalInlineProps = (props: GlobalProps): React.CSSProperties => {
+  const styles = Object.keys(PROP_INLINE_CATEGORIES).reduce((acc, key) => {
+    const result = PROP_INLINE_CATEGORIES[key](props);
+    return { ...acc, ...(typeof result === 'object' ? result : {}) }; // Ensure result is an object before spreading
+  }, {});
+
+  return styles; // Return the styles object directly
+}
+
 
 export const deprecatedProps = (): void => {
   // if (process.env.NODE_ENV === 'development') {