playbook_ui 14.11.1 → 14.12.0.pre.alpha.PBNTR456fixedconftoastrailsautoclose5728

data/app/pb_kits/playbook/pb_table/table_row.rb

@@ -8,6 +8,11 @@ module Playbook
       prop :tag, type: Playbook::Props::Enum,
                  values: %w[table div],
                  default: "table"
+      prop :collapsible, type: Playbook::Props::Boolean,
+                         default: false
+      prop :collapsible_content
+      prop :collapsible_side_highlight, type: Playbook::Props::Boolean,
+                                        default: true
 
       def classname
         generate_classname("pb_table_row_kit", side_highlight_class) + tag_class

data/app/pb_kits/playbook/pb_table/utilities/addDataTitle.ts

@@ -0,0 +1,22 @@
+export const addDataTitle = () => {
+    const tables = document.querySelectorAll('.table-responsive-collapse');
+    // Each Table
+    [].forEach.call(tables, (table: HTMLTableElement) => {
+        // Header Titles
+        const headers: string[] = [];
+        [].forEach.call(table.querySelectorAll('th'), (header: HTMLTableCellElement) => {
+            const colSpan = header.colSpan
+            for (let i = 0; i < colSpan; i++) {
+                headers.push(header.textContent.replace(/\r?\n|\r/, ''));
+            }
+        });
+        // for each row in tbody
+        [].forEach.call(table.querySelectorAll('tbody tr'), (row: HTMLTableRowElement) => {
+            // for each cell
+            [].forEach.call(row.cells, (cell: HTMLTableCellElement, headerIndex: number) => {
+                // apply the attribute
+                cell.setAttribute('data-title', headers[headerIndex])
+            })
+        })
+    });
+}

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_mask.html.erb

@@ -0,0 +1,46 @@
+  <%= pb_rails("text_input", props: {
+    label: "Currency",
+    mask: "currency",
+    margin_bottom: "md",
+    name: "currency_name",
+    placeholder:"$0.00"
+  }) %>
+
+  <%= pb_rails("text_input", props: {
+    label: "ZIP Code",
+    mask: "zip_code",
+    margin_bottom: "md",
+    placeholder: "12345"
+  }) %>
+
+  <%= pb_rails("text_input", props: {
+    label: "Postal Code",
+    mask: "postal_code",
+    placeholder: "12345-6789",
+    margin_bottom: "md",
+  }) %>
+
+  <%= pb_rails("text_input", props: {
+    label: "SSN",
+    mask: "ssn",
+    margin_bottom: "md",
+    placeholder: "123-45-6789"
+  }) %>
+
+  <%= pb_rails("title" , props: {
+    text: "Hidden Input Under The Hood",
+    padding_bottom: "sm"
+  })%>
+
+  <%= pb_rails("text_input", props: {
+    label: "Currency",
+    mask: "currency",
+    margin_bottom: "md",
+    name: "currency_name",
+    id: "example-currency",
+    placeholder: "$0.00",
+  }) %>
+
+<style>
+#example-currency-sanitized {display: flex !important;}
+</style>

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_mask_rails.md

@@ -0,0 +1,3 @@
+The mask prop lets you style your inputs while maintaining the value that the user typed in.
+
+It uses a hidden input field to submit the unformatted value as it will have the proper `name` attribute. It will also copy the id field with a `"#{your-id-sanitized}"`

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

@@ -8,6 +8,7 @@ examples:
   - text_input_inline: Inline
   - text_input_no_label: No Label
   - text_input_options: Input Options
+  - text_input_mask: Mask
   react:
   - text_input_default: Default
   - text_input_error: With Error
@@ -23,4 +24,4 @@ examples:
     - text_input_error_swift: With Error
     - text_input_disabled_swift: Disabled
     - text_input_add_on_swift: Add On
-    - text_input_props_swift: ""
+    - text_input_props_swift: ""

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

