@alaarab/ogrid-react-inputs 2.5.5 → 2.5.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/esm/index.js +1 -1
- package/dist/types/ColorPicker/ColorPickerEditor.d.ts +2 -2
- package/dist/types/DatePicker/DatePickerEditor.d.ts +2 -2
- package/dist/types/DateTimePicker/DateTimePickerEditor.d.ts +21 -0
- package/dist/types/DateTimePicker/datetime-utils.d.ts +22 -0
- package/dist/types/DateTimePicker/index.d.ts +4 -0
- package/dist/types/Rating/RatingEditor.d.ts +2 -2
- package/dist/types/Slider/SliderEditor.d.ts +2 -2
- package/dist/types/Tags/TagsEditor.d.ts +11 -3
- package/dist/types/TimePicker/TimePickerEditor.d.ts +21 -0
- package/dist/types/TimePicker/index.d.ts +4 -0
- package/dist/types/TimePicker/timepicker-utils.d.ts +46 -0
- package/dist/types/index.d.ts +13 -7
- package/package.json +3 -3
package/dist/esm/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import*as C from'react';import {parseDate,formatDate,getCalendarGrid,MONTH_NAMES,DAY_NAMES,DEFAULT_MAX_STARS,clampRating,DEFAULT_COLOR_PALETTE,normalizeHex,DEFAULT_MIN,DEFAULT_MAX,DEFAULT_STEP,clampValue,snapToStep,getPercentage,parseTags,filterTagSuggestions,formatTags,isValidHex,isLightColor,getStarFill,getValueFromOffset,getTagColor,getRatingFromPosition}from'@alaarab/ogrid-inputs';import {jsxs,jsx}from'react/jsx-runtime';var ce={fontFamily:'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',fontSize:"13px",background:"var(--ogrid-bg, #fff)",color:"var(--ogrid-fg, #242424)",border:"1px solid var(--ogrid-border, rgba(0,0,0,0.12))",borderRadius:"8px",boxShadow:"var(--ogrid-shadow, 0 4px 16px rgba(0,0,0,0.15))",padding:"12px",width:"280px",userSelect:"none"},pe={display:"flex",alignItems:"center",justifyContent:"space-between",marginBottom:"8px"},Z={background:"none",border:"none",cursor:"pointer",padding:"4px 8px",borderRadius:"4px",fontSize:"14px",color:"inherit",lineHeight:1},ue={fontWeight:600,fontSize:"14px"},ge={display:"grid",gridTemplateColumns:"repeat(7, 1fr)",gap:"1px",textAlign:"center"},fe={padding:"4px 0",fontSize:"11px",fontWeight:600,color:"var(--ogrid-muted, #888)"},Se={padding:"6px 0",borderRadius:"4px",cursor:"pointer",fontSize:"13px",lineHeight:1,border:"none",background:"none",color:"inherit"},be={display:"flex",justifyContent:"space-between",alignItems:"center",marginTop:"8px",paddingTop:"8px",borderTop:"1px solid var(--ogrid-border, rgba(0,0,0,0.08))"},ee={background:"none",border:"none",cursor:"pointer",padding:"4px 8px",borderRadius:"4px",fontSize:"12px",color:"var(--ogrid-accent, #0078d4)",fontWeight:500},me={display:"flex",gap:"6px",marginBottom:"8px"},ye={flex:1,padding:"4px 8px",border:"1px solid var(--ogrid-border, rgba(0,0,0,0.2))",borderRadius:"4px",fontSize:"13px",outline:"none",background:"var(--ogrid-bg, #fff)",color:"inherit"};function te(H){let{value:f,onValueChange:u,onCommit:S,onCancel:m}=H,b=C.useMemo(()=>f==null?null:parseDate(String(f)),[f]),i=new Date,[c,s]=C.useState(b?.year??i.getFullYear()),[x,p]=C.useState(b?.month??i.getMonth()),[P,v]=C.useState(b?formatDate(b.year,b.month,b.date):""),[R,E]=C.useState(P),[k,h]=C.useState(null),y=C.useRef(null),T=C.useMemo(()=>getCalendarGrid(c,x),[c,x]),D=()=>{x===0?(p(11),s(e=>e-1)):p(e=>e-1);},l=()=>{x===11?(p(0),s(e=>e+1)):p(e=>e+1);},t=(e,n,g)=>{let z=formatDate(e,n,g);v(z),E(z),u(z),setTimeout(()=>S(),0);},r=e=>{let n=e.target.value;E(n);let g=parseDate(n);g&&(v(formatDate(g.year,g.month,g.date)),s(g.year),p(g.month),u(n));},d=e=>{e.key==="Enter"&&(e.preventDefault(),e.stopPropagation(),u(R),S()),e.key==="Escape"&&(e.preventDefault(),e.stopPropagation(),m());},o=()=>{let e=new Date;t(e.getFullYear(),e.getMonth(),e.getDate());},a=()=>{v(""),E(""),u(""),S();};return C.useEffect(()=>{let e=y.current?.querySelector("input");e&&(e.focus(),e.select());},[]),C.useEffect(()=>{let e=g=>{g.key==="Escape"&&(g.preventDefault(),m());},n=y.current;if(n)return n.addEventListener("keydown",e),()=>n.removeEventListener("keydown",e)},[m]),jsxs("div",{ref:y,style:ce,onMouseDown:e=>e.stopPropagation(),children:[jsx("div",{style:me,children:jsx("input",{type:"text",value:R,onChange:r,onKeyDown:d,placeholder:"YYYY-MM-DD",style:ye})}),jsxs("div",{style:pe,children:[jsx("button",{type:"button",style:Z,onClick:D,"aria-label":"Previous month",children:"\u2039"}),jsxs("span",{style:ue,children:[MONTH_NAMES[x]," ",c]}),jsx("button",{type:"button",style:Z,onClick:l,"aria-label":"Next month",children:"\u203A"})]}),jsxs("div",{style:ge,children:[DAY_NAMES.map(e=>jsx("div",{style:fe,children:e},e)),T.flat().map(e=>{let n=formatDate(e.year,e.month,e.date),g=n===P,z=n===k,A={...Se};return e.isCurrentMonth||(A.color="var(--ogrid-muted, #ccc)"),e.isToday&&!g&&(A.fontWeight=700,A.color="var(--ogrid-accent, #0078d4)"),g?(A.background="var(--ogrid-accent, #0078d4)",A.color="#fff",A.fontWeight=600):z&&(A.background="var(--ogrid-bg-hover, #f0f0f0)"),jsx("button",{type:"button",style:A,onClick:()=>t(e.year,e.month,e.date),onMouseEnter:()=>h(n),onMouseLeave:()=>h(null),tabIndex:-1,children:e.date},n)})]}),jsxs("div",{style:be,children:[jsx("button",{type:"button",style:ee,onClick:o,children:"Today"}),jsx("button",{type:"button",style:ee,onClick:a,children:"Clear"})]})]})}var Re={fontFamily:'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',fontSize:"13px",background:"var(--ogrid-bg, #fff)",color:"var(--ogrid-fg, #242424)",border:"1px solid var(--ogrid-border, rgba(0,0,0,0.12))",borderRadius:"8px",boxShadow:"var(--ogrid-shadow, 0 4px 16px rgba(0,0,0,0.15))",padding:"12px",userSelect:"none"},he={display:"flex",alignItems:"center",gap:"2px",justifyContent:"center",padding:"8px 0"},Ce={background:"none",border:"none",cursor:"pointer",padding:"2px",fontSize:"28px",lineHeight:1,transition:"transform 0.1s ease",color:"inherit"},Ee={textAlign:"center",fontSize:"12px",color:"var(--ogrid-muted, #888)",padding:"4px 0 0"},ke={display:"flex",justifyContent:"center",marginTop:"8px",paddingTop:"8px",borderTop:"1px solid var(--ogrid-border, rgba(0,0,0,0.08))"},we={background:"none",border:"none",cursor:"pointer",padding:"4px 8px",borderRadius:"4px",fontSize:"12px",color:"var(--ogrid-accent, #0078d4)",fontWeight:500};function ne(H){let{value:f,onValueChange:u,onCommit:S,onCancel:m,cellEditorParams:b}=H,i=b?.maxStars??DEFAULT_MAX_STARS,c=b?.allowHalf??false,s=C.useMemo(()=>{if(f==null||f==="")return 0;let l=Number(f);return isNaN(l)?0:clampRating(l,i)},[f,i]),[x,p]=C.useState(s),[P,v]=C.useState(null),R=C.useRef(null),E=P??x,k=(l,t)=>{let r=t.currentTarget.getBoundingClientRect(),d=t.clientX-r.left,o=r.width,a=getRatingFromPosition(l,d,o,c),e=clampRating(a,i);p(e),u(e),setTimeout(()=>S(),0);},h=(l,t)=>{let r=t.currentTarget.getBoundingClientRect(),d=t.clientX-r.left,o=r.width,a=getRatingFromPosition(l,d,o,c);v(clampRating(a,i));},y=()=>{v(null);},T=()=>{p(0),u(""),S();};C.useEffect(()=>{R.current?.focus();},[]),C.useEffect(()=>{let l=r=>{if(r.key==="Escape")r.preventDefault(),m();else if(r.key==="Enter")r.preventDefault(),S();else if(r.key==="ArrowRight"||r.key==="ArrowUp"){r.preventDefault();let d=c?.5:1;p(o=>{let a=clampRating(o+d,i);return u(a),a});}else if(r.key==="ArrowLeft"||r.key==="ArrowDown"){r.preventDefault();let d=c?.5:1;p(o=>{let a=clampRating(Math.max(0,o-d),i);return u(a||""),a});}},t=R.current;if(t)return t.addEventListener("keydown",l),()=>t.removeEventListener("keydown",l)},[m,S,u,i,c]);let D=l=>{let t=getStarFill(l,E,c),r,d;t==="full"||t==="half"?(r="\u2605",d="#F59E0B"):(r="\u2606",d="var(--ogrid-muted, #ccc)");let o={...Ce,color:d};return t==="half"?jsx("button",{type:"button",style:o,onClick:a=>k(l,a),onMouseMove:a=>h(l,a),tabIndex:-1,children:jsx("span",{style:{background:"linear-gradient(90deg, #F59E0B 50%, var(--ogrid-muted, #ccc) 50%)",WebkitBackgroundClip:"text",WebkitTextFillColor:"transparent",backgroundClip:"text"},children:"\u2605"})},l):jsx("button",{type:"button",style:o,onClick:a=>k(l,a),onMouseMove:a=>h(l,a),tabIndex:-1,children:r},l)};return jsxs("div",{ref:R,style:Re,onMouseDown:l=>l.stopPropagation(),tabIndex:0,children:[jsx("div",{style:he,onMouseLeave:y,children:Array.from({length:i},(l,t)=>D(t))}),jsx("div",{style:Ee,children:x>0?`${x} / ${i}`:"No rating"}),jsx("div",{style:ke,children:jsx("button",{type:"button",style:we,onClick:T,children:"Clear"})})]})}var Me={fontFamily:'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',fontSize:"13px",background:"var(--ogrid-bg, #fff)",color:"var(--ogrid-fg, #242424)",border:"1px solid var(--ogrid-border, rgba(0,0,0,0.12))",borderRadius:"8px",boxShadow:"var(--ogrid-shadow, 0 4px 16px rgba(0,0,0,0.15))",padding:"12px",width:"240px",userSelect:"none"},Ie={display:"flex",gap:"6px",marginBottom:"10px",alignItems:"center"},Le={fontSize:"14px",fontWeight:600,color:"var(--ogrid-muted, #888)",lineHeight:1},He={flex:1,padding:"4px 8px",border:"1px solid var(--ogrid-border, rgba(0,0,0,0.2))",borderRadius:"4px",fontSize:"13px",outline:"none",background:"var(--ogrid-bg, #fff)",color:"inherit",fontFamily:"monospace",textTransform:"uppercase"},ze={width:"28px",height:"28px",borderRadius:"4px",border:"1px solid var(--ogrid-border, rgba(0,0,0,0.12))",flexShrink:0},Ae={display:"grid",gridTemplateColumns:"repeat(5, 1fr)",gap:"6px",padding:"4px 0"},Be={width:"36px",height:"36px",borderRadius:"50%",border:"none",cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center",fontSize:"14px",fontWeight:700,padding:0,transition:"transform 0.1s ease, box-shadow 0.1s ease"},Fe={display:"flex",justifyContent:"center",marginTop:"8px",paddingTop:"8px",borderTop:"1px solid var(--ogrid-border, rgba(0,0,0,0.08))"},Ne={background:"none",border:"none",cursor:"pointer",padding:"4px 8px",borderRadius:"4px",fontSize:"12px",color:"var(--ogrid-accent, #0078d4)",fontWeight:500};function ie(H){let{value:f,onValueChange:u,onCommit:S,onCancel:m,cellEditorParams:b}=H,i=b?.colors??DEFAULT_COLOR_PALETTE,c=b?.allowCustom??true,s=C.useMemo(()=>f==null||f===""?"":normalizeHex(String(f))??String(f),[f]),[x,p]=C.useState(s),[P,v]=C.useState(s.replace(/^#/,"")),[R,E]=C.useState(null),k=C.useRef(null),h=t=>{let r=normalizeHex(t)??t;p(r),v(r.replace(/^#/,"")),u(r),setTimeout(()=>S(),0);},y=t=>{let r=t.target.value.replace(/[^0-9A-Fa-f]/g,"").slice(0,6);v(r);let d="#"+r;if(isValidHex(d)){let o=normalizeHex(d);o&&(p(o),u(o));}},T=t=>{if(t.key==="Enter"){t.preventDefault(),t.stopPropagation();let r="#"+P;if(isValidHex(r)){let d=normalizeHex(r);d&&u(d);}S();}t.key==="Escape"&&(t.preventDefault(),t.stopPropagation(),m());},D=()=>{p(""),v(""),u(""),S();};C.useEffect(()=>{let t=k.current?.querySelector("input");t&&(t.focus(),t.select());},[]),C.useEffect(()=>{let t=d=>{d.key==="Escape"&&(d.preventDefault(),m());},r=k.current;if(r)return r.addEventListener("keydown",t),()=>r.removeEventListener("keydown",t)},[m]);let l=(t,r)=>{let d=normalizeHex(t)??t,o=x.toUpperCase()===d.toUpperCase(),a=R===t,e=isLightColor(t),n={...Be,backgroundColor:t,border:e?"1px solid var(--ogrid-border, rgba(0,0,0,0.2))":"1px solid transparent",transform:a?"scale(1.15)":"scale(1)",boxShadow:o?"0 0 0 2px var(--ogrid-accent, #0078d4)":"none",color:e?"#333":"#fff"};return jsx("button",{type:"button",style:n,onClick:()=>h(t),onMouseEnter:()=>E(t),onMouseLeave:()=>E(null),tabIndex:-1,"aria-label":t,children:o?"\u2713":""},`${t}-${r}`)};return jsxs("div",{ref:k,style:Me,onMouseDown:t=>t.stopPropagation(),children:[c&&jsxs("div",{style:Ie,children:[jsx("div",{style:{...ze,backgroundColor:x||"transparent"}}),jsx("span",{style:Le,children:"#"}),jsx("input",{type:"text",value:P,onChange:y,onKeyDown:T,placeholder:"000000",maxLength:6,style:He})]}),jsx("div",{style:Ae,children:i.map((t,r)=>l(t,r))}),jsx("div",{style:Fe,children:jsx("button",{type:"button",style:Ne,onClick:D,children:"Clear"})})]})}var _e={fontFamily:'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',fontSize:"13px",background:"var(--ogrid-bg, #fff)",color:"var(--ogrid-fg, #242424)",border:"1px solid var(--ogrid-border, rgba(0,0,0,0.12))",borderRadius:"8px",boxShadow:"var(--ogrid-shadow, 0 4px 16px rgba(0,0,0,0.15))",padding:"12px 16px",width:"280px",userSelect:"none"},Ye={display:"flex",alignItems:"center",gap:"12px",padding:"8px 0"},Xe={flex:1,position:"relative",height:"24px",display:"flex",alignItems:"center",cursor:"pointer"},$e={width:"100%",height:"6px",borderRadius:"3px",background:"var(--ogrid-border, rgba(0,0,0,0.15))",position:"relative",overflow:"hidden"},Oe={position:"absolute",top:0,left:0,height:"100%",borderRadius:"3px",background:"var(--ogrid-accent, #0078d4)",transition:"width 0.05s ease"},Ge={position:"absolute",top:"50%",width:"18px",height:"18px",borderRadius:"50%",background:"var(--ogrid-accent, #0078d4)",border:"2px solid var(--ogrid-bg, #fff)",boxShadow:"0 1px 4px rgba(0,0,0,0.3)",transform:"translate(-50%, -50%)",cursor:"grab",transition:"box-shadow 0.1s ease"},je={fontSize:"14px",fontWeight:600,minWidth:"40px",textAlign:"right",fontVariantNumeric:"tabular-nums"},qe={display:"flex",gap:"8px",alignItems:"center",marginTop:"8px",paddingTop:"8px",borderTop:"1px solid var(--ogrid-border, rgba(0,0,0,0.08))"},Je={fontSize:"12px",color:"var(--ogrid-muted, #888)"},Qe={flex:1,padding:"4px 8px",border:"1px solid var(--ogrid-border, rgba(0,0,0,0.2))",borderRadius:"4px",fontSize:"13px",outline:"none",background:"var(--ogrid-bg, #fff)",color:"inherit",textAlign:"right",fontVariantNumeric:"tabular-nums"},Ze={display:"flex",justifyContent:"space-between",fontSize:"11px",color:"var(--ogrid-muted, #888)",padding:"2px 0 0"};function le(H){let{value:f,onValueChange:u,onCommit:S,onCancel:m,cellEditorParams:b}=H,i=b?.min??DEFAULT_MIN,c=b?.max??DEFAULT_MAX,s=b?.step??DEFAULT_STEP,x=C.useMemo(()=>{if(f==null||f==="")return i;let o=Number(f);return isNaN(o)?i:clampValue(snapToStep(o,i,s),i,c)},[f,i,c,s]),[p,P]=C.useState(x),[v,R]=C.useState(String(x)),[E,k]=C.useState(false),h=C.useRef(null),y=C.useRef(null),T=getPercentage(p,i,c),D=C.useCallback(o=>{let a=clampValue(snapToStep(o,i,s),i,c);P(a),R(String(a)),u(a);},[i,c,s,u]),l=o=>{if(!y.current)return;let a=y.current.getBoundingClientRect(),e=o.clientX-a.left,n=getValueFromOffset(e,a.width,i,c,s);D(n);},t=o=>{o.preventDefault(),o.stopPropagation(),k(true);};C.useEffect(()=>{if(!E)return;let o=e=>{if(!y.current)return;let n=y.current.getBoundingClientRect(),g=e.clientX-n.left,z=getValueFromOffset(g,n.width,i,c,s);D(z);},a=()=>{k(false),setTimeout(()=>S(),0);};return document.addEventListener("mousemove",o),document.addEventListener("mouseup",a),()=>{document.removeEventListener("mousemove",o),document.removeEventListener("mouseup",a);}},[E,i,c,s,D,S]);let r=o=>{let a=o.target.value;R(a);let e=Number(a);if(!isNaN(e)){let n=clampValue(snapToStep(e,i,s),i,c);P(n),u(n);}},d=o=>{if(o.key==="Enter"){o.preventDefault(),o.stopPropagation();let a=Number(v);if(!isNaN(a)){let e=clampValue(snapToStep(a,i,s),i,c);u(e);}S();}o.key==="Escape"&&(o.preventDefault(),o.stopPropagation(),m());};return C.useEffect(()=>{let o=h.current?.querySelector("input");o&&(o.focus(),o.select());},[]),C.useEffect(()=>{let o=e=>{e.key==="Escape"&&(e.preventDefault(),m());},a=h.current;if(a)return a.addEventListener("keydown",o),()=>a.removeEventListener("keydown",o)},[m]),jsxs("div",{ref:h,style:_e,onMouseDown:o=>o.stopPropagation(),children:[jsxs("div",{style:Ye,children:[jsxs("div",{ref:y,style:Xe,onClick:l,children:[jsx("div",{style:$e,children:jsx("div",{style:{...Oe,width:`${T}%`}})}),jsx("div",{style:{...Ge,left:`${T}%`,cursor:E?"grabbing":"grab"},onMouseDown:t})]}),jsx("span",{style:je,children:p})]}),jsxs("div",{style:Ze,children:[jsx("span",{children:i}),jsx("span",{children:c})]}),jsxs("div",{style:qe,children:[jsx("span",{style:Je,children:"Value:"}),jsx("input",{type:"text",value:v,onChange:r,onKeyDown:d,style:Qe})]})]})}var rt={fontFamily:'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',fontSize:"13px",background:"var(--ogrid-bg, #fff)",color:"var(--ogrid-fg, #242424)",border:"1px solid var(--ogrid-border, rgba(0,0,0,0.12))",borderRadius:"8px",boxShadow:"var(--ogrid-shadow, 0 4px 16px rgba(0,0,0,0.15))",padding:"12px",width:"280px",userSelect:"none"},at={display:"flex",flexWrap:"wrap",gap:"4px",minHeight:"32px",padding:"4px 0"},it={display:"inline-flex",alignItems:"center",gap:"4px",padding:"3px 8px",borderRadius:"12px",fontSize:"12px",fontWeight:500,lineHeight:1.4,maxWidth:"200px",overflow:"hidden"},st={overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},lt={background:"none",border:"none",cursor:"pointer",padding:"0 2px",fontSize:"14px",lineHeight:1,color:"inherit",opacity:.6,flexShrink:0},dt={width:"100%",padding:"6px 8px",border:"1px solid var(--ogrid-border, rgba(0,0,0,0.2))",borderRadius:"4px",fontSize:"13px",outline:"none",background:"var(--ogrid-bg, #fff)",color:"inherit",marginTop:"6px"},ct={maxHeight:"120px",overflowY:"auto",marginTop:"4px",border:"1px solid var(--ogrid-border, rgba(0,0,0,0.1))",borderRadius:"4px",background:"var(--ogrid-bg, #fff)"},pt={padding:"6px 10px",cursor:"pointer",fontSize:"12px",borderBottom:"1px solid var(--ogrid-border, rgba(0,0,0,0.04))"},ut={background:"var(--ogrid-bg-hover, #f0f0f0)"},gt={fontSize:"12px",color:"var(--ogrid-muted, #888)",fontStyle:"italic",padding:"4px 0"},ft={display:"flex",justifyContent:"space-between",alignItems:"center",marginTop:"8px",paddingTop:"8px",borderTop:"1px solid var(--ogrid-border, rgba(0,0,0,0.08))"},St={background:"none",border:"none",cursor:"pointer",padding:"4px 8px",borderRadius:"4px",fontSize:"12px",color:"var(--ogrid-accent, #0078d4)",fontWeight:500},bt={fontSize:"11px",color:"var(--ogrid-muted, #888)"};function de(H){let{value:f,onValueChange:u,onCommit:S,onCancel:m,cellEditorParams:b}=H,i=b?.suggestions,c=b?.allowCreate??true,[s,x]=C.useState(()=>parseTags(f)),[p,P]=C.useState(""),[v,R]=C.useState(-1),E=C.useRef(null),k=C.useRef(null),h=C.useMemo(()=>i?filterTagSuggestions(p,i,s):[],[p,i,s]),y=h.length>0&&p.length>0,T=C.useCallback(e=>{x(e),u(formatTags(e));},[u]),D=C.useCallback(e=>{let n=e.trim();if(!n||s.includes(n)||!c&&i&&!i.includes(n))return;let g=[...s,n];T(g),P(""),R(-1);},[s,c,i,T]),l=C.useCallback(e=>{let n=s.filter((g,z)=>z!==e);T(n);},[s,T]),t=e=>{P(e.target.value),R(-1);},r=e=>{e.key==="Enter"?(e.preventDefault(),e.stopPropagation(),y&&v>=0?D(h[v]):p.trim()?D(p):S()):e.key==="Escape"?(e.preventDefault(),e.stopPropagation(),m()):e.key===","||e.key==="Tab"?p.trim()&&(e.preventDefault(),D(p)):e.key==="Backspace"&&p===""&&s.length>0?l(s.length-1):e.key==="ArrowDown"&&y?(e.preventDefault(),R(n=>n<h.length-1?n+1:0)):e.key==="ArrowUp"&&y&&(e.preventDefault(),R(n=>n>0?n-1:h.length-1));},d=e=>{D(e),k.current?.focus();},o=()=>{T([]),P(""),u(""),S();};C.useEffect(()=>{k.current?.focus();},[]),C.useEffect(()=>{let e=g=>{g.key==="Escape"&&(g.preventDefault(),m());},n=E.current;if(n)return n.addEventListener("keydown",e),()=>n.removeEventListener("keydown",e)},[m]);let a=(e,n)=>{let g=getTagColor(e);return jsxs("span",{style:{...it,backgroundColor:g,color:"#333"},children:[jsx("span",{style:st,children:e}),jsx("button",{type:"button",style:lt,onClick:()=>l(n),tabIndex:-1,"aria-label":`Remove ${e}`,children:"\xD7"})]},`${e}-${n}`)};return jsxs("div",{ref:E,style:rt,onMouseDown:e=>e.stopPropagation(),children:[jsx("div",{style:at,children:s.length>0?s.map((e,n)=>a(e,n)):jsx("span",{style:gt,children:"No tags"})}),jsx("input",{ref:k,type:"text",value:p,onChange:t,onKeyDown:r,placeholder:c?"Type to add tag...":"Search tags...",style:dt}),y&&jsx("div",{style:ct,children:h.map((e,n)=>jsx("div",{style:{...pt,...n===v?ut:{}},onClick:()=>d(e),onMouseEnter:()=>R(n),children:e},e))}),jsxs("div",{style:ft,children:[jsxs("span",{style:bt,children:[s.length," tag",s.length!==1?"s":""]}),jsx("button",{type:"button",style:St,onClick:o,children:"Clear all"})]})]})}export{ie as ColorPickerEditor,te as DatePickerEditor,ne as RatingEditor,le as SliderEditor,de as TagsEditor};
|
|
1
|
+
import*as z from'react';import {parseDate,formatDate,getCalendarGrid,MONTH_NAMES,DAY_NAMES,DEFAULT_MAX_STARS,clampRating,DEFAULT_COLOR_PALETTE,normalizeHex,DEFAULT_MIN,DEFAULT_MAX,DEFAULT_STEP,clampValue,snapToStep,getPercentage,parseTags,filterTagSuggestions,formatTags,isValidHex,isLightColor,getStarFill,getValueFromOffset,getTagColor,getRatingFromPosition}from'@alaarab/ogrid-inputs';import {jsxs,jsx}from'react/jsx-runtime';var it={fontFamily:'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',fontSize:"13px",background:"var(--ogrid-bg, #fff)",color:"var(--ogrid-fg, #242424)",border:"1px solid var(--ogrid-border, rgba(0,0,0,0.12))",borderRadius:"8px",boxShadow:"var(--ogrid-shadow, 0 4px 16px rgba(0,0,0,0.15))",padding:"12px",width:"280px",userSelect:"none"},at={display:"flex",alignItems:"center",justifyContent:"space-between",marginBottom:"8px"},Ie={background:"none",border:"none",cursor:"pointer",padding:"4px 8px",borderRadius:"4px",fontSize:"14px",color:"inherit",lineHeight:1},st={fontWeight:600,fontSize:"14px"},lt={display:"grid",gridTemplateColumns:"repeat(7, 1fr)",gap:"1px",textAlign:"center"},ct={padding:"4px 0",fontSize:"11px",fontWeight:600,color:"var(--ogrid-muted, #888)"},dt={padding:"6px 0",borderRadius:"4px",cursor:"pointer",fontSize:"13px",lineHeight:1,border:"none",background:"none",color:"inherit"},pt={display:"flex",justifyContent:"space-between",alignItems:"center",marginTop:"8px",paddingTop:"8px",borderTop:"1px solid var(--ogrid-border, rgba(0,0,0,0.08))"},Ae={background:"none",border:"none",cursor:"pointer",padding:"4px 8px",borderRadius:"4px",fontSize:"12px",color:"var(--ogrid-accent, #0078d4)",fontWeight:500},ut={display:"flex",gap:"6px",marginBottom:"8px"},ft={flex:1,padding:"4px 8px",border:"1px solid var(--ogrid-border, rgba(0,0,0,0.2))",borderRadius:"4px",fontSize:"13px",outline:"none",background:"var(--ogrid-bg, #fff)",color:"inherit"};function He(g){let{value:b,onValueChange:l,onCommit:f,onCancel:d}=g,x=z.useMemo(()=>b==null?null:parseDate(String(b)),[b]),i=new Date,[c,v]=z.useState(x?.year??i.getFullYear()),[m,h]=z.useState(x?.month??i.getMonth()),[C,w]=z.useState(x?formatDate(x.year,x.month,x.date):""),[P,V]=z.useState(C),[I,M]=z.useState(null),H=z.useRef(null),F=z.useMemo(()=>getCalendarGrid(c,m),[c,m]),A=()=>{m===0?(h(11),v(t=>t-1)):h(t=>t-1);},R=()=>{m===11?(h(0),v(t=>t+1)):h(t=>t+1);},e=(t,T,L)=>{let o=formatDate(t,T,L);w(o),V(o),l(o),setTimeout(()=>f(),0);},a=t=>{let T=t.target.value;V(T);let L=parseDate(T);L&&(w(formatDate(L.year,L.month,L.date)),v(L.year),h(L.month),l(T));},k=t=>{t.key==="Enter"&&(t.preventDefault(),t.stopPropagation(),l(P),f()),t.key==="Escape"&&(t.preventDefault(),t.stopPropagation(),d());},s=()=>{let t=new Date;e(t.getFullYear(),t.getMonth(),t.getDate());},u=()=>{w(""),V(""),l(""),f();};return z.useEffect(()=>{let t=H.current?.querySelector("input");t&&(t.focus(),t.select());},[]),z.useEffect(()=>{let t=L=>{L.key==="Escape"&&(L.preventDefault(),d());},T=H.current;if(T)return T.addEventListener("keydown",t),()=>T.removeEventListener("keydown",t)},[d]),jsxs("div",{ref:H,style:it,onMouseDown:t=>t.stopPropagation(),children:[jsx("div",{style:ut,children:jsx("input",{type:"text",value:P,onChange:a,onKeyDown:k,placeholder:"YYYY-MM-DD",style:ft})}),jsxs("div",{style:at,children:[jsx("button",{type:"button",style:Ie,onClick:A,"aria-label":"Previous month",children:"\u2039"}),jsxs("span",{style:st,children:[MONTH_NAMES[m]," ",c]}),jsx("button",{type:"button",style:Ie,onClick:R,"aria-label":"Next month",children:"\u203A"})]}),jsxs("div",{style:lt,children:[DAY_NAMES.map(t=>jsx("div",{style:ct,children:t},t)),F.flat().map(t=>{let T=formatDate(t.year,t.month,t.date),L=T===C,o=T===I,p={...dt};return t.isCurrentMonth||(p.color="var(--ogrid-muted, #ccc)"),t.isToday&&!L&&(p.fontWeight=700,p.color="var(--ogrid-accent, #0078d4)"),L?(p.background="var(--ogrid-accent, #0078d4)",p.color="#fff",p.fontWeight=600):o&&(p.background="var(--ogrid-bg-hover, #f0f0f0)"),jsx("button",{type:"button",style:p,onClick:()=>e(t.year,t.month,t.date),onMouseEnter:()=>M(T),onMouseLeave:()=>M(null),tabIndex:-1,children:t.date},T)})]}),jsxs("div",{style:pt,children:[jsx("button",{type:"button",style:Ae,onClick:s,children:"Today"}),jsx("button",{type:"button",style:Ae,onClick:u,children:"Clear"})]})]})}function Ce(g){if(!g)return null;let b=g.trim(),l=b.match(/^(\d{1,2}):(\d{2})\s*(AM|PM)$/i);if(l){let d=parseInt(l[1],10),x=parseInt(l[2],10),i=l[3].toUpperCase();return d<1||d>12||x<0||x>59?null:(i==="AM"?d=d===12?0:d:d=d===12?12:d+12,{hours:d,minutes:x})}let f=b.match(/^(\d{1,2}):(\d{2})$/);if(f){let d=parseInt(f[1],10),x=parseInt(f[2],10);return d<0||d>23||x<0||x>59?null:{hours:d,minutes:x}}return null}function pe(g){let{hours:b,minutes:l}=g,f=b<12?"AM":"PM",d=b%12===0?12:b%12,x=String(l).padStart(2,"0");return `${d}:${x} ${f}`}function te(g){return g%12===0?12:g%12}function oe(g){return g<12?"AM":"PM"}function ne(g,b){return b==="AM"?g===12?0:g:g===12?12:g+12}function ye(g=5){let b=[];for(let l=0;l<60;l+=g)b.push(l);return b}function xe(){return [12,1,2,3,4,5,6,7,8,9,10,11]}var mt={fontFamily:'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',fontSize:"13px",background:"var(--ogrid-bg, #fff)",color:"var(--ogrid-fg, #242424)",border:"1px solid var(--ogrid-border, rgba(0,0,0,0.12))",borderRadius:"8px",boxShadow:"var(--ogrid-shadow, 0 4px 16px rgba(0,0,0,0.15))",padding:"12px",width:"220px",userSelect:"none"},gt={display:"flex",gap:"6px",marginBottom:"10px"},bt={flex:1,padding:"5px 8px",border:"1px solid var(--ogrid-border, rgba(0,0,0,0.2))",borderRadius:"4px",fontSize:"13px",outline:"none",background:"var(--ogrid-bg, #fff)",color:"inherit"},St={display:"flex",gap:"8px",alignItems:"stretch"},ke={display:"flex",flexDirection:"column",flex:1,gap:"0",border:"1px solid var(--ogrid-border, rgba(0,0,0,0.12))",borderRadius:"6px",overflow:"hidden",maxHeight:"176px",overflowY:"auto"},Pe={textAlign:"center",fontSize:"11px",fontWeight:600,color:"var(--ogrid-muted, #888)",padding:"4px 0",borderBottom:"1px solid var(--ogrid-border, rgba(0,0,0,0.08))",position:"sticky",top:0,background:"var(--ogrid-bg, #fff)"},Te={padding:"5px 0",textAlign:"center",cursor:"pointer",fontSize:"13px",border:"none",background:"none",color:"inherit",width:"100%"},yt={display:"flex",justifyContent:"space-between",alignItems:"center",marginTop:"10px",paddingTop:"8px",borderTop:"1px solid var(--ogrid-border, rgba(0,0,0,0.08))"},Le={background:"none",border:"none",cursor:"pointer",padding:"4px 8px",borderRadius:"4px",fontSize:"12px",color:"var(--ogrid-accent, #0078d4)",fontWeight:500};function ze(g){let{value:b,onValueChange:l,onCommit:f,onCancel:d}=g,i=(g.cellEditorParams??{}).minuteStep??5,c=()=>{let o=Ce(String(b??""));if(o)return o;let p=new Date;return {hours:p.getHours(),minutes:Math.floor(p.getMinutes()/i)*i}},[v,m]=z.useState(c),[h,C]=z.useState(oe(v.hours)),[w,P]=z.useState(te(v.hours)),[V,I]=z.useState(pe(v)),M=z.useRef(null),H=z.useRef(null),F=z.useRef(null),A=xe(),R=ye(i),e=z.useCallback((o,p,D)=>{let S={hours:ne(o,D),minutes:p},B=pe(S);I(B),l(B);},[l]),a=o=>{P(o),e(o,v.minutes,h),m(p=>({...p,hours:ne(o,h)}));},k=o=>{m(p=>({...p,minutes:o})),e(w,o,h);},s=o=>{C(o),m(p=>({...p,hours:ne(w,o)})),e(w,v.minutes,o);},u=o=>{let p=o.target.value;I(p);let D=Ce(p);D&&(m(D),P(te(D.hours)),C(oe(D.hours)),l(pe(D)));},t=o=>{o.key==="Enter"&&(o.preventDefault(),o.stopPropagation(),l(V),f()),o.key==="Escape"&&(o.preventDefault(),o.stopPropagation(),d());},T=()=>{let o=new Date,p=o.getHours(),D=Math.floor(o.getMinutes()/i)*i,r={hours:p,minutes:D};m(r),P(te(p)),C(oe(p));let S=pe(r);I(S),l(S),setTimeout(()=>f(),0);},L=()=>{l(""),f();};return z.useEffect(()=>{let o=(r,S,B)=>{if(!r)return;let q=(r.scrollHeight-25)/B;r.scrollTop=S*q;},p=A.indexOf(w),D=R.indexOf(v.minutes);o(H.current,p>=0?p:0,A.length),o(F.current,D>=0?D:0,R.length);},[]),z.useEffect(()=>{let o=M.current?.querySelector("input");o&&(o.focus(),o.select());},[]),z.useEffect(()=>{let o=M.current,p=D=>{D.key==="Escape"&&(D.preventDefault(),d());};if(o)return o.addEventListener("keydown",p),()=>o.removeEventListener("keydown",p)},[d]),jsxs("div",{ref:M,style:mt,onMouseDown:o=>o.stopPropagation(),children:[jsx("div",{style:gt,children:jsx("input",{type:"text",value:V,onChange:u,onKeyDown:t,placeholder:"h:mm AM/PM",style:bt})}),jsxs("div",{style:St,children:[jsxs("div",{ref:H,style:ke,children:[jsx("div",{style:Pe,children:"Hour"}),A.map(o=>{let p=o===w,D={...Te,background:p?"var(--ogrid-accent, #0078d4)":"none",color:p?"#fff":"inherit",fontWeight:p?600:400};return jsx("button",{type:"button",style:D,onClick:()=>a(o),tabIndex:-1,children:o},o)})]}),jsxs("div",{ref:F,style:ke,children:[jsx("div",{style:Pe,children:"Min"}),R.map(o=>{let p=o===v.minutes,D={...Te,background:p?"var(--ogrid-accent, #0078d4)":"none",color:p?"#fff":"inherit",fontWeight:p?600:400};return jsx("button",{type:"button",style:D,onClick:()=>k(o),tabIndex:-1,children:String(o).padStart(2,"0")},o)})]}),jsxs("div",{style:{...ke,flex:"none",width:"50px"},children:[jsx("div",{style:Pe,children:"AM/PM"}),["AM","PM"].map(o=>{let p=o===h,D={...Te,background:p?"var(--ogrid-accent, #0078d4)":"none",color:p?"#fff":"inherit",fontWeight:p?600:400};return jsx("button",{type:"button",style:D,onClick:()=>s(o),tabIndex:-1,children:o},o)})]})]}),jsxs("div",{style:yt,children:[jsx("button",{type:"button",style:Le,onClick:T,children:"Now"}),jsx("button",{type:"button",style:Le,onClick:L,children:"Clear"})]})]})}function Ve(g){if(!g)return null;let b=g.trim(),l=b.match(/^(\d{4})-(\d{2})-(\d{2})\s+(\d{1,2}):(\d{2})\s*(AM|PM)$/i);if(l){let d=parseInt(l[1],10),x=parseInt(l[2],10)-1,i=parseInt(l[3],10),c=parseInt(l[4],10),v=parseInt(l[5],10),m=l[6].toUpperCase();if(c<1||c>12||v<0||v>59)return null;m==="AM"?c=c===12?0:c:c=c===12?12:c+12;let h=new Date(d,x,i);return h.getFullYear()!==d||h.getMonth()!==x||h.getDate()!==i?null:{year:d,month:x,date:i,hours:c,minutes:v}}let f=b.match(/^(\d{4})-(\d{2})-(\d{2})[T ](\d{2}):(\d{2})$/);if(f){let d=parseInt(f[1],10),x=parseInt(f[2],10)-1,i=parseInt(f[3],10),c=parseInt(f[4],10),v=parseInt(f[5],10);if(c<0||c>23||v<0||v>59)return null;let m=new Date(d,x,i);return m.getFullYear()!==d||m.getMonth()!==x||m.getDate()!==i?null:{year:d,month:x,date:i,hours:c,minutes:v}}return null}function Be(g){let b=String(g.month+1).padStart(2,"0"),l=String(g.date).padStart(2,"0"),f=`${g.year}-${b}-${l}`,d=g.hours<12?"AM":"PM",x=g.hours%12===0?12:g.hours%12,i=String(g.minutes).padStart(2,"0");return `${f} ${x}:${i} ${d}`}var xt={fontFamily:'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',fontSize:"13px",background:"var(--ogrid-bg, #fff)",color:"var(--ogrid-fg, #242424)",border:"1px solid var(--ogrid-border, rgba(0,0,0,0.12))",borderRadius:"8px",boxShadow:"var(--ogrid-shadow, 0 4px 16px rgba(0,0,0,0.15))",padding:"12px",width:"300px",userSelect:"none"},vt={display:"flex",alignItems:"center",justifyContent:"space-between",marginBottom:"8px"},Fe={background:"none",border:"none",cursor:"pointer",padding:"4px 8px",borderRadius:"4px",fontSize:"14px",color:"inherit",lineHeight:1},ht={fontWeight:600,fontSize:"14px"},Rt={display:"grid",gridTemplateColumns:"repeat(7, 1fr)",gap:"1px",textAlign:"center"},Ct={padding:"4px 0",fontSize:"11px",fontWeight:600,color:"var(--ogrid-muted, #888)"},kt={padding:"6px 0",borderRadius:"4px",cursor:"pointer",fontSize:"13px",lineHeight:1,border:"none",background:"none",color:"inherit"},Pt={borderTop:"1px solid var(--ogrid-border, rgba(0,0,0,0.08))",margin:"10px 0 8px"},Tt={fontSize:"11px",fontWeight:600,color:"var(--ogrid-muted, #888)",marginBottom:"6px",textTransform:"uppercase",letterSpacing:"0.04em"},Et={display:"flex",gap:"6px",alignItems:"stretch"},Ee={display:"flex",flexDirection:"column",flex:1,border:"1px solid var(--ogrid-border, rgba(0,0,0,0.12))",borderRadius:"6px",overflow:"hidden",maxHeight:"130px",overflowY:"auto"},we={textAlign:"center",fontSize:"11px",fontWeight:600,color:"var(--ogrid-muted, #888)",padding:"3px 0",borderBottom:"1px solid var(--ogrid-border, rgba(0,0,0,0.08))",position:"sticky",top:0,background:"var(--ogrid-bg, #fff)"},Me={padding:"4px 0",textAlign:"center",cursor:"pointer",fontSize:"12px",border:"none",background:"none",color:"inherit",width:"100%"},wt={display:"flex",justifyContent:"space-between",alignItems:"center",marginTop:"10px",paddingTop:"8px",borderTop:"1px solid var(--ogrid-border, rgba(0,0,0,0.08))"},De={background:"none",border:"none",cursor:"pointer",padding:"4px 8px",borderRadius:"4px",fontSize:"12px",color:"var(--ogrid-accent, #0078d4)",fontWeight:500};function Ne(g){let{value:b,onValueChange:l,onCommit:f,onCancel:d}=g,i=(g.cellEditorParams??{}).minuteStep??5,c=new Date,m=(()=>{let n=Ve(String(b??""));return n||{year:c.getFullYear(),month:c.getMonth(),date:c.getDate(),hours:c.getHours(),minutes:Math.floor(c.getMinutes()/i)*i}})(),[h,C]=z.useState(m.year),[w,P]=z.useState(m.month),[V,I]=z.useState(formatDate(m.year,m.month,m.date)),[M,H]=z.useState(m.year),[F,A]=z.useState(m.month),[R,e]=z.useState(m.date),[a,k]=z.useState({hours:m.hours,minutes:m.minutes}),[s,u]=z.useState(oe(m.hours)),[t,T]=z.useState(te(m.hours)),[L,o]=z.useState(null),p=z.useRef(null),D=z.useRef(null),r=z.useRef(null),S=z.useMemo(()=>getCalendarGrid(h,w),[h,w]),B=xe(),q=ye(i),ce=z.useCallback((n,y,E,U,N)=>{let ae=Be({year:n,month:y,date:E,hours:U,minutes:N});l(ae);},[l]),je=()=>{w===0?(P(11),C(n=>n-1)):P(n=>n-1);},Je=()=>{w===11?(P(0),C(n=>n+1)):P(n=>n+1);},Qe=(n,y,E)=>{let U=formatDate(n,y,E);I(U),H(n),A(y),e(E),ce(n,y,E,a.hours,a.minutes);},Ze=n=>{T(n);let y=ne(n,s);k(E=>({...E,hours:y})),ce(M,F,R,y,a.minutes);},et=n=>{k(y=>({...y,minutes:n})),ce(M,F,R,a.hours,n);},tt=n=>{u(n);let y=ne(t,n);k(E=>({...E,hours:y})),ce(M,F,R,y,a.minutes);},ot=()=>{let n=new Date,y=n.getFullYear(),E=n.getMonth(),U=n.getDate(),N=n.getHours(),ae=Math.floor(n.getMinutes()/i)*i;C(y),P(E),I(formatDate(y,E,U)),H(y),A(E),e(U),k({hours:N,minutes:ae}),T(te(N)),u(oe(N)),ce(y,E,U,N,ae),setTimeout(()=>f(),0);},nt=()=>{l(""),f();};return z.useEffect(()=>{let n=(U,N,ae)=>{if(!U)return;let rt=(U.scrollHeight-22)/ae;U.scrollTop=N*rt;},y=B.indexOf(t),E=q.indexOf(a.minutes);n(D.current,y>=0?y:0,B.length),n(r.current,E>=0?E:0,q.length);},[]),z.useEffect(()=>{let n=p.current,y=E=>{E.key==="Escape"&&(E.preventDefault(),d());};if(n)return n.addEventListener("keydown",y),()=>n.removeEventListener("keydown",y)},[d]),jsxs("div",{ref:p,style:xt,onMouseDown:n=>n.stopPropagation(),children:[jsxs("div",{style:vt,children:[jsx("button",{type:"button",style:Fe,onClick:je,"aria-label":"Previous month",children:"\u2039"}),jsxs("span",{style:ht,children:[MONTH_NAMES[w]," ",h]}),jsx("button",{type:"button",style:Fe,onClick:Je,"aria-label":"Next month",children:"\u203A"})]}),jsxs("div",{style:Rt,children:[DAY_NAMES.map(n=>jsx("div",{style:Ct,children:n},n)),S.flat().map(n=>{let y=formatDate(n.year,n.month,n.date),E=y===V,U=y===L,N={...kt};return n.isCurrentMonth||(N.color="var(--ogrid-muted, #ccc)"),n.isToday&&!E&&(N.fontWeight=700,N.color="var(--ogrid-accent, #0078d4)"),E?(N.background="var(--ogrid-accent, #0078d4)",N.color="#fff",N.fontWeight=600):U&&(N.background="var(--ogrid-bg-hover, #f0f0f0)"),jsx("button",{type:"button",style:N,onClick:()=>Qe(n.year,n.month,n.date),onMouseEnter:()=>o(y),onMouseLeave:()=>o(null),tabIndex:-1,children:n.date},y)})]}),jsx("div",{style:Pt}),jsx("div",{style:Tt,children:"Time"}),jsxs("div",{style:Et,children:[jsxs("div",{ref:D,style:Ee,children:[jsx("div",{style:we,children:"Hr"}),B.map(n=>{let y=n===t,E={...Me,background:y?"var(--ogrid-accent, #0078d4)":"none",color:y?"#fff":"inherit",fontWeight:y?600:400};return jsx("button",{type:"button",style:E,onClick:()=>Ze(n),tabIndex:-1,children:n},n)})]}),jsxs("div",{ref:r,style:Ee,children:[jsx("div",{style:we,children:"Min"}),q.map(n=>{let y=n===a.minutes,E={...Me,background:y?"var(--ogrid-accent, #0078d4)":"none",color:y?"#fff":"inherit",fontWeight:y?600:400};return jsx("button",{type:"button",style:E,onClick:()=>et(n),tabIndex:-1,children:String(n).padStart(2,"0")},n)})]}),jsxs("div",{style:{...Ee,flex:"none",width:"46px"},children:[jsx("div",{style:we,children:"AM/PM"}),["AM","PM"].map(n=>{let y=n===s,E={...Me,background:y?"var(--ogrid-accent, #0078d4)":"none",color:y?"#fff":"inherit",fontWeight:y?600:400};return jsx("button",{type:"button",style:E,onClick:()=>tt(n),tabIndex:-1,children:n},n)})]})]}),jsxs("div",{style:wt,children:[jsx("button",{type:"button",style:De,onClick:ot,children:"Now"}),jsx("button",{type:"button",style:De,onClick:()=>f(),children:"Apply"}),jsx("button",{type:"button",style:De,onClick:nt,children:"Clear"})]})]})}var It={fontFamily:'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',fontSize:"13px",background:"var(--ogrid-bg, #fff)",color:"var(--ogrid-fg, #242424)",border:"1px solid var(--ogrid-border, rgba(0,0,0,0.12))",borderRadius:"8px",boxShadow:"var(--ogrid-shadow, 0 4px 16px rgba(0,0,0,0.15))",padding:"12px",userSelect:"none"},At={display:"flex",alignItems:"center",gap:"2px",padding:"8px 0"},Ht={background:"none",border:"none",cursor:"pointer",padding:"2px",fontSize:"28px",lineHeight:1,transition:"transform 0.1s ease",color:"inherit"},Lt={fontSize:"12px",color:"var(--ogrid-muted, #888)",padding:"4px 0 0"},zt={display:"flex",justifyContent:"flex-start",marginTop:"8px",paddingTop:"8px",borderTop:"1px solid var(--ogrid-border, rgba(0,0,0,0.08))"},Vt={background:"none",border:"none",cursor:"pointer",padding:"4px 8px",borderRadius:"4px",fontSize:"12px",color:"var(--ogrid-accent, #0078d4)",fontWeight:500};function Ke(g){let{value:b,onValueChange:l,onCommit:f,onCancel:d,cellEditorParams:x}=g,i=x?.maxStars??DEFAULT_MAX_STARS,c=x?.allowHalf??false,v=z.useMemo(()=>{if(b==null||b==="")return 0;let R=Number(b);return isNaN(R)?0:clampRating(R,i)},[b,i]),[m,h]=z.useState(v),[C,w]=z.useState(null),P=z.useRef(null),V=C??m,I=(R,e)=>{let a=e.currentTarget.getBoundingClientRect(),k=e.clientX-a.left,s=a.width,u=getRatingFromPosition(R,k,s,c),t=clampRating(u,i);h(t),l(t),setTimeout(()=>f(),0);},M=(R,e)=>{let a=e.currentTarget.getBoundingClientRect(),k=e.clientX-a.left,s=a.width,u=getRatingFromPosition(R,k,s,c);w(clampRating(u,i));},H=()=>{w(null);},F=()=>{h(0),l(""),f();};z.useEffect(()=>{P.current?.focus();},[]),z.useEffect(()=>{let R=a=>{if(a.key==="Escape")a.preventDefault(),d();else if(a.key==="Enter")a.preventDefault(),f();else if(a.key==="ArrowRight"||a.key==="ArrowUp"){a.preventDefault();let k=c?.5:1;h(s=>{let u=clampRating(s+k,i);return l(u),u});}else if(a.key==="ArrowLeft"||a.key==="ArrowDown"){a.preventDefault();let k=c?.5:1;h(s=>{let u=clampRating(Math.max(0,s-k),i);return l(u||""),u});}},e=P.current;if(e)return e.addEventListener("keydown",R),()=>e.removeEventListener("keydown",R)},[d,f,l,i,c]);let A=R=>{let e=getStarFill(R,V,c),a,k;e==="full"||e==="half"?(a="\u2605",k="#F59E0B"):(a="\u2606",k="var(--ogrid-muted, #ccc)");let s={...Ht,color:k};return e==="half"?jsx("button",{type:"button",style:s,onClick:u=>I(R,u),onMouseMove:u=>M(R,u),tabIndex:-1,children:jsx("span",{style:{background:"linear-gradient(90deg, #F59E0B 50%, var(--ogrid-muted, #ccc) 50%)",WebkitBackgroundClip:"text",WebkitTextFillColor:"transparent",backgroundClip:"text"},children:"\u2605"})},R):jsx("button",{type:"button",style:s,onClick:u=>I(R,u),onMouseMove:u=>M(R,u),tabIndex:-1,children:a},R)};return jsxs("div",{ref:P,style:It,onMouseDown:R=>R.stopPropagation(),tabIndex:0,children:[jsx("div",{style:At,onMouseLeave:H,children:Array.from({length:i},(R,e)=>A(e))}),jsx("div",{style:Lt,children:m>0?`${m} / ${i}`:"No rating"}),jsx("div",{style:zt,children:jsx("button",{type:"button",style:Vt,onClick:F,children:"Clear"})})]})}var Wt={fontFamily:'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',fontSize:"13px",background:"var(--ogrid-bg, #fff)",color:"var(--ogrid-fg, #242424)",border:"1px solid var(--ogrid-border, rgba(0,0,0,0.12))",borderRadius:"8px",boxShadow:"var(--ogrid-shadow, 0 4px 16px rgba(0,0,0,0.15))",padding:"12px",width:"240px",userSelect:"none"},Kt={display:"flex",gap:"6px",marginBottom:"10px",alignItems:"center"},Ot={fontSize:"14px",fontWeight:600,color:"var(--ogrid-muted, #888)",lineHeight:1},$t={flex:1,padding:"4px 8px",border:"1px solid var(--ogrid-border, rgba(0,0,0,0.2))",borderRadius:"4px",fontSize:"13px",outline:"none",background:"var(--ogrid-bg, #fff)",color:"inherit",fontFamily:"monospace",textTransform:"uppercase"},Yt={width:"28px",height:"28px",borderRadius:"4px",border:"1px solid var(--ogrid-border, rgba(0,0,0,0.12))",flexShrink:0},Ut={display:"grid",gridTemplateColumns:"repeat(5, 1fr)",gap:"6px",padding:"4px 0"},_t={width:"36px",height:"36px",borderRadius:"50%",border:"none",cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center",fontSize:"14px",fontWeight:700,padding:0,transition:"transform 0.1s ease, box-shadow 0.1s ease"},Xt={display:"flex",justifyContent:"flex-start",marginTop:"8px",paddingTop:"8px",borderTop:"1px solid var(--ogrid-border, rgba(0,0,0,0.08))"},qt={background:"none",border:"none",cursor:"pointer",padding:"4px 8px",borderRadius:"4px",fontSize:"12px",color:"var(--ogrid-accent, #0078d4)",fontWeight:500};function Ye(g){let{value:b,onValueChange:l,onCommit:f,onCancel:d,cellEditorParams:x}=g,i=x?.colors??DEFAULT_COLOR_PALETTE,c=x?.allowCustom??true,v=z.useMemo(()=>b==null||b===""?"":normalizeHex(String(b))??String(b),[b]),[m,h]=z.useState(v),[C,w]=z.useState(v.replace(/^#/,"")),[P,V]=z.useState(null),I=z.useRef(null),M=e=>{let a=normalizeHex(e)??e;h(a),w(a.replace(/^#/,"")),l(a),setTimeout(()=>f(),0);},H=e=>{let a=e.target.value.replace(/[^0-9A-Fa-f]/g,"").slice(0,6);w(a);let k="#"+a;if(isValidHex(k)){let s=normalizeHex(k);s&&(h(s),l(s));}},F=e=>{if(e.key==="Enter"){e.preventDefault(),e.stopPropagation();let a="#"+C;if(isValidHex(a)){let k=normalizeHex(a);k&&l(k);}f();}e.key==="Escape"&&(e.preventDefault(),e.stopPropagation(),d());},A=()=>{h(""),w(""),l(""),f();};z.useEffect(()=>{let e=I.current?.querySelector("input");e&&(e.focus(),e.select());},[]),z.useEffect(()=>{let e=k=>{k.key==="Escape"&&(k.preventDefault(),d());},a=I.current;if(a)return a.addEventListener("keydown",e),()=>a.removeEventListener("keydown",e)},[d]);let R=(e,a)=>{let k=normalizeHex(e)??e,s=m.toUpperCase()===k.toUpperCase(),u=P===e,t=isLightColor(e),T={..._t,backgroundColor:e,border:t?"1px solid var(--ogrid-border, rgba(0,0,0,0.2))":"1px solid transparent",transform:u?"scale(1.15)":"scale(1)",boxShadow:s?"0 0 0 2px var(--ogrid-accent, #0078d4)":"none",color:t?"#333":"#fff"};return jsx("button",{type:"button",style:T,onClick:()=>M(e),onMouseEnter:()=>V(e),onMouseLeave:()=>V(null),tabIndex:-1,"aria-label":e,children:s?"\u2713":""},`${e}-${a}`)};return jsxs("div",{ref:I,style:Wt,onMouseDown:e=>e.stopPropagation(),children:[c&&jsxs("div",{style:Kt,children:[jsx("div",{style:{...Yt,backgroundColor:m||"transparent"}}),jsx("span",{style:Ot,children:"#"}),jsx("input",{type:"text",value:C,onChange:H,onKeyDown:F,placeholder:"000000",maxLength:6,style:$t})]}),jsx("div",{style:Ut,children:i.map((e,a)=>R(e,a))}),jsx("div",{style:Xt,children:jsx("button",{type:"button",style:qt,onClick:A,children:"Clear"})})]})}var Zt={fontFamily:'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',fontSize:"13px",background:"var(--ogrid-bg, #fff)",color:"var(--ogrid-fg, #242424)",border:"1px solid var(--ogrid-border, rgba(0,0,0,0.12))",borderRadius:"8px",boxShadow:"var(--ogrid-shadow, 0 4px 16px rgba(0,0,0,0.15))",padding:"12px 16px",width:"280px",userSelect:"none"},eo={display:"flex",alignItems:"center",gap:"12px",padding:"8px 0"},to={flex:1,position:"relative",height:"24px",display:"flex",alignItems:"center",cursor:"pointer"},oo={width:"100%",height:"6px",borderRadius:"3px",background:"var(--ogrid-border, rgba(0,0,0,0.15))",position:"relative",overflow:"hidden"},no={position:"absolute",top:0,left:0,height:"100%",borderRadius:"3px",background:"var(--ogrid-accent, #0078d4)",transition:"width 0.05s ease"},ro={position:"absolute",top:"50%",width:"18px",height:"18px",borderRadius:"50%",background:"var(--ogrid-accent, #0078d4)",border:"2px solid var(--ogrid-bg, #fff)",boxShadow:"0 1px 4px rgba(0,0,0,0.3)",transform:"translate(-50%, -50%)",cursor:"grab",transition:"box-shadow 0.1s ease"},io={fontSize:"14px",fontWeight:600,minWidth:"40px",textAlign:"right",fontVariantNumeric:"tabular-nums"},ao={display:"flex",gap:"8px",alignItems:"center",marginTop:"8px",paddingTop:"8px",borderTop:"1px solid var(--ogrid-border, rgba(0,0,0,0.08))"},so={fontSize:"12px",color:"var(--ogrid-muted, #888)"},lo={flex:1,padding:"4px 8px",border:"1px solid var(--ogrid-border, rgba(0,0,0,0.2))",borderRadius:"4px",fontSize:"13px",outline:"none",background:"var(--ogrid-bg, #fff)",color:"inherit",textAlign:"right",fontVariantNumeric:"tabular-nums"},co={display:"flex",justifyContent:"space-between",fontSize:"11px",color:"var(--ogrid-muted, #888)",padding:"2px 0 0"};function _e(g){let{value:b,onValueChange:l,onCommit:f,onCancel:d,cellEditorParams:x}=g,i=x?.min??DEFAULT_MIN,c=x?.max??DEFAULT_MAX,v=x?.step??DEFAULT_STEP,m=z.useMemo(()=>{if(b==null||b==="")return i;let s=Number(b);return isNaN(s)?i:clampValue(snapToStep(s,i,v),i,c)},[b,i,c,v]),[h,C]=z.useState(m),[w,P]=z.useState(String(m)),[V,I]=z.useState(false),M=z.useRef(null),H=z.useRef(null),F=getPercentage(h,i,c),A=z.useCallback(s=>{let u=clampValue(snapToStep(s,i,v),i,c);C(u),P(String(u)),l(u);},[i,c,v,l]),R=s=>{if(!H.current)return;let u=H.current.getBoundingClientRect(),t=s.clientX-u.left,T=getValueFromOffset(t,u.width,i,c,v);A(T);},e=s=>{s.preventDefault(),s.stopPropagation(),I(true);};z.useEffect(()=>{if(!V)return;let s=t=>{if(!H.current)return;let T=H.current.getBoundingClientRect(),L=t.clientX-T.left,o=getValueFromOffset(L,T.width,i,c,v);A(o);},u=()=>{I(false),setTimeout(()=>f(),0);};return document.addEventListener("mousemove",s),document.addEventListener("mouseup",u),()=>{document.removeEventListener("mousemove",s),document.removeEventListener("mouseup",u);}},[V,i,c,v,A,f]);let a=s=>{let u=s.target.value;P(u);let t=Number(u);if(!isNaN(t)){let T=clampValue(snapToStep(t,i,v),i,c);C(T),l(T);}},k=s=>{if(s.key==="Enter"){s.preventDefault(),s.stopPropagation();let u=Number(w);if(!isNaN(u)){let t=clampValue(snapToStep(u,i,v),i,c);l(t);}f();}s.key==="Escape"&&(s.preventDefault(),s.stopPropagation(),d());};return z.useEffect(()=>{let s=M.current?.querySelector("input");s&&(s.focus(),s.select());},[]),z.useEffect(()=>{let s=t=>{t.key==="Escape"&&(t.preventDefault(),d());},u=M.current;if(u)return u.addEventListener("keydown",s),()=>u.removeEventListener("keydown",s)},[d]),jsxs("div",{ref:M,style:Zt,onMouseDown:s=>s.stopPropagation(),children:[jsxs("div",{style:eo,children:[jsxs("div",{ref:H,style:to,onClick:R,children:[jsx("div",{style:oo,children:jsx("div",{style:{...no,width:`${F}%`}})}),jsx("div",{style:{...ro,left:`${F}%`,cursor:V?"grabbing":"grab"},onMouseDown:e})]}),jsx("span",{style:io,children:h})]}),jsxs("div",{style:co,children:[jsx("span",{children:i}),jsx("span",{children:c})]}),jsxs("div",{style:ao,children:[jsx("span",{style:so,children:"Value:"}),jsx("input",{type:"text",value:w,onChange:a,onKeyDown:k,style:lo})]})]})}var go={fontFamily:'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',fontSize:"13px",background:"var(--ogrid-bg, #fff)",color:"var(--ogrid-fg, #242424)",border:"1px solid var(--ogrid-border, rgba(0,0,0,0.12))",borderRadius:"8px",boxShadow:"var(--ogrid-shadow, 0 4px 16px rgba(0,0,0,0.15))",padding:"12px",width:"280px",userSelect:"none"},bo={display:"flex",flexWrap:"wrap",gap:"4px",minHeight:"32px",padding:"4px 0"},So={display:"inline-flex",alignItems:"center",gap:"4px",padding:"3px 8px",borderRadius:"12px",fontSize:"12px",fontWeight:500,lineHeight:1.4,maxWidth:"200px",overflow:"hidden"},yo={overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},xo={background:"none",border:"none",cursor:"pointer",padding:"0 2px",fontSize:"14px",lineHeight:1,color:"inherit",opacity:.6,flexShrink:0},vo={width:"100%",padding:"6px 8px",border:"1px solid var(--ogrid-border, rgba(0,0,0,0.2))",borderRadius:"4px",fontSize:"13px",outline:"none",background:"var(--ogrid-bg, #fff)",color:"inherit",marginTop:"6px",boxSizing:"border-box"},ho={maxHeight:"160px",overflowY:"auto",marginTop:"4px",border:"1px solid var(--ogrid-border, rgba(0,0,0,0.1))",borderRadius:"4px",background:"var(--ogrid-bg, #fff)"},Xe={padding:"6px 10px",cursor:"pointer",fontSize:"12px",borderBottom:"1px solid var(--ogrid-border, rgba(0,0,0,0.04))",display:"flex",alignItems:"center",gap:"8px"},qe={background:"var(--ogrid-bg-hover, #f0f0f0)"},Ro={width:"14px",height:"14px",borderRadius:"3px",border:"1.5px solid var(--ogrid-border, rgba(0,0,0,0.3))",display:"inline-flex",alignItems:"center",justifyContent:"center",flexShrink:0,fontSize:"10px",background:"var(--ogrid-bg, #fff)"},Co={background:"var(--ogrid-accent, #0078d4)",border:"1.5px solid var(--ogrid-accent, #0078d4)",color:"#fff"},ko={fontSize:"12px",color:"var(--ogrid-muted, #888)",fontStyle:"italic",padding:"4px 0"},Po={display:"flex",justifyContent:"space-between",alignItems:"center",marginTop:"8px",paddingTop:"8px",borderTop:"1px solid var(--ogrid-border, rgba(0,0,0,0.08))"},To={background:"none",border:"none",cursor:"pointer",padding:"4px 8px",borderRadius:"4px",fontSize:"12px",color:"var(--ogrid-accent, #0078d4)",fontWeight:500},Eo={background:"var(--ogrid-accent, #0078d4)",color:"#fff",border:"none",cursor:"pointer",padding:"5px 12px",borderRadius:"4px",fontSize:"12px",fontWeight:600},wo={fontSize:"11px",color:"var(--ogrid-muted, #888)"};function Ge(g){let{value:b,onValueChange:l,onCommit:f,onCancel:d,cellEditorParams:x}=g,i=x,c=i?.suggestions,v=i?.allowCreate??true,m=i?.showApplyButton??true,h=!!c&&!v,[C,w]=z.useState(()=>parseTags(b)),[P,V]=z.useState(""),[I,M]=z.useState(-1),H=z.useRef(null),F=z.useRef(null),A=z.useMemo(()=>{if(!c)return [];if(h){let r=P.toLowerCase().trim();return c.filter(S=>!r||S.toLowerCase().includes(r))}return filterTagSuggestions(P,c,C)},[P,c,C,h]),R=h?A.length>0:A.length>0&&P.length>0,e=z.useCallback(r=>{w(r),l(formatTags(r));},[l]),a=z.useCallback(r=>{let S=r.trim();if(!S||C.includes(S)||!v&&c&&!c.includes(S))return;let B=[...C,S];e(B),V(""),M(-1);},[C,v,c,e]),k=z.useCallback(r=>{let S=C.filter((B,q)=>q!==r);e(S);},[C,e]),s=z.useCallback(r=>{if(C.includes(r)){let S=C.filter(B=>B!==r);e(S);}else {let S=[...C,r];e(S);}},[C,e]),u=()=>{f();},t=()=>{e([]),V(""),l(""),m||f();},T=r=>{V(r.target.value),M(-1);},L=r=>{r.key==="Enter"?(r.preventDefault(),r.stopPropagation(),h?R&&I>=0?s(A[I]):f():R&&I>=0?a(A[I]):P.trim()?a(P):f()):r.key==="Escape"?(r.preventDefault(),r.stopPropagation(),d()):!h&&(r.key===","||r.key==="Tab")?P.trim()&&(r.preventDefault(),a(P)):r.key==="Backspace"&&P===""&&C.length>0&&!h?k(C.length-1):r.key==="ArrowDown"&&R?(r.preventDefault(),M(S=>S<A.length-1?S+1:0)):r.key==="ArrowUp"&&R&&(r.preventDefault(),M(S=>S>0?S-1:A.length-1));},o=r=>{h?(s(r),F.current?.focus()):(a(r),F.current?.focus());};z.useEffect(()=>{F.current?.focus();},[]),z.useEffect(()=>{let r=B=>{B.key==="Escape"&&(B.preventDefault(),d());},S=H.current;if(S)return S.addEventListener("keydown",r),()=>S.removeEventListener("keydown",r)},[d]);let p=(r,S)=>{let B=getTagColor(r);return jsxs("span",{style:{...So,backgroundColor:B,color:"#333"},children:[jsx("span",{style:yo,children:r}),jsx("button",{type:"button",style:xo,onClick:()=>k(S),tabIndex:-1,"aria-label":`Remove ${r}`,children:"\xD7"})]},`${r}-${S}`)},D=(r,S)=>{let B=C.includes(r),q=S===I;return h?jsxs("div",{style:{...Xe,...q?qe:{}},onClick:()=>o(r),onMouseEnter:()=>M(S),children:[jsx("span",{style:{...Ro,...B?Co:{}},children:B?"\u2713":""}),jsx("span",{style:{flex:1},children:r})]},r):jsx("div",{style:{...Xe,...q?qe:{}},onClick:()=>o(r),onMouseEnter:()=>M(S),children:r},r)};return jsxs("div",{ref:H,style:go,onMouseDown:r=>r.stopPropagation(),children:[jsx("div",{style:bo,children:C.length>0?C.map((r,S)=>p(r,S)):jsx("span",{style:ko,children:"No tags"})}),jsx("input",{ref:F,type:"text",value:P,onChange:T,onKeyDown:L,placeholder:h?"Search...":v?"Type to add tag...":"Search tags...",style:vo,"aria-label":"Tag search input"}),R&&jsx("div",{style:ho,children:A.map((r,S)=>D(r,S))}),jsxs("div",{style:Po,children:[jsxs("div",{style:{display:"flex",alignItems:"center",gap:"8px"},children:[jsxs("span",{style:wo,children:[C.length," tag",C.length!==1?"s":""]}),jsx("button",{type:"button",style:To,onClick:t,children:"Clear all"})]}),m&&jsx("button",{type:"button",style:Eo,onClick:u,"aria-label":"Apply tags",children:"Apply"})]})]})}export{Ye as ColorPickerEditor,He as DatePickerEditor,Ne as DateTimePickerEditor,Ke as RatingEditor,_e as SliderEditor,Ge as TagsEditor,ze as TimePickerEditor};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* ColorPickerEditor
|
|
2
|
+
* ColorPickerEditor - Premium color swatch picker for OGrid.
|
|
3
3
|
*
|
|
4
4
|
* Usage:
|
|
5
5
|
* import { ColorPickerEditor } from '@alaarab/ogrid-react-inputs';
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
* cellEditorParams: { allowCustom: true },
|
|
12
12
|
* }];
|
|
13
13
|
*
|
|
14
|
-
* Implements ICellEditorProps<T>
|
|
14
|
+
* Implements ICellEditorProps<T> - works with cellEditorPopup: true.
|
|
15
15
|
*/
|
|
16
16
|
import * as React from 'react';
|
|
17
17
|
import type { ICellEditorProps } from '@alaarab/ogrid-core';
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* DatePickerEditor
|
|
2
|
+
* DatePickerEditor - Premium calendar-based date picker for OGrid.
|
|
3
3
|
*
|
|
4
4
|
* Usage:
|
|
5
5
|
* import { DatePickerEditor } from '@alaarab/ogrid-react-inputs';
|
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
* cellEditorPopup: true,
|
|
11
11
|
* }];
|
|
12
12
|
*
|
|
13
|
-
* Implements ICellEditorProps<T>
|
|
13
|
+
* Implements ICellEditorProps<T> - works with cellEditorPopup: true.
|
|
14
14
|
*/
|
|
15
15
|
import * as React from 'react';
|
|
16
16
|
import type { ICellEditorProps } from '@alaarab/ogrid-core';
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* DateTimePickerEditor - Premium date+time picker for OGrid.
|
|
3
|
+
*
|
|
4
|
+
* Usage:
|
|
5
|
+
* import { DateTimePickerEditor } from '@alaarab/ogrid-react-inputs';
|
|
6
|
+
*
|
|
7
|
+
* const columns = [{
|
|
8
|
+
* columnId: 'scheduledAt',
|
|
9
|
+
* cellEditor: DateTimePickerEditor,
|
|
10
|
+
* cellEditorPopup: true,
|
|
11
|
+
* }];
|
|
12
|
+
*
|
|
13
|
+
* Value format: "YYYY-MM-DD h:mm AM/PM" (e.g. "2024-06-01 2:30 PM")
|
|
14
|
+
* Implements ICellEditorProps<T> - works with cellEditorPopup: true.
|
|
15
|
+
*/
|
|
16
|
+
import * as React from 'react';
|
|
17
|
+
import type { ICellEditorProps } from '@alaarab/ogrid-core';
|
|
18
|
+
export interface DateTimePickerEditorParams {
|
|
19
|
+
minuteStep?: number;
|
|
20
|
+
}
|
|
21
|
+
export declare function DateTimePickerEditor<T>(props: ICellEditorProps<T>): React.ReactElement;
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
/** DateTime utility functions - zero dependencies. */
|
|
2
|
+
import type { TimeValue } from '../TimePicker/timepicker-utils';
|
|
3
|
+
export interface DateTimeValue {
|
|
4
|
+
year: number;
|
|
5
|
+
month: number;
|
|
6
|
+
date: number;
|
|
7
|
+
hours: number;
|
|
8
|
+
minutes: number;
|
|
9
|
+
}
|
|
10
|
+
/**
|
|
11
|
+
* Parse an ISO-like datetime string "YYYY-MM-DD h:mm AM/PM" or "YYYY-MM-DDThh:mm".
|
|
12
|
+
* Returns null if invalid.
|
|
13
|
+
*/
|
|
14
|
+
export declare function parseDateTime(str: string): DateTimeValue | null;
|
|
15
|
+
/**
|
|
16
|
+
* Format DateTimeValue as "YYYY-MM-DD h:mm AM/PM".
|
|
17
|
+
*/
|
|
18
|
+
export declare function formatDateTime(dt: DateTimeValue): string;
|
|
19
|
+
/**
|
|
20
|
+
* Extract just the TimeValue from a DateTimeValue.
|
|
21
|
+
*/
|
|
22
|
+
export declare function getTimeFromDateTime(dt: DateTimeValue): TimeValue;
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
export { DateTimePickerEditor } from './DateTimePickerEditor';
|
|
2
|
+
export type { DateTimePickerEditorParams } from './DateTimePickerEditor';
|
|
3
|
+
export { parseDateTime, formatDateTime, getTimeFromDateTime } from './datetime-utils';
|
|
4
|
+
export type { DateTimeValue } from './datetime-utils';
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* RatingEditor
|
|
2
|
+
* RatingEditor - Premium star-rating cell editor for OGrid.
|
|
3
3
|
*
|
|
4
4
|
* Usage:
|
|
5
5
|
* import { RatingEditor } from '@alaarab/ogrid-react-inputs';
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
* cellEditorParams: { maxStars: 5, allowHalf: false },
|
|
12
12
|
* }];
|
|
13
13
|
*
|
|
14
|
-
* Implements ICellEditorProps<T>
|
|
14
|
+
* Implements ICellEditorProps<T> - works with cellEditorPopup: true.
|
|
15
15
|
*/
|
|
16
16
|
import * as React from 'react';
|
|
17
17
|
import type { ICellEditorProps } from '@alaarab/ogrid-core';
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* SliderEditor
|
|
2
|
+
* SliderEditor - Premium range slider cell editor for OGrid.
|
|
3
3
|
*
|
|
4
4
|
* Usage:
|
|
5
5
|
* import { SliderEditor } from '@alaarab/ogrid-react-inputs';
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
* cellEditorParams: { min: 0, max: 100, step: 5 },
|
|
12
12
|
* }];
|
|
13
13
|
*
|
|
14
|
-
* Implements ICellEditorProps<T>
|
|
14
|
+
* Implements ICellEditorProps<T> - works with cellEditorPopup: true.
|
|
15
15
|
*/
|
|
16
16
|
import * as React from 'react';
|
|
17
17
|
import type { ICellEditorProps } from '@alaarab/ogrid-core';
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* TagsEditor
|
|
2
|
+
* TagsEditor - Premium multi-value tag/chip cell editor for OGrid.
|
|
3
3
|
*
|
|
4
4
|
* Usage:
|
|
5
5
|
* import { TagsEditor } from '@alaarab/ogrid-react-inputs';
|
|
@@ -8,10 +8,18 @@
|
|
|
8
8
|
* columnId: 'labels',
|
|
9
9
|
* cellEditor: TagsEditor,
|
|
10
10
|
* cellEditorPopup: true,
|
|
11
|
-
* cellEditorParams: {
|
|
11
|
+
* cellEditorParams: {
|
|
12
|
+
* suggestions: ['Bug', 'Feature', 'Docs'],
|
|
13
|
+
* allowCreate: true, // default: true — set to false to restrict to suggestions
|
|
14
|
+
* showApplyButton: true, // default: true — shows an Apply button to commit
|
|
15
|
+
* },
|
|
12
16
|
* }];
|
|
13
17
|
*
|
|
14
|
-
*
|
|
18
|
+
* When `allowCreate: false`, users can only select from the provided `suggestions`.
|
|
19
|
+
* When suggestions are provided and `allowCreate: false`, the dropdown shows multi-select
|
|
20
|
+
* behavior (checkboxes) similar to Select2 — all options shown by default, filtered as user types.
|
|
21
|
+
*
|
|
22
|
+
* Implements ICellEditorProps<T> - works with cellEditorPopup: true.
|
|
15
23
|
* Tags are stored as a comma-separated string.
|
|
16
24
|
*/
|
|
17
25
|
import * as React from 'react';
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* TimePickerEditor - Premium time picker for OGrid.
|
|
3
|
+
*
|
|
4
|
+
* Usage:
|
|
5
|
+
* import { TimePickerEditor } from '@alaarab/ogrid-react-inputs';
|
|
6
|
+
*
|
|
7
|
+
* const columns = [{
|
|
8
|
+
* columnId: 'meetingTime',
|
|
9
|
+
* cellEditor: TimePickerEditor,
|
|
10
|
+
* cellEditorPopup: true,
|
|
11
|
+
* }];
|
|
12
|
+
*
|
|
13
|
+
* Value format: "h:mm AM/PM" (12-hour US format), e.g. "2:30 PM"
|
|
14
|
+
* Implements ICellEditorProps<T> - works with cellEditorPopup: true.
|
|
15
|
+
*/
|
|
16
|
+
import * as React from 'react';
|
|
17
|
+
import type { ICellEditorProps } from '@alaarab/ogrid-core';
|
|
18
|
+
export interface TimePickerEditorParams {
|
|
19
|
+
minuteStep?: number;
|
|
20
|
+
}
|
|
21
|
+
export declare function TimePickerEditor<T>(props: ICellEditorProps<T>): React.ReactElement;
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
export { TimePickerEditor } from './TimePickerEditor';
|
|
2
|
+
export type { TimePickerEditorParams } from './TimePickerEditor';
|
|
3
|
+
export { parseTime, formatTime12, formatTime24, toHour12, toAmPm, fromHour12, clampTime, getMinuteOptions, getHour12Options, } from './timepicker-utils';
|
|
4
|
+
export type { TimeValue, AmPm } from './timepicker-utils';
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
/** Time picker utility functions - zero dependencies. */
|
|
2
|
+
export type AmPm = 'AM' | 'PM';
|
|
3
|
+
export interface TimeValue {
|
|
4
|
+
hours: number;
|
|
5
|
+
minutes: number;
|
|
6
|
+
}
|
|
7
|
+
/**
|
|
8
|
+
* Parse a time string into a TimeValue.
|
|
9
|
+
* Accepts:
|
|
10
|
+
* - "HH:MM" (24-hour)
|
|
11
|
+
* - "H:MM AM/PM" or "H:MM am/pm" (12-hour)
|
|
12
|
+
* Returns null if invalid.
|
|
13
|
+
*/
|
|
14
|
+
export declare function parseTime(str: string): TimeValue | null;
|
|
15
|
+
/**
|
|
16
|
+
* Format a TimeValue as a 12-hour US time string (e.g., "2:30 PM").
|
|
17
|
+
*/
|
|
18
|
+
export declare function formatTime12(time: TimeValue): string;
|
|
19
|
+
/**
|
|
20
|
+
* Format a TimeValue as a 24-hour time string (e.g., "14:30").
|
|
21
|
+
*/
|
|
22
|
+
export declare function formatTime24(time: TimeValue): string;
|
|
23
|
+
/**
|
|
24
|
+
* Get 12-hour display value (1-12) from 24-hour hours.
|
|
25
|
+
*/
|
|
26
|
+
export declare function toHour12(hours: number): number;
|
|
27
|
+
/**
|
|
28
|
+
* Get AM/PM from 24-hour hours.
|
|
29
|
+
*/
|
|
30
|
+
export declare function toAmPm(hours: number): AmPm;
|
|
31
|
+
/**
|
|
32
|
+
* Convert 12-hour + AM/PM to 24-hour.
|
|
33
|
+
*/
|
|
34
|
+
export declare function fromHour12(hour12: number, ampm: AmPm): number;
|
|
35
|
+
/**
|
|
36
|
+
* Clamp a number within min/max (inclusive).
|
|
37
|
+
*/
|
|
38
|
+
export declare function clampTime(value: number, min: number, max: number): number;
|
|
39
|
+
/**
|
|
40
|
+
* Generate minute options at a given interval (default 5).
|
|
41
|
+
*/
|
|
42
|
+
export declare function getMinuteOptions(step?: number): number[];
|
|
43
|
+
/**
|
|
44
|
+
* Generate 12-hour hour options (1-12).
|
|
45
|
+
*/
|
|
46
|
+
export declare function getHour12Options(): number[];
|
package/dist/types/index.d.ts
CHANGED
|
@@ -1,18 +1,20 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* @alaarab/ogrid-react-inputs
|
|
2
|
+
* @alaarab/ogrid-react-inputs - Premium cell editors for OGrid.
|
|
3
3
|
*
|
|
4
4
|
* This package provides optional, opt-in cell editor components.
|
|
5
5
|
* Zero bundle impact when not installed.
|
|
6
6
|
*
|
|
7
7
|
* Available editors:
|
|
8
|
-
* - DatePickerEditor
|
|
9
|
-
* -
|
|
10
|
-
* -
|
|
11
|
-
* -
|
|
12
|
-
* -
|
|
8
|
+
* - DatePickerEditor - Calendar-based date picker (use with cellEditorPopup: true)
|
|
9
|
+
* - TimePickerEditor - 12-hour US time picker (use with cellEditorPopup: true)
|
|
10
|
+
* - DateTimePickerEditor - Combined date + time picker (use with cellEditorPopup: true)
|
|
11
|
+
* - RatingEditor - Star rating editor (use with cellEditorPopup: true)
|
|
12
|
+
* - ColorPickerEditor - Color swatch grid + hex input (use with cellEditorPopup: true)
|
|
13
|
+
* - SliderEditor - Range slider for numeric values (use with cellEditorPopup: true)
|
|
14
|
+
* - TagsEditor - Multi-value tag/chip editor (use with cellEditorPopup: true)
|
|
13
15
|
*
|
|
14
16
|
* Usage:
|
|
15
|
-
* import { DatePickerEditor } from '@alaarab/ogrid-react-inputs';
|
|
17
|
+
* import { DatePickerEditor, TimePickerEditor, DateTimePickerEditor } from '@alaarab/ogrid-react-inputs';
|
|
16
18
|
*
|
|
17
19
|
* const columns = [{
|
|
18
20
|
* columnId: 'dueDate',
|
|
@@ -22,6 +24,10 @@
|
|
|
22
24
|
*/
|
|
23
25
|
export { DatePickerEditor } from './DatePicker';
|
|
24
26
|
export type { CalendarDay } from './DatePicker';
|
|
27
|
+
export { TimePickerEditor } from './TimePicker';
|
|
28
|
+
export type { TimePickerEditorParams, TimeValue, AmPm } from './TimePicker';
|
|
29
|
+
export { DateTimePickerEditor } from './DateTimePicker';
|
|
30
|
+
export type { DateTimePickerEditorParams, DateTimeValue } from './DateTimePicker';
|
|
25
31
|
export { RatingEditor } from './Rating';
|
|
26
32
|
export { ColorPickerEditor } from './ColorPicker';
|
|
27
33
|
export { SliderEditor } from './Slider';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@alaarab/ogrid-react-inputs",
|
|
3
|
-
"version": "2.5.
|
|
3
|
+
"version": "2.5.9",
|
|
4
4
|
"description": "OGrid React Inputs – Optional premium cell editors (DatePicker, and more). Zero impact when not installed.",
|
|
5
5
|
"main": "dist/esm/index.js",
|
|
6
6
|
"module": "dist/esm/index.js",
|
|
@@ -37,8 +37,8 @@
|
|
|
37
37
|
"node": ">=18"
|
|
38
38
|
},
|
|
39
39
|
"dependencies": {
|
|
40
|
-
"@alaarab/ogrid-core": "2.5.
|
|
41
|
-
"@alaarab/ogrid-inputs": "2.5.
|
|
40
|
+
"@alaarab/ogrid-core": "2.5.9",
|
|
41
|
+
"@alaarab/ogrid-inputs": "2.5.9"
|
|
42
42
|
},
|
|
43
43
|
"peerDependencies": {
|
|
44
44
|
"react": "^17.0.0 || ^18.0.0 || ^19.0.0",
|