playbook_ui 14.13.0.pre.rc.10 → 14.14.0.pre.alpha.pbntr500currencykithandlingofnullvalues6275

data/app/pb_kits/playbook/pb_table/table_body.html.erb

@@ -1,11 +1,17 @@
 <% if object.tag == "table" %>
-    <%= content_tag(:tbody,
-      aria: object.aria,
-      class: object.classname,
-      data: object.data,
-      id: object.id,
-      **combined_html_options) do %>
-      <%= content.presence %>
+    <% if object.draggable_container %>
+      <%= pb_rails("draggable/draggable_container", props: { tag: "tbody", classname: object.classname, data: object.data }) do %>
+        <%= content.presence %>
+      <% end %>
+    <% else %>
+      <%= content_tag(:tbody,
+        aria: object.aria,
+        class: object.classname,
+        data: object.data,
+        id: object.id,
+        **combined_html_options) do %>
+        <%= content.presence %>
+      <% end %>
     <% end %>
 <% else %>
     <%= content_tag(:div,

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

@@ -6,6 +6,8 @@ module Playbook
       prop :tag, type: Playbook::Props::Enum,
                  values: %w[table div],
                  default: "table"
+      prop :draggable_container, type: Playbook::Props::Boolean,
+                                 default: false
 
       def classname
         generate_classname("pb_table_tbody")

data/app/pb_kits/playbook/pb_table/table_row.html.erb

@@ -5,6 +5,7 @@
     data: object.data.merge(id: object.id),  
     id: object.id,
     'data-pb-table-collapsible-wrapper' => true,
+    'data-pb-table-collapsible-cell-id' => object.toggle_cell_id,
     **combined_html_options) do %>
     <%= content.presence %>
   <% end %>
@@ -18,13 +19,19 @@
     <% end %>  
   </tr>
 <% elsif object.tag == "table" %>
-    <%= content_tag(:tr,
-      aria: object.aria,
-      class: object.classname,
-      data: object.data,
-      id: object.id,
-      **combined_html_options) do %>
-      <%= content.presence %>
+    <% if object.draggable_item %>
+      <%= pb_rails("draggable/draggable_item", props:{ drag_id: object.drag_id, tag: "tr", classname: object.classname, data: object.data }) do %>
+        <%= content.presence %>
+      <% end %>
+    <% else %>
+      <%= content_tag(:tr,
+        aria: object.aria,
+        class: object.classname,
+        data: object.data,
+        id: object.id,
+        **combined_html_options) do %>
+        <%= content.presence %>
+      <% end %>
     <% end %>
 <% else %>
     <%= content_tag(:div,

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

@@ -13,9 +13,14 @@ module Playbook
       prop :collapsible_content
       prop :collapsible_side_highlight, type: Playbook::Props::Boolean,
                                         default: true
+      prop :toggle_cell_id, type: Playbook::Props::String
+      prop :draggable_item, type: Playbook::Props::Boolean,
+                            default: false
+      prop :drag_id, type: Playbook::Props::String,
+                     default: nil
 
       def classname
-        generate_classname("pb_table_row_kit", side_highlight_class) + tag_class
+        generate_classname("pb_table_row_kit", side_highlight_class) + tag_class + collapsible_cell_class
       end
 
       def side_highlight_class
@@ -25,6 +30,14 @@ module Playbook
       def tag_class
         " pb_table_tr"
       end
+
+      def collapsible_cell_class
+        if toggle_cell_id
+          " collapsible_cell"
+        else
+          ""
+        end
+      end
     end
   end
 end

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

@@ -27,6 +27,20 @@
     placeholder: "123-45-6789"
   }) %>
 