@@ -0,0 +1,103 @@
+export default class PbTextInput {
+  static start() {
+    const inputElements = document.querySelectorAll('[data-pb-input-mask="true"]');
+
+    inputElements.forEach((inputElement) => {
+      inputElement.addEventListener("input", (event) => {
+        const maskType = inputElement.getAttribute("mask");
+        const cursorPosition = inputElement.selectionStart;
+
+        let rawValue = event.target.value;
+        let formattedValue = rawValue;
+
+        // Apply formatting based on the mask type
+        switch (maskType) {
+          case "currency":
+            formattedValue = formatCurrency(rawValue);
+            break;
+          case "ssn":
+            formattedValue = formatSSN(rawValue);
+            break;
+          case "postal_code":
+            formattedValue = formatPostalCode(rawValue);
+            break;
+          case "zip_code":
+            formattedValue = formatZipCode(rawValue);
+            break;
+        }
+
+        // Update the sanitized input field in the same wrapper
+        const sanitizedInput = inputElement
+          .closest(".text_input_wrapper")
+          ?.querySelector('[data="sanitized-pb-input"]');
+
+        if (sanitizedInput) {
+          switch (maskType) {
+            case "ssn":
+              sanitizedInput.value = sanitizeSSN(formattedValue);
+              break;
+            case "currency":
+              sanitizedInput.value = sanitizeCurrency(formattedValue);
+              break;
+            default:
+              sanitizedInput.value = formattedValue; 
+          }
+        }
+
+        inputElement.value = formattedValue;
+        setCursorPosition(inputElement, cursorPosition, rawValue, formattedValue);
+      });
+    });
+
+  }
+}
+
+function formatCurrency(value) {
+  const numericValue = value.replace(/[^0-9]/g, "").slice(0, 15);
+
+  if (!numericValue) return "";
+
+  const dollars = parseFloat((parseInt(numericValue) / 100).toFixed(2));
+  if (dollars === 0) return "";
+
+  return new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency: "USD",
+    maximumFractionDigits: 2,
+  }).format(dollars);
+}
+
+function formatSSN(value) {
+  const cleaned = value.replace(/\D/g, "").slice(0, 9);
+  return cleaned
+    .replace(/(\d{5})(?=\d)/, "$1-")
+    .replace(/(\d{3})(?=\d)/, "$1-");
+}
+
+function formatZipCode(value) {
+  return value.replace(/\D/g, "").slice(0, 5);
+}
+
+function formatPostalCode(value) {
+  const cleaned = value.replace(/\D/g, "").slice(0, 9);
+  return cleaned.replace(/(\d{5})(?=\d)/, "$1-");
+}
+
+function sanitizeSSN(input) {
+  return input.replace(/\D/g, ""); 
+}
+
+function sanitizeCurrency(input) {
+  return input.replace(/[$,]/g, ""); 
+}
+
+// function to set cursor position
+function setCursorPosition(inputElement, cursorPosition, rawValue, formattedValue) {
+  const difference = formattedValue.length - rawValue.length;
+
+  const newPosition = Math.max(0, cursorPosition + difference);
+
+  requestAnimationFrame(() => {
+    inputElement.setSelectionRange(newPosition, newPosition);
+  });
+}

data/app/pb_kits/playbook/pb_text_input/text_input.html.erb

@@ -13,9 +13,13 @@
       <%= pb_rails("text_input/add_on", props: object.add_on_props) do %>
         <%= input_tag %>
       <% end %>
+    <% elsif mask.present? %>
+      <%= input_tag %>
+      <%= tag(:input, data: "sanitized-pb-input", id: sanitized_id, name: object.name, style: "display: none;") %>
     <% else %>
       <%= input_tag %>
     <% end %>
     <%= pb_rails("body", props: {dark: object.dark, status: "negative", text: object.error}) if object.error %>
   <% end %>
 <% end %>
+

data/app/pb_kits/playbook/pb_text_input/text_input.rb

@@ -4,6 +4,15 @@
 module Playbook
   module PbTextInput
     class TextInput < Playbook::KitBase
+      VALID_MASKS = %w[currency zipCode postalCode ssn].freeze
+
+      MASK_PATTERNS = {
+        "currency" => '^\$\d{1,3}(?:,\d{3})*(?:\.\d{2})?$',
+        "zip_code" => '\d{5}',
+        "postal_code" => '\d{5}-\d{4}',
+        "ssn" => '\d{3}-\d{2}-\d{4}',
+      }.freeze
+
       prop :autocomplete, type: Playbook::Props::Boolean,
                           default: true
       prop :disabled, type: Playbook::Props::Boolean,
