stalefish 8.0.2 → 8.0.4

package/adapters/flatpickr.mjs

@@ -0,0 +1,104 @@
+/**
+ * Flatpickr adapter for Stalefish (halfcab/lit-based)
+ *
+ * Goals:
+ * - Always initialize flatpickr on a real Element (not a DocumentFragment/TemplateResult)
+ * - Defer initialization until the node is connected, to be SSR/DOM-safe
+ * - Store the instance on the wrapper element (`wrapper._flatpickr`) consistently
+ * - Provide simple attach/detach helpers for reuse across components
+ *
+ * Usage:
+ *   import flatpickr from 'flatpickr'
+ *   import { attachFlatpickr, detachFlatpickr } from '../adapters/flatpickr.mjs'
+ *
+ *   const wrapper = el.firstElementChild // your component's outer <div>
+ *   const instance = attachFlatpickr(wrapper, flatpickr, { wrap: true, ...options })
+ *   // later on removal:
+ *   detachFlatpickr(wrapper)
+ */
+
+/**
+ * Resolves the actual wrapper Element to pass to flatpickr.
+ * Accepts either an Element, or a container whose firstElementChild is the wrapper.
+ * Falls back to querySelector for common markers if necessary.
+ * @param {any} node
+ * @returns {Element|null}
+ */
+function resolveWrapperElement (node) {
+  if (!node) return null
+  // If it's already an Element (HTMLElement/SVGElement), use it directly
+  if (typeof Element !== 'undefined' && node instanceof Element) return node
+  // If it's a container/fragment with a firstElementChild, use that
+  if (node.firstElementChild) return node.firstElementChild
+  // Last resort: try to find a likely wrapper inside
+  if (node.querySelector) {
+    return node.querySelector('[data-flatpickr-wrapper], [data-input]')
+  }
+  return null
+}
+
+/**
+ * Attaches or updates a flatpickr instance on the given wrapper/container.
+ * The instance is stored on `wrapperEl._flatpickr`.
+ *
+ * @param {Element|any} wrapperOrContainer - An Element or a container whose firstElementChild is the wrapper
+ * @param {Function} flatpickrLib - The flatpickr factory function (import flatpickr from 'flatpickr')
+ * @param {Object} config - Flatpickr configuration options
+ * @returns {Object|null} flatpickr instance, or null if deferred/not created
+ */
+export function attachFlatpickr (wrapperOrContainer, flatpickrLib, config = {}) {
+  if (typeof window === 'undefined') return null // SSR guard
+  if (!flatpickrLib) return null
+
+  const wrapperEl = resolveWrapperElement(wrapperOrContainer)
+  if (!wrapperEl) return null
+
+  // If instance already exists, try to update options where supported
+  if (wrapperEl._flatpickr) {
+    try {
+      // Not all options are dynamically settable, but this is a safe best-effort
+      wrapperEl._flatpickr.set(config)
+    } catch (e) {
+      try {
+        wrapperEl._flatpickr.destroy()
+      } catch (_) {}
+      wrapperEl._flatpickr = null
+    }
+  }
+
+  const init = () => {
+    // Ensure wrap:true is preserved if provided; caller decides
+    const instance = flatpickrLib(wrapperEl, config)
+    wrapperEl._flatpickr = instance
+    return instance
+  }
+
+  // If not connected yet, defer until the next frame when likely connected
+  if (!wrapperEl.isConnected) {
+    requestAnimationFrame(() => {
+      if (!wrapperEl._flatpickr && wrapperEl.isConnected) {
+        try { init() } catch (e) { /* swallow init errors in deferred path */ }
+      }
+    })
+    return null
+  }
+
+  return init()
+}
+
+/**
+ * Destroys and detaches a flatpickr instance from the wrapper element, if present.
+ * @param {Element|any} wrapperOrContainer
+ */
+export function detachFlatpickr (wrapperOrContainer) {
+  const wrapperEl = resolveWrapperElement(wrapperOrContainer)
+  if (wrapperEl && wrapperEl._flatpickr) {
+    try { wrapperEl._flatpickr.destroy() } catch (e) {}
+    try { delete wrapperEl._flatpickr } catch (e) { wrapperEl._flatpickr = null }
+  }
+}
+
+export default {
+  attachFlatpickr,
+  detachFlatpickr
+}

package/components/dateTimePicker.mjs

@@ -1,5 +1,6 @@
 import { html, css, formField, fieldIsTouched } from 'halfcab'
 import flatpickr from 'flatpickr'
+import { attachFlatpickr } from '../adapters/flatpickr.mjs'
 import calendarIcon from './icons/calendarIcon.mjs'
 import timeIcon from './icons/timeIcon.mjs'
 
@@ -105,6 +106,15 @@ function detectTouchscreen () {
 }
 
 export default ({ wrapperStyle = null, holdingPen, label, placeholder, property, required, pattern, permanentTopPlaceholder = true, permanentTopLabel = false, flatpickrConfig = {}, timeOnly = false, disabled, disableClear = false, onchange, oninput }) => {
+  // 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
+  // still initialize the Flatpickr widget. Consumers can override by passing
+  // { disableMobile: false } inside flatpickrConfig.
+  const resolvedDisableMobile = flatpickrConfig && typeof flatpickrConfig.disableMobile !== 'undefined'
+    ? 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;">
        <div style="display: inline-block; width: 100%; text-align: left; position: relative; padding: 0;">
@@ -130,12 +140,16 @@ export default ({ wrapperStyle = null, holdingPen, label, placeholder, property,
     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="${detectTouchscreen() ? timeOnly ? 'time' : 'date' : 'text'}" ${pattern ? { pattern } : ''} value="${holdingPen[property] || ''}" data-input />
+}} 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 />
        </div>
     </div>
     `
 
-  this.flatpickr = flatpickr(el, Object.assign(flatpickrConfig, {
+  // 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 = {

package/package.json

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