playbook_ui 17.1.0.pre.rc.2 → 17.1.0.pre.rc.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d83635cbc918a181e0ef4f93f6125558c127215cde8da52d2ad73730d45f9850
-  data.tar.gz: 76b6a74dcaa17a95ccc4b8dbea5962b6d83efec85096ac0fa12917548160aad7
+  metadata.gz: 02b1ea72561f3498a21c3cf0595c72212fd2e04ba63539688d7239ba7261d6f9
+  data.tar.gz: 412dec4b2daa3b7371785dd21701dec9872a188e36418ac13c969025f7c49812
 SHA512:
-  metadata.gz: fd2450ff3000b7fcba6606b00144302dde10ccd0a785c8618da1fe023dac56701af9b6baced5a53f4ffb192edf73597d32ffd6c49a622b7693e96cd3c3b1b977
-  data.tar.gz: 8e636e6d6b2f439bc68991cac04f7f066974b5bc9c001a40d9e1eaa4b4d8b40c2f86a16912b7a1d4e68ede24814178e4c00610e86f46bd467f19fda18ce16347
+  metadata.gz: b4ba91e8ba28694803157c76d2cf93d1e204de9bebe3cd02c470889a38e6e38f78f57f8d0f9019c1e864f4d20fefd0873a051b7e6e90bf0124e1a93125b98d24
+  data.tar.gz: d1a34a60dbb2f1b2ce9125e08773d9176d23a4208d57dfbd0a35a1983df2920702fe17343cfed9510b82d1e7ceaf2d2207b91c9d6cb4a10945c364e7578405d4

data/app/pb_kits/playbook/pb_date_picker/date_picker.test.js

@@ -100,6 +100,85 @@ describe('DatePicker Kit', () => {
     expect(kit).not.toHaveAttribute('data-default-value')
   })
 
