@gear-js/ui
Version:
React UI components used across Gear applications
2 lines (1 loc) • 17.3 kB
JavaScript
import{jsxs as e,jsx as t,Fragment as r}from"react/jsx-runtime";import*as l from"react";import{useRef as o,useImperativeHandle as a,useState as n,useEffect as i,useId as s,useCallback as c}from"react";import{createPortal as d}from"react-dom";function u(e,t){var r={};for(var l in e)Object.prototype.hasOwnProperty.call(e,l)&&t.indexOf(l)<0&&(r[l]=e[l]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(l=Object.getOwnPropertySymbols(e);o<l.length;o++)t.indexOf(l[o])<0&&Object.prototype.propertyIsEnumerable.call(e,l[o])&&(r[l[o]]=e[l[o]])}return r}function p(e){var t,r,l="";if("string"==typeof e||"number"==typeof e)l+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(r=p(e[t]))&&(l&&(l+=" "),l+=r);else for(t in e)e[t]&&(l&&(l+=" "),l+=t);return l}function _(){for(var e,t,r=0,l="";r<arguments.length;)(e=arguments[r++])&&(t=p(e))&&(l&&(l+=" "),l+=t);return l}"function"==typeof SuppressedError&&SuppressedError;var m={button:"Button-module_button__18Bed",resets:"Button-module_resets__KAhhx",block:"Button-module_block__3jdVm",noWrap:"Button-module_noWrap__cSEg2",letterSpacing:"Button-module_letterSpacing__b1PgI",large:"Button-module_large__iWceB",icon:"Button-module_icon__xIuVv",medium:"Button-module_medium__HYxwi",small:"Button-module_small__zfmcP",noText:"Button-module_noText__Rs-QB",primary:"Button-module_primary__st6yY",secondary:"Button-module_secondary__j-3rj",light:"Button-module_light__oUjYe",lightGreen:"Button-module_lightGreen__ZNRVv",grey:"Button-module_grey__ZIg2R",gradient:"Button-module_gradient__PA-Ed",transparent:"Button-module_transparent__6v0QA"};const h=r=>{const{text:l,icon:o,className:a,block:n,noWrap:i,noLetterSpacing:s,type:c="button",color:d="primary",size:p="medium"}=r,h=u(r,["text","icon","className","block","noWrap","noLetterSpacing","type","color","size"]),b=_(m.button,a,m[d],m[l?p:"noText"],n&&m.block,i&&m.noWrap,!s&&m.letterSpacing);return e("button",Object.assign({type:c,className:b},h,{children:[o&&t(o,{className:m.icon}),l]}))};var b={label:"Checkbox-module_label__JBaRm",resets:"Checkbox-module_resets__nbPLo",input:"Checkbox-module_input__-039s",checkbox:"Checkbox-module_checkbox__D0D4S",switch:"Checkbox-module_switch__xLAIS"};const g=r=>{var{label:l,className:o,type:a}=r,n=u(r,["label","className","type"]);const{disabled:i}=n,s=_(b.label,o,i&&"disabled"),c=_(b.input,"switch"===a?b.switch:b.checkbox);return e("label",{className:s,children:[t("input",Object.assign({type:"checkbox",className:c},n)),l]})};var f;function v(){return v=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var l in r)({}).hasOwnProperty.call(r,l)&&(e[l]=r[l])}return e},v.apply(null,arguments)}var y,w=function(e){return l.createElement("svg",v({xmlns:"http://www.w3.org/2000/svg",width:16,height:16,fill:"none"},e),f||(f=l.createElement("path",{fill:"#fff",fillOpacity:.7,fillRule:"evenodd",d:"M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0m-5.333 4.502L12 11.113 9.333 8.335 12 5.557l-1.333-1.39L8 6.946 5.333 4.167 4 5.557l2.667 2.778L4 11.113l1.333 1.39L8 9.723z",clipRule:"evenodd"})))};function N(){return N=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var l in r)({}).hasOwnProperty.call(r,l)&&(e[l]=r[l])}return e},N.apply(null,arguments)}var x=function(e){return l.createElement("svg",N({xmlns:"http://www.w3.org/2000/svg",width:16,height:16,fill:"none"},e),y||(y=l.createElement("path",{fill:"#9A9A9A",fillRule:"evenodd",d:"M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0m-5.333 4.502L12 11.113 9.333 8.335 12 5.557l-1.333-1.39L8 6.946 5.333 4.167 4 5.557l2.667 2.778L4 11.113l1.333 1.39L8 9.723z",clipRule:"evenodd"})))};function O(e,t){const r=o(null);a(e,(()=>r.current));const[l,i]=n(!1);return{clearButton:{isVisible:l,icon:"light"===t?x:w,show:()=>i(!0),hide:()=>i(!1),handleClick:()=>{var e;if(!window||!r.current)return;const t=r.current instanceof HTMLTextAreaElement?window.HTMLTextAreaElement.prototype:window.HTMLInputElement.prototype,l=null===(e=Object.getOwnPropertyDescriptor(t,"value"))||void 0===e?void 0:e.set;null==l||l.call(r.current,"");const o=new Event("change",{bubbles:!0});r.current.dispatchEvent(o)},preventBlur:e=>e.preventDefault()},inputRef:r}}var k={wrapper:"TooltipWrapper-module_wrapper__e48ou"};const B=({text:e,children:r,className:l})=>{const o=_(k.wrapper,l);return t("div",{className:o,"data-tooltip":e,"data-testid":"tooltipWrapper",children:r})};var I={tooltip:"Tooltip-module_tooltip__LjRUX"};function j({text:e,className:r}){return t(B,{text:e,className:r,children:t("span",{className:I.tooltip,"data-testid":"tooltipIcon"})})}var S={wrapper:"InputWrapper-module_wrapper__-TXaq",x:"InputWrapper-module_x__UzEg9",y:"InputWrapper-module_y__3gnGL",labelWrapper:"InputWrapper-module_labelWrapper__MY5Nm",normal:"InputWrapper-module_normal__ZF-NL",large:"InputWrapper-module_large__U5QBp",tooltip:"InputWrapper-module_tooltip__KlqPk",label:"InputWrapper-module_label__rWCBZ",error:"InputWrapper-module_error__ZSBwU"};const A=r=>{const{id:l,children:o,className:a,label:n,error:i,direction:s,size:c,gap:d,disabled:u,tooltip:p}=r,m=_(S.wrapper,a,u&&"disabled",n&&S[s]),h=_(S.labelWrapper,S[c],S[s]);return e("div",{className:m,style:d&&(e=>{const[t,r]=e.split("/");return{gridTemplateColumns:`${t}fr ${r}fr`}})(d),"data-testid":"inputWrapper",children:[n&&e("div",{className:h,children:[t("label",{htmlFor:l,className:S.label,children:n}),p&&t(j,{text:p,className:S.tooltip})]}),e("div",{className:S.errorWrapper,children:[o,i&&t("p",{className:S.error,children:i})]})]})};var z;function L(){return L=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var l in r)({}).hasOwnProperty.call(r,l)&&(e[l]=r[l])}return e},L.apply(null,arguments)}var E=function(e){return l.createElement("svg",L({xmlns:"http://www.w3.org/2000/svg",width:14,height:14,fill:"none"},e),z||(z=l.createElement("path",{fill:"#DADADA",fillRule:"evenodd",d:"M8.618 10.032a5.5 5.5 0 1 1 1.414-1.414l3.675 3.675-1.414 1.414zM5.5 9a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7",clipRule:"evenodd"})))},T={dark:"Input-module_dark__wBKdo",wrapper:"Input-module_wrapper__dpfdV",input:"Input-module_input__505b7",light:"Input-module_light__PlULH",normal:"Input-module_normal__Y4y9h",large:"Input-module_large__LmNFT",readOnly:"Input-module_readOnly__biXJu",error:"Input-module_error__38tit",clearButton:"Input-module_clearButton__xES0i",block:"Input-module_block__OoRy5",resets:"Input-module_resets__VWsXX",icon:"Input-module_icon__qkecR",searchButton:"Input-module_searchButton__qn6rG"};const R=r=>{const{label:l,icon:o,className:a,error:n,gap:i,tooltip:c,type:d,block:p,size:m="normal",color:b="dark",direction:g="x",onBlur:f,onFocus:v,ref:y}=r,w=u(r,["label","icon","className","error","gap","tooltip","type","block","size","color","direction","onBlur","onFocus","ref"]),{readOnly:N,disabled:x}=w,k="search"===d,B=_(T.wrapper,N&&T.readOnly,T[m],T[b],Boolean(n)&&T.error,p&&T.block),I=_(T.input,T[b]),{clearButton:j,inputRef:S}=O(y,b),z=s();return t(A,{id:z,className:a,label:l,error:n,direction:g,size:m,gap:i,disabled:x,tooltip:c,children:e("div",{className:B,"data-testid":"wrapper",children:[o&&t(o,{className:T.icon}),t("input",Object.assign({},w,{type:k?void 0:d,id:z,className:I,ref:S,onFocus:e=>{N||j.show(),v&&v(e)},onBlur:e=>{j.hide(),f&&f(e)}})),j.isVisible&&t(h,{icon:j.icon,color:"transparent",onClick:j.handleClick,onMouseDown:j.preventBlur,className:T.clearButton,disabled:x}),k&&t(h,{type:"submit",icon:E,color:"transparent",className:T.searchButton,disabled:x})]})})};var W={label:"Radio-module_label__c-sYW",resets:"Radio-module_resets__NIrBH",input:"Radio-module_input__VK-U8"};const M=r=>{var{label:l,className:o}=r,a=u(r,["label","className"]);const{disabled:n}=a,i=_(W.label,o,n&&"disabled");return e("label",{className:i,children:[t("input",Object.assign({type:"radio",className:W.input},a)),l]})},C=e=>{var{buttons:l,value:o}=e,a=u(e,["buttons","value"]);return t(r,{children:l.map(((e,r)=>{const l=o===e.value,n=o?Object.assign(Object.assign({},e),{checked:l}):e;return t(M,Object.assign({},n,a),r)}))})};var F={dark:"Select-module_dark__0GzrW",select:"Select-module_select__U4LyF",light:"Select-module_light__tF1yk",normal:"Select-module_normal__zloDr",large:"Select-module_large__oJT1T",error:"Select-module_error__yikGO",resets:"Select-module_resets__RxZwV",block:"Select-module_block__1AdQi"};const P=e=>{const{label:r,className:l,error:o,gap:a,tooltip:n,block:i,color:c="dark",size:d="normal",direction:p="x"}=e,m=u(e,["label","className","error","gap","tooltip","block","color","size","direction"]),{disabled:h}=m,b=_(F.select,F[c],F[d],Boolean(o)&&F.error,i&&F.block),g=s();return t(A,{id:g,className:l,label:r,error:o,direction:p,size:d,gap:a,disabled:h,tooltip:n,children:t("select",Object.assign({id:g,className:b},m,{children:"options"in e?e.options.map(((e,r)=>t("option",Object.assign({},e),r))):e.children}))})};var V={dark:"Textarea-module_dark__W4z-1",wrapper:"Textarea-module_wrapper__dwrdQ",textarea:"Textarea-module_textarea__yE6jp",light:"Textarea-module_light__g2tt6",normal:"Textarea-module_normal__3pTeg",large:"Textarea-module_large__sZKOw",readOnly:"Textarea-module_readOnly__g0TI6",error:"Textarea-module_error__ZaNn-",clearButton:"Textarea-module_clearButton__0YXgH",resets:"Textarea-module_resets__2JRvY",block:"Textarea-module_block__w8lY5"};const H=r=>{const{label:l,className:o,error:a,gap:n,tooltip:i,block:c,rows:d=5,color:p="dark",size:m="normal",direction:b="x",onFocus:g,onBlur:f,ref:v}=r,y=u(r,["label","className","error","gap","tooltip","block","rows","color","size","direction","onFocus","onBlur","ref"]),{disabled:w,readOnly:N}=y,x=_(V.wrapper,N&&V.readOnly,V[p],V[m],Boolean(a)&&V.error,c&&V.block),k=_(V.textarea,V[p]),B=s(),{clearButton:I,inputRef:j}=O(v,p);return t(A,{id:B,className:o,label:l,error:a,direction:b,size:m,gap:n,disabled:w,tooltip:i,children:e("div",{className:x,"data-testid":"wrapper",children:[t("textarea",Object.assign({},y,{id:B,rows:d,className:k,ref:j,onFocus:e=>{N||I.show(),g&&g(e)},onBlur:e=>{I.hide(),f&&f(e)}})),I.isVisible&&t(h,{icon:I.icon,color:"transparent",onClick:I.handleClick,onMouseDown:I.preventBlur,className:V.clearButton,disabled:w})]})})};var D;function G(){return G=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var l in r)({}).hasOwnProperty.call(r,l)&&(e[l]=r[l])}return e},G.apply(null,arguments)}var Z=function(e){return l.createElement("svg",G({xmlns:"http://www.w3.org/2000/svg",width:14,height:14,fill:"none"},e),D||(D=l.createElement("path",{fill:"#fff",fillOpacity:.8,d:"m7 5.586 4.95-4.95 1.414 1.414L8.414 7l4.95 4.95-1.414 1.414L7 8.414l-4.95 4.95L.636 11.95 5.586 7 .636 2.05 2.05.636z"})))},K={heading:"Modal-module_heading__LyjIe",overlay:"Modal-module_overlay__-TJEC",modal:"Modal-module_modal__yNG-7",normal:"Modal-module_normal__ftQrk",large:"Modal-module_large__O42Af",header:"Modal-module_header__NS30G",body:"Modal-module_body__3zIj9",withoutFooter:"Modal-module_withoutFooter__RCDLp",footer:"Modal-module_footer__Oyz-R"};function Y(){const[e,t]=n(0);return[e,c((e=>{e&&t(e.getBoundingClientRect().height)}),[])]}const U=({heading:r,close:l,children:o,footer:a,className:s,size:c="normal"})=>{const[u,p]=n(),{bodyStyle:m,headerRef:b,footerRef:g}=function(){const[e,t]=Y(),[r,l]=Y();return{bodyStyle:{maxHeight:`calc(100vh - ${e+r+64}px)`},headerRef:t,footerRef:l}}(),f=_(K.modal,K[c]),v=_(K.body,s,!a&&K.withoutFooter);i((()=>{const e=document.createElement("div");return e.id="modal-root",document.body.appendChild(e),p(e),()=>{document.body.removeChild(e)}}),[]);const y=t("div",{className:K.overlay,onClick:({target:e,currentTarget:t})=>{e===t&&l()},"data-testid":"overlay",children:e("div",{className:f,"data-testid":"modal",children:[e("header",{className:K.header,ref:b,children:[t("h3",{className:K.heading,children:r}),t(h,{icon:Z,color:"transparent",onClick:l})]}),o&&t("div",{className:v,"data-testid":"body",style:m,children:o}),a&&t("footer",{className:K.footer,ref:g,children:a})]})});return u?d(y,u):null},Q=e=>{const t=e?Math.floor(Math.log(e)/Math.log(1024)):0;return`${e?(e/1024**t).toFixed(2):"0"} ${["B","KB","MB","GB","TB"][t]}`};var X;function J(){return J=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var l in r)({}).hasOwnProperty.call(r,l)&&(e[l]=r[l])}return e},J.apply(null,arguments)}var $,q=function(e){return l.createElement("svg",J({xmlns:"http://www.w3.org/2000/svg",width:16,height:17,fill:"none"},e),X||(X=l.createElement("path",{fill:"#fff",fillOpacity:.7,fillRule:"evenodd",d:"M16 8.5a8 8 0 1 1-16 0 8 8 0 0 1 16 0m-5.333 4.502L12 11.613 9.333 8.835 12 6.057l-1.333-1.39L8 7.446 5.333 4.667 4 6.057l2.667 2.778L4 11.613l1.333 1.39L8 10.223z",clipRule:"evenodd"})))};function ee(){return ee=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var l in r)({}).hasOwnProperty.call(r,l)&&(e[l]=r[l])}return e},ee.apply(null,arguments)}var te=function(e){return l.createElement("svg",ee({xmlns:"http://www.w3.org/2000/svg",width:14,height:18,fill:"none"},e),$||($=l.createElement("path",{fill:"#fff",d:"M10.581 6.7a.625.625 0 0 1-.031.881L7.269 10.62a.63.63 0 0 1-.425.162.62.62 0 0 1-.438-.2l-1.093-1.2a.625.625 0 0 1 .925-.837l.668.731 2.819-2.606a.625.625 0 0 1 .856.031m3.294-1.675V14A1.875 1.875 0 0 1 12 15.875a1.875 1.875 0 0 1-1.875 1.875H2a1.875 1.875 0 0 1-1.875-1.875V4A1.875 1.875 0 0 1 2 2.125 1.875 1.875 0 0 1 3.875.25H9.95a1.88 1.88 0 0 1 1.525.794l2.056 2.893c.225.319.345.699.344 1.088m-3.125-2.85v1.2a.625.625 0 0 0 .625.625h.669zm0 13.7H3.875A1.875 1.875 0 0 1 2 14V3.375A.625.625 0 0 0 1.375 4v11.875A.625.625 0 0 0 2 16.5h8.125a.624.624 0 0 0 .625-.625M12.625 5.25h-1.25A1.875 1.875 0 0 1 9.5 3.375V1.5H3.875a.625.625 0 0 0-.625.625V14a.625.625 0 0 0 .625.625H12a.624.624 0 0 0 .625-.625z"})))},re={name:"FileInput-module_name__ImAm4",label:"FileInput-module_label__aMSke",text:"FileInput-module_text__EOZei",input:"FileInput-module_input__gEsvB",file:"FileInput-module_file__k0RQs",error:"FileInput-module_error__lHvHW",size:"FileInput-module_size__pHVV1"};const le=l=>{const{value:c,label:d,className:p,gap:_,error:m,tooltip:b,accept:g,onChange:f,direction:v="x",size:y="normal",color:w="light",ref:N}=l,x=u(l,["value","label","className","gap","error","tooltip","accept","onChange","direction","size","color","ref"]),{disabled:O}=x,[k,B]=n(),I=c||k,j=f||B,S=o(null),z=s(),L=Array.isArray(g)?g.join(","):g;a(N,(()=>S.current));const E=()=>{var e;return null===(e=S.current)||void 0===e?void 0:e.click()},T=()=>{if(!S.current)return;S.current.value="";const e=new Event("change",{bubbles:!0});S.current.dispatchEvent(e)};return((e,t)=>{const r=o(!1);i((()=>()=>{r.current=!1}),[]),i((()=>{if(r.current)return e();r.current=!0}),t)})((()=>{c||T()}),[c]),e(A,{id:z,className:p,label:d,error:m,direction:v,size:y,gap:_,disabled:O,tooltip:b,children:[t("input",Object.assign({id:z,type:"file",className:re.input,ref:S,accept:L,onChange:({target:e})=>{var t;return j(null===(t=e.files)||void 0===t?void 0:t[0])}},x)),I?e(r,{children:[e("div",{className:re.file,children:[t(h,{text:I.name,color:"transparent",size:"small",className:re.name,onClick:E}),t(h,{icon:q,color:"transparent",onClick:e=>{e.preventDefault(),T()}})]}),!m&&e("span",{className:re.size,children:["Size: ",Q(I.size)]})]}):t(h,{text:"Select file",icon:te,color:w,size:"normal"===y?"medium":"large",onClick:E})]})};var oe;function ae(){return ae=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var l in r)({}).hasOwnProperty.call(r,l)&&(e[l]=r[l])}return e},ae.apply(null,arguments)}var ne=function(e){return l.createElement("svg",ae({xmlns:"http://www.w3.org/2000/svg",width:12,height:12,fill:"none"},e),oe||(oe=l.createElement("path",{fill:"#858585",d:"M11.25.452a.83.83 0 0 0-1.175 0L6 4.52 1.925.444A.83.83 0 1 0 .75 1.619l4.075 4.075L.75 9.769a.83.83 0 1 0 1.175 1.175L6 6.869l4.075 4.075a.83.83 0 1 0 1.175-1.175L7.175 5.694l4.075-4.075a.835.835 0 0 0 0-1.167"})))},ie={header:"Alert-module_header__oKWFM",root:"Alert-module_root__KIhSk",alert:"Alert-module_alert__zP4AL",success:"Alert-module_success__lftZT",error:"Alert-module_error__ah9Kg",info:"Alert-module_info__-J-F1",loading:"Alert-module_loading__tOAB6",rotating:"Alert-module_rotating__EaGX-",button:"Alert-module_button__Fd5z2",body:"Alert-module_body__IOnct"};function se({alert:r,close:l}){const{content:o,options:a}=r,{type:n,title:i,style:s,isClosed:c}=a,d=_(ie.header,ie[n]);return e("div",{className:ie.alert,style:s,children:[e("header",{className:d,children:[i||n,c&&t(h,{icon:ne,color:"transparent",className:ie.button,onClick:l})]}),t("div",{className:ie.body,children:o})]})}export{se as Alert,h as Button,g as Checkbox,le as FileInput,R as Input,A as InputWrapper,U as Modal,M as Radio,C as RadioGroup,P as Select,H as Textarea,j as Tooltip,I as TooltipStyles,B as TooltipWrapper,k as TooltipWrapperStyles,ie as alertStyles,m as buttonStyles,b as checkboxStyles,re as fileInputStyles,T as inputStyles,S as inputWrapperStyles,K as modalStyles,W as radioStyles,F as selectStyles,V as textareaStyles};import './index.css';