dga-ui-react 1.5.1 → 1.6.0

package/dist/esm/index.js

@@ -263,11 +263,11 @@ import{jsx as e,jsxs as t,Fragment as r}from"react/jsx-runtime";import o,{useDeb
   font-weight: 500;
   .leadIcon {
     margin-inline-end: 4px;
-    display: "inline-flex";
-    alignitems: "center";
+    display: inline-flex;
   }
   .trailIcon {
     margin-inline-start: 4px;
+    display: inline-flex;
   }
 `,Br={medium:{w:320,h:32,p:16,f:14},large:{w:320,h:40,p:16,f:16}},Er=({label:r,className:n,size:i,variant:a,error:l,onChange:s,value:d,placeholder:c,options:p,getOptionLabel:u,disabled:g,multiple:h,maxTagsToShow:A,maxTagsLabel:f})=>{const x=b(),[v,y]=o.useState(!1),[C,w]=o.useState(""),[$,k]=o.useState(""),[S,B]=o.useState(),[E,N]=o.useState({top:0,left:0,width:0}),z=o.useRef(null),I=null!=i?i:"large";let F=x.textColor,R=x.palette.neutral[500],U=`1px solid ${l?x.palette.error[700]:x.palette.neutral[400]}`,D=`1px solid ${l?x.palette.error[700]:x.palette.neutral[700]}`,O=`1px solid ${l?x.palette.error[700]:x.palette.neutral[700]}`,T="#FFF",Y=l?x.palette.error[700]:x.textColor,H=x.elevation.shadows.md;"lighter"===a&&(T=x.palette.neutral[25],U="1px solid transparent",D=`1px solid ${x.palette.neutral[400]}`,O=`1px solid ${x.palette.neutral[400]}`),"darker"===a&&(T=x.palette.neutral[100]),g&&(F=x.palette.neutral[400],U=`1px solid ${x.palette.neutral[200]}`,D=`1px solid ${x.palette.neutral[200]}`);const M=e=>u?u(e):null==e?void 0:e.label,L=o.useMemo((()=>{let e=[];return $&&p.length>0?p.forEach((t=>{var r;(u&&u(t).toLowerCase().trim().includes($.toLowerCase().trim())||!u&&(null===(r=null==t?void 0:t.label)||void 0===r?void 0:r.toLowerCase().trim().includes($.toLowerCase().trim())))&&e.push(t)})):e=p,e}),[p,$]),Q=()=>{z.current&&N({top:z.current.offsetTop+z.current.clientHeight,left:z.current.offsetLeft,width:z.current.clientWidth})};return o.useEffect((()=>{if(z.current){const e=()=>{z.current&&Q()},t=e=>{var t;(null===(t=z.current)||void 0===t?void 0:t.contains(e.target))||y(!1)};return window.addEventListener("resize",e),window.addEventListener("click",t),()=>{window.removeEventListener("resize",e),window.removeEventListener("click",t)}}}),[z]),o.useEffect((()=>{if(!d)return w(""),k(""),B([]),void y(!1);Array.isArray(d)||w(M(d)),h&&Array.isArray(d)?B(d):B([d])}),[d,p]),o.useEffect((()=>{v&&Q()}),[v,S]),t(Nr,{$theme:x,className:m("dgaui dgaui_autocomplete",n),children:[e("label",{className:g?"disabled":void 0,children:r}),t(zr,{ref:z,onClick:()=>y((e=>!e)),className:"dgaui_dropdownContainer "+(h?"multiple ":"")+(g?"disabled":""),$customStyle:{theme:x,direction:x.direction,minWidth:Br[I].w,height:Br[I].h,padding:Br[I].p,fontSize:Br[I].f,placeholderFontColor:R,fontColor:F,border:U,borderHovered:D,borderFocused:O,backgroundColor:T,shadowFocus:H},children:[h&&(!A||A&&S&&(null==S?void 0:S.length)<=A)&&(null==S?void 0:S.map(((r,o)=>t(kr,{rounded:!0,size:"medium",color:"neutral",children:[M(r),e("button",{className:"deleteIcon",onClick:e=>((e,t)=>{if(e.stopPropagation(),h&&S){let r=[];const o=S.filter((e=>e!==t));B(o),r=p.filter((e=>o.includes(e))),s&&s(e,r)}})(e,r)})]},o)))),h&&A&&A>0&&S&&(null==S?void 0:S.length)>A&&t(kr,{rounded:!0,size:"medium",color:"neutral",children:[f||`${S.length} selected`,e("button",{className:"deleteIcon",onClick:e=>{e.stopPropagation(),h&&S&&(B([]),s&&s(e,[]))}})]}),e("input",{className:"dgaui",disabled:g,placeholder:c,value:C,onChange:e=>{v||y(!0),w(e.target.value),k(e.target.value)}})]}),(null==L?void 0:L.length)>0&&e("div",{className:"items"+(v?" slide-bottom":""),style:E,children:L.map(((t,r)=>{if(!t)return null;let o=t;return"object"==typeof t&&(o=null==t?void 0:t.label),e(Cr,{value:t,onClick:(e,t)=>((e,t)=>{if(h&&e.stopPropagation(),h&&S){let r=[];if(S.includes(t)){const e=S.filter((e=>e!==t));B(e),r=e}if(!S.includes(t)){const e=[...S,t];B(e),r=e}s&&s(e,r)}else{s&&s(e,t),B([t]);const r=M(t);w(r)}})(e,t),selected:null==S?void 0:S.includes(t),children:u?u(t):o},r)}))}),e(Ir,{$bgColor:Y,className:"dgaui_autocompleteSeparator"+(v?" open":"")})]})},Nr=sr.div`
   direction: ${e=>e.$theme.direction};
@@ -623,6 +623,10 @@ import{jsx as e,jsxs as t,Fragment as r}from"react/jsx-runtime";import o,{useDeb
     margin-inline-start: 4px;
     display: inline-flex;
   }
+
+  .iconOnly {
+    display: inline-flex;
+  }
 `,Gr=n=>{var i,{title:a,description:l,icon:s,type:d="default",state:c="default",effect:p="withShadow",expandableContent:u,actionsButtons:g,selected:h,expanded:A,onChange:f}=n,x=v(n,["title","description","icon","type","state","effect","expandableContent","actionsButtons","selected","expanded","onChange"]);const y=b(),[C,w]=o.useState(!1),[$,k]=o.useState(0),S=o.useRef(null),B=void 0!==A?A:C,E="selectable"===d,N="expandable"===d,z="expandable"===d||"selectable"===d?"all":"none";o.useEffect((()=>{var e;N&&(null===(e=S.current)||void 0===e?void 0:e.clientHeight)&&k(S.current.clientHeight)}),[N,null===(i=S.current)||void 0===i?void 0:i.clientHeight]);return t(Wr,Object.assign({className:m("dgaui dgaui_card"+("disabled"===c?" disabled":"")+(E?" selectable":""),x.className),$theme:y,$pointerEvents:z,$effect:p,$contentHeight:$,$expanded:B,$state:c},x,{tabIndex:0,onClick:e=>{x.onClick&&x.onClick(e),null==f||f(e,!h)},children:[(s||E)&&t("div",{className:"cardHeader",children:[e("div",{className:"iconContainer",children:s}),E&&e("div",{className:"checkboxContainer",onClick:e=>e.stopPropagation(),children:e(vr,{value:h,onChange:f,size:"medium",disabled:"disabled"===c})})]}),a&&e("div",{className:"titleContainer",children:a}),l&&e("div",{className:"descriptionContainer",children:l}),!!g&&g.length>0&&"default"===d&&e("div",{className:"actionsButtonsContainer",onClick:e=>e.stopPropagation(),children:g}),N&&t(r,{children:[e("div",{className:"caretButtonContainer",children:e("img",{src:pr,onClick:()=>{void 0===A&&w((e=>!e))},style:{transition:"all 0.2s",transform:B?"rotateZ(-180deg)":"none"}})}),e("div",{className:"expandableContentContainer",style:{height:B?$:0},children:e("div",{className:"expandableContent",ref:S,style:{visibility:B?"visible":"hidden"},children:u})})]})]}))},Wr=sr.div`
   direction: ${e=>e.$theme.direction};
   /* pointer-events: ${e=>e.$pointerEvents}; */
@@ -863,8 +867,9 @@ import{jsx as e,jsxs as t,Fragment as r}from"react/jsx-runtime";import o,{useDeb
   transition: all 0.2s;
   border-bottom-left-radius: 50px;
   border-bottom-right-radius: 50px;
-`,lo=r=>{var{children:n,menuItems:i,disabled:a,keepOpenOnItemsClicked:l,onOpen:s,onClose:d}=r,c=v(r,["children","menuItems","disabled","keepOpenOnItemsClicked","onOpen","onClose"]);const p=b(),[u,g]=o.useState(!1),[h,A]=o.useState(""),[f,x]=o.useState({top:0,left:0}),y=o.useRef(null),C=o.useRef(null),w=o.useRef(null),$=()=>{let e=Math.max(document.documentElement.clientHeight||0,window.innerHeight||0);if(C.current&&w.current){const t=C.current.getBoundingClientRect();let r={top:t.bottom,left:"ltr"===p.direction?t.left:t.right-w.current.clientWidth};"ltr"===p.direction?r.left+w.current.clientWidth>window.innerWidth&&(r.left=window.innerWidth-w.current.clientWidth):r.left&&t.right-w.current.clientWidth<0&&(r.left=0),t.bottom+w.current.clientHeight>e&&(r.top=t.top-w.current.clientHeight),r.top<0&&(r.top=0),r.top>e&&(r.top=w.current.clientHeight),x(r)}};return o.useEffect((()=>{if(C.current){const e=()=>{$()},t=e=>{var t;(null===(t=y.current)||void 0===t?void 0:t.contains(e.target))||(null==d||d(e),g(!1))};return window.addEventListener("resize",e),window.addEventListener("click",t),()=>{window.removeEventListener("resize",e),window.removeEventListener("click",t)}}}),[C]),o.useEffect((()=>{const e=document.getElementsByTagName("body");e&&e[0]&&(e[0].style.overflow=u?"hidden":h)}),[u]),o.useEffect((()=>{var e,t,r;A(null===(r=null===(t=null===(e=document.getElementsByTagName("body"))||void 0===e?void 0:e[0])||void 0===t?void 0:t.style)||void 0===r?void 0:r.overflow)}),[]),t(so,Object.assign({$theme:p},c,{className:m("dgaui dgaui_menu",c.className),ref:y,children:[e("div",{ref:C,onClick:e=>(e=>{u?(g(!1),null==d||d(e)):($(),g(!0),null==s||s(e))})(e),className:"menuChildren",children:n}),e("div",{ref:w,className:"menueItemsContainer dgaui_hiddenScrollbar "+(u?" slide-bottom":""),style:f,onClick:e=>{l||(g(!1),null==d||d(e))},children:i})]}))},so=sr.div`
+`,lo=r=>{var{children:n,menuItems:i,disabled:a,keepOpenOnItemsClicked:l,onOpen:s,onClose:d,reverseOpeningDirection:c}=r,p=v(r,["children","menuItems","disabled","keepOpenOnItemsClicked","onOpen","onClose","reverseOpeningDirection"]);const u=b(),[g,h]=o.useState(!1),[A,f]=o.useState(""),[x,y]=o.useState({top:0,left:0}),C=o.useRef(null),w=o.useRef(null),$=o.useRef(null),k=()=>{const e=Math.max(document.documentElement.clientHeight,window.innerHeight);if(w.current&&$.current){const t=w.current.getBoundingClientRect();let r={top:t.bottom,left:"ltr"===u.direction?t.left:t.right-$.current.clientWidth};"ltr"===u.direction?r.left+$.current.clientWidth>window.innerWidth&&(r.left=window.innerWidth-$.current.clientWidth):r.left&&t.right-$.current.clientWidth<0&&(r.left=0),c&&(r={top:r.top,left:"ltr"===u.direction?t.right-$.current.clientWidth:t.left},r.left<0&&(r.left=0),t.left+$.current.clientWidth>innerWidth&&(r.left=innerWidth-$.current.clientWidth)),t.bottom+$.current.clientHeight>e&&(r.top=t.top-$.current.clientHeight),r.top<0&&(r.top=0),r.top>e&&(r.top=$.current.clientHeight),y(r)}};return o.useEffect((()=>{if(w.current){const e=()=>{k()},t=e=>{var t;(null===(t=C.current)||void 0===t?void 0:t.contains(e.target))||(null==d||d(e),h(!1))};return window.addEventListener("resize",e),window.addEventListener("click",t),()=>{window.removeEventListener("resize",e),window.removeEventListener("click",t)}}}),[w,c]),o.useEffect((()=>{const e=document.getElementsByTagName("body");e&&e[0]&&(e[0].style.overflow=g?"hidden":A)}),[g]),o.useEffect((()=>{var e,t,r;f(null===(r=null===(t=null===(e=document.getElementsByTagName("body"))||void 0===e?void 0:e[0])||void 0===t?void 0:t.style)||void 0===r?void 0:r.overflow)}),[]),t(so,Object.assign({$theme:u},p,{className:m("dgaui dgaui_menu",p.className),ref:C,children:[e("div",{ref:w,onClick:e=>(e=>{g?(h(!1),null==d||d(e)):(k(),h(!0),null==s||s(e))})(e),className:"menuChildren",children:n}),e("div",{ref:$,className:"menueItemsContainer dgaui_hiddenScrollbar "+(g?" slide-bottom":""),style:x,onClick:e=>{l||(h(!1),null==d||d(e))},children:i})]}))},so=sr.div`
   direction: ${e=>e.$theme.direction};
+  display: inline-block;
 
   .menueItemsContainer {
     width: max-content;