amotify/dist/fn/Input/Select.js

UI Component for React,NextJS,esbuild

import{b as n,c as u,d as U}from"../../chunk-C5N2D3ZX.js";import{Fragment as te,jsx as o,jsxs as w}from"react/jsx-runtime";import c,{UUID as v}from"jmini";import{useState as Q,useEffect as K}from"react";import{Box as V,FAI as Y,Column as ve}from"../../atoms";import{Literal as q,Row as H}from"../../mols";import{Button as Ie}from"../Button";import{Sheet as be}from"../Sheet";import{OptionalInputWrapper as ge,BoxWrapper as ke,CoreEffects as P,DefaultBoxishStyles as he}from"./core";import{InputAutocompleteClasses as R}from"../../@styles/componentClasses";import{InputLabel as Oe}from"./Label";import{RightIcon as we}from".";function xe(t){let{value:e,states:a}=t,{required:d,options:p}=a,s=[];return d&&e===null&&s.push({type:"invalid",label:"\u5FC5\u9808\u9805\u76EE\u3067\u3059"}),{ok:!s.filter(({type:I})=>I=="invalid").length,notice:s}}const k={FilterSelectableOptions:(t,e)=>{let a=t.rootStates.options;return e||(a=a.filter(d=>(d==null?void 0:d.type)!="label")),a},Button:t=>w(te,{children:[o(k.Native,n({},t)),o(k.Original,n({},t))]}),Placeholder:t=>!t.rootStates.placeholder||t.val_status.rawValue!==null?null:o(V,{position:"absolute",opacity:"middle",fontColor:"3.blur",children:t.rootStates.placeholder||""}),Native:t=>{let{rootStates:e,val_status:a,set_status:d}=t,T=e,{tone:p,required:s,form:I,className:i,label:b,isLabelActive:m,placeholder:h,enableFormSubmit:g,emptySelect:D,showInitValidation:B,onValidate:L,onValidateDelay:$,onUpdateValue:le,onUpdateValidValue:ae,onUserAction:ne,onKeyDown:W,onChange:_,value:ie="",options:z,leftIndicator:re,rightIndicator:se,leftIcon:oe,rightIcon:ue,componentId:ce,status_id:de,wrapStyles:pe,selectedStyles:fe,selectorStyles:Se,pickerStyles:me,pickerPosition:ye,nativePicker:E}=T,r=U(T,["tone","required","form","className","label","isLabelActive","placeholder","enableFormSubmit","emptySelect","showInitValidation","onValidate","onValidateDelay","onUpdateValue","onUpdateValidValue","onUserAction","onKeyDown","onChange","value","options","leftIndicator","rightIndicator","leftIcon","rightIcon","componentId","status_id","wrapStyles","selectedStyles","selectorStyles","pickerStyles","pickerPosition","nativePicker"]);return E?w(V,u(n({htmlTag:"select",tabIndex:0},r),{"data-disabled":e.disabled,"data-show-validation":P.isShowValidation(a,!!B),"data-component-id":a.componentId,"data-input-origin":a.componentId,className:[i,R("Core")].join(" "),onKeyDown:l=>{W&&W(l),g&&P.SubmitForm(l,I)},onChange:l=>{let{value:S}=l.target;d(C=>u(n({},C),{rawValue:S,eventType:"update",eventID:v(12),isInspected:!1,isValidated:!1,notice:[]})),_&&_(l)},children:[!!D&&o("option",{value:"null",children:"\u9078\u629E"}),z.map(l=>c.isNullish(l==null?void 0:l.value)?null:o("option",{value:l==null?void 0:l.value,children:(l==null?void 0:l.label)||(l==null?void 0:l.value)},String(l==null?void 0:l.value)))]})):null},Original:t=>{let{rootStates:e,val_optionFocused:a,set_optionFocused:d,val_status:p,set_status:s}=t,T=e,{tone:I,required:i,form:b,className:m,label:h,isLabelActive:g,placeholder:D,enableFormSubmit:B,emptySelect:L,showInitValidation:$,onValidate:le,onValidateDelay:ae,onUpdateValue:ne,onUpdateValidValue:W,onUserAction:_,value:ie="",options:z,leftIndicator:re,rightIndicator:se,leftIcon:oe,rightIcon:ue,componentId:ce,status_id:de,wrapStyles:pe,selectedStyles:fe,selectorStyles:Se,pickerStyles:me,pickerPosition:ye,nativePicker:E}=T,r=U(T,["tone","required","form","className","label","isLabelActive","placeholder","enableFormSubmit","emptySelect","showInitValidation","onValidate","onValidateDelay","onUpdateValue","onUpdateValidValue","onUserAction","value","options","leftIndicator","rightIndicator","leftIcon","rightIcon","componentId","status_id","wrapStyles","selectedStyles","selectorStyles","pickerStyles","pickerPosition","nativePicker"]);return K(()=>{if(E||e.disabled)return;let l="select-click-"+e.componentId;if(p.isPickerOpen){if(!c('[data-input-origin="'+e.componentId+'"]'))return;c(document).onEvent("click",C=>{let F=c(C.target),A=!!c(F).parent("."+R("Core")).length;c(F).parent("."+R("Selector")).length||A||s(f=>u(n({},f),{eventID:v(12),isPickerOpen:!1}))},{eventID:l})}else c(document).removeEvent([l])},[p.isPickerOpen]),E?null:w(te,{children:[o(V,u(n({tabIndex:0},r),{"data-disabled":e.disabled,"data-show-validation":P.isShowValidation(p,!!$),"data-component-id":p.componentId,"data-input-origin":p.componentId,className:[m,R("Core")].join(" "),onFocus:l=>{r!=null&&r.onFocus&&(r==null||r.onFocus(l)),!e.disabled&&s(S=>u(n({},S),{eventID:v(12),isFocusing:!0,isPickerOpen:!0}))},onBlur:l=>{r!=null&&r.onBlur&&(r==null||r.onBlur(l)),s(S=>u(n({},S),{eventID:v(12),isFocusing:!1}))},onClick:l=>{r!=null&&r.onClick&&(r==null||r.onClick(l)),!e.disabled&&s(S=>u(n({},S),{eventID:v(12),isPickerOpen:!0}))},onKeyDown:l=>{let{key:S,metaKey:C,ctrlKey:F}=l,A=C||F;if(r!=null&&r.onKeyDown&&(r==null||r.onKeyDown(l)),B&&P.SubmitForm(l,b),!e.disabled){if(c.scope(()=>{if(!c.isOneOf(S,"ArrowDown","ArrowUp"))return;if(l.preventDefault(),!p.isPickerOpen){s(O=>u(n({},O),{eventID:v(12),isPickerOpen:!0}));return}let y=S=="ArrowDown"?1:-1,f=k.FilterSelectableOptions(t),N=f.length-1,x=null;c.scope(()=>{var j,J,X,Z,G;let O=f.findIndex(M=>(M==null?void 0:M.id)==a);if(y==1){if(x=(j=f[0])==null?void 0:j.id,A){x=f[N].id;return}if(O==-1||O==N)return;x=(J=f[O+1])==null?void 0:J.id}else{if(x=(X=f[N])==null?void 0:X.id,A){x=(Z=f[0])==null?void 0:Z.id;return}if(O==-1||O==0)return;x=(G=f[O-1])==null?void 0:G.id}}),d(x)}),S=="Escape")s(y=>u(n({},y),{eventID:v(12),isPickerOpen:!1}));else if(S=="Tab")s(y=>u(n({},y),{eventID:v(12),isPickerOpen:!1}));else if(S=="Backspace")s(y=>u(n({},y),{rawValue:null,eventType:"update",eventID:v(12),isInspected:!1}));else if(S==" ")l.preventDefault(),s(y=>u(n({},y),{eventID:v(12),isPickerOpen:!0}));else if(S=="Enter"){if(!p.isPickerOpen){s(f=>u(n({},f),{eventID:v(12),isPickerOpen:!0}));return}l.preventDefault();let y=e.options.find(f=>(f==null?void 0:f.id)==a);if(!y)return;s(f=>u(n({},f),{rawValue:y==null?void 0:y.value,eventType:"update",eventID:v(12),isPickerOpen:!1,isInspected:!1}))}}},children:w(H.Left,{gap:0,children:[o(V,{xcss:{width:0},overflow:"hidden",opacity:"trans","data-input-value-shallow":p.componentId,children:"A"}),w(H.Left,{flexWrap:!0,gap:"1/3",xcss:{letterSpacing:".5px"},children:[o(k.Placeholder,n({},t)),o(k.Selected,n({},t))]})]})})),o(k.Picker,n({},t))]})},Picker:t=>{var I;let{rootStates:e,val_status:a,val_optionFocused:d}=t;K(()=>{if(!a.isPickerOpen||!a.rawValue)return;let i=c(`[data-picker-id="${a.componentId}"]`)[0];if(!i)return;let b=i.position(),m=e.options.find(g=>(g==null?void 0:g.value)===a.rawValue);if(!m)return;let h=c(`[data-select-input-value="${m.id}"]`)[0];h&&(i.scrollTop=h.offsetTop-b.height/2+h.offsetHeight/2)},[a.isPickerOpen]),K(()=>{let i=c(`[data-picker-id="${a.componentId}"]`)[0];if(!i)return;let b=i.position(),m=c(`[data-select-input-value="${d}"]`)[0];m&&(i.scrollTop=m.offsetTop-b.height/2+m.offsetHeight/2)},[d]);let p=k.FilterSelectableOptions(t,!0),s={};{let i=e.pickerPosition||0;c.isOneOf(i,1,2)?s.bottom="100%":c.isOneOf(i,3,4)&&(s.top="100%"),c.isOneOf(i,1,3)?s.left=0:c.isOneOf(i,2,4)&&(s.right=0)}return a.isPickerOpen?o(V,u(n({position:"absolute",ssZIndex:1e3,minWidth:1,padding:"1/3"},s),{children:o(be.Body,u(n({className:R("Selector"),ssCardBox:!0,borderRadius:"2.tone.secondary",boxShadow:"1.normal",overflow:"auto","data-picker-id":a.componentId},e.pickerStyles),{xcss:n({minWidth:12*6,maxHeight:12*24},(I=e.pickerStyles)==null?void 0:I.xcss),children:w(ve,{gap:"1/12",padding:[1,0],children:[p.map((i,b)=>{if(!i)return null;let{type:m,value:h}=i,g=t.val_optionFocused==i.id,D=t.val_status.rawValue===h;return m=="label"?o(V,{children:i.label||i.value},v()):o(Ie.Sub.S,u(n({"data-select-input-value":i.id,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.selectorStyles),{onClick:B=>{t.set_status(L=>u(n({},L),{rawValue:h,eventType:"update",eventID:v(12),isPickerOpen:!1,isInspected:!1}))},children:w(H.Left,{gap:"1/2",children:[D&&o(Y.Check,{fontColor:"theme"}),o(q.Mini,{transition:"short",flexSizing:0,children:i.label||i.value})]})}),i.id)}),!p.length&&o(q.Mini,{padding:[0,1],fontColor:"4.thin",children:"\u5019\u88DC\u304C\u898B\u3064\u304B\u308A\u307E\u305B\u3093"},"no-selector-notice")]})}))})):null},Selected:t=>{let e=t.rootStates.options.find(a=>c.isEqual(a==null?void 0:a.value,t.val_status.rawValue));return!e||t.val_status.rawValue===null&&(t.rootStates.label||t.rootStates.placeholder)?null:o(V,u(n({},t.rootStates.selectedStyles),{children:(e==null?void 0:e.selectedLabel)||(e==null?void 0:e.label)||(e==null?void 0:e.value)}),String(e==null?void 0:e.value))},Core:t=>{var i,b;let{value:e}=t,[a,d]=Q(P.DefaultStatus(t.componentId,e)),[p,s]=Q(((i=t.options.find(m=>(m==null?void 0:m.value)===t.value))==null?void 0:i.id)||((b=t.options[0])==null?void 0:b.id)||""),I={rootStates:t,val_optionFocused:p,set_optionFocused:s,val_status:a,set_status:d};return P.CommonEffects({type:"select",states:t,val_status:a,set_status:d,SystemValidation:xe}),w(ke,{val_status:a,set_status:d,states:t,children:[o(Oe,{componentId:t.componentId,fontSize:t.fontSize,required:t.required,label:t.label,isActive:t.isLabelActive||a.rawValue!==null,val_status:a}),o(k.Button,n({},I))]})}},ee=t=>{var a,d;let e=n({},t);return e=u(n({emptySelect:!0,nativePicker:!1,pickerPosition:3},e),{xcss:n({cursor:"pointer"},e.xcss)}),e.emptySelect&&(e.options=[{value:null,label:o(q.Mini,{fontColor:"4.thin",children:"\u672A\u9078\u629E"})},...e.options]),e.value=(a=e.value)!=null?a:null,(d=e.options)==null||d.forEach((p,s)=>{if(!p)return;let{type:I,value:i}=p;e.options[s]=u(n({id:v(12)},p),{value:i,type:I||"selector"})}),c.isNullish(e.rightIcon)&&(e.rightIcon=o(we,{children:o(Y.AngleDown,{})})),o(ge,{componentId:e.componentId,children:k.Core,states:he(e)})};export{ee as Select,ee as default};