playbook_ui 14.12.0.pre.alpha.playrailsinputmaskissue5933 → 14.12.0.pre.alpha.testingwithfas5686

data/app/pb_kits/playbook/pb_table/styles/_tablet_collapse.scss

@@ -74,31 +74,6 @@
       &.table-card {
         background: none !important;
 
-        &.dark {
-          tbody, .pb_table_tbody {
-            tr, .pb_table_tr {
-              td, .pb_table_td {
-                background: $bg_dark_card !important;
-                border-color: $border_dark !important;
-                &:before {
-                  color: $text_dk_light !important;
-                }
-                &:after {
-                  height: 0;
-                  background-color: transparent;
-                }
-  
-                &:first-child {
-                  border-radius: $border_rad_light $border_rad_light 0 0 !important;
-                }
-                &:last-child {
-                  border-radius: 0 0 $border_rad_light $border_rad_light !important;
-                }
-              }
-            }
-          }
-        }
-
         tbody, .pb_table_tbody {
           tr, .pb_table_tr {
             td, .pb_table_td {

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

@@ -38,7 +38,7 @@
     margin_bottom: "md",
     name: "currency_name",
     id: "example-currency",
-    value: "$99.99",
+    placeholder: "$0.00",
   }) %>
 
 <style>

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

@@ -1,71 +1,102 @@
-import PbEnhancedElement from "../pb_enhanced_element"
-import { INPUTMASKS } from "./inputMask"
+export default class PbTextInput {
+  static start() {
+    const inputElements = document.querySelectorAll('[data-pb-input-mask="true"]');
 
-export default class PbTextInput extends PbEnhancedElement {
-  static get selector() {
-    return '[data-pb-input-mask="true"]';
-  }
+    inputElements.forEach((inputElement) => {
+      inputElement.addEventListener("input", (event) => {
+        const maskType = inputElement.getAttribute("mask");
+        const cursorPosition = inputElement.selectionStart;
 
-  connect() {
-    this.handleInput = this.handleInput.bind(this);
-    this.element.addEventListener("input", this.handleInput);
-    this.handleInput(); 
-  }
+        let rawValue = event.target.value;
+        let formattedValue = rawValue;
 
-  disconnect() {
-    this.element.removeEventListener("input", this.handleInput);
-  }
+        // 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);
+      });
+    });
 
-  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',
-    }[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;
-        default:
-          sanitizedInput.value = formattedValue;
-      }
-    }
-
-    this.element.value = formattedValue;
-    setCursorPosition(this.element, 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, "");
+  return input.replace(/\D/g, ""); 
 }
 
 function sanitizeCurrency(input) {
-  return input.replace(/[$,]/g, "");
+  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_tooltip/_tooltip.tsx

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

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default.html.erb

@@ -43,4 +43,4 @@
         Whoa. I'm a tooltip.
     <% end %>
   <% end %>
-<% end %>
+<% end %>

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

@@ -1,4 +1,5 @@
 import PbEnhancedElement from '../pb_enhanced_element'
+
 import {
   createPopperLite as createPopper,
   flip,
@@ -16,34 +17,27 @@ export default class PbTooltip extends PbEnhancedElement {
 
   connect() {
     this.triggerElements.forEach((trigger) => {
-      const method = this.triggerMethod
-
-      if (method === 'click') {
-        trigger.addEventListener('click', () => {
+      trigger.addEventListener('mouseenter', () => {
+        this.mouseenterTimeout = setTimeout(() => {
           this.showTooltip(trigger)
-        })
-      } else {
-        trigger.addEventListener('mouseenter', () => {
-          this.mouseenterTimeout = setTimeout(() => {
-            this.showTooltip(trigger)
-            this.checkCloseTooltip(trigger)
-          }, TOOLTIP_TIMEOUT)
-
-          trigger.addEventListener('mouseleave', () => {
-            clearTimeout(this.mouseenterTimeout)
-            setTimeout(() => {
-              this.hideTooltip()
-            }, 0)
-          }, { once: true })
-        })
-
-        this.tooltip.addEventListener('mouseenter', () => {
+          this.checkCloseTooltip(trigger)
+        }, TOOLTIP_TIMEOUT)
+
+        trigger.addEventListener('mouseleave', () => {
           clearTimeout(this.mouseenterTimeout)
-        })
-        this.tooltip.addEventListener('mouseleave', () => {
-          this.hideTooltip()
-        })
-      }
+
+          setTimeout(() => {
+            this.hideTooltip()
+          }, 0)
+        }, { once: true })
+      })
+    })
+
+    this.tooltip.addEventListener('mouseenter', () => {
+      clearTimeout(this.mouseenterTimeout)
+    })
+    this.tooltip.addEventListener('mouseleave', () => {
+      this.hideTooltip()
     })
   }
 
@@ -60,7 +54,7 @@ export default class PbTooltip extends PbEnhancedElement {
   }
 
   showTooltip(trigger) {
-    if (this.shouldShowTooltip === 'false') return
+    if (this.shouldShowTooltip === "false") return
 
     this.popper = createPopper(trigger, this.tooltip, {
       placement: this.position,
@@ -84,13 +78,6 @@ export default class PbTooltip extends PbEnhancedElement {
       ],
     })
     this.tooltip.classList.add('show')
-
-    if (this.triggerMethod === 'click') {
-      clearTimeout(this.autoHideTimeout)
-      this.autoHideTimeout = setTimeout(() => {
-        this.hideTooltip()
-      }, 1000)
-    }
   }
 
   hideTooltip() {
@@ -107,26 +94,25 @@ export default class PbTooltip extends PbEnhancedElement {
     let triggerEl
 
     if (this.triggerElementId) {
-      triggerEl = document.querySelector(`#${this.triggerElementId}`)
+      triggerEl = document.querySelector(`#${this.triggerElementId}`) //deprecated
     } else {
       const selectorIsId = this.triggerElementSelector.indexOf('#') > -1
-      triggerEl = selectorIsId
-        ? document.querySelector(`${this.triggerElementSelector}`)
-        : document.querySelectorAll(`${this.triggerElementSelector}`)
+      triggerEl = selectorIsId ? document.querySelector(`${this.triggerElementSelector}`) :
+        document.querySelectorAll(`${this.triggerElementSelector}`)
     }
 
     if (!triggerEl) {
+      /* eslint no-console: ["error", { allow: ["warn", "error"] }] */
       console.error('Tooltip Kit: an invalid or unavailable DOM reference was provided!')
       return []
     }
 
     if (!triggerEl.length) triggerEl = [triggerEl]
-    return (this._triggerElements = this._triggerElements || triggerEl)
+    return this._triggerElements = (this._triggerElements || triggerEl)
   }
 
   get tooltip() {
-    return (this._tooltip =
-      this._tooltip || this.element.querySelector(`#${this.tooltipId}`))
+    return this._tooltip = (this._tooltip || this.element.querySelector(`#${this.tooltipId}`))
   }
 
   get position() {
@@ -148,8 +134,4 @@ export default class PbTooltip extends PbEnhancedElement {
   get shouldShowTooltip() {
     return this.element.dataset.pbTooltipShowTooltip
   }
-
-  get triggerMethod() {
-    return this.element.dataset.pbTooltipTriggerMethod || 'hover'
-  }
 }

data/app/pb_kits/playbook/pb_tooltip/tooltip.rb

@@ -9,9 +9,6 @@ module Playbook
       prop :tooltip_id
       prop :dark, type: Playbook::Props::Boolean,
                   default: false
-      prop :trigger_method, type: Playbook::Props::Enum,
-                            values: %w[hover click],
-                            default: "hover"
 
       def classname
         generate_classname("pb_tooltip_kit", dark_class)
@@ -24,8 +21,7 @@ module Playbook
           pb_tooltip_trigger_element_selector: trigger_element_selector,
           pb_tooltip_trigger_element_id: trigger_element_id,
           pb_tooltip_tooltip_id: tooltip_id,
-          pb_tooltip_show_tooltip: true,
-          pb_tooltip_trigger_method: trigger_method
+          pb_tooltip_show_tooltip: true
         )
       end
 

data/app/pb_kits/playbook/pb_user/_user.tsx

@@ -13,7 +13,6 @@ type UserProps = {
   aria?: {[key: string]: string},
   avatar?: boolean,
   avatarUrl?: string,
-  bold?: boolean,
   className?: string,
   dark?: boolean,
   data?: {[key: string]: string},
@@ -33,7 +32,6 @@ const User = (props: UserProps): React.ReactElement => {
     aria = {},
     avatar = false,
     avatarUrl,
-    bold = true,
     className,
     dark = false,
     data = {},
@@ -77,7 +75,6 @@ const User = (props: UserProps): React.ReactElement => {
       }
       <div className="content_wrapper">
         <Title
-            bold={bold}
             dark={dark}
             size={size == 'lg' ? 3 : 4}
             text={name}

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

@@ -2,7 +2,6 @@ examples:
 
   rails:
   - user_default: Default
-  - user_light_weight: Light Weight
   - user_with_territory: With Territory
   - user_text_only: Text Only
   - user_size: Horizontal Size
@@ -12,7 +11,6 @@ examples:
 
   react:
   - user_default: Default
-  - user_light_weight: Light Weight
   - user_with_territory: With Territory
   - user_text_only: Text Only
   - user_size: Horizontal Size

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

@@ -1,5 +1,4 @@
 export { default as UserDefault } from './_user_default.jsx'
-export { default as UserLightWeight } from './_user_light_weight.jsx'
 export { default as UserWithTerritory } from './_user_with_territory.jsx'
 export { default as UserTextOnly } from './_user_text_only.jsx'
 export { default as UserSize } from './_user_size.jsx'

data/app/pb_kits/playbook/pb_user/user.html.erb

@@ -12,7 +12,7 @@
     }) %>
   <% end %>
   <%= content_tag(:div, class: "content_wrapper") do %>
-    <%= pb_rails("title", props: { text: object.name, size: object.title_size, dark: object.dark, bold: object.bold }) %>
+    <%= pb_rails("title", props: { text: object.name, size: object.title_size, dark: object.dark }) %>
     <%= pb_rails("body", props: {
       text: "#{object.details}",
       dark: object.dark,

data/app/pb_kits/playbook/pb_user/user.rb

@@ -9,7 +9,6 @@ module Playbook
       prop :avatar, type: Playbook::Props::Boolean,
                     default: false
       prop :avatar_url
-      prop :bold, type: Playbook::Props::Boolean, default: true
       prop :name
       prop :orientation, type: Playbook::Props::Enum,
                          values: %w[vertical horizontal],

data/app/pb_kits/playbook/pb_user/user.test.js

@@ -26,17 +26,3 @@ test('subtitle prop accepts a node', () => {
 
   expect(screen.getByTestId('test-subtitle-block')).toHaveTextContent('test caption')
 })
-
-test('bold prop applies correct styling when false', () => {
-  render(
-    <User
-        bold={false}
-        data={{ testid: 'test-bold-false' }}
-        name="Anna Black"
-    />
-  )
-  const titleElement = screen.getByText("Anna Black")
-  expect(titleElement).toBeInTheDocument()
-
-  expect(titleElement).toHaveClass('pb_title_kit_size_4_thin')
-})