@ynput/ayon-react-components 1.15.6 → 1.15.7

package/dist/ayon-react-components.es.js

@@ -24000,6 +24000,11 @@ const tm = (t, o) => {
   display: flex;
   ${_d}
   line-height: 1.3rem;
+  user-select: none;
+
+  & > * {
+    transition: opacity 200ms;
+  }
 
   .label {
     flex: 1;
@@ -24016,23 +24021,29 @@ const tm = (t, o) => {
     background-color: var(--default-color-hover);
     padding: 0px 4px;
     border-radius: 9px;
-    padding-bottom: 2px;
     box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
-    /* by default path is hidden but shows on hover */
-    display: none;
     opacity: 0;
   }
 
-  &:hover {
+  &.expandable:not(.show-path):hover {
+    & * {
+      transition-delay: 100ms;
+    }
     /* hide label */
     .label {
-      display: none;
+      opacity: 0;
     }
     /* show path */
     .path {
-      display: block;
       opacity: 1;
-      transition: opacity var(--hover-transition);
+    }
+  }
+
+  /* always show path */
+  &.show-path {
+    height: auto;
+    .label {
+      word-break: break-word;
     }
   }
 `, nm = Te`
@@ -24910,7 +24921,7 @@ const tm = (t, o) => {
     isLoading: pt
   } = iOe(l), et = (ye, ht) => !!ye && !E || E && R.includes(ht), Lt = () => {
     let ye = "";
-    return r && (ye += r + "/../"), o && (Array.isArray(o) ? ye += o.join("/") + "/" : ye += o + "/"), console.log(r, o), t && (ye += t), ye;
+    return r && (ye += r + "/../"), o && (Array.isArray(o) ? ye += o.join("/") + "/" : ye += o + "/"), t && (ye += t), ye;
   };
   return /* @__PURE__ */ ue(GCe, {
     className: "entity-card-wrapper",
@@ -24937,16 +24948,17 @@ const tm = (t, o) => {
         P.onKeyDown && P.onKeyDown(ye), (ye.code === "Enter" || ye.code === " ") && (om(ye) || me && me());
       },
       children: [et(t, "header") && /* @__PURE__ */ ue(QCe, {
-        "data-tooltip": Lt(),
-        "data-tooltip-delay": 0,
         ...$.header,
-        className: $e("header loading-visible", (ft = $.header) == null ? void 0 : ft.className),
+        className: $e("header loading-visible", (ft = $.header) == null ? void 0 : ft.className, {
+          expandable: !!r || !!o,
+          "show-path": n
+        }),
         children: [/* @__PURE__ */ w("span", {
           className: "path",
           children: Lt()
         }), /* @__PURE__ */ w("span", {
           className: "label",
-          children: E ? "" : t
+          children: E ? "" : n ? Lt() : t
         })]
       }), /* @__PURE__ */ ue(ZCe, {
         ...$.thumbnail,

package/dist/ayon-react-components.umd.js

@@ -2677,6 +2677,11 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
   display: flex;
   ${il}
   line-height: 1.3rem;
+  user-select: none;
+
+  & > * {
+    transition: opacity 200ms;
+  }
 
   .label {
     flex: 1;
@@ -2693,23 +2698,29 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
     background-color: var(--default-color-hover);
     padding: 0px 4px;
     border-radius: 9px;
-    padding-bottom: 2px;
     box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
-    /* by default path is hidden but shows on hover */
-    display: none;
     opacity: 0;
   }
 
-  &:hover {
+  &.expandable:not(.show-path):hover {
+    & * {
+      transition-delay: 100ms;
+    }
     /* hide label */
     .label {
-      display: none;
+      opacity: 0;
     }
     /* show path */
     .path {
-      display: block;
       opacity: 1;
-      transition: opacity var(--hover-transition);
+    }
+  }
+
+  /* always show path */
+  &.show-path {
+    height: auto;
+    .label {
+      word-break: break-word;
     }
   }
 `,Kh=be.css`
@@ -3410,7 +3421,7 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
     font-size: 16px;
     font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 200, 'opsz' 5;
   }
-`,AD={comment:{color:"primary",icon:"forum"},due:{color:"warning",icon:"schedule"},overdue:{color:"error",icon:"alarm"}},LD=["overdue","due","comment"],FD=t=>{const o=LD.find(r=>t[r]===!0);return o?AD[o]:void 0},YD=t=>{const o=`--md-sys-color-on-${t}`;return{backgroundColor:`var(${`--md-sys-color-${t}`})`,color:`var(${o})`}},Gh=W.forwardRef(({notification:t,style:o={},...r},n)=>{if(!t)return null;const e=FD(t);if(!e)return null;const{icon:i,color:c}=e,{backgroundColor:l,color:d}=YD(c);return w(RD,{style:{backgroundColor:l,...o},...r,ref:n,children:w(Ze,{icon:i,style:{color:d}})})}),$D=W.forwardRef(({header:t,path:o,project:r,showPath:n,title:e="",titleIcon:i,isPlayable:c,users:l,status:d,statusMiddle:_,statusNameOnly:p,priority:h,hidePriority:g,versions:y,imageUrl:v,imageAlt:D,imageIcon:C,notification:I,isActive:$=!1,isLoading:E=!1,loadingSections:A=["title"],isError:Y=!1,isHover:z=!1,disabled:B=!1,variant:ae="default",isCollapsed:re=!1,isDragging:j=!1,isDraggable:V=!1,assigneeOptions:H,statusOptions:J,priorityOptions:ie,editOnHover:_e,editAutoClose:fe,onAssigneeChange:q,onStatusChange:ye,onPriorityChange:ve,onActivate:ge,onTitleClick:pe,onVersionsClick:he,pt:F={},...P},N)=>{var ft,Ce,Mt,We,Ft,Dt;const U=l&&H&&!!q,Q=d&&J&&!!ye,X=h&&ie&&!!ve,se=U||Q||X,me=W.useRef(null),Ie=W.useRef(null),$e=W.useRef(null),je=W.useRef({priority:me,assignees:Ie,status:$e}),G=()=>{fe&&Object.values(je.current).forEach(we=>{var vt;(vt=we.current)!=null&&vt.isOpen&&we.current.close(!0)})},de=(we,vt)=>{const sn=je.current[vt].current;Object.entries(je.current).filter(([en])=>en!==vt).map(([en,at])=>({key:en,ref:at.current})).forEach(({key:en,ref:at})=>{if(at!=null&&at.isOpen){const Zn=en==="assignees";at.close(Zn)}}),sn&&sn.open()},Ae=W.useRef(null),[Oe,ze]=W.useState({});W.useEffect(()=>{var dt,cn,Bt,vn;if(!Ae.current||!d||Oe.status===d.name)return;const we=Ae.current;we.offsetWidth;const vt=2,sn=((dt=we.querySelector(".tag.users"))==null?void 0:dt.offsetWidth)+12||0,Rn=((cn=we.querySelector(".tag.priority"))==null?void 0:cn.offsetWidth)||(ae==="status"?28:0),en=sn+Rn+vt*2,at=((Bt=we.querySelector(".tag.status .status-label span"))==null?void 0:Bt.offsetWidth)||0,Zn=((vn=we.querySelector(".tag.status .status-short"))==null?void 0:vn.offsetWidth)||0;ze({short:en+at,icon:en+Zn,status:d==null?void 0:d.name})},[Ae.current,d==null?void 0:d.name]);const Ve=we=>{!pe||(we.stopPropagation(),pe(we))},[Re,Le]=ju(v),{users:Ge,isLoading:pt}=ND(l),tt=(we,vt)=>!!we&&!E||E&&A.includes(vt),Lt=()=>{let we="";return r&&(we+=r+"/../"),o&&(Array.isArray(o)?we+=o.join("/")+"/":we+=o+"/"),console.log(r,o),t&&(we+=t),we};return ue(kD,{className:"entity-card-wrapper",children:[ue(xD,{ref:N,$statusColor:d==null?void 0:d.color,tabIndex:0,onMouseLeave:G,...P,className:Ye({isLoading:E,active:$,error:Y,hover:z,dragging:j,draggable:V,disabled:B,collapsed:re},"entity-card",ae,P.className),onClick:we=>{Xh(we)||ge&&ge(),P.onClick&&P.onClick(we)},onKeyDown:we=>{P.onKeyDown&&P.onKeyDown(we),(we.code==="Enter"||we.code===" ")&&(Xh(we)||ge&&ge())},children:[tt(t,"header")&&ue(wD,{"data-tooltip":Lt(),"data-tooltip-delay":0,...F.header,className:Ye("header loading-visible",(ft=F.header)==null?void 0:ft.className),children:[w("span",{className:"path",children:Lt()}),w("span",{className:"label",children:E?"":t})]}),ue(DD,{...F.thumbnail,className:Ye("thumbnail",{loading:E},(Ce=F==null?void 0:F.thumbnail)==null?void 0:Ce.className),onKeyDown:we=>{var vt,sn;!V||(we.stopPropagation(),(vt=F.thumbnail)!=null&&vt.onKeyDown&&((sn=F.thumbnail)==null||sn.onKeyDown(we)),(we.code==="Enter"||we.code==="Space")&&ge&&ge())},children:[w(ED,{icon:C||"image",className:Ye("no-image",{loading:Re}),onMouseEnter:G}),v&&w(SD,{src:v,onMouseEnter:G,...F.image,className:Ye({loading:Re||Le},(Mt=F==null?void 0:F.image)==null?void 0:Mt.className)}),ue(Qh,{className:"row row-top loading-visible full",...F.topRow,children:[(!E||A.includes("title"))&&w(Ua,{className:Ye("tag title",{isLoading:E,clickable:!!pe}),onClick:Ve,...F.title,children:E?"loading card...":ue(jn,{children:[i&&w(Ze,{icon:i}),e&&w("span",{className:"inner-text",children:e})]})}),c&&w(Ua,{className:Ye("tag playable"),...F.playableTag,children:w(Ze,{icon:"play_circle"})})]}),ue(Qh,{className:Ye("row row-bottom loading-visible",{["hide-priority"]:g}),ref:Ae,...F.bottomRow,children:[se&&ue(jn,{children:[w(ID,{className:"block-leave"}),ue(PD,{className:"editor",children:[U&&w(jl,{value:l.map(we=>we.name),options:H,ref:Ie,onChange:(we,vt)=>q(we,vt),tabIndex:0,...F.assigneeSelect}),Q&&w(Ep,{value:[d.name],options:J,ref:$e,onChange:we=>ye([we]),tabIndex:0,...F.statusSelect}),X&&w(Mp,{ref:me,onChange:we=>ve(we),value:[h.value],options:ie,tabIndex:0,...F.prioritySelect})]})]}),tt(l,"users")&&w(Ua,{className:Ye("tag users",{isLoading:pt||E,editable:U,empty:!(l!=null&&l.length)}),onMouseEnter:we=>_e&&de(we,"assignees"),onClick:we=>de(we,"assignees"),...F.usersTag,children:l!=null&&l.length?w(MD,{className:Ye({more:l.length>2}),children:[...Ge].slice(0,2).map((we,vt)=>w(Js,{src:we.avatarUrl,name:we.name,style:{zIndex:-vt},fullName:we.fullName||"",size:22},vt))}):w(Ze,{icon:"person_add"})}),tt(h&&!g,"priority")&&w(Ua,{onMouseEnter:we=>_e&&de(we,"priority"),onClick:we=>de(we,"priority"),...F.priorityTag,className:Ye("tag priority",{editable:X,isLoading:E},(We=F.priorityTag)==null?void 0:We.className),children:(h==null?void 0:h.icon)&&w(Ze,{icon:h.icon,style:{color:ae=="default"?h==null?void 0:h.color:void 0}})}),tt(y,"versions")&&w(CD,{className:Ye("versions"),onClick:we=>he&&he(we),...F.versionsTag,children:(Dt=(Ft=y==null?void 0:y.toReversed())==null?void 0:Ft.slice(0,3))==null?void 0:Dt.map((we,vt)=>vt===0?w(Ua,{className:Ye("tag version",{clickable:!!he}),children:we},vt):w(OD,{children:we},vt))}),tt(d,"status")&&w(TD,{className:Ye("status-container",{middle:_,"name-only":p},`variant-${ae}`),$breakpoints:Oe,children:w("div",{className:"status-wrapper",children:ue(Ua,{className:Ye("tag status",{editable:Q,isLoading:E}),onMouseEnter:we=>_e&&de(we,"status"),onClick:we=>de(we,"status"),...F.statusTag,children:[(d==null?void 0:d.icon)&&w(Ze,{icon:d.icon,className:"status-icon",style:{color:d.color}}),(d==null?void 0:d.name)&&w("span",{className:"expander status-label",children:w("span",{children:d.name})}),(d==null?void 0:d.shortName)&&w("span",{className:"status-short",children:d.shortName})]})})})]})]})]}),w(Gh,{notification:I,...F.notificationDot})]})}),Xh=t=>t.target.closest(".editable"),WD=be.keyframes`
+`,AD={comment:{color:"primary",icon:"forum"},due:{color:"warning",icon:"schedule"},overdue:{color:"error",icon:"alarm"}},LD=["overdue","due","comment"],FD=t=>{const o=LD.find(r=>t[r]===!0);return o?AD[o]:void 0},YD=t=>{const o=`--md-sys-color-on-${t}`;return{backgroundColor:`var(${`--md-sys-color-${t}`})`,color:`var(${o})`}},Gh=W.forwardRef(({notification:t,style:o={},...r},n)=>{if(!t)return null;const e=FD(t);if(!e)return null;const{icon:i,color:c}=e,{backgroundColor:l,color:d}=YD(c);return w(RD,{style:{backgroundColor:l,...o},...r,ref:n,children:w(Ze,{icon:i,style:{color:d}})})}),$D=W.forwardRef(({header:t,path:o,project:r,showPath:n,title:e="",titleIcon:i,isPlayable:c,users:l,status:d,statusMiddle:_,statusNameOnly:p,priority:h,hidePriority:g,versions:y,imageUrl:v,imageAlt:D,imageIcon:C,notification:I,isActive:$=!1,isLoading:E=!1,loadingSections:A=["title"],isError:Y=!1,isHover:z=!1,disabled:B=!1,variant:ae="default",isCollapsed:re=!1,isDragging:j=!1,isDraggable:V=!1,assigneeOptions:H,statusOptions:J,priorityOptions:ie,editOnHover:_e,editAutoClose:fe,onAssigneeChange:q,onStatusChange:ye,onPriorityChange:ve,onActivate:ge,onTitleClick:pe,onVersionsClick:he,pt:F={},...P},N)=>{var ft,Ce,Mt,We,Ft,Dt;const U=l&&H&&!!q,Q=d&&J&&!!ye,X=h&&ie&&!!ve,se=U||Q||X,me=W.useRef(null),Ie=W.useRef(null),$e=W.useRef(null),je=W.useRef({priority:me,assignees:Ie,status:$e}),G=()=>{fe&&Object.values(je.current).forEach(we=>{var vt;(vt=we.current)!=null&&vt.isOpen&&we.current.close(!0)})},de=(we,vt)=>{const sn=je.current[vt].current;Object.entries(je.current).filter(([en])=>en!==vt).map(([en,at])=>({key:en,ref:at.current})).forEach(({key:en,ref:at})=>{if(at!=null&&at.isOpen){const Zn=en==="assignees";at.close(Zn)}}),sn&&sn.open()},Ae=W.useRef(null),[Oe,ze]=W.useState({});W.useEffect(()=>{var dt,cn,Bt,vn;if(!Ae.current||!d||Oe.status===d.name)return;const we=Ae.current;we.offsetWidth;const vt=2,sn=((dt=we.querySelector(".tag.users"))==null?void 0:dt.offsetWidth)+12||0,Rn=((cn=we.querySelector(".tag.priority"))==null?void 0:cn.offsetWidth)||(ae==="status"?28:0),en=sn+Rn+vt*2,at=((Bt=we.querySelector(".tag.status .status-label span"))==null?void 0:Bt.offsetWidth)||0,Zn=((vn=we.querySelector(".tag.status .status-short"))==null?void 0:vn.offsetWidth)||0;ze({short:en+at,icon:en+Zn,status:d==null?void 0:d.name})},[Ae.current,d==null?void 0:d.name]);const Ve=we=>{!pe||(we.stopPropagation(),pe(we))},[Re,Le]=ju(v),{users:Ge,isLoading:pt}=ND(l),tt=(we,vt)=>!!we&&!E||E&&A.includes(vt),Lt=()=>{let we="";return r&&(we+=r+"/../"),o&&(Array.isArray(o)?we+=o.join("/")+"/":we+=o+"/"),t&&(we+=t),we};return ue(kD,{className:"entity-card-wrapper",children:[ue(xD,{ref:N,$statusColor:d==null?void 0:d.color,tabIndex:0,onMouseLeave:G,...P,className:Ye({isLoading:E,active:$,error:Y,hover:z,dragging:j,draggable:V,disabled:B,collapsed:re},"entity-card",ae,P.className),onClick:we=>{Xh(we)||ge&&ge(),P.onClick&&P.onClick(we)},onKeyDown:we=>{P.onKeyDown&&P.onKeyDown(we),(we.code==="Enter"||we.code===" ")&&(Xh(we)||ge&&ge())},children:[tt(t,"header")&&ue(wD,{...F.header,className:Ye("header loading-visible",(ft=F.header)==null?void 0:ft.className,{expandable:!!r||!!o,"show-path":n}),children:[w("span",{className:"path",children:Lt()}),w("span",{className:"label",children:E?"":n?Lt():t})]}),ue(DD,{...F.thumbnail,className:Ye("thumbnail",{loading:E},(Ce=F==null?void 0:F.thumbnail)==null?void 0:Ce.className),onKeyDown:we=>{var vt,sn;!V||(we.stopPropagation(),(vt=F.thumbnail)!=null&&vt.onKeyDown&&((sn=F.thumbnail)==null||sn.onKeyDown(we)),(we.code==="Enter"||we.code==="Space")&&ge&&ge())},children:[w(ED,{icon:C||"image",className:Ye("no-image",{loading:Re}),onMouseEnter:G}),v&&w(SD,{src:v,onMouseEnter:G,...F.image,className:Ye({loading:Re||Le},(Mt=F==null?void 0:F.image)==null?void 0:Mt.className)}),ue(Qh,{className:"row row-top loading-visible full",...F.topRow,children:[(!E||A.includes("title"))&&w(Ua,{className:Ye("tag title",{isLoading:E,clickable:!!pe}),onClick:Ve,...F.title,children:E?"loading card...":ue(jn,{children:[i&&w(Ze,{icon:i}),e&&w("span",{className:"inner-text",children:e})]})}),c&&w(Ua,{className:Ye("tag playable"),...F.playableTag,children:w(Ze,{icon:"play_circle"})})]}),ue(Qh,{className:Ye("row row-bottom loading-visible",{["hide-priority"]:g}),ref:Ae,...F.bottomRow,children:[se&&ue(jn,{children:[w(ID,{className:"block-leave"}),ue(PD,{className:"editor",children:[U&&w(jl,{value:l.map(we=>we.name),options:H,ref:Ie,onChange:(we,vt)=>q(we,vt),tabIndex:0,...F.assigneeSelect}),Q&&w(Ep,{value:[d.name],options:J,ref:$e,onChange:we=>ye([we]),tabIndex:0,...F.statusSelect}),X&&w(Mp,{ref:me,onChange:we=>ve(we),value:[h.value],options:ie,tabIndex:0,...F.prioritySelect})]})]}),tt(l,"users")&&w(Ua,{className:Ye("tag users",{isLoading:pt||E,editable:U,empty:!(l!=null&&l.length)}),onMouseEnter:we=>_e&&de(we,"assignees"),onClick:we=>de(we,"assignees"),...F.usersTag,children:l!=null&&l.length?w(MD,{className:Ye({more:l.length>2}),children:[...Ge].slice(0,2).map((we,vt)=>w(Js,{src:we.avatarUrl,name:we.name,style:{zIndex:-vt},fullName:we.fullName||"",size:22},vt))}):w(Ze,{icon:"person_add"})}),tt(h&&!g,"priority")&&w(Ua,{onMouseEnter:we=>_e&&de(we,"priority"),onClick:we=>de(we,"priority"),...F.priorityTag,className:Ye("tag priority",{editable:X,isLoading:E},(We=F.priorityTag)==null?void 0:We.className),children:(h==null?void 0:h.icon)&&w(Ze,{icon:h.icon,style:{color:ae=="default"?h==null?void 0:h.color:void 0}})}),tt(y,"versions")&&w(CD,{className:Ye("versions"),onClick:we=>he&&he(we),...F.versionsTag,children:(Dt=(Ft=y==null?void 0:y.toReversed())==null?void 0:Ft.slice(0,3))==null?void 0:Dt.map((we,vt)=>vt===0?w(Ua,{className:Ye("tag version",{clickable:!!he}),children:we},vt):w(OD,{children:we},vt))}),tt(d,"status")&&w(TD,{className:Ye("status-container",{middle:_,"name-only":p},`variant-${ae}`),$breakpoints:Oe,children:w("div",{className:"status-wrapper",children:ue(Ua,{className:Ye("tag status",{editable:Q,isLoading:E}),onMouseEnter:we=>_e&&de(we,"status"),onClick:we=>de(we,"status"),...F.statusTag,children:[(d==null?void 0:d.icon)&&w(Ze,{icon:d.icon,className:"status-icon",style:{color:d.color}}),(d==null?void 0:d.name)&&w("span",{className:"expander status-label",children:w("span",{children:d.name})}),(d==null?void 0:d.shortName)&&w("span",{className:"status-short",children:d.shortName})]})})})]})]})]}),w(Gh,{notification:I,...F.notificationDot})]})}),Xh=t=>t.target.closest(".editable"),WD=be.keyframes`
   0% {
     background-position: -1000px 0;
   }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ynput/ayon-react-components",
   "private": false,
-  "version": "1.15.6",
+  "version": "1.15.7",
   "type": "module",
   "repository": {
     "type": "git",