@@ -25,6 +34,9 @@ module Playbook
       prop :add_on, type: Playbook::Props::NestedProps,
                     nested_kit: Playbook::PbTextInput::AddOn
 
+      prop :mask, type: Playbook::Props::String,
+                  default: nil
+
       def classname
         default_margin_bottom = margin_bottom.present? ? "" : " mb_sm"
         generate_classname("pb_text_input_kit") + default_margin_bottom + error_class + inline_class
@@ -46,6 +58,10 @@ module Playbook
         { dark: dark }.merge(add_on || {})
       end
 
+      def sanitized_id
+        "#{object.id}-sanitized" if id.present?
+      end
+
     private
 
       def all_input_options
@@ -55,12 +71,13 @@ module Playbook
           data: validation_data,
           disabled: disabled,
           id: input_options.dig(:id) || id,
-          name: name,
-          pattern: validation_pattern,
+          name: mask.present? ? "" : name,
+          pattern: validation_pattern || mask_pattern,
           placeholder: placeholder,
           required: required,
           type: type,
           value: value,
+          mask: mask,
         }.merge(input_options)
       end
 
@@ -75,7 +92,7 @@ module Playbook
       def validation_data
         fields = input_options.dig(:data) || {}
         fields[:message] = validation_message unless validation_message.blank?
-        fields
+        mask ? fields.merge(pb_input_mask: true) : fields
       end
 
       def error_class
@@ -85,6 +102,19 @@ module Playbook
       def inline_class
         inline ? " inline" : ""
       end
+
+      def mask_data
+        return {} unless mask
+        raise ArgumentError, "mask must be one of: #{VALID_MASKS.join(', ')}" unless VALID_MASKS.include?(mask)
+
+        { mask: mask }
+      end
+
+      def mask_pattern
+        return nil unless mask
+
+        MASK_PATTERNS[mask]
+      end
     end
   end
 end

data/app/pb_kits/playbook/pb_timeline/_timeline.scss