+  <%= pb_rails("text_input", props: {
+    label: "Credit Card",
+    mask: "credit_card",
+    margin_bottom: "md",
+    placeholder: "1234 5678 9012 3456"
+  }) %>
+
+  <%= pb_rails("text_input", props: {
+    label: "CVV",
+    mask: "cvv",
+    margin_bottom: "md",
+    placeholder: "123"
+  }) %>
+
   <%= pb_rails("title" , props: {
     text: "Hidden Input Under The Hood",
     padding_bottom: "sm"
@@ -38,7 +52,7 @@
     margin_bottom: "md",
     name: "currency_name",
     id: "example-currency",
-    placeholder: "$0.00",
+    value: "$99.99",
   }) %>
 
 <style>

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

@@ -1,102 +1,80 @@
-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);
-      });
-    });
+import PbEnhancedElement from "../pb_enhanced_element"
+import { INPUTMASKS } from "./inputMask"
 
+export default class PbTextInput extends PbEnhancedElement {
+  static get selector() {
+    return '[data-pb-input-mask="true"]';
   }
-}
-
-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 "";
+  connect() {
+    this.handleInput = this.handleInput.bind(this);
+    this.element.addEventListener("input", this.handleInput);
+    this.handleInput(); 
+  }
 
-  return new Intl.NumberFormat("en-US", {
-    style: "currency",
-    currency: "USD",
-    maximumFractionDigits: 2,
-  }).format(dollars);
-}
+  disconnect() {
+    this.element.removeEventListener("input", this.handleInput);
+  }
 
-function formatSSN(value) {
-  const cleaned = value.replace(/\D/g, "").slice(0, 9);
-  return cleaned
-    .replace(/(\d{5})(?=\d)/, "$1-")
-    .replace(/(\d{3})(?=\d)/, "$1-");
+  handleInput() {
+    const maskType = this.element.getAttribute("mask");
+    const cursorPosition = this.element.selectionStart;
+    const rawValue = this.element.value;
+    let formattedValue = rawValue;
+
+    const maskKey = {
+      currency: 'currency',
+      ssn: 'ssn',
+      postal_code: 'postalCode',
+      zip_code: 'zipCode',
+      credit_card: 'creditCard',
+      cvv: 'cvv',
+    }[maskType];
+
+    if (maskKey && INPUTMASKS[maskKey]) {
+      formattedValue = INPUTMASKS[maskKey].format(rawValue);
+    }
+
+    const sanitizedInput = this.element
+      .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;
+        case "credit_card":
+          sanitizedInput.value = sanitizeCreditCard(formattedValue);
+          break;
+        default:
+          sanitizedInput.value = formattedValue;
+      }
+    }
+
+    this.element.value = formattedValue;
+    setCursorPosition(this.element, cursorPosition, rawValue, formattedValue);
+  }
 }
 
-function formatZipCode(value) {
-  return value.replace(/\D/g, "").slice(0, 5);
+function sanitizeSSN(input) {
+  return input.replace(/\D/g, "");
 }
 
-function formatPostalCode(value) {
-  const cleaned = value.replace(/\D/g, "").slice(0, 9);
-  return cleaned.replace(/(\d{5})(?=\d)/, "$1-");
+function sanitizeCurrency(input) {
+  return input.replace(/[$,]/g, "");
 }
 
-function sanitizeSSN(input) {
+function sanitizeCreditCard(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.rb

@@ -4,13 +4,15 @@
 module Playbook
   module PbTextInput
     class TextInput < Playbook::KitBase
-      VALID_MASKS = %w[currency zipCode postalCode ssn].freeze
+      VALID_MASKS = %w[currency zip_code postal_code ssn credit_card cvv].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}',
+        "credit_card" => '\d{4} \d{4} \d{4} \d{4}',
+        "cvv" => '\d{3,4}',
       }.freeze
 
       prop :autocomplete, type: Playbook::Props::Boolean,
@@ -34,7 +36,8 @@ module Playbook
       prop :add_on, type: Playbook::Props::NestedProps,
                     nested_kit: Playbook::PbTextInput::AddOn
 
-      prop :mask, type: Playbook::Props::String,
+      prop :mask, type: Playbook::Props::Enum,
+                  values: ["currency", "zip_code", "postal_code", "ssn", "credit_card", "cvv", nil],
                   default: nil
 
       def classname