stalefish 8.0.4 → 8.0.6

package/components/dateTimePicker.mjs

@@ -4,7 +4,7 @@ import { attachFlatpickr } from '../adapters/flatpickr.mjs'
 import calendarIcon from './icons/calendarIcon.mjs'
 import timeIcon from './icons/timeIcon.mjs'
 
-let styles = css`
+const styles = css`
   .textfield {
     padding: 10px;
     border: solid 5px #c9c9c9;
@@ -80,7 +80,7 @@ let styles = css`
 `
 
 function change ({ e, holdingPen, property }) {
-  let ff = formField(holdingPen, property)(e)
+  const ff = formField(holdingPen, property)(e)
   // e.target.focus()
   return ff
 }
@@ -105,7 +105,7 @@ function detectTouchscreen () {
   return result
 }
 
-export default ({ wrapperStyle = null, holdingPen, label, placeholder, property, required, pattern, permanentTopPlaceholder = true, permanentTopLabel = false, flatpickrConfig = {}, timeOnly = false, disabled, disableClear = false, onchange, oninput }) => {
+export default ({ wrapperStyle = null, holdingPen, label, placeholder, property, required, pattern, permanentTopPlaceholder = true, permanentTopLabel = false, flatpickrConfig = {}, timeOnly = false, disabled, disableClear = false, onchange, oninput, uniqueKey }) => {
   // Determine whether we should force Flatpickr on mobile/touch devices.
   // By default we enable Flatpickr everywhere (disableMobile: true) so that
   // environments that would otherwise show the native date/time inputs will
@@ -115,8 +115,15 @@ export default ({ wrapperStyle = null, holdingPen, label, placeholder, property,
     ? flatpickrConfig.disableMobile
     : true
 
-  let el = html`
-    <div ${wrapperStyle ? { 'class': wrapperStyle } : ''} style="min-height: 55px; display: inline-block; width: calc(100% - 10px); margin: 40px 5px 5px 5px;">
+  // Create a stable id for the outer wrapper so we can query a real DOM node
+  // after the template is rendered. Prefer the provided uniqueKey from callers
+  // (report-pal already supplies it), otherwise fall back to property/name.
+  const wrapperId = `sf-flatpickr-${uniqueKey || property || Math.random().toString(36).slice(2)}`
+
+  const inputType = resolvedDisableMobile ? 'text' : (detectTouchscreen() ? (timeOnly ? 'time' : 'date') : 'text')
+
+  const el = html`
+    <div id="${wrapperId}" data-flatpickr-wrapper class="${wrapperStyle}" style="min-height: 55px; display: inline-block; width: calc(100% - 10px); margin: 40px 5px 5px 5px;">
        <div style="display: inline-block; width: 100%; text-align: left; position: relative; padding: 0;">
        <div class="${styles.icon}">${timeOnly ? timeIcon({ colour: '#ccc' }) : calendarIcon({ colour: '#ccc' })}</div>
        ${label ? html`<span class="${styles.label}" style="opacity: ${holdingPen[property] === 0 || holdingPen[property] || (permanentTopPlaceholder || permanentTopLabel) ? 1 : 0}; font-size: 16px; font-weight: normal; color: #999; margin-left: 5px; padding: 9px; background-color: rgba(255,255,255,0.8); position: absolute; top: -36px;">${label}${required ? ' *' : ''}</span>` : ''}
@@ -127,43 +134,58 @@ export default ({ wrapperStyle = null, holdingPen, label, placeholder, property,
     e.target.parentNode.parentNode._flatpickr.close()
     return false
   }}>clear</div>` : ''}
-       <input data-gramm="false" ?disabled=${disabled} style="${disabled ? 'cursor: not-allowed; opacity: 0.3;' : ''}" class="${styles.textfield} ${fieldIsTouched(holdingPen, property) === true ? styles.touched : ''}" ${required ? { required: 'required' } : ''} onfocus=${e => {
-  e.target.parentNode.parentNode._flatpickr && e.target.parentNode.parentNode._flatpickr.set('onValueUpdate', (fpDate, dateString) => {
-    let fauxE = {
-      currentTarget: {
-        validity: {
-          valid: true
-        },
-        value: dateString
-      }
-    }
-    formField(holdingPen, property)(fauxE)
-    onchange && onchange(fauxE)
-  })
-}} onchange=${e => { change({ e, holdingPen, property, label: styles.label }); onchange && onchange(e) }} oninput=${e => { e.target.defaultValue = ''; oninput && oninput(e) }} placeholder="${placeholder || ''}${required ? ' *' : ''}" type="${resolvedDisableMobile ? 'text' : (detectTouchscreen() ? (timeOnly ? 'time' : 'date') : 'text')}" ${pattern ? { pattern } : ''} value="${holdingPen[property] || ''}" data-input />
+       <input data-gramm="false" ?disabled=${disabled} style="${disabled ? 'cursor: not-allowed; opacity: 0.3;' : ''}" class="${styles.textfield} ${fieldIsTouched(holdingPen, property) === true ? styles.touched : ''}" ${required ? { required: 'required' } : ''} onchange=${e => { change({ e, holdingPen, property, label: styles.label }); onchange && onchange(e) }} oninput=${e => { e.target.defaultValue = ''; oninput && oninput(e) }} placeholder="${placeholder || ''}${required ? ' *' : ''}" type="${inputType}" ${pattern ? { pattern } : ''} .value=${holdingPen[property] || ''} data-input />
        </div>
     </div>
     `
 
-  // Attach flatpickr instance to the OUTER WRAPPER element (not the fragment) so
-  // internal clear/close handlers can access it consistently via parent wrappers.
-  // Using `this` or the fragment caused errors after migrating to halfcab/lit.
-  const wrapper = el.firstElementChild || el
-  attachFlatpickr(wrapper, flatpickr, Object.assign({}, { disableMobile: resolvedDisableMobile }, flatpickrConfig, {
-    wrap: true,
-    onValueUpdate: (fpDate, dateString) => {
-      let fauxE = {
-        currentTarget: {
-          validity: {
-            valid: true
+  // Attach flatpickr instance to the OUTER WRAPPER element after it is actually
+  // in the DOM. Passing the TemplateResult directly would not work because the
+  // adapter expects a real Element. We defer with requestAnimationFrame and
+  // query by id.
+  if (typeof window !== 'undefined') {
+    const doAttach = () => {
+      const wrapperEl = document.getElementById(wrapperId)
+      if (!wrapperEl) return
+      attachFlatpickr(
+        wrapperEl,
+        flatpickr,
+        Object.assign(
+          {},
+          { disableMobile: resolvedDisableMobile },
+          // Provide sensible defaults for time-only pickers; allow user config to override
+          timeOnly
+            ? {
+                dateFormat: flatpickrConfig && flatpickrConfig.dateFormat ? flatpickrConfig.dateFormat : 'H:i',
+                defaultDate:
+                  flatpickrConfig && typeof flatpickrConfig.defaultDate !== 'undefined'
+                    ? flatpickrConfig.defaultDate
+                    : (holdingPen && property && holdingPen[property] ? holdingPen[property] : undefined)
+              }
+            : null,
+          flatpickrConfig,
+          {
+            wrap: true,
+            onValueUpdate: (fpDate, dateString) => {
+              const fauxE = {
+                currentTarget: {
+                  validity: {
+                    valid: true
+                  },
+                  value: dateString
+                }
+              }
+              formField(holdingPen, property)(fauxE)
+              onchange && onchange(fauxE)
+            }
           },
-          value: dateString
-        }
-      }
-      formField(holdingPen, property)(fauxE)
-      onchange && onchange(fauxE)
+          timeOnly ? { noCalendar: true, enableTime: true } : null
+        )
+      )
     }
-  }, timeOnly ? { noCalendar: true, enableTime: true } : null))
+    // Defer to next frame to ensure the element is connected
+    window.requestAnimationFrame(doAttach)
+  }
 
   return el
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stalefish",
-  "version": "8.0.4",
+  "version": "8.0.6",
   "description": "Simple function based component library for halfcab tagged template literals",
   "main": "index.mjs",
   "module": "index.mjs",