amotify 0.2.156 → 0.2.157

package/demo/esbuild/app.tsx

@@ -37,6 +37,11 @@ let Test = () => {
       <Column
         padding={ 2 }
       >
+        <Input.Select
+          options={ [
+            { value: 'option1',label: 'Option 1',searchValue: 'Option 1' },
+          ] }
+        />
         <Input.Autocomplete
           options={ [
             { label: 'Option 1',value: 'option1' },

package/dist/fn/Input/Autocomplete.js

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

package/dist/fn/Input/Select.d.ts

@@ -29,10 +29,12 @@ declare namespace Select {
         type?: 'selector';
         value: T;
         label: ReactElement;
+        searchValue?: string;
     } | {
         type: 'label';
         value?: T;
         label: ReactElement;
+        searchValue?: string;
     };
     type WrapperStates = {
         rootStates: Input & {

package/dist/fn/Input/Select.js

@@ -1 +1 @@
-import{b as a,c,d as z}from"../../chunk-C5N2D3ZX.js";import{Fragment as $,jsx as l,jsxs as F}from"react/jsx-runtime";import v,{UUID as k}from"jmini";import{useState as A,useEffect as ne}from"react";import{ExtractStyles as Te}from"../../@utils";import{Box as I,Span as xe,FAI as re,Column as Fe}from"../../atoms";import{Literal as B,Row as ie}from"../../mols";import{Button as we}from"../Button";import{Sheet as Re}from"../Sheet";import{OptionalInputWrapper as ke,BoxWrapper as Ae,CoreEffects as x,DefaultBoxishStyles as Ee}from"./core";import{InputAutocompleteClasses as E}from"../../@styles/componentClasses";import{InputLabel as Be}from"./Label";import{RightIcon as Le}from".";function We(e){let{value:t,states:o}=e,{required:r,options:n}=o,f=[];return r&&t===null&&f.push({type:"invalid",label:"\u5FC5\u9808\u9805\u76EE\u3067\u3059"}),{ok:!f.filter(({type:p})=>p=="invalid").length,notice:f}}const H={FilterSelectableOptions:(e,t)=>{let o=e.rootStates.options;return t||(o=o.filter(r=>r.type!="label")),o}},h={Shallow:e=>{let{rootStates:t,val_status:o}=e,r=Te(t);return l(I,{position:"absolute",top:0,left:0,right:0,height:0,overflow:"hidden",opacity:"trans",freeCSS:{zIndex:3,pointerEvents:"none"},children:l(B.Description,c(a({className:t.className},r),{position:"absolute",width:1,freeCSS:c(a({},r.freeCSS),{color:"orange"}),children:l(I,{"data-input-value-shallow":o.componentID,children:"A"})}))})},Button:e=>F($,{children:[l(h.LegacySelector,a({},e)),l(h.Original,a({},e))]}),Placeholder:e=>!e.rootStates.placeholder||e.val_status.dataValue!==null?null:l(I,{position:"absolute",opacity:"middle",fontColor:"3.blur",children:e.rootStates.placeholder||""}),Original:e=>{let{rootStates:t,val_preventOpenSelectorOnFocus:o,set_preventOpenSelectorOnFocus:r,val_optionFocused:n,set_optionFocused:f,val_validate:p,set_validate:w,val_status:m,set_status:b,val_selectorOpen:S,set_selectorOpen:u}=e,U=t,{tone:R,required:D,form:L,className:W,label:ue,isLabelActive:ce,placeholder:pe,enableFormSubmit:P,emptySelect:j,checkValidationAtFirst:M,onValidate:Se,onUpdateValue:de,onUpdateValidValue:fe,value:N="",options:K,leftIndicator:me,rightIndicator:J,leftIcon:ve,rightIcon:ye,componentID:be,status_id:ge,wrapStyles:Ie,SelectedCellStyles:he,SelectorCellStyles:Ce,SelectorMode:_e,SelectorStyles:De,SelectorPosition:Oe}=U,i=z(U,["tone","required","form","className","label","isLabelActive","placeholder","enableFormSubmit","emptySelect","checkValidationAtFirst","onValidate","onUpdateValue","onUpdateValidValue","value","options","leftIndicator","rightIndicator","leftIcon","rightIcon","componentID","status_id","wrapStyles","SelectedCellStyles","SelectorCellStyles","SelectorMode","SelectorStyles","SelectorPosition"]);return ne(()=>{if(e.rootStates.SelectorMode!="original"||t.disabled)return;let s="select-click-"+t.componentID;if(S){if(!v('[data-input-origin="'+t.componentID+'"]'))return;v(document).addEvent({eventID:s,eventType:"click",callback:d=>{let O=v(d.target),V=!!v(O).parent("."+E("Core")).length;v(O).parent("."+E("Selector")).length||V||u(!1)}})}else v(document).removeEvent([s])},[S]),ne(()=>{if(e.rootStates.SelectorMode!="original"||m.eventType=="init"||!S)return;let s=v('[data-input-origin="'+t.componentID+'"]');s&&s.focus()},[m.dataValue]),e.rootStates.SelectorMode!="original"?null:F($,{children:[l(I,c(a({tabIndex:0},i),{"data-disabled":t.disabled,"data-show-validation":x.isShowValidation(p,m,!!M),"data-component-id":m.componentID,"data-input-origin":m.componentID,className:[W,E("Core")].join(" "),onFocus:s=>{if(i!=null&&i.onFocus&&(i==null||i.onFocus(s)),!t.disabled){if(o)return r(!1);u(!0)}},onClick:s=>{i!=null&&i.onClick&&(i==null||i.onClick(s)),!t.disabled&&u(!0)},onKeyDown:s=>{let{key:g,metaKey:d,ctrlKey:O}=s,V=d||O;if(i!=null&&i.onKeyDown&&(i==null||i.onKeyDown(s)),P&&x.SubmitForm(s,L),!t.disabled){if(v.scope(()=>{if(!["ArrowDown","ArrowUp"].includes(g))return;if(s.preventDefault(),!S)return u(!0);let C=g=="ArrowDown"?1:-1,y=H.FilterSelectableOptions(e),q=y.length-1,_=null;v.scope(()=>{var X,G,Q,Y,Z,ee,te,le,ae,oe;let T=y.findIndex(Ve=>Ve.value==n);if(C==1){if(_=(G=(X=y[0])==null?void 0:X.value)!=null?G:null,V){_=(Q=y[q].value)!=null?Q:null;return}if(T==-1||T==q)return;_=(Z=(Y=y[T+1])==null?void 0:Y.value)!=null?Z:null}else{if(_=(ee=y[q].value)!=null?ee:null,V){_=(le=(te=y[0])==null?void 0:te.value)!=null?le:null;return}if(T==-1||T==0)return;_=(oe=(ae=y[T-1])==null?void 0:ae.value)!=null?oe:null}}),f(_)}),g=="Escape")u(!1);else if(g=="Tab")u(!1);else if(g=="Backspace")b(C=>c(a({},C),{dataValue:null,eventType:"update",eventID:k()}));else if(g==" ")s.preventDefault(),u(!0);else if(g=="Enter"){if(!S)return u(!0);s.preventDefault();let C=t.options.find(y=>y.value==n);if(!C)return;b(y=>c(a({},y),{dataValue:C.value,eventType:"update",eventID:k()})),u(!1)}}},children:F(ie.Left,{flexWrap:!0,gap:"1/3",freeCSS:{letterSpacing:".5px"},children:[l(h.Placeholder,a({},e)),l(h.Selected,a({},e)),l(xe,{width:0,overflow:"hidden",opacity:"trans",children:"A"})]})})),S&&l(h.Selector,a({},e))]})},LegacySelector:e=>{let{rootStates:t,val_preventOpenSelectorOnFocus:o,set_preventOpenSelectorOnFocus:r,val_optionFocused:n,set_optionFocused:f,val_validate:p,set_validate:w,val_status:m,set_status:b,val_selectorOpen:S,set_selectorOpen:u}=e,g=t,{tone:R,required:D,form:L,className:W,label:ue,isLabelActive:ce,placeholder:pe,enableFormSubmit:P,emptySelect:j,checkValidationAtFirst:M,onValidate:Se,onUpdateValue:de,onUpdateValidValue:fe,onKeyDown:N,onChange:K,value:me="",options:J,leftIndicator:ve,rightIndicator:ye,leftIcon:be,rightIcon:ge,componentID:Ie,status_id:he,wrapStyles:Ce,SelectedCellStyles:_e,SelectorCellStyles:De,SelectorMode:Oe,SelectorStyles:i,SelectorPosition:U}=g,s=z(g,["tone","required","form","className","label","isLabelActive","placeholder","enableFormSubmit","emptySelect","checkValidationAtFirst","onValidate","onUpdateValue","onUpdateValidValue","onKeyDown","onChange","value","options","leftIndicator","rightIndicator","leftIcon","rightIcon","componentID","status_id","wrapStyles","SelectedCellStyles","SelectorCellStyles","SelectorMode","SelectorStyles","SelectorPosition"]);return e.rootStates.SelectorMode!="legacy"?null:F(I,c(a({htmlTag:"select",tabIndex:0},s),{"data-disabled":t.disabled,"data-show-validation":x.isShowValidation(p,m,!!M),"data-component-id":m.componentID,"data-input-origin":m.componentID,className:[W,E("Core")].join(" "),onKeyDown:d=>{N&&N(d),P&&x.SubmitForm(d,L)},onChange:d=>{let{value:O}=d.target;p.ok&&w({ok:!1,notice:[]}),b(V=>c(a({},V),{dataValue:O,eventType:"update",eventID:k()})),K&&K(d)},children:[!!j&&l("option",{value:"null",children:"\u9078\u629E"}),J.map(d=>v.is.nullish(d.value)?null:l("option",{value:d.value,children:d.label},String(d.value)))]}))},Selector:e=>{var f;let t=[],o=H.FilterSelectableOptions(e,!0),r=H.FilterSelectableOptions(e);o.forEach((p,w)=>{let{type:m,value:b}=p,S=e.val_optionFocused==b,u=e.val_status.dataValue===b;if(m=="selector"){t.push(l(we.Sub.S,c(a({color:"cloud",backgroundColor:"trans",borderRadius:0,fontColor:"2.normal",textAlign:"left",padding:["1/2",1],isActive:u||S,isActiveStyles:S?{backgroundColor:"cloud"}:{backgroundColor:"theme.opa.few",fontColor:"theme"}},e.rootStates.SelectorCellStyles),{onClick:R=>{e.set_status(D=>c(a({},D),{dataValue:b,eventType:"update",eventID:k()})),e.set_selectorOpen(!1),e.set_preventOpenSelectorOnFocus(!0)},children:F(ie.Left,{gap:"1/2",children:[u&&l(re.Check,{fontColor:"theme"}),l(B.Supplement,{transition:"short",flexSizing:0,children:p.label})]})}),String(b)));return}t.push(l(I,{children:p.label},k()))}),r.length||(t=[l(B.Supplement,{padding:[0,1],fontColor:"4.thin",children:"\u5019\u88DC\u304C\u898B\u3064\u304B\u308A\u307E\u305B\u3093"},"no-selector-notice")]);let n={position:"absolute",minWidth:1,freeCSS:{zIndex:1e3}};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(I,c(a({},n),{children:l(Re.Body,c(a({className:E("Selector"),ssCardBox:!0,borderRadius:"2.tone.secondary",boxShadow:"1.normal",overflow:"auto"},e.rootStates.SelectorStyles),{freeCSS:a({minWidth:12*6,maxHeight:12*24},(f=e.rootStates.SelectorStyles)==null?void 0:f.freeCSS),children:l(Fe,{gap:"1/12",padding:[1,0],children:t})}))}))},Selected:e=>{let t=[];return e.val_status.dataValue!==null&&v.scope(()=>{let o=e.rootStates.options.find(r=>v.is.equal(r.value,e.val_status.dataValue));o&&t.push(l(I,c(a({},e.rootStates.SelectedCellStyles),{children:o.label}),String(o.value)))}),l($,{children:t})},Core:e=>{var D;let{value:t}=e,[o,r]=A(x.DefaultStatus(e.componentID,t)),[n,f]=A(!1),[p,w]=A(!1),[m,b]=A((D=e.value)!=null?D:null),[S,u]=A({ok:!1,notice:[]}),R={rootStates:e,val_preventOpenSelectorOnFocus:n,set_preventOpenSelectorOnFocus:f,val_optionFocused:m,set_optionFocused:b,val_selectorOpen:p,set_selectorOpen:w,val_status:o,set_status:r,val_validate:S,set_validate:u};return x.CommonEffects({type:"select",states:e,val_status:o,set_status:r,val_validate:S,set_validate:u,SystemValidation:We}),F(Ae,{val_status:o,set_status:r,val_validate:S,states:e,children:[l(Be,{componentID:e.componentID,fontSize:e.fontSize,required:e.required,label:e.label,isActive:e.isLabelActive||o.dataValue!==null}),l(h.Shallow,a({},R)),l(h.Button,a({},R))]})}},se=e=>{var o;let t=a({},e);return t=c(a({emptySelect:!0,SelectorMode:"original",SelectorPosition:3},t),{freeCSS:a({cursor:"pointer"},t.freeCSS)}),t.emptySelect&&(t.options=[{value:null,label:l(B.Supplement,{fontColor:"4.thin",children:"\u672A\u9078\u629E"})},...t.options]),t.value=(o=t.value)!=null?o:null,t.options.forEach((r,n)=>{let{type:f,value:p}=r;t.options[n]=c(a({},r),{value:p,type:f||"selector"})}),v.is.nullish(t.rightIcon)&&(t.rightIcon=l(Le,{ssSphere:2,children:l(re.AngleDown,{})})),l(ke,{componentID:t.componentID,children:h.Core,states:Ee(t)})};export{se as Select,se as default};
+import{b as n,c as u,d as z}from"../../chunk-C5N2D3ZX.js";import{Fragment as H,jsx as a,jsxs as w}from"react/jsx-runtime";import c,{UUID as R}from"jmini";import{useState as k,useEffect as oe}from"react";import{ExtractStyles as Te}from"../../@utils";import{Box as I,Span as xe,FAI as ne,Column as Fe}from"../../atoms";import{Literal as B,Row as re}from"../../mols";import{Button as we}from"../Button";import{Sheet as Re}from"../Sheet";import{OptionalInputWrapper as ke,BoxWrapper as Ae,CoreEffects as F,DefaultBoxishStyles as Ee}from"./core";import{InputAutocompleteClasses as A}from"../../@styles/componentClasses";import{InputLabel as Be}from"./Label";import{RightIcon as Le}from".";function We(e){let{value:t,states:o}=e,{required:l,options:y}=o,p=[];return l&&t===null&&p.push({type:"invalid",label:"\u5FC5\u9808\u9805\u76EE\u3067\u3059"}),{ok:!p.filter(({type:S})=>S=="invalid").length,notice:p}}const se={FilterSelectableOptions:(e,t)=>{let o=e.rootStates.options;return t||(o=o.filter(l=>l.type!="label")),o}},C={Shallow:e=>{let{rootStates:t,val_status:o}=e,l=Te(t);return a(I,{position:"absolute",top:0,left:0,right:0,height:0,overflow:"hidden",opacity:"trans",freeCSS:{zIndex:3,pointerEvents:"none"},children:a(B.Description,u(n({className:t.className},l),{position:"absolute",width:1,freeCSS:u(n({},l.freeCSS),{color:"orange"}),children:a(I,{"data-input-value-shallow":o.componentID,children:"A"})}))})},Button:e=>w(H,{children:[a(C.LegacySelector,n({},e)),a(C.Original,n({},e))]}),Placeholder:e=>!e.rootStates.placeholder||e.val_status.dataValue!==null?null:a(I,{position:"absolute",opacity:"middle",fontColor:"3.blur",children:e.rootStates.placeholder||""}),Original:e=>{let{rootStates:t,val_preventOpenSelectorOnFocus:o,set_preventOpenSelectorOnFocus:l,val_optionFocused:y,set_optionFocused:p,val_validate:S,set_validate:h,val_status:s,set_status:g,val_selectorOpen:d,set_selectorOpen:f}=e,U=t,{tone:D,required:E,form:L,className:W,label:ue,isLabelActive:ce,placeholder:pe,enableFormSubmit:P,emptySelect:$,checkValidationAtFirst:M,onValidate:Se,onUpdateValue:de,onUpdateValidValue:fe,value:N="",options:K,leftIndicator:me,rightIndicator:j,leftIcon:ve,rightIcon:ye,componentID:be,status_id:ge,wrapStyles:he,SelectedCellStyles:Ie,SelectorCellStyles:Ce,SelectorMode:_e,SelectorStyles:Ve,SelectorPosition:De}=U,r=z(U,["tone","required","form","className","label","isLabelActive","placeholder","enableFormSubmit","emptySelect","checkValidationAtFirst","onValidate","onUpdateValue","onUpdateValidValue","value","options","leftIndicator","rightIndicator","leftIcon","rightIcon","componentID","status_id","wrapStyles","SelectedCellStyles","SelectorCellStyles","SelectorMode","SelectorStyles","SelectorPosition"]);return oe(()=>{if(e.rootStates.SelectorMode!="original"||t.disabled)return;let i="select-click-"+t.componentID;if(d){if(!c('[data-input-origin="'+t.componentID+'"]'))return;c(document).addEvent({eventID:i,eventType:"click",callback:m=>{let O=c(m.target),T=!!c(O).parent("."+A("Core")).length;c(O).parent("."+A("Selector")).length||T||f(!1)}})}else c(document).removeEvent([i])},[d]),oe(()=>{if(e.rootStates.SelectorMode!="original"||s.eventType=="init"||!d)return;let i=c('[data-input-origin="'+t.componentID+'"]');i&&i.focus()},[s.dataValue]),e.rootStates.SelectorMode!="original"?null:w(H,{children:[a(I,u(n({tabIndex:0},r),{"data-disabled":t.disabled,"data-show-validation":F.isShowValidation(S,s,!!M),"data-component-id":s.componentID,"data-input-origin":s.componentID,className:[W,A("Core")].join(" "),onFocus:i=>{if(r!=null&&r.onFocus&&(r==null||r.onFocus(i)),!t.disabled){if(o)return l(!1);f(!0)}},onClick:i=>{r!=null&&r.onClick&&(r==null||r.onClick(i)),!t.disabled&&f(!0)},onKeyDown:i=>{let{key:b,metaKey:m,ctrlKey:O}=i,T=m||O;if(r!=null&&r.onKeyDown&&(r==null||r.onKeyDown(i)),P&&F.SubmitForm(i,L),!t.disabled){if(c.scope(()=>{if(!["ArrowDown","ArrowUp"].includes(b))return;if(i.preventDefault(),!d)return f(!0);let _=b=="ArrowDown"?1:-1,v=se.FilterSelectableOptions(e),q=v.length-1,V=null;c.scope(()=>{var J,X,G,Q,Y,Z,ee,te,le,ae;let x=v.findIndex(Oe=>Oe.value==y);if(_==1){if(V=(X=(J=v[0])==null?void 0:J.value)!=null?X:null,T){V=(G=v[q].value)!=null?G:null;return}if(x==-1||x==q)return;V=(Y=(Q=v[x+1])==null?void 0:Q.value)!=null?Y:null}else{if(V=(Z=v[q].value)!=null?Z:null,T){V=(te=(ee=v[0])==null?void 0:ee.value)!=null?te:null;return}if(x==-1||x==0)return;V=(ae=(le=v[x-1])==null?void 0:le.value)!=null?ae:null}}),p(V)}),b=="Escape")f(!1);else if(b=="Tab")f(!1);else if(b=="Backspace")g(_=>u(n({},_),{dataValue:null,eventType:"update",eventID:R()}));else if(b==" ")i.preventDefault(),f(!0);else if(b=="Enter"){if(!d)return f(!0);i.preventDefault();let _=t.options.find(v=>v.value==y);if(!_)return;g(v=>u(n({},v),{dataValue:_.value,eventType:"update",eventID:R()})),f(!1)}}},children:w(re.Left,{flexWrap:!0,gap:"1/3",freeCSS:{letterSpacing:".5px"},children:[a(C.Placeholder,n({},e)),a(C.Selected,n({},e)),a(xe,{width:0,overflow:"hidden",opacity:"trans",children:"A"})]})})),d&&a(C.Selector,n({},e))]})},LegacySelector:e=>{let{rootStates:t,val_preventOpenSelectorOnFocus:o,set_preventOpenSelectorOnFocus:l,val_optionFocused:y,set_optionFocused:p,val_validate:S,set_validate:h,val_status:s,set_status:g,val_selectorOpen:d,set_selectorOpen:f}=e,b=t,{tone:D,required:E,form:L,className:W,label:ue,isLabelActive:ce,placeholder:pe,enableFormSubmit:P,emptySelect:$,checkValidationAtFirst:M,onValidate:Se,onUpdateValue:de,onUpdateValidValue:fe,onKeyDown:N,onChange:K,value:me="",options:j,leftIndicator:ve,rightIndicator:ye,leftIcon:be,rightIcon:ge,componentID:he,status_id:Ie,wrapStyles:Ce,SelectedCellStyles:_e,SelectorCellStyles:Ve,SelectorMode:De,SelectorStyles:r,SelectorPosition:U}=b,i=z(b,["tone","required","form","className","label","isLabelActive","placeholder","enableFormSubmit","emptySelect","checkValidationAtFirst","onValidate","onUpdateValue","onUpdateValidValue","onKeyDown","onChange","value","options","leftIndicator","rightIndicator","leftIcon","rightIcon","componentID","status_id","wrapStyles","SelectedCellStyles","SelectorCellStyles","SelectorMode","SelectorStyles","SelectorPosition"]);return e.rootStates.SelectorMode!="legacy"?null:w(I,u(n({htmlTag:"select",tabIndex:0},i),{"data-disabled":t.disabled,"data-show-validation":F.isShowValidation(S,s,!!M),"data-component-id":s.componentID,"data-input-origin":s.componentID,className:[W,A("Core")].join(" "),onKeyDown:m=>{N&&N(m),P&&F.SubmitForm(m,L)},onChange:m=>{let{value:O}=m.target;S.ok&&h({ok:!1,notice:[]}),g(T=>u(n({},T),{dataValue:O,eventType:"update",eventID:R()})),K&&K(m)},children:[!!$&&a("option",{value:"null",children:"\u9078\u629E"}),j.map(m=>c.is.nullish(m.value)?null:a("option",{value:m.value,children:m.label},String(m.value)))]}))},Selector:e=>{var y;let t=[],o=se.FilterSelectableOptions(e,!0);o.forEach((p,S)=>{let{type:h,value:s}=p,g=e.val_optionFocused==s,d=e.val_status.dataValue===s;if(h=="selector"){t.push(a(we.Sub.S,u(n({color:"cloud",backgroundColor:"trans",borderRadius:0,fontColor:"2.normal",textAlign:"left",padding:["1/2",1],isActive:d||g,isActiveStyles:g?{backgroundColor:"cloud"}:{backgroundColor:"theme.opa.few",fontColor:"theme"}},e.rootStates.SelectorCellStyles),{onClick:f=>{e.set_status(D=>u(n({},D),{dataValue:s,eventType:"update",eventID:R()})),e.set_selectorOpen(!1),e.set_preventOpenSelectorOnFocus(!0)},children:w(re.Left,{gap:"1/2",children:[d&&a(ne.Check,{fontColor:"theme"}),a(B.Supplement,{transition:"short",flexSizing:0,children:p.label})]})}),String(s)));return}t.push(a(I,{children:p.label},R()))}),o.length||(t=[a(B.Supplement,{padding:[0,1],fontColor:"4.thin",children:"\u5019\u88DC\u304C\u898B\u3064\u304B\u308A\u307E\u305B\u3093"},"no-selector-notice")]);let l={position:"absolute",minWidth:1,freeCSS:{zIndex:1e3}};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(I,u(n({},l),{children:a(Re.Body,u(n({className:A("Selector"),ssCardBox:!0,borderRadius:"2.tone.secondary",boxShadow:"1.normal",overflow:"auto"},e.rootStates.SelectorStyles),{freeCSS:n({minWidth:12*6,maxHeight:12*24},(y=e.rootStates.SelectorStyles)==null?void 0:y.freeCSS),children:a(Fe,{gap:"1/12",padding:[1,0],children:t})}))}))},Selected:e=>{let t=[];return e.val_status.dataValue!==null&&c.scope(()=>{let o=e.rootStates.options.find(l=>c.is.equal(l.value,e.val_status.dataValue));o&&t.push(a(I,u(n({},e.rootStates.SelectedCellStyles),{children:o.label}),String(o.value)))}),a(H,{children:t})},Core:e=>{var E;let{value:t}=e,[o,l]=k(F.DefaultStatus(e.componentID,t)),[y,p]=k(!1),[S,h]=k(!1),[s,g]=k((E=e.value)!=null?E:null),[d,f]=k({ok:!1,notice:[]}),D={rootStates:e,val_preventOpenSelectorOnFocus:y,set_preventOpenSelectorOnFocus:p,val_optionFocused:s,set_optionFocused:g,val_selectorOpen:S,set_selectorOpen:h,val_status:o,set_status:l,val_validate:d,set_validate:f};return F.CommonEffects({type:"select",states:e,val_status:o,set_status:l,val_validate:d,set_validate:f,SystemValidation:We}),w(Ae,{val_status:o,set_status:l,val_validate:d,states:e,children:[a(Be,{componentID:e.componentID,fontSize:e.fontSize,required:e.required,label:e.label,isActive:e.isLabelActive||o.dataValue!==null}),a(C.Shallow,n({},D)),a(C.Button,n({},D))]})}},ie=e=>{var o;let t=n({},e);return t=u(n({emptySelect:!0,SelectorMode:"original",SelectorPosition:3},t),{freeCSS:n({cursor:"pointer"},t.freeCSS)}),t.emptySelect&&(t.options=[{value:null,label:a(B.Supplement,{fontColor:"4.thin",children:"\u672A\u9078\u629E"})},...t.options]),t.value=(o=t.value)!=null?o:null,t.options.forEach((l,y)=>{let{type:p,value:S,searchValue:h}=l,s=h||c.is.string(S)&&S||c.Stringify(S||"");t.options[y]=u(n({},l),{value:S,searchValue:s,type:p||"selector"})}),c.is.nullish(t.rightIcon)&&(t.rightIcon=a(Le,{ssSphere:2,children:a(ne.AngleDown,{})})),a(ke,{componentID:t.componentID,children:C.Core,states:Ee(t)})};export{ie as Select,ie as default};

package/package.json

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