amotify 0.2.199 → 0.2.200

package/dist/fn/Input/Autocomplete.js

@@ -1 +1 @@
-import{b as f,c as h,d as ee,e as te}from"../../chunk-C5N2D3ZX.js";import{Fragment as X,jsx as a,jsxs as k}from"react/jsx-runtime";import{useState as b,useEffect as E,useRef as ue}from"react";import d,{UUID as O}from"jmini";import{ExtractStyles as ce}from"../../@utils";import{Box as F,Span as pe,FAI as H,Column as oe}from"../../atoms";import{Literal as q,Row as P}from"../../mols";import{Button as ae}from"../Button";import{Loader as de}from"../Loader";import{Sheet as Se}from"../Sheet";import{OptionalInputWrapper as fe,BoxWrapper as me,CoreEffects as M,DefaultBoxishStyles as ve}from"./core";import{InputAutocompleteClasses as W}from"../../@styles/componentClasses";import{InputLabel as ye}from"./Label";import{RightIcon as le}from".";function _e(e){let{value:t,states:u}=e,{required:m,options:o,min:i,max:l}=u;i=i||0,l=l||65535;let S=[],c=t.filter(p=>p!==null).length;return m&&(c||S.push({type:"invalid",label:"\u5FC5\u9808\u9805\u76EE\u3067\u3059"})),c<i&&S.push({type:"invalid",label:i+"\u500B\u4EE5\u4E0A\u9078\u629E\u3057\u3066\u304F\u3060\u3055\u3044"}),c>l&&S.push({type:"invalid",label:l+"\u500B\u307E\u3067\u9078\u629E\u3067\u304D\u307E\u3059"}),{ok:!S.filter(({type:p})=>p=="invalid").length,notice:S}}const z={InitOptions:e=>{let t=[];return e.forEach(u=>{if(!u)return;let{type:m,label:o,value:i,searchValue:l}=u,S=l||d.is.string(o)&&o||""||d.is.string(i)&&i||d.Stringify(i||"")||"";d.is.nullish(o)&&(o=String(i)),t.push(h(f({id:O()},u),{searchValue:S,type:m||"selector",label:o,value:i}))}),t},FilterSelectableOptions:(e,t,u)=>{let m=e;return u||(m=e.filter(o=>(o==null?void 0:o.type)!="label")),d.scope(()=>{if(!t)return;let o=t.toLower().replace(/ /g,"");m=m.filter(i=>(i.searchValue||"").toLower().replace(/ /g,"").includes(o))}),m}},L={Shallow:e=>{let{rootStates:t,val_status:u}=e,m=ce(t);return a(F,{position:"absolute",top:0,left:0,right:0,height:0,overflow:"hidden",opacity:"trans",freeCSS:{zIndex:3,pointerEvents:"none"},children:a(q.Description,h(f({className:t.className},m),{position:"absolute",width:1,freeCSS:h(f({},m.freeCSS),{color:"orange"}),"data-id":"shallow_"+u.componentId,children:a(F,{"data-input-value-shallow":u.componentId,children:"A"})}))})},Button:e=>{let{rootStates:t,val_keyword:u,set_keyword:m,val_optionFocused:o,set_optionFocused:i,val_preventOpenSelector:l,set_preventOpenSelector:S,val_openSelector:c,set_openSelector:p,val_status:n,set_status:r,val_activeInput:v,set_activeInput:y,val_validate:D,set_validate:T}=e,Y=t,{tone:I,required:A,form:C,className:w,multiSelect:R,enableFormSubmit:K,checkValidationAtFirst:N,onValidate:$,onValidateDelay:Q,onUpdateValue:U,onUpdateValidValue:J,onUserAction:j,value:G="",options:x,leftIndicator:B,rightIndicator:V,leftIcon:ge,rightIcon:he,componentId:Ie,status_id:be,wrapStyles:Ce,emptySelect:De,SearchInput:Oe,SearchInputPlaceholder:Te,SelectedComponent:we,SelectorComponent:Re,SelectorStyles:xe,SelectorPosition:Ve,DynamicOptionsOnSearch:ke,DynamicOptionsOnSearchDelay:Ae}=Y,s=ee(Y,["tone","required","form","className","multiSelect","enableFormSubmit","checkValidationAtFirst","onValidate","onValidateDelay","onUpdateValue","onUpdateValidValue","onUserAction","value","options","leftIndicator","rightIndicator","leftIcon","rightIcon","componentId","status_id","wrapStyles","emptySelect","SearchInput","SearchInputPlaceholder","SelectedComponent","SelectorComponent","SelectorStyles","SelectorPosition","DynamicOptionsOnSearch","DynamicOptionsOnSearchDelay"]);return E(()=>{var g;if(t.disabled||!c||d.is.exist(o))return;let _=z.FilterSelectableOptions(e.val_options,u,!1);i(((g=_[0])==null?void 0:g.id)||"")},[u]),E(()=>{if(n.eventType!="init"&&n.eventType!="override"){if(t.max==n.dataValue.length){p(!1),S(!0),m("");return}d("#SearchInput_"+t.componentId).focus()}},[n.dataValue]),E(()=>{if(n.eventType=="override")return;let _="autocomplete-click-"+t.componentId;if(!c){d(document).removeEvent([_]);return}d('[data-input-origin="'+t.componentId+'"]')&&(d("#SearchInput_"+t.componentId).focus(),d(document).addEvent({eventID:_,eventType:"mousedown",callback:ie=>{let Z=d(ie.target),re=!!d(Z).parent("."+W("Core")).length,se=!!d(Z).parent("."+W("Selector")).length;re||se||(p(!1),y(!1))},options:{passive:!1}}))},[c]),k(X,{children:[a(F,h(f({tabIndex:0},s),{"data-disabled":t.disabled,"data-show-validation":M.isShowValidation(D,n,!!N),"data-component-id":n.componentId,"data-input-origin":n.componentId,"data-focus":!!c||!!v,className:[w,W("Core")].join(" "),onFocus:_=>{if(s!=null&&s.onFocus&&(s==null||s.onFocus(_)),r(g=>h(f({},g),{eventID:O(),eventType:"focus.start",isFocusing:!0})),!t.disabled){if(l)return S(!1);p(!0),y(!0),_.preventDefault()}},onBlur:_=>{s!=null&&s.onBlur&&(s==null||s.onBlur(_)),r(g=>h(f({},g),{eventID:O(),eventType:"focus.end",isFocusing:!1}))},onCompositionStart:_=>{s!=null&&s.onCompositionStart&&(s==null||s.onCompositionStart(_)),r(g=>h(f({},g),{eventID:O(),eventType:"composing.start",isComposing:!0}))},onCompositionEnd:_=>{s!=null&&s.onCompositionEnd&&(s==null||s.onCompositionEnd(_)),r(g=>h(f({},g),{eventID:O(),eventType:"composing.end",isComposing:!1}))},onClick:_=>{s!=null&&s.onClick&&(s==null||s.onClick(_)),!t.disabled&&(p(!0),y(!0))},onKeyDown:_=>{let{key:g}=_;K&&M.SubmitForm(_,C),!c&&(g==" "||g=="ArrowDown"||g=="ArrowUp"||g=="Enter")&&(p(!0),y(!0))},children:k(P.Left,{gap:0,children:[a(pe,{width:0,overflow:"hidden",opacity:"trans",children:"A"}),k(P.Left,{flexWrap:!0,flexSizing:0,gap:"1/3",freeCSS:{letterSpacing:".5px"},children:[a(L.Selected,f({},e)),a(L.SearchInput,f({},e))]})]})})),c&&a(L.Selector,f({},e))]})},SearchInput:e=>{let{rootStates:t}=e,[u,m]=b(!1);return t.disabled||!e.val_openSelector&&!e.val_activeInput?null:a(F,{htmlTag:"input",id:"SearchInput_"+t.componentId,placeholder:t.SearchInputPlaceholder||"\u691C\u7D22...",opacity:e.val_openSelector?"max":"middle",transition:"middle",flexSizing:0,fontSize:"inherit",border:"unset",backgroundColor:"trans",value:e.val_keyword,freeCSS:{outline:"none"},onBlur:o=>{e.set_activeInput(!1)},onCompositionStart:o=>{m(!0)},onCompositionEnd:o=>{m(!1)},onKeyDown:o=>{let{key:i,metaKey:l,ctrlKey:S}=o,c=l||S;i=="Tab"?(e.set_openSelector(!1),e.set_activeInput(!1),e.set_preventOpenSelector(!1)):i==" "?d.scope(()=>{e.val_openSelector||e.val_keyword||(o.preventDefault(),e.set_openSelector(!0))}):i=="Backspace"?d.scope(()=>{if(e.val_keyword)return;let p=[...e.val_status.dataValue];p.pop(),e.set_status(n=>h(f({},n),{dataValue:p,eventType:"update",eventID:O()}))}):i=="Enter"&&d.scope(()=>{if(u)return;if(!e.val_openSelector)return e.set_openSelector(!0);let p=e.val_options.find(r=>(r==null?void 0:r.id)==e.val_optionFocused);if(!p)return;let{value:n}=p;e.set_status(r=>{let v=[...r.dataValue];return d.scope(()=>{if(n===null)return v=[];r.dataValue.includes(n)?v=v.filter(D=>D!==n):t.multiSelect?v.push(n):v=[n]}),h(f({},r),{dataValue:v,eventType:"update",eventID:O()})}),e.set_optionsModified(!0),e.set_keyword("")}),d.scope(()=>{if(!["ArrowDown","ArrowUp"].includes(i))return;if(o.preventDefault(),!e.val_openSelector)return e.set_openSelector(!0);let p=i=="ArrowDown"?1:-1,n=z.FilterSelectableOptions(e.val_options),r=n.length-1,v=null;d.scope(()=>{var D,T,I,A,C,w;let y=n.findIndex(R=>(R==null?void 0:R.id)==e.val_optionFocused);if(y==-1&&(y=0),p==1){if(v=(D=n[0])==null?void 0:D.id,c){v=(T=n[r])==null?void 0:T.id;return}if(y==-1||y==r)return;v=(I=n[y+1])==null?void 0:I.id}else{if(v=(A=n[r])==null?void 0:A.id,c){v=(C=n[0])==null?void 0:C.id;return}if(y==-1||y==0)return;v=(w=n[y-1])==null?void 0:w.id}}),e.set_optionFocused(v)}),t.enableFormSubmit&&M.SubmitForm(o,e.rootStates.form)},onChange:o=>{let l=o.target.value;e.set_keyword(l),e.set_openSelector(!0)}},"searchInput")},Selector:e=>{var S;let[t,u]=b("idle"),[m,o]=b("idle");E(()=>{if(!e.rootStates.DynamicOptionsOnSearch||!e.val_openSelector)return;if(e.val_optionsModified)return e.set_optionsModified(!1);if(t=="idle")return u("ok");o("fetch");let c="autocomplete-search-"+e.rootStates.componentId;d.interval.once(()=>te(void 0,null,function*(){var r;let p=yield e.rootStates.DynamicOptionsOnSearch(e.val_keyword);o("idle");let n=z.InitOptions(p||[]);e.set_options(n),e.set_optionFocused(((r=n[0])==null?void 0:r.id)||"")}),e.rootStates.DynamicOptionsOnSearchDelay||500,c)},[e.val_keyword]),E(()=>{let c=d(`[data-selector-id="${e.val_status.componentId}"]`)[0];if(!c)return;let p=d(`[data-autocomplete-input-value="${e.val_optionFocused}"]`)[0];p&&(c.scrollTop=p.offsetTop-24)},[e.val_optionFocused]);let i=z.FilterSelectableOptions(e.val_options,e.rootStates.DynamicOptionsOnSearch?"":e.val_keyword,!0),l={};switch(e.rootStates.SelectorPosition){case 1:l.bottom="100%",l.left=0,l.paddingBottom="1/3";break;case 2:l.bottom="100%",l.right=0,l.paddingBottom="1/3";break;case 3:l.top="100%",l.left=0,l.paddingTop="1/3";break;case 4:l.top="100%",l.right=0,l.paddingTop="1/3";break;default:break}return a(F,h(f({position:"absolute"},l),{freeCSS:f({minWidth:"75%",zIndex:1e3},l.freeCSS),children:a(Se.Body,h(f({className:W("Selector"),borderRadius:"2.tone.secondary",ssCardBox:!0,boxShadow:"1.normal",overflow:"auto","data-selector-id":e.val_status.componentId},e.rootStates.SelectorStyles),{freeCSS:f({maxHeight:12*24},(S=e.rootStates.SelectorStyles)==null?void 0:S.freeCSS),children:k(oe,{gap:"1/12",padding:[1,0],children:[m=="fetch"&&a(P.Center,{padding:"1/2",children:a(de.Theme.R,{showInitial:!0})}),m!="fetch"&&k(X,{children:[!i.length&&a(q.Supplement,{padding:[0,1],fontColor:"4.thin",children:"\u5019\u88DC\u304C\u898B\u3064\u304B\u308A\u307E\u305B\u3093"}),i.map((c,p)=>{if(!c)return null;let{type:n,value:r}=c,v=e.val_optionFocused==c.id,y=e.val_status.dataValue.includes(r),D=e.rootStates.SelectorComponent;return a(oe,{"data-autocomplete-input-value":c.id,children:a(D,{option:c,isFocused:v,isSelected:y,addCallback:()=>{e.set_status(T=>{let I=[...T.dataValue];return d.scope(()=>{if(r===null)return I=[];T.dataValue.includes(r)?I=I.filter(C=>C!==r):e.rootStates.multiSelect?I.push(r):I=[r]}),h(f({},T),{dataValue:I,eventType:"update",eventID:O()})})}})},c.id)})]})]})}))}))},Selected:e=>{let{rootStates:t,val_status:u,set_status:m,val_optionsDict:o}=e,i=[];return u.dataValue.forEach(l=>{let S=o[d.Stringify(l)];if(!S)return;let c=t.SelectedComponent,p=S.label;(S==null?void 0:S.value)===null&&(p=""),i.push(a(F,{className:W("SelectedCell"),children:a(c,{value:S==null?void 0:S.value,label:p,removeCallback:n=>{if(n.stopPropagation(),n.preventDefault(),t.disabled)return;let r=[...u.dataValue];r=r.filter(v=>v!==l),m(v=>h(f({},v),{dataValue:r,eventType:"update",eventID:O()}))}})},d.Stringify(S==null?void 0:S.value)||O()))}),a(X,{children:i})},Core:e=>{var J,j,G;let{value:t}=e,[u,m]=b(!1),[o,i]=b(!1),[l,S]=b(!1),[c,p]=b(!1),[n,r]=b(""),[v,y]=b(e.options),[D,T]=b(((J=e.options.find(x=>{var B;return(x==null?void 0:x.value)===((B=e.value)==null?void 0:B[0])}))==null?void 0:J.id)||((j=e.options[0])==null?void 0:j.id)||""),[I,A]=b({}),[C,w]=b(M.DefaultStatus(e.componentId,t)),[R,K]=b({ok:!1,notice:[]}),N=ue(!1);E(()=>{o||(N.current?y(e.options):N.current=!0)},[d.Stringify((G=e.options)==null?void 0:G.map(x=>x.value))]),E(()=>{if(!v.length)return;let x=[...v],B=f({},I);x.forEach(V=>{(V==null?void 0:V.type)!="label"&&(B[d.Stringify(V==null?void 0:V.value)]=V)}),A(B)},[v]);let $={rootStates:e,val_options:v,set_options:y,val_optionFocused:D,set_optionFocused:T,val_optionsDict:I,set_optionsDict:A,val_optionsModified:o,set_optionsModified:i,val_preventOpenSelector:u,set_preventOpenSelector:m,val_openSelector:l,set_openSelector:S,val_activeInput:c,set_activeInput:p,val_keyword:n,set_keyword:r,val_status:C,set_status:w,val_validate:R,set_validate:K},Q=!!e.multiSelect;M.CommonEffects({type:Q?"autocomplete.multi":"autocomplete.single",states:e,val_status:C,set_status:w,val_validate:R,set_validate:K,SystemValidation:_e});let U=C.dataValue.length&&C.dataValue[0]!==null;return U=U||l||c,k(me,{val_status:C,set_status:w,val_validate:R,states:e,children:[a(ye,{componentId:e.componentId,fontSize:e.fontSize,required:e.required,label:e.label,isActive:U}),a(L.Shallow,f({},$)),a(L.Button,f({},$))]})}},ne=e=>{let t=f({},e);return t=h(f({value:[],min:0,max:65535,multiSelect:!0,SearchInput:!0,emptySelect:!0,SelectorComponent:({option:u,isSelected:m,isFocused:o,addCallback:i})=>u?(u==null?void 0:u.type)=="label"?a(X,{children:u.label}):a(ae.Sub.S,{color:"cloud",backgroundColor:"trans",borderRadius:0,fontColor:"2.normal",textAlign:"left",padding:["1/2",1.5],isActive:o,isActiveStyles:{backgroundColor:"cloud"},onClick:i,children:k(P.Left,{gap:"1/2",children:[m&&a(H.Check,{fontColor:"theme"}),a(q.Supplement,{transition:"short",children:u.label})]})}):null,SelectedComponent:({value:u,label:m,removeCallback:o})=>k(P.Left,{ssCardBox:"cloud",borderRadius:"2.tone.secondary",fontSize:"1.mini",padding:"1/2",gap:0,children:[a(F,{padding:[0,"1/4"],children:m}),a(ae.Clear,{flexSizing:"none",color:"nega",fontColor:"4.thin",tabIndex:-1,isRounded:!0,padding:"1/4",onClick:o,freeCSS:{lineHeight:1,aspectRatio:"1/1"},children:a(H.X,{})})]}),SelectorPosition:3},t),{freeCSS:f({cursor:"pointer"},t.freeCSS)}),t.multiSelect||(t.min=0,t.max=1),t.options=t.options||[],t.emptySelect&&(t.options=[{value:null,label:a(q.Supplement,{fontColor:"4.thin",children:"\u9078\u629E\u3092\u89E3\u9664"})},...t.options]),t.value=d.flatArray(t.value),t.options=z.InitOptions(t.options),d.is.nullish(t.rightIcon)&&(t.rightIcon=a(le,{ssSphere:2,children:a(H.Search,{})}),t.disabled&&(t.rightIcon=a(le,{ssSphere:2,fontColor:"5.translucent",children:a(H.Ban,{})}))),t.rightIcon&&(t=f({paddingRight:3},t)),t.leftIcon&&(t=f({paddingLeft:3},t)),a(fe,{componentId:t.componentId,children:L.Core,states:ve(t)})};export{ne as Autocomplete,ne as default};
+import{b as m,c as g,d as ee,e as te}from"../../chunk-C5N2D3ZX.js";import{Fragment as X,jsx as l,jsxs as V}from"react/jsx-runtime";import{useState as b,useEffect as F,useRef as ue}from"react";import p,{UUID as D}from"jmini";import{ExtractStyles as ce}from"../../@utils";import{Box as E,Span as pe,FAI as H,Column as oe}from"../../atoms";import{Literal as q,Row as P}from"../../mols";import{Button as ae}from"../Button";import{Loader as de}from"../Loader";import{Sheet as Se}from"../Sheet";import{OptionalInputWrapper as fe,BoxWrapper as me,CoreEffects as M,DefaultBoxishStyles as ve}from"./core";import{InputAutocompleteClasses as W}from"../../@styles/componentClasses";import{InputLabel as ye}from"./Label";import{RightIcon as le}from".";function _e(e){let{value:t,states:s}=e,{required:d,options:o,min:a,max:n}=s;a=a||0,n=n||65535;let S=[],u=t.filter(c=>c!==null).length;return d&&(u||S.push({type:"invalid",label:"\u5FC5\u9808\u9805\u76EE\u3067\u3059"})),u<a&&S.push({type:"invalid",label:a+"\u500B\u4EE5\u4E0A\u9078\u629E\u3057\u3066\u304F\u3060\u3055\u3044"}),u>n&&S.push({type:"invalid",label:n+"\u500B\u307E\u3067\u9078\u629E\u3067\u304D\u307E\u3059"}),{ok:!S.filter(({type:c})=>c=="invalid").length,notice:S}}const z={InitOptions:e=>{let t=[];return e.forEach(s=>{if(!s)return;let{type:d,label:o,value:a,searchValue:n}=s,S=n||p.is.string(o)&&o||""||p.is.string(a)&&a||p.Stringify(a||"")||"";p.is.nullish(o)&&(o=String(a)),t.push(g(m({id:D()},s),{searchValue:S,type:d||"selector",label:o,value:a}))}),t},FilterSelectableOptions:(e,t,s)=>{let d=e;return s||(d=e.filter(o=>(o==null?void 0:o.type)!="label")),p.scope(()=>{if(!t)return;let o=t.toLower().replace(/ /g,"");d=d.filter(a=>(a.searchValue||"").toLower().replace(/ /g,"").includes(o))}),d}},L={Shallow:e=>{let{rootStates:t,val_status:s}=e,d=ce(t);return l(E,{position:"absolute",top:0,left:0,right:0,height:0,overflow:"hidden",opacity:"trans",freeCSS:{zIndex:3,pointerEvents:"none"},children:l(q.Description,g(m({className:t.className},d),{position:"absolute",width:1,freeCSS:g(m({},d.freeCSS),{color:"orange"}),"data-id":"shallow_"+s.componentId,children:l(E,{"data-input-value-shallow":s.componentId,children:"A"})}))})},Button:e=>{let{rootStates:t,val_keyword:s,set_keyword:d,val_optionFocused:o,set_optionFocused:a,val_preventOpenSelector:n,set_preventOpenSelector:S,val_openSelector:u,set_openSelector:c,val_status:i,set_status:f,val_activeInput:v,set_activeInput:y,val_validate:C,set_validate:O}=e,Y=t,{tone:h,required:A,form:I,className:T,multiSelect:w,enableFormSubmit:K,checkValidationAtFirst:N,onValidate:$,onValidateDelay:Q,onUpdateValue:U,onUpdateValidValue:J,onUserAction:j,value:G="",options:R,leftIndicator:B,rightIndicator:k,leftIcon:ge,rightIcon:he,componentId:Ie,status_id:be,wrapStyles:Ce,emptySelect:De,SearchInput:Oe,SearchInputPlaceholder:Te,SelectedComponent:we,SelectorComponent:Re,SelectorStyles:ke,SelectorPosition:xe,DynamicOptionsOnSearch:Ve,DynamicOptionsOnSearchDelay:Ae}=Y,r=ee(Y,["tone","required","form","className","multiSelect","enableFormSubmit","checkValidationAtFirst","onValidate","onValidateDelay","onUpdateValue","onUpdateValidValue","onUserAction","value","options","leftIndicator","rightIndicator","leftIcon","rightIcon","componentId","status_id","wrapStyles","emptySelect","SearchInput","SearchInputPlaceholder","SelectedComponent","SelectorComponent","SelectorStyles","SelectorPosition","DynamicOptionsOnSearch","DynamicOptionsOnSearchDelay"]);return F(()=>{var x;if(t.disabled||!u||p.is.exist(o))return;let _=z.FilterSelectableOptions(e.val_options,s,!1);a(((x=_[0])==null?void 0:x.id)||"")},[s]),F(()=>{if(i.eventType!="init"&&i.eventType!="override"){if(t.max==i.dataValue.length){c(!1),S(!0),d("");return}p("#SearchInput_"+t.componentId).focus()}},[i.dataValue]),F(()=>{if(i.eventType=="override")return;let _="autocomplete-click-"+t.componentId;if(!u){p(document).removeEvent([_]);return}p('[data-input-origin="'+t.componentId+'"]')&&(p("#SearchInput_"+t.componentId).focus(),p(document).addEvent({eventID:_,eventType:"mousedown",callback:ie=>{let Z=p(ie.target),re=!!p(Z).parent("."+W("Core")).length,se=!!p(Z).parent("."+W("Selector")).length;re||se||(c(!1),y(!1))},options:{passive:!1}}))},[u]),V(X,{children:[l(E,g(m({tabIndex:0},r),{"data-disabled":t.disabled,"data-show-validation":M.isShowValidation(C,i,!!N),"data-component-id":i.componentId,"data-input-origin":i.componentId,"data-focus":!!u||!!v,className:[T,W("Core")].join(" "),onFocus:_=>{if(r!=null&&r.onFocus&&(r==null||r.onFocus(_)),!t.disabled){if(n)return S(!1);c(!0),y(!0),_.preventDefault()}},onBlur:_=>{r!=null&&r.onBlur&&(r==null||r.onBlur(_))},onCompositionStart:_=>{r!=null&&r.onCompositionStart&&(r==null||r.onCompositionStart(_))},onCompositionEnd:_=>{r!=null&&r.onCompositionEnd&&(r==null||r.onCompositionEnd(_))},onClick:_=>{r!=null&&r.onClick&&(r==null||r.onClick(_)),!t.disabled&&(c(!0),y(!0))},onKeyDown:_=>{let{key:x}=_;K&&M.SubmitForm(_,I),!u&&(x==" "||x=="ArrowDown"||x=="ArrowUp"||x=="Enter")&&(c(!0),y(!0))},children:V(P.Left,{gap:0,children:[l(pe,{width:0,overflow:"hidden",opacity:"trans",children:"A"}),V(P.Left,{flexWrap:!0,flexSizing:0,gap:"1/3",freeCSS:{letterSpacing:".5px"},children:[l(L.Selected,m({},e)),l(L.SearchInput,m({},e))]})]})})),u&&l(L.Selector,m({},e))]})},SearchInput:e=>{let{rootStates:t,val_status:s,set_status:d}=e;return t.disabled||!e.val_openSelector&&!e.val_activeInput?null:l(E,{htmlTag:"input",id:"SearchInput_"+t.componentId,placeholder:t.SearchInputPlaceholder||"\u691C\u7D22...",opacity:e.val_openSelector?"max":"middle",transition:"middle",flexSizing:0,fontSize:"inherit",border:"unset",backgroundColor:"trans",value:e.val_keyword,freeCSS:{outline:"none"},onFocus:o=>{d(a=>g(m({},a),{eventID:D(),eventType:"focus.start",isFocusing:!0}))},onBlur:o=>{e.set_activeInput(!1),d(a=>g(m({},a),{eventID:D(),eventType:"focus.end",isFocusing:!1}))},onCompositionStart:o=>{d(a=>g(m({},a),{eventID:D(),eventType:"composing.start",isComposing:!0}))},onCompositionEnd:o=>{d(a=>g(m({},a),{eventID:D(),eventType:"composing.end",isComposing:!1}))},onKeyDown:o=>{let{key:a,metaKey:n,ctrlKey:S}=o,u=n||S;a=="Tab"?(e.set_openSelector(!1),e.set_activeInput(!1),e.set_preventOpenSelector(!1)):a==" "?p.scope(()=>{e.val_openSelector||e.val_keyword||(o.preventDefault(),e.set_openSelector(!0))}):a=="Backspace"?p.scope(()=>{if(e.val_keyword)return;let c=[...e.val_status.dataValue];c.pop(),e.set_status(i=>g(m({},i),{dataValue:c,eventType:"update",eventID:D()}))}):a=="Enter"&&p.scope(()=>{if(s.isComposing||(o==null?void 0:o.keyCode)===229)return;if(!e.val_openSelector)return e.set_openSelector(!0);if(!e.val_optionFocused)return;let c=e.val_options.find(f=>(f==null?void 0:f.id)==e.val_optionFocused);if(!c)return;let{value:i}=c;e.set_status(f=>{let v=[...f.dataValue];return p.scope(()=>{if(i===null)return v=[];f.dataValue.includes(i)?v=v.filter(C=>C!==i):t.multiSelect?v.push(i):v=[i]}),g(m({},f),{dataValue:v,eventType:"update",eventID:D()})}),e.set_optionsModified(!0),e.set_keyword("")}),p.scope(()=>{if(!["ArrowDown","ArrowUp"].includes(a))return;if(o.preventDefault(),!e.val_openSelector)return e.set_openSelector(!0);let c=a=="ArrowDown"?1:-1,i=z.FilterSelectableOptions(e.val_options),f=i.length-1,v=null;p.scope(()=>{var C,O,h,A,I,T;let y=i.findIndex(w=>(w==null?void 0:w.id)==e.val_optionFocused);if(y==-1&&(y=0),c==1){if(v=(C=i[0])==null?void 0:C.id,u){v=(O=i[f])==null?void 0:O.id;return}if(y==-1||y==f)return;v=(h=i[y+1])==null?void 0:h.id}else{if(v=(A=i[f])==null?void 0:A.id,u){v=(I=i[0])==null?void 0:I.id;return}if(y==-1||y==0)return;v=(T=i[y-1])==null?void 0:T.id}}),e.set_optionFocused(v)}),t.enableFormSubmit&&M.SubmitForm(o,e.rootStates.form)},onChange:o=>{let n=o.target.value;e.set_openSelector(!0),e.set_keyword(n)}},"searchInput")},Selector:e=>{var S;let[t,s]=b("idle"),[d,o]=b("idle");F(()=>{if(!e.rootStates.DynamicOptionsOnSearch||!e.val_openSelector)return;if(e.val_optionsModified)return e.set_optionsModified(!1);if(e.val_status.isComposing)return;if(t=="idle")return s("ok");o("fetch");let u="autocomplete-search-"+e.rootStates.componentId;e.set_optionFocused(""),p.interval.once(()=>te(void 0,null,function*(){var f;let c=yield e.rootStates.DynamicOptionsOnSearch(e.val_keyword);o("idle");let i=z.InitOptions(c||[]);e.set_options(i),e.set_optionFocused(((f=i[0])==null?void 0:f.id)||"")}),e.rootStates.DynamicOptionsOnSearchDelay||500,u)},[e.val_keyword,e.val_status.isComposing]),F(()=>{let u=p(`[data-selector-id="${e.val_status.componentId}"]`)[0];if(!u)return;let c=p(`[data-autocomplete-input-value="${e.val_optionFocused}"]`)[0];c&&(u.scrollTop=c.offsetTop-24)},[e.val_optionFocused]);let a=z.FilterSelectableOptions(e.val_options,e.rootStates.DynamicOptionsOnSearch?"":e.val_keyword,!0),n={};switch(e.rootStates.SelectorPosition){case 1:n.bottom="100%",n.left=0,n.paddingBottom="1/3";break;case 2:n.bottom="100%",n.right=0,n.paddingBottom="1/3";break;case 3:n.top="100%",n.left=0,n.paddingTop="1/3";break;case 4:n.top="100%",n.right=0,n.paddingTop="1/3";break;default:break}return l(E,g(m({position:"absolute"},n),{freeCSS:m({minWidth:"75%",zIndex:1e3},n.freeCSS),children:l(Se.Body,g(m({className:W("Selector"),borderRadius:"2.tone.secondary",ssCardBox:!0,boxShadow:"1.normal",overflow:"auto","data-selector-id":e.val_status.componentId},e.rootStates.SelectorStyles),{freeCSS:m({maxHeight:12*24},(S=e.rootStates.SelectorStyles)==null?void 0:S.freeCSS),children:V(oe,{gap:"1/12",padding:[1,0],children:[d=="fetch"&&l(P.Center,{padding:"1/2",children:l(de.Theme.R,{showInitial:!0})}),d!="fetch"&&V(X,{children:[!a.length&&l(q.Supplement,{padding:[0,1],fontColor:"4.thin",children:"\u5019\u88DC\u304C\u898B\u3064\u304B\u308A\u307E\u305B\u3093"}),a.map((u,c)=>{if(!u)return null;let{type:i,value:f}=u,v=e.val_optionFocused==u.id,y=e.val_status.dataValue.includes(f),C=e.rootStates.SelectorComponent;return l(oe,{"data-autocomplete-input-value":u.id,children:l(C,{option:u,isFocused:v,isSelected:y,addCallback:()=>{e.set_status(O=>{let h=[...O.dataValue];return p.scope(()=>{if(f===null)return h=[];O.dataValue.includes(f)?h=h.filter(I=>I!==f):e.rootStates.multiSelect?h.push(f):h=[f]}),g(m({},O),{dataValue:h,eventType:"update",eventID:D()})})}})},u.id)})]})]})}))}))},Selected:e=>{let{rootStates:t,val_status:s,set_status:d,val_optionsDict:o}=e,a=[];return s.dataValue.forEach(n=>{let S=o[p.Stringify(n)];if(!S)return;let u=t.SelectedComponent,c=S.label;(S==null?void 0:S.value)===null&&(c=""),a.push(l(E,{className:W("SelectedCell"),children:l(u,{value:S==null?void 0:S.value,label:c,removeCallback:i=>{if(i.stopPropagation(),i.preventDefault(),t.disabled)return;let f=[...s.dataValue];f=f.filter(v=>v!==n),d(v=>g(m({},v),{dataValue:f,eventType:"update",eventID:D()}))}})},p.Stringify(S==null?void 0:S.value)||D()))}),l(X,{children:a})},Core:e=>{var J,j,G;let{value:t}=e,[s,d]=b(!1),[o,a]=b(!1),[n,S]=b(!1),[u,c]=b(!1),[i,f]=b(""),[v,y]=b(e.options),[C,O]=b(((J=e.options.find(R=>{var B;return(R==null?void 0:R.value)===((B=e.value)==null?void 0:B[0])}))==null?void 0:J.id)||((j=e.options[0])==null?void 0:j.id)||""),[h,A]=b({}),[I,T]=b(M.DefaultStatus(e.componentId,t)),[w,K]=b({ok:!1,notice:[]}),N=ue(!1);F(()=>{o||(N.current?y(e.options):N.current=!0)},[p.Stringify((G=e.options)==null?void 0:G.map(R=>R.value))]),F(()=>{if(!v.length)return;let R=[...v],B=m({},h);R.forEach(k=>{(k==null?void 0:k.type)!="label"&&(B[p.Stringify(k==null?void 0:k.value)]=k)}),A(B)},[v]);let $={rootStates:e,val_options:v,set_options:y,val_optionFocused:C,set_optionFocused:O,val_optionsDict:h,set_optionsDict:A,val_optionsModified:o,set_optionsModified:a,val_preventOpenSelector:s,set_preventOpenSelector:d,val_openSelector:n,set_openSelector:S,val_activeInput:u,set_activeInput:c,val_keyword:i,set_keyword:f,val_status:I,set_status:T,val_validate:w,set_validate:K},Q=!!e.multiSelect;M.CommonEffects({type:Q?"autocomplete.multi":"autocomplete.single",states:e,val_status:I,set_status:T,val_validate:w,set_validate:K,SystemValidation:_e});let U=I.dataValue.length&&I.dataValue[0]!==null;return U=U||n||u,V(me,{val_status:I,set_status:T,val_validate:w,states:e,children:[l(ye,{componentId:e.componentId,fontSize:e.fontSize,required:e.required,label:e.label,isActive:U}),l(L.Shallow,m({},$)),l(L.Button,m({},$))]})}},ne=e=>{let t=m({},e);return t=g(m({value:[],min:0,max:65535,multiSelect:!0,SearchInput:!0,emptySelect:!0,SelectorComponent:({option:s,isSelected:d,isFocused:o,addCallback:a})=>s?(s==null?void 0:s.type)=="label"?l(X,{children:s.label}):l(ae.Sub.S,{color:"cloud",backgroundColor:"trans",borderRadius:0,fontColor:"2.normal",textAlign:"left",padding:["1/2",1.5],isActive:o,isActiveStyles:{backgroundColor:"cloud"},onClick:a,children:V(P.Left,{gap:"1/2",children:[d&&l(H.Check,{fontColor:"theme"}),l(q.Supplement,{transition:"short",children:s.label})]})}):null,SelectedComponent:({value:s,label:d,removeCallback:o})=>V(P.Left,{ssCardBox:"cloud",borderRadius:"2.tone.secondary",fontSize:"1.mini",padding:"1/2",gap:0,children:[l(E,{padding:[0,"1/4"],children:d}),l(ae.Clear,{flexSizing:"none",color:"nega",fontColor:"4.thin",tabIndex:-1,isRounded:!0,padding:"1/4",onClick:o,freeCSS:{lineHeight:1,aspectRatio:"1/1"},children:l(H.X,{})})]}),SelectorPosition:3},t),{freeCSS:m({cursor:"pointer"},t.freeCSS)}),t.multiSelect||(t.min=0,t.max=1),t.options=t.options||[],t.emptySelect&&(t.options=[{value:null,label:l(q.Supplement,{fontColor:"4.thin",children:"\u9078\u629E\u3092\u89E3\u9664"})},...t.options]),t.value=p.flatArray(t.value),t.options=z.InitOptions(t.options),p.is.nullish(t.rightIcon)&&(t.rightIcon=l(le,{ssSphere:2,children:l(H.Search,{})}),t.disabled&&(t.rightIcon=l(le,{ssSphere:2,fontColor:"5.translucent",children:l(H.Ban,{})}))),t.rightIcon&&(t=m({paddingRight:3},t)),t.leftIcon&&(t=m({paddingLeft:3},t)),l(fe,{componentId:t.componentId,children:L.Core,states:ve(t)})};export{ne as Autocomplete,ne as default};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "amotify",
-  "version": "0.2.199",
+  "version": "0.2.200",
   "description": "UI Component for React,NextJS,esbuild",
   "scripts": {
     "start": "run-p clean build:*",