+  test.each([
+    ['no-separators', '08152026', '08/15/2026'],
+    ['all-separators', '08/15/2026', '08/15/2026'],
+    ['year-end', '12312026', '12/31/2026'],
+    ['separator-before-year-only', '0326/2026', '03/26/2026'],
+    ['separator-after-month-only', '03/262026', '03/26/2026'],
+  ])('allowInput saves the typed date %s as %s', async (caseName, typedValue, expectedValue) => {
+    const testId = `datepicker-allow-input-${caseName}`
+    render(
+      <DatePicker
+          allowInput
+          data={{ testid: testId }}
+          format="m/d/Y"
+          pickerId={`date-picker-allow-input-${caseName}`}
+          placeholder="mm/dd/yyyy"
+      />
+    )
+
+    const kit = screen.getByTestId(testId)
+    const input = within(kit).getByPlaceholderText('mm/dd/yyyy')
+
+    fireEvent.change(input, { target: { value: typedValue } })
+    fireEvent.blur(input)
+
+    await waitFor(() => {
+      expect(input).toHaveValue(expectedValue)
+    })
+  })
+
+  test.each([
+    ['no-slashes', '08122026 at 12:00 AM', '08/12/2026 at 12:00 AM'],
+    ['with-slashes', '08/12/2026 at 12:00 AM', '08/12/2026 at 12:00 AM'],
+  ])('allowInput with enableTime saves %s as %s', async (caseName, typedValue, expectedValue) => {
+    const testId = `datepicker-allow-input-time-${caseName}`
+    render(
+      <DatePicker
+          allowInput
+          data={{ testid: testId }}
+          enableTime
+          format="m/d/Y"
+          pickerId={`date-picker-allow-input-time-${caseName}`}
+          placeholder="mm/dd/yyyy"
+      />
+    )
+
+    const kit = screen.getByTestId(testId)
+    const input = within(kit).getByPlaceholderText('mm/dd/yyyy')
+
+    fireEvent.change(input, { target: { value: typedValue } })
+    fireEvent.blur(input)
+
+    await waitFor(() => {
+      expect(input).toHaveValue(expectedValue)
+    })
+  })
+
+  test('allowInput leaves ambiguous digit-only input to flatpickr', async () => {
+    const testId = 'datepicker-allow-input-unpadded'
+    render(
+      <DatePicker
+          allowInput
+          data={{ testid: testId }}
+          format="m/d/Y"
+          pickerId="date-picker-allow-input-unpadded"
+          placeholder="mm/dd/yyyy"
+      />
+    )
+
+    const kit = screen.getByTestId(testId)
+    const input = within(kit).getByPlaceholderText('mm/dd/yyyy')
+
+    fireEvent.change(input, { target: { value: '0815' } })
+    fireEvent.blur(input)
+
+    await waitFor(() => {
+      expect(input).not.toHaveValue('08/15')
+    })
+  })
+
   test('inLine alone adds inline-date-picker class and inline control icons, not the calendar icon', () => {
     const testId = 'datepicker-inline-only'
     render(

data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts

@@ -28,6 +28,44 @@ const getPositionElement = (element: string | Element) => {
   return (typeof element === 'string') ? document.querySelectorAll(element)[0] : element
 }
 
+// For allowInput: digits a zero-padded value occupies for each flatpickr date token
+const dateTokenWidths: { [key: string]: number } = { Y: 4, d: 2, j: 2, m: 2, n: 2, y: 2 }
+
+const escapeForCharacterClass = (char: string) => char.replace(/[\\\]^-]/g, '\\$&')
+
+// Flatpickr parses format separators as "any character" and re-matches a growing regex per token,
+// so allowInput values with missing separators get mis-grouped: "08152026" (m/d/Y) reads day "52"
+// and "0326/2026" reads day "6". Rebuild the leading date run with the format's own separators
+// whenever it holds exactly the digits the format expects, leaving any suffix (enableTime's
+// "at 12:00 AM") untouched. Partial ("0326/2026") and unseparated ("03262026") input both normalize;
+const withDateSeparators = (dateStr: string, format: string) => {
+  if (typeof dateStr !== 'string') return dateStr
+
+  const tokens = [...(format || '').split(' ')[0]]
+  const expectedLength = tokens.reduce((total, token) => total + (dateTokenWidths[token] || 0), 0)
+  const hasUnsupportedToken = tokens.some((token) => /[a-z]/i.test(token) && !dateTokenWidths[token])
+  if (hasUnsupportedToken || expectedLength === 0) return dateStr
+
+  const separators = [...new Set(tokens.filter((token) => !dateTokenWidths[token]))]
+  const separatorClass = separators.map(escapeForCharacterClass).join('')
+  const match = dateStr.match(new RegExp(`^(\\s*)([\\d${separatorClass}]*\\d)([\\s\\S]*)$`))
+  if (!match) return dateStr
+
+  const [, leadingSpace, dateRun, rest] = match
+  const digits = separatorClass ? dateRun.replace(new RegExp(`[${separatorClass}]`, 'g'), '') : dateRun
+  if (digits.length !== expectedLength) return dateStr
+
+  let position = 0
+  const dated = tokens.map((token) => {
+    const width = dateTokenWidths[token]
+    if (!width) return token
+    position += width
+    return digits.slice(position - width, position)
+  }).join('')
+
+  return `${leadingSpace}${dated}${rest}`
+}
+
 type DatePickerConfig = {
   closeOnSelect?: boolean,
   customQuickPickDates: { override: boolean, dates: any[] },
@@ -576,6 +614,9 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     minDate: effectiveMinDate,
     mode,
     nextArrow: `<div style="height: 14px;">${angleRightString}</div>`,
+    ...(allowInput && {
+      parseDate: (datestr, format) => flatpickr.parseDate(withDateSeparators(datestr, format), format),
+    }),
     onOpen: [(_selectedDates, _dateStr, fp) => {
       activePortalZIndex = portalHost
         ? resolvePortaledFloatingZIndex(

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.html.erb

@@ -11,30 +11,20 @@
 <%= javascript_tag do %>
     document.addEventListener('DOMContentLoaded', function () {
         const form = document.querySelector('#example-form-validation');
-        
-        // Wait for React component to mount
-        function waitForComponent() {
-            const phoneInput = form.querySelector('#validation');
-            
-            if (!phoneInput) {
-                setTimeout(waitForComponent, 100);
-                return;
-            }
-            
-            // Wait for intl-tel-input to initialize, then focus and blur to trigger validation
+        const phoneInput = form.querySelector('#validation');
+
+        if (phoneInput) {
             setTimeout(function() {
                 phoneInput.focus({ preventScroll: true });
                 setTimeout(function() {
                     phoneInput.blur();
                 }, 100);
-            }, 500);
+            }, 100);
         }
-        
-        waitForComponent();
-        
-        // Prevent form submission if there are validation errors
+
         form.addEventListener('submit', function (e) {
-            if (e.target.querySelectorAll('[error]:not([error=""])').length > 0) {
+            if (form.querySelector('[data-pb-phone-validation-error="true"]') ||
+                form.querySelector('.pb_body_kit_negative')) {
                 e.preventDefault();
             }
         });