playbook_ui 14.11.0.pre.rc.3 → 14.11.0.pre.rc.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ecf72ed74e3b579c11f3ec65bcad5ef39066b5450a77792ab9cb2b6b604050ce
-  data.tar.gz: '08d63e140dbbf4f6d1afa007e661ba5270d2f4092d8d3d4d1504a6a43628641c'
+  metadata.gz: c72027773256a0cd54ed98000e899215fa9a3d74ed7e8ed1e4c2ddb5f90c5db8
+  data.tar.gz: 361f49d027b7894d400c60d323652233f82255ad645abc65f4e4d1436566c612
 SHA512:
-  metadata.gz: '0198bec37a39245fa764143ecf6c51128b02204ddf7ab6535f7d51094bfbc4ca1937da61b3ba2ef34d961e9c4c77bd8d8b6fd22d5d3cf1a028404952a2a99320'
-  data.tar.gz: ca29f43dc9a9aa8f2b33d58e58fbffcabff6222ed49ef3803f78254380769fa59ad782d42ccfff2c44039b29c2a8c9e206696cf0c23450c7274bf27dc6c002b9
+  metadata.gz: 3d982e205511cae9f94b3f1f081b5cd827fb57b27d171d1792493b6380079fed58a5a9b4456b0fa9e5ba76d31f0ee938eabccbd4cbaff6402c0b77717ae9e42f
+  data.tar.gz: 8fb7285f5ab97ef327341fdd7d78ebf0a87c05879baa8ce2883834ffad2a517a6293d7f70f96dad3388129bac21ab3124a5d00f13768099bd003532e5fb28dee

data/app/pb_kits/playbook/pb_text_input/_text_input.tsx

@@ -123,6 +123,13 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
 
   const childInput = children ? children.type === "input" : undefined
 
+  let formattedValue;
+  if (isMaskedInput && value) {
+    formattedValue = INPUTMASKS[mask].formatDefaultValue(value.toString())
+  } else {
+    formattedValue = value
+  }
+
   const textInput = (
     childInput ? React.cloneElement(children, { className: "text_input" }) :
     (<input
@@ -138,7 +145,7 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
         ref={ref}
         required={required}
         type={type}
-        value={value}
+        value={formattedValue}
      />)
   )
 

data/app/pb_kits/playbook/pb_text_input/inputMask.ts

@@ -1,5 +1,6 @@
 type InputMask = {
     format: (value: string) => string
+    formatDefaultValue: (value: string) => string
     pattern: string
     placeholder: string
 }
@@ -8,6 +9,24 @@ type InputMaskDictionary = {
     [key in 'currency' | 'zipCode' | 'postalCode' | 'ssn']: InputMask
 }
 
+const formatCurrencyDefaultValue = (value: string): string => {
+    // Remove non-numeric characters except for the decimal point
+    const numericValue = value.replace(/[^0-9.]/g, '')
+
+    if (!numericValue) return ''
+
+    // Parse the numeric value as a float to handle decimals
+    const dollars = parseFloat(numericValue)
+    if (isNaN(dollars) || dollars === 0) return ''
+
+    // Format as currency
+    return new Intl.NumberFormat('en-US', {
+        style: 'currency',
+        currency: 'USD',
+        maximumFractionDigits: 2,
+    }).format(dollars)
+}
+
 const formatCurrency = (value: string): string => {
     const numericValue = value.replace(/[^0-9]/g, '').slice(0, 15)
 
@@ -42,22 +61,26 @@ const formatSSN = (value: string): string => {
 export const INPUTMASKS: InputMaskDictionary = {
     currency: {
         format: formatCurrency,
+        formatDefaultValue: formatCurrencyDefaultValue,
         // eslint-disable-next-line no-useless-escape
         pattern: '^\\$\\d{1,3}(?:,\\d{3})*(?:\\.\\d{2})?$',
         placeholder: '$0.00',
     },
     zipCode: {
         format: formatBasicPostal,
+        formatDefaultValue: formatBasicPostal,
         pattern: '\\d{5}',
         placeholder: '12345',
     },
     postalCode: {
         format: formatExtendedPostal,
+        formatDefaultValue: formatExtendedPostal,
         pattern: '\\d{5}-\\d{4}',
         placeholder: '12345-6789',
     },
     ssn: {
         format: formatSSN,
+        formatDefaultValue: formatSSN,
         pattern: '\\d{3}-\\d{2}-\\d{4}',
         placeholder: '123-45-6789',
     },