@@ -50,7 +50,7 @@ $gap_lg: $height_from_top + $space_lg;
         >div {
             &:last-child {
                 flex-basis: auto !important;
-                [class=pb_timeline_item_step] {
+                [class^=pb_timeline_item_step] {
                     [class=pb_timeline_item_connector] {
                         opacity: 0;
                     }
@@ -66,29 +66,25 @@ $gap_lg: $height_from_top + $space_lg;
         [class*=pb_timeline_item_kit] {
             &[class*=_solid] {
                 flex-basis: 100%;
-                [class=pb_timeline_item_left_block] {
-                    height: 0px;
-                }
-                [class=pb_timeline_item_step] {
+                [class^=pb_timeline_item_step] {
                     @include flex_wrapper(row);
+                    align-items: center;
                     margin-top: $space_xs;
                     margin-bottom: $space_xs;
                     [class=pb_timeline_item_connector] {
-                        @include pb_timeline_line_solid($connector_width, $connector_width, $height_from_top $icon_margin 0 $icon_margin );
+                        @include pb_timeline_line_solid($connector_width, $connector_width, 0 $icon_margin 0 $icon_margin );
                     }
                 }
             }
             &[class*=_dotted] {
                 flex-basis: 100%;
-                [class=pb_timeline_item_left_block] {
-                    height: 0;
-                }
-                [class=pb_timeline_item_step] {
+                [class^=pb_timeline_item_step] {
                     @include flex_wrapper(row);
+                    align-items: center;
                     margin-top: $space_xs;
                     margin-bottom: $space_xs;
                     [class=pb_timeline_item_connector] {
-                        @include pb_timeline_line_dotted_horizontal($connector_width, $connector_width, $height_from_top $icon_margin 0 $icon_margin );
+                        @include pb_timeline_line_dotted_horizontal($connector_width, $connector_width, 0 $icon_margin 0 $icon_margin );
                     }
                 }
             }
@@ -99,7 +95,7 @@ $gap_lg: $height_from_top + $space_lg;
             >div {
                 &:last-child {
                     flex-basis: auto !important;
-                    [class=pb_timeline_item_step] {
+                    [class^=pb_timeline_item_step] {
                         [class=pb_timeline_item_connector] {
                             opacity: 0;
                         }
@@ -129,12 +125,12 @@ $gap_lg: $height_from_top + $space_lg;
                             }
                         }
                     }
-                    [class=pb_timeline_item_step] {
+                    [class^=pb_timeline_item_step] {
                         @include flex_wrapper(row);
                         margin-top: $space_xs;
                         margin-bottom: $space_xs;
                         [class=pb_timeline_item_connector] {
-                            @include pb_timeline_line_solid($connector_width, $connector_width, $height_from_top $icon_margin 0 $icon_margin );
+                            @include pb_timeline_line_solid($connector_width, $connector_width, 0 $icon_margin 0 $icon_margin );
                         }
                     }
                 }
@@ -153,12 +149,12 @@ $gap_lg: $height_from_top + $space_lg;
                             }
                         }
                     }
-                    [class=pb_timeline_item_step] {
+                    [class^=pb_timeline_item_step] {
                         @include flex_wrapper(row);
                         margin-top: $space_xs;
                         margin-bottom: $space_xs;
                         [class=pb_timeline_item_connector] {
-                            @include pb_timeline_line_dotted_horizontal($connector_width, $connector_width, $height_from_top $icon_margin 0 $icon_margin );
+                            @include pb_timeline_line_dotted_horizontal($connector_width, $connector_width, 0 $icon_margin 0 $icon_margin );
                         }
                     }
                 }
@@ -170,7 +166,7 @@ $gap_lg: $height_from_top + $space_lg;
         align-items: flex-start;
         align-self: auto;
         >div:last-child {
-            [class=pb_timeline_item_step] {
+            [class^=pb_timeline_item_step] {
                 [class=pb_timeline_item_connector] {
                     opacity: 0;
                 }
@@ -180,13 +176,14 @@ $gap_lg: $height_from_top + $space_lg;
             @include flex_wrapper(row);
             &[class*=_solid] {
                 flex-basis: 100%;
-                [class=pb_timeline_item_step] {
+                [class^=pb_timeline_item_step] {
                     @include flex_wrapper(column);
+                    align-items: center;
                     align-content: flex-start;
                     margin-right: $space_sm;
                     margin-left: $space_sm;
                     [class=pb_timeline_item_connector] {
-                        @include pb_timeline_line_solid($connector_width, $connector_width, $icon_margin 0 $icon_margin $height_from_top);
+                        @include pb_timeline_line_solid($connector_width, $connector_width, $icon_margin 0 $icon_margin 0);
                     }
                 }
                 [class=pb_timeline_item_left_block] {
@@ -200,12 +197,13 @@ $gap_lg: $height_from_top + $space_lg;
             }
             &[class*=_dotted] {
                 flex-basis: 100%;
-                [class=pb_timeline_item_step] {
+                [class^=pb_timeline_item_step] {
                     @include flex_wrapper(column);
+                    align-items: center;
                     margin-right: $space_sm;
                     margin-left: $space_sm;
                     [class=pb_timeline_item_connector] {
-                        @include pb_timeline_line_dotted_vertical($connector_width, $connector_width, $icon_margin 0 $icon_margin $height_from_top);
+                        @include pb_timeline_line_dotted_vertical($connector_width, $connector_width, $icon_margin 0 $icon_margin 0);
                     }
                 }
                 [class=pb_timeline_item_left_block] {
@@ -223,7 +221,7 @@ $gap_lg: $height_from_top + $space_lg;
             align-items: flex-start;
             align-self: auto;
             >div:last-child {
-                [class=pb_timeline_item_step] {
+                [class^=pb_timeline_item_step] {
                     [class=pb_timeline_item_connector] {
                         opacity: 0;
                     }
@@ -233,13 +231,14 @@ $gap_lg: $height_from_top + $space_lg;
                 @include flex_wrapper(row);
                 &[class*=_solid] {
                     flex-basis: 100%;
-                    [class=pb_timeline_item_step] {
+                    [class^=pb_timeline_item_step] {
                         @include flex_wrapper(column);
+                        align-items: center;
                         align-content: flex-start;
                         margin-right: $space_sm;
                         margin-left: $space_sm;
                         [class=pb_timeline_item_connector] {
-                            @include pb_timeline_line_solid($connector_width, $connector_width, $icon_margin 0 $icon_margin $height_from_top);
+                            @include pb_timeline_line_solid($connector_width, $connector_width, $icon_margin 0 $icon_margin 0);
                         }
                     }
                     [class=pb_timeline_item_left_block] {
@@ -253,12 +252,13 @@ $gap_lg: $height_from_top + $space_lg;
                 }
                 &[class*=_dotted] {
                     flex-basis: 100%;
-                    [class=pb_timeline_item_step] {
+                    [class^=pb_timeline_item_step] {
                         @include flex_wrapper(column);
+                        align-items: center;
                         margin-right: $space_sm;
                         margin-left: $space_sm;
                         [class=pb_timeline_item_connector] {
-                            @include pb_timeline_line_dotted_vertical($connector_width, $connector_width, $icon_margin 0 $icon_margin $height_from_top);
+                            @include pb_timeline_line_dotted_vertical($connector_width, $connector_width, $icon_margin 0 $icon_margin 0);
                         }
                     }
                     [class=pb_timeline_item_left_block] {
@@ -274,7 +274,7 @@ $gap_lg: $height_from_top + $space_lg;
         }
         &[class*=_gap_xs] {
             [class*=pb_timeline_item_kit] {
-                [class=pb_timeline_item_step] {
+                [class^=pb_timeline_item_step] {
                     [class=pb_timeline_item_connector] {
                         height: $gap_xs !important;
                     }
@@ -283,7 +283,7 @@ $gap_lg: $height_from_top + $space_lg;
         }
         &[class*=_gap_sm] {
             [class*=pb_timeline_item_kit] {
-                [class=pb_timeline_item_step] {
+                [class^=pb_timeline_item_step] {
                     [class=pb_timeline_item_connector] {
                         height: $gap_sm !important;
                     }
@@ -292,7 +292,7 @@ $gap_lg: $height_from_top + $space_lg;
         }
         &[class*=_gap_md] {
             [class*=pb_timeline_item_kit] {
-                [class=pb_timeline_item_step] {
+                [class^=pb_timeline_item_step] {
                     [class=pb_timeline_item_connector] {
                         height: $gap_md !important;
                     }
@@ -301,7 +301,7 @@ $gap_lg: $height_from_top + $space_lg;
         }
         &[class*=_gap_lg] {
             [class*=pb_timeline_item_kit] {
-                [class=pb_timeline_item_step] {
+                [class^=pb_timeline_item_step] {
                     [class=pb_timeline_item_connector] {
                         height: $gap_lg !important;
                     }

data/app/pb_kits/playbook/pb_tooltip/_tooltip.tsx

@@ -32,6 +32,7 @@ type TooltipProps = {
   position?: "absolute" | "fixed";
   text: string,
   showTooltip?: boolean,
+  forceOpenTooltip?: boolean,
 } & GlobalProps
 
 const Tooltip = forwardRef((props: TooltipProps, ref: ForwardedRef<unknown>): React.ReactElement => {
@@ -49,6 +50,7 @@ const Tooltip = forwardRef((props: TooltipProps, ref: ForwardedRef<unknown>): Re
     text,
     showTooltip = true,
     zIndex,
+    forceOpenTooltip = false,
     ...rest
   } = props
 
@@ -135,7 +137,7 @@ const Tooltip = forwardRef((props: TooltipProps, ref: ForwardedRef<unknown>): Re
       >
         {children}
       </div>
-      {open && (
+      {(open || forceOpenTooltip) && (
         <div
             {...getFloatingProps({
               className: `tooltip_tooltip ${placement} visible`,

data/app/pb_kits/playbook/pb_typeahead/_typeahead.tsx

@@ -42,8 +42,8 @@ type TypeaheadProps = {
   id?: string,
   label?: string,
   loadOptions?: string | Noop,
-  getOptionLabel?: string | (() => any),
-  getOptionValue?: string | (() => any),
+  getOptionLabel?: string | (() => string),
+  getOptionValue?: string | (() => string),
   name?: string,
   marginBottom?: "none" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl",
   pillColor?: "primary" | "neutral" | "success" | "warning" | "error" | "info" | "data_1" | "data_2" | "data_3" | "data_4" | "data_5" | "data_6" | "data_7" | "data_8" | "windows" | "siding" | "roofing" | "doors" | "gutters" | "solar" | "insulation" | "accessories",
@@ -109,6 +109,7 @@ const Typeahead = ({
     multiKit: '',
     onCreateOption: null as null,
     plusIcon: false,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     onMultiValueClick: (_option: SelectValueType): any => undefined,
     pillColor: pillColor,
     ...props,

data/app/pb_kits/playbook/pb_typeahead/components/ClearIndicator.tsx

@@ -1,16 +1,24 @@
 import React, { useEffect } from 'react'
 import { components } from 'react-select'
 
-const ClearContainer = (props: any) => {
+type ClearContainerProps = {
+  children: React.ReactNode,
+  selectProps?: {
+    id: string,
+  },
+  clearValue: () => void,
+}
+
+const ClearContainer = (props: ClearContainerProps): React.ReactElement => {
   const { selectProps, clearValue } = props
   useEffect(() => {
     document.addEventListener(`pb-typeahead-kit-${selectProps.id}:clear`, clearValue)
-  }, [true])
+  }, [clearValue, selectProps.id])
 
   return (
     <components.ClearIndicator
-      className="clear_indicator"
-      {...props}
+        className="clear_indicator"
+        {...props}
     />
   )
 }

data/app/pb_kits/playbook/pb_typeahead/components/Control.tsx

@@ -5,7 +5,11 @@ import Flex from '../../pb_flex/_flex'
 import TextInput from '../../pb_text_input/_text_input'
 
 type Props = {
-  selectProps: any,
+    selectProps: {
+    dark?: boolean,
+    label: string,
+    error?: string,
+  },
 }
 
 const TypeaheadControl = (props: Props) => (

data/app/pb_kits/playbook/pb_typeahead/components/IndicatorsContainer.tsx

@@ -1,10 +1,15 @@
 import React from 'react'
 import { components } from 'react-select'
 
-const IndicatorsContainer = (props: any) => (
+type IndicatorsContainerProps = {
+  children: React.ReactNode,
+}
+
+
+const IndicatorsContainer = (props: IndicatorsContainerProps): React.ReactElement => (
   <components.IndicatorsContainer
-    className="text_input_indicators"
-    {...props}
+      className="text_input_indicators"
+      {...props}
   />
 )
 

data/app/pb_kits/playbook/pb_typeahead/components/MenuList.tsx

@@ -1,7 +1,12 @@
 import React from 'react'
 import { components } from 'react-select'
 
-const MenuList = (props: any) => {
+type MenuListProps = {
+  children: React.ReactNode,
+  footer: React.ReactNode,
+}
+
+const MenuList = (props: MenuListProps): React.ReactElement => {
   return (
   <components.MenuList {...props}>
     {props.children}

data/app/pb_kits/playbook/pb_typeahead/components/Option.tsx

@@ -3,7 +3,22 @@ import { components } from 'react-select'
 
 import User from '../../pb_user/_user'
 
-const Option = (props: any) => {
+type OptionProps = {
+  children: React.ReactNode,
+  label?: string,
+  data: {
+    imageUrl?: string,
+  },
+  selectProps: {
+    dark?: boolean,
+    valueComponent?: (data: {
+      imageUrl?: string,
+    }) => React.ReactNode,
+  },
+}
+
+
+const Option = (props: OptionProps): React.ReactElement => {
   const {
     imageUrl,
   } = props.data
@@ -14,11 +29,11 @@ const Option = (props: any) => {
       <>
         {!valueComponent && imageUrl &&
           <User
-            align="left"
-            avatarUrl={imageUrl}
-            dark={props.selectProps.dark}
-            name={props.label}
-            orientation="horizontal"
+              align="left"
+              avatarUrl={imageUrl}
+              dark={props.selectProps.dark}
+              name={props.label}
+              orientation="horizontal"
           />
         }