cynx-lib 1.3.74 → 1.3.75

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cynx-lib",
-  "version": "1.3.74",
+  "version": "1.3.75",
   "type": "module",
   "main": "./index.cjs",
   "module": "./index.js",

package/ui/components/DatePicker.jsx

@@ -41,8 +41,24 @@ function toKey(y, m, d) { return `${y}-${pad(m+1)}-${pad(d)}`; }
 function toDate(val) {
   if (!val) return null;
   if (val instanceof Date) return isNaN(val.getTime()) ? null : val;
+  if (typeof val === 'number') {
+    if (val >= 1000 && val <= 9999) return new Date(val, 0, 1);
+    const d = new Date(val);
+    return isNaN(d.getTime()) ? null : d;
+  }
   if (typeof val === 'string') {
-    const parts = val.split('-');
+    const trimmed = val.trim();
+    if (/^\d{4}$/.test(trimmed)) {
+      const y = parseInt(trimmed, 10);
+      if (!isNaN(y)) return new Date(y, 0, 1);
+    }
+    const ym = trimmed.split('-');
+    if (ym.length === 2) {
+      const y = parseInt(ym[0], 10);
+      const m = parseInt(ym[1], 10) - 1;
+      if (!isNaN(y) && !isNaN(m)) return new Date(y, m, 1);
+    }
+    const parts = trimmed.split('-');
     if (parts.length === 3) {
       const y = parseInt(parts[0], 10);
       const m = parseInt(parts[1], 10) - 1;
@@ -72,8 +88,10 @@ const SIZES = {
 export function DatePicker({
   value,
   onChange,
+  type = 'date',
+  mode,
   label,
-  placeholder = 'Select date',
+  placeholder,
   badges = {},
   minDate,
   maxDate,
@@ -97,8 +115,13 @@ export function DatePicker({
   const DAYS = loc.days;
   const MONTHS = loc.months;
   const s = SIZES[size] || SIZES.md;
+  const pickerType = type || mode || 'date';
+  const initialView = pickerType === 'month' ? 'month' : pickerType === 'year' ? 'year' : 'day';
+  const defaultPlaceholder = pickerType === 'month' ? 'Select month' : pickerType === 'year' ? 'Select year' : 'Select date';
+  const effectivePlaceholder = placeholder !== undefined ? placeholder : defaultPlaceholder;
+
   const [open,    setOpen]    = useState(false);
-  const [view,    setView]    = useState('day');    // 'day' | 'month' | 'year'
+  const [view,    setView]    = useState(initialView);    // 'day' | 'month' | 'year'
   const [cursor,  setCursor]  = useState(() => new Date());
   const [pos,     setPos]     = useState({ top: 0, left: 0, width: 0 });
   const [rangeStart, setRangeStart] = useState(null);
@@ -108,11 +131,46 @@ export function DatePicker({
   const btnRef = useRef(null);
   const dropRef = useRef(null);
 
+  useEffect(() => {
+    setView(initialView);
+  }, [pickerType]);
+
   const changeDay = (delta) => {
     if (disabled) return;
     const current = toDate(value) || new Date();
-    const next = new Date(current.getFullYear(), current.getMonth(), current.getDate() + delta);
+    if (pickerType === 'year') {
+      const next = new Date(current.getFullYear() + delta, 0, 1);
+      const minD = toDate(minDate);
+      const maxD = toDate(maxDate);
+      if (minD && next.getFullYear() < minD.getFullYear()) return;
+      if (maxD && next.getFullYear() > maxD.getFullYear()) return;
+      if (typeof value === 'number') {
+        onChange?.(next.getFullYear());
+      } else if (typeof value === 'string') {
+        onChange?.(`${next.getFullYear()}`);
+      } else {
+        onChange?.(next);
+      }
+      return;
+    }
+    if (pickerType === 'month') {
+      const next = new Date(current.getFullYear(), current.getMonth() + delta, 1);
+      const minD = toDate(minDate);
+      const maxD = toDate(maxDate);
+      const nextEnd = new Date(next.getFullYear(), next.getMonth() + 1, 0, 23, 59, 59, 999);
+      if (minD && nextEnd < new Date(new Date(minD).setHours(0, 0, 0, 0))) return;
+      if (maxD && next > new Date(new Date(maxD).setHours(23, 59, 59, 999))) return;
+      if (typeof value === 'string') {
+        const y = next.getFullYear();
+        const m = pad(next.getMonth() + 1);
+        onChange?.(`${y}-${m}`);
+      } else {
+        onChange?.(next);
+      }
+      return;
+    }
 
+    const next = new Date(current.getFullYear(), current.getMonth(), current.getDate() + delta);
     const minD = toDate(minDate);
     const maxD = toDate(maxDate);
     if (minD && next < new Date(new Date(minD).setHours(0, 0, 0, 0))) return;
@@ -137,13 +195,13 @@ export function DatePicker({
       if (e.target?.closest?.('.cynx-timepicker-drop') || e.target?.closest?.('.cynx-timepicker-cell')) return;
       if (document.querySelector('.cynx-timepicker-drop')) return;
       if (typeof window !== 'undefined') window.__cynx_last_portal_closed_at = Date.now();
-      setOpen(false); setView('day');
+      setOpen(false); setView(initialView);
     }
     function onKey(e) {
       if (e.key === 'Escape') {
         if (document.querySelector('.cynx-timepicker-drop')) return;
         if (typeof window !== 'undefined') window.__cynx_last_portal_closed_at = Date.now();
-        setOpen(false); setView('day');
+        setOpen(false); setView(initialView);
       }
     }
     document.addEventListener('mousedown', close, true);
@@ -152,7 +210,7 @@ export function DatePicker({
       document.removeEventListener('mousedown', close, true);
       document.removeEventListener('keydown', onKey);
     };
-  }, [open]);
+  }, [open, initialView]);
 
   const [stepperPosState, setStepperPosState] = useState(() => typeof window !== 'undefined' ? localStorage.getItem('datepicker_stepper_position') : null);
 
@@ -225,6 +283,7 @@ export function DatePicker({
     if (disabled) return;
     if (!open) {
       calcPos();
+      setView(initialView);
     }
     setOpen(o => !o);
   };
@@ -417,6 +476,10 @@ export function DatePicker({
   const formattedTime = showTime && timeValue ? ` ${timeValue}` : '';
   const formatted = range
     ? (rangeStart && rangeEnd ? `${formatDateStr(rangeStart)} — ${formatDateStr(rangeEnd)}` : rangeStart ? `${formatDateStr(rangeStart)} — ...` : null)
+    : pickerType === 'year'
+    ? (valDate ? `${valDate.getFullYear()}` : (value !== null && value !== undefined && value !== '' ? `${value}` : null))
+    : pickerType === 'month'
+    ? (valDate ? `${MONTHS[valDate.getMonth()]} ${valDate.getFullYear()}` : (typeof value === 'string' && value ? `${value}` : null))
     : valDate
     ? `${MONTHS[valDate.getMonth()]} ${valDate.getDate()}, ${valDate.getFullYear()}${formattedTime}`
     : (typeof value === 'string' && value ? `${value}${formattedTime}` : null);
@@ -555,7 +618,18 @@ export function DatePicker({
                 const c = new Date(cursor);
                 c.setMonth(i);
                 setCursor(c);
-                setView('day');
+                if (pickerType === 'month') {
+                  if (typeof value === 'string') {
+                    const ym = `${y}-${pad(i + 1)}`;
+                    onChange?.(ym);
+                  } else {
+                    onChange?.(c);
+                  }
+                  setOpen(false);
+                  setView('month');
+                } else {
+                  setView('day');
+                }
               }}
               style={{
                 textAlign: 'center',
@@ -605,7 +679,21 @@ export function DatePicker({
                 const c = new Date(cursor);
                 c.setFullYear(yr);
                 setCursor(c);
-                setView('month');
+                if (pickerType === 'year') {
+                  if (typeof value === 'number') {
+                    onChange?.(yr);
+                  } else if (typeof value === 'string') {
+                    onChange?.(`${yr}`);
+                  } else {
+                    onChange?.(c);
+                  }
+                  setOpen(false);
+                  setView('year');
+                } else if (pickerType === 'month') {
+                  setView('month');
+                } else {
+                  setView('day');
+                }
               }}
               style={{
                 textAlign: 'center',
@@ -641,6 +729,13 @@ export function DatePicker({
     const maxD = toDate(maxDate);
     if (!maxD) return false;
     const current = toDate(value) || new Date();
+    if (pickerType === 'year') {
+      return (current.getFullYear() + 1) > maxD.getFullYear();
+    }
+    if (pickerType === 'month') {
+      const nextMonthStart = new Date(current.getFullYear(), current.getMonth() + 1, 1);
+      return nextMonthStart > new Date(new Date(maxD).setHours(23, 59, 59, 999));
+    }
     const next = new Date(current.getFullYear(), current.getMonth(), current.getDate() + 1);
     return next > new Date(new Date(maxD).setHours(23, 59, 59, 999));
   };
@@ -650,6 +745,13 @@ export function DatePicker({
     const minD = toDate(minDate);
     if (!minD) return false;
     const current = toDate(value) || new Date();
+    if (pickerType === 'year') {
+      return (current.getFullYear() - 1) < minD.getFullYear();
+    }
+    if (pickerType === 'month') {
+      const prevMonthEnd = new Date(current.getFullYear(), current.getMonth(), 0, 23, 59, 59, 999);
+      return prevMonthEnd < new Date(new Date(minD).setHours(0, 0, 0, 0));
+    }
     const prev = new Date(current.getFullYear(), current.getMonth(), current.getDate() - 1);
     return prev < new Date(new Date(minD).setHours(0, 0, 0, 0));
   };
@@ -717,7 +819,7 @@ export function DatePicker({
     onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border, #e2e8f0)'; }}>
       <Calendar size={s.iconSize} style={{ color: 'var(--muted, #797b8d)', flexShrink: 0 }} />
       <span style={{ flex: 1, textAlign: 'left', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', minWidth: 0 }}>
-        {formatted || placeholder}
+        {formatted || effectivePlaceholder}
       </span>
       {value && (
         <span
@@ -783,7 +885,7 @@ export function DatePicker({
           animation: 'dp-in .12s ease',
         }}>
           {/* Calendar header */}
-          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 8 }}>
+          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 8, gap: 4 }}>
             <button
               type="button"
               disabled={isNavPrevDisabled()}
@@ -800,11 +902,65 @@ export function DatePicker({
             >
               <ChevronLeft size={15} />
             </button>
-            <button type="button" onClick={cycleView} style={{ background: 'none', border: 'none', cursor: 'pointer', fontSize: '.82rem', fontWeight: 700, color: 'var(--primary-text, #0f172a)', padding: '4px 8px', borderRadius: 'var(--radxs, 6px)', fontFamily: 'var(--sans, inherit)' }}
-              onMouseEnter={e => e.currentTarget.style.background = 'var(--grey-1, #f5f5f8)'}
-              onMouseLeave={e => e.currentTarget.style.background = 'none'}>
-              {headerLabel}
-            </button>
+
+            <div style={{ display: 'flex', alignItems: 'center', gap: 4, minWidth: 0 }}>
+              {view === 'day' && (
+                <>
+                  <button
+                    type="button"
+                    onClick={() => setView('month')}
+                    style={{
+                      background: 'none', border: 'none', cursor: 'pointer',
+                      fontSize: '.82rem', fontWeight: 700, color: 'var(--primary-text, #0f172a)',
+                      padding: '4px 6px', borderRadius: 'var(--radxs, 6px)',
+                      fontFamily: 'var(--sans, inherit)', transition: 'background .12s'
+                    }}
+                    onMouseEnter={e => e.currentTarget.style.background = 'var(--grey-1, #f5f5f8)'}
+                    onMouseLeave={e => e.currentTarget.style.background = 'none'}
+                  >
+                    {MONTHS[cursor.getMonth()]}
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => setView('year')}
+                    style={{
+                      background: 'none', border: 'none', cursor: 'pointer',
+                      fontSize: '.82rem', fontWeight: 700, color: 'var(--primary-text, #0f172a)',
+                      padding: '4px 6px', borderRadius: 'var(--radxs, 6px)',
+                      fontFamily: 'var(--sans, inherit)', transition: 'background .12s'
+                    }}
+                    onMouseEnter={e => e.currentTarget.style.background = 'var(--grey-1, #f5f5f8)'}
+                    onMouseLeave={e => e.currentTarget.style.background = 'none'}
+                  >
+                    {cursor.getFullYear()}
+                  </button>
+                </>
+              )}
+
+              {view === 'month' && (
+                <button
+                  type="button"
+                  onClick={() => setView('year')}
+                  style={{
+                    background: 'none', border: 'none', cursor: 'pointer',
+                    fontSize: '.82rem', fontWeight: 700, color: 'var(--primary-text, #0f172a)',
+                    padding: '4px 8px', borderRadius: 'var(--radxs, 6px)',
+                    fontFamily: 'var(--sans, inherit)', transition: 'background .12s'
+                  }}
+                  onMouseEnter={e => e.currentTarget.style.background = 'var(--grey-1, #f5f5f8)'}
+                  onMouseLeave={e => e.currentTarget.style.background = 'none'}
+                >
+                  {cursor.getFullYear()}
+                </button>
+              )}
+
+              {view === 'year' && (
+                <span style={{ fontSize: '.82rem', fontWeight: 700, color: 'var(--primary-text, #0f172a)', padding: '4px 8px' }}>
+                  {Math.floor(cursor.getFullYear() / 12) * 12} – {Math.floor(cursor.getFullYear() / 12) * 12 + 11}
+                </span>
+              )}
+            </div>
+
             <button
               type="button"
               disabled={isNavNextDisabled()}